/* Trespassing NewAPI custom global background.
   Keeps New API/Semi UI surfaces readable while letting the chosen image show on all pages. */
:root {
  --tres-bg-image: url('/newapi-custom/home-bg.webp');
  --tres-page-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.68) 48%, rgba(255, 255, 255, 0.74) 100%);
  --tres-surface: rgba(255, 255, 255, 0.78);
  --tres-surface-strong: rgba(255, 255, 255, 0.88);
  --tres-surface-soft: rgba(255, 255, 255, 0.62);
  --tres-border: rgba(255, 255, 255, 0.54);
  --tres-shadow: 0 18px 48px rgba(31, 41, 55, 0.10);
}

html,
body,
#root {
  min-height: 100%;
  background: var(--tres-page-overlay), var(--tres-bg-image) center top / cover fixed no-repeat !important;
}

body {
  min-height: 100vh;
}

/* Make only the page/layout shell transparent so the background is not blocked. */
#root,
#root > div,
#root .semi-layout,
#root .semi-layout-content,
#root main,
#root .min-h-screen,
#root .h-screen {
  background: transparent !important;
}

/* Homepage hero: keep the existing dramatic darker cover treatment. */
.border-semi-color-border.min-h-\[500px\].relative {
  min-height: calc(100vh - 64px) !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
  background-image:
    radial-gradient(circle at 50% 18%, rgba(255, 214, 146, 0.24), transparent 30%),
    linear-gradient(180deg, rgba(5, 7, 12, 0.38) 0%, rgba(5, 7, 12, 0.55) 46%, rgba(5, 7, 12, 0.78) 100%),
    var(--tres-bg-image) !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
}
.border-semi-color-border.min-h-\[500px\].relative .blur-ball { display: none !important; }
.border-semi-color-border.min-h-\[500px\].relative h1,
.border-semi-color-border.min-h-\[500px\].relative p,
.border-semi-color-border.min-h-\[500px\].relative .semi-typography {
  color: rgba(255, 255, 255, 0.94) !important;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.72);
}
.border-semi-color-border.min-h-\[500px\].relative .shine-text {
  background: linear-gradient(100deg, #ffffff 0%, #f8ddb0 38%, #ffffff 72%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.75));
}
.border-semi-color-border.min-h-\[500px\].relative .semi-input-wrapper,
.border-semi-color-border.min-h-\[500px\].relative .semi-button { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); }
.border-semi-color-border.min-h-\[500px\].relative .semi-input-wrapper {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@media (max-width: 768px) {
  .border-semi-color-border.min-h-\[500px\].relative {
    min-height: 680px !important;
    background-position: center top !important;
  }
}

/* Header/sidebar keep the original clean New API structure, but become glassy. */
.semi-layout-header,
header.sticky.top-0 {
  background: var(--tres-surface-strong) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
  color: rgb(28, 31, 35) !important;
  border-bottom: 1px solid var(--tres-border) !important;
  box-shadow: 0 8px 28px rgba(31, 41, 55, 0.06) !important;
}

.semi-layout-sider,
aside,
#root nav[aria-label],
#root .semi-navigation {
  background: var(--tres-surface-strong) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
  border-color: var(--tres-border) !important;
}

#root .semi-navigation-list,
#root .semi-navigation-item,
#root .semi-navigation-sub-wrap,
#root aside .bg-transparent {
  background: transparent !important;
}

/* Dashboard cards/tables/panels: translucent surfaces, same radius/density as original. */
#root .semi-card,
#root .semi-table-wrapper,
#root .semi-table-container,
#root .semi-table,
#root .semi-tabs,
#root .semi-list,
#root .semi-collapse,
#root .semi-descriptions,
#root .semi-modal-content,
#root .semi-drawer-content,
#root .semi-sidesheet-content,
#root .semi-popover-content,
#root .semi-dropdown,
#root .border-semi-color-border.bg-semi-color-bg-0,
#root .border-semi-color-border.bg-white,
#root .border-semi-color-border.rounded-lg,
#root .border-semi-color-border.rounded-xl,
#root .border-semi-color-border.rounded-2xl,
#root .border-semi-color-border.rounded-3xl {
  background-color: var(--tres-surface) !important;
  backdrop-filter: blur(14px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
  border-color: var(--tres-border) !important;
  box-shadow: var(--tres-shadow) !important;
}

