:root{
  --bg:#0a0a12; --panel:#141a2e; --panel2:#0f1424; --line:#2b3660;
  --gold:#ffd457; --gold-dk:#8a5c00; --ink:#e8eefc; --dim:#9fb0d0; --faint:#7c8bb0;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; }
body{
  background: radial-gradient(120% 90% at 50% -10%, #1a2340 0%, var(--bg) 55%) no-repeat, var(--bg);
  color:var(--ink); font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
  min-height:100%; -webkit-text-size-adjust:100%;
}
.donate{ max-width:1080px; margin:0 auto; padding:22px 18px 48px; }
.home{ display:inline-block; color:var(--dim); text-decoration:none; font-size:14px; padding:6px 0; }
.home:hover{ color:var(--gold); }

.hero{ text-align:center; padding:6px 0 20px; }
.hero .logo{ display:block; width:min(70%,320px); height:auto; margin:0 auto 6px;
  filter:drop-shadow(0 3px 0 #6a3f00) drop-shadow(0 0 24px #ffb30059); }
.hero h1{ margin:6px 0 10px; font-size:clamp(20px,4vw,34px); letter-spacing:1px; color:var(--gold);
  text-shadow:0 2px 0 var(--gold-dk), 0 0 20px #ffb30055; }
.hero .lead{ margin:0 auto; max-width:760px; font-size:clamp(14px,1.9vw,17px); line-height:1.55; color:var(--ink); }
.hero .sub{ margin:10px 0 0; color:var(--dim); font-size:14px; }

.coins{ display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin:8px 0 6px; }
.coin{ background:linear-gradient(180deg,var(--panel),var(--panel2)); border:2px solid var(--line);
  border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:12px; align-items:center;
  box-shadow:0 12px 30px #0006; }
.coin.btc{ border-color:#c98a1a; } .coin.eth{ border-color:#5a6ea8; } .coin.xmr{ border-color:#e07a2a; }
.coin-head{ display:flex; align-items:center; gap:10px; width:100%; }
.coin-head .sym{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-size:20px; font-weight:bold; color:#1a1200; background:linear-gradient(#ffd457,#f0a800);
  box-shadow:0 2px 0 var(--gold-dk); flex:0 0 auto; }
.coin.eth .sym{ background:linear-gradient(#cfd8ff,#8fa0e0); box-shadow:0 2px 0 #3d4a78; }
.coin.xmr .sym{ background:linear-gradient(#ffb066,#e07a2a); box-shadow:0 2px 0 #8a4413; }
.coin-head h2{ margin:0; font-size:18px; letter-spacing:.5px; color:var(--ink); }
.coin-head .tick{ margin-left:auto; font-size:12px; letter-spacing:1px; color:var(--faint);
  border:1px solid var(--line); border-radius:6px; padding:2px 6px; }

.qr{ width:100%; max-width:240px; height:auto; aspect-ratio:1/1; background:#fff;
  border-radius:10px; padding:8px; image-rendering:pixelated; }

.addr{ width:100%; display:flex; gap:8px; align-items:stretch; }
.addr code{ flex:1 1 auto; min-width:0; background:#0a0f1e; border:2px solid #33406e; border-radius:8px;
  padding:10px; font-size:12px; line-height:1.4; color:#cfe0ff;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  overflow-wrap:anywhere; word-break:break-all; }
.copy{ flex:0 0 auto; cursor:pointer; border:none; border-radius:8px; padding:0 16px; font-size:14px;
  font-weight:bold; letter-spacing:.5px; color:#1a1200; background:linear-gradient(#ffd457,#f0a800);
  box-shadow:0 3px 0 var(--gold-dk); }
.copy:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--gold-dk); }
.copy.done{ background:linear-gradient(#9ef0a8,#3fbf55); box-shadow:0 3px 0 #1d7a2e; color:#06210c; }

.warn{ margin:22px auto 0; max-width:820px; text-align:center; font-size:13px; line-height:1.6;
  color:#ffd9a3; background:#2a1c08; border:1px solid #6a4a12; border-radius:10px; padding:12px 14px; }
.foot{ margin-top:26px; text-align:center; color:var(--faint); font-size:12px; }
.foot a{ color:var(--dim); text-decoration:none; }
.foot a:hover{ color:var(--gold); }

@media (max-width:420px){
  .addr{ flex-direction:column; }
  .copy{ padding:10px; }
}