/* ============================================================
   Spark — page-specific styles.
   Inherits Bonfire's real CSS variables: --text, --text-2, --text-3,
   --bg-2, --bg-3, --border, --fire, --font-sans, --font-mono,
   --font-display. Every variable below has a fallback so the page still
   renders sanely if opened standalone.

   IMPORTANT: an earlier version of this file referenced --text-1,
   --accent, and --font-serif — none of which exist in bonfire.css (the
   real names are --text, --fire, and --font-display respectively). Since
   the var() fallback only kicks in when a property is truly undefined,
   every one of those mismatched references silently fell through to its
   guessed fallback color in BOTH themes, never picking up bonfire.css's
   real values at all. That fallback (a near-white) happened to closely
   match bonfire's actual dark-mode text color by coincidence, so dark
   mode looked correct — but produced near-white text on a light
   background in light mode, which was the entire contrast bug. Fixed by
   matching the real variable names below.
   ============================================================ */

:root {
  --sp-accent: var(--fire, #FF5F1F);
  --sp-accent-dim: color-mix(in srgb, var(--sp-accent) 35%, transparent);
  --sp-bg-card: var(--bg-2, #15120f);
  --sp-bg-card-2: var(--bg-3, #1c1815);
  --sp-border: var(--border, rgba(255, 255, 255, 0.08));
  --sp-text-1: var(--text, #f2ece4);
  --sp-text-2: var(--text-2, #b8aea3);
  --sp-text-3: var(--text-3, #7a7068);
  --sp-mono: var(--font-mono, 'Geist Mono', monospace);
  --sp-sans: var(--font-sans, 'Geist', sans-serif);
  --sp-serif: var(--font-display, 'Instrument Serif', serif);
  --sp-radius: 14px;
  --sp-good: #5fc97a;
  --sp-warn: #e0a93a;
}

/* NOTE: scrollbar-gutter/overflow-y handling lives in bonfire.css
   (html { overflow-y: scroll; scrollbar-gutter: stable; }) and is already
   applied site-wide — no need to duplicate it here. An earlier version of
   this file added a redundant copy based on an unconfirmed guess about
   what was missing; removed once the real bonfire.css was available to
   check against. */

.sp-wrap {
  max-width: 920px;
  margin: 0 auto;
  padding: 2rem 1.25rem 6rem;
}

/* Header */
.sp-page-header { margin-bottom: 1.75rem; }
.sp-breadcrumb {
  font-family: var(--sp-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--sp-text-3);
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.sp-breadcrumb a { color: var(--sp-text-3); text-decoration: none; }
.sp-breadcrumb a:hover { color: var(--sp-accent); }
.sp-breadcrumb-sep { margin: 0 0.4em; opacity: 0.5; }

.sp-title {
  font-family: var(--sp-serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  color: var(--sp-text-1);
  margin: 0 0 0.6rem;
  letter-spacing: -0.01em;
}
.sp-subtitle {
  font-family: var(--sp-sans);
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--sp-text-2);
  max-width: 62ch;
  margin: 0;
}
.sp-subtitle em { color: var(--sp-text-1); font-style: normal; font-weight: 500; }

/* Wallet bar */
.sp-wallet-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1rem;
  background: var(--sp-bg-card);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.sp-wallet-left { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.sp-net-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--sp-mono);
  font-size: 0.78rem;
  color: var(--sp-text-2);
}
.sp-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.sp-dot-idle { background: var(--sp-text-3); }
.sp-dot-live { background: var(--sp-good); box-shadow: 0 0 8px var(--sp-good); }
.sp-wallet-details { display: flex; align-items: center; gap: 0.5rem; font-family: var(--sp-mono); font-size: 0.78rem; color: var(--sp-text-2); min-height: 1.3em; }
.sp-wd-sep { opacity: 0.4; }

/* Buttons */
.sp-btn {
  font-family: var(--sp-sans);
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.6rem 1.1rem;
  border-radius: 10px;
  border: 1px solid var(--sp-border);
  background: transparent;
  color: var(--sp-text-1);
  cursor: pointer;
  transition: all 0.15s ease;
}
.sp-btn:hover:not(:disabled) { border-color: var(--sp-accent); color: var(--sp-accent); }
.sp-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sp-btn-primary {
  background: var(--sp-accent);
  border-color: var(--sp-accent);
  color: #1a0f08;
  font-weight: 600;
}
.sp-btn-primary:hover:not(:disabled) { color: #1a0f08; filter: brightness(1.1); }
.sp-btn-secondary { background: var(--sp-bg-card-2); }
.sp-btn-xs { font-size: 0.72rem; padding: 0.4rem 0.7rem; }

/* Status card / ember meter (signature element) */
.sp-status-card {
  background: var(--sp-bg-card);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  padding: 1.4rem 1.5rem;
  margin-bottom: 1.5rem;
}
.sp-status-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.sp-status-label { font-family: var(--sp-mono); font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sp-text-3); margin-bottom: 0.3rem; }
.sp-status-prize { font-family: var(--sp-serif); font-size: 1.7rem; color: var(--sp-text-1); }
.sp-status-state {
  font-family: var(--sp-mono);
  font-size: 0.74rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--sp-bg-card-2);
  color: var(--sp-text-2);
  white-space: nowrap;
}
.sp-status-state.is-active { color: var(--sp-warn); border: 1px solid color-mix(in srgb, var(--sp-warn) 40%, transparent); }
.sp-status-state.is-ready { color: var(--sp-good); border: 1px solid color-mix(in srgb, var(--sp-good) 40%, transparent); }

.sp-ember-meter {
  position: relative;
  height: 14px;
  border-radius: 999px;
  background: var(--sp-bg-card-2);
  overflow: hidden;
  border: 1px solid var(--sp-border);
}
.sp-ember-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #6b2c0f, var(--sp-accent));
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.sp-ember-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  opacity: 0;
}
.sp-ember-meter.is-quorum .sp-ember-fill::after {
  opacity: 1;
  animation: sp-ember-pulse 1.8s ease-in-out 3; /* plays 3 times (~5.4s) on reaching quorum, then settles — was `infinite`, ran forever even while idle */
}
@keyframes sp-ember-pulse {
  0%, 100% { transform: translateX(-100%); opacity: 0; }
  50% { opacity: 0.9; }
  100% { transform: translateX(100%); opacity: 0; }
}
.sp-ember-flame {
  position: absolute;
  top: -7px;
  width: 26px;
  height: 26px;
  color: var(--sp-accent);
  transform: translateX(-13px);
  opacity: 0;
  transition: left 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}
.sp-ember-meter.is-quorum .sp-ember-flame {
  opacity: 1;
  animation: sp-flicker 2.4s ease-in-out 3; /* same bounded-play fix as above */
}
@keyframes sp-flicker {
  0%, 100% { transform: translateX(-13px) scale(1) rotate(-2deg); }
  25% { transform: translateX(-13px) scale(1.05) rotate(2deg); }
  50% { transform: translateX(-13px) scale(0.97) rotate(-1deg); }
  75% { transform: translateX(-13px) scale(1.03) rotate(1deg); }
}
.sp-ember-caption { font-family: var(--sp-mono); font-size: 0.78rem; color: var(--sp-text-2); margin-top: 0.6rem; }
.sp-entrant-stats { font-family: var(--sp-mono); font-size: 0.74rem; color: var(--sp-text-3); margin-top: 0.35rem; }

.sp-status-actions { display: flex; align-items: center; gap: 0.9rem; margin-top: 1.1rem; flex-wrap: wrap; }
.sp-status-note { font-family: var(--sp-mono); font-size: 0.76rem; color: var(--sp-text-3); }

/* Tabs */
.sp-tab-nav { display: flex; gap: 0.4rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--sp-border); }
.sp-tab {
  font-family: var(--sp-sans);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--sp-text-3);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  transition: color 0.15s ease;
}
.sp-tab:hover { color: var(--sp-text-1); }
.sp-tab.active { color: var(--sp-accent); border-bottom-color: var(--sp-accent); }

/* Section scaffolding */
.sp-section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.9rem; }
.sp-section-title { font-family: var(--sp-sans); font-weight: 600; font-size: 0.95rem; color: var(--sp-text-1); }
.sp-section-count { font-family: var(--sp-mono); font-size: 0.78rem; color: var(--sp-text-3); }
.sp-wallet-cap-note { font-family: var(--sp-mono); font-size: 0.76rem; color: var(--sp-text-3); margin-bottom: 0.8rem; }
.sp-wallet-cap-note.is-full { color: var(--sp-warn); }
.sp-empty {
  font-family: var(--sp-sans);
  font-size: 0.88rem;
  color: var(--sp-text-3);
  text-align: center;
  padding: 2.5rem 1rem;
  background: var(--sp-bg-card);
  border: 1px dashed var(--sp-border);
  border-radius: var(--sp-radius);
}

/* Token grid */
.sp-token-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 0.5rem; }
.sp-token-card {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  background: var(--sp-bg-card);
  border: 1px solid var(--sp-border);
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s ease;
}
.sp-token-thumb {
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  object-fit: cover;
  display: block;
  background: var(--sp-bg-card-2);
}
.sp-token-info {
  flex: 0 0 auto;
  padding: 0.25rem 0.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  min-width: 0;
}
.sp-token-card:hover { border-color: var(--sp-accent); }
.sp-token-card.is-selected { border-color: var(--sp-accent); box-shadow: 0 0 0 2px var(--sp-accent-dim) inset; }
/* Cap-full cards — same cursor as won since neither is actionable */
.sp-token-card.is-disabled { opacity: 0.65; cursor: not-allowed; }
/* Won tokens — significantly faded, completely ineligible */
.sp-token-card.is-won { opacity: 0.35; cursor: not-allowed; }
.sp-token-card.is-won:hover { border-color: var(--sp-border); }
/* Entered tokens — faded but less so than won (still look used/occupied, not invisible).
   Cursor is default; only the — checkbox and Withdraw text are interactive. */
