/*
 * FlickLabz main.css — phase 2 flattened.
 * Source: source/src/styles.css + 29 inline style blocks from these JSX files
 * (extracted verbatim, source-order):
 *   topnav.jsx, components.jsx (HeroVisual + ProductCard + Stat),
 *   games-grid.jsx, vouches.jsx, recoil-slider.jsx, tier-content.jsx,
 *   weapon-coverage.jsx, page-home.jsx, page-products.jsx,
 *   page-detail.jsx, page-status.jsx, page-support.jsx, page-mobile.jsx.
 * Do not hand-edit the "prototype CSS" sections directly — change the source
 * and re-extract. Phase 2 has no extraction tooling yet; for now, edits go
 * into the trailing RS overrides section at the bottom.
 */

/* ============================================================
   1. BASE — source/src/styles.css
   ============================================================ */

/* FlickLabz redesign — design tokens & base */
:root {
  /* Tell the browser to render native form chrome (select popups, scrollbars,
     date pickers, checkboxes, the focus ring on file inputs) in dark mode.
     Without this, Chrome opens <select> dropdowns with a white panel even
     though our page is dark — the option styling below is fighting OS defaults
     it can't override. color-scheme makes the panel itself render dark. */
  color-scheme: dark;
  --bg: #08090a;
  --bg-2: #0d0f10;
  --bg-3: #131618;
  --panel: rgba(20, 22, 24, 0.6);
  --panel-solid: #16191b;
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.12);
  --fg: #f3f5f4;
  --fg-2: #c7cdcb;
  --fg-3: #8b9290;
  --fg-4: #5b6260;
  --accent: #2b9dff;
  --accent-2: #0a6fe0;
  --accent-soft: rgba(43, 157, 255, 0.14);
  --danger: #ff4d6d;
  --warn: #ffb648;
  --radius: 6px;
  --radius-lg: 14px;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg); }
body {
  font-family: var(--sans);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
  letter-spacing: -0.005em;
  overflow-x: hidden;
}

button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ============ App shell ============ */
.app-flat {
  min-height: 100vh;
  position: relative;
}

/* ============ Admin shared (global, so views work in any order) ============ */
.admin-h {
  padding: 28px 32px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  background: rgba(255,255,255,0.01);
}
.admin-h > .row {
  flex-wrap: wrap;
}
.admin-row-actions {
  display: flex;
  gap: 6px;
}
.admin-row-actions button {
  width: 28px; height: 28px;
  border-radius: 5px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  color: var(--fg-3);
  display: grid; place-items: center;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  font-family: inherit;
}
.admin-row-actions button:hover {
  background: rgba(43, 157, 255,0.08);
  color: var(--accent);
  border-color: rgba(43, 157, 255,0.25);
}
.admin-row-img {
  width: 36px; height: 36px;
  border-radius: 6px;
  background: rgba(43, 157, 255,0.08);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.admin-row-name {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 13px;
}
.admin-row-game {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 2px;
}
.cb {
  appearance: none;
  width: 16px; height: 16px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: transparent;
  display: inline-grid; place-items: center;
  cursor: pointer;
}
.cb:checked { background: var(--accent); border-color: var(--accent); }
.cb:checked::after { content: "✓"; color: #04121f; font-size: 11px; font-weight: 700; }

/* Shared admin row-delete + add buttons (used across many forms) */
.row-del {
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--fg-3);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
  font-family: inherit;
}
.row-del:hover {
  color: #ff6688;
  border-color: rgba(255,77,109,0.3);
  background: rgba(255,77,109,0.06);
}
.btn-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  background: rgba(43, 157, 255,0.04);
  border: 1px dashed rgba(43, 157, 255,0.3);
  border-radius: 8px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  width: 100%;
  margin-top: 6px;
}
.btn-add:hover {
  background: rgba(43, 157, 255,0.1);
  border-color: rgba(43, 157, 255,0.5);
}

/* ============ Admin edit shell (product edit, category edit, etc) ============ */
.admin-edit-h {
  padding: 14px 28px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255,255,255,0.01);
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(12px);
  gap: 16px;
  flex-wrap: wrap;
}
.admin-edit {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: calc(100vh - 65px);
}
@media (max-width: 900px) {
  .admin-edit { grid-template-columns: 1fr; }
}
.admin-edit-tabs {
  background: rgba(255,255,255,0.01);
  border-right: 1px solid var(--line);
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
@media (max-width: 900px) {
  .admin-edit-tabs {
    border-right: none;
    border-bottom: 1px solid var(--line);
    flex-direction: row;
    overflow-x: auto;
    padding: 12px;
    scrollbar-width: thin;
  }
}
.admin-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-2);
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.admin-tab:hover {
  background: rgba(255,255,255,0.03);
  color: var(--fg);
}
.admin-tab.active {
  background: rgba(43, 157, 255,0.06);
  border-color: rgba(43, 157, 255,0.2);
  color: var(--accent);
}
.admin-tab-badge {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  background: rgba(255,255,255,0.05);
  padding: 1px 6px;
  border-radius: 100px;
  color: var(--fg-3);
  flex-shrink: 0;
}
@media (max-width: 900px) {
  .admin-tab-badge { margin-left: 4px; }
}
.admin-tab.active .admin-tab-badge {
  background: rgba(43, 157, 255,0.15);
  color: var(--accent);
}
.admin-edit-tabs-info {
  margin-top: auto;
  padding: 14px 12px 4px;
  border-top: 1px solid var(--line);
  margin-top: 16px;
}
@media (max-width: 900px) {
  .admin-edit-tabs-info { display: none; }
}
.admin-edit-body {
  padding: 32px 40px;
  max-width: 1100px;
  width: 100%;
}
@media (max-width: 700px) {
  .admin-edit-body { padding: 24px 20px; }
}

/* Tab content layout — used by product edit, category edit */
.tab-content { max-width: 900px; }
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } }
.f-span { grid-column: 1 / -1; }

/* ============ Customer/order shared admin table styles ============ */
.cust-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 24px 32px 0;
}
@media (max-width: 1100px) { .cust-stats { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .cust-stats { grid-template-columns: 1fr; } }
.cust-stat {
  padding: 18px 20px;
  background: linear-gradient(180deg, rgba(22,25,27,0.5), rgba(15,17,18,0.5));
  border: 1px solid var(--line);
  border-radius: 12px;
}
.cust-filters {
  display: flex;
  gap: 10px;
  padding: 20px 32px;
  align-items: center;
  flex-wrap: wrap;
}
.cust-table-wrap { padding: 0 32px 24px; }
.cust-table {
  background: linear-gradient(180deg, rgba(22,25,27,0.5), rgba(15,17,18,0.5));
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.kpi-l {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-3);
}
.kpi-v {
  font-family: var(--mono);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-top: 8px;
  line-height: 1;
}
.kpi-sub {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-4);
}

/* Filter search field — used across admin pages */
.filter-search {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 8px;
  flex: 1;
  min-width: 240px;
}
.filter-search input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--fg);
  font-family: var(--sans);
  font-size: 13px;
  flex: 1;
  min-width: 0;
}
.filter-search input::placeholder { color: var(--fg-4); }

/* Pill-group filter — All / Completed / Pending / Refunded etc */
.filter-layout {
  display: flex;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 3px;
  flex-wrap: wrap;
}
.filter-layout button {
  background: transparent;
  border: none;
  padding: 7px 13px;
  border-radius: 5px;
  color: var(--fg-3);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.filter-layout button:hover { color: var(--fg); }
.filter-layout button.active {
  background: rgba(43, 157, 255,0.1);
  color: var(--accent);
}

.app-flat::before {
  /* animated grain */
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 100;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMDAnIGhlaWdodD0nMjAwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPScwIDAgMCAwIDEgIDAgMCAwIDAgMSAgMCAwIDAgMCAxICAwIDAgMCAwLjUgMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCUyM24pJy8+PC9zdmc+");
  opacity: 0.05;
  mix-blend-mode: overlay;
  animation: grain 8s steps(8) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0,0); }
  10% { transform: translate(-2%, -3%); }
  20% { transform: translate(-4%, 2%); }
  30% { transform: translate(3%, -3%); }
  40% { transform: translate(-3%, 3%); }
  50% { transform: translate(0, 2%); }
  60% { transform: translate(2%, -2%); }
  70% { transform: translate(-1%, 3%); }
  80% { transform: translate(-3%, 0); }
  90% { transform: translate(2%, 2%); }
}

.main-flat {
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(43, 157, 255,0.06), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(43, 157, 255,0.04), transparent 60%),
    var(--bg);
  position: relative;
}
.status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ===== Main scroll area ===== */
.main {
  min-width: 0;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(43, 157, 255,0.06), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(43, 157, 255,0.04), transparent 60%),
    var(--bg);
  position: relative;
}

.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center;
  gap: 16px;
  padding: 12px 28px;
  background: rgba(8,9,10,0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.topbar .crumb {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.topbar .crumb b { color: var(--fg); font-weight: 600; }
.topbar .spacer { flex: 1; }
.topbar-search {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  padding: 7px 12px;
  border-radius: 6px;
  min-width: 240px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-3);
}
.topbar-kbd {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--fg-4);
  border: 1px solid var(--line-2);
  padding: 2px 5px;
  border-radius: 3px;
}
.topbar-cart {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--mono); font-size: 12px;
  color: var(--fg-2);
}
.topbar-cart .badge {
  background: var(--accent); color: #04121f;
  font-weight: 700; font-size: 10px;
  padding: 1px 5px; border-radius: 3px;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--fg);
  border-radius: var(--radius);
  transition: all 0.18s ease;
  position: relative;
  white-space: nowrap;
}
.btn:hover { background: rgba(255,255,255,0.04); border-color: var(--line-2); }
.btn-primary {
  background: var(--accent);
  color: #04121f;
  border-color: var(--accent);
  box-shadow: 0 0 0 0 var(--accent-soft), 0 10px 30px -10px var(--accent);
}
.btn-primary:hover {
  background: var(--accent);
  box-shadow: 0 0 0 6px var(--accent-soft), 0 14px 36px -10px var(--accent);
  transform: translateY(-1px);
}
.btn-ghost {
  background: rgba(255,255,255,0.02);
  border-color: var(--line);
}
.btn-sm { padding: 8px 14px; font-size: 11px; }
.btn-lg { padding: 16px 28px; font-size: 13px; }

/* ===== Type ===== */
.h-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 10px;
}
.h-eyebrow::before {
  content: ""; width: 24px; height: 1px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.h1 {
  font-family: var(--mono);
  font-size: clamp(40px, 5vw, 76px);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0;
  text-wrap: balance;
}
.h2 {
  font-family: var(--mono);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.028em;
  margin: 0;
  text-wrap: balance;
}
.h3 {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.018em;
  margin: 0;
}
.lead {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--fg-2);
  text-wrap: pretty;
  max-width: 60ch;
}
.mono-label {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-3);
}

/* ===== Glass card ===== */
.card {
  background: linear-gradient(180deg, rgba(22,25,27,0.7), rgba(15,17,18,0.7));
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.card::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), transparent 40%);
  pointer-events: none;
}
.card-hover { transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.card-hover:hover {
  transform: translateY(-3px);
  border-color: rgba(43, 157, 255,0.22);
  box-shadow: 0 30px 60px -30px rgba(43, 157, 255,0.18), 0 0 0 1px rgba(43, 157, 255,0.05);
}

/* ===== Sections ===== */
.section {
  padding: 96px 28px;
  max-width: 1480px;
  margin: 0 auto;
}
.section-tight { padding: 60px 28px; }
.section-hero { padding: 80px 28px 120px; max-width: 1480px; margin: 0 auto; }

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2), transparent);
  margin: 0 28px;
}

/* ===== Tags / chips ===== */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 100px;
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--fg-3);
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
}
.chip-accent {
  color: var(--accent);
  border-color: rgba(43, 157, 255,0.25);
  background: rgba(43, 157, 255,0.06);
}
.chip-sale {
  color: var(--warn);
  border-color: rgba(255,182,72,0.25);
  background: rgba(255,182,72,0.06);
}

/* ===== Backdrop primitives for placeholders ===== */
.ph {
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.025) 0 10px,
      rgba(255,255,255,0.045) 10px 20px),
    linear-gradient(135deg, #14181a, #0c0e0f);
  display: grid; place-items: center;
  color: var(--fg-4);
  font-family: var(--mono); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.14em;
  text-align: center;
  padding: 20px;
}
.ph-accent {
  background:
    repeating-linear-gradient(135deg,
      rgba(43, 157, 255,0.05) 0 10px,
      rgba(43, 157, 255,0.08) 10px 20px),
    radial-gradient(circle at 50% 50%, rgba(43, 157, 255,0.15), transparent 70%),
    #0a0c0a;
  color: rgba(43, 157, 255,0.55);
}

/* SVG icon size default */
.ico, .icon { width: 16px; height: 16px; flex-shrink: 0; }

/* utility */
.row { display: flex; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } .gap-8 { gap: 32px; }
.mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; } .mt-10 { margin-top: 40px; } .mt-12 { margin-top: 48px; }

