:root {
  --primary: #a265f7;
  --primary-soft: #c19bfa;
  --secondary: #5c29fb;
  --bg: #060230;
  --bg-1: #0a0640;
  --bg-2: #0f0a52;
  --card: rgba(255, 255, 255, 0.04);
  --card-border: rgba(162, 101, 247, 0.22);
  --text: #f2eeff;
  --text-dim: #a8a1cf;
  --text-faint: #726c96;
  --free: #6fd6f0;
  --gold: #f4c04f;
  --radius: 16px;
  --shadow-glow: 0 0 40px rgba(162, 101, 247, 0.25);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* Always reserve the vertical scrollbar's width, even on pages short
     enough not to need it. Otherwise the viewport (and everything laid
     out relative to it) gets a few extra px when a short page swaps in
     next to a tall one, reading as a layout shift during page transitions. */
  overflow-y: scroll;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.5;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1 0 auto; }

h1, h2, h3, h4 {
  font-family: 'Orbitron', 'Inter', sans-serif;
  font-weight: 800;
  letter-spacing: 0.02em;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; }

.bg-field {
  position: fixed;
  inset: 0;
  z-index: -2;
  background: radial-gradient(ellipse at 50% -10%, var(--bg-2) 0%, var(--bg) 60%);
  overflow: hidden;
  /* transform: translateZ(0) was tried here to stop the background shifting
     during the mobile address-bar animation, by promoting it to its own
     compositor layer. Removed: a separately composited layer is exactly
     what a pinch/page zoom can end up scaling at a different rate than the
     main page content, which is what actually made the stars look
     "detached" from the rest of the UI while zooming. Left as a plain
     position:fixed element instead, so it scales in the same pass as
     everything else on the page - if the address-bar shift comes back,
     that needs a different fix that doesn't reintroduce this. */
}

/* Deliberately NOT inside .bg-field / position:fixed, and sized to the full
   document height in JS (resizeCanvas() in main.js), not just the viewport.
   position:fixed elements have long-documented, inconsistent mobile browser
   behavior specifically *during* an active pinch/page zoom gesture - ballooning
   in size, scaling at a different rate than the rest of the page, drifting out
   of sync with it - and each was independently reproducible on a real device
   despite everything else about their setup being otherwise correct. Plain
   absolute positioning makes the canvas ordinary in-flow page content as far
   as the browser's zoom/scroll handling is concerned, so it can't diverge
   from the rest of the UI at all: same document, same coordinate system, same
   single rendering pass. A uniform random star field looks identical whether
   it's "pinned in place while more gets revealed around it" or "one
   continuous field that scrolls normally with the page", so this costs
   nothing visually. */
#stars { position: absolute; top: 0; left: 0; width: 100%; z-index: -2; pointer-events: none; }

.bg-glow {
  position: absolute;
  width: 45vw;
  height: 45vw;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.28;
}
.bg-glow-1 { background: var(--secondary); top: -10%; left: -10%; }
.bg-glow-2 { background: var(--primary); bottom: 0%; right: -10%; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:disabled { opacity: 0.6; cursor: default; transform: none; }

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  box-shadow: 0 8px 24px rgba(92, 41, 251, 0.4);
}
.btn-primary:hover { box-shadow: 0 10px 30px rgba(162, 101, 247, 0.55); }

.btn-outline {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--card-border);
  color: var(--text);
}
.btn-outline:hover { border-color: var(--primary); background: rgba(162, 101, 247, 0.1); }

.btn-ghost {
  background: transparent;
  color: var(--text-dim);
}
.btn-ghost:hover { color: var(--text); }

.btn-lg { padding: 0.9rem 1.9rem; font-size: 1.05rem; }
.btn-block { width: 100%; }

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(6, 2, 48, 0.55);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(162, 101, 247, 0.12);
  transition: background 0.2s ease;
}

.nav-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  position: relative;
}

.brand { display: flex; align-items: center; gap: 0.6rem; margin-right: auto; white-space: nowrap; }
.brand-logo { width: 34px; height: 34px; }
.brand-name {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
}
.brand-name span { color: var(--primary-soft); }

/* Positioned independently of .brand/.nav-actions (rather than just packed
   between them by .brand's margin-right:auto) so it stays visually centered
   and doesn't shift when the login button's width changes (spinner vs
   "Login" vs a username). Mobile's dropdown-panel version below resets this. */
