html,
body,
#app {
  min-height: 100%;
}

body {
  background: #02050a !important;
}

.dj-bg-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #02050a;
}

.dj-bg-stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.08) brightness(.72);
  transform: scale(1.015);
}

.dj-bg-vignette,
.dj-bg-glass {
  position: absolute;
  inset: 0;
}

.dj-bg-vignette {
  background:
    radial-gradient(circle at 50% 18%, rgba(38, 255, 193, .16), transparent 34%),
    radial-gradient(circle at 90% 5%, rgba(42, 137, 255, .18), transparent 32%),
    linear-gradient(180deg, rgba(1, 5, 10, .34), rgba(2, 5, 12, .72) 62%, rgba(1, 3, 8, .88));
}

.dj-bg-glass {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .18) 48%, rgba(0, 0, 0, .42)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 96px);
  mix-blend-mode: normal;
}

#app {
  position: relative;
  z-index: 1;
}

#app > * {
  position: relative;
}

.theme-panel,
.theme-panel-soft,
.theme-panel-strong,
.theme-interactive-surface {
  background: rgba(5, 14, 24, .72) !important;
  border-color: rgba(142, 255, 220, .18) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .07) !important;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

.theme-panel-strong {
  background: rgba(3, 10, 18, .84) !important;
}

.theme-card-interactive,
.theme-interactive-surface,
.theme-panel,
.theme-panel-soft,
.theme-panel-strong {
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}

.theme-card-interactive:hover,
.theme-interactive-surface:hover {
  transform: translateY(-5px);
  border-color: rgba(75, 255, 210, .46) !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .46), 0 0 34px rgba(36, 255, 195, .18) !important;
}

.theme-text-primary,
.theme-text-secondary,
.theme-text-muted,
.theme-wordmark-text,
h1,
h2,
h3,
p,
a,
span,
button,
label {
  text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}

.theme-text-primary,
.theme-wordmark-text {
  color: rgba(246, 252, 255, .96) !important;
}

.theme-text-secondary {
  color: rgba(218, 238, 244, .88) !important;
}

.theme-text-muted {
  color: rgba(184, 212, 218, .78) !important;
}

.theme-price-lg,
.theme-price-sm,
.theme-price-promotion {
  color: #64ffd0 !important;
  text-shadow: 0 0 18px rgba(65, 255, 204, .34), 0 2px 10px rgba(0, 0, 0, .64);
}

.theme-btn-primary {
  background: linear-gradient(135deg, #16f1b7, #2a8cff) !important;
  border-color: rgba(143, 255, 224, .52) !important;
  box-shadow: 0 18px 38px rgba(18, 210, 190, .24) !important;
}

.theme-nav-link,
.theme-wordmark {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

@media (max-width: 768px) {
  .dj-bg-stage video {
    filter: saturate(1.04) contrast(1.02) brightness(.58);
  }

  .theme-panel,
  .theme-panel-soft,
  .theme-panel-strong,
  .theme-interactive-surface {
    background: rgba(3, 10, 18, .86) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dj-bg-stage video {
    display: none;
  }
}

/* Hotfix: let the video show through the app shell. */
body,
#app,
.theme-page,
.min-h-screen,
main,
header,
footer {
  background: transparent !important;
  background-color: transparent !important;
}

[class*="bg-gray-"],
[class*="bg-slate-"],
[class*="bg-zinc-"],
[class*="bg-neutral-"],
[class*="bg-white"],
[class*="dark:bg-gray-"],
[class*="dark:bg-slate-"],
[class*="dark:bg-zinc-"] {
  background-color: transparent !important;
}

.dj-bg-stage {
  z-index: 0 !important;
}

#app,
#app .theme-page {
  isolation: isolate;
}

#app .theme-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .16), rgba(0, 0, 0, .42));
}

#app .container {
  position: relative;
}

.theme-page > div,
.theme-page > section,
.theme-page > main {
  background: transparent !important;
}

/* Stronger page-shell override for the storefront list view. */
:root,
.theme-page {
  --ui-bg: transparent !important;
  --ui-bg-base: transparent !important;
  --ui-bg-soft: transparent !important;
  --ui-bg-muted: transparent !important;
}

body:has(.dj-bg-stage) #app,
body:has(.dj-bg-stage) #app > div,
body:has(.dj-bg-stage) .theme-page,
body:has(.dj-bg-stage) .theme-page > div:not(.theme-panel):not(.theme-panel-soft):not(.theme-panel-strong),
body:has(.dj-bg-stage) .theme-page > main,
body:has(.dj-bg-stage) .theme-page section {
  background: transparent !important;
  background-image: none !important;
}

body:has(.dj-bg-stage) .theme-page {
  min-height: 100vh;
}

/* Clarity pass: product detail content and header readability. */
body:has(.dj-bg-stage) header,
body:has(.dj-bg-stage) nav,
body:has(.dj-bg-stage) .theme-wordmark,
body:has(.dj-bg-stage) .theme-nav-link {
  color: rgba(248, 253, 255, .98) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 14px rgba(0, 0, 0, .72) !important;
}

body:has(.dj-bg-stage) header,
body:has(.dj-bg-stage) nav {
  background: rgba(2, 8, 14, .76) !important;
  border-color: rgba(130, 255, 225, .18) !important;
  backdrop-filter: blur(22px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.25) !important;
}

body:has(.dj-bg-stage) .theme-wordmark-text,
body:has(.dj-bg-stage) .theme-nav-link,
body:has(.dj-bg-stage) header a,
body:has(.dj-bg-stage) header button,
body:has(.dj-bg-stage) header span {
  color: rgba(250, 254, 255, .98) !important;
  opacity: 1 !important;
}

body:has(.dj-bg-stage) .theme-nav-link:hover {
  background: rgba(34, 255, 206, .12) !important;
  color: #ffffff !important;
}

body:has(.dj-bg-stage) h1,
body:has(.dj-bg-stage) h2,
body:has(.dj-bg-stage) h3,
body:has(.dj-bg-stage) .text-lg.font-bold,
body:has(.dj-bg-stage) .font-bold {
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .9), 0 0 18px rgba(35, 255, 204, .18) !important;
}

body:has(.dj-bg-stage) .leading-relaxed,
body:has(.dj-bg-stage) .prose,
body:has(.dj-bg-stage) article,
body:has(.dj-bg-stage) [class*="description"],
body:has(.dj-bg-stage) [class*="detail"] {
  color: rgba(240, 248, 250, .94) !important;
  opacity: 1 !important;
}

body:has(.dj-bg-stage) .leading-relaxed,
body:has(.dj-bg-stage) .leading-relaxed p,
body:has(.dj-bg-stage) .leading-relaxed li,
body:has(.dj-bg-stage) .leading-relaxed span,
body:has(.dj-bg-stage) .prose p,
body:has(.dj-bg-stage) .prose li,
body:has(.dj-bg-stage) article p,
body:has(.dj-bg-stage) article li {
  color: rgba(235, 244, 247, .96) !important;
  opacity: 1 !important;
  font-weight: 500;
  line-height: 1.9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .96), 0 0 10px rgba(0, 0, 0, .78) !important;
}

body:has(.dj-bg-stage) .leading-relaxed ul,
body:has(.dj-bg-stage) .prose ul,
body:has(.dj-bg-stage) article ul {
  padding-left: 1.35rem;
}

body:has(.dj-bg-stage) .leading-relaxed li::marker,
body:has(.dj-bg-stage) .prose li::marker,
body:has(.dj-bg-stage) article li::marker {
  color: rgba(110, 255, 216, .98);
}

body:has(.dj-bg-stage) .theme-panel .leading-relaxed,
body:has(.dj-bg-stage) .theme-panel-soft .leading-relaxed,
body:has(.dj-bg-stage) .theme-panel-strong .leading-relaxed,
body:has(.dj-bg-stage) .theme-panel article,
body:has(.dj-bg-stage) .theme-panel-soft article,
body:has(.dj-bg-stage) .theme-panel-strong article {
  background: linear-gradient(180deg, rgba(1, 8, 14, .68), rgba(1, 7, 12, .5));
  border: 1px solid rgba(126, 255, 220, .12);
  border-radius: 8px;
  padding: 1.15rem 1.25rem;
}

body:has(.dj-bg-stage) .theme-panel,
body:has(.dj-bg-stage) .theme-panel-soft,
body:has(.dj-bg-stage) .theme-panel-strong {
  background: rgba(2, 9, 16, .86) !important;
  border-color: rgba(137, 255, 224, .24) !important;
}

body:has(.dj-bg-stage) .dj-bg-stage video {
  filter: saturate(.95) contrast(1.05) brightness(.46);
}

body:has(.dj-bg-stage) .dj-bg-vignette {
  background:
    radial-gradient(circle at 50% 18%, rgba(38, 255, 193, .11), transparent 34%),
    linear-gradient(180deg, rgba(0, 3, 8, .54), rgba(0, 4, 9, .78) 58%, rgba(0, 3, 7, .92));
}

/* Final readability guard for gray utility text inside product detail panels. */
body:has(.dj-bg-stage) .theme-panel [class*="text-gray-"],
body:has(.dj-bg-stage) .theme-panel-soft [class*="text-gray-"],
body:has(.dj-bg-stage) .theme-panel-strong [class*="text-gray-"],
body:has(.dj-bg-stage) .theme-panel [class*="text-slate-"],
body:has(.dj-bg-stage) .theme-panel-soft [class*="text-slate-"],
body:has(.dj-bg-stage) .theme-panel-strong [class*="text-slate-"],
body:has(.dj-bg-stage) .theme-panel [class*="text-zinc-"],
body:has(.dj-bg-stage) .theme-panel-soft [class*="text-zinc-"],
body:has(.dj-bg-stage) .theme-panel-strong [class*="text-zinc-"] {
  color: rgba(238, 247, 250, .96) !important;
  opacity: 1 !important;
}

body:has(.dj-bg-stage) .text-sm,
body:has(.dj-bg-stage) .text-xs {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 0 9px rgba(0, 0, 0, .72) !important;
}

body:has(.dj-bg-stage) .theme-panel li,
body:has(.dj-bg-stage) .theme-panel-soft li,
body:has(.dj-bg-stage) .theme-panel-strong li {
  margin: .45rem 0;
}

/* Global product-detail readability: override rich-text colors from every product. */
body:has(.dj-bg-stage) .theme-panel :where(p, li, ul, ol, div, span, section, article, blockquote),
body:has(.dj-bg-stage) .theme-panel-soft :where(p, li, ul, ol, div, span, section, article, blockquote),
body:has(.dj-bg-stage) .theme-panel-strong :where(p, li, ul, ol, div, span, section, article, blockquote),
body:has(.dj-bg-stage) [class*="detail"] :where(p, li, ul, ol, div, span, section, article, blockquote),
body:has(.dj-bg-stage) [class*="description"] :where(p, li, ul, ol, div, span, section, article, blockquote) {
  color: rgba(242, 249, 251, .97) !important;
  opacity: 1 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .98), 0 0 12px rgba(0, 0, 0, .82) !important;
}

body:has(.dj-bg-stage) .theme-panel :where(strong, b, h1, h2, h3, h4, h5, h6),
body:has(.dj-bg-stage) .theme-panel-soft :where(strong, b, h1, h2, h3, h4, h5, h6),
body:has(.dj-bg-stage) .theme-panel-strong :where(strong, b, h1, h2, h3, h4, h5, h6),
body:has(.dj-bg-stage) [class*="detail"] :where(strong, b, h1, h2, h3, h4, h5, h6),
body:has(.dj-bg-stage) [class*="description"] :where(strong, b, h1, h2, h3, h4, h5, h6) {
  color: #ffffff !important;
  opacity: 1 !important;
  font-weight: 800;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 1), 0 0 16px rgba(80, 255, 220, .2) !important;
}

body:has(.dj-bg-stage) .theme-panel :where(p, li),
body:has(.dj-bg-stage) .theme-panel-soft :where(p, li),
body:has(.dj-bg-stage) .theme-panel-strong :where(p, li),
body:has(.dj-bg-stage) [class*="detail"] :where(p, li),
body:has(.dj-bg-stage) [class*="description"] :where(p, li) {
  font-size: 16px;
  line-height: 1.95;
}

body:has(.dj-bg-stage) .theme-panel :where(a),
body:has(.dj-bg-stage) .theme-panel-soft :where(a),
body:has(.dj-bg-stage) .theme-panel-strong :where(a),
body:has(.dj-bg-stage) [class*="detail"] :where(a),
body:has(.dj-bg-stage) [class*="description"] :where(a) {
  color: #6fffe0 !important;
  opacity: 1 !important;
  text-decoration-color: rgba(111, 255, 224, .65) !important;
}

body:has(.dj-bg-stage) .theme-panel :where([style*="color"]),
body:has(.dj-bg-stage) .theme-panel-soft :where([style*="color"]),
body:has(.dj-bg-stage) .theme-panel-strong :where([style*="color"]),
body:has(.dj-bg-stage) [class*="detail"] :where([style*="color"]),
body:has(.dj-bg-stage) [class*="description"] :where([style*="color"]) {
  color: rgba(244, 250, 252, .98) !important;
}

body:has(.dj-bg-stage) .theme-panel,
body:has(.dj-bg-stage) .theme-panel-soft,
body:has(.dj-bg-stage) .theme-panel-strong {
  background: rgba(1, 7, 13, .91) !important;
}

/* Keep status chips and action buttons visually distinct after the global text lift. */
body:has(.dj-bg-stage) button,
body:has(.dj-bg-stage) .theme-btn-primary,
body:has(.dj-bg-stage) .theme-btn-secondary,
body:has(.dj-bg-stage) [class*="badge"],
body:has(.dj-bg-stage) [class*="tag"] {
  opacity: 1 !important;
}

/* v5 interface polish: brighter cyber glass, calmer header, softer ambient depth. */
:root {
  --dj-cyan: 35, 224, 255;
  --dj-mint: 88, 255, 196;
  --dj-violet: 130, 122, 255;
  --dj-panel-rgb: 13, 24, 36;
}

body:has(.dj-bg-stage) {
  background:
    radial-gradient(ellipse 120% 72% at 50% -12%, rgba(var(--dj-cyan), .20), transparent 62%),
    radial-gradient(ellipse 86% 66% at 50% 38%, rgba(var(--dj-violet), .12), transparent 70%),
    #050911 !important;
}

body:has(.dj-bg-stage) .dj-bg-stage {
  background:
    radial-gradient(ellipse 110% 70% at 50% 0%, rgba(var(--dj-cyan), .12), transparent 64%),
    linear-gradient(180deg, #07111b 0%, #050911 48%, #03060d 100%) !important;
}

body:has(.dj-bg-stage) .dj-bg-stage video {
  filter: saturate(1.05) contrast(1.02) brightness(.62) !important;
  opacity: .88;
}

body:has(.dj-bg-stage) .dj-bg-vignette {
  background:
    radial-gradient(ellipse 115% 72% at 50% -10%, rgba(var(--dj-cyan), .22), transparent 62%),
    radial-gradient(ellipse 88% 58% at 52% 42%, rgba(var(--dj-violet), .13), transparent 72%),
    linear-gradient(180deg, rgba(3, 10, 18, .26), rgba(3, 9, 18, .50) 58%, rgba(2, 5, 11, .76)) !important;
}

body:has(.dj-bg-stage) .dj-bg-glass {
  background:
    linear-gradient(90deg, rgba(2, 7, 13, .26), rgba(7, 16, 26, .08) 48%, rgba(2, 7, 13, .28)),
    repeating-linear-gradient(90deg, rgba(160, 245, 255, .035) 0 1px, transparent 1px 96px) !important;
}

body:has(.dj-bg-stage) #app .theme-page::before {
  background:
    linear-gradient(180deg, rgba(8, 18, 28, .08), rgba(2, 6, 12, .28) 72%),
    radial-gradient(ellipse 90% 52% at 50% 26%, rgba(var(--dj-cyan), .08), transparent 70%) !important;
}

body:has(.dj-bg-stage) header {
  background: rgba(18, 18, 22, .76) !important;
  border-bottom: 1px solid rgba(120, 230, 255, .16) !important;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .28), 0 1px 0 rgba(255, 255, 255, .06) inset !important;
  backdrop-filter: blur(12px) saturate(1.22) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.22) !important;
}

body:has(.dj-bg-stage) header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--dj-cyan), .38), rgba(var(--dj-mint), .24), transparent);
}

body:has(.dj-bg-stage) header .theme-nav-link,
body:has(.dj-bg-stage) header a,
body:has(.dj-bg-stage) header button,
body:has(.dj-bg-stage) header span {
  color: rgba(236, 248, 252, .92) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .72), 0 0 12px rgba(var(--dj-cyan), .10) !important;
}

body:has(.dj-bg-stage) header .theme-nav-link:hover,
body:has(.dj-bg-stage) header a:hover,
body:has(.dj-bg-stage) header button:hover {
  color: #fff !important;
  background: rgba(var(--dj-cyan), .11) !important;
  box-shadow: 0 0 18px rgba(var(--dj-cyan), .16) !important;
}

body:has(.dj-bg-stage) .theme-panel,
body:has(.dj-bg-stage) .theme-panel-soft,
body:has(.dj-bg-stage) .theme-panel-strong,
body:has(.dj-bg-stage) .theme-interactive-surface,
body:has(.dj-bg-stage) .theme-card-interactive {
  background: rgba(var(--dj-panel-rgb), .64) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  box-shadow: 0 18px 52px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  backdrop-filter: blur(10px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.18) !important;
}

body:has(.dj-bg-stage) .theme-panel-strong {
  background: rgba(10, 19, 30, .76) !important;
}

body:has(.dj-bg-stage) .theme-card-interactive:hover,
body:has(.dj-bg-stage) .theme-interactive-surface:hover,
body:has(.dj-bg-stage) .theme-panel:hover,
body:has(.dj-bg-stage) .theme-panel-soft:hover {
  border-color: rgba(var(--dj-cyan), .42) !important;
  box-shadow: 0 24px 68px rgba(0, 0, 0, .36), 0 0 15px rgba(0, 210, 255, .30), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}

body:has(.dj-bg-stage) h1,
body:has(.dj-bg-stage) h2,
body:has(.dj-bg-stage) h3,
body:has(.dj-bg-stage) .theme-text-primary,
body:has(.dj-bg-stage) .theme-wordmark-text,
body:has(.dj-bg-stage) .font-bold {
  color: #fff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .76), 0 0 18px rgba(var(--dj-cyan), .16) !important;
}

body:has(.dj-bg-stage) .theme-text-secondary,
body:has(.dj-bg-stage) .theme-nav-link,
body:has(.dj-bg-stage) [class*="text-gray-"],
body:has(.dj-bg-stage) [class*="text-slate-"],
body:has(.dj-bg-stage) [class*="text-zinc-"] {
  color: rgba(224, 232, 238, .92) !important;
}

body:has(.dj-bg-stage) .theme-text-muted,
body:has(.dj-bg-stage) .text-sm,
body:has(.dj-bg-stage) .text-xs {
  color: rgba(184, 203, 212, .86) !important;
}

body:has(.dj-bg-stage) .theme-price-lg,
body:has(.dj-bg-stage) .theme-price-sm,
body:has(.dj-bg-stage) .theme-price-promotion,
body:has(.dj-bg-stage) [class*="price"],
body:has(.dj-bg-stage) [class*="Price"] {
  color: #71ffe1 !important;
  text-shadow: 0 0 18px rgba(var(--dj-mint), .42), 0 2px 8px rgba(0, 0, 0, .65) !important;
}

body:has(.dj-bg-stage) [class*="stock"],
body:has(.dj-bg-stage) [class*="Stock"],
body:has(.dj-bg-stage) [class*="inventory"],
body:has(.dj-bg-stage) [class*="Inventory"],
body:has(.dj-bg-stage) [class*="badge"],
body:has(.dj-bg-stage) [class*="tag"] {
  border-color: rgba(var(--dj-mint), .26) !important;
  background-color: rgba(0, 255, 128, .14) !important;
  color: rgba(210, 255, 234, .96) !important;
  box-shadow: 0 0 14px rgba(0, 255, 128, .10) !important;
}

body:has(.dj-bg-stage) .theme-btn-primary {
  color: #031018 !important;
  background: linear-gradient(135deg, #5bffd3, #2ad7ff 52%, #7b8cff) !important;
  border-color: rgba(207, 255, 246, .62) !important;
  box-shadow: 0 16px 34px rgba(0, 210, 255, .22), 0 0 18px rgba(var(--dj-mint), .16) !important;
}

body:has(.dj-bg-stage) input,
body:has(.dj-bg-stage) select,
body:has(.dj-bg-stage) textarea {
  background: rgba(12, 22, 34, .68) !important;
  border-color: rgba(255, 255, 255, .10) !important;
  color: #f7fcff !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

body:has(.dj-bg-stage) input::placeholder,
body:has(.dj-bg-stage) textarea::placeholder {
  color: rgba(190, 210, 218, .70) !important;
}

@media (max-width: 768px) {
  body:has(.dj-bg-stage) .dj-bg-stage video {
    filter: saturate(1.02) contrast(1.02) brightness(.54) !important;
  }

  body:has(.dj-bg-stage) header {
    background: rgba(14, 16, 22, .84) !important;
  }

  body:has(.dj-bg-stage) .theme-panel,
  body:has(.dj-bg-stage) .theme-panel-soft,
  body:has(.dj-bg-stage) .theme-panel-strong,
  body:has(.dj-bg-stage) .theme-interactive-surface,
  body:has(.dj-bg-stage) .theme-card-interactive {
    background: rgba(12, 22, 34, .74) !important;
  }
}

/* v7 dark layout polish - remove hard divider and soften background */
.dj-bg-vignette,
.dj-bg-glass {
  border-color: transparent !important;
  box-shadow: none !important;
}

.dj-bg-vignette::before,
.dj-bg-vignette::after,
.dj-bg-glass::before,
.dj-bg-glass::after,
.home-page section::before,
.home-page section::after,
.home-page main::before,
.home-page main::after {
  border: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

.home-page .border-t,
.home-page .border-b,
.home-page [class*="border-t"],
.home-page [class*="border-b"] {
  border-top-color: rgba(255, 255, 255, .045) !important;
  border-bottom-color: rgba(255, 255, 255, .045) !important;
}

.dj-bg-stage {
  background:
    radial-gradient(circle at 50% 12%, rgba(0, 210, 255, .16), transparent 42%),
    radial-gradient(circle at 72% 42%, rgba(90, 120, 255, .12), transparent 38%),
    linear-gradient(to bottom, rgba(4, 13, 18, .88), rgba(8, 12, 22, .84)) !important;
}

.dj-bg-stage video {
  opacity: .42 !important;
  filter: brightness(.78) contrast(.82) saturate(.82) blur(.2px) !important;
}

.dj-bg-vignette {
  background:
    linear-gradient(to bottom, rgba(4, 12, 18, .18), rgba(9, 13, 24, .26)),
    radial-gradient(circle at 50% 20%, rgba(0, 220, 255, .08), transparent 52%) !important;
}

.dj-bg-glass {
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, .025), rgba(255, 255, 255, .012)) !important;
}

.home-page .container {
  max-width: 1560px !important;
}

.home-page .flex.flex-col.lg\:flex-row {
  gap: 28px !important;
  align-items: flex-start !important;
}

.home-page aside {
  margin-top: 4px !important;
}

.home-page .space-y-2 > * + * {
  margin-top: 12px !important;
}

.home-page .space-y-6 > * + * {
  margin-top: 28px !important;
}

.home-page aside,
.home-page aside > div {
  background: rgba(22, 25, 30, .72) !important;
  backdrop-filter: blur(14px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.12) !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

.home-page .border.bg-card.text-card-foreground,
.home-page .group.relative.overflow-hidden.flex.flex-row.items-center.rounded-xl {
  background: rgba(24, 27, 32, .76) !important;
  backdrop-filter: blur(10px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
  border-color: rgba(255, 255, 255, .105) !important;
  min-height: 88px !important;
  box-shadow:
    0 12px 34px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}

.home-page .border.bg-card.text-card-foreground:hover,
.home-page .group.relative.overflow-hidden.flex.flex-row.items-center.rounded-xl:hover {
  transform: translateY(-2px) !important;
  background: rgba(29, 34, 41, .82) !important;
  border-color: rgba(0, 210, 255, .32) !important;
  box-shadow:
    0 0 16px rgba(0, 210, 255, .18),
    0 18px 42px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}

.home-page .text-muted-foreground,
.home-page [class*="text-muted"] {
  color: rgba(205, 220, 228, .76) !important;
}

.home-page .text-foreground,
.home-page .font-semibold,
.home-page .font-bold {
  color: rgba(244, 250, 252, .94) !important;
}

.home-page span.whitespace-nowrap[class*="font-bold"],
.home-page [class*="whitespace-nowrap"][class*="font-bold"] {
  color: #9eefff !important;
  text-shadow: 0 0 12px rgba(0, 220, 255, .28) !important;
}

.home-page aside .bg-primary,
.home-page button.bg-primary {
  background: linear-gradient(135deg, #168cff, #007bff) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(0, 123, 255, .28) !important;
}

@media (max-width: 768px) {
  .home-page .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .home-page .flex.flex-col.lg\:flex-row {
    gap: 18px !important;
  }

  .home-page .border.bg-card.text-card-foreground,
  .home-page .group.relative.overflow-hidden.flex.flex-row.items-center.rounded-xl {
    min-height: 82px !important;
  }
}

/* v8 hard-line removal - remove background grid seams and navbar divider */
:root {
  --dj-soft-surface-line: rgba(255, 255, 255, 0) !important;
}

body:has(.dj-bg-stage) header,
body:has(.dj-bg-stage) nav,
body:has(.dj-bg-stage) [class*="navbar"],
body:has(.dj-bg-stage) [class*="header"] {
  border-bottom: 0 !important;
  border-top: 0 !important;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .20) !important;
}

body:has(.dj-bg-stage) header::before,
body:has(.dj-bg-stage) header::after,
body:has(.dj-bg-stage) nav::before,
body:has(.dj-bg-stage) nav::after,
body:has(.dj-bg-stage) [class*="navbar"]::before,
body:has(.dj-bg-stage) [class*="navbar"]::after,
body:has(.dj-bg-stage) [class*="header"]::before,
body:has(.dj-bg-stage) [class*="header"]::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

body:has(.dj-bg-stage) .dj-bg-glass,
.dj-bg-glass {
  background:
    radial-gradient(circle at 48% 14%, rgba(0, 230, 255, .075), transparent 48%),
    radial-gradient(circle at 72% 42%, rgba(82, 120, 255, .055), transparent 42%),
    linear-gradient(90deg, rgba(2, 7, 13, .24), rgba(7, 16, 26, .08) 48%, rgba(2, 7, 13, .25)) !important;
  background-size: auto !important;
  border: 0 !important;
  box-shadow: none !important;
}

body:has(.dj-bg-stage) .dj-bg-vignette,
.dj-bg-vignette {
  background:
    radial-gradient(circle at 50% 18%, rgba(0, 220, 255, .075), transparent 50%),
    linear-gradient(to bottom, rgba(4, 12, 18, .12), rgba(9, 13, 24, .24)) !important;
  border: 0 !important;
  box-shadow: none !important;
}

body:has(.dj-bg-stage) .dj-bg-stage::before,
body:has(.dj-bg-stage) .dj-bg-stage::after,
body:has(.dj-bg-stage) .dj-bg-vignette::before,
body:has(.dj-bg-stage) .dj-bg-vignette::after,
body:has(.dj-bg-stage) .dj-bg-glass::before,
body:has(.dj-bg-stage) .dj-bg-glass::after,
.dj-bg-stage::before,
.dj-bg-stage::after,
.dj-bg-vignette::before,
.dj-bg-vignette::after,
.dj-bg-glass::before,
.dj-bg-glass::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

body:has(.dj-bg-stage) #app .theme-page::before,
body:has(.dj-bg-stage) #app .theme-page::after,
body:has(.dj-bg-stage) .home-page::before,
body:has(.dj-bg-stage) .home-page::after,
body:has(.dj-bg-stage) main::before,
body:has(.dj-bg-stage) main::after,
body:has(.dj-bg-stage) section::before,
body:has(.dj-bg-stage) section::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.home-page,
.home-page main,
.home-page section,
.home-page .container,
.home-page [class*="container"],
.home-page [class*="border-t"],
.home-page [class*="border-b"],
.home-page .border-t,
.home-page .border-b {
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none;
}

body:has(.dj-bg-stage) .dj-bg-stage {
  background:
    radial-gradient(circle at 48% 8%, rgba(0, 210, 255, .15), transparent 44%),
    radial-gradient(circle at 74% 40%, rgba(92, 122, 255, .10), transparent 42%),
    linear-gradient(180deg, #07121b 0%, #050b14 50%, #040812 100%) !important;
}

body:has(.dj-bg-stage) .dj-bg-stage video {
  opacity: .36 !important;
  filter: brightness(.82) contrast(.78) saturate(.76) blur(.25px) !important;
}

/* v9 visual integration - seamless bands, theme-aware glass, card glow */

:root {
  --dj-dark-panel: rgba(15, 20, 28, .70);
  --dj-dark-panel-strong: rgba(15, 20, 28, .78);
  --dj-dark-line: rgba(255, 255, 255, .08);
  --dj-cyan: rgba(0, 210, 255, .50);
  --dj-cyan-soft: rgba(0, 210, 255, .25);
  --dj-light-bg-top: rgba(248, 250, 252, .95);
  --dj-light-bg-bottom: rgba(241, 245, 249, .98);
  --dj-light-line: #e2e8f0;
  --dj-light-text: #1e293b;
  --dj-light-muted: #64748b;
}

/* Remove hard horizontal seams from page bands, banners, search rows and section headings. */
body:has(.dj-bg-stage) header,
body:has(.dj-bg-stage) nav,
body:has(.dj-bg-stage) .home-page,
body:has(.dj-bg-stage) .home-page main,
body:has(.dj-bg-stage) .home-page section,
body:has(.dj-bg-stage) .home-page [class*="banner"],
body:has(.dj-bg-stage) .home-page [class*="hero"],
body:has(.dj-bg-stage) .home-page [class*="search"],
body:has(.dj-bg-stage) .home-page [class*="border-t"],
body:has(.dj-bg-stage) .home-page [class*="border-b"],
body:has(.dj-bg-stage) .home-page .border-t,
body:has(.dj-bg-stage) .home-page .border-b {
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

body:has(.dj-bg-stage) .home-page [class*="divide-y"] > :not([hidden]) ~ :not([hidden]),
body:has(.dj-bg-stage) .home-page .divide-y > :not([hidden]) ~ :not([hidden]) {
  border-top-color: transparent !important;
}

body:has(.dj-bg-stage) header::before,
body:has(.dj-bg-stage) header::after,
body:has(.dj-bg-stage) nav::before,
body:has(.dj-bg-stage) nav::after,
body:has(.dj-bg-stage) .home-page h1::before,
body:has(.dj-bg-stage) .home-page h1::after,
body:has(.dj-bg-stage) .home-page h2::before,
body:has(.dj-bg-stage) .home-page h2::after,
body:has(.dj-bg-stage) .home-page h3::before,
body:has(.dj-bg-stage) .home-page h3::after,
body:has(.dj-bg-stage) .home-page [class*="banner"]::before,
body:has(.dj-bg-stage) .home-page [class*="banner"]::after,
body:has(.dj-bg-stage) .home-page [class*="hero"]::before,
body:has(.dj-bg-stage) .home-page [class*="hero"]::after,
body:has(.dj-bg-stage) .home-page [class*="search"]::before,
body:has(.dj-bg-stage) .home-page [class*="search"]::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

body:has(.dj-bg-stage) .home-page h2,
body:has(.dj-bg-stage) .home-page h3,
body:has(.dj-bg-stage) .home-page [class*="section"] [class*="title"],
body:has(.dj-bg-stage) .home-page [class*="category"] [class*="title"] {
  border: 0 !important;
  text-decoration: none !important;
  margin-bottom: 14px !important;
}

/* Dark mode: unified cyber glass, with the code rain only faintly visible. */
body:has(.dj-bg-stage) .dj-bg-stage {
  background:
    radial-gradient(circle at 48% 8%, rgba(0, 210, 255, .18), transparent 43%),
    radial-gradient(circle at 72% 36%, rgba(96, 116, 255, .12), transparent 42%),
    linear-gradient(180deg, rgba(6, 16, 24, .96), rgba(5, 10, 18, .94) 52%, rgba(4, 8, 14, .98)) !important;
}

body:has(.dj-bg-stage) .dj-bg-stage video {
  opacity: .34 !important;
  filter: brightness(.84) contrast(.78) saturate(.76) blur(.22px) !important;
}

body:has(.dj-bg-stage) .dj-bg-glass,
body:has(.dj-bg-stage) .dj-bg-vignette {
  background:
    radial-gradient(circle at 52% 16%, rgba(0, 210, 255, .08), transparent 48%),
    linear-gradient(180deg, rgba(6, 12, 20, .12), rgba(6, 10, 18, .24)) !important;
  border: 0 !important;
  box-shadow: none !important;
}

body:has(.dj-bg-stage) header,
body:has(.dj-bg-stage) nav,
body:has(.dj-bg-stage) .home-page aside,
body:has(.dj-bg-stage) .home-page aside > div {
  background: var(--dj-dark-panel) !important;
  border: 1px solid var(--dj-dark-line) !important;
  backdrop-filter: blur(12px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.12) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}

body:has(.dj-bg-stage) header,
body:has(.dj-bg-stage) nav {
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}

body:has(.dj-bg-stage) .home-page input,
body:has(.dj-bg-stage) .home-page textarea,
body:has(.dj-bg-stage) .home-page [role="search"],
body:has(.dj-bg-stage) .home-page form:has(input) {
  background: rgba(15, 20, 28, .58) !important;
  border-color: rgba(255, 255, 255, .07) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

body:has(.dj-bg-stage) .home-page input:focus,
body:has(.dj-bg-stage) .home-page textarea:focus {
  background: rgba(18, 25, 34, .74) !important;
  border-color: rgba(0, 210, 255, .38) !important;
  box-shadow: 0 0 0 3px rgba(0, 210, 255, .12) !important;
  outline: none !important;
}

body:has(.dj-bg-stage) .home-page .border.bg-card.text-card-foreground,
body:has(.dj-bg-stage) .home-page .group.relative.overflow-hidden.flex.flex-row.items-center.rounded-xl {
  position: relative !important;
  overflow: hidden !important;
  background: var(--dj-dark-panel) !important;
  border: 1px solid var(--dj-dark-line) !important;
  backdrop-filter: blur(12px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.12) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .045) !important;
  transform: translateY(0) !important;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, background-color .3s ease !important;
  will-change: transform, box-shadow;
}

body:has(.dj-bg-stage) .home-page .border.bg-card.text-card-foreground > *,
body:has(.dj-bg-stage) .home-page .group.relative.overflow-hidden.flex.flex-row.items-center.rounded-xl > * {
  position: relative;
  z-index: 1;
}

body:has(.dj-bg-stage) .home-page .border.bg-card.text-card-foreground::before,
body:has(.dj-bg-stage) .home-page .group.relative.overflow-hidden.flex.flex-row.items-center.rounded-xl::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -1px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transform: translateX(-42%) skewX(-12deg) !important;
  background: linear-gradient(115deg, transparent 0%, rgba(0, 210, 255, .00) 34%, rgba(0, 210, 255, .20) 49%, rgba(120, 235, 255, .12) 56%, transparent 72%) !important;
  transition: opacity .3s ease, transform .55s ease !important;
  mix-blend-mode: screen;
}

body:has(.dj-bg-stage) .home-page .border.bg-card.text-card-foreground:hover,
body:has(.dj-bg-stage) .home-page .group.relative.overflow-hidden.flex.flex-row.items-center.rounded-xl:hover {
  transform: translateY(-3px) !important;
  background: var(--dj-dark-panel-strong) !important;
  border-color: var(--dj-cyan) !important;
  box-shadow: 0 0 20px var(--dj-cyan-soft), inset 0 0 10px rgba(0, 210, 255, .10), 0 18px 42px rgba(0, 0, 0, .30) !important;
}

body:has(.dj-bg-stage) .home-page .border.bg-card.text-card-foreground:hover::before,
body:has(.dj-bg-stage) .home-page .group.relative.overflow-hidden.flex.flex-row.items-center.rounded-xl:hover::before {
  opacity: 1 !important;
  transform: translateX(38%) skewX(-12deg) !important;
}

/* v10 dark-only lock - remove light/daytime skin while preserving v9 cyber style */
html,
html.light,
html[data-theme="light"] {
  color-scheme: dark !important;
}

body:has(.dj-bg-stage) .dj-bg-stage {
  background:
    radial-gradient(circle at 48% 8%, rgba(0, 210, 255, .18), transparent 43%),
    radial-gradient(circle at 72% 36%, rgba(96, 116, 255, .12), transparent 42%),
    linear-gradient(180deg, rgba(6, 16, 24, .96), rgba(5, 10, 18, .94) 52%, rgba(4, 8, 14, .98)) !important;
}

body:has(.dj-bg-stage) .dj-bg-stage video {
  opacity: .34 !important;
  filter: brightness(.84) contrast(.78) saturate(.76) blur(.22px) !important;
}

body:has(.dj-bg-stage) .dj-bg-glass,
body:has(.dj-bg-stage) .dj-bg-vignette {
  background:
    radial-gradient(circle at 52% 16%, rgba(0, 210, 255, .08), transparent 48%),
    linear-gradient(180deg, rgba(6, 12, 20, .12), rgba(6, 10, 18, .24)) !important;
  border: 0 !important;
  box-shadow: none !important;
}

body:has(.dj-bg-stage) header,
body:has(.dj-bg-stage) nav,
body:has(.dj-bg-stage) .home-page aside,
body:has(.dj-bg-stage) .home-page aside > div {
  background: rgba(15, 20, 28, .70) !important;
  border-color: rgba(255, 255, 255, .08) !important;
  color: rgba(244, 250, 252, .94) !important;
  backdrop-filter: blur(12px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.12) !important;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}

body:has(.dj-bg-stage) header,
body:has(.dj-bg-stage) nav {
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}

body:has(.dj-bg-stage) .home-page .border.bg-card.text-card-foreground,
body:has(.dj-bg-stage) .home-page .group.relative.overflow-hidden.flex.flex-row.items-center.rounded-xl {
  background: rgba(15, 20, 28, .70) !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
  color: rgba(244, 250, 252, .94) !important;
  backdrop-filter: blur(12px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.12) !important;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}

body:has(.dj-bg-stage) .home-page .border.bg-card.text-card-foreground:hover,
body:has(.dj-bg-stage) .home-page .group.relative.overflow-hidden.flex.flex-row.items-center.rounded-xl:hover {
  transform: translateY(-3px) !important;
  background: rgba(15, 20, 28, .78) !important;
  border-color: rgba(0, 210, 255, .50) !important;
  box-shadow: 0 0 20px rgba(0, 210, 255, .25), inset 0 0 10px rgba(0, 210, 255, .10), 0 18px 42px rgba(0, 0, 0, .30) !important;
}

body:has(.dj-bg-stage) .home-page input,
body:has(.dj-bg-stage) .home-page textarea,
body:has(.dj-bg-stage) .home-page [role="search"],
body:has(.dj-bg-stage) .home-page form:has(input) {
  background: rgba(15, 20, 28, .58) !important;
  border-color: rgba(255, 255, 255, .07) !important;
  color: rgba(244, 250, 252, .94) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

body:has(.dj-bg-stage) .home-page input:focus,
body:has(.dj-bg-stage) .home-page textarea:focus {
  background: rgba(18, 25, 34, .74) !important;
  border-color: rgba(0, 210, 255, .38) !important;
  box-shadow: 0 0 0 3px rgba(0, 210, 255, .12) !important;
  outline: none !important;
}

body:has(.dj-bg-stage) .home-page .text-muted-foreground,
body:has(.dj-bg-stage) .home-page [class*="text-muted"] {
  color: rgba(205, 220, 228, .76) !important;
}

body:has(.dj-bg-stage) .home-page .text-foreground,
body:has(.dj-bg-stage) .home-page .font-semibold,
body:has(.dj-bg-stage) .home-page .font-bold {
  color: rgba(244, 250, 252, .94) !important;
}

body:has(.dj-bg-stage) .home-page span.whitespace-nowrap[class*="font-bold"],
body:has(.dj-bg-stage) .home-page [class*="whitespace-nowrap"][class*="font-bold"] {
  color: #9eefff !important;
  text-shadow: 0 0 12px rgba(0, 220, 255, .28) !important;
}

/* v11 header integration and theme-toggle removal */
body:has(.dj-bg-stage) header,
body:has(.dj-bg-stage) nav,
body:has(.dj-bg-stage) [class*="navbar"],
body:has(.dj-bg-stage) [class*="header"] {
  background:
    radial-gradient(circle at 36% 0%, rgba(0, 210, 255, .13), transparent 38%),
    radial-gradient(circle at 74% 24%, rgba(70, 118, 255, .08), transparent 36%),
    linear-gradient(180deg, rgba(10, 16, 24, .82), rgba(8, 18, 25, .66)) !important;
  border-top-color: transparent !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom: 1px solid rgba(0, 210, 255, .075) !important;
  box-shadow:
    0 14px 42px rgba(0, 0, 0, .30),
    0 1px 0 rgba(255, 255, 255, .035) inset,
    0 18px 52px rgba(0, 210, 255, .045) !important;
  backdrop-filter: blur(16px) saturate(1.14) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.14) !important;
}

body:has(.dj-bg-stage) header::before,
body:has(.dj-bg-stage) nav::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(0, 210, 255, .05), transparent 28%, rgba(0, 210, 255, .045) 72%, transparent),
    radial-gradient(circle at 50% 100%, rgba(0, 210, 255, .08), transparent 58%) !important;
  opacity: .78 !important;
  border: 0 !important;
  box-shadow: none !important;
}

body:has(.dj-bg-stage) header::after,
body:has(.dj-bg-stage) nav::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -32px !important;
  height: 32px !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(6, 14, 20, .28), rgba(6, 14, 20, 0)) !important;
  border: 0 !important;
  box-shadow: none !important;
}

