:root {
  color-scheme: light;
  --ink: #102027;
  --muted: #627179;
  --line: #d9e1e5;
  --paper: #fbfcfd;
  --panel: #ffffff;
  --cash: #00d54b;
  --cash-dark: #00b845;
  --accent: #14b8a6;
  --accent-dark: #0f766e;
  --warm: #f59e0b;
  --danger: #b42318;
  --shadow: 0 24px 70px rgba(18, 38, 63, 0.14);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    linear-gradient(135deg, rgba(20, 184, 166, 0.16), transparent 38%),
    linear-gradient(315deg, rgba(245, 158, 11, 0.18), transparent 36%),
    var(--paper);
}

body.home-page {
  color: #182032;
  background: #f7f7f9;
}

.shell {
  width: min(100% - 32px, 980px);
  margin: 0 auto;
}

.home-shell {
  min-height: 100vh;
  width: min(100%, 430px);
  margin: 0 auto;
  padding: 0 18px 20px;
  background: #fff;
}

.payment-panel {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 15px 0 14px;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.secure-pill {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 15px;
  border-radius: 999px;
  color: #59bc62;
  background: #eefbf0;
  font-size: 0.86rem;
  font-weight: 800;
}

.shield-icon,
.coin-icon,
.lock-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
}

.shield-icon {
  position: relative;
  width: 14px;
  height: 14px;
}

.shield-icon::before,
.shield-icon::after {
  content: "";
  position: absolute;
  clip-path: polygon(50% 0, 88% 17%, 79% 68%, 50% 100%, 21% 68%, 12% 17%);
}

.shield-icon::before {
  inset: 0;
  background: currentColor;
}

.shield-icon::after {
  inset: 2px;
  background: #eefbf0;
}

.amount-form {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

label {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 700;
}

.merchant-card {
  display: grid;
  justify-items: center;
  align-content: center;
  min-height: 136px;
  padding: 22px;
  border: 1px solid #e5eaf0;
  border-radius: 18px;
  background: #fff;
}

.merchant-logo {
  width: 50px;
  height: 50px;
  margin-bottom: 11px;
  border-radius: 12px;
}

.merchant-card strong {
  color: #141b2d;
  font-size: 1rem;
  font-weight: 900;
}

.merchant-card span {
  margin-top: 2px;
  color: #9aa3b2;
  font-size: 0.84rem;
  font-weight: 700;
}

.amount-card {
  display: grid;
  gap: 12px;
  padding: 20px 16px 16px;
  border-radius: 18px;
  background: #eefff0;
}

.amount-card h1 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 8px;
  color: #5fb568;
  font-size: 0.78rem;
  line-height: 1;
  font-weight: 900;
}

.coin-icon {
  width: 15px;
  height: 15px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 0.58rem;
}

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

.preset-button,
.toggle-amounts,
.pay-button,
.copy-button,
.button-link {
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}

.preset-button {
  min-height: 44px;
  color: #1a2232;
  border: 1px solid #c8f1d1;
  background: #fff;
  box-shadow: 0 1px 0 rgba(45, 177, 75, 0.04);
  font-size: 0.94rem;
  font-weight: 900;
}

.preset-button:hover,
.preset-button.is-selected {
  color: #24a641;
  border-color: #5dd669;
  background: #f8fff9;
}

.toggle-amounts {
  min-height: 36px;
  margin-top: 2px;
  color: #53b95e;
  background: #c6f6d0;
  font-size: 0.8rem;
  font-weight: 900;
}

.custom-field {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  margin-top: 2px;
  padding: 0 17px;
  border: 1px solid #bcebc7;
  border-radius: 999px;
  background: #fff;
  color: #42b754;
  font-size: 1.05rem;
  font-weight: 900;
}

.custom-field input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  color: #182032;
  background: transparent;
  font: inherit;
  font-size: 0.93rem;
}

.custom-field input::placeholder {
  color: #a3adba;
  opacity: 1;
}

.pay-button,
.copy-button,
.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  width: 100%;
  color: #fff;
  background: #58d058;
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 900;
}

.pay-button {
  gap: 9px;
  box-shadow: 0 12px 24px rgba(56, 189, 73, 0.24);
}

.pay-button:hover,
.button-link:hover {
  background: #4bc84f;
}

.lock-icon {
  position: relative;
  width: 14px;
  height: 12px;
  margin-top: 3px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.lock-icon::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -8px;
  width: 8px;
  height: 8px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  transform: translateX(-50%);
}

