/* X1Store shared visual and performance layer.
   Loaded last so legacy pages converge on one accessible design system. */
:root {
  --x1-bg: #070a12;
  --x1-surface: #0d1320;
  --x1-surface-2: #121b2b;
  --x1-line: rgba(148, 163, 184, 0.16);
  --x1-text: #f4f7fb;
  --x1-muted: #9aa9bd;
  --x1-blue: #38bdf8;
  --x1-blue-strong: #0284c7;
  --x1-green: #34d399;
  --x1-radius: 14px;
  --x1-shadow: 0 18px 50px rgba(2, 6, 23, 0.34);
}

html { color-scheme: dark; scroll-behavior: smooth; }
body {
  min-width: 320px;
  background:
    radial-gradient(900px 420px at 50% -160px, rgba(14, 165, 233, 0.13), transparent 70%),
    var(--x1-bg);
  color: var(--x1-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body, button, input, select, textarea { font-family: inherit; }
body:not(.admin-page) h1,
body:not(.admin-page) h2,
body:not(.admin-page) h3 { font-family: Manrope, Inter, ui-sans-serif, system-ui, sans-serif; }
img { max-width: 100%; }
a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(56, 189, 248, 0.7); outline-offset: 3px; }
::selection { color: #fff; background: rgba(2, 132, 199, 0.72); }

.wrapper { overflow: clip !important; }
.container { width: min(1180px, calc(100% - 32px)); margin-inline: auto; }

/* One brand and one header language on every route. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid rgba(148, 163, 184, 0.1);
  background: rgba(7, 10, 18, 0.88);
  backdrop-filter: saturate(140%) blur(18px);
}
.site-header-inner { min-height: 68px; width: min(1240px, calc(100% - 32px)); margin-inline: auto; }
.site-header-logo > a,
.site-header-mobile-brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--x1-text);
  text-decoration: none;
  letter-spacing: -0.035em;
}
.site-header-brand-logo,
.site-header-mobile-brand img { max-width: 100%; height: auto; }
.site-header-x1-mark {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 32px;
  padding-inline: 6px;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, #0284c7, #2563eb);
  box-shadow: 0 7px 22px rgba(2, 132, 199, 0.28);
  font-size: 15px;
  font-weight: 850;
  line-height: 1;
}
.site-header-x1-name { font-size: 20px; font-weight: 800; }
.site-header-admin-label {
  margin-left: 3px;
  padding: 4px 8px;
  border: 1px solid rgba(56, 189, 248, 0.24);
  border-radius: 999px;
  color: #7dd3fc;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.site-header-nav-pill {
  border: 1px solid var(--x1-line);
  background: rgba(15, 23, 42, 0.72);
  box-shadow: 0 8px 28px rgba(2, 6, 23, .24);
}
.site-header-link.active { color: #e0f2fe; background: rgba(14, 165, 233, 0.13); }
.site-header-btn-primary {
  border-color: transparent !important;
  background: linear-gradient(135deg, #0284c7, #2563eb) !important;
  box-shadow: 0 9px 24px rgba(2, 132, 199, .24);
}

/* Shared surface language across store, account, checkout and content pages. */
.card,
.marketplace-toolbar .toolbar-inner,
.marketplace-section .category-card,
.support-section,
.pd-content-card,
.pd-purchase-card,
.pd-gallery-card {
  border-color: var(--x1-line) !important;
  border-radius: var(--x1-radius) !important;
  box-shadow: var(--x1-shadow);
}
.card { background: linear-gradient(155deg, rgba(18, 27, 43, .92), rgba(9, 14, 24, .96)); }
.text-muted, .text-gray-400, .text-gray-300 { color: var(--x1-muted) !important; }
.btn-primary, .pd-buy-btn {
  border-color: transparent !important;
  background: linear-gradient(135deg, #0284c7, #2563eb) !important;
  box-shadow: 0 10px 26px rgba(2, 132, 199, .24);
}
.btn-primary:hover, .pd-buy-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
input, select, textarea { min-height: 42px; }

/* Store and category pages: clear hierarchy and less duplicated chrome. */
.marketplace-page { padding-bottom: 72px; }
.marketplace-hero { padding-block: clamp(54px, 8vw, 92px) !important; }
.marketplace-hero .hero-title { max-width: 780px; margin-inline: auto; letter-spacing: -.045em; }
.marketplace-hero .hero-subtitle { max-width: 720px; margin-inline: auto; }
.activity-ticker-wrap { content-visibility: auto; contain-intrinsic-size: 58px; }
.marketplace-toolbar, .marketplace-section { content-visibility: auto; contain-intrinsic-size: 680px; }
.categories-grid { align-items: stretch; }
.category-page-heading { max-width: 820px; margin: 20px auto 26px; }
.category-page-heading .breadcrumbs { justify-content: center; margin-bottom: 18px; }
.category-page-heading h1 { margin: 0; letter-spacing: -.035em; }
.search-section { position: sticky; top: 78px; z-index: 35; backdrop-filter: blur(16px); }
#productList > a { min-height: 120px; }

/* Product pages render critical content immediately; secondary AJAX only enriches it. */
.pd-main { padding-bottom: 84px; }
.pd-title { text-wrap: balance; letter-spacing: -.04em; }
.pd-gallery-image-wrap img { background: #0b1120; }
.pd-description-content p { line-height: 1.75; }
.pd-version-item { min-height: 50px; }

/* Long account, legal and blog screens skip off-screen paint until needed. */
main > section:not(:first-child),
.footer,
.site-footer,
.support-section {
  content-visibility: auto;
  contain-intrinsic-size: 420px;
}

@media (max-width: 900px) {
  .site-header-inner { width: min(100% - 24px, 1240px); min-height: 62px; }
  .site-header-x1-name { font-size: 18px; }
  .search-section { position: static; }
  .container { width: min(100% - 24px, 1180px); }
}

@media (max-width: 640px) {
  .site-header-utility { display: none; }
  .site-header-x1-mark { min-width: 31px; height: 29px; font-size: 13px; }
  .site-header-admin-label { display: none; }
  .marketplace-hero { padding-block: 44px !important; }
  .marketplace-hero .hero-title { font-size: clamp(30px, 10vw, 44px) !important; }
  .trust-badges { gap: 9px !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}