/*
  Shared public content-page refresh.
  Loaded after legacy inline CSS so these rules can migrate static SEO/legal
  pages without touching page content or structured data.
*/
:root {
  --bg: #050505;
  --bg-elevated: #09090a;
  --bg-card: rgba(255, 255, 255, 0.035);
  --bg-card-solid: #0a0a0b;
  --text: #fafafa;
  --text-secondary: rgba(250, 250, 250, 0.72);
  --text-muted: rgba(250, 250, 250, 0.48);
  --text-dim: rgba(250, 250, 250, 0.32);
  --accent: #5C88B0;
  --accent-glow: rgba(92, 136, 176, 0.28);
  --accent-dim: rgba(92, 136, 176, 0.12);
  --success: #22c55e;
  --warning: #f5a623;
  --cyan: #9fc4e6;
  --line: rgba(255, 255, 255, 0.065);
  --line-accent: rgba(255, 255, 255, 0.13);
  --glass: rgba(255, 255, 255, 0.035);
  --glass-border: rgba(255, 255, 255, 0.09);
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

[data-theme="light"] {
  --bg: #fafafa;
  --bg-elevated: #f0f0f2;
  --bg-card: rgba(255, 255, 255, 0.85);
  --bg-card-solid: #ffffff;
  --text: #18181b;
  --text-secondary: #52525b;
  --text-muted: #71717a;
  --text-dim: #a1a1aa;
  --accent: #4a728f;
  --accent-glow: rgba(74, 114, 143, 0.18);
  --accent-dim: rgba(74, 114, 143, 0.08);
  --line: rgba(0, 0, 0, 0.06);
  --line-accent: rgba(0, 0, 0, 0.1);
  --glass: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(0, 0, 0, 0.08);
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  line-height: 1.65;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.02'/%3E%3C/svg%3E");
}

.bg-gradient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 10%, rgba(255, 255, 255, 0.035), transparent 62%),
    radial-gradient(ellipse 42% 36% at 58% 42%, rgba(92, 136, 176, 0.08), transparent 70%),
    radial-gradient(ellipse 70% 65% at 50% 54%, transparent 0%, rgba(0, 0, 0, 0.68) 100%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.048) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.048) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 64px 64px, 64px 64px, 20px 20px, 20px 20px;
}

[data-theme="light"] .bg-gradient {
  background:
    radial-gradient(ellipse 70% 55% at 50% 10%, rgba(0, 0, 0, 0.035), transparent 62%),
    radial-gradient(ellipse 42% 36% at 58% 42%, rgba(74, 114, 143, 0.08), transparent 70%),
    radial-gradient(ellipse 70% 65% at 50% 54%, transparent 0%, rgba(255, 255, 255, 0.74) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(0, 0, 0, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.018) 1px, transparent 1px),
    linear-gradient(180deg, rgba(0, 0, 0, 0.018) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 64px 64px, 64px 64px, 20px 20px, 20px 20px;
}

body > :not(.bg-gradient):not(script):not(style):not(link) {
  position: relative;
  z-index: 1;
}

.container {
  width: 100%;
  max-width: 1160px !important;
  margin: 0 auto;
  padding: 0 24px;
}

header {
  position: sticky;
  top: 0;
  z-index: 1000;
  margin: 0 0 56px !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid var(--line) !important;
  background: rgba(9, 9, 10, 0.86) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

[data-theme="light"] header {
  background: rgba(250, 250, 250, 0.86) !important;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  color: var(--text) !important;
  font-family: var(--font-display) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-decoration: none;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px !important;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--text-muted) !important;
  font-family: var(--font-body);
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
}

.nav-links a:hover {
  color: var(--text) !important;
  background: rgba(255, 255, 255, 0.045);
}

[data-theme="light"] .nav-links a:hover {
  background: rgba(0, 0, 0, 0.04);
}

.cta-btn,
.tool-link,
.footer-links a,
a {
  text-underline-offset: 3px;
}

.cta-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #050505 !important;
  box-shadow: none !important;
  font-family: var(--font-body);
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease !important;
}

.cta-btn:hover {
  background: rgba(250, 250, 250, 0.88) !important;
  box-shadow: none !important;
  transform: translateY(-1px) !important;
}