body:has(.dj-bg-stage) header a,
body:has(.dj-bg-stage) header button,
body:has(.dj-bg-stage) nav a,
body:has(.dj-bg-stage) nav button {
  transition: background-color .22s ease, color .22s ease, box-shadow .22s ease, transform .22s ease !important;
}

body:has(.dj-bg-stage) header a:hover,
body:has(.dj-bg-stage) header button:hover,
body:has(.dj-bg-stage) nav a:hover,
body:has(.dj-bg-stage) nav button:hover {
  background-color: rgba(0, 132, 255, .10) !important;
  box-shadow: 0 0 16px rgba(0, 210, 255, .08) !important;
}

body:has(.dj-bg-stage) [data-dj-hide-theme-toggle="true"],
body:has(.dj-bg-stage) button[aria-label*="??"],
body:has(.dj-bg-stage) button[aria-label*="theme" i],
body:has(.dj-bg-stage) button[title*="??"],
body:has(.dj-bg-stage) button[title*="theme" i],
body:has(.dj-bg-stage) button:has(svg.lucide-sun),
body:has(.dj-bg-stage) button:has(svg.lucide-moon),
body:has(.dj-bg-stage) button:has(svg[class*="Sun"]),
body:has(.dj-bg-stage) button:has(svg[class*="Moon"]),
body:has(.dj-bg-stage) button:has(svg[data-lucide="sun"]),
body:has(.dj-bg-stage) button:has(svg[data-lucide="moon"]) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* v12 seamless top header - dissolve hard band into the cyber background */
body:has(.dj-bg-stage) header,
body:has(.dj-bg-stage) nav,
body:has(.dj-bg-stage) [class*="navbar"],
body:has(.dj-bg-stage) [class*="header"] {
  position: relative !important;
  isolation: isolate !important;
  background:
    radial-gradient(circle at 50% -34px, rgba(0, 210, 255, .16), transparent 54%),
    radial-gradient(circle at 76% 24px, rgba(82, 120, 255, .075), transparent 40%),
    linear-gradient(180deg, rgba(8, 13, 22, .66) 0%, rgba(7, 18, 25, .46) 58%, rgba(5, 14, 20, .14) 100%) !important;
  border: 0 !important;
  border-bottom-color: transparent !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .035),
    0 18px 54px rgba(0, 0, 0, .16) !important;
  backdrop-filter: blur(18px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;
}

body:has(.dj-bg-stage) header::before,
body:has(.dj-bg-stage) nav::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(0, 210, 255, .03), transparent 24%, rgba(0, 210, 255, .045) 52%, transparent 78%),
    radial-gradient(circle at 16% 80%, rgba(0, 210, 255, .09), transparent 42%),
    radial-gradient(circle at 82% 76%, rgba(0, 130, 255, .07), transparent 44%) !important;
  opacity: .78 !important;
  border: 0 !important;
  box-shadow: none !important;
}

body:has(.dj-bg-stage) header::after,
body:has(.dj-bg-stage) nav::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -92px !important;
  height: 92px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(6, 18, 24, .34) 0%, rgba(6, 18, 24, .18) 38%, rgba(6, 18, 24, 0) 100%),
    radial-gradient(ellipse at 50% 0%, rgba(0, 210, 255, .075), transparent 68%) !important;
  border: 0 !important;
  box-shadow: none !important;
}

body:has(.dj-bg-stage) header > *,
body:has(.dj-bg-stage) nav > * {
  position: relative !important;
  z-index: 1 !important;
}

body:has(.dj-bg-stage) header a,
body:has(.dj-bg-stage) header button,
body:has(.dj-bg-stage) nav a,
body:has(.dj-bg-stage) nav button {
  background-clip: padding-box !important;
}

body:has(.dj-bg-stage) header a:not([data-dj-hide-theme-toggle="true"]):hover,
body:has(.dj-bg-stage) header button:not([data-dj-hide-theme-toggle="true"]):hover,
body:has(.dj-bg-stage) nav a:not([data-dj-hide-theme-toggle="true"]):hover,
body:has(.dj-bg-stage) nav button:not([data-dj-hide-theme-toggle="true"]):hover {
  background-color: rgba(0, 132, 255, .11) !important;
  box-shadow: 0 0 18px rgba(0, 210, 255, .10), inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Reduce the first content edge so the header and code-rain field read as one scene. */
body:has(.dj-bg-stage) .home-page,
body:has(.dj-bg-stage) main,
body:has(.dj-bg-stage) section:first-of-type {
  border-top: 0 !important;
}

/* v13 header fix - remove the full-width band and bottom rule completely */
body:has(.dj-bg-stage) header,
body:has(.dj-bg-stage) nav,
body:has(.dj-bg-stage) [class*="navbar"],
body:has(.dj-bg-stage) [class*="header"] {
  position: relative !important;
  isolation: auto !important;
  background: rgba(5, 12, 18, .18) !important;
  background-image: none !important;
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  backdrop-filter: blur(8px) saturate(1.05) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.05) !important;
}

body:has(.dj-bg-stage) header::before,
body:has(.dj-bg-stage) header::after,
body:has(.dj-bg-stage) nav::before,
body:has(.dj-bg-stage) nav::after,
body:has(.dj-bg-stage) [class*="navbar"]::before,
body:has(.dj-bg-stage) [class*="navbar"]::after,
body:has(.dj-bg-stage) [class*="header"]::before,
body:has(.dj-bg-stage) [class*="header"]::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

body:has(.dj-bg-stage) header > div,
body:has(.dj-bg-stage) nav > div,
body:has(.dj-bg-stage) header [class*="container"],
body:has(.dj-bg-stage) nav [class*="container"] {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

body:has(.dj-bg-stage) header a,
body:has(.dj-bg-stage) header button,
body:has(.dj-bg-stage) nav a,
body:has(.dj-bg-stage) nav button {
  border-color: rgba(255, 255, 255, .06) !important;
  color: rgba(218, 232, 238, .86) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .35) !important;
}

body:has(.dj-bg-stage) header a[aria-current="page"],
body:has(.dj-bg-stage) header .bg-primary,
body:has(.dj-bg-stage) nav a[aria-current="page"],
body:has(.dj-bg-stage) nav .bg-primary {
  background: rgba(0, 132, 255, .18) !important;
  color: #dff8ff !important;
  box-shadow: 0 0 18px rgba(0, 180, 255, .16), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

body:has(.dj-bg-stage) header a:not([data-dj-hide-theme-toggle="true"]):hover,
body:has(.dj-bg-stage) header button:not([data-dj-hide-theme-toggle="true"]):hover,
body:has(.dj-bg-stage) nav a:not([data-dj-hide-theme-toggle="true"]):hover,
body:has(.dj-bg-stage) nav button:not([data-dj-hide-theme-toggle="true"]):hover {
  background-color: rgba(0, 132, 255, .12) !important;
  box-shadow: 0 0 16px rgba(0, 210, 255, .10) !important;
}

body:has(.dj-bg-stage) .dj-bg-stage {
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 210, 255, .16), transparent 38%),
    radial-gradient(circle at 72% 30%, rgba(96, 116, 255, .11), transparent 42%),
    linear-gradient(180deg, rgba(5, 13, 19, .98) 0%, rgba(5, 13, 19, .95) 10%, rgba(5, 10, 18, .94) 52%, rgba(4, 8, 14, .98) 100%) !important;
}

body:has(.dj-bg-stage) .home-page,
body:has(.dj-bg-stage) main,
body:has(.dj-bg-stage) section,
body:has(.dj-bg-stage) [class*="border-b"],
body:has(.dj-bg-stage) [class*="border-t"] {
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* v14 final header seam removal - transparent header over one continuous background */
body:has(.dj-bg-stage) header,
body:has(.dj-bg-stage) nav,
body:has(.dj-bg-stage) [class*="navbar"],
body:has(.dj-bg-stage) [class*="header"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-block: 0 !important;
  border-inline: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body:has(.dj-bg-stage) header::before,
body:has(.dj-bg-stage) header::after,
body:has(.dj-bg-stage) nav::before,
body:has(.dj-bg-stage) nav::after,
body:has(.dj-bg-stage) [class*="navbar"]::before,
body:has(.dj-bg-stage) [class*="navbar"]::after,
body:has(.dj-bg-stage) [class*="header"]::before,
body:has(.dj-bg-stage) [class*="header"]::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

body:has(.dj-bg-stage) header > *,
body:has(.dj-bg-stage) header > div,
body:has(.dj-bg-stage) nav > *,
body:has(.dj-bg-stage) nav > div,
body:has(.dj-bg-stage) header [class*="container"],
body:has(.dj-bg-stage) nav [class*="container"] {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

body:has(.dj-bg-stage) .dj-bg-stage {
  background:
    radial-gradient(circle at 42% 6%, rgba(0, 210, 255, .13), transparent 42%),
    radial-gradient(circle at 78% 34%, rgba(96, 116, 255, .10), transparent 44%),
    linear-gradient(180deg, rgba(5, 13, 19, .98) 0%, rgba(5, 13, 19, .98) 18%, rgba(5, 10, 18, .95) 56%, rgba(4, 8, 14, .98) 100%) !important;
}

body:has(.dj-bg-stage) .dj-bg-stage video {
  opacity: .38 !important;
  filter: brightness(.88) contrast(.78) saturate(.78) blur(.22px) !important;
}

body:has(.dj-bg-stage) .dj-bg-glass,
body:has(.dj-bg-stage) .dj-bg-vignette {
  background:
    radial-gradient(circle at 48% 5%, rgba(0, 210, 255, .045), transparent 45%),
    linear-gradient(180deg, rgba(5, 12, 18, .02), rgba(5, 12, 18, .18)) !important;
  border: 0 !important;
  box-shadow: none !important;
}

body:has(.dj-bg-stage) header a,
body:has(.dj-bg-stage) header button,
body:has(.dj-bg-stage) nav a,
body:has(.dj-bg-stage) nav button {
  text-shadow: 0 1px 12px rgba(0, 0, 0, .48) !important;
}

body:has(.dj-bg-stage) header a[aria-current="page"],
body:has(.dj-bg-stage) header .bg-primary,
body:has(.dj-bg-stage) nav a[aria-current="page"],
body:has(.dj-bg-stage) nav .bg-primary {
  background: rgba(0, 132, 255, .18) !important;
  border-color: rgba(0, 210, 255, .18) !important;
  box-shadow: 0 0 18px rgba(0, 180, 255, .14), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

body:has(.dj-bg-stage) .home-page,
body:has(.dj-bg-stage) main,
body:has(.dj-bg-stage) section,
body:has(.dj-bg-stage) [class*="border-b"],
body:has(.dj-bg-stage) [class*="border-t"],
body:has(.dj-bg-stage) [class*="shadow"] {
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}

body:has(.dj-bg-stage) .home-page > :first-child,
body:has(.dj-bg-stage) main > :first-child {
  box-shadow: none !important;
  border-top: 0 !important;
}

/* v15 secondary pages polish - product/cart/blog glass panels with readable contrast */
body:has(.dj-bg-stage) {
  --dj-panel-glass: rgba(18, 22, 28, .66);
  --dj-panel-glass-strong: rgba(18, 22, 28, .74);
  --dj-panel-glass-soft: rgba(18, 22, 28, .54);
  --dj-line-soft: rgba(255, 255, 255, .10);
  --dj-line-cyan: rgba(0, 210, 255, .22);
  --dj-text-strong: rgba(248, 253, 255, .96);
  --dj-text-soft: rgba(203, 218, 226, .82);
}

body:has(.dj-bg-stage) main > .container,
body:has(.dj-bg-stage) main [class*="container"] {
  position: relative !important;
}

/* Product detail and checkout-like large surfaces */
body:has(.dj-bg-stage) main .grid,
body:has(.dj-bg-stage) main .rounded-2xl,
body:has(.dj-bg-stage) main .rounded-xl,
body:has(.dj-bg-stage) main .border.bg-card,
body:has(.dj-bg-stage) main .bg-card,
body:has(.dj-bg-stage) main [class*="bg-card"],
body:has(.dj-bg-stage) main [class*="bg-background"],
body:has(.dj-bg-stage) main [class*="bg-muted"] {
  background-color: var(--dj-panel-glass) !important;
  border-color: var(--dj-line-soft) !important;
  backdrop-filter: blur(14px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.12) !important;
  box-shadow: 0 18px 52px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255,255,255,.045) !important;
}

body:has(.dj-bg-stage) main .grid > *,
body:has(.dj-bg-stage) main .rounded-2xl > *,
body:has(.dj-bg-stage) main .rounded-xl > * {
  border-color: rgba(255, 255, 255, .08) !important;
}

body:has(.dj-bg-stage) main img,
body:has(.dj-bg-stage) article img {
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 14px 42px rgba(0,0,0,.24) !important;
}

body:has(.dj-bg-stage) main h1,
body:has(.dj-bg-stage) main h2,
body:has(.dj-bg-stage) main h3,
body:has(.dj-bg-stage) article h1,
body:has(.dj-bg-stage) article h2,
body:has(.dj-bg-stage) article h3 {
  color: var(--dj-text-strong) !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .34) !important;
}

body:has(.dj-bg-stage) main p,
body:has(.dj-bg-stage) main span,
body:has(.dj-bg-stage) main label,
body:has(.dj-bg-stage) main li,
body:has(.dj-bg-stage) article p,
body:has(.dj-bg-stage) article span,
body:has(.dj-bg-stage) article li {
  color: var(--dj-text-soft) !important;
}

body:has(.dj-bg-stage) main [class*="text-muted"],
body:has(.dj-bg-stage) article [class*="text-muted"] {
  color: rgba(196, 213, 222, .76) !important;
}

/* Preserve high-signal controls and prices. */
body:has(.dj-bg-stage) main button,
body:has(.dj-bg-stage) main a[role="button"],
body:has(.dj-bg-stage) main .bg-primary {
  color: #fff !important;
}

body:has(.dj-bg-stage) main [class*="text-primary"],
body:has(.dj-bg-stage) main [class*="text-cyan"],
body:has(.dj-bg-stage) main [class*="text-emerald"] {
  color: #76f7e6 !important;
  text-shadow: 0 0 16px rgba(0, 220, 255, .22) !important;
}

/* Product specs, quantity steppers, and selectable SKU boxes. */
body:has(.dj-bg-stage) main [role="radio"],
body:has(.dj-bg-stage) main [aria-checked],
body:has(.dj-bg-stage) main input,
body:has(.dj-bg-stage) main textarea,
body:has(.dj-bg-stage) main select,
body:has(.dj-bg-stage) main [class*="ring"],
body:has(.dj-bg-stage) main [class*="border-input"] {
  background-color: rgba(12, 20, 30, .56) !important;
  border-color: rgba(255, 255, 255, .11) !important;
  color: var(--dj-text-strong) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
}

body:has(.dj-bg-stage) main [aria-checked="true"],
body:has(.dj-bg-stage) main [data-state="checked"],
body:has(.dj-bg-stage) main .ring-primary,
body:has(.dj-bg-stage) main .border-primary {
  background-color: rgba(0, 132, 255, .13) !important;
  border-color: rgba(0, 210, 255, .44) !important;
  box-shadow: 0 0 0 1px rgba(0,210,255,.16), 0 0 22px rgba(0,210,255,.12) !important;
}

/* Cart and checkout stepper bars. */
body:has(.dj-bg-stage) main [class*="step"],
body:has(.dj-bg-stage) main [class*="progress"],
body:has(.dj-bg-stage) main ol,
body:has(.dj-bg-stage) main [class*="justify-between"][class*="rounded"] {
  background-color: rgba(14, 22, 30, .58) !important;
  border-color: rgba(255, 255, 255, .095) !important;
  backdrop-filter: blur(12px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.08) !important;
}

body:has(.dj-bg-stage) main .lucide-shopping-cart,
body:has(.dj-bg-stage) main svg[class*="shopping"],
body:has(.dj-bg-stage) main svg[class*="Shopping"] {
  color: rgba(210, 224, 232, .62) !important;
  filter: drop-shadow(0 0 12px rgba(0,210,255,.10)) !important;
}

/* Blog list/search: lighter glass, more breathing room, readable cards. */
body:has(.dj-bg-stage) input[type="search"],
body:has(.dj-bg-stage) input[placeholder*="??"],
body:has(.dj-bg-stage) input[placeholder*="??"],
body:has(.dj-bg-stage) input[placeholder*="??"] {
  background: rgba(12, 20, 30, .62) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  color: var(--dj-text-strong) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

body:has(.dj-bg-stage) article,
body:has(.dj-bg-stage) a[href*="/blog/"][class*="rounded"],
body:has(.dj-bg-stage) main [class*="grid"] > a[href*="blog"],
body:has(.dj-bg-stage) main [class*="grid"] > article,
body:has(.dj-bg-stage) main [class*="grid"] > div:has(a[href*="blog"]) {
  background: var(--dj-panel-glass) !important;
  border: 1px solid var(--dj-line-soft) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(14px) saturate(1.10) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.10) !important;
  box-shadow: 0 18px 52px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.045) !important;
  overflow: hidden !important;
  transition: transform .26s ease, border-color .26s ease, box-shadow .26s ease, background-color .26s ease !important;
}

body:has(.dj-bg-stage) article:hover,
body:has(.dj-bg-stage) a[href*="/blog/"][class*="rounded"]:hover,
body:has(.dj-bg-stage) main [class*="grid"] > a[href*="blog"]:hover,
body:has(.dj-bg-stage) main [class*="grid"] > div:has(a[href*="blog"]):hover {
  transform: translateY(-3px) !important;
  background: var(--dj-panel-glass-strong) !important;
  border-color: rgba(0, 210, 255, .26) !important;
  box-shadow: 0 0 20px rgba(0,210,255,.13), 0 22px 58px rgba(0,0,0,.30) !important;
}

body:has(.dj-bg-stage) article img,
body:has(.dj-bg-stage) a[href*="/blog/"] img,
body:has(.dj-bg-stage) main [class*="grid"] > div:has(a[href*="blog"]) img {
  opacity: .82 !important;
  filter: brightness(.86) contrast(.95) saturate(.92) !important;
  box-shadow: none !important;
}

/* Give secondary pages cleaner rhythm without making panels float like blocks. */
body:has(.dj-bg-stage) main {
  padding-bottom: 56px !important;
}

body:has(.dj-bg-stage) main > .container,
body:has(.dj-bg-stage) main [class*="container"] {
  gap: 26px !important;
}

@media (max-width: 768px) {
  body:has(.dj-bg-stage) main .grid,
  body:has(.dj-bg-stage) main .rounded-2xl,
  body:has(.dj-bg-stage) main .rounded-xl,
  body:has(.dj-bg-stage) article {
    background-color: rgba(18, 22, 28, .74) !important;
  }
}

/* v16 nav readability and hover gloss */
body:has(.dj-bg-stage) header,
body:has(.dj-bg-stage) nav {
  min-height: 74px !important;
}

body:has(.dj-bg-stage) header > div,
body:has(.dj-bg-stage) nav > div,
body:has(.dj-bg-stage) header [class*="container"],
body:has(.dj-bg-stage) nav [class*="container"] {
  min-height: 74px !important;
  align-items: center !important;
  gap: 24px !important;
}

body:has(.dj-bg-stage) header a,
body:has(.dj-bg-stage) header button,
body:has(.dj-bg-stage) nav a,
body:has(.dj-bg-stage) nav button {
  position: relative !important;
  overflow: hidden !important;
  min-height: 38px !important;
  padding: 8px 12px !important;
  border-radius: 12px !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: rgba(226, 240, 246, .92) !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .55) !important;
  transition: transform .22s ease, color .22s ease, background-color .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

body:has(.dj-bg-stage) header a::before,
body:has(.dj-bg-stage) header button::before,
body:has(.dj-bg-stage) nav a::before,
body:has(.dj-bg-stage) nav button::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  transform: translateX(-45%) skewX(-14deg) !important;
  background: linear-gradient(110deg, transparent 0%, rgba(0, 210, 255, .00) 35%, rgba(0, 210, 255, .22) 48%, rgba(150, 245, 255, .15) 56%, transparent 72%) !important;
  transition: opacity .24s ease, transform .42s ease !important;
}

body:has(.dj-bg-stage) header a > *,
body:has(.dj-bg-stage) header button > *,
body:has(.dj-bg-stage) nav a > *,
body:has(.dj-bg-stage) nav button > * {
  position: relative !important;
  z-index: 1 !important;
}

body:has(.dj-bg-stage) header svg,
body:has(.dj-bg-stage) nav svg {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  color: rgba(154, 226, 245, .84) !important;
  filter: drop-shadow(0 0 8px rgba(0, 210, 255, .16)) !important;
}

body:has(.dj-bg-stage) header a:hover,
body:has(.dj-bg-stage) header button:hover,
body:has(.dj-bg-stage) nav a:hover,
body:has(.dj-bg-stage) nav button:hover {
  transform: translateY(-1px) !important;
  color: #f4fdff !important;
  background: rgba(0, 132, 255, .13) !important;
  border-color: rgba(0, 210, 255, .24) !important;
  box-shadow: 0 0 18px rgba(0, 210, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .07) !important;
}

body:has(.dj-bg-stage) header a:hover::before,
body:has(.dj-bg-stage) header button:hover::before,
body:has(.dj-bg-stage) nav a:hover::before,
body:has(.dj-bg-stage) nav button:hover::before {
  opacity: 1 !important;
  transform: translateX(34%) skewX(-14deg) !important;
}