.nav-links {
  display: flex;
  gap: 1.6rem;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.nav-links a { color: var(--text-dim); font-weight: 500; font-size: 0.95rem; transition: color 0.15s ease; }
.nav-links a:hover { color: var(--text); }
.nav-links-login { display: none; }
/* Only meaningful in the mobile drawer (see the media query and
   .nav.force-collapse versions below) - on desktop .nav-links is just a
   centered row of links, and .brand already shows the logo in the header
   bar itself, so an inline logo+wordmark here would just duplicate it. */
.nav-links-brand { display: none; }

.nav-actions { display: flex; align-items: center; gap: 0.7rem; }

.login-icon {
  display: inline-block;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  vertical-align: -2px;
  object-fit: contain;
  filter: invert(1);
  opacity: 0.75;
  transition: opacity 0.15s ease;
}
.btn-ghost:hover .login-icon,
.nav-links-login:hover .login-icon { opacity: 1; }

.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0.75;
  animation: btn-spin 0.7s linear infinite;
  vertical-align: -2px;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

.fivem-account-list a.select-custom-option,
.fivem-account-list button.select-custom-option { display: block; }
.fivem-account-mobile-actions {
  display: none;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem 0 0 0.2rem;
}
.fivem-account-mobile-actions.open { display: flex; }
.fivem-account-mobile-actions a,
.fivem-account-mobile-actions button {
  background: none;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  padding: 0.2rem 0;
}
.fivem-account-mobile-actions a:hover,
.fivem-account-mobile-actions button:hover { color: var(--text); }
.fivem-account-mobile-actions a.connected { color: var(--primary-soft); }

.route-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  z-index: 300;
  opacity: 0;
  transition: width 0.32s ease-out, opacity 0.24s ease;
  box-shadow: 0 0 8px rgba(162, 101, 247, 0.6);
}
.route-progress.active { opacity: 1; }

/* Animating width forces a layout recalc on every single frame - real
   main-thread work, and on mobile hardware that's enough to make the sweep
   visibly less smooth than it should be for a 2px bar. transform: scaleX()
   produces the same visual sweep but runs on the compositor thread, not the
   main one, so it stays smooth regardless of whatever else is going on.
   showRouteProgress()/finishRouteProgress() in main.js switch which
   property they actually write to based on this same breakpoint. */
@media (max-width: 1300px) {
  .route-progress {
    width: 100%;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.32s ease-out, opacity 0.24s ease;
  }
}

.nav-cart-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: none;
  color: var(--text-dim);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-cart-btn:hover { color: var(--text); border-color: var(--card-border); }
.cart-count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 17px;
  text-align: center;
}

/* Cart drawer */
.cart-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 1, 24, 0.6);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 199;
}
.cart-backdrop.open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(380px, 100vw);
  background: var(--bg-1);
  border-left: 1px solid var(--card-border);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 200;
}
.cart-drawer.open { transform: translateX(0); }

.cart-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.3rem 1.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cart-drawer-head h3 { font-size: 1.05rem; }
.cart-close {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem;
}
.cart-close:hover { color: var(--text); }

.cart-drawer-empty {
  flex: 1;
  display: none;
  align-items: center;
  justify-content: center;
  color: var(--text-faint);
  font-size: 0.9rem;
}

.cart-drawer-body { flex: 1; overflow-y: auto; padding: 0.6rem 1.4rem; }
.cart-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.cart-item-info { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.cart-item-info strong { font-size: 0.92rem; }
.cart-item-info span { color: var(--text-dim); font-size: 0.88rem; white-space: nowrap; }
.cart-item-actions { display: flex; align-items: center; justify-content: flex-end; }
.cart-remove { background: none; border: none; color: var(--text-faint); font-size: 0.8rem; cursor: pointer; text-decoration: underline; }
.cart-remove:hover { color: var(--text-dim); }

.cart-drawer-foot { padding: 1.2rem 1.4rem 1.4rem; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.cart-total-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; font-size: 0.98rem; }
.cart-total-row strong { font-family: 'Orbitron', sans-serif; font-size: 1.15rem; }
.cart-fineprint { color: var(--text-faint); font-size: 0.78rem; text-align: center; margin-top: 0.7rem; }

/* Contact modal */
.contact-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%);
  width: min(420px, calc(100vw - 2rem));
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  background: var(--bg-1);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  z-index: 201;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.contact-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
.contact-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.3rem 1.4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.contact-modal-head h3 { font-size: 1.05rem; }
.contact-form { padding: 1.4rem; display: flex; flex-direction: column; gap: 1rem; }
.contact-form label { display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.85rem; color: var(--text-dim); font-weight: 600; }
.contact-form input, .contact-form textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
  color: var(--text);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 400;
  resize: vertical;
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--primary); }
.contact-form-note { font-size: 0.78rem; color: var(--text-faint); text-align: center; }
.contact-success { padding: 2.5rem 1.4rem; text-align: center; }
.contact-success p { color: var(--text-dim); margin-bottom: 1.2rem; font-size: 0.95rem; }

.nav-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
}
.nav-burger span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; }

.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8rem 1.5rem 4rem;
}

.hero-inner { max-width: 760px; }

.hero-logo {
  width: 88px;
  height: 88px;
  margin: 0 auto 1.6rem;
  filter: drop-shadow(0 0 30px rgba(162, 101, 247, 0.6));
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.15;
  margin-bottom: 1.1rem;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  letter-spacing: 0.04em;
}
.hero h1 span {
  background: linear-gradient(135deg, var(--primary-soft), var(--primary), var(--secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  color: var(--text-dim);
  font-size: 1.1rem;
  max-width: 580px;
  margin: 0 auto 2.2rem;
}

.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.6rem; }

.hero-links {
  display: flex;
  gap: 1.6rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1.6rem;
}
.hero-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-dim);
  font-weight: 600;
  font-size: 0.92rem;
  transition: color 0.15s ease;
}
.hero-link:hover { color: var(--text); }
.hero-link svg { color: var(--primary-soft); }

.hero-eyebrow {
  display: block;
  color: var(--primary-soft);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 0.6rem;
}

