@layer components {
  .app-root {
    display: grid;
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    grid-template-areas:
      "sidebar topbar"
      "sidebar main"
      "sidebar footer";
    grid-template-columns: var(--app-shell-sidebar-width) minmax(0, 1fr);
    grid-template-rows: var(--app-shell-bar-height) minmax(0, 1fr) auto;

    height: calc(100vh - var(--app-shell-viewport-inset, 0px));
    background: hsl(var(--background));
  }

  @media (width > 56.25rem) {
    .app-root[data-collapsed="true"] {
      grid-template-columns: var(--app-shell-sidebar-collapsed-width) minmax(0, 1fr);
    }

    .app-root[data-topbar-span="full"] {
      grid-template-areas:
        "topbar topbar"
        "sidebar main"
        "sidebar footer";
    }

    .app-root[data-nav-rail][data-nav-rail-position="start"] {
      grid-template-areas:
        "navrail sidebar topbar"
        "navrail sidebar main"
        "navrail sidebar footer";
      grid-template-columns:
        var(--app-shell-nav-rail-width)
        var(--app-shell-sidebar-width)
        minmax(0, 1fr);
    }

    .app-root[data-nav-rail][data-nav-rail-position="start"][data-topbar-span="full"] {
      grid-template-areas:
        "topbar  topbar  topbar"
        "navrail sidebar main"
        "navrail sidebar footer";
    }

    .app-root[data-nav-rail][data-nav-rail-position="end"] {
      grid-template-areas:
        "sidebar topbar  navrail"
        "sidebar main    navrail"
        "sidebar footer  navrail";
      grid-template-columns:
        var(--app-shell-sidebar-width)
        minmax(0, 1fr)
        var(--app-shell-nav-rail-width);
    }

    .app-root[data-nav-rail][data-nav-rail-position="end"][data-topbar-span="full"] {
      grid-template-areas:
        "topbar  topbar  topbar"
        "sidebar main    navrail"
        "sidebar footer  navrail";
    }

    .app-root[data-nav-rail][data-nav-rail-position="top"] {
      grid-template-areas:
        "navrail navrail"
        "sidebar topbar"
        "sidebar main"
        "sidebar footer";
      grid-template-columns: var(--app-shell-sidebar-width) minmax(0, 1fr);
      grid-template-rows:
        var(--app-shell-nav-rail-height)
        var(--app-shell-bar-height)
        minmax(0, 1fr)
        auto;
    }

    .app-root[data-nav-rail][data-nav-rail-position="top"][data-topbar-span="full"] {
      grid-template-areas:
        "navrail navrail"
        "topbar  topbar"
        "sidebar main"
        "sidebar footer";
    }

    .app-root[data-nav-rail][data-nav-rail-position="bottom"] {
      grid-template-areas:
        "sidebar topbar"
        "sidebar main"
        "sidebar footer"
        "navrail navrail";
      grid-template-columns: var(--app-shell-sidebar-width) minmax(0, 1fr);
      grid-template-rows:
        var(--app-shell-bar-height)
        minmax(0, 1fr)
        auto
        var(--app-shell-nav-rail-height);
    }

    .app-root[data-nav-rail][data-nav-rail-position="bottom"][data-topbar-span="full"] {
      grid-template-areas:
        "topbar  topbar"
        "sidebar main"
        "sidebar footer"
        "navrail navrail";
    }

    .app-root[data-nav-rail][data-nav-rail-position="start"][data-collapsed="true"] {
      grid-template-columns:
        var(--app-shell-nav-rail-width)
        var(--app-shell-sidebar-collapsed-width)
        minmax(0, 1fr);
    }

    .app-root[data-nav-rail][data-nav-rail-position="end"][data-collapsed="true"] {
      grid-template-columns:
        var(--app-shell-sidebar-collapsed-width)
        minmax(0, 1fr)
        var(--app-shell-nav-rail-width);
    }

    .app-root[data-nav-rail]:is(
        [data-nav-rail-position="top"],
        [data-nav-rail-position="bottom"]
      )[data-collapsed="true"] {
      grid-template-columns: var(--app-shell-sidebar-collapsed-width) minmax(0, 1fr);
    }
  }

  .app-root[data-topbar="none"] {
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .app-root[data-topbar="none"] > .app-topbar {
    display: none;
    min-height: var(--app-shell-bar-height);
  }

  .app-sidebar {
    grid-area: sidebar;
    display: flex;
    height: 100%;
    min-width: 0;
    min-height: 0;
    flex-direction: column;

    overflow: clip;
    overflow-clip-margin: var(--focus-ring-clip-margin);
    border-inline-end: 1px solid hsl(var(--border));
    background: hsl(var(--card));

    background-image: var(--sidebar-gradient);
    color: hsl(var(--foreground));
  }

  .app-nav-rail {
    grid-area: navrail;
    display: flex;
    height: 100%;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    overflow: clip;
    overflow-clip-margin: var(--focus-ring-clip-margin);
    border-inline-end: 1px solid hsl(var(--border));
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
    padding-block: var(--app-shell-nav-rail-inset);
  }

  .app-nav-rail > .app-nav-rail-end,
  .app-mobile-nav-rail > .app-nav-rail-end {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    margin-block-start: auto;
  }

  .app-nav-rail[data-orientation="horizontal"] > .app-nav-rail-end {
    flex-direction: row;
    margin-block-start: 0;
    margin-inline-start: auto;
  }

  .app-nav-rail,
  .app-mobile-nav-rail {
    --org-switcher-trigger-height: var(--app-shell-nav-rail-item-size);

    --control-height-sm: var(--app-shell-nav-rail-item-size);
  }

  .app-nav-rail[data-edge="end"] {
    border-inline-start: 1px solid hsl(var(--border));
    border-inline-end: 0;
  }

  .app-nav-rail[data-orientation="horizontal"] {
    flex-direction: row;
    width: 100%;
    height: auto;
    border-inline-end: 0;
    padding-block: 0;
    padding-inline: var(--app-shell-nav-rail-inset);
  }

  .app-nav-rail[data-orientation="horizontal"] > .ui-org-switcher {
    inline-size: auto;
  }

  .app-nav-rail[data-edge="top"] {
    border-block-end: 1px solid hsl(var(--border));
  }

  .app-nav-rail[data-edge="bottom"] {
    border-block-start: 1px solid hsl(var(--border));
  }

  .app-root:not([data-topbar-span="full"]):is(
      [data-nav-rail-position="start"],
      [data-nav-rail-position="end"]
    )
    > .app-nav-rail {
    padding-block-start: 0;
  }

  .app-root:not([data-topbar-span="full"]):is(
      [data-nav-rail-position="start"],
      [data-nav-rail-position="end"]
    )
    > .app-nav-rail
    > :first-child {
    min-block-size: var(--app-shell-bar-height);

    align-items: center;
  }

  .app-topbar {
    grid-area: topbar;
    display: flex;
    min-width: 0;

    overflow: clip;
    overflow-clip-margin: var(--focus-ring-clip-margin);
    align-items: center;
    gap: var(--app-shell-bar-gap);
    padding-inline: var(--app-shell-bar-inset);
    border-bottom: 1px solid hsl(var(--border));
    background: hsl(var(--card));

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

  .app-main {
    grid-area: main;
    min-width: 0;
    overflow: auto;

    display: flex;
    flex-direction: column;

    background-image: var(--gradient-glow);

    contain: paint;
    background-color: var(--app-shell-main-background, var(--surface-recessed));
  }

  .app-main:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 calc(var(--region-focus-ring-width) * var(--focus-outline))
      var(--region-focus-ring-color, hsl(var(--focus-ring-color, var(--ring))));
  }

  .app-footer {
    grid-area: footer;
    border-top: 1px solid hsl(var(--border));
    background: hsl(var(--background));
  }

  .app-main .ui-page-container {
    width: 100%;
  }

  .app-main :where(.ui-page-header, .ui-page-toolbar, .ui-page-body) {
    max-inline-size: var(--app-shell-page-max-width);
  }

  .app-main :where(.ui-page-footer) {
    --page-footer-content-slack: max(0px, 100% - var(--app-shell-page-max-width));
  }

  .ui-auth-shell {
    --control-height: var(--auth-shell-control-height);
    --heading-h1: var(--auth-shell-heading-size);
    display: flex;
    min-height: 100dvh;
    flex-direction: column;
    background: hsl(var(--muted));
  }

  .ui-auth-shell-bar {
    display: flex;
    align-items: center;

    flex-wrap: wrap;
    gap: var(--auth-shell-bar-gap);
    padding: var(--auth-shell-bar-padding);
  }

  .ui-auth-shell-bar-actions {
    display: flex;
    align-items: center;
    gap: var(--auth-shell-bar-gap);
    margin-inline-start: auto;
  }

  .ui-auth-shell-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: var(--auth-shell-main-align);
    padding: var(--auth-shell-main-padding);
  }

  .ui-auth-shell-card {
    width: 100%;
    max-width: var(--auth-shell-card-max-width);
  }

  .ui-auth-shell-footer {
    padding: var(--auth-shell-footer-padding);
    text-align: center;
    color: hsl(var(--muted-foreground));
  }

  .ui-auth-shell[data-variant="canonical"] {
    --control-height: var(--auth-shell-canonical-control-height);
    --heading-h1: var(--auth-shell-canonical-heading-size);
    --auth-shell-card-max-width: var(--auth-shell-canonical-card-max-width);
    --auth-shell-main-padding: var(--auth-shell-canonical-main-padding);
  }

  .ui-auth-shell[data-measure="wide"]:not([data-preset]) {
    --auth-shell-card-max-width: var(--auth-shell-wide-card-max-width);
    --auth-shell-main-align: flex-start;
  }

  .ui-auth-shell[data-measure="wide"]:not([data-preset]) .ui-auth-shell-card {
    margin-block: auto;
  }

  .ui-auth-shell[data-preset] .ui-auth-shell-card {
    display: flex;
    flex-direction: column;
    gap: var(--auth-shell-card-stack-gap);
  }

  .ui-auth-shell[data-preset="login"] {
    --auth-shell-card-max-width: var(--auth-shell-login-card-max-width);
    --auth-shell-main-align: flex-start;
    --auth-shell-main-padding: var(--auth-shell-login-flow-offset-block)
      var(--auth-shell-login-main-padding-inline) var(--auth-shell-login-main-padding-block-end);
    --auth-shell-card-stack-gap: var(--auth-shell-login-card-stack-gap);
    --auth-shell-card-padding-block-compact: var(--auth-shell-login-card-padding-block-compact);
  }

  .ui-auth-shell[data-preset="login"] .ui-auth-shell-card {
    display: grid;
    grid-template-rows: var(--auth-shell-login-identity-slot-block-size) auto auto;
  }

  .ui-auth-shell[data-preset="login"] .ui-auth-shell-card > .ui-auth-identity,
  .ui-auth-shell[data-preset="login"] .ui-auth-shell-card > :has(> .ui-auth-identity) {
    min-width: 0;
    min-height: 0;
    block-size: var(--auth-shell-login-identity-slot-block-size);
  }

  .ui-auth-shell[data-preset="login"] .ui-auth-shell-card > .ui-auth-identity,
  .ui-auth-shell[data-preset="login"]
    .ui-auth-shell-card
    > :has(> .ui-auth-identity)
    > .ui-auth-identity {
    height: 100%;
    justify-content: flex-end;
  }

  .ui-auth-shell[data-preset="login"] .ui-auth-requester {
    max-width: 100%;
    justify-content: center;
  }

  .ui-auth-shell[data-preset="login"] .ui-auth-requester > :last-child {
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: center;
  }

  .ui-auth-shell[data-preset="device-authorization"] {
    --auth-shell-card-max-width: var(--auth-shell-device-card-max-width);
    --auth-shell-main-padding: var(--auth-shell-device-main-padding);
    --otp-slot-inline-size: var(--auth-shell-device-otp-slot-inline-size);
    --otp-slot-block-size: var(--auth-shell-device-otp-slot-block-size);
  }

  .ui-auth-shell[data-preset="context-selection"] {
    --auth-shell-card-max-width: var(--auth-shell-context-card-max-width);
    --auth-shell-main-padding: var(--auth-shell-context-main-padding);
    --auth-shell-card-stack-gap: var(--auth-shell-context-card-stack-gap);
  }

  .ui-auth-shell[data-preset="account-recovery"] {
    --auth-shell-card-max-width: var(--auth-shell-recovery-card-max-width);
    --auth-shell-main-padding: var(--auth-shell-recovery-main-padding);
  }

  .ui-auth-shell[data-preset="registration"] {
    --auth-shell-card-max-width: var(--auth-shell-registration-card-max-width);
    --auth-shell-main-align: flex-start;
    --auth-shell-main-padding: var(--auth-shell-registration-main-padding-block-start)
      var(--auth-shell-registration-main-padding-inline)
      var(--auth-shell-registration-main-padding-block-end);
    --auth-shell-card-stack-gap: var(--auth-shell-registration-card-stack-gap);
  }

  .ui-auth-shell[data-preset="registration"] .ui-auth-shell-card {
    margin-block: auto;
  }

  .ui-auth-shell[data-preset="registration"] .ui-auth-shell-card > .ui-auth-identity {
    block-size: var(--auth-shell-registration-identity-slot-block-size);
    justify-content: flex-end;
  }

  .ui-auth-shell[data-align="center"] {
    --auth-shell-main-align: center;
  }

  .ui-auth-shell[data-align="anchored"] {
    --auth-shell-main-align: flex-start;
  }

  .ui-auth-shell[data-preset="login"][data-align="center"] {
    --auth-shell-login-flow-offset-block: var(--auth-shell-login-main-padding-block-end);
    --auth-shell-login-flow-offset-block-mobile: var(--auth-shell-login-main-padding-block-end);
  }

  .ui-auth-shell[data-preset="registration"][data-align="center"] {
    --auth-shell-registration-main-padding-block-start: var(
      --auth-shell-registration-main-padding-block-end
    );
    --auth-shell-registration-main-padding-block-start-mobile: var(
      --auth-shell-registration-main-padding-block-end-mobile
    );
  }

  .ui-auth-identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--auth-identity-gap);
    text-align: center;
  }

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

  .ui-auth-requester-icon {
    display: inline-flex;
    width: var(--auth-requester-icon-size);
    height: var(--auth-requester-icon-size);
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: hsl(var(--accent));
    color: hsl(var(--primary));
  }

  .ui-auth-requester-icon > svg {
    width: var(--auth-requester-glyph-size);
    height: var(--auth-requester-glyph-size);
  }

  .ui-auth-account-summary {
    display: flex;
    min-height: var(--auth-account-summary-min-height);
    flex-wrap: wrap;
    align-items: center;
    gap: var(--auth-account-summary-gap);
    padding: var(--auth-account-summary-padding);
    border-radius: var(--radius-md);
    background: hsl(var(--muted));
  }

  .ui-auth-account-identity {
    display: flex;
    min-width: min(100%, var(--auth-account-summary-identity-min-width));
    flex: 1 1 var(--auth-account-summary-identity-min-width);
    align-items: center;
    gap: var(--auth-account-summary-gap);
  }

  .ui-auth-account-avatar {
    width: var(--auth-account-summary-avatar-size);
    height: var(--auth-account-summary-avatar-size);
    flex: none;
  }

  .ui-auth-account-fallback-icon {
    width: var(--auth-account-summary-avatar-glyph-size);
    height: var(--auth-account-summary-avatar-glyph-size);
  }

  .ui-auth-account-email {
    min-width: 0;
    overflow: hidden;
    color: hsl(var(--foreground));
    font-size: var(--auth-account-summary-email-font-size);
    line-height: var(--auth-account-summary-email-line-height);
    font-weight: var(--font-weight-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ui-auth-account-summary > [data-slot="button"] {
    margin-inline-start: auto;
  }

  .ui-auth-legal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--auth-footer-content-gap);
    color: hsl(var(--muted-foreground));
    font-family: var(--font-mono);
    font-size: var(--auth-footer-text-font-size);
  }

  .ui-auth-legal-footer-item {
    display: inline-flex;
    align-items: center;
    gap: var(--auth-footer-content-gap);
  }

  .ui-auth-legal-footer :is(a, button) {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--auth-footer-target-min-size);
  }

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

  .ui-auth-shell[data-variant="canonical"] .ui-form-field {
    --field-label-gap: var(--auth-shell-field-label-gap);
  }
}

