:root {
  --paper: #05070d;
  --paper-2: #0a0e1a;
  --surface: rgba(15, 23, 40, 0.78);
  --ink: #eef4ff;
  --muted: #8b9cc0;
  --sage: #91aeb0;
  --sand: #e3b386;
  --coral: #dc8e75;
  --brick: #b5594b;
  --blue: #1f7cff;
  --line: rgba(120, 150, 190, 0.18);
  --line-strong: rgba(120, 150, 190, 0.28);
  --font-display: "Inter", "Noto Sans SC", "PingFang SC", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;
  --bs-body-bg: var(--paper);
  --bs-body-color: var(--ink);
  --bs-primary: var(--blue);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
}

body::before {
  background-image:
    radial-gradient(circle at 20% 20%, rgba(31, 124, 255, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(31, 124, 255, 0.04) 0%, transparent 50%),
    repeating-linear-gradient(0deg, transparent, transparent 59px, rgba(120, 150, 190, 0.06) 59px, rgba(120, 150, 190, 0.06) 60px),
    repeating-linear-gradient(90deg, transparent, transparent 59px, rgba(120, 150, 190, 0.06) 59px, rgba(120, 150, 190, 0.06) 60px);
  content: "";
  inset: 0;
  pointer-events: none;
  position: fixed;
  z-index: -1;
}

.nb-shell-mounted {
  min-height: 100vh !important;
  padding-left: 220px !important;
  position: relative !important;
}

.nb-shell-sidebar {
  background: var(--paper-2) !important;
  border-right: 1px solid var(--line) !important;
  bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  left: 0 !important;
  overflow-y: auto !important;
  padding: 20px 0 !important;
  position: fixed !important;
  top: 0 !important;
  width: 220px !important;
  z-index: 90 !important;
}

.nb-shell-logo {
  align-items: center !important;
  color: var(--ink) !important;
  display: flex !important;
  gap: 10px !important;
  padding: 0 20px 20px !important;
}

.nb-shell-logo img {
  display: block !important;
  height: 22px !important;
  object-fit: contain !important;
  width: 22px !important;
}

.nb-shell-logo strong {
  color: var(--ink) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: -0.03em !important;
}

.nb-shell-primary {
  background: var(--blue) !important;
  border-radius: 8px !important;
  color: #fff !important;
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin: 0 14px 20px !important;
  padding: 11px 0 !important;
  text-align: center !important;
}

.nb-shell-section {
  margin-bottom: 8px !important;
  padding: 0 14px !important;
}

.nb-shell-label {
  color: #4a5578 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 6px !important;
  padding: 0 8px !important;
  text-transform: uppercase !important;
}

.nb-shell-item {
  align-items: center !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  color: var(--muted) !important;
  display: flex !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  gap: 9px !important;
  margin-bottom: 2px !important;
  padding: 9px 12px !important;
}

.nb-shell-item:hover,
.nb-shell-item.active {
  background: rgba(31, 124, 255, 0.12) !important;
  border-color: rgba(31, 124, 255, 0.3) !important;
  color: var(--blue) !important;
}

.nb-shell-item span {
  background: currentColor !important;
  border-radius: 999px !important;
  height: 6px !important;
  opacity: 0.45 !important;
  width: 6px !important;
}

.nb-shell-item.active span {
  opacity: 1 !important;
}

.nb-shell-spacer {
  flex: 1 !important;
}

.nb-shell-status {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  margin: 0 14px !important;
  padding: 12px !important;
}

.nb-shell-status div {
  align-items: center !important;
  color: #34d399 !important;
  display: flex !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  gap: 5px !important;
  margin-top: 6px !important;
}

.nb-shell-status span {
  background: #34d399 !important;
  border-radius: 999px !important;
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.5) !important;
  height: 5px !important;
  width: 5px !important;
}

.nb-shell-topbar {
  align-items: center !important;
  background: rgba(5, 7, 13, 0.6) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--line) !important;
  display: flex !important;
  height: 56px !important;
  justify-content: space-between !important;
  margin: 0 !important;
  padding: 0 32px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 80 !important;
}

.nb-shell-crumb {
  color: #4a5578 !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.nb-shell-topnav {
  align-items: center !important;
  display: flex !important;
  gap: 4px !important;
}

