/* ============================================================
   MERX — Apple Liquid Glass Theme
   ============================================================
   Place in /public so the browser loads it with correct MIME type.
   Link from main.html:  <link rel="stylesheet" href="/liquid-glass.css">
   
   Every MUI (SUID) class is targeted here so new components
   automatically inherit the look with zero extra code.
   ============================================================ */

/* ---- CSS Custom Properties (design tokens) --------------- */
:root {
  /* Glass surface */
  --glass-bg: rgba(255, 255, 255, 0.45);
  --glass-bg-hover: rgba(255, 255, 255, 0.6);
  --glass-bg-active: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-border-focus: rgba(120, 120, 255, 0.55);
  --glass-shadow: 0 4px 24px 0 rgba(80, 80, 120, 0.10),
                  0 1.5px 6px 0 rgba(80, 80, 120, 0.08);
  --glass-shadow-elevated: 0 8px 40px 0 rgba(80, 80, 120, 0.16),
                           0 2px 10px 0 rgba(80, 80, 120, 0.10);
  --glass-blur: 18px;
  --glass-blur-heavy: 28px;
  --glass-radius: 16px;
  --glass-radius-sm: 10px;
  --glass-radius-lg: 22px;
  --glass-radius-pill: 999px;

  /* Palette */
  --glass-primary: #4a6cf7;
  --glass-primary-light: #7b93fa;
  --glass-primary-dark: #3451c7;
  --glass-secondary: #7c3aed;
  --glass-secondary-light: #a78bfa;
  --glass-error: #ef4444;
  --glass-warning: #f59e0b;
  --glass-success: #10b981;
  --glass-info: #3b82f6;
  --glass-text-primary: #1e1e2e;
  --glass-text-secondary: #5b5b7b;
  --glass-text-disabled: #a0a0b8;
  --glass-divider: rgba(180, 180, 220, 0.25);

  /* Typography */
  --glass-font: 'Arimo', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                Roboto, Helvetica, Arial, sans-serif;
  --glass-font-heading: 'Roboto', var(--glass-font);

  /* Transitions */
  --glass-transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --glass-transition-slow: 0.36s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Global baseline -------------------------------------- */
body {
  font-family: var(--glass-font);
  color: var(--glass-text-primary);
  background: linear-gradient(135deg, #e8eaf6 0%, #f5f3ff 40%, #ede9fe 100%);
  min-height: 100vh;
}

::selection {
  background: rgba(74, 108, 247, 0.25);
}

/* ============================================================
   BUTTONS  (.MuiButton-root)
   ============================================================ */
.MuiButton-root {
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4) !important;
  border-radius: var(--glass-radius-sm) !important;
  text-transform: none !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  transition: all var(--glass-transition) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* Contained buttons */
.MuiButton-contained {
  background: linear-gradient(135deg,
    var(--glass-primary) 0%,
    var(--glass-primary-light) 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
.MuiButton-contained:hover {
  background: linear-gradient(135deg,
    var(--glass-primary-dark) 0%,
    var(--glass-primary) 100%) !important;
  box-shadow: var(--glass-shadow-elevated) !important;
  transform: translateY(-1px);
}
.MuiButton-contained:active {
  transform: translateY(0);
}

/* Contained secondary */
.MuiButton-containedSecondary {
  background: linear-gradient(135deg,
    var(--glass-secondary) 0%,
    var(--glass-secondary-light) 100%) !important;
}
.MuiButton-containedSecondary:hover {
  background: linear-gradient(135deg,
    #6d28d9 0%,
    var(--glass-secondary) 100%) !important;
}

/* Outlined buttons */
.MuiButton-outlined {
  background: var(--glass-bg) !important;
  border: 1.5px solid var(--glass-border) !important;
  color: var(--glass-text-primary) !important;
}
.MuiButton-outlined:hover {
  background: var(--glass-bg-hover) !important;
  border-color: var(--glass-border-focus) !important;
  box-shadow: var(--glass-shadow-elevated) !important;
  transform: translateY(-1px);
}

/* Text buttons */
.MuiButton-text {
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.MuiButton-text:hover {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  box-shadow: none !important;
}

/* ============================================================
   FAB  (.MuiFab-root)
   ============================================================ */
.MuiFab-root {
  background: linear-gradient(135deg,
    var(--glass-primary) 0%,
    var(--glass-primary-light) 100%) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4) !important;
  box-shadow: var(--glass-shadow-elevated) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  transition: all var(--glass-transition) !important;
}
.MuiFab-root:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 12px 40px 0 rgba(74, 108, 247, 0.28) !important;
}

/* ============================================================
   TEXT FIELDS  (.MuiTextField-root, .MuiOutlinedInput-root)
   ============================================================ */
.MuiOutlinedInput-root {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3) !important;
  border-radius: var(--glass-radius-sm) !important;
  transition: all var(--glass-transition) !important;
}
.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
  border-color: rgba(180, 180, 220, 0.4) !important;
  transition: border-color var(--glass-transition) !important;
}
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--glass-primary-light) !important;
}
.MuiOutlinedInput-root.Mui-focused {
  box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.15) !important;
}
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--glass-primary) !important;
  border-width: 2px !important;
}