[data-theme="light"] .cta-btn {
  background: #18181b !important;
  color: #fff !important;
}

main {
  padding: 0 0 88px !important;
}

article.container,
main > .container {
  max-width: 900px !important;
}

h1,
h2,
h3,
h4 {
  color: var(--text) !important;
  font-family: var(--font-display) !important;
  letter-spacing: 0 !important;
}

h1 {
  max-width: 820px;
  margin: 0 0 24px !important;
  font-size: 52px !important;
  font-weight: 800 !important;
  line-height: 1.02 !important;
}

.subtitle {
  max-width: 760px !important;
  margin-bottom: 34px !important;
  color: var(--text-secondary) !important;
  font-size: 19px !important;
  line-height: 1.65 !important;
}

h2 {
  margin: 56px 0 18px !important;
  padding-top: 28px !important;
  border-top: 1px solid var(--line) !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
}

h2:first-of-type {
  border-top: 0 !important;
  padding-top: 0 !important;
}

h3 {
  font-size: 17px !important;
  line-height: 1.25 !important;
}

p,
li {
  color: var(--text-secondary) !important;
}

p {
  font-size: 16px;
  line-height: 1.75;
}

strong {
  color: var(--text) !important;
  font-weight: 700;
}

ul,
ol {
  color: var(--text-secondary) !important;
}

li {
  margin-bottom: 12px !important;
}

.disclaimer {
  margin: 0 0 34px !important;
  padding: 14px 16px !important;
  border: 1px solid var(--line) !important;
  border-left: 3px solid var(--accent) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  color: var(--text-muted) !important;
  font-size: 12px !important;
  line-height: 1.65 !important;
}

[data-theme="light"] .disclaimer {
  background: rgba(255, 255, 255, 0.8) !important;
}

.highlight,
.tool-link,
.formula,
.example-box,
.chart-section,
.chart-placeholder,
.related-link,
.stat-card,
.faq-item,
.info-card,
.level-card {
  border: 1px solid var(--glass-border) !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 50% 0%, var(--accent-dim), transparent 48%),
    rgba(8, 8, 9, 0.82) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

[data-theme="light"] .highlight,
[data-theme="light"] .tool-link,
[data-theme="light"] .formula,
[data-theme="light"] .example-box,
[data-theme="light"] .stat-card,
[data-theme="light"] .faq-item,
[data-theme="light"] .info-card,
[data-theme="light"] .level-card {
  background:
    radial-gradient(circle at 50% 0%, var(--accent-dim), transparent 48%),
    rgba(255, 255, 255, 0.88) !important;
}

.highlight {
  padding: 26px !important;
  margin: 34px 0 !important;
}

.highlight.warning {
  border-color: rgba(245, 166, 35, 0.35) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(245, 166, 35, 0.12), transparent 48%),
    rgba(8, 8, 9, 0.82) !important;
}

.highlight.warning h3 {
  color: #f8c46c !important;
}

.highlight p:last-child {
  margin-bottom: 0 !important;
}

.highlight a,
p a,
li a {
  color: #9fc4e6 !important;
}

[data-theme="light"] .highlight a,
[data-theme="light"] p a,
[data-theme="light"] li a {
  color: #315f85 !important;
}

.formula {
  padding: 18px 20px !important;
  color: var(--text) !important;
  font-family: var(--font-mono) !important;
  font-size: 14px !important;
  overflow-x: auto;
}

.formula-label,
.example-box .title,
.stat-card .label,
.timestamp {
  color: var(--text-dim) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
}

.tool-link {
  display: flex !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 22px 24px !important;
  margin: 34px 0 !important;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease !important;
}

.tool-link:hover {
  border-color: var(--line-accent) !important;
  transform: translateY(-1px) !important;
}

.tool-link .icon {
  flex: 0 0 auto;
  width: 50px !important;
  height: 50px !important;
  border: 1px solid rgba(92, 136, 176, 0.26) !important;
  border-radius: 8px !important;
  background: rgba(92, 136, 176, 0.12) !important;
  color: #9fc4e6 !important;
}

.tool-link .icon svg {
  stroke: currentColor !important;
}

.tool-link .content h4 {
  color: var(--text) !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.25;
}

.tool-link .content p {
  color: var(--text-muted) !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.stat-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 34px 0 !important;
}