.strip {
  border-top: 1px solid rgba(162, 101, 247, 0.14);
  border-bottom: 1px solid rgba(162, 101, 247, 0.14);
  background: rgba(255, 255, 255, 0.02);
}
.strip-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 1.4rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.2rem;
}
.strip-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-dim);
  font-size: 0.92rem;
  font-weight: 500;
}
.strip-item svg { color: var(--primary-soft); flex-shrink: 0; }

.section { max-width: 1440px; margin: 0 auto; padding: 6rem 1.5rem; }
.section-alt { background: rgba(255, 255, 255, 0.015); max-width: none; }
.section-alt > * { max-width: 1440px; margin-left: auto; margin-right: auto; }
.section-tight { padding-top: 3rem; padding-bottom: 3rem; }

.section-head { text-align: center; max-width: 640px; margin: 0 auto 3.2rem; }
.section-head.section-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  text-align: left;
  max-width: none;
  margin: 0 0 2rem;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.eyebrow {
  display: inline-block;
  color: var(--primary-soft);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin-bottom: 0.7rem;
}
.section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: 0.8rem; }
.section-head p { color: var(--text-dim); }

/* Framework + category badges */
.fw-badges { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.fw-badge {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.22rem 0.55rem;
  border-radius: 6px;
  background: rgba(162, 101, 247, 0.14);
  color: var(--primary-soft);
  border: 1px solid rgba(162, 101, 247, 0.25);
}
.fw-badge-standalone { background: rgba(111, 214, 240, 0.14); color: var(--free); border-color: rgba(111, 214, 240, 0.3); }

.tag {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
}
.tag-new { background: rgba(111, 214, 240, 0.18); color: var(--free); }
.tag-bestseller { background: rgba(244, 192, 79, 0.18); color: var(--gold); }
.tag-free { background: rgba(111, 214, 240, 0.18); color: var(--free); }
.tag-mlo { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; }

/* Script / product catalog cards */
.catalog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
  padding: 1rem 1.2rem;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
}
.catalog-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.filter-chip {
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.filter-chip:hover { color: var(--text); border-color: var(--primary); }
.filter-chip.active {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border-color: transparent;
  color: #fff;
}
.catalog-sort { display: flex; align-items: center; gap: 0.6rem; color: var(--text-dim); font-size: 0.85rem; }
.catalog-count { color: var(--text-faint); font-size: 0.85rem; margin-bottom: 1.4rem; }

/* Custom select (replaces the native <select> popup, which can't be themed
   consistently across browsers; this mirrors it 1:1 for value/change events). */
.select-custom { position: relative; }
.select-custom-native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.select-custom-trigger {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--card-border);
  color: var(--text);
  padding: 0.5rem 0.8rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease;
}
.select-custom-trigger:hover, .select-custom.open .select-custom-trigger { border-color: var(--primary); }
.select-custom-trigger::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--text-dim);
  border-bottom: 2px solid var(--text-dim);
  transform: rotate(45deg);
  margin-top: -4px;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.select-custom.open .select-custom-trigger::after { transform: rotate(-135deg); margin-top: 3px; }
.select-custom-list {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 190px;
  background: var(--bg-1);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 0.4rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 40;
}
.select-custom.open .select-custom-list { opacity: 1; transform: translateY(0); pointer-events: auto; }
.select-custom-option {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  cursor: pointer;
}
.select-custom-option:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.select-custom-option.active { background: rgba(162, 101, 247, 0.16); color: var(--primary-soft); }

.script-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1.4rem;
}
.script-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.script-card:hover { transform: translateY(-6px); border-color: var(--primary); }
.script-card-hit { display: flex; flex-direction: column; flex: 1; cursor: pointer; }
.script-card-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; min-height: 22px; }
.script-card-icon {
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(162, 101, 247, 0.12);
  color: var(--primary-soft);
  margin-bottom: 1rem;
}
.script-card-icon.has-media {
  width: auto;
  height: auto;
  aspect-ratio: 16 / 10;
  margin: -1.6rem -1.6rem 1rem;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
}
.script-card-icon.has-media img { width: 100%; height: 100%; object-fit: cover; }
.script-card h3 { font-size: 1.05rem; margin-bottom: 0.45rem; }
.script-card-category { color: var(--text-faint); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin-bottom: 0.6rem; }
.script-card p { color: var(--text-dim); font-size: 0.88rem; margin-bottom: 1rem; flex: 1; }
.script-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: auto; }
.script-price { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: 1.15rem; }
.script-price.is-free { color: var(--free); }
.script-card .fw-badges { margin-bottom: 1rem; }
.script-empty { text-align: center; color: var(--text-faint); padding: 3rem 1rem; grid-column: 1 / -1; }