body:has(.dj-bg-stage) header a[aria-current="page"],
body:has(.dj-bg-stage) header a.router-link-active,
body:has(.dj-bg-stage) header .bg-primary,
body:has(.dj-bg-stage) nav a[aria-current="page"],
body:has(.dj-bg-stage) nav a.router-link-active,
body:has(.dj-bg-stage) nav .bg-primary {
  font-size: 15px !important;
  color: #ffffff !important;
  background: rgba(0, 132, 255, .22) !important;
  border-color: rgba(0, 210, 255, .26) !important;
  box-shadow: 0 0 20px rgba(0, 180, 255, .18), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

body:has(.dj-bg-stage) header a[href="/"],
body:has(.dj-bg-stage) nav a[href="/"] {
  font-size: 17px !important;
  font-weight: 800 !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

body:has(.dj-bg-stage) [data-dj-hide-theme-toggle="true"] {
  display: none !important;
}

@media (min-width: 1024px) {
  body:has(.dj-bg-stage) header a,
  body:has(.dj-bg-stage) header button,
  body:has(.dj-bg-stage) nav a,
  body:has(.dj-bg-stage) nav button {
    font-size: 15.5px !important;
  }

  body:has(.dj-bg-stage) header svg,
  body:has(.dj-bg-stage) nav svg {
    width: 19px !important;
    height: 19px !important;
  }
}

@media (max-width: 900px) {
  body:has(.dj-bg-stage) header,
  body:has(.dj-bg-stage) nav,
  body:has(.dj-bg-stage) header > div,
  body:has(.dj-bg-stage) nav > div {
    min-height: 64px !important;
  }

  body:has(.dj-bg-stage) header a,
  body:has(.dj-bg-stage) header button,
  body:has(.dj-bg-stage) nav a,
  body:has(.dj-bg-stage) nav button {
    min-height: 34px !important;
    padding: 7px 9px !important;
    font-size: 14px !important;
  }

  body:has(.dj-bg-stage) header svg,
  body:has(.dj-bg-stage) nav svg {
    width: 17px !important;
    height: 17px !important;
  }
}

/* v17 nav sizing refinement - readable text without oversized hit bands */
body:has(.dj-bg-stage) header,
body:has(.dj-bg-stage) nav {
  min-height: 68px !important;
}

body:has(.dj-bg-stage) header > div,
body:has(.dj-bg-stage) nav > div,
body:has(.dj-bg-stage) header [class*="container"],
body:has(.dj-bg-stage) nav [class*="container"] {
  min-height: 68px !important;
  gap: 22px !important;
}

body:has(.dj-bg-stage) header a,
body:has(.dj-bg-stage) header button,
body:has(.dj-bg-stage) nav a,
body:has(.dj-bg-stage) nav button {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 8px 13px !important;
  border-radius: 12px !important;
  font-size: 15.5px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  background-color: rgba(8, 18, 26, .10) !important;
}

body:has(.dj-bg-stage) header a[href="/"],
body:has(.dj-bg-stage) nav a[href="/"] {
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  font-size: 17px !important;
  padding-left: 17px !important;
  padding-right: 17px !important;
  background: rgba(8, 18, 26, .22) !important;
}

body:has(.dj-bg-stage) header a[aria-current="page"],
body:has(.dj-bg-stage) header a.router-link-active,
body:has(.dj-bg-stage) header .bg-primary,
body:has(.dj-bg-stage) nav a[aria-current="page"],
body:has(.dj-bg-stage) nav a.router-link-active,
body:has(.dj-bg-stage) nav .bg-primary {
  background: rgba(0, 132, 255, .24) !important;
  color: #fff !important;
  border-color: rgba(0, 210, 255, .28) !important;
  box-shadow: 0 0 20px rgba(0, 180, 255, .20), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

body:has(.dj-bg-stage) header a:hover,
body:has(.dj-bg-stage) header button:hover,
body:has(.dj-bg-stage) nav a:hover,
body:has(.dj-bg-stage) nav button:hover {
  transform: translateY(-2px) !important;
  background: rgba(0, 132, 255, .17) !important;
  color: #f7fdff !important;
  box-shadow: 0 0 22px rgba(0, 210, 255, .18), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

body:has(.dj-bg-stage) header svg,
body:has(.dj-bg-stage) nav svg {
  width: 19px !important;
  height: 19px !important;
}

body:has(.dj-bg-stage) header span,
body:has(.dj-bg-stage) nav span {
  line-height: 1.15 !important;
}

@media (max-width: 900px) {
  body:has(.dj-bg-stage) header a,
  body:has(.dj-bg-stage) header button,
  body:has(.dj-bg-stage) nav a,
  body:has(.dj-bg-stage) nav button {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    font-size: 14px !important;
    padding: 7px 10px !important;
  }
}

/* v18 unified full-page glass background - fixes viewport-height split */
:root {
  --dj-page-veil: rgba(6, 12, 18, .58);
  --dj-page-veil-strong: rgba(7, 13, 20, .68);
  --dj-panel-glass-v18: rgba(15, 20, 28, .68);
  --dj-panel-border-v18: rgba(150, 220, 255, .13);
}

html.dark,
html.dark body,
body:has(.dj-bg-stage) {
  background: #071018 !important;
}

body:has(.dj-bg-stage) {
  min-height: 100vh !important;
  overflow-x: hidden !important;
}

body:has(.dj-bg-stage)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 8%, rgba(0, 214, 255, .105), transparent 44%),
    radial-gradient(circle at 80% 36%, rgba(70, 128, 255, .075), transparent 42%),
    radial-gradient(circle at 22% 52%, rgba(0, 255, 178, .052), transparent 38%),
    linear-gradient(180deg, rgba(5, 11, 16, .36), rgba(5, 10, 15, .62));
  backdrop-filter: blur(6px) saturate(1.08);
  -webkit-backdrop-filter: blur(6px) saturate(1.08);
}

body:has(.dj-bg-stage) #app,
body:has(.dj-bg-stage) main,
body:has(.dj-bg-stage) .home-page,
body:has(.dj-bg-stage) .min-h-screen {
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
}

.dj-bg-stage,
.dj-bg-vignette,
.dj-bg-glass {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: none !important;
  pointer-events: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.dj-bg-stage {
  z-index: 0 !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 215, 255, .14), transparent 38%),
    linear-gradient(180deg, #06121a 0%, #081018 100%) !important;
}

.dj-bg-stage video,
.dj-bg-stage img {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  object-fit: cover !important;
  opacity: .34 !important;
  filter: brightness(.84) contrast(.9) saturate(.9) blur(.15px) !important;
}

.dj-bg-vignette {
  z-index: 1 !important;
  background:
    linear-gradient(90deg, rgba(3, 8, 13, .74), rgba(3, 8, 13, .16) 17%, rgba(3, 8, 13, .08) 50%, rgba(3, 8, 13, .16) 83%, rgba(3, 8, 13, .74)),
    linear-gradient(180deg, rgba(4, 10, 15, .26), rgba(5, 11, 18, .34)),
    radial-gradient(circle at 50% 16%, rgba(0, 218, 255, .095), transparent 50%) !important;
}

.dj-bg-glass {
  z-index: 1 !important;
  background:
    linear-gradient(180deg, var(--dj-page-veil), var(--dj-page-veil-strong)),
    radial-gradient(circle at 52% 14%, rgba(0, 210, 255, .07), transparent 46%) !important;
  backdrop-filter: blur(12px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.12) !important;
}

body:has(.dj-bg-stage) main > section,
body:has(.dj-bg-stage) main > div,
body:has(.dj-bg-stage) [class*="bg-background"],
body:has(.dj-bg-stage) [class*="from-background"],
body:has(.dj-bg-stage) [class*="to-background"],
body:has(.dj-bg-stage) [class*="via-background"] {
  background-color: transparent !important;
  background-image: none !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

body:has(.dj-bg-stage) header,
body:has(.dj-bg-stage) nav,
body:has(.dj-bg-stage) [class*="sticky"][class*="top-0"] {
  background:
    linear-gradient(90deg, rgba(5, 12, 18, .40), rgba(0, 65, 78, .30) 48%, rgba(6, 13, 22, .40)) !important;
  backdrop-filter: blur(16px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.18) !important;
  border-bottom-color: rgba(130, 230, 255, .055) !important;
  box-shadow: none !important;
}

body:has(.dj-bg-stage) header::before,
body:has(.dj-bg-stage) header::after,
body:has(.dj-bg-stage) nav::before,
body:has(.dj-bg-stage) nav::after,
body:has(.dj-bg-stage) main > section::before,
body:has(.dj-bg-stage) main > section::after,
body:has(.dj-bg-stage) main > div::before,
body:has(.dj-bg-stage) main > div::after {
  border: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

body:has(.dj-bg-stage) .container,
body:has(.dj-bg-stage) [class*="container"] {
  background: transparent !important;
}

body:has(.dj-bg-stage) aside,
body:has(.dj-bg-stage) aside > div,
body:has(.dj-bg-stage) .bg-card,
body:has(.dj-bg-stage) [class*="bg-card"],
body:has(.dj-bg-stage) input,
body:has(.dj-bg-stage) textarea,
body:has(.dj-bg-stage) select {
  background-color: var(--dj-panel-glass-v18) !important;
  border-color: var(--dj-panel-border-v18) !important;
  backdrop-filter: blur(14px) saturate(1.14) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.14) !important;
}

body:has(.dj-bg-stage) .group.relative.overflow-hidden.flex.flex-row.items-center.rounded-xl,
body:has(.dj-bg-stage) .border.bg-card.text-card-foreground {
  background:
    linear-gradient(90deg, rgba(16, 22, 31, .72), rgba(12, 18, 27, .64)) !important;
  border-color: rgba(150, 220, 255, .125) !important;
  box-shadow:
    0 12px 34px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}

body:has(.dj-bg-stage) .group.relative.overflow-hidden.flex.flex-row.items-center.rounded-xl:hover,
body:has(.dj-bg-stage) .border.bg-card.text-card-foreground:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(0, 210, 255, .46) !important;
  box-shadow:
    0 0 20px rgba(0, 210, 255, .23),
    inset 0 0 10px rgba(0, 210, 255, .09),
    0 18px 42px rgba(0, 0, 0, .30) !important;
}

body:has(.dj-bg-stage) [class*="border-t"],
body:has(.dj-bg-stage) [class*="border-b"] {
  border-top-color: rgba(130, 230, 255, .045) !important;
  border-bottom-color: rgba(130, 230, 255, .045) !important;
}

body:has(.dj-bg-stage) main > section + section {
  margin-top: 0 !important;
}

body:has(.dj-bg-stage) .home-page .flex.flex-col.lg\:flex-row {
  gap: 28px !important;
  align-items: flex-start !important;
}

body:has(.dj-bg-stage) .home-page .space-y-2 > * + * {
  margin-top: 12px !important;
}

@media (max-width: 768px) {
  body:has(.dj-bg-stage)::before {
    backdrop-filter: blur(5px) saturate(1.06);
    -webkit-backdrop-filter: blur(5px) saturate(1.06);
  }

  .dj-bg-glass {
    backdrop-filter: blur(9px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(9px) saturate(1.08) !important;
  }
}

/* v19 authoritative unified glass layer - overrides older specific rules */
html.dark body:has(.dj-bg-stage),
html.dark body:has(.dj-bg-stage) #app,
html.dark body:has(.dj-bg-stage) .min-h-screen {
  background: #071018 !important;
}

html.dark body:has(.dj-bg-stage) .dj-bg-stage,
html.dark body:has(.dj-bg-stage) .dj-bg-vignette,
html.dark body:has(.dj-bg-stage) .dj-bg-glass {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: none !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

html.dark body:has(.dj-bg-stage) .dj-bg-stage {
  z-index: 0 !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 50% -8%, rgba(0, 226, 255, .20), transparent 38%),
    radial-gradient(circle at 20% 58%, rgba(0, 255, 178, .07), transparent 42%),
    radial-gradient(circle at 80% 48%, rgba(48, 102, 255, .08), transparent 44%),
    linear-gradient(180deg, #06121a 0%, #071018 52%, #050b10 100%) !important;
}

html.dark body:has(.dj-bg-stage) .dj-bg-stage video,
html.dark body:has(.dj-bg-stage) .dj-bg-stage img {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  object-fit: cover !important;
  opacity: .28 !important;
  filter: brightness(.84) contrast(.88) saturate(.86) blur(.35px) !important;
}

html.dark body:has(.dj-bg-stage) .dj-bg-vignette {
  z-index: 1 !important;
  background:
    linear-gradient(90deg, rgba(3, 8, 13, .80), rgba(3, 8, 13, .18) 17%, rgba(3, 8, 13, .10) 50%, rgba(3, 8, 13, .18) 83%, rgba(3, 8, 13, .80)),
    linear-gradient(180deg, rgba(4, 10, 15, .22), rgba(5, 11, 18, .42)) !important;
}

html.dark body:has(.dj-bg-stage) .dj-bg-glass {
  z-index: 1 !important;
  background:
    radial-gradient(circle at 50% 8%, rgba(0, 214, 255, .075), transparent 46%),
    linear-gradient(180deg, rgba(6, 12, 18, .58), rgba(6, 12, 18, .64)) !important;
  backdrop-filter: blur(13px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(13px) saturate(1.12) !important;
}

html.dark body:has(.dj-bg-stage) header {
  background:
    linear-gradient(90deg, rgba(5, 12, 18, .38), rgba(0, 76, 88, .26) 45%, rgba(6, 13, 22, .38)),
    radial-gradient(circle at 50% 0%, rgba(0, 220, 255, .10), transparent 60%) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: blur(17px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(17px) saturate(1.16) !important;
}

html.dark body:has(.dj-bg-stage) header::before,
html.dark body:has(.dj-bg-stage) header::after,
html.dark body:has(.dj-bg-stage) main::before,
html.dark body:has(.dj-bg-stage) main::after,
html.dark body:has(.dj-bg-stage) main > div::before,
html.dark body:has(.dj-bg-stage) main > div::after,
html.dark body:has(.dj-bg-stage) main > section::before,
html.dark body:has(.dj-bg-stage) main > section::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.dark body:has(.dj-bg-stage) main,
html.dark body:has(.dj-bg-stage) main > div,
html.dark body:has(.dj-bg-stage) main > section,
html.dark body:has(.dj-bg-stage) .home-page,
html.dark body:has(.dj-bg-stage) .container,
html.dark body:has(.dj-bg-stage) [class*="container"],
html.dark body:has(.dj-bg-stage) [class*="bg-background"],
html.dark body:has(.dj-bg-stage) [class*="from-background"],
html.dark body:has(.dj-bg-stage) [class*="via-background"],
html.dark body:has(.dj-bg-stage) [class*="to-background"] {
  background-color: transparent !important;
  background-image: none !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

html.dark body:has(.dj-bg-stage) aside,
html.dark body:has(.dj-bg-stage) aside > div,
html.dark body:has(.dj-bg-stage) .bg-card,
html.dark body:has(.dj-bg-stage) [class*="bg-card"],
html.dark body:has(.dj-bg-stage) input,
html.dark body:has(.dj-bg-stage) textarea,
html.dark body:has(.dj-bg-stage) select {
  background-color: rgba(15, 20, 28, .66) !important;
  border-color: rgba(150, 220, 255, .13) !important;
  backdrop-filter: blur(14px) saturate(1.14) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.14) !important;
}

html.dark body:has(.dj-bg-stage) .group.flex.items-center.gap-3.rounded-lg.border.bg-card,
html.dark body:has(.dj-bg-stage) .group.relative.overflow-hidden.flex.flex-row.items-center.rounded-xl,
html.dark body:has(.dj-bg-stage) .border.bg-card.text-card-foreground {
  background:
    linear-gradient(90deg, rgba(16, 22, 31, .74), rgba(12, 18, 27, .66)) !important;
  border-color: rgba(150, 220, 255, .14) !important;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease !important;
  box-shadow:
    0 12px 34px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}

html.dark body:has(.dj-bg-stage) .group.flex.items-center.gap-3.rounded-lg.border.bg-card:hover,
html.dark body:has(.dj-bg-stage) .group.relative.overflow-hidden.flex.flex-row.items-center.rounded-xl:hover,
html.dark body:has(.dj-bg-stage) .border.bg-card.text-card-foreground:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(0, 210, 255, .48) !important;
  box-shadow:
    0 0 20px rgba(0, 210, 255, .24),
    inset 0 0 10px rgba(0, 210, 255, .09),
    0 18px 42px rgba(0, 0, 0, .30) !important;
}

html.dark body:has(.dj-bg-stage) .mx-auto.w-full.max-w-\[1180px\].px-4.pt-6,
html.dark body:has(.dj-bg-stage) .mx-auto.w-full.max-w-\[1180px\].px-4.py-6 {
  padding-left: max(24px, 6vw) !important;
  padding-right: max(24px, 6vw) !important;
}

@media (max-width: 768px) {
  html.dark body:has(.dj-bg-stage) .dj-bg-glass {
    backdrop-filter: blur(10px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
  }
}

/* v20 final page shell correction - transparent app, single glass atmosphere */
html.dark body:has(.dj-bg-stage) {
  background: #071018 !important;
}

html.dark body:has(.dj-bg-stage) #app,
html.dark body:has(.dj-bg-stage) .min-h-screen,
html.dark body:has(.dj-bg-stage) main,
html.dark body:has(.dj-bg-stage) main > div,
html.dark body:has(.dj-bg-stage) main > section,
html.dark body:has(.dj-bg-stage) .home-page {
  background-color: transparent !important;
  background-image: none !important;
}

html.dark body:has(.dj-bg-stage) .dj-bg-stage,
html.dark body:has(.dj-bg-stage) .dj-bg-vignette,
html.dark body:has(.dj-bg-stage) .dj-bg-glass {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: none !important;
  border: 0 !important;
  border-width: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

html.dark body:has(.dj-bg-stage) .dj-bg-stage {
  background:
    radial-gradient(circle at 50% -10%, rgba(0, 226, 255, .18), transparent 38%),
    radial-gradient(circle at 24% 58%, rgba(0, 255, 178, .075), transparent 42%),
    radial-gradient(circle at 78% 46%, rgba(48, 102, 255, .085), transparent 44%),
    linear-gradient(180deg, #06121a 0%, #071018 52%, #050b10 100%) !important;
}

html.dark body:has(.dj-bg-stage) .dj-bg-stage video,
html.dark body:has(.dj-bg-stage) .dj-bg-stage img {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  object-fit: cover !important;
  opacity: .30 !important;
  filter: brightness(.86) contrast(.88) saturate(.88) blur(.35px) !important;
}

html.dark body:has(.dj-bg-stage) .dj-bg-vignette {
  background:
    linear-gradient(90deg, rgba(3, 8, 13, .78), rgba(3, 8, 13, .16) 16%, rgba(3, 8, 13, .08) 50%, rgba(3, 8, 13, .16) 84%, rgba(3, 8, 13, .78)),
    linear-gradient(180deg, rgba(4, 10, 15, .20), rgba(5, 11, 18, .36)) !important;
}

html.dark body:has(.dj-bg-stage) .dj-bg-glass {
  background:
    radial-gradient(circle at 50% 8%, rgba(0, 214, 255, .078), transparent 46%),
    linear-gradient(180deg, rgba(6, 12, 18, .52), rgba(6, 12, 18, .58)) !important;
  backdrop-filter: blur(13px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(13px) saturate(1.12) !important;
}

html.dark body:has(.dj-bg-stage) header.sticky,
html.dark body:has(.dj-bg-stage) header[class],
html.dark body:has(.dj-bg-stage) [class*="sticky"][class*="top-0"][class*="z-50"] {
  background:
    radial-gradient(circle at 50% -15%, rgba(0, 226, 255, .14), transparent 64%),
    linear-gradient(90deg, rgba(5, 12, 18, .34), rgba(0, 74, 88, .24) 48%, rgba(6, 13, 22, .34)) !important;
  border-bottom: 0 !important;
  border-bottom-width: 0 !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: blur(17px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(17px) saturate(1.16) !important;
}

html.dark body:has(.dj-bg-stage) header.sticky::before,
html.dark body:has(.dj-bg-stage) header.sticky::after,
html.dark body:has(.dj-bg-stage) [class*="sticky"][class*="top-0"][class*="z-50"]::before,
html.dark body:has(.dj-bg-stage) [class*="sticky"][class*="top-0"][class*="z-50"]::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.dark body:has(.dj-bg-stage) .container,
html.dark body:has(.dj-bg-stage) [class*="container"],
html.dark body:has(.dj-bg-stage) [class*="bg-background"],
html.dark body:has(.dj-bg-stage) [class*="from-background"],
html.dark body:has(.dj-bg-stage) [class*="via-background"],
html.dark body:has(.dj-bg-stage) [class*="to-background"] {
  background-color: transparent !important;
  background-image: none !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}

html.dark body:has(.dj-bg-stage) aside,
html.dark body:has(.dj-bg-stage) aside > div,
html.dark body:has(.dj-bg-stage) .bg-card,
html.dark body:has(.dj-bg-stage) [class*="bg-card"],
html.dark body:has(.dj-bg-stage) input,
html.dark body:has(.dj-bg-stage) textarea,
html.dark body:has(.dj-bg-stage) select {
  background-color: rgba(15, 20, 28, .64) !important;
  border-color: rgba(150, 220, 255, .13) !important;
  backdrop-filter: blur(14px) saturate(1.14) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.14) !important;
}

html.dark body:has(.dj-bg-stage) .group.flex.items-center.gap-3.rounded-lg.border.bg-card,
html.dark body:has(.dj-bg-stage) .group.relative.overflow-hidden.flex.flex-row.items-center.rounded-xl,
html.dark body:has(.dj-bg-stage) .border.bg-card.text-card-foreground {
  background:
    linear-gradient(90deg, rgba(16, 22, 31, .72), rgba(12, 18, 27, .64)) !important;
  border-color: rgba(150, 220, 255, .14) !important;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease !important;
  box-shadow:
    0 12px 34px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}

html.dark body:has(.dj-bg-stage) .group.flex.items-center.gap-3.rounded-lg.border.bg-card:hover,
html.dark body:has(.dj-bg-stage) .group.relative.overflow-hidden.flex.flex-row.items-center.rounded-xl:hover,
html.dark body:has(.dj-bg-stage) .border.bg-card.text-card-foreground:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(0, 210, 255, .48) !important;
  box-shadow:
    0 0 20px rgba(0, 210, 255, .24),
    inset 0 0 10px rgba(0, 210, 255, .09),
    0 18px 42px rgba(0, 0, 0, .30) !important;
}

/* v22 nav cleanup - hide public login only */
html.dark body:has(.dj-bg-stage) header a[href$="/auth/login"],
html.dark body:has(.dj-bg-stage) header a[href*="/auth/login?"],
html.dark body:has(.dj-bg-stage) nav a[href$="/auth/login"],
html.dark body:has(.dj-bg-stage) nav a[href*="/auth/login?"],
html.dark body:has(.dj-bg-stage) a[href="https://gogov.shop/auth/login"],
html.dark body:has(.dj-bg-stage) a[href="https://vip.gogov.shop/auth/login"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* v23 nav cleanup - hide public cart entry only */
html.dark body:has(.dj-bg-stage) header a[href$="/cart"],
html.dark body:has(.dj-bg-stage) header a[href*="/cart?"],
html.dark body:has(.dj-bg-stage) nav a[href$="/cart"],
html.dark body:has(.dj-bg-stage) nav a[href*="/cart?"],
html.dark body:has(.dj-bg-stage) a[aria-label="购物车"][href$="/cart"],
html.dark body:has(.dj-bg-stage) a[aria-label="购物车"][href*="/cart?"],
html.dark body:has(.dj-bg-stage) a[href="https://gogov.shop/cart"],
html.dark body:has(.dj-bg-stage) a[href="https://vip.gogov.shop/cart"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* v24 cyber capsule navigation */
html.dark body:has(.dj-bg-stage) header {
  min-height: 76px !important;
}

html.dark body:has(.dj-bg-stage) header > div,
html.dark body:has(.dj-bg-stage) header [class*="container"] {
  gap: clamp(18px, 2vw, 34px) !important;
}

html.dark body:has(.dj-bg-stage) header .dj-nav-pill {
  position: relative !important;
  isolation: isolate !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: max-content !important;
  height: 38px !important;
  padding: 0 17px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(154, 232, 255, .26) !important;
  background:
    radial-gradient(circle at 18% 15%, rgba(255, 255, 255, .22), transparent 34%),
    linear-gradient(180deg, rgba(232, 246, 255, .155), rgba(20, 102, 122, .20)) !important;
  color: rgba(232, 248, 255, .94) !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .34) !important;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, .20),
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 -1px 0 rgba(0, 210, 255, .08) !important;
  backdrop-filter: blur(15px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(15px) saturate(1.18) !important;
  transition:
    transform .24s ease,
    box-shadow .24s ease,
    border-color .24s ease,
    background .24s ease,
    color .24s ease !important;
}

html.dark body:has(.dj-bg-stage) header .dj-nav-pill::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(0, 226, 255, .08), rgba(115, 142, 255, .08), rgba(0, 255, 186, .06));
  opacity: .88;
}

html.dark body:has(.dj-bg-stage) header .dj-nav-pill svg {
  width: 16px !important;
  height: 16px !important;
  color: #8eeaff !important;
  stroke-width: 2.35 !important;
  filter: drop-shadow(0 0 7px rgba(0, 220, 255, .28)) !important;
  flex: none !important;
}

html.dark body:has(.dj-bg-stage) header .dj-nav-pill:hover,
html.dark body:has(.dj-bg-stage) header .dj-nav-pill:focus-visible {
  transform: translateY(-2px) !important;
  border-color: rgba(0, 226, 255, .54) !important;
  color: #ffffff !important;
  background:
    radial-gradient(circle at 20% 14%, rgba(255, 255, 255, .30), transparent 34%),
    linear-gradient(180deg, rgba(235, 249, 255, .20), rgba(0, 118, 150, .28)) !important;
  box-shadow:
    0 0 18px rgba(0, 214, 255, .22),
    0 14px 34px rgba(0, 0, 0, .27),
    inset 0 1px 0 rgba(255, 255, 255, .24) !important;
}

html.dark body:has(.dj-bg-stage) header .dj-nav-pill.router-link-active,
html.dark body:has(.dj-bg-stage) header .dj-nav-pill.router-link-exact-active,
html.dark body:has(.dj-bg-stage) header .dj-nav-pill.dj-nav-active {
  border-color: rgba(0, 178, 255, .62) !important;
  background:
    radial-gradient(circle at 22% 12%, rgba(255, 255, 255, .28), transparent 34%),
    linear-gradient(135deg, rgba(0, 142, 255, .45), rgba(0, 220, 255, .18)) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 22px rgba(0, 178, 255, .22),
    0 12px 30px rgba(0, 0, 0, .24),
    inset 0 1px 0 rgba(255, 255, 255, .24) !important;
}

html.dark body:has(.dj-bg-stage) header .dj-nav-pill.dj-nav-query {
  border-color: rgba(178, 236, 255, .36) !important;
}

html.dark body:has(.dj-bg-stage) header .dj-nav-pill.dj-nav-query::after {
  content: "";
  width: 5px;
  height: 5px;
  margin-left: 1px;
  border-radius: 999px;
  background: #78f4ff;
  box-shadow: 0 0 12px rgba(0, 226, 255, .58);
}

html.dark body:has(.dj-bg-stage) header a[title="GoGo Shop"] {
  margin-right: clamp(10px, 1.8vw, 26px) !important;
}

@media (max-width: 980px) {
  html.dark body:has(.dj-bg-stage) header .dj-nav-pill {
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 13.5px !important;
    gap: 6px !important;
  }

  html.dark body:has(.dj-bg-stage) header .dj-nav-pill svg {
    width: 14px !important;
    height: 14px !important;
  }
}

/* v25 cyber capsule navigation - supports nav-based layout */
html.dark body:has(.dj-bg-stage) nav.fixed.top-0,
html.dark body:has(.dj-bg-stage) header,
html.dark body:has(.dj-bg-stage) [class*="sticky"][class*="top-0"][class*="z-50"] {
  min-height: 76px !important;
  background:
    radial-gradient(circle at 50% -18%, rgba(0, 226, 255, .15), transparent 62%),
    linear-gradient(90deg, rgba(5, 12, 18, .38), rgba(0, 74, 88, .26) 48%, rgba(6, 13, 22, .38)) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: blur(17px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(17px) saturate(1.16) !important;
}

html.dark body:has(.dj-bg-stage) nav.fixed.top-0 > div,
html.dark body:has(.dj-bg-stage) header > div,
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 [class*="container"],
html.dark body:has(.dj-bg-stage) header [class*="container"] {
  gap: clamp(16px, 2vw, 34px) !important;
}

html.dark body:has(.dj-bg-stage) nav .dj-nav-pill,
html.dark body:has(.dj-bg-stage) header .dj-nav-pill {
  position: relative !important;
  isolation: isolate !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: max-content !important;
  height: 38px !important;
  padding: 0 17px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(154, 232, 255, .28) !important;
  background:
    radial-gradient(circle at 18% 15%, rgba(255, 255, 255, .22), transparent 34%),
    linear-gradient(180deg, rgba(232, 246, 255, .16), rgba(20, 102, 122, .20)) !important;
  color: rgba(232, 248, 255, .94) !important;
  font-size: 15.5px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .34) !important;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, .20),
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 -1px 0 rgba(0, 210, 255, .08) !important;
  backdrop-filter: blur(15px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(15px) saturate(1.18) !important;
  transition:
    transform .24s ease,
    box-shadow .24s ease,
    border-color .24s ease,
    background .24s ease,
    color .24s ease !important;
}

html.dark body:has(.dj-bg-stage) nav .dj-nav-pill::before,
html.dark body:has(.dj-bg-stage) header .dj-nav-pill::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(0, 226, 255, .08), rgba(115, 142, 255, .08), rgba(0, 255, 186, .06));
  opacity: .9;
}

html.dark body:has(.dj-bg-stage) nav .dj-nav-pill svg,
html.dark body:has(.dj-bg-stage) header .dj-nav-pill svg {
  width: 16px !important;
  height: 16px !important;
  color: #8eeaff !important;
  stroke-width: 2.35 !important;
  filter: drop-shadow(0 0 7px rgba(0, 220, 255, .28)) !important;
  flex: none !important;
}

html.dark body:has(.dj-bg-stage) nav .dj-nav-pill:hover,
html.dark body:has(.dj-bg-stage) nav .dj-nav-pill:focus-visible,
html.dark body:has(.dj-bg-stage) header .dj-nav-pill:hover,
html.dark body:has(.dj-bg-stage) header .dj-nav-pill:focus-visible {
  transform: translateY(-2px) !important;
  border-color: rgba(0, 226, 255, .56) !important;
  color: #ffffff !important;
  background:
    radial-gradient(circle at 20% 14%, rgba(255, 255, 255, .30), transparent 34%),
    linear-gradient(180deg, rgba(235, 249, 255, .20), rgba(0, 118, 150, .28)) !important;
  box-shadow:
    0 0 18px rgba(0, 214, 255, .23),
    0 14px 34px rgba(0, 0, 0, .27),
    inset 0 1px 0 rgba(255, 255, 255, .24) !important;
}

html.dark body:has(.dj-bg-stage) nav .dj-nav-pill.router-link-active,
html.dark body:has(.dj-bg-stage) nav .dj-nav-pill.router-link-exact-active,
html.dark body:has(.dj-bg-stage) nav .dj-nav-pill.dj-nav-active,
html.dark body:has(.dj-bg-stage) header .dj-nav-pill.router-link-active,
html.dark body:has(.dj-bg-stage) header .dj-nav-pill.router-link-exact-active,
html.dark body:has(.dj-bg-stage) header .dj-nav-pill.dj-nav-active {
  border-color: rgba(0, 178, 255, .64) !important;
  background:
    radial-gradient(circle at 22% 12%, rgba(255, 255, 255, .28), transparent 34%),
    linear-gradient(135deg, rgba(0, 142, 255, .45), rgba(0, 220, 255, .18)) !important;
  color: #ffffff !important;
  box-shadow:
    0 0 22px rgba(0, 178, 255, .23),
    0 12px 30px rgba(0, 0, 0, .24),
    inset 0 1px 0 rgba(255, 255, 255, .24) !important;
}

html.dark body:has(.dj-bg-stage) nav .dj-nav-pill.dj-nav-query,
html.dark body:has(.dj-bg-stage) header .dj-nav-pill.dj-nav-query {
  border-color: rgba(178, 236, 255, .38) !important;
}

html.dark body:has(.dj-bg-stage) nav .dj-nav-pill.dj-nav-query::after,
html.dark body:has(.dj-bg-stage) header .dj-nav-pill.dj-nav-query::after {
  content: "";
  width: 5px;
  height: 5px;
  margin-left: 1px;
  border-radius: 999px;
  background: #78f4ff;
  box-shadow: 0 0 12px rgba(0, 226, 255, .58);
}

html.dark body:has(.dj-bg-stage) nav a[title="GoGo Shop"],
html.dark body:has(.dj-bg-stage) header a[title="GoGo Shop"] {
  margin-right: clamp(10px, 1.8vw, 26px) !important;
}

@media (max-width: 980px) {
  html.dark body:has(.dj-bg-stage) nav .dj-nav-pill,
  html.dark body:has(.dj-bg-stage) header .dj-nav-pill {
    height: 34px !important;
    padding: 0 12px !important;
    font-size: 13.5px !important;
    gap: 6px !important;
  }

  html.dark body:has(.dj-bg-stage) nav .dj-nav-pill svg,
  html.dark body:has(.dj-bg-stage) header .dj-nav-pill svg {
    width: 14px !important;
    height: 14px !important;
  }
}

/* v26 nav layout tighten - group capsules like reference */
@media (min-width: 1024px) {
  html.dark body:has(.dj-bg-stage) nav.fixed.top-0 > .container {
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  html.dark body:has(.dj-bg-stage) nav.fixed.top-0 > .container > a[title="GoGo Shop"],
  html.dark body:has(.dj-bg-stage) nav.fixed.top-0 > .container > a.theme-wordmark {
    margin-right: auto !important;
  }

  html.dark body:has(.dj-bg-stage) nav.fixed.top-0 > .container > .hidden.lg\:flex {
    flex: 0 0 auto !important;
    overflow: visible !important;
    gap: 8px !important;
  }

  html.dark body:has(.dj-bg-stage) nav.fixed.top-0 > .container > .flex.items-center.shrink-0 {
    margin-left: 8px !important;
    gap: 8px !important;
  }

  html.dark body:has(.dj-bg-stage) nav.fixed.top-0 .dj-nav-pill + .dj-nav-pill {
    margin-left: 0 !important;
  }
}

html.dark body:has(.dj-bg-stage) nav .dj-nav-pill,
html.dark body:has(.dj-bg-stage) nav .dj-nav-pill.router-link-active,
html.dark body:has(.dj-bg-stage) nav .dj-nav-pill.router-link-exact-active,
html.dark body:has(.dj-bg-stage) nav .dj-nav-pill.dj-nav-active,
html.dark body:has(.dj-bg-stage) nav .dj-nav-pill.\!text-primary {
  color: #ffffff !important;
}

html.dark body:has(.dj-bg-stage) nav .dj-nav-pill > *,
html.dark body:has(.dj-bg-stage) nav .dj-nav-pill.router-link-active > *,
html.dark body:has(.dj-bg-stage) nav .dj-nav-pill.router-link-exact-active > *,
html.dark body:has(.dj-bg-stage) nav .dj-nav-pill.dj-nav-active > * {
  color: inherit !important;
}

/* v27 nav harmony - remove hard divider and unify capsule buttons */
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 {
  overflow: visible !important;
  background-color: transparent !important;
  background:
    radial-gradient(circle at 50% -26%, rgba(0, 218, 255, .16), transparent 60%),
    linear-gradient(180deg,
      rgba(5, 18, 24, .72) 0%,
      rgba(5, 48, 56, .54) 48%,
      rgba(5, 18, 24, .22) 78%,
      rgba(5, 18, 24, 0) 100%) !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
}

html.dark body:has(.dj-bg-stage) nav.fixed.top-0::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -34px;
  height: 34px;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 18, 24, .18), rgba(5, 18, 24, 0)) !important;
}

html.dark body:has(.dj-bg-stage) nav.fixed.top-0::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, .30),
      rgba(0, 210, 255, .045) 42%,
      rgba(0, 210, 255, .035) 58%,
      rgba(0, 0, 0, .30)) !important;
  opacity: .72;
}

