/* 3DQARAJ — white / #111 / metallic palette */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  overflow-x: clip;
  background: var(--qaraj-bg, #111111);
  color: var(--qaraj-text, rgba(255, 255, 255, 0.92));
}

.page-wrapper {
  width: 100%;
  max-width: none;
  margin: 0;
  overflow-x: clip;
}

:root {
  --colors--yellow: var(--qaraj-metallic);
  --qaraj-gold: #a8a8ae;
  --qaraj-gold-dark: #6e6e76;
  --qaraj-gold-soft: rgba(168, 168, 174, 0.16);
  --qaraj-gold-glow: rgba(168, 168, 174, 0.22);
  --qaraj-accent: #c8cdd4;
  --qaraj-accent-2: #9aa3ad;
  --qaraj-on-gold: #111111;
  --qaraj-metallic: #c8c8d0;
  --qaraj-metallic-dark: #8a8a94;
  --qaraj-bg: #111111;
  --qaraj-surface: #161616;
  --qaraj-card: #1a1a1a;
  --qaraj-text: rgba(255, 255, 255, 0.92);
  --qaraj-muted: rgba(255, 255, 255, 0.55);
  --qaraj-border: rgba(255, 255, 255, 0.1);
  --qaraj-tag-bg: #2a2a2e;
  --qaraj-tag-text: #e8e8ec;
}

