@vobs/ui 0.3.0 → 1.0.0

package/dist/components.css

@@ -1,4756 +0,0 @@
-@layer vobs.components {
-  :where(.kui-dashboard-layout) {
-    min-height: 100vh;
-    display: grid;
-    grid-template-rows: auto minmax(0, 1fr);
-    background: var(--bg-base-default);
-    color: var(--text-default);
-  }
-
-  :where(.kui-auth-layout) {
-    min-height: 100vh;
-    display: grid;
-    place-items: center;
-    padding: var(--spacer-24);
-    background: var(--bg-base-default);
-  }
-
-  :where(.kui-page-frame) {
-    min-height: 0;
-    display: grid;
-    grid-template-rows: auto auto minmax(0, 1fr);
-    gap: var(--spacer-12);
-  }
-
-  :where(.kui-page-header, .kui-page-toolbar) {
-    min-width: 0;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--spacer-12);
-  }
-
-  :where(.kui-product-page-header) {
-    min-width: 0;
-    display: grid;
-    gap: var(--spacer-8);
-    padding: var(--spacer-12);
-    background: var(--bg-base-secondary);
-    border: 1px solid var(--border-neutral-l1);
-    border-radius: var(--radius-8);
-  }
-
-  :where(.kui-page-header-breadcrumb) {
-    min-width: 0;
-    display: flex;
-    align-items: center;
-    gap: var(--spacer-6);
-  }
-
-  :where(.kui-page-header-content) {
-    min-width: 0;
-    display: grid;
-    gap: var(--spacer-4);
-  }
-
-  :where(.kui-page-header-title) {
-    margin: 0;
-    color: var(--text-default);
-    font-size: var(--heading-lg-font-size);
-    line-height: var(--heading-lg-line-height);
-  }
-
-  :where(.kui-page-header-subtitle) {
-    margin: 0;
-    color: var(--text-secondary);
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-  }
-
-  :where(.kui-page-header-actions) {
-    min-width: 0;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    gap: var(--spacer-8);
-  }
-
-  :where(.kui-page-header-tabs) {
-    min-width: 0;
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--spacer-6);
-    color: var(--text-secondary);
-    font-size: var(--body-sm-font-size);
-  }
-
-  :where(.kui-page-header-action) {
-    min-height: 28px;
-    display: inline-flex;
-    align-items: center;
-    padding-inline: var(--spacer-8);
-    color: var(--text-secondary);
-    background: var(--bg-base-tertiary);
-    border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-4);
-  }
-
-  :where(.kui-page-header-action[data-tone='primary']) {
-    color: var(--text-onbrand);
-    background: var(--bg-brand);
-    border-color: var(--border-brand);
-  }
-
-  :where(.kui-page-toolbar) {
-    overflow: hidden;
-  }
-
-  :where(.kui-page-body) {
-    min-height: 0;
-  }
-
-  :where(.kui-page-body[data-mode='contained']) {
-    overflow: hidden;
-  }
-
-  :where(.kui-page-body[data-mode='scroll']) {
-    overflow: auto;
-  }
-
-  :where(.kui-app-shell) {
-    --kui-shell-sidebar-width: 220px;
-    --kui-shell-sidebar-collapsed-width: 48px;
-    height: 100vh;
-    min-height: 100vh;
-    display: grid;
-    grid-template-columns: var(--kui-shell-sidebar-width) minmax(0, 1fr);
-    grid-template-rows: 40px minmax(0, 1fr) 24px;
-    color: var(--text-default);
-    background: var(--bg-base-default);
-    overflow: hidden;
-  }
-
-  :where(.kui-app-shell-topbar) {
-    grid-column: 1 / -1;
-    grid-row: 1;
-  }
-
-  :where(.kui-app-shell-sidebar) {
-    grid-column: 1;
-    grid-row: 2;
-  }
-
-  :where(.kui-app-shell-main) {
-    grid-column: 2;
-    grid-row: 2;
-  }
-
-  :where(.kui-app-shell-statusbar) {
-    grid-column: 1 / -1;
-    grid-row: 3;
-  }
-
-  :where(.kui-app-shell[data-sidebar-mode='collapsed']) {
-    grid-template-columns: var(--kui-shell-sidebar-collapsed-width) minmax(0, 1fr);
-  }
-
-  :where(.kui-app-shell[data-sidebar-mode='hidden']) {
-    grid-template-columns: minmax(0, 1fr);
-  }
-
-  :where(.kui-app-shell[data-sidebar-mode='hidden'] .kui-app-shell-main) {
-    grid-column: 1;
-  }
-
-  :where(.kui-app-shell-sidebar) {
-    min-width: 0;
-    min-height: 0;
-    display: grid;
-    grid-template-rows: auto minmax(0, 1fr) auto;
-    gap: var(--spacer-8);
-    padding: var(--spacer-8);
-    overflow: hidden;
-    background: var(--bg-base-secondary);
-    border-inline-end: 1px solid var(--border-neutral-l1);
-  }
-
-  :where(.kui-app-shell-sidebar[data-sidebar-mode='hidden']) {
-    display: none;
-  }
-
-  :where(.kui-app-shell-brand) {
-    min-height: 32px;
-    display: flex;
-    align-items: center;
-    gap: var(--spacer-8);
-    padding: 0 var(--spacer-8);
-    color: var(--text-default);
-    border-radius: var(--radius-4);
-    font-weight: var(--font-weight-semibold);
-    text-decoration: none;
-  }
-
-  :where(.kui-app-shell-brand-mark) {
-    width: 12px;
-    height: 12px;
-    display: inline-block;
-    background: var(--bg-brand);
-    border-radius: var(--radius-4);
-  }
-
-  :where(.kui-app-shell-brand-name) {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  :where(.kui-app-shell-brand:empty)::before {
-    width: 12px;
-    height: 12px;
-    display: inline-block;
-    content: '';
-    background: var(--bg-brand);
-    border-radius: var(--radius-4);
-    box-shadow: 0 0 18px rgba(50, 240, 140, 0.4);
-  }
-
-  :where(.kui-app-shell-brand:empty)::after {
-    min-width: 0;
-    overflow: hidden;
-    content: attr(data-label);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  :where(.kui-app-shell[data-sidebar-mode='collapsed'] .kui-app-shell-brand-name) {
-    display: none;
-  }
-
-  :where(.kui-app-shell-nav, .kui-app-shell-utility-nav) {
-    min-height: 0;
-    display: grid;
-    align-content: start;
-    gap: var(--spacer-4);
-    overflow: auto;
-  }
-
-  :where(.kui-app-shell-nav-item) {
-    position: relative;
-    min-height: 32px;
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr) auto;
-    align-items: center;
-    gap: var(--spacer-8);
-    padding: 0 var(--spacer-8);
-    color: var(--text-secondary);
-    border-radius: var(--radius-4);
-    text-decoration: none;
-  }
-
-  :where(.kui-app-shell-nav-item-icon) {
-    width: 18px;
-    height: 18px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  :where(.kui-app-shell-nav-item-label) {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  :where(.kui-app-shell-nav-item:empty)::before {
-    min-width: 0;
-    overflow: hidden;
-    content: attr(data-label);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  :where(.kui-app-shell[data-sidebar-mode='collapsed'] .kui-app-shell-nav-item-label) {
-    display: none;
-  }
-
-  :where(.kui-app-shell[data-sidebar-mode='collapsed'] .kui-app-shell-nav-item:empty)::before {
-    text-align: center;
-  }
-
-  :where(.kui-app-shell-nav-item:hover) {
-    color: var(--text-default-hover);
-    background: var(--bg-overlay-l2);
-  }
-
-  :where(.kui-app-shell-nav-item[data-state='active']) {
-    color: var(--text-default);
-    background: var(--bg-overlay-l3);
-  }
-
-  :where(.kui-app-shell-nav-item[data-state='active'])::after {
-    position: absolute;
-    inset-block-start: 50%;
-    inset-inline-start: calc(var(--spacer-8) * -1);
-    width: 3px;
-    height: 30px;
-    content: '';
-    background: var(--bg-brand);
-    border-radius: var(--radius-full);
-    transform: translateY(-50%);
-  }
-
-  :where(.kui-app-shell-nav-item[data-tone='danger']) {
-    color: var(--status-error-default);
-  }
-
-  :where(.kui-app-shell-nav-badge) {
-    min-width: 20px;
-    min-height: 20px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding-inline: var(--spacer-4);
-    color: var(--text-onbrand);
-    background: var(--bg-brand);
-    border-radius: var(--radius-full);
-    font-size: var(--body-sm-font-size);
-  }
-
-  :where(.kui-app-shell-nav-badge)::before {
-    content: attr(data-value);
-  }
-
-  :where(.kui-app-shell-topbar-actions) {
-    min-width: 0;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: var(--spacer-8);
-  }
-
-  :where(.kui-app-shell-icon-button, .kui-app-shell-account-button) {
-    height: 28px;
-    border: 1px solid transparent;
-    color: var(--text-default);
-    background: transparent;
-    border-radius: var(--radius-4);
-  }
-
-  :where(.kui-app-shell-icon-button) {
-    position: relative;
-    width: 28px;
-    display: inline-grid;
-    place-items: center;
-    padding: 0;
-  }
-
-  :where(.kui-app-shell-icon-button:hover, .kui-app-shell-account-button:hover) {
-    color: var(--text-default-hover);
-    background: var(--bg-overlay-l2);
-  }
-
-  :where(.kui-app-shell-icon-button[data-state='pressed']) {
-    color: var(--text-brand);
-    background: var(--bg-overlay-l2);
-    border-color: transparent;
-  }
-
-  :where(.kui-app-shell-icon-button[data-action-id='theme'][data-theme-mode='light']) {
-    color: var(--status-warning-default);
-  }
-
-  :where(.kui-app-shell-icon-button[data-action-id='theme'][data-theme-mode='dark']) {
-    color: var(--text-brand);
-    background: var(--bg-overlay-l2);
-    border-color: transparent;
-  }
-
-  :where(.kui-app-shell-icon-button[data-action-id='accent'])::after {
-    position: absolute;
-    inset-block-end: 3px;
-    inset-inline-end: 3px;
-    width: 8px;
-    height: 8px;
-    content: '';
-    background: var(--kui-app-shell-current-brand, var(--bg-brand));
-    border: 1px solid var(--bg-base-default);
-    border-radius: var(--radius-full);
-  }
-
-  :where(.kui-app-shell-icon) {
-    width: 16px;
-    height: 16px;
-    display: block;
-    flex: none;
-  }
-
-  :where(.kui-app-shell-icon-button-badge) {
-    position: absolute;
-    inset-block-start: -6px;
-    inset-inline-end: -6px;
-    min-width: 17px;
-    height: 17px;
-    display: grid;
-    place-items: center;
-    padding: 0 4px;
-    color: var(--text-onbrand);
-    background: var(--bg-brand);
-    border-radius: var(--radius-full);
-    font-size: var(--body-xs-font-size);
-    font-weight: var(--font-weight-semibold);
-  }
-
-  :where(.kui-app-shell-account-button) {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--spacer-6);
-    max-width: 168px;
-    padding: 0 var(--spacer-8) 0 var(--spacer-4);
-  }
-
-  :where(.kui-app-shell-avatar) {
-    width: 20px;
-    height: 20px;
-    display: inline-grid;
-    place-items: center;
-    color: var(--text-brand);
-    background: var(--bg-brand-popup);
-    border-radius: var(--radius-full);
-  }
-
-  :where(.kui-app-shell-user-name) {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  :where(.kui-app-shell-account) {
-    position: relative;
-    display: inline-flex;
-  }
-
-  :where(.kui-app-shell-account-button[data-state='open']) {
-    color: var(--text-default-hover);
-    background: var(--bg-overlay-l2);
-  }
-
-  :where(.kui-app-shell-account-menu) {
-    position: absolute;
-    inset-block-start: calc(100% + var(--spacer-6));
-    inset-inline-end: 0;
-    z-index: var(--z-index-dropdown);
-    min-width: 188px;
-    padding: var(--spacer-4);
-    color: var(--text-default);
-    background: var(--bg-menu);
-    border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-8);
-    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
-  }
-
-  :where(.kui-app-shell-account-menu[hidden]) {
-    display: none;
-  }
-
-  :where(.kui-app-shell-account-menu-header) {
-    min-width: 0;
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr);
-    align-items: center;
-    gap: var(--spacer-8);
-    min-height: 32px;
-    padding: 0 var(--spacer-8);
-    color: var(--text-secondary);
-    border-bottom: 1px solid var(--border-neutral-l1);
-    margin-block-end: var(--spacer-4);
-  }
-
-  :where(.kui-app-shell-account-menu-label) {
-    overflow: hidden;
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  :where(.kui-app-shell-account-menu-item) {
-    width: 100%;
-    min-height: 30px;
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr);
-    align-items: center;
-    gap: var(--spacer-8);
-    padding: 0 var(--spacer-8);
-    color: var(--text-default);
-    background: transparent;
-    border: 0;
-    border-radius: var(--radius-4);
-    text-align: start;
-    text-decoration: none;
-  }
-
-  :where(.kui-app-shell-account-menu-item:hover) {
-    color: var(--text-default-hover);
-    background: var(--bg-overlay-l2);
-  }
-
-  :where(.kui-app-shell-account-menu-item[aria-disabled='true']) {
-    opacity: 0.48;
-    pointer-events: none;
-  }
-
-  :where(.kui-app-shell-account-menu-item--danger) {
-    color: var(--status-error-default);
-  }
-
-  :where(.kui-app-shell-account-menu-item-label) {
-    overflow: hidden;
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  :where(.kui-app-shell-account-menu-separator) {
-    height: 1px;
-    margin: var(--spacer-4) 0;
-    background: var(--border-neutral-l1);
-  }
-
-  :where(.kui-app-shell-language) {
-    position: relative;
-    display: inline-flex;
-  }
-
-  :where(.kui-app-shell-language > .kui-app-shell-icon-button[data-state='open']) {
-    color: var(--text-default-hover);
-    background: var(--bg-overlay-l2);
-  }
-
-  :where(.kui-app-shell-language-menu) {
-    position: absolute;
-    inset-block-start: calc(100% + var(--spacer-6));
-    inset-inline-end: 0;
-    z-index: var(--z-index-dropdown);
-    min-width: 148px;
-    display: grid;
-    gap: var(--spacer-2);
-    padding: var(--spacer-4);
-    color: var(--text-default);
-    background: var(--bg-menu);
-    border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-8);
-    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
-  }
-
-  :where(.kui-app-shell-language-menu[hidden]) {
-    display: none;
-  }
-
-  :where(.kui-app-shell-language-option) {
-    width: 100%;
-    min-height: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--spacer-8);
-    padding: 0 var(--spacer-8);
-    color: var(--text-default);
-    background: transparent;
-    border: 0;
-    border-radius: var(--radius-4);
-    text-align: start;
-  }
-
-  :where(.kui-app-shell-language-option:hover) {
-    color: var(--text-default-hover);
-    background: var(--bg-overlay-l2);
-  }
-
-  :where(.kui-app-shell-language-option[data-state='selected']) {
-    color: var(--text-brand);
-    background: var(--bg-brand-popup);
-  }
-
-  :where(.kui-app-shell-language-option[data-state='selected'])::after {
-    content: '\2713';
-    color: var(--icon-brand);
-    font-size: var(--body-sm-font-size);
-  }
-
-  :where(.kui-app-shell-main) {
-    min-width: 0;
-    min-height: 0;
-    display: grid;
-    grid-template-rows: auto minmax(0, 1fr);
-    overflow: hidden;
-  }
-
-  :where(.kui-app-shell-topbar) {
-    min-width: 0;
-    min-height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--spacer-8);
-    padding: 0 var(--spacer-12);
-    background: var(--bg-base-secondary);
-    border-bottom: 1px solid var(--border-neutral-l1);
-  }
-
-  :where(.kui-app-shell-command-trigger) {
-    min-height: 28px;
-    min-width: min(320px, 42vw);
-    display: inline-flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--spacer-12);
-    padding: 0 var(--spacer-8);
-    color: var(--text-secondary);
-    background: var(--bg-base-secondary);
-    border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-4);
-  }
-
-  :where(.kui-app-shell-command-trigger)::before {
-    content: attr(data-label);
-  }
-
-  :where(.kui-app-shell-command-trigger)::after {
-    content: attr(data-shortcut);
-    color: var(--text-secondary);
-    font-family: var(--font-family-mono);
-    font-size: var(--body-sm-font-size);
-  }
-
-  :where(.kui-app-shell-action) {
-    min-height: 28px;
-    display: inline-flex;
-    align-items: center;
-    padding-inline: var(--spacer-8);
-    color: var(--text-secondary);
-    background: transparent;
-    border: 1px solid transparent;
-    border-radius: var(--radius-4);
-  }
-
-  :where(.kui-app-shell-action)::before {
-    content: attr(data-label);
-  }
-
-  :where(.kui-app-shell-action[data-state='pressed']) {
-    color: var(--text-brand);
-    background: var(--bg-overlay-l2);
-    border-color: transparent;
-  }
-
-  :where(.kui-app-shell-page-frame) {
-    min-width: 0;
-    min-height: 0;
-    display: grid;
-    grid-template-rows: auto auto minmax(0, 1fr);
-    gap: var(--spacer-8);
-    padding: var(--spacer-16);
-    overflow: hidden;
-  }
-
-  :where(.kui-app-shell-page-header, .kui-app-shell-page-toolbar) {
-    min-width: 0;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--spacer-12);
-  }
-
-  :where(.kui-app-shell-page-header[hidden]) {
-    display: none;
-  }
-
-  .kui-app-shell-page-frame:has(.kui-app-shell-page-header[hidden]) {
-    grid-template-rows: auto minmax(0, 1fr);
-    padding-block-start: 0;
-  }
-
-  .kui-app-shell-page-frame:has(.kui-app-shell-page-toolbar:empty) {
-    grid-template-rows: auto minmax(0, 1fr);
-  }
-
-  .kui-app-shell-page-frame:has(.kui-app-shell-page-header[hidden]):has(
-      .kui-app-shell-page-toolbar:empty
-    ) {
-    grid-template-rows: minmax(0, 1fr);
-  }
-
-  :where(.kui-app-shell-page-toolbar:empty) {
-    display: none;
-  }
-
-  :where(.kui-app-shell-page-heading) {
-    min-width: 0;
-    display: grid;
-    gap: var(--spacer-4);
-  }
-
-  :where(.kui-app-shell-page-kicker) {
-    margin: 0;
-    color: var(--text-secondary);
-    font-size: var(--body-xs-font-size);
-    line-height: var(--body-xs-line-height);
-    font-weight: var(--font-weight-semibold);
-    letter-spacing: 0;
-    text-transform: uppercase;
-  }
-
-  :where(.kui-app-shell-page-title) {
-    margin: 0;
-    color: var(--text-default);
-    font-size: var(--heading-md-font-size);
-    line-height: var(--heading-md-line-height);
-  }
-
-  :where(.kui-app-shell-page-title:empty)::before {
-    content: attr(data-title);
-  }
-
-  :where(.kui-app-shell-page-subtitle) {
-    margin: 0;
-    color: var(--text-secondary);
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-  }
-
-  :where(.kui-app-shell-page-subtitle:empty)::before {
-    content: attr(data-subtitle);
-  }
-
-  :where(.kui-app-shell-page-body) {
-    min-width: 0;
-    min-height: 0;
-    background: var(--bg-base-secondary);
-    border: 1px solid var(--border-neutral-l1);
-    border-radius: var(--radius-8);
-  }
-
-  :where(.kui-app-shell-page-body[data-mode='contained']) {
-    overflow: hidden;
-  }
-
-  :where(.kui-app-shell-page-body[data-mode='scroll']) {
-    overflow: auto;
-  }
-
-  :where(.kui-app-shell-statusbar) {
-    min-height: 24px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--spacer-8);
-    padding-inline: var(--spacer-8);
-    color: var(--text-secondary);
-    background: var(--bg-base-secondary);
-    border-top: 1px solid var(--border-neutral-l1);
-    font-size: var(--body-xs-font-size);
-    line-height: var(--body-xs-line-height);
-  }
-
-  :where(.kui-app-shell-statusbar[data-state='pending']) {
-    color: var(--status-warning-default);
-  }
-
-  :where(.kui-app-shell-statusbar[data-state='pending'] .kui-app-shell-status-icon) {
-    color: var(--status-warning-default);
-  }
-
-  :where(.kui-app-shell-status, .kui-app-shell-status-icon) {
-    min-width: 0;
-    display: inline-flex;
-    align-items: center;
-    gap: var(--spacer-6);
-  }
-
-  :where(.kui-app-shell-status-text, .kui-app-shell-status-version) {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  :where(.kui-form) {
-    display: grid;
-    gap: var(--spacer-16);
-  }
-
-  :where(.kui-form[data-state='submitting']) {
-    opacity: 0.72;
-  }
-
-  :where(.kui-form-field) {
-    display: grid;
-    gap: var(--spacer-6);
-  }
-
-  :where(.kui-form-label) {
-    font-weight: var(--font-weight-medium);
-    color: var(--text-default);
-  }
-
-  :where(.kui-form-description) {
-    margin: 0;
-    color: var(--text-secondary);
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-  }
-
-  :where(.kui-form-error) {
-    margin: 0;
-    color: var(--status-error-default);
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-  }
-
-  :where(.kui-slider) {
-    --kui-slider-start: 0%;
-    --kui-slider-end: 0%;
-    min-width: 0;
-    display: grid;
-    gap: var(--spacer-8);
-    color: var(--text-default);
-  }
-
-  :where(.kui-slider-track) {
-    position: relative;
-    height: 6px;
-    overflow: hidden;
-    background: var(--bg-base-tertiary);
-    border-radius: var(--radius-full);
-  }
-
-  :where(.kui-slider-range) {
-    position: absolute;
-    inset-block: 0;
-    inset-inline-start: var(--kui-slider-start);
-    width: calc(var(--kui-slider-end) - var(--kui-slider-start));
-    min-width: 6px;
-    background: var(--bg-brand);
-    border-radius: var(--radius-full);
-  }
-
-  :where(.kui-slider[data-mode='single'] .kui-slider-range) {
-    inset-inline-start: 0;
-    width: var(--kui-slider-end);
-  }
-
-  :where(.kui-slider-thumb) {
-    width: 100%;
-    min-height: 24px;
-    accent-color: var(--bg-brand);
-  }
-
-  :where(.kui-slider-mark) {
-    position: relative;
-    min-height: 16px;
-    color: var(--text-secondary);
-    font-size: var(--body-sm-font-size);
-  }
-
-  :where(.kui-slider-mark)::before {
-    position: absolute;
-    inset-inline-start: var(--kui-slider-mark);
-    content: attr(data-label);
-    transform: translateX(-50%);
-  }
-
-  :where(.kui-slider[data-orientation='vertical']) {
-    min-height: 180px;
-    grid-template-columns: auto minmax(0, 1fr);
-    align-items: stretch;
-  }
-
-  :where(.kui-slider[data-orientation='vertical'] .kui-slider-track) {
-    width: 6px;
-    height: 100%;
-  }
-
-  :where(.kui-segmented) {
-    min-width: 0;
-    display: inline-flex;
-    align-items: center;
-    gap: var(--spacer-2);
-    padding: var(--spacer-2);
-    background: var(--bg-base-tertiary);
-    border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-8);
-  }
-
-  :where(.kui-segmented[data-orientation='vertical']) {
-    display: inline-grid;
-  }
-
-  :where(.kui-segmented[data-segmented-wrap-state='wrapped']) {
-    flex-wrap: wrap;
-  }
-
-  :where(.kui-segmented-item) {
-    min-height: 30px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--spacer-6);
-    padding-inline: var(--spacer-8);
-    color: var(--text-secondary);
-    background: transparent;
-    border: 1px solid transparent;
-    border-radius: var(--radius-4);
-  }
-
-  :where(.kui-segmented-item[hidden]) {
-    display: none;
-  }
-
-  :where(.kui-segmented-item)::before {
-    content: attr(data-label);
-  }
-
-  :where(.kui-segmented-item[data-state='checked']) {
-    color: var(--text-onbrand);
-    background: var(--bg-brand);
-    border-color: var(--border-brand);
-  }
-
-  :where(.kui-segmented-icon) {
-    width: 12px;
-    height: 12px;
-    display: inline-block;
-    background: currentColor;
-    border-radius: var(--radius-4);
-  }
-
-  :where(.kui-radio-group, .kui-checkbox-group) {
-    min-width: 0;
-    display: grid;
-    gap: var(--spacer-8);
-    padding: var(--spacer-12);
-    color: var(--text-default);
-    background: var(--bg-base-secondary);
-    border: 1px solid var(--border-neutral-l1);
-    border-radius: var(--radius-8);
-  }
-
-  :where(
-    .kui-radio-group[data-orientation='horizontal'],
-    .kui-checkbox-group[data-orientation='horizontal']
-  ) {
-    grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
-  }
-
-  :where(.kui-radio-group-legend, .kui-checkbox-group-legend) {
-    padding: 0;
-    color: var(--text-default);
-    font-weight: var(--font-weight-semibold);
-  }
-
-  :where(.kui-radio-group-legend)::before,
-  :where(.kui-checkbox-group-legend)::before {
-    content: attr(data-label);
-  }
-
-  :where(.kui-radio-group-option, .kui-checkbox-group-option) {
-    min-width: 0;
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr);
-    align-items: start;
-    gap: var(--spacer-8);
-    padding: var(--spacer-8);
-    color: var(--text-default);
-    background: var(--bg-base-tertiary);
-    border: 1px solid var(--border-neutral-l1);
-    border-radius: var(--radius-4);
-  }
-
-  :where(
-    .kui-radio-group-option[data-state='checked'],
-    .kui-checkbox-group-option[data-state='checked']
-  ) {
-    border-color: var(--border-brand);
-    box-shadow: inset 0 0 0 1px var(--border-brand);
-  }
-
-  :where(
-    .kui-radio-group-option[data-card-option='true'][data-selected-emphasis='true'],
-    .kui-checkbox-group-option[data-card-option='true'][data-selected-emphasis='true']
-  ) {
-    background: var(--bg-brand-popup);
-  }
-
-  :where(
-    .kui-radio-group-option[data-card-option='true'][data-disabled-emphasis='true'],
-    .kui-checkbox-group-option[data-card-option='true'][data-disabled-emphasis='true']
-  ) {
-    opacity: 0.56;
-  }
-
-  :where(.kui-radio-group-option)::after,
-  :where(.kui-checkbox-group-option)::after {
-    min-width: 0;
-    content: attr(data-label);
-  }
-
-  :where(.kui-radio-group-description, .kui-checkbox-group-description) {
-    grid-column: 2;
-    color: var(--text-secondary);
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-  }
-
-  :where(.kui-radio-group-description)::before,
-  :where(.kui-checkbox-group-description)::before {
-    content: attr(data-description);
-  }
-
-  :where(.kui-error-summary) {
-    padding: var(--spacer-12);
-    color: var(--text-default);
-    background: var(--status-error-surface-l1);
-    border: 1px solid var(--status-error-default);
-    border-radius: var(--radius-4);
-  }
-
-  :where(.kui-error-summary-title) {
-    margin: 0 0 var(--spacer-8);
-    font-size: var(--heading-sm-font-size);
-    line-height: var(--heading-sm-line-height);
-  }
-
-  :where(.kui-overlay-root) {
-    position: fixed;
-    inset: 0;
-    z-index: var(--z-index-modal);
-    display: grid;
-    place-items: center;
-    pointer-events: none;
-  }
-
-  :where(.kui-overlay-root[hidden]) {
-    display: none;
-  }
-
-  :where(.kui-overlay-root[data-backdrop='true']) {
-    padding: var(--spacer-12);
-    background: rgba(0, 0, 0, 0.48);
-    pointer-events: auto;
-  }
-
-  :where(.kui-page-state) {
-    min-height: 220px;
-    display: grid;
-    place-items: center;
-    align-content: center;
-    gap: var(--spacer-10);
-    padding: var(--spacer-24);
-    color: var(--text-default);
-    background: var(--bg-base-secondary);
-    border: 1px solid var(--border-neutral-l1);
-    border-radius: var(--radius-8);
-    text-align: center;
-  }
-
-  :where(.kui-page-state[hidden]) {
-    display: none;
-  }
-
-  :where(.kui-page-state-mark) {
-    width: 32px;
-    height: 32px;
-    display: inline-grid;
-    place-items: center;
-    color: var(--text-brand);
-    background: var(--bg-brand-popup);
-    border-radius: var(--radius-full);
-    font-size: var(--body-xs-font-size);
-    font-weight: var(--font-weight-semibold);
-  }
-
-  :where(.kui-page-state[data-state='error'] .kui-page-state-mark) {
-    color: var(--status-error-default);
-    background: var(--status-error-surface-l1);
-  }
-
-  :where(.kui-page-state p, .kui-page-state h2) {
-    margin: 0;
-  }
-
-  :where(.kui-page-state-error) {
-    display: grid;
-    justify-items: center;
-    gap: var(--spacer-8);
-  }
-
-  :where(.kui-page-state-error h2) {
-    font-size: var(--heading-sm-font-size);
-    line-height: var(--heading-sm-line-height);
-  }
-
-  :where(.kui-page-state-error p, .kui-page-state-loading, .kui-page-state-message) {
-    max-width: 520px;
-    color: var(--text-secondary);
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-  }
-
-  :where(.kui-page-state-message) {
-    color: var(--status-error-default);
-  }
-
-  :where(.kui-overlay-backdrop) {
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, 0.48);
-    pointer-events: auto;
-  }
-
-  :where(.kui-dialog, .kui-popover, .kui-dropdown, .kui-tooltip) {
-    position: relative;
-    z-index: 1;
-    color: var(--text-default);
-    background: var(--bg-base-secondary);
-    border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-8);
-    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
-    pointer-events: auto;
-  }
-
-  :where(.kui-dialog) {
-    width: min(520px, calc(100vw - 32px));
-    max-height: calc(100vh - 32px);
-    padding: var(--spacer-16);
-    overflow: auto;
-  }
-
-  :where(.kui-dialog[data-size='sm']) {
-    width: min(420px, calc(100vw - 32px));
-  }
-
-  :where(.kui-dialog[data-size='lg']) {
-    width: min(720px, calc(100vw - 32px));
-  }
-
-  :where(.kui-dialog-header) {
-    min-width: 0;
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto;
-    gap: var(--spacer-8);
-    align-items: start;
-    margin-block-end: var(--spacer-12);
-  }
-
-  :where(.kui-dialog-title, .kui-popover-title, .kui-popconfirm-title) {
-    margin: 0;
-    color: var(--text-default);
-    font-size: var(--heading-sm-font-size);
-    line-height: var(--heading-sm-line-height);
-  }
-
-  :where(.kui-dialog-description, .kui-popconfirm-description) {
-    margin: var(--spacer-4) 0 0;
-    color: var(--text-secondary);
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-  }
-
-  :where(.kui-dialog-close) {
-    grid-column: 2;
-    grid-row: 1 / span 2;
-  }
-
-  :where(.kui-dialog-close)::before {
-    content: 'x';
-  }
-
-  :where(.kui-dialog-body, .kui-popover-body) {
-    min-width: 0;
-    color: var(--text-default);
-  }
-
-  :where(.kui-dialog-footer, .kui-popconfirm-footer) {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    gap: var(--spacer-8);
-    margin-block-start: var(--spacer-16);
-  }
-
-  :where(.kui-dialog-action--danger, .kui-popconfirm-confirm--danger) {
-    color: var(--status-error-default);
-    border-color: var(--status-error-default);
-  }
-
-  :where(.kui-popover, .kui-dropdown, .kui-tooltip) {
-    max-width: min(320px, calc(100vw - 24px));
-    padding: var(--spacer-8);
-  }
-
-  :where(.kui-popover, .kui-dropdown) {
-    min-width: 220px;
-  }
-
-  :where(.kui-popover-header, .kui-popover-footer) {
-    padding-block: var(--spacer-4);
-  }
-
-  :where(.kui-tooltip) {
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-    background: var(--bg-tooltip);
-  }
-
-  :where(.kui-overlay-arrow) {
-    position: absolute;
-    width: 8px;
-    height: 8px;
-    z-index: -1;
-    background: inherit;
-    border: inherit;
-    transform: rotate(45deg);
-  }
-
-  :where(.kui-overlay-arrow[data-placement^='top']) {
-    inset-block-end: -5px;
-    inset-inline-start: var(--spacer-16);
-  }
-
-  :where(.kui-overlay-arrow[data-placement^='bottom']) {
-    inset-block-start: -5px;
-    inset-inline-start: var(--spacer-16);
-  }
-
-  :where(.kui-overlay-arrow[data-placement='left']) {
-    inset-inline-end: -5px;
-    inset-block-start: var(--spacer-12);
-  }
-
-  :where(.kui-overlay-arrow[data-placement='right']) {
-    inset-inline-start: -5px;
-    inset-block-start: var(--spacer-12);
-  }
-
-  :where(.kui-dropdown, .kui-context-menu) {
-    padding: var(--spacer-4);
-  }
-
-  :where(.kui-context-menu) {
-    position: fixed;
-    inset-block-start: var(--kui-context-menu-y, 50%);
-    inset-inline-start: var(--kui-context-menu-x, 50%);
-  }
-
-  :where(.kui-dropdown-item) {
-    min-height: 32px;
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto;
-    align-items: center;
-    gap: var(--spacer-8);
-    padding: 0 var(--spacer-8);
-    color: var(--text-default);
-    border-radius: var(--radius-4);
-  }
-
-  :where(.kui-dropdown-item)::before {
-    min-width: 0;
-    overflow: hidden;
-    content: attr(data-label);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  :where(.kui-dropdown-item[data-shortcut])::after {
-    content: attr(data-shortcut);
-    color: var(--text-secondary);
-    font-family: var(--font-family-mono);
-    font-size: var(--body-sm-font-size);
-  }
-
-  :where(.kui-dropdown-item[data-kind='separator']) {
-    min-height: 1px;
-    padding: 0;
-    margin-block: var(--spacer-4);
-    background: var(--border-neutral-l1);
-  }
-
-  :where(.kui-dropdown-item[data-kind='separator'])::before,
-  :where(.kui-dropdown-item[data-kind='separator'])::after {
-    content: none;
-  }
-
-  :where(.kui-dropdown-item:hover, .kui-dropdown-item[data-state='active']) {
-    color: var(--text-default-hover);
-    background: var(--bg-overlay-l2);
-  }
-
-  :where(.kui-dropdown-item[data-state='checked']) {
-    color: var(--text-brand);
-  }
-
-  :where(.kui-dropdown-item[data-state='checked'])::before {
-    content: '[x] ' attr(data-label);
-  }
-
-  :where(.kui-dropdown-item--danger) {
-    color: var(--status-error-default);
-  }
-
-  :where(.kui-popconfirm) {
-    display: grid;
-    gap: var(--spacer-8);
-  }
-
-  :where(.kui-popconfirm[data-tone='danger']) {
-    border-color: var(--status-error-default);
-  }
-
-  :where(.kui-drawer) {
-    position: fixed;
-    inset-block: 0;
-    width: min(360px, calc(100vw - 32px));
-    max-height: none;
-    border-radius: 0;
-  }
-
-  :where(.kui-drawer--right) {
-    right: 0;
-  }
-
-  :where(.kui-drawer--left) {
-    left: 0;
-  }
-
-  :where(.kui-drawer--bottom) {
-    inset-block-start: auto;
-    inset-inline: 0;
-    width: auto;
-    height: min(60vh, 480px);
-  }
-
-  :where(.kui-alert, .kui-message, .kui-toast) {
-    padding: var(--spacer-12);
-    color: var(--text-default);
-    background: var(--bg-base-secondary);
-    border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-4);
-  }
-
-  :where(.kui-alert, .kui-message, .kui-toast, .kui-notification) {
-    min-width: 0;
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr) auto auto;
-    align-items: start;
-    gap: var(--spacer-8);
-  }
-
-  :where(.kui-notification) {
-    width: min(380px, calc(100vw - 32px));
-    padding: var(--spacer-12);
-    color: var(--text-default);
-    background: var(--bg-base-secondary);
-    border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-8);
-    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
-    pointer-events: auto;
-  }
-
-  :where(.kui-alert-icon, .kui-message-icon, .kui-toast-icon, .kui-notification-icon) {
-    width: 18px;
-    height: 18px;
-    display: inline-grid;
-    place-items: center;
-    color: var(--text-secondary);
-  }
-
-  :where(.kui-alert-icon, .kui-message-icon, .kui-toast-icon, .kui-notification-icon)::before {
-    content: 'i';
-    font-weight: var(--font-weight-semibold);
-  }
-
-  :where(
-    .kui-alert-icon[data-status='success'],
-    .kui-message-icon[data-status='success'],
-    .kui-toast-icon[data-status='success'],
-    .kui-notification-icon[data-status='success']
-  ) {
-    color: var(--status-success-default);
-  }
-
-  :where(
-    .kui-alert-icon[data-status='warning'],
-    .kui-message-icon[data-status='warning'],
-    .kui-toast-icon[data-status='warning'],
-    .kui-notification-icon[data-status='warning']
-  ) {
-    color: var(--status-warning-default);
-  }
-
-  :where(
-    .kui-alert-icon[data-status='error'],
-    .kui-message-icon[data-status='error'],
-    .kui-toast-icon[data-status='error'],
-    .kui-notification-icon[data-status='error']
-  ) {
-    color: var(--status-error-default);
-  }
-
-  :where(.kui-alert-content, .kui-message-content, .kui-toast-content, .kui-notification-content) {
-    min-width: 0;
-    display: grid;
-    gap: var(--spacer-2);
-  }
-
-  :where(.kui-alert-title, .kui-message-title, .kui-toast-title, .kui-notification-title) {
-    min-width: 0;
-    overflow: hidden;
-    color: var(--text-default);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  :where(
-    .kui-alert-description,
-    .kui-message-description,
-    .kui-toast-description,
-    .kui-notification-description
-  ) {
-    margin: 0;
-    color: var(--text-secondary);
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-  }
-
-  :where(.kui-alert-close, .kui-message-close, .kui-toast-close, .kui-notification-close)::before {
-    content: 'x';
-  }
-
-  :where(.kui-alert-action, .kui-message-action, .kui-toast-action, .kui-notification-action) {
-    white-space: nowrap;
-  }
-
-  :where(
-    .kui-alert[data-status='success'],
-    .kui-message[data-status='success'],
-    .kui-toast[data-status='success'],
-    .kui-notification[data-status='success']
-  ) {
-    border-color: var(--status-success-default);
-    background: var(--status-success-surface-l1);
-  }
-
-  :where(
-    .kui-alert[data-status='warning'],
-    .kui-message[data-status='warning'],
-    .kui-toast[data-status='warning'],
-    .kui-notification[data-status='warning']
-  ) {
-    border-color: var(--status-warning-default);
-    background: var(--status-warning-surface-l1);
-  }
-
-  :where(
-    .kui-alert[data-status='error'],
-    .kui-message[data-status='error'],
-    .kui-toast[data-status='error'],
-    .kui-notification[data-status='error']
-  ) {
-    border-color: var(--status-error-default);
-    background: var(--status-error-surface-l1);
-  }
-
-  :where(.kui-toast-region) {
-    position: fixed;
-    z-index: var(--z-index-notification);
-    display: grid;
-    gap: var(--spacer-8);
-    pointer-events: none;
-  }
-
-  :where(.kui-toast-region[data-placement='top-end']) {
-    top: var(--spacer-16);
-    right: var(--spacer-16);
-  }
-
-  :where(.kui-toast-region[data-placement='top-center']) {
-    top: var(--spacer-16);
-    left: 50%;
-    transform: translateX(-50%);
-  }
-
-  :where(.kui-toast-region[data-placement='bottom-end']) {
-    right: var(--spacer-16);
-    bottom: var(--spacer-16);
-  }
-
-  :where(.kui-toast) {
-    width: min(360px, calc(100vw - 32px));
-    pointer-events: auto;
-  }
-
-  :where(.kui-tabs) {
-    display: flex;
-    gap: var(--spacer-4);
-    border-bottom: 1px solid var(--border-neutral-l1);
-  }
-
-  :where(.kui-tab) {
-    min-height: 32px;
-    padding: 0 var(--spacer-12);
-    color: var(--text-secondary);
-    background: transparent;
-    border: 0;
-    border-bottom: 2px solid transparent;
-  }
-
-  :where(.kui-tab[data-state='active']) {
-    color: var(--text-default);
-    border-bottom-color: var(--border-brand);
-  }
-
-  :where(.kui-tabpanel) {
-    min-width: 0;
-  }
-
-  :where(.kui-breadcrumb-list) {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--spacer-6);
-    padding: 0;
-    margin: 0;
-    list-style: none;
-  }
-
-  :where(.kui-breadcrumb-item[data-state='current']) {
-    color: var(--text-secondary);
-  }
-
-  :where(.kui-menu) {
-    min-width: 180px;
-    display: grid;
-    gap: var(--spacer-2);
-    padding: var(--spacer-4);
-    background: var(--bg-base-secondary);
-    border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-4);
-  }
-
-  :where(.kui-menu-item) {
-    min-height: 32px;
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto auto;
-    align-items: center;
-    gap: var(--spacer-8);
-    padding: 0 var(--spacer-8);
-    color: var(--text-default);
-    border-radius: var(--radius-4);
-  }
-
-  :where(.kui-menu-item)::before,
-  :where(.kui-menu-section)::before {
-    min-width: 0;
-    overflow: hidden;
-    content: attr(data-label);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  :where(.kui-menu-section) {
-    min-height: 24px;
-    display: flex;
-    align-items: center;
-    padding: var(--spacer-4) var(--spacer-8) 0;
-    color: var(--text-secondary);
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-  }
-
-  :where(.kui-menu-item[data-shortcut])::after {
-    content: attr(data-shortcut);
-    color: var(--text-secondary);
-    font-family: var(--font-family-mono);
-    font-size: var(--body-sm-font-size);
-  }
-
-  :where(.kui-menu-item[data-kind='submenu'])::after {
-    content: '>';
-    color: var(--icon-secondary);
-  }
-
-  :where(.kui-menu-item[data-kind='checkbox'][aria-checked='true'])::before {
-    content: '[x] ' attr(data-label);
-  }
-
-  :where(.kui-menu-item[data-kind='radio'][aria-checked='true'])::before {
-    content: '(*) ' attr(data-label);
-  }
-
-  :where(.kui-menu-item[data-kind='separator']) {
-    min-height: 1px;
-    padding: 0;
-    margin-block: var(--spacer-4);
-    background: var(--border-neutral-l1);
-  }
-
-  :where(.kui-menu-item[data-kind='separator'])::before,
-  :where(.kui-menu-item[data-kind='separator'])::after {
-    content: none;
-  }
-
-  :where(.kui-menu-item[data-state='active']) {
-    background: var(--bg-brand-popup);
-  }
-
-  :where(.kui-menu-item[data-state='checked']) {
-    color: var(--text-brand);
-  }
-
-  :where(.kui-menu-item--danger) {
-    color: var(--status-error-default);
-  }
-
-  :where(.kui-menu-item-shortcut) {
-    font-family: var(--font-family-mono);
-    font-size: var(--body-sm-font-size);
-  }
-
-  :where(.kui-drawer--sm) {
-    width: min(320px, calc(100vw - 32px));
-  }
-
-  :where(.kui-drawer--lg) {
-    width: min(520px, calc(100vw - 32px));
-  }
-
-  :where(.kui-drawer--full) {
-    width: min(100vw, 960px);
-  }
-
-  :where(.kui-drawer--bottom.kui-drawer--sm) {
-    height: min(42vh, 320px);
-  }
-
-  :where(.kui-drawer--bottom.kui-drawer--lg) {
-    height: min(72vh, 640px);
-  }
-
-  :where(.kui-drawer--bottom.kui-drawer--full) {
-    height: min(100vh, 760px);
-  }
-
-  :where(.kui-drawer[data-long-content='true'] .kui-dialog-body) {
-    min-height: 0;
-    overflow: auto;
-  }
-
-  :where(.kui-steps) {
-    min-width: 0;
-    color: var(--text-default);
-  }
-
-  :where(.kui-steps-list) {
-    display: flex;
-    gap: var(--spacer-12);
-    padding: 0;
-    margin: 0;
-    list-style: none;
-  }
-
-  :where(.kui-steps[data-orientation='vertical'] .kui-steps-list) {
-    display: grid;
-    gap: var(--spacer-8);
-  }
-
-  :where(.kui-step) {
-    min-width: 0;
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr);
-    gap: var(--spacer-8);
-    align-items: start;
-    color: var(--text-secondary);
-  }
-
-  :where(.kui-step[data-status='complete']) {
-    color: var(--status-success-default);
-  }
-
-  :where(.kui-step[data-status='current']) {
-    color: var(--text-brand);
-  }
-
-  :where(.kui-step[data-status='error']) {
-    color: var(--status-error-default);
-  }
-
-  :where(.kui-step-indicator) {
-    width: 24px;
-    height: 24px;
-    display: inline-grid;
-    place-items: center;
-    color: currentColor;
-    background: var(--bg-base-tertiary);
-    border: 1px solid currentColor;
-    border-radius: var(--radius-full);
-    font-size: var(--body-sm-font-size);
-  }
-
-  :where(.kui-step-indicator)::before {
-    content: attr(data-index);
-  }
-
-  :where(.kui-step-trigger) {
-    min-width: 0;
-    color: currentColor;
-    background: transparent;
-    border: 0;
-    font: inherit;
-    text-align: start;
-    text-decoration: none;
-  }
-
-  :where(.kui-step-trigger)::before {
-    min-width: 0;
-    overflow: hidden;
-    content: attr(data-label);
-    text-overflow: ellipsis;
-  }
-
-  :where(.kui-step-trigger[data-clickable='true']) {
-    cursor: pointer;
-  }
-
-  :where(.kui-step-description) {
-    grid-column: 2;
-    margin: calc(var(--spacer-4) * -1) 0 0;
-    color: var(--text-secondary);
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-  }
-
-  :where(.kui-step-description)::before {
-    content: attr(data-description);
-  }
-
-  :where(.kui-collapse) {
-    min-width: 0;
-    display: grid;
-    gap: var(--spacer-6);
-  }
-
-  :where(.kui-collapse-item) {
-    min-width: 0;
-    overflow: hidden;
-    color: var(--text-default);
-    background: var(--bg-base-secondary);
-    border: 1px solid var(--border-neutral-l1);
-    border-radius: var(--radius-4);
-  }
-
-  :where(.kui-collapse-item[data-state='open']) {
-    border-color: var(--border-neutral-l2);
-  }
-
-  :where(.kui-collapse-trigger) {
-    min-height: 36px;
-    width: 100%;
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto;
-    align-items: center;
-    gap: var(--spacer-8);
-    padding: 0 var(--spacer-8);
-    color: var(--text-default);
-    background: transparent;
-    border: 0;
-    text-align: start;
-  }
-
-  :where(.kui-collapse-trigger)::before {
-    min-width: 0;
-    overflow: hidden;
-    content: attr(data-title);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  :where(.kui-collapse-trigger)::after {
-    content: '>';
-    color: var(--icon-secondary);
-    transition: transform var(--transition-fast);
-  }
-
-  :where(.kui-collapse-trigger[aria-expanded='true'])::after {
-    transform: rotate(90deg);
-  }
-
-  :where(.kui-collapse-panel) {
-    padding: 0 var(--spacer-8) var(--spacer-8);
-    color: var(--text-secondary);
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-  }
-
-  :where(.kui-collapse-panel)::before {
-    content: attr(data-description);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    :where(.kui-collapse-trigger)::after {
-      transition: none;
-    }
-  }
-
-  :where(.kui-command-palette) {
-    width: min(720px, calc(100vw - 32px));
-    max-height: min(640px, calc(100vh - 32px));
-    display: grid;
-    grid-template-rows: auto minmax(0, 1fr);
-    gap: var(--spacer-8);
-    padding: var(--spacer-8);
-    color: var(--text-default);
-    background: var(--bg-base-secondary);
-    border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-8);
-    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.4);
-  }
-
-  :where(.kui-command-palette-input) {
-    min-height: 40px;
-    width: 100%;
-    padding: 0 var(--spacer-12);
-    color: var(--text-default);
-    background: var(--bg-base-tertiary);
-    border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-4);
-  }
-
-  :where(.kui-command-palette-input:focus-visible) {
-    outline: 1px solid var(--border-brand);
-  }
-
-  :where(.kui-command-palette-listbox) {
-    min-height: 0;
-    display: grid;
-    gap: var(--spacer-6);
-    overflow: auto;
-  }
-
-  :where(.kui-command-palette-group) {
-    display: grid;
-    gap: var(--spacer-4);
-  }
-
-  :where(.kui-command-palette-group-label) {
-    padding: var(--spacer-4) var(--spacer-8) 0;
-    color: var(--text-secondary);
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-  }
-
-  :where(.kui-command-palette-group-label)::before {
-    content: attr(data-label);
-  }
-
-  :where(.kui-command-palette-item) {
-    min-height: 44px;
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto;
-    align-items: center;
-    gap: var(--spacer-8);
-    padding: var(--spacer-8);
-    color: var(--text-default);
-    border-radius: var(--radius-4);
-    cursor: pointer;
-  }
-
-  :where(.kui-command-palette-item)::before {
-    min-width: 0;
-    overflow: hidden;
-    content: attr(data-label);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  :where(.kui-command-palette-item)::after {
-    min-width: 0;
-    overflow: hidden;
-    color: var(--text-secondary);
-    content: attr(data-description);
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  :where(.kui-command-palette-item[data-state='active']) {
-    color: var(--text-default-hover);
-    background: var(--bg-brand-popup);
-  }
-
-  :where(.kui-command-palette-item[data-state='selected']) {
-    color: var(--text-brand);
-  }
-
-  :where(.kui-command-palette-shortcut) {
-    min-height: 22px;
-    display: inline-flex;
-    align-items: center;
-    padding-inline: var(--spacer-4);
-    color: var(--text-secondary);
-    background: var(--bg-base-tertiary);
-    border: 1px solid var(--border-neutral-l1);
-    border-radius: var(--radius-4);
-    font-family: var(--font-family-mono);
-    font-size: var(--body-sm-font-size);
-  }
-
-  :where(.kui-command-palette-shortcut)::before {
-    content: attr(data-shortcut);
-  }
-
-  :where(.kui-command-palette-empty) {
-    min-height: 96px;
-    display: grid;
-    place-items: center;
-    color: var(--text-secondary);
-  }
-
-  :where(.kui-command-palette-empty)::before {
-    content: attr(data-label);
-  }
-
-  :where(.kui-table) {
-    width: 100%;
-    border-collapse: collapse;
-    color: var(--text-default);
-    background: var(--bg-base-secondary);
-  }
-
-  :where(.kui-table-scroll) {
-    min-width: 0;
-    width: 100%;
-    overflow-x: auto;
-    overscroll-behavior-inline: contain;
-  }
-
-  :where(.kui-table[data-density='compact']) {
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-  }
-
-  :where(.kui-table-caption) {
-    padding-block: var(--spacer-8);
-    text-align: start;
-    color: var(--text-secondary);
-  }
-
-  :where(
-    .kui-table-header,
-    .kui-table-cell,
-    .kui-table-selection-header,
-    .kui-table-selection-cell
-  ) {
-    padding: var(--spacer-8);
-    border-bottom: 1px solid var(--border-neutral-l1);
-    text-align: start;
-  }
-
-  :where(.kui-table[data-density='compact'])
-    :where(
-      .kui-table-header,
-      .kui-table-cell,
-      .kui-table-selection-header,
-      .kui-table-selection-cell
-    ) {
-    padding: var(--spacer-6);
-  }
-
-  :where(.kui-table[data-sticky-header='true'] .kui-table-header) {
-    position: sticky;
-    inset-block-start: 0;
-    z-index: 1;
-    background: var(--bg-base-secondary);
-  }
-
-  :where(.kui-table-header[data-sortable='true']) {
-    cursor: pointer;
-  }
-
-  :where(
-    .kui-table-header[data-sort-direction='ascending'],
-    .kui-table-header[data-sort-direction='descending']
-  ) {
-    color: var(--text-brand);
-  }
-
-  :where(
-    .kui-table-header[data-sticky='start'],
-    .kui-table-cell[data-sticky='start'],
-    .kui-table-selection-header,
-    .kui-table-selection-cell
-  ) {
-    position: sticky;
-    inset-inline-start: 0;
-    z-index: 1;
-    background: var(--bg-base-secondary);
-  }
-
-  :where(.kui-table-header[data-sticky='end'], .kui-table-cell[data-sticky='end']) {
-    position: sticky;
-    inset-inline-end: 0;
-    z-index: 1;
-    background: var(--bg-base-secondary);
-  }
-
-  :where(.kui-table-header[data-align='center'], .kui-table-cell[data-align='center']) {
-    text-align: center;
-  }
-
-  :where(.kui-table-header[data-align='end'], .kui-table-cell[data-align='end']) {
-    text-align: end;
-  }
-
-  :where(.kui-table-row[data-state='selected']) {
-    background: var(--bg-brand-popup);
-  }
-
-  :where(.kui-table-row[data-state='disabled']) {
-    opacity: 0.56;
-  }
-
-  :where(.kui-data-toolbar) {
-    min-width: 0;
-    display: grid;
-    grid-template-columns: minmax(180px, 1fr) auto auto;
-    align-items: center;
-    gap: var(--spacer-8);
-    padding: var(--spacer-8);
-    color: var(--text-default);
-    background: var(--bg-base-secondary);
-    border: 1px solid var(--border-neutral-l1);
-    border-radius: var(--radius-8);
-  }
-
-  :where(.kui-data-toolbar[data-density='compact']) {
-    padding: var(--spacer-6);
-    gap: var(--spacer-6);
-  }
-
-  :where(.kui-data-toolbar-search) {
-    min-height: 32px;
-    min-width: 0;
-    padding: 0 var(--spacer-8);
-    color: var(--text-default);
-    background: var(--bg-base-tertiary);
-    border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-4);
-  }
-
-  :where(.kui-data-toolbar-search:focus-visible) {
-    outline: 1px solid var(--border-brand);
-  }
-
-  :where(.kui-filter-bar) {
-    min-width: 0;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--spacer-6);
-  }
-
-  :where(.kui-filter-chip, .kui-filter-clear, .kui-data-toolbar-action) {
-    min-height: 28px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--spacer-4);
-    padding: 0 var(--spacer-8);
-    color: var(--text-secondary);
-    background: var(--bg-base-tertiary);
-    border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-full);
-    cursor: pointer;
-  }
-
-  :where(.kui-filter-chip)::before {
-    content: attr(data-label);
-  }
-
-  :where(.kui-filter-chip[data-value])::after {
-    content: attr(data-value);
-    color: var(--text-default);
-  }
-
-  :where(.kui-filter-chip[data-state='active']) {
-    color: var(--text-brand);
-    background: var(--bg-brand-popup);
-    border-color: var(--border-brand);
-  }
-
-  :where(.kui-filter-chip[data-tone='warning']) {
-    border-color: var(--status-warning-default);
-  }
-
-  :where(.kui-filter-chip[data-tone='danger']) {
-    border-color: var(--status-error-default);
-  }
-
-  :where(.kui-filter-chip[data-tone='success']) {
-    border-color: var(--status-success-default);
-  }
-
-  :where(.kui-filter-chip[data-removable='true'])::after {
-    content: attr(data-value) ' ×';
-  }
-
-  :where(.kui-filter-clear) {
-    color: var(--text-brand);
-    background: transparent;
-  }
-
-  :where(.kui-filter-clear)::before {
-    content: attr(aria-label);
-  }
-
-  :where(.kui-data-toolbar-summary) {
-    color: var(--text-secondary);
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-    white-space: nowrap;
-  }
-
-  :where(.kui-data-toolbar-summary)::before {
-    content: attr(data-summary);
-  }
-
-  :where(.kui-data-toolbar-action) {
-    border-radius: var(--radius-4);
-  }
-
-  :where(.kui-data-toolbar-action[data-tone='primary']) {
-    color: var(--text-onbrand);
-    background: var(--bg-brand);
-    border-color: var(--border-brand);
-  }
-
-  :where(.kui-data-toolbar-action[data-tone='danger']) {
-    color: var(--status-error-default);
-  }
-
-  :where(.kui-data-toolbar-action[data-state='pressed']) {
-    color: var(--text-brand);
-    background: var(--bg-brand-popup);
-  }
-
-  :where(.kui-typography) {
-    min-width: 0;
-    margin: 0;
-    color: var(--text-default);
-    line-height: var(--body-md-line-height);
-  }
-
-  :where(.kui-typography[data-variant='heading-lg']) {
-    font-size: var(--heading-lg-font-size);
-    line-height: var(--heading-lg-line-height);
-    font-weight: var(--font-weight-semibold);
-  }
-
-  :where(.kui-typography[data-variant='heading-md']) {
-    font-size: var(--heading-md-font-size);
-    line-height: var(--heading-md-line-height);
-    font-weight: var(--font-weight-semibold);
-  }
-
-  :where(.kui-typography[data-variant='heading-sm']) {
-    font-size: var(--heading-sm-font-size);
-    line-height: var(--heading-sm-line-height);
-    font-weight: var(--font-weight-semibold);
-  }
-
-  :where(.kui-typography[data-variant='body-sm'], .kui-typography[data-variant='caption']) {
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-  }
-
-  :where(.kui-typography[data-variant='caption'], .kui-typography[data-variant='muted']) {
-    color: var(--text-secondary);
-  }
-
-  :where(.kui-typography[data-variant='code']) {
-    padding: 0 var(--spacer-4);
-    color: var(--code-string);
-    background: var(--bg-base-tertiary);
-    border: 1px solid var(--border-neutral-l1);
-    border-radius: var(--radius-4);
-    font-family: var(--font-family-mono);
-    font-size: var(--body-sm-font-size);
-  }
-
-  :where(.kui-typography[data-variant='link']) {
-    color: var(--text-brand);
-    text-decoration: none;
-  }
-
-  :where(.kui-typography[data-variant='link']:hover) {
-    color: var(--text-default-hover);
-    text-decoration: underline;
-  }
-
-  :where(.kui-typography[data-truncate='true']) {
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  :where([data-typography-rich-content-contract='true']) {
-    min-width: 0;
-    display: grid;
-    gap: var(--spacer-12);
-    color: var(--text-default);
-    line-height: var(--body-md-line-height);
-  }
-
-  :where([data-typography-rich-content-contract='true'][data-content-density='compact']) {
-    gap: var(--spacer-8);
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-  }
-
-  :where([data-typography-rich-content-contract='true'] > :is(h2, h3, h4, p, ul, ol, pre)) {
-    margin: 0;
-  }
-
-  :where([data-typography-rich-content-contract='true'] > :is(ul, ol)) {
-    padding-inline-start: var(--spacer-20);
-  }
-
-  :where([data-typography-rich-content-contract='true'] > pre) {
-    max-width: 100%;
-    padding: var(--spacer-8);
-    overflow: auto;
-    background: var(--bg-base-tertiary);
-    border: 1px solid var(--border-neutral-l1);
-    border-radius: var(--radius-4);
-    font-family: var(--font-family-mono);
-  }
-
-  :where(.kui-divider) {
-    min-width: 0;
-    display: flex;
-    align-items: center;
-    gap: var(--spacer-8);
-    color: var(--text-secondary);
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-  }
-
-  :where(.kui-divider)::before,
-  :where(.kui-divider)::after {
-    min-width: 0;
-    flex: 1 1 auto;
-    height: 1px;
-    content: '';
-    background: var(--border-neutral-l1);
-  }
-
-  :where(.kui-divider:not([data-label]))::after {
-    content: none;
-  }
-
-  :where(.kui-divider[data-orientation='vertical']) {
-    width: 1px;
-    min-height: 24px;
-    align-self: stretch;
-    display: inline-block;
-    background: var(--border-neutral-l1);
-  }
-
-  :where(.kui-divider[data-orientation='vertical'])::before,
-  :where(.kui-divider[data-orientation='vertical'])::after {
-    content: none;
-  }
-
-  :where(.kui-divider[data-inset='both']) {
-    margin-inline: var(--spacer-16);
-  }
-
-  :where(.kui-divider[data-inset='start']) {
-    margin-inline-start: var(--spacer-16);
-  }
-
-  :where(.kui-divider[data-inset='end']) {
-    margin-inline-end: var(--spacer-16);
-  }
-
-  :where(.kui-divider-label) {
-    flex: 0 1 auto;
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  :where(.kui-divider-label)::before {
-    content: attr(data-label);
-  }
-
-  :where(.kui-divider[data-divider-section-heading-contract='true'] .kui-divider-label) {
-    color: var(--text-default);
-    font-weight: var(--font-weight-semibold);
-  }
-
-  :where(.kui-divider[data-section-heading-state='current'])::before,
-  :where(.kui-divider[data-section-heading-state='current'])::after {
-    background: var(--border-brand);
-  }
-
-  :where(.kui-avatar) {
-    --kui-avatar-size: 32px;
-    position: relative;
-    width: var(--kui-avatar-size);
-    height: var(--kui-avatar-size);
-    flex: 0 0 var(--kui-avatar-size);
-    display: inline-grid;
-    place-items: center;
-    overflow: visible;
-    color: var(--text-default);
-    background: var(--bg-base-tertiary);
-    border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-full);
-    font-weight: var(--font-weight-semibold);
-    vertical-align: middle;
-  }
-
-  :where(.kui-avatar[data-size='sm'], .kui-avatar-group[data-size='sm'] .kui-avatar) {
-    --kui-avatar-size: 24px;
-    font-size: var(--body-sm-font-size);
-  }
-
-  :where(.kui-avatar[data-size='lg'], .kui-avatar-group[data-size='lg'] .kui-avatar) {
-    --kui-avatar-size: 40px;
-  }
-
-  :where(.kui-avatar-image) {
-    width: 100%;
-    height: 100%;
-    display: block;
-    object-fit: cover;
-    border-radius: inherit;
-  }
-
-  :where(.kui-avatar-fallback) {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding-inline: var(--spacer-2);
-  }
-
-  :where(.kui-avatar-fallback)::before {
-    content: attr(data-initials);
-  }
-
-  :where(.kui-avatar-image + .kui-avatar-fallback) {
-    display: none;
-  }
-
-  :where(.kui-avatar-status) {
-    position: absolute;
-    right: -1px;
-    bottom: -1px;
-    width: 10px;
-    height: 10px;
-    background: var(--text-secondary);
-    border: 2px solid var(--bg-base-secondary);
-    border-radius: var(--radius-full);
-  }
-
-  :where(.kui-avatar-status[data-status='online']) {
-    background: var(--status-success-default);
-  }
-
-  :where(.kui-avatar-status[data-status='away']) {
-    background: var(--status-warning-default);
-  }
-
-  :where(.kui-avatar-status[data-status='busy']) {
-    background: var(--status-error-default);
-  }
-
-  :where(.kui-avatar-group) {
-    display: inline-flex;
-    align-items: center;
-    padding-inline-start: var(--spacer-6);
-  }
-
-  :where(.kui-avatar-group .kui-avatar, .kui-avatar-overflow) {
-    margin-inline-start: calc(var(--spacer-6) * -1);
-    box-shadow: 0 0 0 2px var(--bg-base-secondary);
-  }
-
-  :where(.kui-avatar-overflow) {
-    min-width: 24px;
-    min-height: 24px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding-inline: var(--spacer-4);
-    color: var(--text-secondary);
-    background: var(--bg-base-tertiary);
-    border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-full);
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-  }
-
-  :where(.kui-avatar-overflow)::before {
-    content: '+' attr(data-overflow-count);
-  }
-
-  :where(.kui-kbd) {
-    min-width: 22px;
-    min-height: 22px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding-inline: var(--spacer-4);
-    color: var(--text-default);
-    background: var(--bg-base-tertiary);
-    border: 1px solid var(--border-neutral-l2);
-    border-bottom-color: var(--border-neutral-l1);
-    border-radius: var(--radius-4);
-    font-family: var(--font-family-mono);
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-    box-shadow: inset 0 -1px 0 var(--bg-overlay-l2);
-  }
-
-  :where(.kui-shortcut) {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--spacer-4);
-  }
-
-  :where(
-    .kui-shortcut[data-shortcut-display-state='aliased'] .kui-kbd[data-modifier-alias='true']
-  ) {
-    color: var(--text-brand);
-    border-color: var(--border-brand);
-  }
-
-  :where(.kui-shortcut-separator)::before {
-    content: '+';
-    color: var(--text-secondary);
-  }
-
-  :where(.kui-pagination) {
-    min-width: 0;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--spacer-12);
-  }
-
-  :where(.kui-pagination-list) {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-    gap: var(--spacer-4);
-    padding: 0;
-    margin: 0;
-    list-style: none;
-  }
-
-  :where(.kui-pagination-previous, .kui-pagination-next, .kui-pagination-page) {
-    min-width: 32px;
-    min-height: 32px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding-inline: var(--spacer-8);
-    color: var(--text-secondary);
-    background: var(--bg-base-secondary);
-    border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-4);
-  }
-
-  :where(.kui-pagination-previous)::before {
-    content: 'Previous';
-  }
-
-  :where(.kui-pagination-next)::before {
-    content: 'Next';
-  }
-
-  :where(.kui-pagination-page)::before {
-    content: attr(data-page);
-  }
-
-  :where(.kui-pagination-page[data-state='current']) {
-    color: var(--text-onbrand);
-    background: var(--bg-brand);
-    border-color: var(--border-brand);
-  }
-
-  :where(.kui-pagination-ellipsis) {
-    min-width: 24px;
-    display: inline-flex;
-    justify-content: center;
-    color: var(--text-secondary);
-  }
-
-  :where(.kui-pagination-ellipsis)::before {
-    content: '...';
-  }
-
-  :where(.kui-pagination-summary) {
-    color: var(--text-secondary);
-    font-size: var(--body-sm-font-size);
-  }
-
-  :where(.kui-pagination-summary)::before {
-    content: attr(data-summary);
-  }
-
-  :where(.kui-list) {
-    min-width: 0;
-    display: grid;
-    gap: var(--spacer-4);
-    padding: 0;
-    margin: 0;
-    list-style: none;
-  }
-
-  :where(.kui-list-group) {
-    min-width: 0;
-    display: grid;
-    gap: var(--spacer-6);
-    list-style: none;
-  }
-
-  :where(.kui-list-group-heading) {
-    margin: 0;
-    color: var(--text-secondary);
-    font-size: var(--body-sm-font-size);
-    font-weight: var(--font-weight-strong);
-    line-height: var(--body-sm-line-height);
-  }
-
-  :where(.kui-list-group-items) {
-    min-width: 0;
-    display: grid;
-    gap: var(--spacer-4);
-    padding: 0;
-    margin: 0;
-    list-style: none;
-  }
-
-  :where(.kui-list-item) {
-    min-width: 0;
-    min-height: 44px;
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr) auto auto;
-    align-items: center;
-    gap: var(--spacer-8);
-    padding: var(--spacer-8);
-    color: var(--text-default);
-    background: var(--bg-base-secondary);
-    border: 1px solid var(--border-neutral-l1);
-    border-radius: var(--radius-4);
-  }
-
-  :where(.kui-list.kui-density-compact .kui-list-item) {
-    min-height: 36px;
-    padding: var(--spacer-6);
-  }
-
-  :where(.kui-list-item[data-state='selected']) {
-    border-color: var(--border-brand);
-    box-shadow: inset 0 0 0 1px var(--border-brand);
-  }
-
-  :where(.kui-list-item-icon) {
-    width: 24px;
-    height: 24px;
-    display: inline-grid;
-    place-items: center;
-    color: var(--text-brand);
-    background: var(--bg-brand-popup);
-    border-radius: var(--radius-4);
-  }
-
-  :where(.kui-list-item-icon)::before {
-    content: '';
-    width: 8px;
-    height: 8px;
-    background: currentColor;
-    border-radius: var(--radius-full);
-  }
-
-  :where(.kui-list-item-label, .kui-list-item-meta) {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  :where(.kui-list-item-label)::before {
-    content: attr(data-label);
-  }
-
-  :where(.kui-list-item-description) {
-    grid-column: 2 / span 2;
-    margin: 0;
-    color: var(--text-secondary);
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-  }
-
-  :where(.kui-list-item-description)::before {
-    content: attr(data-description);
-  }
-
-  :where(.kui-list-item-meta) {
-    color: var(--text-secondary);
-    font-size: var(--body-sm-font-size);
-  }
-
-  :where(.kui-list-item-meta)::before {
-    content: attr(data-meta);
-  }
-
-  :where(.kui-list-item-action) {
-    min-width: 28px;
-    min-height: 28px;
-    display: inline-grid;
-    place-items: center;
-    color: var(--text-secondary);
-    background: var(--bg-base-tertiary);
-    border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-4);
-  }
-
-  :where(.kui-list-item-action[hidden]) {
-    display: none;
-  }
-
-  :where(.kui-list-item-action)::before {
-    content: 'Open';
-  }
-
-  :where(.kui-carousel) {
-    min-width: 0;
-    display: grid;
-    gap: var(--spacer-10);
-    padding: var(--spacer-10);
-    color: var(--text-default);
-    background: var(--bg-base-secondary);
-    border: 1px solid var(--border-neutral-l1);
-    border-radius: var(--radius-4);
-  }
-
-  :where(.kui-carousel-viewport) {
-    min-width: 0;
-    min-height: 168px;
-    overflow: hidden;
-  }
-
-  :where(.kui-carousel-track) {
-    min-height: 168px;
-  }
-
-  :where(.kui-carousel-slide) {
-    min-height: 168px;
-    display: grid;
-    align-content: center;
-    gap: var(--spacer-6);
-    padding: var(--spacer-12);
-    background: var(--bg-base-tertiary);
-    border-left: 3px solid var(--border-brand);
-  }
-
-  :where(.kui-carousel-slide[hidden]) {
-    display: none;
-  }
-
-  :where(.kui-carousel-slide h3, .kui-carousel-slide p) {
-    margin: 0;
-  }
-
-  :where(.kui-carousel-slide p) {
-    color: var(--text-secondary);
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-  }
-
-  :where(.kui-carousel-slide-eyebrow) {
-    color: var(--text-brand);
-    font-size: var(--body-sm-font-size);
-    font-weight: var(--font-weight-strong);
-    line-height: var(--body-sm-line-height);
-  }
-
-  :where(.kui-carousel-controls) {
-    min-width: 0;
-    display: grid;
-    grid-template-columns: 32px minmax(72px, 1fr) 32px auto;
-    align-items: center;
-    gap: var(--spacer-6);
-  }
-
-  :where(.kui-carousel-control, .kui-carousel-playback, .kui-carousel-indicator) {
-    min-width: 32px;
-    min-height: 32px;
-    display: inline-grid;
-    place-items: center;
-    color: var(--text-secondary);
-    background: var(--bg-base-tertiary);
-    border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-4);
-  }
-
-  :where(.kui-carousel-playback) {
-    padding-inline: var(--spacer-8);
-    color: var(--text-default);
-    white-space: nowrap;
-  }
-
-  :where(.kui-carousel-indicators) {
-    min-width: 0;
-    display: flex;
-    justify-content: center;
-    gap: var(--spacer-4);
-  }
-
-  :where(.kui-carousel-indicator) {
-    min-width: 24px;
-    min-height: 32px;
-    background: transparent;
-    border-color: transparent;
-  }
-
-  :where(.kui-carousel-indicator)::before {
-    content: '';
-    width: 8px;
-    height: 8px;
-    background: var(--text-tertiary);
-    border-radius: var(--radius-full);
-  }
-
-  :where(.kui-carousel-indicator[data-slide-state='current'])::before {
-    width: 18px;
-    background: var(--text-brand);
-  }
-
-  :where(.kui-empty) {
-    min-height: 120px;
-    display: grid;
-    gap: var(--spacer-8);
-    justify-items: start;
-    padding: var(--spacer-16);
-    color: var(--text-secondary);
-    background: var(--bg-base-secondary);
-    border: 1px dashed var(--border-neutral-l2);
-    border-radius: var(--radius-8);
-  }
-
-  :where(.kui-empty[data-status='empty']) {
-    color: var(--text-secondary);
-  }
-
-  :where(.kui-empty-icon) {
-    color: var(--text-secondary);
-  }
-
-  :where(.kui-empty-icon)::before {
-    content: '∅';
-  }
-
-  :where(.kui-empty-title) {
-    color: var(--text-default);
-    font-weight: var(--font-weight-semibold);
-  }
-
-  :where(.kui-empty-description) {
-    margin: 0;
-    color: var(--text-secondary);
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-  }
-
-  :where(.kui-empty-action) {
-    min-height: 28px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding-inline: var(--spacer-8);
-    color: var(--text-brand);
-    background: transparent;
-    border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-4);
-  }
-
-  :where(.kui-result) {
-    min-width: 0;
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr) auto auto;
-    gap: var(--spacer-8);
-    padding: var(--spacer-12);
-    color: var(--text-default);
-    background: var(--bg-base-secondary);
-    border: 1px solid var(--border-neutral-l1);
-    border-radius: var(--radius-8);
-  }
-
-  :where(.kui-result[data-status='warning']) {
-    background: var(--status-warning-surface-l1);
-    border-color: var(--status-warning-default);
-  }
-
-  :where(.kui-result[data-status='error']) {
-    background: var(--status-error-surface-l1);
-    border-color: var(--status-error-default);
-  }
-
-  :where(.kui-result[data-status='success']) {
-    background: var(--status-success-surface-l1);
-    border-color: var(--status-success-default);
-  }
-
-  :where(.kui-result-icon) {
-    color: var(--text-secondary);
-  }
-
-  :where(.kui-result-icon)::before {
-    content: '!';
-  }
-
-  :where(.kui-result-title) {
-    margin: 0;
-    color: var(--text-default);
-    font-size: var(--heading-sm-font-size);
-    line-height: var(--heading-sm-line-height);
-  }
-
-  :where(.kui-result-description) {
-    margin: var(--spacer-2) 0 0;
-    color: var(--text-secondary);
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-  }
-
-  :where(.kui-result-close) {
-    min-width: 28px;
-    min-height: 28px;
-    padding: 0;
-    color: var(--text-secondary);
-    background: transparent;
-    border: 0;
-    border-radius: var(--radius-4);
-  }
-
-  :where(.kui-badge) {
-    min-height: 20px;
-    display: inline-flex;
-    align-items: center;
-    padding-inline: var(--spacer-4);
-    color: var(--text-default);
-    background: var(--bg-base-tertiary);
-    border-radius: var(--radius-full);
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-  }
-
-  :where(.kui-badge[data-tone='brand']) {
-    color: var(--text-brand);
-    background: var(--bg-brand-popup);
-  }
-
-  :where(.kui-badge[data-tone='success']) {
-    background: var(--status-success-surface-l1);
-  }
-
-  :where(.kui-badge[data-tone='warning']) {
-    background: var(--status-warning-surface-l1);
-  }
-
-  :where(.kui-badge[data-tone='error']) {
-    background: var(--status-error-surface-l1);
-  }
-
-  :where(.kui-tag, .kui-chip) {
-    min-height: 24px;
-    display: inline-flex;
-    align-items: center;
-    gap: var(--spacer-4);
-    max-width: 100%;
-    padding-inline: var(--spacer-8);
-    color: var(--text-secondary);
-    background: var(--bg-base-tertiary);
-    border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-4);
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-    vertical-align: middle;
-  }
-
-  :where(.kui-chip) {
-    border-radius: var(--radius-full);
-  }
-
-  :where(.kui-tag[data-tone='brand'], .kui-chip[data-tone='brand']) {
-    color: var(--text-brand);
-    background: var(--bg-brand-popup);
-    border-color: var(--border-brand);
-  }
-
-  :where(.kui-tag[data-tone='success'], .kui-chip[data-tone='success']) {
-    background: var(--status-success-surface-l1);
-    border-color: var(--status-success-default);
-  }
-
-  :where(.kui-tag[data-tone='warning'], .kui-chip[data-tone='warning']) {
-    background: var(--status-warning-surface-l1);
-    border-color: var(--status-warning-default);
-  }
-
-  :where(.kui-tag[data-tone='danger'], .kui-chip[data-tone='danger']) {
-    color: var(--status-error-default);
-    background: var(--status-error-surface-l1);
-    border-color: var(--status-error-default);
-  }
-
-  :where(.kui-tag[data-state='selected'], .kui-chip[data-state='selected']) {
-    color: var(--text-brand);
-    border-color: var(--border-brand);
-    box-shadow: inset 0 0 0 1px var(--border-brand);
-  }
-
-  :where(.kui-tag-label, .kui-chip-label, .kui-tag-value, .kui-chip-value) {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  :where(.kui-tag-label, .kui-chip-label)::before {
-    content: attr(data-label);
-  }
-
-  :where(.kui-tag-value, .kui-chip-value)::before {
-    content: attr(data-value);
-  }
-
-  :where(.kui-tag-count, .kui-chip-count) {
-    min-width: 18px;
-    min-height: 18px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding-inline: var(--spacer-4);
-    color: var(--text-default);
-    background: var(--bg-overlay-l3);
-    border-radius: var(--radius-full);
-  }
-
-  :where(.kui-tag-count, .kui-chip-count)::before {
-    content: attr(data-count);
-  }
-
-  :where(.kui-tag-icon, .kui-chip-icon)::before {
-    content: '#';
-  }
-
-  :where(.kui-tag-remove, .kui-chip-remove) {
-    min-width: 18px;
-    min-height: 18px;
-    display: inline-grid;
-    place-items: center;
-    padding: 0;
-    color: currentColor;
-    background: transparent;
-    border: 0;
-    border-radius: var(--radius-full);
-  }
-
-  :where(.kui-tag-remove, .kui-chip-remove)::before {
-    content: 'x';
-  }
-
-  :where(.kui-note, .kui-callout) {
-    min-width: 0;
-    display: grid;
-    grid-template-columns: auto minmax(0, 1fr) auto auto;
-    gap: var(--spacer-8);
-    padding: var(--spacer-12);
-    color: var(--text-default);
-    background: var(--bg-base-secondary);
-    border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-8);
-  }
-
-  :where(.kui-note[data-content-density='compact'], .kui-callout[data-content-density='compact']) {
-    gap: var(--spacer-6);
-    padding: var(--spacer-8);
-  }
-
-  :where(.kui-callout) {
-    border-inline-start-width: 3px;
-  }
-
-  :where(.kui-note[data-tone='success'], .kui-callout[data-tone='success']) {
-    background: var(--status-success-surface-l1);
-    border-color: var(--status-success-default);
-  }
-
-  :where(.kui-note[data-tone='warning'], .kui-callout[data-tone='warning']) {
-    background: var(--status-warning-surface-l1);
-    border-color: var(--status-warning-default);
-  }
-
-  :where(.kui-note[data-tone='error'], .kui-callout[data-tone='error']) {
-    background: var(--status-error-surface-l1);
-    border-color: var(--status-error-default);
-  }
-
-  :where(.kui-note-icon, .kui-callout-icon) {
-    color: var(--text-secondary);
-  }
-
-  :where(.kui-note-icon)::before {
-    content: 'i';
-  }
-
-  :where(.kui-callout-icon)::before {
-    content: '!';
-  }
-
-  :where(.kui-note-content, .kui-callout-content) {
-    min-width: 0;
-    display: grid;
-    gap: var(--spacer-2);
-  }
-
-  :where([data-note-rich-content='true'][data-content-density='comfortable']) {
-    gap: var(--spacer-6);
-  }
-
-  :where([data-note-rich-content='true'] > :is(p, ul, ol)) {
-    margin: 0;
-  }
-
-  :where([data-note-rich-content='true'] > :is(ul, ol)) {
-    padding-inline-start: var(--spacer-20);
-    color: var(--text-secondary);
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-  }
-
-  :where(.kui-note-title, .kui-callout-title) {
-    color: var(--text-default);
-  }
-
-  :where(.kui-note-description, .kui-callout-description) {
-    margin: 0;
-    color: var(--text-secondary);
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-  }
-
-  :where(.kui-note-action, .kui-callout-action, .kui-panel-action, .kui-card-action) {
-    min-height: 28px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding-inline: var(--spacer-8);
-    color: var(--text-secondary);
-    background: var(--bg-base-tertiary);
-    border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-4);
-  }
-
-  :where(.kui-note-action, .kui-callout-action, .kui-panel-action, .kui-card-action)::before {
-    content: attr(data-label);
-  }
-
-  :where(
-    .kui-note-action[data-tone='primary'],
-    .kui-callout-action[data-tone='primary'],
-    .kui-panel-action[data-tone='primary'],
-    .kui-card-action[data-tone='primary']
-  ) {
-    color: var(--text-onbrand);
-    background: var(--bg-brand);
-    border-color: var(--border-brand);
-  }
-
-  :where(.kui-note-action[data-tone='danger'], .kui-callout-action[data-tone='danger']) {
-    color: var(--status-error-default);
-  }
-
-  :where(.kui-note-close, .kui-callout-close) {
-    min-width: 28px;
-    min-height: 28px;
-    padding: 0;
-    color: var(--text-secondary);
-    background: transparent;
-    border: 0;
-    border-radius: var(--radius-4);
-  }
-
-  :where(.kui-note-close, .kui-callout-close)::before {
-    content: 'x';
-  }
-
-  :where(
-    .kui-note-action[data-action-state='disabled'],
-    .kui-callout-action[data-action-state='disabled'],
-    .kui-note-close[data-close-state='disabled'],
-    .kui-callout-close[data-close-state='disabled']
-  ) {
-    cursor: not-allowed;
-    opacity: 0.56;
-  }
-
-  :where(.kui-panel, .kui-card) {
-    min-width: 0;
-    display: grid;
-    gap: var(--spacer-12);
-    padding: var(--spacer-12);
-    color: var(--text-default);
-    background: var(--bg-base-secondary);
-    border: 1px solid var(--border-neutral-l1);
-    border-radius: var(--radius-8);
-  }
-
-  :where(.kui-card) {
-    gap: var(--spacer-8);
-  }
-
-  :where(.kui-panel[data-media-placement='start']) {
-    grid-template-columns: minmax(96px, 0.35fr) minmax(0, 1fr);
-  }
-
-  :where(.kui-panel[data-media-placement='start'] > :not(.kui-panel-media)) {
-    grid-column: 2;
-  }
-
-  :where(.kui-panel-media, .kui-card-media) {
-    min-height: 72px;
-    display: grid;
-    place-items: center;
-    padding: var(--spacer-8);
-    color: var(--text-secondary);
-    background: var(--bg-base-tertiary);
-    border: 1px solid var(--border-neutral-l1);
-    border-radius: var(--radius-4);
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-  }
-
-  :where(.kui-panel-media)::before,
-  :where(.kui-card-media)::before {
-    content: attr(aria-label);
-  }
-
-  :where(.kui-panel[data-media-placement='start'] > .kui-panel-media) {
-    grid-row: 1 / -1;
-  }
-
-  :where(.kui-panel[data-tone='subtle'], .kui-card[data-tone='subtle']) {
-    background: var(--bg-base-tertiary);
-  }
-
-  :where(.kui-panel[data-tone='elevated'], .kui-card[data-tone='elevated']) {
-    border-color: var(--border-neutral-l2);
-    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
-  }
-
-  :where(.kui-panel[data-interactive='true'], .kui-card[data-interactive='true']) {
-    cursor: pointer;
-  }
-
-  :where(.kui-panel[data-state='selected'], .kui-card[data-state='selected']) {
-    border-color: var(--border-brand);
-    box-shadow: inset 0 0 0 1px var(--border-brand);
-  }
-
-  :where(.kui-panel[data-selected-emphasis='true'], .kui-card[data-selected-emphasis='true']) {
-    background: var(--bg-brand-popup);
-  }
-
-  :where(
-    .kui-panel-action[data-action-state='disabled'],
-    .kui-card-action[data-action-state='disabled']
-  ) {
-    cursor: not-allowed;
-    opacity: 0.56;
-  }
-
-  :where(.kui-panel-action[hidden], .kui-card-action[hidden]) {
-    display: none;
-  }
-
-  :where(.kui-panel-header, .kui-card-header) {
-    min-width: 0;
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto;
-    gap: var(--spacer-8);
-  }
-
-  :where(.kui-panel-title, .kui-card-title) {
-    margin: 0;
-    color: var(--text-default);
-    font-size: var(--heading-sm-font-size);
-    line-height: var(--heading-sm-line-height);
-  }
-
-  :where(.kui-panel-description, .kui-card-description) {
-    margin: var(--spacer-2) 0 0;
-    color: var(--text-secondary);
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-  }
-
-  :where(.kui-panel-body, .kui-card-body) {
-    min-width: 0;
-  }
-
-  :where(.kui-panel-footer, .kui-card-footer) {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    gap: var(--spacer-8);
-    padding-block-start: var(--spacer-8);
-    border-top: 1px solid var(--border-neutral-l1);
-  }
-
-  :where(.kui-stat-card, .kui-table-panel) {
-    min-width: 0;
-    display: grid;
-    gap: var(--spacer-8);
-    padding: var(--spacer-12);
-    color: var(--text-default);
-    background: var(--bg-base-secondary);
-    border: 1px solid var(--border-neutral-l1);
-    border-radius: var(--radius-8);
-  }
-
-  :where(.kui-stat-card[data-tone='brand']) {
-    border-color: var(--border-brand);
-    box-shadow: inset 0 0 0 1px var(--border-brand);
-  }
-
-  :where(.kui-stat-card-header, .kui-table-panel-header) {
-    min-width: 0;
-    display: grid;
-    gap: var(--spacer-4);
-  }
-
-  :where(.kui-stat-card-title, .kui-table-panel-title) {
-    margin: 0;
-    color: var(--text-default);
-    font-size: var(--heading-sm-font-size);
-    line-height: var(--heading-sm-line-height);
-  }
-
-  :where(.kui-stat-card-value) {
-    color: var(--text-default);
-    font-size: var(--heading-lg-font-size);
-    line-height: var(--heading-lg-line-height);
-    font-weight: var(--font-weight-semibold);
-  }
-
-  :where(.kui-stat-card-unit, .kui-stat-card-trend) {
-    color: var(--text-secondary);
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-  }
-
-  :where(.kui-stat-card-trend[data-direction='up']) {
-    color: var(--status-success-default);
-  }
-
-  :where(.kui-stat-card-trend[data-direction='down']) {
-    color: var(--status-error-default);
-  }
-
-  :where(.kui-stat-card-description, .kui-table-panel-description) {
-    margin: 0;
-    color: var(--text-secondary);
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-  }
-
-  :where(.kui-stat-card-action, .kui-table-panel-action, .kui-result-action) {
-    min-height: 28px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding-inline: var(--spacer-8);
-    color: var(--text-secondary);
-    background: var(--bg-base-tertiary);
-    border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-4);
-  }
-
-  :where(.kui-table-panel-toolbar) {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: var(--spacer-6);
-  }
-
-  :where(.kui-table-panel-body) {
-    min-width: 0;
-  }
-
-  :where(.kui-table-panel-scroller) {
-    min-width: 0;
-    overflow: auto;
-  }
-
-  :where(.kui-table-panel-empty) {
-    min-height: 96px;
-    display: grid;
-    place-items: center;
-    color: var(--text-secondary);
-  }
-
-  :where(.kui-progress) {
-    height: 8px;
-    overflow: hidden;
-    background: var(--bg-base-tertiary);
-    border-radius: var(--radius-full);
-  }
-
-  :where(.kui-progress)::before {
-    width: var(--kui-progress-value, 0%);
-    height: 100%;
-    display: block;
-    content: '';
-    background: var(--bg-brand);
-  }
-
-  :where(.kui-progress[data-status='success'])::before {
-    background: var(--status-success-default);
-  }
-
-  :where(.kui-progress[data-status='warning'])::before {
-    background: var(--status-warning-default);
-  }
-
-  :where(.kui-progress[data-status='error'])::before {
-    background: var(--status-error-default);
-  }
-
-  :where(.kui-split-workspace) {
-    min-width: 0;
-    min-height: 0;
-    display: grid;
-    grid-template-columns: repeat(var(--kui-workspace-columns, 3), minmax(0, 1fr));
-    gap: var(--spacer-12);
-    overflow: hidden;
-  }
-
-  :where(.kui-split-workspace-area) {
-    min-width: min(100%, var(--kui-area-min, 0px));
-    min-height: 0;
-    overflow: auto;
-  }
-
-  :where(.kui-virtual-list) {
-    position: relative;
-    min-height: 0;
-    overflow: auto;
-    contain: strict;
-  }
-
-  :where(.kui-virtual-list-spacer) {
-    position: relative;
-    width: 100%;
-  }
-
-  :where(.kui-virtual-list-item) {
-    position: absolute;
-    inset-block-start: 0;
-    inset-inline: 0;
-    overflow: hidden;
-    will-change: transform;
-  }
-
-  :where(.kui-virtual-list[data-dynamic='true'] .kui-virtual-list-item) {
-    overflow: visible;
-    contain: layout paint;
-  }
-
-  :where(.kui-combobox) {
-    position: relative;
-    display: grid;
-    gap: var(--spacer-4);
-  }
-
-  :where(.kui-combobox-input) {
-    min-height: 32px;
-    width: 100%;
-    padding: 0 var(--spacer-8);
-    color: var(--text-default);
-    background: var(--bg-base-secondary);
-    border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-4);
-  }
-
-  :where(.kui-combobox-listbox) {
-    position: absolute;
-    inset-block-start: calc(100% + var(--spacer-4));
-    inset-inline: 0;
-    z-index: var(--z-index-dropdown);
-    max-height: 240px;
-    padding: var(--spacer-4);
-    margin: 0;
-    overflow: auto;
-    list-style: none;
-    background: var(--bg-base-secondary);
-    border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-4);
-    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
-  }
-
-  :where(.kui-combobox-option) {
-    min-height: 32px;
-    display: flex;
-    align-items: center;
-    padding: 0 var(--spacer-8);
-    border-radius: var(--radius-4);
-  }
-
-  :where(.kui-combobox-option[data-state='active']) {
-    background: var(--bg-brand-popup);
-  }
-
-  :where(.kui-combobox-option[data-state='selected']) {
-    color: var(--text-brand);
-  }
-
-  :where(.kui-cascader) {
-    position: relative;
-    min-width: 0;
-    display: grid;
-    gap: var(--spacer-4);
-  }
-
-  :where(.kui-cascader-trigger) {
-    min-height: 32px;
-    width: 100%;
-    display: inline-flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--spacer-8);
-    padding: 0 var(--spacer-8);
-    color: var(--text-default);
-    background: var(--bg-base-secondary);
-    border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-4);
-  }
-
-  :where(.kui-cascader-trigger)::before {
-    min-width: 0;
-    overflow: hidden;
-    content: attr(data-label);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  :where(.kui-cascader-trigger)::after {
-    content: '›';
-    color: var(--icon-secondary);
-    transform: rotate(90deg);
-  }
-
-  :where(.kui-cascader-popup) {
-    position: absolute;
-    inset-block-start: calc(100% + var(--spacer-4));
-    inset-inline-start: 0;
-    z-index: var(--z-index-dropdown);
-    max-width: min(calc(100vw - 32px), 760px);
-    max-height: 320px;
-    display: grid;
-    grid-auto-columns: minmax(180px, 1fr);
-    grid-auto-flow: column;
-    color: var(--text-default);
-    background: var(--bg-base-secondary);
-    border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-8);
-    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
-    overflow: auto;
-  }
-
-  :where(.kui-cascader-column) {
-    min-width: 180px;
-    display: grid;
-    align-content: start;
-    gap: var(--spacer-2);
-    padding: var(--spacer-4);
-  }
-
-  :where(.kui-cascader-column + .kui-cascader-column) {
-    border-inline-start: 1px solid var(--border-neutral-l1);
-  }
-
-  :where(.kui-cascader-option) {
-    min-height: 32px;
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) auto;
-    align-items: center;
-    gap: var(--spacer-6);
-    padding: 0 var(--spacer-8);
-    color: var(--text-default);
-    background: transparent;
-    border: 0;
-    border-radius: var(--radius-4);
-    text-align: start;
-    cursor: pointer;
-  }
-
-  :where(.kui-cascader-option)::before {
-    min-width: 0;
-    overflow: hidden;
-    content: attr(data-label);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  :where(.kui-cascader-option[data-has-children='true'])::after {
-    content: '›';
-    color: var(--icon-secondary);
-  }
-
-  :where(.kui-cascader-option:hover, .kui-cascader-option[data-state='active']) {
-    color: var(--text-default-hover);
-    background: var(--bg-overlay-l2);
-  }
-
-  :where(.kui-cascader-option[data-state='selected']) {
-    color: var(--text-brand);
-    background: var(--bg-brand-popup);
-  }
-
-  :where(.kui-tree, .kui-tree-select-popup) {
-    min-width: 0;
-    padding: var(--spacer-4);
-    color: var(--text-default);
-    background: var(--bg-base-secondary);
-    border: 1px solid var(--border-neutral-l1);
-    border-radius: var(--radius-4);
-    font-size: var(--body-sm-font-size);
-    line-height: var(--body-sm-line-height);
-  }
-
-  :where(.kui-tree-row) {
-    height: 26px;
-    display: flex;
-    align-items: center;
-    gap: var(--spacer-6);
-    padding-inline: var(--spacer-4);
-    padding-inline-start: calc(var(--spacer-4) + (var(--kui-tree-depth, 0) * 16px));
-    color: var(--text-default);
-    border-radius: var(--radius-4);
-    cursor: pointer;
-    white-space: nowrap;
-  }
-
-  :where(.kui-tree-row[data-depth='0']) {
-    --kui-tree-depth: 0;
-  }
-
-  :where(.kui-tree-row[data-depth='1']) {
-    --kui-tree-depth: 1;
-  }
-
-  :where(.kui-tree-row[data-depth='2']) {
-    --kui-tree-depth: 2;
-  }
-
-  :where(.kui-tree-row[data-depth='3']) {
-    --kui-tree-depth: 3;
-  }
-
-  :where(.kui-tree-row:hover) {
-    background: var(--bg-overlay-l2);
-  }
-
-  :where(.kui-tree-row[data-state='active'], .kui-tree-row.is-active) {
-    color: var(--text-default-hover);
-    background: var(--bg-overlay-l3);
-  }
-
-  :where(.kui-tree-chevron, .kui-tree-icon) {
-    width: 14px;
-    height: 14px;
-    flex: 0 0 14px;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  :where(.kui-tree-chevron)::before {
-    content: '›';
-    color: var(--icon-secondary);
-  }
-
-  :where(.kui-tree-chevron[data-expanded='true'])::before {
-    transform: rotate(90deg);
-  }
-
-  :where(.kui-tree-chevron--leaf) {
-    visibility: hidden;
-  }
-
-  :where(.kui-tree-icon) {
-    width: 16px;
-    height: 16px;
-    flex-basis: 16px;
-    color: var(--icon-secondary);
-  }
-
-  :where(.kui-tree-icon)::before {
-    content: '□';
-  }
-
-  :where(.kui-tree-icon--folder)::before {
-    content: '▣';
-  }
-
-  :where(.kui-tree-icon--ts) {
-    color: var(--accent-blue);
-  }
-
-  :where(.kui-tree-icon--css) {
-    color: var(--code-attribute);
-  }
-
-  :where(.kui-tree-icon--json) {
-    color: var(--code-constant);
-  }
-
-  :where(.kui-tree-label) {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  :where(.kui-tree-select) {
-    position: relative;
-    display: grid;
-    gap: var(--spacer-4);
-  }
-
-  :where(.kui-tree-select-trigger) {
-    min-height: 32px;
-    width: 100%;
-    display: inline-flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 var(--spacer-8);
-    color: var(--text-default);
-    background: var(--bg-base-secondary);
-    border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-4);
-  }
-
-  :where(.kui-tree-select-trigger)::after {
-    content: attr(data-label);
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  :where(.kui-tree-select-popup) {
-    position: absolute;
-    inset-block-start: calc(100% + var(--spacer-4));
-    inset-inline: 0;
-    z-index: var(--z-index-dropdown);
-    max-height: 280px;
-    overflow: auto;
-    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
-  }
-
-  :where(.kui-adaptive-grid) {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--kui-grid-min, 240px)), 1fr));
-    gap: var(--spacer-12);
-  }
-
-  :where(.kui-button, .kui-input, .kui-textarea, .kui-select, .kui-switch) {
-    min-height: 32px;
-    border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-4);
-    transition:
-      background var(--transition-fast),
-      border-color var(--transition-fast),
-      color var(--transition-fast),
-      opacity var(--transition-fast);
-  }
-
-  :where(
-    .kui-density-comfortable,
-    [data-density='comfortable'] .kui-button,
-    [data-density='comfortable'] .kui-input,
-    [data-density='comfortable'] .kui-textarea,
-    [data-density='comfortable'] .kui-select,
-    [data-density='comfortable'] .kui-switch
-  ) {
-    min-height: 40px;
-  }
-
-  :where(.kui-button) {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--spacer-6);
-    padding: 0 var(--spacer-12);
-    font-weight: var(--font-weight-medium);
-    color: var(--text-onbrand);
-    background: var(--bg-brand);
-    border-color: var(--border-brand);
-    text-decoration: none;
-    cursor: pointer;
-  }
-
-  :where(.kui-button--soft) {
-    color: var(--text-brand);
-    background: var(--bg-brand-popup);
-  }
-
-  :where(.kui-button--ghost) {
-    color: var(--text-default);
-    background: transparent;
-    border-color: transparent;
-  }
-
-  :where(.kui-button--sm) {
-    min-height: 28px;
-    padding-inline: var(--spacer-8);
-  }
-
-  :where(.kui-button--lg) {
-    min-height: 40px;
-    padding-inline: var(--spacer-16);
-  }
-
-  :where(.kui-button--icon-only) {
-    width: 32px;
-    padding-inline: 0;
-  }
-
-  :where(.kui-button:hover:not(:disabled, [aria-disabled='true'])) {
-    background: var(--bg-brand-hover);
-  }
-
-  :where(.kui-input, .kui-textarea, .kui-select) {
-    width: 100%;
-    padding: 0 var(--spacer-8);
-    color: var(--text-default);
-    background: var(--bg-base-secondary);
-  }
-
-  :where(.kui-select) option:checked {
-    color: var(--text-onbrand);
-    background: var(--bg-brand);
-  }
-
-  :where(.kui-textarea) {
-    min-height: 80px;
-    padding-block: var(--spacer-8);
-    resize: vertical;
-  }
-
-  :where(.kui-checkbox, .kui-radio) {
-    accent-color: var(--bg-brand);
-  }
-
-  :where(.kui-switch) {
-    min-width: 44px;
-    padding: 2px;
-    background: var(--bg-base-tertiary);
-  }
-
-  :where(.kui-switch[data-state='checked']) {
-    background: var(--bg-brand);
-  }
-
-  :where(.kui-icon) {
-    width: 1em;
-    height: 1em;
-    display: inline-flex;
-    color: currentColor;
-  }
-
-  :where(.kui-skeleton) {
-    min-height: 1em;
-    display: block;
-    border-radius: var(--radius-4);
-    background: var(--bg-overlay-l3);
-  }
-
-  :where(.kui-skeleton-screen) {
-    min-width: 0;
-    display: grid;
-    gap: var(--spacer-6);
-  }
-
-  :where(.kui-skeleton-screen-row) {
-    height: 12px;
-    width: var(--kui-skeleton-width, 100%);
-  }
-
-  :where(.kui-spin) {
-    width: 1em;
-    height: 1em;
-    display: inline-block;
-    border: 2px solid var(--border-neutral-l2);
-    border-top-color: var(--border-brand);
-    border-radius: var(--radius-full);
-    animation: kui-spin 0.8s linear infinite;
-  }
-
-  :where(.kui-spin-overlay) {
-    min-width: 0;
-    display: inline-flex;
-    align-items: center;
-    gap: var(--spacer-6);
-    color: var(--text-secondary);
-  }
-
-  :where(.kui-button-loading) {
-    gap: var(--spacer-6);
-  }
-
-  :where(.kui-button-loading-indicator) {
-    margin-inline-start: var(--spacer-4);
-  }
-
-  :where(.kui-button-loading-label) {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  :where([data-disabled], [data-readonly], [data-loading], :disabled) {
-    cursor: not-allowed;
-    opacity: 0.56;
-  }
-
-  :where([data-invalid]) {
-    border-color: var(--status-error-default);
-  }
-
-  @media (pointer: coarse) {
-    :where(.kui-button, .kui-input, .kui-select, .kui-switch) {
-      min-height: 40px;
-    }
-  }
-
-  @keyframes kui-spin {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-}
-
-/* ---- calendar picker & calendar grid (2026-08-25, 方案 A 官方组件) ---- */
-:where(.kui-calendar-picker) {
-  position: relative;
-  display: inline-block;
-}
-
-:where(.kui-calendar-picker__input) {
-  width: 180px;
-  padding: 6px 10px;
-  border: 1px solid var(--border-neutral-l1);
-  border-radius: var(--radius-4);
-  background: var(--color-surface);
-  color: var(--color-foreground);
-  font-family: var(--body-base-font-family);
-  font-size: var(--font-size-md, 14px);
-  cursor: pointer;
-}
-
-:where(.kui-calendar-picker__input:hover) {
-  border-color: var(--border-neutral-l2);
-}
-
-:where(.kui-calendar-picker__input[disabled]) {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-:where(.kui-calendar-popover) {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
-  z-index: 20;
-  padding: 12px;
-  border: 1px solid var(--border-neutral-l1);
-  border-radius: var(--radius-8);
-  background: var(--color-surface);
-  box-shadow: 0 4px 16px rgb(0 0 0 / 0.12);
-  font-family: var(--body-base-font-family);
-}
-
-:where(.kui-calendar-popover[hidden]) {
-  display: none;
-}
-
-:where(.kui-calendar-header) {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacer-8, 8px);
-  margin-bottom: 8px;
-}
-
-:where(.kui-calendar-nav) {
-  width: 24px;
-  height: 24px;
-  border: none;
-  border-radius: var(--radius-4);
-  background: transparent;
-  color: var(--color-foreground);
-  cursor: pointer;
-  font-size: 14px;
-}
-
-:where(.kui-calendar-nav:hover) {
-  background: var(--color-surface-variant);
-}
-
-:where(.kui-calendar-nav[disabled]) {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-:where(.kui-calendar-title) {
-  font-size: var(--font-size-md, 14px);
-  font-weight: 600;
-}
-
-:where(.kui-calendar-weekday-row) {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 2px;
-  margin-bottom: 4px;
-}
-
-:where(.kui-calendar-weekday) {
-  text-align: center;
-  font-size: 12px;
-  color: var(--color-foreground-muted, var(--color-foreground));
-  opacity: 0.7;
-}
-
-:where(.kui-calendar-grid) {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 2px;
-}
-
-:where(.kui-calendar-day) {
-  width: 32px;
-  height: 32px;
-  border: none;
-  border-radius: var(--radius-4);
-  background: transparent;
-  color: var(--color-foreground);
-  cursor: pointer;
-  font-size: 13px;
-}
-
-:where(.kui-calendar-day:hover) {
-  background: var(--color-surface-variant);
-}
-
-:where(.kui-calendar-day[data-state='selected']) {
-  background: var(--color-primary);
-  color: var(--color-surface);
-  font-weight: 600;
-}
-
-:where(.kui-calendar-day[data-state='today']) {
-  outline: 1px solid var(--color-primary);
-  outline-offset: -1px;
-}
-
-:where(.kui-calendar-day[data-state='outside']) {
-  opacity: 0.4;
-}
-
-:where(.kui-calendar-day[data-state='disabled']) {
-  opacity: 0.35;
-  cursor: not-allowed;
-}
-/* ---- workbench shell: status bar / activity rail / titlebar / composer (2026-08-25) ---- */
-:where(.kui-status-bar) {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--spacer-24, 24px);
-  padding: 4px 12px;
-  background: var(--bg-base-secondary, var(--bg-base-default));
-  font-size: 12px;
-  color: var(--text-tertiary, var(--color-foreground));
-}
-
-:where(.kui-status-bar-item) {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  white-space: nowrap;
-}
-
-:where(.kui-status-bar-item[data-tone])::before {
-  content: '';
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-}
-
-:where(.kui-status-bar-item[data-tone='success'])::before {
-  background: var(--status-success-default, #16a34a);
-}
-:where(.kui-status-bar-item[data-tone='warning'])::before {
-  background: var(--status-warning-default, #d97706);
-}
-:where(.kui-status-bar-item[data-tone='error'])::before {
-  background: var(--status-error-default, #dc2626);
-}
-
-:where(.kui-activity-rail) {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 4px;
-  width: 48px;
-  padding: 8px 0;
-  background: var(--bg-base-secondary, var(--bg-base-default));
-}
-
-:where(.kui-activity-rail-button) {
-  width: 36px;
-  height: 36px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  border-radius: var(--radius-4, 4px);
-  background: transparent;
-  color: var(--icon-secondary, var(--color-foreground));
-  cursor: pointer;
-}
-
-:where(.kui-activity-rail-button:hover) {
-  background: var(--bg-overlay-l2, var(--color-surface-variant));
-}
-:where(.kui-activity-rail-button[data-state='active']) {
-  background: var(--bg-overlay-l3, var(--color-surface-variant));
-}
-:where(.kui-activity-rail-button[data-state='disabled']) {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-:where(.kui-activity-rail-divider) {
-  width: 28px;
-  height: 1px;
-  margin: 4px 0;
-  background: var(--border-neutral-l2, var(--border-neutral-l1));
-}
-
-:where(.kui-activity-rail-spacer) {
-  flex: 1;
-}
-
-:where(.kui-workbench-titlebar) {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 36px;
-  padding: 0 12px;
-  background: var(--bg-base-secondary, var(--bg-base-default));
-  border-bottom: 1px solid var(--border-neutral-l1);
-}
-
-:where(.kui-workbench-titlebar-left, .kui-workbench-titlebar-right) {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-:where(.kui-workbench-titlebar-light) {
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-}
-
-:where(.kui-workbench-titlebar-light[data-light='close']) {
-  background: var(--status-error-default, #dc2626);
-}
-:where(.kui-workbench-titlebar-light[data-light='min']) {
-  background: var(--status-warning-default, #d97706);
-}
-:where(.kui-workbench-titlebar-light[data-light='max']) {
-  background: var(--status-success-default, #16a34a);
-}
-
-:where(.kui-workbench-titlebar-mode-chip) {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 8px;
-  border-radius: var(--radius-full, 999px);
-  background: var(--bg-overlay-l2, var(--color-surface-variant));
-  font-size: 12px;
-}
-
-:where(.kui-workbench-titlebar-project-selector) {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 6px;
-  border: none;
-  background: transparent;
-  color: var(--color-foreground);
-  cursor: pointer;
-  font-size: 12px;
-}
-
-:where(.kui-workbench-titlebar-action) {
-  width: 26px;
-  height: 26px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  border-radius: var(--radius-4, 4px);
-  background: transparent;
-  color: var(--icon-secondary, var(--color-foreground));
-  cursor: pointer;
-}
-
-:where(.kui-workbench-titlebar-action:hover) {
-  background: var(--bg-overlay-l2, var(--color-surface-variant));
-}
-
-:where(.kui-chat-composer) {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 12px;
-  border: 1px solid var(--border-neutral-l1);
-  border-radius: var(--radius-8, 8px);
-  background: var(--color-surface);
-}
-
-:where(.kui-chat-composer-input) {
-  width: 100%;
-  min-height: 40px;
-  border: none;
-  outline: none;
-  resize: none;
-  background: transparent;
-  color: var(--color-foreground);
-  font-family: var(--body-base-font-family);
-  font-size: 14px;
-}
-
-:where(.kui-chat-composer-toolbar) {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
-
-:where(.kui-chat-composer-tools, .kui-chat-composer-actions) {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-:where(.kui-chat-composer-tool, .kui-chat-composer-action) {
-  width: 28px;
-  height: 28px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  border-radius: var(--radius-4, 4px);
-  background: transparent;
-  color: var(--icon-secondary, var(--color-foreground));
-  cursor: pointer;
-}
-
-:where(.kui-chat-composer-tool:hover, .kui-chat-composer-action:hover) {
-  background: var(--bg-overlay-l2, var(--color-surface-variant));
-}
-
-:where(.kui-chat-composer-model) {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px 8px;
-  border: none;
-  border-radius: var(--radius-4, 4px);
-  background: var(--bg-overlay-l2, var(--color-surface-variant));
-  color: var(--color-foreground);
-  cursor: pointer;
-  font-size: 12px;
-}
-
-/* ---- nav list (2026-08-25) ---- */
-:where(.kui-nav-list) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacer-8, 8px);
-  width: 220px;
-  padding: 8px;
-}
-
-:where(.kui-nav-list-group) {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-:where(.kui-nav-list-group-title) {
-  padding: 4px 8px;
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--text-tertiary, var(--color-foreground));
-  opacity: 0.7;
-}
-
-:where(.kui-nav-list-item) {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 8px;
-  border: none;
-  border-radius: var(--radius-4, 4px);
-  background: transparent;
-  color: var(--text-secondary, var(--color-foreground));
-  text-decoration: none;
-  cursor: pointer;
-  font: inherit;
-  font-size: 13px;
-}
-
-:where(.kui-nav-list-item:hover) {
-  background: var(--bg-overlay-l2, var(--color-surface-variant));
-}
-:where(.kui-nav-list-item[data-state='active']) {
-  background: var(--bg-overlay-l3, var(--color-surface-variant));
-  color: var(--text-default, var(--color-foreground));
-  font-weight: 500;
-}
-:where(.kui-nav-list-item[data-state='disabled']) {
-  opacity: 0.45;
-  cursor: not-allowed;
-}
-
-:where(.kui-nav-list-badge) {
-  margin-left: auto;
-  padding: 0 6px;
-  border-radius: var(--radius-full, 999px);
-  background: var(--bg-overlay-l3, var(--color-surface-variant));
-  font-size: 11px;
-}
-
-/* ---- setting row (2026-08-25) ---- */
-:where(.kui-setting-row-group) {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-:where(.kui-setting-row-group-label) {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-tertiary, var(--color-foreground));
-}
-
-:where(.kui-setting-row-panel) {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid var(--border-neutral-l1);
-  border-radius: var(--radius-8, 8px);
-  overflow: hidden;
-}
-
-:where(.kui-setting-row) {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 12px 16px;
-}
-
-:where(.kui-setting-row + .kui-setting-row) {
-  border-top: 1px solid var(--border-neutral-l1);
-}
-
-:where(.kui-setting-row-main) {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-:where(.kui-setting-row-title) {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--color-foreground);
-}
-
-:where(.kui-setting-row-description) {
-  font-size: 12px;
-  color: var(--text-tertiary, var(--color-foreground));
-  opacity: 0.75;
-}
-
-:where(.kui-setting-row-control) {
-  padding: 4px 10px;
-  border: 1px solid var(--border-neutral-l1);
-  border-radius: var(--radius-4, 4px);
-  background: var(--color-surface);
-  color: var(--color-foreground);
-  cursor: pointer;
-  font-size: 12px;
-  white-space: nowrap;
-}
-
-:where(.kui-setting-row-control[data-state='danger']) {
-  border-color: var(--status-error-default, #dc2626);
-  color: var(--status-error-default, #dc2626);
-}
-
-:where(.kui-setting-row-control[data-state='disabled']) {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-/* ---- extras: date range picker / descriptions / timeline / rate / color picker / transfer (2026-08-25) ---- */
-:where(.kui-date-range-picker) {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-}
-
-:where(.kui-date-range-input) {
-  width: 140px;
-  padding: 6px 10px;
-  border: 1px solid var(--border-neutral-l1);
-  border-radius: var(--radius-4, 4px);
-  background: var(--color-surface);
-  color: var(--color-foreground);
-  font-family: var(--body-base-font-family);
-  font-size: 13px;
-  cursor: pointer;
-}
-
-:where(.kui-date-range-separator) {
-  color: var(--text-tertiary, var(--color-foreground));
-  font-size: 13px;
-}
-
-:where(.kui-date-range-popover) {
-  position: absolute;
-  display: flex;
-  gap: 16px;
-  padding: 12px;
-  border: 1px solid var(--border-neutral-l1);
-  border-radius: var(--radius-8, 8px);
-  background: var(--color-surface);
-  box-shadow: 0 4px 16px rgb(0 0 0 / 0.12);
-  z-index: 20;
-}
-
-:where(.kui-date-range-popover[data-state='hidden']) {
-  display: none;
-}
-
-:where(.kui-descriptions) {
-  display: grid;
-  gap: 8px 24px;
-  font-family: var(--body-base-font-family);
-  font-size: 13px;
-}
-
-:where(.kui-descriptions[data-state='vertical']) {
-  grid-template-columns: 1fr;
-}
-
-:where(.kui-descriptions[data-state='horizontal']) {
-  grid-template-columns: auto 1fr;
-}
-
-:where(.kui-descriptions[data-bordered='true']) {
-  border: 1px solid var(--border-neutral-l1);
-  border-radius: var(--radius-8, 8px);
-  padding: 12px 16px;
-}
-
-:where(.kui-descriptions-label) {
-  color: var(--text-tertiary, var(--color-foreground));
-  opacity: 0.75;
-}
-
-:where(.kui-descriptions-value) {
-  margin: 0;
-  color: var(--color-foreground);
-}
-
-:where(.kui-timeline) {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  font-family: var(--body-base-font-family);
-}
-
-:where(.kui-timeline-title) {
-  font-size: 13px;
-  font-weight: 500;
-  color: var(--color-foreground);
-}
-
-:where(.kui-timeline-description) {
-  font-size: 12px;
-  color: var(--text-tertiary, var(--color-foreground));
-}
-
-:where(.kui-timeline-time) {
-  font-size: 12px;
-  color: var(--text-tertiary, var(--color-foreground));
-  opacity: 0.75;
-}
-
-:where(.kui-rate) {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-}
-
-:where(.kui-rate-star) {
-  width: 22px;
-  height: 22px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  background: transparent;
-  color: var(--border-neutral-l2, var(--color-foreground));
-  cursor: pointer;
-  font-size: 16px;
-}
-
-:where(.kui-rate-star[data-state='active']) {
-  color: var(--status-warning-default, #d97706);
-}
-
-:where(.kui-rate-star[data-state='disabled']) {
-  cursor: not-allowed;
-  opacity: 0.4;
-}
-
-:where(.kui-color-picker) {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-}
-
-:where(.kui-color-picker-input) {
-  width: 36px;
-  height: 28px;
-  padding: 0;
-  border: 1px solid var(--border-neutral-l1);
-  border-radius: var(--radius-4, 4px);
-  background: var(--color-surface);
-  cursor: pointer;
-}
-
-:where(.kui-color-picker-preview) {
-  width: 18px;
-  height: 18px;
-  border: 1px solid var(--border-neutral-l1);
-  border-radius: var(--radius-4, 4px);
-  background: var(--bg-overlay-l2, var(--color-surface-variant));
-}
-
-:where(.kui-color-picker-value) {
-  font-size: 12px;
-  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
-  color: var(--text-tertiary, var(--color-foreground));
-}
-
-:where(.kui-transfer) {
-  display: flex;
-  align-items: stretch;
-  gap: 12px;
-  font-family: var(--body-base-font-family);
-}
-
-:where(.kui-transfer-pane) {
-  flex: 1;
-  min-width: 160px;
-  border: 1px solid var(--border-neutral-l1);
-  border-radius: var(--radius-8, 8px);
-  overflow: hidden;
-}
-
-:where(.kui-transfer-list) {
-  list-style: none;
-  margin: 0;
-  padding: 4px;
-  max-height: 240px;
-  overflow-y: auto;
-}
-
-:where(.kui-transfer-actions) {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 8px;
-}
-
-:where(.kui-transfer-action) {
-  width: 28px;
-  height: 28px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--border-neutral-l1);
-  border-radius: var(--radius-4, 4px);
-  background: var(--color-surface);
-  color: var(--color-foreground);
-  cursor: pointer;
-}
-
-:where(.kui-transfer-action:hover) {
-  background: var(--bg-overlay-l2, var(--color-surface-variant));
-}
-/* ---- extras2: number input / image / back top / mask input (2026-08-25) ---- */
-:where(.kui-number-input) {
-  display: inline-flex;
-  align-items: stretch;
-  border: 1px solid var(--border-neutral-l1);
-  border-radius: var(--radius-4, 4px);
-  background: var(--color-surface);
-  overflow: hidden;
-}
-
-:where(.kui-number-input[data-invalid='true']) {
-  border-color: var(--status-error-default, #dc2626);
-}
-
-:where(.kui-number-input-field) {
-  width: 72px;
-  padding: 6px 8px;
-  border: none;
-  outline: none;
-  background: transparent;
-  color: var(--color-foreground);
-  font-family: var(--body-base-font-family);
-  font-size: 13px;
-  text-align: center;
-}
-
-:where(.kui-number-input-step) {
-  width: 28px;
-  border: none;
-  background: transparent;
-  color: var(--text-tertiary, var(--color-foreground));
-  cursor: pointer;
-  font-size: 14px;
-}
-
-:where(.kui-number-input-step:hover) {
-  background: var(--bg-overlay-l2, var(--color-surface-variant));
-}
-:where(.kui-number-input-step[data-state='disabled']) {
-  opacity: 0.35;
-  cursor: not-allowed;
-}
-
-:where(.kui-image) {
-  display: inline-block;
-  margin: 0;
-}
-
-:where(.kui-image-figure) {
-  max-width: 100%;
-  border-radius: var(--radius-4, 4px);
-  cursor: default;
-}
-
-:where(.kui-image[data-state='preview'] .kui-image-figure) {
-  cursor: zoom-in;
-}
-
-:where(.kui-image-caption) {
-  margin-top: 4px;
-  font-size: 12px;
-  color: var(--text-tertiary, var(--color-foreground));
-  text-align: center;
-}
-
-:where(.kui-image-overlay) {
-  position: fixed;
-  inset: 0;
-  z-index: 100;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgb(0 0 0 / 0.7);
-}
-
-:where(.kui-image-overlay[data-state='hidden']) {
-  display: none;
-}
-
-:where(.kui-image-overlay-close) {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  width: 32px;
-  height: 32px;
-  border: none;
-  border-radius: var(--radius-4, 4px);
-  background: rgb(255 255 255 / 0.15);
-  color: #fff;
-  cursor: pointer;
-}
-
-:where(.kui-back-top) {
-  position: fixed;
-  right: 24px;
-  bottom: 24px;
-  z-index: 50;
-  width: 40px;
-  height: 40px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid var(--border-neutral-l1);
-  border-radius: var(--radius-full, 999px);
-  background: var(--color-surface);
-  color: var(--color-foreground);
-  box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
-  cursor: pointer;
-}
-
-:where(.kui-back-top:hover) {
-  background: var(--bg-overlay-l2, var(--color-surface-variant));
-}
-:where(.kui-back-top[data-state='hidden']) {
-  display: none;
-}
-
-:where(.kui-mask-input) {
-  display: inline-block;
-}
-
-:where(.kui-mask-input[data-invalid='true']) .kui-mask-input-field {
-  border-color: var(--status-error-default, #dc2626);
-}
-
-:where(.kui-mask-input-field) {
-  width: 200px;
-  padding: 6px 10px;
-  border: 1px solid var(--border-neutral-l1);
-  border-radius: var(--radius-4, 4px);
-  background: var(--color-surface);
-  color: var(--color-foreground);
-  font-family: var(--body-base-font-family);
-  font-size: 13px;
-}
-
-:where(.kui-mask-input-field:focus) {
-  outline: none;
-  border-color: var(--color-primary);
-}
-
-:where(.kui-mask-input-field[disabled]) {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-/* ---- highlight & code block (2026-08-25) ---- */
-:where(mark.kui-highlight) {
-  background: var(--status-warning-default, #d97706);
-  color: var(--color-surface, #ffffff);
-  border-radius: var(--radius-2, 2px);
-  padding: 0 2px;
-}
-
-:where(.kui-code-block) {
-  margin: 0;
-  border: 1px solid var(--border-neutral-l1);
-  border-radius: var(--radius-8, 8px);
-  overflow: hidden;
-  font-family: var(--body-base-font-family);
-  background: var(--color-surface);
-}
-
-:where(.kui-code-block-header) {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 6px 12px;
-  background: var(--bg-overlay-l2, var(--color-surface-variant));
-  border-bottom: 1px solid var(--border-neutral-l1);
-}
-
-:where(.kui-code-block-language) {
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--text-tertiary, var(--color-foreground));
-}
-
-:where(.kui-code-block-copy) {
-  padding: 2px 8px;
-  border: none;
-  border-radius: var(--radius-4, 4px);
-  background: transparent;
-  color: var(--text-tertiary, var(--color-foreground));
-  cursor: pointer;
-  font-size: 12px;
-}
-
-:where(.kui-code-block-copy:hover) {
-  background: var(--bg-overlay-l3, var(--color-surface-variant));
-}
-:where(.kui-code-block-copy[hidden]) {
-  display: none;
-}
-
-:where(.kui-code-block-code) {
-  margin: 0;
-  padding: 12px 16px;
-  overflow-x: auto;
-  font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;
-  font-size: 13px;
-  line-height: 1.6;
-  color: var(--color-foreground);
-}
-
-:where(.kui-code-block-line-numbers) {
-  float: left;
-  margin-right: 12px;
-  padding-right: 12px;
-  border-right: 1px solid var(--border-neutral-l1);
-  color: var(--text-tertiary, var(--color-foreground));
-  opacity: 0.6;
-  text-align: right;
-  user-select: none;
-}