@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/InterVariable.woff2") format("woff2");
}

.file-tree {
    display: flex;
    flex-direction: column;
    padding: 6px 0;
    overflow-y: auto;
}

.file-tree__row {
    display: flex;
    width: 100%;
    height: 28px;
    align-items: center;
    gap: 6px;
    margin: 0 0 1px;
    padding-right: 6px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--shell-nav-text, var(--shell-text-secondary));
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: normal;
    text-align: left;
    white-space: nowrap;
    cursor: var(--pointer, pointer);
    transition: background-color 0.1s ease, color 0.1s ease;
}

.file-tree__row-action {
    display: inline-flex;
    min-width: 0;
    height: 100%;
    flex: 1 1 auto;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: var(--pointer, pointer);
}

.file-tree__row-action:focus {
    outline: none;
}

.file-tree__row:focus-within {
    outline: 1px solid color-mix(in srgb, var(--app-theme-accent, #5e6ad2) 58%, transparent);
    outline-offset: -1px;
}

.file-tree__checkbox {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    margin: 0;
    accent-color: var(--app-theme-accent, #5e6ad2);
}

.file-tree__row:hover {
    background: var(--shell-nav-hover-bg, var(--shell-bg-hover));
    color: var(--shell-nav-hover-text, var(--shell-text-primary));
}

.file-tree__row--selected {
    background: var(--shell-nav-active-bg, var(--shell-bg-active));
    color: var(--shell-nav-active-text, var(--shell-text-primary));
}

.file-tree__row--selected:hover {
    background: var(--shell-nav-active-bg, var(--shell-bg-active));
    color: var(--shell-nav-active-text, var(--shell-text-primary));
}

.file-tree__row--colored:not(.file-tree__row--selected) {
    color: var(--file-tree-entry-color, currentColor);
}

.file-tree__row--colored:hover,
.file-tree__row--colored.file-tree__row--selected {
    color: var(--file-tree-entry-color, var(--shell-nav-active-text, var(--shell-text-primary)));
}

.file-tree__disclosure {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: currentColor;
    opacity: 0.82;
}

.file-tree__disclosure .shell-icon svg {
    transition: transform 0.12s ease;
    transform-origin: 50% 50%;
}

.file-tree__disclosure--expanded .shell-icon svg {
    transform: matrix(0, 1, -1, 0, 0, 0);
}

.file-tree__icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: currentColor;
    opacity: 0.9;
}

.file-tree__label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-tree__children {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.file-tree__collapse {
    display: grid;
    overflow: hidden;
    transition: grid-template-rows 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.file-tree__collapse--expanded {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: none;
}

.file-tree__collapse--collapsed {
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(-2px);
}

@font-face {
    font-family: "Inter Variable";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/InterVariable-Italic.woff2") format("woff2");
}

.ui-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ui-avatar-size, 24px);
    height: var(--ui-avatar-size, 24px);
    flex: 0 0 var(--ui-avatar-size, 24px);
    overflow: hidden;
    border-radius: 9999px;
    background: var(--ui-avatar-bg, var(--shell-accent));
    color: var(--ui-avatar-text, lch(100% 0 0));
    font-size: calc(var(--ui-avatar-size, 24px) * 0.42);
    font-weight: 650;
    line-height: 1;
}

.ui-avatar--rounded-square {
    border-radius: 7px;
}

.ui-avatar--square {
    border-radius: 0;
}

.ui-avatar__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ui-avatar__initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.layout-grid {
    container-type: inline-size;
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    row-gap: var(--layout-grid-row-gap, var(--layout-grid-gap, 14px));
    column-gap: var(--layout-grid-column-gap, var(--layout-grid-gap, 14px));
    align-items: var(--layout-grid-align-items, stretch);
    justify-items: var(--layout-grid-justify-items, stretch);
}

.layout-grid--columns,
.layout-grid--areas {
    grid-template-columns: repeat(var(--layout-grid-columns, 12), minmax(0, 1fr));
    grid-auto-rows: var(--layout-grid-auto-rows, auto);
}

.layout-grid--areas {
    grid-template-areas: var(--layout-grid-areas);
}

.layout-grid--autofit {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--layout-grid-min-item-width, 240px)), 1fr));
    grid-auto-rows: var(--layout-grid-auto-rows, auto);
}

.layout-grid--autofill {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--layout-grid-min-item-width, 240px)), 1fr));
    grid-auto-rows: var(--layout-grid-auto-rows, auto);
}

.layout-grid--dense {
    grid-auto-flow: row dense;
}

.layout-grid--inset-compact {
    padding: 8px;
}

.layout-grid--inset-medium {
    padding: 12px;
}

.layout-grid--inset-page {
    padding: var(--single-column-page-body-gutter, 20px);
}

.layout-grid--equal-height > .layout-grid-item {
    display: block;
    align-self: stretch;
}

.layout-grid--equal-height > .layout-grid-item > * {
    width: 100%;
    min-height: 100%;
}

.layout-grid-item {
    min-width: 0;
    min-height: auto;
    box-sizing: border-box;
    grid-column: var(--layout-grid-item-column, auto);
    grid-row: span var(--layout-grid-item-row-span, 1);
    order: var(--layout-grid-item-order, 0);
}

.layout-grid-item--area {
    grid-area: var(--layout-grid-item-area);
}

.docs-site {
    --docs-bg: rgb(8, 9, 10);
    --docs-bg-elevated: rgb(28, 28, 31);
    --docs-bg-hover: rgba(255, 255, 255, 0.05);
    --docs-border: rgb(28, 28, 31);
    --docs-border-strong: rgb(35, 37, 42);
    --docs-divider: rgb(62, 62, 68);
    --docs-text: rgb(247, 248, 248);
    --docs-text-secondary: rgb(208, 214, 224);
    --docs-text-muted: rgb(138, 143, 152);
    --docs-text-faint: rgb(95, 99, 108);
    background: var(--docs-bg);
    color: var(--docs-text);
    font-family: "Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    position: fixed;
    inset: 0;
    overflow: auto;
    z-index: 0;
}

.docs-site--light {
    --docs-bg: rgb(247, 248, 248);
    --docs-bg-elevated: rgb(255, 255, 255);
    --docs-bg-hover: rgba(0, 0, 0, 0.04);
    --docs-border: rgb(223, 225, 229);
    --docs-border-strong: rgb(211, 214, 219);
    --docs-divider: rgb(196, 200, 207);
    --docs-text: rgb(26, 27, 30);
    --docs-text-secondary: rgb(65, 69, 76);
    --docs-text-muted: rgb(100, 106, 116);
    --docs-text-faint: rgb(142, 148, 158);
}

.docs-site *,
.docs-site *::before,
.docs-site *::after {
    box-sizing: border-box;
}

.docs-site a {
    color: inherit;
    text-decoration: none;
}

.docs-site button,
.docs-site input {
    font: inherit;
}

.docs-site__skip-link {
    position: fixed;
    top: 10px;
    left: 292px;
    z-index: 900;
    transform: translateY(-64px);
    border: 1px solid var(--docs-border-strong);
    border-radius: 8px;
    background: var(--docs-bg-elevated);
    color: var(--docs-text);
    padding: 7px 10px;
    transition: transform 160ms ease;
}

.docs-site__skip-link:focus-visible {
    transform: translateY(0);
    outline: none;
}

.docs-sidebar {
    background: var(--docs-bg);
    border-right: 1px solid var(--docs-border-strong);
    color: var(--docs-text-muted);
    display: flex;
    flex-direction: column;
    height: 100vh;
    left: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 280px;
    z-index: 100;
}

.docs-sidebar__header {
    align-items: center;
    border-bottom: 1px solid var(--docs-border-strong);
    display: flex;
    flex: 0 0 64px;
    height: 64px;
    padding: 0 16px 0 24px;
    width: 279px;
}

.docs-site .docs-sidebar__brand {
    align-items: center;
    color: var(--docs-text);
    display: inline-flex;
    gap: 16px;
    min-width: 0;
}

.docs-sidebar__brand-mark {
    background: var(--docs-text);
    border-radius: 9999px;
    display: inline-block;
    height: 20px;
    overflow: hidden;
    position: relative;
    content: "";
    width: 20px;
}

.docs-sidebar__brand-mark::after {
    background:
        repeating-linear-gradient(
            45deg,
            transparent 0,
            transparent 4px,
            var(--docs-bg) 4px,
            var(--docs-bg) 6px
        );
    content: "";
    inset: 0;
    position: absolute;
}

.docs-sidebar__brand-divider {
    background: var(--docs-divider);
    display: inline-block;
    height: 20px;
    width: 1px;
}

.docs-sidebar__brand-text {
    color: var(--docs-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.docs-sidebar__search-button {
    align-items: center;
    background: var(--docs-bg);
    border: 1px solid var(--docs-border);
    border-radius: 9999px;
    color: var(--docs-text-muted);
    display: inline-flex;
    height: 32px;
    justify-content: center;
    margin-left: auto;
    padding: 0;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
    width: 32px;
}

.docs-sidebar__search-button:hover {
    background: var(--docs-bg-hover);
    border-color: var(--docs-border-strong);
    color: var(--docs-text-secondary);
}

.docs-sidebar__desktop-content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.docs-sidebar__nav-scroll {
    flex: 1 1 auto;
    mask-image: linear-gradient(
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0.2) 10px,
        rgb(0, 0, 0) 20px,
        rgb(0, 0, 0) calc(100% - 64px),
        rgba(0, 0, 0, 0.2) calc(100% - 32px),
        rgba(0, 0, 0, 0) 100%
    );
    min-height: 0;
    overflow-y: auto;
    padding: 8px 20px 12px;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0.2) 10px,
        rgb(0, 0, 0) 20px,
        rgb(0, 0, 0) calc(100% - 64px),
        rgba(0, 0, 0, 0.2) calc(100% - 32px),
        rgba(0, 0, 0, 0) 100%
    );
}

.docs-sidebar__nav-scroll::-webkit-scrollbar {
    display: none;
}

.docs-sidebar__search-row {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--docs-text-muted);
    display: none;
    gap: 8px;
    height: 32px;
    margin: 8px 0 14px;
    padding: 0 8px;
    text-align: left;
    transition: background-color 140ms ease, color 140ms ease;
    width: 100%;
}

.docs-sidebar__search-row:hover {
    background: var(--docs-bg-hover);
    color: var(--docs-text-secondary);
}

.docs-sidebar__mobile-tools {
    align-items: center;
    display: flex;
    gap: 8px;
    margin: 8px 0 20px;
}

.docs-sidebar__mobile-theme {
    align-items: center;
    background: var(--docs-bg);
    border: 1px solid var(--docs-border);
    border-radius: 9999px;
    color: var(--docs-text-muted);
    display: inline-flex;
    flex: 0 0 32px;
    height: 32px;
    justify-content: center;
    padding: 0;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
    width: 32px;
}

.docs-sidebar__mobile-theme:hover {
    background: var(--docs-bg-hover);
    border-color: var(--docs-border-strong);
    color: var(--docs-text-secondary);
}

.docs-sidebar__mobile-theme span {
    border: 1.5px solid currentColor;
    border-radius: 9999px;
    display: block;
    height: 14px;
    overflow: hidden;
    position: relative;
    width: 14px;
}

.docs-sidebar__mobile-theme span::after {
    background: currentColor;
    content: "";
    inset: -2px -2px -2px 6px;
    position: absolute;
}

.docs-sidebar__section {
    margin: 0;
}

.docs-sidebar__section-button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--docs-text-muted);
    display: flex;
    font-size: 14px;
    font-weight: 500;
    gap: 8px;
    height: 36px;
    justify-content: space-between;
    line-height: 20px;
    padding: 0 5px 0 2px;
    text-align: left;
    transition: background-color 140ms ease, color 140ms ease;
    width: 100%;
}

.docs-sidebar__section-button:hover,
.docs-sidebar__section-button--current {
    color: var(--docs-text);
}

.docs-sidebar__section-button:hover {
    background: var(--docs-bg-hover);
}

.docs-sidebar__section-button .shell-icon {
    color: var(--docs-text-faint);
    transition: color 140ms ease, transform 140ms ease;
}

.docs-sidebar__section-button:hover .shell-icon,
.docs-sidebar__section-button--current .shell-icon {
    color: var(--docs-text-muted);
}

.docs-sidebar__section-button--collapsed .shell-icon {
    transform: rotate(-90deg);
}

.docs-sidebar__links {
    display: grid;
    gap: 0;
    margin: 0 0 2px;
}

.docs-sidebar__link {
    align-items: center;
    border-radius: 8px;
    color: var(--docs-text-muted);
    display: flex;
    font-size: 14px;
    font-weight: 450;
    gap: 8px;
    height: 32px;
    line-height: 20px;
    padding: 0 8px 0 14px;
    transition: background-color 140ms ease, color 140ms ease;
}

.docs-sidebar__link:hover {
    background: transparent;
    color: var(--docs-text);
}

.docs-sidebar__link--current {
    color: var(--docs-text);
}

.docs-sidebar__footer {
    border-top: 1px solid transparent;
    display: grid;
    flex: 0 0 auto;
    gap: 0;
    padding: 20px;
}

.docs-sidebar__footer a {
    align-items: center;
    border-radius: 0;
    color: var(--docs-text-muted);
    display: flex;
    font-size: 14px;
    font-weight: 510;
    gap: 0;
    height: 36px;
    line-height: 21px;
    padding: 0 5px;
    transition: background-color 140ms ease, color 140ms ease;
}

.docs-sidebar__footer a:first-child {
    color: var(--docs-text);
}

.docs-sidebar__footer a:hover {
    background: transparent;
    color: var(--docs-text);
}

.docs-sidebar__footer .shell-icon {
    color: currentColor;
    flex: 0 0 auto;
    margin-right: 12px;
}

.docs-sidebar__open-app--mobile,
.docs-sidebar__menu-button,
.docs-sidebar__mobile-content {
    display: none;
}

.docs-site__header {
    align-items: center;
    background: var(--docs-bg);
    border-bottom: 1px solid var(--docs-border-strong);
    display: flex;
    height: 64px;
    left: 280px;
    padding: 0 16px 0 24px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 100;
}

.docs-site__breadcrumbs {
    align-items: center;
    color: var(--docs-text-muted);
    display: flex;
    font-size: 14px;
    font-weight: 510;
    gap: 8px;
    line-height: 21px;
    min-width: 0;
}

.docs-site__breadcrumb {
    color: var(--docs-text-muted);
    transition: color 140ms ease;
}

.docs-site__breadcrumb:hover {
    color: var(--docs-text-secondary);
}

.docs-site__breadcrumb--current {
    color: var(--docs-text);
}

.docs-site__breadcrumb-divider {
    color: var(--docs-text-faint);
    display: inline-flex;
    font-size: 14px;
    line-height: 21px;
}

.docs-site__header-actions {
    align-items: center;
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.docs-site__theme-toggle {
    align-items: center;
    background: var(--docs-bg);
    border: 1px solid var(--docs-border);
    border-radius: 9999px;
    color: var(--docs-text-muted);
    display: inline-flex;
    height: 32px;
    justify-content: center;
    margin-right: 1px;
    padding: 0;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
    width: 32px;
}

.docs-site__theme-toggle:hover {
    background: var(--docs-bg-hover);
    border-color: var(--docs-border-strong);
    color: var(--docs-text-secondary);
}

.docs-site__open-app {
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 0;
    border-radius: 9999px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.28);
    color: var(--docs-text);
    display: inline-flex;
    font-size: 14px;
    font-weight: 520;
    height: 32px;
    justify-content: center;
    line-height: 20px;
    padding: 0;
    transition: background-color 140ms ease, box-shadow 140ms ease;
    width: 84px;
}

.docs-site__open-app:hover {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.32);
}

.docs-site-copy {
    align-items: center;
    border: 1px solid var(--docs-border);
    border-radius: 9999px;
    display: inline-flex;
    height: 32px;
    position: relative;
    width: 147px;
}

.docs-site-copy__main,
.docs-site-copy__toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--docs-text-muted);
    display: inline-flex;
    height: 30px;
    justify-content: center;
    transition: background-color 140ms ease, color 140ms ease;
}

.docs-site-copy__main {
    border-radius: 9999px 0 0 9999px;
    flex: 0 0 115px;
    gap: 8px;
    padding: 0;
}

.docs-site-copy__toggle {
    border-left: 1px solid var(--docs-border);
    border-radius: 0 9999px 9999px 0;
    flex: 0 0 30px;
    padding: 0;
    width: 30px;
}

.docs-site-copy__main:hover,
.docs-site-copy__toggle:hover {
    background: var(--docs-bg-hover);
    color: var(--docs-text-secondary);
}

.docs-site-copy__menu {
    animation: docs-copy-menu-in 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background: rgb(15, 16, 17);
    border: 1px solid var(--docs-border-strong);
    border-radius: 8px;
    box-shadow: 0 7px 32px rgba(0, 0, 0, 0.35);
    display: grid;
    gap: 0;
    min-width: 280px;
    opacity: 1;
    padding: 4px;
    position: absolute;
    right: 0;
    transform-origin: top left;
    top: calc(100% + 8px);
    z-index: 760;
}

@keyframes docs-copy-menu-in {
    from {
        opacity: 0;
        transform: translateY(-4px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.docs-site-copy__menu button {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: var(--docs-text-secondary);
    display: flex;
    gap: 12px;
    height: 52px;
    padding: 6px 12px;
    text-align: left;
    width: 100%;
}

.docs-site-copy__menu button > .shell-icon {
    color: var(--docs-text-muted);
    flex: 0 0 auto;
}

.docs-site-copy__menu button span {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.docs-site-copy__menu button strong {
    color: var(--docs-text-secondary);
    font-size: 14px;
    font-weight: 510;
    line-height: 19.5px;
}

.docs-site-copy__menu button small {
    color: var(--docs-text-muted);
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
}

.docs-site-copy__menu button:hover {
    background: rgba(255, 255, 255, 0.07);
    color: var(--docs-text);
}

.docs-site-copy__menu button:hover strong {
    color: var(--docs-text);
}

.docs-site__main {
    min-height: 100vh;
    padding-left: 280px;
}

.docs-site__article-layout {
    align-items: flex-start;
    display: flex;
    gap: 76px;
    margin-left: 92px;
    padding: 112px 48px 48px 0;
}

.docs-article {
    color: var(--docs-text-secondary);
    flex: 0 0 650px;
    max-width: 650px;
    min-width: 0;
}

.docs-article h1,
.docs-article h2,
.docs-article h3 {
    color: var(--docs-text);
    font-weight: 560;
    letter-spacing: 0;
}

.docs-article h2 a,
.docs-article h3 a {
    display: inline-block;
}

.docs-article [id] {
    scroll-margin-top: 89px;
}

.docs-article h1 {
    font-size: 32px;
    line-height: 36px;
    margin: 0;
    font-weight: 590;
}

.docs-article h2 {
    font-size: 24px;
    font-weight: 590;
    line-height: 31.92px;
    margin: 56px 0 0;
    scroll-margin-top: 89px;
}

.docs-article h3 {
    font-size: 20px;
    font-weight: 590;
    line-height: 32px;
    margin: 24px 0 0;
    scroll-margin-top: 89px;
}

.docs-article p,
.docs-article li {
    color: var(--docs-text-secondary);
    font-size: 15px;
    font-weight: 400;
    line-height: 24px;
}

.docs-article p {
    margin: 0 0 16px;
}

.docs-article h3 + p {
    margin-top: 6px;
    margin-bottom: 0;
}

.docs-article__lead {
    color: var(--docs-text-secondary);
    margin-top: 16px;
    margin-bottom: 32px;
}

.docs-article figure {
    margin: 32px 0 32px;
}

.docs-article img {
    border-radius: 8px;
    display: block;
    height: auto;
    max-width: 100%;
    width: 100%;
}

.docs-article blockquote {
    border-left: 1px solid var(--docs-divider);
    margin: 24px 0 32px;
    padding: 0 0 0 16px;
}

.docs-article blockquote p {
    color: var(--docs-text-muted);
    margin: 0;
}

.docs-article ul,
.docs-article ol {
    margin: 0 0 18px;
    padding-left: 24px;
}

.docs-article li {
    margin: 8px 0;
    padding-left: 2px;
}

.docs-article table {
    border-collapse: collapse;
    color: var(--docs-text-secondary);
    display: table;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    margin: 28px 0 32px;
    width: 100%;
}

.docs-article th {
    color: var(--docs-text);
    font-weight: 540;
    padding: 8px 24px 8px 0;
    text-align: left;
}

.docs-article td {
    border-top: 1px solid var(--docs-border);
    padding: 12px 24px 12px 0;
    vertical-align: top;
}

.docs-article kbd {
    background: var(--docs-bg);
    border: 0;
    border-radius: 5px;
    box-shadow: 0 0 0 1px var(--docs-divider);
    color: var(--docs-text-secondary);
    font: inherit;
    margin: 0 1px;
    padding: 3px 6px;
}

.docs-article__pager {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 64px;
}

.docs-article__pager-card {
    border: 1px solid var(--docs-border-strong);
    border-radius: 8px;
    display: grid;
    gap: 4px;
    min-height: 80px;
    padding: 16px;
    transition: background-color 140ms ease, border-color 140ms ease;
}

.docs-article__pager-card:hover {
    background: var(--docs-bg-hover);
    border-color: var(--docs-divider);
}

.docs-article__pager-card span {
    color: var(--docs-text-faint);
    font-size: 13px;
    line-height: 18px;
}

.docs-article__pager-card strong {
    color: var(--docs-text);
    font-size: 14px;
    font-weight: 520;
    line-height: 20px;
}

.docs-article__pager-card--next {
    text-align: right;
}

.docs-toc {
    flex: 0 0 250px;
    font-size: 13px;
    font-weight: 400;
    line-height: 19.5px;
    max-height: calc(100vh - 128px);
    overflow: hidden;
    padding-right: 8px;
    position: sticky;
    top: 104px;
}

.docs-toc__nav {
    border-left: 1px solid var(--docs-border-strong);
    display: grid;
    gap: 0;
    padding-left: 13px;
    position: relative;
}

.docs-toc__indicator {
    background: var(--docs-text);
    border-radius: 9999px;
    height: 19.5px;
    left: -1px;
    position: absolute;
    top: 0;
    transition: background-color 140ms ease;
    width: 1px;
}

.docs-site .docs-toc__link {
    border-radius: 0;
    color: var(--docs-text-muted);
    display: block;
    font-size: 13px;
    font-weight: 400;
    line-height: 19.5px;
    margin: 0 0 8px var(--docs-toc-indent, 0px);
    padding: 0;
    position: relative;
    transition: color 140ms ease;
    width: calc(100% - var(--docs-toc-indent, 0px));
}

.docs-site .docs-toc__link:hover,
.docs-site .docs-toc__link:focus-visible,
.docs-site .docs-toc__link--active {
    color: var(--docs-text);
}

.docs-site .docs-toc__link:hover {
    background: transparent;
}

.docs-site .docs-toc__link--nested {
    padding-left: 0;
}

.docs-search {
    align-items: flex-start;
    background: rgba(8, 9, 10, 0.88);
    display: flex;
    inset: 0;
    justify-content: center;
    padding-top: 109px;
    position: fixed;
    z-index: 700;
}

.docs-search__dialog {
    background: var(--docs-bg-elevated);
    border: 1px solid var(--docs-border-strong);
    border-radius: 12px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
    color: var(--docs-text-muted);
    display: block;
    min-height: 56px;
    overflow: hidden;
    position: relative;
    width: 560px;
}

.docs-search__dialog > .shell-icon {
    color: var(--docs-text-muted);
    left: 18px;
    position: absolute;
    top: 19px;
    z-index: 1;
}

.docs-search__input {
    background: transparent;
    border: 0;
    color: var(--docs-text);
    height: 56px;
    line-height: 56px;
    outline: none;
    padding: 0 18px 0 48px;
    width: 100%;
}

.docs-search__input::placeholder {
    color: var(--docs-text-faint);
}

.docs-search__results {
    border-top: 1px solid var(--docs-border-strong);
    display: grid;
    gap: 2px;
    padding: 6px;
}

.docs-search__result {
    border-radius: 8px;
    display: grid;
    gap: 2px;
    padding: 9px 10px;
}

.docs-search__result:hover {
    background: rgba(255, 255, 255, 0.07);
}

.docs-search__result span {
    color: var(--docs-text);
    font-size: 14px;
    line-height: 20px;
}

.docs-search__result small {
    color: var(--docs-text-muted);
    font-size: 12px;
    line-height: 16px;
}

.docs-search__result p {
    color: var(--docs-text-muted);
    font-size: 13px;
    line-height: 18px;
    margin: 0;
}

@media (max-width: 1240px) {
    .docs-site__article-layout {
        gap: 40px;
        margin-left: 24px;
    }
}

@media (max-width: 1120px) {
    .docs-site__article-layout {
        display: block;
        margin-left: 0;
        padding: 112px 24px 48px;
    }

    .docs-article {
        flex-basis: auto;
        max-width: none;
        width: 100%;
    }

    .docs-toc {
        display: none;
    }
}

@media (max-width: 768px) {
    .docs-sidebar {
        border-right: 0;
        height: 65px;
        right: 0;
        overflow: visible;
        width: 100%;
    }

    .docs-sidebar__header {
        flex-basis: 65px;
        height: 65px;
        padding: 0 8px 0 24px;
        width: auto;
    }

    .docs-sidebar__search-button--desktop,
    .docs-sidebar__desktop-content,
    .docs-site__header,
    .docs-toc {
        display: none;
    }

    .docs-sidebar__open-app--mobile {
        align-items: center;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 9999px;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.28);
        color: var(--docs-text);
        display: inline-flex;
        font-size: 14px;
        font-weight: 520;
        height: 32px;
        justify-content: center;
        line-height: 20px;
        margin-left: auto;
        padding: 0;
        width: 84px;
    }

    .docs-sidebar__menu-button {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 9999px;
        color: var(--docs-text);
        display: inline-flex;
        flex-direction: column;
        gap: 5px;
        height: 48px;
        justify-content: center;
        margin-left: 4px;
        padding: 0;
        transition: background-color 140ms ease;
        width: 48px;
    }

    .docs-sidebar__menu-button:hover {
        background: var(--docs-bg-hover);
    }

    .docs-sidebar__menu-button span {
        background: currentColor;
        border-radius: 9999px;
        height: 1.5px;
        transition: transform 180ms ease, opacity 180ms ease;
        width: 17px;
    }

    .docs-sidebar__menu-button[aria-expanded="true"] span:first-child {
        transform: translateY(3.25px) rotate(45deg);
    }

    .docs-sidebar__menu-button[aria-expanded="true"] span:last-child {
        transform: translateY(-3.25px) rotate(-45deg);
    }

    .docs-sidebar__mobile-content {
        background: var(--docs-bg);
        bottom: 0;
        display: flex;
        flex-direction: column;
        left: 0;
        min-height: 0;
        overflow: hidden;
        position: fixed;
        right: 0;
        top: 72px;
        z-index: 700;
    }

    .docs-sidebar__mobile-content .docs-sidebar__nav-scroll {
        padding: 8px 20px 12px;
    }

    .docs-sidebar__mobile-content .docs-sidebar__search-row {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--docs-border);
        border-radius: 9999px;
        display: flex;
        flex: 1 1 auto;
        margin: 0;
        width: auto;
    }

    .docs-sidebar__mobile-content .docs-sidebar__footer {
        border-top-color: var(--docs-border);
    }

    .docs-site__main {
        padding-left: 0;
    }

    .docs-site__article-layout {
        display: block;
        margin-left: 0;
        padding: 112px 24px 48px;
    }

    .docs-article {
        flex-basis: auto;
        max-width: none;
        width: 100%;
    }

    .docs-article h1 {
        font-size: 28px;
        line-height: 36px;
    }

    .docs-article [id],
    .docs-article h2,
    .docs-article h3 {
        scroll-margin-top: 236px;
    }

    .docs-article h2 {
        font-size: 20px;
        line-height: 26.6px;
    }

    .docs-article table {
        min-width: 360px;
    }

    .docs-article__pager {
        grid-template-columns: 1fr;
        margin-top: 48px;
    }

    .docs-search {
        padding-top: 101px;
    }

    .docs-search__dialog {
        width: calc(100vw - 40px);
    }
}

.layout-grid-item--hide-below-sm,
.layout-grid-item--hide-below-md,
.layout-grid-item--hide-below-lg {
    display: none;
}

@container (min-width: 640px) {
    .layout-grid-item {
        grid-column: var(--layout-grid-item-sm-column, var(--layout-grid-item-column, auto));
        order: var(--layout-grid-item-sm-order, var(--layout-grid-item-order, 0));
    }

    .layout-grid-item--hide-below-sm {
        display: block;
    }

    .layout-grid--equal-height > .layout-grid-item--hide-below-sm {
        display: block;
    }
}

@container (min-width: 900px) {
    .layout-grid-item {
        grid-column: var(--layout-grid-item-md-column, var(--layout-grid-item-sm-column, var(--layout-grid-item-column, auto)));
        order: var(--layout-grid-item-md-order, var(--layout-grid-item-sm-order, var(--layout-grid-item-order, 0)));
    }

    .layout-grid-item--hide-below-md {
        display: block;
    }

    .layout-grid--equal-height > .layout-grid-item--hide-below-md {
        display: block;
    }
}

@container (min-width: 1180px) {
    .layout-grid-item {
        grid-column: var(--layout-grid-item-lg-column, var(--layout-grid-item-md-column, var(--layout-grid-item-sm-column, var(--layout-grid-item-column, auto))));
        order: var(--layout-grid-item-lg-order, var(--layout-grid-item-md-order, var(--layout-grid-item-sm-order, var(--layout-grid-item-order, 0))));
    }

    .layout-grid-item--hide-below-lg {
        display: block;
    }

    .layout-grid--equal-height > .layout-grid-item--hide-below-lg {
        display: block;
    }

    .layout-grid-item--hide-above-lg {
        display: none;
    }
}

@container (min-width: 1440px) {
    .layout-grid-item {
        grid-column: var(--layout-grid-item-xl-column, var(--layout-grid-item-lg-column, var(--layout-grid-item-md-column, var(--layout-grid-item-sm-column, var(--layout-grid-item-column, auto)))));
        order: var(--layout-grid-item-xl-order, var(--layout-grid-item-lg-order, var(--layout-grid-item-md-order, var(--layout-grid-item-sm-order, var(--layout-grid-item-order, 0)))));
    }
}

:root {
    color-scheme: dark;
    --font-regular: "Inter Variable", "SF Pro Display", -apple-system, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", "Linear Thai", sans-serif;
    --font-mono: "Berkeley Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --shell-sidebar-width: 220px;
    --settings-sidebar-width: 244px;
    --shell-nav-row-width: 220px;
    --shell-surface-radius: 12px;
    --shell-shadow: lch(0 0 0 / 0.04) 0 4px 4px -1px, lch(0 0 0 / 0.08) 0 1px 1px 0;
    --shell-bg-sidebar: lch(1.82% 0 272 / 1);
    --shell-bg-scroll: transparent;
    --shell-bg-surface: lch(4.52% 0.3 272 / 1);
    --shell-bg-active: lch(9.02% 0.45 272 / 1);
    --shell-bg-button: lch(10.691% 0.493 272 / 1);
    --shell-bg-hover: lch(10.691% 0.493 272 / 1);
    --shell-nav-active-bg: var(--shell-bg-active);
    --shell-nav-hover-bg: var(--shell-bg-hover);
    --shell-nav-text: var(--shell-text-secondary);
    --shell-nav-hover-text: var(--shell-text-primary);
    --shell-nav-active-text: var(--shell-text-primary);
    --shell-menu-bg: lch(9.92% 0.75 272 / 1);
    --shell-border: lch(8.84% 1.38 272 / 1);
    --shell-text-primary: lch(100 0 272);
    --shell-text-secondary: lch(60.307% 1 272);
    --shell-text-tertiary: lch(90.077% 1 272);
    --shell-text-muted: lch(47% 0.9 272);
    --shell-sidebar-resize-guide: lch(34.507% 1 272 / 1);
    --shell-menu-text: lch(90.895% 1.375 272 / 1);
    --shell-menu-text-strong: lch(100 0 272 / 1);
    --shell-menu-text-danger: lch(65% 40 25 / 1);
    --shell-menu-hint: lch(63.582% 1.375 272 / 1);
    --shell-menu-indicator: lch(39.91% 1.375 272 / 1);
    --shell-menu-border: lch(22.88% 1.83 272 / 1);
    --shell-menu-divider: lch(22.88% 1.83 272 / 1);
    --shell-menu-item-hover: lch(15.32% 0.75 272 / 1);
    --assistant-border: lch(17.48% 1.38 272 / 1);
    --assistant-panel-shell-bg: lch(1.82% 0 272 / 1);
    --assistant-panel-content-bg: lch(7.67% 0.75 272 / 1);
    --assistant-panel-shadow: lch(0% 0 0 / 0.125) 0 3px 8px 0, lch(0% 0 0 / 0.125) 0 2px 5px 0, lch(0% 0 0 / 0.125) 0 1px 1px 0;
    --assistant-composer-bg: lch(9.599% 0.943 272 / 1);
    --assistant-composer-button-bg: lch(16.991% 1.393 272 / 1);
    --assistant-composer-border: var(--assistant-border);
    --assistant-composer-icon: lch(90.986% 1.6 272 / 1);
    --assistant-user-message-bg: lch(9.599% 0.943 272 / 1);
    --assistant-user-message-text: lch(90.668% 1.375 272 / 1);
    --assistant-user-message-shadow: lch(0% 0 0 / 0.04) 0 4px 4px -1px, lch(0% 0 0 / 0.08) 0 1px 1px 0;
    --shell-menu-shadow: lch(0 0 0 / 0.125) 0 3px 8px 0, lch(0 0 0 / 0.125) 0 2px 5px 0, lch(0 0 0 / 0.125) 0 1px 1px 0;
    --app-modal-overlay: rgba(0, 0, 0, 0.4);
    --app-modal-overlay-opacity: 0.95;
    --app-modal-shadow: lch(0 0 0 / 0.1) 0 4px 40px 0, lch(0 0 0 / 0.125) 0 3px 20px 0, lch(0 0 0 / 0.125) 0 3px 12px 0, lch(0 0 0 / 0.125) 0 2px 8px 0, lch(0 0 0 / 0.125) 0 1px 1px 0;
    --app-modal-animation: 220ms cubic-bezier(0.43, 0.07, 0.59, 0.94);
    --app-modal-resize-duration: 300ms;
    --app-modal-resize-ease: cubic-bezier(0.43, 0.07, 0.59, 0.94);
    --shell-avatar-green: lch(70% 60 140);
    --shell-placeholder: lch(12% 0.9 272 / 0.92);
    --shell-placeholder-soft: lch(14% 0.85 272 / 0.95);
    --shell-placeholder-line: color-mix(in srgb, var(--shell-border) 72%, transparent);
    --sectioned-panel-list-header-bg: lch(7.67% 0.75 272 / 1);
    --sectioned-panel-list-header-color: var(--shell-text-secondary);
    --ui-form-range-tooltip-bg: var(--shell-menu-bg);
    --ui-form-range-tooltip-border: var(--shell-menu-border);
    --ui-form-range-tooltip-text: var(--shell-menu-text);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

html {
    background: var(--shell-bg-sidebar);
}

body {
    overflow: hidden;
    font-family: var(--font-regular, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    font-weight: 450;
    font-synthesis: none;
    line-height: 1.5;
    color: var(--shell-text-primary);
    background: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body.shell-sidebar-resizing,
body.shell-sidebar-resizing *,
body.grid-sidebar-resizing,
body.grid-sidebar-resizing *,
body.page-side-panel-resizing,
body.page-side-panel-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    border: 0;
    background: transparent;
    color: inherit;
}

h1:focus {
    outline: none;
}

.app-shell[data-app-theme="light"],
.settings-shell[data-app-theme="light"] {
    color-scheme: light;
    --shell-shadow: lch(0 0 0 / 0.03) 0 4px 4px -1px, lch(0 0 0 / 0.06) 0 1px 1px 0;
    --shell-bg-sidebar: lch(96.8% 0.4 272 / 1);
    --shell-bg-scroll: transparent;
    --shell-bg-surface: lch(99% 0.2 272 / 1);
    --shell-bg-active: lch(91.04% 0.5 282 / 1);
    --shell-bg-button: lch(94.5% 0.45 272 / 1);
    --shell-bg-hover: lch(93% 0.5 272 / 1);
    --shell-nav-active-bg: lch(91.04% 0.5 282 / 1);
    --shell-nav-hover-bg: lch(93.14% 0.5 282 / 1);
    --shell-nav-text: lch(38.376% 1.25 282 / 1);
    --shell-nav-hover-text: lch(9.594% 0 282 / 1);
    --shell-nav-active-text: lch(9.594% 0 282 / 1);
    --shell-menu-bg: lch(99% 0.2 272 / 1);
    --shell-border: lch(86% 1.2 272 / 1);
    --shell-text-primary: lch(14% 0.8 272);
    --shell-text-secondary: lch(42% 1 272);
    --shell-text-tertiary: lch(27% 1 272);
    --shell-text-muted: lch(56% 1 272);
    --shell-sidebar-resize-guide: lch(72% 1 272 / 1);
    --shell-menu-text: lch(23% 1.1 272 / 1);
    --shell-menu-text-strong: lch(12% 1 272 / 1);
    --shell-menu-text-danger: lch(50% 45 25 / 1);
    --shell-menu-hint: lch(54% 1.1 272 / 1);
    --shell-menu-indicator: lch(62% 1.1 272 / 1);
    --shell-menu-border: lch(87% 1.5 272 / 1);
    --shell-menu-divider: lch(87% 1.5 272 / 1);
    --shell-menu-item-hover: lch(94% 0.65 272 / 1);
    --assistant-border: lch(86.5% 0 282 / 1);
    --assistant-panel-shell-bg: lch(95.94% 0.5 282 / 1);
    --assistant-panel-content-bg: lch(100% 0 282 / 1);
    --assistant-panel-shadow: lch(0% 0 0 / 0.02) 0 6px 18px 0, lch(0% 0 0 / 0.04) 0 3px 9px 0, lch(0% 0 0 / 0.04) 0 1px 1px 0;
    --assistant-composer-bg: lch(100% 0 282 / 1);
    --assistant-composer-button-bg: lch(100% 0 282 / 1);
    --assistant-composer-border: var(--assistant-border);
    --assistant-composer-icon: var(--shell-text-tertiary);
    --assistant-user-message-bg: lch(98.94% 0.5 282 / 1);
    --assistant-user-message-text: lch(27% 1 272);
    --assistant-user-message-shadow: 0 0 0 0 transparent;
    --shell-tab-active-bg: lch(91.04% 0.5 282 / 1);
    --shell-tab-active-ring: lch(87% 1.5 272 / 1);
    --button-tab-active-bg: lch(91.04% 0.5 282 / 1);
    --button-tab-active-color: lch(14% 0.8 272);
    --button-tab-active-border: lch(87% 1.5 272 / 1);
    --button-tab-bg: lch(94.5% 0.45 272 / 1);
    --button-tab-color: lch(42% 1 272);
    --button-tab-border: lch(87% 1.5 272 / 1);
    --button-tab-shadow: 0 0 0 0 rgb(0 0 0 / 0);
    --button-tab-hover-bg: lch(94% 0.65 272 / 1);
    --button-tab-hover-color: lch(14% 0.8 272);
    --button-tab-hover-border: lch(87% 1.5 272 / 1);
    --shell-menu-shadow: lch(0 0 0 / 0.08) 0 3px 8px 0, lch(0 0 0 / 0.08) 0 2px 5px 0, lch(0 0 0 / 0.08) 0 1px 1px 0;
    --app-modal-overlay: rgba(255, 255, 255, 0.55);
    --sectioned-panel-list-header-bg: lch(95.94% 0.5 282 / 1);
    --sectioned-panel-list-header-color: lch(38.376% 1.25 282 / 1);
    --ui-form-range-tooltip-bg: var(--shell-menu-bg);
    --ui-form-range-tooltip-border: var(--shell-menu-border);
    --ui-form-range-tooltip-text: var(--shell-menu-text);
}

@media (prefers-color-scheme: light) {
    .app-shell[data-app-theme="system"],
    .settings-shell[data-app-theme="system"] {
        color-scheme: light;
        --shell-shadow: lch(0 0 0 / 0.03) 0 4px 4px -1px, lch(0 0 0 / 0.06) 0 1px 1px 0;
        --shell-bg-sidebar: lch(96.8% 0.4 272 / 1);
        --shell-bg-scroll: transparent;
        --shell-bg-surface: lch(99% 0.2 272 / 1);
        --shell-bg-active: lch(91.04% 0.5 282 / 1);
        --shell-bg-button: lch(94.5% 0.45 272 / 1);
        --shell-bg-hover: lch(93% 0.5 272 / 1);
        --shell-nav-active-bg: lch(91.04% 0.5 282 / 1);
        --shell-nav-hover-bg: lch(93.14% 0.5 282 / 1);
        --shell-nav-text: lch(38.376% 1.25 282 / 1);
        --shell-nav-hover-text: lch(9.594% 0 282 / 1);
        --shell-nav-active-text: lch(9.594% 0 282 / 1);
        --shell-menu-bg: lch(99% 0.2 272 / 1);
        --shell-border: lch(86% 1.2 272 / 1);
        --shell-text-primary: lch(14% 0.8 272);
        --shell-text-secondary: lch(42% 1 272);
        --shell-text-tertiary: lch(27% 1 272);
        --shell-text-muted: lch(56% 1 272);
        --shell-sidebar-resize-guide: lch(72% 1 272 / 1);
        --shell-menu-text: lch(23% 1.1 272 / 1);
        --shell-menu-text-strong: lch(12% 1 272 / 1);
        --shell-menu-text-danger: lch(50% 45 25 / 1);
        --shell-menu-hint: lch(54% 1.1 272 / 1);
        --shell-menu-indicator: lch(62% 1.1 272 / 1);
        --shell-menu-border: lch(87% 1.5 272 / 1);
        --shell-menu-divider: lch(87% 1.5 272 / 1);
        --shell-menu-item-hover: lch(94% 0.65 272 / 1);
        --assistant-border: lch(86.5% 0 282 / 1);
        --assistant-panel-shell-bg: lch(95.94% 0.5 282 / 1);
        --assistant-panel-content-bg: lch(100% 0 282 / 1);
        --assistant-panel-shadow: lch(0% 0 0 / 0.02) 0 6px 18px 0, lch(0% 0 0 / 0.04) 0 3px 9px 0, lch(0% 0 0 / 0.04) 0 1px 1px 0;
        --assistant-composer-bg: lch(100% 0 282 / 1);
        --assistant-composer-button-bg: lch(100% 0 282 / 1);
        --assistant-composer-border: var(--assistant-border);
        --assistant-composer-icon: var(--shell-text-tertiary);
        --assistant-user-message-bg: lch(98.94% 0.5 282 / 1);
        --assistant-user-message-text: lch(27% 1 272);
        --assistant-user-message-shadow: 0 0 0 0 transparent;
        --shell-tab-active-bg: lch(91.04% 0.5 282 / 1);
        --shell-tab-active-ring: lch(87% 1.5 272 / 1);
        --button-tab-active-bg: lch(91.04% 0.5 282 / 1);
        --button-tab-active-color: lch(14% 0.8 272);
        --button-tab-active-border: lch(87% 1.5 272 / 1);
        --button-tab-bg: lch(94.5% 0.45 272 / 1);
        --button-tab-color: lch(42% 1 272);
        --button-tab-border: lch(87% 1.5 272 / 1);
        --button-tab-shadow: 0 0 0 0 rgb(0 0 0 / 0);
        --button-tab-hover-bg: lch(94% 0.65 272 / 1);
        --button-tab-hover-color: lch(14% 0.8 272);
        --button-tab-hover-border: lch(87% 1.5 272 / 1);
        --shell-menu-shadow: lch(0 0 0 / 0.08) 0 3px 8px 0, lch(0 0 0 / 0.08) 0 2px 5px 0, lch(0 0 0 / 0.08) 0 1px 1px 0;
        --app-modal-overlay: rgba(255, 255, 255, 0.55);
        --sectioned-panel-list-header-bg: lch(95.94% 0.5 282 / 1);
        --sectioned-panel-list-header-color: lch(38.376% 1.25 282 / 1);
        --ui-form-range-tooltip-bg: var(--shell-menu-bg);
        --ui-form-range-tooltip-border: var(--shell-menu-border);
        --ui-form-range-tooltip-text: var(--shell-menu-text);
    }
}

.app-shell[data-app-theme="custom"],
.settings-shell[data-app-theme="custom"] {
    --shell-bg-sidebar: lch(4.5% 4 292 / 1);
    --shell-bg-surface: lch(7% 4 292 / 1);
    --shell-bg-active: lch(14% 8 292 / 1);
    --shell-bg-button: lch(14% 8 292 / 1);
    --shell-bg-hover: lch(16% 9 292 / 1);
    --shell-menu-bg: lch(11% 6 292 / 1);
    --shell-border: lch(17% 6 292 / 1);
    --shell-menu-border: lch(27% 8 292 / 1);
    --shell-menu-divider: lch(27% 8 292 / 1);
    --shell-menu-item-hover: lch(18% 8 292 / 1);
    --assistant-border: var(--shell-border);
    --assistant-panel-shell-bg: var(--shell-bg-sidebar);
    --assistant-panel-content-bg: var(--shell-bg-active);
    --assistant-panel-shadow: lch(0% 0 0 / 0.125) 0 3px 8px 0, lch(0% 0 0 / 0.125) 0 2px 5px 0, lch(0% 0 0 / 0.125) 0 1px 1px 0;
    --assistant-composer-bg: color-mix(in lch, var(--shell-bg-active) 68.75%, var(--shell-bg-button) 31.25%);
    --assistant-composer-button-bg: color-mix(in lch, var(--shell-bg-button) 14%, var(--assistant-border) 86%);
    --assistant-composer-border: var(--assistant-border);
    --assistant-composer-icon: var(--shell-text-tertiary);
    --assistant-user-message-bg: var(--assistant-composer-bg);
    --assistant-user-message-text: var(--shell-text-tertiary);
    --assistant-user-message-shadow: lch(0% 0 0 / 0.04) 0 4px 4px -1px, lch(0% 0 0 / 0.08) 0 1px 1px 0;
}

.app-shell,
.settings-shell {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    background: var(--shell-bg-sidebar);
    color: var(--shell-text-primary);
}

.app-shell__main-column,
.settings-shell__main-column {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 100vh;
    min-width: 0;
    overflow: hidden;
}

.app-shell__main-column {
    margin-left: var(--shell-sidebar-width);
}

.settings-shell__main-column {
    margin-left: var(--settings-sidebar-width);
}

.shell-sidebar-overlay__backdrop {
    display: none;
}


@media (width <= 1024px) {
    .app-shell__main-column,
    .settings-shell__main-column {
        margin-left: 0;
    }

    .shell-sidebar {
        z-index: 760;
        width: min(var(--shell-sidebar-width), calc(100vw - 40px), 330px);
        max-width: min(calc(100vw - 40px), 330px);
        background: var(--shell-bg-sidebar);
        opacity: 0;
        transform: translateX(-100%);
        transition:
            transform 350ms cubic-bezier(0.32, 0.72, 0, 1),
            opacity 50ms ease-in-out;
        will-change: transform;
    }

    .shell-sidebar--workspace {
        --shell-nav-row-width: calc(min(var(--shell-sidebar-width), calc(100vw - 40px), 330px) - 24px);
    }

    .shell-sidebar--settings {
        width: min(var(--settings-sidebar-width), calc(100vw - 40px), 330px);
        --shell-nav-row-width: calc(min(var(--settings-sidebar-width), calc(100vw - 40px), 330px) - 24px);
    }

    .app-shell--sidebar-overlay-open .shell-sidebar,
    .settings-shell--sidebar-overlay-open .shell-sidebar {
        opacity: 1;
        transform: translateX(0);
    }

    .shell-sidebar__resize-handle {
        display: none;
    }

    .shell-sidebar-overlay__backdrop {
        position: fixed;
        inset: 0;
        z-index: 740;
        display: block;
        border: 0;
        background: color-mix(in srgb, var(--shell-bg-sidebar) 62%, transparent);
        opacity: 0;
        pointer-events: none;
        transition: opacity 150ms ease-in-out;
    }

    .app-shell--sidebar-overlay-open .shell-sidebar-overlay__backdrop,
    .settings-shell--sidebar-overlay-open .shell-sidebar-overlay__backdrop {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shell-sidebar,
    .shell-sidebar-overlay__backdrop {
        transition: none;
    }
}


.settings-sidebar__back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    margin-left: 4px;
    padding: 0 12px 0 6px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
    transition-property: border, background-color, color, opacity;
    transition-duration: 120ms;
}

.settings-sidebar__back-link:hover,
.settings-sidebar__back-link:focus-visible {
    background-color: var(--shell-bg-hover, lch(10.691% 0.493 272 / 1));
    color: var(--shell-text-primary);
}

.settings-sidebar__back-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    flex: 0 0 auto;
}

.settings-sidebar__back-link-label {
    display: inline-flex;
    align-items: center;
}

.page-stub__body::-webkit-scrollbar {
    width: 8px;
}

.page-stub__body::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--shell-border) 65%, transparent);
    border-radius: 999px;
}

.app-shell__surface {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    margin: 8px 8px 8px 0;
    overflow: hidden;
    border: 0.5px solid var(--shell-border);
    border-radius: var(--shell-surface-radius);
    background: var(--shell-bg-surface);
    box-shadow: var(--shell-shadow);
}

.app-shell__surface--settings {
    margin-left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.app-shell__surface--settings::-webkit-scrollbar {
    display: none;
}

.app-shell__surface--test-scroll {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.app-shell__surface--test-scroll::-webkit-scrollbar {
    display: none;
}

.app-shell__surface-wrap {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    transform-origin: center top;
    transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.app-shell__surface-wrap--assistant-maximized {
    transform: scale(0.98);
}

html:has(.auth-shell),
body:has(.auth-shell) {
    margin: 0;
    background: #090909;
}

.auth-shell {
    --auth-bg: #090909;
    --auth-text: #f4f4f5;
    --auth-muted: #8c8c90;
    --auth-button-bg: #1f1f20;
    --auth-button-hover-bg: #28282a;
    --auth-button-primary-bg: #626bdc;
    --auth-button-primary-hover-bg: #7179e2;
    --auth-border: #2b2c2f;
    --auth-input-bg: #111112;
    display: grid;
    box-sizing: border-box;
    min-height: 100vh;
    padding: 24px;
    overflow: hidden;
    place-items: center;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.018), transparent 290px),
        var(--auth-bg);
    color: var(--auth-text);
    font-family: var(--font-regular);
}

.auth-panel {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 288px;
    max-width: calc(100vw - 48px);
    margin-top: -20px;
    color: var(--auth-text);
    text-align: center;
}

.auth-panel--wide {
    width: 340px;
}

.auth-logo {
    display: grid;
    width: 48px;
    height: 48px;
    margin-bottom: 30px;
    place-items: center;
    color: #f0f0f0;
}

.auth-logo svg {
    display: block;
}

.auth-panel__copy {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 22px;
    width: 100%;
}

.auth-panel h1 {
    margin: 0;
    color: var(--auth-text);
    font-size: 19px;
    font-weight: 450;
    letter-spacing: 0;
    line-height: 1.5rem;
}

.auth-panel__description {
    width: 100%;
    max-width: 250px;
    margin: -1px auto 14px;
    color: var(--auth-muted);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
}

.auth-panel__description strong {
    color: var(--auth-text);
    font-weight: 450;
}

.auth-actions,
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    margin-top: 24px;
}

.auth-form {
    gap: 16px;
}

.auth-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 9999px;
    background: var(--auth-button-bg);
    color: var(--auth-text);
    cursor: var(--pointer, pointer);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 450;
    line-height: 1.125rem;
    text-decoration: none;
    transition:
        background 120ms ease,
        color 120ms ease,
        opacity 120ms ease;
}

.auth-button:hover,
.auth-button:focus-visible {
    background: var(--auth-button-hover-bg);
    color: #fff;
    outline: none;
}

.auth-button--primary {
    background: var(--auth-button-primary-bg);
    color: #fff;
}

.auth-button--primary:hover,
.auth-button--primary:focus-visible {
    background: var(--auth-button-primary-hover-bg);
}

.auth-button[disabled],
.auth-button[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
}

.auth-input {
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding: 0 13px;
    border: 1px solid var(--auth-border);
    border-radius: 8px;
    background: var(--auth-input-bg);
    color: var(--auth-text);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
    outline: none;
    transition:
        border-color 120ms ease,
        box-shadow 120ms ease;
}

.auth-input::placeholder {
    color: #65666a;
}

.auth-input:focus {
    border-color: #363941;
    box-shadow: 0 0 0 2px rgba(88, 91, 98, 0.34);
}

.auth-form__error {
    margin: -4px 0 0;
    color: #f87171;
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.125rem;
    text-align: left;
}

.auth-form__help {
    margin: -2px 0 0;
    color: var(--auth-muted);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
    text-align: center;
}

.auth-input--code {
    font-family: var(--font-mono, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace);
    font-size: 1rem;
    letter-spacing: 0.09em;
    text-align: center;
}

.auth-consent-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0;
    color: var(--auth-text);
    list-style: none;
    text-align: left;
}

.auth-consent-item {
    box-sizing: border-box;
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--auth-border);
    border-radius: 8px;
    background: var(--auth-input-bg);
    color: var(--auth-text);
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.auth-panel__footer,
.auth-link-row,
.auth-legal {
    color: var(--auth-muted);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
}

.auth-panel__footer {
    margin-top: 30px;
}

.auth-link-row {
    margin-top: 18px;
}

.auth-link-row--compact {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}

.auth-legal {
    max-width: 260px;
    margin: 38px auto 0;
}

.auth-link {
    border: 0;
    background: transparent;
    color: var(--auth-text);
    cursor: var(--pointer, pointer);
    font: inherit;
    text-decoration: none;
}

.auth-link-button {
    padding: 0;
}

.auth-link:hover,
.auth-link:focus-visible {
    color: #fff;
    outline: none;
}

.auth-spinner {
    display: block;
    width: 20px;
    height: 20px;
    margin-top: 34px;
    border: 2px solid rgba(255, 255, 255, 0.16);
    border-top-color: rgba(255, 255, 255, 0.76);
    border-radius: 50%;
    animation: auth-spin 800ms linear infinite;
}

@keyframes auth-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 520px) {
    .auth-shell {
        padding: 20px;
    }

    .auth-panel {
        width: min(288px, 100%);
        margin-top: -8px;
    }
}

.ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0.5px solid transparent;
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
    font-family: inherit;
    letter-spacing: 0;
    white-space: nowrap;
    cursor: var(--pointer, pointer);
    transition:
        background-color 120ms ease-out,
        border-color 120ms ease-out,
        color 120ms ease-out,
        box-shadow 120ms ease-out;
}

.ui-button--default,
.ui-button--pill {
    height: 28px;
    padding: 0 10px 0 6px;
    border-color: transparent;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-menu-text, lch(90.668% 1.375 272 / 1));
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: normal;
}

.ui-button--control {
    height: 32px;
    padding: 0 12px;
    border-color: transparent;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-menu-text, lch(90.668% 1.375 272 / 1));
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: normal;
}

.ui-button--ghost {
    height: 32px;
    padding: 0 12px;
    border-color: transparent;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-menu-text, lch(90.668% 1.375 272 / 1));
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: normal;
}

.ui-button--small {
    height: 24px;
    padding: 0 8px;
    font-size: 0.75rem;
}

.ui-button--primary {
    color: var(--shell-menu-text-strong, lch(100% 0 272 / 1));
}

.ui-button--primary.ui-button--control {
    border-color: transparent;
    background: lch(47.918% 59.303 288.421 / 1);
    color: lch(100% 5 288.421 / 1);
}

.ui-button--danger {
    color: var(--shell-menu-text-danger, lch(65% 40 25 / 1));
}

.ui-button:hover,
.ui-button:focus-visible {
    background: var(--settings-control-hover-bg, var(--shell-menu-item-hover, lch(15.32% 0.75 272 / 1)));
    color: var(--settings-control-hover-text, var(--shell-menu-text-strong, lch(100% 0 272 / 1)));
    outline: none;
}

.ui-button--control:hover,
.ui-button--control:focus-visible {
    border-color: transparent;
}

.ui-button--primary.ui-button--control:hover,
.ui-button--primary.ui-button--control:focus-visible {
    background: lch(52.5% 61 288.421 / 1);
    color: lch(100% 5 288.421 / 1);
}

.ui-button--danger:hover,
.ui-button--danger:focus-visible {
    background: color-mix(in srgb, var(--shell-menu-text-danger, lch(65% 40 25 / 1)) 16%, var(--settings-control-hover-bg, var(--shell-menu-item-hover, lch(15.32% 0.75 272 / 1))));
    color: var(--shell-menu-text-danger, lch(65% 40 25 / 1));
}

.ui-button--disabled,
.ui-button:disabled {
    opacity: 0.54;
    pointer-events: none;
}

.ui-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0 2px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-menu-text, lch(90.35% 1.15 272 / 1));
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    cursor: var(--pointer, pointer);
    transition:
        background-color 120ms ease-out,
        border-color 120ms ease-out,
        color 120ms ease-out,
        box-shadow 120ms ease-out,
        opacity 120ms ease-out;
}

.ui-icon-button--small {
    width: 24px;
    height: 24px;
}

.ui-icon-button--large {
    width: 32px;
    height: 32px;
}

.ui-icon-button--raised {
    background: var(--shell-bg-button, lch(10.691% 0.493 272 / 1));
    box-shadow: var(--shell-shadow, lch(0 0 0 / 0.04) 0 4px 4px -1px, lch(0 0 0 / 0.08) 0 1px 1px 0);
}

.ui-icon-button--muted {
    color: var(--shell-menu-hint, lch(60.307% 1 272 / 1));
}

.ui-icon-button:hover,
.ui-icon-button:focus-visible {
    background: var(--shell-menu-item-hover, lch(15.32% 0.75 272 / 1));
    color: var(--shell-menu-text-strong, lch(100% 0 272 / 1));
    outline: none;
}

.ui-icon-button--raised:hover,
.ui-icon-button--raised:focus-visible {
    background: var(--shell-bg-button, lch(10.691% 0.493 272 / 1));
}

.ui-icon-button--disabled,
.ui-icon-button:disabled {
    opacity: 0.54;
    pointer-events: none;
}

.ui-icon-button-group {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: transparent;
    color: var(--page-title-bar-action-color, var(--shell-menu-text, lch(90.35% 1.15 272 / 1)));
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
    user-select: none;
    transition:
        background-color 120ms ease-out,
        border-color 120ms ease-out,
        color 120ms ease-out,
        opacity 120ms ease-out;
}

.ui-icon-button-group .ui-icon-button {
    position: relative;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
}

.ui-icon-button-group .ui-icon-button.ui-icon-button {
    color: inherit;
}

.ui-icon-button-group .ui-icon-button:first-child {
    margin-right: 1px;
    border-radius: 9999px 0 0 9999px;
}

.ui-icon-button-group .ui-icon-button:last-child {
    border-radius: 0 9999px 9999px 0;
}

.ui-icon-button-group .ui-icon-button:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: -0.5px;
    width: 0.5px;
    background: var(--ui-icon-button-group-divider, var(--shell-menu-divider, lch(22.88% 1.83 272 / 1)));
}

.ui-icon-button-group:hover {
    background: var(--ui-icon-button-group-hover-bg, var(--shell-menu-item-hover, lch(15.32% 0.75 272 / 1)));
}

.ui-icon-button-group:hover .ui-icon-button:not(:first-child)::before,
.ui-icon-button-group:focus-within .ui-icon-button:not(:first-child)::before {
    display: none;
}

.ui-icon-button-group .ui-icon-button.ui-icon-button:hover,
.ui-icon-button-group .ui-icon-button.ui-icon-button:focus-visible {
    background: var(--ui-icon-button-group-button-hover-bg, var(--shell-bg-button, lch(10.691% 0.493 272 / 1)));
    box-shadow: none;
}

.ui-icon-button-group .ui-icon-button.ui-icon-button .shell-icon {
    color: var(--ui-icon-button-group-icon-color, var(--shell-menu-hint, lch(63.582% 1.375 272 / 1)));
}

.ui-icon-button-group .ui-icon-button.ui-icon-button:hover .shell-icon,
.ui-icon-button-group .ui-icon-button.ui-icon-button:focus-visible .shell-icon {
    color: var(--ui-icon-button-group-icon-hover-color, var(--shell-text-primary, lch(100% 0 272 / 1)));
}

.ui-icon-button-group .ui-icon-button--disabled,
.ui-icon-button-group .ui-icon-button:disabled {
    opacity: 0.6;
}

.ui-icon-button--icon-item-navigation-next .shell-icon {
    margin-left: 2px;
}

.ui-icon-button--icon-item-navigation-previous .shell-icon {
    margin-right: 2px;
}

.shell-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--shell-icon-size, 14px);
    height: var(--shell-icon-size, 14px);
    color: currentColor;
}

.shell-icon svg,
.shell-icon i {
    display: block;
    width: 100%;
    height: 100%;
}

.shell-icon i {
    font-size: var(--shell-icon-size, 14px);
    line-height: var(--shell-icon-size, 14px);
    text-align: center;
}

.shell-icon__sidebar-pane {
    transition-property: x, width;
    transition-duration: 250ms;
}

.ui-icon-button--icon-sidebar-toggle .shell-icon {
    color: lch(61.399% 1.15 272 / 1);
}

.ui-icon-button--icon-sidebar-toggle:hover .shell-icon,
.ui-icon-button--icon-sidebar-toggle:focus-visible .shell-icon {
    color: lch(90.35% 1.15 272 / 1);
}

.ui-icon-button[aria-expanded="true"] .shell-icon__sidebar-pane,
.ui-icon-button[aria-expanded]:not([aria-expanded="false"]) .shell-icon__sidebar-pane {
    x: 7px;
    width: 4.5px;
}

.shell-icon-button {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0 2px;
    border-radius: 9999px;
    color: var(--shell-text-secondary);
    cursor: default;
    transition: background-color 120ms ease, color 120ms ease;
}

.shell-icon-button--primary {
    background: var(--shell-bg-button);
    box-shadow: var(--shell-shadow);
    color: var(--shell-text-primary);
}

.shell-icon-button:hover {
    background: var(--shell-icon-hover-bg, var(--shell-bg-active));
    color: var(--shell-text-primary);
}

.shell-icon-button--primary:hover {
    background: var(--shell-icon-primary-hover-bg, var(--shell-bg-button));
    color: var(--shell-text-primary);
}

.ui-form__body {
    display: flex;
    flex-direction: column;
    padding: 0 24px 24px;
}

.ui-form__body--field-section {
    padding: 0;
    border: 0.5px solid var(--settings-card-border, lch(14.15% 1.83 272));
    border-radius: 11px;
    background: var(--settings-card-bg, lch(7.67% 0.75 272));
}

.ui-form__body--field-section .ui-form__row {
    position: relative;
    min-height: 65px;
    padding: 16px;
    border-top: 0;
}

.ui-form__body--field-section > .settings-form-option-row {
    position: relative;
    min-height: 65px;
    padding: 16px;
}

.ui-form__body--field-section .ui-form__row::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: -0.5px;
    left: 16px;
    height: 0.5px;
    background: var(--settings-row-divider, lch(14.15% 1.83 272));
}

.ui-form__body--field-section > .settings-form-option-row::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: -0.5px;
    left: 16px;
    height: 0.5px;
    background: var(--settings-row-divider, lch(14.15% 1.83 272));
}

.ui-form__body--field-section .ui-form__row:last-child::after {
    display: none;
}

.ui-form__body--field-section > .settings-form-option-row:last-child::after {
    display: none;
}

.ui-form__row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(280px, 360px);
    gap: 24px;
    align-items: center;
    min-height: 64px;
    padding: 14px 0;
    border-top: 0.5px solid var(--shell-border);
}

.ui-form__row > .ui-form__avatar-field {
    justify-self: end;
}

.ui-form__row--control-auto,
.ui-form__row--control-compact,
.ui-form__row--control-medium,
.ui-form__row--control-wide {
    grid-template-columns: minmax(180px, 1fr) var(--ui-form-row-control-width, auto);
}

.ui-form__row--control-compact {
    --ui-form-row-control-width: minmax(0, 180px);
}

.ui-form__row--control-medium {
    --ui-form-row-control-width: minmax(0, 256px);
}

.ui-form__row--control-wide {
    --ui-form-row-control-width: minmax(0, 340px);
}

.ui-form__row--control-full {
    grid-template-columns: minmax(180px, 1fr) minmax(280px, 360px);
}

.ui-form__row--control-auto > :not(.ui-form__label):not(.ui-form__error),
.ui-form__row--control-compact > :not(.ui-form__label):not(.ui-form__error),
.ui-form__row--control-medium > :not(.ui-form__label):not(.ui-form__error),
.ui-form__row--control-wide > :not(.ui-form__label):not(.ui-form__error),
.ui-form__row--control-full > :not(.ui-form__label):not(.ui-form__error) {
    justify-self: end;
    min-width: 0;
    max-width: 100%;
}

.ui-form__row--control-auto > :not(.ui-form__label):not(.ui-form__error) {
    width: auto;
}

.ui-form__row--control-compact > :not(.ui-form__label):not(.ui-form__error),
.ui-form__row--control-medium > :not(.ui-form__label):not(.ui-form__error),
.ui-form__row--control-wide > :not(.ui-form__label):not(.ui-form__error),
.ui-form__row--control-full > :not(.ui-form__label):not(.ui-form__error) {
    width: 100%;
}

.ui-form__row--invalid {
    grid-template-rows: auto auto;
    align-items: start;
}

.ui-form__row--stacked {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border-top: 0;
}

.ui-form__row--stacked.ui-form__row--invalid {
    align-items: stretch;
}

.ui-form__row--stacked > .ui-form__avatar-field {
    justify-self: start;
}

.ui-form__row--stacked .ui-form__label {
    gap: 2px;
}

.ui-form__row--stacked .ui-form__error {
    grid-column: auto;
    margin: -2px 0 0;
}

.ui-form__label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.125rem;
}

.ui-form__label span:last-child {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.0625rem;
}

.ui-form__error {
    grid-column: 2;
    margin: -16px 0 0;
    color: var(--status-red-text, rgb(239, 92, 92));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.0625rem;
}

.ui-form__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.ui-form__field--wide {
    grid-column: 1 / -1;
}

.ui-form__field-label {
    color: var(--shell-text-primary);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}

.ui-form__field-description,
.ui-form__field-error {
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
}

.ui-form__field-description {
    color: var(--shell-text-secondary);
}

.ui-form__field-error {
    color: var(--status-red-text, rgb(239, 92, 92));
}

.editable-title-field {
    box-sizing: border-box;
    display: block;
    width: 100%;
    min-width: 0;
    height: 32px;
    padding: 0 14px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--shell-text-primary);
    font: inherit;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 2rem;
    letter-spacing: 0;
}

.editable-title-field::placeholder {
    color: var(--shell-text-tertiary, var(--shell-text-secondary));
}

.editable-title-field:focus {
    outline: 0;
}

.editable-title-field--disabled {
    cursor: not-allowed;
    opacity: 0.54;
}

.editable-title-field--readonly {
    cursor: default;
}

.key-value-entry-table {
    display: flex;
    min-width: 0;
    width: 100%;
    flex-direction: column;
    gap: 8px;
}

.key-value-entry-table--disabled {
    opacity: 0.54;
}

.key-value-entry-table__header,
.key-value-entry-table__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.key-value-entry-table__header {
    min-height: 18px;
}

.key-value-entry-table__heading {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
}

.key-value-entry-table__heading--actions {
    width: 32px;
}

.key-value-entry-table__rows {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
}

.key-value-entry-table__row .ui-form__control-shell {
    min-width: 0;
}

.key-value-entry-table__row .ui-form__control {
    height: 32px;
}

.key-value-entry-table__footer {
    display: flex;
    justify-content: flex-start;
    margin-top: 2px;
}

.key-value-entry-table__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 640px) {
    .key-value-entry-table__header {
        display: none;
    }

    .key-value-entry-table__row {
        grid-template-columns: minmax(0, 1fr) 32px;
    }

    .key-value-entry-table__row .ui-form__control-shell:first-child {
        grid-column: 1 / -1;
    }
}

.ui-form__control,
.ui-form__picker-trigger,
.ui-form__range-trigger,
.ui-form__duration-trigger,
.ui-form__interval-trigger,
.ui-form__timezone-trigger,
.ui-form__country-trigger,
.ui-form__time-trigger,
.ui-form__color-trigger,
.ui-form__phone-control,
.ui-form__email-trigger,
.ui-form__multi-trigger {
    box-sizing: border-box;
    width: 100%;
    height: 32px;
    border: 0.5px solid var(--settings-input-border, var(--settings-control-border));
    border-radius: 8px;
    background: var(--settings-control-bg);
    color: var(--settings-control-text, var(--shell-text-primary));
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: normal;
    outline: none;
    transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}

.ui-form__control,
.ui-form__phone-control,
.ui-form__email-trigger {
    border-color: var(--settings-input-border, var(--settings-control-border));
    background: var(--settings-input-bg, var(--settings-control-bg));
    color: var(--settings-input-text, var(--shell-text-primary));
}

.ui-form__control {
    padding: 6px 12px;
}

.ui-form__control::placeholder,
.ui-form__textarea::placeholder {
    color: var(--settings-input-placeholder, var(--shell-text-secondary));
}

.ui-form__textarea {
    display: block;
    min-height: 88px;
    padding: 8px 10px;
    line-height: 1.125rem;
    resize: none;
}

.ui-form__textarea--resize {
    resize: vertical;
}

.ui-form__textarea--auto-grow {
    min-height: auto;
    overflow-y: hidden;
    resize: none;
}

.ui-form__textarea--has-max-rows {
    scrollbar-width: none;
}

.ui-form__textarea--has-max-rows::-webkit-scrollbar {
    display: none;
}

.ui-form__textarea-counter {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    min-height: 16px;
    margin-top: 5px;
    color: var(--shell-text-tertiary);
    font-size: 0.6875rem;
    font-weight: 450;
    font-variant-numeric: tabular-nums;
    line-height: 1rem;
    white-space: nowrap;
}

.ui-form__control-shell--over-limit .ui-form__textarea-counter {
    color: var(--feedback-danger-text, var(--shell-menu-text-danger));
}

.ui-form__rich-text {
    box-sizing: border-box;
    width: 100%;
    min-height: var(--rich-text-min-height, 128px);
    border: 0.5px solid var(--settings-input-border, var(--settings-control-border));
    border-radius: 8px;
    background: var(--settings-input-bg, var(--settings-control-bg));
    color: var(--settings-input-text, var(--shell-text-primary));
    transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.ui-form__rich-text:hover,
.ui-form__rich-text:focus-within {
    border-color: var(--settings-input-hover-border, var(--settings-control-hover-border, lch(26.47% 6.83 272 / 1)));
}

.ui-form__rich-text--invalid {
    border-color: var(--status-red-border, color-mix(in srgb, rgb(239, 92, 92) 70%, var(--shell-border)));
    background: var(--status-red-bg, color-mix(in srgb, rgb(239, 92, 92) 8%, var(--settings-control-bg)));
}

.ui-form__rich-text--plain {
    min-height: var(--rich-text-min-height, 96px);
    border: 0;
    border-radius: 0;
    background: transparent;
}

.ui-form__rich-text--renderer {
    background: transparent;
}

.ui-form__rich-text-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: 33px;
    padding: 4px 6px;
    border-bottom: 0.5px solid var(--shell-border);
}

.ui-form__rich-text-toolbar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--shell-text-secondary);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 560;
    line-height: 1;
    cursor: default;
    transition: background-color 120ms ease, color 120ms ease;
}

.ui-form__rich-text-toolbar-button:hover,
.ui-form__rich-text-toolbar-button:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__rich-text-toolbar-button:disabled {
    opacity: 0.45;
    pointer-events: none;
}

.ui-form__rich-text-toolbar-separator {
    width: 0.5px;
    height: 16px;
    margin: 0 4px;
    background: var(--shell-border);
}

.ui-form__rich-text-editor {
    min-height: inherit;
}

.ui-form__rich-text-content {
    box-sizing: border-box;
    min-height: var(--rich-text-min-height, 128px);
    padding: 8px 10px 10px;
    outline: none;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.25rem;
    word-break: break-word;
    caret-color: var(--shell-text-primary);
}

.ui-form__rich-text--plain .ui-form__rich-text-content {
    min-height: var(--rich-text-min-height, 96px);
    padding: 0;
    color: var(--shell-menu-text, var(--shell-text-secondary));
    font-size: 0.9375rem;
    line-height: 1.5rem;
}

.ui-form__rich-text-content p,
.ui-form__rich-text-content h1,
.ui-form__rich-text-content h2,
.ui-form__rich-text-content h3,
.ui-form__rich-text-content ul,
.ui-form__rich-text-content ol,
.ui-form__rich-text-content blockquote,
.ui-form__rich-text-content pre {
    margin: 0 0 10px;
}

.ui-form__rich-text-content p:last-child,
.ui-form__rich-text-content h1:last-child,
.ui-form__rich-text-content h2:last-child,
.ui-form__rich-text-content h3:last-child,
.ui-form__rich-text-content ul:last-child,
.ui-form__rich-text-content ol:last-child,
.ui-form__rich-text-content blockquote:last-child,
.ui-form__rich-text-content pre:last-child {
    margin-bottom: 0;
}

.ui-form__rich-text-content h1,
.ui-form__rich-text-content h2,
.ui-form__rich-text-content h3 {
    color: var(--shell-text-primary);
    font-weight: 600;
    letter-spacing: 0;
}

.ui-form__rich-text-content h1 {
    font-size: 1.375rem;
    line-height: 30px;
}

.ui-form__rich-text-content h2 {
    font-size: 1.125rem;
    line-height: 26px;
}

.ui-form__rich-text-content h3 {
    font-size: 0.9375rem;
    line-height: 1.4375rem;
}

.ui-form__rich-text-content ul,
.ui-form__rich-text-content ol {
    padding-left: 20px;
}

.ui-form__rich-text-content li {
    margin: 2px 0;
}

.ui-form__rich-text-content blockquote {
    padding-left: 12px;
    border-left: 2px solid var(--shell-border);
    color: var(--shell-text-secondary);
}

.ui-form__rich-text-code {
    padding: 10px 12px;
    overflow: auto;
    border: 0.5px solid var(--shell-border);
    border-radius: 6px;
    background: var(--shell-bg-active);
    color: var(--shell-text-primary);
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 0.75rem;
    line-height: 1.125rem;
}

.ui-form__rich-text-content--empty:first-child::before {
    content: attr(data-placeholder);
    float: left;
    height: 0;
    color: var(--settings-input-placeholder, var(--shell-text-tertiary));
    pointer-events: none;
}

.ui-form__rich-text-link {
    color: var(--shell-accent, #5e6ad2);
    text-decoration: none;
}

.ui-form__rich-text-link:hover {
    text-decoration: underline;
}

.ui-form__rich-text-image {
    display: block;
    max-width: 100%;
    max-height: 280px;
    margin: 10px 0;
    border-radius: 8px;
    box-shadow: inset 0 0 0 0.5px var(--shell-border);
}

.ui-form__rich-text-rule {
    height: 0.5px;
    margin: 12px 0;
    border: 0;
    background: var(--shell-border);
}

.ui-form__rich-text-mention {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 0 5px;
    border-radius: 5px;
    background: var(--shell-menu-item-hover, var(--settings-control-hover-bg));
    color: var(--shell-text-primary);
    font-weight: 500;
    white-space: nowrap;
}

.ui-form__rich-text-task-list {
    padding-left: 0;
    list-style: none;
}

.ui-form__rich-text-task-item {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.ui-form__rich-text-task-item > label {
    display: inline-flex;
    align-items: center;
    height: 20px;
}

.ui-form__rich-text-task-item input {
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: var(--shell-accent, #5e6ad2);
}

.ui-form__rich-text-menu {
    position: fixed;
    z-index: 100000;
    box-sizing: border-box;
    width: 256px;
    max-height: 324px;
    padding: 5px;
    overflow: auto;
    border: 0.5px solid var(--shell-menu-border, var(--shell-border));
    border-radius: 8px;
    background: var(--shell-menu-bg, var(--shell-bg-surface));
    box-shadow: var(--shell-menu-shadow, var(--shell-shadow));
    color: var(--shell-text-primary);
}

.ui-form__rich-text-menu-header,
.ui-form__rich-text-menu-empty {
    padding: 5px 8px;
    color: var(--shell-text-tertiary);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 0.9375rem;
}

.ui-form__rich-text-menu-item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    width: 100%;
    min-height: 36px;
    padding: 5px 7px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--shell-menu-text, var(--shell-text-primary));
    font: inherit;
    text-align: left;
    cursor: default;
}

.ui-form__rich-text-menu-item--active,
.ui-form__rich-text-menu-item:hover,
.ui-form__rich-text-menu-item:focus-visible {
    outline: none;
    background: var(--shell-menu-item-hover, var(--settings-control-hover-bg));
    color: var(--shell-text-primary);
}

.ui-form__rich-text-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    overflow: hidden;
    border-radius: 5px;
    background: var(--shell-bg-active);
    color: var(--shell-text-secondary);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
}

.ui-form__rich-text-menu-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ui-form__rich-text-menu-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ui-form__rich-text-menu-title,
.ui-form__rich-text-menu-description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-form__rich-text-menu-title {
    color: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.0625rem;
}

.ui-form__rich-text-menu-description {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 0.9375rem;
}

.ui-form__range-slider {
    --ui-form-range-track-bg: color-mix(in srgb, var(--shell-text-primary) 10%, var(--settings-control-bg, transparent));
    --ui-form-range-fill-bg: var(--shell-accent, lch(47.918% 59.303 288.421 / 1));
    --ui-form-range-fill-hover-bg: lch(52.5% 61 288.421 / 1);
    --ui-form-range-thumb-bg: var(--ui-form-range-fill-bg);
    --ui-form-range-thumb-hover-bg: var(--ui-form-range-fill-hover-bg);
    --ui-form-range-thumb-ring: color-mix(in srgb, var(--ui-form-range-fill-bg) 18%, transparent);
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
}

.ui-form__range-slider-main {
    display: grid;
    flex: 1 1 auto;
    gap: 4px;
    min-width: 0;
}

.ui-form__range-slider-track-wrap {
    position: relative;
    display: flex;
    align-items: center;
    height: 28px;
}

.ui-form__range-slider-track-wrap::before,
.ui-form__range-slider-track-wrap::after {
    content: "";
    position: absolute;
    right: 0;
    left: 0;
    height: 6px;
    border-radius: 9999px;
    pointer-events: none;
}

.ui-form__range-slider-track-wrap::before {
    background: var(--ui-form-range-track-bg);
}

.ui-form__range-slider-track-wrap::after {
    right: auto;
    width: var(--ui-form-range-percent, 0%);
    background: var(--ui-form-range-fill-bg);
}

.ui-form__range-slider-input {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 28px;
    margin: 0;
    border: 0;
    background: transparent;
    cursor: default;
    appearance: none;
}

.ui-form__range-slider-input:focus-visible {
    outline: none;
}

.ui-form__range-slider-input:focus-visible::-webkit-slider-thumb {
    box-shadow:
        0 0 0 4px var(--ui-form-range-thumb-ring),
        var(--shell-shadow);
}

.ui-form__range-slider-input:focus-visible::-moz-range-thumb {
    box-shadow:
        0 0 0 4px var(--ui-form-range-thumb-ring),
        var(--shell-shadow);
}

.ui-form__range-slider-input::-webkit-slider-runnable-track {
    height: 6px;
    background: transparent;
}

.ui-form__range-slider-input::-moz-range-track {
    height: 6px;
    background: transparent;
}

.ui-form__range-slider-input::-webkit-slider-thumb {
    width: 20px;
    height: 20px;
    margin-top: -7px;
    border: 0;
    border-radius: 9999px;
    background: var(--ui-form-range-thumb-bg);
    box-shadow: var(--shell-shadow);
    appearance: none;
    transition: background-color 0.2s ease-in-out;
}

.ui-form__range-slider-input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 9999px;
    background: var(--ui-form-range-thumb-bg);
    box-shadow: var(--shell-shadow);
    transition: background-color 0.2s ease-in-out;
}

.ui-form__range-slider-input:hover::-webkit-slider-thumb {
    background: var(--ui-form-range-thumb-hover-bg);
    transition-duration: 0s;
}

.ui-form__range-slider-input:hover::-moz-range-thumb {
    background: var(--ui-form-range-thumb-hover-bg);
    transition-duration: 0s;
}

.ui-form__range-slider-input:disabled {
    opacity: 0.54;
}

.ui-form__range-slider-tooltip {
    position: absolute;
    bottom: calc(100% + 4px);
    left: var(--ui-form-range-tooltip-percent, 0%);
    z-index: 2;
    min-width: 28px;
    padding: 3px 6px;
    border: 1px solid var(--ui-form-range-tooltip-border, var(--shell-menu-border, lch(22% 5 270 / 1)));
    border-radius: 6px;
    background: var(--ui-form-range-tooltip-bg, var(--shell-menu-bg, var(--shell-bg-active, #191919)));
    box-shadow: var(--shell-shadow);
    color: var(--ui-form-range-tooltip-text, var(--shell-menu-text, var(--shell-text-primary)));
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 0.875rem;
    pointer-events: none;
    text-align: center;
    transform: translateX(-50%);
    white-space: nowrap;
}

.ui-form__range-slider-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-right: 1px solid var(--ui-form-range-tooltip-border, var(--shell-menu-border, lch(22% 5 270 / 1)));
    border-bottom: 1px solid var(--ui-form-range-tooltip-border, var(--shell-menu-border, lch(22% 5 270 / 1)));
    background: inherit;
    transform: translate(-50%, -3px) rotate(45deg);
}

.ui-form__range-slider-marks {
    position: relative;
    height: 8px;
    margin-top: -4px;
}

.ui-form__range-slider--has-mark-labels .ui-form__range-slider-marks {
    height: 24px;
    margin-top: -2px;
}

.ui-form__range-slider-mark {
    position: absolute;
    top: 0;
    left: var(--ui-form-range-mark-percent, 0%);
    width: 1px;
    height: 6px;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--shell-text-primary) 20%, transparent);
    transform: translateX(-50%);
}

.ui-form__range-slider-mark--major {
    height: 9px;
    background: color-mix(in srgb, var(--shell-text-primary) 34%, transparent);
}

.ui-form__range-slider-mark--filled {
    background: color-mix(in srgb, var(--ui-form-range-fill-bg) 72%, var(--shell-text-primary) 8%);
}

.ui-form__range-slider-mark-label {
    position: absolute;
    top: 10px;
    left: 50%;
    color: var(--shell-text-tertiary, var(--shell-text-secondary));
    font-size: 0.6875rem;
    font-weight: 450;
    line-height: 0.875rem;
    transform: translateX(-50%);
    white-space: nowrap;
}

.ui-form__range-slider-minmax {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    color: var(--shell-text-tertiary, var(--shell-text-secondary));
    font-size: 0.6875rem;
    font-weight: 450;
    line-height: 0.875rem;
}

.ui-form__range-slider-value {
    min-width: 34px;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
    text-align: right;
}

.ui-form__control:hover,
.ui-form__picker-trigger:hover,
.ui-form__picker-trigger:focus-visible,
.ui-form__range-trigger:hover,
.ui-form__range-trigger:focus-visible,
.ui-form__duration-trigger:hover,
.ui-form__duration-trigger:focus-visible,
.ui-form__interval-trigger:hover,
.ui-form__interval-trigger:focus-visible,
.ui-form__timezone-trigger:hover,
.ui-form__timezone-trigger:focus-visible,
.ui-form__country-trigger:hover,
.ui-form__country-trigger:focus-visible,
.ui-form__time-trigger:hover,
.ui-form__time-trigger:focus-visible,
.ui-form__color-trigger:hover,
.ui-form__color-trigger:focus-visible,
.ui-form__phone-control:hover,
.ui-form__email-trigger:hover,
.ui-form__multi-trigger:hover,
.ui-form__multi-trigger:focus-visible {
    border-color: var(--settings-input-hover-border, var(--settings-control-hover-border, lch(26.47% 6.83 272 / 1)));
    background: var(--settings-control-bg);
}

.ui-form__control:hover,
.ui-form__phone-control:hover,
.ui-form__email-trigger:hover {
    border-color: var(--settings-input-hover-border, var(--settings-control-hover-border, lch(26.47% 6.83 272 / 1)));
    background: var(--settings-input-bg, var(--settings-control-bg));
}

.ui-form__control:focus,
.ui-form__phone-control:focus-within,
.ui-form__email-trigger:focus-within {
    border-color: var(--settings-input-focus-border, var(--settings-input-border, var(--settings-control-border)));
    background: var(--settings-input-bg, var(--settings-control-bg));
}

.ui-form__row--invalid .ui-form__control,
.ui-form__row--invalid .ui-form__picker-trigger,
.ui-form__row--invalid .ui-form__range-trigger,
.ui-form__row--invalid .ui-form__duration-trigger,
.ui-form__row--invalid .ui-form__interval-trigger,
.ui-form__row--invalid .ui-form__timezone-trigger,
.ui-form__row--invalid .ui-form__country-trigger,
.ui-form__row--invalid .ui-form__time-trigger,
.ui-form__row--invalid .ui-form__color-trigger,
.ui-form__row--invalid .ui-form__phone-control,
.ui-form__row--invalid .ui-form__email-trigger,
.ui-form__row--invalid .ui-form__multi-trigger,
.ui-form__row--invalid .settings-select__trigger,
.ui-form__field--invalid .ui-form__control,
.ui-form__field--invalid .ui-form__picker-trigger,
.ui-form__field--invalid .ui-form__range-trigger,
.ui-form__field--invalid .ui-form__duration-trigger,
.ui-form__field--invalid .ui-form__interval-trigger,
.ui-form__field--invalid .ui-form__timezone-trigger,
.ui-form__field--invalid .ui-form__country-trigger,
.ui-form__field--invalid .ui-form__time-trigger,
.ui-form__field--invalid .ui-form__color-trigger,
.ui-form__field--invalid .ui-form__phone-control,
.ui-form__field--invalid .ui-form__email-trigger,
.ui-form__field--invalid .ui-form__multi-trigger,
.ui-form__field--invalid .settings-select__trigger,
.ui-form__control--invalid,
.ui-form__picker--invalid .ui-form__picker-trigger,
.ui-form__range-trigger--invalid,
.ui-form__duration--invalid .ui-form__duration-trigger,
.ui-form__interval--invalid .ui-form__interval-trigger,
.ui-form__timezone--invalid .ui-form__timezone-trigger,
.ui-form__country--invalid .ui-form__country-trigger,
.ui-form__time--invalid .ui-form__time-trigger,
.ui-form__color-picker--invalid .ui-form__color-trigger,
.ui-form__phone--invalid .ui-form__phone-control,
.ui-form__email--invalid .ui-form__email-trigger,
.ui-form__multi--invalid .ui-form__multi-trigger {
    border-color: var(--status-red-border, color-mix(in srgb, rgb(239, 92, 92) 70%, var(--shell-border)));
    background: var(--status-red-bg, color-mix(in srgb, rgb(239, 92, 92) 8%, var(--settings-control-bg)));
}

.ui-form__row--invalid .ui-form__control,
.ui-form__row--invalid .ui-form__phone-control,
.ui-form__row--invalid .ui-form__email-trigger,
.ui-form__field--invalid .ui-form__control,
.ui-form__field--invalid .ui-form__phone-control,
.ui-form__field--invalid .ui-form__email-trigger,
.ui-form__control--invalid,
.ui-form__phone--invalid .ui-form__phone-control,
.ui-form__email--invalid .ui-form__email-trigger {
    background: var(--status-red-bg, color-mix(in srgb, rgb(239, 92, 92) 8%, var(--settings-input-bg, var(--settings-control-bg))));
}

.ui-form__row--invalid .ui-form__control:focus,
.ui-form__row--invalid .ui-form__picker-trigger:focus-visible,
.ui-form__row--invalid .ui-form__range-trigger:focus-visible,
.ui-form__row--invalid .ui-form__duration-trigger:focus-visible,
.ui-form__row--invalid .ui-form__interval-trigger:focus-visible,
.ui-form__row--invalid .ui-form__timezone-trigger:focus-visible,
.ui-form__row--invalid .ui-form__country-trigger:focus-visible,
.ui-form__row--invalid .ui-form__time-trigger:focus-visible,
.ui-form__row--invalid .ui-form__color-trigger:focus-visible,
.ui-form__row--invalid .ui-form__phone-control:focus-within,
.ui-form__row--invalid .ui-form__email-trigger:focus-within,
.ui-form__row--invalid .ui-form__multi-trigger:focus-visible,
.ui-form__row--invalid .settings-select__trigger:focus-visible,
.ui-form__field--invalid .ui-form__control:focus,
.ui-form__field--invalid .ui-form__picker-trigger:focus-visible,
.ui-form__field--invalid .ui-form__range-trigger:focus-visible,
.ui-form__field--invalid .ui-form__duration-trigger:focus-visible,
.ui-form__field--invalid .ui-form__interval-trigger:focus-visible,
.ui-form__field--invalid .ui-form__timezone-trigger:focus-visible,
.ui-form__field--invalid .ui-form__country-trigger:focus-visible,
.ui-form__field--invalid .ui-form__time-trigger:focus-visible,
.ui-form__field--invalid .ui-form__color-trigger:focus-visible,
.ui-form__field--invalid .ui-form__phone-control:focus-within,
.ui-form__field--invalid .ui-form__email-trigger:focus-within,
.ui-form__field--invalid .ui-form__multi-trigger:focus-visible,
.ui-form__field--invalid .settings-select__trigger:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, rgb(239, 92, 92) 14%, transparent);
}

.ui-form__row--invalid .ui-form__range-slider-track-wrap::before,
.ui-form__field--invalid .ui-form__range-slider-track-wrap::before,
.ui-form__row--invalid .ui-form__button-group,
.ui-form__field--invalid .ui-form__button-group,
.ui-form__row--invalid .ui-form__avatar-preview,
.ui-form__field--invalid .ui-form__avatar-preview,
.ui-form__button-group--invalid,
.ui-form__avatar-preview--invalid,
.ui-form__range-slider--invalid .ui-form__range-slider-track-wrap::before {
    border-color: var(--status-red-border, color-mix(in srgb, rgb(239, 92, 92) 70%, var(--shell-border)));
}

.ui-form__row--invalid .ui-form__range-slider-track-wrap::after,
.ui-form__field--invalid .ui-form__range-slider-track-wrap::after,
.ui-form__range-slider--invalid .ui-form__range-slider-track-wrap::after {
    background: var(--status-red-text, rgb(239, 92, 92));
}

.ui-form__row--invalid .ui-form__range-slider,
.ui-form__field--invalid .ui-form__range-slider,
.ui-form__range-slider--invalid {
    --ui-form-range-fill-bg: var(--status-red-text, rgb(239, 92, 92));
    --ui-form-range-fill-hover-bg: var(--status-red-text, rgb(239, 92, 92));
    --ui-form-range-thumb-bg: var(--status-red-text, rgb(239, 92, 92));
    --ui-form-range-thumb-hover-bg: var(--status-red-text, rgb(239, 92, 92));
    --ui-form-range-thumb-ring: color-mix(in srgb, var(--status-red-text, rgb(239, 92, 92)) 18%, transparent);
}

.ui-form__row--invalid .ui-form__toggle-input,
.ui-form__field--invalid .ui-form__toggle-input,
.ui-form__toggle--invalid .ui-form__toggle-input {
    border-color: var(--status-red-border, color-mix(in srgb, rgb(239, 92, 92) 70%, var(--shell-border)));
    background: var(--status-red-bg, color-mix(in srgb, rgb(239, 92, 92) 8%, var(--settings-control-bg)));
}

.ui-form__control[type="number"] {
    appearance: textfield;
}

.ui-form__control[type="number"]::-webkit-outer-spin-button,
.ui-form__control[type="number"]::-webkit-inner-spin-button {
    margin: 0;
    appearance: none;
}

.ui-form__password {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.ui-form__avatar-field {
    display: flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    flex-wrap: wrap;
    gap: 6px;
}

.ui-form__avatar-preview {
    position: relative;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: var(--ui-form-avatar-size, 64px);
    height: var(--ui-form-avatar-size, 64px);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--shell-border) 88%, transparent);
    border-radius: 9999px;
    background: var(--ui-form-avatar-bg, var(--shell-bg-active));
    box-shadow: none;
    color: var(--ui-form-avatar-text, lch(100% 0 0));
    cursor: pointer;
    transition:
        background-color 120ms ease,
        border-color 140ms ease,
        color 140ms ease;
}

.ui-form__avatar-field--rounded-square .ui-form__avatar-preview {
    border-radius: 8px;
}

.ui-form__avatar-field--square .ui-form__avatar-preview {
    border-radius: 0;
}

.ui-form__avatar-preview:hover,
.ui-form__avatar-preview:focus-within,
.ui-form__avatar-field--drag-active .ui-form__avatar-preview {
    border-color: var(--settings-control-hover-border);
    background: var(--ui-form-avatar-bg, var(--settings-control-hover-bg));
    color: var(--ui-form-avatar-text, var(--shell-text-primary));
}

.ui-form__avatar-preview--file-invalid {
    border-color: var(--status-red-border, color-mix(in srgb, rgb(239, 92, 92) 70%, var(--shell-border)));
    background: var(--status-red-bg, color-mix(in srgb, rgb(239, 92, 92) 8%, var(--settings-control-bg)));
}

.ui-form__avatar-preview--disabled {
    opacity: 0.54;
    pointer-events: none;
}

.ui-form__avatar-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ui-form__avatar-initials {
    position: relative;
    z-index: 1;
    color: currentColor;
    font-size: calc(var(--ui-form-avatar-size, 64px) * 0.34);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0;
}

.ui-form__avatar-drop-label {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    padding: 4px;
    background: color-mix(in srgb, var(--shell-bg-surface) 76%, transparent);
    color: var(--shell-text-primary);
    font-size: 0.625rem;
    font-weight: 560;
    line-height: 0.75rem;
    text-align: center;
}

.ui-form__avatar-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    clip-path: inset(50%);
}

.ui-form__avatar-validation {
    flex: 0 0 100%;
    margin-top: 2px;
    color: var(--status-red-text, rgb(239, 92, 92));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
}

.ui-avatar-crop-modal-layer {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: none;
    align-items: center;
    justify-content: center;
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 24px;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: inherit;
    box-sizing: border-box;
    outline: none;
}

.ui-avatar-crop-modal-layer[open] {
    display: flex;
}

.ui-avatar-crop-modal-layer::backdrop {
    background: transparent;
}

.ui-avatar-crop-modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: var(--modal-backdrop-bg, lch(0% 0 0 / 0.72));
}

.ui-avatar-crop-modal {
    position: relative;
    display: flex;
    width: min(420px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    flex-direction: column;
    overflow: hidden;
    border: 0.5px solid var(--shell-border);
    border-radius: 13px;
    background: var(--shell-menu-bg, var(--shell-bg-active));
    box-shadow: var(--shell-shadow);
}

.ui-avatar-crop-modal__header,
.ui-avatar-crop-modal__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.ui-avatar-crop-modal__header {
    min-height: 62px;
    padding: 14px 16px;
    border-bottom: 0.5px solid var(--shell-border);
}

.ui-avatar-crop-modal__header h2 {
    margin: 0;
    color: var(--shell-text-primary);
    font-size: 0.9375rem;
    font-weight: 560;
    line-height: 1.3125rem;
}

.ui-avatar-crop-modal__header p {
    margin: 2px 0 0;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.0625rem;
}

.ui-avatar-crop-modal__body {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    overflow: auto;
    padding: 22px 20px 20px;
}

.ui-avatar-crop-modal__body::-webkit-scrollbar {
    display: none;
}

.ui-avatar-crop {
    position: relative;
    width: min(280px, calc(100vw - 96px));
    aspect-ratio: var(--avatar-crop-ratio, 1);
    overflow: hidden;
    border-radius: var(--avatar-crop-radius, 50%);
    background: var(--shell-bg-surface);
    box-shadow:
        0 0 0 1px var(--shell-border),
        0 0 0 999px color-mix(in srgb, var(--shell-bg-sidebar) 74%, transparent);
    touch-action: none;
    cursor: grab;
}

.ui-avatar-crop:active {
    cursor: grabbing;
}

.ui-avatar-crop__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform:
        translate(var(--avatar-crop-x, 0), var(--avatar-crop-y, 0))
        scale(var(--avatar-crop-scale, 1));
    transform-origin: center;
    user-select: none;
    pointer-events: none;
}

.ui-avatar-crop__mask {
    position: absolute;
    inset: 0;
    border-radius: var(--avatar-crop-radius, 50%);
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, #fff 18%, transparent),
        inset 0 0 0 999px transparent;
    pointer-events: none;
}

.ui-avatar-crop-modal__controls {
    display: grid;
    gap: 14px;
    width: min(340px, 100%);
}

.ui-avatar-crop-modal__zoom {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 28px;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.ui-avatar-crop-modal__zoom > span {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 520;
    line-height: 1rem;
}

.ui-avatar-crop-modal__actions {
    padding: 12px 16px 14px;
    border-top: 0.5px solid var(--shell-border);
}

.ui-form__password-field,
.ui-form__picker,
.ui-form__duration,
.ui-form__interval,
.ui-form__timezone,
.ui-form__country,
.ui-form__time,
.ui-form__color-picker,
.ui-form__phone,
.ui-form__email,
.ui-form__multi {
    position: relative;
    width: 100%;
}

.ui-floating-overlay {
    position: relative;
}

.ui-floating-overlay__anchor {
    display: block;
    width: 100%;
}

.ui-floating-overlay__scrim {
    position: fixed;
    inset: 0;
    z-index: 660;
    border: 0;
    background: transparent;
    cursor: default;
}

.ui-floating-overlay__positioner {
    z-index: 671;
    transform-origin: var(--ui-floating-overlay-origin, top left);
}

.ui-floating-overlay__positioner[popover] {
    inset: auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    color: inherit;
}

.ui-floating-overlay__positioner > .ui-form__date-panel,
.ui-floating-overlay__positioner > .ui-form__duration-panel,
.ui-floating-overlay__positioner > .ui-form__interval-panel,
.ui-floating-overlay__positioner > .ui-form__timezone-panel,
.ui-floating-overlay__positioner > .ui-form__country-panel,
.ui-floating-overlay__positioner > .ui-form__time-panel,
.ui-floating-overlay__positioner > .ui-form__color-panel,
.ui-floating-overlay__positioner > .ui-form__phone-panel,
.ui-floating-overlay__positioner > .ui-form__button-group-panel,
.ui-floating-overlay__positioner > .ui-form__multi-panel {
    position: static;
    top: auto;
    left: auto;
}

.ui-form__password-control {
    padding-right: 38px;
    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease,
        color 160ms ease;
}

.ui-form__password-toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--shell-text-secondary);
    cursor: default;
    transform: translateY(-50%);
    transition:
        background-color 140ms ease,
        color 140ms ease,
        transform 140ms ease;
}

.ui-form__password-toggle:hover,
.ui-form__password-toggle:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__password-toggle:active {
    transform: translateY(-50%) scale(0.94);
}

.ui-form__password-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: ui-form-password-toggle-in 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ui-form__password-toggle[data-state="visible"] .ui-form__password-toggle-icon {
    color: var(--shell-text-primary);
}

.ui-form__password-strength {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.ui-form__password-strength-track {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
}

.ui-form__password-strength-segment {
    height: 3px;
    border-radius: 9999px;
    background: var(--shell-border);
    opacity: 0.72;
    transform-origin: left center;
    transition:
        background-color 180ms ease,
        opacity 180ms ease,
        transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ui-form__password-strength--1 .ui-form__password-strength-segment--active {
    background: #e5484d;
}

.ui-form__password-strength--2 .ui-form__password-strength-segment--active {
    background: #f2c94c;
}

.ui-form__password-strength--3 .ui-form__password-strength-segment--active {
    background: #5e6ad2;
}

.ui-form__password-strength--4 .ui-form__password-strength-segment--active {
    background: #5ecca0;
}

.ui-form__password-strength-segment--active {
    opacity: 1;
    animation: ui-form-password-strength-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ui-form__password-strength-label {
    color: var(--shell-text-secondary);
    font-size: 0.6875rem;
    font-weight: 450;
    line-height: 0.875rem;
    animation: ui-form-password-label-in 140ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ui-form__password-policy {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
}

.ui-form__password-policy-item {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: var(--shell-text-tertiary);
    transition: color 140ms ease;
}

.ui-form__password-policy-item--satisfied {
    color: var(--shell-text-secondary);
}

.ui-form__password-policy-indicator {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    border: 0.5px solid var(--shell-border);
    border-radius: 9999px;
    color: var(--shell-accent, #5e6ad2);
    transition:
        border-color 140ms ease,
        background-color 140ms ease,
        color 140ms ease;
}

.ui-form__password-policy-item--satisfied .ui-form__password-policy-indicator {
    border-color: color-mix(in srgb, var(--shell-accent, #5e6ad2) 42%, var(--shell-border));
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 12%, transparent);
}

.ui-form__password-caps,
.ui-form__password-confirmation,
.ui-form__password-breach {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 18px;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
}

.ui-form__password-caps,
.ui-form__password-confirmation,
.ui-form__password-breach--compromised {
    color: var(--feedback-danger-text, var(--shell-menu-text-danger));
}

.ui-form__password-breach--safe {
    color: var(--shell-text-secondary);
}

.ui-form__password-breach-spinner {
    display: inline-flex;
    flex: 0 0 auto;
    width: 11px;
    height: 11px;
    border: 1.5px solid color-mix(in srgb, var(--shell-text-secondary) 28%, transparent);
    border-top-color: var(--shell-text-secondary);
    border-radius: 9999px;
    animation: ui-form-control-spin 760ms linear infinite;
}

@keyframes ui-form-password-toggle-in {
    from {
        opacity: 0;
        transform: scale(0.82) rotate(-8deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes ui-form-password-strength-in {
    from {
        transform: scaleX(0.45);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes ui-form-password-label-in {
    from {
        opacity: 0;
        transform: translateY(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-form__password-control,
    .ui-form__password-toggle,
    .ui-form__password-strength-segment,
    .ui-form__password-policy-item,
    .ui-form__password-policy-indicator {
        transition: none;
    }

    .ui-form__password-toggle-icon,
    .ui-form__password-strength-segment--active,
    .ui-form__password-strength-label,
    .ui-form__password-breach-spinner {
        animation: none;
    }
}

.ui-form__picker-trigger,
.ui-form__range-trigger,
.ui-form__duration-trigger,
.ui-form__interval-trigger,
.ui-form__timezone-trigger,
.ui-form__country-trigger,
.ui-form__time-trigger,
.ui-form__color-trigger,
.ui-form__phone-control,
.ui-form__email-trigger,
.ui-form__multi-trigger {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 1px 28px 1px 10px;
    text-align: left;
    cursor: default;
}

.ui-form__control:disabled,
.ui-form__picker-trigger:disabled,
.ui-form__range-trigger:disabled,
.ui-form__duration-trigger:disabled,
.ui-form__interval-trigger:disabled,
.ui-form__timezone-trigger:disabled,
.ui-form__country-trigger:disabled,
.ui-form__time-trigger:disabled,
.ui-form__color-trigger:disabled,
.ui-form__phone-code-trigger:disabled,
.ui-form__phone-input:disabled,
.ui-form__phone-extension-input:disabled,
.ui-form__multi-trigger:disabled {
    opacity: 0.54;
    pointer-events: none;
}

.ui-form__picker-value,
.ui-form__range-value,
.ui-form__duration-value,
.ui-form__interval-value,
.ui-form__timezone-value,
.ui-form__country-value,
.ui-form__time-value,
.ui-form__color-value,
.ui-form__phone-input,
.ui-form__email-value,
.ui-form__multi-value {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--settings-control-text, var(--shell-text-primary));
    font-size: 0.8125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-form__picker-icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--shell-text-secondary);
}

.ui-form__range-trigger--has-compare {
    height: auto;
    min-height: 38px;
    align-items: flex-start;
    padding-top: 5px;
    padding-bottom: 5px;
}

.ui-form__range-trigger--has-compare .ui-form__picker-icon {
    margin-top: 3px;
}

.ui-form__range-trigger--has-compare .ui-form__multi-chevron {
    top: 16px;
}

.ui-form__range-copy {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    gap: 1px;
}

.ui-form__range-compare {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 5px;
    color: var(--shell-text-muted);
    font-size: 0.6875rem;
    line-height: 0.875rem;
}

.ui-form__range-compare-label {
    flex: 0 0 auto;
    color: var(--shell-text-secondary);
}

.ui-form__range-compare-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-form__picker-scrim,
.ui-form__duration-scrim,
.ui-form__interval-scrim,
.ui-form__timezone-scrim,
.ui-form__country-scrim,
.ui-form__time-scrim,
.ui-form__phone-scrim,
.ui-form__multi-scrim {
    position: fixed;
    inset: 0;
    z-index: 660;
    border: 0;
    background: transparent;
    cursor: default;
}

.ui-form__picker--open,
.ui-form__duration--open,
.ui-form__interval--open,
.ui-form__timezone--open,
.ui-form__country--open,
.ui-form__time--open,
.ui-form__color-picker--open,
.ui-form__phone--open,
.ui-form__multi--open {
    z-index: 671;
}

.ui-form__date-panel,
.ui-form__duration-panel,
.ui-form__interval-panel,
.ui-form__timezone-panel,
.ui-form__country-panel,
.ui-form__time-panel,
.ui-form__color-panel,
.ui-form__phone-panel,
.ui-form__multi-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 671;
    border: 0.5px solid var(--settings-select-panel-border);
    background: var(--settings-select-panel-bg);
    box-shadow: lch(0% 0 0 / 0.125) 0 3px 8px, lch(0% 0 0 / 0.125) 0 2px 5px, lch(0% 0 0 / 0.125) 0 1px 1px;
}

.ui-form__date-panel {
    width: 286px;
    padding: 8px;
    border-radius: 12px;
}

.ui-form__duration-panel {
    width: 282px;
    padding: 6px;
    overflow: hidden;
    border-radius: 12px;
}

.ui-form__duration-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 30px;
    padding: 0 8px;
    border-bottom: 0.5px solid var(--settings-select-panel-border);
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
}

.ui-form__duration-panel-header strong {
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
}

.ui-form__duration-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 0;
    border-bottom: 0.5px solid var(--settings-select-panel-border);
}

.ui-form__duration-preset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--shell-text-secondary);
    font: inherit;
    font-size: 0.75rem;
    line-height: 1;
    white-space: nowrap;
    cursor: default;
    transition: background-color 120ms ease, color 120ms ease;
}

.ui-form__duration-preset:hover,
.ui-form__duration-preset:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__duration-preset--selected,
.ui-form__duration-preset--selected:hover,
.ui-form__duration-preset--selected:focus-visible {
    background: var(--shell-accent, #5e6ad2);
    color: white;
    box-shadow: none;
}

.ui-form__duration-preset--disabled,
.ui-form__duration-preset:disabled {
    color: var(--shell-text-muted);
    opacity: 0.42;
    pointer-events: none;
}

.ui-form__duration-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding-top: 6px;
}

.ui-form__duration-picker-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ui-form__duration-picker-grid--one {
    grid-template-columns: minmax(0, 1fr);
}

.ui-form__duration-column {
    display: grid;
    gap: 2px;
    max-height: 206px;
    overflow-y: auto;
    scrollbar-width: none;
}

.ui-form__duration-column::-webkit-scrollbar {
    display: none;
}

.ui-form__duration-column-label {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    background: var(--settings-select-panel-bg);
    color: var(--shell-text-secondary);
    font-size: 0.6875rem;
    font-weight: 450;
    line-height: 0.875rem;
}

.ui-form__duration-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 30px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--settings-control-text, var(--shell-text-primary));
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.125rem;
    text-align: center;
    cursor: default;
}

.ui-form__duration-option:hover,
.ui-form__duration-option:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__duration-option--selected,
.ui-form__duration-option--selected:hover,
.ui-form__duration-option--selected:focus-visible {
    background: var(--shell-accent, #5e6ad2);
    color: white;
    box-shadow: none;
}

.ui-form__duration-option--disabled,
.ui-form__duration-option:disabled {
    color: var(--shell-text-muted);
    opacity: 0.42;
    pointer-events: none;
}

.ui-form__interval-panel {
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
}

.ui-form__interval--has-preview .ui-form__interval-trigger {
    height: auto;
    min-height: 38px;
    align-items: flex-start;
    padding-top: 5px;
    padding-bottom: 5px;
}

.ui-form__interval--has-preview .ui-form__picker-icon {
    margin-top: 3px;
}

.ui-form__interval--has-preview .ui-form__multi-chevron {
    top: 16px;
}

.ui-form__interval-copy {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    gap: 1px;
}

.ui-form__interval-preview {
    min-width: 0;
    overflow: hidden;
    color: var(--shell-text-muted);
    font-size: 0.6875rem;
    line-height: 0.875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-form__interval-mode-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 2px;
    padding: 4px;
    border-bottom: 0.5px solid var(--shell-border);
}

.ui-form__interval-mode {
    position: relative;
    height: 28px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--shell-text-secondary);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
    text-align: center;
    cursor: default;
}

.ui-form__interval-mode:hover,
.ui-form__interval-mode:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__interval-mode--selected,
.ui-form__interval-mode--selected:hover,
.ui-form__interval-mode--selected:focus-visible {
    background: var(--shell-accent, #5e6ad2);
    color: white;
    box-shadow: none;
}

.ui-form__interval-options {
    max-height: 224px;
    padding: 4px 0;
    overflow-y: auto;
}

.ui-form__interval-option {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 32px;
    padding: 0 35px 0 12px;
    border: 0;
    background: transparent;
    color: var(--settings-control-text, var(--shell-text-primary));
    font-family: inherit;
    font-size: 0.8125rem;
    line-height: 1.21875rem;
    text-align: left;
    cursor: default;
}

.ui-form__interval-option::before {
    content: "";
    position: absolute;
    inset: 0 4px;
    border-radius: 8px;
    background: transparent;
}

.ui-form__interval-option:hover::before,
.ui-form__interval-option:focus-visible::before {
    background: var(--settings-control-hover-bg);
}

.ui-form__interval-option--selected::before,
.ui-form__interval-option--selected:hover::before,
.ui-form__interval-option--selected:focus-visible::before {
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 18%, transparent);
}

.ui-form__interval-option:focus-visible {
    outline: none;
}

.ui-form__interval-option span:first-child {
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-form__interval-check {
    position: absolute;
    top: 50%;
    right: 12px;
    z-index: 1;
    display: inline-flex;
    color: var(--shell-accent, #5e6ad2);
    transform: translateY(-50%);
}

.ui-form__timezone-panel {
    width: min(420px, calc(100vw - 32px));
    overflow: hidden;
    border-radius: 12px;
}

.ui-form__timezone-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 12px;
    border-bottom: 0.5px solid var(--shell-border);
    color: var(--shell-text-secondary);
}

.ui-form__timezone-search-input {
    min-width: 0;
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--shell-text-primary);
    font-family: inherit;
    font-size: 0.8125rem;
    outline: none;
}

.ui-form__timezone-search-input::placeholder {
    color: var(--settings-input-placeholder, var(--shell-text-secondary));
}

.ui-form__timezone-options {
    max-height: 280px;
    padding: 4px 0;
    overflow-y: auto;
}

.ui-form__timezone-option {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    width: 100%;
    min-height: 34px;
    padding: 0 35px 0 12px;
    border: 0;
    background: transparent;
    color: var(--settings-control-text, var(--shell-text-primary));
    font-family: inherit;
    text-align: left;
    cursor: default;
}

.ui-form__timezone-option::before {
    content: "";
    position: absolute;
    inset: 0 4px;
    border-radius: 8px;
    background: transparent;
}

.ui-form__timezone-option:hover::before,
.ui-form__timezone-option:focus-visible::before {
    background: var(--settings-control-hover-bg);
}

.ui-form__timezone-option--selected::before,
.ui-form__timezone-option--selected:hover::before,
.ui-form__timezone-option--selected:focus-visible::before {
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 18%, transparent);
}

.ui-form__timezone-option:focus-visible {
    outline: none;
}

.ui-form__timezone-option-label,
.ui-form__timezone-option-offset {
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-form__timezone-option-offset {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
}

.ui-form__timezone-check {
    position: absolute;
    top: 50%;
    right: 12px;
    z-index: 1;
    display: inline-flex;
    color: var(--shell-accent, #5e6ad2);
    transform: translateY(-50%);
}

.ui-form__timezone-empty {
    padding: 14px 12px;
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.125rem;
    text-align: center;
}

.ui-form__country-panel {
    width: min(360px, calc(100vw - 32px));
    overflow: hidden;
    border-radius: 12px;
}

.ui-form__country-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 12px;
    border-bottom: 0.5px solid var(--shell-border);
    color: var(--shell-text-secondary);
}

.ui-form__country-search-input {
    min-width: 0;
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--shell-text-primary);
    font-family: inherit;
    font-size: 0.8125rem;
    outline: none;
}

.ui-form__country-search-input::placeholder {
    color: var(--settings-input-placeholder, var(--shell-text-secondary));
}

.ui-form__country-options {
    max-height: 280px;
    padding: 4px 0;
    overflow-y: auto;
}

.ui-form__country-option {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    width: 100%;
    height: 34px;
    padding: 0 35px 0 12px;
    border: 0;
    background: transparent;
    color: var(--settings-control-text, var(--shell-text-primary));
    font-family: inherit;
    text-align: left;
    cursor: default;
}

.ui-form__country-option::before {
    content: "";
    position: absolute;
    inset: 0 4px;
    border-radius: 8px;
    background: transparent;
}

.ui-form__country-option:hover::before,
.ui-form__country-option:focus-visible::before {
    background: var(--settings-control-hover-bg);
}

.ui-form__country-option--selected::before,
.ui-form__country-option--selected:hover::before,
.ui-form__country-option--selected:focus-visible::before {
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 18%, transparent);
}

.ui-form__country-option:focus-visible {
    outline: none;
}

.ui-form__country-flag,
.ui-form__country-option-label,
.ui-form__country-option-code {
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-form__country-flag {
    width: 18px;
    text-align: center;
}

.ui-form__country-option-code {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
}

.ui-form__country-check {
    position: absolute;
    top: 50%;
    right: 12px;
    z-index: 1;
    display: inline-flex;
    color: var(--shell-accent, #5e6ad2);
    transform: translateY(-50%);
}

.ui-form__country-empty {
    padding: 14px 12px;
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.125rem;
    text-align: center;
}

.ui-form__phone-control {
    padding: 0;
    overflow: hidden;
}

.ui-form__phone-code-trigger {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    gap: 6px;
    min-width: 96px;
    padding: 0 9px 0 10px;
    border: 0;
    border-right: 0.5px solid var(--settings-control-border);
    background: transparent;
    color: var(--settings-control-text, var(--shell-text-primary));
    font: inherit;
    cursor: default;
}

.ui-form__phone-code-trigger:hover,
.ui-form__phone-code-trigger:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__phone-flag,
.ui-form__phone-code {
    flex: 0 0 auto;
    font-size: 0.8125rem;
    line-height: 1.125rem;
}

.ui-form__phone-code {
    font-weight: 450;
}

.ui-form__phone-input {
    min-width: 0;
    flex: 1 1 auto;
    height: 100%;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: var(--settings-control-text, var(--shell-text-primary));
    font-family: inherit;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    outline: none;
}

.ui-form__phone-extension-divider {
    align-self: center;
    width: 0.5px;
    height: 18px;
    flex: 0 0 auto;
    background: var(--settings-control-border);
}

.ui-form__phone-extension-input {
    width: 62px;
    min-width: 52px;
    flex: 0 0 62px;
    height: 100%;
    padding: 0 9px;
    border: 0;
    background: transparent;
    color: var(--settings-control-text, var(--shell-text-primary));
    font-family: inherit;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    outline: none;
}

.ui-form__phone-input::placeholder,
.ui-form__phone-extension-input::placeholder {
    color: var(--settings-input-placeholder, var(--shell-text-secondary));
}

.ui-form__phone-panel {
    width: min(380px, calc(100vw - 32px));
    overflow: hidden;
    border-radius: 12px;
}

.ui-form__phone-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 12px;
    border-bottom: 0.5px solid var(--shell-border);
    color: var(--shell-text-secondary);
}

.ui-form__phone-search-input {
    min-width: 0;
    flex: 1;
    border: 0;
    background: transparent;
    color: var(--shell-text-primary);
    font-family: inherit;
    font-size: 0.8125rem;
    outline: none;
}

.ui-form__phone-search-input::placeholder {
    color: var(--settings-input-placeholder, var(--shell-text-secondary));
}

.ui-form__phone-options {
    max-height: 280px;
    padding: 4px 0;
    overflow-y: auto;
}

.ui-form__phone-option {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    width: 100%;
    height: 34px;
    padding: 0 35px 0 12px;
    border: 0;
    background: transparent;
    color: var(--settings-control-text, var(--shell-text-primary));
    font-family: inherit;
    text-align: left;
    cursor: default;
}

.ui-form__phone-option::before {
    content: "";
    position: absolute;
    inset: 0 4px;
    border-radius: 8px;
    background: transparent;
}

.ui-form__phone-option:hover::before,
.ui-form__phone-option:focus-visible::before {
    background: var(--settings-control-hover-bg);
}

.ui-form__phone-option--selected::before,
.ui-form__phone-option--selected:hover::before,
.ui-form__phone-option--selected:focus-visible::before {
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 18%, transparent);
}

.ui-form__phone-option:focus-visible {
    outline: none;
}

.ui-form__phone-option-flag,
.ui-form__phone-option-label,
.ui-form__phone-option-code {
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-form__phone-option-flag {
    width: 18px;
    text-align: center;
}

.ui-form__phone-option-code {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
}

.ui-form__phone-check {
    position: absolute;
    top: 50%;
    right: 12px;
    z-index: 1;
    display: inline-flex;
    color: var(--shell-accent, #5e6ad2);
    transform: translateY(-50%);
}

.ui-form__phone-empty {
    padding: 14px 12px;
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.125rem;
    text-align: center;
}

.ui-form__date-header {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    align-items: center;
    height: 32px;
}

.ui-form__date-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--shell-text-secondary);
    cursor: default;
}

.ui-form__date-nav:hover,
.ui-form__date-nav:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__date-nav-icon {
    display: inline-flex;
}

.ui-form__date-nav-icon--previous {
    transform: rotate(180deg);
}

.ui-form__date-month {
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.125rem;
    text-align: center;
}

.ui-form__date-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 8px 0 2px;
    padding-bottom: 8px;
    border-bottom: 0.5px solid var(--shell-border);
}

.ui-form__date-preset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--shell-text-secondary);
    font: inherit;
    font-size: 0.75rem;
    line-height: 1;
    white-space: nowrap;
    cursor: default;
    transition: background-color 120ms ease, color 120ms ease;
}

.ui-form__date-preset:hover,
.ui-form__date-preset:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__date-preset--selected,
.ui-form__date-preset--selected:hover,
.ui-form__date-preset--selected:focus-visible {
    background: var(--settings-control-active-bg, var(--settings-control-hover-bg));
    color: var(--shell-text-primary);
}

.ui-form__date-preset--disabled,
.ui-form__date-preset:disabled,
.ui-form__date-day--disabled,
.ui-form__date-day:disabled {
    color: var(--shell-text-muted);
    opacity: 0.42;
    pointer-events: none;
}

.ui-form__date-weekdays,
.ui-form__date-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.ui-form__date-weekdays {
    margin-top: 8px;
    color: var(--shell-text-muted);
    font-size: 0.6875rem;
    line-height: 1.5rem;
    text-align: center;
}

.ui-form__date-day {
    width: 100%;
    height: 30px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--shell-text-primary);
    font-family: inherit;
    font-size: 0.75rem;
    cursor: default;
}

.ui-form__date-day:hover,
.ui-form__date-day:focus-visible {
    background: var(--settings-control-hover-bg);
    outline: none;
}

.ui-form__date-day--muted {
    color: var(--shell-text-muted);
}

.ui-form__date-day--today {
    color: var(--shell-accent, #5e6ad2);
}

.ui-form__date-day--selected,
.ui-form__date-day--selected:hover,
.ui-form__date-day--selected:focus-visible {
    background: var(--shell-accent, #5e6ad2);
    color: white;
}

.ui-form__date-day--selected.ui-form__date-day--disabled {
    opacity: 0.58;
}

.ui-form__time-panel {
    width: 236px;
    max-height: none;
    padding: 6px;
    overflow: hidden;
    border-radius: 12px;
}

.ui-form__time-panel--compact {
    right: 0;
    left: auto;
    width: 236px;
}

.ui-form__time-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 30px;
    padding: 0 8px;
    border-bottom: 0.5px solid var(--settings-select-panel-border);
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
}

.ui-form__time-panel-header strong {
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
}

.ui-form__time-panel-header span {
    display: inline-flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.ui-form__time-panel-header small,
.ui-form__time-zone-hint {
    display: block;
    overflow: hidden;
    color: var(--shell-text-muted);
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 0.875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-form__time-zone-hint {
    max-width: 96px;
    margin-left: auto;
}

.ui-form__time-trigger--with-time-zone-hint .ui-form__time-value {
    min-width: max-content;
    flex: 0 0 auto;
    overflow: visible;
    text-overflow: clip;
}

.ui-form__time-trigger--with-time-zone-hint .ui-form__time-zone-hint {
    min-width: 0;
    flex: 1 1 auto;
    max-width: none;
    margin-left: 0;
}

.ui-form__time-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 0;
    border-bottom: 0.5px solid var(--settings-select-panel-border);
}

.ui-form__time-preset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--shell-text-secondary);
    font: inherit;
    font-size: 0.75rem;
    line-height: 1;
    white-space: nowrap;
    cursor: default;
    transition: background-color 120ms ease, color 120ms ease;
}

.ui-form__time-preset:hover,
.ui-form__time-preset:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__time-preset--selected,
.ui-form__time-preset--selected:hover,
.ui-form__time-preset--selected:focus-visible {
    background: var(--shell-accent, #5e6ad2);
    color: white;
    box-shadow: none;
}

.ui-form__time-preset--disabled,
.ui-form__time-preset:disabled {
    color: var(--shell-text-muted);
    opacity: 0.42;
    pointer-events: none;
}

.ui-form__time-picker-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px 60px;
    gap: 4px;
    padding-top: 6px;
}

.ui-form__time-picker-grid--24 {
    grid-template-columns: minmax(0, 1fr) 64px;
}

.ui-form__time-column {
    display: grid;
    gap: 2px;
    max-height: 174px;
    overflow-y: auto;
    scrollbar-width: none;
}

.ui-form__time-column::-webkit-scrollbar {
    display: none;
}

.ui-form__time-column--period {
    max-height: none;
}

.ui-form__time-option {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 30px;
    padding: 0 8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--settings-control-text, var(--shell-text-primary));
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.125rem;
    text-align: center;
    cursor: default;
}

.ui-form__time-option:hover,
.ui-form__time-option:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__time-option--selected,
.ui-form__time-option--selected:hover,
.ui-form__time-option--selected:focus-visible {
    background: var(--shell-accent, #5e6ad2);
    color: white;
    box-shadow: none;
}

.ui-form__time-option--disabled,
.ui-form__time-option:disabled {
    color: var(--shell-text-muted);
    opacity: 0.42;
    pointer-events: none;
}

.ui-form__color-panel {
    width: 411px;
    overflow: hidden;
    border-radius: 6px;
}

.ui-form__color-swatch {
    width: 14px;
    height: 14px;
    border: 0.5px solid color-mix(in srgb, var(--shell-text-primary) 18%, transparent);
    border-radius: 9999px;
    box-shadow: var(--shell-shadow);
}

.ui-form__color-section {
    padding: 16px 0;
}

.ui-form__color-format {
    display: flex;
    padding: 0 16px 14px;
}

.ui-form__color-format .ui-form__button-group {
    width: auto;
}

.ui-form__color-row {
    display: flex;
    align-items: center;
    width: 100%;
    height: 22px;
    margin-bottom: 16px;
    padding: 0 16px;
}

.ui-form__color-current,
.ui-form__color-default {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: default;
}

.ui-form__color-current {
    flex: 0 0 auto;
    border-radius: 50%;
}

.ui-form__color-hex {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
    height: 16px;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
}

.ui-form__color-hex input {
    min-width: 0;
    flex: 1 1 auto;
    height: 16px;
    margin: 0;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: var(--shell-text-secondary);
    font-family: inherit;
    font-size: 0.8125rem;
    outline: none;
}

.ui-form__color-default {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 16px;
    border-radius: 4px;
}

.ui-form__color-default span {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, transparent calc(50% - 1px), var(--shell-text-secondary) calc(50% - 1px), var(--shell-text-secondary) calc(50% + 1px), transparent calc(50% + 1px)), radial-gradient(circle at center, transparent 51%, var(--shell-text-secondary) 52%, var(--shell-text-secondary) 58%, transparent 59%);
}

.ui-form__color-default:hover,
.ui-form__color-default:focus-visible {
    background: var(--settings-control-hover-bg);
    outline: none;
}

.ui-form__color-palette {
    display: grid;
    gap: 8px;
    padding: 0 16px 14px;
}

.ui-form__color-palette-title {
    color: var(--shell-text-secondary);
    font-size: 0.6875rem;
    font-weight: 520;
    line-height: 0.875rem;
}

.ui-form__color-palette-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ui-form__color-preset {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background:
        linear-gradient(45deg, color-mix(in srgb, var(--shell-text-secondary) 18%, transparent) 25%, transparent 25% 75%, color-mix(in srgb, var(--shell-text-secondary) 18%, transparent) 75%),
        linear-gradient(45deg, color-mix(in srgb, var(--shell-text-secondary) 18%, transparent) 25%, transparent 25% 75%, color-mix(in srgb, var(--shell-text-secondary) 18%, transparent) 75%);
    background-color: var(--shell-bg-surface);
    background-position: 0 0, 4px 4px;
    background-size: 8px 8px;
    box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--shell-text-primary) 18%, transparent);
    cursor: default;
}

.ui-form__color-preset span {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--color-preset-value);
}

.ui-form__color-preset::after {
    content: "";
    position: absolute;
    inset: -3px;
    border: 1px solid transparent;
    border-radius: 9999px;
    pointer-events: none;
}

.ui-form__color-preset:hover::after,
.ui-form__color-preset:focus-visible::after {
    border-color: var(--settings-control-hover-border);
}

.ui-form__color-preset:focus-visible {
    outline: none;
}

.ui-form__color-preset--active::after,
.ui-form__color-preset--active:hover::after,
.ui-form__color-preset--active:focus-visible::after {
    border-color: var(--shell-accent, #5e6ad2);
}

.ui-form__color-body {
    display: flex;
    width: 100%;
    height: 100px;
    padding: 0 16px;
}

.ui-form__color-plane {
    position: relative;
    display: block;
    width: 350px;
    height: 100px;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, var(--color-picker-color) 100%);
    cursor: crosshair;
}

.ui-form__color-plane-thumb {
    position: absolute;
    left: var(--color-picker-x, 52%);
    top: var(--color-picker-y, 18%);
    width: 16px;
    height: 16px;
    border: 1px solid rgb(255, 255, 255);
    border-radius: 10px;
    background: var(--color-picker-selected, color(display-p3 0.378249 0.822859 0.486083));
    box-shadow: rgba(0, 0, 0, 0.5) 0 0 4px 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.ui-form__color-hue {
    position: relative;
    display: block;
    width: 6px;
    height: 100px;
    margin-left: 16px;
    padding: 0;
    border: 0;
    background: linear-gradient(to bottom, #f00 0%, #ff0 16.67%, #0f0 33.33%, #0ff 50%, #00f 66.67%, #f0f 83.33%, #f00 100%);
    cursor: default;
}

.ui-form__color-alpha {
    position: relative;
    display: block;
    width: 6px;
    height: 100px;
    margin-left: 10px;
    padding: 0;
    border: 0;
    background:
        linear-gradient(to bottom, var(--color-picker-alpha-color), transparent),
        linear-gradient(45deg, color-mix(in srgb, var(--shell-text-secondary) 22%, transparent) 25%, transparent 25% 75%, color-mix(in srgb, var(--shell-text-secondary) 22%, transparent) 75%),
        linear-gradient(45deg, color-mix(in srgb, var(--shell-text-secondary) 22%, transparent) 25%, transparent 25% 75%, color-mix(in srgb, var(--shell-text-secondary) 22%, transparent) 75%);
    background-color: var(--shell-bg-surface);
    background-position: 0 0, 0 0, 3px 3px;
    background-size: auto, 6px 6px, 6px 6px;
    cursor: default;
}

.ui-form__color-hue-thumb {
    position: absolute;
    left: 50%;
    top: var(--color-picker-hue-y, 39%);
    width: 12px;
    height: 4px;
    border: 0.5px solid var(--settings-select-panel-border);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px 0;
    transform: translateX(-50%);
    pointer-events: none;
}

.ui-form__color-alpha-thumb {
    position: absolute;
    left: 50%;
    top: var(--color-picker-alpha-y, 0%);
    width: 12px;
    height: 4px;
    border: 0.5px solid var(--settings-select-panel-border);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px 0;
    transform: translateX(-50%);
    pointer-events: none;
}

.ui-form__color-contrast {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    margin: 14px 16px 0;
    padding-top: 12px;
    border-top: 0.5px solid var(--shell-border);
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    line-height: 1rem;
}

.ui-form__color-contrast strong {
    color: var(--shell-text-primary);
    font-weight: 560;
}

.ui-form__color-contrast em {
    font-style: normal;
    font-weight: 560;
}

.ui-form__color-contrast--pass em {
    color: var(--status-green-text, #5ecca0);
}

.ui-form__color-contrast--fail em {
    color: var(--status-red-text, rgb(239, 92, 92));
}

.ui-form__color-error {
    margin: 10px 16px 0;
    color: var(--status-red-text, rgb(239, 92, 92));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
}

.ui-form__datetime {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 8px;
}

.ui-form__datetime-controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.ui-form__datetime-controls--has-clear {
    grid-template-columns: minmax(0, 1fr) 112px auto;
}

.ui-form__datetime-time {
    height: 32px;
}

.ui-form__datetime-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--shell-text-secondary);
    cursor: default;
    transition: background-color 120ms ease, color 120ms ease;
}

.ui-form__datetime-clear:hover,
.ui-form__datetime-clear:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__datetime-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ui-form__datetime-preset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--shell-text-secondary);
    font: inherit;
    font-size: 0.75rem;
    line-height: 1;
    white-space: nowrap;
    cursor: default;
    transition: background-color 120ms ease, color 120ms ease;
}

.ui-form__datetime-preset:hover,
.ui-form__datetime-preset:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__datetime-preset--selected,
.ui-form__datetime-preset--selected:hover,
.ui-form__datetime-preset--selected:focus-visible {
    background: var(--shell-accent, #5e6ad2);
    color: white;
    box-shadow: none;
}

.ui-form__datetime-preset--disabled,
.ui-form__datetime-preset:disabled {
    color: var(--shell-text-muted);
    opacity: 0.42;
    pointer-events: none;
}

.ui-form__multi-value {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-weight: 400;
}

.ui-form__email-trigger {
    min-height: 32px;
    height: auto;
    padding-top: 4px;
    padding-bottom: 4px;
}

.ui-form__email-trigger--invalid {
    border-color: var(--status-red-border, color-mix(in srgb, rgb(239, 92, 92) 70%, var(--shell-border)));
    background: var(--status-red-bg, color-mix(in srgb, rgb(239, 92, 92) 8%, var(--settings-control-bg)));
}

.ui-form__email-value {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding-right: 0;
    font-weight: 400;
}

.ui-form__email-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 18%, transparent);
    color: var(--shell-accent, #5e6ad2);
    font-size: 0.625rem;
    font-weight: 650;
    line-height: 0.875rem;
}

.ui-form__email-chip--rich {
    height: 28px;
    padding-left: 4px;
}

.ui-form__email-chip-avatar {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    overflow: hidden;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--email-chip-color, var(--shell-accent, #5e6ad2)) 18%, transparent);
    color: var(--email-chip-color, var(--shell-accent, #5e6ad2));
    font-size: 0.625rem;
    font-weight: 650;
    line-height: 1;
}

.ui-form__email-chip-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ui-form__email-chip-text {
    display: grid;
    min-width: 0;
    max-width: 180px;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.ui-form__email-chip-name,
.ui-form__email-chip-address {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-form__email-chip-name {
    color: var(--shell-text-primary);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 0.8125rem;
}

.ui-form__email-chip-address {
    color: var(--shell-text-secondary);
    font-size: 0.6875rem;
    font-weight: 450;
    line-height: 0.75rem;
}

.ui-form__email-input {
    min-width: 148px;
    flex: 1 1 148px;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--shell-text-primary);
    font-family: inherit;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    outline: none;
}

.ui-form__email-input::placeholder {
    color: var(--settings-input-placeholder, var(--shell-text-secondary));
}

.ui-form__email-error {
    margin-top: 6px;
    color: var(--status-red-text, rgb(239, 92, 92));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
}

.ui-form__multi-trigger {
    min-height: 32px;
    height: auto;
    padding-top: 4px;
    padding-bottom: 4px;
}

.ui-form__multi-chevron {
    position: absolute;
    top: 50%;
    right: 10px;
    display: inline-flex;
    width: 10px;
    height: 5px;
    color: var(--shell-text-secondary);
    transform: translateY(-50%);
}

.ui-form__multi-panel {
    width: 100%;
    padding: 4px 0;
    max-height: min(342px, calc(100vh - 24px));
    overflow: auto;
    border-radius: 12px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ui-form__multi-panel::-webkit-scrollbar {
    display: none;
}

.ui-form__multi-panel-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 31px;
    padding: 3px 8px 5px 12px;
    border-bottom: 0.5px solid var(--settings-select-panel-border);
    background: var(--settings-select-panel-bg);
}

.ui-form__multi-panel-count {
    min-width: 0;
    overflow: hidden;
    color: var(--shell-text-secondary);
    font-size: 0.6875rem;
    font-weight: 450;
    line-height: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-form__multi-panel-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 2px;
}

.ui-form__multi-panel-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    padding: 0 7px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--shell-text-secondary);
    font: inherit;
    font-size: 0.6875rem;
    font-weight: 450;
    line-height: 1rem;
    cursor: default;
}

.ui-form__multi-panel-action:hover,
.ui-form__multi-panel-action:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__multi-panel-action--disabled,
.ui-form__multi-panel-action:disabled {
    color: var(--shell-text-muted);
    opacity: 0.5;
    pointer-events: none;
}

.ui-form__multi-section-label {
    position: relative;
    z-index: 1;
    min-height: 27px;
    padding: 8px 35px 5px 12px;
    color: var(--shell-text-secondary);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1rem;
    user-select: none;
}

.ui-form__multi-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    height: 22px;
    padding: 0 4px 0 6px;
    border: 0.5px solid var(--settings-input-border, var(--settings-control-border));
    border-radius: 6px;
    background: var(--shell-bg-active);
    color: var(--shell-text-primary);
    font-size: 0.75rem;
    line-height: 1rem;
}

.ui-form__multi-chip--active {
    border-color: color-mix(in srgb, var(--shell-accent, #5e6ad2) 58%, var(--settings-input-border, var(--settings-control-border)));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--shell-accent, #5e6ad2) 34%, transparent);
}

.ui-form__multi-chip-icon {
    display: inline-flex;
    color: var(--shell-text-secondary);
}

.ui-form__multi-chip-avatar,
.ui-form__multi-option-avatar {
    display: block;
    border-radius: 9999px;
}

.ui-form__multi-chip-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-form__multi-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-text-secondary);
    cursor: default;
}

.ui-form__multi-chip-remove:hover,
.ui-form__multi-chip-remove:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__multi-input {
    min-width: 72px;
    flex: 1 1 72px;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--shell-text-primary);
    font-family: inherit;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    outline: none;
}

.ui-form__multi-input::placeholder {
    color: var(--settings-input-placeholder, var(--shell-text-secondary));
}

.ui-form__multi-empty {
    padding: 14px 12px;
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    line-height: 1.125rem;
    text-align: center;
}

.ui-form__multi-option {
    position: relative;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    width: 100%;
    min-height: 34px;
    padding: 0 35px 0 12px;
    border: 0;
    background: transparent;
    color: var(--settings-control-text, var(--shell-text-primary));
    font-family: inherit;
    font-size: 0.8125rem;
    line-height: 1.21875rem;
    text-align: left;
    cursor: default;
}

.ui-form__multi-option::before {
    content: "";
    position: absolute;
    inset: 1px 4px;
    border-radius: 8px;
    background: transparent;
}

.ui-form__multi-option:hover::before,
.ui-form__multi-option:focus-visible::before {
    background: var(--settings-control-hover-bg);
}

.ui-form__multi-option--active::before,
.ui-form__multi-option--active:hover::before,
.ui-form__multi-option--active:focus-visible::before {
    background: var(--settings-control-hover-bg);
}

.ui-form__multi-option--selected::before,
.ui-form__multi-option--selected:hover::before,
.ui-form__multi-option--selected:focus-visible::before {
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 18%, transparent);
}

.ui-form__multi-option--selected .ui-form__multi-option-label {
    color: var(--shell-text-primary);
}

.ui-form__multi-option--disabled,
.ui-form__multi-option:disabled {
    color: var(--shell-text-muted);
    opacity: 0.48;
    pointer-events: none;
}

.ui-form__multi-option--create {
    color: var(--shell-text-primary);
}

.ui-form__tag-dot {
    position: relative;
    z-index: 1;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 9999px;
}

.ui-form__multi-option-leading {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    min-width: 22px;
}

.ui-form__multi-option-content {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.ui-form__multi-option-label,
.ui-form__multi-option-meta {
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-form__multi-option-label {
    color: var(--settings-control-text, var(--shell-text-primary));
    font-size: 0.8125rem;
    line-height: 1.125rem;
}

.ui-form__multi-option-meta {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    line-height: 1rem;
}

.ui-form__multi-check {
    position: absolute;
    top: 50%;
    right: 12px;
    z-index: 1;
    display: inline-flex;
    color: var(--shell-accent, #5e6ad2);
    transform: translateY(-50%);
}

.ui-form__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-self: start;
    cursor: default;
}

.ui-form__toggle-input {
    position: relative;
    display: block;
    width: 30px;
    height: 20px;
    margin: 0;
    padding: 0;
    appearance: none;
    border: 0;
    border-radius: 72px;
    background: var(--ui-toggle-off-bg, lch(47.275% 0.867 272.002 / 1));
    cursor: default;
    transition: background-color 150ms ease-out, opacity 150ms ease-out;
}

.ui-form__toggle-input::before {
    content: "";
    position: absolute;
    inset: -6px;
}

.ui-form__toggle-input::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    background: var(--ui-toggle-thumb-bg, lch(100% 5 288.421 / 1));
    transform: translateY(-50%);
    transition: left 150ms ease-out, background-color 150ms ease-out;
}

.ui-form__toggle-input:checked {
    background: var(--ui-toggle-on-bg, var(--app-theme-accent, lch(47.918% 59.303 288.421 / 1)));
}

.ui-form__toggle-input:checked::after {
    left: 13px;
}

.ui-form__toggle-input:disabled {
    opacity: var(--ui-toggle-disabled-opacity, 0.5);
}

.ui-form__toggle-label {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.125rem;
    user-select: none;
}

.ui-form__button-group {
    display: inline-flex;
    width: 100%;
    height: 32px;
    padding: 2px;
    overflow: hidden;
    border: 0.5px solid var(--settings-input-border, var(--settings-control-border));
    border-radius: 8px;
    background: var(--settings-control-bg);
}

.ui-form__button-group-overlay {
    width: 100%;
}

.ui-form__button-group-overlay .ui-floating-overlay__anchor {
    display: block;
    width: 100%;
}

.ui-form__button-group-scrim {
    position: fixed;
    inset: 0;
    z-index: 660;
    border: 0;
    background: transparent;
    cursor: default;
}

.ui-form__button-group--content {
    width: auto;
    max-width: 100%;
}

.ui-form__button-group-option {
    display: inline-flex;
    min-width: 0;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--shell-text-secondary);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
    cursor: default;
}

.ui-form__button-group--content .ui-form__button-group-option {
    flex: 0 0 auto;
}

.ui-form__button-group-option-tooltip {
    display: inline-flex;
    min-width: 0;
    flex: 1 1 0;
    align-items: stretch;
    height: 100%;
}

.ui-form__button-group-option-tooltip--content {
    flex: 0 0 auto;
}

.ui-form__button-group-option-tooltip .ui-form__button-group-option {
    width: 100%;
}

.ui-form__button-group-option-content {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.ui-form__button-group-option-icon,
.ui-form__button-group-option-chevron {
    display: inline-flex;
    flex: 0 0 auto;
    color: currentColor;
}

.ui-form__button-group-option-chevron .shell-icon,
.ui-form__button-group-option-chevron svg {
    width: 10px;
    height: 5px;
}

.ui-form__button-group-option-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-form__button-group-option:hover,
.ui-form__button-group-option:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__button-group-option--active,
.ui-form__button-group-option--active:hover,
.ui-form__button-group-option--active:focus-visible {
    background: var(--shell-accent, #5e6ad2);
    color: white;
    box-shadow: var(--shell-shadow);
}

.ui-form__button-group-panel {
    box-sizing: border-box;
    min-width: 180px;
    width: max-content;
    max-width: min(260px, calc(100vw - 24px));
    max-height: min(320px, calc(100vh - 24px));
    padding: 4px 0;
    overflow: auto;
    border: 0.5px solid var(--settings-select-panel-border);
    border-radius: 12px;
    background: var(--settings-select-panel-bg);
    box-shadow:
        lch(0% 0 0 / 0.125) 0 3px 8px,
        lch(0% 0 0 / 0.125) 0 2px 5px,
        lch(0% 0 0 / 0.125) 0 1px 1px;
    color: var(--settings-control-text);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ui-form__button-group-panel::-webkit-scrollbar {
    display: none;
}

.ui-form__button-group-panel-option {
    position: relative;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 32px;
    padding: 0 35px 0 12px;
    border: 0;
    background: transparent;
    color: var(--settings-control-text, var(--shell-text-primary));
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.21875rem;
    text-align: left;
    cursor: default;
}

.ui-form__button-group-panel-option::before {
    content: "";
    position: absolute;
    inset: 0 4px;
    border-radius: 8px;
    background: transparent;
}

.ui-form__button-group-panel-option:hover::before,
.ui-form__button-group-panel-option:focus-visible::before {
    background: var(--settings-control-hover-bg);
}

.ui-form__button-group-panel-option:focus-visible {
    outline: none;
}

.ui-form__button-group-panel-option-icon,
.ui-form__button-group-panel-option-content,
.ui-form__button-group-panel-check {
    position: relative;
    z-index: 1;
}

.ui-form__button-group-panel-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--shell-text-secondary);
}

.ui-form__button-group-panel-option-content {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.ui-form__button-group-panel-option-label,
.ui-form__button-group-panel-option-description {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ui-form__button-group-panel-option-label {
    color: var(--settings-control-text, var(--shell-text-primary));
    font-size: 0.8125rem;
    line-height: 1.125rem;
}

.ui-form__button-group-panel-option-description {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    line-height: 1rem;
}

.ui-form__button-group-panel-check {
    position: absolute;
    top: 50%;
    right: 8px;
    display: inline-flex;
    color: var(--shell-text-secondary);
    transform: translateY(-50%);
}

.ui-form__row .settings-select,
.ui-form__field .settings-select {
    justify-self: stretch;
    width: 100%;
}

.ui-form__row .settings-select__trigger,
.ui-form__field .settings-select__trigger {
    width: 100%;
    height: 32px;
    margin: 0;
    border-color: var(--settings-input-border, var(--settings-control-border));
    background: var(--settings-control-bg);
}

.ui-form__row--invalid .ui-form__button-group,
.ui-form__field--invalid .ui-form__button-group,
.ui-form__row--invalid .ui-form__avatar-preview,
.ui-form__field--invalid .ui-form__avatar-preview {
    border-color: var(--status-red-border, color-mix(in srgb, rgb(239, 92, 92) 70%, var(--shell-border)));
}

.ui-form__row--invalid .settings-select__trigger,
.ui-form__field--invalid .settings-select__trigger {
    border-color: var(--status-red-border, color-mix(in srgb, rgb(239, 92, 92) 70%, var(--shell-border)));
    background: var(--status-red-bg, color-mix(in srgb, rgb(239, 92, 92) 8%, var(--settings-control-bg)));
}

.ui-form__row--invalid .ui-form__rich-text,
.ui-form__field--invalid .ui-form__rich-text {
    border-color: var(--status-red-border, color-mix(in srgb, rgb(239, 92, 92) 70%, var(--shell-border)));
    background: var(--status-red-bg, color-mix(in srgb, rgb(239, 92, 92) 8%, var(--settings-input-bg, var(--settings-control-bg))));
}

@media (max-width: 720px) {
    .ui-form__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .ui-form__row--control-auto,
    .ui-form__row--control-compact,
    .ui-form__row--control-medium,
    .ui-form__row--control-wide,
    .ui-form__row--control-full {
        grid-template-columns: minmax(0, 1fr);
    }

    .ui-form__row--control-auto > :not(.ui-form__label):not(.ui-form__error),
    .ui-form__row--control-compact > :not(.ui-form__label):not(.ui-form__error),
    .ui-form__row--control-medium > :not(.ui-form__label):not(.ui-form__error),
    .ui-form__row--control-wide > :not(.ui-form__label):not(.ui-form__error),
    .ui-form__row--control-full > :not(.ui-form__label):not(.ui-form__error) {
        justify-self: stretch;
        width: 100%;
    }

    .ui-form__row > .ui-form__avatar-field {
        justify-self: start;
    }

    .ui-form__error {
        grid-column: 1;
        margin-top: -4px;
    }
}

.page-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 43.5px;
    margin-top: -0.25px;
}

.page-title-bar__leading {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
}

.page-title-bar__sidebar-toggle {
    display: none;
    flex: 0 0 auto;
}

.page-title-bar__title-slot {
    display: flex;
    align-items: center;
    min-width: 0;
    padding-left: 10px;
    padding-right: 4px;
    flex: 0 1 auto;
}

.page-title-bar__title-leading {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
    padding-left: 10px;
}

.page-title-bar__title-leading + .page-title-bar__title-slot {
    padding-left: 4px;
}

.page-title-bar__title {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 0.96875rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--shell-text-primary);
    white-space: nowrap;
}

.page-title-bar__inline-actions,
.page-title-bar__actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.page-title-bar__inline-actions {
    margin-left: 4px;
    gap: 4px;
}

.page-title-bar__actions {
    gap: var(--page-title-bar-actions-gap, 4px);
    margin-left: 12px;
}

.page-title-bar__inline-actions .ui-icon-button,
.page-title-bar__actions .ui-icon-button {
    color: var(--page-title-bar-action-color, lch(90.35% 1.15 272 / 1));
    background: transparent;
    box-shadow: none;
}

.page-title-bar__inline-actions .ui-icon-button .shell-icon,
.page-title-bar__actions .ui-icon-button .shell-icon {
    color: var(--page-title-bar-action-icon-color, lch(61.399% 1.15 272 / 1));
}

.page-title-bar__inline-actions .ui-icon-button:hover,
.page-title-bar__inline-actions .ui-icon-button:focus-visible,
.page-title-bar__actions .ui-icon-button:hover,
.page-title-bar__actions .ui-icon-button:focus-visible {
    color: var(--page-title-bar-action-hover-color, var(--shell-text-primary));
    background: var(--page-title-bar-action-hover-bg, var(--shell-bg-button, lch(10.691% 0.493 272 / 1)));
    box-shadow: none;
}

.page-title-bar__inline-actions .ui-icon-button:hover .shell-icon,
.page-title-bar__inline-actions .ui-icon-button:focus-visible .shell-icon,
.page-title-bar__actions .ui-icon-button:hover .shell-icon,
.page-title-bar__actions .ui-icon-button:focus-visible .shell-icon {
    color: var(--page-title-bar-action-icon-hover-color, lch(90.35% 1.15 272 / 1));
}

@media (width <= 1024px) {
    .page-title-bar__sidebar-toggle {
        display: grid;
    }

    .page-title-bar__title-slot {
        padding-left: 4px;
    }
}

.page-breadcrumbs {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    gap: 2px;
}

.page-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    height: 28px;
    color: var(--page-breadcrumbs-muted-color, var(--shell-text-secondary));
    text-decoration: none;
    border-radius: 6px;
}

.page-breadcrumbs__item--link {
    transition-property: color, background-color;
    transition-duration: 0.15s;
}

.page-breadcrumbs__item--link:hover,
.page-breadcrumbs__item--link:focus-visible {
    color: var(--page-breadcrumbs-current-color, var(--shell-text-primary));
}

.page-breadcrumbs__item--current {
    color: var(--page-breadcrumbs-current-color, var(--shell-text-primary));
}

.page-breadcrumbs__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: currentColor;
}

.page-breadcrumbs__text {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 0.96875rem;
    letter-spacing: 0;
}

.page-breadcrumbs__separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 10px;
    color: var(--page-breadcrumbs-muted-color, var(--shell-text-secondary));
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 0.96875rem;
    letter-spacing: 0;
}


.shell-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    z-index: 560;
    background: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.shell-sidebar--workspace {
    width: var(--shell-sidebar-width);
    --shell-nav-row-width: calc(var(--shell-sidebar-width) - 24px);
}

.shell-sidebar--settings {
    width: var(--settings-sidebar-width);
    --shell-nav-row-width: calc(var(--settings-sidebar-width) - 24px);
}

.shell-sidebar--settings .shell-sidebar__top {
    flex-basis: 52.5px;
}

@media (width <= 1024px) {
    .shell-sidebar {
        z-index: 760;
        width: min(var(--shell-sidebar-width), calc(100vw - 40px), 330px);
        max-width: min(calc(100vw - 40px), 330px);
        background: var(--shell-bg-sidebar);
        opacity: 0;
        transform: translateX(-100%);
        transition:
            transform 350ms cubic-bezier(0.32, 0.72, 0, 1),
            opacity 50ms ease-in-out;
        will-change: transform;
    }

    .shell-sidebar--workspace {
        --shell-nav-row-width: calc(min(var(--shell-sidebar-width), calc(100vw - 40px), 330px) - 24px);
    }

    .shell-sidebar--settings {
        width: min(var(--settings-sidebar-width), calc(100vw - 40px), 330px);
        --shell-nav-row-width: calc(min(var(--settings-sidebar-width), calc(100vw - 40px), 330px) - 24px);
    }

    .app-shell.app-shell--sidebar-overlay-open .shell-sidebar,
    .settings-shell.settings-shell--sidebar-overlay-open .shell-sidebar {
        z-index: 760;
        opacity: 1;
        transform: translateX(0);
    }

    .shell-sidebar__resize-handle {
        display: none;
    }
}

.shell-sidebar__top {
    flex: 0 0 52px;
    padding: 0 12px;
}

.shell-sidebar__top-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 44px;
    margin-top: 8px;
}

.shell-sidebar__top-row--settings {
    justify-content: flex-start;
    height: 44.5px;
}

.shell-workspace-menu-anchor {
    position: relative;
    min-width: 0;
    flex: 1 1 auto;
}

.shell-workspace-menu-anchor--open {
    z-index: 610;
}

.shell-sidebar__top-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
    margin-left: auto;
}

.shell-sidebar__footer {
    flex: 0 0 auto;
    width: 100%;
    padding: 10px 0 10px 10px;
    background: transparent;
}

.shell-sidebar__resize-handle {
    position: absolute;
    top: 14px;
    right: -5px;
    bottom: 40px;
    width: 7px;
    cursor: col-resize;
    z-index: 97;
}

.shell-sidebar__resize-handle::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2px;
    width: 2px;
    border-radius: 4px;
    background-color: var(--shell-sidebar-resize-guide);
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.25s;
    transition-delay: 0ms;
    pointer-events: none;
}

.shell-sidebar__resize-handle:hover::after,
.shell-sidebar__resize-handle[data-dragging="true"]::after {
    opacity: 1;
    transition-duration: 0s;
}

.shell-workspace-button {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
    height: 28px;
    padding: 0 7px;
    border-radius: 10px;
    color: var(--shell-text-tertiary);
    text-decoration: none;
    cursor: pointer;
    background: transparent;
}

.shell-workspace-button:hover {
    background-color: var(--shell-bg-hover, lch(4.52 0.45 272));
}

.shell-workspace-button__mark {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 8px;
    background: var(--shell-avatar-green);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    flex: 0 0 auto;
}

.shell-workspace-button__mark--image {
    display: block;
    object-fit: cover;
}

.shell-workspace-button__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--shell-text-tertiary);
    font-size: 0.875rem;
    font-weight: 550;
    line-height: 1.4375rem;
    letter-spacing: -0.1px;
    font-feature-settings: "calt";
    font-variation-settings: "opsz" 28;
    text-transform: none;
}

.shell-workspace-button__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 8px;
    height: 8px;
    margin-left: auto;
    color: var(--shell-text-tertiary);
    flex: 0 0 auto;
}

.shell-sidebar__scroll {
    flex: 1 1 auto;
    min-height: 0;
    margin: 7.5px 0 2px;
    padding: 0 12px 44px;
    overflow-y: auto;
    scroll-padding-bottom: 44px;
    border-radius: 8px;
    background: var(--shell-bg-scroll);
    scrollbar-width: none;
}

.shell-sidebar--settings .shell-sidebar__scroll {
    margin-top: 0;
    padding-top: 5px;
}

.shell-sidebar__scroll:hover,
.shell-sidebar__scroll:focus-within {
    scrollbar-width: thin;
}

.shell-sidebar__scroll::-webkit-scrollbar {
    width: 0;
}

.shell-sidebar__scroll:hover::-webkit-scrollbar,
.shell-sidebar__scroll:focus-within::-webkit-scrollbar {
    width: 8px;
}

.shell-sidebar__scroll::-webkit-scrollbar-thumb {
    background: transparent;
}

.shell-sidebar__scroll:hover::-webkit-scrollbar-thumb,
.shell-sidebar__scroll:focus-within::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--shell-border) 65%, transparent);
    border-radius: 999px;
}

.shell-nav-group {
    display: flex;
    flex-direction: column;
}

.shell-nav-group:first-child {
    margin-top: 1px;
}

.shell-nav-group--offset {
    margin-top: 16px;
}

.shell-nav-section {
    display: flex;
    flex-direction: column;
}

.shell-nav-section + .shell-nav-section {
    margin-top: 23.75px;
}

.shell-nav-section--top + .shell-nav-section {
    margin-top: 16px;
}

.shell-nav-section__header {
    display: flex;
    align-items: center;
    width: var(--shell-nav-row-width);
    height: 28px;
    padding-left: 5px;
    border-radius: 10px;
    transition: background-color 120ms ease;
}

.shell-nav-section__header:not(.shell-nav-section__header--static):hover,
.shell-nav-section__header:not(.shell-nav-section__header--static):focus-within {
    background: var(--shell-nav-hover-bg, var(--shell-bg-hover, lch(4.52% 0.45 272 / 1)));
}

.shell-nav-section__toggle {
    display: flex;
    align-items: center;
    gap: 0;
    width: calc(var(--shell-nav-row-width) - 5px);
    height: 28px;
    padding: 0 4px;
    color: var(--shell-text-primary);
    cursor: default;
}

.shell-nav-section__toggle--static {
    justify-content: flex-start;
}

.shell-nav-section__toggle .shell-nav-heading {
    margin: 0;
    align-self: center;
}

.shell-nav-section__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    flex: 0 0 auto;
    color: var(--shell-nav-text, var(--shell-text-secondary));
}

.shell-nav-section__toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--shell-nav-text, var(--shell-text-secondary));
    transform: translateY(0.5px);
}

.shell-nav-section__toggle-icon--expanded .shell-icon svg {
    transform: matrix(0, 1, -1, 0, 0, 0);
    transform-origin: 50% 50%;
}

.shell-nav-section__actions {
    display: flex;
    align-items: center;
    width: 28px;
    height: 28px;
    margin-left: auto;
}

.shell-nav-section__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0 2px;
    border-radius: 9999px;
    color: var(--shell-nav-text, var(--shell-text-secondary));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5rem;
    opacity: 0;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.15s ease, visibility 0s linear 0.15s;
    will-change: opacity;
}

.shell-nav-section__action .shell-icon svg {
    width: 14px;
    height: 14px;
}

.shell-nav-section__header:hover .shell-nav-section__action,
.shell-nav-section__header:focus-within .shell-nav-section__action {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.shell-nav-section__action:hover,
.shell-nav-section__action:focus-visible {
    color: var(--shell-text-tertiary);
}

.shell-nav-section__items {
    padding-top: 2.046875px;
}

.shell-nav-section__tree {
    margin: 0;
    padding: 0;
    list-style: none;
}

.shell-nav-heading {
    align-self: flex-start;
    margin: 0 0 8.796875px 9px;
    color: var(--shell-nav-text, var(--shell-text-secondary));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
}

.shell-nav-link {
    display: flex;
    align-items: center;
    width: var(--shell-nav-row-width);
    height: 28px;
    margin: 0 0 1px;
    border-radius: 8px;
    color: var(--shell-text-primary);
}

.shell-nav-link.active {
    background: var(--shell-nav-active-bg, var(--shell-bg-active));
}

.shell-nav-link:not(.active):hover {
    background: var(--shell-nav-hover-bg, var(--shell-bg-hover, lch(4.52 0.45 272)));
}

.shell-nav-link__inner {
    display: flex;
    align-items: center;
    width: 100%;
    height: 28px;
    padding: 0 9px 0 10px;
    border-radius: 8px;
    color: var(--shell-nav-text, var(--shell-text-secondary));
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: normal;
}

.shell-nav-link.active .shell-nav-link__inner {
    color: var(--shell-nav-active-text, var(--shell-text-primary));
}

.shell-nav-link:hover .shell-nav-link__inner {
    color: var(--shell-nav-hover-text, var(--shell-text-primary));
}

.shell-nav-link__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    flex: 0 0 auto;
}

.shell-nav-link__labelrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
    height: 15.5px;
}

.shell-nav-link__label,
.shell-nav-link__count {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.shell-nav-link__count {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 14px;
    height: 13px;
    padding: 0;
    border-radius: 4px;
    background: transparent;
    font-size: 0.6875rem;
    font-weight: 450;
    line-height: normal;
    transform: translateX(2px);
}

.shell-tree-section {
    display: flex;
    flex-direction: column;
    margin-top: 19px;
}

.shell-tree-section__header-wrapper {
    display: flex;
    align-items: center;
    width: var(--shell-nav-row-width);
    height: 28px;
}

.shell-tree-section__toggle {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    height: 28px;
    margin-left: 5px;
    padding: 0 4px;
    border-radius: 10px;
    color: var(--shell-text-primary);
    cursor: default;
    transition: background-color 120ms ease;
}

.shell-tree-section__toggle:hover,
.shell-tree-section__toggle:focus-visible {
    background: var(--shell-nav-hover-bg, var(--shell-bg-hover, lch(4.52 0.45 272)));
}

.shell-tree-section__heading {
    color: var(--shell-nav-text, var(--shell-text-secondary));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
}

.shell-tree-section__toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--shell-nav-text, var(--shell-text-secondary));
    transform: translateY(0.5px);
}

.shell-tree-section__toggle-icon--expanded .shell-icon svg {
    transform: matrix(0, 1, -1, 0, 0, 0);
    transform-origin: 50% 50%;
}

.shell-tree-section__actions {
    display: flex;
    align-items: center;
    width: 28px;
    height: 28px;
}

.shell-tree-section__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0 2px;
    border-radius: 9999px;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5rem;
    opacity: 0;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.15s ease, color 0.12s ease, visibility 0s linear 0.15s;
    will-change: opacity;
}

.shell-tree-section__action .shell-icon svg {
    width: 14px;
    height: 14px;
}

.shell-tree-section__header-wrapper:hover .shell-tree-section__action,
.shell-tree-section__header-wrapper:focus-within .shell-tree-section__action {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.shell-tree-section__action:hover,
.shell-tree-section__action:focus-visible {
    color: var(--shell-text-tertiary);
}

.shell-tree-section__list,
.shell-tree-node__children {
    margin: 0;
    padding: 0;
    list-style: none;
}

.shell-tree-collapse {
    overflow: hidden;
    transform-origin: top;
    transition: max-height 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.shell-tree-collapse--expanded {
    max-height: 480px;
    opacity: 1;
    transform: none;
    outline: none;
}

.shell-tree-collapse--collapsed {
    max-height: 0;
    opacity: 0;
    transform: translateY(-2px);
}

.shell-tree-collapse--opening {
    animation: shell-collapse-in 160ms ease;
}

.shell-nav-collapse {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.shell-nav-collapse > * {
    min-height: 0;
    overflow: hidden;
}

.shell-nav-collapse.shell-tree-collapse--expanded {
    grid-template-rows: 1fr;
    max-height: none;
}

.shell-nav-collapse.shell-tree-collapse--collapsed {
    grid-template-rows: 0fr;
    max-height: none;
}

.shell-nav-collapse.shell-tree-collapse--opening {
    animation: shell-nav-collapse-in 160ms ease;
}

@keyframes shell-collapse-in {
    from {
        max-height: 0;
        opacity: 0;
        transform: translateY(-2px);
    }

    to {
        max-height: 480px;
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shell-nav-collapse-in {
    from {
        grid-template-rows: 0fr;
        opacity: 0;
        transform: translateY(-2px);
    }

    to {
        grid-template-rows: 1fr;
        opacity: 1;
        transform: translateY(0);
    }
}

.shell-tree-section__list {
    padding-top: 2.046875px;
}

.shell-tree-node {
    display: block;
}

.shell-tree-node__children {
    position: relative;
}

.shell-tree-node__children--connected::after {
    content: "";
    position: absolute;
    top: 1px;
    bottom: 1px;
    left: 31.5px;
    width: 1px;
    border-radius: 0.5px;
    background: var(--shell-border, lch(12.62% 1.08 272 / 1));
    pointer-events: none;
}

.shell-tree-node__row {
    position: relative;
    display: flex;
    align-items: center;
    width: var(--shell-nav-row-width);
    height: 28px;
    margin: 0 0 1px;
    border-radius: 8px;
}

.shell-tree-node__row > * {
    position: relative;
    z-index: 1;
}

.shell-tree-node__row--with-status::before {
    content: "";
    position: absolute;
    inset: 0 0 0 var(--shell-tree-inset);
    border-radius: 8px;
    pointer-events: none;
}

.shell-tree-node__row--with-actions:hover,
.shell-tree-node__row--with-actions:focus-within {
    background: var(--shell-nav-hover-bg, var(--shell-bg-hover, lch(4.52 0.45 272)));
}

.shell-tree-node__row--with-status:not(:has(.shell-tree-node__link.active)):not(:has(.shell-tree-node__compound-link.active)):hover,
.shell-tree-node__row--with-status:not(:has(.shell-tree-node__link.active)):not(:has(.shell-tree-node__compound-link.active)):focus-within {
    background: transparent;
}

.shell-tree-node__row--with-status:not(:has(.shell-tree-node__link.active)):not(:has(.shell-tree-node__compound-link.active)):hover::before,
.shell-tree-node__row--with-status:not(:has(.shell-tree-node__link.active)):not(:has(.shell-tree-node__compound-link.active)):focus-within::before {
    background: var(--shell-nav-hover-bg, var(--shell-bg-hover, lch(4.52 0.45 272)));
}

.shell-tree-node__row--with-status:has(.shell-tree-node__link.active),
.shell-tree-node__row--with-status:has(.shell-tree-node__compound-link.active) {
    background: transparent;
}

.shell-tree-node__row--with-status:has(.shell-tree-node__link.active)::before,
.shell-tree-node__row--with-status:has(.shell-tree-node__compound-link.active)::before {
    background: var(--shell-nav-active-bg, var(--shell-bg-active));
}

.shell-tree-node__main {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1 1 auto;
    min-width: 0;
    height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    color: var(--shell-nav-text, var(--shell-text-secondary));
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: normal;
}

.shell-tree-node__main--branch {
    padding-left: 9px;
}

.shell-tree-node__main--indented {
    width: calc(100% - var(--shell-tree-inset));
    margin-left: var(--shell-tree-inset);
    padding-left: 6px;
}

.shell-tree-node__compound {
    padding: 0;
    overflow: hidden;
}

.shell-tree-node__compound.shell-tree-node__main--branch,
.shell-tree-node__compound.shell-tree-node__main--indented {
    padding-left: 0;
}

.shell-tree-node__compound-link {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    height: 28px;
    padding: 0 0 0 9px;
    color: inherit;
}

.shell-tree-node__main--indented .shell-tree-node__compound-link {
    padding-left: 6px;
}

.shell-tree-node__compound-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 16px;
    width: 16px;
    height: 28px;
    margin-left: 4px;
    color: var(--shell-nav-text, var(--shell-text-secondary));
}

.shell-tree-node__compound:has(.shell-tree-node__compound-link.active) {
    background: var(--shell-nav-active-bg, var(--shell-bg-active));
    color: var(--shell-nav-active-text, var(--shell-text-primary));
}

.shell-tree-node__compound:has(.shell-tree-node__compound-link.active) .shell-tree-node__compound-link,
.shell-tree-node__compound:has(.shell-tree-node__compound-link.active) .shell-tree-node__compound-toggle {
    background: transparent;
    color: inherit;
}

.shell-tree-node__compound:hover,
.shell-tree-node__compound:focus-within {
    background: var(--shell-nav-hover-bg, var(--shell-bg-hover, lch(4.52 0.45 272)));
    color: var(--shell-nav-hover-text, var(--shell-text-primary));
}

.shell-tree-node__compound:hover .shell-tree-node__compound-link.active,
.shell-tree-node__compound:hover .shell-tree-node__compound-link.active + .shell-tree-node__compound-toggle,
.shell-tree-node__compound:focus-within .shell-tree-node__compound-link.active,
.shell-tree-node__compound:focus-within .shell-tree-node__compound-link.active + .shell-tree-node__compound-toggle {
    background: transparent;
}

.shell-tree-node__link.active {
    background: var(--shell-nav-active-bg, var(--shell-bg-active));
    color: var(--shell-nav-active-text, var(--shell-text-primary));
}

.shell-tree-node__link:not(.active):hover,
.shell-tree-node__toggle:hover,
.shell-tree-node__toggle:focus-visible {
    background: var(--shell-nav-hover-bg, var(--shell-bg-hover, lch(4.52 0.45 272)));
    color: var(--shell-nav-hover-text, var(--shell-text-primary));
}

.shell-tree-node__row--with-actions .shell-tree-node__toggle:hover,
.shell-tree-node__row--with-actions .shell-tree-node__toggle:focus-visible {
    background: transparent;
}

.shell-tree-node__row--with-status .shell-tree-node__link.active,
.shell-tree-node__row--with-status .shell-tree-node__compound:has(.shell-tree-node__compound-link.active),
.shell-tree-node__row--with-status:hover .shell-tree-node__link:not(.active),
.shell-tree-node__row--with-status:focus-within .shell-tree-node__link:not(.active),
.shell-tree-node__row--with-status:hover .shell-tree-node__toggle,
.shell-tree-node__row--with-status:focus-within .shell-tree-node__toggle,
.shell-tree-node__row--with-status:hover .shell-tree-node__compound,
.shell-tree-node__row--with-status:focus-within .shell-tree-node__compound {
    background: transparent;
}

.shell-tree-node__row--with-actions:hover .shell-tree-node__main,
.shell-tree-node__row--with-actions:focus-within .shell-tree-node__main,
.shell-tree-node__row--with-status:hover .shell-tree-node__main,
.shell-tree-node__row--with-status:focus-within .shell-tree-node__main {
    color: var(--shell-nav-hover-text, var(--shell-text-primary));
}

.shell-tree-node__content {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0;
}

.shell-tree-node__content--branch {
    gap: 0;
}

.shell-tree-node__content--icon {
    gap: 6px;
}

.shell-tree-node__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--shell-nav-text, var(--shell-text-secondary));
}

.shell-tree-node__icon--branch {
    width: 14px;
    height: 14px;
    margin-right: 7px;
}

.shell-tree-node__icon--child {
    width: 14px;
    height: 16px;
}

.shell-tree-node__icon--child .shell-icon {
    width: 14px;
    height: 16px;
}

.shell-tree-node__link.active .shell-tree-node__icon,
.shell-tree-node__compound:has(.shell-tree-node__compound-link.active) .shell-tree-node__icon,
.shell-tree-node__link:hover .shell-tree-node__icon,
.shell-tree-node__toggle:hover .shell-tree-node__icon,
.shell-tree-node__toggle:focus-visible .shell-tree-node__icon,
.shell-tree-node__row--with-actions:hover .shell-tree-node__icon,
.shell-tree-node__row--with-actions:focus-within .shell-tree-node__icon,
.shell-tree-node__row--with-status:hover .shell-tree-node__icon,
.shell-tree-node__row--with-status:focus-within .shell-tree-node__icon {
    color: var(--shell-nav-hover-text, var(--shell-text-primary));
}

.shell-tree-node__label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.shell-tree-node__disclosure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--shell-nav-text, var(--shell-text-secondary));
    flex: 0 0 auto;
}

.shell-tree-node__disclosure--inline {
    position: relative;
    top: 0.5px;
    margin-left: 4px;
}

.shell-tree-node__disclosure--expanded .shell-icon svg {
    transform: matrix(0, 1, -1, 0, 0, 0);
    transform-origin: 50% 50%;
}

.shell-tree-node__actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 0;
    width: 0;
    height: 24px;
    margin-right: 0;
    opacity: 0;
    overflow: hidden;
    transition-property: opacity, width, margin-right;
    transition-duration: 0.1s;
    transition-timing-function: ease;
    will-change: opacity, width;
}

.shell-tree-node__row--with-actions:hover .shell-tree-node__actions,
.shell-tree-node__row--with-actions:focus .shell-tree-node__actions,
.shell-tree-node__row--with-actions:focus-within .shell-tree-node__actions,
.shell-tree-node__actions:focus-within {
    flex: 0 0 26px;
    width: 26px;
    opacity: 1;
}

.shell-tree-node__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 8px;
    color: var(--shell-text-secondary);
    transition: color 0.12s ease;
}

.shell-tree-node__action .shell-icon svg {
    width: 12px;
    height: 16px;
    max-width: 12px;
}

.shell-tree-node__action:hover,
.shell-tree-node__action:focus-visible {
    color: var(--shell-text-tertiary);
}

.shell-tree-node__status {
    display: inline-flex;
    width: 18px;
    height: 24px;
    flex: 0 0 18px;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    color: var(--shell-tree-status-color, var(--shell-text-secondary));
}

.shell-tree-node__status--busy::before {
    width: 12px;
    height: 12px;
    border: 2px solid color-mix(in srgb, currentColor 24%, transparent);
    border-top-color: currentColor;
    border-radius: 9999px;
    animation: shell-tree-status-spin 0.72s linear infinite;
    content: "";
}

.shell-tree-node__status--unread::before {
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: var(--shell-tree-status-color, #ef4444);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--shell-tree-status-color, #ef4444) 35%, transparent);
    animation: shell-tree-status-pulse 1.45s ease-in-out infinite;
    content: "";
}

@keyframes shell-tree-status-spin {
    to {
        transform: rotate(1turn);
    }
}

@keyframes shell-tree-status-pulse {
    0%,
    100% {
        opacity: 0.68;
        transform: scale(0.92);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--shell-tree-status-color, #ef4444) 34%, transparent);
    }

    45% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 0 5px color-mix(in srgb, var(--shell-tree-status-color, #ef4444) 0%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .shell-tree-node__status--busy::before,
    .shell-tree-node__status--unread::before {
        animation: none;
    }
}

.shell-help-menu {
    position: relative;
    margin: 0;
    display: flex;
    width: 24px;
    height: 24px;
    font-size: 0;
    line-height: 0;
}

.shell-help-menu__backdrop {
    position: fixed;
    inset: 0;
    z-index: 734;
    cursor: default;
}

.shell-help-menu__trigger {
    position: relative;
    z-index: 736;
    display: grid;
    place-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0 2px;
    border: 0.5px solid transparent;
    border-radius: 50%;
    color: var(--shell-text-tertiary);
    background: transparent;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    transition: border 0.15s, background-color 0.15s, color 0.15s, opacity 0.15s;
}

.shell-help-menu__trigger .shell-icon {
    color: var(--shell-text-secondary);
}

.shell-help-menu__trigger .shell-icon svg {
    transition-property: fill;
    transition-duration: .15s;
}

.shell-help-menu__trigger:hover,
.shell-help-menu__trigger:focus-visible,
.shell-help-menu__trigger:active {
    background: var(--shell-bg-hover, lch(10.691% 0.493 272 / 1));
    color: var(--shell-text-primary);
    transition-duration: 0s;
}

.shell-help-menu__trigger:hover .shell-icon,
.shell-help-menu__trigger:focus-visible .shell-icon,
.shell-help-menu__trigger:active .shell-icon {
    color: var(--shell-text-primary);
}

.shell-help-menu__trigger:hover .shell-icon svg,
.shell-help-menu__trigger:focus-visible .shell-icon svg,
.shell-help-menu__trigger:active .shell-icon svg {
    transition-duration: 0s;
}

.shell-help-menu__trigger--active {
    background: transparent;
    color: lch(90.077 1 272);
}

.shell-help-menu__trigger--active .shell-icon {
    color: lch(60.307% 1 272 / 1);
}

.shell-help-menu > .shell-dropdown-menu {
    position: fixed;
    top: auto;
    left: 12px;
    bottom: 38px;
    z-index: 735;
    width: 223px;
    transform-origin: -2px 399px;
    animation: shell-help-menu-in 120ms cubic-bezier(0.2, 0.82, 0.24, 1) forwards;
}

.shell-help-menu > .shell-dropdown-menu .shell-dropdown-menu__item {
    width: 222px;
}

@keyframes shell-help-menu-in {
    from {
        opacity: 0;
        transform: translateY(4px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.app-modal-root {
    position: relative;
    z-index: 680;
}

.app-modal-layer {
    position: fixed;
    inset: 0;
    z-index: 680;
}

.app-modal-dialog {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
    padding: 122px 12px 122px;
    pointer-events: none;
    transition: padding var(--app-modal-resize-duration) var(--app-modal-resize-ease);
}

.app-modal-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--app-modal-overlay);
    opacity: var(--app-modal-overlay-opacity);
    cursor: default;
}

.app-modal-shell {
    position: relative;
    width: 100%;
    max-width: var(--app-modal-current-width, 750px);
    margin: 0;
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 22px;
    background: var(--shell-menu-bg);
    box-shadow: var(--app-modal-shadow);
    overflow: visible;
    transform-origin: top center;
    pointer-events: auto;
    transition:
        max-width var(--app-modal-resize-duration) var(--app-modal-resize-ease),
        border-radius var(--app-modal-resize-duration) var(--app-modal-resize-ease);
    will-change: max-width;
}

.app-modal-shell__window-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 6px;
    z-index: 2;
}

.app-modal-shell--selection-sheet {
    overflow: hidden;
}

.app-modal-shell__window-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    color: var(--shell-menu-hint);
    transition: background-color 120ms ease, color 120ms ease;
}

.app-modal-shell__window-button:hover,
.app-modal-shell__window-button:focus-visible {
    background: var(--shell-menu-item-hover);
    color: var(--shell-menu-text);
}

.app-modal-layer--entering .app-modal-backdrop {
    animation: app-modal-overlay-enter var(--app-modal-animation) forwards;
}

.app-modal-layer--open .app-modal-backdrop {
    opacity: var(--app-modal-overlay-opacity);
}

.app-modal-layer--closing .app-modal-backdrop {
    animation: app-modal-overlay-exit var(--app-modal-animation) forwards;
}

.app-modal-layer--entering .app-modal-shell {
    animation: app-modal-panel-enter var(--app-modal-animation) forwards;
}

.app-modal-layer--open .app-modal-shell {
    opacity: 1;
    transform: scale(1);
}

.app-modal-layer--closing .app-modal-shell {
    animation: app-modal-panel-exit var(--app-modal-animation) forwards;
}

@keyframes app-modal-overlay-enter {
    from {
        opacity: 0;
    }

    to {
        opacity: var(--app-modal-overlay-opacity);
    }
}

@keyframes app-modal-overlay-exit {
    from {
        opacity: var(--app-modal-overlay-opacity);
    }

    to {
        opacity: 0;
    }
}

@keyframes app-modal-panel-enter {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes app-modal-panel-exit {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.95);
    }
}

.modal-dialog-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px;
}

.modal-dialog-content__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 44px;
}

.modal-dialog-content__title {
    margin: 0;
    color: var(--shell-menu-text-strong);
    font-size: 0.9375rem;
    font-weight: 550;
    letter-spacing: 0;
    line-height: 1.25rem;
}

.modal-dialog-content__message {
    margin: 0;
    color: var(--shell-menu-hint);
    font-size: 0.8125rem;
    font-weight: 450;
    letter-spacing: 0;
    line-height: 1.1875rem;
}

.modal-dialog-input-field {
    padding: 0;
}

.modal-dialog-input-field__input {
    display: block;
    width: 100%;
    height: 32px;
    padding: 6px 10px;
    border: 0.5px solid var(--settings-control-border, lch(17.48% 1.38 272 / 1));
    border-radius: 8px;
    background: var(--shell-bg-button, lch(10.691% 0.493 272 / 1));
    color: var(--shell-menu-text-strong);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: normal;
    outline: none;
    box-sizing: border-box;
    box-shadow: var(--shell-shadow, lch(0 0 0 / 0.04) 0 4px 4px -1px, lch(0 0 0 / 0.08) 0 1px 1px 0);
    transition:
        background-color 120ms ease,
        border-color 120ms ease,
        box-shadow 120ms ease;
}

.modal-dialog-input-field__input::placeholder {
    color: var(--shell-menu-hint);
}

.modal-dialog-input-field__input:focus {
    border-color: var(--settings-control-hover-border, lch(26.7% 1.94 272 / 1));
    background: var(--shell-bg-button, lch(10.691% 0.493 272 / 1));
}

.modal-dialog-content__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.modal-dialog-content__action {
    min-width: 72px;
}

.modal-dialog-content__actions .ui-button--control {
    height: 28px;
    padding: 0 10px;
    border-color: transparent;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    box-shadow: none;
}

.app-modal-shell--date-picker {
    overflow: hidden;
    border-radius: 14px;
}

.app-modal-shell--custom-date-filter {
    overflow: hidden;
    border-radius: 14px;
}

.app-modal-shell--color-picker {
    overflow: hidden;
    border-radius: 14px;
}

.app-modal-shell--geo-picker {
    overflow: hidden;
    border-radius: 14px;
}

.modal-date-picker {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.modal-date-picker--range {
    padding-top: 18px;
}

.modal-date-picker .modal-dialog-content__body {
    padding-right: 36px;
}

.modal-date-picker__range-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    margin-top: 16px;
}

.modal-date-picker__range-pill {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    height: 30px;
    padding: 0 10px;
    overflow: hidden;
    border: 0.5px solid var(--settings-control-border);
    border-radius: 8px;
    background: var(--settings-control-bg);
    color: var(--shell-menu-text-strong);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.0625rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-date-picker__range-pill--empty {
    color: var(--shell-menu-hint);
}

.modal-date-picker__range-divider {
    width: 8px;
    height: 0.5px;
    background: var(--shell-menu-hint);
}

.modal-date-picker__panel {
    width: 100%;
    margin-top: 18px;
}

.modal-date-picker__header {
    display: grid;
    grid-template-columns: 28px 1fr 28px;
    gap: 4px;
    align-items: center;
    height: 30px;
    margin-bottom: 4px;
}

.modal-date-picker__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--shell-menu-hint);
    font: inherit;
    cursor: default;
}

.modal-date-picker__nav-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    align-items: center;
    justify-content: center;
}

.modal-date-picker__nav-icon--previous {
    transform: rotate(180deg);
}

.modal-date-picker__nav:hover,
.modal-date-picker__nav:focus-visible {
    background: var(--shell-menu-item-hover);
    color: var(--shell-menu-text-strong);
    outline: none;
}

.modal-date-picker__month {
    color: var(--shell-menu-text-strong);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.125rem;
    text-align: center;
}

.modal-date-picker__weekdays,
.modal-date-picker__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.modal-date-picker__weekdays {
    height: 24px;
    align-items: center;
    color: var(--shell-menu-hint);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 0.875rem;
    text-align: center;
}

.modal-date-picker__grid {
    gap: 2px;
}

.modal-date-picker__day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--shell-menu-text);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
    cursor: default;
}

.modal-date-picker__day:hover,
.modal-date-picker__day:focus-visible {
    background: var(--shell-menu-item-hover);
    color: var(--shell-menu-text-strong);
    outline: none;
}

.modal-date-picker__day--muted {
    color: var(--shell-menu-hint);
}

.modal-date-picker__day--today {
    color: var(--shell-accent, #5e6ad2);
}

.modal-date-picker__day--selected,
.modal-date-picker__day--selected:hover,
.modal-date-picker__day--selected:focus-visible {
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 22%, transparent);
    color: var(--shell-menu-text-strong);
}

.modal-date-picker__day--in-range {
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 12%, transparent);
    color: var(--shell-menu-text-strong);
}

.modal-date-picker__day--range-start,
.modal-date-picker__day--range-end,
.modal-date-picker__day--range-start:hover,
.modal-date-picker__day--range-end:hover,
.modal-date-picker__day--range-start:focus-visible,
.modal-date-picker__day--range-end:focus-visible {
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 28%, transparent);
    color: var(--shell-menu-text-strong);
}

.modal-date-picker__day--disabled,
.modal-date-picker__day:disabled {
    opacity: 0.32;
    pointer-events: none;
}

.modal-date-picker__actions {
    margin-top: 18px;
}

.custom-date-filter {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 236px);
    padding: 32px;
    overflow: hidden;
}

.custom-date-filter__heading {
    display: flex;
    align-items: center;
    min-height: 28px;
    gap: 8px;
    margin-bottom: 12px;
}

.custom-date-filter__title {
    margin: 0;
    color: var(--shell-menu-text-strong);
    font-size: 0.9375rem;
    font-weight: 550;
    letter-spacing: 0;
    line-height: 1.4375rem;
}

.custom-date-filter__operator-tabs,
.custom-date-filter__tabs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.custom-date-filter__operator-tab,
.custom-date-filter__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 4px 12px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: var(--shell-bg-button, lch(11.849% 0.943 272 / 1));
    color: var(--shell-menu-hint);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: normal;
    cursor: default;
}

.custom-date-filter__operator-tab:hover,
.custom-date-filter__operator-tab:focus-visible,
.custom-date-filter__tab:hover,
.custom-date-filter__tab:focus-visible {
    background: var(--shell-menu-item-hover);
    color: var(--shell-menu-text-strong);
    outline: none;
}

.custom-date-filter__operator-tab--active,
.custom-date-filter__operator-tab--active:hover,
.custom-date-filter__operator-tab--active:focus-visible,
.custom-date-filter__tab--active,
.custom-date-filter__tab--active:hover,
.custom-date-filter__tab--active:focus-visible {
    background: var(--shell-menu-item-active, lch(17.634% 1.329 272 / 1));
    color: var(--shell-menu-text-strong);
}

.custom-date-filter__separator {
    flex: 0 0 auto;
    height: 0.5px;
    margin: 12px -32px 0;
    background: var(--shell-menu-border);
}

.custom-date-filter__separator--bottom {
    margin-top: 0;
}

.custom-date-filter__viewport {
    height: 298px;
    min-height: 0;
    overflow: auto;
    padding: 16px 0;
    scrollbar-width: none;
}

.custom-date-filter__viewport::-webkit-scrollbar {
    display: none;
}

.custom-date-filter__period-year {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 8px;
    min-height: 62px;
    padding: 8px 4px 0;
    box-sizing: border-box;
}

.custom-date-filter__year-label {
    color: var(--shell-menu-hint);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5rem;
}

.custom-date-filter__period-grid {
    display: grid;
    gap: 8px;
}

.custom-date-filter__period-grid--month {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.custom-date-filter__period-grid--quarter {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.custom-date-filter__period-grid--half-year {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.custom-date-filter__period,
.custom-date-filter__year-list .custom-date-filter__period {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 8px;
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-menu-text);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: normal;
    cursor: default;
}

.custom-date-filter__period:hover,
.custom-date-filter__period:focus-visible {
    background: var(--shell-menu-item-hover);
    color: var(--shell-menu-text-strong);
    outline: none;
}

.custom-date-filter__period--selected,
.custom-date-filter__period--selected:hover,
.custom-date-filter__period--selected:focus-visible {
    border-color: color-mix(in srgb, var(--shell-accent, #5e6ad2) 42%, var(--shell-menu-border));
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 20%, transparent);
    color: var(--shell-menu-text-strong);
}

.custom-date-filter__year-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 4px;
}

.custom-date-filter__year-list .custom-date-filter__period {
    width: 100%;
}

.custom-date-filter__range-summary {
    display: inline-grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    width: 100%;
    margin-bottom: 14px;
    color: var(--shell-menu-text);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.125rem;
}

.custom-date-filter__range-summary span:not(.custom-date-filter__range-arrow) {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    height: 28px;
    padding: 0 10px;
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 8px;
    background: var(--settings-control-bg, lch(9.92% 0.75 272 / 1));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-date-filter__range-arrow {
    color: var(--shell-menu-hint);
}

.custom-date-filter__day-calendars {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.custom-date-filter__month-title {
    margin: 0 0 8px;
    color: var(--shell-menu-text-strong);
    font-size: 0.75rem;
    font-weight: 550;
    line-height: 1.125rem;
    text-align: center;
}

.custom-date-filter__weekdays,
.custom-date-filter__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

.custom-date-filter__weekdays {
    margin-bottom: 8px;
    color: var(--shell-menu-hint);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1rem;
    text-align: center;
}

.custom-date-filter__day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--shell-menu-text);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
    cursor: default;
}

.custom-date-filter__day:hover,
.custom-date-filter__day:focus-visible {
    background: var(--shell-menu-item-hover);
    color: var(--shell-menu-text-strong);
    outline: none;
}

.custom-date-filter__day--empty {
    pointer-events: none;
}

.custom-date-filter__day--today {
    color: var(--shell-accent, #5e6ad2);
}

.custom-date-filter__day--selected,
.custom-date-filter__day--selected:hover,
.custom-date-filter__day--selected:focus-visible,
.custom-date-filter__day--range-start,
.custom-date-filter__day--range-start:hover,
.custom-date-filter__day--range-start:focus-visible,
.custom-date-filter__day--range-end,
.custom-date-filter__day--range-end:hover,
.custom-date-filter__day--range-end:focus-visible {
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 24%, transparent);
    color: var(--shell-menu-text-strong);
}

.custom-date-filter__day--in-range {
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 12%, transparent);
    color: var(--shell-menu-text-strong);
}

.custom-date-filter__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

.custom-date-filter__action {
    min-width: 61px;
}

.modal-color-picker {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.modal-color-picker .modal-dialog-content__body {
    padding-right: 36px;
}

.modal-color-picker__picker {
    margin-top: 18px;
}

.modal-color-picker__row {
    display: flex;
    align-items: center;
    width: 100%;
    height: 24px;
    margin-bottom: 16px;
}

.modal-color-picker__current,
.modal-color-picker__default {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: default;
}

.modal-color-picker__current {
    flex: 0 0 auto;
    border-radius: 50%;
    box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--shell-menu-text-strong) 20%, transparent);
}

.modal-color-picker__hex {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
    height: 18px;
    margin-left: 10px;
    color: var(--shell-menu-text-strong);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.125rem;
}

.modal-color-picker__hex span {
    color: var(--shell-menu-text-strong);
}

.modal-color-picker__hex input {
    min-width: 0;
    flex: 1 1 auto;
    height: 18px;
    margin: 0;
    padding: 0 6px;
    border: 0;
    background: transparent;
    color: var(--shell-menu-hint);
    font-family: inherit;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    outline: none;
}

.modal-color-picker__default {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 16px;
    border-radius: 4px;
}

.modal-color-picker__default span {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, transparent calc(50% - 1px), var(--shell-menu-hint) calc(50% - 1px), var(--shell-menu-hint) calc(50% + 1px), transparent calc(50% + 1px)), radial-gradient(circle at center, transparent 51%, var(--shell-menu-hint) 52%, var(--shell-menu-hint) 58%, transparent 59%);
}

.modal-color-picker__default:hover,
.modal-color-picker__default:focus-visible {
    background: var(--shell-menu-item-hover);
    outline: none;
}

.modal-color-picker__body {
    display: flex;
    width: 100%;
    height: 132px;
}

.modal-color-picker__plane {
    position: relative;
    display: block;
    flex: 1 1 auto;
    height: 132px;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 2px;
    background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, var(--color-picker-color) 100%);
    cursor: crosshair;
}

.modal-color-picker__plane-thumb {
    position: absolute;
    left: var(--color-picker-x, 52%);
    top: var(--color-picker-y, 18%);
    width: 16px;
    height: 16px;
    border: 1px solid rgb(255, 255, 255);
    border-radius: 10px;
    background: var(--color-picker-selected, color(display-p3 0.378249 0.822859 0.486083));
    box-shadow: rgba(0, 0, 0, 0.5) 0 0 4px 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.modal-color-picker__hue {
    position: relative;
    display: block;
    flex: 0 0 6px;
    width: 6px;
    height: 132px;
    margin-left: 16px;
    padding: 0;
    border: 0;
    border-radius: 1px;
    background: linear-gradient(to bottom, #f00 0%, #ff0 16.67%, #0f0 33.33%, #0ff 50%, #00f 66.67%, #f0f 83.33%, #f00 100%);
    cursor: default;
}

.modal-color-picker__hue-thumb {
    position: absolute;
    left: 50%;
    top: var(--color-picker-hue-y, 39%);
    width: 12px;
    height: 4px;
    border: 0.5px solid var(--settings-select-panel-border);
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: rgba(0, 0, 0, 0.5) 0 1px 2px 0;
    transform: translateX(-50%);
    pointer-events: none;
}

.modal-color-picker__actions {
    margin-top: 18px;
}

.modal-geo-picker {
    display: flex;
    min-height: 560px;
    flex-direction: column;
    padding: 20px;
}

.modal-geo-picker .modal-dialog-content__body {
    padding-right: 72px;
}

.modal-geo-picker__search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    margin-top: 18px;
    padding: 0 10px;
    border: 0.5px solid var(--settings-control-border);
    border-radius: 8px;
    background: var(--settings-control-bg);
    color: var(--shell-menu-hint);
}

.modal-geo-picker__search:focus-within {
    border-color: var(--settings-control-hover-border);
}

.modal-geo-picker__search-input {
    min-width: 0;
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    color: var(--shell-menu-text-strong);
    font-family: inherit;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    outline: none;
}

.modal-geo-picker__search-input::placeholder {
    color: var(--shell-menu-hint);
}

.modal-geo-picker__map {
    position: relative;
    min-height: 360px;
    flex: 1 1 auto;
    margin-top: 12px;
    overflow: hidden;
    border: 0.5px solid var(--settings-control-border);
    border-radius: 10px;
    background: var(--settings-control-bg);
}

.modal-geo-picker__status {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--shell-menu-hint);
    font-size: 0.8125rem;
    line-height: 1.125rem;
}

.modal-geo-picker__summary {
    display: grid;
    gap: 2px;
    min-height: 58px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 0.5px solid var(--settings-control-border);
    border-radius: 8px;
    background: var(--settings-control-bg);
    color: var(--shell-menu-hint);
    font-size: 0.75rem;
    line-height: 1rem;
}

.modal-geo-picker__summary-label {
    color: var(--shell-menu-hint);
    font-weight: 450;
}

.modal-geo-picker__summary strong {
    min-width: 0;
    overflow: hidden;
    color: var(--shell-menu-text-strong);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-geo-picker__missing {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 180px;
    margin-top: 18px;
    padding: 18px;
    border: 0.5px solid var(--settings-control-border);
    border-radius: 10px;
    background: var(--settings-control-bg);
    color: var(--shell-menu-text-strong);
    font-size: 0.8125rem;
    line-height: 1.125rem;
}

.modal-geo-picker__missing-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--status-red-text, rgb(239, 92, 92)) 16%, transparent);
    color: var(--status-red-text, rgb(239, 92, 92));
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.125rem;
}

.modal-geo-picker__actions {
    margin-top: 18px;
}

.modal-dialog-content__actions .ui-button--control:hover,
.modal-dialog-content__actions .ui-button--control:focus-visible {
    border-color: transparent;
    background: var(--shell-menu-item-hover, lch(15.32% 0.75 272 / 1));
    color: var(--shell-menu-text-strong, lch(100% 0 272 / 1));
}

.modal-dialog-content__actions .ui-button--primary.ui-button--control {
    border-color: transparent;
    background: lch(47.918% 59.303 288.421 / 1);
    color: lch(100% 5 288.421 / 1);
}

.modal-dialog-content__actions .ui-button--primary.ui-button--control:hover,
.modal-dialog-content__actions .ui-button--primary.ui-button--control:focus-visible {
    border-color: transparent;
    background: lch(52.5% 61 288.421 / 1);
    color: lch(100% 5 288.421 / 1);
}

.modal-dialog-content__actions .ui-button--danger.ui-button--control {
    border-color: transparent;
    background: lch(48% 54 31 / 1);
    color: lch(100% 4 31 / 1);
}

.modal-dialog-content__actions .ui-button--danger.ui-button--control:hover,
.modal-dialog-content__actions .ui-button--danger.ui-button--control:focus-visible {
    border-color: transparent;
    background: lch(52% 58 31 / 1);
    color: lch(100% 4 31 / 1);
}

.command-palette-shortcut-host {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0;
}

.command-palette-root {
    position: fixed;
    inset: 0;
    z-index: 780;
    pointer-events: none;
}

.command-palette-layer {
    position: fixed;
    inset: 0;
    pointer-events: auto;
}

.command-palette-backdrop {
    position: absolute;
    inset: 0;
    background: transparent;
    cursor: default;
}

.command-palette-panel {
    --command-palette-bg: var(--shell-menu-bg, lch(9.92% 0.75 272 / 1));
    --command-palette-border: var(--shell-menu-border, var(--shell-border, lch(22.88% 1.83 272 / 1)));
    --command-palette-text: var(--shell-menu-text, var(--shell-text-primary, lch(90.895% 1.375 272 / 1)));
    --command-palette-text-strong: var(--shell-menu-text-strong, var(--shell-text-primary, lch(100% 0 272 / 1)));
    --command-palette-muted: var(--shell-menu-hint, var(--shell-text-secondary, lch(63.582% 1.375 272 / 1)));
    --command-palette-hover-bg: var(--shell-menu-item-hover, var(--shell-bg-hover, lch(15.32% 0.75 272 / 1)));
    --command-palette-accent: var(--shell-accent, lch(47.918% 59.303 288.421 / 1));
    --command-palette-shadow: var(--shell-menu-shadow, lch(0 0 0 / 0.1) 0 4px 40px 0, lch(0 0 0 / 0.125) 0 3px 20px 0, lch(0 0 0 / 0.125) 0 3px 12px 0, lch(0 0 0 / 0.125) 0 2px 8px 0, lch(0 0 0 / 0.125) 0 1px 1px 0);

    position: fixed;
    top: 122px;
    left: 50%;
    display: flex;
    flex-direction: column;
    width: min(720px, calc(100vw - 32px));
    height: min(450px, calc(100vh - 32px));
    border: 0.5px solid var(--command-palette-border);
    border-radius: 12px;
    background: var(--command-palette-bg);
    box-shadow: var(--command-palette-shadow);
    color: var(--command-palette-text);
    overflow: clip;
    transform: translateX(-50%);
    transform-origin: top center;
    will-change: transform, opacity;
}

.command-palette-panel--entering {
    animation: command-palette-panel-enter 180ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.command-palette-panel--closing {
    animation: command-palette-panel-exit 140ms ease both;
}

@keyframes command-palette-panel-enter {
    from {
        opacity: 0;
        transform: translateX(-50%) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }
}

@keyframes command-palette-panel-exit {
    from {
        opacity: 1;
        transform: translateX(-50%) scale(1);
    }

    to {
        opacity: 0;
        transform: translateX(-50%) scale(0.96);
    }
}

.command-palette__context-strip {
    display: flex;
    align-items: flex-end;
    min-height: 34px;
    padding: 0 14px;
}

.command-palette__context-chip {
    display: inline-flex;
    align-items: center;
    gap: 0;
    max-width: 100%;
    min-height: 22px;
    padding: 2px 6px;
    border-radius: 10px;
    background: var(--command-palette-hover-bg);
    color: var(--command-palette-text);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 0.90625rem;
}

.command-palette__context-prefix {
    flex: 0 0 auto;
    margin-right: 4px;
    font-weight: 700;
}

.command-palette__context-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.command-palette__context-dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13.375px;
    height: 12.1016px;
    margin-left: 2.75px;
    padding: 0;
    border: 0;
    background: transparent;
    appearance: none;
    overflow: visible;
    color: var(--command-palette-muted);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 0.75625rem;
}

.command-palette__search-strip {
    display: flex;
    align-items: stretch;
    min-height: 46px;
    padding: 6px 5px 0 6px;
}

.command-palette__search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 40px;
    border-radius: 12px;
}

.command-palette__search-input {
    width: 100%;
    height: 40px;
    padding: 11px 12px;
    border: 0;
    margin: 0;
    background: transparent;
    color: var(--command-palette-text);
    caret-color: var(--command-palette-accent);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.21875rem;
    letter-spacing: 0;
    outline: none;
    appearance: none;
}

.command-palette__search-input::-webkit-search-decoration,
.command-palette__search-input::-webkit-search-cancel-button,
.command-palette__search-input::-webkit-search-results-button,
.command-palette__search-input::-webkit-search-results-decoration {
    display: none;
}

.command-palette__search-input::placeholder {
    color: var(--command-palette-muted);
    opacity: 1;
}

.command-palette__search-affordance {
    position: absolute;
    top: 11px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--command-palette-muted);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.21875rem;
    pointer-events: none;
}

.command-palette__search-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24.2109px;
    height: 17.1016px;
    color: inherit;
}

.command-palette__list-viewport {
    display: flex;
    flex: 0 0 370px;
    height: 370px;
    min-height: 0;
    padding: 0 5px 0 6px;
    box-sizing: border-box;
}

.command-palette__list-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    scrollbar-width: none;
}

.command-palette__list-scroll::-webkit-scrollbar {
    display: none;
}

.command-palette__list {
    padding: 6px 0 0;
    margin: 0;
    list-style: none;
}

.command-palette__option {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 0 12px;
    color: var(--command-palette-text);
    cursor: default;
}

.command-palette__option::before {
    content: "";
    position: absolute;
    top: 2px;
    right: 0;
    bottom: 2px;
    left: 0;
    border-radius: 8px;
    background: transparent;
}

.command-palette__option:hover::before,
.command-palette__option--active::before {
    background: var(--command-palette-hover-bg);
}

.command-palette__option:hover .command-palette__option-label,
.command-palette__option--active .command-palette__option-label {
    color: var(--command-palette-text-strong);
}

.command-palette__option-icon,
.command-palette__option-label,
.command-palette__option-shortcuts {
    position: relative;
    z-index: 1;
}

.command-palette__option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    min-width: 16px;
    margin-right: 8px;
    color: var(--command-palette-muted);
}

.command-palette__option-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--command-palette-text);
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 22.5px;
}

.command-palette__option-shortcuts {
    display: inline-flex;
    align-items: center;
    gap: 0;
    margin-left: auto;
    padding-left: 12px;
    color: var(--command-palette-muted);
}

.command-palette__option-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 21.1016px;
    color: inherit;
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 15.6px;
}

.command-palette__empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    color: var(--command-palette-muted);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.21875rem;
}


.app-toast-root {
    position: fixed;
    inset: 0;
    z-index: 760;
    pointer-events: none;
}

.app-toast-toaster {
    position: fixed;
    right: var(--offset-right);
    bottom: var(--offset-bottom);
    width: var(--width);
    max-width: calc(100vw - 32px);
    padding: 0;
    margin: 0;
    list-style: none;
    outline: 0;
    pointer-events: none;
}

.app-toast-toaster > li {
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: 0;
    z-index: var(--z-index);
    transform: translateY(calc(var(--offset, 0px) * -1 + 100%));
    transition: transform 0.4s, opacity 0.4s, height 0.4s, box-shadow 0.2s;
    box-sizing: border-box;
    outline: 0;
    overflow-wrap: anywhere;
    pointer-events: none;
}

.app-toast-toaster > li[data-mounted="true"] {
    opacity: 1;
    transform: translateY(calc(var(--offset, 0px) * -1));
}

.app-toast-toaster > li[data-removed="true"] {
    opacity: 0;
    transform: translateY(calc(var(--offset, 0px) * -1 + 100%));
}

.app-toast-card {
    --app-toast-bg: var(--shell-menu-bg, var(--shell-bg-surface));
    --app-toast-raised-bg: var(--shell-bg-active);
    --app-toast-hover-bg: var(--shell-menu-item-hover, var(--settings-control-hover-bg));
    --app-toast-border: var(--shell-menu-border, var(--shell-border));
    --app-toast-text: var(--shell-text-primary);
    --app-toast-muted: var(--shell-text-secondary);
    --app-toast-soft: var(--shell-menu-text, var(--shell-text-tertiary));
    --app-toast-accent: var(--shell-accent, #5e6ad2);
    position: relative;
    width: var(--width, 356px);
    border-radius: 8px;
    background: var(--app-toast-bg);
    color: var(--app-toast-text);
    font-size: 0.8125rem;
    outline: none;
    pointer-events: all;
}

.app-toast-card--rich {
    width: 384px;
    border-radius: 12px;
}

.app-toast-card--simple {
    min-height: 50px;
}

.app-toast-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow:
        var(--app-toast-border) 0 0 0 0.5px,
        lch(0 0 0 / 0.125) 0 3px 8px 0,
        lch(0 0 0 / 0.125) 0 2px 5px 0,
        lch(0 0 0 / 0.125) 0 1px 1px 0;
}

.app-toast-card--simple::after {
    box-shadow:
        var(--app-toast-border) 0 0 0 1px,
        lch(0 0 0 / 0.1) 0 4px 12px 0;
}

.app-toast-card__simple-status {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 50px;
    padding: 16px;
}

.app-toast-card__simple-icon {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 16px;
    height: 16px;
    margin-left: -3px;
    margin-right: 4px;
    flex: 0 0 auto;
}

.app-toast-card__simple-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--app-toast-text);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.21875rem;
}

.app-toast-card__status {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 383px;
    padding: 12px;
}

.app-toast-card__leading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.app-toast-card__content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 335px;
    min-width: 335px;
}

.app-toast-card__title-row,
.app-toast-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 335px;
}

.app-toast-card__title {
    color: var(--app-toast-text);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 16.25px;
}

.app-toast-card__dismiss {
    position: relative;
    display: block;
    width: 24px;
    height: 24px;
    padding: 6px;
    margin: -6px;
    border-radius: 9999px;
    color: var(--app-toast-accent);
}

.app-toast-card__dismiss:hover,
.app-toast-card__dismiss:focus-visible {
    background: var(--app-toast-hover-bg);
    color: var(--app-toast-text);
}

.app-toast-card__entity-link {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    padding: 4px;
    margin: -4px;
    border-radius: 8px;
    color: var(--app-toast-text);
}

.app-toast-card__entity-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin: -2px 4px 0 0;
    flex: 0 0 auto;
}

.app-toast-card__entity-text {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--app-toast-muted);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 16.25px;
}

.app-toast-card__footer {
    min-height: 19.5px;
}

.app-toast-card__footer-link {
    color: var(--app-toast-accent);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.21875rem;
}

.app-toast-card__footer-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.app-toast-card__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--app-toast-soft);
    border-radius: 9999px;
}

.app-toast-card__action:hover,
.app-toast-card__action:focus-visible {
    background: var(--app-toast-hover-bg);
    color: var(--app-toast-text);
}

.error-state {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 100%;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
    color: var(--shell-text-primary);
    text-align: center;
    transform: translateY(22px);
}

.error-state__illustration {
    display: block;
    width: 92px;
    height: 110px;
    flex: 0 0 auto;
    margin: 0 0 20px;
}

.error-state__illustration-foreground {
    fill: var(--error-state-strong, lch(90.35% 1.15 272 / 1));
}

.error-state__illustration-background {
    fill: var(--error-state-muted, lch(61.399% 1.15 272 / 1));
}

.error-state__copy {
    display: flex;
    width: max-content;
    max-width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.error-state__title {
    margin: 0;
    color: var(--error-state-strong, lch(90.35% 1.15 272 / 1));
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0;
}

.error-state__message {
    margin: 0;
    color: var(--error-state-muted, lch(61.399% 1.15 272 / 1));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.21875rem;
    letter-spacing: 0;
}

.alert-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 46px;
    padding: 11px 12px;
    border: 0.5px solid var(--shell-border);
    border-radius: 8px;
    background: var(--shell-bg-surface);
    color: var(--shell-text-secondary);
}

.alert-banner__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin-top: 1px;
    color: var(--shell-text-tertiary);
}

.alert-banner__body {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
}

.alert-banner__body strong {
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 550;
    line-height: 1.125rem;
}

.alert-banner__body span {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.0625rem;
}

.alert-banner__actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.alert-banner--info {
    border-color: color-mix(in srgb, #5e6ad2 32%, var(--shell-border));
    background: color-mix(in srgb, #5e6ad2 8%, var(--shell-bg-surface));
}

.alert-banner--info .alert-banner__icon {
    color: #8f96ff;
}

.alert-banner--success {
    border-color: color-mix(in srgb, #26b36a 34%, var(--shell-border));
    background: color-mix(in srgb, #26b36a 8%, var(--shell-bg-surface));
}

.alert-banner--success .alert-banner__icon {
    color: #3ccf84;
}

.alert-banner--warning {
    border-color: color-mix(in srgb, #d9a400 34%, var(--shell-border));
    background: color-mix(in srgb, #d9a400 8%, var(--shell-bg-surface));
}

.alert-banner--warning .alert-banner__icon {
    color: #e3b341;
}

.alert-banner--danger {
    border-color: color-mix(in srgb, #e5484d 34%, var(--shell-border));
    background: color-mix(in srgb, #e5484d 8%, var(--shell-bg-surface));
}

.alert-banner--danger .alert-banner__icon {
    color: #ff676d;
}

.ui-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    height: 22px;
    padding: 0 8px;
    border: 0.5px solid var(--shell-border);
    border-radius: 9999px;
    background: var(--settings-control-bg);
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
    white-space: nowrap;
}

.ui-badge--muted {
    background: transparent;
    color: var(--shell-text-tertiary);
}

.ui-badge--blue {
    border-color: color-mix(in srgb, #5e6ad2 34%, var(--shell-border));
    background: color-mix(in srgb, #5e6ad2 13%, transparent);
    color: #a8adff;
}

.ui-badge--green {
    border-color: color-mix(in srgb, #26b36a 34%, var(--shell-border));
    background: color-mix(in srgb, #26b36a 12%, transparent);
    color: #4fd18e;
}

.ui-badge--successtext {
    height: auto;
    padding: 0;
    border-color: transparent;
    background: transparent;
    color: var(--status-green-text, lch(50% 80 141.95 / 1));
    font-weight: 450;
    line-height: normal;
}

.ui-badge--yellow {
    border-color: color-mix(in srgb, #d9a400 36%, var(--shell-border));
    background: color-mix(in srgb, #d9a400 12%, transparent);
    color: #e5b84d;
}

.ui-badge--red {
    border-color: color-mix(in srgb, #e5484d 36%, var(--shell-border));
    background: color-mix(in srgb, #e5484d 12%, transparent);
    color: #ff7074;
}

.ui-badge--count {
    min-width: 22px;
    padding: 0 6px;
    background: var(--shell-bg-selected);
    color: var(--shell-text-primary);
}

.ui-badge--icon {
    padding-left: 6px;
}

.progress-bar {
    position: relative;
    height: 6px;
    overflow: hidden;
    border-radius: 9999px;
    background: var(--shell-bg-selected);
}

.progress-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #5e6ad2;
}

.progress-bar--success span {
    background: #26b36a;
}

.progress-bar--warning span {
    background: #d9a400;
}

.progress-bar--danger span {
    background: #e5484d;
}

.status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
    border: 0.5px solid var(--shell-border);
    border-radius: 8px;
    background: var(--shell-bg-surface);
}

.status-row__dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 9999px;
}

.status-row__body {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1px;
}

.status-row__body strong {
    overflow: hidden;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 550;
    line-height: 1.125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.status-row__body span {
    overflow: hidden;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inline-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    color: var(--settings-status-text, var(--shell-text-secondary));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: normal;
    vertical-align: top;
}

.inline-status__dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 9999px;
}

.inline-status__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.skeleton-row {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 82px;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 12px;
    border: 0.5px solid var(--shell-border);
    border-radius: 8px;
    background: var(--shell-bg-surface);
}

.skeleton-row span {
    height: 8px;
    border-radius: 9999px;
    background:
        linear-gradient(
            90deg,
            var(--shell-bg-selected) 0%,
            color-mix(in srgb, var(--shell-bg-selected) 72%, var(--shell-text-tertiary)) 45%,
            var(--shell-bg-selected) 90%);
    background-size: 220% 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

.skeleton-row span:first-child {
    width: 18px;
    height: 18px;
}

.skeleton-row--short {
    grid-template-columns: 26px minmax(0, 0.64fr) 62px;
}

@keyframes skeleton-shimmer {
    from {
        background-position: 120% 0;
    }

    to {
        background-position: -120% 0;
    }
}

.shell-dock {
    position: relative;
    z-index: 720;
    height: 28px;
    flex: 0 0 auto;
}

.shell-dock__surface {
    display: flex;
    align-items: flex-start;
    height: 28px;
    margin-top: -4px;
    padding: 0 10px 0 2px;
    background: var(--shell-bg-sidebar);
}

.shell-dock__spacer {
    flex: 1 1 0;
    min-width: 24px;
    margin-top: 14px;
}

.assistant-tab-strip {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    height: 28px;
    gap: 2px;
    overflow: hidden;
}

.assistant-tab {
    position: relative;
    display: flex;
    align-items: center;
    height: 28px;
    max-width: 214px;
    min-width: 0;
    padding: 0 0 1px;
    border-radius: 8px;
    color: var(--shell-text-secondary);
    cursor: var(--pointer, pointer);
    overflow: hidden;
    transition: background-color 0.15s, color 0.15s, opacity 0.15s;
}

.assistant-tab--active {
    background: var(--shell-nav-active-bg, var(--shell-bg-active));
    color: var(--shell-text-primary);
}

.assistant-tab:hover,
.assistant-tab:focus-visible {
    background: var(--shell-nav-hover-bg, var(--shell-bg-hover));
    color: var(--shell-text-primary);
    outline: none;
}

.assistant-tab__inner {
    display: flex;
    align-items: center;
    min-width: 0;
    width: 100%;
    height: 27px;
    gap: 5px;
    padding: 0 8px;
    box-sizing: border-box;
    overflow: hidden;
}

.assistant-tab__label-wrap {
    display: flex;
    align-items: center;
    min-width: 0;
    width: 100%;
    height: 14.5px;
    padding-right: 8px;
    overflow: hidden;
    mask-image: linear-gradient(to left, transparent 0, black 10px);
}

.assistant-tab__label {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: currentColor;
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 0.90625rem;
}

.assistant-tab__unread-dot {
    display: block;
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--shell-accent, #5e6ad2);
}

.assistant-tab--unread .assistant-tab__label {
    color: var(--shell-text-primary);
}

.assistant-tab--thinking .assistant-tab__label,
.assistant-message__assistant-text--pending {
    display: inline-block;
    background-image:
        url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20180%2072%22%20fill%3D%22none%22%3E%0A%20%20%3Cdefs%3E%0A%20%20%20%20%3Cfilter%20id%3D%22blur%22%20x%3D%22-100%25%22%20y%3D%22-100%25%22%20width%3D%22300%25%22%20height%3D%22300%25%22%3E%0A%20%20%20%20%20%20%3CfeGaussianBlur%20stdDeviation%3D%226%22%20%2F%3E%0A%20%20%20%20%3C%2Ffilter%3E%0A%20%20%3C%2Fdefs%3E%0A%20%20%3Cg%20transform%3D%22rotate(-30%2090%2036)%22%20filter%3D%22url(%23blur)%22%3E%0A%20%20%20%20%3Crect%20x%3D%2272%22%20y%3D%2218%22%20width%3D%2218%22%20height%3D%2236%22%20fill%3D%22%235e6ad2%22%20fill-opacity%3D%221%22%20%2F%3E%0A%20%20%20%20%3Crect%20x%3D%2281%22%20y%3D%2218%22%20width%3D%2218%22%20height%3D%2236%22%20fill%3D%22%23e4e4e8%22%20fill-opacity%3D%220.5%22%20%2F%3E%0A%20%20%20%20%3Crect%20x%3D%2290%22%20y%3D%2218%22%20width%3D%2218%22%20height%3D%2236%22%20fill%3D%22%23999a9d%22%20fill-opacity%3D%221%22%20%2F%3E%0A%20%20%20%20%3Crect%20x%3D%2281%22%20y%3D%2218%22%20width%3D%2218%22%20height%3D%2236%22%20fill%3D%22%23e4e4e8%22%20fill-opacity%3D%220.4%22%20%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E"),
        linear-gradient(var(--assistant-tab-thinking-base, lch(34.507% 1 272)), var(--assistant-tab-thinking-base, lch(34.507% 1 272)));
    background-repeat: no-repeat, no-repeat;
    background-size: 180px 72px, 100% 100%;
    background-position: calc(0% - 180px) 50%, 0 50%;
    background-blend-mode: screen, normal;
    background-clip: text;
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: assistant-tab-thinking-shimmer 2.4s linear infinite;
    will-change: background-position;
}

@keyframes assistant-tab-thinking-shimmer {
    0%,
    100% {
        background-position: calc(0% - 180px) 50%, 0 50%;
    }

    75%,
    99.999% {
        background-position: calc(100% + 180px) 50%, 0 50%;
    }
}

.assistant-tab__close {
    position: absolute;
    top: 50%;
    right: 4px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--shell-text-secondary);
    visibility: hidden;
    transform: translateY(-50%);
    cursor: var(--pointer, pointer);
}

.assistant-tab:hover .assistant-tab__close,
.assistant-tab:focus-within .assistant-tab__close {
    visibility: visible;
}

.assistant-tab:hover .assistant-tab__label-wrap,
.assistant-tab:focus-within .assistant-tab__label-wrap {
    mask-image: linear-gradient(to left, transparent 16px, black 32px);
}

.assistant-tab__close:hover,
.assistant-tab__close:focus-visible {
    color: var(--shell-text-primary);
    outline: none;
}

.assistant-tab__close::before {
    position: absolute;
    content: "";
    inset: -6px -4px -6px -4px;
}

.shell-dock__actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    flex: 0 0 auto;
}

.shell-dock__ask,
.shell-dock__history {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0.5px solid transparent;
    border-radius: 8px;
    transition: border 0.15s, background-color 0.15s, color 0.15s, opacity 0.15s;
}

.shell-dock__ask {
    height: 28px;
    padding: 0 12px 0 10px;
    gap: 0;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
}

.shell-dock__ask:hover,
.shell-dock__history:hover,
.shell-dock__ask:focus-visible,
.shell-dock__history:focus-visible {
    background: var(--shell-nav-hover-bg, var(--shell-bg-hover));
    color: var(--shell-text-primary);
}

.shell-dock__ask--active,
.shell-dock__history--active {
    background: var(--shell-nav-active-bg, var(--shell-bg-active));
    color: var(--shell-text-primary);
}

.shell-dock__history--active {
    background: transparent;
    color: var(--shell-text-primary);
}

.shell-dock__history {
    width: 28px;
    height: 28px;
    padding: 0 2px;
    color: var(--assistant-history-icon, lch(60.307% 1 272 / 1));
}

.shell-dock__history.shell-dock__history--active {
    background: transparent;
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
}

.shell-dock__ask-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-right: 6px;
}

.shell-dock__ask-label {
    font-size: 0.75rem;
    font-weight: 450;
    line-height: normal;
}

.assistant-history-popover {
    position: absolute;
    right: 10px;
    bottom: 35.5px;
    z-index: 740;
    width: min(375.34px, calc(100vw - 20px));
    height: min(720px, calc(100vh - 64px));
    display: flex;
    flex-direction: column;
    background: var(--shell-menu-bg);
    color: var(--shell-menu-text, lch(90.35% 1.15 272 / 1));
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 12px;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.21875rem;
    box-shadow: var(--shell-menu-shadow, var(--assistant-panel-shadow, lch(0 0 0 / 0.125) 0 3px 8px 0, lch(0 0 0 / 0.125) 0 2px 5px 0, lch(0 0 0 / 0.125) 0 1px 1px 0));
    overflow: hidden;
}

.assistant-history-popover__search {
    position: relative;
    flex: 0 0 35.77px;
    height: 35.77px;
    display: flex;
    align-items: center;
    padding: 0 12px 0 14px;
    border-bottom: 0.5px solid var(--assistant-history-divider, var(--shell-menu-divider, lch(16.4% 1.83 272 / 1)));
    color: var(--shell-menu-text, lch(90.35% 1.15 272 / 1));
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.21875rem;
}

.assistant-history-popover__search-status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.assistant-history-popover__input {
    position: relative;
    display: block;
    width: 100%;
    height: 35.28px;
    padding: 10px 0 9px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--shell-menu-text-strong, var(--shell-text-primary));
    caret-color: var(--shell-accent, var(--shell-menu-text-strong, var(--shell-text-primary)));
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: normal;
}

.assistant-history-popover__input::placeholder {
    color: var(--shell-menu-text-strong, var(--shell-text-primary));
    opacity: 1;
}

.assistant-history-popover__list-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    scrollbar-width: none;
}

.assistant-history-popover__list-wrap::-webkit-scrollbar {
    display: none;
}

.assistant-history-popover__list {
    display: block;
    min-height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    background: lch(0 0 0 / 0.004);
}

.assistant-history-popover__group {
    display: flex;
    align-items: center;
    height: 29.4px;
    padding: 8px 14px;
    color: var(--shell-menu-hint, lch(63.582% 1.375 272 / 1));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
}

.assistant-history-popover__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 100%;
    height: 31.36px;
    padding: 0 18px 0 14px;
    color: var(--shell-menu-text, var(--shell-text-primary));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.21875rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: var(--pointer, pointer);
    user-select: none;
    transition: color var(--speed-highlightFadeOut, 120ms ease);
}

.assistant-history-popover__item::before {
    content: "";
    position: absolute;
    inset: 0 6px;
    z-index: 0;
    border-radius: 8px;
    background: transparent;
}

.assistant-history-popover__item > * {
    position: relative;
    z-index: 1;
}

.assistant-history-popover__item:hover,
.assistant-history-popover__item:focus-visible {
    color: var(--shell-menu-text-strong, var(--shell-text-primary));
    outline: none;
}

.assistant-history-popover__item:hover::before,
.assistant-history-popover__item:focus-visible::before {
    background: var(--shell-menu-item-hover, var(--shell-bg-hover));
}

.assistant-history-popover__item-title {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 450;
    line-height: normal;
}

.assistant-history-popover__item-dot {
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--shell-accent, #5e6ad2);
}

.assistant-history-popover__item-time {
    flex: 0 0 auto;
    margin-left: 8px;
    color: var(--shell-menu-indicator, var(--shell-text-secondary));
}

.assistant-history-popover__separator {
    position: relative;
    height: 12px;
    padding: 6px 0;
}

.assistant-history-popover__separator::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 0;
    border-top: 0.5px solid var(--assistant-history-divider, var(--shell-menu-divider, lch(16.4% 1.83 272 / 1)));
}

.assistant-history-popover__group:last-child,
.assistant-history-popover__separator:last-child {
    display: none;
}

.assistant-history-popover__empty {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 14px;
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    font-weight: 450;
}

.assistant-panel {
    --assistant-panel-bg: var(--assistant-panel-shell-bg, var(--shell-menu-bg));
    --assistant-panel-raised-bg: var(--assistant-panel-content-bg, var(--shell-bg-active));
    --assistant-panel-hover-bg: var(--shell-menu-item-hover, var(--settings-control-hover-bg));
    --assistant-panel-border: var(--assistant-border, var(--shell-border));
    --assistant-panel-text: var(--shell-text-primary);
    --assistant-panel-muted: var(--shell-text-secondary);
    --assistant-panel-soft: var(--shell-menu-text, var(--shell-text-tertiary));
    position: absolute;
    left: calc(100% - 432px);
    top: calc(100% - 637px);
    width: 400px;
    height: 600px;
    display: flex;
    flex-direction: column;
    background: var(--assistant-panel-bg);
    color: var(--assistant-panel-text);
    border: 0.5px solid var(--assistant-panel-border);
    border-radius: 8px;
    box-shadow: var(--assistant-panel-shadow, lch(0 0 0 / 0.125) 0 3px 8px 0, lch(0 0 0 / 0.125) 0 2px 5px 0, lch(0 0 0 / 0.125) 0 1px 1px 0);
    overflow: hidden;
    z-index: 730;
    font-weight: 400;
    transform-origin: center center;
    transition: left 180ms cubic-bezier(0.16, 1, 0.3, 1), top 180ms cubic-bezier(0.16, 1, 0.3, 1), width 180ms cubic-bezier(0.16, 1, 0.3, 1), height 180ms cubic-bezier(0.16, 1, 0.3, 1), border-radius 180ms cubic-bezier(0.16, 1, 0.3, 1), border-color 0.15s ease-in-out;
}

.assistant-panel.assistant-panel--maximized {
    top: 16px;
    left: 6px;
    width: calc(100% - 20px);
    height: calc(100% - 53px);
    border-radius: 16px;
}

.assistant-panel--entering {
    animation: assistant-panel-enter 180ms cubic-bezier(0.21, 0.99, 0.36, 1) forwards;
    transition: width 180ms cubic-bezier(0.16, 1, 0.3, 1), height 180ms cubic-bezier(0.16, 1, 0.3, 1), border-radius 180ms cubic-bezier(0.16, 1, 0.3, 1), border-color 0.15s ease-in-out;
}

.assistant-panel--entering-from-history {
    animation-name: assistant-panel-enter-from-history;
}

.assistant-panel--closing {
    pointer-events: none;
    animation: assistant-panel-exit 140ms linear -28ms forwards;
}

.assistant-panel--closing-maximized {
    pointer-events: none;
    animation: assistant-panel-exit-maximized 140ms linear -28ms forwards;
}

@keyframes assistant-panel-enter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes assistant-panel-enter-from-history {
    from {
        opacity: 0;
        transform: translateX(18px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes assistant-panel-exit {
    from {
        opacity: 1;
    }

    30% {
        opacity: 0.82;
    }

    58% {
        opacity: 0.4;
    }

    82% {
        opacity: 0.165;
    }

    to {
        opacity: 0;
    }
}

@keyframes assistant-panel-exit-maximized {
    from {
        opacity: 1;
        transform: scale(1);
    }

    22% {
        opacity: 0.92;
        transform: scale(0.993);
    }

    38% {
        opacity: 0.8;
        transform: scale(0.985);
    }

    52% {
        opacity: 0.66;
        transform: scale(0.977);
    }

    68% {
        opacity: 0.42;
        transform: scale(0.97);
    }

    84% {
        opacity: 0.18;
        transform: scale(0.958);
    }

    to {
        opacity: 0;
        transform: scale(0.955);
    }
}

.assistant-panel__header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 48px;
    min-height: 48px;
    padding: 8px 10px;
    background: var(--assistant-panel-raised-bg);
}

.assistant-panel__header::after {
    position: absolute;
    content: "";
    top: 48px;
    right: 0;
    bottom: -16px;
    left: 0;
    height: 16px;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(var(--assistant-panel-raised-bg), rgba(0, 0, 0, 0));
}

.assistant-panel:has(.assistant-panel__messages[data-can-scroll="true"]) .assistant-panel__header::after {
    opacity: 1;
}

.assistant-panel__title-strip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    width: 291px;
    height: 24px;
    min-width: 0;
    padding: 2px;
}

.assistant-panel__beta-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    min-width: 43.5703px;
    padding: 0 8px;
    border: 0.5px solid var(--assistant-panel-border);
    border-radius: 9999px;
    background: var(--assistant-panel-raised-bg);
    color: var(--assistant-panel-soft);
    flex: 0 0 auto;
}

.assistant-panel__beta-pill-text {
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1;
}

.assistant-panel__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--assistant-panel-text);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 0.96875rem;
}

.assistant-panel__title-strip > .assistant-panel__title {
    margin-left: 0;
}

.assistant-panel__beta-pill + .assistant-panel__title {
    margin-left: 0;
}

.assistant-panel__title-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin-left: 4px;
    margin-right: -2px;
    border-radius: 9999px;
    color: var(--assistant-panel-soft);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.assistant-panel__window-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.assistant-panel__window-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    color: var(--assistant-panel-muted);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.assistant-composer__icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    color: var(--assistant-composer-icon, var(--shell-text-tertiary));
    transition: background-color 0.15s ease, color 0.15s ease;
}

.assistant-panel__title-action:hover,
.assistant-panel__title-action:focus-visible,
.assistant-panel__window-button:hover,
.assistant-panel__window-button:focus-visible,
.assistant-composer__icon-button:hover,
.assistant-composer__icon-button:focus-visible {
    background: var(--assistant-panel-hover-bg);
    color: var(--assistant-panel-text);
}

.assistant-panel__chat-menu:not(.anchored-dropdown-menu--context) {
    top: 30px;
    right: -4px;
}

.assistant-panel__chat-menu:not(.anchored-dropdown-menu--context) > .shell-dropdown-menu {
    top: 0;
    right: auto;
    left: 0;
    width: 172px;
}

.anchored-dropdown-menu--context.assistant-panel__chat-menu > .shell-dropdown-menu {
    top: 0;
    right: auto;
    left: 0;
    width: 172px;
}

.assistant-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: var(--assistant-panel-raised-bg);
}

.assistant-panel__empty,
.assistant-panel__messages {
    height: 100%;
}

.assistant-panel__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 0 24px 18px;
    transform: translateY(-2px);
}

.assistant-panel__empty--context {
    padding: 0;
    transform: none;
    outline: none;
}

.assistant-panel__empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--assistant-panel-soft);
}

.assistant-panel__empty-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 267.2734px;
    gap: 2px;
}

.assistant-panel__empty-title {
    color: var(--assistant-panel-soft);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.5rem;
}

.assistant-panel__empty-subtitle {
    display: block;
    width: 267.2734px;
    color: var(--assistant-panel-muted);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.25rem;
    text-align: center;
}

.assistant-panel__suggestions {
    display: grid;
    grid-template-columns: 169.1719px 143.9453px;
    column-gap: 8px;
    row-gap: 8px;
    width: 321.1172px;
}

.assistant-panel__suggestion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 28.5px;
    padding: 6px 14px 6px 12px;
    border: 0.5px solid var(--assistant-panel-border);
    border-radius: 8px;
    color: var(--assistant-panel-soft);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 0.96875rem;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.assistant-panel__suggestion-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--assistant-panel-muted);
}

.assistant-panel__suggestion:nth-child(1) {
    width: 169.1719px;
}

.assistant-panel__suggestion:nth-child(2) {
    width: 143.9453px;
}

.assistant-panel__suggestion:nth-child(3) {
    width: 175.5156px;
    grid-column: 1 / span 2;
    justify-self: center;
}

.assistant-panel__suggestion:hover,
.assistant-panel__suggestion:focus-visible {
    background: var(--assistant-panel-hover-bg);
    border-color: var(--settings-control-hover-border, var(--assistant-panel-border));
}

.assistant-panel__helper-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--assistant-panel-muted);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.25rem;
    text-align: center;
}

.assistant-panel__helper-key {
    color: var(--assistant-panel-text);
}

.assistant-panel__messages {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 8px 20px;
    overflow: auto;
    scrollbar-width: none;
}

.assistant-panel__messages::-webkit-scrollbar {
    display: none;
}

.assistant-message {
    display: flex;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
}

.assistant-message--user {
    justify-content: flex-end;
}

.assistant-message--assistant {
    min-height: 56.7969px;
}

.assistant-message__assistant-content {
    display: flex;
    flex: 0 0 auto;
    min-width: 0;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.assistant-message__bubble {
    display: inline-flex;
    flex-direction: column;
    min-width: 0;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    max-width: min(326px, calc(100% - 57px));
    min-height: 36.7969px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--assistant-user-message-bg, lch(13.841% 0.943 272));
    color: var(--assistant-user-message-text, lch(90.668% 1.375 272));
    box-shadow: var(--assistant-user-message-shadow, none);
    box-sizing: border-box;
}

.assistant-message__text,
.assistant-message__assistant-text {
    min-width: 0;
    max-width: 100%;
    color: var(--assistant-panel-soft);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 20.8px;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    word-break: normal;
}

.assistant-message__text {
    color: var(--assistant-user-message-text, lch(90.668% 1.375 272));
}

.assistant-message__markdown {
    white-space: normal;
}

.assistant-message__markdown > :first-child {
    margin-top: 0;
}

.assistant-message__markdown > :last-child {
    margin-bottom: 0;
}

.assistant-message__markdown p {
    margin: 0 0 8px;
    overflow-wrap: anywhere;
}

.assistant-message__markdown ul,
.assistant-message__markdown ol {
    margin: 0 0 8px;
    padding-left: 18px;
}

.assistant-message__markdown li {
    margin: 2px 0;
    overflow-wrap: anywhere;
}

.assistant-message__markdown li > p {
    margin: 0;
}

.assistant-message__assistant-text {
    display: block;
    padding: 0 10px;
    width: calc(100% - 20px);
    white-space: normal;
    box-sizing: border-box;
}

.assistant-message__assistant-text--pending {
    width: auto;
    white-space: pre-wrap;
}

.assistant-message__worked-duration {
    display: flex;
    width: 100%;
    height: 16px;
    align-items: center;
    justify-content: space-between;
    gap: 3px;
    padding: 0 10px;
    border: 0;
    border-radius: 4px;
    margin: 0;
    color: var(--assistant-panel-muted);
    background: transparent;
    font-size: 0.75rem;
    font-family: inherit;
    font-weight: 500;
    line-height: normal;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    cursor: default;
}

.assistant-message__worked-duration--has-disclosure,
.assistant-message__worked-duration--open {
    cursor: pointer;
}

.assistant-message__worked-duration--has-disclosure:hover,
.assistant-message__worked-duration:focus-visible {
    background: var(--assistant-panel-hover-bg);
    color: var(--assistant-panel-soft);
    outline: none;
}

.assistant-message__worked-duration .shell-icon {
    flex: 0 0 auto;
    opacity: 0.72;
    transition: transform 120ms ease, opacity 120ms ease;
}

.assistant-message__worked-duration--open .shell-icon {
    transform: rotate(90deg);
    opacity: 1;
}

.assistant-message__worked-duration-main {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    overflow: hidden;
}

.assistant-message__worked-duration-text {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assistant-message__work-disclosure {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px 10px 2px;
}

.assistant-message__work-summary {
    display: inline-flex;
    min-width: 0;
    flex: 0 0 auto;
    align-items: center;
    gap: 3px;
    color: var(--assistant-panel-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.assistant-message__work-summary::before {
    display: block;
    width: 3px;
    height: 3px;
    flex: 0 0 auto;
    margin: 0 6px;
    border-radius: 9999px;
    background: currentColor;
    content: "";
    opacity: 0.7;
}

.assistant-message__work-summary:first-child::before {
    display: none;
}

.assistant-message__work-summary-count {
    font-weight: 600;
}

.assistant-message__work-summary--added {
    color: var(--assistant-work-added-color, #4fd18e);
}

.assistant-message__work-summary--edited {
    color: var(--assistant-work-edited-color, #e3b341);
}

.assistant-message__work-summary--removed {
    color: var(--assistant-work-removed-color, #ff7074);
}

.assistant-message__work-summary--warning {
    color: var(--assistant-work-warning-color, #e3b341);
}

.assistant-message__work-summary--accent {
    color: var(--assistant-work-accent-color, var(--shell-accent, #5e6ad2));
}

.assistant-message__actions {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 4px 0 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 90ms ease-out;
}

.assistant-message--assistant:hover .assistant-message__actions,
.assistant-message--assistant:focus-within .assistant-message__actions {
    opacity: 1;
    pointer-events: auto;
}

.assistant-message__copy {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0 2px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--assistant-message-action-icon, lch(38.409% 1.375 272));
    cursor: default;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.assistant-message__copy:hover,
.assistant-message__copy:focus-visible {
    background: var(--assistant-panel-hover-bg);
    color: var(--assistant-panel-text);
    outline: none;
}

.assistant-message__copy::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    z-index: 1100;
    height: 27px;
    padding: 0 8px;
    border: 0.5px solid var(--assistant-panel-border);
    border-radius: 6px;
    background: var(--assistant-tooltip-bg, lch(13.07% 1.2 272));
    box-shadow:
        lch(0% 0 0 / 0.125) 0 3px 8px,
        lch(0% 0 0 / 0.125) 0 2px 5px,
        lch(0% 0 0 / 0.125) 0 1px 1px;
    color: var(--assistant-tooltip-text, lch(91.214% 1.6 272));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 26px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-2px);
    transition: opacity 90ms ease-out, transform 90ms ease-out;
}

.assistant-message__copy:hover::after,
.assistant-message__copy:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.assistant-message__assistant-text > :first-child {
    margin-top: 0;
}

.assistant-message__assistant-text > :last-child {
    margin-bottom: 0;
}

.assistant-message__assistant-text p {
    margin: 0 0 8px;
    overflow-wrap: anywhere;
}

.assistant-message__assistant-text ul,
.assistant-message__assistant-text ol {
    margin: 0 0 8px;
    padding-left: 18px;
}

.assistant-message__assistant-text li {
    margin: 2px 0;
    overflow-wrap: anywhere;
}

.assistant-message__assistant-text li > p {
    margin: 0;
}

.assistant-message__assistant-text a {
    color: var(--assistant-panel-text);
    text-decoration: underline;
    text-decoration-color: var(--assistant-panel-muted);
    text-underline-offset: 2px;
}

.assistant-message__assistant-text code {
    padding: 1px 4px;
    border: 0.5px solid var(--assistant-panel-border);
    border-radius: 4px;
    background: var(--assistant-panel-raised-bg);
    color: var(--assistant-panel-text);
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.75rem;
}

.assistant-message__assistant-text pre {
    max-width: 100%;
    margin: 0 0 8px;
    padding: 8px 10px;
    border: 0.5px solid var(--assistant-panel-border);
    border-radius: 6px;
    background: var(--assistant-panel-raised-bg);
    overflow: auto;
}

.assistant-message__assistant-text pre code {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    white-space: pre;
}

.assistant-message__assistant-text blockquote {
    margin: 0 0 8px;
    padding-left: 10px;
    border-left: 2px solid var(--assistant-panel-border);
    color: var(--assistant-panel-muted);
}

:where(.assistant-message__assistant-text, .chat-message__markdown) .tableContainer {
    width: 100%;
    margin: 22px 0 0;
}

:where(.assistant-message__assistant-text, .chat-message__markdown) .table-wrapper {
    position: relative;
    width: calc(100% + 16px);
    margin: -6px 0 0 -16px;
    padding: 6px 0 22px 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-color: transparent transparent;
}

:where(.assistant-message__assistant-text, .chat-message__markdown) .table-wrapper:hover {
    scrollbar-color: var(--scrollbar-color, var(--shell-scrollbar-thumb, var(--assistant-panel-border))) transparent;
}

:where(.assistant-message__assistant-text, .chat-message__markdown) table {
    max-width: none;
    height: fit-content;
    min-width: 100%;
    margin: 0 0 1px;
    overflow: hidden;
    border: 0.5px solid var(--assistant-markdown-table-border, var(--settings-card-border, var(--assistant-panel-border, var(--shell-border, lch(91.9 0 282)))));
    border-radius: 6px;
    border-spacing: 0;
    border-collapse: separate;
    background: var(--assistant-markdown-table-bg, var(--settings-card-bg, var(--assistant-panel-bg, var(--shell-bg-surface, lch(100 0 282)))));
    color: var(--assistant-panel-text, var(--shell-text-primary, lch(20 1 282)));
    table-layout: fixed;
}

:where(.assistant-message__assistant-text, .chat-message__markdown) thead th,
:where(.assistant-message__assistant-text, .chat-message__markdown) tbody tr:first-child > th {
    background: var(--assistant-markdown-table-header-bg, var(--settings-icon-tile-bg, var(--assistant-panel-raised-bg, var(--shell-bg-button, lch(94.5 0 282)))));
}

:where(.assistant-message__assistant-text, .chat-message__markdown) th,
:where(.assistant-message__assistant-text, .chat-message__markdown) td {
    padding: 0;
    border-left: 0.5px solid var(--assistant-markdown-table-border, var(--settings-card-border, var(--assistant-panel-border, var(--shell-border, lch(91.9 0 282)))));
    font-weight: inherit;
    line-height: inherit;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

:where(.assistant-message__assistant-text, .chat-message__markdown) td {
    border-top: 0.5px solid var(--assistant-markdown-table-border, var(--settings-card-border, var(--assistant-panel-border, var(--shell-border, lch(91.9 0 282)))));
}

:where(.assistant-message__assistant-text, .chat-message__markdown) th:first-child,
:where(.assistant-message__assistant-text, .chat-message__markdown) td:first-child {
    border-left: 0;
}

:where(.assistant-message__assistant-text, .chat-message__markdown) tbody:first-child tr:first-child > td,
:where(.assistant-message__assistant-text, .chat-message__markdown) tbody:first-child tr:first-child > th {
    border-top: 0;
}

:where(.assistant-message__assistant-text, .chat-message__markdown) .cell-content {
    width: 100%;
    height: 100%;
    padding: 5px 8px;
}

:where(.assistant-message__assistant-text, .chat-message__markdown) th > :first-child,
:where(.assistant-message__assistant-text, .chat-message__markdown) td > :first-child {
    margin-top: 0;
}

:where(.assistant-message__assistant-text, .chat-message__markdown) th > :last-child,
:where(.assistant-message__assistant-text, .chat-message__markdown) td > :last-child {
    margin-bottom: 0;
}

:where(.assistant-message__assistant-text, .chat-message__markdown) th p,
:where(.assistant-message__assistant-text, .chat-message__markdown) td p {
    margin: 0;
}

.assistant-panel__composer-wrap {
    flex: 0 0 auto;
    padding: 0 8px 8px;
    background: var(--assistant-panel-raised-bg);
}

.assistant-panel__context-row {
    width: 383px;
    min-height: 26.5px;
    margin: 0 auto 4px;
    display: flex;
    align-items: center;
}

.assistant-panel__context-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-height: 22.5px;
    padding: 2px 4px;
    border-radius: 6px;
    color: var(--assistant-panel-text);
}

.assistant-panel__context-chip-inner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.assistant-panel__context-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

.assistant-panel__context-text {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 0.90625rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.assistant-panel__context-key {
    color: var(--assistant-panel-muted);
    flex: 0 0 auto;
}

.assistant-panel__context-title {
    color: var(--assistant-panel-soft);
    margin-left: 6px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.assistant-composer {
    --assistant-composer-shell-width: 383px;
    --assistant-composer-inner-width: 375px;
    --assistant-composer-editor-width: 363px;
    position: relative;
    width: var(--assistant-composer-shell-width);
    min-height: 68.796875px;
    margin: 4px auto 0;
    padding: 6px 4px;
    border-radius: 7px;
    border: 0;
    background: var(--assistant-composer-bg, var(--assistant-panel-raised-bg));
    box-shadow:
        inset 0 0 0 0.5px var(--assistant-composer-border, var(--assistant-panel-border)),
        var(--assistant-user-message-shadow, 0 0 0 0 transparent);
}

.message-composer--fluid.assistant-composer {
    --assistant-composer-shell-width: 100%;
    --assistant-composer-inner-width: 100%;
    --assistant-composer-editor-width: 100%;
    width: auto;
    margin: 0;
    box-sizing: border-box;
}

.assistant-composer__editor-row,
.assistant-composer__action-row {
    width: var(--assistant-composer-inner-width);
    margin: 0 auto;
    background: transparent;
}

.message-composer--fluid .assistant-composer__editor-row,
.message-composer--fluid .assistant-composer__action-row,
.message-composer--fluid .assistant-composer__editor {
    box-sizing: border-box;
}

.message-composer__toolbar-spacer {
    display: inline-flex;
    flex: 0 0 auto;
    width: 0;
    height: 24px;
}

.message-composer__header,
.message-composer__footer {
    width: var(--assistant-composer-inner-width);
    margin: 0 auto;
}

.message-composer__header {
    margin-bottom: 4px;
}

.assistant-composer__editor-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px;
    min-height: calc(var(--message-composer-min-editor-height, 20.796875px) + 4px);
    padding: 2px 6px;
    border-radius: 0;
}

.assistant-composer__action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 24px;
    margin-top: 8px;
    padding: 0 6px 0 2px;
    border-radius: 0;
}

.assistant-composer__editor {
    display: block;
    width: auto;
    flex: 1 1 92px;
    min-width: 92px;
    min-height: var(--message-composer-min-editor-height, 20.796875px);
    max-height: 96px;
    padding: 0;
    border: 0;
    outline: 0;
    resize: none;
    overflow: auto;
    background: transparent;
    color: var(--assistant-panel-soft);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 20.8px;
    scrollbar-width: none;
}

.assistant-composer__editor--rich {
    white-space: pre-wrap;
    word-break: break-word;
    cursor: text;
}

.assistant-composer__editor--rich p,
.assistant-composer__editor--rich div,
.assistant-composer__editor--rich ul,
.assistant-composer__editor--rich ol,
.assistant-composer__editor--rich li,
.assistant-composer__editor--rich pre {
    margin-block: 0;
}

.assistant-composer__editor--rich ul,
.assistant-composer__editor--rich ol {
    padding-inline-start: 18px;
}

.assistant-composer__editor--rich li {
    padding-inline-start: 2px;
}

.assistant-composer__editor--rich pre {
    font-family: var(--code-font-family, ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace);
    white-space: pre-wrap;
}

.assistant-composer__editor--rich[data-empty]::before {
    content: attr(data-placeholder);
    color: var(--assistant-panel-muted);
    pointer-events: none;
}

.assistant-composer__editor::-webkit-scrollbar {
    display: none;
}

.assistant-composer__editor::placeholder {
    color: var(--assistant-panel-muted);
    opacity: 1;
}

.assistant-composer__skills {
    display: inline-flex;
    align-items: center;
    gap: 5.5px;
    height: 24px;
    padding: 0 6px 0 4px;
    color: var(--assistant-panel-muted);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
}

.assistant-composer__skills:hover,
.assistant-composer__skills:focus-visible {
    color: var(--assistant-panel-text);
}

.message-composer__slash-menu {
    position: absolute;
    z-index: 775;
    bottom: calc(100% - 4px);
    left: 6px;
    width: 226px;
    max-height: min(360px, calc(100vh - 160px));
    overflow: hidden;
    padding: 4px 0;
    border: 0.5px solid var(--shell-menu-border, var(--settings-card-border, var(--assistant-panel-border)));
    border-radius: 10px;
    background: var(--shell-menu-bg, var(--settings-card-bg, var(--assistant-panel-bg)));
    color: var(--shell-menu-text-strong, var(--assistant-panel-text));
    box-shadow:
        0 6px 18px 0 color-mix(in srgb, black 4%, transparent),
        0 3px 9px 0 color-mix(in srgb, black 4%, transparent),
        0 1px 1px 0 color-mix(in srgb, black 4%, transparent);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 19.5px;
}

.message-composer__slash-title {
    display: flex;
    min-height: 28px;
    align-items: center;
    padding: 0 14px 2px;
    color: var(--shell-menu-text-strong, var(--assistant-panel-text));
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 19.5px;
}

.message-composer__slash-query {
    display: flex;
    min-height: 34px;
    align-items: center;
    padding: 0 14px;
    color: var(--shell-menu-text-strong, var(--assistant-panel-text));
}

.message-composer__slash-query > span {
    display: inline-flex;
    width: 100%;
    max-width: 100%;
    min-height: 27.5px;
    align-items: center;
    overflow: hidden;
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--shell-menu-item-hover, var(--assistant-panel-hover-bg));
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-composer__slash-list {
    max-height: 276px;
    overflow-y: auto;
    padding: 0;
    scrollbar-width: none;
}

.message-composer__slash-list::-webkit-scrollbar {
    display: none;
}

.message-composer__slash-item {
    display: flex;
    width: 100%;
    min-height: 34px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 14px;
    border: 0;
    color: var(--shell-menu-text-strong, var(--assistant-panel-text));
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: default;
}

.message-composer__slash-divider {
    position: relative;
    height: 10.5px;
}

.message-composer__slash-divider::before {
    position: absolute;
    right: 0;
    left: 0;
    top: 5px;
    height: 0.5px;
    background: var(--shell-menu-divider, var(--shell-menu-border, var(--assistant-panel-border)));
    content: "";
}

.message-composer__slash-item:hover,
.message-composer__slash-item:focus-visible {
    color: var(--shell-menu-text-strong, var(--assistant-panel-text));
    background: var(--shell-menu-item-hover, var(--assistant-panel-hover-bg));
    outline: none;
}

.message-composer__slash-item-main {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 14px;
}

.message-composer__slash-item-main .shell-icon {
    color: var(--shell-menu-hint, var(--assistant-panel-muted));
}

.message-composer__slash-shortcut {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--shell-menu-hint, var(--assistant-panel-muted));
    font-size: 0.8125rem;
    white-space: nowrap;
}

.message-composer__slash-empty {
    display: flex;
    min-height: 34px;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    color: var(--shell-menu-text-strong, var(--assistant-panel-text));
}

.message-composer__slash-dismiss {
    padding: 0;
    border: 0;
    color: var(--shell-menu-hint, var(--assistant-panel-muted));
    background: transparent;
    font: inherit;
    cursor: default;
}

.message-composer__slash-dismiss:hover,
.message-composer__slash-dismiss:focus-visible {
    color: var(--shell-menu-text-strong, var(--assistant-panel-text));
    outline: none;
}

.assistant-composer__editor-host {
    display: block;
    width: auto;
    flex: 1 1 92px;
    min-width: 92px;
    min-height: var(--message-composer-min-editor-height, 20.796875px);
}

.message-composer--fluid .assistant-composer__editor-host {
    box-sizing: border-box;
}

.assistant-composer__editor-host .assistant-composer__editor {
    width: 100%;
    min-width: 0;
    flex: 0 1 auto;
}

.assistant-composer__editor.ProseMirror {
    white-space: pre-wrap;
    word-break: break-word;
    cursor: text;
}

.assistant-composer__editor p,
.assistant-composer__editor div,
.assistant-composer__editor ul,
.assistant-composer__editor ol,
.assistant-composer__editor li,
.assistant-composer__editor pre {
    margin-block: 0;
}

.assistant-composer__editor ul,
.assistant-composer__editor ol {
    padding-inline-start: 18px;
}

.assistant-composer__editor li {
    padding-inline-start: 2px;
}

.assistant-composer__editor pre {
    font-family: var(--code-font-family, ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace);
    white-space: pre-wrap;
}

.assistant-composer__editor .assistant-composer__editor--empty::before,
.assistant-composer__editor.assistant-composer__editor--empty::before {
    content: attr(data-placeholder);
    float: left;
    height: 0;
    color: var(--assistant-panel-muted);
    pointer-events: none;
}

.assistant-composer__editor-mention {
    color: var(--accent-strong, var(--assistant-panel-text));
    font-weight: 500;
}

.message-composer__slash-menu--floating {
    position: fixed;
    left: auto;
    bottom: auto;
}

.message-composer__slash-item--active {
    color: var(--shell-menu-text-strong, var(--assistant-panel-text));
    background: var(--shell-menu-item-hover, var(--assistant-panel-hover-bg));
}

.message-composer__slash-icon {
    display: inline-flex;
    width: 18px;
    min-width: 18px;
    align-items: center;
    justify-content: center;
    color: var(--shell-menu-hint, var(--assistant-panel-muted));
    font-size: 0.75rem;
    line-height: 1;
}

.message-composer__slash-icon img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
}

.message-composer__slash-copy {
    display: inline-flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.message-composer__slash-label,
.message-composer__slash-description {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-composer__slash-description {
    color: var(--shell-menu-hint, var(--assistant-panel-muted));
    font-size: 0.75rem;
    line-height: 16px;
}

.anchored-dropdown-menu--assistant-skills > .shell-dropdown-menu {
    top: 28px;
    left: 0;
    width: 320px;
    border-color: var(--assistant-panel-border, var(--shell-menu-border));
    background: var(--shell-menu-bg);
}

.anchored-dropdown-menu--assistant-skills .shell-dropdown-menu__inner {
    background: var(--shell-menu-bg);
}

.anchored-dropdown-menu--assistant-skills .shell-dropdown-menu__search-row {
    min-height: 42px;
    padding: 3px 8px 2px 12px;
    border-bottom: 0.5px solid var(--shell-menu-divider);
}

.anchored-dropdown-menu--assistant-skills .shell-dropdown-menu__search-form {
    height: 34px;
}

.anchored-dropdown-menu--assistant-skills .shell-dropdown-menu__search-input {
    height: 34px;
    padding: 8px 0;
    color: var(--shell-menu-text-strong);
}

.anchored-dropdown-menu--assistant-skills .shell-dropdown-menu__search-input::placeholder {
    color: var(--shell-menu-hint);
}

.anchored-dropdown-menu--assistant-skills .shell-dropdown-menu__list {
    padding: 6px 0;
}

.anchored-dropdown-menu--assistant-skills .shell-dropdown-menu__item {
    min-height: 36px;
}

.assistant-composer__actions-end {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.assistant-composer__send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 0.5px solid transparent;
    border-radius: 12px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.assistant-composer__send--idle,
.assistant-composer__send--loading {
    border-color: var(--assistant-composer-border, transparent);
    background: var(--assistant-composer-button-bg, var(--shell-bg-button));
    color: var(--assistant-composer-icon, var(--shell-text-tertiary));
}

.assistant-composer__send--ready {
    background: var(--shell-accent, #5e6ad2);
    color: white;
}

.assistant-composer__send--ready:hover,
.assistant-composer__send--ready:focus-visible {
    filter: brightness(1.05);
}

.assistant-composer__send--loading {
    opacity: 1;
}

.assistant-composer__send--loading:hover,
.assistant-composer__send--loading:focus-visible {
    background: var(--assistant-panel-hover-bg);
    color: var(--assistant-panel-text);
}

.assistant-panel--maximized .assistant-panel__header {
    padding-right: 10px;
}

.assistant-panel--maximized .assistant-panel__messages {
    padding-right: 12px;
}

.assistant-panel--maximized .assistant-panel__composer-wrap {
    padding: 4px 0 8px;
}

.assistant-panel--maximized .assistant-panel__context-row {
    width: 789px;
}

.assistant-panel--maximized .assistant-composer {
    --assistant-composer-shell-width: 789px;
    --assistant-composer-inner-width: 765px;
    --assistant-composer-editor-width: 753px;
}

.ui-popover-trigger {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.ui-popover {
    z-index: 1100;
    pointer-events: none;
}

.ui-popover[popover] {
    inset: auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    color: inherit;
}

.ui-popover--tooltip[popover] {
    width: max-content;
    max-width: calc(100vw - 16px);
}

.ui-popover__offset {
    position: relative;
    padding: 8px 0;
}

.ui-popover--tooltip .ui-popover__offset {
    width: max-content;
    max-width: inherit;
}

.ui-popover__surface {
    max-height: var(--popper-max-height, none);
    overflow: var(--popper-overflow, visible);
    border: 0.5px solid var(--ui-popover-border, lch(22.88% 1.83 272 / 1));
    border-radius: 8px;
    background: var(--ui-popover-bg, lch(9.92% 0.75 272 / 1));
    color: var(--ui-popover-text, lch(90.895% 1.375 272 / 1));
    box-shadow:
        0 4px 4px -1px lch(0% 0 0 / 0.04),
        0 1px 1px 0 lch(0% 0 0 / 0.08);
    opacity: 1;
    transform: scale(1);
    transform-origin: var(--ui-popover-origin, 50% 0);
    animation: ui-popover-enter 120ms cubic-bezier(0.32, 0.72, 0, 1);
    pointer-events: auto;
}

.ui-popover--tooltip .ui-popover__surface {
    width: max-content;
    max-width: inherit;
}

.ui-tooltip-trigger {
    max-width: 100%;
}

.ui-tooltip__content {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: inherit;
    min-height: 27px;
    padding: 5px 8px;
    font-size: 0.6875rem;
    font-weight: 450;
    line-height: 16.5px;
    white-space: normal;
}

.ui-tooltip__label {
    min-width: 0;
    color: inherit;
    overflow-wrap: anywhere;
}

.ui-tooltip__key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 17px;
    padding: 2px;
    border: 0.5px solid var(--ui-tooltip-key-border, lch(16.4% 1.83 272 / 1));
    border-radius: 4px;
    background: transparent;
    color: var(--ui-tooltip-key-text, lch(63.582% 1.375 272 / 1));
    font-family: var(--font-regular);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 0.75rem;
}

@keyframes ui-popover-enter {
    from {
        opacity: 0;
        transform: scale(0.98);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.shell-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 540;
    cursor: default;
}

.anchored-dropdown-menu__backdrop {
    position: fixed;
    inset: 0;
    z-index: 640;
    background: transparent;
    cursor: default;
}

.anchored-dropdown-menu {
    position: absolute;
    z-index: 650;
}

.anchored-dropdown-menu[popover] {
    inset: auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    color: inherit;
}

.anchored-dropdown-menu--context {
    position: fixed;
}

.anchored-dropdown-menu > .shell-dropdown-menu {
    top: 0;
    left: 0;
}

.anchored-dropdown-menu--context > .shell-dropdown-menu {
    top: 0;
    right: auto;
    left: 0;
    width: 232px;
    transform: none;
    outline: none;
}

.anchored-dropdown-menu--context > .shell-dropdown-menu .shell-dropdown-menu__list {
    padding: 6px 0;
}

.anchored-dropdown-menu--below-end > .shell-dropdown-menu,
.anchored-dropdown-menu--board-header > .shell-dropdown-menu,
.anchored-dropdown-menu--grid-list-group > .shell-dropdown-menu,
.anchored-dropdown-menu--grid-list-row > .shell-dropdown-menu {
    top: 32px;
    left: 0;
    right: auto;
}

.anchored-dropdown-menu--card > .shell-dropdown-menu {
    top: 30px;
    left: 0;
    right: auto;
}

.anchored-dropdown-menu--context.anchored-dropdown-menu > .shell-dropdown-menu {
    top: 0;
    right: auto;
    left: 0;
    transform: none;
    outline: none;
}

.shell-dropdown-menu {
    position: absolute;
    top: 32px;
    left: 0;
    width: 250px;
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 12px;
    background: var(--shell-menu-bg);
    box-shadow: var(--shell-menu-shadow);
    overflow: visible;
    transform: scale(0.98);
    transform-origin: top left;
    z-index: 620;
}

.shell-dropdown-menu:focus {
    outline: none;
}

.shell-dropdown-menu__inner {
    overflow: visible;
    border-radius: 12px;
    background: var(--shell-menu-bg);
}

.shell-dropdown-menu__search-row {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px 0 14px;
}

.shell-dropdown-menu__search-form {
    position: relative;
    display: grid;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: 8px;
    width: 100%;
    height: 35px;
    overflow: hidden;
}

.shell-dropdown-menu__search-status {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.shell-dropdown-menu__search-input {
    min-width: 0;
    height: 35px;
    padding: 10px 0 9px;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--shell-menu-text);
    font-family: var(--font-regular);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: normal;
}

.shell-dropdown-menu__search-input::placeholder {
    color: var(--shell-menu-text);
    opacity: 1;
}

.shell-dropdown-menu__shortcut-strip {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 3px;
    margin-left: 12px;
}

.shell-dropdown-menu__shortcut-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 17px;
    padding: 2px;
    border: 0.5px solid color-mix(in srgb, var(--shell-menu-border) 64%, transparent);
    border-radius: 4px;
    background: transparent;
    color: var(--shell-menu-hint);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 0.75625rem;
}

.shell-dropdown-menu__header-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 24px;
    padding: 0 7px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    color: var(--shell-menu-hint);
    background: transparent;
    font-family: var(--font-regular);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
    cursor: default;
    transition: background-color 120ms ease, color 120ms ease;
}

.shell-dropdown-menu__header-action:hover,
.shell-dropdown-menu__header-action:focus-visible {
    color: var(--shell-menu-text-strong);
    background: var(--shell-menu-item-hover);
    outline: none;
}

.shell-dropdown-menu__list {
    margin: 0;
    padding: 6.5px 0;
    list-style: none;
    background: transparent;
}

.shell-dropdown-menu[role="dialog"] .shell-dropdown-menu__list {
    max-height: min(320px, calc(100vh - 120px));
    padding: 6px 0 4px;
    overflow: auto;
    scrollbar-width: none;
}

.shell-dropdown-menu[role="dialog"] .shell-dropdown-menu__list::-webkit-scrollbar {
    display: none;
}

.shell-dropdown-menu__empty {
    padding: 8px 14px;
    color: var(--shell-menu-hint);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}

.shell-dropdown-menu__row {
    position: relative;
    margin: 0;
}

.shell-dropdown-menu__row--has-children::after {
    content: "";
    position: absolute;
    top: -6px;
    bottom: -6px;
    left: 100%;
    width: 8px;
}

.shell-dropdown-menu__row--group-start {
    margin-top: 12px;
}

.shell-dropdown-menu__row--group-start::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 0;
    right: 0;
    height: 0.5px;
    background: var(--shell-menu-divider);
    pointer-events: none;
}

.shell-dropdown-menu__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 32px;
    padding: 0 18px 0 14px;
    text-align: left;
    color: var(--shell-menu-text);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: normal;
    background: transparent;
    cursor: default;
    transition: background-color 120ms ease, color 120ms ease;
}

.shell-dropdown-menu__item::before {
    content: "";
    position: absolute;
    inset: 0 6px;
    border-radius: 8px;
    background: transparent;
    transition: background-color 120ms ease;
    z-index: 0;
}

.shell-dropdown-menu__item > * {
    position: relative;
    z-index: 1;
}

.shell-dropdown-menu__item--current {
    color: var(--shell-menu-text-strong);
}

.shell-dropdown-menu__item--checkbox {
    padding-left: 13px;
}

.shell-dropdown-menu__item--selection {
    font-weight: 400;
}

.shell-dropdown-menu__item--color-default {
    color: var(--shell-menu-text);
}

.shell-dropdown-menu__item--color-strong {
    color: var(--shell-menu-text-strong);
}

.shell-dropdown-menu__item--color-danger {
    color: var(--shell-menu-text-danger);
}

.shell-dropdown-menu__item:hover,
.shell-dropdown-menu__item:focus-visible,
.shell-dropdown-menu__item--hovered,
.shell-dropdown-menu__row:hover > .shell-dropdown-menu__item,
.shell-dropdown-menu__row:focus-within > .shell-dropdown-menu__item {
    color: var(--shell-menu-text-strong);
}

.shell-dropdown-menu__item:hover::before,
.shell-dropdown-menu__item:focus-visible::before,
.shell-dropdown-menu__item--hovered::before,
.shell-dropdown-menu__row:hover > .shell-dropdown-menu__item::before,
.shell-dropdown-menu__row:focus-within > .shell-dropdown-menu__item::before {
    background: var(--shell-menu-item-hover);
}

.shell-dropdown-menu[role="dialog"] .shell-dropdown-menu__item::before {
    display: none;
}

.shell-dropdown-menu[role="dialog"] .shell-dropdown-menu__item:hover,
.shell-dropdown-menu[role="dialog"] .shell-dropdown-menu__item:focus-visible,
.shell-dropdown-menu[role="dialog"] .shell-dropdown-menu__item--hovered,
.shell-dropdown-menu[role="dialog"] .shell-dropdown-menu__row:hover > .shell-dropdown-menu__item,
.shell-dropdown-menu[role="dialog"] .shell-dropdown-menu__row:focus-within > .shell-dropdown-menu__item {
    background: var(--shell-menu-item-hover);
}

.shell-dropdown-menu__item:hover.shell-dropdown-menu__item--current,
.shell-dropdown-menu__item:focus-visible.shell-dropdown-menu__item--current,
.shell-dropdown-menu__item--hovered.shell-dropdown-menu__item--current,
.shell-dropdown-menu__row:hover > .shell-dropdown-menu__item--current,
.shell-dropdown-menu__row:focus-within > .shell-dropdown-menu__item--current {
    color: var(--shell-menu-text-strong);
}

.shell-dropdown-menu__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shell-dropdown-menu__content {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    height: 16px;
}

.shell-dropdown-menu__checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-right: 10px;
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 3px;
    color: lch(100% 5 288.421 / 1);
    background: transparent;
    flex: 0 0 auto;
}

.shell-dropdown-menu__checkbox svg {
    width: 10px;
    height: 10px;
}

.shell-dropdown-menu__checkbox--selected {
    border-color: var(--shell-accent, lch(47.918% 59.303 288.421 / 1));
    background: var(--shell-accent, lch(47.918% 59.303 288.421 / 1));
}

.shell-dropdown-menu__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    color: lch(63.582% 1.375 272 / 1);
    flex: 0 0 auto;
}

.shell-dropdown-menu__avatar,
.shell-dropdown-menu__swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-right: 8px;
}

.shell-dropdown-menu__avatar {
    width: 16px;
    height: 16px;
    overflow: hidden;
    border-radius: 9999px;
    background: color-mix(in lch, var(--accent-solid) 72%, var(--shell-bg-active));
    color: var(--accent-contrast);
    font-size: 0.5625rem;
    font-weight: 650;
    line-height: 1;
    object-fit: cover;
}

.shell-dropdown-menu__swatch {
    width: 9px;
    height: 9px;
    margin-right: 11px;
    border-radius: 9999px;
}

.shell-dropdown-menu__trailing {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    color: inherit;
    white-space: nowrap;
    flex: 0 0 auto;
}

.shell-dropdown-menu__selected-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--shell-menu-text);
}

.shell-dropdown-menu__hint {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.shell-dropdown-menu__key,
.shell-dropdown-menu__hint-text,
.shell-dropdown-menu__indicator {
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--font-regular);
    font-style: normal;
}

.shell-dropdown-menu__key {
    color: var(--shell-menu-hint);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 0.75625rem;
}

.shell-dropdown-menu__key + .shell-dropdown-menu__key {
    margin-left: 3px;
}

.shell-dropdown-menu__hint-text {
    margin: 0 4px;
    color: var(--shell-menu-hint);
    font-size: 0.6875rem;
    font-weight: 450;
    line-height: normal;
}

.shell-dropdown-menu__indicator {
    margin-left: 6px;
    color: var(--shell-menu-indicator);
    font-size: 6px;
    font-weight: 450;
    line-height: 1;
}

.shell-dropdown-menu__submenu-arrow {
    display: block;
    width: 16px;
    height: 7.5px;
    color: lch(39.91% 1.375 272 / 1);
    font-size: 6px;
    font-weight: 450;
    line-height: 7.5px;
    text-align: center;
}

.shell-dropdown-menu[data-menu-level="1"] {
    top: -6.5px;
    left: calc(100% + 3px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: none;
    outline: none;
}

.shell-dropdown-menu[data-menu-level="1"].shell-dropdown-menu--visible,
.shell-dropdown-menu__row--has-children:hover > .shell-dropdown-menu[data-menu-level="1"],
.shell-dropdown-menu__row--has-children:focus-within > .shell-dropdown-menu[data-menu-level="1"],
.shell-dropdown-menu__row--hovered > .shell-dropdown-menu[data-menu-level="1"],
.shell-dropdown-menu__item--has-children:hover + .shell-dropdown-menu[data-menu-level="1"],
.shell-dropdown-menu__item--has-children:focus + .shell-dropdown-menu[data-menu-level="1"],
.shell-dropdown-menu__row--submenu-open > .shell-dropdown-menu[data-menu-level="1"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 630;
}

.shell-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--shell-icon-size, 14px);
    height: var(--shell-icon-size, 14px);
    color: currentColor;
}

.shell-icon svg,
.shell-icon i {
    display: block;
    width: 100%;
    height: 100%;
}

.shell-icon i {
    font-size: var(--shell-icon-size, 14px);
    line-height: var(--shell-icon-size, 14px);
    text-align: center;
}

.shell-icon--14 {
    width: 14px;
    height: 14px;
}

.shell-icon--13 {
    width: 13px;
    height: 13px;
}

.shell-icon--12 {
    width: 12px;
    height: 12px;
}

.shell-icon--8 {
    width: 8px;
    height: 8px;
}

.shell-icon--9 {
    width: 9px;
    height: 9px;
}

.shell-icon--16 {
    width: 16px;
    height: 16px;
}

.shell-icon--18 {
    width: 18px;
    height: 18px;
}

.shell-icon--20 {
    width: 20px;
    height: 20px;
}

.shell-icon--24 {
    width: 24px;
    height: 24px;
}

.shell-icon--28 {
    width: 28px;
    height: 28px;
}

.settings-select {
    position: relative;
    display: inline-flex;
    max-width: 100%;
    --settings-select-selected-index: 0;
    --settings-select-option-count: 0;
}

.settings-select--full {
    display: flex;
    width: 100%;
}

.settings-select--open {
    z-index: 670;
}

.settings-select__scrim {
    position: fixed;
    inset: 0;
    z-index: 660;
    border: 0;
    background: transparent;
    cursor: default;
}

.settings-select__trigger {
    position: relative;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    max-width: 100%;
    height: 30px;
    margin: 1px 0;
    padding: 1px 28px 1px 10px;
    overflow: hidden;
    border: 0.5px solid var(--settings-input-border, var(--settings-control-border, lch(22.79% 1.83 272)));
    border-radius: 8px;
    background-color: var(--settings-control-bg, lch(13.841% 0.943 272));
    box-shadow: none;
    color: var(--settings-control-text, lch(90.668% 1.375 272));
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: normal;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition-duration: 0.15s;
    transition-property: background-color, border-color, color, box-shadow;
}

.settings-select--full .settings-select__trigger {
    width: 100%;
}

.settings-select__trigger:hover:not(:disabled),
.settings-select__trigger:focus-visible {
    border-color: var(--settings-input-hover-border, var(--settings-control-hover-border, lch(26.47% 6.83 272)));
    outline: none;
    transition-duration: 0s;
}

.settings-select--with-leading .settings-select__trigger {
    padding-left: 5px;
}

.settings-select__trigger-content {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.settings-select__trigger-label {
    display: block;
    color: inherit;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.21875rem;
}

.settings-select__chevron {
    position: absolute;
    top: 50%;
    right: 10px;
    display: inline-flex;
    width: 10px;
    height: 5px;
    color: var(--shell-text-secondary, lch(62.672% 1.375 272));
    transform: translateY(-50%);
    pointer-events: none;
}

.settings-select__chevron .shell-icon,
.settings-select__chevron svg {
    width: 10px;
    height: 5px;
}

.settings-select__panel {
    position: fixed;
    inset: auto;
    top: 0;
    left: 0;
    z-index: 670;
    display: flex;
    box-sizing: border-box;
    margin: 0;
    min-width: calc(var(--settings-select-anchor-width, 0px) + 13.3px);
    width: max-content;
    max-width: min(260px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    overflow: hidden;
    border: 0.5px solid var(--settings-select-panel-border, lch(18.47% 1.83 272));
    border-radius: 12px;
    background: var(--settings-select-panel-bg, lch(13.07% 1.2 272));
    box-shadow:
        lch(0% 0 0 / 0.125) 0 3px 8px,
        lch(0% 0 0 / 0.125) 0 2px 5px,
        lch(0% 0 0 / 0.125) 0 1px 1px;
    color: var(--settings-control-text, rgb(255, 255, 255));
}

.settings-select__panel:popover-open {
    display: flex;
}

.shell-sidebar__footer .settings-select__panel {
    bottom: auto;
}

.settings-select__viewport {
    width: 100%;
    padding: 4px 0;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.settings-select__viewport::-webkit-scrollbar {
    display: none;
}

.settings-select__section-label {
    height: 27px;
    margin-top: 10px;
    padding: 8px 25px 6px 12px;
    color: var(--shell-text-secondary, lch(64.855% 1.6 272));
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: normal;
}

.settings-select__option {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 32px;
    padding: 0 35px 0 12px;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: var(--settings-control-text, lch(91.214% 1.6 272));
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.21875rem;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.settings-select__option-preview {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 33.5px;
    height: 21px;
    margin-right: 6px;
    padding: 2px 4px;
    border: 0.5px solid color-mix(in srgb, currentColor 14%, transparent);
    border-radius: 8px;
    background: var(--app-theme-chip-bg, rgb(15, 15, 16));
    color: var(--app-theme-chip-color, rgb(226, 227, 229));
    font-size: 0.6875rem;
    font-weight: 450;
    line-height: normal;
}

.settings-select__trigger-preview {
    flex: 0 0 auto;
    margin-right: 0;
}

.settings-select__option::before {
    content: "";
    position: absolute;
    inset: 0 4px;
    border-radius: 8px;
    background-color: transparent;
}

.settings-select__option:hover::before,
.settings-select__option:focus-visible::before {
    background-color: var(--settings-control-hover-bg, lch(18.47% 1.2 272));
}

.settings-select__option:focus-visible {
    outline: none;
}

.settings-select__option-label {
    position: relative;
    z-index: 1;
    display: block;
    color: inherit;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.21875rem;
}

.settings-select__check {
    position: absolute;
    top: 50%;
    right: 8px;
    z-index: 1;
    display: flex;
    align-items: center;
    width: 25px;
    height: 16px;
    color: var(--shell-text-secondary, lch(64.855% 1.6 272));
    transform: translateY(-50%);
}

.settings-select__check svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.selection-dropdown {
    display: inline-flex;
    position: relative;
}

.selection-dropdown--open {
    z-index: 6;
}

.selection-dropdown__scrim {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: transparent;
    cursor: default;
}

.selection-dropdown__anchor {
    display: inline-flex;
    position: relative;
    z-index: 1;
}

.selection-dropdown__panel {
    --selection-dropdown-width: 204px;
    --selection-dropdown-max-height: none;
    position: fixed;
    inset: auto;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    z-index: 620;
    display: flex;
    flex-direction: column;
    width: var(--selection-dropdown-width);
    max-height: var(--selection-dropdown-max-height);
    margin: 0;
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 12px;
    background: var(--shell-menu-bg);
    box-shadow: var(--shell-menu-shadow);
    color: var(--shell-menu-text);
    overflow: hidden;
    animation: selection-dropdown-in 120ms cubic-bezier(0.2, 0.82, 0.24, 1) forwards;
}

.selection-dropdown__panel:popover-open {
    display: flex;
}

.selection-dropdown__panel--align-end {
    right: auto;
}

.selection-dropdown__search-row,
.selection-dropdown__compact-header {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    padding: 0 12px 0 14px;
}

.selection-dropdown__compact-header {
    justify-content: space-between;
}

.selection-dropdown__header-label {
    color: var(--shell-menu-hint);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.21875rem;
}

.selection-dropdown__search-input {
    min-width: 0;
    flex: 1 1 auto;
    height: 35px;
    padding: 10px 0 9px;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--shell-menu-text);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: normal;
}

.selection-dropdown__search-input::placeholder {
    color: var(--shell-menu-text);
    opacity: 1;
}

.selection-dropdown__search-input--hidden {
    position: absolute;
    top: 0;
    left: -99999px;
    width: 80px;
    padding-inline: 0;
}

.selection-dropdown__shortcut-strip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
}

.selection-dropdown__shortcut-key,
.selection-dropdown__item-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 2px;
    border: 0.5px solid lch(16.4% 1.83 272 / 1);
    border-radius: 4px;
    color: var(--shell-menu-hint);
    background: transparent;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 0.75625rem;
}

.selection-dropdown__list {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 0;
    margin: 0;
    padding: 6px 0 4px;
    list-style: none;
    overflow: auto;
    scrollbar-width: none;
}

.selection-dropdown__list::-webkit-scrollbar {
    display: none;
}

.selection-dropdown__empty,
.selection-dropdown__section-label {
    padding: 8px 14px;
    color: var(--shell-menu-hint);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}

.selection-dropdown__section-label {
    padding-top: 9px;
    padding-bottom: 5px;
}

.selection-dropdown__option {
    display: flex;
    align-items: center;
    min-height: 32px;
    padding: 0 18px 0 14px;
    color: var(--shell-menu-text);
    cursor: default;
    transition: background-color 120ms ease, color 120ms ease;
}

.selection-dropdown__option--multiple {
    padding-left: 13px;
}

.selection-dropdown__option--group-start {
    margin-top: 12px;
}

.selection-dropdown__option--active,
.selection-dropdown__option:hover {
    background: var(--shell-menu-item-hover);
}

.selection-dropdown__option--nonselectable {
    color: var(--shell-menu-text);
}

.selection-dropdown__checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 11.84px;
    height: 11.84px;
    margin-right: 10px;
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 3.5px;
    color: var(--shell-menu-text-strong);
    background: transparent;
    flex: 0 0 auto;
}

.selection-dropdown__checkbox svg {
    width: 10px;
    height: 8px;
}

.selection-dropdown__checkbox--selected {
    background: lch(47.918% 59.303 288.421 / 1);
    border-color: lch(47.918% 59.303 288.421 / 1);
}

.selection-dropdown__option-body {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    gap: 0;
}

.selection-dropdown__leading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    min-width: 18px;
    margin-right: 10px;
    flex: 0 0 auto;
}

.selection-dropdown__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.selection-dropdown__avatar {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 9999px;
}

.selection-dropdown__swatch {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
}

.selection-dropdown__content {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
}

.selection-dropdown__label-row {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
}

.selection-dropdown__label,
.selection-dropdown__meta,
.selection-dropdown__description {
    font-size: 0.8125rem;
    line-height: 1.21875rem;
}

.selection-dropdown__label {
    color: var(--shell-menu-text);
    font-weight: 450;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.selection-dropdown__meta,
.selection-dropdown__description {
    color: var(--shell-menu-hint);
    font-weight: 400;
    white-space: nowrap;
}

.selection-dropdown__trailing {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: auto;
    flex: 0 0 auto;
}

.selection-dropdown__check,
.selection-dropdown__disclosure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--shell-menu-hint);
}

@keyframes selection-dropdown-in {
    from {
        opacity: 0;
        transform: translateY(-2px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.create-modal {
    display: flex;
    flex-direction: column;
    min-height: var(--app-modal-current-min-height, 260.6953125px);
    color: var(--shell-menu-text);
    transition: min-height var(--app-modal-resize-duration) var(--app-modal-resize-ease);
}

.create-modal__header {
    display: flex;
    align-items: center;
    gap: 3.5px;
    min-height: 24px;
    padding: 12px 92px 0 12px;
    transition: padding-top var(--app-modal-resize-duration) var(--app-modal-resize-ease);
}

.create-modal__team-pill {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 8px 0 5px;
    border-radius: 9999px;
    background: lch(16.091% 0.943 272 / 1);
    color: var(--shell-menu-text);
    transition: background-color 120ms ease, color 120ms ease;
}

.create-modal__team-pill:hover,
.create-modal__team-pill:focus-visible {
    background: lch(18% 1 272 / 1);
    color: var(--shell-menu-text-strong);
}

.create-modal__team-pill-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-right: 4px;
    color: #ff2fcd;
}

.create-modal__team-pill-composite,
.create-modal__team-pill-provider {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 450;
    line-height: normal;
    color: var(--shell-menu-text);
}

.create-modal__team-pill-separator {
    display: inline-flex;
    width: 8px;
    height: 13px;
    color: var(--shell-menu-indicator);
}

.create-modal__team-pill-separator svg {
    width: 8px;
    height: 13px;
}

.create-modal__label {
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: normal;
    color: var(--shell-menu-text);
}

.create-modal__header-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10px;
    height: 10px;
    color: var(--shell-menu-indicator);
}

.create-modal__header-chevron svg {
    width: 10px;
    height: 10px;
}

.create-modal__editors {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 6px;
    margin-top: 21px;
    padding: 0 18px;
    transition:
        margin-top var(--app-modal-resize-duration) var(--app-modal-resize-ease),
        padding var(--app-modal-resize-duration) var(--app-modal-resize-ease);
}

.create-modal__title-mirror {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
}

.create-modal__editor {
    position: relative;
    outline: none;
    border: 0;
    white-space: pre-wrap;
    word-break: break-word;
    caret-color: var(--shell-text-primary);
}

.create-modal__editor:empty::before {
    content: attr(data-placeholder);
    color: inherit;
}

.create-modal__editor--title {
    height: 24px;
    min-height: 24px;
    color: var(--shell-text-primary);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.8rem;
    letter-spacing: -0.1px;
}

.create-modal__editor--description {
    flex: 1 1 auto;
    min-height: 79.1953125px;
    padding: 6px 0 12px;
    color: var(--shell-menu-text);
    font-size: 0.9375rem;
    font-weight: 450;
    line-height: 1.5rem;
    transition:
        min-height var(--app-modal-resize-duration) var(--app-modal-resize-ease),
        padding var(--app-modal-resize-duration) var(--app-modal-resize-ease);
}

.create-modal__rich-text {
    flex: 1 1 auto;
    color: var(--shell-menu-text);
    transition:
        min-height var(--app-modal-resize-duration) var(--app-modal-resize-ease),
        padding var(--app-modal-resize-duration) var(--app-modal-resize-ease);
}

.create-modal__footer {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 6px;
    transition: margin-top var(--app-modal-resize-duration) var(--app-modal-resize-ease);
}

.create-modal__pill-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
}

.create-modal__pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 8px 0 6px;
    border-radius: 9999px;
    background: lch(16.091% 0.943 272 / 1);
    color: var(--shell-menu-hint);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.create-modal__pill[aria-expanded="true"],
.create-modal__team-pill[aria-expanded="true"] {
    background: var(--shell-menu-item-hover);
    color: var(--shell-menu-text);
}

.create-modal__pill:hover,
.create-modal__pill:focus-visible,
.create-modal__attach-button:hover,
.create-modal__attach-button:focus-visible {
    background: var(--shell-menu-item-hover);
    color: var(--shell-menu-text);
}

.create-modal__pill--icon-only {
    width: 32px;
    padding: 0;
    justify-content: center;
}

.create-modal__pill--more {
    width: 24px;
    box-shadow: var(--shell-shadow);
    color: var(--shell-menu-text);
}

.create-modal__pill-icon,
.create-modal__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.create-modal__pill .selection-dropdown__shortcut-strip,
.create-modal__team-pill .selection-dropdown__shortcut-strip {
    display: none;
}

.create-modal__avatar img {
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 9999px;
}

.create-modal__action-row {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 40px;
    padding: 0 12px 12px;
}

.create-modal__attach-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    background: lch(16.091% 0.943 272 / 1);
    color: var(--shell-menu-hint);
    transition: background-color 120ms ease, color 120ms ease;
}

.create-modal__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 1px;
    margin-left: auto;
    cursor: default;
}

.create-modal__toggle-input {
    position: relative;
    display: block;
    width: 30px;
    height: 20px;
    margin: 0;
    padding: 0;
    appearance: none;
    border: 0;
    border-radius: 72px;
    background: var(--ui-toggle-off-bg, lch(47.275% 0.867 272.002 / 1));
    transition: background-color 150ms ease-out, opacity 150ms ease-out;
    cursor: default;
}

.create-modal__toggle-input::before {
    content: "";
    position: absolute;
    inset: -6px;
}

.create-modal__toggle-input::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    background: var(--ui-toggle-thumb-bg, lch(100% 5 288.421 / 1));
    transform: translateY(-50%);
    transition: left 150ms ease-out, background-color 150ms ease-out;
}

.create-modal__toggle-input:checked {
    background: var(--ui-toggle-on-bg, var(--app-theme-accent, lch(47.918% 59.303 288.421 / 1)));
}

.create-modal__toggle-input:checked::after {
    left: 13px;
}

.create-modal__toggle-input:disabled {
    opacity: var(--ui-toggle-disabled-opacity, 0.5);
}

.create-modal__toggle-label {
    color: var(--shell-menu-hint);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.125rem;
    user-select: none;
    cursor: default;
}

.create-modal__primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92.625px;
    height: 28px;
    margin-left: 0;
    padding: 0 10px;
    border-radius: 9999px;
    background: lch(47.918% 59.303 288.421 / 1);
    color: lch(100% 5 288.421 / 1);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    transition: filter 120ms ease;
}

.create-modal__primary-action:hover,
.create-modal__primary-action:focus-visible {
    filter: brightness(1.06);
}

.selection-sheet {
    display: flex;
    flex-direction: column;
    color: var(--shell-menu-text);
    overflow: hidden;
}

.selection-sheet__header {
    display: flex;
    align-items: flex-start;
    min-height: 44px;
    padding: 14px 56px 10px 16px;
    box-shadow: inset 0 -0.5px 0 color-mix(in srgb, var(--shell-menu-border) 76%, transparent);
}

.selection-sheet__heading {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.selection-sheet__title,
.selection-sheet__message {
    margin: 0;
    letter-spacing: 0;
}

.selection-sheet__title {
    color: var(--shell-menu-text-strong);
    font-size: 0.9375rem;
    font-weight: 550;
    line-height: 1.25rem;
}

.selection-sheet__message {
    color: var(--shell-menu-hint);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.125rem;
}

.selection-sheet__search-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 14px;
    box-shadow: inset 0 -0.5px 0 color-mix(in srgb, var(--shell-menu-border) 76%, transparent);
}

.selection-sheet__search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--shell-menu-hint);
    flex: 0 0 auto;
}

.selection-sheet__search-input {
    min-width: 0;
    flex: 1 1 auto;
    height: 35px;
    padding: 8px 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--shell-menu-text);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: normal;
}

.selection-sheet__search-input::placeholder {
    color: var(--shell-menu-hint);
    opacity: 1;
}

.selection-sheet__list {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    max-height: min(408px, calc(100vh - 284px));
    margin: 0;
    padding: 6px 0;
    list-style: none;
    overflow: auto;
    scrollbar-width: none;
}

.selection-sheet__list::-webkit-scrollbar {
    display: none;
}

.selection-sheet__empty,
.selection-sheet__section-label {
    padding: 8px 14px;
    color: var(--shell-menu-hint);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}

.selection-sheet__section-label {
    padding-top: 9px;
    padding-bottom: 5px;
}

.selection-sheet__option {
    display: flex;
    align-items: center;
    min-height: 32px;
    padding: 0 14px;
    color: var(--shell-menu-text);
    cursor: default;
    transition:
        background-color 120ms ease,
        color 120ms ease;
}

.selection-sheet__option--with-description {
    min-height: 44px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.selection-sheet__option--group-start {
    margin-top: 8px;
}

.selection-sheet__option--active,
.selection-sheet__option:hover {
    background: var(--shell-menu-item-hover);
    color: var(--shell-menu-text-strong);
}

.selection-sheet__option--nonselectable {
    color: var(--shell-menu-hint);
}

.selection-sheet__leading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    min-width: 20px;
    margin-right: 10px;
    color: var(--shell-menu-hint);
}

.selection-sheet__icon,
.selection-sheet__check,
.selection-sheet__disclosure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.selection-sheet__avatar {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 9999px;
}

.selection-sheet__swatch {
    display: block;
    width: 9px;
    height: 9px;
    border-radius: 9999px;
}

.selection-sheet__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.selection-sheet__label-row {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 6px;
}

.selection-sheet__label,
.selection-sheet__meta,
.selection-sheet__description {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.selection-sheet__label {
    color: var(--shell-menu-text);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.21875rem;
}

.selection-sheet__meta,
.selection-sheet__description {
    color: var(--shell-menu-hint);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1rem;
}

.selection-sheet__trailing {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: 12px;
    color: var(--shell-menu-hint);
    flex: 0 0 auto;
}

.selection-sheet__check {
    color: var(--shell-menu-text-strong);
}

.selection-sheet__shortcut {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 2px;
    border: 0.5px solid lch(16.4% 1.83 272 / 1);
    border-radius: 4px;
    color: var(--shell-menu-hint);
    background: transparent;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 0.75625rem;
}

.selection-sheet__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px 12px;
    box-shadow: inset 0 0.5px 0 color-mix(in srgb, var(--shell-menu-border) 76%, transparent);
}

.selection-sheet__selected-count {
    min-width: 0;
    overflow: hidden;
    color: var(--shell-menu-hint);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selection-sheet__footer-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.split-view {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
}

.split-view--top-border {
    box-shadow: inset 0 0.5px 0 var(--shell-border);
}

.split-view__pane {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.split-view__pane--left {
    flex: 0 0 var(--split-view-left-width);
    width: var(--split-view-left-width);
}

.split-view__pane--right {
    flex: 1 1 auto;
}

.split-view__header {
    display: flex;
    flex: 0 0 auto;
    min-height: 44px;
    box-shadow: inset 0 -0.5px 0 var(--shell-border);
}

.split-view__header-inner {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 43.5px;
    padding: 0 8px;
}

.split-view-header-stack {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    flex: 1 1 auto;
    min-width: 0;
}

.pill-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: var(--pill-tabs-min-height, 43.5px);
    min-width: 0;
    margin-top: 0.75px;
}

.pill-tabs__items {
    display: flex;
    align-items: center;
    gap: var(--pill-tabs-gap, 6px);
    min-width: 0;
    flex: 1 1 auto;
}

.pill-tabs__actions {
    display: flex;
    align-items: center;
    gap: var(--pill-tabs-actions-gap, 6px);
    margin-left: auto;
    flex: 0 0 auto;
}

.pill-tab-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 28px;
    height: 28px;
    padding: 0 10px;
    margin: 0;
    border-radius: 9999px;
    border: 0.5px solid transparent;
    --button-tab-current-bg: var(--button-tab-bg, var(--shell-bg-button, lch(6.449% 0.493 272 / 1)));
    --button-tab-current-color: var(--button-tab-color, var(--shell-text-secondary, lch(61.399% 1.15 272 / 1)));
    --button-tab-current-border: var(--button-tab-border, var(--shell-menu-border, lch(100% 0 0 / 0.136)));
    --button-tab-current-shadow: var(--button-tab-shadow, var(--shell-shadow, 0px 4px 4px -1px lch(0% 0 0 / 0.04), 0px 1px 1px 0 lch(0% 0 0 / 0.08)));
    background: var(--button-tab-current-bg);
    background-clip: padding-box;
    color: var(--button-tab-current-color);
    white-space: nowrap;
    user-select: none;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0;
    transition-property: border, background-color, color, opacity;
    transition-duration: 0.15s;
}

.pill-tab-button::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow:
        0 0 0 0.5px var(--button-tab-current-border),
        var(--button-tab-current-shadow);
    transition-property: box-shadow;
    transition-duration: inherit;
}

.pill-tab-button:hover,
.pill-tab-button:focus-visible,
.pill-tab-button--grouped:focus-within,
.pill-tab-button[data-menu-open="true"] {
    --button-tab-current-bg: var(--button-tab-hover-bg, var(--shell-menu-item-hover, var(--shell-bg-hover, lch(9.92% 0.493 272 / 1))));
    --button-tab-current-color: var(--button-tab-hover-color, var(--shell-text-primary, lch(90.35% 1.15 272 / 1)));
    --button-tab-current-border: var(--button-tab-hover-border, var(--shell-menu-border, lch(100% 0 0 / 0.158)));
}

.pill-tab-button--active,
.pill-tab-button--active:hover,
.pill-tab-button--active:focus-visible {
    --button-tab-current-bg: var(--button-tab-active-bg, var(--shell-tab-active-bg, var(--shell-nav-active-bg, lch(12.234% 0.879 272 / 1))));
    --button-tab-current-color: var(--button-tab-active-color, var(--shell-text-primary, lch(100% 0 272 / 1)));
    --button-tab-current-border: var(--button-tab-active-border, var(--shell-tab-active-ring, lch(100% 0 0 / 0.158)));
    --button-tab-current-shadow: 0 0 0 0 rgb(0 0 0 / 0);
    background: var(--button-tab-current-bg);
    background-clip: padding-box;
    background-origin: padding-box;
    color: var(--button-tab-current-color);
}

.pill-tab-button__label {
    display: block;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

.pill-tab-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    opacity: 0.86;
}

.pill-tab-button:focus-visible {
    outline: 2px solid transparent;
}

.pill-tab-button--grouped {
    padding: 0;
    gap: 0;
    overflow: visible;
    isolation: isolate;
}

.pill-tab-button--grouped .pill-tab-button__label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.pill-tab-button__group-trigger,
.pill-tab-button__group-toggle {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    min-width: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: inherit;
    white-space: nowrap;
    cursor: pointer;
}

.pill-tab-button__group-trigger {
    gap: 6px;
    padding: 0 9px 0 10px;
    border-radius: 9999px 0 0 9999px;
}

.pill-tab-button__group-toggle {
    width: 26px;
    padding: 0;
    border-radius: 0 9999px 9999px 0;
}

.pill-tab-button__group-trigger:focus-visible,
.pill-tab-button__group-toggle:focus-visible {
    outline: 2px solid transparent;
}

.pill-tab-button__group-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    opacity: 0.86;
}

.pill-tab-button__group-divider {
    position: relative;
    z-index: 1;
    display: block;
    flex: 0 0 auto;
    width: 0.5px;
    height: 16px;
    background: var(--button-tab-current-border);
    opacity: 1;
}

.anchored-dropdown-menu--pill-tab-group > .shell-dropdown-menu {
    top: 32px;
    left: 0;
    right: auto;
    width: 208px;
}

.split-view__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    overflow: auto;
    scrollbar-width: none;
}

.split-view--inset-inline .split-view__body {
    padding-inline: var(--split-view-body-padding-inline, 8px);
}

.split-view--inset-inline .split-view__body > .panel-list .panel-list-item__chrome {
    margin-inline: 0;
}

.split-view__body::-webkit-scrollbar {
    display: none;
}

.split-view__divider {
    position: absolute;
    inset: 0 auto 0 var(--split-view-left-width);
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 10px;
    padding: 0 4px;
    transform: translateX(-50%);
    cursor: col-resize;
    touch-action: none;
    z-index: 2;
    outline: none;
}

.split-view__divider-line {
    width: 1px;
    height: 100%;
    background: var(--shell-border);
    transition: background-color 120ms ease;
}

.split-view__divider:hover .split-view__divider-line,
.split-view__divider:focus-visible .split-view__divider-line,
.split-view__divider[data-dragging="true"] .split-view__divider-line {
    background: color-mix(in srgb, var(--shell-text-secondary) 56%, var(--shell-border));
}

.split-view[data-dragging="true"] {
    cursor: col-resize;
    user-select: none;
}

.panel-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(100% + var(--panel-empty-state-top-compensation, 0px));
    min-height: 0;
    margin-top: calc(var(--panel-empty-state-top-compensation, 0px) * -1);
}

.panel-empty-state__content {
    display: flex;
    flex-direction: column;
    align-items: var(--panel-empty-state-align-items, center);
    gap: var(--panel-empty-state-section-gap, 20px);
    width: var(--panel-empty-state-content-width, 135.3671875px);
    min-height: var(--panel-empty-state-content-min-height, 135.5px);
    padding-bottom: var(--panel-empty-state-padding-bottom, 20px);
}

.panel-empty-state__graphic {
    display: flex;
    align-items: center;
    justify-content: center;
}

.panel-empty-state__text {
    display: flex;
    flex-direction: column;
    gap: var(--panel-empty-state-text-gap, 0px);
    width: 100%;
    text-align: var(--panel-empty-state-text-align, center);
}

.panel-empty-state__title {
    color: var(--shell-text-tertiary, lch(90.35% 1.15 272));
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4375rem;
    white-space: normal;
}

.panel-empty-state__inbox-illustration {
    width: 97.5px;
    height: 100px;
}

.panel-empty-state__pulse-illustration {
    width: 84.6484375px;
    height: 80px;
}

.panel-empty-state__inbox-stroke-shadow {
    stroke: var(--shell-border, lch(19.64% 1.38 272));
}

.panel-empty-state__inbox-stroke-muted {
    stroke: var(--shell-text-secondary, lch(61.399% 1.15 272));
}

.panel-empty-state__inbox-stroke-strong {
    stroke: var(--shell-text-tertiary, lch(90.35% 1.15 272));
}

.panel-empty-state__message {
    color: var(--panel-empty-state-message-color, lch(61.399% 1.15 272));
    font-size: var(--panel-empty-state-message-font-size, 13px);
    font-weight: var(--panel-empty-state-message-font-weight, 500);
    line-height: var(--panel-empty-state-message-line-height, normal);
    white-space: var(--panel-empty-state-message-white-space, nowrap);
}

.panel-empty-state__actions {
    display: flex;
    width: 100%;
}

.panel-empty-state--wrap-message .panel-empty-state__message {
    white-space: var(--panel-empty-state-message-white-space, normal);
}

.single-column-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.single-column-page__header {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
}

.single-column-page__title-row {
    min-height: 44px;
    border-bottom: 0.5px solid var(--single-column-page-divider, var(--shell-border));
}

.single-column-page__title-row-inner,
.single-column-page__secondary-row-inner {
    display: flex;
    align-items: center;
    min-height: 43.5px;
    padding: 0 8px;
}

.single-column-page__secondary-row {
    min-height: 43.5px;
    border-bottom: 0.5px solid var(--single-column-page-divider, var(--shell-border));
}

.single-column-page__body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: auto;
    scrollbar-width: none;
}

.single-column-page__body::-webkit-scrollbar {
    display: none;
}

.single-column-page__body-inner {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-width: 0;
    min-height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 8px 0;
}

.single-column-page__body--flush .single-column-page__body-inner {
    padding: 0;
}

.single-column-page__body--fill {
    overflow: hidden;
}

.single-column-page__body--fill .single-column-page__body-inner {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
}

.single-column-page__body-inner::after {
    content: "";
    display: block;
    flex: 0 0 8px;
}

.single-column-page__body--flush .single-column-page__body-inner::after,
.single-column-page__body--fill .single-column-page__body-inner::after {
    content: none;
}

.fill-region {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

.fill-region > * {
    flex: 1 1 auto;
    min-height: 0;
}

.tabbed-single-column-page__tabs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.tabbed-single-column-page__tabs-leading {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
}

.tabbed-single-column-page__tabs {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 0 1 auto;
}

.tabbed-single-column-page__tabs-inline-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.tabbed-single-column-page__tab-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex: 0 0 auto;
}

.tabbed-single-column-page__tab-actions .grid-toolbar {
    height: 28px;
    padding: 0;
    border-bottom: 0;
}

.basic-page {
    --basic-page-bottom-gutter: 72px;
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 64px 0 var(--basic-page-bottom-gutter);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.basic-page::-webkit-scrollbar {
    display: none;
}

.basic-page__mobile-shell-header {
    display: none;
}

.basic-page__mobile-shell-title {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 0.96875rem;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.basic-page__mobile-shell-title--link:hover,
.basic-page__mobile-shell-title--link:focus-visible {
    color: var(--shell-text-primary);
    outline: none;
}

.basic-page--wide {
    padding-top: 51px;
    padding-bottom: var(--basic-page-bottom-gutter);
}

.basic-page--with-back {
    padding-top: 0;
}

.basic-page--with-back .basic-page__backbar {
    top: 0;
}

.basic-page__backbar {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    flex: 0 0 64px;
    align-items: flex-start;
    height: 64px;
    padding: 10px 8px 0;
    box-sizing: border-box;
    pointer-events: none;
}

.basic-page__backbar-sidebar-toggle {
    display: none;
    flex: 0 0 auto;
    pointer-events: auto;
}

.basic-page__back-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: normal;
    pointer-events: auto;
}

.basic-page__back-link:hover,
.basic-page__back-link:focus-visible {
    border-color: transparent;
    background: var(--shell-menu-item-hover, lch(9.92% 0.493 272));
    color: var(--shell-text-primary, lch(100% 0 272));
    outline: none;
}

.basic-page__back-link:hover svg,
.basic-page__back-link:focus-visible svg {
    color: var(--shell-text-primary, lch(100% 0 272));
}

.basic-page__back-link-icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
    margin-right: 6px;
    flex: 0 0 auto;
}

.basic-page__inner {
    display: flex;
    flex-direction: column;
}

.basic-page__inner--constrained {
    width: min(640px, calc(100vw - 48px));
    max-width: 640px;
    margin: 0 auto;
}

.basic-page__inner--wide {
    width: auto;
    margin: 0 56px;
}

.basic-page__header {
    margin-bottom: 32px;
}

.basic-page__header--divider {
    margin-bottom: 32px;
    padding-bottom: 29px;
    border-bottom: 0.5px solid var(--shell-border);
}

.basic-page__inner--wide .basic-page__header {
    margin-bottom: 20px;
}

.basic-page__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 32px;
    padding: 0 16px;
}

.basic-page__inner--wide .basic-page__title-row {
    padding: 0;
}

.basic-page__title-row--flush {
    padding: 0;
}

.basic-page__title-main {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
}

.basic-page__title-row--flush .basic-page__title-main {
    gap: 16px;
}

.basic-page__title-leading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 8px;
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
}

.basic-page__title-main:has(.basic-page__title-leading) {
    min-height: 38px;
}

.basic-page__title-main:has(.basic-page__title-leading[style*="48px"]) {
    min-height: 48px;
}

.basic-page__title-main:has(.basic-page__title-leading) .basic-page__title {
    font-size: 1.125rem;
    line-height: normal;
}

.basic-page__title-stack {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.basic-page__title {
    min-width: 0;
    margin: 0;
    color: var(--shell-text-primary);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 2rem;
}

.basic-page__title-secondary {
    color: lch(61.399% 1.15 272);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: normal;
}

.basic-page__header-actions {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
}

.basic-page__subtitle {
    width: 100%;
    margin-top: 4px;
    padding: 0 16px;
    color: lch(61.399% 1.15 272);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.375rem;
}

.basic-page__inner--wide .basic-page__subtitle {
    padding: 0;
}

.basic-page__meta {
    display: flex;
    justify-content: flex-end;
    margin: 6px 0 3px;
    padding: 0 16px;
}

.basic-page__inner--wide .basic-page__meta {
    padding: 0;
}

.basic-page:not(.basic-page--with-back):has(.settings-toolbar) {
    padding-top: 64px;
}

.basic-page__meta:has(.settings-toolbar) {
    justify-content: stretch;
    margin: 12px 0 0;
}

@media (width <= 1024px) {
    .basic-page.basic-page--with-shell-header {
        padding-top: 0;
    }

    .basic-page__mobile-shell-header {
        position: sticky;
        top: 0;
        z-index: 30;
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 0 8px;
        background: var(--shell-bg-surface, var(--shell-bg-sidebar));
        color: var(--shell-text-primary);
    }

    .basic-page__mobile-shell-header .page-title-bar {
        min-height: 44px;
    }

    .basic-page__mobile-shell-header .page-title-bar__sidebar-toggle {
        display: grid;
    }

    .basic-page__backbar-sidebar-toggle {
        display: grid;
        margin-right: 8px;
    }

    .basic-page.basic-page--with-shell-header:not(.basic-page--with-back) .basic-page__inner {
        margin-top: 48px;
    }

    .basic-page.basic-page--with-shell-header.basic-page--with-back .basic-page__backbar {
        flex-basis: 55px;
        height: 55px;
        padding-top: 1px;
    }
}

@media (max-width: 760px) {
    .basic-page {
        --basic-page-bottom-gutter: 56px;
        padding: 48px 0 var(--basic-page-bottom-gutter);
    }

    .basic-page.basic-page--with-shell-header {
        padding-top: 0;
    }

    .basic-page--with-back {
        padding-top: 0;
    }

    .basic-page.basic-page--with-shell-header.basic-page--with-back .basic-page__backbar {
        flex-basis: 43px;
        height: 43px;
    }

    .basic-page__inner--constrained,
    .basic-page__inner--wide {
        width: auto;
        max-width: none;
        margin: 0 16px;
        transform: none;
    }

    .basic-page__title-row,
    .basic-page__subtitle,
    .basic-page__meta {
        padding: 0;
    }
}

.detail-sidebar-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
    --detail-sidebar-page-content-width: 805px;
    --detail-sidebar-page-content-min-gutter: 40px;
    --detail-sidebar-page-sidebar-width: 318px;
}

.detail-sidebar-page__header {
    flex: 0 0 auto;
    min-height: 44px;
    box-shadow: inset 0 -0.5px 0 var(--shell-border);
}

.detail-sidebar-page__header-inner {
    display: flex;
    align-items: center;
    min-height: 43.5px;
    padding: 0 8px;
}

.detail-sidebar-page__header-leading {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.detail-sidebar-page__header-content {
    min-width: 0;
    flex: 0 1 auto;
}

.detail-sidebar-page__header-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
    flex: 0 0 auto;
}

.detail-sidebar-page__header-actions .shell-icon-button {
    width: 28px;
    height: 28px;
    padding: 0 2px;
    border: 0.5px solid rgb(0 0 0 / 0%);
    color: var(--shell-text-primary);
}

.detail-sidebar-page__body {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.detail-sidebar-page__content-region {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.detail-sidebar-page__content-scroller {
    height: 100%;
    overflow: auto;
    scrollbar-width: none;
}

.detail-sidebar-page__content-scroller::-webkit-scrollbar {
    display: none;
}

.detail-sidebar-page__content-column {
    width: min(
        var(--detail-sidebar-page-content-width),
        max(0px, calc(100% - (var(--detail-sidebar-page-content-min-gutter) * 2)))
    );
    max-width: var(--detail-sidebar-page-content-width);
    min-height: 100%;
    margin: 48px auto 48px;
}

.detail-sidebar-page__sidebar {
    display: flex;
    flex-direction: column;
    flex: 0 0 var(--detail-sidebar-page-sidebar-width);
    width: var(--detail-sidebar-page-sidebar-width);
    min-width: var(--detail-sidebar-page-sidebar-width);
    box-sizing: border-box;
    padding: 8px 8px 16px 4px;
}

.detail-sidebar-page__sidebar-utility {
    display: inline-flex;
    justify-content: flex-end;
    gap: 6px;
    min-height: 28px;
    margin: 0 0 8px;
}

.detail-sidebar-page__sidebar-utility .shell-icon-button {
    display: flex;
    width: 28px;
    height: 28px;
    min-width: 28px;
    border: 0.5px solid rgb(0 0 0 / 0%);
    border-radius: 9999px;
    background: var(--shell-bg-button);
    color: var(--shell-text-primary);
    box-shadow: var(--shell-shadow);
}

.detail-sidebar-page__sidebar-utility .shell-icon-button:nth-last-child(2) {
    margin-right: -7px;
    padding-left: 2px;
    padding-right: 0;
    border-radius: 9999px 0 0 9999px;
    box-shadow: none;
    color: var(--shell-text-secondary);
}

.detail-sidebar-page__sidebar-utility .shell-icon-button:last-child {
    padding-left: 0;
    padding-right: 2px;
    border-radius: 0 9999px 9999px 0;
    box-shadow: none;
    color: var(--shell-text-secondary);
}

.detail-sidebar-page__sidebar-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.detail-breadcrumbs {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    margin-left: 10px;
}

.detail-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    color: var(--shell-text-primary);
}

.detail-breadcrumbs__item--link {
    height: 34px;
    padding: 0 14px 0 0;
    gap: 4px;
    margin-right: -4px;
    border-radius: 8px;
}

.detail-breadcrumbs__item--current {
    height: 19.5px;
    padding: 0;
    gap: 0;
}

.detail-breadcrumbs__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--shell-text-secondary);
}

.detail-breadcrumbs__text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 0.96875rem;
    letter-spacing: 0;
}

.detail-breadcrumbs__separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 0.96875rem;
}

.detail-sidebar-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 12px 10px;
    border: 0.5px solid var(--detail-sidebar-panel-border, var(--settings-card-border, var(--shell-border)));
    border-radius: 10px;
    background: var(--detail-sidebar-panel-bg, var(--settings-card-bg, var(--shell-bg-active)));
    box-shadow: var(--shell-shadow);
    transition: min-height 220ms cubic-bezier(0.32, 0.72, 0, 1);
}

.detail-sidebar-panel--flat {
    box-shadow: none;
}

.detail-sidebar-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 16px;
    margin-bottom: 0;
    transition: margin-bottom 220ms cubic-bezier(0.32, 0.72, 0, 1);
}

.detail-sidebar-panel--expanded .detail-sidebar-panel__header {
    margin-bottom: 12px;
}

.detail-sidebar-panel__header-trigger {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 16px;
    gap: 3px;
    padding: 0 6px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--detail-sidebar-panel-title-color, var(--shell-text-secondary));
}

.detail-sidebar-panel__header-trigger:hover,
.detail-sidebar-panel__header-trigger:focus-visible {
    outline: none;
}

.detail-sidebar-panel__custom-title {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
}

.detail-sidebar-panel__header-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin-left: auto;
}

.detail-sidebar-panel__title {
    color: inherit;
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 0.96875rem;
}

.detail-sidebar-panel__disclosure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    min-width: 16px;
    color: inherit;
    transition: transform 0.15s ease;
}

.detail-sidebar-panel--collapsed .detail-sidebar-panel__disclosure {
    transform: rotate(-90deg);
}

.detail-sidebar-panel__body-shell {
    display: grid;
    grid-template-rows: 1fr;
    min-width: 0;
    overflow: hidden;
    opacity: 1;
    transition:
        grid-template-rows 220ms cubic-bezier(0.32, 0.72, 0, 1),
        opacity 160ms ease;
}

.detail-sidebar-panel--collapsed .detail-sidebar-panel__body-shell {
    grid-template-rows: 0fr;
    opacity: 0;
    pointer-events: none;
}

.detail-sidebar-panel__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.detail-sidebar-stack {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.detail-sidebar-key-value-list {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
}

.detail-sidebar-key-value-row {
    display: grid;
    grid-template-columns: var(--detail-sidebar-key-column-width, 90px) minmax(0, 1fr);
    align-items: center;
    min-height: 28px;
}

.detail-sidebar-key-value-row__key {
    min-width: 0;
    overflow: hidden;
    color: var(--detail-sidebar-key-color, var(--shell-text-secondary));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-sidebar-key-value-row__value {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-start;
}

.detail-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 32px;
}

.detail-section-header__leading {
    display: inline-flex;
    align-items: center;
}

.detail-section-header__trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 24px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-text-secondary);
}

.detail-section-header__chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 8px;
    color: var(--shell-text-secondary);
}

.detail-section-header__title {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
}

.detail-section-header__count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
}

.detail-section-header__count-ring {
    position: relative;
    display: inline-flex;
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    background:
        conic-gradient(rgb(99, 109, 241) 0deg 120deg, transparent 120deg 360deg),
        transparent;
}

.detail-section-header__count-ring::after {
    content: "";
    position: absolute;
    inset: 1.5px;
    border-radius: 9999px;
    background: var(--shell-bg-surface);
    box-shadow: inset 0 0 0 1px var(--shell-border);
}

.detail-section-header__count-text {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: normal;
}

.detail-section-header__actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.related-content-bar {
    display: block;
    width: 100%;
    min-height: var(--related-content-bar-height, 36px);
    color: var(--shell-text-primary);
}

.related-content-bar__chrome {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    min-height: var(--related-content-bar-height, 36px);
    padding: 0 0 0 8px;
    border-radius: 8px;
}

.related-content-bar--resource {
    width: calc(100% + 6px);
    margin-left: -6px;
}

.related-content-bar--resource .related-content-bar__chrome {
    min-height: 44px;
    padding: 0 12px 0 13px;
    border: 0.5px solid var(--shell-border);
    border-radius: 8px;
    background: lch(7.67 0.75 272);
}

.related-content-bar__leading {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
}

.related-content-bar__leading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    min-width: 22px;
    color: var(--related-content-bar-icon-color, var(--shell-text-secondary));
}

.related-content-bar__key {
    display: inline-flex;
    align-items: center;
    color: lch(61.399% 1.15 272 / 1);
}

.related-content-bar__status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    min-width: 14px;
    color: var(--related-content-bar-status-icon-color, var(--shell-text-primary));
}

.related-content-bar__key-text,
.related-content-bar__title,
.related-content-bar__meta,
.related-content-bar__status {
    font-size: 0.8125rem;
    line-height: 0.96875rem;
    letter-spacing: 0;
}

.related-content-bar__key-text {
    color: lch(61.399% 1.15 272 / 1);
    font-weight: 450;
}

.related-content-bar__body {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    margin-left: 9px;
}

.related-content-bar--resource .related-content-bar__body {
    margin-left: 4px;
}

.related-content-bar__title,
.related-content-bar__meta,
.related-content-bar__status {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.related-content-bar__title {
    font-weight: 500;
    color: var(--shell-text-primary);
}

.related-content-bar__meta,
.related-content-bar__status {
    color: lch(61.399% 1.15 272 / 1);
    font-weight: 450;
}

.related-content-bar__trailing {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
    justify-self: end;
}

.related-content-bar__avatar {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 9999px;
}

.related-content-bar__meta-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 24px;
    padding: 0 8px;
    border: 0.5px solid lch(15.32 1.38 272);
    border-radius: 48px;
    background: lch(4.52 0.3 272);
}

.related-content-bar__meta-badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    min-width: 14px;
    color: var(--related-content-bar-meta-badge-color, lch(61.399% 1.15 272 / 1));
}

.related-content-bar__meta-badge-text {
    color: lch(61.399% 1.15 272 / 1);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 0.90625rem;
}

.ui-icon-button.related-content-bar__menu {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: lch(62.672% 1.375 272 / 1);
}

.related-content-bar__resource-agent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 48px;
    height: 24px;
    padding: 0 8px;
    border: 0.5px solid lch(15.32 1.38 272);
    border-radius: 9999px;
    color: lch(90.668% 1.375 272 / 1);
}

.related-content-bar__resource-agent-avatar {
    width: 14px;
    height: 14px;
    border-radius: 9999px;
}

.related-content-bar__resource-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: lch(61.399% 1.15 272 / 1);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 0.96875rem;
}

.related-content-bar__resource-status .shell-icon {
    color: rgb(247, 203, 0);
}

.comment-thread {
    --comment-thread-card-bg: var(--app-theme-card-bg, var(--shell-menu-bg, lch(15.736% 2.713 272.695 / 1)));
    --comment-thread-card-border: var(--app-theme-card-border, var(--shell-menu-border, var(--shell-border, lch(22.936% 3.913 272.695 / 1))));
    --comment-thread-divider: var(--comment-thread-card-border);
    --comment-thread-text: var(--shell-text-tertiary, var(--shell-text-primary));
    --comment-thread-muted: var(--shell-text-secondary);
    --comment-thread-control-bg: var(--app-theme-control-bg, var(--shell-bg-button));
    --comment-thread-control-border: var(--app-theme-control-border, var(--comment-thread-card-border));
    display: flex;
    flex-direction: column;
    gap: 0;
    font-family: var(--font-regular, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.comment-thread--root {
    width: 100%;
    margin-top: 7px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    overflow: hidden;
}

.comment-thread--root.comment-thread--chrome {
    border: 0.5px solid var(--comment-thread-card-border);
    background: var(--comment-thread-card-bg);
}

.comment-thread--root.comment-thread--full-bleed {
    width: calc(100% + 16px);
    margin-left: -8px;
    margin-bottom: 18px;
}

.comment-thread__source-header {
    display: flex;
    min-height: 44px;
    align-items: center;
    padding: 0 16px;
    border-bottom: 0.5px solid var(--comment-thread-divider);
}

.comment-thread__footer {
    border-top: 0.5px solid var(--comment-thread-divider);
}

.comment-thread__item {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: transparent;
    border: 0;
}

.comment-thread__item--top-level {
    width: 100%;
    margin-left: 0;
    box-sizing: border-box;
    padding: 14px 16px;
}

.comment-thread__item--top-level:not(.comment-thread__item--top-cap) {
    border-top: 0.5px solid var(--comment-thread-divider);
}

.comment-thread__item--top-cap {
    padding-top: 16px;
    padding-bottom: 16px;
    border-radius: 8px 8px 2px 2px;
}

.comment-thread__item--bottom-cap {
    padding-top: 14px;
    padding-bottom: 14px;
    border-radius: 2px 2px 8px 8px;
}

.comment-thread__item--single {
    padding: 16px;
    border-radius: 8px;
}

.comment-thread__item--reply {
    padding: 14px 0 0;
}

.comment-thread__avatar {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    flex: 0 0 18px;
    object-fit: cover;
}

.comment-thread__avatar--fallback {
    display: inline-grid;
    place-items: center;
    background: var(--comment-thread-control-bg);
    color: var(--shell-text-primary);
    font-size: 0.625rem;
    font-weight: 560;
    line-height: 1;
}

.comment-thread__header {
    position: relative;
    display: flex;
    align-items: flex-start;
    min-width: 0;
}

.comment-thread__author,
.comment-thread__timestamp,
.comment-thread__text,
.comment-thread__attachment-name,
.comment-thread__attachment-size {
    letter-spacing: 0;
}

.comment-thread__meta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.comment-thread__author {
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 0.96875rem;
}

.comment-thread__timestamp {
    color: var(--comment-thread-muted);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 0.96875rem;
}

.comment-thread__header-actions {
    position: absolute;
    top: -5px;
    right: -4px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.comment-thread__header-actions .ui-icon-button {
    width: 28px;
    height: 28px;
    min-width: 28px;
    color: var(--comment-thread-muted);
}

.comment-thread__item:hover .comment-thread__header-actions,
.comment-thread__item:focus-within .comment-thread__header-actions {
    opacity: 1;
    pointer-events: auto;
}

.comment-thread__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 6px;
    box-sizing: border-box;
}

.comment-thread__body--image,
.comment-thread__body--attachment {
    gap: 22px;
}

.comment-thread__item--top-level .comment-thread__body {
    padding-left: 0;
}

.comment-thread__text {
    margin: 0;
    max-width: 788px;
    color: var(--comment-thread-text);
    font-size: 0.9375rem;
    font-weight: 450;
    line-height: 1.5rem;
    white-space: pre-wrap;
}

.comment-thread__body--image .comment-thread__text,
.comment-thread__body--attachment .comment-thread__text {
    max-width: 761px;
}

.comment-thread__item--top-level .comment-thread__body--image,
.comment-thread__item--top-level .comment-thread__body--attachment {
    padding-left: 27px;
}

.comment-thread__image-preview {
    display: block;
    width: 761px;
    max-width: 100%;
    height: 244.28125px;
    border: 0.5px solid var(--comment-thread-card-border);
    border-radius: 8px;
    background: var(--comment-thread-control-bg);
    object-fit: cover;
    object-position: center;
    overflow: hidden;
    cursor: zoom-in;
}

.comment-thread__body--image .comment-thread__image-preview {
    margin-top: 6px;
}

.comment-thread__attachment {
    display: inline-flex;
    align-items: center;
    width: 761px;
    height: 47px;
    max-width: 100%;
    padding: 6px;
    gap: 6px;
    border: 0.5px solid var(--comment-thread-card-border);
    border-radius: 6px;
    background: var(--comment-thread-control-bg);
    box-shadow: lch(0 0 0 / 0.04) 0 4px 4px -1px, lch(0 0 0 / 0.08) 0 1px 1px 0;
    overflow: hidden;
}

.comment-thread__attachment-icon-wrap {
    display: inline-flex;
    align-items: center;
    width: 32px;
    min-width: 32px;
    height: 34px;
    color: var(--comment-thread-muted);
}

.comment-thread__attachment-meta {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    gap: 0;
}

.comment-thread__attachment-name {
    color: var(--shell-text-primary);
    font-size: 0.9375rem;
    font-weight: 450;
    line-height: 1.4375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.comment-thread__attachment-size {
    color: var(--comment-thread-muted);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 0.96875rem;
}

.comment-thread__replies {
    margin-top: 16px;
    padding-left: 27px;
}

.comment-composer {
    --comment-thread-card-bg: var(--app-theme-card-bg, var(--shell-menu-bg, lch(15.736% 2.713 272.695 / 1)));
    --comment-thread-card-border: var(--app-theme-card-border, var(--shell-menu-border, var(--shell-border, lch(22.936% 3.913 272.695 / 1))));
    --comment-thread-text: var(--shell-text-tertiary, var(--shell-text-primary));
    --comment-thread-muted: var(--shell-text-secondary);
    --comment-thread-control-bg: var(--app-theme-control-bg, var(--shell-bg-button));
    --comment-thread-control-border: var(--app-theme-control-border, var(--comment-thread-card-border));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 46px;
    align-items: center;
    gap: 10px;
    padding: 11px 12px 11px 16px;
    background: transparent;
    font-family: var(--font-regular, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.comment-composer--with-avatar {
    grid-template-columns: 18px minmax(0, 1fr) auto auto;
}

.comment-composer--with-cancel.comment-composer--with-avatar {
    grid-template-columns: 18px minmax(0, 1fr) auto auto auto;
}

.comment-composer__avatar {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 9999px;
    object-fit: cover;
}

.comment-composer__avatar--fallback {
    display: inline-grid;
    place-items: center;
    background: var(--comment-thread-control-bg);
    color: var(--shell-text-primary);
    font-size: 0.625rem;
    font-weight: 560;
    line-height: 1;
}

.comment-composer__input {
    width: 100%;
    min-width: 0;
    min-height: 24px;
    resize: none;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: var(--comment-thread-text);
    font: 450 0.8125rem/1.25rem var(--font-regular, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
    outline: none;
}

.comment-composer__input::placeholder {
    color: var(--comment-thread-muted);
}

.comment-composer__attach.ui-icon-button {
    width: 24px;
    height: 24px;
    min-width: 24px;
    color: var(--comment-thread-muted);
}

.comment-composer__cancel.ui-button {
    height: 28px;
    min-height: 28px;
    color: var(--comment-thread-muted);
}

.comment-composer__submit.ui-button,
.comment-composer__submit.ui-icon-button {
    min-height: 28px;
    border-color: var(--comment-thread-control-border);
    background: var(--comment-thread-control-bg);
    color: var(--shell-text-primary);
    box-shadow: none;
}

.comment-composer__submit--icon.ui-icon-button {
    width: 28px;
    min-width: 28px;
    height: 28px;
}

.comment-composer__submit--label.ui-button {
    height: 28px;
    padding-inline: 11px 8px;
}

.comment-composer__submit.ui-button:disabled,
.comment-composer__submit.ui-icon-button:disabled,
.comment-composer__submit.ui-button--disabled,
.comment-composer__submit.ui-icon-button--disabled {
    opacity: 0.48;
}

.grid-page {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

.grid-page__tabs-row {
    display: flex;
    align-items: center;
    width: 100%;
}

.grid-page__tabs-row .pill-tabs {
    margin-top: 0;
}

.grid-page__add-view-button {
    color: var(--shell-menu-text, lch(90.35% 1.15 272));
}

.grid-page__add-view-button .shell-icon svg path {
    fill: var(--add-view-icon-color, lch(36.308% 1.15 272));
}

.grid-page__tab-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
    overflow: visible;
}

.grid-page__tab-action {
    color: var(--shell-menu-text, lch(90.35% 1.15 272));
}

.grid-page__tab-action:hover,
.grid-page__tab-action:focus-visible {
    color: var(--shell-text-primary, lch(100% 0 272));
}

.grid-page__tab-action[data-menu-open="true"] {
    background: var(--shell-bg-active, lch(11.849% 0.943 272 / 1));
    color: var(--shell-text-primary, lch(100% 0 272 / 1));
}

.grid-page__grid-frame {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 0;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
    overflow: hidden;
    transition: grid-template-columns 260ms cubic-bezier(0.32, 0.72, 0, 1);
}

.grid-page__grid-frame[data-sidebar-open="true"] {
    grid-template-columns: minmax(0, 1fr) var(--grid-sidebar-width, 360px);
}

.grid-page__grid-viewport {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    height: 100%;
    overflow: auto hidden;
}

.grid-page__grid-viewport::after {
    content: "";
    position: sticky;
    top: 0;
    right: 0;
    z-index: 3;
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    height: 100%;
    pointer-events: none;
    transform: translateX(-30px);
    box-shadow: 30px 0 0 0 var(--shell-bg-surface, var(--app-theme-surface-bg, lch(4.52% 0.3 272 / 1)));
    background: linear-gradient(
        to right,
        transparent 0%,
        var(--shell-bg-surface, var(--app-theme-surface-bg, lch(4.52% 0.3 272 / 1))) 100%
    );
}

.page-with-side-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 0;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
    overflow: hidden;
    transition: grid-template-columns 260ms cubic-bezier(0.32, 0.72, 0, 1);
    --page-with-side-panel-main-padding-default: 0 8px;
}

.page-with-side-panel[data-main-layout="flush"] {
    --page-with-side-panel-main-padding-default: 0;
}

.page-with-side-panel__main {
    display: flex;
    min-width: 0;
    min-height: 0;
    padding: var(--page-with-side-panel-main-padding, var(--page-with-side-panel-main-padding-default, 0 8px));
    box-sizing: border-box;
    overflow: hidden auto;
    scrollbar-width: none;
}

.page-with-side-panel__main::-webkit-scrollbar {
    display: none;
}

.page-with-side-panel[data-side-panel-open="true"] {
    grid-template-columns: minmax(0, 1fr) var(--page-side-panel-width, 396px);
}

body.page-side-panel-resizing .page-with-side-panel {
    transition: none !important;
}

.grid-toolbar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: visible;
}

.grid-toolbar__action {
    background: lch(10.691% 0.493 272 / 1);
    color: lch(90.35% 1.15 272 / 1);
}

.grid-toolbar__action:hover,
.grid-toolbar__action:focus-visible {
    color: var(--shell-text-primary, lch(100% 0 272));
}

.grid-toolbar__action .shell-icon,
.grid-toolbar__action .grid-toolbar__display-icon {
    color: lch(61.399% 1.15 272 / 1);
}

.grid-toolbar__action[data-menu-open="true"] {
    background: var(--shell-bg-active, lch(11.849% 0.943 272 / 1));
    color: var(--shell-text-primary, lch(100% 0 272 / 1));
}

.grid-toolbar__display-wrap {
    position: relative;
    display: flex;
    overflow: visible;
}

.grid-toolbar__display-button {
    position: relative;
}

.grid-toolbar__display-icon {
    position: relative;
    display: inline-flex;
}

.grid-toolbar__display-indicator {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 9px;
    height: 9px;
    border: 2px solid lch(4.52% 0.3 272 / 1);
    border-radius: 50%;
    background: lch(47.918% 59.303 288.421 / 1);
}

.grid-filters-menu__backdrop {
    position: fixed;
    inset: 0;
    z-index: 940;
    background: transparent;
    cursor: default;
}

.grid-filters-menu__positioner {
    position: absolute;
    top: 31.75px;
    right: -5.2px;
    z-index: 950;
    overflow: visible;
}

.grid-filters-menu__panel {
    position: absolute;
    display: flex;
    flex-direction: column;
    border: 0.5px solid var(--shell-menu-border, lch(22.88% 1.83 272 / 1));
    border-radius: 12px;
    background: var(--shell-menu-bg, lch(9.92% 0.75 272 / 1));
    box-shadow: var(--shell-menu-shadow);
    overflow: hidden;
    box-sizing: border-box;
}

.grid-filters-menu__header {
    flex: 0 0 auto;
}

.grid-filters-menu__search-form {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 36.5px;
    padding: 0 12px 0 14px;
}

.grid-filters-menu__status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.grid-filters-menu__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 36px;
    padding: 10px 0 9px;
    border: 0;
    background: transparent;
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.21875rem;
    outline: none;
}

.grid-filters-menu__input::placeholder {
    color: var(--shell-menu-indicator, lch(36.308% 1.15 272 / 1));
    opacity: 1;
}

.grid-filters-menu__shortcut {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.grid-filters-menu__shortcut-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 17.1px;
    padding: 2px;
    border: 0.5px solid var(--shell-menu-border, lch(16.4% 1.83 272 / 1));
    border-radius: 4px;
    background: transparent;
    color: var(--shell-menu-hint, lch(63.582% 1.375 272 / 1));
    font-size: 0.6875rem;
    font-weight: 400;
    line-height: 0.75625rem;
    box-sizing: border-box;
}

.grid-filters-menu__scroll {
    flex: 1 1 auto;
    overflow: auto;
    scrollbar-width: none;
}

.grid-filters-menu__scroll::-webkit-scrollbar {
    display: none;
}

.grid-filters-menu__list {
    margin: 0;
    padding: 6.5px 0;
    list-style: none;
    background: transparent;
}

.grid-filters-menu__item {
    position: relative;
    height: 32px;
}

.grid-filters-menu__item::before {
    content: "";
    position: absolute;
    inset: 0 6px;
    border-radius: 8px;
    background: transparent;
    pointer-events: none;
}

.grid-filters-menu__item--focused::before {
    background: var(--shell-menu-item-hover, lch(15.32% 0.75 272 / 1));
}

.grid-filters-menu__item:hover::before,
.grid-filters-menu__item:focus-within::before {
    background: var(--shell-menu-item-hover, lch(15.32% 0.75 272 / 1));
}

.grid-filters-menu__item--group-start {
    margin-top: 12px;
}

.grid-filters-menu__item--group-start::after {
    content: "";
    position: absolute;
    top: -6px;
    left: 0;
    right: 0;
    border-top: 0.5px solid var(--shell-menu-divider, lch(16.668% 1.15 272 / 1));
}

.grid-filters-menu__row-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 32px;
    padding: 0 18px 0 14px;
    gap: 8px;
    border: 0;
    background: transparent;
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
    font-family: inherit;
    text-align: left;
    cursor: default;
    transition: color 120ms ease;
}

.grid-filters-menu__icon,
.grid-filters-menu__choice-icon,
.grid-filters-menu__chevron {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

.grid-filters-menu__icon,
.grid-filters-menu__choice-icon {
    color: var(--shell-menu-hint, lch(63.582% 1.375 272 / 1));
}

.grid-filters-menu__chevron {
    margin-left: 6px;
    color: var(--shell-menu-indicator, lch(39.91% 1.375 272 / 1));
    font-size: 6px;
    font-weight: 450;
    line-height: normal;
    width: 16px;
    height: 7.5px;
}

.grid-filters-menu__label,
.grid-filters-menu__secondary {
    font-size: 0.8125rem;
    line-height: 1.21875rem;
}

.grid-filters-menu__label {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 450;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid-filters-menu__secondary {
    flex: 0 0 auto;
    color: var(--shell-menu-indicator, lch(39.91% 1.375 272 / 1));
    font-weight: 450;
    white-space: nowrap;
}

.grid-filters-menu__choice-leading {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.grid-filters-menu__choice-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: 0.5px solid var(--shell-menu-border, lch(25.04% 1.83 272 / 1));
    border-radius: 4px;
    color: transparent;
    background: var(--shell-bg-button, lch(11.849% 0.943 272 / 1));
}

.grid-filters-menu__choice-box--selected {
    border-color: lch(47.918% 59.303 288.421 / 1);
    background: lch(47.918% 59.303 288.421 / 1);
    color: lch(100% 0 272 / 1);
}

.grid-filters-menu__item--focused .grid-filters-menu__row-button,
.grid-filters-menu__item:hover .grid-filters-menu__row-button,
.grid-filters-menu__item:focus-within .grid-filters-menu__row-button {
    color: var(--shell-menu-text-strong, lch(100% 0 272 / 1));
}

.grid-filter-bar {
    position: relative;
    z-index: 800;
    flex: 0 0 auto;
    width: 100%;
    padding: 0 8px 8px;
    overflow: visible;
    box-sizing: border-box;
}

.grid-filter-bar__surface {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 10px;
    min-height: 45px;
    padding: 10px;
    border: 0.5px solid var(--shell-border, lch(11% 1.38 272 / 1));
    border-radius: 8px;
    background: lch(6.77% 0.75 272 / 1);
    box-sizing: border-box;
}

.grid-filter-bar__filters {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 4px;
}

.grid-filter-bar__group {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    height: 24px;
    border: 0.5px solid var(--shell-border-strong, lch(19.64% 1.38 272 / 1));
    border-radius: 8px;
    overflow: visible;
}

.grid-filter-bar__segment {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    height: 23px;
    padding: 0 6px;
    border: 0;
    border-right: 0.5px solid var(--shell-border-strong, lch(19.64% 1.38 272 / 1));
    background: lch(10.691% 0.493 272 / 1);
    color: lch(90.35% 1.15 272 / 1);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.125rem;
    white-space: nowrap;
    cursor: default;
}

.grid-filter-bar__segment span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid-filter-bar__segment--field,
.grid-filter-bar__segment--operator,
.grid-filter-bar__segment--value {
    flex: 0 1 auto;
}

.grid-filter-bar__segment--operator {
    color: lch(61.399% 1.15 272 / 1);
}

.grid-filter-bar__group--advanced .grid-filter-bar__segment--advanced {
    border-right: 0.5px solid var(--shell-border-strong, lch(19.64% 1.38 272 / 1));
    color: lch(61.399% 1.15 272 / 1);
}

.grid-filter-bar__operator-wrap {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 1;
}

.grid-filter-bar__segment--value {
    border-right: 0;
}

.grid-filter-bar__segment .shell-icon {
    flex: 0 0 auto;
    color: currentColor;
}

.grid-filter-chip-summary {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 4px;
}

.grid-filter-chip-summary__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.grid-filter-chip-summary__stack {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
}

.grid-filter-chip-summary__stack > * + * {
    margin-left: -3px;
}

.grid-filter-chip-summary__stack .shell-icon {
    width: 12px;
    height: 12px;
    padding: 1px;
    border-radius: 9999px;
    background: lch(10.691% 0.493 272 / 1);
    box-sizing: content-box;
}

.grid-filter-chip-summary__avatar,
.grid-filter-chip-summary__code,
.grid-filter-chip-summary__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border: 1px solid lch(10.691% 0.493 272 / 1);
    border-radius: 9999px;
    background: var(--grid-filter-value-color, lch(28% 2 272 / 1));
    box-sizing: border-box;
}

.grid-filter-chip-summary__avatar {
    object-fit: cover;
}

.grid-filter-chip-summary__code {
    color: lch(90.35% 1.15 272 / 1);
    font-size: 8px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
}

.grid-filter-chip-summary__dot {
    width: 8px;
    height: 8px;
    border: 0;
    background: var(--grid-filter-value-color, currentColor);
}

.grid-filter-chip-summary--colordot {
    gap: 5px;
}

.grid-filter-bar__remove,
.grid-filter-bar__add {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
    padding: 0;
    border-radius: 9999px;
    background: transparent;
    color: lch(90.35% 1.15 272 / 1);
}

.grid-filter-bar__remove {
    margin-left: 0;
    height: 23px;
    min-height: 23px;
    border-radius: 0 7.5px 7.5px 0;
    background: lch(10.691% 0.493 272 / 1);
    color: lch(90.35% 1.15 272 / 1);
}

.grid-filter-bar__remove .shell-icon {
    color: lch(61.399% 1.15 272 / 1);
}

.grid-filter-bar__add {
    margin-left: 0;
}

.grid-filter-bar__remove:hover,
.grid-filter-bar__remove:focus-visible,
.grid-filter-bar__add:hover,
.grid-filter-bar__add:focus-visible,
.grid-filter-bar__action:hover,
.grid-filter-bar__action:focus-visible {
    background: var(--shell-bg-hover, lch(15.32% 0.75 272 / 1));
    color: var(--shell-text-primary, lch(100% 0 272 / 1));
}

.grid-filter-bar__actions {
    display: flex;
    align-items: center;
    align-self: center;
    flex: 0 0 auto;
    margin-left: auto;
}

.grid-filter-bar__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 8.5px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: lch(90.35% 1.15 272 / 1);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    cursor: default;
}

.grid-filter-bar__action--save {
    background: lch(10.691% 0.493 272 / 1);
}

.grid-filter-bar__operator-backdrop {
    position: fixed;
    inset: 0;
    z-index: 640;
    border: 0;
    background: transparent;
    cursor: default;
}

.grid-filter-bar__operator-menu {
    position: absolute;
    top: 27px;
    left: 0;
    z-index: 650;
    width: 175px;
    min-height: 77px;
    border: 0.5px solid var(--shell-menu-border, lch(22.88% 1.83 272 / 1));
    border-radius: 12px;
    background: var(--shell-menu-bg, lch(9.92% 0.75 272 / 1));
    box-shadow: var(--shell-menu-shadow);
    overflow: hidden;
    box-sizing: border-box;
}

.grid-filter-bar__operator-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.grid-filter-bar__operator-list {
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: lch(0% 0 0 / 0.004);
}

.grid-filter-bar__operator-option {
    position: relative;
    height: 32px;
}

.grid-filter-bar__operator-option::before {
    content: "";
    position: absolute;
    inset: 0 6px;
    border-radius: 8px;
    background: transparent;
    pointer-events: none;
}

.grid-filter-bar__operator-option:hover::before,
.grid-filter-bar__operator-option:focus-within::before,
.grid-filter-bar__operator-option--current::before {
    background: var(--shell-menu-item-hover, lch(15.32% 0.75 272 / 1));
}

.grid-filter-bar__operator-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 32px;
    padding: 0 18px 0 14px;
    border: 0;
    background: transparent;
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.21875rem;
    text-align: left;
    cursor: default;
}

.grid-filter-bar__operator-option:hover .grid-filter-bar__operator-button,
.grid-filter-bar__operator-option:focus-within .grid-filter-bar__operator-button,
.grid-filter-bar__operator-option--current .grid-filter-bar__operator-button {
    color: var(--shell-menu-text-strong, lch(100% 0 272 / 1));
}

.grid-filter-bar__value-backdrop {
    position: fixed;
    inset: 0;
    z-index: 840;
    border: 0;
    background: transparent;
    cursor: default;
}

.grid-filter-bar__value-menu {
    position: fixed;
    z-index: 850;
    display: flex;
    flex-direction: column;
    border: 0.5px solid var(--shell-menu-border, lch(22.88% 1.83 272 / 1));
    border-radius: 12px;
    background: var(--shell-menu-bg, lch(9.92% 0.75 272 / 1));
    box-shadow: var(--shell-menu-shadow);
    overflow: hidden;
    box-sizing: border-box;
}

.grid-advanced-filter__backdrop {
    position: fixed;
    inset: 0;
    z-index: 820;
    border: 0;
    background: transparent;
    cursor: default;
}

.grid-advanced-filter {
    position: fixed;
    z-index: 830;
    width: 321px;
    max-width: calc(100vw - 16px);
    padding: 12px;
    border: 0.5px solid var(--shell-menu-border, lch(22.88% 1.83 272 / 1));
    border-radius: 12px;
    background: var(--shell-menu-bg, lch(9.92% 0.75 272 / 1));
    box-shadow: var(--shell-menu-shadow);
    box-sizing: border-box;
}

.grid-advanced-filter__group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.grid-advanced-filter__group:not(.grid-advanced-filter__group--root) {
    width: 100%;
    padding: 8px;
    border: 0.5px solid var(--shell-border-strong, lch(19.64% 1.38 272 / 1));
    border-radius: 8px;
    background: var(--shell-bg-subtle, lch(7.85% 0.75 272 / 1));
    box-sizing: border-box;
}

.grid-advanced-filter__group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 24px;
}

.grid-advanced-filter__group-label {
    color: var(--shell-text-secondary, lch(61.399% 1.15 272 / 1));
    font-size: 0.75rem;
    line-height: 1.125rem;
}

.grid-advanced-filter__rows {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.grid-advanced-filter__row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    width: 100%;
}

.grid-advanced-filter__row--group {
    align-items: flex-start;
}

.grid-advanced-filter__operator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 32px;
    height: 23px;
    padding: 0 4px;
    border: 0.5px solid var(--shell-border-strong, lch(25.04% 1.83 272 / 1));
    border-radius: 7.5px;
    background: var(--shell-bg-raised, lch(16.091% 0.943 272 / 1));
    color: var(--shell-text-secondary, lch(63.582% 1.375 272 / 1));
    font-family: inherit;
    font-size: 0.75rem;
    line-height: 1.125rem;
    cursor: default;
}

.grid-advanced-filter__operator:hover,
.grid-advanced-filter__operator:focus-visible {
    color: var(--shell-text-primary, lch(100% 0 272 / 1));
    background: var(--shell-bg-hover, lch(15.32% 0.75 272 / 1));
}

.grid-advanced-filter__filter-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 23px;
    padding: 4px 6px 4px 5px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: var(--shell-bg-raised, lch(16.091% 0.943 272 / 1));
    color: var(--shell-text-primary, lch(90.895% 1.375 272 / 1));
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    cursor: default;
}

.grid-advanced-filter__filter-button:hover,
.grid-advanced-filter__filter-button:focus-visible {
    background: var(--shell-bg-hover, lch(20.72% 1.329 272 / 1));
}

.grid-advanced-filter__condition {
    max-width: 100%;
}

.grid-advanced-filter__delete {
    width: 24px;
    height: 24px;
    color: var(--shell-text-secondary, lch(63.582% 1.375 272 / 1));
}

.grid-filter-bar__value-header {
    flex: 0 0 auto;
    height: 36.5px;
    border-bottom: 0.5px solid transparent;
}

.grid-filter-bar__value-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.grid-filter-bar__value-input {
    width: 100%;
    height: 36px;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: var(--shell-menu-text-strong, lch(100% 0 272 / 1));
    font: inherit;
    font-size: 0.8125rem;
    line-height: 1.21875rem;
    outline: none;
}

.grid-filter-bar__value-input::placeholder {
    color: var(--shell-menu-text-muted, lch(52.2% 1.15 272 / 1));
}

.grid-filter-bar__value-scroll {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
    scrollbar-width: none;
}

.grid-filter-bar__value-scroll::-webkit-scrollbar {
    display: none;
}

.grid-filter-bar__value-list {
    margin: 0;
    padding: 6.5px 0;
    list-style: none;
    background: lch(0% 0 0 / 0.004);
}

.grid-filter-bar__value-option {
    position: relative;
    height: 31.5px;
}

.grid-filter-bar__value-option::before {
    content: "";
    position: absolute;
    inset: 0 6px;
    border-radius: 8px;
    background: transparent;
    pointer-events: none;
}

.grid-filter-bar__value-option:hover::before,
.grid-filter-bar__value-option:focus-within::before,
.grid-filter-bar__value-option--selected::before {
    background: var(--shell-menu-item-hover, lch(15.32% 0.75 272 / 1));
}

.grid-filter-bar__value-option-button {
    position: relative;
    display: grid;
    grid-template-columns: 14px auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
    width: 100%;
    height: 31.5px;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.21875rem;
    text-align: left;
    cursor: default;
}

.grid-filter-bar__value-option:hover .grid-filter-bar__value-option-button,
.grid-filter-bar__value-option:focus-within .grid-filter-bar__value-option-button,
.grid-filter-bar__value-option--selected .grid-filter-bar__value-option-button {
    color: var(--shell-menu-text-strong, lch(100% 0 272 / 1));
}

.grid-filter-bar__value-choice-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: 0.5px solid var(--shell-menu-border, lch(25.04% 1.83 272 / 1));
    border-radius: 4px;
    color: transparent;
    background: var(--shell-bg-button, lch(11.849% 0.943 272 / 1));
}

.grid-filter-bar__value-choice-box--selected {
    border-color: lch(47.918% 59.303 288.421 / 1);
    background: lch(47.918% 59.303 288.421 / 1);
    color: lch(100% 0 272 / 1);
}

.grid-filter-bar__value-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--shell-menu-text-muted, lch(52.2% 1.15 272 / 1));
}

.grid-filter-bar__value-option-label {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.grid-filter-bar__value-option-secondary {
    color: var(--shell-menu-text-muted, lch(52.2% 1.15 272 / 1));
    white-space: nowrap;
}

.grid-display-options__backdrop {
    position: fixed;
    inset: 0;
    z-index: 940;
    background: transparent;
    cursor: default;
}

.grid-display-options__positioner {
    position: absolute;
    top: 32.25px;
    right: 0;
    z-index: 950;
    width: 331px;
    box-sizing: border-box;
}

.grid-display-options__panel {
    width: 100%;
    border: 0.5px solid var(--shell-menu-border, lch(22.88% 1.83 272 / 1));
    border-radius: 12px;
    background: var(--shell-menu-bg, lch(9.92% 0.75 272 / 1));
    box-shadow:
        lch(0 0 0 / 0.125) 0 3px 8px 0,
        lch(0 0 0 / 0.125) 0 2px 5px 0,
        lch(0 0 0 / 0.125) 0 1px 1px 0;
    overflow: hidden;
}

.grid-display-options__section {
    padding-left: 16px;
    padding-right: 16px;
}

.grid-display-options__section--top {
    padding-top: 16px;
    padding-bottom: 11px;
}

.grid-display-options__section--compact {
    padding-top: 0;
    padding-bottom: 8px;
}

.grid-display-options__section--board {
    padding-top: 15px;
    padding-bottom: 8px;
}

.grid-display-options__view-modes {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 18.875px;
}

.grid-display-options__mode-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    gap: 6px;
    width: auto;
    height: 27.44px;
    padding: 6px 8px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: var(--shell-bg-button, lch(11.849% 0.943 272 / 1));
    color: var(--shell-menu-hint, lch(63.582% 1.375 272 / 1));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    transition: background-color 120ms ease, color 120ms ease;
}

.grid-display-options__mode-button--active {
    background: var(--shell-menu-item-hover, lch(17.634% 1.329 272 / 1));
    color: var(--shell-menu-text-strong, lch(100% 0 272 / 1));
}

.grid-display-options__mode-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: currentColor;
}

.grid-display-options__mode-icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.grid-display-options__setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 31.36px;
    margin-top: 0;
}

.grid-display-options__setting-label,
.grid-display-options__subheading {
    color: var(--shell-menu-hint, lch(63.582% 1.375 272 / 1));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
}

.grid-display-options__select {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    height: 23.52px;
    padding: 1px 18px 1px 8px;
    border: 0.5px solid var(--shell-menu-border, lch(25.04% 1.83 272 / 1));
    border-radius: 8px;
    background: var(--shell-bg-button, lch(16.091% 0.943 272 / 1));
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
    font-size: 0.75rem;
    font-weight: 400;
    line-height: normal;
}

.grid-display-options__select-label {
    display: block;
}

.grid-display-options__select-chevron {
    position: absolute;
    top: 50%;
    right: 8px;
    display: inline-flex;
    width: 9px;
    height: 5px;
    color: var(--shell-menu-hint, lch(63.582% 1.375 272 / 1));
    transform: translateY(-50%);
}

.grid-display-options__select-chevron svg {
    width: 9px;
    height: 5px;
    fill: currentColor;
}

.grid-display-options__select-host {
    display: inline-flex;
    justify-content: flex-end;
    min-width: 0;
}

.grid-display-options__select-host .settings-select {
    width: 100%;
}

.grid-display-options__select-host .settings-select__trigger {
    width: 100%;
    height: 23.52px;
    min-height: 0;
    margin: 0;
    padding: 1px 18px 1px 8px;
    border-color: var(--shell-menu-border, lch(25.04% 1.83 272 / 1));
    background: var(--shell-bg-button, lch(16.091% 0.943 272 / 1));
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
    font-size: 0.75rem;
}

.grid-display-options__select-host .settings-select__trigger:hover,
.grid-display-options__select-host .settings-select__trigger:focus-visible {
    border-color: var(--shell-menu-border-hover, var(--shell-menu-border, lch(25.04% 1.83 272 / 1)));
    background: var(--shell-bg-button-hover, var(--shell-bg-button, lch(16.091% 0.943 272 / 1)));
}

.grid-display-options__select-host .settings-select__trigger-content {
    min-width: 0;
}

.grid-display-options__select-host .settings-select__trigger-label {
    overflow: hidden;
    font-size: 0.75rem;
    line-height: normal;
    text-overflow: ellipsis;
}

.grid-display-options__select-host .settings-select__chevron {
    right: 8px;
    width: 9px;
    height: 5px;
}

.grid-display-options__select-host .settings-select__chevron .shell-icon,
.grid-display-options__select-host .settings-select__chevron svg {
    width: 9px;
    height: 5px;
}

.grid-display-options__select-host .settings-select__panel {
    min-width: calc(var(--settings-select-anchor-width, 0px) + 13px);
}

.grid-display-options__divider {
    height: 0;
    border-top: 0.5px solid var(--shell-menu-divider, lch(16.668% 1.15 272 / 1));
}

.grid-display-options__heading {
    margin: 0;
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
}

.grid-display-options__toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 31.36px;
    margin-top: 2px;
}

.grid-display-options__toggle-label {
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 20.8px;
}

.grid-display-options__toggle-shell {
    display: inline-flex;
    align-items: center;
    height: 31.36px;
}

.grid-display-options__toggle-input {
    position: relative;
    display: block;
    width: 30px;
    height: 20px;
    margin: 0;
    appearance: none;
    border: 0;
    border-radius: 72px;
    background: var(--ui-toggle-off-bg, lch(47.275% 0.867 272.002 / 1));
    transition: background-color 150ms ease-out, opacity 150ms ease-out;
}

.grid-display-options__toggle-input::before {
    content: "";
    position: absolute;
    inset: -6px;
}

.grid-display-options__toggle-input::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    background: var(--ui-toggle-thumb-bg, lch(100% 5 288.421 / 1));
    transform: translateY(-50%);
    transition: left 150ms ease-out, background-color 150ms ease-out;
}

.grid-display-options__toggle-input:checked {
    background: var(--ui-toggle-on-bg, var(--app-theme-accent, lch(47.918% 59.303 288.421 / 1)));
}

.grid-display-options__toggle-input:checked::after {
    left: 13px;
}

.grid-display-options__toggle-input:disabled {
    opacity: var(--ui-toggle-disabled-opacity, 0.5);
}

.grid-display-options__subheading {
    margin: 11px 0 11px;
}

.grid-display-options__property-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4.9px 4.9px;
}

.grid-display-options__property-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 23.52px;
    padding: 0 8px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: var(--shell-bg-button, lch(11.849% 0.943 272 / 1));
    color: var(--shell-menu-hint, lch(63.582% 1.375 272 / 1));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
    transition: background-color 120ms ease, color 120ms ease;
}

.grid-display-options__property-button--active {
    background: var(--shell-menu-item-hover, lch(23.806% 1.329 272 / 1));
    color: var(--shell-menu-text-strong, lch(100% 0 272 / 1));
}

.grid-display-options__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-height: 45px;
    padding: 7px 8px 4.25px;
}

.grid-display-options__footer-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 23.52px;
    padding: 0 8px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-menu-text, lch(90.895% 1.375 272 / 1));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
}

.grid-display-options__footer-button--primary {
    color: lch(59.03% 70 288.421 / 1);
}

.grid-sidebar {
    position: relative;
    display: flex;
    z-index: 40;
    width: var(--grid-sidebar-width, 360px);
    min-width: var(--grid-sidebar-width, 360px);
    height: 100%;
    padding: 0 0 0 4px;
    overflow: visible;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transform: translateX(18px);
    transition:
        transform 260ms cubic-bezier(0.32, 0.72, 0, 1),
        opacity 120ms ease,
        visibility 120ms ease;
    visibility: hidden;
}

.grid-sidebar[data-open="true"] {
    padding-left: 4px;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    visibility: visible;
    background-image: linear-gradient(
        to left,
        var(--shell-bg-surface, var(--app-theme-surface-bg, lch(4.52% 0.3 272 / 1))) 0%,
        color-mix(in lch, var(--shell-bg-surface, var(--app-theme-surface-bg, lch(4.52% 0.3 272 / 1))) 74%, transparent) 62%,
        transparent 100%
    );
}

.grid-sidebar[data-open="true"]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -36px;
    z-index: 0;
    width: 40px;
    pointer-events: none;
    background: linear-gradient(
        to right,
        transparent 0%,
        color-mix(in lch, var(--shell-bg-surface, var(--app-theme-surface-bg, lch(4.52% 0.3 272 / 1))) 26%, transparent) 46%,
        var(--shell-bg-surface, var(--app-theme-surface-bg, lch(4.52% 0.3 272 / 1))) 100%
    );
}

.grid-sidebar[data-open="false"] {
    padding-left: 0;
}

.grid-sidebar__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: calc(var(--grid-sidebar-width, 360px) - 4px);
    height: 100%;
    min-height: 0;
    overflow: auto;
    scrollbar-width: none;
}

.grid-sidebar__inner::-webkit-scrollbar {
    display: none;
}

.grid-sidebar__panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    width: calc(var(--grid-sidebar-width, 360px) - 12px);
    min-height: 0;
    margin: 0 8px 8px 0;
    padding: 12px;
    border: 0.5px solid var(--page-side-panel-border, var(--detail-sidebar-panel-border, var(--shell-border)));
    border-radius: 10px;
    background: var(--page-side-panel-bg, var(--detail-sidebar-panel-bg, var(--shell-bg-active)));
    box-shadow: var(--page-side-panel-shadow, var(--shell-shadow));
    box-sizing: border-box;
}

.grid-sidebar__resize-handle {
    position: absolute;
    top: 0;
    left: -3px;
    bottom: 0;
    z-index: 2;
    width: 7px;
    cursor: col-resize;
}

.grid-sidebar__resize-handle::after {
    content: "";
    position: absolute;
    inset: 0 3px 0 2px;
    width: 2px;
    border-radius: 4px;
    background: var(--shell-sidebar-resize-guide);
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
}

.grid-sidebar__resize-handle:hover::after,
.grid-sidebar__resize-handle[data-dragging="true"]::after {
    opacity: 1;
    transition-duration: 0s;
}

.grid-sidebar[data-open="false"] .grid-sidebar__resize-handle {
    pointer-events: none;
}

.grid-sidebar__tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 28px;
    margin: 0 0 10px;
}

.grid-sidebar__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 4px 16.5px;
    margin: 2px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: var(--page-side-panel-tab-bg, var(--shell-bg-button));
    color: var(--page-side-panel-tab-color, var(--shell-text-secondary));
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
    cursor: default;
    transition:
        border 150ms ease,
        background-color 120ms ease,
        color 120ms ease,
        opacity 150ms ease;
}

.grid-sidebar__tab:hover,
.grid-sidebar__tab:focus-visible {
    background: var(--page-side-panel-tab-hover-bg, var(--shell-menu-item-hover));
    color: var(--page-side-panel-tab-hover-color, var(--shell-text-primary));
    outline: none;
}

.grid-sidebar__tab--active,
.grid-sidebar__tab--active:hover,
.grid-sidebar__tab--active:focus-visible {
    background: var(--page-side-panel-tab-active-bg, var(--shell-nav-active-bg));
    color: var(--page-side-panel-tab-active-color, var(--shell-text-primary));
}

.grid-sidebar__content {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.grid-sidebar__summary-card {
    display: flex;
    align-items: center;
    justify-content: normal;
    width: 100%;
    height: 42px;
    padding: 0 10px;
    border-radius: 6px;
    background: var(--page-side-panel-summary-bg, var(--page-side-panel-bg, var(--shell-bg-active)));
    box-sizing: border-box;
}

.grid-sidebar__summary-copy {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.grid-sidebar__summary-title,
.grid-sidebar__summary-count {
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: normal;
    white-space: nowrap;
}

.grid-sidebar__summary-health-icon {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: lch(38.409% 1.375 272 / 1);
}

.grid-sidebar__summary-health-icon svg {
    display: block;
    width: 16px;
    height: 16px;
    overflow: hidden;
}

.grid-sidebar__summary-title {
    overflow: hidden;
    color: lch(100% 0 272 / 1);
    text-overflow: ellipsis;
}

.grid-sidebar__summary-count {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: lch(100% 0 272 / 1);
}

.grid-list {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-width: var(--grid-list-content-width, 100%);
    min-height: 0;
    background: transparent;
    color: var(--grid-list-text-primary, var(--shell-text-primary));
}

.grid-list__header,
.grid-list__group-header,
.grid-list__row {
    display: grid;
    grid-template-columns: var(--grid-list-template-columns);
    column-gap: 6px;
    grid-column: 1 / -1;
    align-items: center;
    width: 100%;
    min-width: var(--grid-list-content-width, 100%);
}

.grid-list__header {
    flex: 0 0 32px;
    height: 32px;
}

.grid-list__header-cell,
.grid-list__header-spacer {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 24px;
}

.grid-list__header-cell {
    padding: 0 6px;
}

.grid-list__header-cell--collapsed,
.grid-list__cell--collapsed {
    overflow: hidden;
    padding-right: 0;
    padding-left: 0;
}

.grid-list__header-label {
    overflow: visible;
    color: var(--grid-list-header-label-color, lch(61.399% 1.15 272 / 1));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: normal;
    white-space: nowrap;
    text-overflow: clip;
}

.grid-list__header-sort-button {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 2px;
    max-width: none;
    height: 24px;
    padding: 0 6px;
    margin: 0 -6px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--grid-list-header-sort-color, lch(90.35% 1.15 272 / 1));
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    cursor: default;
    user-select: none;
}

.grid-list__header-sort-button .grid-list__header-label {
    color: var(--grid-list-header-label-color, lch(61.399% 1.15 272 / 1));
    font-weight: 450;
}

.grid-list__header-sort-button:hover,
.grid-list__header-sort-button:focus-visible {
    background: var(--grid-list-header-sort-hover-bg, lch(9.92% 0.493 272 / 1));
    color: var(--grid-list-header-sort-hover-color, lch(100% 0 272 / 1));
    outline: none;
}

.grid-list__header-sort-button:hover .grid-list__header-label,
.grid-list__header-sort-button:focus-visible .grid-list__header-label {
    color: var(--grid-list-header-sort-hover-color, lch(100% 0 272 / 1));
}

.grid-list__header-sort-icon {
    display: inline-flex;
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    color: var(--grid-list-header-sort-icon-color, lch(61.399% 1.15 272 / 1));
    opacity: 0;
    transition: opacity var(--speed-highlightFadeIn, 120ms) ease;
}

.grid-list__header-sort-icon svg {
    display: block;
    width: 12px;
    height: 12px;
    fill: currentColor;
}

.grid-list__header-sort-button--active .grid-list__header-sort-icon,
.grid-list__header-sort-button:hover .grid-list__header-sort-icon,
.grid-list__header-sort-button:focus-visible .grid-list__header-sort-icon {
    opacity: 1;
}

.grid-list__header-sort-button:hover .grid-list__header-sort-icon,
.grid-list__header-sort-button:focus-visible .grid-list__header-sort-icon {
    color: var(--grid-list-header-sort-hover-color, lch(100% 0 272 / 1));
}

.grid-list__body {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden auto;
    scrollbar-width: none;
}

.grid-list__body::-webkit-scrollbar {
    display: none;
}

.grid-bulk-selection {
    position: absolute;
    left: var(--grid-bulk-selection-left, 0);
    bottom: 16px;
    width: var(--grid-bulk-selection-width, 100%);
    z-index: 94;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.grid-bulk-selection__bar {
    display: flex;
    align-items: center;
    gap: 17px;
    height: 44px;
    padding: 8px;
    border-radius: 9999px;
    background: var(--grid-bulk-selection-bg, lch(7.67% 0.75 272 / 1));
    box-shadow:
        0 3px 8px lch(0% 0 0 / 0.125),
        0 2px 5px lch(0% 0 0 / 0.125),
        0 1px 1px lch(0% 0 0 / 0.125);
    pointer-events: auto;
}

.grid-bulk-selection__selection {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 28px;
}

.grid-bulk-selection__count,
.grid-bulk-selection__actions,
.grid-bulk-selection__clear {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    min-width: 0;
    padding: 0 10px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    color: var(--grid-bulk-selection-button-color, lch(90.668% 1.375 272 / 1));
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
    cursor: default;
    user-select: none;
}

.grid-bulk-selection__count {
    gap: 4px;
    background: var(--grid-bulk-selection-count-bg, lch(9.599% 0.943 272 / 1));
    box-shadow:
        0 0 0 0.5px var(--grid-bulk-selection-button-border, lch(22.88% 1.83 272 / 1)),
        inset 0 1px 0 lch(100% 0 272 / 0.015);
}

.grid-bulk-selection__clear {
    width: 28px;
    padding: 0;
    background: var(--grid-bulk-selection-count-bg, lch(9.599% 0.943 272 / 1));
    color: var(--grid-bulk-selection-button-color, lch(90.668% 1.375 272 / 1));
    box-shadow:
        0 0 0 0.5px var(--grid-bulk-selection-button-border, lch(22.88% 1.83 272 / 1)),
        inset 0 1px 0 lch(100% 0 272 / 0.015);
}

.grid-bulk-selection__clear .shell-icon {
    color: var(--grid-bulk-selection-clear-icon-color, lch(62.672% 1.375 272 / 1));
}

.grid-bulk-selection__actions {
    gap: 6px;
    background: var(--grid-bulk-selection-actions-bg, lch(13.841% 0.943 272 / 1));
    color: var(--grid-bulk-selection-actions-color, lch(100% 0 272 / 1));
}

.grid-bulk-selection__count:hover,
.grid-bulk-selection__count:focus-visible,
.grid-bulk-selection__clear:hover,
.grid-bulk-selection__clear:focus-visible,
.grid-bulk-selection__actions:hover,
.grid-bulk-selection__actions:focus-visible {
    background: var(--grid-bulk-selection-hover-bg, lch(16.5% 0.943 272 / 1));
    color: var(--grid-bulk-selection-hover-color, lch(100% 0 272 / 1));
    outline: none;
}

.grid-bulk-selection__count-number {
    font-variant-numeric: tabular-nums;
}

.grid-filtered-empty-state {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    background: var(--shell-bg-surface, var(--app-theme-surface-bg, lch(4.52% 0.3 272)));
    pointer-events: none;
}

.grid-filtered-empty-state__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 350px;
    min-height: 210px;
    pointer-events: auto;
}

.grid-filtered-empty-state__title {
    margin: 0;
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4375rem;
    text-align: center;
}

.grid-filtered-empty-state__summary {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 349px;
    height: 56px;
    margin-top: 20px;
    padding: 0 16px;
    gap: 0;
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
    font-size: 0.75rem;
    line-height: 0.90625rem;
    white-space: nowrap;
}

.grid-filtered-empty-state__count {
    color: var(--shell-text-primary, lch(100% 0 272));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 20.5px;
}

.grid-filtered-empty-state__muted {
    margin-left: 0;
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 0.90625rem;
}

.grid-filtered-empty-state__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    margin-left: 64px;
    padding: 0 8.5px;
    border-radius: 6px;
    color: var(--shell-text-tertiary, lch(90.35% 1.15 272));
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 0.90625rem;
    transition: background-color 120ms ease, color 120ms ease;
}

.grid-filtered-empty-state__clear:hover,
.grid-filtered-empty-state__clear:focus-visible {
    background: var(--shell-bg-hover, lch(9.92% 0.493 272 / 1));
    color: var(--shell-text-primary, lch(100% 0 272));
    outline: none;
}

.grid-list__group {
    display: grid;
    grid-template-columns: var(--grid-list-template-columns);
    column-gap: 6px;
    grid-auto-rows: min-content;
    width: 100%;
    min-width: var(--grid-list-content-width, 100%);
    padding-bottom: 2px;
}

.grid-list__group-header {
    position: sticky;
    top: 0;
    z-index: 2;
    height: 38px;
}

.grid-list__group-header--subgroup {
    position: relative;
    top: auto;
    z-index: 0;
}

.grid-list__group-header:has(.anchored-dropdown-menu) {
    z-index: 700;
}

.grid-list__group-header::before {
    content: "";
    position: absolute;
    top: -1px;
    right: var(--grid-list-chrome-horizontal-inset, 8px);
    bottom: 0;
    left: var(--grid-list-chrome-horizontal-inset, 8px);
    border-radius: 5px;
    background:
        linear-gradient(
            90deg,
            var(--grid-list-divider-color, var(--grid-list-surface-bg, lch(7.67% 0.75 272 / 1))) 0%,
            var(--grid-list-surface-bg, lch(7.67% 0.75 272 / 1)) 100%
        ),
        var(--grid-list-surface-bg, lch(7.67% 0.75 272 / 1));
    pointer-events: none;
    opacity: 1;
}

.grid-list__group-header--subgroup::before {
    background: var(--grid-list-subgroup-surface-bg, lch(4.52% 0.3 272 / 1));
}

.grid-list__group-indent,
.grid-list__group-leading-slot,
.grid-list__group-checkbox-slot,
.grid-list__group-title-cell,
.grid-list__cell,
.grid-list__group-end {
    position: relative;
    min-width: 0;
    z-index: 1;
}

.grid-list__group-leading-slot,
.grid-list__group-checkbox-slot {
    position: relative;
    display: flex;
    align-items: center;
    height: 38px;
}

.grid-list__group-toggle {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-left: 2px;
    padding: 2px;
    border: 0;
    border-radius: 9999px;
    color: var(--grid-list-collapse-icon-color, var(--grid-list-text-secondary, lch(18.47% 1.83 272 / 1)));
    background: transparent;
}

.grid-list__group-toggle-icon {
    display: inline-flex;
    transition: transform 120ms ease;
}

.grid-list__group-toggle--expanded .grid-list__group-toggle-icon {
    transform: rotate(90deg);
}

.grid-list__group-toggle:hover,
.grid-list__group-toggle:focus-visible {
    background: transparent;
    color: var(--grid-list-text-primary, lch(90.668% 1.375 272 / 1));
    outline: none;
}

.grid-list__group-title-cell {
    display: flex;
    align-items: center;
    height: 28px;
    padding: 0;
}

.grid-list__group-header--subgroup .grid-list__group-title-cell {
    grid-column: 3 / -2;
}

.grid-list__group-header--subgroup .grid-list__group-title-cell::after {
    content: "";
    display: block;
    flex: 1 1 auto;
    height: 0.5px;
    margin-left: 8px;
    background: var(--grid-list-subgroup-divider-color, lch(20.63% 1.83 272 / 1));
}

.grid-list__group-icon,
.grid-list__row-icon-button,
.grid-list__project-icon-button {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    color: var(--grid-list-text-secondary, rgb(190, 194, 200));
    flex: 0 0 auto;
}

.grid-list__group-icon {
    margin-right: 6px;
}

.grid-list__group-title {
    overflow: hidden;
    color: var(--grid-list-text-primary, lch(90.668% 1.375 272 / 1));
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 0.96875rem;
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.grid-list__group-title:hover {
    color: var(--grid-list-text-primary, lch(100% 0 272 / 1));
}

.grid-list__group-count {
    margin-left: 6px;
    color: var(--grid-list-text-secondary, lch(61.399% 1.15 272 / 1));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 0.96875rem;
    white-space: nowrap;
}

.grid-list__group-end {
    height: 38px;
}

.grid-list__group-create {
    position: absolute;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0 2px;
    border: 0;
    border-radius: 9999px;
    color: var(--grid-list-create-icon-color, lch(62.672% 1.375 272 / 1));
    background: transparent;
}

.grid-list__group-create {
    top: 6px;
    right: 16px;
    opacity: 1;
}

.grid-list__group-create:hover,
.grid-list__group-create:focus-visible {
    background: var(--grid-list-row-hover-bg, lch(13.07% 0.943 272 / 1));
    color: var(--grid-list-text-primary, lch(100% 0 272 / 1));
    outline: none;
}

.grid-list__row {
    position: relative;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    text-decoration: none;
    user-select: none;
    -webkit-user-select: none;
    appearance: none;
}

.grid-list__row::before,
.grid-list__row::after {
    content: "";
    position: absolute;
    right: var(--grid-list-chrome-horizontal-inset, 8px);
    left: var(--grid-list-chrome-horizontal-inset, 8px);
    pointer-events: none;
}

.grid-list__row::before {
    top: 0;
    bottom: 0;
    border-radius: 5px;
    background: transparent;
}

.grid-list__row::after {
    bottom: 0;
    height: 0.5px;
    background: var(--grid-list-row-border, var(--grid-list-surface-bg, lch(7.67% 0.75 272 / 1)));
}

.grid-list__row:hover,
.grid-list__row:focus-visible,
.grid-list__row--menu-open {
    outline: none;
}

.grid-list__row--menu-open {
    z-index: 700;
}

.grid-list__row:has(.anchored-dropdown-menu) {
    z-index: 700;
}

.grid-list__row:hover::before,
.grid-list__row:focus-visible::before,
.grid-list__row.qome-force-hover::before,
.grid-list__row--menu-open::before {
    background: var(--grid-list-row-hover-bg, lch(7.67% 0.75 272 / 1));
}

.grid-list__row--focused::before {
    background: var(--grid-list-row-focus-bg, var(--grid-list-row-hover-bg, lch(9.92% 0.493 272 / 1)));
}

.grid-list__row--selected::before {
    background: var(--grid-list-row-selected-bg, color-mix(in srgb, var(--shell-accent, #5e6ad2) 14%, transparent));
}

.grid-list__row--focused.grid-list__row--selected::before,
.grid-list__row--selected:focus-visible::before,
.grid-list__row--selected:hover::before {
    background: var(--grid-list-row-selected-focus-bg, color-mix(in srgb, var(--shell-accent, #5e6ad2) 20%, transparent));
}

.grid-list__row > * {
    position: relative;
    z-index: 1;
}

.grid-list__row-indent {
    width: 8px;
    height: 1px;
}

.grid-list__row-checkbox-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    opacity: 0;
    transition: opacity 120ms ease;
}

.grid-list__row:hover .grid-list__row-checkbox-cell,
.grid-list__row:focus-visible .grid-list__row-checkbox-cell,
.grid-list__row--focused .grid-list__row-checkbox-cell,
.grid-list__row--selected .grid-list__row-checkbox-cell {
    opacity: 1;
}

.grid-list__row-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: 1px solid var(--grid-list-text-secondary, lch(36.308% 1.15 272 / 1));
    border-radius: 3px;
    background: transparent;
    box-sizing: border-box;
}

.grid-list__row--selected .grid-list__row-checkbox {
    border-color: var(--shell-accent, #5e6ad2);
    background: var(--shell-accent, #5e6ad2);
}

.grid-list__row-checkbox-mark {
    width: 6px;
    height: 3px;
    border-bottom: 1.5px solid var(--shell-bg, #fff);
    border-left: 1.5px solid var(--shell-bg, #fff);
    transform: translateY(-1px) rotate(-45deg);
}

.grid-list__title-cell {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 28px;
}

.grid-list__row-icon-button,
.grid-list__project-icon-button {
    margin-right: 6px;
}

.grid-list__row-title,
.grid-list__project-title {
    overflow: hidden;
    color: var(--grid-list-text-primary, lch(100% 0 272 / 1));
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 0.96875rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.grid-list__cell {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 28px;
}

.grid-list__cell-pill,
.grid-list__cell-icon-text,
.grid-list__cell-icon-button {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    height: 28px;
    border-radius: 9999px;
    color: var(--grid-list-text-secondary, lch(61.399% 1.15 272 / 1));
}

.grid-list__cell-pill {
    height: 24px;
    max-width: 100%;
    padding: 0 8px;
}

.grid-list__cell-pill-icon,
.grid-list__cell-icon-text-icon,
.grid-list__cell-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: currentColor;
    flex: 0 0 auto;
}

.grid-list__cell-pill-label {
    overflow: hidden;
    margin-left: 8px;
    color: currentColor;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.grid-list__cell-icon-button {
    justify-content: center;
    width: 28px;
    padding: 0 6px;
}

.grid-list__cell-icon-button:hover {
    background: var(--grid-list-row-hover-bg, lch(9.92% 0.493 272 / 1));
    color: var(--grid-list-text-primary, lch(90.35% 1.15 272 / 1));
}

.grid-list__cell-icon-button--avatar {
    padding: 0;
}

.grid-list__avatar {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 9999px;
}

.grid-list__cell-icon-text {
    max-width: 100%;
    padding: 0 6px;
}

.grid-list__cell-icon-text-label {
    margin-left: 8px;
    color: var(--grid-list-text-primary, lch(90.35% 1.15 272 / 1));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: normal;
    white-space: nowrap;
}

.grid-list__cell-text {
    overflow: hidden;
    color: var(--grid-list-text-primary, lch(90.35% 1.15 272 / 1));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.grid-list__cell-empty {
    display: block;
    width: 28px;
    height: 28px;
}

.grid-list__row-end {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    min-width: 0;
    z-index: 1;
}

.grid-list__row-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0 2px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: transparent;
    color: var(--grid-list-text-secondary, lch(61.399% 1.15 272 / 1));
    opacity: 0;
    transition:
        background-color 120ms ease-out,
        color 120ms ease-out,
        opacity 120ms ease-out;
}

.grid-list__row:hover .grid-list__row-menu-trigger,
.grid-list__row:focus-within .grid-list__row-menu-trigger,
.grid-list__row--menu-open .grid-list__row-menu-trigger {
    opacity: 1;
}

.grid-list__row-menu-trigger:hover,
.grid-list__row-menu-trigger:focus-visible {
    background: var(--shell-menu-item-hover, lch(15.32% 0.75 272 / 1));
    color: var(--grid-list-text-primary, lch(90.668% 1.375 272 / 1));
    outline: none;
}

.board-grid {
    position: relative;
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
    overflow: auto;
    padding: 0;
    background-color: var(--shell-bg-surface, var(--app-theme-surface-bg, lch(4.52% 0.3 272)));
    scrollbar-gutter: stable;
}

.board-grid__track {
    display: flex;
    align-items: stretch;
    width: max-content;
    min-width: 100%;
    height: 100%;
    min-height: 0;
    padding-top: 0;
    padding-left: 4px;
    overflow: hidden;
}

.board-column {
    position: relative;
    flex: 0 0 354px;
    display: flex;
    flex-direction: column;
    width: 354px;
    height: 100%;
    min-height: 0;
}

.board-column::before {
    position: absolute;
    inset: 4px 4px 0 4px;
    content: "";
    border-radius: 5px 5px 0 0;
    background: color-mix(in srgb, var(--shell-bg-sidebar) 32%, transparent);
    pointer-events: none;
}

.board-column__header {
    position: relative;
    z-index: 1;
    width: 354px;
    height: 50px;
    flex: 0 0 50px;
}

.board-column__header-surface {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 346px;
    height: 46px;
    margin: 4px 4px 0;
    padding: 0 8px 0 14px;
    border-radius: 5px 5px 0 0;
    background: transparent;
}

.board-column__heading-cluster {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
}

.board-column__collapse-toggle {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-right: 2px;
    border-radius: 6px;
    color: var(--board-column-collapse-icon-color, var(--shell-text-secondary, lch(61.399% 1.15 272)));
}

.board-column__collapse-icon {
    display: inline-flex;
    transition: transform 160ms ease;
}

.board-column__collapse-icon--expanded {
    transform: rotate(90deg);
}

.board-column__heading-link-cluster {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 256px;
}

.board-column__heading-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    flex: 0 0 auto;
}

.board-column__heading-link {
    overflow: hidden;
    color: var(--shell-text-tertiary, lch(90.35% 1.15 272));
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 0.96875rem;
    text-decoration: none;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.board-column__count {
    display: inline-flex;
    margin-left: 6px;
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 0.96875rem;
    white-space: nowrap;
    flex: 0 0 auto;
}

.board-column__actions {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 56px;
    height: 50px;
    flex: 0 0 auto;
}

.board-column__action-anchor {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
}

.board-column__menu-button,
.board-column__create-button {
    display: grid;
    place-items: center;
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
    transition: background-color 120ms ease, color 120ms ease;
}

.board-column__menu-button {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.board-column__menu-button:hover,
.board-column__menu-button:focus-visible,
.board-column__menu-button--open {
    background: var(--shell-bg-hover, lch(9.92% 0.493 272 / 1));
    color: var(--shell-text-primary, lch(100% 0 272));
}

.board-column__create-button {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    color: var(--board-column-create-icon-color, var(--shell-text-secondary, lch(61.399% 1.15 272)));
}

.board-column__create-button:hover,
.board-column__create-button:focus-visible {
    background: var(--shell-bg-hover, lch(9.92% 0.493 272 / 1));
    color: var(--shell-text-primary, lch(100% 0 272));
}

.board-column__cards {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    gap: 8px;
    padding: 1px 13px 13px;
    overflow: auto;
    scrollbar-gutter: stable;
    z-index: 1;
}

.board-column__cards--virtualized {
    gap: 0;
}

.board-column__cards--virtualized .board-card {
    margin-bottom: 8px;
}

.board-column__cards-shell {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    margin-top: 8px;
}

.board-column__cards-shell.shell-tree-collapse--expanded {
    max-height: none;
}

.board-card {
    position: relative;
    width: 328px;
}

.board-card__surface {
    display: flex;
    flex-direction: column;
    width: 328px;
    min-height: var(--board-card-height, 38px);
    padding: 5px 2px 5px 6px;
    border-radius: 8px;
    background-color: var(--shell-bg-active, lch(7.67% 0.75 272));
    box-shadow: var(--shell-shadow);
    text-align: left;
    font-weight: 400;
    transition: background-color 120ms ease;
}

.board-card__surface:hover,
.board-card__surface:focus-visible,
.board-card--focused .board-card__surface {
    background-color: var(--shell-menu-item-hover, lch(9.92% 0.493 272 / 1));
    outline: none;
}

.board-card--disabled .board-card__surface {
    cursor: default;
    opacity: 0.58;
}

.board-card--detailed .board-card__surface {
    min-height: var(--board-card-height, 61.5px);
    padding: 5px 6px;
}

.board-card__primary-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    min-height: 28px;
}

.board-card__title-cluster {
    display: flex;
    align-items: flex-start;
    min-width: 0;
    min-height: 28px;
    gap: 4px;
}

.board-card__icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    margin: 6px;
    color: var(--shell-text-secondary, rgb(190, 194, 200));
    flex: 0 0 auto;
}

.board-card__title {
    display: flow-root;
    overflow: hidden;
    color: var(--shell-text-tertiary, lch(90.668% 1.375 272));
    font-size: 0.8125rem;
    font-weight: 500;
    margin: 0 0 6px;
    padding-top: 6px;
    line-height: normal;
    text-rendering: optimizeLegibility;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.board-card__accessories {
    display: flex;
    align-items: center;
    margin-left: auto;
    flex: 0 0 auto;
}

.board-card--detailed .board-card__accessories {
    margin-right: -4px;
}

.board-card__accessory {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
}

.board-card__accessory-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: var(--shell-text-secondary, lch(62.672% 1.375 272 / 1));
}

.board-card__avatar {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 999px;
}

.board-card__description {
    margin: 0 10px 0 4px;
    color: var(--shell-text-secondary, lch(62.672% 1.375 272 / 1));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: normal;
    white-space: normal;
}

.board-card--detailed .board-card__primary-row {
}

.board-card--detailed .board-card__description {
    display: flex;
    align-items: flex-start;
    margin: 0 0 3px;
    padding: 2px 4px 3px;
}

.grid-preview-panel {
    position: fixed;
    top: 88px;
    right: 24px;
    z-index: 650;
    display: flex;
    width: 416px;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 112px);
    overflow: hidden auto;
    border: 0.5px solid lch(20.63% 1.83 272 / 1);
    border-radius: 12px;
    background: lch(7.67% 0.75 272 / 1);
    box-shadow: rgba(0, 0, 0, 0.12) 0 4px 34px 0;
    color: lch(100% 0 272 / 1);
    box-sizing: border-box;
    scrollbar-width: none;
}

.grid-preview-panel::-webkit-scrollbar {
    display: none;
}

.grid-preview-panel__content {
    display: block;
    width: 100%;
    min-height: 664px;
    padding: 16px 24px;
    box-sizing: border-box;
}

.grid-preview-panel__key {
    display: block;
    margin: 0 0 6px;
    color: lch(62.672% 1.375 272 / 1);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: normal;
}

.grid-preview-panel__title {
    display: block;
    margin: 0 0 12px;
    color: lch(100% 0 272 / 1);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: normal;
}

.grid-preview-panel__meta {
    display: block;
    margin: 0 0 16px;
    color: lch(62.672% 1.375 272 / 1);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.125rem;
}

.grid-preview-panel__body {
    display: block;
    margin: 0;
    color: lch(100% 0 272 / 1);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.375rem;
}

.panel-list {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    padding: 8px 0 16px;
}

.panel-list-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    min-height: var(--panel-list-item-row-height, calc(var(--panel-list-item-min-height, 55px) + 2px));
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    appearance: none;
    font: inherit;
    line-height: normal;
    cursor: var(--panel-list-item-cursor, default);
    user-select: none;
    -webkit-user-select: none;
}

button.panel-list-item,
a.panel-list-item {
    cursor: var(--panel-list-item-interactive-cursor, default);
}

.panel-list-item.panel-list-item--interactive {
    cursor: var(--panel-list-item-interactive-cursor, pointer);
}

.panel-list-item__chrome {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    min-height: var(--panel-list-item-min-height, 55px);
    margin: 0 var(--panel-list-item-plate-margin-inline, 8px);
    padding: 0 var(--panel-list-item-inset-end, 16px) 0 var(--panel-list-item-inset-start, 16px);
    column-gap: var(--panel-list-item-content-gap, 12px);
    border-radius: 8px;
    flex: 0 0 auto;
}

.panel-list-item__chrome::before {
    content: "";
    position: absolute;
    inset:
        var(--panel-list-item-plate-inset-top, 0)
        var(--panel-list-item-plate-inset-inline, 0)
        var(--panel-list-item-plate-inset-bottom, 0)
        var(--panel-list-item-plate-inset-inline, 0);
    border-radius: 8px;
    background-color: transparent;
    transition:
        background-color 120ms ease,
        box-shadow 120ms ease;
    pointer-events: none;
}

.panel-list-item__leading,
.panel-list-item__body,
.panel-list-item__trailing {
    position: relative;
    z-index: 1;
}

.panel-list-item--body-only .panel-list-item__chrome {
    grid-template-columns: auto minmax(0, 1fr);
}

.panel-list-item--no-trailing .panel-list-item__chrome {
    grid-template-columns: auto minmax(0, 1fr);
}

.panel-list-item:hover .panel-list-item__chrome::before,
.panel-list-item.qome-force-hover .panel-list-item__chrome::before {
    background-color: var(--panel-list-item-hover-bg, var(--shell-menu-item-hover, var(--shell-bg-hover, lch(11.888% 7.051 282.863))));
}

.panel-list-item--selected .panel-list-item__chrome::before {
    background-color: var(--panel-list-item-selected-bg, var(--shell-nav-active-bg, var(--shell-bg-active, lch(9.471% 6.568 282.863))));
}

.panel-list-item:active .panel-list-item__chrome::before {
    background-color: var(--panel-list-item-pressed-bg, var(--panel-list-item-selected-bg, var(--shell-nav-active-bg, var(--shell-bg-active))));
}

.panel-list-item:focus-visible {
    outline: none;
}

.panel-list-item:focus-visible .panel-list-item__chrome::before {
    box-shadow: inset 0 0 0 1px var(--panel-list-item-focus-ring, var(--shell-menu-border, var(--shell-border)));
}

.panel-list-item--no-selection-plate.panel-list-item--selected .panel-list-item__chrome::before {
    background-color: transparent;
}

.panel-list-item__leading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--panel-list-item-leading-width, 32px);
    min-width: var(--panel-list-item-leading-width, 32px);
}

.panel-list-item__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}

.panel-list-item__title-row,
.panel-list-item__subtitle-row {
    min-width: 0;
}

.panel-list-item__title,
.panel-list-item__subtitle {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    line-height: normal;
}

.panel-list-item__title {
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
    font-weight: 500;
}

.panel-list-item__title--strong,
.panel-list-item--selected .panel-list-item__title {
    color: var(--shell-text-tertiary, lch(90.35% 1.15 272));
}

.panel-list-item__subtitle {
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
    font-weight: 450;
}

.panel-list-item__trailing {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
}

.panel-list-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--panel-list-icon-size, 28px);
    height: var(--panel-list-icon-size, 28px);
    flex: 0 0 var(--panel-list-icon-size, 28px);
    border-radius: 8px;
    background: color-mix(in srgb, var(--panel-list-icon-color, var(--shell-text-secondary)) 13%, transparent);
    color: var(--panel-list-icon-color, var(--shell-text-secondary));
    font-size: 0.6875rem;
    font-weight: 650;
    line-height: var(--panel-list-icon-size, 28px);
}

.panel-list-icon--text {
    color: var(--shell-text-primary);
}

.panel-list-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.panel-list-meta__indicator {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 9999px;
    background: var(--shell-accent, #5e6ad2);
}

.panel-list-meta__text {
    overflow: hidden;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-list-item {
    position: relative;
}

.activity-list-item__copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.activity-list-item__title-row,
.activity-list-item__subtitle-row,
.activity-list-item__description-row {
    display: flex;
    min-width: 0;
    align-items: center;
}

.activity-list-item__title,
.activity-list-item__subtitle,
.activity-list-item__description {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-list-item__title {
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1rem;
}

.activity-list-item__title--strong,
.activity-list-item--selected .activity-list-item__title {
    color: var(--shell-text-tertiary);
}

.activity-list-item__subtitle,
.activity-list-item__description {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
}

.activity-list-item__description {
    color: var(--shell-text-muted, var(--shell-text-secondary));
}

.activity-list-item__trailing-content {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.activity-list-item__menu-button {
    display: inline-flex;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-text-muted, var(--shell-text-secondary));
    opacity: 0;
    transition:
        background-color 120ms ease,
        color 120ms ease,
        opacity 120ms ease;
}

.activity-list-item:hover .activity-list-item__menu-button,
.activity-list-item:focus-within .activity-list-item__menu-button,
.activity-list-item--menu-open .activity-list-item__menu-button,
.activity-list-item.qome-force-hover .activity-list-item__menu-button {
    opacity: 1;
}

.activity-list-item__menu-button:hover,
.activity-list-item__menu-button:focus-visible,
.activity-list-item--menu-open .activity-list-item__menu-button {
    background: var(--shell-bg-hover);
    color: var(--shell-text-tertiary);
    outline: none;
}

.sectioned-panel-list__group + .sectioned-panel-list__group {
    margin-top: 0;
}

.sectioned-panel-list__group + .sectioned-panel-list__group::before {
    content: "";
    display: block;
    width: 100%;
    height: var(--sectioned-panel-list-divider-height, 4px);
    background: var(--sectioned-panel-list-divider-color, var(--shell-bg-surface, var(--app-theme-surface-bg, transparent)));
}

.sectioned-panel-list__header {
    display: flex;
    width: calc(100% - 16px);
    min-height: var(--sectioned-panel-list-header-min-height, 28px);
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin: 0 8px;
    padding: 0 var(--sectioned-panel-list-header-padding-inline, 8px);
    border: 0;
    border-radius: 8px;
    background: var(--sectioned-panel-list-header-bg, var(--app-theme-card-bg, var(--shell-bg-active)));
    color: var(--sectioned-panel-list-header-color, var(--shell-text-secondary));
    text-align: left;
    appearance: none;
    font: inherit;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-select: none;
    transition: background-color 120ms ease, color 120ms ease;
}

.sectioned-panel-list__header:hover,
.sectioned-panel-list__header:has(.sectioned-panel-list__header-main:focus-visible),
.sectioned-panel-list__header:has(.sectioned-panel-list__collapse-button:focus-visible) {
    background: var(--sectioned-panel-list-header-hover-bg, var(--sectioned-panel-list-header-bg, var(--app-theme-card-bg, var(--shell-bg-active))));
    color: var(--sectioned-panel-list-header-hover-color, var(--shell-text-tertiary));
    outline: none;
}

.sectioned-panel-list__header--selected {
    color: var(--sectioned-panel-list-header-color, var(--shell-text-secondary));
}

.sectioned-panel-list__header-copy {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.sectioned-panel-list__header-main,
.sectioned-panel-list__collapse-button {
    display: inline-flex;
    align-items: center;
    border: 0;
    background: transparent;
    color: inherit;
    appearance: none;
    font: inherit;
}

.sectioned-panel-list__header-main {
    min-width: 0;
    max-width: 100%;
    height: var(--sectioned-panel-list-header-min-height, 28px);
    flex: 0 1 auto;
    gap: 6px;
    justify-content: flex-start;
    padding: 0;
    cursor: var(--panel-list-item-interactive-cursor, pointer);
}

.sectioned-panel-list__header-main:focus-visible,
.sectioned-panel-list__collapse-button:focus-visible {
    outline: none;
}

.sectioned-panel-list__collapse-button {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    justify-content: center;
    padding: 0;
    border-radius: 5px;
    color: var(--shell-text-secondary);
    cursor: var(--panel-list-item-interactive-cursor, pointer);
    opacity: 0.78;
    transition: color 120ms ease, opacity 120ms ease;
}

.sectioned-panel-list__header:hover .sectioned-panel-list__collapse-button,
.sectioned-panel-list__header:has(.sectioned-panel-list__header-main:focus-visible) .sectioned-panel-list__collapse-button,
.sectioned-panel-list__header:has(.sectioned-panel-list__collapse-button:focus-visible) .sectioned-panel-list__collapse-button {
    color: var(--shell-text-tertiary);
    opacity: 1;
}

.sectioned-panel-list__collapse-button .shell-icon {
    transition: transform 170ms cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-origin: center;
}

.sectioned-panel-list__group--collapsed .sectioned-panel-list__collapse-button .shell-icon {
    transform: rotate(-90deg);
}

.sectioned-panel-list__header-icon {
    flex: 0 0 18px;
    border-radius: 6px;
}

.sectioned-panel-list__header-icon .shell-icon {
    color: currentColor;
}

.sectioned-panel-list__header-title,
.sectioned-panel-list__header-meta {
    overflow: hidden;
    font-size: 0.8125rem;
    line-height: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sectioned-panel-list__header-title {
    font-weight: 500;
}

.sectioned-panel-list__header-meta {
    font-weight: 450;
    color: var(--shell-text-secondary);
}

.sectioned-panel-list__header .shell-icon {
    flex: 0 0 auto;
}

.sectioned-panel-list__children-shell {
    display: grid;
    grid-template-rows: 1fr;
    overflow: hidden;
    opacity: 1;
    transition:
        grid-template-rows 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 140ms ease;
}

.sectioned-panel-list__group--collapsed .sectioned-panel-list__children-shell {
    grid-template-rows: 0fr;
    opacity: 0;
    pointer-events: none;
}

.sectioned-panel-list__children {
    min-height: 0;
    overflow: hidden;
    padding: 2px 0 6px;
    transition: padding 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sectioned-panel-list__group--collapsed .sectioned-panel-list__children {
    padding-top: 0;
    padding-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    .sectioned-panel-list__children-shell,
    .sectioned-panel-list__children,
    .sectioned-panel-list__collapse-button .shell-icon {
        transition: none;
    }
}

.field-section + .field-section {
    margin-top: var(--field-section-gap, 28px);
}

.field-section__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding: 0 16px;
}

.field-section__header-main {
    min-width: 0;
}

.field-section__title {
    margin: 0;
    color: var(--shell-text-primary);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4375rem;
}

.field-section__subtitle {
    margin-top: 2px;
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.25rem;
}

.field-section__actions {
    --field-section-header-action-size: 24px;
    display: inline-flex;
    align-items: center;
    align-self: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    min-height: var(--field-section-header-action-size);
    gap: 4px;
}

.field-section__actions .settings-row-actions {
    min-height: var(--field-section-header-action-size);
    gap: 4px;
}

.field-section__actions .ui-button {
    height: var(--field-section-header-action-size);
    min-height: var(--field-section-header-action-size);
    padding: 0 8px;
    font-size: 0.75rem;
    line-height: normal;
}

.field-section__actions .ui-icon-button {
    width: var(--field-section-header-action-size);
    height: var(--field-section-header-action-size);
}

.field-group {
    border: 0.5px solid var(--settings-card-border, lch(14.15% 1.83 272));
    border-radius: 11px;
    background: var(--settings-card-bg, lch(7.67% 0.75 272));
}

.field-group--flush {
    border: 0;
    border-radius: 0;
    background: transparent;
    margin-left: -20px;
    margin-right: -20px;
}

.field-group--flush > .field-group__list > .field-row {
    padding-left: 20px;
    padding-right: 20px;
}

.field-group--flush > .field-group__list > .field-row::after {
    display: none;
}

.field-section .field-group + .field-group {
    margin-top: 12px;
}

.field-group__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.field-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 60px;
    padding: 16px 12px 16px 16px;
    border-radius: 8px;
}

.field-row:first-child {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.field-row:last-child {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.field-row:has(.settings-select--open),
.field-row:has(.selection-dropdown--open) {
    z-index: 670;
}

.field-row--interactive {
    transition: background-color 120ms ease-out;
}

.field-row--interactive:hover,
.field-row--interactive:focus-within {
    background: var(--settings-control-hover-bg, lch(9.94% 1.03 272));
}

.field-row--disabled {
    opacity: 0.54;
}

.field-row::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: -0.5px;
    left: 16px;
    height: 0.5px;
    background: var(--settings-row-divider, lch(14.15% 1.83 272));
}

.field-group__list > .field-row:last-child::after {
    display: none;
}

.field-row__overlay {
    position: absolute;
    inset: 0;
    border: 0;
    border-radius: inherit;
    background: transparent;
    cursor: pointer;
}

.field-row__overlay--button {
    padding: 0;
}

.field-row__overlay:focus-visible {
    outline: 2px solid lch(47.918% 59.303 288.421 / 0.65);
    outline-offset: -2px;
}

.field-row__overlay:disabled {
    cursor: default;
}

.field-row__leading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 16px;
    flex: 0 0 auto;
}

.field-row__leading--tile {
    width: 32px;
    height: 32px;
}

.field-row--with-icon-tile {
    min-height: 65px;
}

.field-row__body {
    min-width: 0;
    flex: 1 1 auto;
}

.field-row__label {
    display: block;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 0.96875rem;
}

.field-row__description {
    margin-top: 3px;
    color: var(--settings-status-text, var(--shell-text-secondary, lch(62.672% 1.375 272)));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 0.90625rem;
}

.field-row__description--monospace {
    font-family: var(--font-mono, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace);
}

.field-row__trailing {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    margin-left: auto;
}

.field-row--control-compact .field-row__trailing,
.field-row--control-medium .field-row__trailing,
.field-row--control-wide .field-row__trailing,
.field-row--control-full .field-row__trailing {
    width: var(--field-row-control-width, auto);
    min-width: 0;
}

.field-row--control-compact {
    --field-row-control-width: min(180px, 100%);
}

.field-row--control-medium {
    --field-row-control-width: min(256px, 100%);
}

.field-row--control-wide {
    --field-row-control-width: min(340px, 100%);
}

.field-row--control-full {
    --field-row-control-width: min(360px, 100%);
}

.field-row--control-compact .field-row__trailing > *,
.field-row--control-medium .field-row__trailing > *,
.field-row--control-wide .field-row__trailing > *,
.field-row--control-full .field-row__trailing > * {
    width: 100%;
    min-width: 0;
}

.field-row__trailing .ui-icon-button + .ui-icon-button {
    margin-left: -4px;
}

.field-row__trailing:has(.settings-select--open),
.field-row__trailing:has(.selection-dropdown--open) {
    z-index: 670;
}

.field-row__chevron {
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: lch(62.672% 1.375 272);
}

.permission-list {
    min-height: 242px;
    padding: 0 16px;
    list-style: none;
}

.permission-list__item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48.5px;
    padding: 16px 0;
}

.permission-list__item::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -0.5px;
    left: 0;
    height: 0.5px;
    background: var(--settings-row-divider, lch(14.15% 1.83 272));
}

.permission-list__item:last-child::after {
    display: none;
}

.permission-list__icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: lch(62.672% 1.375 272);
}

.permission-list__text {
    min-width: 0;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: normal;
}

@media (max-width: 760px) {
    .field-section__header {
        padding: 0;
    }

    .field-row {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .field-row__trailing {
        width: 100%;
        justify-content: flex-start;
        margin-left: 0;
    }
}

.search-field {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 36px;
    padding: 0 12px;
    border: 0.5px solid var(--settings-card-border, lch(14.15% 1.83 272));
    border-radius: 8px;
    background: var(--settings-card-bg, lch(7.67% 0.75 272));
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
    transition:
        border-color 120ms ease-out,
        background-color 120ms ease-out,
        color 120ms ease-out;
}

.search-field:focus-within {
    border-color: var(--settings-control-border-active, lch(28.68% 2.1 272));
    background: var(--settings-control-bg, lch(9.02% 2.1 272));
    color: var(--shell-text-primary);
}

.search-field--disabled {
    opacity: 0.54;
}

.search-field__icon {
    display: inline-flex;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

.search-field__input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--shell-text-primary);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.125rem;
}

.search-field__input::placeholder {
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
}

.search-field__input::-webkit-search-decoration,
.search-field__input::-webkit-search-cancel-button,
.search-field__input::-webkit-search-results-button,
.search-field__input::-webkit-search-results-decoration {
    display: none;
}

.settings-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 34px;
    gap: 16px;
}

.settings-toolbar__filters,
.settings-toolbar__actions,
.settings-row-actions {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 8px;
}

.settings-toolbar__filters {
    gap: 6px;
}

.settings-toolbar__actions,
.settings-row-actions {
    justify-content: flex-end;
}

.settings-row-actions--start {
    justify-content: flex-start;
}

.settings-row-actions--center {
    justify-content: center;
}

.settings-row-actions--end {
    justify-content: flex-end;
}

.settings-toolbar .search-field {
    width: 300px;
    max-width: 100%;
    height: 32px;
    gap: 8px;
    padding: 0 8px;
    border-color: var(--settings-control-border, lch(15.32% 1.38 272));
    background: var(--settings-control-bg, lch(4.52% 0.3 272));
}

.settings-toolbar .search-field__icon {
    width: 16px;
    height: 16px;
    color: var(--shell-text-primary);
}

.settings-toolbar .search-field__input {
    font-weight: 500;
}

.settings-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-width: 0;
    min-height: 32px;
    gap: 16px;
    margin-top: 28px;
}

.settings-editor-footer__leading {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.25rem;
}

.settings-editor-footer__actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    margin-left: auto;
}

.settings-grid-list {
    min-width: 0;
}

.settings-grid-list .grid-list {
    border-top: 0.5px solid var(--settings-row-divider, lch(14.15% 1.83 272));
}

.settings-grid-list--flush .grid-list {
    border-top: 0;
    --grid-list-surface-bg: var(--settings-card-bg, lch(4.52% 0.3 272));
    --grid-list-row-border: var(--settings-row-divider, lch(9.02% 2.1 272));
}

.settings-table {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 10px;
}

.settings-table--fill {
    height: 100%;
    min-height: 0;
}

.settings-table--fill .settings-table__surface {
    flex: 1 1 auto;
    min-height: 0;
}

.settings-table--fill .settings-table__section {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

.settings-table--fill .settings-table__empty {
    flex: 1 1 auto;
    min-height: 220px;
}

.settings-table--fill .settings-table__surface--loading {
    flex: 1 1 auto;
}

.settings-table__toolbar {
    min-height: 32px;
}

.settings-table__surface {
    display: flex;
    min-width: 0;
    flex-direction: column;
    border: 0.5px solid var(--settings-card-border, lch(14.15% 1.83 272));
    border-radius: 11px;
    background: var(--settings-card-bg, lch(4.52% 0.3 272));
    overflow: visible;
}

.settings-table__section {
    min-width: 0;
}

.settings-table__section + .settings-table__section {
    border-top: 0.5px solid var(--settings-row-divider, lch(14.15% 1.83 272));
}

.settings-table__section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 34px;
    padding: 10px 16px 6px;
}

.settings-table__section-main {
    min-width: 0;
}

.settings-table__section-title {
    margin: 0;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 560;
    line-height: 1rem;
}

.settings-table__section-subtitle {
    margin: 2px 0 0;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
}

.settings-table__section-count {
    flex: 0 0 auto;
    color: var(--shell-text-secondary);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 0.875rem;
}

.settings-table__header-row,
.settings-table__row {
    display: grid;
    grid-template-columns: var(--settings-table-grid-template);
    min-width: 0;
}

.settings-table__header-row {
    min-height: 31px;
    border-top: 0.5px solid var(--settings-row-divider, lch(14.15% 1.83 272));
    border-bottom: 0.5px solid var(--settings-row-divider, lch(14.15% 1.83 272));
}

.settings-table__section-header + .settings-table__header-row {
    border-top: 0;
}

.settings-table__header-cell {
    display: flex;
    align-items: center;
    min-width: 0;
    padding: 0 12px;
    color: var(--shell-text-secondary);
    font-size: 0.71875rem;
    font-weight: 500;
    line-height: 0.875rem;
    white-space: nowrap;
}

.settings-table__header-cell:first-child {
    padding-left: 16px;
}

.settings-table__header-cell--actions {
    padding: 0 8px 0 0;
}

.settings-table__rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.settings-table__row {
    position: relative;
    align-items: center;
    min-height: 50px;
    transition: background-color 120ms ease-out;
}

.settings-table__row::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: -0.5px;
    left: 16px;
    height: 0.5px;
    background: var(--settings-row-divider, lch(14.15% 1.83 272));
    pointer-events: none;
}

.settings-table__rows > .settings-table__row:last-child::after {
    display: none;
}

.settings-table__row--interactive {
    cursor: pointer;
}

.settings-table__row:hover,
.settings-table__row:focus-within,
.settings-table__row--selected {
    background: var(--settings-control-hover-bg, lch(9.94% 1.03 272));
}

.settings-table__row--disabled {
    opacity: 0.54;
    cursor: default;
}

.settings-table__row--loading {
    pointer-events: none;
}

.settings-table__row-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: inherit;
}

.settings-table__row-overlay:focus-visible {
    outline: 2px solid lch(47.918% 59.303 288.421 / 0.65);
    outline-offset: -2px;
}

.settings-table__cell,
.settings-table__actions-cell {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    min-height: 50px;
    padding: 7px 12px;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.125rem;
}

.settings-table__cell:first-child {
    padding-left: 16px;
}

.settings-table__row--interactive .settings-table__cell {
    pointer-events: none;
}

.settings-table__row--interactive .settings-table__cell :where(a, button, input, select, textarea, [role="button"], [role="combobox"]),
.settings-table__row--interactive .settings-table__actions-cell {
    pointer-events: auto;
}

.settings-table__cell--primary {
    gap: 10px;
}

.settings-table__header-cell--align-center,
.settings-table__cell--align-center {
    justify-content: center;
    text-align: center;
}

.settings-table__header-cell--align-end,
.settings-table__cell--align-end {
    justify-content: flex-end;
    text-align: right;
}

.settings-table__cell--muted {
    color: var(--shell-text-secondary);
}

.settings-table__cell--strong {
    font-weight: 560;
}

.settings-table__cell--code {
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.settings-table__avatar,
.settings-table__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 7px;
    background: var(--settings-icon-tile-bg, lch(10.691% 0.493 272));
    color: var(--settings-icon-tile-color, var(--shell-text-primary));
}

.settings-table__avatar {
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 650;
    line-height: 1;
}

.settings-table__avatar--image {
    object-fit: cover;
}

.settings-table__entity,
.settings-table__cell-stack {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.settings-table__entity-title,
.settings-table__cell-text,
.settings-table__cell-subtext,
.settings-table__entity-subtitle {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-table__entity-title,
.settings-table__cell-text {
    color: inherit;
}

.settings-table__entity-subtitle,
.settings-table__cell-subtext {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
}

.settings-table__cell-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-right: 7px;
    color: var(--shell-text-secondary);
}

.settings-table__actions-cell {
    justify-content: flex-end;
    padding: 0 8px 0 0;
}

.settings-table__row-actions {
    position: relative;
    display: inline-flex;
    opacity: 0;
    pointer-events: none;
    transition: opacity 100ms ease-out;
}

.settings-table__row:hover .settings-table__row-actions,
.settings-table__row:focus-within .settings-table__row-actions,
.entity-row:hover .settings-table__row-actions,
.entity-row:focus-within .settings-table__row-actions,
.settings-table__row-actions--open {
    opacity: 1;
    pointer-events: auto;
}

.settings-table__row-menu-button {
    width: 28px;
    height: 28px;
}

.settings-table__loading-bar,
.settings-table__loading-action {
    display: block;
    height: 8px;
    border-radius: 9999px;
    background:
        linear-gradient(
            90deg,
            var(--shell-bg-selected) 0%,
            color-mix(in srgb, var(--shell-bg-selected) 72%, var(--shell-text-tertiary)) 45%,
            var(--shell-bg-selected) 90%);
    background-size: 220% 100%;
    animation: skeleton-shimmer 1.6s ease-in-out infinite;
}

.settings-table__loading-bar {
    width: min(100%, 128px);
}

.settings-table__loading-bar--primary {
    width: min(100%, 190px);
}

.settings-table__loading-bar--short {
    width: min(100%, 64px);
}

.settings-table__loading-action {
    width: 18px;
    height: 18px;
}

.anchored-dropdown-menu--settings-table-row > .shell-dropdown-menu {
    width: 220px;
}

.settings-table__empty {
    min-height: 78px;
}

.settings-form {
    position: relative;
    margin: 0 0 48px;
}

.settings-form--editor {
    display: flex;
    flex-direction: column;
}

.settings-form--editor > .editable-title-field + .ui-form__rich-text {
    margin-top: 40px;
}

.settings-editor-footer .ui-button--default.ui-button--control {
    background: var(--settings-form-secondary-button-bg, var(--settings-control-hover-bg, lch(20.671% 6.918 282.863)));
    color: var(--settings-form-secondary-button-text, var(--shell-menu-text, lch(91.561% 4.284 282.863)));
}

.settings-editor-footer .ui-button--default.ui-button--control:hover,
.settings-editor-footer .ui-button--default.ui-button--control:focus-visible {
    background: var(--settings-form-secondary-button-hover-bg, var(--shell-menu-item-hover, lch(24.2% 7.8 282.863)));
    color: var(--shell-text-primary);
}

.settings-form-card {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 16px;
    border: 0.5px solid var(--settings-card-border, lch(20.171% 8.268 282.863));
    border-radius: 11px;
    background: var(--settings-card-bg, lch(12.971% 7.068 282.863));
}

.settings-form-card > .ui-form__row--stacked,
.settings-form-card > .settings-form-option-row {
    margin: 0 0 24px;
}

.settings-form-card > .ui-form__row--stacked:last-child,
.settings-form-card > .settings-form-option-row:last-child,
.settings-form-card > .settings-row-actions:last-child {
    margin-bottom: 0;
}

.settings-form-card .ui-form__row--stacked {
    gap: 0;
}

.settings-form-card .ui-form__row--stacked .ui-form__label {
    display: block;
    margin: 1px 0 4px;
    color: var(--shell-text-primary);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1rem;
}

.settings-form-card .ui-form__row--stacked .ui-form__label span:first-child {
    display: inline;
    color: var(--shell-menu-text, lch(91.297% 4.534 282.863));
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: normal;
}

.settings-form-card .ui-form__row--stacked .ui-form__label span + span {
    display: inline;
    margin-left: 4px;
    color: var(--shell-text-secondary, lch(65.188% 4.534 282.863));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: normal;
}

.settings-form-card .ui-form__row--stacked .ui-form__label span + span::before {
    content: "-";
    margin-right: 4px;
    color: var(--shell-text-tertiary, lch(42.561% 4.534 282.863));
    font-size: 0.9375rem;
    font-weight: 450;
    line-height: 1.4375rem;
}

.settings-form-card .ui-form__row--stacked .ui-form__error {
    margin-top: 6px;
}

.settings-form-card .ui-form__textarea {
    min-height: 64px;
    padding: 6px 12px;
    line-height: 17px;
}

.settings-form-card > .settings-row-actions {
    min-height: 32px;
    margin-top: 0;
    gap: 12px;
}

.settings-form-card > .settings-row-actions .ui-button--default.ui-button--control {
    background: var(--settings-form-secondary-button-bg, var(--settings-control-hover-bg, lch(19.828% 7.282 282.863)));
    color: var(--settings-form-secondary-button-text, var(--shell-menu-text, lch(91.297% 4.534 282.863)));
}

.settings-form-card > .settings-row-actions .ui-button--default.ui-button--control:hover,
.settings-form-card > .settings-row-actions .ui-button--default.ui-button--control:focus-visible {
    background: var(--settings-form-secondary-button-hover-bg, var(--shell-menu-item-hover, lch(24.2% 7.8 282.863)));
    color: var(--shell-text-primary);
}

.settings-form--sectioned {
    display: flex;
    flex-direction: column;
}

.settings-form--sectioned > .ui-form__row--stacked {
    margin: 0 0 28px;
}

.settings-form--sectioned > .ui-form__row--stacked .ui-form__label {
    display: block;
    margin: 0 0 8px;
    color: var(--shell-text-primary);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1rem;
}

.settings-form--sectioned > .ui-form__row--stacked .ui-form__label span:first-child {
    display: inline;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: normal;
}

.settings-form--sectioned > .ui-form__row--stacked .ui-form__label span + span {
    display: inline;
    margin-left: 4px;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: normal;
}

.settings-form--sectioned > .ui-form__row--stacked .ui-form__label span + span::before {
    content: "-";
    margin-right: 4px;
    color: var(--shell-text-tertiary);
    font-size: 0.9375rem;
    font-weight: 450;
    line-height: 1.4375rem;
}

.settings-form--sectioned > .settings-form-section-card {
    margin: 0 0 24px;
}

.settings-form--sectioned > .settings-row-actions {
    min-height: 32px;
    margin-top: 4px;
    gap: 12px;
}

.settings-form-section-card {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    flex-direction: column;
    padding: 24px;
    border: 0.5px solid var(--settings-card-border, lch(20.171% 8.268 282.863));
    border-radius: 5px;
    background: var(--settings-card-bg, lch(12.971% 7.068 282.863));
}

.settings-form-section-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    gap: 12px;
    margin-bottom: 22px;
}

.settings-form-section-card__title {
    min-width: 0;
    margin: 0;
    color: var(--shell-text-primary);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25rem;
}

.settings-form-section-card__actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: 8px;
}

.settings-form-section-card__subtitle {
    margin: -14px 0 20px;
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.25rem;
}

.settings-form-section-card__content {
    min-width: 0;
}

.settings-form-section-card .settings-form-option-row {
    min-height: 32px;
}

.settings-form-section-card .settings-form-option-row__label {
    color: var(--shell-text-secondary);
    font-weight: 450;
}

.settings-form-section-card__note {
    margin: 20px 0 0;
    padding-top: 20px;
    border-top: 0.5px solid var(--shell-border);
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.3125rem;
}

.settings-form-option-row {
    display: flex;
    align-items: center;
    min-height: 36px;
    gap: 12px;
}

.settings-form-option-row:has(.ui-form__avatar-field) {
    min-height: 50px;
}

.settings-form-option-row__body {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
}

.settings-form-option-row__label {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-form-option-row__description {
    min-width: 0;
    overflow: hidden;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.05rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-form-option-row__description a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 44%, transparent);
    text-underline-offset: 2px;
}

.settings-form-option-row__description a:hover,
.settings-form-option-row__description a:focus-visible {
    color: var(--shell-text-primary);
    outline: none;
}

.settings-form-option-row__trailing {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
}

.settings-static-value,
.settings-muted-value {
    min-width: 0;
    overflow: hidden;
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-static-value {
    text-align: right;
}

.settings-theme-preview-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 0.5px solid var(--settings-control-border);
    border-radius: 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
}

.settings-modal-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    min-width: 0;
    padding: 20px;
}

.settings-modal-form__header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-modal-form__header h2 {
    margin: 0;
    color: var(--shell-text-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25rem;
}

.settings-modal-form__header p,
.settings-modal-form__error {
    margin: 0;
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.1875rem;
}

.settings-modal-form__error {
    color: var(--feedback-danger-text, #f87171);
}

.settings-modal-form__fields {
    min-width: 0;
}

.settings-modal-form__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 2px;
}

.settings-totp-panel {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 14px;
    border: 0.5px solid var(--settings-control-border);
    border-radius: 10px;
    background: var(--settings-control-bg);
}

.settings-totp-panel__qr {
    display: grid;
    box-sizing: border-box;
    width: 100%;
    min-height: 242px;
    padding: 16px;
    overflow: hidden;
    place-items: center;
    border-radius: 8px;
    background: #fff;
}

.settings-totp-panel__qr svg {
    display: block;
    width: min(100%, 214px);
    height: auto;
    max-height: 214px;
    flex: 0 0 auto;
}

.settings-totp-panel__manual {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

.settings-totp-panel__manual span {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}

.settings-totp-panel__manual code {
    overflow-wrap: anywhere;
    color: var(--shell-text-primary);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size: 0.75rem;
    line-height: 1.125rem;
}

@media (max-width: 760px) {
    .settings-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-toolbar .search-field {
        width: 100%;
    }

    .settings-row-actions {
        align-items: flex-start;
        flex-direction: column;
    }
}

.navigation-row,
.entity-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 65px;
    padding: 16px;
    border-radius: 8px;
}

.navigation-row:first-child,
.entity-row:first-child {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.navigation-row:last-child,
.entity-row:last-child {
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

.navigation-row--interactive,
.entity-row--interactive {
    transition: background-color 120ms ease-out;
}

.navigation-row--interactive:hover,
.navigation-row--interactive:focus-within,
.entity-row--interactive:hover,
.entity-row--interactive:focus-within {
    background: var(--settings-control-hover-bg, lch(9.94% 1.03 272));
}

.navigation-row--disabled,
.entity-row--disabled {
    opacity: 0.54;
}

.navigation-row::after,
.entity-row::after {
    content: "";
    position: absolute;
    right: 16px;
    bottom: -0.5px;
    left: 16px;
    height: 0.5px;
    background: var(--settings-row-divider, lch(14.15% 1.83 272));
}

.field-group__list > .navigation-row:last-child::after,
.field-group__list > .entity-row:last-child::after {
    display: none;
}

.navigation-row__overlay,
.entity-row__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    border: 0;
    border-radius: inherit;
    background: transparent;
    cursor: pointer;
}

.navigation-row__overlay--button,
.entity-row__overlay--button {
    padding: 0;
}

.navigation-row__overlay:focus-visible,
.entity-row__overlay:focus-visible {
    outline: 2px solid lch(47.918% 59.303 288.421 / 0.65);
    outline-offset: -2px;
}

.navigation-row__overlay:disabled,
.entity-row__overlay:disabled {
    cursor: default;
}

.settings-row-icon-tile {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 6px;
    background: var(--settings-row-icon-tile-bg, var(--settings-icon-tile-bg, lch(17.688% 8.984 282.863)));
    color: var(--settings-row-icon-tile-color, var(--settings-icon-tile-color, var(--shell-text-primary)));
    pointer-events: none;
}

.settings-row-icon-tile--plain {
    background: transparent;
    color: var(--settings-row-icon-tile-color, var(--shell-text-secondary, lch(61.399% 1.15 272)));
}

.settings-row-icon-tile--accent {
    background: var(--settings-row-icon-tile-bg, color-mix(in srgb, var(--shell-accent, lch(55% 66 286)) 18%, transparent));
    color: var(--settings-row-icon-tile-color, var(--shell-accent, lch(62% 68 286)));
}

.settings-row-icon-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-row-icon-tile__initials {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}

.navigation-row__icon-tile {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 6px;
    background: var(--settings-row-icon-tile-bg, var(--settings-icon-tile-bg, lch(17.688% 8.984 282.863)));
    color: var(--settings-row-icon-tile-color, var(--settings-icon-tile-color, var(--shell-text-primary)));
    pointer-events: none;
}

.navigation-row__body,
.entity-row__body {
    position: relative;
    z-index: 2;
    min-width: 0;
    flex: 1 1 auto;
    pointer-events: none;
}

.navigation-row__label,
.entity-row__title {
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 0.96875rem;
}

.navigation-row__description,
.entity-row__subtitle {
    margin-top: 3px;
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 0.90625rem;
}

.navigation-row__trailing,
.entity-row__trailing {
    position: relative;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 0.90625rem;
}

.navigation-row__value {
    color: inherit;
}

.navigation-row__chevron {
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: inherit;
}

.entity-row__chevron {
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: inherit;
}

.entity-row {
    min-height: 65px;
}

.entity-row__leading,
.entity-row__avatar {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 6px;
    background: var(--entity-row-avatar-bg, var(--settings-row-icon-tile-bg, var(--settings-icon-tile-bg, lch(17.688% 8.984 282.863))));
    color: var(--entity-row-avatar-text, lch(100% 0 0));
    pointer-events: none;
}

.entity-row__avatar {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
}

.entity-row__avatar--circle {
    border-radius: 9999px;
}

.entity-row__avatar--square {
    border-radius: 0;
}

.entity-row__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.empty-state-block {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 94px;
    padding: 24px 32px;
    border: 0.5px solid var(--settings-card-border, lch(14.15% 1.83 272));
    border-radius: 11px;
    background: var(--settings-card-bg, lch(7.67% 0.75 272));
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
}

.empty-state-block--compact {
    min-height: 60px;
    padding: 16px 32px;
}

.empty-state-block--centered {
    min-height: 180px;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.empty-state-block__graphic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
}

.empty-state-block__body {
    min-width: 0;
    flex: 1 1 auto;
}

.empty-state-block--centered .empty-state-block__body {
    flex: 0 1 auto;
}

.empty-state-block__title {
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.375rem;
}

.empty-state-block--compact .empty-state-block__title {
    font-size: 0.9375rem;
    line-height: 1.25rem;
}

.empty-state-block__description {
    margin-top: 3px;
    color: var(--shell-text-secondary, lch(61.399% 1.15 272));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.1875rem;
}

.empty-state-block__actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
}

.empty-state-block--centered .empty-state-block__actions {
    margin-left: 0;
}

@media (max-width: 760px) {
    .navigation-row,
    .entity-row {
        align-items: flex-start;
        gap: 12px;
    }

    .navigation-row__trailing,
    .entity-row__trailing {
        align-self: center;
    }

    .empty-state-block {
        align-items: flex-start;
        padding: 16px;
    }

    .empty-state-block__actions {
        align-self: center;
    }
}

.dashed-empty-action {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 104px;
    width: 100%;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    border: 0.5px dashed var(--dashed-empty-action-border, lch(37.975% 8.604 282.863));
    border-radius: 10px;
    background: transparent;
    color: var(--shell-text-secondary);
    text-align: center;
}

.dashed-empty-action--compact {
    min-height: 80px;
    padding: 18px;
}

.dashed-empty-action--disabled {
    opacity: 0.54;
}

.dashed-empty-action__graphic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    color: var(--shell-text-secondary);
}

.dashed-empty-action__body {
    min-width: 0;
}

.dashed-empty-action__title {
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.25rem;
}

.dashed-empty-action__description {
    margin-top: 2px;
    color: var(--shell-text-tertiary, var(--shell-text-secondary));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.0625rem;
}

.dashed-empty-action__actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.dashed-empty-action__actions .ui-button {
    height: 24px;
    min-height: 24px;
    padding: 0 8px 0 6px;
    background: var(--dashed-empty-action-button-bg, lch(20.671% 6.918 282.863));
    color: var(--dashed-empty-action-button-text, lch(91.561% 4.284 282.863));
    font-size: 0.75rem;
    line-height: normal;
}

.dashed-empty-action__actions .ui-button:hover,
.dashed-empty-action__actions .ui-button:focus-visible {
    background: var(--dashed-empty-action-button-hover-bg, var(--settings-control-hover-bg));
    color: var(--dashed-empty-action-button-hover-text, var(--shell-text-primary));
}

.settings-custom-color {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: min(250px, 100%);
    height: 32px;
}

.settings-custom-color__swatch {
    position: absolute;
    left: 9px;
    z-index: 1;
    width: 14px;
    height: 14px;
    border: 0.5px solid color-mix(in srgb, currentColor 16%, transparent);
    border-radius: 9999px;
    pointer-events: none;
}

.settings-custom-color__input {
    box-sizing: border-box;
    width: 100%;
    height: 32px;
    padding: 0 42px 0 31px;
    border: 0.5px solid var(--settings-control-border, lch(22.79% 1.83 272 / 1));
    border-radius: 8px;
    background: var(--settings-control-bg, lch(13.841% 0.943 272 / 1));
    color: var(--settings-control-text, lch(90.668% 1.375 272 / 1));
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 2rem;
    outline: none;
}

.settings-custom-color__input:focus {
    border-color: var(--settings-control-hover-border, lch(26.47% 6.83 272 / 1));
}

.settings-custom-color__format {
    position: absolute;
    top: 2px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--shell-text-secondary);
    font: inherit;
    font-size: 0.75rem;
    cursor: pointer;
}

.settings-custom-color__format:hover,
.settings-custom-color__format:focus-visible {
    background: var(--settings-control-hover-bg, lch(15.8% 1.11 272 / 1));
    color: var(--settings-control-text, lch(90.668% 1.375 272 / 1));
    outline: none;
}

.settings-custom-contrast {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: min(250px, 100%);
}

.settings-custom-contrast__range {
    flex: 1 1 auto;
    height: 6px;
    margin: 0;
    accent-color: var(--app-theme-accent, lch(47.918% 59.303 288.421 / 1));
}

.settings-custom-contrast__value {
    min-width: 17px;
    color: var(--settings-control-text, lch(90.668% 1.375 272 / 1));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 0.96875rem;
    text-align: right;
}

.settings-custom-sharing {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.settings-toggle {
    position: relative;
    width: 30px;
    height: 20px;
    margin: 0;
    border: 0;
    border-radius: 72px;
    appearance: none;
    background: var(--ui-toggle-off-bg, lch(47.275% 0.867 272.002 / 1));
    outline: none;
    cursor: pointer;
    transition: background-color 150ms ease-out, opacity 150ms ease-out;
}

.settings-toggle:checked {
    background: var(--ui-toggle-on-bg, var(--app-theme-accent, lch(47.918% 59.303 288.421 / 1)));
}

.settings-toggle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    background: var(--ui-toggle-thumb-bg, lch(100% 5 288.421 / 1));
    transform: translateY(-50%);
    transition: left 150ms ease-out, background-color 150ms ease-out;
}

.settings-toggle:checked::before {
    left: 13px;
}

.settings-toggle:disabled {
    opacity: var(--ui-toggle-disabled-opacity, 0.5);
    cursor: default;
}

.chart-card {
    min-width: 0;
    overflow: hidden;
    border: 0.5px solid var(--shell-border);
    border-radius: 8px;
    background: var(--shell-bg-active);
    box-shadow: var(--shell-shadow);
}

.chart-card--wide {
    grid-column: 1 / -1;
}

.chart-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-height: 54px;
    padding: 14px 16px 12px;
    border-bottom: 0.5px solid var(--shell-border);
}

.chart-card__header span:first-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.chart-card__header h3 {
    margin: 0;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 550;
    line-height: 1.125rem;
}

.chart-card__header small {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
}

.line-chart {
    padding: 16px;
}

.line-chart svg {
    display: block;
    width: 100%;
    height: auto;
}

.line-chart__grid-lines line {
    stroke: var(--shell-border);
    stroke-width: 0.75;
}

.line-chart__area {
    fill: color-mix(in srgb, #5e6ad2 16%, transparent);
}

.line-chart__line {
    fill: none;
    stroke: #8f96ff;
    stroke-linecap: round;
    stroke-width: 3;
}

.line-chart__point {
    fill: var(--shell-bg-active);
    stroke: #8f96ff;
    stroke-width: 2.5;
}

.line-chart__point:hover {
    fill: #8f96ff;
}

.line-chart__axis {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    color: var(--shell-text-tertiary);
    font-size: 0.6875rem;
    font-weight: 450;
    line-height: 0.9375rem;
}

.bar-chart {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    align-items: end;
    gap: 10px;
    height: 266px;
    padding: 18px 18px 14px;
}

.bar-chart__bar {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 8px;
    min-width: 0;
    height: 100%;
}

.bar-chart__bar span {
    display: flex;
    align-items: end;
    min-height: 0;
    border-radius: 8px;
    background: color-mix(in srgb, var(--shell-bg-selected) 60%, transparent);
}

.bar-chart__bar i {
    display: block;
    width: 100%;
    height: var(--bar-height);
    border-radius: 8px;
    background: var(--chart-bar-color, linear-gradient(180deg, #8f96ff 0%, #5e6ad2 100%));
    transition: filter 120ms ease-out;
}

.bar-chart__bar:hover i {
    filter: brightness(1.12);
}

.bar-chart__bar strong {
    overflow: hidden;
    color: var(--shell-text-secondary);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 0.9375rem;
    text-align: center;
    text-overflow: ellipsis;
}

.chart-split {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    min-height: 266px;
    padding: 18px;
}

.pie-chart,
.doughnut-chart {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 0.5px color-mix(in srgb, var(--shell-border) 82%, transparent),
        0 18px 60px color-mix(in srgb, #000 22%, transparent);
}

.doughnut-chart {
    position: relative;
    display: grid;
    place-items: center;
}

.doughnut-chart::before {
    content: "";
    position: absolute;
    inset: 34px;
    border-radius: 50%;
    background: var(--shell-bg-active);
    box-shadow: inset 0 0 0 0.5px var(--shell-border);
}

.doughnut-chart span {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.doughnut-chart strong,
.radial-chart strong {
    color: var(--shell-text-primary);
    font-size: 1.5rem;
    font-weight: 550;
    line-height: 30px;
}

.doughnut-chart small,
.radial-chart small {
    color: var(--shell-text-tertiary);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 0.9375rem;
}

.chart-legend {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 10px;
}

.chart-legend span {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
}

.chart-legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.chart-legend strong {
    color: var(--shell-text-primary);
    font-size: 0.75rem;
    font-weight: 550;
}

.radial-chart {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 266px;
    padding: 18px;
}

.radial-chart svg {
    width: 220px;
    height: 220px;
    transform: rotate(-90deg);
}

.radial-chart__track {
    fill: none;
    stroke: var(--shell-bg-selected);
    stroke-width: 14;
}

.radial-chart__track--inner {
    stroke-width: 10;
}

.radial-chart__value {
    fill: none;
    stroke: #5e6ad2;
    stroke-linecap: round;
    stroke-width: 14;
}

.radial-chart__value--inner {
    stroke: #26b36a;
    stroke-width: 10;
}

.radial-chart > span {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

@media (max-width: 720px) {
    .chart-card--wide {
        grid-column: auto;
    }

    .chart-split {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
    }
}

.lightbox {
    --lightbox-bg: var(--shell-bg-surface);
    --lightbox-panel-bg: var(--shell-menu-bg, var(--shell-bg-surface));
    --lightbox-raised-bg: var(--shell-bg-active);
    --lightbox-hover-bg: var(--shell-menu-item-hover, var(--settings-control-hover-bg));
    --lightbox-border: var(--shell-menu-border, var(--shell-border));
    --lightbox-text: var(--shell-text-primary);
    --lightbox-soft: var(--shell-menu-text, var(--shell-text-tertiary));
    --lightbox-muted: var(--shell-text-secondary);
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    overflow: hidden;
    background: var(--lightbox-bg);
    color: var(--lightbox-text);
    cursor: zoom-out;
    animation: lightbox-backdrop-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.lightbox--closing {
    pointer-events: none;
    animation: lightbox-backdrop-out 220ms cubic-bezier(0.4, 0, 1, 1) both;
}

.lightbox__figure {
    position: fixed;
    inset: 44px 0 44px;
    z-index: 2147483001;
    display: block;
    margin: 0;
    cursor: zoom-out;
    animation: lightbox-image-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.lightbox--closing .lightbox__figure {
    animation: lightbox-image-out 220ms cubic-bezier(0.4, 0, 1, 1) both;
}

.lightbox__image-stage {
    position: absolute;
    inset: 53px 0;
    display: grid;
    place-items: center;
    overflow: auto;
    cursor: zoom-out;
}

.lightbox__image-stage--actual {
    display: block;
}

.lightbox__image {
    display: block;
    width: auto;
    max-width: 100vw;
    max-height: calc(100vh - 194px);
    object-fit: contain;
    cursor: zoom-in;
    user-select: none;
}

.lightbox__image--actual {
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    margin: 0;
    transform: none;
    outline: none;
}

.lightbox__label {
    position: fixed;
    right: 4px;
    bottom: 3.5px;
    left: 4px;
    z-index: 2147483002;
    display: grid;
    align-items: center;
    height: 19.5px;
    overflow: hidden;
    color: var(--lightbox-text);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5rem;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    animation: lightbox-chrome-in 160ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

.lightbox--closing .lightbox__label {
    animation: lightbox-chrome-out 120ms ease-out both;
}

.lightbox__toolbar {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 2147483002;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    width: 237px;
    height: 40px;
    padding: 6px 8px 6px 0;
    border-radius: 0 0 0 6px;
    background: var(--lightbox-bg);
    animation: lightbox-chrome-in 160ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

.lightbox--closing .lightbox__toolbar {
    animation: lightbox-chrome-out 120ms ease-out both;
}

.lightbox__button,
.lightbox__zoom-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: transparent;
    color: var(--lightbox-soft);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    text-decoration: none;
    cursor: default;
    transition: background-color 120ms ease-out, color 120ms ease-out;
}

.lightbox__zoom-button:disabled {
    opacity: 0.48;
}

.lightbox__button::after,
.lightbox__zoom-button::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    z-index: 2147483003;
    height: 24px;
    padding: 0 8px;
    border: 0.5px solid var(--lightbox-border);
    border-radius: 6px;
    background: var(--lightbox-panel-bg);
    box-shadow:
        lch(0% 0 0 / 0.125) 0 3px 8px,
        lch(0% 0 0 / 0.125) 0 2px 5px,
        lch(0% 0 0 / 0.125) 0 1px 1px;
    color: var(--lightbox-soft);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.4375rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-2px);
    transition: opacity 90ms ease-out, transform 90ms ease-out;
}

.lightbox__button:hover::after,
.lightbox__button:focus-visible::after,
.lightbox__zoom-button:hover::after,
.lightbox__zoom-button:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%);
}

.lightbox__content--document {
    position: fixed;
    inset: 64px 64px 52px;
    z-index: 2147483001;
    display: grid;
    place-items: stretch;
    min-width: 0;
    min-height: 0;
    animation: lightbox-document-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.lightbox--closing .lightbox__content--document {
    animation: lightbox-document-out 180ms cubic-bezier(0.4, 0, 1, 1) both;
}

.lightbox__frame,
.lightbox__monaco-shell,
.lightbox__monaco,
.lightbox__video,
.lightbox__youtube {
    width: 100%;
    height: 100%;
    border: 0.5px solid var(--lightbox-border);
    border-radius: 8px;
    background: var(--lightbox-panel-bg);
    box-shadow:
        lch(0% 0 0 / 0.24) 0 18px 48px,
        lch(0% 0 0 / 0.18) 0 6px 18px;
}

.lightbox__frame,
.lightbox__youtube {
    display: block;
}

.lightbox__video {
    object-fit: contain;
}

.lightbox__audio-shell {
    align-self: center;
    justify-self: center;
    display: grid;
    grid-template-columns: 24px minmax(260px, 520px);
    align-items: center;
    gap: 14px;
    width: min(620px, calc(100vw - 128px));
    padding: 18px;
    border: 0.5px solid var(--lightbox-border);
    border-radius: 8px;
    background: var(--lightbox-panel-bg);
    color: var(--lightbox-soft);
}

.lightbox__audio {
    width: 100%;
}

@keyframes lightbox-backdrop-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes lightbox-backdrop-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes lightbox-image-in {
    from {
        opacity: 1;
        transform: translate3d(0, 12px, 0) scale(0.48);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes lightbox-image-out {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    to {
        opacity: 0;
        transform: translate3d(0, 8px, 0) scale(0.72);
    }
}

@keyframes lightbox-document-in {
    from {
        opacity: 0;
        transform: translate3d(0, 10px, 0) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes lightbox-document-out {
    from {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
    to {
        opacity: 0;
        transform: translate3d(0, 8px, 0) scale(0.98);
    }
}

@keyframes lightbox-chrome-in {
    from {
        opacity: 0;
        transform: translateY(-2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes lightbox-chrome-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.lightbox__button {
    width: 28px;
    padding: 0 2px;
}

.lightbox__zoom-button {
    width: 51px;
    padding: 0;
    margin-right: 21px;
    color: var(--lightbox-muted);
}

.lightbox__button:last-child {
    margin-left: 21px;
}

.lightbox__button:hover,
.lightbox__button:focus-visible,
.lightbox__zoom-button:hover,
.lightbox__zoom-button:focus-visible {
    background: var(--lightbox-hover-bg);
    color: var(--lightbox-text);
    outline: none;
}

.ui-card {
    --ui-card-bg: var(--shell-bg-surface);
    --ui-card-border: var(--shell-border);
    --ui-card-shadow: none;
    --ui-card-header-bg: transparent;
    --ui-card-row-hover-bg: var(--shell-bg-hover, var(--settings-control-hover-bg, lch(15.32% 0.75 272 / 1)));
    min-width: 0;
    overflow: hidden;
    border: 0.5px solid var(--ui-card-border);
    border-radius: 8px;
    background: var(--ui-card-bg);
    box-shadow: var(--ui-card-shadow);
    color: var(--shell-text-primary);
}

.app-shell[data-app-theme="light"] .ui-card,
.settings-shell[data-app-theme="light"] .ui-card {
    --ui-card-bg: lch(99.6% 0.15 272 / 1);
    --ui-card-border: lch(88.8% 0.8 272 / 1);
    --ui-card-shadow: 0 1px 1px lch(0 0 0 / 0.025), 0 8px 24px lch(0 0 0 / 0.035);
    --ui-card-header-bg: lch(98.4% 0.2 272 / 1);
    --ui-card-row-hover-bg: lch(95.4% 0.35 272 / 1);
}

.ui-card--subtle {
    --ui-card-bg: var(--shell-bg-active);
}

.app-shell[data-app-theme="light"] .ui-card--subtle,
.settings-shell[data-app-theme="light"] .ui-card--subtle {
    --ui-card-bg: lch(99.6% 0.15 272 / 1);
}

.ui-card--elevated {
    --ui-card-bg: var(--shell-bg-active);
    --ui-card-shadow: var(--shell-shadow);
}

.ui-card--wide {
    grid-column: 1 / -1;
}

.ui-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-height: 45px;
    padding: 12px 14px;
    border-bottom: 0.5px solid var(--ui-card-border);
    background: var(--ui-card-header-bg);
}

.ui-card__title-stack {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.ui-card__title {
    margin: 0;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 550;
    line-height: 1.125rem;
}

.ui-card__subtitle {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
}

.ui-card__header-meta {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.ui-card__body {
    min-width: 0;
}

.ui-card__body--none,
.ui-card__body--flush {
    padding: 0;
}

.ui-card__body--compact {
    padding: 8px;
}

.ui-card__body--default {
    padding: 12px;
}

.ui-card__body--spacious {
    padding: 16px;
}

.ui-card__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-height: 41px;
    padding: 8px 14px;
    border-top: 0.5px solid var(--ui-card-border);
}

.metric-strip {
    --ui-card-shadow: none;
}

.app-shell[data-app-theme="light"] .metric-strip,
.settings-shell[data-app-theme="light"] .metric-strip {
    --ui-card-bg: var(--shell-bg-active);
    --ui-card-border: var(--shell-border);
    --ui-card-shadow: none;
}

.metric-strip .ui-card__body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.metric-item {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
    padding: 14px 16px;
}

.metric-item + .metric-item {
    border-left: 0.5px solid var(--ui-card-border);
}

.metric-item__label,
.metric-item__trend {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.0625rem;
}

.metric-item__value {
    color: var(--shell-text-primary);
    font-size: 1.5rem;
    font-weight: 560;
    line-height: 30px;
}

@media (max-width: 720px) {
    .ui-card--wide {
        grid-column: auto;
    }

    .metric-item + .metric-item {
        border-left: 0;
        border-top: 0.5px solid var(--ui-card-border);
    }
}

.page-side-panel {
    position: relative;
    display: flex;
    z-index: 40;
    width: var(--page-side-panel-width, 396px);
    min-width: var(--page-side-panel-width, 396px);
    height: 100%;
    min-height: 0;
    padding: 0;
    overflow: visible;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transform: translateX(18px);
    transition:
        transform 260ms cubic-bezier(0.32, 0.72, 0, 1),
        opacity 120ms ease,
        visibility 120ms ease;
    visibility: hidden;
}

.page-side-panel[data-open="true"] {
    opacity: 1;
    pointer-events: auto;
    transform: none;
    visibility: visible;
}

[data-grid-list-viewport] {
    position: relative;
}

[data-grid-list-viewport][data-overflow-right="true"]::after {
    content: "";
    display: block;
    flex: 0 0 40px;
    position: sticky;
    top: 0;
    right: 0;
    float: right;
    bottom: 0;
    z-index: 22;
    width: 40px;
    height: 100%;
    margin-left: -40px;
    pointer-events: none;
    background: linear-gradient(
        to left,
        var(--shell-bg-surface, var(--app-theme-surface-bg, lch(4.52% 0.3 272 / 1))) 0%,
        color-mix(in lch, var(--shell-bg-surface, var(--app-theme-surface-bg, lch(4.52% 0.3 272 / 1))) 64%, transparent) 48%,
        transparent 100%
    );
}

.page-side-panel__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: var(--page-side-panel-width, 396px);
    height: 100%;
    min-height: 0;
    padding-top: var(--page-side-panel-gutter-top, 0px);
    overflow: auto;
    box-sizing: border-box;
    scrollbar-width: none;
}

.page-side-panel__inner::-webkit-scrollbar {
    display: none;
}

.page-side-panel__panel {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    width: calc(var(--page-side-panel-width, 396px) - var(--page-side-panel-gutter-right, 8px));
    min-height: 0;
    margin: 0 var(--page-side-panel-gutter-right, 8px) var(--page-side-panel-gutter-bottom, 8px) 0;
    padding: 12px;
    border: 0.5px solid lch(14.15% 1.83 272 / 1);
    border-radius: 10px;
    background: lch(7.67% 0.75 272 / 1);
    box-shadow:
        lch(0 0 0 / 0.04) 0 4px 4px -1px,
        lch(0 0 0 / 0.08) 0 1px 1px 0;
    box-sizing: border-box;
}

.page-side-panel--transparent .page-side-panel__panel {
    gap: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.page-side-panel__resize-handle {
    position: absolute;
    top: 0;
    left: -3px;
    bottom: 0;
    z-index: 2;
    width: 7px;
    cursor: col-resize;
}

.page-side-panel__resize-handle::after {
    content: "";
    position: absolute;
    inset: 0 3px 0 2px;
    width: 2px;
    border-radius: 4px;
    background: lch(36.308% 1.15 272 / 1);
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
}

.page-side-panel__resize-handle:hover::after,
.page-side-panel__resize-handle[data-dragging="true"]::after {
    opacity: 1;
    transition-duration: 0s;
}

.page-side-panel[data-open="false"] .page-side-panel__resize-handle {
    pointer-events: none;
}

.page-side-panel__tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 28px;
    margin: 0 0 10px;
}

.page-side-panel__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 4px 16.5px;
    margin: 2px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: lch(9.599% 0.943 272 / 1);
    color: lch(62.672% 1.375 272 / 1);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
    cursor: default;
    transition:
        border 150ms ease,
        background-color 120ms ease,
        color 120ms ease,
        opacity 150ms ease;
}

.page-side-panel__tab:hover,
.page-side-panel__tab:focus-visible {
    background: lch(13.07% 0.943 272 / 1);
    color: lch(90.35% 1.15 272 / 1);
    outline: none;
}

.page-side-panel__tab--active,
.page-side-panel__tab--active:hover,
.page-side-panel__tab--active:focus-visible {
    background: lch(15.384% 1.329 272 / 1);
    color: lch(100% 0 272 / 1);
}

.page-side-panel__content,
.page-side-panel__section {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.page-side-panel__section {
    gap: 8px;
    min-width: 0;
}

.page-side-panel__section-title {
    color: var(--shell-text-secondary, lch(62.672% 1.375 272 / 1));
    font-size: 0.75rem;
    font-weight: 510;
    line-height: 1.3;
}

.page-side-panel__summary-card {
    display: flex;
    align-items: center;
    justify-content: normal;
    width: 100%;
    height: 42px;
    padding: 0 10px;
    border-radius: 6px;
    background: lch(7.67% 0.75 272 / 1);
    box-sizing: border-box;
}

.page-side-panel__summary-copy {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.page-side-panel__summary-title,
.page-side-panel__summary-count {
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: normal;
    white-space: nowrap;
}

.page-side-panel__summary-health-icon {
    display: block;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--shell-text-secondary);
}

.page-side-panel__summary-health-icon svg {
    display: block;
    width: 16px;
    height: 16px;
    overflow: hidden;
}

.page-side-panel__summary-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-side-panel__summary-count {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.metric-strip {
    --ui-card-bg: var(--shell-bg-active);
    --ui-card-border: var(--shell-border);
    --ui-card-shadow: none;
    flex: 0 0 auto;
    border-radius: 10px;
}

.metric-strip.ui-card {
    border-radius: 10px;
}

.app-shell[data-app-theme="light"] .metric-strip,
.settings-shell[data-app-theme="light"] .metric-strip {
    --ui-card-bg: var(--shell-bg-active);
    --ui-card-shadow: none;
}

.metric-strip .ui-card__body {
    display: grid;
    grid-template-columns: repeat(var(--metric-strip-columns, 4), minmax(0, 1fr));
}

.metric-item {
    gap: 6px;
    padding: 16px;
}

.metric-item__label {
    color: var(--shell-text-secondary);
    font-size: 0.6875rem;
    font-weight: 560;
    line-height: 0.9375rem;
}

.metric-item__value {
    letter-spacing: 0;
}

.metric-item__trend {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}

.metric-item__trend--success {
    color: #5ecca0;
}

.metric-item__trend--warning {
    color: #f2c94c;
}

.metric-item__trend--danger {
    color: var(--status-red-text, rgb(239, 92, 92));
}

.metric-item__trend--info {
    color: var(--accent-solid, #5e6ad2);
}

.dashboard-widget-stack {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 10px;
}

.single-column-page__body-inner > .dashboard-widget-stack,
.detail-tab-panel > .dashboard-widget-stack {
    gap: 14px;
}

.dashboard-badge-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.dashboard-progress-row {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
}

.dashboard-progress-row + .dashboard-progress-row {
    padding-top: 10px;
    border-top: 0.5px solid var(--ui-card-border, var(--shell-border));
}

.dashboard-progress-row > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
}

.dashboard-progress-row span,
.dashboard-progress-row strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-progress-row span {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}

.dashboard-progress-row strong {
    flex: 0 0 auto;
    color: var(--shell-text-primary);
    font-size: 0.75rem;
    font-weight: 560;
    line-height: 1rem;
}

.dashboard-progress-row__dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 9999px;
}

.dashboard-progress-row--with-dot > div {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.signal-card {
    overflow: hidden;
    border: 0.5px solid var(--shell-border);
    border-radius: 10px;
    background: var(--shell-bg-active);
}

.signal-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 0 14px;
    border-bottom: 0.5px solid var(--shell-border);
}

.signal-card__header h2 {
    margin: 0;
    color: var(--shell-text-primary);
    font-size: 0.875rem;
    font-weight: 560;
    line-height: 1.25rem;
}

.signal-card__header span {
    color: var(--shell-text-secondary);
    font-size: 0.6875rem;
    font-weight: 560;
    line-height: 0.9375rem;
}

.signal-list {
    display: flex;
    flex-direction: column;
}

.signal-list-item {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 2px;
    min-height: 56px;
    padding: 11px 14px;
}

.signal-list-item + .signal-list-item {
    border-top: 0.5px solid var(--shell-border);
}

.signal-list-item strong {
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 540;
    line-height: 1.125rem;
}

.signal-list-item small {
    grid-column: 2;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.0625rem;
}

.signal-list-item__dot {
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--shell-text-secondary);
}

.signal-list-item--success .signal-list-item__dot {
    background: #5ecca0;
}

.signal-list-item--warning .signal-list-item__dot {
    background: #f2c94c;
}

.signal-list-item--danger .signal-list-item__dot {
    background: var(--status-red-text, rgb(239, 92, 92));
}

.signal-list-item--info .signal-list-item__dot {
    background: var(--accent-solid, #5e6ad2);
}

.ui-form-grid {
    width: 100%;
}

@container (max-width: 720px) {
    .ui-form-grid > * {
        grid-column: 1 / -1;
    }
}

.detail-tab-panel {
    display: flex;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    padding: var(--detail-tab-panel-top-gutter, 0) var(--detail-tab-panel-gutter, 8px) var(--detail-tab-panel-gutter, 8px);
    box-sizing: border-box;
    flex-direction: column;
    gap: 18px;
    overflow: auto;
    scrollbar-width: none;
}

.detail-tab-panel::-webkit-scrollbar {
    display: none;
}

.detail-tab-panel.split-tab-panel {
    padding: 0;
    gap: 0;
    overflow: hidden;
}

.split-tab-panel > .split-view {
    flex: 1 1 auto;
}

.page-with-side-panel__main > .detail-tab-panel,
.page-with-side-panel__main > .fill-region > .detail-tab-panel {
    padding-right: 0;
    padding-left: 0;
}

.detail-sidebar-property-row {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    max-width: 100%;
    height: 28px;
    min-height: 28px;
    padding: 0 10px 0 6px;
    border: 0;
    background: transparent;
    color: var(--shell-text-primary);
}

.detail-sidebar-property-row--person {
    padding: 0 6px;
}

.detail-sidebar-property-row__icon,
.detail-sidebar-property-row__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    min-width: 20px;
    color: var(--detail-sidebar-property-icon-color, var(--shell-text-primary));
}

.detail-sidebar-property-row__avatar {
    width: 18px;
    min-width: 18px;
    height: 18px;
    border-radius: 9999px;
    background: color-mix(in lch, var(--accent-solid) 72%, var(--shell-bg-active));
    color: var(--accent-contrast);
    font-size: 0.625rem;
    font-weight: 650;
    line-height: 1;
}

.detail-sidebar-property-row__text {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 0.96875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.property-editor {
    position: relative;
    display: inline-flex;
    max-width: 100%;
}

.entity-property-chip {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    max-width: 100%;
    border: 0;
    background: transparent;
    color: var(--shell-text-primary);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    box-sizing: border-box;
}

button.entity-property-chip {
    cursor: default;
}

.entity-property-chip--interactive {
    cursor: pointer;
}

.entity-property-chip--row {
    gap: 8px;
    height: 28px;
    min-height: 28px;
    padding: 0 10px 0 6px;
    border-radius: 9999px;
    color: var(--shell-menu-text);
}

.entity-property-chip--compact {
    gap: 6px;
    height: 24px;
    min-height: 24px;
    padding: 0 7px 0 5px;
    border-radius: 9999px;
    color: var(--shell-menu-text);
}

.entity-property-chip--chip {
    gap: 6px;
    min-height: 25px;
    padding: 0 8px;
    border: 1px solid var(--shell-border);
    border-radius: 30px;
    background: var(--shell-bg-surface);
}

.entity-property-chip--interactive:hover,
.entity-property-chip--interactive:focus-visible,
.entity-property-chip--open {
    background: var(--shell-menu-item-hover);
    outline: none;
}

.entity-property-chip--chip.entity-property-chip--interactive:hover,
.entity-property-chip--chip.entity-property-chip--interactive:focus-visible,
.entity-property-chip--chip.entity-property-chip--open {
    border-color: var(--shell-menu-border);
    background: var(--shell-bg-surface);
}

.entity-property-chip__icon,
.entity-property-chip__avatar,
.entity-property-chip__swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    min-width: 20px;
    color: var(--shell-text-primary);
}

.entity-property-chip__avatar {
    width: 18px;
    min-width: 18px;
    height: 18px;
    overflow: hidden;
    border-radius: 9999px;
    background: color-mix(in lch, var(--accent-solid) 72%, var(--shell-bg-active));
    color: var(--accent-contrast);
    font-size: 0.625rem;
    font-weight: 650;
    line-height: 1;
}

.entity-property-chip__avatar--image {
    object-fit: cover;
}

.entity-property-chip__swatch {
    width: 9px;
    min-width: 9px;
    height: 9px;
    border-radius: 50%;
}

.entity-property-chip__text,
.entity-property-chip__meta {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-property-chip__text {
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 0.96875rem;
}

.entity-property-chip--row .entity-property-chip__text,
.entity-property-chip--compact .entity-property-chip__text {
    color: var(--shell-menu-text);
}

.entity-property-chip__meta {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 0.9375rem;
}

.anchored-dropdown-menu--property-editor > .shell-dropdown-menu {
    width: 207px;
}

.detail-sidebar-chip-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 2px 0 1px -1.5px;
    padding-left: 2px;
}

.detail-sidebar-label-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 25px;
    padding: 0 8px;
    border: 1px solid var(--shell-border);
    border-radius: 30px;
    background: var(--shell-bg-surface);
    color: var(--shell-text-primary);
    text-decoration: none;
}

.detail-sidebar-label-chip-anchor {
    position: relative;
    display: inline-flex;
}

button.detail-sidebar-label-chip {
    font: inherit;
    cursor: pointer;
}

a.detail-sidebar-label-chip,
.detail-sidebar-label-chip--interactive {
    cursor: pointer;
}

a.detail-sidebar-label-chip:hover,
a.detail-sidebar-label-chip:focus-visible,
.detail-sidebar-label-chip--interactive:hover,
.detail-sidebar-label-chip--interactive:focus-visible,
.detail-sidebar-label-chip--interactive[aria-expanded="true"] {
    border-color: var(--shell-menu-border);
    background: var(--shell-bg-surface);
    outline: none;
}

.anchored-dropdown-menu--detail-chip > .shell-dropdown-menu {
    width: 207px;
}

.anchored-dropdown-menu--detail-chip:not(.anchored-dropdown-menu--context) > .shell-dropdown-menu {
    top: 29px;
    left: 0;
}

.detail-sidebar-label-chip__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--detail-sidebar-label-chip-color, var(--shell-text-secondary));
}

.detail-sidebar-label-chip__text {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 0.96875rem;
}

.detail-sidebar-header-action {
    width: 28px;
    height: 28px;
    color: var(--shell-text-primary);
}

.detail-sidebar-empty-text {
    margin: 0;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.05rem;
}

.detail-sidebar-empty-text a {
    color: var(--shell-text-primary);
    text-decoration: none;
}

.detail-sidebar-progress {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding-top: 12px;
}

.detail-sidebar-progress-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    min-height: 40.5px;
    column-gap: 4px;
}

.detail-sidebar-progress-stat {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.detail-sidebar-progress-stat span {
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
}

.detail-sidebar-progress-stat strong {
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 510;
    line-height: 1rem;
}

.detail-sidebar-segmented-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 32px;
    margin: 14px 0 10px;
    padding: 0;
    border-radius: 5px;
    background: var(--detail-sidebar-segmented-bg, var(--shell-bg-surface));
}

.detail-sidebar-segmented-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 12px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--shell-text-secondary);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: normal;
}

.detail-sidebar-segmented-tab--active {
    background: var(--detail-sidebar-segmented-active-bg, var(--shell-nav-active-bg, var(--shell-bg-active)));
    color: var(--detail-sidebar-segmented-active-color, var(--shell-text-primary));
}

.detail-sidebar-summary-list {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.detail-sidebar-summary-row {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 42px;
    padding: 0 10px;
    border-radius: 6px;
    color: var(--shell-text-primary);
}

.detail-sidebar-summary-row span {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-sidebar-summary-row strong {
    flex: 0 0 auto;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: normal;
}

.detail-sidebar-see-all-button {
    height: 24px;
    min-height: 24px;
    padding: 0 4px;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
}

.detail-sidebar-activity-list {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding-top: 12px;
}

.detail-sidebar-activity-item {
    display: flex;
    min-width: 0;
    gap: 8px;
    padding-top: 12px;
}

.detail-sidebar-activity-item:first-child {
    padding-top: 0;
}

.detail-sidebar-activity-item__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    background: color-mix(in lch, var(--accent-solid) 72%, var(--shell-bg-active));
    color: var(--accent-contrast);
    font-size: 0.5625rem;
    font-weight: 650;
    line-height: 1;
}

.detail-sidebar-activity-item__copy {
    display: block;
    min-width: 0;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.05rem;
}

.detail-sidebar-activity-item__copy strong {
    color: var(--shell-text-primary);
    font-weight: 450;
}

.grid-toolbar--tab-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    min-height: 39.5px;
    padding: 0;
    border-bottom: 0;
}

.grid-list-viewport--fill {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    overflow: auto hidden;
}

.grid-list-title-stack {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.grid-list-title-stack strong,
.grid-list-title-stack small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grid-list-title-stack strong {
    color: var(--grid-list-text-primary, var(--shell-text-primary));
    font-size: 0.8125rem;
    font-weight: 540;
    line-height: 1.125rem;
}

.grid-list-title-stack small {
    color: var(--grid-list-text-secondary, var(--shell-text-secondary));
    font-size: 0.6875rem;
    font-weight: 450;
    line-height: 0.9375rem;
}

@media (max-width: 720px) {
    .metric-strip .ui-card__body {
        grid-template-columns: minmax(0, 1fr);
    }
}

.components-reconnect-active-visible,
.components-reconnect-failed-visible,
.components-pause-visible,
.components-resume-failed-visible {
    display: none;
}

#components-reconnect-modal.components-reconnect-show:not(.components-reconnect-failed):not(.components-reconnect-paused):not(.components-reconnect-resume-failed) .components-reconnect-active-visible,
#components-reconnect-modal.components-reconnect-retrying:not(.components-reconnect-failed):not(.components-reconnect-paused):not(.components-reconnect-resume-failed) .components-reconnect-active-visible,
#components-reconnect-modal.components-reconnect-paused .components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible {
    display: block;
}

#components-reconnect-modal {
    position: fixed;
    inset: 0;
    width: min(380px, calc(100vw - 24px));
    max-width: none;
    min-height: 0;
    height: fit-content;
    margin: auto;
    padding: 0;
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 22px;
    background: var(--shell-menu-bg);
    box-shadow: var(--app-modal-shadow);
    color: var(--shell-menu-text);
    overflow: visible;
    opacity: 1;
    transform: none;
    outline: none;
}

#components-reconnect-modal::backdrop {
    background: var(--app-modal-overlay);
    opacity: var(--app-modal-overlay-opacity);
}

.components-reconnect-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 0;
    padding: 24px;
}

.components-reconnect-header {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
    padding-right: 44px;
}

.components-reconnect-body {
    display: block;
    min-width: 0;
}

.components-reconnect-status {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    color: var(--shell-menu-hint);
}

.components-reconnect-status::before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--shell-menu-border);
    border-top-color: currentColor;
    border-radius: 9999px;
    animation: components-reconnect-spin 850ms linear infinite;
}

.components-reconnect-status::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 9999px;
    background: currentColor;
    opacity: 0;
    transform: translate(-50%, -50%);
}

#components-reconnect-modal.components-reconnect-failed .components-reconnect-status {
    color: lch(73% 45 28 / 1);
}

#components-reconnect-modal.components-reconnect-paused .components-reconnect-status {
    color: lch(78% 36 78 / 1);
}

#components-reconnect-modal.components-reconnect-resume-failed .components-reconnect-status {
    color: lch(73% 45 28 / 1);
}

#components-reconnect-modal.components-reconnect-failed .components-reconnect-status::before,
#components-reconnect-modal.components-reconnect-paused .components-reconnect-status::before,
#components-reconnect-modal.components-reconnect-resume-failed .components-reconnect-status::before {
    border-color: color-mix(in lch, currentColor 42%, var(--shell-menu-border));
    animation: none;
}

#components-reconnect-modal.components-reconnect-failed .components-reconnect-status::after,
#components-reconnect-modal.components-reconnect-paused .components-reconnect-status::after,
#components-reconnect-modal.components-reconnect-resume-failed .components-reconnect-status::after {
    opacity: 1;
}

.components-reconnect-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
}

#components-reconnect-modal h2,
#components-reconnect-modal p {
    margin: 0;
}

.components-reconnect-title {
    color: var(--shell-menu-text-strong);
    font-size: 0.9375rem;
    font-weight: 550;
    letter-spacing: 0;
    line-height: 1.25rem;
}

.components-reconnect-message {
    max-width: 284px;
    color: var(--shell-menu-hint);
    font-size: 0.8125rem;
    font-weight: 450;
    letter-spacing: 0;
    line-height: 1.1875rem;
}

.components-reconnect-actions {
    display: none;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

#components-reconnect-modal.components-reconnect-failed .components-reconnect-actions,
#components-reconnect-modal.components-reconnect-paused .components-reconnect-actions,
#components-reconnect-modal.components-reconnect-resume-failed .components-reconnect-actions {
    display: flex;
}

#components-reconnect-modal .ui-button.components-reconnect-failed-visible,
#components-reconnect-modal .ui-button.components-pause-visible,
#components-reconnect-modal .ui-button.components-resume-failed-visible {
    display: none;
}

#components-reconnect-modal.components-reconnect-failed .ui-button.components-reconnect-failed-visible,
#components-reconnect-modal.components-reconnect-paused .ui-button.components-pause-visible,
#components-reconnect-modal.components-reconnect-resume-failed .ui-button.components-resume-failed-visible {
    display: inline-flex;
}

@keyframes components-reconnect-spin {
    to {
        transform: rotate(360deg);
    }
}

.ui-form__control-shell {
    position: relative;
    display: block;
    width: 100%;
}

.ui-form__control-shell > .ui-form__control {
    width: 100%;
}

.ui-form__control-shell--has-prefix > .ui-form__control,
.ui-form__password--has-prefix .ui-form__password-control {
    padding-left: 32px;
}

.ui-form__control-shell--has-suffix > .ui-form__control {
    padding-right: 34px;
}

.ui-form__control-shell--has-clear > .ui-form__control {
    padding-right: 34px;
}

.ui-form__control-shell--has-counter > .ui-form__control {
    padding-right: 54px;
}

.ui-form__control-shell--has-clear.ui-form__control-shell--has-suffix > .ui-form__control,
.ui-form__control-shell--has-clear.ui-form__control-shell--has-counter > .ui-form__control {
    padding-right: 66px;
}

.ui-form__control-shell--has-steppers > .ui-form__control {
    padding-right: 34px;
}

.ui-form__control-shell--has-steppers.ui-form__control-shell--has-clear > .ui-form__control {
    padding-right: 58px;
}

.ui-form__control-shell--has-steppers.ui-form__control-shell--has-suffix > .ui-form__control,
.ui-form__control-shell--has-steppers.ui-form__control-shell--has-unit > .ui-form__control {
    padding-right: 74px;
}

.ui-form__control-shell--has-steppers.ui-form__control-shell--has-clear.ui-form__control-shell--has-suffix > .ui-form__control,
.ui-form__control-shell--has-steppers.ui-form__control-shell--has-clear.ui-form__control-shell--has-unit > .ui-form__control {
    padding-right: 96px;
}

.ui-form__password--has-clear .ui-form__password-control,
.ui-form__password--loading .ui-form__password-control,
.ui-form__password--validating .ui-form__password-control {
    padding-right: 64px;
}

.ui-form__control-affix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1;
}

.ui-form__control-shell > .ui-form__control-affix,
.ui-form__password-field > .ui-form__control-affix {
    position: absolute;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.ui-form__control-shell > .ui-form__control-affix--prefix,
.ui-form__password-field > .ui-form__control-affix--prefix {
    left: 10px;
}

.ui-form__control-shell > .ui-form__control-affix--suffix,
.ui-form__password-field > .ui-form__control-affix--suffix {
    right: 10px;
    gap: 5px;
    pointer-events: auto;
}

.ui-form__control-shell--has-clear > .ui-form__control-affix--suffix {
    right: 34px;
}

.ui-form__control-shell--has-steppers > .ui-form__control-affix--suffix {
    right: 34px;
}

.ui-form__control-shell--has-clear.ui-form__control-shell--has-steppers > .ui-form__control-affix--suffix {
    right: 58px;
}

.ui-form__control-affix--textarea {
    top: 14px;
    transform: none;
}

.ui-form__control-clear {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--shell-text-secondary);
    cursor: default;
    transition: background-color 120ms ease, color 120ms ease, opacity 120ms ease;
}

.ui-form__control-clear .shell-icon,
.ui-form__multi-chip-remove .shell-icon {
    width: 8px;
    height: 8px;
}

.ui-form__control-clear:hover,
.ui-form__control-clear:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__control-clear:disabled {
    opacity: 0.45;
    pointer-events: none;
}

.ui-form__control-shell > .ui-form__control-clear,
.ui-form__password-field > .ui-form__control-clear {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 6px;
    margin-left: 0;
    transform: translateY(-50%);
}

.ui-form__picker-trigger > .ui-form__control-clear {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 6px;
    margin-left: 0;
    transform: translateY(-50%);
}

.ui-form__range-trigger > .ui-form__control-clear,
.ui-form__duration-trigger > .ui-form__control-clear,
.ui-form__timezone-trigger > .ui-form__control-clear,
.ui-form__country-trigger > .ui-form__control-clear,
.ui-form__time-trigger > .ui-form__control-clear,
.ui-form__color-trigger > .ui-form__control-clear,
.ui-form__email-trigger > .ui-form__control-clear,
.ui-form__multi-trigger > .ui-form__control-clear {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 25px;
    margin-left: 0;
    transform: translateY(-50%);
}

.ui-form__control-shell--has-steppers > .ui-form__control-clear {
    right: 28px;
}

.ui-form__control-clear--textarea {
    top: 8px;
    transform: none;
}

.ui-form__control-clear--password {
    right: 32px;
}

.ui-form__control-loader {
    display: inline-flex;
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    margin-left: auto;
    border: 1.5px solid color-mix(in srgb, var(--shell-text-secondary) 32%, transparent);
    border-top-color: var(--shell-text-secondary);
    border-radius: 9999px;
    animation: ui-form-control-spin 760ms linear infinite;
}

.ui-form__control-shell > .ui-form__control-loader,
.ui-form__password-field > .ui-form__control-loader {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 9px;
    margin-left: 0;
    translate: 0 -50%;
}

.ui-form__control-loader--textarea {
    top: 12px;
    translate: none;
}

.ui-form__control-counter {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    min-width: 30px;
    justify-content: flex-end;
    color: var(--shell-text-tertiary);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    white-space: nowrap;
}

.ui-form__control-shell--over-limit .ui-form__control-counter {
    color: var(--feedback-danger-text, var(--shell-menu-text-danger));
}

.ui-form__control-unit {
    color: var(--shell-text-tertiary);
    font-size: 0.75rem;
    line-height: 1;
    white-space: nowrap;
}

.ui-form__number-steppers {
    position: absolute;
    z-index: 3;
    top: 50%;
    right: 6px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 26px;
    overflow: hidden;
    border-radius: 5px;
    transform: translateY(-50%);
}

.ui-form__number-stepper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 13px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--shell-text-tertiary);
    cursor: default;
    transition: background-color 120ms ease, color 120ms ease;
}

.ui-form__number-stepper:hover,
.ui-form__number-stepper:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__number-stepper--increment svg {
    transform: rotate(-90deg);
}

.ui-form__number-stepper--decrement svg {
    transform: rotate(90deg);
}

.ui-form__control--validating,
.ui-form__rich-text--validating,
.ui-form__picker--validating .ui-form__picker-trigger,
.ui-form__duration--validating .ui-form__duration-trigger,
.ui-form__interval--validating .ui-form__interval-trigger,
.ui-form__timezone--validating .ui-form__timezone-trigger,
.ui-form__country--validating .ui-form__country-trigger,
.ui-form__time--validating .ui-form__time-trigger,
.ui-form__color-picker--validating .ui-form__color-trigger,
.ui-form__phone--validating .ui-form__phone-control,
.ui-form__email--validating .ui-form__email-trigger,
.ui-form__multi--validating .ui-form__multi-trigger,
.ui-form__button-group--validating,
.ui-form__avatar-field--validating .ui-form__avatar-preview {
    border-color: color-mix(in srgb, var(--shell-accent, #5e6ad2) 54%, var(--settings-input-border, var(--settings-control-border)));
}

.ui-form__control--valid,
.ui-form__rich-text--valid,
.ui-form__picker--valid .ui-form__picker-trigger,
.ui-form__duration--valid .ui-form__duration-trigger,
.ui-form__interval--valid .ui-form__interval-trigger,
.ui-form__timezone--valid .ui-form__timezone-trigger,
.ui-form__country--valid .ui-form__country-trigger,
.ui-form__time--valid .ui-form__time-trigger,
.ui-form__color-picker--valid .ui-form__color-trigger,
.ui-form__phone--valid .ui-form__phone-control,
.ui-form__email--valid .ui-form__email-trigger,
.ui-form__multi--valid .ui-form__multi-trigger,
.ui-form__button-group--valid,
.ui-form__avatar-field--valid .ui-form__avatar-preview {
    border-color: color-mix(in srgb, var(--status-green-text, #5ecca0) 58%, var(--settings-input-border, var(--settings-control-border)));
}

.ui-form__control--warning,
.ui-form__rich-text--warning,
.ui-form__picker--warning .ui-form__picker-trigger,
.ui-form__duration--warning .ui-form__duration-trigger,
.ui-form__interval--warning .ui-form__interval-trigger,
.ui-form__timezone--warning .ui-form__timezone-trigger,
.ui-form__country--warning .ui-form__country-trigger,
.ui-form__time--warning .ui-form__time-trigger,
.ui-form__color-picker--warning .ui-form__color-trigger,
.ui-form__phone--warning .ui-form__phone-control,
.ui-form__email--warning .ui-form__email-trigger,
.ui-form__multi--warning .ui-form__multi-trigger,
.ui-form__button-group--warning,
.ui-form__avatar-field--warning .ui-form__avatar-preview {
    border-color: color-mix(in srgb, #f2c94c 68%, var(--settings-input-border, var(--settings-control-border)));
}

.ui-form__toggle--validating .ui-form__toggle-input,
.ui-form__range-slider--validating .ui-form__range-slider-track-wrap::before {
    border-color: color-mix(in srgb, var(--shell-accent, #5e6ad2) 54%, var(--settings-input-border, var(--settings-control-border)));
}

.ui-form__toggle--valid .ui-form__toggle-input,
.ui-form__range-slider--valid .ui-form__range-slider-track-wrap::before {
    border-color: color-mix(in srgb, var(--status-green-text, #5ecca0) 58%, var(--settings-input-border, var(--settings-control-border)));
}

.ui-form__toggle--warning .ui-form__toggle-input,
.ui-form__range-slider--warning .ui-form__range-slider-track-wrap::before {
    border-color: color-mix(in srgb, #f2c94c 68%, var(--settings-input-border, var(--settings-control-border)));
}

.ui-form__avatar-field {
    position: relative;
}

.ui-form__avatar-clear {
    position: absolute;
    right: -6px;
    bottom: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0.5px solid var(--shell-border);
    border-radius: 9999px;
    background: var(--shell-bg-surface);
    color: var(--shell-text-secondary);
    box-shadow: var(--shell-shadow);
    cursor: default;
}

.ui-form__avatar-clear:hover,
.ui-form__avatar-clear:focus-visible {
    background: var(--settings-control-hover-bg);
    color: var(--shell-text-primary);
    outline: none;
}

.ui-form__picker-trigger--has-clear {
    padding-right: 34px;
}

.ui-form__range-trigger--has-clear,
.ui-form__duration-trigger--has-clear,
.ui-form__interval-trigger--has-clear,
.ui-form__timezone-trigger--has-clear,
.ui-form__country-trigger--has-clear,
.ui-form__time-trigger--has-clear,
.ui-form__color-trigger--has-clear,
.ui-form__email-trigger--has-clear,
.ui-form__multi-trigger--has-clear {
    padding-right: 52px;
}

.ui-form__range-trigger--has-clear .ui-form__multi-chevron,
.ui-form__duration-trigger--has-clear .ui-form__multi-chevron,
.ui-form__interval-trigger--has-clear .ui-form__multi-chevron,
.ui-form__timezone-trigger--has-clear .ui-form__multi-chevron,
.ui-form__country-trigger--has-clear .ui-form__multi-chevron,
.ui-form__time-trigger--has-clear .ui-form__multi-chevron,
.ui-form__multi-trigger--has-clear .ui-form__multi-chevron {
    right: 9px;
}

@keyframes ui-form-control-spin {
    to {
        transform: rotate(360deg);
    }
}

.app-modal-shell--wizard {
    overflow: hidden;
    border-radius: 18px;
}

.wizard-frame {
    display: flex;
    max-height: calc(100vh - 168px);
    min-height: 390px;
    flex-direction: column;
    overflow: hidden;
    color: var(--shell-menu-text);
}

.wizard-frame--sidebar {
    min-height: 460px;
}

/* ── Header ── */

.wizard-frame__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 26px 28px 20px;
    border-bottom: 0.5px solid var(--shell-menu-divider);
}

.wizard-frame__heading {
    min-width: 0;
    padding-right: 32px;
}

.wizard-frame__title {
    margin: 0;
    color: var(--shell-menu-text-strong);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.006em;
    line-height: 1.3125rem;
}

.wizard-frame__message {
    max-width: 520px;
    margin: 6px 0 0;
    color: var(--shell-menu-hint);
    font-size: 0.8125rem;
    font-weight: 440;
    letter-spacing: 0;
    line-height: 1.25rem;
}

.wizard-frame__count {
    flex: 0 0 auto;
    padding: 3px 9px;
    border-radius: 9999px;
    background: var(--shell-bg-button);
    color: var(--shell-menu-hint);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    font-weight: 550;
    line-height: 1rem;
    white-space: nowrap;
}

/* ── Compact steps (horizontal) ── */

.wizard-frame__compact-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 0;
    padding: 0 20px;
    border-bottom: 0.5px solid var(--shell-menu-divider);
}

.wizard-frame__compact-step {
    position: relative;
    display: inline-flex;
    min-width: 0;
    height: 40px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    color: var(--shell-menu-hint);
    cursor: default;
    transition: color 160ms ease;
}

.wizard-frame__compact-step::after {
    content: "";
    position: absolute;
    right: 8px;
    bottom: 0;
    left: 8px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: transparent;
    transition: background 200ms ease;
}

.wizard-frame__compact-step:not(:disabled):hover,
.wizard-frame__compact-step:not(:disabled):focus-visible {
    color: var(--shell-menu-text-strong);
    outline: none;
}

.wizard-frame__compact-step--active {
    color: var(--shell-menu-text-strong);
}

.wizard-frame__compact-step--active::after {
    background: var(--shell-accent, #5e6ad2);
}

.wizard-frame__compact-step:disabled {
    cursor: default;
    opacity: 0.48;
}

/* ── Step markers (shared compact + sidebar) ── */

.wizard-frame__compact-step-marker,
.wizard-frame__step-marker {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--shell-bg-button);
    color: var(--shell-menu-hint);
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease;
}

.wizard-frame__compact-step-marker {
    width: 16px;
    height: 16px;
}

.wizard-frame__compact-step--active .wizard-frame__compact-step-marker {
    background: var(--shell-accent, #5e6ad2);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--shell-accent, #5e6ad2) 16%, transparent);
    color: #fff;
}

.wizard-frame__compact-step--completed .wizard-frame__compact-step-marker,
.wizard-frame__step--completed .wizard-frame__step-marker {
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 18%, transparent);
    color: var(--shell-accent, #5e6ad2);
}

.wizard-frame__compact-step-label {
    min-width: 0;
    overflow: hidden;
    font-size: 0.75rem;
    font-weight: 520;
    line-height: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Body shell ── */

.wizard-frame__body {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}

.wizard-frame__body--with-rail {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
}

/* ── Sidebar step rail ── */

.wizard-frame__step-rail {
    display: flex;
    min-height: 0;
    flex-direction: column;
    gap: 1px;
    padding: 16px 12px;
    border-right: 0.5px solid var(--shell-menu-divider);
    overflow: auto;
    scrollbar-width: none;
}

.wizard-frame__step-rail::-webkit-scrollbar {
    display: none;
}

.wizard-frame__step {
    position: relative;
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    min-height: 48px;
    align-items: flex-start;
    padding: 9px 10px;
    border-radius: 8px;
    color: var(--shell-menu-hint);
    text-align: left;
    cursor: default;
    transition: background 160ms ease, color 160ms ease;
}

.wizard-frame__step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: calc(9px + 22px + 2px);
    left: calc(10px + 11px);
    width: 1px;
    height: calc(100% - 22px - 9px + 1px);
    background: var(--shell-menu-divider);
    transition: background 200ms ease;
}

.wizard-frame__step--completed:not(:last-child)::before {
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 36%, transparent);
}

.wizard-frame__step:not(:disabled):hover,
.wizard-frame__step:not(:disabled):focus-visible {
    background: var(--shell-menu-item-hover);
    color: var(--shell-menu-text-strong);
    outline: none;
}

.wizard-frame__step--active {
    background: var(--shell-menu-item-hover);
    color: var(--shell-menu-text-strong);
}

.wizard-frame__step:disabled {
    cursor: default;
    opacity: 0.48;
}

.wizard-frame__step--disabled {
    opacity: 0.48;
}

.wizard-frame__step-marker {
    width: 22px;
    height: 22px;
    margin-top: 0;
    font-size: 0.6875rem;
}

.wizard-frame__step--active .wizard-frame__step-marker {
    background: var(--shell-accent, #5e6ad2);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--shell-accent, #5e6ad2) 16%, transparent);
    color: #fff;
}

.wizard-frame__step-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
    padding-top: 2px;
}

.wizard-frame__step-title {
    overflow: hidden;
    color: currentcolor;
    font-size: 0.8125rem;
    font-weight: 550;
    line-height: 1.125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wizard-frame__step-description {
    display: -webkit-box;
    overflow: hidden;
    color: var(--shell-menu-hint);
    font-size: 0.71875rem;
    font-weight: 440;
    line-height: 0.9375rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* ── Content area ── */

.wizard-frame__content {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 20px;
    padding: 24px 28px;
    overflow: auto;
    scrollbar-width: none;
}

.wizard-frame__content::-webkit-scrollbar {
    display: none;
}

.wizard-frame__active-step-heading {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wizard-frame__active-step-heading h3 {
    margin: 0;
    color: var(--shell-menu-text-strong);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.006em;
    line-height: 1.25rem;
}

.wizard-frame__active-step-heading p,
.wizard-frame__empty {
    margin: 0;
    color: var(--shell-menu-hint);
    font-size: 0.8125rem;
    font-weight: 440;
    line-height: 1.1875rem;
}

.wizard-frame__step-body {
    min-width: 0;
}

/* ── Error banner ── */

.wizard-frame__error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 10px 12px;
    border: 0.5px solid color-mix(in srgb, var(--shell-menu-text-danger) 32%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--shell-menu-text-danger) 7%, transparent);
    color: var(--shell-menu-text-danger);
    font-size: 0.8125rem;
    font-weight: 480;
    line-height: 1.125rem;
}

/* ── Footer ── */

.wizard-frame__footer {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-top: 0.5px solid var(--shell-menu-divider);
}

.wizard-frame__footer-left,
.wizard-frame__footer-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.wizard-frame__footer-right {
    justify-content: flex-end;
}

.wizard-frame__primary-action {
    min-width: 92px;
}

.wizard-frame__button-spinner {
    display: inline-flex;
    width: 12px;
    height: 12px;
    margin-right: 6px;
    border: 1.5px solid currentcolor;
    border-right-color: transparent;
    border-radius: 9999px;
    animation: ui-form-control-spin 720ms linear infinite;
}

/* ── Responsive ── */

@media (max-width: 680px) {
    .wizard-frame {
        max-height: calc(100vh - 64px);
    }

    .wizard-frame__header {
        padding: 22px 20px 16px;
    }

    .wizard-frame__heading {
        padding-right: 24px;
    }

    .wizard-frame__body--with-rail {
        display: flex;
        flex-direction: column;
    }

    .wizard-frame__step-rail {
        display: grid;
        grid-auto-columns: minmax(148px, 1fr);
        grid-auto-flow: column;
        border-right: 0;
        border-bottom: 0.5px solid var(--shell-menu-divider);
        overflow-x: auto;
        overflow-y: hidden;
    }

    .wizard-frame__step:not(:last-child)::before {
        display: none;
    }

    .wizard-frame__content {
        padding: 20px;
    }

    .wizard-frame__footer {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .wizard-frame__footer-left,
    .wizard-frame__footer-right {
        width: 100%;
        justify-content: flex-end;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-form__control-loader {
        animation: none;
    }

    .wizard-frame__button-spinner {
        animation: none;
    }

    .wizard-frame__compact-step,
    .wizard-frame__compact-step::after,
    .wizard-frame__compact-step-marker,
    .wizard-frame__step-marker,
    .wizard-frame__step {
        transition: none;
    }
}

.chat-transcript {
    display: flex;
    position: relative;
    min-height: 0;
    flex-direction: column;
    gap: 12px;
    padding: 8px 8px 20px;
    overflow: auto;
    scrollbar-width: none;
}

.chat-transcript::-webkit-scrollbar {
    display: none;
}

.chat-transcript__top-scroll-hint {
    position: sticky;
    z-index: 2;
    top: -8px;
    display: block;
    height: 16px;
    flex: 0 0 16px;
    margin: -8px -8px -20px;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(
        var(--chat-transcript-scroll-hint-bg, var(--assistant-panel-raised-bg, var(--shell-bg-surface))),
        color-mix(in srgb, var(--chat-transcript-scroll-hint-bg, var(--assistant-panel-raised-bg, var(--shell-bg-surface))) 0%, transparent)
    );
}

.chat-transcript--top-scroll-hint[data-can-scroll="true"] .chat-transcript__top-scroll-hint {
    opacity: 1;
}

.chat-transcript--empty {
    justify-content: center;
}

.chat-message {
    display: flex;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

.chat-message--start {
    align-items: flex-start;
}

.chat-message--end {
    align-items: flex-end;
}

.chat-message--end.chat-message--bubble {
    max-width: 80%;
    align-self: flex-end;
}

.chat-message--center {
    align-items: center;
}

.chat-message__plain,
.chat-message-bubble {
    min-width: 0;
    max-width: min(100%, 520px);
    color: var(--assistant-panel-soft, var(--shell-text-primary));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 20.8px;
    overflow-wrap: anywhere;
    word-break: normal;
}

.chat-message__plain {
    width: 100%;
}

.chat-message__content {
    display: flex;
    min-width: 0;
    width: 100%;
    flex-direction: column;
    gap: 8px;
}

.chat-message__attachments {
    display: flex;
    min-width: 0;
    width: 100%;
    flex-direction: column;
    gap: 6px;
}

.chat-message-bubble {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--shell-bg-raised);
    box-shadow: var(--assistant-user-message-shadow, none);
}

.chat-message-bubble--end {
    background: var(--assistant-user-message-bg, var(--shell-bg-raised));
    color: var(--assistant-user-message-text, var(--shell-text-primary));
}

.chat-message__text {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.chat-message__text--pending {
    color: var(--assistant-panel-muted, var(--shell-text-secondary));
}

.chat-message__text--reasoning,
.assistant-message__part--reasoning {
    display: inline-block;
    max-width: 100%;
    color: color-mix(in srgb, var(--assistant-panel-soft, var(--shell-text-primary)) 74%, transparent);
    font-size: 0.75rem;
    font-style: italic;
    font-weight: 450;
    line-height: 1.125rem;
    background-image: linear-gradient(
        105deg,
        color-mix(in srgb, var(--assistant-panel-soft, var(--shell-text-primary)) 54%, transparent) 0%,
        color-mix(in srgb, var(--assistant-panel-soft, var(--shell-text-primary)) 76%, transparent) 36%,
        var(--assistant-panel-soft, var(--shell-text-primary)) 50%,
        color-mix(in srgb, var(--assistant-panel-soft, var(--shell-text-primary)) 76%, transparent) 64%,
        color-mix(in srgb, var(--assistant-panel-soft, var(--shell-text-primary)) 54%, transparent) 100%
    );
    background-size: 240% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: chat-reasoning-shimmer 3.8s linear infinite;
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
    .chat-message__text--reasoning,
    .assistant-message__part--reasoning {
        color: color-mix(in srgb, var(--assistant-panel-soft, var(--shell-text-primary)) 74%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-message__text--reasoning,
    .assistant-message__part--reasoning {
        animation: none;
        background-position: 50% 0;
    }
}

@keyframes chat-reasoning-shimmer {
    from {
        background-position: 120% 0;
    }

    to {
        background-position: -120% 0;
    }
}

.chat-message__markdown > :first-child {
    margin-top: 0;
}

.chat-message__markdown > :last-child {
    margin-bottom: 0;
}

.chat-message__markdown p {
    margin: 0 0 8px;
    overflow-wrap: anywhere;
}

.chat-message__markdown ul,
.chat-message__markdown ol {
    margin: 0 0 8px;
    padding-left: 18px;
}

.chat-message__markdown code {
    padding: 1px 4px;
    border: 0.5px solid var(--assistant-panel-border, var(--shell-border));
    border-radius: 4px;
    background: var(--assistant-panel-raised-bg, var(--shell-bg-raised));
    color: var(--assistant-panel-text, var(--shell-text-primary));
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.75rem;
}

.chat-message__markdown,
.chat-message__markdown li {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.chat-message__markdown pre {
    max-width: 100%;
    overflow-x: auto;
}

.chat-message__markdown img {
    max-width: 100%;
}

.chat-message-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 90ms ease-out;
}

.chat-message:hover .chat-message-toolbar,
.chat-message:focus-within .chat-message-toolbar {
    opacity: 1;
    pointer-events: auto;
}

.chat-message-toolbar__button {
    position: relative;
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--assistant-message-action-icon, var(--shell-text-muted));
    cursor: default;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.chat-message-toolbar__button:hover,
.chat-message-toolbar__button:focus-visible {
    background: var(--assistant-panel-hover-bg, var(--shell-hover-bg));
    color: var(--assistant-panel-text, var(--shell-text-primary));
    outline: none;
}

.chat-message-toolbar__button::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    z-index: 1100;
    height: 27px;
    padding: 0 8px;
    border: 0.5px solid var(--assistant-panel-border, var(--shell-border));
    border-radius: 6px;
    background: var(--assistant-tooltip-bg, var(--shell-menu-bg));
    box-shadow:
        rgb(0 0 0 / 12.5%) 0 3px 8px,
        rgb(0 0 0 / 12.5%) 0 2px 5px,
        rgb(0 0 0 / 12.5%) 0 1px 1px;
    color: var(--assistant-tooltip-text, var(--shell-text-primary));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 26px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-2px);
    transition: opacity 90ms ease-out, transform 90ms ease-out;
}

.chat-message-toolbar__button:hover::after,
.chat-message-toolbar__button:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.chat-message-toolbar__label {
    overflow: hidden;
    max-width: 92px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-avatar-message {
    position: relative;
    display: grid;
    width: 100%;
    min-width: 0;
    align-items: start;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 8px;
    color: var(--shell-text-primary);
    transition: background-color 120ms ease-out;
}

.chat-avatar-message--start {
    grid-template-columns: 28px minmax(0, 1fr) auto;
}

.chat-avatar-message--end {
    grid-template-columns: auto minmax(0, 1fr) 28px;
}

.chat-avatar-message--no-avatar.chat-avatar-message--start {
    grid-template-columns: minmax(0, 1fr) auto;
}

.chat-avatar-message--no-avatar.chat-avatar-message--end {
    grid-template-columns: auto minmax(0, 1fr);
}

.chat-avatar-message:hover,
.chat-avatar-message:focus-within {
    background: var(--shell-bg-hover);
}

.chat-avatar-message__avatar {
    display: flex;
    grid-row: 1;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    border-radius: 9999px;
    background: var(--chat-avatar-message-avatar-bg, var(--shell-accent, #5e6ad2));
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 650;
    line-height: 1.75rem;
}

.chat-avatar-message--end .chat-avatar-message__avatar {
    grid-column: 3;
}

.chat-avatar-message__body {
    display: flex;
    grid-row: 1;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
}

.chat-avatar-message--end .chat-avatar-message__body {
    grid-column: 2;
    align-items: flex-end;
}

.chat-avatar-message--no-avatar.chat-avatar-message--start .chat-avatar-message__body {
    grid-column: 1;
}

.chat-avatar-message--no-avatar.chat-avatar-message--end .chat-avatar-message__body {
    grid-column: 2;
}

.chat-avatar-message__header {
    display: flex;
    min-height: 18px;
    align-items: baseline;
    gap: 7px;
}

.chat-avatar-message--end .chat-avatar-message__header {
    flex-direction: row-reverse;
}

.chat-avatar-message__header strong {
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 560;
    line-height: 1.125rem;
}

.chat-avatar-message__header span {
    color: var(--shell-text-secondary);
    font-size: 0.6875rem;
    line-height: 0.9375rem;
}

.chat-avatar-message__bubble {
    width: fit-content;
    max-width: min(680px, 100%);
    margin-top: 2px;
    padding: 7px 10px;
    border: 0.5px solid var(--shell-border);
    border-radius: 10px;
    background: var(--shell-bg-active);
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.25rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-avatar-message--end .chat-avatar-message__bubble {
    background: color-mix(in srgb, var(--shell-accent, #5e6ad2) 14%, transparent);
    color: var(--shell-text-primary);
}

.chat-avatar-message__actions {
    display: flex;
    grid-row: 1;
    align-items: flex-start;
    gap: 2px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(1px);
    transition: opacity 120ms ease-out, transform 120ms ease-out;
}

.chat-avatar-message--start .chat-avatar-message__actions {
    grid-column: 3;
}

.chat-avatar-message--end .chat-avatar-message__actions {
    grid-column: 1;
}

.chat-avatar-message:hover .chat-avatar-message__actions,
.chat-avatar-message:focus-within .chat-avatar-message__actions {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.assistant-message__part {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.assistant-message__part + .assistant-message__part {
    margin-top: 8px;
}

.assistant-message__part--status {
    color: var(--assistant-panel-muted);
}

.assistant-message__part--reasoning + .assistant-message__part {
    margin-top: 10px;
}

.assistant-message__part--error {
    padding: 8px 10px;
    border: 0.5px solid color-mix(in srgb, var(--danger, #f04438) 38%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--danger, #f04438) 9%, transparent);
    color: var(--assistant-panel-text);
}

.assistant-panel__state {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 28px;
    color: var(--assistant-panel-muted);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1.25rem;
    text-align: center;
}

.assistant-panel__state-title {
    color: var(--assistant-panel-text);
    font-size: 0.875rem;
    font-weight: 560;
}

.assistant-panel__state-copy {
    max-width: 260px;
}

.assistant-panel__state-spinner {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--assistant-panel-border);
    border-top-color: var(--assistant-panel-text);
    border-radius: 9999px;
    animation: assistant-panel-spin 720ms linear infinite;
}

@keyframes assistant-panel-spin {
    to {
        transform: rotate(360deg);
    }
}

.assistant-tool-call {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    min-height: 28px;
    padding: 5px 8px;
    border: 0.5px solid var(--assistant-panel-border);
    border-radius: 7px;
    background: var(--assistant-panel-raised-bg);
    color: var(--assistant-panel-soft);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.125rem;
}

.assistant-tool-call__status {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    margin-top: 5px;
    border-radius: 9999px;
    background: var(--assistant-panel-muted);
}

.assistant-tool-call--pending .assistant-tool-call__status,
.assistant-tool-call--running .assistant-tool-call__status {
    background: var(--accent, #5e6ad2);
    animation: assistant-tool-call-pulse 1.2s ease-in-out infinite;
}

.assistant-tool-call--completed .assistant-tool-call__status {
    background: var(--success, #26a65b);
}

.assistant-tool-call--failed .assistant-tool-call__status {
    background: var(--danger, #f04438);
}

.assistant-tool-call--cancelled .assistant-tool-call__status {
    background: var(--assistant-panel-muted);
}

@keyframes assistant-tool-call-pulse {
    0%,
    100% {
        opacity: 0.45;
    }

    50% {
        opacity: 1;
    }
}

.assistant-tool-call__body {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.assistant-tool-call__title {
    color: var(--assistant-panel-text);
    font-weight: 520;
}

.assistant-tool-call__summary,
.assistant-tool-call__preview,
.assistant-tool-call__error {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assistant-tool-call__error {
    color: var(--danger, #f04438);
}

.assistant-message__part.assistant-message__part--work-log {
    display: block;
    width: 100%;
    margin: 8px 0 10px;
}

.assistant-message__inline-flow {
    display: inline;
}

.assistant-message__inline-flow > .assistant-inline-chip {
    margin-right: 4px;
}

.assistant-inline-chip {
    display: inline-flex;
    max-width: 100%;
    min-width: 0;
    min-height: 19.5px;
    align-items: center;
    vertical-align: baseline;
    gap: 4px;
    padding: 1.5px 3.9px 1.5px 2.6px;
    border: 0.5px solid transparent;
    border-radius: 4px;
    color: var(--assistant-inline-chip-text, var(--assistant-panel-soft));
    background: var(--assistant-inline-chip-bg, var(--shell-bg-button));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 20.8px;
    white-space: nowrap;
}

.assistant-inline-chip__icon {
    display: inline-flex;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: var(--assistant-panel-muted);
}

.assistant-inline-chip__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.assistant-inline-chip__remove {
    display: inline-flex;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 9999px;
    margin: 0 0 0 1px;
    color: var(--assistant-panel-muted);
    background: transparent;
    opacity: 0;
    transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease;
}

.assistant-inline-chip--removable:hover .assistant-inline-chip__remove,
.assistant-inline-chip--removable:focus-within .assistant-inline-chip__remove {
    opacity: 1;
}

.assistant-inline-chip__remove:hover,
.assistant-inline-chip__remove:focus-visible {
    color: var(--assistant-panel-text);
    background: var(--assistant-panel-hover-bg);
    outline: none;
}

.assistant-work-log {
    width: 100%;
    max-width: 70%;
    margin: 8px 0 10px;
    overflow: hidden;
    border: 0.5px solid var(--assistant-panel-border, var(--shell-border));
    border-radius: 12px;
    background: color-mix(in srgb, var(--assistant-panel-raised-bg, var(--shell-bg-raised)) 82%, transparent);
    color: var(--assistant-panel-soft, var(--shell-text-primary));
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--assistant-panel-text, var(--shell-text-primary)) 3%, transparent);
    box-sizing: border-box;
}

.assistant-message__assistant-text .assistant-work-log {
    margin-left: 0;
}

.assistant-work-log__header {
    display: flex;
    height: 28px;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border-bottom: 0.5px solid var(--assistant-panel-border, var(--shell-border));
    color: var(--assistant-panel-muted, var(--shell-text-secondary));
    font-size: 0.6875rem;
    font-weight: 650;
    line-height: 1rem;
    text-transform: uppercase;
}

.assistant-work-log__header-icon,
.assistant-work-log__entry-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--assistant-panel-muted, var(--shell-text-secondary));
}

.assistant-work-log__title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assistant-work-log__count {
    display: inline-flex;
    min-width: 20px;
    height: 16px;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 0.5px solid var(--assistant-panel-border, var(--shell-border));
    border-radius: 9999px;
    background: color-mix(in srgb, var(--assistant-panel-hover-bg, var(--shell-bg-hover)) 58%, transparent);
    color: var(--assistant-panel-soft, var(--shell-text-primary));
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.assistant-work-log__entries {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.assistant-message__assistant-text .assistant-work-log__entries {
    margin: 0;
    padding: 0;
}

.assistant-work-log__entry {
    display: flex;
    min-width: 0;
    height: 28px;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border-top: 0.5px solid var(--assistant-panel-border, var(--shell-border));
    color: var(--assistant-panel-text, var(--shell-text-primary));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.125rem;
}

.assistant-message__assistant-text .assistant-work-log__entry {
    margin: 0;
    overflow-wrap: normal;
}

.assistant-work-log__entry:first-child {
    border-top: 0;
}

.assistant-work-log__entry-title {
    flex: 0 0 auto;
    max-width: 46%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assistant-work-log__entry-detail {
    min-width: 0;
    overflow: hidden;
    color: var(--assistant-panel-muted, var(--shell-text-secondary));
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1.125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assistant-panel__context-row {
    gap: 4px;
    flex-wrap: wrap;
}

.assistant-panel__context-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 2px;
    border-radius: 9999px;
    color: var(--assistant-panel-muted);
    transition: background-color 90ms ease-out, color 90ms ease-out;
}

.assistant-panel__context-remove:hover,
.assistant-panel__context-remove:focus-visible {
    background: var(--assistant-panel-hover-bg);
    color: var(--assistant-panel-text);
    outline: none;
}

.code-viewer,
.code-editor,
.code-diff-viewer,
.code-review-viewer,
.code-merge-viewer {
    --code-bg: var(--shell-menu-bg, var(--shell-bg-active));
    --code-border: var(--shell-menu-border, var(--app-theme-card-border, var(--shell-border)));
    --code-header-bg: color-mix(in srgb, var(--shell-bg-active) 82%, transparent);
    --code-text: var(--shell-text-primary);
    --code-muted: var(--shell-text-secondary);
    --code-hover: var(--shell-bg-hover);
    display: flex;
    min-width: 0;
    min-height: 0;
    color: var(--code-text);
}

.code-diff-viewer,
.code-review-viewer {
    --code-review-card-bg: var(--code-bg);
    --code-review-header-bg: var(--code-bg);
    --code-review-line-number-bg: var(--code-bg);
    --code-review-added-bg: rgba(4, 154, 31, 0.1);
    --code-review-added-gutter-bg: var(--code-review-line-number-bg);
    --code-review-added-border: rgb(34, 197, 94);
    --code-review-added-text: lch(68% 64.37 141.95);
    --code-review-removed-bg: rgba(220, 38, 38, 0.13);
    --code-review-removed-gutter-bg: var(--code-review-line-number-bg);
    --code-review-removed-border: rgb(248, 113, 113);
    --code-review-removed-text: lch(67% 58 29);
    --code-review-comment-bg: var(--code-review-card-bg);
    --code-review-comment-border: var(--code-border);
    --code-review-fold-bg: color-mix(in srgb, var(--shell-bg-active) 52%, transparent);
    --code-review-fold-hover-bg: color-mix(in srgb, var(--shell-bg-hover) 72%, transparent);
}

.code-viewer,
.code-editor,
.code-diff-viewer,
.code-merge-viewer {
    flex-direction: column;
    overflow: hidden;
    border: 0.5px solid var(--code-border);
    border-radius: 8px;
    background: var(--code-bg);
}

.code-viewer__header,
.code-editor__header,
.code-diff-viewer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
    padding: 7px 10px 7px 12px;
    border-bottom: 0.5px solid var(--code-border);
    background: var(--code-header-bg);
}

.code-viewer__title-stack,
.code-editor__title-stack,
.code-diff-viewer__title-stack {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.code-viewer__title,
.code-editor__title,
.code-diff-viewer__title {
    margin: 0;
    overflow: hidden;
    color: var(--code-text);
    font-size: 0.8125rem;
    font-weight: 560;
    line-height: 1.125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.code-viewer__subtitle,
.code-editor__subtitle,
.code-diff-viewer__subtitle {
    overflow: hidden;
    color: var(--code-muted);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.code-viewer__actions,
.code-editor__actions,
.code-diff-viewer__actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.code-surface,
.code-diff-viewer__surface {
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: var(--code-surface-height, 360px);
    overflow: hidden;
    background: var(--code-bg);
    font-family: var(--font-mono, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace);
}

.code-viewer > .code-surface,
.code-editor > .code-surface,
.code-diff-viewer > .code-diff-viewer__surface {
    flex: 1 1 auto;
}

.code-surface--theme-background,
.code-diff-viewer__surface {
    background: transparent;
}

.code-surface__comment-line {
    background: color-mix(in srgb, var(--app-theme-accent, #5e6ad2) 13%, transparent);
}

.code-surface__comment-glyph {
    position: relative;
}

.code-surface__comment-glyph::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    margin: 7px auto 0;
    border-radius: 9999px;
    background: var(--app-theme-accent, #5e6ad2);
}

.code-surface__comment-glyph--resolved::after {
    background: var(--shell-text-muted);
}

.code-diff-viewer .monaco-diff-editor .line-insert,
.code-diff-viewer .monaco-diff-editor .char-insert {
    background: var(--code-review-added-bg) !important;
}

.code-diff-viewer .monaco-diff-editor .line-delete,
.code-diff-viewer .monaco-diff-editor .char-delete {
    background: var(--code-review-removed-bg) !important;
}

.code-diff-viewer .monaco-diff-editor .gutter-insert {
    box-shadow: inset 2px 0 0 var(--code-review-added-border) !important;
}

.code-diff-viewer .monaco-diff-editor .gutter-delete {
    box-shadow: inset 2px 0 0 var(--code-review-removed-border) !important;
}

.code-diff-viewer .monaco-diff-editor .line-numbers {
    color: var(--code-muted) !important;
}

.code-diff-viewer .monaco-diff-editor .line-numbers.active-line-number {
    color: var(--code-text) !important;
}

.code-diff-viewer__threads {
    display: grid;
    gap: 8px;
    padding: 10px;
    border-top: 0.5px solid var(--code-border);
}

.code-diff-viewer__thread {
    display: grid;
    gap: 5px;
    padding: 8px 10px;
    border: 0.5px solid var(--code-border);
    border-radius: 6px;
    background: var(--shell-bg-surface);
}

.code-diff-viewer__thread--resolved {
    opacity: 0.66;
}

.code-diff-viewer__thread-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--code-muted);
    font-size: 0.6875rem;
    font-weight: 560;
    line-height: 0.9375rem;
    text-transform: uppercase;
}

.code-diff-viewer__thread-message {
    margin: 0;
    color: var(--code-text);
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

.code-review-viewer {
    flex-direction: column;
    gap: 10px;
    overflow: auto;
    background: transparent;
}

.code-review-viewer--virtualized {
    overflow: hidden;
}

.code-review-viewer__toolbar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 32px;
    padding: 0 2px;
}

.code-review-viewer__summary,
.code-review-viewer__actions,
.code-review-viewer__file-meta {
    display: inline-flex;
    align-items: center;
}

.code-review-viewer__summary {
    gap: 10px;
    color: var(--code-muted);
    font-size: 0.75rem;
    font-weight: 510;
    line-height: 1rem;
}

.code-review-viewer__actions {
    gap: 8px;
}

.code-review-viewer__stack {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
    align-content: start;
    gap: 16px;
}

.code-review-viewer__stack--virtualized {
    display: block;
    flex: 1 1 auto;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.code-review-viewer__stack--virtualized .code-review-viewer__file-card {
    margin-bottom: 16px;
}

.code-review-viewer__file-card {
    min-width: 0;
    overflow: visible;
    border: 0.5px solid var(--code-border);
    border-radius: 8px;
    background: var(--code-review-card-bg);
}

.code-review-viewer__file-header {
    position: sticky;
    top: 0;
    z-index: 4;
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px;
    height: 37px;
    min-height: 37px;
    padding: 6px 8px;
    border-bottom: 0.5px solid var(--code-border);
    border-radius: 7.5px 7.5px 0 0;
    background: var(--code-review-header-bg);
    box-shadow:
        inset 0 0 0 0.5px var(--code-border),
        0 1px 0 var(--code-review-header-bg);
}

.code-review-viewer__file-toggle {
    position: relative;
    display: inline-grid;
    width: 24px;
    height: 24px;
    margin-left: -4px;
    place-items: center;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--code-muted);
    cursor: default;
    padding: 0;
}

.code-review-viewer__file-toggle:hover,
.code-review-viewer__file-toggle:focus-visible {
    color: var(--code-text);
    outline: none;
}

.code-review-viewer__file-language-icon,
.code-review-viewer__file-collapse-icon {
    grid-area: 1 / 1;
    transition: opacity 120ms ease, transform 120ms ease;
}

.code-review-viewer__file-language-icon {
    display: inline-grid;
    width: 16px;
    height: 16px;
    place-items: center;
    color: var(--code-muted);
    font-family: var(--font-mono, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
}

.code-review-viewer__file-collapse-icon {
    display: inline-grid;
    place-items: center;
    color: var(--code-muted);
    opacity: 0;
    transform: rotate(90deg) scale(0.94);
}

.code-review-viewer__file-toggle:hover .code-review-viewer__file-language-icon,
.code-review-viewer__file-toggle:focus-visible .code-review-viewer__file-language-icon {
    opacity: 0;
}

.code-review-viewer__file-toggle:hover .code-review-viewer__file-collapse-icon,
.code-review-viewer__file-toggle:focus-visible .code-review-viewer__file-collapse-icon {
    opacity: 1;
}

.code-review-viewer__file-toggle--collapsed .code-review-viewer__file-collapse-icon {
    transform: rotate(0deg) scale(0.94);
}

.code-review-viewer__file-card--collapsed .code-review-viewer__file-header {
    border-bottom: 0;
    border-radius: 8px;
}

.code-review-viewer__file-title-stack {
    min-width: 0;
    overflow: hidden;
}

.code-review-viewer__file-title-line {
    display: flex;
    min-width: 0;
    max-width: 100%;
    height: 15px;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    white-space: nowrap;
}

.code-review-viewer__file-name,
.code-review-viewer__file-directory {
    display: inline-block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.code-review-viewer__file-name {
    flex: 0 1 auto;
    color: var(--code-text);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: normal;
}

.code-review-viewer__file-directory {
    flex: 1 1 auto;
    color: var(--code-muted);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: normal;
}

.code-review-viewer__file-meta {
    display: inline-flex;
    min-width: max-content;
    height: 24px;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    color: var(--code-muted);
    font-size: 0.75rem;
    font-weight: 520;
    line-height: 1rem;
    white-space: nowrap;
}

.code-review-viewer__file-comments {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--app-theme-accent, #5e6ad2);
}

.code-review-viewer__file-additions {
    color: var(--code-review-added-text);
}

.code-review-viewer__file-deletions {
    color: var(--code-review-removed-text);
}

.code-review-viewer__review-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 8px;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: transparent;
    color: var(--code-muted);
    font-size: 0.75rem;
    font-weight: 520;
    line-height: 1rem;
}

.code-review-viewer__review-button:hover,
.code-review-viewer__review-button:focus-visible {
    background: var(--code-hover);
    color: var(--code-text);
    outline: none;
}

.code-review-viewer__review-button--checked {
    color: var(--code-text);
}

.code-review-viewer__review-box {
    display: inline-grid;
    width: 14px;
    height: 14px;
    place-items: center;
    border: 0.5px solid var(--code-border);
    border-radius: 3px;
    color: var(--shell-bg-surface);
}

.code-review-viewer__review-button--checked .code-review-viewer__review-box {
    border-color: var(--app-theme-accent, #5e6ad2);
    background: var(--app-theme-accent, #5e6ad2);
}

.code-review-viewer__file-meta .ui-icon-button {
    opacity: 1;
}

.code-review-viewer__diff {
    min-width: 0;
    overflow-x: auto;
    padding: 0;
    border-radius: 0 0 7.5px 7.5px;
    background: var(--code-review-card-bg);
    font-family: var(--font-mono, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace);
}

.code-review-viewer__line {
    position: relative;
    display: grid;
    grid-template-columns: 60px minmax(max-content, 1fr);
    min-width: max-content;
    height: 20px;
    min-height: 20px;
    color: var(--code-text);
    font-size: 0.75rem;
    line-height: 20px;
}

.code-review-viewer__line--added {
    box-shadow: inset 2px 0 0 var(--code-review-added-border);
}

.code-review-viewer__line--removed {
    box-shadow: inset 2px 0 0 var(--code-review-removed-border);
}

.code-review-viewer__line--added .code-review-viewer__line-code,
.code-review-viewer__line--added .code-review-viewer__line-number {
    background: var(--code-review-added-bg);
}

.code-review-viewer__line--removed .code-review-viewer__line-code,
.code-review-viewer__line--removed .code-review-viewer__line-number {
    background: var(--code-review-removed-bg);
}

.code-review-viewer__line-number {
    position: sticky;
    left: 0;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    height: 20px;
    padding: 0 10px;
    background: var(--code-review-line-number-bg);
    color: var(--code-muted);
    user-select: none;
}

.code-review-viewer__line--added .code-review-viewer__line-number {
    color: var(--code-review-added-text);
}

.code-review-viewer__line--removed .code-review-viewer__line-number {
    color: var(--code-review-removed-text);
}

.code-review-viewer__line-code {
    display: block;
    min-width: 0;
    height: 20px;
    padding: 0 10px;
    color: inherit;
    font: inherit;
    white-space: pre;
}

.code-review-viewer__line-action {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-grid;
    width: 60px;
    height: 20px;
    place-items: center;
    border: 0.5px solid transparent;
    border-radius: 9999px;
    background: color-mix(in srgb, var(--code-review-line-number-bg) 72%, var(--shell-bg-hover));
    color: var(--code-muted);
    opacity: 0;
    transform: none;
    transition: opacity 100ms ease, background-color 100ms ease, color 100ms ease;
}

.code-review-viewer__line:hover .code-review-viewer__line-action,
.code-review-viewer__line:focus-within .code-review-viewer__line-action {
    opacity: 1;
    transform: none;
}

.code-review-viewer__line-action:hover,
.code-review-viewer__line-action:focus-visible {
    background: color-mix(in srgb, var(--code-review-line-number-bg) 52%, var(--shell-bg-hover));
    color: var(--code-text);
    outline: none;
}

.code-review-viewer__fold {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    min-height: 28px;
    align-items: center;
    border-top: 0.5px solid var(--code-border);
    border-bottom: 0.5px solid var(--code-border);
    background: var(--code-review-fold-bg);
    color: var(--code-muted);
    font-size: 0.75rem;
    font-weight: 510;
    line-height: 1rem;
}

.code-review-viewer__fold-gutter {
    display: inline-grid;
    height: 28px;
    place-items: center;
}

.code-review-viewer__fold-side-button,
.code-review-viewer__fold-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--code-muted);
    font: inherit;
    cursor: default;
}

.code-review-viewer__fold-side-button {
    width: 24px;
    height: 24px;
    padding: 0;
}

.code-review-viewer__fold-side-button:hover,
.code-review-viewer__fold-side-button:focus-visible,
.code-review-viewer__fold-label:hover,
.code-review-viewer__fold-label:focus-visible {
    background: var(--code-review-fold-hover-bg);
    color: var(--code-text);
    outline: none;
}

.code-review-viewer__fold-label {
    width: fit-content;
    min-height: 24px;
    justify-self: center;
    padding: 0 8px;
    margin-right: 60px;
}

.code-review-viewer__thread,
.code-review-viewer__comment-draft {
    display: block;
    margin: 0;
    padding: 8px clamp(12px, 18%, 244px) 8px 72px;
    color: var(--code-text);
}

.code-review-viewer__thread--added,
.code-review-viewer__comment-draft--added {
    background: linear-gradient(
        to right,
        var(--code-review-added-bg) 0,
        var(--code-review-added-bg) 100%
    );
    box-shadow: inset 2px 0 0 var(--code-review-added-border);
}

.code-review-viewer__thread--removed,
.code-review-viewer__comment-draft--removed {
    background: linear-gradient(
        to right,
        var(--code-review-removed-bg) 0,
        var(--code-review-removed-bg) 100%
    );
    box-shadow: inset 2px 0 0 var(--code-review-removed-border);
}

.code-review-viewer__thread--resolved {
    opacity: 0.68;
}

.code-review-viewer__thread .comment-thread--root,
.code-review-viewer__comment-draft .comment-composer {
    width: 100%;
    margin: 0;
}

.code-review-viewer__comment-draft .comment-composer {
    border: 0.5px solid var(--comment-thread-card-border, var(--code-border));
    border-radius: 8px;
    background: var(--comment-thread-card-bg, var(--code-review-comment-bg));
    min-height: 42px;
    padding: 7px 10px 7px 12px;
}

.code-review-viewer__comment-draft .comment-composer__input {
    min-height: 22px;
    line-height: 1.25rem;
}

.code-review-viewer__empty {
    display: grid;
    min-height: 220px;
    place-items: center;
    color: var(--code-muted);
    font-size: 0.8125rem;
}

.code-merge-viewer {
    gap: 10px;
    padding: 10px;
}

.code-merge-viewer__sources {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
}

.code-merge-viewer--resultonly .code-merge-viewer__sources {
    display: none;
}

.code-merge-viewer__conflicts {
    display: grid;
    gap: 8px;
}

.code-merge-viewer__conflict {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 0.5px solid var(--code-border);
    border-radius: 7px;
    background: var(--shell-bg-surface);
}

.code-merge-viewer__conflict--resolved {
    opacity: 0.7;
}

.code-merge-viewer__conflict-summary,
.code-merge-viewer__conflict-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.code-merge-viewer__conflict-summary {
    justify-content: space-between;
    color: var(--code-muted);
    font-size: 0.75rem;
    line-height: 1rem;
}

.lightbox__monaco-shell .code-viewer,
.lightbox__monaco-shell .code-surface {
    height: 100%;
    border: 0;
    border-radius: 0;
}

@media (max-width: 760px) {
    .code-review-viewer__file-header {
        grid-template-columns: 20px minmax(0, 1fr);
    }

    .code-review-viewer__file-meta {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding: 0 0 8px 32px;
    }

    .code-review-viewer__line {
        grid-template-columns: 42px minmax(max-content, 1fr);
    }

    .code-review-viewer__thread {
        padding-left: 12px;
    }

    .code-merge-viewer__sources {
        grid-template-columns: 1fr;
    }
}

.shell-drawer-layer {
    position: fixed;
    inset: 0;
    z-index: 746;
    pointer-events: none;
}

.shell-drawer-backdrop {
    position: fixed;
    inset: 0;
    border: 0;
    background: transparent;
    cursor: default;
    pointer-events: auto;
}

.shell-drawer {
    position: fixed;
    top: var(--shell-drawer-top, 13px);
    right: var(--shell-drawer-right, -7px);
    bottom: var(--shell-drawer-bottom, 13px);
    display: flex;
    flex-direction: column;
    width: var(--shell-drawer-width, 358px);
    min-width: 0;
    min-height: 0;
    border: 0.5px solid var(--shell-drawer-border, var(--shell-menu-border, var(--shell-border)));
    border-radius: 12px;
    background: var(--shell-drawer-bg, var(--shell-menu-bg, var(--shell-bg-surface)));
    box-shadow: var(--shell-drawer-shadow, var(--shell-shadow));
    color: var(--shell-text-primary);
    overflow: hidden;
    pointer-events: auto;
    opacity: 0;
    transform: translateX(calc(100% + 24px));
    visibility: hidden;
    will-change: transform, opacity;
}

.shell-drawer-layer--open .shell-drawer {
    opacity: 1;
    transform: none;
    visibility: visible;
}

.shell-drawer-layer--entering .shell-drawer {
    visibility: visible;
    animation: shell-drawer-enter 260ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

.shell-drawer-layer--closing .shell-drawer {
    visibility: visible;
    animation: shell-drawer-exit 260ms cubic-bezier(0.32, 0.72, 0, 1) both;
    pointer-events: none;
}

@keyframes shell-drawer-enter {
    from {
        opacity: 0;
        transform: translateX(calc(100% + 24px));
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes shell-drawer-exit {
    from {
        opacity: 1;
        transform: none;
    }

    to {
        opacity: 0;
        transform: translateX(calc(100% + 24px));
    }
}

.shell-drawer__header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 58px;
    padding: 20px 20px 14px;
    box-sizing: border-box;
}

.shell-drawer__title-group,
.shell-drawer__actions {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 4px;
}

.shell-drawer__title {
    min-width: 0;
    margin: 0;
    color: var(--shell-text-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4375rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shell-drawer__header-button.ui-icon-button {
    color: var(--shell-text-tertiary);
    background: transparent;
    border-color: transparent;
}

.shell-drawer__header-button.ui-icon-button:hover,
.shell-drawer__header-button.ui-icon-button:focus-visible {
    color: var(--shell-text-primary);
    background: var(--shell-bg-hover);
}

.shell-drawer__search {
    flex: 0 0 auto;
    padding: 0 20px 25px;
}

.shell-drawer__search .search-field {
    height: 44px;
    padding: 0 12px;
    border-color: var(--shell-drawer-search-border, var(--settings-control-border));
    border-radius: 10px;
    background: var(--shell-drawer-bg, var(--shell-menu-bg, var(--shell-bg-surface)));
}

.shell-drawer__search .search-field:focus-within {
    border-color: var(--settings-control-border-active, var(--shell-border-strong));
    background: var(--shell-drawer-bg, var(--shell-menu-bg, var(--shell-bg-surface)));
}

.shell-drawer__body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    overflow: auto;
    padding: 0 20px 20px;
    scrollbar-width: none;
}

.shell-drawer__body::-webkit-scrollbar {
    display: none;
}

.shell-drawer-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.shell-drawer-list__section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.shell-drawer-list__title {
    margin: 0;
    color: var(--shell-text-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1rem;
}

.shell-drawer-list__items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.shell-drawer-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    gap: 12px;
    padding: 0 12px;
    border: 0.5px solid var(--shell-menu-item-border, transparent);
    border-radius: 10px;
    background: var(--shell-bg-button);
    color: var(--shell-text-secondary);
    box-sizing: border-box;
}

.shell-drawer-list__item-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1rem;
}

.shell-drawer-list__item-meta {
    flex: 0 0 auto;
    color: var(--shell-text-tertiary);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}

@media (max-width: 720px) {
    .shell-drawer {
        top: 8px;
        right: 8px;
        bottom: 8px;
        left: 8px;
        width: auto;
    }
}

.assistant-message__bubble {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
}

.message-composer__attachments {
    display: flex;
    width: var(--assistant-composer-inner-width);
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 auto 6px;
    padding: 0 6px;
    box-sizing: border-box;
}

.message-composer--fluid .message-composer__attachments {
    width: 100%;
}

.message-composer__file-input {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    opacity: 0.01;
    appearance: none;
}

.composer-feedback-stack {
    display: flex;
    width: 100%;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

.composer-staged-items {
    width: 100%;
    min-width: 0;
}

.composer-staged-items__error {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    padding: 7px 8px;
    border: 0.5px solid color-mix(in srgb, var(--danger, #f04438) 45%, var(--assistant-panel-border, transparent));
    border-radius: 8px;
    color: var(--feedback-danger-text, #b42318);
    background: color-mix(in srgb, var(--danger, #f04438) 9%, transparent);
    font-size: 0.76rem;
    overflow-wrap: anywhere;
}

.composer-staged-items__retry {
    flex: 0 0 auto;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    font-weight: 650;
    cursor: pointer;
}

.composer-staged-items__retry:hover,
.composer-staged-items__retry:focus-visible {
    text-decoration: underline;
    outline: none;
}

.composer-staged-items__chips {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 4px;
}

.composer-staged-item {
    display: inline-flex;
    max-width: 100%;
    min-width: 0;
    align-items: center;
    gap: 4px;
    min-height: 19.5px;
    padding: 1.5px 3.9px 1.5px 2.6px;
    border: 0.5px solid transparent;
    border-radius: 4px;
    color: var(--assistant-panel-soft, var(--shell-text-strong));
    background: var(--assistant-inline-chip-bg, var(--shell-bg-button));
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 20.8px;
}

.composer-staged-item__icon {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--assistant-panel-muted, var(--shell-text-muted));
}

.composer-staged-item__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.composer-staged-item__remove {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    opacity: 0;
    transition: opacity 120ms ease, background-color 120ms ease, color 120ms ease;
}

.composer-staged-item:hover .composer-staged-item__remove,
.composer-staged-item:focus-within .composer-staged-item__remove {
    opacity: 1;
}

.qui-file-input--hidden {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    opacity: 0.01;
}

.assistant-attachment-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    color: var(--shell-text-muted);
    cursor: pointer;
}

.assistant-attachment-trigger:hover,
.assistant-attachment-trigger:focus-visible {
    color: var(--shell-text-strong);
    background: var(--shell-surface-hover);
    outline: none;
}

.assistant-attachment-trigger--disabled {
    cursor: not-allowed;
    opacity: 0.48;
}

.attachment-block {
    position: relative;
    display: flex;
    min-width: 0;
    width: 100%;
    min-height: 47px;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border: 0.5px solid var(--assistant-panel-border, var(--shell-border));
    border-radius: 6px;
    background: var(--assistant-composer-bg, var(--shell-bg-raised));
    color: var(--assistant-panel-soft, var(--shell-text-primary));
    box-sizing: border-box;
}

.attachment-block--transcript {
    background: var(--assistant-panel-raised-bg, var(--shell-bg-raised));
}

.attachment-block--composer,
.assistant-message__bubble .attachment-block--transcript {
    background: var(--assistant-panel-hover-bg, var(--shell-bg-hover));
}

.attachment-block--composer.attachment-block--image {
    width: 72px;
    min-height: 72px;
    flex: 0 0 72px;
    padding: 3px;
}

.attachment-block--composer.attachment-block--file {
    width: auto;
    min-width: 176px;
    max-width: min(100%, 320px);
    flex: 0 1 auto;
}

.attachment-block--failed {
    border-color: color-mix(in srgb, var(--danger, #f04438) 45%, var(--assistant-panel-border, transparent));
}

.attachment-block--interactive {
    cursor: pointer;
}

.attachment-block--interactive:focus-visible {
    outline: none;
    border-color: var(--settings-control-focus-border, var(--assistant-panel-border));
    box-shadow: 0 0 0 1px var(--settings-control-focus-shadow, transparent);
}

.attachment-block__file-icon {
    display: inline-flex;
    width: 32px;
    height: 34px;
    flex: 0 0 32px;
    align-items: center;
    justify-content: flex-start;
    border-radius: 0;
    background: transparent;
    color: var(--assistant-panel-soft, var(--shell-text-muted));
}

.attachment-block__content {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0;
    margin-top: -4px;
}

.attachment-block__name {
    overflow: hidden;
    color: var(--assistant-panel-soft, var(--shell-text-primary));
    font-size: 0.9375rem;
    font-weight: 450;
    line-height: 23px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-block__meta {
    overflow: hidden;
    color: var(--assistant-panel-muted, var(--shell-text-secondary));
    font-size: 0.6875rem;
    font-weight: 450;
    line-height: normal;
    margin-top: 2px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.attachment-block__actions,
.attachment-block__image-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
}

.attachment-block__action {
    position: relative;
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--assistant-panel-muted, var(--shell-text-muted));
    cursor: default;
    text-decoration: none;
    transition: background-color 90ms ease-out, color 90ms ease-out;
}

.attachment-block__action:hover,
.attachment-block__action:focus-visible {
    background: var(--assistant-panel-hover-bg, var(--shell-bg-hover));
    color: var(--assistant-panel-text, var(--shell-text-primary));
    outline: none;
}

.attachment-block__image-frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 5px;
}

.attachment-block__image {
    display: block;
    max-height: 280px;
    width: 100%;
    object-fit: contain;
    background: var(--assistant-panel-raised-bg, var(--shell-bg-raised));
}

.attachment-block--composer .attachment-block__image {
    width: 64px;
    height: 64px;
    max-height: 64px;
    object-fit: cover;
}

.attachment-block__image-actions {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 2px;
    border: 0.5px solid var(--assistant-panel-border, var(--shell-border));
    border-radius: 6px;
    background: var(--assistant-panel-bg, var(--shell-bg));
    box-shadow: var(--assistant-panel-shadow, none);
    opacity: 0;
    transition: opacity 90ms ease-out;
}

.attachment-block:hover .attachment-block__image-actions,
.attachment-block:focus-within .attachment-block__image-actions {
    opacity: 1;
}

.attachment-block__progress {
    position: absolute;
    right: 6px;
    bottom: 4px;
    left: 42px;
    height: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--assistant-panel-hover-bg, var(--shell-bg-hover));
}

.attachment-block__progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--shell-accent, #5e6ad2);
}

.chat-message__content {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 8px;
}

.chat-message__attachments {
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 6px;
}

.chat-avatar-message__bubble {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.search-experience {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--shell-bg-surface);
    color: var(--shell-text-primary);
}

.search-experience__header {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    min-height: 79px;
    background: var(--shell-bg-surface);
}

.search-experience__search-row {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 43.5px;
    border-bottom: 0.5px solid var(--shell-border);
    padding: 0 8px;
}

.search-experience__sidebar-toggle {
    margin-right: 2px;
}

.search-experience__search-icon {
    position: absolute;
    left: 17px;
    top: 15px;
    display: inline-flex;
    color: var(--shell-text-secondary);
    pointer-events: none;
}

.search-experience__input {
    display: block;
    width: 100%;
    height: 22px;
    min-width: 0;
    padding: 0 26px 0 32px;
    border: 0;
    margin: 0;
    outline: none;
    overflow: hidden;
    background: transparent;
    color: var(--shell-text-tertiary, var(--shell-text-primary));
    caret-color: var(--shell-text-tertiary, var(--shell-text-primary));
    font-size: 0.9375rem;
    font-weight: 450;
    line-height: 1.375rem;
    letter-spacing: 0;
    white-space: nowrap;
}

.search-experience__input:empty::before {
    content: attr(data-placeholder);
    color: var(--shell-text-secondary);
    opacity: 1;
    pointer-events: none;
}

.search-experience__input br {
    display: none;
}

.search-experience__clear-button {
    position: absolute;
    top: 10.75px;
    right: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 5px;
    color: var(--shell-text-secondary);
}

.search-experience__clear-button:hover,
.search-experience__clear-button:focus-visible {
    color: var(--shell-text-primary);
}

.search-experience__tabs-row {
    display: flex;
    align-items: center;
    min-height: 35.5px;
    padding: 0 8px;
}

.search-experience__tabs-row .pill-tabs {
    min-height: 35.5px;
    margin-top: 0;
}

.search-experience__toolbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.search-experience__toolbar-button {
    background: var(--shell-bg-button);
}

.search-experience__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

.search-experience__results-scroll {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: auto;
    padding: 8px 18px 16px;
    scrollbar-width: none;
}

.search-experience__results-scroll::-webkit-scrollbar {
    display: none;
}

.search-experience__group {
    display: flex;
    flex-direction: column;
}

.search-experience__group + .search-experience__group {
    margin-top: 12px;
}

.search-experience__group-label {
    padding: 0 12px;
    color: var(--shell-text-muted);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1rem;
    text-transform: uppercase;
}

.search-experience__group-items {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.search-experience__result,
.search-experience__recent-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 40px;
    padding: 0 20px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--shell-text-secondary);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: default;
    user-select: none;
}

.search-experience__result {
    color: var(--shell-text-primary);
}

.search-experience__result:hover,
.search-experience__result:focus-visible,
.search-experience__result--active,
.search-experience__recent-item:hover,
.search-experience__recent-item:focus-visible {
    background: var(--shell-bg-active);
    color: var(--shell-text-primary);
    outline: none;
}

.search-experience__result-icon,
.search-experience__recent-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    min-width: 24px;
    margin-right: 12px;
    color: var(--shell-text-secondary);
}

.search-experience__result-leading-label {
    flex: 0 0 120px;
    width: 120px;
    min-width: 0;
    overflow: hidden;
    color: var(--shell-text-secondary);
    font-size: 0.8125rem;
    font-weight: 450;
    line-height: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-experience__result:hover .search-experience__result-icon,
.search-experience__result:focus-visible .search-experience__result-icon,
.search-experience__result--active .search-experience__result-icon {
    color: var(--shell-text-primary);
}

.search-experience__result-copy {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-experience__recent-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.search-experience__result-title,
.search-experience__recent-query {
    overflow: hidden;
    color: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-experience__result-title mark,
.search-experience__result-subtitle mark,
.search-experience__result-copy mark {
    background: transparent;
    color: var(--shell-text-primary);
    font-weight: 650;
}

.search-experience__result-subtitle,
.search-experience__recent-subtitle {
    display: flex;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-experience__result-subtitle-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-experience__result-key {
    color: var(--shell-text-muted);
    flex: 0 0 auto;
}

.search-experience__result:hover .search-experience__result-subtitle,
.search-experience__result:focus-visible .search-experience__result-subtitle,
.search-experience__result--active .search-experience__result-subtitle,
.search-experience__recent-item:hover .search-experience__recent-subtitle,
.search-experience__recent-item:focus-visible .search-experience__recent-subtitle {
    color: var(--shell-text-tertiary, var(--shell-text-primary));
}

.search-experience__result-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    margin-left: auto;
    padding-left: 12px;
    color: var(--shell-text-secondary);
}

.search-experience__metadata {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 170px;
    color: var(--shell-text-secondary);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
    white-space: nowrap;
}

.search-experience__metadata-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-experience__metadata--badge {
    height: 20px;
    padding: 0 7px;
    border: 0.5px solid var(--shell-menu-border);
    border-radius: 999px;
    background: var(--shell-bg-button);
}

.search-experience__metadata--avatar {
    flex: 0 0 auto;
}

.search-experience__result:hover .search-experience__metadata,
.search-experience__result:focus-visible .search-experience__metadata,
.search-experience__result--active .search-experience__metadata {
    color: var(--shell-text-tertiary, var(--shell-text-primary));
}

.search-experience__result-time,
.search-experience__recent-time {
    flex: 0 0 auto;
    margin-left: 16px;
    color: var(--shell-text-muted);
    font-size: 0.75rem;
    font-weight: 450;
    line-height: 1rem;
    white-space: nowrap;
}

.search-experience__recent {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    padding: 18px 20px;
}

.search-experience__recent-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 28px;
    padding: 0 0 8px;
    color: var(--shell-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1rem;
}

.search-experience__recent-clear {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--shell-text-secondary);
    font: inherit;
    cursor: default;
}

.search-experience__recent-clear:hover,
.search-experience__recent-clear:focus-visible {
    color: var(--shell-text-primary);
    outline: none;
}

.search-experience__recent-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.search-experience__state,
.search-experience__loading {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 24px;
    color: var(--shell-text-secondary);
    text-align: center;
}

.search-experience__loading {
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    padding: 16px 24px;
}

.search-experience__state-title {
    color: var(--shell-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
}

.search-experience__state-copy {
    max-width: 360px;
    margin-top: 6px;
    color: var(--shell-text-muted);
    font-size: 0.8125rem;
    line-height: 1.25rem;
}

@media (width <= 720px) {
    .search-experience__header {
        min-height: 83px;
    }

    .search-experience__search-row,
    .search-experience__tabs-row {
        padding-right: 10px;
        padding-left: 10px;
    }

    .search-experience__search-icon {
        left: 47px;
    }

    .search-experience__input {
        padding-left: 34px;
    }

    .search-experience__tabs-row .pill-tabs__items {
        overflow: auto;
        scrollbar-width: none;
    }

    .search-experience__tabs-row .pill-tabs__items::-webkit-scrollbar {
        display: none;
    }

    .search-experience__result {
        align-items: center;
        padding-right: 12px;
        padding-left: 12px;
    }

    .search-experience__result-leading-label {
        flex-basis: 74px;
        width: 74px;
    }

    .search-experience__result-meta {
        display: none;
    }
}