@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, var(--stroke-hairline));
    background: hsl(var(--separator-rule-color, var(--border)));
  }

  .ui-separator:not([data-labelled])[data-orientation="vertical"] {
    width: var(--separator-rule-size, var(--stroke-hairline));
    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, var(--stroke-hairline));
    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(--text-brand, 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-space-compact {
    display: inline-flex;
    align-items: stretch;
  }

  .ui-space-compact[data-full-width="true"] {
    display: flex;
    inline-size: 100%;
  }

  .ui-space-compact[data-full-width="true"] > [data-slot="space-compact-item"] {
    flex: 1 1 0%;
    min-inline-size: 0;
  }

  .ui-space-compact[data-orientation="horizontal"][data-full-width="true"]
    > [data-slot="space-compact-item"]:not(
      :has(.ui-control, .ui-control-multiline, .ui-tag-input)
    ) {
    flex: none;
  }

  .ui-space-compact[data-orientation="vertical"] {
    flex-direction: column;
  }

  .ui-space-compact[data-orientation="vertical"][data-full-width="true"]
    > [data-slot="space-compact-item"] {
    min-inline-size: auto;
    min-block-size: 0;
  }

  .ui-space-compact[data-orientation="horizontal"]
    > [data-slot="space-compact-item"]
    + [data-slot="space-compact-item"] {
    margin-inline-start: calc(var(--control-border-width, var(--stroke-hairline)) * -1);
  }

  .ui-space-compact[data-orientation="vertical"]
    > [data-slot="space-compact-item"]
    + [data-slot="space-compact-item"] {
    margin-block-start: calc(var(--control-border-width, var(--stroke-hairline)) * -1);
  }

  .ui-space-compact > [data-slot="space-compact-item"] {

    display: flex;
    position: relative;
    min-inline-size: 0;
  }

  .ui-space-compact > [data-slot="space-compact-item"] > * {
    flex: 1 1 auto;
  }

  .ui-space-compact > [data-slot="space-compact-item"]:hover,
  .ui-space-compact > [data-slot="space-compact-item"]:focus-within {
    z-index: 1;
  }

  .ui-space-compact[data-orientation="horizontal"]
    > [data-slot="space-compact-item"]:not(:first-child) {
    --input-radius-start: 0;
    --control-trigger-radius-start: 0;
  }

  .ui-space-compact[data-orientation="horizontal"]
    > [data-slot="space-compact-item"]:not(:last-child) {
    --input-radius-end: 0;
    --control-trigger-radius-end: 0;
  }

  .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-measure] {
    margin-inline: auto;
    inline-size: 100%;
  }

  .ui-flex[data-measure="narrow"] {
    max-inline-size: var(--page-measure-narrow);
  }

  .ui-flex[data-measure="medium"] {
    max-inline-size: var(--page-measure-medium);
  }

  .ui-flex[data-measure="wide"] {
    max-inline-size: var(--page-measure-wide);
  }

  .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-dense] {
    grid-auto-flow: row dense;
  }

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

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

  .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(--split-pane-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-split-pane[data-fill="true"][data-stack-order="aside-first"]:not([data-aside="closed"]) {
    grid-template-rows: auto minmax(0, 1fr);
  }

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

  .ui-resizable-panel {
    scroll-padding: calc(var(--focus-ring-weight) + var(--focus-outline-offset));
    min-height: 0;
    min-width: 0;
  }

  .ui-resizable-handle {
    inline-size: var(--resizable-handle-size);
    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="horizontal"] {
    inline-size: auto;
    block-size: var(--resizable-handle-size);
  }

  .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;
    }

    .ui-split-pane[data-stack-order="aside-first"]:is(
        [data-aside-width="sm"],
        [data-aside-width="md"]
      )
      > .ui-split-pane-main {
      grid-column: 1;
      grid-row: 1;
    }

    .ui-split-pane[data-stack-order="aside-first"]:is(
        [data-aside-width="sm"],
        [data-aside-width="md"]
      )
      > .ui-split-pane-aside {
      grid-column: 2;
      grid-row: 1;
    }

    .ui-split-pane[data-fill="true"][data-stack-order="aside-first"]:is(
        [data-aside-width="sm"],
        [data-aside-width="md"]
      ):not([data-aside="closed"]) {
      grid-template-rows: minmax(0, 1fr);
    }
  }

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

    .ui-split-pane[data-stack-order="aside-first"][data-aside-width="lg"] > .ui-split-pane-main {
      grid-column: 1;
      grid-row: 1;
    }

    .ui-split-pane[data-stack-order="aside-first"][data-aside-width="lg"] > .ui-split-pane-aside {
      grid-column: 2;
      grid-row: 1;
    }

    .ui-split-pane[data-fill="true"][data-stack-order="aside-first"][data-aside-width="lg"]:not(
        [data-aside="closed"]
      ) {
      grid-template-rows: minmax(0, 1fr);
    }
  }

  .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, var(--page-band-gap));
    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-title[tabindex="-1"]:focus {
    outline: none;
  }

  .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);
  }

  .ui-page-container[data-header-scale="display"] .ui-page-title,
  .ui-page-container[data-header-scale="display"] .ui-page-header .ui-page-title {
    font-size: var(
      --page-title-font-size-display,
      var(--font-size-4xl, calc(var(--font-size-display) / var(--font-size-display-ratio)))
    );
    font-weight: var(--font-weight-semibold);
    line-height: var(--page-title-line-height-display);
    text-wrap: balance;
    overflow-wrap: normal;
  }

  .ui-page-header-icon {
    display: flex;
    align-items: center;
    margin-block-end: var(--space-2);
    font-size: var(--page-icon-size);
    line-height: 1;
  }

  .ui-page-header-icon svg {
    inline-size: var(--page-icon-size);
    block-size: var(--page-icon-size);
  }

  .ui-page-container[data-cover="banner"] {
    padding-block-start: 0;
  }

  .ui-page-container[data-cover="banner"] .ui-page-header-icon {
    position: relative;
    margin-block-start: calc(-1 * var(--page-icon-cover-overlap));
  }

  .ui-page-header .ui-page-cover-slot {
    margin-block-end: var(--space-4);
  }

  .ui-page-cover {
    position: relative;
  }

  .ui-page-cover-frame {
    position: relative;
    overflow: hidden;
    block-size: var(--page-cover-block-size-md);
    background-color: hsl(var(--muted));
  }

  .ui-page-cover[data-height="lg"] .ui-page-cover-frame {
    block-size: var(--page-cover-block-size-lg);
  }

  .ui-page-cover[data-variant="eyecatch"] .ui-page-cover-frame {
    block-size: auto;
    aspect-ratio: var(--page-cover-eyecatch-aspect-ratio);
    border-radius: var(--page-cover-radius, var(--card-radius, var(--radius)));
  }

  .ui-page-cover-image {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    user-select: none;
  }

  .ui-page-cover[data-repositioning] .ui-page-cover-frame {
    cursor: grab;
    touch-action: none;
  }

  .ui-page-cover[data-repositioning] .ui-page-cover-frame:active {
    cursor: grabbing;
  }

  .ui-page-cover-hint {
    position: absolute;
    inset-block-start: 50%;
    inset-inline: 0;
    margin-inline: auto;
    inline-size: fit-content;
    max-inline-size: calc(100% - 2 * var(--space-4));
    translate: 0 -50%;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background-color: hsl(var(--background) / 0.85);
    color: hsl(var(--foreground));
    font-size: var(--font-size-sm, var(--font-size-base));
    text-align: center;
    pointer-events: none;
  }

  .ui-page-cover-actions {
    position: absolute;
    inset-block-end: var(--space-3);
    inset-inline-end: var(--space-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  @media (hover: hover) and (width >= 40rem) {
    .ui-page-cover:not(:hover):not(:focus-within) .ui-page-cover-actions {
      opacity: 0;
    }
  }

  @media (width < 40rem) {
    .ui-page-cover-actions {
      position: static;
      justify-content: flex-end;
      padding: var(--space-2) var(--space-page-active-x, var(--space-4)) 0;
    }
  }

  @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: 0;
      max-inline-size: var(--page-header-extra-max-measure, 60%);
      min-inline-size: auto;
      justify-content: flex-end;
    }

    .ui-page-header-extra:only-child {
      margin-inline-start: auto;
    }

    .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, var(--stroke-hairline) 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-breadcrumb-list[data-ellipsis] {
    flex-wrap: nowrap;
  }
  .ui-breadcrumb-list[data-ellipsis] > .ui-breadcrumb-item:not([data-ellipsis]) {
    flex-shrink: 0;
    white-space: nowrap;
  }
  .ui-breadcrumb-item[data-ellipsis] {
    min-inline-size: 0;
    max-inline-size: var(--breadcrumb-item-max-inline-size);
  }
  .ui-breadcrumb-item[data-ellipsis] > svg,
  .ui-breadcrumb-item[data-ellipsis] > .ui-breadcrumb-separator {
    flex-shrink: 0;
  }
  .ui-breadcrumb-ellipsis {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .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);
  }

  :is(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .ui-page-title,
    .ui-empty-state-title,
    .ui-empty-state-description,
    .ui-breadcrumb-item
  ):lang(ja) {
    word-break: auto-phrase;
    line-break: strict;
  }

  .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: var(
      --surface-success,
      hsl(var(--success) / var(--surface-success-alpha, 0.12))
    );
  }
  .ui-empty-state[data-tone="warning"] {
    --empty-state-icon-foreground: hsl(var(--warning));
    --empty-state-icon-tint: var(
      --surface-warning,
      hsl(var(--warning) / var(--surface-warning-alpha, 0.12))
    );
  }
  .ui-empty-state[data-tone="destructive"] {
    --empty-state-icon-foreground: hsl(var(--destructive));
    --empty-state-icon-tint: var(
      --surface-destructive,
      hsl(var(--destructive) / var(--surface-destructive-alpha, 0.12))
    );
  }
  .ui-empty-state[data-tone="info"] {
    --empty-state-icon-foreground: hsl(var(--info));
    --empty-state-icon-tint: var(
      --surface-info,
      hsl(var(--info) / var(--surface-info-alpha, 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 {
    scroll-padding: calc(var(--focus-ring-weight) + var(--focus-outline-offset));
    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,
      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
    );
    border: var(--stroke-hairline) 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-control {
    display: grid;
    align-items: center;
    gap: var(--space-stack-xs);
    min-block-size: var(--control-height);
    min-width: 0;
  }

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

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

  .ui-filter-bar-views {
    min-inline-size: 0;
  }

  .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%;
    min-block-size: var(--control-height);
  }

  .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-search-form-body {
    display: flex;
    flex-direction: column;
    gap: var(--filter-bar-section-gap);
  }

  .ui-search-form-more {
    min-inline-size: 0;
  }

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

  .ui-search-form-submit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-inline-start: auto;
  }

  .ui-search-form-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-3);
    font-size: var(--filter-label-font-size);
    color: hsl(var(--muted-foreground));
  }

  .ui-search-form-summary-label {
    font-weight: var(--font-weight-medium);
  }

  .ui-legal-document-scope {
    container: legal-document / inline-size;
    padding-inline: var(--legal-document-page-padding-inline, var(--space-page-x));

    --heading-h1: var(
      --legal-document-title-font-size,
      var(
        --font-size-2xl,
        calc(
          var(--font-size-base) * var(--font-size-ratio) * var(--font-size-ratio) *
            var(--font-size-ratio) * var(--font-size-ratio)
        )
      )
    );
  }

  @media (max-width: 720px) {
    .ui-legal-document-scope {
      padding-inline: var(--legal-document-page-padding-inline, var(--space-page-compact-x));
    }
  }

  :where(.ui-page-body, .ui-centered-shell-main) .ui-legal-document-scope {
    --legal-document-page-padding-inline: 0px;
  }

  .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:lang(ja),
  .ui-legal-document-section-body:lang(ja) {
    word-break: auto-phrase;
  }

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

  .ui-legal-document-rail {
    scroll-padding: calc(var(--focus-ring-weight) + var(--focus-outline-offset));
    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;
    align-items: start;
    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, var(--radius));
    border-inline-start: var(--legal-document-toc-marker-width, var(--stroke-md)) 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-toc-list {
      align-items: stretch;
    }

    .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, calc(var(--radius) / var(--radius-ratio)))
    );
  }
  .ui-flex[data-surface="muted"] {
    background: var(--flex-surface-background, hsl(var(--muted)));
  }
  .ui-flex[data-surface="warning"] {
    background: var(
      --flex-surface-background,
      var(--surface-warning, hsl(var(--warning) / var(--flex-surface-warning-alpha)))
    );
  }
  .ui-flex[data-surface="popover"] {
    background: var(--flex-surface-background, hsl(var(--popover) / var(--popover-alpha, 100%)));
    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));
    grid-row: span var(--responsive-grid-item-row-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));
      grid-row: span var(--responsive-grid-item-row-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));
      grid-row: span var(--responsive-grid-item-row-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));
      grid-row: span var(--responsive-grid-item-row-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;

    flex-wrap: wrap;
    min-inline-size: 0;
    align-items: center;
    gap: var(--actions-gap);
    border-radius: var(--actions-radius, var(--radius));
  }

  .ui-actions [aria-disabled="true"] {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
  }

  .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(--text-brand, 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, var(--stroke-hairline)) solid hsl(var(--border));
    border-radius: var(--draggable-panel-radius, var(--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, var(--stroke-hairline)) 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,
      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
    );
    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,
      calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
    );
    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));
  }
}