/* Avoid opaque white strips inside cards/tables while preserving text/chart readability. */
#root .semi-card-header,
#root .semi-card-body,
#root .semi-tabs-bar,
#root .semi-table-thead > .semi-table-row > .semi-table-row-head,
#root .semi-table-thead > tr > th,
#root .semi-table-tbody > .semi-table-row > .semi-table-row-cell,
#root .semi-table-tbody > tr > td,
#root .semi-collapse-header,
#root .semi-collapse-content,
#root .semi-list-item,
#root .semi-empty,
#root .semi-descriptions-item {
  background-color: transparent !important;
}

/* Inputs/selects stay slightly stronger so forms remain easy to read. */
#root .semi-input-wrapper,
#root .semi-select-selection,
#root .semi-select,
#root .semi-textarea-wrapper,
#root .semi-datepicker,
#root .semi-timepicker,
#root .semi-tree-select-selection {
  background-color: rgba(255, 255, 255, 0.90) !important;
  border-color: rgba(148, 163, 184, 0.34) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Keep selected/sidebar highlight recognizable instead of turning it into generic glass. */
#root .semi-navigation-item-selected,
#root [class*='bg-blue'],
#root [class*='bg-primary'] {
  box-shadow: none !important;
}

/* Dark theme version. */
html.dark,
html.dark body,
html.dark #root {
  --tres-page-overlay: linear-gradient(180deg, rgba(9, 9, 11, 0.82) 0%, rgba(9, 9, 11, 0.72) 50%, rgba(9, 9, 11, 0.80) 100%);
  --tres-surface: rgba(24, 24, 27, 0.76);
  --tres-surface-strong: rgba(24, 24, 27, 0.86);
  --tres-surface-soft: rgba(24, 24, 27, 0.62);
  --tres-border: rgba(255, 255, 255, 0.10);
  --tres-shadow: 0 18px 48px rgba(0, 0, 0, 0.26);
  background: var(--tres-page-overlay), var(--tres-bg-image) center top / cover fixed no-repeat !important;
}

html.dark .semi-layout-header,
html.dark header.sticky.top-0,
html.dark .semi-layout-sider,
html.dark aside,
html.dark #root nav[aria-label],
html.dark #root .semi-navigation {
  background: var(--tres-surface-strong) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  border-color: var(--tres-border) !important;
}

html.dark #root .semi-card,
html.dark #root .semi-table-wrapper,
html.dark #root .semi-table-container,
html.dark #root .semi-table,
html.dark #root .semi-tabs,
html.dark #root .semi-list,
html.dark #root .semi-collapse,
html.dark #root .semi-descriptions,
html.dark #root .semi-modal-content,
html.dark #root .semi-drawer-content,
html.dark #root .semi-sidesheet-content,
html.dark #root .semi-popover-content,
html.dark #root .semi-dropdown,
html.dark #root .border-semi-color-border.bg-semi-color-bg-0,
html.dark #root .border-semi-color-border.bg-white,
html.dark #root .border-semi-color-border.rounded-lg,
html.dark #root .border-semi-color-border.rounded-xl,
html.dark #root .border-semi-color-border.rounded-2xl,
html.dark #root .border-semi-color-border.rounded-3xl {
  background-color: var(--tres-surface) !important;
  border-color: var(--tres-border) !important;
}

html.dark #root .semi-input-wrapper,
html.dark #root .semi-select-selection,
html.dark #root .semi-select,
html.dark #root .semi-textarea-wrapper,
html.dark #root .semi-datepicker,
html.dark #root .semi-timepicker,
html.dark #root .semi-tree-select-selection {
  background-color: rgba(39, 39, 42, 0.86) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Coverage pass: sidebar shell, chart canvases and fade overlays were still too white. */
:root {
  --tres-page-overlay: linear-gradient(180deg, rgba(255, 255, 255, 0.66) 0%, rgba(255, 255, 255, 0.50) 48%, rgba(255, 255, 255, 0.58) 100%);
  --tres-surface: rgba(255, 255, 255, 0.66);
  --tres-surface-strong: rgba(255, 255, 255, 0.76);
}

