:root {
  color-scheme: dark;
  --bg: #08070d;
  --surface: #11101a;
  --surface-2: #181625;
  --surface-3: #211d31;
  --line: rgba(255,255,255,.09);
  --text: #f7f5ff;
  --muted: #aaa5bc;
  --primary: #8b5cf6;
  --primary-2: #6d3fe8;
  --primary-soft: rgba(139,92,246,.13);
  --success: #34d399;
  --warning: #fbbf24;
  --danger: #fb7185;
  --shadow: 0 28px 80px rgba(0,0,0,.34);
  --radius: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 20% -10%, rgba(124,58,237,.18), transparent 35%), var(--bg); color: var(--text); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
code { font-family: "SFMono-Regular", Consolas, monospace; font-size: .88em; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .5rem; font-size: clamp(1.8rem, 3vw, 2.55rem); letter-spacing: -.045em; line-height: 1.08; }
h2 { margin-bottom: .4rem; font-size: 1.06rem; letter-spacing: -.02em; }
.muted { color: var(--muted); line-height: 1.65; }
.eyebrow { display: block; margin-bottom: .7rem; color: #b89aff; font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.success-text { color: var(--success); }

.brand-lockup { display: inline-flex; align-items: center; gap: .72rem; font-weight: 800; letter-spacing: -.025em; }
.brand-mark { display: inline-grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: linear-gradient(145deg, #a78bfa, #6d28d9); color: white; box-shadow: 0 10px 30px rgba(109,40,217,.35); }

.button { display: inline-flex; min-height: 45px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 12px; background: linear-gradient(135deg, var(--primary), var(--primary-2)); padding: .72rem 1rem; color: white; cursor: pointer; font-weight: 750; box-shadow: 0 12px 30px rgba(109,40,217,.2); transition: transform .18s ease, filter .18s ease; }
.button:hover { transform: translateY(-1px); filter: brightness(1.07); }
.button.full { width: 100%; }
.button.secondary { border-color: var(--line); background: var(--surface-2); box-shadow: none; }
.button.success { background: linear-gradient(135deg, #10b981, #047857); box-shadow: 0 12px 30px rgba(16,185,129,.18); }
.button.danger { background: linear-gradient(135deg, #f43f5e, #be123c); box-shadow: 0 12px 30px rgba(244,63,94,.16); }
.text-button { border: 0; background: none; padding: .3rem; color: var(--muted); cursor: pointer; }
.text-button:hover { color: var(--text); }
.danger-text { color: var(--danger); }

.alert { border: 1px solid var(--line); border-radius: 13px; margin-bottom: 1rem; padding: .85rem 1rem; line-height: 1.45; }
.alert.error { border-color: rgba(251,113,133,.28); background: rgba(251,113,133,.1); color: #fecdd3; }
.alert.success { border-color: rgba(52,211,153,.26); background: rgba(52,211,153,.09); color: #a7f3d0; }
.notice { border: 1px solid rgba(139,92,246,.24); border-radius: 12px; background: var(--primary-soft); padding: .8rem .9rem; color: #d8ccff; font-size: .86rem; line-height: 1.5; }
.notice.warning { display: grid; gap: .3rem; border-color: rgba(251,191,36,.25); background: rgba(251,191,36,.08); color: #fde68a; }

.auth-shell { display: grid; min-height: 100vh; place-items: center; padding: 2rem 1rem; }
.auth-card { width: min(100%, 460px); border: 1px solid var(--line); border-radius: 24px; background: rgba(17,16,26,.88); padding: clamp(1.5rem, 4vw, 2.4rem); box-shadow: var(--shadow); backdrop-filter: blur(16px); }
.auth-card > .brand-lockup { margin-bottom: 2.8rem; }
.install-card { width: min(100%, 760px); }
.stack-form { display: grid; gap: 1rem; }
.stack-form.compact { margin-top: 1rem; gap: .75rem; }
.stack-form label { display: grid; gap: .48rem; color: #d6d1e2; font-size: .84rem; font-weight: 650; }
.stack-form label small { color: var(--muted); font-weight: 450; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 12px; outline: 0; background: #0c0b12; padding: .78rem .88rem; color: var(--text); transition: border-color .18s ease, box-shadow .18s ease; }
input:focus, select:focus, textarea:focus { border-color: rgba(139,92,246,.7); box-shadow: 0 0 0 3px rgba(139,92,246,.12); }
textarea { min-height: 98px; resize: vertical; }
.form-grid { display: grid; gap: 1rem; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.section-rule { display: flex; align-items: center; gap: 1rem; color: var(--muted); font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.section-rule::before, .section-rule::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.secret-box, .secret-reveal { overflow-wrap: anywhere; border: 1px dashed rgba(167,139,250,.45); border-radius: 14px; background: #0b0912; padding: 1rem; }
.secret-box code { color: #d8ccff; }
.secret-reveal { display: grid; gap: .55rem; margin-bottom: 1.25rem; }
.secret-reveal code { color: #c4b5fd; font-size: .9rem; }
.secret-reveal span { color: var(--muted); font-size: .82rem; }
.link-price { margin: .4rem 0 1.35rem; color: #ddd2ff; font-size: 2.25rem; font-weight: 900; letter-spacing: -.05em; }

.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; width: 250px; flex-direction: column; border-right: 1px solid var(--line); background: rgba(12,11,18,.96); padding: 1.4rem 1rem; backdrop-filter: blur(18px); }
.sidebar > .brand-lockup { padding: .2rem .55rem 1.8rem; }
.nav-list { display: grid; gap: .3rem; }
.nav-item { display: flex; align-items: center; gap: .75rem; border-radius: 11px; padding: .7rem .75rem; color: var(--muted); font-size: .9rem; font-weight: 650; }
.nav-item:hover, .nav-item.active { background: var(--primary-soft); color: #e9e3ff; }
.nav-icon { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid var(--line); border-radius: 8px; font-size: .68rem; }
.sidebar-footer { display: grid; gap: .8rem; margin-top: auto; border-top: 1px solid var(--line); padding: 1rem .55rem 0; }
.admin-chip { display: flex; align-items: center; gap: .7rem; }
.admin-chip > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--surface-3); color: #c4b5fd; font-weight: 800; }
.admin-chip div { display: grid; }
.admin-chip strong { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .83rem; }
.admin-chip small { color: var(--muted); }
.admin-shell { min-height: 100vh; padding-left: 250px; }
.topbar { display: flex; height: 64px; align-items: center; justify-content: flex-end; border-bottom: 1px solid var(--line); padding: 0 clamp(1rem, 4vw, 2.2rem); }
.menu-button { display: none; border: 0; background: transparent; font-size: 1.35rem; }
.secure-pill { border: 1px solid rgba(52,211,153,.18); border-radius: 999px; background: rgba(52,211,153,.07); padding: .38rem .68rem; color: #a7f3d0; font-size: .74rem; font-weight: 750; }
.page-content { width: min(100%, 1440px); margin: 0 auto; padding: clamp(1.2rem, 4vw, 2.4rem); }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.45rem; }
.page-heading p { margin-bottom: 0; }

.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.metric-card, .panel { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(17,16,26,.84); box-shadow: 0 14px 45px rgba(0,0,0,.12); }
.metric-card { display: grid; gap: .65rem; padding: 1.25rem; }
.metric-card span, .metric-card small { color: var(--muted); font-size: .78rem; }
.metric-card strong { font-size: 1.65rem; letter-spacing: -.04em; }
.panel { padding: 1.15rem; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.panel-heading h2, .panel-heading p { margin-bottom: 0; }
.panel-heading p { margin-top: .25rem; color: var(--muted); font-size: .82rem; }
.compact-panel { align-self: start; }
.empty-state { display: grid; place-items: center; gap: .5rem; min-height: 230px; color: var(--muted); text-align: center; }
.empty-state strong { color: var(--text); }

.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th { padding: .72rem; color: var(--muted); font-size: .7rem; letter-spacing: .08em; text-align: left; text-transform: uppercase; }
td { border-top: 1px solid var(--line); padding: .85rem .72rem; font-size: .84rem; vertical-align: middle; }
td a { color: #c4b5fd; }
.table-subline { display: block; margin-top: .2rem; color: var(--muted); }
.amount { font-variant-numeric: tabular-nums; font-weight: 800; }
.selected-row { background: rgba(139,92,246,.06); }
.status { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: .27rem .55rem; color: var(--muted); font-size: .68rem; font-weight: 800; text-transform: capitalize; white-space: nowrap; }
.status-paid, .status-active, .status-delivered { border-color: rgba(52,211,153,.2); background: rgba(52,211,153,.08); color: #a7f3d0; }
.status-pending_verification, .status-awaiting_payment, .status-pending, .status-coming_soon { border-color: rgba(251,191,36,.2); background: rgba(251,191,36,.07); color: #fde68a; }
.status-rejected, .status-revoked, .status-failed, .status-inactive, .status-expired { border-color: rgba(251,113,133,.2); background: rgba(251,113,133,.08); color: #fecdd3; }
.filter-row { display: flex; gap: .5rem; overflow: auto; margin-bottom: 1rem; padding-bottom: .15rem; }
.filter-chip { border: 1px solid var(--line); border-radius: 999px; padding: .45rem .72rem; color: var(--muted); font-size: .76rem; white-space: nowrap; }
.filter-chip.active { border-color: rgba(139,92,246,.35); background: var(--primary-soft); color: #ddd2ff; }
.detail-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 1rem; margin-top: 1rem; }
.detail-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .75rem; }
.detail-list div { border: 1px solid var(--line); border-radius: 12px; background: #0d0c13; padding: .8rem; }
.detail-list dt { margin-bottom: .35rem; color: var(--muted); font-size: .7rem; text-transform: uppercase; }
.detail-list dd { margin: 0; overflow-wrap: anywhere; font-size: .9rem; }
.decision-card { display: grid; align-content: start; gap: .9rem; }
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; }
.method-heading { display: flex; align-items: center; gap: .75rem; }
.method-heading h2 { margin: 0; }
.method-heading small { color: var(--muted); }
.method-logo { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: var(--surface-3); font-weight: 900; }
.method-logo.bkash { background: #e2136e; }
.method-logo.nagad { background: #f15a24; }
.method-logo.rocket { background: #8a2be2; }
.method-logo.upay { background: #ffb400; color: #1f1300; }
.split-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1rem; }
.context-code { display: inline-block; max-width: 380px; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }

.checkout-shell { min-height: 100vh; }
.checkout-header { display: flex; width: min(100% - 2rem, 1180px); height: 76px; align-items: center; justify-content: space-between; margin: 0 auto; }
.checkout-grid { display: grid; width: min(100% - 2rem, 1080px); grid-template-columns: minmax(0, 1fr) 340px; gap: 1.1rem; margin: 2rem auto 4rem; }
.checkout-main, .order-summary { border: 1px solid var(--line); border-radius: 24px; background: rgba(17,16,26,.9); box-shadow: var(--shadow); }
.checkout-main { padding: clamp(1.35rem, 4vw, 2.4rem); }
.order-summary { align-self: start; padding: 1.4rem; }
.order-summary h2 { margin-bottom: 1.3rem; font-size: 2.2rem; }
.order-summary dl { display: grid; gap: .9rem; }
.order-summary dl div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--line); padding-bottom: .75rem; }
.order-summary dt { color: var(--muted); }
.order-summary dd { margin: 0; max-width: 180px; overflow-wrap: anywhere; text-align: right; }
.summary-note { margin: 1rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.stepper { display: flex; align-items: center; margin: 1.6rem 0; }
.stepper span { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); font-size: .75rem; font-weight: 850; }
.stepper span.done, .stepper span.active { border-color: var(--primary); background: var(--primary); color: white; }
.stepper i { height: 1px; flex: 1; background: var(--line); }
.method-selector { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .65rem; }
.method-option { position: relative; display: grid !important; place-items: center; gap: .35rem !important; border: 1px solid var(--line); border-radius: 14px; padding: .8rem .55rem; cursor: pointer; text-align: center; }
.method-option:has(input:checked) { border-color: rgba(139,92,246,.65); background: var(--primary-soft); box-shadow: 0 0 0 2px rgba(139,92,246,.09); }
.method-option input { position: absolute; opacity: 0; pointer-events: none; }
.method-option .method-logo { width: 36px; height: 36px; }
.method-option small { color: var(--muted); }
.payment-instruction { border: 1px solid var(--line); border-radius: 15px; background: #0d0c13; padding: 1rem; }
.instruction-item { display: none; gap: .7rem; }
.instruction-item.active { display: grid; }
.instruction-item small { color: var(--muted); line-height: 1.5; }
.copy-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-radius: 11px; background: var(--surface-2); padding: .7rem .8rem; }
.copy-row code { color: #ddd2ff; font-size: 1rem; font-weight: 800; }
.copy-button { border: 0; background: none; color: #b89aff; cursor: pointer; font-weight: 800; }
.result-state { display: grid; place-items: center; gap: .65rem; min-height: 300px; text-align: center; }
.result-state > span { display: grid; width: 70px; height: 70px; place-items: center; border-radius: 50%; font-size: 2rem; font-weight: 900; }
.result-state strong { font-size: 1.35rem; }
.result-state p { max-width: 420px; color: var(--muted); }
.success-state > span { background: rgba(52,211,153,.12); color: var(--success); }
.pending-state > span { background: rgba(251,191,36,.1); color: var(--warning); }
.error-state > span { background: rgba(251,113,133,.1); color: var(--danger); }
.public-flash { width: min(100% - 2rem, 1080px); margin: 1rem auto 0; }

@media (max-width: 1020px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .checkout-grid { grid-template-columns: 1fr; }
  .order-summary { order: -1; }
  .detail-grid, .split-layout { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  .sidebar { transform: translateX(-101%); transition: transform .2s ease; }
  .sidebar-open .sidebar { transform: translateX(0); }
  .admin-shell { padding-left: 0; }
  .topbar { justify-content: space-between; }
  .menu-button { display: block; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .card-grid { grid-template-columns: 1fr; }
  .method-selector { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 560px) {
  .form-grid.two, .detail-list, .metric-grid { grid-template-columns: 1fr; }
  .auth-shell { padding: 0; }
  .auth-card { min-height: 100vh; border: 0; border-radius: 0; padding: 1.35rem; }
  .checkout-header { height: 66px; }
  .checkout-grid { width: 100%; margin: .5rem 0 0; }
  .checkout-main, .order-summary { border-right: 0; border-left: 0; border-radius: 0; }
  .order-summary { box-shadow: none; }
  .page-content { padding: 1rem; }
}

/* NirapodPay hosted checkout — light, focused payment flow */
.gateway-page {
  min-height: 100vh;
  display: grid;
  place-items: start center;
  padding: 2rem 1rem 4rem;
  background: #f5f7fa;
  color: #253141;
  color-scheme: light;
}
.gateway-card {
  width: min(100%, 560px);
  overflow: hidden;
  border: 1px solid #e6eaf0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(27, 39, 51, .10);
}
.gateway-topbar {
  min-height: 64px;
  display: grid;
  grid-template-columns: 42px 1fr 42px;
  align-items: center;
  padding: .7rem 1.1rem;
  background: #f5f7fb;
  border-bottom: 1px solid #edf0f4;
}
.gateway-brand { grid-column: 2; display: flex; justify-content: center; align-items: center; gap: .55rem; font-size: .9rem; }
.gateway-brand-mark { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; background: linear-gradient(135deg,#8b5cf6,#6d3fe8); color:#fff; font-weight:900; }
.gateway-icon-button, .gateway-close-mark { grid-column: 1; grid-row: 1; display:grid; width:34px; height:34px; place-items:center; border-radius:50%; color:#23ad72; font-size:1.25rem; text-decoration:none; }
.gateway-icon-button:hover { background:#eaf8f2; }
.gateway-close-mark { color:#2fb979; }
.gateway-summary { display:flex; align-items:center; gap:1rem; margin:1.25rem; padding:1.05rem; border-radius:12px; background:#f5f7fb; }
.gateway-merchant-logo { display:grid; width:48px; height:48px; place-items:center; flex:0 0 48px; border:1px solid #dbe3ec; border-radius:10px; background:#fff; color:#7146e8; font-weight:900; font-size:1.25rem; }
.gateway-summary-copy { min-width:0; display:grid; gap:.12rem; }
.gateway-summary-copy > strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.95rem; color:#26313d; }
.gateway-summary-copy small { color:#7b8794; }
.gateway-amount { color:#27b878; font-weight:800; font-size:1.45rem; }
.gateway-section-title { margin:1rem 1.25rem 0; padding-bottom:.75rem; border-bottom:2px solid #2fbb7a; color:#28ad70; font-size:.95rem; font-weight:700; }
.gateway-method-form { padding-bottom:1.25rem; }
.gateway-method-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; padding:1rem 1.25rem; }
.gateway-method-card { position:relative; display:grid !important; min-height:112px; place-items:center; align-content:center; gap:.45rem !important; margin:0 !important; padding:.8rem; border:1px solid #dfe6ee; border-radius:9px; background:#fff; cursor:pointer; text-align:center; color:#485564; font-size:.78rem; transition:.15s ease; }
.gateway-method-card:hover { border-color:#9fdcc2; transform:translateY(-1px); box-shadow:0 7px 18px rgba(42, 120, 84, .08); }
.gateway-method-card:has(input:checked) { border-color:#2fb979; box-shadow:0 0 0 2px rgba(47,185,121,.13); }
.gateway-method-card input { position:absolute; opacity:0; pointer-events:none; }
.gateway-method-logo-wrap { display:grid; height:48px; place-items:center; }
.gateway-method-logo { display:block; max-width:110px; max-height:46px; object-fit:contain; }
.gateway-method-fallback { display:grid; width:42px; height:42px; place-items:center; border-radius:10px; background:#eef1f5; color:#536273; font-weight:900; }
.gateway-pay-button { display:flex; width:calc(100% - 2.5rem); min-height:52px; align-items:center; justify-content:center; margin:0 1.25rem; border:0; border-radius:7px; background:#36b878; color:#fff !important; font:inherit; font-weight:800; text-decoration:none; cursor:pointer; transition:.15s ease; }
.gateway-pay-button:hover { background:#2ca86c; transform:translateY(-1px); }
.gateway-pay-button-muted { background:#657586; }
.gateway-selected-logo { display:grid; min-height:78px; place-items:center; margin:0 1.25rem 1rem; }
.gateway-selected-logo img { max-width:145px; max-height:60px; object-fit:contain; }
.gateway-instructions { margin:0 1.25rem 1rem; overflow:hidden; border:1px solid #dfe5eb; border-radius:8px; background:#fff; }
.gateway-instructions > div { display:flex; min-height:52px; align-items:center; gap:.65rem; padding:.75rem .9rem; border-bottom:1px solid #e9edf1; font-size:.83rem; line-height:1.4; }
.gateway-instructions > div:last-child { border-bottom:0; }
.gateway-instructions > div > span:first-child { display:grid; width:22px; height:22px; flex:0 0 22px; place-items:center; border-radius:50%; background:#e7f8ef; color:#2fb979; font-size:.72rem; font-weight:800; }
.gateway-instructions p { margin:0; flex:1; }
.gateway-instructions strong { color:#22a96b; }
.gateway-value { white-space:nowrap; border-radius:6px; background:#e8f8f0; padding:.35rem .55rem; }
.gateway-copy { border:0; border-radius:5px; background:#35b879; color:#fff; padding:.37rem .55rem; cursor:pointer; font:inherit; font-size:.72rem; font-weight:800; }
.gateway-verify-form { display:grid; gap:.8rem; padding:0 1.25rem 1.35rem; }
.gateway-verify-form label { display:grid; gap:.45rem; color:#344251; font-size:.78rem; font-weight:700; }
.gateway-verify-form input { width:100%; height:48px; border:1px solid #d8e0e8; border-radius:7px; background:#fff; color:#26313d; padding:0 .85rem; outline:none; }
.gateway-verify-form input:focus { border-color:#37b97a; box-shadow:0 0 0 3px rgba(55,185,122,.12); }
.gateway-verify-form .gateway-pay-button { width:100%; margin:0; }
.gateway-alert { margin:0 1.25rem 1rem; border:1px solid #ffd1d1; border-radius:7px; background:#fff1f1; color:#b43b3b; padding:.75rem .9rem; font-size:.82rem; }
.gateway-footer { display:grid; gap:.45rem; place-items:center; border-top:1px solid #edf0f3; padding:1rem; color:#72808d; text-align:center; font-size:.74rem; }
.gateway-footer small { color:#71808f; }
.gateway-footer strong { color:#35b879; }
.gateway-result { display:grid; place-items:center; gap:.65rem; padding:2rem 1.25rem 2.3rem; text-align:center; }
.gateway-result-icon { display:grid; width:58px; height:58px; place-items:center; border-radius:50%; font-size:1.6rem; font-weight:900; }
.gateway-result h1 { margin:0; color:#26313d; font-size:1.45rem; }
.gateway-result p { max-width:390px; margin:0; color:#73808c; line-height:1.55; }
.gateway-result-success .gateway-result-icon { background:#e7f8ef; color:#2fb979; }
.gateway-result-pending .gateway-result-icon { background:#fff7db; color:#c39112; }
.gateway-result-error .gateway-result-icon { background:#fff0f0; color:#d74b4b; }

@media (max-width: 560px) {
  .gateway-page { padding:0; background:#fff; }
  .gateway-card { min-height:100vh; border:0; border-radius:0; box-shadow:none; }
  .gateway-method-grid { gap:.65rem; padding:.85rem 1rem; }
  .gateway-summary, .gateway-instructions { margin-right:1rem; margin-left:1rem; }
  .gateway-section-title { margin-right:1rem; margin-left:1rem; }
  .gateway-pay-button { width:calc(100% - 2rem); margin-right:1rem; margin-left:1rem; }
  .gateway-verify-form { padding-right:1rem; padding-left:1rem; }
  .gateway-verify-form .gateway-pay-button { width:100%; margin:0; }
}

/* =========================================================
   NirapodPay Phase 2 — White / Black UI + motion polish
   ========================================================= */
:root {
  color-scheme: light;
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface-2: #f5f6f7;
  --surface-3: #eef1f3;
  --line: #e4e7eb;
  --text: #111318;
  --muted: #667085;
  --primary: #0f9f67;
  --primary-2: #087a4f;
  --primary-soft: rgba(15,159,103,.09);
  --success: #0f9f67;
  --warning: #b7791f;
  --danger: #d92d20;
  --shadow: 0 18px 60px rgba(16,24,40,.08);
}

html { background: var(--bg); }
body {
  background: linear-gradient(180deg, #fff 0, #f8f9fb 32%, #f5f6f8 100%);
  color: var(--text);
}

h1,h2,h3,strong { color: #111318; }
.eyebrow { color: var(--primary); }
.muted { color: var(--muted); }

.brand-mark,
.gateway-brand-mark {
  background: linear-gradient(145deg,#16b477,#087a4f);
  color:#fff;
  box-shadow:0 8px 22px rgba(15,159,103,.18);
}
.brand-mark { animation: npLogoFloat 4.5s ease-in-out infinite; }

.button {
  background: #111318;
  color: #fff;
  box-shadow: 0 10px 26px rgba(17,19,24,.12);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.button:hover { transform: translateY(-2px); background:#000; box-shadow:0 14px 34px rgba(17,19,24,.16); filter:none; }
.button.secondary { border-color:var(--line); background:#fff; color:#111318; box-shadow:none; }
.button.secondary:hover { background:#f7f8fa; }
.button.success { background:#0f9f67; box-shadow:0 10px 26px rgba(15,159,103,.16); }
.button.danger { background:#d92d20; box-shadow:0 10px 26px rgba(217,45,32,.13); }

input,select,textarea {
  border-color:#dfe3e8;
  background:#fff;
  color:#111318;
}
input::placeholder,textarea::placeholder { color:#98a2b3; }
input:focus,select:focus,textarea:focus {
  border-color:#0f9f67;
  box-shadow:0 0 0 4px rgba(15,159,103,.10);
}
.stack-form label { color:#344054; }

.auth-shell { background: radial-gradient(circle at 50% 0, rgba(15,159,103,.08), transparent 34%), #f7f8fa; }
.auth-card {
  border-color:#e4e7eb;
  background:#fff;
  box-shadow:0 24px 70px rgba(16,24,40,.10);
  backdrop-filter:none;
  animation:npFadeUp .55s cubic-bezier(.2,.75,.25,1) both;
}
.auth-developer { display:block; margin-top:1.2rem; color:#98a2b3; text-align:center; font-size:.72rem; }
.auth-developer strong { color:#475467; }

.sidebar {
  border-right-color:#e7e9ed;
  background:rgba(255,255,255,.97);
  box-shadow:12px 0 35px rgba(16,24,40,.035);
  backdrop-filter:blur(18px);
}
.nav-item { color:#667085; transition:background .18s ease,color .18s ease,transform .18s ease; }
.nav-item:hover { background:#f6f7f8; color:#111318; transform:translateX(2px); }
.nav-item.active { background:#eefbf5; color:#087a4f; box-shadow:inset 3px 0 0 #0f9f67; }
.nav-icon { border-color:#e1e5ea; background:#fff; color:#667085; }
.nav-item.active .nav-icon { border-color:#bfead8; color:#087a4f; background:#fff; }
.sidebar-footer { border-top-color:#e7e9ed; }
.admin-chip > span { background:#eefbf5; color:#087a4f; }
.admin-chip small,.text-button { color:#667085; }
.text-button:hover { color:#111318; }
.developer-credit { color:#98a2b3; font-size:.66rem; line-height:1.5; }
.developer-credit strong { color:#667085; }

.admin-shell { background:#f8f9fa; }
.topbar {
  position:sticky; top:0; z-index:10;
  border-bottom-color:#e7e9ed;
  background:rgba(255,255,255,.90);
  backdrop-filter:blur(14px);
}
.secure-pill { border-color:#bfead8; background:#eefbf5; color:#087a4f; }
.page-content { animation:npFadeUp .42s ease both; }

.metric-card,.panel {
  border-color:#e5e7eb;
  background:#fff;
  box-shadow:0 10px 32px rgba(16,24,40,.045);
}
.metric-card { position:relative; overflow:hidden; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.metric-card::after { content:""; position:absolute; inset:auto 0 0; height:2px; background:linear-gradient(90deg,transparent,#0f9f67,transparent); transform:scaleX(0); transition:transform .25s ease; }
.metric-card:hover { transform:translateY(-3px); border-color:#d8ebe3; box-shadow:0 16px 40px rgba(16,24,40,.07); }
.metric-card:hover::after { transform:scaleX(1); }
.metric-card span,.metric-card small { color:#667085; }

th { color:#667085; }
td { border-top-color:#edf0f2; }
td a { color:#087a4f; font-weight:700; }
tr { transition:background .16s ease; }
tbody tr:hover { background:#fafcfb; }
.selected-row { background:#f1fbf6; }

.status { border-color:#e3e7eb; background:#f8f9fa; color:#475467; }
.status-paid,.status-active,.status-delivered { border-color:#bfead8; background:#eefbf5; color:#087a4f; }
.status-pending_verification,.status-awaiting_payment,.status-pending,.status-coming_soon { border-color:#f1d6a5; background:#fff8eb; color:#9a650f; }
.status-rejected,.status-revoked,.status-failed,.status-inactive,.status-expired { border-color:#f5c4c0; background:#fff2f1; color:#b42318; }
.status-pending_verification { animation:npSoftPulse 2.4s ease-in-out infinite; }

.alert { border-color:#e4e7eb; background:#fff; }
.alert.error { border-color:#f5c4c0; background:#fff2f1; color:#b42318; }
.alert.success { border-color:#bfead8; background:#eefbf5; color:#087a4f; }
.notice { border-color:#cbe9dc; background:#f1fbf6; color:#27634c; }
.notice.warning { border-color:#f1d6a5; background:#fff8eb; color:#80510b; }
.secret-box,.secret-reveal { border-color:#cfd8d3; background:#fafcfb; }
.secret-box code,.secret-reveal code { color:#087a4f; }
.link-price { color:#111318; }
.payment-instruction { border-color:#e4e7eb; background:#fff; }
.copy-row { background:#f5f7f6; }
.copy-row code { color:#111318; }
.copy-button { color:#087a4f; }

/* Checkout: crisp white / black with green payment accent */
.gateway-page {
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 12% 6%, rgba(15,159,103,.08), transparent 22%),
    linear-gradient(180deg,#ffffff 0,#f7f8fa 100%);
  color:#111318;
}
.gateway-page::before,.gateway-page::after {
  content:""; position:fixed; z-index:0; border-radius:50%; pointer-events:none; filter:blur(1px);
  background:rgba(15,159,103,.055); animation:npOrb 9s ease-in-out infinite alternate;
}
.gateway-page::before { width:280px; height:280px; left:-110px; top:18%; }
.gateway-page::after { width:220px; height:220px; right:-90px; bottom:8%; animation-delay:-3s; }
.gateway-card {
  position:relative; z-index:1;
  border-color:#e5e7eb;
  border-radius:20px;
  box-shadow:0 28px 80px rgba(16,24,40,.10);
  animation:npGatewayIn .58s cubic-bezier(.2,.75,.25,1) both;
}
.gateway-topbar { background:#fff; border-bottom-color:#edf0f2; }
.gateway-brand strong { color:#111318; }
.gateway-icon-button,.gateway-close-mark { color:#0f9f67; transition:transform .18s ease,background .18s ease; }
.gateway-icon-button:hover { background:#eefbf5; transform:translateX(-2px); }
.gateway-summary { background:#f7f8fa; border:1px solid #edf0f2; animation:npFadeUp .45s .08s ease both; }
.gateway-merchant-logo { color:#087a4f; border-color:#d9e6e0; box-shadow:0 5px 16px rgba(16,24,40,.04); }
.gateway-summary-copy > strong,.gateway-result h1 { color:#111318; }
.gateway-amount { color:#0f9f67; }
.gateway-section-title { border-bottom-color:#0f9f67; color:#087a4f; }
.gateway-method-grid { perspective:900px; }
.gateway-method-card {
  color:#344054; border-color:#e2e6ea; border-radius:12px;
  transition:transform .2s cubic-bezier(.2,.75,.25,1),box-shadow .2s ease,border-color .2s ease,background .2s ease;
  animation:npCardIn .42s ease both;
}
.gateway-method-card:nth-child(2) { animation-delay:.05s; }
.gateway-method-card:nth-child(3) { animation-delay:.10s; }
.gateway-method-card:nth-child(4) { animation-delay:.15s; }
.gateway-method-card:hover { border-color:#9fd8bf; transform:translateY(-4px) scale(1.01); box-shadow:0 14px 30px rgba(16,24,40,.08); }
.gateway-method-card:has(input:checked) { border-color:#0f9f67; background:#f5fcf8; box-shadow:0 0 0 3px rgba(15,159,103,.10),0 12px 28px rgba(15,159,103,.06); transform:translateY(-2px); }
.gateway-method-card:has(input:checked)::after { content:"✓"; position:absolute; top:8px; right:8px; display:grid; width:22px; height:22px; place-items:center; border-radius:50%; background:#0f9f67; color:#fff; font-size:.72rem; font-weight:900; animation:npPop .22s ease both; }
.gateway-method-logo { filter:none; }
.gateway-pay-button {
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:10px; background:#111318; color:#fff!important;
  box-shadow:0 12px 28px rgba(17,19,24,.13);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.gateway-pay-button::before { content:""; position:absolute; inset:0; z-index:-1; transform:translateX(-115%); background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.20) 48%,transparent 75%); animation:npShine 3.2s ease-in-out infinite; }
.gateway-pay-button:hover { background:#000; transform:translateY(-2px); box-shadow:0 16px 36px rgba(17,19,24,.18); }
.gateway-pay-button:active { transform:translateY(0) scale(.99); }
.gateway-pay-button-muted { background:#475467; }
.gateway-selected-logo { animation:npLogoReveal .38s cubic-bezier(.2,.8,.25,1) both; }
.gateway-instructions { border-color:#e2e6ea; border-radius:12px; animation:npFadeUp .42s .06s ease both; }
.gateway-instructions > div { border-bottom-color:#edf0f2; transition:background .16s ease; }
.gateway-instructions > div:hover { background:#fafcfb; }
.gateway-instructions > div > span:first-child { background:#e9f8f1; color:#087a4f; }
.gateway-instructions strong { color:#087a4f; }
.gateway-value { background:#eefbf5; color:#087a4f!important; }
.gateway-copy { background:#0f9f67; transition:transform .15s ease,background .15s ease; }
.gateway-copy:hover { background:#087a4f; transform:translateY(-1px); }
.gateway-copy.is-copied { animation:npPop .25s ease both; }
.gateway-verify-form { animation:npFadeUp .42s .10s ease both; }
.gateway-verify-form input { border-color:#dfe3e8; color:#111318; }
.gateway-verify-form input:focus { border-color:#0f9f67; box-shadow:0 0 0 4px rgba(15,159,103,.10); }
.gateway-alert { border-color:#f5c4c0; background:#fff2f1; color:#b42318; }
.gateway-footer { border-top-color:#edf0f2; color:#667085; }
.gateway-footer strong { color:#087a4f; }
.gateway-developer { color:#98a2b3!important; }
.gateway-developer strong { color:#475467!important; }
.gateway-result { animation:npFadeUp .45s ease both; }
.gateway-result-icon { animation:npResultPop .5s cubic-bezier(.16,1,.3,1) both; }
.gateway-result-success .gateway-result-icon { background:#e9f8f1; color:#0f9f67; }
.gateway-result-pending .gateway-result-icon { background:#fff5dc; color:#b7791f; animation:npResultPop .5s ease both,npSoftPulse 2.2s .5s ease-in-out infinite; }
.gateway-result-error .gateway-result-icon { background:#fff2f1; color:#d92d20; }

/* Small interaction ripple */
.np-ripple { position:absolute; border-radius:50%; pointer-events:none; background:rgba(255,255,255,.28); transform:translate(-50%,-50%) scale(0); animation:npRipple .55s ease-out forwards; }

@keyframes npFadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes npGatewayIn { from { opacity:0; transform:translateY(18px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes npCardIn { from { opacity:0; transform:translateY(10px) rotateX(3deg); } to { opacity:1; transform:none; } }
@keyframes npLogoReveal { 0% { opacity:0; transform:scale(.88); } 70% { transform:scale(1.035); } 100% { opacity:1; transform:scale(1); } }
@keyframes npLogoFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-2px); } }
@keyframes npPop { 0% { transform:scale(.72); opacity:0; } 100% { transform:scale(1); opacity:1; } }
@keyframes npResultPop { 0% { opacity:0; transform:scale(.55) rotate(-8deg); } 70% { transform:scale(1.08) rotate(2deg); } 100% { opacity:1; transform:scale(1); } }
@keyframes npSoftPulse { 0%,100% { box-shadow:0 0 0 0 rgba(183,121,31,0); } 50% { box-shadow:0 0 0 5px rgba(183,121,31,.08); } }
@keyframes npShine { 0%,58% { transform:translateX(-115%); } 82%,100% { transform:translateX(115%); } }
@keyframes npOrb { from { transform:translate3d(0,0,0) scale(.95); } to { transform:translate3d(20px,-18px,0) scale(1.08); } }
@keyframes npRipple { to { transform:translate(-50%,-50%) scale(8); opacity:0; } }

@media (max-width:780px) {
  .sidebar { box-shadow:18px 0 50px rgba(16,24,40,.12); }
  .sidebar-open::after { content:""; position:fixed; inset:0; z-index:15; background:rgba(17,19,24,.22); backdrop-filter:blur(2px); }
  .sidebar-open .sidebar { z-index:30; }
}

@media (max-width:560px) {
  .gateway-card { animation:none; }
  .gateway-page::before,.gateway-page::after { display:none; }
  .gateway-method-card:hover { transform:none; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.001ms!important; }
}


/* Phase 3 brand assets, lighter premium font, responsive logo polish */
:root {
  font-family: "Segoe UI Variable Text", "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
body, button, input, select, textarea {
  font-family: "Segoe UI Variable Text", "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
h1, h2, h3 { letter-spacing: -.04em; }
strong, b { font-weight: 750; }

.brand-lockup { gap: .9rem; }
.brand-logo { display:block; height:34px; width:auto; max-width:210px; }
.gateway-brand-logo { display:block; height:30px; width:auto; max-width:170px; }
.brand-mark, .gateway-brand-mark { display:none !important; }
.gateway-brand { justify-content:center; }
.gateway-merchant-logo { padding:0; overflow:hidden; }
.gateway-merchant-logo img { width:100%; height:100%; object-fit:contain; }

.method-heading { display:flex; align-items:center; gap:.95rem; margin-bottom:.25rem; }
.method-logo-card { display:flex; align-items:center; justify-content:center; width:82px; height:58px; border:1px solid #e8ecf0; border-radius:16px; background:#fff; box-shadow:0 10px 24px rgba(16,24,40,.04); transition:transform .18s ease, box-shadow .18s ease; }
.method-card:hover .method-logo-card { transform:translateY(-1px); box-shadow:0 14px 28px rgba(16,24,40,.08); }
.method-logo-image { display:block; width:auto; max-width:64px; max-height:36px; object-fit:contain; }
.method-card.panel { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.method-card.panel:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(16,24,40,.08); border-color:#d6e8df; }

.gateway-method-logo-wrap { width:100%; }
.gateway-method-logo { width:auto; max-width:120px; max-height:42px; object-fit:contain; }
.gateway-selected-logo img { display:block; max-width:140px; max-height:54px; width:auto; height:auto; }

.nav-item, .metric-card, .panel, .button, .gateway-method-card, .gateway-pay-button { will-change: transform; }

@media (max-width: 780px) {
  .brand-logo { height:32px; max-width:185px; }
  .sidebar > .brand-lockup { padding-right:.2rem; }
  .method-logo-card { width:72px; height:54px; }
  .method-logo-image { max-width:58px; max-height:32px; }
}

@media (max-width: 560px) {
  .brand-logo { height:30px; max-width:170px; }
  .gateway-brand-logo { height:28px; }
  .gateway-method-grid { grid-template-columns: 1fr 1fr; gap:.7rem; }
  .gateway-method-logo { max-width:100px; }
  .method-heading { align-items:flex-start; }
  .method-logo-card { width:68px; height:50px; border-radius:14px; }
  .method-logo-image { max-width:52px; max-height:28px; }
}


/* Phase 3.1 — original payment brand artwork */
.method-logo-card, .gateway-method-logo-wrap { overflow:hidden; }
.method-logo-image-bkash, .gateway-method-logo-bkash { max-width:118px; max-height:42px; }
.method-logo-image-nagad, .gateway-method-logo-nagad { max-width:112px; max-height:42px; }
.method-logo-image-upay, .gateway-method-logo-upay { max-width:72px; max-height:48px; }

/* Rocket official artwork is served in an official DBBL banner; crop to the logo region. */
.method-logo-image-rocket, .gateway-method-logo-rocket, .gateway-selected-logo-rocket {
  max-width:none !important;
  max-height:none !important;
  width:210px !important;
  height:auto !important;
  object-fit:initial !important;
  object-position:left center;
  transform:translateX(-3px);
}
.method-logo-card.rocket { overflow:hidden; justify-content:flex-start; }
.method-logo-card.rocket .method-logo-image-rocket { width:190px !important; transform:translate(-6px,0); }
.gateway-method-card:has(input[value="rocket"]) .gateway-method-logo-wrap { justify-content:flex-start; overflow:hidden; }
.gateway-method-card:has(input[value="rocket"]) .gateway-method-logo-rocket { width:205px !important; transform:translate(-5px,0); }
.gateway-selected-logo { overflow:hidden; }
.gateway-selected-logo-rocket { width:240px !important; transform:translate(-10px,0); }
.gateway-selected-logo-image { display:block; margin:auto; }
.gateway-selected-logo-bkash { max-width:150px !important; max-height:56px !important; }
.gateway-selected-logo-nagad { max-width:145px !important; max-height:56px !important; }
.gateway-selected-logo-upay { max-width:90px !important; max-height:64px !important; }


/* Phase 3.2 — custom payment-method logo uploader */
.logo-upload-field { gap:.55rem!important; }
.logo-upload-box {
  position:relative; display:flex; align-items:center; gap:.9rem; min-height:72px;
  border:1px dashed #cfd8d3; border-radius:14px; background:#fafcfb; padding:.9rem 1rem;
  transition:border-color .18s ease, background .18s ease, transform .18s ease;
}
.logo-upload-box:hover { border-color:#79c9a5; background:#f5fcf8; transform:translateY(-1px); }
.logo-upload-box input[type="file"] { position:absolute; inset:0; opacity:0; cursor:pointer; }
.logo-upload-box::before { content:"↑"; display:grid; width:38px; height:38px; place-items:center; flex:0 0 38px; border-radius:11px; background:#eefbf5; color:#087a4f; font-size:1.1rem; font-weight:800; }
.logo-upload-box > span { display:grid; gap:.15rem; }
.logo-upload-box strong { color:#111318; font-size:.84rem; font-weight:650; }
.logo-upload-box small { color:#7a8493; font-size:.72rem; font-weight:450; }
.logo-upload-box.has-file { border-color:#0f9f67; background:#f1fbf6; }
.logo-upload-box.has-file::before { content:"✓"; background:#0f9f67; color:#fff; animation:npPop .2s ease both; }
.remove-logo-option { display:flex!important; grid-template-columns:18px 1fr; align-items:center; gap:.55rem!important; color:#667085!important; font-size:.76rem!important; font-weight:500!important; }
.remove-logo-option input { width:16px; height:16px; accent-color:#0f9f67; }
.method-logo-card { overflow:hidden; }
.method-logo-image { max-width:72px; max-height:40px; }
@media (max-width:560px) {
  .logo-upload-box { min-height:66px; padding:.8rem; }
  .method-logo-image { max-width:58px; max-height:34px; }
}


/* Phase 4 — Brand Settings */
body { --brand-accent: #0f9f67; }
.eyebrow { color: var(--brand-accent); }
.nav-item.active { color: var(--brand-accent); box-shadow: inset 3px 0 0 var(--brand-accent); }
.secure-pill { color: var(--brand-accent); }
.gateway-amount, .gateway-section-title, .gateway-instructions strong, .gateway-footer strong { color: var(--brand-accent); }
.gateway-section-title { border-bottom-color: var(--brand-accent); }
.gateway-method-card:has(input:checked) { border-color: var(--brand-accent); }
.gateway-method-card:has(input:checked)::after { background: var(--brand-accent); }
.gateway-copy, .button.success { background: var(--brand-accent); }
.gateway-copy:hover { filter: brightness(.9); }

.brand-settings-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:1rem;
  align-items:start;
}
.brand-settings-form { gap:1.15rem; }
.brand-preview-shell {
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.15rem;
  border:1px solid #e5e7eb;
  border-radius:18px;
  background:
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--brand-preview-accent) 12%, transparent), transparent 35%),
    #fafbfc;
}
.brand-preview-icon {
  display:grid;
  width:64px;
  height:64px;
  flex:0 0 64px;
  place-items:center;
  overflow:hidden;
  border-radius:18px;
  background:#fff;
  box-shadow:0 10px 28px rgba(16,24,40,.08);
}
.brand-preview-icon img { width:100%; height:100%; object-fit:contain; }
.brand-preview-copy { min-width:0; display:grid; gap:.45rem; }
.brand-preview-logo { display:block; max-width:250px; max-height:48px; width:auto; height:auto; }
.brand-preview-copy small { color:#667085; }

.brand-color-row {
  display:grid;
  grid-template-columns:64px 1fr;
  gap:.75rem;
  align-items:center;
}
.brand-color-picker {
  width:64px;
  height:48px;
  padding:4px;
  cursor:pointer;
}
.brand-color-text { font-family:"SFMono-Regular",Consolas,monospace; color:#475467; }

.brand-upload-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.8rem;
}
.upload-card {
  align-content:start;
  min-width:0;
  padding:1rem;
  border:1px solid #e4e7eb;
  border-radius:16px;
  background:#fbfcfd;
}
.upload-card > img {
  display:block;
  width:100%;
  height:90px;
  object-fit:contain;
  margin:.3rem 0 .5rem;
  padding:.65rem;
  border:1px solid #eef0f2;
  border-radius:12px;
  background:#fff;
}
.upload-card input[type="file"] {
  padding:.55rem;
  font-size:.76rem;
}
.upload-card small { color:#667085; line-height:1.5; }
.upload-remove {
  display:flex!important;
  grid-template-columns:auto 1fr!important;
  align-items:center;
  gap:.5rem!important;
  margin-top:.15rem;
  color:#667085!important;
  font-size:.75rem!important;
  font-weight:500!important;
}
.upload-remove input { width:auto; margin:0; }
.brand-help { position:sticky; top:84px; }
.brand-help h2 { margin-bottom:1rem; }
.brand-size-list { display:grid; gap:.1rem; margin-bottom:1rem; }
.brand-size-list div {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.75rem 0;
  border-bottom:1px solid #edf0f2;
  font-size:.83rem;
}
.brand-size-list span { color:#667085; }

@media (max-width:1020px) {
  .brand-settings-grid { grid-template-columns:1fr; }
  .brand-help { position:static; }
}
@media (max-width:700px) {
  .brand-upload-grid { grid-template-columns:1fr; }
  .brand-preview-logo { max-width:190px; max-height:42px; }
}


/* v1.4.1 — Professional icon + brand-name lockup */
.brand-lockup-admin,
.brand-lockup-public {
  display:flex;
  align-items:center;
  gap:.72rem;
  min-width:0;
}
.brand-lockup-icon {
  display:grid;
  width:36px;
  height:36px;
  flex:0 0 36px;
  place-items:center;
  overflow:hidden;
  border-radius:11px;
  background:#fff;
  box-shadow:0 6px 18px rgba(16,24,40,.06);
}
.brand-lockup-icon img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.brand-lockup-name {
  min-width:0;
  overflow:hidden;
  color:#111318;
  font-size:1rem;
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.1;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sidebar > .brand-lockup-admin {
  padding:.15rem .55rem 1.75rem;
}
.auth-card > .brand-lockup-public {
  margin-bottom:2.4rem;
}
.gateway-brand-lockup {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
}
.gateway-brand-icon {
  display:grid;
  width:28px;
  height:28px;
  flex:0 0 28px;
  place-items:center;
  overflow:hidden;
  border-radius:8px;
}
.gateway-brand-icon img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.gateway-brand-lockup strong {
  color:#111318;
  font-size:.9rem;
  font-weight:800;
  letter-spacing:-.02em;
}

@media (max-width:780px) {
  .brand-lockup-name { font-size:.95rem; }
  .brand-lockup-icon { width:34px; height:34px; flex-basis:34px; }
}


/* v1.5 — Admin Business Suite */
.nav-icon svg { width:16px; height:16px; display:block; }
.nav-item > span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.invoice-open-button { min-height:36px; padding:.5rem .75rem; font-size:.78rem; white-space:nowrap; }

.invoice-toolbar {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  width:min(100%, 1040px);
  margin:0 auto 1rem;
}
.invoice-sheet {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:min(100%, 1040px);
  min-height:820px;
  margin:0 auto 2rem;
  padding:3rem;
  border:1px solid #e4e7eb;
  border-radius:20px;
  background:#fff;
  box-shadow:0 20px 65px rgba(16,24,40,.08);
  color:#111318;
}
.invoice-sheet > *:not(.invoice-watermark) { position:relative; z-index:2; }
.invoice-watermark {
  position:absolute;
  inset:0;
  z-index:1;
  display:grid;
  place-content:center;
  place-items:center;
  gap:1rem;
  pointer-events:none;
  opacity:.035;
  transform:rotate(-18deg) scale(1.3);
}
.invoice-watermark img { width:210px; height:210px; object-fit:contain; }
.invoice-watermark span { font-size:4rem; font-weight:800; letter-spacing:-.06em; color:#0f9f67; }

.invoice-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:2rem;
  padding-bottom:2rem;
  border-bottom:2px solid #111318;
}
.invoice-brand { display:flex; align-items:center; gap:.9rem; }
.invoice-brand-icon {
  display:grid;
  width:52px; height:52px;
  overflow:hidden; place-items:center;
  border-radius:14px;
  background:#fff;
}
.invoice-brand-icon img { width:100%; height:100%; object-fit:contain; }
.invoice-brand div { display:grid; gap:.18rem; }
.invoice-brand strong { font-size:1.15rem; font-weight:800; }
.invoice-brand small { color:#667085; }
.invoice-title-block { text-align:right; }
.invoice-title-block h1 { margin:0 0 .3rem; font-size:2.2rem; letter-spacing:.06em; }
.invoice-number { color:#667085; font-size:.88rem; }

.invoice-meta-grid {
  display:grid;
  grid-template-columns:1fr 360px;
  gap:2rem;
  padding:2rem 0;
}
.invoice-bill-to { display:grid; align-content:start; gap:.3rem; }
.invoice-label { margin-bottom:.4rem; color:#667085; font-size:.7rem; font-weight:800; letter-spacing:.12em; }
.invoice-bill-to strong { font-size:1.05rem; }
.invoice-bill-to span:not(.invoice-label) { color:#667085; font-size:.86rem; }

.invoice-dates { display:grid; gap:.7rem; margin:0; }
.invoice-dates div, .invoice-payment-info dl div {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.invoice-dates dt, .invoice-payment-info dt { color:#667085; }
.invoice-dates dd, .invoice-payment-info dd { margin:0; text-align:right; font-weight:650; }

.invoice-items { min-width:0; margin:0 0 2rem; border:1px solid #e4e7eb; border-radius:12px; overflow:hidden; border-collapse:separate; border-spacing:0; }
.invoice-items th { background:#f7f8fa; color:#475467; }
.invoice-items td { border-top:1px solid #e4e7eb; }
.invoice-items td small { display:block; margin-top:.25rem; color:#98a2b3; }
.invoice-right { text-align:right!important; }

.invoice-lower-grid { display:grid; grid-template-columns:1fr 330px; gap:2rem; align-items:start; }
.invoice-payment-info { padding:1rem 0; }
.invoice-payment-info dl { display:grid; gap:.75rem; margin:0; }
.invoice-total-box { border:1px solid #e4e7eb; border-radius:14px; overflow:hidden; background:#fafbfc; }
.invoice-total-box > div { display:flex; justify-content:space-between; gap:1rem; padding:1rem 1.1rem; }
.invoice-grand-total { background:#111318; color:#fff; font-size:1.1rem; }
.invoice-grand-total strong { color:#fff; }

.invoice-footer {
  display:flex; align-items:flex-end; justify-content:space-between; gap:2rem;
  margin-top:4rem; padding-top:1.5rem; border-top:1px solid #e4e7eb;
}
.invoice-footer > div:first-child { display:grid; gap:.25rem; }
.invoice-footer span, .invoice-security-note { color:#667085; font-size:.76rem; }
.invoice-security-note { text-align:right; }

@media (max-width:780px) {
  .invoice-sheet { padding:1.4rem; border-radius:0; }
  .invoice-header, .invoice-footer { align-items:flex-start; flex-direction:column; }
  .invoice-title-block { text-align:left; }
  .invoice-meta-grid, .invoice-lower-grid { grid-template-columns:1fr; }
  .invoice-security-note { text-align:left; }
  .invoice-toolbar { padding:0 1rem; }
}

@media print {
  body { background:#fff!important; }
  .sidebar, .topbar, .no-print, .public-flash { display:none!important; }
  .admin-shell { padding-left:0!important; }
  .page-content { width:100%!important; padding:0!important; margin:0!important; }
  .invoice-sheet {
    width:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:18mm!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  .invoice-watermark { opacity:.045; }
  @page { size:A4; margin:0; }
}


/* v1.6 — Dynamic QR Checkout */
.gateway-qr-admin-block {
  display:grid;
  grid-template-columns:minmax(0,1fr) 190px;
  gap:1rem;
  padding:1rem;
  border:1px solid #e4e7eb;
  border-radius:16px;
  background:#fafbfc;
}
.gateway-qr-admin-copy { display:grid; gap:.8rem; }
.gateway-qr-admin-preview {
  display:grid;
  place-items:center;
  align-content:center;
  gap:.5rem;
  min-height:190px;
  padding:.75rem;
  border:1px solid #e8ebef;
  border-radius:14px;
  background:#fff;
}
.gateway-qr-admin-preview img,
.gateway-qr-frame > img { display:block; width:100%; max-width:190px; aspect-ratio:1; object-fit:contain; }
.gateway-qr-admin-preview small { color:#667085; }
.auto-qr-canvas { display:grid; place-items:center; line-height:0; }
.auto-qr-canvas svg { display:block; width:100%; max-width:190px; height:auto; border-radius:8px; }
.field-help { margin:0; color:#667085; font-size:.76rem; line-height:1.55; }
.qr-error { color:#b42318; font-size:.8rem; line-height:1.4; }

.gateway-pay-options {
  display:grid;
  grid-template-columns:minmax(0,1fr) 42px 230px;
  gap:1rem;
  align-items:stretch;
  margin-top:1rem;
  padding:1rem;
  border:1px solid #e4e7eb;
  border-radius:16px;
  background:#fafbfc;
  animation:npFadeUp .38s ease both;
}
.gateway-number-panel,
.gateway-qr-panel { min-width:0; }
.gateway-number-panel { display:grid; align-content:start; gap:.75rem; }
.gateway-number-panel h2 { margin:0; font-size:1.05rem; }
.gateway-number-panel p { margin:0; color:#667085; font-size:.8rem; line-height:1.55; }
.gateway-option-label { color:#667085; font-size:.66rem; font-weight:800; letter-spacing:.12em; }
.gateway-number-copy-row {
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.75rem .85rem; border:1px solid #e0e5e2; border-radius:12px; background:#fff;
}
.gateway-number-copy-row > strong { font-size:1.12rem; letter-spacing:.02em; }
.gateway-amount-copy-row {
  display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:.65rem;
  padding:.65rem .8rem; border-radius:10px; background:#eefbf5;
}
.gateway-amount-copy-row > span { color:#667085; font-size:.76rem; }
.gateway-amount-copy-row > strong { color:#087a4f; }
.gateway-copy-small { padding:.35rem .55rem; font-size:.7rem; }
.gateway-option-divider { display:grid; place-items:center; position:relative; }
.gateway-option-divider::before { content:""; position:absolute; top:0; bottom:0; width:1px; background:#e1e5e9; }
.gateway-option-divider span { position:relative; z-index:1; display:grid; width:30px; height:30px; place-items:center; border:1px solid #dfe3e8; border-radius:50%; background:#fff; color:#98a2b3; font-size:.65rem; font-weight:800; }
.gateway-qr-panel { display:grid; place-items:center; align-content:start; gap:.55rem; text-align:center; }
.gateway-qr-frame { display:grid; place-items:center; width:100%; max-width:206px; aspect-ratio:1; padding:.5rem; border:1px solid #e1e5e9; border-radius:14px; background:#fff; box-shadow:0 8px 22px rgba(16,24,40,.05); }
.gateway-qr-panel > strong { font-size:.86rem; }
.gateway-qr-panel > small { color:#667085; font-size:.7rem; line-height:1.45; }
.gateway-safety-note { margin-top:.85rem; padding:.75rem .9rem; border:1px solid #bfead8; border-radius:11px; background:#eefbf5; color:#27634c; font-size:.76rem; line-height:1.5; }

@media (max-width:700px) {
  .gateway-qr-admin-block { grid-template-columns:1fr; }
  .gateway-qr-admin-preview { min-height:0; }
  .gateway-pay-options { grid-template-columns:1fr; }
  .gateway-option-divider { height:34px; }
  .gateway-option-divider::before { top:50%; right:0; bottom:auto; left:0; width:auto; height:1px; }
  .gateway-qr-panel { padding-top:.15rem; }
}


/* v1.6.1 — Refined Gateway Admin */
.gateway-page-heading { margin-bottom:1.15rem; }
.gateway-admin-list {
  display:grid;
  gap:1rem;
  width:min(100%, 1220px);
}
.gateway-admin-card {
  padding:0!important;
  overflow:hidden;
  border-radius:18px;
  transition:box-shadow .2s ease,border-color .2s ease,transform .2s ease;
}
.gateway-admin-card:hover {
  transform:translateY(-1px);
  border-color:#d9e6df;
  box-shadow:0 18px 44px rgba(16,24,40,.07);
}
.gateway-admin-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.1rem;
  border-bottom:1px solid #edf0f2;
  background:linear-gradient(180deg,#fff,#fcfdfd);
}
.gateway-admin-identity { display:flex; align-items:center; gap:.8rem; min-width:0; }
.gateway-admin-logo {
  display:grid;
  width:58px; height:44px;
  flex:0 0 58px;
  place-items:center;
  overflow:hidden;
  padding:.35rem;
  border:1px solid #e6e9ed;
  border-radius:12px;
  background:#fff;
}
.gateway-admin-logo img { display:block; width:100%; height:100%; object-fit:contain; }
.gateway-admin-logo span { font-weight:800; color:#087a4f; }
.gateway-admin-identity h2 { margin:0; font-size:1rem; letter-spacing:-.02em; }
.gateway-admin-identity > div:last-child { display:grid; gap:.18rem; }
.gateway-admin-identity > div:last-child > span { color:#7a8493; font-size:.72rem; }

.gateway-admin-header-actions { display:flex; align-items:center; gap:.65rem; }
.gateway-status-dot {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.38rem .62rem;
  border:1px solid #e1e5e9;
  border-radius:999px;
  background:#f8f9fa;
  color:#667085;
  font-size:.7rem;
  font-weight:700;
}
.gateway-status-dot::before { content:""; width:7px; height:7px; border-radius:50%; background:#98a2b3; }
.gateway-status-dot.active { color:#087a4f; border-color:#c7eadb; background:#f1fbf6; }
.gateway-status-dot.active::before { background:#0f9f67; box-shadow:0 0 0 4px rgba(15,159,103,.08); }
.gateway-status-dot.inactive { color:#b42318; border-color:#f0d0cc; background:#fff5f4; }
.gateway-status-dot.inactive::before { background:#d92d20; }
.gateway-status-dot.coming_soon { color:#9a650f; border-color:#f0dfbd; background:#fff9ed; }
.gateway-status-dot.coming_soon::before { background:#d89a2b; }

.gateway-save-button {
  min-height:38px!important;
  padding:.58rem .85rem!important;
  border-radius:10px!important;
  font-size:.76rem!important;
  box-shadow:none!important;
}

.gateway-admin-content {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(360px,.9fr);
  grid-template-areas:
    "account qr"
    "account branding";
  gap:0;
}
.gateway-config-section {
  min-width:0;
  padding:1.15rem;
}
.gateway-config-account { grid-area:account; border-right:1px solid #edf0f2; }
.gateway-config-qr { grid-area:qr; border-bottom:1px solid #edf0f2; }
.gateway-config-branding { grid-area:branding; }

.gateway-section-heading {
  display:flex; align-items:flex-start; gap:.7rem;
  margin-bottom:1rem;
}
.gateway-section-number {
  display:grid;
  width:30px; height:30px;
  flex:0 0 30px;
  place-items:center;
  border-radius:9px;
  background:#eefbf5;
  color:#087a4f;
  font-size:.68rem;
  font-weight:800;
}
.gateway-section-heading h3 { margin:0 0 .18rem; font-size:.88rem; letter-spacing:-.015em; }
.gateway-section-heading p { margin:0; color:#7a8493; font-size:.72rem; line-height:1.45; }

.gateway-field-grid {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:.75rem;
}
.gateway-instruction-textarea { min-height:105px; }
.gateway-status-select { max-width:260px; }

.gateway-qr-composer {
  display:grid;
  grid-template-columns:minmax(0,1fr) 185px;
  gap:.9rem;
  align-items:start;
}
.gateway-qr-controls { display:grid; gap:.75rem; min-width:0; }
.gateway-qr-admin-preview-refined {
  min-height:218px;
  padding:.7rem;
  border:1px solid #e4e7eb;
  border-radius:14px;
  background:#fafbfc;
}
.gateway-qr-admin-preview-refined .auto-qr-canvas,
.gateway-qr-admin-preview-refined img { max-width:168px!important; }
.gateway-qr-admin-preview-refined strong { font-size:.76rem; }
.gateway-qr-admin-preview-refined small { font-size:.68rem; }

.gateway-advanced-details {
  overflow:hidden;
  border:1px solid #e4e7eb;
  border-radius:12px;
  background:#fff;
}
.gateway-advanced-details summary {
  position:relative;
  padding:.72rem .8rem;
  cursor:pointer;
  list-style:none;
  color:#344054;
  font-size:.76rem;
  font-weight:700;
}
.gateway-advanced-details summary::-webkit-details-marker { display:none; }
.gateway-advanced-details summary::after {
  content:"+";
  position:absolute;
  right:.8rem;
  top:50%;
  transform:translateY(-50%);
  color:#667085;
  font-size:1rem;
}
.gateway-advanced-details[open] summary::after { content:"−"; }
.gateway-advanced-details[open] summary { border-bottom:1px solid #edf0f2; background:#fafbfc; }
.gateway-details-content { display:grid; gap:.65rem; padding:.75rem; }
.logo-upload-box.compact { min-height:56px; padding:.65rem!important; }
.logo-upload-box.compact::before { width:32px; height:32px; flex-basis:32px; }
.logo-upload-box.compact strong { font-size:.78rem; }
.logo-upload-box.compact small { font-size:.67rem; }

.gateway-branding-current {
  display:flex;
  align-items:center;
  gap:.7rem;
  margin-bottom:.75rem;
  padding:.65rem;
  border:1px solid #e8ebee;
  border-radius:12px;
  background:#fafbfc;
}
.gateway-branding-logo-preview {
  display:grid;
  width:70px; height:46px;
  flex:0 0 70px;
  place-items:center;
  overflow:hidden;
  padding:.35rem;
  border-radius:10px;
  background:#fff;
}
.gateway-branding-logo-preview img { width:100%; height:100%; object-fit:contain; }
.gateway-branding-current > div:last-child { display:grid; gap:.15rem; }
.gateway-branding-current strong { font-size:.78rem; }
.gateway-branding-current small { color:#7a8493; font-size:.68rem; line-height:1.4; }

.gateway-admin-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.8rem 1.1rem;
  border-top:1px solid #edf0f2;
  background:#fafbfc;
}
.gateway-admin-footer > span { color:#7a8493; font-size:.69rem; }
.gateway-save-button-bottom { display:none!important; }

@media (max-width:1050px) {
  .gateway-admin-content {
    grid-template-columns:1fr;
    grid-template-areas:"account" "qr" "branding";
  }
  .gateway-config-account { border-right:0; border-bottom:1px solid #edf0f2; }
}
@media (max-width:700px) {
  .gateway-admin-header { align-items:flex-start; }
  .gateway-admin-header-actions { flex-direction:column; align-items:flex-end; }
  .gateway-admin-header-actions .gateway-save-button { display:none; }
  .gateway-field-grid, .gateway-qr-composer { grid-template-columns:1fr; }
  .gateway-status-select { max-width:none; }
  .gateway-qr-admin-preview-refined { min-height:0; }
  .gateway-admin-footer { align-items:stretch; flex-direction:column; }
  .gateway-save-button-bottom { display:block!important; width:100%; }
}


/* =========================================================
   v1.7 — NirapodPay Premium Motion UI
   White fintech surface, Plus Jakarta Sans, subtle motion.
   ========================================================= */

:root {
  --np-pointer-x: 50%;
  --np-pointer-y: 18%;
  --np-page: #f7f9f8;
  --np-surface: rgba(255,255,255,.92);
  --np-surface-solid: #ffffff;
  --np-ink: #101316;
  --np-muted: #6d7785;
  --np-border: #e4e9e6;
  --np-border-strong: #d7dfda;
  --np-green: var(--brand-accent, #0f9f67);
  --np-green-deep: #08764e;
  --np-green-soft: #edf9f3;
  --np-green-glow: rgba(15,159,103,.16);
  --np-shadow-sm: 0 6px 20px rgba(17,24,39,.045);
  --np-shadow-md: 0 18px 50px rgba(17,24,39,.075);
  --np-shadow-lg: 0 30px 90px rgba(17,24,39,.11);
  --np-radius-sm: 12px;
  --np-radius-md: 18px;
  --np-radius-lg: 24px;
  font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html {
  scroll-behavior: smooth;
  background: var(--np-page) !important;
}
body,
button,
input,
select,
textarea {
  font-family: "Plus Jakarta Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
body {
  color: var(--np-ink) !important;
  background:
    radial-gradient(600px circle at var(--np-pointer-x) var(--np-pointer-y), rgba(15,159,103,.045), transparent 58%),
    linear-gradient(180deg,#fbfcfb 0%,#f5f8f6 100%) !important;
  background-attachment: fixed !important;
}
body::before,
body::after {
  content:"";
  position:fixed;
  z-index:-1;
  width:360px;
  height:360px;
  border-radius:50%;
  pointer-events:none;
  filter:blur(3px);
  opacity:.42;
  animation:npFloatOrb 14s ease-in-out infinite alternate;
}
body::before {
  top:-180px;
  right:-120px;
  background:radial-gradient(circle,rgba(22,192,128,.12),rgba(22,192,128,0) 70%);
}
body::after {
  bottom:-220px;
  left:-130px;
  background:radial-gradient(circle,rgba(15,159,103,.10),rgba(15,159,103,0) 70%);
  animation-duration:18s;
  animation-direction:alternate-reverse;
}
@keyframes npFloatOrb {
  from { transform:translate3d(-14px,-8px,0) scale(.94); }
  to { transform:translate3d(24px,22px,0) scale(1.08); }
}

/* Typography */
h1,h2,h3,h4 {
  color:var(--np-ink) !important;
  letter-spacing:-.04em !important;
  text-wrap:balance;
}
h1 { font-weight:800 !important; }
h2,h3 { font-weight:750 !important; }
p,.muted,small { color:var(--np-muted); }
.eyebrow {
  color:var(--np-green) !important;
  font-weight:800 !important;
  letter-spacing:.145em !important;
}
.page-heading h1 { font-size:clamp(1.9rem,3.3vw,2.7rem) !important; }
.page-heading p { max-width:650px; font-size:.9rem; }

/* Admin frame */
.sidebar {
  background:rgba(255,255,255,.91) !important;
  border-right:1px solid rgba(219,227,222,.9) !important;
  box-shadow:10px 0 40px rgba(16,24,40,.025);
  backdrop-filter:blur(20px) saturate(135%) !important;
}
.admin-shell {
  background:transparent !important;
}
.topbar {
  position:sticky;
  top:0;
  z-index:14;
  background:rgba(250,252,251,.73) !important;
  border-bottom:1px solid rgba(224,230,226,.78) !important;
  backdrop-filter:blur(18px) saturate(145%);
}
.page-content {
  position:relative;
  padding-top:clamp(1.5rem,4vw,2.7rem) !important;
}
.brand-lockup-name {
  font-size:.98rem !important;
  font-weight:800 !important;
}
.brand-lockup-icon {
  box-shadow:0 7px 22px rgba(15,159,103,.11) !important;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease;
}
.brand-lockup:hover .brand-lockup-icon {
  transform:translateY(-2px) rotate(-3deg) scale(1.045);
  box-shadow:0 12px 30px rgba(15,159,103,.17) !important;
}
.nav-list { gap:.25rem !important; }
.nav-item {
  position:relative;
  overflow:hidden;
  color:#637080 !important;
  border:1px solid transparent;
  border-radius:12px !important;
  transition:color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease !important;
}
.nav-item::before {
  content:"";
  position:absolute;
  inset:auto auto 50% 0;
  width:3px;
  height:0;
  border-radius:0 4px 4px 0;
  background:var(--np-green);
  transform:translateY(50%);
  transition:height .22s ease;
}
.nav-item:hover {
  color:#26322c !important;
  background:#f4f8f6 !important;
  transform:translateX(2px);
}
.nav-item.active {
  color:var(--np-green-deep) !important;
  border-color:#d9eee4 !important;
  background:linear-gradient(110deg,#ecfaf3,#f6fcf9) !important;
  box-shadow:0 7px 22px rgba(15,159,103,.06), inset 0 1px 0 rgba(255,255,255,.8) !important;
}
.nav-item.active::before { height:58%; }
.nav-icon {
  border-color:#dce4df !important;
  background:rgba(255,255,255,.76);
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.nav-item:hover .nav-icon,
.nav-item.active .nav-icon {
  border-color:#c7e7d7 !important;
  background:#fff;
  transform:scale(1.035);
}
.sidebar-footer { border-top-color:#e7ece9 !important; }
.admin-chip > span {
  color:var(--np-green-deep) !important;
  background:var(--np-green-soft) !important;
}
.secure-pill {
  color:#08764e !important;
  border-color:#bee9d5 !important;
  background:rgba(238,251,245,.9) !important;
  box-shadow:0 5px 18px rgba(15,159,103,.055);
}

/* Surfaces */
.panel,
.metric-card,
.gateway-admin-card,
.invoice-sheet,
.auth-card {
  border-color:rgba(219,226,222,.94) !important;
  background:var(--np-surface) !important;
  box-shadow:var(--np-shadow-sm) !important;
  backdrop-filter:blur(14px) saturate(125%);
}
.panel,
.metric-card {
  transition:transform .26s cubic-bezier(.2,.8,.2,1),box-shadow .26s ease,border-color .26s ease;
}
.panel:hover,
.metric-card:hover {
  border-color:#d2ddd6 !important;
  box-shadow:var(--np-shadow-md) !important;
  transform:translateY(-2px);
}
.metric-card {
  position:relative;
  overflow:hidden;
  min-height:126px;
  border-radius:20px !important;
}
.metric-card::after {
  content:"";
  position:absolute;
  width:100px;
  height:100px;
  right:-48px;
  top:-48px;
  border-radius:50%;
  background:radial-gradient(circle,var(--np-green-glow),transparent 72%);
  opacity:.55;
  transition:transform .3s ease,opacity .3s ease;
}
.metric-card:hover::after { transform:scale(1.35); opacity:.82; }
.metric-card strong {
  color:#101316 !important;
  font-weight:800 !important;
}
.metric-card span,.metric-card small { color:#7a8591 !important; }

/* Buttons and fields */
.button,
.gateway-pay-button {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border-radius:12px !important;
  font-weight:750 !important;
  letter-spacing:-.01em;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,filter .2s ease !important;
}
.button::before,
.gateway-pay-button::before {
  content:"";
  position:absolute;
  z-index:-1;
  top:-120%;
  left:-45%;
  width:42%;
  height:340%;
  transform:rotate(24deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);
  transition:left .55s cubic-bezier(.2,.7,.2,1);
}
.button:hover::before,
.gateway-pay-button:hover::before { left:112%; }
.button:hover,
.gateway-pay-button:hover {
  transform:translateY(-2px) !important;
}
.button:active,
.gateway-pay-button:active { transform:translateY(0) scale(.985) !important; }
input,select,textarea {
  border-color:#dfe5e1 !important;
  background:rgba(255,255,255,.9) !important;
  color:#151a17 !important;
  box-shadow:inset 0 1px 1px rgba(16,24,40,.015);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease,transform .18s ease !important;
}
input:hover,select:hover,textarea:hover { border-color:#cfd9d3 !important; }
input:focus,select:focus,textarea:focus {
  border-color:rgba(15,159,103,.62) !important;
  background:#fff !important;
  box-shadow:0 0 0 4px rgba(15,159,103,.085), 0 8px 24px rgba(15,159,103,.04) !important;
}

/* Motion reveal */
.np-motion-ready {
  opacity:0;
  transform:translate3d(0,14px,0) scale(.992);
  transition:
    opacity .52s cubic-bezier(.2,.8,.2,1) var(--np-reveal-delay,0ms),
    transform .52s cubic-bezier(.2,.8,.2,1) var(--np-reveal-delay,0ms);
}
.np-motion-ready.np-motion-visible {
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}
.np-stagger-group > * {
  animation:npStaggerIn .5s cubic-bezier(.2,.8,.2,1) both;
  animation-delay:var(--np-stagger-delay,0ms);
}
@keyframes npStaggerIn {
  from { opacity:0; transform:translateY(10px); }
  to { opacity:1; transform:translateY(0); }
}

/* Premium checkout */
.gateway-page.premium-checkout {
  position:relative;
  overflow:hidden;
  padding:clamp(1.2rem,3vw,2.6rem) 1rem !important;
  background:
    radial-gradient(circle at 0 15%,rgba(15,159,103,.065),transparent 26%),
    radial-gradient(circle at 100% 85%,rgba(15,159,103,.055),transparent 26%),
    linear-gradient(160deg,#fbfdfc,#f6f9f7) !important;
}
.gateway-page.premium-checkout::before,
.gateway-page.premium-checkout::after {
  content:"";
  position:absolute;
  width:280px;
  height:280px;
  border-radius:50%;
  border:1px solid rgba(15,159,103,.06);
  background:rgba(15,159,103,.025);
  pointer-events:none;
  animation:npCheckoutFloat 10s ease-in-out infinite alternate;
}
.gateway-page.premium-checkout::before { left:-190px; top:18%; }
.gateway-page.premium-checkout::after { right:-195px; bottom:7%; animation-delay:-4s; }
@keyframes npCheckoutFloat {
  from { transform:translateY(-8px) scale(.96); }
  to { transform:translateY(16px) scale(1.06); }
}
.gateway-card.np-motion-surface {
  border-color:#dde6e1 !important;
  border-radius:22px !important;
  background:rgba(255,255,255,.94) !important;
  box-shadow:0 28px 85px rgba(17,24,39,.11) !important;
  backdrop-filter:blur(22px) saturate(135%);
  animation:npCheckoutEnter .55s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes npCheckoutEnter {
  from { opacity:0; transform:translateY(18px) scale(.985); filter:blur(2px); }
  to { opacity:1; transform:none; filter:blur(0); }
}
.gateway-topbar {
  background:rgba(255,255,255,.78) !important;
  backdrop-filter:blur(12px);
}
.gateway-brand-icon {
  box-shadow:0 5px 16px rgba(15,159,103,.12);
}
.gateway-summary {
  border-color:#e2e9e5 !important;
  background:
    radial-gradient(circle at 92% 0,rgba(15,159,103,.085),transparent 34%),
    linear-gradient(135deg,#fbfdfc,#f2f8f5) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
.gateway-summary-copy strong { font-weight:800 !important; }
.gateway-amount {
  color:var(--np-green) !important;
  font-weight:800 !important;
}
.gateway-section-title {
  color:var(--np-green) !important;
  border-bottom-color:var(--np-green) !important;
}
.gateway-method-card {
  --card-x:50%;
  --card-y:50%;
  position:relative;
  overflow:hidden;
  border-color:#dde5e0 !important;
  background:#fff !important;
  box-shadow:0 5px 16px rgba(17,24,39,.025);
  transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,border-color .22s ease !important;
}
.gateway-method-card::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(170px circle at var(--card-x) var(--card-y),rgba(15,159,103,.095),transparent 62%);
  opacity:0;
  transition:opacity .2s ease;
}
.gateway-method-card:hover::before { opacity:1; }
.gateway-method-card:hover {
  transform:translateY(-3px) !important;
  border-color:#cce6d9 !important;
  box-shadow:0 14px 35px rgba(15,159,103,.08) !important;
}
.gateway-method-card:has(input:checked) {
  border-color:var(--np-green) !important;
  background:linear-gradient(145deg,#f5fdf9,#edf9f3) !important;
  box-shadow:0 12px 30px rgba(15,159,103,.10), inset 0 0 0 1px rgba(15,159,103,.05) !important;
}
.gateway-method-card:has(input:checked)::after {
  box-shadow:0 0 0 5px rgba(15,159,103,.09);
  animation:npSelectedPulse 2.2s ease-in-out infinite;
}
@keyframes npSelectedPulse {
  0%,100% { box-shadow:0 0 0 4px rgba(15,159,103,.08); }
  50% { box-shadow:0 0 0 8px rgba(15,159,103,0); }
}
.gateway-selected-logo {
  animation:npLogoDrop .45s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes npLogoDrop {
  from { opacity:0; transform:translateY(-7px) scale(.94); }
  to { opacity:1; transform:none; }
}
.gateway-pay-options {
  overflow:hidden;
  border-color:#dde6e1 !important;
  border-radius:18px !important;
  background:linear-gradient(145deg,#fbfcfb,#f7faf8) !important;
  box-shadow:inset 0 1px 0 #fff, 0 10px 30px rgba(17,24,39,.035);
}
.gateway-number-copy-row,
.gateway-qr-frame {
  border-color:#dce6e0 !important;
  box-shadow:0 7px 24px rgba(17,24,39,.04) !important;
}
.gateway-number-copy-row {
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.gateway-number-copy-row:hover {
  transform:translateY(-1px);
  border-color:#c8e4d6 !important;
  box-shadow:0 10px 28px rgba(15,159,103,.07) !important;
}
.gateway-amount-copy-row {
  background:linear-gradient(120deg,#eefaf4,#e7f8f0) !important;
}
.gateway-copy {
  background:var(--np-green) !important;
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease !important;
}
.gateway-copy:hover {
  transform:translateY(-1px);
  filter:brightness(.96);
  box-shadow:0 6px 18px rgba(15,159,103,.18);
}
.gateway-qr-frame {
  position:relative;
  overflow:hidden;
  background:#fff !important;
}
.gateway-qr-frame[data-motion-qr="true"]::after {
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  top:12%;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,rgba(15,159,103,.62),transparent);
  box-shadow:0 0 14px rgba(15,159,103,.34);
  animation:npQrScan 3.2s ease-in-out infinite;
  pointer-events:none;
}
@keyframes npQrScan {
  0%,100% { transform:translateY(0); opacity:0; }
  12% { opacity:.85; }
  50% { transform:translateY(142px); opacity:.85; }
  88% { opacity:.1; }
}
.gateway-safety-note {
  border-color:#c4e8d7 !important;
  background:linear-gradient(120deg,#eefaf4,#f4fbf7) !important;
  box-shadow:0 5px 16px rgba(15,159,103,.035);
}
.gateway-verify-form {
  position:relative;
}
.gateway-verify-form label span {
  color:#344039 !important;
  font-weight:700 !important;
}
.gateway-pay-button {
  background:linear-gradient(135deg,#101316,#1c2220) !important;
  box-shadow:0 12px 30px rgba(16,19,22,.15) !important;
}
.gateway-pay-button:hover {
  box-shadow:0 17px 38px rgba(16,19,22,.2) !important;
}
.gateway-footer {
  color:#77828e !important;
}
.gateway-footer strong { color:var(--np-green) !important; }

/* Result motion */
.gateway-result {
  animation:npResultEnter .52s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes npResultEnter {
  from { opacity:0; transform:translateY(12px); }
  to { opacity:1; transform:none; }
}
.gateway-result-icon {
  box-shadow:0 10px 30px rgba(15,159,103,.12);
}

/* Admin gateways — premium treatment */
.gateway-admin-list { max-width:1240px; }
.gateway-admin-card {
  border-color:#dce4df !important;
  box-shadow:0 10px 32px rgba(17,24,39,.045) !important;
}
.gateway-admin-card:hover {
  border-color:#cfe0d6 !important;
  box-shadow:0 22px 54px rgba(17,24,39,.085) !important;
  transform:translateY(-3px) !important;
}
.gateway-admin-header {
  background:
    radial-gradient(circle at 96% 0,rgba(15,159,103,.06),transparent 32%),
    linear-gradient(180deg,#fff,#fbfdfc) !important;
}
.gateway-admin-logo {
  box-shadow:0 6px 18px rgba(17,24,39,.045);
}
.gateway-section-number {
  background:linear-gradient(145deg,#eaf9f2,#f4fcf8) !important;
  box-shadow:inset 0 0 0 1px rgba(15,159,103,.06);
}
.gateway-advanced-details {
  transition:border-color .2s ease,box-shadow .2s ease;
}
.gateway-advanced-details:hover {
  border-color:#d2dfd8 !important;
  box-shadow:0 7px 22px rgba(17,24,39,.035);
}
.gateway-advanced-details summary {
  transition:background .18s ease,color .18s ease;
}
.gateway-admin-footer {
  background:linear-gradient(180deg,#fbfcfb,#f7faf8) !important;
}

/* Tables */
table { border-spacing:0; }
th { color:#7c8793 !important; }
td { border-top-color:#e7ece9 !important; }
tbody tr { transition:background .18s ease; }
tbody tr:hover { background:#f7faf8; }
td a { color:var(--np-green-deep) !important; }

/* Invoice */
.invoice-sheet {
  box-shadow:0 28px 85px rgba(17,24,39,.10) !important;
}
.invoice-watermark { animation:npWatermarkBreath 7s ease-in-out infinite alternate; }
@keyframes npWatermarkBreath {
  from { opacity:.028; transform:rotate(-18deg) scale(1.25); }
  to { opacity:.045; transform:rotate(-18deg) scale(1.32); }
}

/* Loading */
.is-loading {
  pointer-events:none !important;
  opacity:.86;
}
.np-spinner {
  width:16px;
  height:16px;
  flex:0 0 16px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;
  border-radius:50%;
  animation:npSpin .7s linear infinite;
}
.is-loading .np-spinner { margin-right:.5rem; }
@keyframes npSpin { to { transform:rotate(360deg); } }

/* Alerts */
.alert {
  border-color:#dfe6e2 !important;
  background:rgba(255,255,255,.88) !important;
  color:#3e4b44 !important;
  box-shadow:0 8px 24px rgba(17,24,39,.04);
}
.alert.success {
  color:#176443 !important;
  border-color:#c3e8d6 !important;
  background:#effaf4 !important;
}
.alert.error {
  color:#9c2e25 !important;
  border-color:#f0cbc7 !important;
  background:#fff5f4 !important;
}

/* Micro motion defaults */
.np-ripple { background:rgba(255,255,255,.28) !important; }
.is-copied { animation:npCopyPop .32s cubic-bezier(.2,.9,.2,1); }
@keyframes npCopyPop {
  50% { transform:scale(1.07); }
}

/* Responsive premium */
@media (max-width:900px) {
  body::before,body::after { width:260px; height:260px; }
  .topbar { height:60px; }
  .page-content { padding:1.2rem !important; }
}
@media (max-width:700px) {
  .gateway-card.np-motion-surface { border-radius:18px !important; }
  .gateway-page.premium-checkout { padding:.75rem .55rem 1.2rem !important; }
  .gateway-summary { border-radius:14px !important; }
  .gateway-pay-options { border-radius:16px !important; }
  .gateway-method-card:hover,
  .panel:hover,
  .metric-card:hover,
  .gateway-admin-card:hover { transform:none !important; }
}

/* Accessibility */
@media (prefers-reduced-motion:reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior:auto !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .np-motion-ready {
    opacity:1 !important;
    transform:none !important;
  }
}
.np-reduced-motion .np-motion-ready {
  opacity:1 !important;
  transform:none !important;
}


/* =========================================================
   v1.7.1 — Payment Status Sync + Payment Detail Readability
   ========================================================= */

/* Old dark detail styles are neutralized for the light premium UI. */
.detail-card {
  overflow:hidden;
}
.payment-detail-summary {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.75rem;
  margin-bottom:.85rem;
}
.payment-detail-primary {
  display:grid;
  gap:.3rem;
  padding:.9rem 1rem;
  border:1px solid #dce5df;
  border-radius:14px;
  background:linear-gradient(145deg,#f8fcfa,#f1f8f4);
}
.payment-detail-primary span {
  color:#7b8790;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.payment-detail-primary strong {
  color:#101613;
  font-size:1.08rem;
  font-weight:800;
}
.payment-detail-list > div,
.detail-list > div {
  border:1px solid #e1e7e3 !important;
  background:#ffffff !important;
  box-shadow:0 4px 16px rgba(17,24,39,.025);
}
.payment-detail-list > div:hover {
  border-color:#d1ddd6 !important;
  background:#fbfdfc !important;
}
.detail-list dt {
  color:#7b8790 !important;
  font-size:.67rem !important;
  font-weight:750;
  letter-spacing:.065em;
}
.detail-list dd {
  color:#18201c !important;
  font-weight:650;
}
.detail-list dd code {
  color:#08764e !important;
  background:#eef9f3;
  border:1px solid #d5eddf;
  border-radius:7px;
  padding:.2rem .4rem;
}
.detail-highlight {
  border-color:#cce7da !important;
  background:linear-gradient(145deg,#f6fcf9,#eef9f3) !important;
}
.selected-row {
  background:#f1faf5 !important;
  box-shadow:inset 3px 0 0 var(--np-green);
}
.filter-chip.active {
  color:#08764e !important;
  border-color:#bfe5d3 !important;
  background:#edf9f3 !important;
  box-shadow:0 4px 14px rgba(15,159,103,.06);
}
.status-pending_verification,
.status-awaiting_payment,
.status-pending,
.status-coming_soon {
  color:#9a650f !important;
  border-color:#eedba8 !important;
  background:#fff8e7 !important;
}
.status-paid,
.status-active,
.status-delivered {
  color:#08764e !important;
  border-color:#bfe5d3 !important;
  background:#eef9f3 !important;
}
.status-rejected,
.status-revoked,
.status-failed,
.status-inactive,
.status-expired {
  color:#b42318 !important;
  border-color:#efcbc6 !important;
  background:#fff4f2 !important;
}

/* Live pending indicator on customer checkout */
.gateway-result-pending {
  position:relative;
}
.gateway-pending-orbit {
  position:relative;
  display:grid !important;
  place-items:center;
  width:58px !important;
  height:58px !important;
  margin-inline:auto;
  border:1px solid #e8ddbf;
  background:#fffaf0 !important;
}
.gateway-pending-orbit::before {
  content:"";
  position:absolute;
  inset:7px;
  border:2px solid rgba(214,154,43,.18);
  border-top-color:#d69a2b;
  border-radius:50%;
  animation:npPendingSpin 1.5s linear infinite;
}
.gateway-pending-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#d69a2b;
  box-shadow:0 0 0 5px rgba(214,154,43,.10);
  animation:npPendingDot 1.35s ease-in-out infinite;
}
.gateway-live-status {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  margin-top:.9rem;
  padding:.42rem .65rem;
  border:1px solid #dfe8e3;
  border-radius:999px;
  background:#f8fbf9;
  color:#6d7a73;
  font-size:.68rem;
  font-weight:650;
}
.gateway-live-status > span {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#0f9f67;
  box-shadow:0 0 0 4px rgba(15,159,103,.08);
  animation:npLivePulse 1.8s ease-in-out infinite;
}
.gateway-result-pending.is-status-changing {
  animation:npStatusSuccessGlow .45s ease both;
}
@keyframes npPendingSpin { to { transform:rotate(360deg); } }
@keyframes npPendingDot {
  0%,100% { transform:scale(.8); opacity:.65; }
  50% { transform:scale(1.15); opacity:1; }
}
@keyframes npLivePulse {
  0%,100% { opacity:.55; transform:scale(.9); }
  50% { opacity:1; transform:scale(1.05); }
}
@keyframes npStatusSuccessGlow {
  from { filter:none; }
  to { filter:drop-shadow(0 0 18px rgba(15,159,103,.18)); }
}

@media (max-width:700px) {
  .payment-detail-summary { grid-template-columns:1fr; }
}


/* =========================================================
   v1.7.2 — Automatic Merchant Return
   ========================================================= */
.gateway-result-success[data-merchant-return] {
  padding-bottom:.4rem;
}
.gateway-return-status {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  margin-top:1rem;
  padding:.5rem .72rem;
  border:1px solid #cfe8dc;
  border-radius:999px;
  background:linear-gradient(145deg,#f3fbf7,#edf9f3);
  color:#557066;
  font-size:.7rem;
  font-weight:600;
}
.gateway-return-status strong {
  color:#08764e;
  font-weight:800;
}
.gateway-return-spinner {
  width:14px;
  height:14px;
  flex:0 0 14px;
  border:2px solid rgba(15,159,103,.18);
  border-top-color:#0f9f67;
  border-radius:50%;
  animation:npReturnSpin .8s linear infinite;
}
.gateway-return-button {
  margin-top:1rem;
  width:100%;
}
.gateway-result-success.is-returning {
  animation:npReturnFade .45s ease both;
}
@keyframes npReturnSpin {
  to { transform:rotate(360deg); }
}
@keyframes npReturnFade {
  to { opacity:.55; transform:scale(.985); }
}
@media (prefers-reduced-motion:reduce) {
  .gateway-return-spinner { animation:none!important; }
}


/* =========================================================
   v1.7.3 — Receipt, Working Cancel, Payment Link Manager
   ========================================================= */

/* Checkout top actions / cancel */
.gateway-topbar {
  position:relative;
}
.gateway-topbar-actions {
  display:flex;
  align-items:center;
  gap:.4rem;
}
.gateway-cancel-form { margin:0; }
.gateway-cancel-button {
  color:#b42318 !important;
  border-color:#f0d0cc !important;
  background:#fff7f6 !important;
}
.gateway-cancel-button:hover {
  background:#fff0ee !important;
  border-color:#e8b8b1 !important;
}
.gateway-confirmed-actions {
  display:flex;
  justify-content:center;
  margin-top:.9rem;
}
.gateway-receipt-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  min-height:40px;
  padding:.58rem .9rem;
  border:1px solid #cde7da;
  border-radius:11px;
  background:#f1faf5;
  color:#08764e !important;
  font-size:.76rem;
  font-weight:750;
  text-decoration:none;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.gateway-receipt-button:hover {
  transform:translateY(-2px);
  background:#e9f8f0;
  box-shadow:0 8px 22px rgba(15,159,103,.08);
}

/* Public receipt */
.receipt-page {
  min-height:100vh;
  padding:clamp(1rem,4vw,3rem);
  background:
    radial-gradient(circle at 0 20%,rgba(15,159,103,.055),transparent 28%),
    radial-gradient(circle at 100% 80%,rgba(15,159,103,.05),transparent 28%),
    #f7faf8;
}
.receipt-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  width:min(100%,760px);
  margin:0 auto 1rem;
}
.receipt-back {
  color:#57645e;
  font-size:.8rem;
  font-weight:700;
  text-decoration:none;
}
.receipt-sheet {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:min(100%,760px);
  margin:0 auto;
  padding:2.1rem;
  border:1px solid #dde6e1;
  border-radius:22px;
  background:#fff;
  box-shadow:0 25px 75px rgba(17,24,39,.10);
}
.receipt-sheet > *:not(.receipt-watermark) {
  position:relative;
  z-index:2;
}
.receipt-watermark {
  position:absolute;
  inset:0;
  z-index:1;
  display:grid;
  place-content:center;
  place-items:center;
  gap:.7rem;
  opacity:.025;
  pointer-events:none;
  transform:rotate(-17deg) scale(1.25);
}
.receipt-watermark img {
  width:190px;
  height:190px;
  object-fit:contain;
}
.receipt-watermark strong {
  color:#0f9f67;
  font-size:3.2rem;
  font-weight:800;
  letter-spacing:-.06em;
}
.receipt-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-bottom:1.4rem;
  border-bottom:1px solid #e5ebe7;
}
.receipt-brand {
  display:flex;
  align-items:center;
  gap:.7rem;
}
.receipt-brand > img {
  width:46px;
  height:46px;
  object-fit:contain;
}
.receipt-brand > div {
  display:grid;
  gap:.12rem;
}
.receipt-brand strong {
  font-size:1rem;
  font-weight:800;
}
.receipt-brand span {
  color:#7a8590;
  font-size:.72rem;
}
.receipt-paid-badge {
  padding:.4rem .65rem;
  border:1px solid #bde5d1;
  border-radius:999px;
  background:#edf9f3;
  color:#08764e;
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.08em;
}
.receipt-hero {
  display:grid;
  justify-items:center;
  padding:2rem 0 1rem;
}
.receipt-hero > span {
  color:#7a8590;
  font-size:.72rem;
  font-weight:650;
}
.receipt-hero > strong {
  margin:.25rem 0;
  color:#0a8d5b;
  font-size:2.35rem;
  font-weight:800;
  letter-spacing:-.05em;
}
.receipt-hero > small {
  color:#98a2ad;
}
.receipt-success-line {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  margin:0 auto 1.4rem;
  color:#176443;
  font-size:.78rem;
  font-weight:700;
}
.receipt-success-line > span {
  display:grid;
  width:24px;
  height:24px;
  place-items:center;
  border-radius:50%;
  background:#eaf8f1;
}
.receipt-details {
  display:grid;
  margin:0;
  border:1px solid #e2e8e4;
  border-radius:14px;
  overflow:hidden;
}
.receipt-details > div {
  display:grid;
  grid-template-columns:minmax(145px,.7fr) 1.3fr;
  gap:1rem;
  padding:.78rem .9rem;
  border-top:1px solid #edf1ee;
}
.receipt-details > div:first-child { border-top:0; }
.receipt-details dt {
  color:#7d8792;
  font-size:.7rem;
  font-weight:650;
}
.receipt-details dd {
  margin:0;
  color:#1a211e;
  font-size:.78rem;
  font-weight:650;
  text-align:right;
  overflow-wrap:anywhere;
}
.receipt-details code {
  color:#08764e;
  font-size:.72rem;
}
.receipt-footer {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  margin-top:1.5rem;
  padding-top:1.2rem;
  border-top:1px solid #e5ebe7;
}
.receipt-footer > div {
  display:grid;
  gap:.2rem;
}
.receipt-footer strong { font-size:.82rem; }
.receipt-footer span {
  color:#7b8690;
  font-size:.68rem;
}
@media (max-width:620px) {
  .receipt-sheet { padding:1.2rem; border-radius:16px; }
  .receipt-details > div { grid-template-columns:1fr; gap:.25rem; }
  .receipt-details dd { text-align:left; }
  .receipt-footer { align-items:flex-start; flex-direction:column; }
}
@media print {
  .receipt-page {
    min-height:auto!important;
    padding:0!important;
    background:#fff!important;
  }
  .receipt-toolbar,.topbar,.sidebar,.public-flash,.no-print {
    display:none!important;
  }
  .receipt-sheet {
    width:100%!important;
    margin:0!important;
    padding:16mm!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }
  .receipt-watermark { opacity:.04!important; }
  @page { size:A4; margin:0; }
}

/* Payment Link manager */
.payment-link-layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:1rem;
  align-items:start;
}
.payment-link-list {
  display:grid;
  gap:.8rem;
}
.payment-link-card {
  padding:1rem!important;
}
.payment-link-card-header {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.8rem;
}
.payment-link-card-header > div:first-child {
  display:grid;
  gap:.25rem;
}
.payment-link-title-row {
  display:flex;
  align-items:center;
  gap:.55rem;
  flex-wrap:wrap;
}
.payment-link-title-row > strong {
  font-size:.95rem;
  font-weight:800;
}
.payment-link-card-header small {
  color:#89939d;
  font-size:.66rem;
}
.payment-link-amount {
  color:#0a8d5b;
  font-size:1.05rem;
  font-weight:800;
}
.payment-link-url-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:.5rem;
  align-items:center;
  padding:.55rem;
  border:1px solid #e2e8e4;
  border-radius:12px;
  background:#f8faf9;
}
.payment-link-url-row code {
  min-width:0;
  overflow:hidden;
  color:#34423b;
  font-size:.7rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.payment-link-action {
  min-height:34px!important;
  padding:.45rem .65rem!important;
  font-size:.7rem!important;
  text-decoration:none;
}
.payment-link-description {
  margin:.75rem 0 0;
  color:#6f7b75;
  font-size:.74rem;
}
.payment-link-card-actions {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  margin-top:.8rem;
  padding-top:.75rem;
  border-top:1px solid #edf1ee;
}
.payment-link-edit-details {
  flex:1;
}
.payment-link-edit-details > summary {
  cursor:pointer;
  color:#08764e;
  font-size:.74rem;
  font-weight:750;
}
.payment-link-edit-form {
  margin-top:.75rem;
  padding:.9rem;
  border:1px solid #e2e8e4;
  border-radius:12px;
  background:#fafcfa;
}
.payment-link-edit-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.7rem;
}
.payment-link-edit-wide {
  grid-column:1 / -1;
}
.payment-link-secondary-actions {
  display:flex;
  align-items:center;
  gap:.65rem;
}
.payment-link-secondary-actions form {
  margin:0;
}
.danger-text-button {
  color:#b42318!important;
}
.payment-link-create-panel {
  position:sticky;
  top:84px;
}
@media (max-width:1050px) {
  .payment-link-layout { grid-template-columns:1fr; }
  .payment-link-create-panel { position:static; }
}
@media (max-width:680px) {
  .payment-link-url-row { grid-template-columns:1fr 1fr; }
  .payment-link-url-row code { grid-column:1 / -1; }
  .payment-link-edit-grid { grid-template-columns:1fr; }
  .payment-link-edit-wide { grid-column:auto; }
  .payment-link-card-actions { align-items:stretch; flex-direction:column; }
  .payment-link-secondary-actions { justify-content:flex-end; }
}