/* ========================================================================== 
   TwilightRun Unified Visual Shell 4.2.01
   Scope: visual shell only. This file does not rewrite Joomla rows/columns.
   Goals:
   - Keep template structural grid intact.
   - Use one flattened gray TRU surface with one gold left trim per shell.
   - Flatten nested containers so gold trims do not accumulate.
   - Normalize front-page modules, article sections, artwork/journal grids,
     user/commerce contrast, footer menu/social modules.
   ========================================================================== */

:root {
  --tru-bg: #02060b;
  --tru-surface: #101826;
  --tru-surface-2: #151d29;
  --tru-surface-3: #070d15;
  --tru-card: #0b1420;
  --tru-card-2: #111b2a;
  --tru-line: rgba(119, 232, 255, .22);
  --tru-line-soft: rgba(119, 232, 255, .13);
  --tru-gold: #f1d768;
  --tru-gold-2: #c7a642;
  --tru-gold-soft: rgba(241, 215, 104, .42);
  --tru-cyan: #77e8ff;
  --tru-cyan-2: #9ff4ff;
  --tru-text: #edf5ff;
  --tru-muted: #cbd6e6;
  --tru-faint: #94a8ba;
  --tru-light-surface: #f7f8fb;
  --tru-light-text: #101827;
  --tru-radius: 16px;
  --tru-radius-sm: 10px;
  --tru-shadow: 0 22px 52px rgba(0, 0, 0, .42);
  --tru-shadow-soft: 0 14px 34px rgba(0, 0, 0, .26);
  --tru-font-head: Orbitron, "Bank Gothic", Eurostile, Montserrat, Arial, sans-serif;
  --tru-font-body: Montserrat, Arial, sans-serif;
  --tru-shell-bg:
    radial-gradient(circle at 16% 0%, rgba(119, 232, 255, .08), transparent 35%),
    linear-gradient(135deg, rgba(28, 36, 48, .96), rgba(7, 11, 18, .98));
}

html body.tru-vs {
  overflow-x: hidden;
  background: var(--tru-bg);
}

html body.tru-vs *,
html body.tru-vs *::before,
html body.tru-vs *::after {
  box-sizing: border-box;
}

/* ========================================================================== 
   HEADER VISUAL STABILITY
   Keep the existing template row system. Only prevent visual growth and keep
   the account dropdown from occupying header height.
   ========================================================================== */

body.tru-vs #un-header,
body.tru-vs .unx-row-header {
  min-height: 72px !important;
  max-height: 132px !important;
  height: auto !important;
  overflow: visible !important;
  background-attachment: scroll, scroll !important;
  background-size: cover !important;
  background-position: center center !important;
  isolation: isolate;
}

body.tru-vs #un-header .un-row,
body.tru-vs #un-header .unx-grid-row,
body.tru-vs #un-header .unx-span-grid {
  align-items: center !important;
  min-height: 72px !important;
  max-height: 132px !important;
}

body.tru-vs #un-header :is(.logo-image, img.logo-image, .logo img) {
  max-height: 86px !important;
  width: auto !important;
  object-fit: contain !important;
}

body.tru-vs #un-header :is(.un-menu-root, .un-header-tools, .un-native-header-tools, .un-header-user-cart-group) {
  align-items: center !important;
  min-width: 0;
}

body.tru-vs #un-header .un-menu-root > .un-menu-item > a {
  white-space: nowrap !important;
}

body.tru-vs #un-header .uc-header-search-input,
body.tru-vs #un-header input[type="search"] {
  max-width: 220px;
}

body.tru-vs #un-header [data-uc-profile-menu],
body.tru-vs #un-header .un-profile-menu {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
}

body.tru-vs #un-header :is(.un-profile-dropdown, [data-uc-profile-menu-panel]) {
  display: none !important;
  position: absolute !important;
  top: calc(100% + 8px) !important;
  right: 0 !important;
  z-index: 10050 !important;
  min-width: 180px !important;
  max-width: min(280px, 90vw) !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  list-style: none !important;
  border: 1px solid var(--tru-line) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(12, 22, 35, .98), rgba(4, 8, 14, .98)) !important;
  box-shadow: var(--tru-shadow-soft) !important;
}

