:root {
  --cmhk-blue: #0088d1;
  --cmhk-blue-2: #18a8e8;
  --cmhk-green: #78be20;
  --cmhk-mint: #eaf8f3;
  --cmhk-sky: #eef9ff;
  --cmhk-card: #ffffff;
  --cmhk-ring: rgba(0, 136, 209, .16);
  --blue: var(--cmhk-blue);
  --blue-dark: #006eb8;
  --green: var(--cmhk-green);
  --radius: 14px;
  --radius-lg: 18px;
  --shadow: 0 14px 38px rgba(0, 80, 130, .08);
}

body {
  background:
    radial-gradient(circle at 18% -8%, rgba(120, 190, 32, .13), transparent 28%),
    radial-gradient(circle at 92% 4%, rgba(0, 136, 209, .13), transparent 30%),
    linear-gradient(180deg, #f7fbff 0%, #f2f7fb 100%);
}

.brand-dot {
  background: linear-gradient(135deg, var(--cmhk-green), #22c76f);
  border-color: #dcf6e7;
  box-shadow: 0 0 0 5px rgba(120, 190, 32, .08);
}

.brand strong,
.sidebar-brand strong {
  letter-spacing: .01em;
}

.topbar.customer-topbar {
  border-bottom-color: rgba(0, 136, 209, .12);
  box-shadow: 0 8px 22px rgba(0, 80, 130, .04);
}

.auth-brand,
.batch-summary-mini,
.sidebar {
  background:
    radial-gradient(circle at 20% 18%, rgba(120, 190, 32, .22), transparent 22%),
    linear-gradient(145deg, #0d3d5a 0%, #102b3b 62%, #0e2432 100%);
}

.brand-mark span:first-child {
  background: var(--cmhk-green);
}

.brand-mark span:nth-child(2) {
  background: var(--cmhk-blue-2);
}

.brand-mark span:nth-child(3) {
  background: #c4dd36;
}

.button.primary {
  background: linear-gradient(135deg, var(--cmhk-blue-2), #0a84ff);
  box-shadow: 0 10px 24px rgba(0, 136, 209, .18);
}

.button.primary:hover {
  background: linear-gradient(135deg, #0098df, #006fce);
}

.button.secondary,
.text-button,
.text-link {
  color: #006eb8;
}

.inventory-total,
.card-panel,
.voucher-panel,
.panel,
.data-panel,
.table-wrap,
.order-list,
.dialog {
  border-color: rgba(0, 136, 209, .14);
}

.inventory-total {
  background:
    linear-gradient(135deg, rgba(0, 136, 209, .08), rgba(120, 190, 32, .07)),
    #fff;
}

.inventory-face-card.face-100,
.inventory-face.face-100 {
  border-color: rgba(0, 136, 209, .2);
  background: linear-gradient(135deg, #f4fbff, #f8f7ff);
}

.inventory-face-card.face-50,
.inventory-face.face-50 {
  border-color: rgba(120, 190, 32, .22);
  background: linear-gradient(135deg, #f5fff8, #f7fbff);
}

.recharge-band {
  border-color: rgba(0, 136, 209, .12);
  background:
    linear-gradient(90deg, rgba(0, 136, 209, .04), rgba(120, 190, 32, .04)),
    #fff;
}

.recharge-mode-links,
.mode-switch {
  background: #edf5f9;
}

.recharge-mode-links .active,
.mode-switch button.active {
  color: #006eb8;
  box-shadow: 0 8px 18px rgba(0, 80, 130, .08);
}

.status.success,
.status.completed,
.status.available {
  background: #e9f8ee;
  color: #137747;
}

.status.used,
.status.consumed_manual,
.status.reclaimed,
.status.transferred {
  background: #eef2f6;
  color: #415466;
}

.status.running,
.status.queued,
.status.waiting_captcha,
.status.processing,
.status.submitting,
.status.approved {
  background: var(--cmhk-sky);
  color: #076da8;
}

.status.partial,
.status.review_required,
.status.pending {
  background: #fff3dc;
  color: #985b08;
}

.status.failed,
.status.cancelled,
.status.invalid,
.status.voided,
.status.rejected {
  background: #fbeaea;
  color: #a62f2f;
}

.dialog-backdrop {
  background: rgba(11, 35, 50, .52);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--cmhk-blue) !important;
  box-shadow: 0 0 0 4px var(--cmhk-ring) !important;
}

@media (max-width: 760px) {
  .topbar.customer-topbar {
    box-shadow: 0 6px 18px rgba(0, 80, 130, .05);
  }

  .button.primary {
    box-shadow: 0 8px 18px rgba(0, 136, 209, .14);
  }
}

/* CMHK-inspired production skin: lighter, mobile-first, and closer to the official top-up feel. */
.customer-main {
  position: relative;
}

.customer-main::before {
  content: "";
  position: fixed;
  inset: 62px 0 auto;
  height: 280px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 16%, rgba(120, 190, 32, .18), transparent 28%),
    radial-gradient(circle at 88% 12%, rgba(0, 136, 209, .2), transparent 32%),
    linear-gradient(180deg, rgba(230, 248, 255, .78), rgba(255, 255, 255, 0));
}

.inventory-overview,
.recharge-band,
.order-list,
.empty-state {
  box-shadow: 0 16px 42px rgba(0, 80, 130, .06);
}

.inventory-total,
.inventory-face-card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85);
}

.recharge-band {
  border-radius: 20px;
}

.recharge-heading h2,
.section-heading h1,
.section-heading h2 {
  letter-spacing: -.02em;
}

.recharge-form .button.primary {
  min-height: 50px;
  border-radius: 14px;
  background: linear-gradient(135deg, #14b8f6 0%, #0a84ff 58%, #0070d9 100%);
}

.recharge-form .button.primary:disabled {
  background: linear-gradient(135deg, #a8dcf8, #6fb8ee);
  color: rgba(255, 255, 255, .92);
  opacity: 1;
  box-shadow: none;
}

.receipt {
  margin: auto;
  border: 1px solid rgba(0, 136, 209, .12);
  border-radius: 24px;
  box-shadow: 0 24px 80px rgba(0, 70, 120, .22);
}

.receipt-content {
  min-height: 310px;
  align-items: center;
}

.success-icon {
  box-shadow: 0 10px 24px rgba(31, 189, 104, .22);
}

.batch-progress-list,
.batch-result-list,
.secret-request-list {
  scroll-behavior: smooth;
}

.batch-progress-item,
.batch-result-item {
  border-radius: 16px;
  border-color: rgba(0, 136, 209, .14);
}

.batch-progress-item.active,
.batch-result-item.active {
  border-color: rgba(0, 136, 209, .38);
  background: linear-gradient(135deg, rgba(0, 136, 209, .08), rgba(120, 190, 32, .05));
  box-shadow: 0 10px 28px rgba(0, 80, 130, .1);
}

@media (max-width: 760px) {
  body {
    background:
      radial-gradient(circle at 15% 6%, rgba(120, 190, 32, .13), transparent 32%),
      radial-gradient(circle at 92% 8%, rgba(0, 136, 209, .16), transparent 34%),
      linear-gradient(180deg, #f8fcff 0%, #f3f9fc 100%);
  }

  .customer-main::before {
    inset: 56px 0 auto;
    height: 230px;
  }

  .batch-band,
  .orders-band {
    padding-inline: 16px;
  }

  .inventory-overview {
    gap: 10px;
  }

  .inventory-total,
  .inventory-face-card,
  .recharge-band,
  .order-list,
  .empty-state {
    border-radius: 18px;
  }

  .recharge-band {
    margin-inline: 16px;
    padding: 24px 18px;
  }

  .recharge-layout {
    gap: 22px;
  }

  .recharge-heading h2 {
    font-size: 1.7rem;
  }

  .recharge-form {
    gap: 16px;
  }

  .recharge-form input,
  .amount-input {
    min-height: 54px;
    border-radius: 15px;
  }

  .recharge-form .button.primary {
    width: 100%;
    min-height: 58px;
    border-radius: 16px;
    font-size: 1.05rem;
  }

  .dialog-backdrop {
    place-items: center;
    padding: 18px;
  }

  .receipt {
    width: min(94vw, 430px);
    min-height: auto;
    padding: 34px 24px;
    border-radius: 24px;
  }

  .receipt-content {
    display: flex;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
  }

  .receipt-copy h2 {
    margin-bottom: 10px;
  }

  .receipt-home {
    width: 100%;
  }
}