/* 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;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}
.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.2rem, 4vw, 1.6rem);
  font-weight: 700;
  color: var(--text-3);
  line-height: 1;
  flex-shrink: 0;
}
.pay-amount-box #amount,
.pay-amount-box input {
  caret-color: var(--primary);
  border: 0;
  outline: 0;
  background: transparent;
  width: 100%;
  max-width: 100%;
  text-align: center;
  min-width: 0;
  padding: 0;
  margin: 0;
  height: auto;
  font: inherit;
  font-size: clamp(1.4rem, 5.5vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
.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;
  max-width: 100%;
}
.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.70rem, 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;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}
.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;
  align-items: center;
  padding: clamp(4px, 0.6vh, 6px) 10px;
  font-size: clamp(0.76rem, 2vw, 0.82rem);
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  min-width: 0;
  gap: 8px;
  flex-wrap: wrap;
}
.pay-sum-row span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
}
.pay-sum-row span:last-child {
  flex-shrink: 0;
  text-align: right;
}
.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.35rem, 4.8vw, 1.95rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.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;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 100%;
  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;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

.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;
}
body.dark .qr-skeleton,
[data-theme="dark"] .qr-skeleton {
  background: linear-gradient(90deg, #1e293b 0%, #334155 50%, #1e293b 100%);
}
.qr-skeleton-icon { width: 28px; height: 28px; color: var(--primary); opacity: .4; }
body.dark .qr-skeleton-icon,
[data-theme="dark"] .qr-skeleton-icon { color: #818cf8; opacity: .6; }
@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-frame.is-checking {
  position: relative;
}
.qr-frame.is-checking::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(99, 102, 241, 0.28) 50%, rgba(255, 255, 255, 0) 100%);
  background-size: 200% 100%;
  animation: qrPulseShimmer 1.1s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes qrPulseShimmer {
  0% { background-position: 150% 0; }
  100% { background-position: -150% 0; }
}

.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;
}
.qr-actions.hidden,
.qr-actions .qr-upi-open.hidden,
.qr-upi-open.hidden {
  display: none !important;
}
@media (max-width: 639.98px), (hover: none) and (pointer: coarse) {
  .qr-actions { display: flex; }
  .qr-actions.hidden { display: none !important; }
}

.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: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  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);
  max-width: 100%;
  box-sizing: border-box;
}
.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);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
.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(0.92rem, 3vw, 1.25rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-top: 1px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.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: clamp(0.52rem, 1.8vw, 0.64rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-3);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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); }

/* ═══════════ History Date Filter Controls ═══════════ */
.hx-date-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: var(--card, #ffffff);
  border: 1.5px solid var(--border, #cbd5e1);
  border-radius: 11px;
  padding: 0 10px;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: border-color .15s, box-shadow .15s;
  min-height: 38px;
  box-sizing: border-box;
}
.hx-date-wrap:hover {
  border-color: var(--primary, #4f46e5);
}
.hx-date-wrap:focus-within {
  border-color: var(--primary, #4f46e5);
  box-shadow: 0 0 0 3px var(--primary-light, rgba(79, 70, 229, 0.1));
}
.hx-date-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-2, #334155);
  white-space: nowrap;
}
.hx-date-icon {
  width: 15px;
  height: 15px;
  color: var(--primary, #4f46e5);
  flex-shrink: 0;
}
.hx-date-text {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text, #1e293b);
  white-space: nowrap;
}
.hx-date-caret {
  width: 13px;
  height: 13px;
  color: var(--text-3, #64748b);
  flex-shrink: 0;
  transition: transform 0.15s;
}
.hx-date-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.hx-date-input::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.hx-date-clear {
  position: relative;
  z-index: 2;
  border: none;
  background: #f1f5f9;
  color: #64748b;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: all 0.15s;
  flex-shrink: 0;
}
.hx-date-clear:hover {
  background: #e2e8f0;
  color: #0f172a;
}
body.dark .hx-date-wrap,
[data-theme="dark"] .hx-date-wrap {
  background: #1e293b;
  border-color: #334155;
}
body.dark .hx-date-wrap:hover,
[data-theme="dark"] .hx-date-wrap:hover,
body.dark .hx-date-wrap:focus-within,
[data-theme="dark"] .hx-date-wrap:focus-within {
  border-color: #818cf8;
}
body.dark .hx-date-text,
[data-theme="dark"] .hx-date-text {
  color: #f8fafc;
}
body.dark .hx-date-caret,
[data-theme="dark"] .hx-date-caret {
  color: #94a3b8;
}
body.dark .hx-date-clear,
[data-theme="dark"] .hx-date-clear {
  background: #334155;
  color: #94a3b8;
}
body.dark .hx-date-clear:hover,
[data-theme="dark"] .hx-date-clear:hover {
  background: #475569;
  color: #f8fafc;
}

.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;
  content-visibility: auto;
  contain-intrinsic-size: auto 68px;
}
.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-accordion-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 12px;
  font-size: .75rem;
  color: var(--text-3);
  font-weight: 500;
  user-select: none;
}
.hx-accordion-bar strong {
  color: var(--text);
  font-weight: 700;
}
.hx-accordion-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hx-link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: .75rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity .15s;
}
.hx-link-btn:hover {
  opacity: .8;
}
.hx-sep {
  color: var(--border, #cbd5e1);
  font-weight: 400;
}

.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; overflow: hidden; }
.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;
  min-width: 0;
  overflow: hidden;
}
.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;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.hx-side {
  text-align: right;
  flex-shrink: 0;
  max-width: 45%;
  min-width: 0;
  overflow: hidden;
}
.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;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}
.hx-mode {
  display: block;
  font-size: .62rem;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 700;
  margin-top: 1px;
  letter-spacing: .04em;
}
.hx-mode.instant {
  color: #0284c7;
}
[data-theme="dark"] .hx-mode.instant,
:root[data-theme="dark"] .hx-mode.instant {
  color: #38bdf8;
}
[data-theme="dark"] .ui-badge.instant,
:root[data-theme="dark"] .ui-badge.instant {
  background: rgba(2, 132, 199, 0.2);
  color: #38bdf8;
}