#root .sidebar-container,
#root .sidebar-collapse-button {
  background: var(--tres-surface-strong) !important;
  backdrop-filter: blur(18px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
  border-color: var(--tres-border) !important;
}

#root .card-content-fade-indicator {
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.66)) !important;
}

/* VChart/VisActor paints some charts onto canvas with a white pixel background.
   Multiply removes the white block visually while preserving axes and series colors. */
#root canvas[id^="visactor"] {
  mix-blend-mode: multiply;
}

html.dark #root .sidebar-container,
html.dark #root .sidebar-collapse-button {
  background: var(--tres-surface-strong) !important;
  border-color: var(--tres-border) !important;
}

html.dark #root .card-content-fade-indicator {
  background-image: linear-gradient(rgba(24, 24, 27, 0), rgba(24, 24, 27, 0.72)) !important;
}

html.dark #root canvas[id^="visactor"] {
  mix-blend-mode: normal;
}

/* Header transparency pass: make the top navigation show the page background. */
:root {
  --tres-header-surface: rgba(255, 255, 255, 0.38);
}

#root .semi-layout-header,
#root header.sticky.top-0,
#root header[class*="bg-white"],
#root header[class*="dark:bg-zinc"] {
  background: var(--tres-header-surface) !important;
  background-color: var(--tres-header-surface) !important;
  backdrop-filter: blur(16px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.08) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 8px 24px rgba(31, 41, 55, 0.045) !important;
}

html.dark {
  --tres-header-surface: rgba(24, 24, 27, 0.42);
}

/* Final header pass: paint the same fixed background into the navbar itself,
   so the top 64px no longer reads as a white strip even under light overlays. */
#root .semi-layout-header,
#root header.sticky.top-0,
#root header[class*="bg-white"],
#root header[class*="dark:bg-zinc"] {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.10)),
    var(--tres-bg-image) center top / cover fixed no-repeat !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.dark #root .semi-layout-header,
html.dark #root header.sticky.top-0,
html.dark #root header[class*="bg-white"],
html.dark #root header[class*="dark:bg-zinc"] {
  background:
    linear-gradient(90deg, rgba(24, 24, 27, 0.36), rgba(24, 24, 27, 0.28)),
    var(--tres-bg-image) center top / cover fixed no-repeat !important;
  background-color: transparent !important;
}

/* Keep navbar text readable after making it image-transparent. */
#root .semi-layout-header,
#root .semi-layout-header a,
#root .semi-layout-header span,
#root .semi-layout-header .semi-typography,
#root header.sticky.top-0,
#root header.sticky.top-0 a,
#root header.sticky.top-0 span,
#root header.sticky.top-0 .semi-typography {
  color: rgba(255, 255, 255, 0.94) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

#root .semi-layout-header svg,
#root header.sticky.top-0 svg {
  color: rgba(255, 255, 255, 0.92) !important;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45));
}

/* Navbar readable frosted-glass fix: override the too-transparent image header. */
#root .semi-layout-header,
#root header.sticky.top-0,
#root header[class*="bg-white"],
#root header[class*="dark:bg-zinc"] {
  background: rgba(255, 255, 255, 0.68) !important;
  background-color: rgba(255, 255, 255, 0.68) !important;
  background-image: none !important;
  backdrop-filter: blur(18px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.16) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.42) !important;
  box-shadow: 0 8px 28px rgba(31, 41, 55, 0.08) !important;
}

#root .semi-layout-header,
#root .semi-layout-header a,
#root .semi-layout-header span,
#root .semi-layout-header .semi-typography,
#root header.sticky.top-0,
#root header.sticky.top-0 a,
#root header.sticky.top-0 span,
#root header.sticky.top-0 .semi-typography {
  color: rgb(24, 24, 27) !important;
  text-shadow: none !important;
}

#root .semi-layout-header svg,
#root header.sticky.top-0 svg {
  color: rgb(39, 39, 42) !important;
  filter: none !important;
}