.nb-shell-topnav a {
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  color: var(--muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 7px 14px !important;
}

.nb-shell-topnav a:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: var(--ink) !important;
}

.nb-shell-topnav a.primary {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: #fff !important;
}

.nb-shell-mounted > .page,
.nb-shell-mounted > main,
.nb-shell-mounted > .container,
.nb-shell-mounted > .shell {
  margin: 0 !important;
  max-width: none !important;
  padding: 32px !important;
}

.nb-shell-mounted > .page > .nav,
.nb-shell-mounted > .nav,
.nb-shell-mounted > .container > header {
  display: none !important;
}

.nb-shell-mounted .auth-shell,
.nb-shell-mounted .content-section,
.nb-shell-mounted .grid,
.nb-shell-mounted .panel,
.nb-shell-mounted .hero,
.nb-shell-mounted .sub-hero,
.nb-shell-mounted .pricing-grid {
  max-width: 980px !important;
}

a { color: var(--blue); }

code {
  background: rgba(31, 124, 255, 0.08) !important;
  color: var(--blue) !important;
  font-family: var(--font-mono);
  padding: 0.08rem 0.32rem;
}

.navbar,
.navbar-custom,
.topbar {
  background: var(--paper-2) !important;
  border: 1px solid var(--line) !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
}

.navbar-brand,
.navbar-custom .navbar-brand,
.brand,
.console-brand {
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
  font-weight: 950 !important;
  gap: 0 !important;
  letter-spacing: -0.015em !important;
}

.brand-logo,
.navbar-brand img:first-child,
.brand > img:first-child,
.console-brand > img:first-child {
  align-items: center !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  height: 38px !important;
  margin-right: 12px !important;
  min-width: 34px !important;
  width: 34px !important;
}

.brand-logo img {
  display: block !important;
  height: 38px !important;
  object-fit: contain !important;
  width: 34px !important;
}

.brand-word {
  display: inline-block !important;
  line-height: 1 !important;
  padding-top: 2px !important;
}

.navbar-brand i:first-child,
.brand-icon,
.brand-mark,
.console-brand-mark,
.console-brand-icon,
.shell-brand-icon {
  background: transparent url("/nb-logo-mark.svg") center / contain no-repeat !important;
  border: 0 !important;
  box-shadow: none !important;
  color: transparent !important;
  display: inline-flex !important;
  height: 32px !important;
  margin-right: 12px !important;
  min-width: 52px !important;
  width: 52px !important;
}

.brand-icon i,
.brand-mark i,
.console-brand-mark i,
.console-brand-icon i,
.shell-brand-icon i {
  display: none !important;
}

.nav-link,
.navbar-custom .nav-link,
.console-nav-link,
.shell-nav-link {
  border-radius: 0 !important;
  color: var(--muted) !important;
  font-weight: 500 !important;
}

.nav-link:hover,
.nav-link.active,
.navbar-custom .nav-link:hover,
.navbar-custom .nav-link.active,
.console-nav-link:hover,
.console-nav-link.active,
.shell-nav-link:hover,
.shell-nav-link.active {
  background: rgba(31, 124, 255, 0.1) !important;
  color: var(--blue) !important;
}

.layout,
.shell,
.console-shell,
.console-layout,
.main,
.console-main,
.content-section {
  background: transparent !important;
}

.sidebar,
.console-sidebar {
  background: var(--paper) !important;
  border-right: 1px solid var(--line) !important;
  box-shadow: none !important;
}

.layout,
.console-layout {
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) !important;
  min-height: 100vh !important;
}

.sidebar,
.console-sidebar {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  left: 0 !important;
  overflow: auto !important;
  padding: 20px 12px !important;
  position: sticky !important;
  top: 0 !important;
}

.main,
.console-main {
  margin: 0 !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: 0 0 48px !important;
}

.topbar,
.console-topbar {
  align-items: center !important;
  background: rgba(5, 7, 13, 0.6) !important;
  backdrop-filter: blur(12px) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line) !important;
  border-radius: 0 !important;
  display: flex !important;
  height: 56px !important;
  justify-content: space-between !important;
  margin: 0 0 32px !important;
  padding: 0 32px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 40 !important;
}

