.amount-pad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: min(100%, 420px);
}

.amount-pad button {
  min-height: 54px;
  border: 1px solid var(--line-strong, rgba(255,255,255,.18));
  border-radius: 18px;
  color: var(--fg, #fff);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card, #111827) 86%, white 8%), var(--card, #111827)),
    var(--glass, rgba(255,255,255,.08));
  box-shadow:
    0 14px 28px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
  font: inherit;
  font-size: 21px;
  font-weight: 950;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.amount-pad button:active {
  transform: translateY(1px) scale(.985);
  box-shadow:
    0 8px 18px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.amount-pad button:disabled,
.amount-pad button[aria-disabled="true"] {
  opacity: .42;
  cursor: not-allowed;
  filter: grayscale(.25);
  transform: none;
  box-shadow:
    0 6px 16px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.amount-pad .amount-pad-action {
  color: var(--muted, #8b96a7);
  font-size: 20px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--glass, rgba(255,255,255,.08)) 84%, transparent), var(--glass, rgba(255,255,255,.08)));
}

.amount-pad .amount-pad-clear {
  color: var(--fg, #fff);
  font-size: 22px;
}

.amount-pad .amount-pad-accent {
  color: #10131b;
  background: linear-gradient(135deg, var(--accent, #ffcc52), var(--accent-2, #5be3b4));
}

html[data-theme="light"] .amount-pad button {
  box-shadow:
    0 14px 30px rgba(15,23,42,.1),
    inset 0 1px 0 rgba(255,255,255,.9);
}

html[data-theme="light"] .amount-pad .amount-pad-clear {
  color: #223047;
}