.sp-token-card.is-entered { opacity: 0.6; cursor: default; }
.sp-token-card.is-entered:hover { border-color: var(--sp-border); }
.sp-token-card.is-entered .sp-check-entered { cursor: pointer; }
.sp-token-card.is-entered .sp-check-entered:hover { background: rgba(200,140,40,0.95); }
.sp-token-card.is-entered .sp-token-withdraw { cursor: pointer; }
.sp-token-card.is-entered:hover .sp-token-withdraw { color: var(--sp-accent); text-decoration: underline; }
.sp-token-id { font-family: var(--sp-mono); font-size: 0.7rem; color: var(--sp-text-1); font-weight: 500; white-space: nowrap; }
.sp-token-tag { font-family: var(--sp-mono); font-size: 0.62rem; color: var(--sp-text-3); white-space: nowrap; }

/* Checkbox — always top-right corner */
.sp-token-check {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.45);
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  user-select: none;
}
/* Selected: filled accent with a check */
.sp-check-selected {
  background: var(--sp-accent);
  border-color: var(--sp-accent);
  color: #1a0f08;
}
/* Won: red circle with ✕ */
.sp-check-won {
  border-radius: 50%;
  background: rgba(220, 60, 60, 0.85);
  border-color: rgba(220, 60, 60, 0.9);
  color: #fff;
  cursor: default;
}
/* Entered (in this raffle by this wallet): — minus/dash indicator */
.sp-check-entered {
  background: rgba(200, 160, 50, 0.75);
  border-color: rgba(200, 160, 50, 0.8);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.sp-token-withdraw {
  font-family: var(--sp-mono);
  font-size: 0.62rem;
  color: var(--sp-text-3);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  white-space: nowrap;
}
.sp-token-withdraw:hover { color: var(--sp-accent); }
.sp-token-withdraw:disabled { color: var(--sp-text-3); opacity: 0.5; cursor: not-allowed; text-decoration: none; }

.sp-enter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 0.8rem 1rem;
  background: var(--sp-bg-card);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  font-family: var(--sp-mono);
  font-size: 0.8rem;
  color: var(--sp-text-2);
}

