/* Browser interpretation of Apple's Regular navigation material: layered
 * light, a defined rim and depth, rather than native adaptive lensing.
 * Content remains opaque. No per-card blur, SVG distortion or moving lights.
 * References: developer.apple.com/videos/play/wwdc2025/219/ (principles),
 * developer.apple.com/design/human-interface-guidelines/materials and /motion. */
html.liquid-glass {
  --ds-app-bg: #fff;
  --ds-surface-1: #fff;
  --ds-surface-2: #f5f8fa;
  --ds-text: #142230;
  --ds-text-muted: #475569;
  --ds-border: #ccd8df;
  --ui-bg: #fff;
  --ui-text: #142230;
  --ui-text-muted: #475569;
  --ui-border: #bbcbd5;
  --glass-material: #f7fafc;
  --glass-border: #b7c8d3;
  --glass-blur: none;
  --glass-lighting:
    radial-gradient(ellipse at 12% 0%, rgb(255 255 255 / .62), transparent 58%),
    linear-gradient(155deg, rgb(255 255 255 / .38), rgb(255 255 255 / .06) 46%, rgb(216 231 243 / .12));
  --glass-shadow: 0 16px 40px rgb(25 53 70 / .13), 0 2px 8px rgb(25 53 70 / .07),
    inset 0 1px 0 rgb(255 255 255 / .94), inset 1px 0 0 rgb(255 255 255 / .62),
    inset 0 -1px 0 rgb(65 93 116 / .12);
  --glass-control-fill: rgb(255 255 255 / .58);
  --glass-pill-fill: #fff;
  --glass-pill-rim: #aebfcc;
  --glass-pill-shadow: 0 3px 9px rgb(25 53 70 / .12), inset 0 1px 0 #fff,
    inset 0 -1px 0 rgb(65 93 116 / .1);
  background-color: var(--ds-app-bg);
}

html.liquid-glass body {
  background-color: var(--ds-app-bg) !important;
  /* Bounded, static colour washes give white data surfaces a visible edge
   * without tinting their content or creating a filtered/positioned layer. */
  background-image:
    radial-gradient(ellipse 52rem 34rem at 0% 0%, rgb(175 225 214 / .36), transparent 75%),
    radial-gradient(ellipse 50rem 36rem at 100% 14rem, rgb(174 218 240 / .34), transparent 75%),
    radial-gradient(ellipse 54rem 40rem at 55% 48rem, rgb(210 201 240 / .24), transparent 75%);
  color: var(--ds-text);
}

/* The shell otherwise paints the app background on every wrapper, covering
 * the body washes. Only these structural layers are transparent; cards,
 * tables, editors and floating surfaces retain their own material. */
html.liquid-glass :is(#app, #app-shell, #app-main, #app-content) {
  background-color: transparent;
}

/* Keep the main content outside filtered surfaces. The existing shell owns
 * positioning, focus and overlay stacking. */
html.liquid-glass .app-navigation-topbar::before,
html.liquid-glass :is(.navigation-shell,
  #profile-menu-panel, #notifications-panel, #topbar-search-dialog, [data-search-results]:not(#topbar-search-dialog [data-search-results]),
  .topbar-menu-popover, [data-mobile-bottom-nav]) {
  background-color: var(--glass-material) !important;
  background-image: var(--glass-lighting);
  border-color: var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
}

html.liquid-glass :is(#profile-menu-panel, #notifications-panel, #topbar-search-dialog,
  [data-search-results]:not(#topbar-search-dialog [data-search-results]), .topbar-menu-popover) {
  --glass-material: #f7fafc;
  border-radius: 1.5rem;
  box-shadow: var(--glass-shadow);
}

/* The dropdowns are children of the navbar. Filtering the navbar itself
 * establishes a Backdrop Root and prevents its children from sampling page
 * content. Put the bar material on a non-interactive sibling paint plane. */
html.liquid-glass .app-navigation-topbar::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  /* The navbar owns the shadow; this plane owns only material and blur. */
  box-shadow: none !important;
}

html.liquid-glass .app-navigation-topbar {
  background-color: transparent !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-radius: 0;
  box-shadow: 0 3px 12px rgb(25 53 70 / .07), inset 0 1px 0 rgb(255 255 255 / .94),
    inset 0 -1px 0 rgb(65 93 116 / .12);
}

/* A passive runtime flag marks content beneath the bar. Shadows deepen only
 * when crossing that boundary; no continuous sampling of underlying pixels. */
html.liquid-glass[data-glass-scrolled='true'] .app-navigation-topbar {
  box-shadow: 0 12px 28px rgb(25 53 70 / .18), 0 2px 6px rgb(25 53 70 / .09),
    inset 0 1px 0 rgb(255 255 255 / .94), inset 0 -1px 0 rgb(65 93 116 / .2);
}

