/* ---------- design tokens (dark, default) ---------- */
:root,
body[data-theme="dark"] {
  --bg:        #0d0f0d;
  --bg-card:   #131513;
  --bg-card-2: #171917;
  --bg-sunken: #080908;
  --bd:        #3a352e;
  --bd-bright: #5f594f;

  --tx:        #ece9df;
  --tx-mute:   #a6a195;
  --tx-dim:    #6c665b;
  --tx-faint:  #4b463e;

  /* accents */
  --green:        #72d06c;
  --green-bg:     #183817;
  --green-bd:     #2d6b2d;

  --purple:       #d06cff;
  --purple-bg:    #241334;
  --purple-bd:    #6f35a4;

  --gold:         #e1c241;
  --gold-bg:      #2d2810;
  --gold-bd:      #7c691b;
  --gold-soft:    #18170e;

  --red:          #d04646;

  --mono: ui-monospace, "SF Mono", "Menlo", "Cascadia Code", "Roboto Mono", monospace;
}


/* ---------- base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.4;
  min-height: 100vh;
  padding: 1.25rem 1.5rem 4rem;
}
h2, h3 { margin: 0; font-weight: 500; }
input, button { font-family: inherit; font-size: inherit; color: inherit; }
input { outline: none; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.4; }
button,
input,
a {
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 1px solid var(--bd-bright);
  outline-offset: 2px;
}
.muted   { color: var(--tx-mute); }
.gold    { color: var(--gold); }
.gold-tx { color: var(--gold); }

/* ---------- top header (minimalist text nav, like the footer) ---------- */
.top {
  max-width: 1080px;
  margin: 0 auto 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  min-height: 40px;
  padding: 0 0 12px;
  border-bottom: 0.5px solid var(--bd);
}
/* brand = quiet gold wordmark, matching naterich.net + synthCore */
.brand {
  letter-spacing: 0.18em;
  color: var(--gold);
  font-size: 12px;
  text-shadow: 0 0 12px rgba(225, 194, 65, 0.12);
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover { color: var(--purple); }
.brand-group {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  margin-right: auto;   /* pushes nav + status to the right; wraps clean, never overlaps */
}
.site-nav {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
}
.nav-link {
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--green);
  text-decoration: none;
  padding: 2px 0;
  transition: color 0.12s ease;
}
.nav-link:hover,
.nav-link:active { color: var(--purple); }
.nav-home:hover,
.nav-home:active { color: var(--gold); }
.net {
  font-size: 12px;
  color: var(--tx-mute);
  display: flex;
  align-items: center;
  gap: 6px;
}
.net-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
}
.net-sep { color: var(--tx-faint); }
#block-num { color: var(--purple); }

.prompt {
  max-width: 1080px;
  margin: 0 auto 0.4rem;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--tx-mute);
}
.prompt-sub {
  max-width: 1080px;
  margin: 0 auto 1.5rem;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--tx-dim);
}
.prompt-sub a { color: var(--green); text-decoration: none; }
.prompt-sub a:hover { color: var(--purple); }

/* ---------- grid layout ---------- */
.lottery-shell {
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: stretch;
}
.page-hidden {
  display: none !important;
}

.page-nav,
.page-count {
  display: none;
}
@media (max-width: 820px) {
  .grid { grid-template-columns: 1fr; }
}