/* Deposit */
.sp-deposit-card {
  background: var(--sp-bg-card);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  padding: 1.4rem 1.5rem;
}
.sp-deposit-row { display: flex; gap: 2rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.sp-deposit-stat { display: flex; flex-direction: column; gap: 0.25rem; }
.sp-deposit-stat-label { font-family: var(--sp-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sp-text-3); }
.sp-deposit-stat-value { font-family: var(--sp-serif); font-size: 1.3rem; color: var(--sp-text-1); }
.sp-field-group { margin-bottom: 1rem; }
.sp-label { display: block; font-family: var(--sp-mono); font-size: 0.74rem; color: var(--sp-text-3); margin-bottom: 0.4rem; }
.sp-field-input {
  width: 100%;
  font-family: var(--sp-mono);
  font-size: 0.95rem;
  color: var(--sp-text-1);
  background: var(--sp-bg-card-2);
  border: 1px solid var(--sp-border);
  border-radius: 10px;
  padding: 0.65rem 0.8rem;
  box-sizing: border-box;
}
.sp-field-input:focus { outline: none; border-color: var(--sp-accent); }
.sp-deposit-note { font-family: var(--sp-sans); font-size: 0.8rem; color: var(--sp-text-3); margin-top: 1rem; line-height: 1.5; }

/* Winners table */
.sp-winners-table { width: 100%; border-collapse: collapse; font-family: var(--sp-mono); font-size: 0.82rem; }
.sp-winners-table th {
  text-align: left;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sp-text-3);
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--sp-border);
}
.sp-winners-table td {
  padding: 0.6rem 0.7rem;
  color: var(--sp-text-2);
  border-bottom: 1px solid var(--sp-border);
}
.sp-winners-table tr:last-child td { border-bottom: none; }
.sp-winners-table td.win-amount { color: var(--sp-accent); font-weight: 600; }

