@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rajdhani:wght@400;500;600;700&family=Roboto:wght@400;700&display=swap');

:root {
  color-scheme: dark;
  --bg: #050505;
  --bg-2: #080808;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --zinc: #a1a1aa;
  --red: #dc2626;
  --red-hot: #ef4444;
  --red-soft: #f87171;
  --line: rgba(255, 255, 255, 0.1);
  --header: 64px;
  --container: 1400px;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #3f3f46 #0a0a0a;
  overflow-x: hidden;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #ef4444; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  color: var(--text);
  background: var(--bg);
  font-family: Rajdhani, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
body > main {
  flex: 1 0 auto;
  width: 100%;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, h5, h6 {
  font-family: Orbitron, sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.1;
  margin: 0 0 0.6rem;
  color: #fff;
}
p { margin: 0 0 0.8rem; }
:focus-visible { outline: 2px solid var(--red-hot); outline-offset: 3px; }
.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 200;
  background: #fff; color: #000; padding: 0.45rem 0.75rem;
}
.skip:focus { top: 0.5rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}

.container, .wrap, .wrap-wide {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
  padding-inline: 1rem;
}
.badge {
  color: var(--red-hot);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.container-store { width: min(100% - 2rem, 80rem); margin-inline: auto; }
.container-store.has-store-sidebar { width: min(100% - 2rem, 92rem); }
.store-hero { margin-bottom: 0.5rem; }
.store-lede { font-size: 20px; max-width: 48rem; margin: 0 auto 2.5rem; }
.store-shell { display: block; }
.store-sidebar-desktop { display: none; }
.store-main { min-width: 0; }
.store-section { margin-bottom: 3rem; }
.store-section .row-title h2 { font-size: 24px; margin: 0; }
.store-toolbar { border-bottom-color: rgba(255,255,255,.08); }
.store-filters-open {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 42px;
  padding: 0 0.9rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: #e4e4e7;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
}
.store-filters-open:hover { border-color: rgba(239,68,68,.45); color: #fff; }
.store-sort select {
  width: auto;
  min-width: 11rem;
  min-height: 42px;
  background: #111113;
  color: #fff;
  border-color: rgba(255,255,255,.12);
  color-scheme: dark;
}
.store-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  margin: -0.5rem 0 1rem;
}
.store-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.85rem;
  padding: 0.2rem 0.55rem 0.2rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: #e4e4e7;
  font-size: 0.78rem;
  font-weight: 600;
}
.store-chip:hover { border-color: rgba(239,68,68,.45); color: #fff; }
.store-chip-clear {
  color: #f87171;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.store-chip-clear:hover { color: #fecaca; }
.store-count {
  margin: 0 0 1rem;
  color: #a1a1aa;
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.store-empty {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: 2.5rem 1rem;
  text-align: center;
}
.store-sidebar {
  display: grid;
  gap: 1rem;
  align-content: start;
}
.store-filters { display: grid; gap: 0; }
.store-filter-group {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 0.15rem 0 0.85rem;
  margin: 0;
}
.store-filter-group + .store-filter-group { margin-top: 0.55rem; padding-top: 0.15rem; }
.store-filter-group:last-of-type { border-bottom: 0; padding-bottom: 0.25rem; }
.store-filter-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 1.85rem;
  padding: 0.2rem 0;
  background: transparent;
  border: 0;
  color: #71717a;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.store-filter-toggle:hover { color: #a1a1aa; }
.store-filter-toggle svg {
  transition: transform .18s ease;
  color: #52525b;
  width: 12px;
  height: 12px;
}
.store-filter-group.is-open .store-filter-toggle svg { transform: rotate(180deg); }
.store-filter-body { padding: 0.35rem 0 0; }
.store-filter-search {
  position: relative;
  display: grid;
}
.store-filter-search svg {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: #71717a;
  pointer-events: none;
}
.store-filter-search input {
  min-height: 2.5rem;
  padding: 0.55rem 0.9rem 0.55rem 2.35rem;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: #fff;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.store-filter-search input::placeholder { color: #71717a; }
.store-filter-search input:hover { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.055); }
.store-filter-search input:focus {
  outline: none;
  border-color: rgba(239,68,68,.45);
  background: rgba(255,255,255,.06);
  box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}
.store-filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.15rem;
  max-height: 14rem;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
.store-check {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0;
  padding: 0.48rem 0.6rem;
  border-radius: 0.55rem;
  color: #a1a1aa;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.store-check:hover { background: rgba(255,255,255,.04); color: #f4f4f5; }
.store-check:has(input:checked) {
  background: rgba(239,68,68,.1);
  color: #fff;
}
.store-check input {
  appearance: none;
  -webkit-appearance: none;
  width: 1.05rem;
  min-width: 1.05rem;
  height: 1.05rem;
  min-height: 1.05rem;
  margin: 0;
  border: 1.5px solid rgba(255,255,255,.22);
  border-radius: 0.3rem;
  background: rgba(0,0,0,.25);
  display: grid;
  place-content: center;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
  accent-color: #ef4444;
}
.store-check input[type="radio"] { border-radius: 999px; }
.store-check input:hover { border-color: rgba(255,255,255,.4); }
.store-check input:checked {
  border-color: #ef4444;
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,.18);
}
.store-check input[type="checkbox"]:checked::after {
  content: "";
  width: 0.28rem;
  height: 0.5rem;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) translate(-0.5px, -0.5px);
}
.store-check input[type="radio"]:checked {
  background: #ef4444;
  box-shadow: inset 0 0 0 3px #0a0a0a, 0 0 0 3px rgba(239,68,68,.18);
}
.store-check input[type="radio"]:checked::after { content: none; }
.store-filter-clear {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.85rem;
  padding: 0.6rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(239,68,68,.28);
  background: rgba(239,68,68,.06);
  color: #fca5a5;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.store-filter-clear:hover {
  background: rgba(239,68,68,.14);
  border-color: rgba(239,68,68,.5);
  color: #fecaca;
}
.store-filter-mobile-actions {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 1fr auto;
  margin-top: 0.75rem;
}
.store-filter-badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
}

.store-drawer {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
}
.store-drawer[hidden] { display: none !important; }
.store-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.62);
}
.store-drawer-panel {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(100%, 22rem);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: #080808;
  border-right: 1px solid rgba(255,255,255,.1);
  box-shadow: 18px 0 40px rgba(0,0,0,.45);
  overflow: hidden;
}
.store-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1rem 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.store-drawer-head h2 {
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.store-drawer-close {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  color: #e4e4e7;
  cursor: pointer;
}
.store-drawer-panel .store-sidebar {
  padding: 0.85rem 1rem 1.25rem;
  overflow: auto;
}
body.store-drawer-open { overflow: hidden; }

@media (min-width: 980px) {
  .store-shell {
    display: grid;
    grid-template-columns: 16.5rem minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
  }
  .store-sidebar-desktop { display: block; }
  .store-sidebar-desktop .store-sidebar {
    position: sticky;
    top: calc(var(--header) + 1rem);
    max-height: calc(100vh - var(--header) - 2rem);
    overflow: auto;
    padding-right: 0.15rem;
  }
  .store-filters-open,
  .store-filter-mobile-actions,
  .store-drawer { display: none !important; }
  .store-toolbar { display: flex; justify-content: space-between; }
  .store-toolbar .search-wrap { flex: 1; max-width: 28rem; }
}


.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header);
  background: rgba(5, 5, 5, 0.8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.header-inner {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.brand { display: flex; align-items: center; gap: 0.75rem; width: max-content; }
.brand img { height: 40px; width: auto; }
.brand-name {
  display: none;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #fff;
  line-height: 1;
}
.brand-name span { color: var(--red); }
.nav-links { display: none; align-items: center; gap: 2rem; }
.nav-links > a,
.nav-item > a {
  color: var(--zinc);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.025em;
  line-height: 20px;
  text-transform: uppercase;
  padding: 4px 0;
}
.nav-links > a:hover,
.nav-item > a:hover,
.nav-item:focus-within > a { color: #fff; }
.nav-links > a[aria-current="page"],
.nav-item > a[aria-current="page"] {
  color: var(--red-hot);
  box-shadow: inset 0 -2px 0 var(--red-hot);
}
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--header);
}
.nav-item.has-menu > a { padding-right: 0.1rem; }
.nav-dropdown {
  position: absolute;
  top: calc(100% - 0.35rem);
  left: 50%;
  transform: translateX(-50%) translateY(0.35rem);
  min-width: 12.5rem;
  padding: 0.45rem;
  display: grid;
  gap: 0.15rem;
  background: rgba(10, 10, 10, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  z-index: 60;
}
.nav-dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.55rem;
  height: 0.55rem;
}
.nav-dropdown a {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 7px;
  color: #d4d4d8;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.2;
}
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible {
  color: #fff;
  background: rgba(239, 68, 68, 0.14);
  outline: none;
}
.nav-item.has-menu:hover .nav-dropdown,
.nav-item.has-menu:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.menu-panel .menu-sub {
  padding-left: 1rem;
  font-size: 15px;
  color: #a1a1aa;
}
.nav-actions { display: none; justify-self: end; align-items: center; gap: 0.55rem; }
.nav-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.25rem;
  padding: 0 0.95rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(24, 24, 27, 0.85);
  color: #e4e4e7;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.nav-chip:hover {
  background: rgba(39, 39, 42, 0.95);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.nav-chip-login {
  border-color: rgba(220, 38, 38, 0.45);
  background: rgba(220, 38, 38, 0.12);
  color: #fecaca;
  box-shadow: 0 0 18px rgba(220, 38, 38, 0.12);
}
.nav-chip-login:hover {
  background: var(--red);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 0 22px rgba(220, 38, 38, 0.35);
}
.nav-chip-profile {
  max-width: 12rem;
}
.nav-chip-profile span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-chip-admin {
  border-color: rgba(220, 38, 38, 0.35);
  color: #fca5a5;
}
.nav-chip-admin:hover {
  background: rgba(220, 38, 38, 0.18);
  border-color: rgba(239, 68, 68, 0.55);
  color: #fff;
}
.nav-toggle {
  justify-self: end;
  background: transparent;
  border: 0;
  color: #fff;
  width: 40px;
  height: 40px;
  padding: 0;
}
.menu-panel {
  display: none;
  position: absolute;
  top: var(--header);
  left: 0;
  right: 0;
  background: #000;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 1rem;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.45);
}
.menu-panel.is-open { display: grid; gap: 1rem; animation: menu-in 0.28s ease; }
.menu-panel a { font-size: 18px; font-weight: 500; color: #d4d4d8; }
.menu-panel .menu-login {
  display: inline-flex;
  width: fit-content;
  margin-top: 0.35rem;
  padding: 0.55rem 1rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(220, 38, 38, 0.45);
  background: rgba(220, 38, 38, 0.12);
  color: #fecaca;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.menu-panel .menu-register {
  color: #a1a1aa;
  font-size: 0.95rem;
}
.menu-panel .menu-register:hover { color: #fff; }
@keyframes menu-in { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }

.page { padding: 80px 0 48px; }
.home-main { padding: 0; }

.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 80px 0 0;
}
.hero-slides, .hero-slides img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-slides { background: #000; }
.hero-slides img {
  object-fit: cover; opacity: 0;
  transition: opacity 1.1s ease, transform 7s ease;
  transform: scale(1.04);
}
.hero-slides.is-js img { animation: none; }
.hero-slides img.is-on {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

/* Home Winter mode */
.hero.is-winter-tint .hero-slides {
  filter: saturate(0.82) hue-rotate(8deg) brightness(0.94) contrast(1.04);
}
.hero.is-winter-tint .hero-slides::after {
  content: "";
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(140, 175, 210, .1), transparent 40%, rgba(15, 30, 50, .22));
  mix-blend-mode: soft-light;
}
.hero-frost-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hero-frost {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  overflow: hidden;
}
.hero-frost-noise {
  position: absolute; inset: 0;
  opacity: .22;
  filter: url(#hero-frost-noise);
  background: rgba(230, 242, 255, .4);
  mask-image:
    radial-gradient(ellipse 85% 65% at 0% 0%, #000 0%, transparent 58%),
    radial-gradient(ellipse 85% 65% at 100% 0%, #000 0%, transparent 58%),
    radial-gradient(ellipse 75% 58% at 0% 100%, #000 0%, transparent 52%),
    radial-gradient(ellipse 75% 58% at 100% 100%, #000 0%, transparent 52%);
  -webkit-mask-image:
    radial-gradient(ellipse 85% 65% at 0% 0%, #000 0%, transparent 58%),
    radial-gradient(ellipse 85% 65% at 100% 0%, #000 0%, transparent 58%),
    radial-gradient(ellipse 75% 58% at 0% 100%, #000 0%, transparent 52%),
    radial-gradient(ellipse 75% 58% at 100% 100%, #000 0%, transparent 52%);
}
.hero-frost-edge {
  position: absolute;
  width: min(38vw, 320px);
  height: min(38vw, 320px);
  opacity: .38;
  background:
    radial-gradient(circle at 0 0, rgba(255,255,255,.55) 0, rgba(210,230,255,.14) 32%, transparent 64%);
  mix-blend-mode: screen;
  filter: blur(0.4px);
}
.hero-frost-edge.is-tl { left: -3%; top: -3%; }
.hero-frost-edge.is-tr { right: -3%; top: -3%; transform: scaleX(-1); }
.hero-frost-edge.is-bl { left: -3%; bottom: -5%; transform: scaleY(-1); opacity: .24; }
.hero-frost-edge.is-br { right: -3%; bottom: -5%; transform: scale(-1); opacity: .24; }
.hero-snow-canvas {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%;
  pointer-events: none;
  display: block;
}
/* Snow cap on button rim ? single SVG mound (Christmas-button style), not paint/eggs */
.hero.is-winter-buttons .actions.is-winter-actions {
  align-items: flex-start;
  overflow: visible;
  gap: 1rem;
}
.hero.is-winter-buttons .btn-winter-wrap {
  position: relative;
  display: inline-flex;
  overflow: visible;
  isolation: isolate;
  margin-top: 0.55rem;
}
.hero.is-winter-buttons .btn-winter-wrap .btn {
  position: relative;
  z-index: 1;
}
.hero.is-winter-buttons .btn-winter-wrap.has-winter-snow .btn-snow {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  /* Sit ON the rim: overhang slightly above, scalloped edge overlaps the face */
  top: -0.28rem;
  height: 1.15rem;
  z-index: 3;
  pointer-events: none;
  line-height: 0;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2));
}
.hero.is-winter-buttons .btn-winter-wrap.has-winter-snow .btn-snow-svg {
  display: block;
  width: 100%;
  height: 100%;
}
.hero.is-winter-buttons .btn-winter-wrap.has-winter-snow .btn-snow-under {
  fill: rgba(180, 200, 220, .55);
}
.hero.is-winter-buttons .btn-winter-wrap:nth-child(2).has-winter-snow .btn-snow {
  transform: scaleX(-1);
}

@media (prefers-reduced-motion: reduce) {
  .hero-snow-canvas { display: none !important; }
  .hero-slides img { transition: opacity .35s ease; transform: none; }
}

.hero-shade {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom, rgba(5, 5, 5, 0.3), rgba(5, 5, 5, 0.6), #050505);
}
@keyframes hero-fade {
  0% { opacity: 0; transform: scale(1.1); }
  8%, 30% { opacity: 1; transform: scale(1); }
  40%, 100% { opacity: 0; }
}
.hero-copy { position: relative; z-index: 4; text-align: center; width: min(100% - 2rem, var(--container)); }
.eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 4px 16px;
  border-radius: 999px;
  border: 1px solid rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.hero h1 {
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.05em;
  margin-bottom: 24px;
}
.grad {
  color: transparent;
  background: linear-gradient(90deg, #ef4444, #f97316);
  -webkit-background-clip: text;
  background-clip: text;
}
.lede {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.625;
  max-width: 42rem;
  margin: 0 auto 40px;
}
.actions { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.btn, a.btn, button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 24px;
  border: 1px solid transparent;
  background: #fff;
  color: #000;
  font-family: Orbitron, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
a.btn.btn-red, .btn.btn-red {
  background: var(--red);
  color: #fff;
  border: 0;
  box-shadow: 0 0 20px rgba(220, 38, 38, 0.4);
}
a.btn.btn-red:hover, .btn.btn-red:hover { background: #b91c1c; box-shadow: 0 0 30px rgba(220, 38, 38, 0.6); }
a.btn.btn-ghost, .btn.btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}
a.btn.btn-ghost:hover, .btn.btn-ghost:hover { background: rgba(255, 255, 255, 0.1); }
.btn-slant {
  --btn-slant-clip: polygon(0 0, 100% 0, 100% 85%, 95% 100%, 0 100%);
  clip-path: var(--btn-slant-clip);
  padding: 24px 32px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.1em;
  line-height: 28px;
}
/*
  clip-path clips CSS borders (no diagonal stroke).
  Use an inset SVG frame with non-scaling-stroke so the outline stays ~1px.
*/
a.btn.btn-ghost.btn-slant,
.btn.btn-ghost.btn-slant {
  position: relative;
  border: 0 !important;
  background: transparent;
  isolation: isolate;
}
a.btn.btn-ghost.btn-slant:hover,
.btn.btn-ghost.btn-slant:hover {
  background: rgba(255, 255, 255, 0.1);
}
a.btn.btn-ghost.btn-slant .btn-slant-frame,
.btn.btn-ghost.btn-slant .btn-slant-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
  color: rgba(255, 255, 255, 0.4);
}
a.btn.btn-ghost.btn-slant:hover .btn-slant-frame,
.btn.btn-ghost.btn-slant:hover .btn-slant-frame {
  color: rgba(255, 255, 255, 0.62);
}
a.btn.btn-ghost.btn-slant .btn-slant-frame polygon,
.btn.btn-ghost.btn-slant .btn-slant-frame polygon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}
a.btn.btn-ghost.btn-slant .btn-label,
.btn.btn-ghost.btn-slant .btn-label {
  position: relative;
  z-index: 1;
}
.btn-white { background: #fff; color: #000; min-width: 180px; padding: 24px 32px; }
.btn-white:hover { background: #e5e7eb; }

.section { padding: 96px 0; }
.section h2 { font-size: 30px; margin-bottom: 16px; }
.center { text-align: center; }
.rule { height: 4px; width: 80px; margin: 0 auto; background: linear-gradient(90deg, var(--red), transparent); }
.muted { color: var(--muted); }
.grid-4, .grid-3, .grid-2, .cards-5, .cards-4 { display: grid; gap: 1.5rem; }
.cards-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pad { padding: 16px; }
.glass {
  background: rgba(20, 20, 20, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.feature { padding: 24px; }
.feature:hover { border-color: rgba(239, 68, 68, 0.5); transform: translateY(-5px); }
.feature-icon {
  width: 48px; height: 48px; margin-bottom: 16px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.1);
  color: var(--red-hot);
  font-family: Orbitron, sans-serif;
  font-size: 12px;
}
.feature h3 { font-size: 20px; margin-bottom: 8px; }
.feature p { color: var(--muted); font-size: 14px; line-height: 1.45; }

.band { background: var(--bg-2); position: relative; }
.band::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(127, 29, 29, 0.3), transparent);
}
.section-head, .row-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1rem; }
.row-title { display: flex; align-items: center; gap: 0.75rem; }
.row-title h3 { margin: 0; font-size: 20px; letter-spacing: 0.05em; text-transform: uppercase; }
.ico {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 8px; background: #18181b; border: 1px solid rgba(255, 255, 255, 0.1); color: var(--red-hot);
  font-size: 11px; font-family: Orbitron, sans-serif;
}
.link-quiet { color: var(--zinc); font-size: 14px; }
.link-quiet:hover { color: #fff; }

.product-card { display: block; height: 100%; color: inherit; }
.product-card .shell {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: #0a0a0a;
  transition: border-color 0.5s ease;
}
.product-card:hover .shell { border-color: rgba(239, 68, 68, 0.5); }
.product-card .media { position: relative; background: #000; overflow: hidden; }
.product-card.portrait .media { aspect-ratio: 480 / 853; }
.product-card.landscape .media { aspect-ratio: 323 / 181; }
.product-card img { width: 100%; height: 100%; object-fit: contain; object-position: center; background: #000; }
.product-card .ph { width: 100%; height: 100%; background: #18181b; display: grid; place-items: center; color: #52525b; }
.product-card .body { padding: 16px; display: flex; flex-direction: column; flex: 1; background: #0a0a0a; }
.product-card.landscape .body { padding: 20px; }
.kicker {
  color: var(--red-hot);
  font-family: ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.kicker i { display: inline-block; width: 4px; height: 4px; border-radius: 99px; background: var(--red-hot); margin-right: 4px; vertical-align: middle; }
.product-card h3 {
  font-size: 18px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 8px;
}
.product-card:hover h3 { color: var(--red-hot); }
.card-foot {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.license-note { color: #a1a1aa; font-size: 12px; margin: 0 0 8px; }
.from { font-size: 10px; color: #d4d4d8; text-transform: uppercase; letter-spacing: 0.04em; }
.price-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.4rem; }
.price { color: #fff; font-weight: 700; font-family: ui-monospace, monospace; font-size: 16px; }
.price-was { color: #dc2626; font-family: ui-monospace, monospace; font-size: 13px; font-weight: 700; text-decoration: line-through; }
.product-card.landscape .price { font-size: 20px; }
.plus {
  width: 32px; height: 32px; border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}
.product-card:hover .plus { background: var(--red); }
.sale {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: var(--red); color: #fff; font-size: 10px; font-weight: 700;
  padding: 4px 8px; border-radius: 4px;
}

.preview-ue5 > :nth-child(n + 5) { display: none; }
.hub-band { position: relative; overflow: hidden; border-block: 1px solid rgba(255, 255, 255, 0.05); background: #080808; }
.hub-band .wash { position: absolute; inset: 0; background: rgba(24, 24, 27, 0.5); }
.hub-photo {
  position: absolute; top: 0; right: 0; bottom: 0; width: 100%;
  opacity: 0.2; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000);
  mask-image: linear-gradient(90deg, transparent, #000 35%, #000);
}
@media (min-width: 768px) {
  .hub-photo { width: 60%; -webkit-mask-image: none; mask-image: none; }
}
.hub-photo img { width: 100%; height: 100%; object-fit: cover; }
.hub-fade { position: absolute; inset: 0; background: linear-gradient(90deg, #050505, rgba(5, 5, 5, 0.9), transparent); }
.hub-copy { position: relative; z-index: 1; max-width: 42rem; margin: 0; margin-right: auto; text-align: left; }
.hub-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  margin: 0 0 1.5rem; padding: .25rem .75rem;
  border-radius: 999px; border: 1px solid rgba(239, 68, 68, 0.2);
  background: rgba(239, 68, 68, 0.1); color: #ef4444;
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.pulse-wrap { position: relative; width: 8px; height: 8px; flex: none; }
.pulse-ping {
  position: absolute; inset: 0; border-radius: 999px; background: #f87171;
  opacity: .75; animation: hub-ping 1.4s cubic-bezier(0,0,.2,1) infinite;
}
.pulse { position: relative; width: 8px; height: 8px; border-radius: 999px; background: #ef4444; display: block; }
@keyframes hub-ping {
  75%, 100% { transform: scale(2.2); opacity: 0; }
}
.hub-band .hub-h,
.section.hub-band .hub-h {
  display: grid;
  gap: 0;
  margin: 0 0 1.5rem;
  font-family: Orbitron, sans-serif;
  font-size: clamp(1.35rem, 5.2vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  text-align: left;
  overflow-wrap: anywhere;
  word-break: normal;
}
.hub-h-top {
  display: block;
  white-space: normal;
}
.hub-band .hub-h .grad {
  display: block;
}
@media (max-width: 720px) {
  .hub-copy {
    max-width: 100%;
    padding-inline: 0;
  }
  .hub-band .hub-h,
  .section.hub-band .hub-h {
    letter-spacing: 0.025em;
    margin-bottom: 1.1rem;
  }
  .hub-hero h1 {
    font-size: clamp(1.3rem, 5.5vw, 1.85rem);
    letter-spacing: 0.03em;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  .store-title {
    letter-spacing: 0.03em;
    padding-inline: 0.15rem;
  }
  .store-hero {
    overflow: visible;
    max-width: 100%;
  }
}
.hub-lede {
  margin: 0 0 2rem; color: #9ca3af; font-size: 1.125rem; line-height: 1.625; font-weight: 400;
  font-family: Rajdhani, sans-serif; letter-spacing: 0; max-width: 38rem;
}
.hub-features {
  display: grid; gap: 1rem; margin: 0 0 2.5rem; grid-template-columns: 1fr;
}
.hub-feature {
  display: flex; align-items: center; gap: .75rem; color: #d4d4d8; font-weight: 500; font-size: 1rem;
}
.hub-feature-ico {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none;
  border-radius: .5rem; background: rgba(39, 39, 42, .5); border: 1px solid rgba(255,255,255,.05); color: #ef4444;
  transition: border-color .15s, background .15s;
}
.hub-feature:hover .hub-feature-ico {
  border-color: rgba(239, 68, 68, .3); background: rgba(239, 68, 68, .1);
}
.hub-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.hub-actions .btn {
  min-width: 180px; min-height: 48px; height: 48px;
  padding: 0 32px; border-radius: 0; line-height: 1;
  font-family: Orbitron, sans-serif; font-size: .875rem; font-weight: 700; letter-spacing: .06em;
}
.hub-actions .btn-white { background: #fff; color: #000; border-color: transparent; }
.hub-actions .btn-white:hover { background: #e5e7eb; }
.hub-outline { border-color: rgba(255,255,255,.2); color: #d4d4d8; background: transparent; }
.hub-outline:hover { color: #fff; background: rgba(255,255,255,.1); }
@media (min-width: 640px) {
  .hub-features { grid-template-columns: 1fr 1fr; gap: 1rem 2rem; }
}
@media (max-width: 767px) {
  .hub-photo { opacity: .12; }
}

.goal-wrap {
  --goal-accent: #ef4444;
  --goal-accent-2: #f97316;
  --goal-fill-a: #b91c1c;
  --goal-fill-b: #dc2626;
  --goal-fill-c: #f97316;
  --goal-card-bg: rgba(24, 24, 27, 0.82);
  --goal-panel-bg: rgba(9, 9, 11, 0.55);
  --goal-border: rgba(255, 255, 255, 0.1);
  position: relative;
  padding: clamp(3.5rem, 7vw, 5rem) 0;
  background: var(--goal-bg, none) center / cover fixed;
  isolation: isolate;
}
.goal-wrap.theme-neon {
  --goal-accent: #22d3ee;
  --goal-accent-2: #e879f9;
  --goal-fill-a: #0891b2;
  --goal-fill-b: #22d3ee;
  --goal-fill-c: #e879f9;
}
.goal-wrap.theme-ember {
  --goal-accent: #f59e0b;
  --goal-accent-2: #fb7185;
  --goal-fill-a: #b45309;
  --goal-fill-b: #f59e0b;
  --goal-fill-c: #fb7185;
}
.goal-wrap.theme-roadmap {
  --goal-accent: #a855f7;
  --goal-accent-2: #ff5a5f;
  --goal-fill-a: #7e22ce;
  --goal-fill-b: #a855f7;
  --goal-fill-c: #c084fc;
  --goal-card-bg: #121214;
  --goal-panel-bg: #0c0c0f;
}
.goal-wrap.theme-minimal {
  --goal-accent: #f4f4f5;
  --goal-accent-2: #ef4444;
  --goal-fill-a: #ef4444;
  --goal-fill-b: #f87171;
  --goal-fill-c: #fda4af;
  --goal-card-bg: transparent;
  --goal-panel-bg: rgba(255,255,255,.03);
  --goal-border: rgba(255,255,255,.08);
}
.goal-shade {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(1px);
  z-index: 0;
}
.goal-panel {
  position: relative;
  z-index: 1;
  max-width: 72rem;
  display: grid;
  gap: 1.25rem;
}
.goal-panel.has-support {
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem);
  align-items: start;
  max-width: 84rem;
}
.goal-main, .goal-card {
  background: var(--goal-card-bg);
  border: 1px solid var(--goal-border);
  border-radius: 1rem;
  padding: clamp(2rem, 4vw, 3rem) clamp(1.4rem, 3.5vw, 3rem);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity .7s ease, transform .7s ease;
}
.goal-wrap.theme-minimal .goal-main {
  box-shadow: none;
  padding-inline: 0;
}
.goal-main.is-visible, .goal-card.is-visible { opacity: 1; transform: none; }
.goal-eyebrow {
  margin: 0 auto 0.75rem;
  text-align: center;
  color: var(--goal-accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-family: Orbitron, sans-serif;
}
.goal-main > h2, .goal-card > h2 {
  margin: 0 0 1.15rem;
  text-align: center;
  color: #fff;
  font-size: clamp(1.55rem, 3.6vw, 2.35rem);
  letter-spacing: 0.04em;
  font-weight: 900;
}
.goal-copy {
  margin: 0 auto 2rem;
  max-width: 48rem;
  text-align: center;
  color: #a1a1aa;
  line-height: 1.7;
  font-size: 1.02rem;
}
.goal-widget { margin-bottom: 1.5rem; }
.goal-remaining {
  text-align: center;
  margin: 0 0 1.5rem;
}
.goal-remaining strong {
  display: block;
  color: #fff;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-family: Orbitron, sans-serif;
  letter-spacing: 0.03em;
  margin-bottom: 0.35rem;
}
.goal-remaining p { margin: 0; color: #a1a1aa; font-size: 0.92rem; }
.goal-bullets {
  list-style: none;
  margin: 0 0 1.85rem;
  padding: 0;
  display: grid;
  gap: 0.95rem 1.25rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.goal-bullets li {
  position: relative;
  color: #d4d4d8;
  font-size: 0.95rem;
  padding-left: 1.05rem;
  line-height: 1.35;
}
.goal-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 0.08rem;
  background: var(--goal-accent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--goal-accent) 55%, transparent);
}
.goal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  align-items: center;
}
.goal-patreon {
  min-height: 3rem;
  padding-inline: 1.75rem;
  font-family: Orbitron, sans-serif;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  background: var(--goal-accent-2, var(--goal-accent)) !important;
  border-color: transparent !important;
  box-shadow: 0 0 24px color-mix(in srgb, var(--goal-accent) 35%, transparent);
}
.goal-secondary { color: #d4d4d8; font-size: 0.95rem; transition: color .2s, transform .2s; }
.goal-secondary:hover { color: #fff; transform: translateX(0.15rem); }

.goal-support {
  background: rgba(9, 9, 11, 0.72);
  border: 1px solid color-mix(in srgb, var(--goal-accent-2) 45%, rgba(255,255,255,.12));
  border-radius: 0.9rem;
  padding: 1.2rem 1.15rem;
  display: grid;
  gap: 1rem;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity .7s ease .1s, transform .7s ease .1s;
}
.goal-main.is-visible ~ .goal-support,
.goal-panel.is-ready .goal-support { opacity: 1; transform: none; }
.goal-support h3 {
  margin: 0;
  text-align: center;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}
.goal-support-amounts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.goal-amount {
  min-height: 2.6rem;
  border-radius: 0.45rem;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.goal-amount.on,
.goal-amount:hover {
  background: var(--goal-accent-2);
  border-color: transparent;
  box-shadow: 0 0 18px color-mix(in srgb, var(--goal-accent-2) 40%, transparent);
}
.goal-support-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem 0.75rem;
}
.goal-support-benefits li {
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
  color: #d4d4d8;
  font-size: 0.78rem;
  line-height: 1.3;
}
.goal-support-benefits .icon { color: var(--goal-accent); flex: 0 0 auto; margin-top: 0.1rem; }
.goal-support-actions { display: grid; gap: 0.55rem; grid-template-columns: 1.5fr 0.8fr; }
.goal-support-monthly {
  justify-content: center;
  background: var(--goal-accent-2) !important;
  border-color: transparent !important;
}
.goal-support-once {
  justify-content: center;
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
}

.goal-progress {
  width: 100%;
  padding: 1.45rem 1.5rem 1.35rem;
  border-radius: 1rem;
  background: var(--goal-panel-bg);
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.goal-wrap.theme-roadmap .goal-progress {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0.5rem 0 0;
}
.goal-wrap.theme-minimal .goal-progress {
  border-radius: 0;
  backdrop-filter: none;
}
.goal-progress-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-end;
  margin-bottom: 0.35rem;
}
.goal-wrap.theme-roadmap .goal-progress-head { justify-content: center; text-align: center; margin-bottom: 1.5rem; }
.goal-wrap.theme-roadmap .goal-progress-copy { width: 100%; }
.goal-wrap.theme-roadmap .goal-progress-values { display: none; }
.goal-progress-copy h3 {
  margin: 0 0 0.35rem;
  color: #fff;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  gap: 0.55rem;
  align-items: center;
}
.goal-progress-copy h3 .icon { color: var(--goal-accent); flex: 0 0 auto; }
.goal-progress-copy p { margin: 0; color: #71717a; font-size: 0.78rem; }
.goal-progress-values { text-align: right; }
.goal-progress-amount {
  color: #fff;
  font-size: clamp(1.55rem, 3vw, 1.85rem);
  font-weight: 900;
  line-height: 1;
  font-family: Orbitron, sans-serif;
}
.goal-progress-amount span {
  color: #71717a;
  font-size: 0.85rem;
  font-weight: 500;
  margin-left: 0.25rem;
  font-family: Rajdhani, sans-serif;
}
.goal-progress-pct {
  margin-top: 0.4rem;
  color: var(--goal-accent);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.goal-progress-stage { position: relative; }
.goal-progress-stage.has-labels { padding: 3.4rem 0 3.6rem; }
.goal-progress-track {
  position: relative;
  height: 0.85rem;
  margin: 1.85rem 0 1.35rem;
  border-radius: 999px;
  background: #18181b;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.55);
  overflow: visible;
}
.goal-wrap.theme-roadmap .goal-progress-track {
  height: 1.15rem;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--goal-accent) 45%, transparent);
  background: rgba(0,0,0,.45);
}
.goal-wrap.theme-minimal .goal-progress-track {
  height: 0.35rem;
  background: rgba(255,255,255,.08);
  box-shadow: none;
}
.goal-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--goal-pct, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--goal-fill-a), var(--goal-fill-b), var(--goal-fill-c));
  overflow: hidden;
  z-index: 1;
  box-shadow: 0 0 10px color-mix(in srgb, var(--goal-accent) 55%, transparent), 0 0 22px color-mix(in srgb, var(--goal-accent-2) 28%, transparent);
  transition: width 1.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.goal-progress.will-animate:not(.is-animated) .goal-progress-fill,
.goal-progress.will-animate:not(.is-animated) .goal-progress-glow,
.goal-progress.will-animate:not(.is-animated) .goal-progress-knob {
  width: 0 !important;
  left: 0 !important;
  transition: none;
}
.goal-progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-20deg) translateX(-140%);
  animation: goal-shimmer 2.2s linear infinite;
}
.goal-progress-glow {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--goal-pct, 0%);
  height: 1.8rem;
  transform: translateY(-50%);
  border-radius: 999px;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--goal-accent) 45%, transparent), transparent 75%);
  filter: blur(8px);
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
  transition: width 1.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.goal-progress-knob {
  position: absolute;
  top: 50%;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 999px;
  background: #fff;
  border: 2px solid color-mix(in srgb, var(--goal-accent) 70%, #fff);
  transform: translate(-50%, -50%);
  z-index: 4;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--goal-accent) 25%, transparent), 0 0 18px color-mix(in srgb, var(--goal-accent) 55%, transparent);
  transition: left 1.65s cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 0;
}
.goal-wrap.theme-roadmap .goal-progress-knob { opacity: 1; }

.goal-milestone-mark {
  position: absolute;
  top: 50%;
  --milestone-opacity: 0.72;
  --milestone-scale: 0.86;
  transform: translate(-50%, -50%) scale(var(--milestone-scale));
  z-index: 3;
  /* Keep mark fully opaque so tooltip content stays readable. */
  opacity: 1;
  transition: transform .35s ease;
}
.goal-progress.is-animated .goal-milestone-mark {
  animation: goal-milestone-in .55s ease both;
  animation-delay: var(--milestone-delay, 0.4s);
}
.goal-milestone-dot {
  position: relative;
  z-index: 1;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 2px solid #52525b;
  background: #27272a;
  color: #a1a1aa;
  display: grid;
  place-items: center;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);
  opacity: var(--milestone-opacity);
  transition: transform .25s ease, border-color .25s, background .25s, color .25s, box-shadow .25s, opacity .35s ease;
}
.goal-wrap.theme-roadmap .goal-milestone-dot {
  width: 0.85rem;
  height: 0.85rem;
  border-width: 2px;
  background: transparent;
  color: transparent;
}
.goal-wrap.theme-roadmap .goal-milestone-dot .icon { display: none; }
.goal-wrap.theme-roadmap .goal-milestone-mark.reached .goal-milestone-dot {
  background: #f4f4f5;
  border-color: #fff;
  box-shadow: none;
  animation: none;
}
.goal-wrap.theme-roadmap .goal-milestone-mark.pending .goal-milestone-dot {
  border-color: #71717a;
  background: #27272a;
  filter: none;
}
.goal-milestone-ring {
  position: absolute;
  inset: -0.35rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--goal-accent) 35%, transparent);
  opacity: 0;
  pointer-events: none;
}
.goal-milestone-mark.pending .goal-milestone-dot { filter: grayscale(1); }
.goal-milestone-mark.reached {
  --milestone-opacity: 1;
  --milestone-scale: 1;
  filter: none;
}
.goal-milestone-mark.reached .goal-milestone-dot { filter: none; }
.goal-milestone-mark.reached .goal-milestone-dot {
  border-color: #fecaca;
  background: var(--goal-fill-b);
  color: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--goal-accent) 25%, transparent), 0 0 18px color-mix(in srgb, var(--goal-accent) 75%, transparent);
  animation: goal-pulse 2.2s ease-in-out infinite;
}
.goal-milestone-mark.reached .goal-milestone-ring {
  opacity: 1;
  animation: goal-ring 2.2s ease-out infinite;
}
.goal-milestone-mark:hover .goal-milestone-dot,
.goal-milestone-mark:focus-within .goal-milestone-dot { transform: scale(1.12); }
.goal-milestone-tip {
  position: absolute;
  bottom: calc(100% + 1rem);
  left: 50%;
  /* Do NOT use opacity for show/hide — it composites the tip against ROADMAP. */
  visibility: hidden;
  transform: translateX(-50%) translateY(0.45rem) scale(0.97);
  width: max-content;
  min-width: 11.5rem;
  max-width: 16.5rem;
  padding: 0;
  border-radius: 0.8rem;
  color: #fff;
  text-align: center;
  pointer-events: none;
  transition: transform .22s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear .22s;
  z-index: 50;
  filter: none !important;
  opacity: 1 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible;
}
.goal-tip-plate {
  position: absolute;
  inset: 0;
  border-radius: 0.8rem;
  background: #09090b;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 0 0 1px #000,
    0 18px 42px rgba(0, 0, 0, 0.92);
  pointer-events: none;
  z-index: 0;
}
.goal-tip-plate::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 0.6rem;
  height: 0.6rem;
  margin-top: -0.3rem;
  background: #09090b;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  transform: translateX(-50%) rotate(45deg);
}
.goal-tip-body {
  position: relative;
  z-index: 1;
  display: block;
  padding: 0.85rem 0.9rem 0.9rem;
  border-radius: 0.8rem;
  background: #09090b;
}
.goal-tip-status {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.25rem;
  margin-bottom: 0.4rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.goal-tip-status.is-reached {
  color: #fecaca;
  background: #3f1515;
  border: 1px solid #f87171;
}
.goal-tip-status.is-pending {
  color: #fafafa;
  background: #27272a;
  border: 1px solid #52525b;
}
.goal-milestone-tip strong {
  display: block;
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 0.2rem;
}
.goal-tip-desc {
  display: block;
  margin: 0 0 0.55rem;
  color: #d4d4d8;
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.45;
  text-align: left;
}
.goal-tip-amount {
  display: block;
  margin: 0 0 0.5rem;
  color: #ffffff;
  font-style: normal;
  font-family: Orbitron, sans-serif;
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.goal-tip-meter {
  display: block;
  height: 0.34rem;
  margin: 0 auto 0.5rem;
  border-radius: 999px;
  background: #27272a;
  overflow: hidden;
}
.goal-tip-meter-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #f87171, var(--goal-accent, #ef4444));
  transition: width .55s cubic-bezier(0.22, 1, 0.36, 1) .08s;
}
.goal-tip-meta {
  display: block;
  color: #e4e4e7;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.4;
}
.goal-milestone-mark:hover .goal-milestone-tip,
.goal-milestone-mark:focus-within .goal-milestone-tip {
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
  transition: transform .22s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}
.goal-milestone-mark:hover .goal-tip-meter-fill,
.goal-milestone-mark:focus-within .goal-tip-meter-fill {
  width: var(--tip-pct, 0%);
}
.goal-patrons {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.55rem;
  width: 100%;
  margin-top: 1.35rem;
  padding: 0.85rem clamp(1rem, 4vw, 2.5rem);
}
.goal-patrons-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem 1.25rem;
  align-items: center;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.55rem 0;
}
.goal-patrons-label {
  flex-shrink: 0;
}
.goal-patrons-label span {
  display: inline-block;
  color: #fff;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.goal-patrons-rail {
  position: relative;
  min-width: 0;
  overflow: hidden;
}
.goal-patrons-rail.is-marquee {
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.goal-patrons-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 0;
  will-change: transform;
}
.goal-patrons-rail.is-centered .goal-patrons-track {
  width: 100%;
  justify-content: center;
  transform: none !important;
  animation: none !important;
}
.goal-patrons-rail.is-start .goal-patrons-track {
  width: 100%;
  justify-content: flex-start;
  transform: none !important;
  animation: none !important;
}
.goal-patrons-rail.is-start .goal-patrons-list {
  justify-content: flex-start;
  padding-left: 0;
}
.goal-patrons.is-embedded .goal-patrons-rail.is-start .goal-patrons-list,
.goal-patrons.is-embedded .goal-patrons-rail.is-marquee .goal-patrons-list {
  justify-content: flex-start;
}
.goal-patrons-rail.is-marquee .goal-patrons-track {
  animation: goal-patrons-marquee var(--patron-duration, 42s) linear infinite;
}
.goal-patrons-strip[data-patron-row="top"] .goal-patrons-rail.is-marquee .goal-patrons-track {
  animation-direction: reverse;
  animation-duration: var(--patron-duration, 52s);
}
.goal-patrons:hover .goal-patrons-rail.is-marquee .goal-patrons-track,
.goal-patrons:focus-within .goal-patrons-rail.is-marquee .goal-patrons-track {
  animation-play-state: paused;
}
.goal-patrons-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  margin: 0;
  padding: 0.2rem 0.75rem;
  list-style: none;
}
.goal-patrons-rail.is-marquee .goal-patrons-list {
  justify-content: flex-start;
  padding-right: clamp(1.25rem, 3vw, 2.25rem);
}
.goal-patron-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: max-content;
  padding: 0.15rem 0;
  transition: transform .25s ease, filter .25s ease;
}
.goal-patron-chip:hover {
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.08);
}
.goal-patron-chip img,
.goal-patron-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.45rem;
  flex-shrink: 0;
  object-fit: contain;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.goal-patron-avatar {
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, hsl(var(--patron-hue, 0) 78% 52%), hsl(calc(var(--patron-hue, 0) + 28) 70% 38%));
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  object-fit: unset;
}
.goal-patrons.is-embedded {
  margin-top: 1.15rem;
  padding: 0.85rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.goal-patrons.is-embedded .goal-patrons-strip {
  min-height: 2.85rem;
  padding: 0.35rem 0;
}
.goal-patrons.is-embedded .goal-patrons-label span {
  font-size: 0.86rem;
}
.goal-patron-meta {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
  text-align: left;
}
.goal-patron-meta strong {
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}
.goal-patron-tier {
  display: block;
  margin: 0;
  color: color-mix(in srgb, var(--goal-accent) 85%, #fff);
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.goal-patron-meta small {
  color: #a1a1aa;
  font-size: 0.72rem;
  white-space: nowrap;
}
.goal-avatar-pool-hint {
  margin: 0.65rem 0 0;
  color: #a1a1aa;
  font-size: 0.82rem;
}
.goal-avatar-pool-hint a { color: #f87171; }
.goal-avatar-drop {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 1.4rem 1rem;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 0.75rem;
  background: rgba(0,0,0,.28);
  cursor: pointer;
  text-align: center;
}
.goal-avatar-drop input { display: none; }
.goal-avatar-drop strong { color: #f4f4f5; font-size: 0.9rem; }
.goal-avatar-drop small { color: #71717a; font-size: 0.75rem; }
.goal-avatar-drop.is-ready { border-color: rgba(248,113,113,.45); background: rgba(220,38,38,.08); }
.goal-avatar-pool-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.85rem;
}
.goal-avatar-pool-actions span { color: #a1a1aa; font-size: 0.8rem; }
.goal-avatar-pool-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.85rem;
}
.goal-avatar-pool-grid img {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: cover;
  border-radius: 0.55rem;
  border: 1px solid rgba(255,255,255,.1);
  background: #18181b;
}
.carousel-patrons-admin { display: grid; gap: 1.1rem; }
.carousel-patrons-head-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.carousel-patron-create,
.carousel-patron-edit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem;
  align-items: end;
}
.carousel-patron-edit-grid {
  grid-template-columns: minmax(7rem, 1.1fr) minmax(8rem, 1.4fr) 7.5rem minmax(6.5rem, 1fr) 7.5rem auto auto;
  gap: 0.4rem 0.55rem;
  align-items: end;
}
.carousel-patron-create label,
.carousel-patron-edit-grid label {
  display: grid;
  gap: 0.2rem;
  margin: 0;
  font-size: 0.68rem;
  color: #a1a1aa;
}
.carousel-patron-edit-grid input,
.carousel-patron-edit-grid select {
  min-height: 2rem;
  padding: 0.25rem 0.45rem;
  font-size: 0.82rem;
}
.carousel-patron-edit { display: grid; gap: 0.25rem; }
.carousel-patron-edit-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.55rem;
  align-items: center;
  color: #71717a;
  font-size: 0.68rem;
  line-height: 1.2;
}
.carousel-patron-edit-meta code { color: #a1a1aa; font-size: 0.65rem; }
.carousel-patron-thumb {
  width: 2rem;
  height: 2rem;
  border-radius: 0.35rem;
  object-fit: contain;
  display: grid;
  place-items: center;
  background: #18181b;
  color: #fff;
  font-weight: 800;
  font-size: 0.75rem;
}
.carousel-patron-thumb.fallback {
  object-fit: unset;
  background: #27272a;
}
.carousel-patrons-table { margin-top: 0.5rem; }
.carousel-patrons-table table { border-collapse: separate; border-spacing: 0; }
.carousel-patrons-table td {
  padding: 0.4rem 0.55rem;
  vertical-align: middle;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.carousel-patron-avatar-cell {
  width: 2.5rem;
  padding-right: 0 !important;
}
.carousel-patron-visible { min-width: 3.5rem; }
.carousel-patron-row-actions {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  padding-bottom: 0.05rem;
}
.carousel-patron-row-actions .btn { min-height: 2rem; padding: 0.2rem 0.55rem; }
.carousel-patrons-table tr.is-hidden-row { opacity: 0.55; }
.carousel-patrons-filters { margin-bottom: 0.75rem; }
.carousel-patrons-pager {
  margin-top: 0.85rem;
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 1100px) {
  .carousel-patron-edit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .carousel-patron-row-actions { grid-column: 1 / -1; }
}
.goal-placement-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.carousel-display-actions {
  margin-top: 1rem;
  display: flex;
  justify-content: flex-end;
}
.carousel-display-limits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1rem;
}
.carousel-display-limits label {
  display: grid;
  gap: 0.35rem;
  color: #a1a1aa;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.carousel-display-limits input {
  width: 100%;
}
.carousel-display-limits small,
.carousel-tier-filter .muted {
  text-transform: none;
  letter-spacing: 0;
  color: #71717a;
  font-size: 0.78rem;
}
.carousel-tier-filter {
  margin-top: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.75rem;
  padding: 0.85rem 1rem 1rem;
}
.carousel-tier-filter legend {
  padding: 0 0.35rem;
  color: #fff;
  font-weight: 700;
}
.carousel-tier-grid {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.65rem;
}
@media (max-width: 900px) {
  .carousel-display-limits { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .goal-placement-grid { grid-template-columns: 1fr; }
}
@keyframes goal-patrons-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (max-width: 720px) {
  .goal-patrons {
    padding-inline: 1rem;
    gap: 0.25rem;
  }
  .goal-patrons-strip {
    grid-template-columns: 1fr;
    gap: 0.35rem;
    min-height: 0;
    padding: 0.45rem 0;
  }
  .goal-patrons-label span { font-size: 0.8rem; }
  .goal-progress-stage,
  .goal-card,
  .goal-main {
    overflow-x: clip;
    max-width: 100%;
  }
  /* Tap-to-open bottom sheet ? avoids absolute tips widening the page. */
  .goal-milestone-mark {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .goal-milestone-mark:hover .goal-milestone-tip,
  .goal-milestone-mark:focus-within .goal-milestone-tip {
    visibility: hidden;
    transform: none;
  }
  .goal-milestone-tip {
    position: fixed;
    left: max(0.75rem, env(safe-area-inset-left, 0px));
    right: max(0.75rem, env(safe-area-inset-right, 0px));
    bottom: max(0.85rem, env(safe-area-inset-bottom, 0px));
    top: auto;
    width: auto;
    min-width: 0;
    max-width: none;
    transform: translateY(0.6rem);
    visibility: hidden;
    z-index: 240;
    pointer-events: none;
    transition: transform .2s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear .2s;
  }
  .goal-tip-plate::after {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: -0.3rem;
    border-right: 0;
    border-bottom: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }
  .goal-milestone-mark.is-tip-open .goal-milestone-tip {
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: transform .2s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
  }
  .goal-milestone-mark.is-tip-open .goal-tip-meter-fill {
    width: var(--tip-pct, 0%);
  }
  .goal-milestone-mark.is-tip-open .goal-milestone-dot {
    transform: scale(1.12);
  }
}
@media (prefers-reduced-motion: reduce) {
  .goal-patrons-track { animation: none !important; }
  .goal-milestone-tip { transition: none !important; filter: none !important; }
}

.goal-label-rail { position: absolute; left: 0; right: 0; height: 0; pointer-events: none; }
.goal-label-rail.above { top: 0.2rem; }
.goal-label-rail.below { bottom: 0.2rem; }
.goal-ext-label {
  position: absolute;
  transform: translateX(-50%);
  width: max-content;
  max-width: 8.5rem;
  text-align: center;
  color: #d4d4d8;
  pointer-events: auto;
}
.goal-label-rail.above .goal-ext-label { bottom: 0; }
.goal-label-rail.below .goal-ext-label { top: 0; }
.goal-ext-icon {
  width: 1.7rem;
  height: 1.7rem;
  margin: 0 auto 0.3rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.12);
  color: #a1a1aa;
}
.goal-ext-label.reached .goal-ext-icon {
  color: var(--goal-accent);
  border-color: color-mix(in srgb, var(--goal-accent) 50%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--goal-accent) 35%, transparent);
}
.goal-ext-label strong { display: block; font-size: 0.72rem; color: #fff; line-height: 1.2; }
.goal-ext-label small { display: block; margin-top: 0.15rem; color: #71717a; font-size: 0.65rem; }
.goal-label-rail.above .goal-ext-label::after,
.goal-label-rail.below .goal-ext-label::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 1px;
  height: 1.35rem;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,.28));
}
.goal-label-rail.above .goal-ext-label::after { top: 100%; transform: translateX(-50%) rotate(18deg); transform-origin: top; }
.goal-label-rail.below .goal-ext-label::before { bottom: 100%; transform: translateX(-50%) rotate(-18deg); transform-origin: bottom; background: linear-gradient(to top, transparent, rgba(255,255,255,.28)); }

.goal-progress-cta { display: flex; justify-content: center; margin-top: 0.2rem; }
.goal-progress-cta a { color: #a1a1aa; font-size: 0.82rem; transition: color .2s; }
.goal-progress-cta a:hover { color: #fff; }

@keyframes goal-shimmer {
  0% { transform: skewX(-20deg) translateX(-140%); }
  100% { transform: skewX(-20deg) translateX(260%); }
}
@keyframes goal-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--goal-accent) 25%, transparent), 0 0 16px color-mix(in srgb, var(--goal-accent) 65%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--goal-accent) 18%, transparent), 0 0 26px color-mix(in srgb, var(--goal-accent) 90%, transparent); }
}
@keyframes goal-ring {
  0% { transform: scale(0.85); opacity: 0.7; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes goal-milestone-in {
  from { transform: translate(-50%, -50%) scale(0.55); }
  to { transform: translate(-50%, -50%) scale(var(--milestone-scale, 1)); }
}
@media (prefers-reduced-motion: reduce) {
  .goal-main, .goal-card, .goal-support, .goal-progress-fill, .goal-progress-glow, .goal-progress-knob, .goal-milestone-mark, .goal-milestone-mark.reached .goal-milestone-dot, .goal-milestone-ring, .goal-progress-fill::after, .goal-patrons-track, .goal-tip-glow {
    animation: none !important;
    transition: none !important;
  }
  .goal-main, .goal-card, .goal-support { opacity: 1; transform: none; }
  .goal-progress.will-animate:not(.is-animated) .goal-progress-fill,
  .goal-progress.will-animate:not(.is-animated) .goal-progress-glow { width: var(--goal-pct, 0%) !important; }
  .goal-progress.will-animate:not(.is-animated) .goal-progress-knob { left: var(--goal-pct, 0%) !important; }
}

.goal-admin { display: grid; gap: 1.1rem; width: 100%; max-width: none; }
.goal-admin-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.goal-admin-head h1 { margin: 0; font-size: 1.9rem; letter-spacing: 0.04em; }
.goal-admin-head p { margin: 0.35rem 0 0; color: #71717a; }
.goal-funding-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.85rem;
  margin-top: 0.85rem;
  padding: 0.9rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 0.75rem;
  background: rgba(0,0,0,.28);
}
.goal-funding-live,
.goal-funding-result {
  display: grid;
  gap: 0.2rem;
  align-content: start;
}
.goal-funding-live span,
.goal-funding-result span {
  color: #a1a1aa;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.goal-funding-live strong,
.goal-funding-result strong {
  color: #fff;
  font-family: Orbitron, sans-serif;
  font-size: 1.2rem;
}
.goal-funding-live small,
.goal-funding-result small,
.goal-funding-offset small {
  color: #71717a;
  font-size: 0.72rem;
}
.goal-funding-offset,
.goal-funding-manual { display: grid; gap: 0.35rem; margin: 0; }
.connection-privacy {
  margin: 0.85rem 0 1rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 0.65rem;
  background: rgba(0,0,0,.28);
}
.profile-connections > .muted { color: #a1a1aa; }
.connection-privacy .settings-toggle small { color: #c4c4cc; }
.connection-privacy .settings-toggle strong { color: #f4f4f5; }
.goal-admin .tone-store .settings-icon,
.goal-admin .tone-feature .settings-icon,
.goal-admin .tone-analytics .settings-icon,
.goal-admin .tone-warn .settings-icon { background: rgba(239,68,68,.14); color: #f87171; }
.goal-admin .tone-store h2,
.goal-admin .tone-feature h2,
.goal-admin .tone-analytics h2,
.goal-admin .tone-warn h2 { color: #fff; }
.goal-grid { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.goal-admin label { display: grid; gap: 0.35rem; color: #d4d4d8; font-size: 0.85rem; }
.goal-admin input,
.goal-admin select,
.goal-admin textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 0.55rem;
  background: rgba(0,0,0,.35);
  color: #fff;
  padding: 0.65rem 0.75rem;
}
.goal-theme-grid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); }
.goal-theme-card {
  display: grid;
  gap: 0.45rem;
  padding: 0.85rem;
  border-radius: 0.8rem;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.28);
  cursor: pointer;
}
.goal-theme-card:has(input:checked) {
  border-color: rgba(239,68,68,.55);
  box-shadow: 0 0 0 1px rgba(239,68,68,.25);
}
.goal-theme-card input { position: absolute; opacity: 0; pointer-events: none; }
.goal-theme-preview {
  height: 2.4rem;
  border-radius: 0.5rem;
  background: #18181b;
  border: 1px solid rgba(255,255,255,.08);
  display: grid;
  align-items: center;
  padding: 0 0.55rem;
}
.goal-theme-preview span {
  display: block;
  height: 0.45rem;
  width: 68%;
  border-radius: 999px;
  background: linear-gradient(90deg, #dc2626, #f97316);
}
.theme-swatch-neon .goal-theme-preview span { background: linear-gradient(90deg, #22d3ee, #e879f9); width: 74%; }
.theme-swatch-ember .goal-theme-preview span { background: linear-gradient(90deg, #f59e0b, #fb7185); width: 62%; }
.theme-swatch-roadmap .goal-theme-preview span { background: linear-gradient(90deg, #7e22ce, #a855f7); width: 82%; }
.theme-swatch-minimal .goal-theme-preview span { background: linear-gradient(90deg, #ef4444, #fda4af); width: 45%; height: 0.22rem; }
.goal-theme-card strong { color: #fff; font-size: 0.9rem; }
.goal-theme-card small { color: #71717a; font-size: 0.75rem; line-height: 1.35; }
.goal-feature-grid { display: grid; gap: 0.55rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.goal-feature-toggle {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.75rem 0.85rem;
  border-radius: 0.7rem;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
  cursor: pointer;
}
.goal-feature-toggle input[type="checkbox"] { margin-top: 0.2rem; }
.goal-feature-toggle strong { display: block; color: #f4f4f5; font-size: 0.88rem; }
.goal-feature-toggle small { display: block; margin-top: 0.2rem; color: #71717a; font-size: 0.75rem; line-height: 1.35; }
.goal-milestones-head { justify-content: space-between; align-items: flex-start; gap: 1rem; }
.goal-milestones-title { display: flex; gap: 0.85rem; align-items: flex-start; }
.goal-milestone-list, .goal-benefit-list, .goal-external-list { display: grid; gap: 0.75rem; }
.goal-external-patron {
  display: grid;
  grid-template-columns: minmax(8rem, 1.1fr) minmax(10rem, 1.4fr) minmax(8rem, 0.9fr) minmax(8rem, 1fr) minmax(7rem, 0.9fr) auto;
  gap: 0.65rem;
  align-items: end;
  padding: 0.75rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 0.65rem;
  background: rgba(0,0,0,.22);
}
.goal-external-patron label { display: grid; gap: 0.3rem; margin: 0; font-size: 0.75rem; color: #a1a1aa; }
.goal-external-patron input,
.goal-external-patron select {
  width: 100%;
  min-height: 2.25rem;
  margin: 0;
}
.goal-milestone {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 6.5rem 1fr 9rem 7rem auto;
  align-items: end;
  padding: 0.9rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.28);
}
.goal-milestone .goal-milestone-desc {
  grid-column: 1 / -1;
  align-self: stretch;
}
.goal-milestone .goal-milestone-desc textarea {
  width: 100%;
  min-height: 4.5rem;
  resize: vertical;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: .5rem;
  padding: .65rem .75rem;
  color: #fff;
  font: inherit;
  line-height: 1.45;
}
.goal-benefit {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 10rem 1fr auto;
  align-items: end;
  padding: 0.9rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.28);
}
.goal-milestone-empty {
  margin: 0;
  padding: 2rem 1rem;
  text-align: center;
  color: #71717a;
  border: 1px dashed rgba(255,255,255,.12);
  border-radius: 0.75rem;
}
@media (max-width: 980px) {
  .goal-panel.has-support { grid-template-columns: 1fr; }
  .goal-bullets { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .goal-milestone, .goal-benefit, .goal-external-patron { grid-template-columns: 1fr; }
  .goal-actions { flex-direction: column; align-items: stretch; }
  .goal-progress-values { text-align: left; width: 100%; }
  .goal-support-actions { grid-template-columns: 1fr; }
  .goal-progress-stage.has-labels { padding: 2.8rem 0 3rem; }
  .goal-ext-label { max-width: 6.5rem; }
  .goal-milestone-dot { width: 1.7rem; height: 1.7rem; }
}

.bar { height: 8px; background: #27272a; border-radius: 999px; overflow: hidden; }
.bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--red), #f97316); }
.feedback-empty {
  text-align: center; color: #6b7280; padding: 48px;
  background: rgba(24, 24, 27, 0.2);
  border: 1px dashed rgba(255, 255, 255, 0.05);
  border-radius: 12px;
}
.feedback-section { background: #080808; border-top: 1px solid rgba(255,255,255,.05); }
.feedback-title { margin: 0 0 4rem; letter-spacing: .04em; }
.feedback-grid {
  display: grid; gap: 1rem; grid-template-columns: 1fr; text-align: left;
  width: min(100%, 72rem); margin: 0 auto;
}
@media (min-width: 768px) { .feedback-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.t-card {
  padding: 1rem; height: 100%; min-height: 14rem;
  background: rgba(24, 24, 27, 0.4); border: 1px solid rgba(255,255,255,.05);
  border-radius: 8px; display: flex; flex-direction: column; gap: .35rem;
  transition: background .15s;
}
.t-card:hover { background: rgba(24, 24, 27, 0.6); }
.stars { display: flex; gap: 2px; color: #ef4444; margin: 0 0 .35rem; }
.t-card-title {
  margin: 0; color: #fff; font-size: .8rem; font-style: italic; font-weight: 600; line-height: 1.35;
}
.t-card-preview {
  margin: 0; color: #d1d5db; font-size: .75rem; line-height: 1.55; flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.t-card-more {
  appearance: none; background: none; border: 0; padding: .35rem 0; margin: 0;
  color: #f87171; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; cursor: pointer; text-align: left; width: fit-content;
}
.t-card-more:hover { color: #fca5a5; }
.who { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.who-avatar {
  width: 32px; height: 32px; border-radius: 999px; overflow: hidden; flex: none;
  display: grid; place-items: center; background: #27272a; border: 1px solid rgba(255, 255, 255, 0.1);
  color: #a1a1aa; font-size: 10px; font-weight: 700;
}
.who-avatar img { width: 100%; height: 100%; object-fit: cover; }
.who strong { display: block; font-size: 12px; color: #fff; }
.who em { color: var(--red-hot); font-size: 9px; font-style: normal; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }

.review-dialog {
  width: min(32rem, calc(100% - 2rem));
  max-width: calc(100% - 2rem);
  padding: 1.75rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: .75rem;
  background: #0a0a0a;
  color: #fff;
}
.review-dialog::backdrop { background: rgba(0,0,0,.78); }
.review-close {
  position: absolute; top: .85rem; right: .85rem;
  width: 2rem; height: 2rem; color: #a1a1aa;
  background: transparent; border: 1px solid rgba(255,255,255,.08);
}
.review-close:hover { color: #fff; background: rgba(255,255,255,.05); }
.review-head { display: flex; align-items: center; gap: .85rem; margin: 0 2rem .85rem 0; }
.review-head .who-avatar { width: 2.5rem; height: 2.5rem; font-size: .85rem; }
.review-head strong { font-size: 1.05rem; color: #fff; }
.review-title { margin: 0 0 .65rem; font-size: 1rem; font-weight: 700; color: #fff; }
.review-body { color: #a1a1aa; font-size: .9rem; line-height: 1.65; max-height: 55vh; overflow: auto; }
.review-body p { margin: 0 0 .6rem; }
.review-stars { margin: 1rem 0 0; }

.site-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(16px);
  padding-top: 64px;
  margin-top: auto;
  width: 100%;
  flex-shrink: 0;
}
.footer-grid { display: grid; gap: 3rem; margin-bottom: 3rem; }
.footer-brand { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.footer-brand img { height: 48px; width: auto; }
.footer-brand span { font-size: 24px; font-weight: 700; letter-spacing: 0.05em; }
.footer-brand span b { color: var(--red-hot); font-weight: 700; }
.footer-logo-preview { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; min-height: 64px; }
.footer-logo-preview img { max-height: 64px; width: auto; border-radius: 8px; background: rgba(0,0,0,.35); padding: 0.35rem; }
.footer-logo-preview .ph { color: #71717a; font-size: 0.9rem; }
.footer-link-rows { display: grid; gap: 0.75rem; margin: 0.75rem 0; }
.footer-link-row { display: grid; grid-template-columns: auto 1fr 1.2fr; gap: 0.65rem; align-items: end; padding: 0.75rem; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(0,0,0,.18); }
.footer-link-toggle { margin: 0 0 0.35rem; }
.footer-page-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(7rem, 0.7fr) minmax(4.5rem, 0.45fr) auto; gap: 0.65rem; align-items: end; padding: 0.75rem 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.footer-page-row:last-child { border-bottom: 0; }
.footer-page-meta { min-width: 0; }
.footer-page-meta strong { display: block; font-size: 0.95rem; }
.footer-page-meta span { display: block; color: #71717a; font-size: 0.78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
  .footer-link-row, .footer-page-row { grid-template-columns: 1fr; }
}
.site-footer h3 { font-family: Rajdhani, sans-serif; letter-spacing: 0; font-size: 18px; margin-bottom: 24px; }
.site-footer li { list-style: none; }
.site-footer ul { margin: 0; padding: 0; display: grid; gap: 12px; color: var(--muted); }
.site-footer a:hover { color: var(--red-hot); }
.footer-note { color: var(--muted); font-size: 14px; line-height: 1.6; }
.checkout-options-page,
.checkout-complete-page { padding: 2rem 0 4rem; max-width: 52rem; }
.checkout-options-card,
.checkout-complete-card {
  margin-top: 1rem; padding: 1.5rem 1.4rem; border-radius: 1rem;
  border: 1px solid rgba(255,255,255,.1); background: rgba(24,24,27,.55);
  display: grid; gap: 1rem;
}
.checkout-options-grid { display: grid; gap: 1rem; align-items: stretch; }
@media (min-width: 840px) { .checkout-options-grid { grid-template-columns: 1.35fr .9fr; } }
.checkout-option {
  display: grid; gap: .75rem; padding: 1.15rem 1.15rem 1.25rem; border-radius: .95rem;
  border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.22);
}
.checkout-option h2 { margin: 0; color: #fff; font-size: 1.05rem; line-height: 1.25; }
.checkout-option-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.checkout-account-opt { margin-top: .25rem; }
.checkout-options-card > .checkout-lead {
  margin: 0;
  max-width: 38rem;
  font-size: 1rem;
  line-height: 1.55;
  color: #e4e4e7;
}
.checkout-option.is-auth {
  align-content: start;
  gap: .7rem;
  background:
    linear-gradient(165deg, rgba(220, 38, 38, .14) 0%, transparent 46%),
    rgba(0, 0, 0, .28);
  border-color: rgba(255, 255, 255, .14);
}
.checkout-auth-kicker {
  margin: 0;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fca5a5;
}
.checkout-auth-copy {
  margin: 0;
  font-size: .95rem;
  line-height: 1.55;
  color: #e4e4e7;
}
.checkout-auth-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .55rem;
  margin-top: .25rem;
}
.checkout-auth-signin,
.checkout-auth-join {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  width: 100%;
  padding: .7rem 1rem;
  border-radius: .7rem;
  font-family: Rajdhani, sans-serif;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, color .15s ease;
}
.checkout-auth-signin {
  border: 0;
  background: var(--red);
  color: #fff;
  box-shadow: 0 0 18px rgba(220, 38, 38, .35);
}
.checkout-auth-signin:hover {
  background: #b91c1c;
  color: #fff;
  box-shadow: 0 0 26px rgba(220, 38, 38, .5);
  transform: translateY(-1px);
}
.checkout-auth-join {
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .04);
  color: #f4f4f5;
}
.checkout-auth-join:hover {
  border-color: rgba(252, 165, 165, .45);
  background: rgba(220, 38, 38, .12);
  color: #fff;
  transform: translateY(-1px);
}
.checkout-ref { font-family: ui-monospace, monospace; color: #a1a1aa; }
.checkout-complete-actions { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; }
.checkout-complete-product {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin: 1.25rem 0 1.5rem;
  padding: 1rem;
  border-radius: .85rem;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.2);
}
.checkout-complete-product img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: .65rem;
  background: rgba(255,255,255,.04);
}
.checkout-complete-product strong { display: block; color: #fff; font-size: 1.05rem; }
.checkout-ref { margin: .35rem 0 0; font-family: ui-monospace, monospace; font-size: .85rem; color: #d4d4d8; }
.checkout-complete-page .muted,
.checkout-complete-page .checkout-complete-product .muted,
.checkout-complete-page .checkout-setup-panel .muted {
  opacity: 1;
  font-style: normal;
  color: #d4d4d8;
  line-height: 1.55;
}
.checkout-complete-page .checkout-complete-actions > .muted,
.checkout-complete-page .checkout-setup-panel > .muted {
  color: #e4e4e7;
}
.checkout-setup-panel {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.checkout-setup-panel h2 { margin: 0 0 .5rem; color: #fff; font-size: 1.15rem; }
.checkout-setup-form { display: grid; gap: .85rem; margin-top: 1rem; max-width: 26rem; }
.checkout-setup-form label { display: grid; gap: .35rem; color: #e4e4e7; font-size: .9rem; }
.checkout-setup-form input {
  width: 100%;
  border-radius: .65rem;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color: #fff;
  padding: .7rem .85rem;
}
.checkout-setup-form input[readonly] { opacity: .75; }
.checkout-setup-alt { margin-top: 1rem; font-size: .85rem; }
.checkout-activate-card .checkout-ref { margin: .75rem 0 1.25rem; }
.checkout-spinner {
  width: 2rem; height: 2rem; border-radius: 999px;
  border: 2px solid rgba(255,255,255,.15); border-top-color: #ef4444;
  animation: checkout-spin .8s linear infinite;
}
@keyframes checkout-spin { to { transform: rotate(360deg); } }
.kicker.is-ok { color: #86efac; }
.kicker.is-bad { color: #fca5a5; }
.checkout-mode-grid { display: grid; gap: .85rem; }
@media (min-width: 840px) { .checkout-mode-grid { grid-template-columns: 1fr 1fr; } }
.checkout-mode-card {
  display: grid; gap: .35rem; padding: 1rem; border-radius: .85rem; cursor: pointer;
  border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.22); color: #d4d4d8;
}
.checkout-mode-card input { margin: 0 0 .35rem; }
.checkout-mode-card strong { color: #fff; font-size: .98rem; }
.checkout-mode-card small { color: #a1a1aa; font-size: .78rem; }
.checkout-mode-card p { margin: .35rem 0 0; color: #a1a1aa; font-size: .84rem; line-height: 1.45; }
.checkout-mode-card.is-on,
.checkout-mode-card:has(input:checked) {
  border-color: rgba(239,68,68,.55); background: rgba(239,68,68,.1);
}
.checkout-mode-badge {
  justify-self: start; padding: .15rem .5rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.06);
  color: #d4d4d8; font-size: .68rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.checkout-mode-badge.is-integrated {
  border-color: rgba(34,197,94,.4); background: rgba(22,163,74,.15); color: #86efac;
}

.news-row { position: relative; }
.news-row input { padding-right: 3rem; }
.news-row button {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 6px; background: var(--red); color: #fff; cursor: pointer;
  line-height: 0;
}
.news-row button svg { display: block; }
.footer-bottom { background: #000; border-top: 1px solid rgba(255, 255, 255, 0.05); padding: 24px 0; }
.footer-bottom .container { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.footer-bottom p { margin: 0; color: #d4d4d8; font-size: 12px; }
.socials { display: flex; gap: 1rem; }
.socials a { color: #fff; opacity: 0.8; font-size: 14px; text-transform: none; letter-spacing: 0; }
.socials a:hover { color: var(--red-hot); opacity: 1; }

.pills { display: flex; gap: 0.5rem; overflow-x: auto; padding-bottom: 1rem; margin-bottom: 3rem; }
.pill {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 12px 24px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(24, 24, 27, 0.5); color: var(--zinc); font-size: 14px; font-weight: 500; white-space: nowrap;
}
.pill:hover { color: #fff; background: #27272a; }
.pill.is-on { border-color: var(--red); color: #fff; background: var(--red); box-shadow: 0 0 20px rgba(220, 38, 38, 0.4); }
.store-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35em 0.45em;
  font-size: clamp(1.4rem, 3.5vw, 2.15rem);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  margin-bottom: 24px;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.store-title span { color: var(--red); }
.search {
  width: 100%; height: 44px; padding: 0 16px 0 40px;
  background: rgba(24, 24, 27, 0.3); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; color: #fff;
}
.search:focus { border-color: rgba(239, 68, 68, 0.5); outline: none; }
.filter-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.search-wrap { position: relative; width: min(100%, 400px); }
.search-wrap > .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #71717a; pointer-events: none; }
.search-clear { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #71717a; }
.filter-settings { position: relative; min-width: 220px; }
.filter-settings summary { list-style: none; height: 44px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 6px; background: rgba(24,24,27,.3); color: #a1a1aa; cursor: pointer; }
.filter-settings summary::-webkit-details-marker { display: none; }
.filter-settings summary span { display: inline-flex; align-items: center; gap: 8px; }
.filter-menu { position: absolute; right: 0; z-index: 30; min-width: 220px; max-height: 300px; overflow: auto; margin-top: 8px; padding: 8px; background: #0a0a0a; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; display: grid; scrollbar-width: thin; scrollbar-color: #27272a transparent; }
.filter-menu::-webkit-scrollbar { width: 4px; height: 4px; }
.filter-menu::-webkit-scrollbar-thumb { background: #27272a; }
.filter-menu p { margin: 8px 8px 4px; color: #71717a; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.filter-menu a { padding: 8px; border-radius: 6px; color: #e4e4e7; }
.filter-menu a:hover { background: rgba(255,255,255,.08); }
.filter-menu a.is-on { color: #ef4444; }
.empty-state { display: flex; align-items: center; gap: 8px; color: #71717a; }
@media (max-width: 767px) {
  .search-wrap, .filter-settings { width: 100%; }
  .filter-menu { position: static; width: 100%; }
}

.stack { display: grid; gap: 0.8rem; }
label { display: grid; gap: 0.35rem; color: var(--zinc); font-size: 14px; letter-spacing: 0.04em; }
input, textarea, select {
  width: 100%; min-height: 44px; padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; color: #fff;
  color-scheme: dark;
}
select option,
select optgroup {
  /* Canvas/CanvasText follow color-scheme so OS dropdowns stay readable on Windows */
  background-color: Canvas;
  color: CanvasText;
}
input[type="radio"], input[type="checkbox"] { width: auto; min-height: 1rem; padding: 0; }
textarea { min-height: 8rem; }
.alert { padding: 12px 16px; border: 1px solid rgba(220, 38, 38, 0.35); background: rgba(220, 38, 38, 0.08); border-radius: 8px; margin-bottom: 1rem; }
.error { color: #fca5a5; font-size: 14px; }
.prose { color: #d4d4d8; line-height: 1.7; }
.prose a { color: #fca5a5; text-decoration: underline; }

/* Managed custom pages (parity with original CustomPageViewer) */
.custom-page-main { padding: 0; background: #050505; }
.custom-page {
  min-height: calc(100vh - var(--header, 4.5rem));
  background: #050505;
  color: #fff;
  padding: calc(var(--header, 4.5rem) + 2.5rem) 1rem 5rem;
}
.custom-page-wrap { width: min(56rem, 100%); margin: 0 auto; }
.custom-page-title {
  margin: 0 0 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
  font-family: Orbitron, sans-serif;
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: transparent;
  background: linear-gradient(90deg, #fff 0%, #a1a1aa 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.custom-page-content {
  color: #e4e4e7;
  font-family: Rajdhani, sans-serif;
  font-size: 1.1rem;
  line-height: 1.75;
}
.custom-page-content > *:first-child { margin-top: 0; }
.custom-page-content h1,
.custom-page-content h2,
.custom-page-content h3,
.custom-page-content h4,
.custom-page-content h5,
.custom-page-content h6 {
  color: #fff;
  font-family: Orbitron, sans-serif;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3;
}
.custom-page-content h1 {
  font-size: 2.25rem;
  font-weight: 700;
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding-bottom: 0.5rem;
}
.custom-page-content h2 { font-size: 1.875rem; font-weight: 600; }
.custom-page-content h3 { font-size: 1.5rem; font-weight: 600; }
.custom-page-content p { margin: 0 0 1.25em; color: #e4e4e7; }
.custom-page-content strong { color: #fff; font-weight: 700; }
.custom-page-content a {
  color: #ef4444;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.custom-page-content a:hover { color: #f87171; border-bottom-color: #f87171; }
.custom-page-content ul,
.custom-page-content ol {
  margin: 1.5em 0;
  padding-left: 2em;
}
.custom-page-content ul { list-style-type: disc; }
.custom-page-content ol { list-style-type: decimal; }
.custom-page-content li { margin-bottom: 0.5em; }
.custom-page-content li::marker { color: #ef4444; }
.custom-page-content blockquote {
  border-left: 4px solid #ef4444;
  background: rgba(255,255,255,.03);
  padding: 1em 1.5em;
  margin: 2em 0;
  font-style: italic;
  color: #a1a1aa;
  border-radius: 0 0.5rem 0.5rem 0;
}
.custom-page-content pre {
  background: #09090b;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin: 2rem 0;
  overflow-x: auto;
}
.custom-page-content pre code {
  background: transparent;
  padding: 0;
  color: #e4e4e7;
  border: 0;
  font-family: ui-monospace, 'Cascadia Code', 'Courier New', monospace;
  font-size: 0.9em;
}
.custom-page-content :not(pre) > code {
  background: rgba(239,68,68,.1);
  color: #f87171;
  padding: 0.2em 0.4em;
  border-radius: 0.25em;
  font-family: ui-monospace, 'Cascadia Code', 'Courier New', monospace;
  font-size: 0.875em;
}
.custom-page-content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 2em 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 0.5rem;
  overflow: hidden;
}
.custom-page-content th {
  background: rgba(255,255,255,.05);
  color: #fff;
  font-weight: 600;
  padding: 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.custom-page-content td {
  padding: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
  color: #d4d4d8;
}
.custom-page-content tr:last-child td { border-bottom: 0; }
.custom-page-content tr:hover td { background: rgba(255,255,255,.02); }
.custom-page-content img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 2em 0;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.1);
}
.custom-page-content hr {
  border: 0;
  border-top: 1px solid rgba(255,255,255,.1);
  margin: 3em 0;
}
.custom-page-content .blueprintue-embed {
  margin: 2em 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 0.5rem;
  overflow: hidden;
  background: #0a0a0a;
}
.custom-page-content .blueprintue-embed iframe {
  display: block;
  width: 100%;
  height: min(70vh, 700px);
  min-height: 420px;
  border: 0;
  background: #111;
}
.custom-page-foot {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.1);
}
.custom-page-foot a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #a1a1aa;
  text-decoration: none;
  font-size: 0.92rem;
}
.custom-page-foot a:hover { color: #fff; }

.back-link { display: inline-flex; align-items: center; gap: 8px; color: #71717a; font-size: 14px; font-weight: 500; margin-bottom: 24px; }
.back-link:hover { color: #fff; }
.container.product-page { width: min(100% - 2rem, 1400px); padding-inline: 0; padding-bottom: 48px; }
.product-layout { display: grid; gap: 2rem; }
.product-layout > * { min-width: 0; }

/* Sound Effects product player */
.sfx-player {
  display: grid; gap: 1rem;
  margin-bottom: 1.5rem;
}
.sfx-player-cover {
  border-radius: .5rem; overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: #0a0a0a; aspect-ratio: 16 / 9;
}
.sfx-player-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.sfx-player-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.sfx-player-head .spec-title { margin: 0; }
.sfx-player-count {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: #71717a; font-weight: 700;
}
.sfx-track-list {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; overflow: hidden; background: #0a0a0a;
}
.sfx-track {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .85rem; align-items: center;
  padding: .7rem .85rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: background .15s ease;
}
.sfx-track:last-child { border-bottom: 0; }
.sfx-track:hover,
.sfx-track.is-active,
.sfx-row:hover,
.sfx-row.is-active { background: rgba(220,38,38,.06); }
.sfx-track.is-playing,
.sfx-row.is-playing { background: rgba(220,38,38,.1); }
.sfx-track.is-error .sfx-track-time,
.sfx-row.is-error .sfx-track-time { color: #f87171; }
.sfx-play {
  width: 2.5rem; height: 2.5rem; border-radius: .25rem;
  border: 1px solid rgba(255,255,255,.12);
  background: #18181b; color: #e4e4e7;
  display: grid; place-items: center; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  flex-shrink: 0;
}
.sfx-play:hover,
.sfx-track.is-playing .sfx-play,
.sfx-row.is-playing .sfx-play {
  background: #dc2626; border-color: #dc2626; color: #fff;
}
.sfx-play.is-disabled {
  opacity: .45; cursor: default; pointer-events: none;
}
.sfx-play-icon { display: none; place-items: center; line-height: 0; }
.sfx-play-icon svg { display: block; }
.sfx-play .sfx-play-icon--play { display: grid; }
.sfx-play .sfx-play-icon--pause { display: none; }
.sfx-play.is-on .sfx-play-icon--play { display: none; }
.sfx-play.is-on .sfx-play-icon--pause { display: grid; }
.sfx-play [hidden] { display: none !important; }
.sfx-track-body { min-width: 0; display: grid; gap: .35rem; }
.sfx-track-meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
}
.sfx-track-title {
  font-size: 13px; font-weight: 600; color: #f4f4f5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sfx-track-time {
  font-size: 11px; color: #a1a1aa; font-variant-numeric: tabular-nums;
  flex-shrink: 0; letter-spacing: .04em; min-width: 2.75rem; text-align: right;
}
.sfx-wave,
.sfx-row-wave {
  position: relative; display: block; width: 100%;
  height: 2.75rem; padding: 0; border: 0;
  background: transparent;
  cursor: pointer; border-radius: 0; overflow: hidden;
}
.sfx-wave-canvas {
  display: block; width: 100%; height: 100%;
}
.product-layout--sfx .sfx-player { margin-bottom: 1.25rem; }

/* Store SFX list */
.sfx-store-list {
  display: grid; gap: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; overflow: hidden;
  background: #0a0a0a;
}
.sfx-row {
  display: grid;
  grid-template-columns: auto minmax(8rem, 1.4fr) auto minmax(0, 1.6fr) auto;
  gap: .85rem;
  align-items: center;
  padding: .75rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: background .15s ease;
}
.sfx-row:last-child { border-bottom: 0; }
.sfx-row-wave { min-width: 0; height: 2.4rem; }
.sfx-row-wave--empty {
  height: 2.4rem;
  background: repeating-linear-gradient(
    90deg,
    #27272a 0 2px,
    transparent 2px 5px
  );
  opacity: .35;
}
.sfx-row-time {
  font-size: 11px; color: #a1a1aa; font-variant-numeric: tabular-nums;
  min-width: 2.75rem; text-align: right;
}
.sfx-row-copy {
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr auto 1fr; /* title/price on true vertical center */
  min-height: 2.75rem;
}
.sfx-row-topline {
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .85rem;
  width: 100%;
  min-width: 0;
}
.sfx-row-name {
  min-width: 0;
  flex: 1 1 auto;
  color: #f4f4f5; font-weight: 700; font-size: .95rem;
  text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.2;
}
.sfx-row-name:hover { color: #f87171; }
.sfx-row-sub {
  grid-row: 3;
  align-self: start;
  margin: .1rem 0 0;
  font-size: 11px; font-weight: 600; color: #c4c4cc;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sfx-row-price {
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}
.sfx-row-price .price {
  font-family: Rajdhani, sans-serif; font-weight: 700; font-size: 1.15rem; color: #fff;
  line-height: 1.2;
}
.sfx-row-price .price-was {
  display: block; font-size: 11px; color: #71717a;
}
.sfx-row-go {
  width: 2.25rem; height: 2.25rem; border-radius: .25rem;
  border: 1px solid rgba(255,255,255,.1);
  display: grid; place-items: center; color: #a1a1aa;
  transition: background .15s, color .15s, border-color .15s;
}
.sfx-row-go:hover { background: #dc2626; border-color: #dc2626; color: #fff; }
@media (max-width: 860px) {
  .sfx-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "play copy go"
      "wave wave wave"
      "time time time";
  }
  .sfx-row > .sfx-play,
  .sfx-row > .sfx-play.is-disabled { grid-area: play; }
  .sfx-row-wave,
  .sfx-row-wave--empty { grid-area: wave; }
  .sfx-row-time { grid-area: time; text-align: left; }
  .sfx-row-copy { grid-area: copy; }
  .sfx-row-go { grid-area: go; }
}

/* Admin SFX track list */
.sfx-admin-table {
  margin: 0 0 1rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0,0,0,.28);
}
.sfx-admin-head {
  display: grid;
  grid-template-columns: 1.5rem 2.4rem minmax(7rem, .9fr) minmax(8rem, 1.1fr) minmax(10rem, 1.4fr) 2rem;
  gap: .55rem; align-items: center;
  padding: .45rem .75rem;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: #71717a; border-bottom: 1px solid rgba(255,255,255,.08);
}
.sfx-admin-list { display: grid; gap: 0; margin: 0; }
.sfx-admin-row {
  display: grid;
  grid-template-columns: 1.5rem 2.4rem minmax(7rem, .9fr) minmax(8rem, 1.1fr) minmax(10rem, 1.4fr) 2rem;
  gap: .55rem; align-items: center;
  padding: .55rem .75rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: transparent;
}
.sfx-admin-row:last-child { border-bottom: 0; }
.sfx-admin-row.is-dragging { opacity: .55; }
.sfx-admin-row.is-drop-target { background: rgba(220,38,38,.08); }
.sfx-admin-row.is-playing { background: rgba(220,38,38,.1); }
.sfx-admin-handle {
  color: #71717a; cursor: grab; user-select: none;
  letter-spacing: -.1em; text-align: center;
}
.sfx-admin-wave {
  position: relative; min-width: 0; height: 2.1rem;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem; align-items: center;
  cursor: pointer;
}
.sfx-admin-wave--empty {
  height: 2.1rem;
  background: repeating-linear-gradient(90deg, #27272a 0 2px, transparent 2px 5px);
  opacity: .35;
}
.sfx-admin-wave .sfx-wave-canvas { width: 100%; height: 2.1rem; }
.sfx-admin-time {
  font-size: 10px; color: #a1a1aa; font-variant-numeric: tabular-nums; min-width: 2.4rem; text-align: right;
}
.sfx-admin-title, .sfx-admin-url { display: grid; gap: 0; margin: 0; font-size: 12px; color: #a1a1aa; min-width: 0; }
.sfx-admin-title input, .sfx-admin-url input {
  width: 100%;
  background: #09090b; border: 1px solid rgba(255,255,255,.1);
  border-radius: .25rem; color: #e4e4e7; padding: .4rem .5rem; font-size: 12px;
}
.sfx-admin-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.sfx-admin-upload { cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; }
@media (max-width: 960px) {
  .sfx-admin-head { display: none; }
  .sfx-admin-row {
    grid-template-columns: 1.5rem 2.4rem minmax(0, 1fr) 2rem;
    grid-template-areas:
      "handle play title remove"
      "wave wave wave wave"
      "url url url url";
  }
  .sfx-admin-handle { grid-area: handle; }
  .sfx-admin-row .sfx-play { grid-area: play; }
  .sfx-admin-wave { grid-area: wave; }
  .sfx-admin-title { grid-area: title; }
  .sfx-admin-url { grid-area: url; }
  .sfx-admin-row [data-sfx-remove] { grid-area: remove; }
}
.gallery-frame { aspect-ratio: 16 / 9; background: #18181b; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; overflow: hidden; }
.gallery-main { width: 100%; height: 100%; object-fit: contain; background: #09090b; }
.thumb-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.thumb-grid button { aspect-ratio: 16 / 9; padding: 0; border-radius: 2px; overflow: hidden; border: 2px solid transparent; background: #18181b; cursor: pointer; opacity: 0.5; }
.thumb-grid button.is-on { border-color: #dc2626; box-shadow: 0 0 0 1px #dc2626; opacity: 1; }
.thumb-grid img { width: 100%; height: 100%; object-fit: cover; }

.pg { display: grid; gap: 1rem; }
.pg-empty {
  aspect-ratio: 16 / 9; display: grid; place-items: center;
  background: #18181b; border: 1px solid rgba(255,255,255,.1); border-radius: .75rem; color: #52525b; font-size: .9rem;
}
.pg-stage {
  position: relative; aspect-ratio: 16 / 9; background: #09090b;
  border: 1px solid rgba(255,255,255,.1); border-radius: .75rem; overflow: hidden;
  touch-action: pan-y; user-select: none; cursor: grab;
}
.pg-stage:has([data-type="marmoset"].is-active) { cursor: default; }
.pg-stage.is-dragging { cursor: grabbing; }
.pg-slides { position: absolute; inset: 0; }
.pg-slide {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: #09090b; opacity: 0; pointer-events: none; transition: opacity .28s ease;
}
.pg-slide.is-active { opacity: 1; pointer-events: auto; }
.pg-media { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.pg-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.pg-model { position: absolute; inset: 0; width: 100%; height: 100%; background: #0a0a0a; }
.pg-marmoset,
.pg-lightbox-marmoset {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #0a0a0a;
  overflow: hidden;
}
/* Isolate Marmoset UI from site typography / img max-width (icons were squashed). */
.pg-marmoset,
.pg-marmoset *,
.pg-lightbox-marmoset,
.pg-lightbox-marmoset * {
  line-height: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-weight: 400 !important;
  box-shadow: none;
}
.pg-marmoset img,
.pg-lightbox-marmoset img {
  max-width: none !important;
  max-height: none !important;
  display: inline-block !important;
  object-fit: fill !important;
  vertical-align: top !important;
}
.pg-marmoset button,
.pg-lightbox-marmoset button,
.pg-marmoset input,
.pg-lightbox-marmoset input {
  font: inherit !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: inherit !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  box-shadow: none !important;
}
.pg-marmoset canvas,
.pg-lightbox-marmoset canvas {
  display: block !important;
  max-width: none !important;
  max-height: none !important;
}
.pg-marmoset > div,
.pg-lightbox-marmoset > div {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
}
.pg-marmoset.is-loading::after {
  content: 'Loading Marmoset\2026';
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  color: #a1a1aa;
  font-size: .9rem;
  letter-spacing: .04em;
  pointer-events: none;
  font-family: Rajdhani, sans-serif !important;
}
.pg-marmoset-error {
  margin: 0;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fca5a5;
  font-size: .9rem;
}
.pg-lightbox-model { position: absolute; inset: 0; width: 100%; height: 100%; }
.pg-model-lb { width: 100%; height: 100%; background: #0a0a0a; }
.pg-slide[data-type="marmoset"] .pg-chip { z-index: 2; }
.media-r2-note {
  display: flex; align-items: center; gap: 0.45rem;
  margin: 0 0 0.85rem; padding: 0.7rem 0.85rem;
  border-radius: 8px; border: 1px solid rgba(59,130,246,.28);
  background: rgba(37,99,235,.1); color: #93c5fd; font-size: 0.85rem;
}
.gallery-adders { display: grid; gap: 0.75rem; margin: 0.85rem 0; }
.gallery-add-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.55rem; align-items: center; }
.gallery-add-row.marmoset-r2-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}
.gallery-add-row.marmoset-r2-row > input[type="url"] { flex: 1 1 14rem; min-width: 12rem; }
.gallery-type-badge {
  position: absolute; left: 0.35rem; bottom: 0.35rem;
  padding: 0.12rem 0.4rem; border-radius: 999px;
  background: rgba(0,0,0,.72); color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.gallery-type-ph {
  display: grid; place-items: center; gap: 0.25rem;
  width: 100%; height: 100%; min-height: 5.5rem;
  color: #a1a1aa; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  background: rgba(0,0,0,.35);
}
.gallery-grid figure { position: relative; }
.pg-play {
  position: absolute; inset: 0; display: grid; place-items: center; color: #dc2626;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.55)); pointer-events: none;
}
.pg-slide.is-active:hover .pg-play { transform: scale(1.06); }
.pg-chip {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 2;
  padding: .25rem .55rem; border-radius: .35rem; font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #fff; pointer-events: none;
}
.pg-chip-video { background: #dc2626; }
.pg-chip-3d { background: #2563eb; opacity: .7; }
.pg-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 2.75rem; height: 2.75rem; border: 0; border-radius: 999px;
  display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.55);
  cursor: pointer; opacity: 0; transition: opacity .2s, background .2s, color .2s;
}
.pg-stage:hover .pg-nav,
.pg-stage:focus-within .pg-nav,
.pg-lightbox-inner:hover .pg-nav,
.pg-lightbox-inner:focus-within .pg-nav { opacity: 1; }
.pg-nav:hover { background: #dc2626; }
.pg-prev { left: 1rem; }
.pg-next { right: 1rem; }
.pg-maximize {
  position: absolute; right: 1rem; bottom: 1rem; z-index: 5;
  width: 2.4rem; height: 2.4rem; border: 0; border-radius: .4rem;
  display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.55);
  cursor: pointer; opacity: 0; transition: opacity .2s, background .2s, color .2s;
}
.pg-stage:hover .pg-maximize,
.pg-stage:focus-within .pg-maximize { opacity: 1; }
.pg-maximize:hover { background: #fff; color: #000; }
.pg-counter {
  position: absolute; left: 1rem; top: 1rem; z-index: 5;
  padding: .2rem .5rem; border-radius: .35rem; background: rgba(0,0,0,.55);
  color: #d4d4d8; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.pg-stage:hover .pg-counter,
.pg-stage:focus-within .pg-counter { opacity: 1; }
.pg-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.pg-thumb {
  position: relative; aspect-ratio: 16 / 9; padding: 0; border-radius: .25rem; overflow: hidden;
  border: 2px solid transparent; background: #18181b; cursor: pointer; opacity: .5; transition: opacity .15s, border-color .15s;
}
.pg-thumb:hover { opacity: 1; }
.pg-thumb.is-on { opacity: 1; border-color: #dc2626; box-shadow: 0 0 0 1px #dc2626; }
.pg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-thumb-play, .pg-thumb-3d {
  position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.35);
}
.pg-thumb-3d {
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 20% 15%, rgba(220,38,38,.32), transparent 55%),
    radial-gradient(90% 80% at 85% 90%, rgba(239,68,68,.14), transparent 50%),
    linear-gradient(160deg, #141417 0%, #0a0a0c 55%, #18181b 100%);
  color: #f87171;
  font-style: normal;
  isolation: isolate;
}
.pg-thumb-3d::before {
  content: "";
  position: absolute; inset: -50%;
  background:
    repeating-linear-gradient(
      -28deg,
      transparent 0 11px,
      rgba(255,255,255,.035) 11px 12px
    );
  background-size: 24px 24px;
  opacity: .6;
  animation: pg-thumb-3d-scan 4s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.pg-thumb-3d::after {
  content: "";
  position: absolute; inset: -20% -60%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    transparent 42%,
    rgba(255,255,255,.1) 50%,
    transparent 58%,
    transparent 100%
  );
  animation: pg-thumb-3d-sheen 4s linear infinite;
  pointer-events: none;
  z-index: 1;
}
.pg-thumb-3d-ring {
  position: absolute;
  width: 3.4rem; height: 3.4rem;
  border-radius: 999px;
  border: 1.5px solid rgba(239,68,68,.4);
  box-shadow: 0 0 14px rgba(220,38,38,.22);
  animation: pg-thumb-3d-pulse 2.4s linear infinite;
  pointer-events: none;
  z-index: 1;
}
.pg-thumb-3d-ring--delay { animation-delay: -1.2s; }
.pg-thumb-3d-core {
  position: relative; z-index: 2;
  display: grid; place-items: center; gap: .35rem;
  animation: pg-thumb-3d-float 2.4s ease-in-out infinite;
}
.pg-thumb-3d-core svg {
  display: block;
  width: 1.85rem; height: 1.85rem;
  filter: drop-shadow(0 0 8px rgba(239,68,68,.6));
  animation: pg-thumb-3d-spin 6s linear infinite;
  transform-origin: center center;
}
.pg-thumb-3d em {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: #f4f4f5; font-style: normal; font-weight: 800;
  line-height: 1;
  text-shadow: 0 0 12px rgba(220,38,38,.55);
}
.pg-thumb:hover .pg-thumb-3d-core { animation-duration: 1.5s; }
.pg-thumb:hover .pg-thumb-3d-core svg { animation-duration: 3s; }
.pg-thumb.is-on .pg-thumb-3d-ring {
  border-color: rgba(248,113,113,.6);
  box-shadow: 0 0 18px rgba(220,38,38,.4);
}
/* Seamless loops: start == end state (or continuous linear travel). */
@keyframes pg-thumb-3d-pulse {
  0% { transform: scale(.72); opacity: 0; }
  12% { opacity: .75; }
  100% { transform: scale(1.55); opacity: 0; }
}
@keyframes pg-thumb-3d-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes pg-thumb-3d-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes pg-thumb-3d-sheen {
  0% { transform: translateX(-35%); }
  100% { transform: translateX(35%); }
}
@keyframes pg-thumb-3d-scan {
  0% { background-position: 0 0; }
  100% { background-position: 24px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-thumb-3d::before,
  .pg-thumb-3d::after,
  .pg-thumb-3d-ring,
  .pg-thumb-3d-core,
  .pg-thumb-3d-core svg { animation: none !important; }
}

.pg-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  width: 100vw; height: 100vh; margin: 0; padding: 0; border: 0;
  background: #000; color: #fff; color-scheme: only light;
}
.pg-lightbox[hidden] { display: none !important; }
.pg-lightbox:fullscreen,
.pg-lightbox:-webkit-full-screen,
.pg-lightbox-inner:fullscreen,
.pg-lightbox-inner:-webkit-full-screen {
  width: 100%; height: 100%; max-width: none; max-height: none;
  background: #000 !important;
}
.pg-lightbox-inner {
  position: relative; width: 100%; height: 100%; display: grid; place-items: center; background: #000;
}
.pg-lightbox-stage {
  position: relative;
  width: 100%; height: 100%; display: grid; place-items: center; padding: 2.5rem;
  background: #000; overflow: hidden; isolation: isolate;
}
.pg-lightbox-photo {
  position: absolute; inset: 2.5rem;
  background: #000 center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  filter: none !important;
  -webkit-filter: none !important;
  mix-blend-mode: normal !important;
  transform: translateZ(0);
}
.pg-lightbox-photo.is-shown {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}
.pg-lightbox-video, .pg-lightbox-iframe {
  position: relative; z-index: 3;
  width: min(100%, 1200px); height: min(100%, 67.5vw); max-height: calc(100vh - 4rem);
  border: 0; background: #000;
}
.pg-lightbox-video iframe { width: 100%; height: 100%; border: 0; background: #000; }
.pg-lightbox-close {
  position: absolute; z-index: 6; top: 0.85rem; right: 1rem;
  width: 2.75rem; height: 2.75rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1); background: #18181b; color: #d4d4d8;
  display: grid; place-items: center; cursor: pointer;
}
.pg-lightbox-close:hover { background: #dc2626; color: #fff; border-color: transparent; }
/* Keep only Layer Views; hide Marmoset logo, Full Screen, Help. */
.pg-marmoset [title="Made with Marmoset Toolbag"],
.pg-lightbox-marmoset [title="Made with Marmoset Toolbag"],
.pg-marmoset input[title="Full Screen"],
.pg-marmoset input[title="Help"],
.pg-lightbox-marmoset input[title="Full Screen"],
.pg-lightbox-marmoset input[title="Help"] {
  display: none !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
}
.pg-lightbox-counter {
  position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 6;
  padding: .35rem .7rem; border-radius: 999px; background: rgba(0,0,0,.75);
  color: #d4d4d8; font-size: 12px; letter-spacing: .04em;
}
.pg-lightbox .pg-nav { opacity: .85; width: 3.25rem; height: 3.25rem; background: rgba(0,0,0,.55); }
.pg-lightbox .pg-nav:hover { opacity: 1; background: rgba(0,0,0,.85); }
@media (max-width: 640px) {
  .pg-thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pg-nav { opacity: .85; }
  .pg-maximize, .pg-counter { opacity: 1; }
  .pg-lightbox-stage { padding: 1rem; }
  .pg-lightbox-photo { inset: 1rem; }
}
.tag { display: inline-block; padding: 4px 8px; border-radius: 4px; background: rgba(239, 68, 68, 0.1); color: var(--red-hot); border: 1px solid rgba(239, 68, 68, 0.2); font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.product-title { font-size: 30px; line-height: 1.1; margin: 0; }
.title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.product-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.65rem; font-family: ui-monospace, monospace; font-size: 36px; font-weight: 700; color: #fff; margin: 0; line-height: 1.2; }
.product-price s { color: #dc2626; font-size: 20px; font-weight: 700; text-decoration: line-through; text-decoration-thickness: 2px; }
.product-patreon-perk {
  margin: 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(220, 38, 38, 0.1);
  color: #fecaca;
  font-size: 0.95rem;
  line-height: 1.4;
}
.product-patreon-perk span { display: block; margin-top: 0.25rem; color: #fca5a5; }
.product-patreon-perk a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.tag-save { background: rgba(34, 197, 94, 0.1); color: #22c55e; border-color: rgba(34, 197, 94, 0.2); }
.offer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 0 0 1.25rem; padding: 1rem; background: #18181b; border: 1px dashed #3f3f46; border-radius: 8px; }
.offer p { margin: 0; }
.offer-kicker { color: #71717a; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.offer p + p { color: #a1a1aa; font-size: 14px; }
.offer-code { text-align: right; }
.offer code { display: block; font-family: ui-monospace, monospace; font-size: 18px; background: #000; padding: 4px 8px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; }
.offer-code span { color: #22c55e; font-size: 12px; font-weight: 700; }
.badge-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-free { background: rgba(34, 197, 94, 0.1); color: #22c55e; border-color: rgba(34, 197, 94, 0.2); }
.wish {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
  overflow: visible;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.wish:hover { border-color: rgba(239, 68, 68, .35); color: #fca5a5; }
.wish.is-on { color: #ef4444; border-color: rgba(239, 68, 68, 0.3); background: rgba(69, 10, 10, 0.2); }
.wish.is-on .icon { fill: currentColor; }
.wish.is-bursting {
  animation: wish-pop .55s cubic-bezier(.2, 1.4, .35, 1) both;
  color: #ef4444;
  border-color: rgba(239, 68, 68, .55);
  background: rgba(127, 29, 29, .35);
  box-shadow: 0 0 0 0 rgba(239, 68, 68, .45);
}
.wish.is-bursting .icon { fill: currentColor; }
.engage-burst {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 5;
}
.engage-burst-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 999px;
  border: 2px solid rgba(248, 113, 113, .85);
  animation: engage-ring .7s ease-out forwards;
}
.engage-burst-spark {
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #fff 0%, #fb7185 45%, #dc2626 100%);
  box-shadow: 0 0 10px rgba(248, 113, 113, .7);
  animation: engage-spark .75s cubic-bezier(.15, .85, .25, 1) forwards;
  --dx: 0px;
  --dy: 0px;
}
.engage-burst-spark.is-gold {
  background: radial-gradient(circle at 30% 30%, #fff 0%, #fde68a 40%, #f59e0b 100%);
  box-shadow: 0 0 10px rgba(251, 191, 36, .75);
}
.engage-burst-spark.is-pink {
  background: radial-gradient(circle at 30% 30%, #fff 0%, #f9a8d4 40%, #ec4899 100%);
  box-shadow: 0 0 10px rgba(244, 114, 182, .75);
}
.bp-thanks-btn.is-bursting {
  animation: thanks-glow .7s cubic-bezier(.2, 1.35, .35, 1) both;
}
.bp-thanks-btn.is-bursting .icon {
  animation: thanks-heart .55s cubic-bezier(.2, 1.5, .35, 1) both;
}
@keyframes wish-pop {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, .5); }
  35% { transform: scale(1.28); box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
  70% { transform: scale(.94); }
  100% { transform: scale(1); box-shadow: 0 0 22px rgba(239, 68, 68, .35); }
}
@keyframes thanks-glow {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(244, 114, 182, .4); }
  40% { transform: scale(1.06); box-shadow: 0 0 28px rgba(244, 114, 182, .45); }
  100% { transform: scale(1); box-shadow: 0 0 16px rgba(239, 68, 68, .25); }
}
@keyframes thanks-heart {
  0% { transform: scale(1) rotate(0deg); }
  30% { transform: scale(1.35) rotate(-8deg); }
  55% { transform: scale(1.15) rotate(6deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes engage-ring {
  0% { transform: scale(.4); opacity: .95; }
  100% { transform: scale(4.2); opacity: 0; }
}
@keyframes engage-spark {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.15); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wish.is-bursting,
  .bp-thanks-btn.is-bursting,
  .bp-thanks-btn.is-bursting .icon,
  .engage-burst-ring,
  .engage-burst-spark {
    animation: none !important;
  }
}
.product-buy { display: grid; gap: 16px; align-content: start; }
.license-copy { color: #a1a1aa; font-size: 14px; margin: 0; }
a.btn.btn-fab, .btn.btn-fab { width: 100%; height: 56px; border-radius: 8px; background: rgba(255, 255, 255, 0.1); color: #fff; border: 0; font-size: 18px; box-shadow: none; }
a.btn.btn-fab:hover, .btn.btn-fab:hover { background: rgba(255, 255, 255, 0.2); }
a.btn.btn-fab.is-primary-cta, .btn.btn-fab.is-primary-cta {
  background: #dc2626;
  box-shadow: 0 0 24px rgba(220, 38, 38, 0.35);
}
a.btn.btn-fab.is-primary-cta:hover, .btn.btn-fab.is-primary-cta:hover { background: #b91c1c; }
.product-links-editor { display: grid; gap: 0.85rem; }
.product-link-rows, .product-resource-links { display: grid; gap: 0.75rem; }
.product-link-row {
  display: grid;
  gap: 0.65rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 0.75rem;
  background: rgba(0,0,0,.22);
}
.product-link-row h3 { margin: 0; color: #fff; font-size: 0.95rem; }
.product-link-row.is-compact { grid-template-columns: 1fr 1.4fr; align-items: end; }
@media (max-width: 720px) {
  .product-link-row.is-compact { grid-template-columns: 1fr; }
}
.product-buy form { margin: 0; }
.product-buy form .btn-fab { width: 100%; cursor: pointer; }
.product-buy .btn-fab.is-busy { opacity: 0.7; cursor: wait; }
.product-resources { display: flex; flex-wrap: wrap; gap: 12px; margin-top: -8px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.product-copy { color: #a1a1aa; font-size: 14px; line-height: 1.7; }
.product-copy h2 { font-family: Rajdhani, sans-serif; font-size: 20px; letter-spacing: 0; color: #fff; margin: 1.5rem 0 0.5rem; }
.product-copy p { margin: 0 0 0.75rem; }
.product-copy strong { color: #fff; }
.product-copy ul, .product-copy ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.cloud-page { min-height: 70vh; display: flex; justify-content: center; padding: 48px 16px 80px; }
.cloud-card { position: relative; width: min(100%, 672px); background: #0a0a0a; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; overflow: hidden; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.45); }
.cloud-prep {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: rgba(4, 4, 6, .78);
  backdrop-filter: blur(6px);
}
.cloud-prep[hidden] { display: none !important; }
.cloud-prep-inner {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: min(100%, 22rem);
  padding: 1.15rem 1.25rem;
  border-radius: .9rem;
  border: 1px solid rgba(255, 255, 255, .1);
  background:
    radial-gradient(ellipse at 12% 0%, rgba(220, 38, 38, .2), transparent 55%),
    #0c0c10;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}
.cloud-prep-spinner {
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: .15rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .14);
  border-top-color: #ef4444;
  animation: checkout-spin .8s linear infinite;
}
.cloud-prep-inner strong {
  display: block;
  margin: 0 0 .25rem;
  color: #fff;
  font-size: .98rem;
  font-weight: 700;
}
.cloud-prep-inner p {
  margin: 0;
  color: #a1a1aa;
  font-size: .88rem;
  line-height: 1.45;
}
.cloud-page.is-preparing .cloud-dl { pointer-events: none; opacity: .55; }
.cloud-dl.is-busy {
  background: rgba(220, 38, 38, .18);
  border-color: rgba(220, 38, 38, .45);
  color: #fecaca;
  cursor: wait;
}
.cloud-head { display: flex; gap: 24px; align-items: center; padding: 32px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); background: rgba(0, 0, 0, 0.2); }
.cloud-head img, .cloud-ph { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; background: #18181b; border: 1px solid rgba(255, 255, 255, 0.1); flex: 0 0 auto; }
.cloud-kicker { display: flex; gap: 8px; margin-bottom: 8px; }
.cloud-kicker span { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; }
.cloud-secure { color: #f87171; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); }
.cloud-ver { color: #a1a1aa; background: #27272a; border: 1px solid rgba(255, 255, 255, 0.05); }
.cloud-head h1 { font-family: Orbitron, sans-serif; font-size: 30px; line-height: 1.15; margin: 0 0 4px; }
.cloud-head p, .cloud-empty, .cloud-deny p { color: #71717a; margin: 0; }
.cloud-body { padding: 32px; }
.cloud-grant { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 24px; padding: 12px 16px; border-radius: 8px; background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); color: #34d399; font-size: 14px; }
.cloud-body h2 { display: flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #71717a; margin: 0 0 24px; }
.cloud-dl { gap: 8px; }
.cloud-files { display: grid; gap: 12px; }
.cloud-file { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 16px; border-radius: 8px; background: rgba(24, 24, 27, 0.5); border: 1px solid rgba(255, 255, 255, 0.05); }
.cloud-file strong { display: block; color: #fff; }
.cloud-file span { color: #a1a1aa; font-size: 14px; }
.cloud-size { display: block; color: #71717a; font-size: 13px; margin-top: 2px; }
.cloud-dl { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 6px; background: rgba(255, 255, 255, 0.05); color: #a1a1aa; border: 1px solid rgba(255, 255, 255, 0.1); font-size: 14px; font-weight: 700; white-space: nowrap; }
.cloud-dl:hover { background: #dc2626; color: #fff; border-color: #dc2626; }
.cloud-dl.is-disabled, .cloud-dl.is-disabled:hover { background: rgba(255,255,255,.03); color: #52525b; border-color: rgba(255,255,255,.06); cursor: not-allowed; }
.cloud-deny { display: grid; gap: 16px; justify-items: center; text-align: center; padding: 24px 0; }
.cloud-deny h2 { letter-spacing: 0; text-transform: none; font-size: 24px; color: #fff; margin: 0; }
.cloud-foot { display: flex; justify-content: space-between; gap: 16px; padding: 16px 32px; background: rgba(0, 0, 0, 0.4); border-top: 1px solid rgba(255, 255, 255, 0.05); color: #52525b; font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
@media (max-width: 640px) {
    .cloud-head, .cloud-file, .cloud-grant { flex-direction: column; align-items: flex-start; }
    .cloud-head h1 { font-size: 22px; }
    .cloud-head, .cloud-body, .cloud-foot { padding-inline: 20px; }
}
.related { margin-top: 96px; padding-top: 64px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.field-label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #71717a; }
.license-grid { display: grid; gap: 0.75rem; }
.license-card { position: relative; display: grid; gap: 4px; padding: 16px; border-radius: 8px; border: 2px solid #27272a; background: #0a0a0a; cursor: pointer; }
.license-card:has(input:checked) { border-color: var(--red-hot); background: #18181b; box-shadow: 0 0 15px rgba(220, 38, 38, 0.1); }
.license-card input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; }
.license-card span { font-family: ui-monospace, monospace; color: var(--zinc); font-size: 14px; }
.license-owned-tag { display: inline-block; margin-top: 2px; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #34d399; }
.buy-now { width: 100%; height: 56px; border-radius: 8px; font-size: 18px; }
/* .btn uses display with enough specificity that bare [hidden] is ignored ? force-hide CTAs. */
.product-buy a.btn[hidden],
.product-buy a.btn.is-hidden,
.product-buy .btn[hidden],
.product-buy .btn.is-hidden { display: none !important; }
.assurances { margin: 0; padding: 0; display: grid; gap: 0.6rem; color: var(--zinc); font-size: 14px; list-style: none; }
.assurances li { display: flex; align-items: center; gap: 12px; }
.assurances .icon { color: #22c55e; }
.eu-waiver {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .75rem;
  align-items: start;
  padding: .95rem 1rem;
  border-radius: .85rem;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(24, 24, 27, .85);
  color: #e4e4e7;
  font-size: .88rem;
  line-height: 1.45;
  cursor: pointer;
}
.eu-waiver input {
  margin-top: .2rem;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: #dc2626;
}
.eu-waiver-meta {
  display: block;
  margin-top: .45rem;
  color: #71717a;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.eu-waiver-error {
  margin: .55rem 0 0;
  color: #f87171;
  font-size: .85rem;
}
.checkout-options-card .eu-waiver { margin: 1rem 0; }
.eu-waiver-dialog {
  border: 0;
  padding: 0;
  max-width: 28rem;
  width: calc(100% - 1.5rem);
  background: transparent;
  color: #fafafa;
}
.eu-waiver-dialog::backdrop {
  background: rgba(4, 4, 6, .78);
  backdrop-filter: blur(8px);
}
.eu-waiver-dialog-card {
  display: grid;
  gap: 1rem;
  padding: 1.35rem 1.35rem 1.2rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(255, 255, 255, .1);
  background:
    linear-gradient(165deg, #1a1214 0%, #0c0c10 55%, #101014 100%);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .55);
}
.eu-waiver-dialog-head {
  position: relative;
  padding-right: 2.5rem;
}
.eu-waiver-dialog-kicker {
  margin: 0 0 .35rem;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fca5a5;
  font-weight: 600;
}
.eu-waiver-dialog-head h2 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: -.02em;
}
.eu-waiver-dialog-lead {
  margin: 0;
  color: #a1a1aa;
  font-size: .9rem;
  line-height: 1.45;
}
.eu-waiver-dialog-close {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: .65rem;
  background: rgba(255, 255, 255, .06);
  color: #a1a1aa;
  cursor: pointer;
}
.eu-waiver-dialog-close:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.eu-waiver-dialog-foot {
  display: flex;
  justify-content: flex-end;
  gap: .55rem;
  padding-top: .15rem;
}
.spec-title { display: flex; align-items: center; gap: 8px; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; margin: 2rem 0 1rem; }
.spec-title .icon { color: #ef4444; }
.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1rem; background: #0a0a0a; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 32px; text-align: center; }
.spec-ico { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 999px; border: 1px solid #3f3f46; background: #000; display: grid; place-items: center; color: #fff; }
.specs > div:hover .spec-ico { border-color: #ef4444; color: #ef4444; }
.specs b { display: block; font-family: Orbitron, sans-serif; font-size: 18px; margin-bottom: 4px; }
.specs > div > span:last-child { color: #71717a; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
@media (min-width: 640px) {
  .specs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.portal { min-height: calc(100vh - 160px); display: grid; place-items: center; }
.portal-wrap { width: min(100%, 28rem); }
.portal-logo { display: grid; place-items: center; margin-bottom: 24px; }
.portal-logo img { height: 64px; width: auto; }
.portal h1 { text-align: center; font-size: 30px; letter-spacing: 0.08em; }
.portal-card { background: rgba(24, 24, 27, 0.5); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 32px; }
.portal-alt {
  margin-top: 1.35rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}
.portal-alt-label {
  margin: 0 0 0.55rem;
  color: #71717a;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.portal-register {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.4rem;
  padding: 0 1rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: #e4e4e7;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.portal-register:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(239, 68, 68, 0.45);
  color: #fff;
}
.gallery { display: grid; gap: 0.75rem; }
.gallery img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); background: #18181b; }
.split { display: grid; gap: 1.5rem; }
.pager { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1.5rem; }
.pager a, .pager span { padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; }

.cookie {
  position: fixed; z-index: 100; left: 1rem; right: 1rem; bottom: 1rem;
  background: rgba(9, 9, 11, 0.9); border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px; padding: 20px; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
}
.cookie[hidden] { display: none; }
.cookie h2 { font-size: 14px; margin: 0 0 6px; }
.cookie p { color: var(--zinc); font-size: 12px; line-height: 1.6; }
.cookie-actions { display: flex; gap: 0.75rem; }
.cookie-actions button { flex: 1; height: 36px; border-radius: 6px; cursor: pointer; }
.cookie .decline { background: transparent; border: 1px solid rgba(255, 255, 255, 0.1); color: #d4d4d8; }
.cookie .accept { background: var(--red); border: 0; color: #fff; font-weight: 700; box-shadow: 0 0 15px rgba(220, 38, 38, 0.3); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.7rem 0.55rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--zinc); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.admin-page {
  --admin-sidebar-width: 16.75rem;
  --admin-sidebar-rail: 4.35rem;
  padding: 0 !important;
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  background: #050505;
}
body:has(.admin-shell) .site-header,
body:has(.admin-shell) .menu-panel,
body:has(.admin-shell) .site-footer,
body:has(.admin-shell) .footer-bottom,
body:has(.admin-shell) .cookie {
  display: none !important;
}
.admin-shell {
  position: relative;
  min-height: 100vh;
  padding-left: var(--admin-sidebar-width);
  transition: padding-left 0.22s ease;
}
html.admin-sidebar-collapsed .admin-shell,
.admin-shell.is-collapsed {
  padding-left: var(--admin-sidebar-rail);
}
.admin-drawer-backdrop {
  display: none;
}
.admin-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--admin-sidebar-width);
  height: 100vh;
  z-index: 80;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, #0c0c10 0%, #09090b 100%);
  transition: width 0.22s ease;
  overflow: visible;
}
html.admin-sidebar-collapsed .admin-sidebar,
.admin-shell.is-collapsed .admin-sidebar {
  width: var(--admin-sidebar-rail);
}
.admin-sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0.85rem 0.7rem 0.9rem;
}
html.admin-sidebar-collapsed .admin-sidebar-inner,
.admin-shell.is-collapsed .admin-sidebar-inner {
  padding-inline: 0.5rem;
  align-items: stretch;
}
.admin-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-shrink: 0;
  padding: 0.1rem 0.3rem 0.75rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.admin-sidebar-home {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  flex: 1;
  color: #fff;
  text-decoration: none;
}
.admin-sidebar-mark {
  flex-shrink: 0;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.5rem;
  display: grid;
  place-items: center;
  font-family: Orbitron, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fecaca;
  background: rgba(220, 38, 38, 0.18);
  border: 1px solid rgba(220, 38, 38, 0.35);
}
.admin-sidebar-brand-text {
  display: grid;
  min-width: 0;
  line-height: 1.15;
}
.admin-sidebar-brand-text strong {
  font-size: 0.92rem;
  font-weight: 650;
}
.admin-sidebar-brand-text small {
  color: #71717a;
  font-size: 0.72rem;
}
.admin-sidebar-collapse,
.admin-sidebar-close,
.admin-topbar-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.45rem;
  border: 1px solid transparent;
  background: transparent;
  color: #a1a1aa;
  cursor: pointer;
}
.admin-sidebar-collapse:hover,
.admin-sidebar-close:hover,
.admin-topbar-icon-btn:hover {
  color: #fff;
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.08);
}
.admin-sidebar-close { display: none; }
.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 0.14rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0.2rem 0.1rem 0.55rem;
  scrollbar-width: thin;
}
.admin-nav-group {
  position: relative;
}
.admin-nav-link,
.admin-nav-group-toggle {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  color: #a1a1aa;
  padding: 0.5rem 0.55rem;
  border-radius: 0.5rem;
  font-size: 0.84rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.admin-nav-link:hover,
.admin-nav-group-toggle:hover {
  color: #fff;
  background: rgba(255,255,255,.045);
}
.admin-nav-link.is-active,
.admin-nav-link[aria-current="page"] {
  color: #fff;
  background: rgba(220, 38, 38, 0.14);
  border-color: rgba(220, 38, 38, 0.28);
}
.admin-nav-group.is-active > .admin-nav-group-toggle {
  color: #fecaca;
}
.admin-nav-group.is-flyout-open > .admin-nav-group-toggle {
  color: #fff;
  background: rgba(255,255,255,.08);
}
.admin-nav-icon {
  display: inline-grid;
  place-items: center;
  width: 1.15rem;
  flex-shrink: 0;
  color: inherit;
  opacity: 0.92;
}
.admin-nav-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-nav-chevron {
  display: inline-grid;
  place-items: center;
  color: #71717a;
  transition: transform 0.18s ease;
}
.admin-nav-group.is-open > .admin-nav-group-toggle .admin-nav-chevron {
  transform: rotate(180deg);
  color: #a1a1aa;
}
.admin-nav-badge {
  margin-left: auto;
  min-width: 1.15rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fecaca;
  background: rgba(220, 38, 38, 0.2);
  border: 1px solid rgba(220, 38, 38, 0.35);
}
.admin-nav-children {
  display: grid;
  gap: 0.08rem;
  padding: 0.2rem 0 0.4rem 0.55rem;
  margin: 0.05rem 0 0.2rem 0.85rem;
  border-left: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
  transition: opacity 0.16s ease;
}
.admin-nav-children[hidden] {
  display: none !important;
}
.admin-nav-flyout-head {
  display: none;
}
.admin-nav-children .admin-nav-link {
  padding: 0.4rem 0.55rem;
  font-size: 0.81rem;
}
.admin-sidebar-foot {
  flex-shrink: 0;
  margin-top: auto;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(255,255,255,.06);
}
.admin-workspace {
  min-width: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #050505;
}
.admin-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.35rem;
  padding: 0.65rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: rgba(9, 9, 11, 0.92);
  backdrop-filter: blur(10px);
}
.admin-topbar-left,
.admin-topbar-right {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}
.admin-topbar-menu { display: none; }
.admin-topbar-title-wrap { min-width: 0; }
.admin-topbar-kicker {
  margin: 0;
  color: #71717a;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.admin-topbar-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 650;
  color: #fff;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-topbar-search {
  display: none;
  align-items: center;
  gap: 0.45rem;
  min-height: 2rem;
  padding: 0.25rem 0.65rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(24,24,27,.55);
  color: #a1a1aa;
  cursor: pointer;
  font-size: 0.8rem;
}
.admin-topbar-search kbd {
  margin-left: 0.35rem;
  padding: 0.05rem 0.35rem;
  border-radius: 0.3rem;
  border: 1px solid rgba(255,255,255,.12);
  font-size: 0.68rem;
  color: #71717a;
}
.admin-topbar-search:hover {
  color: #fff;
  border-color: rgba(255,255,255,.18);
}
.admin-topbar-user {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: #fff;
  text-decoration: none;
  min-width: 0;
}
.admin-topbar-avatar {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fecaca;
  background: rgba(220, 38, 38, 0.18);
  border: 1px solid rgba(220, 38, 38, 0.35);
}
.admin-topbar-user-meta {
  display: none;
  line-height: 1.15;
}
.admin-topbar-user-meta strong {
  display: block;
  font-size: 0.82rem;
}
.admin-topbar-user-meta small {
  color: #71717a;
  font-size: 0.7rem;
}
.admin-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.admin-main { padding: 1.25rem; min-width: 0; }
.admin-main .user-admin, .admin-main .product-editor, .admin-main .goal-admin, .admin-main .hub-editor.is-wide, .admin-main .cat-admin, .admin-main .pages-admin, .admin-main .pages-editor, .admin-main .media-admin, .admin-main .orders-admin { width: 100%; max-width: none; margin: 0; }

/* Collapsed icon rail */
html.admin-sidebar-collapsed .admin-sidebar-brand-text,
html.admin-sidebar-collapsed .admin-nav-label,
html.admin-sidebar-collapsed .admin-nav-chevron,
html.admin-sidebar-collapsed .admin-nav-badge,
html.admin-sidebar-collapsed .admin-sidebar-collapse,
.admin-shell.is-collapsed .admin-sidebar-brand-text,
.admin-shell.is-collapsed .admin-nav-label,
.admin-shell.is-collapsed .admin-nav-chevron,
.admin-shell.is-collapsed .admin-nav-badge,
.admin-shell.is-collapsed .admin-sidebar-collapse {
  display: none;
}
html.admin-sidebar-collapsed .admin-sidebar-brand,
.admin-shell.is-collapsed .admin-sidebar-brand {
  justify-content: center;
  padding-inline: 0;
  border-bottom-color: transparent;
}
html.admin-sidebar-collapsed .admin-sidebar-home,
.admin-shell.is-collapsed .admin-sidebar-home {
  justify-content: center;
  flex: 0;
}
html.admin-sidebar-collapsed .admin-nav-link,
html.admin-sidebar-collapsed .admin-nav-group-toggle,
.admin-shell.is-collapsed .admin-nav-link,
.admin-shell.is-collapsed .admin-nav-group-toggle {
  justify-content: center;
  padding-inline: 0.55rem;
}
html.admin-sidebar-collapsed .admin-nav-children:not(.is-flyout-visible),
.admin-shell.is-collapsed .admin-nav-children:not(.is-flyout-visible) {
  display: none !important;
}
html.admin-sidebar-collapsed .admin-nav-children.is-flyout-visible,
.admin-shell.is-collapsed .admin-nav-children.is-flyout-visible {
  display: grid !important;
  position: fixed;
  left: calc(var(--admin-sidebar-rail) + 0.15rem);
  top: 0;
  width: 14.5rem;
  max-height: min(24rem, calc(100vh - 1rem));
  overflow-y: auto;
  margin: 0;
  padding: 0.45rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 0.7rem;
  background: #111114;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  z-index: 90;
  border-left: 1px solid rgba(255,255,255,.12);
}
html.admin-sidebar-collapsed .admin-nav-flyout-head,
.admin-shell.is-collapsed .admin-nav-flyout-head {
  display: block;
  padding: 0.35rem 0.55rem 0.55rem;
  margin-bottom: 0.15rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.02em;
}
html.admin-sidebar-collapsed .admin-nav-children .admin-nav-label,
.admin-shell.is-collapsed .admin-nav-children .admin-nav-label {
  display: block;
}
html.admin-sidebar-collapsed .admin-nav-children .admin-nav-link,
.admin-shell.is-collapsed .admin-nav-children .admin-nav-link {
  justify-content: flex-start;
  padding-inline: 0.55rem;
}

@media (min-width: 768px) {
  .admin-topbar-search { display: inline-flex; }
  .admin-topbar-user-meta { display: grid; }
}
@media (max-width: 767.98px) {
  .admin-shell,
  html.admin-sidebar-collapsed .admin-shell,
  .admin-shell.is-collapsed {
    padding-left: 0;
  }
  .admin-drawer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 70;
  }
  .admin-drawer-backdrop[hidden] { display: none !important; }
  .admin-sidebar,
  html.admin-sidebar-collapsed .admin-sidebar,
  .admin-shell.is-collapsed .admin-sidebar {
    width: min(18.5rem, 88vw);
    transform: translateX(-105%);
    transition: transform 0.22s ease, width 0.22s ease;
    box-shadow: 12px 0 40px rgba(0,0,0,.35);
  }
  .admin-shell.is-drawer-open .admin-sidebar {
    transform: translateX(0);
  }
  .admin-sidebar-collapse,
  .admin-topbar-rail { display: none !important; }
  .admin-sidebar-close,
  .admin-topbar-menu { display: inline-grid; }
  html.admin-sidebar-collapsed .admin-sidebar-brand-text,
  html.admin-sidebar-collapsed .admin-nav-label,
  html.admin-sidebar-collapsed .admin-nav-chevron,
  html.admin-sidebar-collapsed .admin-nav-badge,
  .admin-shell.is-collapsed .admin-sidebar-brand-text,
  .admin-shell.is-collapsed .admin-nav-label,
  .admin-shell.is-collapsed .admin-nav-chevron,
  .admin-shell.is-collapsed .admin-nav-badge {
    display: revert;
  }
  html.admin-sidebar-collapsed .admin-nav-label,
  .admin-shell.is-collapsed .admin-nav-label {
    display: block;
  }
  html.admin-sidebar-collapsed .admin-sidebar-brand-text,
  .admin-shell.is-collapsed .admin-sidebar-brand-text {
    display: grid;
  }
  html.admin-sidebar-collapsed .admin-nav-children:not(.is-flyout-visible),
  .admin-shell.is-collapsed .admin-nav-children:not(.is-flyout-visible) {
    display: grid;
  }
  html.admin-sidebar-collapsed .admin-nav-children[hidden],
  .admin-shell.is-collapsed .admin-nav-children[hidden] {
    display: none !important;
  }
  html.admin-sidebar-collapsed .admin-nav-children.is-flyout-visible,
  .admin-shell.is-collapsed .admin-nav-children.is-flyout-visible {
    position: static;
    width: auto;
    max-height: none;
    box-shadow: none;
    background: transparent;
    border: 0;
    border-left: 1px solid rgba(255,255,255,.08);
    left: auto;
    top: auto;
    padding: 0.2rem 0 0.4rem 0.55rem;
    margin: 0.05rem 0 0.2rem 0.85rem;
  }
  html.admin-sidebar-collapsed .admin-nav-flyout-head,
  .admin-shell.is-collapsed .admin-nav-flyout-head {
    display: none;
  }
  .admin-topbar { padding-inline: 0.85rem; }
  .admin-main { padding: 1rem; }
}
.stat-grid { display: grid; gap: 0.8rem; }
.stat { padding: 1rem; }
.stat strong { display: block; font-family: Orbitron, sans-serif; font-size: 1.6rem; }
.row-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.check { display: flex; align-items: center; gap: 0.5rem; text-transform: none; letter-spacing: 0; color: var(--text); }
.check input { width: auto; min-height: 1rem; }

@media (min-width: 640px) {
  .brand-name { display: inline; }
  .cards-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .preview-ue5 > :nth-child(n + 5) { display: block; }
  .preview-ue5 > :nth-child(n + 7) { display: none; }
}
@media (min-width: 768px) {
  .header-inner { grid-template-columns: auto 1fr auto; }
  .nav-links, .nav-actions { display: flex; }
  .nav-links { justify-content: center; }
  .nav-toggle, .menu-panel { display: none !important; }
  .hero h1 { font-size: 72px; }
  .lede { font-size: 20px; line-height: 28px; }
  .section h2 { font-size: 36px; }
  .store-title { font-size: clamp(1.55rem, 3vw, 2.15rem); }
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-4, .cards-4 { grid-template-columns: 1fr 1fr; }
  .cards-5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .footer-grid.footer-grid-no-news { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-bottom .container { flex-direction: row; justify-content: space-between; }
  .cookie { left: auto; max-width: 24rem; }
  .filter-row { grid-template-columns: 400px 1fr; align-items: center; }
  .split { grid-template-columns: 1.4fr 0.9fr; }
  .license-grid { grid-template-columns: 1fr 1fr; }
  .product-title { font-size: 36px; }
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
  .product-layout { grid-template-columns: 7fr 5fr; gap: 2rem; }
  .hero h1 { font-size: 96px; letter-spacing: 0.05em; }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .preview-ue5 > :nth-child(6) { display: none; }
  .cards-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1280px) {
  .product-layout { grid-template-columns: 8fr 4fr; gap: 3rem; }
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .cards-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1440px) {
  :root { --container: 1400px; }
}
@media (max-width: 389px) {
  .hero h1 { font-size: 40px; }
  .btn-slant { padding: 16px 18px; font-size: 14px; }
}

.hub-page { position: relative; padding: 2.5rem 0 4rem; }
.hub-hero { position: relative; text-align: center; margin-bottom: 2.5rem; max-width: 100%; }
.hub-glow { position: absolute; left: 50%; top: 40%; width: min(500px, 80%); height: 220px; transform: translate(-50%, -50%); background: rgba(220, 38, 38, 0.12); filter: blur(70px); border-radius: 999px; pointer-events: none; }
.hub-hero h1 { position: relative; font-size: clamp(1.4rem, 3.2vw, 2.15rem); letter-spacing: 0.04em; margin-bottom: 0.85rem; line-height: 1.2; }
.hub-hero h1 span { color: var(--red); }
.hub-hero p { position: relative; max-width: 42rem; margin: 0 auto; color: #a1a1aa; font-family: Rajdhani, sans-serif; font-size: 1.125rem; font-weight: 400; letter-spacing: 0; line-height: 1.6; }
.hub-search { width: min(100% - 2rem, 42rem); margin: 0 auto 1.5rem; }
.hub-search label, .support-search label { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.hub-search label { background: #0a0a0a; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: 0.9rem 1.4rem; }
.hub-search input, .support-search input { flex: 1; min-width: 0; width: 100%; background: transparent; border: 0; outline: none; color: #fff; }
.hub-search input { font-size: 1.05rem; }
.hub-search label:focus-within { border-color: rgba(239,68,68,.5); }
.hub-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; width: min(100% - 2rem, var(--container)); margin: 0 auto 2.5rem; }
.hub-cats a { padding: 0.45rem 1rem; border-radius: 999px; color: #a1a1aa; font-size: 0.9rem; }
.hub-cats a:hover { color: #fff; background: rgba(255,255,255,.05); }
.hub-cats a.is-on { background: var(--red); color: #fff; }
.hub-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.hub-card { display: flex; flex-direction: column; min-width: 0; background: rgba(24,24,27,.4); border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; overflow: hidden; }
.hub-card:hover { border-color: rgba(239,68,68,.35); }
.hub-card .shot { position: relative; display: block; aspect-ratio: 16 / 9; background: #000; }
.hub-card .shot img, .article-cover { width: 100%; height: 100%; object-fit: cover; }
.shot-fallback { display: grid; place-items: center; width: 100%; height: 100%; color: #52525b; }
.hub-card .tags { position: absolute; top: 1rem; left: 1rem; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.hub-card .tag { background: rgba(0,0,0,.8); border: 1px solid rgba(255,255,255,.1); border-radius: 4px; padding: 2px 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.hub-card .pad { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.hub-meta { display: flex; flex-wrap: wrap; gap: 1rem; color: #71717a; font-size: 12px; margin: 0 0 1rem; }
.hub-meta span { display: inline-flex; align-items: center; gap: 0.3rem; }
.hub-card h2 { font-family: Rajdhani, sans-serif; font-size: 1.55rem; letter-spacing: 0; line-height: 1.15; margin-bottom: 0.75rem; }
.hub-card h2 a:hover { color: var(--red-hot); }
.hub-card .pad p { color: #a1a1aa; font-size: 0.95rem; line-height: 1.55; }
.read { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: auto; color: var(--red-hot); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.article-page .article-cover { aspect-ratio: 16 / 9; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); margin: 1rem 0 1.5rem; background: #000; }
.article-page h1 { font-size: clamp(1.8rem, 3vw, 2.6rem); }

.support-hero { position: relative; padding: 4.5rem 0 5rem; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,.05); background: radial-gradient(ellipse at top, rgba(127,29,29,.28), rgba(5,5,5,0) 58%); }

.request-page {
  position: relative;
  overflow: hidden;
  padding: 6.5rem 1rem 5rem;
  min-height: calc(100vh - var(--header));
}
.request-glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 56rem);
  height: 28rem;
  background: rgba(127, 29, 29, 0.12);
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}
.request-wrap {
  position: relative;
  z-index: 1;
  width: min(100%, 48rem);
  margin-inline: auto;
}
.request-hero {
  text-align: center;
  margin-bottom: 2.75rem;
}
.request-hero h1 {
  margin: 0 0 1rem;
  font-family: Orbitron, sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: #f4f4f5;
  text-shadow: 0 8px 30px rgba(0,0,0,.55);
}
.request-hero h1 span { color: var(--red-hot); }
.request-hero p {
  margin: 0 auto;
  max-width: 40rem;
  color: #a1a1aa;
  font-size: 1.125rem;
  line-height: 1.65;
}
.request-card {
  background: rgba(24, 24, 27, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  padding: 1.5rem;
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
@media (min-width: 768px) {
  .request-card { padding: 2rem; }
}
.request-form { display: grid; gap: 1.35rem; }
.request-grid {
  display: grid;
  gap: 1.35rem;
}
@media (min-width: 768px) {
  .request-grid { grid-template-columns: 1fr 1fr; }
}
.request-field {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  color: #d4d4d8;
  font-size: 0.92rem;
}
.request-field > span em { color: var(--red-hot); font-style: normal; }
.request-field small { color: #71717a; font-size: 0.75rem; }
.request-budget-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.request-budget-label svg { color: #71717a; }
.request-field input,
.request-field textarea,
.request-field select {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-radius: 0.5rem;
  transition: border-color .15s ease;
}
.request-field input:focus,
.request-field textarea:focus,
.request-field select:focus {
  border-color: rgba(239, 68, 68, 0.5);
  outline: none;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.25);
}
.request-field textarea {
  min-height: 9.5rem;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.6;
}
.request-select { position: relative; display: block; }
.request-select select {
  appearance: none;
  padding-right: 2.4rem;
  cursor: pointer;
  color-scheme: dark;
}
.request-select svg {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: #71717a;
  pointer-events: none;
}
.request-select select option {
  background-color: Canvas;
  color: CanvasText;
}
.request-upload {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 1.5rem 1rem;
  border: 1px dashed rgba(255,255,255,.2);
  border-radius: 0.75rem;
  background: rgba(0,0,0,.2);
  text-align: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.request-upload:hover {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.3);
}
.request-upload svg { color: #71717a; }
.request-upload.is-filled svg { color: var(--red-hot); }
.request-upload strong {
  color: #a1a1aa;
  font-size: 0.9rem;
  font-weight: 500;
}
.request-upload.is-filled strong { color: #f87171; font-weight: 600; }
.request-upload small { color: #52525b; font-size: 0.75rem; }
.request-consent {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.05);
  color: #71717a;
  font-size: 0.75rem;
  line-height: 1.6;
}
.request-consent svg { flex: 0 0 auto; margin-top: 0.1rem; color: #71717a; }
.request-consent p { margin: 0; }
.request-consent a { color: var(--red-hot); }
.request-consent a:hover { text-decoration: underline; }
.request-submit {
  width: 100%;
  min-height: 3.4rem;
  font-family: Orbitron, sans-serif;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 12px 30px rgba(127, 29, 29, 0.25);
}
.request-submit.is-busy { opacity: 0.75; pointer-events: none; }
.request-help {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 2rem 0 0;
  color: #71717a;
  font-size: 0.9rem;
}
.request-help a {
  color: #a1a1aa;
  text-decoration: underline;
}
.request-help a:hover { color: #fff; }
.request-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 1rem;
}
.request-modal[hidden] { display: none !important; }
.request-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.7);
}
.request-modal-panel {
  position: relative;
  width: min(100%, 26rem);
  display: grid;
  gap: 0.85rem;
  justify-items: center;
  text-align: center;
  padding: 1.75rem 1.5rem 1.5rem;
  border-radius: 0.85rem;
  border: 1px solid #27272a;
  background: #09090b;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.request-modal-panel h2 {
  margin: 0;
  font-family: Orbitron, sans-serif;
  font-size: 1.5rem;
  color: #fff;
}
.request-modal-panel p {
  margin: 0;
  color: #a1a1aa;
  font-size: 1rem;
  line-height: 1.55;
}
.request-modal-icon {
  width: 5rem;
  height: 5rem;
  display: grid;
  place-items: center;
  margin: 0.5rem 0;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.2);
  color: #22c55e;
}
.request-modal-panel .btn { min-width: 8rem; }

.contact-page {
  position: relative;
  overflow: hidden;
  padding: 7rem 1rem 5rem;
  min-height: calc(100vh - var(--header));
}
.contact-glow {
  position: fixed;
  width: 31rem;
  height: 31rem;
  border-radius: 999px;
  pointer-events: none;
  z-index: 0;
  filter: blur(120px);
}
.contact-glow-red {
  top: 0;
  right: 0;
  background: rgba(220, 38, 38, 0.05);
}
.contact-glow-blue {
  bottom: 0;
  left: 0;
  background: rgba(37, 99, 235, 0.05);
}
.contact-wrap {
  position: relative;
  z-index: 1;
  width: min(100%, 80rem);
  margin-inline: auto;
}
.contact-hero {
  text-align: center;
  margin-bottom: 3.5rem;
}
.contact-hero h1 {
  margin: 0 0 1.25rem;
  font-family: Orbitron, sans-serif;
  font-size: clamp(2.2rem, 6vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}
.contact-hero h1 span { color: #dc2626; }
.contact-hero p {
  margin: 0 auto;
  max-width: 40rem;
  color: #a1a1aa;
  font-size: 1.125rem;
  line-height: 1.65;
}
.contact-layout {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .contact-layout {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 3rem;
  }
}
.contact-aside { display: grid; gap: 1.75rem; }
.contact-info-card {
  background: rgba(24, 24, 27, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  padding: 1.75rem;
  backdrop-filter: blur(8px);
}
.contact-info-card h2 {
  margin: 0 0 1.35rem;
  font-family: Orbitron, sans-serif;
  font-size: 1.4rem;
  color: #fff;
}
.contact-info-card h2.is-compact {
  font-size: 1.15rem;
  margin-bottom: 0.9rem;
}
.contact-info-list { display: grid; gap: 1.35rem; }
.contact-info-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.contact-info-ico {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: 0.65rem;
}
.contact-info-ico.tone-red {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
}
.contact-info-ico.tone-blue {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
}
.contact-info-row h3 {
  margin: 0;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
}
.contact-info-row p {
  margin: 0.3rem 0 0.45rem;
  color: #a1a1aa;
  font-size: 0.9rem;
  line-height: 1.5;
}
.contact-info-row a {
  color: #ef4444;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9rem;
}
.contact-info-row a:hover { color: #f87171; }
.contact-aside-copy {
  margin: 0 0 1rem;
  color: #a1a1aa;
  font-size: 0.9rem;
  line-height: 1.65;
}
.contact-aside-note {
  margin: 0;
  color: #71717a;
  font-size: 0.75rem;
  font-style: italic;
}
.contact-form-card {
  background: rgba(24, 24, 27, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  padding: 1.75rem;
  backdrop-filter: blur(12px);
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}
@media (min-width: 768px) {
  .contact-form-card { padding: 2.25rem; }
}
.contact-form { display: grid; gap: 1.35rem; }
.contact-form-grid {
  display: grid;
  gap: 1.35rem;
}
@media (min-width: 640px) {
  .contact-form-grid { grid-template-columns: 1fr 1fr; }
}
.contact-field {
  display: grid;
  gap: 0.45rem;
  margin: 0;
}
.contact-field > span:first-child {
  color: #a1a1aa;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-left: 0.15rem;
}
.contact-input {
  position: relative;
  display: block;
}
.contact-input > svg {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: #71717a;
  pointer-events: none;
  transition: color .15s ease;
}
.contact-input:focus-within > svg { color: #ef4444; }
.contact-field input,
.contact-field textarea {
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid #27272a;
  border-radius: 0.55rem;
  color: #fff;
  transition: border-color .15s ease;
}
.contact-field input {
  min-height: 3rem;
  padding-left: 2.5rem;
}
.contact-field textarea {
  min-height: 12.5rem;
  padding: 1rem;
  resize: vertical;
}
.contact-field input:hover,
.contact-field textarea:hover { border-color: #3f3f46; }
.contact-field input:focus,
.contact-field textarea:focus {
  border-color: rgba(239, 68, 68, 0.5);
  outline: none;
  box-shadow: none;
}
.contact-submit {
  width: 100%;
  min-height: 3.4rem;
  font-size: 1.05rem;
  font-weight: 700;
  box-shadow: 0 0 20px rgba(220, 38, 38, 0.3);
}
.contact-submit:hover { box-shadow: 0 0 30px rgba(220, 38, 38, 0.5); }
.contact-submit.is-busy { opacity: 0.75; pointer-events: none; }
.contact-success {
  min-height: 25rem;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.25rem;
  text-align: center;
  padding: 1rem 0;
}
.contact-success-icon {
  width: 6rem;
  height: 6rem;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.2);
  border: 1px solid rgba(34, 197, 94, 0.3);
  box-shadow: 0 0 30px rgba(34, 197, 94, 0.2);
}
.contact-success h2 {
  margin: 0;
  color: #fff;
  font-size: 1.85rem;
}
.contact-success p {
  margin: 0;
  max-width: 28rem;
  color: #a1a1aa;
  font-size: 1.05rem;
  line-height: 1.6;
}

.support-hero h1 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: 0.04em; }
.support-hero h1 span { color: var(--red); }
.support-hero p { max-width: 40rem; margin: 0 auto 1.5rem; color: #a1a1aa; font-family: Rajdhani, sans-serif; font-size: 1.125rem; letter-spacing: 0; }
.support-search { width: min(100%, 42rem); margin: 0 auto; display: flex; align-items: center; gap: 0.5rem; background: #0a0a0a; border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 0.35rem 0.35rem 0.35rem 1rem; }
.support-search label { flex: 1 1 auto; min-width: 0; width: 100%; }
.support-search input { font-size: 1rem; height: 2.6rem; }
.support-search .btn { flex: 0 0 auto; margin-left: auto; height: 40px; min-height: 40px; padding-inline: 1.25rem; font-family: Rajdhani, sans-serif; letter-spacing: 0.02em; }
.support-body { padding-top: 0; }
.support-actions { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: -2rem; margin-bottom: 3rem; }
.support-action { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ico arrow" "title title" "desc desc"; gap: 0.2rem 0.75rem; min-width: 0; background: #0a0a0a; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 1.4rem; }
.support-action:hover { border-color: rgba(239,68,68,.35); }
.support-action .support-ico { grid-area: ico; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 10px; background: #18181b; border: 1px solid rgba(255,255,255,.05); color: var(--red-hot); }
.support-action > .icon { grid-area: arrow; justify-self: end; color: #52525b; }
.support-action strong { grid-area: title; font-family: Rajdhani, sans-serif; font-size: 1.15rem; letter-spacing: 0; }
.support-action em { grid-area: desc; color: #a1a1aa; font-style: normal; font-size: 0.9rem; }
.support-layout { display: grid; gap: 2.5rem; }
.support-layout h2 { display: flex; align-items: center; gap: 0.5rem; font-size: 1.4rem; }
.support-layout h2 .icon-star-fill { color: #eab308; }
.kb-title { margin-top: 2.5rem; }
.kb-title .icon { color: var(--red-hot); }
.support-list { border: 1px solid rgba(255,255,255,.1); border-radius: 12px; overflow: hidden; background: rgba(24,24,27,.2); }
.support-list a { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-top: 1px solid rgba(255,255,255,.05); }
.support-list a:first-child { border-top: 0; }
.support-list a:hover { background: rgba(255,255,255,.04); }
.support-list strong { display: block; font-family: Rajdhani, sans-serif; font-weight: 600; letter-spacing: 0; }
.support-list small { color: #71717a; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.support-list a > .icon { margin-left: auto; color: #52525b; flex: 0 0 auto; }
.mini { width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; background: #27272a; color: #a1a1aa; flex: 0 0 auto; }
.kb-grid { display: grid; gap: 1.25rem; }
.kb-grid article { background: rgba(24,24,27,.2); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 1.4rem; }
.kb-grid h3 { display: flex; align-items: center; gap: 0.6rem; font-family: Rajdhani, sans-serif; font-size: 1.15rem; letter-spacing: 0; }
.kb-grid h3 .icon { color: var(--red-hot); }
.kb-grid p { color: #71717a; min-height: 2.4rem; }
.kb-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.kb-grid a { display: flex; gap: 0.4rem; color: #a1a1aa; }
.kb-grid a:hover { color: #fff; }
.help-card, .status-card { background: #0a0a0a; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 1.5rem; }
.help-card { background: linear-gradient(#18181b, #000); }
.mail-badge { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 10px; background: var(--red); color: #fff; margin-bottom: 1rem; }
.help-card h2 { font-size: 1.25rem; }
.help-card > p { color: #a1a1aa; font-family: Rajdhani, sans-serif; letter-spacing: 0; }
.help-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem; }
.help-row small { display: block; color: #71717a; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.help-row .icon-zap { color: #eab308; }
.send-mail { width: 100%; background: #fff; color: #000; justify-content: center; font-family: Rajdhani, sans-serif; letter-spacing: 0; }
.send-mail:hover { background: #e4e4e7; }
.status-card { margin-top: 1.25rem; }
.status-card h3 { font-family: Rajdhani, sans-serif; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }
.status-card p { display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: #a1a1aa; }
.status-card b { display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 6px; padding: 0.2rem 0.45rem; font-size: 12px; }
.status-card b i { width: 6px; height: 6px; border-radius: 999px; }
.status-card b.tone-operational,
.status-card b:not([class*="tone-"]) { color: #22c55e; background: rgba(34,197,94,.1); }
.status-card b.tone-operational i,
.status-card b:not([class*="tone-"]) i { background: #22c55e; }
.status-card b.tone-degraded { color: #facc15; background: rgba(234,179,8,.12); }
.status-card b.tone-degraded i { background: #facc15; }
.status-card b.tone-outage { color: #f87171; background: rgba(239,68,68,.12); }
.status-card b.tone-outage i { background: #ef4444; }
.status-card b.tone-maintenance { color: #60a5fa; background: rgba(59,130,246,.14); }
.status-card b.tone-maintenance i { background: #3b82f6; }
@media (min-width: 640px) {
  .support-actions { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
  .hub-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .kb-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
  .support-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .support-layout { grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); align-items: start; }
}

.admin-main.wrap-wide { width: auto; max-width: none; margin: 0; padding: 1.5rem 1.5rem 4rem; }
a.btn.compact, button.btn.compact { min-height: 40px; height: 40px; padding: 0 16px; border-radius: 6px; font-family: Rajdhani, sans-serif; letter-spacing: 0.01em; text-transform: none; font-size: 15px; font-weight: 600; box-shadow: none; }
.icon-btn, .inventory button.icon-btn, .inventory button.rocket, .inventory button.eye, .inventory button.code-eye {
  width: 32px; height: 32px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.1); border-radius: 6px; background: transparent; color: #a1a1aa; padding: 0; cursor: pointer;
}
.icon-btn:hover { color: #fff; background: rgba(255,255,255,.05); }
.icon-btn.danger:hover { color: #ef4444; background: rgba(239,68,68,.1); }
.icon-btn[aria-disabled="true"] { opacity: .35; pointer-events: none; }
.inventory h1 { margin: 0; font-size: 1.5rem; }
.inventory-head, .editor-head, .inventory-tools, .editor-title, .pager-tools { display: flex; align-items: center; gap: 0.75rem; }
.inventory-head, .editor-head { flex-wrap: wrap; }
.inventory-head, .editor-head { justify-content: space-between; margin-bottom: 1.5rem; }
.inventory-mode { display: flex; align-items: center; gap: 0.4rem; margin: 0.35rem 0 0; color: #71717a; font-size: 14px; }
.inventory-empty { text-align: center; color: #71717a; padding: 4rem 1rem; border: 1px dashed rgba(255,255,255,.08); border-radius: 12px; background: rgba(24,24,27,.2); }
.inventory { min-width: 0; max-width: 100%; }
.inventory-table { width: 100%; background: rgba(24,24,27,.4); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; overflow: auto; }
.inventory-table table { width: 100%; }
.inventory-table th { background: rgba(255,255,255,.04); font-size: 11px; letter-spacing: 0.08em; }
.inventory-table th.num, .inventory-table td.num { text-align: right; font-family: ui-monospace, monospace; }
.inventory-table th.final, .inventory-table td.final { color: #f87171; font-weight: 700; }
.inventory-table th.center, .inventory-table td.center, .inventory-table th.inventory-actions, .inventory-table td.inventory-actions { text-align: center; }
.inventory-table td.inventory-actions { text-align: right; width: 9.5rem; }
.inventory-table td, .inventory-table th { vertical-align: middle; white-space: nowrap; }
.inventory-table td.name { white-space: normal; }
.inventory-table input { width: auto; min-height: 0; }
.product-id { display: flex; align-items: center; gap: 0.8rem; }
.product-id strong { display: block; color: #fff; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-id small { display: block; color: #71717a; font-family: ui-monospace, monospace; font-size: 10px; }
.thumb, .inventory-card .shot { background: #27272a; border: 1px solid rgba(255,255,255,.1); overflow: hidden; }
.thumb { width: 40px; height: 40px; border-radius: 6px; display: grid; place-items: center; flex: 0 0 auto; }
.thumb img, .inventory-card img { width: 100%; height: 100%; object-fit: cover; }
.lemon { display: flex; align-items: stretch; margin-top: 0.25rem; }
.lemon span { display: grid; place-items: center; width: 22px; background: rgba(234,179,8,.1); color: #eab308; border: 1px solid rgba(234,179,8,.25); border-right: 0; border-radius: 4px 0 0 4px; }
.lemon input { width: 7.5rem; height: 22px; min-height: 22px; padding: 0 0.4rem; border-radius: 0 4px 4px 0; background: rgba(24,24,27,.5); font-family: ui-monospace, monospace; font-size: 10px; color: #facc15; }
.disc, .code { height: 30px; min-height: 30px; padding: 0 0.4rem; background: rgba(24,24,27,.5); }
.disc { width: 4.2rem; text-align: center; }
.disc.on { color: #f87171; font-weight: 700; background: rgba(127,29,29,.15); border-color: rgba(127,29,29,.4); }
.code { width: 100%; max-width: 9rem; font-family: ui-monospace, monospace; font-size: 12px; }
.code.on { color: #60a5fa; background: rgba(30,58,138,.15); }
.row-controls { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.35rem; white-space: nowrap; }
.row-controls form, .inventory-table td.center form { display: inline-flex; margin: 0; }
.inventory button.rocket.live,
.rocket.live {
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.45);
  background: rgba(34, 197, 94, 0.12);
}
.inventory button.rocket.live:hover,
.rocket.live:hover { background: rgba(34,197,94,.22); color: #86efac; }
.inventory button.rocket.draft,
.rocket.draft {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(239, 68, 68, 0.12);
}
.inventory button.rocket.draft:hover,
.rocket.draft:hover { background: rgba(239,68,68,.22); color: #fca5a5; }
.inventory button.eye.on,
.eye.on {
  color: #34d399;
  background: rgba(16,185,129,.12);
  border-color: rgba(16,185,129,.4);
}
.inventory button.eye.off,
.eye.off {
  color: #a1a1aa;
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.14);
}
.inventory button.eye.off:hover,
.eye.off:hover { color: #e4e4e7; border-color: rgba(255,255,255,.28); }
.inventory .code-cell {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}
.inventory .code-cell form[data-inline] { flex: 1; min-width: 0; }
.inventory button.code-eye {
  width: 28px;
  height: 28px;
  min-height: 28px;
  flex: 0 0 auto;
}
.inventory button.code-eye.on {
  color: #34d399;
  border-color: rgba(16,185,129,.35);
  background: rgba(16,185,129,.1);
}
.inventory-cards { display: grid; gap: 1.25rem; }
.inventory-card { background: rgba(24,24,27,.4); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; overflow: hidden; }
.inventory-card .shot { position: relative; aspect-ratio: 16 / 9; }
.inventory-card .meta { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.9rem 1rem 0.4rem; }
.inventory-card .meta span.hot { color: #f87171; }
.inventory-card .lemon { margin: 0 1rem 1rem; }
.sale { position: absolute; top: 0.7rem; right: 0.7rem; background: var(--red); color: #fff; font-size: 12px; font-weight: 700; border-radius: 4px; padding: 0.15rem 0.4rem; }
.hover-actions { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.4rem; background: rgba(0,0,0,.6); opacity: 0; }
.inventory-card:hover .hover-actions { opacity: 1; }
.hover-actions a, .hover-actions button { width: 32px; height: 32px; border: 0; border-radius: 6px; background: #fff; color: #111; display: grid; place-items: center; cursor: pointer; }
.hover-actions button { background: var(--red); color: #fff; }
.inventory-pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: center; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.1); color: #71717a; font-size: 14px; }
.inventory-pager label { display: flex; align-items: center; gap: 0.5rem; text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; }
.inventory-pager select { width: auto; min-height: 32px; padding: 0 0.4rem; background: #18181b; }
.page-count { font-family: ui-monospace, monospace; color: #d4d4d8; }
.product-editor { width: min(100% - 2rem, 64rem); margin: 0 auto 4rem; }
.product-editor h1 { margin: 0; font-size: 1.9rem; }
.editor-title { gap: 1rem; }
.editor-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom: 1.5rem; overflow-x: auto; }
.editor-tabs button { border: 0; border-bottom: 2px solid transparent; background: transparent; color: #71717a; padding: 0.8rem 1.1rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 13px; cursor: pointer; }
.editor-tabs button[aria-selected="true"] { color: #fff; border-bottom-color: var(--red); }
.editor-grid { display: grid; gap: 1.1rem; margin-bottom: 1.1rem; }
.product-editor label { color: #d4d4d8; }
.product-editor input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.product-editor textarea,
.product-editor select { background: #111; border-color: rgba(255,255,255,.1); min-height: 40px; }
.product-editor textarea.editor-short { min-height: 96px; }
.product-editor textarea.editor-urls { min-height: 88px; font-family: ui-monospace, monospace; font-size: 12px; }
.product-editor .with-icon span, .spec-field label, .cloud-add h3 { display: flex; align-items: center; gap: 0.35rem; }
.req { color: var(--red-hot); }
.price-pair, .spec-grid, .media-grid, .cloud-new { display: grid; gap: 1rem; }
.media-card, .license-box, .spec-note { background: rgba(24,24,27,.5); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 1.25rem; margin-bottom: 1.25rem; }
.media-card h2, .cloud-head h2 { display: flex; align-items: center; gap: 0.45rem; font-family: Rajdhani, sans-serif; letter-spacing: 0; font-size: 1.15rem; }
.media-card h2 { color: var(--red-hot); }
.media-card h2.blue, .cloud-head h2 { color: #60a5fa; }
.media-card h2.green { color: #4ade80; }
.media-card h2.gold { color: #facc15; }
.preview { background: #0a0a0a; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; overflow: hidden; display: grid; place-items: center; }
.preview img { width: 100%; height: 100%; object-fit: cover; }
.preview.portrait { aspect-ratio: 2 / 3; }
.preview.landscape { aspect-ratio: 16 / 9; }
.preview.square { aspect-ratio: 1; }
.preview .ph { color: #3f3f46; }

/* Compact product Media tab previews */
.product-editor [data-editor-panel][hidden] { display: none !important; }
#panel-media:not([hidden]) { display: grid; gap: 0.75rem; }
#panel-media .media-card {
  padding: 0.85rem 1rem;
  margin-bottom: 0;
  border-radius: 0.75rem;
}
#panel-media .media-card h2 {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
}
#panel-media .media-grid {
  gap: 0.85rem;
  align-items: start;
}
#panel-media .preview {
  width: 7.5rem;
  max-width: 100%;
  border-radius: 0.55rem;
}
#panel-media .preview.portrait { width: 6.5rem; }
#panel-media .preview.landscape { width: 11rem; }
#panel-media .preview.square { width: 6.5rem; }
#panel-media .preview .ph .icon,
#panel-media .preview .ph svg { width: 18px; height: 18px; }
#panel-media .media-grid > div:last-child {
  display: grid;
  gap: 0.55rem;
  min-width: 0;
}
#panel-media .accent-options {
  margin-top: 0.35rem;
  padding-top: 0.65rem;
  gap: 0.75rem;
}
#panel-media .gallery-grid {
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.75rem;
}
#panel-media .add-shot { font-size: 0.8rem; }
#panel-media .add-shot .icon,
#panel-media .add-shot svg { width: 16px; height: 16px; }

.accent-options { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: end; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.06); }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.8rem; margin-bottom: 1rem; }
.gallery-grid figure, .add-shot { position: relative; aspect-ratio: 16 / 9; margin: 0; background: #111; border: 1px solid rgba(255,255,255,.1); border-radius: 6px; overflow: hidden; }
.gallery-grid figure[draggable="true"] { cursor: grab; }
.gallery-grid figure.is-dragging { opacity: .45; cursor: grabbing; }
.gallery-grid figure.is-drop-target { border-color: rgba(239, 68, 68, .65); box-shadow: 0 0 0 1px rgba(239, 68, 68, .35); }
.gallery-grid figure.is-marmoset {
  border-color: rgba(56, 189, 248, .35);
  background: linear-gradient(160deg, rgba(14, 116, 144, .28), #111);
  cursor: default;
}
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.gallery-grid figure button { position: absolute; inset: 0; margin: auto; width: 32px; height: 32px; border: 0; border-radius: 999px; background: var(--red); color: #fff; opacity: 0; cursor: pointer; }
.gallery-grid figure:hover button { opacity: 1; }
.add-shot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; color: #71717a; border-style: dashed; cursor: pointer; }
.add-shot input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.spec-note { display: flex; align-items: center; gap: 0.5rem; color: #71717a; font-size: 14px; }
.spec-field { background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.05); border-radius: 8px; padding: 0.9rem; }
.spec-field label { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #52525b; }
.cloud-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.cloud-head p, .hint { color: #71717a; font-size: 12px; }
.text-btn { display: inline-flex; align-items: center; gap: 0.35rem; color: #60a5fa; border: 1px solid rgba(96,165,250,.35); border-radius: 6px; padding: 0.35rem 0.7rem; font-size: 13px; }
.cloud-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 0.8rem; align-items: center; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.05); border-radius: 6px; padding: 0.7rem 0.8rem; margin-bottom: 0.6rem; }
.cloud-row strong, .cloud-row small { display: block; }
.cloud-row small { color: #a1a1aa; font-style: italic; }
.cloud-row code { color: #71717a; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cloud-row button { width: 32px; height: 32px; border: 0; background: transparent; color: #71717a; cursor: pointer; }
.cloud-row button:hover { color: #ef4444; }
.cloud-add { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.06); }
.add-file { width: 100%; margin-top: 0.8rem; min-height: 40px; border: 0; border-radius: 6px; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; }
.license-box h3 { font-family: Rajdhani, sans-serif; letter-spacing: 0; font-size: 14px; }
.license-box p { display: flex; justify-content: space-between; color: #d4d4d8; font-size: 13px; }
.lemon-menu { position: relative; }
.lemon-menu summary { width: 40px; height: 40px; display: grid; place-items: center; list-style: none; border: 1px solid rgba(234,179,8,.5); border-radius: 6px; color: #eab308; cursor: pointer; }
.lemon-menu summary::-webkit-details-marker { display: none; }
.lemon-menu div { position: absolute; z-index: 5; top: 46px; left: 0; width: 18rem; background: #09090b; border: 1px solid #27272a; border-radius: 8px; padding: 0.8rem; display: grid; gap: 0.35rem; }
.lemon-menu span { display: flex; justify-content: space-between; font-size: 13px; }
.rich { border: 1px solid rgba(255,255,255,.1); border-radius: 8px; overflow: hidden; background: #0a0a0a; }
.rich-bar { display: flex; flex-wrap: wrap; gap: 0.15rem; align-items: center; padding: 0.4rem; background: #0f0f11; border-bottom: 1px solid rgba(255,255,255,.08); }
.rich-bar button { min-height: 28px; height: 28px; padding: 0 0.45rem; border: 0; border-radius: 4px; background: transparent; color: #a1a1aa; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; }
.rich-bar button[aria-pressed="true"], .rich-bar button:hover { background: rgba(255,255,255,.08); color: #fff; }
.rich-mode { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid rgba(255,255,255,.08) !important; background: #18181b !important; margin-right: 0.25rem; }
.rich-mode[aria-pressed="false"] { background: rgba(239,68,68,.15) !important; color: #f87171 !important; border-color: rgba(239,68,68,.3) !important; }
.rich-sep { width: 1px; height: 18px; background: rgba(255,255,255,.1); margin: 0 0.2rem; }
.rich-grow { flex: 1 1 auto; }
.editor-caption { display: block; margin-bottom: 0.35rem; color: #d4d4d8; }
.rich-visual, textarea.rich-html { min-height: 280px; padding: 1rem 1.1rem; color: #d4d4d8; line-height: 1.6; }
.product-editor .rich-visual, .product-editor textarea.rich-html, .game-editor .rich-visual, .game-editor textarea.rich-html { min-height: 320px; }
.product-editor textarea.rich-html[hidden], .product-editor .rich-visual[hidden], .rich-html[hidden], .rich-visual[hidden] { display: none; }
.rich-visual:focus, .rich-html:focus { outline: none; }
.rich.is-full { position: fixed; inset: 0; z-index: 80; border-radius: 0; display: flex; flex-direction: column; }
.rich.is-full .rich-visual, .rich.is-full .rich-html { flex: 1; min-height: 0; overflow: auto; }
body.rich-fullscreen { overflow: hidden; }
.rich-visual h1, .rich-visual h2, .rich-visual h3 { color: #fff; font-family: Orbitron, sans-serif; }
.rich-visual a { color: #f87171; }
.rich-visual [align="center"], .rich-visual .text-center { text-align: center; }
.rich-visual [align="right"], .rich-visual .text-right { text-align: right; }
.rich-visual [align="justify"], .rich-visual .text-justify { text-align: justify; }
.rich-visual pre { background: rgba(127,29,29,.15); padding: 0.75rem; border-radius: 6px; overflow: auto; }
.games-admin-head, .game-editor-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem; }
.games-admin-head h1, .game-editor-head h1 { display: flex; align-items: center; gap: 0.65rem; margin: 0; font-size: 1.9rem; }
.games-admin-head h1 .icon { color: #ef4444; }
.games-admin-head p, .game-editor-head p { margin: 0.35rem 0 0; color: #71717a; }
.game-editor-head { justify-content: flex-start; align-items: center; }
.games-empty { text-align: center; padding: 4rem 1rem; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(24,24,27,.3); color: #71717a; }
.games-empty h2 { color: #fff; margin: 0.8rem 0 0.4rem; }
.games-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.game-card { background: rgba(24,24,27,.4); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; overflow: hidden; }
.game-card:hover { border-color: rgba(239,68,68,.3); }
.game-shot { position: relative; aspect-ratio: 16 / 9; background: #000; }
.game-shot img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.game-card:hover .game-shot img { opacity: 1; }
.game-shot .ph { position: absolute; inset: 0; display: grid; place-items: center; color: #3f3f46; }
.game-badge { position: absolute; top: 0.55rem; right: 0.55rem; padding: 0.2rem 0.45rem; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.game-badge.live { background: rgba(34,197,94,.2); color: #4ade80; border: 1px solid rgba(34,197,94,.35); }
.game-badge.draft { background: rgba(24,24,27,.85); color: #a1a1aa; border: 1px solid rgba(255,255,255,.1); }
.game-meta { padding: 1rem; }
.game-meta h2 { margin: 0 0 0.35rem; font-size: 1.1rem; }
.game-meta p { display: flex; align-items: center; gap: 0.35rem; margin: 0 0 1rem; color: #71717a; font-size: 12px; }
.game-actions { display: flex; align-items: center; gap: 0.45rem; padding-top: 0.9rem; border-top: 1px solid rgba(255,255,255,.05); }
.game-actions .btn { flex: 1; }
.game-editor-layout { display: grid; gap: 1.5rem; }
.game-panel { background: rgba(24,24,27,.45); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 1.25rem; display: grid; gap: 0.9rem; }
.game-panel h2 { margin: 0; font-size: 1.15rem; }
.game-panel h3 { margin: 0; font-size: 0.95rem; color: #d4d4d8; }
.game-media-grid { display: grid; gap: 1rem; }
.game-media-grid article { display: grid; gap: 0.6rem; }
.game-thumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.game-thumbs .thumb { width: 72px; height: 48px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: #111; }
.game-thumbs .thumb img { width: 100%; height: 100%; object-fit: cover; }
.ghost-upload { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; border: 1px dashed rgba(255,255,255,.2); }
.switch-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-transform: none; letter-spacing: 0; color: #fff; }
.switch-row > span { min-width: 0; flex: 1; }
.switch-row input[type="checkbox"] {
  flex: 0 0 2.75rem;
  width: 2.75rem;
  min-width: 2.75rem;
  max-width: 2.75rem;
  height: 1.55rem;
  min-height: 1.55rem;
  max-height: 1.55rem;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  background: #3f3f46;
  position: relative;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
.switch-row input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.18rem;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  background: #fff;
  transform: translateY(-50%);
  transition: left .15s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.switch-row input[type="checkbox"]:checked { background: #dc2626; border-color: rgba(248,113,113,.55); }
.switch-row input[type="checkbox"]:checked::after { left: 1.35rem; }
.switch-row input[type="checkbox"]:focus-visible { outline: 2px solid rgba(248,113,113,.7); outline-offset: 2px; }
.social-box { display: grid; gap: 0.75rem; padding-top: 0.5rem; border-top: 1px solid rgba(255,255,255,.08); }
.social-box h3 { display: flex; align-items: center; gap: 0.4rem; }
.sticky-panel { position: sticky; top: calc(var(--header) + 1rem); }
@media (min-width: 768px) {
  .games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .game-media-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .games-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .game-editor-layout { grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); align-items: start; }
}
@media (min-width: 1280px) {
  .games-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.lemon-status { min-height: 1rem; color: #a1a1aa; font-size: 12px; }
.lemon-option { display: flex; align-items: center; gap: 0.45rem; font-size: 13px; }
.lemon-option input { width: auto; min-height: 0; }
@media (min-width: 768px) {
  .editor-grid, .spec-grid { grid-template-columns: 1fr 1fr; }
  .media-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  #panel-media .media-grid {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .price-pair, .cloud-new { grid-template-columns: 1fr 1fr; }
  .cloud-new { grid-template-columns: 1fr 1fr 1fr; }
  .inventory-cards { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1200px) {
  .inventory-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.user-admin { width: min(100% - 2rem, 80rem); margin: 0 auto; }
.user-admin [hidden] { display: none !important; }
.user-admin-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.user-admin-head h1 { margin: 0; font-size: 1.9rem; letter-spacing: 0.04em; }
.user-admin-head p, .admin-status { margin: 0.2rem 0 0; color: #71717a; font-size: 14px; }
.user-tabs { display: flex; gap: 0.25rem; width: fit-content; margin-bottom: 1.5rem; padding: 0.25rem; background: #18181b; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; }
.user-tabs a { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 36px; padding: 0 0.9rem; border-radius: 6px; color: #a1a1aa; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.user-tabs a[aria-selected="true"] { background: #dc2626; color: #fff; }
.user-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: 1.5rem; padding: 1rem; background: rgba(24,24,27,.4); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; }
.user-search { position: relative; width: min(100%, 24rem); }
.user-search label { display: flex; align-items: center; gap: 0.5rem; }
.user-search .icon { position: absolute; left: 0.75rem; color: #71717a; }
.user-search input, .user-dialog input, .user-dialog select, .badge-create input, .license-add select {
  width: 100%; min-height: 40px; padding: 0.55rem 0.8rem; border: 1px solid rgba(255,255,255,.15); border-radius: 6px; background: rgba(0,0,0,.4); color: #fff;
}
.user-search input { padding-left: 2.2rem; }
.user-toolbar-actions { display: flex; gap: 0.5rem; }
.user-table-wrap { overflow-x: auto; background: rgba(24,24,27,.4); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; }
.user-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.user-table th { padding: 0.9rem 1rem; text-align: left; color: #a1a1aa; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(255,255,255,.04); border-bottom: 1px solid rgba(255,255,255,.1); }
.user-table td { padding: 0.9rem 1rem; border-top: 1px solid rgba(255,255,255,.05); vertical-align: middle; }
.user-table th.user-actions, .user-table td.user-actions { text-align: right; }
.user-cell { display: flex; align-items: center; gap: 0.75rem; }
.user-cell strong { display: block; color: #fff; font-weight: 600; }
.user-cell small, .user-table .mono { color: #71717a; font-family: ui-monospace, monospace; font-size: 12px; }
.user-avatar { width: 40px; height: 40px; border-radius: 999px; overflow: hidden; display: grid; place-items: center; background: #27272a; color: #a1a1aa; font-weight: 700; flex: none; }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.role-pill { display: inline-flex; padding: 0.2rem 0.45rem; border-radius: 4px; border: 1px solid rgba(59,130,246,.35); background: rgba(59,130,246,.12); color: #60a5fa; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.role-pill.is-admin { border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.12); color: #f87171; }
.user-state { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.user-state.is-active { color: #22c55e; }
.user-state.is-banned { color: #ef4444; }
.user-state.is-patron { color: #f472b6; }
.user-state.is-linked { color: #38bdf8; }
.user-state.muted { color: #71717a; text-transform: none; letter-spacing: 0; font-weight: 600; }
.user-patreon-cell { display: grid; gap: 0.15rem; }
.user-patreon-cell small { color: #a1a1aa; font-family: inherit; font-size: 0.78rem; text-transform: none; letter-spacing: 0; }
.user-dialog { width: min(32rem, calc(100% - 2rem)); padding: 0; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: #18181b; color: #fff; }
.user-dialog.wide { width: min(42rem, calc(100% - 2rem)); }
.user-dialog.license-manage-dialog.wide { width: min(52rem, calc(100% - 2rem)); }
.user-dialog::backdrop { background: rgba(0,0,0,.8); }
.user-dialog header, .user-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.user-dialog header { padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.user-dialog header h2, .badge-create h2, .badge-list h2 { margin: 0; font-size: 1.25rem; }
.user-dialog header p, .license-user { margin: 0.25rem 0 0; color: #d4d4d8; font-size: 13px; }
.user-dialog form, .user-dialog [data-license-slot] { display: grid; gap: 0.9rem; padding: 1.5rem; }
.user-dialog label, .badge-create label { display: grid; gap: 0.35rem; color: #e4e4e7; font-size: 14px; }
.operative-grid { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 1rem; align-items: start; }
.operative-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.avatar-pick { position: relative; width: 80px; height: 80px; border-radius: 999px; overflow: hidden; display: grid; place-items: center; background: #09090b; border: 1px solid rgba(255,255,255,.1); color: #52525b; cursor: pointer; }
.avatar-pick img { width: 100%; height: 100%; object-fit: cover; }
.avatar-pick input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.user-dialog footer { justify-content: flex-end; padding-top: 0.5rem; }
.license-add { padding: 0 0 1rem; border-bottom: 1px solid rgba(255,255,255,.08); display: grid; gap: .65rem; }
.license-product-picker { display: grid; gap: .55rem; }
.license-product-label { color: #e4e4e7; font-size: 14px; font-weight: 600; }
.license-product-row { display: flex; gap: .65rem; align-items: flex-start; }
.license-product-search-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}
.license-product-search-wrap > svg {
  position: absolute; left: .75rem; top: .95rem; color: #71717a; pointer-events: none; z-index: 1;
}
.license-product-search-wrap input[type="search"] {
  width: 100%;
  min-height: 42px;
  padding: .55rem .8rem .55rem 2.2rem;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 8px;
  background: rgba(0,0,0,.4);
  color: #fff;
}
.license-product-search-wrap input[type="search"]:focus {
  outline: none;
  border-color: rgba(239,68,68,.45);
  box-shadow: 0 0 0 3px rgba(239,68,68,.12);
}
.license-product-results {
  position: absolute;
  left: 0; right: 0; top: calc(100% + 4px);
  z-index: 20;
  max-height: 16rem;
  overflow: auto;
  display: grid;
  gap: 2px;
  padding: .35rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  background: #111113;
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
}
.license-product-results[hidden] { display: none !important; }
.license-product-option {
  appearance: none;
  width: 100%;
  display: grid;
  gap: .15rem;
  text-align: left;
  padding: .55rem .65rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #e4e4e7;
  cursor: pointer;
}
.license-product-option:hover,
.license-product-option.is-active {
  background: rgba(239,68,68,.12);
  color: #fff;
}
.license-product-option strong { font-size: .9rem; font-weight: 650; }
.license-product-option small { color: #a1a1aa; font-size: .72rem; }
.license-product-empty {
  padding: .75rem .65rem;
  color: #71717a;
  font-size: .85rem;
}
.license-product-selected {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .65rem .8rem;
  border-radius: 8px;
  border: 1px solid rgba(34,197,94,.28);
  background: rgba(34,197,94,.08);
}
.license-product-selected[hidden] { display: none !important; }
.license-product-selected strong { display: block; color: #fff; font-size: .92rem; }
.license-product-selected small { color: #a1a1aa; font-size: .75rem; }
.license-product-picker.is-picked .license-product-row { display: none; }
.license-list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
}
.license-list-search {
  position: relative;
  flex: 1;
  min-width: 12rem;
  max-width: 22rem;
  margin: 0;
}
.license-list-search svg {
  position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: #71717a; pointer-events: none;
}
.license-list-search input {
  width: 100%;
  min-height: 36px;
  padding: .4rem .7rem .4rem 2rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  background: rgba(0,0,0,.28);
  color: #fff;
}
.license-list-count { margin: 0; color: #71717a; font-size: .78rem; font-weight: 600; }
.license-list { display: grid; gap: 0.85rem; max-height: 28rem; overflow: auto; padding-right: 0.15rem; }
.license-manage-card.is-filtered-out { display: none; }
.license-list article,
.license-manage-card {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(12rem, 0.9fr);
  gap: 1rem;
  align-items: start;
  padding: 1rem 1.05rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(0,0,0,.28);
}
.license-manage-main { display: grid; gap: 0.75rem; min-width: 0; }
.license-manage-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
}
.license-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; background: #27272a; color: #a1a1aa; }
.license-list strong { display: block; color: #fff; font-size: 1rem; }
.license-list code,
.sold-key {
  display: inline-block;
  max-width: 100%;
  margin: 0;
  padding: 0.28rem 0.45rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  background: rgba(255,255,255,.05);
  color: #f4f4f5;
  font-size: 12px;
  font-family: ui-monospace, monospace;
  word-break: break-all;
}
.sold-key.is-empty { color: #a1a1aa; font-style: italic; border-style: dashed; }
.license-state {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  border: 1px solid rgba(34,197,94,.35);
  background: rgba(34,197,94,.1);
  color: #22c55e;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.license-state.is-off { border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.1); color: #f87171; }
.license-ops { display: grid; gap: 0.55rem; justify-items: stretch; }
.license-ops .btn { width: 100%; justify-content: center; }
.license-empty { margin: 0; padding: 3rem 1rem; text-align: center; color: #d4d4d8; border: 1px dashed rgba(255,255,255,.12); border-radius: 8px; }
.license-key-stack { display: grid; gap: 0.4rem; margin: 0; }
.license-key-row {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr);
  gap: 0.55rem;
  align-items: center;
}
.license-key-row dt,
.license-key-row dd { margin: 0; }
.license-key-label {
  color: #a1a1aa;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.license-meta {
  display: block;
  margin-top: 0.2rem;
  color: #d4d4d8;
  font-size: 12px;
  line-height: 1.4;
  opacity: 1;
  font-style: normal;
}
.license-sec-lead { color: #d4d4d8 !important; opacity: 1; font-style: normal; }
.license-security-table { min-width: 980px; }
.license-security-table td { vertical-align: top; }
.license-security-wrap .sold-key { margin-top: 0; }
.license-dupe-banner {
  margin: 0 0 .85rem;
  padding: .7rem .9rem;
  border-radius: .65rem;
  border: 1px solid rgba(251, 191, 36, .35);
  background: rgba(251, 191, 36, .1);
  color: #fbbf24;
  font-size: .88rem;
}
.license-dupe-row td {
  box-shadow: inset 3px 0 0 rgba(251, 191, 36, .85);
}
.license-dupe-tone-0 td { background: rgba(251, 191, 36, .08); }
.license-dupe-tone-1 td { background: rgba(56, 189, 248, .1); box-shadow: inset 3px 0 0 rgba(56, 189, 248, .85); }
.license-dupe-tone-2 td { background: rgba(167, 139, 250, .1); box-shadow: inset 3px 0 0 rgba(167, 139, 250, .85); }
.license-dupe-tone-3 td { background: rgba(52, 211, 153, .1); box-shadow: inset 3px 0 0 rgba(52, 211, 153, .85); }
.license-dupe-tone-4 td { background: rgba(251, 113, 133, .1); box-shadow: inset 3px 0 0 rgba(251, 113, 133, .85); }
.license-dupe-tone-5 td { background: rgba(251, 146, 60, .1); box-shadow: inset 3px 0 0 rgba(251, 146, 60, .85); }
.license-dupe-badge {
  display: inline-flex;
  margin-top: .35rem;
  padding: .12rem .4rem;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fbbf24;
  background: rgba(251, 191, 36, .12);
  border: 1px solid rgba(251, 191, 36, .3);
}
.license-reason-note { margin: 0; color: #e4e4e7; font-size: 12px; line-height: 1.4; }
@media (max-width: 820px) {
  .license-list article,
  .license-manage-card { grid-template-columns: 1fr; }
  .license-product-row { flex-direction: column; }
  .license-product-row .btn { width: 100%; }
}
.danger-text { color: #f87171; }
.badge-layout { display: grid; gap: 1.5rem; }
.badge-create, .badge-list { padding: 1.5rem; background: rgba(24,24,27,.4); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; }
.badge-create { display: grid; gap: 0.9rem; }
.badge-colors { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.badge-colors span { display: flex; gap: 0.5rem; }
.badge-colors input[type="color"] { width: 40px; min-height: 40px; padding: 0.2rem; }
.badge-preview-wrap { color: #71717a; font-size: 12px; }
.badge-preview { display: inline-flex; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.75rem; }
.badge-grid div { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.9rem; border: 1px solid rgba(255,255,255,.06); border-radius: 8px; background: rgba(0,0,0,.2); }
.form-error { margin-bottom: 1rem; color: #fca5a5; }
@media (min-width: 768px) {
  .badge-layout { grid-template-columns: minmax(16rem, 1fr) minmax(0, 2fr); align-items: start; }
}
.back-link, .back-row { display: inline-flex; align-items: center; gap: 0.35rem; color: #a1a1aa; font-size: 14px; }
.back-link:hover { color: #fff; }
.license-admin h1 { display: flex; align-items: center; gap: 0.65rem; }
.license-admin h1 .icon { color: #eab308; }
.license-tabs { display: flex; gap: 0.25rem; margin-bottom: 1.5rem; padding: 0.35rem; background: #18181b; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; }
.license-tabs a { min-height: 36px; padding: 0 0.9rem; display: inline-flex; align-items: center; color: #a1a1aa; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 2px solid transparent; }
.license-tabs a[aria-selected="true"] { color: #fff; border-bottom-color: #dc2626; }
.section-bar { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-end; margin-bottom: 1rem; }
.section-bar h2 { margin: 0; font-size: 1.25rem; letter-spacing: 0; }
.section-bar p, .definition-card .keywords { margin: 0.25rem 0 0; color: #d4d4d8; font-size: 13px; }
.definition-grid { display: grid; gap: 1rem; }
.definition-card { padding: 1.1rem 1.2rem; background: rgba(24,24,27,.5); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; }
.definition-card header { display: flex; justify-content: space-between; gap: 0.75rem; align-items: flex-start; }
.definition-card h3 { margin: 0; font-family: Rajdhani, sans-serif; letter-spacing: 0; font-size: 1.15rem; }
.definition-card .keywords span { color: #eab308; }
.definition-copy { margin: 0.8rem 0 0; padding: 0.8rem; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.05); border-radius: 8px; color: #d4d4d8; font-size: 14px; }
.license-name, .customer-name, .expires { display: inline-flex; align-items: center; gap: 0.4rem; }
.customer-name { display: flex; color: #fff; }
.user-table small { display: block; color: #d4d4d8; font-family: ui-monospace, monospace; font-size: 12px; }
.clip { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #a1a1aa; font-size: 12px; }
.muted { font-style: italic; opacity: 0.45; }
.license-security-wrap .muted,
.license-manage-dialog .muted { opacity: 1; font-style: normal; color: #d4d4d8; }
.text-btn { width: auto; padding: 0 0.55rem; gap: 0.3rem; }
.key-status, .lifetime, .activation-count { display: inline-flex; padding: 0.15rem 0.45rem; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.key-status.is-active, .lifetime { color: #34d399; background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.25); }
.key-status.is-expired { color: #fb923c; background: rgba(251,146,60,.1); border: 1px solid rgba(251,146,60,.25); }
.key-status.is-disabled, .key-status.is-revoked, .key-status.is-refunded, .key-status.is-cancelled, .key-status.is-disputed { color: #f87171; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.25); }
.license-activity { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.25rem; }
.license-activity li { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; font-size: 11px; color: #a1a1aa; }
.license-activity code { font-size: 11px; color: #d4d4d8; }
.license-activity-page .user-admin-head { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: flex-start; }
.license-activity-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.license-activity-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; margin: 0 0 1.25rem; }
.license-activity-summary article { padding: 0.85rem 1rem; border: 1px solid #2a2a30; border-radius: 10px; background: rgba(0,0,0,.25); display: grid; gap: 0.2rem; }
.license-activity-summary span { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #8b8b96; }
.license-activity-summary strong { color: #fff; font-size: 0.95rem; }
.license-activity-summary strong.is-warn { color: #fb923c; }
.license-activity-summary small { color: #71717a; font-size: 12px; }
.admin-notify { position: relative; }
.admin-notify-toggle { position: relative; }
.admin-notify-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #e32b32; color: #fff; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center; }
.admin-notify-panel { position: absolute; top: calc(100% + 8px); right: 0; width: min(22rem, 86vw); border: 1px solid #2a2a30; border-radius: 12px; background: #121215; box-shadow: 0 18px 40px rgba(0,0,0,.45); z-index: 40; overflow: hidden; }
.admin-notify-panel header, .admin-notify-panel footer { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .75rem .9rem; border-bottom: 1px solid #242429; }
.admin-notify-panel footer { border-bottom: 0; border-top: 1px solid #242429; }
.admin-notify-panel header a, .admin-notify-panel footer button { color: #ff454b; background: none; border: 0; cursor: pointer; font: inherit; padding: 0; text-decoration: none; }
.admin-notify-panel ul { list-style: none; margin: 0; padding: 0; max-height: 22rem; overflow: auto; }
.admin-notify-panel li button { width: 100%; text-align: left; display: grid; gap: .2rem; padding: .75rem .9rem; border: 0; border-bottom: 1px solid #1c1c20; background: transparent; color: #d4d4d8; cursor: pointer; }
.admin-notify-panel li.is-unread button { background: rgba(227,43,50,.08); }
.admin-notify-panel li button strong { color: #fff; font-size: .9rem; }
.admin-notify-panel li button span, .admin-notify-panel li button small { color: #8b8b96; font-size: 12px; }
.admin-notify-empty { padding: 1rem .9rem; color: #8b8b96; font-size: .9rem; }
.admin-dashboard-alerts { margin: 0 0 1rem; padding: 1rem; border: 1px solid rgba(251,146,60,.35); border-radius: 12px; background: rgba(154,52,18,.18); }
.admin-dashboard-alerts header { display: flex; justify-content: space-between; gap: .75rem; align-items: center; margin-bottom: .75rem; }
.admin-dashboard-alerts h2 { margin: 0; display: flex; align-items: center; gap: .45rem; font-size: 1rem; color: #fdba74; }
.admin-dashboard-alerts a { color: #ff454b; text-decoration: none; font-size: .9rem; }
.admin-dashboard-alerts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.admin-dashboard-alerts li { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; align-items: flex-start; padding: .75rem; border-radius: 8px; background: rgba(0,0,0,.25); }
.admin-dashboard-alerts strong { display: block; color: #fff; }
.admin-dashboard-alerts p { margin: .25rem 0 0; color: #d4d4d8; font-size: .9rem; }
.admin-notification-list { display: grid; gap: .75rem; }
.admin-notification-card { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; padding: 1rem; border: 1px solid #2a2a30; border-radius: 12px; background: rgba(0,0,0,.25); }
.admin-notification-card.is-unread { border-color: rgba(227,43,50,.45); background: rgba(227,43,50,.08); }
.admin-notification-card h2 { margin: .35rem 0; font-size: 1.05rem; color: #fff; }
.admin-notification-card p { margin: 0; color: #c4c4cc; }
.admin-notification-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; color: #8b8b96; font-size: 12px; text-transform: capitalize; }
.admin-notification-pill { color: #fecaca; background: rgba(227,43,50,.2); border-radius: 999px; padding: 0 .45rem; }
.lemon-integration { display: grid; gap: 1rem; padding: 1rem; border: 1px solid #2a2a30; border-radius: 12px; background: rgba(0,0,0,.22); }
.lemon-integration-head { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; align-items: flex-start; }
.lemon-integration-head h3 { margin: 0 0 .35rem; }
.lemon-env-badge { display: inline-flex; align-items: center; padding: .2rem .55rem; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.lemon-env-badge.is-live { color: #34d399; background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.3); }
.lemon-env-badge.is-test { color: #fbbf24; background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.35); }
.lemon-env-tabs { display: flex; gap: .4rem; }
.lemon-env-tab { min-height: 34px; padding: 0 .85rem; border-radius: 8px; border: 1px solid #3f3f46; background: #18181b; color: #a1a1aa; cursor: pointer; font-weight: 700; }
.lemon-env-tab.is-on { color: #fff; border-color: #e32b32; background: rgba(227,43,50,.18); }
.lemon-product-select { width: 100%; min-height: 11rem; border-radius: 8px; border: 1px solid #3f3f46; background: #0c0c0f; color: #fff; padding: .4rem; }
.lemon-catalog-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.lemon-connection-result { margin: 0; padding: .75rem .9rem; border-radius: 8px; background: #0c0c0f; border: 1px solid #2a2a30; color: #d4d4d8; white-space: pre-wrap; font-size: 12px; }
.lemon-license-maps { display: grid; gap: .75rem; }
.lemon-license-map { padding: .85rem; border: 1px solid #2a2a30; border-radius: 10px; background: rgba(0,0,0,.2); }
.lemon-license-map header { display: flex; justify-content: space-between; gap: .75rem; margin-bottom: .65rem; color: #fff; }
.lemon-map-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem; }
.lemon-price-warn { color: #fb923c !important; }
.lemon-variant-picker { display: grid; gap: .65rem; padding: .9rem; border: 1px solid #2a2a30; border-radius: 10px; background: rgba(0,0,0,.18); }
.lemon-variant-picker h4, .lemon-license-maps h4 { margin: 0; color: #fff; }
.lemon-variant-options { display: grid; gap: .45rem; max-height: 16rem; overflow: auto; }
.lemon-variant-option { display: flex; gap: .7rem; align-items: flex-start; padding: .55rem .7rem; border: 1px solid #2a2a30; border-radius: 8px; background: #121215; cursor: pointer; }
.lemon-variant-option:hover { border-color: rgba(227,43,50,.45); }
.lemon-variant-option input { margin-top: .2rem; }
.lemon-variant-option span { display: grid; gap: .15rem; color: #d4d4d8; }
.lemon-variant-option strong { color: #fff; }
.lemon-variant-option small { color: #8b8b96; font-size: 12px; }
.lemon-variant-picker-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.activation-count { background: #27272a; color: #d4d4d8; letter-spacing: 0; text-transform: none; font-family: ui-monospace, monospace; }
.sold-key { padding: 0.2rem 0.45rem; border-radius: 6px; background: rgba(0,0,0,.25); color: #d4d4d8; }
.expires { color: #fb923c; }
.user-dialog textarea, .override-summary { width: 100%; min-height: 40px; padding: 0.7rem 0.8rem; border: 1px solid rgba(255,255,255,.15); border-radius: 6px; background: rgba(0,0,0,.4); color: #fff; }
.user-dialog small { color: #71717a; font-size: 12px; }
.override-summary span { display: block; color: #71717a; font-size: 13px; }
.discount-admin { display: grid; gap: 1.15rem; width: 100%; }
.discount-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.discount-head-left { display: flex; align-items: flex-start; gap: .85rem; }
.discount-head h1 { margin: 0; display: flex; align-items: center; gap: .55rem; font-size: 1.45rem; }
.discount-head h1 .icon { color: #ef4444; }
.discount-head p { margin: .35rem 0 0; color: #a1a1aa; font-size: .92rem; }
.discount-toolbar, .bulk-bar {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between;
}
.discount-selects { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.discount-selects select {
  min-height: 36px; min-width: 10rem; padding: 0.35rem 0.7rem;
  border: 1px solid #3f3f46; border-radius: 6px; background: rgba(24,24,27,.7); color: #fff;
}
.discount-selects select:disabled { opacity: .45; cursor: not-allowed; }
.discount-filters { display: flex; align-items: center; gap: 0.25rem; color: #a1a1aa; }
.discount-filters a {
  min-height: 32px; padding: 0 0.7rem; border-radius: 6px; color: #a1a1aa;
  display: inline-flex; align-items: center; text-decoration: none;
}
.discount-filters a[aria-current="page"] { background: #27272a; color: #fff; }
.bulk-bar {
  padding: 0.75rem 1rem; border: 1px solid rgba(239,68,68,.25); border-radius: .75rem;
  background: rgba(127,29,29,.25);
}
.bulk-bar label { display: flex; align-items: center; gap: 0.4rem; color: #fecaca; font-size: 13px; }
.bulk-bar input, .percent-field input, .discount-table input[type="text"] { min-height: 32px; padding: 0.3rem 0.5rem; border: 1px solid #3f3f46; border-radius: 6px; background: rgba(24,24,27,.7); color: #fff; }
.discount-table th, .discount-table td { padding: 0.55rem 0.75rem; }
.discount-product { display: flex; align-items: center; gap: 0.55rem; }
.discount-thumb { width: 32px; height: 32px; border-radius: 5px; overflow: hidden; background: #18181b; border: 1px solid rgba(255,255,255,.1); flex: none; }
.discount-thumb img { width: 100%; height: 100%; object-fit: cover; }
.discount-meta { display: grid; gap: 0.05rem; line-height: 1.25; }
.discount-meta strong { font-weight: 600; font-size: 0.9rem; }
.discount-meta small { color: #71717a; }
.discount-prices { display: grid; gap: 0.15rem; }
.discount-price-row {
  display: grid;
  grid-template-columns: 5.5rem auto auto auto;
  align-items: baseline;
  gap: 0.35rem;
  white-space: nowrap;
  line-height: 1.25;
  font-size: 0.85rem;
}
.discount-price-name { color: #a1a1aa; font-size: 0.75rem; }
.discount-price-row s { color: #71717a; text-decoration: line-through; }
.discount-price-row strong { color: #fff; font-weight: 600; }
.discount-price-row em { color: #4ade80; font-style: normal; font-weight: 600; }
.percent-field { display: inline-flex; align-items: center; gap: 0.3rem; color: #a1a1aa; }
.percent-field input { width: 4.5rem; text-align: center; }
.discount-admin [hidden] { display: none !important; }
.switch { position: relative; width: 36px; height: 20px; border: 0; border-radius: 999px; background: #3f3f46; cursor: pointer; }
.switch i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 999px; background: #fff; }
.switch[aria-pressed="true"] { background: #fff; }
.switch[aria-pressed="true"] i { left: 18px; background: #18181b; }
.user-admin [hidden] { display: none !important; }
.support-admin { width: 100%; max-width: none; }
.support-admin-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem; }
.support-admin-head h1 { margin: 0; font-size: 1.9rem; letter-spacing: 0.04em; }
.support-admin-head p { margin: 0.35rem 0 0; color: #71717a; }
.support-tabs { display: flex; flex-wrap: wrap; gap: 0.15rem; margin-bottom: 1.5rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.support-tabs button { min-height: 42px; padding: 0.6rem 1rem; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #a1a1aa; font-family: Rajdhani, sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.support-tabs button[aria-selected="true"] { color: #ef4444; border-bottom-color: #ef4444; }
.support-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.support-card, .support-kb-card, .support-contact-card { position: relative; background: rgba(24,24,27,.35); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 1.1rem; }
.support-card { display: grid; gap: 0.75rem; }
.support-remove { position: absolute; top: 0.55rem; right: 0.55rem; }
.support-card label, .support-row label, .support-kb-card label, .support-contact-card label { display: grid; gap: 0.35rem; color: #d4d4d8; font-size: 13px; }
.support-card input, .support-row input, .support-kb-card input, .support-contact-card input, .support-kb-article input {
  width: 100%; min-height: 40px; padding: 0.55rem 0.7rem; border: 1px solid rgba(255,255,255,.1); border-radius: 6px; background: rgba(0,0,0,.4); color: #fff;
}
.field-label { margin: 0 0 0.45rem; color: #a1a1aa; font-size: 13px; }
.field-label.uppercase { margin-top: 1rem; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #71717a; }
.icon-picker { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.4rem; max-height: 8rem; overflow: auto; padding: 0.5rem; border: 1px solid rgba(255,255,255,.1); border-radius: 8px; background: rgba(24,24,27,.5); }
.icon-choice { display: grid; place-items: center; min-height: 2.2rem; border: 0; border-radius: 6px; background: transparent; color: #a1a1aa; cursor: pointer; }
.icon-choice:hover { background: rgba(255,255,255,.08); color: #fff; }
.icon-choice.on { background: #dc2626; color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
.support-add-tile {
  display: grid; place-items: center; gap: 0.5rem; min-height: 16rem; width: 100%;
  border: 1px dashed rgba(255,255,255,.15); border-radius: 12px; background: rgba(24,24,27,.2); color: #71717a; cursor: pointer;
}
.support-add-tile:hover, .support-add-wide:hover { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.25); color: #fff; }
.support-add-wide {
  display: flex; align-items: center; justify-content: center; gap: 0.45rem; width: 100%; min-height: 48px;
  margin-top: 0.75rem; border: 1px dashed rgba(255,255,255,.2); border-radius: 10px; background: transparent; color: #a1a1aa; cursor: pointer;
}
.support-add-wide.tall { min-height: 72px; }
.support-article-list, .support-kb-list { display: grid; gap: 0.85rem; }
.support-row {
  display: grid; grid-template-columns: 1fr; gap: 0.75rem; align-items: end;
  background: rgba(24,24,27,.35); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 1rem;
}
.support-kb-grid { display: grid; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.support-kb-articles { display: grid; gap: 0.5rem; }
.support-kb-article { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.5rem; align-items: center; }
.text-btn.blue { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.55rem; border: 0; background: transparent; color: #60a5fa; font-size: 12px; cursor: pointer; padding: 0; }
.text-btn.blue:hover { color: #93c5fd; }
.support-contact-card { max-width: 36rem; margin: 0 auto; display: grid; gap: 1rem; }
.support-panel[hidden] { display: none !important; }
@media (min-width: 768px) {
  .definition-grid { grid-template-columns: 1fr 1fr; }
  .support-row { grid-template-columns: 1.4fr 0.8fr 1fr 0.7fr auto; }
  .support-kb-grid { grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr)); }
}

.store-settings { display: grid; gap: 0.85rem; }
.settings-admin {
  display: grid;
  gap: 0.9rem;
  width: 100%;
  max-width: 1080px;
}
.settings-admin-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.settings-admin-head h1 {
  margin: 0;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  font-family: Rajdhani, sans-serif;
  font-weight: 700;
  text-transform: none;
}
.settings-admin-head p { margin: 0.2rem 0 0; color: #8b8b96; font-size: 0.86rem; }
.settings-layout {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr;
  align-items: start;
}
.settings-stack { display: grid; gap: 0.75rem; min-width: 0; }
.settings-stack-tight { display: grid; gap: 0.55rem; }
.store-settings-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.4rem; }
.store-settings-head h1 { display: flex; align-items: center; gap: 0.65rem; margin: 0; font-size: 1.9rem; }
.store-settings-head h1 .icon { color: #ef4444; }
.settings-card {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(12,12,14,.88);
  padding: 0.9rem 1rem;
  display: grid;
  gap: 0.7rem;
}
.settings-card-head {
  display: grid;
  gap: 0.15rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.settings-card-head h2 {
  margin: 0;
  font-size: 0.95rem;
  font-family: Rajdhani, sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #f4f4f5;
}
.settings-card-head p { margin: 0; color: #71717a; font-size: 0.8rem; line-height: 1.35; }
.settings-icon { width: 2.2rem; height: 2.2rem; border-radius: 0.65rem; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.nav-editor-rows { display: grid; gap: 0.65rem; }
.nav-editor-row {
  display: grid;
  grid-template-columns: auto minmax(8rem, 0.9fr) minmax(10rem, 1.2fr) auto;
  gap: 0.65rem;
  align-items: end;
  padding: 0.75rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(0,0,0,.18);
}
.nav-editor-row .nav-editor-toggle { margin: 0 0 0.35rem; padding: 0; border: 0; }
.nav-editor-ops { display: flex; gap: 0.25rem; align-items: center; padding-bottom: 0.15rem; }
.nav-editor-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin-top: 0.85rem;
}
.nav-editor-actions .settings-note { margin: 0; flex: 1 1 14rem; }
@media (max-width: 820px) {
  .nav-editor-row { grid-template-columns: 1fr; }
}
.settings-rows { display: grid; gap: 0; }
.settings-rows .settings-toggle {
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.settings-rows .settings-toggle:last-child { border-bottom: 0; padding-bottom: 0; }
.settings-rows .settings-toggle:first-child { padding-top: 0; }
.settings-toggle strong { display: block; color: #fff; font-size: 0.9rem; font-weight: 600; }
.settings-toggle small { display: block; margin-top: 0.15rem; color: #71717a; font-size: 0.78rem; line-height: 1.35; }
.settings-field { display: grid; gap: 0.28rem; }
.settings-field > span { color: #9a9aa2; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; }
.settings-field small { color: #71717a; font-size: 0.76rem; }
.settings-field input,
.settings-field select {
  min-height: 2.25rem;
  border-radius: 6px;
  background: rgba(0,0,0,.35);
}
.settings-field-row { display: flex; flex-wrap: wrap; gap: 0.85rem 1.25rem; align-items: center; }
.settings-inline { display: grid; gap: 0.4rem; min-width: 10rem; width: auto; }
.settings-inline input { width: 5.5rem; }
.settings-note { margin: 0; color: #71717a; font-size: 0.8rem; line-height: 1.4; }
.settings-meta { margin: 0; color: #8b8b96; font-size: 0.8rem; line-height: 1.4; }
.settings-block {
  display: grid;
  gap: 0.55rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 6px;
  background: rgba(0,0,0,.22);
}
.settings-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.75rem;
}
.settings-block-head strong {
  color: #e4e4e7;
  font-size: 0.86rem;
  font-weight: 600;
}
.settings-block-head a {
  color: #a1a1aa;
  font-size: 0.8rem;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.settings-block-head a:hover { color: #fff; border-color: rgba(239,68,68,.55); }
.settings-help { border-radius: 6px; padding: 0.7rem 0.8rem; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); }
.settings-help h3 { margin: 0 0 0.55rem; color: #d4d4d8; font-size: 0.86rem; font-family: inherit; letter-spacing: 0; text-transform: none; }
.settings-help ol { margin: 0; padding-left: 1.2rem; color: #a1a1aa; display: grid; gap: 0.3rem; font-size: 0.82rem; }
.settings-help-details {
  border-radius: 6px;
  padding: 0.45rem 0.65rem;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  color: #a1a1aa;
  font-size: 0.8rem;
}
.settings-help-details summary { cursor: pointer; color: #d4d4d8; font-weight: 600; }
.settings-help-details ol { margin: 0.45rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.2rem; }
.status-editor { display: grid; gap: 0.55rem; }
.status-editor-row {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: 1fr;
  align-items: center;
}
.status-editor-row input {
  background: #111113;
  color: #fff;
}
.status-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.status-pill {
  position: relative;
  display: inline-flex;
  margin: 0;
  cursor: pointer;
}
.status-pill input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.status-pill span {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.25rem 0.7rem;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.12);
  background: #111113;
  color: #a1a1aa;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
}
.status-pill:hover span { color: #e4e4e7; border-color: rgba(255,255,255,.22); }
.status-pill:has(input:focus-visible) span {
  outline: 2px solid rgba(239,68,68,.55);
  outline-offset: 1px;
}
.status-pill:has(input:checked) span {
  color: #fff;
  border-color: rgba(255,255,255,.28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.status-pill[data-tone="operational"]:has(input:checked) span {
  background: rgba(34,197,94,.16);
  border-color: rgba(34,197,94,.45);
  color: #86efac;
}
.status-pill[data-tone="degraded"]:has(input:checked) span {
  background: rgba(234,179,8,.14);
  border-color: rgba(234,179,8,.45);
  color: #fde047;
}
.status-pill[data-tone="outage"]:has(input:checked) span {
  background: rgba(239,68,68,.16);
  border-color: rgba(239,68,68,.5);
  color: #fca5a5;
}
.status-pill[data-tone="maintenance"]:has(input:checked) span {
  background: rgba(59,130,246,.16);
  border-color: rgba(59,130,246,.45);
  color: #93c5fd;
}
.settings-savebar {
  position: sticky;
  bottom: 0.5rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
  padding: 0.65rem 0 0.1rem;
  background: linear-gradient(180deg, transparent, rgba(5,5,5,.94) 40%);
  z-index: 5;
}
.settings-grid-2 { display: grid; gap: 0.65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .settings-grid-2 { grid-template-columns: 1fr; }
}
.sitemap-base { min-width: min(100%, 22rem); width: 100%; }
.sitemap-base input { width: 100%; max-width: 28rem; }
.sitemap-options {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 6px;
  overflow: hidden;
  background: rgba(0,0,0,.2);
}
.sitemap-option {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid rgba(255,255,255,.05);
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}
.sitemap-option:last-child { border-bottom: 0; }
.sitemap-option:hover { background: rgba(255,255,255,.03); }
.sitemap-option input[type="checkbox"] { margin-top: 0.15rem; }
.sitemap-option strong { display: block; color: #f4f4f5; font-size: 0.84rem; font-weight: 600; }
.sitemap-option small { display: block; margin-top: 0.1rem; color: #71717a; font-size: 0.74rem; line-height: 1.3; }
.sitemap-stats {
  display: grid;
  gap: 0.4rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.sitemap-stats > div {
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 6px;
  padding: 0.45rem 0.35rem;
  background: rgba(0,0,0,.22);
  text-align: center;
}
.sitemap-stats span { display: block; font-size: 1rem; font-weight: 700; color: #fff; line-height: 1.2; }
.sitemap-stats small { color: #71717a; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; }
.sitemap-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.55rem 0.85rem;
}
.sitemap-status p { margin: 0; color: #a1a1aa; font-size: 0.88rem; }
.sitemap-preview { display: grid; gap: 0.4rem; }
.sitemap-preview h3 { margin: 0; font-size: 0.82rem; color: #a1a1aa; letter-spacing: 0; text-transform: none; font-family: inherit; font-weight: 600; }
.sitemap-preview h3 span { color: #71717a; font-weight: 500; }
.sitemap-preview-list {
  max-height: 11rem;
  overflow: auto;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 6px;
  background: rgba(0,0,0,.35);
  padding: 0.45rem 0.55rem;
  display: grid;
  gap: 0.2rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
}
.sitemap-preview-list a { color: #a1a1aa; text-decoration: none; word-break: break-all; }
.sitemap-preview-list a:hover { color: #e4e4e7; }
.sitemap-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; margin: 0; }
.download-purge-form { display: grid; gap: 0.65rem; }
.download-purge-form .purge-dates {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.download-purge-form .purge-dates input[type="date"] {
  width: 100%;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color: #f4f4f5;
  padding: 0.45rem 0.6rem;
  min-height: 2.25rem;
  color-scheme: dark;
}
.download-purge-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; }
.settings-danger-card {
  border-color: rgba(239,68,68,.28);
  background: rgba(40,10,10,.35);
}
.settings-danger-card .settings-note,
.settings-danger-card .settings-toggle small { color: #fca5a5; }
@media (max-width: 720px) {
  .sitemap-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .download-purge-form .purge-dates { grid-template-columns: 1fr; }
}

.home-editor { display: grid; gap: 1.15rem; width: 100%; }
.home-grid-2 { display: grid; gap: 0.85rem; }
.home-feature-grid { display: grid; gap: 0.75rem; }
.home-feature-card {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 0.75rem;
  padding: 0.85rem;
  background: rgba(0,0,0,.22);
  display: grid;
  gap: 0.65rem;
}
.home-hero-preview,
.home-hub-preview {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
}
.home-hero-preview figure,
.home-hub-preview {
  margin: 0;
  aspect-ratio: 16 / 9;
  border-radius: 0.55rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  background: #0a0a0a;
}
.home-hub-preview { grid-template-columns: minmax(0, 18rem); max-width: 18rem; }
.home-hero-preview img,
.home-hub-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-hub-preview .ph { display: grid; place-items: center; color: #52525b; font-size: 0.85rem; height: 100%; }
.home-upload input[type="file"] { font-size: 0.85rem; }

.home-slide-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .65rem; }
.home-slide-card {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  border-radius: .55rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: #0a0a0a;
  cursor: grab;
}
.home-slide-card.is-dragging { opacity: .45; cursor: grabbing; }
.home-slide-card.is-drop-target { outline: 2px solid rgba(239,68,68,.7); outline-offset: 2px; }
.home-slide-card img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.home-slide-handle {
  position: absolute; left: .35rem; top: .35rem; z-index: 2;
  display: grid; place-items: center;
  width: 1.6rem; height: 1.6rem;
  border-radius: .35rem;
  background: rgba(0,0,0,.55);
  color: #e4e4e7;
  pointer-events: none;
}
.home-slide-remove {
  position: absolute; right: .3rem; top: .3rem; z-index: 2;
  display: grid; place-items: center;
  width: 1.6rem; height: 1.6rem;
  border: 0; border-radius: .35rem;
  background: rgba(0,0,0,.6);
  color: #fff;
  cursor: pointer;
}
.home-slide-remove:hover { background: rgba(239,68,68,.85); }
.home-hero-preview [data-hero-empty] { grid-column: 1 / -1; }

.home-media-dialog {
  border: 0; padding: 0; background: transparent;
  max-width: min(920px, calc(100vw - 2rem));
  width: 100%;
}
.home-media-dialog::backdrop { background: rgba(0,0,0,.72); }
.home-media-dialog-card {
  display: grid; gap: .75rem;
  background: #111113;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: .85rem;
  padding: 1rem 1.1rem 1.1rem;
  color: #e4e4e7;
}
.home-media-dialog-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
}
.home-media-dialog-head h2 { margin: 0; font-size: 1.05rem; }
.home-media-dialog-head p { margin: .2rem 0 0; color: #a1a1aa; font-size: .82rem; }
.home-media-crumbs {
  color: #71717a; font-size: .78rem; font-family: ui-monospace, monospace;
}
.home-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: .55rem;
  max-height: min(52vh, 420px);
  overflow: auto;
  padding: .15rem;
}
.home-media-grid .r2-item {
  appearance: none; border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.35); color: #e4e4e7;
  border-radius: .5rem; padding: .35rem; cursor: pointer;
  display: grid; gap: .35rem; text-align: left;
}
.home-media-grid .r2-item:hover { border-color: rgba(239,68,68,.55); }
.home-media-grid .r2-thumb {
  aspect-ratio: 1; border-radius: .35rem; overflow: hidden; background: #0a0a0a;
  display: grid; place-items: center;
}
.home-media-grid .r2-thumb img { width: 100%; height: 100%; object-fit: cover; }
.home-media-grid .r2-thumb-ph { color: #52525b; font-size: .68rem; letter-spacing: .06em; }
.home-media-grid .r2-name {
  font-size: .72rem; color: #a1a1aa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-media-grid .r2-empty { grid-column: 1 / -1; color: #71717a; font-size: .85rem; padding: 1rem 0; }
.home-media-dialog-foot { display: flex; justify-content: flex-end; gap: .45rem; flex-wrap: wrap; }


@media (min-width: 720px) {
  .status-editor-row { grid-template-columns: minmax(0, 1fr) minmax(16rem, auto); }
  .home-grid-2 { grid-template-columns: 1fr 1fr; }
  .home-feature-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 980px) {
  .settings-layout { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 0.85rem; }
}
@media (min-width: 1100px) {
  .home-feature-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-feature-card.compact { grid-template-columns: 1fr; }
}

.admin-main .settings-admin { width: 100%; max-width: 1080px; margin: 0; }

/* Update Manager (Admin → Settings → Updates) */
.updates-admin .settings-admin-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.updates-banner {
  margin: 0 0 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.08);
  color: #fbbf24;
}
.updates-banner strong { display: block; margin-bottom: 0.25rem; color: #fde68a; }
.updates-banner p { margin: 0; color: #d4d4d8; font-size: 0.86rem; line-height: 1.4; }
.updates-banner.is-error {
  border-color: rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
}
.updates-banner.is-error strong { color: #fecaca; }
.updates-banner.is-ok {
  border-color: rgba(74, 222, 128, 0.35);
  background: rgba(74, 222, 128, 0.08);
  color: #86efac;
}
.updates-banner.is-ok strong { color: #bbf7d0; }
.updates-pill.status-deploy-pending,
.updates-pill.status-deploy-queued { border-color: rgba(250, 204, 21, 0.35); color: #fde047; }
.updates-pill.status-deploy-running { border-color: rgba(56, 189, 248, 0.4); color: #7dd3fc; }
.updates-pill.status-deploy-succeeded { border-color: rgba(74, 222, 128, 0.35); color: #86efac; }
.updates-pill.status-deploy-failed,
.updates-pill.status-deploy-cancelled { border-color: rgba(248, 113, 113, 0.35); color: #fca5a5; }
.updates-confirm-form {
  display: grid;
  gap: 0.55rem;
  width: 100%;
}
.updates-confirm-check {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0;
  color: #d4d4d8;
  font-size: 0.84rem;
  line-height: 1.35;
}
.updates-confirm-check input { margin-top: 0.2rem; }
.updates-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #d4d4d8;
}
.updates-pill.is-available {
  border-color: rgba(34, 211, 238, 0.35);
  background: rgba(34, 211, 238, 0.1);
  color: #67e8f9;
}
.updates-pill.is-current {
  border-color: rgba(74, 222, 128, 0.35);
  background: rgba(74, 222, 128, 0.1);
  color: #86efac;
}
.updates-pill.status-ok { border-color: rgba(74, 222, 128, 0.35); color: #86efac; }
.updates-pill.status-error,
.updates-pill.status-unavailable { border-color: rgba(248, 113, 113, 0.35); color: #fca5a5; }
.updates-pill.status-not_configured { border-color: rgba(161, 161, 170, 0.35); color: #a1a1aa; }
.updates-version-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: end;
  margin-bottom: 0.85rem;
}
.updates-version-form label { flex: 1 1 16rem; margin: 0; }
.updates-backup-create {
  margin-bottom: 1rem;
}
.updates-backup-create .btn {
  flex: 0 0 auto;
  align-self: end;
}
.updates-notes {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.65rem;
  padding: 0.85rem 1rem;
  background: rgba(0, 0, 0, 0.18);
  margin-bottom: 0.85rem;
}
.updates-notes h3 {
  margin: 0 0 0.45rem;
  font-size: 0.92rem;
  color: #e4e4e7;
}
.updates-notes-meta {
  margin: 0 0 0.55rem;
  color: #a1a1aa;
  font-size: 0.8rem;
}
.updates-notes-body {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #d4d4d8;
  max-height: 18rem;
  overflow: auto;
}
.updates-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.75rem;
}
.updates-actions .btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
.updates-table { margin-top: 0.75rem; }
.updates-fold { margin-top: 0.75rem; color: #a1a1aa; font-size: 0.84rem; }
.updates-fold summary { cursor: pointer; color: #d4d4d8; }
.updates-ran-list {
  margin: 0.45rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.25rem;
}

.settings-emails-card { margin-top: 1.15rem; }
.settings-emails-list { display: grid; gap: .65rem; }
.settings-email-fold {
  border: 1px solid rgba(255,255,255,.1); border-radius: .75rem; background: rgba(0,0,0,.18);
}
.settings-email-fold > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; padding: .85rem 1rem; color: #e4e4e7; font-weight: 600;
}
.settings-email-fold > summary::-webkit-details-marker { display: none; }
.settings-email-fold > summary::after { content: '+'; color: #a1a1aa; font-weight: 700; margin-left: auto; }
.settings-email-fold[open] > summary::after { content: '?'; }
.settings-email-fold > summary span { display: inline-flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.settings-email-fold > summary em {
  font-style: normal; color: #71717a; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
}
.settings-email-form { display: grid; gap: .75rem; padding: 0 1rem 1rem; }
.settings-email-tokens { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.settings-email-token {
  appearance: none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color: #fda4af;
  border-radius: .45rem;
  padding: .2rem .45rem;
  font: 11px/1.3 ui-monospace, monospace;
  cursor: pointer;
}
.settings-email-token:hover { border-color: rgba(227,43,50,.5); color: #fff; }
.settings-email-test { display: flex; gap: .5rem; align-items: center; margin-top: .75rem; flex-wrap: wrap; }
.settings-email-test input {
  min-width: 14rem;
  border-radius: .55rem;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color: #fff;
  padding: .45rem .65rem;
}
.settings-email-tokens > span {
  color: #71717a; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin-right: .15rem;
}
.settings-email-tokens code {
  border: 1px dashed rgba(255,255,255,.18); background: rgba(0,0,0,.25); color: #a1a1aa;
  border-radius: 999px; padding: .28rem .6rem; font-size: .72rem;
}
.settings-email-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.admin-main .home-editor { width: 100%; max-width: none; margin: 0; }

.games-page { padding-top: calc(var(--header) + 2.5rem); }
.games-showcase-head { text-align: center; margin-bottom: 3.5rem; }
.games-showcase-head h1 { font-size: clamp(2.6rem, 7vw, 4.6rem); font-weight: 900; letter-spacing: -0.04em; margin: 0 0 1rem; text-shadow: 0 0 15px rgba(220,38,38,.3); }
.games-showcase-head h1 span { background: linear-gradient(90deg, #ef4444, #f97316); -webkit-background-clip: text; background-clip: text; color: transparent; }
.games-showcase-head p { margin: 0 auto; max-width: 36rem; color: #d4d4d8; font-size: clamp(1.05rem, 2vw, 1.25rem); font-weight: 400; }
.games-accent-line { display: block; width: 6rem; height: 0.25rem; margin: 1.4rem auto 0; border-radius: 999px; background: #dc2626; box-shadow: 0 0 10px rgba(220,38,38,.8); }
.games-empty-public { text-align: center; max-width: 28rem; margin: 0 auto; padding: 3rem 1.5rem; border: 1px solid rgba(255,255,255,.05); border-radius: 1rem; background: rgba(24,24,27,.25); color: #71717a; }
.games-empty-public .icon { color: #ef4444; opacity: .7; margin: 0 auto 1rem; }
.games-empty-public h2 { margin: 0 0 0.5rem; }
.games-catalog { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.game-tile { display: flex; flex-direction: column; border-radius: 1rem; overflow: hidden; border: 2px solid transparent; background: rgba(24,24,27,.5); transition: transform .35s, border-color .35s, box-shadow .35s; height: 100%; }
.game-tile:hover { transform: translateY(-0.5rem); border-color: rgba(239,68,68,.5); box-shadow: 0 0 30px rgba(220,38,38,.25); }
.game-tile-media { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: #09090b; }
.game-tile-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.game-tile:hover .game-tile-media img { transform: scale(1.08) rotate(1deg); }
.game-tile-media .ph { width: 100%; height: 100%; display: grid; place-items: center; color: #3f3f46; }
.game-tile-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.15), transparent); pointer-events: none; }
.game-tile-badge { position: absolute; top: 1rem; left: 1rem; z-index: 1; padding: 0.3rem 0.55rem; border-radius: 0.35rem; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: rgba(220,38,38,.9); opacity: 0; transform: translateX(-0.75rem); transition: .4s; }
.game-tile:hover .game-tile-badge { opacity: 1; transform: none; }
.game-tile-badge.soon { background: rgba(234,179,8,.9); color: #111; }
.game-tile-body { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.35rem 1.4rem 1.25rem; flex: 1; }
.game-tile-body h2 { margin: 0; font-size: 1.45rem; letter-spacing: 0.02em; }
.game-tile-body p { margin: 0; color: #d4d4d8; font-size: 0.92rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.game-tile-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-top: 0.75rem; padding-top: 0.9rem; border-top: 1px solid rgba(255,255,255,.1); font-size: 0.75rem; color: #a1a1aa; font-family: ui-monospace, monospace; }
.game-tile-cta { color: #ef4444; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.3rem; font-family: Rajdhani, sans-serif; }
.game-tile:hover .game-tile-cta { color: #f87171; }
.game-tile:hover .game-tile-foot { border-color: rgba(239,68,68,.3); }

.game-page { padding: 0; }
.game-hero { position: relative; min-height: 85vh; display: flex; align-items: flex-end; overflow: hidden; background: #18181b; }
.game-hero-bg { position: absolute; inset: 0; background: var(--game-hero, none) center / cover no-repeat; opacity: .9; }
.game-hero-shade { position: absolute; inset: 0; background:
  linear-gradient(to top, #050505 0%, rgba(5,5,5,.45) 45%, transparent 75%),
  linear-gradient(to right, rgba(0,0,0,.65) 0%, rgba(0,0,0,.15) 45%, transparent 70%);
  pointer-events: none; }
.game-hero-content {
  position: relative;
  z-index: 1;
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
  padding-inline: 1rem;
  padding-bottom: clamp(3rem, 8vw, 6rem);
  padding-top: calc(var(--header) + 2rem);
  box-sizing: border-box;
}
.game-back { display: inline-flex; align-items: center; gap: 0.45rem; color: rgba(255,255,255,.8); margin-bottom: 1.4rem; font-weight: 600; }
.game-back:hover { color: #fff; }
.game-hero-copy { max-width: 48rem; display: grid; gap: 1.1rem; }
.game-status-row { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; }
.game-status { display: inline-flex; padding: 0.4rem 0.9rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid; backdrop-filter: blur(8px); }
.game-status.live { color: #86efac; background: rgba(34,197,94,.2); border-color: rgba(34,197,94,.4); }
.game-status.soon { color: #fde047; background: rgba(234,179,8,.2); border-color: rgba(234,179,8,.4); }
.game-release-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; border-radius: 999px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.9); font-size: 0.85rem; }
.game-hero-copy h1 { margin: 0; font-size: clamp(2.8rem, 8vw, 5.5rem); font-weight: 900; letter-spacing: -0.05em; line-height: .95; text-shadow: 0 4px 4px rgba(0,0,0,.5); }
.game-lead { margin: 0; max-width: 36rem; color: rgba(255,255,255,.92); font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.5; border-left: 4px solid #ef4444; padding: 0.35rem 0 0.35rem 1.15rem; background: linear-gradient(90deg, rgba(0,0,0,.4), transparent); border-radius: 0 0.5rem 0.5rem 0; }
.game-hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; padding-top: 0.5rem; }
.game-steam { background: rgba(23,26,33,.9); border: 1px solid rgba(255,255,255,.2); color: #fff; min-height: 3.25rem; padding-inline: 1.5rem; font-weight: 700; }
.game-steam:hover { background: #2a475e; }
.game-countdown-label { width: 100%; margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.game-countdown { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.game-countdown-unit { min-width: 4.4rem; padding: 0.7rem 0.6rem; border-radius: 0.65rem; text-align: center; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(8px); }
.game-countdown-unit strong { display: block; font-family: Orbitron, sans-serif; font-size: 1.5rem; color: #f87171; }
.game-countdown-unit span { font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,.7); }

.game-detail { padding: 4rem 0 5rem; position: relative; z-index: 2; }
.game-detail-grid { display: grid; gap: 3rem; }
.game-detail-main { display: grid; gap: 3.5rem; min-width: 0; }
.game-detail-side { min-width: 0; }
.game-section-title { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 1.25rem; font-size: 1.35rem; letter-spacing: 0.06em; text-transform: uppercase; }
.game-section-title::before { content: ""; width: 0.25rem; height: 1.35rem; border-radius: 999px; background: #dc2626; box-shadow: 0 0 10px rgba(220,38,38,.8); }
.game-trailer { position: relative; aspect-ratio: 16 / 9; border-radius: 0.85rem; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: #000; box-shadow: 0 20px 50px rgba(0,0,0,.45); }
.game-trailer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.game-about { background: rgba(24,24,27,.35); border: 1px solid rgba(255,255,255,.05); border-radius: 1rem; padding: 1.75rem; }
.game-about h1, .game-about h2, .game-about h3 { color: #fff; margin-top: 1rem; }
.game-about h1:first-child, .game-about h2:first-child, .game-about h3:first-child { margin-top: 0; }
.game-about ul, .game-about ol { padding-left: 1.2rem; }
.game-about li { margin-bottom: 0.65rem; }
.game-about strong, .game-about b { color: #fff; }
.game-about em, .game-about i { color: #e4e4e7; }
.game-side-sticky { display: grid; gap: 1.5rem; }
.game-cover { margin: 0; border-radius: 0.85rem; overflow: hidden; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 20px 40px rgba(0,0,0,.4); background: #0a0a0a; }
.game-cover img { width: 100%; height: auto; display: block; transition: transform .7s; }
.game-cover:hover img { transform: scale(1.04); }
.game-info-card { background: rgba(24,24,27,.55); border: 1px solid rgba(255,255,255,.1); border-radius: 0.85rem; padding: 1.35rem; }
.game-info-card h3 { display: flex; justify-content: space-between; align-items: center; margin: 0 0 1rem; padding-bottom: 0.65rem; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 1rem; }
.game-info-card h3 .icon { color: #ef4444; }
.game-info-card dl { margin: 0; display: grid; gap: 0.15rem; }
.game-info-card dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.65rem 0.4rem; border-bottom: 1px solid rgba(255,255,255,.05); border-radius: 0.35rem; }
.game-info-card dl > div:last-child { border-bottom: 0; }
.game-info-card dl > div:hover { background: rgba(255,255,255,.04); }
.game-info-card dt { color: #a1a1aa; font-size: 0.9rem; }
.game-info-card dd { margin: 0; color: #fff; font-weight: 600; text-align: right; font-family: ui-monospace, monospace; font-size: 0.88rem; }
.game-share { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.1); text-align: center; }
.game-share p { margin: 0 0 0.85rem; color: #71717a; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.game-share-links { display: flex; justify-content: center; gap: 0.75rem; }
.game-share-links a { width: 2.5rem; height: 2.5rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.1); display: inline-flex; align-items: center; justify-content: center; color: #a1a1aa; transition: .2s; }
.game-share-links a:hover { color: #fff; border-color: #ef4444; background: rgba(239,68,68,.15); }
.game-detail [data-product-gallery] .pg-stage { border-radius: 0.75rem; }
.game-detail [data-product-gallery] .pg-thumbs { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }

@media (min-width: 640px) {
  .games-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .games-catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .game-detail-grid {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
    align-items: start;
    column-gap: 3rem;
  }
  .game-detail-side {
    position: sticky;
    top: calc(var(--header) + 1.25rem);
    align-self: start;
  }
  .game-side-sticky {
    display: grid;
    gap: 1.5rem;
  }
}
@media (min-width: 1280px) {
  .games-catalog { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.analytics { display: grid; gap: 1.25rem; }
.analytics-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.analytics-title { display: flex; align-items: center; gap: 0.75rem; }
.analytics-title h1 { margin: 0; font-size: 1.9rem; }
.analytics-title p { margin: 0.3rem 0 0; color: #71717a; }
.analytics-period { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0.55rem; border: 1px solid rgba(255,255,255,.08); border-radius: 0.55rem; background: rgba(24,24,27,.7); }
.analytics-period span { color: #71717a; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.analytics-period select { min-height: 2rem; background: #18181b; border-color: #3f3f46; font-size: 0.85rem; }
.analytics-filters { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; padding: 0.85rem 1rem; border: 1px solid rgba(255,255,255,.08); border-radius: 0.85rem; background: rgba(24,24,27,.45); }
.analytics-filters label { display: grid; gap: 0.35rem; min-width: 9rem; }
.analytics-filters label.grow { flex: 1 1 14rem; min-width: 12rem; }
.analytics-filters label span { color: #71717a; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; }
.analytics-filters select,
.analytics-filters input[type="search"],
.analytics-filters input[type="date"] { min-height: 2.35rem; width: 100%; background: #18181b; border: 1px solid #3f3f46; border-radius: 0.5rem; color: #fff; padding: 0.4rem 0.65rem; font-size: 0.85rem; }
.analytics-filters input[type="date"] { min-width: 9.5rem; color-scheme: dark; }
.analytics-filters.tone-orange { border-color: rgba(249,115,22,.25); }
.analytics-filters.tone-green { border-color: rgba(34,197,94,.25); }
.analytics-filters.tone-blue { border-color: rgba(59,130,246,.25); }
.analytics-filters.tone-pink { border-color: rgba(244,114,182,.3); }
.analytics-filter-btn { min-height: 2.35rem; padding: 0 1rem; border: 1px solid rgba(255,255,255,.12); border-radius: 0.5rem; background: rgba(255,255,255,.06); color: #fff; cursor: pointer; font-size: 0.82rem; }
.analytics-filter-btn:hover { background: rgba(255,255,255,.1); }
.analytics-filter-hint { margin: 0; align-self: center; color: #71717a; font-size: 0.78rem; flex: 1 1 12rem; }
.analytics-tabs { display: flex; flex-wrap: wrap; gap: 1.25rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.analytics-tabs button { border: 0; background: transparent; color: #a1a1aa; padding: 0.65rem 0.15rem 0.75rem; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; border-bottom: 2px solid transparent; }
.analytics-tabs button.is-on.tone-orange { color: #f97316; border-bottom-color: #f97316; }
.analytics-tabs button.is-on.tone-green { color: #22c55e; border-bottom-color: #22c55e; }
.analytics-tabs button.is-on.tone-blue { color: #60a5fa; border-bottom-color: #3b82f6; }
.analytics-tabs button.is-on.tone-pink { color: #f472b6; border-bottom-color: #ec4899; }
.analytics-table.sales-wide { grid-template-columns: 5.5rem 1.3fr 1.4fr 0.8fr 5.5rem; }
.analytics-kpis { align-items: stretch; }
.sys-kpi span { display: block; margin-top: 0.35rem; color: #71717a; font-size: 0.78rem; }
.analytics-panel { display: grid; gap: 1.25rem; }
.analytics-panel[hidden],
[data-subpanel][hidden] { display: none !important; }
.analytics-note, .analytics-error { border: 1px solid rgba(255,255,255,.08); border-radius: 0.85rem; padding: 1rem 1.1rem; background: rgba(24,24,27,.4); color: #a1a1aa; }
.analytics-error { text-align: center; border-color: rgba(239,68,68,.25); background: rgba(127,29,29,.12); }
.analytics-error .icon { color: #ef4444; margin: 0 auto 0.6rem; }
.analytics-kpis { display: grid; gap: 0.85rem; grid-template-columns: 1fr; }
.analytics-kpi { display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.15rem; border: 1px solid rgba(255,255,255,.1); border-radius: 0.85rem; background: rgba(24,24,27,.45); }
.analytics-kpi > div > span { display: block; color: #71717a; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.analytics-kpi strong { display: block; margin-top: 0.35rem; font-size: 1.7rem; font-family: Orbitron, sans-serif; color: #fff; }
.analytics-kpi small { display: block; margin-top: 0.35rem; color: #71717a; font-size: 0.78rem; text-transform: none; letter-spacing: 0; }
.kpi-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.55rem; display: inline-flex !important; align-items: center; justify-content: center; border: 1px solid currentColor; flex: 0 0 auto; font-weight: 700; line-height: 1; color: inherit; text-transform: none; letter-spacing: 0; font-size: inherit; }
.kpi-icon .icon { display: block; width: 1.15rem; height: 1.15rem; flex: 0 0 auto; stroke: currentColor; }
.kpi-icon.tone-orange { color: #f97316; background: rgba(249,115,22,.12); }
.kpi-icon.tone-purple { color: #c084fc; background: rgba(168,85,247,.12); }
.kpi-icon.tone-blue { color: #60a5fa; background: rgba(59,130,246,.12); }
.kpi-icon.tone-green { color: #4ade80; background: rgba(34,197,94,.12); }
.kpi-icon.tone-pink { color: #f472b6; background: rgba(236,72,153,.12); }
.kpi-icon.tone-cyan { color: #22d3ee; background: rgba(6,182,212,.12); }
.kpi-icon.tone-zinc { color: #a1a1aa; background: rgba(63,63,70,.25); }
.kpi-icon.tone-white { color: #fff; background: rgba(255,255,255,.06); }
.analytics-subtabs { display: flex; flex-wrap: wrap; gap: 0.35rem; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 0.15rem; }
.analytics-subtabs button { border: 0; background: transparent; color: #a1a1aa; padding: 0.55rem 0.85rem; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; border-bottom: 2px solid transparent; border-radius: 0.4rem 0.4rem 0 0; }
.analytics-subtabs button.is-on { color: #fff; border-bottom-color: #3b82f6; }
.analytics-subtabs.system { gap: 0.35rem; margin-bottom: 0.35rem; }
.analytics-subtabs.system button.is-on { background: rgba(59,130,246,.14); color: #93c5fd; }
.analytics-subtabs .tone-green.is-on { color: #4ade80; border-bottom-color: #22c55e; background: rgba(34,197,94,.1); }

/* System Metrics � simple readable report */
.sys-report { display: grid; gap: 1.75rem; max-width: 1100px; }
.sys-kpis { display: grid; gap: 0.85rem; grid-template-columns: 1fr; }
.sys-kpi { padding: 1.15rem 1.25rem; border: 1px solid rgba(255,255,255,.12); border-radius: 0.75rem; background: rgba(24,24,27,.55); }
.sys-kpi p { margin: 0; color: #d4d4d8; font-size: 0.95rem; font-weight: 500; }
.sys-kpi strong { display: block; margin-top: 0.45rem; color: #fff; font-size: 2.1rem; font-family: Orbitron, sans-serif; line-height: 1.1; }
.sys-kpi span { display: block; margin-top: 0.4rem; color: #a1a1aa; font-size: 0.9rem; }
.sys-kpi.accent { border-color: rgba(34,211,238,.28); background: rgba(6,182,212,.08); }
.sys-block { display: grid; gap: 0.85rem; padding: 1.25rem 1.3rem; border: 1px solid rgba(255,255,255,.1); border-radius: 0.85rem; background: rgba(24,24,27,.4); }
.sys-block h2 { margin: 0; color: #fff; font-size: 1.15rem; font-weight: 650; letter-spacing: 0; text-transform: none; }
.sys-block-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.sys-chart { height: 220px; border-radius: 0.55rem; background: rgba(9,9,11,.35); padding: 0.75rem; }
.sys-chart svg { width: 100%; height: 100%; overflow: visible; }
.sys-empty { margin: 0; color: #a1a1aa; font-size: 0.95rem; padding: 0.5rem 0; }
.sys-country { display: grid; gap: 0.35rem; padding: 0.65rem 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.sys-country:last-of-type { border-bottom: 0; }
.sys-country-top { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.sys-country-top strong { color: #fff; font-size: 1rem; font-weight: 600; }
.sys-country-top b { color: #22d3ee; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.sys-country-bar { height: 0.55rem; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.sys-country-bar > i { display: block; height: 100%; background: linear-gradient(90deg, #22d3ee, #3b82f6); border-radius: inherit; }
.sys-country small { color: #a1a1aa; font-size: 0.85rem; }
.sys-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.98rem; }
.sys-table th { text-align: left; padding: 0.7rem 0.55rem; color: #d4d4d8; font-size: 0.82rem; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.12); }
.sys-table td { padding: 0.8rem 0.55rem; color: #f4f4f5; border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: middle; }
.sys-table tbody tr:hover td { background: rgba(255,255,255,.03); }
.sys-table .rank { width: 2.75rem; color: #a1a1aa; text-align: center; }
.sys-table .name-col { width: auto; text-align: left; overflow-wrap: anywhere; }
.sys-table .sys-num { width: 6.5rem; text-align: center; font-variant-numeric: tabular-nums; font-weight: 650; }
.sys-table .sys-wish { color: #f472b6; }
.sys-table .sys-dl { color: #4ade80; width: 7rem; }
.sys-table.recent .when-col { width: 10rem; text-align: right; font-variant-numeric: tabular-nums; color: #d4d4d8; }
.sys-table.recent .country-col { width: 11rem; text-align: left; }
.sys-table.dl-history { table-layout: auto; }
.sys-table.dl-history .when-col { width: 9.5rem; }
.dl-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  border-radius: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dl-type-badge.is-demo { color: #67e8f9; background: rgba(6,182,212,.15); border: 1px solid rgba(34,211,238,.35); }
.dl-type-badge.is-product { color: #86efac; background: rgba(34,197,94,.12); border: 1px solid rgba(74,222,128,.35); }
.dl-type-badge.is-unknown { color: #d4d4d8; background: rgba(113,113,122,.18); border: 1px solid rgba(161,161,170,.35); }
.dl-ip { font-size: 0.78rem; color: #a1a1aa; }
.sys-pills { display: inline-flex; gap: 0.4rem; }
.sys-pills button { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: #d4d4d8; border-radius: 999px; padding: 0.4rem 0.95rem; font-size: 0.85rem; cursor: pointer; }
.sys-pills button.is-on { border-color: rgba(34,197,94,.5); background: rgba(34,197,94,.15); color: #4ade80; }

@media (min-width: 700px) {
  .sys-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .sys-report { max-width: 1180px; }
  .sys-chart { height: 260px; }
}
.sys-map {
  width: 100%;
  height: min(62vh, 560px);
  min-height: 420px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.sys-map-block { max-width: none; }
@media (min-width: 900px) {
  .sys-map { height: min(68vh, 620px); min-height: 480px; }
}
.sys-map .jvm-container { width: 100% !important; height: 100% !important; }
.sys-map-hint { margin: 0.55rem 0 0; color: #a1a1aa; font-size: 0.85rem; }
.sys-pager {
  display: flex;
  justify-content: flex-end;
  margin-top: 0.85rem;
}
.sys-pager .pagination { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
.sys-pager .page-item .page-link,
.sys-pager .pagination > li > a,
.sys-pager .pagination > li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.55rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  color: #e4e4e7;
  background: rgba(255,255,255,.04);
  text-decoration: none;
  font-size: 0.85rem;
}
.sys-pager .page-item.active .page-link,
.sys-pager .pagination > .active > span,
.sys-pager .pagination > .active > a {
  background: rgba(34, 211, 238, 0.18);
  border-color: rgba(34, 211, 238, 0.45);
  color: #67e8f9;
}
.sys-pager .page-item.disabled .page-link,
.sys-pager .pagination > .disabled > span {
  opacity: 0.4;
  pointer-events: none;
}

.analytics-split { display: grid; gap: 1.15rem; }
.analytics-card { border: 1px solid rgba(255,255,255,.1); border-radius: 0.85rem; background: rgba(24,24,27,.45); padding: 1rem 1.1rem; display: grid; gap: 0.75rem; min-width: 0; }
.analytics-card header { display: grid; gap: 0.2rem; }
.analytics-card header h2 { margin: 0; display: flex; align-items: center; gap: 0.45rem; font-size: 1rem; }
.analytics-card header h2 .icon { color: currentColor; flex: 0 0 auto; }
.analytics-card header p { margin: 0; color: #a1a1aa; font-size: 0.85rem; line-height: 1.35; }
.analytics-area { height: 220px; }
.analytics-area.tall { height: 240px; }
.analytics-area svg { width: 100%; height: 100%; overflow: visible; }
.analytics-mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; border-top: 1px solid rgba(255,255,255,.08); padding-top: 0.85rem; text-align: center; }
.analytics-mini-stats span { display: block; color: #a1a1aa; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.analytics-mini-stats strong { display: block; margin-top: 0.25rem; color: #fff; font-size: 1.1rem; }
.analytics-geo { display: grid; gap: 0.7rem; max-height: 280px; overflow: auto; }
.geo-row { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.82rem; margin-bottom: 0.25rem; }
.geo-row b { color: #60a5fa; font-family: ui-monospace, monospace; }
.geo-bar { height: 0.35rem; background: #27272a; border-radius: 999px; overflow: hidden; }
.geo-bar span { display: block; height: 100%; background: #2563eb; }

.analytics-table { display: grid; grid-template-columns: minmax(0, 1fr) 4.25rem 4.25rem; gap: 0.65rem; padding: 0.6rem 0.7rem; border-radius: 0.45rem; background: rgba(9,9,11,.35); font-size: 0.85rem; color: #d4d4d8; align-items: center; }
.analytics-table.head { background: rgba(255,255,255,.04); color: #a1a1aa; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; }
.analytics-table.sales { grid-template-columns: 5.5rem 1.2fr 1fr 4.5rem; }
.analytics-table.assets { grid-template-columns: minmax(0, 1fr) 5rem 5rem; }
.analytics-table.sales span:last-child,
.analytics-table.sales span:nth-child(2),
.analytics-table.assets span:nth-child(2),
.analytics-table.assets span:last-child { text-align: right; }
.analytics-table b { display: block; color: #fff; font-weight: 600; }
.analytics-table small { display: block; color: #a1a1aa; font-size: 0.75rem; margin-top: 0.1rem; }
.analytics-table .money, .analytics-table .dl { color: #4ade80; }
.analytics-table .wish { color: #f472b6; }
.analytics-stack { display: grid; gap: 1rem; }

@media (min-width: 900px) {
  .analytics-split { grid-template-columns: 1.4fr 1fr; }
}
.analytics-donuts { display: grid; gap: 1.25rem; }
.donut-wrap { position: relative; width: 7.5rem; height: 7.5rem; margin-bottom: 0.6rem; }
.donut-wrap svg { width: 100%; height: 100%; }
.donut-wrap div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
.donut-wrap strong { font-size: 1.2rem; color: #fff; }
.donut-wrap span { font-size: 0.6rem; color: #71717a; letter-spacing: 0.08em; text-transform: uppercase; }
.donut-label { margin: 0 0 0.45rem; color: #a1a1aa; font-size: 0.78rem; }
.legend-row { display: flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; margin-top: 0.25rem; }
.legend-row i { width: 0.45rem; height: 0.45rem; border-radius: 999px; }
.legend-row b { margin-left: auto; color: #71717a; font-family: ui-monospace, monospace; }
.browser-grid > div { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.browser-grid span { border: 1px solid rgba(255,255,255,.08); border-radius: 0.4rem; padding: 0.35rem 0.55rem; font-size: 0.78rem; color: #a1a1aa; }
.browser-grid b { color: #fff; margin-right: 0.25rem; }
.event-grid { display: grid; gap: 0.65rem; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.event-grid > div { border: 1px solid rgba(255,255,255,.08); border-radius: 0.55rem; padding: 0.75rem; background: rgba(9,9,11,.4); }
.event-grid > div.is-hot { box-shadow: inset 0 2px 0 #f97316; }
.event-grid code { display: block; color: #a1a1aa; font-size: 0.72rem; }
.event-grid strong { display: block; margin-top: 0.35rem; font-size: 1.2rem; color: #fff; }
.top-selling { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.65rem; }
.top-selling li { display: flex; justify-content: space-between; gap: 0.75rem; align-items: center; font-size: 0.9rem; }
.top-selling em { font-style: normal; background: rgba(34,197,94,.15); color: #4ade80; border-radius: 999px; padding: 0.15rem 0.55rem; font-size: 0.72rem; }
.glow-green { color: #4ade80; }
@media (min-width: 768px) {
  .analytics-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analytics-kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .analytics-donuts { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .analytics-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .analytics-kpis.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .analytics-split { grid-template-columns: 1.7fr 1fr; align-items: start; }
  .analytics-split.equal { grid-template-columns: 1fr 1fr; }
}

/* Dev Hub Manager */
.hub-admin { display: grid; gap: 1.25rem; }
.hub-admin-head, .hub-editor-head { display: flex; align-items: center; gap: 0.85rem; }
.hub-admin-head h1, .hub-editor-head h1 { margin: 0; font-size: 1.85rem; }
.hub-admin-head p { margin: 0.3rem 0 0; color: #71717a; }
.hub-admin-tabs { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.35rem; border: 1px solid rgba(255,255,255,.1); border-radius: 0.65rem; background: rgba(24,24,27,.55); }
.hub-admin-tabs a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.9rem; border-radius: 0.45rem; color: #a1a1aa; text-decoration: none; font-size: 0.85rem; }
.hub-admin-tabs a.is-on { background: #dc2626; color: #fff; }
.hub-admin-panel { display: grid; gap: 1rem; }
.hub-admin-panel.narrow { max-width: 42rem; }
.hub-admin-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.hub-admin-toolbar h2 { margin: 0; font-size: 1.25rem; }
.hub-admin-table-wrap { border: 1px solid rgba(255,255,255,.1); border-radius: 0.85rem; overflow: auto; background: rgba(24,24,27,.4); }
.hub-admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.hub-admin-table th { text-align: left; padding: 0.9rem 1rem; color: #71717a; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03); }
.hub-admin-table td { padding: 0.95rem 1rem; border-bottom: 1px solid rgba(255,255,255,.05); vertical-align: middle; }
.hub-admin-table tr:last-child td { border-bottom: 0; }
.hub-admin-table b { display: block; color: #fff; }
.hub-admin-table small { display: block; color: #71717a; font-family: ui-monospace, monospace; font-size: 0.75rem; margin-top: 0.15rem; }
.hub-admin-table .right { text-align: right; }
.hub-admin-table .actions { display: flex; justify-content: flex-end; gap: 0.35rem; align-items: center; }
.hub-admin-table .empty { text-align: center; color: #71717a; padding: 2.5rem 1rem; }
.hub-cat-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.hub-cat-pills span { padding: 0.2rem 0.55rem; border-radius: 999px; background: #27272a; border: 1px solid rgba(255,255,255,.08); color: #d4d4d8; font-size: 0.75rem; }
.hub-publish { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-width: 7.5rem; min-height: 2rem; border-radius: 0.45rem; border: 1px solid transparent; cursor: pointer; font-size: 0.8rem; }
.hub-publish.is-live { background: rgba(34,197,94,.12); color: #4ade80; border-color: rgba(34,197,94,.25); }
.hub-publish.is-draft { background: rgba(59,130,246,.12); color: #60a5fa; border-color: rgba(59,130,246,.25); }
.hub-admin-list { display: grid; gap: 0.75rem; }
.hub-comment-card, .hub-category-row { border: 1px solid rgba(255,255,255,.1); border-radius: 0.75rem; padding: 0.9rem 1rem; background: rgba(24,24,27,.4); }
.hub-comment-card header { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.65rem; }
.hub-comment-card strong { color: #fff; }
.hub-comment-card span, .hub-comment-card small { color: #71717a; font-size: 0.8rem; }
.hub-comment-edit textarea { width: 100%; min-height: 4.5rem; }
.hub-comment-actions { display: flex; gap: 0.5rem; margin-top: 0.55rem; }
.danger-text { color: #f87171; }
.hub-inline-form { display: flex; gap: 0.55rem; align-items: center; }
.hub-inline-form.grow { flex: 1; }
.hub-inline-form input { flex: 1; min-height: 2.35rem; }
.hub-category-row { display: flex; gap: 0.55rem; align-items: center; }
.hub-order-btns { display: grid; gap: .2rem; flex: 0 0 auto; }
.hub-order-btns .icon-btn:disabled { opacity: .35; cursor: not-allowed; }
.hub-settings-form { display: grid; gap: 0.9rem; }
.hub-settings-form label { display: grid; gap: 0.35rem; }

.hub-editor { display: grid; gap: 1rem; max-width: 56rem; }
.hub-editor.is-wide { max-width: none; width: 100%; }
.hub-editor.is-wide .rich-visual, .hub-editor.is-wide textarea.rich-html { min-height: 420px; }
.hub-editor-grid { display: grid; gap: 0.85rem; grid-template-columns: 1fr; }
.hub-editor-switches { display: grid; gap: 0.65rem; }
.hub-categories-box { border: 1px solid rgba(255,255,255,.1); border-radius: 0.75rem; padding: 0.9rem 1rem 1rem; margin: 0; }
.hub-categories-box legend { padding: 0 0.35rem; color: #a1a1aa; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }
.hub-cat-toggle { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.hub-cat-toggle label { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.7rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(24,24,27,.5); color: #d4d4d8; cursor: pointer; font-size: 0.82rem; }
.hub-cat-toggle label.is-on { background: rgba(220,38,38,.18); border-color: rgba(220,38,38,.45); color: #fecaca; }
.hub-cat-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.warn { color: #fb923c; font-size: 0.82rem; margin: 0.65rem 0 0; }
.warn.subtle { opacity: .85; }
.hub-cover-row { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: end; }
.hub-cover-row .grow { flex: 1 1 16rem; }
.hub-cover-preview { max-width: 18rem; border-radius: 0.65rem; overflow: hidden; border: 1px solid rgba(255,255,255,.1); }
.hub-cover-preview img { display: block; width: 100%; height: auto; }
.hub-content-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.55rem; }
.hub-editor-foot { display: flex; justify-content: flex-end; }
.ghost-upload { position: relative; overflow: hidden; cursor: pointer; }
.ghost-upload input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
@media (min-width: 768px) {
  .hub-editor-grid { grid-template-columns: 1fr 1fr; }
  .hub-editor-switches { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* Dev Hub public article (parity with original React page) */
.hub-post-main { padding: 0; background: #050505; }
.hub-post-page { background: #050505; min-height: 100vh; padding-bottom: 4rem; padding-top: var(--header); }
.hub-post-hero { position: relative; width: 100%; height: 40vh; min-height: 16rem; overflow: hidden; }
.hub-post-hero img { width: 100%; height: 100%; object-fit: cover; opacity: .8; display: block; }
.hub-post-hero-fade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, transparent, rgba(5,5,5,.5), #050505); pointer-events: none; }
.hub-post-wrap { width: min(72rem, calc(100% - 2rem)); margin: 3rem auto 0; position: relative; z-index: 2; }
.hub-post-wrap.has-hero { margin-top: -8rem; }
.hub-post-card { background: #0a0a0a; border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; padding: 1.5rem; box-shadow: 0 25px 50px rgba(0,0,0,.45); }
.hub-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem 1.25rem; color: #71717a; font-size: 0.875rem; margin-bottom: 2rem; }
.hub-back { display: inline-flex; align-items: center; gap: 0.45rem; color: #71717a; text-decoration: none; }
.hub-back:hover { color: #fff; }
.hub-meta-sep { width: 1px; height: 1rem; background: #27272a; }
.hub-post-cats { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.hub-post-cats span { padding: 0.2rem 0.55rem; border-radius: 0.35rem; background: rgba(69,10,10,.3); border: 1px solid rgba(127,29,29,.5); color: #ef4444; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.hub-post-date { display: inline-flex; align-items: center; gap: 0.4rem; }
.hub-post-heading { display: grid; gap: 2rem; margin-bottom: 2.25rem; align-items: start; }
.hub-post-heading h1 { margin: 0; font-family: Orbitron, sans-serif; font-size: clamp(1.35rem, 2.8vw, 2rem); line-height: 1.25; text-transform: uppercase; letter-spacing: 0.03em; color: #fff; }
.hub-rating-panel { border: 1px solid rgba(255,255,255,.05); border-radius: 0.85rem; background: #0a0a0a; padding: 1.25rem 1.35rem; min-width: 15rem; display: grid; gap: 0.65rem; }
.hub-rating-head { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.hub-rating-head h3 { margin: 0; font-family: Orbitron, sans-serif; color: #fff; font-size: 1.05rem; }
.hub-rating-head strong { display: block; color: #fff; font-size: 1.5rem; line-height: 1; text-align: right; }
.hub-rating-head small { display: block; color: #71717a; font-size: 0.72rem; text-align: right; margin-top: 0.2rem; }
.hub-rating-stars { display: flex; align-items: center; gap: 0.15rem; }
.hub-rating-stars form { margin: 0; }
.hub-star { display: inline-flex; border: 0; background: transparent; color: #3f3f46; padding: 0.2rem; cursor: pointer; transition: transform .15s, color .15s; text-decoration: none; }
.hub-star:hover { transform: scale(1.1); }
.hub-star.is-on { color: #eab308; }
.hub-star.is-mine { box-shadow: 0 0 0 2px rgba(234,179,8,.35); border-radius: 999px; }
.hub-rating-note { margin: 0; color: #71717a; font-size: 0.75rem; }
.hub-rating-note.is-ok { color: #22c55e; }
.hub-rating-note a { color: #ef4444; }
.hub-post-divider { height: 1px; width: 100%; background: rgba(255,255,255,.1); margin-bottom: 2.25rem; }
.hub-post-byline { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.25rem; margin-bottom: 3.5rem; }
.hub-byline-author { display: flex; align-items: center; gap: 1rem; }
.hub-byline-logo { width: 3rem; height: 3rem; border-radius: 999px; object-fit: contain; background: #000; border: 1px solid rgba(255,255,255,.1); padding: 0.2rem; }
.hub-byline-name { margin: 0; color: #fff; font-family: Orbitron, sans-serif; font-weight: 700; letter-spacing: 0.04em; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.hub-byline-name span { background: #dc2626; color: #fff; font-size: 0.62rem; font-weight: 700; padding: 0.15rem 0.4rem; border-radius: 0.25rem; text-transform: uppercase; letter-spacing: 0.06em; box-shadow: 0 8px 18px rgba(127,29,29,.35); }
.hub-byline-studio { margin: 0.15rem 0 0; color: #71717a; font-size: 0.75rem; }
.hub-byline-actions { display: flex; align-items: center; gap: 0.35rem; }
.hub-icon-action { min-width: 2.5rem; height: 2.5rem; padding: 0 0.55rem; border-radius: 0.5rem; border: 0; background: transparent; color: #a1a1aa; display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; cursor: pointer; text-decoration: none; }
.hub-icon-action:hover { background: rgba(255,255,255,.05); color: #fff; }
.hub-icon-action.is-on { color: #ef4444; }
.bp-thanks-count { font-size: 0.75rem; font-weight: 700; line-height: 1; }
.bp-thanks-btn {
  position: relative;
  overflow: visible;
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 2.5rem; padding: .45rem .85rem; border-radius: .7rem;
  border: 1px solid rgba(244,114,182,.35); background: rgba(244,114,182,.1);
  color: #f9a8d4; font: inherit; font-weight: 700; font-size: .88rem;
  cursor: pointer; text-decoration: none;
}
.bp-thanks-btn:hover { background: rgba(244,114,182,.18); color: #fff; border-color: rgba(244,114,182,.55); }
.bp-thanks-btn.is-on { background: rgba(239,68,68,.18); border-color: rgba(239,68,68,.5); color: #fca5a5; }
.bp-thanks-btn.is-static { cursor: default; }
.bp-thanks-btn .bp-thanks-count {
  min-width: 1.35rem; height: 1.35rem; padding: 0 .35rem; border-radius: 999px;
  display: inline-grid; place-items: center; background: rgba(0,0,0,.35); color: #fff;
}

.hub-comments-block { width: min(72rem, calc(100% - 2rem)); margin: 4rem auto 0; }
.hub-comments-inner { display: grid; gap: 1.75rem; }
.hub-comments-head { display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 1rem; }
.hub-comments-head .icon { color: #ef4444; }
.hub-comments-head h2 { margin: 0; font-family: Orbitron, sans-serif; font-size: 1.5rem; color: #fff; }
.hub-comments-compose-card { background: #0a0a0a; border: 1px solid rgba(255,255,255,.1); border-radius: 0.85rem; padding: 1.35rem; }
.hub-comments-compose { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.hub-comments-compose-fields { display: grid; gap: 0.85rem; }
.hub-comments-compose-fields textarea { min-height: 6.5rem; background: rgba(0,0,0,.4); }
.hub-comments-compose-fields .btn { justify-self: end; }
.hub-comment-avatar { position: relative; width: 2.5rem; height: 2.5rem; border-radius: 999px; background: #27272a; border: 1px solid rgba(255,255,255,.1); display: inline-flex; align-items: center; justify-content: center; overflow: visible; color: #71717a; flex: 0 0 auto; }
.hub-comment-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px; }
.hub-admin-badge { position: absolute; top: -0.35rem; right: -0.35rem; width: 1rem; height: 1rem; border-radius: 999px; background: #dc2626; color: #fff; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #050505; }
.hub-comments-login { text-align: center; padding: 1.5rem 1rem; border: 1px dashed rgba(255,255,255,.1); border-radius: 0.65rem; background: rgba(255,255,255,.03); }
.hub-comments-login p { margin: 0 0 1rem; color: #a1a1aa; }
.hub-comments-list { display: grid; gap: 1.25rem; }
.hub-comment-row { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.hub-comment-bubble { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.05); border-radius: 0.65rem; padding: 1rem; }
.hub-comment-bubble header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-bottom: 0.45rem; }
.hub-comment-name { color: #d4d4d8; font-size: 0.875rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.4rem; }
.hub-comment-name em { font-style: normal; display: inline-flex; align-items: center; gap: 0.25rem; background: rgba(220,38,38,.2); color: #f87171; border: 1px solid rgba(239,68,68,.3); border-radius: 0.25rem; padding: 0.1rem 0.4rem; font-size: 0.62rem; text-transform: uppercase; font-weight: 700; }
.hub-comment-bubble small { color: #71717a; font-size: 0.75rem; }
.hub-comment-bubble p { margin: 0; color: #d4d4d8; font-size: 0.9rem; line-height: 1.65; white-space: pre-wrap; }
.hub-comments-empty { margin: 0; text-align: center; color: #52525b; font-style: italic; padding: 2.5rem 1rem; border: 1px dashed rgba(255,255,255,.05); border-radius: 0.85rem; }
.hub-post-return { width: min(72rem, calc(100% - 2rem)); margin: 3rem auto 0; text-align: center; }
.btn.outline-muted { background: transparent; border: 1px solid rgba(255,255,255,.1); color: #a1a1aa; }
.btn.outline-muted:hover { color: #fff; background: rgba(255,255,255,.05); }
.btn.outline-red { background: transparent; border: 1px solid #dc2626; color: #ef4444; }
.btn.outline-red:hover { background: #dc2626; color: #fff; }

.article-content { font-family: Rajdhani, sans-serif; color: #d4d4d8; max-width: none; }
.article-content h1, .article-content h2, .article-content h3, .article-content h4 { font-family: Orbitron, sans-serif; color: #fff; margin-top: 2.5em; margin-bottom: 1em; line-height: 1.25; }
.article-content h1 { font-size: 1.9em; }
.article-content h2 { border-bottom: 1px solid rgba(220,38,38,.3); padding-bottom: 0.5em; font-size: 1.8em; }
.article-content h3 { font-size: 1.35em; }
.article-content p { font-size: 1.1em; line-height: 1.8; margin: 0 0 1.5em; color: #d4d4d8; }
.article-content strong { color: #ef4444; font-weight: 600; }
.article-content a { color: #ef4444; text-decoration: none; border-bottom: 1px dashed #ef4444; transition: all .2s; }
.article-content a:hover { color: #fff; border-bottom-style: solid; }
.article-content ul { list-style: none; padding-left: 1em; border-left: 2px solid rgba(220,38,38,.3); margin: 2em 0; }
.article-content li { margin-bottom: 0.8em; padding-left: 1em; position: relative; }
.article-content li::before { content: ">"; position: absolute; left: -1.4em; color: #ef4444; font-family: ui-monospace, monospace; }
.article-content ol { padding-left: 1.4em; margin: 2em 0; }
.article-content blockquote { background: rgba(255,255,255,.03); border-left: 4px solid #ef4444; padding: 1.5em; margin: 2em 0; font-style: italic; color: #a1a1aa; }
.article-content pre { background: #0f0f11; border: 1px solid #333; padding: 1.5em; border-radius: 4px; overflow-x: auto; margin: 2em 0; }
.article-content code { background: rgba(239,68,68,.1); color: #ef4444; padding: 0.2em 0.4em; border-radius: 3px; font-family: 'Courier New', monospace; }
.article-content pre code { background: transparent; color: inherit; padding: 0; }
.article-content img { border: 1px solid #333; border-radius: 4px; margin: 2em 0; max-width: 100%; height: auto; box-shadow: 0 0 20px rgba(0,0,0,.5); display: block; }
.article-content .blueprintue-embed,
.article-content .youtube-embed,
.rich-visual .blueprintue-embed,
.rich-visual .youtube-embed {
  margin: 2em 0;
  border: 1px solid #333;
  border-radius: 4px;
  overflow: hidden;
  background: #0a0a0a;
  box-shadow: 0 0 20px rgba(0,0,0,.5);
}
.article-content .blueprintue-embed iframe,
.article-content .youtube-embed iframe {
  display: block;
  width: 100%;
  height: min(70vh, 700px);
  min-height: 420px;
  border: 0;
  background: #111;
}
.article-content .youtube-embed iframe {
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 0;
}
.rich-visual .blueprintue-embed,
.rich-visual .youtube-embed {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
  padding: 1.25rem;
  background:
    linear-gradient(135deg, rgba(220,38,38,.12), transparent 40%),
    repeating-linear-gradient(0deg, transparent, transparent 11px, rgba(255,255,255,.04) 11px, rgba(255,255,255,.04) 12px),
    repeating-linear-gradient(90deg, transparent, transparent 11px, rgba(255,255,255,.04) 11px, rgba(255,255,255,.04) 12px),
    #111;
  color: #fecaca;
  font-family: Orbitron, sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  user-select: none;
}
.rich-visual .blueprintue-label,
.rich-visual .youtube-label { pointer-events: none; }
.rich-visual .youtube-embed {
  background:
    linear-gradient(135deg, rgba(239,68,68,.18), transparent 45%),
    #111;
  color: #fecaca;
}
.bp-content-block { margin: 1rem 0 1.25rem; }
.bp-content-hint { margin: .55rem 0 0; font-size: .78rem; }
.bp-create-form .rich { border-color: rgba(255,255,255,.12); }
.article-content figure { margin: 2em 0; }
.article-content figcaption { color: #71717a; font-size: 0.9em; margin-top: 0.5em; }
.article-content table { width: 100%; border-collapse: collapse; margin: 2em 0; background: rgba(24,24,27,.65); border: 1px solid rgba(255,255,255,.08); border-radius: 0.5rem; overflow: hidden; }
.article-content th, .article-content td { padding: 0.85rem 1rem; border-bottom: 1px solid rgba(255,255,255,.08); text-align: left; vertical-align: top; }
.article-content th { color: #fff; background: rgba(255,255,255,.04); font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; }
.article-content tr:last-child td { border-bottom: 0; }
.article-content td:first-child { color: #ef4444; font-weight: 600; }
@media (min-width: 768px) {
  .hub-post-card { padding: 3rem; }
}
@media (min-width: 1024px) {
  .hub-post-heading { grid-template-columns: minmax(0, 1fr) auto; }
}




/* ===== User Profile ===== */
.profile-main { padding-top: calc(var(--header) + 1.5rem); }
.profile-page { max-width: 72rem; margin: 0 auto; padding: 0 1rem 3rem; }
.profile-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.75rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.profile-identity { display: flex; align-items: center; gap: 1.25rem; min-width: 0; }
.profile-avatar { position: relative; width: 6rem; height: 6rem; border-radius: 999px; overflow: visible; background: #18181b; border: 2px solid #dc2626; box-shadow: 0 0 20px rgba(220,38,38,.2); flex-shrink: 0; display: grid; place-items: center; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px; }
.profile-avatar > span:not(.patron-badge) { font-family: Orbitron, sans-serif; font-size: 1.75rem; color: #71717a; font-weight: 700; }
.profile-name-row { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.profile-name-row h1 { margin: 0; font-family: Orbitron, sans-serif; font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: .04em; color: #fff; }
.profile-badge { display: inline-flex; align-items: center; gap: .25rem; background: #dc2626; color: #fff; padding: .15rem .45rem; border-radius: .25rem; font-size: 10px; font-weight: 700; text-transform: uppercase; }
.profile-sub { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; color: #a1a1aa; font-size: .875rem; margin-top: .35rem; }
.profile-sub span { display: inline-flex; align-items: center; gap: .35rem; }
.profile-dot { width: .25rem; height: .25rem; border-radius: 999px; background: #52525b; }
.profile-role { padding: .15rem .45rem; border-radius: .25rem; font-size: 10px; font-weight: 700; text-transform: uppercase; border: 1px solid rgba(59,130,246,.5); background: rgba(30,58,138,.2); color: #60a5fa; }
.profile-role.admin { border-color: rgba(239,68,68,.5); background: rgba(127,29,29,.2); color: #f87171; }
.profile-logout { border: 1px solid rgba(255,255,255,.1); }
.profile-logout:hover { background: rgba(127,29,29,.35); color: #f87171; border-color: rgba(239,68,68,.45); }
.profile-alert { margin-bottom: 1rem; }
.profile-alert.error { border-color: rgba(239,68,68,.4); color: #fca5a5; }
.profile-alert .inline-form { display: inline; margin-left: .5rem; }
.profile-tabs { display: flex; flex-wrap: wrap; gap: .5rem; padding: .35rem; background: rgba(24,24,27,.5); border: 1px solid rgba(255,255,255,.1); border-radius: .75rem; margin-bottom: 1.5rem; }
.profile-tab { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1rem; border-radius: .5rem; border: 0; background: transparent; color: #a1a1aa; font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; cursor: pointer; transition: .15s ease; text-decoration: none; }
.profile-tab:hover { color: #fff; background: rgba(255,255,255,.05); }
.profile-tab.active { background: #dc2626; color: #fff; }
.profile-panel { display: grid; gap: 1.25rem; }
.profile-panel[hidden] { display: none !important; }
.profile-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; }
.profile-stat { background: rgba(24,24,27,.4); border: 1px solid rgba(255,255,255,.1); border-radius: .9rem; padding: 1.35rem; }
.profile-stat span { display: block; color: #71717a; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin-bottom: .5rem; }
.profile-stat strong { display: block; font-family: Orbitron, sans-serif; font-size: 1.85rem; color: #fff; }
.profile-stat strong.age { font-size: 1.2rem; }
.profile-card { background: rgba(24,24,27,.4); border: 1px solid rgba(255,255,255,.1); border-radius: .9rem; padding: 1.5rem; }
.profile-card.sticky { position: sticky; top: 5.5rem; }
.profile-card h2, .profile-card h3 { margin: 0 0 1rem; color: #fff; display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; }
.profile-card h2 svg, .profile-card h3 svg { color: #ef4444; }
.profile-card h3 svg[data-icon=key], .profile-license-form + nothing { color: #eab308; }
.profile-card .muted, .profile-settings .muted { color: #71717a; font-size: .875rem; margin: 0 0 1rem; }
.profile-security { margin: 0; display: grid; gap: .75rem; }
.profile-security > div { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.profile-security dt { color: #71717a; }
.profile-security dd { margin: 0; color: #a1a1aa; }
.profile-security dd.ok { color: #22c55e; font-weight: 700; }
.profile-security dd.warn { color: #f59e0b; font-weight: 700; }
.profile-security dd.mono, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; word-break: break-all; }

/* My Library ? toolbar + compact grid / SFX rows */
.profile-library { display: grid; gap: 1.35rem; }
.profile-library-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: .85rem 1rem;
  padding-bottom: .25rem;
}
.profile-library-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  min-width: 0;
  flex: 1;
}
.profile-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .7rem;
  border-radius: .4rem;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(24,24,27,.45);
  color: #a1a1aa;
  font-size: .8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.profile-filter-chip span {
  font-size: .68rem;
  font-weight: 700;
  color: #71717a;
  background: rgba(0,0,0,.35);
  padding: .1rem .35rem;
  border-radius: .25rem;
}
.profile-filter-chip:hover { color: #fff; border-color: rgba(255,255,255,.22); }
.profile-filter-chip.active {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}
.profile-filter-chip.active span { background: rgba(0,0,0,.25); color: #fecaca; }

.profile-add-license {
  position: relative;
  flex-shrink: 0;
}
.profile-add-license > summary {
  list-style: none;
  cursor: pointer;
}
.profile-add-license > summary::-webkit-details-marker { display: none; }
.profile-add-license-toggle { gap: .4rem; }
.profile-add-license-panel {
  position: absolute;
  right: 0;
  top: calc(100% + .45rem);
  z-index: 20;
  width: min(22rem, calc(100vw - 2rem));
  padding: 1rem;
  border-radius: .75rem;
  border: 1px solid rgba(255,255,255,.12);
  background: #121215;
}
.profile-add-license-panel .muted {
  margin: 0 0 .75rem;
  font-size: .8rem;
  color: #71717a;
}
.profile-add-license-error {
  margin: .55rem 0 0;
  color: #f87171;
  font-size: .8rem;
}
.profile-license-form { display: grid; gap: .65rem; }
.profile-license-form input {
  width: 100%;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: .5rem;
  padding: .65rem .8rem;
  color: #fff;
  font-family: ui-monospace, monospace;
  font-size: .85rem;
}
.profile-activate {
  width: 100%;
  background: rgba(255,255,255,.1);
  color: #fff;
  justify-content: center;
}
.profile-activate:hover { background: rgba(255,255,255,.18); }

.profile-library-main { min-width: 0; }
.profile-group { margin-bottom: 1.5rem; }
.profile-group-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-bottom: .55rem;
  margin-bottom: .85rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.profile-group-head h3 {
  margin: 0;
  color: #fff;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.profile-group-head h3 svg { color: #71717a; }
.profile-group-head span {
  background: #27272a;
  color: #a1a1aa;
  font-size: .7rem;
  padding: .15rem .55rem;
  border-radius: .3rem;
}
.profile-group-more {
  margin-left: auto;
  color: #a1a1aa;
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
}
.profile-group-more:hover { color: #f87171; }
.profile-library-pager {
  margin-top: 1.25rem;
  justify-content: center;
}
.profile-library-pager .pagination {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.profile-library-pager .pagination > li > a,
.profile-library-pager .pagination > li > span {
  display: inline-block;
  padding: .4rem .7rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: .4rem;
  color: #a1a1aa;
  text-decoration: none;
  background: rgba(24,24,27,.45);
}
.profile-library-pager .pagination > .active > span,
.profile-library-pager .pagination > .active > a {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
}
.profile-library-pager .pagination > .disabled > span {
  opacity: .4;
}

.profile-asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: .85rem;
}
.profile-asset-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(24,24,27,.4);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: .75rem;
  overflow: hidden;
  transition: border-color .15s;
  content-visibility: auto;
  contain-intrinsic-size: 280px;
}
.profile-asset-card:hover { border-color: rgba(255,255,255,.22); }
.profile-asset-card.is-blocked { opacity: .78; }
.profile-asset-card-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #18181b;
  display: grid;
  place-items: center;
  color: #52525b;
}
.profile-asset-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-asset-status {
  position: absolute;
  top: .45rem;
  left: .45rem;
  padding: .12rem .35rem;
  border-radius: .25rem;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  border: 1px solid;
}
.profile-asset-status.on {
  background: rgba(16,185,129,.2);
  border-color: rgba(16,185,129,.5);
  color: #34d399;
}
.profile-asset-status.off {
  background: rgba(249,115,22,.2);
  border-color: rgba(249,115,22,.5);
  color: #fb923c;
}
.profile-asset-card-body {
  display: grid;
  gap: .35rem;
  padding: .85rem .9rem 1rem;
  flex: 1;
}
.profile-asset-card-body h4 {
  margin: 0;
  color: #fff;
  font-size: .95rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.profile-asset-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  color: #a1a1aa;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 0;
}
.profile-asset-path span:first-child {
  background: #27272a;
  padding: .1rem .35rem;
  border-radius: .25rem;
  font-weight: 700;
}
.profile-asset-lic-inline {
  text-transform: none;
  letter-spacing: 0;
  color: #e4e4e7;
  font-weight: 600;
}
.profile-key-details {
  margin: .15rem 0 0;
}
.profile-key-details > summary {
  cursor: pointer;
  color: #d4d4d8;
  font-size: .72rem;
  font-weight: 600;
  list-style: none;
}
.profile-key-details > summary::-webkit-details-marker { display: none; }
.profile-key-details > summary:hover { color: #fafafa; }
.profile-license-key {
  margin: .35rem 0 0;
  color: #f4f4f5;
  font-size: .78rem;
  word-break: break-all;
}
.profile-asset-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .45rem;
}
.profile-asset-lic {
  display: flex;
  align-items: center;
  gap: .35rem;
  color: #d4d4d8;
  font-size: .8rem;
  margin: .35rem 0 0;
}
.profile-asset-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .85rem; }

/* Library SFX audio rows */
.profile-sfx-list {
  display: grid;
  gap: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: .75rem;
  overflow: hidden;
  background: rgba(10,10,10,.55);
}
.profile-sfx-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(6rem, 1.2fr) auto minmax(10rem, 1fr) auto;
  gap: .75rem;
  align-items: center;
  padding: .7rem .9rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  transition: background .15s;
  content-visibility: auto;
  contain-intrinsic-size: 72px;
}
.profile-sfx-row:last-child { border-bottom: 0; }
.profile-sfx-row:hover,
.profile-sfx-row.is-playing { background: rgba(220,38,38,.08); }
.profile-sfx-row.is-blocked { opacity: .78; }
.profile-sfx-meta { min-width: 0; }
.profile-sfx-title-row {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
}
.profile-sfx-title-row h4 {
  margin: 0;
  color: #f4f4f5;
  font-size: .92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-sfx-title-row .profile-asset-status {
  position: static;
  flex-shrink: 0;
}
.profile-sfx-sub {
  margin: .15rem 0 0;
  font-size: .72rem;
  color: #71717a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-sfx-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  justify-content: flex-end;
}
.profile-sfx-remove button {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: .35rem;
  border: 0;
  background: transparent;
  color: #52525b;
  cursor: pointer;
}
.profile-sfx-remove button:hover { color: #ef4444; background: rgba(239,68,68,.1); }
@media (max-width: 900px) {
  .profile-sfx-row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "play meta"
      "wave wave"
      "time actions";
    align-items: start;
  }
  .profile-sfx-row .sfx-play { grid-area: play; align-self: center; }
  .profile-sfx-row .sfx-row-wave { grid-area: wave; }
  .profile-sfx-row .sfx-row-time {
    grid-area: time;
    text-align: left;
    align-self: center;
  }
  .profile-sfx-meta { grid-area: meta; }
  .profile-sfx-actions {
    grid-area: actions;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
  .profile-sfx-title-row h4 {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    line-height: 1.25;
  }
}

/* User profile ? mobile (public account pages only) */
@media (max-width: 720px) {
  .profile-main { padding-top: calc(var(--header) + 1rem); }
  .profile-page { padding: 0 .75rem 2.5rem; }
  .profile-hero {
    gap: 1rem;
    margin-bottom: 1.1rem;
    padding-bottom: 1rem;
    align-items: stretch;
  }
  .profile-identity { width: 100%; gap: .85rem; }
  .profile-avatar { width: 4.35rem; height: 4.35rem; }
  .profile-avatar > span:not(.patron-badge) { font-size: 1.35rem; }
  .profile-name-row h1 { font-size: 1.25rem; }
  .profile-sub { gap: .45rem .65rem; font-size: .8rem; }
  .profile-logout {
    width: 100%;
    justify-content: center;
  }

  .profile-page,
  .profile-library,
  .profile-library-toolbar,
  .profile-library-main {
    max-width: 100%;
    min-width: 0;
  }

  .profile-tabs {
    flex-wrap: wrap;
    overflow: visible;
    gap: .35rem;
    padding: .3rem;
    margin-bottom: 1rem;
    width: 100%;
    max-width: 100%;
  }
  .profile-tab {
    flex: 1 1 calc(50% - .35rem);
    justify-content: center;
    white-space: nowrap;
    padding: .55rem .55rem;
    font-size: .68rem;
    letter-spacing: .02em;
    min-width: 0;
  }

  .profile-stats { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .profile-stat { padding: 1rem; }
  .profile-stat strong { font-size: 1.35rem; }

  .profile-library-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: .65rem;
  }
  .profile-library-filters {
    flex-wrap: wrap;
    overflow: visible;
    gap: .4rem;
    width: 100%;
    max-width: 100%;
  }
  .profile-filter-chip {
    flex: 1 1 auto;
    justify-content: center;
    padding: .38rem .55rem;
    font-size: .72rem;
    max-width: 100%;
  }
  .profile-add-license { width: 100%; }
  .profile-add-license-toggle {
    width: 100%;
    justify-content: center;
  }
  .profile-add-license-panel {
    position: static;
    width: 100%;
    margin-top: .55rem;
  }

  .profile-group { margin-bottom: 1.15rem; }
  .profile-group-head {
    flex-wrap: wrap;
    gap: .45rem .65rem;
    margin-bottom: .7rem;
  }
  .profile-group-head h3 { font-size: .92rem; }
  .profile-group-more {
    margin-left: 0;
    flex: 1 0 100%;
  }

  .profile-asset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
  }
  .profile-asset-card-body { padding: .7rem .7rem .85rem; gap: .3rem; }
  .profile-asset-card-body h4 { font-size: .86rem; }
  .profile-asset-card-actions { gap: .3rem; }
  .profile-asset-card-actions .btn.compact {
    padding: .4rem .55rem;
    font-size: .72rem;
  }
  .profile-asset-remove { opacity: 1; }

  .profile-sfx-list { border-radius: .65rem; }
  .profile-sfx-row {
    padding: .75rem .7rem;
    gap: .55rem .6rem;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "play meta"
      "wave wave"
      "actions actions"
      "time time";
  }
  .profile-sfx-actions {
    justify-content: flex-start;
    width: 100%;
    gap: .4rem;
  }
  .profile-sfx-actions .btn.compact {
    padding: .45rem .6rem;
    font-size: .72rem;
  }
  .profile-sfx-row .sfx-row-time {
    margin-top: -.15rem;
  }
  .profile-sfx-sub {
    white-space: normal;
  }

  .profile-empty { padding: 2.5rem 1rem; }

  .support-modal {
    width: calc(100% - .75rem);
    max-width: none;
  }
  .support-modal-hero,
  .support-modal-body,
  .support-modal-foot {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .profile-card { padding: 1.1rem; }
  .profile-avatar-edit { gap: .9rem; align-items: flex-start; }
  .profile-avatar-picker .overlay { opacity: .92; }
  .profile-settings-actions { justify-content: stretch; }
  .profile-settings-actions .btn { width: 100%; justify-content: center; }
  .profile-pref {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 360px) {
  .profile-asset-grid { grid-template-columns: 1fr; }
  .profile-stats { grid-template-columns: 1fr; }
  .profile-tab { padding: .5rem .55rem; font-size: .66rem; }
}

/* Contact Support modal */
.support-modal {
  border: 0;
  padding: 0;
  max-width: 32rem;
  width: calc(100% - 1.25rem);
  border-radius: 1.35rem;
  background: transparent;
  color: #fafafa;
  box-shadow: none;
}
.support-modal::backdrop {
  background: rgba(4, 4, 6, .78);
  backdrop-filter: blur(10px);
}
.support-modal-shell {
  overflow: hidden;
  border-radius: 1.35rem;
  border: 1px solid rgba(255, 255, 255, .1);
  background: #0c0c10;
  box-shadow:
    0 0 0 1px rgba(220, 38, 38, .08),
    0 30px 90px rgba(0, 0, 0, .65);
}
.support-modal-hero {
  position: relative;
  padding: 1.5rem 1.45rem 1.2rem;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.support-modal-hero-bg {
  position: absolute;
  inset: -20% -10% auto;
  height: 14rem;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(220, 38, 38, .45), transparent 55%),
    radial-gradient(ellipse at 90% 10%, rgba(255, 255, 255, .08), transparent 45%),
    linear-gradient(180deg, #1a1012 0%, #0c0c10 100%);
  pointer-events: none;
}
.support-modal-hero > *:not(.support-modal-hero-bg) { position: relative; }
.support-modal-kicker {
  margin: 0 0 .45rem;
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fca5a5;
  font-weight: 600;
}
.support-modal-hero h2 {
  margin: 0;
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.15;
}
.support-modal-lead {
  margin: .55rem 0 1rem;
  max-width: 28rem;
  color: #a1a1aa;
  font-size: .92rem;
  line-height: 1.45;
}
.support-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border: 0;
  border-radius: .7rem;
  background: rgba(0, 0, 0, .35);
  color: #d4d4d8;
  cursor: pointer;
}
.support-modal-close:hover { color: #fff; background: rgba(0, 0, 0, .55); }
.support-modal-product {
  padding: .8rem .95rem;
  border-radius: .85rem;
  background: rgba(0, 0, 0, .35);
  border: 1px solid rgba(255, 255, 255, .1);
  font-size: .88rem;
  color: #e4e4e7;
  line-height: 1.4;
  backdrop-filter: blur(8px);
}
.support-modal-body {
  display: grid;
  gap: 1rem;
  padding: 1.2rem 1.45rem 0;
}
.support-modal-field {
  display: grid;
  gap: .4rem;
  font-size: .86rem;
  color: #d4d4d8;
}
.support-modal-field span { font-weight: 560; color: #f4f4f5; }
.support-modal-field select,
.support-modal-field textarea {
  width: 100%;
  border-radius: .85rem;
  border: 1px solid rgba(255, 255, 255, .12);
  background: #121218;
  color: #fff;
  padding: .8rem .9rem;
  font: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.support-modal-field select:focus,
.support-modal-field textarea:focus {
  outline: none;
  border-color: rgba(220, 38, 38, .6);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .16);
}
.support-modal-note {
  margin: 0;
  font-size: .78rem;
  color: #71717a;
  line-height: 1.4;
}
.support-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: .55rem;
  padding: 1rem 1.45rem 1.3rem;
}

/* Long support chat (admin + profile) */
.support-chat-layout {
  display: grid;
  grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
  min-height: min(70vh, 44rem);
}
.support-chat-meta h3 { margin: 0 0 .45rem; font-size: .95rem; }
.support-chat-meta h3 + p { margin: 0 0 .35rem; }
.support-chat-meta h3:not(:first-child) { margin-top: 1.1rem; }
.support-chat-panel {
  display: flex;
  flex-direction: column;
  min-height: min(70vh, 44rem);
  max-height: min(78vh, 52rem);
  padding: 0 !important;
  overflow: hidden;
}
.support-chat-head h3 { margin: 0 0 .2rem; }
.support-chat-scroll {
  flex: 1 1 auto;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1rem 1.1rem;
  scroll-behavior: smooth;
}
.support-bubble {
  max-width: min(42rem, 92%);
  padding: .85rem 1rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .06);
}
.support-bubble.is-user { align-self: flex-end; border-bottom-right-radius: .35rem; }
.support-bubble.is-admin {
  align-self: flex-start;
  background: rgba(220, 38, 38, .12);
  border-color: rgba(220, 38, 38, .22);
  border-bottom-left-radius: .35rem;
}
.support-bubble header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .4rem;
  font-size: .78rem;
  opacity: .8;
}
.support-bubble-body {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.5;
  font-size: .95rem;
}
.support-chat-composer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .65rem;
  align-items: end;
  padding: .85rem 1.1rem 1rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: rgba(0, 0, 0, .22);
}
.support-composer-main { display: grid; gap: .5rem; min-width: 0; }
.support-chat-composer textarea {
  width: 100%;
  min-height: 4.5rem;
  max-height: 12rem;
  resize: vertical;
  border-radius: .8rem;
  border: 1px solid rgba(255, 255, 255, .12);
  background: #0e0e12;
  color: #fff;
  padding: .7rem .8rem;
  font: inherit;
}
.support-dropzone {
  position: relative;
  border-radius: .95rem;
  border: 1px dashed rgba(255, 255, 255, .18);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .03), rgba(220, 38, 38, .05));
  min-height: 5.5rem;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.support-dropzone.is-dragover {
  border-color: rgba(248, 113, 113, .7);
  background: rgba(220, 38, 38, .1);
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, .25);
}
.support-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.support-dropzone-ui {
  display: grid;
  justify-items: center;
  gap: .25rem;
  padding: 1.1rem .9rem;
  text-align: center;
  color: #a1a1aa;
  pointer-events: none;
}
.support-dropzone-ui strong { color: #f4f4f5; font-size: .92rem; }
.support-dropzone-ui span { font-size: .78rem; }
.support-dropzone-icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: .2rem;
  border-radius: .75rem;
  background: rgba(220, 38, 38, .14);
  color: #f87171;
  border: 1px solid rgba(220, 38, 38, .28);
}
.support-dropzone-previews {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  padding: 0 .75rem .75rem;
}
.support-dropzone.has-files .support-dropzone-ui { display: none; }
.support-dropzone.has-files .support-dropzone-previews { display: grid; }
.support-dropzone-previews figure {
  position: relative;
  margin: 0;
  border-radius: .65rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  aspect-ratio: 1;
  background: #09090b;
}
.support-dropzone-previews img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.support-dropzone-previews figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: .25rem .35rem;
  font-size: .65rem;
  background: rgba(0, 0, 0, .65);
  color: #e4e4e7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.support-notify-toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .84rem;
  color: #d4d4d8;
  cursor: pointer;
}
.support-notify-toggle input { accent-color: #dc2626; }
.support-close-form { display: grid; gap: .5rem; }
.support-close-form textarea {
  width: 100%;
  border-radius: .7rem;
  border: 1px solid rgba(255, 255, 255, .12);
  background: #0e0e12;
  color: #fff;
  padding: .65rem .75rem;
  font: inherit;
}
.support-system-line {
  align-self: center;
  margin: .15rem 0;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  color: #a1a1aa;
  font-size: .78rem;
  text-align: center;
  max-width: 90%;
}
.support-closed-banner {
  padding: 1rem 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: rgba(0, 0, 0, .2);
}
.support-chat-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.1rem .75rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.support-bubble-images {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .55rem;
}
.support-bubble-images a {
  display: block;
  border-radius: .65rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  max-width: 11rem;
}
.support-bubble-images img {
  display: block;
  width: 100%;
  max-height: 9rem;
  object-fit: cover;
  background: #0a0a0c;
}
.profile-support-list { display: grid; gap: .5rem; margin-top: .75rem; }
.profile-support-item {
  display: grid;
  gap: .2rem;
  padding: .7rem .8rem;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  color: inherit;
  text-decoration: none;
}
.profile-support-item.active,
.profile-support-item:hover {
  border-color: rgba(220, 40, 40, .55);
  background: rgba(220, 40, 40, .08);
}
@media (max-width: 900px) {
  .support-chat-layout { grid-template-columns: 1fr; min-height: 0; }
  .support-chat-panel { min-height: 28rem; max-height: 70vh; }
  .support-chat-composer { grid-template-columns: 1fr; }
}
.profile-asset-blocked { margin: .5rem 0 0; font-size: .85rem; color: #fb923c; }
.profile-license-reason { display: inline-block; }
.profile-license-reason summary { list-style: none; cursor: pointer; }
.profile-license-reason summary::-webkit-details-marker { display: none; }
.profile-license-reason-body { margin: .5rem 0 0; max-width: 28rem; padding: .65rem .75rem; border-radius: .5rem; background: rgba(249,115,22,.12); border: 1px solid rgba(249,115,22,.35); color: #fdba74; font-size: .85rem; white-space: pre-wrap; }
.license-suspend-form { display: grid; gap: .45rem; justify-items: stretch; width: 100%; }
.license-reason-field { display: grid; gap: .3rem; color: #e4e4e7; font-size: 12px; }
.license-reason-field input { width: 100%; min-width: 0; }
.profile-asset-remove { position: absolute; top: .5rem; right: .5rem; opacity: 0; transition: opacity .15s; z-index: 2; }
.profile-asset:hover .profile-asset-remove,
.profile-asset-card:hover .profile-asset-remove,
.profile-asset-remove:focus-within { opacity: 1; }
.profile-asset-remove button { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; border: 0; background: rgba(9,9,11,.7); color: #71717a; cursor: pointer; }
.profile-asset-remove button:hover { color: #ef4444; background: #18181b; }
.profile-empty { text-align: center; padding: 4rem 1.5rem; background: rgba(24,24,27,.2); border: 1px dashed rgba(255,255,255,.1); border-radius: .9rem; color: #71717a; }
.profile-empty h3 { color: #a1a1aa; margin: .75rem 0; }
.profile-empty p { max-width: 22rem; margin: 0 auto 1.25rem; font-size: .9rem; }
.profile-empty svg { opacity: .45; margin: 0 auto; }
.profile-wish-card .profile-asset-card-thumb { color: #52525b; }
.profile-wish-card .profile-asset-card-body h4 a {
  color: inherit;
  text-decoration: none;
}
.profile-wish-card .profile-asset-card-body h4 a:hover { color: #f87171; }
.profile-wish-price {
  text-transform: none;
  letter-spacing: 0;
  color: #f87171 !important;
  background: transparent !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.profile-sfx-meta .profile-sfx-title-row h4 a {
  color: inherit;
  text-decoration: none;
}
.profile-sfx-meta .profile-sfx-title-row h4 a:hover { color: #f87171; }
.profile-group-head h3 svg.icon-heart { color: #ef4444; }
.profile-activity { display: grid; gap: 1rem; }
.profile-activity-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.profile-activity-head h2 {
  margin: 0;
  font-family: Rajdhani, sans-serif;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  text-transform: none;
}
.profile-activity-head p { margin: 0.25rem 0 0; color: #8b8b96; font-size: 0.88rem; }
.profile-activity-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(4.5rem, auto));
  gap: 0.65rem 1rem;
}
.profile-activity-stats > div { text-align: right; }
.profile-activity-stats strong {
  display: block;
  font-family: Orbitron, sans-serif;
  font-size: 1.05rem;
  color: #fff;
  line-height: 1.1;
}
.profile-activity-stats span {
  display: block;
  margin-top: 0.15rem;
  color: #71717a;
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.profile-activity-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.profile-activity-panels {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.25rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(0,0,0,.28);
}
.profile-activity-panels a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2rem;
  padding: 0.25rem 0.7rem;
  border-radius: 6px;
  color: #a1a1aa;
  font-size: 0.84rem;
  font-weight: 600;
}
.profile-activity-panels a span {
  color: #71717a;
  font-size: 0.75rem;
  font-weight: 700;
}
.profile-activity-panels a:hover { color: #fff; background: rgba(255,255,255,.04); }
.profile-activity-panels a.is-on {
  color: #fff;
  background: rgba(220, 38, 38, .18);
}
.profile-activity-panels a.is-on span { color: #fca5a5; }
.profile-activity-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  min-width: min(100%, 22rem);
}
.profile-activity-search input[type="search"] {
  flex: 1 1 12rem;
  min-height: 2.25rem;
  margin: 0;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  color: #fff;
  padding: 0.4rem 0.65rem;
}
.profile-activity-filters {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.profile-activity-filters a {
  min-height: 1.75rem;
  padding: 0.2rem 0.6rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  color: #a1a1aa;
  font-size: 0.78rem;
  font-weight: 600;
}
.profile-activity-filters a:hover,
.profile-activity-filters a.is-on {
  color: #fff;
  border-color: rgba(239,68,68,.4);
  background: rgba(220,38,38,.12);
}
.profile-activity-list {
  display: grid;
  gap: 0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(8,8,10,.7);
}
.profile-activity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: start;
  padding: 0.75rem 0.85rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-decoration: none;
  color: inherit;
}
.profile-activity-row:last-child { border-bottom: 0; }
.profile-activity-row:hover { background: rgba(255,255,255,.025); }
.profile-activity-list.compact .profile-activity-row { align-items: center; }
.profile-activity-main { min-width: 0; display: grid; gap: 0.35rem; }
.profile-activity-main strong {
  color: #f4f4f5;
  font-size: 0.9rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-activity-row:hover .profile-activity-main strong { color: #fecaca; }
.profile-activity-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
  color: #8b8b96;
  font-size: 0.75rem;
}
.profile-activity-meta a { color: #f87171; }
.profile-activity-meta a:hover { text-decoration: underline; }
.profile-activity-copy {
  margin: 0;
  color: #d4d4d8;
  font-size: 0.86rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: pre-wrap;
}
.profile-activity-action button {
  background: transparent;
  border: 0;
  color: #71717a;
  cursor: pointer;
  padding: 0.25rem;
}
.profile-activity-action button:hover { color: #ef4444; }
.profile-activity-score {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 1.75rem;
  padding: 0.2rem 0.5rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
}
.profile-activity-score svg { color: #eab308; }
.profile-activity-empty {
  display: grid;
  justify-items: center;
  gap: 0.55rem;
  padding: 2.5rem 1rem;
  color: #71717a;
  text-align: center;
}
.profile-activity-empty p { margin: 0; }
.profile-activity-pager { display: flex; justify-content: center; }
.profile-comment-board {
  display: inline-block;
  padding: 0.05rem 0.35rem;
  border-radius: 0.25rem;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: #a1a1aa;
  font-style: normal;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .profile-activity-stats {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .profile-activity-stats > div { text-align: left; }
  .profile-activity-search { width: 100%; }
}
.comment-manage {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.55rem 0.85rem;
}
.comment-edit { margin: 0; }
.comment-edit summary {
  cursor: pointer;
  color: #a1a1aa;
  font-size: 0.78rem;
  font-weight: 600;
  list-style: none;
}
.comment-edit summary::-webkit-details-marker { display: none; }
.comment-edit summary:hover { color: #fff; }
.comment-edit-form {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.45rem;
  min-width: min(100%, 22rem);
}
.comment-edit-form textarea {
  min-height: 4.5rem;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  color: #fff;
  padding: 0.55rem 0.65rem;
}
.comment-edit-actions { display: flex; gap: 0.45rem; }
.comment-delete {
  border: 0;
  background: transparent;
  color: #f87171;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.comment-delete:hover { color: #fecaca; text-decoration: underline; }
.hub-comment-bubble .comment-manage { margin-top: 0.65rem; }
.profile-ratings-grid { display: grid; gap: .65rem; }
@media (min-width: 640px) {
  .profile-ratings-grid { grid-template-columns: 1fr 1fr; }
}
.profile-rating-item { display: flex; align-items: center; justify-content: space-between; gap: .75rem; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.05); border-radius: .65rem; padding: .75rem; text-decoration: none; }
.profile-rating-item:hover { border-color: rgba(234,179,8,.25); }
.profile-rating-item strong { display: block; color: #e4e4e7; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12rem; }
.profile-rating-item:hover strong { color: #f87171; }
.profile-rating-item span { display: block; color: #71717a; font-size: 10px; margin-top: .2rem; }
.profile-rating-item .score { display: inline-flex; align-items: center; gap: .25rem; background: #18181b; border: 1px solid rgba(255,255,255,.1); border-radius: .35rem; padding: .25rem .45rem; color: #fff; font-weight: 700; font-size: .85rem; flex-shrink: 0; }
.profile-rating-item .score svg { color: #eab308; }
.profile-mini-empty { display: grid; place-items: center; gap: .5rem; min-height: 8rem; color: #52525b; text-align: center; }
.profile-mini-empty p { margin: 0; font-size: .85rem; font-style: italic; }
.profile-settings { width: 100%; }
.profile-settings > h2 { margin: 0 0 1.5rem; font-family: Orbitron, sans-serif; color: #fff; font-size: 1.25rem; }
.profile-avatar-edit { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.5rem; }
.profile-avatar-picker { position: relative; width: 6rem; height: 6rem; border-radius: 999px; overflow: hidden; background: #18181b; border: 2px solid rgba(255,255,255,.2); flex-shrink: 0; cursor: pointer; display: grid; place-items: center; color: #52525b; }
.profile-avatar-picker img { width: 100%; height: 100%; object-fit: cover; }
.profile-avatar-picker .overlay { position: absolute; inset: 0; background: rgba(0,0,0,.6); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: 0; transition: opacity .15s; }
.profile-avatar-picker:hover .overlay { opacity: 1; }
.profile-avatar-picker input { display: none; }
.profile-avatar-edit strong { display: block; color: #fff; margin-bottom: .25rem; }
.profile-fields { display: grid; gap: 1.25rem; grid-template-columns: 1fr; border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.25rem; }
@media (min-width: 768px) {
  .profile-fields { grid-template-columns: 1fr 1fr; }
}
.profile-fields label { display: grid; gap: .4rem; color: #d4d4d8; font-size: .875rem; font-weight: 600; }
.profile-fields input { background: rgba(24,24,27,.7); border: 1px solid rgba(255,255,255,.08); border-radius: .5rem; padding: .7rem .85rem; color: #a1a1aa; }
.profile-fields input:disabled { cursor: not-allowed; opacity: .85; }
.profile-fields input:not(:disabled) { background: rgba(0,0,0,.4); border-color: rgba(255,255,255,.1); color: #fff; }
.profile-fields small { color: #52525b; font-size: .75rem; font-weight: 400; }
.profile-password { margin-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.25rem; }
.profile-password h3 { margin: 0 0 1rem; color: #fff; display: flex; align-items: center; gap: .5rem; font-size: 1rem; }
.profile-password h3 svg { color: #ef4444; }
.profile-password .profile-fields { border-top: 0; padding-top: 0; }
.profile-settings-actions { display: flex; justify-content: flex-end; margin-top: 1.5rem; }

/* Profile settings extras */
.profile-section { margin-top: 1.5rem; padding-top: 1.35rem; border-top: 1px solid rgba(255,255,255,.1); }
.profile-section > h3 { margin: 0 0 1rem; color: #fff; display: flex; align-items: center; gap: .5rem; font-size: 1rem; }
.profile-section > h3 svg { color: #ef4444; }
.profile-section .profile-fields { border-top: 0; padding-top: 0; }
.profile-pref { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; padding: 1rem 1.1rem; border: 1px solid rgba(255,255,255,.1); border-radius: .75rem; background: rgba(0,0,0,.25); }
.profile-pref-copy { min-width: 0; flex: 1; }
.profile-pref-copy strong { display: block; color: #fff; margin-bottom: .25rem; }
.profile-pref-copy p { margin: 0; color: #a1a1aa; font-size: .875rem; }
.profile-pref-note { display: block; margin-top: .45rem; color: #71717a; font-size: .75rem; }
.profile-pref-note.ok { color: #34d399; }
.profile-switch { display: inline-flex; align-items: center; gap: .65rem; cursor: pointer; user-select: none; }
.profile-switch input { position: absolute; opacity: 0; pointer-events: none; }
.profile-switch-ui { width: 2.75rem; height: 1.5rem; border-radius: 999px; background: #3f3f46; border: 1px solid rgba(255,255,255,.12); position: relative; transition: .15s ease; flex-shrink: 0; }
.profile-switch-ui::after { content: ""; position: absolute; top: 2px; left: 2px; width: 1.1rem; height: 1.1rem; border-radius: 999px; background: #fff; transition: .15s ease; }
.profile-switch input:checked + .profile-switch-ui { background: #dc2626; border-color: #ef4444; }
.profile-switch input:checked + .profile-switch-ui::after { transform: translateX(1.2rem); }
.profile-switch-label { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #a1a1aa; min-width: 1.75rem; }
.profile-switch input:checked ~ .profile-switch-label { color: #f87171; }
.profile-settings .profile-fields input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }
.profile-password { margin-top: 0; border-top: 0; padding-top: 0; }
.profile-blueprints .blueprint-submit-form,
.profile-blueprints .blueprint-edit form {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 0.75rem;
  background: rgba(24,24,27,.4);
}
.profile-blueprints .blueprint-submit-form h3 { margin: 0; color: #fff; font-size: 1rem; }
.profile-blueprints label { display: grid; gap: 0.3rem; color: #a1a1aa; font-size: 0.8rem; }
.profile-blueprints input,
.profile-blueprints textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 0.5rem;
  background: rgba(0,0,0,.35);
  color: #fff;
  padding: 0.65rem 0.75rem;
  font: inherit;
}
.profile-blueprints-list { display: grid; gap: 0.75rem; }
.profile-blueprints .blueprint-edit { margin-top: 0.65rem; }
.profile-blueprints .blueprint-edit summary {
  cursor: pointer;
  color: #a1a1aa;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.blueprint-ban-countdown { margin-top: 0.5rem; }
.blueprint-ban-countdown strong { color: #fca5a5; font-variant-numeric: tabular-nums; }
.hub-post-excerpt { color: #d4d4d8; line-height: 1.55; margin: 0 0 1rem; }

/* Newsletter admin */
.nl-admin { display: grid; gap: 1.15rem; }
.nl-mail-warn {
  padding: .9rem 1rem; border-radius: .75rem; border: 1px solid rgba(245,158,11,.45);
  background: rgba(245,158,11,.1); color: #fde68a; display: grid; gap: .35rem;
}
.nl-mail-warn strong { color: #fbbf24; }
.nl-mail-warn p { margin: 0; font-size: .85rem; line-height: 1.45; color: #fde68a; }
.nl-mail-warn .muted { color: #d6d3d1; }
.nl-compose-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.nl-compose-top h2 { margin: 0; }
.nl-compose-grid { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 800px) {
  .nl-compose-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.nl-split { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 1000px) {
  .nl-split { grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 1fr); align-items: start; }
}
.nl-card-head-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.nl-card-head-row h2 { margin: 0; }
.nl-add-inline { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.nl-add-inline input {
  min-width: 12rem; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12);
  border-radius: .5rem; padding: .55rem .7rem; color: #fff;
}
.nl-fold, .nl-panel, .nl-template-fold {
  border: 1px solid rgba(255,255,255,.1); border-radius: .75rem; background: rgba(0,0,0,.18);
}
.nl-fold > summary, .nl-panel > summary, .nl-template-fold > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; padding: .85rem 1rem; color: #e4e4e7; font-weight: 600;
}
.nl-fold > summary::-webkit-details-marker,
.nl-panel > summary::-webkit-details-marker,
.nl-template-fold > summary::-webkit-details-marker { display: none; }
.nl-fold > summary::after, .nl-panel > summary::after, .nl-template-fold > summary::after {
  content: '+'; color: #a1a1aa; font-weight: 700; margin-left: auto;
}
.nl-fold[open] > summary::after, .nl-panel[open] > summary::after, .nl-template-fold[open] > summary::after { content: '?'; }
.nl-fold > summary span, .nl-panel > summary span, .nl-template-fold > summary span {
  display: inline-flex; align-items: center; gap: .45rem;
}
.nl-fold-body, .nl-panel-body { padding: 0 1rem 1rem; display: grid; gap: .75rem; }
.nl-templates-list { display: grid; gap: .65rem; }
.nl-template-fold { background: rgba(0,0,0,.22); }
.nl-template-fold > summary em { font-style: normal; color: #71717a; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; margin-left: .45rem; }
.nl-template-fold .nl-template-card { border: 0; background: transparent; padding: 0 1rem 1rem; }
.nl-compose .nl-fold { margin-top: .15rem; }
.nl-kpis { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.nl-kpis article { background: rgba(24,24,27,.45); border: 1px solid rgba(255,255,255,.1); border-radius: .75rem; padding: .9rem 1rem; }
.nl-kpis span { display: block; color: #71717a; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.nl-kpis strong { display: block; margin-top: .35rem; font-family: Orbitron, sans-serif; font-size: 1.4rem; color: #fff; }
.nl-kpis strong.ok { color: #34d399; }
.nl-kpis strong.warn { color: #f87171; }
.nl-table .nl-email { color: #fff; font-weight: 600; }
.nl-status { display: inline-flex; align-items: center; padding: .2rem .55rem; border-radius: 999px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border: 1px solid; }
.nl-status.is-on { background: rgba(16,185,129,.12); border-color: rgba(16,185,129,.35); color: #34d399; }
.nl-status.is-off { background: rgba(113,113,122,.12); border-color: rgba(113,113,122,.35); color: #a1a1aa; }

/* Newsletter admin polish */
.nl-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .nl-grid { grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 1fr); align-items: start; }
}
.nl-card { background: rgba(24,24,27,.45); border: 1px solid rgba(255,255,255,.1); border-radius: .9rem; padding: 1.15rem 1.25rem; display: grid; gap: .85rem; }
.nl-card > h2 { margin: 0; color: #fff; font-size: 1rem; display: flex; align-items: center; gap: .45rem; }
.nl-card > h2 svg { color: #ef4444; }
.nl-card > .muted { margin: 0; color: #71717a; font-size: .85rem; }
.nl-compose, .nl-add { display: grid; gap: .75rem; }
.nl-compose label, .nl-add label { display: grid; gap: .35rem; color: #d4d4d8; font-size: .85rem; font-weight: 600; }
.nl-compose input, .nl-compose textarea, .nl-add input {
  width: 100%; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); border-radius: .5rem;
  padding: .7rem .85rem; color: #fff;
}
.nl-compose textarea { min-height: 12rem; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; line-height: 1.5; }
.nl-compose-actions { display: flex; justify-content: flex-end; }
.nl-add { grid-template-columns: 1fr auto; align-items: end; }
.nl-add button { height: 44px; background: rgba(255,255,255,.1); color: #fff; }
.nl-add button:hover { background: rgba(255,255,255,.18); }
.nl-subhead { margin: .5rem 0 0; color: #a1a1aa; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; }
.nl-campaigns { display: grid; gap: .55rem; max-height: 16rem; overflow: auto; }
.nl-campaigns article { display: flex; justify-content: space-between; gap: .75rem; align-items: center; padding: .7rem .8rem; border-radius: .55rem; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.06); }
.nl-campaigns strong { display: block; color: #fff; font-size: .85rem; }
.nl-campaigns small { display: block; color: #71717a; font-size: .72rem; margin-top: .15rem; }
.nl-campaigns span { color: #a1a1aa; font-size: .75rem; white-space: nowrap; }
.nl-table { border: 1px solid rgba(255,255,255,.1); border-radius: .75rem; background: rgba(0,0,0,.2); }
.nl-table table { min-width: 720px; }
.nl-table th, .nl-table td { color: #d4d4d8; padding: .85rem 1rem; border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: middle; }
.nl-table th { color: #a1a1aa; background: rgba(255,255,255,.03); }
.nl-table tr:last-child td { border-bottom: 0; }
.nl-table .nl-email { color: #fff; font-weight: 600; }
.nl-actions-col { text-align: right; width: 8rem; }
.nl-delete {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: #fca5a5 !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 .75rem !important;
}
.nl-delete:hover {
  background: rgba(220,38,38,.18) !important;
  border-color: rgba(239,68,68,.45) !important;
  color: #fff !important;
}
.profile-newsletter-form { margin: 0; }

.nl-compose-card { gap: 1rem; }
.nl-templates, .nl-placeholders { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.nl-templates > span, .nl-placeholders > span { color: #71717a; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin-right: .25rem; }
.nl-templates .btn { background: rgba(255,255,255,.06); color: #e4e4e7; border: 1px solid rgba(255,255,255,.1); min-height: 32px; height: 32px; }
.nl-templates .btn:hover { background: rgba(220,38,38,.18); border-color: rgba(239,68,68,.4); color: #fff; }
.nl-token { border: 1px dashed rgba(255,255,255,.18); background: rgba(0,0,0,.25); color: #a1a1aa; border-radius: 999px; padding: .3rem .65rem; font-size: .72rem; cursor: pointer; }
.nl-token:hover { color: #fff; border-color: rgba(239,68,68,.45); background: rgba(220,38,38,.12); }
.nl-editor-tools { display: flex; gap: .5rem; flex-wrap: wrap; }
.nl-compose .editor-copy { margin-top: .25rem; }
.nl-compose .rich { border: 1px solid rgba(255,255,255,.12); border-radius: .65rem; overflow: hidden; background: #0a0a0a; }
.nl-compose .rich-visual, .nl-compose textarea.rich-html { min-height: 280px; }
.email-html-editor { display: grid; gap: .55rem; }
.email-html-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.email-html-bar .rich-mode {
  display: inline-flex; align-items: center; gap: .35rem; border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35); color: #a1a1aa; border-radius: .45rem; padding: .35rem .65rem; font-size: .75rem; cursor: pointer;
}
.email-html-bar .rich-mode.is-on { color: #fff; border-color: rgba(239,68,68,.45); background: rgba(220,38,38,.16); }
.email-html-hint { font-size: .72rem; flex: 1 1 12rem; }
.email-html-hint code { font-size: .7rem; }
.email-html-source {
  width: 100%; min-height: 280px; resize: vertical; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12);
  border-radius: .65rem; padding: .85rem; color: #e4e4e7; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; line-height: 1.45;
}
.email-html-preview {
  width: 100%; min-height: 420px; border: 1px solid rgba(255,255,255,.12); border-radius: .65rem; background: #fff;
}
.email-html-visual { border: 1px solid rgba(255,255,255,.12); border-radius: .65rem; overflow: hidden; background: #0a0a0a; }
.email-html-visual .rich-visual { min-height: 220px; padding: 1rem; }
.nl-compose .email-html-source { min-height: 280px; }
.nl-template-card .email-html-source { min-height: 260px; }
.nl-template-card .email-html-preview { min-height: 360px; }
.nl-compose label small.muted { font-weight: 400; }
.nl-preview { margin: 0; display: grid; gap: .45rem; }
.nl-preview > div { display: flex; justify-content: space-between; gap: .75rem; font-size: .8rem; }
.nl-preview dt { color: #71717a; }
.nl-preview dd { margin: 0; color: #e4e4e7; text-align: right; }
.nl-side-stack { display: grid; gap: 1rem; }
.nl-label { display: block; color: #71717a; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin-bottom: .35rem; }
.nl-audience, .nl-schedule-box { display: grid; gap: .45rem; padding: .85rem; border: 1px solid rgba(255,255,255,.08); border-radius: .65rem; background: rgba(0,0,0,.2); }
.nl-radio { display: flex !important; flex-wrap: wrap; align-items: center; gap: .45rem; color: #d4d4d8; font-weight: 500 !important; }
.nl-radio input[type="radio"] { width: auto; min-height: auto; }
.nl-inline-num, .nl-datetime { width: auto !important; min-width: 5rem; padding: .35rem .5rem !important; }
.nl-compose select {
  width: 100%; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); border-radius: .5rem;
  padding: .7rem .85rem; color: #fff;
}
.nl-templates-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .nl-templates-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.nl-template-card { display: grid; gap: .65rem; padding: 1rem; border: 1px solid rgba(255,255,255,.1); border-radius: .75rem; background: rgba(0,0,0,.22); }
.nl-template-card.is-new { border-style: dashed; }
.nl-template-card-head { display: flex; justify-content: space-between; align-items: center; color: #a1a1aa; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; }
.nl-template-card label { display: grid; gap: .3rem; color: #d4d4d8; font-size: .8rem; font-weight: 600; }
.nl-template-card input, .nl-template-card textarea {
  width: 100%; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); border-radius: .5rem;
  padding: .65rem .75rem; color: #fff; font: inherit;
}
.nl-template-card textarea { min-height: 9rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; }
.nl-template-card .editor-copy { margin-top: .15rem; }
.nl-template-card .rich { border: 1px solid rgba(255,255,255,.12); border-radius: .65rem; overflow: hidden; background: #0a0a0a; }
.nl-template-card .rich-visual, .nl-template-card textarea.rich-html { min-height: 220px; }
.nl-template-card .rich-bar { flex-wrap: wrap; }
.nl-template-card .email-html-editor { margin-top: .15rem; }
.nl-check-col { width: 2.5rem; text-align: center; }
.nl-check-col input { width: auto; min-height: auto; }

/* Manage Creator Feedback */
.fb-admin { display: grid; gap: 1.25rem; }
.fb-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.fb-head-left { display: flex; align-items: center; gap: .85rem; }
.fb-head h1 { margin: 0; font-size: 1.45rem; }
.fb-empty { text-align: center; padding: 4rem 1.5rem; color: #71717a; border: 1px dashed rgba(255,255,255,.12); border-radius: .9rem; }
.fb-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .fb-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .fb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fb-card { position: relative; display: flex; flex-direction: column; gap: .85rem; background: rgba(24,24,27,.5); border: 1px solid rgba(255,255,255,.1); border-radius: .9rem; padding: 1.25rem; transition: border-color .15s; }
.fb-card:hover { border-color: rgba(239,68,68,.3); }
.fb-card-actions { position: absolute; top: .75rem; right: .75rem; display: flex; gap: .35rem; opacity: 1; z-index: 2; }
@media (hover: hover) {
  .fb-card-actions { opacity: 0; transition: opacity .15s; }
  .fb-card:hover .fb-card-actions, .fb-card:focus-within .fb-card-actions { opacity: 1; }
}
.fb-card-actions .icon-btn { width: 2rem; height: 2rem; background: #18181b; border: 1px solid rgba(255,255,255,.1); color: #d4d4d8; }
.fb-card-actions .icon-btn.danger { color: #f87171; }
.fb-card-actions .icon-btn:hover { background: #27272a; color: #fff; }
.fb-card-actions .icon-btn.danger:hover { background: rgba(127,29,29,.45); }
.fb-card-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.fb-card-top .stars { margin: 0; display: flex; gap: 2px; color: #ef4444; }
.fb-priority { margin: 0; }
.fb-priority label { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: #71717a; background: #09090b; border: 1px solid rgba(255,255,255,.06); border-radius: .35rem; padding: .2rem .45rem; }
.fb-priority input { width: 2.2rem; min-height: 0; padding: 0; border: 0; background: transparent; color: #a1a1aa; text-align: center; font-size: 10px; }
.fb-priority input:focus { color: #fff; outline: none; }
.fb-quote { margin: 0; color: #d4d4d8; font-size: .9rem; font-style: italic; line-height: 1.55; flex: 1; }
.fb-who { display: flex; align-items: center; gap: .7rem; margin-top: auto; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.06); }
.fb-avatar { width: 2rem; height: 2rem; border-radius: 999px; overflow: hidden; background: #27272a; color: #71717a; display: grid; place-items: center; flex: none; }
.fb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fb-who strong { display: block; color: #fff; font-size: .78rem; }
.fb-who em { display: block; color: #f87171; font-size: 10px; font-style: normal; font-weight: 600; }
.fb-dialog { width: min(38rem, calc(100% - 2rem)); padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: .9rem; background: #0a0a0a; color: #fff; }
.fb-dialog::backdrop { background: rgba(0,0,0,.72); }
.fb-dialog form.fb-form, .fb-dialog .fb-form { display: grid; gap: .9rem; padding: 1.25rem; }
.fb-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0; }
.fb-dialog header h2 { margin: 0; font-size: 1.15rem; color: #fff; }
.fb-form-row { display: grid; gap: .85rem; grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .fb-form-row { grid-template-columns: 1fr 1fr; }
  .fb-form-row.three { grid-template-columns: 6.5rem minmax(0, 1fr) 7rem; }
}
.fb-form label { display: grid; gap: .35rem; color: #a1a1aa; font-size: .78rem; font-weight: 600; }
.fb-form label.grow { grid-column: span 1; }
.fb-form input, .fb-form textarea {
  width: 100%; background: rgba(24,24,27,.7); border: 1px solid rgba(255,255,255,.1);
  border-radius: .5rem; padding: .7rem .8rem; color: #fff;
}
.fb-form textarea { min-height: 9rem; resize: vertical; }
.fb-form small { color: #52525b; font-size: .72rem; font-weight: 400; }
.fb-form footer { display: flex; justify-content: flex-end; gap: .65rem; margin-top: .35rem; }

/* Manage Social Links */
.sl-admin { display: grid; gap: 1.25rem; width: 100%; }
.sl-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.sl-head-left { display: flex; align-items: center; gap: .85rem; }
.sl-head h1 { margin: 0; font-size: 1.45rem; }
.sl-empty { text-align: center; padding: 4rem 1.5rem; color: #71717a; border: 1px dashed rgba(255,255,255,.12); border-radius: .9rem; background: rgba(24,24,27,.35); }
.sl-table-wrap {
  border: 1px solid rgba(255,255,255,.1); border-radius: .9rem; overflow: hidden;
  background: rgba(24,24,27,.45);
}
.sl-table-head, .sl-row {
  display: grid;
  grid-template-columns: 5rem 3rem minmax(7rem, .9fr) minmax(0, 1.6fr) 3rem;
  gap: .75rem;
  align-items: center;
  padding: .85rem 1rem;
}
.sl-table-head {
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #71717a;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sl-table-body { display: grid; }
.sl-row { border-top: 1px solid rgba(255,255,255,.05); }
.sl-row:first-child { border-top: 0; }
.sl-row:hover { background: rgba(255,255,255,.03); }
.sl-priority { margin: 0; }
.sl-priority input {
  width: 3.4rem; min-height: 2rem; padding: .25rem .35rem; text-align: center;
  background: #09090b; border: 1px solid rgba(255,255,255,.1); border-radius: .4rem; color: #e4e4e7;
}
.sl-icon { display: grid; place-items: center; color: #a1a1aa; }
.sl-platform { color: #fff; font-size: .9rem; }
.sl-url {
  color: #71717a; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sl-url:hover { color: #fca5a5; }
.sl-delete { margin: 0; display: flex; justify-content: flex-end; }
.sl-dialog {
  width: min(34rem, calc(100% - 2rem));
  max-height: calc(100vh - 2rem);
  margin: auto;
  padding: 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: .9rem;
  background: #0a0a0a;
  color: #fff;
  overflow: auto;
}
.sl-dialog::backdrop { background: rgba(0,0,0,.75); }
.sl-form { display: grid; gap: 1rem; padding: 1.25rem; }
.sl-form > header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sl-form > header h2 { margin: 0; font-size: 1.2rem; }
.sl-form > label, .sl-icons {
  display: grid; gap: .4rem; color: #a1a1aa; font-size: .8rem; font-weight: 600;
}
.sl-form > label input {
  width: 100%; background: rgba(24,24,27,.85); border: 1px solid rgba(255,255,255,.12);
  border-radius: .5rem; padding: .75rem .85rem; color: #fff;
}
.sl-form > label .muted { font-weight: 400; color: #52525b; text-transform: none; letter-spacing: 0; }
.sl-icons { border: 0; margin: 0; padding: 0; min-width: 0; }
.sl-icons legend { padding: 0; margin-bottom: .4rem; color: #a1a1aa; font-size: .8rem; font-weight: 600; }
.sl-icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr));
  gap: .45rem;
  max-height: 14rem;
  overflow: auto;
  padding: .55rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: .65rem;
  background: rgba(24,24,27,.55);
}
.sl-icon-choice {
  display: grid;
  place-items: center;
  gap: .3rem;
  min-height: 4.4rem;
  padding: .55rem .35rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: .5rem;
  background: #121215;
  color: #a1a1aa;
  cursor: pointer;
}
.sl-icon-choice span { font-size: .62rem; line-height: 1.2; text-align: center; }
.sl-icon-choice:hover { border-color: rgba(255,255,255,.2); color: #fff; }
.sl-icon-choice.is-on {
  border-color: #ef4444;
  color: #fecaca;
  box-shadow: 0 0 0 1px rgba(239,68,68,.25);
}
.sl-form > footer { display: flex; justify-content: flex-end; gap: .65rem; margin-top: .25rem; }
@media (max-width: 720px) {
  .sl-table-head { display: none; }
  .sl-row {
    grid-template-columns: 4rem 2.5rem minmax(0, 1fr) auto;
    grid-template-areas:
      "priority icon platform delete"
      "url url url url";
  }
  .sl-priority { grid-area: priority; }
  .sl-icon { grid-area: icon; }
  .sl-platform { grid-area: platform; }
  .sl-delete { grid-area: delete; }
  .sl-url { grid-area: url; white-space: normal; word-break: break-all; }
}

/* Manage Modals */
.modal-admin { display: grid; gap: 1.15rem; width: 100%; }
.modal-admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.modal-admin-head-left { display: flex; align-items: flex-start; gap: .85rem; }
.modal-admin-head h1 { margin: 0; display: flex; align-items: center; gap: .55rem; font-size: 1.45rem; }
.modal-admin-head h1 .icon { color: #ef4444; }
.modal-admin-head p { margin: .35rem 0 0; color: #a1a1aa; font-size: .92rem; }
.modal-form-head-title { color: #ef4444 !important; }
.modal-table th, .modal-table td { padding: 0.55rem 0.75rem; }
.modal-status {
  display: inline-flex; align-items: center; min-height: 1.5rem; padding: 0 .55rem;
  border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
}
.modal-status.tone-off { background: rgba(63,63,70,.55); color: #a1a1aa; }
.modal-status.tone-on { background: rgba(6,78,59,.45); color: #34d399; }
.modal-status.tone-scheduled { background: rgba(30,58,138,.45); color: #60a5fa; }
.modal-status.tone-expired { background: rgba(120,53,15,.45); color: #fbbf24; }
.modal-pages { display: flex; flex-wrap: wrap; gap: .25rem; }
.modal-pages span {
  display: inline-flex; padding: .1rem .4rem; border-radius: .35rem;
  background: #27272a; color: #e4e4e7; font-size: .72rem; font-family: ui-monospace, monospace;
}
.modal-form { display: grid; gap: 1.15rem; }
.modal-form-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; }
.modal-form-row .grow { flex: 1 1 16rem; }
.modal-form label, .modal-pages-field { display: grid; gap: .4rem; color: #a1a1aa; font-size: .84rem; font-weight: 600; }
.modal-form input[type="text"],
.modal-form input[type="number"],
.modal-form input[type="datetime-local"],
.modal-form select,
.modal-form textarea {
  width: 100%; min-height: 40px; padding: .55rem .75rem;
  border: 1px solid rgba(255,255,255,.12); border-radius: .55rem;
  background: rgba(24,24,27,.7); color: #fff;
}
.modal-form textarea { min-height: 5.5rem; resize: vertical; }
.modal-theme-tag {
  display: inline-flex; padding: .15rem .45rem; border-radius: .4rem;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: #d4d4d8; font-size: .72rem; font-weight: 600; letter-spacing: .03em;
}
.modal-active-toggle {
  display: flex !important; flex-direction: row; align-items: center; justify-content: space-between;
  gap: 1rem; min-width: 11rem; padding: .55rem .75rem;
  border: 1px solid rgba(255,255,255,.1); border-radius: .55rem; background: rgba(24,24,27,.35);
}
.modal-active-toggle span { display: grid; gap: .15rem; }
.modal-active-toggle small { color: #71717a; font-weight: 500; }
.modal-active-toggle input { width: 2.6rem; height: 1.4rem; appearance: none; border-radius: 999px; background: #3f3f46; position: relative; cursor: pointer; }
.modal-active-toggle input::after {
  content: ""; position: absolute; top: .15rem; left: .15rem; width: 1.1rem; height: 1.1rem;
  border-radius: 999px; background: #fff; transition: left .15s;
}
.modal-active-toggle input:checked { background: #dc2626; }
.modal-active-toggle input:checked::after { left: 1.3rem; }
.modal-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.modal-form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modal-page-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .55rem; }
.modal-page-option {
  display: flex !important; flex-direction: row; align-items: center; gap: .55rem;
  padding: .55rem .7rem; border: 1px solid rgba(255,255,255,.1); border-radius: .55rem;
  background: rgba(24,24,27,.45); color: #d4d4d8; font-weight: 500;
}
.modal-page-option input { width: 1rem; height: 1rem; accent-color: #dc2626; }
.modal-form-actions { display: flex; justify-content: flex-end; gap: .65rem; padding-top: .5rem; border-top: 1px solid rgba(255,255,255,.08); }
.modal-preview-dialog {
  width: min(32rem, calc(100% - 2rem));
  border: 1px solid rgba(239,68,68,.25);
  border-radius: .9rem;
  padding: 0;
  background: #0f0f0f;
  color: #fff;
  overflow: hidden;
  position: relative;
}
.modal-preview-dialog.site-modal--seasonal {
  width: min(36rem, calc(100% - 2rem));
  overflow: visible;
}
.modal-preview-dialog:not([open]),
.site-modal:not([open]) { display: none; }
.modal-preview-dialog::backdrop { background: rgba(0,0,0,.72); }
.modal-preview-bar,
.site-modal-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  position: absolute;
  top: .55rem;
  right: .55rem;
  left: auto;
  z-index: 5;
  background: transparent;
  pointer-events: none;
}
.modal-preview-bar .icon-btn,
.site-modal-bar .icon-btn {
  pointer-events: auto;
  background: rgba(9, 9, 11, .55);
  border-color: rgba(255, 255, 255, .14);
  backdrop-filter: blur(6px);
}
.modal-preview-body { padding: 0 0 1.25rem; max-height: min(70vh, 36rem); overflow: auto; color: #d4d4d8; }
.modal-preview-dialog.site-modal--seasonal .modal-preview-body {
  overflow: hidden;
  max-height: none;
  padding: 0 0 1.15rem;
}
.modal-custom-root { display: block; width: 100%; }

/* Site popup + modal HTML (Tailwind-like utilities used in stored content) */
.site-modal {
  width: min(32rem, calc(100% - 2rem));
  border: 1px solid rgba(239,68,68,.22);
  border-radius: .85rem;
  padding: 0;
  background: #0f0f0f;
  color: #fff;
  overflow: hidden;
  position: relative;
}
.site-modal::backdrop { background: rgba(0,0,0,.72); }
.site-modal-body { padding: 0; max-height: min(70vh, 36rem); overflow: auto; position: relative; z-index: 1; }
.site-modal.site-modal--no-scroll .site-modal-body,
.modal-preview-dialog.site-modal--no-scroll .modal-preview-body {
  max-height: none;
  overflow: hidden;
}
.site-modal-sandbox { display: block; width: 100%; min-height: 1rem; }
.modal-sandbox-fields { display: grid; gap: .35rem; }
.modal-sandbox-fields code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82em; color: #fda4af; }
.modal-sandbox-fields textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86rem;
  line-height: 1.45;
  min-height: 9rem;
}
.modal-live-preview-actions { margin-top: .85rem; }
.site-modal:has([data-modal-custom-root]),
.modal-preview-dialog:has([data-modal-custom-root]) {
  width: min(40rem, calc(100% - 2rem));
}

/* Seasonal animated promo modals */
.site-modal--seasonal {
  overflow: hidden;
  width: min(34rem, calc(100% - 1.5rem));
  border-width: 1px;
  animation: sm-pop .45s cubic-bezier(.2,1.2,.3,1) both;
}
.site-modal--seasonal .site-modal-body { padding: 0 0 1.15rem; overflow: hidden; max-height: none; }
.seasonal-modal {
  position: relative;
  padding: 0.2rem 1.35rem 0.35rem;
  text-align: center;
  min-height: 16rem;
}
.seasonal-modal-fx {
  position: absolute; inset: -8% -4% -4%;
  pointer-events: none; overflow: hidden; z-index: 0;
}
.seasonal-modal-copy { position: relative; z-index: 1; }
.seasonal-eyebrow {
  margin: 0 0 .45rem;
  font-size: .72rem; font-weight: 800; letter-spacing: .22em;
  text-transform: uppercase;
}
.seasonal-headline {
  margin: 0 0 .4rem;
  font-family: Orbitron, sans-serif;
  font-size: clamp(1.7rem, 4vw, 2.35rem);
  font-weight: 800; letter-spacing: .04em;
  line-height: 1.05; color: #fff;
  text-shadow: 0 0 28px rgba(255,255,255,.12);
}
.seasonal-sub {
  margin: 0 0 .85rem;
  font-size: 1.15rem; font-weight: 800; line-height: 1.25;
}
.seasonal-body {
  margin: 0 auto 1.15rem;
  max-width: 28rem;
  color: #c4c4cc; font-size: .95rem; line-height: 1.55;
}
.seasonal-cta {
  display: block; width: 100%;
  padding: .95rem 1.25rem; margin: 0 0 .85rem;
  border-radius: .55rem; border: 0;
  font-family: Orbitron, sans-serif;
  font-size: .95rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; text-decoration: none !important;
  color: #fff !important; cursor: pointer;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.seasonal-cta:hover { transform: translateY(-1px); filter: brightness(1.06); }
.seasonal-footer {
  margin: 0; color: #71717a; font-size: .78rem;
}
.sm-particle, .sm-prop {
  position: absolute; display: block; pointer-events: none;
}
@keyframes sm-pop {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes sm-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(4deg); }
}
@keyframes sm-drift {
  0% { transform: translate3d(0,-10%,0) rotate(0deg); opacity: 0; }
  12% { opacity: .9; }
  100% { transform: translate3d(12px,120%,0) rotate(220deg); opacity: 0; }
}
@keyframes sm-sway {
  0%, 100% { transform: translateX(0) rotate(-6deg); }
  50% { transform: translateX(8px) rotate(8deg); }
}
@keyframes sm-spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes sm-pulse-glow {
  0%, 100% { filter: drop-shadow(0 0 6px currentColor); }
  50% { filter: drop-shadow(0 0 16px currentColor); }
}

/* Shared particle layout */
.sm-particle {
  width: .45rem; height: .45rem; border-radius: 999px;
  opacity: .75; animation: sm-drift linear infinite;
}
.sm-p0 { left: 6%; animation-duration: 7s; animation-delay: 0s; }
.sm-p1 { left: 14%; animation-duration: 8.5s; animation-delay: .4s; }
.sm-p2 { left: 22%; animation-duration: 6.5s; animation-delay: 1.1s; }
.sm-p3 { left: 30%; animation-duration: 9s; animation-delay: .2s; }
.sm-p4 { left: 38%; animation-duration: 7.8s; animation-delay: 1.6s; }
.sm-p5 { left: 46%; animation-duration: 8.2s; animation-delay: .7s; }
.sm-p6 { left: 54%; animation-duration: 6.8s; animation-delay: 1.3s; }
.sm-p7 { left: 62%; animation-duration: 9.4s; animation-delay: .1s; }
.sm-p8 { left: 70%; animation-duration: 7.2s; animation-delay: 1.8s; }
.sm-p9 { left: 78%; animation-duration: 8.8s; animation-delay: .55s; }
.sm-p10 { left: 86%; animation-duration: 7.6s; animation-delay: 1.4s; }
.sm-p11 { left: 92%; animation-duration: 9.1s; animation-delay: .9s; }
.sm-p12 { left: 48%; animation-duration: 10s; animation-delay: 2s; }
.sm-p13 { left: 18%; animation-duration: 11s; animation-delay: 2.4s; }

/* Halloween */
.site-modal--halloween {
  border-color: rgba(251,146,60,.45);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(249,115,22,.28), transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(88,28,135,.35), transparent 50%),
    #0a0708;
}
.site-modal--halloween::backdrop { background: rgba(20,6,0,.82); }
.seasonal-modal--halloween .seasonal-eyebrow { color: #fb923c; }
.seasonal-modal--halloween .seasonal-sub { color: #f97316; }
.seasonal-modal--halloween .seasonal-cta {
  background: linear-gradient(180deg, #f97316, #c2410c);
  box-shadow: 0 0 24px rgba(249,115,22,.45);
}
.seasonal-modal--halloween .sm-particle {
  background: #fb923c; box-shadow: 0 0 8px rgba(249,115,22,.8);
  width: .35rem; height: .35rem;
}
.seasonal-modal--halloween .sm-prop {
  width: 2.6rem; height: 2.4rem;
  animation: sm-float 3.2s ease-in-out infinite;
}
.seasonal-modal--halloween .sm-prop-a,
.seasonal-modal--halloween .sm-prop-b,
.seasonal-modal--halloween .sm-prop-c {
  background:
    radial-gradient(circle at 50% 58%, #f97316 0 62%, transparent 63%),
    radial-gradient(circle at 50% 18%, #166534 0 18%, transparent 19%);
  border-radius: 50% 50% 48% 48%;
  filter: drop-shadow(0 0 10px rgba(249,115,22,.55));
}
.seasonal-modal--halloween .sm-prop-a::before,
.seasonal-modal--halloween .sm-prop-b::before,
.seasonal-modal--halloween .sm-prop-c::before {
  content: ""; position: absolute; left: 50%; top: 52%;
  width: 1.1rem; height: .55rem; transform: translate(-50%,-50%);
  background:
    radial-gradient(circle at 22% 45%, #1c1917 0 12%, transparent 13%),
    radial-gradient(circle at 78% 45%, #1c1917 0 12%, transparent 13%),
    radial-gradient(ellipse at 50% 78%, #1c1917 0 18%, transparent 19%);
}
.seasonal-modal--halloween .sm-prop-a { left: 8%; top: 18%; animation-delay: 0s; }
.seasonal-modal--halloween .sm-prop-b { right: 8%; top: 28%; width: 2.1rem; height: 1.95rem; animation-delay: .6s; }
.seasonal-modal--halloween .sm-prop-c { left: 16%; bottom: 10%; width: 1.8rem; height: 1.65rem; animation-delay: 1.1s; opacity: .85; }

/* Christmas */
.site-modal--christmas {
  border-color: rgba(248,113,113,.4);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(22,163,74,.25), transparent 50%),
    radial-gradient(ellipse at 90% 100%, rgba(220,38,38,.22), transparent 45%),
    #070b0a;
}
.site-modal--christmas::backdrop { background: rgba(4,12,8,.8); }
.seasonal-modal--christmas .seasonal-eyebrow { color: #fca5a5; }
.seasonal-modal--christmas .seasonal-sub { color: #4ade80; }
.seasonal-modal--christmas .seasonal-cta {
  background: linear-gradient(180deg, #dc2626, #991b1b);
  box-shadow: 0 0 22px rgba(220,38,38,.4);
}
.seasonal-modal--christmas .sm-particle {
  width: .4rem; height: .4rem; background: #fff;
  box-shadow: 0 0 6px rgba(255,255,255,.9);
  border-radius: 0; transform: rotate(45deg);
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.seasonal-modal--christmas .sm-prop-a,
.seasonal-modal--christmas .sm-prop-b {
  width: 2.4rem; height: 3rem;
  animation: sm-float 3.6s ease-in-out infinite;
}
.seasonal-modal--christmas .sm-prop-a {
  left: 7%; top: 16%;
  background:
    radial-gradient(circle at 50% 18%, #f8fafc 0 16%, transparent 17%),
    radial-gradient(circle at 50% 42%, #f8fafc 0 24%, transparent 25%),
    radial-gradient(circle at 50% 72%, #f8fafc 0 30%, transparent 31%),
    linear-gradient(#78350f,#78350f) center 92%/28% 14% no-repeat;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.35));
}
.seasonal-modal--christmas .sm-prop-b {
  right: 7%; top: 22%; width: 2rem; height: 2.55rem; animation-delay: .7s;
  background:
    radial-gradient(circle at 50% 18%, #f8fafc 0 16%, transparent 17%),
    radial-gradient(circle at 50% 42%, #f8fafc 0 24%, transparent 25%),
    radial-gradient(circle at 50% 72%, #f8fafc 0 30%, transparent 31%),
    linear-gradient(#78350f,#78350f) center 92%/28% 14% no-repeat;
}
.seasonal-modal--christmas .sm-prop-c {
  left: 50%; bottom: 6%; width: 1.4rem; height: 1.4rem; margin-left: -.7rem;
  background: radial-gradient(circle at 35% 35%, #fef08a, #eab308 55%, #a16207);
  border-radius: 999px; animation: sm-pulse-glow 2.4s ease-in-out infinite; color: #facc15;
}

/* Easter */
.site-modal--easter {
  border-color: rgba(244,114,182,.4);
  background:
    radial-gradient(ellipse at 30% 0%, rgba(244,114,182,.22), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(167,139,250,.22), transparent 45%),
    #120a14;
}
.seasonal-modal--easter .seasonal-eyebrow { color: #f9a8d4; }
.seasonal-modal--easter .seasonal-sub { color: #c4b5fd; }
.seasonal-modal--easter .seasonal-cta {
  background: linear-gradient(180deg, #ec4899, #a21caf);
  box-shadow: 0 0 22px rgba(236,72,153,.4);
}
.seasonal-modal--easter .sm-particle {
  width: .7rem; height: .9rem; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: linear-gradient(180deg, #f9a8d4, #a78bfa);
  animation-name: sm-drift;
}
.seasonal-modal--easter .sm-prop-a,
.seasonal-modal--easter .sm-prop-b,
.seasonal-modal--easter .sm-prop-c {
  width: 1.5rem; height: 2rem; border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
  animation: sm-float 2.8s ease-in-out infinite;
}
.seasonal-modal--easter .sm-prop-a { left: 8%; top: 20%; background: linear-gradient(135deg,#fde68a,#fbbf24); }
.seasonal-modal--easter .sm-prop-b { right: 9%; top: 26%; background: linear-gradient(135deg,#bbf7d0,#34d399); animation-delay: .5s; }
.seasonal-modal--easter .sm-prop-c { left: 18%; bottom: 12%; background: linear-gradient(135deg,#ddd6fe,#8b5cf6); animation-delay: 1s; width: 1.25rem; height: 1.7rem; }

/* Spring */
.site-modal--spring {
  border-color: rgba(74,222,128,.35);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(74,222,128,.2), transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(244,114,182,.15), transparent 40%),
    #08110c;
}
.seasonal-modal--spring .seasonal-eyebrow { color: #86efac; }
.seasonal-modal--spring .seasonal-sub { color: #f9a8d4; }
.seasonal-modal--spring .seasonal-cta {
  background: linear-gradient(180deg, #22c55e, #15803d);
  box-shadow: 0 0 20px rgba(34,197,94,.35);
}
.seasonal-modal--spring .sm-particle {
  width: .55rem; height: .55rem; border-radius: 60% 40% 60% 40%;
  background: #fb7185; opacity: .85;
}
.seasonal-modal--spring .sm-prop-a,
.seasonal-modal--spring .sm-prop-b {
  width: 1.8rem; height: 1.8rem; border-radius: 999px;
  background: radial-gradient(circle at 40% 40%, #fde68a, #f59e0b 45%, transparent 46%),
    radial-gradient(circle at 50% 50%, transparent 28%, #4ade80 29% 52%, transparent 53%);
  animation: sm-sway 4s ease-in-out infinite;
}
.seasonal-modal--spring .sm-prop-a { left: 8%; top: 18%; }
.seasonal-modal--spring .sm-prop-b { right: 8%; top: 24%; animation-delay: .8s; }
.seasonal-modal--spring .sm-prop-c { display: none; }

/* Summer */
.site-modal--summer {
  border-color: rgba(251,191,36,.4);
  background:
    radial-gradient(ellipse at 50% -10%, rgba(251,191,36,.35), transparent 50%),
    radial-gradient(ellipse at 100% 100%, rgba(14,165,233,.2), transparent 45%),
    #100c06;
}
.seasonal-modal--summer .seasonal-eyebrow { color: #fde68a; }
.seasonal-modal--summer .seasonal-sub { color: #38bdf8; }
.seasonal-modal--summer .seasonal-cta {
  background: linear-gradient(180deg, #f59e0b, #d97706);
  box-shadow: 0 0 24px rgba(245,158,11,.4);
}
.seasonal-modal--summer .sm-particle {
  width: .35rem; height: .35rem; background: #fde68a;
  box-shadow: 0 0 8px #fbbf24;
}
.seasonal-modal--summer .sm-prop-a {
  left: 50%; top: 4%; width: 3.2rem; height: 3.2rem; margin-left: -1.6rem;
  border-radius: 999px;
  background: radial-gradient(circle at 40% 40%, #fef08a, #f59e0b 55%, #b45309);
  box-shadow: 0 0 40px rgba(251,191,36,.55);
  animation: sm-spin-slow 18s linear infinite;
}
.seasonal-modal--summer .sm-prop-b,
.seasonal-modal--summer .sm-prop-c { display: none; }
.seasonal-modal--summer .seasonal-modal-copy { padding-top: 1.6rem; }

/* Autumn */
.site-modal--autumn {
  border-color: rgba(251,146,60,.4);
  background:
    radial-gradient(ellipse at 20% 0%, rgba(234,88,12,.25), transparent 50%),
    radial-gradient(ellipse at 90% 100%, rgba(127,29,29,.3), transparent 45%),
    #120a06;
}
.seasonal-modal--autumn .seasonal-eyebrow { color: #fdba74; }
.seasonal-modal--autumn .seasonal-sub { color: #f87171; }
.seasonal-modal--autumn .seasonal-cta {
  background: linear-gradient(180deg, #ea580c, #9a3412);
  box-shadow: 0 0 22px rgba(234,88,12,.4);
}
.seasonal-modal--autumn .sm-particle {
  width: .7rem; height: .55rem;
  background: #ea580c;
  border-radius: 0 70% 30% 70%;
  box-shadow: inset -2px 0 0 rgba(0,0,0,.15);
}
.seasonal-modal--autumn .sm-p2,
.seasonal-modal--autumn .sm-p6,
.seasonal-modal--autumn .sm-p10 { background: #b91c1c; }
.seasonal-modal--autumn .sm-p4,
.seasonal-modal--autumn .sm-p8 { background: #ca8a04; }
.seasonal-modal--autumn .sm-prop-a {
  left: 7%; top: 20%; width: 1.8rem; height: 1.4rem;
  background: #c2410c; border-radius: 0 80% 20% 80%;
  animation: sm-sway 3.5s ease-in-out infinite;
}
.seasonal-modal--autumn .sm-prop-b {
  right: 8%; top: 28%; width: 1.5rem; height: 1.2rem;
  background: #b45309; border-radius: 0 80% 20% 80%;
  animation: sm-sway 4s ease-in-out infinite reverse;
}
.seasonal-modal--autumn .sm-prop-c { display: none; }

/* Winter */
.site-modal--winter {
  border-color: rgba(147,197,253,.45);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(147,197,253,.22), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(226,232,240,.08), transparent 40%),
    #070b12;
}
.site-modal--winter::backdrop { background: rgba(4,8,16,.82); }
.seasonal-modal--winter .seasonal-eyebrow { color: #bfdbfe; }
.seasonal-modal--winter .seasonal-sub { color: #93c5fd; }
.seasonal-modal--winter .seasonal-cta {
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  box-shadow: 0 0 22px rgba(59,130,246,.4);
}
.seasonal-modal--winter .sm-particle {
  width: .42rem; height: .42rem; background: #fff;
  box-shadow: 0 0 8px rgba(255,255,255,.85);
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  border-radius: 0;
}
.seasonal-modal--winter .sm-prop-a {
  left: 8%; top: 18%; width: 2.3rem; height: 2.9rem;
  background:
    radial-gradient(circle at 50% 22%, #f8fafc 0 18%, transparent 19%),
    radial-gradient(circle at 50% 48%, #f8fafc 0 26%, transparent 27%),
    radial-gradient(circle at 50% 78%, #f8fafc 0 32%, transparent 33%);
  animation: sm-float 3.8s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(191,219,254,.45));
}
.seasonal-modal--winter .sm-prop-b {
  right: 8%; top: 24%; width: 1.9rem; height: 2.4rem;
  background:
    radial-gradient(circle at 50% 22%, #f8fafc 0 18%, transparent 19%),
    radial-gradient(circle at 50% 48%, #f8fafc 0 26%, transparent 27%),
    radial-gradient(circle at 50% 78%, #f8fafc 0 32%, transparent 33%);
  animation: sm-float 3.2s ease-in-out infinite .5s;
}
.seasonal-modal--winter .sm-prop-c { display: none; }

@media (prefers-reduced-motion: reduce) {
  .site-modal--seasonal,
  .sm-particle,
  .sm-prop { animation: none !important; }
}

/* In-site confirm dialog (replaces window.confirm) */
.confirm-dialog:not([open]) { display: none; }
.confirm-dialog {
  width: min(24rem, calc(100% - 1.5rem));
  margin: auto;
  border: 0;
  padding: 0;
  background: transparent;
  color: #fafafa;
  box-shadow: none;
}
.confirm-dialog::backdrop {
  background: rgba(4, 4, 6, .78);
  backdrop-filter: blur(8px);
}
.confirm-dialog-panel {
  margin: 0;
  padding: 1.35rem 1.35rem 1.2rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, .1);
  background:
    radial-gradient(ellipse at 15% 0%, rgba(220, 38, 38, .22), transparent 55%),
    #0c0c10;
  box-shadow:
    0 0 0 1px rgba(220, 38, 38, .08),
    0 24px 70px rgba(0, 0, 0, .65);
}
.confirm-dialog-kicker {
  margin: 0 0 .35rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fca5a5;
}
.confirm-dialog-panel h2 {
  margin: 0 0 .65rem;
  font-family: Orbitron, sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: #fff;
}
.confirm-dialog-message {
  margin: 0 0 1.25rem;
  color: #d4d4d8;
  font-size: .95rem;
  line-height: 1.5;
}
.confirm-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .55rem;
}

.modal-content-display,
.modal-preview-body,
.modal-form .rich [data-rich-visual] {
  color: #d4d4d8;
  line-height: 1.55;
}
.modal-content-display h1,
.modal-content-display h2,
.modal-content-display h3,
.modal-preview-body h1,
.modal-preview-body h2,
.modal-preview-body h3,
.modal-form .rich [data-rich-visual] h1,
.modal-form .rich [data-rich-visual] h2,
.modal-form .rich [data-rich-visual] h3 {
  font-family: Orbitron, sans-serif;
  color: #fff;
  margin: 0 0 .5rem;
  line-height: 1.15;
}
.modal-content-display p,
.modal-preview-body p,
.modal-form .rich [data-rich-visual] p { margin: 0 0 1rem; }
.modal-content-display a,
.modal-preview-body a,
.modal-form .rich [data-rich-visual] a { color: #ff2a2a; text-decoration: underline; }
.modal-content-display ul,
.modal-preview-body ul,
.modal-form .rich [data-rich-visual] ul { list-style: disc; margin: 0 0 1rem 1.5rem; }
.modal-content-display ol,
.modal-preview-body ol,
.modal-form .rich [data-rich-visual] ol { list-style: decimal; margin: 0 0 1rem 1.5rem; }

.modal-content-display .text-center,
.modal-preview-body .text-center,
.modal-form .rich [data-rich-visual] .text-center { text-align: center; }
.modal-content-display .text-left { text-align: left; }
.modal-content-display .text-right { text-align: right; }
.modal-content-display .relative,
.modal-preview-body .relative,
.modal-form .rich [data-rich-visual] .relative { position: relative; }
.modal-content-display .absolute,
.modal-preview-body .absolute,
.modal-form .rich [data-rich-visual] .absolute { position: absolute; }
.modal-content-display .overflow-hidden,
.modal-preview-body .overflow-hidden,
.modal-form .rich [data-rich-visual] .overflow-hidden { overflow: hidden; }
.modal-content-display .z-10,
.modal-preview-body .z-10,
.modal-form .rich [data-rich-visual] .z-10 { z-index: 10; }
.modal-content-display .block { display: block; }
.modal-content-display .flex,
.modal-preview-body .flex,
.modal-form .rich [data-rich-visual] .flex { display: flex; }
.modal-content-display .justify-center,
.modal-preview-body .justify-center,
.modal-form .rich [data-rich-visual] .justify-center { justify-content: center; }
.modal-content-display .items-center,
.modal-preview-body .items-center,
.modal-form .rich [data-rich-visual] .items-center { align-items: center; }
.modal-content-display .gap-3,
.modal-preview-body .gap-3,
.modal-form .rich [data-rich-visual] .gap-3 { gap: .75rem; }
.modal-content-display .w-full { width: 100%; }
.modal-content-display .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.modal-content-display .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.modal-content-display .py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.modal-content-display .py-8,
.modal-preview-body .py-8,
.modal-form .rich [data-rich-visual] .py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.modal-content-display .my-6,
.modal-preview-body .my-6,
.modal-form .rich [data-rich-visual] .my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.modal-content-display .mb-1 { margin-bottom: .25rem; }
.modal-content-display .mb-2 { margin-bottom: .5rem; }
.modal-content-display .mb-3,
.modal-preview-body .mb-3,
.modal-form .rich [data-rich-visual] .mb-3 { margin-bottom: .75rem; }
.modal-content-display .mb-4,
.modal-preview-body .mb-4,
.modal-form .rich [data-rich-visual] .mb-4 { margin-bottom: 1rem; }
.modal-content-display .mb-6 { margin-bottom: 1.5rem; }
.modal-content-display .mb-7,
.modal-preview-body .mb-7,
.modal-form .rich [data-rich-visual] .mb-7 { margin-bottom: 1.75rem; }
.modal-content-display .mb-8 { margin-bottom: 2rem; }
.modal-content-display .mt-2,
.modal-preview-body .mt-2,
.modal-form .rich [data-rich-visual] .mt-2 { margin-top: .5rem; }
.modal-content-display .mt-5,
.modal-preview-body .mt-5,
.modal-form .rich [data-rich-visual] .mt-5 { margin-top: 1.25rem; }
.modal-content-display .mt-8 { margin-top: 2rem; }
.modal-content-display .text-xs { font-size: .75rem; line-height: 1rem; }
.modal-content-display .text-sm { font-size: .875rem; line-height: 1.35rem; }
.modal-content-display .text-lg { font-size: 1.125rem; line-height: 1.5rem; }
.modal-content-display .text-xl { font-size: 1.25rem; line-height: 1.55rem; }
.modal-content-display .text-4xl { font-size: 2.25rem; line-height: 1.1; }
.modal-content-display .text-6xl,
.modal-preview-body .text-6xl,
.modal-form .rich [data-rich-visual] .text-6xl { font-size: 3.75rem; line-height: 1; }
.modal-content-display .font-bold { font-weight: 700; }
.modal-content-display .font-black,
.modal-preview-body .font-black,
.modal-form .rich [data-rich-visual] .font-black { font-weight: 900; }
.modal-content-display .font-mono { font-family: ui-monospace, monospace; }
.modal-content-display .font-orbitron { font-family: Orbitron, sans-serif; }
.modal-content-display .tracking-wide { letter-spacing: .06em; }
.modal-content-display .tracking-widest,
.modal-preview-body .tracking-widest,
.modal-form .rich [data-rich-visual] .tracking-widest { letter-spacing: .2em; }
.modal-content-display .tracking-\[0\.2em\] { letter-spacing: .2em; }
.modal-content-display .tracking-\[0\.3em\],
.modal-preview-body .tracking-\[0\.3em\],
.modal-form .rich [data-rich-visual] .tracking-\[0\.3em\] { letter-spacing: .3em; }
.modal-content-display .uppercase,
.modal-preview-body .uppercase,
.modal-form .rich [data-rich-visual] .uppercase { text-transform: uppercase; }
.modal-content-display .leading-relaxed { line-height: 1.65; }
.modal-content-display .rounded-md { border-radius: .4rem; }
.modal-content-display .text-white { color: #fff !important; }
.modal-content-display .text-orange-400,
.modal-preview-body .text-orange-400,
.modal-form .rich [data-rich-visual] .text-orange-400 { color: #fb923c !important; }
.modal-content-display .text-orange-500,
.modal-preview-body .text-orange-500,
.modal-form .rich [data-rich-visual] .text-orange-500 { color: #f97316 !important; }
.modal-content-display .text-red-500,
.modal-content-display .text-red-400 { color: #ef4444 !important; }
.modal-content-display .text-zinc-300 { color: #d4d4d8 !important; }
.modal-content-display .text-zinc-400 { color: #a1a1aa !important; }
.modal-content-display .text-zinc-500,
.modal-preview-body .text-zinc-500,
.modal-form .rich [data-rich-visual] .text-zinc-500 { color: #71717a !important; }
.modal-content-display .bg-orange-600,
.modal-preview-body .bg-orange-600,
.modal-form .rich [data-rich-visual] .bg-orange-600 {
  background: #ea580c !important;
  color: #fff !important;
  text-decoration: none !important;
  border: 0;
  cursor: pointer;
}
.modal-content-display .bg-orange-600:hover,
.modal-content-display a.bg-orange-600:hover,
.modal-content-display .hover\:bg-orange-500:hover,
.modal-preview-body .bg-orange-600:hover,
.modal-preview-body a.bg-orange-600:hover,
.modal-preview-body .hover\:bg-orange-500:hover,
.modal-form .rich [data-rich-visual] .bg-orange-600:hover,
.modal-form .rich [data-rich-visual] .hover\:bg-orange-500:hover {
  background: #f97316 !important;
  color: #fff !important;
}
.modal-content-display .bg-red-600 {
  background: #dc2626 !important;
  color: #fff !important;
  text-decoration: none !important;
  border: 0;
  cursor: pointer;
}
.modal-content-display .bg-red-600:hover,
.modal-content-display a.bg-red-600:hover { background: #b91c1c !important; color: #fff !important; }
.modal-content-display .shadow-\[0_0_20px_rgba\(255\,0\,0\,0\.4\)\] {
  box-shadow: 0 0 20px rgba(255, 0, 0, .4);
}
.modal-content-display a.block.bg-red-600,
.modal-content-display a.w-full.bg-red-600,
.modal-content-display a.block.bg-orange-600,
.modal-content-display a.w-full.bg-orange-600 {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none !important;
  text-transform: uppercase;
}

/* Mirror the same utility set in admin preview/editor */
.modal-preview-body .text-center,
.modal-form .rich [data-rich-visual] .text-center { text-align: center; }
.modal-preview-body .block,
.modal-form .rich [data-rich-visual] .block { display: block; }
.modal-preview-body .w-full,
.modal-form .rich [data-rich-visual] .w-full { width: 100%; }
.modal-preview-body .px-6,
.modal-form .rich [data-rich-visual] .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.modal-preview-body .py-4,
.modal-form .rich [data-rich-visual] .py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.modal-preview-body .mb-1,
.modal-form .rich [data-rich-visual] .mb-1 { margin-bottom: .25rem; }
.modal-preview-body .mb-2,
.modal-form .rich [data-rich-visual] .mb-2 { margin-bottom: .5rem; }
.modal-preview-body .mb-6,
.modal-form .rich [data-rich-visual] .mb-6 { margin-bottom: 1.5rem; }
.modal-preview-body .mb-8,
.modal-form .rich [data-rich-visual] .mb-8 { margin-bottom: 2rem; }
.modal-preview-body .mt-8,
.modal-form .rich [data-rich-visual] .mt-8 { margin-top: 2rem; }
.modal-preview-body .text-xs,
.modal-form .rich [data-rich-visual] .text-xs { font-size: .75rem; }
.modal-preview-body .text-sm,
.modal-form .rich [data-rich-visual] .text-sm { font-size: .875rem; }
.modal-preview-body .text-lg,
.modal-form .rich [data-rich-visual] .text-lg { font-size: 1.125rem; }
.modal-preview-body .text-xl,
.modal-form .rich [data-rich-visual] .text-xl { font-size: 1.25rem; }
.modal-preview-body .text-4xl,
.modal-form .rich [data-rich-visual] .text-4xl { font-size: 2.25rem; line-height: 1.1; }
.modal-preview-body .font-bold,
.modal-form .rich [data-rich-visual] .font-bold { font-weight: 700; }
.modal-preview-body .font-orbitron,
.modal-form .rich [data-rich-visual] .font-orbitron { font-family: Orbitron, sans-serif; }
.modal-preview-body .tracking-wide,
.modal-form .rich [data-rich-visual] .tracking-wide { letter-spacing: .06em; }
.modal-preview-body .tracking-\[0\.2em\],
.modal-form .rich [data-rich-visual] .tracking-\[0\.2em\] { letter-spacing: .2em; }
.modal-preview-body .leading-relaxed,
.modal-form .rich [data-rich-visual] .leading-relaxed { line-height: 1.65; }
.modal-preview-body .rounded-md,
.modal-form .rich [data-rich-visual] .rounded-md { border-radius: .4rem; }
.modal-preview-body .text-white,
.modal-form .rich [data-rich-visual] .text-white { color: #fff !important; }
.modal-preview-body .text-red-500,
.modal-preview-body .text-red-400,
.modal-form .rich [data-rich-visual] .text-red-500,
.modal-form .rich [data-rich-visual] .text-red-400 { color: #ef4444 !important; }
.modal-preview-body .text-zinc-300,
.modal-form .rich [data-rich-visual] .text-zinc-300 { color: #d4d4d8 !important; }
.modal-preview-body .text-zinc-400,
.modal-form .rich [data-rich-visual] .text-zinc-400 { color: #a1a1aa !important; }
.modal-preview-body .bg-red-600,
.modal-form .rich [data-rich-visual] .bg-red-600 {
  background: #dc2626 !important;
  color: #fff !important;
  text-decoration: none !important;
  display: block;
  width: 100%;
  text-align: center;
  border-radius: .4rem;
  padding: 1rem;
  box-shadow: 0 0 20px rgba(255, 0, 0, .4);
}
.modal-preview-body .shadow-\[0_0_20px_rgba\(255\,0\,0\,0\.4\)\],
.modal-form .rich [data-rich-visual] .shadow-\[0_0_20px_rgba\(255\,0\,0\,0\.4\)\] {
  box-shadow: 0 0 20px rgba(255, 0, 0, .4);
}

@media (max-width: 900px) {
  .modal-form-grid, .modal-form-grid.two { grid-template-columns: 1fr; }
}

/* Category Management */
.cat-admin { display: grid; gap: 1.5rem; width: min(100%, 56rem); margin: 0 auto; }
.cat-admin-head { display: flex; align-items: center; gap: 0.85rem; }
.cat-admin-head h1 { margin: 0; font-size: 1.85rem; display: flex; align-items: center; gap: 0.65rem; }
.cat-admin-head h1 .icon { color: #ef4444; }
.cat-admin-head p { margin: 0.25rem 0 0; color: #71717a; font-size: 0.9rem; }
.cat-admin-form {
  background: rgba(24,24,27,.55);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 0.75rem;
  padding: 1.25rem 1.35rem 1.4rem;
  position: sticky;
  top: calc(var(--header, 4rem) + 0.75rem);
  z-index: 5;
  backdrop-filter: blur(10px);
  box-shadow: 0 20px 40px rgba(0,0,0,.35);
}
.cat-admin-form h2 { margin: 0 0 1rem; font-size: 1.05rem; display: flex; align-items: center; gap: 0.45rem; color: #e4e4e7; }
.cat-admin-form h2 .icon { color: #ef4444; }
.cat-form { display: grid; gap: 1rem; }
.cat-form-grid {
  display: grid;
  gap: 0.9rem 1rem;
  grid-template-columns: 1fr;
  align-items: start;
}
.cat-form label {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  color: #d4d4d8;
  font-size: 0.86rem;
  min-width: 0;
}
.cat-form input, .cat-form select {
  background: #111;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 0.45rem;
  min-height: 2.5rem;
  width: 100%;
  color: #fff;
  padding: 0.45rem 0.75rem;
  box-sizing: border-box;
}
.cat-form input[name="slug"] { font-family: ui-monospace, monospace; font-size: 0.82rem; color: #a1a1aa; }
.cat-form small { color: #71717a; font-size: 0.7rem; line-height: 1.3; }
.cat-form-actions {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}
.cat-form-actions .btn {
  flex: 1;
  justify-content: center;
  min-height: 2.5rem;
  white-space: nowrap;
}
.cat-directory { display: grid; gap: 1.1rem; }
.cat-directory > h2 {
  margin: 0;
  font-size: 1.15rem;
  color: #a1a1aa;
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding-bottom: 0.55rem;
}
.cat-group {
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 0.75rem;
  overflow: hidden;
  background: rgba(24,24,27,.2);
}
.cat-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.95rem 1rem;
  background: rgba(24,24,27,.65);
}
.cat-group-meta { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.cat-pos {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  border-radius: 0.4rem;
  background: #18181b;
  border: 1px solid rgba(255,255,255,.06);
  color: #a1a1aa;
  font-family: ui-monospace, monospace;
  font-size: 0.72rem;
}
.cat-pos.tiny { min-width: 1.5rem; height: 1.5rem; font-size: 0.65rem; }
.cat-group-title { display: flex; align-items: center; gap: 0.45rem; }
.cat-group-title h3 { margin: 0; font-size: 1.05rem; color: #fff; }
.cat-group-title .icon { color: #71717a; }
.cat-slug { margin: 0.15rem 0 0; color: #71717a; font-family: ui-monospace, monospace; font-size: 0.72rem; }
.cat-group-title + .cat-slug, .cat-group-meta .cat-slug { padding-left: 1.55rem; }
.cat-group-actions, .cat-sub-actions { display: flex; align-items: center; gap: 0.3rem; }
.cat-group-actions .btn.ghost-green {
  background: transparent;
  border: 0;
  color: #a1a1aa;
  gap: 0.25rem;
}
.cat-group-actions .btn.ghost-green:hover { color: #4ade80; background: rgba(34,197,94,.1); }
.cat-subs {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: 1fr;
  padding: 0.95rem 1rem 1rem 2.5rem;
  border-top: 1px solid rgba(255,255,255,.05);
  background: rgba(9,9,11,.35);
}
.cat-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.7rem 0.8rem;
  border-radius: 0.5rem;
  background: #18181b;
  border: 1px solid rgba(255,255,255,.05);
}
.cat-sub:hover { border-color: rgba(255,255,255,.12); }
.cat-sub-main { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.cat-sub-main .icon { color: #52525b; flex-shrink: 0; }
.cat-sub-name { display: block; color: #d4d4d8; font-size: 0.9rem; font-weight: 600; }
.cat-sub .cat-slug { margin: 0.1rem 0 0; display: block; }
.cat-subs-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  color: #52525b;
  font-size: 0.8rem;
  font-style: italic;
  padding: 0.35rem 0;
}
.cat-subs-empty a { color: rgba(239,68,68,.65); font-style: normal; text-decoration: none; }
.cat-subs-empty a:hover { color: #ef4444; }
.cat-empty { margin: 0; text-align: center; color: #71717a; padding: 2rem 1rem; }
@media (min-width: 768px) {
  .cat-form-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(8.5rem, auto);
    grid-template-areas:
      "name slug slug"
      "parent position actions";
  }
  .cat-field-name { grid-area: name; }
  .cat-field-slug { grid-area: slug; }
  .cat-field-parent { grid-area: parent; }
  .cat-field-position { grid-area: position; }
  .cat-form-actions {
    grid-area: actions;
    align-self: start;
    padding-top: calc(0.86rem * 1.2 + 0.35rem);
  }
  .cat-subs { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  .cat-subs { grid-template-columns: 1fr 1fr 1fr; }
}

/* Manage Custom Pages */
.pages-admin { display: grid; gap: 1.35rem; width: min(100%, 72rem); margin: 0 auto; }
.pages-admin-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.pages-admin-head-left { display: flex; align-items: flex-start; gap: 0.85rem; }
.pages-admin-head h1 { margin: 0; font-size: 1.7rem; }
.pages-admin-head p { margin: 0.3rem 0 0; color: #a1a1aa; font-size: 0.92rem; }
.pages-empty {
  text-align: center;
  color: #71717a;
  border: 1px dashed rgba(255,255,255,.12);
  border-radius: 0.85rem;
  padding: 3.5rem 1.5rem;
  display: grid;
  gap: 1rem;
  justify-items: center;
}
.pages-group { display: grid; gap: 0.85rem; }
.pages-group h2 {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  color: #a1a1aa;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pages-group h2 span {
  font-size: 0.7rem;
  letter-spacing: 0;
  text-transform: none;
  color: #71717a;
  background: #18181b;
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  font-weight: 500;
}
.pages-list { display: grid; gap: 0.55rem; }
.pages-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-radius: 0.75rem;
  background: rgba(24,24,27,.5);
  border: 1px solid rgba(255,255,255,.1);
}
.pages-card:hover { border-color: rgba(255,255,255,.18); }
.pages-card-main { display: flex; align-items: flex-start; gap: 0.85rem; min-width: 0; flex: 1 1 18rem; }
.pages-ord {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  min-width: 2.4rem;
  color: #71717a;
}
.pages-ord span { font-size: 0.65rem; font-family: ui-monospace, monospace; letter-spacing: 0.06em; }
.pages-ord strong { font-size: 1.15rem; color: #a1a1aa; }
.pages-kind {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.45rem;
  background: #27272a;
  color: #a1a1aa;
  flex-shrink: 0;
}
.pages-kind.is-external { background: rgba(30,58,138,.25); color: #60a5fa; }
.pages-meta { min-width: 0; }
.pages-meta h3 { margin: 0; font-size: 1.05rem; }
.pages-meta h3 a { color: #fff; text-decoration: none; }
.pages-meta h3 a:hover { color: #f87171; }
.pages-meta-row { display: flex; flex-wrap: wrap; gap: 0.45rem 0.7rem; margin-top: 0.35rem; align-items: center; }
.pages-url {
  font-family: ui-monospace, monospace;
  font-size: 0.78rem;
  color: #a1a1aa;
  background: #09090b;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 0.3rem;
  padding: 0.15rem 0.45rem;
}
.pages-url.is-ext {
  background: transparent;
  border: 0;
  padding: 0;
  color: rgba(96,165,250,.7);
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pages-target {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  color: #a1a1aa;
  background: #27272a;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 0.3rem;
  padding: 0.15rem 0.45rem;
}
.pages-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }

.pages-editor { display: grid; gap: 1rem; width: min(100%, 62rem); margin: 0 auto; }
.pages-editor-head { display: flex; align-items: center; gap: 0.85rem; }
.pages-editor-head h1 { margin: 0; font-size: 1.7rem; }
.pages-editor-head p { margin: 0.25rem 0 0; color: #71717a; font-size: 0.9rem; }
.pages-form {
  display: grid;
  gap: 1rem;
  background: rgba(24,24,27,.45);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 0.85rem;
  padding: 1.25rem 1.35rem 1.4rem;
}
.pages-type-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
  padding: 0.3rem;
  border-radius: 0.55rem;
  background: #18181b;
  border: 1px solid rgba(255,255,255,.1);
}
.pages-type-tabs button {
  border: 0;
  background: transparent;
  color: #a1a1aa;
  min-height: 2.4rem;
  border-radius: 0.4rem;
  cursor: pointer;
  font: inherit;
}
.pages-type-tabs button.is-on { background: #27272a; color: #fff; }
.pages-form label { display: grid; gap: 0.35rem; color: #a1a1aa; font-size: 0.78rem; min-width: 0; }
.pages-form input, .pages-form select {
  background: rgba(24,24,27,.65);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 0.45rem;
  min-height: 2.5rem;
  width: 100%;
  color: #fff;
  padding: 0.45rem 0.75rem;
  box-sizing: border-box;
}
.pages-form-grid { display: grid; gap: 0.9rem; }
.pages-form-grid.two { grid-template-columns: 1fr; }
.pages-slug-row { display: flex; align-items: center; gap: 0.55rem; }
.pages-slug-prefix { color: #71717a; font-family: ui-monospace, monospace; font-size: 0.85rem; flex-shrink: 0; }
.pages-slug-row input { font-family: ui-monospace, monospace; font-size: 0.85rem; }
.pages-form-foot { display: flex; justify-content: flex-end; gap: 0.55rem; flex-wrap: wrap; }
.pages-delete { margin-top: 0.25rem; }
@media (min-width: 768px) {
  .pages-form-grid.two { grid-template-columns: 1fr 1fr; }
}

/* Media Library */
.media-admin { display: grid; gap: 1.35rem; width: min(100%, 56rem); margin: 0 auto; }
.media-admin-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.media-admin-head-left { display: flex; align-items: flex-start; gap: 0.85rem; }
.media-admin-head h1 { margin: 0; display: flex; align-items: center; gap: 0.55rem; font-size: 1.7rem; }
.media-admin-head h1 .icon { color: #ef4444; }
.media-admin-head p { margin: 0.3rem 0 0; color: #a1a1aa; font-size: 0.92rem; }
.media-upload-card {
  display: grid;
  gap: 1.1rem;
  background: rgba(24,24,27,.5);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 0.85rem;
  padding: 1.25rem 1.35rem 1.4rem;
}
.media-folder-block { display: grid; gap: 0.45rem; }
.media-folder-block > label { color: #a1a1aa; font-size: 0.8rem; }
.media-folder-row { display: grid; gap: 0.65rem; }
.media-folder-row input {
  background: #111;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 0.45rem;
  min-height: 2.5rem;
  color: #fff;
  padding: 0.45rem 0.75rem;
  font-family: ui-monospace, monospace;
}
.media-folder-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.media-folder-chips button {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(24,24,27,.6);
  color: #a1a1aa;
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}
.media-folder-chips button.is-on,
.media-folder-chips button:hover {
  color: #fecaca;
  border-color: rgba(220,38,38,.45);
  background: rgba(220,38,38,.15);
}
.media-dropzone {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.45rem;
  text-align: center;
  padding: 2.4rem 1.25rem;
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 0.75rem;
  background: rgba(9,9,11,.45);
  cursor: pointer;
  color: #a1a1aa;
}
.media-dropzone.is-drag { border-color: rgba(239,68,68,.55); background: rgba(127,29,29,.15); color: #fecaca; }
.media-dropzone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.media-drop-icon { color: #71717a; }
.media-dropzone strong { color: #e4e4e7; font-size: 0.98rem; }
.media-dropzone small { font-size: 0.78rem; color: #71717a; }
.media-dropzone em { font-style: normal; color: #f87171; font-family: ui-monospace, monospace; font-size: 0.78rem; }
.media-upload-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; }
.media-upload-hint { color: #71717a; font-size: 0.82rem; }
.media-opt-panel {
  display: grid; gap: .7rem; padding: .9rem 1rem; border-radius: .85rem;
  border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.22);
}
.media-opt-switch {
  display: inline-flex; align-items: center; gap: .55rem; color: #e4e4e7; font-weight: 700; cursor: pointer;
}
.media-opt-note { margin: 0; font-size: .78rem; }
.media-opt-compare { display: grid; grid-template-columns: 96px 1fr; gap: .85rem; align-items: center; }
.media-opt-thumb {
  width: 96px; height: 72px; border-radius: .55rem; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12); background: #0b0d12; display: grid; place-items: center;
}
.media-opt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-opt-stats { display: grid; gap: .35rem; }
.media-opt-row { display: flex; justify-content: space-between; gap: .75rem; color: #a1a1aa; font-size: .85rem; }
.media-opt-row strong { color: #f4f4f5; font-variant-numeric: tabular-nums; text-align: right; }
.media-opt-row.is-after strong { color: #86efac; }
.media-opt-savings { margin: .15rem 0 0; color: #86efac; font-size: .8rem; font-weight: 700; }
.media-opt-panel.is-loading { opacity: .75; }
.media-opt-panel.is-disabled-opt .media-opt-row.is-after { opacity: .45; }
@media (max-width: 640px) { .media-opt-compare { grid-template-columns: 1fr; } }
.media-result { display: grid; gap: 0.75rem; }
.media-result h2 { margin: 0; font-size: 1rem; color: #a1a1aa; }
.media-result-card {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  background: rgba(24,24,27,.45);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 0.75rem;
  padding: 1rem;
}
.media-preview {
  aspect-ratio: 16 / 10;
  border-radius: 0.55rem;
  overflow: hidden;
  background: #09090b;
  border: 1px solid rgba(255,255,255,.08);
}
.media-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }
.media-result-meta { display: grid; gap: 0.65rem; align-content: start; }
.media-result-meta label { display: grid; gap: 0.35rem; color: #a1a1aa; font-size: 0.78rem; }
.media-copy-row { display: flex; gap: 0.45rem; }
.media-copy-row input {
  flex: 1;
  min-width: 0;
  background: #111;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 0.45rem;
  min-height: 2.4rem;
  color: #d4d4d8;
  padding: 0.4rem 0.7rem;
  font-family: ui-monospace, monospace;
  font-size: 0.78rem;
}
.media-path { margin: 0; color: #71717a; font-family: ui-monospace, monospace; font-size: 0.72rem; word-break: break-all; }
@media (min-width: 768px) {
  .media-result-card { grid-template-columns: minmax(12rem, 16rem) 1fr; }
}
.media-browser-card {
  display: grid;
  gap: 0.85rem;
  background: rgba(24,24,27,.5);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 0.85rem;
  padding: 1.15rem 1.25rem 1.3rem;
}
.media-browser-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem; align-items: flex-start; }
.media-browser-head h2 { margin: 0; font-size: 1.05rem; color: #fff; }
.media-browser-toolbar { margin-top: 0.15rem; }
.media-browser-toolbar code {
  color: #a1a1aa;
  font-size: 0.78rem;
  padding: 0.25rem 0.45rem;
  border-radius: 0.35rem;
  background: rgba(0,0,0,.35);
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.media-browser-foot { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.add-shot-btn {
  appearance: none;
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(9,9,11,.45);
  color: #a1a1aa;
  cursor: pointer;
  font: inherit;
}
.add-shot-btn:hover { border-color: rgba(239,68,68,.45); color: #fecaca; }

.r2-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(960px, calc(100vw - 2rem));
  width: 100%;
  color: #e4e4e7;
}
.r2-dialog::backdrop { background: rgba(0,0,0,.72); }
.r2-dialog-inner {
  display: grid;
  gap: 0.85rem;
  background: #18181b;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 0.9rem;
  padding: 1rem 1.1rem 1.1rem;
  max-height: min(85vh, 820px);
  overflow: auto;
}
.r2-dialog-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.r2-dialog-head h3 { margin: 0; color: #fff; font-size: 1.05rem; }
.r2-crumbs { margin: 0.25rem 0 0; color: #71717a; font-size: 0.8rem; font-family: ui-monospace, monospace; word-break: break-all; }
.r2-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.r2-toolbar input[type="search"] {
  flex: 1;
  min-width: 10rem;
  background: #111;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 0.45rem;
  min-height: 2.2rem;
  color: #fff;
  padding: 0.35rem 0.65rem;
}
.r2-grid {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  min-height: 8rem;
}
.r2-item {
  position: relative;
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0.45rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.28);
  cursor: pointer;
  color: inherit;
  text-align: left;
  font: inherit;
}
.r2-item:hover { border-color: rgba(255,255,255,.22); }
.r2-item.is-selected {
  border-color: rgba(244,63,94,.55);
  box-shadow: inset 0 0 0 1px rgba(244,63,94,.25);
  background: rgba(127,29,29,.2);
}
.r2-item.is-folder { align-content: center; justify-items: center; min-height: 7.5rem; }
.r2-thumb {
  aspect-ratio: 1;
  border-radius: 0.45rem;
  overflow: hidden;
  background: #09090b;
  border: 1px solid rgba(255,255,255,.06);
  display: grid;
  place-items: center;
}
.r2-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.r2-thumb-ph { color: #71717a; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-align: center; padding: 0.4rem; }
.r2-name {
  display: block;
  color: #d4d4d8;
  font-size: 0.72rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.r2-meta { color: #71717a; font-size: 0.65rem; }
.r2-check {
  position: absolute; top: 0.45rem; right: 0.45rem;
  width: 1.05rem; height: 1.05rem; border-radius: 999px;
  border: 2px solid rgba(255,255,255,.35); background: rgba(0,0,0,.45);
}
.r2-item.is-selected .r2-check {
  border-color: #f87171;
  background: #dc2626;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.25);
}
.r2-dialog-foot {
  display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; justify-content: flex-end;
  padding-top: 0.35rem; border-top: 1px solid rgba(255,255,255,.08);
}
.r2-dialog-foot .access-muted { margin-right: auto; }
.r2-empty { grid-column: 1 / -1; color: #71717a; font-size: 0.88rem; padding: 1.5rem 0.5rem; text-align: center; }

/* Orders */
.orders-admin { display: grid; gap: 1.15rem; width: 100%; }
.orders-admin-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.orders-admin-head-left { display: flex; align-items: flex-start; gap: 0.85rem; }
.orders-admin-head h1 { margin: 0; display: flex; align-items: center; gap: 0.55rem; font-size: 1.7rem; }
.orders-admin-head h1 .icon { color: #ef4444; }
.orders-admin-head p { margin: 0.3rem 0 0; color: #a1a1aa; font-size: 0.92rem; }
.orders-source-warn { color: #fbbf24; }
.orders-source-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,.12);
  white-space: nowrap;
}
.orders-source-pill.is-live { color: #fde68a; background: rgba(234,179,8,.12); border-color: rgba(234,179,8,.35); }
.orders-source-pill.is-local { color: #a1a1aa; background: rgba(39,39,42,.55); }
.orders-alert {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(234,179,8,.35);
  background: rgba(234,179,8,.1);
  color: #fde68a;
}
.orders-alert .icon { flex-shrink: 0; margin-top: 0.1rem; }
.orders-alert strong { display: block; color: #fef3c7; }
.orders-alert p { margin: 0.2rem 0 0; color: #fde68a; font-size: 0.88rem; }
.orders-kpis { display: grid; gap: 0.75rem; grid-template-columns: 1fr; }
.orders-kpis article {
  background: rgba(24,24,27,.45);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 0.75rem;
  padding: 1rem 1.1rem;
}
.orders-kpis span { display: block; color: #a1a1aa; font-size: 0.8rem; margin-bottom: 0.35rem; }
.orders-kpis strong { font-family: Orbitron, sans-serif; font-size: 1.45rem; color: #fff; }
.orders-kpis small { display: block; margin-top: 0.35rem; color: #71717a; font-size: 0.78rem; }
.orders-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  background: rgba(24,24,27,.4);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 0.75rem;
  padding: 0.75rem;
}
.orders-toolbar select {
  background: #111;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 0.45rem;
  min-height: 2.4rem;
  color: #fff;
  padding: 0.35rem 0.65rem;
}
.orders-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-left: auto; color: #71717a; }
.orders-filters a {
  color: #a1a1aa;
  text-decoration: none;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.82rem;
}
.orders-filters a[aria-current="page"],
.orders-filters a:hover {
  color: #fecaca;
  background: rgba(220,38,38,.14);
  border-color: rgba(220,38,38,.35);
}
.orders-empty {
  margin: 0;
  text-align: center;
  color: #71717a;
  border: 1px dashed rgba(255,255,255,.12);
  border-radius: 0.85rem;
  padding: 2.5rem 1rem;
}
.orders-table td strong { display: block; color: #fff; }
.orders-ownership { display: block; color: #a1a1aa; font-size: .75rem; margin-top: .15rem; }
.checkout-renew-form { display: grid; gap: .85rem; margin-top: 1.25rem; }
.checkout-renew-form label { display: grid; gap: .35rem; color: #e4e4e7; font-size: .9rem; }
.checkout-renew-form input {
  width: 100%;
  border-radius: .65rem;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color: #fff;
  padding: .7rem .85rem;
}
.checkout-status-ok { color: #86efac; margin: .75rem 0 0; }
.kicker.is-warn { color: #fde68a; }
.order-status {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,.1);
}
.order-status.tone-on { color: #86efac; background: rgba(22,163,74,.15); border-color: rgba(22,163,74,.35); }
.order-status.tone-scheduled { color: #fde68a; background: rgba(202,138,4,.15); border-color: rgba(202,138,4,.35); }
.order-status.tone-expired { color: #93c5fd; background: rgba(37,99,235,.15); border-color: rgba(37,99,235,.35); }
.order-status.tone-off { color: #fca5a5; background: rgba(127,29,29,.2); border-color: rgba(220,38,38,.35); }
.orders-pagination { display: flex; justify-content: flex-end; }
@media (min-width: 768px) {
  .orders-kpis { grid-template-columns: 1fr 1fr; }
}

[x-cloak]{display:none!important}
html.admin-drawer-lock { overflow: hidden; }
.fb-quote{-webkit-line-clamp:4;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}

/* Product Access & Availability (Phase 3) */
.access-layout { display: grid; gap: 1rem; }
.access-main { display: grid; gap: 1rem; }
.access-card { margin: 0; }
.access-hint { margin: 0; color: #a1a1aa; font-size: 0.9rem; line-height: 1.45; }
.access-muted { color: #71717a; font-size: 0.82rem; }
.access-type-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 0.85rem; }
.access-type-fieldset > legend {
  margin: 0 0 0.15rem;
  padding: 0;
  color: #a1a1aa;
  font-size: 0.82rem;
  font-weight: 600;
}
.access-type-grid { display: grid; gap: 0.55rem; }
.access-type-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
  margin: 0;
  padding: 0.85rem 0.95rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.28);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.access-type-card:hover { border-color: rgba(255,255,255,.2); background: rgba(0,0,0,.38); }
.access-type-card.is-selected {
  border-color: rgba(244,63,94,.55);
  background: rgba(127,29,29,.22);
  box-shadow: inset 0 0 0 1px rgba(244,63,94,.2);
}
.access-type-card.is-disabled {
  opacity: 0.48;
  cursor: not-allowed;
}
.access-type-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}
.access-type-radio {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  border-radius: 999px;
  border: 2px solid #71717a;
  background: #18181b;
  box-shadow: inset 0 0 0 0 #dc2626;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.access-type-card.is-selected .access-type-radio {
  border-color: #f87171;
  box-shadow: inset 0 0 0 0.28rem #dc2626;
}
.access-type-card:focus-within {
  outline: 2px solid rgba(248,113,113,.55);
  outline-offset: 2px;
}
.access-type-copy { display: grid; gap: 0.2rem; min-width: 0; }
.access-type-copy strong {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.access-type-copy small {
  color: #a1a1aa;
  font-size: 0.82rem;
  line-height: 1.4;
}
.access-mode-detail { display: grid; gap: 0.75rem; padding-top: 0.35rem; }
.access-mode-detail[hidden] { display: none !important; }
.access-tier-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.45rem 0.75rem;
}
.access-tier-check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.28);
  color: #e4e4e7;
  font-size: 0.92rem;
  cursor: pointer;
}
.access-tier-check:hover { border-color: rgba(239,68,68,.35); }
.access-tier-check:has(input:checked) {
  border-color: rgba(239,68,68,.45);
  background: rgba(220,38,38,.1);
}
.access-tier-check input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--red-hot);
}
.access-disabled-state {
  padding: 0.75rem 0.9rem;
  border-radius: 8px;
  border: 1px dashed rgba(250,204,21,.35);
  background: rgba(250,204,21,.08);
  color: #fde68a;
  font-size: 0.88rem;
}
.access-storage { margin-top: 0.35rem; padding-top: 0.85rem; border-top: 1px solid rgba(255,255,255,.08); }
.access-storage h3 { margin: 0 0 0.45rem; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #a1a1aa; }
.access-status { margin: 0; font-size: 0.9rem; }
.access-status.ok { color: #4ade80; }
.access-status.warn { color: #fbbf24; }
.access-legacy-list { margin: 0.45rem 0 0; padding-left: 1.1rem; color: #d4d4d8; font-size: 0.82rem; }
.access-summary { align-self: start; position: sticky; top: calc(var(--header, 4.5rem) + 1rem); }
.access-summary-list { margin: 0; display: grid; gap: 0.7rem; }
.access-summary-list > div { display: grid; gap: 0.15rem; }
.access-summary-list dt { margin: 0; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #71717a; }
.access-summary-list dd { margin: 0; color: #e4e4e7; font-size: 0.92rem; }
.inventory-access-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem 0.9rem; }
.inventory-access-filters label { display: flex; align-items: center; gap: 0.4rem; margin: 0; text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: #a1a1aa; }
.inventory-access-filters select { width: auto; min-height: 32px; padding: 0 0.45rem; background: #18181b; }
.access-cell { white-space: normal; min-width: 7.5rem; }
.access-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #d4d4d8;
  margin: 0 0.2rem 0.2rem 0;
}
.access-pill.mode-paid { color: #fda4af; border-color: rgba(244,63,94,.35); background: rgba(244,63,94,.12); }
.access-pill.mode-free_public { color: #86efac; border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.12); }
.access-pill.mode-free_registered { color: #93c5fd; border-color: rgba(59,130,246,.35); background: rgba(59,130,246,.12); }
.access-pill.mode-patreon,
.access-pill.mode-patreon_tier,
.access-pill.mode-patreon_early { color: #f9a8d4; border-color: rgba(236,72,153,.35); background: rgba(236,72,153,.12); }
.access-pill.community { color: #fde68a; border-color: rgba(234,179,8,.35); background: rgba(234,179,8,.12); }
.access-pill.license { color: #c4b5fd; border-color: rgba(139,92,246,.35); background: rgba(139,92,246,.12); }
.access-early-hint { display: block; color: #71717a; font-size: 11px; margin-top: 0.15rem; }
.inventory-card-access { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0 1rem 0.75rem; }
@media (min-width: 960px) {
  .access-layout { grid-template-columns: minmax(0, 1.6fr) minmax(14rem, 0.9fr); align-items: start; }
}

.profile-connections .connection-card {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  background: rgba(0,0,0,.2);
}
.connection-card-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 0.85rem; }
.connection-card-head h3 { margin: 0 0 0.25rem; color: #fff; font-size: 1rem; }
.connection-status { margin: 0; color: #d4d4d8; font-size: 0.9rem; }
.connection-status.connected { color: #86efac; }
.connection-avatar { width: 48px; height: 48px; border-radius: 999px; object-fit: cover; border: 1px solid rgba(255,255,255,.12); }
.connection-details { display: grid; gap: 0.55rem; margin: 0 0 1rem; }
.connection-details > div { display: grid; gap: 0.1rem; }
.connection-details dt { margin: 0; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: #d4d4d8; font-weight: 600; }
.connection-details dd { margin: 0; color: #f4f4f5; font-size: 0.92rem; }
.connection-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; align-items: center; }


/* Phase 7 � storefront access badges / panels / community */
.card-badges {
  position: absolute; top: 0.65rem; left: 0.65rem; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  /* Prefer filling the first badge row; only reserve sale-badge space when a sale exists. */
  max-width: calc(100% - 1.25rem);
}
.product-card .media:has(.sale) .card-badges {
  max-width: calc(100% - 4.5rem);
}
.card-badge-row {
  display: flex; flex-wrap: nowrap; gap: 0.3rem; max-width: 100%;
}
.access-badge {
  display: inline-flex; align-items: center; padding: 0.18rem 0.45rem;
  border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; border: 1px solid transparent; line-height: 1.2;
  background: rgba(0,0,0,.72); color: #f4f4f5;
}
.access-badge.free { color: #86efac; border-color: rgba(34,197,94,.4); background: rgba(6,40,18,.85); }
.access-badge.members { color: #93c5fd; border-color: rgba(59,130,246,.4); background: rgba(15,30,55,.85); }
.access-badge.paid { color: #fda4af; border-color: rgba(244,63,94,.4); background: rgba(50,10,20,.85); }
.access-badge.patreon,
.access-badge.early { color: #f9a8d4; border-color: rgba(236,72,153,.4); background: rgba(45,10,35,.85); }
.access-badge.community { color: #fde68a; border-color: rgba(234,179,8,.4); background: rgba(40,30,5,.85); }
.access-badge.cc0 { color: #c4b5fd; border-color: rgba(139,92,246,.4); background: rgba(30,20,50,.85); }
.card-early-note { margin: 0 0 0.55rem; color: #a1a1aa; font-size: 0.8rem; line-height: 1.35; }
.card-countdown { display: block; color: #f9a8d4; font-size: 0.75rem; margin-top: 0.2rem; }

.access-panel {
  margin: 0.75rem 0 1.1rem; padding: 1rem 1.1rem;
  border: 1px solid rgba(255,255,255,.1); border-radius: 10px; background: rgba(0,0,0,.28);
}
.access-panel-head { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.65rem; }
.access-panel-badge {
  display: inline-flex; padding: 0.2rem 0.55rem; border-radius: 4px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.08em; color: #fff;
  background: rgba(239,68,68,.2); border: 1px solid rgba(239,68,68,.35);
}
.access-panel-title { margin: 0 0 0.35rem; color: #fff; font-size: 1.15rem; font-weight: 700; }
.access-panel-copy { margin: 0 0 0.55rem; color: #d4d4d8; }
.access-panel-meta { margin: 0 0 0.55rem; color: #a1a1aa; font-size: 0.92rem; }
.access-panel-facts {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}
.access-fact {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0;
  padding: 0.55rem 0.7rem;
  border-radius: 0.65rem;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
}
.access-fact-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.5rem;
  border: 1px solid transparent;
}
.access-fact-copy {
  display: grid;
  gap: 0.08rem;
  min-width: 0;
}
.access-fact-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a1a1aa;
}
.access-fact-value {
  color: #f4f4f5;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
}
.access-fact.tone-tier {
  border-color: rgba(236, 72, 153, .28);
  background: linear-gradient(135deg, rgba(236, 72, 153, .14), rgba(0, 0, 0, .12));
}
.access-fact.tone-tier .access-fact-icon {
  color: #f9a8d4;
  background: rgba(236, 72, 153, .16);
  border-color: rgba(236, 72, 153, .35);
}
.access-fact.tone-tier .access-fact-label { color: #f9a8d4; }
.access-fact.tone-license {
  border-color: rgba(139, 92, 246, .28);
  background: linear-gradient(135deg, rgba(139, 92, 246, .14), rgba(0, 0, 0, .12));
}
.access-fact.tone-license .access-fact-icon {
  color: #c4b5fd;
  background: rgba(139, 92, 246, .16);
  border-color: rgba(139, 92, 246, .35);
}
.access-fact.tone-license .access-fact-label { color: #c4b5fd; }
.access-fact.tone-community {
  border-color: rgba(234, 179, 8, .28);
  background: linear-gradient(135deg, rgba(234, 179, 8, .12), rgba(0, 0, 0, .12));
}
.access-fact.tone-community .access-fact-icon {
  color: #fde68a;
  background: rgba(234, 179, 8, .14);
  border-color: rgba(234, 179, 8, .35);
}
.access-fact.tone-community .access-fact-label { color: #fde68a; }
.access-fact.tone-release {
  border-color: rgba(56, 189, 248, .28);
  background: linear-gradient(135deg, rgba(56, 189, 248, .12), rgba(0, 0, 0, .12));
}
.access-fact.tone-release .access-fact-icon {
  color: #7dd3fc;
  background: rgba(56, 189, 248, .14);
  border-color: rgba(56, 189, 248, .35);
}
.access-fact.tone-release .access-fact-label { color: #7dd3fc; }
.access-panel-eligibility { margin: 0.55rem 0; color: #e4e4e7; font-size: 0.95rem; }
.access-panel-verify { margin: 0.45rem 0 0; font-size: 0.88rem; }
.access-panel-verify.tone-ok { color: #86efac; }
.access-panel-verify.tone-warn { color: #fde68a; }
.access-panel-verify.tone-error { color: #fda4af; }
.access-panel-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 0.9rem; }
.access-panel-actions .buy-now { margin: 0; }
.access-countdown { margin-top: 0.65rem; }
.access-countdown-fallback { margin: 0; color: #a1a1aa; font-size: 0.9rem; }
.access-countdown-live { margin: 0.35rem 0 0; color: #f9a8d4; font-size: 0.92rem; font-weight: 600; }

/* Community page */
.community-main {
  padding: 0;
  scroll-padding-top: calc(var(--header) + 3.25rem);
  overflow-x: clip;
}
.community-hero {
  position: relative;
  min-height: min(88vh, 780px);
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}
.community-hero-visual {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #050505;
}
.community-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  transform: scale(1.03);
  animation: community-photo-drift 22s ease-in-out infinite alternate;
  filter: saturate(1.08) contrast(1.06);
}
.community-hero-fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 72% 18%, rgba(220, 38, 38, 0.32), transparent 60%),
    linear-gradient(135deg, rgba(220, 38, 38, 0.2), transparent 45%),
    repeating-linear-gradient(-18deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 14px),
    #080808;
}
.community-hero-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(5,5,5,0.15) 0%, rgba(5,5,5,0.42) 38%, rgba(5,5,5,0.97) 100%),
    linear-gradient(90deg, rgba(5,5,5,0.94) 0%, rgba(5,5,5,0.4) 52%, rgba(5,5,5,0.58) 100%);
}
.community-hero-grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0.14;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.community-hero-scan {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(239, 68, 68, 0.05) 48%,
    transparent 52%
  );
  background-size: 100% 220%;
  animation: community-scan 9s linear infinite;
  mix-blend-mode: soft-light;
  opacity: 0.55;
}
.community-hero-copy {
  position: relative;
  z-index: 4;
  padding-block: clamp(5.5rem, 12vh, 8rem) clamp(2.75rem, 7vh, 4.25rem);
  max-width: 52rem;
  animation: community-copy-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.community-brand {
  margin: 0 0 1.15rem;
  font-family: Orbitron, sans-serif;
  font-size: clamp(1.45rem, 3.2vw, 2.1rem);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.15;
}
.community-brand span { color: var(--red-hot); }
.community-brand-sm { font-size: 0.95rem; letter-spacing: 0.18em; margin-bottom: 0.75rem; }
.community-hero h1 {
  margin: 0 0 1rem;
  color: #fff;
  font-size: clamp(2.45rem, 6vw, 4.25rem);
  line-height: 1.05;
  max-width: 14ch;
  letter-spacing: -0.02em;
  text-shadow: 0 10px 40px rgba(0,0,0,.55);
}
.community-lead {
  margin: 0 0 1.65rem;
  color: #d4d4d8;
  font-size: clamp(1.2rem, 2.1vw, 1.45rem);
  line-height: 1.4;
  max-width: 34rem;
}
.community-hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.community-hero-actions .btn-ghost {
  border-color: rgba(255,255,255,.35);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(6px);
}

.community-jump {
  position: sticky;
  top: var(--header);
  z-index: 40;
  border-block: 1px solid rgba(255,255,255,.08);
  background: rgba(5, 5, 5, 0.88);
  backdrop-filter: blur(12px);
}
.community-jump-inner {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 3.15rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.community-jump-inner::-webkit-scrollbar { display: none; }
.community-jump-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  color: #a1a1aa;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.community-jump-short { display: none; }
.community-jump-link span:not(.community-jump-full):not(.community-jump-short) {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  border: 1px solid rgba(239,68,68,.35);
  background: rgba(239,68,68,.12);
  color: #fecaca;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.community-jump-link:hover,
.community-jump-link.is-on {
  color: #fff;
  border-bottom-color: var(--red-hot);
}
.community-jump-cta {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0.35rem 0.75rem;
  border: 1px solid rgba(239,68,68,.45);
  background: rgba(220,38,38,.14);
  color: #fecaca;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.community-jump-cta:hover {
  background: rgba(220,38,38,.28);
  border-color: rgba(239,68,68,.7);
  color: #fff;
}

.community-flow {
  position: relative;
  padding: 3.25rem 0 3.5rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(ellipse 50% 40% at 10% 0%, rgba(220,38,38,.1), transparent 60%),
    linear-gradient(180deg, #070707, #050505 80%);
}
.community-steps {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem 0.75rem;
  counter-reset: none;
}
.community-step {
  position: relative;
  padding: 1.35rem 0.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--step, 1) * 0.08s);
}
.community-steps.is-in .community-step {
  opacity: 1;
  transform: none;
}
.community-step-num {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--red-hot);
  font-family: Orbitron, sans-serif;
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}
.community-step strong {
  display: block;
  margin-bottom: 0.4rem;
  color: #fff;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.community-step p {
  margin: 0;
  color: #9a9aa2;
  font-size: 0.95rem;
  line-height: 1.45;
  max-width: 18rem;
}
.community-step-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 2.5rem;
  height: 1.25rem;
  margin-top: -1.5rem;
  color: var(--red-hot);
  opacity: 0;
  transition: opacity 0.45s ease;
  transition-delay: 0.2s;
}
.community-steps.is-in .community-step-arrow { opacity: 1; }
.community-step-arrow-line {
  display: block;
  width: 1.15rem;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.85));
  transform-origin: left center;
  animation: community-step-arrow-line 1.6s ease-in-out infinite;
}
.community-step-arrow-head {
  display: block;
  width: 0.55rem;
  height: 0.55rem;
  margin-left: -2px;
  border-top: 2px solid rgba(239, 68, 68, 0.95);
  border-right: 2px solid rgba(239, 68, 68, 0.95);
  transform: rotate(45deg);
  animation: community-step-arrow-head 1.6s ease-in-out infinite;
}
.community-step-arrow:nth-child(4) .community-step-arrow-line,
.community-step-arrow:nth-child(4) .community-step-arrow-head {
  animation-delay: 0.35s;
}

.community-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.community-metric {
  padding: 0.95rem 1rem;
  border: 1px solid rgba(255,255,255,.07);
  background:
    linear-gradient(160deg, rgba(220,38,38,.08), transparent 55%),
    rgba(255,255,255,.02);
}
.community-metric-wide { grid-column: span 1; }
.community-metric-value {
  display: block;
  margin-bottom: 0.25rem;
  color: #fff;
  font-family: Orbitron, sans-serif;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.community-metric-date {
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  letter-spacing: 0.06em;
}
.community-metric-label {
  display: block;
  color: #8b8b93;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.community-feature {
  padding: 3.25rem 0 1.75rem;
}
.community-feature-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.35rem;
}
.community-feature-head h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
}
.community-spotlight-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.community-spotlight-nav .icon-btn {
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: #fff;
}
.community-spotlight-nav .icon-btn:hover {
  border-color: rgba(239,68,68,.45);
  color: #fecaca;
}
.community-spotlight-count {
  min-width: 3.5rem;
  text-align: center;
  color: #a1a1aa;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.community-spotlight-track {
  position: relative;
  display: grid;
  grid-template-areas: "slide";
  overflow: hidden;
  isolation: isolate;
}
.community-feature-grid {
  grid-area: slide;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  min-width: 0;
}
[data-spotlight-slide] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(36px, 0, 0);
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.5s;
  z-index: 1;
}
[data-spotlight-slide]:not(.is-active):not(.is-leaving):not(.is-enter) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
[data-community-spotlight][data-spotlight-dir="prev"] [data-spotlight-slide] {
  transform: translate3d(-36px, 0, 0);
}
[data-spotlight-slide].is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
  z-index: 3;
}
[data-spotlight-slide].is-enter {
  opacity: 0;
  visibility: visible;
  transform: translate3d(36px, 0, 0);
  transition: none;
}
[data-community-spotlight][data-spotlight-dir="prev"] [data-spotlight-slide].is-enter {
  transform: translate3d(-36px, 0, 0);
}
[data-spotlight-slide].is-leaving {
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  z-index: 2;
  transition:
    opacity 0.45s cubic-bezier(0.4, 0, 1, 1),
    transform 0.45s cubic-bezier(0.4, 0, 1, 1),
    visibility 0s linear 0.45s;
}
[data-community-spotlight][data-spotlight-dir="next"] [data-spotlight-slide].is-leaving {
  transform: translate3d(-28px, 0, 0);
}
[data-community-spotlight][data-spotlight-dir="prev"] [data-spotlight-slide].is-leaving {
  transform: translate3d(28px, 0, 0);
}
/* Legacy hidden attr still force-hides if present */
.community-feature-grid[hidden],
[data-spotlight-slide][hidden] {
  display: none !important;
}
.community-feature-media {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  background: #000;
  aspect-ratio: 16 / 9;
}
.community-feature-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.55s ease;
}
.community-feature-media:hover img { transform: scale(1.03); }
.community-feature-ph {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #52525b;
  background: #141414;
}
.community-feature-live {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  padding: 0.28rem 0.55rem;
  border: 1px solid rgba(239,68,68,.45);
  background: rgba(0,0,0,.72);
  color: #fecaca;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.community-feature-live::before {
  content: '';
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.4rem;
  border-radius: 99px;
  background: var(--red-hot);
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55);
  animation: community-pulse 2s ease-out infinite;
  vertical-align: 0.05em;
}
.community-feature-copy {
  position: relative;
  z-index: 1;
  max-width: 32rem;
  min-width: 0;
}
.community-feature-copy h3 {
  margin: 0 0 0.7rem;
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  color: #fff;
}
.community-feature-lead {
  margin: 0 0 0.85rem;
  color: #b4b4ba;
  font-size: 1.05rem;
  line-height: 1.45;
}
.community-feature-countdown {
  margin: 0 0 1.15rem;
  color: #fca5a5;
  font-size: 0.95rem;
  font-weight: 600;
}
.community-feature-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.community-spotlight-dots {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 1.25rem;
}
.community-spotlight-dots button {
  width: 0.55rem;
  height: 0.55rem;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgba(255,255,255,.22);
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
}
.community-spotlight-dots button.is-on {
  background: var(--red-hot);
  width: 1.35rem;
}

.community-lazy-sentinel {
  width: 100%;
  height: 1px;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
.community-section { padding: 3rem 0; }
.community-section-alt {
  background:
    radial-gradient(ellipse 40% 30% at 90% 0%, rgba(220,38,38,.06), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 55%);
  border-block: 1px solid rgba(255,255,255,.05);
}
.community-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}
.community-section-head-solo { margin-bottom: 1.75rem; }
.community-section-tools {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
}
.community-count-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.55rem;
  border: 1px solid rgba(239,68,68,.35);
  background: rgba(239,68,68,.1);
  color: #fecaca;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.community-count-chip-free {
  border-color: rgba(134,239,172,.3);
  background: rgba(134,239,172,.08);
  color: #bbf7d0;
}
.community-section-kicker {
  margin: 0 0 0.35rem;
  color: var(--red-hot);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.community-section-head h2,
.community-empty h2 {
  margin: 0 0 0.4rem;
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
}
.community-section-lead,
.community-empty p {
  margin: 0;
  color: #a1a1aa;
  font-size: 0.98rem;
  max-width: 36rem;
}
.community-empty {
  padding: 2.25rem 1.5rem;
  border: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(135deg, rgba(220,38,38,.07), transparent 55%),
    rgba(255,255,255,.02);
  text-align: left;
  clip-path: polygon(0 0, 100% 0, 100% 92%, 98% 100%, 0 100%);
}
.community-empty h3 {
  margin: 0 0 0.45rem;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: #fff;
}
.community-empty p {
  margin: 0;
  color: #a1a1aa;
  font-size: 0.98rem;
  max-width: 36rem;
}
.community-empty .btn { margin-top: 1.1rem; }

.community-faq {
  padding: 3.5rem 0;
  border-top: 1px solid rgba(255,255,255,.05);
  background: linear-gradient(180deg, rgba(255,255,255,.015), transparent 40%);
}
.community-faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.community-faq-intro h2 {
  margin: 0 0 0.55rem;
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
}
.community-faq-intro > p:not(.community-section-kicker) {
  margin: 0 0 1.25rem;
  color: #a1a1aa;
  max-width: 28rem;
}
.community-faq-connect { display: inline-flex; }
.community-faq-list {
  display: grid;
  gap: 0.55rem;
  overflow-anchor: none;
}
.community-faq-item {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.25);
  padding: 0 1rem;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.community-faq-item.is-open {
  border-color: rgba(239,68,68,.28);
  background: rgba(220,38,38,.05);
}
.community-faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  margin: 0;
  padding: 0.95rem 0;
  border: 0;
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  text-align: left;
  cursor: pointer;
}
.community-faq-trigger::after {
  content: '+';
  flex: 0 0 auto;
  color: var(--red-hot);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1;
  transition: transform 0.25s ease;
}
.community-faq-item.is-open .community-faq-trigger::after {
  content: '\2212';
  transform: none;
}
.community-faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.community-faq-item.is-open .community-faq-panel {
  grid-template-rows: 1fr;
}
.community-faq-panel-inner {
  overflow: hidden;
  min-height: 0;
}
.community-faq-panel-inner p {
  margin: 0;
  padding: 0 0 1rem;
  color: #b0b0b6;
  line-height: 1.5;
  max-width: 42rem;
}

.community-cta {
  position: relative;
  isolation: isolate;
  padding: 4.75rem 0 5.25rem;
  overflow: hidden;
  text-align: center;
}
.community-cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #050505, #0a0606 60%, #120808);
}
.community-cta-glow {
  position: absolute;
  left: 50%;
  bottom: -18%;
  width: 120%;
  height: 70%;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  background: radial-gradient(
    ellipse 55% 70% at 50% 100%,
    rgba(239, 68, 68, 0.55) 0%,
    rgba(220, 38, 38, 0.28) 38%,
    transparent 68%
  );
  animation: community-cta-glow-pulse 3.2s ease-in-out infinite;
  pointer-events: none;
  will-change: opacity, transform;
}
.community-cta-glow-soft {
  width: 90%;
  height: 55%;
  bottom: -12%;
  background: radial-gradient(
    ellipse 50% 60% at 50% 100%,
    rgba(239, 68, 68, 0.35) 0%,
    transparent 70%
  );
  filter: blur(10px);
  animation-name: community-cta-glow-soft;
  animation-duration: 4.4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.community-cta-embers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.community-cta-embers span {
  position: absolute;
  bottom: -8%;
  width: 2px;
  height: 18px;
  border-radius: 99px;
  background: linear-gradient(180deg, rgba(254, 202, 202, 0.9), rgba(239, 68, 68, 0));
  opacity: 0;
  animation: community-cta-ember 7.5s ease-in infinite;
}
.community-cta-embers span:nth-child(1) { left: 12%; animation-delay: 0s; height: 22px; }
.community-cta-embers span:nth-child(2) { left: 28%; animation-delay: 1.2s; height: 14px; width: 1.5px; }
.community-cta-embers span:nth-child(3) { left: 44%; animation-delay: 2.4s; height: 26px; }
.community-cta-embers span:nth-child(4) { left: 58%; animation-delay: 0.7s; height: 16px; width: 1.5px; }
.community-cta-embers span:nth-child(5) { left: 72%; animation-delay: 3.1s; height: 20px; }
.community-cta-embers span:nth-child(6) { left: 86%; animation-delay: 1.8s; height: 15px; width: 1.5px; }
.community-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 36rem;
}
.community-cta h2 {
  margin: 0 0 0.65rem;
  font-size: clamp(1.45rem, 3vw, 2rem);
}
.community-cta p {
  margin: 0 auto 1.4rem;
  color: #b4b4ba;
  font-size: 1.05rem;
  line-height: 1.45;
  max-width: 30rem;
}
.community-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
}

@keyframes community-copy-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes community-photo-drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.09) translate3d(-1.5%, -1.2%, 0); }
}
@keyframes community-pulse {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
@keyframes community-cta-glow-pulse {
  0%, 100% {
    opacity: 0.35;
    transform: translateX(-50%) scale(0.92, 0.82);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.06, 1.18);
  }
}
@keyframes community-cta-glow-soft {
  from {
    opacity: 0.3;
    transform: translateX(-50%) translateY(8%) scale(0.95);
  }
  to {
    opacity: 0.95;
    transform: translateX(-50%) translateY(-6%) scale(1.08);
  }
}
@keyframes community-step-arrow-line {
  0%, 100% { transform: scaleX(0.65); opacity: 0.35; }
  50% { transform: scaleX(1); opacity: 1; }
}
@keyframes community-step-arrow-head {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.4; }
  50% { transform: rotate(45deg) translate(3px, -3px); opacity: 1; }
}
@keyframes community-scan {
  from { background-position: 0 -40%; }
  to { background-position: 0 140%; }
}
@keyframes community-cta-ember {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scaleY(0.6);
  }
  12% { opacity: 0.85; }
  70% { opacity: 0.45; }
  100% {
    opacity: 0;
    transform: translate3d(8px, -72vh, 0) scaleY(1.2);
  }
}

@media (max-width: 980px) {
  .community-feature-grid,
  .community-faq-grid { grid-template-columns: 1fr; }
  .community-steps {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
  .community-step { padding: 1.1rem 0.5rem; }
  .community-step-arrow {
    width: 1.25rem;
    height: 1.85rem;
    margin: 0.1rem auto 0.25rem;
    flex-direction: column;
    transform: none;
  }
  .community-step-arrow-line {
    width: 2px;
    height: 1.05rem;
    background: linear-gradient(180deg, transparent, rgba(239, 68, 68, 0.85));
    transform-origin: center top;
    animation-name: community-step-arrow-line-v;
  }
  .community-step-arrow-head {
    margin-left: 0;
    margin-top: -3px;
    transform: rotate(135deg);
    animation-name: community-step-arrow-head-v;
  }
  .community-metrics { grid-template-columns: 1fr 1fr; }
  .community-metric-wide { grid-column: 1 / -1; }
  [data-spotlight-slide],
  [data-community-spotlight][data-spotlight-dir="prev"] [data-spotlight-slide],
  [data-spotlight-slide].is-enter,
  [data-community-spotlight][data-spotlight-dir="prev"] [data-spotlight-slide].is-enter,
  [data-community-spotlight][data-spotlight-dir="next"] [data-spotlight-slide].is-leaving,
  [data-community-spotlight][data-spotlight-dir="prev"] [data-spotlight-slide].is-leaving {
    transform: none;
  }
}
@media (max-width: 640px) {
  .community-hero { min-height: min(72vh, 560px); }
  .community-hero h1 {
    max-width: none;
    font-size: clamp(2rem, 9vw, 2.75rem);
  }
  .community-lead { font-size: 1.05rem; }
  .community-brand { font-size: 1.15rem; letter-spacing: 0.12em; }
  .community-hero-copy { padding-block: 4.75rem 2.25rem; }
  .community-hero-actions,
  .community-feature-actions,
  .community-cta-actions { flex-direction: column; align-items: stretch; }
  .community-hero-actions .btn,
  .community-feature-actions .btn,
  .community-cta-actions .btn { justify-content: center; }
  .community-jump-cta { display: none; }
  .community-jump-full { display: none; }
  .community-jump-short { display: inline; }
  .community-jump-link {
    font-size: 0.86rem;
    padding: 0.45rem 0.55rem;
  }
  .community-metrics { grid-template-columns: 1fr; }
  .community-metric-wide { grid-column: auto; }
  .community-section-tools { width: 100%; justify-content: space-between; }
  .community-flow,
  .community-section,
  .community-faq { padding-block: 2.5rem; }
  .community-feature { padding: 2.5rem 0 1.25rem; }
  .community-cta { padding: 3.5rem 0 4rem; }
  .community-faq-trigger { font-size: 0.95rem; gap: 0.75rem; }
  .product-patreon-perk { font-size: 0.9rem; }
  .product-title { font-size: clamp(1.55rem, 7vw, 1.9rem); }
  .product-price { font-size: clamp(1.65rem, 7vw, 2rem); }
}
@keyframes community-step-arrow-line-v {
  0%, 100% { transform: scaleY(0.65); opacity: 0.35; }
  50% { transform: scaleY(1); opacity: 1; }
}
@keyframes community-step-arrow-head-v {
  0%, 100% { transform: rotate(135deg) translate(0, 0); opacity: 0.4; }
  50% { transform: rotate(135deg) translate(2px, -2px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .community-hero-copy,
  .community-hero-photo,
  .community-hero-scan,
  .community-feature-live::before,
  .community-cta-glow,
  .community-cta-embers span,
  .community-step-arrow-line,
  .community-step-arrow-head,
  .community-step,
  .community-feature-media img,
  .community-faq-panel,
  .community-spotlight-dots button,
  [data-spotlight-slide] {
    animation: none !important;
    transition: none !important;
  }
  .community-step { opacity: 1; transform: none; }
  [data-spotlight-slide]:not(.is-active) {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transform: none;
  }
  [data-spotlight-slide].is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}
.tone-ok { color: #86efac; }
.tone-warn { color: #fde68a; }
.tone-error { color: #fda4af; }
.cloud-meta-bar, .cloud-controls, .cloud-actions { display: grid; gap: 0.75rem; margin: 0 0 1rem; }
.cloud-meta-bar { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); padding: 0.85rem 0.9rem; border: 1px solid rgba(255,255,255,.06); border-radius: 8px; background: rgba(0,0,0,.2); }
.cloud-meta-label, .cloud-meta-bar small { display: block; color: #71717a; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.cloud-controls { grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); align-items: end; }
.cloud-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cloud-row { grid-template-columns: minmax(0, 1fr) auto; }
.cloud-file-flags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; }
.cloud-file-flags .flag { font-size: 11px; color: #a1a1aa; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 4px; padding: 0.1rem 0.4rem; }
.cloud-file-flags .flag.ok { color: #86efac; border-color: rgba(134,239,172,.25); }
.cloud-file-flags .flag.warn { color: #fde68a; border-color: rgba(253,230,138,.25); }
.cloud-file-flags .flag.muted { color: #71717a; }
.cloud-path { display: block; margin-top: 0.35rem; color: #71717a; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.nc-dialog { border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: #0c0c0e; color: #e4e4e7; width: min(920px, calc(100vw - 2rem)); max-height: min(84vh, 820px); padding: 0; }
.nc-dialog::backdrop { background: rgba(0,0,0,.65); }
.nc-dialog-inner { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; max-height: min(84vh, 820px); }
.nc-dialog-head, .nc-dialog-foot, .nc-toolbar { display: flex; gap: 0.75rem; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.nc-dialog-foot { border-bottom: 0; border-top: 1px solid rgba(255,255,255,.06); justify-content: flex-end; }
.nc-dialog-head h3 { margin: 0; font-size: 1.05rem; }
.nc-crumbs { margin: 0.2rem 0 0; color: #71717a; font-size: 12px; }
.nc-toolbar { justify-content: flex-start; }
.nc-toolbar input[type="search"] { flex: 1; min-width: 0; background: #111; border: 1px solid rgba(255,255,255,.1); color: #fff; border-radius: 6px; min-height: 36px; padding: 0 0.7rem; }
.nc-list { overflow: auto; padding: 0.5rem 0.75rem 1rem; display: grid; gap: 0.35rem; }
.nc-item { display: flex; gap: 0.65rem; align-items: center; padding: 0.55rem 0.65rem; border-radius: 6px; border: 1px solid rgba(255,255,255,.04); background: rgba(255,255,255,.02); }
.nc-item-main { display: grid; gap: 0.1rem; min-width: 0; }
.nc-item-main strong { color: #fff; font-size: 0.92rem; }
.nc-item-main small { color: #71717a; font-size: 12px; }
@media (max-width: 720px) {
  .access-panel-actions { flex-direction: column; align-items: stretch; }
  .cloud-controls { grid-template-columns: 1fr; }
}

/* Auth login stage */
.auth-main {
  position: relative;
  padding: 0;
  overflow: hidden;
}
.auth-stage {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - var(--header));
  min-height: calc(100dvh - var(--header));
  display: grid;
  place-items: center;
  padding: clamp(2rem, 5vw, 3.5rem) 1.25rem;
}
.auth-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 50% 110%, rgba(220, 38, 38, 0.2), transparent 58%),
    radial-gradient(ellipse 45% 40% at 82% 18%, rgba(220, 38, 38, 0.12), transparent 55%),
    linear-gradient(180deg, #0a0a0a 0%, #050505 55%, #080202 100%);
}
.auth-grid {
  position: absolute;
  inset: -20%;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
  animation: maintenance-grid-drift 28s linear infinite;
  transform: perspective(700px) rotateX(58deg) translateY(-8%);
  opacity: 0.65;
}
.auth-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(42px);
  opacity: 0.4;
}
.auth-orb-a {
  width: min(40vw, 340px);
  height: min(40vw, 340px);
  left: -10%;
  top: 12%;
  background: rgba(220, 38, 38, 0.26);
  animation: maintenance-orb-float 11s ease-in-out infinite alternate;
}
.auth-orb-b {
  width: min(34vw, 280px);
  height: min(34vw, 280px);
  right: -8%;
  bottom: 10%;
  background: rgba(239, 68, 68, 0.16);
  animation: maintenance-orb-float 15s ease-in-out infinite alternate-reverse;
}
.auth-scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(239, 68, 68, 0.07) 48%, transparent 52%);
  background-size: 100% 220%;
  animation: maintenance-scan 6s ease-in-out infinite;
  mix-blend-mode: screen;
}
.auth-embers {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.auth-embers span {
  position: absolute;
  left: calc(10% + (var(--i) * 8%));
  bottom: -4%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fca5a5;
  opacity: 0;
  animation: maintenance-ember 7.5s ease-in infinite;
  animation-delay: calc(var(--i) * 0.5s);
}
.auth-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 28rem);
  margin-inline: auto;
  display: grid;
  gap: clamp(1.35rem, 3vw, 2rem);
  align-items: center;
  justify-items: center;
  justify-content: center;
  animation: maintenance-copy-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.auth-ring {
  position: relative;
  width: min(42vw, 180px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.auth-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.auth-ring-track {
  stroke: rgba(255,255,255,0.08);
  stroke-width: 2;
}
.auth-ring-progress {
  stroke: #ef4444;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 260 560;
  transform-origin: 160px 160px;
  animation: maintenance-spin 5.2s linear infinite;
}
.auth-ring-inner { stroke-width: 1.25; }
.auth-ring-dash {
  stroke: rgba(252, 165, 165, 0.5);
  stroke-width: 1.5;
  stroke-dasharray: 8 14;
  transform-origin: 160px 160px;
  animation: maintenance-spin-rev 13s linear infinite;
}
.auth-core {
  position: relative;
  z-index: 1;
  width: 4.25rem;
  height: 4.25rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.12);
  background:
    radial-gradient(circle at 50% 40%, rgba(220, 38, 38, 0.28), transparent 65%),
    rgba(8, 8, 8, 0.88);
  color: #fecaca;
}
.auth-core-pulse {
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(239, 68, 68, 0.35);
  animation: maintenance-core-pulse 2.4s ease-out infinite;
}
.auth-panel {
  width: 100%;
  margin-inline: auto;
  padding: clamp(1.5rem, 3vw, 2.15rem);
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(8, 8, 8, 0.72);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  text-align: center;
}
.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  margin: 0 0 1.15rem;
  color: #fff;
}
.auth-brand img {
  width: 3.25rem;
  height: auto;
  flex-shrink: 0;
}
.auth-brand-name {
  font-family: Orbitron, sans-serif;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.25;
  white-space: nowrap;
}
.auth-brand-name span { color: var(--red-hot); }
.auth-status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
  color: #fca5a5;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.auth-status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55);
  animation: maintenance-status-pulse 1.8s ease-out infinite;
}
.auth-panel h1 {
  margin: 0 0 0.65rem;
  font-size: clamp(1.85rem, 4vw, 2.45rem);
  letter-spacing: 0.03em;
  line-height: 1.1;
}
.auth-lead {
  margin: 0 0 1.35rem;
  color: #b4b4be;
  font-size: 1.05rem;
  line-height: 1.45;
}
.auth-form { display: grid; gap: 0.9rem; text-align: left; }
.auth-form .auth-hint {
  display: block;
  margin-top: 0.35rem;
  color: #71717a;
  font-size: 0.78rem;
  line-height: 1.35;
}
.auth-form label span {
  display: block;
  margin-bottom: 0.3rem;
  color: #a1a1aa;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"],
.auth-form input:not([type]) {
  background: rgba(0, 0, 0, 0.45);
  border-color: rgba(255,255,255,0.12);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.auth-form input[type="email"]:focus,
.auth-form input[type="password"]:focus,
.auth-form input[type="text"]:focus,
.auth-form input:not([type]):focus {
  border-color: rgba(239, 68, 68, 0.55);
  background: rgba(0, 0, 0, 0.65);
  outline: none;
}
.auth-form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
}
.auth-check {
  display: inline-flex !important;
  align-items: center;
  gap: 0.5rem;
  color: #c4c4cc;
  font-size: 0.92rem;
  letter-spacing: 0;
  grid-template-columns: none;
}
.auth-check input { width: auto; min-height: 0; margin: 0; }
.auth-link {
  color: #fca5a5;
  font-size: 0.9rem;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.auth-link:hover {
  color: #fff;
  border-color: rgba(239, 68, 68, 0.65);
}
.auth-submit {
  width: 100%;
  justify-content: center;
  min-height: 2.85rem;
  margin-top: 0.25rem;
  gap: 0.5rem;
}
.auth-alt {
  margin-top: 1.35rem;
  padding-top: 1.15rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center;
}
.auth-alt p {
  margin: 0 0 0.45rem;
  color: #71717a;
  font-size: 0.88rem;
}
.auth-alt a {
  color: #e4e4e7;
  font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.auth-alt a:hover {
  color: #fff;
  border-color: rgba(239, 68, 68, 0.7);
}
@media (max-width: 420px) {
  .auth-brand-name { white-space: normal; letter-spacing: 0.06em; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-grid,
  .auth-orb,
  .auth-scan,
  .auth-embers span,
  .auth-ring-progress,
  .auth-ring-dash,
  .auth-core-pulse,
  .auth-status-dot,
  .auth-shell {
    animation: none !important;
  }
  .auth-shell { opacity: 1; transform: none; }
}

/* Maintenance page */
.maintenance-body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: #050505;
  color: #e5e7eb;
  overflow: hidden;
}
.maintenance-stage {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(2rem, 5vw, 4rem) 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}
.maintenance-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 50% 110%, rgba(220, 38, 38, 0.22), transparent 58%),
    radial-gradient(ellipse 45% 40% at 18% 20%, rgba(220, 38, 38, 0.12), transparent 55%),
    linear-gradient(180deg, #0a0a0a 0%, #050505 55%, #080202 100%);
}
.maintenance-grid {
  position: absolute;
  inset: -20%;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);
  animation: maintenance-grid-drift 28s linear infinite;
  transform: perspective(700px) rotateX(58deg) translateY(-8%);
  opacity: 0.7;
}
.maintenance-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.45;
}
.maintenance-orb-a {
  width: min(42vw, 380px);
  height: min(42vw, 380px);
  left: -8%;
  top: 18%;
  background: rgba(220, 38, 38, 0.28);
  animation: maintenance-orb-float 10s ease-in-out infinite alternate;
}
.maintenance-orb-b {
  width: min(36vw, 300px);
  height: min(36vw, 300px);
  right: -6%;
  bottom: 12%;
  background: rgba(239, 68, 68, 0.18);
  animation: maintenance-orb-float 14s ease-in-out infinite alternate-reverse;
}
.maintenance-scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(239, 68, 68, 0.08) 48%,
    transparent 52%
  );
  background-size: 100% 220%;
  animation: maintenance-scan 5.5s ease-in-out infinite;
  mix-blend-mode: screen;
}
.maintenance-embers {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.maintenance-embers span {
  position: absolute;
  left: calc(8% + (var(--i) * 7.2%));
  bottom: -4%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fca5a5;
  opacity: 0;
  animation: maintenance-ember 7s ease-in infinite;
  animation-delay: calc(var(--i) * 0.45s);
}
.maintenance-ring {
  position: relative;
  z-index: 1;
  width: min(72vw, 280px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  animation: maintenance-copy-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.maintenance-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.maintenance-ring-track {
  stroke: rgba(255,255,255,0.08);
  stroke-width: 2;
}
.maintenance-ring-progress {
  stroke: #ef4444;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 280 550;
  transform-origin: 160px 160px;
  animation: maintenance-spin 4.8s linear infinite;
}
.maintenance-ring-inner { stroke-width: 1.25; }
.maintenance-ring-dash {
  stroke: rgba(252, 165, 165, 0.55);
  stroke-width: 1.5;
  stroke-dasharray: 8 14;
  transform-origin: 160px 160px;
  animation: maintenance-spin-rev 12s linear infinite;
}
.maintenance-core {
  position: relative;
  z-index: 1;
  width: 5.5rem;
  height: 5.5rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.12);
  background:
    radial-gradient(circle at 50% 40%, rgba(220, 38, 38, 0.28), transparent 65%),
    rgba(8, 8, 8, 0.85);
  color: #fecaca;
}
.maintenance-core-pulse {
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(239, 68, 68, 0.35);
  animation: maintenance-core-pulse 2.4s ease-out infinite;
}
.maintenance-copy {
  position: relative;
  z-index: 1;
  width: min(100%, 38rem);
  text-align: center;
  animation: maintenance-copy-in 1s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}
.maintenance-brand {
  margin: 0 0 1.1rem;
  font-family: Orbitron, sans-serif;
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
}
.maintenance-brand span { color: var(--red-hot); }
.maintenance-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1.15rem;
  color: #fca5a5;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.maintenance-status-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55);
  animation: maintenance-status-pulse 1.8s ease-out infinite;
}
.maintenance-copy h1 {
  margin: 0 0 1rem;
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
}
.maintenance-lead {
  margin: 0 auto 1.6rem;
  max-width: 34rem;
  color: #c4c4cc;
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.5;
}
.maintenance-meter {
  position: relative;
  width: min(100%, 22rem);
  height: 3px;
  margin: 0 auto 1.25rem;
  overflow: hidden;
  background: rgba(255,255,255,0.08);
}
.maintenance-meter-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, #ef4444, #fca5a5, transparent);
  animation: maintenance-meter 2.2s ease-in-out infinite;
}
.maintenance-footnote {
  margin: 0 0 1.5rem;
  color: #8b8b96;
  font-size: 0.95rem;
}
.maintenance-staff {
  margin: 0;
  font-size: 0.9rem;
}
.maintenance-staff a {
  color: #a1a1aa;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.maintenance-staff a:hover {
  color: #fff;
  border-color: rgba(239, 68, 68, 0.7);
}

@keyframes maintenance-copy-in {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes maintenance-grid-drift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 48px, 48px 0; }
}
@keyframes maintenance-orb-float {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(18px, -22px, 0); }
}
@keyframes maintenance-scan {
  0%, 100% { background-position: 0 -40%; opacity: 0.35; }
  50% { background-position: 0 120%; opacity: 0.7; }
}
@keyframes maintenance-ember {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.6); }
  15% { opacity: 0.85; }
  100% { opacity: 0; transform: translate3d(calc((var(--i) - 6) * 6px), -70vh, 0) scale(1.2); }
}
@keyframes maintenance-spin {
  to { transform: rotate(360deg); }
}
@keyframes maintenance-spin-rev {
  to { transform: rotate(-360deg); }
}
@keyframes maintenance-core-pulse {
  0% { opacity: 0.7; transform: scale(0.92); }
  70% { opacity: 0; transform: scale(1.18); }
  100% { opacity: 0; transform: scale(1.22); }
}
@keyframes maintenance-status-pulse {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
@keyframes maintenance-meter {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

@media (min-width: 900px) {
  .maintenance-stage {
    grid-template-columns: auto minmax(0, 38rem);
    justify-content: center;
    align-items: center;
    text-align: left;
    gap: clamp(2.5rem, 6vw, 5rem);
  }
  .maintenance-copy { text-align: left; }
  .maintenance-meter { margin-left: 0; }
  .maintenance-lead { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .maintenance-grid,
  .maintenance-orb,
  .maintenance-scan,
  .maintenance-embers span,
  .maintenance-ring-progress,
  .maintenance-ring-dash,
  .maintenance-core-pulse,
  .maintenance-status-dot,
  .maintenance-meter-bar,
  .maintenance-ring,
  .maintenance-copy {
    animation: none !important;
  }
  .maintenance-ring,
  .maintenance-copy { opacity: 1; transform: none; }
}

/* Patreon tier badges */
.patron-badge {
  --patron-color: #f59e0b;
  --patron-accent: #ef4444;
  --patron-text: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  isolation: isolate;
  flex-shrink: 0;
}
.patron-badge-core {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.55rem 0.18rem 0.35rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--patron-color) 55%, #fff 12%);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--patron-color) 78%, #000 22%), color-mix(in srgb, var(--patron-accent) 72%, #111 28%));
  color: var(--patron-text);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 0 0 1px rgba(0,0,0,.35),
    0 6px 16px color-mix(in srgb, var(--patron-accent) 35%, transparent);
  overflow: hidden;
}
.patron-badge-label {
  font-family: Orbitron, sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.patron-badge-gem {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  flex-shrink: 0;
  background:
    radial-gradient(circle at 30% 30%, #fff 0 18%, transparent 42%),
    radial-gradient(circle at 50% 50%, var(--patron-color), var(--patron-accent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--patron-color) 70%, transparent);
  animation: patron-gem-pulse 2.2s ease-in-out infinite;
}
.patron-badge-glow {
  position: absolute;
  inset: -2px;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(circle, color-mix(in srgb, var(--patron-accent) 45%, transparent), transparent 70%);
  opacity: 0.65;
  filter: blur(4px);
  animation: patron-glow 2.8s ease-in-out infinite;
  pointer-events: none;
}
.patron-badge-sheen {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
}
.patron-badge-sheen::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -40%;
  width: 45%;
  height: 140%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg);
  animation: patron-sheen 3.4s ease-in-out infinite;
}

.patron-badge--xs .patron-badge-core { padding: 0.12rem 0.4rem 0.12rem 0.28rem; gap: 0.28rem; }
.patron-badge--xs .patron-badge-label { font-size: 0.5rem; letter-spacing: 0.06em; }
.patron-badge--xs .patron-badge-gem { width: 0.42rem; height: 0.42rem; }
.patron-badge--md .patron-badge-core { padding: 0.28rem 0.7rem 0.28rem 0.42rem; gap: 0.4rem; }
.patron-badge--md .patron-badge-label { font-size: 0.68rem; }
.patron-badge--md .patron-badge-gem { width: 0.65rem; height: 0.65rem; }

.patron-badge--avatar {
  position: absolute;
  right: -0.15rem;
  bottom: -0.1rem;
  z-index: 4;
}
.patron-badge--avatar .patron-badge-core {
  padding: 0;
  width: 1.05rem;
  height: 1.05rem;
  justify-content: center;
  border-width: 2px;
  border-color: #050505;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--patron-color) 50%, transparent), 0 4px 12px rgba(0,0,0,.45);
}
.patron-badge--avatar .patron-badge-gem {
  width: 0.45rem;
  height: 0.45rem;
  animation: patron-gem-pulse 1.8s ease-in-out infinite;
}
.profile-avatar .patron-badge--avatar {
  right: 0.05rem;
  bottom: 0.05rem;
}
.profile-avatar .patron-badge--avatar .patron-badge-core {
  width: 1.45rem;
  height: 1.45rem;
}
.profile-avatar .patron-badge--avatar .patron-badge-gem {
  width: 0.6rem;
  height: 0.6rem;
}

.patron-badge-orbit {
  display: none;
  position: absolute;
  width: 0.95rem;
  height: 0.95rem;
  left: 0.08rem;
  border: 1px solid color-mix(in srgb, var(--patron-color) 70%, #fff 20%);
  border-top-color: transparent;
  border-radius: 50%;
  pointer-events: none;
}
.patron-badge--forge .patron-badge-core {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--patron-color) 85%, #fff 8%), var(--patron-accent) 55%, #1a0505);
}
.patron-badge--aurora .patron-badge-core {
  background:
    linear-gradient(120deg, var(--patron-color), var(--patron-accent), color-mix(in srgb, var(--patron-color) 40%, #fff 20%), var(--patron-accent));
  background-size: 220% 220%;
  animation: patron-aurora 4.5s linear infinite;
}
.patron-badge--pulse .patron-badge-glow { animation-duration: 1.6s; }
.patron-badge--ember .patron-badge-gem {
  animation: patron-ember 1.4s ease-in-out infinite;
}
.patron-badge--crystal .patron-badge-core {
  border-radius: 0.45rem;
  background:
    linear-gradient(160deg, rgba(255,255,255,.35), transparent 38%),
    linear-gradient(215deg, var(--patron-color), var(--patron-accent));
  border-color: color-mix(in srgb, #fff 45%, var(--patron-color));
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
}
.patron-badge--crystal .patron-badge-gem {
  border-radius: 0.15rem;
  transform: rotate(45deg);
  animation: patron-crystal 2.6s ease-in-out infinite;
}
.patron-badge--neon .patron-badge-core {
  background: rgba(0,0,0,.72);
  border-color: var(--patron-color);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--patron-accent) 55%, transparent),
    0 0 12px color-mix(in srgb, var(--patron-color) 55%, transparent),
    inset 0 0 10px color-mix(in srgb, var(--patron-accent) 28%, transparent);
  animation: patron-neon 2.2s ease-in-out infinite;
}
.patron-badge--neon .patron-badge-label {
  color: var(--patron-color);
  text-shadow: 0 0 8px color-mix(in srgb, var(--patron-color) 70%, transparent);
}
.patron-badge--royal .patron-badge-core {
  border-radius: 0.35rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--patron-color) 35%, #1a1028), color-mix(in srgb, var(--patron-accent) 45%, #0b0614));
  border-color: color-mix(in srgb, var(--patron-color) 40%, #fbbf24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    0 0 0 1px rgba(251, 191, 36, .25),
    0 8px 18px rgba(0,0,0,.4);
}
.patron-badge--royal .patron-badge-gem {
  background:
    radial-gradient(circle at 30% 30%, #fff 0 16%, transparent 40%),
    linear-gradient(135deg, #fde68a, var(--patron-color));
}
.patron-badge--orbit .patron-badge-orbit {
  display: block;
  animation: patron-orbit 2.4s linear infinite;
}
.patron-badge--orbit .patron-badge-core {
  background: rgba(8,8,10,.88);
  border-color: color-mix(in srgb, var(--patron-accent) 45%, #fff 10%);
}
.patron-badge--slash .patron-badge-core {
  border-radius: 0.2rem 0.75rem 0.2rem 0.75rem;
  background:
    linear-gradient(115deg, transparent 0 18%, color-mix(in srgb, #fff 35%, transparent) 18% 24%, transparent 24% 100%),
    linear-gradient(90deg, var(--patron-accent), var(--patron-color));
  animation: patron-slash 3s ease-in-out infinite;
}
.patron-badge--hololith .patron-badge-core {
  border-radius: 0.25rem;
  background:
    repeating-linear-gradient(
      180deg,
      color-mix(in srgb, var(--patron-color) 35%, transparent) 0 1px,
      transparent 1px 3px
    ),
    linear-gradient(135deg, rgba(0,0,0,.55), color-mix(in srgb, var(--patron-accent) 40%, #000));
  border-color: color-mix(in srgb, var(--patron-color) 65%, #fff 10%);
  box-shadow: inset 0 0 12px color-mix(in srgb, var(--patron-color) 35%, transparent);
}
.patron-badge--hololith .patron-badge-sheen::before {
  animation-duration: 2.2s;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--patron-color) 70%, #fff), transparent);
}

.nav-chip-profile .patron-badge { margin-left: 0.2rem; }
.nav-chip-profile .patron-badge-label { display: none; }
.nav-chip-profile .patron-badge-core { padding: 0.18rem; }

.patron-badge-admin {
  display: grid;
  gap: 0.75rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.patron-badge-admin:last-child { border-bottom: 0; padding-bottom: 0; }
.patron-badge-admin.is-free { opacity: 0.72; }
.patron-badge-admin-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
}
.patron-badge-admin-head strong { color: #fff; font-size: 0.95rem; }
.patron-badge-form { display: grid; gap: 0.75rem; }
.patron-badge-form input[type="color"] {
  width: 100%;
  min-height: 2.25rem;
  padding: 0.2rem;
  cursor: pointer;
}
.patron-badge-form-actions { display: flex; justify-content: flex-end; }
.patron-badge-styles {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 0.55rem;
}
.patron-badge-styles legend {
  padding: 0;
  margin: 0 0 0.15rem;
  color: #9a9aa2;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.patron-badge-style-grid {
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
}
.patron-badge-style-card {
  position: relative;
  display: grid;
  gap: 0.55rem;
  padding: 0.7rem 0.75rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: rgba(0,0,0,.28);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.patron-badge-style-card:hover {
  border-color: rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
}
.patron-badge-style-card:has(input:checked) {
  border-color: color-mix(in srgb, var(--red-hot) 55%, rgba(255,255,255,.2));
  background: rgba(220, 38, 38, .08);
  box-shadow: inset 0 0 0 1px rgba(239,68,68,.18);
}
.patron-badge-style-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.patron-badge-style-preview {
  display: flex;
  justify-content: center;
  min-height: 1.8rem;
  align-items: center;
}
.patron-badge-style-copy {
  display: grid;
  gap: 0.15rem;
  text-align: center;
}
.patron-badge-style-copy strong {
  color: #f4f4f5;
  font-size: 0.82rem;
  font-weight: 700;
}
.patron-badge-style-copy small {
  color: #71717a;
  font-size: 0.72rem;
  line-height: 1.3;
}

@keyframes patron-sheen {
  0%, 55% { transform: translateX(0) skewX(-18deg); opacity: 0; }
  60% { opacity: 0.9; }
  100% { transform: translateX(320%) skewX(-18deg); opacity: 0; }
}
@keyframes patron-glow {
  0%, 100% { opacity: 0.4; transform: scale(0.92); }
  50% { opacity: 0.85; transform: scale(1.08); }
}
@keyframes patron-gem-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.18); filter: brightness(1.35); }
}
@keyframes patron-aurora {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes patron-ember {
  0%, 100% { transform: scale(1) translateY(0); box-shadow: 0 0 6px color-mix(in srgb, var(--patron-accent) 60%, transparent); }
  50% { transform: scale(1.25) translateY(-1px); box-shadow: 0 0 14px color-mix(in srgb, var(--patron-color) 80%, transparent); }
}
@keyframes patron-crystal {
  0%, 100% { filter: brightness(1); box-shadow: 0 0 6px color-mix(in srgb, var(--patron-color) 45%, transparent); }
  50% { filter: brightness(1.4); box-shadow: 0 0 14px color-mix(in srgb, var(--patron-accent) 70%, transparent); }
}
@keyframes patron-neon {
  0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--patron-accent) 45%, transparent), 0 0 10px color-mix(in srgb, var(--patron-color) 40%, transparent); }
  50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--patron-color) 70%, transparent), 0 0 18px color-mix(in srgb, var(--patron-accent) 65%, transparent); }
}
@keyframes patron-orbit {
  to { transform: rotate(360deg); }
}
@keyframes patron-slash {
  0%, 100% { filter: saturate(1); }
  50% { filter: saturate(1.35) brightness(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .patron-badge-glow,
  .patron-badge-sheen::before,
  .patron-badge-gem,
  .patron-badge-orbit,
  .patron-badge--aurora .patron-badge-core,
  .patron-badge--neon .patron-badge-core,
  .patron-badge--slash .patron-badge-core {
    animation: none !important;
  }
}

/* Native Blueprint viewer (bue-render) */
.bp-viewer {
  --bp-viewer-height: 643px;
  display: grid;
  gap: 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 0.85rem;
  background: #0b0d10;
  overflow: visible;
}
.bp-viewer-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.35);
  border-radius: 0.85rem 0.85rem 0 0;
}
.bp-viewer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #d4d4d8;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bp-viewer-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.bp-viewer-stage {
  position: relative;
  background: #0b0d10;
  overflow: visible;
}
.bp-viewer-playground,
.bp-viewer-playground.playground,
.bp-viewer .playground {
  width: 100%;
  min-height: var(--bp-viewer-height);
}
.bp-viewer .bue-render,
.bp-viewer .bue-render .frame {
  width: 100%;
}
.bp-viewer-empty,
.bp-viewer-status {
  padding: 1rem 1.1rem;
  color: #a1a1aa;
  font-size: 0.9rem;
}
.bp-viewer-status.is-error { color: #fca5a5; }
.bp-viewer-hint { margin: 0.65rem 0.85rem 0.85rem; font-size: 0.75rem; }
.bp-studio-viewer {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.bp-studio-viewer .bp-viewer-stage {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 0.75rem;
  /* visible so comment bubbles / knot outlines are not clipped */
  overflow: visible;
  background: #0b0d10;
}

/*
  Isolate bue-render from Andersta global resets.
  Global border-box / img / input / label / p rules otherwise break pins,
  comment nodes, knots, and wire endpoint math (matches upstream content-box layout).
*/
.bue-render,
.bue-render *,
.bue-render *::before,
.bue-render *::after {
  box-sizing: content-box !important;
}
.bue-render {
  font-family: Roboto, "Segoe UI", Tahoma, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: normal !important;
  letter-spacing: normal !important;
  color: #fff !important;
  text-transform: none !important;
}
.bue-render img {
  max-width: none !important;
  width: auto !important;
  height: auto !important;
  display: inline-block !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  object-fit: fill !important;
}
.bue-render p,
.bue-render h1,
.bue-render h2,
.bue-render h3,
.bue-render h4,
.bue-render h5,
.bue-render h6 {
  margin: 0 !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: normal !important;
  line-height: inherit !important;
  color: inherit !important;
}
.bue-render label {
  display: inline !important;
  gap: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  letter-spacing: normal !important;
}
.bue-render button,
.bue-render input,
.bue-render textarea,
.bue-render select {
  width: auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font: inherit !important;
  color: inherit !important;
  letter-spacing: normal !important;
  line-height: normal !important;
}
.bue-render input[type="checkbox"] {
  width: auto !important;
  height: auto !important;
  accent-color: auto !important;
}
.bue-render a {
  text-decoration: none !important;
  color: inherit !important;
}
.bue-render svg {
  max-width: none !important;
  overflow: visible !important;
}
.bue-render .pin .connector,
.bue-render .pin .connector::before,
.bue-render .pin .connector::after {
  box-sizing: content-box !important;
}
.bue-render .frame {
  overflow: hidden;
}
.bp-paste-box textarea {
  width: 100%;
  min-height: 10rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.4;
  resize: vertical;
}
.bp-preview-panel {
  margin-top: 0.75rem;
  display: grid;
  gap: 0.5rem;
}
.bp-index-actions {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.bp-create-page .bp-create-hero { margin-bottom: 1.25rem; }
.bp-create-kicker {
  margin: 0 0 0.55rem;
  color: #a1a1aa;
  font-size: 0.82rem;
}
.bp-create-kicker a { color: #e4e4e7; text-decoration: none; }
.bp-create-kicker a:hover { color: #fff; }
.bp-create-wrap { max-width: 1120px; }
.bp-create-form {
  display: grid;
  gap: 1.1rem;
  padding: 1.15rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 1rem;
  background: rgba(0,0,0,.28);
}
.bp-create-meta {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1.4fr 1fr;
}
.bp-create-meta .bp-create-desc { grid-column: 1 / -1; }
.bp-create-meta label {
  display: grid;
  gap: 0.35rem;
  color: #a1a1aa;
  font-size: 0.8rem;
}
.bp-create-meta input,
.bp-create-meta select,
.bp-create-meta textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 0.65rem;
  background: #0b0d10;
  color: #f4f4f5;
  padding: 0.7rem 0.85rem;
  font: inherit;
}
.bp-studio {
  display: grid;
  gap: 0.75rem;
}
.bp-studio-intro { display: grid; gap: 0.55rem; }
.bp-studio-title {
  margin: 0;
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
}
.bp-studio-steps {
  margin: 0;
  padding: .75rem .9rem;
  border-radius: .7rem;
  border: 1px solid rgba(96,165,250,.4);
  background:
    linear-gradient(135deg, rgba(59,130,246,.18), rgba(239,68,68,.08)),
    rgba(0,0,0,.28);
  color: #f4f4f5;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.5;
}
.bp-studio-steps kbd {
  display: inline-block;
  padding: .1rem .4rem;
  border-radius: .35rem;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: .82rem;
  font-weight: 800;
}
.bp-studio-intro a,
.bp-studio-steps a { color: #fca5a5; font-weight: 800; }
.bp-studio-label {
  display: block;
  color: #a1a1aa;
  font-size: 0.8rem;
}
.bp-studio-req { color: #f87171; font-weight: 600; }
.bp-studio-textarea {
  width: 100%;
  min-height: 14rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 0.75rem;
  background: #0b0d10;
  color: #f4f4f5;
  padding: 0.85rem 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.45;
  resize: vertical;
}
.bp-studio-toolbar { display: grid; gap: 0.45rem; }
.bp-studio-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.bp-studio-status { margin: 0; font-size: 0.85rem; }
.bp-studio-status.is-error { color: #fca5a5; }
.bp-studio-raw-hint { margin: 0; font-size: 0.75rem; }
.bp-studio kbd {
  display: inline-block;
  padding: 0.05rem 0.35rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 0.3rem;
  background: rgba(255,255,255,.06);
  font-size: 0.72em;
}
.bp-create-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}
.bp-profile-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 0.85rem;
  background: rgba(0,0,0,.24);
  margin-bottom: 1rem;
}
.bp-profile-cta h3 { margin: 0 0 0.3rem; color: #fff; font-size: 1rem; }
.bp-profile-cta p { margin: 0; max-width: 42rem; }
.profile-blueprints select {
  width: 100%;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 0.55rem;
  background: #0b0d10;
  color: #f4f4f5;
  padding: 0.55rem 0.7rem;
}
@media (max-width: 820px) {
  .bp-create-meta { grid-template-columns: 1fr; }
}
.verified-creator-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(56,189,248,.45);
  background: rgba(14,116,144,.25);
  color: #7dd3fc;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Locked blueprint graph cover */
.bp-graph-panel .bp-access-cover { margin-top: 0; }
.bp-access-cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 22rem;
  margin: 1.25rem 0 0.5rem;
  border-radius: 1rem;
  border: 1px solid rgba(239, 68, 68, 0.28);
  background: radial-gradient(120% 90% at 20% 10%, rgba(239, 68, 68, 0.22), transparent 55%),
    radial-gradient(90% 80% at 85% 80%, rgba(56, 189, 248, 0.16), transparent 50%),
    #07090d;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 18px 50px rgba(0,0,0,.35);
}
.bp-access-cover-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.bp-access-grid {
  position: absolute; inset: -20%;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 28px 28px;
  transform: perspective(600px) rotateX(58deg) translateY(-12%);
  animation: bp-access-grid 18s linear infinite;
  opacity: .55;
}
.bp-access-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  opacity: .7;
}
.bp-access-orb-a {
  width: 14rem; height: 14rem; left: -3rem; top: -4rem;
  background: radial-gradient(circle, rgba(239,68,68,.55), transparent 68%);
  animation: bp-access-float 7s ease-in-out infinite;
}
.bp-access-orb-b {
  width: 12rem; height: 12rem; right: -2rem; bottom: -3rem;
  background: radial-gradient(circle, rgba(56,189,248,.4), transparent 68%);
  animation: bp-access-float 9s ease-in-out infinite reverse;
}
.bp-access-scan {
  position: absolute; left: 8%; right: 8%; height: 2px;
  top: 18%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  box-shadow: 0 0 18px rgba(239,68,68,.55);
  animation: bp-access-scan 3.8s ease-in-out infinite;
}
.bp-access-nodes { position: absolute; inset: 0; }
.bp-access-nodes i {
  position: absolute;
  width: .55rem; height: .55rem;
  border-radius: 2px;
  background: rgba(255,255,255,.28);
  box-shadow: 0 0 12px rgba(239,68,68,.45);
  animation: bp-access-pulse 2.8s ease-in-out infinite;
}
.bp-access-nodes i:nth-child(1) { left: 14%; top: 28%; animation-delay: 0s; }
.bp-access-nodes i:nth-child(2) { left: 28%; top: 62%; animation-delay: .35s; }
.bp-access-nodes i:nth-child(3) { left: 46%; top: 22%; animation-delay: .7s; }
.bp-access-nodes i:nth-child(4) { left: 63%; top: 58%; animation-delay: 1.05s; }
.bp-access-nodes i:nth-child(5) { left: 78%; top: 34%; animation-delay: 1.4s; }
.bp-access-nodes i:nth-child(6) { left: 86%; top: 70%; animation-delay: 1.75s; }
.bp-access-cover-panel {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: .75rem;
  padding: 2.4rem 1.4rem 2.1rem;
  max-width: 34rem;
  margin: 0 auto;
}
.bp-access-badge {
  display: inline-flex;
  padding: .28rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(239,68,68,.55);
  background: rgba(127,29,29,.45);
  color: #fecaca;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
}
.bp-access-lock {
  width: 3.4rem; height: 3.4rem;
  border-radius: 1rem;
  display: grid; place-items: center;
  color: #fff;
  background: linear-gradient(160deg, rgba(239,68,68,.95), rgba(127,29,29,.9));
  box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 12px 30px rgba(239,68,68,.35);
  animation: bp-access-lock 2.6s ease-in-out infinite;
}
.bp-access-cover-panel h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  letter-spacing: .02em;
}
.bp-access-cover-panel p {
  margin: 0;
  color: #d4d4d8;
  line-height: 1.55;
  font-size: .98rem;
}
.bp-access-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  justify-content: center;
  margin-top: .35rem;
}
.hub-rating-stars.is-locked { pointer-events: none; opacity: .72; }

/* Multi-graph editor / show */
.bp-graphs-editor { display: grid; gap: 1rem; margin: 1rem 0 1.25rem; }
.bp-graphs-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; align-items: end; }
.bp-graphs-head h3 { margin: 0 0 .25rem; color: #fff; font-size: 1.05rem; }
.bp-graphs-head p { margin: 0; max-width: 40rem; }
.bp-graphs-list { display: grid; gap: 1rem; }
.bp-graph-row {
  border: 1px solid rgba(255,255,255,.1);
  border-radius: .9rem;
  background: rgba(0,0,0,.28);
  padding: 1rem;
  display: grid;
  gap: .85rem;
}
.bp-graph-row-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.bp-graph-row-head strong { color: #fff; letter-spacing: .04em; text-transform: uppercase; font-size: .78rem; }
.bp-graph-row-meta { display: grid; gap: .75rem; grid-template-columns: 1.4fr .8fr; }
@media (max-width: 720px) { .bp-graph-row-meta { grid-template-columns: 1fr; } }
.bp-graph-row-meta label { display: grid; gap: .3rem; color: #a1a1aa; font-size: .8rem; }
.bp-graph-row-meta input,
.bp-graph-row-meta select {
  width: 100%; border: 1px solid rgba(255,255,255,.12); border-radius: .55rem;
  background: #0b0d10; color: #f4f4f5; padding: .55rem .7rem; font: inherit;
}
.bp-graphs-show { display: grid; gap: 1.75rem; margin: 1.1rem 0 1.4rem; }
.bp-graph-panel { display: grid; gap: .65rem; min-width: 0; }
.bp-graph-panel-meta {
  display: flex; flex-wrap: wrap; gap: .55rem .85rem; align-items: baseline;
  color: #a1a1aa; padding-bottom: .35rem; border-bottom: 1px solid rgba(255,255,255,.08);
}
.bp-graph-panel-meta strong { color: #fff; font-size: 1.05rem; letter-spacing: .04em; }
.bp-graph-panel-meta span {
  display: inline-flex; align-items: center; padding: .15rem .45rem; border-radius: .35rem;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); font-size: .75rem; color: #d4d4d8;
}
.bp-post-section { margin-top: 1.4rem; }
.bp-post-section-title {
  margin: 0 0 .65rem; color: #fff; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .4rem;
}
.bp-thanks-panel {
  margin-top: 1.5rem; padding: 1rem 1.1rem; border-radius: .9rem;
  border: 1px solid rgba(244,114,182,.28); background: rgba(244,114,182,.07);
}
.bp-thanks-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.bp-thanks-list li { display: flex; align-items: center; gap: .65rem; color: #e4e4e7; }
.bp-thanks-list img, .bp-thanks-avatar {
  width: 28px; height: 28px; border-radius: 999px; object-fit: cover;
  background: rgba(255,255,255,.08); display: grid; place-items: center; color: #a1a1aa; flex: 0 0 auto;
}
.bp-thanks-avatar.sm { width: 22px; height: 22px; }
.bp-thanks-list strong { display: block; font-size: .9rem; }
.bp-thanks-list small { color: #71717a; }

/* Profile blueprint cards */
.bp-profile-head-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.bp-profile-lede { margin: 0 0 1.1rem; }
.bp-profile-panels { margin: 0 0 1.15rem; }
.bp-profile-count {
  min-width: 1.6rem; height: 1.6rem; padding: 0 .45rem; border-radius: 999px;
  display: inline-grid; place-items: center; background: rgba(255,255,255,.08); color: #fff; font-size: .75rem; font-weight: 800;
}
.bp-profile-list { display: grid; gap: .85rem; }
.bp-profile-card {
  display: grid; grid-template-columns: 120px 1fr; gap: 0;
  border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; background:
    linear-gradient(145deg, rgba(239,68,68,.08), transparent 42%),
    rgba(24,24,27,.55);
  overflow: hidden;
}
.bp-profile-thumb {
  display: grid; place-items: center; background:
    radial-gradient(circle at 30% 30%, rgba(96,165,250,.18), transparent 55%),
    linear-gradient(160deg, #141820, #0b0d12);
  text-decoration: none; min-height: 100%;
}
.bp-profile-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp-profile-card-actions { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.bp-profile-card-main { padding: 1rem 1.1rem 1.05rem; display: grid; gap: .7rem; }
.bp-profile-card-top { display: flex; justify-content: space-between; gap: .75rem; align-items: start; }
@media (max-width: 640px) {
  .bp-profile-card { grid-template-columns: 1fr; }
  .bp-profile-thumb { min-height: 120px; }
}
.bp-profile-card h4 { margin: 0; color: #fff; font-size: 1.05rem; }
.bp-profile-card h4 a { color: inherit; text-decoration: none; }
.bp-profile-card h4 a:hover { color: #fca5a5; }
.bp-profile-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }
.bp-profile-meta > span {
  display: inline-flex; align-items: center; padding: .18rem .5rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.25); color: #d4d4d8; font-size: .72rem; font-weight: 700;
}
.bp-status.is-live { color: #86efac; border-color: rgba(34,197,94,.4); background: rgba(22,163,74,.15); }
.bp-status.is-pending { color: #fde68a; border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.12); }
.bp-status.is-rejected { color: #fca5a5; border-color: rgba(239,68,68,.45); background: rgba(239,68,68,.12); }
.bp-status.is-draft { color: #a1a1aa; }
.bp-profile-desc { margin: 0; color: #a1a1aa; line-height: 1.45; }
.bp-profile-reject { margin: 0; }
.bp-profile-stats { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; color: #a1a1aa; font-size: .82rem; }
.bp-profile-stats span { display: inline-flex; align-items: center; gap: .3rem; }
.bp-profile-view { margin-left: auto; color: #fca5a5; text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; font-weight: 700; }
.bp-profile-view:hover { color: #fff; }
.bp-profile-thanks summary {
  cursor: pointer; color: #f9a8d4; font-size: .8rem; font-weight: 700;
}
.bp-profile-thanks ul { list-style: none; margin: .55rem 0 0; padding: 0; display: grid; gap: .4rem; }
.bp-profile-thanks li { display: flex; align-items: center; gap: .5rem; color: #d4d4d8; font-size: .85rem; }
.bp-profile-thanks img { border-radius: 999px; object-fit: cover; }
.bp-profile-thanks small { color: #71717a; margin-left: auto; }
.bp-profile-edit summary {
  cursor: pointer; color: #a1a1aa; font-size: .78rem; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
}
.bp-profile-edit-form { margin-top: .75rem; }
.bp-profile-empty {
  display: grid; justify-items: center; gap: .65rem; text-align: center;
  padding: 2.2rem 1rem; border: 1px dashed rgba(255,255,255,.14); border-radius: 1rem; color: #a1a1aa;
}
.bp-cover-field {
  margin: .35rem 0 1rem; padding: 1rem 1.05rem; border-radius: .9rem;
  border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.22);
  display: grid; gap: .75rem;
}
.bp-cover-field-head { display: grid; gap: .45rem; }
.bp-cover-field-title { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.bp-cover-field-head strong { color: #fff; font-size: .98rem; }
.bp-cover-optional {
  display: inline-flex; align-items: center; margin: 0;
  padding: .18rem .55rem; border-radius: 999px;
  border: 1px solid rgba(147,197,253,.35); background: rgba(59,130,246,.14);
  color: #93c5fd; font-size: .7rem; font-style: normal; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
}
.bp-cover-policy {
  margin: 0; max-width: 46rem; padding: .7rem .85rem; border-radius: .65rem;
  border: 1px solid rgba(239,68,68,.45); background: rgba(239,68,68,.12);
  color: #fecaca; font-size: .86rem; line-height: 1.5; font-weight: 600;
}
.bp-cover-field-row { display: grid; grid-template-columns: 180px 1fr; gap: 1rem; align-items: center; }
@media (max-width: 640px) { .bp-cover-field-row { grid-template-columns: 1fr; } }
.bp-cover-preview {
  aspect-ratio: 16 / 9; border-radius: .7rem; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12); background: #0b0d12;
  display: grid; place-items: center;
}
.bp-cover-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp-cover-controls { display: grid; gap: .55rem; justify-items: start; }
.bp-cover-pick { cursor: pointer; }
.bp-cover-remove { display: inline-flex; align-items: center; gap: .4rem; color: #a1a1aa; font-size: .85rem; }
.bp-cover-hint { margin: 0; font-size: .78rem; }
.bp-cover-status {
  margin: 0; font-size: .82rem; font-weight: 700; color: #93c5fd;
}
.bp-cover-status.is-ready { color: #86efac; }
.bp-cover-field.is-uploading { opacity: .85; }
.bp-cover-field.is-uploading .bp-cover-status { color: #fde68a; }
.bp-cover-fallback,
.bp-default-art {
  display: grid; place-items: center; color: #93c5fd;
}
.bp-default-art {
  width: var(--bp-art-size, 4.5rem);
  height: var(--bp-art-size, 4.5rem);
  border-radius: 1rem;
  background:
    radial-gradient(circle at 30% 25%, rgba(147,197,253,.35), transparent 55%),
    radial-gradient(circle at 75% 70%, rgba(59,130,246,.22), transparent 50%),
    linear-gradient(155deg, rgba(30,41,59,.95), rgba(8,12,20,.98));
  box-shadow:
    0 0 0 1px rgba(147,197,253,.28),
    0 0 28px rgba(59,130,246,.28),
    0 12px 28px rgba(0,0,0,.35);
}
.bp-default-art-svg { display: block; filter: drop-shadow(0 0 10px rgba(96,165,250,.35)); }
.bp-default-art-nodes { filter: drop-shadow(0 0 4px rgba(147,197,253,.45)); }
.bp-shot-fallback {
  display: grid;
  place-items: center;
  align-content: center;
  gap: .85rem;
  padding-top: 1.35rem;
  background:
    radial-gradient(ellipse 70% 55% at 50% 48%, rgba(59,130,246,.28), transparent 62%),
    radial-gradient(circle at 18% 20%, rgba(147,197,253,.14), transparent 40%),
    radial-gradient(circle at 82% 78%, rgba(37,99,235,.16), transparent 42%),
    linear-gradient(165deg, #121826 0%, #07090e 55%, #050608 100%);
  position: relative;
  overflow: hidden;
}
.bp-shot-fallback::before {
  content: "";
  position: absolute; inset: 0;
  opacity: .18;
  background-image:
    linear-gradient(rgba(147,197,253,.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(147,197,253,.35) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 48%, #000 20%, transparent 75%);
  pointer-events: none;
}
.bp-shot-fallback .bp-default-art {
  position: relative;
  transform: translateY(0.35rem);
}
.bp-shot-fallback-label {
  position: relative;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #93c5fd;
  text-shadow: 0 0 18px rgba(96,165,250,.45);
}
@keyframes bp-access-grid {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 112px, 112px 0; }
}
@keyframes bp-access-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(14px); }
}
@keyframes bp-access-scan {
  0%, 100% { top: 16%; opacity: .15; }
  50% { top: 78%; opacity: .85; }
}
@keyframes bp-access-pulse {
  0%, 100% { transform: scale(1); opacity: .45; }
  50% { transform: scale(1.35); opacity: 1; }
}
@keyframes bp-access-lock {
  0%, 100% { transform: translateY(0); box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 12px 30px rgba(239,68,68,.35); }
  50% { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 18px 40px rgba(239,68,68,.5); }
}

/* Admin Overview Dashboard V2 */
.ov { display: grid; gap: 1.35rem; animation: ov-fade .45s ease both; }
@keyframes ov-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ov-hero { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: flex-end; padding: 1.25rem 1.4rem; border: 1px solid rgba(255,255,255,.08); border-radius: 1rem; background: radial-gradient(120% 140% at 0% 0%, rgba(52,211,153,.12), transparent 42%), radial-gradient(100% 120% at 100% 0%, rgba(96,165,250,.1), transparent 40%), rgba(24,24,27,.55); }
.ov-kicker { margin: 0; color: #86efac; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; }
.ov-hero h1 { margin: .2rem 0 0; font-size: 2rem; letter-spacing: -.02em; }
.ov-sub { margin: .4rem 0 0; color: #a1a1aa; font-size: .9rem; max-width: 42rem; }
.ov-hero-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.ov-alerts { display: flex; flex-wrap: wrap; gap: .5rem; }
.ov-alert { padding: .45rem .75rem; border-radius: .55rem; border: 1px solid rgba(251,191,36,.3); background: rgba(245,158,11,.1); color: #fcd34d; font-size: .82rem; text-decoration: none; }
.ov-kpis { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ov-kpi { display: grid; gap: .35rem; padding: 1.05rem 1.15rem; border-radius: .9rem; border: 1px solid rgba(255,255,255,.1); background: rgba(24,24,27,.55); text-decoration: none; color: inherit; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.ov-kpi:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.2); background: rgba(39,39,42,.7); }
.ov-kpi span { color: #a1a1aa; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.ov-kpi strong { font-size: 1.65rem; font-family: Orbitron, sans-serif; color: #fff; line-height: 1.1; }
.ov-delta { color: #71717a; font-size: .78rem; font-style: normal; }
.ov-delta.is-up { color: #4ade80; }
.ov-delta.is-down { color: #f87171; }
.ov-kpi.tone-revenue { border-color: rgba(52,211,153,.28); background: linear-gradient(160deg, rgba(16,185,129,.12), rgba(24,24,27,.55)); }
.ov-kpi.tone-pink { border-color: rgba(244,114,182,.28); }
.ov-kpi.tone-cyan { border-color: rgba(34,211,238,.28); }
.ov-kpi.tone-green { border-color: rgba(74,222,128,.28); }
.ov-kpi.tone-orange { border-color: rgba(251,146,60,.28); }
.ov-kpi.tone-blue { border-color: rgba(96,165,250,.28); }
.ov-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.ov-panel { display: grid; gap: .9rem; padding: 1.15rem 1.25rem; border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; background: rgba(24,24,27,.45); }
.ov-panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem; align-items: flex-start; }
.ov-panel-head h2 { margin: 0; font-size: 1.15rem; }
.ov-panel-head p { margin: .25rem 0 0; color: #a1a1aa; font-size: .85rem; }
.ov-panel h3 { margin: .35rem 0 0; font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: #d4d4d8; }
.ov-period { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.ov-period select, .ov-period input[type="date"] { min-height: 2.2rem; background: #18181b; border: 1px solid #3f3f46; border-radius: .5rem; color: #fff; padding: .3rem .55rem; font-size: .82rem; }
.ov-chart { height: 200px; border-radius: .65rem; background: rgba(9,9,11,.4); padding: .75rem; }
.ov-chart.short { height: 150px; }
.ov-chart svg { width: 100%; height: 100%; overflow: visible; }
.ov-empty { display: grid; place-content: center; text-align: center; gap: .35rem; min-height: 140px; color: #a1a1aa; }
.ov-empty.compact { min-height: 90px; }
.ov-empty strong { color: #e4e4e7; }
.ov-empty p { margin: 0; font-size: .85rem; }
.ov-split { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.ov-rank { display: flex; justify-content: space-between; gap: .75rem; padding: .45rem 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: .92rem; }
.ov-rank b { color: #86efac; font-variant-numeric: tabular-nums; }
.ov-rank small { color: #71717a; }
.ov-list-row { display: flex; justify-content: space-between; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid rgba(255,255,255,.06); text-decoration: none; color: inherit; }
.ov-list-row:hover strong { color: #93c5fd; }
.ov-list-row strong { display: block; font-size: .92rem; }
.ov-list-row small { color: #a1a1aa; font-size: .78rem; }
.ov-list-meta { text-align: right; }
.ov-list-meta b { display: block; color: #86efac; }
.ov-mini-kpis { display: grid; gap: .55rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ov-mini-kpis.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ov-mini-kpis article { padding: .7rem .8rem; border-radius: .65rem; border: 1px solid rgba(255,255,255,.08); background: rgba(9,9,11,.35); }
.ov-mini-kpis span { display: block; color: #a1a1aa; font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; }
.ov-mini-kpis strong { display: block; margin-top: .25rem; font-size: 1.25rem; font-family: Orbitron, sans-serif; }
.ov-mini-kpis .tone-cyan { border-color: rgba(34,211,238,.25); }
.ov-mini-kpis .tone-green { border-color: rgba(74,222,128,.25); }
.ov-mini-kpis .tone-orange { border-color: rgba(251,146,60,.25); }
.ov-muted { color: #71717a; font-size: .88rem; margin: .35rem 0; }
.ov-table-wrap { overflow-x: auto; }
.ov-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.ov-table th { text-align: left; padding: .55rem .4rem; color: #a1a1aa; border-bottom: 1px solid rgba(255,255,255,.1); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.ov-table td { padding: .6rem .4rem; border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: middle; }
.ov-panel.ov-activity {
  align-self: start;
  align-content: start;
  height: auto;
  max-height: none;
  grid-template-rows: auto auto;
  overflow: visible;
}
.ov-panel.ov-activity .ov-panel-head { margin: 0; }
.ov-feed {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: .35rem;
  margin: 0;
  padding: 0;
  max-height: min(36rem, 60vh);
  overflow: auto;
}
.ov-panel.ov-activity .ov-feed {
  max-height: min(36rem, 60vh);
}
.ov-feed-item { display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: start; padding: .65rem .55rem; border-radius: .65rem; text-decoration: none; color: inherit; border: 1px solid transparent; transition: background .15s ease, border-color .15s ease; }
.ov-compare {
  display: grid;
  gap: .75rem;
  grid-template-columns: 1fr;
}
.ov-compare-card {
  display: grid;
  gap: .75rem;
  padding: 1rem 1.1rem;
  border-radius: .9rem;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(24,24,27,.45);
}
.ov-compare-card header { display: flex; justify-content: space-between; gap: .75rem; align-items: baseline; }
.ov-compare-card h2 { margin: 0; font-size: 1rem; }
.ov-compare-card header p { margin: 0; color: #a1a1aa; font-size: .8rem; }
.ov-compare-grid { display: grid; gap: .55rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ov-compare-metric {
  padding: .7rem .8rem;
  border-radius: .65rem;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(9,9,11,.35);
}
.ov-compare-metric span { display: block; color: #a1a1aa; font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; }
.ov-compare-metric strong { display: block; margin-top: .3rem; font-size: 1.2rem; font-family: Orbitron, sans-serif; color: #fff; }
.ov-compare-metric em { display: block; margin-top: .25rem; font-style: normal; font-size: .78rem; color: #71717a; }
.ov-compare-metric em.is-up { color: #4ade80; }
.ov-compare-metric em.is-down { color: #f87171; }
.ov-compare-sides { display: grid; gap: .35rem; font-size: .8rem; color: #a1a1aa; }
.ov-compare-sides b { color: #e4e4e7; font-weight: 600; }
.ov-pager { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; justify-content: space-between; margin-top: .35rem; }
.ov-pager-meta { color: #71717a; font-size: .8rem; }
.ov-pager-links { display: flex; gap: .35rem; }
@media (min-width: 900px) {
  .ov-compare { grid-template-columns: 1fr 1fr; }
}
.ov-feed-item:hover { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
.ov-feed-icon { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: .5rem; background: rgba(255,255,255,.06); color: #d4d4d8; }
.ov-feed-item.tone-green .ov-feed-icon { color: #4ade80; background: rgba(34,197,94,.12); }
.ov-feed-item.tone-blue .ov-feed-icon { color: #60a5fa; background: rgba(59,130,246,.12); }
.ov-feed-item.tone-cyan .ov-feed-icon { color: #22d3ee; background: rgba(6,182,212,.12); }
.ov-feed-item.tone-orange .ov-feed-icon { color: #fb923c; background: rgba(249,115,22,.12); }
.ov-feed-item.tone-pink .ov-feed-icon { color: #f472b6; background: rgba(236,72,153,.12); }
.ov-feed-item strong { display: block; font-size: .88rem; }
.ov-feed-item small { color: #a1a1aa; font-size: .78rem; }
.ov-feed-item time { color: #71717a; font-size: .72rem; white-space: nowrap; }
.ov-health-grid { display: grid; gap: .65rem; grid-template-columns: 1fr; }
.ov-health-card { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; align-items: center; padding: .85rem 1rem; border-radius: .75rem; border: 1px solid rgba(255,255,255,.08); background: rgba(9,9,11,.35); text-decoration: none; color: inherit; transition: border-color .15s ease; }
.ov-health-card:hover { border-color: rgba(255,255,255,.18); }
.ov-health-dot { width: .65rem; height: .65rem; border-radius: 999px; background: #71717a; box-shadow: 0 0 0 4px rgba(113,113,122,.15); }
.ov-health-card.state-ok .ov-health-dot { background: #4ade80; box-shadow: 0 0 0 4px rgba(74,222,128,.15); }
.ov-health-card.state-degraded .ov-health-dot { background: #fbbf24; box-shadow: 0 0 0 4px rgba(251,191,36,.15); }
.ov-health-card.state-configured .ov-health-dot { background: #60a5fa; box-shadow: 0 0 0 4px rgba(96,165,250,.15); }
.ov-health-card.state-unknown .ov-health-dot { background: #71717a; }
.ov-health-card strong { display: block; font-size: .92rem; }
.ov-health-card small { color: #a1a1aa; font-size: .8rem; }
.ov-health-card em { font-style: normal; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #a1a1aa; }
@media (min-width: 720px) {
  .ov-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ov-split { grid-template-columns: 1fr 1fr; }
  .ov-split.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ov-mini-kpis.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ov-health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .ov-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ov-span-2 { grid-column: span 2; }
  .ov-chart { height: 230px; }
}