/*
 * APP-UI Vanilla — Aero/Glass v1
 *
 * Dependency-free compatibility layer for static/vanilla applications. The
 * React implementation is the source of the same visual language; this file
 * intentionally exposes semantic classes rather than styling every element.
 * Scope application markup with .app-ui.
 */

.app-ui {
  --app-ui-theme-version: 1;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --surface-solid: oklch(1 0 0);
  --surface-elevated: oklch(.992 .006 247.839);
  --surface-glass-fallback: oklch(.98 .008 247.839);
  --surface-border: oklch(.35 .03 260 / .12);
  --surface-border-strong: oklch(.35 .03 260 / .17);
  --background: oklch(.985 .002 247.839);
  --foreground: oklch(.208 .042 265.755);
  --muted-foreground: oklch(.446 .043 257.281);
  --primary: oklch(.546 .245 262.881);
  --primary-foreground: oklch(.985 .002 247.839);
  --secondary: oklch(.946 .011 254.604);
  --secondary-foreground: oklch(.208 .042 265.755);
  --destructive: oklch(.577 .245 27.325);
  --destructive-foreground: oklch(.985 .002 247.839);
  --ring: oklch(.546 .245 262.881);
  --elevation-1: 0 1px 2px oklch(.25 .03 260 / .08), 0 1px 0 oklch(1 0 0 / .72) inset;
  --elevation-2: 0 8px 24px oklch(.25 .03 260 / .12), 0 1px 0 oklch(1 0 0 / .82) inset;
  --elevation-3: 0 18px 50px oklch(.25 .03 260 / .16), 0 1px 0 oklch(1 0 0 / .88) inset;
  --tile-shadow: 0 1px 2px oklch(.25 .03 260 / .05), 0 7px 18px oklch(.25 .03 260 / .07), 0 1px 0 oklch(1 0 0 / .78) inset;
  --tile-shadow-raised: 0 2px 4px oklch(.25 .03 260 / .07), 0 14px 30px oklch(.25 .03 260 / .10), 0 1px 0 oklch(1 0 0 / .86) inset;
  --button-shadow: 0 2px 3px oklch(.25 .03 260 / .12), 0 7px 14px oklch(.25 .03 260 / .10), 0 1px 0 oklch(1 0 0 / .44) inset;
  --button-shadow-hover: 0 3px 4px oklch(.25 .03 260 / .14), 0 11px 20px oklch(.25 .03 260 / .14), 0 1px 0 oklch(1 0 0 / .55) inset;
  --button-shadow-pressed: 0 1px 2px oklch(.25 .03 260 / .14), 0 2px 5px oklch(.25 .03 260 / .10), 0 1px 0 oklch(0 0 0 / .08) inset;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-heading: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  color: var(--foreground);
  font-family: var(--font-body);
  letter-spacing: -.008em;
}

