*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-tap-highlight-color: transparent; }

/* ========== 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 ========== */
/* iOS 26 Safari tints the strip under the clock from the background-color of a fixed element at the very top
   (theme-color is ignored) and skips elements with backdrop-filter. The navbar starts transparent and later
   blurs, so Safari showed the page through that strip while scrolling (owner 2026-10-25 video). This 4px solid
   strip is the element it reads: opaque page colour, above the navbar, follows the theme. */
.vk-tint { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 101; background-color: var(--bg); pointer-events: none; }
.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;
}
.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;
}
/* The desktop row tightens a little before the hamburger takes over at 960px,
   so the links never wrap to a second line. */
@media (min-width: 961px) and (max-width: 1100px) {
  .nav-right { gap: 22px; }
}
/* Signed-in rows swap the Login pill for the account chip (and Admin), about
   210px wider, so they tighten first. Measured 2026-10-19 with Vibe Check in
   the row and a 150px email: worst case 52px spare at 1101px+, 77px at 961px. */
.nav-right.nav-authed { gap: 24px; }
@media (min-width: 961px) and (max-width: 1100px) {
  .nav-right.nav-authed { gap: 14px; }
  .nav-right.nav-authed .nav-account-email { max-width: 96px; }
}
.nav-right a:focus-visible,
.theme-toggle:focus-visible,
.nav-account-chip:focus-visible,
.mobile-menu-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px; }

