/* NODALNOVA brand layer — navy, cyan, white, green, gold */

:root {
  --bg-base: #0a0e1a;
  --bg-card: #0f1629;
  --bg-card-hover: #152038;
  --bg-elevated: #1a2744;
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-medium: rgba(66, 184, 255, 0.16);

  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;

  --navy: #0a0e1a;
  --royal: #1e5af9;
  --cyan: #42b8ff;
  --green: #10b981;
  --green-light: #34d399;
  --green-dim: rgba(16, 185, 129, 0.16);
  --green-glow: rgba(66, 184, 255, 0.28);
  --gold: #d4af37;
  --gold-light: #f0c14b;
  --gold-dim: rgba(212, 175, 55, 0.16);
  --gold-glow: rgba(212, 175, 55, 0.32);

  --purple: var(--royal);
  --purple-bright: var(--cyan);
  --purple-glow: rgba(30, 90, 249, 0.42);
  --blue: var(--royal);
  --blue-glow: rgba(66, 184, 255, 0.45);
  --yellow: var(--gold);
  --orange: #e8a838;
  --orange-dim: var(--gold-dim);

  --gradient-brand: linear-gradient(135deg, var(--royal) 0%, var(--cyan) 52%, var(--green-light) 100%);
  --gradient-cta: linear-gradient(135deg, #163a8a 0%, var(--royal) 42%, var(--cyan) 100%);
  --gradient-gold: linear-gradient(135deg, #9a7b1a, var(--gold), var(--gold-light));
}

.ambient-1 {
  background: radial-gradient(circle, rgba(30, 90, 249, 0.22) 0%, transparent 70%);
}

.ambient-2 {
  background: radial-gradient(circle, rgba(66, 184, 255, 0.12) 0%, transparent 70%);
}

[data-theme="light"] .ambient-1 {
  background: radial-gradient(circle, rgba(30, 90, 249, 0.1) 0%, transparent 70%);
}

[data-theme="light"] .ambient-2 {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, transparent 70%);
}

@media (min-width: 768px) {
  body {
    background:
      radial-gradient(ellipse 80% 60% at 50% -10%, rgba(30, 90, 249, 0.14) 0%, transparent 60%),
      radial-gradient(ellipse 60% 50% at 80% 100%, rgba(66, 184, 255, 0.1) 0%, transparent 50%),
      var(--bg-base);
  }
}

.btn--continue,
.payment-view .btn--continue {
  background: var(--gradient-cta);
  box-shadow: 0 4px 20px var(--blue-glow);
}

.btn--continue:not(:disabled):hover {
  box-shadow: 0 6px 28px rgba(66, 184, 255, 0.45);
}

.action-btn--primary .action-icon {
  background: linear-gradient(145deg, #1e5af9 0%, #42b8ff 55%, #34d399 120%);
  box-shadow:
    0 8px 28px rgba(30, 90, 249, 0.45),
    0 0 22px rgba(66, 184, 255, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.balance-card {
  background: linear-gradient(155deg, #0f1629 0%, #111d35 48%, #0a1228 100%);
  border-color: rgba(66, 184, 255, 0.14);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(30, 90, 249, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.balance-card__watermark {
  color: var(--cyan);
  opacity: 0.14;
}

.gain-pill {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.18), rgba(66, 184, 255, 0.12));
  border-color: rgba(16, 185, 129, 0.28);
  color: var(--green-light);
}

/* Nothing earned yet — the pill stays in place but drops the green. */
.gain-pill--idle {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.22);
  color: var(--text-muted);
}

.change-pill--up {
  color: var(--green-light);
  background: var(--green-dim);
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

/* Brand the balance card's wave decoration and keep it anchored to the
   footer so it does not stretch as the card grows. */
.balance-card__waves {
  height: 58%;
}

.balance-card__waves path {
  fill: rgba(66, 184, 255, 0.05);
}

.balance-card__waves path:nth-child(2) {
  fill: rgba(66, 184, 255, 0.07);
}

.balance-card__waves path:nth-child(3) {
  fill: rgba(66, 184, 255, 0.09);
}

.deposit-pending-banner {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.14), rgba(232, 168, 56, 0.08));
  border-color: rgba(212, 175, 55, 0.35);
}

.page-loader__glow {
  background: radial-gradient(circle, rgba(66, 184, 255, 0.35) 0%, transparent 70%);
}

.page-loader__spinner {
  border-top-color: var(--cyan);
}

.page-loader__dots span {
  background: var(--cyan);
}

.page-loader__dots span:nth-child(2) {
  background: var(--green);
}

.page-loader__dots span:nth-child(3) {
  background: var(--gold);
}

.page-loader__logo img,
.page-loader__logo .nn-mark {
  width: var(--brand-mark-img);
  height: var(--brand-mark-img);
  object-fit: contain;
}

.landing-logo__mark img,
.landing-logo .nn-mark__svg {
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.landing-logo__mark,
.landing-logo .nn-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(30, 90, 249, 0.22), rgba(66, 184, 255, 0.08));
  box-shadow: 0 0 20px rgba(66, 184, 255, 0.25);
}

.landing-logo {
  color: var(--cyan);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.95rem;
}

.auth-logo__mark {
  position: relative;
}

.auth-view--open .auth-logo__mark::after {
  border-color: rgba(66, 184, 255, 0.45);
}

.auth-logo__name {
  color: var(--cyan);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.auth-view {
  --auth-bg: #0a0e1a;
  --auth-gradient: linear-gradient(135deg, #163a8a 0%, var(--royal) 45%, var(--cyan) 100%);
  --auth-gradient-showcase: linear-gradient(145deg, #0a0e1a 0%, #0f2048 40%, #163a8a 72%, #1e5af9 100%);
  --auth-highlight: var(--cyan);
  --auth-accent: var(--cyan);
  --auth-focus-border: rgba(66, 184, 255, 0.75);
  --auth-focus-ring: rgba(66, 184, 255, 0.22);
  --auth-focus-fill: rgba(66, 184, 255, 0.16);
}

.auth-view__grid {
  background-image: radial-gradient(circle at center, rgba(66, 184, 255, 0.12) 1px, transparent 1px);
}

.landing {
  --lp-bg: #f8fafc;
  --lp-bg-soft: #eef6ff;
  --lp-dark: #0a0e1a;
  --lp-dark-2: #0f1629;
  --lp-text: #0f172a;
  --lp-text-muted: #64748b;
  --lp-border: rgba(15, 23, 42, 0.08);
  --lp-green: var(--cyan);
  --lp-green-dark: var(--royal);
  --lp-green-light: #7dd3fc;
  --lp-green-dim: rgba(30, 90, 249, 0.12);
  --lp-green-glow: rgba(66, 184, 255, 0.35);
  --lp-gradient: linear-gradient(135deg, var(--royal) 0%, var(--cyan) 100%);
  --lp-gradient-hero: linear-gradient(135deg, var(--cyan), var(--green-light));
  --lp-gradient-cta: linear-gradient(135deg, #163a8a 0%, var(--royal) 45%, var(--cyan) 100%);
}

.landing-gradient-text--green {
  background: linear-gradient(135deg, var(--royal), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
}

.landing-gradient-text--cyan {
  background: linear-gradient(135deg, var(--cyan), var(--green-light));
  -webkit-background-clip: text;
  background-clip: text;
}

.landing-hero__visual {
  background: transparent;
}

.landing-hero-wallet__label {
  color: var(--cyan);
  letter-spacing: 0.08em;
}

.landing-nav__cta {
  background: var(--lp-gradient-cta);
  box-shadow: 0 8px 24px var(--lp-green-glow);
}

.landing-feature__icon--green,
.landing-feature__icon--blue,
.landing-feature__icon--cyan,
.landing-feature__icon--indigo,
.landing-feature__icon--orange {
  background: rgba(30, 90, 249, 0.12);
  color: var(--royal);
}

.landing-flow__icon--purple,
.landing-flow__icon--blue,
.landing-flow__icon--green {
  background: var(--lp-gradient);
}

.landing-pricing__card--featured {
  border-color: rgba(212, 175, 55, 0.45);
  box-shadow:
    0 16px 40px rgba(30, 90, 249, 0.18),
    0 0 0 2px rgba(212, 175, 55, 0.22);
}

.landing-pricing__badge {
  background: var(--gradient-gold);
  color: #0a0e1a;
}

.bottom-nav {
  background: rgba(10, 14, 26, 0.92);
  border-top-color: rgba(66, 184, 255, 0.1);
}

.nav-icon-wrap {
  background: var(--gradient-brand);
  box-shadow: 0 4px 16px var(--purple-glow);
}

.auth-highlight {
  color: var(--cyan);
}

.menu-item--highlight {
  background: linear-gradient(135deg, rgba(30, 90, 249, 0.14), rgba(66, 184, 255, 0.08));
  border-color: rgba(66, 184, 255, 0.2);
}

.action-btn--send,
.action-btn--receive {
  border-color: rgba(66, 184, 255, 0.12);
}

.stock-card__change--up {
  color: var(--green-light);
}

.topup-card.is-selected,
.payment-option.is-selected {
  border-color: rgba(66, 184, 255, 0.45);
  box-shadow: 0 0 0 1px rgba(30, 90, 249, 0.2);
}

.payment-option.is-selected .payment-option__radio::after {
  background: var(--cyan);
}

.service-card__icon--purple {
  background: linear-gradient(135deg, var(--royal), var(--cyan));
}

.more-promo {
  background: linear-gradient(135deg, rgba(30, 90, 249, 0.12), rgba(66, 184, 255, 0.06));
}

.support-banner {
  border-color: rgba(212, 175, 55, 0.25);
  background: linear-gradient(135deg, rgba(30, 90, 249, 0.1), rgba(212, 175, 55, 0.08));
}

@media (max-width: 767px) {
  .balance-card {
    background: linear-gradient(155deg, #0f1629 0%, #121d35 55%, #0a1228 100%);
    border-color: rgba(66, 184, 255, 0.16);
  }
}

/* ──────────────────────────────────────────────────────────────
   Light theme
   This layer must stay last: the :root block above re-declares the
   dark palette, so light values need equal specificity and a later
   source position to win.
   ────────────────────────────────────────────────────────────── */

[data-theme="light"] {
  --bg-base: #eef2f9;
  --bg-card: #ffffff;
  --bg-card-hover: #f4f7fc;
  --bg-elevated: #e9eef7;
  --border-subtle: rgba(15, 23, 42, 0.08);
  --border-medium: rgba(30, 90, 249, 0.18);

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #7c8ba1;

  --green-dim: rgba(16, 185, 129, 0.12);
  --gold-dim: rgba(212, 175, 55, 0.14);
  --purple-glow: rgba(30, 90, 249, 0.24);
  --blue-glow: rgba(30, 90, 249, 0.28);

  color-scheme: light;
}

[data-theme="light"] body {
  background: var(--bg-base);
}

@media (min-width: 768px) {
  [data-theme="light"] body {
    background:
      radial-gradient(ellipse 80% 60% at 50% -10%, rgba(30, 90, 249, 0.09) 0%, transparent 60%),
      radial-gradient(ellipse 60% 50% at 80% 100%, rgba(16, 185, 129, 0.07) 0%, transparent 50%),
      var(--bg-base);
  }
}

/* Balance card stays brand-forward in light mode, so its contents
   are locked to light-on-dark regardless of the palette. */
[data-theme="light"] .balance-card,
[data-theme="light"] .balance-card:hover {
  background: linear-gradient(150deg, #0d2a6d 0%, #1e5af9 58%, #38a0ea 100%);
  border-color: rgba(30, 90, 249, 0.28);
  box-shadow:
    0 14px 38px rgba(30, 90, 249, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

[data-theme="light"] .balance-card .token-name,
[data-theme="light"] .balance-card .balance-value,
[data-theme="light"] .balance-card .balance-unit,
[data-theme="light"] .balance-card .balance-amount {
  color: #ffffff;
}

[data-theme="light"] .balance-card .token-sub {
  color: rgba(255, 255, 255, 0.72);
}

[data-theme="light"] .balance-card .visibility-btn {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.24);
  color: rgba(255, 255, 255, 0.86);
}

[data-theme="light"] .balance-card .visibility-btn:hover {
  background: rgba(255, 255, 255, 0.26);
  color: #ffffff;
}

[data-theme="light"] .balance-card .change-period {
  color: rgba(255, 255, 255, 0.7);
}

[data-theme="light"] .balance-card .token-icon {
  background: transparent;
  border: none;
  padding: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: none;
  overflow: hidden;
}

[data-theme="light"] .balance-card .token-icon .crypto-icon {
  width: 40px;
  height: 40px;
  background: transparent;
  border-radius: 50%;
}

[data-theme="light"] .balance-card .status-pill,
[data-theme="light"] .balance-card .usd-pill {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

[data-theme="light"] .balance-card .status-dot {
  background: #6ee7b7;
}

[data-theme="light"] .gain-pill {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  color: #d7fbe8;
}

[data-theme="light"] .change-pill,
[data-theme="light"] .change-pill--up,
[data-theme="light"] .change-pill--flat {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  padding: 4px 10px;
  border-radius: var(--radius-full);
}

[data-theme="light"] .balance-card__waves path,
[data-theme="light"] .balance-card__waves path:nth-child(2),
[data-theme="light"] .balance-card__waves path:nth-child(3) {
  fill: rgba(255, 255, 255, 0.06);
}

[data-theme="light"] .balance-card__watermark {
  opacity: 0.1;
}

[data-theme="light"] .yield-strip {
  border-top-color: rgba(255, 255, 255, 0.22);
}

[data-theme="light"] .yield-strip__status,
[data-theme="light"] .yield-strip__hint,
[data-theme="light"] .yield-strip__rate small {
  color: rgba(255, 255, 255, 0.76);
}

[data-theme="light"] .yield-strip__rate {
  color: #ffffff;
}

[data-theme="light"] .yield-strip__pulse {
  background: #6ee7b7;
}

[data-theme="light"] .yield-strip__track {
  background: rgba(6, 26, 74, 0.34);
}

[data-theme="light"] .yield-strip__fill {
  background: linear-gradient(90deg, #6ee7b7, #ffffff);
}

/* App chrome */
[data-theme="light"] .bottom-nav {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(15, 23, 42, 0.08);
  border-top-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .action-btn--send,
[data-theme="light"] .action-btn--receive,
[data-theme="light"] .action-icon {
  border-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .action-btn--primary .action-icon {
  border: 0;
  box-shadow:
    0 8px 28px rgba(30, 90, 249, 0.32),
    0 0 22px rgba(66, 184, 255, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

[data-theme="light"] .action-btn--primary:hover .action-icon {
  filter: none;
  background: linear-gradient(145deg, #2563eb 0%, #38bdf8 55%, #34d399 120%);
  box-shadow:
    0 12px 36px rgba(30, 90, 249, 0.42),
    0 0 28px rgba(66, 184, 255, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="light"] .deposit-pending-banner {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.16), rgba(232, 168, 56, 0.1));
  border-color: rgba(180, 140, 30, 0.32);
  color: #6b5310;
}

[data-theme="light"] .menu-item--highlight {
  background: linear-gradient(135deg, rgba(30, 90, 249, 0.09), rgba(66, 184, 255, 0.05));
  border-color: rgba(30, 90, 249, 0.16);
}

[data-theme="light"] .more-promo {
  background: linear-gradient(135deg, rgba(30, 90, 249, 0.09), rgba(66, 184, 255, 0.05));
}

[data-theme="light"] .support-banner {
  background: linear-gradient(135deg, rgba(30, 90, 249, 0.07), rgba(212, 175, 55, 0.09));
  border-color: rgba(180, 140, 30, 0.28);
}

[data-theme="light"] .tip-card {
  background: linear-gradient(135deg, rgba(30, 90, 249, 0.06) 0%, var(--bg-card) 100%);
  border-color: rgba(30, 90, 249, 0.14);
}

[data-theme="light"] .stock-card,
[data-theme="light"] .service-card,
[data-theme="light"] .cards-empty,
[data-theme="light"] .empty-state,
[data-theme="light"] .help-card,
[data-theme="light"] .notifications-panel {
  box-shadow: 0 2px 14px rgba(15, 23, 42, 0.07);
}

[data-theme="light"] .stock-card__change--up {
  color: #047857;
}

[data-theme="light"] .avail-pill {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

[data-theme="light"] .icon-btn {
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .activity-row,
[data-theme="light"] .activity-summary {
  box-shadow: 0 2px 14px rgba(15, 23, 42, 0.07);
}

/* The dark-mode mint reads too pale on white. */
[data-theme="light"] .activity-row__amount--gain,
[data-theme="light"] .activity-row__amount--deposit,
[data-theme="light"] .activity-summary__value {
  color: #047857;
}

[data-theme="light"] .activity-row__icon--gain {
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
}

[data-theme="light"] .activity-row__icon--deposit {
  background: rgba(30, 90, 249, 0.12);
  color: var(--royal);
}

[data-theme="light"] .activity-row__icon--pending {
  background: rgba(212, 175, 55, 0.18);
  color: #92700f;
}

[data-theme="light"] .activity-row--live .activity-row__icon--gain::after {
  background: #047857;
}

[data-theme="light"] .activity-row__live {
  background: rgba(16, 185, 129, 0.16);
  color: #047857;
}

[data-theme="light"] .gain-pill--idle {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.26);
  color: rgba(255, 255, 255, 0.78);
}