body.tru-vs #un-header :is([data-uc-profile-menu].is-open, .un-profile-menu.is-open, [data-uc-profile-menu]:hover, [data-uc-profile-menu]:focus-within, .un-profile-menu:hover, .un-profile-menu:focus-within) > :is(.un-profile-dropdown, [data-uc-profile-menu-panel]) {
  display: block !important;
}

body.tru-vs #un-header .un-profile-dropdown :is(a, button) {
  display: block !important;
  width: 100% !important;
  padding: 6px 8px !important;
  text-align: left !important;
  color: var(--tru-cyan) !important;
  -webkit-text-fill-color: var(--tru-cyan) !important;
  background: transparent !important;
  border: 0 !important;
  text-decoration: none !important;
}

body.tru-vs #un-header .un-profile-dropdown :is(a:hover, button:hover) {
  color: var(--tru-gold) !important;
  -webkit-text-fill-color: var(--tru-gold) !important;
}

@media (max-width: 1024px) {
  body.tru-vs #un-header,
  body.tru-vs .unx-row-header,
  body.tru-vs #un-header .un-row,
  body.tru-vs #un-header .unx-grid-row,
  body.tru-vs #un-header .unx-span-grid {
    max-height: none !important;
  }
}

/* ========================================================================== 
   STRUCTURAL SAFETY
   Never change Joomla .row/.container/.col layout globally. Only allow known
   TRU custom content grids to become grids.
   ========================================================================== */

body.tru-vs :is(#un-main, #un-main .un-container, #un-main .un-container-inner, #un-main .un-row, #un-component, #un-right) {
  min-width: 0;
}

/* ========================================================================== 
   UNIVERSAL VISUAL SHELLS
   Outer wrappers establish width/spacing. Visual surface is applied to either
   the inner .tru-surface or to known single-wrapper legacy modules.
   ========================================================================== */

body.tru-vs :is(
  .tru-section,
  .tru-content-shell,
  .tru-branches-humanity,
  .fast-latest-row,
  .intro-block.section-grid,
  .tru-storefront-band,
  .worlds-edge,
  .hypercorps.section-hex,
  .military-ships,
  .journal-inner,
  .artwork-volume-shell,
  .journal-volume-shell,
  .tru-membership-page,
  #tru-insights-tech-stack,
  .tru-guide,
  .stellar-guide,
  .responsive-section.custom1.tech-section,
  .tru-universe-glance
) {
  clear: both;
  width: min(1180px, calc(100% - 32px));
  max-width: 1180px;
  margin: clamp(28px, 4vw, 60px) auto;
  color: var(--tru-text);
}

/* When a section has .tru-surface, the section is only a spacer. The inner
   surface carries the one allowed gold trim. */
