/*
 * Standard Pay Stitch UI migration layer.
 * Source of truth: Google Stitch "StandardPay Metallic Blue" handoff.
 * This file only changes presentation. Existing PHP data binding and JS actions stay intact.
 */
:root {
  --sp-bg: #061426;
  --sp-bg-2: #07182c;
  --sp-surface-low: #0a192f;
  --sp-surface: #0a192f;
  --sp-surface-high: #12233b;
  --sp-surface-bright: #1b3150;
  --sp-surface-variant: #10213a;
  --sp-primary: #2e5bff;
  --sp-primary-strong: #2e5bff;
  --sp-primary-container: #2e5bff;
  --sp-text: #f0f7ff;
  --sp-muted: #8892b0;
  --sp-faint: #8892b0;
  --sp-line: rgba(46, 91, 255, 0.22);
  --sp-line-strong: rgba(46, 91, 255, 0.46);
  --sp-success: #4ade80;
  --sp-warning: #fbbf24;
  --sp-error: #ffb4ab;
  --sp-shadow: 0 24px 64px rgba(0, 8, 24, 0.38);
  --sp-radius: 4px;
  --sp-radius-lg: 8px;
  --sp-radius-xl: 12px;
  --sp-font: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --sp-mono: "JetBrains Mono", "Geist Mono", Menlo, Monaco, Consolas, monospace;
}

html,
body {
  min-height: 100%;
  background: var(--sp-bg) !important;
  color: var(--sp-text) !important;
  font-family: var(--sp-font) !important;
  letter-spacing: 0 !important;
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--sp-line-strong) var(--sp-bg);
}

*::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

*::-webkit-scrollbar-track {
  background: var(--sp-bg);
}

*::-webkit-scrollbar-thumb {
  background: var(--sp-line-strong);
  border-radius: 2px;
}

a {
  color: inherit;
}

a:hover,
a:focus {
  color: var(--sp-primary);
  text-decoration: none;
}

body.stitch-ui,
.modern-admin,
.wallet-modern-admin,
.merchant-page {
  background: var(--sp-bg) !important;
  color: var(--sp-text) !important;
}

