@property --page-footer-content-slack {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0px;
}

@layer components {

  .ui-separator {
    flex-shrink: 0;
  }

  .ui-separator:not([data-labelled])[data-orientation="horizontal"] {
    width: 100%;
    height: var(--separator-rule-size);
    background: hsl(var(--separator-rule-color, var(--border)));
  }

  .ui-separator:not([data-labelled])[data-orientation="vertical"] {
    width: var(--separator-rule-size);
    height: 100%;
    background: hsl(var(--separator-rule-color, var(--border)));
  }

  .ui-separator[data-labelled] {
    display: grid;
    width: 100%;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--separator-label-gap, var(--space-3));
  }

  .ui-separator[data-labelled][data-label-align="start"] {
    grid-template-columns: var(--separator-label-inset, var(--space-6)) auto minmax(0, 1fr);
  }

  .ui-separator[data-labelled][data-label-align="end"] {
    grid-template-columns: minmax(0, 1fr) auto var(--separator-label-inset, var(--space-6));
  }

  .ui-separator-rule {
    block-size: var(--separator-rule-size);
    background: hsl(var(--separator-rule-color, var(--border)));
  }

  .ui-separator-label {
    min-inline-size: 0;
    color: hsl(var(--separator-label-color, var(--muted-foreground)));
    font-size: var(--separator-label-font-size);
    font-weight: var(--separator-label-font-weight);
    line-height: var(--separator-label-line-height);

    overflow-wrap: anywhere;
  }

  .ui-separator[data-tone="muted"] {
    --separator-rule-color: var(--separator-tone-muted-rule-color, var(--border));
    --separator-label-color: var(--separator-tone-muted-label-color, var(--muted-foreground));
  }

  .ui-separator[data-tone="primary"] {
    --separator-rule-color: var(--separator-tone-primary-rule-color, var(--primary));
    --separator-label-color: var(--separator-tone-primary-label-color, var(--primary));
  }

  .ui-separator[data-tone="success"] {
    --separator-rule-color: var(--separator-tone-success-rule-color, var(--success));
    --separator-label-color: var(--separator-tone-success-label-color, var(--success));
  }

  .ui-separator[data-tone="warning"] {
    --separator-rule-color: var(--separator-tone-warning-rule-color, var(--warning));
    --separator-label-color: var(--separator-tone-warning-label-color, var(--warning));
  }

  .ui-separator[data-tone="destructive"] {
    --separator-rule-color: var(--separator-tone-destructive-rule-color, var(--destructive));
    --separator-label-color: var(--separator-tone-destructive-label-color, var(--destructive));
  }

  .ui-separator[data-tone="info"] {
    --separator-rule-color: var(--separator-tone-info-rule-color, var(--info));
    --separator-label-color: var(--separator-tone-info-label-color, var(--info));
  }

  .ui-separator[data-tone="inherit"] {
    --separator-rule-color: currentcolor;
    --separator-label-color: currentcolor;
  }

  .ui-aspect-ratio {
    overflow: clip;
    overflow-clip-margin: var(--focus-ring-clip-margin);
  }

  .ui-brand-glow {
    background-image: var(
      --brand-glow,
      radial-gradient(
        ellipse var(--brand-glow-size) at var(--brand-glow-position),
        hsl(var(--brand-glow-color, var(--primary)) / var(--brand-glow-alpha)),
        transparent 70%
      )
    );
    pointer-events: none;
  }

  .ui-flex,
  .ui-stack-xs {
    display: flex;
  }

  .ui-flex[data-direction="row"] {
    flex-direction: row;
  }

  .ui-flex[data-direction="col"] {
    flex-direction: column;
  }

  .ui-empty-state[data-variant="section"] {
    padding: var(--empty-state-section-space-y) var(--empty-state-section-space-x);
  }

  .ui-empty-state[data-variant="compact"] {
    padding: var(--empty-state-compact-space-y) var(--empty-state-compact-space-x);
    gap: var(--space-stack-xs);
  }

  .ui-flex[data-wrap="true"] {
    flex-wrap: wrap;
  }

  .ui-flex[data-fill] {
    flex: 1 1 0;
    min-inline-size: 0;
  }

  .ui-flex[data-width-raw] {
    flex: none;
  }

  .ui-flex[data-align="start"] {
    align-items: flex-start;
  }

  .ui-flex[data-align="center"] {
    align-items: center;
  }

  .ui-flex[data-align="end"] {
    align-items: flex-end;
  }

  .ui-flex[data-align="stretch"] {
    align-items: stretch;
  }

  .ui-flex[data-align="baseline"] {
    align-items: baseline;
  }

  .ui-flex[data-justify="start"] {
    justify-content: flex-start;
  }

  .ui-flex[data-justify="center"] {
    justify-content: center;
  }

  .ui-flex[data-justify="end"] {
    justify-content: flex-end;
  }

  .ui-flex[data-justify="between"] {
    justify-content: space-between;
  }

  .ui-flex[data-justify="around"] {
    justify-content: space-around;
  }

  .ui-flex[data-justify="evenly"] {
    justify-content: space-evenly;
  }

  .ui-flex-gap-none {
    gap: 0;
  }

  .ui-flex-gap-1 {
    gap: var(--space-1);
  }
  .ui-flex-gap-2 {
    gap: var(--space-2);
  }
  .ui-flex-gap-3 {
    gap: var(--space-3);
  }
  .ui-flex-gap-4 {
    gap: var(--space-4);
  }
  .ui-flex-gap-5 {
    gap: var(--space-5);
  }
  .ui-flex-gap-6 {
    gap: var(--space-6);
  }
  .ui-flex-gap-8 {
    gap: var(--space-8);
  }
  .ui-flex-gap-10 {
    gap: var(--space-10);
  }
  .ui-flex-gap-12 {
    gap: var(--space-12);
  }

  .ui-flex-gap-20 {
    gap: var(--space-20);
  }
  .ui-flex-gap-24 {
    gap: var(--space-24);
  }

  .ui-flex[data-direction="row"].ui-flex-gap-xs {
    gap: var(--space-inline-xs);
  }
  .ui-flex[data-direction="row"].ui-flex-gap-sm {
    gap: var(--space-inline-sm);
  }
  .ui-flex[data-direction="row"].ui-flex-gap-md {
    gap: var(--space-inline-md);
  }
  .ui-flex[data-direction="row"].ui-flex-gap-lg {
    gap: var(--space-inline-lg);
  }
  .ui-flex[data-direction="row"].ui-flex-gap-xl {
    gap: var(--space-inline-xl);
  }

  .ui-flex-gap-xs {
    gap: var(--space-stack-xs);
  }

  .ui-stack-xs {
    flex-direction: column;
    gap: var(--space-stack-xs);
  }
  .ui-flex-gap-sm {
    gap: var(--space-stack-sm);
  }

  .ui-stack-sm {
    display: flex;
    flex-direction: column;
    gap: var(--space-stack-sm);
  }
  .ui-flex-gap-md {
    gap: var(--space-stack-md);
  }

  .ui-stack-md {
    display: flex;
    flex-direction: column;
    gap: var(--space-stack-md);
  }
  .ui-flex-gap-lg {
    gap: var(--space-stack-lg);
  }

  .ui-stack-lg {
    display: flex;
    flex-direction: column;
    gap: var(--space-stack-lg);
  }
  .ui-flex-gap-xl {
    gap: var(--space-stack-xl);
  }

  .ui-stack-xl {
    display: flex;
    flex-direction: column;
    gap: var(--space-stack-xl);
  }

  .ui-inline-xs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-inline-xs);
  }
  .ui-inline-sm {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-inline-sm);
  }
  .ui-inline-md {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-inline-md);
  }
  .ui-inline-lg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-inline-lg);
  }

  .ui-responsive-grid-scope {
    container: responsive-grid / inline-size;
  }

  .ui-responsive-grid {
    display: grid;
    gap: var(--space-stack-md);
    grid-template-columns: repeat(var(--responsive-grid-base, 1), minmax(0, 1fr));
  }

  .ui-responsive-grid[data-flow="columns"] {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: var(--responsive-grid-column-width);
    align-items: start;
  }

  .ui-responsive-grid[data-align="start"] {
    align-items: start;
  }
  .ui-responsive-grid[data-align="stretch"] {
    align-items: stretch;
  }

  .ui-responsive-grid[data-gap="none"] {
    gap: 0;
  }
  .ui-responsive-grid[data-gap="xs"] {
    gap: var(--space-stack-xs);
  }
  .ui-responsive-grid[data-gap="sm"] {
    gap: var(--space-stack-sm);
  }
  .ui-responsive-grid[data-gap="md"] {
    gap: var(--space-stack-md);
  }
  .ui-responsive-grid[data-gap="lg"] {
    gap: var(--space-stack-lg);
  }
  .ui-responsive-grid[data-gap="xl"] {
    gap: var(--space-stack-xl);
  }

  .ui-responsive-grid[data-gap="0"] {
    gap: 0;
  }
  .ui-responsive-grid[data-gap="1"] {
    gap: var(--space-1);
  }
  .ui-responsive-grid[data-gap="2"] {
    gap: var(--space-2);
  }
  .ui-responsive-grid[data-gap="3"] {
    gap: var(--space-3);
  }
  .ui-responsive-grid[data-gap="4"] {
    gap: var(--space-4);
  }
  .ui-responsive-grid[data-gap="5"] {
    gap: var(--space-5);
  }
  .ui-responsive-grid[data-gap="6"] {
    gap: var(--space-6);
  }
  .ui-responsive-grid[data-gap="8"] {
    gap: var(--space-8);
  }
  .ui-responsive-grid[data-gap="10"] {
    gap: var(--space-10);
  }
  .ui-responsive-grid[data-gap="12"] {
    gap: var(--space-12);
  }

  .ui-responsive-grid > * {
    min-width: 0;
  }

  .ui-master-detail {
    display: flex;
    flex-wrap: wrap;
    gap: var(--master-detail-gap);
    --master-detail-rail-size: var(--master-detail-rail-standard);
  }

  .ui-master-detail[data-rail-width="compact"] {
    --master-detail-rail-size: var(--master-detail-rail-compact);
  }

  .ui-master-detail[data-collapse-below="false"] {
    --master-detail-collapse-below: 0px;
  }
  .ui-master-detail[data-collapse-below="sm"] {
    --master-detail-collapse-below: 40rem;
  }
  .ui-master-detail[data-collapse-below="md"] {
    --master-detail-collapse-below: 48rem;
  }
  .ui-master-detail[data-collapse-below="lg"] {
    --master-detail-collapse-below: 64rem;
  }
  .ui-master-detail[data-collapse-below="xl"] {
    --master-detail-collapse-below: 80rem;
  }

  .ui-master-detail-master,
  .ui-master-detail-detail {
    min-inline-size: 0;
  }

  .ui-master-detail[data-rail="detail"] > .ui-master-detail-master,
  .ui-master-detail[data-rail="master"] > .ui-master-detail-detail {
    flex: 1 1 calc((var(--master-detail-collapse-below) - 100%) * 999);
  }

  .ui-master-detail[data-rail="detail"] > .ui-master-detail-detail,
  .ui-master-detail[data-rail="master"] > .ui-master-detail-master {
    flex: 0 1
      max(var(--master-detail-rail-size), calc((var(--master-detail-collapse-below) - 100%) * 999));
  }

  .ui-master-detail[data-master-viewport="compact"] > .ui-master-detail-master,
  .ui-master-detail[data-master-viewport="standard"] > .ui-master-detail-master {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--master-detail-master-viewport-inset);
    scroll-padding-block: var(--master-detail-master-viewport-inset);
  }

  .ui-master-detail[data-master-viewport="compact"] > .ui-master-detail-master {
    max-block-size: var(--master-detail-master-viewport-compact);
  }

  .ui-master-detail[data-master-viewport="standard"] > .ui-master-detail-master {
    max-block-size: var(--master-detail-master-viewport-standard);
  }

  .ui-service-role-panel-list {
    display: flex;
    flex-direction: column;
    gap: var(--service-role-panel-list-gap);
    list-style: none;
  }

  .ui-service-role-panel-row {
    display: flex;
    align-items: center;
    gap: var(--service-role-panel-row-gap);
  }

  .ui-service-role-panel .ui-service-role-panel-item {
    padding-block: var(--service-role-panel-item-padding-block);
  }

  .ui-service-role-panel-item-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-inline-size: 0;
    line-height: var(--line-height-tight);
  }

  .ui-service-role-panel-item-title {
    display: inline-flex;
    align-items: center;
    gap: var(--service-role-panel-item-title-gap);
    max-inline-size: 100%;
  }

  @container responsive-grid (min-width: 40rem) {
    .ui-responsive-grid {
      grid-template-columns: repeat(var(--responsive-grid-sm, 2), minmax(0, 1fr));
    }
  }

  @container responsive-grid (min-width: 48rem) {
    .ui-responsive-grid {
      grid-template-columns: repeat(var(--responsive-grid-md, 3), minmax(0, 1fr));
    }
  }

  @container responsive-grid (min-width: 64rem) {
    .ui-responsive-grid {
      grid-template-columns: repeat(var(--responsive-grid-lg, 4), minmax(0, 1fr));
    }
  }

  .ui-split-pane-scope {
    container: split-pane / inline-size;
  }

  .ui-split-pane {
    display: grid;
    gap: var(--space-stack-md);
    grid-template-columns: minmax(0, 1fr);
  }

  .ui-split-pane[data-aside="closed"][data-aside-width] {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .ui-split-pane-scope[data-fill="true"] {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    block-size: 100%;
    min-block-size: 0;
  }

  .ui-split-pane[data-fill="true"] {
    grid-template-rows: minmax(0, 1fr);
    min-block-size: 0;
  }

  .ui-split-pane[data-fill="true"] > .ui-split-pane-main,
  .ui-split-pane[data-fill="true"] > .ui-split-pane-aside {
    min-block-size: 0;
  }

  .ui-resizable-panel-group {
    display: flex;
    min-height: 0;
    width: 100%;
    height: 100%;
  }

  .ui-resizable-panel {
    min-height: 0;
    min-width: 0;
  }

  .ui-resizable-handle {
    width: var(--control-border-width);
    background: hsl(var(--border));
    position: relative;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(var(--muted-foreground));
  }

  .ui-resizable-handle[aria-orientation="vertical"] {
    width: auto;
    height: var(--control-border-width);
  }

  .ui-resizable-handle:hover,
  .ui-resizable-handle[data-separator="active"] {
    background: hsl(var(--accent));
  }

  .ui-resizable-handle:hover::after,
  .ui-resizable-handle[data-separator="active"]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: hsl(var(--accent-foreground) / 0.2);
  }

  .ui-resizable-handle[data-separator="disabled"] {
    cursor: not-allowed;
    opacity: 0.5;
  }

  @container split-pane (min-width: 48rem) {
    .ui-split-pane[data-aside-width="sm"] {
      grid-template-columns: minmax(0, 1fr) 20rem;
    }

    .ui-split-pane[data-aside-width="md"] {
      grid-template-columns: minmax(0, 1fr) 22rem;
    }
  }

  @container split-pane (min-width: 64rem) {
    .ui-split-pane[data-aside-width="lg"] {
      grid-template-columns: minmax(0, 1fr) 30rem;
    }
  }

  .ui-split-pane-main,
  .ui-split-pane-aside {
    min-width: 0;
  }

  .ui-page-container {
    --page-band-gap: var(--space-section-active);
    --page-body-gap: var(--space-section-active);
    --page-body-gap: var(--space-section-active);

    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: var(--space-page-active-y) 0;
    gap: var(--page-band-gap);
  }

  .ui-page-container[data-header-scale="chrome"] {
    padding-block-start: var(--page-pad-block-start-chrome);
  }

  .ui-page-container[data-header-scale="chrome"] .ui-page-header {
    min-block-size: var(--page-header-min-block-size-chrome);
    justify-content: center;
  }

  .ui-page-header,
  .ui-page-toolbar,
  .ui-page-body,
  .ui-page-footer {
    padding-inline-start: var(--space-page-active-x);
    padding-inline-end: var(--space-page-active-x);
    padding-block-end: var(--page-footer-pad-block-end);
  }

  .ui-page-container--narrow .ui-page-body {
    max-width: 42rem;
  }

  .ui-page-container[data-measure="narrow"] .ui-page-header,
  .ui-page-container[data-measure="narrow"] .ui-page-toolbar,
  .ui-page-container[data-measure="narrow"] .ui-page-body {
    max-inline-size: var(--page-measure-narrow);
  }

  .ui-page-container[data-measure="medium"] .ui-page-header,
  .ui-page-container[data-measure="medium"] .ui-page-toolbar,
  .ui-page-container[data-measure="medium"] .ui-page-body {
    max-inline-size: var(--page-measure-medium);
  }

  .ui-page-container[data-measure="narrow"] .ui-page-footer {
    --page-footer-content-slack: max(0px, 100% - var(--page-measure-narrow));
  }

  .ui-page-container[data-measure="medium"] .ui-page-footer {
    --page-footer-content-slack: max(0px, 100% - var(--page-measure-medium));
  }

  .ui-page-container--flush .ui-page-toolbar,
  .ui-page-container--flush .ui-page-body {
    padding-inline-start: 0;
    padding-inline-end: 0;
  }

  .ui-page-container-inset,
  .ui-page-inset {
    padding-inline-start: var(--space-page-active-x);
    padding-inline-end: var(--space-page-active-x);
  }

  .ui-page-container--ghost .ui-page-header {
    border-bottom: var(--page-header-divider, none);
    padding-bottom: 0;
  }

  .ui-page-container--ghost .ui-page-toolbar {
    border-block-end: var(--page-toolbar-divider, none);
  }

  .ui-page-container--ghost {
    --page-band-gap: var(--space-stack-md);
  }

  .ui-page-container--sticky-footer {
    min-height: 100%;

    padding-block-end: 0;
  }

  .ui-page-container--sticky-footer .ui-page-body {
    flex: 1;
    padding-block-end: var(--space-page-active-y);
  }

  .ui-page-container--sticky-footer .ui-page-footer {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin-top: auto;
    background-color: hsl(var(--background));
  }

  .ui-page-container--reveal-footer .ui-page-footer {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition:
      transform 200ms ease-out,
      opacity 200ms ease-out;
  }

  .ui-page-container--reveal-footer[data-revealed="true"] .ui-page-footer {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  @media (prefers-reduced-motion: reduce) {
    .ui-page-container--reveal-footer .ui-page-footer {
      transition: none;
    }
  }

  .ui-page-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-stack-sm);
    padding-bottom: var(--page-header-pad-bottom);
    border-bottom: var(--page-header-divider);

    background-image: var(--gradient-hero);
  }

  .ui-page-toolbar {
    flex: none;
    margin-block: calc(-1 * var(--page-band-gap));
    padding-block: var(--page-toolbar-pad-block);
    background: var(--page-toolbar-background);
    border-block-end: var(--page-toolbar-divider, var(--page-header-divider));
  }

  .ui-page-toolbar:last-child {
    margin-block-end: 0;
  }

  .ui-page-header-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-stack-sm);
  }

  .ui-page-header-heading {
    min-inline-size: 0;
  }

  .ui-page-header-extra {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-inline-sm);
    width: 100%;
  }

  .ui-page-header-extra > .ui-flex[data-direction="row"] {
    flex-wrap: wrap;
    max-inline-size: 100%;
  }

  .ui-page-header-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--page-header-status-gap);
    min-inline-size: 0;
  }

  .ui-page-header-title-row > .ui-page-title {
    min-inline-size: 0;
  }

  .ui-page-header-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--page-header-status-gap);
    min-inline-size: 0;
  }

  .ui-page-title {
    font-size: var(--page-title-font-size);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
    overflow-wrap: anywhere;
  }

  .ui-page-container[data-header-scale="chrome"] .ui-page-title {
    font-size: var(--page-title-font-size-chrome);
  }

  @media (max-width: 720px) {
    .ui-page-container {
      --space-page-active-x: var(--space-page-compact-x);
      --space-page-active-y: var(--space-page-compact-y);
      --space-section-active: var(--space-section-compact);
    }

    .ui-page-title {
      font-size: var(--page-title-font-size-compact);
    }

    .ui-page-header .ui-page-subtitle {
      font-size: var(--page-subtitle-font-size-compact);
    }
  }

  @media (max-width: 639.98px) {
    .ui-page-header[data-layout="responsive-inline"] .ui-page-header-row {
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-inline-md);
    }

    .ui-page-header[data-layout="responsive-inline"] .ui-page-header-heading {
      flex: 1 1 auto;
      min-inline-size: 0;
    }

    .ui-page-header[data-layout="responsive-inline"] .ui-page-header-extra {
      flex: 0 0 var(--page-header-extra-measure);
      inline-size: var(--page-header-extra-measure);
      max-inline-size: 100%;
      justify-content: flex-end;
    }
  }

  @media (min-width: 640px) {
    .ui-page-header-row {
      flex-direction: row;
      align-items: flex-start;
      justify-content: space-between;
      gap: var(--space-inline-lg);
    }

    .ui-page-header-extra {
      width: auto;
      flex-shrink: 1;
      min-inline-size: auto;
      justify-content: flex-end;
    }

    .ui-page-container[data-header-scale="chrome"] .ui-page-header-extra {
      align-self: center;
    }
  }

  .ui-page-subtitle {
    font-size: var(--page-subtitle-font-size);
    color: hsl(var(--muted-foreground));
    margin-top: var(--space-1);
  }

  .ui-page-container[data-header-scale="chrome"] .ui-page-subtitle {
    font-size: var(--page-subtitle-font-size-chrome);
  }

  .ui-page-title-placeholder {
    inline-size: var(--page-title-placeholder-measure);
    max-inline-size: 100%;
    min-block-size: var(--page-title-placeholder-block-size);
  }

  .ui-page-subtitle-placeholder {
    inline-size: var(--page-subtitle-placeholder-measure);
    max-inline-size: 100%;
    min-block-size: var(--page-subtitle-placeholder-block-size);
  }

  .ui-page-body {
    min-width: 0;
    container-type: inline-size;
  }

  .ui-page-body > * + * {
    margin-block-start: var(--page-body-gap);
  }

  .ui-page-body > * + * {
    margin-block-start: var(--page-body-gap);
  }

  .ui-page-container--fill {
    flex: 1;
    min-height: 0;
  }

  .ui-page-container--fill .ui-page-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  .ui-page-footer {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: var(--space-inline-sm);
    padding-top: var(--space-stack-md);
    padding-inline-end: calc(var(--space-page-active-x) + var(--page-footer-content-slack));
    border-top: var(--page-footer-divider, 1px solid hsl(var(--border)));
  }

  .ui-page-footer > * {
    width: 100%;
  }

  @media (min-width: 640px) {
    .ui-page-footer {
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
    }

    .ui-page-footer > * {
      width: auto;
    }
  }

  .ui-breadcrumb {
    font-size: var(--breadcrumb-font-size);
    color: hsl(var(--muted-foreground));
  }

  .ui-breadcrumb-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-inline-xs);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .ui-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-inline-xs);
  }

  .ui-breadcrumb-item svg {
    width: 0.75rem;
    height: 0.75rem;
  }

  .ui-breadcrumb-link:hover {
    color: hsl(var(--foreground));
    text-decoration: underline;
  }

  .ui-breadcrumb-current[aria-current="page"] {
    color: hsl(var(--foreground));
  }

  .ui-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-stack-md);
    text-align: center;
    padding: var(--empty-state-space-y) var(--empty-state-space-x);
  }

  .ui-empty-state[data-variant="page"] {
    min-block-size: 100%;
    justify-content: center;
  }

  .ui-empty-state-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
  }

  .ui-empty-state-description {
    font-size: var(--font-size-base);
    color: hsl(var(--muted-foreground));
    max-width: var(--empty-state-description-max-width);
  }

  .ui-empty-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--empty-state-icon-size);
    block-size: var(--empty-state-icon-size);
    border-radius: var(--radius-pill);

    background-color: var(--empty-state-icon-tint, hsl(var(--muted)));
    color: var(--empty-state-icon-foreground, hsl(var(--muted-foreground)));
  }

  .ui-empty-state-icon svg {
    inline-size: var(--empty-state-icon-glyph-size);
    block-size: var(--empty-state-icon-glyph-size);
  }

  .ui-empty-state[data-tone="success"] {
    --empty-state-icon-foreground: hsl(var(--success));
    --empty-state-icon-tint: hsl(var(--success) / 0.12);
  }
  .ui-empty-state[data-tone="warning"] {
    --empty-state-icon-foreground: hsl(var(--warning));
    --empty-state-icon-tint: hsl(var(--warning) / 0.12);
  }
  .ui-empty-state[data-tone="destructive"] {
    --empty-state-icon-foreground: hsl(var(--destructive));
    --empty-state-icon-tint: hsl(var(--destructive) / 0.12);
  }
  .ui-empty-state[data-tone="info"] {
    --empty-state-icon-foreground: hsl(var(--info));
    --empty-state-icon-tint: hsl(var(--info) / 0.12);
  }
}