html.dark body:has(.dj-bg-stage) nav.fixed.top-0 > .container {
  position: relative !important;
  z-index: 1 !important;
}

html.dark body:has(.dj-bg-stage) nav .dj-nav-pill,
html.dark body:has(.dj-bg-stage) nav .dj-nav-pill.router-link-active,
html.dark body:has(.dj-bg-stage) nav .dj-nav-pill.router-link-exact-active,
html.dark body:has(.dj-bg-stage) nav .dj-nav-pill.dj-nav-active,
html.dark body:has(.dj-bg-stage) nav .dj-nav-pill.\!text-primary {
  height: 38px !important;
  padding: 0 17px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(126, 226, 255, .24) !important;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .16), transparent 34%),
    linear-gradient(180deg, rgba(28, 82, 92, .48), rgba(10, 35, 45, .44)) !important;
  color: rgba(240, 251, 255, .96) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .38) !important;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, .16),
    inset 0 1px 0 rgba(255, 255, 255, .13),
    inset 0 -1px 0 rgba(0, 210, 255, .06) !important;
  backdrop-filter: blur(14px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.12) !important;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease,
    color .22s ease !important;
}

html.dark body:has(.dj-bg-stage) nav .dj-nav-pill::before {
  background: linear-gradient(90deg, rgba(0, 226, 255, .045), rgba(115, 142, 255, .04), rgba(0, 255, 186, .035)) !important;
  opacity: .58 !important;
}

html.dark body:has(.dj-bg-stage) nav .dj-nav-pill.router-link-active,
html.dark body:has(.dj-bg-stage) nav .dj-nav-pill.router-link-exact-active,
html.dark body:has(.dj-bg-stage) nav .dj-nav-pill.dj-nav-active {
  border-color: rgba(116, 230, 255, .34) !important;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .18), transparent 34%),
    linear-gradient(180deg, rgba(35, 104, 116, .54), rgba(8, 45, 58, .48)) !important;
  box-shadow:
    0 0 14px rgba(0, 210, 255, .12),
    0 10px 24px rgba(0, 0, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .16) !important;
}

html.dark body:has(.dj-bg-stage) nav .dj-nav-pill:hover,
html.dark body:has(.dj-bg-stage) nav .dj-nav-pill:focus-visible {
  transform: translateY(-1px) !important;
  border-color: rgba(0, 226, 255, .42) !important;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .20), transparent 34%),
    linear-gradient(180deg, rgba(39, 112, 124, .58), rgba(9, 50, 62, .50)) !important;
  box-shadow:
    0 0 13px rgba(0, 214, 255, .18),
    0 12px 26px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

html.dark body:has(.dj-bg-stage) nav .dj-nav-pill svg {
  color: #a1f2ff !important;
  filter: drop-shadow(0 0 5px rgba(0, 220, 255, .22)) !important;
}

html.dark body:has(.dj-bg-stage) nav .dj-nav-pill.dj-nav-query::after {
  background: rgba(128, 242, 255, .82) !important;
  box-shadow: 0 0 9px rgba(0, 226, 255, .42) !important;
}

html.dark body:has(.dj-bg-stage) nav a[title="GoGo Shop"],
html.dark body:has(.dj-bg-stage) nav a.theme-wordmark {
  border-color: rgba(126, 226, 255, .26) !important;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .14), transparent 34%),
    linear-gradient(180deg, rgba(25, 75, 86, .44), rgba(9, 34, 44, .40)) !important;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, .16),
    inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}

/* v28 nav seam blend - remove the visible horizontal cut between header and stage */
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 {
  isolation: isolate !important;
  overflow: visible !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.dark body:has(.dj-bg-stage) nav.fixed.top-0::before,
html.dark body:has(.dj-bg-stage) nav.fixed.top-0::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  pointer-events: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.dark body:has(.dj-bg-stage) nav.fixed.top-0::before {
  top: 0 !important;
  bottom: -122px !important;
  z-index: 0 !important;
  background:
    radial-gradient(circle at 50% -24%, rgba(0, 224, 255, .17), transparent 58%),
    radial-gradient(circle at 66% 20%, rgba(0, 148, 172, .12), transparent 44%),
    linear-gradient(180deg,
      rgba(3, 18, 24, .68) 0%,
      rgba(3, 49, 57, .46) 42%,
      rgba(4, 34, 42, .22) 66%,
      rgba(4, 22, 29, .09) 82%,
      rgba(4, 22, 29, 0) 100%) !important;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 48%, rgba(0, 0, 0, .88) 68%, rgba(0, 0, 0, .34) 86%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, #000 0%, #000 48%, rgba(0, 0, 0, .88) 68%, rgba(0, 0, 0, .34) 86%, transparent 100%) !important;
}

html.dark body:has(.dj-bg-stage) nav.fixed.top-0::after {
  top: 0 !important;
  bottom: -118px !important;
  z-index: 0 !important;
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, .25),
      rgba(0, 210, 255, .052) 34%,
      rgba(0, 190, 210, .048) 62%,
      rgba(0, 0, 0, .25)),
    linear-gradient(180deg, rgba(255, 255, 255, .018), rgba(255, 255, 255, 0)) !important;
  backdrop-filter: blur(16px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 43%, rgba(0, 0, 0, .72) 65%, rgba(0, 0, 0, .22) 85%, transparent 100%) !important;
  mask-image: linear-gradient(180deg, #000 0%, #000 43%, rgba(0, 0, 0, .72) 65%, rgba(0, 0, 0, .22) 85%, transparent 100%) !important;
}

html.dark body:has(.dj-bg-stage) nav.fixed.top-0 > .container {
  position: relative !important;
  z-index: 2 !important;
}

html.dark body:has(.dj-bg-stage) nav.fixed.top-0,
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 *,
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 + * {
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}

html.dark body:has(.dj-bg-stage) main,
html.dark body:has(.dj-bg-stage) .home-page,
html.dark body:has(.dj-bg-stage) .min-h-screen {
  border-top: 0 !important;
  box-shadow: none !important;
}

html.dark body:has(.dj-bg-stage) nav .dj-nav-pill,
html.dark body:has(.dj-bg-stage) nav .dj-nav-pill.router-link-active,
html.dark body:has(.dj-bg-stage) nav .dj-nav-pill.router-link-exact-active,
html.dark body:has(.dj-bg-stage) nav .dj-nav-pill.dj-nav-active,
html.dark body:has(.dj-bg-stage) nav .dj-nav-pill.\!text-primary {
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .15), transparent 34%),
    linear-gradient(180deg, rgba(25, 76, 88, .50), rgba(8, 34, 45, .46)) !important;
  border-color: rgba(124, 229, 255, .26) !important;
}

html.dark body:has(.dj-bg-stage) nav .dj-nav-pill:hover,
html.dark body:has(.dj-bg-stage) nav .dj-nav-pill:focus-visible {
  border-color: rgba(0, 226, 255, .44) !important;
  box-shadow:
    0 0 14px rgba(0, 214, 255, .18),
    0 12px 26px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

/* v29 product badge polish - hide guest badge and highlight delivery/stock states */
html.dark body:has(.dj-bg-stage) .dj-badge-guest-hidden {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
}

html.dark body:has(.dj-bg-stage) .dj-badge-auto,
html.dark body:has(.dj-bg-stage) .dj-badge-stock,
html.dark body:has(.dj-bg-stage) .dj-badge-warning {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-height: 20px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  line-height: 18px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
  text-shadow: none !important;
  backdrop-filter: blur(10px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.12) !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease !important;
}

html.dark body:has(.dj-bg-stage) .dj-badge-auto::before,
html.dark body:has(.dj-bg-stage) .dj-badge-stock::before,
html.dark body:has(.dj-bg-stage) .dj-badge-warning::before {
  content: "" !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 999px !important;
  flex: 0 0 auto !important;
  box-shadow: 0 0 8px currentColor !important;
}

html.dark body:has(.dj-bg-stage) .dj-badge-auto {
  color: #8eeeff !important;
  border-color: rgba(0, 214, 255, .42) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .16), transparent 42%),
    linear-gradient(180deg, rgba(0, 185, 230, .22), rgba(0, 74, 96, .24)) !important;
  box-shadow:
    0 0 10px rgba(0, 214, 255, .14),
    inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}

html.dark body:has(.dj-bg-stage) .dj-badge-auto::before {
  background: #8eeeff !important;
}

html.dark body:has(.dj-bg-stage) .dj-badge-stock {
  color: #72ffd0 !important;
  border-color: rgba(0, 255, 166, .48) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .15), transparent 42%),
    linear-gradient(180deg, rgba(0, 255, 166, .20), rgba(0, 92, 72, .24)) !important;
  box-shadow:
    0 0 12px rgba(0, 255, 166, .18),
    inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}

html.dark body:has(.dj-bg-stage) .dj-badge-stock::before {
  background: #72ffd0 !important;
}

html.dark body:has(.dj-bg-stage) .dj-badge-warning {
  color: #ffe26b !important;
  border-color: rgba(255, 211, 71, .54) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .13), transparent 42%),
    linear-gradient(180deg, rgba(255, 211, 71, .20), rgba(92, 66, 0, .25)) !important;
  box-shadow:
    0 0 12px rgba(255, 211, 71, .15),
    inset 0 1px 0 rgba(255, 255, 255, .13) !important;
}

html.dark body:has(.dj-bg-stage) .dj-badge-warning::before {
  background: #ffe26b !important;
}

html.dark body:has(.dj-bg-stage) .group:hover .dj-badge-auto,
html.dark body:has(.dj-bg-stage) .group:hover .dj-badge-stock,
html.dark body:has(.dj-bg-stage) .group:hover .dj-badge-warning {
  transform: translateY(-1px) !important;
}

/* v30 order/cart action buttons - capsule glow for product actions */
html.dark body:has(.dj-bg-stage) .dj-action-cart,
html.dark body:has(.dj-bg-stage) .dj-action-buy {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  min-height: 52px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(124, 229, 255, .24) !important;
  color: rgba(245, 253, 255, .98) !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .48) !important;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease,
    color .22s ease !important;
  backdrop-filter: blur(14px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.16) !important;
}

html.dark body:has(.dj-bg-stage) .dj-action-cart {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .13), transparent 42%),
    linear-gradient(180deg, rgba(25, 76, 88, .50), rgba(8, 34, 45, .48)) !important;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, .26),
    inset 0 1px 0 rgba(255, 255, 255, .12),
    inset 0 -1px 0 rgba(0, 214, 255, .08) !important;
}

html.dark body:has(.dj-bg-stage) .dj-action-buy {
  border-color: rgba(0, 226, 255, .42) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .18), transparent 42%),
    linear-gradient(135deg, rgba(0, 218, 255, .38), rgba(18, 112, 255, .58) 54%, rgba(0, 78, 122, .48)) !important;
  box-shadow:
    0 0 18px rgba(0, 214, 255, .18),
    0 16px 36px rgba(0, 78, 140, .26),
    inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

html.dark body:has(.dj-bg-stage) .dj-action-cart::before,
html.dark body:has(.dj-bg-stage) .dj-action-buy::before,
html.dark body:has(.dj-bg-stage) .dj-card-cart-button::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, .16) 42%, transparent 62%) !important;
  transform: translateX(-130%) skewX(-18deg) !important;
  transition: transform .45s ease !important;
}

html.dark body:has(.dj-bg-stage) .dj-action-cart:hover,
html.dark body:has(.dj-bg-stage) .dj-action-cart:focus-visible,
html.dark body:has(.dj-bg-stage) .dj-action-buy:hover,
html.dark body:has(.dj-bg-stage) .dj-action-buy:focus-visible {
  transform: translateY(-2px) !important;
  border-color: rgba(0, 226, 255, .58) !important;
  color: #ffffff !important;
}

html.dark body:has(.dj-bg-stage) .dj-action-cart:hover,
html.dark body:has(.dj-bg-stage) .dj-action-cart:focus-visible {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .18), transparent 42%),
    linear-gradient(180deg, rgba(32, 100, 114, .58), rgba(8, 45, 58, .54)) !important;
  box-shadow:
    0 0 16px rgba(0, 214, 255, .18),
    0 16px 34px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

html.dark body:has(.dj-bg-stage) .dj-action-buy:hover,
html.dark body:has(.dj-bg-stage) .dj-action-buy:focus-visible {
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .22), transparent 42%),
    linear-gradient(135deg, rgba(0, 235, 255, .48), rgba(24, 132, 255, .68) 54%, rgba(0, 94, 145, .55)) !important;
  box-shadow:
    0 0 22px rgba(0, 226, 255, .28),
    0 18px 40px rgba(0, 94, 170, .34),
    inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}

html.dark body:has(.dj-bg-stage) .dj-action-cart:hover::before,
html.dark body:has(.dj-bg-stage) .dj-action-cart:focus-visible::before,
html.dark body:has(.dj-bg-stage) .dj-action-buy:hover::before,
html.dark body:has(.dj-bg-stage) .dj-action-buy:focus-visible::before,
html.dark body:has(.dj-bg-stage) .dj-card-cart-button:hover::before,
html.dark body:has(.dj-bg-stage) .dj-card-cart-button:focus-visible::before {
  transform: translateX(130%) skewX(-18deg) !important;
}

html.dark body:has(.dj-bg-stage) .dj-card-cart-button {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 226, 255, .30) !important;
  color: #a8f5ff !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .18), transparent 42%),
    linear-gradient(180deg, rgba(0, 198, 230, .20), rgba(8, 34, 45, .60)) !important;
  box-shadow:
    0 0 12px rgba(0, 214, 255, .14),
    0 9px 22px rgba(0, 0, 0, .24),
    inset 0 1px 0 rgba(255, 255, 255, .15) !important;
  backdrop-filter: blur(12px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.12) !important;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease !important;
}

html.dark body:has(.dj-bg-stage) .dj-card-cart-button svg {
  width: 17px !important;
  height: 17px !important;
  color: #a8f5ff !important;
  filter: drop-shadow(0 0 6px rgba(0, 226, 255, .24)) !important;
}

html.dark body:has(.dj-bg-stage) .dj-card-cart-button:hover,
html.dark body:has(.dj-bg-stage) .dj-card-cart-button:focus-visible {
  transform: translateY(-2px) scale(1.03) !important;
  border-color: rgba(0, 226, 255, .58) !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .24), transparent 42%),
    linear-gradient(180deg, rgba(0, 226, 255, .30), rgba(9, 52, 66, .68)) !important;
  box-shadow:
    0 0 18px rgba(0, 226, 255, .24),
    0 14px 28px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255, 255, 255, .20) !important;
}

html.dark body:has(.dj-bg-stage) .dj-action-cart:disabled,
html.dark body:has(.dj-bg-stage) .dj-action-buy:disabled,
html.dark body:has(.dj-bg-stage) .dj-card-cart-button:disabled,
html.dark body:has(.dj-bg-stage) .dj-action-cart[aria-disabled="true"],
html.dark body:has(.dj-bg-stage) .dj-action-buy[aria-disabled="true"],
html.dark body:has(.dj-bg-stage) .dj-card-cart-button[aria-disabled="true"] {
  opacity: .54 !important;
  filter: saturate(.6) brightness(.78) !important;
  transform: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

@media (max-width: 640px) {
  html.dark body:has(.dj-bg-stage) .dj-action-cart,
  html.dark body:has(.dj-bg-stage) .dj-action-buy {
    min-height: 48px !important;
  }

  html.dark body:has(.dj-bg-stage) .dj-card-cart-button {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }
}

/* v31 action buttons hard override - style async product buttons by native classes too */
html.dark body:has(.dj-bg-stage) button.bg-secondary.text-secondary-foreground.h-12.font-bold,
html.dark body:has(.dj-bg-stage) button.dj-action-cart,
html.dark body:has(.dj-bg-stage) button.bg-primary.text-primary-foreground.h-12.font-bold,
html.dark body:has(.dj-bg-stage) button.dj-action-buy {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  min-height: 52px !important;
  height: 52px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(124, 229, 255, .26) !important;
  color: rgba(245, 253, 255, .98) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .48) !important;
  backdrop-filter: blur(14px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.16) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease, color .22s ease !important;
}

html.dark body:has(.dj-bg-stage) button.bg-secondary.text-secondary-foreground.h-12.font-bold,
html.dark body:has(.dj-bg-stage) button.dj-action-cart {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .14), transparent 42%),
    linear-gradient(180deg, rgba(25, 76, 88, .54), rgba(8, 34, 45, .50)) !important;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, .26),
    inset 0 1px 0 rgba(255, 255, 255, .13),
    inset 0 -1px 0 rgba(0, 214, 255, .08) !important;
}

html.dark body:has(.dj-bg-stage) button.bg-primary.text-primary-foreground.h-12.font-bold,
html.dark body:has(.dj-bg-stage) button.dj-action-buy {
  border-color: rgba(0, 226, 255, .46) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .20), transparent 42%),
    linear-gradient(135deg, rgba(0, 218, 255, .42), rgba(18, 112, 255, .62) 54%, rgba(0, 78, 122, .52)) !important;
  box-shadow:
    0 0 20px rgba(0, 214, 255, .20),
    0 16px 36px rgba(0, 78, 140, .30),
    inset 0 1px 0 rgba(255, 255, 255, .20) !important;
}

html.dark body:has(.dj-bg-stage) button.bg-secondary.text-secondary-foreground.h-12.font-bold::before,
html.dark body:has(.dj-bg-stage) button.dj-action-cart::before,
html.dark body:has(.dj-bg-stage) button.bg-primary.text-primary-foreground.h-12.font-bold::before,
html.dark body:has(.dj-bg-stage) button.dj-action-buy::before,
html.dark body:has(.dj-bg-stage) button.border.border-input.bg-background.flex-shrink-0::before,
html.dark body:has(.dj-bg-stage) button.dj-card-cart-button::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, .16) 42%, transparent 62%) !important;
  transform: translateX(-130%) skewX(-18deg) !important;
  transition: transform .45s ease !important;
}

html.dark body:has(.dj-bg-stage) button.bg-secondary.text-secondary-foreground.h-12.font-bold:hover,
html.dark body:has(.dj-bg-stage) button.dj-action-cart:hover,
html.dark body:has(.dj-bg-stage) button.bg-primary.text-primary-foreground.h-12.font-bold:hover,
html.dark body:has(.dj-bg-stage) button.dj-action-buy:hover,
html.dark body:has(.dj-bg-stage) button.bg-secondary.text-secondary-foreground.h-12.font-bold:focus-visible,
html.dark body:has(.dj-bg-stage) button.dj-action-cart:focus-visible,
html.dark body:has(.dj-bg-stage) button.bg-primary.text-primary-foreground.h-12.font-bold:focus-visible,
html.dark body:has(.dj-bg-stage) button.dj-action-buy:focus-visible {
  transform: translateY(-2px) !important;
  border-color: rgba(0, 226, 255, .62) !important;
  color: #ffffff !important;
}

html.dark body:has(.dj-bg-stage) button.bg-secondary.text-secondary-foreground.h-12.font-bold:hover,
html.dark body:has(.dj-bg-stage) button.dj-action-cart:hover {
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .19), transparent 42%),
    linear-gradient(180deg, rgba(32, 100, 114, .62), rgba(8, 45, 58, .58)) !important;
  box-shadow:
    0 0 17px rgba(0, 214, 255, .20),
    0 16px 34px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

html.dark body:has(.dj-bg-stage) button.bg-primary.text-primary-foreground.h-12.font-bold:hover,
html.dark body:has(.dj-bg-stage) button.dj-action-buy:hover {
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .24), transparent 42%),
    linear-gradient(135deg, rgba(0, 235, 255, .52), rgba(24, 132, 255, .72) 54%, rgba(0, 94, 145, .58)) !important;
  box-shadow:
    0 0 24px rgba(0, 226, 255, .30),
    0 18px 40px rgba(0, 94, 170, .36),
    inset 0 1px 0 rgba(255, 255, 255, .23) !important;
}

html.dark body:has(.dj-bg-stage) button.border.border-input.bg-background.flex-shrink-0,
html.dark body:has(.dj-bg-stage) button.dj-card-cart-button {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 226, 255, .34) !important;
  color: #a8f5ff !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .18), transparent 42%),
    linear-gradient(180deg, rgba(0, 198, 230, .23), rgba(8, 34, 45, .62)) !important;
  box-shadow:
    0 0 13px rgba(0, 214, 255, .16),
    0 9px 22px rgba(0, 0, 0, .24),
    inset 0 1px 0 rgba(255, 255, 255, .15) !important;
  backdrop-filter: blur(12px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.12) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease !important;
}

html.dark body:has(.dj-bg-stage) button.border.border-input.bg-background.flex-shrink-0 svg,
html.dark body:has(.dj-bg-stage) button.dj-card-cart-button svg {
  width: 17px !important;
  height: 17px !important;
  color: #a8f5ff !important;
  filter: drop-shadow(0 0 6px rgba(0, 226, 255, .24)) !important;
}

html.dark body:has(.dj-bg-stage) button.border.border-input.bg-background.flex-shrink-0:hover,
html.dark body:has(.dj-bg-stage) button.dj-card-cart-button:hover,
html.dark body:has(.dj-bg-stage) button.border.border-input.bg-background.flex-shrink-0:focus-visible,
html.dark body:has(.dj-bg-stage) button.dj-card-cart-button:focus-visible {
  transform: translateY(-2px) scale(1.03) !important;
  border-color: rgba(0, 226, 255, .60) !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .24), transparent 42%),
    linear-gradient(180deg, rgba(0, 226, 255, .32), rgba(9, 52, 66, .70)) !important;
  box-shadow:
    0 0 19px rgba(0, 226, 255, .26),
    0 14px 28px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255, 255, 255, .20) !important;
}

html.dark body:has(.dj-bg-stage) button.bg-secondary.text-secondary-foreground.h-12.font-bold:hover::before,
html.dark body:has(.dj-bg-stage) button.dj-action-cart:hover::before,
html.dark body:has(.dj-bg-stage) button.bg-primary.text-primary-foreground.h-12.font-bold:hover::before,
html.dark body:has(.dj-bg-stage) button.dj-action-buy:hover::before,
html.dark body:has(.dj-bg-stage) button.border.border-input.bg-background.flex-shrink-0:hover::before,
html.dark body:has(.dj-bg-stage) button.dj-card-cart-button:hover::before {
  transform: translateX(130%) skewX(-18deg) !important;
}

@media (max-width: 640px) {
  html.dark body:has(.dj-bg-stage) button.bg-secondary.text-secondary-foreground.h-12.font-bold,
  html.dark body:has(.dj-bg-stage) button.bg-primary.text-primary-foreground.h-12.font-bold {
    min-height: 48px !important;
    height: 48px !important;
  }

  html.dark body:has(.dj-bg-stage) button.border.border-input.bg-background.flex-shrink-0,
  html.dark body:has(.dj-bg-stage) button.dj-card-cart-button {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }
}

/* v32 action button glow lock - use filter/translate so glow survives component shadows */
html.dark body:has(.dj-bg-stage) button.bg-secondary.text-secondary-foreground.h-12.font-bold,
html.dark body:has(.dj-bg-stage) button.dj-action-cart,
html.dark body:has(.dj-bg-stage) button.bg-primary.text-primary-foreground.h-12.font-bold,
html.dark body:has(.dj-bg-stage) button.dj-action-buy,
html.dark body:has(.dj-bg-stage) button.border.border-input.bg-background.flex-shrink-0,
html.dark body:has(.dj-bg-stage) button.dj-card-cart-button {
  translate: 0 0 !important;
  scale: 1 !important;
  filter: drop-shadow(0 0 6px rgba(0, 214, 255, .08)) !important;
  will-change: translate, scale, filter, background, border-color !important;
}

html.dark body:has(.dj-bg-stage) button.bg-secondary.text-secondary-foreground.h-12.font-bold:hover,
html.dark body:has(.dj-bg-stage) button.dj-action-cart:hover,
html.dark body:has(.dj-bg-stage) button.bg-secondary.text-secondary-foreground.h-12.font-bold:focus-visible,
html.dark body:has(.dj-bg-stage) button.dj-action-cart:focus-visible {
  translate: 0 -2px !important;
  filter:
    drop-shadow(0 0 12px rgba(0, 214, 255, .22))
    drop-shadow(0 12px 18px rgba(0, 0, 0, .24)) !important;
}

html.dark body:has(.dj-bg-stage) button.bg-primary.text-primary-foreground.h-12.font-bold:hover,
html.dark body:has(.dj-bg-stage) button.dj-action-buy:hover,
html.dark body:has(.dj-bg-stage) button.bg-primary.text-primary-foreground.h-12.font-bold:focus-visible,
html.dark body:has(.dj-bg-stage) button.dj-action-buy:focus-visible {
  translate: 0 -2px !important;
  filter:
    drop-shadow(0 0 16px rgba(0, 226, 255, .30))
    drop-shadow(0 14px 22px rgba(0, 94, 170, .26)) !important;
}

html.dark body:has(.dj-bg-stage) button.border.border-input.bg-background.flex-shrink-0:hover,
html.dark body:has(.dj-bg-stage) button.dj-card-cart-button:hover,
html.dark body:has(.dj-bg-stage) button.border.border-input.bg-background.flex-shrink-0:focus-visible,
html.dark body:has(.dj-bg-stage) button.dj-card-cart-button:focus-visible {
  translate: 0 -2px !important;
  scale: 1.04 !important;
  border-color: rgba(0, 226, 255, .64) !important;
  filter:
    drop-shadow(0 0 13px rgba(0, 226, 255, .32))
    drop-shadow(0 10px 16px rgba(0, 0, 0, .24)) !important;
}

/* v33 floating support contact - cyber capsule */
.dj-support-float {
  position: fixed !important;
  left: max(24px, env(safe-area-inset-left)) !important;
  bottom: calc(28px + env(safe-area-inset-bottom)) !important;
  z-index: 70 !important;
  width: 260px !important;
  min-height: 64px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 13px !important;
  padding: 12px 20px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(155, 246, 255, .36) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .28), transparent 42%),
    linear-gradient(135deg, rgba(0, 196, 255, .92), rgba(12, 220, 225, .88) 58%, rgba(0, 156, 205, .88)) !important;
  box-shadow:
    0 0 28px rgba(0, 220, 255, .34),
    0 16px 38px rgba(0, 126, 170, .34),
    inset 0 1px 0 rgba(255, 255, 255, .25) !important;
  backdrop-filter: blur(14px) saturate(1.14) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.14) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  translate: 0 0 !important;
  scale: 1 !important;
  filter: drop-shadow(0 0 10px rgba(0, 214, 255, .18)) !important;
  transition:
    translate .22s ease,
    scale .22s ease,
    filter .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease !important;
}

.dj-support-float::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, .28) 42%, transparent 62%) !important;
  transform: translateX(-130%) skewX(-18deg) !important;
  transition: transform .5s ease !important;
}

.dj-support-float:hover,
.dj-support-float:focus-visible {
  translate: 0 -3px !important;
  scale: 1.02 !important;
  border-color: rgba(210, 255, 255, .62) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .34), transparent 42%),
    linear-gradient(135deg, rgba(0, 213, 255, .98), rgba(25, 235, 232, .95) 58%, rgba(0, 176, 225, .94)) !important;
  box-shadow:
    0 0 36px rgba(0, 226, 255, .46),
    0 20px 44px rgba(0, 126, 170, .42),
    inset 0 1px 0 rgba(255, 255, 255, .30) !important;
  filter:
    drop-shadow(0 0 18px rgba(0, 226, 255, .34))
    drop-shadow(0 12px 20px rgba(0, 126, 170, .25)) !important;
}