.stat-card {
  padding: 22px 18px !important;
  text-align: left !important;
}

.stat-card .value,
.level-card .value,
.info-card .value {
  color: var(--text) !important;
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.stat-card .value {
  font-size: 26px !important;
}

.page-header {
  margin: 0 0 34px !important;
}

.page-header h1 {
  margin-bottom: 10px !important;
}

.page-header h1 .ticker {
  color: #9fc4e6 !important;
}

.live-badge {
  border-color: rgba(34, 197, 94, 0.32) !important;
  background: rgba(34, 197, 94, 0.1) !important;
  color: var(--success) !important;
  border-radius: 999px !important;
}

.levels-grid,
.info-section,
.related-links {
  gap: 16px !important;
}

.level-card {
  text-align: left !important;
  padding: 22px 18px !important;
}

.level-card .label,
.level-card .desc,
.info-card li .label {
  color: var(--text-muted) !important;
}

.level-card .label {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
}

.level-card .value.gold,
.level-card .value.cyan,
.level-card .value.purple,
.level-card .value.orange {
  color: #9fc4e6 !important;
}

.level-card .value.green {
  color: var(--success) !important;
}

.level-card .value.red {
  color: #f87171 !important;
}

.chart-section {
  padding: 24px !important;
  margin-bottom: 34px !important;
}

.chart-header h2 {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 20px !important;
}

.chart-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px !important;
}

.chart-btn {
  min-height: 36px;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: var(--text-muted) !important;
  text-decoration: none;
}

.chart-btn.active,
.chart-btn:hover {
  border-color: rgba(92, 136, 176, 0.34) !important;
  background: rgba(92, 136, 176, 0.12) !important;
  color: #9fc4e6 !important;
}

.chart-placeholder {
  color: var(--text-muted) !important;
}

.chart-placeholder a {
  color: #9fc4e6 !important;
}

.info-section h3,
.info-card h3,
.related-link h4 {
  color: var(--text) !important;
}

.info-card {
  padding: 24px !important;
}

.info-card ul {
  list-style: none !important;
  padding: 0 !important;
}

.info-card li {
  border-bottom: 1px solid var(--line) !important;
}

.related-link {
  align-items: center !important;
  padding: 18px !important;
  text-decoration: none !important;
  transition: border-color 0.2s ease, transform 0.2s ease !important;
}

.related-link:hover {
  border-color: var(--line-accent) !important;
  transform: translateY(-1px) !important;
}

.related-link .icon {
  border: 1px solid rgba(92, 136, 176, 0.26) !important;
  border-radius: 8px !important;
  background: rgba(92, 136, 176, 0.12) !important;
  color: #9fc4e6 !important;
}

.related-link .icon svg {
  stroke: currentColor !important;
}

.related-link .text p {
  color: var(--text-muted) !important;
}

.example-box {
  padding: 22px !important;
}

.example-box .calc {
  color: var(--text-secondary);
  font-family: var(--font-mono) !important;
}

.example-box .calc .line {
  border-bottom: 1px solid var(--line) !important;
}

.example-box .calc .line:last-child {
  color: #9fc4e6 !important;
}

.faq-section {
  margin: 56px 0 !important;
}

.faq-list {
  margin-top: 18px !important;
}

.faq-item {
  margin-bottom: 10px !important;
  overflow: hidden;
}

.faq-q {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 58px;
  padding: 16px 18px !important;
  background: transparent !important;
  color: var(--text) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

.faq-q:hover {
  background: rgba(255, 255, 255, 0.035) !important;
}

.faq-a {
  padding: 0 18px 18px !important;
  color: var(--text-secondary) !important;
  font-size: 14px !important;
}

.timestamp {
  margin-top: 48px !important;
  padding-top: 22px !important;
  border-top: 1px solid var(--line) !important;
}

footer {
  padding: 32px 0 !important;
  border-top: 1px solid var(--line) !important;
  background: rgba(5, 5, 5, 0.72);
  text-align: center;
}

[data-theme="light"] footer {
  background: rgba(250, 250, 250, 0.72);
}

.footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px !important;
  margin-bottom: 16px !important;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 8px;
  color: var(--text-muted) !important;
  font-size: 13px !important;
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--text) !important;
  background: rgba(255, 255, 255, 0.045);
}

