@font-face{font-family:Syne;src:url('/fonts/lab/syne.woff2') format('woff2');font-weight:400 800;font-display:swap}
:root{--black:#090909;--ink:#111;--paper:#f2f0eb;--muted:#aaa59c;--orange:#ff4f17;--line:rgba(255,255,255,.13);--card:#151515}
*{box-sizing:border-box}html{background:var(--black);color:var(--paper);font-family:Syne,Inter,system-ui,sans-serif}body{margin:0;background:radial-gradient(circle at 70% 4%,rgba(255,79,23,.15),transparent 27rem),var(--black)}button,a,input{font:inherit}.topbar{position:fixed;top:0;left:0;right:0;height:64px;padding:0 clamp(20px,4vw,64px);display:flex;align-items:center;justify-content:space-between;background:transparent;border-bottom:1px solid transparent;z-index:10;transition:background .35s ease,border-color .35s ease}.topbar.is-scrolled{background:linear-gradient(180deg,rgba(10,10,10,.72),rgba(10,10,10,.45));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom-color:var(--line)}.brand,.place-link{color:inherit;text-decoration:none}.brand{display:flex;gap:10px;align-items:center;font-weight:700}.brand-mark{display:grid;place-items:center;width:30px;height:30px;border:1px solid #555;border-radius:9px;color:var(--orange);font-size:23px}.place-link{font-size:12px;border:1px solid #555;border-radius:999px;padding:11px 16px;background:rgba(10,10,10,.35);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.shell{width:100%}.hero{height:min(58vh,620px);min-height:430px;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}.hero-image{position:absolute;inset:0;background:center/cover no-repeat;filter:saturate(.85)}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.93) 0%,rgba(0,0,0,.56) 52%,rgba(0,0,0,.25)),linear-gradient(0deg,var(--black),transparent 45%)}.hero-copy{position:absolute;left:clamp(20px,6vw,92px);top:var(--bar-h,64px);bottom:var(--bar-h,64px);display:flex;flex-direction:column;justify-content:center;max-width:900px}
/* Mobile: the copy keeps a nice gap below the header instead of only
clearing the shorter bar. */
@media(max-width:560px){.hero-copy{left:20px;right:20px;--bar-h:54px}}.eyebrow,.step{color:var(--orange);font-size:11px;font-weight:800;letter-spacing:.18em}.hero h1{font-size:clamp(44px,7vw,102px);line-height:.91;letter-spacing:-.07em;margin:20px 0 25px;max-width:1050px}.place-area{color:#d7d2ca;margin:0}.tip-grid{display:grid;grid-template-columns:minmax(0,1.28fr) minmax(360px,.72fr);border-bottom:1px solid var(--line)}.tip-panel{padding:clamp(40px,6vw,92px);border-right:1px solid var(--line)}.section-heading{max-width:760px}.section-heading h2,.score-panel h2,.merchant-note h2{font-size:clamp(32px,4vw,58px);line-height:1;letter-spacing:-.045em;margin:15px 0}.section-heading>p:last-child,.score-intro>p:last-child,.merchant-note>p{color:var(--muted);line-height:1.65}.amounts{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:38px 0 14px;max-width:760px}.amounts button{min-height:84px;border:1px solid #3a3a3a;color:var(--paper);background:#111;border-radius:5px;font-size:20px;cursor:pointer}.amounts small{display:block;color:#85817a;font-size:10px;text-transform:uppercase;letter-spacing:.12em;margin-top:6px}.amounts button:hover,.amounts button.selected{border-color:var(--orange);background:rgba(255,79,23,.11);color:#fff}.custom-amount,.identity-toggle{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:20px 4px;color:#c8c4bc;max-width:760px}.custom-amount{gap:18px;justify-content:flex-start}.custom-amount-field{display:flex;align-items:center;gap:8px}.custom-amount input{width:110px;background:#1b1b1b;border:1px solid #404040;border-radius:4px;padding:10px;color:#fff;text-align:left;font-family:Inter,system-ui,sans-serif;font-size:15px;font-weight:400}.identity-toggle{justify-content:flex-start;gap:13px}.identity-toggle input{width:20px;height:20px;accent-color:var(--orange)}.identity-toggle span{display:flex;flex-direction:column;gap:4px}.identity-toggle small{color:#777}.tip-button{width:100%;max-width:760px;border:0;background:var(--orange);color:white;min-height:70px;margin-top:28px;font-size:17px;font-weight:800;cursor:pointer;border-radius:4px}.tip-button:hover{filter:brightness(1.12)}.tip-button:disabled{opacity:.55;cursor:wait}.tip-button .zap-glyph{width:20px;height:20px;margin-right:10px;flex:none;fill:currentColor}.status{font-size:12px;color:#888;margin:13px 0;max-width:760px}.status.error{color:#ff8a68}.hidden{display:none}.qr-shell{background:#fff;padding:12px}.qr-shell img{width:100%;display:block}.score-panel{padding:clamp(40px,4vw,70px);background:#101010}.score-intro{margin-bottom:35px;max-width:540px}.board{border-top:1px solid var(--line);padding:25px 0;max-width:540px}.board-title{display:flex;justify-content:space-between;align-items:end}.board-title span{font-size:12px;letter-spacing:.16em;font-weight:800}.board-title small{color:#777}.rank-list{list-style:none;margin:18px 0 0;padding:0;counter-reset:rank}.rank-list li{counter-increment:rank;display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.08)}.rank-list li:before{content:counter(rank,decimal-leading-zero);color:#5f5b55;font-size:11px}.rank-list .empty{display:block;color:#67635e;border-bottom:0}
/* No trailing divider after the final row: the rule separates entries, it
   does not underline the list. */
.rank-list li:last-child{border-bottom:0}
/* An empty board draws no structural rules at all - dividers arrive with
   the tippers they separate. */
.board:has(.rank-list .empty:only-child){border-top:0}.rank-list .empty:before{display:none}.rank-name{font-weight:700;overflow:hidden;text-overflow:ellipsis}.rank-name small{display:block;color:#666;margin-top:4px}.rank-sats{color:var(--orange);font-variant-numeric:tabular-nums}.total{margin-top:30px;background:var(--orange);color:#fff;padding:28px;max-width:540px}.total span,.total small{display:block}.total strong{display:block;font-size:clamp(34px,4vw,52px);letter-spacing:-.05em;margin:6px 0}.merchant-note{padding:clamp(60px,9vw,130px) clamp(20px,10vw,150px);max-width:1150px;margin-inline:auto}.merchant-note a{display:inline-block;color:#fff;border-bottom:1px solid var(--orange);text-decoration:none;padding-bottom:5px;margin-top:18px}.merchant-note code,.tip-panel code{color:#ddd}@media(max-width:900px){.tip-grid{grid-template-columns:1fr}.tip-panel{border-right:0;border-bottom:1px solid var(--line)}.amounts{grid-template-columns:1fr 1fr}.hero{min-height:520px}.hero-shade{background:linear-gradient(0deg,var(--black),rgba(0,0,0,.25) 80%),linear-gradient(90deg,rgba(0,0,0,.7),transparent)}}@media(max-width:560px){.topbar{height:54px}.place-link{padding:9px 11px}.hero{height:auto;min-height:54svh}.hero h1{font-size:48px}.tip-panel,.score-panel{padding:36px 20px}.amounts button{min-height:72px}.custom-amount{align-items:flex-start;gap:12px;flex-direction:column}.merchant-note{padding:70px 20px}}

/* --- Invoice modal --------------------------------------------------------
 * The create-invoice flow opens over the page instead of appending beneath
 * the button: scrim + blur, one rounded card, the QR centred. When the zap
 * receipt is verified the card flips to the paid step. Same patterns as the
 * homepage create dialog, drawn in this page's own tokens.
 * ------------------------------------------------------------------------- */
.tip-overlay{position:fixed;inset:0;z-index:60;display:none;place-items:center;padding:20px;background:rgba(5,5,5,.68);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
.tip-overlay.show{display:grid}
body.no-scroll{overflow:hidden}
.tip-modal{position:relative;width:min(470px,100%);max-height:calc(100svh - 44px);overflow-y:auto;overscroll-behavior:contain;background:#121212;border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:36px 32px 30px;box-shadow:0 30px 90px rgba(0,0,0,.65);animation:tip-modal-pop .32s cubic-bezier(.2,.9,.2,1.12) both}
@keyframes tip-modal-pop{from{opacity:0;transform:translateY(16px) scale(.96)}}
.tip-close{position:absolute;top:14px;right:14px;width:36px;height:36px;display:grid;place-items:center;border:1px solid #3a3a3a;border-radius:999px;background:transparent;color:#9a958c;cursor:pointer;transition:border-color .2s,color .2s}
.tip-close:hover{border-color:var(--orange);color:#fff}
.tip-close svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.tip-modal-stage h3{font-size:clamp(24px,3vw,30px);letter-spacing:-.03em;line-height:1.05;margin:10px 0 6px}
.invoice-amount{color:var(--orange);font-weight:800;font-size:18px;margin:0 0 20px}
.tip-modal .qr-shell{position:relative;background:#fff;padding:12px;border-radius:8px;max-width:280px;margin:0 auto;aspect-ratio:1}
.tip-modal .qr-shell img{width:100%;height:100%;display:block;opacity:0;transform:scale(.965);transition:opacity .45s ease,transform .45s ease}
.tip-modal .qr-shell.loaded img{opacity:1;transform:none}
/* The loader holds the shell while the QR is fetched and decoded. It must be
   seen for at least a second (enforced in tip.js) so the reveal reads as a
   moment rather than a jolt. */
.qr-loader{position:absolute;inset:12px;display:grid;place-items:center}
.qr-loader:before{content:"";width:36px;height:36px;border:2.5px solid #ececec;border-top-color:var(--orange);border-radius:999px;animation:qr-spin .8s linear infinite}
.qr-shell.loaded .qr-loader{display:none}
@keyframes qr-spin{to{transform:rotate(360deg)}}
.modal-status{font-size:12px;color:#8a857d;text-align:center;margin:18px 0 0}
.invoice-actions{display:flex;gap:8px;margin-top:18px}
.invoice-actions a,.invoice-actions button{flex:1;text-align:center;border:1px solid #333;background:#181818;color:var(--paper);padding:13px 14px;border-radius:5px;cursor:pointer;text-decoration:none;font-weight:700}
.invoice-actions a:hover,.invoice-actions button:hover{border-color:#555}
.invoice-actions .wallet-button{background:var(--orange);border-color:var(--orange);color:#fff}
.paid-step{text-align:center}
.paid-step .invoice-amount{margin-bottom:14px}
.paid-mark{width:66px;height:66px;margin:4px auto 20px;border:2px solid var(--orange);border-radius:999px;display:grid;place-items:center;color:var(--orange);animation:tip-paid-pop .5s cubic-bezier(.2,.9,.2,1.4) both}
@keyframes tip-paid-pop{from{opacity:0;transform:scale(.4)}}
.paid-mark svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.paid-note{color:var(--muted);line-height:1.6;max-width:36ch;margin:0 auto 6px}
.paid-step .tip-button{margin-top:24px;max-width:none}
@media(max-width:560px){.invoice-actions{flex-direction:column}.tip-modal{padding:30px 22px 24px}}