.dj-support-float:hover::before,
.dj-support-float:focus-visible::before {
  transform: translateX(130%) skewX(-18deg) !important;
}

.dj-support-icon {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 auto !important;
  color: #ffffff !important;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, .32)) !important;
}

.dj-support-copy {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.dj-support-title {
  font-size: 16px !important;
  line-height: 18px !important;
  font-weight: 900 !important;
  letter-spacing: .02em !important;
  color: #ffffff !important;
  text-shadow: 0 1px 10px rgba(0, 63, 90, .42) !important;
}

.dj-support-subtitle {
  font-size: 11px !important;
  line-height: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  color: rgba(240, 254, 255, .90) !important;
}

@media (max-width: 768px) {
  .dj-support-float {
    left: 14px !important;
    bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    min-width: 178px !important;
    max-width: calc(100vw - 28px) !important;
    min-height: 54px !important;
    padding: 10px 14px !important;
    border-radius: 15px !important;
    gap: 10px !important;
  }

  .dj-support-icon {
    width: 24px !important;
    height: 24px !important;
  }

  .dj-support-title {
    font-size: 14px !important;
    line-height: 16px !important;
  }

  .dj-support-subtitle {
    font-size: 9px !important;
    line-height: 11px !important;
    letter-spacing: .12em !important;
  }
}

@media (max-width: 390px) {
  .dj-support-float {
    min-width: 154px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .dj-support-subtitle {
    display: none !important;
  }
}

/* v34 light mode - soft daylight tech theme and top-right toggle */
.dj-theme-toggle {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-width: 42px !important;
  height: 40px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(126, 226, 255, .26) !important;
  color: rgba(240, 251, 255, .96) !important;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .16), transparent 34%),
    linear-gradient(180deg, rgba(28, 82, 92, .48), rgba(10, 35, 45, .44)) !important;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, .16),
    inset 0 1px 0 rgba(255, 255, 255, .13),
    inset 0 -1px 0 rgba(0, 210, 255, .06) !important;
  backdrop-filter: blur(14px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.12) !important;
  transition: translate .22s ease, scale .22s ease, filter .22s ease, border-color .22s ease, background .22s ease !important;
}

.dj-theme-toggle svg {
  width: 17px !important;
  height: 17px !important;
  color: currentColor !important;
  filter: drop-shadow(0 0 5px rgba(0, 220, 255, .22)) !important;
}

.dj-theme-toggle-label {
  font-size: 13px !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.dj-theme-toggle::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.16) 42%, transparent 62%) !important;
  transform: translateX(-130%) skewX(-18deg) !important;
  transition: transform .45s ease !important;
}

.dj-theme-toggle:hover,
.dj-theme-toggle:focus-visible {
  translate: 0 -1px !important;
  border-color: rgba(0, 226, 255, .46) !important;
  filter: drop-shadow(0 0 12px rgba(0, 214, 255, .18)) !important;
}

.dj-theme-toggle:hover::before,
.dj-theme-toggle:focus-visible::before {
  transform: translateX(130%) skewX(-18deg) !important;
}

.dj-theme-toggle .dj-theme-moon {
  display: none !important;
}

html.dj-light-mode .dj-theme-toggle .dj-theme-sun {
  display: none !important;
}

html.dj-light-mode .dj-theme-toggle .dj-theme-moon {
  display: block !important;
}

html.dj-light-mode,
html.dj-light-mode body {
  color-scheme: light !important;
  background:
    radial-gradient(circle at 50% -10%, rgba(111, 184, 255, .26), transparent 38%),
    radial-gradient(circle at 86% 16%, rgba(84, 226, 255, .16), transparent 32%),
    linear-gradient(180deg, #f7f9ff 0%, #f2f5fb 46%, #eef3f8 100%) !important;
  color: #101828 !important;
}

html.dj-light-mode body::before,
html.dj-light-mode .dj-bg-stage::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, .94), rgba(241, 245, 249, .975)),
    radial-gradient(circle at 30% 18%, rgba(37, 99, 235, .08), transparent 40%),
    radial-gradient(circle at 72% 36%, rgba(14, 165, 233, .08), transparent 38%) !important;
}

html.dj-light-mode .dj-bg-stage {
  background:
    radial-gradient(circle at 50% 0%, rgba(71, 157, 255, .16), transparent 44%),
    linear-gradient(180deg, #f7f9ff, #eef3f8) !important;
}

html.dj-light-mode .dj-bg-stage video,
html.dj-light-mode video {
  opacity: .10 !important;
  filter: brightness(1.45) contrast(.72) saturate(.45) blur(.35px) !important;
}

html.dj-light-mode .dj-bg-vignette,
html.dj-light-mode .dj-bg-glass {
  background:
    linear-gradient(180deg, rgba(255,255,255,.74), rgba(241,245,249,.82)) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

html.dj-light-mode nav.fixed.top-0 {
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(248,250,252,.72) 70%, rgba(248,250,252,0)) !important;
  border-bottom: 1px solid rgba(15, 23, 42, .06) !important;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .06) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

html.dj-light-mode nav.fixed.top-0::before,
html.dj-light-mode nav.fixed.top-0::after {
  opacity: 0 !important;
}

html.dj-light-mode nav a[title="GoGo Shop"],
html.dj-light-mode nav a.theme-wordmark {
  color: #0f172a !important;
  background: rgba(255, 255, 255, .82) !important;
  border-color: rgba(79, 70, 229, .22) !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .06), inset 0 1px 0 rgba(255,255,255,.8) !important;
}

html.dj-light-mode nav .dj-nav-pill,
html.dj-light-mode nav .dj-nav-pill.router-link-active,
html.dj-light-mode nav .dj-nav-pill.router-link-exact-active,
html.dj-light-mode nav .dj-nav-pill.dj-nav-active,
html.dj-light-mode .dj-theme-toggle {
  color: #26324a !important;
  text-shadow: none !important;
  border-color: rgba(99, 102, 241, .18) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.9), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(237,242,255,.76)) !important;
  box-shadow:
    0 8px 18px rgba(79, 70, 229, .08),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

html.dj-light-mode nav .dj-nav-pill:hover,
html.dj-light-mode .dj-theme-toggle:hover,
html.dj-light-mode nav .dj-nav-pill:focus-visible,
html.dj-light-mode .dj-theme-toggle:focus-visible {
  color: #1d4ed8 !important;
  border-color: rgba(37, 99, 235, .28) !important;
  filter: drop-shadow(0 8px 16px rgba(37,99,235,.12)) !important;
}

html.dj-light-mode nav .dj-nav-pill svg,
html.dj-light-mode .dj-theme-toggle svg {
  color: #2563eb !important;
  filter: none !important;
}

html.dj-light-mode .home-page,
html.dj-light-mode main,
html.dj-light-mode .min-h-screen,
html.dj-light-mode .bg-background {
  background: transparent !important;
  color: #101828 !important;
}

html.dj-light-mode .container {
  color: #101828 !important;
}

html.dj-light-mode aside,
html.dj-light-mode aside > div,
html.dj-light-mode .relative.overflow-hidden.rounded-2xl.border.bg-card,
html.dj-light-mode .border.bg-card.text-card-foreground,
html.dj-light-mode .group.relative.overflow-hidden.flex.flex-row.items-center.rounded-xl,
html.dj-light-mode .bg-card {
  background: rgba(255, 255, 255, .82) !important;
  border: 1px solid rgba(148, 163, 184, .24) !important;
  color: #101828 !important;
  box-shadow:
    0 10px 30px rgba(15, 23, 42, .055),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
  backdrop-filter: blur(16px) saturate(1.03) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.03) !important;
}

html.dj-light-mode .border.bg-card.text-card-foreground:hover,
html.dj-light-mode .group.relative.overflow-hidden.flex.flex-row.items-center.rounded-xl:hover {
  background: rgba(255,255,255,.94) !important;
  border-color: rgba(37, 99, 235, .22) !important;
  box-shadow:
    0 14px 34px rgba(37, 99, 235, .10),
    0 4px 14px rgba(15, 23, 42, .045) !important;
}

html.dj-light-mode .text-foreground,
html.dj-light-mode .font-bold,
html.dj-light-mode .font-semibold,
html.dj-light-mode h1,
html.dj-light-mode h2,
html.dj-light-mode h3 {
  color: #0f172a !important;
  text-shadow: none !important;
}

html.dj-light-mode .text-muted-foreground,
html.dj-light-mode [class*="text-muted"] {
  color: #64748b !important;
  text-shadow: none !important;
}

html.dj-light-mode span.whitespace-nowrap[class*="font-bold"],
html.dj-light-mode [class*="whitespace-nowrap"][class*="font-bold"] {
  color: #1d4ed8 !important;
  text-shadow: none !important;
}

html.dj-light-mode aside .bg-primary,
html.dj-light-mode button.bg-primary {
  background: linear-gradient(135deg, #4f46e5, #2563eb) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .22) !important;
}

html.dj-light-mode input,
html.dj-light-mode .bg-input,
html.dj-light-mode [role="searchbox"] {
  background: rgba(255,255,255,.86) !important;
  border-color: rgba(148, 163, 184, .28) !important;
  color: #0f172a !important;
}

html.dj-light-mode .dj-badge-auto {
  color: #0369a1 !important;
  border-color: rgba(14, 165, 233, .32) !important;
  background: linear-gradient(180deg, rgba(224, 242, 254, .95), rgba(186, 230, 253, .72)) !important;
  box-shadow: 0 4px 12px rgba(14,165,233,.12) !important;
}

html.dj-light-mode .dj-badge-stock {
  color: #047857 !important;
  border-color: rgba(16, 185, 129, .32) !important;
  background: linear-gradient(180deg, rgba(209, 250, 229, .96), rgba(167, 243, 208, .72)) !important;
  box-shadow: 0 4px 12px rgba(16,185,129,.12) !important;
}

html.dj-light-mode .dj-badge-warning {
  color: #a16207 !important;
  border-color: rgba(245, 158, 11, .34) !important;
  background: linear-gradient(180deg, rgba(254, 243, 199, .98), rgba(253, 230, 138, .72)) !important;
  box-shadow: 0 4px 12px rgba(245,158,11,.12) !important;
}

html.dj-light-mode button.bg-secondary.text-secondary-foreground.h-12.font-bold,
html.dj-light-mode button.dj-action-cart,
html.dj-light-mode button.bg-primary.text-primary-foreground.h-12.font-bold,
html.dj-light-mode button.dj-action-buy,
html.dj-light-mode button.border.border-input.bg-background.flex-shrink-0,
html.dj-light-mode button.dj-card-cart-button {
  color: #ffffff !important;
  border-color: rgba(79, 70, 229, .26) !important;
  background: linear-gradient(135deg, #6366f1, #2563eb) !important;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .18) !important;
  filter: none !important;
}

html.dj-light-mode button.border.border-input.bg-background.flex-shrink-0,
html.dj-light-mode button.dj-card-cart-button {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  border-radius: 999px !important;
}

html.dj-light-mode .dj-support-float {
  border-color: rgba(99, 102, 241, .22) !important;
  background: linear-gradient(135deg, #6366f1, #22c8df) !important;
  box-shadow: 0 16px 36px rgba(37, 99, 235, .18), 0 0 24px rgba(34, 200, 223, .16) !important;
}

@media (max-width: 768px) {
  .dj-theme-toggle {
    height: 36px !important;
    min-width: 38px !important;
    padding: 0 10px !important;
  }

  .dj-theme-toggle-label {
    display: none !important;
  }
}

/* v35 light toggle placement fix - fixed top-right independent of nav hidden groups */
.dj-theme-toggle {
  position: fixed !important;
  top: calc(20px + env(safe-area-inset-top)) !important;
  right: max(18px, env(safe-area-inset-right)) !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 95 !important;
  display: inline-flex !important;
  width: auto !important;
  min-width: 42px !important;
  height: 40px !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html.dj-light-mode .dj-theme-toggle {
  color: #1d4ed8 !important;
  border-color: rgba(37, 99, 235, .22) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.96), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(237,242,255,.86)) !important;
  box-shadow:
    0 10px 24px rgba(37, 99, 235, .13),
    inset 0 1px 0 rgba(255,255,255,.94) !important;
}

@media (max-width: 768px) {
  .dj-theme-toggle {
    top: calc(14px + env(safe-area-inset-top)) !important;
    right: 12px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 10px !important;
  }
}

/* v36 light mode priority override - beat previous dark cyber selectors */
html.dark.dj-light-mode body:has(.dj-bg-stage),
html.dark.dj-light-mode body:has(.dj-bg-stage) .home-page,
html.dark.dj-light-mode body:has(.dj-bg-stage) main,
html.dark.dj-light-mode body:has(.dj-bg-stage) .min-h-screen,
html.dark.dj-light-mode body:has(.dj-bg-stage) .bg-background {
  background:
    radial-gradient(circle at 50% -10%, rgba(111, 184, 255, .22), transparent 38%),
    radial-gradient(circle at 86% 18%, rgba(84, 226, 255, .13), transparent 32%),
    linear-gradient(180deg, #f7f9ff 0%, #f2f5fb 46%, #eef3f8 100%) !important;
  color: #101828 !important;
}

html.dark.dj-light-mode body:has(.dj-bg-stage) .dj-bg-stage {
  background:
    linear-gradient(180deg, rgba(248, 250, 252, .96), rgba(241, 245, 249, .985)),
    radial-gradient(circle at 34% 14%, rgba(37, 99, 235, .10), transparent 40%),
    radial-gradient(circle at 72% 34%, rgba(14, 165, 233, .09), transparent 38%) !important;
}

html.dark.dj-light-mode body:has(.dj-bg-stage) .dj-bg-stage video,
html.dark.dj-light-mode body:has(.dj-bg-stage) video {
  opacity: .08 !important;
  filter: brightness(1.5) contrast(.68) saturate(.42) blur(.35px) !important;
}

html.dark.dj-light-mode body:has(.dj-bg-stage) .dj-bg-vignette,
html.dark.dj-light-mode body:has(.dj-bg-stage) .dj-bg-glass {
  background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(241,245,249,.88)) !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.dark.dj-light-mode body:has(.dj-bg-stage) nav.fixed.top-0 {
  background:
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(248,250,252,.78) 72%, rgba(248,250,252,0)) !important;
  border-bottom: 1px solid rgba(15, 23, 42, .06) !important;
  box-shadow: 0 12px 34px rgba(15, 23, 42, .06) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
}

html.dark.dj-light-mode body:has(.dj-bg-stage) nav.fixed.top-0::before,
html.dark.dj-light-mode body:has(.dj-bg-stage) nav.fixed.top-0::after {
  opacity: 0 !important;
}

html.dark.dj-light-mode body:has(.dj-bg-stage) nav a[title="GoGo Shop"],
html.dark.dj-light-mode body:has(.dj-bg-stage) nav a.theme-wordmark,
html.dark.dj-light-mode body:has(.dj-bg-stage) nav .dj-nav-pill,
html.dark.dj-light-mode body:has(.dj-bg-stage) nav .dj-nav-pill.router-link-active,
html.dark.dj-light-mode body:has(.dj-bg-stage) nav .dj-nav-pill.router-link-exact-active,
html.dark.dj-light-mode body:has(.dj-bg-stage) nav .dj-nav-pill.dj-nav-active {
  color: #26324a !important;
  text-shadow: none !important;
  border-color: rgba(99, 102, 241, .18) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.92), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(237,242,255,.78)) !important;
  box-shadow:
    0 8px 18px rgba(79, 70, 229, .08),
    inset 0 1px 0 rgba(255,255,255,.9) !important;
}

html.dark.dj-light-mode body:has(.dj-bg-stage) aside,
html.dark.dj-light-mode body:has(.dj-bg-stage) aside > div,
html.dark.dj-light-mode body:has(.dj-bg-stage) .relative.overflow-hidden.rounded-2xl.border.bg-card,
html.dark.dj-light-mode body:has(.dj-bg-stage) .border.bg-card.text-card-foreground,
html.dark.dj-light-mode body:has(.dj-bg-stage) .group.relative.overflow-hidden.flex.flex-row.items-center.rounded-xl,
html.dark.dj-light-mode body:has(.dj-bg-stage) .bg-card {
  background: rgba(255, 255, 255, .86) !important;
  background-image: none !important;
  border: 1px solid rgba(148, 163, 184, .24) !important;
  color: #101828 !important;
  box-shadow:
    0 10px 30px rgba(15, 23, 42, .055),
    inset 0 1px 0 rgba(255,255,255,.72) !important;
  backdrop-filter: blur(16px) saturate(1.03) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.03) !important;
}

html.dark.dj-light-mode body:has(.dj-bg-stage) .border.bg-card.text-card-foreground:hover,
html.dark.dj-light-mode body:has(.dj-bg-stage) .group.relative.overflow-hidden.flex.flex-row.items-center.rounded-xl:hover {
  background: rgba(255,255,255,.96) !important;
  border-color: rgba(37, 99, 235, .22) !important;
  box-shadow:
    0 14px 34px rgba(37, 99, 235, .10),
    0 4px 14px rgba(15, 23, 42, .045) !important;
}

html.dark.dj-light-mode body:has(.dj-bg-stage) .text-foreground,
html.dark.dj-light-mode body:has(.dj-bg-stage) .font-bold,
html.dark.dj-light-mode body:has(.dj-bg-stage) .font-semibold,
html.dark.dj-light-mode body:has(.dj-bg-stage) h1,
html.dark.dj-light-mode body:has(.dj-bg-stage) h2,
html.dark.dj-light-mode body:has(.dj-bg-stage) h3 {
  color: #0f172a !important;
  text-shadow: none !important;
}

html.dark.dj-light-mode body:has(.dj-bg-stage) .text-muted-foreground,
html.dark.dj-light-mode body:has(.dj-bg-stage) [class*="text-muted"] {
  color: #64748b !important;
  text-shadow: none !important;
}

html.dark.dj-light-mode body:has(.dj-bg-stage) span.whitespace-nowrap[class*="font-bold"],
html.dark.dj-light-mode body:has(.dj-bg-stage) [class*="whitespace-nowrap"][class*="font-bold"] {
  color: #1d4ed8 !important;
  text-shadow: none !important;
}

html.dark.dj-light-mode body:has(.dj-bg-stage) .dj-badge-auto {
  color: #0369a1 !important;
  border-color: rgba(14, 165, 233, .32) !important;
  background: linear-gradient(180deg, rgba(224, 242, 254, .96), rgba(186, 230, 253, .72)) !important;
  box-shadow: 0 4px 12px rgba(14,165,233,.12) !important;
}

html.dark.dj-light-mode body:has(.dj-bg-stage) .dj-badge-stock {
  color: #047857 !important;
  border-color: rgba(16, 185, 129, .32) !important;
  background: linear-gradient(180deg, rgba(209, 250, 229, .96), rgba(167, 243, 208, .72)) !important;
  box-shadow: 0 4px 12px rgba(16,185,129,.12) !important;
}

html.dark.dj-light-mode body:has(.dj-bg-stage) .dj-badge-warning {
  color: #a16207 !important;
  border-color: rgba(245, 158, 11, .34) !important;
  background: linear-gradient(180deg, rgba(254, 243, 199, .98), rgba(253, 230, 138, .72)) !important;
  box-shadow: 0 4px 12px rgba(245,158,11,.12) !important;
}

html.dark.dj-light-mode body:has(.dj-bg-stage) button.bg-secondary.text-secondary-foreground.h-12.font-bold,
html.dark.dj-light-mode body:has(.dj-bg-stage) button.dj-action-cart,
html.dark.dj-light-mode body:has(.dj-bg-stage) button.bg-primary.text-primary-foreground.h-12.font-bold,
html.dark.dj-light-mode body:has(.dj-bg-stage) button.dj-action-buy,
html.dark.dj-light-mode body:has(.dj-bg-stage) button.border.border-input.bg-background.flex-shrink-0,
html.dark.dj-light-mode body:has(.dj-bg-stage) button.dj-card-cart-button {
  color: #ffffff !important;
  border-color: rgba(79, 70, 229, .28) !important;
  background: linear-gradient(135deg, #6366f1, #2563eb) !important;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .18) !important;
  filter: none !important;
}

/* v37 submit order/pay button - final checkout capsule */
html.dark body:has(.dj-bg-stage) .dj-submit-pay-button,
html.dark body:has(.dj-bg-stage) button.dj-submit-pay-button,
html.dark body:has(.dj-bg-stage) a.dj-submit-pay-button {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  width: 100% !important;
  min-height: 54px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 226, 255, .48) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  letter-spacing: .025em !important;
  text-shadow: 0 1px 12px rgba(0, 42, 70, .46) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .22), transparent 42%),
    linear-gradient(135deg, rgba(0, 226, 255, .48), rgba(18, 112, 255, .70) 56%, rgba(0, 78, 122, .58)) !important;
  box-shadow:
    0 0 22px rgba(0, 226, 255, .26),
    0 18px 42px rgba(0, 78, 140, .32),
    inset 0 1px 0 rgba(255, 255, 255, .22) !important;
  filter: drop-shadow(0 0 12px rgba(0, 226, 255, .18)) !important;
  backdrop-filter: blur(14px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.16) !important;
  translate: 0 0 !important;
  scale: 1 !important;
  transition:
    translate .22s ease,
    scale .22s ease,
    filter .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease,
    color .22s ease !important;
}

html.dark body:has(.dj-bg-stage) .dj-submit-pay-button::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, .20) 42%, transparent 62%) !important;
  transform: translateX(-130%) skewX(-18deg) !important;
  transition: transform .48s ease !important;
}

html.dark body:has(.dj-bg-stage) .dj-submit-pay-button:hover,
html.dark body:has(.dj-bg-stage) .dj-submit-pay-button:focus-visible {
  translate: 0 -2px !important;
  scale: 1.01 !important;
  border-color: rgba(0, 242, 255, .68) !important;
  color: #ffffff !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .28), transparent 42%),
    linear-gradient(135deg, rgba(0, 242, 255, .58), rgba(28, 132, 255, .78) 56%, rgba(0, 98, 150, .66)) !important;
  box-shadow:
    0 0 30px rgba(0, 242, 255, .34),
    0 20px 48px rgba(0, 98, 170, .38),
    inset 0 1px 0 rgba(255, 255, 255, .28) !important;
  filter:
    drop-shadow(0 0 18px rgba(0, 242, 255, .32))
    drop-shadow(0 14px 22px rgba(0, 94, 170, .26)) !important;
}

html.dark body:has(.dj-bg-stage) .dj-submit-pay-button:hover::before,
html.dark body:has(.dj-bg-stage) .dj-submit-pay-button:focus-visible::before {
  transform: translateX(130%) skewX(-18deg) !important;
}

html.dark body:has(.dj-bg-stage) .dj-submit-pay-button:disabled,
html.dark body:has(.dj-bg-stage) .dj-submit-pay-button[aria-disabled="true"] {
  opacity: .58 !important;
  filter: saturate(.65) brightness(.84) !important;
  translate: 0 0 !important;
  scale: 1 !important;
  cursor: not-allowed !important;
}

html.dark.dj-light-mode body:has(.dj-bg-stage) .dj-submit-pay-button,
html.dark.dj-light-mode body:has(.dj-bg-stage) button.dj-submit-pay-button,
html.dark.dj-light-mode body:has(.dj-bg-stage) a.dj-submit-pay-button {
  color: #ffffff !important;
  border-color: rgba(79, 70, 229, .34) !important;
  text-shadow: 0 1px 10px rgba(30, 64, 175, .30) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.26), transparent 42%),
    linear-gradient(135deg, #6366f1, #2563eb 58%, #0ea5e9) !important;
  box-shadow:
    0 14px 32px rgba(37, 99, 235, .22),
    0 0 22px rgba(14, 165, 233, .18),
    inset 0 1px 0 rgba(255,255,255,.28) !important;
  filter: drop-shadow(0 0 10px rgba(37, 99, 235, .14)) !important;
}

html.dark.dj-light-mode body:has(.dj-bg-stage) .dj-submit-pay-button:hover,
html.dark.dj-light-mode body:has(.dj-bg-stage) .dj-submit-pay-button:focus-visible {
  border-color: rgba(37, 99, 235, .48) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.34), transparent 42%),
    linear-gradient(135deg, #7c7cff, #2f70ff 58%, #19b8e6) !important;
  box-shadow:
    0 18px 38px rgba(37, 99, 235, .28),
    0 0 28px rgba(14, 165, 233, .22),
    inset 0 1px 0 rgba(255,255,255,.34) !important;
  filter:
    drop-shadow(0 0 16px rgba(37, 99, 235, .24))
    drop-shadow(0 12px 20px rgba(14, 165, 233, .16)) !important;
}

@media (max-width: 640px) {
  html.dark body:has(.dj-bg-stage) .dj-submit-pay-button {
    min-height: 50px !important;
    font-size: 14px !important;
  }
}

/* v38 submit order/pay disabled readability - keep behavior, improve visibility */
html.dark body:has(.dj-bg-stage) .dj-submit-pay-button:disabled,
html.dark body:has(.dj-bg-stage) .dj-submit-pay-button[aria-disabled="true"],
html.dark body:has(.dj-bg-stage) button.dj-submit-pay-button:disabled,
html.dark body:has(.dj-bg-stage) button.dj-submit-pay-button[aria-disabled="true"] {
  opacity: .88 !important;
  color: rgba(255, 255, 255, .93) !important;
  border-color: rgba(0, 226, 255, .36) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .18), transparent 42%),
    linear-gradient(135deg, rgba(0, 205, 235, .36), rgba(18, 100, 220, .54) 56%, rgba(0, 72, 115, .48)) !important;
  box-shadow:
    0 0 18px rgba(0, 226, 255, .18),
    0 14px 34px rgba(0, 78, 140, .24),
    inset 0 1px 0 rgba(255, 255, 255, .16) !important;
  filter: drop-shadow(0 0 10px rgba(0, 226, 255, .16)) saturate(.92) brightness(.96) !important;
  translate: 0 0 !important;
  scale: 1 !important;
  cursor: not-allowed !important;
}

html.dark body:has(.dj-bg-stage) .dj-submit-pay-button:disabled::before,
html.dark body:has(.dj-bg-stage) .dj-submit-pay-button[aria-disabled="true"]::before,
html.dark body:has(.dj-bg-stage) button.dj-submit-pay-button:disabled::before,
html.dark body:has(.dj-bg-stage) button.dj-submit-pay-button[aria-disabled="true"]::before {
  opacity: .42 !important;
  transform: translateX(-130%) skewX(-18deg) !important;
}

html.dark.dj-light-mode body:has(.dj-bg-stage) .dj-submit-pay-button:disabled,
html.dark.dj-light-mode body:has(.dj-bg-stage) .dj-submit-pay-button[aria-disabled="true"],
html.dark.dj-light-mode body:has(.dj-bg-stage) button.dj-submit-pay-button:disabled,
html.dark.dj-light-mode body:has(.dj-bg-stage) button.dj-submit-pay-button[aria-disabled="true"] {
  opacity: .9 !important;
  color: #ffffff !important;
  border-color: rgba(79, 70, 229, .30) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.24), transparent 42%),
    linear-gradient(135deg, rgba(99, 102, 241, .78), rgba(37, 99, 235, .82) 58%, rgba(14, 165, 233, .76)) !important;
  box-shadow:
    0 12px 28px rgba(37, 99, 235, .18),
    0 0 18px rgba(14, 165, 233, .16),
    inset 0 1px 0 rgba(255,255,255,.24) !important;
  filter: drop-shadow(0 0 10px rgba(37, 99, 235, .14)) saturate(.94) brightness(.98) !important;
}

/* v40 submit order/pay final priority - stable capsule glow in all modes */
html body:has(.dj-bg-stage) button.dj-submit-pay-button,
html body:has(.dj-bg-stage) a.dj-submit-pay-button,
html body button.dj-submit-pay-button,
html body a.dj-submit-pay-button {
  min-height: 54px !important;
  height: 54px !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1px solid rgba(0, 226, 255, .46) !important;
  --tw-shadow: 0 0 22px rgba(0, 226, 255, .24), 0 18px 42px rgba(0, 78, 140, .30), inset 0 1px 0 rgba(255,255,255,.22) !important;
  --tw-shadow-colored: var(--tw-shadow) !important;
  box-shadow: var(--tw-shadow) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .22), transparent 42%),
    linear-gradient(135deg, rgba(0, 226, 255, .48), rgba(18, 112, 255, .70) 56%, rgba(0, 78, 122, .58)) !important;
  filter: drop-shadow(0 0 12px rgba(0, 226, 255, .18)) !important;
}

html body:has(.dj-bg-stage) button.dj-submit-pay-button:hover,
html body:has(.dj-bg-stage) a.dj-submit-pay-button:hover,
html body button.dj-submit-pay-button:hover,
html body a.dj-submit-pay-button:hover {
  translate: 0 -2px !important;
  scale: 1.01 !important;
  border-color: rgba(0, 242, 255, .68) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  --tw-shadow: 0 0 30px rgba(0, 242, 255, .34), 0 20px 48px rgba(0, 98, 170, .38), inset 0 1px 0 rgba(255,255,255,.28) !important;
  --tw-shadow-colored: var(--tw-shadow) !important;
  box-shadow: var(--tw-shadow) !important;
  filter: drop-shadow(0 0 18px rgba(0, 242, 255, .32)) drop-shadow(0 14px 22px rgba(0, 94, 170, .26)) !important;
}

html body:has(.dj-bg-stage) button.dj-submit-pay-button:disabled,
html body:has(.dj-bg-stage) button.dj-submit-pay-button[aria-disabled="true"],
html body button.dj-submit-pay-button:disabled,
html body button.dj-submit-pay-button[aria-disabled="true"] {
  opacity: .9 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: rgba(0, 226, 255, .38) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .20), transparent 42%),
    linear-gradient(135deg, rgba(0, 205, 235, .42), rgba(18, 100, 220, .58) 56%, rgba(0, 72, 115, .52)) !important;
  --tw-shadow: 0 0 20px rgba(0, 226, 255, .20), 0 14px 34px rgba(0, 78, 140, .26), inset 0 1px 0 rgba(255,255,255,.18) !important;
  --tw-shadow-colored: var(--tw-shadow) !important;
  box-shadow: var(--tw-shadow) !important;
  filter: drop-shadow(0 0 12px rgba(0, 226, 255, .18)) saturate(.98) brightness(1) !important;
}

html.dark.dj-light-mode body:has(.dj-bg-stage) button.dj-submit-pay-button,
html.dark.dj-light-mode body:has(.dj-bg-stage) a.dj-submit-pay-button {
  border-color: rgba(79, 70, 229, .34) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.28), transparent 42%),
    linear-gradient(135deg, #6366f1, #2563eb 58%, #0ea5e9) !important;
  --tw-shadow: 0 14px 32px rgba(37, 99, 235, .24), 0 0 22px rgba(14, 165, 233, .20), inset 0 1px 0 rgba(255,255,255,.30) !important;
  --tw-shadow-colored: var(--tw-shadow) !important;
  box-shadow: var(--tw-shadow) !important;
}

html.dark.dj-light-mode body:has(.dj-bg-stage) button.dj-submit-pay-button:disabled,
html.dark.dj-light-mode body:has(.dj-bg-stage) button.dj-submit-pay-button[aria-disabled="true"] {
  opacity: .92 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: rgba(79, 70, 229, .34) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.26), transparent 42%),
    linear-gradient(135deg, rgba(99, 102, 241, .86), rgba(37, 99, 235, .88) 58%, rgba(14, 165, 233, .80)) !important;
  --tw-shadow: 0 12px 30px rgba(37, 99, 235, .22), 0 0 20px rgba(14, 165, 233, .18), inset 0 1px 0 rgba(255,255,255,.26) !important;
  --tw-shadow-colored: var(--tw-shadow) !important;
  box-shadow: var(--tw-shadow) !important;
}

