/* ============================================================
   BIDFLIP.LOL � Shared Styles
   ============================================================ */

:root {
  --mint: #3DC281;
  --mint-2: #2DA56A;
  --magenta: #EF2CA4;
  --bg: #080808;
  --bg-2: #0a0a0c;
  --card: rgba(15, 15, 18, 0.75);
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --text: rgba(255, 255, 255, 0.85);
  --text-strong: #ffffff;
  --text-mid: rgba(255, 255, 255, 0.6);
  --muted: rgba(255, 255, 255, 0.4);
  --pill-bg: rgba(255, 255, 255, 0.04);
  --pill-text: rgba(255, 255, 255, 0.75);
  --topbar-bg: #0d0d0f;
  --verified-bg: #00FF9D;
  --tab-active-text: #3DC281;
  --text-soft: rgba(255, 255, 255, 0.5);
  --surface-1: rgba(255, 255, 255, 0.02);
  --surface-2: rgba(0, 0, 0, 0.4);
  --overlay-scrim: rgba(8, 8, 8, 0.85);
  --grad-1: radial-gradient(900px 500px at 105% -5%, rgba(255, 0, 85, 0.06), transparent 60%);
  --grad-2: radial-gradient(900px 500px at -5% 5%, rgba(61, 194, 129, 0.08), transparent 60%);
}

[data-theme="light"] {
  --bg: #f7f7f5;
  --bg-2: #ffffff;
  --card: rgba(255, 255, 255, 0.85);
  --line: rgba(0, 0, 0, 0.08);
  --line-2: rgba(0, 0, 0, 0.16);
  --text: rgba(20, 20, 20, 0.85);
  --text-strong: #000000;
  --text-mid: rgba(0, 0, 0, 0.6);
  --muted: rgba(0, 0, 0, 0.4);
  --pill-bg: rgba(0, 0, 0, 0.04);
  --pill-text: rgba(0, 0, 0, 0.75);
  /* topbar-bg intentionally not overridden — header/footer stay dark in both themes */
  --text-soft: rgba(0, 0, 0, 0.5);
  --surface-1: rgba(0, 0, 0, 0.02);
  --surface-2: rgba(0, 0, 0, 0.06);
  --overlay-scrim: rgba(0, 0, 0, 0.15);
  --grad-1: radial-gradient(900px 500px at 105% -5%, rgba(255, 0, 85, 0.05), transparent 60%);
  --grad-2: radial-gradient(900px 500px at -5% 5%, rgba(61, 194, 129, 0.06), transparent 60%);
}

/* Header and footer stay dark-styled in both themes (topbar-bg is not
   overridden in [data-theme="light"]), so pin their text/line colors to
   the dark-mode values too, regardless of the page theme. */
header, .site-footer {
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --text: rgba(255, 255, 255, 0.85);
  --text-strong: #ffffff;
  --text-mid: rgba(255, 255, 255, 0.6);
  --muted: rgba(255, 255, 255, 0.4);
  --text-soft: rgba(255, 255, 255, 0.5);
  --pill-bg: rgba(255, 255, 255, 0.04);
  --pill-text: rgba(255, 255, 255, 0.75);
}

* { box-sizing: border-box; }
/* The [hidden] attribute must always win over any display-setting class
   (Tailwind's .flex/.grid/etc., or our own component classes like
   .qc-preview) — without this, elements that are both `hidden` and
   `class="flex ..."` (or any custom class with its own `display:`)
   stay visibly on-screen despite the hidden attribute. */
[hidden] { display: none !important; }
html, body { background: var(--bg); color: var(--text); }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background-image: var(--grad-1), var(--grad-2);
  background-attachment: fixed;
}

.font-display { font-family: 'Space Grotesk', system-ui, sans-serif; letter-spacing: -0.01em; }
.font-mono { font-family: 'JetBrains Mono', monospace; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Theme-aware text/surface utilities (replace hardcoded Tailwind text-white/bg-black/bg-white) */
.text-strong { color: var(--text-strong); }
.text-mid { color: var(--text-mid); }
.text-soft { color: var(--text-soft); }
.text-muted { color: var(--muted); }
.hover-text-strong:hover { color: var(--text-strong); }
.surface-1 { background: var(--surface-1); }
.surface-2 { background: var(--surface-2); }
.hover-surface-1:hover { background: var(--surface-1); }

.glass {
  background: var(--card);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--line);
  border-radius: 16px;
}