.powered-by {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 12px 0 0;
  color: #a6afbd;
  font-size: 0.8rem;
  font-weight: 700;
}

.powered-by span {
  width: 13px;
  height: 13px;
  border: 1px solid #d5dce6;
  border-radius: 50%;
}

.powered-by strong {
  color: #7d8796;
}

.error {
  margin: 0;
  padding: 12px 14px;
  border-radius: 8px;
  color: var(--danger);
  background: #fff1ef;
  font-size: 0.95rem;
  line-height: 1.45;
}

.invoice-page {
  background: #f8f8fb;
}

.invoice-shell {
  min-height: 100vh;
  width: min(100%, 430px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 26px 11px;
}

.cashapp-receipt {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px 16px 26px;
  border: 1px solid #d9dce4;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(17, 24, 39, 0.08);
}

.phone-speaker {
  align-self: center;
  width: 44px;
  height: 4px;
  margin: 0 0 21px;
  border-radius: 999px;
  background: #d5d9e0;
}

.timer-pill {
  align-self: center;
  width: min(100%, 330px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 36px;
  border-radius: 11px;
  color: #c25e18;
  background: #fff9e9;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.timer-pill span {
  letter-spacing: 0;
}

.timer-pill strong {
  font: inherit;
}

.amount-label {
  margin: 21px 0 2px;
  color: #b6beca;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.cash-amount {
  margin: 0;
  color: #58d05b;
  font-size: 44px;
  line-height: 1;
  font-weight: 900;
  text-align: center;
}

.scan-note {
  margin: 10px 0 18px;
  color: #a5afbc;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.qr-card {
  align-self: center;
  width: min(100%, 330px);
  padding: 20px;
  border: 1px solid #e3e6ec;
  border-radius: 12px;
  background: #fff;
}

.qr-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}

.qr {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.qr-logo-badge {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 63px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 5px solid #fff;
  border-radius: 16px;
  background: #58d05b;
  box-shadow: 0 3px 13px rgba(15, 23, 42, 0.22);
  transform: translate(-50%, -50%);
}

.qr-logo {
  width: 47px;
  height: 47px;
  border-radius: 11px;
}

.receipt-meta {
  align-self: center;
  width: min(100%, 330px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin: 20px 0 11px;
}

.receipt-meta div,
.lightning-row {
  min-height: 39px;
  display: flex;
  align-items: center;
  border-radius: 8px;
  background: #fbfcfe;
}

.receipt-meta div {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 7px 11px;
}

.receipt-meta dt {
  color: #c2c8d1;
  font-size: 9px;
  line-height: 1;
  font-weight: 900;
}

.receipt-meta dd {
  margin: 3px 0 0;
  color: #242c3a;
  font: 900 12px/1.1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 9px;
  font-weight: 900;
  white-space: nowrap;
}

.status-unpaid,
.status-checking {
  color: #b96a0d;
  background: #fff0c9;
}

.status-paid {
  color: #12743d;
  background: #dcf8e4;
}

.status-expired {
  color: #a52a2a;
  background: #ffe2e2;
}

.lightning-row {
  align-self: center;
  width: min(100%, 330px);
  justify-content: space-between;
  gap: 12px;
  padding: 0 13px;
  color: #94a0af;
  font-size: 12px;
  font-weight: 800;
}

.lightning-row strong {
  min-width: 0;
  color: #687383;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 900 11px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.pay-now-button,
.invoice-copy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: inherit;
  cursor: pointer;
}

.pay-now-button {
  align-self: center;
  width: min(100%, 330px);
  gap: 8px;
  min-height: 54px;
  margin-top: 22px;
  border-radius: 999px;
  color: #fff;
  background: #58d05b;
  text-decoration: none;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(40, 190, 70, 0.26);
}

.pay-now-button:hover {
  background: #4cc64f;
}

.cash-icon {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.86);
  border-radius: 7px;
}

.cash-icon img {
  width: 19px;
  height: 19px;
}

.invoice-copy-button {
  align-self: center;
  width: min(100%, 330px);
  gap: 7px;
  min-height: 38px;
  margin-top: 13px;
  border: 0;
  color: #727d8c;
  background: transparent;
  font-size: 14px;
  font-weight: 900;
}

.copy-glyph {
  position: relative;
  width: 14px;
  height: 14px;
}

.copy-glyph::before,
.copy-glyph::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border: 2px solid #8d97a5;
  border-radius: 3px;
}

.copy-glyph::before {
  left: 1px;
  top: 1px;
}

.copy-glyph::after {
  right: 1px;
  bottom: 1px;
  background: #fff;
}

.settle-note {
  margin: 4px 0 0;
  color: #b3bbc6;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
}

textarea {
  width: 100%;
  min-height: 54px;
  resize: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  color: var(--ink);
  background: #fff;
  font: 0.9rem/1.45 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

@media (max-width: 760px) {
  .home-shell {
    padding-inline: 16px;
  }

  .payment-panel {
    padding: 15px 0 14px;
  }

  .invoice-shell {
    align-items: flex-start;
    padding: 18px 8px;
  }

  .qr-card {
    padding: 17px;
  }

  .admin-header,
  .admin-search div {
    align-items: stretch;
    flex-direction: column;
  }

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

  .admin-search select,
  .admin-search button {
    width: 100%;
  }
}

@media (max-width: 380px) {
  .cashapp-receipt {
    padding-inline: 13px;
  }

  .cash-amount {
    font-size: 39px;
  }

  .qr-logo-badge {
    width: 56px;
  }

  .qr-logo {
    width: 42px;
    height: 42px;
  }

  .admin-metrics {
    grid-template-columns: 1fr;
  }
}

.admin-page {
  background: #f5f7fa;
}

.admin-shell {
  width: min(100% - 28px, 1180px);
  margin: 0 auto;
  padding: 28px 0 40px;
}

.admin-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.admin-header p {
  margin: 0 0 4px;
  color: #58b95d;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-header h1 {
  margin: 0;
  color: #101828;
  font-size: 2rem;
  line-height: 1.1;
}

.admin-header a,
.admin-pagination a {
  color: #12913a;
  font-weight: 900;
  text-decoration: none;
}

.admin-search,
.admin-empty,
.admin-table-wrap,
.admin-error,
.admin-warning {
  border: 1px solid #e1e6ee;
  border-radius: 8px;
  background: #fff;
}

.admin-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.admin-metrics article {
  min-height: 92px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 16px;
  border: 1px solid #e1e6ee;
  border-radius: 8px;
  background: #fff;
}

.admin-metrics span {
  color: #667085;
  font-size: 0.78rem;
  font-weight: 900;
}

.admin-metrics strong {
  color: #101828;
  font-size: 1.28rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.admin-metrics small {
  color: #12913a;
  font-size: 0.86rem;
  font-weight: 900;
}

.admin-search {
  display: grid;
  gap: 10px;
  padding: 16px;
  margin-bottom: 16px;
}

.admin-search div {
  display: flex;
  gap: 10px;
}

.admin-search input,
.admin-search select {
  min-width: 0;
  min-height: 44px;
  border: 1px solid #d6deea;
  border-radius: 8px;
  padding: 0 12px;
  color: #101828;
  font: 0.96rem/1.4 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.admin-search input {
  flex: 1;
}

.admin-search select {
  width: 118px;
  background: #fff;
  font-family: inherit;
  font-weight: 900;
}

.admin-search button {
  width: auto;
  min-width: 112px;
  min-height: 44px;
  border-radius: 8px;
  background: #111827;
}

.admin-empty,
.admin-error,
.admin-warning {
  padding: 18px;
  margin-bottom: 16px;
}

.admin-empty p,
.admin-error,
.admin-warning {
  color: #667085;
  font-weight: 800;
}

.admin-error {
  color: var(--danger);
  background: #fff7f5;
}

.admin-warning {
  color: #8a4b05;
  background: #fff8e6;
}

.admin-table-wrap {
  overflow-x: auto;
  margin-bottom: 16px;
}

.admin-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  padding: 13px 14px;
  border-bottom: 1px solid #edf1f6;
  text-align: left;
  vertical-align: top;
}

.admin-table th {
  color: #667085;
  background: #fbfcfe;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.admin-table td {
  color: #182032;
  font-size: 0.9rem;
  font-weight: 700;
}

.mono-cell {
  max-width: 280px;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.desc-cell {
  max-width: 220px;
  overflow-wrap: anywhere;
}

.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.admin-pagination span {
  color: #a5adba;
  font-weight: 900;
}

.admin-pagination strong {
  color: #344054;
}