/* v41 checkout submit structural fallback - no business logic changes */
html body:has(.dj-bg-stage) .h-fit.rounded-2xl.border.bg-card.text-card-foreground.p-6 > button.w-full.font-semibold,
html body:has(.dj-bg-stage) .h-fit.rounded-2xl.border.bg-card.text-card-foreground.p-6 button.w-full.font-semibold,
html body .h-fit.rounded-2xl.border.bg-card.text-card-foreground.p-6 > button.w-full.font-semibold,
html body .h-fit.rounded-2xl.border.bg-card.text-card-foreground.p-6 button.w-full.font-semibold {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  width: 100% !important;
  min-height: 54px !important;
  height: 54px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  letter-spacing: .025em !important;
  border: 1px solid rgba(0, 226, 255, .46) !important;
  text-shadow: 0 1px 12px rgba(0, 42, 70, .46) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .22), transparent 42%),
    linear-gradient(135deg, rgba(0, 226, 255, .48), rgba(18, 112, 255, .70) 56%, rgba(0, 78, 122, .58)) !important;
  --tw-shadow: 0 0 22px rgba(0, 226, 255, .24), 0 18px 42px rgba(0, 78, 140, .30), inset 0 1px 0 rgba(255,255,255,.22) !important;
  --tw-shadow-colored: var(--tw-shadow) !important;
  box-shadow: var(--tw-shadow) !important;
  filter: drop-shadow(0 0 12px rgba(0, 226, 255, .18)) !important;
  backdrop-filter: blur(14px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.16) !important;
  translate: 0 0 !important;
  scale: 1 !important;
  transition: translate .22s ease, scale .22s ease, filter .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

html body:has(.dj-bg-stage) .h-fit.rounded-2xl.border.bg-card.text-card-foreground.p-6 > button.w-full.font-semibold:hover,
html body:has(.dj-bg-stage) .h-fit.rounded-2xl.border.bg-card.text-card-foreground.p-6 button.w-full.font-semibold:hover,
html body .h-fit.rounded-2xl.border.bg-card.text-card-foreground.p-6 > button.w-full.font-semibold:hover,
html body .h-fit.rounded-2xl.border.bg-card.text-card-foreground.p-6 button.w-full.font-semibold:hover {
  translate: 0 -2px !important;
  scale: 1.01 !important;
  border-color: rgba(0, 242, 255, .68) !important;
  --tw-shadow: 0 0 30px rgba(0, 242, 255, .34), 0 20px 48px rgba(0, 98, 170, .38), inset 0 1px 0 rgba(255,255,255,.28) !important;
  --tw-shadow-colored: var(--tw-shadow) !important;
  box-shadow: var(--tw-shadow) !important;
  filter: drop-shadow(0 0 18px rgba(0, 242, 255, .32)) drop-shadow(0 14px 22px rgba(0, 94, 170, .26)) !important;
}

html body:has(.dj-bg-stage) .h-fit.rounded-2xl.border.bg-card.text-card-foreground.p-6 > button.w-full.font-semibold:disabled,
html body:has(.dj-bg-stage) .h-fit.rounded-2xl.border.bg-card.text-card-foreground.p-6 button.w-full.font-semibold:disabled,
html body .h-fit.rounded-2xl.border.bg-card.text-card-foreground.p-6 > button.w-full.font-semibold:disabled,
html body .h-fit.rounded-2xl.border.bg-card.text-card-foreground.p-6 button.w-full.font-semibold:disabled {
  opacity: .92 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  border-color: rgba(0, 226, 255, .38) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .20), transparent 42%),
    linear-gradient(135deg, rgba(0, 205, 235, .42), rgba(18, 100, 220, .58) 56%, rgba(0, 72, 115, .52)) !important;
  --tw-shadow: 0 0 20px rgba(0, 226, 255, .20), 0 14px 34px rgba(0, 78, 140, .26), inset 0 1px 0 rgba(255,255,255,.18) !important;
  --tw-shadow-colored: var(--tw-shadow) !important;
  box-shadow: var(--tw-shadow) !important;
  filter: drop-shadow(0 0 12px rgba(0, 226, 255, .18)) saturate(.98) brightness(1) !important;
}

html.dark.dj-light-mode body:has(.dj-bg-stage) .h-fit.rounded-2xl.border.bg-card.text-card-foreground.p-6 button.w-full.font-semibold,
html.dark.dj-light-mode body .h-fit.rounded-2xl.border.bg-card.text-card-foreground.p-6 button.w-full.font-semibold {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: rgba(79, 70, 229, .34) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.28), transparent 42%),
    linear-gradient(135deg, #6366f1, #2563eb 58%, #0ea5e9) !important;
  --tw-shadow: 0 14px 32px rgba(37, 99, 235, .24), 0 0 22px rgba(14, 165, 233, .20), inset 0 1px 0 rgba(255,255,255,.30) !important;
  --tw-shadow-colored: var(--tw-shadow) !important;
  box-shadow: var(--tw-shadow) !important;
}

@media (max-width: 640px) {
  html body .h-fit.rounded-2xl.border.bg-card.text-card-foreground.p-6 button.w-full.font-semibold {
    min-height: 50px !important;
    height: 50px !important;
    font-size: 14px !important;
  }
}

/* v42 rollback light mode - keep dark cyber storefront only */
.dj-theme-toggle,
html .dj-theme-toggle,
body .dj-theme-toggle {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html.dj-light-mode,
html.dj-light-mode body,
html.dark.dj-light-mode,
html.dark.dj-light-mode body {
  color-scheme: dark !important;
}

html.dark.dj-light-mode body:has(.dj-bg-stage),
html.dark.dj-light-mode body:has(.dj-bg-stage) .home-page,
html.dark.dj-light-mode body:has(.dj-bg-stage) main,
html.dark.dj-light-mode body:has(.dj-bg-stage) .min-h-screen,
html.dark.dj-light-mode body:has(.dj-bg-stage) .bg-background {
  background: transparent !important;
  color: rgba(238, 248, 252, .94) !important;
}

html.dark.dj-light-mode body:has(.dj-bg-stage) .dj-bg-stage {
  background:
    radial-gradient(circle at 50% 12%, rgba(0, 210, 255, .16), transparent 42%),
    radial-gradient(circle at 72% 42%, rgba(90, 120, 255, .12), transparent 38%),
    linear-gradient(to bottom, rgba(4, 13, 18, .88), rgba(8, 12, 22, .84)) !important;
}

html.dark.dj-light-mode body:has(.dj-bg-stage) .dj-bg-stage video,
html.dark.dj-light-mode body:has(.dj-bg-stage) video {
  opacity: .42 !important;
  filter: brightness(.78) contrast(.82) saturate(.82) blur(.2px) !important;
}

html.dark.dj-light-mode body:has(.dj-bg-stage) .dj-bg-vignette {
  background:
    linear-gradient(to bottom, rgba(4, 12, 18, .18), rgba(9, 13, 24, .26)),
    radial-gradient(circle at 50% 20%, rgba(0, 220, 255, .08), transparent 52%) !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.dark.dj-light-mode body:has(.dj-bg-stage) .dj-bg-glass {
  background: linear-gradient(to bottom, rgba(255, 255, 255, .025), rgba(255, 255, 255, .012)) !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.dark.dj-light-mode body:has(.dj-bg-stage) nav.fixed.top-0 {
  color: rgba(226, 242, 248, .94) !important;
  background:
    radial-gradient(circle at 50% -90%, rgba(0, 226, 255, .34), transparent 58%),
    linear-gradient(180deg, rgba(3, 21, 29, .86), rgba(6, 15, 24, .70) 78%, rgba(6, 15, 24, 0)) !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  backdrop-filter: blur(14px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
}

html.dark.dj-light-mode body:has(.dj-bg-stage) nav a[title="GoGo Shop"],
html.dark.dj-light-mode body:has(.dj-bg-stage) nav a.theme-wordmark,
html.dark.dj-light-mode body:has(.dj-bg-stage) nav .dj-nav-pill,
html.dark.dj-light-mode body:has(.dj-bg-stage) nav .dj-nav-pill.router-link-active,
html.dark.dj-light-mode body:has(.dj-bg-stage) nav .dj-nav-pill.router-link-exact-active,
html.dark.dj-light-mode body:has(.dj-bg-stage) nav .dj-nav-pill.dj-nav-active {
  color: rgba(238, 248, 252, .95) !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .42) !important;
}

html.dark.dj-light-mode body:has(.dj-bg-stage) aside,
html.dark.dj-light-mode body:has(.dj-bg-stage) aside > div,
html.dark.dj-light-mode body:has(.dj-bg-stage) .relative.overflow-hidden.rounded-2xl.border.bg-card,
html.dark.dj-light-mode body:has(.dj-bg-stage) .border.bg-card.text-card-foreground,
html.dark.dj-light-mode body:has(.dj-bg-stage) .group.relative.overflow-hidden.flex.flex-row.items-center.rounded-xl,
html.dark.dj-light-mode body:has(.dj-bg-stage) .bg-card {
  background: rgba(15, 20, 28, .70) !important;
  border-color: rgba(255, 255, 255, .10) !important;
  color: rgba(238, 248, 252, .94) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255,255,255,.05) !important;
  backdrop-filter: blur(12px) saturate(1.10) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.10) !important;
}

html.dark.dj-light-mode body:has(.dj-bg-stage) .text-foreground,
html.dark.dj-light-mode body:has(.dj-bg-stage) .font-bold,
html.dark.dj-light-mode body:has(.dj-bg-stage) .font-semibold,
html.dark.dj-light-mode body:has(.dj-bg-stage) h1,
html.dark.dj-light-mode body:has(.dj-bg-stage) h2,
html.dark.dj-light-mode body:has(.dj-bg-stage) h3 {
  color: rgba(244, 250, 252, .96) !important;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .34) !important;
}

html.dark.dj-light-mode body:has(.dj-bg-stage) .text-muted-foreground,
html.dark.dj-light-mode body:has(.dj-bg-stage) [class*="text-muted"] {
  color: rgba(205, 220, 228, .78) !important;
  text-shadow: none !important;
}

/* v43 nav capsule stability and right-side support float */
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a[href="/"]:not(.theme-wordmark):not([title="GoGo Shop"]),
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a[href="/blog"],
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a[href*="t.me/gogov_a" i],
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a[href*="t.me/dmawg" i],
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a[href="/guest/orders"],
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 .dj-nav-pill {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 17px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(124, 229, 255, .28) !important;
  color: rgba(239, 251, 255, .96) !important;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .15), transparent 34%),
    linear-gradient(180deg, rgba(25, 76, 88, .50), rgba(8, 34, 45, .46)) !important;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, .16),
    inset 0 1px 0 rgba(255, 255, 255, .13),
    inset 0 -1px 0 rgba(0, 210, 255, .06) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .42) !important;
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  will-change: transform, box-shadow, border-color !important;
  animation: none !important;
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    color .18s ease !important;
}

html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a[href="/"]:not(.theme-wordmark):not([title="GoGo Shop"])::before,
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a[href="/blog"]::before,
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a[href*="t.me/gogov_a" i]::before,
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a[href*="t.me/dmawg" i]::before,
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a[href="/guest/orders"]::before,
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 .dj-nav-pill::before {
  opacity: 0 !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
}

html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a[href="/"]:not(.theme-wordmark):not([title="GoGo Shop"]):hover,
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a[href="/blog"]:hover,
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a[href*="t.me/gogov_a" i]:hover,
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a[href*="t.me/dmawg" i]:hover,
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a[href="/guest/orders"]:hover,
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 .dj-nav-pill:hover,
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a[href="/"]:not(.theme-wordmark):not([title="GoGo Shop"]):focus-visible,
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a[href="/blog"]:focus-visible,
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a[href*="t.me/gogov_a" i]:focus-visible,
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a[href*="t.me/dmawg" i]:focus-visible,
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a[href="/guest/orders"]:focus-visible,
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 .dj-nav-pill:focus-visible {
  transform: translateY(-1px) translateZ(0) !important;
  border-color: rgba(0, 226, 255, .46) !important;
  color: #ffffff !important;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .18), transparent 34%),
    linear-gradient(180deg, rgba(32, 94, 108, .58), rgba(8, 40, 54, .54)) !important;
  box-shadow:
    0 0 14px rgba(0, 214, 255, .18),
    0 12px 26px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .16) !important;
  filter: none !important;
}

html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a[href="/"]:not(.theme-wordmark):not([title="GoGo Shop"]).router-link-active,
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a[href="/blog"].router-link-active,
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a[href="/guest/orders"].router-link-active,
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 .dj-nav-pill.router-link-active,
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 .dj-nav-pill.router-link-exact-active,
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 .dj-nav-pill.dj-nav-active {
  border-color: rgba(116, 230, 255, .36) !important;
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .18), transparent 34%),
    linear-gradient(180deg, rgba(35, 104, 116, .54), rgba(8, 45, 58, .48)) !important;
  box-shadow:
    0 0 18px rgba(0, 190, 255, .18),
    0 8px 22px rgba(0, 0, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .16) !important;
}

.dj-support-float {
  left: auto !important;
  right: max(24px, env(safe-area-inset-right)) !important;
  bottom: calc(28px + env(safe-area-inset-bottom)) !important;
  transform-origin: right bottom !important;
}

.dj-support-float:hover,
.dj-support-float:focus-visible {
  translate: 0 -3px !important;
}

@media (max-width: 768px) {
  .dj-support-float {
    left: auto !important;
    right: 14px !important;
    bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    max-width: calc(100vw - 28px) !important;
  }
}

@media (max-width: 380px) {
  .dj-support-float {
    right: 10px !important;
    min-width: 154px !important;
  }
}

/* v44 nav flicker lock and utility classes */
.dj-force-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a,
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 button,
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a::before,
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a::after,
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 button::before,
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 button::after {
  animation: none !important;
}

html.dark body:has(.dj-bg-stage) nav.fixed.top-0 .dj-nav-pill,
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a[href="/"]:not(.theme-wordmark):not([title="GoGo Shop"]),
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a[href="/blog"],
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a[href="/guest/orders"],
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a[href*="t.me/gogov_a" i],
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a[href*="t.me/dmawg" i] {
  will-change: auto !important;
  contain: paint !important;
  transform: translateZ(0) !important;
  filter: none !important;
  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    background-color .16s ease,
    color .16s ease !important;
}

html.dark body:has(.dj-bg-stage) nav.fixed.top-0 .dj-nav-pill:not(:hover):not(:focus-visible)::before,
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 .dj-nav-pill:not(:hover):not(:focus-visible)::after {
  opacity: 0 !important;
  transform: none !important;
  transition: none !important;
}

html.dark body:has(.dj-bg-stage) nav.fixed.top-0 .dj-nav-pill:not(:hover):not(:focus-visible),
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a[href="/"]:not(.theme-wordmark):not([title="GoGo Shop"]):not(:hover):not(:focus-visible),
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a[href="/blog"]:not(:hover):not(:focus-visible),
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a[href="/guest/orders"]:not(:hover):not(:focus-visible),
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a[href*="t.me/gogov_a" i]:not(:hover):not(:focus-visible),
html.dark body:has(.dj-bg-stage) nav.fixed.top-0 a[href*="t.me/dmawg" i]:not(:hover):not(:focus-visible) {
  filter: none !important;
  transform: translateZ(0) !important;
}

/* v49 restore v44 background/layout with stable no-flicker functional fixes */
html.dark nav.fixed.top-0,
html.dark nav.fixed.top-0 *,
html.dark nav.fixed.top-0 *::before,
html.dark nav.fixed.top-0 *::after {
  animation-name: none !important;
  animation-duration: 0s !important;
}

html.dark nav.fixed.top-0 a[href="/"]:not(.theme-wordmark):not([title="GoGo Shop"]),
html.dark nav.fixed.top-0 a[href="/blog"],
html.dark nav.fixed.top-0 a[href="/guest/orders"],
html.dark nav.fixed.top-0 a[href*="t.me/gogov_a" i],
html.dark nav.fixed.top-0 a[href*="t.me/dmawg" i],
html.dark nav.fixed.top-0 .dj-nav-pill {
  transform: translateZ(0) !important;
  backface-visibility: hidden !important;
  will-change: auto !important;
  filter: none !important;
}

html.dark nav.fixed.top-0 a[href="/cart"],
html.dark nav.fixed.top-0 a[href="/auth/login"],
.dj-force-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.dj-support-float {
  left: auto !important;
  right: max(24px, env(safe-area-inset-right)) !important;
  bottom: calc(28px + env(safe-area-inset-bottom)) !important;
  transform-origin: right bottom !important;
}

.dj-support-float:hover,
.dj-support-float:focus-visible {
  translate: 0 -3px !important;
}

@media (max-width: 768px) {
  .dj-support-float {
    left: auto !important;
    right: 14px !important;
    bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    max-width: calc(100vw - 28px) !important;
  }
}

html.dark button.dj-action-cart,
html.dark button.dj-action-buy,
html.dark .bg-card button.dj-action-cart,
html.dark .bg-card button.dj-action-buy,
html.dark button.bg-secondary.text-secondary-foreground.h-12.font-bold,
html.dark button.bg-primary.text-primary-foreground.h-12.font-bold {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  height: 54px !important;
  min-height: 54px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 226, 255, .38) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .42) !important;
  transform: translateZ(0) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

html.dark button.dj-action-cart,
html.dark .bg-card button.dj-action-cart,
html.dark button.bg-secondary.text-secondary-foreground.h-12.font-bold {
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .12), transparent 42%),
    linear-gradient(135deg, rgba(11, 36, 48, .88), rgba(13, 24, 38, .82)) !important;
  box-shadow:
    0 0 18px rgba(0, 226, 255, .12),
    0 16px 34px rgba(0, 0, 0, .26),
    inset 0 1px 0 rgba(255, 255, 255, .10) !important;
  backdrop-filter: blur(14px) saturate(1.10) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.10) !important;
}

html.dark button.dj-action-buy,
html.dark .bg-card button.dj-action-buy,
html.dark button.bg-primary.text-primary-foreground.h-12.font-bold {
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .18), transparent 42%),
    linear-gradient(135deg, rgba(0, 145, 255, .96), rgba(0, 226, 255, .76)) !important;
  box-shadow:
    0 0 22px rgba(0, 170, 255, .20),
    0 16px 34px rgba(0, 85, 160, .28),
    inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

html.dark button.dj-action-cart:hover,
html.dark button.dj-action-buy:hover,
html.dark .bg-card button.dj-action-cart:hover,
html.dark .bg-card button.dj-action-buy:hover,
html.dark button.bg-secondary.text-secondary-foreground.h-12.font-bold:hover,
html.dark button.bg-primary.text-primary-foreground.h-12.font-bold:hover {
  transform: translateY(-2px) translateZ(0) !important;
  border-color: rgba(120, 244, 255, .68) !important;
  box-shadow:
    0 0 26px rgba(0, 226, 255, .28),
    0 20px 42px rgba(0, 0, 0, .32),
    inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}


/* v48 announcement popup compatibility */
.dj-announcement-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
  color: rgba(245, 252, 255, .96) !important;
}

.dj-announcement-modal[hidden] {
  display: none !important;
}

.dj-announcement-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(0, 226, 255, .18), transparent 42%),
    rgba(1, 7, 12, .62) !important;
  backdrop-filter: blur(12px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.12) !important;
}

.dj-announcement-panel {
  position: relative !important;
  width: min(92vw, 620px) !important;
  max-height: min(78vh, 720px) !important;
  overflow: hidden !important;
  border-radius: 22px !important;
  border: 1px solid rgba(112, 232, 255, .28) !important;
  background:
    linear-gradient(180deg, rgba(20, 28, 36, .86), rgba(12, 18, 26, .82)) !important;
  box-shadow:
    0 0 34px rgba(0, 226, 255, .18),
    0 28px 80px rgba(0, 0, 0, .48),
    inset 0 1px 0 rgba(255, 255, 255, .10) !important;
  backdrop-filter: blur(22px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.18) !important;
}

.dj-announcement-head {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 22px 24px 16px !important;
}

.dj-announcement-icon {
  display: grid !important;
  width: 42px !important;
  height: 42px !important;
  flex: none !important;
  place-items: center !important;
  border-radius: 999px !important;
  color: #72f8ff !important;
  background: rgba(0, 226, 255, .13) !important;
  border: 1px solid rgba(0, 226, 255, .28) !important;
  box-shadow: 0 0 20px rgba(0, 226, 255, .18) !important;
}

.dj-announcement-title {
  margin: 0 !important;
  min-width: 0 !important;
  flex: 1 !important;
  font-size: clamp(18px, 2.2vw, 24px) !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  color: #ffffff !important;
  text-shadow: 0 0 18px rgba(0, 226, 255, .16) !important;
}

.dj-announcement-close {
  display: grid !important;
  width: 36px !important;
  height: 36px !important;
  flex: none !important;
  place-items: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  background: rgba(255, 255, 255, .055) !important;
  color: rgba(230, 244, 248, .86) !important;
  cursor: pointer !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.dj-announcement-close:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(0, 226, 255, .42) !important;
  box-shadow: 0 0 18px rgba(0, 226, 255, .18) !important;
}

.dj-announcement-body {
  max-height: min(52vh, 430px) !important;
  overflow: auto !important;
  padding: 2px 24px 22px !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: rgba(226, 239, 244, .90) !important;
}

.dj-announcement-body p {
  margin: 0 0 12px !important;
}

.dj-announcement-body a {
  color: #6ef6ff !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

.dj-announcement-foot {
  display: flex !important;
  justify-content: flex-end !important;
  padding: 16px 24px 22px !important;
  border-top: 1px solid rgba(255, 255, 255, .075) !important;
}

.dj-announcement-ok {
  height: 42px !important;
  min-width: 124px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 226, 255, .38) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .20), transparent 42%),
    linear-gradient(135deg, rgba(0, 226, 255, .54), rgba(10, 132, 255, .86)) !important;
  color: #fff !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  box-shadow: 0 0 22px rgba(0, 226, 255, .18), 0 14px 28px rgba(0, 0, 0, .22) !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}

.dj-announcement-ok:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 0 28px rgba(0, 226, 255, .26), 0 18px 34px rgba(0, 0, 0, .30) !important;
}

@media (max-width: 640px) {
  .dj-announcement-modal {
    align-items: flex-end !important;
    padding: 12px !important;
  }

  .dj-announcement-panel {
    width: 100% !important;
    border-radius: 20px !important;
  }

  .dj-announcement-head {
    padding: 18px 18px 12px !important;
  }

  .dj-announcement-body {
    padding: 0 18px 18px !important;
    max-height: 56vh !important;
  }

  .dj-announcement-foot {
    padding: 14px 18px 18px !important;
  }

  .dj-announcement-ok {
    width: 100% !important;
  }
}

/* v50 product badge polish - hide guest badge, highlight delivery/stock states */
.dj-badge-guest-hidden {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html.dark .dj-badge-auto,
html.dark .dj-badge-stock,
html.dark .dj-badge-warning {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-height: 20px !important;
  padding: 0 8px !important;
  border-radius: 999px !important;
  border-width: 1px !important;
  border-style: solid !important;
  font-size: 10px !important;
  line-height: 18px !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  text-shadow: none !important;
  backdrop-filter: blur(10px) saturate(1.14) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.14) !important;
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease !important;
}

html.dark .dj-badge-auto::before,
html.dark .dj-badge-stock::before,
html.dark .dj-badge-warning::before {
  display: inline-block !important;
  flex: 0 0 auto !important;
  font-size: 10px !important;
  line-height: 1 !important;
  filter: drop-shadow(0 0 7px currentColor) !important;
}

html.dark .dj-badge-auto {
  color: #8fefff !important;
  border-color: rgba(0, 214, 255, .44) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .18), transparent 42%),
    linear-gradient(180deg, rgba(0, 188, 235, .22), rgba(0, 74, 96, .26)) !important;
  box-shadow:
    0 0 12px rgba(0, 214, 255, .16),
    inset 0 1px 0 rgba(255, 255, 255, .14) !important;
}

html.dark .dj-badge-auto::before {
  content: "\21AF" !important;
}

html.dark .dj-badge-stock {
  color: #62ffd2 !important;
  border-color: rgba(0, 255, 166, .52) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .16), transparent 42%),
    linear-gradient(180deg, rgba(0, 255, 166, .23), rgba(0, 92, 72, .28)) !important;
  box-shadow:
    0 0 14px rgba(0, 255, 166, .22),
    inset 0 1px 0 rgba(255, 255, 255, .15) !important;
}

html.dark .dj-badge-stock::before {
  content: "\26A1" !important;
}

html.dark .dj-badge-warning {
  color: #ffd85e !important;
  border-color: rgba(255, 211, 71, .58) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .14), transparent 42%),
    linear-gradient(180deg, rgba(255, 211, 71, .22), rgba(92, 66, 0, .30)) !important;
  box-shadow:
    0 0 14px rgba(255, 211, 71, .18),
    inset 0 1px 0 rgba(255, 255, 255, .13) !important;
}

html.dark .dj-badge-warning::before {
  content: "\26A0" !important;
}

html.dark .group:hover .dj-badge-auto,
html.dark .group:hover .dj-badge-stock,
html.dark .group:hover .dj-badge-warning,
html.dark a:hover .dj-badge-auto,
html.dark a:hover .dj-badge-stock,
html.dark a:hover .dj-badge-warning {
  transform: translateY(-1px) !important;
}

/* v51 nav capsule polish - reference layout adapted to GoGo dark cyber style */
html.dark nav.fixed.top-0 {
  overflow: visible !important;
  border-bottom-color: rgba(124, 229, 255, .055) !important;
}

html.dark nav.fixed.top-0 > .container,
html.dark nav.fixed.top-0 .container {
  min-height: 68px !important;
  align-items: center !important;
  gap: clamp(12px, 2vw, 28px) !important;
}

html.dark nav.fixed.top-0 .theme-wordmark {
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(120, 229, 255, .28) !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 24% 0%, rgba(255, 255, 255, .15), transparent 42%),
    linear-gradient(180deg, rgba(18, 66, 82, .50), rgba(8, 28, 42, .64)) !important;
  box-shadow:
    0 0 16px rgba(0, 214, 255, .12),
    inset 0 1px 0 rgba(255, 255, 255, .13) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html.dark nav.fixed.top-0 a[href="/"]:not(.theme-wordmark):not([title="GoGo Shop"]),
html.dark nav.fixed.top-0 a[href="/blog"],
html.dark nav.fixed.top-0 a[href="/guest/orders"],
html.dark nav.fixed.top-0 a[href*="t.me/gogov_a" i],
html.dark nav.fixed.top-0 a[href*="t.me/dmawg" i],
html.dark nav.fixed.top-0 .dj-nav-pill {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(128, 232, 255, .22) !important;
  color: rgba(225, 244, 250, .88) !important;
  background:
    radial-gradient(circle at 22% 0%, rgba(255, 255, 255, .12), transparent 38%),
    linear-gradient(180deg, rgba(22, 73, 88, .36), rgba(8, 29, 42, .40)) !important;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, .12),
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 0 -1px 0 rgba(0, 226, 255, .04) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .42) !important;
  transform: translateZ(0) !important;
  filter: none !important;
  animation: none !important;
  white-space: nowrap !important;
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease,
    color .18s ease !important;
}

html.dark nav.fixed.top-0 a[href="/"]:not(.theme-wordmark):not([title="GoGo Shop"])::before,
html.dark nav.fixed.top-0 a[href="/blog"]::before,
html.dark nav.fixed.top-0 a[href="/guest/orders"]::before,
html.dark nav.fixed.top-0 a[href*="t.me/gogov_a" i]::before,
html.dark nav.fixed.top-0 a[href*="t.me/dmawg" i]::before,
html.dark nav.fixed.top-0 .dj-nav-pill::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background:
    linear-gradient(110deg, transparent 0%, rgba(120, 244, 255, .20) 42%, transparent 64%) !important;
  transform: translateX(-130%) skewX(-18deg) !important;
  transition: transform .44s ease, opacity .2s ease !important;
}

html.dark nav.fixed.top-0 a[href="/"]:not(.theme-wordmark):not([title="GoGo Shop"]):hover,
html.dark nav.fixed.top-0 a[href="/blog"]:hover,
html.dark nav.fixed.top-0 a[href="/guest/orders"]:hover,
html.dark nav.fixed.top-0 a[href*="t.me/gogov_a" i]:hover,
html.dark nav.fixed.top-0 a[href*="t.me/dmawg" i]:hover,
html.dark nav.fixed.top-0 .dj-nav-pill:hover,
html.dark nav.fixed.top-0 .dj-nav-pill:focus-visible {
  transform: translateY(-2px) translateZ(0) !important;
  color: #ffffff !important;
  border-color: rgba(0, 226, 255, .52) !important;
  background:
    radial-gradient(circle at 22% 0%, rgba(255, 255, 255, .18), transparent 38%),
    linear-gradient(180deg, rgba(24, 92, 108, .55), rgba(5, 42, 57, .54)) !important;
  box-shadow:
    0 0 18px rgba(0, 226, 255, .22),
    0 14px 28px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .16) !important;
}

html.dark nav.fixed.top-0 a[href="/"]:not(.theme-wordmark):not([title="GoGo Shop"]):hover::before,
html.dark nav.fixed.top-0 a[href="/blog"]:hover::before,
html.dark nav.fixed.top-0 a[href="/guest/orders"]:hover::before,
html.dark nav.fixed.top-0 a[href*="t.me/gogov_a" i]:hover::before,
html.dark nav.fixed.top-0 a[href*="t.me/dmawg" i]:hover::before,
html.dark nav.fixed.top-0 .dj-nav-pill:hover::before,
html.dark nav.fixed.top-0 .dj-nav-pill:focus-visible::before {
  opacity: 1 !important;
  transform: translateX(130%) skewX(-18deg) !important;
}

html.dark nav.fixed.top-0 a[href="/"]:not(.theme-wordmark):not([title="GoGo Shop"]).router-link-active,
html.dark nav.fixed.top-0 a[href="/blog"].router-link-active,
html.dark nav.fixed.top-0 a[href="/guest/orders"].router-link-active,
html.dark nav.fixed.top-0 .dj-nav-pill.router-link-active,
html.dark nav.fixed.top-0 .dj-nav-pill.router-link-exact-active,
html.dark nav.fixed.top-0 .dj-nav-pill.dj-nav-active {
  color: #ffffff !important;
  border-color: rgba(0, 226, 255, .46) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .18), transparent 40%),
    linear-gradient(180deg, rgba(0, 126, 195, .56), rgba(0, 82, 126, .48)) !important;
  box-shadow:
    0 0 18px rgba(0, 174, 255, .22),
    0 10px 24px rgba(0, 0, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .16) !important;
}

html.dark nav.fixed.top-0 a[href="/cart"],
html.dark nav.fixed.top-0 a[href="/auth/login"] {
  display: none !important;
}

@media (max-width: 1024px) {
  html.dark nav.fixed.top-0 > .container,
  html.dark nav.fixed.top-0 .container {
    min-height: 64px !important;
  }

  html.dark nav.fixed.top-0 a[href="/"]:not(.theme-wordmark):not([title="GoGo Shop"]),
  html.dark nav.fixed.top-0 a[href="/blog"],
  html.dark nav.fixed.top-0 a[href="/guest/orders"],
  html.dark nav.fixed.top-0 a[href*="t.me/gogov_a" i],
  html.dark nav.fixed.top-0 a[href*="t.me/dmawg" i],
  html.dark nav.fixed.top-0 .dj-nav-pill {
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 13px !important;
    gap: 6px !important;
  }
}