html.dark #root .semi-layout-header,
html.dark #root header.sticky.top-0,
html.dark #root header[class*="bg-white"],
html.dark #root header[class*="dark:bg-zinc"] {
  background: rgba(24, 24, 27, 0.72) !important;
  background-color: rgba(24, 24, 27, 0.72) !important;
  background-image: none !important;
  color: rgba(255, 255, 255, 0.92) !important;
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark #root .semi-layout-header a,
html.dark #root .semi-layout-header span,
html.dark #root .semi-layout-header .semi-typography,
html.dark #root header.sticky.top-0 a,
html.dark #root header.sticky.top-0 span,
html.dark #root header.sticky.top-0 .semi-typography,
html.dark #root .semi-layout-header svg,
html.dark #root header.sticky.top-0 svg {
  color: rgba(255, 255, 255, 0.92) !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Navbar frosted-glass tune: match the user's reference image.
   Semi-transparent gray/white gradient + strong blur, while keeping text readable. */
#root .semi-layout-header,
#root header.sticky.top-0,
#root header[class*="bg-white"],
#root header[class*="dark:bg-zinc"] {
  background:
    linear-gradient(90deg,
      rgba(143, 154, 151, 0.42) 0%,
      rgba(242, 247, 246, 0.34) 48%,
      rgba(146, 160, 162, 0.42) 100%) !important;
  background-color: rgba(230, 236, 235, 0.28) !important;
  background-image:
    linear-gradient(90deg,
      rgba(143, 154, 151, 0.42) 0%,
      rgba(242, 247, 246, 0.34) 48%,
      rgba(146, 160, 162, 0.42) 100%) !important;
  backdrop-filter: blur(26px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.18) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.34) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 8px 26px rgba(31, 41, 55, 0.055) !important;
}

#root .semi-layout-header,
#root .semi-layout-header a,
#root .semi-layout-header span,
#root .semi-layout-header .semi-typography,
#root header.sticky.top-0,
#root header.sticky.top-0 a,
#root header.sticky.top-0 span,
#root header.sticky.top-0 .semi-typography {
  color: rgb(24, 24, 27) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.26) !important;
}

#root .semi-layout-header svg,
#root header.sticky.top-0 svg {
  color: rgb(39, 39, 42) !important;
  filter: none !important;
}

html.dark #root .semi-layout-header,
html.dark #root header.sticky.top-0,
html.dark #root header[class*="bg-white"],
html.dark #root header[class*="dark:bg-zinc"] {
  background:
    linear-gradient(90deg,
      rgba(24, 24, 27, 0.48) 0%,
      rgba(63, 63, 70, 0.34) 50%,
      rgba(24, 24, 27, 0.48) 100%) !important;
  background-color: rgba(24, 24, 27, 0.34) !important;
  background-image:
    linear-gradient(90deg,
      rgba(24, 24, 27, 0.48) 0%,
      rgba(63, 63, 70, 0.34) 50%,
      rgba(24, 24, 27, 0.48) 100%) !important;
}

/* Reference clone: top navbar from http://124.220.154.138:3000/
   Real inspected style: transparent header, backdrop blur(16px), no border/shadow, dark readable text. */
#root .semi-layout-header,
#root header.sticky.top-0,
#root header[class*="bg-white"],
#root header[class*="dark:bg-zinc"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  color: rgb(28, 31, 35) !important;
}

#root .semi-layout-header > *,
#root header.sticky.top-0 > *,
#root .semi-layout-header nav,
#root header.sticky.top-0 nav {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

#root .semi-layout-header *,
#root header.sticky.top-0 * {
  text-shadow: none !important;
}

#root .semi-layout-header a,
#root .semi-layout-header span,
#root .semi-layout-header .semi-typography,
#root header.sticky.top-0 a,
#root header.sticky.top-0 span,
#root header.sticky.top-0 .semi-typography {
  color: rgb(28, 31, 35) !important;
}

#root .semi-layout-header a,
#root header.sticky.top-0 a,
#root .semi-layout-header nav span,
#root header.sticky.top-0 nav span {
  font-weight: 600 !important;
}

#root .semi-layout-header button,
#root header.sticky.top-0 button {
  background-color: rgba(46, 50, 56, 0.05) !important;
  background-image: none !important;
  color: rgba(28, 31, 35, 0.8) !important;
  box-shadow: none !important;
}

#root .semi-layout-header button span,
#root header.sticky.top-0 button span,
#root .semi-layout-header button .semi-typography,
#root header.sticky.top-0 button .semi-typography {
  color: rgba(28, 31, 35, 0.8) !important;
}

#root .semi-layout-header svg,
#root header.sticky.top-0 svg {
  color: rgba(28, 31, 35, 0.8) !important;
  filter: none !important;
}

html.dark #root .semi-layout-header,
html.dark #root header.sticky.top-0,
html.dark #root header[class*="bg-white"],
html.dark #root header[class*="dark:bg-zinc"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.92) !important;
}

html.dark #root .semi-layout-header a,
html.dark #root .semi-layout-header span,
html.dark #root .semi-layout-header .semi-typography,
html.dark #root header.sticky.top-0 a,
html.dark #root header.sticky.top-0 span,
html.dark #root header.sticky.top-0 .semi-typography,
html.dark #root .semi-layout-header svg,
html.dark #root header.sticky.top-0 svg {
  color: rgba(255, 255, 255, 0.92) !important;
  filter: none !important;
}

html.dark #root .semi-layout-header button,
html.dark #root header.sticky.top-0 button {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.86) !important;
}

/* Homepage unified light glass pass: remove the dark hero/footer treatment.
   The home page now uses the same global light frosted background from top to bottom. */
#root .border-semi-color-border.min-h-\[500px\].relative {
  background: rgba(255, 255, 255, 0.18) !important;
  background-image: none !important;
  backdrop-filter: blur(12px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.08) !important;
  border-bottom-color: rgba(255, 255, 255, 0.34) !important;
}

#root .border-semi-color-border.min-h-\[500px\].relative h1,
#root .border-semi-color-border.min-h-\[500px\].relative p,
#root .border-semi-color-border.min-h-\[500px\].relative .semi-typography {
  color: rgb(24, 24, 27) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}

#root .border-semi-color-border.min-h-\[500px\].relative .shine-text {
  background: linear-gradient(100deg, #111827 0%, #374151 42%, #111827 78%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  filter: none !important;
}

#root .border-semi-color-border.min-h-\[500px\].relative a,
#root .border-semi-color-border.min-h-\[500px\].relative a .semi-typography {
  color: rgb(0, 100, 250) !important;
  text-shadow: none !important;
}

#root .border-semi-color-border.min-h-\[500px\].relative .semi-input-wrapper {
  background: rgba(255, 255, 255, 0.68) !important;
  backdrop-filter: blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
  box-shadow: 0 12px 34px rgba(31, 41, 55, 0.10) !important;
}

#root .border-semi-color-border.min-h-\[500px\].relative .semi-button {
  box-shadow: 0 10px 28px rgba(0, 100, 250, 0.20) !important;
}

#root .semi-layout-footer,
#root footer.relative.h-auto {
  position: relative !important;
  background: rgba(255, 255, 255, 0.20) !important;
  background-image: none !important;
  backdrop-filter: blur(12px) saturate(1.08) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.08) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.34) !important;
  box-shadow: none !important;
  color: rgba(24, 24, 27, 0.78) !important;
}

#root .semi-layout-footer *,
#root footer.relative.h-auto * {
  color: rgba(24, 24, 27, 0.78) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

#root .semi-layout-footer a,
#root footer.relative.h-auto a {
  color: rgb(0, 100, 250) !important;
  text-shadow: none !important;
}

html.dark #root .border-semi-color-border.min-h-\[500px\].relative,
html.dark #root .semi-layout-footer,
html.dark #root footer.relative.h-auto {
  background: rgba(24, 24, 27, 0.42) !important;
  color: rgba(255, 255, 255, 0.90) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html.dark #root .border-semi-color-border.min-h-\[500px\].relative h1,
html.dark #root .border-semi-color-border.min-h-\[500px\].relative p,
html.dark #root .border-semi-color-border.min-h-\[500px\].relative .semi-typography,
html.dark #root .semi-layout-footer *,
html.dark #root footer.relative.h-auto * {
  color: rgba(255, 255, 255, 0.90) !important;
  text-shadow: none !important;
}

/* Reference clone for homepage middle + footer.
   From http://124.220.154.138:3000/: app-layout owns the fixed image/grid/soft light overlay;
   hero and footer stay transparent so scrolling has one continuous background. */
#root .app-layout.semi-layout,
#root .app-layout.app-official-bg.semi-layout,
#root section.app-layout {
  background:
    linear-gradient(rgba(15, 23, 42, 0.024) 1px, rgba(0, 0, 0, 0) 1px) 0 0 / 36px 36px fixed,
    linear-gradient(90deg, rgba(15, 23, 42, 0.024) 1px, rgba(0, 0, 0, 0) 1px) 0 0 / 36px 36px fixed,
    linear-gradient(180deg, rgba(238, 245, 255, 0.18) 0%, rgba(246, 248, 251, 0.44) 50%, rgba(246, 248, 251, 0.82) 100%) center top / cover fixed no-repeat,
    var(--tres-bg-image) center top / cover fixed no-repeat,
    rgb(238, 244, 251) !important;
  overflow-x: hidden !important;
}

#root .app-layout.semi-layout > .semi-layout,
#root .app-layout.semi-layout .semi-layout-content,
#root .app-layout.semi-layout .w-full.overflow-x-hidden,
#root .app-layout.semi-layout .w-full.border-b.border-semi-color-border.min-h-\[500px\].relative,
#root .app-layout.semi-layout .border-semi-color-border.min-h-\[500px\].relative,
#root .app-layout.semi-layout .semi-layout-footer,
#root .app-layout.semi-layout footer.relative.h-auto {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

#root .app-layout.semi-layout .w-full.border-b.border-semi-color-border.min-h-\[500px\].relative,
#root .app-layout.semi-layout .border-semi-color-border.min-h-\[500px\].relative {
  border-bottom-color: rgba(15, 23, 42, 0.08) !important;
}

#root .app-layout.semi-layout .semi-layout-footer,
#root .app-layout.semi-layout footer.relative.h-auto {
  border-top: 0 !important;
  color: rgba(28, 31, 35, 0.72) !important;
}

#root .app-layout.semi-layout .semi-layout-footer *,
#root .app-layout.semi-layout footer.relative.h-auto * {
  color: rgba(28, 31, 35, 0.72) !important;
  text-shadow: none !important;
}

#root .app-layout.semi-layout .semi-layout-footer a,
#root .app-layout.semi-layout footer.relative.h-auto a {
  color: rgb(0, 100, 250) !important;
}

#root .app-layout.semi-layout .border-semi-color-border.min-h-\[500px\].relative h1,
#root .app-layout.semi-layout .border-semi-color-border.min-h-\[500px\].relative p,
#root .app-layout.semi-layout .border-semi-color-border.min-h-\[500px\].relative .semi-typography {
  color: rgb(28, 31, 35) !important;
  text-shadow: none !important;
}

#root .app-layout.semi-layout .border-semi-color-border.min-h-\[500px\].relative .shine-text {
  background: linear-gradient(100deg, #111827 0%, #1f2937 45%, #111827 78%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: none !important;
}

html.dark #root .app-layout.semi-layout,
html.dark #root .app-layout.app-official-bg.semi-layout,
html.dark #root section.app-layout {
  background:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, rgba(0, 0, 0, 0) 1px) 0 0 / 36px 36px fixed,
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, rgba(0, 0, 0, 0) 1px) 0 0 / 36px 36px fixed,
    linear-gradient(180deg, rgba(9, 9, 11, 0.44) 0%, rgba(9, 9, 11, 0.58) 55%, rgba(9, 9, 11, 0.72) 100%) center top / cover fixed no-repeat,
    var(--tres-bg-image) center top / cover fixed no-repeat,
    rgb(9, 9, 11) !important;
}

/* New background image + reference-style readable hero text.
   Reference site uses dark Semi text over a soft light overlay; no white title text. */
:root {
  --tres-bg-image: url('/newapi-custom/home-bg.webp?v=20260516m');
}