.app-ui *, .app-ui *::before, .app-ui *::after { box-sizing: border-box; }
.app-ui :where(button, input, textarea, select) { font: inherit; }
.app-ui :where(button, [role="button"], [role="switch"], [role="tab"]) { -webkit-tap-highlight-color: transparent; }
.app-ui :where(button, [role="button"], [role="switch"], [role="tab"]):focus-visible,
.app-ui :where(input, textarea, select):focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.app-ui .ui-app-title { margin: 0; font-family: var(--font-heading); font-size: 1.5rem; font-weight: 760; letter-spacing: -.045em; line-height: 1.1; }
.app-ui .ui-page-title,
.app-ui .ui-sheet-title { margin: 0; font-family: var(--font-heading); font-size: 1rem; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; }
.app-ui .ui-section-title { font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.app-ui .ui-label { display: block; margin-bottom: .375rem; font-size: .6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.app-ui .ui-helper { color: var(--muted-foreground); font-size: .75rem; }

/* Surfaces */
.app-ui .ui-surface-solid,
.app-ui .ui-surface-elevated,
.app-ui .ui-surface-glass,
.app-ui .ui-card,
.app-ui .ui-tile,
.app-ui .ui-dialog,
.app-ui .ui-popover,
.app-ui .ui-dropdown-menu {
  border: 1px solid var(--surface-border);
  color: var(--foreground);
}
.app-ui .ui-surface-solid,
.app-ui .ui-card.ui-surface-solid,
.app-ui .ui-tile.ui-surface-solid { background: linear-gradient(180deg, oklch(1 0 0 / .98), var(--surface-solid)); box-shadow: var(--tile-shadow); }
.app-ui .ui-surface-elevated,
.app-ui .ui-card.ui-surface-elevated,
.app-ui .ui-tile.ui-surface-elevated { background: linear-gradient(180deg, oklch(1 0 0 / .98), var(--surface-elevated)); border-color: var(--surface-border-strong); box-shadow: var(--tile-shadow-raised); }
.app-ui .ui-surface-glass,
.app-ui .ui-card.ui-surface-glass,
.app-ui .ui-tile.ui-surface-glass { background: var(--surface-glass-fallback); box-shadow: var(--tile-shadow-raised); }
.app-ui .ui-card, .app-ui .ui-tile { border-radius: var(--radius-lg); padding: var(--space-4); }
.app-ui .ui-media-card { overflow: hidden; border-radius: var(--radius-lg); }
.app-ui .ui-media-card > img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.app-ui .ui-badge { display: inline-flex; min-height: 1.25rem; align-items: center; border: 1px solid var(--surface-border); border-radius: 999px; padding: .125rem .5rem; background: var(--secondary); color: var(--secondary-foreground); font-size: .6875rem; font-weight: 650; }
.app-ui .ui-number-badge { display: inline-flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(180deg, oklch(.64 .22 262), var(--primary) 65%, oklch(.49 .22 262)); color: var(--primary-foreground); box-shadow: var(--button-shadow); font-size: .75rem; font-weight: 750; }

/* Flat neutral controls are the seamless interface default. The glass
 * modifier alone opts a button into the dimensional treatment. */
.app-ui .ui-button,
.app-ui .ui-toolbar-button,
.app-ui .ui-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.25rem;
  border: 1px solid var(--surface-border-strong);
  border-radius: var(--radius-md);
  padding: .5rem .8125rem;
  background: var(--surface-solid);
  color: var(--foreground);
  box-shadow: none;
  cursor: pointer;
  text-decoration: none;
  transition: color 150ms ease, background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}
.app-ui .ui-button:hover, .app-ui .ui-toolbar-button:hover, .app-ui .ui-icon-button:hover { background: var(--secondary); }
.app-ui .ui-button:active, .app-ui .ui-toolbar-button:active, .app-ui .ui-icon-button:active { background: color-mix(in oklch, var(--secondary) 75%, var(--surface-solid)); }
.app-ui .ui-button--secondary { background: var(--secondary); }
.app-ui .ui-button--secondary:hover { background: color-mix(in oklch, var(--secondary) 78%, var(--surface-solid)); }
.app-ui .ui-button--glass, .app-ui .ui-toolbar-button--glass { background: linear-gradient(180deg, oklch(1 0 0 / .68), oklch(1 0 0 / .34)); box-shadow: var(--button-shadow); text-shadow: 0 1px 0 oklch(0 0 0 / .08); }
.app-ui .ui-button--glass:hover, .app-ui .ui-toolbar-button--glass:hover { background: linear-gradient(180deg, oklch(1 0 0 / .78), oklch(1 0 0 / .44)); box-shadow: var(--button-shadow-hover); transform: translateY(-1px); }
.app-ui .ui-button--glass:active, .app-ui .ui-toolbar-button--glass:active { background: linear-gradient(180deg, oklch(1 0 0 / .6), oklch(1 0 0 / .3)); box-shadow: var(--button-shadow-pressed); transform: translateY(1px); }
.app-ui .ui-button--ghost { background: transparent; border-color: transparent; box-shadow: none; text-shadow: none; }
.app-ui .ui-button--flat { box-shadow: none; }
.app-ui :where(.ui-button, .ui-toolbar-button, .ui-icon-button):disabled,
.app-ui :where(.ui-button, .ui-toolbar-button, .ui-icon-button)[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.app-ui .ui-button--sm { min-height: 2rem; padding: .375rem .625rem; border-radius: var(--radius-sm); font-size: .8125rem; }
.app-ui .ui-button--lg { min-height: 2.75rem; padding: .625rem 1rem; }
.app-ui .ui-icon-button { width: 2.25rem; padding: 0; }
.app-ui .ui-toolbar-button { min-height: 2.125rem; border-radius: .5625rem; }

/* APP-SHELL toolbar family */
.app-ui .ui-icon-button-group,
.app-ui .ui-button-group,
.app-ui .ui-segmented-control {
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  width: max-content;
  max-width: 100%;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--surface-border-strong);
  border-radius: 10px;
  background: color-mix(in oklch, var(--surface-elevated) 78%, transparent);
  box-shadow: none;
}
.app-ui .ui-icon-button-group > .ui-icon-button { min-width: 2.125rem; min-height: 2.125rem; border-radius: .5rem; border-color: transparent; box-shadow: none; }
.app-ui .ui-button-group > button,
.app-ui .ui-segmented-control > [role="tab"],
.app-ui .ui-segmented-control > [data-ui-segment] {
  flex: 0 0 auto;
  min-height: 1.875rem;
  border: 1px solid transparent;
  border-radius: .4375rem;
  padding: 0 .625rem;
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.app-ui .ui-segmented-control > [role="tab"]:hover, .app-ui .ui-segmented-control > [data-ui-segment]:hover { color: var(--foreground); background: oklch(1 0 0 / .42); }
.app-ui .ui-segmented-control > [aria-selected="true"],
.app-ui .ui-segmented-control > [aria-pressed="true"],
.app-ui .ui-segmented-control > [data-active="true"] { border-color: var(--surface-border-strong); background: var(--secondary); color: var(--foreground); box-shadow: none; }
.app-ui .ui-button-group > button:hover { background: transparent; color: var(--foreground); }
.app-ui .ui-button-group > button:active,
.app-ui .ui-button-group > button[data-ui-activating="true"] { background: var(--secondary); color: var(--foreground); border-color: var(--surface-border-strong); }
.app-ui .ui-button-group > button:disabled,
.app-ui .ui-button-group > button[aria-disabled="true"],
.app-ui .ui-segmented-control > button:disabled { opacity: .5; pointer-events: none; }
.app-ui .ui-button-group > button[hidden] { display: none; }

/* Fields and simple form controls */
.app-ui .ui-input, .app-ui .ui-textarea, .app-ui select.ui-select {
  width: 100%; min-height: 2.25rem; border: 1px solid var(--surface-border-strong); border-radius: var(--radius-md); padding: .5rem .6875rem; background: var(--surface-solid); color: var(--foreground); box-shadow: var(--elevation-1);
}
.app-ui .ui-textarea { min-height: 5.5rem; resize: vertical; }
.app-ui .ui-input::placeholder, .app-ui .ui-textarea::placeholder { color: var(--muted-foreground); }
.app-ui .ui-select[data-ui-select] { position: relative; display: block; width: 100%; }
.app-ui .ui-select-trigger {
  display: flex;
  width: 100%;
  min-height: 2.25rem;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  border: 1px solid var(--surface-border-strong);
  border-radius: var(--radius-md);
  padding: .5rem .75rem;
  background: var(--surface-solid);
  color: var(--foreground);
  box-shadow: var(--elevation-1);
  cursor: pointer;
  text-align: left;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.app-ui .ui-select-trigger:disabled { opacity: .5; cursor: not-allowed; }
.app-ui .ui-select-trigger [data-ui-select-icon] { width: 1rem; height: 1rem; flex: 0 0 auto; color: var(--muted-foreground); }
.app-ui .ui-select-content {
  position: absolute;
  top: calc(100% + .375rem);
  left: 0;
  z-index: 30;
  width: max-content;
  min-width: 100%;
  max-width: min(22rem, calc(100vw - 2rem));
  max-height: min(18rem, calc(100vh - 2rem));
  overflow-y: auto;
  border: 1px solid var(--surface-border-strong);
  border-radius: var(--radius-md);
  padding: .375rem;
  background: var(--surface-solid);
  color: var(--foreground);
  box-shadow: var(--elevation-3);
}
.app-ui .ui-select-content[hidden] { display: none; }
.app-ui .ui-select-label { padding: .375rem .5rem; color: var(--muted-foreground); font-size: .75rem; font-weight: 650; }
.app-ui .ui-select-option {
  display: flex;
  width: 100%;
  min-height: 2rem;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border: 0;
  border-radius: var(--radius-sm);
  padding: .4375rem .5rem;
  background: transparent;
  color: var(--foreground);
  cursor: default;
  text-align: left;
}
.app-ui .ui-select-option:hover,
.app-ui .ui-select-option:focus-visible,
.app-ui .ui-select-option[data-highlighted="true"] { background: var(--secondary); outline: none; }
.app-ui .ui-select-option[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.app-ui .ui-select-option [data-ui-select-indicator] { width: 1rem; height: 1rem; flex: 0 0 auto; visibility: hidden; }
.app-ui .ui-select-option[aria-selected="true"] [data-ui-select-indicator] { visibility: visible; }
.app-ui .ui-checkbox { width: 1.125rem; height: 1.125rem; accent-color: var(--primary); }
.app-ui .ui-switch { appearance: none; position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: flex-start; width: 2.25rem; height: 1.25rem; border: 1px solid var(--surface-border-strong); border-radius: 999px; padding: 2px; background: var(--secondary); box-shadow: var(--elevation-1); cursor: pointer; transition: background 150ms ease, box-shadow 150ms ease; }
.app-ui .ui-switch::after { content: ""; display: block; flex: 0 0 auto; width: 1rem; height: 1rem; border-radius: 50%; background: var(--surface-solid); box-shadow: 0 1px 2px oklch(.25 .03 260 / .2); transition: transform 150ms ease; }
.app-ui .ui-switch[aria-checked="true"] { background: var(--primary); }
.app-ui .ui-switch[aria-checked="true"]::after { transform: translateX(1rem); }

/* Menus, popovers, dialogs */
.app-ui .ui-dropdown { position: relative; display: inline-block; }
.app-ui .ui-dropdown-menu, .app-ui .ui-popover { z-index: 20; min-width: 11rem; border-radius: var(--radius-md); padding: .375rem; background: var(--surface-solid); box-shadow: var(--elevation-3); }
.app-ui .ui-dropdown-menu[hidden], .app-ui .ui-popover[hidden] { display: none; }
.app-ui .ui-dropdown-menu { position: absolute; top: calc(100% + .375rem); left: 0; }
.app-ui .ui-dropdown-menu [role="menuitem"], .app-ui .ui-command-item { display: flex; width: 100%; align-items: center; border: 0; border-radius: var(--radius-sm); padding: .5rem .625rem; background: transparent; color: var(--foreground); text-align: left; cursor: pointer; }
.app-ui .ui-dropdown-menu [role="menuitem"]:hover, .app-ui .ui-dropdown-menu [role="menuitem"]:focus-visible, .app-ui .ui-command-item:hover { background: var(--secondary); outline: none; }
.app-ui .ui-dialog::backdrop { background: oklch(.12 .02 260 / .28); backdrop-filter: blur(4px); }
.app-ui .ui-dialog { width: min(32rem, calc(100vw - 2rem)); border-radius: var(--radius-xl); padding: 0; background: var(--surface-solid); box-shadow: var(--elevation-3); }
.app-ui .ui-dialog:not([open]) { display: none; }
.app-ui .ui-dialog-content { padding: var(--space-5); }
.app-ui .ui-dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); }

/* Tabs, table, sidebar and feedback */
.app-ui .ui-tabs-list { display: flex; gap: 2px; border-bottom: 1px solid var(--surface-border); }
.app-ui .ui-tabs-list [role="tab"] { border: 0; border-bottom: 2px solid transparent; padding: .5rem .75rem; background: transparent; color: var(--muted-foreground); cursor: pointer; }
.app-ui .ui-tabs-list [aria-selected="true"] { border-bottom-color: var(--primary); color: var(--foreground); }
.app-ui .ui-tab-panel[hidden] { display: none; }
.app-ui .ui-table-wrap { overflow: auto; border: 1px solid var(--surface-border); border-radius: var(--radius-lg); box-shadow: var(--tile-shadow); }
.app-ui .ui-table { width: 100%; border-collapse: collapse; background: var(--surface-solid); font-size: .875rem; }
.app-ui .ui-table th, .app-ui .ui-table td { padding: .625rem .75rem; border-bottom: 1px solid var(--surface-border); text-align: left; }
.app-ui .ui-table th { height: 2.5rem; padding-inline: .5rem; color: var(--foreground); font-size: inherit; font-weight: 500; letter-spacing: normal; text-transform: none; vertical-align: middle; }
/* DataGrid: a semantic, editable-record table with opt-in mechanics.  Column
 * rules are deliberately absent; the resize affordance appears on hover. */
.app-ui .ui-datagrid { overflow: hidden; border: 1px solid var(--surface-border); border-radius: var(--radius-lg); background: var(--surface-solid); color: var(--foreground); box-shadow: var(--tile-shadow); font-family: var(--font-body); font-size: .875rem; line-height: 1.4; }
.app-ui .ui-datagrid-scroll { width: 100%; overflow-x: auto; }
.app-ui .ui-datagrid-table { width: 100%; min-width: max-content; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.app-ui .ui-datagrid[data-ui-datagrid-auto-fit] .ui-datagrid-table { width: max-content; min-width: 0; }
.app-ui .ui-datagrid-table th, .app-ui .ui-datagrid-table td { position: relative; min-width: 0; border: 0; border-bottom: 1px solid var(--surface-border); padding: .625rem .75rem; text-align: left; vertical-align: middle; }
.app-ui .ui-datagrid-table th { position: sticky; top: 0; z-index: 2; height: 2.5rem; padding-inline: .5rem; background: var(--surface-elevated); color: var(--foreground); font-size: inherit; font-weight: 500; letter-spacing: normal; white-space: nowrap; }
.app-ui .ui-datagrid-table tbody tr { transition: background 120ms ease; }
.app-ui .ui-datagrid-table tbody tr:hover > * { background: color-mix(in oklch, var(--secondary) 45%, var(--surface-solid)); }
.app-ui .ui-datagrid-table tbody tr[data-state="selected"] > *, .app-ui .ui-datagrid-table tbody tr[aria-selected="true"] > * { background: color-mix(in oklch, var(--secondary) 76%, var(--surface-solid)); }
.app-ui .ui-datagrid-table tbody tr:last-child > * { border-bottom: 0; }
.app-ui .ui-datagrid-table :where(th,td).ui-datagrid-control { width: 2.5rem; padding-inline: .375rem; text-align: center; }
.app-ui .ui-datagrid[data-ui-datagrid-auto-fit] .ui-datagrid-table :where(th,td).ui-datagrid-control { width: auto; padding-inline: .125rem; }
.app-ui .ui-datagrid[data-ui-datagrid-auto-fit] .ui-datagrid-drag-handle { max-width: 100%; }
.app-ui .ui-datagrid-table :where(th,td).ui-datagrid-actions { width: 3rem; padding-inline: .25rem; text-align: center; }
.app-ui .ui-datagrid-table :where(input,textarea,select) { font: inherit; line-height: inherit; }
.app-ui .ui-datagrid-drag-handle, .app-ui .ui-datagrid-action-trigger { display: inline-flex; width: 1.875rem; height: 1.875rem; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted-foreground); cursor: grab; }
.app-ui .ui-datagrid-action-trigger { width: 2.25rem; height: 2.25rem; cursor: pointer; }
.app-ui .ui-datagrid-drag-handle:hover, .app-ui .ui-datagrid-action-trigger:hover { background: var(--secondary); color: var(--foreground); }
.app-ui .ui-datagrid-drag-handle:active { cursor: grabbing; }
.app-ui .ui-datagrid-resize { position: absolute; top: 16%; right: 0; z-index: 3; width: 8px; height: 68%; border: 0; border-radius: 4px; padding: 0; background: transparent; cursor: col-resize; touch-action: none; }
.app-ui .ui-datagrid-resize::after { content: ""; display: block; width: 2px; height: 100%; margin-inline: auto; border-radius: 2px; background: var(--primary); opacity: 0; }
.app-ui .ui-datagrid-table th:hover .ui-datagrid-resize::after, .app-ui .ui-datagrid-resize:focus-visible::after, .app-ui .ui-datagrid-resize[data-dragging="true"]::after { opacity: .75; }
.app-ui .ui-datagrid-footer { display: flex; min-height: 3rem; align-items: center; justify-content: space-between; gap: .75rem; border-top: 1px solid var(--surface-border); padding: .5rem .75rem; color: var(--muted-foreground); font-size: .8125rem; }
.app-ui .ui-datagrid-bulk { display: inline-flex; align-items: center; gap: .5rem; }
.app-ui .ui-datagrid-bulk[hidden] { display: none; }
.app-ui .ui-datagrid-pagination { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; }
.app-ui .ui-datagrid-pagination[hidden] { display: none; }
.app-ui .ui-datagrid .ui-dropdown-menu { right: 0; left: auto; text-align: left; }
.app-ui .ui-datagrid :where([data-ui-datagrid-select],[data-ui-datagrid-select-all]) { width: 1.125rem; height: 1.125rem; accent-color: var(--primary); cursor: pointer; }
.app-ui .ui-sidebar { display: flex; min-width: 13rem; flex-direction: column; gap: .25rem; border-right: 1px solid var(--surface-border); padding: var(--space-3); background: linear-gradient(180deg, var(--surface-elevated), var(--surface-glass-fallback)); }
.app-ui .ui-sidebar-link { display: flex; align-items: center; border-radius: var(--radius-sm); padding: .5rem .625rem; color: var(--muted-foreground); text-decoration: none; }
.app-ui .ui-sidebar-link:hover, .app-ui .ui-sidebar-link[aria-current="page"] { background: var(--surface-solid); color: var(--foreground); box-shadow: var(--elevation-1); }
.app-ui .ui-toast-region { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; display: grid; gap: .625rem; width: min(22rem, calc(100vw - 2rem)); }
.app-ui .ui-toast { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; border: 1px solid var(--surface-border-strong); border-radius: var(--radius-md); padding: .75rem; background: var(--surface-solid); box-shadow: var(--elevation-3); }
.app-ui .ui-toast[hidden] { display: none; }
.app-ui .ui-skeleton { min-height: 1rem; border-radius: var(--radius-sm); background: linear-gradient(100deg, var(--secondary) 30%, oklch(1 0 0 / .72), var(--secondary) 70%); background-size: 200% 100%; animation: app-ui-skeleton 1.4s ease-in-out infinite; }
@keyframes app-ui-skeleton { from { background-position: 200% 0; } to { background-position: -200% 0; } }

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .app-ui .ui-surface-glass, .app-ui .ui-card.ui-surface-glass, .app-ui .ui-tile.ui-surface-glass { background: color-mix(in oklch, var(--surface-solid) 78%, transparent); border-color: oklch(1 0 0 / .72); box-shadow: var(--elevation-2), 0 1px 0 oklch(1 0 0 / .55) inset; -webkit-backdrop-filter: blur(20px) saturate(1.08); backdrop-filter: blur(20px) saturate(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .app-ui *, .app-ui *::before, .app-ui *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
@media (forced-colors: active) {
  .app-ui .ui-surface-solid, .app-ui .ui-surface-elevated, .app-ui .ui-surface-glass, .app-ui .ui-card, .app-ui .ui-tile, .app-ui .ui-dialog, .app-ui .ui-popover, .app-ui .ui-dropdown-menu, .app-ui .ui-select-content { background: Canvas; border-color: CanvasText; box-shadow: none; }
}