/* pay.css — UPI Gateway: Payment, QR code, Result and History views (v4) */

/* Base App Layout (Mobile First + Desktop Centered) */
.app-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.pay-shell {
  width: 100%;
  max-width: min(440px, 100vw);
  margin: 0 auto;
  padding: clamp(8px, 1.8vh, 18px) clamp(10px, 3vw, 16px) max(14px, env(safe-area-inset-bottom, 14px));
  box-sizing: border-box;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Aligned to top, not vertically centered */
}

.pay-shell.hx-shell {
  justify-content: flex-start;
  max-width: 780px;
  width: 100%;
  padding: clamp(10px, 1.8vh, 20px) clamp(10px, 3vw, 18px) max(20px, env(safe-area-inset-bottom, 20px));
}

@media (min-width: 640px) {
  .app-page .pay-shell {
    max-width: 480px;
    padding-top: 24px;
    padding-bottom: 32px;
    justify-content: flex-start;
  }
  .app-page .pay-shell.hx-shell {
    max-width: 780px;
    padding: 20px clamp(16px, 3vw, 24px) max(36px, env(safe-area-inset-bottom, 24px));
  }
}

.hx-nav-short { display: none; }

.pay-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: clamp(14px, 3vw, 20px);
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  position: relative;
  animation: payIn .25s ease both;
  width: 100%;
  box-sizing: border-box;
}
@keyframes payIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ═════════════════════════════════════════════════
   1. Amount Collection Screen
═════════════════════════════════════════════════ */
.pay-hero {
  padding: clamp(7px, 1.1vh, 12px) clamp(10px, 2.8vw, 15px);
  color: #fff;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #4f46e5 0%, #6d28d9 60%, #7c3aed 100%);
}
.pay-hero::after {
  content: '';
  position: absolute;
  right: -50px;
  top: -60px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .09);
  pointer-events: none;
}
.pay-hero::before {
  content: '';
  position: absolute;
  left: -40px;
  bottom: -70px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  pointer-events: none;
}