::selection { background: var(--mint); color: #001b10; }

@keyframes reveal-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.reveal { animation: reveal-up 0.5s ease both; }

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(61, 194, 129, 0.5); }
  60% { box-shadow: 0 0 0 8px rgba(61, 194, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(61, 194, 129, 0); }
}
.pulse-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 9999px;
  background: #3DC281;
  box-shadow: 0 0 12px #3DC281;
  animation: pulse-dot 2s infinite;
}

@keyframes spin { to { --angle: 360deg; } }

.cta-bid {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #3DC281 0%, #2DA56A 100%);
  color: #001b10; font-weight: 800; letter-spacing: 0.04em;
  box-shadow: 0 10px 30px -6px rgba(61, 194, 129, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cta-bid:hover { transform: translateY(-1px); box-shadow: 0 14px 36px -6px rgba(61, 194, 129, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.cta-bid::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.45) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
.cta-bid:hover::after { transform: translateX(100%); }

/* Stepper for quick-claim form */
.qc-amount-group {
  display: inline-flex; align-items: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.qc-step {
  width: 32px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--text-mid);
  cursor: pointer; transition: color 0.15s ease, background 0.15s ease;
}
.qc-step:hover { color: var(--mint); background: rgba(61, 194, 129, 0.08); }
.qc-amount {
  display: inline-block; min-width: 46px; text-align: center;
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 0.95rem; color: var(--mint);
  padding: 0 4px; outline: none;
}
.qc-amount:focus { background: rgba(61, 194, 129, 0.06); }

/* Header stat pills */
.stat-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.7rem; border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  font-size: 0.72rem; color: var(--text-mid);
}
.stat-pill .lbl { color: var(--muted); }
.stat-pill .stat-num { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--text-strong); }

/* Hero toggle (Leaderboard / Daily) */
.hero-toggle {
  display: flex; align-items: center;
  width: fit-content;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 9999px;
  padding: 4px;
  margin: 0 auto 1rem;
}
.hero-toggle-btn {
  display: inline-block;
  padding: 0.4rem 1rem; border-radius: 9999px;
  font-size: 0.78rem; font-weight: 600;
  color: var(--text-mid);
  text-decoration: none;
  transition: all 0.15s ease;
}
.hero-toggle-btn[aria-selected="true"] {
  background: linear-gradient(135deg, #3DC281, #2DA56A);
  color: #001b10;
  box-shadow: 0 0 18px -4px rgba(61, 194, 129, 0.6);
}

/* Quick claim form (outer box intentionally removed — bare row) */
.qc-row {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch;
}
.qc-amount-submit {
  display: flex; align-items: stretch; gap: 6px;
  flex: 0 0 auto;
}
.qc-input, .qc-select {
  flex: 1 1 200px; min-width: 0;
  padding: 0.6rem 0.9rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text-strong);
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.qc-input:focus, .qc-select:focus {
  border-color: #3DC281;
  box-shadow: 0 0 0 3px rgba(61, 194, 129, 0.12);
}
.qc-input::placeholder { color: var(--muted); }
.qc-select { cursor: pointer; }
.qc-select option, .field option {
  background: var(--bg-2);
  color: var(--text-strong);
}
.qc-submit {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.6rem 1rem;
  background: linear-gradient(135deg, #3DC281, #2DA56A);
  color: #001b10; font-weight: 700; font-size: 0.85rem;
  border: none; border-radius: 10px; cursor: pointer;
  box-shadow: 0 6px 20px -6px rgba(61, 194, 129, 0.5);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.qc-submit:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -8px rgba(61, 194, 129, 0.65); }

.qc-preview {
  display: flex; align-items: center; gap: 0.75rem;
  margin-top: 10px; padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.qc-preview img { width: 32px; height: 32px; border-radius: 8px; object-fit: contain; background: #000; }
.qc-preview-text { flex: 1; min-width: 0; }
.qc-preview-title { font-weight: 600; font-size: 0.85rem; color: var(--text-strong); }
.qc-preview-desc { font-size: 0.72rem; color: var(--muted); }
.qc-preview-status {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.2rem 0.5rem; border-radius: 9999px;
  background: rgba(61, 194, 129, 0.1); color: var(--mint);
  border: 1px solid rgba(61, 194, 129, 0.25);
  font-weight: 700;
}

/* Category bar */
.cat-pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.7rem; border-radius: 9999px;
  color: var(--pill-text); font-size: 0.76rem; font-weight: 600;
  background: var(--pill-bg);
  border: 1px solid var(--line);
  transition: all 0.2s ease; cursor: pointer; user-select: none;
  white-space: nowrap;
}
.cat-pill svg { flex-shrink: 0; width: 13px; height: 13px; }
.cat-pill:hover { color: var(--text-strong); border-color: rgba(255, 255, 255, 0.18); }
.cat-pill.active {
  color: #001b10; background: #3DC281; border-color: transparent;
  box-shadow: 0 0 18px -4px rgba(61, 194, 129, 0.6);
}
.cat-pill .count {
  font-family: 'JetBrains Mono', monospace; font-size: 0.65rem;
  padding: 0.05rem 0.4rem; border-radius: 9999px;
  background: rgba(0, 0, 0, 0.25); color: inherit;
}
.cat-pill.active .count { background: rgba(0, 0, 0, 0.18); }
.cat-pill-hidden { display: none !important; }
.cat-pill-overflow-count {
  display: inline-flex; align-items: center;
  padding: 0.3rem 0.6rem; border-radius: 9999px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  color: var(--muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
}
/* Category bar: #catAll ("All") and .cat-pill-explore ("Explore all") are
   fixed flex siblings of #catBar and never scroll; only the real
   categories inside #catBar scroll horizontally. Clicking a pill scrolls
   it to the left edge of the strip (see scrollActivePillIntoView in
   leaderboard.js), which is what reveals more pills when the last
   visible one is clicked. Scrollbar hidden since the pills themselves
   are the scroll affordance. */
#catBarWrap { min-width: 0; }
#catAll { flex-shrink: 0; }
#catBar {
  min-width: 0;
  overflow-x: auto !important;
  -ms-overflow-style: none;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
#catBar::-webkit-scrollbar { display: none; }
.cat-pill-explore {
  color: #EF2CA4;
  border-color: rgba(255, 0, 85, 0.35);
  background: rgba(255, 0, 85, 0.06);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}
.cat-pill-explore:hover {
  color: #fff; background: #EF2CA4; border-color: transparent; text-decoration: none;
}

/* Top-3 grid */
.top3-grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 6px;
  margin-bottom: 18px;
}
@media (min-width: 720px) { .top3-grid { grid-template-columns: repeat(3, 1fr); } }
.top3-card {
  position: relative;
  display: flex; flex-direction: column;
  aspect-ratio: 1/1;
  width: 100%; max-width: 340px; max-height: 360px; margin: 0 auto;
  padding: 16px;
  border-radius: 16px;
  background: var(--card);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  overflow: hidden;
}
.top3-card:hover { transform: translateY(-2px); border-color: rgba(61, 194, 129, 0.25); }
.top3-card[data-rank="1"] { box-shadow: 0 12px 36px -10px rgba(250, 204, 21, 0.55), 0 0 48px -6px rgba(250, 204, 21, 0.35); }
.top3-card[data-rank="1"]:hover { box-shadow: 0 16px 48px -10px rgba(250, 204, 21, 0.7), 0 0 64px -6px rgba(250, 204, 21, 0.45); }
.top3-card[data-rank="2"]:hover { box-shadow: 0 12px 36px -10px rgba(192, 192, 192, 0.5), 0 0 48px -6px rgba(192, 192, 192, 0.3); }
.top3-card[data-rank="3"]:hover { box-shadow: 0 12px 36px -10px rgba(205, 127, 50, 0.5), 0 0 48px -6px rgba(205, 127, 50, 0.3); }
.top3-badge {
  position: absolute; top: 8px; left: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 28px; padding: 0 10px;
  border-radius: 9999px;
  font-family: 'JetBrains Mono', monospace; font-weight: 800;
  font-size: 0.85rem;
  z-index: 1;
  pointer-events: none;
}
.top3-card[data-rank="1"] .top3-badge { background: linear-gradient(135deg, #facc15, #f59e0b); color: #1a1100; }
.top3-card[data-rank="2"] .top3-badge { background: linear-gradient(135deg, #C0C0C0, #a0a0a0); color: #1a1a1a; }
.top3-card[data-rank="3"] .top3-badge { background: linear-gradient(135deg, #CD7F32, #a06020); color: #1a1100; }
.top3-body { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.top3-logo {
  width: 84px; height: 84px; border-radius: 14px; object-fit: contain;
  background: #000; border: 1px solid var(--line);
}
.top3-text { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.top3-name {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.15rem; line-height: 1.2; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; word-break: break-word;
}
.top3-url { font-size: 0.7rem; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top3-desc { font-size: 0.7rem; color: var(--text-mid); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.top3-cat {
  position: absolute; left: 12px; bottom: 12px; z-index: 1;
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--mint); font-weight: 700;
  pointer-events: none;
}
.top3-bid { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 1.05rem; color: var(--mint); }

/* Full-card click target — makes the whole card open the project URL
   and count as a click, while the claim button (higher z-index) stays
   independently clickable on top of it. */
.card-click-target {
  position: absolute; inset: 0; z-index: 0;
}

/* Claim overlay (hover strip on top-3 / bid-row) */
.claim-overlay {
  position: absolute; inset: 0 0 auto 0; z-index: 2;
  display: flex; justify-content: center;
  background: linear-gradient(0deg, transparent, var(--overlay-scrim));
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.top3-card:hover .claim-overlay,
.bid-row:hover .claim-overlay { opacity: 1; pointer-events: auto; }
.claim-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem;
  width: 60%;
  padding: 0.5rem 0.6rem;
  background: var(--mint);
  color: #001b10;
  font-weight: 800; font-size: 0.6rem;
  border: none; border-radius: 0 0 10px 10px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  box-shadow: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
.claim-btn svg { flex-shrink: 0; }
.bid-row .claim-btn { width: auto; min-width: 160px; }
.bid-row:hover .claim-btn,
.top3-card:hover .claim-btn {
  background: var(--mint-2);
  box-shadow: 0 0 20px -4px rgba(61, 194, 129, 0.6);
}
.claim-amount { font-family: 'JetBrains Mono', monospace; }

/* Bid row (rank 4+) */
.bid-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  overflow: hidden;
}
.bid-row:hover { transform: translateY(-1px); border-color: rgba(61, 194, 129, 0.25); box-shadow: 0 14px 40px -12px rgba(61, 194, 129, 0.25); }
.bid-row .rank-num {
  font-family: 'JetBrains Mono', monospace; font-weight: 800;
  font-size: 0.95rem; color: var(--text-strong); text-align: center;
  width: 28px; flex-shrink: 0; padding-top: 2px;
}
.bid-row .avatar {
  width: 48px; height: 48px; border-radius: 9999px; object-fit: contain;
  background: #000; border: 1px solid var(--line);
  flex-shrink: 0;
}
.bid-row .meta { min-width: 0; flex: 1; padding-right: 70px; }
.bid-row .meta .name { font-weight: 700; color: var(--text-strong); font-size: 0.98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bid-row .meta .row-desc {
  font-size: 0.8rem; color: var(--text-mid); margin: 2px 0 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bid-row .row-metaline {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 0.72rem; color: var(--muted);
}
.bid-row .row-metaline .url { color: var(--muted); }
.bid-row .row-metaline-sep { color: var(--line-2); }
.row-detail-link { color: var(--muted); text-decoration: underline; }
.row-detail-link:hover { color: var(--text-strong); }
.bid-row .cat-tag {
  font-size: 10px; letter-spacing: 0.02em;
  color: var(--text-mid); font-weight: 700;
}
.bid-row .bid-amt {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--mint); font-size: 0.95rem;
  position: absolute; top: 14px; right: 16px;
}
.bid-row .arrow-btn, .top3-card .arrow-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: transparent;
  border: 1px solid var(--line); color: var(--text-mid);
  transition: all 0.15s ease;
  text-decoration: none;
}
.bid-row .arrow-btn:hover, .top3-card .arrow-btn:hover {
  border-color: var(--mint); color: var(--mint);
  background: rgba(61, 194, 129, 0.06);
}
.bid-row .row-chip, .top3-card .top3-chip {
  font-family: 'JetBrains Mono', monospace; font-size: 0.7rem;
  padding: 0.2rem 0.5rem; border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line);
  color: var(--text-strong);
  display: inline-flex; align-items: center; gap: 0.25rem;
}
.top3-card .top3-chip {
  position: absolute; right: 12px; bottom: 12px; z-index: 1;
  pointer-events: none;
}

/* Empty slot (paid, unclaimed) */
.slot-empty {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.02);
}
.slot-empty .rank-num { font-family: 'JetBrains Mono', monospace; color: var(--muted); text-align: center; }
.slot-empty a { color: var(--mint); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.15em; text-decoration: none; }
.slot-empty a:hover { text-decoration: underline; }

/* Verified badge */
.verified {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 1em; height: 1em;
  color: #1d9bf0;
  vertical-align: -0.1em;
}
.verified svg { width: 100%; height: 100%; }

/* Activity ticker (marquee) */
.marquee {
  overflow: hidden; position: relative;
}
.marquee-track {
  display: flex; gap: 36px; white-space: nowrap;
  animation: marquee 8s linear infinite;
  will-change: transform;
}
/* Empty-state message isn't duplicated content, so it can't loop —
   center it statically instead of sliding it half off-screen. */
.marquee-track.marquee-track-static {
  animation: none;
  justify-content: center;
  width: 100%;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee .item {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-mid); font-size: 0.75rem;
}
.marquee .item .name { color: var(--text-strong); font-weight: 700; }
.marquee .item .bid { color: var(--mint); font-family: 'JetBrains Mono', monospace; font-weight: 700; }
.marquee .item .ts { color: var(--muted); font-size: 0.7rem; }

/* Modal */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  background: rgba(8, 8, 8, 0.7);
  backdrop-filter: blur(8px);
  padding: 16px;
}
.modal-backdrop.show { display: flex; }
.modal-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  width: 100%; max-width: 540px;
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.8), 0 0 32px -8px rgba(61, 194, 129, 0.35);
  max-height: 90vh; overflow-y: auto;
}
.field-label {
  display: block; margin-bottom: 4px;
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-mid); font-weight: 600;
}
.field {
  width: 100%;
  padding: 0.6rem 0.9rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text-strong);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field:focus { border-color: #3DC281; box-shadow: 0 0 0 3px rgba(61, 194, 129, 0.12); }
.url-meta {
  display: flex; align-items: center; gap: 0.75rem;
  margin-top: 8px; padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.url-meta img { width: 32px; height: 32px; border-radius: 8px; object-fit: contain; background: #000; }
.url-meta-title { font-weight: 600; font-size: 0.85rem; color: var(--text-strong); }
.url-meta-desc { font-size: 0.72rem; color: var(--muted); }
.url-meta-status {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  padding: 0.2rem 0.5rem; border-radius: 9999px;
  background: rgba(61, 194, 129, 0.1); color: var(--mint);
  border: 1px solid rgba(61, 194, 129, 0.25);
  font-weight: 700;
}

#paginator:empty { margin-top: 0; }

/* Pagination */
.pg-row { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; }
.pg-btn {
  min-width: 34px; height: 34px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none;
  color: var(--mint);
  border-radius: 9999px; font-size: 0.85rem; font-weight: 700;
  cursor: pointer; text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  transition: background 0.15s ease, color 0.15s ease;
}
.pg-btn:hover { background: rgba(61, 194, 129, 0.1); color: var(--mint); text-decoration: none; }
.pg-btn.active {
  background: var(--mint); color: #001b10;
  box-shadow: 0 4px 14px -4px rgba(61, 194, 129, 0.55);
}
.pg-btn.active:hover { background: var(--mint); color: #001b10; }
.pg-btn:disabled { opacity: 0.35; cursor: not-allowed; background: transparent; }
.pg-jump input, .pg-per select {
  background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line);
  color: var(--text-strong); border-radius: 8px; padding: 4px 8px;
  font-size: 0.8rem; outline: none; font-family: 'JetBrains Mono', monospace;
}
.pg-jump input:focus, .pg-per select:focus {
  border-color: #3DC281; box-shadow: 0 0 0 3px rgba(61, 194, 129, 0.12);
}

/* Theme toggle */
.theme-toggle {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line);
  color: var(--text-mid);
  border-radius: 10px; cursor: pointer;
  transition: all 0.15s ease;
}
.theme-toggle:hover { border-color: var(--mint); color: var(--mint); background: rgba(61, 194, 129, 0.06); }

/* Footer */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--topbar-bg);
  backdrop-filter: blur(12px) saturate(140%);
  position: relative;
  margin-top: 60px;
}
.marquee + .site-footer { margin-top: 0; }
.site-footer-link {
  color: var(--text-mid);
  text-decoration: none;
  transition: color 0.15s ease;
}
.site-footer-link:hover { color: var(--text-strong); text-decoration: none; }

/* Toast */
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.6);
  z-index: 200;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.ok { border-color: rgba(61, 194, 129, 0.5); color: var(--mint); }
.toast.err { border-color: rgba(255, 0, 85, 0.5); color: var(--magenta); }

/* Background canvas */
canvas#bg {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -10; pointer-events: none;
}
.cursor-spotlight {
  position: fixed; width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(61, 194, 129, 0.06), transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: -5;
  transition: opacity 0.3s ease;
}

/* Prose (legal/about/rules pages) */
.prose h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.4rem; font-weight: 700; margin-top: 2rem; margin-bottom: 0.6rem;
  color: var(--text-strong);
}
.prose h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.1rem; font-weight: 700; margin-top: 1.4rem; margin-bottom: 0.4rem;
  color: var(--text-strong);
}
.prose p { margin: 0 0 0.8rem; line-height: 1.7; color: var(--text); }
.prose ul { padding-left: 0; list-style: none; margin: 0 0 1rem; }
.prose li {
  position: relative; padding-left: 1.4rem; margin-bottom: 0.5rem;
  line-height: 1.6; color: var(--text);
}
.prose li::before {
  content: "→";
  position: absolute; left: 0; top: 0;
  color: var(--mint);
}
.prose strong { color: var(--text-strong); font-weight: 700; }
.prose a { color: var(--mint); }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 1.5rem 0; }

/* FAQ */
.faq-item {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.faq-item:hover { border-color: var(--line-2); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; cursor: pointer;
  font-weight: 600; color: var(--text-strong); font-size: 0.95rem;
  user-select: none;
}
.faq-q .ic { transition: transform 0.2s ease, color 0.2s ease; color: var(--text-mid); }
.faq-item.open .faq-q .ic { transform: rotate(45deg); color: var(--mint); }
.faq-a {
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 18px;
  color: var(--text); line-height: 1.6; font-size: 0.9rem;
}
.faq-item.open .faq-a { max-height: 400px; padding: 0 18px 16px; }

/* Admin */
.admin-tab {
  padding: 0.5rem 1rem; border-radius: 8px;
  font-size: 0.85rem; font-weight: 600;
  color: var(--text-mid); background: transparent;
  border: 1px solid transparent; cursor: pointer;
  white-space: nowrap;
}
.admin-tab:hover { color: var(--text-strong); background: rgba(255, 255, 255, 0.04); }
.admin-tab.active { color: #001b10; background: #3DC281; }

.kpi-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  position: relative;
  overflow: hidden;
}
.kpi-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(closest-side, rgba(61, 194, 129, 0.08), transparent 70%);
  pointer-events: none;
}
.kpi-card .kpi-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--muted); }
.kpi-card .kpi-value { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 1.6rem; color: var(--text-strong); margin-top: 4px; }
.kpi-card .kpi-delta { font-size: 12px; margin-top: 6px; color: var(--mint); }

