:root {
  --funding-panel: #10182a;
  --funding-deep: #07111f;
  --funding-line: #293653;
  --funding-muted: #9ba9c6;
  --funding-cyan: #43ddff;
  --funding-green: #45f0a8;
  --funding-amber: #ffbc35;
  --funding-purple: #8b63ff;
}

.donation-tiers-page { padding: clamp(14px, 2.2vw, 30px); }
.funding-runway { overflow: hidden; border: 1px solid var(--funding-line); border-radius: 22px; background: linear-gradient(#07111f, #081a2b); }
.funding-intro { padding: 22px 26px; border-bottom: 1px solid var(--funding-line); }
.funding-intro > span,
.custom-donation > div > span { color: var(--funding-amber); font: 800 11px ui-monospace, monospace; letter-spacing: .18em; text-transform: uppercase; }
.funding-intro h1 { margin: 5px 0; color: #f5f7ff; font-size: clamp(25px, 3vw, 42px); }
.funding-intro p,
.custom-donation p { max-width: 790px; margin: 0; color: var(--funding-muted); line-height: 1.55; }
.funding-content { padding: 24px; }
.funding-card { border: 1px solid var(--funding-line); border-radius: 16px; background: rgba(8,13,25,.62); }

.runway { position: relative; min-height: 180px; margin: 18px 10px 38px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; }
.runway::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 8px; transform: translateY(-50%); border-radius: 99px; background: #1d2e46; }
.run-marker { position: relative; z-index: 1; display: grid; place-items: center; text-align: center; }
.run-marker i { width: 28px; height: 28px; border: 6px solid var(--funding-deep); border-radius: 50%; background: var(--funding-cyan); box-shadow: 0 0 0 2px var(--funding-cyan); }
.run-marker b { margin-top: 12px; color: #f5f7ff; }
.run-marker span { color: var(--funding-muted); font-size: 11px; }
.run-marker.premium i { background: var(--funding-purple); box-shadow: 0 0 0 2px var(--funding-purple); }
.run-marker.elite i { background: var(--funding-amber); box-shadow: 0 0 0 2px var(--funding-amber), 0 0 26px var(--funding-amber); }

.runway-bottom { display: grid; grid-template-columns: .8fr 1.2fr; gap: 18px; }
.cost-list { display: grid; gap: 1px; overflow: hidden; align-self: start; }
.cost-row { display: flex; justify-content: space-between; gap: 16px; padding: 15px 17px; background: rgba(17,25,43,.92); }
.cost-row span { color: var(--funding-muted); }
.cost-row strong { color: #f5f7ff; white-space: nowrap; }
.cost-row.total { color: var(--funding-amber); background: rgba(255,188,53,.08); }
.cost-row.total span,
.cost-row.total strong { color: inherit; font-weight: 800; }

.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tier { position: relative; min-width: 0; padding: 20px; overflow: hidden; }
.tier::after { content: ""; position: absolute; width: 140px; height: 140px; border-radius: 50%; right: -65px; top: -70px; background: currentColor; opacity: .08; }
.tier .role { display: inline-flex; padding: 5px 9px; border: 1px solid currentColor; border-radius: 99px; font: 800 10px ui-monospace, monospace; text-transform: uppercase; }
.tier .amount { display: block; margin: 13px 0 3px; font-size: clamp(24px, 2vw, 30px); line-height: 1; }
.tier h2 { margin: 24px 0 0; font-size: 20px; }
.tier ul { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; color: var(--funding-muted); font-size: 13px; line-height: 1.4; }
.tier li::before { content: "✓"; margin-right: 8px; color: var(--funding-green); font-weight: 900; }
.tier-donator { color: var(--funding-cyan); }
.tier-premium { color: var(--funding-purple); }
.tier-elite { color: var(--funding-amber); border-color: rgba(255,188,53,.55); }
.tier h2,
.tier li { color: #f5f7ff; }
.tier li { color: var(--funding-muted); }

.custom-donation { display: grid; grid-template-columns: minmax(0,1fr) minmax(340px,.72fr); gap: 24px; align-items: center; margin-top: 18px; padding: 22px; border-color: rgba(255,188,53,.42); background: radial-gradient(circle at 92% 0%, rgba(255,188,53,.13), transparent 18rem), linear-gradient(115deg, rgba(67,221,255,.055), rgba(8,13,25,.82)); }
.custom-donation h2 { margin: 7px 0 6px; color: #f5f7ff; font-size: clamp(23px, 2.8vw, 36px); }
.custom-donation form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px; align-items: end; }
.custom-donation label { display: grid; gap: 7px; color: var(--funding-muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.amount-field { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; min-height: 48px; overflow: hidden; border: 1px solid var(--funding-line); border-radius: 11px; background: #070d18; }
.amount-field:focus-within { border-color: var(--funding-amber); box-shadow: 0 0 0 3px rgba(255,188,53,.1); }
.amount-field input { min-width: 0; width: 100%; height: 46px; padding: 10px 13px; border: 0; outline: 0; color: #f5f7ff; background: transparent; font: 900 20px ui-monospace, monospace; }
.amount-field b { align-self: stretch; display: grid; place-items: center; min-width: 68px; padding: 0 12px; border-left: 1px solid var(--funding-line); color: var(--funding-amber); background: rgba(255,188,53,.06); font: 900 12px ui-monospace, monospace; }
.custom-donation button { min-height: 48px; padding: 0 18px; border: 1px solid var(--funding-amber); border-radius: 11px; color: #11151e; background: var(--funding-amber); font-size: 12px; font-weight: 900; cursor: pointer; white-space: nowrap; }
.custom-donation button:hover { background: #ffd06a; }
.donation-feedback { grid-column: 1 / -1; min-height: 18px; margin: 0 !important; font-size: 11px; }
.donation-feedback.error { color: #ff8e86; }

@media (max-width: 1180px) {
  .runway-bottom,
  .custom-donation { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .donation-tiers-page { padding: 12px; }
  .funding-runway { border-radius: 16px; }
  .funding-intro,
  .funding-content { padding: 16px; }
  .runway { overflow-x: auto; grid-template-columns: repeat(5, 130px); justify-content: start; }
  .tiers { grid-template-columns: 1fr; }
  .custom-donation form { grid-template-columns: 1fr; }
  .custom-donation button { width: 100%; }
  .donation-feedback { grid-column: auto; }
}