.copyright {
  color: var(--text-dim) !important;
  font-size: 12px !important;
}

@media (max-width: 860px) {
  h1 {
    font-size: 40px !important;
  }

  .nav-links {
    display: none !important;
  }
}

@media (max-width: 640px) {
  .container {
    padding: 0 18px !important;
  }

  header {
    margin-bottom: 40px !important;
  }

  .header-inner {
    gap: 14px;
  }

  .cta-btn {
    min-height: 38px;
    padding: 0 12px !important;
    font-size: 12px !important;
  }

  h1 {
    font-size: 32px !important;
  }

  .subtitle {
    font-size: 17px !important;
  }

  h2 {
    font-size: 24px !important;
  }

  .tool-link {
    align-items: flex-start !important;
    padding: 20px !important;
  }

  .tool-link .icon {
    width: 42px !important;
    height: 42px !important;
  }

  .stat-row {
    grid-template-columns: 1fr !important;
  }
}

/* Legal policy pages */
.legal-page .wrap {
  max-width: 980px !important;
  margin: 32px auto 56px !important;
  padding: 34px !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 8px !important;
  background:
    radial-gradient(ellipse 80% 55% at 50% -20%, rgba(255, 255, 255, 0.035), transparent 62%),
    rgba(9, 9, 10, 0.84) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28) !important;
}

[data-theme="light"] .legal-page .wrap {
  background:
    radial-gradient(ellipse 80% 55% at 50% -20%, rgba(0, 0, 0, 0.035), transparent 62%),
    rgba(255, 255, 255, 0.86) !important;
}

.legal-page h1 {
  margin-bottom: 12px !important;
  font-size: 44px !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
}

.legal-page h2 {
  margin: 34px 0 10px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  color: #9fc4e6 !important;
  font-size: 20px !important;
}

.legal-page h3 {
  color: var(--text) !important;
}

.legal-page p,
.legal-page li {
  color: var(--text-secondary) !important;
  font-size: 15px !important;
}

.legal-page em,
.legal-page strong {
  color: var(--text) !important;
}

.legal-page a {
  color: #9fc4e6 !important;
}

.legal-page nav.toc {
  margin: 24px 0 34px !important;
  padding: 20px 22px !important;
  border: 1px solid var(--line) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.035) !important;
}

.legal-page nav.toc ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
  margin: 0 !important;
  padding-left: 18px !important;
}

.legal-page nav.toc li {
  margin: 0 !important;
}

.legal-page .wrap footer {
  margin-top: 34px !important;
  padding: 22px 0 0 !important;
  border-top: 1px solid var(--line) !important;
  background: transparent !important;
}

.legal-page .theme-toggle-float {
  position: fixed !important;
  right: 24px !important;
  bottom: 24px !important;
  z-index: 99 !important;
  width: auto !important;
}

.legal-page .theme-toggle-float button {
  width: 42px !important;
  height: 42px !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 8px !important;
  background: rgba(9, 9, 10, 0.82) !important;
  color: var(--text-muted) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.32);
}

[data-theme="light"] .legal-page .theme-toggle-float button {
  background: rgba(255, 255, 255, 0.86) !important;
}

/* Referral program pages */
.referral-page,
.referral-welcome-page,
.referral-terms-page {
  font-family: var(--font-body) !important;
}

.referral-page .container {
  max-width: 860px !important;
}

.referral-page nav {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  z-index: 1000;
  padding: 16px 0 !important;
  border-bottom: 1px solid var(--line) !important;
  background: rgba(9, 9, 10, 0.86) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.referral-page .nav-inner,
.referral-page .share-link-row,
.referral-page .my-discount-row {
  gap: 12px !important;
}

.referral-page .logo {
  font-family: var(--font-display) !important;
  letter-spacing: 0 !important;
}

.referral-page .nav-link {
  min-height: 36px;
  padding: 0 12px !important;
  border-radius: 8px !important;
  color: var(--text-muted) !important;
  font-family: var(--font-body) !important;
}

.referral-page .nav-link:hover {
  color: var(--text) !important;
  background: rgba(255, 255, 255, 0.045) !important;
}

.referral-page #authGate,
.referral-page #termsGate,
.referral-page #dashboard {
  position: relative;
  z-index: 1;
}

