/* Coin shop. Accent colors come from the site theme variables (--a / --al /
   --ad / --ar), so the page follows the theme picker. The coin icon itself is
   the shared #coin sprite injected by /assets/js/coins-ui.js. */
.sp {
  --sp-panel: rgba(15, 23, 42, .72);
  --sp-panel2: rgba(30, 41, 59, .5);
  --sp-line: #2a364d;
  --sp-text: #e2e8f0;
  --sp-muted: #94a3b8;
  --sp-good: #34d399;
  --sp-bad: #f87171;
  --sp-gold: #fbbf24;
  max-width: 940px;
  margin: 0 auto;
  padding: 104px 16px 64px;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--sp-text);
}
.sp *, .sp *::before, .sp *::after { box-sizing: border-box; }
.sp button { font: inherit; color: inherit; cursor: pointer; }
.sp :focus-visible { outline: 2px solid var(--al); outline-offset: 2px; }
.sp-num, .sp .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.sp svg.coin { width: 1em; height: 1em; vertical-align: -.16em; flex-shrink: 0; }

.sp-head h1 { margin: 0 0 6px; font-size: 30px; font-weight: 800; letter-spacing: -.01em; }
.sp-head p { margin: 0 0 22px; color: var(--sp-muted); }

.sp-msg { margin-bottom: 14px; padding: 11px 14px; border-radius: 12px; font-size: 14px; border: 1px solid var(--sp-line); background: var(--sp-panel); }
.sp-msg.ok { border-color: rgba(52, 211, 153, .5); color: var(--sp-good); }
.sp-msg.err { border-color: rgba(248, 113, 113, .5); color: var(--sp-bad); }

.sp-card { border: 1px solid var(--sp-line); background: var(--sp-panel); border-radius: 16px; padding: 18px; }
.sp-card h2 { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--sp-muted); }

/* hero: balance, streak, claim */
.sp-hero {
  position: relative; overflow: hidden; padding: 22px; border-radius: 20px; border: 1px solid rgba(var(--ar), .45);
  background:
    radial-gradient(500px 220px at 90% -20%, rgba(245, 158, 11, .2), transparent 60%),
    radial-gradient(520px 260px at 0% 0%, rgba(var(--ar), .28), transparent 60%),
    var(--sp-panel);
}
.sp-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sp-label { color: var(--sp-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sp-bal { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.sp-bal svg.coin { font-size: 50px; filter: drop-shadow(0 4px 12px rgba(245, 158, 11, .4)); }
.sp-max { color: var(--sp-muted); font-size: 12px; margin-top: 6px; }
.sp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 230px; flex: 1; max-width: 340px; }
.sp-stat { border: 1px solid var(--sp-line); background: var(--sp-panel2); border-radius: 12px; padding: 10px 12px; }
.sp-stat b { display: block; font-size: 17px; font-family: 'JetBrains Mono', monospace; }
.sp-stat span { color: var(--sp-muted); font-size: 12px; }

.sp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 18px 0 14px; }
.sp-day { border: 1px solid var(--sp-line); border-radius: 10px; padding: 7px 0 6px; text-align: center; background: var(--sp-panel2); }
.sp-day small { display: block; font-size: 10px; color: var(--sp-muted); letter-spacing: .04em; text-transform: uppercase; }
.sp-day b { font-size: 13px; font-family: 'JetBrains Mono', monospace; }
.sp-day.done { border-color: rgba(var(--ar), .55); background: rgba(var(--ar), .16); }
.sp-day.now { border-color: var(--sp-gold); box-shadow: 0 0 0 2px rgba(245, 158, 11, .25); }

.sp-btn {
  width: 100%; height: 46px; border: 0; border-radius: 10px; color: #fff; font-weight: 700; font-size: 14px;
  background: linear-gradient(135deg, var(--al), var(--ad)); box-shadow: 0 6px 18px -6px rgba(var(--ar), .7);
  display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; transition: transform .12s, filter .12s;
}
.sp-btn:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.sp-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* sections + items */
.sp-sec { margin: 30px 0 12px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sp-sec h2 { margin: 0; font-size: 18px; font-weight: 800; }
.sp-sec span { color: var(--sp-muted); font-size: 13px; }
.sp-meter { height: 6px; border-radius: 999px; background: var(--sp-line); overflow: hidden; margin: -4px 0 12px; }
.sp-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--al), #38bdf8); }
.sp-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .sp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .sp-grid.three { grid-template-columns: repeat(3, 1fr); } }
.sp-item { position: relative; border: 1px solid var(--sp-line); background: var(--sp-panel); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; transition: border-color .15s, transform .15s; }
.sp-item:hover { border-color: rgba(var(--ar), .6); transform: translateY(-2px); }
.sp-ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--ar), .16); color: var(--al); font-size: 20px; }
.sp-ico.bolt { background: rgba(56, 189, 248, .15); color: #38bdf8; }
.sp-big { font-size: 26px; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.sp-big small { font-size: 13px; font-weight: 600; color: var(--sp-muted); margin-left: 4px; }
.sp-item p { margin: 0; color: var(--sp-muted); font-size: 13px; flex: 1; }
.sp-tag { position: absolute; top: 12px; right: 12px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: rgba(245, 158, 11, .18); color: var(--sp-gold); border: 1px solid rgba(245, 158, 11, .4); }
.sp-price { display: flex; align-items: center; gap: 7px; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 16px; }
.sp-item .sp-btn { height: 42px; }

/* earn + activity */
.sp-earn { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .sp-earn { grid-template-columns: repeat(3, 1fr); } }
.sp-e { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--sp-line); background: var(--sp-panel2); border-radius: 12px; padding: 12px; }
.sp-e .sp-ico { width: 36px; height: 36px; border-radius: 10px; font-size: 17px; }
.sp-e b { display: block; font-size: 14px; }
.sp-e span { display: block; font-size: 12px; color: var(--sp-muted); }
.sp-e .amt { color: var(--sp-good); font-family: 'JetBrains Mono', monospace; font-weight: 700; margin-top: 3px; }
.sp-note { color: var(--sp-muted); font-size: 12px; margin: 10px 0 0; }
.sp-note a { text-decoration: underline; }

.sp-hist .sp-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--sp-line); font-size: 14px; }
.sp-hist .sp-row:last-child { border-bottom: 0; }
.sp-row small { display: block; color: var(--sp-muted); font-size: 12px; }
.sp-amt { font-family: 'JetBrains Mono', monospace; font-weight: 700; white-space: nowrap; }
.sp-amt.plus { color: var(--sp-good); }
.sp-amt.minus { color: var(--sp-bad); }
.sp-empty { color: var(--sp-muted); font-size: 14px; margin: 0; }

