.dn { position: relative; isolation: isolate; overflow: hidden; }
.dn-glow {
  position: absolute; z-index: -1; top: -180px; right: -160px; width: 440px; height: 380px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 90, 43, .34), rgba(255, 90, 43, .12) 55%, rgba(255, 90, 43, 0));
}

.dn-amounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dn-amount {
  position: relative; display: grid; place-items: center; min-height: 72px; padding: 12px; border-radius: 16px; cursor: pointer;
  background: var(--bg); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.1); transition: box-shadow .15s ease, background-color .15s ease;
}
.dn-amount:hover { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.25); }
.dn-amount input { position: absolute; opacity: 0; pointer-events: none; }
.dn-amount strong { font: 700 22px/1.1 var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dn-amount-own strong { font: 600 17px/1.3 var(--text); }
.dn-amount:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ink); }
.dn-amount:has(input:focus-visible) { outline: 2px solid var(--verm); outline-offset: 2px; }

.dn-own[hidden] { display: none; }
.dn-own .pay-input > span:last-child { color: var(--faint); font-size: 17px; }
.dn-own .pay-input input { font-variant-numeric: tabular-nums; }
.dn-own[data-state="bad"] .pay-input { box-shadow: inset 0 0 0 2px #FF7A52; }
.dn-own[data-state="bad"] #ownHint { color: #FF8A66; }

@media (max-width: 520px) {
  .dn-amount { min-height: 64px; }
  .dn-amount strong { font-size: 20px; }
  .dn-glow { top: -200px; right: -220px; }
}