@layer components {
  .ui-page-container[data-preset="admin-collection"] {
    --control-height: var(--admin-collection-control-height);
    --space-section-active: var(--admin-collection-section-gap);
    --filter-bar-padding-y: var(--admin-collection-toolbar-padding-y);
    --table-row-height: var(--admin-collection-table-row-height);
    --table-cell-padding-y: var(--admin-collection-table-cell-padding-y);
  }

  .ui-page-container[data-preset="admin-collection"] .ui-toolbar .ui-search-input {
    inline-size: min(100%, var(--admin-collection-search-measure));
  }
}

@layer components {

  .ui-pagination {
    display: flex;
    flex-wrap: nowrap;
    min-width: 0;
    align-items: center;

    justify-content: safe flex-end;
    gap: var(--pagination-gap);
  }

  .ui-pagination-total {
    min-width: 0;
    margin-inline-end: auto;
    overflow: hidden;
    color: hsl(var(--muted-foreground));
    font-size: var(--pagination-total-font-size);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ui-pagination-count {
    color: hsl(var(--muted-foreground));
    font-size: var(--pagination-total-font-size);
    font-variant-numeric: tabular-nums;
  }

  .ui-pagination-size-trigger {

    height: var(--control-height);
  }

  .ui-pagination-list {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--pagination-item-gap);

    overflow-x: auto;
    scrollbar-width: none;
  }

  .ui-pagination-list::-webkit-scrollbar {
    display: none;
  }

  .ui-pagination-item {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
  }

  .ui-pagination-ellipsis {
    display: flex;
    width: var(--control-height);
    height: var(--control-height);
    align-items: center;
    justify-content: center;
    color: hsl(var(--muted-foreground));
  }

  .ui-pagination-link {
    display: inline-flex;
    min-width: var(--control-height);
    height: var(--control-height);
    align-items: center;
    justify-content: center;
    padding-inline: var(--pagination-page-padding-x);
    border-radius: var(--radius-sm);
    border: 1px solid hsl(var(--border));
    color: hsl(var(--foreground));
    text-decoration: none;
  }

  .ui-pagination-link[data-active="true"] {
    border-color: hsl(var(--ring) / 0.5);
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
  }

  .ui-pagination-link:hover,
  .ui-pagination-link[data-state="open"],
  .ui-pagination-link[data-state="on"] {
    background: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
  }

  .ui-pagination-link[data-active="true"]:hover {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
  }

  .ui-pagination-link[data-state="disabled"],
  .ui-pagination-link[aria-disabled="true"],
  .ui-pagination-link-disabled {
    pointer-events: none;
    opacity: 0.5;
  }

  .ui-pagination-prev,
  .ui-pagination-next {
    gap: var(--space-2);
  }

  .ui-pagination-page {
    font-variant-numeric: tabular-nums;
  }

  .ui-toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--filter-bar-gap);
    padding-block: var(--filter-bar-padding-y);
  }

  @media (min-width: 640px) {
    .ui-toolbar {
      flex-flow: row wrap;
      align-items: flex-end;
    }
  }

  .ui-toolbar-sticky {
    position: sticky;
    inset-block-start: var(--filter-bar-sticky-offset);
    z-index: 20;
    background: hsl(var(--filter-bar-sticky-background, var(--background)));
  }

  .ui-toolbar-clear {
    width: 100%;
  }

  @media (min-width: 640px) {
    .ui-toolbar-clear {
      width: auto;
      margin-inline-start: auto;
    }
  }

  .ui-toolbar-group {
    min-width: 0;
    width: 100%;
  }

  @media (min-width: 640px) {
    .ui-toolbar-group {
      width: auto;
    }
  }

  .ui-toolbar-label {
    display: flex;
    align-items: center;
    color: hsl(var(--muted-foreground));
    font-size: var(--filter-label-font-size);
  }

  @media (min-width: 640px) {
    .ui-toolbar[data-overflow="scroll"] {
      flex-wrap: nowrap;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scrollbar-gutter: stable;
      padding-block-end: var(--filter-bar-scroll-padding-y);
    }

    .ui-toolbar[data-overflow="scroll"] > .ui-toolbar-group {
      flex: 0 0 auto;
    }

    .ui-toolbar[data-overflow="scroll"] > .ui-toolbar-clear {
      position: sticky;
      inset-inline-end: 0;
      margin-inline-start: auto;
      flex: 0 0 auto;

      z-index: 1;
      background: hsl(var(--filter-bar-sticky-background, var(--background)));
    }

    .ui-toolbar[data-overflow="scroll"] > .ui-filter-bar-end {
      position: sticky;
      inset-inline-end: 0;
      margin-inline-start: auto;
      flex: 0 0 auto;
      z-index: 1;
      background: hsl(var(--filter-bar-sticky-background, var(--background)));
    }
  }

  .ui-filter-bar {
    display: flex;
    flex-direction: column;
    gap: var(--filter-bar-section-gap);
  }

  .ui-filter-bar .ui-filter-bar-search {
    inline-size: 100%;
  }

  .ui-filter-bar-end {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
  }

  .ui-filter-bar-end .ui-toolbar-clear {
    margin-inline-start: 0;
  }

  .ui-filter-bar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  @media (min-width: 640px) {
    .ui-filter-bar .ui-filter-bar-search {
      inline-size: min(100%, var(--filter-bar-search-width));
    }

    .ui-filter-bar .ui-filter-bar-filter {
      min-inline-size: min(100%, var(--filter-bar-filter-width));
    }

    .ui-filter-bar-end {
      width: auto;
      margin-inline-start: auto;
    }
  }

  .ui-filter-bar-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--filter-bar-chip-gap);
  }

  .ui-filter-bar-chip {
    display: inline-flex;
    align-items: center;
    min-width: 0;
  }

  .ui-filter-bar-meta {
    font-size: var(--filter-label-font-size);
    color: hsl(var(--muted-foreground));
  }

  .ui-filter-bar-error {
    color: hsl(var(--text-error));
  }

  .ui-legal-document-scope {
    container: legal-document / inline-size;
  }

  .ui-legal-document {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--legal-document-section-gap);
    align-items: start;
    min-width: 0;
  }

  .ui-legal-document-header {
    display: flex;
    flex-direction: column;
    gap: var(--legal-document-header-gap);
    min-width: 0;
    max-width: var(--legal-document-measure-max-width);
    border-block-end: var(--legal-document-header-border);
  }

  .ui-legal-document-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--legal-document-meta-gap);
    font-size: var(--legal-document-meta-font-size);
    color: hsl(var(--legal-document-meta-foreground, var(--muted-foreground)));
  }

  .ui-legal-document-summary,
  .ui-legal-document-section-body {
    min-width: 0;
    line-height: var(--legal-document-body-line-height);
    overflow-wrap: break-word;
    word-break: normal;
    line-break: strict;
  }

  .ui-legal-document-summary {
    color: hsl(var(--legal-document-summary-foreground, var(--muted-foreground)));
  }

  .ui-legal-document-rail {
    display: flex;
    flex-direction: column;
    gap: var(--legal-document-nav-gap);
    min-width: 0;
  }

  .ui-legal-document-toc {
    display: flex;
    flex-direction: column;
    gap: var(--legal-document-toc-gap);
    min-width: 0;
    min-height: 0;
    border-inline-end: var(--legal-document-toc-border);
  }

  .ui-legal-document-toc-title {
    font-size: var(--legal-document-toc-title-font-size);
    color: hsl(var(--legal-document-toc-foreground, var(--muted-foreground)));
  }

  .ui-legal-document-toc-list {
    display: flex;
    flex-direction: column;
    gap: var(--legal-document-toc-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
    min-height: 0;
  }

  .ui-legal-document-toc-link {
    display: block;
    padding: var(--legal-document-toc-item-padding);
    border-radius: var(--legal-document-toc-item-radius);
    border-inline-start: var(--legal-document-toc-marker-width) solid transparent;
    font-size: var(--legal-document-toc-font-size);
    line-height: 1.6;
    color: hsl(var(--legal-document-toc-foreground, var(--muted-foreground)));
    text-decoration: none;
    overflow-wrap: break-word;
    transition-property: color, background-color, border-color;
    transition-duration: var(--duration-fast);
  }

  .ui-legal-document-toc-link:hover {
    color: hsl(var(--legal-document-toc-active-foreground, var(--foreground)));
    background: hsl(var(--legal-document-toc-active-background, var(--accent)) / 0.6);
  }

  .ui-legal-document-toc-link[data-active] {
    color: hsl(var(--legal-document-toc-active-foreground, var(--foreground)));
    background: hsl(var(--legal-document-toc-active-background, var(--accent)));
    border-inline-start-color: hsl(var(--legal-document-toc-marker-color, var(--primary)));
    font-weight: var(--font-weight-medium);
  }

  .ui-legal-document-content {
    display: flex;
    flex-direction: column;
    gap: var(--legal-document-section-gap);
    min-width: 0;
    max-width: var(--legal-document-measure-max-width);
  }

  .ui-legal-document-section {
    display: flex;
    flex-direction: column;
    gap: var(--legal-document-section-title-gap);
    min-width: 0;
    scroll-margin-block-start: var(--legal-document-scroll-offset);
  }

  .ui-legal-document-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--legal-document-footer-gap);
    min-width: 0;
    max-width: var(--legal-document-measure-max-width);
    border-block-start: var(--legal-document-footer-border);
  }

  @container legal-document (min-width: 56rem) {
    .ui-legal-document {
      grid-template-columns:
        var(--legal-document-toc-width)
        minmax(0, var(--legal-document-measure-max-width));
      column-gap: var(--legal-document-column-gap);
    }

    .ui-legal-document-header {
      grid-column: 2;
      grid-row: 1;
    }

    .ui-legal-document-rail {
      grid-column: 1;
      grid-row: 1 / span 3;
      position: sticky;
      inset-block-start: var(--legal-document-toc-inset-block-start);
      align-self: start;
      max-height: var(--legal-document-toc-max-height);
      overflow-y: auto;
    }

    .ui-legal-document-content {
      grid-column: 2;
      grid-row: 2;
    }

    .ui-legal-document-footer {
      grid-column: 2;
      grid-row: 3;
    }
  }
}