/* Winners grid (card-based, diagonal split image) */
.sp-winners-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.8rem; }
.sp-winner-card {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  background: var(--sp-bg-card);
  border: 1px solid var(--sp-border);
  border-radius: 8px;
  overflow: hidden;
}
/* Stacked image container: token art base + collection thumbnail diagonal overlay */
.sp-winner-visual {
  position: relative;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.sp-winner-token-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--sp-bg-card-2);
}
.sp-winner-coll-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* prize thumbnail clips to the LEFT — sits visually above the prize text
     in the bar below. Token art visible on the right. */
  clip-path: polygon(0 0, 68% 0, 38% 100%, 0 100%);
}
/* Short one-line bar: prize left, short address right */
.sp-winner-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0.5rem;
  gap: 0.3rem;
  background: var(--sp-bg-card);
}
.sp-winner-prize { font-family: var(--sp-mono); font-size: 0.78rem; font-weight: 700; color: var(--sp-accent); white-space: nowrap; }
.sp-winner-addr {
  font-family: var(--sp-mono);
  font-size: 0.7rem;
  color: var(--sp-text-3);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s;
}
.sp-winner-addr:hover { color: var(--sp-accent); }

/* Hover overlay: raffle/token/date details */
.sp-winner-hover {
  position: absolute;
  inset: 0 0 auto 0;
  bottom: 2.2rem; /* sit above the bar */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.5rem;
  text-align: center;
  background: rgba(0,0,0,0.82);
  color: #fff;
  font-family: var(--sp-mono);
  font-size: 0.68rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.sp-winner-card:hover .sp-winner-hover { opacity: 1; }

/* Copyable addresses — consistent across the whole page */
.sp-copyable { cursor: pointer; }
.sp-copyable:hover { color: var(--sp-accent) !important; }

/* Responsive */
@media (max-width: 640px) {
  .sp-wrap { padding: 1.4rem 1rem 5rem; }
  .sp-status-head { flex-direction: column; }
  .sp-deposit-row { gap: 1.2rem; }

  /* The tab nav was wrapping each label into a vertical stack of single
     words ("Add" / "to" / "the" / "Pile") once labels no longer fit the
     viewport width. Scroll sideways instead — tabs keep their normal
     single-line shape, the row just becomes swipeable. */
  .sp-tab-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* keep this nav's own scrollbar invisible; the page-level fix is separate */
  }
  .sp-tab-nav::-webkit-scrollbar { display: none; }
  .sp-tab {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sp-ember-fill, .sp-ember-flame { transition: none; }
  .sp-ember-meter.is-quorum .sp-ember-fill::after,
  .sp-ember-meter.is-quorum .sp-ember-flame { animation: none; }
}

/* Keyboard focus visibility */
.sp-btn:focus-visible,
.sp-tab:focus-visible,
.sp-token-card:focus-visible,
.sp-field-input:focus-visible {
  outline: 2px solid var(--sp-accent);
  outline-offset: 2px;
}

/* ── v2 additions ─────────────────────────────────────────────────── */

/* Instance list (multiple concurrent raffles) */
/* 2-column grid, responsive to 1 column on narrow screens */
.sp-instances-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 1rem;
}