body.tru-vs :is(.tru-section, .tru-content-shell):has(> .tru-surface) {
  padding: 0 !important;
  border: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.tru-vs :is(
  .tru-surface,
  .fast-latest-row > .section-grid,
  .intro-block.section-grid,
  .tru-storefront-band,
  .worlds-inner,
  .hypercorps.section-hex,
  .military-ships,
  .journal-inner,
  .artwork-volume-shell,
  .journal-volume-shell,
  .tru-membership-page,
  #tru-insights-tech-stack,
  .tru-guide,
  .stellar-guide,
  .responsive-section.custom1.tech-section,
  .tru-universe-glance
) {
  position: relative;
  padding: clamp(24px, 4vw, 46px) !important;
  border: 1px solid var(--tru-line-soft) !important;
  border-left: 4px solid var(--tru-gold) !important;
  border-radius: var(--tru-radius) !important;
  background: var(--tru-shell-bg) !important;
  color: var(--tru-text) !important;
  box-shadow: var(--tru-shadow) !important;
  overflow: hidden;
}

/* Suppress old large scenic backgrounds on content modules that should be
   flat gray tech surfaces. */
body.tru-vs :is(
  .tru-universe-glance,
  .tru-universe-glance .tru-row,
  .fast-latest-row,
  .fast-latest-row > .section-grid,
  .tru-branches-humanity,
  .tru-branches-humanity .tru-surface,
  .tru-starmap-band,
  .tru-starmap-band .tru-surface,
  .journal-inner,
  .worlds-edge,
  .worlds-inner,
  .tru-storefront-band
)::before,
body.tru-vs :is(
  .tru-universe-glance,
  .tru-universe-glance .tru-row,
  .fast-latest-row,
  .fast-latest-row > .section-grid,
  .tru-branches-humanity,
  .tru-branches-humanity .tru-surface,
  .tru-starmap-band,
  .tru-starmap-band .tru-surface,
  .journal-inner,
  .worlds-edge,
  .worlds-inner,
  .tru-storefront-band
)::after {
  content: none !important;
  display: none !important;
}

body.tru-vs .tru-universe-glance .tru-row,
body.tru-vs .tru-universe-glance .tru-section-header,
body.tru-vs :is(.tru-surface, .responsive-section.custom1.tech-section, .tru-guide, .journal-volume-shell, .artwork-volume-shell, #tru-insights-tech-stack, .tru-universe-glance) :is(.container, .container-inner, .sp-column, .sp-module, .sp-module-content, .mod-custom) {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-left: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* If Joomla exposes an article-body wrapper, make that wrapper the single
   article shell and flatten all internal repeated section wrappers. */
@supports selector(:has(*)) {
  body.tru-vs.tru-route-content :is(.com-content-article__body, .item-page, .com-content-article, .article, .articleBody, [itemprop="articleBody"]):has(.responsive-section.custom1.tech-section, .tru-guide, .journal-volume-shell, .artwork-volume-shell, #tru-insights-tech-stack) {
    width: min(1180px, calc(100% - 32px));
    max-width: 1180px;
    margin: clamp(28px, 4vw, 60px) auto;
    padding: clamp(24px, 4vw, 46px) !important;
    border: 1px solid var(--tru-line-soft) !important;
    border-left: 4px solid var(--tru-gold) !important;
    border-radius: var(--tru-radius) !important;
    background: var(--tru-shell-bg) !important;
    color: var(--tru-text) !important;
    box-shadow: var(--tru-shadow) !important;
    overflow: hidden;
  }

  body.tru-vs.tru-route-content :is(.com-content-article__body, .item-page, .com-content-article, .article, .articleBody, [itemprop="articleBody"]):has(.responsive-section.custom1.tech-section, .tru-guide, .journal-volume-shell, .artwork-volume-shell, #tru-insights-tech-stack) :is(.responsive-section.custom1.tech-section, .tru-guide, .journal-volume-shell, .artwork-volume-shell, #tru-insights-tech-stack) {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 clamp(20px, 3vw, 34px) !important;
    padding: 0 !important;
    border: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  body.tru-vs.tru-route-content :is(.com-content-article__body, .item-page, .com-content-article, .article, .articleBody, [itemprop="articleBody"]):has(.responsive-section.custom1.tech-section, .tru-guide, .journal-volume-shell, .artwork-volume-shell, #tru-insights-tech-stack) :is(.responsive-section.custom1.tech-section, .tru-guide, .journal-volume-shell, .artwork-volume-shell, #tru-insights-tech-stack):last-child {
    margin-bottom: 0 !important;
  }
}

/* Fallback for browsers/contexts without :has: first section gets gold trim,
   repeated sibling sections are flattened to avoid multiple gold strips. */
body.tru-vs .responsive-section.custom1.tech-section ~ .responsive-section.custom1.tech-section,
body.tru-vs .journal-volume-shell .responsive-section.custom1.tech-section,
body.tru-vs .artwork-volume-shell .responsive-section.custom1.tech-section {
  border-left: 1px solid var(--tru-line-soft) !important;
  box-shadow: none !important;
}

body.tru-vs :is(.tru-surface, .responsive-section.custom1.tech-section, .tru-guide, .journal-volume-shell, .artwork-volume-shell, #tru-insights-tech-stack, .tru-universe-glance) > :first-child {
  margin-top: 0 !important;
}
body.tru-vs :is(.tru-surface, .responsive-section.custom1.tech-section, .tru-guide, .journal-volume-shell, .artwork-volume-shell, #tru-insights-tech-stack, .tru-universe-glance) > :last-child {
  margin-bottom: 0 !important;
}

/* ========================================================================== 
   TYPOGRAPHY + CONTRAST
   ========================================================================== */

body.tru-vs :is(.tru-section, .tru-content-shell, .responsive-section.custom1.tech-section, .tru-guide, .journal-volume-shell, .artwork-volume-shell, #tru-insights-tech-stack, .tru-storefront-band, .fast-latest-row, .worlds-edge, .journal-inner, .tru-universe-glance) :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--tru-font-head) !important;
  letter-spacing: .05em;
  line-height: 1.16;
  text-transform: uppercase;
}

body.tru-vs :is(.tru-section, .tru-content-shell, .responsive-section.custom1.tech-section, .tru-guide, .journal-volume-shell, .artwork-volume-shell, #tru-insights-tech-stack, .tru-storefront-band, .fast-latest-row, .worlds-edge, .journal-inner, .tru-universe-glance) :is(h1, h2) {
  color: var(--tru-gold) !important;
  -webkit-text-fill-color: var(--tru-gold) !important;
  text-shadow: 0 0 14px rgba(241, 215, 104, .18);
  margin: 0 0 1rem;
}

body.tru-vs :is(.tru-section, .tru-content-shell, .responsive-section.custom1.tech-section, .tru-guide, .journal-volume-shell, .artwork-volume-shell, #tru-insights-tech-stack, .tru-storefront-band, .fast-latest-row, .worlds-edge, .journal-inner, .tru-universe-glance) :is(h3, h4, h5, h6) {
  color: var(--tru-cyan) !important;
  -webkit-text-fill-color: var(--tru-cyan) !important;
}

body.tru-vs :is(.tru-section, .tru-content-shell, .responsive-section.custom1.tech-section, .tru-guide, .journal-volume-shell, .artwork-volume-shell, #tru-insights-tech-stack, .tru-storefront-band, .fast-latest-row, .worlds-edge, .journal-inner, .tru-universe-glance) :is(p, li, td, th, label, span, dd, dt) {
  color: var(--tru-muted) !important;
  -webkit-text-fill-color: var(--tru-muted) !important;
  font-family: var(--tru-font-body) !important;
  line-height: 1.65;
}

body.tru-vs :is(.tru-section, .tru-content-shell, .responsive-section.custom1.tech-section, .tru-guide, .journal-volume-shell, .artwork-volume-shell, #tru-insights-tech-stack, .tru-storefront-band, .fast-latest-row, .worlds-edge, .journal-inner, .tru-universe-glance) a {
  color: var(--tru-cyan) !important;
  -webkit-text-fill-color: var(--tru-cyan) !important;
  text-decoration: none;
}

body.tru-vs :is(.tru-section, .tru-content-shell, .responsive-section.custom1.tech-section, .tru-guide, .journal-volume-shell, .artwork-volume-shell, #tru-insights-tech-stack, .tru-universe-glance) a:hover {
  color: var(--tru-gold) !important;
  -webkit-text-fill-color: var(--tru-gold) !important;
}

body.tru-vs :is(.tru-section, .tru-content-shell, .responsive-section.custom1.tech-section, .tru-guide, .journal-volume-shell, .artwork-volume-shell, #tru-insights-tech-stack, .tru-universe-glance) img {
  max-width: 100%;
  height: auto;
}

/* ========================================================================== 
   KNOWN CONTENT GRIDS AND CARDS
   ========================================================================== */

body.tru-vs :is(.tru-card-grid, .tru-glance-grid, .tracks-grid, .guide-grid, .journal-grid, .artwork-grid, .tru-membership-grid, .tru-upgrade-grid, .feature-grid, .feature-grid-2, .feature-grid-3, .hex-guides-row) {
  display: grid !important;
  gap: clamp(18px, 2.5vw, 30px) !important;
  width: 100% !important;
  margin: clamp(22px, 3vw, 34px) 0 0 !important;
}

body.tru-vs .tru-card-grid-four,
body.tru-vs .tru-glance-grid,
body.tru-vs .hex-guides-row {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

body.tru-vs :is(.tracks-grid, .guide-grid, .journal-grid, .artwork-grid, .tru-membership-grid, .feature-grid-3) {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.tru-vs :is(.feature-grid-2, .tru-upgrade-grid) {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

body.tru-vs .hypercorps.section-hex > .row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(18px, 2.5vw, 30px) !important;
  margin: 0 !important;
}

body.tru-vs :is(.tru-card, .branch-card, .glance-card, .track-item, .guide-card, .journal-card, .artwork-card, .corp-card, .military-card, .world-card, .stellar-card, .feature-card, .tru-insight-card, .tru-plan-card, .hex-card, .news-card) {
  min-width: 0;
  padding: clamp(18px, 2.4vw, 26px) !important;
  border: 1px solid var(--tru-line-soft) !important;
  border-left: 1px solid var(--tru-line-soft) !important;
  border-radius: var(--tru-radius-sm) !important;
  background: linear-gradient(180deg, rgba(14, 24, 37, .96), rgba(7, 12, 20, .97)) !important;
  color: var(--tru-text) !important;
  box-shadow: var(--tru-shadow-soft) !important;
  overflow: hidden;
}

body.tru-vs :is(.tru-card, .branch-card, .glance-card, .track-item, .guide-card, .journal-card, .artwork-card, .corp-card, .military-card, .world-card, .stellar-card, .feature-card, .tru-insight-card, .tru-plan-card, .hex-card, .news-card) :is(h3, h4, h5, h6, a) {
  overflow-wrap: anywhere;
}

body.tru-vs :is(.tru-card, .branch-card, .glance-card, .track-item, .guide-card, .journal-card, .artwork-card, .corp-card, .military-card, .world-card, .stellar-card, .feature-card, .tru-plan-card, .hex-card) img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto clamp(12px, 2vw, 18px);
  border-radius: 8px;
}

body.tru-vs :is(.glance-icon, .corp-logo) img,
body.tru-vs .stellar-card > img,
body.tru-vs .track-item > img.float-none,
body.tru-vs .world-card img.float-none,
body.tru-vs .hex-card > img {
  width: min(96px, 46%) !important;
  max-width: 120px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.tru-vs :is(.artwork-card, .journal-card, .hex-card, .glance-card) {
  text-align: center;
}

body.tru-vs :is(.artwork-card, .journal-card) img {
  width: 100%;
  max-width: 430px;
  border: 1px solid rgba(255, 255, 255, .08);
}

body.tru-vs :is(.guide-card, .military-card) img {
  width: 100%;
  max-height: 360px;
  object-fit: cover;
}

body.tru-vs :is(.tru-feature-row, .intro-split, .tru-starmap-inner, .tru-starmap-band .tru-feature-row) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .95fr) !important;
  gap: clamp(22px, 4vw, 46px) !important;
  align-items: center !important;
}

body.tru-vs .tru-intro-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(160px, .55fr)) !important;
  gap: clamp(22px, 4vw, 46px) !important;
  align-items: center !important;
}

body.tru-vs .intro-gallery {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

body.tru-vs :is(.intro-gallery img, .tru-media-card img, .tru-feature-media img, .tru-starmap-visual img, .journal-img img) {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--tru-radius-sm);
  border: 1px solid var(--tru-line-soft);
  box-shadow: var(--tru-shadow-soft);
}

body.tru-vs :is(.tru-section-header, .guide-band-header, .branches-header) {
  margin-bottom: clamp(20px, 3vw, 34px) !important;
}

body.tru-vs :is(.tru-section-header p, .branches-header p, .section-subtext, .tru-intro) {
  max-width: 78ch;
}

/* Insights page: full-width stacked rows, never skinny columns. */
body.tru-vs #tru-insights-tech-stack .tru-insight-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  width: 100% !important;
  margin-top: clamp(20px, 3vw, 32px) !important;
}