.setrex-scope {
  --colors--yellow: var(--qaraj-metallic);
  --colors--light-yellow: var(--qaraj-tag-bg);
  --colors--light-green: #2a2a2e;
  background-color: var(--qaraj-bg, #111111);
  color: var(--qaraj-text, rgba(255, 255, 255, 0.92));
}

html[data-theme="light"] {
  --qaraj-gold: #6b6b73;
  --qaraj-gold-dark: #4a4a52;
  --qaraj-gold-soft: rgba(107, 107, 115, 0.14);
  --qaraj-gold-glow: rgba(107, 107, 115, 0.18);
  --qaraj-on-gold: #111111;
  --qaraj-metallic: #8a8a94;
  --qaraj-metallic-dark: #5c5c66;
  --qaraj-bg: #f4f4f5;
  --qaraj-surface: #ffffff;
  --qaraj-card: #ffffff;
  --qaraj-text: #111111;
  --qaraj-muted: #5c5c66;
  --qaraj-border: rgba(17, 17, 17, 0.1);
  --qaraj-tag-bg: #e4e4e8;
  --qaraj-tag-text: #111111;
}

html[data-theme="light"] body {
  background: var(--qaraj-bg) !important;
  color: var(--qaraj-text) !important;
}

html[data-theme="light"] .setrex-scope {
  --colors--black: var(--qaraj-bg);
  --colors--white: var(--qaraj-text);
  --colors--grey-color: var(--qaraj-muted);
  --colors--yellow: var(--qaraj-metallic);
  --colors--stroke-white: var(--qaraj-border);
  --colors--white-70: rgba(17, 17, 17, 0.72);
  --colors--black-70: rgba(17, 17, 17, 0.85);
  --colors--light-yellow: var(--qaraj-tag-bg);
  --colors--light-green: var(--qaraj-tag-bg);
  --colors--bg-color: var(--qaraj-bg);
  --colors--card-bg: var(--qaraj-card);
  --colors--cultured-5: rgba(17, 17, 17, 0.04);
  --colors--green-grey: #5c5c66;
  --colors--stroke-black: #111111;
  background-color: var(--qaraj-bg);
  color: var(--qaraj-text);
}

html[data-theme="light"] .setrex-scope h1,
html[data-theme="light"] .setrex-scope h2,
html[data-theme="light"] .setrex-scope h3,
html[data-theme="light"] .setrex-scope h4,
html[data-theme="light"] .setrex-scope h5,
html[data-theme="light"] .setrex-scope h6,
html[data-theme="light"] .setrex-scope .text-style-h1,
html[data-theme="light"] .setrex-scope .h3,
html[data-theme="light"] .setrex-scope .h4,
html[data-theme="light"] .setrex-scope .h5,
html[data-theme="light"] .setrex-scope .h5.name {
  color: var(--qaraj-text) !important;
}

html[data-theme="light"] .setrex-scope a {
  color: var(--qaraj-text);
}

html[data-theme="light"] .setrex-scope .intro-card,
html[data-theme="light"] .setrex-scope .intro-statistics-card,
html[data-theme="light"] .setrex-scope .features-v1-card-01-inner,
html[data-theme="light"] .setrex-scope .features-v1-card-02-inner {
  background: var(--qaraj-card) !important;
  border-color: var(--qaraj-border) !important;
  box-shadow: 0 6px 20px rgba(17, 17, 17, 0.06) !important;
}

html[data-theme="light"] .setrex-scope .intro-card {
  background: var(--qaraj-card) !important;
}

html[data-theme="light"] .setrex-scope .paragraph-02.subtitle,
html[data-theme="light"] .setrex-scope .paragraph-03,
html[data-theme="light"] .setrex-scope .paragraph-02.text-grey,
html[data-theme="light"] .setrex-scope .text-grey,
html[data-theme="light"] .setrex-scope .paragraph-02.tagline,
html[data-theme="light"] .setrex-scope .h5.text-grey {
  color: var(--qaraj-muted) !important;
}

html[data-theme="light"] .setrex-scope .paragraph-02.footer-link {
  color: var(--qaraj-muted);
}

html[data-theme="light"] .setrex-scope .paragraph-02.footer-link:hover {
  color: var(--qaraj-text);
}

html[data-theme="light"] .server-section .heading-wrap h2,
html[data-theme="light"] .server-section .paragraph-02.subtitle {
  color: var(--qaraj-text) !important;
}

html[data-theme="light"] .setrex-scope .intro-statistics-list,
html[data-theme="light"] .setrex-scope .intro-left,
html[data-theme="light"] .setrex-scope .features-v1-card-01,
html[data-theme="light"] .setrex-scope .features-v1-card-02 {
  background: transparent !important;
}

html[data-theme="light"] .setrex-scope .card-outline {
  border-color: var(--qaraj-border) !important;
}

html[data-theme="light"] .setrex-scope .label-wrap,
html[data-theme="light"] .setrex-scope .label-wrap.light-green,
html[data-theme="light"] .setrex-scope .label-wrap.shadow,
html[data-theme="light"] .setrex-scope .round-label-wrap,
html[data-theme="light"] .setrex-scope .round-label-wrap.light-green {
  background: var(--qaraj-tag-bg) !important;
  border-color: var(--qaraj-border) !important;
}

html[data-theme="light"] .setrex-scope .label-wrap .tagline-02,
html[data-theme="light"] .setrex-scope .label-wrap .text-black,
html[data-theme="light"] .setrex-scope .round-label-wrap .tagline-02,
html[data-theme="light"] .setrex-scope .round-label-wrap .text-black {
  color: var(--qaraj-text) !important;
}

html[data-theme="light"] .setrex-scope .copyright-wrap {
  color: var(--qaraj-muted);
}

html[data-theme="light"] .server-card,
html[data-theme="light"] .story-card {
  background: var(--qaraj-card) !important;
  border-color: var(--qaraj-border) !important;
}

html[data-theme="light"] .server-card::after {
  background: linear-gradient(180deg, transparent, rgba(17, 17, 17, 0.04)) !important;
}

html[data-theme="light"] .server-name,
html[data-theme="light"] .server-players {
  color: var(--qaraj-text) !important;
}

html[data-theme="light"] .server-meta,
html[data-theme="light"] .server-status,
html[data-theme="light"] .server-track,
html[data-theme="light"] .server-empty,
html[data-theme="light"] .server-loading {
  color: var(--qaraj-muted) !important;
}

html[data-theme="light"] .live-pill {
  background: var(--qaraj-tag-bg) !important;
  color: var(--qaraj-text) !important;
}

html[data-theme="light"] .page-kicker {
  color: var(--qaraj-metallic-dark);
}

html[data-theme="light"] .legal-page p,
html[data-theme="light"] .legal-page li,
html[data-theme="light"] .page-inner p {
  color: var(--qaraj-muted);
}

html[data-theme="light"] .q-btn-hero,
html[data-theme="light"] .q-btn-hero--sm,
html[data-theme="light"] .nav-button-wrapper .button-01,
html[data-theme="light"] .site-nav-actions .q-btn-hero--sm {
  background: #111111;
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(17, 17, 17, 0.15);
}

html[data-theme="light"] .theme-toggle:not(.shimmer-btn):hover {
  border-color: var(--qaraj-border);
}

html[data-theme="light"] .site-nav--float {
  background: rgba(255, 255, 255, 0.96);
}

html[data-theme="light"] .setrex-scope .support-badge {
  background: var(--qaraj-tag-bg);
  color: var(--qaraj-text);
}

html[data-theme="light"] .setrex-scope section.intro,
html[data-theme="light"] .setrex-scope section.features-v1,
html[data-theme="light"] .setrex-scope section.server-section,
html[data-theme="light"] .setrex-scope section.footer {
  background: var(--qaraj-bg);
}