/* ---------- card ---------- */
.lottery,
.token-card {
  background: var(--bg-card);
  border: 0.5px solid var(--bd);
  border-radius: 8px;
  padding: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
  min-height: 100%;
}
.qtst-tool {
  justify-content: flex-start;
  align-self: stretch;
  gap: 0.5rem;
}
.qtst-tool .card-head {
  margin-bottom: 0;
}
.qtst-balance-panel {
  display: grid;
  gap: 5px;
  padding: 8px 10px;
  border: 0.5px solid var(--bd);
  border-radius: 8px;
  background: var(--bg-sunken);
}
.qtst-balance-panel .lbl,
.qtst-supply .action-head,
.qtst-tool .stat .lbl {
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--tx-mute);
}
.qtst-balance-panel .val {
  font-size: clamp(14px, 1.1vw, 17px);
}
.qtst-balance-panel .state-pill {
  justify-self: start;
}
.qtst-supply {
  gap: 10px;
}
.supply-row {
  display: grid;
  gap: 4px;
}
.supply-row .val {
  font-size: clamp(13px, 0.95vw, 15px);
}
.supply-row .caption {
  color: var(--tx-faint);
  font-size: 10px;
  letter-spacing: 0.08em;
}
.asset-prefix {
  color: var(--tx-dim);
  margin-right: 5px;
  font-size: 0.78em;
}
.qtst-actions {
  display: grid;
  gap: 0.4rem;
  margin-top: auto;
}
.qtst-actions .action {
  min-height: 0;
}
.lottery:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  max-width: calc((1080px - 1.25rem) / 2);
  width: 100%;
  justify-self: center;
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.card-head .ttl {
  display: flex;
  align-items: center;
  gap: 10px;
}
.card-head h3 {
  font-size: 12px;
  letter-spacing: 0;
}
.tag {
  font-size: 8px;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  border-radius: 4px;
  border: 0.5px solid currentColor;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
/* Network tag styled as a pressed/active button — anticipates future segmented
   network switcher (Sepolia / Mainnet / Base, mutually exclusive). */
.tag-net {
  background: var(--bg-sunken);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5),
              inset 0 0 0 0.5px rgba(255, 255, 255, 0.03);
  border-color: var(--bd);
}
.tag svg { display: block; }
.tag-net { color: var(--tx-mute); }
.tag-eth { color: #c4c8d4; }   /* silver / platinum — Ethereum */
.tag-btc { color: #f7931a; }   /* bitcoin orange */
.tag-usd { color: #3ed193; }   /* mint green — stable */
.tag-token {
  color: var(--gold);
  background: var(--bg-sunken);
  border-color: var(--gold-bd);
}

/* Card head right column: stacks gate state + address vertically, right-aligned */
.head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;
}

.addr {
  font-size: 10px;
  color: var(--tx-faint);
}

/* ---------- stats strip ---------- */
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: var(--bg-sunken);
  border: 0.5px solid var(--bd);
  border-radius: 7px;
  padding: 7px 8px;
  text-align: center;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.02);
}
.stat .lbl {
  display: block;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--tx-mute);
  margin-bottom: 2px;
}
.stat .val {
  font-size: 12px;
}
.stat.divider { border-left: 0.5px solid var(--bd); border-right: 0.5px solid var(--bd); }

/* 2-col stats variant for token-card — gives long values (e.g. supply) breathing room */
.stats-2col {
  grid-template-columns: 1fr 1.4fr;
}
.stats-2col .stat.divider {
  border-right: 0;
  padding-left: 12px;
}
.stat .val-fit {
  font-size: clamp(13px, 1.6vw, 18px);
  font-variant-numeric: tabular-nums;
}
.stat .caption {
  display: block;
  margin-top: 2px;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--tx-faint);
}

/* ---------- status row ----------
   3-col grid aligned with stats above: [state pill | blocks | deadline].
   Each cell aligns to its outside edge to mirror stats columns. */
.status-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  font-size: 12px;
  color: var(--tx-mute);
}
.status-row > :nth-child(1) { justify-self: start; }
.status-row > :nth-child(2) { justify-self: center; }
.status-row > :nth-child(3) { justify-self: end; }
.state-pill {
  font-size: 10px;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: 999px;
  border: 0.5px solid currentColor;
  white-space: nowrap;
  text-decoration: none;
}
.state-pill.unarmed     { color: var(--tx-dim); }
.state-pill.armed       { color: var(--green); }
.state-pill.committed   { color: var(--purple); }
.state-pill.expired     { color: var(--red); }
.state-pill.gated       { color: var(--tx-dim); }
.state-pill.unlocked    { color: var(--green); }
.blocks-center {
  font-size: 10px;
  color: var(--tx-mute);
  font-variant-numeric: tabular-nums;
  cursor: default;
  position: relative;
  min-width: 58px;
  min-height: 1.4em;
  text-align: center;
}
.deadline-right {
  font-size: 10px;
  color: var(--tx-faint);
  font-variant-numeric: tabular-nums;
}
.deadline-right .deadline-label,
.deadline-link {
  color: var(--tx-faint);
  text-decoration: none;
}
.deadline-link:hover { color: var(--purple); }

