:root {
  --funding-panel: #10182a;
  --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); }
.premium-wizard-recovery { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: center; margin: 0 0 18px; padding: 20px 22px; border: 1px solid rgba(255,188,53,.52); border-radius: 16px; background: radial-gradient(circle at 92% 0, rgba(255,188,53,.16), transparent 22rem), #0c1929; }
.premium-wizard-recovery[hidden] { display: none !important; }
.premium-wizard-recovery span { color: var(--funding-amber); font: 900 10px ui-monospace, monospace; letter-spacing: .15em; }
.premium-wizard-recovery h2 { margin: 5px 0 4px; color: #f5f7ff; font-size: clamp(20px, 2.3vw, 29px); }
.premium-wizard-recovery p { max-width: 760px; margin: 0; color: var(--funding-muted); line-height: 1.5; }
.premium-wizard-recovery-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: flex-end; }
.premium-wizard-recovery-actions button,
.premium-wizard-recovery-actions a { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 0 15px; border: 1px solid var(--funding-amber); border-radius: 10px; color: #10151e; background: var(--funding-amber); font-size: 12px; font-weight: 900; text-decoration: none; cursor: pointer; }
.premium-wizard-recovery-actions button.danger { border-color: #ff756d; color: #fff; background: #7c2427; }
.premium-wizard-recovery-actions a { border-color: #38506c; color: #f5f7ff; background: #101d2d; }
.premium-wizard-recovery-status { grid-column: 1 / -1; min-height: 18px; font-size: 12px; }
.premium-wizard-recovery-status[data-tone="ready"] { color: var(--funding-green); }
.premium-wizard-recovery-status[data-tone="error"] { color: #ff8e86; }
.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-bottom { display: grid; grid-template-columns: .95fr 1.2fr; gap: 18px; align-items: start; }
.developer-cost-showcase { min-width: 0; padding: 10px; overflow: hidden; border: 1px solid rgba(255,188,53,.32); border-radius: 18px; background: linear-gradient(145deg, #161710, #0b1724 48%, #121a29); }
.developer-cost-scene { position: relative; min-height: 270px; overflow: hidden; border-radius: 11px 11px 0 0; background: #07111f; }
.developer-cost-scene::after { position: absolute; inset: auto 0 0; height: 48%; content: ""; background: linear-gradient(transparent, rgba(7,13,24,.94)); pointer-events: none; }
.developer-cost-scene img { display: block; width: 100%; height: 100%; min-height: 270px; object-fit: cover; object-position: 56% center; }
.developer-live-status { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid rgba(69,240,168,.35); border-radius: 99px; color: #b9f9d8; background: rgba(5,22,26,.8); font: 900 9px ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; backdrop-filter: blur(10px); }
.developer-live-status::before { width: 7px; height: 7px; border-radius: 50%; content: ""; background: var(--funding-green); box-shadow: 0 0 12px rgba(69,240,168,.85); }
.developer-scene-caption { position: absolute; right: 17px; bottom: 16px; left: 17px; z-index: 2; display: grid; gap: 4px; }
.developer-scene-caption strong { color: #f5f7ff; font-size: clamp(17px, 2vw, 24px); line-height: 1.08; letter-spacing: -.025em; }
.developer-scene-caption span { color: #b9c5da; font: 800 9px ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase; }
.cost-list { display: grid; gap: 0; overflow: hidden; align-self: start; }
.developer-receipt { border: 0; border-radius: 0 0 11px 11px; background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 28px), #17202e; }
.developer-receipt-heading { display: flex; gap: 12px; justify-content: space-between; margin: 0 16px; padding: 15px 0 13px; border-bottom: 1px dashed rgba(255,255,255,.22); color: var(--funding-amber); font: 900 9px ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase; }
.cost-row { display: flex; justify-content: space-between; gap: 16px; padding: 13px 16px; background: transparent; font: 800 11px ui-monospace, monospace; }
.developer-receipt .cost-row:not(.total) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; }
.developer-receipt .cost-row:not(.total)::before { content: attr(data-index) " /"; color: #8290a8; }
.cost-row span { color: var(--funding-muted); }
.cost-row strong { color: #f5f7ff; white-space: nowrap; }
.cost-row.total { margin: 8px 16px 0; padding: 16px 0; border-top: 1px dashed rgba(255,255,255,.24); color: var(--funding-amber); background: transparent; font-size: 12px; }
.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-labels { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.founder-discount-label { display: inline-flex; padding: 5px 9px; border: 1px solid var(--funding-green); border-radius: 99px; color: #06150f; background: var(--funding-green); font: 900 10px ui-monospace, monospace; text-transform: uppercase; }
.founder-price { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; align-items: end; min-height: 45px; margin-top: 12px; }
.founder-price .amount { margin: 0; }
.founder-price s { padding-bottom: 2px; color: var(--funding-muted); font: 800 14px ui-monospace, monospace; text-decoration-color: #ff756d; text-decoration-thickness: 2px; }
.lifetime-access { position: relative; z-index: 1; display: grid; gap: 2px; margin-top: 10px; padding: 9px 11px; border: 1px solid currentColor; border-radius: 10px; background: rgba(255,255,255,.045); box-shadow: inset 0 0 18px rgba(255,255,255,.025); }
.lifetime-access strong { color: currentColor; font: 900 12px ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; }
.lifetime-access span { color: #f5f7ff; font-size: 11px; font-weight: 800; }
.founder-spots { position: relative; z-index: 1; display: inline-flex; gap: 5px; margin-top: 10px; padding: 6px 9px; border: 1px solid rgba(69,240,168,.35); border-radius: 8px; color: #b9f9d8; background: rgba(69,240,168,.07); font: 800 10px ui-monospace, monospace; text-transform: uppercase; }
.founder-spots b { color: var(--funding-green); }
.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); }
.tier:has(.founder-spots:not([hidden])) h2 { margin-top: 15px; }
.founder-offer-note { grid-column: 1 / -1; margin: 0; padding: 10px 12px; border: 1px solid rgba(69,240,168,.24); border-radius: 10px; color: var(--funding-muted); background: rgba(69,240,168,.045); font-size: 11px; line-height: 1.45; }
.founder-offer-note strong { color: var(--funding-green); }
.founder-offer-note.offer-ended { border-color: var(--funding-line); background: rgba(17,25,43,.55); }

.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 select { align-self: stretch; min-width: 82px; padding: 0 10px; border: 0; border-left: 1px solid var(--funding-line); outline: 0; color: var(--funding-amber); background: rgba(255,188,53,.06); font: 900 12px ui-monospace, monospace; cursor: pointer; }
.amount-field select:focus-visible { background: rgba(255,188,53,.13); }
.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; }
  .premium-wizard-recovery { grid-template-columns: 1fr; padding: 17px; }
  .premium-wizard-recovery-actions { justify-content: stretch; }
  .premium-wizard-recovery-actions button,
  .premium-wizard-recovery-actions a { width: 100%; }
  .funding-runway { border-radius: 16px; }
  .funding-intro,
  .funding-content { padding: 16px; }
  .tiers { grid-template-columns: 1fr; }
  .custom-donation form { grid-template-columns: 1fr; }
  .custom-donation button { width: 100%; }
  .donation-feedback { grid-column: auto; }
  .developer-cost-showcase { padding: 7px; border-radius: 14px; }
  .developer-cost-scene,
  .developer-cost-scene img { min-height: 235px; }
  .developer-cost-scene img { object-position: 60% center; }
  .developer-receipt-heading { align-items: flex-start; flex-direction: column; }
  .cost-row { gap: 9px; font-size: 10px; }
  .developer-receipt .cost-row span { max-width: none; }
}