:root {
  --acrylic-surface: oklch(0.985 0.008 190 / 0.5);
  --acrylic-surface-strong: oklch(0.985 0.008 190 / 0.68);
  --acrylic-surface-soft: oklch(0.97 0.012 200 / 0.32);
  --acrylic-card: oklch(0.985 0.008 190 / 0.74);
  --acrylic-control: oklch(0.99 0.006 190 / 0.76);
  --acrylic-hover: oklch(0.96 0.025 185 / 0.72);
  --acrylic-border: oklch(0.78 0.018 200 / 0.42);
  --acrylic-shadow: 0 8px 24px oklch(0.2 0.025 230 / 0.1);
}

html.dark {
  --acrylic-surface: oklch(0.2 0.025 235 / 0.5);
  --acrylic-surface-strong: oklch(0.18 0.025 240 / 0.7);
  --acrylic-surface-soft: oklch(0.24 0.03 235 / 0.34);
  --acrylic-card: oklch(0.2 0.025 235 / 0.76);
  --acrylic-control: oklch(0.23 0.025 235 / 0.78);
  --acrylic-hover: oklch(0.31 0.04 220 / 0.7);
  --acrylic-border: oklch(0.7 0.025 220 / 0.28);
  --acrylic-shadow: 0 10px 28px oklch(0.06 0.02 250 / 0.28);
}

html.acrylic-enabled .card,
html.acrylic-enabled .card-glass,
html.acrylic-enabled #app [class*="shadow-xl"][class*="bg-"] {
  background-color: var(--acrylic-card) !important;
  border-color: var(--acrylic-border) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: var(--acrylic-shadow) !important;
}

html.acrylic-enabled #app [role="menu"],
html.acrylic-enabled #app [role="listbox"] {
  background-color: var(--acrylic-surface-strong) !important;
  border-color: var(--acrylic-border) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
  backdrop-filter: blur(12px) saturate(140%) !important;
  box-shadow: var(--acrylic-shadow) !important;
}

/* backdrop-filter creates a stacking context. Keep open cards and overlays above older surfaces. */
html.acrylic-enabled .card:has(.select-dropdown),
html.acrylic-enabled .card:has(.select-trigger-open) {
  position: relative !important;
  z-index: 2147482000 !important;
}

html.acrylic-enabled .select-dropdown {
  z-index: 2147482500 !important;
}

html.acrylic-enabled .modal-overlay {
  z-index: 2147483000 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.acrylic-enabled .select-dropdown-portal,
html.acrylic-enabled body > [role="listbox"] {
  z-index: 2147483200 !important;
  background-color: var(--acrylic-surface-strong) !important;
  border-color: var(--acrylic-border) !important;
  -webkit-backdrop-filter: blur(10px) saturate(135%) !important;
  backdrop-filter: blur(10px) saturate(135%) !important;
  box-shadow: var(--acrylic-shadow) !important;
}

html.acrylic-enabled .sidebar,
html.acrylic-enabled .glass {
  background-color: var(--acrylic-surface-strong) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
}

html.acrylic-enabled #app [class~="bg-white"],
html.acrylic-enabled #app [class*="bg-white/"],
html.acrylic-enabled #app [class~="bg-gray-50"],
html.acrylic-enabled #app [class*="bg-gray-50/"],
html.acrylic-enabled #app [class~="bg-gray-100"],
html.acrylic-enabled #app [class*="bg-gray-100/"],
html.acrylic-enabled #app [class~="bg-dark-700"],
html.acrylic-enabled #app [class*="bg-dark-700/"],
html.acrylic-enabled #app [class~="bg-dark-800"],
html.acrylic-enabled #app [class*="bg-dark-800/"],
html.acrylic-enabled #app [class~="bg-dark-900"],
html.acrylic-enabled #app [class*="bg-dark-900/"],
html.acrylic-enabled #app [class~="bg-dark-950"] {
  background-color: var(--acrylic-surface-soft) !important;
}

html.acrylic-enabled .input,
html.acrylic-enabled #app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
html.acrylic-enabled #app select,
html.acrylic-enabled #app textarea {
  background-color: var(--acrylic-control) !important;
  border-color: var(--acrylic-border) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.acrylic-enabled #app table,
html.acrylic-enabled #app tbody {
  background-color: transparent !important;
}

html.acrylic-enabled #app thead,
html.acrylic-enabled #app tbody tr {
  background-color: var(--acrylic-surface-soft) !important;
}

html.acrylic-enabled #app tbody tr:hover,
html.acrylic-enabled .sidebar-link:hover {
  background-color: var(--acrylic-hover) !important;
}

html.acrylic-enabled #app [class*="border-gray-"],
html.acrylic-enabled #app [class*="border-dark-"] {
  border-color: var(--acrylic-border) !important;
}

.acrylic-toggle-host {
  position: relative !important;
}

#acrylic-mode-toggle {
  position: absolute;
  top: 18px;
  right: 7px;
  z-index: 6;
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  color: oklch(0.5 0.025 220);
  background-color: var(--acrylic-surface-strong);
  border: 1px solid var(--acrylic-border);
  border-radius: 9999px;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 5px 16px oklch(0.2 0.02 230 / 0.16);
  cursor: pointer;
  transition: color 180ms cubic-bezier(0.22, 1, 0.36, 1), background-color 180ms cubic-bezier(0.22, 1, 0.36, 1), transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

#acrylic-mode-toggle:hover {
  color: oklch(0.48 0.12 185);
  background-color: var(--acrylic-hover);
  transform: translateY(-1px);
}

#acrylic-mode-toggle:focus-visible {
  outline: 2px solid oklch(0.68 0.14 185);
  outline-offset: 2px;
}

#acrylic-mode-toggle[data-enabled="true"] {
  color: oklch(0.6 0.16 180);
}

.acrylic-toggle__icon {
  position: relative;
  display: block;
  width: 15px;
  height: 15px;
}

.acrylic-toggle__icon::before,
.acrylic-toggle__icon::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  background-color: var(--acrylic-surface-soft);
}

.acrylic-toggle__icon::before {
  top: 1px;
  left: 1px;
}

.acrylic-toggle__icon::after {
  right: 1px;
  bottom: 1px;
}

.acrylic-toggle-host .sidebar-link-collapsed ~ #acrylic-mode-toggle {
  top: 21px;
  right: -1px;
  width: 22px;
  height: 22px;
}

.acrylic-toggle-host .sidebar-link-collapsed ~ #acrylic-mode-toggle .acrylic-toggle__icon {
  transform: scale(0.74);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  html.acrylic-enabled {
    --acrylic-surface: oklch(0.97 0.01 195 / 0.88);
    --acrylic-surface-strong: oklch(0.97 0.01 195 / 0.94);
    --acrylic-surface-soft: oklch(0.96 0.012 200 / 0.78);
    --acrylic-control: oklch(0.98 0.008 195 / 0.9);
  }

  html.dark.acrylic-enabled {
    --acrylic-surface: oklch(0.2 0.025 235 / 0.9);
    --acrylic-surface-strong: oklch(0.17 0.025 240 / 0.95);
    --acrylic-surface-soft: oklch(0.24 0.03 235 / 0.82);
    --acrylic-control: oklch(0.22 0.025 235 / 0.9);
  }
}