/* ---------- action blocks ---------- */
.action {
  background: var(--bg-card-2);
  border: 0.5px solid var(--bd);
  border-radius: 8px;
  padding: 7px 9px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.015);
}
.action-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--tx-mute);
}
.action-foot {
  font-size: 10px;
  color: var(--tx-dim);
  text-align: center;
}
.action-foot-split {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2px;
}
.ev-cell {
  color: var(--tx-mute);
  font-variant-numeric: tabular-nums;
}
.ev-link {
  color: inherit;
  text-decoration: none;
}
.ev-link:hover {
  color: var(--green);
}
.ev-cell .edge-neg  { color: var(--tx-dim); }
.ev-cell .edge-zero { color: var(--gold); }
.ev-cell .edge-pos  { color: var(--gold); font-weight: 500; }
.evl-tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 8px;
  letter-spacing: 0.15em;
  padding: 1px 5px;
  border-radius: 3px;
  border: 0.5px solid var(--gold);
  color: var(--gold);
  text-shadow: 0 0 6px rgba(201,162,39,0.5);
}

.qty-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.qty-btn {
  width: 22px; height: 22px;
  background: var(--bg-sunken);
  border: 0.5px solid var(--bd);
  border-radius: 5px;
  color: var(--tx-mute);
  font-size: 12px;
  line-height: 1;
}
.qty-btn:not(:disabled):hover,
.qty-presets button:not(:disabled):hover {
  color: var(--tx);
  border-color: var(--bd-bright);
  background: color-mix(in srgb, var(--bd) 40%, transparent);
}
.qty-in {
  flex: 1;
  background: var(--bg-sunken);
  border: 0.5px solid var(--bd);
  border-radius: 5px;
  color: var(--tx);
  text-align: center;
  font-size: 12px;
  padding: 2px;
  -moz-appearance: textfield;
}
.action:has([data-bind="qty"]) .qty-in:focus-visible,
.action:has([data-bind="qty"]) .qty-btn:focus-visible,
.action:has([data-bind="qty"]) .qty-presets button:focus-visible {
  outline-color: var(--green);
}
.action:has([data-bind="donate-amt"]) .amt-in:focus-visible {
  outline-color: var(--purple);
  border-color: var(--purple-bd);
}
.action:has([data-bind="qtst-mint-amt"]) .amt-in:focus-visible {
  outline-color: var(--gold);
  border-color: var(--gold-bd);
}
.action:has([data-bind="qtst-approve-amt"]) .amt-in:focus-visible {
  outline-color: var(--bd-bright);
  border-color: var(--bd);
}
.qty-in::-webkit-outer-spin-button,
.qty-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-presets {
  display: flex; gap: 4px;
}
.qty-presets button {
  flex: 1;
  background: var(--bg-sunken);
  border: 0.5px solid var(--bd);
  border-radius: 4px;
  color: var(--tx-dim);
  font-size: 10px;
  padding: 2px 0;
}
.amt-in {
  background: var(--bg-sunken);
  border: 0.5px solid var(--bd);
  border-radius: 5px;
  color: var(--tx);
  padding: 4px 8px;
  font-size: 10px;
  -moz-appearance: textfield;
}
.amt-in::-webkit-outer-spin-button,
.amt-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.lifecycle-row {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 4px;
}
.lifecycle-row > button {
  flex: 1;
  min-width: 0;
}
/* Author CSS above gives buttons display:block, beating the UA [hidden] rule.
   Restore [hidden] semantics so JS toggling works as expected. */
