:root {
  --sunx-bg: #040403;
  --sunx-surface: rgba(15, 15, 13, .9);
  --sunx-surface-strong: rgba(20, 19, 16, .96);
  --sunx-surface-soft: rgba(30, 27, 20, .72);
  --sunx-line: rgba(226, 188, 91, .22);
  --sunx-line-strong: rgba(241, 202, 105, .48);
  --sunx-gold: #e7c568;
  --sunx-gold-bright: #ffe39a;
  --sunx-text: #f7f4ea;
  --sunx-muted: #9e9a8d;
  --sunx-green: #4fda95;
  --sunx-red: #ff7180;
  --sunx-energy: #a989ff;
  --sunx-cyan: #55d9d0;
  --sunx-shadow: 0 18px 46px rgba(0, 0, 0, .34);
}

html { color-scheme: dark; background: var(--sunx-bg); }

body,
.auth-screen,
.home-page,
.recharge-page,
.sunx-page {
  color: var(--sunx-text);
  background-color: var(--sunx-bg);
  letter-spacing: 0;
}

button,
input,
a { -webkit-tap-highlight-color: transparent; }

button:focus-visible,
input:focus-visible,
a:focus-visible {
  outline: 2px solid var(--sunx-gold);
  outline-offset: 2px;
}

.auth-screen {
  position: relative;
  z-index: 1;
  background: transparent;
}

.auth-card,
.form-card {
  padding: 30px;
  border: 1px solid var(--sunx-line);
  border-radius: 8px;
  background: linear-gradient(150deg, rgba(25, 23, 17, .96), rgba(8, 8, 7, .94));
  box-shadow: var(--sunx-shadow), inset 0 1px rgba(255, 235, 174, .05);
  backdrop-filter: blur(16px);
}