html.liquid-glass [data-mobile-bottom-nav] { border-radius: 1.5rem 1.5rem 0 0; }

html.liquid-glass #profile-menu-panel > :is(div:first-child, div:last-child) {
  background-color: rgb(239 245 248 / .76);
}

html.liquid-glass :is(#profile-menu-panel, #notifications-panel, #topbar-search-dialog,
  .app-navigation-topbar, .navigation-shell, .topbar-menu-popover, [data-mobile-bottom-nav])
  :is(.text-slate-400, .text-slate-500, .text-neutral-400, .text-neutral-500,
    .text-zinc-400, .text-zinc-500):not(:disabled):not([aria-disabled='true']) {
  color: var(--ds-text-muted);
}

html.liquid-glass :is(#profile-menu-panel, #topbar-search-dialog) input::placeholder {
  color: var(--ds-text-muted);
  opacity: 1;
}

html.liquid-glass .navigation-shell > :first-child {
  background-color: transparent;
}

/* The dashboard's KPI accents, warning colours and chart series are retained.
 * No backdrop-filter on individual data cards, tables, charts or editors. */
html.liquid-glass #app-main #app-content :is(.ui-card, [data-ui-component='card'],
  [data-chart-card], [data-dashboard-card], [data-dashboard-kpi], [data-dashboard-section]) {
  border-radius: 1.25rem;
  border-inline-color: var(--ds-border);
  border-bottom-color: var(--ds-border);
  box-shadow: 0 3px 14px rgb(25 53 70 / .055), inset 0 1px 0 #fff !important;
}

html.liquid-glass #app-main #app-content :is([data-filter-panel], [data-dashboard-filter-toolbar],
  [data-dashboard-filter-panel]:not([data-filter-panel] *):not([data-dashboard-filter-panel] *)) {
  border-radius: 1.25rem;
  border-color: var(--glass-border);
  /* Dense filters stay opaque, beneath the navigation material. */
  background: var(--ds-surface-1) !important;
  box-shadow: var(--glass-shadow) !important;
}

/* Thin fills inside glass share the parent material; they have no second
 * backdrop-filter. Semantic primary/danger buttons retain their own fills. */
html.liquid-glass :is(.topbar-profile-button, .topbar-notification-button,
  .topbar-search-button, .topbar-menu-section-button, [data-theme-select], [data-language-api-select]) {
  border-color: var(--ui-border);
  background-color: var(--glass-control-fill);
  background-image: linear-gradient(145deg, rgb(255 255 255 / .5), transparent 65%);
  color: var(--ds-text);
  box-shadow: 0 3px 9px rgb(25 53 70 / .08), inset 0 1px 0 rgb(255 255 255 / .94),
    inset 0 -1px 0 rgb(65 93 116 / .08);
}

html.liquid-glass #app-main #app-content :is(.ui-button, .btn, [role='button']) {
  border-radius: 999px;
}

/* Every eligible action receives an owned, inert lens from the button runtime.
 * Paint belongs to that child: native arrows, loading glyphs and positioning
 * remain with their component. Soft edges replace the early chrome-like rim. */
html.liquid-glass .glass-action {
  border-radius: 999px !important;
  isolation: isolate;
  box-shadow: 0 3px 10px rgb(16 48 57 / .1), 0 1px 2px rgb(16 48 57 / .07),
    inset 0 1px 0 rgb(255 255 255 / .22) !important;
}

/* Page utility radii may carry !important; keep raw actions and shared ones
 * consistent without changing their dimensions or their semantic fills. */
html.liquid-glass #app-main #app-content .glass-action { border-radius: 999px !important; }

/* Legacy inference can mistake hover:ring-brand-* for a primary fill. Keep
 * explicit domain state utilities authoritative in Glass, including warning's
 * generated !important foreground. Tokens match the Tailwind source palette. */
