/* ── Payments previews (scenes used by js/periodic/pay.js) ──
   Every class is prefixed pv-pay-. Dark surfaces = organizer admin app,
   light "paper" surfaces = what ticket buyers see. */

/* Shared pieces */
.pv-pay-paper {
  background: #f6faf8; color: #1b2421; border-radius: .8em; padding: 1em 1.1em;
  box-shadow: 0 1.6em 3.2em rgba(0, 0, 0, 0.5);
  --pv-off-bg: #fff; --pv-off-bd: rgba(27, 36, 33, 0.14); --pv-off-fg: #1b2421;
}
.pv-pay-paper .pv-btn { color: #0f1a05; }
.pv-pay-ev { display: flex; flex-direction: column; gap: .1em; margin-bottom: .7em; }
.pv-pay-ev b { font-size: 1em; }
.pv-pay-ev span { font-size: .78em; color: #5b6763; }
.pv-pay-plbl { display: block; font-size: .72em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #5b6763; margin-bottom: .45em; }
.pv-pay-cardin { display: flex; flex-direction: column; gap: .15em; padding: .45em .65em; border-radius: .45em; background: #fff; border: 1px solid rgba(27, 36, 33, 0.14); }
.pv-pay-cardin span { font-size: .7em; color: #5b6763; }
.pv-pay-cardin b { font-size: .82em; font-weight: 600; letter-spacing: .02em; }
.pv-pay-ph { color: #9aa5a1; font-weight: 500 !important; }
.pv-pay-cardrow { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; margin-top: .5em; }
.pv-pay-secure { display: flex; align-items: center; gap: .35em; margin: .7em 0 .8em; font-size: .7em; color: #5b6763; }
.pv-pay-lock { width: 1em; height: 1em; flex: none; color: #5b6763; }
.pv-pay-paybtn { display: grid; width: 100%; justify-items: stretch; }
.pv-pay-paybtn > * { display: block; text-align: center; }
.pv-pay-paybtn .pv-btn { display: block; width: 100%; text-align: center; padding: .65em 1em; font-size: .9em; box-sizing: border-box; }
.pv-pay-busy { background: color-mix(in srgb, var(--c) 35%, #e3ebe7) !important; color: #3a4a2a !important; }
.pv-pay-done { display: flex !important; align-items: center; justify-content: center; gap: .4em; padding: .55em 1em; border-radius: .5em; font-size: .9em; font-weight: 700; background: color-mix(in srgb, var(--c) 22%, transparent); color: #3f6212; }
.pv-pay-done .pv-check { color: #4d7c0f; }
.pv-pay-li { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; padding: .4em 0; font-size: .85em; border-top: 1px solid rgba(27, 36, 33, 0.08); }
.pv-pay-li b { font-weight: 600; white-space: nowrap; }
.pv-pay-tot { font-size: .95em; font-weight: 700; border-top: 1.5px solid rgba(27, 36, 33, 0.25); margin: .2em 0 .8em; }
.pv-pay-tot b { font-weight: 700; font-size: 1.05em; }
.pv-pay-shop { display: flex; align-items: center; gap: .5em; padding: .6em .8em; background: #1b2421; }
.pv-pay-shop i { width: 1.3em; height: 1.3em; border-radius: .3em; background: var(--c); margin-right: auto; }
.pv-pay-shop span { width: 2.6em; height: .4em; border-radius: .2em; background: rgba(255, 255, 255, 0.25); }
.pv-pay-pad { padding: .9em 1em 1em; }
.pv-pay-dim { color: rgba(236, 253, 245, 0.45); }

/* Admin rows, fields, switch, toast */
.pv-pay-row { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .55em .75em; margin-bottom: .7em; border-radius: .5em; background: rgba(236, 253, 245, 0.04); font-size: .85em; font-weight: 600; }
.pv-pay-sw { position: relative; flex: none; width: 2.4em; height: 1.35em; }
.pv-pay-sw-bg { position: absolute; inset: 0; border-radius: 999px; border: 1px solid var(--c); background: var(--pv-on-bg); }
.pv-pay-sw i { position: absolute; top: .2em; left: .22em; width: .95em; height: .95em; border-radius: 50%; background: var(--c); transform: translateX(1.02em); }
@keyframes pvPayKnob1 { 0%, 5% { transform: none; background-color: rgba(236, 253, 245, 0.45); } 8%, 92% { transform: translateX(1.02em); background-color: var(--c); } 97%, 100% { transform: none; background-color: rgba(236, 253, 245, 0.45); } }
.pv-pay-knob1 { animation: pvPayKnob1 var(--pv-t) infinite; }
.pv-pay-fld { margin-bottom: .6em; }
.pv-pay-fld-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .3em; }
.pv-pay-in { min-height: 1.35em; padding: .42em .7em; border-radius: .45em; border: 1px solid rgba(236, 253, 245, 0.12); background: rgba(236, 253, 245, 0.03); font-size: .82em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .01em; white-space: nowrap; overflow: hidden; }
.pv-pay-toast { display: flex; align-items: center; gap: .6em; padding: .6em .85em; border-radius: .55em; background: #18221e; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); box-shadow: 0 .8em 1.6em rgba(0, 0, 0, 0.35); }
.pv-pay-toast > div { display: flex; flex-direction: column; gap: .1em; }
.pv-pay-toast b { font-size: .85em; }
.pv-pay-toast span { font-size: .72em; color: rgba(236, 253, 245, 0.6); }
.pv-pay-toast .pv-check, .pv-pay-toast .pv-env { width: 1.3em; height: 1.3em; }
.pv-pay-sec { margin-bottom: .8em; }
.pv-pay-sec b { display: block; font-size: 1em; margin-bottom: .15em; }

/* Typing (clip reveal) */
@keyframes pvPayType1 { 0%, 5% { clip-path: inset(0 100% 0 0); } 19%, 91% { clip-path: inset(0 0 0 0); opacity: 1; } 96%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
@keyframes pvPayType3 { 0%, 27% { clip-path: inset(0 100% 0 0); } 38%, 91% { clip-path: inset(0 0 0 0); opacity: 1; } 96%, 100% { clip-path: inset(0 0 0 0); opacity: 0; } }
.pv-pay-type1, .pv-pay-type3 { display: inline-block; }
.pv-pay-type1 { animation: pvPayType1 var(--pv-t) infinite; }
.pv-pay-type3 { animation: pvPayType3 var(--pv-t) steps(8, end) infinite; }

/* Checkbox */
.pv-pay-cb { display: inline-grid; place-items: center; flex: none; width: 1.15em; height: 1.15em; border-radius: .28em; border: 1.5px solid rgba(236, 253, 245, 0.3); }
.pv-pay-cbon { display: grid; place-items: center; width: 100%; height: 100%; border-radius: .18em; background: var(--c); }
.pv-pay-cbon .pv-check { width: .9em; height: .9em; color: #0f1a05; }
.pv-pay-cb:has(.pv-pay-cbon) { border-color: var(--c); }

/* Status badges */
.pv-pay-b-sent { background: rgba(96, 165, 250, 0.16); color: #93c5fd; }
.pv-pay-b-viewed { background: rgba(251, 191, 36, 0.16); color: #fcd34d; }
.pv-pay-b-paid { background: color-mix(in srgb, var(--c) 20%, transparent); color: var(--c); }
.pv-pay-b-off { background: rgba(236, 253, 245, 0.08); color: rgba(236, 253, 245, 0.55); }

/* Admin tables */
.pv-pay-tbl { display: flex; flex-direction: column; }
.pv-pay-tr { display: grid; align-items: center; gap: .6em; padding: .5em .3em; border-top: 1px solid rgba(236, 253, 245, 0.07); font-size: .8em; }
.pv-pay-th { border-top: 0; padding-top: 0; align-items: end; }
.pv-pay-th span { font-size: .88em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(236, 253, 245, 0.45); line-height: 1.2; }
.pv-pay-tr .pv-badge { font-size: .85em; }

/* 1. Stripe Payments */
.pv-pay-st { gap: 1.4em; }
.pv-pay-st-admin { width: 44%; }
.pv-pay-st-head { display: flex; gap: .8em; align-items: flex-start; margin-bottom: .8em; }
.pv-pay-st-head b { font-size: 1.05em; }
.pv-pay-st-head .pv-sub { margin-top: .15em; line-height: 1.35; }
.pv-pay-st-mark { display: grid; place-items: center; flex: none; width: 2.2em; height: 2.2em; border-radius: .5em; background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c); }
.pv-pay-st-mark .pv-pay-ico { width: 1.3em; }
.pv-pay-ico { width: 1.25em; height: auto; flex: none; }
.pv-pay-flow { display: flex; flex-direction: column; align-items: center; gap: .5em; width: 7em; text-align: center; }
.pv-pay-flow span { font-size: .72em; font-weight: 600; color: rgba(236, 253, 245, 0.6); }
.pv-pay-flow-line { position: relative; width: 100%; height: .2em; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--c) 60%, transparent) 0 .5em, transparent .5em .9em); }
.pv-pay-flow-line::before { content: ""; position: absolute; left: -.3em; top: -.4em; border: .5em solid transparent; border-right-color: var(--c); border-left: 0; }
.pv-pay-coin {
  position: absolute; top: -.75em; left: 0; display: grid; place-items: center; width: 1.7em; height: 1.7em; border-radius: 50%;
  background: var(--c); color: #0f1a05; font-style: normal; font-weight: 800; font-size: .9em; box-shadow: 0 0 1em color-mix(in srgb, var(--c) 60%, transparent);
  opacity: 0; animation: pvPayCoin var(--pv-t) infinite;
}
@keyframes pvPayCoin { 0%, 63% { left: calc(100% - 1.7em); opacity: 0; } 66% { left: calc(100% - 1.7em); opacity: 1; } 80% { left: 0; opacity: 1; } 85%, 100% { left: 0; opacity: 0; } }
.pv-pay-st-pay { width: 28%; }

/* 2. Apple & Google Pay */
.pv-pay-wp { gap: 3em; }
.pv-pay-wp .pv-pay-screen .pv-pay-secure { margin: 0 .9em .4em; }
.pv-pay-phone {
  position: relative; height: 92%; width: 17em; padding: 2em .65em .65em; box-sizing: border-box;
  border-radius: 2.2em; border: .35em solid #26302c; background: #0f1513; box-shadow: 0 1.6em 3.2em rgba(0, 0, 0, 0.5);
}
.pv-pay-notch { position: absolute; top: .55em; left: 50%; width: 30%; height: .85em; margin-left: -15%; border-radius: .6em; background: #26302c; }
.pv-pay-screen { height: 100%; border-radius: 1.4em; overflow: hidden; background: #f6faf8; color: #1b2421; display: flex; flex-direction: column; }
.pv-pay-screen > :not(.pv-pay-shop) { margin-left: .9em; margin-right: .9em; }
.pv-pay-screen .pv-pay-ev { margin-top: .8em; }
.pv-pay-tabs3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35em; margin-bottom: .6em; }
.pv-pay-tab { position: relative; display: flex; flex-direction: column; gap: .3em; padding: .45em .5em; border-radius: .45em; background: #fff; border: 1px solid rgba(27, 36, 33, 0.14); color: #1b2421; }
.pv-pay-tab em { position: relative; font-style: normal; font-size: .7em; font-weight: 600; white-space: nowrap; }
.pv-pay-tab .pv-pay-ico { position: relative; width: 1.15em; color: #5b6763; }
.pv-pay-tabon { position: absolute; inset: -1px; border-radius: inherit; border: 2px solid var(--c); background: color-mix(in srgb, var(--c) 12%, #fff); }
.pv-pay-wp-area { display: grid; justify-items: stretch; margin-bottom: .4em; }
.pv-pay-wp-area > * { grid-area: 1 / 1; }
.pv-pay-wallet { display: flex; align-items: center; justify-content: center; gap: .5em; padding: .7em; border-radius: .45em; background: #1b2421; color: #fff; }
.pv-pay-wallet .pv-pay-ico { width: 1.4em; color: #fff; }
.pv-pay-wallet b { font-size: .85em; }
.pv-pay-wallet-g { margin-bottom: .8em; }
.pv-pay-screen .pv-pay-li { margin-top: auto; }
.pv-pay-screen .pv-pay-tot { margin-bottom: .6em; }
.pv-pay-screen .pv-pay-paybtn { margin-bottom: 1em; width: auto; }
.pv-pay-browser { width: 36%; border-radius: .8em; overflow: hidden; background: #f6faf8; color: #1b2421; box-shadow: 0 1.6em 3.2em rgba(0, 0, 0, 0.5); }
.pv-pay-btop { display: flex; align-items: center; gap: .4em; padding: .55em .8em; background: #e3ebe7; }
.pv-pay-btop i { width: .6em; height: .6em; border-radius: 50%; background: rgba(27, 36, 33, 0.2); }
.pv-pay-btop span { margin-left: .8em; padding: .15em 1.6em; border-radius: .4em; background: #fff; font-size: .72em; color: #5b6763; }
.pv-pay-bbody { padding: 1em 1.1em 1.1em; }

/* 3. Service Fees */
.pv-pay-fe { gap: 2em; }
.pv-pay-fe-admin { width: 42%; }
.pv-pay-fe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; margin-bottom: .9em; }
.pv-pay-fe-grid .pv-lbl { margin-bottom: .3em; white-space: nowrap; }
.pv-pay-fe-sum { width: 31%; }
.pv-pay-note { margin: -.1em 0 .45em; font-size: .7em; line-height: 1.4; color: #5b6763; }
.pv-pay-fe-fee { margin: 0 -.5em; padding: 0 .5em .35em; border-radius: .4em; background: color-mix(in srgb, var(--c) 16%, transparent); }
.pv-pay-fe-fee .pv-pay-li { border-top-color: transparent; }
.pv-pay-calc { display: block; margin-top: -.15em; font-size: .7em; color: #4d5b56; }
.pv-pay-fe-sum .pv-pay-tot { margin: .5em 0 0; }

/* 4. Pay Links */
.pv-pay-pl { gap: 2em; }
.pv-pay-pl-admin { position: relative; width: 50%; }
.pv-pay-pl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2em; margin-bottom: .9em; }
.pv-pay-pl-head .pv-sub { line-height: 1.35; }
.pv-pay-pl-tbl .pv-pay-tr { grid-template-columns: 1fr 1.35fr .9fr .9fr .95fr; }
.pv-pay-new { background: color-mix(in srgb, var(--c) 7%, transparent); border-radius: .3em; }
.pv-pay-toast-sm { width: max-content; margin: .8em 0 0 auto; padding: .45em .75em; }
.pv-pay-toast-sm .pv-env { width: 1.4em; }
.pv-pay-pl-pay { width: 26%; padding: 0; overflow: hidden; }
.pv-pay-issued { display: block; margin-top: .6em; text-align: center; font-size: .75em; font-weight: 600; color: #4d7c0f; }

/* 5. Smart Refunds */
.pv-pay-rf { gap: 1.8em; }
.pv-pay-rf-win { width: 46%; }
.pv-pay-rf-win .pv-body { padding: .9em 1.1em 1em; }
.pv-pay-rf-cust { display: flex; align-items: baseline; gap: .8em; margin-bottom: .6em; font-size: .85em; }
.pv-pay-rf-cust .pv-lbl { font-size: .82em; }
.pv-pay-rf-sel { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .3em; }
.pv-pay-links { font-size: .72em; font-weight: 600; color: var(--c); }
.pv-pay-rf-row { display: grid; grid-template-columns: auto 7.6em 1fr auto; align-items: center; gap: .6em; padding: .36em .2em; border-top: 1px solid rgba(236, 253, 245, 0.07); font-size: .8em; }
.pv-pay-rf-row .pv-pay-dim { font-size: .92em; }
.pv-pay-rf-reason { margin: .55em 0 .7em; }
.pv-pay-rf-reason .pv-lbl { margin-bottom: .3em; }
.pv-pay-rf-reason .pv-pay-in { font-family: inherit; }
.pv-pay-rf-foot { display: flex; align-items: center; gap: .6em; }
.pv-pay-rf-foot > div { margin-right: auto; }
.pv-pay-rf-foot .pv-swap b { font-size: 1.35em; color: var(--c); }
.pv-pay-rf-foot .pv-btn { font-size: .78em; }
.pv-pay-rf-side { display: flex; flex-direction: column; gap: .9em; width: 29%; }
.pv-pay-rf-order { display: flex; flex-direction: column; gap: .5em; padding: .9em 1em; }
.pv-pay-rf-ohead { display: flex; justify-content: space-between; align-items: center; gap: .6em; margin-bottom: .2em; }
.pv-pay-rf-ohead .pv-swap { justify-items: end; }
.pv-pay-hist { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: .6em; padding: .5em .6em; border-radius: .4em; background: rgba(236, 253, 245, 0.05); font-size: .82em; }
.pv-pay-hist b { color: var(--c); }
.pv-pay-hist span { color: rgba(236, 253, 245, 0.7); }
.pv-pay-hist em { font-style: normal; font-size: .9em; color: rgba(236, 253, 245, 0.45); }
.pv-pay-rf-tix { display: flex; justify-content: space-between; align-items: center; margin-top: .2em; padding-top: .55em; border-top: 1px solid rgba(236, 253, 245, 0.07); font-size: .82em; color: rgba(236, 253, 245, 0.7); }

/* 6. Cancel & Refund */
.pv-pay-cr-win { width: 86%; }
.pv-pay-cr-grid { display: grid; grid-template-columns: 1fr 34%; gap: 1.4em; }
.pv-pay-cr-stats { display: grid; grid-template-columns: 1fr 1.3fr; gap: .6em; margin-bottom: .9em; }
.pv-pay-cr-stats > div { padding: .55em .8em; border-radius: .5em; background: rgba(236, 253, 245, 0.04); }
.pv-pay-cr-stats b { display: block; margin-top: .1em; font-size: 1.4em; color: var(--c); }
.pv-pay-cr-lbl { margin-bottom: .5em; }
.pv-pay-cr-tbl .pv-pay-tr { grid-template-columns: 1fr 1.45fr .35fr 1.55fr 1.2em; }
.pv-pay-cr-st { display: flex; flex-direction: column; align-items: flex-start; gap: .15em; }
.pv-pay-rem { font-size: .82em; color: rgba(236, 253, 245, 0.55); }
.pv-pay-cr-tbl .pv-check { width: 1.15em; height: 1.15em; }
.pv-pay-done-row { opacity: .55; }
.pv-pay-cr-form { display: flex; flex-direction: column; gap: .35em; }
.pv-pay-cr-form .pv-lbl { margin-top: .4em; }
.pv-pay-cr-chk .pv-env { width: 1.3em; flex: none; }
.pv-pay-cr-chk { display: flex; align-items: center; gap: .55em; padding: .55em .7em; border-radius: .5em; background: rgba(236, 253, 245, 0.04); font-size: .8em; line-height: 1.3; }
.pv-pay-area { min-height: 3.6em; font-family: inherit; white-space: normal; line-height: 1.4; }
.pv-pay-cancel { font-weight: 700; letter-spacing: .12em; }
.pv-pay-cr-btn { display: grid; justify-items: stretch; margin-top: .7em; }
.pv-pay-cr-btn > * { grid-area: 1 / 1; display: block; }
.pv-pay-cr-btn .pv-btn { display: block; text-align: center; padding: .6em 1em; }
.pv-pay-danger { background: #ef4444; color: #fff; }
.pv-pay-cr .pv-pay-busy { background: rgba(236, 253, 245, 0.1) !important; color: rgba(236, 253, 245, 0.75) !important; }
.pv-pay-cr .pv-pay-done { color: var(--c); font-size: .85em; }
.pv-pay-cr .pv-pay-done .pv-check { color: var(--c); }

/* 7. Balance & Disputes */
.pv-pay-bd-win { width: 80%; }
.pv-pay-bd-win .pv-body { padding: 0; }
.pv-pay-bd-grid { display: grid; grid-template-columns: 15.5em 1fr; min-height: 21em; }
.pv-pay-bd-side { display: flex; flex-direction: column; gap: .9em; padding: 1em; background: #0f1613; border-right: 1px solid rgba(236, 253, 245, 0.07); }
.pv-pay-bd-logo { display: flex; align-items: center; gap: .6em; }
.pv-pay-bd-logo i { width: 1.5em; height: 1.5em; border-radius: .35em; background: var(--c); }
.pv-pay-bd-logo span { width: 5em; height: .55em; border-radius: .3em; background: rgba(236, 253, 245, 0.25); }
.pv-pay-bd-nav { display: flex; flex-direction: column; gap: .3em; }
.pv-pay-bd-nav span { display: flex; align-items: center; gap: .6em; padding: .45em .6em; border-radius: .4em; }
.pv-pay-bd-nav span.on { background: color-mix(in srgb, var(--c) 14%, transparent); }
.pv-pay-bd-nav i { width: .85em; height: .85em; border-radius: .2em; background: rgba(236, 253, 245, 0.2); }
.pv-pay-bd-nav b { width: 5.5em; height: .45em; border-radius: .25em; background: rgba(236, 253, 245, 0.14); }
.pv-pay-bd-nav .on i, .pv-pay-bd-nav .on b { background: var(--c); opacity: .8; }
.pv-pay-bal { margin-top: auto; display: flex; flex-direction: column; gap: .3em; padding: .75em .8em; border-radius: .55em; background: #18221e; border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.pv-pay-bal .pv-lbl { margin-bottom: .2em; }
.pv-pay-bal > div { display: flex; justify-content: space-between; align-items: baseline; font-size: .82em; }
.pv-pay-bal > div > span:first-child { color: rgba(236, 253, 245, 0.6); }
.pv-pay-bal .pv-swap { justify-items: end; }
.pv-pay-bal-tot { padding-top: .3em; border-top: 1px solid rgba(236, 253, 245, 0.08); }
.pv-pay-bal-tot b { color: var(--c); }
.pv-pay-bal .pv-btn { margin-top: .35em; text-align: center; font-size: .75em; }
.pv-pay-bd-main { position: relative; padding: 1.1em 1.2em; }
.pv-pay-bd-tiles { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: .7em; }
.pv-pay-bd-tile { position: relative; display: flex; flex-direction: column; gap: .35em; min-height: 5.6em; padding: .75em .85em; border-radius: .55em; background: rgba(236, 253, 245, 0.04); border: 1px solid rgba(236, 253, 245, 0.06); }
.pv-pay-bd-tile .pv-ln { margin-top: 0; }
.pv-pay-bd-big { width: 45%; height: 1.4em; border-radius: .3em; background: rgba(236, 253, 245, 0.16); }
.pv-pay-disp { --pv-off-bg: transparent; --pv-off-bd: transparent; --pv-off-fg: inherit; }
.pv-pay-disp-hl { position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--c); background: var(--pv-on-bg); box-shadow: 0 0 1em color-mix(in srgb, var(--c) 45%, transparent); }
.pv-pay-disp > :not(.pv-pay-disp-hl) { position: relative; }
.pv-pay-disp b { font-size: 1.7em; line-height: 1.1; }
.pv-pay-risk { font-size: .8em; font-weight: 700; color: #fca5a5; white-space: nowrap; }
.pv-pay-bd-chart { display: flex; align-items: flex-end; gap: .55em; height: 9.5em; margin-top: 1em; padding: .8em; border-radius: .55em; background: rgba(236, 253, 245, 0.03); }
.pv-pay-bd-chart i { flex: 1; border-radius: .25em .25em 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 45%, transparent), color-mix(in srgb, var(--c) 10%, transparent)); }
.pv-pay-tip {
  position: absolute; top: 7.7em; right: 1.2em; width: 17.5em; display: flex; flex-direction: column; gap: .35em;
  padding: .8em .95em; border-radius: .6em; background: #f6faf8; color: #1b2421; box-shadow: 0 1em 2.4em rgba(0, 0, 0, 0.55);
}
.pv-pay-tip::before { content: ""; position: absolute; top: -.5em; right: 3em; border: .5em solid transparent; border-bottom-color: #f6faf8; border-top: 0; }
.pv-pay-tip b { font-size: .88em; }
.pv-pay-tip-sub { font-size: .72em; color: #5b6763; margin-bottom: .2em; }
.pv-pay-tip-row { display: flex; align-items: center; gap: .5em; font-size: .82em; font-weight: 600; }
.pv-pay-tip-row i { width: .6em; height: .6em; border-radius: 50%; }
.pv-pay-dot-r { background: #ef4444; }
.pv-pay-dot-a { background: #f59e0b; }

/* 8. Events Revenue */
.pv-pay-rv { gap: 0; }
.pv-pay-rv-win { width: 63%; }
.pv-pay-rv-bar { display: flex; align-items: center; gap: .8em; margin-bottom: .9em; }
.pv-pay-rv-bar .pv-seg { margin-bottom: 0; }
.pv-pay-rv-bar .pv-btn { margin-left: auto; }
.pv-pay-rv-tbl .pv-pay-tr { grid-template-columns: 1.25fr 1fr 1fr .9fr .9fr 1fr; padding: .55em .3em; }
.pv-pay-rv-tbl .pv-pay-tr > span:not(:first-child) { text-align: right; justify-items: end; }
.pv-pay-rv-tbl .pv-pay-tr > span:first-child { display: flex; flex-direction: column; }
.pv-pay-rv-tbl .pv-pay-tr > span:first-child em { font-style: normal; font-size: .88em; color: rgba(236, 253, 245, 0.45); }
.pv-pay-net { color: var(--c); font-weight: 600; }
.pv-pay-edit { position: relative; padding: .2em .35em; }
.pv-pay-edit-hl { position: absolute; inset: -.1em -.1em; border-radius: .3em; border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); }
.pv-pay-edit > .pv-swap { position: relative; }
.pv-pay-totrow { font-weight: 700; border-top: 1.5px solid rgba(236, 253, 245, 0.18); }
.pv-pay-rv-pop {
  position: relative; z-index: 1; width: 14.5em; margin-left: 1.4em; display: flex; flex-direction: column; gap: .5em;
  padding: 1em 1.1em; border-radius: .7em; background: #1d2924; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  box-shadow: 0 1.4em 3em rgba(0, 0, 0, 0.6);
}
.pv-pay-rv-pop > b { font-size: .95em; margin-bottom: .2em; }
.pv-pay-rv-opts { display: flex; flex-direction: column; gap: .3em; }
.pv-pay-opt { position: relative; display: flex; align-items: center; padding: .4em .7em; border-radius: .4em; font-size: .8em; background: rgba(236, 253, 245, 0.04); }
.pv-pay-opt-on { position: absolute; inset: 0; border-radius: inherit; border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.pv-pay-rv-go { display: grid; justify-items: stretch; margin-top: .4em; }
.pv-pay-rv-go > * { grid-area: 1 / 1; display: block; }
.pv-pay-rv-go .pv-btn { display: block; text-align: center; }
.pv-pay-rv .pv-pay-done { color: var(--c); font-size: .85em; }
.pv-pay-rv .pv-pay-done .pv-check { color: var(--c); }

@media (prefers-reduced-motion: reduce) {
  .pv .pv-pay-coin { opacity: 0; }
}