.sp-loading { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--sp-muted); padding: 56px 0; }
.sp-spin { width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, .2); border-top-color: var(--al); border-radius: 50%; animation: sp-r .7s linear infinite; display: inline-block; }
@keyframes sp-r { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sp-spin { animation: none; } .sp-item, .sp-btn { transition: none; } }
@media (max-width: 520px) { .sp-head h1 { font-size: 24px; } .sp-bal { font-size: 40px; } .sp-bal svg.coin { font-size: 38px; } }

/* =====================================================================
   Mockup styling: centered gradient title, wallet, streak tiles, pack cards
   ===================================================================== */
.sp{max-width:1080px;font-family:var(--font-b),'Inter',system-ui,sans-serif;--sp-panel:transparent;--sp-panel2:var(--surface,rgba(255,255,255,.04));--sp-line:var(--line,rgba(255,255,255,.08))}
.sp-num,.sp .mono,.sp-stat b,.sp-day b,.sp-price,.sp-amt,.sp-e .amt{font-family:var(--font-h),ui-monospace,monospace}
.sp-head{text-align:center;margin-bottom:30px}
.sp-head h1{font-family:var(--font-h);font-size:clamp(2.2rem,5vw,3.2rem);letter-spacing:-.03em;line-height:1.1;margin:0;background:linear-gradient(120deg,var(--txt,#e8eaf0) 5%,var(--al) 55%,var(--a));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sp-head p{margin:10px 0 0;font-size:1.02rem}

.sp-card,.sp-item{background:linear-gradient(180deg,var(--surface,rgba(255,255,255,.04)),transparent);border-radius:20px}
.sp-card{padding:22px}
.sp-card h2{font-family:var(--font-h);font-size:1.05rem;text-transform:none;letter-spacing:0;color:var(--txt,#e8eaf0)}

/* wallet hero */
.sp-hero{padding:28px;border-radius:24px;border-color:rgba(var(--ar),.35);
  background:radial-gradient(500px 220px at 15% 0,rgba(var(--ar),.25),transparent 70%),var(--surface,rgba(255,255,255,.04))}
.sp-label{font-size:.72rem;letter-spacing:.1em}
.sp-bal{font-family:var(--font-h);font-size:3rem;letter-spacing:-.03em}
.sp-bal svg.coin{font-size:2.6rem}
.sp-stats{gap:12px}
.sp-stat{border-radius:14px;padding:12px 18px}
.sp-stat b{font-size:1.2rem}
.sp-days{gap:8px;margin:24px 0 20px}
.sp-day{border-radius:12px;padding:10px 4px}
.sp-day.done{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.3)}
.sp-day.now{border-color:var(--al);background:rgba(var(--ar),.14);box-shadow:0 0 0 3px rgba(var(--ar),.25)}
.sp-btn{border-radius:12px;font-family:var(--font-b)}

/* sections */
.sp-sec{margin:38px 0 14px}
.sp-sec h2{font-family:var(--font-h);font-size:1.4rem;letter-spacing:-.02em}
.sp-grid{gap:16px}

/* pack + boost cards */
.sp-item{padding:26px 22px;transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.sp-item:hover{transform:translateY(-5px);border-color:rgba(var(--ar),.45);box-shadow:0 22px 46px -24px rgba(var(--ar),.55)}
.sp-ico{width:46px;height:46px;border-radius:14px;border:1px solid rgba(var(--ar),.3)}
.sp-ico.bolt{border-color:rgba(56,189,248,.3)}
.sp-big{font-family:var(--font-h);font-size:2.2rem;letter-spacing:-.02em;margin-top:6px}
.sp-tag{background:linear-gradient(135deg,var(--a),var(--al))!important;color:#fff!important;border:0!important;letter-spacing:.04em;text-transform:none;font-size:.68rem}
.sp-item .sp-btn{height:42px;border-radius:11px}
.sp-e{border-radius:16px;padding:16px}

/* history */
.sp-hist .sp-row{padding:13px 0}

@media(max-width:520px){.sp-bal{font-size:2.4rem}.sp-days{gap:5px}}