/* ─── Receipt Modal ─── */
.hx-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .6);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: grid;
  place-items: center;
  z-index: 10000;
  padding: clamp(8px, 2.5vw, 16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.hx-modal-overlay.open { opacity: 1; pointer-events: auto; }
.hx-modal-overlay.hidden { display: none !important; pointer-events: none !important; }
.hx-modal-overlay:not(.open) { pointer-events: 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;
  max-width: calc(100% - 24px);
  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;
}

.feedback-toggle-btn.check-charge-slab-btn {
  width: auto;
  height: 32px;
  padding: 0 12px;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-2);
  font-size: 0.8125rem;
  font-weight: 550;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.feedback-toggle-btn.check-charge-slab-btn:hover {
  background: var(--primary-light);
  color: var(--primary);
  border-color: rgba(79, 70, 229, 0.25);
}

.feedback-toggle-btn.check-charge-slab-btn .slab-btn-icon {
  width: 14px;
  height: 14px;
  color: var(--primary);
}

@media (max-height: 600px) {
  .feedback-toggles { margin: 4px auto 2px auto; padding: 2px 6px; gap: 6px; }
  .feedback-toggle-btn { width: 28px; height: 28px; }
  .feedback-toggle-btn.check-charge-slab-btn { height: 28px; padding: 0 9px; font-size: 0.75rem; }
  .feedback-icon { width: 13px; height: 13px; }
  .feedback-toggle-btn.check-charge-slab-btn .slab-btn-icon { width: 12px; height: 12px; }
}

/* ═════════════════════════════════════════════════
   Mobile User Display below Check UPI Charge slab
   (Shown on small screens where topbar user-display is hidden)
═════════════════════════════════════════════════ */
.mobile-user-wrap {
  display: none;
  justify-content: center;
  align-items: center;
  margin: 6px auto 10px auto;
  width: 100%;
  animation: payIn .25s ease both;
}

.mobile-user-wrap.hidden {
  display: none !important;
}

@media (max-width: 480px) {
  .mobile-user-wrap:not(.hidden) {
    display: flex;
  }
}

.mobile-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--card, #ffffff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 550;
  color: var(--text-2, #475569);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  max-width: 240px;
  letter-spacing: -0.01em;
}

.mobile-user-chip .mobile-user-icon {
  width: 13px;
  height: 13px;
  color: var(--primary, #4f46e5);
  flex-shrink: 0;
}

.mobile-user-chip .mobile-user-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.dark .mobile-user-chip,
[data-theme="dark"] .mobile-user-chip {
  background: #1e293b;
  border-color: #334155;
  color: #cbd5e1;
}
body.dark .mobile-user-chip .mobile-user-icon,
[data-theme="dark"] .mobile-user-chip .mobile-user-icon {
  color: #818cf8;
}

@media (max-height: 600px) {
  .mobile-user-wrap { margin: 2px auto 4px auto; }
  .mobile-user-chip { padding: 2px 8px; font-size: 0.7rem; }
}

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; }
}