@media screen and (forced-colors: none) {
  /* The shared shell's danger-icon hover uses a pale fill with a white glyph.
   * Retain an explicit destructive action's contrast in this theme. */
  html.liquid-glass #app-main #app-content .glass-action:is(.ui-action-icon-danger, .ui-button-danger, [data-ui-button='danger']) {
    background: var(--color-danger-600, #dc2626) !important;
    border-color: var(--color-danger-600, #dc2626) !important;
    color: #fff !important;
  }
  @media (hover: hover) and (pointer: fine) {
    html.liquid-glass #app-main #app-content .glass-action:is(.ui-action-icon-danger, .ui-button-danger, [data-ui-button='danger']):not(:disabled):not([aria-disabled='true']):not([aria-busy='true']):hover {
      background: var(--color-danger-700, #b91c1c) !important;
      border-color: var(--color-danger-700, #b91c1c) !important;
    }
  }
  html.liquid-glass .glass-action.bg-info-100 {
    --glass-action-state-fill: var(--color-info-100, #e0f2fe);
    --glass-action-state-text: var(--color-info-700, #0369a1);
    --glass-action-state-border: var(--color-info-200, #bae6fd);
  }
  html.liquid-glass .glass-action.bg-warning-100 {
    --glass-action-state-fill: var(--color-warning-100, #fef3c7);
    --glass-action-state-text: var(--color-warning-700, #b45309);
    --glass-action-state-border: var(--color-warning-200, #fde68a);
  }
  html.liquid-glass .glass-action.bg-success-100 {
    --glass-action-state-fill: var(--color-success-100, #dcfce7);
    --glass-action-state-text: var(--color-success-700, #15803d);
    --glass-action-state-border: var(--color-success-200, #bbf7d0);
  }
  html.liquid-glass .glass-action.bg-danger-100 {
    --glass-action-state-fill: var(--color-danger-100, #fee2e2);
    --glass-action-state-text: var(--color-danger-700, #b91c1c);
    --glass-action-state-border: var(--color-danger-200, #fecaca);
  }
  html.liquid-glass .glass-action.bg-slate-100 {
    --glass-action-state-fill: var(--color-slate-100, #f1f5f9);
    --glass-action-state-text: var(--color-slate-700, #334155);
    --glass-action-state-border: var(--color-slate-200, #e2e8f0);
  }
  html.liquid-glass #app-main #app-content .glass-action:is(.bg-info-100, .bg-warning-100, .bg-success-100, .bg-danger-100, .bg-slate-100) {
    background-color: var(--glass-action-state-fill) !important;
    background-image: none !important;
    color: var(--glass-action-state-text) !important;
    border-color: var(--glass-action-state-border) !important;
  }
}

html.liquid-glass .glass-action-static { position: relative; }

html.liquid-glass .glass-button-lens {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  border: 1px solid rgb(255 255 255 / .2);
  background: transparent;
  box-shadow: inset 0 1px 3px rgb(255 255 255 / .22),
    inset 0 -1px 3px rgb(0 20 29 / .1);
  translate: var(--glass-button-bend-x, 0px) var(--glass-button-bend-y, 0px);
}

html.liquid-glass .glass-button-lens::before {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  padding: 1.5px;
  background-image: radial-gradient(ellipse at var(--glass-button-light-x, 35%) var(--glass-button-light-y, 15%),
    rgb(255 255 255 / .72), rgb(255 255 255 / .16) 35%, transparent 65%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: .6;
}

html.liquid-glass .glass-button-lens::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 12%;
  width: 76%;
  height: 4px;
  pointer-events: none;
  border-radius: 50%;
  background-image: radial-gradient(ellipse at var(--glass-button-light-x, 35%) 0%,
    rgb(255 255 255 / .65), transparent 70%);
  opacity: calc(.3 + var(--glass-button-wave, 0) * .2);
}

html.liquid-glass .glass-button-pointing::before { opacity: 1; }

/* White-on-white specular highlights disappear. A cool, low-opacity caustic
 * and a wider masked edge make neutral light actions readable as glass. The
 * tinted paint is bounded at 12% so the label keeps its foreground contrast. */
html.liquid-glass .glass-action-light > .glass-button-lens {
  --glass-button-caustic-alpha: .05;
  border-color: rgb(108 154 169 / .35);
  background-image: radial-gradient(ellipse 48% 130% at var(--glass-button-light-x, 35%) var(--glass-button-light-y, 15%),
    rgb(72 141 164 / .035), transparent 75%);
  box-shadow: inset 0 2px 3px rgb(255 255 255 / .9),
    inset 0 -2px 5px rgb(38 88 107 / .16);
}
html.liquid-glass .glass-action-light > .glass-button-lens::before {
  padding: 3px;
  background-image: radial-gradient(ellipse at var(--glass-button-light-x, 35%) var(--glass-button-light-y, 15%),
    rgb(55 125 150 / .5), rgb(158 209 222 / .32) 32%, transparent 68%);
}
html.liquid-glass .glass-action-light > .glass-button-lens::after {
  height: 5px;
  background-image: radial-gradient(ellipse at var(--glass-button-light-x, 35%) 0%,
    rgb(255 255 255 / .95), rgb(107 173 192 / .26) 42%, transparent 75%);
  opacity: calc(.55 + var(--glass-button-wave, 0) * .35);
}
html.liquid-glass .glass-action-light > .glass-button-pointing {
  background-image: radial-gradient(ellipse 48% 130% at var(--glass-button-light-x, 35%) var(--glass-button-light-y, 15%),
    rgb(72 141 164 / var(--glass-button-caustic-alpha, .05)), transparent 75%);
}
html.liquid-glass .glass-action-light:is(.text-slate-700, .text-neutral-700, .text-gray-700, .text-zinc-700) > .glass-button-lens {
  --glass-button-caustic-alpha: .12;
}

/* Native select remains a field with its own arrow and OS-owned popup. */
html.liquid-glass #app-content select:not([multiple]) {
  border-radius: 1rem;
  box-shadow: 0 2px 6px rgb(16 48 57 / .05), inset 0 1px 0 rgb(255 255 255 / .35);
}

/* Unsupported masking gets a soft shadow-only shell, never a light overlay
 * across text. Replaced inputs retain the host's shadow without a fake child. */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
  html.liquid-glass .glass-button-lens::before { content: none; }
}

@media screen and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  html.liquid-glass:not(.ui-safe-mode) .glass-button-lens {
    transition: scale 340ms cubic-bezier(.18, .88, .24, 1.16), box-shadow 220ms ease-out, translate 160ms ease-out;
  }
  html.liquid-glass:not(.ui-safe-mode) .glass-button-lens::before {
    transition: opacity 180ms ease-out;
  }
  @media (hover: hover) and (pointer: fine) {
    html.liquid-glass:not(.ui-safe-mode) .glass-action:not(:disabled):not([aria-disabled='true']):not([aria-busy='true']):hover:not(:active) > .glass-button-lens {
      scale: calc(1.018 + var(--glass-button-wave, 0) * .014) calc(1.055 - var(--glass-button-wave, 0) * .018);
      box-shadow: inset 0 1px 3px rgb(255 255 255 / .34),
        inset 0 -1px 3px rgb(0 20 29 / .12), 0 2px 5px rgb(16 48 57 / .06);
    }
    html.liquid-glass:not(.ui-safe-mode) .glass-action-light:not(:disabled):not([aria-disabled='true']):not([aria-busy='true']):hover:not(:active) > .glass-button-lens {
      box-shadow: inset 0 2px 4px rgb(255 255 255 / .95),
        inset 0 -3px 6px rgb(38 88 107 / .22),
        0 3px 8px rgb(38 88 107 / .14);
    }
  }
  html.liquid-glass:not(.ui-safe-mode) .glass-action:not(:disabled):not([aria-disabled='true']):not([aria-busy='true']):active > .glass-button-lens {
    scale: 1.035 .94;
    transition-duration: 100ms;
  }
}

@media (prefers-reduced-motion: reduce), (prefers-contrast: more),
  (prefers-reduced-transparency: reduce), (forced-colors: active), print {
  html.liquid-glass .glass-button-lens {
    display: none !important;
    transition: none !important;
    translate: none !important;
    scale: none !important;
  }
  html.liquid-glass .glass-action { box-shadow: none !important; }
  html.liquid-glass #app-content select:not([multiple]) { box-shadow: none !important; }
}

html.liquid-glass.ui-safe-mode .glass-button-lens {
  display: none !important;
  transition: none !important;
  translate: none !important;
  scale: none !important;
}
html.liquid-glass.ui-safe-mode .glass-action { box-shadow: none !important; }

html.liquid-glass :is(input, select, textarea) {
  color-scheme: light;
}

html.liquid-glass :focus-visible {
  outline: 2px solid #075985 !important;
  outline-offset: 3px;
}

/* Runtime decorates the existing tab owner and preserves selection semantics.
 * One shared material and one thin selected lens: never blur each tab. */
html.liquid-glass .glass-tablist {
  position: relative;
  isolation: isolate;
  /* The owner may wrap into several rows; only the selected lens is a capsule. */
  border-radius: 1.25rem !important;
  background-color: var(--glass-material) !important;
  background-image: var(--glass-lighting) !important;
  border-color: var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  backdrop-filter: var(--glass-blur) !important;
}

html.liquid-glass .glass-tablist > :is(a, button) {
  position: relative;
  z-index: 1;
  border-radius: 999px !important;
}

html.liquid-glass .glass-tab-indicator {
  position: absolute;
  inset: 0 auto auto 0;
  width: var(--glass-pill-width, 0px);
  height: var(--glass-pill-height, 0px);
  transform: translate(var(--glass-pill-x, 0px), var(--glass-pill-y, 0px));
  pointer-events: none;
  overflow: hidden;
  border: 1px solid var(--glass-pill-rim);
  border-radius: 999px;
  background-color: var(--glass-pill-fill);
  background-image: linear-gradient(150deg, rgb(255 255 255 / .72), rgb(255 255 255 / .12) 55%, rgb(216 231 243 / .24));
  box-shadow: var(--glass-pill-shadow);
  visibility: hidden;
  transform-origin: center;
}

html.liquid-glass .glass-tab-indicator::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(115deg, transparent 25%, rgb(255 255 255 / .95) 48%, transparent 70%);
}

html.liquid-glass .glass-tablist.glass-pill-ready .glass-tab-indicator { visibility: visible; }

html.liquid-glass .glass-tablist.glass-pill-ready > .glass-tab-selected {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: var(--ds-text) !important;
}

/* The selected theme replaces the shell's legacy whole-main transform reveal.
 * The dedicated page owner below handles entry without shifting fixed dialogs. */
html.liquid-glass.app-page-entering :is(#app-main, main#main-content) {
  animation: none !important;
}

/* Content wrappers deliberately never transform: otherwise nested fixed
 * dialogs acquire a containing block and no longer align with the viewport. */
@keyframes liquid-glass-pill-specular {
  from { opacity: 0; transform: translateX(-110%); }
  22% { opacity: .95; transform: translateX(-35%); }
  55% { opacity: .5; transform: translateX(30%); }
  78% { opacity: .85; transform: translateX(75%); }
  to { opacity: 0; transform: translateX(110%); }
}

/* Stretch only the decorative lens. Tab labels are sibling controls and
 * keep their glyph size, focus geometry and click targets throughout. */
@keyframes liquid-glass-pill-deform {
  from, to { scale: 1; }
  30% { scale: 1.14 .86; }
  70% { scale: .96 1.05; }
}

@keyframes liquid-glass-page-enter {
  from { opacity: .58; }
  to { opacity: 1; }
}

@keyframes liquid-glass-pane-enter {
  from { opacity: .64; }
  to { opacity: 1; }
}

/* Motion belongs to floating surfaces and controls. Individual scale composes
 * with Alpine's owned transform/opacity; unsupported browsers keep the shadow
 * reveal. No animation of blur, full-page material, data cards or layout. */
@keyframes liquid-glass-panel-enter {
  from {
    scale: .97;
    box-shadow: 0 3px 8px rgb(25 53 70 / .025), inset 0 1px 0 #fff;
  }
  70% {
    scale: 1.015;
    box-shadow: var(--glass-shadow);
  }
  to {
    scale: 1;
    box-shadow: var(--glass-shadow);
  }
}

@keyframes liquid-glass-mode-confirm {
  from { border-color: #4f8b9c; }
  to { border-color: var(--ui-border); }
}

@media screen and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  html.liquid-glass:not(.ui-safe-mode) :is(#profile-menu-panel, #notifications-panel,
    #topbar-search-dialog,
  [data-search-results]:not(#topbar-search-dialog [data-search-results]), .topbar-menu-popover) {
    /* Match the reveal endpoint, including the search dialog's shadow-2xl.
     * Results inside that dialog share its reveal rather than scaling twice. */
    box-shadow: var(--glass-shadow);
    animation: liquid-glass-panel-enter 200ms cubic-bezier(.2, .7, .2, 1) 1;
  }

  html.liquid-glass:not(.ui-safe-mode) :is(.topbar-profile-button, .topbar-notification-button,
    .topbar-search-button, .topbar-menu-section-button, [data-theme-select], [data-theme-toggle], .ui-button) {
    transition-property: background-color, border-color, color, box-shadow, transform;
    transition-duration: 160ms;
    transition-timing-function: ease-out;
  }

  /* Existing PWA controls own their press transform. Use a shallow shadow
   * response and preserve the independent keyboard focus ring. */
  html.liquid-glass:not(.ui-safe-mode) :is(.topbar-profile-button, .topbar-notification-button,
    .topbar-search-button, .topbar-menu-section-button, [data-theme-toggle], .ui-button):not(:disabled):not([aria-disabled='true']):active:not(:focus-visible):not(.glass-action) {
    box-shadow: inset 0 2px 5px rgb(25 53 70 / .16) !important;
  }

  /* The shell suppresses theme changes for 120ms. A bounded 100ms border cue on
   * the chooser fits inside that window; fixed bars and page content stay put. */
  html.liquid-glass.ui-theme-changing:not(.ui-safe-mode) :is(.topbar-profile-button, [data-theme-select]):not(:focus-visible) {
    animation: liquid-glass-mode-confirm 100ms ease-out 1;
    animation-duration: 100ms !important;
  }

  @media (hover: hover) and (pointer: fine) {
    html.liquid-glass:not(.ui-safe-mode) :is(.topbar-profile-button, .topbar-notification-button,
      .topbar-search-button, .topbar-menu-section-button, [data-theme-toggle], .ui-button):not(:disabled):not([aria-disabled='true']):hover:not(:active):not(:focus-visible):not(.glass-action) {
      box-shadow: 0 4px 12px rgb(25 53 70 / .16), inset 0 1px 0 #fff,
        inset 0 0 0 1px rgb(255 255 255 / .75) !important;
    }
    /* Highlight only neutral shell controls; primary/danger content buttons
     * keep their semantic fill and foreground contrast during hover. */
    html.liquid-glass:not(.ui-safe-mode) :is(.topbar-profile-button, .topbar-notification-button,
      .topbar-search-button, .topbar-menu-section-button, [data-theme-toggle]):not(:disabled):not([aria-disabled='true']):hover:not(:active):not(:focus-visible):not(.glass-action) {
      background-image: radial-gradient(ellipse at 35% 0%, #fff, rgb(255 255 255 / .16) 75%);
    }
  }
}

@media screen and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  html.liquid-glass:not(.ui-safe-mode) #app-content.glass-page-enter {
    animation: liquid-glass-page-enter 280ms cubic-bezier(.2, .7, .2, 1) 1;
  }

  html.liquid-glass:not(.ui-safe-mode) .glass-pane-enter {
    animation: liquid-glass-pane-enter 240ms cubic-bezier(.2, .7, .2, 1) 1;
  }

  html.liquid-glass:not(.ui-safe-mode) .app-navigation-topbar {
    transition: box-shadow 180ms ease-out;
  }

  html.liquid-glass:not(.ui-safe-mode) .glass-tablist:focus-within {
    border-color: #819aaa !important;
    box-shadow: var(--glass-shadow), inset 0 0 0 1px rgb(255 255 255 / .9) !important;
  }

  html.liquid-glass:not(.ui-safe-mode) :is(.topbar-profile-button, .topbar-notification-button,
    .topbar-search-button, .topbar-menu-section-button, [data-theme-select], [data-theme-toggle]):focus-visible {
    background-image: radial-gradient(ellipse at 50% 0%, #fff, rgb(255 255 255 / .16) 75%);
  }

  html.liquid-glass:not(.ui-safe-mode) .glass-tablist.glass-pill-moving .glass-tab-indicator::after {
    animation: liquid-glass-pill-specular 520ms cubic-bezier(.2, .7, .2, 1) 1;
  }

  html.liquid-glass:not(.ui-safe-mode) .glass-tablist.glass-pill-moving .glass-tab-indicator {
    animation: liquid-glass-pill-deform 520ms cubic-bezier(.18, .88, .24, 1.18) 1;
  }

  html.liquid-glass:not(.ui-safe-mode) .glass-tablist.glass-pill-ready .glass-tab-indicator {
    /* Size snaps once; position and the decorative lens remain elastic. */
    transition: transform 520ms cubic-bezier(.18, .88, .24, 1.18);
  }
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.liquid-glass {
    /* .82 over black gives #475569 muted text approximately 4.75:1. Light-only
     * highlights raise contrast; no dark scrim beneath text. */
    --glass-material: rgb(247 250 252 / .82);
    --glass-blur: blur(20px) saturate(125%);
  }
  html.liquid-glass :is(#profile-menu-panel, #notifications-panel, #topbar-search-dialog,
  [data-search-results]:not(#topbar-search-dialog [data-search-results]), .topbar-menu-popover) {
    --glass-material: rgb(247 250 252 / .88);
  }
  html.liquid-glass { --glass-pill-fill: rgb(255 255 255 / .76); }
}

@media (max-width: 640px) {
  html.liquid-glass { --glass-blur: blur(12px) saturate(115%); }
}

/* Adaptive paint cost. Keep the moving highlight and elastic pill; reduce
 * backdrop sampling and shadow paint when the runtime detects a tight budget.
 * Accessibility preferences below retain ownership of their fallbacks. */
@media screen and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  html.liquid-glass:not(.ui-safe-mode)[data-glass-quality="lite"] {
    --glass-blur: blur(8px) saturate(110%);
    --glass-material: rgb(247 250 252 / .94);
    --glass-shadow: 0 3px 10px rgb(25 53 70 / .10), inset 0 1px 0 rgb(255 255 255 / .92);
    --glass-pill-shadow: 0 2px 5px rgb(25 53 70 / .12), inset 0 1px 0 #fff;
  }
  html.liquid-glass:not(.ui-safe-mode)[data-glass-quality="lite"] .glass-tablist.glass-pill-moving .glass-tab-indicator {
    animation: liquid-glass-pill-deform 520ms cubic-bezier(.18, .88, .24, 1.18) 1;
  }
  html.liquid-glass:not(.ui-safe-mode)[data-glass-quality="lite"] .glass-select-dropdown {
    backdrop-filter: blur(8px) saturate(110%);
    -webkit-backdrop-filter: blur(8px) saturate(110%);
    background: linear-gradient(155deg, rgb(255 255 255 / .97), rgb(238 245 248 / .96));
    box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgb(15 23 42 / .16);
  }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html.liquid-glass {
    --glass-material: #f7fafc;
    --glass-blur: none;
    --glass-shadow: none;
    --glass-border: #8095a5;
    --ds-border: #8095a5;
  }
  html.liquid-glass body { background-image: none; }
  html.liquid-glass :is(#profile-menu-panel, #notifications-panel, #topbar-search-dialog,
  [data-search-results]:not(#topbar-search-dialog [data-search-results]), .topbar-menu-popover) {
    --glass-material: #f7fafc;
  }
  html.liquid-glass :is(.app-navigation-topbar, .navigation-shell,
    #profile-menu-panel, #notifications-panel, #topbar-search-dialog, [data-search-results]:not(#topbar-search-dialog [data-search-results]), .topbar-menu-popover, [data-mobile-bottom-nav]) {
    background-image: none;
  }
  html.liquid-glass #profile-menu-panel > :is(div:first-child, div:last-child) { background-color: #f7fafc; }
}

@media (prefers-reduced-motion: reduce) {
  html.liquid-glass :is(#profile-menu-panel, #notifications-panel, .navigation-shell,
    .app-navigation-topbar, .topbar-profile-button) {
    transition: none !important;
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce), (forced-colors: active), print {
  html.liquid-glass :is(#profile-menu-panel, #notifications-panel, #topbar-search-dialog,
    [data-search-results]:not(#topbar-search-dialog [data-search-results]), .topbar-menu-popover, .topbar-profile-button, .topbar-notification-button,
    .topbar-search-button, .topbar-menu-section-button, [data-theme-select], [data-theme-toggle], .ui-button) {
    animation: none !important;
    transition: none !important;
    scale: none !important;
  }
}

html.liquid-glass.ui-safe-mode :is(#profile-menu-panel, #notifications-panel, #topbar-search-dialog,
  [data-search-results]:not(#topbar-search-dialog [data-search-results]), .topbar-menu-popover, .topbar-profile-button, .topbar-notification-button,
  .topbar-search-button, .topbar-menu-section-button, [data-theme-select], [data-theme-toggle], .ui-button) {
  animation: none !important;
  transition: none !important;
  scale: none !important;
}

@media (forced-colors: active) {
  html.liquid-glass {
    --ds-app-bg: Canvas;
    --ds-surface-1: Canvas;
    --ds-surface-2: Canvas;
    --ds-text: CanvasText;
    --ds-text-muted: CanvasText;
    --ds-border: CanvasText;
    --ui-bg: Canvas;
    --ui-text: CanvasText;
    --ui-text-muted: CanvasText;
    --ui-border: ButtonText;
    --glass-material: Canvas;
    --glass-border: CanvasText;
    --glass-blur: none;
    --glass-shadow: none;
  }
  html.liquid-glass body { background-image: none; }
  html.liquid-glass :is(#profile-menu-panel, #notifications-panel, #topbar-search-dialog,
  [data-search-results]:not(#topbar-search-dialog [data-search-results]), .topbar-menu-popover) {
    --glass-material: Canvas;
  }
  html.liquid-glass :is(.app-navigation-topbar, .navigation-shell, #profile-menu-panel,
    #notifications-panel, #topbar-search-dialog, [data-search-results]:not(#topbar-search-dialog [data-search-results]), .topbar-menu-popover, [data-mobile-bottom-nav]) {
    background-image: none;
    box-shadow: none !important;
  }
  html.liquid-glass #app-main #app-content :is(.ui-card, [data-ui-component='card'],
    [data-chart-card], [data-dashboard-card], [data-dashboard-kpi], [data-dashboard-section]) {
    box-shadow: none !important;
  }
  html.liquid-glass :focus-visible { outline-color: Highlight !important; }
}

@media print {
  html.liquid-glass {
    --ds-app-bg: #fff;
    --glass-material: #fff;
    --glass-blur: none;
    --glass-shadow: none;
  }
  html.liquid-glass body { background: #fff !important; }
  html.liquid-glass :is(#profile-menu-panel, #notifications-panel, #topbar-search-dialog,
  [data-search-results]:not(#topbar-search-dialog [data-search-results]), .topbar-menu-popover) {
    --glass-material: #fff;
  }
  html.liquid-glass #app-main #app-content :is(.ui-card, [data-ui-component='card'],
    [data-chart-card], [data-dashboard-card], [data-dashboard-kpi], [data-dashboard-section]) {
    box-shadow: none !important;
  }
}

/* Preference and safety fallbacks include runtime-created surfaces, even if
 * the preference changes while an animation is already in progress. */
@media (prefers-reduced-motion: reduce), (prefers-contrast: more),
  (prefers-reduced-transparency: reduce), (forced-colors: active), print {
  html.liquid-glass :is(.glass-page-enter, .glass-pane-enter, .glass-tab-indicator) {
    animation: none !important;
    transition: none !important;
    scale: none !important;
  }
  html.liquid-glass :is(.glass-page-enter, .glass-pane-enter) { opacity: 1 !important; }
}

html.liquid-glass.ui-safe-mode {
  --glass-material: #f7fafc;
  --glass-blur: none;
  --glass-pill-fill: #fff;
  --glass-control-fill: #fff;
  --glass-lighting: none;
}

html.liquid-glass.ui-safe-mode :is(#profile-menu-panel, #notifications-panel, #topbar-search-dialog,
  [data-search-results]:not(#topbar-search-dialog [data-search-results]), .topbar-menu-popover) { --glass-material: #f7fafc; }

html.liquid-glass.ui-safe-mode :is(.glass-page-enter, .glass-pane-enter, .glass-tab-indicator) {
  animation: none !important;
  transition: none !important;
  scale: none !important;
}

html.liquid-glass.ui-safe-mode :is(.glass-page-enter, .glass-pane-enter) { opacity: 1 !important; }

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more),
  (forced-colors: active), print {
  html.liquid-glass :is(.glass-tablist, .glass-tab-indicator,
    .topbar-profile-button, .topbar-notification-button, .topbar-search-button,
    .topbar-menu-section-button, [data-theme-select], [data-language-api-select]) {
    background-image: none !important;
    box-shadow: none !important;
  }
  html.liquid-glass { --glass-control-fill: #fff; --glass-pill-fill: #fff; }
}

@media (prefers-contrast: more), (forced-colors: active), print {
  html.liquid-glass .glass-tab-indicator { display: none; }
  /* Runtime removes all decorative classes in these modes. Read the
   * original navigation contract so selection survives cleanup and no JS. */
  html.liquid-glass #app-content :is(.ui-tabs, [role='tablist'],
    [data-dashboard-tabs]:not(:has([data-ui-component='tabs'])))
    > :is(a, button):is([aria-selected='true'], [aria-current='page'], .is-active) {
    background: var(--ds-surface-1) !important;
    border-color: var(--ds-text) !important;
    color: var(--ds-text) !important;
    text-decoration: underline;
    text-underline-offset: .25em;
  }
}

@media (forced-colors: active) {
  html.liquid-glass { --glass-control-fill: ButtonFace; --glass-pill-fill: ButtonFace; }
  html.liquid-glass .glass-tablist { box-shadow: none !important; }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more),
  (forced-colors: active), print {
  html.liquid-glass :is(#profile-menu-panel, #notifications-panel, #topbar-search-dialog,
    [data-search-results]:not(#topbar-search-dialog [data-search-results]), .topbar-menu-popover,
    .topbar-profile-button, .topbar-notification-button, .topbar-search-button,
    .topbar-menu-section-button, [data-theme-select], [data-theme-toggle], .ui-button) {
    animation: none !important;
    transition: none !important;
    scale: none !important;
  }
}

@media print {
  html.liquid-glass :is(.app-navigation-topbar, .navigation-shell, #profile-menu-panel,
    #notifications-panel, #topbar-search-dialog, [data-search-results],
    .topbar-menu-popover, [data-mobile-bottom-nav]) {
    background-image: none !important;
    box-shadow: none !important;
  }
}

@media (prefers-reduced-motion: reduce), (prefers-contrast: more),
  (prefers-reduced-transparency: reduce), (forced-colors: active), print {
  html.liquid-glass .glass-tab-indicator::after {
    animation: none !important;
    opacity: 0 !important;
  }
  html.liquid-glass .app-navigation-topbar { transition: none !important; }
}

html.liquid-glass.ui-safe-mode .glass-tab-indicator::after {
  animation: none !important;
  opacity: 0 !important;
}

html.liquid-glass.ui-safe-mode .app-navigation-topbar { transition: none !important; }

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more),
  (forced-colors: active), print {
  html.liquid-glass[data-glass-scrolled='true'] .app-navigation-topbar {
    box-shadow: none !important;
  }
}

/* Combined preferences must retain system colours even when safe mode owns a
 * more specific solid-material fallback above. Never opt out of forced paint. */
@media (forced-colors: active) {
  html.liquid-glass.ui-safe-mode {
    --glass-material: Canvas;
    --glass-border: CanvasText;
    --glass-control-fill: ButtonFace;
    --glass-pill-fill: ButtonFace;
  }
  html.liquid-glass.ui-safe-mode :is(#profile-menu-panel, #notifications-panel,
    #topbar-search-dialog, [data-search-results]:not(#topbar-search-dialog [data-search-results]),
    .topbar-menu-popover) { --glass-material: Canvas; }
}

@media print {
  html.liquid-glass.ui-safe-mode { --glass-material: #fff; }
  html.liquid-glass.ui-safe-mode :is(#profile-menu-panel, #notifications-panel,
    #topbar-search-dialog, [data-search-results]:not(#topbar-search-dialog [data-search-results]),
    .topbar-menu-popover) { --glass-material: #fff; }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more),
  (forced-colors: active), print {
  html.liquid-glass .app-navigation-topbar::before {
    background-image: none !important;
    box-shadow: none !important;
  }
}

html.liquid-glass.ui-safe-mode .app-navigation-topbar::before {
  background-image: none !important;
}