/* qa-theme.css v1 — shared site background (service / account / support / oxygen).
   Pure CSS, one static fixed layer on <html>::before: first paint, no JS, no blur/backdrop-filter, no animation.
   Layers (top → bottom): vignette · major grid · fine grid · purple aurora glows · base. */
html { background: #07060d !important; }
html body { background: transparent !important; }
html::before {
  content: "";
  position: fixed;
  left: 0; top: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  pointer-events: none;
  contain: strict;
  background:
    /* vignette: calm edges, fades the grid away from the centre-top */
    radial-gradient(125% 95% at 50% 30%, rgba(7, 6, 13, 0) 46%, rgba(5, 4, 10, 0.78) 100%),
    /* major grid */
    linear-gradient(90deg, rgba(167, 139, 250, 0.060) 1px, transparent 1px) 0 0 / 160px 160px,
    linear-gradient(0deg, rgba(167, 139, 250, 0.060) 1px, transparent 1px) 0 0 / 160px 160px,
    /* fine grid */
    linear-gradient(90deg, rgba(167, 139, 250, 0.034) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(0deg, rgba(167, 139, 250, 0.034) 1px, transparent 1px) 0 0 / 32px 32px,
    /* aurora */
    radial-gradient(62% 46% at 10% -8%, rgba(124, 92, 255, 0.40), rgba(124, 92, 255, 0) 70%),
    radial-gradient(52% 40% at 94% 2%, rgba(167, 139, 250, 0.17), rgba(167, 139, 250, 0) 70%),
    radial-gradient(40% 32% at 80% 58%, rgba(109, 74, 255, 0.10), rgba(109, 74, 255, 0) 70%),
    radial-gradient(70% 38% at 46% 112%, rgba(139, 92, 246, 0.24), rgba(139, 92, 246, 0) 70%),
    /* base */
    linear-gradient(180deg, #0d0819 0%, #08060f 55%, #06050b 100%);
}
@media (max-width: 640px) {
  html::before {
    background:
      radial-gradient(135% 100% at 50% 26%, rgba(7, 6, 13, 0) 50%, rgba(5, 4, 10, 0.72) 100%),
      linear-gradient(90deg, rgba(167, 139, 250, 0.058) 1px, transparent 1px) 0 0 / 140px 140px,
      linear-gradient(0deg, rgba(167, 139, 250, 0.058) 1px, transparent 1px) 0 0 / 140px 140px,
      linear-gradient(90deg, rgba(167, 139, 250, 0.032) 1px, transparent 1px) 0 0 / 28px 28px,
      linear-gradient(0deg, rgba(167, 139, 250, 0.032) 1px, transparent 1px) 0 0 / 28px 28px,
      radial-gradient(90% 40% at 8% -6%, rgba(124, 92, 255, 0.36), rgba(124, 92, 255, 0) 72%),
      radial-gradient(70% 34% at 100% 14%, rgba(167, 139, 250, 0.15), rgba(167, 139, 250, 0) 72%),
      radial-gradient(90% 36% at 50% 112%, rgba(139, 92, 246, 0.26), rgba(139, 92, 246, 0) 72%),
      linear-gradient(180deg, #0d0819 0%, #08060f 55%, #06050b 100%);
  }
}
/* the old per-page background layers are replaced by the shared one */
div.bg[aria-hidden="true"], .sf-bg, .support-bg, .oxy-bg, .legal-aurora, .drv-atmosphere, .frp-client-glow { display: none !important; }

/* ---- contrast >= 4.5 for small decorative-purple labels (shop / legal / driver / frp) ---- */
:root, html, body { --sf-text-3: #9188ab; }
.acc-topbar-brand-text small, .shop-version-hero-label span, .shop-footer-card-label { color: #b9a6fb !important; }
.legal-footer-copy, .drv-key em { color: #a79fbd !important; }
.drv-item__idx { color: rgba(208, 197, 235, 0.64) !important; }
.frp-gate-foot, .frp-expired-ref { color: rgba(255, 255, 255, 0.64) !important; }
.frp-expired-footer p { color: rgba(255, 255, 255, 0.6) !important; }
#frp-gate-key::placeholder { color: rgba(255, 255, 255, 0.74) !important; }
/* /msab: let the shared grid flow through the hero instead of a hard opaque band */
header.hero { background-color: transparent !important; }

/* ---- weak-phone / reduced-motion safety: no animated blur or conic spin on the /driver download card ---- */
@media (max-width: 760px) { .sfx-dl__glow { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .sfx-dl, .sfx-dl::before, .sfx-dl::after, .sfx-dl__glow { animation: none !important; } }