/* ═════════════════════════════════════════════════
   Extension Popup Mode (No Header, Direct QR Page)
═════════════════════════════════════════════════ */
html.is-extension-mode .topbar,
html.is-extension-mode #feedback-toggles,
html.is-extension-mode .mobile-user-wrap,
html.is-extension-mode .install-app-btn,
html.is-extension-mode .res-link,
html.is-extension-mode #offline-banner,
html.is-extension-mode #amount-section,
body.is-extension-mode .topbar,
body.is-extension-mode #feedback-toggles,
body.is-extension-mode .mobile-user-wrap,
body.is-extension-mode .install-app-btn,
body.is-extension-mode .res-link,
body.is-extension-mode #offline-banner,
body.is-extension-mode #amount-section {
  display: none !important;
}

body.is-extension-mode.show-amount #amount-section,
html.is-extension-mode.show-amount #amount-section {
  display: block !important;
}

html.is-extension-mode,
body.is-extension-mode {
  padding-top: 0 !important;
  background: #f8fafc;
  min-height: 100vh;
}

html.is-extension-mode .pay-shell,
body.is-extension-mode .pay-shell {
  padding: 8px 10px 16px 10px;
  max-width: 440px;
  margin: 0 auto;
}

.ext-bill-info {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 8px 14px;
  margin: 10px 14px 2px 14px;
  font-size: 11.5px;
  color: #166534;
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.4;
}

.ext-bill-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ext-bill-info-label {
  color: #475569;
  font-weight: 500;
}

.ext-bill-info-val {
  font-weight: 700;
  color: #0f172a;
}

/* ═════════════════════════════════════════════════
   Dark Theme Enhancements (Receipt, Accordion & Day Rows)
═════════════════════════════════════════════════ */
body.dark .hx-day,
[data-theme="dark"] .hx-day {
  background: #1e293b;
  border-color: #334155;
}
body.dark .hx-day-head,
[data-theme="dark"] .hx-day-head {
  background: #0f172a;
  border-bottom-color: #334155;
}
body.dark .hx-day-head:hover,
[data-theme="dark"] .hx-day-head:hover {
  background: #1e293b;
}
body.dark .hx-row,
[data-theme="dark"] .hx-row {
  background: #1e293b;
  border-bottom-color: #334155;
}
body.dark .hx-row:hover,
[data-theme="dark"] .hx-row:hover {
  background: #273549;
}
body.dark .hx-receipt,
[data-theme="dark"] .hx-receipt {
  background: #1e293b;
  border: 1px solid #334155;
  color: #f8fafc;
}
body.dark .hx-receipt-actions,
[data-theme="dark"] .hx-receipt-actions {
  background: #0f172a;
  border-color: #334155;
}
body.dark .hx-receipt-close-btn,
[data-theme="dark"] .hx-receipt-close-btn {
  background: #1e293b;
  border-color: #475569;
  color: #cbd5e1;
}
body.dark .hx-receipt-close-btn:hover,
[data-theme="dark"] .hx-receipt-close-btn:hover {
  background: #334155;
  color: #fff;
}
body.dark .detail-copy-btn,
[data-theme="dark"] .detail-copy-btn {
  background: #1e293b;
  border-color: #6366f1;
  color: #a5b4fc;
}
body.dark .detail-copy-btn:hover,
[data-theme="dark"] .detail-copy-btn:hover {
  background: rgba(99, 102, 241, 0.2);
}
body.dark .hx-inline-copy,
[data-theme="dark"] .hx-inline-copy {
  background: #0f172a;
  border-color: #475569;
  color: #a5b4fc;
}

/* ═════════════════════════════════════════════════
   UPI Charge Slab Modal Popup Styles
═════════════════════════════════════════════════ */
.charge-slab-modal-overlay {
  z-index: 10500;
}

.charge-slab-modal-card {
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  max-height: 90dvh;
  padding: 22px 20px 20px 20px;
  text-align: left;
  border-radius: 18px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.charge-slab-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}

.charge-slab-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.charge-slab-header-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--primary-light, #eef2ff);
  color: var(--primary, #4f46e5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.charge-slab-head-titles {
  display: flex;
  flex-direction: column;
}

.charge-slab-title {
  margin: 0 !important;
  font-size: 1.15rem !important;
  font-weight: 750 !important;
  color: var(--text, #0f172a);
  text-align: left !important;
  line-height: 1.25;
}

.charge-slab-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 9999px;
  display: inline-block;
  margin-top: 3px;
  width: fit-content;
  border: 1px solid transparent;
}