.topbar {
  min-height: 56px !important;
}

.main > :not(.topbar),
.console-main > :not(.console-topbar) {
  margin-left: 32px !important;
  margin-right: 32px !important;
}

.console-topbar > a[target="_blank"] {
  display: none !important;
}

.topbar a,
.console-topbar a {
  border-radius: 0 !important;
  color: rgba(238, 244, 255, 0.72) !important;
  font-weight: 500 !important;
}

.topbar a:hover,
.topbar a.active,
.console-topbar a:hover,
.console-topbar a.active {
  background: rgba(31, 124, 255, 0.1) !important;
  color: var(--blue) !important;
}

.button,
.btn-secondary-action {
  border-radius: 8px !important;
  font-weight: 900 !important;
}

.button.primary,
.btn-secondary-action:hover {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: #fff !important;
}

input,
select,
textarea {
  background: var(--paper-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
}

.nav-title,
.console-nav-title {
  color: #52525b !important;
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
}

.btn,
.btn-main,
.btn-nav,
.btn-primary,
.btn-create,
.primary-btn,
.btn-model,
.topup-btn,
.btn-amount,
.payment-method-card,
.auth-card,
.amount-section,
.balance-card,
.info-item,
.feature-card,
.model-card,
.card,
.cardx,
.hero,
.models-shell,
.modal-content,
.referral-card,
.section-block {
  border-radius: 8px !important;
}

.btn-main,
.btn-nav,
.btn-primary,
.btn-create,
.primary-btn,
.btn-model,
.topup-btn,
.btn-referral-light {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  box-shadow: none !important;
  color: var(--paper) !important;
  font-weight: 600 !important;
  transform: none !important;
}

.btn-main:hover,
.btn-nav:hover,
.btn-primary:hover,
.btn-create:hover,
.primary-btn:hover,
.btn-model:hover,
.topup-btn:hover {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: var(--paper) !important;
}

.topbar,
.console-topbar,
.auth-card,
.models-shell,
.amount-section,
.balance-card,
.user-info-card,
.base-url-section,
.tokens-section,
.side-card,
.section-block,
.cardx,
.metric,
.model-card,
.payment-method-section,
.payment-history-section,
.card {
  background: var(--paper-2) !important;
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}

.hero h1,
.page-header h1,
.page-head h1,
.auth-card h1,
.auth-card h2,
.section-title,
.models-shell h2,
.amount-section h2 {
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
}

.hero,
.balance-card {
  background: var(--paper-2) !important;
  color: var(--ink) !important;
}

.muted,
.hero p,
.page-header p,
.model-desc,
.text-muted {
  color: var(--muted) !important;
}

.balance-value,
.stat-number,
.metric strong,
.price-in,
.info-value,
.package-badge {
  color: var(--blue) !important;
}

.price-out { color: var(--brick) !important; }

.notice,
.status-banner.info,
.payment-method-hint {
  background: rgba(145, 174, 176, 0.14) !important;
  border-color: rgba(145, 174, 176, 0.35) !important;
  color: var(--ink) !important;
}

.btn-amount {
  background: rgba(10, 16, 32, 0.78) !important;
  border: 2px solid var(--line) !important;
  color: var(--ink) !important;
}

.btn-amount:hover,
.btn-amount.active,
.payment-method-card.active {
  background: rgba(31, 124, 255, 0.1) !important;
  border-color: var(--blue) !important;
  color: var(--blue) !important;
}

.payment-method-grid { gap: 10px !important; }

.payment-method-card.disabled { opacity: 0.45 !important; }

.form-control {
  background: rgba(8, 13, 22, 0.76) !important;
  border-color: var(--line) !important;
  border-radius: 8px !important;
  color: var(--ink) !important;
}

.form-control:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(31, 124, 255, 0.14) !important;
}

.tab-switch,
.tabs,
.tab-switch button,
.tab-btn {
  border-radius: 0 !important;
}

.tab-switch button.active,
.tab-btn.active,
.tab-btn:hover {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: #fff !important;
}

.badge-openai,
.badge-claude,
.badge-gemini,
.badge-chinese,
.badge-open,
.badge-image,
.badge-media,
.badge {
  border-radius: 6px !important;
}