body.tru-vs #tru-insights-tech-stack .tru-insight-card {
  width: 100% !important;
  display: block !important;
  padding: clamp(18px, 2.5vw, 26px) !important;
}

body.tru-vs #tru-insights-tech-stack .tru-insight-card p {
  max-width: 90ch;
}

/* Guide index/list pages. Keep structure readable, not skinny. */
body.tru-vs :is(.tru-guide, .stellar-guide) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(16px, 2vw, 24px) !important;
}

body.tru-vs :is(.tru-guide, .stellar-guide) > :is(h1, h2, p, .tru-summary, .tru-intro) {
  grid-column: 1 / -1;
}

body.tru-vs :is(.tru-guide, .stellar-guide) > .tru-col.hero {
  grid-column: span 1;
}

body.tru-vs :is(.tru-guide, .stellar-guide) > .tru-col {
  min-width: 0;
}

body.tru-vs .tru-guide .tru-links {
  display: grid;
  gap: 16px;
}

body.tru-vs .tru-guide .tru-card {
  display: grid;
  grid-template-columns: minmax(64px, 96px) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

body.tru-vs .tru-guide .tru-card img {
  margin: 0;
  width: 80px !important;
  max-width: 80px !important;
}

/* Storefront and product cards. */
body.tru-vs .tru-storefront-band .guide-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

body.tru-vs :is(.tru-storefront-band .guide-card h2 a, .guide-card h2 a) {
  color: var(--tru-gold) !important;
  -webkit-text-fill-color: var(--tru-gold) !important;
}

/* ========================================================================== 
   BUTTONS AND NAV PILLS
   ========================================================================== */

body.tru-vs :is(.tru-button, .tru-link-button, .tru-starmap-btn, .action, .btn-accent, .btn-primary, .journal-link, .artwork-link, .tru-plan-cta, button, .button, .btn) {
  max-width: 100%;
}

body.tru-vs :is(.tru-button, .tru-link-button, .tru-starmap-btn, .action, .btn-accent, .tru-plan-cta) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 40px;
  padding: .7rem 1.05rem !important;
  border: 1px solid rgba(255, 231, 132, .48) !important;
  border-radius: 9px !important;
  background: linear-gradient(180deg, #fff49a 0%, #f0cf56 52%, #c9a63a 100%) !important;
  color: #061018 !important;
  -webkit-text-fill-color: #061018 !important;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .36);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 8px 20px rgba(0, 0, 0, .28);
}

body.tru-vs :is(.journal-link, .artwork-link, .btn-primary) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .58rem .9rem !important;
  border: 1px solid var(--tru-line) !important;
  border-radius: 8px !important;
  background: rgba(9, 18, 29, .82) !important;
  color: var(--tru-cyan) !important;
  -webkit-text-fill-color: var(--tru-cyan) !important;
  text-decoration: none;
}