.material-symbols-outlined,
.fa,
.glyphicon,
.iconfont {
  font-family: "Material Symbols Outlined" !important;
  font-weight: 400 !important;
  font-style: normal !important;
  font-size: 18px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.fa::before,
.glyphicon::before,
.iconfont::before {
  content: "segment";
}

.fa-bars::before,
.fa-list::before,
.fa-navicon::before {
  content: "menu";
}
.fa-home::before { content: "home"; }
.fa-sign-out::before { content: "logout"; }
.fa-lock::before { content: "lock"; }
.fa-bell::before { content: "notifications"; }
.fa-qrcode::before { content: "qr_code"; }
.fa-dashboard::before { content: "dashboard"; }
.fa-credit-card::before { content: "credit_card"; }
.fa-sitemap::before { content: "account_tree"; }
.fa-shield::before { content: "shield"; }
.fa-line-chart::before { content: "monitoring"; }
.fa-pie-chart::before,
.fa-area-chart::before { content: "analytics"; }
.fa-exchange::before { content: "sync_alt"; }
.fa-diamond::before { content: "account_balance_wallet"; }
.fa-sliders::before { content: "tune"; }
.fa-address-book::before { content: "contact_page"; }
.fa-check::before { content: "check"; }
.fa-code::before { content: "code"; }
.fa-refresh::before { content: "refresh"; }
.fa-search::before { content: "search"; }
.fa-download::before { content: "download"; }
.fa-send::before,
.fa-paper-plane::before { content: "send"; }
.fa-arrow-down::before { content: "south"; }
.fa-arrow-up::before { content: "north"; }
.fa-arrow-left::before { content: "arrow_back"; }
.fa-times::before,
.fa-close::before { content: "close"; }
.fa-eye::before { content: "visibility"; }
.fa-eye-slash::before { content: "visibility_off"; }
.fa-clock-o::before { content: "schedule"; }
.fa-link::before { content: "link"; }
.fa-cubes::before { content: "deployed_code"; }
.fa-id-card::before,
.fa-vcard::before { content: "badge"; }
.fa-repeat::before,
.fa-undo::before { content: "replay"; }
.fa-plug::before { content: "extension"; }
.fa-toggle-on::before { content: "toggle_on"; }
.fa-bolt::before { content: "bolt"; }
.fa-check-circle::before,
.fa-user-check::before { content: "verified"; }
.fa-exclamation-triangle::before,
.fa-warning::before { content: "warning"; }
.fa-magic::before { content: "auto_fix_high"; }
.fa-plus::before { content: "add"; }
.fa-random::before { content: "shuffle"; }
.fa-save::before { content: "save"; }
.fa-spinner::before { content: "progress_activity"; }
.fa-wifi::before { content: "wifi"; }
.fa-calendar-check-o::before { content: "event_available"; }
.fa-users::before { content: "groups"; }
.fa-database::before { content: "database"; }
.fa-user::before,
.fa-user-circle::before { content: "person"; }
.fa-cog::before { content: "settings"; }
.fa-globe::before { content: "public"; }
.fa-fingerprint::before { content: "fingerprint"; }
.fa-key::before { content: "key"; }
.fa-unlock::before { content: "lock_open"; }
.fa-pencil::before { content: "edit"; }
.fa-trash::before { content: "delete"; }
.fa-external-link::before { content: "open_in_new"; }
.fa-calculator::before { content: "calculate"; }
.fa-mobile::before { content: "smartphone"; }
.fa-history::before { content: "history"; }

.row,
.layui-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

[class*="col-xs-"],
[class*="col-sm-"],
[class*="col-md-"],
[class*="col-lg-"],
[class*="layui-col-"] {
  min-width: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.col-xs-12,
.col-sm-12,
.col-md-12,
.col-lg-12,
.layui-col-md12 { flex: 0 0 100% !important; max-width: 100% !important; }
.col-xs-10,
.col-sm-10,
.col-md-10,
.col-lg-10 { flex: 0 0 calc(83.333% - 8px) !important; max-width: calc(83.333% - 8px) !important; }
.col-xs-9,
.col-sm-9,
.col-md-9,
.col-lg-9 { flex: 0 0 calc(75% - 8px) !important; max-width: calc(75% - 8px) !important; }
.col-xs-8,
.col-sm-8,
.col-md-8,
.col-lg-8,
.layui-col-md8 { flex: 0 0 calc(66.666% - 8px) !important; max-width: calc(66.666% - 8px) !important; }
.col-xs-7,
.col-sm-7,
.col-md-7,
.col-lg-7,
.layui-col-md7 { flex: 0 0 calc(58.333% - 8px) !important; max-width: calc(58.333% - 8px) !important; }
.col-xs-6,
.col-sm-6,
.col-md-6,
.col-lg-6,
.layui-col-md6 { flex: 0 0 calc(50% - 6px) !important; max-width: calc(50% - 6px) !important; }
.col-xs-5,
.col-sm-5,
.col-md-5,
.col-lg-5 { flex: 0 0 calc(41.666% - 8px) !important; max-width: calc(41.666% - 8px) !important; }
.col-xs-4,
.col-sm-4,
.col-md-4,
.col-lg-4,
.layui-col-md4 { flex: 0 0 calc(33.333% - 8px) !important; max-width: calc(33.333% - 8px) !important; }
.col-xs-3,
.col-sm-3,
.col-md-3,
.col-lg-3,
.layui-col-md3 { flex: 0 0 calc(25% - 9px) !important; max-width: calc(25% - 9px) !important; }
.col-xs-2,
.col-sm-2,
.col-md-2,
.col-lg-2,
.layui-col-md2 { flex: 0 0 calc(16.666% - 10px) !important; max-width: calc(16.666% - 10px) !important; }
.col-xs-1,
.col-sm-1,
.col-md-1,
.col-lg-1,
.layui-col-md1 { flex: 0 0 calc(8.333% - 11px) !important; max-width: calc(8.333% - 11px) !important; }

.standardpay-admin-logo {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.standardpay-admin-logo img,
.sp-mark,
.mark {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.modern-login,
.modern-login-page {
  min-height: 100vh !important;
  background:
    radial-gradient(circle at 78% 8%, rgba(46,91,255, 0.18), transparent 34%),
    radial-gradient(circle at 14% 18%, rgba(46,91,255, 0.12), transparent 30%),
    linear-gradient(135deg, #061426 0%, #07182c 48%, #061426 100%) !important;
}

.modern-login::before,
.modern-login-page::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(rgba(46,91,255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,91,255, .04) 1px, transparent 1px) !important;
  background-size: 64px 64px !important;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 76%) !important;
}

.modern-login-shell,
.modern-login-page .shell {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 460px) !important;
  gap: 56px !important;
  align-items: center !important;
  width: min(1180px, calc(100% - 40px)) !important;
  min-height: 100vh !important;
  margin: 0 auto !important;
  padding: 48px 0 !important;
}

.modern-login-brief,
.modern-login-page .hero {
  min-width: 0 !important;
}

.modern-login-page .brand,
.modern-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 42px !important;
  text-decoration: none !important;
}

.modern-login-page .brand > span strong,
.modern-brand span {
  display: block !important;
  color: var(--sp-text) !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

.modern-login-page .brand > span span {
  display: block !important;
  margin-top: 4px !important;
  color: var(--sp-muted) !important;
  font-family: var(--sp-mono) !important;
  font-size: 12px !important;
  letter-spacing: .02em !important;
}

.modern-login-page .mark,
.modern-login-page .standardpay-page-logo {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: contain !important;
}

.modern-login-page .mark::after {
  display: none !important;
}

.modern-login-copy h1,
.modern-login-page .hero h1 {
  max-width: 720px !important;
  margin: 0 !important;
  color: var(--sp-text) !important;
  font-size: 78px !important;
  font-weight: 900 !important;
  line-height: .98 !important;
  letter-spacing: 0 !important;
}

.modern-login-copy p,
.modern-login-page .hero p {
  max-width: 640px !important;
  margin: 24px 0 0 !important;
  color: var(--sp-muted) !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
}

.modern-login-stats,
.modern-login-page .metrics,
.modern-login-page .rail {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  max-width: 680px !important;
  margin-top: 36px !important;
}

.modern-login-stat,
.modern-login-page .metric,
.modern-login-page .rail div,
.modern-login-page .hint {
  border: 1px solid var(--sp-line) !important;
  border-radius: 8px !important;
  background: rgba(27, 43, 63, .58) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
  padding: 16px !important;
  color: var(--sp-muted) !important;
}

.modern-login-stat strong,
.modern-login-page .metric b,
.modern-login-page .rail b {
  display: block !important;
  margin: 0 0 6px !important;
  color: var(--sp-primary) !important;
  font-family: var(--sp-mono) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

.modern-login-stat span,
.modern-login-page .metric span {
  color: var(--sp-muted) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.modern-login-panel,
.modern-login-page .card {
  min-width: 0 !important;
}

.modern-login-card,
.modern-login-page .card {
  width: 100% !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg, rgba(27,43,63,.92), rgba(11,28,48,.92)) !important;
  box-shadow: var(--sp-shadow), inset 0 1px 0 rgba(255,255,255,.07) !important;
  padding: 30px !important;
  backdrop-filter: blur(18px) !important;
}

.modern-login-page .card-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: 22px !important;
}

.modern-login-card h2,
.modern-login-page .card h2 {
  margin: 0 !important;
  color: var(--sp-text) !important;
  font-size: 28px !important;
  font-weight: 850 !important;
}

.modern-login-card .sub,
.modern-login-page .card p {
  margin: 8px 0 0 !important;
  color: var(--sp-muted) !important;
  line-height: 1.6 !important;
}

.modern-login-page .lang {
  display: inline-flex !important;
  gap: 4px !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: 999px !important;
  padding: 4px !important;
  background: rgba(3,20,39,.58) !important;
}

.modern-login-page .lang button {
  width: 42px !important;
  height: 32px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: var(--sp-muted) !important;
  cursor: pointer !important;
}

.modern-login-page .lang button.active {
  background: var(--sp-surface-bright) !important;
  color: var(--sp-text) !important;
}

.modern-field,
.modern-login-page label {
  display: block !important;
}

.modern-field label,
.modern-login-page label {
  margin: 14px 0 8px !important;
  color: var(--sp-text) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}

.modern-input,
.modern-login-page input {
  width: 100% !important;
  height: 52px !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: 8px !important;
  padding: 0 16px !important;
  color: var(--sp-text) !important;
  background: rgba(3,20,39,.72) !important;
  outline: none !important;
  font-size: 15px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.modern-input:focus,
.modern-login-page input:focus {
  border-color: var(--sp-primary) !important;
  box-shadow: 0 0 0 3px rgba(46,91,255,.13), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.modern-login-page .captcha,
.modern-login-page .code-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 148px !important;
  gap: 12px !important;
  align-items: end !important;
}

.modern-login-page .captcha img {
  width: 148px !important;
  height: 52px !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: 8px !important;
  object-fit: cover !important;
  background: var(--sp-surface) !important;
  cursor: pointer !important;
}

.modern-login-page .code-row button,
.modern-login-submit,
.modern-login-page .submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 52px !important;
  margin-top: 20px !important;
  border: 1px solid rgba(46,91,255,.34) !important;
  border-radius: 8px !important;
  color: #061426 !important;
  background: linear-gradient(135deg, #8fb4ff 0%, #2e5bff 100%) !important;
  box-shadow: 0 18px 52px rgba(46,91,255,.22) !important;
  font-weight: 850 !important;
  font-size: 15px !important;
  cursor: pointer !important;
}

.modern-login-actions,
.modern-login-page .links {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin-top: 18px !important;
  color: var(--sp-muted) !important;
  font-size: 14px !important;
}

.modern-login-actions a,
.modern-login-page .links a {
  color: var(--sp-primary) !important;
}

.modern-login-page .notice {
  min-height: 22px !important;
  margin-top: 14px !important;
  color: var(--sp-error) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

@media (max-width: 900px) {
  .modern-login-shell,
  .modern-login-page .shell {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    width: min(100% - 28px, 560px) !important;
  }

  .modern-login-copy h1,
  .modern-login-page .hero h1 {
    font-size: 42px !important;
  }

  .modern-login-stats,
  .modern-login-page .metrics,
  .modern-login-page .rail {
    grid-template-columns: 1fr !important;
  }

  .modern-login-page .captcha,
  .modern-login-page .code-row {
    grid-template-columns: 1fr !important;
  }

  .modern-login-card,
  .modern-login-page .card {
    padding: 22px !important;
  }
}

.merchant-shell,
.bc-shell,
.modern-shell {
  min-height: 100vh !important;
  display: grid !important;
  grid-template-columns: 256px minmax(0, 1fr) !important;
  background: transparent !important;
}

.merchant-sidebar,
.modern-sidebar {
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  overflow-y: auto !important;
  padding: 24px 12px !important;
  background: rgba(16, 32, 52, 0.88) !important;
  border-right: 1px solid var(--sp-line) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.merchant-brand,
.modern-sidebar-head {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin: 0 10px 28px !important;
}

.merchant-brand strong,
.modern-brand-copy strong {
  display: block !important;
  color: var(--sp-primary) !important;
  font-size: 18px !important;
  font-weight: 750 !important;
  line-height: 1.1 !important;
}

.merchant-brand span,
.modern-brand-copy span {
  display: block !important;
  margin-top: 4px !important;
  color: var(--sp-muted) !important;
  font-size: 12px !important;
}

.merchant-account-card,
.bc-wallet-card,
.merchant-balance-grid > div {
  border: 1px solid var(--sp-line) !important;
  border-radius: 8px !important;
  background: rgba(27, 43, 63, 0.55) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.merchant-account-card,
.bc-wallet-card {
  margin: 0 4px 20px !important;
  padding: 18px !important;
}

.merchant-account-card span,
.bc-wallet-card span,
.merchant-balance-grid span {
  display: block !important;
  color: var(--sp-muted) !important;
  font-family: var(--sp-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

.merchant-account-card strong,
.bc-wallet-card strong {
  display: block !important;
  margin-top: 8px !important;
  color: #f8fafc !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.merchant-account-card em,
.bc-wallet-card em {
  display: block !important;
  margin-top: 8px !important;
  color: var(--sp-muted) !important;
  font-style: normal !important;
}

.merchant-balance-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 10px !important;
  margin: 0 4px 22px !important;
}

.merchant-balance-grid > div,
.merchant-balance-card {
  min-height: 132px !important;
  padding: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  overflow: hidden !important;
}

.merchant-balance-label {
  min-height: 34px !important;
  display: flex !important;
  align-items: flex-start !important;
  line-height: 1.25 !important;
}

.merchant-balance-label--asset {
  align-items: center !important;
}

.merchant-balance-label--asset .sp-coin {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  max-width: 100% !important;
}

.merchant-balance-label--asset .sp-coin__logo {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
}

.merchant-balance-label--asset .sp-coin__code {
  color: var(--sp-text) !important;
  font-family: var(--sp-font) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}

.merchant-balance-grid strong {
  display: block !important;
  margin-top: 10px !important;
  color: var(--sp-primary) !important;
  font-family: var(--sp-mono) !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  word-break: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.merchant-main,
.modern-main {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.merchant-topbar,
.modern-topbar {
  min-height: 72px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  padding: 16px 24px !important;
  background: rgba(3, 20, 39, 0.92) !important;
  border-bottom: 1px solid var(--sp-line) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.merchant-title,
.modern-topbar-left {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.merchant-title h1,
.modern-topbar h1 {
  margin: 0 !important;
  color: var(--sp-text) !important;
  font-size: 24px !important;
  font-weight: 750 !important;
  line-height: 1.1 !important;
}

.merchant-title p,
.modern-topbar p {
  margin: 6px 0 0 !important;
  color: var(--sp-muted) !important;
  font-size: 12px !important;
}

.bc-dot {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  margin-right: 6px !important;
  border-radius: 999px !important;
  background: var(--sp-primary-strong) !important;
  box-shadow: 0 0 12px rgba(46,91,255,.75) !important;
}

.merchant-actions,
.modern-topbar-actions,
.merchant-quickbar,
.bc-quickbar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.merchant-quickbar,
.bc-quickbar {
  padding: 10px 24px !important;
  background: rgba(0, 15, 33, 0.86) !important;
  border-bottom: 1px solid var(--sp-line) !important;
}

.bc-status-pill,
.merchant-quickbar a,
.bc-quickbar a,
.modern-icon-btn,
.layui-btn,
.btn,
button,
input[type="submit"],
input[type="button"] {
  min-height: 40px;
  border: 1px solid var(--sp-line) !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, rgba(27, 43, 63, .92), rgba(11, 28, 48, .92)) !important;
  color: var(--sp-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
  font-family: var(--sp-font) !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease !important;
}

.bc-status-pill,
.merchant-quickbar a,
.bc-quickbar a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 14px !important;
  text-decoration: none !important;
}

.modern-icon-btn {
  width: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
}

.merchant-quickbar a.active,
.bc-quickbar a.active,
.bc-status-pill:hover,
.merchant-quickbar a:hover,
.bc-quickbar a:hover,
.layui-btn:hover,
.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  border-color: rgba(46,91,255, .72) !important;
  color: #001945 !important;
  background: linear-gradient(135deg, #8fb4ff 0%, #7eb7ff 48%, #2e5bff 100%) !important;
  box-shadow: 0 0 18px rgba(46,91,255,.32), inset 0 1px 0 rgba(255,255,255,.35) !important;
}

.danger,
.merchant-logout-pill,
.modern-btn-danger-action,
.layui-btn-danger {
  border-color: rgba(255,180,171,.35) !important;
  color: var(--sp-error) !important;
}

.merchant-actions .merchant-logout-pill {
  min-width: 142px !important;
  border-color: rgba(255, 92, 112, .38) !important;
  color: #ff8a9b !important;
  background: rgba(255, 92, 112, .07) !important;
}

.merchant-actions .merchant-logout-pill:hover {
  border-color: #c93f54 !important;
  color: #ffffff !important;
  background: #c93f54 !important;
  box-shadow: none !important;
}

.merchant-content,
.modern-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 20px 24px 24px !important;
  background:
    linear-gradient(rgba(46,91,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,91,255,.035) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
}

.merchant-frame-shell,
.bc-frame-shell {
  min-height: calc(100vh - 148px) !important;
  overflow: hidden !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: 8px !important;
  background: rgba(16, 32, 52, .5) !important;
  box-shadow: var(--sp-shadow), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.merchant-frame-shell iframe,
.bc-frame-shell iframe,
.J_iframe {
  width: 100% !important;
  height: calc(100vh - 150px) !important;
  min-height: 720px !important;
  display: block !important;
  background: transparent !important;
}

.merchant-sidebar nav,
.modern-sidebar nav {
  display: grid !important;
  gap: 4px !important;
}

.merchant-sidebar a,
.modern-sidebar a,
.merchant-sidebar li > a,
.modern-sidebar li > a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 44px !important;
  padding: 0 14px !important;
  border-radius: 4px !important;
  color: var(--sp-muted) !important;
  font-weight: 650 !important;
  text-decoration: none !important;
}

.merchant-sidebar li.active > a,
.merchant-sidebar a.active,
.modern-sidebar li.active > a,
.modern-sidebar a.active,
.merchant-sidebar a:hover,
.modern-sidebar a:hover {
  color: var(--sp-primary) !important;
  background: rgba(27, 43, 63, .88) !important;
  box-shadow: inset 3px 0 0 var(--sp-primary-strong) !important;
}

.merchant-sidebar ul,
.modern-sidebar ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.merchant-sidebar li ul,
.modern-sidebar li ul {
  margin: 4px 0 8px 20px !important;
  padding-left: 10px !important;
  border-left: 1px solid var(--sp-line) !important;
}

.wrapper,
.wrapper-content,
.wallet-modern-shell,
.modern-page,
.payin-page,
.asset-page,
.payout-page,
.profile-page,
.login-page {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 20px 24px !important;
  color: var(--sp-text) !important;
  background:
    linear-gradient(rgba(46,91,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,91,255,.035) 1px, transparent 1px),
    linear-gradient(135deg, #061426 0%, #07182c 48%, #061426 100%) !important;
  background-size: 48px 48px, 48px 48px, auto !important;
}

.modern-panel,
.modernized-panel,
.layui-card,
.panel,
.ibox,
.wallet-hero,
.wallet-section,
.wallet-asset,
.wallet-card,
.payin-card,
.payout-card,
.detail-card,
.cashier .panel {
  border: 1px solid var(--sp-line) !important;
  border-radius: 8px !important;
  background: rgba(16, 32, 52, 0.76) !important;
  color: var(--sp-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 50px rgba(0, 15, 33, 0.28) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.modern-panel h1,
.modern-panel h2,
.modern-panel h3,
.wallet-section h2,
.wallet-hero h1,
.payin-card h1,
.payout-card h1,
.layui-card-header,
.modernized-panel-head {
  color: var(--sp-text) !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
}

.modern-panel small,
.modern-panel p,
.wallet-hero p,
.wallet-section p,
.payin-card p,
.payout-card p,
.muted,
.layui-word-aux {
  color: var(--sp-muted) !important;
}

.modern-kpi-grid,
.wallet-stat-grid,
.dashboard-stat-grid,
.payin-stat-grid,
.payout-stat-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.modern-kpi,
.wallet-stat,
.dashboard-stat,
.payin-stat,
.payout-stat,
.detail-metric {
  border: 1px solid var(--sp-line) !important;
  border-radius: 8px !important;
  background: rgba(11, 28, 48, .92) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

table,
.layui-table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  color: var(--sp-text) !important;
  background: rgba(0, 15, 33, .72) !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

table th,
.layui-table th {
  height: 56px !important;
  padding: 12px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--sp-line) !important;
  background: rgba(27, 43, 63, .88) !important;
  color: var(--sp-muted) !important;
  font-family: var(--sp-mono) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  text-transform: uppercase !important;
}

table td,
.layui-table td {
  padding: 14px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(140, 144, 159, .12) !important;
  color: var(--sp-text) !important;
  background: transparent !important;
  vertical-align: middle !important;
}

table tr:hover td,
.layui-table tr:hover td {
  background: rgba(27, 43, 63, .58) !important;
}

.modern-table-wrap,
.table-responsive,
.layui-table-view,
.modern-data-surface {
  overflow: auto !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: 8px !important;
  background: rgba(0, 15, 33, .64) !important;
}

input,
select,
textarea,
.layui-input,
.layui-select,
.layui-textarea,
.form-control {
  min-height: 40px !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: 4px !important;
  background: rgba(0, 15, 33, .86) !important;
  color: var(--sp-text) !important;
  box-shadow: none !important;
  font-family: var(--sp-font) !important;
}

input:focus,
select:focus,
textarea:focus,
.layui-input:focus,
.form-control:focus {
  border-color: rgba(46,91,255, .72) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(46,91,255,.16) !important;
}

label,
.layui-form-label,
.form-label {
  color: var(--sp-muted) !important;
  font-family: var(--sp-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

.modern-filter-bar,
.layui-form,
.form-inline {
  border: 1px solid var(--sp-line) !important;
  border-radius: 8px !important;
  background: rgba(16, 32, 52, .52) !important;
  padding: 16px !important;
}

.layui-laypage,
.pagination,
.modern-pagination {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 16px 0 !important;
}

.layui-laypage a,
.layui-laypage span,
.pagination a,
.pagination span,
.modern-pagination a,
.modern-pagination span {
  min-width: 36px !important;
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: 4px !important;
  background: rgba(11, 28, 48, .9) !important;
  color: var(--sp-text) !important;
}

.layui-laypage .layui-laypage-curr em:not(.layui-laypage-em),
.pagination .active a,
.modern-pagination .active a {
  color: #001945 !important;
  background: linear-gradient(135deg, #8fb4ff, #2e5bff) !important;
}

.sp-coin {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

.sp-coin__logo,
.wallet-coin-mark .sp-coin__logo,
.wallet-asset .wallet-coin-mark .sp-coin__logo {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  object-fit: contain !important;
  border-radius: 999px !important;
  box-shadow: 0 0 0 1px rgba(46,91,255,.22), 0 0 14px rgba(46,91,255,.26) !important;
}

.wallet-coin-mark {
  width: 48px !important;
  height: 48px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(46,91,255,.22) !important;
  background: rgba(0, 15, 33, .64) !important;
  overflow: hidden !important;
}

.wallet-coin-mark .sp-coin {
  width: 100% !important;
  height: 100% !important;
  justify-content: center !important;
}

.wallet-coin-mark .sp-coin__logo {
  width: 34px !important;
  height: 34px !important;
}

.wallet-coin-meta .sp-coin__logo,
.wallet-coin strong .sp-coin__logo {
  display: none !important;
}

.wallet-asset-actions,
.wallet-hero-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.wallet-action,
.wallet-hero-actions button,
.wallet-hero-actions a,
.asset-action {
  min-height: 40px !important;
  padding: 0 14px !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, rgba(27,43,63,.92), rgba(11,28,48,.92)) !important;
  color: var(--sp-text) !important;
}

.wallet-action.primary,
.wallet-hero-actions .primary,
.asset-action.primary {
  color: #001945 !important;
  background: linear-gradient(135deg, #8fb4ff, #2e5bff) !important;
}

.standardpay-password-field {
  position: relative !important;
  display: inline-flex !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: 100% !important;
}

.standardpay-password-field input {
  width: 100% !important;
  padding-right: 92px !important;
}

.standardpay-password-toggle {
  position: absolute !important;
  top: 4px !important;
  right: 4px !important;
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 10px !important;
  z-index: 2 !important;
  font-size: 12px !important;
}

.layui-layer,
.layui-layer-page,
.layui-layer-iframe,
.standardpay-layer {
  overflow: hidden !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: 8px !important;
  background: rgba(16, 32, 52, .98) !important;
  color: var(--sp-text) !important;
  box-shadow: var(--sp-shadow) !important;
}

.layui-layer-title,
.standardpay-layer .layui-layer-title {
  height: 50px !important;
  line-height: 50px !important;
  padding: 0 58px 0 18px !important;
  border-bottom: 1px solid var(--sp-line) !important;
  background: rgba(27, 43, 63, .95) !important;
  color: var(--sp-text) !important;
  font-weight: 750 !important;
}

.layui-layer-setwin {
  top: 13px !important;
  right: 14px !important;
}

.layui-layer-setwin .layui-layer-close1,
.layui-layer-setwin .layui-layer-close2,
.layui-layer-setwin a {
  width: 28px !important;
  height: 28px !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: 4px !important;
  background: rgba(0, 15, 33, .92) !important;
  color: transparent !important;
}

.layui-layer-setwin a::before {
  content: "close";
  font-family: "Material Symbols Outlined";
  color: var(--sp-primary);
  font-size: 18px;
  line-height: 26px;
  display: block;
  text-align: center;
}

.layui-layer-content,
.standardpay-layer .layui-layer-content {
  background: rgba(3, 20, 39, .96) !important;
  color: var(--sp-text) !important;
}

.standardpay-detail-layer {
  max-width: calc(100vw - 48px) !important;
}

.standardpay-detail-layer .layui-layer-content {
  max-height: calc(100vh - 86px) !important;
  overflow: auto !important;
}

.payin-detail {
  padding: 0 !important;
  min-height: 100vh !important;
}

.embedded-detail .payin-detail {
  min-height: auto !important;
}

.detail-card {
  border-radius: 8px !important;
  background: rgba(16, 32, 52, .78) !important;
}

.detail-hero,
.detail-panel h2 {
  background: rgba(27, 43, 63, .88) !important;
  border-bottom: 1px solid var(--sp-line) !important;
}

.detail-kicker,
.payout-kicker,
.wallet-kicker {
  border-radius: 999px !important;
  border-color: rgba(46,91,255,.28) !important;
  background: rgba(46,91,255,.08) !important;
  color: var(--sp-primary) !important;
  letter-spacing: 0 !important;
}

.detail-btn.detail-close-only {
  display: inline-flex !important;
}

.detail-foot .detail-close-only {
  display: none !important;
}

.layui-layer .detail-foot .detail-close-only {
  display: none !important;
}

.modern-empty-state,
.standardpay-error-card {
  min-height: 100vh !important;
  display: grid !important;
  place-items: center !important;
  padding: 24px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(46,91,255,.16), transparent 34%),
    #061426 !important;
  color: var(--sp-text) !important;
}

.modern-empty-state > div,
.standardpay-error-card > div {
  width: min(560px, 92vw) !important;
  padding: 32px !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: 8px !important;
  background: rgba(11, 28, 48, .84) !important;
}

.page,
.cashier {
  background:
    radial-gradient(circle at 50% 0%, rgba(46,91,255,.16), transparent 46%),
    #061426 !important;
  color: var(--sp-text) !important;
  font-family: var(--sp-font) !important;
}

.cashier {
  max-width: 920px !important;
}

.cashier .amount,
.cashier .address,
.cashier .row {
  border-color: var(--sp-line) !important;
  background: rgba(0, 15, 33, .64) !important;
}

.cashier .amount strong {
  color: var(--sp-primary) !important;
}

.cashier button,
.cashier .btn {
  color: #001945 !important;
  background: linear-gradient(135deg, #8fb4ff, #2e5bff) !important;
}

.cashier button.secondary,
.cashier .btn.secondary {
  color: var(--sp-text) !important;
  background: rgba(11, 28, 48, .9) !important;
}

.wallet-page,
.payin-page,
.payout-page,
.asset-page,
.withdraw-shell,
.addr-page,
.account-page,
.security-page,
.google-page,
.mobile-dialog,
.api-page,
.cashier-shell,
.message-shell {
  color: var(--sp-text) !important;
  background:
    linear-gradient(rgba(46,91,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46,91,255,.035) 1px, transparent 1px),
    linear-gradient(135deg, #061426 0%, #07182c 48%, #061426 100%) !important;
  background-size: 48px 48px, 48px 48px, auto !important;
}

.wallet-hero,
.wallet-section,
.wallet-asset,
.wallet-modal-panel,
.payin-card,
.payin-panel,
.payout-card,
.payout-panel,
.withdraw-card,
.addr-card,
.account-card,
.security-panel,
.google-panel,
.mobile-card,
.api-panel,
.api-card,
.message-card,
.callback-card {
  border: 1px solid var(--sp-line) !important;
  border-radius: 8px !important;
  background: rgba(16, 32, 52, .78) !important;
  color: var(--sp-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 48px rgba(0,15,33,.26) !important;
}

.wallet-hero,
.payin-panel-head,
.payout-panel-head,
.wallet-dialog-head,
.addr-card h2,
.security-panel h1,
.google-panel h1,
.mobile-card h1,
.api-panel h1,
.api-section-head {
  border-color: var(--sp-line) !important;
  background: rgba(27, 43, 63, .78) !important;
  color: var(--sp-text) !important;
}

.wallet-hero h1,
.wallet-section h2,
.payin-panel-head h2,
.payout-panel-head h2,
.withdraw-card h1,
.addr-card h1,
.addr-card h2,
.account-card h1,
.security-panel h1,
.google-panel h1,
.mobile-card h1,
.api-panel h1,
.message-card h1,
.callback-card h1 {
  color: var(--sp-text) !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
}

.wallet-en,
.wallet-hero p,
.wallet-section p,
.payin-panel-head p,
.payout-panel-head p,
.withdraw-card p,
.addr-card p,
.account-card p,
.security-panel p,
.google-panel p,
.mobile-card p,
.api-panel p,
.api-card p,
.message-card p,
.callback-card p {
  color: var(--sp-muted) !important;
}

.wallet-btn,
.payin-btn,
.payout-btn,
.withdraw-btn,
.addr-btn,
.addr-action-btn,
.account-btn,
.security-btn,
.google-btn,
.mobile-btn,
.api-btn,
.sp-btn,
.detail-btn,
.modern-btn,
.wallet-close,
.payout-action,
.payin-action {
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: 6px !important;
  background: linear-gradient(180deg, rgba(27,43,63,.92), rgba(11,28,48,.92)) !important;
  color: var(--sp-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
  font-family: var(--sp-font) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
}

.wallet-btn:hover,
.payin-btn:hover,
.payout-btn:hover,
.withdraw-btn:hover,
.addr-btn:hover,
.addr-action-btn:hover,
.account-btn:hover,
.security-btn:hover,
.google-btn:hover,
.mobile-btn:hover,
.api-btn:hover,
.sp-btn:hover,
.detail-btn:hover,
.modern-btn:hover,
.wallet-close:hover,
.payout-action:hover,
.payin-action:hover {
  border-color: rgba(46,91,255,.72) !important;
  background: linear-gradient(135deg, #8fb4ff 0%, #7eb7ff 48%, #2e5bff 100%) !important;
  color: #001945 !important;
}

.wallet-btn.primary,
.wallet-btn.blue,
.payin-btn.primary,
.payout-btn.primary,
.withdraw-btn.primary,
.addr-btn.primary,
.account-btn.primary,
.security-btn.primary,
.google-btn.primary,
.mobile-btn.primary,
.api-btn.primary,
.sp-btn.primary,
.detail-btn.primary,
.modern-btn.primary,
.modern-btn-primary-action {
  border-color: rgba(46,91,255,.72) !important;
  background: linear-gradient(135deg, #8fb4ff 0%, #7eb7ff 48%, #2e5bff 100%) !important;
  color: #001945 !important;
}

.wallet-btn.danger,
.payin-btn.danger,
.payout-btn.danger,
.detail-btn.danger,
.modern-btn-danger-action {
  border-color: rgba(255,180,171,.38) !important;
  background: rgba(64, 24, 32, .68) !important;
  color: var(--sp-error) !important;
}

.wallet-input,
.wallet-select,
.wallet-textarea,
.payin-input,
.payin-select,
.payout-input,
.payout-select,
.withdraw-input,
.withdraw-select,
.addr-input,
.addr-select,
.account-input,
.security-field input,
.google-field input,
.mobile-field input,
.api-input,
.sp-runtime-input,
.sp-runtime-select,
.sp-rate-input {
  min-height: 40px !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: 4px !important;
  background: rgba(0, 15, 33, .88) !important;
  color: var(--sp-text) !important;
  box-shadow: none !important;
  font-family: var(--sp-font) !important;
}

.wallet-input:focus,
.wallet-select:focus,
.wallet-textarea:focus,
.payin-input:focus,
.payin-select:focus,
.payout-input:focus,
.payout-select:focus,
.withdraw-input:focus,
.withdraw-select:focus,
.addr-input:focus,
.addr-select:focus,
.account-input:focus,
.security-field input:focus,
.google-field input:focus,
.mobile-field input:focus,
.api-input:focus,
.sp-runtime-input:focus,
.sp-runtime-select:focus,
.sp-rate-input:focus {
  border-color: rgba(46,91,255,.72) !important;
  box-shadow: 0 0 0 2px rgba(46,91,255,.18) !important;
}

.wallet-metric,
.wallet-balance-card,
.wallet-mini-card,
.payin-stat,
.payout-stat,
.withdraw-summary,
.addr-summary,
.account-summary,
.api-step,
.api-method,
.detail-metric,
.modern-health {
  border: 1px solid var(--sp-line) !important;
  border-radius: 8px !important;
  background: rgba(11, 28, 48, .9) !important;
  color: var(--sp-text) !important;
}

.api-step span,
.api-method,
.detail-metric span,
.wallet-metric span,
.modern-health span {
  color: var(--sp-primary) !important;
  font-family: var(--sp-mono) !important;
  letter-spacing: 0 !important;
}

.status-success,
.label-success,
.badge-success,
.layui-badge.layui-bg-green {
  border-color: rgba(74,222,128,.32) !important;
  background: rgba(20, 83, 45, .45) !important;
  color: #bbf7d0 !important;
}

.status-warning,
.label-warning,
.badge-warning,
.layui-badge.layui-bg-orange {
  border-color: rgba(251,191,36,.32) !important;
  background: rgba(113, 63, 18, .45) !important;
  color: #fde68a !important;
}

.status-danger,
.label-danger,
.badge-danger,
.layui-badge.layui-bg-red {
  border-color: rgba(255,180,171,.32) !important;
  background: rgba(127, 29, 29, .42) !important;
  color: var(--sp-error) !important;
}

.wallet-modal {
  background: rgba(0, 15, 33, .76) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.wallet-modal-panel {
  width: min(720px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 48px) !important;
  overflow: auto !important;
}

.wallet-close {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  font-size: 0 !important;
}

.wallet-close::before {
  content: "close";
  font-family: "Material Symbols Outlined";
  font-size: 18px;
  color: inherit;
}

.detail-card {
  max-width: min(880px, calc(100vw - 48px)) !important;
  margin: 18px auto !important;
  overflow: hidden !important;
}

.payin-detail .detail-hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 16px !important;
  align-items: center !important;
  padding: 18px 22px !important;
}

.detail-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 18px 22px !important;
}

.detail-table,
.detail-timeline {
  margin: 0 22px 22px !important;
}

.embedded-detail .detail-foot .detail-close-only,
.layui-layer .detail-foot .detail-close-only,
.layui-layer-iframe .detail-foot .detail-close-only {
  display: none !important;
}

.standardpay-layer .layui-layer-setwin {
  top: 11px !important;
  right: 12px !important;
  z-index: 2 !important;
}

.standardpay-layer .layui-layer-title {
  padding-right: 56px !important;
}

.layui-layer-iframe iframe,
.standardpay-layer iframe {
  background: var(--sp-bg) !important;
}

/* Keep pay-in details anchored inside their iframe instead of scrolling the title away. */
.standardpay-detail-layer {
  overflow: hidden !important;
}

.standardpay-detail-layer .layui-layer-content {
  height: 100% !important;
  max-height: none !important;
  overflow: hidden !important;
}

.standardpay-detail-layer iframe {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
}

html.embedded-detail,
html.embedded-detail body {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

html.embedded-detail .wallet-modern-shell,
html.embedded-detail .payin-detail {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html.embedded-detail .detail-card {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

html.embedded-detail .detail-hero,
html.embedded-detail .detail-summary,
html.embedded-detail .detail-foot {
  flex: 0 0 auto !important;
}

html.embedded-detail .detail-hero {
  position: relative !important;
  z-index: 4 !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08) !important;
}

html.embedded-detail .detail-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  align-content: start !important;
  grid-auto-rows: max-content !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: stable !important;
}

html.embedded-detail .detail-panel {
  align-self: start !important;
  height: max-content !important;
}

html.embedded-detail .detail-head-actions .detail-close-only {
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

html.embedded-detail .detail-head-actions .detail-close-only i {
  flex: 0 0 auto !important;
  margin: 0 !important;
  color: var(--sp-text) !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

html.embedded-detail .detail-foot {
  margin: 0 !important;
  padding: 12px 24px !important;
  border-top: 1px solid var(--sp-line) !important;
  background: var(--sp-surface) !important;
}

.portal-shell,
.sp-site,
.h5-shell {
  background:
    radial-gradient(circle at 74% 10%, rgba(46,91,255,.18), transparent 32%),
    linear-gradient(135deg, #061426 0%, #07182c 48%, #061426 100%) !important;
  color: var(--sp-text) !important;
}

@media (max-width: 980px) {
  .merchant-shell,
  .bc-shell,
  .modern-shell {
    grid-template-columns: 1fr !important;
  }

  .merchant-sidebar,
  .modern-sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(280px, 84vw) !important;
    z-index: 80 !important;
    transform: translateX(-100%) !important;
    transition: transform .22s ease !important;
  }

  .merchant-shell.sidebar-open .merchant-sidebar,
  .merchant-sidebar.show,
  .modern-sidebar.show {
    transform: translateX(0) !important;
  }

  .merchant-topbar,
  .modern-topbar,
  .merchant-quickbar,
  .bc-quickbar {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .merchant-content,
  .modern-content,
  .wrapper,
  .wrapper-content,
  .wallet-modern-shell,
  .modern-page {
    padding: 16px !important;
  }

  .modern-kpi-grid,
  .wallet-stat-grid,
  .dashboard-stat-grid,
  .payin-stat-grid,
  .payout-stat-grid {
    grid-template-columns: 1fr !important;
  }

  [class*="col-xs-"],
  [class*="col-sm-"],
  [class*="col-md-"],
  [class*="col-lg-"],
  [class*="layui-col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  .merchant-frame-shell iframe,
  .bc-frame-shell iframe,
  .J_iframe {
    min-height: calc(100vh - 150px) !important;
  }
}

@media (max-width: 640px) {
  .merchant-balance-grid {
    grid-template-columns: 1fr !important;
  }

  .merchant-topbar,
  .modern-topbar {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .merchant-actions,
  .modern-topbar-actions {
    width: 100% !important;
  }

  .merchant-quickbar,
  .bc-quickbar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
  }

  .merchant-quickbar a,
  .bc-quickbar a {
    white-space: nowrap !important;
  }
}

/* Stitch v2.4 final component contract. */
html[data-theme="light"] {
  --sp-bg: #f8fafc;
  --sp-bg-2: #eef0ff;
  --sp-surface-low: #ffffff;
  --sp-surface: #ffffff;
  --sp-surface-high: #eef0ff;
  --sp-surface-bright: #d9e2ff;
  --sp-surface-variant: #eef0ff;
  --sp-primary: #2e5bff;
  --sp-primary-strong: #124af0;
  --sp-text: #0f172a;
  --sp-muted: #8892b0;
  --sp-faint: #8892b0;
  --sp-line: rgba(46, 91, 255, .16);
  --sp-line-strong: rgba(46, 91, 255, .34);
  --sp-shadow: 0 24px 64px rgba(15, 23, 42, .12);
}

body.stitch-ui {
  margin: 0 !important;
  overflow-x: hidden !important;
  font-size: 14px !important;
  font-synthesis: none !important;
  text-rendering: geometricPrecision !important;
}

.merchant-shell,
.bc-shell,
.modern-shell {
  grid-template-columns: 240px minmax(0, 1fr) !important;
  background: var(--sp-bg) !important;
}

.merchant-sidebar,
.modern-sidebar {
  padding: 24px 16px !important;
  background: #07192d !important;
  border-right: 1px solid var(--sp-line) !important;
  backdrop-filter: none !important;
}

.merchant-brand,
.modern-sidebar-head {
  min-height: 52px !important;
  margin: 0 8px 28px !important;
  gap: 12px !important;
}

.merchant-brand strong,
.modern-brand-copy strong {
  color: var(--sp-text) !important;
  font-size: 18px !important;
  font-weight: 750 !important;
}

.merchant-brand span,
.modern-brand-copy span {
  color: var(--sp-muted) !important;
  font-size: 11px !important;
}

.merchant-account-card,
.bc-wallet-card,
.merchant-balance-grid > div,
.merchant-balance-card {
  border: 1px solid var(--sp-line) !important;
  border-radius: 8px !important;
  background: rgba(11, 28, 48, .92) !important;
  box-shadow: none !important;
}

/* Light is the default presentation across desktop, H5 and console surfaces. */
html[data-theme="light"] .h5-lang-switch,
html[data-theme="light"] .h5-theme {
  border-color: rgba(46, 91, 255, .18) !important;
  background: rgba(255, 255, 255, .92) !important;
  color: #475569 !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .08) !important;
}

html[data-theme="light"] .h5-lang-switch button {
  border-color: transparent !important;
  background: transparent !important;
  color: #64748b !important;
  box-shadow: none !important;
}

html[data-theme="light"] .h5-lang-switch button.is-active {
  border-color: rgba(46, 91, 255, .18) !important;
  background: #eaf1ff !important;
  color: #124af0 !important;
  box-shadow: inset 0 0 0 1px rgba(46, 91, 255, .14) !important;
}

html[data-theme="light"] .h5-theme:hover,
html[data-theme="light"] .h5-lang-switch button:hover {
  border-color: rgba(46, 91, 255, .28) !important;
  background: #f3f7ff !important;
  color: #0a192f !important;
}

html[data-theme="light"] .standardpay-password-toggle {
  border-color: rgba(46, 91, 255, .2) !important;
  background: #eef4ff !important;
  color: #124af0 !important;
  box-shadow: none !important;
}

/* Default light theme contract for every public, admin, merchant and cashier surface. */
html[data-theme="light"] .modern-login,
html[data-theme="light"] .modern-login-page {
  background:
    radial-gradient(circle at 78% 8%, rgba(46, 91, 255, .10), transparent 34%),
    radial-gradient(circle at 14% 18%, rgba(108, 184, 255, .08), transparent 30%),
    linear-gradient(135deg, #f8fafc 0%, #eef4ff 48%, #f8fafc 100%) !important;
  color: #0f172a !important;
}

html[data-theme="light"] .modern-login::before,
html[data-theme="light"] .modern-login-page::before {
  background-image:
    linear-gradient(rgba(46, 91, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 91, 255, .045) 1px, transparent 1px) !important;
}

html[data-theme="light"] .modern-login-card,
html[data-theme="light"] .modern-login-page .card,
html[data-theme="light"] .modern-login-stat,
html[data-theme="light"] .modern-login-page .metric,
html[data-theme="light"] .modern-login-page .rail div,
html[data-theme="light"] .modern-login-page .hint {
  border-color: rgba(46, 91, 255, .16) !important;
  background: rgba(255, 255, 255, .94) !important;
  color: #0f172a !important;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .09) !important;
}

html[data-theme="light"] .modern-login-page .lang {
  border-color: rgba(46, 91, 255, .16) !important;
  background: #f1f5ff !important;
}

html[data-theme="light"] .modern-login-page .lang button.active {
  background: #dce7ff !important;
  color: #124af0 !important;
}

html[data-theme="light"] .modern-login-card h2,
html[data-theme="light"] .modern-login-page .card h2,
html[data-theme="light"] .modern-login-page label,
html[data-theme="light"] .modern-login-page .brand > span strong,
html[data-theme="light"] .modern-login-copy h1,
html[data-theme="light"] .modern-login-page .hero h1 {
  color: #0f172a !important;
}

html[data-theme="light"] .modern-input,
html[data-theme="light"] .modern-login-page input {
  border-color: rgba(46, 91, 255, .18) !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04) !important;
}

html[data-theme="light"] .merchant-shell,
html[data-theme="light"] .bc-shell,
html[data-theme="light"] .modern-shell,
html[data-theme="light"] .merchant-main,
html[data-theme="light"] .modern-main {
  background: #f8fafc !important;
  color: #0f172a !important;
}

html[data-theme="light"] .merchant-sidebar,
html[data-theme="light"] .modern-sidebar {
  background: #ffffff !important;
  border-color: rgba(46, 91, 255, .16) !important;
  box-shadow: 12px 0 34px rgba(15, 23, 42, .05) !important;
}

html[data-theme="light"] .merchant-account-card,
html[data-theme="light"] .bc-wallet-card,
html[data-theme="light"] .merchant-balance-grid > div,
html[data-theme="light"] .merchant-balance-card {
  border-color: rgba(46, 91, 255, .16) !important;
  background: #f4f7ff !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

html[data-theme="light"] .merchant-account-card strong,
html[data-theme="light"] .bc-wallet-card strong,
html[data-theme="light"] .merchant-balance-label--asset .sp-coin__code {
  color: #0f172a !important;
}

html[data-theme="light"] .merchant-topbar,
html[data-theme="light"] .modern-topbar,
html[data-theme="light"] .merchant-quickbar,
html[data-theme="light"] .bc-quickbar {
  background: rgba(255, 255, 255, .96) !important;
  border-color: rgba(46, 91, 255, .16) !important;
  color: #0f172a !important;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .05) !important;
}

html[data-theme="light"] .merchant-title h1,
html[data-theme="light"] .modern-topbar h1,
html[data-theme="light"] .merchant-brand strong,
html[data-theme="light"] .modern-brand-copy strong {
  color: #0f172a !important;
}

html[data-theme="light"] .bc-status-pill,
html[data-theme="light"] .merchant-quickbar a,
html[data-theme="light"] .bc-quickbar a,
html[data-theme="light"] .modern-icon-btn,
html[data-theme="light"] .layui-btn-primary,
html[data-theme="light"] .btn-ghost {
  border-color: rgba(46, 91, 255, .18) !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #334155 !important;
  box-shadow: none !important;
}

html[data-theme="light"] .merchant-quickbar a.active,
html[data-theme="light"] .bc-quickbar a.active,
html[data-theme="light"] .merchant-quickbar a:hover,
html[data-theme="light"] .bc-quickbar a:hover,
html[data-theme="light"] .bc-status-pill:hover {
  border-color: rgba(46, 91, 255, .32) !important;
  background: #e8efff !important;
  color: #124af0 !important;
  box-shadow: none !important;
}

html[data-theme="light"] .merchant-actions .merchant-logout-pill {
  border-color: #efc2c9 !important;
  color: #a92f43 !important;
  background: #fff8f9 !important;
}

html[data-theme="light"] .merchant-actions .merchant-logout-pill:hover {
  border-color: #c93f54 !important;
  color: #ffffff !important;
  background: #c93f54 !important;
}

html[data-theme="light"] .merchant-sidebar a,
html[data-theme="light"] .modern-sidebar a,
html[data-theme="light"] .merchant-sidebar li > a,
html[data-theme="light"] .modern-sidebar li > a {
  color: #475569 !important;
}

html[data-theme="light"] .merchant-sidebar li.active > a,
html[data-theme="light"] .merchant-sidebar a.active,
html[data-theme="light"] .modern-sidebar li.active > a,
html[data-theme="light"] .modern-sidebar a.active,
html[data-theme="light"] .merchant-sidebar a:hover,
html[data-theme="light"] .modern-sidebar a:hover {
  color: #124af0 !important;
  background: #e8efff !important;
  box-shadow: inset 3px 0 0 #2e5bff !important;
}

html[data-theme="light"] .merchant-content,
html[data-theme="light"] .modern-content,
html[data-theme="light"] .wrapper,
html[data-theme="light"] .wrapper-content,
html[data-theme="light"] .wallet-modern-shell,
html[data-theme="light"] .modern-page,
html[data-theme="light"] .payin-page,
html[data-theme="light"] .asset-page,
html[data-theme="light"] .payout-page,
html[data-theme="light"] .profile-page,
html[data-theme="light"] .login-page,
html[data-theme="light"] .wallet-page,
html[data-theme="light"] .addr-page,
html[data-theme="light"] .account-page,
html[data-theme="light"] .security-page,
html[data-theme="light"] .google-page,
html[data-theme="light"] .mobile-dialog,
html[data-theme="light"] .api-page {
  color: #0f172a !important;
  background:
    linear-gradient(rgba(46, 91, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 91, 255, .04) 1px, transparent 1px),
    #f8fafc !important;
  background-size: 48px 48px !important;
}

html[data-theme="light"] .merchant-frame-shell,
html[data-theme="light"] .bc-frame-shell {
  border-color: rgba(46, 91, 255, .16) !important;
  background: #ffffff !important;
  box-shadow: 0 18px 42px rgba(15, 23, 42, .06) !important;
}

html[data-theme="light"] .merchant-frame-shell iframe,
html[data-theme="light"] .bc-frame-shell iframe,
html[data-theme="light"] .J_iframe {
  background: #f8fafc !important;
}

html[data-theme="light"] .modern-panel,
html[data-theme="light"] .modernized-panel,
html[data-theme="light"] .layui-card,
html[data-theme="light"] .panel,
html[data-theme="light"] .ibox,
html[data-theme="light"] .wallet-hero,
html[data-theme="light"] .wallet-section,
html[data-theme="light"] .wallet-asset,
html[data-theme="light"] .wallet-card,
html[data-theme="light"] .payin-card,
html[data-theme="light"] .payout-card,
html[data-theme="light"] .detail-card,
html[data-theme="light"] .addr-form-card,
html[data-theme="light"] .auth-panel,
html[data-theme="light"] .ledger-panel,
html[data-theme="light"] .security-panel,
html[data-theme="light"] .google-panel,
html[data-theme="light"] .log-panel,
html[data-theme="light"] .mobile-card,
html[data-theme="light"] .account-hero,
html[data-theme="light"] .account-panel,
html[data-theme="light"] .addr-hero,
html[data-theme="light"] .addr-panel,
html[data-theme="light"] .api-section,
html[data-theme="light"] .asset-panel,
html[data-theme="light"] .payin-panel,
html[data-theme="light"] .payout-panel,
html[data-theme="light"] .sp-shell,
html[data-theme="light"] .notice {
  border-color: rgba(46, 91, 255, .16) !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .06) !important;
}

html[data-theme="light"] .modern-kpi,
html[data-theme="light"] .wallet-stat,
html[data-theme="light"] .dashboard-stat,
html[data-theme="light"] .payin-stat,
html[data-theme="light"] .payout-stat,
html[data-theme="light"] .detail-metric,
html[data-theme="light"] .wallet-metric,
html[data-theme="light"] .wallet-balance-card,
html[data-theme="light"] .wallet-mini-card,
html[data-theme="light"] .withdraw-summary,
html[data-theme="light"] .addr-summary,
html[data-theme="light"] .account-summary,
html[data-theme="light"] .api-step,
html[data-theme="light"] .modern-health,
html[data-theme="light"] .sp-assets-kpi,
html[data-theme="light"] .sp-assets-panel,
html[data-theme="light"] .sp-runtime-card {
  border-color: rgba(46, 91, 255, .16) !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

html[data-theme="light"] .modern-kpi .value,
html[data-theme="light"] .wallet-stat strong,
html[data-theme="light"] .dashboard-stat strong,
html[data-theme="light"] .payin-stat strong,
html[data-theme="light"] .payout-stat strong,
html[data-theme="light"] .detail-metric strong,
html[data-theme="light"] .wallet-metric strong,
html[data-theme="light"] .wallet-balance-card strong,
html[data-theme="light"] .wallet-mini-card strong,
html[data-theme="light"] .sp-assets-kpi strong {
  color: #0f172a !important;
}

html[data-theme="light"] .modern-table-wrap,
html[data-theme="light"] .table-responsive,
html[data-theme="light"] .layui-table-view,
html[data-theme="light"] .modern-data-surface {
  border-color: rgba(46, 91, 255, .16) !important;
  background: #ffffff !important;
  color: #0f172a !important;
}

html[data-theme="light"] .modern-panel h1,
html[data-theme="light"] .modern-panel h2,
html[data-theme="light"] .modern-panel h3,
html[data-theme="light"] .wallet-section h2,
html[data-theme="light"] .wallet-hero h1,
html[data-theme="light"] .payin-card h1,
html[data-theme="light"] .payout-card h1,
html[data-theme="light"] .layui-card-header,
html[data-theme="light"] .modernized-panel-head,
html[data-theme="light"] .auth-panel h1,
html[data-theme="light"] .ledger-panel h1,
html[data-theme="light"] .security-panel h1 {
  color: #0f172a !important;
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea,
html[data-theme="light"] .layui-input,
html[data-theme="light"] .form-control,
html[data-theme="light"] .addr-input,
html[data-theme="light"] .addr-select,
html[data-theme="light"] .security-field input,
html[data-theme="light"] .google-field input,
html[data-theme="light"] .mobile-field input,
html[data-theme="light"] .account-field input,
html[data-theme="light"] .account-field textarea,
html[data-theme="light"] .api-input,
html[data-theme="light"] .asset-input,
html[data-theme="light"] .asset-select,
html[data-theme="light"] .payin-input,
html[data-theme="light"] .payin-select,
html[data-theme="light"] .wallet-input,
html[data-theme="light"] .wallet-select,
html[data-theme="light"] .wallet-textarea,
html[data-theme="light"] .payout-input,
html[data-theme="light"] .payout-select {
  border-color: rgba(46, 91, 255, .18) !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04) !important;
}

html[data-theme="light"] table,
html[data-theme="light"] .layui-table,
html[data-theme="light"] .modern-table {
  background: #ffffff !important;
  color: #0f172a !important;
}

html[data-theme="light"] table th,
html[data-theme="light"] .layui-table th,
html[data-theme="light"] .modern-table th {
  border-color: rgba(46, 91, 255, .14) !important;
  background: #eef3ff !important;
  color: #475569 !important;
}

html[data-theme="light"] table td,
html[data-theme="light"] .layui-table td,
html[data-theme="light"] .modern-table td {
  border-color: rgba(46, 91, 255, .12) !important;
  background: #ffffff !important;
  color: #0f172a !important;
}

html[data-theme="light"] .page,
html[data-theme="light"] .cashier,
html[data-theme="light"] .cashier-shell,
html[data-theme="light"] .message-shell,
html[data-theme="light"] .sp-page {
  color: #0f172a !important;
  background:
    radial-gradient(circle at 72% 0%, rgba(46, 91, 255, .10), transparent 35%),
    linear-gradient(135deg, #f8fafc, #eef4ff 52%, #f8fafc) !important;
}

html[data-theme="light"] .cashier .panel,
html[data-theme="light"] .cashier .amount,
html[data-theme="light"] .cashier .address,
html[data-theme="light"] .cashier .row {
  border-color: rgba(46, 91, 255, .16) !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .07) !important;
}

html[data-theme="light"] .cashier-brand,
html[data-theme="light"] .cashier button.secondary,
html[data-theme="light"] .cashier .btn.secondary {
  color: #0f172a !important;
}

html[data-theme="light"] .cashier button.secondary,
html[data-theme="light"] .cashier .btn.secondary {
  border-color: rgba(46, 91, 255, .18) !important;
  background: #ffffff !important;
}

html[data-theme="light"] .standardpay-error-page {
  background: #f8fafc !important;
  color: #0f172a !important;
}

html[data-theme="light"] .standardpay-error-card {
  border-color: rgba(46, 91, 255, .16) !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 24px 64px rgba(15, 23, 42, .10) !important;
}

html[data-theme="light"] .standardpay-error-brand strong,
html[data-theme="light"] .standardpay-error-card h1 {
  color: #0f172a !important;
}

html[data-theme="light"] .layui-layer,
html[data-theme="light"] .layui-layer-content,
html[data-theme="light"] .layui-layer-page,
html[data-theme="light"] .modal-content,
html[data-theme="light"] .sp-modal,
html[data-theme="light"] .detail-modal {
  border-color: rgba(46, 91, 255, .18) !important;
  background: #ffffff !important;
  color: #0f172a !important;
}

/* The public-site CTAs are light/dark theme controls, not dashboard buttons. */
.sp-site .sp-actions .btn-primary {
  border-color: #2e5bff !important;
  background: #2e5bff !important;
  background-image: none !important;
  color: #f0f7ff !important;
  box-shadow: 0 12px 28px rgba(46, 91, 255, .22) !important;
}

.sp-site .sp-actions .btn-ghost {
  border-color: rgba(46, 91, 255, .24) !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--text) !important;
  box-shadow: none !important;
}

.sp-site .sp-actions .btn-primary:hover {
  border-color: #2e5bff !important;
  background: #2e5bff !important;
  color: #f0f7ff !important;
}

.sp-site .sp-actions .btn-ghost:hover {
  border-color: #2e5bff !important;
  background: rgba(46, 91, 255, .08) !important;
  color: var(--text) !important;
}

.bc-sidebar-nav,
.bc-sidebar-nav .sidebar-collapse,
.bc-sidebar-nav #side-menu {
  width: 100% !important;
}

.bc-sidebar-nav #side-menu > li {
  margin: 2px 0 !important;
}

.bc-sidebar-nav #side-menu a {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 40px !important;
  padding: 9px 12px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--sp-muted) !important;
  box-shadow: none !important;
  font-size: 13px !important;
}

.bc-sidebar-nav #side-menu a:hover,
.bc-sidebar-nav #side-menu li.active > a {
  background: rgba(46, 91, 255, .14) !important;
  color: var(--sp-text) !important;
  box-shadow: inset 2px 0 0 #2e5bff !important;
}

.bc-sidebar-nav #side-menu .nav-second-level {
  margin: 2px 0 8px 20px !important;
  padding: 0 0 0 8px !important;
  border-left: 1px solid var(--sp-line) !important;
}

.bc-sidebar-nav #side-menu .nav-second-level a {
  min-height: 36px !important;
  padding: 7px 10px !important;
  font-size: 12px !important;
}

.standardpay-command-hero {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 240px !important;
  align-items: center !important;
  gap: 28px !important;
  min-height: 188px !important;
  margin-bottom: 20px !important;
  padding: 28px 30px !important;
  overflow: hidden !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: 8px !important;
  background: var(--sp-surface-high) !important;
}

.standardpay-command-hero .command-copy {
  position: relative !important;
  z-index: 1 !important;
  max-width: 780px !important;
}

.standardpay-command-hero .command-kicker {
  display: inline-flex !important;
  margin-bottom: 12px !important;
  color: var(--sp-primary) !important;
  font: 700 11px/1 var(--sp-mono) !important;
}

.standardpay-command-hero h1 {
  margin: 0 !important;
  color: var(--sp-text) !important;
  font-size: 30px !important;
  line-height: 1.1 !important;
}

.standardpay-command-hero p {
  margin: 12px 0 0 !important;
  color: var(--sp-muted) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.standardpay-command-hero .command-rail {
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  height: 104px !important;
}

.standardpay-command-hero .command-rail span {
  width: 34px !important;
  border: 1px solid rgba(46,91,255,.42) !important;
  background: rgba(46,91,255,.22) !important;
}

.standardpay-command-hero .command-rail span:nth-child(1) { height: 42% !important; }
.standardpay-command-hero .command-rail span:nth-child(2) { height: 68% !important; }
.standardpay-command-hero .command-rail span:nth-child(3) { height: 54% !important; }
.standardpay-command-hero .command-rail span:nth-child(4) { height: 88% !important; background: #2e5bff !important; }

.modern-page-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin-bottom: 16px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.modern-page-head h1 {
  margin: 0 !important;
  color: var(--sp-text) !important;
  font-size: 24px !important;
}

.modern-page-head p {
  margin: 6px 0 0 !important;
  color: var(--sp-muted) !important;
}

.modern-alert {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
  padding: 14px 16px !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: 8px !important;
  background: rgba(46,91,255,.08) !important;
}

.modern-kpi {
  position: relative !important;
  min-height: 136px !important;
  padding: 18px !important;
  overflow: hidden !important;
  background: var(--sp-surface-low) !important;
}

.modern-kpi .label {
  color: var(--sp-muted) !important;
  font: 700 11px/1.2 var(--sp-mono) !important;
}

.modern-kpi .value {
  margin-top: 14px !important;
  color: var(--sp-text) !important;
  font-size: 28px !important;
  font-weight: 720 !important;
  line-height: 1 !important;
}

.modern-kpi .meta {
  margin-top: 10px !important;
  color: var(--sp-muted) !important;
  font-size: 12px !important;
}

.modern-kpi .icon {
  position: absolute !important;
  right: 16px !important;
  bottom: 16px !important;
  color: var(--sp-primary) !important;
}

.modern-panel {
  margin-top: 20px !important;
  padding: 20px !important;
}

.modern-panel h2 {
  margin: 0 0 16px !important;
  font-size: 18px !important;
}

.modern-health-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.modern-health {
  min-height: 88px !important;
  padding: 16px !important;
}

.modern-health span,
.modern-health strong {
  display: block !important;
}

.modern-health strong {
  margin-top: 10px !important;
  color: var(--sp-text) !important;
}

@media (max-width: 820px) {
  .standardpay-command-hero {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    padding: 22px !important;
  }

  .standardpay-command-hero .command-rail {
    display: none !important;
  }

  .modern-health-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .modern-page-head {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .modern-page-head .modern-btn,
  .modern-page-head > a,
  .modern-page-head > button {
    align-self: flex-start !important;
  }
}

.merchant-account-card,
.bc-wallet-card {
  min-height: 114px !important;
  margin: 0 0 16px !important;
  padding: 16px !important;
}

.merchant-balance-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 0 0 24px !important;
}

.merchant-balance-grid > div,
.merchant-balance-card {
  min-height: 112px !important;
  height: 112px !important;
  padding: 12px !important;
  justify-content: space-between !important;
}

.merchant-balance-label,
.merchant-balance-label--asset {
  min-height: 32px !important;
  width: 100% !important;
  align-items: center !important;
  overflow: hidden !important;
}

.merchant-balance-label--asset .sp-coin {
  gap: 7px !important;
}

.merchant-balance-label--asset .sp-coin__logo {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
}

.merchant-balance-label--asset .sp-coin__code {
  color: var(--sp-text) !important;
  font-family: var(--sp-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

.merchant-balance-grid strong {
  display: block !important;
  width: 100% !important;
  color: var(--sp-text) !important;
  font-family: var(--sp-mono) !important;
  font-size: 16px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.merchant-sidebar nav,
.modern-sidebar nav {
  padding: 4px 0 24px !important;
}

.merchant-sidebar a,
.modern-sidebar a,
.merchant-sidebar li > a,
.modern-sidebar li > a {
  min-height: 42px !important;
  margin: 2px 0 !important;
  padding: 0 12px !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  color: var(--sp-muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.merchant-sidebar li.active > a,
.merchant-sidebar a.active,
.modern-sidebar li.active > a,
.modern-sidebar a.active,
.merchant-sidebar a:hover,
.modern-sidebar a:hover {
  border-color: var(--sp-line) !important;
  background: rgba(46,91,255, .12) !important;
  color: var(--sp-text) !important;
  box-shadow: inset 2px 0 0 var(--sp-primary) !important;
}

.merchant-main,
.modern-main {
  min-width: 0 !important;
  background: var(--sp-bg) !important;
}

.merchant-topbar,
.modern-topbar {
  min-height: 72px !important;
  padding: 14px 24px !important;
  border-bottom: 1px solid var(--sp-line) !important;
  background: rgba(3, 20, 39, .98) !important;
  backdrop-filter: none !important;
}

.merchant-title h1,
.modern-topbar h1 {
  color: var(--sp-text) !important;
  font-size: 20px !important;
  font-weight: 720 !important;
}

.merchant-title p,
.modern-topbar p {
  color: var(--sp-muted) !important;
  font-size: 11px !important;
}

.merchant-actions,
.modern-topbar-actions,
.merchant-quickbar,
.bc-quickbar {
  gap: 8px !important;
}

.merchant-quickbar,
.bc-quickbar {
  min-height: 60px !important;
  padding: 10px 24px !important;
  border-bottom: 1px solid var(--sp-line) !important;
  background: #06172a !important;
}

.bc-status-pill,
.merchant-quickbar a,
.bc-quickbar a,
.modern-icon-btn,
.layui-btn,
.modern-btn,
.sp-btn,
.wallet-btn,
.payin-btn,
.payout-btn,
.withdraw-btn,
.addr-btn,
.account-btn,
.api-btn,
.detail-btn {
  min-height: 38px !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: 6px !important;
  background: var(--sp-surface-low) !important;
  color: var(--sp-text) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}

.merchant-quickbar a.active,
.bc-quickbar a.active,
.modern-btn.primary,
.sp-btn.primary,
.wallet-btn.primary,
.payin-btn.primary,
.payout-btn.primary,
.withdraw-btn.primary,
.addr-btn.primary,
.account-btn.primary,
.api-btn.primary,
.detail-btn.primary,
button[type="submit"]:not(.secondary):not(.danger) {
  border-color: var(--sp-primary) !important;
  background: var(--sp-primary) !important;
  color: #061426 !important;
}

.bc-status-pill:hover,
.merchant-quickbar a:hover,
.bc-quickbar a:hover,
.modern-btn:hover,
.sp-btn:hover,
.wallet-btn:hover,
.payin-btn:hover,
.payout-btn:hover,
.withdraw-btn:hover,
.addr-btn:hover,
.account-btn:hover,
.api-btn:hover,
.detail-btn:hover {
  border-color: var(--sp-primary) !important;
  background: rgba(46,91,255, .16) !important;
  color: var(--sp-text) !important;
}

.merchant-content,
.modern-content {
  min-height: calc(100vh - 132px) !important;
  padding: 20px 24px 24px !important;
  background: var(--sp-bg) !important;
}

.merchant-frame-shell,
.bc-frame-shell {
  border: 1px solid var(--sp-line) !important;
  border-radius: 8px !important;
  background: var(--sp-bg) !important;
  box-shadow: none !important;
}

.wrapper,
.wrapper-content,
.wallet-modern-shell,
.modern-page,
.wallet-page,
.payin-page,
.payout-page,
.asset-page,
.withdraw-shell,
.addr-page,
.account-page,
.security-page,
.google-page,
.mobile-dialog,
.api-page {
  background: var(--sp-bg) !important;
  background-image: none !important;
}

.modern-page,
.wrapper-content,
.wallet-modern-shell {
  padding: 20px !important;
}

.modern-panel,
.wallet-hero,
.wallet-section,
.wallet-asset,
.wallet-modal-panel,
.payin-card,
.payin-panel,
.payout-card,
.payout-panel,
.withdraw-card,
.addr-card,
.account-card,
.security-panel,
.google-panel,
.mobile-card,
.api-panel,
.api-card,
.message-card,
.callback-card,
.layui-card {
  border: 1px solid var(--sp-line) !important;
  border-radius: 8px !important;
  background: var(--sp-surface-low) !important;
  box-shadow: none !important;
}

.modern-page-head,
.wallet-hero,
.payin-panel-head,
.payout-panel-head,
.wallet-dialog-head,
.api-section-head,
.layui-card-header {
  border-color: var(--sp-line) !important;
  background: var(--sp-surface-high) !important;
}

.modern-kpi,
.wallet-stat,
.dashboard-stat,
.payin-stat,
.payout-stat,
.detail-metric,
.wallet-metric,
.wallet-balance-card,
.wallet-mini-card,
.withdraw-summary,
.addr-summary,
.account-summary,
.api-step,
.modern-health {
  border: 1px solid var(--sp-line) !important;
  border-radius: 6px !important;
  background: #07192d !important;
  box-shadow: none !important;
}

.modern-table-wrap,
.table-responsive,
.layui-table-view,
.modern-data-surface {
  border: 1px solid var(--sp-line) !important;
  border-radius: 8px !important;
  background: #07192d !important;
}

table,
.layui-table {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

table th,
.layui-table th {
  height: 48px !important;
  padding: 10px 14px !important;
  background: var(--sp-surface-high) !important;
  color: var(--sp-muted) !important;
  font-family: var(--sp-mono) !important;
  font-size: 10px !important;
}

table td,
.layui-table td {
  min-height: 52px !important;
  padding: 12px 14px !important;
  border-bottom: 1px solid rgba(46,91,255, .1) !important;
  color: var(--sp-text) !important;
  background: #07192d !important;
}

table tr:hover td,
.layui-table tr:hover td {
  background: rgba(46,91,255, .08) !important;
}

input,
select,
textarea,
.layui-input,
.layui-select,
.layui-textarea,
.form-control,
.wallet-input,
.wallet-select,
.wallet-textarea,
.payin-input,
.payin-select,
.payout-input,
.payout-select,
.withdraw-input,
.withdraw-select,
.addr-input,
.addr-select,
.account-input,
.api-input,
.sp-runtime-input,
.sp-runtime-select,
.sp-rate-input {
  min-height: 42px !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: 6px !important;
  padding: 0 12px !important;
  background: #06172a !important;
  color: var(--sp-text) !important;
}

textarea,
.layui-textarea,
.wallet-textarea {
  min-height: 112px !important;
  padding: 12px !important;
}

input:focus,
select:focus,
textarea:focus,
.layui-input:focus,
.form-control:focus {
  border-color: var(--sp-primary) !important;
  box-shadow: 0 0 0 3px rgba(46,91,255, .16) !important;
}

.modern-filter-bar,
.layui-form,
.form-inline {
  border: 1px solid var(--sp-line) !important;
  border-radius: 8px !important;
  padding: 16px !important;
  background: var(--sp-surface-low) !important;
}

.layui-layer,
.layui-layer-page,
.layui-layer-iframe,
.standardpay-layer,
.wallet-modal-panel {
  border: 1px solid var(--sp-line) !important;
  border-radius: 8px !important;
  background: var(--sp-surface-low) !important;
  box-shadow: var(--sp-shadow) !important;
}

.layui-layer-title,
.standardpay-layer .layui-layer-title,
.wallet-dialog-head {
  height: 56px !important;
  line-height: 56px !important;
  padding: 0 56px 0 18px !important;
  border-bottom: 1px solid var(--sp-line) !important;
  background: var(--sp-surface-high) !important;
}

.layui-layer-setwin .layui-layer-close1,
.layui-layer-setwin .layui-layer-close2,
.layui-layer-setwin a,
.wallet-close {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: 6px !important;
  background: var(--sp-surface-low) !important;
}

.sp-coin__logo,
.wallet-coin-mark .sp-coin__logo,
.wallet-asset .wallet-coin-mark .sp-coin__logo {
  box-shadow: none !important;
}

.wallet-coin-mark {
  border-color: var(--sp-line) !important;
  background: #07192d !important;
}

.standardpay-error-card,
.modern-empty-state {
  background: var(--sp-bg) !important;
  background-image: none !important;
}

@media (max-width: 980px) {
  .merchant-shell,
  .bc-shell,
  .modern-shell {
    grid-template-columns: 1fr !important;
  }

  .merchant-content,
  .modern-content {
    padding: 16px !important;
  }

  .merchant-topbar,
  .modern-topbar,
  .merchant-quickbar,
  .bc-quickbar {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

@media (max-width: 640px) {
  .merchant-balance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .merchant-topbar,
  .modern-topbar {
    min-height: 64px !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  .merchant-title h1,
  .modern-topbar h1 {
    font-size: 17px !important;
  }

  .merchant-actions,
  .modern-topbar-actions {
    width: auto !important;
  }

  .merchant-actions .bc-status-pill span,
  .modern-topbar-actions .bc-status-pill span {
    display: none !important;
  }

  .modern-page,
  .wrapper-content,
  .wallet-modern-shell {
    padding: 14px !important;
  }

  table th,
  .layui-table th,
  table td,
  .layui-table td {
    white-space: nowrap !important;
  }
}

/* Google Stitch source-of-truth contract, 2026-07-10. */
:root {
  --sp-bg: #061426;
  --sp-bg-2: #07182c;
  --sp-surface-low: #0a192f;
  --sp-surface: #0a192f;
  --sp-surface-high: #12233b;
  --sp-surface-bright: #1b3150;
  --sp-surface-variant: #10213a;
  --sp-primary: #2e5bff;
  --sp-primary-strong: #2e5bff;
  --sp-primary-container: #2e5bff;
  --sp-tertiary: #f0f7ff;
  --sp-text: #f0f7ff;
  --sp-muted: #8892b0;
  --sp-line: rgba(46, 91, 255, .22);
  --sp-line-strong: rgba(46, 91, 255, .46);
}

html[data-theme="light"] body,
html[data-theme="light"] body.stitch-ui {
  background: #f8fafc !important;
  color: #0a192f !important;
}

.merchant-sidebar,
.modern-sidebar {
  background: #0a192f !important;
}

.merchant-account-card,
.bc-wallet-card,
.merchant-balance-grid > div,
.merchant-balance-card,
.modern-card,
.wallet-card,
.layui-card,
.ibox,
.modern-panel {
  background: var(--sp-surface-low) !important;
  border-color: var(--sp-line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

.merchant-balance-grid {
  grid-auto-rows: 112px !important;
}

.merchant-balance-grid > div,
.merchant-balance-card {
  width: 100% !important;
  height: 112px !important;
  min-height: 112px !important;
}

.merchant-balance-label--asset .sp-coin__name,
.merchant-balance-label--asset .sp-coin__network,
.merchant-balance-label--asset .sp-coin__label {
  display: none !important;
}

.standardpay-admin-logo,
.standardpay-page-logo,
.sp-mark,
.mark {
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.standardpay-admin-logo img,
.standardpay-page-logo,
.sp-mark,
.mark {
  object-fit: contain !important;
}

.modern-btn.primary,
.wallet-primary,
.layui-btn:not(.layui-btn-primary):not(.layui-btn-danger),
button[type="submit"] {
  background: #2e5bff !important;
  color: #f0f7ff !important;
}

input:focus,
select:focus,
textarea:focus,
.layui-input:focus,
.form-control:focus {
  box-shadow: 0 0 0 3px rgba(46, 91, 255, .18) !important;
}

.standardpay-error-page {
  min-height: 100vh !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 20px !important;
  background: #061426 !important;
}

.standardpay-error-card {
  display: block !important;
  place-items: initial !important;
  width: 100% !important;
  max-width: 560px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 32px !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: 8px !important;
  background: #0a192f !important;
  box-shadow: var(--sp-shadow) !important;
}

.standardpay-error-card > div {
  width: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.standardpay-error-brand {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  margin-bottom: 28px !important;
}

.standardpay-error-brand .mark {
  width: 48px !important;
  height: 48px !important;
}

.standardpay-error-brand strong {
  color: var(--sp-text) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}

.standardpay-error-brand .tag,
.standardpay-error-card p {
  color: var(--sp-muted) !important;
}

.standardpay-error-card h1 {
  margin: 0 0 10px !important;
  color: var(--sp-text) !important;
  font-size: 26px !important;
}

.standardpay-error-card .code {
  display: inline-flex !important;
  margin-top: 24px !important;
  padding: 7px 11px !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: 4px !important;
  color: var(--sp-primary) !important;
  font: 700 12px/1 var(--sp-mono) !important;
}

.modern-login-page .notice {
  width: 100% !important;
  max-width: 100% !important;
}

.addr-form-card,
.auth-panel,
.ledger-panel,
.security-panel,
.google-panel,
.log-panel,
.mobile-card,
.account-hero,
.account-panel,
.addr-hero,
.addr-panel,
.api-section,
.asset-panel,
.payin-panel,
.wallet-hero,
.wallet-section,
.payout-panel,
.cashier .panel,
.sp-shell,
.notice {
  border-color: var(--sp-line) !important;
  border-radius: 8px !important;
  background: var(--sp-surface-low) !important;
  box-shadow: none !important;
}

.addr-input,
.addr-select,
.security-field input,
.google-field input,
.mobile-field input,
.account-field input,
.account-field textarea,
.api-input,
.asset-input,
.asset-select,
.payin-input,
.payin-select,
.wallet-input,
.wallet-select,
.wallet-textarea,
.payout-input,
.payout-select {
  border-color: var(--sp-line) !important;
  background: var(--sp-bg) !important;
  color: var(--sp-text) !important;
}

.addr-btn.primary,
.security-btn,
.google-btn,
.mobile-btn,
.account-btn.primary,
.api-btn.primary,
.asset-btn.primary,
.payin-btn.primary,
.wallet-btn.primary,
.payout-btn.primary,
.cashier button:not(.secondary),
.sp-btn:not(.secondary) {
  border-color: #2e5bff !important;
  background: #2e5bff !important;
  color: #f0f7ff !important;
}

.modern-login-submit,
.modern-login-page .submit {
  border-color: #2e5bff !important;
  background: #2e5bff !important;
  color: #f0f7ff !important;
  box-shadow: none !important;
}

.modern-login-actions a,
.modern-login-page .links a {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--sp-primary) !important;
  box-shadow: none !important;
}

/* Final Stitch light wallet contract: no legacy dark tiles may leak through. */
html[data-theme="light"] .wallet-asset {
  border-color: #d9e4f5 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, .06) !important;
}

html[data-theme="light"] .wallet-asset::before {
  opacity: 1 !important;
  background: linear-gradient(90deg, #2e5bff, #72a8ff 58%, #dce9ff) !important;
}

html[data-theme="light"] .wallet-coin-mark {
  border-color: #c9daf5 !important;
  background: #eef4ff !important;
  color: #124af0 !important;
  box-shadow: none !important;
}

html[data-theme="light"] .wallet-coin-meta strong,
html[data-theme="light"] .wallet-coin strong {
  color: #0f172a !important;
}

html[data-theme="light"] .wallet-coin-meta span,
html[data-theme="light"] .wallet-coin span,
html[data-theme="light"] .wallet-detail {
  color: #64748b !important;
}

html[data-theme="light"] .wallet-chain {
  border-color: #c9daf5 !important;
  background: #eef4ff !important;
  color: #124af0 !important;
}

html[data-theme="light"] .wallet-balance div,
html[data-theme="light"] .wallet-chain-facts div {
  border-color: #dbe5f3 !important;
  background: #f7f9fd !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

html[data-theme="light"] .wallet-balance span,
html[data-theme="light"] .wallet-chain-facts span {
  color: #64748b !important;
}

html[data-theme="light"] .wallet-balance strong,
html[data-theme="light"] .wallet-chain-facts strong {
  color: #0f172a !important;
}

html[data-theme="light"] .wallet-address {
  border-color: #c9daf5 !important;
  background: #f3f7ff !important;
  color: #475569 !important;
}

html[data-theme="light"] .wallet-asset-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html[data-theme="light"] .wallet-asset-actions .wallet-btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 40px !important;
  padding: 0 10px !important;
  border-color: #c9daf5 !important;
  background: #ffffff !important;
  color: #16325c !important;
  box-shadow: none !important;
}

html[data-theme="light"] .wallet-asset-actions .wallet-btn.primary {
  border-color: #2e5bff !important;
  background: #2e5bff !important;
  color: #ffffff !important;
}

html[data-theme="light"] .wallet-asset-actions .wallet-btn.blue {
  border-color: #9fc0ff !important;
  background: #e8f1ff !important;
  color: #124af0 !important;
}

html[data-theme="light"] .wallet-asset-actions .wallet-btn:hover {
  border-color: #2e5bff !important;
  background: #edf3ff !important;
  color: #0a3bd9 !important;
}

html[data-theme="light"] .wallet-asset-actions .wallet-btn.primary:hover {
  background: #1748ed !important;
  color: #ffffff !important;
}

html[data-theme="light"] .wallet-table-wrap,
html[data-theme="light"] .wallet-empty {
  border-color: #dbe5f3 !important;
  background: #ffffff !important;
  color: #64748b !important;
}

html[data-theme="light"] .wallet-table th {
  border-color: #dbe5f3 !important;
  background: #eef4ff !important;
  color: #526581 !important;
}

html[data-theme="light"] .wallet-table td {
  border-color: #e4ebf5 !important;
  background: #ffffff !important;
  color: #0f172a !important;
}

html[data-theme="light"] .wallet-table tbody tr:hover td {
  background: #f6f9ff !important;
}

@media (max-width: 520px) {
  html[data-theme="light"] .wallet-asset-actions {
    grid-template-columns: 1fr !important;
  }
}

/* Withdrawal pages use one local close control; keep it visible on the dark title band. */
html[data-theme="light"] .withdraw-close-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  padding: 0 !important;
  border: 1px solid #bfd2f4 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #124af0 !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .14) !important;
}

html[data-theme="light"] .withdraw-close-button:hover {
  border-color: #2e5bff !important;
  background: #eaf1ff !important;
  color: #0a3bd9 !important;
}

/* Final Stitch light operations contract.
   These pages originally shipped with dark component-local CSS. Keep the
   light theme authoritative so every merchant workflow uses one visual system. */
html[data-theme="light"] .payin-hero,
html[data-theme="light"] .payout-hero,
html[data-theme="light"] .addr-hero,
html[data-theme="light"] .sp-assets-head,
html[data-theme="light"] .sp-assets-summary,
html[data-theme="light"] .sp-assets-panel,
html[data-theme="light"] .payin-panel,
html[data-theme="light"] .payout-panel,
html[data-theme="light"] .addr-panel {
  border-color: #d7e3f5 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .06) !important;
}

html[data-theme="light"] .payin-hero,
html[data-theme="light"] .payout-hero,
html[data-theme="light"] .addr-hero {
  align-items: center !important;
}

html[data-theme="light"] .payin-kicker,
html[data-theme="light"] .payout-kicker,
html[data-theme="light"] .addr-kicker {
  border-color: #bfd2f4 !important;
  background: #eef4ff !important;
  color: #124af0 !important;
}

html[data-theme="light"] .payin-hero h1,
html[data-theme="light"] .payout-hero h1,
html[data-theme="light"] .addr-hero h1,
html[data-theme="light"] .payin-panel-head h2,
html[data-theme="light"] .payout-panel-head h2,
html[data-theme="light"] .addr-panel-head h2,
html[data-theme="light"] .sp-assets-title h2 {
  color: #0f172a !important;
}

html[data-theme="light"] .payin-hero p,
html[data-theme="light"] .payout-hero p,
html[data-theme="light"] .addr-hero p,
html[data-theme="light"] .payin-panel-head p,
html[data-theme="light"] .payout-panel-head p,
html[data-theme="light"] .addr-panel-head p,
html[data-theme="light"] .sp-assets-title p,
html[data-theme="light"] .payin-muted,
html[data-theme="light"] .payin-en,
html[data-theme="light"] .payout-en,
html[data-theme="light"] .addr-en,
html[data-theme="light"] .sp-muted,
html[data-theme="light"] .sp-fee-hint,
html[data-theme="light"] .sp-runtime-help {
  color: #64748b !important;
}

html[data-theme="light"] .payin-panel-head,
html[data-theme="light"] .payout-panel-head,
html[data-theme="light"] .addr-panel-head {
  border-color: #d7e3f5 !important;
  background: #f3f7ff !important;
}

html[data-theme="light"] .payin-metric,
html[data-theme="light"] .payout-metric,
html[data-theme="light"] .sp-assets-kpi {
  border-color: #d7e3f5 !important;
  background: #f7f9fd !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

html[data-theme="light"] .payin-metric span,
html[data-theme="light"] .payout-metric span,
html[data-theme="light"] .sp-assets-kpi span,
html[data-theme="light"] .sp-runtime-field label {
  color: #64748b !important;
}

html[data-theme="light"] .payin-metric strong,
html[data-theme="light"] .payout-metric strong,
html[data-theme="light"] .sp-assets-kpi strong,
html[data-theme="light"] .payin-order,
html[data-theme="light"] .payin-money,
html[data-theme="light"] .payout-money,
html[data-theme="light"] .payout-address,
html[data-theme="light"] .addr-address {
  color: #0f172a !important;
}

html[data-theme="light"] .payin-settle {
  color: #124af0 !important;
}

html[data-theme="light"] .payin-fee,
html[data-theme="light"] .payout-fee {
  color: #9a6700 !important;
}

html[data-theme="light"] .payin-input,
html[data-theme="light"] .payin-select,
html[data-theme="light"] .payout-input,
html[data-theme="light"] .payout-select,
html[data-theme="light"] .sp-runtime-input,
html[data-theme="light"] .sp-runtime-select,
html[data-theme="light"] .sp-rate-input,
html[data-theme="light"] .sp-side-select {
  border-color: #c9daf5 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04) !important;
}

html[data-theme="light"] .payin-table th,
html[data-theme="light"] .payout-table th,
html[data-theme="light"] .addr-table th,
html[data-theme="light"] .sp-assets-table th {
  border-color: #d7e3f5 !important;
  background: #eef4ff !important;
  color: #526581 !important;
}

html[data-theme="light"] .payin-table td,
html[data-theme="light"] .payout-table td,
html[data-theme="light"] .addr-table td,
html[data-theme="light"] .sp-assets-table td {
  border-color: #e4ebf5 !important;
  background: #ffffff !important;
  color: #0f172a !important;
}

html[data-theme="light"] .payin-table tr:hover td,
html[data-theme="light"] .payout-table tr:hover td,
html[data-theme="light"] .addr-table tr:hover td,
html[data-theme="light"] .sp-assets-table tr:hover td {
  background: #f6f9ff !important;
}

html[data-theme="light"] .payin-pagination a,
html[data-theme="light"] .payin-pagination span {
  border-color: #c9daf5 !important;
  background: #ffffff !important;
  color: #16325c !important;
}

html[data-theme="light"] .payin-pagination .current,
html[data-theme="light"] .payin-pagination .active,
html[data-theme="light"] .payin-pagination .active a,
html[data-theme="light"] .payin-pagination .layui-laypage-curr,
html[data-theme="light"] .payin-pagination .layui-laypage-curr em:not(.layui-laypage-em) {
  border-color: #2e5bff !important;
  background: #2e5bff !important;
  color: #ffffff !important;
}

html[data-theme="light"] .payin-btn,
html[data-theme="light"] .payout-btn,
html[data-theme="light"] .addr-btn,
html[data-theme="light"] .addr-action-btn {
  border-color: #c9daf5 !important;
  background: #ffffff !important;
  color: #16325c !important;
  box-shadow: none !important;
}

html[data-theme="light"] .payin-btn.primary,
html[data-theme="light"] .payout-btn.primary,
html[data-theme="light"] .addr-btn.primary {
  border-color: #2e5bff !important;
  background: #2e5bff !important;
  color: #ffffff !important;
}

html[data-theme="light"] .payin-btn.danger,
html[data-theme="light"] .payout-btn.danger,
html[data-theme="light"] .addr-action-btn.danger {
  border-color: #f1b9bd !important;
  background: #fff3f3 !important;
  color: #b4232d !important;
}

html[data-theme="light"] .addr-alert {
  border-color: #f3c6c9 !important;
  background: #fff7f7 !important;
  color: #a7222b !important;
}

html[data-theme="light"] .addr-chip,
html[data-theme="light"] .payin-status,
html[data-theme="light"] .payout-status {
  border-color: #c9daf5 !important;
  background: #f3f7ff !important;
  color: #526581 !important;
}

html[data-theme="light"] .addr-chip.ok,
html[data-theme="light"] .payin-status.ok,
html[data-theme="light"] .payout-status.ok {
  border-color: #a9dfc3 !important;
  background: #eefbf4 !important;
  color: #087443 !important;
}

html[data-theme="light"] .payin-status.wait,
html[data-theme="light"] .payout-status.wait {
  border-color: #ead59c !important;
  background: #fff9e8 !important;
  color: #8a6100 !important;
}

html[data-theme="light"] .payin-status.fail,
html[data-theme="light"] .payout-status.fail {
  border-color: #f1b9bd !important;
  background: #fff3f3 !important;
  color: #b4232d !important;
}

html[data-theme="light"] .sp-asset-badge,
html[data-theme="light"] .sp-chain-pill {
  border-color: #c9daf5 !important;
  background: #f3f7ff !important;
  color: #16325c !important;
}

html[data-theme="light"] .payin-empty,
html[data-theme="light"] .payout-empty,
html[data-theme="light"] .addr-empty,
html[data-theme="light"] .sp-empty-assets {
  border-color: #c9daf5 !important;
  background: #f8faff !important;
  color: #64748b !important;
}

@media (max-width: 760px) {
  html[data-theme="light"] .payin-hero,
  html[data-theme="light"] .payout-hero,
  html[data-theme="light"] .addr-hero {
    padding: 20px !important;
  }
}

/* Hosted cashier onboarding keeps configuration, integration and acceptance in one flow. */
.cashier-setup {
  margin-bottom: 22px;
  padding: 24px;
  border: 1px solid #263a55;
  border-radius: 8px;
  background: #0b1726;
  color: #eaf2ff;
}

.cashier-setup-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.cashier-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: #78a9ff;
  font-size: 12px;
  font-weight: 800;
}

.cashier-setup h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
}

.cashier-setup-head p {
  max-width: 820px;
  margin: 10px 0 0;
  color: #a9bad1;
  line-height: 1.7;
}

.cashier-setup code {
  color: inherit;
  font-family: "JetBrains Mono", monospace;
  font-size: .92em;
}

.cashier-readiness {
  flex: 0 0 184px;
  min-height: 106px;
  padding: 15px 17px;
  border: 1px solid #3b4d66;
  border-radius: 8px;
  background: #111f31;
}

.cashier-readiness span,
.cashier-readiness em {
  display: block;
  color: #9eb0c7;
  font-size: 12px;
  font-style: normal;
}

.cashier-readiness strong {
  display: block;
  margin: 5px 0;
  color: #ffbf57;
  font-size: 28px;
}

.cashier-readiness.ready strong,
.cashier-readiness.ready em {
  color: #32d583;
}

.cashier-progress {
  height: 5px;
  margin: 20px 0;
  overflow: hidden;
  border-radius: 3px;
  background: #1a2b41;
}

.cashier-progress span {
  display: block;
  height: 100%;
  background: #2e5bff;
  transition: width .2s ease;
}

.cashier-check-grid,
.cashier-flow {
  display: grid;
  gap: 12px;
}

.cashier-check-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cashier-check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
  padding: 14px;
  border: 1px solid #30445e;
  border-radius: 8px;
  background: #0e1b2b;
}

.cashier-check > i {
  margin-top: 2px;
  color: #ffbf57;
  font-size: 17px;
}

.cashier-check.is-ready > i {
  color: #32d583;
}

.cashier-check strong,
.cashier-check span {
  display: block;
}

.cashier-check strong {
  margin-bottom: 5px;
  color: #eaf2ff;
  font-size: 13px;
}

.cashier-check span {
  overflow: hidden;
  color: #93a6be;
  font-size: 12px;
  line-height: 1.55;
  text-overflow: ellipsis;
}

.cashier-flow {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 12px;
}

.cashier-flow > div {
  min-height: 105px;
  padding: 14px;
  border-top: 2px solid #3f75ff;
  background: #0e1b2b;
}

.cashier-flow b,
.cashier-flow strong,
.cashier-flow span {
  display: block;
}

.cashier-flow b {
  margin-bottom: 12px;
  color: #6d98ff;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
}

.cashier-flow strong {
  margin-bottom: 5px;
  color: #eaf2ff;
}

.cashier-flow span {
  color: #93a6be;
  font-size: 12px;
  line-height: 1.55;
}

.cashier-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.cashier-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  gap: 8px;
  padding: 0 15px;
  border: 1px solid #3a4e68;
  border-radius: 6px;
  background: #111f31;
  color: #eaf2ff;
  font-weight: 750;
}

.cashier-btn:hover {
  border-color: #6d98ff;
  color: #ffffff;
}

.cashier-btn.primary {
  border-color: #2e5bff;
  background: #2e5bff;
  color: #ffffff;
}

.cashier-redline {
  margin-top: 16px;
  padding: 12px 14px;
  border-left: 3px solid #f97066;
  background: #25181e;
  color: #f8c6c1;
  font-size: 12px;
  line-height: 1.65;
}

.cashier-redline i {
  margin-right: 8px;
}

.sp-section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 16px;
}

.sp-section-head.compact {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #263a55;
}

.sp-section-head > span {
  flex: 0 0 auto;
  padding: 4px 8px;
  border: 1px solid #4069d8;
  border-radius: 4px;
  color: #78a9ff;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 800;
}

.sp-section-head h3,
.sp-section-head p {
  margin: 0;
}

.sp-section-head h3 {
  color: #eef5ff;
  font-size: 18px;
}

.sp-section-head p {
  margin-top: 4px;
  color: #91a4bd;
  font-size: 12px;
}

html[data-theme="light"] .cashier-setup {
  border-color: #cbd9f3;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 14px 34px rgba(41, 72, 125, .08);
}

html[data-theme="light"] .cashier-setup h2,
html[data-theme="light"] .cashier-check strong,
html[data-theme="light"] .cashier-flow strong,
html[data-theme="light"] .sp-section-head h3 {
  color: #0f172a;
}

html[data-theme="light"] .cashier-setup-head p,
html[data-theme="light"] .cashier-check span,
html[data-theme="light"] .cashier-flow span,
html[data-theme="light"] .sp-section-head p {
  color: #64748b;
}

html[data-theme="light"] .cashier-readiness,
html[data-theme="light"] .cashier-check,
html[data-theme="light"] .cashier-flow > div {
  border-color: #d7e3f5;
  background: #f7f9fd;
}

html[data-theme="light"] .cashier-progress {
  background: #e7edf8;
}

html[data-theme="light"] .cashier-btn {
  border-color: #c9daf5;
  background: #ffffff;
  color: #16325c;
}

html[data-theme="light"] .cashier-btn.primary {
  border-color: #2e5bff;
  background: #2e5bff;
  color: #ffffff;
}

html[data-theme="light"] .cashier-redline {
  background: #fff7f7;
  color: #a7222b;
}

html[data-theme="light"] .sp-section-head.compact {
  border-color: #d7e3f5;
}

@media (max-width: 980px) {
  .cashier-check-grid,
  .cashier-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .cashier-setup {
    padding: 18px;
  }

  .cashier-setup-head {
    display: block;
  }

  .cashier-readiness {
    width: 100%;
    margin-top: 16px;
  }

  .cashier-check-grid,
  .cashier-flow {
    grid-template-columns: 1fr;
  }

  .cashier-btn {
    width: 100%;
  }
}

/* Compact callback operations table and drill-down detail. */
.callback-filter-form {
  width: 100% !important;
}

.callback-filter-grid {
  display: grid !important;
  grid-template-columns: minmax(320px, 1.55fr) minmax(200px, .9fr) 116px !important;
  align-items: stretch !important;
  gap: 12px !important;
  width: min(100%, 790px) !important;
}

.callback-filter-field,
.callback-filter-action {
  min-width: 0 !important;
}

.callback-filter-field .layui-input,
.callback-filter-field select,
.callback-filter-field .layui-form-select,
.callback-filter-field .layui-form-select .layui-input {
  width: 100% !important;
  min-height: 42px !important;
  height: 42px !important;
}

.callback-filter-submit {
  display: inline-flex !important;
  width: 100% !important;
  min-width: 116px !important;
  min-height: 42px !important;
  height: 42px !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 18px !important;
  white-space: nowrap !important;
}

.callback-filter-submit i {
  margin: 0 !important;
  font-size: 13px !important;
}

.callback-table-wrap {
  overflow-x: auto !important;
}

.callback-compact-table {
  width: 100% !important;
  min-width: 1180px !important;
  table-layout: fixed !important;
}

.callback-compact-table th,
.callback-compact-table td {
  padding: 11px 10px !important;
  line-height: 1.35 !important;
}

.callback-compact-table tbody tr:not(.callback-detail-storage) {
  height: 68px !important;
}

.callback-col-status { width: 78px; }
.callback-col-order { width: 220px; }
.callback-col-merchant { width: 92px; }
.callback-col-event { width: 150px; }
.callback-col-http { width: 66px; }
.callback-col-url { width: 190px; }
.callback-col-result { width: 180px; }
.callback-col-time { width: 132px; }
.callback-col-action { width: 142px; }

.callback-status-cell small,
.callback-result + small {
  display: block !important;
  margin-top: 5px !important;
  color: var(--sp-muted) !important;
  font-size: 10px !important;
}

.callback-cell-stack {
  display: grid !important;
  gap: 5px !important;
  min-width: 0 !important;
}

.callback-cell-stack span {
  color: var(--sp-muted) !important;
  font-size: 11px !important;
}

.callback-ellipsis {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  word-break: normal !important;
}

.callback-event {
  display: block !important;
  overflow-wrap: anywhere !important;
  font-size: 12px !important;
}

.callback-http {
  display: inline-flex !important;
  min-width: 44px !important;
  min-height: 26px !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(234, 213, 156, .5) !important;
  border-radius: 999px !important;
  color: #f5c95e !important;
  background: rgba(138, 97, 0, .14) !important;
  font-family: var(--sp-mono) !important;
  font-size: 11px !important;
}

.callback-http.is-ok {
  border-color: rgba(63, 201, 132, .42) !important;
  color: #55dda0 !important;
  background: rgba(8, 116, 67, .14) !important;
}

.callback-time {
  white-space: normal !important;
  font-size: 11px !important;
}

.callback-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.callback-actions .modern-btn {
  min-height: 30px !important;
  padding: 0 9px !important;
  font-size: 11px !important;
}

.callback-detail-storage {
  display: none !important;
}

.callback-detail-template {
  display: none !important;
}

.callback-detail-layer {
  overflow: hidden !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: 8px !important;
  background: #0a192c !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .38) !important;
}

.callback-detail-layer .layui-layer-content {
  height: 100% !important;
  overflow: auto !important;
  background: #0a192c !important;
}

.callback-detail-layer .layui-layer-close2 {
  top: 14px !important;
  right: 14px !important;
}

.callback-detail-card {
  padding: 24px !important;
  color: var(--sp-text) !important;
}

.callback-detail-card header {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 0 42px 18px 0 !important;
  border-bottom: 1px solid var(--sp-line) !important;
}

.callback-detail-card h3 {
  margin: 5px 0 4px !important;
  color: var(--sp-text) !important;
  font-size: 21px !important;
}

.callback-detail-card header p,
.callback-detail-card footer {
  margin: 0 !important;
  color: var(--sp-muted) !important;
  font-family: var(--sp-mono) !important;
  font-size: 11px !important;
  overflow-wrap: anywhere !important;
}

.callback-detail-kicker {
  color: #8ab9ff !important;
  font-family: var(--sp-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

.callback-detail-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 18px 0 !important;
}

.callback-detail-grid > div {
  min-width: 0 !important;
  padding: 13px !important;
  border: 1px solid var(--sp-line) !important;
  border-radius: 6px !important;
  background: rgba(0, 15, 33, .64) !important;
}

.callback-detail-grid .wide {
  grid-column: 1 / -1 !important;
}

.callback-detail-grid span,
.callback-detail-card h4 {
  display: block !important;
  margin: 0 0 6px !important;
  color: var(--sp-muted) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

.callback-detail-grid strong,
.callback-detail-grid code {
  display: block !important;
  color: var(--sp-text) !important;
  overflow-wrap: anywhere !important;
}

.callback-detail-card section {
  margin-top: 12px !important;
}

.callback-detail-card pre {
  max-height: 190px !important;
  margin: 0 !important;
  padding: 14px !important;
  overflow: auto !important;
  border: 1px solid #263a55 !important;
  border-radius: 6px !important;
  background: #051426 !important;
  color: #dbeafe !important;
  font-family: var(--sp-mono) !important;
  font-size: 11px !important;
  line-height: 1.6 !important;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
}

.callback-detail-error {
  margin-bottom: 8px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(255, 104, 118, .35) !important;
  border-radius: 6px !important;
  background: rgba(180, 35, 45, .12) !important;
  color: #ff9ca5 !important;
}

.callback-detail-card footer {
  margin-top: 18px !important;
}

html[data-theme="light"] .callback-http {
  border-color: #ead59c !important;
  background: #fff9e8 !important;
  color: #8a6100 !important;
}

html[data-theme="light"] .callback-http.is-ok {
  border-color: #a9dfc3 !important;
  background: #eefbf4 !important;
  color: #087443 !important;
}

html[data-theme="light"] .callback-detail-layer,
html[data-theme="light"] .callback-detail-layer .layui-layer-content {
  border-color: #c9daf5 !important;
  background: #ffffff !important;
}

html[data-theme="light"] .callback-detail-card {
  color: #0f172a !important;
}

html[data-theme="light"] .callback-detail-card header {
  border-color: #d7e3f5 !important;
}

html[data-theme="light"] .callback-detail-card h3,
html[data-theme="light"] .callback-detail-grid strong,
html[data-theme="light"] .callback-detail-grid code {
  color: #0f172a !important;
}

html[data-theme="light"] .callback-detail-grid > div {
  border-color: #d7e3f5 !important;
  background: #f7f9fd !important;
}

@media (max-width: 760px) {
  .callback-filter-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .callback-filter-submit {
    width: 100% !important;
  }

  .callback-detail-card {
    padding: 18px !important;
  }

  .callback-detail-grid {
    grid-template-columns: 1fr !important;
  }

  .callback-detail-grid .wide {
    grid-column: auto !important;
  }
}

html[data-theme="light"] body button[type="submit"]:not(.secondary):not(.danger),
html[data-theme="light"] body .security-btn,
html[data-theme="light"] body .google-btn,
html[data-theme="light"] body .mobile-btn {
  border-color: #2e5bff !important;
  background: #2e5bff !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

html[data-theme="light"] .addr-form-head h1,
html[data-theme="light"] .auth-panel h1,
html[data-theme="light"] .ledger-panel h1,
html[data-theme="light"] .security-panel h1,
html[data-theme="light"] .google-panel h1,
html[data-theme="light"] .log-panel h1,
html[data-theme="light"] .mobile-card h1,
html[data-theme="light"] .account-hero h1,
html[data-theme="light"] .api-hero h1,
html[data-theme="light"] .detail-title h1,
html[data-theme="light"] .withdraw-head h1,
html[data-theme="light"] .wallet-dialog-head h3 {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Final Stitch light secondary-page contract. */
html[data-theme="light"] .addr-form-page,
html[data-theme="light"] .auth-page,
html[data-theme="light"] .ledger-page,
html[data-theme="light"] .log-page,
html[data-theme="light"] .account-page,
html[data-theme="light"] .payin-detail,
html[data-theme="light"] .withdraw-page {
  color: #0f172a !important;
  background:
    linear-gradient(rgba(46, 91, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(46, 91, 255, .04) 1px, transparent 1px),
    #f8fafc !important;
  background-size: 48px 48px !important;
}

html[data-theme="light"] .addr-form-card,
html[data-theme="light"] .auth-panel,
html[data-theme="light"] .ledger-panel,
html[data-theme="light"] .security-panel,
html[data-theme="light"] .google-panel,
html[data-theme="light"] .log-panel,
html[data-theme="light"] .mobile-card,
html[data-theme="light"] .account-hero,
html[data-theme="light"] .account-panel,
html[data-theme="light"] .api-hero-main,
html[data-theme="light"] .api-credential,
html[data-theme="light"] .api-panel,
html[data-theme="light"] .api-primary,
html[data-theme="light"] .detail-card,
html[data-theme="light"] .detail-panel,
html[data-theme="light"] .withdraw-panel,
html[data-theme="light"] .withdraw-card,
html[data-theme="light"] .wallet-dialog {
  border-color: #d7e3f5 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .06) !important;
}

html[data-theme="light"] .addr-form-head,
html[data-theme="light"] .detail-hero,
html[data-theme="light"] .detail-panel h2,
html[data-theme="light"] .withdraw-head,
html[data-theme="light"] .wallet-dialog-head,
html[data-theme="light"] .api-primary-head {
  border-color: #d7e3f5 !important;
  background: #f3f7ff !important;
  color: #0f172a !important;
}

html[data-theme="light"] .addr-form-head h1,
html[data-theme="light"] .auth-panel h1,
html[data-theme="light"] .ledger-panel h1,
html[data-theme="light"] .security-panel h1,
html[data-theme="light"] .google-panel h1,
html[data-theme="light"] .log-panel h1,
html[data-theme="light"] .mobile-card h1,
html[data-theme="light"] .account-hero h1,
html[data-theme="light"] .api-hero h1,
html[data-theme="light"] .api-credential h2,
html[data-theme="light"] .api-panel h2,
html[data-theme="light"] .api-primary h2,
html[data-theme="light"] .detail-title h1,
html[data-theme="light"] .detail-panel h2,
html[data-theme="light"] .withdraw-head h1,
html[data-theme="light"] .wallet-dialog-head h3 {
  color: #0f172a !important;
}

html[data-theme="light"] .addr-form-head p,
html[data-theme="light"] .addr-field label,
html[data-theme="light"] .security-field label,
html[data-theme="light"] .google-panel p,
html[data-theme="light"] .mobile-field label,
html[data-theme="light"] .account-hero p,
html[data-theme="light"] .account-field label,
html[data-theme="light"] .api-hero p,
html[data-theme="light"] .api-credential p,
html[data-theme="light"] .api-panel p,
html[data-theme="light"] .api-primary p,
html[data-theme="light"] .api-card p,
html[data-theme="light"] .api-asset span,
html[data-theme="light"] .detail-title h1 small,
html[data-theme="light"] .detail-label,
html[data-theme="light"] .withdraw-head p,
html[data-theme="light"] .withdraw-field label,
html[data-theme="light"] .withdraw-help,
html[data-theme="light"] .withdraw-en,
html[data-theme="light"] .wallet-field label,
html[data-theme="light"] .wallet-help,
html[data-theme="light"] .email-field,
html[data-theme="light"] .email-field small,
html[data-theme="light"] .email-form-status,
html[data-theme="light"] .email-security-note,
html[data-theme="light"] .email-security-note span {
  color: #64748b !important;
}

html[data-theme="light"] .addr-input,
html[data-theme="light"] .addr-select,
html[data-theme="light"] .security-field input,
html[data-theme="light"] .google-field input,
html[data-theme="light"] .mobile-field input,
html[data-theme="light"] .account-field input,
html[data-theme="light"] .account-field textarea,
html[data-theme="light"] .withdraw-input,
html[data-theme="light"] .withdraw-select,
html[data-theme="light"] .wallet-input,
html[data-theme="light"] .wallet-select,
html[data-theme="light"] .wallet-textarea {
  border-color: #c9daf5 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .04) !important;
}

html[data-theme="light"] .auth-note,
html[data-theme="light"] .api-note,
html[data-theme="light"] .email-security-note {
  border-color: #bfd2f4 !important;
  background: #eef4ff !important;
  color: #475569 !important;
}

html[data-theme="light"] .addr-note {
  border-color: #f3c6c9 !important;
  background: #fff7f7 !important;
  color: #a7222b !important;
}

html[data-theme="light"] .google-qr,
html[data-theme="light"] .wallet-result {
  border-color: #c9daf5 !important;
  background: #f3f7ff !important;
  color: #0f172a !important;
}

html[data-theme="light"] .ledger-table th,
html[data-theme="light"] .log-table th,
html[data-theme="light"] .api-table th {
  border-color: #d7e3f5 !important;
  background: #eef4ff !important;
  color: #526581 !important;
}

html[data-theme="light"] .ledger-table td,
html[data-theme="light"] .log-table td,
html[data-theme="light"] .api-table td {
  border-color: #e4ebf5 !important;
  background: #ffffff !important;
  color: #0f172a !important;
}

html[data-theme="light"] .api-kicker,
html[data-theme="light"] .api-step span,
html[data-theme="light"] .detail-kicker {
  border-color: #bfd2f4 !important;
  background: #eef4ff !important;
  color: #124af0 !important;
}

html[data-theme="light"] .api-step,
html[data-theme="light"] .api-cred,
html[data-theme="light"] .api-card,
html[data-theme="light"] .api-asset,
html[data-theme="light"] .detail-metric,
html[data-theme="light"] .detail-info {
  border-color: #d7e3f5 !important;
  background: #f7f9fd !important;
  color: #0f172a !important;
  box-shadow: none !important;
}

html[data-theme="light"] .api-step strong,
html[data-theme="light"] .api-cred strong,
html[data-theme="light"] .api-cred code,
html[data-theme="light"] .api-card strong,
html[data-theme="light"] .api-asset b,
html[data-theme="light"] .detail-metric strong,
html[data-theme="light"] .detail-info strong,
html[data-theme="light"] .detail-url code,
html[data-theme="light"] .withdraw-card strong,
html[data-theme="light"] .withdraw-balance,
html[data-theme="light"] .email-security-note strong {
  color: #0f172a !important;
}

html[data-theme="light"] .api-hero-main:after {
  border-color: #c9daf5 !important;
  background: #eef4ff !important;
  opacity: .55 !important;
}

html[data-theme="light"] .api-btn,
html[data-theme="light"] .detail-btn,
html[data-theme="light"] .withdraw-btn,
html[data-theme="light"] .account-btn,
html[data-theme="light"] .wallet-close {
  border-color: #c9daf5 !important;
  background: #ffffff !important;
  color: #16325c !important;
  box-shadow: none !important;
}

html[data-theme="light"] .api-btn.primary,
html[data-theme="light"] .withdraw-btn.primary,
html[data-theme="light"] .account-btn.primary,
html[data-theme="light"] .security-btn,
html[data-theme="light"] .google-btn,
html[data-theme="light"] .mobile-btn {
  border-color: #2e5bff !important;
  background: #2e5bff !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html[data-theme="light"] .detail-status,
html[data-theme="light"] .api-mode-badge {
  border-color: #a9dfc3 !important;
  background: #eefbf4 !important;
  color: #087443 !important;
}

html[data-theme="light"] .detail-status.wait {
  border-color: #ead59c !important;
  background: #fff9e8 !important;
  color: #8a6100 !important;
}

html[data-theme="light"] .withdraw-card span {
  color: #64748b !important;
}

html[data-theme="light"] .withdraw-balance {
  border-color: #d7e3f5 !important;
}

html[data-theme="light"] .wallet-modal {
  background: rgba(15, 23, 42, .34) !important;
  backdrop-filter: blur(5px) !important;
}

html[data-theme="light"] .email-form-status.success {
  color: #087443 !important;
}

html[data-theme="light"] .email-form-status.error {
  color: #b4232d !important;
}

/* Code examples intentionally stay dark for syntax readability. */
html[data-theme="light"] .api-code-block,
html[data-theme="light"] .api-code-title,
html[data-theme="light"] .api-pre {
  border-color: #263a55 !important;
  background: #07192d !important;
  color: #eef5ff !important;
}

@media (max-width: 760px) {
  html[data-theme="light"] .account-hero,
  html[data-theme="light"] .api-hero-main,
  html[data-theme="light"] .auth-panel,
  html[data-theme="light"] .ledger-panel,
  html[data-theme="light"] .security-panel,
  html[data-theme="light"] .google-panel,
  html[data-theme="light"] .log-panel {
    padding: 18px !important;
  }
}