:root {
  --bg: #0b1530; --bg2: #13224a; --card: rgba(255, 255, 255, 0.06); --line: rgba(255, 255, 255, 0.12);
  --text: #f4f6fb; --muted: #aab4cc; --gold: #e8b84a; --blue: #7fb4ff; --ok: #6fd39a;
  --venmo: #008cff; --paypal: #ffc439; --paypal-text: #111; --cashapp: #00c244; --zelle: #6d1ed4;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: radial-gradient(120% 70% at 50% 0%, var(--bg2), var(--bg) 70%) fixed, var(--bg);
  color: var(--text); font: 17px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
.screen { max-width: 480px; margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) 16px max(32px, env(safe-area-inset-bottom)); text-align: center; }
.loading { padding: 40vh 0; color: var(--muted); }
.logo { width: 72px; height: 72px; border-radius: 18px; }
h1 { font-size: 30px; line-height: 1.15; margin: 12px 0 6px; letter-spacing: -0.01em; }
h2 { font-size: 20px; margin: 0 0 6px; }
.tag { color: var(--muted); margin: 0 0 20px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 18px 16px; margin: 0 0 16px; }
.pill { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; margin-bottom: 18px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; }
.dot.on { background: var(--ok); box-shadow: 0 0 0 4px rgba(111, 211, 154, 0.18); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(111, 211, 154, 0.05); } }
p { margin: 0 0 12px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; margin: 0 0 10px;
  border: 0; border-radius: 14px; font: inherit; font-weight: 650; text-decoration: none; cursor: pointer; color: #fff;
}
.btn:active { transform: scale(0.985); }
.btn.venmo { background: var(--venmo); }
.btn.paypal { background: var(--paypal); color: var(--paypal-text); }
.btn.cashapp { background: var(--cashapp); }
.btn.zelle { background: var(--zelle); }
.btn.go { background: var(--gold); color: #1b1300; font-size: 19px; min-height: 60px; margin-top: 6px; }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--text); font-weight: 550; }
.btn.small { min-height: 44px; font-size: 15px; }
.zbox { background: rgba(109, 30, 212, 0.16); border: 1px solid rgba(109, 30, 212, 0.5); border-radius: 14px; padding: 14px; margin: -2px 0 12px; text-align: left; }
.zrow { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.zrow code { flex: 1; min-width: 0; overflow-wrap: anywhere; background: rgba(0, 0, 0, 0.25); padding: 10px; border-radius: 10px; font: 600 16px/1.3 ui-monospace, Menlo, monospace; }
.zrow button { flex: none; border: 0; border-radius: 10px; padding: 10px 14px; background: var(--zelle); color: #fff; font: inherit; font-weight: 650; }
.thanks { background: linear-gradient(135deg, rgba(232, 184, 74, 0.22), rgba(127, 180, 255, 0.16)); border: 1px solid rgba(232, 184, 74, 0.5); }
.thanks h2 { color: var(--gold); }
.song { font-size: 24px; font-weight: 750; line-height: 1.2; margin: 4px 0 10px; overflow-wrap: anywhere; }
.over { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.bar { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.12); overflow: hidden; margin: 6px 0 4px; }
.bar > i { display: block; height: 100%; background: var(--blue); border-radius: 6px; transition: width 0.5s linear; }
.times { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; margin-bottom: 14px; }
.listen { font-size: 20px; min-height: 64px; background: var(--blue); color: #08142e; }
.listen.stop { background: rgba(255, 255, 255, 0.1); color: var(--text); }
.state { min-height: 22px; font-size: 14px; color: var(--muted); }
.state.ok { color: var(--ok); }
.tips { text-align: left; font-size: 14px; color: var(--muted); padding-left: 20px; margin: 0; }
.tips li { margin-bottom: 4px; }
.foot { margin-top: 22px; font-size: 13px; color: var(--muted); }
.err { color: #ffb4a8; font-size: 14px; }
.msg { color: var(--muted); text-align: left; }
.msg p { margin: 0 0 10px; }
.msg b { color: var(--text); }
.msg h3 { font-size: 17px; color: var(--gold); margin: 14px 0 6px; }
.thanks .msg, .thanks .msg b { color: var(--text); }
.more { text-align: left; margin-top: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.more summary { cursor: pointer; font-weight: 650; color: var(--blue); list-style-position: inside; padding: 4px 0 10px; }
.logo-pay { width: 22px; height: 22px; flex: none; }
.logo-pay.wide { width: 84px; height: 17px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }