/* Balanced dark hierarchy: dark, but neither tinted nor flattened into black. */
body:not(.theme-light) {
  --bg: #101318 !important;
  --panel: #1b2026 !important;
  --panel2: #14191f !important;
  --surface-main: #1b2026 !important;
  --surface-sub: #151a20 !important;
  --surface-raised: #232a31 !important;
  --surface-input: #11161b !important;
  --text: #e8eaed !important;
  --muted: #a7adb6 !important;
  --line: #363d46 !important;
  --edge-soft: #3d4650 !important;
  --edge-strong: color-mix(in srgb, var(--accent) 24%, #505a65) !important;
  --accent-soft: color-mix(in srgb, var(--accent) 10%, #20262d) !important;
  background-color: var(--bg) !important;
}

body:not(.theme-light) .hero,
body:not(.theme-light) .nav,
body:not(.theme-light) .card,
body:not(.theme-light) .topProjectStrip,
body:not(.theme-light) .inventoryPage,
body:not(.theme-light) .profileLibraryPage,
body:not(.theme-light) .signedOutInventoryHero {
  background-color: var(--surface-main) !important;
}

body:not(.theme-light) .settingsSection,
body:not(.theme-light) .inventoryAddForm,
body:not(.theme-light) .inventoryTableSection,
body:not(.theme-light) .inventoryFilters,
body:not(.theme-light) .inventoryBenefitCard,
body:not(.theme-light) .profileCatalogPanel,
body:not(.theme-light) .materialSummaryPanel,
body:not(.theme-light) .filamentRow,
body:not(.theme-light) .costSummaryPanel {
  background-color: var(--surface-sub) !important;
}

/* Register the theme mask exactly to the rendered square logo image. */
.appLogo {
  isolation: isolate !important;
}

.appLogoImage {
  transform: translateX(10.4%) !important;
  position: relative !important;
  z-index: 0 !important;
}

.logoThemeMask {
  inset: 0 auto auto 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  transform-origin: 50% 50% !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-position: 50% 50% !important;
  mask-position: 50% 50% !important;
  -webkit-mask-image: url("images/logo-theme-mask-current.svg") !important;
  mask-image: url("images/logo-theme-mask-current.svg") !important;
}

.logoPriceOverlay {
  transform: translateX(10.4%) !important;
}

/* Dedicated full-surface glare layer; independent of price-column pseudo effects. */
.topProjectStrip::after {
  display: none !important;
}

.topProjectStrip .projectFullGlare {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: .58;
  background-image: linear-gradient(108deg,
    transparent 0%,
    transparent 30%,
    color-mix(in srgb, var(--accent) 7%, transparent) 40%,
    rgba(255,255,255,.12) 49%,
    color-mix(in srgb, var(--accent2) 8%, transparent) 58%,
    transparent 69%,
    transparent 100%);
  background-size: 240% 100%;
  background-position: 130% 0;
  animation: projectFullSurfaceGlare 5.8s cubic-bezier(.22,.61,.36,1) infinite;
}

.topProjectStrip > :not(.projectFullGlare) {
  position: relative;
  z-index: 2;
}

@keyframes projectFullSurfaceGlare {
  0%, 14% { background-position: 130% 0; }
  52%, 100% { background-position: -130% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .topProjectStrip .projectFullGlare { animation: none !important; opacity: 0 !important; }
}