:root { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #101828; background: #f9fafb; }

    * { box-sizing: border-box; }

    body { margin: 0; min-height: 100vh; padding: 32px 16px; }

    button, input, textarea { font: inherit; }

    button { cursor: pointer; }

    :is(button, input, textarea, a):focus-visible { outline: 3px solid #078d37; outline-offset: 3px; }

    .card { width: min(100%, 384px); margin: 0 auto; padding: 24px; background: #fff; border-radius: 28px; box-shadow: 0 8px 30px #00000014; }

    .heading { text-align: center; margin: 5px 0 10px; font-size: 22px; font-weight: 800; }

    .heading span { color: #009d3a; }

    .badge { display: table; margin: 0 auto 32px; padding: 6px 12px; border-radius: 999px; background: #e9faf1; color: #00892d; font-size: 12px; font-weight: 750; }

    .merchant { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 174px; margin-bottom: 20px; border: 1px solid #edf0f3; border-radius: 17px; text-align: center; }

    .mark { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 12px; border-radius: 16px; background: #00c84a; color: #fff; font-size: 38px; font-weight: 800; }

    .merchant strong { font-size: 18px; }

    .merchant small { margin-top: 4px; color: #8490a0; font-size: 14px; font-weight: 700; }

    .amount-panel { padding: 16px; border-radius: 17px; background: #e9faf1; }

    .label { display: block; margin-bottom: 12px; color: #009536; font-size: 12px; font-weight: 800; letter-spacing: .02em; }

    .amount-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

    .amount-choice { min-height: 42px; border: 1px solid #dbe4de; border-radius: 999px; background: #fff; color: #101828; font-size: 14px; font-weight: 750; }

    .amount-choice[aria-pressed="true"] { border-color: #00bd44; background: #00c84a; color: #fff; }

    .custom { display: flex; align-items: center; height: 42px; margin-top: 12px; padding: 0 16px; border: 1px solid #dbe4de; border-radius: 999px; background: #fff; color: #00a73d; font-weight: 800; }

    .custom input { width: 100%; min-width: 0; padding: 0 9px; border: 0; outline: 0; background: transparent; color: #101828; font-weight: 650; }

    .custom input::placeholder { color: #86909e; }

    .pay { display: block; width: 100%; min-height: 56px; margin-top: 32px; border: 0; border-radius: 999px; background: #00c84a; color: #fff; font-size: 16px; font-weight: 800; box-shadow: 0 7px 15px #00c84a2b; }

    .pay:disabled { opacity: .65; cursor: wait; }

    .error { margin: 10px 2px 0; color: #b42318; font-size: 13px; line-height: 1.4; }

    .error:empty, .footer { display: none; }

    [hidden] { display: none !important; }

    #share-tools { margin-bottom: 20px; text-align: right; }

    .checkout[hidden], .selection[hidden] { display: none; }

    .card.checkout-mode { position: relative; width: min(100%, 384px); padding: 24px; }

    .back { position: absolute; top: 17px; left: 18px; padding: 4px; border: 0; background: none; color: #11833b; font-size: 18px; font-weight: 750; }

    .time-pill { display: table; margin: 0 auto 20px; padding: 7px 12px; border-radius: 999px; background: #fff7e8; color: #bd6900; font-size: 12px; font-weight: 800; letter-spacing: .03em; }

    .due-label { margin: 0; color: #929aa5; text-align: center; font-size: 12px; font-weight: 800; letter-spacing: .16em; }

    .due-amount { margin: 5px 0 3px; color: #00be48; text-align: center; font-size: 38px; font-weight: 850; line-height: 1.05; }

    .checkout .summary { margin: 0 0 19px; color: #8992a0; text-align: center; font-size: 14px; }

    .qr-wrap { position: relative; display: grid; place-items: center; width: min(100%, 320px); aspect-ratio: 1; margin: 0 auto 20px; padding: 14px; border: 1px solid #e9edf2; border-radius: 30px; box-shadow: 0 2px 4px #1018280a; }

    .qr-wrap img { display: block; width: 100%; height: auto; aspect-ratio: 1; }

    .qr-logo { display: none; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; place-items: center; transform: translate(-50%, -50%); border: 4px solid #fff; border-radius: 13px; background: #00c84a; color: #fff; font-size: 29px; font-weight: 800; line-height: 1; pointer-events: none; }

    .qr-wrap.loaded .qr-logo { display: grid; }

    .qr-fallback { display: none; color: #b42318; text-align: center; font-size: 13px; }

    .qr-wrap.failed .qr-fallback { display: block; }

    .qr-wrap.failed img { display: none; }

    .detail-card { padding: 14px; border-radius: 17px; background: #f8fafc; }

    .detail-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

    .detail-label { color: #929aa5; font-size: 10px; font-weight: 800; letter-spacing: .07em; }

    .detail-value { display: block; margin-top: 4px; color: #101828; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }

    .detail-divider { height: 1px; margin: 10px 0; background: #e1e6ec; }

    .status { padding: 7px 9px; border-radius: 999px; background: #fff6e6; color: #b96500; text-align: center; white-space: nowrap; font-size: 10px; font-weight: 800; }

    .status.paid { background: #e9f9ee; color: #067a31; }

    .status.expired { background: #f2f4f7; color: #667085; }

    .receipt { text-align: center; }

    .receipt[hidden] { display: none; }

    .receipt-check { display: grid; place-items: center; width: 72px; height: 72px; margin: 12px auto 20px; border-radius: 50%; background: #e9faf1; color: #009d3a; font-size: 38px; }

    .receipt h2 { margin: 0 0 8px; font-size: 28px; color: #00892d; }

    .receipt h2:focus { outline: none; }

    .receipt p { margin: 0 0 24px; color: #687381; font-size: 14px; }

    .receipt dl { margin: 24px 0 0; padding: 18px; border-radius: 17px; background: #f8fafc; text-align: left; }

    .receipt dt { margin-top: 16px; color: #687381; font-size: 11px; font-weight: 750; letter-spacing: .05em; }

    .receipt dt:first-child { margin-top: 0; }

    .receipt dd { margin: 6px 0 0; font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }

    .receipt .pay { background: #101828; box-shadow: none; }

    .invoice-label { display: block; margin: 16px 0 8px; color: #667085; font-size: 13px; font-weight: 750; }

    .invoice { width: 100%; min-height: 96px; padding: 10px; border: 1px solid #dce2eb; border-radius: 11px; background: #f8fafb; color: #344054; resize: vertical; overflow-wrap: anywhere; font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }

    .cashapp { display: grid; place-items: center; min-height: 56px; margin-top: 16px; border-radius: 999px; background: #00c84a; color: #fff; text-decoration: none; font-size: 16px; font-weight: 800; box-shadow: 0 8px 20px #00c84a25; }

    .cashapp[aria-disabled="true"] { pointer-events: none; background: #cbd5d1; box-shadow: none; }

    .actions { display: flex; justify-content: center; gap: 16px; margin-top: 12px; }

    .action { border: 0; background: none; color: #687381; text-decoration: none; font-size: 12px; font-weight: 750; }

    .hint { margin: 18px 0 0; color: #8892a0; text-align: center; font-size: 11px; line-height: 1.5; }

    @media (min-width: 640px) { body { padding-top: 48px; padding-bottom: 48px; } }

    @media (max-width: 390px) { .amount-grid { gap: 8px; } .detail-top { align-items: flex-start; } .status { white-space: normal; } }

  /* Reference checkout header: restrained sheet handle, centered title and secure label. */
.selection .checkout-intro {
  margin-top: -14px;
  text-align: center;
}
.sheet-handle {
  width: 44px;
  height: 4px;
  margin: 0 auto 19px;
  border-radius: 999px;
  background: #d1d5db;
}
.checkout-intro .heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 11px;
  color: #101828;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
}
.checkout-intro .heading span {
  color: #00c84a;
}
.checkout-intro .heading .title-check {
  display: inline-grid;
  flex: 0 0 16px;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #249cf0;
  color: #fff;
}
.title-check svg {
  display: block;
  width: 11px;
  height: 11px;
}
.checkout-intro .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0 auto 20px;
  padding: 8px 13px;
  border-radius: 999px;
  background: #ecfdf3;
  color: #008b35;
  font-size: 14px;
  font-weight: 750;
  line-height: 18px;
}
.secure-mark {
  display: inline-grid;
  flex: 0 0 18px;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #00be50;
  color: #fff;
}
.secure-mark svg {
  display: block;
  width: 12px;
  height: 12px;
}

  
.mobile-subtitle { margin: -6px 0 22px; color: #667085; text-align: center; font-size: 13px; }
.mobile-note { margin: 8px 0 0; color: #526175; font-size: 13px; line-height: 1.5; }
.mobile-qr { display: flex; justify-content: center; margin: 18px auto 0; }
.mobile-qr img { display: block; width: min(100%, 280px); height: auto; image-rendering: pixelated; }
.mobile-pay { display: flex; align-items: center; justify-content: center; margin-top: 18px; text-decoration: none; text-align: center; }
.mobile-copy { display: block; width: 100%; min-height: 44px; margin-top: 12px; border: 1px solid #dbe4de; border-radius: 999px; background: #fff; color: #087a35; font-weight: 700; }
.mobile-feedback { margin: 8px 0; min-height: 18px; color: #087a35; text-align: center; font-size: 12px; }
.mobile-hint { margin: 12px 0 0; font-size: 12px; color: #667085; text-align: center; line-height: 1.6; }
details { margin-top: 8px; font-size: 12px; color: #526175; }
summary { cursor: pointer; padding: 8px 0; }
#offer-code { display: block; width: 100%; height: 100px; margin-top: 8px; padding: 10px; border: 1px solid #dbe4de; border-radius: 12px; resize: vertical; color: #344054; font: 12px/1.6 monospace; overflow-wrap: anywhere; }
@media (max-width: 360px) { body { padding: 16px 12px; } .card { padding: 20px; } }