[hidden] { display: none !important; }

/* ---------- buttons ---------- */
.btn {
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 10px;
  letter-spacing: 0.02em;
  border: 0.5px solid;
  background: transparent;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease, filter 0.12s ease;
}
.btn:not(:disabled):hover { filter: brightness(1.12); }
.btn-outline { color: var(--tx-mute); border-color: var(--bd-bright); }
.btn-outline:not(:disabled):hover {
  color: var(--tx);
  background: color-mix(in srgb, var(--bd) 40%, transparent);
}

.btn-green  { background: var(--green-bg);  border-color: var(--green-bd);  color: var(--green); }
.btn-purple { background: var(--purple-bg); border-color: var(--purple-bd); color: var(--purple); }
.btn-gold   { background: var(--gold-bg);   border-color: var(--gold-bd);   color: var(--gold); padding: 5px 14px; }
.btn-ghost  { background: var(--bg-sunken); border-color: var(--bd); color: var(--tx-mute); }
.btn-token  { background: var(--gold-bg); border-color: var(--gold-bd); color: var(--gold); }
.btn-approve { background: var(--purple-bg); border-color: var(--purple-bd); color: var(--purple); }
.btn-green:not(:disabled):hover { background: color-mix(in srgb, var(--green-bg) 70%, var(--green)); }
.btn-purple:not(:disabled):hover { background: color-mix(in srgb, var(--purple-bg) 70%, var(--purple)); color: color-mix(in srgb, var(--purple) 65%, #fff); }
.btn-gold:not(:disabled):hover { background: color-mix(in srgb, var(--gold-bg) 70%, var(--gold)); }
.btn-token:not(:disabled):hover { background: color-mix(in srgb, var(--gold-bg) 70%, var(--gold)); color: var(--gold); }
.btn-approve:not(:disabled):hover { background: color-mix(in srgb, var(--green-bg) 70%, var(--green)); border-color: var(--green-bd); color: var(--green); }

/* Friendly "blocked" state — looks disabled but stays hoverable so its data-tip
   can explain why (a native :disabled button never fires :hover). Neutralize the
   per-variant hover backgrounds; placed after them so source order wins the tie. */
.btn.blocked,
.btn.blocked:hover { opacity: 0.4; cursor: not-allowed; filter: none; }
.btn-green.blocked:hover  { background: var(--green-bg); }
.btn-purple.blocked:hover { background: var(--purple-bg); color: var(--purple); }
.btn-gold.blocked:hover   { background: var(--gold-bg); }
/* Reason tooltip stays single-line (nowrap from the base rule, which sizes to
   the text instead of collapsing to the button width), anchored by where the
   button sits so it never clips off the card edge. */
.claim-row .btn.blocked:hover::after,
.lifecycle-row [data-action="executeDraw"].blocked:hover::after {
  left: auto; right: 0; transform: none;
}
.lifecycle-row [data-action="requestDraw"].blocked:hover::after {
  left: 0; right: auto; transform: none;
}
/* Buy/Donate sit directly under their input field — drop the reason tooltip
   BELOW the button so it doesn't overlap the field above. */
[data-action="buy"].blocked:hover::after,
[data-action="donate"].blocked:hover::after {
  top: calc(100% + 7px);
  bottom: auto;
}

/* ---------- claim row ---------- */
.claim-row {
  background: var(--gold-soft);
  border: 0.5px solid var(--gold-bd);
  border-radius: 7px;
  padding: 6px 9px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.claim-row .lbl {
  font-size: 10px;
  letter-spacing: 0.1em;
}
.claim-amt {
  font-size: 12px;
  margin-top: 2px;
}

/* ---------- activity log ---------- */
.log-section {
  max-width: 1080px;
  margin: 1.5rem auto 0;
  background: var(--bg-card);
  border: 0.5px solid var(--bd);
  border-radius: 8px;
  padding: 1rem 1.25rem;
}
.log-head {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--tx-mute);
  margin-bottom: 8px;
}
#log {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 200px;
  overflow-y: auto;
  font-size: 12px;
  color: var(--tx-mute);
}
#log li {
  padding: 4px 0;
  border-bottom: 0.5px solid var(--bd);
  display: flex;
  gap: 8px;
}
#log li:last-child { border-bottom: 0; }
#log li .lt-tag {
  color: var(--purple);
  min-width: 60px;
}
#log li .lt-time {
  color: var(--tx-faint);
}