/* Smooth scroll for in-page jumps */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Selection */
::selection { background: var(--accent); color: #04121f; }

/* Custom scrollbar (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: rgba(43, 157, 255,0.2); }

/* Focus */
:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

/* Mobile showcase frame */
.phone {
  width: 380px;
  height: 780px;
  border-radius: 44px;
  background: #050607;
  border: 1px solid var(--line-2);
  box-shadow:
    inset 0 0 0 8px #0e1011,
    inset 0 0 0 9px rgba(255,255,255,0.04),
    0 60px 80px -30px rgba(0,0,0,0.6),
    0 0 80px -20px rgba(43, 157, 255,0.2);
  overflow: hidden;
  position: relative;
}
.phone-screen {
  position: absolute;
  inset: 14px;
  border-radius: 32px;
  overflow: hidden;
  background: var(--bg);
}
.phone-notch {
  position: absolute;
  top: 22px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 28px;
  background: #050607;
  border-radius: 100px;
  z-index: 5;
}

/* Cursor for sliders */
.cursor-col { cursor: col-resize; }


/* ============================================================
   2. COMPONENTS + PAGES — extracted JSX style blocks
   ============================================================ */

/* ===== topnav.jsx — 1 block(s) ===== */
/* -- topnav.jsx block 1 -- */
.ticker-top {
          overflow: hidden;
          border-bottom: 1px solid var(--line);
          background: rgba(0,0,0,0.5);
          backdrop-filter: blur(12px);
        }
        .ticker-top .ticker-track {
          display: flex; gap: 36px;
          padding: 8px 0;
          animation: tickerScroll 60s linear infinite;
          white-space: nowrap;
        }
        .ticker-top .ticker-item {
          display: flex; align-items: center; gap: 9px;
          font-family: var(--mono); font-size: 10px;
          color: var(--fg-3); letter-spacing: 0.04em;
          flex-shrink: 0;
        }
        .ticker-top .ticker-dot {
          width: 5px; height: 5px; border-radius: 50%;
          background: var(--accent);
          box-shadow: 0 0 8px var(--accent);
        }
        @keyframes tickerScroll {
          0% { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }

        .topnav {
          position: sticky; top: 0; z-index: 50;
          /* Pure black to exactly match the FlickLabz logo background. */
          background: #000;
          border-bottom: 1px solid var(--line);
        }
        .topnav-inner {
          display: flex; align-items: center;
          gap: 36px;
          padding: 16px 32px;
          max-width: 1480px;
          margin: 0 auto;
        }
        .topnav-brand {
          display: flex; align-items: center;
          gap: 12px;
          cursor: pointer;
        }
        .topnav-brand-name {
          font-family: var(--mono);
          font-weight: 700;
          font-size: 15px;
          letter-spacing: -0.02em;
        }
        .topnav-brand-tag {
          font-family: var(--mono);
          font-size: 9px;
          color: var(--fg-4);
          letter-spacing: 0.12em;
          text-transform: uppercase;
          margin-top: 1px;
        }
        .topnav-links { display: flex; gap: 4px; flex: 1; }
        @media (max-width: 900px) { .topnav-links { display: none; } }
        .topnav-link-wrap { position: relative; }
        .topnav-link {
          display: flex; align-items: center; gap: 6px;
          padding: 8px 14px;
          background: transparent;
          border: none;
          color: var(--fg-2);
          font-family: var(--mono);
          font-size: 12px;
          font-weight: 500;
          text-transform: uppercase;
          letter-spacing: 0.08em;
          border-radius: 6px;
          transition: all 0.15s ease;
        }
        .topnav-link:hover { color: var(--fg); background: rgba(255,255,255,0.03); }
        .topnav-link.active {
          color: var(--accent);
          background: rgba(43, 157, 255,0.06);
        }

        .topnav-mega {
          position: absolute;
          top: 100%;
          left: 0;
          z-index: 60;
          min-width: 720px;
          padding-top: 14px;
        }
        .topnav-mega-bridge {
          position: absolute;
          top: 0; left: -12px; right: -12px;
          height: 18px;
        }
        .topnav-mega-inner {
          display: grid;
          grid-template-columns: 1fr 1fr 1.2fr;
          gap: 24px;
          padding: 22px;
          background: #11141500;
          background: linear-gradient(180deg, #16191b 0%, #0e1011 100%);
          border: 1px solid var(--line-2);
          border-radius: 12px;
          box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6);
        }
        .topnav-mega-h {
          font-family: var(--mono);
          font-size: 10px;
          color: var(--accent);
          text-transform: uppercase;
          letter-spacing: 0.14em;
          margin-bottom: 12px;
        }
        .topnav-mega-list { display: flex; flex-direction: column; gap: 2px; }
        .topnav-mega-item {
          display: flex; align-items: center; gap: 10px;
          padding: 8px 10px;
          font-family: var(--sans);
          font-size: 13px;
          color: var(--fg-2);
          border-radius: 5px;
          cursor: pointer;
          transition: all 0.12s ease;
        }
        .topnav-mega-item:hover {
          background: rgba(43, 157, 255,0.06);
          color: var(--fg);
        }
        .topnav-mega-feature {
          position: relative;
          padding: 18px;
          background: linear-gradient(135deg, rgba(43, 157, 255,0.08), rgba(43, 157, 255,0.02));
          border: 1px solid rgba(43, 157, 255,0.2);
          border-radius: 10px;
          overflow: hidden;
          cursor: pointer;
        }
        .topnav-mega-feature-bg {
          position: absolute;
          right: -14px; bottom: -14px;
          opacity: 0.6;
        }
        .topnav-mega-feature-t {
          font-family: var(--mono);
          font-size: 18px;
          font-weight: 700;
          margin-top: 12px;
          letter-spacing: -0.02em;
          position: relative;
          z-index: 1;
        }
        .topnav-mega-feature-d {
          font-size: 12px;
          color: var(--fg-3);
          margin-top: 6px;
          line-height: 1.5;
          position: relative;
          z-index: 1;
        }
        .topnav-mega-feature-cta {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          margin-top: 14px;
          padding: 6px 12px;
          background: var(--accent);
          color: #04121f;
          font-family: var(--mono);
          font-size: 11px;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.08em;
          border-radius: 4px;
          position: relative;
          z-index: 1;
        }

        .topnav-actions {
          display: flex; align-items: center; gap: 6px;
          margin-left: auto;
        }
        .topnav-icon-btn {
          display: inline-flex; align-items: center; gap: 8px;
          padding: 9px 12px;
          background: rgba(255,255,255,0.03);
          border: 1px solid var(--line);
          color: var(--fg-2);
          border-radius: 6px;
          font-family: var(--mono);
          font-size: 11px;
        }
        .topnav-icon-btn:hover { color: var(--accent); border-color: rgba(43, 157, 255,0.25); }
        .topnav-discord {
          color: var(--fg-2);
        }
        .topnav-signup {
          background: rgba(43, 157, 255,0.08) !important;
          border-color: rgba(43, 157, 255,0.25) !important;
          color: var(--accent) !important;
        }
        .topnav-signup:hover {
          background: rgba(43, 157, 255,0.15) !important;
        }
        .topnav-cart {
          display: inline-flex; align-items: center; gap: 8px;
          padding: 9px 14px;
          background: var(--accent);
          color: #04121f;
          border: 1px solid var(--accent);
          border-radius: 6px;
          font-family: var(--mono);
          font-size: 11px;
          font-weight: 700;
          letter-spacing: 0.05em;
          position: relative;
          box-shadow: 0 8px 20px -8px var(--accent);
        }
        .topnav-cart-badge {
          position: absolute; top: -6px; right: -6px;
          width: 16px; height: 16px;
          background: var(--bg);
          color: var(--accent);
          border: 1px solid var(--accent);
          border-radius: 50%;
          font-size: 9px;
          display: grid; place-items: center;
        }
        .topnav-burger {
          display: none;
          padding: 8px 10px;
          background: transparent;
          border: 1px solid var(--line);
          border-radius: 6px;
          flex-direction: column;
          gap: 3px;
        }
        .topnav-burger span {
          display: block;
          width: 14px; height: 1.5px;
          background: var(--fg);
        }
        @media (max-width: 900px) {
          .topnav-burger { display: flex; }
          .topnav-cart span { display: none; }
        }
        .topnav-mob {
          position: fixed; inset: 0;
          background: rgba(0,0,0,0.8);
          backdrop-filter: blur(8px);
          z-index: 100;
        }
        .topnav-mob-panel {
          position: absolute;
          right: 0; top: 0; bottom: 0;
          width: 280px;
          background: var(--bg);
          border-left: 1px solid var(--line);
        }
        .topnav-mob-list { padding: 12px; display: flex; flex-direction: column; }
        .topnav-mob-link {
          display: flex; align-items: center; justify-content: space-between;
          padding: 14px 16px;
          background: transparent;
          border: none;
          color: var(--fg);
          font-family: var(--mono);
          font-size: 13px;
          text-transform: uppercase;
          letter-spacing: 0.08em;
          border-bottom: 1px solid var(--line);
        }

/* ===== components.jsx — 3 block(s) ===== */
/* -- components.jsx block 1 -- */
.hero-visual {
          position: relative;
          width: 100%;
          aspect-ratio: 1 / 1;
          max-width: 620px;
          margin: 0 auto;
        }
        .hero-svg {
          position: absolute; inset: 0; width: 100%; height: 100%;
          filter: drop-shadow(0 0 30px rgba(43, 157, 255,0.15));
        }
        .hero-grid {
          position: absolute; inset: 0;
          background-image:
            linear-gradient(rgba(43, 157, 255,0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(43, 157, 255,0.05) 1px, transparent 1px);
          background-size: 40px 40px;
          mask-image: radial-gradient(circle at center, black 30%, transparent 70%);
          -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 70%);
        }
        .hero-orb {
          position: absolute; border-radius: 50%;
          filter: blur(60px);
          pointer-events: none;
        }
        .hero-orb-1 {
          width: 320px; height: 320px;
          background: radial-gradient(circle, rgba(43, 157, 255,0.6), transparent 70%);
          top: 20%; left: 10%;
          animation: orbFloat 12s ease-in-out infinite;
        }
        .hero-orb-2 {
          width: 220px; height: 220px;
          background: radial-gradient(circle, rgba(43, 157, 255,0.4), transparent 70%);
          bottom: 10%; right: 8%;
          animation: orbFloat 16s ease-in-out infinite reverse;
        }
        @keyframes orbFloat {
          0%, 100% { transform: translate(0, 0) scale(1); }
          50% { transform: translate(20px, -30px) scale(1.1); }
        }
        @keyframes spinRing {
          to { transform: rotate(360deg); transform-origin: center; }
        }

/* -- components.jsx block 2 -- */
.prod-card { cursor: pointer; padding: 0; transform-style: preserve-3d; }
        .prod-img {
          position: relative;
          aspect-ratio: 16 / 10;
          border-bottom: 1px solid var(--line);
          overflow: hidden;
        }
        .prod-sheen {
          position: absolute; inset: -20%;
          background: radial-gradient(circle at center, rgba(43, 157, 255,0.18), transparent 60%);
          transition: opacity 0.3s ease, transform 0.2s ease;
          pointer-events: none;
        }
        .prod-body { padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 6px; }
        .prod-game {
          font-family: var(--mono); font-size: 10px;
          color: var(--accent); letter-spacing: 0.14em;
          text-transform: uppercase;
        }
        .prod-title {
          font-family: var(--mono); font-weight: 700; font-size: 18px;
          letter-spacing: -0.02em;
        }
        .prod-desc { font-size: 13px; color: var(--fg-3); line-height: 1.5; min-height: 38px; }
        .prod-foot {
          display: flex; align-items: center; justify-content: space-between;
          padding-top: 14px; margin-top: 8px;
          border-top: 1px dashed var(--line);
        }
        .prod-price { display: flex; align-items: baseline; gap: 8px; font-family: var(--mono); }
        .price-now { font-size: 22px; font-weight: 700; color: var(--fg); }
        .price-tag { font-size: 10px; color: var(--fg-4); letter-spacing: 0.1em; }
        .strike { font-size: 13px; color: var(--fg-4); text-decoration: line-through; }
        .prod-cta {
          display: flex; align-items: center; gap: 6px;
          font-family: var(--mono); font-size: 12px;
          color: var(--accent); font-weight: 600;
          letter-spacing: 0.08em; text-transform: uppercase;
        }

/* -- components.jsx block 3 -- */
.stat { padding: 24px 0; }
        .stat-value { font-family: var(--mono); font-size: 44px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
        .stat-label { font-family: var(--mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 8px; }
        .stat-sub { font-size: 12px; color: var(--fg-4); margin-top: 4px; }

/* ===== games-grid.jsx — 2 block(s) ===== */
/* -- games-grid.jsx block 1 -- */
.gt {
          position: relative;
          overflow: hidden;
          border: 1px solid var(--line);
          border-radius: 12px;
          cursor: pointer;
          aspect-ratio: 5 / 3;
          transition: transform 0.25s ease, border-color 0.25s ease;
          transform-style: preserve-3d;
        }
        .gt-lg { aspect-ratio: 16 / 9; }
        .gt-hover { border-color: rgba(43, 157, 255,0.3); }
        .gt-bg {
          position: absolute; inset: 0;
          z-index: 0;
          transition: opacity 0.3s ease;
        }
        .gt-grid {
          position: absolute; inset: 0;
          background-image:
            linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
          background-size: 24px 24px;
          mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
          -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
          pointer-events: none;
          z-index: 1;
        }
        .gt-glow {
          position: absolute; inset: 0;
          background: radial-gradient(circle at center, rgba(43, 157, 255,0.12), transparent 70%);
          transition: opacity 0.25s ease;
          pointer-events: none;
          z-index: 1;
        }
        .gt-corner {
          position: absolute;
          width: 14px; height: 14px;
          border-color: var(--accent);
          opacity: 0.4;
          transition: opacity 0.25s ease, width 0.25s ease, height 0.25s ease;
          z-index: 2;
        }
        .gt-hover .gt-corner { opacity: 1; width: 18px; height: 18px; }
        .gt-corner-tl { top: 10px; left: 10px; border-top: 1px solid; border-left: 1px solid; }
        .gt-corner-tr { top: 10px; right: 10px; border-top: 1px solid; border-right: 1px solid; }
        .gt-corner-bl { bottom: 10px; left: 10px; border-bottom: 1px solid; border-left: 1px solid; }
        .gt-corner-br { bottom: 10px; right: 10px; border-bottom: 1px solid; border-right: 1px solid; }
        .gt-mono {
          position: absolute;
          top: 50%; left: 50%;
          transform: translate(-50%, -50%);
          font-family: var(--mono);
          font-size: 96px;
          font-weight: 800;
          letter-spacing: -0.04em;
          z-index: 1;
          transition: transform 0.2s ease;
          pointer-events: none;
        }
        .gt-lg .gt-mono { font-size: 140px; }
        .gt-body {
          position: relative;
          z-index: 3;
          padding: 20px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          height: 100%;
        }
        .gt-top {
          display: flex; justify-content: space-between;
          align-items: center;
        }
        .gt-popular {
          font-family: var(--mono);
          font-size: 9px;
          font-weight: 700;
          letter-spacing: 0.16em;
          padding: 3px 7px;
          background: rgba(43, 157, 255,0.12);
          border: 1px solid rgba(43, 157, 255,0.3);
          border-radius: 3px;
          color: var(--accent);
        }
        .gt-count {
          font-family: var(--mono);
          font-size: 10px;
          letter-spacing: 0.1em;
          color: var(--fg-3);
          text-transform: uppercase;
          margin-left: auto;
        }
        .gt-name {
          font-family: var(--mono);
          font-weight: 700;
          font-size: 22px;
          letter-spacing: -0.015em;
          color: var(--fg);
        }
        .gt-lg .gt-name { font-size: 32px; }
        .gt-foot {
          display: flex; justify-content: flex-end;
        }
        .gt-view {
          display: inline-flex; align-items: center; gap: 6px;
          font-family: var(--mono);
          font-size: 11px;
          font-weight: 600;
          color: var(--fg-2);
          text-transform: uppercase;
          letter-spacing: 0.08em;
          padding: 6px 10px;
          background: rgba(0,0,0,0.4);
          border: 1px solid var(--line);
          border-radius: 5px;
          backdrop-filter: blur(8px);
          transition: all 0.2s ease;
        }
        .gt-hover .gt-view {
          background: var(--accent);
          color: #04121f;
          border-color: var(--accent);
        }

/* -- games-grid.jsx block 2 -- */
.games-section { display: flex; flex-direction: column; gap: 20px; }
        .games-tabs {
          display: flex;
          gap: 4px;
          padding: 6px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 100px;
          align-items: center;
          flex-wrap: wrap;
        }
        .games-tab {
          padding: 7px 13px;
          background: transparent;
          border: none;
          color: var(--fg-3);
          font-family: var(--mono);
          font-size: 11px;
          font-weight: 600;
          border-radius: 100px;
          text-transform: uppercase;
          letter-spacing: 0.06em;
          transition: all 0.15s ease;
          min-width: 30px;
        }
        .games-tab:hover { color: var(--fg); background: rgba(255,255,255,0.04); }
        .games-tab.active {
          background: var(--accent);
          color: #04121f;
        }
        .games-tabs-spacer { flex: 1; }
        .games-tiles {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 14px;
        }
        @media (max-width: 1100px) { .games-tiles { grid-template-columns: repeat(3, 1fr); } }
        @media (max-width: 700px) { .games-tiles { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 480px) { .games-tiles { grid-template-columns: 1fr; } }

/* ===== vouches.jsx — 2 block(s) ===== */
/* -- vouches.jsx block 1 -- */
.vouches { display: flex; flex-direction: column; gap: 24px; }
        .vouches-stats {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 0;
          border: 1px solid var(--line);
          border-radius: 12px;
          background: rgba(255,255,255,0.015);
          overflow: hidden;
        }
        @media (max-width: 800px) { .vouches-stats { grid-template-columns: 1fr 1fr; } }
        .vouch-stat {
          padding: 24px 20px;
          border-right: 1px solid var(--line);
          border-bottom: 1px solid var(--line);
        }
        .vouches-stats > .vouch-stat:nth-child(4n) { border-right: none; }
        .vouches-stats > .vouch-stat:nth-last-child(-n+4) { border-bottom: none; }
        @media (max-width: 800px) {
          .vouches-stats > .vouch-stat:nth-child(2n) { border-right: none; }
          .vouches-stats > .vouch-stat:nth-child(2n+1) { border-right: 1px solid var(--line); }
          .vouches-stats > .vouch-stat:nth-last-child(-n+2) { border-bottom: none; }
        }
        .vouch-stat-v {
          font-family: var(--mono);
          font-size: 36px;
          font-weight: 700;
          letter-spacing: -0.03em;
          color: var(--accent);
          line-height: 1;
        }
        .vouch-stat-l {
          font-family: var(--mono);
          font-size: 11px;
          color: var(--fg-3);
          text-transform: uppercase;
          letter-spacing: 0.12em;
          margin-top: 8px;
        }

        .vouches-discord {
          border: 1px solid var(--line);
          border-radius: 14px;
          background: linear-gradient(180deg, rgba(22,25,27,0.5), rgba(15,17,18,0.5));
          overflow: hidden;
        }
        .vouches-discord-h {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 16px 24px;
          border-bottom: 1px solid var(--line);
          background: rgba(0,0,0,0.3);
        }
        .vouches-discord-name {
          font-family: var(--mono);
          font-weight: 700;
          font-size: 14px;
        }
        .vouches-discord-sub {
          font-family: var(--mono);
          font-size: 10px;
          color: var(--fg-4);
          margin-top: 2px;
          letter-spacing: 0.08em;
        }
        .vouches-grid {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          gap: 14px;
          padding: 24px;
        }
        @media (max-width: 1000px) { .vouches-grid { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 700px) { .vouches-grid { grid-template-columns: 1fr; } }
        .vouches-col { display: flex; flex-direction: column; gap: 14px; }
        .vouches-foot {
          padding: 18px 24px;
          border-top: 1px solid var(--line);
          background: rgba(0,0,0,0.3);
          display: flex;
          justify-content: center;
        }
        .vouches-cta {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          padding: 12px 20px;
          background: rgba(43, 157, 255,0.06);
          border: 1px solid rgba(43, 157, 255,0.2);
          border-radius: 8px;
          font-family: var(--mono);
          font-size: 12px;
          color: var(--accent);
          font-weight: 600;
          letter-spacing: 0.04em;
          cursor: pointer;
          transition: all 0.18s ease;
        }
        .vouches-cta:hover {
          background: rgba(43, 157, 255,0.1);
          border-color: rgba(43, 157, 255,0.4);
        }

/* -- vouches.jsx block 2 -- */
.vouch {
          padding: 18px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 10px;
          display: flex;
          flex-direction: column;
          gap: 12px;
          transition: all 0.2s ease;
        }
        .vouch:hover {
          background: rgba(255,255,255,0.035);
          border-color: rgba(43, 157, 255,0.18);
        }
        .vouch-h { display: flex; align-items: center; gap: 10px; }
        .vouch-avatar {
          width: 32px; height: 32px;
          border-radius: 50%;
          display: grid; place-items: center;
          font-family: var(--mono);
          font-weight: 700;
          color: white;
          font-size: 13px;
          flex-shrink: 0;
        }
        .vouch-name { font-family: var(--mono); font-weight: 600; font-size: 13px; }
        .vouch-handle { font-family: var(--mono); font-size: 10px; color: var(--fg-4); margin-top: 1px; }
        .vouch-text {
          font-size: 13px;
          line-height: 1.55;
          color: var(--fg-2);
          text-wrap: pretty;
        }
        .vouch-foot {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-top: 10px;
          border-top: 1px dashed var(--line);
        }
        .vouch-tag {
          font-family: var(--mono);
          font-size: 10px;
          color: var(--accent);
          letter-spacing: 0.08em;
          text-transform: uppercase;
        }
        .vouch-stars { display: flex; gap: 2px; }

/* ===== recoil-slider.jsx — 1 block(s) ===== */
/* -- recoil-slider.jsx block 1 -- */
.rs-wrap {
          display: grid;
          grid-template-columns: 280px 1fr;
          gap: 24px;
          background: linear-gradient(180deg, rgba(22,25,27,0.7), rgba(15,17,18,0.7));
          border: 1px solid var(--line);
          border-radius: 14px;
          padding: 22px;
          backdrop-filter: blur(12px);
        }
        @media (max-width: 900px) {
          .rs-wrap { grid-template-columns: 1fr; }
        }
        .rs-weapons {
          border-right: 1px solid var(--line);
          padding-right: 20px;
        }
        @media (max-width: 900px) {
          .rs-weapons { border-right: none; padding-right: 0; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
        }
        .rs-weapons-label {
          display: flex; align-items: center; justify-content: space-between;
          padding: 0 4px 12px;
        }
        .rs-count { font-family: var(--mono); font-size: 10px; color: var(--fg-4); }
        .rs-weapons-grid {
          display: flex; flex-direction: column; gap: 4px;
          max-height: 480px; overflow-y: auto;
        }
        .rs-weapon {
          display: flex; align-items: center; gap: 10px;
          padding: 10px 12px;
          background: transparent;
          border: 1px solid transparent;
          border-radius: 6px;
          text-align: left;
          color: var(--fg-2);
          transition: all 0.15s ease;
        }
        .rs-weapon:hover {
          background: rgba(255,255,255,0.03);
          color: var(--fg);
        }
        .rs-weapon.active {
          background: rgba(43, 157, 255,0.06);
          border-color: rgba(43, 157, 255,0.2);
          color: var(--fg);
        }
        .rs-weapon-ico {
          width: 32px; height: 32px;
          border-radius: 6px;
          background: rgba(43, 157, 255,0.08);
          display: grid; place-items: center;
          color: var(--accent);
          flex-shrink: 0;
        }
        .rs-weapon-info { flex: 1; min-width: 0; }
        .rs-weapon-name { font-family: var(--mono); font-size: 13px; font-weight: 600; }
        .rs-weapon-meta { font-family: var(--mono); font-size: 10px; color: var(--fg-4); margin-top: 2px; }

        .rs-viewer { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
        .rs-header {
          display: flex; align-items: flex-start; justify-content: space-between;
          gap: 16px;
        }
        .rs-weapon-title {
          font-family: var(--mono); font-size: 26px; font-weight: 700;
          letter-spacing: -0.02em; margin-top: 8px;
        }
        .rs-weapon-sub {
          font-family: var(--mono); font-size: 11px; color: var(--fg-3);
          margin-top: 4px;
        }
        .rs-toolbar { display: flex; gap: 6px; }
        .rs-tool {
          width: 32px; height: 32px;
          border-radius: 6px;
          background: rgba(255,255,255,0.03);
          border: 1px solid var(--line);
          color: var(--fg-2);
          display: grid; place-items: center;
        }
        .rs-tool svg { width: 14px; height: 14px; }
        .rs-tool:hover { color: var(--accent); border-color: rgba(43, 157, 255,0.3); }

        .rs-container {
          position: relative;
          aspect-ratio: 16 / 10;
          border-radius: 10px;
          overflow: hidden;
          user-select: none;
          cursor: col-resize;
          border: 1px solid var(--line);
          touch-action: none;
        }
        .rs-layer { position: absolute; inset: 0; }
        .rs-layer-front { z-index: 2; }
        .rs-slider-line {
          position: absolute; top: 0; bottom: 0;
          width: 2px;
          background: linear-gradient(180deg, transparent, var(--accent) 20%, var(--accent) 80%, transparent);
          transform: translateX(-50%);
          z-index: 4;
          box-shadow: 0 0 14px var(--accent);
          pointer-events: none;
        }
        .rs-handle {
          position: absolute;
          top: 50%; transform: translate(-50%, -50%);
          width: 56px; height: 56px;
          border-radius: 50%;
          background: var(--accent);
          color: #04121f;
          display: grid; place-items: center;
          z-index: 5;
          box-shadow:
            0 0 0 4px rgba(43, 157, 255,0.18),
            0 0 30px rgba(43, 157, 255,0.4),
            inset 0 0 0 2px rgba(255,255,255,0.4);
          cursor: grab;
        }
        .rs-handle:active { cursor: grabbing; }
        .rs-handle-inner { display: flex; align-items: center; gap: 2px; }

        .rs-label {
          position: absolute;
          z-index: 3;
          transition: opacity 0.2s ease;
          pointer-events: none;
        }
        .rs-label-left { left: 18px; top: 18px; }
        .rs-label-right { right: 18px; top: 18px; text-align: right; }
        .rs-label-tag {
          display: inline-flex; align-items: center; gap: 8px;
          padding: 6px 12px;
          border: 1px solid var(--line);
          border-radius: 100px;
          background: rgba(0,0,0,0.5);
          font-family: var(--mono); font-size: 10px;
          letter-spacing: 0.12em; text-transform: uppercase;
          backdrop-filter: blur(8px);
          font-weight: 600;
        }
        .rs-label-tag-accent {
          color: var(--accent);
          border-color: rgba(43, 157, 255,0.4);
          background: rgba(43, 157, 255,0.1);
        }
        .rs-dot { width: 6px; height: 6px; border-radius: 50%; }
        .rs-label-data {
          margin-top: 12px;
          font-family: var(--mono);
          font-size: 11px;
          color: var(--fg-2);
          background: rgba(0,0,0,0.4);
          padding: 10px 12px;
          border-radius: 8px;
          border: 1px solid var(--line);
          backdrop-filter: blur(8px);
          min-width: 160px;
        }
        .rs-label-data > div {
          display: flex; justify-content: space-between;
          gap: 16px;
          padding: 4px 0;
          border-bottom: 1px dashed var(--line);
        }
        .rs-label-data > div:last-child { border-bottom: none; }
        .rs-label-data span { color: var(--fg-4); }
        .rs-label-data b { color: var(--fg); font-weight: 600; }

        .rs-hud {
          position: absolute;
          font-family: var(--mono); font-size: 10px;
          color: rgba(255,255,255,0.45);
          letter-spacing: 0.14em;
          z-index: 3;
          pointer-events: none;
        }
        .rs-hud-tl { display: none; }
        .rs-hud-tr { display: none; }
        .rs-hud-bl { bottom: 12px; left: 18px; }
        .rs-hud-br { bottom: 12px; right: 18px; color: var(--accent); }

/* ===== tier-content.jsx — 1 block(s) ===== */
/* -- tier-content.jsx block 1 -- */
.tc-frame {
          padding: 32px;
          background: linear-gradient(180deg, rgba(22,25,27,0.5), rgba(15,17,18,0.5));
          border: 1px solid var(--line);
          border-radius: 16px;
        }
        @media (max-width: 700px) { .tc-frame { padding: 22px; } }
        .tc-head {
          padding-bottom: 22px;
          border-bottom: 1px solid var(--line);
          margin-bottom: 22px;
        }
        .tc-tabs {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 8px;
          padding: 6px;
          background: rgba(0,0,0,0.3);
          border: 1px solid var(--line);
          border-radius: 10px;
          margin-bottom: 22px;
        }
        @media (max-width: 600px) { .tc-tabs { grid-template-columns: 1fr; } }
        .tc-tab {
          display: flex;
          align-items: center;
          gap: 10px;
          padding: 12px 16px;
          background: transparent;
          border: 1px solid transparent;
          border-radius: 7px;
          color: var(--fg-2);
          font-family: var(--mono);
          cursor: pointer;
          transition: all 0.18s ease;
        }
        .tc-tab:hover { background: rgba(255,255,255,0.03); color: var(--fg); }
        .tc-tab.active {
          background: rgba(255,255,255,0.04);
          border-color: var(--tc);
          color: var(--fg);
          box-shadow: 0 0 0 1px var(--tc)33, inset 0 0 20px -10px var(--tc);
        }
        .tc-tab-dot {
          width: 8px; height: 8px;
          border-radius: 50%;
          flex-shrink: 0;
        }
        .tc-tab-name {
          flex: 1;
          font-weight: 600;
          font-size: 13px;
          text-align: left;
        }
        .tc-tab-price {
          font-weight: 700;
          font-size: 13px;
          color: var(--tc);
        }
        .tc-tab:not(.active) .tc-tab-price { color: var(--fg-3); }

        .tc-panel {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 32px;
          animation: tcFade 0.3s ease;
        }
        @keyframes tcFade {
          from { opacity: 0; transform: translateY(8px); }
          to { opacity: 1; transform: translateY(0); }
        }
        @media (max-width: 900px) { .tc-panel { grid-template-columns: 1fr; gap: 24px; } }

        .tc-panel-l { display: flex; flex-direction: column; gap: 14px; }
        .tc-panel-tag {
          display: inline-flex; align-items: center; gap: 8px;
          padding: 5px 12px;
          border: 1px solid;
          border-radius: 100px;
          font-family: var(--mono);
          font-size: 11px;
          font-weight: 700;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          width: max-content;
        }
        .tc-h {
          font-family: var(--mono);
          font-size: clamp(24px, 2.4vw, 32px);
          font-weight: 700;
          letter-spacing: -0.02em;
          line-height: 1.1;
          margin: 0;
        }
        .tc-hero {
          font-size: 15px;
          line-height: 1.6;
          color: var(--fg-2);
          margin: 0;
          text-wrap: pretty;
        }
        .tc-bestfor {
          display: flex; align-items: center; gap: 10px;
          padding: 12px 14px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 8px;
          font-size: 13px;
          color: var(--fg-3);
        }
        .tc-bestfor b { font-weight: 600; }
        .tc-upgrade {
          display: flex; align-items: center; gap: 10px;
          padding: 10px 14px;
          background: rgba(43, 157, 255,0.06);
          border: 1px solid rgba(43, 157, 255,0.2);
          border-radius: 8px;
          font-family: var(--mono);
          font-size: 12px;
          color: var(--accent);
        }
        .tc-upgrade b { font-weight: 700; }
        .tc-cta {
          margin-top: 8px;
          align-self: flex-start;
        }

        .tc-panel-r { display: flex; flex-direction: column; }
        .tc-features {
          display: flex; flex-direction: column;
          gap: 8px;
        }
        .tc-feat {
          display: flex; gap: 12px;
          padding: 14px 16px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 8px;
          transition: background 0.15s ease;
        }
        .tc-feat:hover { background: rgba(255,255,255,0.035); }
        .tc-feat-ico {
          width: 32px; height: 32px;
          border-radius: 7px;
          display: grid; place-items: center;
          border: 1px solid;
          flex-shrink: 0;
        }
        .tc-feat-t { font-family: var(--mono); font-weight: 700; font-size: 13px; }
        .tc-feat-d { font-size: 12px; color: var(--fg-3); margin-top: 3px; line-height: 1.5; }

/* ===== weapon-coverage.jsx — 1 block(s) ===== */
/* -- weapon-coverage.jsx block 1 -- */
.wc-frame {
          padding: 32px;
          background: linear-gradient(180deg, rgba(22,25,27,0.5), rgba(15,17,18,0.5));
          border: 1px solid var(--line);
          border-radius: 16px;
        }
        @media (max-width: 700px) { .wc-frame { padding: 20px; } }
        .wc-head {
          display: grid;
          grid-template-columns: 1.4fr 1fr;
          gap: 32px;
          padding-bottom: 24px;
          border-bottom: 1px solid var(--line);
          margin-bottom: 24px;
        }
        @media (max-width: 900px) { .wc-head { grid-template-columns: 1fr; gap: 16px; } }
        .wc-summary {
          padding: 18px 20px;
          background: rgba(0,0,0,0.3);
          border: 1px solid var(--line);
          border-radius: 10px;
          align-self: end;
          display: flex; flex-direction: column;
          gap: 8px;
        }
        .wc-summary-row {
          display: flex; justify-content: space-between;
          font-family: var(--mono); font-size: 12px;
          padding: 4px 0;
          border-bottom: 1px dashed var(--line);
        }
        .wc-summary-row:last-child { border-bottom: none; }

        .wc-progress {
          display: grid;
          grid-template-columns: repeat(${tiers.length}, 1fr);
          gap: 10px;
          margin-bottom: 22px;
        }
        @media (max-width: 700px) { .wc-progress { grid-template-columns: 1fr; } }
        .wc-tier {
          display: flex; flex-direction: column;
          gap: 8px;
          padding: 14px 16px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 10px;
          text-align: left;
          cursor: pointer;
          transition: all 0.18s ease;
        }
        .wc-tier:hover { background: rgba(255,255,255,0.04); border-color: var(--line-2); }
        .wc-tier.active {
          background: rgba(43, 157, 255,0.04);
          border-color: var(--tc);
          box-shadow: inset 0 0 30px -10px var(--tc);
        }
        .wc-tier-h { display: flex; align-items: center; gap: 10px; }
        .wc-tier-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
        .wc-tier-name {
          font-family: var(--mono); font-weight: 700; font-size: 13px;
          flex: 1;
        }
        .wc-tier-price { font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--fg-3); }
        .wc-tier.active .wc-tier-price { color: var(--tc); }
        .wc-tier-bar {
          height: 3px;
          background: rgba(255,255,255,0.05);
          border-radius: 100px;
          overflow: hidden;
        }
        .wc-tier-fill { height: 100%; border-radius: 100px; transition: width 0.3s ease; }
        .wc-tier-count {
          font-family: var(--mono); font-size: 11px;
          color: var(--fg-3);
        }

        .wc-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
        .wc-pill {
          display: inline-flex; align-items: center; gap: 8px;
          padding: 7px 14px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 100px;
          font-family: var(--mono); font-size: 11px;
          color: var(--fg-2);
          font-weight: 600;
        }
        .wc-pill:hover { background: rgba(255,255,255,0.04); }
        .wc-pill.active {
          background: var(--accent);
          color: #04121f;
          border-color: var(--accent);
        }
        .wc-pill-n {
          font-family: var(--mono); font-size: 10px;
          background: rgba(255,255,255,0.08);
          padding: 1px 6px;
          border-radius: 100px;
          font-weight: 700;
        }
        .wc-pill.active .wc-pill-n { background: rgba(0,0,0,0.2); color: #04121f; }
        .wc-pill-dot { width: 6px; height: 6px; border-radius: 50%; }

        .wc-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 12px;
        }
        @media (max-width: 1100px) { .wc-grid { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 600px) { .wc-grid { grid-template-columns: 1fr; } }
        .wc {
          padding: 14px 16px;
          background: rgba(255,255,255,0.025);
          border: 1px solid var(--line);
          border-radius: 10px;
          display: flex; flex-direction: column;
          gap: 12px;
          transition: all 0.2s ease;
          position: relative;
          overflow: hidden;
        }
        .wc-owned { background: rgba(43, 157, 255,0.04); border-color: rgba(43, 157, 255,0.18); }
        .wc-owned::before {
          content: ""; position: absolute;
          left: 0; top: 0; bottom: 0; width: 2px;
          background: var(--accent);
        }
        .wc-locked { opacity: 0.85; }
        .wc-locked .wc-ico { color: var(--fg-4); background: rgba(255,255,255,0.04); }
        .wc-locked .wc-name { color: var(--fg-2); }
        .wc-exclusive { background: rgba(255,255,255,0.035); }

        .wc-h { display: flex; align-items: center; gap: 12px; }
        .wc-ico {
          width: 32px; height: 32px;
          border-radius: 6px;
          background: rgba(43, 157, 255,0.08);
          color: var(--accent);
          display: grid; place-items: center;
          flex-shrink: 0;
        }
        .wc-info { flex: 1; min-width: 0; }
        .wc-name { font-family: var(--mono); font-weight: 700; font-size: 14px; }
        .wc-meta { font-family: var(--mono); font-size: 10px; color: var(--fg-3); margin-top: 2px; letter-spacing: 0.06em; }
        .wc-lock {
          width: 24px; height: 24px;
          border-radius: 5px;
          background: rgba(255,148,77,0.1);
          color: #ff944d;
          display: grid; place-items: center;
          border: 1px solid rgba(255,148,77,0.25);
        }

        .wc-tiers { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
        .wc-badge {
          padding: 3px 8px;
          border-radius: 4px;
          font-family: var(--mono); font-size: 10px;
          font-weight: 700;
          letter-spacing: 0.06em;
          border: 1px solid;
          min-width: 28px;
          text-align: center;
        }
        .wc-badge-has {
          background: var(--bc);
          color: #04121f;
          border-color: var(--bc);
        }
        .wc-badge-no {
          background: rgba(255,255,255,0.02);
          color: var(--fg-4);
          border-color: var(--line);
          text-decoration: line-through;
          text-decoration-color: rgba(255,255,255,0.3);
        }
        .wc-badge-current {
          box-shadow: 0 0 0 2px rgba(0,0,0,0.4), 0 0 14px var(--bc);
          transform: scale(1.05);
        }
        .wc-excl {
          margin-left: 4px;
          padding: 3px 8px;
          border-radius: 4px;
          background: rgba(255,255,255,0.02);
          border: 1px solid;
          font-family: var(--mono); font-size: 9px;
          font-weight: 700;
          letter-spacing: 0.08em;
          text-transform: uppercase;
        }

        .wc-upsell {
          display: inline-flex; align-items: center; gap: 6px;
          padding: 6px 10px;
          background: rgba(0,0,0,0.3);
          border: 1px solid;
          border-radius: 5px;
          font-family: var(--mono); font-size: 10px;
          font-weight: 700;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          width: max-content;
          cursor: pointer;
        }
        .wc-upsell:hover { background: rgba(0,0,0,0.5); }

/* ===== page-home.jsx — 3 block(s) ===== */
/* -- page-home.jsx block 1 -- */
.home { padding-bottom: 0; }
        .hero {
          position: relative;
          padding: 64px 28px 24px;
          max-width: 1480px; margin: 0 auto;
          overflow: hidden;
        }
        .hero-inner {
          display: grid;
          grid-template-columns: 1.1fr 0.9fr;
          gap: 60px;
          align-items: center;
          padding: 60px 0 80px;
        }
        @media (max-width: 1100px) {
          .hero-inner { grid-template-columns: 1fr; gap: 40px; }
        }
        .hero-h1 { margin-top: 18px; }
        .grad-text {
          background: linear-gradient(135deg, var(--accent), #66ffaa 50%, var(--accent));
          background-size: 200% 100%;
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
          animation: gradShift 6s ease infinite;
        }
        @keyframes gradShift {
          0%, 100% { background-position: 0% 50%; }
          50% { background-position: 100% 50%; }
        }
        .hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
        .hero-trust {
          display: flex; align-items: center; gap: 18px;
          font-family: var(--mono); font-size: 12px;
          color: var(--fg-3);
        }
        .hero-trust b { color: var(--fg); font-weight: 600; }
        .trust-row { display: flex; align-items: center; gap: 4px; }
        .trust-sep { width: 1px; height: 14px; background: var(--line-2); }

        .ticker {
          margin: 0 -28px;
          overflow: hidden;
          border-top: 1px solid var(--line);
          border-bottom: 1px solid var(--line);
          background: rgba(0,0,0,0.3);
        }
        .ticker-track {
          display: flex; gap: 40px;
          padding: 12px 0;
          animation: tickerScroll 60s linear infinite;
          white-space: nowrap;
        }
        .ticker-item {
          display: flex; align-items: center; gap: 10px;
          font-family: var(--mono); font-size: 11px;
          color: var(--fg-3); letter-spacing: 0.04em;
          flex-shrink: 0;
        }
        .ticker-dot {
          width: 6px; height: 6px; border-radius: 50%;
          background: var(--accent);
          box-shadow: 0 0 10px var(--accent);
        }
        @keyframes tickerScroll {
          0% { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }

        .games-strip {
          padding: 40px 28px;
          max-width: 1480px; margin: 0 auto;
        }
        .games-inner { display: flex; flex-direction: column; gap: 16px; }
        .games-label { display: flex; align-items: center; justify-content: space-between; }
        .games-grid { display: flex; flex-wrap: wrap; gap: 8px; }
        .game-pill {
          display: inline-flex; align-items: center; gap: 8px;
          padding: 8px 14px;
          border: 1px solid var(--line);
          border-radius: 100px;
          font-family: var(--mono); font-size: 12px;
          color: var(--fg-2);
          background: rgba(255,255,255,0.02);
          transition: all 0.18s ease;
        }
        .game-pill:hover {
          border-color: rgba(43, 157, 255,0.3);
          color: var(--fg);
          background: rgba(43, 157, 255,0.04);
        }

        .sect-head {
          display: flex; align-items: flex-end; justify-content: space-between;
          gap: 24px;
          flex-wrap: wrap;
        }
        .prod-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 20px;
        }
        .prod-grid-4 {
          grid-template-columns: repeat(4, 1fr);
        }
        @media (max-width: 1200px) { .prod-grid-4 { grid-template-columns: repeat(3, 1fr); } }
        @media (max-width: 1100px) { .prod-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 700px) { .prod-grid { grid-template-columns: 1fr; } }

        .why-grid {
          display: grid;
          grid-template-columns: 1fr 1.2fr;
          gap: 0;
        }
        @media (max-width: 1000px) { .why-grid { grid-template-columns: 1fr; } }
        .why-side {
          padding: 48px;
          border-right: 1px solid var(--line);
        }
        @media (max-width: 1000px) { .why-side { border-right: none; border-bottom: 1px solid var(--line); } }
        .stats {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 0;
          border-top: 1px solid var(--line);
        }
        .stats > div {
          padding: 24px 16px;
          border-right: 1px solid var(--line);
          border-bottom: 1px solid var(--line);
        }
        .stats > div:nth-child(2n) { border-right: none; }
        .stats > div:nth-last-child(-n+2) { border-bottom: none; }
        .why-grid-2 {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 0;
        }
        @media (max-width: 700px) { .why-grid-2 { grid-template-columns: 1fr; } }
        .feat {
          padding: 32px;
          border-right: 1px solid var(--line);
          border-bottom: 1px solid var(--line);
          transition: background 0.2s ease;
        }
        .feat:hover { background: rgba(43, 157, 255,0.025); }
        .why-grid-2 .feat:nth-child(2n) { border-right: none; }
        .why-grid-2 .feat:nth-last-child(-n+2) { border-bottom: none; }
        .feat-ico {
          width: 40px; height: 40px;
          border-radius: 8px;
          background: rgba(43, 157, 255,0.08);
          color: var(--accent);
          display: grid; place-items: center;
          margin-bottom: 16px;
          border: 1px solid rgba(43, 157, 255,0.2);
        }
        .feat-t {
          font-family: var(--mono); font-weight: 700; font-size: 16px;
          margin-bottom: 6px;
        }
        .feat-d { color: var(--fg-3); font-size: 13px; line-height: 1.55; }

        .compat-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 14px;
        }
        @media (max-width: 1000px) { .compat-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px) { .compat-grid { grid-template-columns: 1fr; } }
        .compat { padding: 22px; }
        .compat-ico {
          width: 26px; height: 26px;
          border-radius: 6px;
          display: grid; place-items: center;
        }
        .compat-ico.ok { background: rgba(43, 157, 255,0.1); color: var(--accent); }
        .compat-ico.no { background: rgba(255,255,255,0.04); color: var(--fg-4); }
        .compat-d { color: var(--fg-3); font-size: 13px; margin-top: 14px; padding-left: 38px; line-height: 1.5; }

        .faq-wrap {
          display: grid;
          grid-template-columns: 1fr 1.4fr;
          gap: 60px;
        }
        @media (max-width: 1000px) { .faq-wrap { grid-template-columns: 1fr; gap: 30px; } }
        .faq-list { display: flex; flex-direction: column; gap: 4px; }

        .final-cta { padding: 0; overflow: hidden; position: relative; }
        .final-grid {
          display: grid;
          grid-template-columns: 1.4fr 1fr;
          gap: 60px;
          padding: 56px;
          align-items: center;
          position: relative;
        }
        @media (max-width: 900px) { .final-grid { grid-template-columns: 1fr; padding: 40px; } }
        .final-glow {
          position: absolute;
          width: 500px; height: 500px;
          background: radial-gradient(circle, rgba(43, 157, 255,0.18), transparent 70%);
          right: -100px; top: -100px;
          filter: blur(40px);
          pointer-events: none;
        }
        .final-h { margin-top: 18px; line-height: 0.98; }
        .final-stats {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 0;
          border: 1px solid var(--line);
          border-radius: 12px;
          background: rgba(0,0,0,0.3);
        }
        .final-stats > div {
          padding: 28px 24px;
          border-right: 1px solid var(--line);
          border-bottom: 1px solid var(--line);
        }
        .final-stats > div:nth-child(2n) { border-right: none; }
        .final-stats > div:nth-last-child(-n+2) { border-bottom: none; }

/* -- page-home.jsx block 2 -- */
.faq {
          border: 1px solid var(--line);
          border-radius: 10px;
          background: rgba(255,255,255,0.015);
          overflow: hidden;
          transition: all 0.2s ease;
        }
        .faq.open {
          border-color: rgba(43, 157, 255,0.2);
          background: rgba(43, 157, 255,0.025);
        }
        .faq-q {
          width: 100%;
          padding: 18px 22px;
          background: transparent;
          border: none;
          color: var(--fg);
          font-family: var(--mono);
          font-size: 14px;
          font-weight: 600;
          text-align: left;
          display: flex;
          align-items: center;
          gap: 14px;
        }
        .faq-q-num {
          font-family: var(--mono); color: var(--accent);
          width: 14px; text-align: center;
          font-size: 16px;
        }
        .faq-a-wrap {
          max-height: 0;
          overflow: hidden;
          transition: max-height 0.3s ease;
        }
        .faq-a {
          padding: 0 22px 18px 50px;
          color: var(--fg-3);
          font-size: 14px;
          line-height: 1.6;
        }

/* -- page-home.jsx block 3 -- */
.footer {
          /* Full-bleed pure black bar to exactly match the FlickLabz logo background. */
          border-top: 1px solid var(--line);
          background: #000;
          padding: 60px 28px 30px;
          margin-top: 100px;
        }
        .footer-grid {
          max-width: 1480px;
          margin: 0 auto;
          display: grid;
          grid-template-columns: 1.5fr 1fr 1fr 1fr;
          gap: 60px;
          padding-bottom: 40px;
          border-bottom: 1px solid var(--line);
        }
        @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; } }
        .footer-brand { display: flex; flex-direction: column; gap: 20px; }
        .side-brand-mark {
          width: 36px; height: 36px;
          background: var(--accent);
          color: #04121f;
          border-radius: 6px;
          display: grid; place-items: center;
          font-family: var(--mono); font-weight: 800;
          box-shadow: 0 0 20px -5px var(--accent);
        }
        .footer-name { font-family: var(--mono); font-weight: 700; font-size: 16px; }
        .footer-tag { font-size: 12px; color: var(--fg-3); margin-top: 2px; }
        .footer-status {
          display: inline-flex; align-items: center; gap: 8px;
          padding: 6px 12px;
          background: rgba(43, 157, 255,0.06);
          border: 1px solid rgba(43, 157, 255,0.18);
          border-radius: 100px;
          font-family: var(--mono);
          font-size: 11px;
          color: var(--accent);
          width: max-content;
        }
        .footer-col { display: flex; flex-direction: column; gap: 12px; }
        .footer-h { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg-3); margin-bottom: 4px; }
        .footer-link { font-size: 13px; color: var(--fg-2); cursor: pointer; transition: color 0.15s ease; }
        .footer-link:hover { color: var(--accent); }
        .footer-bottom {
          max-width: 1480px; margin: 0 auto;
          display: flex; align-items: center; justify-content: space-between;
          padding-top: 24px;
        }

/* ===== page-products.jsx — 4 block(s) ===== */
/* -- page-products.jsx block 1 -- */
.products-head {
          padding: 60px 28px 30px;
          max-width: 1480px; margin: 0 auto;
          border-bottom: 1px solid var(--line);
        }
        .products-head-inner {
          display: flex;
          justify-content: space-between;
          align-items: flex-end;
          gap: 40px;
          flex-wrap: wrap;
        }
        .prod-stats {
          display: flex; gap: 32px;
          padding: 18px 24px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 12px;
        }
        .prod-stat { text-align: center; }
        .prod-stat-val { font-family: var(--mono); font-size: 28px; font-weight: 700; line-height: 1; color: var(--accent); }
        .prod-stat-lab { font-family: var(--mono); font-size: 10px; color: var(--fg-3); margin-top: 6px; letter-spacing: 0.14em; text-transform: uppercase; }

        .filters {
          padding: 24px 28px 0;
          max-width: 1480px; margin: 0 auto;
        }
        .filter-row {
          display: flex; gap: 12px;
          align-items: center;
          flex-wrap: wrap;
        }
        .filter-search {
          display: flex; align-items: center; gap: 10px;
          padding: 10px 14px;
          background: rgba(255,255,255,0.03);
          border: 1px solid var(--line);
          border-radius: 8px;
          flex: 1;
          min-width: 280px;
        }
        .filter-search input {
          background: transparent; border: none; outline: none;
          color: var(--fg); font-family: var(--sans);
          font-size: 14px;
          flex: 1;
        }
        .filter-search input::placeholder { color: var(--fg-4); }
        .filter-clear {
          background: transparent; border: none;
          font-family: var(--mono); font-size: 10px;
          color: var(--fg-3); text-transform: uppercase;
          letter-spacing: 0.1em;
        }
        .filter-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
        .filter-toggle {
          display: flex; align-items: center; gap: 8px;
          padding: 10px 14px;
          border-radius: 8px;
          background: rgba(255,255,255,0.03);
          border: 1px solid var(--line);
          font-family: var(--mono); font-size: 12px;
          color: var(--fg-2);
        }
        .filter-toggle.active {
          background: rgba(43, 157, 255,0.08);
          border-color: rgba(43, 157, 255,0.3);
          color: var(--accent);
        }
        .filter-toggle-dot {
          width: 8px; height: 8px;
          border-radius: 50%;
          background: var(--fg-4);
        }
        .filter-toggle.active .filter-toggle-dot { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
        .filter-layout {
          display: flex;
          background: rgba(255,255,255,0.03);
          border: 1px solid var(--line);
          border-radius: 8px;
          padding: 3px;
        }
        .filter-layout button {
          background: transparent; border: none;
          padding: 7px 9px;
          border-radius: 5px;
          color: var(--fg-3);
        }
        .filter-layout button.active {
          background: rgba(43, 157, 255,0.1);
          color: var(--accent);
        }
        .filter-active {
          display: flex; align-items: center; gap: 8px;
          padding: 16px 0;
          border-bottom: 1px solid var(--line);
          flex-wrap: wrap;
        }

        .prod-list { display: flex; flex-direction: column; gap: 10px; }
        .empty {
          padding: 80px 40px;
          text-align: center;
          display: flex; flex-direction: column; align-items: center; gap: 12px;
        }
        .empty-ico {
          width: 60px; height: 60px;
          border-radius: 50%;
          background: rgba(255,255,255,0.03);
          border: 1px solid var(--line);
          display: grid; place-items: center;
          color: var(--fg-3);
        }

/* -- page-products.jsx block 2 -- */
.dd { position: relative; }
        .dd-btn {
          display: flex; align-items: center; gap: 8px;
          padding: 10px 14px;
          border-radius: 8px;
          background: rgba(255,255,255,0.03);
          border: 1px solid var(--line);
          font-family: var(--mono); font-size: 12px;
          color: var(--fg);
        }
        .dd-label { color: var(--fg-4); }
        .dd-menu {
          position: absolute;
          top: calc(100% + 6px);
          left: 0; min-width: 200px;
          background: #14181a;
          border: 1px solid var(--line-2);
          border-radius: 8px;
          padding: 4px;
          z-index: 30;
          box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5);
        }
        .dd-opt {
          display: flex; align-items: center; gap: 10px;
          padding: 8px 12px;
          background: transparent;
          border: none;
          color: var(--fg-2);
          font-family: var(--mono); font-size: 12px;
          width: 100%;
          text-align: left;
          border-radius: 5px;
        }
        .dd-opt:hover { background: rgba(255,255,255,0.04); color: var(--fg); }
        .dd-opt.active { color: var(--accent); background: rgba(43, 157, 255,0.05); }

/* -- page-products.jsx block 3 -- */
.filter-chip {
          display: inline-flex; align-items: center; gap: 6px;
          padding: 4px 4px 4px 10px;
          background: rgba(43, 157, 255,0.08);
          border: 1px solid rgba(43, 157, 255,0.2);
          border-radius: 100px;
          font-family: var(--mono); font-size: 11px;
          color: var(--accent);
        }
        .filter-chip button {
          background: rgba(43, 157, 255,0.18);
          color: var(--accent);
          border: none;
          width: 18px; height: 18px;
          border-radius: 50%;
          font-size: 13px;
          line-height: 1;
        }

/* -- page-products.jsx block 4 -- */
.prod-row {
          display: grid;
          grid-template-columns: 180px 1fr auto;
          gap: 24px;
          padding: 16px;
          align-items: center;
          cursor: pointer;
        }
        .prod-row-img {
          position: relative;
          aspect-ratio: 16 / 10;
          border-radius: 8px;
          overflow: hidden;
        }
        .prod-row-meta { display: flex; gap: 6px; margin-bottom: 6px; }
        .prod-row-name { font-family: var(--mono); font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }
        .prod-row-desc { color: var(--fg-3); font-size: 13px; margin-top: 4px; max-width: 60ch; line-height: 1.5; }
        .prod-row-foot { display: flex; flex-direction: column; gap: 14px; align-items: flex-end; padding-right: 12px; }
        .prod-price { display: flex; align-items: baseline; gap: 8px; font-family: var(--mono); }

/* ===== page-detail.jsx — 2 block(s) ===== */
/* -- page-detail.jsx block 1 -- */
.pd-hero {
          padding: 32px 28px 60px;
          max-width: 1480px;
          margin: 0 auto;
        }
        .pd-bread {
          display: flex; align-items: center; gap: 8px;
          font-family: var(--mono); font-size: 11px;
          color: var(--fg-3);
          text-transform: uppercase; letter-spacing: 0.1em;
          padding: 20px 0;
        }
        .pd-grid {
          display: grid;
          grid-template-columns: 1.2fr 1fr;
          gap: 60px;
          margin-top: 20px;
        }
        @media (max-width: 1100px) { .pd-grid { grid-template-columns: 1fr; } }

        .pd-gallery { display: flex; flex-direction: column; gap: 12px; }
        .pd-main-img {
          position: relative;
          aspect-ratio: 4 / 3;
          border-radius: 14px;
          border: 1px solid var(--line);
          overflow: hidden;
          background: #0c0e0f;
        }
        .pd-img-hud {
          position: absolute;
          font-family: var(--mono); font-size: 10px;
          color: rgba(43, 157, 255,0.5);
          letter-spacing: 0.1em;
          padding: 6px 10px;
          background: rgba(0,0,0,0.4);
          backdrop-filter: blur(8px);
          border: 1px solid rgba(43, 157, 255,0.15);
          border-radius: 4px;
        }
        .pd-img-hud-tl { top: 14px; left: 14px; }
        .pd-img-hud-tr { top: 14px; right: 14px; }
        .pd-nav {
          position: absolute;
          top: 50%; transform: translateY(-50%);
          width: 36px; height: 36px;
          border-radius: 50%;
          background: rgba(0,0,0,0.5);
          border: 1px solid var(--line-2);
          color: var(--fg);
          display: grid; place-items: center;
          backdrop-filter: blur(8px);
        }
        .pd-nav:hover { background: var(--accent); color: #04121f; border-color: var(--accent); }
        .pd-nav-l { left: 12px; }
        .pd-nav-r { right: 12px; }
        .pd-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
        .pd-thumb {
          position: relative;
          aspect-ratio: 4 / 3;
          border-radius: 8px;
          overflow: hidden;
          border: 1px solid var(--line);
          background: transparent;
          padding: 0;
          cursor: pointer;
        }
        .pd-thumb.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

        .pd-buy {
          position: sticky;
          top: 120px;
          align-self: start;
        }
        .pd-tags { display: flex; flex-wrap: wrap; gap: 6px; }
        .pd-meta {
          display: flex; align-items: center; gap: 10px;
          font-family: var(--mono); font-size: 12px;
          color: var(--fg-3);
        }
        .pd-tier-list { display: flex; flex-direction: column; gap: 8px; }
        .pd-tier {
          display: flex; align-items: center; gap: 14px;
          padding: 14px 18px;
          border: 1px solid var(--line);
          background: rgba(255,255,255,0.02);
          border-radius: 10px;
          text-align: left;
          color: var(--fg-2);
        }
        .pd-tier.active {
          border-color: rgba(43, 157, 255,0.4);
          background: rgba(43, 157, 255,0.04);
          box-shadow: 0 0 0 1px rgba(43, 157, 255,0.2), inset 0 0 30px -10px rgba(43, 157, 255,0.1);
        }
        .pd-tier-radio {
          width: 16px; height: 16px;
          border-radius: 50%;
          border: 1.5px solid var(--fg-4);
          display: grid; place-items: center;
          flex-shrink: 0;
        }
        .pd-tier.active .pd-tier-radio { border-color: var(--accent); }
        .pd-tier-dot {
          width: 8px; height: 8px;
          border-radius: 50%;
          background: var(--accent);
          box-shadow: 0 0 8px var(--accent);
        }
        .pd-tier-info { flex: 1; }
        .pd-tier-name { font-family: var(--mono); font-weight: 600; font-size: 14px; display: flex; align-items: center; flex-wrap: wrap; }
        .pd-tier-desc { font-size: 12px; color: var(--fg-3); margin-top: 4px; }
        .pd-tier-price {
          font-family: var(--mono); font-weight: 700; font-size: 20px;
        }
        .pd-tier.active .pd-tier-price { color: var(--accent); }

        .pd-buy-row { display: flex; gap: 12px; align-items: stretch; }
        .pd-qty {
          display: flex; align-items: center;
          border: 1px solid var(--line-2);
          border-radius: 8px;
          padding: 2px;
        }
        .pd-qty button {
          width: 38px; height: 44px;
          background: transparent;
          border: none;
          color: var(--fg-2);
          display: grid; place-items: center;
          border-radius: 6px;
        }
        .pd-qty button:hover { background: rgba(255,255,255,0.04); color: var(--accent); }
        .pd-qty-val { width: 36px; text-align: center; font-family: var(--mono); font-weight: 600; }
        .pd-buy-cta { flex: 1; }

        .pd-perks {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 14px;
          padding-top: 24px;
          border-top: 1px solid var(--line);
        }
        .pd-perk { display: flex; gap: 10px; align-items: flex-start; }
        .pd-perk-t { font-family: var(--mono); font-size: 12px; font-weight: 600; }
        .pd-perk-d { font-size: 11px; color: var(--fg-3); margin-top: 2px; }

        .pd-recoil-section {}
        .pd-recoil-frame {
          position: relative;
          padding: 60px;
          border-radius: 18px;
          background:
            radial-gradient(800px 400px at 50% -20%, rgba(43, 157, 255,0.08), transparent 60%),
            linear-gradient(180deg, rgba(15,18,20,0.6), rgba(8,9,10,0.4));
          border: 1px solid var(--line);
        }
        @media (max-width: 800px) { .pd-recoil-frame { padding: 24px; } }
        .pd-recoil-corner {
          position: absolute;
          width: 30px; height: 30px;
          border: 1px solid var(--accent);
          opacity: 0.6;
        }
        .pd-recoil-corner-tl { top: 14px; left: 14px; border-right: none; border-bottom: none; }
        .pd-recoil-corner-tr { top: 14px; right: 14px; border-left: none; border-bottom: none; }
        .pd-recoil-corner-bl { bottom: 14px; left: 14px; border-right: none; border-top: none; }
        .pd-recoil-corner-br { bottom: 14px; right: 14px; border-left: none; border-top: none; }
        .pd-recoil-head { max-width: 760px; }

        .pd-info-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 60px;
        }
        @media (max-width: 1000px) { .pd-info-grid { grid-template-columns: 1fr; gap: 40px; } }
        .pd-features { display: flex; flex-direction: column; gap: 12px; }
        .pd-feat {
          display: flex; align-items: center; gap: 12px;
          padding: 14px 16px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 8px;
          font-size: 13px;
          color: var(--fg-2);
        }
        .pd-reqs { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
        .pd-req {
          display: flex; gap: 12px;
          padding: 16px 18px;
          background: var(--bg);
          align-items: center;
        }
        .pd-req-ico {
          width: 32px; height: 32px;
          background: rgba(43, 157, 255,0.08);
          color: var(--accent);
          border-radius: 6px;
          display: grid; place-items: center;
          flex-shrink: 0;
        }
        .pd-req-t { font-family: var(--mono); font-size: 11px; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.1em; }
        .pd-req-v { font-size: 14px; margin-top: 3px; }

        .pd-specs { padding: 40px; }
        .pd-specs-row {
          display: grid; grid-template-columns: 1fr 1.2fr;
          gap: 40px;
          align-items: center;
        }
        @media (max-width: 900px) { .pd-specs-row { grid-template-columns: 1fr; } }

        .faq-wrap-pd { max-width: 880px; margin: 0 auto; }

/* -- page-detail.jsx block 2 -- */
.sens-curve {
          background: #0a0c0d;
          border: 1px solid var(--line);
          border-radius: 10px;
          padding: 20px;
        }
        .sens-vals { display: flex; gap: 30px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
        .sens-num { font-family: var(--mono); font-size: 28px; font-weight: 700; color: var(--accent); margin-top: 4px; }
        .sens-graph { padding: 16px 0; }
        .sens-slider {
          width: 100%;
          height: 4px;
          border-radius: 100px;
          background: var(--line);
          appearance: none;
          margin-top: 8px;
        }
        .sens-slider::-webkit-slider-thumb {
          appearance: none;
          width: 18px; height: 18px;
          border-radius: 50%;
          background: var(--accent);
          box-shadow: 0 0 14px var(--accent);
          cursor: grab;
        }
        .sens-labels {
          display: flex; justify-content: space-between;
          font-family: var(--mono); font-size: 10px;
          color: var(--fg-4); text-transform: uppercase;
          letter-spacing: 0.1em;
          padding-top: 8px;
        }

/* ===== page-status.jsx — 3 block(s) ===== */
/* -- page-status.jsx block 1 -- */
.stat-badge {
          display: inline-flex; align-items: center; gap: 7px;
          padding: 4px 10px;
          border: 1px solid;
          border-radius: 100px;
          font-family: var(--mono);
          font-size: 10px;
          font-weight: 700;
          letter-spacing: 0.12em;
          text-transform: uppercase;
          white-space: nowrap;
        }
        .stat-badge-lg { padding: 6px 14px; font-size: 11px; }
        .stat-badge-dot {
          width: 6px; height: 6px;
          border-radius: 50%;
        }
        @keyframes stat-pulse {
          0%, 100% { opacity: 1; transform: scale(1); }
          50% { opacity: 0.5; transform: scale(0.7); }
        }

/* -- page-status.jsx block 2 -- */
.status-hero {
          padding: 60px 28px;
          max-width: 1480px; margin: 0 auto;
        }
        .status-hero-inner {
          display: grid;
          grid-template-columns: 1.3fr 1fr;
          gap: 40px;
          align-items: center;
        }
        @media (max-width: 1000px) { .status-hero-inner { grid-template-columns: 1fr; } }

        .status-summary { padding: 22px; }
        .status-summary-h {
          display: flex; justify-content: space-between;
          padding-bottom: 18px;
          border-bottom: 1px solid var(--line);
          align-items: center;
        }
        .status-counts {
          display: flex; flex-direction: column;
          gap: 4px;
          padding-top: 16px;
        }
        .status-count {
          display: flex; flex-direction: column;
          background: transparent;
          border: 1px solid transparent;
          padding: 8px 10px;
          border-radius: 6px;
          cursor: pointer;
          transition: all 0.15s ease;
          text-align: left;
        }
        .status-count:hover { background: rgba(255,255,255,0.03); }
        .status-count.active { background: rgba(255,255,255,0.04); border-color: var(--line-2); }
        .status-count-row { display: flex; align-items: center; gap: 10px; }
        .status-count-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
        .status-count-label { font-family: var(--mono); font-size: 12px; font-weight: 600; flex: 1; }
        .status-count-n { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--c); }
        .status-count-bar {
          height: 3px; border-radius: 100px;
          background: rgba(255,255,255,0.05);
          margin-top: 8px;
          overflow: hidden;
        }
        .status-count-fill { height: 100%; transition: width 0.4s ease; border-radius: 100px; }

        .status-pills-section {
          padding: 16px 28px 24px;
          max-width: 1480px; margin: 0 auto;
          border-top: 1px solid var(--line);
          border-bottom: 1px solid var(--line);
        }
        .status-pills-h {
          display: flex; justify-content: space-between;
          align-items: center;
          padding: 12px 0 16px;
        }
        .status-pills {
          display: flex;
          gap: 6px;
          align-items: center;
          overflow-x: auto;
          scrollbar-width: thin;
          scrollbar-color: rgba(43, 157, 255,0.3) transparent;
          padding-bottom: 10px;
          margin: 0 -8px;
          padding-left: 8px;
          padding-right: 8px;
          mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
          -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 24px), transparent 100%);
        }
        .status-pills::-webkit-scrollbar { height: 4px; }
        .status-pills::-webkit-scrollbar-track { background: transparent; }
        .status-pills::-webkit-scrollbar-thumb {
          background: rgba(43, 157, 255,0.25);
          border-radius: 100px;
        }
        .status-pills::-webkit-scrollbar-thumb:hover {
          background: rgba(43, 157, 255,0.5);
        }
        .status-pills-sep {
          width: 1px; height: 18px;
          background: var(--line-2);
          flex-shrink: 0;
          margin: 0 6px;
        }
        .status-pill {
          display: inline-flex; align-items: center; gap: 6px;
          padding: 7px 12px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 100px;
          font-family: var(--mono);
          font-size: 11px;
          font-weight: 600;
          color: var(--fg-2);
          letter-spacing: 0.04em;
          white-space: nowrap;
          flex-shrink: 0;
        }
        .status-pill:disabled { cursor: not-allowed; }
        .status-pill:not(:disabled):hover { color: var(--fg); border-color: var(--line-2); }
        .status-pill.active {
          background: var(--accent);
          color: #04121f;
          border-color: var(--accent);
        }
        .status-pill-game { font-size: 10px; color: var(--fg-3); }
        .status-pill-game.active { background: var(--fg); border-color: var(--fg); color: var(--bg); }

        .status-groups {
          padding: 32px 28px;
          max-width: 1480px;
          margin: 0 auto;
          display: flex; flex-direction: column;
          gap: 24px;
        }
        .status-group {
          background: linear-gradient(180deg, rgba(22,25,27,0.5), rgba(15,17,18,0.5));
          border: 1px solid var(--line);
          border-radius: 14px;
          overflow: hidden;
        }
        .status-group-h {
          display: flex; justify-content: space-between; align-items: center;
          padding: 16px 22px;
          border-bottom: 1px solid var(--line);
          background: rgba(0,0,0,0.2);
        }
        .status-game {
          font-family: var(--mono);
          font-weight: 700;
          font-size: 16px;
          letter-spacing: -0.01em;
          margin: 0;
        }
        .status-rows { padding: 6px 0; }

        .status-timeline { padding: 0; }
        .status-timeline-h { padding: 22px; border-bottom: 1px solid var(--line); }
        .status-timeline-list { padding: 16px 22px; }
        .status-timeline-row {
          display: grid;
          grid-template-columns: 90px 24px 1fr;
          gap: 16px;
          padding: 12px 0;
          align-items: flex-start;
        }
        .status-timeline-time {
          font-family: var(--mono);
          font-size: 11px;
          color: var(--fg-4);
          text-align: right;
          padding-top: 4px;
        }
        .status-timeline-line {
          position: relative;
          height: 100%;
          padding-top: 6px;
        }
        .status-timeline-line::before {
          content: ""; position: absolute;
          left: 50%; top: 22px; bottom: -12px;
          width: 1px;
          background: var(--line);
        }
        .status-timeline-row:last-child .status-timeline-line::before { display: none; }
        .status-timeline-dot {
          width: 10px; height: 10px;
          border-radius: 50%;
          display: block;
          margin: 0 auto;
          position: relative;
          z-index: 1;
        }
        .status-timeline-who { font-family: var(--mono); font-weight: 600; font-size: 13px; }
        .status-timeline-what { font-size: 12px; color: var(--fg-3); margin-top: 3px; line-height: 1.5; }

/* -- page-status.jsx block 3 -- */
.status-row {
          display: grid;
          grid-template-columns: 1.6fr 2fr 0.7fr 130px 110px;
          gap: 16px;
          padding: 14px 22px;
          align-items: center;
          border-bottom: 1px solid var(--line);
          transition: background 0.15s ease;
        }
        .status-row:last-child { border-bottom: none; }
        .status-row:hover { background: rgba(43, 157, 255,0.025); }
        @media (max-width: 900px) {
          .status-row { grid-template-columns: 1fr 130px; row-gap: 8px; }
          .status-row-note, .status-row-updated { grid-column: 1 / -1; }
          .status-row-updated { font-size: 10px; }
        }
        .status-row-l { display: flex; align-items: center; gap: 12px; }
        .status-row-ico {
          width: 32px; height: 32px;
          border-radius: 6px;
          background: rgba(43, 157, 255,0.06);
          color: var(--accent);
          display: grid; place-items: center;
          flex-shrink: 0;
        }
        .status-row-name { font-family: var(--mono); font-weight: 600; font-size: 13px; }
        .status-row-os { font-family: var(--mono); font-size: 10px; color: var(--fg-3); margin-top: 2px; letter-spacing: 0.06em; }
        .status-row-note { font-size: 12px; color: var(--fg-2); line-height: 1.5; }
        .status-row-updated {
          display: flex; align-items: center; gap: 6px;
          font-family: var(--mono); font-size: 11px;
          color: var(--fg-3);
        }

/* ===== page-support.jsx — 2 block(s) ===== */
/* -- page-support.jsx block 1 -- */
.sup-hero {
          position: relative;
          padding: 80px 28px 40px;
          max-width: 1480px; margin: 0 auto;
          overflow: hidden;
        }
        .sup-hero-bg {
          position: absolute; inset: 0;
          pointer-events: none;
        }
        .sup-orb {
          position: absolute; border-radius: 50%;
          filter: blur(60px);
        }
        .sup-orb-1 {
          width: 320px; height: 320px;
          background: radial-gradient(circle, rgba(43, 157, 255,0.25), transparent 70%);
          top: -50px; right: 5%;
          animation: orbFloat 12s ease-in-out infinite;
        }
        .sup-orb-2 {
          width: 220px; height: 220px;
          background: radial-gradient(circle, rgba(88,101,242,0.2), transparent 70%);
          bottom: -50px; left: 10%;
          animation: orbFloat 16s ease-in-out infinite reverse;
        }
        .sup-hero-inner { position: relative; max-width: 820px; }
        .sup-trust {
          display: flex; align-items: center; gap: 18px;
          font-family: var(--mono); font-size: 12px;
          color: var(--fg-3);
        }
        .sup-trust b { color: var(--fg); font-weight: 600; }

        .sup-channels {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 20px;
        }
        @media (max-width: 900px) { .sup-channels { grid-template-columns: 1fr; } }

        .sup-cover-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 14px;
        }
        @media (max-width: 1000px) { .sup-cover-grid { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 600px) { .sup-cover-grid { grid-template-columns: 1fr; } }
        .sup-cover {
          display: flex; gap: 14px;
          padding: 22px;
          background: rgba(255,255,255,0.015);
          border: 1px solid var(--line);
          border-radius: 12px;
        }
        .sup-cover-ico {
          width: 36px; height: 36px;
          border-radius: 8px;
          background: rgba(43, 157, 255,0.08);
          color: var(--accent);
          display: grid; place-items: center;
          flex-shrink: 0;
        }
        .sup-cover-t { font-family: var(--mono); font-weight: 700; font-size: 14px; }
        .sup-cover-d { font-size: 13px; color: var(--fg-3); margin-top: 6px; line-height: 1.5; }

        .sup-before { padding: 40px; }
        .sup-before-grid {
          display: grid; grid-template-columns: 1fr 1.4fr;
          gap: 40px;
        }
        @media (max-width: 900px) { .sup-before-grid { grid-template-columns: 1fr; } }
        .sup-before-list { display: flex; flex-direction: column; gap: 8px; }
        .sup-before-item {
          display: flex; align-items: center; gap: 14px;
          padding: 16px 18px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 10px;
          cursor: pointer;
          transition: all 0.18s ease;
        }
        .sup-before-item:hover {
          background: rgba(43, 157, 255,0.04);
          border-color: rgba(43, 157, 255,0.2);
        }
        .sup-before-item > div { flex: 1; }
        .sup-before-t { font-family: var(--mono); font-weight: 600; font-size: 14px; }
        .sup-before-d { font-size: 12px; color: var(--fg-3); margin-top: 4px; line-height: 1.5; }

        .sup-bubble {
          position: fixed;
          bottom: 24px; right: 24px;
          width: 56px; height: 56px;
          border-radius: 50%;
          background: var(--accent);
          color: #04121f;
          border: none;
          display: grid; place-items: center;
          box-shadow: 0 0 0 6px rgba(43, 157, 255,0.15), 0 14px 30px -8px var(--accent);
          z-index: 70;
          cursor: pointer;
          animation: sup-bubble-pop 1s ease-out;
        }
        @keyframes sup-bubble-pop {
          0% { transform: scale(0); }
          70% { transform: scale(1.15); }
          100% { transform: scale(1); }
        }
        .sup-bubble-dot {
          position: absolute;
          top: 6px; right: 6px;
          width: 12px; height: 12px;
          border-radius: 50%;
          background: var(--bg);
          border: 2px solid var(--accent);
        }
        .sup-bubble-dot::after {
          content: ""; position: absolute; inset: 1px;
          background: var(--accent);
          border-radius: 50%;
          animation: pulse 1.4s ease-in-out infinite;
        }

/* -- page-support.jsx block 2 -- */
.sup-ch {
          padding: 0;
          position: relative;
          overflow: hidden;
        }
        .sup-ch-bg { position: absolute; inset: 0; pointer-events: none; }
        .sup-ch-inner {
          position: relative;
          padding: 32px;
          display: flex; flex-direction: column;
          gap: 18px;
          height: 100%;
        }
        .sup-ch-h {
          display: flex; align-items: center; gap: 14px;
        }
        .sup-ch-ico {
          width: 50px; height: 50px;
          border-radius: 12px;
          display: grid; place-items: center;
          border: 1px solid;
          flex-shrink: 0;
        }
        .sup-ch-t { flex: 1; }
        .sup-ch-title { font-family: var(--mono); font-weight: 700; font-size: 20px; letter-spacing: -0.015em; }
        .sup-ch-sub { font-family: var(--mono); font-size: 11px; color: var(--fg-3); margin-top: 3px; letter-spacing: 0.08em; text-transform: uppercase; }
        .sup-ch-badge {
          padding: 4px 10px;
          border-radius: 100px;
          border: 1px solid;
          font-family: var(--mono); font-size: 10px;
          font-weight: 700;
          letter-spacing: 0.12em;
          text-transform: uppercase;
        }
        .sup-ch-desc { color: var(--fg-2); font-size: 14px; line-height: 1.6; }
        .sup-ch-steps {
          list-style: none;
          padding: 0; margin: 0;
          display: flex; flex-direction: column;
          gap: 8px;
        }
        .sup-ch-steps li {
          display: flex; gap: 14px;
          padding: 12px 14px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 8px;
          font-size: 13px;
          color: var(--fg-2);
          line-height: 1.5;
        }
        .sup-ch-step-n {
          font-family: var(--mono); font-weight: 700;
          font-size: 11px;
          color: var(--accent);
          flex-shrink: 0;
        }
        .sup-ch-cta {
          display: inline-flex; align-items: center;
          justify-content: center;
          gap: 10px;
          padding: 14px 22px;
          color: #04121f;
          border-radius: 8px;
          font-family: var(--mono);
          font-weight: 700;
          font-size: 12px;
          letter-spacing: 0.08em;
          text-transform: uppercase;
          margin-top: auto;
          transition: transform 0.2s ease;
        }
        .sup-ch-cta:hover { transform: translateY(-2px); }

/* ===== page-mobile.jsx — 4 block(s) ===== */
/* -- page-mobile.jsx block 1 -- */
.mob-page { padding-bottom: 0; }
        .mob-head {
          padding: 60px 28px 30px;
          max-width: 1480px; margin: 0 auto;
        }
        .mob-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 40px;
          padding: 40px 28px;
          max-width: 1480px; margin: 0 auto;
          justify-items: center;
        }
        @media (max-width: 1100px) { .mob-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 700px) { .mob-grid { grid-template-columns: 1fr; } }
        .mob-cell {
          display: flex; flex-direction: column;
          align-items: center; gap: 20px;
        }
        .mob-cell-h { text-align: center; }
        .mob-cell-tag {
          font-family: var(--mono); font-size: 11px;
          color: var(--fg-3);
          margin-top: 6px;
        }

        .mob-notes { max-width: 1100px; margin: 0 auto; }
        .mob-notes-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 0;
          border: 1px solid var(--line);
          border-radius: 12px;
          background: rgba(255,255,255,0.01);
          overflow: hidden;
        }
        @media (max-width: 800px) { .mob-notes-grid { grid-template-columns: 1fr; } }
        .mob-note {
          padding: 22px 24px;
          border-right: 1px solid var(--line);
          border-bottom: 1px solid var(--line);
        }
        .mob-note:nth-child(3n) { border-right: none; }
        .mob-note:nth-last-child(-n+3) { border-bottom: none; }
        .mob-note-t { font-family: var(--mono); font-weight: 600; font-size: 14px; }
        .mob-note-d { color: var(--fg-3); font-size: 13px; margin-top: 6px; line-height: 1.5; }

/* -- page-mobile.jsx block 2 -- */
.mob-home {
          display: flex; flex-direction: column;
          height: 100%;
          font-size: 12px;
          background: var(--bg);
        }
        .mob-status {
          display: flex; justify-content: space-between;
          padding: 14px 24px 6px;
          font-family: var(--mono); font-size: 11px;
          font-weight: 600;
          color: var(--fg);
        }
        .mob-batt {
          width: 22px; height: 11px;
          border: 1px solid var(--fg);
          border-radius: 3px;
          position: relative;
        }
        .mob-batt::before { content: ""; position: absolute; inset: 1.5px 8px 1.5px 1.5px; background: var(--fg); }
        .mob-batt::after { content: ""; position: absolute; right: -3px; top: 3px; width: 2px; height: 5px; background: var(--fg); border-radius: 0 1px 1px 0; }
        .mob-top {
          display: flex; align-items: center; justify-content: space-between;
          padding: 8px 16px;
          border-bottom: 1px solid var(--line);
        }
        .mob-mark {
          width: 28px; height: 28px;
          background: var(--accent);
          color: #04121f;
          border-radius: 6px;
          display: grid; place-items: center;
          font-family: var(--mono); font-weight: 700;
          font-size: 12px;
          box-shadow: 0 0 14px -4px var(--accent);
        }
        .mob-cart-badge {
          position: absolute; top: -4px; right: -6px;
          background: var(--accent);
          color: #04121f;
          font-family: var(--mono);
          font-size: 8px;
          font-weight: 700;
          padding: 1px 4px;
          border-radius: 100px;
          min-width: 12px;
          text-align: center;
        }
        .mob-scroll {
          flex: 1;
          overflow-y: auto;
          padding-bottom: 80px;
        }
        .mob-hero {
          position: relative;
          padding: 28px 20px 32px;
          border-bottom: 1px solid var(--line);
          overflow: hidden;
        }
        .mob-hero-bg {
          position: absolute;
          width: 240px; height: 240px;
          right: -60px; top: 30px;
          opacity: 0.4;
        }
        .mob-hero-text { position: relative; }
        .mob-hero-h {
          font-family: var(--mono);
          font-size: 26px;
          font-weight: 700;
          letter-spacing: -0.025em;
          line-height: 1.05;
          margin-top: 10px;
        }
        .mob-hero-sub {
          font-family: var(--mono); font-size: 10px;
          color: var(--fg-3);
          margin-top: 14px;
          letter-spacing: 0.04em;
        }
        .mob-cta-primary {
          display: flex; align-items: center; justify-content: center;
          gap: 8px;
          width: 100%;
          padding: 14px;
          border-radius: 8px;
          background: var(--accent);
          color: #04121f;
          border: none;
          font-family: var(--mono); font-weight: 700;
          font-size: 12px;
          text-transform: uppercase;
          letter-spacing: 0.08em;
          margin-top: 18px;
          box-shadow: 0 10px 24px -10px var(--accent);
        }
        .mob-cta-ghost {
          display: flex; align-items: center; justify-content: center;
          gap: 8px;
          width: 100%;
          padding: 13px;
          background: transparent;
          color: var(--fg-2);
          border: 1px solid var(--line-2);
          border-radius: 8px;
          font-family: var(--mono); font-weight: 600;
          font-size: 11px;
          text-transform: uppercase;
          letter-spacing: 0.08em;
          margin-top: 8px;
        }

        .mob-section {
          padding: 22px 16px;
          border-bottom: 1px solid var(--line);
        }
        .mob-sec-h {
          display: flex; align-items: center; justify-content: space-between;
          font-family: var(--mono); font-size: 10px;
          color: var(--fg-3);
          text-transform: uppercase; letter-spacing: 0.14em;
          margin-bottom: 14px;
        }
        .mob-chips {
          display: flex; gap: 6px; flex-wrap: wrap;
        }
        .mob-chip {
          display: inline-flex; align-items: center; gap: 6px;
          padding: 6px 10px;
          border: 1px solid var(--line);
          border-radius: 100px;
          font-family: var(--mono); font-size: 10px;
          color: var(--fg-2);
        }
        .mob-prods { display: flex; flex-direction: column; gap: 10px; }
        .mob-prod {
          display: grid;
          grid-template-columns: 80px 1fr;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 10px;
          overflow: hidden;
        }
        .mob-prod-img {
          position: relative;
          aspect-ratio: 1;
          background: radial-gradient(circle, rgba(43, 157, 255,0.1), rgba(43, 157, 255,0.02));
          display: grid; place-items: center;
        }
        .mob-prod-sale {
          position: absolute; top: 4px; left: 4px;
          background: rgba(255,182,72,0.15);
          color: #ffb648;
          border: 1px solid rgba(255,182,72,0.3);
          font-family: var(--mono); font-size: 9px;
          padding: 1px 4px;
          border-radius: 3px;
          font-weight: 600;
        }
        .mob-prod-body { padding: 10px 12px; }
        .mob-prod-game { font-family: var(--mono); font-size: 9px; color: var(--accent); letter-spacing: 0.1em; text-transform: uppercase; }
        .mob-prod-name { font-family: var(--mono); font-weight: 700; font-size: 14px; margin-top: 4px; }
        .mob-prod-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
        .mob-prod-price { font-family: var(--mono); font-weight: 700; font-size: 16px; }
        .mob-trust {
          display: grid; grid-template-columns: 1fr 1fr 1fr;
          gap: 8px;
        }
        .mob-trust-row {
          padding: 14px 8px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 8px;
          text-align: center;
        }
        .mob-trust-v { font-family: var(--mono); font-weight: 700; font-size: 20px; color: var(--accent); }
        .mob-trust-l { font-family: var(--mono); font-size: 9px; color: var(--fg-3); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.1em; }

        .mob-nav {
          position: absolute;
          bottom: 0; left: 0; right: 0;
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          padding: 8px 6px 22px;
          background: rgba(8,9,10,0.92);
          backdrop-filter: blur(20px);
          border-top: 1px solid var(--line);
        }
        .mob-nav-item {
          display: flex; flex-direction: column;
          align-items: center; gap: 4px;
          color: var(--fg-4);
          padding: 6px;
          font-family: var(--mono); font-size: 9px;
        }
        .mob-nav-item.active { color: var(--accent); }

/* -- page-mobile.jsx block 3 -- */
.mob-detail { display: flex; flex-direction: column; height: 100%; background: var(--bg); position: relative; }
        .mob-detail-hero {
          aspect-ratio: 4 / 3;
          background:
            radial-gradient(circle at 50% 50%, rgba(43, 157, 255,0.1), transparent 60%),
            repeating-linear-gradient(135deg, rgba(43, 157, 255,0.04) 0 8px, rgba(43, 157, 255,0.06) 8px 16px);
          display: grid; place-items: center;
          position: relative;
        }
        .mob-detail-hud {
          position: absolute; top: 12px; left: 12px;
          padding: 4px 8px;
          background: rgba(0,0,0,0.5);
          border: 1px solid rgba(43, 157, 255,0.2);
          border-radius: 4px;
          font-family: var(--mono); font-size: 9px;
          color: var(--accent); letter-spacing: 0.12em;
        }
        .mob-detail-body { padding: 18px 16px; }
        .mob-detail-section { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--line); }

        .mob-recoil {
          margin-top: 22px;
          padding: 14px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 10px;
        }
        .mob-recoil-h {
          display: flex; justify-content: space-between;
          padding-bottom: 10px;
        }
        .mob-recoil-wpicker {
          display: flex; gap: 6px;
          padding: 0 0 12px;
          overflow-x: auto;
        }
        .mob-recoil-wchip {
          padding: 6px 10px;
          background: rgba(255,255,255,0.03);
          border: 1px solid var(--line);
          border-radius: 100px;
          font-family: var(--mono); font-size: 10px;
          color: var(--fg-2);
          flex-shrink: 0;
        }
        .mob-recoil-wchip.active {
          background: rgba(43, 157, 255,0.1);
          color: var(--accent);
          border-color: rgba(43, 157, 255,0.3);
        }
        .mob-recoil-viewer {
          position: relative;
          aspect-ratio: 16 / 11;
          border-radius: 6px;
          overflow: hidden;
          touch-action: none;
          user-select: none;
        }
        .mob-recoil-line { position: absolute; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); }
        .mob-recoil-handle {
          position: absolute; top: 50%;
          transform: translate(-50%, -50%);
          width: 36px; height: 36px;
          border-radius: 50%;
          display: flex; align-items: center;
          box-shadow: 0 0 12px var(--accent), 0 0 0 3px rgba(43, 157, 255,0.2);
        }
        .mob-recoil-tag {
          position: absolute;
          padding: 3px 8px;
          border: 1px solid;
          border-radius: 3px;
          font-family: var(--mono);
          font-size: 9px;
          font-weight: 700;
          letter-spacing: 0.1em;
          backdrop-filter: blur(8px);
          background: rgba(0,0,0,0.5);
        }
        .mob-recoil-hint {
          text-align: center;
          font-family: var(--mono); font-size: 10px;
          color: var(--fg-4);
          margin-top: 8px;
          letter-spacing: 0.1em;
        }

        .mob-feat {
          display: flex; align-items: center; gap: 8px;
          padding: 10px 12px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 6px;
          font-size: 12px;
          color: var(--fg-2);
          margin-top: 6px;
        }
        .mob-buybar {
          position: absolute;
          bottom: 0; left: 0; right: 0;
          padding: 10px 14px 24px;
          background: rgba(8,9,10,0.92);
          backdrop-filter: blur(20px);
          border-top: 1px solid var(--line);
          display: flex; align-items: center;
          gap: 10px;
        }
        .mob-buybar-price { font-family: var(--mono); font-size: 22px; font-weight: 700; line-height: 1; }
        .mob-buybar-cta {
          flex: 1;
          padding: 14px;
          border-radius: 8px;
          color: #04121f;
          border: none;
          font-family: var(--mono); font-weight: 700; font-size: 12px;
          text-transform: uppercase; letter-spacing: 0.08em;
          display: flex; align-items: center; justify-content: center;
          gap: 8px;
          box-shadow: 0 10px 24px -10px var(--accent);
        }

/* -- page-mobile.jsx block 4 -- */
.mob-checkout { display: flex; flex-direction: column; height: 100%; background: var(--bg); position: relative; }
        .checkout-steps {
          display: flex; align-items: center;
          padding: 6px 0 22px;
          gap: 0;
        }
        .checkout-step {
          display: flex; flex-direction: column; align-items: center; gap: 6px;
          font-family: var(--mono); font-size: 9px;
          color: var(--fg-4);
          flex-shrink: 0;
        }
        .checkout-step.active { color: var(--fg); }
        .checkout-step.done .checkout-step-dot { background: var(--accent); color: #04121f; border-color: var(--accent); }
        .checkout-step-dot {
          width: 22px; height: 22px;
          border-radius: 50%;
          border: 1px solid var(--line-2);
          display: grid; place-items: center;
          font-family: var(--mono); font-size: 10px; font-weight: 700;
          background: var(--bg);
        }
        .checkout-step-line { flex: 1; height: 1px; background: var(--line); margin: 0 6px; margin-bottom: 18px; }
        .checkout-step-line.done { background: var(--accent); }
        .checkout-card {
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 10px;
          padding: 14px;
          margin-bottom: 12px;
        }
        .checkout-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
        .checkout-item-img {
          width: 40px; height: 40px;
          background: rgba(43, 157, 255,0.08);
          border-radius: 6px;
          display: grid; place-items: center;
        }
        .checkout-totals {
          padding-top: 12px; margin-top: 8px;
          border-top: 1px dashed var(--line);
          font-family: var(--mono); font-size: 12px;
          display: flex; flex-direction: column; gap: 6px;
        }
        .checkout-totals > div { display: flex; justify-content: space-between; }
        .checkout-totals span:first-child { color: var(--fg-3); }
        .checkout-grand { padding-top: 8px; border-top: 1px solid var(--line); margin-top: 4px; font-weight: 700; font-size: 14px; }
        .mob-inp {
          display: flex; align-items: center; gap: 8px;
          padding: 12px 12px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 8px;
          font-family: var(--mono); font-size: 12px;
          color: var(--fg);
        }
        .checkout-pay-grid {
          display: grid; grid-template-columns: 1fr 1fr;
          gap: 6px;
          margin-top: 10px;
        }
        .checkout-pay-opt {
          padding: 12px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 6px;
          font-family: var(--mono); font-size: 11px;
          color: var(--fg-2);
          text-align: center;
        }
        .checkout-pay-opt.active {
          background: rgba(43, 157, 255,0.06);
          border-color: rgba(43, 157, 255,0.3);
          color: var(--accent);
        }




/* ============================================================
   2b. PHASE 3 COMPONENTS - auth + account + downloads
   ============================================================ */

/* ===== auth-cart.jsx - 2 block(s) ===== */
/* -- auth-cart.jsx block 1 -- */
.auth-backdrop {
          position: fixed; inset: 0;
          background: rgba(0,0,0,0.75);
          backdrop-filter: blur(10px);
          z-index: 200;
          display: grid; place-items: center;
          padding: 24px;
          animation: authFade 0.2s ease;
        }
        @keyframes authFade { from { opacity: 0; } to { opacity: 1; } }
        .auth-modal {
          position: relative;
          width: 100%;
          max-width: 920px;
          max-height: 90vh;
          overflow: auto;
          display: grid;
          grid-template-columns: 1fr 1.1fr;
          background: linear-gradient(180deg, #14181a, #0e1011);
          border: 1px solid var(--line-2);
          border-radius: 16px;
          box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(43, 157, 255,0.05);
          animation: authSlide 0.25s ease;
        }
        @keyframes authSlide { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        @media (max-width: 800px) { .auth-modal { grid-template-columns: 1fr; } .auth-side { display: none; } }
        .auth-close {
          position: absolute; top: 14px; right: 14px;
          width: 32px; height: 32px;
          background: rgba(255,255,255,0.04);
          border: 1px solid var(--line);
          color: var(--fg-2);
          border-radius: 6px;
          font-size: 18px;
          line-height: 1;
          z-index: 10;
          cursor: pointer;
        }
        .auth-close:hover { color: var(--fg); background: rgba(255,255,255,0.08); }

        .auth-side {
          position: relative;
          padding: 40px 36px;
          background:
            radial-gradient(circle at 70% 20%, rgba(43, 157, 255,0.12), transparent 60%),
            linear-gradient(180deg, #0c0f10, #0a0b0c);
          border-right: 1px solid var(--line);
          overflow: hidden;
        }
        .auth-side-glow {
          position: absolute;
          width: 220px; height: 220px;
          background: radial-gradient(circle, rgba(43, 157, 255,0.3), transparent 70%);
          top: -40px; right: -40px;
          filter: blur(40px);
        }
        .auth-side-inner { position: relative; }
        .auth-side-h {
          font-family: var(--mono);
          font-size: 30px;
          font-weight: 700;
          letter-spacing: -0.025em;
          line-height: 1.05;
        }
        .auth-side-p { color: var(--fg-2); font-size: 14px; line-height: 1.6; text-wrap: pretty; }
        .auth-trust { font-family: var(--mono); font-size: 12px; color: var(--fg-3); }
        .auth-trust-ico {
          width: 26px; height: 26px;
          border-radius: 6px;
          background: rgba(43, 157, 255,0.1);
          color: var(--accent);
          display: grid; place-items: center;
          border: 1px solid rgba(43, 157, 255,0.25);
        }

        .auth-form { padding: 32px 36px; display: flex; flex-direction: column; gap: 14px; }
        .auth-tabs {
          display: flex; gap: 4px;
          background: rgba(0,0,0,0.3);
          border: 1px solid var(--line);
          border-radius: 8px;
          padding: 4px;
        }
        .auth-tab {
          flex: 1;
          padding: 8px 12px;
          background: transparent;
          border: none;
          color: var(--fg-3);
          font-family: var(--mono); font-size: 12px;
          font-weight: 600;
          letter-spacing: 0.04em;
          border-radius: 5px;
          cursor: pointer;
        }
        .auth-tab:hover { color: var(--fg); }
        .auth-tab.active { background: rgba(43, 157, 255,0.08); color: var(--accent); }

        .auth-fields { display: flex; flex-direction: column; gap: 14px; }

        .auth-discord {
          position: relative;
          display: flex; align-items: center; justify-content: center;
          gap: 10px;
          padding: 14px 16px;
          background: linear-gradient(135deg, #5865F2, #4651d8);
          color: white;
          border: 1px solid #5865F2;
          border-radius: 8px;
          font-family: var(--mono);
          font-weight: 700;
          font-size: 13px;
          letter-spacing: 0.04em;
          cursor: pointer;
          box-shadow: 0 8px 24px -10px #5865F2;
          transition: transform 0.18s ease;
        }
        .auth-discord:hover { transform: translateY(-1px); }
        .auth-discord-tag {
          position: absolute;
          top: -6px; right: 12px;
          padding: 1px 6px;
          background: var(--accent);
          color: #04121f;
          font-family: var(--mono); font-size: 8px;
          font-weight: 800;
          letter-spacing: 0.14em;
          border-radius: 2px;
        }

        .auth-divider {
          display: grid;
          grid-template-columns: 1fr auto 1fr;
          align-items: center;
          gap: 12px;
        }
        .auth-divider > span:first-child, .auth-divider > span:last-child {
          height: 1px; background: var(--line);
        }
        .auth-divider-t {
          font-family: var(--mono); font-size: 10px;
          color: var(--fg-4);
          text-transform: uppercase;
          letter-spacing: 0.14em;
        }

        .auth-field { display: flex; flex-direction: column; gap: 6px; }
        .auth-field label {
          display: flex; justify-content: space-between;
          font-family: var(--mono); font-size: 10px;
          color: var(--fg-3);
          text-transform: uppercase;
          letter-spacing: 0.12em;
        }
        .auth-forgot {
          color: var(--accent);
          cursor: pointer;
          font-size: 10px;
          text-transform: none;
          letter-spacing: 0.02em;
        }
        .auth-input {
          display: flex; align-items: center; gap: 10px;
          background: rgba(255,255,255,0.03);
          border: 1px solid var(--line);
          border-radius: 8px;
          padding: 0 14px;
          transition: border-color 0.15s ease;
          color: var(--fg-3);
        }
        .auth-input:focus-within { border-color: rgba(43, 157, 255,0.4); color: var(--accent); }
        .auth-input input {
          flex: 1;
          padding: 11px 0;
          background: transparent;
          border: none;
          outline: none;
          color: var(--fg);
          font-family: var(--mono);
          font-size: 13px;
        }
        .auth-input input::placeholder { color: var(--fg-4); }

        .auth-meter {
          height: 3px;
          background: rgba(255,255,255,0.05);
          border-radius: 100px;
          margin-top: 4px;
          overflow: hidden;
        }
        .auth-meter-bar { height: 100%; transition: width 0.2s ease, background 0.2s ease; }

        .auth-agree {
          display: flex; align-items: flex-start; gap: 10px;
          padding: 12px 14px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 8px;
          font-size: 12px;
          color: var(--fg-3);
          line-height: 1.5;
          cursor: pointer;
        }
        .auth-agree a { color: var(--accent); }
        .auth-agree .cb { flex-shrink: 0; margin-top: 1px; }

        .auth-submit {
          display: flex; align-items: center; justify-content: center;
          gap: 10px;
          padding: 14px 16px;
          background: var(--accent);
          color: #04121f;
          border: none;
          border-radius: 8px;
          font-family: var(--mono);
          font-weight: 700;
          font-size: 13px;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          cursor: pointer;
          box-shadow: 0 8px 24px -10px var(--accent);
          transition: transform 0.18s ease;
        }
        .auth-submit:hover:not(:disabled) { transform: translateY(-1px); }
        .auth-submit:disabled { opacity: 0.4; cursor: not-allowed; }

        .auth-switch {
          text-align: center;
          font-family: var(--mono); font-size: 11px;
          color: var(--fg-3);
        }
        .auth-switch a { color: var(--accent); cursor: pointer; font-weight: 600; }

/* -- auth-cart.jsx block 2 -- */
.cart-head {
          padding: 50px 28px 30px;
          max-width: 1480px; margin: 0 auto;
        }
        .cart-bread {
          display: flex; align-items: center; gap: 8px;
          font-family: var(--mono); font-size: 11px;
          color: var(--fg-3);
          text-transform: uppercase; letter-spacing: 0.1em;
          padding-bottom: 20px;
        }
        .cart-grid {
          display: grid;
          grid-template-columns: 1.6fr 1fr;
          gap: 24px;
          padding: 0 28px 60px;
          max-width: 1480px; margin: 0 auto;
        }
        @media (max-width: 1000px) { .cart-grid { grid-template-columns: 1fr; } }
        .cart-left, .cart-right { display: flex; flex-direction: column; gap: 16px; }
        .cart-right { position: sticky; top: 100px; align-self: start; }
        @media (max-width: 1000px) { .cart-right { position: static; } }

        .cart-card { padding: 0; }
        .cart-card-h {
          display: flex; justify-content: space-between;
          align-items: center;
          padding: 16px 22px;
          border-bottom: 1px solid var(--line);
        }
        .cart-item {
          display: grid;
          grid-template-columns: 80px 1fr auto;
          gap: 20px;
          padding: 22px;
          align-items: center;
          border-bottom: 1px solid var(--line);
        }
        .cart-item:last-child { border-bottom: none; }
        @media (max-width: 700px) { .cart-item { grid-template-columns: 60px 1fr; row-gap: 14px; }
          .cart-item-right { grid-column: 1 / -1; }
        }
        .cart-item-img {
          width: 80px; height: 80px;
          border-radius: 10px;
          background:
            radial-gradient(circle, rgba(43, 157, 255,0.1), transparent 70%),
            repeating-linear-gradient(135deg, rgba(43, 157, 255,0.04) 0 8px, rgba(43, 157, 255,0.06) 8px 16px);
          display: grid; place-items: center;
        }
        .cart-item-body { display: flex; flex-direction: column; gap: 6px; }
        .cart-item-name {
          font-family: var(--mono);
          font-weight: 700;
          font-size: 18px;
          letter-spacing: -0.02em;
        }
        .cart-item-meta {
          display: flex; align-items: center; gap: 6px;
          font-family: var(--mono); font-size: 11px;
          color: var(--fg-3);
        }
        .cart-item-right {
          display: flex; align-items: center; gap: 14px;
        }
        .cart-qty {
          display: flex; align-items: center;
          background: rgba(255,255,255,0.03);
          border: 1px solid var(--line);
          border-radius: 6px;
        }
        .cart-qty button {
          width: 28px; height: 32px;
          background: transparent; border: none;
          color: var(--fg-2);
          display: grid; place-items: center;
          cursor: pointer;
        }
        .cart-qty button:hover { color: var(--accent); }
        .cart-qty span {
          min-width: 28px; text-align: center;
          font-family: var(--mono); font-weight: 600;
          font-size: 13px;
        }
        .cart-item-price {
          display: flex; flex-direction: column;
          align-items: flex-end;
          font-family: var(--mono);
          font-weight: 700;
          font-size: 18px;
        }
        .cart-item-strike { font-size: 11px; color: var(--fg-4); text-decoration: line-through; font-weight: 500; }
        .cart-item-rm {
          width: 32px; height: 32px;
          background: transparent;
          border: 1px solid var(--line);
          border-radius: 5px;
          color: var(--fg-4);
          display: grid; place-items: center;
          cursor: pointer;
        }
        .cart-item-rm:hover { color: #ff6688; border-color: rgba(255,77,109,0.3); }

        .cart-trust { padding: 18px 22px; }
        .cart-trust-grid {
          display: grid; grid-template-columns: 1fr 1fr;
          gap: 14px;
        }
        @media (max-width: 600px) { .cart-trust-grid { grid-template-columns: 1fr; } }
        .cart-trust-i { display: flex; gap: 10px; align-items: flex-start; }
        .cart-trust-t { font-family: var(--mono); font-weight: 600; font-size: 12px; }
        .cart-trust-d { font-size: 11px; color: var(--fg-3); margin-top: 2px; }

        .cart-summary { padding: 0; }
        .cart-coupon {
          padding: 18px 22px;
          border-bottom: 1px solid var(--line);
        }
        .cart-coupon-h {
          display: flex; align-items: center; gap: 8px;
          font-family: var(--mono); font-size: 11px;
          color: var(--fg-3);
          margin-bottom: 10px;
          text-transform: uppercase;
          letter-spacing: 0.12em;
        }
        .cart-coupon-input {
          display: flex; gap: 8px;
        }
        .cart-coupon-input input {
          flex: 1;
          background: rgba(255,255,255,0.03);
          border: 1px solid var(--line);
          border-radius: 6px;
          padding: 9px 12px;
          color: var(--fg);
          font-family: var(--mono);
          font-size: 13px;
          outline: none;
          letter-spacing: 0.06em;
          text-transform: uppercase;
        }
        .cart-coupon-input input::placeholder { color: var(--fg-4); letter-spacing: 0; text-transform: none; }
        .cart-coupon-input input:focus { border-color: rgba(43, 157, 255,0.4); }
        .cart-coupon-input button {
          padding: 9px 16px;
          background: rgba(43, 157, 255,0.08);
          border: 1px solid rgba(43, 157, 255,0.25);
          color: var(--accent);
          border-radius: 6px;
          font-family: var(--mono);
          font-size: 11px;
          font-weight: 700;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          cursor: pointer;
        }
        .cart-coupon-input button:hover:not(:disabled) { background: rgba(43, 157, 255,0.15); }
        .cart-coupon-input button:disabled { opacity: 0.4; cursor: not-allowed; }
        .cart-coupon-applied {
          display: flex; justify-content: space-between;
          align-items: center;
          padding: 10px 14px;
          background: rgba(43, 157, 255,0.08);
          border: 1px solid rgba(43, 157, 255,0.25);
          border-radius: 6px;
          color: var(--accent);
          font-family: var(--mono); font-size: 12px;
          font-weight: 600;
        }
        .cart-coupon-applied button {
          background: transparent; border: none;
          color: var(--fg-3);
          font: inherit;
          font-size: 10px;
          cursor: pointer;
          text-decoration: underline;
        }
        .cart-coupon-msg {
          font-family: var(--mono); font-size: 11px;
          margin-top: 8px;
        }

        .cart-totals {
          padding: 18px 22px;
          border-bottom: 1px solid var(--line);
          font-family: var(--mono);
          font-size: 13px;
          display: flex; flex-direction: column;
          gap: 8px;
        }
        .cart-totals > div { display: flex; justify-content: space-between; }
        .cart-totals span:first-child { color: var(--fg-3); }
        .cart-grand {
          padding-top: 14px; margin-top: 6px;
          border-top: 1px solid var(--line);
          font-size: 20px; font-weight: 700;
        }
        .cart-grand span:last-child { color: var(--accent); }
        .cart-grand small { font-size: 10px; color: var(--fg-4); font-weight: 500; }

        .cart-checkout {
          margin: 18px 22px 0;
          display: flex; align-items: center; justify-content: center;
          gap: 10px;
          padding: 15px;
          background: var(--accent);
          color: #04121f;
          border: none;
          border-radius: 8px;
          font-family: var(--mono);
          font-weight: 700;
          font-size: 12px;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          width: calc(100% - 44px);
          cursor: pointer;
          box-shadow: 0 12px 30px -10px var(--accent);
          transition: transform 0.18s ease;
        }
        .cart-checkout:hover { transform: translateY(-1px); }

        .cart-checkout-note {
          display: flex; gap: 10px; align-items: flex-start;
          margin: 12px 22px 0;
          padding: 12px 14px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 8px;
          font-size: 11px;
          color: var(--fg-3);
          line-height: 1.5;
        }

        .cart-payment-methods {
          padding: 16px 22px 22px;
          border-top: 1px solid var(--line);
          margin-top: 18px;
        }
        .cart-pm-row {
          display: flex; flex-wrap: wrap; gap: 6px;
          margin-top: 10px;
        }
        .cart-pm {
          padding: 5px 9px;
          background: rgba(255,255,255,0.03);
          border: 1px solid var(--line);
          border-radius: 4px;
          font-family: var(--mono); font-size: 10px;
          font-weight: 700;
          color: var(--fg-3);
          letter-spacing: 0.08em;
        }

        .cart-help {
          display: flex; align-items: center; gap: 12px;
          padding: 16px 18px;
        }

        .cart-empty {
          text-align: center;
          padding: 80px 40px;
          display: flex; flex-direction: column;
          align-items: center;
          gap: 6px;
        }
        .cart-empty-ico {
          width: 70px; height: 70px;
          border-radius: 50%;
          background: rgba(43, 157, 255,0.06);
          color: var(--accent);
          display: grid; place-items: center;
          margin-bottom: 14px;
        }

/* ===== page-account.jsx - 7 block(s) ===== */
/* -- page-account.jsx block 1 -- */
.acc-head {
          padding: 60px 28px 30px;
          max-width: 1480px; margin: 0 auto;
        }
        .acc-head-inner {
          display: flex; justify-content: space-between;
          align-items: flex-end;
          gap: 40px;
          flex-wrap: wrap;
        }
        .acc-profile { display: flex; align-items: center; gap: 22px; }
        .acc-avatar {
          width: 84px; height: 84px;
          border-radius: 20px;
          display: grid; place-items: center;
          font-family: var(--mono); font-weight: 800;
          font-size: 36px;
          color: white;
          box-shadow: 0 20px 40px -10px rgba(0,0,0,0.4);
          position: relative;
        }
        .acc-avatar::after {
          content: ""; position: absolute;
          right: -2px; bottom: -2px;
          width: 16px; height: 16px;
          border-radius: 50%;
          background: var(--accent);
          border: 3px solid var(--bg);
          box-shadow: 0 0 10px var(--accent);
        }
        .acc-h {
          font-family: var(--mono);
          font-size: clamp(32px, 3.5vw, 48px);
          font-weight: 700;
          letter-spacing: -0.03em;
          margin: 8px 0 6px;
          line-height: 1;
        }
        .acc-meta {
          display: flex; align-items: center; gap: 12px;
          font-family: var(--mono);
          font-size: 12px;
          color: var(--fg-3);
          flex-wrap: wrap;
        }
        .acc-stats {
          display: flex;
          gap: 0;
          padding: 18px 0;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 12px;
        }
        .acc-stat {
          padding: 0 28px;
          border-right: 1px solid var(--line);
          text-align: center;
        }
        .acc-stat:last-child { border-right: none; }
        .acc-stat-v {
          font-family: var(--mono);
          font-size: 28px;
          font-weight: 700;
          color: var(--accent);
          letter-spacing: -0.02em;
          line-height: 1;
        }
        .acc-stat-l {
          font-family: var(--mono);
          font-size: 10px;
          color: var(--fg-3);
          letter-spacing: 0.12em;
          text-transform: uppercase;
          margin-top: 6px;
        }

        .acc-tabs {
          border-top: 1px solid var(--line);
          border-bottom: 1px solid var(--line);
          background: rgba(0,0,0,0.2);
          position: sticky;
          top: 0;
          z-index: 20;
          backdrop-filter: blur(12px);
        }
        .acc-tabs-inner {
          max-width: 1480px;
          margin: 0 auto;
          padding: 0 28px;
          display: flex;
          gap: 4px;
          overflow-x: auto;
          scrollbar-width: none;
        }
        .acc-tabs-inner::-webkit-scrollbar { display: none; }
        .acc-tab {
          display: inline-flex; align-items: center; gap: 8px;
          padding: 16px 18px;
          background: transparent;
          border: none;
          color: var(--fg-3);
          font-family: var(--mono);
          font-size: 12px;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 0.08em;
          border-bottom: 2px solid transparent;
          transition: all 0.15s ease;
          white-space: nowrap;
          flex-shrink: 0;
        }
        .acc-tab:hover { color: var(--fg); }
        .acc-tab.active {
          color: var(--accent);
          border-bottom-color: var(--accent);
        }
        .acc-tab-n {
          font-family: var(--mono); font-size: 10px;
          background: rgba(255,255,255,0.06);
          padding: 1px 6px;
          border-radius: 100px;
          font-weight: 700;
        }
        .acc-tab.active .acc-tab-n { background: rgba(43, 157, 255,0.15); color: var(--accent); }
        .acc-tab-badge {
          padding: 2px 7px;
          border: 1px solid;
          border-radius: 100px;
          font-family: var(--mono);
          font-size: 9px;
          font-weight: 700;
          letter-spacing: 0.12em;
        }
        .acc-body {
          padding: 40px 28px;
          max-width: 1480px;
          margin: 0 auto;
        }

/* -- page-account.jsx block 2 -- */
.acc-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 16px;
        }
        @media (max-width: 1000px) { .acc-grid { grid-template-columns: 1fr; } .acc-card { grid-column: auto !important; } }
        .acc-card { padding: 0; }
        .acc-card-h {
          display: flex; justify-content: space-between; align-items: flex-start;
          padding: 22px;
          border-bottom: 1px solid var(--line);
        }
        .acc-access { padding: 0; }
        .acc-access-row {
          display: grid;
          grid-template-columns: 32px 1fr auto auto 90px;
          gap: 14px;
          padding: 14px 22px;
          align-items: center;
          border-bottom: 1px solid var(--line);
          transition: background 0.15s ease;
        }
        .acc-access-row:last-child { border-bottom: none; }
        .acc-access-row:hover { background: rgba(43, 157, 255,0.025); }
        .acc-access-ico {
          width: 32px; height: 32px;
          border-radius: 6px;
          background: rgba(43, 157, 255,0.08);
          color: var(--accent);
          display: grid; place-items: center;
        }
        .acc-access-name { font-family: var(--mono); font-weight: 600; font-size: 13px; }
        .acc-access-sub { font-family: var(--mono); font-size: 10px; color: var(--fg-3); margin-top: 2px; letter-spacing: 0.05em; }

        .acc-discord-body { padding: 22px; }
        .acc-discord-user { display: flex; align-items: center; gap: 12px; }
        .acc-discord-avatar {
          width: 40px; height: 40px;
          border-radius: 10px;
          display: grid; place-items: center;
          font-family: var(--mono); font-weight: 700;
          color: white;
        }
        .acc-discord-roles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
        .acc-discord-role {
          padding: 4px 10px;
          background: rgba(88,101,242,0.1);
          color: #8b9eff;
          border: 1px solid rgba(88,101,242,0.3);
          border-radius: 100px;
          font-family: var(--mono);
          font-size: 10px;
          font-weight: 600;
        }

        /* Activity feed — duplicated locally so styles are always present */
        .acc-activity { padding: 8px 0; }
        .acc-activity .activity-row {
          display: flex; align-items: center; gap: 14px;
          padding: 12px 22px;
          border-bottom: 1px solid var(--line);
        }
        .acc-activity .activity-row:last-child { border-bottom: none; }
        .acc-activity .activity-ico {
          width: 28px; height: 28px;
          border-radius: 6px;
          background: rgba(255,255,255,0.03);
          color: var(--fg-3);
          display: grid; place-items: center;
          flex-shrink: 0;
        }
        .acc-activity .activity-ico.ok { background: rgba(43, 157, 255,0.08); color: var(--accent); }
        .acc-activity .activity-body { flex: 1; min-width: 0; }
        .acc-activity .activity-t { font-size: 12px; display: flex; gap: 8px; align-items: center; }
        .acc-activity .activity-t b { font-weight: 600; color: var(--fg); }
        .acc-activity .activity-w { font-size: 11px; color: var(--fg-3); margin-top: 2px; font-family: var(--mono); }
        .acc-activity .activity-time { font-family: var(--mono); font-size: 10px; color: var(--fg-4); flex-shrink: 0; }

/* -- page-account.jsx block 3 -- */
.acc-section-h {
          display: flex; justify-content: space-between;
          align-items: center;
          padding-bottom: 20px;
          border-bottom: 1px solid var(--line);
          margin-bottom: 20px;
        }
        .acc-orders-list { display: flex; flex-direction: column; gap: 12px; }

/* -- page-account.jsx block 4 -- */
.order {
          border: 1px solid var(--line);
          border-radius: 12px;
          background: rgba(255,255,255,0.015);
          overflow: hidden;
          transition: all 0.2s ease;
        }
        .order.expanded {
          border-color: rgba(43, 157, 255,0.2);
          background: rgba(43, 157, 255,0.02);
        }
        .order-head {
          display: grid;
          grid-template-columns: 40px 1fr auto auto 18px;
          gap: 16px;
          padding: 16px 22px;
          align-items: center;
          cursor: pointer;
        }
        .order-head:hover { background: rgba(255,255,255,0.02); }
        .order-ico {
          width: 40px; height: 40px;
          border-radius: 8px;
          background: rgba(43, 157, 255,0.08);
          color: var(--accent);
          display: grid; place-items: center;
        }
        .order-name { font-family: var(--mono); font-weight: 600; font-size: 14px; }
        .order-meta {
          display: flex; gap: 6px;
          font-family: var(--mono);
          font-size: 11px;
          color: var(--fg-3);
          margin-top: 4px;
          flex-wrap: wrap;
        }
        .order-price { font-family: var(--mono); font-weight: 700; font-size: 18px; }

        .order-body {
          padding: 6px 22px 22px;
          border-top: 1px solid var(--line);
          display: flex; flex-direction: column;
          gap: 18px;
        }
        .order-section { padding-top: 18px; }
        .order-section-h {
          display: flex; justify-content: space-between;
          align-items: center;
          margin-bottom: 10px;
        }
        .order-key {
          display: flex; align-items: center;
          background: #050606;
          border: 1px solid var(--line-2);
          border-radius: 8px;
          padding: 4px;
        }
        .order-key code {
          flex: 1;
          font-family: var(--mono);
          font-size: 14px;
          font-weight: 600;
          color: var(--accent);
          padding: 10px 14px;
          letter-spacing: 0.06em;
        }
        .order-key-btn {
          display: inline-flex; align-items: center; gap: 6px;
          padding: 8px 12px;
          background: rgba(255,255,255,0.03);
          border: 1px solid var(--line);
          color: var(--fg-2);
          border-radius: 5px;
          font-family: var(--mono);
          font-size: 11px;
          font-weight: 600;
        }
        .order-key-btn:hover { color: var(--accent); border-color: rgba(43, 157, 255,0.3); }
        .order-key-btn + .order-key-btn { margin-left: 4px; }

        .order-files { display: flex; flex-direction: column; gap: 6px; }
        .order-file {
          display: grid;
          grid-template-columns: 14px 1fr auto;
          gap: 14px;
          padding: 12px 14px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 6px;
          align-items: center;
        }
        .order-file-name { font-family: var(--mono); font-weight: 500; font-size: 12px; }
        .order-file-size { font-family: var(--mono); font-size: 10px; color: var(--fg-4); margin-top: 2px; letter-spacing: 0.06em; }

        .order-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 6px; border-top: 1px dashed var(--line); }

/* -- page-account.jsx block 5 -- */
.acc-section-h {
          display: flex; justify-content: space-between;
          align-items: center;
          padding-bottom: 20px;
          border-bottom: 1px solid var(--line);
          margin-bottom: 20px;
        }

/* -- page-account.jsx block 6 -- */
.acc-section-h {
          display: flex; justify-content: space-between;
          align-items: center;
          padding-bottom: 20px;
          border-bottom: 1px solid var(--line);
          margin-bottom: 20px;
        }
        .acc-disc-card { padding: 32px; margin-bottom: 16px; }
        .acc-disc-grid {
          display: grid; grid-template-columns: 1.2fr 1fr;
          gap: 40px;
        }
        @media (max-width: 900px) { .acc-disc-grid { grid-template-columns: 1fr; } }
        .acc-disc-user { display: flex; align-items: center; gap: 18px; }
        .acc-disc-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
        .acc-disc-roles { display: flex; flex-direction: column; gap: 8px; }
        .acc-disc-role {
          display: flex; align-items: center; gap: 14px;
          padding: 14px 16px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 8px;
        }
        .acc-disc-role-dot {
          width: 8px; height: 8px;
          border-radius: 50%;
          flex-shrink: 0;
        }
        .acc-disc-role-name { font-family: var(--mono); font-weight: 600; font-size: 13px; }
        .acc-disc-role-desc { font-size: 11px; color: var(--fg-3); margin-top: 3px; }
        .acc-disc-role > span:last-child { margin-left: auto; }

        .acc-disc-info { padding: 24px 28px; }
        .acc-disc-perks {
          display: grid; grid-template-columns: repeat(4, 1fr);
          gap: 12px;
          margin-top: 22px;
          padding-top: 22px;
          border-top: 1px dashed var(--line);
        }
        @media (max-width: 900px) { .acc-disc-perks { grid-template-columns: 1fr 1fr; } }
        .acc-disc-perk {
          display: flex; gap: 10px;
          padding: 14px;
          background: rgba(43, 157, 255,0.03);
          border: 1px solid var(--line);
          border-radius: 8px;
          align-items: flex-start;
        }
        .acc-disc-perk-t { font-family: var(--mono); font-weight: 600; font-size: 12px; }
        .acc-disc-perk-d { font-size: 11px; color: var(--fg-3); margin-top: 3px; line-height: 1.5; }

/* -- page-account.jsx block 7 -- */
.acc-section-h {
          display: flex; justify-content: space-between;
          align-items: center;
          padding-bottom: 20px;
          border-bottom: 1px solid var(--line);
          margin-bottom: 20px;
        }

/* ===== page-downloads.jsx - 2 block(s) ===== */
/* -- page-downloads.jsx block 1 -- */
.dl-hero {
          padding: 60px 28px 30px;
          max-width: 1480px; margin: 0 auto;
        }
        .dl-hero-inner {
          display: flex; justify-content: space-between;
          align-items: flex-end;
          gap: 40px;
          flex-wrap: wrap;
        }
        .dl-hero-stats {
          display: flex;
          padding: 0;
        }

/* -- page-downloads.jsx block 2 -- */
.dl-wrap {
          display: grid;
          grid-template-columns: 280px 1fr;
          gap: 24px;
        }
        @media (max-width: 1000px) { .dl-wrap { grid-template-columns: 1fr; } }
        .dl-list {
          display: flex; flex-direction: column;
          gap: 4px;
          align-self: start;
          position: sticky;
          top: 120px;
        }
        .dl-list-h {
          display: flex; justify-content: space-between;
          padding: 0 8px 12px;
        }
        .dl-item {
          display: flex; align-items: center; gap: 12px;
          padding: 12px 14px;
          background: rgba(255,255,255,0.015);
          border: 1px solid var(--line);
          border-radius: 8px;
          text-align: left;
          color: var(--fg-2);
          transition: all 0.15s ease;
        }
        .dl-item:hover { background: rgba(255,255,255,0.03); color: var(--fg); }
        .dl-item.active {
          background: rgba(43, 157, 255,0.06);
          border-color: rgba(43, 157, 255,0.25);
          color: var(--fg);
        }
        .dl-item-ico {
          width: 32px; height: 32px;
          background: rgba(43, 157, 255,0.08);
          color: var(--accent);
          border-radius: 6px;
          display: grid; place-items: center;
          flex-shrink: 0;
        }
        .dl-item-info { flex: 1; min-width: 0; }
        .dl-item-name { font-family: var(--mono); font-weight: 600; font-size: 13px; }
        .dl-item-meta { font-family: var(--mono); font-size: 10px; color: var(--fg-3); margin-top: 3px; letter-spacing: 0.05em; }
        .dl-item-status {
          width: 6px; height: 6px;
          border-radius: 50%;
          flex-shrink: 0;
        }
        .dl-resources {
          margin-top: 24px;
          padding-top: 24px;
          border-top: 1px solid var(--line);
          display: flex; flex-direction: column;
          gap: 2px;
        }
        .dl-resources .mono-label { padding: 0 8px 8px; }
        .dl-resource {
          display: flex; align-items: center; gap: 10px;
          padding: 10px 12px;
          background: transparent;
          border: 1px solid transparent;
          border-radius: 6px;
          color: var(--fg-3);
          font-family: var(--mono);
          font-size: 12px;
        }
        .dl-resource:hover { background: rgba(255,255,255,0.03); color: var(--fg); border-color: var(--line); }

        .dl-detail-card { padding: 0; }
        .dl-detail-h {
          display: flex; justify-content: space-between;
          align-items: flex-start;
          padding: 28px 32px;
          border-bottom: 1px solid var(--line);
          gap: 20px;
          flex-wrap: wrap;
        }
        .dl-detail-h .row { display: flex; }
        .mb-2 { margin-bottom: 8px; }

        .dl-changelog {
          padding: 22px 32px;
          border-bottom: 1px solid var(--line);
          background: rgba(43, 157, 255,0.025);
        }
        .dl-files { padding: 22px 32px; }
        .dl-files-h {
          display: flex; justify-content: space-between;
          margin-bottom: 14px;
        }
        .dl-files-list { display: flex; flex-direction: column; gap: 8px; }
        .dl-file {
          display: grid;
          grid-template-columns: 32px 1fr auto auto;
          gap: 14px;
          padding: 14px 16px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 8px;
          align-items: center;
          transition: all 0.15s ease;
        }
        .dl-file:hover { background: rgba(255,255,255,0.035); }
        .dl-file.primary {
          background: rgba(43, 157, 255,0.04);
          border-color: rgba(43, 157, 255,0.2);
        }
        .dl-file-ico {
          width: 32px; height: 32px;
          background: rgba(43, 157, 255,0.08);
          color: var(--accent);
          border-radius: 6px;
          display: grid; place-items: center;
        }
        .dl-file-name { font-family: var(--mono); font-weight: 600; font-size: 13px; }
        .dl-file-meta {
          display: flex; gap: 6px;
          font-family: var(--mono); font-size: 10px;
          color: var(--fg-3);
          margin-top: 3px;
          letter-spacing: 0.05em;
        }
        .dl-file-type { color: var(--accent); text-transform: uppercase; }

        .dl-older {
          border-top: 1px solid var(--line);
        }
        .dl-older-h {
          display: flex; align-items: center; gap: 10px;
          width: 100%;
          padding: 16px 32px;
          background: transparent;
          border: none;
          color: var(--fg-3);
          font-family: var(--mono);
          font-size: 12px;
          font-weight: 600;
          text-align: left;
        }
        .dl-older-h:hover { background: rgba(255,255,255,0.02); color: var(--fg); }
        .dl-older-list {
          padding: 4px 32px 18px;
          display: flex; flex-direction: column;
          gap: 2px;
        }
        .dl-older-row {
          display: grid;
          grid-template-columns: 12px 1fr auto auto 28px;
          gap: 12px;
          padding: 8px 12px;
          align-items: center;
          font-family: var(--mono);
          font-size: 11px;
          border-radius: 5px;
        }
        .dl-older-row:hover { background: rgba(255,255,255,0.02); }
        .dl-older-name { color: var(--fg-2); }
        .dl-older-date, .dl-older-size { color: var(--fg-4); font-size: 10px; }
        .dl-older-btn {
          width: 24px; height: 24px;
          background: transparent;
          border: 1px solid var(--line);
          color: var(--fg-3);
          border-radius: 4px;
          display: grid; place-items: center;
        }
        .dl-older-btn:hover { color: var(--accent); border-color: rgba(43, 157, 255,0.3); }

        .dl-key-reminder {
          padding: 16px 32px;
          background: rgba(43, 157, 255,0.04);
          border-top: 1px solid rgba(43, 157, 255,0.2);
          font-family: var(--mono);
          font-size: 12px;
          color: var(--fg-2);
          display: flex; align-items: center; gap: 10px;
        }




/* ============================================================
   2c. PHASE 6 ADMIN COMPONENTS
   ============================================================ */

/* ===== page-admin.jsx - 17 block(s) ===== */
/* -- page-admin.jsx block 1 -- */
.admin {
          display: grid;
          grid-template-columns: 220px 1fr;
          min-height: calc(100vh - 49px);
        }
        .admin-side {
          background: #0a0c0d;
          border-right: 1px solid var(--line);
          padding: 16px 12px;
          display: flex; flex-direction: column;
          gap: 2px;
        }
        .admin-side-h {
          padding: 8px 8px 16px;
          margin-bottom: 8px;
          border-bottom: 1px solid var(--line);
          display: flex; align-items: center; justify-content: space-between;
        }
        .admin-side-item {
          display: flex; align-items: center; gap: 10px;
          padding: 8px 12px;
          background: transparent;
          border: 1px solid transparent;
          border-radius: 6px;
          font-family: var(--mono);
          font-size: 12px;
          color: var(--fg-2);
          text-align: left;
        }
        .admin-side-item:hover { background: rgba(255,255,255,0.03); color: var(--fg); }
        .admin-side-item.active {
          background: rgba(43, 157, 255,0.06);
          border-color: rgba(43, 157, 255,0.18);
          color: var(--accent);
        }
        .admin-side-n {
          margin-left: auto;
          font-family: var(--mono); font-size: 10px;
          background: rgba(255,255,255,0.05);
          padding: 2px 6px; border-radius: 100px;
          color: var(--fg-3);
        }
        .admin-side-item.active .admin-side-n { background: rgba(43, 157, 255,0.15); color: var(--accent); }
        .admin-main {
          background: var(--bg);
          min-width: 0;
        }

/* -- page-admin.jsx block 2 -- */
.kpi-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 14px;
          padding: 24px 32px 0;
        }
        @media (max-width: 1200px) { .kpi-grid { grid-template-columns: 1fr 1fr; } }
        .kpi { padding: 20px; position: relative; overflow: hidden; }
        .kpi-l { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-3); }
        .kpi-v { font-family: var(--mono); font-size: 32px; font-weight: 700; letter-spacing: -0.025em; margin-top: 8px; }
        .kpi-row { display: flex; gap: 10px; align-items: center; margin-top: 8px; }
        .kpi-delta { font-family: var(--mono); font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 4px; }
        .kpi-delta.up { color: var(--accent); background: rgba(43, 157, 255,0.08); }
        .kpi-delta.down { color: #ff6688; background: rgba(255,77,109,0.08); }
        .kpi-sub { font-family: var(--mono); font-size: 11px; color: var(--fg-4); }
        .kpi-spark {
          position: absolute;
          right: 16px; top: 18px;
          width: 70px; height: 28px;
        }
        .admin-2col {
          display: grid;
          grid-template-columns: 1.6fr 1fr;
          gap: 14px;
          padding: 24px 32px;
        }
        @media (max-width: 1100px) { .admin-2col { grid-template-columns: 1fr; } }
        .admin-card { padding: 0; }
        .admin-card-h {
          display: flex; align-items: center; justify-content: space-between;
          padding: 22px 22px 18px;
          border-bottom: 1px solid var(--line);
        }
        .admin-table-h, .admin-row {
          display: grid;
          grid-template-columns: 2.2fr 0.7fr 0.9fr 0.7fr 60px;
          gap: 16px;
          padding: 14px 22px;
          align-items: center;
          font-size: 13px;
        }
        .admin-table-h {
          font-family: var(--mono); font-size: 10px;
          color: var(--fg-4);
          text-transform: uppercase; letter-spacing: 0.12em;
          border-bottom: 1px solid var(--line);
          background: rgba(255,255,255,0.01);
          padding: 10px 22px;
        }
        .admin-row { border-bottom: 1px solid var(--line); }
        .admin-row:last-child { border-bottom: none; }
        .admin-row:hover { background: rgba(255,255,255,0.015); }
        .admin-row-prod { display: flex; align-items: center; gap: 12px; }
        .admin-row-img {
          width: 36px; height: 36px;
          border-radius: 6px;
          background: rgba(43, 157, 255,0.08);
          display: grid; place-items: center;
        }
        .admin-row-name { font-family: var(--mono); font-weight: 600; font-size: 13px; }
        .admin-row-game { font-size: 11px; color: var(--fg-3); margin-top: 2px; }
        .admin-row-actions { display: flex; gap: 6px; }

        .activity { padding: 8px 0; }
        .activity-row {
          display: flex; align-items: center; gap: 14px;
          padding: 12px 22px;
          border-bottom: 1px solid var(--line);
        }
        .activity-row:last-child { border-bottom: none; }
        .activity-ico {
          width: 28px; height: 28px;
          border-radius: 6px;
          background: rgba(255,255,255,0.03);
          color: var(--fg-3);
          display: grid; place-items: center;
          flex-shrink: 0;
        }
        .activity-ico.ok { background: rgba(43, 157, 255,0.08); color: var(--accent); }
        .activity-body { flex: 1; min-width: 0; }
        .activity-t { font-size: 12px; display: flex; gap: 8px; align-items: center; }
        .activity-t b { font-weight: 600; }
        .activity-w { font-size: 11px; color: var(--fg-3); margin-top: 2px; }
        .activity-time { font-family: var(--mono); font-size: 10px; color: var(--fg-4); }

/* -- page-admin.jsx block 3 -- */
.bulk-bar {
          display: flex; align-items: center; justify-content: space-between;
          padding: 12px 20px;
          background: rgba(43, 157, 255,0.06);
          border-color: rgba(43, 157, 255,0.2);
          font-family: var(--mono); font-size: 12px;
        }
        .admin-products-h, .admin-products-row {
          display: grid;
          grid-template-columns: 32px 2.4fr 1.2fr 0.7fr 0.7fr 0.5fr 0.8fr 70px;
          gap: 16px;
          padding: 14px 22px;
          align-items: center;
          font-size: 13px;
        }
        .admin-products-h {
          font-family: var(--mono); font-size: 10px;
          color: var(--fg-4);
          text-transform: uppercase; letter-spacing: 0.12em;
          border-bottom: 1px solid var(--line);
          background: rgba(255,255,255,0.01);
          padding: 10px 22px;
        }
        .admin-products-row { border-bottom: 1px solid var(--line); }
        .admin-products-row:last-child { border-bottom: none; }
        .admin-products-row:hover { background: rgba(255,255,255,0.015); }

/* -- page-admin.jsx block 4 -- */
.admin-edit-h {
          padding: 14px 28px;
          border-bottom: 1px solid var(--line);
          display: flex; align-items: center; justify-content: space-between;
          background: rgba(255,255,255,0.01);
          position: sticky; top: 0;
          z-index: 30;
          backdrop-filter: blur(12px);
          gap: 16px;
          flex-wrap: wrap;
        }
        .admin-edit {
          display: grid;
          grid-template-columns: 240px 1fr;
          min-height: calc(100vh - 65px);
        }
        .admin-edit-tabs {
          background: rgba(255,255,255,0.01);
          border-right: 1px solid var(--line);
          padding: 18px 12px;
          display: flex; flex-direction: column;
          gap: 2px;
        }
        .admin-tab {
          display: flex; align-items: center; gap: 10px;
          padding: 10px 12px;
          background: transparent;
          border: 1px solid transparent;
          border-radius: 6px;
          font-family: var(--mono); font-size: 12px;
          color: var(--fg-2);
          text-align: left;
        }
        .admin-tab:hover { background: rgba(255,255,255,0.03); color: var(--fg); }
        .admin-tab.active {
          background: rgba(43, 157, 255,0.06);
          border-color: rgba(43, 157, 255,0.2);
          color: var(--accent);
        }
        .admin-tab-badge {
          margin-left: auto;
          font-family: var(--mono); font-size: 10px;
          background: rgba(255,255,255,0.05);
          padding: 1px 6px; border-radius: 100px;
          color: var(--fg-3);
        }
        .admin-tab.active .admin-tab-badge { background: rgba(43, 157, 255,0.15); color: var(--accent); }
        .admin-edit-tabs-info {
          margin-top: auto;
          padding: 14px 12px 4px;
          border-top: 1px solid var(--line);
          margin-top: 16px;
        }
        .admin-edit-body {
          padding: 32px 40px;
          max-width: 1100px;
          width: 100%;
        }

/* -- page-admin.jsx block 5 -- */
.f { display: flex; flex-direction: column; gap: 8px; }
        .f-span { grid-column: 1 / -1; }
        .f-label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-3); }
        .f-hint { font-size: 11px; color: var(--fg-4); margin-top: 2px; }

/* -- page-admin.jsx block 6 -- */
.inp-wrap { display: flex; align-items: center; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 8px; transition: border-color 0.15s ease; }
        .inp-wrap:focus-within { border-color: rgba(43, 157, 255,0.4); }
        .inp { flex: 1; background: transparent; border: none; outline: none; padding: 10px 14px; color: var(--fg); font-family: var(--mono); font-size: 13px; }
        .inp::placeholder { color: var(--fg-4); }
        .inp-prefix { padding: 0 0 0 14px; font-family: var(--mono); font-size: 13px; color: var(--fg-4); }

/* -- page-admin.jsx block 7 -- */
.sel {
          background: rgba(255,255,255,0.03);
          border: 1px solid var(--line);
          border-radius: 8px;
          padding: 10px 14px;
          color: var(--fg);
          font-family: var(--mono); font-size: 13px;
          width: 100%;
          outline: none;
          color-scheme: dark;
        }
        .sel option {
          background: #14181a;
          color: var(--fg);
        }

/* -- page-admin.jsx block 8 -- */
.tx {
          background: rgba(255,255,255,0.03);
          border: 1px solid var(--line);
          border-radius: 8px;
          padding: 12px 14px;
          color: var(--fg);
          font-family: var(--sans); font-size: 13px;
          line-height: 1.55;
          resize: vertical;
          outline: none;
          width: 100%;
        }
        .tx:focus { border-color: rgba(43, 157, 255,0.4); }

/* -- page-admin.jsx block 9 -- */
.tog {
          width: 44px; height: 24px;
          border-radius: 100px;
          background: rgba(255,255,255,0.05);
          border: 1px solid var(--line);
          padding: 2px;
          position: relative;
          cursor: pointer;
        }
        .tog.on { background: rgba(43, 157, 255,0.2); border-color: rgba(43, 157, 255,0.4); }
        .tog-knob {
          width: 18px; height: 18px;
          border-radius: 50%;
          background: var(--fg-4);
          display: block;
          transition: all 0.2s ease;
        }
        .tog.on .tog-knob { background: var(--accent); box-shadow: 0 0 10px var(--accent); transform: translateX(20px); }

/* -- page-admin.jsx block 10 -- */
.cost-row {
          display: grid;
          grid-template-columns: 220px 1fr;
          gap: 14px;
          align-items: center;
        }
        @media (max-width: 800px) { .cost-row { grid-template-columns: 1fr; } }
        .cost-math {
          display: flex; align-items: center; gap: 10px;
          padding: 10px 14px;
          background: rgba(255,255,255,0.02);
          border: 1px dashed var(--line);
          border-radius: 8px;
          font-family: var(--mono);
          font-size: 12px;
          color: var(--fg-3);
          flex-wrap: wrap;
        }
        .cost-math b { color: var(--fg); font-weight: 700; }
        .cost-eq { color: var(--fg-4); font-weight: 700; }
        .cost-link {
          margin-left: auto;
          display: inline-flex; align-items: center; gap: 4px;
          padding: 4px 10px;
          background: rgba(43, 157, 255,0.06);
          border: 1px solid rgba(43, 157, 255,0.2);
          border-radius: 4px;
          color: var(--accent);
          font-size: 11px;
          cursor: pointer;
        }
        .cost-link:hover { background: rgba(43, 157, 255,0.12); }

        .tier-rows { display: flex; flex-direction: column; gap: 8px; }
        .tier-row {
          display: grid;
          grid-template-columns: 16px 1fr 100px 2fr 32px;
          gap: 8px;
          align-items: center;
        }
        .row-del {
          width: 30px; height: 30px;
          background: transparent;
          border: 1px solid var(--line);
          border-radius: 5px;
          color: var(--fg-4);
        }
        .row-del:hover { color: #ff6688; border-color: rgba(255,77,109,0.3); }
        .btn-add {
          display: inline-flex; align-items: center; gap: 8px;
          padding: 9px 14px;
          background: rgba(43, 157, 255,0.04);
          border: 1px dashed rgba(43, 157, 255,0.3);
          border-radius: 8px;
          color: var(--accent);
          font-family: var(--mono); font-size: 12px;
          width: max-content;
          margin-top: 4px;
        }
        .btn-add:hover { background: rgba(43, 157, 255,0.08); }

/* -- page-admin.jsx block 11 -- */
.gallery-grid {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: 10px;
        }

/* -- page-admin.jsx block 12 -- */
.up {
          position: relative;
          border: 1px dashed var(--line-2);
          border-radius: 10px;
          display: flex; flex-direction: column;
          align-items: center; justify-content: center;
          gap: 6px;
          background: rgba(255,255,255,0.02);
          overflow: hidden;
          cursor: pointer;
          transition: all 0.15s ease;
        }
        .up:hover { border-color: rgba(43, 157, 255,0.4); background: rgba(43, 157, 255,0.03); }
        .up.filled { border-style: solid; border-color: var(--line); }
        .up-l { font-family: var(--mono); font-size: 12px; color: var(--fg-2); }
        .up-s { font-size: 11px; color: var(--fg-4); }
        .up-label {
          position: absolute; bottom: 8px; left: 8px;
          background: rgba(0,0,0,0.6);
          padding: 4px 8px;
          border-radius: 4px;
          font-family: var(--mono); font-size: 10px;
          color: var(--fg-2);
          backdrop-filter: blur(8px);
        }
        .up-actions {
          position: absolute;
          top: 8px; right: 8px;
          display: flex; gap: 4px;
          opacity: 0;
          transition: opacity 0.15s ease;
        }
        .up:hover .up-actions { opacity: 1; }
        .up-actions button {
          width: 24px; height: 24px;
          background: rgba(0,0,0,0.6);
          backdrop-filter: blur(8px);
          border: 1px solid var(--line-2);
          color: var(--fg);
          border-radius: 4px;
          display: grid; place-items: center;
        }

/* -- page-admin.jsx block 13 -- */
.recoil-admin {
          display: grid;
          grid-template-columns: 280px 1fr;
          gap: 24px;
        }
        @media (max-width: 1100px) { .recoil-admin { grid-template-columns: 1fr; } }
        .recoil-admin-list {
          display: flex; flex-direction: column;
          gap: 4px;
          padding-right: 12px;
        }
        .recoil-admin-h {
          display: flex; align-items: center; justify-content: space-between;
          padding: 0 4px 10px;
        }
        .recoil-admin-item {
          display: flex; align-items: center; gap: 10px;
          padding: 10px 12px;
          background: transparent;
          border: 1px solid transparent;
          border-radius: 6px;
          color: var(--fg-2);
          text-align: left;
        }
        .recoil-admin-item:hover { background: rgba(255,255,255,0.03); }
        .recoil-admin-item.active {
          background: rgba(43, 157, 255,0.05);
          border-color: rgba(43, 157, 255,0.2);
        }
        .recoil-admin-info { flex: 1; min-width: 0; }
        .recoil-admin-name { font-family: var(--mono); font-size: 13px; font-weight: 600; }
        .recoil-admin-meta { font-family: var(--mono); font-size: 10px; color: var(--fg-4); margin-top: 2px; }

        .recoil-pair {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 18px;
        }
        .recoil-pair-label {
          display: flex; align-items: center; gap: 10px;
          padding-bottom: 10px;
          font-family: var(--mono); font-size: 12px;
          color: var(--fg-2);
        }
        .recoil-pair-label span {
          width: 22px; height: 22px;
          border-radius: 5px;
          display: grid; place-items: center;
          font-family: var(--mono); font-weight: 700; font-size: 12px;
        }
        .recoil-pair-meta {
          display: flex; justify-content: space-between;
          padding: 10px 4px 0;
          font-family: var(--mono); font-size: 11px;
          color: var(--fg-4);
        }
        .recoil-pair-meta button {
          background: transparent; border: none;
          color: var(--accent);
          font-family: var(--mono); font-size: 11px;
        }

/* -- page-admin.jsx block 14 -- */
.list-rows { display: flex; flex-direction: column; gap: 8px; }
        .list-row {
          display: grid;
          grid-template-columns: 16px 28px 1fr 32px;
          gap: 8px; align-items: center;
        }
        .list-num {
          font-family: var(--mono); font-size: 11px;
          color: var(--accent);
          text-align: center;
        }
        .row-del {
          width: 30px; height: 30px;
          background: transparent;
          border: 1px solid var(--line);
          border-radius: 5px;
          color: var(--fg-4);
        }
        .row-del:hover { color: #ff6688; border-color: rgba(255,77,109,0.3); }
        .btn-add {
          display: inline-flex; align-items: center; gap: 8px;
          padding: 9px 14px;
          background: rgba(43, 157, 255,0.04);
          border: 1px dashed rgba(43, 157, 255,0.3);
          border-radius: 8px;
          color: var(--accent);
          font-family: var(--mono); font-size: 12px;
          width: max-content;
          margin-top: 6px;
        }
        .btn-add:hover { background: rgba(43, 157, 255,0.08); }

/* -- page-admin.jsx block 15 -- */
.req-row {
          display: grid;
          grid-template-columns: 16px 100px 1fr 2fr 32px;
          gap: 8px; align-items: center;
        }

/* -- page-admin.jsx block 16 -- */
.faq-edit { background: rgba(255,255,255,0.02); border: 1px solid var(--line); border-radius: 8px; }
        .faq-edit-h {
          display: grid;
          grid-template-columns: 16px 36px 1fr 16px;
          gap: 12px;
          align-items: center;
          padding: 14px 16px;
          cursor: pointer;
        }
        .faq-edit-num { font-family: var(--mono); font-size: 11px; color: var(--accent); text-align: center; }
        .faq-edit-q { font-family: var(--mono); font-size: 13px; font-weight: 500; }
        .faq-edit-body {
          padding: 6px 16px 16px;
          border-top: 1px solid var(--line);
          display: flex; flex-direction: column; gap: 14px;
        }

/* -- page-admin.jsx block 17 -- */
.publish-status { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .publish-opt {
          display: flex; align-items: center; gap: 14px;
          padding: 16px 20px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 10px;
          color: var(--fg-2);
          text-align: left;
        }
        .publish-opt.active {
          border-color: rgba(43, 157, 255,0.4);
          background: rgba(43, 157, 255,0.04);
        }
        .publish-opt-ind {
          width: 36px; height: 36px;
          border-radius: 50%;
          background: rgba(43, 157, 255,0.15);
          display: grid; place-items: center;
        }
        .publish-opt-t { font-family: var(--mono); font-weight: 600; font-size: 14px; }
        .publish-opt-d { font-size: 11px; color: var(--fg-3); margin-top: 2px; }
        .danger-zone {
          padding: 24px;
          border-color: rgba(255,77,109,0.2);
          background: rgba(255,77,109,0.025);
        }
        .role-preview { margin-top: 22px; padding-top: 22px; border-top: 1px dashed var(--line); }
        .role-preview-card {
          display: flex; align-items: center; gap: 14px;
          padding: 14px 16px;
          background: #0a0a0c;
          border: 1px solid rgba(88,101,242,0.25);
          border-radius: 10px;
        }

/* ===== admin-views.jsx - 9 block(s) ===== */
/* -- admin-views.jsx block 1 -- */
.cust-stats {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 14px;
          padding: 24px 32px 0;
        }
        @media (max-width: 1100px) { .cust-stats { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 500px) { .cust-stats { grid-template-columns: 1fr; } }
        .cust-stat {
          padding: 18px 20px;
          background: linear-gradient(180deg, rgba(22,25,27,0.5), rgba(15,17,18,0.5));
          border: 1px solid var(--line);
          border-radius: 12px;
        }
        .cust-filters {
          display: flex; gap: 10px;
          padding: 20px 32px;
          align-items: center;
          flex-wrap: wrap;
        }
        .cust-table-wrap { padding: 0 32px 24px; }
        .cust-table {
          background: linear-gradient(180deg, rgba(22,25,27,0.5), rgba(15,17,18,0.5));
          border: 1px solid var(--line);
          border-radius: 12px;
          overflow: hidden;
        }
        .cust-h, .cust-row {
          display: grid;
          grid-template-columns: 2fr 1fr 1fr 0.6fr 0.7fr 1fr 1fr 0.9fr 50px;
          gap: 14px;
          padding: 12px 22px;
          align-items: center;
          font-size: 12px;
          min-width: 1100px;
        }
        .cust-h {
          font-family: var(--mono); font-size: 10px;
          color: var(--fg-4);
          text-transform: uppercase; letter-spacing: 0.12em;
          border-bottom: 1px solid var(--line);
          background: rgba(0,0,0,0.25);
        }
        .cust-row { border-bottom: 1px solid var(--line); transition: background 0.15s ease; cursor: pointer; }
        .cust-row:last-child { border-bottom: none; }
        .cust-row:hover { background: rgba(43, 157, 255,0.025); }
        .cust-row-prof { display: flex; align-items: center; gap: 10px; }
        .cust-avatar {
          width: 32px; height: 32px;
          border-radius: 50%;
          display: grid; place-items: center;
          font-family: var(--mono); font-weight: 700;
          color: white;
        }
        .cust-name { font-family: var(--mono); font-weight: 600; font-size: 13px; }
        .cust-email { font-family: var(--mono); font-size: 10px; color: var(--fg-3); margin-top: 2px; }
        .cust-disc { font-family: var(--mono); font-size: 11px; color: #8b9eff; }
        .cust-cell { font-family: var(--mono); font-size: 12px; }

/* -- admin-views.jsx block 2 -- */
.cust-detail-grid {
          display: grid; grid-template-columns: repeat(3, 1fr);
          gap: 14px;
        }
        @media (max-width: 1000px) { .cust-detail-grid { grid-template-columns: 1fr; } .cust-detail-grid > * { grid-column: auto !important; } }
        .cust-detail-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
        .cust-roles { display: flex; flex-direction: column; gap: 6px; }
        .cust-role { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(124,92,255,0.06); border: 1px solid rgba(124,92,255,0.2); border-radius: 6px; }
        .cust-order-row {
          display: grid;
          grid-template-columns: 140px 100px 1.5fr 110px 90px 90px;
          gap: 14px;
          padding: 14px 22px;
          align-items: center;
          border-bottom: 1px solid var(--line);
          font-size: 12px;
          cursor: pointer;
          transition: background 0.15s ease;
        }
        .cust-order-row:last-child { border-bottom: none; }
        .cust-order-row:hover { background: rgba(43, 157, 255,0.04); }
        .cust-order-view {
          display: inline-flex; align-items: center; gap: 5px;
          padding: 6px 10px;
          background: rgba(43, 157, 255,0.06);
          border: 1px solid rgba(43, 157, 255,0.2);
          border-radius: 5px;
          color: var(--accent);
          font-family: var(--mono);
          font-size: 10px;
          font-weight: 700;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          cursor: pointer;
          justify-content: center;
        }
        .cust-order-view:hover {
          background: rgba(43, 157, 255,0.12);
          border-color: rgba(43, 157, 255,0.4);
        }

/* -- admin-views.jsx block 3 -- */
.ord-h, .ord-row {
          display: grid;
          grid-template-columns: 1.4fr 1fr 1fr 1.5fr 1.2fr 1fr 0.8fr 1fr 60px;
          gap: 14px;
          padding: 12px 22px;
          align-items: center;
          font-size: 12px;
          min-width: 1100px;
        }
        .ord-h {
          font-family: var(--mono); font-size: 10px;
          color: var(--fg-4);
          text-transform: uppercase; letter-spacing: 0.12em;
          border-bottom: 1px solid var(--line);
          background: rgba(0,0,0,0.25);
        }
        .ord-row { border-bottom: 1px solid var(--line); transition: background 0.15s ease; }
        .ord-row:last-child { border-bottom: none; }
        .ord-row:hover { background: rgba(43, 157, 255,0.025); }

/* -- admin-views.jsx block 4 -- */
.cat-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 14px;
        }
        @media (max-width: 1200px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
        @media (max-width: 800px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
        .cat-card {
          background: linear-gradient(180deg, rgba(22,25,27,0.5), rgba(15,17,18,0.5));
          border: 1px solid var(--line);
          border-radius: 12px;
          overflow: hidden;
          transition: all 0.2s ease;
        }
        .cat-card:hover { border-color: rgba(43, 157, 255,0.25); }
        .cat-card-vis {
          position: relative;
          aspect-ratio: 5/3;
          overflow: hidden;
        }
        .cat-card-mono {
          position: absolute;
          inset: 0;
          display: grid; place-items: center;
          font-family: var(--mono);
          font-size: 64px;
          font-weight: 800;
          color: rgba(255,255,255,0.12);
          letter-spacing: -0.04em;
        }
        .cat-card-drag {
          position: absolute; top: 10px; left: 10px;
          padding: 4px;
          cursor: grab;
        }
        .cat-card-pop {
          position: absolute; top: 10px; right: 10px;
          padding: 3px 7px;
          background: rgba(43, 157, 255,0.15);
          border: 1px solid rgba(43, 157, 255,0.3);
          border-radius: 3px;
          font-family: var(--mono); font-size: 9px;
          font-weight: 700;
          color: var(--accent);
          letter-spacing: 0.12em;
        }
        .cat-card-body { padding: 14px 16px; }
        .cat-card-name { font-family: var(--mono); font-weight: 700; font-size: 13px; }
        .cat-card-meta {
          display: flex; gap: 6px;
          font-family: var(--mono); font-size: 10px;
          color: var(--fg-3);
          margin-bottom: 12px;
        }
        .cat-card-actions { display: flex; gap: 6px; }
        .cat-add {
          background: transparent;
          border: 1px dashed var(--line-2);
          border-radius: 12px;
          color: var(--fg-3);
          display: flex; flex-direction: column;
          align-items: center; justify-content: center;
          gap: 10px;
          padding: 30px;
          aspect-ratio: 5/4;
          font-family: var(--mono); font-size: 12px;
          font-weight: 600;
          cursor: pointer;
        }
        .cat-add:hover { background: rgba(43, 157, 255,0.03); border-color: rgba(43, 157, 255,0.3); color: var(--accent); }

/* -- admin-views.jsx block 5 -- */
.media-grid {
          display: grid;
          grid-template-columns: repeat(6, 1fr);
          gap: 12px;
        }
        @media (max-width: 1300px) { .media-grid { grid-template-columns: repeat(4, 1fr); } }
        @media (max-width: 800px) { .media-grid { grid-template-columns: repeat(2, 1fr); } }
        .media {
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 10px;
          overflow: hidden;
          cursor: pointer;
          transition: all 0.18s ease;
        }
        .media:hover { border-color: var(--line-2); }
        .media.picked {
          border-color: var(--accent);
          box-shadow: 0 0 0 1px var(--accent);
        }
        .media-vis {
          position: relative;
          aspect-ratio: 1;
          display: grid; place-items: center;
        }
        .media-type {
          position: absolute; top: 8px; right: 8px;
          padding: 2px 6px;
          background: rgba(0,0,0,0.5);
          border: 1px solid rgba(255,255,255,0.1);
          border-radius: 3px;
          font-family: var(--mono); font-size: 8px;
          letter-spacing: 0.14em;
          color: rgba(255,255,255,0.6);
        }
        .media-body { padding: 8px 10px; }
        .media-name {
          font-family: var(--mono); font-size: 11px;
          font-weight: 600;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .media-meta {
          display: flex; gap: 4px;
          font-family: var(--mono); font-size: 9px;
          color: var(--fg-3);
          margin-top: 3px;
        }

/* -- admin-views.jsx block 6 -- */
.set-grid {
          display: grid;
          grid-template-columns: 220px 1fr;
          gap: 0;
          min-height: 700px;
        }
        @media (max-width: 900px) { .set-grid { grid-template-columns: 1fr; } }
        .set-side {
          padding: 20px 12px;
          border-right: 1px solid var(--line);
          display: flex; flex-direction: column;
          gap: 2px;
        }
        .set-side-item {
          display: flex; align-items: center; gap: 10px;
          padding: 10px 12px;
          background: transparent;
          border: 1px solid transparent;
          border-radius: 6px;
          color: var(--fg-2);
          font-family: var(--mono); font-size: 12px;
          font-weight: 500;
          text-align: left;
        }
        .set-side-item:hover { background: rgba(255,255,255,0.03); color: var(--fg); }
        .set-side-item.active {
          background: rgba(43, 157, 255,0.05);
          border-color: rgba(43, 157, 255,0.2);
          color: var(--accent);
        }
        .set-body { padding: 32px 40px; }

/* -- admin-views.jsx block 7 -- */
.bill-providers { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
        .bill-prov {
          padding: 22px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 12px;
        }
        .bill-prov-disabled { opacity: 0.6; }
        .bill-prov-h {
          display: flex;
          align-items: center;
          gap: 14px;
        }
        .bill-prov-ico {
          width: 44px; height: 44px;
          border-radius: 10px;
          border: 1px solid;
          display: grid; place-items: center;
        }
        .bill-prov-name {
          font-family: var(--mono); font-weight: 700; font-size: 16px;
          letter-spacing: -0.01em;
          display: flex; align-items: center;
        }
        .bill-prov-sub {
          font-family: var(--mono); font-size: 11px;
          color: var(--fg-3);
          margin-top: 4px;
        }

/* -- admin-views.jsx block 8 -- */
.team-list { display: flex; flex-direction: column; gap: 8px; }
        .team-row {
          display: grid;
          grid-template-columns: 36px 1fr 160px 90px 32px;
          gap: 14px;
          padding: 12px 14px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 8px;
          align-items: center;
        }

/* -- admin-views.jsx block 9 -- */
.api-list { display: flex; flex-direction: column; gap: 8px; }
        .api-row {
          display: grid;
          grid-template-columns: 1.4fr 1fr 36px 32px;
          gap: 14px;
          padding: 14px 16px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 8px;
          align-items: center;
        }
        .api-key {
          font-family: var(--mono); font-size: 11px;
          color: var(--accent);
          padding: 6px 10px;
          background: #050606;
          border: 1px solid var(--line-2);
          border-radius: 5px;
        }

/* ===== admin-status.jsx - 3 block(s) ===== */
/* -- admin-status.jsx block 1 -- */
.sm-cards {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 14px;
          padding: 24px 32px 0;
        }
        @media (max-width: 1100px) { .sm-cards { grid-template-columns: 1fr 1fr; } }
        .sm-card {
          padding: 18px 20px;
          background: linear-gradient(180deg, rgba(22,25,27,0.5), rgba(15,17,18,0.5));
          border: 1px solid var(--line);
          border-radius: 12px;
          text-align: left;
          cursor: pointer;
          transition: all 0.18s ease;
          position: relative;
          overflow: hidden;
        }
        .sm-card::before {
          content: ""; position: absolute;
          left: 0; top: 0; bottom: 0; width: 3px;
          background: var(--c);
          opacity: 0.4;
        }
        .sm-card:hover { border-color: var(--line-2); }
        .sm-card.active {
          border-color: var(--c);
          background: linear-gradient(180deg, var(--c) -800%, rgba(15,17,18,0.6) 30%);
        }
        .sm-card.active::before { opacity: 1; box-shadow: 0 0 12px var(--c); }
        .sm-card-h { display: flex; align-items: center; gap: 10px; }
        .sm-card-l { font-family: var(--mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--c); }
        .sm-card-v { font-family: var(--mono); font-size: 32px; font-weight: 700; letter-spacing: -0.025em; margin-top: 8px; line-height: 1; }
        .sm-card-d { font-family: var(--mono); font-size: 11px; color: var(--fg-3); margin-top: 6px; }

        .sm-filters {
          display: flex; gap: 10px;
          padding: 20px 32px;
          align-items: center;
        }

        .sm-bulk {
          margin: 0 32px 14px;
          padding: 12px 20px;
          background: rgba(43, 157, 255,0.06);
          border: 1px solid rgba(43, 157, 255,0.2);
          border-radius: 10px;
          display: flex; justify-content: space-between;
          align-items: center;
          flex-wrap: wrap;
          gap: 12px;
          font-family: var(--mono); font-size: 12px;
          color: var(--accent);
        }
        .sm-bulk-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
        .sm-bulk-btn {
          display: inline-flex; align-items: center; gap: 6px;
          padding: 6px 10px;
          background: rgba(0,0,0,0.3);
          border: 1px solid var(--line);
          border-radius: 5px;
          color: var(--c, var(--fg-2));
          font-family: var(--mono); font-size: 11px;
          font-weight: 600;
        }
        .sm-bulk-btn:hover { background: rgba(0,0,0,0.5); border-color: var(--c); }

        .sm-table-wrap {
          padding: 0 32px 24px;
        }
        .sm-table {
          background: linear-gradient(180deg, rgba(22,25,27,0.5), rgba(15,17,18,0.5));
          border: 1px solid var(--line);
          border-radius: 12px;
          overflow: hidden;
        }
        .sm-h, .sm-row {
          display: grid;
          grid-template-columns: 32px 1.6fr 1fr 180px 1.4fr 90px 50px;
          gap: 16px;
          padding: 12px 22px;
          align-items: center;
        }
        .sm-h {
          font-family: var(--mono); font-size: 10px;
          color: var(--fg-4);
          text-transform: uppercase; letter-spacing: 0.12em;
          border-bottom: 1px solid var(--line);
          background: rgba(0,0,0,0.2);
        }
        .sm-row { border-bottom: 1px solid var(--line); transition: background 0.15s ease; }
        .sm-row:last-child { border-bottom: none; }
        .sm-row:hover { background: rgba(255,255,255,0.015); }
        .sm-row-prod { display: flex; align-items: center; gap: 12px; }

        .sm-foot {
          display: flex; justify-content: space-between; align-items: center;
          padding: 14px 32px 28px;
          flex-wrap: wrap;
          gap: 12px;
        }

/* -- admin-status.jsx block 2 -- */
.sm-picker { position: relative; }
        .sm-picker-btn {
          display: flex; align-items: center; gap: 8px;
          width: 100%;
          padding: 7px 10px;
          border: 1px solid;
          border-radius: 6px;
          font-family: var(--mono);
          font-size: 11px;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 0.06em;
        }
        .sm-picker-menu {
          position: absolute;
          top: calc(100% + 4px);
          left: 0; right: 0;
          background: #14181a;
          border: 1px solid var(--line-2);
          border-radius: 8px;
          padding: 4px;
          z-index: 30;
          box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5);
        }
        .sm-picker-opt {
          display: flex; align-items: center; gap: 8px;
          padding: 8px 10px;
          background: transparent;
          border: none;
          width: 100%;
          font-family: var(--mono); font-size: 11px;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 0.06em;
          border-radius: 5px;
          text-align: left;
        }
        .sm-picker-opt:hover { background: rgba(255,255,255,0.04); }
        .sm-picker-opt.active { background: rgba(255,255,255,0.04); }

/* -- admin-status.jsx block 3 -- */
.sm-note {
          display: flex; align-items: center; gap: 8px;
          padding: 6px 10px;
          width: 100%;
          background: transparent;
          border: 1px dashed transparent;
          border-radius: 5px;
          color: var(--fg-2);
          font-size: 12px;
          font-family: var(--sans);
          text-align: left;
          line-height: 1.4;
        }
        .sm-note:hover {
          background: rgba(255,255,255,0.03);
          border-color: var(--line);
        }

/* ===== admin-payouts.jsx - 4 block(s) ===== */
/* -- admin-payouts.jsx block 1 -- */
.po-kpi {
          display: grid;
          grid-template-columns: repeat(6, 1fr);
          gap: 0;
          margin: 24px 32px 0;
          border: 1px solid var(--line);
          border-radius: 14px;
          overflow: hidden;
          background: linear-gradient(180deg, rgba(22,25,27,0.5), rgba(15,17,18,0.5));
        }
        @media (max-width: 1300px) { .po-kpi { grid-template-columns: repeat(3, 1fr); } }
        @media (max-width: 700px) { .po-kpi { grid-template-columns: 1fr 1fr; } }
        .po-kpi-card {
          padding: 18px 20px;
          border-right: 1px solid var(--line);
          border-bottom: 1px solid var(--line);
        }
        .po-kpi-card:last-child { border-right: none; }
        @media (max-width: 1300px) {
          .po-kpi-card:nth-child(3n) { border-right: none; }
        }
        .po-kpi-card-em { background: rgba(43, 157, 255,0.04); }

        .po-devs {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: 10px;
          margin: 18px 32px;
        }
        @media (max-width: 1100px) { .po-devs { grid-template-columns: repeat(3, 1fr); } }
        @media (max-width: 600px) { .po-devs { grid-template-columns: 1fr 1fr; } }
        .po-dev {
          display: grid;
          grid-template-columns: 36px 1fr auto;
          gap: 12px;
          align-items: center;
          padding: 12px 14px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 10px;
          text-align: left;
        }
        .po-dev:hover { background: rgba(255,255,255,0.04); }
        .po-dev.active {
          background: rgba(43, 157, 255,0.05);
          border-color: rgba(43, 157, 255,0.3);
        }
        .po-dev-avatar {
          width: 36px; height: 36px;
          border-radius: 50%;
          display: grid; place-items: center;
          font-family: var(--mono); font-weight: 700;
          color: white;
          font-size: 13px;
        }
        .po-dev-name { font-family: var(--mono); font-weight: 600; font-size: 13px; }
        .po-dev-sub { font-family: var(--mono); font-size: 10px; color: var(--fg-3); margin-top: 2px; }
        .po-dev-owed { font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--accent); }

        .po-table-wrap { margin: 0 32px 24px; }
        .po-table-h {
          display: flex; justify-content: space-between;
          align-items: flex-start;
          padding: 18px 0;
        }
        .po-table {
          background: linear-gradient(180deg, rgba(22,25,27,0.5), rgba(15,17,18,0.5));
          border: 1px solid var(--line);
          border-radius: 12px;
          overflow: hidden;
        }
        .po-h, .po-row {
          display: grid;
          grid-template-columns: 1.4fr 0.6fr 0.9fr 0.7fr 0.7fr 2.2fr 0.6fr 0.7fr;
          gap: 14px;
          padding: 12px 18px;
          align-items: center;
          font-size: 12px;
        }
        .po-h {
          font-family: var(--mono);
          font-size: 10px;
          color: var(--fg-4);
          text-transform: uppercase;
          letter-spacing: 0.1em;
          background: rgba(0,0,0,0.25);
          border-bottom: 1px solid var(--line);
        }
        .po-row { border-bottom: 1px solid var(--line); transition: background 0.15s ease; }
        .po-row:last-child { border-bottom: none; }
        .po-row:hover { background: rgba(255,255,255,0.015); }
        .po-prod { display: flex; align-items: center; gap: 10px; }
        .po-cell { font-family: var(--mono); }

        .po-assigns { display: flex; flex-direction: column; gap: 5px; }
        .po-assign {
          display: grid;
          grid-template-columns: 22px 1fr 70px auto 22px;
          gap: 8px;
          align-items: center;
          padding: 5px 8px;
          background: rgba(255,255,255,0.03);
          border: 1px solid var(--line);
          border-radius: 5px;
        }
        .po-assign-avatar {
          width: 22px; height: 22px;
          border-radius: 50%;
          display: grid; place-items: center;
          font-family: var(--mono); font-weight: 700;
          color: white;
          font-size: 10px;
        }
        .po-assign-name { font-family: var(--mono); font-size: 12px; font-weight: 600; }
        .po-assign-pay { font-family: var(--mono); font-size: 11px; color: var(--accent); }
        .po-assign-rm {
          width: 22px; height: 22px;
          background: transparent;
          border: 1px solid var(--line);
          border-radius: 4px;
          color: var(--fg-4);
          display: grid; place-items: center;
        }
        .po-assign-rm:hover { color: #ff6688; border-color: rgba(255,77,109,0.3); }

        .po-formula {
          margin: 0 32px 32px;
          padding: 22px 24px;
          background: linear-gradient(180deg, rgba(43, 157, 255,0.05), rgba(43, 157, 255,0.02));
          border: 1px solid rgba(43, 157, 255,0.2);
          border-radius: 12px;
        }
        .po-formula-eq {
          display: flex; flex-wrap: wrap; gap: 8px;
          align-items: center;
          margin-top: 14px;
        }
        .po-formula-part {
          padding: 5px 10px;
          background: rgba(0,0,0,0.3);
          border: 1px solid var(--line);
          border-radius: 5px;
          font-family: var(--mono); font-size: 12px;
          font-weight: 600;
          color: var(--fg);
        }
        .po-formula-op {
          font-family: var(--mono); font-size: 14px;
          color: var(--fg-3); font-weight: 700;
        }

/* -- admin-payouts.jsx block 2 -- */
.po-cost {
          display: flex; align-items: center;
          background: rgba(255,255,255,0.03);
          border: 1px solid var(--line);
          border-radius: 5px;
          font-family: var(--mono);
          font-size: 12px;
        }
        .po-cost:focus-within { border-color: rgba(43, 157, 255,0.4); }
        .po-cost span { padding: 0 0 0 8px; color: var(--fg-4); }
        .po-cost input {
          flex: 1; min-width: 0;
          background: transparent; border: none; outline: none;
          padding: 6px 8px;
          color: var(--fg);
          font: inherit;
          width: 100%;
        }

/* -- admin-payouts.jsx block 3 -- */
.po-pct {
          display: flex; align-items: center;
          background: rgba(43, 157, 255,0.06);
          border: 1px solid rgba(43, 157, 255,0.25);
          border-radius: 4px;
          font-family: var(--mono);
          font-size: 12px;
          color: var(--accent);
          font-weight: 700;
        }
        .po-pct:focus-within { border-color: var(--accent); }
        .po-pct input {
          width: 36px;
          background: transparent; border: none; outline: none;
          padding: 5px 4px 5px 8px;
          color: var(--accent);
          font: inherit;
          font-weight: 700;
          text-align: right;
        }
        .po-pct input::-webkit-outer-spin-button,
        .po-pct input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
        .po-pct span { padding: 0 8px 0 1px; }

/* -- admin-payouts.jsx block 4 -- */
.po-add { position: relative; }
        .po-add-btn {
          display: inline-flex; align-items: center; gap: 5px;
          padding: 5px 10px;
          background: rgba(43, 157, 255,0.04);
          border: 1px dashed rgba(43, 157, 255,0.3);
          border-radius: 5px;
          color: var(--accent);
          font-family: var(--mono); font-size: 11px;
          font-weight: 600;
          align-self: flex-start;
        }
        .po-add-btn:hover { background: rgba(43, 157, 255,0.08); }
        .po-add-menu {
          position: absolute;
          bottom: calc(100% + 4px);
          left: 0;
          min-width: 200px;
          background: #14181a;
          border: 1px solid var(--line-2);
          border-radius: 8px;
          padding: 4px;
          z-index: 30;
          box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5);
        }
        .po-add-opt {
          display: flex; align-items: center; gap: 10px;
          padding: 8px 10px;
          background: transparent;
          border: none;
          width: 100%;
          text-align: left;
          color: var(--fg);
          border-radius: 5px;
        }
        .po-add-opt:hover { background: rgba(255,255,255,0.04); }

/* ===== admin-order-detail.jsx - 2 block(s) ===== */
/* -- admin-order-detail.jsx block 1 -- */
.od-grid {
          display: grid;
          grid-template-columns: 1.6fr 1fr;
          gap: 16px;
          padding: 24px 32px;
        }
        @media (max-width: 1100px) { .od-grid { grid-template-columns: 1fr; } }
        .od-l, .od-r { display: flex; flex-direction: column; gap: 14px; }
        .od-card { padding: 0; }
        .od-card-h {
          display: flex; justify-content: space-between; align-items: center;
          padding: 14px 20px;
          border-bottom: 1px solid var(--line);
        }
        .od-body { padding: 18px 20px; }

        .od-item {
          display: flex; gap: 14px;
          padding: 18px 20px;
          align-items: center;
          border-bottom: 1px solid var(--line);
        }
        .od-item-img {
          width: 46px; height: 46px;
          border-radius: 8px;
          background: rgba(43, 157, 255,0.08);
          display: grid; place-items: center;
          flex-shrink: 0;
        }
        .od-item-key {
          display: inline-flex; align-items: center; gap: 8px;
          margin-top: 10px;
          padding: 6px 10px;
          background: rgba(43, 157, 255,0.05);
          border: 1px dashed rgba(43, 157, 255,0.25);
          border-radius: 5px;
          font-family: var(--mono);
          font-size: 11px;
        }
        .od-item-key code { color: var(--accent); font-weight: 600; }
        .od-copy {
          display: inline-flex; align-items: center; gap: 5px;
          padding: 3px 8px;
          background: rgba(0,0,0,0.3);
          border: 1px solid var(--line);
          border-radius: 4px;
          color: var(--fg-3);
          font: inherit;
          font-size: 10px;
          cursor: pointer;
        }
        .od-copy:hover { color: var(--accent); border-color: rgba(43, 157, 255,0.3); }

        .od-totals {
          padding: 16px 20px;
          font-family: var(--mono); font-size: 12px;
          display: flex; flex-direction: column;
          gap: 6px;
        }
        .od-totals > div {
          display: flex; justify-content: space-between;
          padding: 5px 0;
          border-bottom: 1px dashed var(--line);
        }
        .od-totals > div:last-child { border-bottom: none; }
        .od-totals span:first-child { color: var(--fg-3); }
        .od-totals-grand { padding-top: 10px; border-top: 1px solid var(--line); margin-top: 4px; font-weight: 700; font-size: 14px; }
        .od-totals-grand span:first-child { color: var(--fg); }
        .od-totals-grand span:last-child { color: var(--accent); }

        .od-timeline { padding: 14px 20px; display: flex; flex-direction: column; gap: 4px; }
        .od-tl-row {
          display: grid;
          grid-template-columns: 18px 28px 1fr;
          gap: 12px;
          padding: 10px 0;
          align-items: center;
        }
        .od-tl-line {
          position: relative;
          height: 100%; min-height: 36px;
          display: grid; place-items: center;
        }
        .od-tl-line::before { content: ""; position: absolute; left: 50%; top: 0; bottom: -10px; width: 1px; background: var(--line); }
        .od-tl-row:last-child .od-tl-line::before { display: none; }
        .od-tl-dot { width: 8px; height: 8px; border-radius: 50%; position: relative; z-index: 1; flex-shrink: 0; }
        .od-tl-ico {
          width: 28px; height: 28px;
          border-radius: 6px;
          display: grid; place-items: center;
          border: 1px solid;
          flex-shrink: 0;
        }

        .od-files { padding: 8px 0; }
        .od-file {
          display: flex; gap: 12px; align-items: center;
          padding: 12px 20px;
          border-bottom: 1px solid var(--line);
        }
        .od-file:last-child { border-bottom: none; }
        .od-file:hover { background: rgba(255,255,255,0.015); }

        .od-kv { display: flex; flex-direction: column; gap: 8px; }

/* -- admin-order-detail.jsx block 2 -- */
.kv2 {
          display: flex; justify-content: space-between;
          padding: 6px 0;
          font-family: var(--mono); font-size: 12px;
          border-bottom: 1px dashed var(--line);
        }
        .kv2:last-child { border-bottom: none; }
        .kv2 > span:first-child { color: var(--fg-3); }
        .kv2 > span:last-child { color: var(--fg); font-weight: 600; text-align: right; }

/* ===== admin-category-edit.jsx - 6 block(s) ===== */
/* -- admin-category-edit.jsx block 1 -- */
.ce-tile-mini {
          width: 44px; height: 44px;
          border-radius: 8px;
          display: grid; place-items: center;
          font-family: var(--mono);
          font-weight: 800;
          font-size: 14px;
          color: rgba(255,255,255,0.7);
          letter-spacing: -0.02em;
          border: 1px solid var(--line-2);
        }

/* -- admin-category-edit.jsx block 2 -- */
.vis-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
        @media (max-width: 800px) { .vis-grid { grid-template-columns: 1fr; } }
        .vis-card {
          display: flex; align-items: center; gap: 12px;
          padding: 14px 16px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 10px;
          color: var(--fg-2);
          text-align: left;
          cursor: pointer;
        }
        .vis-card.active { border-color: rgba(43, 157, 255,0.4); background: rgba(43, 157, 255,0.04); }
        .vis-ind {
          width: 30px; height: 30px;
          border-radius: 50%;
          display: grid; place-items: center;
          flex-shrink: 0;
        }
        .vis-t { font-family: var(--mono); font-weight: 600; font-size: 12px; }
        .vis-d { font-size: 10px; color: var(--fg-3); margin-top: 2px; }

/* -- admin-category-edit.jsx block 3 -- */
.art-preview-wrap {
          padding: 22px;
          background: rgba(0,0,0,0.25);
          border: 1px solid var(--line);
          border-radius: 12px;
        }
        .art-preview-row {
          display: grid;
          grid-template-columns: 2fr 1fr 1.4fr;
          gap: 16px;
          align-items: start;
        }
        @media (max-width: 1000px) { .art-preview-row { grid-template-columns: 1fr 1fr; } }
        @media (max-width: 600px) { .art-preview-row { grid-template-columns: 1fr; } }
        .art-cap {
          font-family: var(--mono); font-size: 10px;
          color: var(--fg-4);
          text-align: center;
          margin-top: 8px;
          letter-spacing: 0.08em;
        }

        .art-tile {
          position: relative;
          aspect-ratio: 5 / 3;
          border-radius: 12px;
          border: 1px solid var(--line);
          overflow: hidden;
        }
        .art-tile-grid {
          position: absolute; inset: 0;
          background-image:
            linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
          background-size: 24px 24px;
          mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
        }
        .art-tile-mono {
          position: absolute; top: 50%; left: 50%;
          transform: translate(-50%, -50%);
          font-family: var(--mono);
          font-size: 110px;
          font-weight: 800;
          color: rgba(255,255,255,0.12);
          letter-spacing: -0.04em;
        }
        .art-tile-pop {
          position: absolute; top: 14px; right: 14px;
          padding: 3px 7px;
          background: rgba(43, 157, 255,0.15);
          border: 1px solid rgba(43, 157, 255,0.3);
          border-radius: 3px;
          font-family: var(--mono); font-size: 9px;
          font-weight: 700;
          color: var(--accent);
          letter-spacing: 0.12em;
        }
        .art-tile-body {
          position: absolute; left: 16px; right: 16px; bottom: 16px;
          display: flex; justify-content: space-between;
          align-items: end;
        }
        .art-tile-name {
          font-family: var(--mono);
          font-size: 20px;
          font-weight: 700;
          letter-spacing: -0.015em;
        }
        .art-tile-cta {
          display: inline-flex; align-items: center; gap: 6px;
          padding: 6px 10px;
          background: rgba(0,0,0,0.5);
          border: 1px solid var(--line);
          border-radius: 5px;
          color: var(--fg-2);
          font-family: var(--mono); font-size: 10px;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.08em;
          backdrop-filter: blur(8px);
        }

        .art-tile-sm {
          position: relative;
          aspect-ratio: 16 / 10;
          border-radius: 8px;
          border: 1px solid var(--line);
          overflow: hidden;
          display: grid; place-items: center;
        }
        .art-tile-sm-bg { position: absolute; inset: 0; }
        .art-tile-sm-abbr {
          font-family: var(--mono);
          font-size: 36px;
          font-weight: 800;
          color: rgba(255,255,255,0.2);
          position: relative;
        }
        .art-tile-sm-name {
          position: absolute;
          bottom: 8px; left: 10px;
          font-family: var(--mono); font-size: 9px;
          font-weight: 700;
          letter-spacing: 0.1em;
        }

        .art-tile-banner {
          position: relative;
          aspect-ratio: 6 / 1;
          border-radius: 8px;
          border: 1px solid var(--line);
          padding: 0 18px;
          display: flex; align-items: center; justify-content: space-between;
        }
        .art-tile-banner-name {
          font-family: var(--mono);
          font-weight: 700;
          font-size: 14px;
        }

        .art-mode {
          display: flex; gap: 4px;
          padding: 4px;
          background: rgba(0,0,0,0.3);
          border: 1px solid var(--line);
          border-radius: 8px;
          width: max-content;
        }
        .art-mode-tab {
          display: inline-flex; align-items: center; gap: 8px;
          padding: 8px 14px;
          background: transparent;
          border: none;
          border-radius: 5px;
          font-family: var(--mono); font-size: 12px;
          font-weight: 600;
          color: var(--fg-3);
          cursor: pointer;
        }
        .art-mode-tab:hover { color: var(--fg); }
        .art-mode-tab.active {
          background: var(--accent);
          color: #04121f;
        }

        .art-section {}
        .art-hue-grid {
          display: grid;
          grid-template-columns: repeat(7, 1fr);
          gap: 8px;
        }
        @media (max-width: 1100px) { .art-hue-grid { grid-template-columns: repeat(4, 1fr); } }
        @media (max-width: 600px) { .art-hue-grid { grid-template-columns: repeat(3, 1fr); } }
        .art-hue {
          display: flex; flex-direction: column;
          align-items: center;
          gap: 6px;
          padding: 10px 8px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.15s ease;
        }
        .art-hue:hover { background: rgba(255,255,255,0.04); }
        .art-hue.active {
          background: rgba(43, 157, 255,0.06);
          border-color: rgba(43, 157, 255,0.3);
        }
        .art-hue-swatch {
          width: 40px; height: 40px;
          border-radius: 8px;
          border: 1px solid rgba(255,255,255,0.08);
        }
        .art-hue-name {
          font-family: var(--mono); font-size: 10px;
          font-weight: 600;
          color: var(--fg-2);
        }

        .art-slider {
          display: flex; align-items: center; gap: 14px;
          padding: 12px 16px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 8px;
          font-family: var(--mono); font-size: 12px;
          color: var(--fg-3);
        }
        .art-range {
          flex: 1;
          height: 6px;
          background: linear-gradient(90deg, hsl(0,60%,40%), hsl(60,60%,40%), hsl(120,60%,40%), hsl(180,60%,40%), hsl(240,60%,40%), hsl(300,60%,40%), hsl(360,60%,40%));
          border-radius: 100px;
          appearance: none;
          cursor: pointer;
        }
        .art-range::-webkit-slider-thumb {
          appearance: none;
          width: 18px; height: 18px;
          border-radius: 50%;
          background: hsl(var(--h), 60%, 50%);
          border: 2px solid white;
          cursor: grab;
          box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 0 10px hsl(var(--h), 60%, 40%);
        }

        .art-uploads {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 18px;
        }
        @media (max-width: 700px) { .art-uploads { grid-template-columns: 1fr; } }

/* -- admin-category-edit.jsx block 4 -- */
.seo-pv {
          padding: 18px 20px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 8px;
          font-family: arial, sans-serif;
        }
        .seo-pv-url { font-size: 12px; color: #9aa0a6; }
        .seo-pv-title { color: #8ab4f8; font-size: 18px; margin-top: 4px; font-weight: 400; }
        .seo-pv-desc { color: var(--fg-3); font-size: 13px; margin-top: 4px; line-height: 1.5; }

/* -- admin-category-edit.jsx block 5 -- */
.cat-prods { display: flex; flex-direction: column; gap: 6px; }
        .cat-prod-row {
          display: grid;
          grid-template-columns: 16px 36px 1fr auto auto auto 32px;
          gap: 14px;
          align-items: center;
          padding: 10px 14px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 8px;
        }
        .cat-prod-row:hover { background: rgba(255,255,255,0.035); }

/* -- admin-category-edit.jsx block 6 -- */
.cat-kpi {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 12px;
        }
        @media (max-width: 900px) { .cat-kpi { grid-template-columns: 1fr 1fr; } }
        .cat-kpi-card {
          padding: 18px 20px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 10px;
        }
        .cat-chart { padding: 20px; }
        .cat-top-row {
          display: grid;
          grid-template-columns: 24px 36px 1fr auto auto;
          gap: 14px;
          align-items: center;
          padding: 10px 14px;
          background: rgba(255,255,255,0.02);
          border: 1px solid var(--line);
          border-radius: 8px;
        }


/* ============================================================
   3. RS overrides (vanilla port additions only — keep tiny)
   ============================================================ */

/* Wrap a Reveal-on-scroll baseline so non-JS visitors see content. */
.rs-reveal { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.7s ease; }
.rs-reveal-hidden { opacity: 0; transform: translateY(20px); }

/* Gated product text (name/descriptions): hidden until JS injects + reveals it,
   so it fades in smoothly rather than popping. Scanners that fail the gate get
   empty slots and never see this content. */
[data-rv] { opacity: 0; transition: opacity 0.3s ease; }
[data-rv].rv-in { opacity: 1; }

/* Protected images: block drag-to-save + selection (right-click menu is blocked
   in JS). A deterrent only — it can't stop DevTools/screenshots. */
.rs-protected {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* iOS long-press "Save Image" */
}

/* ---------- Preloader ---------- */
/* Covers the page until app.js hydrates the gated content, then fades out.
   The CSS animation is a fallback that hides it even if JS is blocked, so it
   can never permanently cover the site. */
#fl-preloader {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background: #000;                 /* matches the logo background */
  transition: opacity 0.45s ease;
  animation: flPreFallback 0.5s ease 8s forwards;
}
#fl-preloader.fl-hide { opacity: 0; pointer-events: none; }
@keyframes flPreFallback { to { opacity: 0; visibility: hidden; } }
.fl-preloader-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.fl-preloader-logo { width: 92px; height: 92px; object-fit: contain; animation: flPulse 1.4s ease-in-out infinite; }
.fl-preloader-word { font-family: var(--mono); font-weight: 800; font-size: 24px; letter-spacing: 1px; color: var(--fg); animation: flPulse 1.4s ease-in-out infinite; }
@keyframes flPulse { 0%, 100% { opacity: 0.5; transform: scale(0.97); } 50% { opacity: 1; transform: scale(1); } }
.fl-preloader-bar { width: 140px; height: 3px; background: rgba(255,255,255,0.1); border-radius: 3px; overflow: hidden; }
.fl-preloader-bar span { display: block; width: 38%; height: 100%; border-radius: 3px; background: var(--accent); animation: flBar 1.05s ease-in-out infinite; }
@keyframes flBar { 0% { transform: translateX(-120%); } 100% { transform: translateX(360%); } }

/* The prototype rendered GameTile / ProductCard as <div>; the PHP port uses <a>
   for click navigation. Anchors default to display:inline, which collapses
   aspect-ratio + absolutely-positioned children. Force them to behave as blocks. */
a.gt, a.prod-card { display: block; color: inherit; }
[data-games-tile] { display: block; min-width: 0; }
[data-games-tile] > a.gt { height: 100%; }

/* Make sure the games-tiles grid items can shrink — without min-width:0 a long
   abbr can blow out the column and overflow neighbouring tiles. */
.games-tiles > * { min-width: 0; }

/* ============================================================
 * Native form controls — dark-mode coercion.
 * Browsers default to OS chrome for <select> options, <option>,
 * and the <input type="file"> button. These rules pull them into
 * the dark theme.
 * ============================================================ */

/* Dropdown options that pop up under a <select>. Combined with the root-level
   `color-scheme: dark` above, this gives every bare <select> on the site a
   dark popup. !important wins against any inline styles on the host page. */
select {
  color-scheme: dark;
}
select option,
select optgroup {
  background-color: #0e1011 !important;
  color: #f3f5f4 !important;
}
/* Highlighted option (some browsers honor this). */
select option:checked,
select option:hover {
  background-color: #1d2123 !important;
  color: #2b9dff !important;
}

/* "Choose file" button on <input type="file">. */
input[type="file"]::file-selector-button {
  background: rgba(43, 157, 255, 0.08);
  border: 1px solid rgba(43, 157, 255, 0.4);
  color: #2b9dff;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  margin-right: 12px;
  transition: background 0.15s, border-color 0.15s;
}
input[type="file"]::file-selector-button:hover {
  background: rgba(43, 157, 255, 0.15);
  border-color: #2b9dff;
}

/* Date/time native pickers — make the calendar icon visible on dark bg. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(70%);
  cursor: pointer;
}

/* Color picker swatch frame (admin/branding.php). */
input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 4px; }

/* ============================================================
 * .prose — rich product descriptions (sanitized HTML). Keeps long
 * copy readable and stops WP markup from overflowing / mis-wrapping.
 * ============================================================ */
.prose-wrap { max-width: 820px; }
.prose {
  color: var(--fg-2);
  font-size: 15px;
  line-height: 1.7;
  overflow-wrap: anywhere;   /* never let a long token blow out the column */
  word-break: break-word;
}
.prose > *:first-child { margin-top: 0; }
.prose > *:last-child  { margin-bottom: 0; }
.prose p { margin: 0 0 16px; }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  color: var(--fg);
  font-family: var(--mono);
  font-weight: 700;
  line-height: 1.25;
  margin: 28px 0 12px;
}
.prose h1 { font-size: 26px; }
.prose h2 { font-size: 22px; }
.prose h3 { font-size: 18px; }
.prose h4, .prose h5, .prose h6 { font-size: 15px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin: 4px 0; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { opacity: 0.85; }
.prose strong, .prose b { color: var(--fg); font-weight: 700; }
.prose blockquote {
  margin: 16px 0;
  padding: 10px 16px;
  border-left: 3px solid var(--accent);
  background: rgba(255,255,255,0.02);
  color: var(--fg-3);
  border-radius: 0 8px 8px 0;
}
.prose code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: rgba(255,255,255,0.06);
  padding: 2px 6px;
  border-radius: 4px;
}
.prose pre {
  background: #050606;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  overflow-x: auto;
  margin: 0 0 16px;
}
.prose pre code { background: none; padding: 0; }
.prose img { max-width: 100%; height: auto; border-radius: 8px; margin: 10px 0; }
.prose hr { border: none; border-top: 1px solid var(--line); margin: 24px 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 14px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }
.prose th { background: rgba(255,255,255,0.03); color: var(--fg); font-family: var(--mono); }

/* ============================================================
 * .rs-editor — lightweight WYSIWYG (assets/js/wysiwyg.js)
 * ============================================================ */
.rs-editor { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: rgba(255,255,255,0.03); margin-top: 6px; }
.rs-editor-toolbar {
  display: flex; flex-wrap: wrap; gap: 2px;
  padding: 6px; border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,0.02);
}
.rs-editor-toolbar button {
  background: transparent; border: 1px solid transparent; border-radius: 5px;
  color: var(--fg-2); font-family: var(--mono); font-size: 12px; font-weight: 700;
  min-width: 30px; height: 28px; padding: 0 8px; cursor: pointer; line-height: 1;
}
.rs-editor-toolbar button:hover { background: rgba(255,255,255,0.06); color: var(--fg); }
.rs-editor-toolbar button.active { background: rgba(43, 157, 255,0.12); color: var(--accent); border-color: rgba(43, 157, 255,0.3); }
.rs-editor-toolbar .rs-editor-sep { width: 1px; background: var(--line); margin: 4px 4px; }
.rs-editor-toolbar .rs-editor-spacer { flex: 1; }
.rs-editor-area {
  min-height: 180px; max-height: 460px; overflow-y: auto;
  padding: 14px 16px; color: var(--fg); font-size: 14px; line-height: 1.7;
  outline: none;
}
.rs-editor-area:empty::before { content: attr(data-placeholder); color: var(--fg-4); }
.rs-editor-source {
  display: none; width: 100%; min-height: 220px; resize: vertical;
  border: none; outline: none; background: #050606;
  color: #c7cdcb; font-family: var(--mono); font-size: 12px; line-height: 1.6; padding: 14px 16px;
}
.rs-editor.source-mode .rs-editor-area { display: none; }
.rs-editor.source-mode .rs-editor-source { display: block; }