:root {
  --api-bg: #f7f8ff;
  --api-surface: #ffffff;
  --api-ink: #11174d;
  --api-muted: #68709b;
  --api-line: #e6e8f5;
  --api-soft: #f0efff;
  --api-primary: #6038f5;
  --api-primary-2: #4b2be8;
  --api-green: #11ae71;
  --api-red: #f14b60;
  --api-amber: #f59e0b;
  --api-shadow: 0 10px 35px rgba(51, 43, 119, .07);
}
* { box-sizing: border-box; }
html { background: var(--api-bg); }
body.api-body { margin: 0; min-height: 100vh; background: var(--api-bg); color: var(--api-ink); font-family: "Manrope", system-ui, sans-serif; letter-spacing: 0; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.api-shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.api-sidebar { position: fixed; inset: 0 auto 0 0; width: 248px; background: var(--api-surface); border-right: 1px solid var(--api-line); display: flex; flex-direction: column; z-index: 40; }
.api-brand { height: 68px; display: flex; align-items: center; gap: 11px; padding: 0 22px; border-bottom: 1px solid var(--api-line); text-decoration: none; color: var(--api-ink); font-size: 18px; font-weight: 800; }
.api-brand img { width: 34px; height: 34px; object-fit: cover; border-radius: 8px; box-shadow: 0 5px 14px rgba(96,56,245,.24); }
.workspace-switch { margin: 12px 14px 10px; padding: 11px 12px; border: 0; border-radius: 8px; color: white; background: linear-gradient(135deg, var(--api-primary), var(--api-primary-2)); display: flex; align-items: center; gap: 10px; text-align: left; box-shadow: 0 8px 20px rgba(96,56,245,.22); }
.workspace-switch .workspace-icon { width: 31px; height: 31px; border-radius: 6px; display: grid; place-items: center; background: rgba(255,255,255,.14); }
.workspace-switch small { display: block; opacity: .76; font-size: 9px; margin-bottom: 2px; }
.workspace-switch strong { font-size: 12px; }
.workspace-switch i:last-child { margin-left: auto; font-size: 10px; }
.api-nav { display: flex; flex-direction: column; gap: 3px; padding: 0 14px; overflow-y: auto; }
.api-nav button { border: 0; background: transparent; color: #29306a; min-height: 42px; padding: 0 12px; border-radius: 8px; display: flex; align-items: center; gap: 13px; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; }
.api-nav button i { width: 18px; text-align: center; font-size: 15px; }
.api-nav button:hover { background: #f7f6ff; color: var(--api-primary); }
.api-nav button.active { color: var(--api-primary); background: var(--api-soft); }
.support-box { margin: auto 14px 14px; padding: 16px 14px; border: 1px solid #dedcff; border-radius: 8px; background: linear-gradient(145deg,#f5f3ff,#eae8ff); }
.support-box strong { display: block; color: var(--api-primary); font-size: 14px; }
.support-box p { margin: 6px 0 12px; color: var(--api-muted); font-size: 10px; line-height: 1.5; }
.support-box button { border: 0; width: 100%; height: 36px; border-radius: 7px; background: var(--api-primary); color: white; font-size: 11px; font-weight: 700; cursor: pointer; }
.api-workspace { grid-column: 2; min-width: 0; }
.api-topbar { position: sticky; top: 0; height: 68px; background: rgba(255,255,255,.94); backdrop-filter: blur(16px); border-bottom: 1px solid var(--api-line); display: flex; align-items: center; padding: 0 22px; z-index: 30; }
.back-wallet { height: 34px; padding: 0 13px; border: 1px solid var(--api-primary); border-radius: 7px; color: var(--api-primary); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.mode-pill { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; background: #f5f6fb; color: var(--api-ink); font-size: 10px; font-weight: 700; }
.mode-pill span { width: 7px; height: 7px; border-radius: 50%; background: var(--api-green); }
.icon-btn, .mobile-menu { border: 0; background: transparent; width: 36px; height: 36px; display: grid; place-items: center; color: var(--api-ink); border-radius: 7px; cursor: pointer; }
.icon-btn:hover, .mobile-menu:hover { background: var(--api-soft); }
.account-chip { height: 40px; min-width: 146px; padding: 0 10px; border: 1px solid var(--api-line); background: white; border-radius: 8px; display: flex; align-items: center; gap: 9px; color: var(--api-ink); }
.account-chip .store-icon { width: 29px; height: 29px; border-radius: 6px; background: var(--api-soft); color: var(--api-primary); display: grid; place-items: center; }
.account-chip strong { display: block; font-size: 10px; }
.account-chip small { display: block; color: var(--api-muted); font-size: 8px; }
.avatar { width: 35px; height: 35px; border-radius: 50%; background: var(--api-primary); color: white; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.mobile-menu { display: none; }
.api-content { padding: 17px 22px 28px; }
.view { display: none; animation: view-in .34s ease both; }
.view.active { display: block; }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.page-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 15px; }
.page-head h1 { margin: 0; font-size: clamp(22px,2.2vw,30px); line-height: 1.2; font-weight: 800; }
.page-head p { margin: 4px 0 0; color: var(--api-muted); font-size: 12px; }
.primary-btn { margin-left: auto; border: 0; min-height: 38px; padding: 0 16px; border-radius: 7px; background: var(--api-primary); color: white; font-weight: 700; font-size: 11px; display: inline-flex; gap: 8px; align-items: center; cursor: pointer; text-decoration: none; box-shadow: 0 8px 18px rgba(96,56,245,.18); }
.primary-btn:hover { background: var(--api-primary-2); }
.metrics { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 9px; }
.plan-usage-panel { margin-bottom: 12px; padding: 16px; color: #fff; border-radius: 8px; background: linear-gradient(135deg,#181b4b,#6038f5); box-shadow: 0 12px 30px rgba(51,43,119,.18); }
.plan-usage-head { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.plan-label { display:block; color:#c8c4ff; font-size:9px; font-weight:800; letter-spacing:.08em; }
.plan-usage-head h2 { margin:3px 0 2px; font-size:20px; }
.plan-usage-head p { margin:0; color:#dcd9ff; font-size:10px; }
.plan-usage-head a { flex:none; display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:0 12px; border-radius:7px; background:#fff; color:var(--api-primary); text-decoration:none; font-size:10px; font-weight:800; }
.usage-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:14px; }
.usage-item { padding:11px; border:1px solid rgba(255,255,255,.16); border-radius:7px; background:rgba(255,255,255,.09); }
.usage-title { display:flex; justify-content:space-between; gap:8px; font-size:10px; }
.usage-title span { color:#e8e7ff; font-weight:700; }
.usage-title span i { margin-right:6px; color:#fbbf24; }
.usage-title b { white-space:nowrap; font-size:10px; }
.usage-track { height:6px; margin-top:10px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.14); }
.usage-track i { display:block; height:100%; border-radius:inherit; background:#4ade80; }
.usage-item p { margin:6px 0 0; color:#dcd9ff; font-size:9px; }
.usage-item.is-locked .usage-title b { color:#fecaca; }
.usage-item.is-locked .usage-track i { background:#fb7185; }
.usage-reset { margin:11px 0 0; color:#cbc9e9; font-size:9px; }
.metric { min-height: 100px; background: var(--api-surface); border: 1px solid var(--api-line); border-radius: 8px; padding: 14px; box-shadow: var(--api-shadow); }
.metric-top { display: flex; justify-content: space-between; gap: 8px; color: var(--api-muted); font-size: 9px; font-weight: 700; }
.metric-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--api-soft); color: var(--api-primary); font-size: 14px; }
.metric strong { display: block; margin-top: -5px; font-size: 21px; line-height: 1; }
.metric small { display: block; margin-top: 8px; color: var(--api-muted); font-size: 9px; }
.metric.success .metric-icon { background: #e7faf2; color: var(--api-green); }
.metric.failed .metric-icon { background: #fff0f2; color: var(--api-red); }
.metric.pending .metric-icon { background: #fff6e7; color: var(--api-amber); }
.dashboard-grid { margin-top: 10px; display: grid; grid-template-columns: minmax(0,2.15fr) minmax(245px,.85fr); gap: 10px; align-items: start; }
.main-stack, .side-stack { display: grid; gap: 10px; }
.panel { background: var(--api-surface); border: 1px solid var(--api-line); border-radius: 8px; box-shadow: var(--api-shadow); overflow: hidden; }
.panel-head { min-height: 50px; padding: 0 14px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--api-line); }
.panel-head h2 { font-size: 14px; margin: 0; }
.link-btn { border: 0; background: var(--api-soft); color: var(--api-primary); border-radius: 6px; padding: 7px 11px; font-size: 9px; font-weight: 700; cursor: pointer; }
.empty { min-height: 190px; padding: 30px 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.empty-icon { width: 47px; height: 47px; border-radius: 12px; display: grid; place-items: center; background: var(--api-soft); color: var(--api-primary); font-size: 18px; }
.empty h3 { margin: 12px 0 4px; font-size: 13px; }
.empty p { max-width: 360px; margin: 0; color: var(--api-muted); font-size: 10px; line-height: 1.55; }
.quick-links { padding: 10px; display: grid; gap: 7px; }
.quick-links button { min-height: 40px; border: 1px solid var(--api-line); background: #fbfbff; border-radius: 7px; padding: 0 10px; display: flex; align-items: center; gap: 10px; text-align: left; color: var(--api-ink); cursor: pointer; font-size: 10px; font-weight: 700; }
.quick-links button i:first-child { width: 19px; color: var(--api-primary); }
.quick-links button i:last-child { margin-left: auto; color: var(--api-muted); }
.content-panel { min-height: calc(100vh - 132px); }
.table-wrap { overflow-x: auto; }
.empty-table { width: 100%; border-collapse: collapse; min-width: 660px; }
.empty-table th { height: 43px; text-align: left; padding: 0 14px; background: #f7f8fd; color: #4f5681; font-size: 9px; }
.content-form { max-width: 720px; padding: 20px; }
.field { display: grid; gap: 6px; margin-bottom: 15px; }
.field label { font-size: 10px; font-weight: 800; }
.field input { height: 42px; border: 1px solid var(--api-line); border-radius: 7px; padding: 0 12px; color: var(--api-ink); background: #fafbff; outline: none; }
.field input:focus { border-color: var(--api-primary); box-shadow: 0 0 0 3px rgba(96,56,245,.1); }
.credential-empty { padding: 32px; }
.security-note { display: flex; gap: 10px; padding: 13px; background: #fff9eb; border: 1px solid #f7df9a; border-radius: 7px; color: #805c00; font-size: 10px; line-height: 1.5; margin-bottom: 18px; }
.docs-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 14px; }
.doc-card { min-height: 120px; border: 1px solid var(--api-line); background: #fbfbff; border-radius: 7px; padding: 16px; text-align: left; color: var(--api-ink); cursor: pointer; }
.doc-card i { color: var(--api-primary); font-size: 19px; }
.doc-card strong { display: block; margin-top: 17px; font-size: 12px; }
.doc-card span { display: block; margin-top: 4px; color: var(--api-muted); font-size: 9px; }
.api-footer { padding: 18px 4px 0; display: flex; justify-content: space-between; color: var(--api-muted); font-size: 9px; }
.redirect-screen { position: fixed; inset: 0; z-index: 100; background: #f9faff; display: flex; align-items: center; justify-content: center; transition: opacity .35s ease, visibility .35s ease; }
.redirect-screen.hide { opacity: 0; visibility: hidden; }
.redirect-inner { text-align: center; }
.redirect-logo { width: 72px; height: 72px; border-radius: 17px; object-fit: cover; box-shadow: 0 18px 35px rgba(96,56,245,.22); animation: logo-pop .7s ease both; }
.redirect-inner h2 { margin: 18px 0 5px; font-size: 19px; }
.redirect-inner p { margin: 0; color: var(--api-muted); font-size: 11px; }
.loader-line { width: 190px; height: 4px; border-radius: 99px; background: #e7e5ff; overflow: hidden; margin: 18px auto 0; }
.loader-line span { display: block; height: 100%; width: 45%; border-radius: inherit; background: var(--api-primary); animation: sweep 1s ease-in-out infinite; }
@keyframes logo-pop { from { opacity:0; transform: scale(.84) translateY(8px); } to { opacity:1; transform:none; } }
@keyframes sweep { from { transform: translateX(-110%); } to { transform: translateX(330%); } }
.toast { position: fixed; right: 18px; bottom: 18px; z-index: 90; background: var(--api-ink); color: white; padding: 11px 14px; border-radius: 7px; box-shadow: var(--api-shadow); font-size: 11px; animation: view-in .25s ease; }
@media (max-width: 1060px) { .metrics { grid-template-columns: repeat(3,1fr); } .metric:last-child { grid-column: span 2; } }
@media (max-width: 760px) {
  .api-shell { display: block; }
  .api-sidebar { transform: translateX(-100%); transition: transform .28s ease; box-shadow: 18px 0 50px rgba(17,23,77,.14); }
  .api-sidebar.open { transform: translateX(0); }
  .api-workspace { width: 100%; }
  .api-topbar { height: 60px; padding: 0 12px; }
  .mobile-menu { display: grid; margin-right: 5px; }
  .back-wallet { padding: 0 9px; }
  .back-wallet span { display: none; }
  .account-chip { min-width: 0; width: 38px; padding: 4px; border: 0; }
  .account-chip .store-icon { width: 30px; height: 30px; }
  .account-chip div:nth-child(2), .account-chip i { display: none; }
  .avatar { width: 32px; height: 32px; }
  .mode-pill { padding: 7px 9px; }
  .api-content { padding: 16px 12px 24px; }
  .page-head { align-items: center; }
  .page-head h1 { font-size: 21px; }
  .page-head p { font-size: 10px; }
  .primary-btn { width: 38px; height: 38px; padding: 0; justify-content: center; }
  .primary-btn span { display: none; }
  .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .plan-usage-panel { padding:14px; }
  .usage-grid { grid-template-columns:1fr; }
  .plan-usage-head h2 { font-size:18px; }
  .metric:last-child { grid-column: span 2; }
  .metric { min-height: 96px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .docs-grid { grid-template-columns: 1fr; }
  .api-footer { flex-direction: column; align-items: center; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---------- Business API: live data, docs, checkout ---------- */
.hidden { display: none !important; }
.pill { display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:700; text-transform:capitalize; }
.pill.ok { background:rgba(16,185,129,.14); color:#059669; }
.pill.bad { background:rgba(239,68,68,.14); color:#dc2626; }
.pill.wait { background:rgba(245,158,11,.16); color:#b45309; }
.mode-tag { font-size:11px; font-weight:700; text-transform:uppercase; padding:2px 8px; border-radius:6px; background:rgba(99,102,241,.14); color:#4f46e5; margin-left:6px; }

.data-table { width:100%; border-collapse:collapse; font-size:14px; }
.data-table th, .data-table td { text-align:left; padding:12px 14px; border-bottom:1px solid rgba(148,163,184,.22); white-space:nowrap; }
.data-table th { font-size:12px; text-transform:uppercase; letter-spacing:.04em; opacity:.7; }
.data-table code { font-size:12px; }

.row-list { display:flex; flex-direction:column; gap:12px; padding:4px 0; }
.row-item { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:14px 16px; border:1px solid rgba(148,163,184,.22); border-radius:14px; flex-wrap:wrap; }
.row-item strong { display:block; font-size:15px; }
.row-item small { display:block; font-size:12.5px; opacity:.72; word-break:break-all; }
.row-actions { display:flex; align-items:center; gap:8px; }

.ghost-btn, .danger-btn { border-radius:10px; padding:8px 12px; font-weight:600; font-size:13px; cursor:pointer; border:1px solid rgba(148,163,184,.35); background:transparent; color:inherit; }
.danger-btn { border-color:rgba(239,68,68,.35); color:#dc2626; }
.ghost-btn:hover { background:rgba(148,163,184,.14); }
.danger-btn:hover { background:rgba(239,68,68,.1); }

.code-head { display:flex; justify-content:space-between; align-items:center; margin:18px 0 8px; }
.code-block { background:#0b1220; color:#e2e8f0; padding:18px; border-radius:14px; overflow:auto; font-size:13px; line-height:1.6; max-height:520px; }
.code-block code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; white-space:pre; }
.doc-card.active { border-color:#4f46e5; box-shadow:0 0 0 2px rgba(79,70,229,.18); }

.reveal-box { border:1px dashed rgba(79,70,229,.5); background:rgba(79,70,229,.06); border-radius:14px; padding:16px; margin:14px 0; }
.reveal-box p { font-size:12.5px; opacity:.75; margin:8px 0 0; }
.reveal-row { display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; }
.reveal-row span { font-size:12px; opacity:.7; min-width:80px; }
.reveal-row code { font-size:13px; word-break:break-all; }

/* ---------- credentials: one clear source of truth ---------- */
.credentials-view { max-width: 940px; margin: 0 auto; }
.credentials-view .page-head { margin-bottom: 20px; }
.credential-card { overflow: hidden; background: var(--api-surface); border: 1px solid #dfe3f2; border-radius: 18px; box-shadow: 0 18px 50px rgba(51,43,119,.11); }
.credential-card.is-active { border-top: 4px solid var(--api-green); }
.credential-card.is-inactive { border-top: 4px solid var(--api-red); }
.credential-head { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 24px 18px; background:linear-gradient(135deg,#ffffff 0%,#f7f7ff 100%); }
.credential-head h2 { margin:0 0 6px; font-size:20px; line-height:1.2; }
.credential-meta { display:flex; align-items:center; gap:9px; color:var(--api-muted); font-size:12px; }
.credential-meta .mode-tag { margin-left:0; }
.status-switch { display:flex; flex-direction:column; align-items:flex-end; gap:6px; border:0; padding:0; background:transparent; cursor:pointer; color:var(--api-green); }
.is-inactive .status-switch { color:var(--api-red); }
.status-label { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:800; text-transform:uppercase; }
.status-label > i { width:7px; height:7px; border-radius:50%; background:currentColor; box-shadow:0 0 0 4px rgba(17,174,113,.11); }
.is-inactive .status-label > i { box-shadow:0 0 0 4px rgba(241,75,96,.11); }
.switch-track { position:relative; display:block; width:46px; height:26px; border-radius:99px; background:var(--api-green); box-shadow:inset 0 2px 4px rgba(17,23,77,.12); transition:background .2s ease; }
.is-inactive .switch-track { background:#cbd0df; }
.switch-track > i { position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(17,23,77,.25); transition:transform .2s ease; }
.is-inactive .switch-track > i { transform:translateX(-20px); }
.credential-vault { margin:0 18px; padding:20px; border:1px solid #dcd9ff; border-radius:14px; background:linear-gradient(145deg,#f3f1ff,#f8fbff); }
.vault-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.vault-title > span { display:flex; align-items:center; gap:8px; color:#312e81; font-size:12px; font-weight:800; text-transform:uppercase; }
.vault-title > span > i { width:8px; height:8px; border-radius:50%; background:var(--api-primary); box-shadow:0 0 0 5px rgba(96,56,245,.1); }
.vault-title small { color:var(--api-primary); font-size:10px; font-weight:700; text-transform:uppercase; }
.credential-field { display:grid; gap:7px; margin-top:14px; }
.credential-field label { color:#6866a0; font-size:10px; font-weight:800; text-transform:uppercase; }
.credential-field > div { min-height:48px; display:flex; align-items:center; gap:10px; padding:10px 10px 10px 13px; background:rgba(255,255,255,.92); border:1px solid #dedcf5; border-radius:10px; box-shadow:0 4px 12px rgba(51,43,119,.04); }
.credential-field code { min-width:0; flex:1; color:var(--api-ink); font:500 13px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace; overflow-wrap:anywhere; word-break:break-word; }
.copy-btn { flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center; border:1px solid #dddaf7; border-radius:8px; background:#f7f6ff; color:var(--api-primary); cursor:pointer; }
.copy-btn:hover { background:var(--api-soft); }
.locked-icon { flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center; color:#8a90ad; }
.credential-warning { display:flex; align-items:flex-start; gap:8px; margin:16px 0 0; padding-top:14px; border-top:1px solid #dcd9f0; color:#665a38; font-size:11px; line-height:1.5; }
.credential-warning i { margin-top:2px; color:var(--api-amber); }
.credential-actions { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:18px; }
.credential-actions button { min-height:44px; display:flex; align-items:center; justify-content:center; gap:8px; border-radius:10px; font-size:13px; font-weight:800; cursor:pointer; transition:transform .18s ease,background .18s ease; }
.credential-actions button:active { transform:scale(.98); }
.regen-action { border:1px solid #d9ddea; background:#fff; color:var(--api-ink); }
.regen-action:hover { background:#f7f8fc; }
.toggle-action { border:1px solid #ffd2d8; background:#fff1f3; color:#d52d45; }
.is-inactive .toggle-action { border-color:#bcebd9; background:#eafaf4; color:#087a51; }

/* ---------- hosted checkout ---------- */
.checkout-body { background:linear-gradient(160deg,#0f172a,#1e1b4b); min-height:100vh; margin:0; font-family:'Manrope',system-ui,sans-serif; }
.checkout-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px 16px; }
.checkout-card { width:100%; max-width:430px; background:#fff; color:#0f172a; border-radius:22px; overflow:hidden; box-shadow:0 30px 70px rgba(2,6,23,.45); }
.checkout-head { display:flex; align-items:center; gap:12px; padding:18px 22px; border-bottom:1px solid rgba(148,163,184,.25); }
.checkout-head img { width:38px; height:38px; border-radius:10px; object-fit:cover; }
.checkout-head strong { display:block; font-size:15px; }
.checkout-head small { font-size:12px; opacity:.7; }
.checkout-body-inner { padding:24px 22px; }
.checkout-foot { padding:14px 22px; font-size:12px; opacity:.65; border-top:1px solid rgba(148,163,184,.25); text-align:center; }
.pay-amount { text-align:center; margin-bottom:18px; }
.pay-amount small { display:block; font-size:12.5px; opacity:.7; }
.pay-amount strong { font-size:34px; font-weight:800; }
.pay-meta { display:flex; flex-direction:column; gap:10px; background:rgba(148,163,184,.1); border-radius:14px; padding:14px 16px; margin-bottom:18px; }
.pay-meta div { display:flex; justify-content:space-between; gap:12px; font-size:13.5px; }
.pay-meta span { opacity:.65; }
.pay-meta strong { text-align:right; word-break:break-all; }
.pay-form label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; }
.pay-form input { width:100%; padding:14px 16px; border-radius:12px; border:1px solid rgba(148,163,184,.45); font-size:18px; letter-spacing:.4em; text-align:center; margin-bottom:14px; }
.pay-btn { display:block; width:100%; text-align:center; padding:15px; border:0; border-radius:12px; background:linear-gradient(120deg,#4f46e5,#7c3aed); color:#fff; font-size:16px; font-weight:700; cursor:pointer; text-decoration:none; }
.pay-btn:disabled { opacity:.65; cursor:progress; }
.pay-note { font-size:12.5px; opacity:.7; text-align:center; margin-top:12px; }
.checkout-state { text-align:center; padding:12px 0 4px; }
.checkout-state h2 { font-size:20px; margin:14px 0 6px; }
.checkout-state p { font-size:14px; opacity:.75; margin-bottom:16px; }
.state-icon { font-size:44px; }
.state-icon.ok { color:#10b981; }
.state-icon.bad { color:#ef4444; }
.checkout-loading { text-align:center; padding:24px 0; }
.spinner { display:inline-block; width:28px; height:28px; border:3px solid rgba(79,70,229,.25); border-top-color:#4f46e5; border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  .data-table th, .data-table td { padding:10px; font-size:13px; }
  .row-item { flex-direction:column; align-items:flex-start; }
  .credentials-view .page-head { margin-bottom:14px; }
  .credential-card { border-radius:14px; }
  .credential-head { padding:18px 16px 14px; }
  .credential-head h2 { font-size:17px; }
  .credential-meta { align-items:flex-start; flex-direction:column; gap:5px; }
  .credential-vault { margin:0 10px; padding:16px 12px; }
  .vault-title { align-items:flex-start; }
  .vault-title > span { font-size:10px; }
  .credential-field code { font-size:12px; }
  .credential-actions { padding:14px 10px 16px; gap:9px; }
  .credential-actions button { min-width:0; padding:0 8px; font-size:12px; }
}

/* ---------------- API URL panel (inside API Credentials) ---------------- */
.api-url-panel {
  margin-top: 1.25rem;
  background: #fff;
  border: 1px solid #dfe3f2;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(28, 22, 84, .06);
  overflow: hidden;
}
.api-url-panel .url-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  padding: 1rem 1.1rem;
  background: linear-gradient(135deg, #f4f1ff, #eef6ff);
  border-bottom: 1px solid #e6e3f7;
}
.api-url-panel .url-head h2 { margin: 0; font-size: 1.02rem; color: #1b1540; }
.api-url-panel .url-head h2 i { color: var(--api-primary, #6038f5); margin-right: .35rem; }
.api-url-panel .url-head p { margin: .25rem 0 0; font-size: .8rem; color: #6a6880; }
.api-url-panel .copy-btn.wide {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .85rem; border-radius: 10px; font-size: .78rem; font-weight: 600;
  background: var(--api-primary, #6038f5); color: #fff; border: 0; cursor: pointer;
}
.api-url-panel .url-list { display: grid; }
.url-row { padding: .85rem 1.1rem; border-bottom: 1px solid #f0f0f7; }
.url-row:last-child { border-bottom: 0; }
.url-label { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.url-label strong { font-size: .85rem; color: #211b4b; }
.url-label .verb {
  font-size: .64rem; font-weight: 800; letter-spacing: .06em;
  padding: .18rem .45rem; border-radius: 6px; background: #eceafe; color: #5732e0;
}
.url-label .verb.post { background: #e6f7ef; color: #0d9463; }
.url-label .verb.get { background: #e9f1ff; color: #2b62d9; }
.url-label .verb.base { background: #f4f0ff; color: #6038f5; }
.url-value {
  display: flex; align-items: center; gap: .5rem;
  background: #f7f7fc; border: 1px solid #e8e8f4; border-radius: 10px; padding: .5rem .6rem;
}
.url-value code {
  flex: 1; min-width: 0; font-size: .74rem; color: #2c2757;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  overflow-x: auto; white-space: nowrap;
}
.copy-btn.url-copy {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  width: 100%; margin-top: .45rem; padding: .55rem .8rem;
  background: #fff; border: 1px solid #ddd8f6; color: #5732e0;
  border-radius: 10px; font-size: .78rem; font-weight: 700; cursor: pointer;
}
.copy-btn.url-copy:active { background: #f1edff; }

/* ---------------- API request feed ---------------- */
.loading-note { padding: 1.25rem; color: #6a6880; font-size: .85rem; }
.request-list { display: grid; gap: .7rem; }
.request-card {
  border: 1px solid #e6e6f2; border-left: 4px solid #11ae71;
  border-radius: 14px; padding: .8rem .9rem; background: #fff;
}
.request-card.bad { border-left-color: #f14b60; }
.req-top { display: flex; align-items: center; gap: .5rem; }
.req-method {
  font-size: .64rem; font-weight: 800; letter-spacing: .05em;
  background: #eceafe; color: #5732e0; padding: .18rem .45rem; border-radius: 6px;
}
.req-top code {
  flex: 1; min-width: 0; font-size: .76rem; color: #2c2757;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.req-status { font-size: .72rem; font-weight: 700; color: #0d9463; }
.request-card.bad .req-status { color: #d93a4e; }
.req-meta {
  display: flex; flex-wrap: wrap; gap: .35rem .75rem;
  margin-top: .45rem; font-size: .76rem; color: #6a6880;
}
.req-meta strong { color: #211b4b; }
@media (max-width: 640px) {
  .api-url-panel .url-head { flex-direction: column; align-items: flex-start; }
  .api-url-panel .copy-btn.wide { width: 100%; justify-content: center; }
}

/* ---- full copy format: bundle preview + wide copy buttons ---- */
.copy-btn.wide {
  width: auto; height: auto;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .85rem; border-radius: 10px; font-size: .78rem; font-weight: 600;
  background: var(--api-primary, #6038f5); color: #fff; border: 0; cursor: pointer;
}
.copy-btn.wide:hover { filter: brightness(1.06); background: var(--api-primary, #6038f5); }
.copy-btn.under-date { margin-top: .55rem; }
.copy-all-row { padding: .9rem 1.1rem; border-top: 1px solid #f0f0f7; }
.copy-all-row .copy-btn.wide { width: 100%; justify-content: center; }
.bundle-view { margin-top: .9rem; border-top: 1px dashed #ddd9f5; padding-top: .75rem; }
.bundle-view summary {
  cursor: pointer; font-size: .8rem; font-weight: 600; color: var(--api-primary, #6038f5);
  display: flex; align-items: center; gap: .4rem;
}
.bundle-pre {
  margin: .7rem 0; padding: .8rem .9rem; border-radius: 10px;
  background: #17142b; color: #e7e4ff; font-size: .72rem; line-height: 1.5;
  white-space: pre; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.bundle-view .copy-btn.wide { width: 100%; justify-content: center; }
@media (max-width: 640px) {
  .copy-btn.under-date { width: 100%; justify-content: center; }
  .bundle-pre { font-size: .66rem; }
}

/* UPI payout rules list */
.api-url-panel .upi-rules {
  margin: .9rem 0 0;
  padding: .85rem 1rem .85rem 2rem;
  background: #f7f5ff;
  border: 1px solid #e6e1fb;
  border-radius: 12px;
  font-size: .82rem;
  color: #46435c;
  line-height: 1.6;
}
.api-url-panel .upi-rules li { margin: .2rem 0; }
.api-url-panel .upi-rules code { background: #ffffff; padding: 0 .3rem; border-radius: 5px; }