/* ---------- footer ---------- */
.bottom {
  max-width: 1080px;
  margin: 2rem auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  color: var(--tx-faint);
  border-top: 0.5px solid var(--bd);
  padding-top: 12px;
}
.bottom a { color: inherit; text-decoration: none; }
.bottom a:hover { color: var(--tx-mute); }
.ens-link {
  position: relative;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--tx-faint);
  font: inherit;
  cursor: pointer;
}
.ens-link:hover,
.ens-link:focus-visible {
  color: var(--purple);
  outline: 0;
}
.copy-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 7px);
  transform: translateX(-50%);
  padding: 4px 7px;
  border: 0.5px solid var(--green);
  border-radius: 5px;
  background: var(--bg-card);
  color: var(--green);
  font-size: 10px;
  letter-spacing: 0.04em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.ens-link.copied .copy-tip {
  opacity: 1;
}
.disclaim {
  color: var(--tx-dim);
  letter-spacing: 0.04em;
}
.disclaim a {
  color: var(--tx-dim);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}
.disclaim a:hover {
  color: var(--green);
}
.gh-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tx-faint);
}
.bottom .gh-link:hover { color: var(--purple); }
.gh-link span { color: inherit; }
.gh-link svg { display: block; }

/* ---------- toast ---------- */
#toast {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  border: 0.5px solid var(--bd-bright);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 12px;
  color: var(--tx);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 20;
}
#toast.show { opacity: 1; }
#toast.error { border-color: var(--red); color: var(--red); }

/* ---------- v=6 polish: reactive pot accent, EVL tooltip, log colors, mini_v2 platinum ---------- */

/* Cool platinum palette — mini_v2 variant accent (ETH "secondary" metal) */
:root {
  --platinum:      #d8d8dc;
  --platinum-bg:   #1c1c20;
  --platinum-bd:   #5a5d68;
  --platinum-soft: #15161a;
}

/* Pot value tri-state — purple default (EV-negative), green at break-even ±0.5%
   or invitation/empty, gold once EVL active (edge > +0.5%). State, not asset. */
.stat .val.pot-val {
  color: var(--purple);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.stat .val.pot-val.ev-neutral { color: var(--green); }
.stat .val.pot-val.ev-good {
  color: var(--gold);
  text-shadow: 0 0 6px rgba(201, 162, 39, 0.3);
}

/* Fast CSS tooltips for inline docs affordances */
.tip,
.state-pill,
.blocks-center,
[data-bind="endblock"] {
  position: relative;
}
.tip:hover::after,
.state-pill:hover::after,
.blocks-center:hover::after,
[data-bind="endblock"]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 10px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  text-shadow: none;
  pointer-events: none;
  z-index: 10;
}
.tip-green:hover::after,
.blocks-center:hover::after,
[data-bind="endblock"]:hover::after {
  background: var(--green-bg);
  border: 0.5px solid var(--green-bd);
  color: var(--green);
}
.tip-gold:hover::after {
  background: var(--gold-soft);
  border: 0.5px solid var(--gold-bd);
  color: var(--gold);
}
.tip-purple:hover::after {
  background: var(--purple-bg);
  border: 0.5px solid var(--purple-bd);
  color: var(--purple);
}
.state-pill:hover::after {
  background: var(--purple-bg);
  border: 0.5px solid var(--purple-bd);
  color: var(--purple);
}
.lottery:first-child .state-pill:hover::after,
.token-card .state-pill:hover::after,
.lottery:nth-child(3n + 1) .state-pill:hover::after {
  left: 0;
  transform: none;
}
.lottery:nth-child(3n) .state-pill:hover::after {
  left: auto;
  right: 0;
  transform: none;
}
.brand:hover::after {
  top: calc(100% + 6px);
  bottom: auto;
}