.pay-to {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: clamp(5px, 0.8vh, 8px) clamp(8px, 2vw, 12px);
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 12px;
  position: relative;
  z-index: 1;
}
.pay-to-avatar {
  width: clamp(28px, 4.2vh, 32px);
  height: clamp(28px, 4.2vh, 32px);
  border-radius: 9px;
  background: rgba(255, 255, 255, .95);
  color: #4f46e5;
  font-weight: 800;
  font-size: 0.9rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.pay-to-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.pay-to-info small {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .85;
  font-weight: 700;
}
.pay-to-info b {
  font-size: clamp(0.84rem, 2.2vw, 0.9rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pay-to-info span {
  font-size: .72rem;
  opacity: .88;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}

.pay-body {
  padding: clamp(8px, 1.4vh, 16px) clamp(10px, 3vw, 18px);
}

.pay-amount-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: clamp(5px, 1vh, 10px) 10px;
  border-radius: 14px;
  background: #f8fafc;
  border: 2px solid var(--border);
  transition: border-color .15s, box-shadow .15s, background .15s;
  cursor: text;
}
.pay-amount-box:focus-within {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px var(--primary-light);
}
.pay-amount-box .cur {
  font-size: clamp(1.35rem, 4.2vw, 1.7rem);
  font-weight: 700;
  color: var(--text-3);
  line-height: 1;
  flex-shrink: 0;
}
.pay-amount-box #amount,
.pay-amount-box input {
  border: 0;
  outline: 0;
  background: transparent;
  width: 100%;
  max-width: 280px;
  text-align: center;
  min-width: 0;
  padding: 0;
  margin: 0;
  height: auto;
  font: inherit;
  font-size: clamp(1.85rem, 6vw, 2.45rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  -webkit-appearance: none;
  appearance: none;
}
.pay-amount-box #amount::placeholder,
.pay-amount-box input::placeholder {
  color: #cbd5e1;
  font-weight: 800;
}
.pay-limit {
  text-align: center;
  font-size: .72rem;
  color: var(--text-3);
  margin-top: clamp(2px, 0.4vh, 4px);
  min-height: 1.1em;
}

.pay-chips {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(4px, 1.2vw, 7px);
  justify-content: center;
  margin: clamp(4px, 0.8vh, 8px) 0 2px;
}
.pay-chip {
  padding: clamp(5px, 0.8vh, 7px) clamp(8px, 2vw, 12px);
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: clamp(0.74rem, 2vw, 0.82rem);
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  font-variant-numeric: tabular-nums;
  min-height: clamp(32px, 4.2vh, 36px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pay-chip:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}
.pay-chip:active {
  transform: scale(.97);
}
.pay-chip.recent {
  border-style: dashed;
  color: var(--text-2);
}
.pay-chips-label {
  width: 100%;
  text-align: center;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  font-weight: 700;
  margin-top: 2px;
}

.pay-sum {
  margin-top: clamp(5px, 0.9vh, 9px);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  animation: payIn .2s ease both;
}
.pay-sum-row {
  display: flex;
  justify-content: space-between;
  padding: clamp(4px, 0.6vh, 6px) 10px;
  font-size: clamp(0.76rem, 2vw, 0.82rem);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.pay-sum-row + .pay-sum-row {
  border-top: 1px dashed var(--border);
}
.pay-sum-row.total {
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight: 800;
  font-size: clamp(0.82rem, 2.2vw, 0.9rem);
}

.pay-note {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin-top: clamp(4px, 0.7vh, 8px);
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--warning-bg);
  color: #92400e;
  font-size: .74rem;
  line-height: 1.3;
}

.pay-cta {
  width: 100%;
  margin-top: clamp(7px, 1.3vh, 14px);
  padding: clamp(8px, 1.3vh, 13px) 14px;
  border: 0;
  border-radius: 13px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  box-shadow: 0 6px 18px -5px rgba(79, 70, 229, .5);
  font: inherit;
  font-size: clamp(0.9rem, 2.4vw, 1.02rem);
  font-weight: 800;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: clamp(42px, 5.5vh, 48px);
  transition: transform .08s, box-shadow .15s, opacity .15s;
}
.pay-cta:hover:not(:disabled) {
  box-shadow: 0 10px 22px -5px rgba(79, 70, 229, .65);
}
.pay-cta:active:not(:disabled) {
  transform: translateY(1px) scale(.995);
}
.pay-cta:disabled {
  opacity: .65;
  cursor: not-allowed;
  box-shadow: none;
}
.pay-cta svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btnSpin .65s linear infinite;
  display: inline-block;
  flex-shrink: 0;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* ═════════════════════════════════════════════════
   2. QR Screen
═════════════════════════════════════════════════ */
.qr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: clamp(6px, 0.9vh, 10px) clamp(10px, 2.5vw, 14px);
  border-bottom: 1px solid var(--border);
  background: #fcfcfd;
}
.qr-payee {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex: 1;
}
.qr-payee-avatar {
  width: clamp(28px, 4.2vh, 32px);
  height: clamp(28px, 4.2vh, 32px);
  border-radius: 9px;
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
  color: #fff;
  font-weight: 800;
  font-size: 0.88rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.qr-payee-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.qr-payee-info small {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-3);
  font-weight: 700;
}
.qr-payee-info b {
  font-size: clamp(0.82rem, 2.2vw, 0.88rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qr-payee-upi {
  font-size: .66rem;
  color: var(--text-3);
  font-family: var(--font-mono, monospace);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.ring {
  position: relative;
  width: clamp(34px, 4.8vh, 42px);
  height: clamp(34px, 4.8vh, 42px);
  flex-shrink: 0;
}
.ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  display: block;
}
.ring circle {
  fill: none;
  stroke-width: 5;
}
.ring .track {
  stroke: #e5e7eb;
}
.ring .prog {
  stroke: var(--primary);
  stroke-linecap: round;
  transition: stroke-dashoffset .9s linear, stroke .3s;
}
.ring.warn .prog { stroke: var(--warning); }
.ring.danger .prog { stroke: var(--danger); }
.ring.verify .prog { stroke: var(--text-3); }

.ring-text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(0.64rem, 1.4vh, 0.72rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.qr-body {
  padding: clamp(6px, 1.1vh, 13px) clamp(10px, 2.5vw, 16px);
  text-align: center;
}
.qr-amount {
  font-size: clamp(1.45rem, 4.8vw, 1.95rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.qr-amount .cur {
  font-size: clamp(1.05rem, 3.2vw, 1.25rem);
  color: var(--text-3);
  margin-right: 2px;
  font-weight: 700;
}
.qr-split {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  margin-top: clamp(2px, 0.4vh, 4px);
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--text-2);
  font-size: .68rem;
  font-variant-numeric: tabular-nums;
}

.qr-frame {
  position: relative;
  width: clamp(260px, 78vw, 320px);
  max-width: 320px;
  aspect-ratio: 1 / 1;
  margin: clamp(6px, 1.2vh, 12px) auto;
  padding: clamp(8px, 1.8vw, 12px);
  border-radius: 16px;
  background: #fff;
  box-sizing: border-box;
  box-shadow: 0 0 0 1px var(--border), 0 12px 28px -10px rgba(79, 70, 229, .24);
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 640px) {
  .qr-frame {
    width: clamp(300px, 36vw, 360px);
    max-width: 360px;
    padding: 14px;
  }
}
.qr-frame #qr-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
}
.qr-frame #qr-container svg,
.qr-frame #qr-container img,
.qr-frame #qr-container canvas {
  width: 100%;
  max-width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  border-radius: 6px;
  shape-rendering: crispEdges;
  background: #fff;
  animation: qrReveal .2s cubic-bezier(.16, 1, .3, 1) both;
}
.qr-frame #qr-container svg rect,
.qr-frame #qr-container svg path {
  shape-rendering: crispEdges;
}
@keyframes qrReveal {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: scale(1); }
}
.qr-skeleton {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
  background-size: 200% 100%;
  animation: qrShimmer 1.2s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qr-skeleton-icon { width: 28px; height: 28px; color: var(--primary); opacity: .4; }
@keyframes qrShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.qr-frame .c {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 3px solid var(--primary);
  pointer-events: none;
}
.qr-frame .c.tl { top: -2px; left: -2px; border-right: 0; border-bottom: 0; border-top-left-radius: 14px; }
.qr-frame .c.tr { top: -2px; right: -2px; border-left: 0; border-bottom: 0; border-top-right-radius: 14px; }
.qr-frame .c.bl { bottom: -2px; left: -2px; border-right: 0; border-top: 0; border-bottom-left-radius: 14px; }
.qr-frame .c.br { bottom: -2px; right: -2px; border-left: 0; border-top: 0; border-bottom-right-radius: 14px; }
.qr-frame.done { opacity: .35; filter: grayscale(1); }

.qr-hint {
  font-size: clamp(0.68rem, 1.8vw, 0.74rem);
  color: var(--text-2);
  margin-top: clamp(2px, 0.4vh, 4px);
}
.qr-apps {
  display: flex;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: clamp(2px, 0.4vh, 4px);
}
.qr-apps span {
  font-size: .62rem;
  font-weight: 700;
  color: var(--text-2);
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 999px;
}

.qr-actions {
  display: none;
  gap: 5px;
  justify-content: center;
  margin-top: clamp(5px, 0.9vh, 9px);
  flex-wrap: wrap;
}
.qr-actions button,
.qr-actions a {
  flex: 1 1 100%;
  width: 100%;
  text-align: center;
  justify-content: center;
  min-height: clamp(34px, 4.5vh, 40px);
  padding: 6px 12px;
  font-size: clamp(0.8rem, 2.1vw, 0.86rem);
  font-weight: 700;
  border-radius: 9px;
}
.qr-actions .qr-upi-open {
  display: inline-flex;
}
@media (max-width: 639.98px), (hover: none) and (pointer: coarse) {
  .qr-actions { display: flex; }
}

.qr-instant-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(6px, 1vh, 10px);
  width: 100%;
}
.qr-instant-wrap.hidden {
  display: none !important;
}
.qr-instant-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: clamp(38px, 4.8vh, 44px);
  padding: 8px 16px;
  font-size: clamp(0.85rem, 2.2vw, 0.95rem);
  font-weight: 700;
  border-radius: 10px;
  background: var(--primary, #2563eb);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: all .15s ease;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}
.qr-instant-btn:hover {
  background: var(--primary-hover, #1d4ed8);
}
.qr-instant-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.qr-status {
  margin-top: clamp(5px, 0.9vh, 8px);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: clamp(4px, 0.6vh, 7px) 9px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid var(--border);
  text-align: left;
}
.qr-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warning);
  position: relative;
  flex-shrink: 0;
}
.qr-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--warning);
  animation: qrPulse 1.6s ease-out infinite;
}
.qr-status.verifying .qr-dot { background: var(--primary); }
.qr-status.verifying .qr-dot::after { border-color: var(--primary); }
@keyframes qrPulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
.qr-status-text {
  font-size: clamp(0.74rem, 1.9vw, 0.8rem);
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.qr-status-sub {
  font-size: clamp(0.64rem, 1.6vw, 0.68rem);
  color: var(--text-3);
  line-height: 1.2;
}

.qr-foot {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: clamp(5px, 0.9vh, 8px);
}
.pay-btn-outline {
  padding: 5px 9px;
  border-radius: 9px;
  font: inherit;
  font-weight: 700;
  font-size: clamp(0.74rem, 1.8vw, 0.78rem);
  cursor: pointer;
  background: #fff;
  transition: background .15s;
  min-height: clamp(32px, 4.2vh, 36px);
}
.pay-btn-outline.success {
  border: 1.5px solid var(--success);
  color: var(--success-dark);
}
.pay-btn-outline.success:hover { background: var(--success-bg); }
.pay-btn-outline.danger {
  border: 1.5px solid #fecaca;
  color: var(--danger);
}
.pay-btn-outline.danger:hover { background: var(--danger-bg); }

/* ═════════════════════════════════════════════════
   3. Result Screen
═════════════════════════════════════════════════ */
.res-card { text-align: center; }
.res-top {
  padding: clamp(14px, 2vh, 22px) 14px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.res-top.success { background: linear-gradient(135deg, #059669, #10b981); }
.res-top.expired { background: linear-gradient(135deg, #b45309, #f59e0b); }
.res-top.cancelled { background: linear-gradient(135deg, #475569, #64748b); }
.res-top.failed { background: linear-gradient(135deg, #dc2626, #ef4444); }
.res-top::after {
  content: '';
  position: absolute;
  right: -50px;
  top: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  pointer-events: none;
}
.res-icon {
  width: clamp(46px, 6vh, 54px);
  height: clamp(46px, 6vh, 54px);
  margin: 0 auto 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
  animation: resPop .5s cubic-bezier(.2, 1.4, .4, 1) both;
}
.res-icon svg {
  width: 26px;
  height: 26px;
  stroke: #fff;
  fill: none;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.res-icon svg path {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: resDraw .45s .25s ease forwards;
}
@keyframes resPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes resDraw { to { stroke-dashoffset: 0; } }
.res-title {
  font-size: .92rem;
  font-weight: 700;
  opacity: .95;
  position: relative;
  z-index: 1;
}
.res-amount {
  font-size: clamp(1.75rem, 5.5vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.035em;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 1;
}
.res-sub {
  font-size: .78rem;
  opacity: .9;
  margin-top: 2px;
  position: relative;
  z-index: 1;
}
.res-body {
  padding: clamp(10px, 1.5vh, 16px) 16px;
  text-align: left;
}
.res-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: clamp(5px, 0.8vh, 8px) 0;
  font-size: clamp(0.78rem, 2vw, 0.84rem);
  border-bottom: 1px dashed var(--border);
  min-width: 0;
}
.res-row:last-of-type { border-bottom: 0; }
.res-row span:first-child { color: var(--text-2); flex-shrink: 0; }
.res-row b {
  font-variant-numeric: tabular-nums;
  text-align: right;
  word-break: break-all;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
}
.res-row .mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .74rem; }
.hx-receipt-divider { margin: 5px 0; border-top: 1px dashed var(--border); }
.hx-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: capitalize;
  letter-spacing: 0.01em;
}
.hx-badge.s-success { background: var(--success-bg); color: var(--success-dark); }
.hx-badge.s-pending { background: var(--warning-bg); color: #b45309; }
.hx-badge.s-expired, .hx-badge.s-cancelled, .hx-badge.s-failed { background: var(--danger-bg); color: #b91c1c; }
.res-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: clamp(8px, 1.4vh, 12px);
}
.res-actions .pay-cta { margin-top: 0; min-height: 42px; }
.res-link {
  text-align: center;
  font-size: .8rem;
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
  padding: 4px;
}

/* ═════════════════════════════════════════════════
   4. History Screen (v4 redesign)
═════════════════════════════════════════════════ */
.hx-hero-card {
  margin-bottom: 12px;
  border-radius: clamp(16px, 3vw, 20px);
  overflow: hidden;
}

.hx-hero {
  padding: clamp(14px, 2vh, 22px) clamp(12px, 2.5vw, 20px) clamp(12px, 1.8vh, 18px);
  color: #fff;
  position: relative;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(135deg, #4f46e5 0%, #6d28d9 60%, #7c3aed 100%);
}
.hx-hero::after {
  content: '';
  position: absolute;
  right: -50px;
  top: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  pointer-events: none;
}
.hx-hero::before {
  content: '';
  position: absolute;
  left: -40px;
  bottom: -70px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  pointer-events: none;
}
.hx-hero-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity: .88;
  font-weight: 700;
  position: relative;
  z-index: 1;
}
.hx-hero-amount {
  font-size: clamp(1.85rem, 6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 3px 0 2px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  position: relative;
  z-index: 1;
}
.hx-hero-sub {
  font-size: .78rem;
  opacity: .88;
  position: relative;
  z-index: 1;
  min-height: 1.2em;
}

.hx-hero-month-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .25);
  position: relative;
  z-index: 1;
  min-height: 32px;
}
.hx-hero-nav-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background .15s, opacity .15s;
  padding: 0;
}
.hx-hero-nav-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, .25);
}
.hx-hero-nav-btn:disabled {
  opacity: .3;
  cursor: not-allowed;
}
.hx-hero-nav-btn svg {
  width: 14px;
  height: 14px;
}
.hx-hero-month-label {
  font-size: .82rem;
  font-weight: 700;
  min-width: 110px;
  letter-spacing: -.01em;
}

.hx-stat-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(5px, 1.5vw, 10px);
  padding: clamp(8px, 1.4vh, 12px) clamp(8px, 2vw, 14px);
  background: #f8fafc;
  border-top: 1px solid var(--border);
}
.hx-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: clamp(6px, 1vh, 10px) 4px;
  border-radius: 12px;
  background: #fff;
  border: 1.5px solid var(--border);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  text-align: center;
  transition: transform .12s, box-shadow .12s, border-color .12s;
  cursor: pointer;
  user-select: none;
  min-height: clamp(58px, 8vh, 66px);
}
.hx-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
  border-color: var(--primary);
}
.hx-chip:active {
  transform: scale(.98);
}
.hx-chip:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.hx-chip-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.hx-chip-icon svg {
  width: 14px;
  height: 14px;
}
.hx-chip.success .hx-chip-icon { background: var(--success-bg); color: var(--success-dark); }
.hx-chip.pending .hx-chip-icon { background: var(--warning-bg); color: #b45309; }
.hx-chip.failed  .hx-chip-icon { background: var(--danger-bg);  color: var(--danger); }
.hx-chip-count {
  font-size: clamp(1rem, 3vw, 1.25rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-top: 1px;
}
.hx-chip.success .hx-chip-count { color: var(--success-dark); }
.hx-chip.pending .hx-chip-count { color: #b45309; }
.hx-chip.failed  .hx-chip-count { color: var(--danger); }
.hx-chip-label {
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-3);
}

.hx-toolbar-row {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.hx-search-bar {
  position: relative;
  flex: 1 1 200px;
  min-width: 0;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 11px;
  padding: 0 10px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: border-color .15s, box-shadow .15s;
  min-height: 38px;
}
.hx-search-bar:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}
.hx-search-bar svg {
  width: 15px;
  height: 15px;
  color: var(--text-3);
  flex-shrink: 0;
  margin-right: 6px;
}
.hx-search-bar input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 8px 0;
  font: inherit;
  font-size: .84rem;
  color: var(--text);
}
.hx-search-bar input::placeholder { color: var(--text-3); }

.hx-action-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.hx-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 11px;
  border-radius: 10px;
  background: #fff;
  border: 1.5px solid var(--border);
  color: var(--text-2);
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: all .15s;
  min-height: 38px;
}
.hx-action-btn:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}
.hx-action-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.hx-action-btn svg {
  width: 14px;
  height: 14px;
}
.hx-action-btn.spinning .hx-spin-icon {
  animation: hxSpin .75s linear infinite;
}
@keyframes hxSpin { to { transform: rotate(360deg); } }

.hx-pills {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0;
  margin-bottom: 10px;
}
.hx-pills::-webkit-scrollbar { display: none; }
.hx-pill {
  flex-shrink: 0;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1.5px solid var(--border-strong);
  background: #fff;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
  min-height: 32px;
  transition: all .15s;
}
.hx-pill em {
  font-style: normal;
  font-weight: 800;
  opacity: .7;
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}
.hx-pill:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary);
}
.hx-pill.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 3px 8px -2px rgba(79, 70, 229, 0.35);
}
.hx-pill.active em { opacity: .9; }