/* Filled variant */
.MuiFilledInput-root {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
  border-radius: var(--glass-radius-sm) var(--glass-radius-sm) 0 0 !important;
}
.MuiFilledInput-root:hover {
  background: var(--glass-bg-hover) !important;
}

/* Input label */
.MuiInputLabel-root {
  color: var(--glass-text-secondary) !important;
}
.MuiInputLabel-root.Mui-focused {
  color: var(--glass-primary) !important;
}

/* ============================================================
   SELECT  (.MuiSelect-root)
   ============================================================ */
.MuiSelect-select {
  background: transparent !important;
}

/* ============================================================
   CHIP  (.MuiChip-root)
   ============================================================ */
.MuiChip-root {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius-pill) !important;
  box-shadow: var(--glass-shadow) !important;
  transition: all var(--glass-transition) !important;
}
.MuiChip-root:hover {
  background: var(--glass-bg-hover) !important;
  box-shadow: var(--glass-shadow-elevated) !important;
}
.MuiChip-colorPrimary {
  background: linear-gradient(135deg,
    rgba(74, 108, 247, 0.25) 0%,
    rgba(123, 147, 250, 0.20) 100%) !important;
  border-color: rgba(74, 108, 247, 0.3) !important;
  color: var(--glass-primary-dark) !important;
}
.MuiChip-colorSecondary {
  background: linear-gradient(135deg,
    rgba(124, 58, 237, 0.25) 0%,
    rgba(167, 139, 250, 0.20) 100%) !important;
  border-color: rgba(124, 58, 237, 0.3) !important;
  color: #6d28d9 !important;
}

/* ============================================================
   PAPER / CARD  (.MuiPaper-root)
   ============================================================ */
.MuiPaper-root {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.5) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: var(--glass-shadow) !important;
  transition: box-shadow var(--glass-transition) !important;
}
.MuiPaper-elevation2,
.MuiPaper-elevation3,
.MuiPaper-elevation4 {
  box-shadow: var(--glass-shadow-elevated) !important;
}

/* ============================================================
   CARD  (.MuiCard-root)
   ============================================================ */
.MuiCard-root {
  border-radius: var(--glass-radius-lg) !important;
  overflow: hidden;
}

/* ============================================================
   APP BAR  (.MuiAppBar-root)
   ============================================================ */
.MuiAppBar-root {
  background: rgba(255, 255, 255, 0.50) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.6) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow: 0 1px 12px 0 rgba(80, 80, 120, 0.08) !important;
  color: var(--glass-text-primary) !important;
}
.MuiAppBar-root .MuiIconButton-root {
  color: var(--glass-text-primary) !important;
}
.MuiAppBar-root .MuiTypography-root {
  color: var(--glass-text-primary) !important;
}

/* ============================================================
   TOOLBAR  (.MuiToolbar-root)
   ============================================================ */
.MuiToolbar-root {
  color: var(--glass-text-primary) !important;
}

/* ============================================================
   DRAWER  (.MuiDrawer-root)
   ============================================================ */
.MuiDrawer-paper {
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.6) !important;
  border-right: 1px solid var(--glass-border) !important;
  border-radius: 0 !important;
  box-shadow: 4px 0 24px 0 rgba(80, 80, 120, 0.08) !important;
}

/* ============================================================
   DIALOG  (.MuiDialog-root)
   ============================================================ */
.MuiDialog-paper {
  background: rgba(255, 255, 255, 0.65) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.6) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius-lg) !important;
  box-shadow: var(--glass-shadow-elevated) !important;
}
.MuiBackdrop-root {
  background: rgba(30, 30, 46, 0.25) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
}

/* ============================================================
   MENU (dropdown)  (.MuiMenu-paper)
   ============================================================ */
.MuiMenu-paper {
  background: rgba(255, 255, 255, 0.70) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.5) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: var(--glass-shadow-elevated) !important;
}
.MuiMenuItem-root {
  border-radius: var(--glass-radius-sm) !important;
  margin: 2px 6px !important;
  transition: background var(--glass-transition) !important;
}
.MuiMenuItem-root:hover {
  background: var(--glass-bg-hover) !important;
}
.MuiMenuItem-root.Mui-selected {
  background: rgba(74, 108, 247, 0.12) !important;
}
.MuiMenuItem-root.Mui-selected:hover {
  background: rgba(74, 108, 247, 0.18) !important;
}