/* v52 restore green flowing glass background and hide theme toggle */
.dj-theme-toggle,
html .dj-theme-toggle,
body .dj-theme-toggle,
html.dark nav.fixed.top-0 button[aria-label*="主题" i],
html.dark nav.fixed.top-0 button[title*="主题" i],
html.dark nav.fixed.top-0 button[aria-label*="theme" i],
html.dark nav.fixed.top-0 button[title*="theme" i],
html.dark nav.fixed.top-0 button:has(svg.lucide-sun),
html.dark nav.fixed.top-0 button:has(svg.lucide-moon),
html.dark nav.fixed.top-0 button:has([class*="sun" i]),
html.dark nav.fixed.top-0 button:has([class*="moon" i]) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html.dark body:has(.dj-bg-stage),
html.dark body:has(.dj-bg-stage) .home-page,
html.dark body:has(.dj-bg-stage) main,
html.dark body:has(.dj-bg-stage) .min-h-screen,
html.dark body:has(.dj-bg-stage) .bg-background {
  background: transparent !important;
}

html.dark .dj-bg-stage {
  background:
    radial-gradient(circle at 50% 5%, rgba(0, 230, 190, .18), transparent 35%),
    radial-gradient(circle at 28% 28%, rgba(0, 180, 112, .16), transparent 34%),
    radial-gradient(circle at 74% 38%, rgba(0, 226, 255, .12), transparent 38%),
    linear-gradient(180deg, rgba(2, 13, 16, .92), rgba(3, 11, 18, .88) 44%, rgba(2, 8, 14, .94)) !important;
}

html.dark .dj-bg-stage::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(0, 255, 170, .045), transparent 18%, rgba(0, 226, 255, .035) 52%, transparent 76%),
    radial-gradient(circle at 50% 18%, rgba(0, 255, 180, .11), transparent 42%) !important;
  opacity: .95 !important;
  mix-blend-mode: screen !important;
}

html.dark .dj-bg-stage::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(1, 9, 13, .10), rgba(1, 8, 13, .28)),
    radial-gradient(circle at 50% 58%, rgba(0, 255, 160, .085), transparent 46%) !important;
  backdrop-filter: blur(7px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(7px) saturate(1.18) !important;
  opacity: .78 !important;
}

html.dark .dj-bg-stage video {
  opacity: .56 !important;
  filter: brightness(.86) contrast(.94) saturate(1.18) blur(.12px) !important;
  mix-blend-mode: screen !important;
}

html.dark .dj-bg-vignette {
  background:
    radial-gradient(circle at 50% 16%, rgba(0, 255, 170, .09), transparent 46%),
    linear-gradient(180deg, rgba(0, 8, 12, .08), rgba(0, 9, 15, .26)) !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.dark .dj-bg-glass {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .030), rgba(255, 255, 255, .010)) !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px) saturate(1.10) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.10) !important;
}

html.dark .bg-card,
html.dark .border.bg-card,
html.dark .bg-card.backdrop-blur-xl,
html.dark .bg-card.backdrop-blur-md,
html.dark .rounded-3xl.bg-card,
html.dark .rounded-2xl.bg-card,
html.dark section.bg-card,
html.dark aside,
html.dark aside > div {
  background-color: rgba(18, 23, 28, .68) !important;
  background-image:
    radial-gradient(circle at 18% 0%, rgba(0, 255, 180, .040), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, .036), rgba(255, 255, 255, .010)) !important;
  border-color: rgba(126, 255, 214, .105) !important;
  box-shadow:
    0 24px 58px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .055) !important;
  backdrop-filter: blur(18px) saturate(1.14) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.14) !important;
}

html.dark .group.relative.overflow-hidden.flex.flex-row.items-center.rounded-xl {
  background-color: rgba(15, 20, 25, .68) !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, .006)) !important;
  border-color: rgba(126, 255, 214, .10) !important;
  backdrop-filter: blur(15px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(15px) saturate(1.12) !important;
}

html.dark .group.relative.overflow-hidden.flex.flex-row.items-center.rounded-xl:hover {
  border-color: rgba(0, 255, 180, .28) !important;
  box-shadow:
    0 0 18px rgba(0, 255, 180, .12),
    0 18px 42px rgba(0, 0, 0, .26),
    inset 0 1px 0 rgba(255, 255, 255, .06) !important;
}

/* v53 duplicate badge cleanup */
.dj-badge-duplicate-hidden {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* v54 real matrix background and right-aligned glass nav */
html.dark,
html.dark body,
html.dark #app,
html.dark .home-page,
html.dark .min-h-screen.bg-background {
  background: #02090d !important;
}

html.dark #app {
  position: relative !important;
  isolation: isolate !important;
  overflow-x: clip !important;
}

html.dark #app::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 48% 8%, rgba(0, 255, 184, .24), transparent 34%),
    radial-gradient(circle at 28% 36%, rgba(0, 142, 84, .18), transparent 34%),
    radial-gradient(circle at 76% 42%, rgba(0, 226, 255, .12), transparent 36%),
    linear-gradient(180deg, rgba(1, 10, 13, .92), rgba(2, 10, 17, .88) 46%, rgba(1, 7, 13, .96)) !important;
}

html.dark #app::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .02), rgba(0, 0, 0, .24)),
    radial-gradient(circle at 50% 52%, rgba(0, 255, 168, .08), transparent 48%) !important;
  backdrop-filter: blur(8px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.18) !important;
}

html.dark #app > :not(.dj-live-matrix-bg) {
  position: relative !important;
  z-index: 1 !important;
}

html.dark .dj-live-matrix-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: .78 !important;
  mix-blend-mode: screen !important;
  filter: blur(.18px) saturate(1.15) !important;
}

html.dark .dj-live-matrix-bg span {
  position: absolute !important;
  top: -48vh !important;
  display: block !important;
  width: 30px !important;
  min-height: 132vh !important;
  color: rgba(92, 255, 192, .34) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
  font-size: 27px !important;
  line-height: 1.16 !important;
  font-weight: 800 !important;
  writing-mode: vertical-rl !important;
  text-orientation: upright !important;
  white-space: nowrap !important;
  text-shadow:
    0 0 10px rgba(0, 255, 176, .36),
    0 0 22px rgba(0, 255, 176, .18) !important;
  animation-name: djMatrixRainFall !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}

@keyframes djMatrixRainFall {
  from { transform: translate3d(0, -22vh, 0); opacity: .05; }
  8% { opacity: .82; }
  78% { opacity: .62; }
  to { transform: translate3d(0, 152vh, 0); opacity: .02; }
}

html.dark nav.fixed.top-0 {
  overflow: visible !important;
  background:
    radial-gradient(circle at 70% -80%, rgba(0, 255, 188, .20), transparent 52%),
    radial-gradient(circle at 38% 0%, rgba(0, 226, 255, .12), transparent 42%),
    linear-gradient(180deg, rgba(4, 18, 22, .54), rgba(3, 14, 20, .34)) !important;
  border-bottom: 1px solid rgba(102, 255, 214, .075) !important;
  box-shadow:
    0 12px 34px rgba(0, 0, 0, .12),
    inset 0 1px 0 rgba(255, 255, 255, .040) !important;
  backdrop-filter: blur(18px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.16) !important;
}

html.dark nav.fixed.top-0 > .container {
  justify-content: flex-start !important;
  gap: 18px !important;
}

html.dark nav.fixed.top-0 > .container > .hidden.lg\:flex,
html.dark nav.fixed.top-0 > .container > div.hidden.lg\:flex {
  margin-left: auto !important;
}

html.dark nav.fixed.top-0 > .container > .flex.items-center.shrink-0 {
  margin-left: 10px !important;
}

html.dark nav.fixed.top-0 .theme-wordmark {
  flex: 0 0 auto !important;
}

html.dark .home-page > .container,
html.dark main > .container {
  position: relative !important;
  z-index: 1 !important;
}

html.dark .bg-card,
html.dark .border.bg-card,
html.dark .bg-card.backdrop-blur-xl,
html.dark .bg-card.backdrop-blur-md,
html.dark .rounded-3xl.bg-card,
html.dark .rounded-2xl.bg-card,
html.dark section.bg-card,
html.dark aside,
html.dark aside > div {
  background-color: rgba(14, 22, 24, .62) !important;
  background-image:
    radial-gradient(circle at 18% 0%, rgba(0, 255, 180, .055), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, .038), rgba(255, 255, 255, .010)) !important;
  border-color: rgba(116, 255, 210, .13) !important;
  backdrop-filter: blur(20px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.16) !important;
}

html.dark .group.relative.overflow-hidden.flex.flex-row.items-center.rounded-xl {
  background-color: rgba(11, 18, 22, .64) !important;
  border-color: rgba(116, 255, 210, .125) !important;
  backdrop-filter: blur(16px) saturate(1.14) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.14) !important;
}

/* v55 make green matrix flow visible behind the glass UI */
html.dark body {
  position: relative !important;
  background:
    radial-gradient(circle at 50% 4%, rgba(0, 255, 185, .25), transparent 32%),
    radial-gradient(circle at 24% 42%, rgba(0, 175, 102, .16), transparent 34%),
    linear-gradient(180deg, #020b0d, #020910 46%, #01060b) !important;
}

html.dark .dj-live-matrix-bg {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: .98 !important;
  mix-blend-mode: screen !important;
  filter: saturate(1.22) contrast(1.08) !important;
}

html.dark .dj-live-matrix-bg span {
  top: -62vh !important;
  width: 38px !important;
  min-height: 172vh !important;
  color: rgba(92, 255, 188, .52) !important;
  font-size: 36px !important;
  line-height: 1.05 !important;
  text-shadow:
    0 0 8px rgba(0, 255, 176, .72),
    0 0 20px rgba(0, 255, 176, .38),
    0 0 42px rgba(0, 255, 176, .18) !important;
  animation-name: djMatrixRainFallV55 !important;
}

@keyframes djMatrixRainFallV55 {
  from { transform: translate3d(0, -30vh, 0); opacity: .10; }
  9% { opacity: .92; }
  72% { opacity: .68; }
  to { transform: translate3d(0, 168vh, 0); opacity: .04; }
}

html.dark #app {
  background: transparent !important;
}

html.dark #app::before {
  background:
    radial-gradient(circle at 50% 5%, rgba(0, 255, 184, .18), transparent 34%),
    radial-gradient(circle at 76% 42%, rgba(0, 226, 255, .10), transparent 36%),
    linear-gradient(180deg, rgba(1, 10, 13, .50), rgba(2, 10, 17, .46) 46%, rgba(1, 7, 13, .60)) !important;
}

html.dark #app::after {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .015), rgba(0, 0, 0, .16)),
    radial-gradient(circle at 50% 52%, rgba(0, 255, 168, .045), transparent 48%) !important;
  backdrop-filter: blur(3px) saturate(1.10) !important;
  -webkit-backdrop-filter: blur(3px) saturate(1.10) !important;
}

html.dark nav.fixed.top-0 {
  background:
    radial-gradient(circle at 78% -90%, rgba(0, 255, 188, .28), transparent 52%),
    radial-gradient(circle at 38% 0%, rgba(0, 226, 255, .14), transparent 42%),
    linear-gradient(180deg, rgba(3, 24, 25, .50), rgba(2, 15, 19, .26)) !important;
  border-bottom-color: rgba(112, 255, 215, .10) !important;
  backdrop-filter: blur(16px) saturate(1.20) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.20) !important;
}

/* v56 uncover body-level matrix rain */
html.dark #app::before,
html.dark #app::after {
  display: none !important;
  content: none !important;
}

html.dark #app {
  background: transparent !important;
}

html.dark .dj-live-matrix-bg {
  z-index: 0 !important;
  opacity: 1 !important;
}

html.dark .dj-live-matrix-bg span {
  color: rgba(88, 255, 184, .68) !important;
  text-shadow:
    0 0 9px rgba(0, 255, 176, .86),
    0 0 24px rgba(0, 255, 176, .46),
    0 0 52px rgba(0, 255, 176, .22) !important;
}

html.dark body::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(1, 8, 10, .12), rgba(1, 7, 11, .30)),
    radial-gradient(circle at 50% 10%, rgba(0, 255, 176, .10), transparent 42%) !important;
  backdrop-filter: blur(1.6px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(1.6px) saturate(1.08) !important;
}

html.dark #app,
html.dark nav.fixed.top-0,
html.dark .home-page,
html.dark main,
html.dark .dj-support-float {
  position: relative !important;
  z-index: 1 !important;
}

/* v57 transparent page shells so body matrix rain is visible */
html.dark #app,
html.dark #app.min-h-screen,
html.dark #app.bg-background,
html.dark .home-page,
html.dark .home-page.min-h-screen,
html.dark main,
html.dark main.min-h-screen,
html.dark .min-h-screen.bg-background,
html.dark .bg-background.text-foreground,
html.dark div[class*="bg-background"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

html.dark .dj-live-matrix-bg {
  z-index: 0 !important;
  opacity: .88 !important;
}

html.dark #app {
  position: relative !important;
  z-index: 1 !important;
}

html.dark #app > nav,
html.dark #app > main,
html.dark #app > .home-page,
html.dark nav.fixed.top-0 {
  position: relative !important;
  z-index: 2 !important;
}

/* v58 stable glowing product badges - final override */
.dj-badge-guest-hidden,
.dj-badge-duplicate-hidden {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html.dark body .dj-badge-auto,
html.dark body .dj-badge-stock,
html.dark body .dj-badge-warning {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-height: 20px !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  border-width: 1px !important;
  border-style: solid !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  text-shadow: none !important;
  box-shadow: none;
  backdrop-filter: blur(10px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.25) !important;
  transform: translateZ(0);
  transition:
    border-color .22s ease,
    background-color .22s ease,
    box-shadow .22s ease,
    color .22s ease !important;
}

html.dark body .dj-badge-auto::before,
html.dark body .dj-badge-stock::before,
html.dark body .dj-badge-warning::before {
  display: inline-block !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

html.dark body .dj-badge-auto {
  color: #82ecff !important;
  background: linear-gradient(135deg, rgba(0, 196, 255, .20), rgba(10, 42, 64, .58)) !important;
  border-color: rgba(0, 210, 255, .56) !important;
  box-shadow:
    0 0 10px rgba(0, 210, 255, .16),
    inset 0 1px 0 rgba(255, 255, 255, .10) !important;
}

html.dark body .dj-badge-auto::before {
  content: "\21AF";
  color: #7ff4ff !important;
}

html.dark body .dj-badge-stock {
  color: #67ffc4 !important;
  background: linear-gradient(135deg, rgba(17, 214, 139, .26), rgba(8, 52, 42, .68)) !important;
  border-color: rgba(38, 231, 161, .64) !important;
  box-shadow:
    0 0 12px rgba(22, 227, 147, .20),
    inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}

html.dark body .dj-badge-stock::before {
  content: "\26A1";
  color: #4effbc !important;
}

html.dark body .dj-badge-warning {
  color: #ffe08a !important;
  background: linear-gradient(135deg, rgba(255, 190, 64, .24), rgba(80, 56, 12, .70)) !important;
  border-color: rgba(255, 204, 86, .66) !important;
  box-shadow:
    0 0 12px rgba(255, 190, 64, .18),
    inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}

html.dark body .dj-badge-warning::before {
  content: "\26A0";
  color: #ffd76d !important;
}

html.dark body .dj-badge-auto:hover,
html.dark body .dj-badge-stock:hover,
html.dark body .dj-badge-warning:hover {
  filter: brightness(1.08) !important;
  box-shadow:
    0 0 16px rgba(0, 220, 255, .18),
    inset 0 1px 0 rgba(255, 255, 255, .16) !important;
}

/* v59 final stable badge glow and hidden precedence */
html.dark body .dj-badge-auto,
html.dark body .dj-badge-stock,
html.dark body .dj-badge-warning {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  width: auto !important;
  min-width: auto !important;
  height: auto !important;
  min-height: 20px !important;
  margin: 0 4px 0 0 !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  border-width: 1px !important;
  border-style: solid !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  text-shadow: none !important;
  backdrop-filter: blur(10px) saturate(1.25) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.25) !important;
  transform: translateZ(0);
  transition:
    border-color .22s ease,
    background-color .22s ease,
    box-shadow .22s ease,
    color .22s ease,
    filter .22s ease !important;
}

html.dark body .dj-badge-auto::before,
html.dark body .dj-badge-stock::before,
html.dark body .dj-badge-warning::before {
  display: inline-block !important;
  font-size: 11px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  text-shadow: none !important;
}

html.dark body .dj-badge-auto {
  color: #82ecff !important;
  background: linear-gradient(135deg, rgba(0, 196, 255, .22), rgba(10, 42, 64, .62)) !important;
  border-color: rgba(0, 210, 255, .58) !important;
  box-shadow:
    0 0 11px rgba(0, 210, 255, .18),
    inset 0 1px 0 rgba(255, 255, 255, .11) !important;
}

html.dark body .dj-badge-auto::before {
  content: "\21AF";
  color: #7ff4ff !important;
}

html.dark body .dj-badge-stock {
  color: #67ffc4 !important;
  background: linear-gradient(135deg, rgba(17, 214, 139, .30), rgba(8, 52, 42, .72)) !important;
  border-color: rgba(38, 231, 161, .70) !important;
  box-shadow:
    0 0 14px rgba(22, 227, 147, .24),
    inset 0 1px 0 rgba(255, 255, 255, .13) !important;
}

html.dark body .dj-badge-stock::before {
  content: "\26A1";
  color: #4effbc !important;
}

html.dark body .dj-badge-warning {
  color: #ffe08a !important;
  background: linear-gradient(135deg, rgba(255, 190, 64, .28), rgba(80, 56, 12, .74)) !important;
  border-color: rgba(255, 204, 86, .72) !important;
  box-shadow:
    0 0 13px rgba(255, 190, 64, .21),
    inset 0 1px 0 rgba(255, 255, 255, .13) !important;
}

html.dark body .dj-badge-warning::before {
  content: "\26A0";
  color: #ffd76d !important;
}

html.dark body .dj-badge-auto:hover,
html.dark body .dj-badge-stock:hover,
html.dark body .dj-badge-warning:hover {
  filter: brightness(1.08) !important;
  box-shadow:
    0 0 18px rgba(0, 220, 255, .20),
    inset 0 1px 0 rgba(255, 255, 255, .17) !important;
}

html.dark body .dj-badge-guest-hidden,
html.dark body .dj-badge-duplicate-hidden,
html.dark body .dj-badge-auto.dj-badge-duplicate-hidden,
html.dark body .dj-badge-stock.dj-badge-duplicate-hidden,
html.dark body .dj-badge-warning.dj-badge-duplicate-hidden,
html.dark body .dj-badge-auto.dj-badge-guest-hidden,
html.dark body .dj-badge-stock.dj-badge-guest-hidden,
html.dark body .dj-badge-warning.dj-badge-guest-hidden {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* v65 respect responsive badge copies after glow overrides */
@media (min-width: 640px) {
  html.dark body .sm\:hidden.dj-badge-auto,
  html.dark body .sm\:hidden.dj-badge-stock,
  html.dark body .sm\:hidden.dj-badge-warning {
    display: none !important;
  }

  html.dark body .hidden.sm\:inline-flex.dj-badge-auto,
  html.dark body .hidden.sm\:inline-flex.dj-badge-stock,
  html.dark body .hidden.sm\:inline-flex.dj-badge-warning {
    display: inline-flex !important;
  }
}

@media (max-width: 639px) {
  html.dark body .hidden.sm\:inline-flex.dj-badge-auto,
  html.dark body .hidden.sm\:inline-flex.dj-badge-stock,
  html.dark body .hidden.sm\:inline-flex.dj-badge-warning {
    display: none !important;
  }

  html.dark body .sm\:hidden.dj-badge-auto,
  html.dark body .sm\:hidden.dj-badge-stock,
  html.dark body .sm\:hidden.dj-badge-warning {
    display: inline-flex !important;
  }
}

html.dark body .dj-badge-guest-hidden,
html.dark body .dj-badge-guest-hidden.sm\:hidden,
html.dark body .dj-badge-guest-hidden.hidden.sm\:inline-flex {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* v66 frosted matrix atmosphere and stable badge final layer */
html.dark .dj-live-matrix-bg {
  opacity: .82 !important;
  filter: blur(1.15px) brightness(.78) contrast(.94) saturate(1.12) !important;
  transform: scale(1.012) !important;
  transform-origin: center center !important;
}

html.dark .dj-live-matrix-bg::after {
  content: "" !important;
  position: absolute !important;
  inset: -3% !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 255, 204, .14), transparent 34%),
    radial-gradient(circle at 28% 42%, rgba(0, 190, 150, .10), transparent 40%),
    radial-gradient(circle at 78% 36%, rgba(30, 180, 255, .08), transparent 42%),
    linear-gradient(180deg, rgba(1, 13, 15, .24), rgba(2, 10, 13, .46)) !important;
  backdrop-filter: blur(3.6px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(3.6px) saturate(1.18) !important;
}

html.dark nav.fixed.top-0,
html.dark body nav.fixed.top-0,
html.dark body header,
html.dark body [class*="sticky"][class*="top-0"] {
  background:
    radial-gradient(circle at 50% 0%, rgba(0, 235, 205, .18), transparent 48%),
    linear-gradient(90deg, rgba(5, 24, 26, .76), rgba(3, 34, 39, .70), rgba(5, 20, 30, .76)) !important;
  backdrop-filter: blur(20px) saturate(1.28) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.28) !important;
  border-bottom: 1px solid rgba(80, 255, 220, .08) !important;
  box-shadow:
    0 14px 42px rgba(0, 0, 0, .22),
    inset 0 -1px 0 rgba(255, 255, 255, .035) !important;
}

html.dark .home-page aside,
html.dark .home-page aside > div,
html.dark .home-page .border.bg-card.text-card-foreground,
html.dark .home-page .group.relative.overflow-hidden.flex.flex-row.items-center.rounded-xl,
html.dark body [class*="bg-card"][class*="border"] {
  background:
    linear-gradient(135deg, rgba(7, 22, 25, .62), rgba(8, 16, 23, .58)) !important;
  backdrop-filter: blur(18px) saturate(1.20) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.20) !important;
  border-color: rgba(120, 255, 220, .12) !important;
  box-shadow:
    0 14px 42px rgba(0, 0, 0, .28),
    inset 0 1px 0 rgba(255, 255, 255, .055) !important;
}

html.dark body .dj-badge-auto,
html.dark body .dj-badge-stock,
html.dark body .dj-badge-warning {
  will-change: auto !important;
  animation: none !important;
}

@media (min-width: 640px) {
  html.dark body .sm\:hidden.dj-badge-auto,
  html.dark body .sm\:hidden.dj-badge-stock,
  html.dark body .sm\:hidden.dj-badge-warning {
    display: none !important;
  }

  html.dark body .hidden.sm\:inline-flex.dj-badge-auto,
  html.dark body .hidden.sm\:inline-flex.dj-badge-stock,
  html.dark body .hidden.sm\:inline-flex.dj-badge-warning {
    display: inline-flex !important;
  }
}

@media (max-width: 639px) {
  html.dark body .hidden.sm\:inline-flex.dj-badge-auto,
  html.dark body .hidden.sm\:inline-flex.dj-badge-stock,
  html.dark body .hidden.sm\:inline-flex.dj-badge-warning {
    display: none !important;
  }

  html.dark body .sm\:hidden.dj-badge-auto,
  html.dark body .sm\:hidden.dj-badge-stock,
  html.dark body .sm\:hidden.dj-badge-warning {
    display: inline-flex !important;
  }
}

/* v67 support-right and page glass overlay - keep matrix rain itself unchanged */
html.dark .dj-live-matrix-bg {
  opacity: .78 !important;
  filter: blur(.18px) saturate(1.15) !important;
  transform: none !important;
}

html.dark .dj-live-matrix-bg::after {
  content: none !important;
  display: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.dark body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 2%, rgba(0, 255, 210, .105), transparent 34%),
    radial-gradient(circle at 26% 38%, rgba(0, 190, 150, .070), transparent 42%),
    radial-gradient(circle at 78% 36%, rgba(30, 180, 255, .055), transparent 44%),
    linear-gradient(180deg, rgba(1, 12, 14, .18), rgba(2, 9, 12, .34)) !important;
  backdrop-filter: blur(8px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.18) !important;
}

html.dark #app,
html.dark nav.fixed.top-0,
html.dark .dj-support-float,
html.dark .dj-announcement-backdrop,
html.dark .dj-announcement-modal {
  position: relative !important;
  z-index: 2 !important;
}

html.dark nav.fixed.top-0 {
  z-index: 60 !important;
}

.dj-support-float,
html.dark .dj-support-float,
body .dj-support-float {
  left: auto !important;
  right: max(24px, env(safe-area-inset-right)) !important;
  bottom: calc(28px + env(safe-area-inset-bottom)) !important;
  z-index: 80 !important;
  transform: translate3d(0, 0, 0) !important;
}

.dj-support-float:hover,
html.dark .dj-support-float:hover {
  transform: translate3d(0, -3px, 0) !important;
}

@media (max-width: 768px) {
  .dj-support-float,
  html.dark .dj-support-float,
  body .dj-support-float {
    right: max(12px, env(safe-area-inset-right)) !important;
    left: auto !important;
    bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    width: min(236px, calc(100vw - 24px)) !important;
    min-height: 56px !important;
    padding: 10px 14px !important;
    border-radius: 15px !important;
  }
}

/* v68 hard-lock support widget to the right side */
.dj-support-float,
html.dark .dj-support-float,
body .dj-support-float,
html.dark body .dj-support-float {
  position: fixed !important;
  left: auto !important;
  right: max(24px, env(safe-area-inset-right)) !important;
  bottom: calc(28px + env(safe-area-inset-bottom)) !important;
  top: auto !important;
  z-index: 80 !important;
  transform: translate3d(0, 0, 0) !important;
}

.dj-support-float:hover,
html.dark .dj-support-float:hover,
html.dark body .dj-support-float:hover {
  transform: translate3d(0, -3px, 0) !important;
}

@media (max-width: 768px) {
  .dj-support-float,
  html.dark .dj-support-float,
  body .dj-support-float,
  html.dark body .dj-support-float {
    position: fixed !important;
    left: auto !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: calc(82px + env(safe-area-inset-bottom)) !important;
    top: auto !important;
    width: min(236px, calc(100vw - 24px)) !important;
    transform: translate3d(0, 0, 0) !important;
  }
}

/* v69 nav position and right-aligned layout lock */
html.dark body nav.fixed.top-0,
html.dark nav.fixed.top-0,
body nav.fixed.top-0 {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 70 !important;
}

html.dark body nav.fixed.top-0 > .container,
html.dark nav.fixed.top-0 > .container,
body nav.fixed.top-0 > .container {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(10px, 1.1vw, 18px) !important;
}

html.dark body nav.fixed.top-0 .theme-wordmark,
html.dark nav.fixed.top-0 .theme-wordmark,
body nav.fixed.top-0 .theme-wordmark {
  flex: 0 0 auto !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

@media (min-width: 1024px) {
  html.dark body nav.fixed.top-0 > .container > div.hidden.lg\:flex,
  html.dark nav.fixed.top-0 > .container > div.hidden.lg\:flex,
  body nav.fixed.top-0 > .container > div.hidden.lg\:flex {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }

  html.dark body nav.fixed.top-0 > .container > div.flex.items-center.shrink-0,
  html.dark nav.fixed.top-0 > .container > div.flex.items-center.shrink-0,
  body nav.fixed.top-0 > .container > div.flex.items-center.shrink-0 {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left: clamp(14px, 1.4vw, 24px) !important;
    margin-right: 0 !important;
    flex: 0 0 auto !important;
  }
}

@media (max-width: 1023px) {
  html.dark body nav.fixed.top-0 > .container,
  html.dark nav.fixed.top-0 > .container,
  body nav.fixed.top-0 > .container {
    justify-content: space-between !important;
  }

  html.dark body nav.fixed.top-0 .theme-wordmark,
  html.dark nav.fixed.top-0 .theme-wordmark,
  body nav.fixed.top-0 .theme-wordmark {
    margin-right: 0 !important;
  }
}

/* v70 nav-only fixed position and right layout repair */
html.dark body #app > nav.fixed.top-0.left-0.right-0,
html.dark body #app nav.fixed.top-0.left-0.right-0,
html.dark body nav[class~="fixed"][class~="top-0"][class~="left-0"][class~="right-0"],
body #app > nav.fixed.top-0.left-0.right-0 {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  z-index: 90 !important;
  transform: translateZ(0) !important;
}

html.dark body #app > nav.fixed.top-0.left-0.right-0 > .container,
html.dark body #app nav.fixed.top-0.left-0.right-0 > .container,
body #app > nav.fixed.top-0.left-0.right-0 > .container {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(10px, 1.1vw, 18px) !important;
}

html.dark body #app > nav.fixed.top-0.left-0.right-0 .theme-wordmark,
html.dark body #app nav.fixed.top-0.left-0.right-0 .theme-wordmark,
body #app > nav.fixed.top-0.left-0.right-0 .theme-wordmark {
  flex: 0 0 auto !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

@media (min-width: 1024px) {
  html.dark body #app > nav.fixed.top-0.left-0.right-0 > .container > div.hidden.lg\:flex,
  html.dark body #app nav.fixed.top-0.left-0.right-0 > .container > div.hidden.lg\:flex,
  body #app > nav.fixed.top-0.left-0.right-0 > .container > div.hidden.lg\:flex {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }

  html.dark body #app > nav.fixed.top-0.left-0.right-0 > .container > div.flex.items-center.shrink-0,
  html.dark body #app nav.fixed.top-0.left-0.right-0 > .container > div.flex.items-center.shrink-0,
  body #app > nav.fixed.top-0.left-0.right-0 > .container > div.flex.items-center.shrink-0 {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin-left: clamp(14px, 1.35vw, 24px) !important;
    margin-right: 0 !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }
}

@media (max-width: 1023px) {
  html.dark body #app > nav.fixed.top-0.left-0.right-0 > .container,
  html.dark body #app nav.fixed.top-0.left-0.right-0 > .container,
  body #app > nav.fixed.top-0.left-0.right-0 > .container {
    justify-content: space-between !important;
  }

  html.dark body #app > nav.fixed.top-0.left-0.right-0 .theme-wordmark,
  html.dark body #app nav.fixed.top-0.left-0.right-0 .theme-wordmark,
  body #app > nav.fixed.top-0.left-0.right-0 .theme-wordmark {
    margin-right: 0 !important;
  }
}

/* v71 announcement modal-only overlay repair */
html.dark body > .dj-announcement-modal,
body > .dj-announcement-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  z-index: 140 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(18px, 4vh, 42px) 16px !important;
  margin: 0 !important;
  pointer-events: auto !important;
  transform: none !important;
}

@supports (height: 100dvh) {
  html.dark body > .dj-announcement-modal,
  body > .dj-announcement-modal {
    height: 100dvh !important;
    min-height: 100dvh !important;
  }
}

html.dark body > .dj-announcement-modal::before,
body > .dj-announcement-modal::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 50% 22%, rgba(0, 220, 190, .16), transparent 42%),
    rgba(1, 10, 14, .42) !important;
  backdrop-filter: blur(8px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.08) !important;
}

html.dark body > .dj-announcement-modal > .dj-announcement-backdrop,
body > .dj-announcement-modal > .dj-announcement-backdrop {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  display: block !important;
  background: transparent !important;
  pointer-events: auto !important;
}

html.dark body > .dj-announcement-modal > :not(.dj-announcement-backdrop),
body > .dj-announcement-modal > :not(.dj-announcement-backdrop) {
  position: relative !important;
  z-index: 1 !important;
  width: min(620px, calc(100vw - 32px)) !important;
}

html.dark.dj-announcement-open,
html.dark.dj-announcement-open body {
  overflow: hidden !important;
}

/* v72 home hero clearance under fixed nav - layout only */
html.dark body #app .home-page > section.relative.z-10.border-b.pt-24.pb-10:first-child,
html.dark body .home-page > section.relative.z-10.border-b.pt-24.pb-10:first-child,
body #app .home-page > section.relative.z-10.border-b.pt-24.pb-10:first-child {
  padding-top: 138px !important;
}