.hx-day {
  margin-bottom: 10px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
  overflow: hidden;
}
.hx-day-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 9px 14px;
  background: #fcfcfd;
  border: 0;
  border-bottom: 1px solid var(--border);
  font: inherit;
  cursor: pointer;
  text-align: left;
  transition: background .12s;
  min-height: 40px;
}
.hx-day-head:hover { background: #f8fafc; }
.hx-day.collapsed .hx-day-head { border-bottom: 0; }
.hx-day-title {
  font-weight: 800;
  font-size: .86rem;
  letter-spacing: -.01em;
  color: var(--text);
}
.hx-day-meta {
  font-size: .68rem;
  color: var(--text-3);
  margin-top: 1px;
  font-weight: 500;
}
.hx-day-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.hx-day-total {
  font-weight: 800;
  font-size: .88rem;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.hx-chev {
  width: 15px;
  height: 15px;
  color: var(--text-3);
  transition: transform .2s ease;
}
.hx-day.collapsed .hx-chev { transform: rotate(-90deg); }
.hx-day.collapsed .hx-rows { display: none; }

.hx-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--border);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .12s;
  min-height: 52px;
}
.hx-row:last-child { border-bottom: 0; }
.hx-row:hover { background: #f8fafc; }
.hx-row:active { background: #f1f5f9; }

.hx-row-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.hx-row-icon svg { width: 15px; height: 15px; }
.hx-row-icon.success { background: var(--success-bg); color: var(--success-dark); }
.hx-row-icon.pending { background: var(--warning-bg); color: #b45309; }
.hx-row-icon.failed  { background: var(--danger-bg);  color: var(--danger); }

.hx-main { min-width: 0; flex: 1; }
.hx-main-top {
  font-size: .88rem;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex-wrap: wrap;
}
.hx-charge-note {
  font-size: .68rem;
  color: var(--text-3);
  font-weight: 600;
}
.hx-main-sub {
  font-size: .7rem;
  color: var(--text-3);
  margin-top: 1px;
}

.hx-side {
  text-align: right;
  flex-shrink: 0;
}
.hx-bankref-badge {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 5px;
  background: #f1f5f9;
  color: var(--text-2);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .68rem;
  font-weight: 700;
}
.hx-mode {
  display: block;
  font-size: .62rem;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 700;
  margin-top: 1px;
  letter-spacing: .04em;
}

/* ─── Receipt Modal ─── */
.hx-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .6);
  backdrop-filter: blur(5px);
  display: grid;
  place-items: center;
  z-index: 1000;
  padding: clamp(8px, 2.5vw, 16px);
  opacity: 0;
  transition: opacity .2s ease;
}
.hx-modal-overlay.open { opacity: 1; }
.hx-modal-overlay.hidden { display: none !important; }

.hx-receipt {
  width: min(100%, 400px);
  max-height: min(calc(100vh - 20px), calc(100dvh - 20px), 580px);
  background: #fff;
  border-radius: clamp(14px, 3.5vw, 20px);
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .35);
  transform: translateY(12px) scale(.98);
  transition: transform .22s cubic-bezier(.2, 1.2, .4, 1);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.hx-modal-overlay.open .hx-receipt { transform: translateY(0) scale(1); }

.hx-receipt-top {
  padding: 14px 14px 12px;
  color: #fff;
  text-align: center;
  position: relative;
  flex-shrink: 0;
}
.hx-receipt-top.success { background: linear-gradient(135deg, #059669, #10b981); }
.hx-receipt-top.pending { background: linear-gradient(135deg, #b45309, #f59e0b); }
.hx-receipt-top.failed  { background: linear-gradient(135deg, #b91c1c, #ef4444); }

.hx-receipt-close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, .2);
  color: #fff;
  font-size: 1.25rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  line-height: 1;
  transition: background .15s;
}
.hx-receipt-close:hover { background: rgba(255, 255, 255, .3); }

.hx-receipt-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  display: grid;
  place-items: center;
  margin: 0 auto 4px;
}
.hx-receipt-icon svg { width: 19px; height: 19px; stroke: #fff; }
.hx-receipt-title {
  font-size: .78rem;
  font-weight: 700;
  opacity: .95;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.hx-receipt-amount {
  font-size: clamp(1.6rem, 5vw, 2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.hx-receipt-body {
  padding: 10px 14px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.hx-receipt-actions {
  display: flex;
  gap: 6px;
  padding: 10px 14px max(10px, env(safe-area-inset-bottom, 10px));
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: #fcfcfd;
}
.hx-receipt-actions button {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}
.detail-copy-btn {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--primary);
  background: #fff;
  color: var(--primary);
  font: inherit;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all .15s;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.detail-copy-btn:hover { background: var(--primary-light); }
.detail-copy-btn.copied {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success-dark);
}
.hx-receipt-close-btn {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--border-strong);
  background: #f8fafc;
  color: var(--text);
  font: inherit;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background .15s;
  min-height: 38px;
}
.hx-receipt-close-btn:hover { background: #f1f5f9; }
.hx-receipt-recheck-btn {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1.5px solid var(--primary, #2563eb);
  background: var(--primary, #2563eb);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all .15s;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.hx-receipt-recheck-btn:hover { background: var(--primary-hover, #1d4ed8); }
.hx-receipt-recheck-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.hx-inline-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: #fff;
  color: var(--primary);
  font: inherit;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
  margin-left: 6px;
  line-height: 1.2;
  vertical-align: middle;
  flex-shrink: 0;
}
.hx-inline-copy:hover { background: var(--primary-light); }
.hx-inline-copy:active { transform: scale(.96); }
.hx-inline-copy.copied {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success-dark);
}
.hx-inline-copy svg { width: 12px; height: 12px; flex-shrink: 0; }

/* ─── Empty & Error States ─── */
.hx-empty, .hx-error {
  text-align: center;
  padding: 36px 18px;
  background: #fff;
  border: 1.5px dashed var(--border-strong);
  border-radius: 16px;
  color: var(--text-2);
}
.hx-empty strong, .hx-error strong {
  display: block;
  color: var(--text);
  font-size: 0.98rem;
  margin-bottom: 4px;
}
.hx-empty p, .hx-error p {
  font-size: 0.84rem;
  color: var(--text-3);
}
.hx-error .btn-outline-load, .hx-more .btn-outline-load {
  margin-top: 14px;
}
.hx-more {
  display: flex;
  justify-content: center;
  margin: 16px 0 6px;
}
.hx-foot {
  text-align: center;
  font-size: 0.74rem;
  color: var(--text-3);
  margin-top: 14px;
}
.btn-outline-load {
  padding: 10px 20px;
  background: #fff;
  color: var(--primary);
  border: 1.5px solid var(--primary);
  border-radius: 10px;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  min-height: 42px;
}
.btn-outline-load:hover { background: var(--primary-light); }
.btn-outline-load:disabled { opacity: 0.5; cursor: progress; }

/* ─── Skeletons ─── */
.hx-skel { display: flex; flex-direction: column; gap: 12px; }
.hx-skel-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.skeleton-line {
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
  background-size: 200% 100%;
  animation: qrShimmer 1.2s ease-in-out infinite;
}
.skeleton-line.w35 { width: 35%; }
.skeleton-line.w75 { width: 75%; }
.skeleton-line.w85 { width: 85%; }
.skeleton-line.w90 { width: 90%; }
.hx-block { display: block; }

/* ═════════════════════════════════════════════════
   5. Responsive Breakpoints & Accessibility
═════════════════════════════════════════════════ */
/* Mobile Viewport (< 640px): Compact History Hero & Sleek Layout */
@media (max-width: 639.98px) {
  .pay-shell.hx-shell {
    padding-top: 6px;
    padding-bottom: 12px;
  }
  .hx-hero-card {
    margin-bottom: 6px;
    border-radius: 14px;
  }
  .hx-hero {
    padding: 7px 10px 6px;
  }
  .hx-hero::after {
    width: 100px;
    height: 100px;
    right: -35px;
    top: -40px;
  }
  .hx-hero::before {
    width: 80px;
    height: 80px;
    left: -25px;
    bottom: -45px;
  }
  .hx-hero-label {
    font-size: 0.62rem;
    letter-spacing: 0.05em;
  }
  .hx-hero-amount {
    font-size: clamp(1.4rem, 5.2vw, 1.7rem);
    margin: 0;
    line-height: 1.1;
  }
  .hx-hero-sub {
    font-size: 0.66rem;
    min-height: 0;
    line-height: 1.15;
    margin-top: 1px;
  }
  .hx-hero-month-nav {
    margin-top: 4px;
    padding: 1px 8px;
    min-height: 22px;
    gap: 4px;
  }
  .hx-hero-nav-btn {
    width: 18px;
    height: 18px;
  }
  .hx-hero-nav-btn svg {
    width: 11px;
    height: 11px;
  }
  .hx-hero-month-label {
    font-size: 0.72rem;
    min-width: 85px;
  }
  .hx-stat-chips {
    gap: 4px;
    padding: 4px 6px;
  }
  .hx-chip {
    padding: 3px 2px;
    min-height: 42px;
    border-radius: 8px;
    gap: 1px;
  }
  .hx-chip-icon {
    width: 15px;
    height: 15px;
  }
  .hx-chip-icon svg {
    width: 9px;
    height: 9px;
  }
  .hx-chip-count {
    font-size: 0.86rem;
    font-weight: 800;
  }
  .hx-chip-label {
    font-size: 0.54rem;
    letter-spacing: 0;
  }
}

@media (max-width: 480px) {
  .hx-toolbar-row { gap: 6px; }
  .hx-action-row { width: 100%; justify-content: flex-end; }
  .hx-receipt-actions { padding: 8px 10px max(8px, env(safe-area-inset-bottom, 8px)); gap: 5px; }
  .hx-receipt-actions button { padding: 7px 5px; font-size: .76rem; }
}

@media (max-width: 380px) {
  .hx-nav-long { display: none; }
  .hx-nav-short { display: inline; }
  .pay-shell { padding: 4px 6px max(8px, env(safe-area-inset-bottom, 8px)); }
  .pay-body { padding: 8px 8px; }
  .pay-hero { padding: 6px 10px; }
  .pay-amount-box #amount, .pay-amount-box input { font-size: 1.95rem; }
  .qr-body { padding: 6px 8px 10px; }
  .qr-frame { width: clamp(240px, 76vw, 290px); max-width: 290px; padding: 8px; }
  .qr-amount { font-size: 1.5rem; }
  .hx-hero { padding: 6px 6px 5px; }
  .hx-hero-amount { font-size: 1.38rem; }
  .hx-stat-chips { gap: 3px; padding: 3px 3px; }
  .hx-chip { min-height: 38px; padding: 2px 2px; }
  .hx-chip-count { font-size: .82rem; }
  .hx-chip-label { font-size: .50rem; }
  .hx-receipt { max-height: min(calc(100vh - 12px), calc(100dvh - 12px)); }
}

@media (max-height: 600px) {
  .pay-shell { padding-top: 4px; padding-bottom: 8px; }
  .pay-body { padding: 6px 10px; }
  .pay-hero { padding: 6px 10px; }
  .pay-amount-box { padding: 4px 8px; }
  .pay-amount-box #amount, .pay-amount-box input { font-size: 1.75rem; }
  .pay-chips { margin: 3px 0 1px; gap: 3px; }
  .pay-chip { padding: 3px 8px; min-height: 30px; font-size: 0.72rem; }
  .pay-cta { margin-top: 6px; padding: 7px; min-height: 38px; }
  .qr-head { padding: 4px 10px; }
  .qr-body { padding: 5px 8px 8px; }
  .qr-frame { width: clamp(180px, 32vh, 230px); max-width: 230px; margin: 4px auto; padding: 6px; }
  .qr-amount { font-size: 1.35rem; }
  .qr-actions { margin-top: 4px; gap: 4px; }
  .qr-actions button, .qr-actions a { min-height: 30px; padding: 4px 6px; font-size: 0.72rem; }
  .qr-status { margin-top: 4px; padding: 3px 8px; }
  .qr-foot { margin-top: 4px; gap: 3px; }
  .pay-btn-outline { min-height: 30px; padding: 4px 8px; font-size: 0.72rem; }
  .hx-hero { padding: 5px 8px 4px; }
  .hx-hero-amount { font-size: 1.32rem; }
  .hx-hero-month-nav { margin-top: 2px; min-height: 20px; padding: 1px 6px; }
  .hx-stat-chips { gap: 3px; padding: 3px 4px; }
  .hx-chip { min-height: 36px; padding: 2px 2px; }
  .hx-receipt { max-height: min(calc(100vh - 10px), calc(100dvh - 10px)); border-radius: 12px; }
  .hx-receipt-top { padding: 8px 10px 6px; }
  .hx-receipt-icon { width: 28px; height: 28px; margin-bottom: 2px; }
  .hx-receipt-icon svg { width: 14px; height: 14px; }
  .hx-receipt-title { font-size: .72rem; }
  .hx-receipt-amount { font-size: 1.3rem; margin-top: 1px; }
  .hx-receipt-body { padding: 6px 10px; }
  .hx-receipt-actions { padding: 6px 10px max(6px, env(safe-area-inset-bottom, 6px)); }
  .res-row { padding: 4px 0; font-size: .78rem; }
}

@media (max-height: 480px) and (orientation: landscape) {
  .app-page { height: auto; min-height: 100vh; }
  .pay-shell { justify-content: flex-start; padding-top: 6px; padding-bottom: 16px; }
}

/* ═════════════════════════════════════════════════
   Bottom Feedback Controls (Sound & Vibration)
   Subtle small icons docked below payment cards
═════════════════════════════════════════════════ */
.feedback-toggles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px auto 6px auto;
  padding: 4px 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  width: fit-content;
  z-index: 10;
  animation: payIn .25s ease both;
}

.feedback-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.feedback-toggle-btn:hover {
  background: var(--primary-light);
  color: var(--primary);
}

.feedback-toggle-btn.active {
  color: var(--primary);
  background: var(--primary-light);
  border-color: rgba(79, 70, 229, 0.15);
}

.feedback-toggle-btn.muted {
  color: var(--text-3);
  background: transparent;
  opacity: 0.55;
}

.feedback-toggle-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.feedback-icon {
  display: block;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  pointer-events: none;
}

@media (max-height: 600px) {
  .feedback-toggles { margin: 4px auto 2px auto; padding: 2px 6px; gap: 6px; }
  .feedback-toggle-btn { width: 28px; height: 28px; }
  .feedback-icon { width: 13px; height: 13px; }
}

body.font-small .pay-body, body.font-small .qr-body { font-size: 0.96em; }
body.font-large .pay-body, body.font-large .qr-body { font-size: 1.04em; }
body.font-xlarge .pay-chip, body.font-xlarge .res-row { font-size: 1.05rem; }

@media (prefers-reduced-motion: reduce) {
  .pay-card, .pay-sum, .res-icon, .res-icon svg path, .qr-dot::after { animation: none !important; }
  .res-icon svg path { stroke-dashoffset: 0; }
  .ring .prog { transition: none; }
}