.ui-auth-shell[data-variant="canonical"] [data-slot="form-field-label"] [data-slot="label"] {
  font-size: var(--auth-shell-field-label-font-size);
  line-height: var(--auth-shell-field-label-line-height);
}

@layer components {
  .ui-auth-shell[data-density="compact"] .ui-auth-shell-card {
    --card-space-inset: var(--auth-shell-compact-card-inset);
    --card-space-shell-y: var(
      --auth-shell-card-padding-block-compact,
      var(--auth-shell-compact-card-inset)
    );
    --card-space-body-y: var(--auth-shell-card-body-gap-compact);
    --card-space-solo-y: var(
      --auth-shell-card-padding-block-compact,
      var(--auth-shell-compact-card-inset)
    );
    --card-space-gap: var(--auth-shell-card-gap-compact);
  }

  .ui-auth-divider {
    --separator-label-gap: var(--auth-shell-divider-gap);
    --separator-label-font-size: var(--auth-shell-divider-label-font-size);
    --separator-label-line-height: var(--auth-shell-divider-label-line-height);
    --separator-label-font-weight: var(--font-weight-normal);
    --separator-rule-color: var(--auth-shell-divider-rule-color);
    --separator-label-color: var(--auth-shell-divider-label-color);
  }

  @media (max-width: 30rem) {
    .ui-auth-shell[data-variant="canonical"] {
      --auth-shell-main-padding: var(--auth-shell-canonical-main-padding-mobile);
    }

    .ui-auth-shell[data-preset="login"] {
      --auth-shell-main-padding: var(--auth-shell-login-flow-offset-block-mobile)
        var(--auth-shell-login-main-padding-inline-mobile)
        var(--auth-shell-login-main-padding-block-end);
    }

    .ui-auth-shell[data-preset="device-authorization"] {
      --auth-shell-main-padding: var(--auth-shell-device-main-padding-mobile);
    }

    .ui-auth-shell[data-preset="context-selection"] {
      --auth-shell-main-padding: var(--auth-shell-context-main-padding-mobile);
    }

    .ui-auth-shell[data-preset="account-recovery"] {
      --auth-shell-main-padding: var(--auth-shell-recovery-main-padding-mobile);
    }

    .ui-auth-shell[data-preset="registration"] {
      --auth-shell-main-padding: var(--auth-shell-registration-main-padding-block-start-mobile)
        var(--auth-shell-registration-main-padding-inline-mobile)
        var(--auth-shell-registration-main-padding-block-end-mobile);
    }
  }

  .ui-centered-shell {
    display: flex;
    min-height: 100dvh;
    flex-direction: column;
    background: hsl(var(--muted));
  }

  .ui-centered-shell-bar {
    display: flex;
    min-width: 0;
    min-height: var(--centered-shell-bar-height);
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-3);
    padding-inline: var(--centered-shell-bar-padding-x);
    border-bottom: 1px solid hsl(var(--border));
    background: hsl(var(--card));

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

  .ui-centered-shell-main {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: auto;

    background-image: var(--gradient-glow);

    contain: paint;
    padding: var(--centered-shell-main-padding);
  }

  .ui-centered-shell-column {
    width: 100%;
    margin-inline: auto;

    margin-block: var(--centered-shell-column-offset-block);
    max-width: var(--centered-shell-width-md);
  }

  .ui-centered-shell-column[data-align="center"] {
    --centered-shell-column-offset-block: auto;
  }

  .ui-centered-shell-column[data-width="sm"] {
    max-width: var(--centered-shell-width-sm);
  }

  .ui-centered-shell-column[data-width="lg"] {
    max-width: var(--centered-shell-width-lg);
  }

  .ui-centered-shell-footer {
    padding: var(--centered-shell-footer-padding);
    border-top: 1px solid hsl(var(--border));
    text-align: center;
    color: hsl(var(--muted-foreground));
  }

  @media (max-width: 720px) {
    .ui-centered-shell-bar {
      padding-inline: var(--centered-shell-bar-padding-x-compact);
    }

    .ui-centered-shell-main {
      padding-inline: var(--centered-shell-main-padding-inline-compact);
    }

    .ui-centered-shell-footer {
      padding-inline: var(--centered-shell-footer-padding-inline-compact);
    }
  }

  .app-sidebar-logo {
    display: flex;
    block-size: var(--app-shell-bar-height);
    min-inline-size: 0;
    align-items: center;
    border-block-end: 1px solid hsl(var(--border));
    padding-inline: var(--space-3);
  }

  .app-root[data-collapsed="true"] .app-sidebar-logo {
    justify-content: center;
    padding-inline: 0;
  }

  .app-root[data-collapsed="true"] .app-sidebar-logo [data-slot="logo-wordmark"] {
    display: none;
  }

  .app-topbar-rail {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    align-self: stretch;
    gap: var(--space-3);
  }

  .app-topbar-logo,
  .app-topbar-logo > a {
    display: flex;
    align-items: center;
  }

  .app-topbar-logo {
    max-inline-size: var(--app-shell-brand-max-inline-size);
    min-inline-size: 0;
    flex: 0 1 auto;
    overflow: clip;
    overflow-clip-margin: var(--focus-ring-clip-margin);
  }

  .app-topbar-brand {
    display: contents;
  }

  @media (width < 40rem) {
    .app-topbar-logo {
      max-inline-size: var(--app-shell-brand-compact-max-inline-size);
    }

    .app-topbar-logo [data-slot="logo-wordmark"] {
      display: none;
    }
  }

  .app-topbar-custom {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    align-self: stretch;
    gap: var(--space-3);
  }

  .app-topbar-left,
  .app-topbar-right {
    display: flex;
    min-width: 0;
    align-items: center;
    align-self: stretch;
    gap: var(--space-2);
  }

  .app-topbar-left:has(.app-mobile-sidebar-trigger) {
    display: none;
  }

  .app-root .app-mobile-nav-trigger {
    display: none;
    flex: 0 0 auto;
    margin-inline-end: var(--space-1);
  }

  [data-slot="sheet-overlay"].app-mobile-nav-overlay {
    background-color: var(
      --app-shell-mobile-nav-background,
      color-mix(in srgb, var(--overlay-background) var(--app-shell-mobile-nav-alpha), transparent)
    );
  }

  .app-mobile-nav-drawer {
    padding-block-start: max(var(--sheet-pad-y), env(safe-area-inset-top));
    padding-block-end: max(var(--sheet-pad-y), env(safe-area-inset-bottom));
    padding-inline-start: max(var(--sheet-pad-x), env(safe-area-inset-left));
    padding-inline-end: max(var(--sheet-pad-x), env(safe-area-inset-right));
    overscroll-behavior: contain;
  }

  .app-mobile-nav-body {
    display: flex;
    flex-direction: column;
    overscroll-behavior: contain;
  }

  .app-mobile-nav-columns {
    display: flex;
    min-height: 0;
    flex: 1;
    gap: var(--space-2);
  }

  .app-mobile-nav-rail {
    display: flex;
    min-height: 0;
    flex: 0 0 auto;
    flex-direction: column;
    border-inline-end: 1px solid hsl(var(--border));
    inline-size: var(--app-shell-nav-rail-width);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .app-mobile-nav-sections {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .app-topbar-spacer {
    flex: 1;
  }

  .app-breadcrumb {
    border-bottom: 1px solid hsl(var(--border));

    padding: var(--space-2) var(--space-page-active-x);
    color: hsl(var(--muted-foreground));
    font-size: var(--font-size-base);
  }

  @media (width > 56.25rem) {
    .app-root:where([data-sidebar="none"])[data-nav-rail][data-nav-rail-position="start"] {
      grid-template-columns: var(--app-shell-nav-rail-width) minmax(0, 1fr);
      grid-template-areas: "navrail topbar" "navrail main" "navrail footer";
    }
    .app-root:where(
        [data-sidebar="none"]
      )[data-nav-rail][data-nav-rail-position="start"][data-topbar-span="full"] {
      grid-template-areas: "topbar topbar" "navrail main" "navrail footer";
    }
    .app-root:where([data-sidebar="none"])[data-nav-rail][data-nav-rail-position="end"] {
      grid-template-columns: minmax(0, 1fr) var(--app-shell-nav-rail-width);
      grid-template-areas: "topbar navrail" "main navrail" "footer navrail";
    }
    .app-root:where(
        [data-sidebar="none"]
      )[data-nav-rail][data-nav-rail-position="end"][data-topbar-span="full"] {
      grid-template-areas: "topbar topbar" "main navrail" "footer navrail";
    }

    .app-root:where([data-sidebar="none"])[data-nav-rail][data-nav-rail-position="top"] {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "navrail" "topbar" "main" "footer";
      grid-template-rows:
        var(--app-shell-nav-rail-height)
        var(--app-shell-bar-height)
        minmax(0, 1fr)
        auto;
    }
    .app-root:where(
        [data-sidebar="none"]
      )[data-nav-rail][data-nav-rail-position="top"][data-topbar-span="full"] {
      grid-template-areas: "navrail" "topbar" "main" "footer";
    }
    .app-root:where([data-sidebar="none"])[data-nav-rail]:is([data-nav-rail-position="bottom"]) {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "topbar" "main" "footer" "navrail";
      grid-template-rows:
        var(--app-shell-bar-height)
        minmax(0, 1fr)
        auto
        var(--app-shell-nav-rail-height);
    }

    .app-root:where(
        [data-sidebar="none"]
      )[data-nav-rail][data-nav-rail-position="bottom"][data-topbar-span="full"] {
      grid-template-areas: "topbar" "main" "footer" "navrail";
    }
  }

  @media (width <= 56.25rem) {

    .app-root {
      grid-template-areas:
        "topbar"
        "main"
        "footer";
      grid-template-columns: minmax(0, 1fr);
    }

    .app-sidebar,
    .app-nav-rail {
      display: none;
    }

    .app-root[data-nav-rail]:is([data-nav-rail-position="top"], [data-nav-rail-position="bottom"]) {
      grid-template-rows: var(--app-shell-bar-height) minmax(0, 1fr) auto;
    }

    .app-root[data-topbar="none"] > .app-topbar {
      display: flex;
    }

    .app-topbar-left:has(.app-mobile-sidebar-trigger) {
      display: flex;
    }

    .app-root .app-mobile-nav-trigger {
      display: inline-flex;
    }

    .app-root[data-responsive-navigation="docked"] {
      grid-template-areas:
        "sidebar topbar"
        "sidebar main"
        "sidebar footer";
      grid-template-columns: var(--app-shell-sidebar-width) minmax(0, 1fr);
    }

    .app-root[data-responsive-navigation="docked"][data-collapsed="true"] {
      grid-template-columns: var(--app-shell-sidebar-collapsed-width) minmax(0, 1fr);
    }

    .app-root[data-responsive-navigation="docked"][data-topbar-span="full"] {
      grid-template-areas:
        "topbar topbar"
        "sidebar main"
        "sidebar footer";
    }

    .app-root[data-responsive-navigation="docked"][data-nav-rail][data-nav-rail-position="start"] {
      grid-template-areas:
        "navrail sidebar topbar"
        "navrail sidebar main"
        "navrail sidebar footer";
      grid-template-columns:
        var(--app-shell-nav-rail-width)
        var(--app-shell-sidebar-width)
        minmax(0, 1fr);
    }

    .app-root[data-responsive-navigation="docked"][data-nav-rail][data-nav-rail-position="start"][data-collapsed="true"] {
      grid-template-columns:
        var(--app-shell-nav-rail-width)
        var(--app-shell-sidebar-collapsed-width)
        minmax(0, 1fr);
    }

    .app-root[data-responsive-navigation="docked"][data-nav-rail][data-nav-rail-position="start"][data-topbar-span="full"] {
      grid-template-areas:
        "topbar  topbar  topbar"
        "navrail sidebar main"
        "navrail sidebar footer";
    }

    .app-root[data-responsive-navigation="docked"][data-nav-rail][data-nav-rail-position="end"] {
      grid-template-areas:
        "sidebar topbar  navrail"
        "sidebar main    navrail"
        "sidebar footer  navrail";
      grid-template-columns:
        var(--app-shell-sidebar-width)
        minmax(0, 1fr)
        var(--app-shell-nav-rail-width);
    }

    .app-root[data-responsive-navigation="docked"][data-nav-rail][data-nav-rail-position="end"][data-collapsed="true"] {
      grid-template-columns:
        var(--app-shell-sidebar-collapsed-width)
        minmax(0, 1fr)
        var(--app-shell-nav-rail-width);
    }

    .app-root[data-responsive-navigation="docked"][data-nav-rail][data-nav-rail-position="end"][data-topbar-span="full"] {
      grid-template-areas:
        "topbar  topbar  topbar"
        "sidebar main    navrail"
        "sidebar footer  navrail";
    }

    .app-root[data-responsive-navigation="docked"][data-nav-rail][data-nav-rail-position="top"] {
      grid-template-areas:
        "navrail navrail"
        "sidebar topbar"
        "sidebar main"
        "sidebar footer";
      grid-template-columns: var(--app-shell-sidebar-width) minmax(0, 1fr);
      grid-template-rows:
        var(--app-shell-nav-rail-height)
        var(--app-shell-bar-height)
        minmax(0, 1fr)
        auto;
    }

    .app-root[data-responsive-navigation="docked"][data-nav-rail][data-nav-rail-position="top"][data-topbar-span="full"] {
      grid-template-areas:
        "navrail navrail"
        "topbar  topbar"
        "sidebar main"
        "sidebar footer";
    }

    .app-root[data-responsive-navigation="docked"][data-nav-rail][data-nav-rail-position="bottom"] {
      grid-template-areas:
        "sidebar topbar"
        "sidebar main"
        "sidebar footer"
        "navrail navrail";
      grid-template-columns: var(--app-shell-sidebar-width) minmax(0, 1fr);
      grid-template-rows:
        var(--app-shell-bar-height)
        minmax(0, 1fr)
        auto
        var(--app-shell-nav-rail-height);
    }

    .app-root[data-responsive-navigation="docked"][data-nav-rail]:is(
        [data-nav-rail-position="top"],
        [data-nav-rail-position="bottom"]
      )[data-collapsed="true"] {
      grid-template-columns: var(--app-shell-sidebar-collapsed-width) minmax(0, 1fr);
    }

    .app-root[data-responsive-navigation="docked"][data-nav-rail][data-nav-rail-position="bottom"][data-topbar-span="full"] {
      grid-template-areas:
        "topbar  topbar"
        "sidebar main"
        "sidebar footer"
        "navrail navrail";
    }

    .app-root[data-responsive-navigation="docked"] > .app-sidebar,
    .app-root[data-responsive-navigation="docked"] > .app-nav-rail {
      display: flex;
    }

    .app-root[data-sidebar="none"][data-nav-rail][data-responsive-navigation="docked"] {
      grid-template-columns: var(--app-shell-nav-rail-width) minmax(0, 1fr);
      grid-template-areas: "navrail topbar" "navrail main" "navrail footer";
    }
    .app-root[data-sidebar="none"][data-nav-rail][data-responsive-navigation="docked"][data-topbar-span="full"] {
      grid-template-areas: "topbar topbar" "navrail main" "navrail footer";
    }

    .app-root[data-responsive-navigation="docked"] .app-mobile-nav-trigger {
      display: none;
    }
  }

  @media (max-width: 720px) {
    .app-topbar {
      padding-inline: var(--app-shell-bar-inset-compact);
    }
  }

  .sb-root {
    display: contents;
  }

  .ui-org-switcher {
    width: 100%;
    min-width: 0;
  }

  .ui-org-switcher[data-collapsed="true"] {
    display: flex;
    justify-content: center;
  }

  .ui-org-switcher-trigger {
    width: 100%;
    height: var(--org-switcher-trigger-height);
    min-width: 0;
    justify-content: flex-start;
    padding-inline: var(--org-switcher-trigger-padding-x);
  }

  .ui-org-switcher-trigger[data-collapsed="true"] {
    width: var(--org-switcher-trigger-height);
    padding: 0;
  }

  .ui-org-switcher-avatar {
    display: grid;
    width: var(--org-switcher-avatar-size);
    height: var(--org-switcher-avatar-size);
    flex: 0 0 auto;
    place-items: center;
    overflow: hidden;
    border-radius: var(--radius);
    background: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
    font-size: var(--sidebar-avatar-font-size);
    font-weight: var(--font-weight-semibold);
  }

  .ui-org-switcher-avatar > * {
    width: 100%;
    height: 100%;
  }

  .ui-org-switcher-current,
  .ui-org-switcher-option {
    display: grid;
    min-width: 0;
    flex: 1;
    text-align: start;
  }

  .ui-org-switcher-name,

  .ui-org-switcher-meta {
    overflow: hidden;
    line-height: var(--line-height-normal);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ui-org-switcher-name {
    font-size: var(--sidebar-user-name-font-size);
    font-weight: var(--font-weight-medium);
  }

  .ui-org-switcher-meta {
    color: hsl(var(--org-switcher-meta-foreground));
    font-size: var(--sidebar-user-role-font-size);
  }

  .ui-org-switcher-chevron,
  .ui-org-switcher-check,
  .ui-org-switcher-spinner {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    flex: 0 0 auto;
  }

  .ui-org-switcher-chevron {
    margin-inline-start: auto;
    color: hsl(var(--muted-foreground));
  }

  .ui-org-switcher-check {
    margin-inline-start: auto;
  }

  .ui-org-switcher-popover {
    --popover-surface-inline-size: min(
      var(--org-switcher-menu-width),
      calc(100vw - var(--space-4))
    );
    --popover-space-inset: 0;
  }

  [data-slot="dialog-content"].ui-org-switcher-dialog {

    --dialog-space-x: var(--org-switcher-sheet-inset);
    --dialog-space-inset: var(--dialog-space-y) var(--org-switcher-sheet-inset);
    --org-switcher-list-offset: var(--org-switcher-sheet-inset);
    max-inline-size: var(--org-switcher-dialog-width);
  }

  [data-slot="sheet-content"].ui-org-switcher-sheet {
    --sheet-pad-x: var(--org-switcher-sheet-inset);

    --org-switcher-list-offset: var(--org-switcher-sheet-inset);
    max-height: var(--org-switcher-sheet-max-height);
    border-start-start-radius: var(--radius-lg);
    border-start-end-radius: var(--radius-lg);
  }

  .ui-org-switcher-command {
    --command-list-split-inset: var(--org-switcher-list-inset);
    width: 100%;
    padding-inline: calc(var(--org-switcher-list-inset) - var(--org-switcher-list-offset));
  }

  .ui-org-switcher-command .ui-command-input-wrapper {

    border: 1px solid hsl(var(--input));
    border-radius: var(--control-radius);

    margin-block: var(--org-switcher-search-space-block);
    margin-inline: 0;
    background: hsl(var(--background));
  }

  [data-slot="dialog-footer"]:has(> .ui-org-switcher-legend),
  [data-slot="sheet-footer"]:has(> .ui-org-switcher-legend) {
    justify-content: flex-start;
  }

  .ui-org-switcher-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--org-switcher-legend-space-gap);
    color: hsl(var(--muted-foreground));
    font-size: var(--org-switcher-legend-font-size);
  }

  .ui-org-switcher-hint {
    display: inline-flex;
    align-items: center;
    gap: var(--org-switcher-hint-space-gap);
  }

  .ui-org-switcher-hint > .kbd {
    margin-inline-start: 0;
  }

  .ui-org-switcher-state {
    display: flex;
    min-height: var(--org-switcher-state-min-height);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-5);
    color: hsl(var(--muted-foreground));
    text-align: center;
  }

  .ui-org-switcher-spinner {
    animation: spin 1s linear infinite;
  }

  .ui-app-launcher-popover {

    --popover-surface-inline-size: min(
      var(--app-launcher-panel-width),
      calc(100vw - var(--space-4))
    );
    --popover-space-inset: var(--space-2);
  }

  .ui-app-launcher-sheet {
    max-height: var(--app-launcher-sheet-max-height);
    border-start-start-radius: var(--radius-lg);
    border-start-end-radius: var(--radius-lg);
  }

  [data-slot="dialog-overlay"].ui-app-launcher-launchpad-overlay {

    container: app-launcher-launchpad / inline-size;

    background-color: var(
      --app-launcher-launchpad-backdrop-background,
      color-mix(
        in srgb,
        hsl(var(--background)) var(--app-launcher-launchpad-backdrop-alpha),
        transparent
      )
    );
    backdrop-filter: blur(var(--app-launcher-launchpad-backdrop-blur-size))
      saturate(var(--app-launcher-launchpad-backdrop-color-saturate));

    display: grid;

    padding: var(--app-launcher-launchpad-space-safe-area);
    place-items: start;
  }

  [data-slot="dialog-content"].ui-app-launcher-launchpad {
    position: relative;
    inset: auto;
    display: grid;
    width: auto;
    max-width: min(
      var(--app-launcher-launchpad-panel-max-width),
      calc(100vw - 2 * var(--app-launcher-launchpad-space-inset))
    );
    max-height: calc(100dvh - 2 * var(--app-launcher-launchpad-space-inset));
    justify-items: start;
    transform: none;
    border: 0;
    border-radius: 0;
    background: none;
    padding: var(--app-launcher-launchpad-space-inset);
    overflow: auto;
    box-shadow: none;
  }

  .ui-app-launcher-launchpad .ui-app-launcher-panel {
    --app-launcher-columns: 3;

    max-height: none;
    gap: var(--app-launcher-launchpad-panel-gap);
    overflow: visible;
  }

  @container app-launcher-launchpad (min-width: 40rem) {
    .ui-app-launcher-launchpad .ui-app-launcher-panel {
      --app-launcher-columns: 4;
    }
  }

  @container app-launcher-launchpad (min-width: 48rem) {
    .ui-app-launcher-launchpad .ui-app-launcher-panel {
      --app-launcher-columns: 5;
    }
  }

  @container app-launcher-launchpad (min-width: 64rem) {
    .ui-app-launcher-launchpad .ui-app-launcher-panel {
      --app-launcher-columns: 6;
    }
  }

  .ui-app-launcher-launchpad .ui-app-launcher-grid {
    grid-template-columns: repeat(auto-fit, var(--app-launcher-launchpad-tile-inline-size));
    max-width: calc(
      var(--app-launcher-columns) *
        (var(--app-launcher-launchpad-tile-inline-size) + var(--app-launcher-launchpad-grid-gap)) -
        var(--app-launcher-launchpad-grid-gap)
    );
    justify-content: start;
    gap: var(--app-launcher-launchpad-grid-gap);
  }

  .ui-app-launcher-launchpad .ui-app-launcher-tile {
    justify-content: flex-start;
    gap: var(--app-launcher-launchpad-tile-gap);
    padding: var(--app-launcher-launchpad-tile-padding);
    border-radius: var(--app-launcher-launchpad-tile-radius);
  }

  .ui-app-launcher-launchpad .ui-app-launcher-tile:hover,
  .ui-app-launcher-launchpad .ui-app-launcher-tile[aria-current="page"] {
    background: var(--app-launcher-launchpad-tile-hover-background);
    color: hsl(var(--app-launcher-tile-color));
  }

  .ui-app-launcher-launchpad .ui-app-launcher-mark {
    width: var(--app-launcher-launchpad-mark-size);
    height: var(--app-launcher-launchpad-mark-size);
    border: 1px solid var(--app-launcher-launchpad-mark-border-color);
    border-radius: var(--app-launcher-launchpad-mark-radius);
    background: var(--app-launcher-launchpad-mark-background);
    box-shadow: var(--app-launcher-launchpad-mark-shadow);
    color: hsl(var(--foreground));
    font-size: var(--app-launcher-launchpad-mark-font-size);

    backdrop-filter: blur(calc(var(--app-launcher-launchpad-backdrop-blur-size) / 2))
      saturate(var(--app-launcher-launchpad-backdrop-color-saturate));
  }

  .ui-app-launcher-launchpad .ui-app-launcher-group {
    justify-items: center;
  }

  .ui-app-launcher-launchpad .ui-app-launcher-group-label {
    text-align: center;
  }

  .ui-app-launcher-launchpad .ui-app-launcher-name {
    font-size: var(--app-launcher-launchpad-name-font-size);
  }

  .ui-app-launcher-launchpad [data-slot="dialog-header"] {
    align-items: start;
  }

  .ui-app-launcher-launchpad [data-slot="dialog-close"] {
    position: fixed;

    padding: var(--app-launcher-launchpad-close-space-padding);
    inset-block-start: var(--app-launcher-launchpad-space-inset);
    inset-inline-end: var(--app-launcher-launchpad-space-inset);
  }

  .ui-app-launcher-launchpad [data-slot="dialog-title"] {
    color: hsl(var(--foreground));
    font-size: var(--app-launcher-launchpad-title-font-size);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--app-launcher-launchpad-title-letter-spacing);
    text-transform: uppercase;
  }

  .ui-app-launcher-panel {

    --app-launcher-columns: 3;

    display: grid;
    max-height: var(--app-launcher-panel-max-height);
    gap: var(--app-launcher-panel-gap);
    overflow-y: auto;
  }

  .ui-app-launcher-grid {
    display: grid;

    grid-template-columns: repeat(var(--app-launcher-columns), minmax(0, 1fr));
    margin: 0;
    padding: 0;
    gap: var(--app-launcher-grid-gap);
    list-style: none;
  }

  .ui-app-launcher-cell {
    display: flex;
  }

  .ui-app-launcher-tile {
    display: flex;
    min-width: 0;
    min-height: var(--app-launcher-tile-min-height);
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--app-launcher-tile-gap);
    padding: var(--app-launcher-tile-padding);
    border-radius: var(--app-launcher-tile-radius);
    color: hsl(var(--app-launcher-tile-color));
    text-align: center;
    text-decoration: none;
    transition:
      background-color var(--duration-fast),
      color var(--duration-fast);
  }

  .ui-app-launcher-tile:hover {
    background: hsl(var(--app-launcher-tile-hover-background, var(--accent)));
    color: hsl(var(--app-launcher-tile-hover-color, var(--accent-foreground)));
  }

  .ui-app-launcher-tile[aria-current="page"] {
    background: var(--app-launcher-tile-current-background, hsl(var(--secondary)));
  }

  .ui-app-launcher-mark {
    display: grid;
    width: var(--app-launcher-mark-size);
    height: var(--app-launcher-mark-size);
    flex: 0 0 auto;
    place-items: center;
    overflow: hidden;
    border-radius: var(--app-launcher-mark-radius);
    background: hsl(var(--app-launcher-mark-background));
    color: hsl(var(--app-launcher-mark-foreground));
    font-size: var(--app-launcher-mark-font-size);
    font-weight: var(--font-weight-semibold);
  }

  .ui-app-launcher-mark > * {
    width: 100%;
    height: 100%;
  }

  .ui-app-launcher-name {
    max-width: 100%;
    font-size: var(--app-launcher-name-font-size);
    line-height: var(--line-height-tight);
    overflow-wrap: anywhere;
  }

  .ui-app-launcher-group {
    display: grid;
    gap: var(--app-launcher-grid-gap);
  }

  .ui-app-launcher-group-label {
    padding-inline: var(--app-launcher-tile-padding);
    color: hsl(var(--app-launcher-group-label-color));
    font-size: var(--app-launcher-group-label-font-size);
    font-weight: var(--font-weight-medium);
  }

  .ui-app-launcher-state {
    display: flex;
    min-height: var(--app-launcher-state-min-height);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-5);
    color: hsl(var(--muted-foreground));
    text-align: center;
  }

  .ui-app-launcher-spinner {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    flex: 0 0 auto;
    animation: spin 1s linear infinite;
  }

  .sb-product,
  .sb-brand {
    display: flex;
    min-width: 0;
    min-height: var(--app-shell-bar-height);
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-2);
    padding-inline: var(--space-4);
    border: 0;
    border-bottom: 1px solid hsl(var(--border));
    background: transparent;
    color: inherit;
    font-family: inherit;
    text-align: start;
  }

  .sb-product {
    cursor: pointer;
  }

  .sb-product:hover {
    background: hsl(var(--accent));
  }

  .sb-product-static,
  .sb-product-static:hover {
    cursor: default;
    background: transparent;
  }

  .sb-logo-mark {
    display: grid;
    width: var(--sidebar-brand-mark-size);
    height: var(--sidebar-brand-mark-size);
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius);
    color: white;
    font-size: var(--sidebar-logo-mark-font-size);
    font-weight: 700;
  }

  .sb-product-meta {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 2px;
  }

  .sb-product-name {
    overflow: hidden;
    font-size: var(--font-size-base);
    font-weight: 700;

    line-height: var(--line-height-normal);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sb-product-tenant,
  .sb-product-caret {
    color: hsl(var(--muted-foreground));
  }

  .sb-product-tenant {
    overflow: hidden;
    font-size: var(--sidebar-product-tenant-font-size);
    font-weight: 700;
    letter-spacing: 0.08em;

    line-height: var(--line-height-normal);
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .sb-product-caret svg {
    width: var(--sidebar-product-caret-icon-size);
    height: var(--sidebar-product-caret-icon-size);
  }

  .sb-nav-scroll {
    flex: 1;
    min-height: 0;
    overscroll-behavior: contain;
    overflow-y: auto;
    padding: var(--sidebar-nav-scroll-padding);
  }

  .sb-section {
    padding: 0;
  }

  .sb-section + .sb-section {
    margin-top: var(--sidebar-section-gap);
  }

  .sb-section-label {
    padding: 0 var(--sidebar-section-label-padding-x) var(--sidebar-section-label-padding-bottom);
    color: var(--sidebar-section-label-foreground, hsl(var(--muted-foreground)));
    font-size: var(--sidebar-section-label-font-size);
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .sb-nav {
    display: flex;
    flex-direction: column;
    gap: var(--sidebar-nav-gap);
  }

  .ui-nav-list {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: var(--sidebar-nav-gap);
  }

  .sb-nav-item {
    display: flex;
    width: 100%;
    height: var(--sidebar-nav-item-height);
    min-width: 0;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--sidebar-nav-item-gap);
    padding-inline: var(--sidebar-nav-item-padding-x);
    border: 0;
    border-radius: var(--sidebar-nav-item-radius);
    background: transparent;

    color: var(--sidebar-nav-item-foreground, hsl(var(--muted-foreground)));
    cursor: pointer;
    font-family: inherit;
    font-size: var(--sidebar-nav-item-font-size);
    line-height: 1;
    text-align: start;
  }

  .sb-nav-item:hover {
    background: hsl(var(--accent));
    color: var(--sidebar-nav-item-hover-foreground, hsl(var(--foreground)));
  }

  .sb-nav-item[data-active="true"] {
    background: var(
      --sidebar-item-active-background,
      color-mix(
        in srgb,
        hsl(var(--primary)) var(--sidebar-item-active-background-alpha),
        transparent
      )
    );
    color: var(
      --sidebar-item-active-foreground,
      hsl(var(--primary-active, from hsl(var(--primary)) var(--primary-active-channels)))
    );
    font-weight: var(--font-weight-medium);
  }

  .sb-icon {
    display: grid;
    width: var(--sidebar-nav-icon-size);
    height: var(--sidebar-nav-icon-size);
    flex: 0 0 auto;
    line-height: 0;
    place-items: center;

    color: var(--sidebar-nav-icon-foreground, currentColor);
  }

  .sb-icon svg {
    display: block;
    width: var(--sidebar-nav-icon-size);
    height: var(--sidebar-nav-icon-size);
    flex: 0 0 auto;
  }

  .sb-label {
    min-width: 0;
    flex: 1;
    overflow: hidden;

    line-height: var(--sidebar-nav-item-line-height);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sb-badge {
    display: inline-flex;
    min-width: 1.125rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--sidebar-badge-background, hsl(var(--secondary)));
    color: var(--sidebar-badge-foreground, hsl(var(--muted-foreground)));
    font-size: var(--sidebar-badge-font-size);
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
    padding-inline: 0.375rem;
  }

  .sb-badge[data-tone="destructive"] {
    background: var(--sidebar-badge-destructive-background, hsl(var(--destructive)));
    color: var(--sidebar-badge-destructive-foreground, hsl(var(--destructive-foreground)));
  }

  .sb-trailing-icon {
    display: grid;
    width: var(--sidebar-nav-icon-size);
    height: var(--sidebar-nav-icon-size);
    flex: 0 0 auto;
    line-height: 0;
    place-items: center;
  }

  .sb-trailing-icon svg {
    display: block;
    width: var(--sidebar-nav-icon-size);
    height: var(--sidebar-nav-icon-size);
    flex: 0 0 auto;
  }

  .sb-footer {
    margin-top: auto;
    border-top: 1px solid hsl(var(--border));
    padding: var(--space-2);
  }

  .sb-nav-group-trigger .sb-chevron {
    margin-inline-start: auto;
    flex: 0 0 auto;
    opacity: 0.6;
    transition: transform 150ms ease;
  }

  .sb-nav-group-trigger[data-state="open"] .sb-chevron {
    transform: rotate(180deg);
  }

  .sb-nav-sub {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 var(--space-1) calc(var(--space-2) + 0.6875rem);
    padding-inline-start: var(--space-3);
    border-inline-start: 1px solid hsl(var(--border));
  }

  .sb-nav-item--sub {
    height: 1.75rem;
    font-size: var(--sidebar-nav-sub-font-size);

    color: var(--sidebar-nav-item-foreground, hsl(var(--muted-foreground)));
  }

  .sb-nav-item--sub::before {
    content: "";
    width: 4px;
    height: 4px;
    flex: 0 0 auto;
    border-radius: var(--radius-pill);
    background: currentColor;
    opacity: 0.4;
  }

  .sb-nav-item--sub:hover {
    background: transparent;
    color: var(--sidebar-nav-item-hover-foreground, hsl(var(--foreground)));
  }

  .sb-nav-item--sub[data-active="true"] {
    background: transparent;
    color: var(
      --sidebar-item-active-foreground,
      hsl(var(--primary-active, from hsl(var(--primary)) var(--primary-active-channels)))
    );
    font-weight: var(--font-weight-medium);
  }

  .sb-nav-item--sub[data-active="true"]::before {
    background: var(--sidebar-item-active-tint, hsl(var(--primary)));
    opacity: 1;
  }

  .sb-nav-item:hover .sb-icon {
    color: var(
      --sidebar-nav-icon-hover-foreground,
      var(--sidebar-nav-icon-foreground, currentColor)
    );
  }

  .sb-nav-item[data-active="true"] .sb-icon {
    color: var(
      --sidebar-nav-icon-active-foreground,
      var(--sidebar-nav-icon-foreground, currentColor)
    );
  }

  .sb-nav-item[aria-disabled="true"] {
    color: var(
      --sidebar-nav-item-disabled-foreground,
      var(--sidebar-nav-item-foreground, hsl(var(--muted-foreground)))
    );
  }

  .sb-nav-item[aria-disabled="true"] .sb-icon {
    color: var(
      --sidebar-nav-icon-disabled-foreground,
      var(--sidebar-nav-icon-foreground, currentColor)
    );
  }

  .sb-flyout-pop {
    display: flex;
    width: auto;
    min-width: 11rem;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-1);
  }

  .sb-flyout-title {
    padding: var(--space-1) var(--space-2);
    color: hsl(var(--muted-foreground));
    font-size: var(--sidebar-flyout-title-font-size);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
  }

  .sb-user {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    text-align: start;
  }

  .sb-user:hover,
  .sb-user[data-state="open"] {
    background: hsl(var(--accent));
  }

  .sb-user:focus {
    outline: none;
  }

  .sb-user-avatar {
    position: relative;
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: hsl(var(--secondary));
    color: hsl(var(--muted-foreground));
    font-size: var(--sidebar-avatar-font-size);
    font-weight: 500;
  }

  .sb-user-live {
    position: absolute;
    inset-inline-end: -1px;
    bottom: -1px;
    width: 0.5625rem;
    height: 0.5625rem;
    border-radius: var(--radius-pill);
    border: 1.5px solid hsl(var(--card));
    background: hsl(var(--success));
  }

  .sb-user-meta {
    display: grid;
    min-width: 0;
    flex: 1;
  }

  .sb-user-name {
    overflow: hidden;
    font-size: var(--sidebar-user-name-font-size);
    font-weight: 500;

    line-height: var(--line-height-normal);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sb-user-role {
    overflow: hidden;
    color: hsl(var(--muted-foreground));
    font-size: var(--sidebar-user-role-font-size);

    line-height: var(--line-height-normal);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sb-user-menu {
    flex: 0 0 auto;
    color: hsl(var(--muted-foreground));
  }

  :is(.app-root[data-collapsed="true"] > .app-sidebar, .sb-root[data-collapsed="true"])
    .sb-user-meta,
  :is(.app-root[data-collapsed="true"] > .app-sidebar, .sb-root[data-collapsed="true"])
    .sb-user-menu {
    display: none;
  }

  :is(.app-root[data-collapsed="true"] > .app-sidebar, .sb-root[data-collapsed="true"])
    .sb-product-name,
  :is(.app-root[data-collapsed="true"] > .app-sidebar, .sb-root[data-collapsed="true"])
    .sb-product-tenant,
  :is(.app-root[data-collapsed="true"] > .app-sidebar, .sb-root[data-collapsed="true"])
    .sb-product-caret,
  :is(.app-root[data-collapsed="true"] > .app-sidebar, .sb-root[data-collapsed="true"])
    .sb-section-label,
  :is(.app-root[data-collapsed="true"] > .app-sidebar, .sb-root[data-collapsed="true"]) .sb-label,
  :is(.app-root[data-collapsed="true"] > .app-sidebar, .sb-root[data-collapsed="true"])
    .sb-trailing-icon,
  :is(.app-root[data-collapsed="true"] > .app-sidebar, .sb-root[data-collapsed="true"]) .sb-badge {
    display: none;
  }

  :is(.app-root[data-collapsed="true"] > .app-sidebar, .sb-root[data-collapsed="true"])
    .sb-product {
    justify-content: center;
    padding: 0;
  }

  :is(.app-root[data-collapsed="true"] > .app-sidebar, .sb-root[data-collapsed="true"])
    .sb-nav-item {
    width: var(--control-height);
    justify-content: center;
    margin-inline: auto;
    padding: 0;
  }

  .tb-switcher {
    display: flex;
    min-width: 0;
    flex: 1;
    align-items: center;
    gap: 2px;
  }

  .ui-topbar {
    display: flex;
    height: var(--topbar-height);
    width: auto;
    max-width: 100%;
    min-width: 0;
    flex: 1 1 0%;

    align-self: stretch;
    align-items: center;
    gap: var(--topbar-gap);
    padding-inline: var(--topbar-inset);

    background-color: hsl(var(--background) / var(--topbar-background-alpha));
    backdrop-filter: blur(var(--topbar-backdrop-blur-size));

    overflow: clip;
    overflow-clip-margin: var(--focus-ring-clip-margin);
  }
  .ui-topbar-start,
  .ui-topbar-center,
  .ui-topbar-end {
    display: flex;
    min-width: 0;

    align-self: stretch;
    align-items: center;
    gap: var(--topbar-gap);
    overflow: clip;
    overflow-clip-margin: var(--focus-ring-clip-margin);
  }

  @supports not (overflow-clip-margin: 1px) {
    .app-sidebar,
    .app-nav-rail,
    .app-topbar,
    .ui-topbar,
    .ui-topbar-start,
    .ui-topbar-center,
    .ui-topbar-end {
      overflow: visible;
    }
  }
  .ui-topbar-start {
    flex: 0 1 auto;

    min-inline-size: var(--topbar-item-min-width);
  }

  .ui-topbar-start > :last-child:not(:is(button, a, [role="button"], .ui-button)) {
    max-width: 100%;
    min-width: 0;
    flex: 0 1 auto;
    overflow: clip;
    overflow-clip-margin: var(--focus-ring-clip-margin);
    line-height: var(--topbar-start-truncate-line-height);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ui-topbar-center {
    flex: 1 1 0%;
    justify-content: center;
  }

  .ui-topbar-end {
    max-width: 100%;
    flex: 0 1 auto;
    margin-inline-start: auto;
  }

  .ui-topbar[data-overflow="scroll"] {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  .ui-topbar[data-overflow="scroll"]::-webkit-scrollbar {
    display: none;
  }

  .ui-topbar[data-overflow="scroll"] > .ui-topbar-end {
    max-inline-size: none;
    min-inline-size: auto;
  }

  .ui-topbar-item {
    display: inline-flex;
    min-width: var(--topbar-item-min-width);
    flex: 0 0 auto;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    gap: var(--topbar-item-gap);
    padding-inline: var(--topbar-item-padding-inline);
    border: 0;
    border-radius: var(--topbar-item-radius);
    background: transparent;
    color: hsl(var(--topbar-item-color));
    cursor: pointer;

    font: inherit;
    white-space: nowrap;
    --focus-ring-offset: var(--topbar-item-focus-ring-offset);
    transition:
      background-color var(--duration-fast),
      color var(--duration-fast);
  }

  .ui-topbar-item:hover {
    background: hsl(var(--topbar-item-hover-background, var(--accent)));
    color: hsl(var(--topbar-item-hover-color, var(--accent-foreground)));
  }

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

  .ui-topbar-item:disabled,
  .ui-topbar-item[data-disabled] {
    opacity: var(--disabled-opacity);
    cursor: not-allowed;
  }

  .ui-topbar-item:has(> [data-slot="topbar-item-badge"]) {
    position: relative;
  }

  .ui-topbar-item-badge {
    position: absolute;

    inset-block-start: calc(
      50% - var(--topbar-icon-size) / 2 - var(--topbar-item-badge-offset-block)
    );
    inset-inline-end: calc(
      50% - var(--topbar-icon-size) / 2 - var(--topbar-item-badge-offset-inline)
    );
    display: inline-flex;
    min-inline-size: var(--topbar-item-badge-size);
    block-size: var(--topbar-item-badge-size);
    align-items: center;
    justify-content: center;
    padding-inline: var(--topbar-item-badge-padding-inline);
    border-radius: var(--radius-pill);
    background: var(--topbar-item-badge-background, hsl(var(--secondary)));
    color: var(--topbar-item-badge-foreground, hsl(var(--muted-foreground)));
    font-size: var(--topbar-item-badge-font-size);
    font-weight: var(--font-weight-medium);
    line-height: 1;

    pointer-events: none;
  }

  .ui-topbar-item-badge[data-tone="destructive"] {
    background: var(--topbar-item-badge-destructive-background, hsl(var(--destructive)));
    color: var(--topbar-item-badge-destructive-foreground, hsl(var(--destructive-foreground)));
  }

  .ui-topbar-item > svg {
    width: var(--topbar-icon-size);
    height: var(--topbar-icon-size);
    flex: 0 0 auto;
  }

  .ui-topbar-item-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
  }
  .ui-topbar-item-icon svg {
    inline-size: var(--topbar-icon-size);
    block-size: var(--topbar-icon-size);
  }

  @media (width <= 68.75rem) {
    .ui-topbar-center {
      display: var(--topbar-center-compact-display);
    }
  }

  .tb-chip {
    display: inline-flex;
    max-width: 15rem;
    min-width: 0;
    height: var(--control-height-sm);
    align-items: center;
    gap: var(--space-1);
    padding-inline: var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: hsl(var(--foreground));
    cursor: pointer;
    font: inherit;
    font-size: var(--font-size-base);
  }

  .tb-chip:hover,
  .tb-chip[data-open="true"] {
    border-color: hsl(var(--border));
    background: hsl(var(--accent));
  }

  .tb-chip-empty {
    border-color: hsl(var(--border));
    border-style: dashed;
    color: hsl(var(--muted-foreground));
  }

  .tb-chip-static,
  .tb-chip-static:hover {
    border-color: transparent;
    background: transparent;
    cursor: default;
  }

  .tb-chip-icon {
    display: grid;
    width: var(--topbar-chip-icon-size);
    height: var(--topbar-chip-icon-size);
    flex: 0 0 auto;
    place-items: center;
    border-radius: calc(var(--radius) - 2px);
    color: white;
    font-size: var(--topbar-chip-icon-font-size);
    font-weight: 700;
  }

  .tb-chip-label {
    min-width: 0;
    overflow: hidden;
    font-weight: 500;

    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tb-chip-caret,
  .tb-chip-sep {
    color: hsl(var(--muted-foreground));
  }

  .tb-chip-caret svg {
    width: var(--topbar-caret-icon-size);
    height: var(--topbar-caret-icon-size);
  }

  .tb-search {
    display: flex;

    width: 100%;

    flex: 0 1 var(--topbar-search-width);
    min-inline-size: 0;
    max-width: var(--topbar-search-max-width);
    height: var(--control-height-sm);
    align-items: center;
    gap: var(--space-2);
    padding-inline: var(--space-2);
    border: 1px solid hsl(var(--input));
    border-radius: var(--radius);
    background: hsl(var(--background));
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    font: inherit;
    font-size: var(--font-size-base);
  }

  .tb-search svg,
  .tb-icon-btn svg {
    width: var(--topbar-icon-size);
    height: var(--topbar-icon-size);
  }

  .tb-search .kbd {
    margin-inline-start: auto;
  }

  .kbd {
    display: inline-flex;
    align-items: center;
    margin-inline-start: auto;
    padding: 1px 5px;
    border: 1px solid hsl(var(--border));
    border-bottom-width: 2px;
    border-radius: 4px;
    background: hsl(var(--secondary));
    color: hsl(var(--muted-foreground));
    font-family: var(--font-family-mono);
    font-size: var(--kbd-font-size);
    line-height: 1.2;
  }

  .tb-icon-btn {
    display: grid;
    width: var(--control-height-sm);
    height: var(--control-height-sm);
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
  }

  .tb-icon-btn:hover {
    background: hsl(var(--accent));
    color: hsl(var(--accent-foreground));
  }

  .tb-icon-btn:focus {
    outline: none;
  }

  .tb-bell {
    position: relative;
  }

  .tb-bell-dot {
    position: absolute;
    top: 0.35rem;
    inset-inline-end: 0.35rem;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: var(--radius-pill);
    background: hsl(var(--attention));
  }

  @media (max-width: 768px) {

    .ui-topbar-item {
      padding-inline: var(--topbar-item-padding-inline-compact);
    }

    .tb-chip-sep,
    .tb-search .kbd,

    .tb-search .tb-search-label {
      display: none;
    }

    .tb-search {
      width: auto;

      flex: 0 0 auto;
      min-inline-size: var(--control-height-sm);
      min-width: var(--control-height-sm);
      inline-size: var(--control-height-sm);
      block-size: var(--control-height-sm);
      justify-content: center;
      padding-inline: 0;
    }

    .tb-search span {
      display: none;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-mobile-nav-overlay,
  .app-mobile-nav-drawer {
    animation: none;
    transition: none;
  }
}

@layer components {
  .ui-error-surface {
    container: error-surface / inline-size;
    display: flex;
    width: 100%;
    max-width: var(--error-surface-max-width);
    flex-direction: column;
    align-items: center;

    margin-inline: auto;
    gap: var(--error-surface-gap);
    padding-block: var(--error-surface-padding-block);
    text-align: center;
  }

  .ui-error-surface-brand {
    display: flex;
    justify-content: center;
    padding-block-end: var(--error-surface-brand-gap);
  }

  .ui-error-surface .ui-error-surface-body {
    width: 100%;
    padding-block: 0;
  }

  .ui-error-surface-status {
    margin: 0;
  }

  .ui-error-surface-meta {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: var(--error-surface-meta-gap);
    border-block-start: var(--error-surface-meta-border);
    padding-block-start: var(--error-surface-meta-padding-block);
    margin: 0;
  }

  .ui-error-surface-meta-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--error-surface-meta-row-gap);
  }

  .ui-error-surface-meta-row > dd {
    margin-inline-start: 0;
  }

  .ui-error-surface-progress {
    width: 100%;
    max-width: var(--error-surface-progress-max-width);
  }

  @container error-surface (width < 30rem) {
    .ui-error-surface {
      padding-block: var(--error-surface-padding-block-compact);
    }

    .ui-error-surface-meta-row {
      flex-direction: column;
      gap: 0;
    }
  }
}

@layer components {
  .ui-mobile-shell {
    --control-height: var(--mobile-shell-control-height);

    --control-height-sm: calc(var(--control-height) - calc(0.25rem * var(--scaling)));
    --control-height-lg: calc(var(--control-height) + calc(0.25rem * var(--scaling)));
    --control-height-xs: calc(var(--control-height) - calc(0.5rem * var(--scaling)));

    --mobile-shell-padding-inline: calc(
      var(--mobile-shell-inset-inline) + var(--mobile-shell-safe-inset-inline)
    );
    display: flex;

    block-size: var(--mobile-shell-block-size);
    flex-direction: column;
    overflow: hidden;
    background: hsl(var(--background));
  }

  .ui-mobile-shell[data-height="fill"] {
    --mobile-shell-block-size: 100%;
  }

  .ui-mobile-shell[data-width="phone"] {
    max-inline-size: var(--mobile-shell-max-inline-size);
    margin-inline: auto;
  }

  .ui-mobile-shell-chrome {
    display: flex;
    min-inline-size: 0;
    flex: 0 0 auto;
    flex-direction: column;
  }

  .ui-mobile-shell-status {
    display: flex;
    min-block-size: calc(
      var(--mobile-shell-status-bar-height) + var(--mobile-shell-safe-inset-block-start)
    );
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: var(--mobile-shell-region-gap);
    padding-block-start: var(--mobile-shell-safe-inset-block-start);
    padding-inline: var(--mobile-shell-padding-inline);
    background: hsl(var(--card));
  }

  .ui-mobile-shell-header {
    display: flex;
    min-block-size: var(--mobile-shell-header-bar-height);
    min-inline-size: 0;
    flex: 0 0 auto;

    overflow: clip;
    overflow-clip-margin: var(--focus-ring-clip-margin);
    align-items: center;
    gap: var(--mobile-shell-region-gap);
    padding-inline: var(--mobile-shell-padding-inline);
    border-block-end: 1px solid hsl(var(--border));
    background: hsl(var(--card));
    background-image: var(--topbar-gradient);
  }

  .ui-mobile-shell-header:first-child {
    min-block-size: calc(
      var(--mobile-shell-header-bar-height) + var(--mobile-shell-safe-inset-block-start)
    );
    padding-block-start: var(--mobile-shell-safe-inset-block-start);
  }

  .ui-mobile-shell-main {
    display: flex;
    min-block-size: 0;
    min-inline-size: 0;

    flex: 1 1 auto;
    flex-direction: column;
    overflow-y: auto;

    overscroll-behavior-block: contain;

    contain: paint;
    padding-block: var(--mobile-shell-main-padding-block);
    padding-inline: var(--mobile-shell-padding-inline);
    background-image: var(--gradient-glow);
  }

  .ui-mobile-shell-main:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 calc(var(--region-focus-ring-width) * var(--focus-outline))
      var(--region-focus-ring-color, hsl(var(--focus-ring-color, var(--ring))));
  }

  .ui-mobile-shell-actions {
    display: flex;
    min-inline-size: 0;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--mobile-shell-region-gap);
    padding-block: var(--mobile-shell-actions-padding-block);
    padding-inline: var(--mobile-shell-padding-inline);
    border-block-start: 1px solid hsl(var(--border));
    background: hsl(var(--card));
  }

  .ui-mobile-shell-tabbar {
    display: flex;
    min-block-size: calc(
      var(--mobile-shell-tab-bar-height) + var(--mobile-shell-safe-inset-block-end)
    );
    min-inline-size: 0;
    flex: 0 0 auto;
    padding-block-end: var(--mobile-shell-safe-inset-block-end);
    padding-inline: var(--mobile-shell-safe-inset-inline);
    border-block-start: 1px solid hsl(var(--border));
    background: hsl(var(--card));
  }

  .ui-mobile-shell-tabbar > * {
    min-inline-size: 0;
    flex: 1 1 0;
  }

  .ui-mobile-shell-actions:last-child {
    padding-block-end: calc(
      var(--mobile-shell-actions-padding-block) + var(--mobile-shell-safe-inset-block-end)
    );
  }

  .ui-mobile-shell-main:last-child {
    padding-block-end: calc(
      var(--mobile-shell-main-padding-block) + var(--mobile-shell-safe-inset-block-end)
    );
  }
}

@layer components {

  .ui-centered-shell[data-preset="public-landing"] {
    --centered-shell-main-padding: var(--centered-shell-landing-main-padding-block)
      var(--centered-shell-landing-inset-inline);
    --heading-h1: var(--centered-shell-landing-heading-size);
    --card-shadow: var(--centered-shell-landing-card-shadow);
    background: hsl(var(--centered-shell-landing-background, var(--background)));
  }

  .ui-centered-shell[data-preset="public-landing"] .ui-centered-shell-column {
    display: flex;
    max-width: var(--centered-shell-landing-max-width);
    flex-direction: column;

    gap: var(--centered-shell-landing-section-gap);
  }

  .ui-centered-shell[data-preset="public-landing"] .ui-centered-shell-bar,
  .ui-centered-shell[data-preset="public-landing"] .ui-centered-shell-footer {
    padding-inline: max(
      var(--centered-shell-landing-inset-inline),
      calc((100% - var(--centered-shell-landing-max-width)) / 2)
    );
  }

  .ui-centered-shell[data-preset="public-landing"] .ui-centered-shell-footer {
    padding-block: var(--centered-shell-landing-footer-padding-block);
    text-align: start;
  }

  @media (width < 40rem) {
    .ui-centered-shell[data-preset="public-landing"] {
      --centered-shell-landing-inset-inline: var(--centered-shell-landing-inset-inline-compact);
      --centered-shell-landing-main-padding-block: var(
        --centered-shell-landing-main-padding-block-compact
      );
      --centered-shell-landing-section-gap: var(--centered-shell-landing-section-gap-compact);
      --centered-shell-landing-heading-size: var(--centered-shell-landing-heading-size-compact);
    }
  }
}

@layer components {

  .app-root[data-sidebar="none"]:not([data-nav-rail]) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "topbar" "main" "footer";
  }
}