#root .app-layout.semi-layout,
#root .app-layout.app-official-bg.semi-layout,
#root section.app-layout {
  background:
    linear-gradient(rgba(15, 23, 42, 0.024) 1px, rgba(0, 0, 0, 0) 1px) 0 0 / 36px 36px fixed,
    linear-gradient(90deg, rgba(15, 23, 42, 0.024) 1px, rgba(0, 0, 0, 0) 1px) 0 0 / 36px 36px fixed,
    linear-gradient(180deg, rgba(238, 245, 255, 0.24) 0%, rgba(246, 248, 251, 0.46) 48%, rgba(246, 248, 251, 0.82) 100%) center top / cover fixed no-repeat,
    var(--tres-bg-image) center top / cover fixed no-repeat,
    rgb(238, 244, 251) !important;
}

#root .app-layout.semi-layout .border-semi-color-border.min-h-\[500px\].relative h1 {
  color: rgb(28, 31, 35) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

#root .app-layout.semi-layout .border-semi-color-border.min-h-\[500px\].relative .shine-text {
  background: linear-gradient(90deg,
    rgb(28, 31, 35) 0%,
    rgb(28, 31, 35) 40%,
    rgba(255, 255, 255, 0.92) 50%,
    rgb(28, 31, 35) 60%,
    rgb(28, 31, 35) 100%) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
  filter: none !important;
}

#root .app-layout.semi-layout .border-semi-color-border.min-h-\[500px\].relative p,
#root .app-layout.semi-layout .border-semi-color-border.min-h-\[500px\].relative .semi-typography {
  color: rgba(28, 31, 35, 0.82) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* Navbar: keep the reference transparent blur, but add the same readable dark text treatment. */
#root .semi-layout-header,
#root header.sticky.top-0,
#root header[class*="bg-white"],
#root header[class*="dark:bg-zinc"] {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

#root .semi-layout-header a,
#root .semi-layout-header span,
#root .semi-layout-header .semi-typography,
#root header.sticky.top-0 a,
#root header.sticky.top-0 span,
#root header.sticky.top-0 .semi-typography {
  color: rgb(28, 31, 35) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

#root .semi-layout-header nav span,
#root header.sticky.top-0 nav span,
#root .semi-layout-header a,
#root header.sticky.top-0 a {
  font-weight: 600 !important;
}

/* Readability tune for the new darker top background.
   Keep reference-style blur, but restore the intended subtle bg-white/75 glass feel. */
#root .semi-layout-header,
#root header.sticky.top-0,
#root header[class*="bg-white"],
#root header[class*="dark:bg-zinc"] {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.34) 0%,
    rgba(255, 255, 255, 0.24) 46%,
    rgba(255, 255, 255, 0.30) 100%) !important;
  background-color: rgba(255, 255, 255, 0.26) !important;
  backdrop-filter: blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
}

#root .semi-layout-header a,
#root .semi-layout-header span,
#root .semi-layout-header .semi-typography,
#root header.sticky.top-0 a,
#root header.sticky.top-0 span,
#root header.sticky.top-0 .semi-typography {
  color: rgb(17, 24, 39) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42) !important;
}

#root .semi-layout-header svg,
#root header.sticky.top-0 svg {
  color: rgba(17, 24, 39, 0.82) !important;
  filter: none !important;
}

/* Avoid the animated shine turning a title character nearly white on bright areas. */
#root .app-layout.semi-layout .border-semi-color-border.min-h-\[500px\].relative .shine-text {
  background: linear-gradient(90deg,
    rgb(17, 24, 39) 0%,
    rgb(17, 24, 39) 42%,
    rgba(55, 65, 81, 0.72) 50%,
    rgb(17, 24, 39) 58%,
    rgb(17, 24, 39) 100%) !important;
  background-size: 200% 100% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Background swap: use the latest user-provided image. */
:root {
  --tres-bg-image: url('/newapi-custom/home-bg.webp?v=20260516o');
}

/* Background swap p: same user image, preserved original 3840x1968 aspect ratio. */
:root {
  --tres-bg-image: url('/newapi-custom/home-bg.webp?v=20260516p');
}