:root{
  --bg:#f4f7fb;
  --card:rgba(15, 23, 42, 0.42);
  --text:#0f172a;
  --muted:#d7e1f4;
  --line:rgba(203, 213, 225, 0.36);
  --accent:#0a84ff;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{
  margin:0;
  font-family:"SF Pro Display","Segoe UI",sans-serif;
  color:var(--text);
  background:
    linear-gradient(180deg, rgba(8, 10, 26, 0.68), rgba(8, 10, 26, 0.78)),
    url("store-bg.png") center/cover fixed no-repeat;
}
.donate-shell,.thanks-shell{max-width:1080px;margin:28px auto;padding:0 16px;display:grid;gap:18px}
.hero,.card,.thanks-card{
  border:1px solid var(--line);
  border-radius:28px;
  background:var(--card);
  backdrop-filter:blur(18px);
  box-shadow:0 14px 40px rgba(2, 6, 23, .45);
}
.hero{position:relative;overflow:hidden;min-height:340px}
.hero-svg{width:100%;height:100%;position:absolute;inset:0}
.hero-photo{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(7,10,20,.28), rgba(7,10,20,.62)),
    url("hero-cover.png") center/cover no-repeat;
  z-index:0;
}
.hero-content{position:relative;z-index:1;padding:28px}
.eyebrow{letter-spacing:.14em;font-weight:700;font-size:.76rem;color:#0a84ff}
.hero-content h1,.hero-content p{color:#eef4ff}
h1,h2,h3{margin:0 0 10px}
p{margin:0 0 8px}
.card{padding:22px}
.card h2,.card h3,.card p,.card label,.cart-total{color:#f8fbff}
.muted{color:var(--muted)}
.slider-wrap{display:grid;gap:10px}
input[type=range]{width:100%}
.price strong{font-size:1.2rem}
.grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.donate-tier{
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  background:rgba(10, 16, 34, 0.48);
  cursor:pointer;
}
.tier-icon{width:34px;height:34px;fill:#0a84ff}
.donate-tier .tier-icon{display:block}
.tier-image{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:14px;
  border:1px solid rgba(186, 167, 255, 0.5);
  margin-bottom:10px;
}
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(2, 6, 23, .66);
  backdrop-filter:blur(6px);
  z-index:1000;
  display:grid;
  place-items:center;
  padding:16px;
}
.donate-modal{
  width:min(920px, 96vw);
  border:1px solid var(--line);
  border-radius:24px;
  background:rgba(10,16,34,.88);
  color:#f8fbff;
  padding:20px;
  position:relative;
}
.modal-close{
  position:absolute;
  top:10px;
  right:10px;
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(15,23,42,.8);
}
.modal-layout{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:18px;
  align-items:center;
}
.modal-media img,.modal-media svg{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(186,167,255,.45);
}
.modal-price{
  font-size:1.25rem;
  font-weight:800;
  margin:10px 0 14px;
}
@media (max-width: 760px){
  .modal-layout{grid-template-columns:1fr}
}
.pay-form{display:grid;gap:12px}
.ghost-btn{
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  background:rgba(15, 23, 42, 0.62);
  color:#f8fbff;
  font-weight:600;
}
.add-cart-btn{
  width:100%;
  border:1px solid #bfdbfe;
  border-radius:12px;
  padding:10px 12px;
  background:#eff6ff;
  color:#1e3a8a;
  font-weight:700;
}
.cart-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.clear-btn{
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 12px;
  background:rgba(15, 23, 42, 0.58);
  color:#f1f5f9;
}
.cart-items{display:grid;gap:10px;margin-bottom:12px}
.cart-item{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(15, 23, 42, 0.5);color:#f8fbff;
}
.cart-total{margin-bottom:12px;font-size:1.05rem}
label{display:grid;gap:6px;font-weight:600}
input{
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  font-size:1rem;
  background:rgba(15,23,42,.54);
  color:#f8fbff;
}
button{
  border:0;
  border-radius:14px;
  background:linear-gradient(135deg,#0a84ff,#2563eb);
  color:#fff;
  font-weight:700;
  padding:12px 16px;
  cursor:pointer;
}
.thanks-shell{min-height:100vh;align-content:center}
.thanks-card{padding:28px;text-align:center}
.thanks-card h1,.thanks-card p,.thanks-card strong{color:#f8fbff}
.thanks-card a{color:#93c5fd}
a{color:#0a84ff;text-decoration:none;font-weight:600}