@media (max-width: 1023px) {
  html.dark body #app .home-page > section.relative.z-10.border-b.pt-24.pb-10:first-child,
  html.dark body .home-page > section.relative.z-10.border-b.pt-24.pb-10:first-child,
  body #app .home-page > section.relative.z-10.border-b.pt-24.pb-10:first-child {
    padding-top: 126px !important;
  }
}

@media (max-width: 640px) {
  html.dark body #app .home-page > section.relative.z-10.border-b.pt-24.pb-10:first-child,
  html.dark body .home-page > section.relative.z-10.border-b.pt-24.pb-10:first-child,
  body #app .home-page > section.relative.z-10.border-b.pt-24.pb-10:first-child {
    padding-top: 112px !important;
  }
}

/* v73 mobile stability - reduce compositor jitter without changing desktop visuals */
@media (max-width: 640px) {
  html.dark,
  html.dark body,
  html.dark #app {
    overflow-x: hidden !important;
  }

  html.dark body::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background:
      linear-gradient(180deg, rgba(1, 8, 10, .18), rgba(1, 7, 11, .32)),
      radial-gradient(circle at 50% 12%, rgba(0, 255, 176, .075), transparent 45%) !important;
  }

  html.dark .dj-live-matrix-bg {
    opacity: .76 !important;
    filter: saturate(1.06) contrast(1.02) !important;
    contain: strict !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
  }

  html.dark .dj-live-matrix-bg span {
    width: 28px !important;
    min-height: 150vh !important;
    font-size: 24px !important;
    line-height: 1.08 !important;
    text-shadow:
      0 0 7px rgba(0, 255, 176, .58),
      0 0 18px rgba(0, 255, 176, .26) !important;
    will-change: transform, opacity !important;
  }

  html.dark nav.fixed.top-0 {
    contain: paint !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    backdrop-filter: blur(10px) saturate(1.10) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.10) !important;
  }

  html.dark .bg-card,
  html.dark .border.bg-card,
  html.dark .bg-card.backdrop-blur-xl,
  html.dark .bg-card.backdrop-blur-md,
  html.dark .rounded-3xl.bg-card,
  html.dark .rounded-2xl.bg-card,
  html.dark section.bg-card,
  html.dark aside,
  html.dark aside > div,
  html.dark .group.relative.overflow-hidden.flex.flex-row.items-center.rounded-xl {
    backdrop-filter: blur(10px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
  }
}

/* v74 nav capsule layout polish - backend custom nav friendly */
html.dark body #app > nav.fixed.top-0.left-0.right-0,
html.dark body nav.fixed.top-0,
body #app > nav.fixed.top-0.left-0.right-0 {
  min-height: 96px !important;
  overflow: visible !important;
  border-bottom: 0 !important;
  background:
    radial-gradient(circle at 70% -70%, rgba(0, 255, 188, .22), transparent 48%),
    radial-gradient(circle at 36% -22%, rgba(0, 226, 255, .14), transparent 42%),
    linear-gradient(180deg, rgba(3, 30, 31, .68), rgba(2, 15, 19, .38) 72%, rgba(2, 11, 15, .16)) !important;
  box-shadow:
    inset 0 -1px 0 rgba(113, 255, 225, .08),
    0 18px 42px rgba(0, 0, 0, .16) !important;
  backdrop-filter: blur(18px) saturate(1.14) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.14) !important;
}

html.dark body #app > nav.fixed.top-0.left-0.right-0::after,
html.dark body nav.fixed.top-0::after {
  display: none !important;
  content: none !important;
}

html.dark body #app > nav.fixed.top-0.left-0.right-0 > .container,
html.dark body nav.fixed.top-0 > .container,
body #app > nav.fixed.top-0.left-0.right-0 > .container {
  min-height: 84px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: clamp(10px, 1.1vw, 18px) !important;
  max-width: min(1536px, calc(100vw - 64px)) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html.dark body nav.fixed.top-0 .theme-wordmark,
body nav.fixed.top-0 .theme-wordmark {
  flex: 0 0 auto !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(118, 255, 226, .24) !important;
  background:
    radial-gradient(circle at 24% 0%, rgba(255, 255, 255, .16), transparent 38%),
    linear-gradient(180deg, rgba(16, 56, 62, .82), rgba(8, 30, 39, .76)) !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, .20),
    0 0 22px rgba(0, 226, 255, .08),
    inset 0 1px 0 rgba(255, 255, 255, .10) !important;
  backdrop-filter: blur(14px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.15) !important;
}

@media (min-width: 1024px) {
  html.dark body nav.fixed.top-0 > .container > div.hidden.lg\:flex,
  html.dark body #app > nav.fixed.top-0.left-0.right-0 > .container > div.hidden.lg\:flex,
  body nav.fixed.top-0 > .container > div.hidden.lg\:flex {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  html.dark body nav.fixed.top-0 > .container > div.flex.items-center.shrink-0,
  html.dark body #app > nav.fixed.top-0.left-0.right-0 > .container > div.flex.items-center.shrink-0,
  body nav.fixed.top-0 > .container > div.flex.items-center.shrink-0 {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-left: clamp(12px, 1.15vw, 22px) !important;
    margin-right: 0 !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }
}

html.dark body nav.fixed.top-0 > .container > div.hidden.lg\:flex a,
html.dark body nav.fixed.top-0 > .container > div.hidden.lg\:flex button,
html.dark body nav.fixed.top-0 a.dj-nav-pill,
html.dark body nav.fixed.top-0 button.dj-nav-pill,
html.dark body nav.fixed.top-0 a[href="/guest/orders"],
html.dark body nav.fixed.top-0 a[href*="t.me/gogov_a" i],
html.dark body nav.fixed.top-0 a[href*="t.me/dmawg" i],
body nav.fixed.top-0 > .container > div.hidden.lg\:flex a,
body nav.fixed.top-0 a.dj-nav-pill {
  position: relative !important;
  isolation: isolate !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  height: 38px !important;
  min-height: 38px !important;
  padding: 0 15px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(137, 255, 226, .22) !important;
  color: rgba(236, 255, 250, .96) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  background:
    radial-gradient(circle at 22% 0%, rgba(255, 255, 255, .14), transparent 36%),
    linear-gradient(180deg, rgba(35, 70, 74, .72), rgba(13, 42, 50, .66)) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, .20),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .52) !important;
  transform: translateZ(0) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease !important;
  animation: none !important;
}

html.dark body nav.fixed.top-0 > .container > div.hidden.lg\:flex a::before,
html.dark body nav.fixed.top-0 > .container > div.hidden.lg\:flex button::before,
html.dark body nav.fixed.top-0 a.dj-nav-pill::before,
html.dark body nav.fixed.top-0 button.dj-nav-pill::before,
body nav.fixed.top-0 > .container > div.hidden.lg\:flex a::before,
body nav.fixed.top-0 a.dj-nav-pill::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  z-index: -1 !important;
  border-radius: inherit !important;
  opacity: 0 !important;
  transform: translateX(-30%) skewX(-16deg) !important;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, .18) 42%, transparent 72%) !important;
  transition: opacity .18s ease, transform .18s ease !important;
  pointer-events: none !important;
}

html.dark body nav.fixed.top-0 > .container > div.hidden.lg\:flex a:hover,
html.dark body nav.fixed.top-0 > .container > div.hidden.lg\:flex button:hover,
html.dark body nav.fixed.top-0 a.dj-nav-pill:hover,
html.dark body nav.fixed.top-0 button.dj-nav-pill:hover,
html.dark body nav.fixed.top-0 a.dj-nav-pill:focus-visible,
body nav.fixed.top-0 > .container > div.hidden.lg\:flex a:hover,
body nav.fixed.top-0 a.dj-nav-pill:hover {
  transform: translateY(-1px) translateZ(0) !important;
  border-color: rgba(77, 242, 255, .56) !important;
  color: #ffffff !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .18), transparent 35%),
    linear-gradient(180deg, rgba(27, 96, 108, .74), rgba(8, 62, 74, .72)) !important;
  box-shadow:
    0 0 22px rgba(77, 242, 255, .18),
    0 12px 28px rgba(0, 0, 0, .24),
    inset 0 1px 0 rgba(255, 255, 255, .13) !important;
}

html.dark body nav.fixed.top-0 > .container > div.hidden.lg\:flex a:hover::before,
html.dark body nav.fixed.top-0 > .container > div.hidden.lg\:flex button:hover::before,
html.dark body nav.fixed.top-0 a.dj-nav-pill:hover::before,
html.dark body nav.fixed.top-0 button.dj-nav-pill:hover::before,
body nav.fixed.top-0 > .container > div.hidden.lg\:flex a:hover::before,
body nav.fixed.top-0 a.dj-nav-pill:hover::before {
  opacity: 1 !important;
  transform: translateX(0) skewX(-16deg) !important;
}

html.dark body nav.fixed.top-0 a.router-link-active:not(.theme-wordmark),
html.dark body nav.fixed.top-0 a.router-link-exact-active:not(.theme-wordmark),
html.dark body nav.fixed.top-0 a.dj-nav-active,
body nav.fixed.top-0 a.router-link-active:not(.theme-wordmark),
body nav.fixed.top-0 a.router-link-exact-active:not(.theme-wordmark) {
  border-color: rgba(0, 178, 255, .62) !important;
  background:
    radial-gradient(circle at 22% 12%, rgba(255, 255, 255, .28), transparent 34%),
    linear-gradient(135deg, rgba(0, 142, 255, .48), rgba(0, 220, 255, .18)) !important;
  box-shadow:
    0 0 22px rgba(0, 174, 255, .16),
    inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}

html.dark body nav.fixed.top-0 a[href="/cart"],
html.dark body nav.fixed.top-0 a[href="/auth/login"],
body nav.fixed.top-0 a[href="/cart"],
body nav.fixed.top-0 a[href="/auth/login"],
html.dark nav.fixed.top-0 button:has(svg.lucide-sun),
html.dark nav.fixed.top-0 button:has(svg.lucide-moon) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 1023px) {
  html.dark body nav.fixed.top-0,
  body nav.fixed.top-0 {
    min-height: 74px !important;
  }

  html.dark body nav.fixed.top-0 > .container,
  body nav.fixed.top-0 > .container {
    min-height: 68px !important;
    max-width: calc(100vw - 28px) !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  html.dark body nav.fixed.top-0 .theme-wordmark,
  body nav.fixed.top-0 .theme-wordmark {
    height: 38px !important;
    min-height: 38px !important;
    max-width: 132px !important;
    margin-right: 0 !important;
  }

  html.dark body nav.fixed.top-0 a.dj-nav-pill,
  html.dark body nav.fixed.top-0 button.dj-nav-pill,
  html.dark body nav.fixed.top-0 a[href="/guest/orders"],
  html.dark body nav.fixed.top-0 a[href*="t.me/gogov_a" i],
  html.dark body nav.fixed.top-0 a[href*="t.me/dmawg" i],
  body nav.fixed.top-0 a.dj-nav-pill {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  html.dark body nav.fixed.top-0 a.dj-nav-pill span,
  html.dark body nav.fixed.top-0 button.dj-nav-pill span,
  html.dark body nav.fixed.top-0 a[href="/guest/orders"] span,
  html.dark body nav.fixed.top-0 a[href*="t.me/gogov_a" i] span,
  html.dark body nav.fixed.top-0 a[href*="t.me/dmawg" i] span,
  body nav.fixed.top-0 a.dj-nav-pill span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
  }
}

/* v75 mobile nav height and badge duplicate stability */
.dj-badge-duplicate-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 1023px) {
  html.dark body #app > nav.fixed.top-0.left-0.right-0,
  html.dark body nav.fixed.top-0,
  body #app > nav.fixed.top-0.left-0.right-0 {
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  html.dark body #app > nav.fixed.top-0.left-0.right-0 > .container,
  html.dark body nav.fixed.top-0 > .container,
  body #app > nav.fixed.top-0.left-0.right-0 > .container {
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
  }

  html.dark body nav.fixed.top-0 .theme-wordmark,
  body nav.fixed.top-0 .theme-wordmark {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
  }

  html.dark body nav.fixed.top-0 a.dj-nav-pill,
  html.dark body nav.fixed.top-0 button.dj-nav-pill,
  html.dark body nav.fixed.top-0 a[href="/guest/orders"],
  html.dark body nav.fixed.top-0 a[href*="t.me/gogov_a" i],
  html.dark body nav.fixed.top-0 a[href*="t.me/dmawg" i],
  body nav.fixed.top-0 a.dj-nav-pill {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
  }
}

/* v77 exact preview-style nav shell - container glass capsule */
html.dark body #app > nav.fixed.top-0.left-0.right-0,
html.dark body nav.fixed.top-0,
body #app > nav.fixed.top-0.left-0.right-0 {
  height: 104px !important;
  min-height: 104px !important;
  max-height: 104px !important;
  padding: 0 !important;
  border-bottom: 0 !important;
  overflow: visible !important;
  background:
    radial-gradient(circle at 50% -88%, rgba(0, 255, 188, .28), transparent 52%),
    radial-gradient(circle at 18% 0%, rgba(0, 226, 255, .10), transparent 38%),
    linear-gradient(180deg, rgba(2, 25, 27, .58), rgba(1, 13, 17, .20)) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.dark body #app > nav.fixed.top-0.left-0.right-0::before,
html.dark body #app > nav.fixed.top-0.left-0.right-0::after,
html.dark body nav.fixed.top-0::before,
html.dark body nav.fixed.top-0::after {
  display: none !important;
  content: none !important;
}

html.dark body #app > nav.fixed.top-0.left-0.right-0 > .container,
html.dark body nav.fixed.top-0 > .container,
body #app > nav.fixed.top-0.left-0.right-0 > .container {
  position: relative !important;
  z-index: 1 !important;
  width: calc(100vw - 192px) !important;
  max-width: 1536px !important;
  height: 62px !important;
  min-height: 62px !important;
  max-height: 62px !important;
  margin: 17px auto 0 !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  border: 1px solid rgba(122, 255, 219, .18) !important;
  border-radius: 19px !important;
  background:
    radial-gradient(circle at 4% 0%, rgba(94, 255, 204, .12), transparent 30%),
    linear-gradient(180deg, rgba(7, 28, 34, .78), rgba(7, 22, 29, .68)) !important;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, .28),
    0 0 30px rgba(0, 240, 190, .08),
    inset 0 1px 0 rgba(255, 255, 255, .06) !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2) !important;
}

html.dark body nav.fixed.top-0 .theme-wordmark,
body nav.fixed.top-0 .theme-wordmark {
  flex: 0 0 auto !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;
  margin: 0 auto 0 0 !important;
  padding: 0 16px 0 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: rgba(243, 255, 251, .98) !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.dark body nav.fixed.top-0 .theme-wordmark::before,
body nav.fixed.top-0 .theme-wordmark::before {
  content: "⚡" !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 34px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 11px !important;
  color: #efffff !important;
  font-size: 16px !important;
  line-height: 1 !important;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .42), transparent 28%),
    linear-gradient(135deg, rgba(0, 225, 255, .92), rgba(0, 157, 112, .88)) !important;
  box-shadow:
    0 0 22px rgba(0, 240, 220, .42),
    inset 0 1px 0 rgba(255, 255, 255, .26) !important;
}

html.dark body nav.fixed.top-0 > .container > div.hidden.lg\:flex,
html.dark body #app > nav.fixed.top-0.left-0.right-0 > .container > div.hidden.lg\:flex,
body nav.fixed.top-0 > .container > div.hidden.lg\:flex {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  overflow: visible !important;
}

html.dark body nav.fixed.top-0 > .container > div.flex.items-center.shrink-0,
html.dark body #app > nav.fixed.top-0.left-0.right-0 > .container > div.flex.items-center.shrink-0,
body nav.fixed.top-0 > .container > div.flex.items-center.shrink-0 {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-left: 8px !important;
  margin-right: 0 !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
}

html.dark body nav.fixed.top-0 > .container > div.flex.items-center.shrink-0 > button.hidden.lg\:inline-flex,
body nav.fixed.top-0 > .container > div.flex.items-center.shrink-0 > button.hidden.lg\:inline-flex {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html.dark body nav.fixed.top-0 > .container > div.hidden.lg\:flex a,
html.dark body nav.fixed.top-0 > .container > div.hidden.lg\:flex button,
html.dark body nav.fixed.top-0 a.dj-nav-pill,
html.dark body nav.fixed.top-0 button.dj-nav-pill,
html.dark body nav.fixed.top-0 a[href="/guest/orders"],
html.dark body nav.fixed.top-0 a[href*="t.me/gogov_a" i],
html.dark body nav.fixed.top-0 a[href*="t.me/dmawg" i],
body nav.fixed.top-0 > .container > div.hidden.lg\:flex a,
body nav.fixed.top-0 a.dj-nav-pill {
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: 0 15px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(137, 255, 226, .18) !important;
  color: rgba(236, 255, 250, .94) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  gap: 7px !important;
  background:
    radial-gradient(circle at 22% 0%, rgba(255, 255, 255, .14), transparent 36%),
    linear-gradient(180deg, rgba(35, 70, 74, .72), rgba(13, 42, 50, .66)) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, .20),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
  animation: none !important;
}

html.dark body nav.fixed.top-0 > .container > div.hidden.lg\:flex a:hover,
html.dark body nav.fixed.top-0 > .container > div.hidden.lg\:flex button:hover,
html.dark body nav.fixed.top-0 a.dj-nav-pill:hover,
html.dark body nav.fixed.top-0 button.dj-nav-pill:hover,
body nav.fixed.top-0 > .container > div.hidden.lg\:flex a:hover,
body nav.fixed.top-0 a.dj-nav-pill:hover {
  transform: translateY(-1px) translateZ(0) !important;
  border-color: rgba(77, 242, 255, .56) !important;
  color: #ffffff !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, .18), transparent 35%),
    linear-gradient(180deg, rgba(27, 96, 108, .72), rgba(8, 62, 74, .72)) !important;
  box-shadow:
    0 0 22px rgba(77, 242, 255, .18),
    0 12px 28px rgba(0, 0, 0, .24),
    inset 0 1px 0 rgba(255, 255, 255, .13) !important;
}

@media (max-width: 1023px) {
  html.dark body #app > nav.fixed.top-0.left-0.right-0,
  html.dark body nav.fixed.top-0,
  body #app > nav.fixed.top-0.left-0.right-0 {
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
  }

  html.dark body #app > nav.fixed.top-0.left-0.right-0 > .container,
  html.dark body nav.fixed.top-0 > .container,
  body #app > nav.fixed.top-0.left-0.right-0 > .container {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
    height: 58px !important;
    min-height: 58px !important;
    max-height: 58px !important;
    margin-top: 8px !important;
    padding: 0 9px !important;
    gap: 8px !important;
    border-radius: 18px !important;
  }

  html.dark body nav.fixed.top-0 .theme-wordmark,
  body nav.fixed.top-0 .theme-wordmark {
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    max-width: 132px !important;
    padding: 0 8px !important;
    gap: 8px !important;
    overflow: hidden !important;
  }

  html.dark body nav.fixed.top-0 .theme-wordmark::before,
  body nav.fixed.top-0 .theme-wordmark::before {
    width: 31px !important;
    height: 31px !important;
    flex-basis: 31px !important;
    border-radius: 10px !important;
  }

  html.dark body nav.fixed.top-0 a.dj-nav-pill,
  html.dark body nav.fixed.top-0 button.dj-nav-pill,
  html.dark body nav.fixed.top-0 a[href="/guest/orders"],
  html.dark body nav.fixed.top-0 a[href*="t.me/gogov_a" i],
  html.dark body nav.fixed.top-0 a[href*="t.me/dmawg" i],
  body nav.fixed.top-0 a.dj-nav-pill {
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
  }
}

@media (max-width: 380px) {
  html.dark body nav.fixed.top-0 .theme-wordmark span,
  body nav.fixed.top-0 .theme-wordmark span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
  }
}

/* v78 nav lower seam blend - remove hard divider under preview-style shell */
html.dark body #app > nav.fixed.top-0.left-0.right-0,
html.dark body nav.fixed.top-0,
body #app > nav.fixed.top-0.left-0.right-0 {
  border-bottom: 0 !important;
  box-shadow: none !important;
  background:
    radial-gradient(circle at 50% -88%, rgba(0, 255, 188, .24), transparent 52%),
    radial-gradient(circle at 18% 0%, rgba(0, 226, 255, .09), transparent 38%),
    linear-gradient(180deg,
      rgba(2, 25, 27, .54) 0%,
      rgba(2, 21, 24, .36) 54%,
      rgba(1, 13, 17, .12) 82%,
      rgba(1, 13, 17, 0) 100%) !important;
}

html.dark body #app > nav.fixed.top-0.left-0.right-0::after,
html.dark body nav.fixed.top-0::after,
body #app > nav.fixed.top-0.left-0.right-0::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -42px !important;
  height: 64px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border: 0 !important;
  background:
    linear-gradient(180deg,
      rgba(1, 13, 17, .16) 0%,
      rgba(0, 36, 30, .075) 48%,
      rgba(0, 0, 0, 0) 100%) !important;
  box-shadow: none !important;
}

html.dark body #app > nav.fixed.top-0.left-0.right-0 > .container,
html.dark body nav.fixed.top-0 > .container,
body #app > nav.fixed.top-0.left-0.right-0 > .container {
  z-index: 2 !important;
}

html.dark body #app .home-page > section:first-child,
html.dark body .home-page > section:first-child,
html.dark body #app .home-page > section.relative.z-10.border-b.pt-24.pb-10:first-child,
html.dark body .home-page > section.relative.z-10.border-b.pt-24.pb-10:first-child {
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

html.dark body #app .home-page > section:first-child::before,
html.dark body #app .home-page > section:first-child::after,
html.dark body .home-page > section:first-child::before,
html.dark body .home-page > section:first-child::after {
  border: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 1023px) {
  html.dark body #app > nav.fixed.top-0.left-0.right-0::after,
  html.dark body nav.fixed.top-0::after,
  body #app > nav.fixed.top-0.left-0.right-0::after {
    bottom: -30px !important;
    height: 46px !important;
  }
}

/* v79 nav scale polish - enlarge preview-style shell without touching business logic */
@media (min-width: 1024px) {
  html.dark body #app > nav.fixed.top-0.left-0.right-0,
  html.dark body nav.fixed.top-0,
  body #app > nav.fixed.top-0.left-0.right-0 {
    height: 116px !important;
    min-height: 116px !important;
    max-height: 116px !important;
  }

  html.dark body #app > nav.fixed.top-0.left-0.right-0 > .container,
  html.dark body nav.fixed.top-0 > .container,
  body #app > nav.fixed.top-0.left-0.right-0 > .container {
    width: calc(100vw - 160px) !important;
    max-width: 1580px !important;
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    margin-top: 16px !important;
    padding: 0 18px !important;
    gap: 14px !important;
    border-radius: 23px !important;
    border-color: rgba(133, 255, 225, .22) !important;
    box-shadow:
      0 22px 48px rgba(0, 0, 0, .30),
      0 0 34px rgba(0, 240, 190, .10),
      inset 0 1px 0 rgba(255, 255, 255, .075) !important;
  }

  html.dark body nav.fixed.top-0 .theme-wordmark,
  body nav.fixed.top-0 .theme-wordmark {
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    min-width: 184px !important;
    padding: 0 18px 0 14px !important;
    gap: 12px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
  }

  html.dark body nav.fixed.top-0 .theme-wordmark *,
  body nav.fixed.top-0 .theme-wordmark * {
    font-size: 17px !important;
    font-weight: 700 !important;
  }

  html.dark body nav.fixed.top-0 .theme-wordmark::before,
  body nav.fixed.top-0 .theme-wordmark::before {
    width: 39px !important;
    height: 39px !important;
    flex-basis: 39px !important;
    border-radius: 13px !important;
    font-size: 18px !important;
    box-shadow:
      0 0 26px rgba(0, 240, 220, .48),
      inset 0 1px 0 rgba(255, 255, 255, .28) !important;
  }

  html.dark body nav.fixed.top-0 > .container > div.hidden.lg\:flex,
  html.dark body #app > nav.fixed.top-0.left-0.right-0 > .container > div.hidden.lg\:flex,
  body nav.fixed.top-0 > .container > div.hidden.lg\:flex {
    gap: 10px !important;
  }

  html.dark body nav.fixed.top-0 > .container > div.flex.items-center.shrink-0,
  html.dark body #app > nav.fixed.top-0.left-0.right-0 > .container > div.flex.items-center.shrink-0,
  body nav.fixed.top-0 > .container > div.flex.items-center.shrink-0 {
    gap: 10px !important;
    margin-left: 10px !important;
  }

  html.dark body nav.fixed.top-0 > .container > div.hidden.lg\:flex a,
  html.dark body nav.fixed.top-0 > .container > div.hidden.lg\:flex button,
  html.dark body nav.fixed.top-0 a.dj-nav-pill,
  html.dark body nav.fixed.top-0 button.dj-nav-pill,
  html.dark body nav.fixed.top-0 a[href="/guest/orders"],
  html.dark body nav.fixed.top-0 a[href*="t.me/gogov_a" i],
  html.dark body nav.fixed.top-0 a[href*="t.me/dmawg" i],
  body nav.fixed.top-0 > .container > div.hidden.lg\:flex a,
  body nav.fixed.top-0 a.dj-nav-pill {
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 18px !important;
    gap: 8px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    border-color: rgba(148, 255, 230, .24) !important;
  }

  html.dark body nav.fixed.top-0 a.dj-nav-pill svg,
  html.dark body nav.fixed.top-0 button.dj-nav-pill svg,
  body nav.fixed.top-0 a.dj-nav-pill svg {
    width: 17px !important;
    height: 17px !important;
  }
}

@media (max-width: 1023px) {
  html.dark body #app > nav.fixed.top-0.left-0.right-0 > .container,
  html.dark body nav.fixed.top-0 > .container,
  body #app > nav.fixed.top-0.left-0.right-0 > .container {
    border-color: rgba(133, 255, 225, .22) !important;
    box-shadow:
      0 16px 32px rgba(0, 0, 0, .24),
      inset 0 1px 0 rgba(255, 255, 255, .07) !important;
  }
}

/* v80 unified frosted glass - keep v79 layout, unify top and main glass values */
:root {
  --gogov-glass-bg: rgba(4, 28, 28, 0.58);
  --gogov-glass-bg-soft: rgba(5, 32, 32, 0.46);
  --gogov-glass-border: rgba(126, 255, 225, 0.18);
  --gogov-glass-border-soft: rgba(126, 255, 225, 0.12);
  --gogov-glass-blur: blur(16px) saturate(1.18);
  --gogov-glass-shadow:
    0 18px 46px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

html.dark body nav.fixed.top-0,
html.dark body #app > nav.fixed.top-0.left-0.right-0 {
  background:
    linear-gradient(180deg, var(--gogov-glass-bg), var(--gogov-glass-bg-soft)) !important;
  backdrop-filter: var(--gogov-glass-blur) !important;
  -webkit-backdrop-filter: var(--gogov-glass-blur) !important;
  border-bottom-color: var(--gogov-glass-border-soft) !important;
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.20),
    inset 0 -1px 0 rgba(126, 255, 225, 0.08) !important;
}

html.dark body nav.fixed.top-0 > .container,
html.dark body #app > nav.fixed.top-0.left-0.right-0 > .container {
  background:
    linear-gradient(180deg, var(--gogov-glass-bg), var(--gogov-glass-bg-soft)) !important;
  backdrop-filter: var(--gogov-glass-blur) !important;
  -webkit-backdrop-filter: var(--gogov-glass-blur) !important;
  border-color: var(--gogov-glass-border) !important;
  box-shadow: var(--gogov-glass-shadow) !important;
}

html.dark body .home-page {
  background:
    linear-gradient(
      180deg,
      rgba(4, 28, 28, 0.56) 0%,
      rgba(5, 32, 32, 0.48) 18%,
      rgba(4, 18, 22, 0.42) 42%,
      rgba(4, 18, 22, 0.46) 100%
    ) !important;
}

html.dark body .home-page [class*="banner"],
html.dark body .home-page [class*="hero"],
html.dark body .home-page .rounded-xl.overflow-hidden,
html.dark body .home-page .rounded-2xl.overflow-hidden {
  background:
    linear-gradient(180deg, var(--gogov-glass-bg), var(--gogov-glass-bg-soft)) !important;
  backdrop-filter: var(--gogov-glass-blur) !important;
  -webkit-backdrop-filter: var(--gogov-glass-blur) !important;
  border: 1px solid var(--gogov-glass-border) !important;
  box-shadow: var(--gogov-glass-shadow) !important;
}

html.dark body .home-page aside,
html.dark body .home-page aside > div,
html.dark body .home-page input,
html.dark body .home-page [role="search"],
html.dark body .home-page .border.bg-card.text-card-foreground,
html.dark body .home-page .group.relative.overflow-hidden.flex.flex-row.items-center.rounded-xl {
  background:
    linear-gradient(180deg, var(--gogov-glass-bg), var(--gogov-glass-bg-soft)) !important;
  backdrop-filter: var(--gogov-glass-blur) !important;
  -webkit-backdrop-filter: var(--gogov-glass-blur) !important;
  border: 1px solid var(--gogov-glass-border) !important;
  box-shadow: var(--gogov-glass-shadow) !important;
}

html.dark body nav.fixed.top-0::before,
html.dark body nav.fixed.top-0::after,
html.dark body .home-page main::before,
html.dark body .home-page main::after,
html.dark body .home-page section::before,
html.dark body .home-page section::after {
  border: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

@media (max-width: 1023px) {
  html.dark body nav.fixed.top-0,
  html.dark body #app > nav.fixed.top-0.left-0.right-0 {
    background:
      linear-gradient(180deg, var(--gogov-glass-bg), var(--gogov-glass-bg-soft)) !important;
    backdrop-filter: var(--gogov-glass-blur) !important;
    -webkit-backdrop-filter: var(--gogov-glass-blur) !important;
  }
}

/* v81 top band glass blend - match header field transparency with main background */
html.dark body nav.fixed.top-0,
html.dark body #app > nav.fixed.top-0.left-0.right-0 {
  background:
    radial-gradient(circle at 52% 0%, rgba(0, 232, 190, 0.18), transparent 46%),
    linear-gradient(
      180deg,
      rgba(2, 28, 27, 0.34) 0%,
      rgba(2, 34, 32, 0.28) 56%,
      rgba(3, 28, 28, 0.22) 100%
    ) !important;
  backdrop-filter: blur(10px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.16) !important;
  border-bottom-color: rgba(126, 255, 225, 0.055) !important;
  box-shadow:
    inset 0 -1px 0 rgba(126, 255, 225, 0.045),
    0 10px 34px rgba(0, 0, 0, 0.14) !important;
}

html.dark body nav.fixed.top-0::before,
html.dark body #app > nav.fixed.top-0.left-0.right-0::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
  background:
    linear-gradient(180deg, rgba(0, 42, 38, 0.08), rgba(0, 26, 28, 0.03)),
    radial-gradient(circle at 20% 30%, rgba(0, 255, 196, 0.075), transparent 36%) !important;
}

html.dark body nav.fixed.top-0::after,
html.dark body #app > nav.fixed.top-0.left-0.right-0::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -24px !important;
  height: 28px !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(2, 28, 27, 0.18), rgba(2, 28, 27, 0)) !important;
  box-shadow: none !important;
  border: 0 !important;
}

html.dark body nav.fixed.top-0 > .container,
html.dark body #app > nav.fixed.top-0.left-0.right-0 > .container {
  background:
    linear-gradient(180deg, rgba(4, 28, 28, 0.56), rgba(5, 32, 32, 0.44)) !important;
  backdrop-filter: blur(16px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.18) !important;
}

@media (max-width: 1023px) {
  html.dark body nav.fixed.top-0,
  html.dark body #app > nav.fixed.top-0.left-0.right-0 {
    background:
      linear-gradient(180deg, rgba(2, 28, 27, 0.38), rgba(3, 28, 28, 0.24)) !important;
    backdrop-filter: blur(10px) saturate(1.16) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.16) !important;
  }
}