.btn-edit, .btn-delete {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 10px; border-radius: 8px; font-size: 0.75rem; font-weight: 600;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04);
  color: var(--text-mid); cursor: pointer;
  transition: all 0.15s ease;
}
.btn-edit:hover { border-color: var(--mint); color: var(--mint); }
.btn-delete:hover { border-color: var(--magenta); color: var(--magenta); background: rgba(255, 0, 85, 0.06); }
.admin-logo-thumb {
  width: 32px; height: 32px; border-radius: 8px; object-fit: contain;
  background: #000; border: 1px solid var(--line); flex-shrink: 0;
}

.login-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 32px;
  max-width: 380px;
  margin: 100px auto;
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.6);
}

/* Page-nav: hide when empty */
.page-nav:empty { display: none; }

/* Responsive */
@media (max-width: 720px) {
  .bid-row { gap: 10px; padding: 12px; }
  .bid-row .rank-num { width: 22px; font-size: 0.85rem; }
  .bid-row .avatar { width: 40px; height: 40px; }
  .bid-row .meta { padding-right: 56px; }
  .bid-row .row-metaline .url { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ------------------------------------------------------------
   Mobile (phones, <=640px) — layout fixes only, no visual
   changes above this breakpoint.
   ------------------------------------------------------------ */
@media (max-width: 639px) {
  /* Header: logo + CTA can collide when the CTA button's JS-set text
     ("CLAIM RANK #1 FOR $1,234") is long. Keep the button's label on
     one line and let the flex-wrap on the header row do the wrapping
     between the logo and the button instead of wrapping inside it. */
  header .cta-bid {
    white-space: nowrap;
    font-size: 0.78rem;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }
  header a.flex.items-center img.h-12 {
    height: 2.25rem; /* smaller wordmark so it doesn't crowd the CTA */
  }

  /* Quick-claim row: inputs already wrap via .qc-row flex-wrap, but
     force the URL input and category select to each take a full row
     on very narrow screens instead of trying to share one at ~150px
     each, and make the amount/submit group stretch full width too so
     nothing is squeezed below a usable tap size. */
  .qc-input, .qc-select {
    flex-basis: 100%;
  }
  .qc-amount-submit {
    flex: 1 1 100%;
    justify-content: space-between;
  }
  .qc-amount-submit .qc-submit {
    flex: 1;
    justify-content: center;
  }

  .cat-pill-explore {
    font-size: 10px;
    padding: 0.4rem 0.6rem;
  }

  /* Modal: reduce outer padding so the card gets more usable width,
     and reduce internal padding so content isn't cramped. */
  .modal-backdrop {
    padding: 10px;
  }
  .modal-card.p-6 {
    padding: 1.1rem;
  }

  /* Stepper / tap targets: bump the bid stepper buttons to a more
     comfortable tap size. */
  .qc-step {
    width: 38px;
    height: 40px;
  }

  /* Pagination: shrink button paddings slightly so more page numbers
     fit per row before wrapping, and keep jump/per-page controls from
     forcing horizontal scroll. */
  .pg-jump, .pg-per {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
    margin-top: 4px;
  }

  /* Admin login card: don't waste vertical space on small phones. */
  .login-card {
    margin: 40px auto;
    padding: 24px;
    max-width: calc(100% - 24px);
  }

  /* KPI cards: keep numbers from overflowing their card on the
     narrowest phones. */
  .kpi-card .kpi-value {
    font-size: 1.35rem;
  }
}

@media (max-width: 400px) {
  /* Extra-narrow phones (iPhone SE etc.): trim the CTA further and
     let the bid amount in the claim overlay wrap less aggressively. */
  header .cta-bid {
    font-size: 0.72rem;
    padding-left: 0.7rem;
    padding-right: 0.7rem;
  }
  .claim-btn {
    font-size: 0.56rem;
  }
}