@layer components {

  @media (width < 40rem) {
    .ui-flex[data-hide-below="sm"],
    .app-topbar-brand[data-hide-below="sm"],
    .ui-topbar-item[data-hide-below="sm"],
    [data-slot="table-head"][data-hide-below="sm"],
    [data-slot="table-cell"][data-hide-below="sm"] {
      display: none;
    }
  }

  @media (width < 48rem) {
    .ui-flex[data-hide-below="md"],
    .app-topbar-brand[data-hide-below="md"],
    .ui-topbar-item[data-hide-below="md"],
    [data-slot="table-head"][data-hide-below="md"],
    [data-slot="table-cell"][data-hide-below="md"] {
      display: none;
    }
  }

  @media (width < 64rem) {
    .ui-flex[data-hide-below="lg"],
    .app-topbar-brand[data-hide-below="lg"],
    .ui-topbar-item[data-hide-below="lg"],
    [data-slot="table-head"][data-hide-below="lg"],
    [data-slot="table-cell"][data-hide-below="lg"] {
      display: none;
    }
  }

  @media (width < 80rem) {
    .ui-flex[data-hide-below="xl"],
    .app-topbar-brand[data-hide-below="xl"],
    .ui-topbar-item[data-hide-below="xl"],
    [data-slot="table-head"][data-hide-below="xl"],
    [data-slot="table-cell"][data-hide-below="xl"] {
      display: none;
    }
  }

  @media (width >= 40rem) {
    .ui-flex[data-hide-from="sm"],
    .app-topbar-brand[data-hide-from="sm"],
    .ui-topbar-item-icon[data-hide-from="sm"] {
      display: none;
    }
  }

  @media (width >= 48rem) {
    .ui-flex[data-hide-from="md"],
    .app-topbar-brand[data-hide-from="md"],
    .ui-topbar-item-icon[data-hide-from="md"] {
      display: none;
    }
  }

  @media (width >= 64rem) {
    .ui-flex[data-hide-from="lg"],
    .app-topbar-brand[data-hide-from="lg"],
    .ui-topbar-item-icon[data-hide-from="lg"] {
      display: none;
    }
  }

  @media (width >= 80rem) {
    .ui-flex[data-hide-from="xl"],
    .app-topbar-brand[data-hide-from="xl"],
    .ui-topbar-item-icon[data-hide-from="xl"] {
      display: none;
    }
  }

  @media (width < 40rem) {
    .ui-topbar-item-label[data-hide-below="sm"] {
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      inline-size: var(--stroke-hairline);
      block-size: var(--stroke-hairline);
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  @media (width < 48rem) {
    .ui-topbar-item-label[data-hide-below="md"] {
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      inline-size: var(--stroke-hairline);
      block-size: var(--stroke-hairline);
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  @media (width < 64rem) {
    .ui-topbar-item-label[data-hide-below="lg"] {
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      inline-size: var(--stroke-hairline);
      block-size: var(--stroke-hairline);
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  @media (width < 80rem) {
    .ui-topbar-item-label[data-hide-below="xl"] {
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      inline-size: var(--stroke-hairline);
      block-size: var(--stroke-hairline);
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }
}

@layer components {
  .ui-master-detail-back {
    display: none;
  }
  .ui-master-detail[data-mobile-pane] {
    position: relative;
  }
  .ui-master-detail-measure {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    block-size: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
  }
  .ui-master-detail-measure > span {
    display: block;
    inline-size: var(--master-detail-collapse-below);
    block-size: 0;
  }
  .ui-master-detail[data-mobile-compact][data-mobile-pane="master"] > .ui-master-detail-detail,
  .ui-master-detail[data-mobile-compact][data-mobile-pane="detail"] > .ui-master-detail-master {
    display: none;
  }
  .ui-master-detail[data-mobile-compact] > .ui-master-detail-master {
    max-block-size: none;
    overflow: visible;
  }
  .ui-master-detail[data-mobile-compact] .ui-master-detail-back {
    display: block;
    margin-block-end: var(--space-3);
  }
}

@layer components {
  .ui-flex[data-grow] {
    flex-grow: 1;
  }
  .ui-flex[data-shrink="false"] {
    flex-shrink: 0;
  }
  .ui-flex[data-direction="responsive"] {
    flex-direction: var(--flex-direction-base, row);
  }
  .ui-flex[data-list] {
    list-style-position: outside;
    padding-inline-start: var(--space-5);
  }
  .ui-flex[data-list="disc"] {
    list-style-type: disc;
  }
  .ui-flex[data-list="decimal"] {
    list-style-type: decimal;
  }
  .ui-flex[data-list] > li {
    display: list-item;
  }
  .ui-flex[data-surface] {
    border-radius: var(--flex-surface-radius, var(--radius-md));
  }
  .ui-flex[data-surface="muted"] {
    background: var(--flex-surface-background, hsl(var(--muted)));
  }
  .ui-flex[data-surface="warning"] {
    background: var(
      --flex-surface-background,
      hsl(var(--warning) / var(--flex-surface-warning-alpha))
    );
  }
  .ui-flex[data-surface="popover"] {
    background: var(--flex-surface-background, hsl(var(--popover)));
    border: var(--stroke-hairline) solid hsl(var(--border));
    box-shadow: var(--shadow-sm);
  }
  .ui-flex:has(> .ui-flex[data-reveal="hover"]) {
    position: relative;
  }
  .ui-flex[data-reveal="hover"] {
    position: absolute;
    inset-block-start: var(--flex-actions-offset-block, 0);
    inset-inline-end: var(--flex-actions-offset-inline, 0);
    opacity: 0;
    pointer-events: none;
  }
  .ui-flex:hover > .ui-flex[data-reveal="hover"],
  .ui-flex:focus-within > .ui-flex[data-reveal="hover"] {
    opacity: 1;
    pointer-events: auto;
  }
  @media (hover: none) {
    .ui-flex[data-reveal="hover"] {
      opacity: 1;
      pointer-events: auto;
    }
  }
  .ui-master-detail[data-rail-width="narrow"] {
    --master-detail-rail-size: var(--master-detail-rail-narrow);
  }
  .ui-master-detail[data-rail-width="wide"] {
    --master-detail-rail-size: var(--master-detail-rail-wide);
  }
  .ui-responsive-grid-item {
    grid-column: span min(var(--responsive-grid-base, 1), var(--responsive-grid-item-base, 1));
  }
  @container responsive-grid (min-width: 40rem) {
    .ui-responsive-grid-item {
      grid-column: span min(var(--responsive-grid-sm, 1), var(--responsive-grid-item-sm, 1));
    }
  }
  @container responsive-grid (min-width: 48rem) {
    .ui-responsive-grid-item {
      grid-column: span min(var(--responsive-grid-md, 1), var(--responsive-grid-item-md, 1));
    }
  }
  @container responsive-grid (min-width: 64rem) {
    .ui-responsive-grid-item {
      grid-column: span min(var(--responsive-grid-lg, 1), var(--responsive-grid-item-lg, 1));
    }
  }
  .ui-separator[data-label-size="2xs"] .ui-separator-label {
    font-size: var(
      --font-size-2xs,
      calc(var(--font-size-base) / var(--font-size-ratio) / var(--font-size-ratio))
    );
  }
  .ui-separator[data-label-size="xs"] .ui-separator-label {
    font-size: var(--font-size-xs, calc(var(--font-size-base) / var(--font-size-ratio)));
  }
  .ui-separator[data-label-size="sm"] .ui-separator-label {
    font-size: var(--font-size-sm, var(--font-size-base));
  }
  .ui-separator[data-label-size="md"] .ui-separator-label {
    font-size: var(--font-size-base);
  }
}
@layer components {
  @media (min-width: 40rem) {
    .ui-flex[data-direction="responsive"] {
      flex-direction: var(--flex-direction-sm, var(--flex-direction-base, row));
    }
    .ui-separator[data-hide-from="sm"] {
      display: none;
    }
  }
  @media (width < 40rem) {
    .ui-separator[data-hide-below="sm"] {
      display: none;
    }
  }
}
@layer components {
  @media (min-width: 48rem) {
    .ui-flex[data-direction="responsive"] {
      flex-direction: var(
        --flex-direction-md,
        var(--flex-direction-sm, var(--flex-direction-base, row))
      );
    }
    .ui-separator[data-hide-from="md"] {
      display: none;
    }
  }
  @media (width < 48rem) {
    .ui-separator[data-hide-below="md"] {
      display: none;
    }
  }
}
@layer components {
  @media (min-width: 64rem) {
    .ui-flex[data-direction="responsive"] {
      flex-direction: var(
        --flex-direction-lg,
        var(--flex-direction-md, var(--flex-direction-sm, var(--flex-direction-base, row)))
      );
    }
    .ui-separator[data-hide-from="lg"] {
      display: none;
    }
  }
  @media (width < 64rem) {
    .ui-separator[data-hide-below="lg"] {
      display: none;
    }
  }
}
@layer components {
  @media (min-width: 80rem) {
    .ui-flex[data-direction="responsive"] {
      flex-direction: var(
        --flex-direction-xl,
        var(
          --flex-direction-lg,
          var(--flex-direction-md, var(--flex-direction-sm, var(--flex-direction-base, row)))
        )
      );
    }
    .ui-separator[data-hide-from="xl"] {
      display: none;
    }
  }
  @media (width < 80rem) {
    .ui-separator[data-hide-below="xl"] {
      display: none;
    }
  }
}

@layer components {
  .ui-topbar[data-height="bar"] {
    min-block-size: var(--app-shell-bar-height);
    padding-inline: var(--app-shell-bar-inset);
  }
}

@layer components {
  .ui-flex[data-direction="responsive"].ui-flex-gap-xs,
  .ui-flex[data-direction="row"][data-wrap="true"].ui-flex-gap-xs {
    row-gap: var(--space-stack-xs);
    column-gap: var(--space-inline-xs);
  }
  .ui-flex[data-direction="responsive"].ui-flex-gap-sm,
  .ui-flex[data-direction="row"][data-wrap="true"].ui-flex-gap-sm {
    row-gap: var(--space-stack-sm);
    column-gap: var(--space-inline-sm);
  }
  .ui-flex[data-direction="responsive"].ui-flex-gap-md,
  .ui-flex[data-direction="row"][data-wrap="true"].ui-flex-gap-md {
    row-gap: var(--space-stack-md);
    column-gap: var(--space-inline-md);
  }
  .ui-flex[data-direction="responsive"].ui-flex-gap-lg,
  .ui-flex[data-direction="row"][data-wrap="true"].ui-flex-gap-lg {
    row-gap: var(--space-stack-lg);
    column-gap: var(--space-inline-lg);
  }
  .ui-flex[data-direction="responsive"].ui-flex-gap-xl,
  .ui-flex[data-direction="row"][data-wrap="true"].ui-flex-gap-xl {
    row-gap: var(--space-stack-xl);
    column-gap: var(--space-inline-xl);
  }
}

@layer components {

  .ui-actions {
    display: flex;
    min-inline-size: 0;
    align-items: center;
    gap: var(--actions-gap);
    border-radius: var(--actions-radius);
  }

  .ui-actions[data-variant="filled"],
  .ui-actions[data-variant="outlined"] {
    padding-block: var(--actions-padding-block);
    padding-inline: var(--actions-padding-inline);
  }

  .ui-actions[data-variant="filled"] {
    background: var(--actions-filled-background, hsl(var(--muted)));
  }

  .ui-actions[data-variant="outlined"] {
    border: var(--actions-outlined-border, var(--stroke-hairline) solid hsl(var(--border)));
  }

  .ui-actions-feedback {
    display: flex;
    align-items: center;
    gap: var(--actions-gap);
  }

  .ui-actions-feedback [data-pressed] {
    color: hsl(var(--primary));
  }

  @keyframes ui-actions-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes ui-actions-fade-in-inline {
    from {
      opacity: 0;
      translate: calc(-1 * var(--actions-fade-offset-inline)) 0;
    }
    to {
      opacity: 1;
      translate: 0 0;
    }
  }

  [dir="rtl"] .ui-actions[data-fade-in-inline] {
    --actions-fade-offset-inline: calc(-1 * var(--space-2));
  }

  .ui-actions[data-fade-in] {
    animation: ui-actions-fade-in var(--duration-base) var(--ease-standard, ease) both;
  }

  .ui-actions[data-fade-in-inline] {
    animation: ui-actions-fade-in-inline var(--duration-base) var(--ease-standard, ease) both;
  }

  @media (prefers-reduced-motion: reduce) {
    .ui-actions[data-fade-in],
    .ui-actions[data-fade-in-inline] {
      animation: none;
    }
  }
}

@layer components {

  .ui-draggable-panel {
    position: fixed;
    z-index: var(--overlay-z-index);
    display: flex;
    flex-direction: column;
    inline-size: var(--draggable-panel-width);
    max-inline-size: calc(100% - var(--draggable-panel-inset) - var(--draggable-panel-inset));
    block-size: var(--draggable-panel-block-size);
    max-block-size: var(--draggable-panel-max-block-size);
    border: var(--draggable-panel-border-width) solid hsl(var(--border));
    border-radius: var(--draggable-panel-radius);
    background-color: hsl(var(--background));
    box-shadow: var(--draggable-panel-shadow);
    overflow: hidden;
    translate: calc(var(--draggable-panel-offset-x) * 1px)
      calc(var(--draggable-panel-offset-y) * 1px);
    transition: translate var(--duration-fast) var(--ease-standard);
  }

  .ui-draggable-panel[data-width="sm"] {
    inline-size: var(--draggable-panel-width-sm);
  }

  .ui-draggable-panel[data-width="lg"] {
    inline-size: var(--draggable-panel-width-lg);
  }

  .ui-draggable-panel[data-width="xl"] {
    inline-size: var(--draggable-panel-width-xl);
  }

  .ui-draggable-panel[data-placement^="top"] {
    inset-block-start: var(--draggable-panel-inset);
  }

  .ui-draggable-panel[data-placement^="bottom"] {
    inset-block-end: var(--draggable-panel-inset);
  }

  .ui-draggable-panel[data-placement$="start"] {
    inset-inline-start: var(--draggable-panel-inset);
  }

  .ui-draggable-panel[data-placement$="end"] {
    inset-inline-end: var(--draggable-panel-inset);
  }

  .ui-draggable-panel[data-dragging] {
    transition: none;
    user-select: none;
  }

  .ui-draggable-panel-bar {
    display: flex;
    align-items: center;
    gap: var(--draggable-panel-bar-gap);
    padding: var(--draggable-panel-bar-padding);
    border-block-end: var(--draggable-panel-border-width) solid hsl(var(--border));
    background-color: hsl(var(--muted) / 0.4);
  }

  .ui-draggable-panel-handle {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: hsl(var(--muted-foreground));
    cursor: grab;
    touch-action: none;
  }

  .ui-draggable-panel[data-dragging] .ui-draggable-panel-handle {
    cursor: grabbing;
  }

  .ui-draggable-panel-handle[aria-disabled="true"] {
    cursor: default;
  }

  .ui-draggable-panel-handle-icon,
  .ui-draggable-panel-close-icon {
    inline-size: var(--draggable-panel-handle-size);
    block-size: var(--draggable-panel-handle-size);
  }

  .ui-draggable-panel-title {
    min-inline-size: 0;
    flex: 1;
    overflow: hidden;
    font-weight: var(--font-weight-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ui-draggable-panel-extra {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--draggable-panel-bar-gap);
  }

  .ui-draggable-panel-close {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: hsl(var(--muted-foreground));
  }

  .ui-draggable-panel-body {
    min-block-size: 0;
    flex: 1;
    padding: var(--draggable-panel-body-padding);
    overflow-y: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ui-draggable-panel {
    transition: none;
  }
}

@layer components {

  .ui-masonry {
    position: relative;
    box-sizing: border-box;

    column-gap: var(--masonry-gap-inline);
    row-gap: var(--masonry-gap-block);
  }

  .ui-masonry-item {
    position: absolute;
    box-sizing: border-box;

    --masonry-item-track: calc((100% + var(--masonry-gap-inline)) / var(--masonry-column-count, 3));
    inline-size: calc(var(--masonry-item-track) - var(--masonry-gap-inline));

    inset-inline-start: calc(var(--masonry-item-track) * var(--masonry-item-column, 0));
    inset-block-start: 0;

    opacity: 0;
    transition:
      opacity var(--duration-base) var(--ease-standard),
      inset-block-start var(--duration-base) var(--ease-standard),
      inset-inline-start var(--duration-base) var(--ease-standard);
  }

  .ui-masonry-item[data-positioned] {
    opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .ui-masonry-item {
      transition: none;
    }
  }

  .ui-affix {

    position: relative;
  }

  .ui-affix-sentinel {
    position: absolute;
    inset-inline: 0;

    block-size: 1px;
    pointer-events: none;
  }

  .ui-affix-sentinel[data-edge="block-start"] {
    inset-block-start: calc(-1 * var(--affix-inset-block-start));
  }

  .ui-affix-sentinel[data-edge="block-end"] {
    inset-block-end: calc(-1 * var(--affix-inset-block-end));
  }

  .ui-affix-placeholder {
    pointer-events: none;
  }

  .ui-affix-content[data-affixed] {
    position: fixed;

    z-index: var(--sticky-z-index);

    inline-size: var(--affix-content-inline-size, auto);
  }

  .ui-affix-content[data-affixed][data-edge="block-start"] {
    inset-block-start: calc(var(--affix-target-inset, 0px) + var(--affix-inset-block-start));
  }

  .ui-affix-content[data-affixed][data-edge="block-end"] {
    inset-block-end: calc(var(--affix-target-inset, 0px) + var(--affix-inset-block-end));
  }
}