/* ============================================================
   POPOVER  (.MuiPopover-paper)
   ============================================================ */
.MuiPopover-paper {
  background: rgba(255, 255, 255, 0.68) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.5) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: var(--glass-shadow-elevated) !important;
}

/* ============================================================
   LIST  (.MuiList-root / .MuiListItem-root)
   ============================================================ */
.MuiListItemButton-root {
  border-radius: var(--glass-radius-sm) !important;
  margin: 2px 6px !important;
  transition: background var(--glass-transition) !important;
}
.MuiListItemButton-root:hover {
  background: var(--glass-bg-hover) !important;
}
.MuiListItemButton-root.Mui-selected {
  background: rgba(74, 108, 247, 0.12) !important;
}

/* ============================================================
   ICON BUTTON  (.MuiIconButton-root)
   ============================================================ */
.MuiIconButton-root {
  transition: all var(--glass-transition) !important;
}
.MuiIconButton-root:hover {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* ============================================================
   BADGE  (.MuiBadge-badge)
   ============================================================ */
.MuiBadge-badge {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) !important;
}

/* ============================================================
   ALERT  (.MuiAlert-root)
   ============================================================ */
.MuiAlert-root {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius-sm) !important;
}
.MuiAlert-standardInfo {
  border-left: 4px solid var(--glass-info) !important;
}
.MuiAlert-standardSuccess {
  border-left: 4px solid var(--glass-success) !important;
}
.MuiAlert-standardWarning {
  border-left: 4px solid var(--glass-warning) !important;
}
.MuiAlert-standardError {
  border-left: 4px solid var(--glass-error) !important;
}

/* ============================================================
   DIVIDER  (.MuiDivider-root)
   ============================================================ */
.MuiDivider-root {
  border-color: var(--glass-divider) !important;
}

/* ============================================================
   AVATAR  (.MuiAvatar-root)
   ============================================================ */
.MuiAvatar-root {
  border: 2px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* ============================================================
   TABS  (.MuiTabs-root / .MuiTab-root)
   ============================================================ */
.MuiTabs-root {
  border-radius: var(--glass-radius-sm) !important;
}
.MuiTab-root {
  text-transform: none !important;
  font-weight: 500 !important;
  border-radius: var(--glass-radius-sm) !important;
  transition: all var(--glass-transition) !important;
}
.MuiTab-root:hover {
  background: var(--glass-bg) !important;
}
.MuiTab-root.Mui-selected {
  background: var(--glass-bg-hover) !important;
  backdrop-filter: blur(var(--glass-blur)) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
}
.MuiTabs-indicator {
  background: var(--glass-primary) !important;
  border-radius: 2px !important;
}

/* ============================================================
   SWITCH  (.MuiSwitch-root)
   ============================================================ */
.MuiSwitch-track {
  background: rgba(180, 180, 220, 0.35) !important;
  border-radius: var(--glass-radius-pill) !important;
}
.MuiSwitch-root .Mui-checked + .MuiSwitch-track {
  background: rgba(74, 108, 247, 0.45) !important;
}
.MuiSwitch-thumb {
  box-shadow: var(--glass-shadow) !important;
}

/* ============================================================
   CHECKBOX & RADIO
   ============================================================ */
.MuiCheckbox-root.Mui-checked,
.MuiRadio-root.Mui-checked {
  color: var(--glass-primary) !important;
}

/* ============================================================
   SLIDER  (.MuiSlider-root)
   ============================================================ */
.MuiSlider-track {
  background: linear-gradient(90deg,
    var(--glass-primary) 0%,
    var(--glass-primary-light) 100%) !important;
  border: none !important;
}
.MuiSlider-thumb {
  background: #fff !important;
  border: 2px solid var(--glass-primary) !important;
  box-shadow: var(--glass-shadow) !important;
}
.MuiSlider-thumb:hover {
  box-shadow: 0 0 0 6px rgba(74, 108, 247, 0.15) !important;
}
.MuiSlider-rail {
  background: rgba(180, 180, 220, 0.35) !important;
}

/* ============================================================
   TOOLTIP  (.MuiTooltip-tooltip)
   ============================================================ */
.MuiTooltip-tooltip {
  background: rgba(30, 30, 46, 0.75) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3) !important;
  border-radius: var(--glass-radius-sm) !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
}

/* ============================================================
   TABLE  (.MuiTable-root)
   ============================================================ */