body.tru-vs :is(.journal-link.is-current, .artwork-link.is-current) {
  color: var(--tru-gold) !important;
  -webkit-text-fill-color: var(--tru-gold) !important;
  border-color: var(--tru-gold-soft) !important;
  pointer-events: none;
}

body.tru-vs :is(.journal-volumes, .artwork-volumes) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 0 clamp(20px, 3vw, 30px) !important;
  padding: 12px !important;
  border: 1px solid var(--tru-line-soft) !important;
  border-left: 0 !important;
  border-radius: var(--tru-radius-sm) !important;
  background: rgba(4, 10, 18, .42) !important;
}

body.tru-vs :is(.journal-volumes-label, .artwork-volumes-label) {
  color: var(--tru-gold) !important;
  -webkit-text-fill-color: var(--tru-gold) !important;
  font-family: var(--tru-font-head) !important;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* ========================================================================== 
   USER AND COMMERCE LIGHT SURFACES
   Keep contrast correct without applying dark article shells.
   ========================================================================== */

body.tru-vs.tru-route-user #un-component,
body.tru-vs.tru-route-commerce #un-component {
  color: var(--tru-light-text);
}

body.tru-vs.tru-route-user #un-component :is(h1,h2,h3,h4,h5,h6,label,p,li,td,th,span,legend,dd,dt),
body.tru-vs.tru-route-commerce #un-component :is(h1,h2,h3,h4,h5,h6,label,p,li,td,th,span,legend,dd,dt) {
  color: var(--tru-light-text) !important;
  -webkit-text-fill-color: var(--tru-light-text) !important;
}