/* Product detail page */
.product-layout {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 3rem;
  align-items: center;
  padding: 0.5rem 1.5rem 2rem;
}
.product-visual {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 28% 22%, rgba(162, 101, 247, 0.32), transparent 55%),
    radial-gradient(circle at 78% 78%, rgba(92, 41, 251, 0.28), transparent 55%),
    linear-gradient(160deg, rgba(162, 101, 247, 0.1), rgba(10, 6, 64, 0.4));
  border: 1px solid var(--card-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.25);
}
.product-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(circle at 50% 50%, #000 55%, transparent 90%);
}
.product-visual-badge {
  position: relative;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(162, 101, 247, 0.45);
  box-shadow: 0 0 70px rgba(162, 101, 247, 0.4), inset 0 0 25px rgba(162, 101, 247, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: float 6s ease-in-out infinite;
}
.product-visual-badge svg { width: 44%; height: 44%; color: var(--primary-soft); filter: drop-shadow(0 0 12px rgba(162, 101, 247, 0.5)); }

.product-gallery { display: flex; flex-direction: column; gap: 0.8rem; }
.product-gallery-main {
  aspect-ratio: 1;
  border-radius: var(--radius);
  border: 1px solid var(--card-border);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.25);
}
.product-gallery-main img, .product-gallery-main video { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-gallery-thumbs { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.product-gallery-thumb {
  width: 58px;
  height: 58px;
  border-radius: 10px;
  border: 1px solid var(--card-border);
  background: rgba(0, 0, 0, 0.25);
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease;
}
.product-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-gallery-thumb.active, .product-gallery-thumb:hover { border-color: var(--primary); }
.product-gallery-thumb-video { font-size: 1rem; }

.product-info h1 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); margin: 0.7rem 0 0.9rem; }
.product-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.product-category { color: var(--primary-soft); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; font-weight: 700; margin-top: 0.9rem; }
.product-desc { color: var(--text-dim); font-size: 1.02rem; margin-bottom: 1.3rem; }
.product-info .fw-badges { margin-bottom: 1.6rem; }

