:root {
  color-scheme: light dark;
  --page-gutter: clamp(12px, 2.4vw, 30px);
  --hero-gap: clamp(10px, 1.6vw, 14px);
  --card-radius: clamp(24px, 3vw, 34px);
  --card-pad: clamp(16px, 2vw, 24px);
  --header-title-size: clamp(1.05rem, min(2.55vw, 3.6dvh), 1.8rem);
  --amount-size: clamp(2.9rem, min(8.8vw, 11dvh), 5rem);
  --section-gap: clamp(12px, 1.7vw, 16px);
  --surface-radius: clamp(20px, 2.6vw, 28px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  color: var(--fg, #eef2f9);
  background:
    radial-gradient(900px 520px at 80% -10%, color-mix(in srgb, var(--accent, #ffcc52) 28%, transparent), transparent 60%),
    radial-gradient(620px 420px at 10% 0%, color-mix(in srgb, var(--accent-2, #5be3b4) 22%, transparent), transparent 65%),
    linear-gradient(180deg, var(--bg-grad-3, #0a0d16), var(--bg-grad-4, #0b0f1a));
  font-family: Avenir Next, Avenir, system-ui, sans-serif;
  overflow-x: hidden;
}

body.modal-open {
  overflow: hidden;
}

.pay-page {
  min-height: 100dvh;
  display: grid;
  align-items: center;
  padding:
    max(12px, env(safe-area-inset-top))
    var(--page-gutter)
    calc(max(12px, env(safe-area-inset-bottom)) + 8px);
}

.pay-hero {
  width: min(880px, 100%);
  margin: 0 auto;
  display: grid;
  gap: var(--hero-gap);
}

.brand-row {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(0, auto) minmax(150px, 1fr);
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
}

.brand-lockup {
  grid-column: 1;
  justify-self: start;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-logo {
  max-width: min(220px, 24vw);
  max-height: 58px;
  object-fit: contain;
}

.header-title {
  grid-column: 2;
  justify-self: center;
  margin: 0;
  text-align: center;
  font-size: var(--header-title-size);
  line-height: 1;
  letter-spacing: -.035em;
  font-weight: 850;
  text-wrap: balance;
  white-space: nowrap;
}

.mode-btn {
  grid-column: 3;
  justify-self: end;
  width: 48px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line-strong, rgba(255,255,255,.2));
  color: var(--accent, #ffcc52);
  background: var(--glass, rgba(255,255,255,.08));
  font-size: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.pay-menu-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 42px;
  border-radius: 16px;
  border: 1px solid var(--line-strong, rgba(255,255,255,.2));
  color: var(--accent, #ffcc52);
  background: var(--glass, rgba(255,255,255,.08));
  font-size: 26px;
  font-weight: 850;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.pay-menu-btn:active {
  transform: translateY(1px) scale(.98);
}

.pay-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--line, rgba(255,255,255,.12));
  border-radius: var(--card-radius);
  padding: var(--card-pad);
  background:
    radial-gradient(540px 280px at 12% 0%, color-mix(in srgb, var(--accent-2, #5be3b4) 12%, transparent), transparent 70%),
    linear-gradient(155deg, color-mix(in srgb, var(--card, #0f172a) 94%, transparent), color-mix(in srgb, var(--card, #0f172a) 82%, transparent)),
    radial-gradient(320px 220px at 92% 6%, color-mix(in srgb, var(--accent, #ffcc52) 22%, transparent), transparent 72%);
  box-shadow: 0 32px 90px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
}

.pay-card::before {
  content: '';
  position: absolute;
  inset: -12% auto -18% -45%;
  width: 44%;
  background: linear-gradient(
    110deg,
    transparent 0%,
    color-mix(in srgb, var(--accent, #ffcc52) 22%, white 18%) 44%,
    color-mix(in srgb, var(--accent-2, #5be3b4) 18%, white 14%) 58%,
    transparent 100%
  );
  opacity: 0;
  transform: translateX(-120%) rotate(12deg);
  pointer-events: none;
  filter: blur(2px);
}

.pay-card-shell {
  display: grid;
  gap: var(--section-gap);
}

.amount-display,
.free-amount,
.tip-box,
.pay-footer,
.tip-summary-card,
.amount-modal-sheet,
.amount-input-row {
  border: 1px solid color-mix(in srgb, var(--line, rgba(255,255,255,.12)) 96%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--glass, rgba(255,255,255,.08)) 86%, transparent), color-mix(in srgb, var(--card, #0f172a) 84%, transparent));
  box-shadow:
    0 18px 42px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.amount-display,
.free-amount,
.tip-box,
.pay-footer {
  border-radius: var(--surface-radius);
}

.amount-display,
.free-amount,
.tip-box,
.pay-footer,
.amount-modal-sheet {
  padding: clamp(16px, 2vw, 22px);
}

.amount-display {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  background:
    radial-gradient(220px 140px at 92% 10%, color-mix(in srgb, var(--accent, #ffcc52) 16%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--glass, rgba(255,255,255,.08)) 92%, transparent), color-mix(in srgb, var(--card, #0f172a) 80%, transparent));
}

.amount-display-main {
  display: grid;
  gap: 8px;
  align-content: center;
}

.amount-display small,
.free-copy small,
.tip-summary-card span,
.amount-modal-copy small {
  color: var(--muted, #8b96a7);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 760;
}

.amount-display span {
  font-size: var(--amount-size);
  line-height: .84;
  letter-spacing: -.08em;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.fee-summary {
  min-width: min(240px, 34vw);
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 20px;
  border: 1px solid var(--line, rgba(255,255,255,.12));
  background: color-mix(in srgb, var(--glass, rgba(255,255,255,.08)) 86%, transparent);
}

.fee-summary-head,
.fee-summary-line {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.fee-summary-head span,
.fee-summary-line span,
.fee-summary-rule,
.free-fee-hint {
  color: var(--muted, #8b96a7);
  font-size: clamp(.86rem, 1.3vw, .96rem);
  font-weight: 680;
}

.fee-summary-head strong,
.fee-summary-line strong {
  font-size: clamp(1rem, 1.65vw, 1.2rem);
  font-weight: 850;
  letter-spacing: -.03em;
}

.fee-summary-rule {
  font-size: clamp(.82rem, 1.22vw, .92rem);
  font-weight: 680;
}

.free-amount {
  display: grid;
  gap: 12px;
}

.free-copy {
  display: grid;
  gap: 6px;
}

.free-staff-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  color: var(--fg, #eef2f9);
  font-size: clamp(.96rem, 1.45vw, 1.08rem);
  font-weight: 820;
}

.free-staff-line strong {
  color: var(--fg, #eef2f9);
  font-weight: 950;
}

.free-staff-divider {
  color: var(--muted, #8b96a7);
  font-weight: 900;
}

.free-intro {
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  font-weight: 900;
  letter-spacing: -.03em;
}

.free-fee-hint {
  margin-top: -2px;
}

.amount-input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: clamp(86px, 12.5dvh, 132px);
  border-radius: 24px;
  padding: 12px 16px;
  background: var(--glass, rgba(255,255,255,.08));
}

.amount-input-row input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--fg, #fff);
  font: inherit;
  font-weight: 1000;
  font-size: clamp(2.8rem, min(8.2vw, 11.2dvh), 5.6rem);
  letter-spacing: -.08em;
  font-variant-numeric: tabular-nums;
}

.amount-input-row span {
  color: var(--fg, #eef2f9);
  font-size: clamp(1.2rem, 2vw, 1.9rem);
  font-weight: 850;
}

.amount-pad-host {
  width: min(100%, 420px);
}

.invoice-meta {
  display: grid;
  gap: 6px;
}

.invoice-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  text-align: center;
  gap: 6px 8px;
}

.invoice-meta-label,
.invoice-meta-divider {
  color: var(--muted, #8b96a7);
  font-size: clamp(.96rem, 1.42vw, 1.05rem);
  font-weight: 680;
}

.staff-line {
  min-width: 0;
  color: var(--fg, #eef2f9);
  font-size: clamp(.98rem, 1.5vw, 1.1rem);
  font-weight: 820;
}

.tip-prompt {
  color: var(--fg, #eef2f9);
  font-size: clamp(.98rem, 1.5vw, 1.08rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  font-weight: 820;
}

.tip-box {
  display: grid;
  gap: 12px;
}

.tip-grid {
  display: grid;
  gap: 10px;
}

.tip-grid-percent {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tip-grid-custom {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tip-grid + .tip-grid {
  margin-top: -2px;
}

.tip-box .tip {
  position: relative;
  overflow: hidden;
}

.tip-box .tip::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.08), transparent 55%);
  opacity: .8;
  pointer-events: none;
}

.tip {
  min-height: 52px;
  border: 1px solid var(--line-strong, rgba(255,255,255,.2));
  border-radius: 18px;
  padding: 10px 12px;
  color: var(--fg, #fff);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--glass, rgba(255,255,255,.08)) 94%, transparent), color-mix(in srgb, var(--card, #0f172a) 88%, transparent));
  font-weight: 800;
  font-size: clamp(.95rem, 1.65vw, 1.05rem);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.tip.tip-custom {
  min-height: 54px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--glass, rgba(255,255,255,.12)) 92%, transparent), color-mix(in srgb, var(--card, #0f172a) 84%, transparent));
}

.tip.is-active {
  color: #10131b;
  background: linear-gradient(135deg, var(--accent, #ffcc52), var(--accent-2, #5be3b4));
  box-shadow:
    0 14px 28px color-mix(in srgb, var(--accent-2, #5be3b4) 22%, transparent),
    0 0 0 1px rgba(255,255,255,.12) inset;
}

.tip.is-active::after {
  opacity: .32;
}

.tip-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tip-summary-card {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 20px;
}

.tip-summary-card strong {
  font-size: clamp(1.75rem, 4.2vw, 2.8rem);
  line-height: .92;
  letter-spacing: -.06em;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.pay-footer {
  display: grid;
  gap: 10px;
}

.pay-button {
  width: 100%;
  min-height: 66px;
  border: 0;
  border-radius: 22px;
  padding: 16px 18px;
  font-weight: 850;
  font-size: clamp(1.05rem, 2.4vw, 1.38rem);
  color: #111827;
  background: linear-gradient(135deg, var(--accent, #ffcc52), var(--accent-2, #5be3b4));
  box-shadow: 0 18px 42px color-mix(in srgb, var(--accent, #ffcc52) 30%, transparent);
  cursor: pointer;
}

.pay-button:disabled {
  opacity: .5;
  filter: grayscale(.6);
}

.pay-status {
  min-height: 20px;
  color: var(--muted, #8b96a7);
  font-weight: 700;
  max-width: 64ch;
}

.pay-status:empty {
  display: none;
}

.success-panel {
  text-align: center;
  padding: 28px;
  border-radius: 28px;
  background: var(--card, #0f172a);
  border: 1px solid var(--line, rgba(255,255,255,.12));
  box-shadow: 0 28px 80px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08);
  display: grid;
  gap: 12px;
}

.success-mark {
  position: relative;
  width: 106px;
  height: 106px;
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent-2, #5be3b4) 42%, white 24%);
  color: #111;
  background: linear-gradient(135deg, var(--accent, #ffcc52), var(--accent-2, #5be3b4));
  box-shadow:
    0 20px 46px color-mix(in srgb, var(--accent-2, #5be3b4) 28%, transparent),
    inset 0 1px 0 rgba(255,255,255,.52);
  cursor: pointer;
  touch-action: manipulation;
  transition:
    transform 180ms cubic-bezier(.2,.9,.2,1),
    filter 180ms ease,
    box-shadow 180ms ease;
}

.success-mark:hover {
  transform: translateY(-1px) scale(1.03);
  filter: saturate(1.08);
  box-shadow:
    0 24px 58px color-mix(in srgb, var(--accent-2, #5be3b4) 34%, transparent),
    inset 0 1px 0 rgba(255,255,255,.58);
}

.success-mark:active {
  transform: translateY(2px) scale(.94);
  filter: saturate(1.16);
}

.success-mark:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent, #ffcc52) 70%, white 20%);
  outline-offset: 4px;
}

.success-mark.is-popping {
  animation: confettiButtonPop 560ms cubic-bezier(.16,.9,.2,1);
}

.success-check {
  position: relative;
  z-index: 2;
  font-size: 56px;
  font-weight: 1000;
  line-height: 1;
  transform: translateY(5px);
}

.confetti-ring-text {
  position: absolute;
  inset: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  pointer-events: none;
}

.confetti-ring-text text {
  fill: rgba(16, 19, 27, .86);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.success-panel h2 {
  margin: 0;
  font-size: clamp(2.4rem, 7vw, 4.5rem);
  line-height: .9;
  letter-spacing: -.07em;
}

.success-panel p {
  margin: 0 auto;
  max-width: 38ch;
  color: var(--muted, #8b96a7);
  font-weight: 820;
}

.success-meta {
  justify-self: center;
  max-width: 58ch;
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--fg, #eef2f9);
  background: color-mix(in srgb, var(--glass, rgba(255,255,255,.08)) 88%, transparent);
  border: 1px solid var(--line, rgba(255,255,255,.12));
  font-weight: 850;
}

.success-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}

.success-link {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-strong, rgba(255,255,255,.18));
  color: var(--fg, #eef2f9);
  background: color-mix(in srgb, var(--glass, rgba(255,255,255,.08)) 92%, transparent);
  text-decoration: none;
  font-weight: 950;
}

.success-link-primary {
  color: #10131b;
  border: 0;
  background: linear-gradient(135deg, var(--accent, #ffcc52), var(--accent-2, #5be3b4));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--accent, #ffcc52) 22%, transparent);
}

.history-panel {
  text-align: left;
}

.history-eyebrow {
  color: var(--muted, #8b96a7);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 950;
}

.history-list {
  display: grid;
  gap: 10px;
  margin: 4px 0;
}

.history-row,
.history-empty {
  border: 1px solid var(--line, rgba(255,255,255,.12));
  border-radius: 18px;
  padding: 14px;
  background: color-mix(in srgb, var(--glass, rgba(255,255,255,.08)) 88%, transparent);
}

.history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.history-row div {
  display: grid;
  gap: 3px;
}

.history-row strong {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: .9;
  font-weight: 1000;
  letter-spacing: -.06em;
}

.history-row span,
.history-row small,
.history-empty {
  color: var(--muted, #8b96a7);
  font-weight: 780;
}

.pay-status-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(7, 10, 18, .58);
  backdrop-filter: blur(16px);
}

.pay-status-sheet {
  width: min(420px, 92vw);
  text-align: center;
  display: grid;
  gap: 10px;
  padding: 24px 22px;
  border-radius: 28px;
  border: 1px solid var(--line, rgba(255,255,255,.12));
  background:
    radial-gradient(80% 120% at 90% -20%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 58%),
    var(--card, #0f172a);
  box-shadow: 0 28px 80px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
}

.pay-status-sheet h2 {
  margin: 0;
  font-size: clamp(1.8rem, 5vw, 2.7rem);
  line-height: .95;
  letter-spacing: -.05em;
}

.pay-status-sheet p {
  margin: 0;
  color: var(--muted, #8b96a7);
  font-weight: 820;
}

.pay-status-orb {
  width: 74px;
  height: 74px;
  margin: 0 auto 4px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.88), transparent 24%),
    linear-gradient(135deg, var(--accent, #ffcc52), var(--accent-2, #5be3b4));
  box-shadow:
    0 18px 40px color-mix(in srgb, var(--accent, #ffcc52) 24%, transparent),
    inset 0 1px 0 rgba(255,255,255,.55);
  animation: payStatusPulse 1.1s cubic-bezier(.2,.8,.2,1) infinite alternate;
}

.pay-confetti {
  position: fixed;
  top: -18px;
  z-index: 100;
  width: 10px;
  height: 16px;
  border-radius: 4px;
  pointer-events: none;
  transform: rotate(var(--start-r, 0deg));
  animation: payConfettiFall var(--dur, 3000ms) cubic-bezier(.16,.84,.28,1) forwards;
}

.amount-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}

.amount-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 10, 18, .58);
  backdrop-filter: blur(16px);
}

.amount-modal-sheet {
  position: relative;
  z-index: 1;
  width: min(520px, calc(100vw - 24px));
  display: grid;
  gap: 16px;
  border-radius: 28px;
}

.amount-modal-copy {
  display: grid;
  gap: 8px;
}

.amount-modal-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.amount-modal-copy h2 {
  margin: 0;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  line-height: .95;
  letter-spacing: -.05em;
}

.amount-modal-copy p {
  margin: 0;
  color: var(--muted, #8b96a7);
  font-weight: 700;
}

.amount-modal-input-row {
  min-height: clamp(86px, 12dvh, 132px);
}

.amount-modal-error {
  color: #ff8b8b;
  font-weight: 800;
}

.modal-btn {
  min-height: 54px;
  border: 1px solid var(--line-strong, rgba(255,255,255,.2));
  border-radius: 18px;
  background: color-mix(in srgb, var(--glass, rgba(255,255,255,.08)) 92%, transparent);
  color: var(--fg, #eef2f9);
  font-size: 1rem;
  font-weight: 900;
}

.amount-modal-close {
  min-width: 120px;
  padding-inline: 16px;
}

.modal-btn-primary {
  border: 0;
  color: #10131b;
  background: linear-gradient(135deg, var(--accent, #ffcc52), var(--accent-2, #5be3b4));
}

.live-update-badge {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent, #ffcc52) 44%, white 18%);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #ffcc52) 74%, white 18%), color-mix(in srgb, var(--accent-2, #5be3b4) 72%, white 16%));
  color: #10131b;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .12em;
  box-shadow: 0 14px 38px color-mix(in srgb, var(--accent, #ffcc52) 22%, transparent);
}

.live-update-badge.is-visible {
  animation: liveUpdateBadgeIn 1400ms cubic-bezier(.2,.8,.2,1);
}

.pay-card.is-live-update {
  animation: payCardPulse 900ms cubic-bezier(.2,.8,.2,1);
}

.pay-card.is-live-update::before {
  opacity: .95;
  animation: payCardSweep 920ms cubic-bezier(.18,.78,.24,1);
}

.pay-card.is-live-update .amount-display span,
.pay-card.is-live-update .amount-input-row,
.pay-card.is-live-update .tip-summary-card strong {
  animation: payValuePop 680ms cubic-bezier(.18,.78,.24,1);
}

.hidden { display: none !important; }

@keyframes payCardPulse {
  0% { transform: scale(1); box-shadow: 0 32px 90px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08); }
  32% { transform: scale(1.012); box-shadow: 0 38px 102px color-mix(in srgb, var(--accent, #ffcc52) 18%, rgba(0,0,0,.2)); }
  100% { transform: scale(1); box-shadow: 0 32px 90px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08); }
}

@keyframes payCardSweep {
  0% { opacity: 0; transform: translateX(-120%) rotate(12deg); }
  18% { opacity: .85; }
  100% { opacity: 0; transform: translateX(360%) rotate(12deg); }
}

@keyframes payValuePop {
  0% { transform: scale(.96); filter: blur(4px); opacity: .72; }
  55% { transform: scale(1.035); filter: blur(0); opacity: 1; }
  100% { transform: scale(1); filter: blur(0); opacity: 1; }
}

@keyframes liveUpdateBadgeIn {
  0% { opacity: 0; transform: translateY(-10px) scale(.92); }
  18% { opacity: 1; transform: translateY(0) scale(1); }
  74% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-6px) scale(.98); }
}

@keyframes payStatusPulse {
  from { transform: scale(.94); filter: saturate(1); }
  to { transform: scale(1.04); filter: saturate(1.25); }
}

@keyframes confettiButtonPop {
  0% { transform: scale(1); }
  38% { transform: scale(.9) rotate(-3deg); }
  68% { transform: scale(1.12) rotate(2deg); }
  100% { transform: scale(1); }
}

@keyframes payConfettiFall {
  0% { opacity: 0; transform: translate3d(0, -20px, 0) rotate(var(--start-r, 0deg)); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--x, 0), 105vh, 0) rotate(var(--r, 240deg)); }
}

html[data-theme="light"] body {
  color: var(--fg, #0b0f1a);
  background:
    radial-gradient(850px 420px at 72% -12%, color-mix(in srgb, var(--accent, #f5b942) 24%, transparent), transparent 62%),
    radial-gradient(620px 360px at 0% 0%, color-mix(in srgb, var(--accent-2, #36b3a0) 16%, transparent), transparent 65%),
    linear-gradient(180deg, var(--bg-grad-3, #f7f8fc), var(--bg-grad-4, #eef1f7));
}

html[data-theme="light"] .pay-card,
html[data-theme="light"] .success-panel {
  box-shadow: 0 34px 88px rgba(15,23,42,.12), inset 0 1px 0 rgba(255,255,255,.92);
}

html[data-theme="light"] .success-panel {
  color: #0f172a;
  background:
    radial-gradient(520px 260px at 18% 0%, color-mix(in srgb, var(--accent-2, #36b3a0) 10%, transparent), transparent 70%),
    radial-gradient(300px 180px at 88% 6%, color-mix(in srgb, var(--accent, #f5b942) 18%, transparent), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,248,252,.96));
  border-color: rgba(15,23,42,.08);
}

html[data-theme="light"] .success-panel h2 {
  color: #0f172a;
}

html[data-theme="light"] .success-panel p,
html[data-theme="light"] .history-row span,
html[data-theme="light"] .history-row small,
html[data-theme="light"] .history-empty,
html[data-theme="light"] .history-eyebrow {
  color: #6b7280;
}

html[data-theme="light"] .success-meta,
html[data-theme="light"] .history-row,
html[data-theme="light"] .history-empty {
  color: #172033;
  background: rgba(255,255,255,.74);
  border-color: rgba(15,23,42,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 28px rgba(15,23,42,.06);
}

html[data-theme="light"] .success-link {
  color: #172033;
  background: rgba(255,255,255,.82);
  border-color: rgba(15,23,42,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 10px 26px rgba(15,23,42,.07);
}

html[data-theme="light"] .success-link-primary {
  color: #10131b;
  border: 0;
  background: linear-gradient(135deg, var(--accent, #ffcc52), var(--accent-2, #5be3b4));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--accent-2, #5be3b4) 20%, transparent);
}

html[data-theme="light"] .pay-status-overlay {
  background: rgba(235,240,247,.62);
}

html[data-theme="light"] .pay-status-sheet {
  color: #0f172a;
  background:
    radial-gradient(80% 120% at 90% -20%, rgba(245,185,66,.16), transparent 58%),
    rgba(255,255,255,.96);
  box-shadow: 0 28px 80px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.92);
}

html[data-theme="light"] .pay-status-sheet p {
  color: #6b7280;
}

html[data-theme="light"] .pay-card {
  background:
    radial-gradient(520px 260px at 16% 0%, color-mix(in srgb, var(--accent-2, #36b3a0) 10%, transparent), transparent 70%),
    linear-gradient(145deg, rgba(255,255,255,.94), color-mix(in srgb, var(--card, #fff) 82%, transparent)),
    radial-gradient(280px 180px at 92% 8%, color-mix(in srgb, var(--accent, #f5b942) 22%, transparent), transparent 70%);
}

html[data-theme="light"] .pay-card.is-live-update {
  box-shadow: 0 34px 88px rgba(15,23,42,.12), 0 0 0 1px rgba(245,185,66,.14), 0 0 0 14px rgba(54,179,160,.08), inset 0 1px 0 rgba(255,255,255,.92);
}

html[data-theme="light"] .amount-display,
html[data-theme="light"] .free-amount,
html[data-theme="light"] .tip-box,
html[data-theme="light"] .tip,
html[data-theme="light"] .tip-summary-card,
html[data-theme="light"] .pay-footer,
html[data-theme="light"] .amount-input-row,
html[data-theme="light"] .amount-modal-sheet,
html[data-theme="light"] .mode-btn,
html[data-theme="light"] .modal-btn {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 10px 28px rgba(15,23,42,.06);
}

html[data-theme="light"] .staff-line,
html[data-theme="light"] .free-staff-line,
html[data-theme="light"] .amount-display small,
html[data-theme="light"] .pay-status,
html[data-theme="light"] .tip-summary-card span,
html[data-theme="light"] .free-copy small,
html[data-theme="light"] .amount-modal-copy small,
html[data-theme="light"] .amount-modal-copy p {
  color: #6b7280;
}

html[data-theme="light"] .amount-display,
html[data-theme="light"] .free-amount,
html[data-theme="light"] .tip-box,
html[data-theme="light"] .tip-summary-card,
html[data-theme="light"] .pay-footer,
html[data-theme="light"] .amount-modal-sheet {
  background:
    radial-gradient(180px 120px at 86% 16%, rgba(245,185,66,.14), transparent 72%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(244,247,252,.96) 52%, rgba(231,236,244,.94));
}

html[data-theme="light"] .tip,
html[data-theme="light"] .amount-input-row,
html[data-theme="light"] .modal-btn {
  color: #223047;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.92));
}

html[data-theme="light"] .tip.is-active,
html[data-theme="light"] .modal-btn-primary {
  color: #10131b;
}

html[data-theme="light"] .amount-display span,
html[data-theme="light"] .tip-summary-card strong,
html[data-theme="light"] .amount-input-row input,
html[data-theme="light"] .invoice-meta-line,
html[data-theme="light"] .header-title,
html[data-theme="light"] .tip-prompt,
html[data-theme="light"] .free-intro,
html[data-theme="light"] .free-staff-line strong,
html[data-theme="light"] .fee-summary-head strong,
html[data-theme="light"] .fee-summary-line strong {
  color: #0f172a;
}

html[data-theme="light"] .pay-button {
  box-shadow: 0 18px 42px rgba(91, 227, 180, .18), 0 10px 18px rgba(245,185,66,.12);
}

html[data-theme="light"] .live-update-badge {
  box-shadow: 0 14px 30px rgba(54,179,160,.16), 0 8px 18px rgba(245,185,66,.14);
}

.pay-card .amount-pad {
  width: min(100%, 430px);
  gap: 10px;
}

.pay-card .amount-pad button,
.amount-modal-pad.amount-pad button {
  min-height: clamp(46px, 7dvh, 58px);
  border-radius: 16px;
  font-size: clamp(18px, 2.6vw, 21px);
}

@media (max-width: 760px) {
  :root {
    --card-pad: 12px;
    --section-gap: 9px;
    --surface-radius: 22px;
    --amount-size: clamp(2.8rem, 16vw, 4.2rem);
  }
  .pay-page {
    align-items: start;
    padding-inline: clamp(8px, 2.6vw, 12px);
  }
  .brand-row {
    grid-template-columns: minmax(92px, 1fr) auto minmax(40px, 1fr);
    gap: 8px;
  }
  .brand-lockup {
    gap: 6px;
  }
  .brand-logo {
    max-width: min(136px, 27vw);
    max-height: 46px;
  }
  .pay-menu-btn {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    font-size: 22px;
  }
  .header-title {
    text-align: center;
    font-size: clamp(.95rem, 4vw, 1.18rem);
  }
  .mode-btn {
    width: 40px;
    height: 38px;
    justify-self: end;
  }
  .pay-card-shell {
    gap: 9px;
  }
  .amount-display,
  .free-amount,
  .tip-box,
  .pay-footer,
  .amount-modal-sheet {
    padding: 10px;
  }
  .amount-display {
    grid-template-columns: minmax(0, 1fr) minmax(142px, 36%);
    gap: 8px;
    align-items: stretch;
  }
  .amount-display-main {
    gap: 5px;
  }
  .amount-display small,
  .free-copy small,
  .tip-summary-card span,
  .amount-modal-copy small {
    font-size: 9px;
    letter-spacing: .14em;
  }
  .fee-summary {
    min-width: 0;
    gap: 4px;
    padding: 8px 9px;
    border-radius: 16px;
  }
  .fee-summary-head,
  .fee-summary-line {
    gap: 5px;
  }
  .fee-summary-head span,
  .fee-summary-line span,
  .fee-summary-rule,
  .free-fee-hint {
    font-size: clamp(.68rem, 2.6vw, .82rem);
  }
  .fee-summary-head strong,
  .fee-summary-line strong {
    font-size: clamp(.82rem, 3.4vw, 1rem);
  }
  .fee-summary-line span {
    font-size: 0;
  }
  .fee-summary-line span::after {
    content: 'Rechnung';
    font-size: clamp(.68rem, 2.6vw, .82rem);
  }
  .invoice-meta-line {
    justify-content: center;
    text-align: center;
    gap: 4px 7px;
  }
  .tip-grid-percent { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  :root {
    --card-pad: 9px;
    --amount-size: clamp(2.45rem, 15vw, 3.6rem);
  }
  .pay-page { padding-inline: 7px; }
  .pay-card { border-radius: 24px; }
  .amount-display {
    grid-template-columns: minmax(0, 1fr) minmax(126px, 35%);
    gap: 6px;
  }
  .fee-summary {
    padding: 7px 8px;
  }
  .amount-display,
  .free-amount,
  .tip-box,
  .pay-footer,
  .amount-modal-sheet {
    padding: 9px;
  }
  .live-update-badge {
    top: 14px;
    right: 14px;
    max-width: calc(100% - 28px);
    font-size: 10px;
    letter-spacing: .1em;
  }
  .amount-modal-head {
    grid-template-columns: 1fr;
  }
  .tip-grid-percent { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tip-grid-custom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tip { min-height: 50px; }
}

@media (max-height: 820px) {
  :root {
    --card-pad: 18px;
    --amount-size: clamp(2.9rem, min(9vw, 10.6dvh), 5rem);
  }
  .tip-box {
    gap: 10px;
  }
  .pay-button { min-height: 60px; }
}

@media (max-height: 720px) {
  .amount-input-row { min-height: 82px; }
  .tip { min-height: 46px; }
  .pay-card .amount-pad button,
  .amount-modal-pad.amount-pad button { min-height: 42px; font-size: 17px; }
  .pay-status { font-size: 14px; }
}