/* EVL tag hover tooltip — same aesthetic as the badge itself */
.evl-tag { cursor: pointer; text-decoration: none; }

/* Activity log tag colors — coordinated with action buttons */
#log li .lt-tag           { color: var(--tx-mute); }  /* default neutral for system/lifecycle */
#log li .lt-tag.lt-buy    { color: var(--green); }
#log li .lt-tag.lt-donate { color: var(--purple); }
#log li .lt-tag.lt-claim  { color: var(--gold); }
#log li .lt-tag.lt-mint   { color: var(--gold); }
#log li .lt-tag.lt-approve { color: var(--purple); }
#log li .lt-tag.lt-err    { color: var(--red); }

/* Platinum tokens kept defined for future variant identity (NOT used to override
   EV-active/claim/EVL accents — those are gold across all variants, full stop). */

/* Asset color = platinum for all ETH cards (Ether, Ether-mini, Ether v2, Ether-mini v2).
   Future WBTC/USDC variants would scope their own color via .lottery.canon_btc h3 etc. */
.lottery .card-head h3 { color: var(--platinum); }
.token-card .card-head h3,
.token-val {
  color: var(--platinum);
}

/* Activity log: variant prefix (e.g. "mini_v2:") rendered in the asset color */
#log li .lt-variant.lt-asset-eth {
  color: var(--platinum);
  margin-right: 4px;
}

/* Address chip is now an <a> to Etherscan — keep it faint at rest, brighten on hover */
.addr {
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease;
}
.addr:hover { color: var(--purple); }

@media (min-width: 960px) {
  body {
    padding: 0.55rem 0.7rem 0.9rem;
    font-size: 10px;
    line-height: 1.22;
  }
  .top,
  .prompt,
  .lottery-shell,
  .log-section,
  .bottom {
    max-width: 1500px;
  }
  .top {
    min-height: 28px;
    margin-bottom: 0.25rem;
    padding-bottom: 5px;
    gap: 6px 14px;
  }
  .brand {
    font-size: 10px;
    letter-spacing: 0.14em;
  }
  .site-nav {
    gap: 12px;
  }
  .nav-link,
  .net {
    font-size: 10px;
  }
  #connect-btn {
    padding: 2px 6px;
    font-size: 9px;
  }
  .prompt {
    margin-bottom: 0.1rem;
    font-size: 10px;
  }
  .prompt-sub {
    margin-bottom: 0.3rem;
    font-size: 9px;
  }
  .grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.35rem;
  }
  .lottery,
  .token-card,
  .lottery:last-child:nth-child(odd) {
    grid-column: auto;
    max-width: none;
    justify-self: stretch;
  }
  .lottery,
  .token-card {
    padding: 4px 5px;
    gap: 3px;
    border-radius: 5px;
    line-height: 1.12;
    box-shadow: none;
  }
  .qtst-tool { gap: 3px; }
  .qtst-balance-panel { padding: 3px 5px; border-radius: 4px; gap: 2px; }
  .qtst-balance-panel .val,
  .supply-row .val { font-size: 10px; }
  .qtst-actions { gap: 3px; margin-top: auto; }
  .card-head { align-items: flex-start; gap: 2px; }
  .card-head .ttl { flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; }
  .card-head h3 { font-size: 10px; }
  .tag { padding: 0 3px; font-size: 6px; }
  .addr { font-size: 6px; padding-top: 0; }
  .stats { padding: 2px 3px; border-radius: 4px; }
  .stat .lbl { font-size: 6px; margin-bottom: 0; }
  .stat .val { font-size: 9px; }
  .status-row { font-size: 6px; }
  .state-pill { font-size: 6px; padding: 1px 4px; }
  .blocks-center, .deadline-right { font-size: 6px; }
  .action { padding: 2px 3px; gap: 1px; border-radius: 4px; }
  .action-head { font-size: 6px; }
  .qty-row { gap: 2px; }
  .qty-btn { width: 13px; height: 13px; border-radius: 3px; font-size: 9px; }
  .qty-in { min-width: 0; height: 14px; font-size: 8px; padding: 0 1px; border-radius: 3px; }
  .qty-presets { gap: 1px; }
  .qty-presets button { font-size: 6px; padding: 0; border-radius: 3px; }
  .action-foot { font-size: 6px; }
  .evl-tag { margin-left: 2px; padding: 0 2px; font-size: 6px; }
  .amt-in { height: 14px; font-size: 8px; padding: 1px 3px; border-radius: 3px; }
  .lifecycle-row { gap: 2px; }
  .btn { padding: 2px 4px; font-size: 8px; border-radius: 3px; }
  .btn-gold { padding: 2px 6px; }
  .claim-row { padding: 2px 4px; border-radius: 4px; }
  .claim-row .lbl { font-size: 6px; }
  .claim-amt { font-size: 10px; margin-top: 0; }
  .log-section {
    margin-top: 0.35rem;
    padding: 0.35rem 0.5rem;
    border-radius: 5px;
  }
  .log-head {
    margin-bottom: 3px;
    font-size: 8px;
  }
  #log {
    max-height: 54px;
    font-size: 9px;
  }
  #log li {
    padding: 2px 0;
    gap: 5px;
  }
  .bottom {
    margin-top: 0.45rem;
    padding-top: 5px;
    font-size: 9px;
  }
  .page-nav {
    display: none !important;
  }
  .page-count {
    display: none !important;
  }
}

