/* ═══════════════════════════════════════════════════════════════════════════
 * VØLT Volts ⚡ — balance chip, Volts hub, offers, crypto checkout, coach admin.
 * Uses the app's tokens (--gold, --dark2…, --font-cond). Loaded after
 * app-shell.css.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Balance chip (topbar) ── */
.volt-chip {
  position: relative; display: inline-flex; align-items: center; gap: .3rem;
  min-height: 36px; padding: 0 .75rem 0 .6rem; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, rgba(var(--gold-rgb, 240,178,74), .2), rgba(255,255,255,.03));
  border: 1px solid rgba(var(--gold-rgb, 240,178,74), .5);
  color: var(--light, #f3f4fa); font: 700 .85rem/1 var(--font-cond, inherit); letter-spacing: .03em;
  transition: transform .14s var(--vos-ease, ease), box-shadow .2s var(--vos-ease, ease);
}
.volt-chip[hidden] { display: none; }
.volt-chip:hover { box-shadow: 0 0 0 4px rgba(var(--gold-rgb, 240,178,74), .12); }
.volt-chip:active { transform: scale(.95); }
.volt-chip-bolt { color: var(--gold, #f0b24a); font-size: .95rem; }
.volt-chip-dot {
  position: absolute; top: -2px; right: -2px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--mint, #4aca78); border: 2px solid var(--dark, #060608);
}
.volt-chip.volt-pulse { animation: voltChipPulse .7s var(--vos-ease, ease); }
@keyframes voltChipPulse { 0% { transform: scale(1); } 35% { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(var(--gold-rgb, 240,178,74), .18); } 100% { transform: scale(1); } }

/* ── Hub ── */
.volts-hub { max-width: 760px; margin: 0 auto; }
.volts-hero {
  position: relative; overflow: hidden; padding: 1.35rem 1.25rem 1.1rem; border-radius: 22px; margin-bottom: 1rem;
  background: radial-gradient(120% 140% at 0% 0%, rgba(var(--gold-rgb, 240,178,74), .26), rgba(255,255,255,.02) 60%), var(--dark2, #0d0e16);
  border: 1px solid rgba(var(--gold-rgb, 240,178,74), .35);
}
.volts-hero-label { font: 700 .7rem/1 var(--font-cond, inherit); letter-spacing: .16em; text-transform: uppercase; color: var(--muted, #a7adc4); }
.volts-bal { display: flex; align-items: baseline; gap: .45rem; margin: .45rem 0 .2rem; }
.volts-bal .bolt { font-size: 1.9rem; color: var(--gold, #f0b24a); }
.volts-bal .n { font: 400 3.1rem/1 var(--font-display, inherit); color: var(--light, #f3f4fa); letter-spacing: .02em; }
.volts-hero-split { color: var(--muted, #a7adc4); font-size: .82rem; }
.volts-hero-meta { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .85rem; }
.volts-pill {
  display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .65rem; border-radius: 999px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  color: var(--light, #f3f4fa); font: 600 .74rem/1.2 var(--font-cond, inherit); letter-spacing: .04em;
}
.volts-pill.gold { border-color: rgba(var(--gold-rgb, 240,178,74), .45); color: var(--gold, #f0b24a); }
.volts-pill.mint { border-color: color-mix(in oklab, var(--mint, #4aca78) 50%, transparent); color: var(--mint, #4aca78); }

.volts-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 1rem; padding: 4px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); }
.volts-tab {
  min-height: 40px; border: 0; border-radius: 10px; cursor: pointer; background: transparent;
  color: var(--muted, #a7adc4); font: 700 .78rem/1 var(--font-cond, inherit); letter-spacing: .06em; text-transform: uppercase;
}
.volts-tab[aria-selected="true"] { background: rgba(var(--gold-rgb, 240,178,74), .16); color: var(--gold, #f0b24a); }

.volts-section { margin: 0 0 1.25rem; }
.volts-h { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin: 0 0 .6rem; }
.volts-h-title { font: 700 .76rem/1 var(--font-cond, inherit); letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #a7adc4); }
.volts-h-note { font-size: .74rem; color: var(--muted2, #8b90a8); }
.volts-card {
  padding: 1rem; border-radius: 16px; background: var(--dark2, #0d0e16);
  border: 1px solid rgba(255,255,255,.07); margin-bottom: .6rem;
}
.volts-note { color: var(--muted, #a7adc4); font-size: .8rem; line-height: 1.55; }
.volts-note a { color: var(--gold, #f0b24a); }
.volts-empty { color: var(--muted, #a7adc4); font-size: .85rem; padding: .75rem 0; text-align: center; }

/* Quest rows */
.volts-quest { display: grid; grid-template-columns: 1fr auto; gap: .35rem .9rem; align-items: center; padding: .8rem 0; border-top: 1px solid rgba(255,255,255,.06); }
.volts-quest:first-child { border-top: 0; padding-top: .2rem; }
.volts-quest-title { font-weight: 600; font-size: .92rem; color: var(--light, #f3f4fa); }
.volts-quest-desc { font-size: .76rem; color: var(--muted, #a7adc4); margin-top: .15rem; }
.volts-bar { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: rgba(255,255,255,.07); overflow: hidden; }
.volts-bar > i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--gold2, #d4952f), var(--gold, #f0b24a)); }
.volts-quest.is-claimed .volts-bar > i { background: var(--mint, #4aca78); }
.volts-reward { font: 700 .8rem/1 var(--font-cond, inherit); color: var(--gold, #f0b24a); white-space: nowrap; }
.volts-btn {
  min-height: 36px; padding: 0 .9rem; border-radius: 10px; cursor: pointer; white-space: nowrap;
  background: var(--gold, #f0b24a); color: #15110a; border: 0; font: 700 .8rem/1 var(--font-cond, inherit); letter-spacing: .05em; text-transform: uppercase;
}
.volts-btn:disabled { opacity: .45; cursor: not-allowed; }
.volts-btn.ghost { background: transparent; color: var(--gold, #f0b24a); border: 1px solid rgba(var(--gold-rgb, 240,178,74), .5); }
.volts-btn.quiet { background: rgba(255,255,255,.06); color: var(--light, #f3f4fa); }
.volts-btn.danger { background: transparent; color: var(--red, #ff6b6b); border: 1px solid color-mix(in oklab, var(--red, #ff6b6b) 50%, transparent); }
.volts-done { font: 700 .76rem/1 var(--font-cond, inherit); letter-spacing: .06em; color: var(--mint, #4aca78); text-transform: uppercase; }

/* Store / items */
.volts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .6rem; }
.volts-item { display: flex; flex-direction: column; gap: .45rem; padding: 1rem; border-radius: 16px; background: var(--dark2, #0d0e16); border: 1px solid rgba(255,255,255,.07); }
.volts-item-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.volts-item-name { font-weight: 700; font-size: .95rem; color: var(--light, #f3f4fa); }
.volts-cost { font: 700 .85rem/1 var(--font-cond, inherit); color: var(--gold, #f0b24a); white-space: nowrap; }
.volts-item-desc { font-size: .78rem; color: var(--muted, #a7adc4); line-height: 1.5; flex: 1; }
.volts-item-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .25rem; }
.volts-limit { font-size: .7rem; color: var(--muted2, #8b90a8); }

/* Packs */
.volts-pack { position: relative; display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1rem 1rem; border-radius: 18px; background: var(--dark2, #0d0e16); border: 1px solid rgba(255,255,255,.08); }
.volts-pack.hot { border-color: rgba(var(--gold-rgb, 240,178,74), .55); box-shadow: 0 0 0 1px rgba(var(--gold-rgb, 240,178,74), .15), 0 12px 32px rgba(0,0,0,.35); }
.volts-pack-badge { position: absolute; top: -10px; right: 12px; padding: .28rem .55rem; border-radius: 999px; background: var(--gold, #f0b24a); color: #15110a; font: 700 .64rem/1 var(--font-cond, inherit); letter-spacing: .08em; text-transform: uppercase; }
.volts-pack-name { font: 700 .74rem/1 var(--font-cond, inherit); letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #a7adc4); }
.volts-pack-n { font: 400 2.2rem/1 var(--font-display, inherit); color: var(--light, #f3f4fa); }
.volts-pack-n small { font: 700 .8rem/1 var(--font-cond, inherit); color: var(--gold, #f0b24a); margin-left: .25rem; }
.volts-pack-price { font-size: .9rem; color: var(--light, #f3f4fa); font-weight: 600; }
.volts-pack-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-top: .5rem; }
.volts-pack-actions.single { grid-template-columns: 1fr; }

/* Ledger */
.volts-ledger-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .65rem 0; border-top: 1px solid rgba(255,255,255,.06); }
.volts-ledger-row:first-child { border-top: 0; }
.volts-ledger-label { font-size: .86rem; color: var(--light, #f3f4fa); }
.volts-ledger-at { font-size: .7rem; color: var(--muted2, #8b90a8); margin-top: .15rem; }
.volts-delta { font: 700 .9rem/1 var(--font-cond, inherit); white-space: nowrap; }
.volts-delta.plus { color: var(--mint, #4aca78); }
.volts-delta.minus { color: var(--muted, #a7adc4); }

/* Referral */
.volts-code { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .7rem .85rem; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px dashed rgba(var(--gold-rgb, 240,178,74), .45); margin: .6rem 0; }
.volts-code b { font: 700 1.25rem/1 var(--font-mono, monospace); letter-spacing: .18em; color: var(--gold, #f0b24a); }
.volts-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.volts-input {
  flex: 1; min-width: 0; min-height: 40px; padding: 0 .8rem; border-radius: 10px;
  background: var(--dark3, #14151f); color: var(--light, #f3f4fa); border: 1px solid rgba(255,255,255,.1); font-size: .9rem;
}
textarea.volts-input { min-height: 84px; padding: .6rem .8rem; resize: vertical; width: 100%; }
.volts-input:focus { border-color: rgba(var(--gold-rgb, 240,178,74), .6); outline: none; }

/* Today card */
.volts-today { margin: 0 0 1rem; padding: .95rem 1rem; border-radius: 18px; background: linear-gradient(135deg, rgba(var(--gold-rgb, 240,178,74), .12), rgba(255,255,255,.02)); border: 1px solid rgba(var(--gold-rgb, 240,178,74), .3); }
.volts-today-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.volts-today-title { font: 700 .78rem/1 var(--font-cond, inherit); letter-spacing: .14em; text-transform: uppercase; color: var(--gold, #f0b24a); }
.volts-link { background: none; border: 0; padding: .35rem 0; cursor: pointer; color: var(--gold, #f0b24a); font: 700 .74rem/1 var(--font-cond, inherit); letter-spacing: .06em; text-transform: uppercase; }

/* ── Offer sheet (sits above the chat drawer and the photo-review overlay) ── */
#voltOfferModal { z-index: 99700; }
#voltCryptoModal, #voltPerkModal, #voltShieldModal { z-index: 9600; }
.volt-offer { text-align: center; }
.volt-offer-bolt { width: 54px; height: 54px; margin: .25rem auto .75rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; background: rgba(var(--gold-rgb, 240,178,74), .14); border: 1px solid rgba(var(--gold-rgb, 240,178,74), .45); }
.volt-offer-title { font: 400 1.6rem/1.1 var(--font-display, inherit); color: var(--gold, #f0b24a); letter-spacing: .04em; margin-bottom: .45rem; }
.volt-offer-desc { color: var(--light, #f3f4fa); font-size: .9rem; line-height: 1.55; margin-bottom: .55rem; }
.volt-offer-bal { color: var(--muted, #a7adc4); font-size: .8rem; margin-bottom: .9rem; }
.volt-offer-auto { display: flex; align-items: center; justify-content: center; gap: .45rem; font-size: .8rem; color: var(--muted, #a7adc4); margin: 0 0 .9rem; cursor: pointer; }
.volt-offer-auto input { width: 18px; height: 18px; accent-color: var(--gold, #f0b24a); }
.volt-offer-actions { display: flex; flex-direction: column; gap: .5rem; }
.volt-offer-actions .volts-btn { min-height: 46px; font-size: .88rem; }
.volt-offer-skip { background: none; border: 0; color: var(--muted, #a7adc4); min-height: 40px; cursor: pointer; font: 600 .8rem/1 var(--font-cond, inherit); letter-spacing: .06em; text-transform: uppercase; }

/* ── Crypto checkout ── */
.volt-cx-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .85rem; }
.volt-cx-title { font: 400 1.5rem/1.1 var(--font-display, inherit); color: var(--gold, #f0b24a); letter-spacing: .04em; }
.volt-cx-x { width: 40px; height: 40px; border: 0; border-radius: 12px; background: rgba(255,255,255,.05); color: var(--light, #f3f4fa); font-size: 1.1rem; cursor: pointer; }
.volt-cx-group { font: 700 .7rem/1 var(--font-cond, inherit); letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #a7adc4); margin: .9rem 0 .45rem; }
.volt-cx-coins { display: grid; grid-template-columns: repeat(2, 1fr); gap: .45rem; }
.volt-cx-coin {
  display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; padding: .7rem .8rem; border-radius: 12px; cursor: pointer; text-align: left;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); color: var(--light, #f3f4fa);
}
.volt-cx-coin:hover { border-color: rgba(var(--gold-rgb, 240,178,74), .5); background: rgba(var(--gold-rgb, 240,178,74), .07); }
.volt-cx-coin b { font: 700 .92rem/1 var(--font-cond, inherit); letter-spacing: .04em; }
.volt-cx-coin span { font-size: .72rem; color: var(--muted, #a7adc4); }
.volt-cx-amount { text-align: center; padding: .9rem; border-radius: 14px; background: rgba(var(--gold-rgb, 240,178,74), .08); border: 1px solid rgba(var(--gold-rgb, 240,178,74), .35); margin-bottom: .7rem; }
.volt-cx-amount .lbl { font: 700 .66rem/1 var(--font-cond, inherit); letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #a7adc4); }
.volt-cx-amount .val { font: 700 1.55rem/1.15 var(--font-mono, monospace); color: var(--light, #f3f4fa); margin: .35rem 0 .15rem; word-break: break-all; }
.volt-cx-amount .sub { font-size: .74rem; color: var(--muted, #a7adc4); }
.volt-cx-warn { display: flex; gap: .55rem; align-items: flex-start; padding: .7rem .8rem; border-radius: 12px; margin-bottom: .7rem; background: color-mix(in oklab, var(--red, #ff6b6b) 9%, transparent); border: 1px solid color-mix(in oklab, var(--red, #ff6b6b) 35%, transparent); color: var(--light, #f3f4fa); font-size: .8rem; line-height: 1.5; }
.volt-cx-addr { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center; padding: .7rem .8rem; border-radius: 12px; background: var(--dark3, #14151f); border: 1px solid rgba(255,255,255,.08); margin-bottom: .7rem; }
.volt-cx-addr code { font: 500 .8rem/1.4 var(--font-mono, monospace); color: var(--light, #f3f4fa); word-break: break-all; }
.volt-cx-qr { display: flex; justify-content: center; margin: .2rem 0 .8rem; }
.volt-cx-qr img { width: 196px; height: 196px; border-radius: 12px; background: #fff; padding: 6px; image-rendering: pixelated; }
.volt-cx-status { display: flex; align-items: center; gap: .6rem; padding: .75rem .85rem; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); margin-bottom: .7rem; font-size: .86rem; }
.volt-cx-status.ok { border-color: color-mix(in oklab, var(--mint, #4aca78) 50%, transparent); color: var(--mint, #4aca78); }
.volt-cx-spin { width: 16px; height: 16px; flex: 0 0 16px; border-radius: 50%; border: 2px solid rgba(var(--gold-rgb, 240,178,74), .25); border-top-color: var(--gold, #f0b24a); animation: voltSpin .9s linear infinite; }
@keyframes voltSpin { to { transform: rotate(360deg); } }
.volt-cx-meta { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; font-size: .74rem; color: var(--muted, #a7adc4); margin-bottom: .7rem; }
.volt-cx-tx summary { cursor: pointer; color: var(--gold, #f0b24a); font: 700 .74rem/1 var(--font-cond, inherit); letter-spacing: .06em; text-transform: uppercase; padding: .5rem 0; }
.volt-cx-tx .volts-row { margin-top: .4rem; }
.volt-cx-msg { font-size: .78rem; color: var(--muted, #a7adc4); margin-top: .45rem; line-height: 1.5; }

/* ── Coach admin ── */
.volts-admin-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.volts-stat { padding: .85rem; border-radius: 14px; background: var(--dark2, #0d0e16); border: 1px solid rgba(255,255,255,.07); }
.volts-stat b { display: block; font: 400 1.6rem/1 var(--font-display, inherit); color: var(--light, #f3f4fa); }
.volts-stat span { font: 700 .64rem/1.3 var(--font-cond, inherit); letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #a7adc4); }
.volts-wallet { padding: .9rem; border-radius: 14px; background: var(--dark2, #0d0e16); border: 1px solid rgba(255,255,255,.07); margin-bottom: .6rem; }
.volts-wallet-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.volts-wallet-name { font-weight: 700; color: var(--light, #f3f4fa); font-size: .92rem; }
.volts-toggle { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--muted, #a7adc4); cursor: pointer; }
.volts-toggle input { width: 18px; height: 18px; accent-color: var(--gold, #f0b24a); }
.volts-assets { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: .55rem; }
.volts-table-row { display: grid; grid-template-columns: 1fr auto; gap: .25rem .75rem; padding: .65rem 0; border-top: 1px solid rgba(255,255,255,.06); font-size: .82rem; }
.volts-table-row:first-child { border-top: 0; }
.volts-mono { font-family: var(--font-mono, monospace); font-size: .74rem; word-break: break-all; color: var(--muted, #a7adc4); }
.volts-safety { padding: .8rem .9rem; border-radius: 12px; margin-bottom: .8rem; background: rgba(var(--gold-rgb, 240,178,74), .08); border: 1px solid rgba(var(--gold-rgb, 240,178,74), .35); font-size: .8rem; line-height: 1.55; color: var(--light, #f3f4fa); }

@media (max-width: 480px) {
  .volts-bal .n { font-size: 2.6rem; }
  .volts-table-row { grid-template-columns: 1fr; }
  .volts-table-row > .volts-row { justify-content: flex-start; }
  .volts-tab { font-size: .7rem; letter-spacing: .03em; }
  .volt-cx-coins { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .volt-chip.volt-pulse { animation: none; }
  .volt-cx-spin { animation-duration: 2.4s; }
}

/* Shown while Volts is switched off for this member */
.volts-soon { text-align: center; padding: 1.6rem 1.2rem; }
.volts-soon-bolt { font-size: 2rem; line-height: 1; margin-bottom: .5rem; }
.volts-soon-title { font-weight: 800; font-size: 1.1rem; letter-spacing: .02em; margin-bottom: .45rem; color: var(--gold, #f0b24a); }