#referralWallet,
.referral-section {
  display: block !important;
}

.page-header,
.page-head,
.hero {
  border-bottom: 1px solid var(--line-strong) !important;
  box-shadow: none !important;
}

.page-header,
.page-head {
  margin-bottom: 22px !important;
  padding-bottom: 18px !important;
}

.page-header h1,
.page-head h1 {
  font-size: clamp(34px, 5.4vw, 64px) !important;
  line-height: 0.98 !important;
}

.page-header p,
.page-head .desc {
  color: var(--muted) !important;
  font-size: 15px !important;
  font-weight: 650 !important;
  line-height: 1.65 !important;
  max-width: 620px !important;
}

.hero {
  padding: 0 0 24px !important;
}

.hero h1 {
  font-size: clamp(40px, 6.4vw, 78px) !important;
  line-height: 0.96 !important;
}

.history-table,
table {
  color: var(--ink) !important;
}

th {
  background: rgba(145, 174, 176, 0.12) !important;
  color: rgba(238, 244, 255, 0.72) !important;
}

td {
  border-color: var(--line) !important;
}

@media (max-width: 980px) {
  .nb-shell-mounted {
    padding-left: 0 !important;
  }

  .nb-shell-sidebar {
    display: none !important;
  }

  .nb-shell-topbar {
    padding: 0 16px !important;
  }

  .layout,
  .console-layout {
    display: block !important;
  }

  .sidebar,
  .console-sidebar {
    display: none !important;
  }
}

@media (max-width: 820px) {
  .main,
  .content-section {
    padding: 16px !important;
  }
}