@media (min-width: 960px) and (max-width: 1279px) {
  /* At 67%/75% zoom on half-screen the absolute buttons collide with card
     edges; suppress them and rely on .page-count pill for nav. */
  .page-prev,
  .page-next {
    display: none;
  }
  .page-count {
    margin: 0.9rem auto 0;
    padding: 5px 14px;
    border: 0.5px solid var(--purple-bd);
    border-radius: 999px;
    width: max-content;
    color: var(--purple);
    font-size: 10px;
    letter-spacing: 0.18em;
  }
  .page-count:hover {
    color: var(--green);
    border-color: var(--green-bd);
  }
}

@media (min-width: 1280px) {
  .page-prev {
    left: -48px;
  }
  .page-next {
    right: -48px;
  }
}

@media (max-width: 620px) {
  body {
    padding: 1rem 1rem 4rem;
  }
  .top {
    align-items: center;
    gap: 8px 16px;
    margin-bottom: 1.1rem;
  }
  .brand { font-size: 12px; }
  .brand-group { max-width: 100%; }
  /* brand + status on row 1, nav drops to its own full-width row 2 */
  .site-nav {
    order: 3;
    width: 100%;
    gap: 16px;
  }
  .net { order: 2; }
  #connect-btn { order: 2; }
  .prompt {
    margin-bottom: 1rem;
  }
  .lottery {
    padding: 0.6rem;
  }
  .token-card {
    padding: 0.6rem;
  }
  .lottery:last-child:nth-child(odd) {
    grid-column: auto;
    max-width: none;
  }
  .card-head {
    align-items: flex-start;
  }
  .card-head .ttl {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }
  .stats {
    padding: 7px 6px;
  }
  .stat .val {
    font-size: 12px;
  }
  .status-row {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .status-row > :nth-child(n) {
    justify-self: start;
  }
  .deadline-right {
    justify-self: start;
  }
  #log li {
    display: grid;
    grid-template-columns: auto 1fr;
  }
  #log li > :last-child {
    grid-column: 1 / -1;
  }
  .bottom {
    flex-wrap: wrap;
    justify-content: center;
  }
  .disclaim {
    order: 3;
    width: 100%;
    text-align: center;
  }
}

@media (min-width: 960px) {
  .page-nav,
  .page-count {
    display: none !important;
  }
}