:root {
  --bg: #0a0611;
  --bg2: #130b22;
  --card: #170e29;
  --card2: #1d1233;
  --line: #2b1d47;
  --violet: #8b5cf6;
  --violet2: #a855f7;
  --violet-soft: #c4b5fd;
  --text: #efeaf7;
  --muted: #a99fc4;
  --gold: #f5c451;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: "Manrope", system-ui, sans-serif;
  background:
    radial-gradient(900px 500px at 50% -10%, rgba(139,92,246,.22), transparent 60%),
    var(--bg);
  color: var(--text);
  min-height: 100vh;
  padding: 0 16px calc(28px + env(safe-area-inset-bottom));
}

.hero { text-align: center; padding: 26px 0 18px; }
.wordmark {
  font-family: "Unbounded", sans-serif;
  font-weight: 800;
  font-size: 40px;
  letter-spacing: 4px;
  background: linear-gradient(120deg, #fff, var(--violet-soft) 55%, var(--violet2));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 26px rgba(139,92,246,.5));
}
.tagline { margin: 8px 0 0; color: var(--muted); font-size: 14px; }

.catalog { display: flex; flex-direction: column; gap: 14px; max-width: 560px; margin: 6px auto 0; }
.loading { text-align: center; color: var(--muted); padding: 40px 0; }

.card {
  background: linear-gradient(180deg, var(--card2), var(--card));
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.card h3 {
  font-family: "Unbounded", sans-serif;
  font-weight: 600;
  font-size: 19px;
  margin: 0 0 6px;
}
.card p.desc { margin: 0 0 14px; color: var(--muted); font-size: 14px; line-height: 1.5; }

.price-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tag {
  font-size: 13px; font-weight: 700;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(139,92,246,.14); color: var(--violet-soft);
  border: 1px solid var(--line);
}
.tag.free { background: rgba(245,196,81,.14); color: var(--gold); border-color: rgba(245,196,81,.3); }

.btns { display: flex; flex-direction: column; gap: 9px; }
button.buy {
  border: 0; border-radius: 14px; padding: 13px 14px;
  font-family: "Manrope", sans-serif; font-weight: 700; font-size: 15px;
  color: #fff; cursor: pointer;
  background: linear-gradient(120deg, var(--violet), var(--violet2));
  box-shadow: 0 6px 18px rgba(139,92,246,.35);
  transition: transform .08s ease, filter .15s ease;
}
button.buy:active { transform: translateY(1px) scale(.99); }
button.buy.alt { background: #241638; color: var(--violet-soft); border: 1px solid var(--line); box-shadow: none; }
button.buy.gold { background: linear-gradient(120deg, #f5c451, #e0a92e); color: #241600; box-shadow: 0 6px 18px rgba(245,196,81,.3); }

.foot { text-align: center; color: var(--muted); font-size: 12px; margin: 22px auto 0; max-width: 520px; line-height: 1.5; }

/* модалка */
.modal { position: fixed; inset: 0; background: rgba(6,3,12,.78); display: flex; align-items: center; justify-content: center; padding: 18px; z-index: 50; backdrop-filter: blur(4px); }
.modal.hidden { display: none; }
.modal__box { position: relative; width: 100%; max-width: 440px; background: linear-gradient(180deg, var(--card2), var(--card)); border: 1px solid var(--line); border-radius: 20px; padding: 22px; }
.modal__box h3 { font-family: "Unbounded", sans-serif; font-weight: 600; margin: 0 0 12px; }
.modal__close { position: absolute; top: 12px; right: 12px; background: #241638; border: 1px solid var(--line); color: var(--muted); width: 32px; height: 32px; border-radius: 10px; font-size: 15px; cursor: pointer; }
.muted { color: var(--muted); font-size: 14px; margin: 12px 0 6px; }
.warn { color: var(--gold); font-size: 13px; line-height: 1.5; margin: 14px 0 0; }
.copyrow { display: flex; gap: 8px; align-items: stretch; }
.copyrow code { flex: 1; background: #0e0819; border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; font-size: 15px; color: #fff; overflow-wrap: anywhere; }
.copyrow code.addr { font-size: 12.5px; }
.copy { border: 1px solid var(--line); background: #241638; color: var(--violet-soft); border-radius: 12px; padding: 0 14px; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; }
.cxstatus { margin-top: 16px; text-align: center; font-weight: 700; padding: 12px; border-radius: 12px; background: rgba(139,92,246,.12); border: 1px solid var(--line); }
.cxstatus.paid { background: rgba(80,220,120,.15); border-color: rgba(80,220,120,.4); color: #7ee0a0; }
.cxcancel { width: 100%; margin-top: 12px; }
.qr { display: flex; justify-content: center; margin: 16px 0 8px; }
.qr img, .qr canvas { background: #fff; padding: 10px; border-radius: 14px; display: block; }
.qr-hint { text-align: center; color: var(--muted); font-size: 12.5px; margin: 0 0 4px; line-height: 1.5; }