.MuiTableContainer-root {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.4) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
}
.MuiTableHead-root .MuiTableCell-root {
  background: rgba(255, 255, 255, 0.35) !important;
  font-weight: 600 !important;
  color: var(--glass-text-primary) !important;
  border-bottom: 1px solid var(--glass-divider) !important;
}
.MuiTableBody-root .MuiTableRow-root:hover {
  background: var(--glass-bg-hover) !important;
}
.MuiTableCell-root {
  border-bottom: 1px solid var(--glass-divider) !important;
}

/* ============================================================
   PAGINATION  (.MuiPagination-root)
   ============================================================ */
.MuiPaginationItem-root {
  border-radius: var(--glass-radius-sm) !important;
  transition: all var(--glass-transition) !important;
}
.MuiPaginationItem-root:hover {
  background: var(--glass-bg-hover) !important;
}
.MuiPaginationItem-root.Mui-selected {
  background: linear-gradient(135deg,
    var(--glass-primary) 0%,
    var(--glass-primary-light) 100%) !important;
  color: #fff !important;
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.MuiBreadcrumbs-root {
  color: var(--glass-text-secondary) !important;
}

/* ============================================================
   STEPPER
   ============================================================ */
.MuiStepIcon-root.Mui-active {
  color: var(--glass-primary) !important;
}
.MuiStepIcon-root.Mui-completed {
  color: var(--glass-success) !important;
}

/* ============================================================
   SNACKBAR  (.MuiSnackbarContent-root)
   ============================================================ */
.MuiSnackbarContent-root {
  background: rgba(30, 30, 46, 0.80) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3) !important;
  border-radius: var(--glass-radius-sm) !important;
  box-shadow: var(--glass-shadow-elevated) !important;
}

/* ============================================================
   PROGRESS INDICATORS
   ============================================================ */
.MuiLinearProgress-root {
  background: rgba(180, 180, 220, 0.2) !important;
  border-radius: var(--glass-radius-pill) !important;
}
.MuiLinearProgress-bar {
  background: linear-gradient(90deg,
    var(--glass-primary) 0%,
    var(--glass-primary-light) 100%) !important;
  border-radius: var(--glass-radius-pill) !important;
}
.MuiCircularProgress-circle {
  stroke: var(--glass-primary) !important;
}

/* ============================================================
   ACCORDION  (.MuiAccordion-root)
   ============================================================ */
.MuiAccordion-root {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.4) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: var(--glass-shadow) !important;
  margin-bottom: 8px !important;
}
.MuiAccordion-root:before {
  display: none !important;
}

/* ============================================================
   AG-GRID (used for CRUDGrid)
   ============================================================ */
.ag-theme-alpine {
  --ag-background-color: rgba(255, 255, 255, 0.35);
  --ag-header-background-color: rgba(255, 255, 255, 0.50);
  --ag-odd-row-background-color: rgba(255, 255, 255, 0.20);
  --ag-row-hover-color: rgba(74, 108, 247, 0.08);
  --ag-selected-row-background-color: rgba(74, 108, 247, 0.14);
  --ag-border-color: var(--glass-divider);
  --ag-header-foreground-color: var(--glass-text-primary);
  --ag-foreground-color: var(--glass-text-primary);
  --ag-secondary-foreground-color: var(--glass-text-secondary);
  --ag-font-family: var(--glass-font);
  --ag-card-shadow: var(--glass-shadow);
  --ag-alpine-active-color: var(--glass-primary);
  border-radius: var(--glass-radius) !important;
  overflow: hidden;
}

.ag-theme-alpine .ag-root-wrapper {
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  overflow: hidden;
}

.ag-theme-alpine .ag-header {
  border-bottom: 1px solid var(--glass-divider);
}

.ag-theme-alpine .ag-row {
  border-bottom: 1px solid var(--glass-divider);
  transition: background var(--glass-transition);
}

/* ============================================================
   SOLID-TOAST overrides
   ============================================================ */
[data-solid-toast] > div {
  background: rgba(255, 255, 255, 0.70) !important;
  backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-heavy)) saturate(1.5) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--glass-radius) !important;
  box-shadow: var(--glass-shadow-elevated) !important;
  color: var(--glass-text-primary) !important;
}

/* ============================================================
   SCROLLBAR (WebKit)
   ============================================================ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(160, 160, 190, 0.35);
  border-radius: var(--glass-radius-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(140, 140, 170, 0.5);
}

/* ============================================================
   UTILITY CLASSES  (optional — for custom components)
   ============================================================
   Usage:  <div class="glass">…</div>
           <div class="glass glass-elevated">…</div>
   ============================================================ */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
  transition: all var(--glass-transition);
}
.glass:hover {
  box-shadow: var(--glass-shadow-elevated);
}

.glass-elevated {
  background: rgba(255, 255, 255, 0.55);
  box-shadow: var(--glass-shadow-elevated);
}

.glass-subtle {
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: none;
}

.glass-dark {
  background: rgba(30, 30, 46, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
}