.charge-slab-badge.active {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
  border-color: rgba(16, 185, 129, 0.25);
}

.charge-slab-badge.disabled,
.charge-slab-badge.off {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
  border-color: rgba(239, 68, 68, 0.25);
}

.charge-slab-badge.offline {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
  border-color: rgba(245, 158, 11, 0.25);
}

.charge-slab-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-3, #94a3b8);
  font-size: 1.4rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}

.charge-slab-close-btn:hover {
  background: var(--bg-hover, #f1f5f9);
  color: var(--text, #0f172a);
}

.charge-slab-body {
  margin-bottom: 16px;
  font-size: 0.88rem;
  color: var(--text, #0f172a);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: calc(90vh - 140px);
  max-height: calc(90dvh - 140px);
}

.charge-slab-table-wrap {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 4px;
}

.charge-slab-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.85rem;
}

.charge-slab-table th {
  background: var(--bg-subtle, #f8fafc);
  color: var(--text-3, #64748b);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border, #e2e8f0);
}

.charge-slab-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  color: var(--text, #0f172a);
}

.charge-slab-table tr:last-child td {
  border-bottom: none;
}

.charge-slab-fee-free {
  color: #059669;
  font-weight: 700;
  text-align: right;
}

.charge-slab-fee-val {
  color: var(--text, #0f172a);
  font-weight: 700;
  text-align: right;
}

.charge-slab-fraction-note {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg-subtle, #f8fafc);
  border: 1px solid var(--border, #e2e8f0);
  font-size: 0.78rem;
  color: var(--text-2, #475569);
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 8px;
}

.charge-slab-fraction-note svg {
  flex-shrink: 0;
  color: var(--primary, #4f46e5);
}

.charge-slab-off-box {
  text-align: center;
  padding: 16px 8px;
}

.charge-slab-off-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px auto;
}

.charge-slab-off-title {
  font-size: 1.12rem;
  font-weight: 750;
  color: var(--text, #0f172a);
  margin: 0 0 6px 0;
}

.charge-slab-off-desc {
  font-size: 0.86rem;
  color: var(--text-2, #475569);
  line-height: 1.45;
  margin: 0 0 12px 0;
}

.charge-slab-off-pill {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 650;
  padding: 3px 12px;
  border-radius: 9999px;
  background: rgba(239, 68, 68, 0.1);
  color: #dc2626;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.charge-slab-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 24px;
  gap: 12px;
  color: var(--text-3, #64748b);
  font-size: 0.88rem;
}

.charge-slab-spinner {
  width: 24px;
  height: 24px;
  border: 2.5px solid rgba(79, 70, 229, 0.2);
  border-top-color: var(--primary, #4f46e5);
  border-radius: 50%;
  animation: loadingBoxSpin 0.8s linear infinite;
}

.charge-slab-done-btn {
  width: 100%;
}

/* Dark mode overrides for Charge Slab Modal */
body.dark .charge-slab-modal-card,
[data-theme="dark"] .charge-slab-modal-card {
  background: #1e293b;
  border-color: #334155;
  color: #f8fafc;
}

body.dark .charge-slab-title,
[data-theme="dark"] .charge-slab-title {
  color: #f8fafc;
}

body.dark .charge-slab-head,
[data-theme="dark"] .charge-slab-head {
  border-color: #334155;
}

body.dark .charge-slab-header-icon,
[data-theme="dark"] .charge-slab-header-icon {
  background: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

body.dark .charge-slab-table-wrap,
[data-theme="dark"] .charge-slab-table-wrap {
  border-color: #334155;
}

body.dark .charge-slab-table th,
[data-theme="dark"] .charge-slab-table th {
  background: #0f172a;
  color: #94a3b8;
  border-color: #334155;
}

body.dark .charge-slab-table td,
[data-theme="dark"] .charge-slab-table td {
  border-color: #334155;
  color: #f8fafc;
}

body.dark .charge-slab-fee-val,
[data-theme="dark"] .charge-slab-fee-val {
  color: #f8fafc;
}

body.dark .charge-slab-fraction-note,
[data-theme="dark"] .charge-slab-fraction-note {
  background: #0f172a;
  border-color: #334155;
  color: #cbd5e1;
}

body.dark .charge-slab-off-title,
[data-theme="dark"] .charge-slab-off-title {
  color: #f8fafc;
}

body.dark .charge-slab-off-desc,
[data-theme="dark"] .charge-slab-off-desc {
  color: #cbd5e1;
}

body.dark .charge-slab-close-btn:hover,
[data-theme="dark"] .charge-slab-close-btn:hover {
  background: #334155;
  color: #ffffff;
}

body.dark .charge-slab-done-btn,
[data-theme="dark"] .charge-slab-done-btn {
  background: #334155;
  color: #ffffff;
  border-color: #475569;
}

/* ═══════════ Pre-QR Confirmation Modal ═══════════ */
.pre-qr-modal-overlay {
  z-index: 10600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.pre-qr-confirm-card {
  width: 100%;
  max-width: 440px;
  max-height: 92vh;
  max-height: 92dvh;
  margin: auto;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--bg-card, #ffffff);
  border-radius: 20px;
  border: 1px solid var(--border, #e2e8f0);
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.04);
  padding: 22px 24px;
  text-align: left;
  box-sizing: border-box;
  animation: confirmPopIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes confirmPopIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

body.dark .pre-qr-confirm-card,
[data-theme="dark"] .pre-qr-confirm-card {
  background: var(--bg-card, #1e293b);
  border-color: var(--border, #334155);
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
  color: #f8fafc;
}

/* Header & Dismiss */
.pre-qr-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  position: relative;
}

.pre-qr-head-left {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.pre-qr-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
}

body.dark .pre-qr-icon,
[data-theme="dark"] .pre-qr-icon {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
  color: #93c5fd;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.pre-qr-head-text {
  flex: 1;
  min-width: 0;
}

.pre-qr-head-text .confirm-modal-title {
  margin: 0 0 4px 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text, #0f172a);
  line-height: 1.25;
  letter-spacing: -0.2px;
}

body.dark .pre-qr-head-text .confirm-modal-title,
[data-theme="dark"] .pre-qr-head-text .confirm-modal-title {
  color: #f8fafc;
}

.pre-qr-head-text .confirm-modal-desc {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-2, #64748b);
  line-height: 1.35;
}

body.dark .pre-qr-head-text .confirm-modal-desc,
[data-theme="dark"] .pre-qr-head-text .confirm-modal-desc {
  color: #94a3b8;
}

.pre-qr-x-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-3, #94a3b8);
  font-size: 1.35rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: -2px;
  margin-right: -4px;
  transition: all 0.15s ease;
}

.pre-qr-x-btn:hover {
  background: var(--bg-hover, #f1f5f9);
  color: var(--text, #0f172a);
}

body.dark .pre-qr-x-btn:hover,
[data-theme="dark"] .pre-qr-x-btn:hover {
  background: #334155;
  color: #ffffff;
}

/* Breakdown Card */
.pre-qr-breakdown {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.dark .pre-qr-breakdown,
[data-theme="dark"] .pre-qr-breakdown {
  background: #0f172a;
  border-color: #334155;
}

.pre-qr-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: clamp(0.78rem, 2.4vw, 0.90rem);
  color: #475569;
  gap: 8px;
  min-height: 22px;
  min-width: 0;
}

body.dark .pre-qr-row,
[data-theme="dark"] .pre-qr-row {
  color: #94a3b8;
}

.pre-qr-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-weight: 500;
  color: inherit;
  min-width: 0;
  flex: 1 1 auto;
}

/* Pill Badges */
.pre-qr-pill {
  font-size: 0.66rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 9999px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  line-height: 1.2;
}

.pre-qr-pill-slab {
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
}
body.dark .pre-qr-pill-slab,
[data-theme="dark"] .pre-qr-pill-slab {
  background: rgba(3, 105, 161, 0.25);
  color: #7dd3fc;
  border-color: rgba(3, 105, 161, 0.45);
}

.pre-qr-pill-fraction {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}
body.dark .pre-qr-pill-fraction,
[data-theme="dark"] .pre-qr-pill-fraction {
  background: rgba(245, 158, 11, 0.22);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.4);
}

.pre-qr-pill-charges {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
  font-size: 0.63rem;
}
body.dark .pre-qr-pill-charges,
[data-theme="dark"] .pre-qr-pill-charges {
  background: #1e293b;
  color: #94a3b8;
  border-color: #334155;
}

.pre-qr-val {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
  text-align: right;
  white-space: nowrap;
}

body.dark .pre-qr-val,
[data-theme="dark"] .pre-qr-val {
  color: #f1f5f9;
}

.pre-qr-row.pre-qr-charges-total {
  padding-top: 8px;
  border-top: 1px dashed #cbd5e1;
  font-size: 0.90rem;
  color: #1e293b;
  font-weight: 600;
}

body.dark .pre-qr-row.pre-qr-charges-total,
[data-theme="dark"] .pre-qr-row.pre-qr-charges-total {
  border-top-color: #334155;
  color: #e2e8f0;
}

.pre-qr-row.pre-qr-total-row {
  padding-top: 10px;
  margin-top: 2px;
  border-top: 2px solid #e2e8f0;
  font-size: 1rem;
  color: #0f172a;
  align-items: flex-start;
}

body.dark .pre-qr-row.pre-qr-total-row,
[data-theme="dark"] .pre-qr-row.pre-qr-total-row {
  border-top-color: #334155;
  color: #ffffff;
}

.pre-qr-row.pre-qr-total-row .pre-qr-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.pre-qr-row.pre-qr-total-row strong {
  font-size: 0.96rem;
  font-weight: 700;
  color: #0f172a;
}
body.dark .pre-qr-row.pre-qr-total-row strong,
[data-theme="dark"] .pre-qr-row.pre-qr-total-row strong {
  color: #ffffff;
}

.pre-qr-total-sub {
  font-size: 0.72rem;
  font-weight: 400;
  color: #64748b;
  line-height: 1.25;
}
body.dark .pre-qr-total-sub,
[data-theme="dark"] .pre-qr-total-sub {
  color: #94a3b8;
}

.pre-qr-final-val {
  font-size: 1.35rem;
  font-weight: 800;
  color: #2563eb;
  letter-spacing: -0.3px;
  align-self: center;
}

body.dark .pre-qr-final-val,
[data-theme="dark"] .pre-qr-final-val {
  color: #60a5fa;
}

/* Trust / Info Badge */
.pre-qr-trust-badge {
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.2);
  color: #065f46;
  border-radius: 9px;
  padding: 7px 11px;
  font-size: 0.76rem;
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 16px;
  font-weight: 500;
  line-height: 1.3;
}

.pre-qr-trust-badge svg {
  flex-shrink: 0;
  color: #10b981;
}

body.dark .pre-qr-trust-badge,
[data-theme="dark"] .pre-qr-trust-badge {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.28);
  color: #6ee7b7;
}

/* Action Buttons */
.pre-qr-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.pre-qr-cancel-btn {
  flex: 1;
  min-height: 42px;
  padding: 10px 14px;
  font-size: 0.90rem;
  font-weight: 600;
  border-radius: 11px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.pre-qr-cancel-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #94a3b8;
}

body.dark .pre-qr-cancel-btn,
[data-theme="dark"] .pre-qr-cancel-btn {
  background: #1e293b;
  color: #cbd5e1;
  border-color: #475569;
}

body.dark .pre-qr-cancel-btn:hover,
[data-theme="dark"] .pre-qr-cancel-btn:hover {
  background: #334155;
  color: #ffffff;
  border-color: #64748b;
}

.pre-qr-confirm-submit-btn {
  flex: 1.4;
  min-height: 42px;
  margin-top: 0;
  padding: 10px 16px;
  font-size: 0.94rem;
  font-weight: 700;
  border-radius: 11px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
  transition: all 0.15s ease;
}

.pre-qr-confirm-submit-btn:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
  transform: translateY(-1px);
}

.pre-qr-confirm-submit-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2);
}

body.dark .pre-qr-confirm-submit-btn,
[data-theme="dark"] .pre-qr-confirm-submit-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

/* Extension Side Window & Narrow Screen Responsiveness */
body.is-extension-mode .pre-qr-modal-overlay,
html.is-extension-mode .pre-qr-modal-overlay {
  padding: 10px;
}

body.is-extension-mode .pre-qr-confirm-card,
html.is-extension-mode .pre-qr-confirm-card {
  max-width: 100%;
  padding: 18px 16px;
  border-radius: 16px;
}

body.is-extension-mode .pre-qr-breakdown,
html.is-extension-mode .pre-qr-breakdown {
  padding: 12px 13px;
  gap: 8px;
  margin-bottom: 12px;
}

body.is-extension-mode .pre-qr-final-val,
html.is-extension-mode .pre-qr-final-val {
  font-size: 1.25rem;
}

body.is-extension-mode .pre-qr-actions,
html.is-extension-mode .pre-qr-actions {
  flex-direction: column-reverse;
  gap: 8px;
  width: 100%;
}

body.is-extension-mode .pre-qr-confirm-submit-btn,
html.is-extension-mode .pre-qr-confirm-submit-btn {
  width: 100%;
  padding: 10px 12px;
  font-size: clamp(0.82rem, 2.6vw, 0.90rem);
  white-space: normal;
  text-align: center;
  justify-content: center;
  line-height: 1.25;
}

body.is-extension-mode .pre-qr-cancel-btn,
html.is-extension-mode .pre-qr-cancel-btn {
  width: 100%;
  padding: 10px 10px;
  font-size: clamp(0.80rem, 2.4vw, 0.86rem);
  white-space: normal;
  text-align: center;
  justify-content: center;
  line-height: 1.25;
}

.pre-qr-cancel-btn,
.pre-qr-confirm-submit-btn {
  white-space: normal;
  word-break: normal;
  text-align: center;
  line-height: 1.25;
}

.pre-qr-x-btn:focus-visible,
.pre-qr-cancel-btn:focus-visible,
.pre-qr-confirm-submit-btn:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

@media (max-width: 440px) {
  .pre-qr-modal-overlay {
    padding: 10px;
  }
  .pre-qr-confirm-card {
    padding: 18px 16px;
    border-radius: 16px;
  }
  .pre-qr-breakdown {
    padding: 12px 14px;
    gap: 8px;
  }
  .pre-qr-final-val {
    font-size: clamp(1.1rem, 4.2vw, 1.25rem);
  }
  .pre-qr-actions {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .pre-qr-confirm-submit-btn,
  .pre-qr-cancel-btn {
    width: 100%;
    flex: auto;
    min-height: 40px;
    text-align: center;
    justify-content: center;
    padding: 10px 12px;
    font-size: clamp(0.82rem, 2.8vw, 0.90rem);
  }
  .pay-amount-box #amount,
  .pay-amount-box input {
    font-size: clamp(1.2rem, 5vw, 1.8rem);
  }
  .charge-slab-table th,
  .charge-slab-table td {
    padding: 6px 8px;
    font-size: clamp(0.70rem, 2.4vw, 0.80rem);
  }
}

/* Accessibility & Large Font Overrides */
html.font-scale-lg .pre-qr-actions,
html[data-font-size="large"] .pre-qr-actions,
body.font-large .pre-qr-actions,
body.font-xlarge .pre-qr-actions {
  flex-direction: column-reverse;
  gap: 8px;
}
html.font-scale-lg .pre-qr-confirm-submit-btn,
html.font-scale-lg .pre-qr-cancel-btn,
html[data-font-size="large"] .pre-qr-confirm-submit-btn,
html[data-font-size="large"] .pre-qr-cancel-btn,
body.font-large .pre-qr-confirm-submit-btn,
body.font-large .pre-qr-cancel-btn,
body.font-xlarge .pre-qr-confirm-submit-btn,
body.font-xlarge .pre-qr-cancel-btn {
  width: 100%;
  flex: auto;
  white-space: normal;
  text-align: center;
  font-size: clamp(0.76rem, 2.6vw, 0.86rem);
  line-height: 1.25;
}
html.font-scale-lg .pay-amount-box #amount,
html[data-font-size="large"] .pay-amount-box #amount,
body.font-large .pay-amount-box #amount,
body.font-xlarge .pay-amount-box #amount {
  font-size: clamp(1.2rem, 5vw, 1.85rem);
}
html.font-scale-lg .pay-chip,
html[data-font-size="large"] .pay-chip,
body.font-large .pay-chip,
body.font-xlarge .pay-chip {
  padding: 3px 6px;
  font-size: clamp(0.64rem, 1.8vw, 0.72rem);
}
html.font-scale-lg .hx-chip-count,
html[data-font-size="large"] .hx-chip-count,
body.font-large .hx-chip-count,
body.font-xlarge .hx-chip-count {
  font-size: clamp(0.85rem, 2.6vw, 1.05rem);
}
html.font-scale-lg .hx-chip-label,
html[data-font-size="large"] .hx-chip-label,
body.font-large .hx-chip-label,
body.font-xlarge .hx-chip-label {
  font-size: clamp(0.50rem, 1.6vw, 0.58rem);
}
html.font-scale-lg .pre-qr-row.pre-qr-total-row,
html[data-font-size="large"] .pre-qr-row.pre-qr-total-row,
body.font-large .pre-qr-row.pre-qr-total-row,
body.font-xlarge .pre-qr-row.pre-qr-total-row {
  flex-wrap: wrap;
  gap: 4px;
}

@media (max-width: 360px) {
  .pre-qr-modal-overlay {
    padding: 6px;
  }
  .pre-qr-confirm-card {
    padding: 14px 12px;
    border-radius: 14px;
  }
  .pre-qr-breakdown {
    padding: 10px 10px;
    gap: 7px;
  }
  .pre-qr-actions {
    flex-direction: column-reverse;
    gap: 8px;
    width: 100%;
  }
  .pre-qr-cancel-btn,
  .pre-qr-confirm-submit-btn {
    width: 100%;
    flex: auto;
    min-height: 38px;
    text-align: center;
    justify-content: center;
    padding: 8px 10px;
    font-size: clamp(0.76rem, 2.6vw, 0.86rem);
    white-space: normal;
    line-height: 1.25;
  }
  .pre-qr-row.pre-qr-total-row {
    flex-wrap: wrap;
    gap: 4px;
  }
  .pre-qr-final-val {
    font-size: clamp(1.05rem, 3.8vw, 1.20rem);
  }
  .pay-amount-box #amount,
  .pay-amount-box input {
    font-size: clamp(1.15rem, 4.8vw, 1.65rem);
  }
  .pay-chip {
    padding: 3px 6px;
    font-size: clamp(0.64rem, 2.2vw, 0.72rem);
    min-height: 28px;
  }
  .charge-slab-table th,
  .charge-slab-table td {
    padding: 5px 6px;
    font-size: 0.72rem;
  }
}

@media (max-height: 620px) {
  .pre-qr-modal-overlay {
    padding: 8px;
  }
  .pre-qr-confirm-card {
    padding: 13px 16px;
    max-height: 96vh;
    max-height: 96dvh;
    border-radius: 14px;
  }
  .pre-qr-header {
    margin-bottom: 8px;
    gap: 8px;
  }
  .pre-qr-icon {
    width: 34px;
    height: 34px;
  }
  .pre-qr-icon svg {
    width: 18px;
    height: 18px;
  }
  .pre-qr-head-text .confirm-modal-title {
    font-size: 1.05rem;
    margin-bottom: 2px;
  }
  .pre-qr-head-text .confirm-modal-desc {
    display: none;
  }
  .pre-qr-breakdown {
    padding: 8px 12px;
    gap: 6px;
    margin-bottom: 8px;
  }
  .pre-qr-row {
    font-size: 0.84rem;
    min-height: 18px;
  }
  .pre-qr-row.pre-qr-charges-total {
    padding-top: 5px;
  }
  .pre-qr-row.pre-qr-total-row {
    padding-top: 6px;
  }
  .pre-qr-final-val {
    font-size: 1.18rem;
  }
  .pre-qr-trust-badge {
    padding: 4px 8px;
    margin-bottom: 10px;
    font-size: 0.70rem;
  }
  .pre-qr-actions button {
    min-height: 36px;
    padding: 8px 12px;
  }
}

@media (min-width: 640px) {
  .pre-qr-confirm-card {
    max-width: 440px;
    padding: 24px 26px;
  }
  .pre-qr-final-val {
    font-size: 1.4rem;
  }
}

/* ═══════════ Maintenance Advisory on Main QR Page ═══════════ */
.pay-note-maintenance {
  background: #fef3c7;
  border: 1px solid #fde68a;
  color: #92400e;
  border-radius: 12px;
  padding: 10px 14px;
  margin-top: 10px;
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  line-height: 1.4;
}
body.dark .pay-note-maintenance,
[data-theme="dark"] .pay-note-maintenance {
  background: #2d2006;
  border-color: #78350f;
  color: #fde68a;
}
.maintenance-advisory-content {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.maintenance-history-btn {
  align-self: flex-start;
  font-size: 0.82rem;
  font-weight: 700;
  color: #b45309;
  text-decoration: underline;
  cursor: pointer;
}
body.dark .maintenance-history-btn,
[data-theme="dark"] .maintenance-history-btn {
  color: #fcd34d;
}
.mx-history-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.mx-banner-history-link {
  color: inherit;
  text-decoration: underline;
  font-weight: 700;
  margin-left: 8px;
}

/* ═══════════ Performance Mode (html.perf-lite) Overrides ═══════════ */
html.perf-lite .hx-modal-overlay {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(15, 23, 42, 0.88) !important;
}

html.perf-lite .ring .prog {
  transition: none !important;
}

/* Disable heavy background-position shimmers on QR elements under perf-lite */
html.perf-lite .qr-skeleton {
  animation: none !important;
  background: #e2e8f0 !important;
}

body.dark html.perf-lite .qr-skeleton,
html.perf-lite[data-theme="dark"] .qr-skeleton,
html[data-theme="dark"].perf-lite .qr-skeleton {
  background: #1e293b !important;
}

html.perf-lite .qr-frame.is-checking::after {
  animation: none !important;
  opacity: 0.25;
}