.referral-page .auth-msg,
.referral-page .ftc-note,
.referral-page .stat-label,
.referral-page .step p,
.referral-page .history-empty,
.referral-page .terms-link,
.referral-page .terms-link a {
  color: var(--text-muted) !important;
}

.referral-page .auth-btn,
.referral-page .accept-btn,
.referral-page .copy-btn {
  min-height: 42px;
  border-radius: 8px !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
}

.referral-page .auth-btn,
.referral-page .accept-btn {
  background: var(--text) !important;
  color: var(--bg) !important;
}

.referral-page .copy-btn,
.referral-page .share-link-input {
  border: 1px solid var(--line) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: var(--text) !important;
}

.referral-page .terms-card,
.referral-page .share-card,
.referral-page .stat-card,
.referral-page .step,
.referral-page .my-discount {
  border: 1px solid var(--glass-border) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  box-shadow: none !important;
}

.referral-page .share-card::before,
.referral-page .my-discount::before {
  right: 22px !important;
  left: 22px !important;
  background: linear-gradient(90deg, transparent, rgba(92, 136, 176, 0.8), transparent) !important;
}

.referral-page .share-label {
  color: var(--text-dim) !important;
  letter-spacing: 1.4px !important;
}

.referral-page .stat-value,
.referral-page .my-discount-amount {
  color: var(--text) !important;
}

.referral-page .step-num,
.referral-page .my-discount-icon {
  border: 1px solid rgba(92, 136, 176, 0.26) !important;
  border-radius: 8px !important;
  background: rgba(92, 136, 176, 0.12) !important;
  color: #9fc4e6 !important;
}

.referral-page .history-table th,
.referral-page .history-table td {
  border-color: var(--line) !important;
}

.referral-welcome-page .card,
.referral-welcome-page .plan-card,
.referral-welcome-page .discount-active {
  border: 1px solid var(--glass-border) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.035) !important;
  box-shadow: none !important;
}

.referral-welcome-page .card {
  max-width: 540px !important;
  padding: 40px 34px !important;
}

.referral-welcome-page .card::before,
.referral-welcome-page .card.confirmed::before {
  right: 22px !important;
  left: 22px !important;
  background: linear-gradient(90deg, transparent, rgba(92, 136, 176, 0.8), transparent) !important;
}

.referral-welcome-page .logo {
  font-family: var(--font-display) !important;
}

.referral-welcome-page h1 {
  font-size: 26px !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
}

.referral-welcome-page .icon,
.referral-welcome-page .icon-default,
.referral-welcome-page .icon-success {
  border: 1px solid rgba(92, 136, 176, 0.26) !important;
  border-radius: 8px !important;
  background: rgba(92, 136, 176, 0.12) !important;
  color: #9fc4e6 !important;
}

.referral-welcome-page .icon svg,
.referral-welcome-page .icon-default svg,
.referral-welcome-page .icon-success svg {
  color: currentColor !important;
}

.referral-welcome-page .btn {
  min-height: 46px;
  border-radius: 8px !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
}

.referral-welcome-page .btn-primary,
.referral-welcome-page .btn-success {
  background: var(--text) !important;
  color: var(--bg) !important;
  box-shadow: none !important;
}

.referral-welcome-page .btn-secondary {
  border: 1px solid var(--line) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: var(--text-muted) !important;
}

.referral-welcome-page .desc,
.referral-welcome-page .note,
.referral-welcome-page .status,
.referral-welcome-page .signin-link {
  color: var(--text-muted) !important;
}

.referral-welcome-page .code-display,
.referral-welcome-page .plan-card {
  border-color: var(--line) !important;
}

.referral-terms-page .container {
  max-width: 760px !important;
  padding: 104px 24px 72px !important;
}

.referral-terms-page h1 {
  font-size: 36px !important;
  line-height: 1.06 !important;
}

.referral-terms-page h2 {
  color: #9fc4e6 !important;
  font-size: 18px !important;
}

.referral-terms-page p,
.referral-terms-page li,
.referral-terms-page .subtitle {
  color: var(--text-secondary) !important;
}

.referral-terms-page .back-link,
.referral-terms-page footer,
.referral-terms-page footer a {
  color: var(--text-muted) !important;
}

