/* 支払いの画面(public/js/pay.js)。色は app.css の札(--surface・--accent など)だけを使う。375 幅で横に溢れない */
.pay-facts { gap: 4px; }
.pay-rate { font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.pay-intent { gap: 14px; }
.pay-field { display: grid; gap: 6px; min-width: 0; }
.pay-lbl { font-size: 12px; font-weight: 700; color: var(--text-3); }
.pay-copy { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pay-copy code { flex: 1; min-width: 0; font-size: 14px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); color: var(--text); overflow-wrap: anywhere; word-break: break-all; user-select: all; }
.pay-copy .btn { flex: none; }
.pay-amount { font-size: 17px !important; font-weight: 800; }
.pay-unit { font-weight: 800; font-size: 13px; color: var(--text-2); flex: none; }
.pay-left { font-size: 13px; font-weight: 700; color: var(--text-2); }
.pay-left.over { color: var(--warn); }
.pay-note:empty { display: none; }
.pay-done { text-align: center; justify-items: center; gap: 10px; }
.pay-done .btn { width: 100%; }
.pay-done-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.pay-done-ic .ic { width: 28px; height: 28px; }
.pay-reopen { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.pay-cur label { align-items: center; }
.pay-cur .pay-off { opacity: .6; }
.pay-kv dd { word-break: normal; overflow-wrap: anywhere; }
.pay-warn { margin: 0; font-size: 13px; font-weight: 700; color: var(--warn); }