body.tru-vs.tru-route-user #un-component :is(input, select, textarea),
body.tru-vs.tru-route-commerce #un-component :is(input, select, textarea) {
  background: #ffffff !important;
  color: #101827 !important;
  -webkit-text-fill-color: #101827 !important;
  border: 1px solid #cfd7e2 !important;
  border-radius: 8px !important;
}

body.tru-vs.tru-route-user #un-component thead :is(th, td),
body.tru-vs.tru-route-commerce #un-component thead :is(th, td),
body.tru-vs.tru-route-user #un-component :is(.table-dark, .cart-row-dark),
body.tru-vs.tru-route-commerce #un-component :is(.table-dark, .cart-row-dark) {
  background: #121a28 !important;
  color: #eef6ff !important;
  -webkit-text-fill-color: #eef6ff !important;
}

body.tru-vs #un-right :is(.sp-module, .moduletable, .module, .un-module) {
  border: 1px solid var(--tru-line-soft) !important;
  border-left: 0 !important;
  border-radius: var(--tru-radius) !important;
  background: linear-gradient(180deg, rgba(13, 24, 39, .96), rgba(5, 10, 18, .98)) !important;
  color: var(--tru-text) !important;
  box-shadow: var(--tru-shadow-soft) !important;
}

body.tru-vs #un-right :is(h1,h2,h3,h4,h5,h6,a,p,li,span) {
  color: var(--tru-text) !important;
  -webkit-text-fill-color: var(--tru-text) !important;
}