.referral-terms-page .highlight {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text) !important;
  font-weight: 600 !important;
}

@media (max-width: 760px) {
  .legal-page .wrap {
    margin: 18px !important;
    padding: 24px !important;
  }

  .legal-page h1 {
    font-size: 32px !important;
  }

  .legal-page nav.toc ul {
    grid-template-columns: 1fr;
  }

  .referral-page .container,
  .referral-terms-page .container {
    padding-right: 18px !important;
    padding-left: 18px !important;
  }

  .referral-page .share-link-row {
    flex-direction: column;
  }

  .referral-page .copy-btn {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .referral-page .nav-inner {
    align-items: flex-start !important;
    flex-direction: column;
  }

  .referral-page nav {
    position: sticky !important;
  }

  .referral-page #authGate,
  .referral-page #termsGate,
  .referral-page #dashboard {
    padding-top: 48px !important;
  }

  .referral-welcome-page {
    align-items: flex-start !important;
    padding: 18px !important;
  }

  .referral-welcome-page .card {
    padding: 32px 22px !important;
  }

  .referral-welcome-page h1 {
    font-size: 23px !important;
  }
}

/* Public support pages */
.docs-page .site-header {
  margin: 0 !important;
  padding: 0 !important;
  background: rgba(9, 9, 10, 0.86) !important;
}

.docs-page .header-inner {
  max-width: 960px !important;
  padding: 16px 24px !important;
}

.docs-page .brand {
  color: var(--text) !important;
}

.docs-page .brand-name {
  letter-spacing: 0 !important;
}

.docs-page .brand-sub,
.docs-page .hero h1 span,
.docs-page .header-nav a:hover,
.docs-page .site-footer a:hover {
  color: #9fc4e6 !important;
}

.docs-page .hero {
  max-width: 960px !important;
  padding: 78px 24px 44px !important;
}

.docs-page .hero h1 {
  margin-bottom: 12px !important;
  color: var(--text) !important;
  font-size: 44px !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
}

.docs-page .hero p,
.docs-page .section p,
.docs-page .site-footer span,
.docs-page .site-footer a,
.docs-page .header-nav a {
  color: var(--text-muted) !important;
}

.docs-page .section {
  max-width: 960px !important;
}

.docs-page .section > div {
  border-radius: 8px !important;
  background: rgba(92, 136, 176, 0.12) !important;
  color: #9fc4e6 !important;
}

.docs-page .site-footer {
  max-width: 960px !important;
  margin: 0 auto !important;
  padding: 32px 24px !important;
  border-top: 1px solid var(--line) !important;
  background: transparent !important;
  text-align: left !important;
}

.docs-page .footer-links {
  margin: 0 !important;
  justify-content: flex-start !important;
}

.changelog-page .wrapper {
  max-width: 760px !important;
  padding: 48px 24px 72px !important;
}

.changelog-page .header {
  margin-bottom: 34px !important;
}

.changelog-page .header a,
.changelog-page .footer a {
  color: var(--text-muted) !important;
}

.changelog-page .header a:hover,
.changelog-page .footer a:hover {
  color: var(--text) !important;
}

.changelog-page h1 {
  margin: 14px 0 0 !important;
  background: none !important;
  -webkit-text-fill-color: var(--text) !important;
  color: var(--text) !important;
  font-size: 44px !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
}

.changelog-page .subtitle,
.changelog-page .entry-date,
.changelog-page .cat li,
.changelog-page .auth-gate-desc,
.changelog-page .footer a {
  color: var(--text-muted) !important;
}

.changelog-page .tabs {
  border-bottom-color: var(--line) !important;
  scrollbar-width: none;
}

.changelog-page .tabs::-webkit-scrollbar {
  display: none;
}

.changelog-page .tab {
  border-radius: 8px 8px 0 0 !important;
  color: var(--text-muted) !important;
}

.changelog-page .tab.active {
  border-bottom-color: var(--accent) !important;
  color: var(--text) !important;
}

.changelog-page .entry,
.changelog-page .auth-gate-card {
  border: 1px solid var(--glass-border) !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 50% 0%, var(--accent-dim), transparent 48%),
    rgba(8, 8, 9, 0.82) !important;
  box-shadow: none !important;
}