.sp-instance-card {
  background: var(--sp-bg-card);
  border: 1px solid var(--sp-border);
  border-radius: var(--sp-radius);
  overflow: hidden;
}
.sp-instance-card.is-quorum { border-color: color-mix(in srgb, var(--sp-accent) 50%, transparent); }

/* 2:1 split image — left = entry collection, right = prize token */
.sp-instance-visual {
  display: flex;
  width: 100%;
  aspect-ratio: 2 / 1;
  overflow: hidden;
}
.sp-instance-img-left {
  width: 50%;
  height: 100%;
  object-fit: cover;
  background: var(--sp-bg-card-2);
}
.sp-instance-img-right {
  width: 50%;
  height: 100%;
  object-fit: cover;
  background: var(--sp-bg-card-2);
  border-left: 1px solid var(--sp-border);
}

/* Content area below the image */
.sp-instance-content { padding: 1rem 1.25rem; }

.sp-instance-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.9rem; flex-wrap: wrap; gap: 0.5rem; }
.sp-instance-id { font-family: var(--sp-mono); font-size: 0.7rem; color: var(--sp-text-3); text-transform: uppercase; letter-spacing: 0.04em; }
.sp-instance-prize { font-family: var(--sp-serif); font-size: 1.5rem; color: var(--sp-text-1); margin-top: 0.2rem; }
.sp-instance-entry { font-family: var(--sp-mono); font-size: 0.7rem; color: var(--sp-text-3); margin-top: 0.2rem; }

.sp-instance-actions { display: flex; gap: 0.7rem; align-items: center; margin-top: 0.9rem; flex-wrap: wrap; }
.sp-instance-note { font-family: var(--sp-mono); font-size: 0.73rem; color: var(--sp-text-3); }
.sp-instance-stats {
  font-family: var(--sp-mono); font-size: 0.73rem; color: var(--sp-text-3); margin-top: 0.35rem;
  min-height: 1.1em; /* reserved so async population doesn't shift layout after initial render */
}

/* Enter instance picker */
.sp-enter-instance-picker { margin-bottom: 1rem; }

/* Recurring label in admin */
.sp-recurring-row {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-family: var(--sp-sans); font-size: 0.83rem; color: var(--sp-text-2);
  cursor: pointer; margin-top: 0.6rem;
}
.sp-recurring-row input { margin-top: 2px; flex-shrink: 0; }

.sp-add-token-row {
  display: flex; gap: 0.5rem; margin-top: 0.4rem; align-items: center; flex-wrap: wrap;
}
.sp-field-input-sm { flex: 1; min-width: 140px; font-size: 0.8rem; padding: 0.45rem 0.6rem; }

.sp-grace-presets { display: flex; gap: 0.4rem; margin-top: 0.4rem; flex-wrap: wrap; }
.sp-preset-btn {
  font-family: var(--sp-mono); font-size: 0.72rem; padding: 0.3rem 0.6rem;
  border-radius: 999px; border: 1px solid var(--sp-border); background: var(--sp-bg-card-2);
  color: var(--sp-text-2); cursor: pointer; transition: all 0.15s ease;
}
.sp-preset-btn:hover { border-color: var(--sp-accent); color: var(--sp-accent); }

/* Admin instance management rows */
.sp-admin-inst-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--sp-border);
  font-family: var(--sp-mono); font-size: 0.78rem; color: var(--sp-text-2); flex-wrap: wrap;
}
.sp-admin-inst-row:last-child { border-bottom: none; }
.sp-admin-inst-row .sp-inst-label { color: var(--sp-text-1); }
.sp-admin-inst-row .sp-inst-tag {
  font-size: 0.68rem; padding: 0.2rem 0.5rem; border-radius: 999px;
  background: var(--sp-bg-card-2); color: var(--sp-text-3);
}
.sp-admin-inst-row .sp-inst-tag.active { color: var(--sp-good); }
.sp-admin-inst-row .sp-inst-tag.dormant { color: var(--sp-text-3); }

/* Committed stat on deposit tab */
.sp-deposit-row .sp-deposit-stat:nth-child(2) .sp-deposit-stat-value { color: var(--sp-warn); }