.product-buybox {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 1.4rem;
}
.product-price-row { display: flex; align-items: center; gap: 1.2rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.product-price { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 2rem; }
.product-price.is-free { color: var(--free); }

.trust-badges { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1rem; opacity: 0.65; }
.trust-badge { color: var(--text-faint); font-size: 0.78rem; }

.highlight-list {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.2rem;
}
.highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.highlight-item:hover { transform: translateY(-3px); border-color: var(--primary); }
.highlight-emoji { font-size: 1.05rem; line-height: 1.5; flex-shrink: 0; }
.highlight-item p { color: var(--text-dim); font-size: 0.92rem; line-height: 1.55; }
.highlight-item p strong { color: var(--text); font-weight: 700; }

.product-body {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 3rem;
  align-items: start;
}
.product-main h2 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
  margin: 2.2rem 0 0.7rem;
  letter-spacing: 0;
}
.product-main h2:first-child { margin-top: 0; }
.product-main p { color: var(--text-dim); font-size: 0.96rem; line-height: 1.7; margin-bottom: 0.4rem; }
.product-sidebar {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 1.6rem;
  position: sticky;
  top: 6.5rem;
}
.product-sidebar h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: 0.8rem; }
.product-sidebar h4:not(:first-child) { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.product-sidebar ul { margin-bottom: 0.4rem; }
.product-sidebar li { font-size: 0.88rem; color: var(--text-dim); padding: 0.35rem 0; }
.product-sidebar .btn { margin-top: 1rem; }

@media (max-width: 900px) {
  .product-layout { grid-template-columns: 1fr; }
  .product-visual { max-width: 280px; margin: 0 auto; }
  .product-body { grid-template-columns: 1fr; }
  .product-sidebar { position: static; }
}
@media (max-width: 620px) {
  .highlight-list { grid-template-columns: 1fr; }
}

/* Subscription plan */
.plan-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 0.3rem;
  margin: 0 auto 3rem;
}
.plan-toggle button {
  border: none;
  background: none;
  color: var(--text-dim);
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.plan-toggle button.active {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
}
.plan-toggle-wrap { text-align: center; }
.plan-save { color: var(--gold); font-size: 0.75rem; font-weight: 700; margin-left: 0.4rem; }

.plan-card {
  max-width: 480px;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(162, 101, 247, 0.14), var(--card) 45%);
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  padding: 2.4rem 2rem;
  text-align: center;
  box-shadow: var(--shadow-glow);
}
.plan-card-name { font-size: 1.3rem; margin-bottom: 0.6rem; }
.plan-price { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 2.6rem; margin-bottom: 0.3rem; }
.plan-price span { font-size: 1rem; color: var(--text-dim); font-weight: 500; font-family: 'Inter', sans-serif; }
.plan-price-note { color: var(--text-faint); font-size: 0.85rem; margin-bottom: 1.8rem; }
.plan-perks { text-align: left; margin-bottom: 1.8rem; }
.plan-perks li {
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.92rem;
  color: var(--text-dim);
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.plan-perks li:last-child { border-bottom: none; }
.plan-perks li::before { content: '✓'; color: var(--primary-soft); font-weight: 700; }
.plan-fineprint { color: var(--text-faint); font-size: 0.8rem; margin-top: 1rem; }

.included-strip { text-align: center; max-width: 620px; margin: 5rem auto 2rem; }
.included-strip h3 { font-size: 1.4rem; margin-bottom: 0.5rem; }
.included-strip p { color: var(--text-dim); font-size: 0.92rem; }

.compare-table-wrap { max-width: 720px; margin: 0 auto; overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th, .compare-table td { padding: 0.9rem 1rem; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.9rem; color: var(--text-dim); }
.compare-table th:first-child, .compare-table td:first-child { text-align: left; color: var(--text); }
.compare-table th { color: var(--text-faint); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
.compare-table td.yes { color: var(--primary-soft); font-weight: 700; }

/* Gift cards (reused pattern) */
.giftcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.2rem;
}
.giftcard-card {
  text-align: center;
  padding: 2.2rem 1.2rem;
  border-radius: var(--radius);
  border: 1px solid var(--card-border);
  background: linear-gradient(160deg, rgba(162, 101, 247, 0.12), rgba(92, 41, 251, 0.05));
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.giftcard-card:hover { transform: translateY(-4px); border-color: var(--primary); }
.giftcard-value {
  font-family: 'Orbitron', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 1.2rem;
  background: linear-gradient(135deg, var(--primary-soft), var(--secondary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.giftcard-custom {
  max-width: 420px;
  margin: 2.5rem auto 0;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 1.8rem;
  text-align: center;
}
.giftcard-custom label { display: block; color: var(--text-dim); font-size: 0.85rem; margin-bottom: 0.6rem; }
.giftcard-custom-input {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  margin-bottom: 1rem;
}
.giftcard-custom-input:focus-within { border-color: var(--primary); }
.giftcard-custom-input span { color: var(--text-faint); font-weight: 700; }
.giftcard-custom-input input {
  flex: 1;
  background: none;
  border: none;
  color: var(--text);
  font-family: 'Orbitron', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  outline: none;
  min-width: 0;
}
/* FAQ */
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item {
  border: 1px solid var(--card-border);
  border-radius: 12px;
  margin-bottom: 0.8rem;
  overflow: hidden;
  background: var(--card);
}
.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 1.1rem 1.4rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-q span { color: var(--primary-soft); font-size: 1.2rem; transition: transform 0.2s ease; flex-shrink: 0; margin-left: 1rem; }
.faq-item.open .faq-q span { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.faq-a p { padding: 0 1.4rem 1.2rem; color: var(--text-dim); font-size: 0.92rem; }
.faq-item.open .faq-a { max-height: 260px; }

/* Support / contact cards */
.support-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.4rem;
  max-width: 900px;
  margin: 0 auto 4rem;
}
.support-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.support-card .btn { margin-top: auto; }
.support-card:hover { transform: translateY(-6px); border-color: var(--primary); }
.support-card-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(162, 101, 247, 0.12);
  color: var(--primary-soft);
}
.support-card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.support-card p { color: var(--text-dim); font-size: 0.88rem; margin-bottom: 1.2rem; }
.support-card .btn { width: 100%; }
.support-card .js-support-email { white-space: normal; word-break: break-word; line-height: 1.3; max-width: 100%; }

/* Home cards (reused) */
.home-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.4rem;
  padding-top: 1rem;
}
.home-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 2rem;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.home-card:hover { transform: translateY(-6px); border-color: var(--primary); }
.home-card-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(162, 101, 247, 0.12);
  color: var(--primary-soft);
  margin-bottom: 1.1rem;
}
.home-card h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.home-card p { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 1.2rem; }
.home-card-link { color: var(--primary-soft); font-weight: 600; font-size: 0.9rem; }

/* Reviews */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
}
.review-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 1.6rem;
}
.review-stars { color: var(--gold); font-size: 0.9rem; margin-bottom: 0.7rem; letter-spacing: 0.1em; }
.review-card p { color: var(--text-dim); font-size: 0.88rem; margin-bottom: 0.9rem; }
.review-author { color: var(--text-faint); font-size: 0.82rem; font-weight: 600; }

/* Real reviews (js/reviews.js) - product pages and the homepage aggregate.
   Reuses .review-card/.review-stars/.reviews-grid above rather than a
   parallel set of classes, so a real review and the old placeholder
   testimonials render identically; only the header row (avatar, name,
   source, date) is new. */
.review-card-real { display: flex; flex-direction: column; }
.review-card-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem; }
.review-avatar { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--card-border); }
.review-head-meta { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.review-head-name { font-size: 0.88rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.review-head-sub { display: flex; align-items: center; gap: 0.4rem; font-size: 0.74rem; color: var(--text-faint); }
.review-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgba(88, 101, 242, 0.15);
  color: #8b95f5; /* Discord blurple, dimmed to sit against the dark card */
  font-weight: 700;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.review-card-real .review-stars { margin-bottom: 0; }
.review-card-real p { margin-bottom: 0; flex: 1; }

/* Summary header: overall rating for a script (product page) or the whole
   store (homepage) - "4.8★ from 23 reviews" plus a real Trustpilot-style
   at-a-glance block, not just the list of individual cards below it. */
.review-summary {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.4rem 1.6rem;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  margin-bottom: 1.6rem;
}
.review-summary-score { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: 2.2rem; color: var(--text); line-height: 1; }
.review-summary-details { display: flex; flex-direction: column; gap: 0.3rem; }
.review-summary-stars { color: var(--gold); font-size: 1rem; letter-spacing: 0.1em; }
.review-summary-count { color: var(--text-faint); font-size: 0.85rem; }

.review-empty {
  padding: 2rem 1.6rem;
  text-align: center;
  color: var(--text-faint);
  font-size: 0.9rem;
  border: 1px dashed var(--card-border);
  border-radius: var(--radius);
}

/* Write-a-review: the star picker, textarea and submit button, shown only
   once eligibility.js confirms the visitor is a verified buyer who hasn't
   already reviewed this script. */
.review-write {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 1.6rem;
  margin-bottom: 1.6rem;
}
.review-write h4 { font-size: 1rem; margin-bottom: 1rem; }
.star-picker { display: flex; gap: 0.3rem; margin-bottom: 1rem; }
.star-picker button {
  background: none;
  border: none;
  padding: 0;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--text-faint);
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
}
.star-picker button:hover { transform: scale(1.15); }
.star-picker button.active { color: var(--gold); }
.review-write textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.review-write textarea:focus { outline: none; border-color: var(--primary); }
.review-write-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.review-write-status { font-size: 0.82rem; color: var(--text-faint); }
.review-write-status.is-error { color: #f87171; }
.review-write-status.is-ok { color: #6fd6a8; }

/* Login prompt - shown when nobody's session cookie is present at all,
   distinct from "logged in but doesn't own this script" (that message
   comes from the API and is shown in review-write-status instead, since
   it's specific to what they tried to do). */
.review-login-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 1.2rem 1.6rem;
  margin-bottom: 1.6rem;
}
.review-login-prompt p { color: var(--text-dim); font-size: 0.9rem; }
.review-login-prompt .btn img { width: 16px; height: 16px; filter: invert(1); }

/* Stats */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.4rem;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}
.stat-num { font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 2.2rem; background: linear-gradient(135deg, var(--primary-soft), var(--secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat-label { color: var(--text-dim); font-size: 0.85rem; margin-top: 0.3rem; }

/* Footer */
.footer {
  border-top: 1px solid rgba(162, 101, 247, 0.14);
  background: rgba(255, 255, 255, 0.02);
  padding: 3.5rem 1.5rem 1.5rem;
}
.footer-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
}
.footer-brand { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-brand img { width: 40px; height: 40px; }
.footer-brand span { font-family: 'Orbitron', sans-serif; font-weight: 700; letter-spacing: 0.06em; }
.footer-brand p { color: var(--text-faint); font-size: 0.82rem; max-width: 280px; margin-top: 0.4rem; }
.footer-col h5 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); margin-bottom: 0.9rem; }
.footer-col a { display: block; color: var(--text-dim); font-size: 0.9rem; margin-bottom: 0.6rem; }
.footer-col a:hover { color: var(--text); }

.footer-bottom {
  max-width: 1440px;
  margin: 0 auto;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
  color: var(--text-faint);
  font-size: 0.8rem;
}

@media (max-width: 1000px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
/* This threshold is higher than the usual "mobile" cutoff elsewhere on the
   site: .nav-links is centered independently on the bar (see the base rule
   above) so it doesn't shift when the login button's width changes, but
   that only has room to work once the bar is wide enough that centered
   links can't collide with .brand or .nav-actions on either side (verified
   they start colliding somewhere in the 1250-1350px range with a real
   logged-in username) — so the hamburger/dropdown pattern needs to cover
   that whole range too, not just narrow/phone widths. */
@media (max-width: 1300px) {
  /* Slides in from the right, same pattern as .cart-drawer, rather than
     dropping down below the header. */
  .nav-links {
    display: flex;
    position: fixed;
    top: 0;
    left: auto;
    right: 0;
    height: 100vh;
    width: min(320px, 100vw);
    background: var(--bg-1);
    border-left: 1px solid var(--card-border);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.4);
    flex-direction: column;
    padding: 1.75rem 1.5rem 1.5rem;
    gap: 1rem;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    z-index: 200;
  }
  .nav-links.nav-links-open { transform: translateX(0); }
  /* Now a solid dark panel rather than sitting over the page content
     directly, text-dim reads too low-contrast against it. */
  .nav-links a { color: var(--text); }
  .nav-links-login { display: block; padding-top: 0.6rem; border-top: 1px solid rgba(255, 255, 255, 0.08); color: var(--primary-soft) !important; }
  /* .brand (with the same logo) stays visible in the header bar itself even
     while the drawer is open, but it's easy to miss up there once the panel
     covers most of the screen - repeating it inside the drawer keeps the
     brand present in the one place the user is actually looking. */
  .nav-links-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .nav-links-brand-logo { width: 30px; height: 30px; flex-shrink: 0; }
  .nav-links-brand-text { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: 0.06em; color: var(--text); }
  .nav-links-brand-text span { color: var(--primary-soft); }
  .nav-burger { display: flex; }
  .nav-actions .btn-ghost { display: none; }
  /* The 2rem desktop gap (meant to space out brand/nav-links/nav-actions
     across a wide bar) is far more than a mobile bar has room for once it's
     down to just brand + nav-actions + burger; left as-is it pushes the
     burger button off the right edge of the screen entirely on narrow
     phones. Subscribe is also dropped here since it's already reachable as
     a link inside the nav-links dropdown, freeing up more room. */
  .nav-inner { gap: 0.6rem; }
  .nav-actions .btn-primary { display: none; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

/* Runtime safety net (see checkNavOverlap() in main.js): the 1300px cutoff
   above is calibrated to today's content, but nothing stops a future extra
   nav link, a longer brand name, or a long Cfx.re username from pushing the
   centered .nav-links into .brand or .nav-actions again above that width.
   JS measures actual positions on load/resize/login-state changes and adds
   this class the moment a real collision is detected, at any width, forcing
   the same collapsed pattern the 1300px media query above uses. */
.nav.force-collapse .nav-links {
  display: flex;
  position: fixed;
  top: 0;
  left: auto;
  right: 0;
  height: 100vh;
  width: min(320px, 100vw);
  background: var(--bg-1);
  border-left: 1px solid var(--card-border);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.4);
  flex-direction: column;
  padding: 1.75rem 1.5rem 1.5rem;
  gap: 1rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 200;
}
.nav.force-collapse .nav-links.nav-links-open { transform: translateX(0); }
.nav.force-collapse .nav-links a { color: var(--text); }
.nav.force-collapse .nav-links-login { display: block; padding-top: 0.6rem; border-top: 1px solid rgba(255, 255, 255, 0.08); color: var(--primary-soft) !important; }
.nav.force-collapse .nav-links-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav.force-collapse .nav-links-brand-logo { width: 30px; height: 30px; flex-shrink: 0; }
.nav.force-collapse .nav-links-brand-text { font-family: 'Orbitron', sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: 0.06em; color: var(--text); }
.nav.force-collapse .nav-links-brand-text span { color: var(--primary-soft); }
.nav.force-collapse .nav-burger { display: flex; }
.nav.force-collapse .nav-actions .btn-ghost { display: none; }
.nav.force-collapse .nav-inner { gap: 0.6rem; }
.nav.force-collapse .nav-actions .btn-primary { display: none; }

.nav-links-backdrop {
  position: fixed;
  /* Not inset:0: this lives inside <header class="nav"> (see the comment on
     injectNavLinksBackdrop() in main.js for why), and .nav's own
     backdrop-filter makes it a containing block for fixed descendants in
     modern browsers - inset:0 resolved against .nav's own ~66px-tall box
     instead of the viewport, shrinking the backdrop down to just the header
     and leaving the rest of the page unable to close the drawer by tapping
     it. vw/vh are viewport-relative regardless of containing block, so they
     size this correctly no matter what it's nested inside. */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(4, 1, 24, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 199;
}
.nav-links-backdrop.open { opacity: 1; pointer-events: auto; }

@media (max-width: 460px) {
  .nav-actions .btn-primary { padding: 0.6rem 1rem; font-size: 0.85rem; }
}

/* Shrunk rather than hidden: with the mobile nav gap/Subscribe-button fixes
   above, "ASTREA SCRIPTS" fits fine at 0.9rem down to a 320px-wide phone
   (the smallest common width) with room to spare; a smaller size than this
   started cutting it close on that width. */
@media (max-width: 620px) {
  .brand-name { font-size: 0.9rem; }
}

.legal {
  max-width: 780px;
  margin: 0 auto;
  padding: 9rem 1.5rem 5rem;
}
.legal h1 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); margin-bottom: 0.5rem; }
.legal .legal-updated { color: var(--text-faint); font-size: 0.85rem; margin-bottom: 2.5rem; }
.legal h2 { font-family: 'Inter', sans-serif; font-size: 1.15rem; margin: 2.2rem 0 0.8rem; color: var(--primary-soft); }
.legal p, .legal li { color: var(--text-dim); font-size: 0.95rem; margin-bottom: 0.8rem; }
.legal ul { padding-left: 1.2rem; list-style: disc; }
.legal li { margin-bottom: 0.4rem; }
.legal a.inline-link { color: var(--primary-soft); text-decoration: underline; }

@media (max-width: 620px) {
  .footer-inner { grid-template-columns: 1fr; gap: 2.2rem; }
  .btn { min-height: 44px; }
}

@media (max-width: 480px) {
  .hero { min-height: auto; padding: 7rem 1.2rem 3rem; }
}

/* var(--text), not a distinct accent color: worked on desktop only because
   regular links there are dimmed (--text-dim) so brightness alone stood out.
   On mobile all links are brightened to --text for contrast against the
   drawer's solid panel (see .nav-links a below), which made the active link
   blend in with every other link - same color, no visible "current page"
   indicator at all. An accent color stands out against both. */
.nav-active { color: var(--primary-soft) !important; }

.page-head {
  max-width: 780px;
  margin: 0 auto;
  padding: 8.5rem 1.5rem 1rem;
  text-align: center;
}
.page-head .eyebrow { display: block; }
.page-head h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 0.6rem; }
.page-head p { color: var(--text-dim); }
.page-head-left { text-align: left; max-width: 1440px; padding-bottom: 1rem; }

@media (max-width: 620px) {
  .page-head { padding: 7rem 1.2rem 1rem; }
}

/* Docs (help-style layout) */
.help-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.4rem;
  margin-bottom: 2.5rem;
}
.help-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  padding: 1.8rem;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.help-card:hover { transform: translateY(-4px); border-color: var(--primary); }
.help-card-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(162, 101, 247, 0.12);
  color: var(--primary-soft);
  margin-bottom: 1rem;
}
.help-card h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
.help-card p { color: var(--text-dim); font-size: 0.88rem; margin-bottom: 1rem; }
.help-card-link { color: var(--primary-soft); font-weight: 600; font-size: 0.88rem; }

