:root {
  --purple: var(--brand-primary);
  --purple-dark: var(--brand-secondary);
  --lime: var(--brand-accent);
  --m-green: var(--brand-primary);
  --m-green-2: var(--brand-secondary);
  --m-purple: var(--brand-accent);
  --brand-rgb: 214, 167, 47;
}

.brand-logo {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: block;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 55%, transparent);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--brand-primary) 24%, transparent);
}

.sidebar-brand .brand-logo { width: 42px; height: 42px; flex-basis: 42px; border-radius: 14px; }
.brand-logo-auth { width: 78px; height: 78px; margin: 0 auto 20px; border-radius: 22px; }

.btn,
.glow-button,
.member-filters a.active,
.desktop-sidebar nav > a.active {
  background: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-primary) 46%, var(--brand-secondary) 100%);
  color: #171006;
  border-color: color-mix(in srgb, var(--brand-primary) 72%, #fff 8%);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--brand-primary) 24%, transparent);
}

.btn:hover,
.glow-button:hover {
  background: linear-gradient(135deg, #fff3bd 0%, var(--brand-primary) 48%, var(--brand-secondary) 100%);
  box-shadow: 0 16px 42px color-mix(in srgb, var(--brand-primary) 34%, transparent);
}

.member-body {
  background-color: #080704;
  background-image:
    radial-gradient(circle at 82% 2%, color-mix(in srgb, var(--brand-primary) 14%, transparent), transparent 27%),
    radial-gradient(circle at 8% 46%, color-mix(in srgb, var(--brand-secondary) 12%, transparent), transparent 31%),
    linear-gradient(145deg, #090806 0%, #0c0a06 48%, #060606 100%);
}

.member-header,
.activity-marquee,
.member-ticker,
.desktop-sidebar {
  background: linear-gradient(145deg, rgba(15, 13, 8, .96), rgba(6, 6, 6, .97));
  border-color: color-mix(in srgb, var(--brand-primary) 18%, #202020);
}

.member-panel,
.premium-offer-card,
.quick-grid a,
.profile-side,
.support-compose,
.support-history,
.cashout-balance {
  background: linear-gradient(145deg, #15120b 0%, #0c0b08 70%, #12100a 100%);
  border-color: color-mix(in srgb, var(--brand-primary) 20%, #24231f);
}

.balance-stage,
.profile-hero,
.wallet-stage,
.promo-banner {
  background:
    radial-gradient(circle at 83% 22%, color-mix(in srgb, var(--brand-primary) 18%, transparent), transparent 31%),
    linear-gradient(125deg, #18140a, #0b0a07 60%, #201608);
  border-color: color-mix(in srgb, var(--brand-primary) 32%, #29251c);
}

.member-kicker,
.section-kicker,
.eyebrow,
.positive-text,
.premium-offer-body strong,
.member-section-head > a span,
.activity-item > strong,
.live-dot + b,
.xpz-trust span {
  color: var(--brand-primary);
}

.coin-dot,
.premium-offer-art i,
.balance-orbit span,
.live-dot,
.progress i {
  background: linear-gradient(135deg, var(--brand-accent), var(--brand-primary), var(--brand-secondary));
  color: #171006;
}

.balance-orbit {
  border-color: color-mix(in srgb, var(--brand-primary) 34%, transparent);
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-primary) 17%, #151008), #090806 68%);
}

.desktop-sidebar nav > a:hover,
.profile-side > a:hover,
.quick-grid a:hover,
.premium-offer-card:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 44%, #2a2924);
  background-color: color-mix(in srgb, var(--brand-primary) 7%, #0d0c09);
}

.announcement {
  background: linear-gradient(90deg, #0b0905, color-mix(in srgb, var(--brand-secondary) 28%, #090806), #0b0905);
  border-bottom: 1px solid color-mix(in srgb, var(--brand-primary) 22%, transparent);
}

.announcement span,
em { color: var(--brand-primary); }

body:not(.member-body) .nav-wrap {
  background: linear-gradient(90deg, rgba(8,7,4,.94), rgba(18,14,7,.93), rgba(8,7,4,.94));
  border-bottom: 1px solid color-mix(in srgb, var(--brand-primary) 24%, transparent);
  box-shadow: 0 14px 45px rgba(0,0,0,.2);
}
body:not(.member-body) .nav { height: 82px; }
body:not(.member-body) .brand { color: #f7f3e9; }
body:not(.member-body) .nav-links { color: #aaa397; }
body:not(.member-body) .nav-links > a:not(.btn) { position: relative; transition: color .2s ease; }
body:not(.member-body) .nav-links > a:not(.btn):hover { color: var(--brand-accent); }
body:not(.member-body) .nav-links > a:not(.btn):after { content:"";position:absolute;left:0;right:100%;bottom:-8px;height:1px;background:var(--brand-primary);transition:right .2s ease; }
body:not(.member-body) .nav-links > a:not(.btn):hover:after { right:0; }
body:not(.member-body) .menu-toggle { color: var(--brand-accent); }

/* Compatibility for the compact legal notice used by older legal templates. */
.legal-page .legal-note,
.prose .legal-note {
  background: #fff6db;
  border-color: #f3d985;
  color: #49390d;
  font-weight: 600;
}
.legal-page .legal-note *,
.prose .legal-note * { color: inherit; }

@media (max-width: 650px) {
  .brand-logo { width: 34px; height: 34px; flex-basis: 34px; border-radius: 11px; }
  .brand-logo-auth { width: 68px; height: 68px; margin-bottom: 16px; }
}