body.tru-vs #un-right a {
  color: var(--tru-cyan) !important;
  -webkit-text-fill-color: var(--tru-cyan) !important;
}

/* ========================================================================== 
   FOOTER MENU + SOCIAL MODULES
   Professional, no oval links, no repeated gold strips in footer.
   ========================================================================== */

body.tru-vs #un-footer1 :is(.mod-menu, .menu),
body.tru-vs [data-position="footer1"] :is(.mod-menu, .menu),
body.tru-vs [data-position="footer-1"] :is(.mod-menu, .menu),
body.tru-vs .site-menu-footer :is(.mod-menu, .menu) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px clamp(18px, 2.6vw, 34px) !important;
  max-width: 760px;
  margin: 0;
  padding: 18px 20px 20px !important;
  border: 1px solid var(--tru-line-soft) !important;
  border-left: 3px solid var(--tru-gold) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(11, 22, 35, .84), rgba(4, 8, 14, .72)) !important;
  list-style: none !important;
}

body.tru-vs #un-footer1 :is(.mod-menu, .menu)::before,
body.tru-vs [data-position="footer1"] :is(.mod-menu, .menu)::before,
body.tru-vs [data-position="footer-1"] :is(.mod-menu, .menu)::before,
body.tru-vs .site-menu-footer :is(.mod-menu, .menu)::before {
  content: "SITE MENU";
  grid-column: 1 / -1;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(119, 232, 255, .12);
  color: var(--tru-gold);
  font-family: var(--tru-font-head);
  letter-spacing: .16em;
  font-size: .84rem;
}