/* Final brand unifier: every legacy page inherits the same compact NBAPI shell. */
body,
main,
.page,
.page-wrap,
.page-shell,
.container,
.containerx,
.content,
.content-section,
.docs-shell,
.docs-main,
.docs-content,
.auth-page,
.verify-page,
.admin-page {
  background: var(--paper) !important;
  color: var(--ink) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
label,
.title,
.section-title,
.page-title {
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
}

p,
li,
small,
.subtitle,
.desc,
.hint,
.text-muted,
.helper,
.footer-tip {
  color: var(--muted) !important;
}

a {
  color: var(--blue) !important;
}

.layout,
.docs-layout,
.console-layout {
  background: var(--paper) !important;
  display: grid !important;
  grid-template-columns: 220px minmax(0, 1fr) !important;
  min-height: 100vh !important;
}

.sidebar,
.docs-sidebar,
.console-sidebar {
  background: var(--paper) !important;
  border-right: 1px solid var(--line) !important;
  box-shadow: none !important;
  width: auto !important;
}

.panel,
.verify-card,
.login-card,
.admin-card,
.config-card,
.editor-card,
.editor-shell,
.key-modal-card,
.doc-card,
.pricing-card,
.step-card,
.integration-card,
.code-card,
.content-card,
.metric-card,
.plan-card,
.token-card,
.modal-content,
.auth-card,
.card,
.cardx,
.side-card,
.stat-card,
.empty-state,
.table-wrap {
  background: var(--paper-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: var(--ink) !important;
}

.key-modal,
.modal,
.modal-backdrop {
  color: var(--ink) !important;
}

.key-modal-card,
.modal-content {
  background: #07111f !important;
  border-color: rgba(31, 124, 255, 0.28) !important;
}

.key-modal-card .hint,
.key-modal-card p,
.modal-content p,
.modal-content .hint,
.modal-content .text-muted {
  color: var(--muted) !important;
}

.full-token,
.base-line,
.code-card,
.copy-checklist {
  background: #030712 !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}

.base-line code,
.full-token code,
.code-card code {
  background: transparent !important;
  color: #8ab4ff !important;
}

.copy-checklist span,
.flow-step span {
  color: var(--muted) !important;
}

.flow-step strong,
.token-item strong,
.mono {
  color: var(--blue) !important;
}

.btn-secondary,
.btn-outline-secondary,
.btn-sm,
button:not(.btn-primary):not(.primary):not(.submit-btn):not(.topup-btn):not(.btn-main):not(.btn-create) {
  background: rgba(10, 14, 26, 0.78) !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

.btn-secondary:hover,
.btn-outline-secondary:hover,
button:not(.btn-primary):not(.primary):not(.submit-btn):not(.topup-btn):not(.btn-main):not(.btn-create):hover {
  background: rgba(31, 124, 255, 0.12) !important;
  border-color: rgba(31, 124, 255, 0.42) !important;
  color: var(--blue) !important;
}

.verify-card,
.login-card,
.auth-card {
  max-width: 460px !important;
}

.verify-card h1 i,
.brand i,
.brand .fa,
.brand .fas {
  color: var(--blue) !important;
}

.submit-btn,
.btn,
button,
.button,
.btn-main,
.btn-primary,
.primary,
.primary-btn,
.compose-btn,
.btn-create,
.btn-model,
.topup-btn,
.btn-referral,
.btn-referral-light {
  border-radius: 8px !important;
  box-shadow: none !important;
  font-weight: 700 !important;
}

.submit-btn,
.btn-primary,
.button.primary,
.primary,
.primary-btn,
.compose-btn,
.btn-create,
.btn-model,
.topup-btn,
.btn-referral,
.btn-referral-light {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: #fff !important;
}

button:not(.btn-primary):not(.primary):not(.submit-btn):not(.topup-btn):not(.btn-main):not(.btn-create),
.btn:not(.btn-primary):not(.btn-main):not(.btn-create) {
  background: transparent !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

input,
select,
textarea,
.code-input {
  background: var(--paper-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: var(--ink) !important;
}

input:focus,
select:focus,
textarea:focus,
.code-input:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(31, 124, 255, 0.16) !important;
  outline: none !important;
}

.status.success,
.success-message {
  background: rgba(214, 247, 76, 0.12) !important;
  border-color: rgba(214, 247, 76, 0.28) !important;
  color: #d6f74c !important;
}

.status.error,
.error-message {
  background: rgba(181, 89, 75, 0.16) !important;
  border-color: rgba(181, 89, 75, 0.35) !important;
  color: #ff9a88 !important;
}

pre,
.code-block,
.terminal,
.terminal-block,
.code-box {
  background: #050507 !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  color: var(--ink) !important;
}

table,
.history-table {
  background: var(--paper-2) !important;
  border-color: var(--line) !important;
}

thead,
th {
  background: #0d0d11 !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
}

tr:hover,
tbody tr:hover {
  background: rgba(31, 124, 255, 0.06) !important;
}

td {
  color: var(--ink) !important;
}

.gjs-one-bg {
  background-color: var(--paper) !important;
}

.gjs-two-color {
  color: var(--ink) !important;
}

.gjs-three-bg {
  background-color: var(--blue) !important;
}

.gjs-four-color,
.gjs-four-color-h:hover {
  color: var(--blue) !important;
}

/* Canonical shell wins over every legacy page shell. */
.nb-shell-mounted .layout,
.nb-shell-mounted .docs-layout,
.nb-shell-mounted .console-layout {
  display: block !important;
  grid-template-columns: none !important;
  min-height: auto !important;
}

.nb-shell-mounted .sidebar:not(.nb-shell-sidebar),
.nb-shell-mounted .docs-sidebar:not(.nb-shell-sidebar),
.nb-shell-mounted .console-sidebar:not(.nb-shell-sidebar),
.nb-shell-mounted .topbar:not(.nb-shell-topbar),
.nb-shell-mounted .docs-topbar:not(.nb-shell-topbar),
.nb-shell-mounted .console-topbar:not(.nb-shell-topbar),
.nb-shell-mounted .mobile-menu,
.nb-shell-mounted .mobile-nav {
  display: none !important;
}

.nb-shell-mounted .main,
.nb-shell-mounted .docs-main,
.nb-shell-mounted .console-main {
  margin: 0 !important;
  max-width: none !important;
  padding: 32px !important;
}

.nb-shell-mounted .main > :not(.topbar),
.nb-shell-mounted .console-main > :not(.console-topbar) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.nb-shell-mounted .page-head,
.nb-shell-mounted .page-header,
.nb-shell-mounted .hero,
.nb-shell-mounted .sub-hero,
.nb-shell-mounted .docs-hero {
  margin-top: 0 !important;
}