/* ========== MOBILE MENU (hamburger + sheet) ========== */
:root {
  --ns-bg: #0a0b0d;
  --ns-row-hover: rgba(255,255,255,0.05);
  --ns-row-current: rgba(255,255,255,0.07);
  --ns-scrim: rgba(0,0,0,0.55);
  --ns-cta-bg: #10B981;
  --ns-cta-text: #04140d;
  --ns-cta-hover: #34D399;
}
[data-theme="light"] {
  --ns-bg: #ffffff;
  --ns-row-hover: rgba(17,17,20,0.04);
  --ns-row-current: rgba(17,17,20,0.06);
  --ns-scrim: rgba(17,17,20,0.28);
  --ns-cta-bg: #059669;
  --ns-cta-text: #ffffff;
  --ns-cta-hover: #047857;
}
.mnav-search { display: none; }
/* The header Search pill: phones and every width that shows the hamburger. */
@media (max-width: 960px) {
  .mnav-search { display: inline-flex; align-items: center; gap: 7px; height: 34px; margin-left: auto; margin-right: 6px; padding: 0 12px 0 10px; border-radius: 999px; border: 0; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.62); font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .mnav-search svg { width: 15px; height: 15px; }
  .mnav-search span { font-size: 13.5px; }
  [data-theme="light"] .mnav-search { background: #f1f2f4; color: #4b5563; }
}
.mobile-menu-btn {
  display: none;
  width: 40px; height: 40px;
  margin-right: -10px;
  padding: 0;
  align-items: center; justify-content: center; flex-direction: column;
  border-radius: 10px;
  color: var(--heading);
}
.mobile-menu-btn span {
  display: block; width: 18px; height: 1.5px; margin: 2.5px 0;
  background: #FFFFFF; border-radius: 1px;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
html.nav-open .mobile-menu-btn span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
html.nav-open .mobile-menu-btn span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
html.nav-open .mobile-menu-btn span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-scrim, .nav-sheet { display: none; }
@media (max-width: 960px) {
  .nav-right { display: none; }
  .mobile-menu-btn { display: inline-flex; }
  .nav-scrim, .nav-sheet { display: flex; }
  html.nav-open, html.nav-open body { overflow: hidden; }
  html.nav-open .navbar {
    background: var(--ns-bg);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    border-bottom: 0.5px solid var(--border);
    transition: none;
  }
  .nav-scrim {
    position: fixed; inset: 56px 0 0 0; z-index: 98;
    background: var(--ns-scrim);
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
  }
  .nav-sheet {
    position: fixed; top: 56px; right: 0; bottom: 0; z-index: 99;
    width: 100%; max-width: 420px;
    flex-direction: column;
    background: var(--ns-bg);
    border-left: 0.5px solid var(--border);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.38s;
  }
  html.nav-open .nav-scrim { opacity: 1; visibility: visible; }
  html.nav-open .nav-sheet { transform: none; visibility: visible; }
  html.nav-instant .nav-sheet, html.nav-instant .nav-scrim, html.nav-instant .mobile-menu-btn span { transition: none; }
}
@media (max-width: 420px) {
  .nav-sheet { border-left: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-sheet, .nav-scrim, .mobile-menu-btn span { transition: none !important; }
}
.ns-scroll {
  flex: 1; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 16px 12px 12px;
}
.ns-search { display: flex; align-items: center; gap: 10px; height: 46px; margin: 0 4px 8px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border); background: rgba(255,255,255,0.04); }
.ns-search:focus-within { border-color: var(--accent-soft-border); }
.ns-search svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .55; }
.ns-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: inherit; font-family: inherit; font-size: 15px; -webkit-appearance: none; }
[data-theme="light"] .ns-search { background: #f5f6f8; }

/* ---- site search (src/searchUi.js) ---- */
/* navbar trigger, every page */
.vk-navsrch { display: none; }
@media (min-width: 961px) {
  .navbar-inner > .logo { flex-shrink: 0; margin-right: 24px; }
  .vk-navsrch { display: flex; align-items: center; gap: 8px; flex: 0 1 330px; min-width: 0; height: 34px; margin: 0 24px 0 auto; padding: 0 6px 0 10px; box-sizing: border-box; border-radius: 10px; border: 1px solid rgba(255,255,255,0.13); background: rgba(255,255,255,0.025); color: rgba(255,255,255,0.55); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 12.5px; font-weight: 500; line-height: 1; letter-spacing: -0.005em; text-align: left; white-space: nowrap; cursor: pointer; transition: border-color .15s, color .15s; }
  .vk-navsrch:hover { border-color: rgba(255,255,255,0.24); color: rgba(255,255,255,0.82); }
  .vk-navsrch:focus-visible { outline: 2px solid #10B981; outline-offset: 2px; }
  .vk-navsrch svg { width: 15px; height: 15px; flex-shrink: 0; }
  .vk-navsrch-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .vk-navsrch-s { display: none; flex: 1; }
  .vk-navsrch kbd { display: inline-grid; place-items: center; flex-shrink: 0; min-width: 22px; height: 22px; padding: 0 6px; box-sizing: border-box; border-radius: 6px; border: 1px solid rgba(255,255,255,0.13); font-family: inherit; font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.7); }
  [data-theme="light"] .vk-navsrch { border-color: rgba(10,10,15,0.14); background: #fff; color: #6b7280; }
  [data-theme="light"] .vk-navsrch:hover { color: #111827; border-color: rgba(10,10,15,0.24); }
  [data-theme="light"] .vk-navsrch kbd { border-color: rgba(10,10,15,0.14); color: #374151; }
}
/* narrower rows: a short "Search" pill, so the links never wrap */
@media (min-width: 961px) and (max-width: 1179px) {
  .vk-navsrch { flex: 0 0 auto; margin-right: 18px; }
  .vk-navsrch-t { display: none; }
  .vk-navsrch-s { display: inline; padding-right: 6px; }
}
@media (min-width: 1180px) and (max-width: 1365px) {
  .vk-navsrch.vk-navsrch-c { flex: 0 0 auto; }
  .vk-navsrch.vk-navsrch-c .vk-navsrch-t { display: none; }
  .vk-navsrch.vk-navsrch-c .vk-navsrch-s { display: inline; padding-right: 6px; }
}
.vks { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: #0a0a0c; }
.vks[hidden] { display: none; }
html.vks-open, html.vks-open body { overflow: hidden; }
.vks-panel { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.vks-bar { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.vks-form { flex: 1; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 12px; background: rgba(255,255,255,0.07); min-width: 0; }
.vks-form svg { width: 17px; height: 17px; opacity: .6; flex-shrink: 0; }
.vks-form input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font-family: inherit; font-size: 16px; letter-spacing: -0.01em; text-overflow: ellipsis; -webkit-appearance: none; }
.vks-form input::placeholder { color: rgba(255,255,255,0.42); }
.vks-cancel { border: 0; background: none; padding: 8px 2px; color: #10b981; font-family: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.vks-esc { display: none; }
.vks-load { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; opacity: 0; transition: opacity .15s; pointer-events: none; }
.vks-load::before { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; background: linear-gradient(90deg, transparent, #10B981, transparent); animation: vksLoad .9s linear infinite; }
.vks.vks-busy .vks-load { opacity: 1; transition-delay: .08s; }
@keyframes vksLoad { to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .vks-load::before { animation: none; left: 0; width: 100%; opacity: .6; } }
.vks-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 4px 8px 28px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.14) transparent; }
.vks-body::-webkit-scrollbar { width: 10px; }
.vks-body::-webkit-scrollbar-track { background: transparent; }
.vks-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
.vks-body::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,0.2); }
.vks-foot { display: none; }
.vks-hint { margin: 0; padding: 18px 10px; font-size: 14px; color: rgba(255,255,255,0.48); }
.vks-g + .vks-g, .vks-tp + .vks-g { margin-top: 4px; }
/* Sentence case, no tracking (owner 2026-10-28: the crown + "PREMIUM" header "looks maldesigned"). */
.vks-gh { display: flex; align-items: center; gap: 8px; padding: 14px 10px 6px; font-size: 12.5px; font-weight: 600; letter-spacing: normal; text-transform: none; color: rgba(255,255,255,0.55); }
.vks-gh > span { display: inline-flex; align-items: center; gap: 6px; }
.vks-gh i { font-style: normal; display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.62); font-size: 11px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.vks-gh svg { width: 13px; height: 13px; flex: none; }
.vks-gh-gold { color: rgba(255,255,255,0.55); }
.vks-gh-gold svg { color: #E7B416; fill: #E7B416; }
.vks-clr { margin-left: auto; border: 0; background: none; padding: 2px 4px; color: rgba(255,255,255,0.48); font-family: inherit; font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: 0; text-transform: none; cursor: pointer; }
.vks-clr:hover, .vks-clr:focus-visible { color: #fff; }
.vks-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; color: inherit; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vks-row.on { background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.vks-row:focus-visible { outline: 2px solid #10B981; outline-offset: -2px; }
.vks-ico { position: relative; overflow: hidden; flex-shrink: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); color: rgba(255,255,255,0.86); font-weight: 700; font-size: 15px; }
.vks-ico img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; opacity: 0; }
.vks-ico.ok img { opacity: 1; }
.vks-ico.ok .vks-lt { visibility: hidden; }
.vks-ico svg { width: 16px; height: 16px; opacity: .72; }
.vks-txt { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vks-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vks-l1 b { min-width: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vks-l2 { font-size: 13px; color: rgba(255,255,255,0.56); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vks-l3 { display: flex; gap: 8px; font-size: 12px; color: rgba(255,255,255,0.42); white-space: nowrap; overflow: hidden; }
.vks-l3 .vks-age::before { content: "\00b7"; margin-right: 8px; }
.vks-row mark { background: none; color: #34D399; }
.vks-meta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; font-size: 12px; color: rgba(255,255,255,0.46); white-space: nowrap; }
.vks-meta .vks-cat, .vks-meta .vks-age { display: none; }
.vks-age { font-variant-numeric: tabular-nums; }
.vks-prem { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; height: 20px; padding: 0 8px; border-radius: 999px; background: rgba(242,182,74,0.12); color: #F2B64A; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0; white-space: nowrap; }
.vks-prem svg { width: 11px; height: 11px; flex-shrink: 0; }
.vks-hy { display: block; width: 44px; height: 5px; border-radius: 99px; background: rgba(255,255,255,0.09); overflow: hidden; flex-shrink: 0; }
.vks-hy i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #059669, #34D399); }
.vks-hy0 { display: none; }
.vks-go { display: grid; place-items: center; flex-shrink: 0; color: rgba(255,255,255,0.4); }
.vks-go svg { width: 15px; height: 15px; }
.vks-sm { padding: 7px 10px; }
.vks-sm .vks-ico { width: 30px; height: 30px; border-radius: 8px; font-size: 13px; }
.vks-sm .vks-l1 b { font-size: 14px; }
.vks-sm .vks-l2 { font-size: 12.5px; }
.vks-all { justify-content: space-between; margin-top: 6px; padding: 12px 10px; color: #10b981; font-size: 14px; font-weight: 600; }
.vks-all svg { width: 15px; height: 15px; flex-shrink: 0; }
.vks-tabs { display: flex; gap: 4px; padding: 10px 6px 4px; }
.vks-tab { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid transparent; background: none; color: rgba(255,255,255,0.55); font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: -0.005em; cursor: pointer; }
.vks-tab:hover { color: #fff; }
.vks-tab[aria-selected="true"] { color: #fff; background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.08); }
.vks-tab:focus-visible { outline: 2px solid #10B981; outline-offset: 1px; }
.vks-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 10px 8px; }
.vks-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; max-width: 100%; padding: 0 12px; box-sizing: border-box; border-radius: 999px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.025); color: rgba(255,255,255,0.8); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vks-chip > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.vks-chip.on { border-color: rgba(16,185,129,0.55); background: rgba(16,185,129,0.08); color: #fff; }
.vks-chip .vks-ico { width: 18px; height: 18px; border-radius: 5px; font-size: 10px; box-shadow: none; }
.vks-chip .vks-ico svg { width: 12px; height: 12px; }
.vks-pchip { border-color: rgba(242,182,74,0.26); }
.vks-dym { padding: 14px 10px 4px; font-size: 14px; color: rgba(255,255,255,0.62); }
.vks-dym a { color: #34D399; font-weight: 600; text-decoration: none; }
.vks-dym a:hover { text-decoration: underline; }
.vks-none { padding: 18px 10px 8px; }
.vks-none-t { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: #fff; overflow-wrap: anywhere; }
.vks-none-s { margin: 0 0 12px; font-size: 13.5px; color: rgba(255,255,255,0.56); }
.vks-none .vks-chips { padding: 0 0 10px; }
.vks-none .vks-gh { padding-left: 0; }
.vks-none .vks-row { margin: 0 -10px; }
.vks-list { justify-content: space-between; color: #10b981; font-size: 14px; font-weight: 600; }
.vks-list svg { width: 15px; height: 15px; }
@media (min-width: 1025px) {
  .vks { align-items: center; padding: 12vh 24px 24px; background: rgba(0,0,0,0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .vks-panel { flex: 0 1 auto; width: 100%; max-width: 620px; max-height: calc(88vh - 24px); border-radius: 16px; border: 1px solid rgba(255,255,255,0.1); background: #0c0c0f; box-shadow: 0 24px 64px -16px rgba(0,0,0,0.8); overflow: hidden; }
  .vks-bar { padding: 8px 12px 8px 8px; }
  .vks-form { height: 48px; padding: 0 4px 0 12px; background: transparent; }
  .vks-form svg { width: 18px; height: 18px; }
  .vks-form input { font-size: 16.5px; }
  .vks-form input::-webkit-search-cancel-button { display: none; }
  .vks-cancel { display: none; }
  .vks-esc { display: inline-grid; place-items: center; flex-shrink: 0; height: 24px; padding: 0 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.13); background: none; color: rgba(255,255,255,0.6); font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0; cursor: pointer; }
  .vks-esc:hover { color: #fff; border-color: rgba(255,255,255,0.24); }
  .vks-body { flex: 0 1 auto; max-height: 56vh; padding: 4px 8px 10px; }
  .vks-foot { display: flex; align-items: center; gap: 16px; padding: 9px 16px; border-top: 1px solid rgba(255,255,255,0.08); font-size: 12px; color: rgba(255,255,255,0.46); }
  .vks-foot span { display: inline-flex; align-items: center; gap: 4px; }
  .vks-foot kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 4px; border: 1px solid rgba(255,255,255,0.13); font-family: inherit; font-size: 10.5px; font-weight: 600; line-height: 1; color: rgba(255,255,255,0.66); }
  .vks-l3 { display: none; }
  /* fixed columns on the right: category | age | hype, aligned on every row */
  .vks-meta { gap: 14px; }
  .vks-meta .vks-cat, .vks-meta .vks-age { display: block; }
  .vks-meta .vks-cat { width: 92px; overflow: hidden; text-overflow: ellipsis; }
  .vks-meta .vks-age { width: 30px; text-align: right; }
  .vks-hy0 { display: block; visibility: hidden; background: none; }
}
[data-theme="light"] .vks { background: #fff; }
[data-theme="light"] .vks-bar { border-bottom-color: #eceef1; }
[data-theme="light"] .vks-form { background: #f1f2f4; }
[data-theme="light"] .vks-form input, [data-theme="light"] .vks-l1 b, [data-theme="light"] .vks-ico, [data-theme="light"] .vks-none-t { color: #111; }
[data-theme="light"] .vks-form input::placeholder { color: #8a8f98; }
[data-theme="light"] .vks-ico { background: #f4f5f7; box-shadow: inset 0 0 0 1px rgba(10,10,15,0.08); }
[data-theme="light"] .vks-l2, [data-theme="light"] .vks-hint, [data-theme="light"] .vks-none-s, [data-theme="light"] .vks-dym { color: #5b616b; }
[data-theme="light"] .vks-l3, [data-theme="light"] .vks-meta, [data-theme="light"] .vks-gh, [data-theme="light"] .vks-clr { color: #6b7280; }
[data-theme="light"] .vks-gh i { background: rgba(10,10,15,0.06); color: #4b5563; }
[data-theme="light"] .vks-prem { color: #A16207; }
[data-theme="light"] .vks-gh-gold { color: #5b6470; }
[data-theme="light"] .vks-gh-gold svg { color: #C99A06; fill: #C99A06; }
[data-theme="light"] .vks-prem { background: rgba(217,119,6,0.10); }
[data-theme="light"] .vks-clr:hover { color: #111; }
[data-theme="light"] .vks-row.on { background: rgba(10,10,15,0.045); box-shadow: inset 0 0 0 1px rgba(10,10,15,0.08); }
[data-theme="light"] .vks-row mark, [data-theme="light"] .vks-dym a { color: #047857; }
[data-theme="light"] .vks-hy { background: #e5e7eb; }
[data-theme="light"] .vks-hy i { background: linear-gradient(90deg, #047857, #10B981); }
[data-theme="light"] .vks-go { color: #9ca3af; }
[data-theme="light"] .vks-all, [data-theme="light"] .vks-list { color: #047857; }
[data-theme="light"] .vks-tab { color: #6b7280; }
[data-theme="light"] .vks-tab:hover, [data-theme="light"] .vks-tab[aria-selected="true"] { color: #111; }
[data-theme="light"] .vks-tab[aria-selected="true"] { background: rgba(10,10,15,0.045); border-color: rgba(10,10,15,0.08); }
[data-theme="light"] .vks-chip { border-color: rgba(10,10,15,0.1); background: #fff; color: #374151; }
[data-theme="light"] .vks-chip.on { border-color: rgba(4,120,87,0.5); background: rgba(16,185,129,0.06); color: #111; }
[data-theme="light"] .vks-pchip { border-color: rgba(161,98,7,0.3); }
[data-theme="light"] .vks-body { scrollbar-color: rgba(10,10,15,0.18) transparent; }
[data-theme="light"] .vks-body::-webkit-scrollbar-thumb { background-color: rgba(10,10,15,0.16); }
@media (min-width: 1025px) {
  [data-theme="light"] .vks { background: rgba(17,17,20,0.28); }
  [data-theme="light"] .vks-panel { background: #fff; border-color: rgba(10,10,15,0.1); box-shadow: 0 24px 64px -20px rgba(10,10,15,0.3); }
  [data-theme="light"] .vks-form { background: transparent; }
  [data-theme="light"] .vks-esc, [data-theme="light"] .vks-foot kbd { border-color: rgba(10,10,15,0.14); color: #4b5563; }
  [data-theme="light"] .vks-foot { border-top-color: #eceef1; color: #6b7280; }
}
/* results page (/search) */
.vksp { max-width: 760px; margin: 0 auto; padding: 104px 20px 72px; box-sizing: border-box; }
.vksp-form { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 6px 0 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.13); background: rgba(255,255,255,0.025); }
.vksp-form:focus-within { border-color: rgba(16,185,129,0.55); box-shadow: 0 0 0 3px rgba(16,185,129,0.12); }
.vksp-form svg { width: 18px; height: 18px; flex-shrink: 0; color: rgba(255,255,255,0.5); }
.vksp-form input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: #fff; font-family: inherit; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; -webkit-appearance: none; }
.vksp-form input::placeholder { color: rgba(255,255,255,0.42); }
.vksp-form button { flex-shrink: 0; height: 40px; padding: 0 16px; border-radius: 10px; border: 0; background: #10B981; color: #04120c; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.vksp-form button:hover { background: #34D399; }
.vksp-h1 { margin: 28px 0 4px; font-size: 26px; line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; color: #fff; overflow-wrap: anywhere; }
.vksp-sub { margin: 0 0 14px; font-size: 14px; color: rgba(255,255,255,0.52); }
.vksp .vks-dym { padding: 0 0 12px; }
.vksp-groups { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.vksp-list { display: flex; flex-direction: column; gap: 2px; margin: 0 -10px; }
.vksp .vks-row:hover { background: rgba(255,255,255,0.04); }
.vksp .vks-gh { padding-left: 0; }
.vksp-pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 28px 0 0; }
.vksp-pager a, .vksp-pager span { min-width: 40px; height: 38px; padding: 0 12px; box-sizing: border-box; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.025); color: rgba(255,255,255,0.72); font-size: 14px; font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
.vksp-pager a:hover { border-color: rgba(16,185,129,0.5); color: #fff; }
.vksp-pager .cur { border-color: rgba(16,185,129,0.55); color: #fff; background: rgba(16,185,129,0.1); }
.vksp-pager .gap { border: 0; background: none; min-width: 0; padding: 0 2px; }
.vksp .vks-none { padding: 6px 0 0; }
.vksp .vks-none .vks-row { margin: 0; }
@media (min-width: 1025px) { .vksp { padding-top: 120px; } }
@media (max-width: 480px) { .vksp { padding-left: 16px; padding-right: 16px; } .vksp-h1 { font-size: 22px; } .vksp-form button { padding: 0 12px; } }
[data-theme="light"] .vksp-form { border-color: rgba(10,10,15,0.14); background: #fff; }
[data-theme="light"] .vksp-form input { color: #111; }
[data-theme="light"] .vksp-form input::placeholder { color: #8a8f98; }
[data-theme="light"] .vksp-form svg { color: #6b7280; }
[data-theme="light"] .vksp-h1 { color: #111; }
[data-theme="light"] .vksp-sub { color: #6b7280; }
[data-theme="light"] .vksp .vks-row:hover { background: rgba(10,10,15,0.04); }
[data-theme="light"] .vksp-pager a, [data-theme="light"] .vksp-pager span { border-color: rgba(10,10,15,0.1); background: #fff; color: #374151; }
[data-theme="light"] .vksp-pager .cur { border-color: rgba(4,120,87,0.5); color: #111; background: rgba(16,185,129,0.08); }
[data-theme="light"] .vksp-pager .gap { background: none; }

.ns-group { padding: 12px 0 8px; }
.ns-group + .ns-group { border-top: 0.5px solid var(--border); margin-top: 4px; }
.ns-label {
  font-size: 12.5px; font-weight: 500; line-height: 1.4;
  color: var(--text-fainter);
  padding: 0 12px; margin: 0 0 6px;
}
.ns-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ns-row {
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 48px;
  padding: 0 12px;
  border-radius: 10px;
  font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1.2;
  color: var(--text-strong);
  text-align: left;
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease;
}
.ns-row:hover, .ns-row:active { background: var(--ns-row-hover); color: var(--heading); }
.ns-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--text-faint); transition: color 0.15s ease; }
.ns-row:hover .ns-icon { color: var(--text-strong); }
.ns-row.is-current { background: var(--ns-row-current); color: var(--heading); font-weight: 600; }
.ns-row.is-current .ns-icon { color: var(--accent); }
.ns-row-muted { color: var(--text-dim); }
.ns-row:focus-visible, .ns-account:focus-visible, .ns-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ns-theme-icon { display: inline-flex; }
.ns-theme .ns-sun, .ns-val-light { display: none; }
[data-theme="light"] .ns-theme .ns-sun, [data-theme="light"] .ns-val-light { display: inline; }
[data-theme="light"] .ns-theme .ns-moon, [data-theme="light"] .ns-val-dark { display: none; }
.ns-theme-val {
  margin-left: auto;
  font-size: 13px; font-weight: 500; color: var(--text-dim);
  padding: 4px 10px; border-radius: 980px;
  background: var(--fill-subtle); border: 0.5px solid var(--border);
}
.ns-account {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 4px; padding: 12px;
  border-radius: 14px;
  background: var(--fill-faint);
  border: 0.5px solid var(--border);
  color: var(--text-strong);
  transition: background 0.15s ease;
}
.ns-account:hover { background: var(--ns-row-hover); }
.ns-avatar {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 50%; object-fit: cover;
  border: 0.5px solid var(--border-strong);
}
.ns-avatar-ph {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #10B981, #059669);
  color: #fff; font-size: 16px; font-weight: 600; border: none;
}
.ns-account-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ns-account-name, .ns-account-mail { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ns-account-name { font-size: 15px; font-weight: 600; color: var(--heading); line-height: 1.3; }
.ns-account-mail { font-size: 13px; color: var(--text-faint); line-height: 1.35; }
.ns-chevron { width: 18px; height: 18px; flex-shrink: 0; color: var(--text-fainter); }
.ns-footer {
  display: flex; gap: 10px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  border-top: 0.5px solid var(--border);
  background: var(--ns-bg);
}
.ns-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 18px;
  border-radius: 12px;
  font-size: 15px; font-weight: 600; white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ns-btn-primary { flex: 1; background: var(--ns-cta-bg); color: var(--ns-cta-text); }
.ns-btn-primary:hover { background: var(--ns-cta-hover); }
.ns-btn-secondary {
  flex: 0 0 auto;
  background: var(--fill-subtle); color: var(--heading);
  border: 0.5px solid var(--border-strong);
}
.ns-btn-secondary:hover { background: var(--ns-row-hover); border-color: var(--text-ghost); }
.ns-btn-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* ========== 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) {
  /* minmax(0,1fr), not 1fr: the arena copy made the page 8px too wide at 320px. */
  .at-inner { grid-template-columns: minmax(0, 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; }
}
@media (max-width: 400px) { .arena-teaser { padding-left: 16px; padding-right: 16px; } .at-inner { padding: 20px; } }
.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) {
  /* minmax(0,1fr) + min-width:0: a long product name must ellipsize, not widen
     the card. A 465px card made the page 481px wide on phones and pushed the
     fixed navbar's Search + menu button off-screen (2026-10-17). */
  .hof-cards { grid-template-columns: minmax(0, 1fr); }
  .hofc { flex-direction: row; align-items: center; gap: 10px; padding: 11px 13px; min-width: 0; }
  .hofc-when { min-width: 76px; }
  .hofc-name { flex: 1; min-width: 0; }
}
.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;
}
/* Premium tag + Product of the Day pill: in the row markup, shown only by the
   desktop homepage layout (src/homeDesk.js). */
.vk-prem, .vk-potd { display: none; }
.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); }

/* ========== SITE FOOTER (one footer on every page, owner 2026-10-25: the homepage and the other pages had two
   different footers; the homepage one was wider than the page, ragged, repeated itself and linked to removed
   pages). Aligned with the navbar (1080px), three balanced columns, readable link colour. ========== */
.vkf { margin-top: 88px; border-top: 1px solid var(--border); background: transparent; }
.vkf-in { max-width: 1080px; margin: 0 auto; padding: 56px 32px 44px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.75fr); gap: 56px; }
.vkf-logo { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; color: var(--heading); letter-spacing: -0.01em; text-decoration: none; }
.vkf-logo svg { width: 24px; height: 24px; }
.vkf-brand p { margin: 14px 0 20px; max-width: 300px; font-size: 14px; line-height: 1.6; color: var(--text-dim); }
.vkf-cta { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 13.5px; font-weight: 600; color: var(--heading); text-decoration: none; transition: border-color .15s, background-color .15s; }
.vkf-cta:hover { border-color: var(--accent); background: var(--accent-soft); }
.vkf-cols { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 32px; }
.vkf-col h4 { margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.vkf-col a { display: block; padding: 5px 0; font-size: 14px; line-height: 1.5; color: var(--text-dim); text-decoration: none; transition: color .15s; }
.vkf-col a:hover, .vkf-bar a:hover { color: var(--heading); }
.vkf-bar { max-width: 1080px; margin: 0 auto; padding: 20px 32px 40px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--text-faint); }
.vkf-bar-r { display: flex; flex-wrap: wrap; gap: 20px; }
.vkf-bar a { color: var(--text-faint); text-decoration: none; transition: color .15s; }
@media (max-width: 860px) {
  .vkf { margin-top: 64px; }
  .vkf-in { grid-template-columns: minmax(0,1fr); gap: 36px; padding: 40px 20px 32px; }
  .vkf-cols { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px 20px; }
  .vkf-bar { flex-direction: column; align-items: flex-start; padding: 18px 20px 32px; }
}
@media (max-width: 420px) {
  .vkf-in, .vkf-bar { padding-left: 16px; padding-right: 16px; }
}

/* ========== FOOTER (old, unused since 2026-10-25) ========== */
.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; }
  .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; }

/* --- 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); }

/* ---- HOMEPAGE: original data reports (2026-10-25), same gutters as the arena teaser ---- */
.hm-reports { max-width: 1140px; margin: 44px auto 0; padding: 0 32px; }
.hm-reports h2.hm-sec-title { margin: 0; }
.hm-reports-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; border-top: 0.5px solid var(--border); }
.hm-reports-list li { margin: 0; border-bottom: 0.5px solid var(--border); min-width: 0; }
.hm-reports-list a { display: flex; flex-direction: column; gap: 3px; padding: 14px 0; text-decoration: none; }
.hmr-t { font-size: 14.5px; font-weight: 600; color: var(--heading); letter-spacing: -0.01em; line-height: 1.35; }
.hmr-d { font-size: 12.5px; color: var(--text-faint); }
.hm-reports-list a:hover .hmr-t { color: var(--accent); }
@media (max-width: 860px) { .hm-reports-list { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .hm-reports { padding-left: 20px; padding-right: 20px; margin-top: 32px; } }
@media (max-width: 400px) { .hm-reports { padding-left: 16px; padding-right: 16px; } }

/* ---- 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: minmax(0,1.4fr) repeat(3, minmax(0,1fr)); gap: 32px 40px; align-items: start; }
/* The sitemap footer carries its own gutter. The outer .footer is padded 32px
   for the old one-row footer, so the two stacked (48px in from the edge on a
   phone, where every other block sits at 16px). Drop the outer box here only. */
.footer.footer-sitemap, section.auc ~ .footer.footer-sitemap { max-width: none; padding: 0; }
.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 24px; grid-auto-flow: row dense; }
  .fm-brand-col { grid-column: 1 / -1; max-width: none; }
  /* Three link columns in a 2-up grid left a hole. Discover + Developers share
     a row; Categories takes the full width with its links in two sub-columns. */
  .fm-col-cat { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .fm-col-cat h4 { grid-column: 1 / -1; }
  .footer-map-copy { margin-top: 32px; line-height: 1.7; }
}
@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-card { flex-wrap: wrap; }
  .potd-medal { position: static; flex-basis: 100%; margin-bottom: -4px; }
  .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; }
  /* Site footer: same 16px gutter as the page, not 32px (the sitemap footer zeroes it). */
  .footer { 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) ==================== */
/* (Unused since 2026-10-15, the mark was removed.) 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 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; }
}

.vk-hype{display:inline-flex;flex-direction:column;gap:5px;flex-shrink:0;}
.vk-hype-sm{width:64px;}
.vk-hype-l{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.42);line-height:1;}
.vk-hype-t{display:block;width:100%;height:6px;border-radius:99px;background:rgba(255,255,255,.09);overflow:hidden;}
.vk-hype-f{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#059669,#34D399);}
.vk-hype-lg{display:flex;width:100%;gap:8px;}
.vk-hype-lg .vk-hype-t{height:8px;}
.vk-hype-cap{font-size:12px;line-height:1.4;color:rgba(255,255,255,.5);}
.vk-hype-cap .vk-hype-l{font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.75);}
.vk-hype-legend{margin:2px 0 10px;font-size:12px;line-height:1.5;color:rgba(255,255,255,.42);}
.vk-hype-legend .vk-hype-l{font-size:11px;color:rgba(255,255,255,.6);}
[data-theme="light"] .vk-hype-l{color:#6b7280;}
[data-theme="light"] .vk-hype-t{background:#e5e7eb;}
[data-theme="light"] .vk-hype-f{background:linear-gradient(90deg,#047857,#10B981);}
[data-theme="light"] .vk-hype-cap{color:#6b7280;}
[data-theme="light"] .vk-hype-cap .vk-hype-l{color:#111827;}
[data-theme="light"] .vk-hype-legend{color:#6b7280;}
[data-theme="light"] .vk-hype-legend .vk-hype-l{color:#374151;}
/* placements */
.upvote-btn{min-width:44px;min-height:44px;justify-content:center;}
.pa-row.pa-row-hype{display:block;padding:14px 0;}
.pa-rel-m{display:flex;align-items:center;gap:10px;}
.pa-rel-m .vk-hype-sm{width:52px;}
.vk-cmp td.vk-cmp-hype{min-width:80px;}
.vk-cmp td.vk-cmp-hype .vk-hype-sm{width:72px;}
.trend-sub{display:flex;align-items:center;gap:10px;}
.trend-sub .vk-hype-sm{width:48px;}
.hofc .vk-hype-sm{width:72px;margin-top:2px;}
.potd-meta .vk-hype-sm{width:96px;}
.fc-footer .vk-hype-sm{width:64px;}
.mk-card .vk-hype-sm{width:56px;vertical-align:middle;}
.sp-facts .vk-hype-sm{width:56px;}
@media (max-width:480px){.vk-hype-sm{width:46px;}}

.vcb-sub{margin:-8px 0 14px;font-size:13px;line-height:20px;color:var(--pa-faint,rgba(255,255,255,.46));}
.vcb-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--pa-line,rgba(255,255,255,.08));}
.vcb-f{display:grid;grid-template-columns:10px 190px minmax(0,1fr);column-gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--pa-line,rgba(255,255,255,.08));font-size:14px;line-height:20px;}
.vcb-d{width:8px;height:8px;border-radius:50%;background:#f87171;}
.vcb-f.is-pass .vcb-d{background:#34D399;}
.vcb-f.is-warn .vcb-d{background:#FBBF24;}
.vcb-k{color:var(--pa-muted,rgba(255,255,255,.58));}
.vcb-v{color:var(--pa-strong,rgba(255,255,255,.92));min-width:0;overflow-wrap:anywhere;}
.vcb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.vcb-tips{margin-top:16px;}
.vcb-th{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pa-muted,rgba(255,255,255,.58));margin-bottom:6px;}
.vcb-tips ol{margin:0;padding-left:20px;font-size:14px;line-height:22px;color:var(--pa-body,rgba(255,255,255,.78));}
.vcb-tips li+li{margin-top:4px;}
.vcb-delta{margin:14px 0 0;font-size:13.5px;line-height:20px;color:var(--pa-body,rgba(255,255,255,.78));}
.vcb-foot{margin:12px 0 0;font-size:13px;}
.vcb-foot a{color:var(--pa-acc,#34D399);}
[data-theme="light"] .vcb-f.is-pass .vcb-d{background:#059669;}
[data-theme="light"] .vcb-f.is-warn .vcb-d{background:#D97706;}
[data-theme="light"] .vcb-d{background:#DC2626;}
@media (max-width:640px){.vcb-f{grid-template-columns:10px minmax(0,1fr);row-gap:2px;}.vcb-v{grid-column:2;}}


/* ---- site chrome (src/siteChrome.js): one palette, one button, one bar, one footer ---- */
:root{--vk-page:#050506;--vk-ink:#F4F4F5;--vk-body:#D4D4D8;--vk-mute:#A1A1AA;--vk-faint:#80808A;--vk-line:#1F1F23;--vk-line2:#2A2A2F;--vk-line3:#45454D;--vk-s1:#111114;--vk-s2:#19191C;--vk-s3:#232327;--vk-fill:rgba(255,255,255,.05);--vk-fill2:rgba(255,255,255,.025);--vk-acc:#34D399;--vk-acc-tx:#34D399;--vk-acc-hi:#6EE7B7;--vk-acc-soft:rgba(52,211,153,.12);--vk-acc-line:rgba(52,211,153,.4);--vk-gold:#E7B416;--vk-focus:rgba(52,211,153,.7);--vk-nav-bg:#050506;--vk-nav-line:#1F1F23;--vk-nav-link:#A1A1AA;--vk-ctl-bg:transparent;--vk-ctl-line:#1F1F23;--vk-ctl-ink:#A1A1AA;--vk-ctl-r:9px;--vk-srch-bg:#111114;--vk-srch-line:#1F1F23;--vk-srch-ink:#A1A1AA;--vk-kbd-bg:#19191C;--vk-pop:#141417;--vk-pop-shadow:0 18px 44px -12px rgba(0,0,0,.85);--vk-card-shadow:none;--vk-card-shadow-hi:none;--vk-btn:#047857;--vk-btn-hi:#065F46;--vk-btn-ink:#FFFFFF;--vk-btn2:#19191C;--vk-btn2-hi:#232327;--vk-btn2-line:#2A2A2F;--vk-btn2-ink:#F4F4F5;--vk-btn-r:10px}
html[data-theme="light"]{--vk-page:#FDFCFB;--vk-ink:#0B0F0D;--vk-body:#3F4A45;--vk-mute:#5F6662;--vk-faint:#626C67;--vk-line:#E4E8E3;--vk-line2:rgba(11,15,13,.14);--vk-line3:rgba(11,15,13,.32);--vk-s1:#FFFFFF;--vk-s2:#FFFFFF;--vk-s3:#F1F3F0;--vk-fill:rgba(11,15,13,.045);--vk-fill2:rgba(11,15,13,.025);--vk-acc:#10B981;--vk-acc-tx:#047857;--vk-acc-hi:#10B981;--vk-acc-soft:rgba(16,185,129,.08);--vk-acc-line:rgba(4,120,87,.35);--vk-gold:#C8961E;--vk-focus:rgba(4,120,87,.5);--vk-nav-bg:#FDFCFB;--vk-nav-line:rgba(11,15,13,.06);--vk-nav-link:#3F4A45;--vk-ctl-bg:#FFFFFF;--vk-ctl-line:rgba(11,15,13,.12);--vk-ctl-ink:#3F4A45;--vk-ctl-r:999px;--vk-srch-bg:#FFFFFF;--vk-srch-line:rgba(11,15,13,.12);--vk-srch-ink:#626C67;--vk-kbd-bg:#FDFCFB;--vk-pop:#FFFFFF;--vk-pop-shadow:0 12px 32px -12px rgba(11,15,13,.18);--vk-card-shadow:0 1px 2px rgba(11,15,13,.04),0 1px 1px rgba(11,15,13,.02);--vk-card-shadow-hi:0 1px 2px rgba(11,15,13,.05),0 8px 24px -12px rgba(11,15,13,.14);--vk-btn:#047857;--vk-btn-hi:#065F46;--vk-btn-ink:#FFFFFF;--vk-btn2:#FFFFFF;--vk-btn2-hi:#FFFFFF;--vk-btn2-line:rgba(11,15,13,.14);--vk-btn2-ink:#0B0F0D;--vk-btn-r:999px}
.vkc-slot,.vkc-bar,.vkc-foot{display:none}
@media (min-width:1025px){
  .vkc-slot{display:block;height:61px}
  .vkc-bar{display:block;position:fixed;top:0;left:0;right:0;z-index:100;height:60px;box-sizing:border-box;margin:0;padding:0;background:var(--vk-nav-bg);border-bottom:1px solid var(--vk-nav-line);color:var(--vk-ink);font:400 14px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-feature-settings:"cv11","ss01";letter-spacing:normal;text-align:left;-webkit-font-smoothing:antialiased}
  .vkc-bar *,.vkc-foot *{box-sizing:border-box}
  .vkc-in{display:flex;align-items:center;height:100%;max-width:1400px;margin:0 auto;padding:0 24px;white-space:nowrap}
  .vkc-logo{display:flex;align-items:center;gap:10px;flex:none;margin:0 36px 0 0;color:var(--vk-ink);font:700 16px/1 Inter,sans-serif;letter-spacing:-.03em;text-decoration:none}
  .vkc-logo svg,.vkc-flogo svg{display:block;width:24px;height:24px;flex:none}
  .vkc-links{display:flex;align-items:center;gap:28px;flex:none;margin:0;padding:0}
  .vkc-links a,.vkc-link{display:inline-flex;align-items:center;flex:none;height:34px;margin:0;padding:0;color:var(--vk-nav-link);font:450 14px/1 Inter,sans-serif;letter-spacing:normal;text-decoration:none;white-space:nowrap;transition:color .15s}
  .vkc-links a:hover,.vkc-link:hover,.vkc-links a[aria-current]{color:var(--vk-ink)}
  .vkc-links a[aria-current]{font-weight:500}
  .vkc-admin{color:var(--vk-acc-tx)}
  .vkc-right{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex:1 1 auto;min-width:0;margin:0 0 0 24px}
  .vkc-search{appearance:none;-webkit-appearance:none;display:flex;align-items:center;gap:8px;flex:0 1 240px;min-width:34px;height:34px;margin:0 4px 0 0;padding:0 6px 0 10px;overflow:hidden;border:1px solid var(--vk-srch-line);border-radius:var(--vk-ctl-r);background:var(--vk-srch-bg);color:var(--vk-srch-ink);font:500 13.5px/1 Inter,sans-serif;letter-spacing:normal;text-align:left;cursor:pointer;box-shadow:none;transition:border-color .15s,color .15s}
  .vkc-search:hover{border-color:var(--vk-line2);color:var(--vk-ink)}
  .vkc-search svg{display:block;flex:none;width:15px;height:15px}
  .vkc-search-t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .vkc-kbd{display:inline-grid;place-items:center;flex:none;min-width:20px;height:20px;margin:0;padding:0 6px;border:1px solid var(--vk-line);border-radius:5px;background:var(--vk-kbd-bg);color:var(--vk-faint);font:500 11px/1 Inter,sans-serif;letter-spacing:normal;box-shadow:none}
  .vkc-acct{position:relative;display:flex;flex:0 1 auto;min-width:0}
  .vkc-acct-btn{appearance:none;-webkit-appearance:none;display:flex;align-items:center;gap:8px;min-width:0;height:34px;margin:0;padding:0 8px 0 5px;border:1px solid transparent;border-radius:var(--vk-ctl-r);background:transparent;color:var(--vk-nav-link);font:450 14px/1 Inter,sans-serif;letter-spacing:normal;cursor:pointer;box-shadow:none;transition:background-color .15s,color .15s}
  .vkc-acct-btn:hover,.vkc-acct.is-open .vkc-acct-btn{background:var(--vk-fill);color:var(--vk-ink)}
  .vkc-av{position:relative;display:grid;place-items:center;flex:none;width:24px;height:24px;overflow:hidden;border:1px solid var(--vk-line);border-radius:50%;background:var(--vk-s2);color:var(--vk-ink);font:600 11px/1 Inter,sans-serif}
  .vkc-av::before{content:attr(data-l)}
  .vkc-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .vkc-acct-n{min-width:0;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .vkc-caret{flex:none;opacity:.7}
  .vkc-menu{display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:2;min-width:232px;max-width:300px;padding:6px;border:1px solid var(--vk-line2);border-radius:12px;background:var(--vk-pop);box-shadow:var(--vk-pop-shadow);white-space:normal}
  .vkc-acct.is-open .vkc-menu{display:block}
  .vkc-menu-h{display:flex;flex-direction:column;gap:3px;margin:0 0 6px;padding:8px 10px 10px;border-bottom:1px solid var(--vk-line)}
  .vkc-menu-h b{overflow:hidden;color:var(--vk-ink);font:600 13.5px/18px Inter,sans-serif;text-overflow:ellipsis;white-space:nowrap}
  .vkc-menu-h span{overflow:hidden;color:var(--vk-faint);font:400 12.5px/16px Inter,sans-serif;text-overflow:ellipsis;white-space:nowrap}
  .vkc-menu a{display:flex;align-items:center;height:34px;padding:0 10px;border-radius:8px;color:var(--vk-body);font:450 14px/1 Inter,sans-serif;text-decoration:none}
  .vkc-menu a:hover{background:var(--vk-fill);color:var(--vk-ink)}
  .vkc-menu a.vkc-out{color:var(--vk-mute)}
  .vkc-btn{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:none;height:34px;margin:0;padding:0 14px;border:1px solid transparent;border-radius:var(--vk-ctl-r);background:var(--vk-btn);color:var(--vk-btn-ink);font:600 14px/1 Inter,sans-serif;letter-spacing:normal;text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:none;filter:none;transition:background-color .15s}
  .vkc-btn:hover{background:var(--vk-btn-hi);color:var(--vk-btn-ink)}
  .vkc-theme{appearance:none;-webkit-appearance:none;display:grid;place-items:center;flex:none;width:34px;height:34px;margin:0;padding:0;border:1px solid var(--vk-ctl-line);border-radius:var(--vk-ctl-r);background:var(--vk-ctl-bg);color:var(--vk-ctl-ink);cursor:pointer;box-shadow:none;transition:background-color .15s,color .15s}
  .vkc-theme:hover{background:var(--vk-fill);color:var(--vk-ink)}
  .vkc-theme svg{display:block;width:16px;height:16px}
  .vkc-theme .vkc-sun,html[data-theme="light"] .vkc-theme .vkc-moon{display:none}
  html[data-theme="light"] .vkc-theme .vkc-sun{display:block}
  .vkc-bar a:focus,.vkc-bar button:focus,.vkc-foot a:focus{outline:none}
  .vkc-bar a:focus-visible,.vkc-bar button:focus-visible,.vkc-foot a:focus-visible{outline:2px solid var(--vk-focus);outline-offset:2px}
  /* Narrower rows tighten first and the search box becomes its icon, so the row never wraps. */
  @media (max-width:1279px){
    .vkc-logo{margin-right:24px}
    .vkc-links{gap:20px}
    .vkc-search{flex:0 0 34px;width:34px;margin:0;padding:0;justify-content:center}
    .vkc-search-t,.vkc-kbd{display:none}
  }
  @media (max-width:1100px){
    .vkc-links{gap:16px}
    .vkc-acct-n{max-width:96px}
  }

  .vkc-foot{display:block;margin:88px 0 0;padding:0;border-top:1px solid var(--vk-line);background:transparent;color:var(--vk-faint);font:400 13px/20px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;text-align:left}
  .vkc-ft{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;max-width:1400px;margin:0 auto;padding:48px 24px 40px}
  .vkc-flogo{display:inline-flex;align-items:center;gap:10px;color:var(--vk-ink);font:700 16px/1 Inter,sans-serif;letter-spacing:-.03em;text-decoration:none}
  .vkc-fbrand p{max-width:44ch;margin:12px 0 0;padding:0;color:var(--vk-faint);font:400 13px/20px Inter,sans-serif}
  .vkc-fbrand .vkc-slogan{display:block;margin-bottom:2px;color:var(--vk-ink);font-weight:600;font-size:14px}
  .vkc-fcols{display:grid;grid-template-columns:repeat(5,minmax(0,132px));gap:24px;margin:0;padding:0}
  .vkc-fcols h4{margin:0 0 10px;padding:0;color:var(--vk-ink);font:500 12.5px/16px Inter,sans-serif;letter-spacing:normal;text-transform:none}
  .vkc-fcols a{display:block;overflow:hidden;color:var(--vk-nav-link);font:400 13px/26px Inter,sans-serif;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;transition:color .15s}
  .vkc-fcols a:hover{color:var(--vk-ink)}
  .vkc-fb{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1400px;margin:0 auto;padding:18px 24px 28px;color:var(--vk-faint);font:400 12.5px/18px Inter,sans-serif}
  .vkc-fb::before{content:"";position:absolute;top:0;left:24px;right:24px;height:1px;background:var(--vk-line)}
  .vkc-fb-r{display:flex;gap:20px}
  .vkc-fb a{color:var(--vk-faint);text-decoration:none;transition:color .15s}
  .vkc-fb a:hover{color:var(--vk-ink)}
  @media (max-width:1279px){
    .vkc-ft{gap:32px}
    .vkc-fcols{grid-template-columns:repeat(5,minmax(0,120px));gap:16px}
  }
}

/* ---- desktop: the legacy pages in the new palette (src/siteChrome.js) ---- */
@media (min-width:1025px){
  #navbar,.vk-tint,.vkf{display:none!important}
  :root,html[data-theme="light"]{
    --bg:var(--vk-page);--bg-elevated:var(--vk-s1);--bg-elevated-2:var(--vk-s2);--nav-bg:var(--vk-nav-bg);--page-fade:var(--vk-page);
    --text-pure:var(--vk-ink);--heading:var(--vk-ink);--text-strong:var(--vk-ink);--text:var(--vk-body);--text-2:var(--vk-body);
    --text-dim:var(--vk-mute);--text-faint:var(--vk-faint);--text-fainter:var(--vk-faint);--text-ghost:var(--vk-line3);
    --border:var(--vk-line);--border-soft:var(--vk-line);--border-strong:var(--vk-line2);
    --card:var(--vk-s1);--card-hover:var(--vk-s2);--fill-subtle:var(--vk-fill);--fill-faint:var(--vk-fill2);
    --accent:var(--vk-acc-tx);--accent-bright:var(--vk-acc-tx);--accent-light:var(--vk-acc-hi);--accent-soft:var(--vk-acc-soft);--accent-soft-border:var(--vk-acc-line);
    --solid-btn-bg:var(--vk-btn);--solid-btn-text:var(--vk-btn-ink);--solid-btn-shadow:transparent;
    --shadow-card:var(--vk-card-shadow);--shadow-card-hover:var(--vk-card-shadow-hi)}
  :root body :is(.submit-btn,.form-submit-btn,.detail-visit-btn,.hero-cta-primary,.pd-btn-primary,.nl-btn,.apid-btn,.at-cta,.auc-btn,.vkbl-btn.primary,.vksp-form button,.lg-btn,.sp-btn,.vx-btn-primary,.vx-go,.vx-btn-x){background:var(--vk-btn);background-image:none;color:var(--vk-btn-ink)!important;border-color:transparent;border-radius:var(--vk-btn-r);box-shadow:none;filter:none}
  :root body :is(.submit-btn,.form-submit-btn,.detail-visit-btn,.hero-cta-primary,.pd-btn-primary,.nl-btn,.apid-btn,.at-cta,.auc-btn,.vkbl-btn.primary,.vksp-form button,.lg-btn,.sp-btn,.vx-btn-primary,.vx-go,.vx-btn-x):hover{background:var(--vk-btn-hi);color:var(--vk-btn-ink)!important;box-shadow:none;filter:none;opacity:1;transform:none}
  :root body :is(.load-more-btn,.hero-cta-secondary,.pd-btn-ghost,.vkbl-btn.ghost){background:var(--vk-btn2);background-image:none;color:var(--vk-btn2-ink);border:1px solid var(--vk-btn2-line);border-radius:var(--vk-btn-r);box-shadow:none;filter:none}
  :root body :is(.load-more-btn,.hero-cta-secondary,.pd-btn-ghost,.vkbl-btn.ghost):hover{background:var(--vk-btn2-hi);color:var(--vk-btn2-ink);border-color:var(--vk-line3);box-shadow:none;transform:none}
}


/* ---- desktop list pages (src/deskLists.js) ---- */
.vkl-intro,.vkl-bar,.vkl-prem,.vkl-chip,.vkl-rk{display:none}
@media (min-width:1025px){
  /* The page: one 860px column under the site bar, the homepage's type. */
  .vkl-sp{padding-top:60px!important}
  .products.vkl{display:flex;flex-direction:column;box-sizing:border-box;max-width:908px;margin:0 auto;padding:40px 24px 0;font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased}
  .vkl-page .products.vkl{padding-top:16px!important}
  .vkl-page>nav[aria-label="Breadcrumb"]{box-sizing:border-box;max-width:908px!important;margin:0 auto!important;padding:96px 24px 0!important;color:var(--vk-faint)!important;font:400 13px/20px Inter,sans-serif!important}
  .vkl-page>nav[aria-label="Breadcrumb"] a{color:var(--vk-faint)!important;text-decoration:none;transition:color .15s}
  .vkl-page>nav[aria-label="Breadcrumb"] a:hover{color:var(--vk-ink)!important}
  .vkl-page>nav[aria-label="Breadcrumb"] span{margin:0 6px!important;color:var(--vk-line3)!important}
  .vkl-page>nav[aria-label="Breadcrumb"] span:last-child{margin:0!important;color:var(--vk-mute)!important}

}
/* Every width: the header, the sort bar, the rows and the small buttons. */
  /* Header: one h1 and one intro line. */
  html.js .products.vkl .reveal{opacity:1;transform:none;transition:none}
  .products.vkl .section-header{display:block;margin:0;padding:0;text-align:left}
  .products.vkl .section-title{margin:0;color:var(--vk-ink);font:600 30px/1.1 Inter,sans-serif!important;letter-spacing:-.015em!important}
  .products.vkl .section-date{display:none}
  .products.vkl .vkl-intro{display:block;max-width:640px;margin:10px 0 0;color:var(--vk-mute);font:400 15px/22px Inter,sans-serif}
  .products.vkl .bo-intro{display:contents}
  .products.vkl .bo-intro>p{max-width:680px;margin:10px 0 0;color:var(--vk-mute);font:400 15px/23px Inter,sans-serif}
  .products.vkl .bo-intro a{color:var(--vk-acc-tx)}
  .products.vkl .bo-intro>.bo-apiline{order:1;margin:18px 0 0;color:var(--vk-faint);font:400 13px/20px Inter,sans-serif}
  .products.vkl .sort-tabs,.products.vkl .filter-bar,.products.vkl .vk-hype-legend,.products.vkl .bo-crosslink{display:none}

  /* The Compact sort bar of the homepage list (src/deskBars.js), sticky under the site bar. */
  .products.vkl .vkl-bar{display:block;position:sticky;top:60px;z-index:30;margin:22px -10px 0;padding:10px 10px 0;background:var(--vk-page)}
  .vkl-bar-in{display:flex;align-items:center;gap:8px;min-width:0;padding:0 0 10px;border-bottom:1px solid var(--vk-line)}
  .vkl-gap{flex:1 1 auto;min-width:8px}
  .vkl-bar a:focus,.vkl-bar button:focus{outline:none}
  .vkl-bar a:focus-visible,.vkl-bar button:focus-visible{outline:2px solid var(--vk-focus);outline-offset:2px}
  .vkl-seg{display:inline-flex;flex:none;gap:2px;box-sizing:border-box;height:36px;padding:3px;border:1px solid var(--vk-line);border-radius:10px;background:var(--vk-s1)}
  .vkl-seg a{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 8px;border-radius:7px;color:var(--vk-mute);font:500 13px/1 Inter,sans-serif;text-decoration:none;white-space:nowrap;transition:color .15s}
  .vkl-seg a svg{display:block;flex:none;color:var(--vk-faint)}
  .vkl-seg a:hover{color:var(--vk-ink)}
  .vkl-seg a[aria-current]{color:var(--vk-ink);background:var(--vk-s3)}
  .vkl-seg a[aria-current] svg{color:var(--vk-acc)}
  .vkl-btn{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;gap:6px;flex:none;box-sizing:border-box;height:30px;margin:0;padding:0 11px;border:1px solid var(--vk-line);border-radius:8px;background:transparent;box-shadow:none;color:var(--vk-mute);font:500 13px/1 Inter,sans-serif;text-decoration:none;white-space:nowrap;cursor:pointer;transition:color .15s,border-color .15s}
  .vkl-btn:hover{color:var(--vk-ink);border-color:var(--vk-line2)}
  .vkl-btn svg{display:block;flex:none;color:var(--vk-faint)}
  .vkl-btn.on{color:var(--vk-acc-tx);background:var(--vk-acc-soft);border-color:var(--vk-acc-line)}
  .vkl-btn.on svg{color:var(--vk-acc)}
  .vkl-menu{position:relative;flex:none}
  .vkl-pop{display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:40;box-sizing:border-box;min-width:200px;max-height:340px;overflow:auto;padding:6px;border:1px solid var(--vk-line2);border-radius:12px;background:var(--vk-pop);box-shadow:var(--vk-pop-shadow)}
  .vkl-menu.open .vkl-pop{display:block}
  .vkl-pop a,.vkl-pop button{appearance:none;-webkit-appearance:none;display:flex;align-items:center;box-sizing:border-box;width:100%;height:32px;margin:0;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--vk-ink);font:500 13px/1 Inter,sans-serif;text-align:left;text-decoration:none;white-space:nowrap;cursor:pointer}
  .vkl-pop a:hover,.vkl-pop button:hover{background:var(--vk-fill)}
  .vkl-pop [aria-checked="true"]{color:var(--vk-acc-tx);background:var(--vk-acc-soft)}
  .vkl-pop a:focus-visible,.vkl-pop button:focus-visible{outline:2px solid var(--vk-focus);outline-offset:-2px}
  .vkl-find{appearance:none;-webkit-appearance:none;display:flex;align-items:center;gap:6px;flex:0 1 180px;box-sizing:border-box;width:180px;min-width:120px;height:30px;margin:0;padding:0 10px;overflow:hidden;border:1px solid var(--vk-line);border-radius:8px;background:transparent;box-shadow:none;color:var(--vk-faint);font:400 13px/1 Inter,sans-serif;text-align:left;white-space:nowrap;cursor:pointer;transition:color .15s,border-color .15s}
  .vkl-find svg{display:block;flex:none}
  .vkl-find span{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .vkl-find:hover{color:var(--vk-mute);border-color:var(--vk-line2)}

  /* The rows, as on the homepage: tile, name + crown + Premium + chip, tagline, hype bar, round upvote.
     A rank number leads on pages that are rankings. */
  .products.vkl .product-list{display:block;margin:24px 0 0;padding:0;border-top:1px solid var(--vk-line)}
  .products.vkl .vkl-bar+.product-list{margin-top:0;border-top:0}
  .products.vkl .product-divider{display:none}
  .products.vkl .product-row{display:grid;grid-template-columns:24px 44px minmax(0,1fr) 40px;column-gap:14px;align-items:center;box-sizing:border-box;height:68px;min-height:0;margin:0;padding:0 10px;border-radius:0;border-bottom:1px solid var(--vk-line);background:transparent;transform:none;transition:background-color .15s}
  .products.vkl.vkl-norank .product-row{grid-template-columns:44px minmax(0,1fr) 40px}
  .products.vkl .product-row:hover{background:var(--vk-fill2);transform:none}
  .products.vkl .product-row.vk-paid{background:linear-gradient(90deg,color-mix(in srgb,var(--vk-acc) 5.5%,transparent),transparent 55%)}
  .products.vkl .product-rank{width:auto;justify-self:end;color:var(--vk-faint);font:500 13px/1 Inter,sans-serif;text-align:right;font-variant-numeric:tabular-nums}
  .products.vkl.vkl-norank .product-rank{display:none}
  .products.vkl .product-rank .medal{display:none}
  .products.vkl .vkl-rk{display:inline}
  .products.vkl .product-icon{position:relative;display:grid;place-items:center;box-sizing:border-box;width:44px;height:44px;margin:0;overflow:hidden;border:1px solid var(--vk-line);border-radius:12px;background:var(--vk-fill)!important;box-shadow:none;color:var(--vk-ink);font:600 15px/1 Inter,sans-serif}
  .products.vkl .product-icon img{width:28px!important;height:28px!important;border-radius:6px!important;object-fit:contain}
  .products.vkl .product-info{min-width:0;overflow:hidden}
  .products.vkl .product-name-row{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;min-width:0;white-space:nowrap}
  .products.vkl .product-name{flex:0 1 auto;min-width:0;overflow:hidden;color:var(--vk-ink);font:600 15px/22px Inter,sans-serif;letter-spacing:normal;text-overflow:ellipsis;white-space:nowrap}
  .products.vkl .vkl-prem{display:inline-flex;align-items:center;gap:6px;flex:none;margin-left:-2px;color:var(--vk-mute);font:500 12.5px/1 Inter,sans-serif}
  .products.vkl .vkl-prem svg{display:block;flex:none;color:var(--vk-gold)}
  .products.vkl .vkl-chip{display:inline-flex;align-items:center;flex:none;box-sizing:border-box;height:20px;padding:0 7px;border:1px solid var(--vk-line);border-radius:6px;background:var(--vk-fill2);color:var(--vk-mute);font:500 12px/1 Inter,sans-serif;text-decoration:none;white-space:nowrap;transition:color .15s,border-color .15s}
  .products.vkl .vkl-chip:hover{color:var(--vk-ink);border-color:var(--vk-line2)}
  .products.vkl.vkl-cat .vkl-chip{display:none}
  .products.vkl .row-badge.new,.products.vkl .row-badge.trending,.products.vkl .row-dot-risk,.products.vkl .vk-potd{display:none}
  .products.vkl .row-badge.offline{display:inline-flex;align-items:center;flex:none;box-sizing:border-box;height:20px;padding:0 7px;border:1px solid var(--vk-line);border-radius:6px;background:transparent;color:var(--vk-faint);font:500 12px/1 Inter,sans-serif;letter-spacing:normal;text-transform:none}
  .products.vkl .product-desc{display:block;margin:1px 0 0;overflow:hidden;color:var(--vk-mute);font:400 14px/20px Inter,sans-serif;letter-spacing:normal;text-overflow:ellipsis;white-space:nowrap}
  .products.vkl .product-desc>a,.products.vkl .product-desc>span{display:none}
  .products.vkl .product-meta{display:flex;align-items:center;justify-content:flex-end;gap:0;min-width:0}
  .products.vkl .product-meta>*{display:none}
  /* No hype bars on the list pages (owner 2026-10-28: "lets just remove the hype bar for these subpages"). */
  .products.vkl .product-meta{display:none}
  .products.vkl .vk-hype-l{display:none}
  .products.vkl .vk-hype-t{display:block;width:100%;height:4px;overflow:hidden;border-radius:2px;background:var(--vk-line)}
  .products.vkl .vk-hype-f{display:block;height:100%;border-radius:2px;background:var(--vk-acc)}
  .products.vkl .upvote-btn{appearance:none;-webkit-appearance:none;display:grid;place-items:center;justify-self:end;box-sizing:border-box;width:32px;height:32px;min-width:32px;min-height:32px;margin:0;padding:0;border:0;border-radius:8px;background:transparent;box-shadow:none;color:var(--vk-faint);transform:none;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
  .products.vkl .upvote-btn:hover{background:var(--vk-fill);color:var(--vk-ink);transform:none}
  .products.vkl .upvote-btn.active{background:transparent;color:var(--vk-acc-tx)}
  .products.vkl .upvote-btn.loading{opacity:.6}
  .products.vkl .upvote-btn:focus{outline:none}
  .products.vkl .upvote-btn:focus-visible{outline:2px solid var(--vk-focus);outline-offset:2px}
  .products.vkl .upvote-arrow{display:block;width:15px;height:15px;border:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E") center/15px 15px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E") center/15px 15px no-repeat}
  .products.vkl .product-name:focus-visible,.products.vkl .vkl-chip:focus-visible,.products.vkl .product-icon:focus-visible{outline:2px solid var(--vk-focus);outline-offset:2px}

  /* Load more, page links and empty states: the homepage's small buttons. */
  .products.vkl .load-more-wrap{padding:16px 0 4px}
  :root body .products.vkl .load-more-btn{display:inline-flex;align-items:center;box-sizing:border-box;height:30px;padding:0 11px;border:1px solid var(--vk-line);border-radius:8px;background:transparent;box-shadow:none;color:var(--vk-mute);font:500 13px/1 Inter,sans-serif}
  :root body .products.vkl .load-more-btn:hover{border-color:var(--vk-line2);background:transparent;color:var(--vk-ink)}
  .products.vkl .vk-pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:14px 0 0}
  .products.vkl .vk-pg{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:30px;height:30px;padding:0 9px;border:1px solid var(--vk-line);border-radius:8px;background:transparent;color:var(--vk-faint);font:600 12px/1 Inter,sans-serif;text-decoration:none;transition:color .15s,border-color .15s}
  .products.vkl a.vk-pg:hover{border-color:var(--vk-line2);color:var(--vk-ink)}
  .products.vkl .vk-pg-cur{border-color:var(--vk-acc-line);background:var(--vk-acc-soft);color:var(--vk-acc-tx)}
  .products.vkl .vk-pg-gap{padding:0 2px;color:var(--vk-faint)}
  .products.vkl .search-empty,.products.vkl .vkl-empty{display:flex!important;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:22px 10px!important;border-bottom:1px solid var(--vk-line);color:var(--vk-mute)!important;font:400 14px/20px Inter,sans-serif!important;text-align:left!important}
  .products.vkl .vkl-empty a{display:inline-flex;align-items:center;flex:none;box-sizing:border-box;height:30px;padding:0 11px;border:1px solid var(--vk-line);border-radius:8px;color:var(--vk-mute)!important;font:500 13px/1 Inter,sans-serif;text-decoration:none}
  .products.vkl .vkl-empty a:hover{border-color:var(--vk-line2);color:var(--vk-ink)!important}
  .products.vkl .bo-browse-all{display:inline-flex;align-items:center;align-self:center;box-sizing:border-box;height:30px;margin:16px 0 0;padding:0 11px;border:1px solid var(--vk-line);border-radius:8px;color:var(--vk-mute);font:500 13px/1 Inter,sans-serif;text-decoration:none;transition:color .15s,border-color .15s}
  .products.vkl .bo-browse-all:hover{border-color:var(--vk-line2);color:var(--vk-ink)}

  /* Light: the same layout recoloured, as on the homepage. White controls on hairlines, the chosen one a
     black pill; white tiles; the round upvote gets its ring. */
  html[data-theme="light"] .vkl-seg{border-color:var(--vk-ctl-line);border-radius:999px;background:var(--vk-s1)}
  html[data-theme="light"] .vkl-seg a{border-radius:999px}
  html[data-theme="light"] .vkl-seg a[aria-current]{background:var(--vk-ink);color:var(--vk-s1)}
  html[data-theme="light"] .vkl-btn,html[data-theme="light"] .vkl-find{border-color:var(--vk-ctl-line);border-radius:999px;background:var(--vk-s1)}
  html[data-theme="light"] .vkl-btn:hover,html[data-theme="light"] .vkl-find:hover{border-color:var(--vk-line2)}
  html[data-theme="light"] .vkl-btn.on{border-color:var(--vk-ink);background:var(--vk-ink);color:var(--vk-s1)}
  html[data-theme="light"] .products.vkl .product-icon,html[data-theme="light"] main.sp:has(>nav.sp-crumb>a[href="/built-with"]) .sp-ico{background:var(--vk-s1)!important;border-color:var(--vk-line);box-shadow:none;color:var(--vk-ink)}
  html[data-theme="light"] .products.vkl .product-row.vk-paid{background:linear-gradient(90deg,color-mix(in srgb,var(--vk-gold) 7%,transparent),transparent 60%)}
  html[data-theme="light"] .products.vkl .upvote-btn{border:1px solid var(--vk-ctl-line);border-radius:999px;background:var(--vk-s1);color:var(--vk-body)}
  html[data-theme="light"] .products.vkl .upvote-btn:hover{border-color:var(--vk-line3);background:var(--vk-s1);color:var(--vk-ink)}
  html[data-theme="light"] .products.vkl .upvote-btn.active{border-color:var(--vk-acc);background:var(--vk-s1);color:var(--vk-acc-tx)}
  html[data-theme="light"] body .products.vkl .load-more-btn,html[data-theme="light"] .products.vkl .vk-pg,html[data-theme="light"] .products.vkl .vkl-empty a,html[data-theme="light"] .products.vkl .bo-browse-all{border-color:var(--vk-ctl-line);border-radius:999px;background:var(--vk-s1)}
  html[data-theme="light"] body .products.vkl .load-more-btn:hover{border-color:var(--vk-line2);background:var(--vk-s1)}
  html[data-theme="light"] .products.vkl .vk-pg{color:var(--vk-mute)}
  html[data-theme="light"] .products.vkl a.vk-pg:hover,html[data-theme="light"] .products.vkl .vkl-empty a:hover,html[data-theme="light"] .products.vkl .bo-browse-all:hover{border-color:var(--vk-line2);color:var(--vk-ink)}
  html[data-theme="light"] .products.vkl .vk-pg-cur{border-color:var(--vk-ink);background:var(--vk-ink);color:var(--vk-s1)}
@media (min-width:1025px){
  /* /best: the two link groups under the list, borderless rows on hairlines. */
  .vkl-page .bo-grid-section{box-sizing:border-box;max-width:908px;margin:0 auto;padding:56px 24px 0}
  .vkl-page .bo-grid-section:last-of-type{padding-bottom:0}
  .vkl-page .bo-grid-title{margin:0 0 12px;color:var(--vk-ink);font:600 18px/26px Inter,sans-serif;letter-spacing:-.01em}
  .vkl-page .bo-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px;border-top:1px solid var(--vk-line)}
  .vkl-page .bo-grid .bo-card{display:flex;align-items:center;min-height:44px;padding:11px 2px;border:0;border-bottom:1px solid var(--vk-line);border-radius:0;background:transparent;box-shadow:none;color:var(--vk-ink);font:500 14px/20px Inter,sans-serif;transition:color .15s}
  .vkl-page .bo-grid .bo-card:hover{background:transparent;box-shadow:none;color:var(--vk-acc-tx)}

  /* /category/<slug>: the questions, as hairline rows. */
  .vkl-faq{box-sizing:border-box;max-width:908px!important;margin:0 auto!important;padding:56px 24px 0!important}
  .vkl-faq>h2{margin:0 0 12px!important;color:var(--vk-ink)!important;font:600 18px/26px Inter,sans-serif!important;letter-spacing:-.01em!important}
  .vkl-faq>div{display:block!important;border-top:1px solid var(--vk-line)}
  .vkl-faq details{margin:0!important;padding:0!important;border:0!important;border-bottom:1px solid var(--vk-line)!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
  .vkl-faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 2px;color:var(--vk-ink)!important;font:500 15px/22px Inter,sans-serif!important;list-style:none;cursor:pointer}
  .vkl-faq summary::-webkit-details-marker{display:none}
  .vkl-faq summary::after{content:"";flex:none;width:12px;height:12px;background:var(--vk-faint);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/12px 12px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/12px 12px no-repeat;transition:transform .15s}
  .vkl-faq details[open]>summary::after{transform:rotate(180deg)}
  .vkl-faq summary:focus{outline:none}
  .vkl-faq summary:focus-visible{outline:2px solid var(--vk-focus);outline-offset:2px}
  .vkl-faq details>p{max-width:680px;margin:0!important;padding:0 2px 16px;color:var(--vk-mute)!important;font:400 14px/22px Inter,sans-serif!important}

  /* /built-with/<tool> (src/seoPages.js): the same column, header and rows. Its rows have no upvote. */
  main.sp:has(>nav.sp-crumb>a[href="/built-with"]){box-sizing:border-box;max-width:908px;margin:0 auto;padding:96px 24px 0;font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased}
  main.sp:has(>nav.sp-crumb>a[href="/built-with"])>.sp-crumb{gap:6px;margin:0 0 16px;color:var(--vk-faint);font:400 13px/20px Inter,sans-serif}
  main.sp:has(>nav.sp-crumb>a[href="/built-with"])>.sp-crumb a{color:var(--vk-faint);transition:color .15s}
  main.sp:has(>nav.sp-crumb>a[href="/built-with"])>.sp-crumb a:hover{color:var(--vk-ink)}
  main.sp:has(>nav.sp-crumb>a[href="/built-with"])>.sp-crumb .sp-sep{color:var(--vk-line3)}
  main.sp:has(>nav.sp-crumb>a[href="/built-with"])>.sp-crumb span[aria-current]{color:var(--vk-mute)}
  main.sp:has(>nav.sp-crumb>a[href="/built-with"])>h1{margin:0;color:var(--vk-ink);font:600 30px/1.1 Inter,sans-serif;letter-spacing:-.015em}
  main.sp:has(>nav.sp-crumb>a[href="/built-with"])>.sp-lede{max-width:680px;margin:10px 0 0;color:var(--vk-mute);font:400 15px/23px Inter,sans-serif}
  main.sp:has(>nav.sp-crumb>a[href="/built-with"])>.sp-meta{margin:8px 0 0;color:var(--vk-faint);font:400 12.5px/18px Inter,sans-serif}
  main.sp:has(>nav.sp-crumb>a[href="/built-with"]) h2{color:var(--vk-ink);font:600 18px/26px Inter,sans-serif;letter-spacing:-.01em;text-transform:none}
  main.sp:has(>nav.sp-crumb>a[href="/built-with"])>.sp-list{margin:22px 0 0;padding:0;border-top:1px solid var(--vk-line)}
  main.sp:has(>nav.sp-crumb>a[href="/built-with"])>.sp-list>li{display:grid;grid-template-columns:24px 14px 44px 14px minmax(0,max-content) auto minmax(14px,1fr) 72px;grid-template-rows:22px 20px;gap:1px 0;align-content:center;align-items:center;box-sizing:border-box;height:68px;margin:0;padding:0 10px;border-bottom:1px solid var(--vk-line);transition:background-color .15s}
  main.sp:has(>nav.sp-crumb>a[href="/built-with"])>.sp-list>li:hover{background:var(--vk-fill2)}
  main.sp:has(>nav.sp-crumb>a[href="/built-with"]) .sp-rank{grid-column:1;grid-row:1/3;justify-self:end;padding:0;color:var(--vk-faint);font:500 13px/1 Inter,sans-serif;font-variant-numeric:tabular-nums}
  main.sp:has(>nav.sp-crumb>a[href="/built-with"]) .sp-ico{grid-column:3;grid-row:1/3;display:grid;place-items:center;box-sizing:border-box;width:44px;height:44px;border:1px solid var(--vk-line);border-radius:12px;background:var(--vk-fill);color:var(--vk-ink);font:600 15px/1 Inter,sans-serif}
  main.sp:has(>nav.sp-crumb>a[href="/built-with"]) .sp-ico img{width:28px;height:28px;border-radius:6px;object-fit:contain}
  main.sp:has(>nav.sp-crumb>a[href="/built-with"]) .sp-app,main.sp:has(>nav.sp-crumb>a[href="/built-with"]) .sp-facts{display:contents}
  main.sp:has(>nav.sp-crumb>a[href="/built-with"]) .sp-app-name{grid-column:5;grid-row:1;min-width:0;overflow:hidden;color:var(--vk-ink)!important;font:600 15px/22px Inter,sans-serif;letter-spacing:normal;text-overflow:ellipsis;white-space:nowrap}
  main.sp:has(>nav.sp-crumb>a[href="/built-with"]) .sp-app>p{grid-column:5/8;grid-row:2;min-width:0;margin:0;overflow:hidden;color:var(--vk-mute);font:400 14px/20px Inter,sans-serif;text-overflow:ellipsis;white-space:nowrap}
  main.sp:has(>nav.sp-crumb>a[href="/built-with"]) .sp-facts>span{display:none}
  main.sp:has(>nav.sp-crumb>a[href="/built-with"]) .sp-facts>.vk-hype{display:none}
  main.sp:has(>nav.sp-crumb>a[href="/built-with"]) .sp-facts>.vk-hype .vk-hype-l{display:none}
  main.sp:has(>nav.sp-crumb>a[href="/built-with"]) .sp-facts>.vk-hype .vk-hype-t{height:4px;border-radius:2px;background:var(--vk-line)}
  main.sp:has(>nav.sp-crumb>a[href="/built-with"]) .sp-facts>.vk-hype .vk-hype-f{border-radius:2px;background:var(--vk-acc)}
  main.sp:has(>nav.sp-crumb>a[href="/built-with"]) .sp-facts>.vk-hype+span{grid-column:6;grid-row:1;justify-self:start;display:inline-flex;align-items:center;box-sizing:border-box;height:20px;margin-left:8px;padding:0 7px;border:1px solid var(--vk-line);border-radius:6px;background:var(--vk-fill2);color:var(--vk-mute);font:500 12px/1 Inter,sans-serif;white-space:nowrap}
  main.sp:has(>nav.sp-crumb>a[href="/built-with"]) .sp-btn{height:40px;border-radius:var(--vk-btn-r);background:var(--vk-btn);color:var(--vk-btn-ink)!important;font:600 14px/1 Inter,sans-serif;filter:none;transition:background-color .15s}
  main.sp:has(>nav.sp-crumb>a[href="/built-with"]) .sp-btn:hover{background:var(--vk-btn-hi);filter:none}

  @media (max-width:1279px){
    .vkl-find{width:150px;flex-basis:150px}
  }
}

/* Phones and tablets (owner 2026-10-28: bring the new staging to mobile view). The same rows and sort bar as on
   desktop, sized for a narrow screen; the legacy phone controls (big tabs, search field, category pills, the hype
   legend) stay hidden as on desktop. */
@media (max-width:1024px){
  .products.vkl{padding-left:16px!important;padding-right:16px!important}
  .vkl-page>nav[aria-label="Breadcrumb"]{margin-left:0!important;margin-right:0!important;padding-left:16px!important;padding-right:16px!important}
  .products.vkl .section-title{font-size:26px!important}
  .products.vkl .vkl-bar{position:static;margin:16px 0 0;padding:0;background:transparent}
  .products.vkl .vkl-bar-in{gap:8px}
  .products.vkl .vkl-find{display:none}
  .products.vkl .vkl-seg a{padding:0 10px}
  .products.vkl .vkl-pop{max-width:calc(100vw - 32px)}
  .products.vkl .product-list{margin-top:16px}
  .products.vkl .product-row{grid-template-columns:22px 40px minmax(0,1fr) 36px;column-gap:12px;height:64px;padding:0 2px}
  .products.vkl.vkl-norank .product-row{grid-template-columns:40px minmax(0,1fr) 36px}
  .products.vkl .product-icon{width:40px;height:40px;border-radius:11px}
  /* the legacy phone CSS stacks the name above its badges; here the name, crown and Premium share one line */
  .products.vkl .product-name-row{flex-direction:row;align-items:center;gap:6px}
  .products.vkl .product-name{display:block;font-size:15px}
  .products.vkl .product-icon img{width:26px!important;height:26px!important}
  .products.vkl .vkl-chip{display:none}
  .products.vkl .product-desc{font-size:13.5px;line-height:19px}
  .products.vkl .upvote-btn{width:36px;height:36px;min-width:36px;min-height:36px}
  .vkl-best .bo-intro>p:first-child{display:none}
  .vkl-best .bo-sub{margin:8px 0 0;color:var(--vk-mute);font:400 15px/22px Inter,sans-serif;text-align:left}
}



/* ---- desktop product page (src/deskProduct.js) ---- */
@media (min-width:1025px){
  /* --pa-* are the legacy page's own names, still read by the inline CSS of the updates list and the scan box */
  .pa.vk-prod{--pd-chip:transparent;--pd-tile:var(--vk-s2);--pd-box:var(--vk-s1);
    --pa-line:var(--vk-line);--pa-line-strong:var(--vk-line2);--pa-raise:var(--vk-s1);--pa-raise-hover:var(--vk-s2);--pa-heading:var(--vk-ink);--pa-body:var(--vk-body);--pa-strong:var(--vk-ink);--pa-muted:var(--vk-mute);--pa-faint:var(--vk-faint);--pa-acc:var(--vk-acc-tx);--pa-acc-soft:var(--vk-acc-soft);--pa-acc-line:var(--vk-acc-line);--pa-ring:var(--vk-line);--pa-focus:var(--vk-focus);
    display:grid;grid-template-columns:88px minmax(0,1fr) auto;column-gap:20px;align-items:start;
    box-sizing:border-box;max-width:928px;margin:0 auto;padding:92px 24px 0;
    color:var(--vk-body);font:400 15px/24px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-feature-settings:"cv11","ss01";letter-spacing:normal;-webkit-font-smoothing:antialiased}
  html[data-theme="light"] .pa.vk-prod{--pd-chip:var(--vk-s1)}
  .pa.vk-prod *{box-sizing:border-box}
  .pa.vk-prod :is(a,button,textarea,input):focus{outline:none}
  .pa.vk-prod :is(a,button,textarea,input):focus-visible{outline:2px solid var(--vk-focus);outline-offset:2px}

  /* one column: the wrappers step aside so each block is a grid item, placed by order */
  .pa.vk-prod .pa-hero,.pa.vk-prod .pa-grid,.pa.vk-prod .pa-main,.pa.vk-prod .pa-side{display:contents}
  .pa.vk-prod>*,.pa.vk-prod .pa-hero>*,.pa.vk-prod .pa-main>*,.pa.vk-prod .pa-side>*{grid-column:1/-1;min-width:0;order:160}
  .pa.vk-prod>.pa-crumb{order:10}
  .pa.vk-prod>.pa-adminbar{order:20}
  .pa.vk-prod .pa-hero>.pa-icon{order:30;grid-column:1}
  .pa.vk-prod .pa-hero>.pa-title{order:31;grid-column:2}
  .pa.vk-prod .pa-hero>.pa-actions{order:32;grid-column:3}
  .pa.vk-prod>.pa-shot{order:40}
  .pa.vk-prod>.pa-thumbs{order:41}
  .pa.vk-prod>script{order:42}
  .pa.vk-prod .pa-main>#about{order:50}
  .pa.vk-prod .pa-hero>.pa-meta{order:60}
  .pa.vk-prod .pa-side>.pa-details{order:70}
  .pa.vk-prod .pa-main>.pa-facts{order:80}
  .pa.vk-prod .pa-main>.pa-sec{order:90}
  .pa.vk-prod .pa-main>.pu{order:100}
  .pa.vk-prod .pa-main>.vcb{order:110}
  .pa.vk-prod .pa-side>.pa-founder{order:120}
  .pa.vk-prod .pa-main>#comments{order:130}
  .pa.vk-prod .pa-main>.pa-claim{order:140}
  .pa.vk-prod .pa-side>.pa-o7{order:150}
  .pa.vk-prod>.pa-related{order:170}

  /* breadcrumb and the admin line */
  .pa.vk-prod .pa-crumb{display:flex;align-items:center;gap:8px;min-width:0;height:20px;margin:0 0 28px;font-size:13px;line-height:20px;color:var(--vk-faint);white-space:nowrap}
  .pa.vk-prod .pa-crumb a{color:var(--vk-faint);transition:color .15s}
  .pa.vk-prod .pa-crumb a:hover{color:var(--vk-ink)}
  .pa.vk-prod .pa-crumb .pa-sep{color:var(--vk-line3)}
  .pa.vk-prod .pa-crumb .pa-cur{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--vk-mute)}
  .pa.vk-prod .pa-crumb .pa-best{margin-left:auto;color:var(--vk-mute)}
  .pa.vk-prod .pa-adminbar{display:flex;align-items:center;gap:12px;margin:-8px 0 24px;padding:0;border:0;border-radius:0;font-size:13px;line-height:20px}
  .pa.vk-prod .pa-adminbar span{font:500 13px/20px Inter,sans-serif;letter-spacing:normal;text-transform:none;color:var(--vk-faint)}
  .pa.vk-prod .pa-adminbar a{font-weight:500;color:var(--vk-acc-tx)}
  .pa.vk-prod .pa-adminbar a:hover{color:var(--vk-ink)}

  /* the head: icon tile, name and tagline, the two buttons on the right */
  .pa.vk-prod .pa-icon{align-self:center;display:grid;place-items:center;width:88px;height:88px;border-radius:22px;overflow:hidden;background:var(--pd-tile)!important;border:1px solid var(--vk-line);box-shadow:var(--vk-card-shadow);color:var(--vk-ink);font:600 32px/1 Inter,sans-serif}
  .pa.vk-prod .pa-icon img{display:block;width:72%;height:72%;object-fit:contain}
  .pa.vk-prod .pa-title{align-self:center;min-width:0;max-width:none;margin:0}
  .pa.vk-prod .pa-name{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
  .pa.vk-prod .pa-title h1{margin:0;font:600 34px/42px Inter,sans-serif;letter-spacing:-.02em;color:var(--vk-ink);overflow-wrap:anywhere}
  .pa.vk-prod .vk-nameprem{display:inline-flex;align-items:center;gap:5px;margin-left:0;vertical-align:middle;font:500 14px/1 Inter,sans-serif;letter-spacing:normal;color:var(--vk-mute);white-space:nowrap}
  .pa.vk-prod .vk-nameprem svg{display:block;flex:none;width:16px;height:16px;fill:var(--vk-gold)}
  .pa.vk-prod .pa-tagline{max-width:60ch;margin:4px 0 0;font-size:17px;line-height:26px;letter-spacing:normal;color:var(--vk-mute)}
  .pa.vk-prod .pa-actions{align-self:center;display:flex;align-items:center;gap:8px;margin:0}
  .pa.vk-prod .pa-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;margin:0;padding:0 16px;border-radius:var(--vk-btn-r);font:600 14px/1 Inter,sans-serif;letter-spacing:normal;white-space:nowrap;cursor:pointer;box-shadow:none;filter:none;transform:none;transition:background-color .15s,border-color .15s,color .15s}
  .pa.vk-prod .pa-btn svg{display:block;flex:none;width:15px;height:15px}
  .pa.vk-prod .pa-actions .pa-visit{order:2;border:1px solid transparent;background:var(--vk-btn);color:var(--vk-btn-ink)}
  .pa.vk-prod .pa-actions .pa-visit:hover{background:var(--vk-btn-hi);color:var(--vk-btn-ink)}
  .pa.vk-prod .pa-actions .pa-vote.upvote-btn{order:1;flex-direction:row;gap:0;min-width:0;min-height:0;border:1px solid var(--vk-btn2-line);background:var(--vk-btn2);color:var(--vk-btn2-ink)}
  .pa.vk-prod .pa-actions .pa-vote.upvote-btn:hover{border-color:var(--vk-line3);background:var(--vk-btn2-hi);color:var(--vk-btn2-ink);transform:none}
  .pa.vk-prod .pa-actions .pa-vote.upvote-btn.active{border-color:var(--vk-acc-line);background:var(--vk-acc-soft);color:var(--vk-acc-tx)}
  .pa.vk-prod .pa-actions .pa-vote.upvote-btn.loading{opacity:.6}
  .pa.vk-prod .pa-vote-l{display:inline-flex;align-items:center;gap:7px}
  .pa.vk-prod .pa-vote .upvote-arrow{display:block;flex:none;width:15px;height:15px;margin:0;border:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E") center/15px 15px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E") center/15px 15px no-repeat;transition:none}

  /* the screenshot, whole width, no fake browser bar */
  .pa.vk-prod .pa-shot{display:block;margin:28px 0 0;overflow:hidden;border:1px solid var(--vk-line);border-radius:12px;background:var(--pd-box);box-shadow:var(--vk-card-shadow-hi);transition:border-color .15s}
  .pa.vk-prod .pa-shot:hover{border-color:var(--vk-line2)}
  .pa.vk-prod .pa-shot:focus-visible{outline-offset:3px}
  .pa.vk-prod .pa-frame-bar{display:none}
  .pa.vk-prod .pa-shot img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;object-position:top center}
  .pa.vk-prod .pa-thumbs{display:flex;gap:10px;margin:12px 0 0}
  .pa.vk-prod .pa-thumb{flex:0 0 128px;height:72px;margin:0;padding:0;border:0;border-radius:8px;overflow:hidden;background:var(--pd-box);opacity:.55;cursor:pointer;transition:opacity .15s,box-shadow .15s}
  .pa.vk-prod .pa-thumb:hover,.pa.vk-prod .pa-thumb.is-on{opacity:1}
  .pa.vk-prod .pa-thumb.is-on{box-shadow:0 0 0 2px var(--vk-em,#10B981)}
  .pa.vk-prod .pa-thumb:focus-visible{outline:2px solid var(--vk-em,#10B981);outline-offset:2px}
  .pa.vk-prod .pa-thumb img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center}

  /* the description right under it (its heading stays for screen readers) */
  .pa.vk-prod .pa-main>#about{margin:24px 0 0;padding:0;border:0}
  .pa.vk-prod .pa-main>#about.pa-same{display:none}
  .pa.vk-prod #about>.pa-h2{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .pa.vk-prod .pa-prose{max-width:720px;font-size:16px;line-height:26px;letter-spacing:normal;color:var(--vk-body);overflow-wrap:anywhere}
  .pa.vk-prod .pa-prose p{margin:0}
  .pa.vk-prod .pa-prose p+p,.pa.vk-prod .pa-prose ul+p,.pa.vk-prod .pa-prose p+ul{margin-top:14px}
  .pa.vk-prod .pa-prose ul{list-style:none;margin:14px 0 0;padding:0}
  .pa.vk-prod .pa-prose li{position:relative;padding-left:22px}
  .pa.vk-prod .pa-prose li+li{margin-top:6px}
  .pa.vk-prod .pa-prose li::before{content:"";position:absolute;left:6px;top:11px;width:5px;height:5px;border-radius:50%;background:var(--vk-faint)}
  .pa.vk-prod .pa-clamp.is-clamped{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .pa.vk-prod .pa-more{display:inline-flex;align-items:center;height:28px;margin:6px 0 0;padding:0;border:0;background:none;font:600 14px/1 Inter,sans-serif;color:var(--vk-acc-tx);cursor:pointer}
  .pa.vk-prod .pa-more:hover{color:var(--vk-ink)}
  .pa.vk-prod .pa-more[hidden]{display:none}

  /* the fact chips: label + value, quiet hairline, the legacy duplicates step aside */
  .pa.vk-prod .pa-hero>.pa-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:20px 0 0;padding:0;font-size:13.5px;line-height:20px;color:var(--vk-ink)}
  .pa.vk-prod .pa-meta>.pa-meta-cat,.pa.vk-prod .pa-meta.pa-has-tool>span.pd-badge:not([class*="is-"]),.pa.vk-prod .pa-meta.pa-has-hub>a.pd-badge[href^="/built-with/"]{display:none}
  .pa.vk-prod .pa-meta>.pa-fx,.pa.vk-prod .pa-meta>.pd-badge{display:inline-flex;align-items:center;gap:8px;height:32px;margin:0;padding:0 12px;border:1px solid var(--vk-line);border-radius:8px;background:var(--pd-chip);box-shadow:none;font:400 13.5px/1 Inter,sans-serif;letter-spacing:normal;color:var(--vk-ink);white-space:nowrap;transition:border-color .15s,color .15s}
  .pa.vk-prod .pa-meta>a.pa-fx:hover,.pa.vk-prod .pa-meta>a.pd-badge:hover{border-color:var(--vk-line3);color:var(--vk-ink)}
  .pa.vk-prod .pa-fx i{font-style:normal;color:var(--vk-faint)}
  .pa.vk-prod .pa-meta .pd-dot{flex:none;width:7px;height:7px;box-shadow:none;animation:none}
  .pa.vk-prod .pa-meta .pd-dot:not(.is-amber){background:var(--vk-acc)}
  .pa.vk-prod .pa-meta>.pd-badge.is-offline{color:var(--vk-mute)}
  .pa.vk-prod .pa-meta>.pd-badge.is-king::before{content:"";flex:none;width:14px;height:14px;background:var(--vk-gold);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7l4.5 4L12 4l4.5 7L21 7l-2 11H5z'/%3E%3C/svg%3E") center/14px 14px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7l4.5 4L12 4l4.5 7L21 7l-2 11H5z'/%3E%3C/svg%3E") center/14px 14px no-repeat}

  /* hype and share, one line */
  .pa.vk-prod .pa-side>.pa-details{display:flex;align-items:center;gap:24px;margin:24px 0 0;padding:0}
  .pa.vk-prod .pa-rows{flex:1 1 auto;min-width:0;margin:0;border:0}
  .pa.vk-prod .pa-rows>.pa-row{display:none}
  .pa.vk-prod .pa-rows>.pa-row.pa-row-hype{display:block;min-height:0;padding:0;border:0}
  .pa.vk-prod .pa-row-hype .vk-hype-lg{display:flex;flex-direction:row;align-items:center;gap:12px;width:100%}
  .pa.vk-prod .pa-row-hype .vk-hype-cap{display:contents}
  .pa.vk-prod .pa-row-hype .vk-hype-l{order:1;flex:none;font:500 13.5px/20px Inter,sans-serif;letter-spacing:normal;text-transform:none;color:var(--vk-ink)}
  .pa.vk-prod .pa-row-hype .vk-hype-t{order:2;flex:0 0 160px;height:6px}
  .pa.vk-prod .pa-row-hype .vk-hype-n{order:3;min-width:0;overflow:hidden;font-size:13px;line-height:20px;color:var(--vk-faint);text-overflow:ellipsis;white-space:nowrap}
  .pa.vk-prod .vk-hype-t{border-radius:999px;background:var(--vk-fill);overflow:hidden}
  .pa.vk-prod .vk-hype-f{background:var(--vk-acc)}
  .pa.vk-prod .pa-share{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;width:auto;height:34px;margin:0;padding:0 14px;border:1px solid var(--vk-btn2-line);border-radius:var(--vk-btn-r);background:var(--vk-btn2);box-shadow:none;font:500 13.5px/1 Inter,sans-serif;color:var(--vk-btn2-ink);cursor:pointer;transition:border-color .15s,background-color .15s}
  .pa.vk-prod .pa-share:hover{border-color:var(--vk-line3);background:var(--vk-btn2-hi);color:var(--vk-btn2-ink)}
  .pa.vk-prod .pa-share svg{display:block;width:13px;height:13px}

  /* the fact sheet */
  .pa.vk-prod .pa-main>.pa-facts{margin:28px 0 0;border-top:1px solid var(--vk-line)}
  .pa.vk-prod .pa-fact{display:grid;grid-template-columns:160px minmax(0,1fr);column-gap:24px;padding:14px 0;border-bottom:1px solid var(--vk-line)}
  .pa.vk-prod .pa-fact dt{font:500 14px/24px Inter,sans-serif;color:var(--vk-mute)}
  .pa.vk-prod .pa-fact dd{min-width:0;margin:0;font-size:15px;line-height:24px;color:var(--vk-ink);overflow-wrap:anywhere}
  .pa.vk-prod .pa-uc{list-style:none;margin:0;padding:0}
  .pa.vk-prod .pa-uc li{position:relative;padding-left:24px}
  .pa.vk-prod .pa-uc li+li{margin-top:6px}
  .pa.vk-prod .pa-uc li::before{content:"";position:absolute;left:2px;top:7px;width:10px;height:5px;border-left:1.75px solid var(--vk-acc-tx);border-bottom:1.75px solid var(--vk-acc-tx);transform:rotate(-45deg)}
  .pa.vk-prod .pa-chips{display:flex;flex-wrap:wrap;gap:6px}
  .pa.vk-prod .pa-chip{display:inline-flex;align-items:center;height:28px;padding:0 10px;border:1px solid var(--vk-line);border-radius:8px;background:var(--pd-chip);font-size:13.5px;line-height:20px;font-weight:400;color:var(--vk-ink)}
  .pa.vk-prod .pa-price{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px}
  .pa.vk-prod .pa-price-t{font-weight:600;color:var(--vk-ink)}
  .pa.vk-prod .pa-price-n{color:var(--vk-mute);font-variant-numeric:tabular-nums}
  .pa.vk-prod .pa-price-n::before{content:"\00B7";margin-right:8px;color:var(--vk-faint)}
  .pa.vk-prod .pa-price a{margin-left:auto;font-size:14px;font-weight:500;color:var(--vk-acc-tx)}
  .pa.vk-prod .pa-price a:hover{color:var(--vk-ink)}

  /* sections below: a hairline, space, a sentence-case title */
  .pa.vk-prod .pa-main>.pa-sec,.pa.vk-prod .pa-side>.pa-founder,.pa.vk-prod .pa-side>.pa-o7{margin:48px 0 0;padding:36px 0 0;border-top:1px solid var(--vk-line);scroll-margin-top:84px}
  .pa.vk-prod .pa-h2{margin:0 0 16px;font:600 18px/26px Inter,sans-serif;letter-spacing:-.01em;text-transform:none;color:var(--vk-ink)}
  .pa.vk-prod .pa-h2 .cmt-count{display:inline;min-width:0;margin:0 0 0 8px;padding:0;border:0;border-radius:0;background:none;font:500 15px/26px Inter,sans-serif;color:var(--vk-faint);font-variant-numeric:tabular-nums;vertical-align:baseline}

  /* updates */
  .pa.vk-prod .pu .pu-form{margin:0 0 12px}
  .pa.vk-prod .pu .pu-form .pu-input{min-height:48px}
  .pa.vk-prod .pu .pu-list{list-style:none;margin:0;padding:0}
  .pa.vk-prod .pu .pu-list:empty{display:none}
  .pa.vk-prod .pu .pu-item{position:relative;padding:18px 0 18px 22px;border-top:1px solid var(--vk-line)}
  .pa.vk-prod .pu .pu-list>.pu-item:first-child{padding-top:4px;border-top:0}
  .pa.vk-prod .pu .pu-item::before{content:"";position:absolute;left:1px;top:25px;width:7px;height:7px;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 1.5px var(--vk-line3)}
  .pa.vk-prod .pu .pu-list>.pu-item:first-child::before{top:11px}
  .pa.vk-prod .pu .pu-list-rest>.pu-item:first-child{padding-top:18px;border-top:1px solid var(--vk-line)}
  .pa.vk-prod .pu .pu-list-rest>.pu-item:first-child::before{top:25px}
  .pa.vk-prod .pu .pu-item.is-maker::before{background:var(--vk-acc);box-shadow:none}
  .pa.vk-prod .pu .pu-head{display:flex;align-items:center;gap:8px;min-width:0;height:20px;margin:0 0 6px}
  .pa.vk-prod .pu .pu-src{font:500 12.5px/20px Inter,sans-serif;letter-spacing:normal;color:var(--vk-mute);white-space:nowrap}
  .pa.vk-prod .pu .pu-item.is-maker .pu-src{display:inline-flex;align-items:center;height:20px;padding:0 8px;border:1px solid var(--vk-acc-line);border-radius:999px;font-size:12px;color:var(--vk-acc-tx)}
  .pa.vk-prod .pu .pu-time{font-size:13px;line-height:20px;color:var(--vk-faint);white-space:nowrap}
  .pa.vk-prod .pu .pu-time::before{content:"\00B7";margin-right:8px;color:var(--vk-faint)}
  .pa.vk-prod .pu .pu-text{max-width:720px;margin:0;font-size:15px;line-height:24px;color:var(--vk-body);white-space:pre-line;overflow-wrap:anywhere}
  .pa.vk-prod .pu .pu-item.is-maker .pu-text{color:var(--vk-ink)}
  .pa.vk-prod .pu .pu-link{color:var(--vk-ink);text-decoration:underline;text-decoration-color:var(--vk-line2);text-underline-offset:3px}
  .pa.vk-prod .pu .pu-link:hover{color:var(--vk-ink);text-decoration-color:var(--vk-acc-line)}
  .pa.vk-prod .pu .pu-acts{display:flex;align-items:center;gap:16px;margin-top:10px}
  .pa.vk-prod .pu .pu-vote{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--vk-btn2-line);border-radius:var(--vk-btn-r);background:var(--vk-btn2);font:600 12.5px/1 Inter,sans-serif;color:var(--vk-btn2-ink);font-variant-numeric:tabular-nums;cursor:pointer;transition:border-color .15s,color .15s}
  .pa.vk-prod .pu .pu-vote:hover,.pa.vk-prod .pu .pu-vote:active{border-color:var(--vk-line3)}
  .pa.vk-prod .pu .pu-vote.is-on{border-color:var(--vk-acc-line);color:var(--vk-acc-tx)}
  .pa.vk-prod .pu .pu-arrow{display:block;width:12px;height:12px;border:0;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E") center/12px 12px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E") center/12px 12px no-repeat}
  .pa.vk-prod .pu .pu-act{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0;border:0;background:none;font:500 12.5px/1 Inter,sans-serif;color:var(--vk-mute);cursor:pointer;transition:color .15s}
  .pa.vk-prod .pu .pu-act:hover,.pa.vk-prod .pu .pu-act:active{color:var(--vk-ink)}
  .pa.vk-prod .pu .pu-act svg{display:block;width:12px;height:12px}
  .pa.vk-prod .pu .pu-hide{margin-left:auto}

  /* Vibe Check (the listing scan) */
  .pa.vk-prod .vcb .vcb-sub{margin:-10px 0 16px;font-size:13px;line-height:20px;color:var(--vk-faint)}
  .pa.vk-prod .vcb .vcb-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--vk-line)}
  .pa.vk-prod .vcb .vcb-f{display:grid;grid-template-columns:10px 200px minmax(0,1fr);column-gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--vk-line);font-size:14px;line-height:20px}
  .pa.vk-prod .vcb .vcb-k{color:var(--vk-mute)}
  .pa.vk-prod .vcb .vcb-v{min-width:0;color:var(--vk-ink);overflow-wrap:anywhere}
  .pa.vk-prod .vcb .vcb-tips{margin-top:20px}
  .pa.vk-prod .vcb .vcb-th{margin:0 0 6px;font:500 13.5px/20px Inter,sans-serif;letter-spacing:normal;text-transform:none;color:var(--vk-ink)}
  .pa.vk-prod .vcb .vcb-tips ol{margin:0;padding-left:20px;font-size:14px;line-height:22px;color:var(--vk-body)}
  .pa.vk-prod .vcb .vcb-tips li+li{margin-top:4px}
  .pa.vk-prod .vcb .vcb-delta{margin:14px 0 0;font-size:13.5px;line-height:20px;color:var(--vk-body)}
  .pa.vk-prod .vcb .vcb-foot{margin:12px 0 0;font-size:13.5px;line-height:20px}
  .pa.vk-prod .vcb .vcb-foot a{font-weight:500;color:var(--vk-acc-tx)}
  .pa.vk-prod .vcb .vcb-foot a:hover{color:var(--vk-ink)}

  /* the maker */
  .pa.vk-prod .pa-fh{display:flex;align-items:center;gap:14px;min-width:0}
  .pa.vk-prod .pa-fav{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;overflow:hidden;background:var(--pd-tile);border:1px solid var(--vk-line);box-shadow:none;color:var(--vk-ink);font:600 18px/1 Inter,sans-serif}
  .pa.vk-prod .pa-fav img{display:block;width:100%;height:100%;object-fit:cover}
  .pa.vk-prod .pa-fn{overflow:hidden;font:600 16px/24px Inter,sans-serif;color:var(--vk-ink);text-overflow:ellipsis;white-space:nowrap}
  .pa.vk-prod .pa-fn a{color:var(--vk-ink);transition:color .15s}
  .pa.vk-prod .pa-fn a:hover{color:var(--vk-acc-tx)}
  .pa.vk-prod .pa-fr{font-size:13.5px;line-height:20px;color:var(--vk-mute)}
  .pa.vk-prod .pa-fbio{max-width:720px;margin:14px 0 0;font-size:15px;line-height:24px;color:var(--vk-body)}
  .pa.vk-prod .pa-flinks{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px}
  .pa.vk-prod .pa-flink{display:inline-flex;align-items:center;gap:8px;height:24px;font:500 14px/20px Inter,sans-serif;color:var(--vk-ink);transition:color .15s}
  .pa.vk-prod .pa-flink svg{display:block;width:14px;height:14px;color:var(--vk-mute)}
  .pa.vk-prod .pa-flink:hover{color:var(--vk-acc-tx)}
  .pa.vk-prod .pa-other{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;margin-top:24px}
  .pa.vk-prod .pa-founder>.pa-h2+.pa-other{margin-top:0}
  .pa.vk-prod .pa-other-h{grid-column:1/-1;margin:0 0 4px;font:500 13.5px/20px Inter,sans-serif;color:var(--vk-mute)}
  .pa.vk-prod .pa-op{display:flex;align-items:center;gap:12px;min-width:0;padding:10px 0;border-top:1px solid var(--vk-line)}
  .pa.vk-prod .pa-op:nth-of-type(-n+2){border-top:0}
  .pa.vk-prod .pa-op-ic{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;overflow:hidden;background:var(--pd-tile)!important;border:1px solid var(--vk-line);box-shadow:var(--vk-card-shadow);color:var(--vk-ink);font:600 14px/1 Inter,sans-serif}
  .pa.vk-prod .pa-op-ic img{display:block;width:72%;height:72%;object-fit:contain}
  .pa.vk-prod .pa-op-b{flex:1;min-width:0}
  .pa.vk-prod .pa-op-n{display:block;overflow:hidden;font:600 14px/20px Inter,sans-serif;color:var(--vk-ink);text-overflow:ellipsis;white-space:nowrap;transition:color .15s}
  .pa.vk-prod .pa-op-t{display:block;overflow:hidden;font-size:13px;line-height:20px;color:var(--vk-mute);text-overflow:ellipsis;white-space:nowrap}
  .pa.vk-prod .pa-op:hover .pa-op-n{color:var(--vk-acc-tx)}

  /* comments: a white (light) or raised (dark) writing surface, rows on hairlines */
  .pa.vk-prod .cmt-form{margin:0;padding:16px;border:1px solid transparent;border-radius:12px;background:var(--pd-box);box-shadow:var(--vk-card-shadow-hi);transition:border-color .15s}
  .pa.vk-prod .cmt-form:focus-within{border-color:var(--vk-line3)}
  .pa.vk-prod .cmt-form .cmt-input{display:block;width:100%;min-height:72px;margin:0;padding:0;border:0;border-radius:0;background:transparent;resize:none;font:400 15px/24px Inter,sans-serif;color:var(--vk-ink)}
  .pa.vk-prod .cmt-form .cmt-input:focus,.pa.vk-prod .cmt-form .cmt-input:focus-visible{border:0;outline:none;background:transparent}
  .pa.vk-prod .cmt-form .cmt-input::placeholder,.pa.vk-prod .cmt-form .cmt-name-input::placeholder{color:var(--vk-faint)}
  .pa.vk-prod .cmt-form .cmt-name-input{display:block;width:100%;max-width:none;margin:0 0 12px;padding:0 0 12px;border:0;border-bottom:1px solid var(--vk-line);border-radius:0;background:transparent;font:400 14px/20px Inter,sans-serif;color:var(--vk-ink)}
  .pa.vk-prod .cmt-form .cmt-name-input:focus,.pa.vk-prod .cmt-form .cmt-name-input:focus-visible{outline:none;background:transparent;border-bottom-color:var(--vk-line3)}
  .pa.vk-prod .cmt-form-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px;padding:0}
  .pa.vk-prod .cmt-charcount{font-size:12.5px;line-height:20px;color:var(--vk-faint);font-variant-numeric:tabular-nums}
  .pa.vk-prod .cmt-signin{font-weight:500;color:var(--vk-acc-tx)}
  .pa.vk-prod .pa-post{display:inline-flex;align-items:center;justify-content:center;flex:none;height:36px;margin:0;padding:0 14px;border:0;border-radius:var(--vk-btn-r);background:var(--vk-btn);color:var(--vk-btn-ink);font:600 14px/1 Inter,sans-serif;cursor:pointer;transition:background-color .15s}
  .pa.vk-prod .pa-post:hover{background:var(--vk-btn-hi);opacity:1}
  .pa.vk-prod .pa-post:disabled{opacity:.5;cursor:default}
  .pa.vk-prod .cmt-msg{margin-top:10px;font-size:13px;line-height:20px}
  .pa.vk-prod .cmt-msg:empty{display:none}
  .pa.vk-prod .cmt-list{display:flex;flex-direction:column;gap:0;margin:20px 0 0}
  .pa.vk-prod #cmtRest{display:flex;flex-direction:column}
  .pa.vk-prod #cmtRest[hidden]{display:none}
  .pa.vk-prod .cmt{display:flex;align-items:flex-start;gap:12px;padding:18px 0;border-top:1px solid var(--vk-line)}
  .pa.vk-prod .cmt-list>.cmt:first-child{padding-top:6px;border-top:0}
  .pa.vk-prod .cmt-avatar{flex:none;width:32px;height:32px;border:1px solid var(--vk-line);border-radius:50%;object-fit:cover}
  .pa.vk-prod .cmt-avatar-ph{display:flex;align-items:center;justify-content:center;background:var(--pd-tile);color:var(--vk-ink);font:600 13px/1 Inter,sans-serif}
  .pa.vk-prod .cmt-body{flex:1;min-width:0}
  .pa.vk-prod .cmt-head{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;min-width:0;height:20px;margin:6px 0 4px}
  .pa.vk-prod .cmt-name{min-width:0;overflow:hidden;font:600 14px/20px Inter,sans-serif;color:var(--vk-ink);text-overflow:ellipsis;white-space:nowrap}
  .pa.vk-prod a.cmt-name:hover{color:var(--vk-acc-tx)}
  .pa.vk-prod .cmt-guest{display:inline-flex;align-items:center;flex:none;height:18px;padding:0 6px;border:1px solid var(--vk-line);border-radius:5px;background:transparent;font:500 11.5px/1 Inter,sans-serif;letter-spacing:normal;text-transform:none;color:var(--vk-faint)}
  .pa.vk-prod .cmt-time{flex:none;font-size:13px;line-height:20px;color:var(--vk-faint);white-space:nowrap}
  .pa.vk-prod .cmt-time::before{content:"\00B7";margin-right:8px;color:var(--vk-faint)}
  .pa.vk-prod .cmt-text{max-width:720px;font-size:15px;line-height:24px;color:var(--vk-body);white-space:pre-line;overflow-wrap:anywhere}
  .pa.vk-prod .cmt-empty{padding:0;font-size:14px;line-height:20px;color:var(--vk-mute)}
  .pa.vk-prod .pa-cmt-more{display:inline-flex;align-items:center;justify-content:center;width:auto;height:36px;margin:12px 0 0;padding:0 14px;border:1px solid var(--vk-btn2-line);border-radius:var(--vk-btn-r);background:var(--vk-btn2);box-shadow:none;font:500 13.5px/1 Inter,sans-serif;color:var(--vk-btn2-ink);cursor:pointer;transition:border-color .15s}
  .pa.vk-prod .pa-cmt-more:hover{border-color:var(--vk-line3);background:var(--vk-btn2-hi);color:var(--vk-btn2-ink)}

  /* claim (when the claim flow is on) */
  .pa.vk-prod .pa-main>.pa-claim{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-top:28px;border-bottom:0}
  .pa.vk-prod .pa-claim-title{font:600 15px/24px Inter,sans-serif;color:var(--vk-ink)}
  .pa.vk-prod .pa-claim-sub{margin-top:2px;font-size:14px;line-height:20px;color:var(--vk-mute)}
  .pa.vk-prod .pa-claim-btn{font:600 14px/20px Inter,sans-serif;color:var(--vk-acc-tx);white-space:nowrap}
  .pa.vk-prod .pa-claim-btn:hover{color:var(--vk-ink)}

  /* the owner's badge picker: preview on the left, the choices and the code on the right */
  .pa.vk-prod .pa-badge{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);column-gap:32px;align-items:start;margin:0;scroll-margin-top:84px}
  .pa.vk-prod .pa-badge>.pa-h2{grid-column:1/-1;margin-bottom:6px}
  .pa.vk-prod .pa-badge>.pa-badge-note{grid-column:1/-1;max-width:62ch;margin:0 0 20px;font-size:14px;line-height:22px;color:var(--vk-mute)}
  .pa.vk-prod .pa-badge>.pa-badge-prev{grid-column:1;grid-row:3/span 3;display:flex;align-items:center;justify-content:center;min-height:132px;padding:28px 16px;border:0;border-radius:12px;background:var(--pd-box);background-image:none;box-shadow:var(--vk-card-shadow-hi)}
  .pa.vk-prod .pa-badge-prev img{display:block;max-width:100%;height:auto}
  .pa.vk-prod .pa-badge>.pa-badge-row,.pa.vk-prod .pa-badge>.pa-embed{grid-column:2}
  .pa.vk-prod .pa-badge-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
  .pa.vk-prod .pa-badge-row+.pa-badge-row{margin-top:10px}
  .pa.vk-prod .vk-seg{display:inline-flex;align-items:center;gap:2px;height:32px;padding:2px;border:0;border-radius:9px;background:var(--vk-fill)}
  .pa.vk-prod .vk-sb{display:inline-flex;align-items:center;height:28px;padding:0 10px;border:0;border-radius:7px;background:transparent;font:500 12.5px/1 Inter,sans-serif;color:var(--vk-mute);white-space:nowrap;cursor:pointer;transition:color .15s,background-color .15s}
  .pa.vk-prod .vk-sb:hover{color:var(--vk-ink)}
  .pa.vk-prod .vk-sb.vk-on{background:var(--vk-s2);box-shadow:var(--vk-card-shadow);color:var(--vk-ink)}
  .pa.vk-prod .pa-badge-copy{display:inline-flex;align-items:center;height:32px;margin-left:auto;padding:0 12px;border:1px solid var(--vk-btn2-line);border-radius:var(--vk-btn-r);background:var(--vk-btn2);font:600 13px/1 Inter,sans-serif;color:var(--vk-btn2-ink);white-space:nowrap;cursor:pointer;transition:border-color .15s}
  .pa.vk-prod .pa-badge-copy:hover{border-color:var(--vk-line3)}
  .pa.vk-prod .pa-embed{display:block;width:100%;height:72px;margin:12px 0 0;padding:10px 12px;resize:none;border:1px solid transparent;border-radius:10px;background:var(--pd-box);box-shadow:var(--vk-card-shadow);font:400 11.5px/17px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--vk-mute);word-break:break-all;transition:border-color .15s}
  .pa.vk-prod .pa-embed:focus,.pa.vk-prod .pa-embed:focus-visible{outline:none;border-color:var(--vk-line3)}

  /* more like this */
  .pa.vk-prod>.pa-related{margin:64px 0 0;padding:40px 0 0;border-top:1px solid var(--vk-line)}
  .pa.vk-prod .pa-related-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 20px}
  .pa.vk-prod .pa-related-head .pa-h2{margin:0}
  .pa.vk-prod .pa-related-head a{font:500 13.5px/20px Inter,sans-serif;color:var(--vk-mute);white-space:nowrap;transition:color .15s}
  .pa.vk-prod .pa-related-head a:hover{color:var(--vk-ink)}
  .pa.vk-prod .pa-rel-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
  .pa.vk-prod .pa-rel{display:block;min-width:0}
  .pa.vk-prod .pa-rel-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;overflow:hidden;background:var(--pd-tile)!important;border:1px solid var(--vk-line);box-shadow:var(--vk-card-shadow);color:var(--vk-ink);font:600 16px/1 Inter,sans-serif}
  .pa.vk-prod .pa-rel-ic img{display:block;width:64%;height:64%;object-fit:contain}
  .pa.vk-prod .pa-rel-n{margin-top:14px;overflow:hidden;font:600 15px/20px Inter,sans-serif;color:var(--vk-ink);text-overflow:ellipsis;white-space:nowrap;transition:color .15s}
  .pa.vk-prod .pa-rel-t{display:-webkit-box;margin-top:4px;overflow:hidden;font-size:13.5px;line-height:20px;color:var(--vk-mute);-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .pa.vk-prod .pa-rel-m{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:12.5px;line-height:16px;color:var(--vk-faint)}
  .pa.vk-prod .pa-rel-m .vk-hype-sm{flex-direction:row;align-items:center;gap:6px;width:auto}
  .pa.vk-prod .pa-rel-m .vk-hype-l{font:500 12px/16px Inter,sans-serif;letter-spacing:normal;text-transform:none;color:var(--vk-faint)}
  .pa.vk-prod .pa-rel-m .vk-hype-t{width:40px;height:4px}
  .pa.vk-prod .pa-rel:hover .pa-rel-n{color:var(--vk-acc-tx)}
}



/* ---- desktop pages (src/deskPages.js): Arena, Hall of Kings, Reports, Builders, login, dashboard, settings ---- */
.auc-bid-h{display:none}
@media (min-width:1025px){
  .auc.auc-page{max-width:1248px;margin:0 auto;padding:124px 24px 0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-feature-settings:"cv11","ss01";letter-spacing:normal;-webkit-font-smoothing:antialiased;color:var(--vk-body)}
  .auc.auc-page .auc-ambient{display:none}
  .auc.auc-page .auc-hero{display:grid;grid-template-columns:minmax(0,1fr) 380px;column-gap:48px;align-items:start;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;text-align:left}
  .auc.auc-page .auc-intro{grid-column:1;grid-row:1;min-width:0;margin:0 0 32px}
  .auc.auc-page .auc-eyebrow{display:inline-flex;align-items:center;gap:8px;width:auto;max-width:100%;height:28px;margin:0;padding:0 12px;border:1px solid var(--vk-line);border-radius:999px;background:var(--vk-fill2);color:var(--vk-mute);font:500 13px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;text-transform:none;white-space:nowrap}
  .auc.auc-page .auc-eyebrow::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--vk-acc)}
  .auc.auc-page h1{margin:0;font:600 48px/56px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-ink);text-wrap:balance;margin-top:20px}
  .auc.auc-page .auc-sub{margin:12px 0 0;max-width:60ch;font:400 17px/26px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-mute);text-wrap:pretty;margin-left:0;margin-right:0}
  .auc.auc-page .auc-sub b{color:var(--vk-ink);font-weight:600}

  /* the ring */
  .auc.auc-page .auc-px-wrap{grid-column:1;grid-row:2;min-width:0;margin:0}
  .auc.auc-page .auc-px-stage,.auc.auc-page .auc-px-wrap.has-log .auc-px-stage{aspect-ratio:16/9;min-height:300px;border:0;border-radius:16px;box-shadow:var(--vk-card-shadow-hi)}
  .auc.auc-page .auc-hud{padding:12px 14px}
  .auc.auc-page .auc-hud-who,.auc.auc-page .auc-hud-amt,.auc.auc-page .auc-hud-next{font-size:12.5px;font-weight:600}
  .auc.auc-page .auc-hud-k{font:500 11.5px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;text-transform:none}
  .auc.auc-page .auc-px-fallback{font:500 14px/20px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:color-mix(in srgb,var(--vk-btn-ink) 72%,transparent)}
  .auc.auc-page .auc-px-crown,.auc.auc-page .auc-hud-crown,.auc.auc-page .auc-px-crown .auc-crown,.auc.auc-page .auc-hud-crown .auc-crown{color:var(--vk-gold)}

  /* the bid panel */
  .auc.auc-page .auc-bidcol{grid-column:2;grid-row:1 / span 3;align-self:start;position:relative;min-width:0;padding:24px;border:0;border-radius:16px;background:var(--vk-s1);box-shadow:var(--vk-card-shadow)}
  .auc.auc-page .auc-bid-h{display:block;margin:0;font:600 17px/24px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-ink)}
  .auc.auc-page .auc-form{margin:16px 0 0;max-width:none;text-align:left}
  .auc.auc-page .auc-inline{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
  .auc.auc-page .auc-inline > .auc-inwrap{order:1;flex:1 1 100%;min-width:0}
  .auc.auc-page .auc-inline > .auc-match{order:2;flex:1 1 100%;width:100%;margin:0}
  .auc.auc-page .auc-inline > .auc-amt-wrap{order:3;flex:0 0 112px}
  .auc.auc-page .auc-inline > .auc-btn{order:4;flex:1 1 0;min-width:0}
  .auc.auc-page .auc-in{height:44px;margin:0;padding:0 14px;border:1px solid var(--vk-line2);border-radius:10px;background:transparent;color:var(--vk-ink);font:400 14.5px/1.2 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;outline:none;box-shadow:none;transition:border-color .15s;width:100%;padding:0 14px 0 15px}
  .auc.auc-page .auc-inwrap.is-x .auc-in,.auc.auc-page .auc-inwrap.has-url .auc-in{padding-left:38px}
  .auc.auc-page .auc-in:focus,.auc.auc-page .auc-amt-in:focus{border-color:var(--vk-line3);box-shadow:none;outline:none}
  .auc.auc-page .auc-ph{left:15px;color:var(--vk-faint);font:400 14.5px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
  .auc.auc-page .auc-ph em{opacity:1;color:var(--vk-faint)}
  .auc.auc-page .auc-inico{color:var(--vk-mute)}
  .auc.auc-page .auc-inwrap.is-x .auc-inico{color:var(--vk-ink)}
  .auc.auc-page .auc-amt-in{height:44px;margin:0;padding:0 14px;border:1px solid var(--vk-line2);border-radius:10px;background:transparent;color:var(--vk-ink);font:400 14.5px/1.2 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;outline:none;box-shadow:none;transition:border-color .15s;width:100%;padding:0 32px 0 26px;font-weight:600;-moz-appearance:textfield}
  .auc.auc-page .auc-amt-cur{left:13px;color:var(--vk-faint);font:600 14.5px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
  .auc.auc-page .auc-spin{right:6px}
  .auc.auc-page .auc-spin-b{width:20px;height:16px;border-radius:5px;background:var(--vk-fill);color:var(--vk-mute)}
  .auc.auc-page .auc-spin-b:hover{background:var(--vk-acc-soft);color:var(--vk-acc-tx)}
  .auc.auc-page .auc-btn,.auc.auc-page .auc-inline .auc-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;margin:0;padding:0 18px;border:1px solid transparent;border-radius:var(--vk-btn-r);background:var(--vk-btn);background-image:none;color:var(--vk-btn-ink);font:600 14px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;text-transform:none;text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:none;filter:none;transform:none;transition:background-color .15s;height:44px;padding:0 16px;line-height:1.2;white-space:normal;text-align:center}
  .auc.auc-page .auc-btn:hover{background:var(--vk-btn-hi);color:var(--vk-btn-ink);box-shadow:none;filter:none;transform:none}
  .auc.auc-page .auc-btn[disabled]{opacity:.6;cursor:default}
  .auc.auc-page .auc-btn:focus{outline:none}
  .auc.auc-page .auc-btn:focus-visible,.auc.auc-page .auc-spin-b:focus-visible{outline:2px solid var(--vk-focus);outline-offset:2px}
  .auc.auc-page .auc-match-in{gap:10px;padding:10px 12px;border:1px solid var(--vk-line);border-radius:10px;background:var(--vk-fill2);font:400 13px/1.45 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
  .auc.auc-page .auc-match-in:not(.is-miss){color:var(--vk-mute)}
  .auc.auc-page .auc-match-in strong{color:var(--vk-ink);font-size:14px;font-weight:600}
  .auc.auc-page .auc-match-in span{color:var(--vk-mute)}
  .auc.auc-page .auc-match-in.is-new{border-style:dashed}
  .auc.auc-page .auc-match-ico{width:32px;height:32px;border-radius:8px;background:var(--vk-fill);color:var(--vk-ink)}
  .auc.auc-page .auc-min{margin:10px 0 0;font:400 12.5px/18px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-faint)}
  .auc.auc-page .auc-msg{margin:8px 0 0;min-height:18px;font:500 13px/18px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
  .auc.auc-page .auc-msg:not(.is-err){color:var(--vk-acc-tx)}
  .auc.auc-page .auc-perks{gap:12px;margin:20px 0 0;padding:20px 0 0;border-top:1px solid var(--vk-line)}
  .auc.auc-page .auc-perk{gap:10px;font:400 13.5px/20px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-mute)}
  .auc.auc-page .auc-pi{width:20px;height:20px;margin-top:0;border-radius:6px;background:var(--vk-acc-soft);box-shadow:none;color:var(--vk-acc-tx)}
  .auc.auc-page .auc-pi svg{width:12px;height:12px}
  .auc.auc-page .auc-perks-label{margin:4px 0 0;padding:16px 0 0;border-top:1px solid var(--vk-line);font:600 13px/18px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;text-transform:none;color:var(--vk-ink)}
  .auc.auc-page .auc-perk .auc-key,.auc.auc-page .auc-perk b{color:var(--vk-ink);font-weight:600;background:none;-webkit-text-fill-color:currentColor;animation:none;white-space:normal}
  .auc.auc-page .auc-note{margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--vk-line);font:400 12.5px/19px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-faint);text-align:left}
  .auc.auc-page .auc-note + .auc-note{margin-top:8px;padding-top:0;border-top:0}
  .auc.auc-page .auc-note a{color:var(--vk-acc-tx);font-weight:500}
  .auc.auc-page .auc-paid{margin:16px 0 0;padding:10px 12px;border:0;border-radius:10px;background:var(--vk-acc-soft);color:var(--vk-acc-tx);font:500 13px/19px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}

  /* the throne and the board */
  .auc.auc-page .auc-boardcol{grid-column:1;grid-row:3;min-width:0;margin:40px 0 0}
  .auc.auc-page .auc-ico{color:var(--vk-ink)}
  .auc.auc-page .auc-ico:not(.has-img),.auc.auc-page .auc-ico.img-dead{background:var(--vk-s2)!important;box-shadow:inset 0 0 0 1px var(--vk-line);color:var(--vk-ink);font-weight:600}
  .auc.auc-page .auc-ico.has-img{background:var(--vk-s1);box-shadow:inset 0 0 0 1px var(--vk-line)}
  .auc.auc-page .auc-ico.is-lg{width:44px;height:44px;border-radius:12px;font-size:16px}
  .auc.auc-page .auc-ico.is-md{width:36px;height:36px;border-radius:10px;font-size:14px}
  .auc.auc-page .auc-throne-row{display:flex;align-items:center;gap:14px;margin:0;padding:18px 20px;text-align:left;border:0;border-radius:16px;background:var(--vk-s1);box-shadow:var(--vk-card-shadow)}
  .auc.auc-page .auc-throne-row > .auc-tr-cover{border-radius:16px}
  .auc.auc-page .auc-sheen{display:none}
  .auc.auc-page .auc-tr-crown{position:relative;left:auto;top:auto;transform:none;z-index:2;display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:0;background:none;box-shadow:none}
  .auc.auc-page .auc-tr-crown .auc-crown{width:20px;height:15px;color:var(--vk-gold)}
  .auc.auc-page .auc-tr-label{margin:0 0 2px;font:500 12.5px/16px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;text-transform:none;color:var(--vk-mute)}
  .auc.auc-page .auc-tr-name{font:600 17px/24px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-ink)}
  .auc.auc-page .auc-throne-row:hover .auc-tr-name{color:var(--vk-acc-tx)}
  .auc.auc-page .auc-tr-meta{margin:2px 0 0;font:400 13px/18px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-mute)}
  .auc.auc-page .auc-tr-meta strong{color:var(--vk-ink);font-weight:500}
  .auc.auc-page .auc-tr-amt{font:600 22px/28px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-ink)}
  .auc.auc-page .auc-empty{margin:0;padding:32px 20px;border:1px dashed var(--vk-line2);border-radius:16px;background:transparent}
  .auc.auc-page .auc-empty-crown{color:var(--vk-gold)}
  .auc.auc-page .auc-empty-h{font:600 17px/24px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-ink)}
  .auc.auc-page .auc-empty-s{margin:4px 0 0;font:400 14px/20px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-mute)}
  .auc.auc-page .auc-tabwrap{margin:40px 0 0}
  .auc.auc-page .auc-tabs{display:flex;align-items:center;gap:4px;flex-wrap:nowrap;padding:0;border:0}
  .auc.auc-page .auc-tab{appearance:none;-webkit-appearance:none;height:32px;margin:0;padding:0 14px;border:0;border-radius:8px;background:transparent;color:var(--vk-mute);font:500 14px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;cursor:pointer;transition:background-color .15s,color .15s}
  .auc.auc-page .auc-tab:hover{background:var(--vk-fill);color:var(--vk-ink)}
  .auc.auc-page .auc-tab.is-on{background:var(--vk-s2);color:var(--vk-ink)}
  .auc.auc-page .auc-tab:focus{outline:none}
  .auc.auc-page .auc-tab:focus-visible{outline:2px solid var(--vk-focus);outline-offset:2px}
  .auc.auc-page .auc-season-live{margin-left:auto;padding:0;font:500 13px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-mute);white-space:nowrap}
  .auc.auc-page .auc-live-dot{background:var(--vk-acc);box-shadow:0 0 0 3px var(--vk-acc-soft)}
  .auc.auc-page .auc-tab-note{margin:16px 0 0;font:400 13px/19px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-faint)}
  .auc.auc-page .auc-tab-empty{margin:20px 0 4px;font:400 14px/20px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-mute)}
  .auc.auc-page .auc-podium{display:flex;flex-direction:column;gap:0;margin:12px 0 0;border-top:1px solid var(--vk-line)}
  .auc.auc-page .auc-pcard{display:grid;grid-template-columns:28px 44px minmax(0,1fr) auto;align-items:center;gap:14px;min-height:76px;padding:12px 10px;border:0;border-bottom:1px solid var(--vk-line);border-radius:0;background:transparent;box-shadow:none;animation:none;transform:none;transition:background-color .15s}
  .auc.auc-page .auc-pcard.is-r1,.auc.auc-page .auc-pcard.is-r2,.auc.auc-page .auc-pcard.is-r3{border-color:var(--vk-line);box-shadow:none;animation:none}
  .auc.auc-page .auc-pcard:hover,.auc.auc-page .auc-pcard:active{background:var(--vk-fill2);transform:none}
  .auc.auc-page .auc-pcard > .auc-pcover{border-radius:0}
  .auc.auc-page .auc-pcard.is-r1 .auc-ico{animation:none}
  .auc.auc-page .auc-pcard.is-dethroned{animation:aucDethrone 1.4s ease-out forwards}
  .auc.auc-page .auc-badge,.auc.auc-page .auc-pcard.is-r1 .auc-badge,.auc.auc-page .auc-pcard.is-r2 .auc-badge,.auc.auc-page .auc-pcard.is-r3 .auc-badge{position:static;transform:none;display:grid;place-items:center;width:28px;height:28px;border-radius:0;background:none;box-shadow:none;color:var(--vk-faint);font:600 13px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
  .auc.auc-page .auc-badge .auc-crown{width:18px;height:14px;color:var(--vk-gold)}
  .auc.auc-page .auc-pname{font:600 15px/22px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-ink)}
  .auc.auc-page .auc-pcard:hover .auc-pname,.auc.auc-page .auc-pcard:active .auc-pname,.auc.auc-page .auc-pcard:has(.auc-pname:active) .auc-pname{color:var(--vk-acc-tx)}
  .auc.auc-page .auc-pdesc{margin:2px 0 0;font:400 14px/20px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-mute);-webkit-line-clamp:1}
  .auc.auc-page .auc-pby{margin:2px 0 0;font:400 13px/18px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-mute)}
  .auc.auc-page .auc-pmeta{margin:4px 0 0;font:400 12.5px/16px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-faint)}
  .auc.auc-page .auc-chips-row{margin:6px 0 0;gap:6px}
  .auc.auc-page .auc-king-chip,.auc.auc-page .auc-rise-chip{display:inline-flex;align-items:center;gap:5px;height:22px;margin:0;padding:0 8px;border:1px solid var(--vk-line);border-radius:6px;background:var(--vk-fill2);color:var(--vk-body);font:500 12px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;text-transform:none;text-decoration:none;white-space:nowrap}
  .auc.auc-page .auc-king-chip:hover{background:var(--vk-fill);border-color:var(--vk-line2)}
  .auc.auc-page .auc-king-chip .auc-crown{width:12px;height:9px;color:var(--vk-gold)}
  .auc.auc-page .auc-rise-chip{color:var(--vk-acc-tx);background:var(--vk-acc-soft);border-color:transparent}
  .auc.auc-page .auc-pamt{align-self:center;font:600 16px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-ink)}
  .auc.auc-page .auc-div{margin:32px 0 0;padding:0 2px 10px;border:0;text-align:left}
  .auc.auc-page .auc-div span{padding:0;background:none;font:600 14px/20px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;text-transform:none;color:var(--vk-ink)}
  .auc.auc-page .auc-list{margin:0;padding:0;border-top:1px solid var(--vk-line)}
  .auc.auc-page .auc-row{display:grid;grid-template-columns:28px 36px minmax(0,1fr) auto 12px;align-items:center;gap:14px;min-height:64px;padding:10px;border-bottom:1px solid var(--vk-line);transform:none;transition:background-color .15s}
  .auc.auc-page .auc-row:last-child{border-bottom:1px solid var(--vk-line)}
  .auc.auc-page .auc-row::before{display:none}
  .auc.auc-page .auc-row:hover,.auc.auc-page .auc-row:active,.auc.auc-page .auc-row:has(.auc-row-name:active){background:var(--vk-fill2);transform:none}
  .auc.auc-page .auc-rank{width:auto;font:500 13px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-faint);text-align:center}
  .auc.auc-page .auc-row .auc-ico.is-md{width:36px!important;height:36px!important;border-radius:10px!important;font-size:14px!important}
  .auc.auc-page .auc-row-name{font:600 15px/22px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-ink)}
  .auc.auc-page .auc-row:hover .auc-row-name,.auc.auc-page .auc-row:active .auc-row-name,.auc.auc-page .auc-row:has(.auc-row-name:active) .auc-row-name{color:var(--vk-acc-tx)}
  .auc.auc-page .auc-rdesc{margin:2px 0 0;font:400 13.5px/19px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-mute);-webkit-line-clamp:1}
  .auc.auc-page .auc-row .auc-pmeta{margin:2px 0 0;font-size:12px}
  .auc.auc-page .auc-row .auc-king-chip,.auc.auc-page .auc-row .auc-rise-chip{margin-left:6px;vertical-align:1px}
  .auc.auc-page .auc-amt{font:600 15px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-ink)}
  .auc.auc-page .auc-row .auc-rgo,.auc.auc-page .auc-row:hover .auc-rgo,.auc.auc-page .auc-row:active .auc-rgo{width:12px;margin:0;opacity:0;color:var(--vk-mute);transition:opacity .15s}
  .auc.auc-page .auc-row:hover .auc-rgo{opacity:1}
  .auc.auc-page .auc-kings-link{margin:20px 0 0;font:400 13.5px/20px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-mute);text-align:left}
  .auc.auc-page .auc-kings-link a{color:var(--vk-acc-tx);font-weight:500}

  /* more than the arena */
  .auc.auc-page .auc-more{max-width:none;margin:96px 0 0;padding:0;text-align:left}
  .auc.auc-page .auc-more h2{margin:0;font:600 22px/30px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-ink);text-transform:none;font-size:24px;line-height:32px}
  .auc.auc-page .auc-more > p{margin:8px 0 0;max-width:68ch;font:400 15px/24px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-mute)}
  .auc.auc-page .auc-more-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0 0}
  .auc.auc-page .auc-more-card{padding:22px 22px 20px;transform:none;transition:box-shadow .15s,background-color .15s;border:0;border-radius:16px;background:var(--vk-s1);box-shadow:var(--vk-card-shadow)}
  .auc.auc-page .auc-more-card:hover{background:var(--vk-s2);box-shadow:var(--vk-card-shadow-hi);border:0;transform:none}
  .auc.auc-page .auc-more-card h3{margin:0;font:600 16px/22px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-ink)}
  .auc.auc-page .auc-more-card p{margin:6px 0 14px;font:400 14px/21px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-mute)}
  .auc.auc-page .auc-more-go{font:500 13.5px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-acc-tx)}

  html[data-theme="light"] .auc.auc-page .auc-tab{border-radius:999px}
  html[data-theme="light"] .auc.auc-page .auc-tab.is-on{background:var(--vk-ink);color:var(--vk-page)}
  html[data-theme="light"] .auc.auc-page .auc-in,html[data-theme="light"] .auc.auc-page .auc-amt-in{border-radius:999px;background:var(--vk-s1)}
  html[data-theme="light"] .auc.auc-page .auc-ph{left:17px}
  html[data-theme="light"] .auc.auc-page .auc-amt-cur{left:15px}
  html[data-theme="light"] .auc.auc-page .auc-inwrap .auc-in{padding-left:17px}
  html[data-theme="light"] .auc.auc-page .auc-inwrap.is-x .auc-in,html[data-theme="light"] .auc.auc-page .auc-inwrap.has-url .auc-in{padding-left:40px}
  html[data-theme="light"] .auc.auc-page .auc-inico{left:15px}
  html[data-theme="light"] .auc.auc-page .auc-amt-in{padding-left:28px}
  html[data-theme="light"] .auc.auc-page .auc-spin{right:10px}
  html[data-theme="light"] .auc.auc-page .auc-match-in{background:var(--vk-s1)}

  /* The panel follows the scroll only when the window is tall enough to show all of it. */
  @media (min-height:820px){
    .auc.auc-page .auc-bidcol{position:sticky;top:84px}
  }
  @media (max-width:1279px){
    .auc.auc-page .auc-hero{grid-template-columns:minmax(0,1fr) 340px;column-gap:32px}
    .auc.auc-page .auc-bidcol{padding:20px}
    .auc.auc-page .auc-more-grid{gap:12px}
  }

  .kg-wrap.vkd-kings{display:flex;flex-direction:column;align-items:flex-start;max-width:880px;margin:0 auto;padding:124px 24px 0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-feature-settings:"cv11","ss01";letter-spacing:normal;-webkit-font-smoothing:antialiased}
  .kg-wrap.vkd-kings .kg-eyebrow{display:none}
  .kg-wrap.vkd-kings .kg-live{order:-1;display:inline-flex;align-items:center;gap:8px;width:auto;max-width:100%;height:28px;margin:0;padding:0 12px;border:1px solid var(--vk-line);border-radius:999px;background:var(--vk-fill2);color:var(--vk-mute);font:500 13px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;text-transform:none;white-space:nowrap;margin:0 0 20px}
  .kg-wrap.vkd-kings .kg-live-dot{flex:none;width:6px;height:6px;background:var(--vk-acc);box-shadow:none}
  .kg-wrap.vkd-kings .kg-h1{margin:0;font:600 48px/56px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-ink);text-wrap:balance}
  .kg-wrap.vkd-kings .kg-sub{margin:12px 0 0;max-width:60ch;font:400 17px/26px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-mute);text-wrap:pretty;max-width:62ch}
  .kg-wrap.vkd-kings .kg-list{align-self:stretch;margin:40px 0 0;padding:4px 24px;border:0;border-radius:16px;background:var(--vk-s1);box-shadow:var(--vk-card-shadow)}
  .kg-wrap.vkd-kings .kg-row{gap:16px;padding:16px 0;border-bottom:1px solid var(--vk-line)}
  .kg-wrap.vkd-kings .kg-row:last-child{border-bottom:0}
  .kg-wrap.vkd-kings .kg-week{width:128px}
  .kg-wrap.vkd-kings .kg-week-n{font:600 14px/20px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-ink)}
  .kg-wrap.vkd-kings .kg-week-d{margin-top:2px;font:400 12px/16px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-faint)}
  .kg-wrap.vkd-kings .auc-ico{width:40px;height:40px;border-radius:10px;color:var(--vk-ink);font:600 15px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
  .kg-wrap.vkd-kings .auc-ico:not(.has-img),.kg-wrap.vkd-kings .auc-ico.img-dead{background:var(--vk-s2)!important;box-shadow:inset 0 0 0 1px var(--vk-line)}
  .kg-wrap.vkd-kings .auc-ico.has-img{background:var(--vk-s1);box-shadow:inset 0 0 0 1px var(--vk-line)}
  .kg-wrap.vkd-kings .kg-name{font:600 15px/22px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-ink)}
  .kg-wrap.vkd-kings .kg-name:hover{color:var(--vk-acc-tx)}
  .kg-wrap.vkd-kings .kg-tag{margin:2px 0 0;font:400 13.5px/19px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-mute)}
  .kg-wrap.vkd-kings .kg-crown{width:16px;height:12px;color:var(--vk-gold)}
  .kg-wrap.vkd-kings .kg-amt{font:600 15px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-ink)}
  .kg-wrap.vkd-kings .kg-empty{align-self:stretch;margin:40px 0 0;padding:32px 24px;border:1px dashed var(--vk-line2);border-radius:16px;font:400 14px/20px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-mute)}
  .kg-wrap.vkd-kings .kg-back{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;margin:0;padding:0 16px;border:1px solid var(--vk-btn2-line);border-radius:var(--vk-btn-r);background:var(--vk-btn2);background-image:none;color:var(--vk-btn2-ink);font:500 14px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;text-transform:none;text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:none;filter:none;transform:none;transition:background-color .15s,border-color .15s;margin:28px 0 0}
  .kg-wrap.vkd-kings .kg-back:hover{background:var(--vk-btn2-hi);border-color:var(--vk-line3);color:var(--vk-btn2-ink);box-shadow:none;filter:none;transform:none;text-decoration:none}
  .kg-wrap.vkd-kings .kg-back:focus-visible{outline:2px solid var(--vk-focus);outline-offset:2px}

  .lg.vkd-rep{max-width:808px;margin:0 auto;padding:124px 24px 0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-feature-settings:"cv11","ss01";letter-spacing:normal;-webkit-font-smoothing:antialiased;color:var(--vk-body)}
  .lg.vkd-rep .lg-crumb{margin:0 0 20px;font:400 13px/18px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-faint)}
  .lg.vkd-rep .lg-crumb a{color:var(--vk-faint)}
  .lg.vkd-rep .lg-crumb a:hover{color:var(--vk-ink)}
  .lg.vkd-rep .lg-crumb span[aria-current]{color:var(--vk-body)}
  .lg.vkd-rep .lg-sep{color:var(--vk-line3)}
  .lg.vkd-rep h1{margin:0;font:600 48px/56px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-ink);text-wrap:balance;font-size:44px;line-height:52px}
  .lg.vkd-rep h2{margin:0;font:600 22px/30px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-ink);text-transform:none;margin:56px 0 12px}
  .lg.vkd-rep h3{margin:24px 0 6px;font:600 16px/24px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-ink)}
  .lg.vkd-rep p,.lg.vkd-rep li{font:400 15.5px/26px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-body)}
  .lg.vkd-rep a{color:var(--vk-acc-tx)}
  .lg.vkd-rep b,.lg.vkd-rep strong{color:var(--vk-ink);font-weight:600}
  .lg.vkd-rep .lg-lede{margin:12px 0 0;max-width:60ch;font:400 17px/26px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-mute);text-wrap:pretty;max-width:none;margin:14px 0 0}
  .lg.vkd-rep .lg-meta{margin:14px 0 40px;font:400 13px/20px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-faint)}
  .lg.vkd-rep .lg-meta a{color:var(--vk-body)}
  .lg.vkd-rep .lg-note{margin:12px 0 0;font:400 13px/20px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-faint)}
  .lg.vkd-rep .lg-note b{color:var(--vk-body)}
  .lg.vkd-rep .rh-list{margin:36px 0 20px;border-top:1px solid var(--vk-line)}
  .lg.vkd-rep .rh-list li{border-bottom:1px solid var(--vk-line)}
  .lg.vkd-rep .rh-list a{gap:6px;padding:22px 4px}
  .lg.vkd-rep .rh-date{font:500 13px/18px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;text-transform:none;color:var(--vk-faint)}
  .lg.vkd-rep .rh-title{font:600 20px/28px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-ink)}
  .lg.vkd-rep .rh-stat{font:400 15px/23px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-mute)}
  .lg.vkd-rep .rh-list a:hover .rh-title{color:var(--vk-acc-tx)}
  .lg.vkd-rep .ir-bars{margin:8px 0 14px;border-top:1px solid var(--vk-line)}
  .lg.vkd-rep .ir-row{gap:16px;padding:10px 0;border-bottom:1px solid var(--vk-line);font:400 14px/20px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
  .lg.vkd-rep .ir-label{color:var(--vk-ink);font-weight:500}
  .lg.vkd-rep .ir-track{height:6px;border-radius:3px;background:var(--vk-fill)}
  .lg.vkd-rep .ir-fill{border-radius:3px;background:var(--vk-acc)}
  .lg.vkd-rep .ir-val{color:var(--vk-body)}
  .lg.vkd-rep .ir-val span{color:var(--vk-faint)}
  .lg.vkd-rep .ir-n{margin:0 0 12px;font:400 13px/19px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-faint)}
  .lg.vkd-rep .ir-key{margin:8px 0 14px;border-top:1px solid var(--vk-line)}
  .lg.vkd-rep .ir-key div{border-bottom:1px solid var(--vk-line)}
  .lg.vkd-rep .ir-key b{font:600 28px/34px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-ink)}
  .lg.vkd-rep .ir-key span{font:400 13px/19px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-mute)}
  .lg.vkd-rep .ir-thin{color:var(--vk-mute)}
  .lg.vkd-rep .sr-lines{margin:0 0 32px;border-top:1px solid var(--vk-line)}
  .lg.vkd-rep .sr-lines li{padding:12px 0;border-bottom:1px solid var(--vk-line);font:400 16px/25px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-ink)}
  .lg.vkd-rep .sr-cmp{border-top:1px solid var(--vk-line);font:400 14px/20px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
  .lg.vkd-rep .sr-cmp th{border-bottom:1px solid var(--vk-line);font:500 12.5px/17px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;text-transform:none;color:var(--vk-mute)}
  .lg.vkd-rep .sr-cmp td{border-bottom:1px solid var(--vk-line);color:var(--vk-body)}
  .lg.vkd-rep .sr-cmp td:first-child{color:var(--vk-ink)}
  .lg.vkd-rep .sr-method dl{border-top:1px solid var(--vk-line)}
  .lg.vkd-rep .sr-method dt,.lg.vkd-rep .sr-method dd{border-bottom:1px solid var(--vk-line)}
  .lg.vkd-rep .sr-method dt{color:var(--vk-mute)}
  .lg.vkd-rep .sr-method dd,.lg.vkd-rep .sr-cite{color:var(--vk-body)}
  .lg.vkd-rep .lg-faq h2{margin-top:56px}
  .lg.vkd-rep .lg-qa{padding:4px 0 6px;border-top:1px solid var(--vk-line)}
  .lg.vkd-rep .lg-qa h3{margin:18px 0 6px}
  .lg.vkd-rep .lg-sources{margin-top:48px;padding-top:20px;border-top:1px solid var(--vk-line)}
  .lg.vkd-rep .lg-sources h2{margin:0 0 10px;font:600 15px/22px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;text-transform:none;color:var(--vk-ink)}
  .lg.vkd-rep .lg-sources li{font:400 13.5px/20px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-mute)}
  .lg.vkd-rep .lg-sources a{color:var(--vk-body)}
  .lg.vkd-rep .lg-cta{margin:56px 0 0;padding:28px 32px;border:0;border-radius:16px;background:var(--vk-s1);box-shadow:var(--vk-card-shadow)}
  .lg.vkd-rep .lg-cta p{margin:0;max-width:520px;font:400 15px/22px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-mute)}
  .lg.vkd-rep .lg-cta p b{margin-bottom:4px;font:600 17px/24px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-ink)}
  .lg.vkd-rep .lg-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;margin:0;padding:0 18px;border:1px solid transparent;border-radius:var(--vk-btn-r);background:var(--vk-btn);background-image:none;color:var(--vk-btn-ink);font:600 14px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;text-transform:none;text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:none;filter:none;transform:none;transition:background-color .15s}
  .lg.vkd-rep .lg-btn:hover{background:var(--vk-btn-hi);color:var(--vk-btn-ink);box-shadow:none;filter:none;transform:none}

  .builders-page{max-width:1248px;margin:0 auto;padding:124px 24px 0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-feature-settings:"cv11","ss01";letter-spacing:normal;-webkit-font-smoothing:antialiased}
  .builders-page .builders-head{margin:0 0 32px;text-align:left}
  .builders-page .builders-head h1{margin:0;font:600 48px/56px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-ink);text-wrap:balance;text-transform:lowercase}
  .builders-page .builders-head h1::first-letter{text-transform:uppercase}
  .builders-page .builders-head p{margin:12px 0 0;max-width:60ch;font:400 17px/26px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-mute);text-wrap:pretty}
  .builders-page .builders-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .builders-page .builder-card{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:14px;row-gap:2px;align-items:start;padding:18px 20px;text-align:left;transform:none;transition:background-color .15s,box-shadow .15s;border:0;border-radius:16px;background:var(--vk-s1);box-shadow:var(--vk-card-shadow)}
  .builders-page .builder-card:hover{background:var(--vk-s2);box-shadow:var(--vk-card-shadow-hi);transform:none}
  .builders-page .builder-avatar{grid-column:1;grid-row:1 / span 3;width:44px;height:44px;margin:0;border:0;outline:1px solid var(--vk-line);outline-offset:-1px}
  .builders-page .builder-avatar-ph{background:var(--vk-s2);color:var(--vk-ink);font:600 17px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
  .builders-page .builder-name{grid-column:2;margin:1px 0 0;font:600 15px/22px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-ink)}
  .builders-page .builder-card:hover .builder-name{color:var(--vk-acc-tx)}
  .builders-page .builder-tagline{grid-column:2;margin:0;font:400 13.5px/19px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-mute)}
  .builders-page .builder-meta{grid-column:2;align-items:flex-start;margin:6px 0 0}
  .builders-page .builder-joined{font:400 12.5px/16px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-faint)}
  .builders-page .builders-empty{padding:40px 24px;border:1px dashed var(--vk-line2);border-radius:16px;font:400 15px/22px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-mute);text-align:left}
  .builders-page .builders-empty a{color:var(--vk-acc-tx);font-weight:500}

  .profile-page.vkd-maker{display:grid;grid-template-columns:280px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:64px;max-width:1120px;margin:0 auto;padding:124px 24px 0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-feature-settings:"cv11","ss01";letter-spacing:normal;-webkit-font-smoothing:antialiased}
  .profile-page.vkd-maker .profile-header{grid-column:1;grid-row:1;align-items:flex-start;margin:0;text-align:left}
  .profile-page.vkd-maker .profile-avatar,.profile-page.vkd-maker .profile-avatar-placeholder{width:72px;height:72px;margin:0 0 16px;border:0;outline:1px solid var(--vk-line);outline-offset:-1px}
  .profile-page.vkd-maker .profile-avatar-placeholder{background:var(--vk-s2);color:var(--vk-ink);font:600 28px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
  .profile-page.vkd-maker .profile-name{margin:0;font:600 28px/34px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-ink)}
  .profile-page.vkd-maker .profile-handle{margin:4px 0 0;font:500 14px/20px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-acc-tx)}
  .profile-page.vkd-maker .profile-bio{max-width:none;margin:12px 0 0;font:400 15px/23px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-body)}
  .profile-page.vkd-maker .profile-member-since{margin:12px 0 0;font:400 13px/18px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-faint)}
  .profile-page.vkd-maker .profile-social-links{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:10px;margin:16px 0 0}
  .profile-page.vkd-maker .profile-social-links a{font:500 13.5px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-mute)}
  .profile-page.vkd-maker .profile-social-links a:hover{color:var(--vk-ink)}
  .profile-page.vkd-maker .profile-stats{grid-column:1;grid-row:2;align-self:start;justify-content:flex-start;gap:28px;margin:24px 0 0;padding:20px 0 0;border:0;border-top:1px solid var(--vk-line)}
  .profile-page.vkd-maker .profile-stat{text-align:left}
  .profile-page.vkd-maker .profile-stat-number{font:600 20px/26px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-ink)}
  .profile-page.vkd-maker .profile-stat-label{margin-top:2px;font:400 12.5px/16px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;text-transform:none;color:var(--vk-mute)}
  .profile-page.vkd-maker .profile-products{grid-column:2;grid-row:1 / span 2;min-width:0}
  .profile-page.vkd-maker .profile-products-title{margin:0 0 8px;font:600 18px/26px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-ink)}
  .profile-page.vkd-maker .product-list{border-top:1px solid var(--vk-line)}
  .profile-page.vkd-maker .product-divider{display:none}
  .profile-page.vkd-maker .product-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto 36px;align-items:center;gap:16px;min-height:72px;margin:0;padding:10px;border-radius:0;border-bottom:1px solid var(--vk-line);transform:none;transition:background-color .15s}
  .profile-page.vkd-maker .product-row:hover{background:var(--vk-fill2);transform:none}
  .profile-page.vkd-maker .product-rank{display:none}
  .profile-page.vkd-maker .product-icon{width:44px;height:44px;border-radius:12px;background:var(--vk-s1)!important;box-shadow:inset 0 0 0 1px var(--vk-line)!important;color:var(--vk-ink);font:600 15px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
  .profile-page.vkd-maker .product-name-row{flex-wrap:nowrap;gap:8px;min-width:0}
  .profile-page.vkd-maker .product-name{overflow:hidden;font:600 15px/22px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-ink);text-overflow:ellipsis;white-space:nowrap}
  .profile-page.vkd-maker .product-row:hover .product-name{color:var(--vk-acc-tx)}
  .profile-page.vkd-maker .row-badge{display:inline-flex;align-items:center;gap:5px;height:22px;margin:0;padding:0 8px;border:1px solid var(--vk-line);border-radius:6px;background:var(--vk-fill2);color:var(--vk-body);font:500 12px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;text-transform:none;text-decoration:none;white-space:nowrap;height:20px;padding:0 7px;font-size:11.5px}
  .profile-page.vkd-maker .row-badge.new{border-color:transparent;background:var(--vk-acc-soft);color:var(--vk-acc-tx)}
  .profile-page.vkd-maker .product-desc{margin-top:2px;font:400 14px/20px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-mute)}
  .profile-page.vkd-maker .product-desc > a.maker-link,.profile-page.vkd-maker .product-desc > span{display:none}
  .profile-page.vkd-maker .product-meta{gap:12px}
  .profile-page.vkd-maker .product-cat{width:auto;display:inline-flex;align-items:center;gap:5px;height:22px;margin:0;padding:0 8px;border:1px solid var(--vk-line);border-radius:6px;background:var(--vk-fill2);color:var(--vk-body);font:500 12px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;text-transform:none;text-decoration:none;white-space:nowrap;border:1px solid var(--vk-line)!important;background:var(--vk-fill2)!important;color:var(--vk-body)!important}
  .profile-page.vkd-maker .ai-badge{display:inline-flex;align-items:center;gap:5px;height:22px;margin:0;padding:0 8px;border:1px solid var(--vk-line);border-radius:6px;background:var(--vk-fill2);color:var(--vk-body);font:500 12px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;text-transform:none;text-decoration:none;white-space:nowrap;max-width:140px;overflow:hidden;text-overflow:ellipsis}
  .profile-page.vkd-maker .cmt-badge{font:500 12.5px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-mute)}
  .profile-page.vkd-maker .time-ago{width:auto;font:400 12.5px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-faint)}
  .profile-page.vkd-maker .vk-hype-sm{width:48px;gap:0}
  .profile-page.vkd-maker .vk-hype-l{display:none}
  .profile-page.vkd-maker .vk-hype-t{height:4px;background:var(--vk-line)}
  .profile-page.vkd-maker .vk-hype-f{background:var(--vk-acc)}
  .profile-page.vkd-maker .upvote-btn{display:grid;place-items:center;width:36px;height:36px;min-width:36px;min-height:36px;padding:0;border:1px solid var(--vk-line2);border-radius:8px;background:transparent;transform:none}
  .profile-page.vkd-maker .upvote-btn:hover{border-color:var(--vk-line3);background:var(--vk-fill);transform:none}
  .profile-page.vkd-maker .upvote-btn.active{border-color:var(--vk-acc-line);background:var(--vk-acc-soft)}
  .profile-page.vkd-maker .upvote-arrow{border-bottom-color:var(--vk-mute)}
  .profile-page.vkd-maker .upvote-btn.active .upvote-arrow{border-bottom-color:var(--vk-acc-tx)}
  .profile-page.vkd-maker .cmt-empty{padding:16px 0;font:400 14px/20px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-mute)}
  html[data-theme="light"] .profile-page.vkd-maker .upvote-btn{border-radius:999px}

  .profile-page.vkd-private{max-width:640px;margin:0 auto;padding:160px 24px 0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-feature-settings:"cv11","ss01";letter-spacing:normal;-webkit-font-smoothing:antialiased}
  .profile-page.vkd-private .profile-private-msg{padding:48px 32px;text-align:center;border:0;border-radius:16px;background:var(--vk-s1);box-shadow:var(--vk-card-shadow)}
  .profile-page.vkd-private .profile-private-msg h2{margin:0 0 8px;font:600 22px/30px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-ink)}
  .profile-page.vkd-private .profile-private-msg p{font:400 15px/22px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-mute)}

  .login-page{min-height:0;padding:136px 24px 0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-feature-settings:"cv11","ss01";letter-spacing:normal;-webkit-font-smoothing:antialiased}
  .login-page .login-card{max-width:400px;padding:36px 32px 28px;border:0;border-radius:16px;background:var(--vk-s1);box-shadow:var(--vk-card-shadow)}
  .login-page .login-card h1{margin:0 0 8px;font:600 26px/32px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-ink)}
  .login-page .login-card .login-sub{margin:0 0 28px;font:400 15px/22px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-mute)}
  .login-page .oauth-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;margin:0;padding:0 16px;border:1px solid var(--vk-btn2-line);border-radius:var(--vk-btn-r);background:var(--vk-btn2);background-image:none;color:var(--vk-btn2-ink);font:500 14px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;text-transform:none;text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:none;filter:none;transform:none;transition:background-color .15s,border-color .15s;display:flex;width:100%;height:44px;gap:10px;margin:0 0 10px}
  .login-page .oauth-btn:hover{background:var(--vk-btn2-hi);border-color:var(--vk-line3);color:var(--vk-btn2-ink);box-shadow:none;filter:none;transform:none}
  .login-page .oauth-btn:focus-visible{outline:2px solid var(--vk-focus);outline-offset:2px}
  .login-page .oauth-btn svg{width:18px;height:18px}
  .login-page .login-divider{margin:14px 0;font:400 12.5px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-faint)}
  .login-page .login-divider::before,.login-page .login-divider::after{height:1px;background:var(--vk-line)}
  .login-page .login-footer{margin:20px 0 0;font:400 12.5px/18px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-faint)}

  .admin-page.vkd-dash{max-width:960px;margin:0 auto;padding:124px 24px 0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-feature-settings:"cv11","ss01";letter-spacing:normal;-webkit-font-smoothing:antialiased}
  .admin-page.vkd-dash h1{margin:0 0 24px;font:600 32px/40px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-ink)}
  .admin-page.vkd-dash .mk-banner{gap:10px;margin:0 0 24px;padding:12px 16px;border:0;border-radius:12px;background:var(--vk-acc-soft);color:var(--vk-acc-tx);font:500 14px/21px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
  .admin-page.vkd-dash .mk-banner a{color:var(--vk-acc-tx)!important;font-weight:600;text-decoration:underline;text-underline-offset:3px}
  .admin-page.vkd-dash .mk-banner-dot{background:var(--vk-acc);box-shadow:none}
  .admin-page.vkd-dash .admin-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0 0 40px;padding:0;border:0;border-radius:16px;background:var(--vk-s1);box-shadow:var(--vk-card-shadow)}
  .admin-page.vkd-dash .admin-stat-card{min-width:0;padding:18px 22px;border:0;border-left:1px solid var(--vk-line);border-radius:0;background:none;box-shadow:none;text-align:left}
  .admin-page.vkd-dash .admin-stat-card:first-child{border-left:0}
  .admin-page.vkd-dash .mk-stat-upvotes{display:none}
  .admin-page.vkd-dash .admin-stat-number{font:600 26px/32px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-ink)}
  .admin-page.vkd-dash .admin-stat-label{margin-top:2px;font:400 13px/18px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;text-transform:none;color:var(--vk-mute)}
  .admin-page.vkd-dash .admin-section{margin:0 0 24px}
  .admin-page.vkd-dash .admin-section h2{margin:0 0 12px;padding:0;border:0;font:600 18px/26px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-ink)}
  .admin-page.vkd-dash .mk-cards{gap:12px}
  .admin-page.vkd-dash .mk-card{gap:16px;padding:16px 18px;border:0;border-radius:16px;background:var(--vk-s1);box-shadow:var(--vk-card-shadow)}
  .admin-page.vkd-dash .mk-card-icon{width:44px;height:44px;border-radius:12px;background:var(--vk-s2);box-shadow:inset 0 0 0 1px var(--vk-line);color:var(--vk-ink);font:600 16px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
  .admin-page.vkd-dash .mk-card-top{gap:8px;margin-bottom:2px}
  .admin-page.vkd-dash .mk-card-name{font:600 15px/22px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-ink)}
  .admin-page.vkd-dash .mk-card-tag{margin-bottom:6px;font:400 14px/20px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-mute)}
  .admin-page.vkd-dash .mk-card-meta{gap:8px;font:400 12.5px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-faint)}
  .admin-page.vkd-dash .mk-card-cat{color:var(--vk-body)}
  .admin-page.vkd-dash .mk-card-dot{color:var(--vk-line3)}
  .admin-page.vkd-dash .mk-card-meta .vk-hype-sm{width:48px;gap:0}
  .admin-page.vkd-dash .mk-card-meta .vk-hype-l{display:none}
  .admin-page.vkd-dash .mk-card-meta .vk-hype-t{height:4px;background:var(--vk-line)}
  .admin-page.vkd-dash .mk-card-meta .vk-hype-f{background:var(--vk-acc)}
  .admin-page.vkd-dash .mk-queue{font:400 13px/19px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-mute)}
  .admin-page.vkd-dash .admin-badge{display:inline-flex;align-items:center;gap:5px;height:22px;margin:0;padding:0 8px;border:1px solid var(--vk-line);border-radius:6px;background:var(--vk-fill2);color:var(--vk-body);font:500 12px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;text-transform:none;text-decoration:none;white-space:nowrap;height:22px}
  .admin-page.vkd-dash .admin-badge.approved{border-color:transparent;background:var(--vk-acc-soft);color:var(--vk-acc-tx)}
  .admin-page.vkd-dash .admin-badge.pending{color:var(--vk-body)}
  .admin-page.vkd-dash .mk-card-actions{gap:8px}
  .admin-page.vkd-dash .mk-btn,.admin-page.vkd-dash .mk-btn.mk-btn-danger{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;margin:0;padding:0 16px;border:1px solid var(--vk-btn2-line);border-radius:var(--vk-btn-r);background:var(--vk-btn2);background-image:none;color:var(--vk-btn2-ink);font:500 14px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;text-transform:none;text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:none;filter:none;transform:none;transition:background-color .15s,border-color .15s;height:32px;padding:0 12px;font-size:13px}
  .admin-page.vkd-dash .mk-btn:hover,.admin-page.vkd-dash .mk-btn.mk-btn-danger:hover{background:var(--vk-btn2-hi);border-color:var(--vk-line3);color:var(--vk-btn2-ink);box-shadow:none;filter:none;transform:none}
  .admin-page.vkd-dash .mk-btn.mk-btn-danger{color:var(--vk-mute)}
  .admin-page.vkd-dash .mk-btn.mk-btn-ft{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;margin:0;padding:0 18px;border:1px solid transparent;border-radius:var(--vk-btn-r);background:var(--vk-btn);background-image:none;color:var(--vk-btn-ink);font:600 14px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;text-transform:none;text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:none;filter:none;transform:none;transition:background-color .15s;height:32px;padding:0 12px;font-size:13px}
  .admin-page.vkd-dash .mk-btn.mk-btn-ft:hover{background:var(--vk-btn-hi);color:var(--vk-btn-ink);box-shadow:none;filter:none;transform:none}
  .admin-page.vkd-dash .mk-btn:disabled{opacity:.6;cursor:default}
  .admin-page.vkd-dash .mk-btn:focus-visible{outline:2px solid var(--vk-focus);outline-offset:2px}
  .admin-page.vkd-dash .mk-share{margin:-4px 0 0;padding:12px 18px;border:0;border-radius:12px;background:var(--vk-fill2)}
  .admin-page.vkd-dash .mk-share summary{font:500 13.5px/20px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-body)}
  .admin-page.vkd-dash .mk-share-lbl{margin:14px 0 6px;font:500 12.5px/16px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-mute)}
  .admin-page.vkd-dash .mk-share-box{border:1px solid var(--vk-line2);border-radius:10px;background:var(--vk-s1);color:var(--vk-body)}
  .admin-page.vkd-dash .mk-addmore{margin-top:16px!important;font:400 13.5px/20px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;color:var(--vk-mute)}
  .admin-page.vkd-dash .mk-addmore a{color:var(--vk-acc-tx)!important;font-weight:500}
  .admin-page.vkd-dash .mk-empty{padding:48px 24px;border:1px dashed var(--vk-line2);border-radius:16px;background:transparent;color:var(--vk-mute);font:400 15px/22px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
  .admin-page.vkd-dash .mk-empty .form-submit-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;margin:0;padding:0 18px;border:1px solid transparent;border-radius:var(--vk-btn-r);background:var(--vk-btn);background-image:none;color:var(--vk-btn-ink);font:600 14px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;text-transform:none;text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:none;filter:none;transform:none;transition:background-color .15s}
  .admin-page.vkd-dash .mk-empty .form-submit-btn:hover{background:var(--vk-btn-hi);color:var(--vk-btn-ink);box-shadow:none;filter:none;transform:none}
  .admin-page.vkd-dash .vkbl{margin:0;padding:20px 22px;border:0;border-radius:16px;background:var(--vk-acc-soft)}
  .admin-page.vkd-dash .vkbl-eyebrow{margin-bottom:6px;font:600 12.5px/16px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;text-transform:none;color:var(--vk-acc-tx)}
  .admin-page.vkd-dash .vkbl-title{margin:0 0 6px;font:600 16px/24px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-ink)}
  .admin-page.vkd-dash .vkbl-done-title{margin:0 0 4px;font:600 15px/22px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-acc-tx)}
  .admin-page.vkd-dash .vkbl-copy{margin:0 0 14px;font:400 14px/21px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-body)}
  .admin-page.vkd-dash .vkbl-copy b{color:var(--vk-ink);font-weight:600}
  .admin-page.vkd-dash .vkbl-perk{display:inline-flex;align-items:center;gap:5px;height:22px;margin:0;padding:0 8px;border:1px solid var(--vk-line);border-radius:6px;background:var(--vk-fill2);color:var(--vk-body);font:500 12px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;text-transform:none;text-decoration:none;white-space:nowrap;border-color:transparent;background:var(--vk-s1);color:var(--vk-acc-tx)}
  .admin-page.vkd-dash .vkbl-lbl{font:500 12.5px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-mute)}
  .admin-page.vkd-dash .vkbl-seg{gap:2px;padding:3px;border:1px solid var(--vk-line);border-radius:9px;background:var(--vk-s1)}
  .admin-page.vkd-dash .vkbl-sb{height:26px;padding:0 10px;border-radius:6px;font:500 12.5px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-mute)}
  .admin-page.vkd-dash .vkbl-sb.on{background:var(--vk-s3);color:var(--vk-ink)}
  .admin-page.vkd-dash .vkbl-code{border:1px solid var(--vk-line2);border-radius:10px;background:var(--vk-s1);color:var(--vk-body)}
  .admin-page.vkd-dash .vkbl-btn{height:36px;padding:0 14px;border-radius:var(--vk-btn-r);font:600 13.5px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
  .admin-page.vkd-dash .vkbl-btn.ghost{font-weight:500}
  .admin-page.vkd-dash .vkbl-note{font:400 12.5px/18px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-mute)}
  html[data-theme="light"] .admin-page.vkd-dash .mk-share{background:var(--vk-s1);box-shadow:var(--vk-card-shadow)}
  html[data-theme="light"] .admin-page.vkd-dash .mk-btn{border-radius:999px}
  html[data-theme="light"] .admin-page.vkd-dash .vkbl-seg{border-radius:999px}
  html[data-theme="light"] .admin-page.vkd-dash .vkbl-sb{border-radius:999px}
  html[data-theme="light"] .admin-page.vkd-dash .vkbl-sb.on{background:var(--vk-ink);color:var(--vk-page)}

  .settings-page{max-width:640px;margin:0 auto;padding:124px 24px 0;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-feature-settings:"cv11","ss01";letter-spacing:normal;-webkit-font-smoothing:antialiased}
  .settings-page h1{margin:0;font:600 32px/40px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-ink);text-transform:lowercase}
  .settings-page h1::first-letter{text-transform:uppercase}
  .settings-page .settings-subtitle{margin:8px 0 28px;font:400 15px/22px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-mute)}
  .settings-page #settingsForm{padding:28px;border:0;border-radius:16px;background:var(--vk-s1);box-shadow:var(--vk-card-shadow)}
  .settings-page .form-group{margin-bottom:20px}
  .settings-page .form-group label{margin-bottom:8px;font:500 13.5px/18px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;color:var(--vk-ink)}
  .settings-page .form-group input:not([type="checkbox"]),.settings-page .form-group textarea{height:44px;margin:0;padding:0 14px;border:1px solid var(--vk-line2);border-radius:10px;background:transparent;color:var(--vk-ink);font:400 14.5px/1.2 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;outline:none;box-shadow:none;transition:border-color .15s;width:100%}
  .settings-page .form-group textarea{height:auto;min-height:96px;padding:10px 14px;line-height:1.5;resize:vertical}
  .settings-page .form-group input:not([type="checkbox"]):focus,.settings-page .form-group textarea:focus{border-color:var(--vk-line3);box-shadow:none;outline:none}
  .settings-page .form-group input::placeholder,.settings-page .form-group textarea::placeholder{color:var(--vk-faint)}
  .settings-page .toggle-group{gap:10px}
  .settings-page .toggle-group input[type="checkbox"]{width:18px;height:18px;margin:0;accent-color:var(--vk-acc)}
  .settings-page .toggle-group label{margin:0!important;font:400 14.5px/20px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-body)}
  .settings-page .char-count{margin-top:6px;font:400 12px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--vk-faint)}
  .settings-page .form-submit-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;margin:0;padding:0 18px;border:1px solid transparent;border-radius:var(--vk-btn-r);background:var(--vk-btn);background-image:none;color:var(--vk-btn-ink);font:600 14px/1 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:normal;text-transform:none;text-decoration:none;white-space:nowrap;cursor:pointer;box-shadow:none;filter:none;transform:none;transition:background-color .15s;margin-top:4px}
  .settings-page .form-submit-btn:hover{background:var(--vk-btn-hi);color:var(--vk-btn-ink);box-shadow:none;filter:none;transform:none}
  .settings-page .form-message{border-radius:10px;font:500 14px/20px Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
  .settings-page .form-message.success{border:0;background:var(--vk-acc-soft);color:var(--vk-acc-tx)}
  .settings-page a[href^="/user/"]{color:var(--vk-acc-tx)!important;font-size:13.5px!important;font-weight:500}
  html[data-theme="light"] .settings-page .form-group input:not([type="checkbox"]),html[data-theme="light"] .settings-page .form-group textarea{background:var(--vk-s1)}
}