.brand-mark {
  width: 56px;
  height: 56px;
  border: 1px solid rgba(255, 228, 148, .65);
  border-radius: 50%;
  color: #171206;
  background: linear-gradient(145deg, #fff0b2, #c9972d);
  box-shadow: 0 0 26px rgba(229, 188, 82, .22);
}

.auth-screen h1 { color: var(--sunx-gold-bright); font-size: 26px; }
.subtitle { color: var(--sunx-muted); }

.choice-item,
.wallet-link,
.segmented,
.auth-form input,
.security-input,
.security-input input {
  border-color: var(--sunx-line);
  border-radius: 7px;
  background: rgba(8, 8, 7, .8);
}

.choice-item:hover,
.wallet-link:hover { border-color: var(--sunx-line-strong); background: rgba(32, 28, 18, .72); }
.choice-copy small,
.choice-action,
.auth-form label { color: var(--sunx-muted); }
.segmented button.active { color: #181104; background: linear-gradient(135deg, #ffe49a, #c99b39); }

.primary-btn,
.send-code-btn,
.recharge-submit,
.failure-retry,
.purchase-submit,
.withdraw-submit,
.delegate-button {
  border: 1px solid rgba(255, 227, 145, .64);
  border-radius: 7px;
  color: #171104;
  background: linear-gradient(100deg, #b9872d, #f1ce72 48%, #c79433);
  box-shadow: 0 10px 28px rgba(191, 145, 45, .17);
}

.primary-btn:hover,
.recharge-submit:hover,
.purchase-submit:hover,
.withdraw-submit:hover { filter: brightness(1.07); }

.sunx-topbar,
.recharge-topbar,
.home-topbar {
  min-height: 56px;
  border-bottom: 1px solid rgba(226, 188, 91, .11);
}

.sunx-logo-mark,
.home-brand > span {
  color: #171104;
  background: linear-gradient(145deg, #fff0ae, #d0a13c);
  box-shadow: 0 0 18px rgba(231, 197, 104, .22);
}

.sunx-logo,
.home-brand { color: var(--sunx-text); }

.language-trigger {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(226, 188, 91, .18);
  border-radius: 6px;
  color: #d8d2c2;
  background: rgba(10, 10, 9, .58);
}

.language-popover {
  border-color: var(--sunx-line);
  border-radius: 7px;
  background: rgba(15, 14, 11, .98);
  box-shadow: var(--sunx-shadow);
}

.language-popover button.active,
.language-popover button:hover { color: var(--sunx-gold-bright); background: rgba(231, 197, 104, .08); }

.home-hero { min-height: min(680px, calc(100vh - 52px)); }
.hero-kicker,
.home-band header small,
.trade-heading small { color: var(--sunx-gold); }
.hero-copy h1 { color: #fff8e6; text-shadow: 0 10px 42px rgba(0, 0, 0, .8); }
.hero-copy p { color: #bbb5a7; }
.hero-actions .primary { color: #171104; background: linear-gradient(100deg, #c28f31, #f1d37e); }
.hero-actions a:not(.primary) { border-color: var(--sunx-line); background: rgba(8, 8, 7, .62); }

.home-metrics,
.home-band,
.popular,
.home-ecosystem { border-color: rgba(231, 197, 104, .12); }

.home-metrics strong,
.home-band h2,
.popular h2 { color: var(--sunx-text); }

.capability-grid article,
.popular-list article,
.summary-card,
.channel-card,
.recharge-card,
.failure-notice,
.rate-strip,
.conversion-summary,
.benefit-flow,
.purchase-panel,
.password-status,
.asset-card,
.records-panel,
.menu-row,
.security-card,
.withdraw-balance,
.conversion-record {
  border-color: var(--sunx-line);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(24, 22, 17, .94), rgba(10, 10, 9, .92));
  box-shadow: inset 0 1px rgba(255, 234, 168, .035);
}

.message,
.convert-message,
.profile-panel div { border-radius: 7px; }

.capability-grid article:hover,
.popular-list article:hover,
.channel-card:hover,
.menu-row:hover { border-color: var(--sunx-line-strong); }

.trade-marquee {
  border-color: rgba(231, 197, 104, .22);
  color: #d8c99f;
  background: rgba(21, 18, 10, .82);
}

.trade-intro,
.trade-summary,
.channel-list { position: relative; z-index: 1; }
.trade-heading h1,
.recharge-header h1,
.convert-heading h1,
.security-header h1 { color: var(--sunx-text); }

.summary-card > span,
.channel-metrics span,
.recharge-field > span,
.purchase-form label,
.withdraw-field,
.withdraw-balance > span { color: var(--sunx-muted); }

.summary-card strong,
.channel-title strong,
.conversion-summary strong,
.asset-total strong { color: #fff8e8; }

.earning-metric strong,
.reward,
.owned-energy,
.energy-value,
.metric-energy { color: var(--sunx-gold-bright) !important; }

.trade-search,
.recharge-field input,
.purchase-form input,
.withdraw-field > input,
.input-wrap {
  border-color: rgba(231, 197, 104, .24);
  border-radius: 7px;
  color: var(--sunx-text);
  background: rgba(8, 8, 7, .82);
}

.trade-search:focus-within,
.recharge-field input:focus,
.purchase-form input:focus,
.withdraw-field > input:focus,
.input-wrap:focus-within {
  border-color: var(--sunx-gold);
  box-shadow: 0 0 0 3px rgba(231, 197, 104, .1);
}

.convert-tabs,
.withdraw-tabs {
  border-color: var(--sunx-line);
  border-radius: 7px;
  background: rgba(8, 8, 7, .75);
}

.convert-tabs a.active,
.withdraw-tabs a.active {
  color: #171104;
  background: linear-gradient(100deg, #b88830, #efd075);
  box-shadow: none;
}

.profile-avatar { color: #171104; background: linear-gradient(145deg, #ffe39a, #bd8730); }
.record-tabs a.active { color: var(--sunx-gold-bright); }
.record-tabs a.active::after { background: var(--sunx-gold); }
.trx-value,
.record-status.success,
.conversion-record-status { color: var(--sunx-green); }
.record-status.failed { color: var(--sunx-red); }
.record-status.pending { color: var(--sunx-gold-bright); }
.menu-icon,
.chevron { color: #b7a266; }

.security-input > svg { color: #bda762; }
.transaction-password-badge.configured { color: var(--sunx-green); background: rgba(47, 159, 100, .14); }

.currency-choice button { border-radius: 6px; }
.currency-choice button.active { border-color: var(--sunx-line-strong); color: #171104; background: var(--sunx-gold); }
.withdraw-shell { padding-bottom: 24px; }
.withdraw-records { border-color: var(--sunx-line); }
.withdraw-records article { border-color: rgba(231, 197, 104, .12); }

.delegation-confirm-dialog,
.delegation-success-dialog,
.delegation-dialog,
.delegation-wait-dialog,
.harvest-success-dialog {
  border-color: var(--sunx-line-strong);
  border-radius: 8px;
  background: linear-gradient(145deg, #1d1a13, #090908);
  box-shadow: 0 26px 80px rgba(0, 0, 0, .58);
}

.sunx-user-tabbar {
  border-top-color: rgba(231, 197, 104, .2);
  background: rgba(6, 6, 5, .94);
  box-shadow: 0 -14px 36px rgba(0, 0, 0, .34);
}

.sunx-user-tabbar a { color: #827f75; }
.sunx-user-tabbar a.active { color: var(--sunx-gold-bright); }
.sunx-user-tabbar a.active > svg { filter: drop-shadow(0 0 7px rgba(231, 197, 104, .38)); }

@media (max-width: 520px) {
  .auth-screen { padding: 48px 14px 28px; }
  .auth-card,
  .form-card { padding: 24px 18px; }
  .home-topbar,
  .recharge-topbar,
  .sunx-topbar { min-height: 52px; }
  .language-trigger { padding-inline: 8px; }
  .channel-card,
  .recharge-card,
  .security-card { border-radius: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .capability-grid article,
  .popular-list article,
  .channel-card,
  .menu-row,
  .primary-btn { transition: none !important; }
}