.changelog-page .entry-latest,
.changelog-page .entry.highlighted {
  border-color: rgba(92, 136, 176, 0.38) !important;
}

.changelog-page .entry-version,
.changelog-page .auth-gate-title {
  color: var(--text) !important;
}

.changelog-page .badge-latest {
  border-color: rgba(92, 136, 176, 0.26) !important;
  border-radius: 6px !important;
  background: rgba(92, 136, 176, 0.12) !important;
  color: #9fc4e6 !important;
}

.changelog-page .auth-gate-btn {
  min-height: 42px;
  border-color: transparent !important;
  border-radius: 8px !important;
  background: var(--text) !important;
  color: var(--bg) !important;
}

.changelog-page .link-btn,
.changelog-page .copy-entry-btn {
  color: var(--text-muted) !important;
}

.changelog-page .link-btn:hover,
.changelog-page .copy-entry-btn:hover {
  color: var(--text) !important;
}

.changelog-page .cat-icon {
  border-radius: 6px !important;
}

@media (max-width: 640px) {
  .docs-page .hero h1,
  .changelog-page h1 {
    font-size: 32px !important;
  }

  .docs-page .site-footer {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .changelog-page .wrapper {
    padding: 36px 18px 58px !important;
  }
}

/* Error and maintenance pages */
.error-page,
.maintenance-page {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh;
  padding: 24px !important;
  text-align: center;
}

.error-page {
  overflow: hidden !important;
}

.maintenance-page {
  overflow-x: hidden !important;
}

.error-page .bg,
.error-page .grid {
  display: none !important;
}

.error-page .container,
.maintenance-page .container {
  position: relative;
  z-index: 1;
  max-width: 620px !important;
  padding: 24px !important;
}

.error-page .error-code {
  color: #9fc4e6 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 0 80px rgba(92, 136, 176, 0.28) !important;
}

.error-page .error-title,
.maintenance-page h1,
.maintenance-page .logo {
  color: var(--text) !important;
}

.error-page .error-desc,
.error-page .card p,
.maintenance-page p {
  color: var(--text-muted) !important;
}

.error-page .card {
  border: 1px solid var(--glass-border) !important;
  border-radius: 8px !important;
  background:
    radial-gradient(circle at 50% 0%, var(--accent-dim), transparent 48%),
    rgba(8, 8, 9, 0.82) !important;
  box-shadow: none !important;
}

.error-page .card code {
  border: 1px solid rgba(92, 136, 176, 0.24) !important;
  border-radius: 6px !important;
  background: rgba(92, 136, 176, 0.12) !important;
  color: #9fc4e6 !important;
}

.error-page .btn,
.error-page .links a {
  border: 1px solid rgba(92, 136, 176, 0.26) !important;
  border-radius: 8px !important;
  background: rgba(92, 136, 176, 0.12) !important;
  color: #9fc4e6 !important;
  box-shadow: none !important;
}

.error-page .btn:hover,
.error-page .links a:hover {
  border-color: rgba(92, 136, 176, 0.48) !important;
  background: rgba(92, 136, 176, 0.18) !important;
}

.error-page .btn-secondary {
  border-color: var(--line) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: var(--text-muted) !important;
}

.error-page .status-dot,
.maintenance-page .pulse {
  background: #9fc4e6 !important;
}

.error-page .logo,
.maintenance-page .status,
.maintenance-page a {
  color: #9fc4e6 !important;
}

.error-page .logo-text,
.error-page .card-title,
.error-page .contact-title {
  color: #9fc4e6 !important;
}

.error-page .icon-wrap svg {
  stroke: #9fc4e6 !important;
  filter: drop-shadow(0 0 30px rgba(92, 136, 176, 0.28)) !important;
}

.maintenance-page .logo span {
  color: #9fc4e6 !important;
}

.maintenance-page .status {
  border: 1px solid rgba(92, 136, 176, 0.26) !important;
  border-radius: 8px !important;
  background: rgba(92, 136, 176, 0.12) !important;
}

@media (max-width: 560px) {
  .error-page .error-code {
    font-size: 5.5rem !important;
  }

  .error-page .links {
    gap: 10px !important;
  }

  .error-page .btn {
    display: block !important;
    margin: 10px auto 0 !important;
  }
}