body.tru-vs #un-footer1 :is(.mod-menu, .menu) li,
body.tru-vs [data-position="footer1"] :is(.mod-menu, .menu) li,
body.tru-vs [data-position="footer-1"] :is(.mod-menu, .menu) li,
body.tru-vs .site-menu-footer :is(.mod-menu, .menu) li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

body.tru-vs #un-footer1 :is(.mod-menu, .menu) a,
body.tru-vs [data-position="footer1"] :is(.mod-menu, .menu) a,
body.tru-vs [data-position="footer-1"] :is(.mod-menu, .menu) a,
body.tru-vs .site-menu-footer :is(.mod-menu, .menu) a {
  display: inline-block !important;
  padding: 3px 0 !important;
  color: var(--tru-cyan) !important;
  -webkit-text-fill-color: var(--tru-cyan) !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.tru-vs .social-row-section {
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-left: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.tru-vs .social-row {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 12px !important;
}

body.tru-vs .social-item img {
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 0 10px rgba(119, 232, 255, .12));
}

body.tru-vs .social-item a:hover img {
  transform: translateY(-1px);
}

/* ========================================================================== 
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

@media (max-width: 1180px) {
  body.tru-vs :is(.tru-card-grid-four, .tru-glance-grid, .tracks-grid, .guide-grid, .journal-grid, .artwork-grid, .tru-membership-grid, .feature-grid-3, .tru-guide, .stellar-guide, .hex-guides-row) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.tru-vs .hypercorps.section-hex > .row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.tru-vs .tru-intro-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.tru-vs .tru-intro-copy {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  body.tru-vs :is(.tru-feature-row, .intro-split, .tru-starmap-inner, .fast-latest-row > .section-grid) {
    grid-template-columns: 1fr !important;
  }

  body.tru-vs .intro-gallery {
    grid-template-columns: 1fr !important;
  }

  body.tru-vs #un-footer1 :is(.mod-menu, .menu),
  body.tru-vs [data-position="footer1"] :is(.mod-menu, .menu),
  body.tru-vs [data-position="footer-1"] :is(.mod-menu, .menu) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  body.tru-vs :is(.tru-card-grid-four, .tru-glance-grid, .tracks-grid, .guide-grid, .journal-grid, .artwork-grid, .tru-membership-grid, .tru-upgrade-grid, .feature-grid, .feature-grid-2, .feature-grid-3, .tru-guide, .stellar-guide, .tru-storefront-band .guide-grid, .hex-guides-row) {
    grid-template-columns: 1fr !important;
  }

  body.tru-vs .hypercorps.section-hex > .row {
    grid-template-columns: 1fr !important;
  }

  body.tru-vs :is(.tru-section, .tru-content-shell, .tru-universe-glance, .fast-latest-row, .intro-block.section-grid, .tru-storefront-band, .worlds-edge, .hypercorps.section-hex, .military-ships, .journal-inner, .artwork-volume-shell, .journal-volume-shell, .tru-membership-page, #tru-insights-tech-stack, .tru-guide, .stellar-guide, .responsive-section.custom1.tech-section) {
    width: min(100% - 18px, 1180px) !important;
    margin-top: 22px !important;
    margin-bottom: 22px !important;
  }

  body.tru-vs :is(.tru-surface, .fast-latest-row > .section-grid, .intro-block.section-grid, .tru-storefront-band, .worlds-inner, .hypercorps.section-hex, .military-ships, .journal-inner, .artwork-volume-shell, .journal-volume-shell, .tru-membership-page, #tru-insights-tech-stack, .tru-guide, .stellar-guide, .responsive-section.custom1.tech-section, .tru-universe-glance) {
    padding: 20px !important;
    border-left-width: 3px !important;
    border-radius: 12px !important;
  }

  body.tru-vs #un-footer1 :is(.mod-menu, .menu),
  body.tru-vs [data-position="footer1"] :is(.mod-menu, .menu),
  body.tru-vs [data-position="footer-1"] :is(.mod-menu, .menu) {
    grid-template-columns: 1fr !important;
  }
}