.help-layout {
  max-width: 1440px;
  margin: 0 auto;
  padding: 8.5rem 1.5rem 5rem;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 200px;
  gap: 2.5rem;
  align-items: start;
}

.help-sidebar { position: sticky; top: 6.5rem; }
.help-sidebar-group { margin-bottom: 1.6rem; }
.help-sidebar .help-sidebar-title {
  color: var(--text-faint);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
  padding-left: 0;
  border-left: none;
  display: block;
}
.help-sidebar a.help-sidebar-title:hover { color: var(--text-dim); }
.help-sidebar a {
  display: block;
  color: var(--text-dim);
  font-size: 0.9rem;
  padding: 0.4rem 0;
  border-left: 2px solid transparent;
  padding-left: 0.8rem;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.help-sidebar a:hover { color: var(--text); }
.help-sidebar a.active { color: var(--primary-soft); border-left-color: var(--primary); font-weight: 600; }

.help-breadcrumb {
  color: var(--text-faint);
  font-size: 0.85rem;
  margin-bottom: 1.2rem;
}
.help-breadcrumb a { color: var(--text-dim); }
.help-breadcrumb a:hover { color: var(--text); }

.help-content h1 { font-size: clamp(1.7rem, 3vw, 2.2rem); margin-bottom: 1.2rem; color: var(--primary-soft); }
.help-content h2 {
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  margin: 2rem 0 0.8rem;
}
.help-content h3 {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: var(--primary-soft);
  margin: 1.4rem 0 0.6rem;
}
.help-content p { color: var(--text-dim); font-size: 0.95rem; margin-bottom: 1rem; }
.help-content ul, .help-content ol { padding-left: 1.2rem; margin-bottom: 1.2rem; }
.help-content ul { list-style: disc; }
.help-content ol { list-style: decimal; }
.help-content li { color: var(--text-dim); font-size: 0.92rem; margin-bottom: 0.6rem; }
.help-content li a { color: var(--primary-soft); }
.help-content code {
  background: rgba(162, 101, 247, 0.12);
  color: var(--primary-soft);
  padding: 0.1rem 0.4rem;
  border-radius: 5px;
  font-size: 0.86em;
  font-family: 'Courier New', monospace;
}
.help-content pre {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  overflow-x: auto;
  margin-bottom: 1.2rem;
}
.help-content pre code { background: none; padding: 0; color: var(--text-dim); }
.help-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}
.help-content th, .help-content td {
  text-align: left;
  padding: 0.65rem 0.8rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.help-content th {
  color: var(--text-faint);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.help-content td { color: var(--text-dim); }
.help-placeholder {
  border: 1px dashed var(--card-border);
  border-radius: 12px;
  padding: 1.2rem 1.4rem;
  color: var(--text-faint);
  font-size: 0.88rem;
  font-style: italic;
}

.help-toc { position: sticky; top: 6.5rem; }
.help-toc-title {
  color: var(--text-faint);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}
.help-toc a {
  display: block;
  color: var(--text-dim);
  font-size: 0.86rem;
  padding: 0.35rem 0;
}
.help-toc a:hover { color: var(--text); }

@media (max-width: 1100px) {
  .help-layout { grid-template-columns: 200px minmax(0, 1fr); }
  .help-toc { display: none; }
}
@media (max-width: 780px) {
  /* minmax(0, 1fr), not plain 1fr: a bare 1fr track's minimum size still
     defers to its content's intrinsic width, so a page with a wide <pre>
     code block (e.g. docs/script-outfit-bags.html's Lua snippets) or a
     <table> (docs/framework-setup.html) could push this single-column grid
     track - and the whole page - wider than the viewport, even though
     .help-content pre already has overflow-x:auto. That auto only kicks in
     once the box's own size is settled; it can't stop the grid sizing
     algorithm from treating the unwrapped content's full width as a
     candidate minimum in the first place. The desktop/tablet breakpoints
     above already guard against this the same way. */
  .help-layout { grid-template-columns: minmax(0, 1fr); padding-top: 7.5rem; }
  .help-sidebar { position: static; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
  .help-sidebar-group { margin-bottom: 0.6rem; }
  .help-sidebar-title { width: 100%; }
  .catalog-toolbar { flex-direction: column; align-items: stretch; }
  /* align-items:flex-end and text-align:left both carry over from the
     desktop row layout above; stacked into a column, flex-end pushes both
     the heading and the button to the right edge instead of centering them. */
  .section-head.section-head-row { flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
}

/* The starfield's twinkle/shooting-stars are handled separately in
   js/main.js (prefersReducedMotion there stops the canvas loop after its
   first frame rather than removing the starfield outright). This covers
   everything else - drawer slides, hover states, the route progress bar.
   0.01ms rather than 0s/none is deliberate: a couple of these transitions
   (the nav/cart drawers) are watched via transitionend/transitioncancel in
   main.js to pause the starfield during the slide - a duration of exactly
   0 can skip firing those events entirely in some browsers, which would
   leave that pause logic permanently stuck. 0.01ms still fires them, just
   too fast to perceive as motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}