@qeetrix/react 0.0.1 → 0.0.4

package/dist/styles.css

@@ -10,3 +10,4551 @@
     box-sizing: border-box;
   }
 }
+
+@layer qx.components {
+  .qx-accordion {
+    border-block-end: var(--qx-border-width-default) solid var(--qx-color-border-subtle);
+    flex-direction: column;
+    min-inline-size: 0;
+    display: flex;
+  }
+  
+  .qx-accordion-item {
+    border-block-start: var(--qx-border-width-default) solid var(--qx-color-border-subtle);
+  }
+  
+  .qx-accordion-header {
+    margin: 0;
+  }
+  
+  .qx-accordion-trigger {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--qx-space-gap-md);
+    inline-size: 100%;
+    min-block-size: var(--qx-size-control-lg);
+    color: var(--qx-color-text-default);
+    font: var(--qx-typography-title-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-heading);
+    text-align: start;
+    cursor: pointer;
+    background: none;
+    border: 0;
+    padding: 0;
+    display: flex;
+  }
+  
+  .qx-accordion-trigger:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: calc(-1 * var(--qx-focus-ring-width));
+  }
+  
+  .qx-accordion-trigger[data-disabled] {
+    color: var(--qx-color-text-disabled);
+    cursor: not-allowed;
+  }
+  
+  .qx-accordion-icon {
+    color: var(--qx-color-icon-subtle);
+    transition-property: rotate;
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    flex: none;
+  }
+  
+  [data-panel-open] > .qx-accordion-icon {
+    rotate: 180deg;
+  }
+  
+  .qx-accordion-panel, .qx-collapsible-panel {
+    block-size: var(--accordion-panel-height, var(--collapsible-panel-height));
+    transition-property: block-size;
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    overflow: hidden;
+  }
+  
+  :is(.qx-accordion-panel, .qx-collapsible-panel)[data-starting-style], :is(.qx-accordion-panel, .qx-collapsible-panel)[data-ending-style] {
+    block-size: 0;
+  }
+  
+  .qx-accordion-content {
+    padding-block-end: var(--qx-space-inset-lg);
+  }
+}
+
+@layer qx.components {
+  .qx-avatar {
+    border-radius: var(--qx-radius-full);
+    background: var(--qx-color-bg-neutral-subtle-pressed);
+    block-size: 32px;
+    inline-size: 32px;
+    color: var(--qx-color-text-default);
+    font: var(--qx-typography-label-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    vertical-align: middle;
+    -webkit-user-select: none;
+    user-select: none;
+    flex: none;
+    place-items: center;
+    display: inline-grid;
+    overflow: hidden;
+  }
+  
+  .qx-avatar[data-size="sm"] {
+    block-size: 24px;
+    inline-size: 24px;
+    font-size: var(--qx-typography-label-sm-font-size);
+  }
+  
+  .qx-avatar[data-size="lg"] {
+    block-size: 40px;
+    inline-size: 40px;
+    font: var(--qx-typography-label-md);
+  }
+  
+  .qx-avatar[data-size="xl"] {
+    block-size: 48px;
+    inline-size: 48px;
+    font: var(--qx-typography-label-md);
+  }
+  
+  .qx-avatar-image {
+    object-fit: cover;
+    block-size: 100%;
+    inline-size: 100%;
+  }
+  
+  @media (forced-colors: active) {
+    .qx-avatar {
+      border: var(--qx-border-width-default) solid CanvasText;
+    }
+  }
+}
+
+@layer qx.components {
+  .qx-badge {
+    align-items: center;
+    gap: var(--qx-space-gap-xs);
+    border-radius: var(--qx-radius-chip);
+    background: var(--qx-color-bg-neutral-subtle-pressed);
+    max-inline-size: 100%;
+    color: var(--qx-color-text-default);
+    font: var(--qx-typography-label-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    white-space: nowrap;
+    vertical-align: middle;
+    padding: 2px 8px;
+    display: inline-flex;
+  }
+  
+  .qx-badge[data-tone="brand"] {
+    background: var(--qx-color-bg-brand-subtle);
+    color: var(--qx-color-text-brand);
+  }
+  
+  .qx-badge[data-tone="info"] {
+    background: var(--qx-color-bg-info-subtle);
+    color: var(--qx-color-text-info);
+  }
+  
+  .qx-badge[data-tone="success"] {
+    background: var(--qx-color-bg-success-subtle);
+    color: var(--qx-color-text-success);
+  }
+  
+  .qx-badge[data-tone="warning"] {
+    background: var(--qx-color-bg-warning-subtle);
+    color: var(--qx-color-text-warning);
+  }
+  
+  .qx-badge[data-tone="danger"] {
+    background: var(--qx-color-bg-danger-subtle);
+    color: var(--qx-color-text-danger);
+  }
+  
+  .qx-badge-icon {
+    flex: none;
+  }
+  
+  .qx-badge-label {
+    text-overflow: ellipsis;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+  
+  @media (forced-colors: active) {
+    .qx-badge {
+      border: var(--qx-border-width-default) solid CanvasText;
+    }
+  }
+}
+
+@layer qx.components {
+  .qx-box[data-padding="none"] {
+    padding: 0;
+  }
+  
+  .qx-box[data-padding="xs"] {
+    padding: var(--qx-space-inset-xs);
+  }
+  
+  .qx-box[data-padding="sm"] {
+    padding: var(--qx-space-inset-sm);
+  }
+  
+  .qx-box[data-padding="md"] {
+    padding: var(--qx-space-inset-md);
+  }
+  
+  .qx-box[data-padding="lg"] {
+    padding: var(--qx-space-inset-lg);
+  }
+  
+  .qx-box[data-padding="xl"] {
+    padding: var(--qx-space-inset-xl);
+  }
+  
+  .qx-box[data-padding-inline="none"] {
+    padding-inline: 0;
+  }
+  
+  .qx-box[data-padding-inline="xs"] {
+    padding-inline: var(--qx-space-inset-xs);
+  }
+  
+  .qx-box[data-padding-inline="sm"] {
+    padding-inline: var(--qx-space-inset-sm);
+  }
+  
+  .qx-box[data-padding-inline="md"] {
+    padding-inline: var(--qx-space-inset-md);
+  }
+  
+  .qx-box[data-padding-inline="lg"] {
+    padding-inline: var(--qx-space-inset-lg);
+  }
+  
+  .qx-box[data-padding-inline="xl"] {
+    padding-inline: var(--qx-space-inset-xl);
+  }
+  
+  .qx-box[data-padding-block="none"] {
+    padding-block: 0;
+  }
+  
+  .qx-box[data-padding-block="xs"] {
+    padding-block: var(--qx-space-inset-xs);
+  }
+  
+  .qx-box[data-padding-block="sm"] {
+    padding-block: var(--qx-space-inset-sm);
+  }
+  
+  .qx-box[data-padding-block="md"] {
+    padding-block: var(--qx-space-inset-md);
+  }
+  
+  .qx-box[data-padding-block="lg"] {
+    padding-block: var(--qx-space-inset-lg);
+  }
+  
+  .qx-box[data-padding-block="xl"] {
+    padding-block: var(--qx-space-inset-xl);
+  }
+  
+  .qx-box[data-background="canvas"] {
+    background: var(--qx-color-surface-canvas);
+  }
+  
+  .qx-box[data-background="default"] {
+    background: var(--qx-color-surface-default);
+  }
+  
+  .qx-box[data-background="raised"] {
+    background: var(--qx-color-surface-raised);
+  }
+  
+  .qx-box[data-background="sunken"] {
+    background: var(--qx-color-surface-sunken);
+  }
+  
+  .qx-box[data-background="overlay"] {
+    background: var(--qx-color-surface-overlay);
+  }
+  
+  .qx-box[data-background="inverse"] {
+    background: var(--qx-color-surface-inverse);
+  }
+  
+  .qx-box[data-background="neutral"] {
+    background: var(--qx-color-bg-neutral-subtle);
+  }
+  
+  .qx-box[data-background="brand"] {
+    background: var(--qx-color-bg-brand-subtle);
+  }
+  
+  .qx-box[data-background="selected"] {
+    background: var(--qx-color-bg-selected);
+  }
+  
+  .qx-box[data-background="inverse"] {
+    color: var(--qx-color-text-inverse);
+  }
+  
+  .qx-box[data-border="none"] {
+    border: 0;
+  }
+  
+  .qx-box[data-border="subtle"] {
+    border: var(--qx-border-width-default) solid var(--qx-color-border-subtle);
+  }
+  
+  .qx-box[data-border="default"] {
+    border: var(--qx-border-width-default) solid var(--qx-color-border-default);
+  }
+  
+  .qx-box[data-border="strong"] {
+    border: var(--qx-border-width-default) solid var(--qx-color-border-strong);
+  }
+  
+  .qx-box[data-radius="none"] {
+    border-radius: var(--qx-radius-none);
+  }
+  
+  .qx-box[data-radius="sm"] {
+    border-radius: var(--qx-radius-sm);
+  }
+  
+  .qx-box[data-radius="control"] {
+    border-radius: var(--qx-radius-control);
+  }
+  
+  .qx-box[data-radius="surface"] {
+    border-radius: var(--qx-radius-surface);
+  }
+  
+  .qx-box[data-radius="overlay"] {
+    border-radius: var(--qx-radius-overlay);
+  }
+  
+  .qx-box[data-radius="modal"] {
+    border-radius: var(--qx-radius-modal);
+  }
+  
+  .qx-box[data-radius="chip"] {
+    border-radius: var(--qx-radius-chip);
+  }
+  
+  .qx-box[data-radius="full"] {
+    border-radius: var(--qx-radius-full);
+  }
+}
+
+@layer qx.components {
+  .qx-button {
+    block-size: var(--qx-size-control-md);
+    border-radius: var(--qx-radius-control);
+    font: var(--qx-typography-label-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    white-space: nowrap;
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    transition-property: background-color, color, box-shadow;
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    border: 0;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    padding-inline: 14px 0;
+    text-decoration: none;
+    display: inline-flex;
+    position: relative;
+  }
+  
+  .qx-button:not([data-icon]):not([data-loading]) {
+    padding-inline: 14px;
+  }
+  
+  .qx-button[data-size="sm"] {
+    block-size: var(--qx-size-control-sm);
+    font-size: var(--qx-typography-label-sm-font-size);
+    line-height: var(--qx-typography-label-sm-line-height);
+    gap: 8px;
+    padding-inline: 10px 0;
+  }
+  
+  .qx-button[data-size="sm"]:not([data-icon]):not([data-loading]) {
+    padding-inline: 10px;
+  }
+  
+  .qx-button[data-size="lg"] {
+    block-size: var(--qx-size-control-lg);
+    gap: 14px;
+    padding-inline: 16px 0;
+  }
+  
+  .qx-button[data-size="lg"]:not([data-icon]):not([data-loading]) {
+    padding-inline: 16px;
+  }
+  
+  .qx-button[data-full-width] {
+    inline-size: 100%;
+  }
+  
+  .qx-button[data-variant="solid"] {
+    background: var(--qx-color-bg-brand-bold);
+    color: var(--qx-color-text-on-brand);
+  }
+  
+  .qx-button[data-variant="solid"]:hover:not([data-disabled]) {
+    background: var(--qx-color-bg-brand-bold-hover);
+  }
+  
+  .qx-button[data-variant="solid"]:active:not([data-disabled]) {
+    background: var(--qx-color-bg-brand-bold-pressed);
+  }
+  
+  .qx-button[data-variant="soft"] {
+    background: var(--qx-color-bg-neutral-bold);
+    color: var(--qx-color-text-inverse);
+  }
+  
+  .qx-button[data-variant="soft"]:hover:not([data-disabled]) {
+    background: var(--qx-color-bg-neutral-bold-hover);
+  }
+  
+  .qx-button[data-variant="soft"]:active:not([data-disabled]) {
+    background: var(--qx-color-bg-neutral-bold-pressed);
+  }
+  
+  .qx-button[data-variant="ghost"] {
+    color: var(--qx-color-text-brand);
+    background: none;
+  }
+  
+  .qx-button[data-variant="ghost"]:hover:not([data-disabled]) {
+    background: var(--qx-color-bg-brand-subtle);
+  }
+  
+  .qx-button[data-variant="ghost"]:active:not([data-disabled]) {
+    background: var(--qx-color-bg-brand-subtle-pressed);
+  }
+  
+  .qx-button[data-tone="danger"]:not([data-variant="ghost"]) {
+    background: var(--qx-color-bg-danger-bold);
+    color: var(--qx-color-text-on-bold);
+  }
+  
+  .qx-button[data-tone="danger"]:not([data-variant="ghost"]):hover:not([data-disabled]) {
+    background: var(--qx-color-bg-danger-bold-hover);
+  }
+  
+  .qx-button[data-tone="danger"]:not([data-variant="ghost"]):active:not([data-disabled]) {
+    background: var(--qx-color-bg-danger-bold-pressed);
+  }
+  
+  .qx-button[data-tone="danger"][data-variant="ghost"] {
+    color: var(--qx-color-text-danger);
+  }
+  
+  .qx-button[data-tone="danger"][data-variant="ghost"]:hover:not([data-disabled]) {
+    background: var(--qx-color-bg-danger-subtle);
+  }
+  
+  .qx-button[data-tone="neutral"][data-variant="ghost"] {
+    color: var(--qx-color-text-subtle);
+  }
+  
+  .qx-button[data-tone="neutral"][data-variant="ghost"]:hover:not([data-disabled]) {
+    background: var(--qx-color-bg-neutral-subtle);
+    color: var(--qx-color-text-default);
+  }
+  
+  .qx-button[data-tone="neutral"][data-variant="ghost"]:active:not([data-disabled]) {
+    background: var(--qx-color-bg-neutral-subtle-pressed);
+  }
+  
+  .qx-button[data-tone="neutral"]:not([data-variant="ghost"]) {
+    background: var(--qx-color-bg-neutral-bold);
+    color: var(--qx-color-text-inverse);
+  }
+  
+  .qx-button[data-disabled]:not([data-loading]) {
+    background: var(--qx-color-bg-disabled);
+    color: var(--qx-color-text-disabled);
+    cursor: not-allowed;
+  }
+  
+  .qx-button[data-variant="ghost"][data-disabled]:not([data-loading]) {
+    background: none;
+  }
+  
+  .qx-button[data-loading] {
+    cursor: progress;
+  }
+  
+  .qx-button:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: calc(-1 * var(--qx-focus-ring-width));
+    box-shadow: inset 0 0 0 calc(var(--qx-focus-ring-width) + var(--qx-border-width-default))
+        var(--qx-color-surface-default);
+  }
+  
+  .qx-button .qx-button-label {
+    text-overflow: ellipsis;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+  
+  .qx-button .qx-button-icon {
+    flex: none;
+  }
+  
+  .qx-button-zone {
+    flex: none;
+    align-self: stretch;
+    place-items: center;
+    padding-inline: 10px;
+    display: grid;
+    position: relative;
+  }
+  
+  .qx-button-zone:before {
+    content: "";
+    inline-size: var(--qx-border-width-default);
+    block-size: var(--qx-size-icon-sm);
+    opacity: .55;
+    background: currentColor;
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 0;
+    translate: 0 -50%;
+  }
+  
+  .qx-button[data-size="sm"] > .qx-button-zone {
+    padding-inline: 8px;
+  }
+  
+  .qx-button[data-size="sm"] > .qx-button-zone:before {
+    block-size: var(--qx-size-icon-xs);
+  }
+  
+  .qx-button[data-size="lg"] > .qx-button-zone {
+    padding-inline: 12px;
+  }
+  
+  .qx-button[data-size="lg"] > .qx-button-zone:before {
+    block-size: var(--qx-size-icon-md);
+  }
+  
+  .qx-icon-button {
+    inline-size: var(--qx-size-control-md);
+    justify-content: center;
+    padding-inline: 0;
+  }
+  
+  .qx-icon-button[data-size="sm"] {
+    inline-size: var(--qx-size-control-sm);
+    padding-inline: 0;
+  }
+  
+  .qx-icon-button[data-size="lg"] {
+    inline-size: var(--qx-size-control-lg);
+    padding-inline: 0;
+  }
+  
+  .qx-icon-button:not([data-icon]):not([data-loading]) {
+    padding-inline: 0;
+  }
+  
+  @media (forced-colors: active) {
+    .qx-button {
+      border: var(--qx-border-width-default) solid ButtonText;
+    }
+  
+    .qx-button[data-disabled]:not([data-loading]) {
+      color: graytext;
+      border-color: graytext;
+    }
+  
+    .qx-button-zone:before {
+      opacity: 1;
+      background: buttontext;
+    }
+  
+    .qx-button[data-disabled]:not([data-loading]) .qx-button-zone:before {
+      background: graytext;
+    }
+  }
+}
+
+@layer qx.components {
+  .qx-card {
+    border: var(--qx-border-width-default) solid var(--qx-color-border-default);
+    border-radius: var(--qx-radius-surface);
+    background: var(--qx-color-surface-raised);
+    min-inline-size: 0;
+    color: var(--qx-color-text-default);
+    flex-direction: column;
+    display: flex;
+    overflow: hidden;
+  }
+  
+  .qx-card-header {
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: var(--qx-space-gap-md);
+    padding: var(--qx-space-inset-lg);
+    border-block-end: var(--qx-border-width-default) solid var(--qx-color-border-default);
+    display: flex;
+  }
+  
+  .qx-card-heading {
+    gap: var(--qx-space-gap-xs);
+    flex-direction: column;
+    min-inline-size: 0;
+    display: flex;
+  }
+  
+  .qx-card-description {
+    font: var(--qx-typography-body-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-subtle);
+    margin: 0;
+  }
+  
+  .qx-card-actions {
+    gap: var(--qx-space-gap-sm);
+    flex: none;
+    margin-block: -4px;
+    display: flex;
+  }
+  
+  .qx-card-body {
+    min-inline-size: 0;
+    padding: var(--qx-space-inset-lg);
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    flex: 1;
+  }
+  
+  .qx-card-body > :is(.qx-table, .qx-scroll-area) {
+    inline-size: calc(100% + 2 * var(--qx-space-inset-lg));
+    margin-inline: calc(-1 * var(--qx-space-inset-lg));
+  }
+  
+  .qx-card-body > :is(.qx-table, .qx-scroll-area):first-child {
+    margin-block-start: calc(-1 * var(--qx-space-inset-lg));
+  }
+  
+  .qx-card-body > :is(.qx-table, .qx-scroll-area):last-child {
+    margin-block-end: calc(-1 * var(--qx-space-inset-lg));
+  }
+  
+  .qx-card-footer {
+    justify-content: flex-end;
+    gap: var(--qx-space-gap-sm);
+    padding: var(--qx-space-inset-md);
+    border-block-start: var(--qx-border-width-default) solid var(--qx-color-border-default);
+    flex-wrap: wrap;
+    display: flex;
+  }
+}
+
+@layer qx.components {
+  .qx-checkbox {
+    border: var(--qx-border-width-default) solid var(--qx-color-border-strong);
+    border-radius: var(--qx-radius-sm);
+    background: var(--qx-color-bg-input);
+    block-size: 16px;
+    inline-size: 16px;
+    color: var(--qx-color-icon-on-brand);
+    cursor: pointer;
+    transition-property: background-color, border-color;
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    flex: none;
+    place-items: center;
+    display: inline-grid;
+  }
+  
+  .qx-checkbox:hover:not([data-disabled], [data-readonly]) {
+    border-color: var(--qx-color-border-strong-hover);
+  }
+  
+  .qx-checkbox[data-invalid] {
+    border-color: var(--qx-color-border-danger);
+  }
+  
+  .qx-checkbox:is([data-checked], [data-indeterminate]) {
+    border-color: var(--qx-color-bg-brand-bold);
+    background: var(--qx-color-bg-brand-bold);
+  }
+  
+  .qx-checkbox:is([data-checked], [data-indeterminate]):hover:not([data-disabled], [data-readonly]) {
+    border-color: var(--qx-color-bg-brand-bold-hover);
+    background: var(--qx-color-bg-brand-bold-hover);
+  }
+  
+  .qx-checkbox[data-disabled] {
+    border-color: var(--qx-color-border-disabled);
+    background: var(--qx-color-bg-disabled);
+    color: var(--qx-color-icon-disabled);
+    cursor: not-allowed;
+  }
+  
+  .qx-checkbox[data-readonly] {
+    cursor: default;
+  }
+  
+  .qx-checkbox:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: var(--qx-focus-ring-offset);
+  }
+  
+  .qx-checkbox-mark {
+    display: flex;
+  }
+  
+  @media (forced-colors: active) {
+    .qx-checkbox:is([data-checked], [data-indeterminate]):not([data-disabled]) {
+      forced-color-adjust: none;
+      color: highlighttext;
+      background: highlight;
+      border-color: highlight;
+    }
+  }
+}
+
+@layer qx.components {
+  .qx-dialog-backdrop {
+    z-index: var(--qx-z-overlay);
+    background: var(--qx-color-overlay-scrim);
+    transition-property: opacity;
+    transition-duration: var(--qx-motion-duration-slow);
+    transition-timing-function: var(--qx-motion-easing-enter);
+    position: fixed;
+    inset: 0;
+  }
+  
+  .qx-dialog-backdrop[data-starting-style], .qx-dialog-backdrop[data-ending-style] {
+    opacity: 0;
+  }
+  
+  .qx-dialog-backdrop[data-ending-style] {
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-exit);
+  }
+  
+  .qx-dialog-viewport {
+    z-index: var(--qx-z-modal);
+    padding: var(--qx-space-inset-xl);
+    place-items: center;
+    display: grid;
+    position: fixed;
+    inset: 0;
+  }
+  
+  .qx-dialog {
+    border-block-start: var(--qx-border-width-accent) solid var(--qx-color-border-brand);
+    border-radius: var(--qx-radius-modal);
+    background: var(--qx-color-surface-overlay);
+    max-block-size: 85vh;
+    inline-size: min(100%, 560px);
+    box-shadow: var(--qx-shadow-modal);
+    color: var(--qx-color-text-default);
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    transition-property: opacity, translate;
+    transition-duration: var(--qx-motion-duration-slow);
+    transition-timing-function: var(--qx-motion-easing-enter);
+    outline: 0;
+    flex-direction: column;
+    display: flex;
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .qx-dialog[data-size="sm"] {
+    inline-size: min(100%, 400px);
+  }
+  
+  .qx-dialog[data-size="lg"] {
+    inline-size: min(100%, 800px);
+  }
+  
+  .qx-dialog[data-intent="danger"] {
+    border-block-start-color: var(--qx-color-border-danger);
+  }
+  
+  .qx-dialog[data-intent="warning"] {
+    border-block-start-color: var(--qx-color-icon-warning);
+  }
+  
+  .qx-dialog[data-starting-style], .qx-dialog[data-ending-style] {
+    opacity: 0;
+    translate: 0 8px;
+  }
+  
+  .qx-dialog[data-ending-style] {
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-exit);
+  }
+  
+  .qx-dialog-header {
+    gap: var(--qx-space-gap-xs);
+    padding: var(--qx-space-inset-xl);
+    flex-direction: column;
+    display: flex;
+  }
+  
+  .qx-dialog[data-dismissible] .qx-dialog-header {
+    padding-inline-end: 56px;
+  }
+  
+  .qx-dialog-title {
+    font: var(--qx-typography-title-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-heading);
+    margin: 0;
+  }
+  
+  .qx-dialog-description {
+    color: var(--qx-color-text-subtle);
+    margin: 0;
+  }
+  
+  .qx-dialog-body {
+    min-block-size: 0;
+    padding: 0 var(--qx-space-inset-xl) var(--qx-space-inset-xl);
+    flex: 1;
+    overflow-y: auto;
+  }
+  
+  .qx-dialog-footer {
+    justify-content: flex-end;
+    gap: var(--qx-space-gap-sm);
+    padding: 0 var(--qx-space-inset-xl) var(--qx-space-inset-xl);
+    flex-wrap: wrap;
+    display: flex;
+  }
+  
+  .qx-dialog-close {
+    position: absolute;
+    inset-block-start: 12px;
+    inset-inline-end: 12px;
+  }
+  
+  @media (forced-colors: active) {
+    .qx-dialog {
+      border: var(--qx-border-width-default) solid CanvasText;
+      border-block-start-width: var(--qx-border-width-accent);
+    }
+  }
+}
+
+@layer qx.components {
+  .qx-drawer-backdrop {
+    z-index: var(--qx-z-overlay);
+    background: var(--qx-color-overlay-scrim);
+    transition-property: opacity;
+    transition-duration: var(--qx-motion-duration-slow);
+    transition-timing-function: var(--qx-motion-easing-enter);
+    position: fixed;
+    inset: 0;
+  }
+  
+  .qx-drawer-backdrop[data-starting-style], .qx-drawer-backdrop[data-ending-style] {
+    opacity: 0;
+  }
+  
+  .qx-drawer-backdrop[data-ending-style] {
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-exit);
+  }
+  
+  .qx-drawer-viewport {
+    z-index: var(--qx-z-modal);
+    justify-content: flex-end;
+    display: flex;
+    position: fixed;
+    inset: 0;
+  }
+  
+  .qx-drawer-viewport[data-side="start"] {
+    justify-content: flex-start;
+  }
+  
+  .qx-drawer {
+    background: var(--qx-color-surface-overlay);
+    block-size: 100%;
+    inline-size: min(560px, 100vw - 48px);
+    box-shadow: var(--qx-shadow-modal);
+    color: var(--qx-color-text-default);
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    transform: translateX(var(--drawer-swipe-movement-x, 0px));
+    transition-property: transform;
+    transition-duration: var(--qx-motion-duration-slow);
+    transition-timing-function: var(--qx-motion-easing-enter);
+    outline: 0;
+    flex-direction: column;
+    display: flex;
+    position: relative;
+  }
+  
+  .qx-drawer[data-size="sm"] {
+    inline-size: min(400px, 100vw - 48px);
+  }
+  
+  .qx-drawer[data-size="lg"] {
+    inline-size: min(800px, 100vw - 48px);
+  }
+  
+  .qx-drawer[data-swipe-direction="right"]:is([data-starting-style], [data-ending-style]) {
+    transform: translateX(100%);
+  }
+  
+  .qx-drawer[data-swipe-direction="left"]:is([data-starting-style], [data-ending-style]) {
+    transform: translateX(-100%);
+  }
+  
+  .qx-drawer[data-swiping] {
+    transition: none;
+  }
+  
+  .qx-drawer[data-ending-style] {
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-exit);
+  }
+  
+  .qx-drawer-header {
+    gap: var(--qx-space-gap-xs);
+    padding: var(--qx-space-inset-xl);
+    border-block-end: var(--qx-border-width-default) solid var(--qx-color-border-subtle);
+    flex-direction: column;
+    flex: none;
+    padding-inline-end: 56px;
+    display: flex;
+  }
+  
+  .qx-drawer-title {
+    font: var(--qx-typography-title-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-heading);
+    margin: 0;
+  }
+  
+  .qx-drawer-description {
+    color: var(--qx-color-text-subtle);
+    margin: 0;
+  }
+  
+  .qx-drawer-body {
+    overscroll-behavior: contain;
+    min-block-size: 0;
+    padding: var(--qx-space-inset-xl);
+    flex: 1;
+    overflow-y: auto;
+  }
+  
+  .qx-drawer-footer {
+    justify-content: flex-end;
+    gap: var(--qx-space-gap-sm);
+    padding: var(--qx-space-inset-lg) var(--qx-space-inset-xl);
+    border-block-start: var(--qx-border-width-default) solid var(--qx-color-border-subtle);
+    flex-wrap: wrap;
+    flex: none;
+    display: flex;
+  }
+  
+  .qx-drawer-close {
+    position: absolute;
+    inset-block-start: 20px;
+    inset-inline-end: 16px;
+  }
+  
+  @media (forced-colors: active) {
+    .qx-drawer {
+      border-inline: var(--qx-border-width-default) solid CanvasText;
+    }
+  }
+}
+
+@layer qx.components {
+  .qx-alert {
+    align-items: flex-start;
+    gap: var(--qx-space-gap-md);
+    padding: var(--qx-space-inset-md) var(--qx-space-inset-sm) var(--qx-space-inset-md)
+      var(--qx-space-inset-md);
+    border-inline-start: var(--qx-border-width-accent) solid var(--qx-color-icon-info);
+    background: var(--qx-color-bg-info-subtle);
+    color: var(--qx-color-text-default);
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    display: flex;
+  }
+  
+  .qx-alert[data-tone="success"] {
+    border-inline-start-color: var(--qx-color-icon-success);
+    background: var(--qx-color-bg-success-subtle);
+  }
+  
+  .qx-alert[data-tone="warning"] {
+    border-inline-start-color: var(--qx-color-icon-warning);
+    background: var(--qx-color-bg-warning-subtle);
+  }
+  
+  .qx-alert[data-tone="danger"] {
+    border-inline-start-color: var(--qx-color-icon-danger);
+    background: var(--qx-color-bg-danger-subtle);
+  }
+  
+  .qx-alert-icon {
+    color: var(--qx-color-icon-info);
+    flex: none;
+    margin-block-start: 2px;
+  }
+  
+  [data-tone="success"] > .qx-alert-icon {
+    color: var(--qx-color-icon-success);
+  }
+  
+  [data-tone="warning"] > .qx-alert-icon {
+    color: var(--qx-color-icon-warning);
+  }
+  
+  [data-tone="danger"] > .qx-alert-icon {
+    color: var(--qx-color-icon-danger);
+  }
+  
+  .qx-alert-body {
+    min-inline-size: 0;
+    flex-direction: column;
+    flex: 1;
+    gap: 2px;
+    padding-inline-end: var(--qx-space-gap-xs);
+    display: flex;
+  }
+  
+  .qx-alert-title {
+    font: var(--qx-typography-label-md);
+    font-weight: var(--qx-typography-title-sm-font-weight);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+  }
+  
+  .qx-alert-description {
+    color: var(--qx-color-text-subtle);
+  }
+  
+  .qx-alert-actions {
+    gap: var(--qx-space-gap-sm);
+    flex-wrap: wrap;
+    margin-block-start: var(--qx-space-gap-sm);
+    display: flex;
+  }
+  
+  .qx-alert-dismiss {
+    flex: none;
+    margin-block: -2px;
+  }
+  
+  @media (forced-colors: active) {
+    .qx-alert {
+      border: var(--qx-border-width-default) solid CanvasText;
+      border-inline-start: var(--qx-border-width-accent) solid CanvasText;
+    }
+  }
+}
+
+@layer qx.components {
+  .qx-app-shell {
+    --qx-app-shell-top: calc(var(--qx-size-control-lg) + 16px);
+    background: var(--qx-color-surface-default);
+    min-block-size: 100dvh;
+    color: var(--qx-color-text-default);
+    grid-template-rows: auto minmax(0, 1fr);
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    display: grid;
+  }
+  
+  .qx-app-shell-top {
+    z-index: var(--qx-z-sticky);
+    grid-column: 1 / -1;
+    position: sticky;
+    inset-block-start: 0;
+  }
+  
+  .qx-app-shell-nav {
+    z-index: calc(var(--qx-z-sticky) - 1);
+    block-size: calc(100dvh - var(--qx-app-shell-top));
+    inline-size: var(--qx-component-sidebar-width-expanded);
+    transition-property: inline-size;
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    grid-area: 2 / 1;
+    position: sticky;
+    inset-block-start: var(--qx-app-shell-top);
+  }
+  
+  .qx-app-shell[data-collapsed] > .qx-app-shell-nav {
+    inline-size: var(--qx-component-sidebar-width-collapsed);
+  }
+  
+  .qx-app-shell-nav-panel {
+    border-inline-end: var(--qx-border-width-default) solid var(--qx-color-border-default);
+    background: var(--qx-color-surface-canvas);
+    flex-direction: column;
+    block-size: 100%;
+    inline-size: 100%;
+    display: flex;
+    overflow: hidden;
+  }
+  
+  [data-peek] > .qx-app-shell-nav-panel {
+    inline-size: var(--qx-component-sidebar-width-expanded);
+    box-shadow: var(--qx-shadow-overlay);
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+  }
+  
+  .qx-app-shell-nav-body {
+    flex: 1;
+    min-block-size: 0;
+  }
+  
+  .qx-app-shell-nav-foot {
+    border-block-start: var(--qx-border-width-default) solid var(--qx-color-border-default);
+    flex: none;
+  }
+  
+  .qx-app-shell-collapse {
+    inline-size: 100%;
+    block-size: var(--qx-size-control-lg);
+    padding-inline: var(--qx-space-inset-lg);
+    color: var(--qx-color-text-subtle);
+    font: var(--qx-typography-label-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    white-space: nowrap;
+    cursor: pointer;
+    transition-property: background-color, color;
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    background: none;
+    border: 0;
+    align-items: center;
+    gap: 10px;
+    display: flex;
+  }
+  
+  .qx-app-shell-collapse:hover {
+    background: var(--qx-color-overlay-hover);
+    color: var(--qx-color-text-default);
+  }
+  
+  .qx-app-shell-collapse:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: calc(-1 * var(--qx-focus-ring-width));
+  }
+  
+  .qx-app-shell-collapse-icon {
+    color: var(--qx-color-icon-subtle);
+    flex: none;
+  }
+  
+  [dir="rtl"] .qx-app-shell-collapse-icon {
+    scale: -1 1;
+  }
+  
+  .qx-app-shell[data-collapsed] .qx-app-shell-nav:not([data-peek]) .qx-app-shell-collapse-label {
+    clip-path: inset(50%);
+    block-size: 1px;
+    inline-size: 1px;
+    position: absolute;
+    overflow: hidden;
+  }
+  
+  .qx-app-shell-main {
+    outline: 0;
+    grid-area: 2 / 2;
+    min-inline-size: 0;
+  }
+  
+  .qx-app-shell-notifications {
+    gap: var(--qx-space-gap-sm);
+    padding: var(--qx-space-inset-lg) var(--qx-space-layout-md) 0;
+    flex-direction: column;
+    display: flex;
+  }
+  
+  .qx-app-shell-panel {
+    z-index: calc(var(--qx-z-sticky) - 1);
+    inline-size: 320px;
+    block-size: calc(100dvh - var(--qx-app-shell-top));
+    border-inline-start: var(--qx-border-width-default) solid var(--qx-color-border-default);
+    background: var(--qx-color-surface-default);
+    flex-direction: column;
+    grid-area: 2 / 3;
+    display: flex;
+    position: sticky;
+    inset-block-start: var(--qx-app-shell-top);
+  }
+  
+  .qx-app-shell-panel-header {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--qx-space-gap-sm);
+    block-size: calc(var(--qx-size-control-lg) + 8px);
+    padding-inline: var(--qx-space-inset-lg) var(--qx-space-inset-sm);
+    border-block-end: var(--qx-border-width-default) solid var(--qx-color-border-default);
+    background: var(--qx-color-surface-canvas);
+    flex: none;
+    display: flex;
+  }
+  
+  .qx-app-shell-panel-title {
+    font: var(--qx-typography-label-md);
+    font-weight: var(--qx-typography-title-sm-font-weight);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-heading);
+    margin: 0;
+  }
+  
+  .qx-app-shell-panel-body {
+    min-block-size: 0;
+    padding: var(--qx-space-inset-lg);
+    flex: 1;
+    overflow-y: auto;
+  }
+  
+  @media (width < 1200px) {
+    .qx-app-shell-panel {
+      inset-block: var(--qx-app-shell-top) 0;
+      block-size: auto;
+      box-shadow: var(--qx-shadow-overlay);
+      position: fixed;
+      inset-inline-end: 0;
+    }
+  }
+  
+  @media (width < 840px) {
+    .qx-app-shell {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  
+    .qx-app-shell-nav {
+      display: none;
+    }
+  
+    .qx-app-shell-main {
+      grid-column: 1;
+    }
+  
+    .qx-app-shell-panel {
+      inline-size: min(320px, 100vw);
+    }
+  
+    .qx-app-shell-notifications {
+      padding-inline: var(--qx-space-inset-lg);
+    }
+  }
+  
+  .qx-app-shell-backdrop {
+    z-index: var(--qx-z-overlay);
+    background: var(--qx-color-overlay-scrim);
+    transition-property: opacity;
+    transition-duration: var(--qx-motion-duration-slow);
+    transition-timing-function: var(--qx-motion-easing-enter);
+    position: fixed;
+    inset: 0;
+  }
+  
+  .qx-app-shell-backdrop[data-starting-style], .qx-app-shell-backdrop[data-ending-style] {
+    opacity: 0;
+  }
+  
+  .qx-app-shell-viewport {
+    z-index: var(--qx-z-modal);
+    justify-content: flex-start;
+    display: flex;
+    position: fixed;
+    inset: 0;
+  }
+  
+  .qx-app-shell-drawer {
+    inline-size: min(var(--qx-component-sidebar-width-mobile), 100vw - 48px);
+    background: var(--qx-color-surface-canvas);
+    block-size: 100%;
+    box-shadow: var(--qx-shadow-modal);
+    transform: translateX(var(--drawer-swipe-movement-x, 0px));
+    transition-property: transform;
+    transition-duration: var(--qx-motion-duration-slow);
+    transition-timing-function: var(--qx-motion-easing-enter);
+    outline: 0;
+  }
+  
+  .qx-app-shell-drawer[data-swipe-direction="left"]:is([data-starting-style], [data-ending-style]) {
+    transform: translateX(-100%);
+  }
+  
+  .qx-app-shell-drawer[data-swipe-direction="right"]:is([data-starting-style], [data-ending-style]) {
+    transform: translateX(100%);
+  }
+  
+  .qx-app-shell-drawer[data-swiping] {
+    transition: none;
+  }
+  
+  .qx-app-shell-drawer[data-ending-style] {
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-exit);
+  }
+  
+  @media (forced-colors: active) {
+    .qx-app-shell-nav-panel, .qx-app-shell-nav-foot, .qx-app-shell-panel, .qx-app-shell-panel-header {
+      border-color: canvastext;
+    }
+  
+    .qx-app-shell-drawer {
+      border-inline-end: var(--qx-border-width-default) solid CanvasText;
+    }
+  }
+}
+
+@layer qx.components {
+  .qx-breadcrumb {
+    min-inline-size: 0;
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+  }
+  
+  .qx-breadcrumb-list {
+    align-items: center;
+    gap: var(--qx-space-gap-xs);
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+  }
+  
+  .qx-breadcrumb-separator {
+    color: var(--qx-color-icon-subtle);
+    flex: none;
+  }
+  
+  [dir="rtl"] .qx-breadcrumb-separator {
+    scale: -1 1;
+  }
+  
+  .qx-breadcrumb-item {
+    align-items: center;
+    gap: var(--qx-space-gap-xs);
+    min-inline-size: 0;
+    display: flex;
+  }
+  
+  .qx-breadcrumb-item:first-child > .qx-breadcrumb-separator {
+    display: none;
+  }
+  
+  .qx-breadcrumb-link, .qx-breadcrumb-current {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-inline-size: 240px;
+    overflow: hidden;
+  }
+  
+  .qx-breadcrumb-link {
+    color: var(--qx-color-text-subtle);
+    text-decoration: none;
+  }
+  
+  .qx-breadcrumb-link:hover {
+    color: var(--qx-color-text-default);
+    text-underline-offset: 3px;
+    text-decoration: underline;
+  }
+  
+  .qx-breadcrumb-link:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: var(--qx-focus-ring-offset);
+  }
+  
+  .qx-breadcrumb-current {
+    color: var(--qx-color-text-default);
+    font-weight: var(--qx-typography-label-md-font-weight);
+  }
+}
+
+@layer qx.components {
+  .qx-copy-button[data-variant="ghost"][data-state="copied"] .qx-button-icon {
+    color: var(--qx-color-icon-success);
+  }
+  
+  .qx-copy-button[data-variant="ghost"][data-state="failed"] .qx-button-icon {
+    color: var(--qx-color-icon-danger);
+  }
+}
+
+@layer qx.components {
+  .qx-empty-state {
+    align-items: center;
+    gap: var(--qx-space-gap-sm);
+    max-inline-size: 480px;
+    padding: var(--qx-space-layout-lg) var(--qx-space-inset-lg);
+    color: var(--qx-color-text-default);
+    text-align: center;
+    flex-direction: column;
+    margin-inline: auto;
+    display: flex;
+  }
+  
+  .qx-empty-state[data-size="section"] {
+    padding: var(--qx-space-inset-xl) var(--qx-space-inset-lg);
+  }
+  
+  .qx-empty-state-icon {
+    color: var(--qx-color-icon-subtle);
+    flex: none;
+    margin-block-end: var(--qx-space-gap-xs);
+  }
+  
+  [data-tone="danger"] > .qx-empty-state-icon {
+    color: var(--qx-color-icon-danger);
+  }
+  
+  .qx-empty-state-title {
+    font: var(--qx-typography-title-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-heading);
+    margin: 0;
+  }
+  
+  [data-size="section"] > .qx-empty-state-title {
+    font: var(--qx-typography-title-sm);
+  }
+  
+  .qx-empty-state-description {
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-subtle);
+    margin: 0;
+  }
+  
+  .qx-empty-state-actions {
+    justify-content: center;
+    gap: var(--qx-space-gap-sm);
+    flex-wrap: wrap;
+    margin-block-start: var(--qx-space-gap-sm);
+    display: flex;
+  }
+  
+  .qx-data-state {
+    padding: var(--qx-space-layout-lg);
+    place-items: center;
+    display: grid;
+  }
+}
+
+@layer qx.components {
+  .qx-otp-input {
+    align-items: center;
+    gap: var(--qx-space-gap-sm);
+    inline-size: 100%;
+    display: flex;
+  }
+  
+  .qx-otp-input-slot {
+    min-inline-size: var(--qx-size-control-lg);
+    inline-size: 0;
+    block-size: var(--qx-size-control-lg);
+    background: var(--qx-color-bg-neutral-subtle);
+    box-shadow: inset 0 calc(-1 * var(--qx-border-width-default)) 0 var(--qx-color-border-strong);
+    color: var(--qx-color-text-default);
+    caret-color: var(--qx-color-border-focus);
+    font: var(--qx-typography-title-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+    transition-property: background-color;
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    border: 0;
+    border-start-start-radius: var(--qx-radius-control);
+    border-start-end-radius: var(--qx-radius-control);
+    flex: 1 1 0;
+    margin: 0;
+    padding: 0;
+  }
+  
+  .qx-otp-input-slot:hover {
+    background: var(--qx-color-bg-neutral-subtle-hover);
+  }
+  
+  .qx-otp-input-slot:focus {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: calc(-1 * var(--qx-focus-ring-width));
+    box-shadow: none;
+  }
+  
+  .qx-otp-input-slot[data-invalid] {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-danger);
+    outline-offset: calc(-1 * var(--qx-focus-ring-width));
+    box-shadow: none;
+  }
+  
+  .qx-otp-input-slot:disabled {
+    background: var(--qx-color-bg-disabled);
+    box-shadow: inset 0 calc(-1 * var(--qx-border-width-default)) 0 var(--qx-color-border-disabled);
+    color: var(--qx-color-text-disabled);
+    cursor: not-allowed;
+  }
+  
+  .qx-otp-input-slot::placeholder {
+    color: var(--qx-color-text-subtlest);
+    opacity: 1;
+  }
+  
+  [data-size="lg"] > .qx-otp-input-slot {
+    block-size: calc(var(--qx-size-control-lg) + 16px);
+    font: var(--qx-typography-title-lg);
+  }
+  
+  .qx-otp-input-separator {
+    inline-size: var(--qx-space-gap-sm);
+    block-size: var(--qx-border-width-strong);
+    background: var(--qx-color-border-strong);
+    flex: none;
+  }
+  
+  @media (forced-colors: active) {
+    .qx-otp-input-slot {
+      border: var(--qx-border-width-default) solid CanvasText;
+    }
+  
+    .qx-otp-input-separator {
+      forced-color-adjust: none;
+      background: canvastext;
+    }
+  }
+}
+
+@layer qx.components {
+  .qx-page-header {
+    --qx-page-gutter: var(--qx-space-layout-md);
+    padding: 20px var(--qx-page-gutter);
+    border-block-end: var(--qx-border-width-default) solid var(--qx-color-border-default);
+    background: var(--qx-color-surface-default);
+    color: var(--qx-color-text-default);
+    flex-direction: column;
+    display: flex;
+  }
+  
+  .qx-page-header[data-foot] {
+    border-block-end: 0;
+    padding-block-end: 0;
+  }
+  
+  .qx-page-header-breadcrumb {
+    margin-block-end: 6px;
+  }
+  
+  .qx-page-header-row {
+    justify-content: space-between;
+    align-items: flex-end;
+    gap: var(--qx-space-gap-md);
+    flex-wrap: wrap;
+    display: flex;
+  }
+  
+  .qx-page-header-titles {
+    gap: var(--qx-space-gap-xs);
+    flex-direction: column;
+    min-inline-size: 0;
+    display: flex;
+  }
+  
+  .qx-page-header-title {
+    align-items: center;
+    gap: var(--qx-space-gap-sm);
+    flex-wrap: wrap;
+    display: flex;
+  }
+  
+  .qx-page-header-count {
+    font: var(--qx-typography-title-lg);
+    font-weight: var(--qx-typography-body-md-font-weight);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-heading);
+    font-variant-numeric: tabular-nums;
+    color: var(--qx-color-text-subtlest);
+  }
+  
+  .qx-page-header-description {
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-subtle);
+    margin: 0;
+  }
+  
+  .qx-page-header-actions {
+    align-items: center;
+    gap: var(--qx-space-gap-sm);
+    flex-wrap: wrap;
+    flex: none;
+    display: flex;
+  }
+  
+  .qx-page-header-summary {
+    --qx-stat-group-inset: var(--qx-page-gutter);
+    margin: 20px calc(-1 * var(--qx-page-gutter)) 0;
+    border-block: var(--qx-border-width-default) solid var(--qx-color-border-default);
+    background: var(--qx-color-surface-canvas);
+  }
+  
+  .qx-page-header-tabs {
+    margin: var(--qx-space-gap-md) calc(-1 * var(--qx-space-inset-sm)) 0;
+  }
+  
+  .qx-page-header-summary + .qx-page-header-tabs {
+    margin-block-start: var(--qx-space-gap-sm);
+  }
+  
+  .qx-page-content {
+    gap: var(--qx-space-gap-md);
+    padding: var(--qx-space-inset-lg) var(--qx-space-layout-md) var(--qx-space-layout-md);
+    flex-direction: column;
+    display: flex;
+  }
+  
+  .qx-page-content[data-width="narrow"] {
+    max-inline-size: 800px;
+  }
+  
+  @media (width < 840px) {
+    .qx-page-header {
+      --qx-page-gutter: var(--qx-space-inset-lg);
+    }
+  
+    .qx-page-content {
+      padding-inline: var(--qx-space-inset-lg);
+    }
+  }
+  
+  @media (forced-colors: active) {
+    .qx-page-header, .qx-page-header-summary {
+      border-color: canvastext;
+    }
+  }
+}
+
+@layer qx.components {
+  .qx-password-input {
+    padding-inline-end: var(--qx-space-gap-xs);
+  }
+  
+  .qx-password-input-caps {
+    align-items: center;
+    gap: var(--qx-space-gap-xs);
+    font: var(--qx-typography-label-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-warning);
+    white-space: nowrap;
+    flex: none;
+    display: inline-flex;
+  }
+}
+
+@layer qx.components {
+  .qx-sidebar {
+    block-size: 100%;
+    min-block-size: 0;
+    color: var(--qx-color-text-default);
+    flex-direction: column;
+    display: flex;
+  }
+  
+  .qx-sidebar-header {
+    gap: var(--qx-space-gap-sm);
+    padding: var(--qx-space-inset-md) var(--qx-space-inset-lg) var(--qx-space-gap-xs);
+    flex-direction: column;
+    flex: none;
+    display: flex;
+  }
+  
+  .qx-sidebar-title {
+    font: var(--qx-typography-title-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-heading);
+    color: var(--qx-color-text-default);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+  
+  .qx-sidebar-empty {
+    padding: var(--qx-space-gap-sm) var(--qx-space-inset-lg);
+    font: var(--qx-typography-body-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-subtle);
+    margin: 0;
+  }
+  
+  .qx-sidebar-empty:empty {
+    display: none;
+  }
+  
+  .qx-sidebar-group:not(:has(.qx-sidebar-entry)) {
+    display: none;
+  }
+  
+  .qx-sidebar-nav {
+    min-block-size: 0;
+    padding-block: var(--qx-space-gap-sm) var(--qx-space-inset-md);
+    flex: 1;
+    overflow: hidden auto;
+  }
+  
+  .qx-sidebar-footer {
+    padding-block: var(--qx-space-gap-xs);
+    border-block-start: var(--qx-border-width-default) solid var(--qx-color-border-default);
+    flex: none;
+  }
+  
+  .qx-sidebar-group + .qx-sidebar-group {
+    border-block-start: var(--qx-border-width-default) solid var(--qx-color-border-subtle);
+    margin-block-start: var(--qx-space-gap-sm);
+    padding-block-start: var(--qx-space-inset-md);
+  }
+  
+  .qx-sidebar-group-label {
+    padding: 0 var(--qx-space-inset-lg) 6px;
+    font: var(--qx-typography-label-caps);
+    letter-spacing: var(--qx-typography-label-caps-letter-spacing);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-subtlest);
+    text-transform: uppercase;
+    white-space: nowrap;
+  }
+  
+  .qx-sidebar-group-label:is(:lang(hi), :lang(mr), :lang(bn), :lang(gu), :lang(pa), :lang(or), :lang(ta), :lang(te), :lang(kn), :lang(ml)) {
+    letter-spacing: 0;
+  }
+  
+  .qx-sidebar-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  
+  .qx-sidebar-item {
+    inline-size: 100%;
+    block-size: var(--qx-size-control-lg);
+    padding-inline: var(--qx-space-inset-lg) var(--qx-space-inset-md);
+    color: var(--qx-color-text-subtle);
+    font: var(--qx-typography-label-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    text-align: start;
+    white-space: nowrap;
+    cursor: pointer;
+    transition-property: background-color, color;
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    background: none;
+    border: 0;
+    align-items: center;
+    gap: 10px;
+    text-decoration: none;
+    display: flex;
+    position: relative;
+  }
+  
+  .qx-sidebar-item:hover {
+    background: var(--qx-color-overlay-hover);
+    color: var(--qx-color-text-default);
+  }
+  
+  .qx-sidebar-item[data-current] {
+    background: var(--qx-color-bg-neutral-subtle-hover);
+    color: var(--qx-color-text-default);
+    font-weight: var(--qx-typography-title-sm-font-weight);
+  }
+  
+  .qx-sidebar-item[data-current]:before {
+    content: "";
+    inline-size: var(--qx-border-width-accent);
+    background: var(--qx-color-border-brand);
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+  }
+  
+  .qx-sidebar-item:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: calc(-1 * var(--qx-focus-ring-width));
+  }
+  
+  .qx-sidebar-icon {
+    color: var(--qx-color-icon-subtle);
+    flex: none;
+  }
+  
+  [data-current] > .qx-sidebar-icon {
+    color: var(--qx-color-icon-brand);
+  }
+  
+  .qx-sidebar-icon-filled, .qx-sidebar-item[data-current]:has( > .qx-sidebar-icon-filled) > .qx-sidebar-icon-outline {
+    display: none;
+  }
+  
+  .qx-sidebar-item[data-current] > .qx-sidebar-icon-filled {
+    display: block;
+  }
+  
+  .qx-sidebar-label {
+    text-overflow: ellipsis;
+    flex: 1;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+  
+  .qx-sidebar-badge {
+    font: var(--qx-typography-label-sm);
+    font-variant-numeric: tabular-nums;
+    color: var(--qx-color-text-subtlest);
+    flex: none;
+    display: inline-flex;
+  }
+  
+  .qx-sidebar-chevron {
+    color: var(--qx-color-icon-subtle);
+    transition-property: rotate;
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    flex: none;
+  }
+  
+  [data-open] > .qx-sidebar-chevron {
+    rotate: 180deg;
+  }
+  
+  .qx-sidebar-sublist .qx-sidebar-item {
+    font-weight: var(--qx-typography-body-md-font-weight);
+    padding-inline-start: calc(var(--qx-space-inset-lg) + 16px + 10px);
+  }
+  
+  .qx-sidebar-sublist .qx-sidebar-item[data-current] {
+    font-weight: var(--qx-typography-title-sm-font-weight);
+  }
+  
+  .qx-sidebar[data-rail] .qx-sidebar-header {
+    visibility: hidden;
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .qx-sidebar[data-rail] .qx-sidebar-rail-search {
+    visibility: visible;
+    position: absolute;
+    inset-block-end: var(--qx-space-gap-xs);
+    inset-inline-start: 50%;
+    translate: -50%;
+  }
+  
+  .qx-sidebar[data-rail] .qx-sidebar-group-label {
+    visibility: hidden;
+    overflow: hidden;
+  }
+  
+  .qx-sidebar[data-rail] .qx-sidebar-label {
+    clip-path: inset(50%);
+    block-size: 1px;
+    inline-size: 1px;
+    position: absolute;
+    overflow: hidden;
+  }
+  
+  .qx-sidebar[data-rail] .qx-sidebar-badge, .qx-sidebar[data-rail] .qx-sidebar-chevron {
+    display: none;
+  }
+  
+  @media (forced-colors: active) {
+    .qx-sidebar-footer, .qx-sidebar-group + .qx-sidebar-group {
+      border-color: canvastext;
+    }
+  
+    .qx-sidebar-item[data-current] {
+      forced-color-adjust: none;
+      color: highlighttext;
+      background: highlight;
+    }
+  
+    .qx-sidebar-item[data-current] .qx-sidebar-icon {
+      color: highlighttext;
+    }
+  }
+}
+
+@layer qx.components {
+  .qx-stat-group {
+    color: var(--qx-color-text-default);
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
+    margin: 0;
+    display: grid;
+  }
+  
+  .qx-stat {
+    align-content: start;
+    column-gap: var(--qx-space-gap-md);
+    min-inline-size: 0;
+    padding: var(--qx-space-inset-md) var(--qx-space-inset-lg);
+    grid-template-columns: minmax(0, 1fr) auto;
+    display: grid;
+  }
+  
+  .qx-stat:first-child {
+    padding-inline-start: var(--qx-stat-group-inset, var(--qx-space-inset-lg));
+  }
+  
+  .qx-stat:last-child {
+    padding-inline-end: var(--qx-stat-group-inset, var(--qx-space-inset-lg));
+  }
+  
+  .qx-stat + .qx-stat {
+    border-inline-start: var(--qx-border-width-default) solid var(--qx-color-border-default);
+  }
+  
+  .qx-stat-label {
+    font: var(--qx-typography-label-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-subtle);
+    grid-column: 1 / -1;
+  }
+  
+  .qx-stat-value {
+    margin: var(--qx-space-gap-xs) 0 0;
+    font: var(--qx-typography-heading-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-heading);
+    font-variant-numeric: tabular-nums;
+    grid-column: 1;
+  }
+  
+  .qx-stat-trend-cell {
+    grid-area: 2 / 2;
+    align-items: flex-end;
+    margin: 0;
+    padding-block-end: var(--qx-space-gap-xs);
+    display: flex;
+  }
+  
+  .qx-stat-trend {
+    block-size: 28px;
+    inline-size: 88px;
+    overflow: visible;
+  }
+  
+  .qx-stat-trend-line {
+    fill: none;
+    stroke: var(--qx-color-icon-subtle);
+    stroke-width: var(--qx-icon-stroke-thin);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+  
+  .qx-stat-trend-area {
+    fill: var(--qx-color-icon-subtle);
+    opacity: .1;
+  }
+  
+  .qx-stat-trend-end {
+    fill: var(--qx-color-border-brand);
+  }
+  
+  .qx-stat-note {
+    font: var(--qx-typography-body-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-subtlest);
+    grid-column: 1 / -1;
+    margin: 2px 0 0;
+  }
+  
+  .qx-stat-note[data-tone="positive"] {
+    color: var(--qx-color-text-success);
+  }
+  
+  .qx-stat-note[data-tone="negative"] {
+    color: var(--qx-color-text-danger);
+  }
+  
+  .qx-stat-note[data-tone="warning"] {
+    color: var(--qx-color-text-warning);
+  }
+  
+  @media (forced-colors: active) {
+    .qx-stat + .qx-stat {
+      border-inline-start-color: canvastext;
+    }
+  
+    .qx-stat-trend-line {
+      stroke: canvastext;
+    }
+  
+    .qx-stat-trend-area {
+      fill: canvastext;
+    }
+  
+    .qx-stat-trend-end {
+      fill: highlight;
+    }
+  }
+}
+
+@layer qx.components {
+  .qx-top-bar {
+    align-items: stretch;
+    column-gap: var(--qx-space-gap-lg);
+    block-size: calc(var(--qx-size-control-lg) + 16px);
+    border-block-start: var(--qx-border-width-strong) solid var(--qx-color-border-brand);
+    border-block-end: var(--qx-border-width-default) solid var(--qx-color-border-subtle);
+    background: var(--qx-color-surface-sunken);
+    color: var(--qx-color-text-default);
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    grid-template-columns: minmax(max-content, 1fr) auto;
+    padding-inline-end: var(--qx-space-inset-md);
+    display: grid;
+  }
+  
+  .qx-top-bar[data-search] {
+    grid-template-columns: minmax(max-content, 1fr) minmax(240px, 480px) minmax(max-content, 1fr);
+  }
+  
+  .qx-top-bar-start, .qx-top-bar-end {
+    align-items: center;
+    min-inline-size: 0;
+    display: flex;
+  }
+  
+  .qx-top-bar-end {
+    justify-content: flex-end;
+    gap: var(--qx-space-gap-xs);
+  }
+  
+  .qx-top-bar-cell {
+    aspect-ratio: 1;
+    border-inline-end: var(--qx-border-width-default) solid var(--qx-color-border-subtle);
+    flex: none;
+    align-self: stretch;
+    place-items: center;
+    display: grid;
+  }
+  
+  .qx-top-bar-identity {
+    align-self: stretch;
+    align-items: center;
+    gap: var(--qx-space-gap-sm);
+    padding-inline: var(--qx-space-inset-lg) var(--qx-space-inset-sm);
+    color: var(--qx-color-text-default);
+    white-space: nowrap;
+    flex: none;
+    text-decoration: none;
+    display: flex;
+  }
+  
+  .qx-top-bar-identity:hover {
+    background: var(--qx-color-overlay-hover);
+  }
+  
+  .qx-top-bar-identity:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: calc(-1 * var(--qx-focus-ring-width));
+  }
+  
+  .qx-top-bar-product {
+    font: var(--qx-typography-label-md);
+    font-weight: var(--qx-typography-title-sm-font-weight);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-heading);
+  }
+  
+  .qx-top-bar-slash {
+    inline-size: var(--qx-border-width-default);
+    block-size: 16px;
+    margin-inline: var(--qx-space-gap-sm);
+    background: var(--qx-color-border-strong);
+    flex: none;
+    rotate: 20deg;
+  }
+  
+  [dir="rtl"] .qx-top-bar-slash {
+    rotate: -20deg;
+  }
+  
+  .qx-top-bar-switcher {
+    align-items: center;
+    gap: var(--qx-space-gap-sm);
+    min-inline-size: 0;
+    block-size: var(--qx-size-control-md);
+    padding-inline: var(--qx-space-inset-sm);
+    border-radius: var(--qx-radius-control);
+    color: var(--qx-color-text-default);
+    font: var(--qx-typography-label-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    white-space: nowrap;
+    cursor: pointer;
+    transition-property: background-color;
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    background: none;
+    border: 0;
+    display: flex;
+  }
+  
+  .qx-top-bar-switcher:hover, .qx-top-bar-switcher[data-popup-open] {
+    background: var(--qx-color-overlay-hover);
+  }
+  
+  .qx-top-bar-switcher:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: calc(-1 * var(--qx-focus-ring-width));
+  }
+  
+  .qx-top-bar-switcher-label {
+    text-overflow: ellipsis;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+  
+  .qx-top-bar-mark {
+    border-radius: var(--qx-radius-sm);
+    background: var(--qx-color-overlay-pressed);
+    block-size: 20px;
+    inline-size: 20px;
+    font: var(--qx-typography-label-sm);
+    font-weight: var(--qx-typography-title-sm-font-weight);
+    flex: none;
+    place-items: center;
+    display: grid;
+    overflow: hidden;
+  }
+  
+  .qx-top-bar-status {
+    border-radius: var(--qx-radius-full);
+    background: var(--qx-color-icon-subtle);
+    flex: none;
+    block-size: 8px;
+    inline-size: 8px;
+  }
+  
+  .qx-top-bar-status[data-status="success"] {
+    background: var(--qx-color-bg-success-bold);
+  }
+  
+  .qx-top-bar-status[data-status="info"] {
+    background: var(--qx-color-bg-info-bold);
+  }
+  
+  .qx-top-bar-status[data-status="warning"] {
+    background: var(--qx-color-bg-warning-bold);
+  }
+  
+  .qx-top-bar-status[data-status="danger"] {
+    background: var(--qx-color-bg-danger-bold);
+  }
+  
+  .qx-top-bar-caret {
+    color: var(--qx-color-icon-subtle);
+    flex: none;
+  }
+  
+  .qx-top-bar-search {
+    align-items: center;
+    min-inline-size: 0;
+    display: flex;
+  }
+  
+  .qx-top-bar-search-trigger {
+    align-items: center;
+    gap: var(--qx-space-gap-sm);
+    inline-size: 100%;
+    block-size: var(--qx-size-control-lg);
+    padding-inline: var(--qx-space-inset-sm) var(--qx-space-gap-xs);
+    border: var(--qx-border-width-default) solid var(--qx-color-border-default);
+    border-radius: var(--qx-radius-control);
+    background: var(--qx-color-overlay-hover);
+    color: var(--qx-color-text-subtlest);
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    cursor: pointer;
+    transition-property: background-color, border-color;
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    display: flex;
+  }
+  
+  .qx-top-bar-search-trigger:hover {
+    border-color: var(--qx-color-border-strong);
+    background: var(--qx-color-overlay-pressed);
+  }
+  
+  .qx-top-bar-search-trigger:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: calc(-1 * var(--qx-focus-ring-width));
+  }
+  
+  .qx-top-bar-search-icon {
+    color: var(--qx-color-icon-subtle);
+    flex: none;
+  }
+  
+  .qx-top-bar-search-text {
+    text-align: start;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+  
+  .qx-top-bar-keys {
+    flex: none;
+    gap: 2px;
+    display: flex;
+  }
+  
+  .qx-top-bar-key {
+    block-size: 20px;
+    min-inline-size: 20px;
+    padding-inline: var(--qx-space-gap-xs);
+    border: var(--qx-border-width-default) solid var(--qx-color-border-default);
+    border-radius: var(--qx-radius-sm);
+    color: var(--qx-color-text-subtle);
+    font: var(--qx-typography-label-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    place-items: center;
+    display: grid;
+  }
+  
+  .qx-top-bar-tools {
+    align-items: center;
+    gap: var(--qx-space-gap-xs);
+    display: flex;
+  }
+  
+  .qx-top-bar-tool {
+    position: relative;
+  }
+  
+  .qx-top-bar-tool > [aria-pressed="true"] {
+    background: var(--qx-color-overlay-pressed);
+    color: var(--qx-color-text-default);
+  }
+  
+  .qx-top-bar-tool[data-badge]:after {
+    content: "";
+    border: var(--qx-border-width-strong) solid var(--qx-color-surface-sunken);
+    border-radius: var(--qx-radius-full);
+    background: var(--qx-color-icon-brand);
+    pointer-events: none;
+    block-size: 10px;
+    inline-size: 10px;
+    position: absolute;
+    inset-block-start: 3px;
+    inset-inline-end: 3px;
+  }
+  
+  .qx-top-bar-rule {
+    inline-size: var(--qx-border-width-default);
+    block-size: 20px;
+    margin-inline: var(--qx-space-gap-sm);
+    background: var(--qx-color-border-subtle);
+    flex: none;
+  }
+  
+  @media (width < 840px) {
+    .qx-top-bar, .qx-top-bar[data-search] {
+      grid-template-columns: minmax(0, 1fr) auto;
+    }
+  
+    .qx-top-bar-search {
+      display: none;
+    }
+  }
+  
+  @media (forced-colors: active) {
+    .qx-top-bar {
+      border-block-end-color: canvastext;
+    }
+  
+    .qx-top-bar-cell {
+      border-inline-end-color: canvastext;
+    }
+  
+    .qx-top-bar-slash, .qx-top-bar-rule {
+      forced-color-adjust: none;
+      background: canvastext;
+    }
+  
+    .qx-top-bar-status, .qx-top-bar-tool[data-badge]:after {
+      forced-color-adjust: none;
+      background: highlight;
+    }
+  
+    .qx-top-bar-search-trigger, .qx-top-bar-key {
+      border-color: canvastext;
+    }
+  }
+}
+
+@layer qx.components {
+  .qx-field {
+    gap: var(--qx-space-gap-xs);
+    flex-direction: column;
+    min-inline-size: 0;
+    display: flex;
+  }
+  
+  .qx-field-label {
+    font: var(--qx-typography-label-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-subtle);
+  }
+  
+  .qx-field-label[data-disabled] {
+    color: var(--qx-color-text-disabled);
+  }
+  
+  .qx-field-label[data-hidden] {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    block-size: 1px;
+    inline-size: 1px;
+    margin: -1px;
+    position: absolute;
+    overflow: hidden;
+  }
+  
+  .qx-field-optional {
+    font-weight: var(--qx-typography-body-sm-font-weight);
+    color: var(--qx-color-text-subtlest);
+  }
+  
+  .qx-field-description {
+    font: var(--qx-typography-body-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-subtle);
+    margin: 0;
+  }
+  
+  .qx-field[data-invalid] > .qx-field-description {
+    display: none;
+  }
+  
+  .qx-field-error {
+    align-items: flex-start;
+    gap: var(--qx-space-gap-xs);
+    font: var(--qx-typography-body-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-danger);
+    display: flex;
+  }
+  
+  .qx-field-error-icon {
+    color: var(--qx-color-icon-danger);
+    flex: none;
+  }
+  
+  .qx-choice {
+    flex-direction: column;
+    min-inline-size: 0;
+    display: flex;
+  }
+  
+  .qx-choice-label {
+    align-items: flex-start;
+    gap: var(--qx-space-gap-sm);
+    inline-size: fit-content;
+    min-block-size: var(--qx-size-target-min);
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-default);
+    cursor: pointer;
+    padding-block: 2px;
+    display: inline-flex;
+  }
+  
+  .qx-choice-label > :first-child {
+    margin-block: 2px;
+  }
+  
+  .qx-choice[data-disabled] .qx-choice-label {
+    color: var(--qx-color-text-disabled);
+    cursor: not-allowed;
+  }
+  
+  .qx-choice-description {
+    font: var(--qx-typography-body-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-subtle);
+    margin: 0;
+    padding-inline-start: 24px;
+  }
+  
+  .qx-choice[data-slot="switch"] .qx-choice-description {
+    padding-inline-start: 40px;
+  }
+  
+  .qx-choice-group-set {
+    gap: var(--qx-space-gap-xs);
+    border: 0;
+    flex-direction: column;
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    display: flex;
+  }
+  
+  .qx-choice-group-options {
+    gap: var(--qx-space-gap-xs);
+    flex-direction: column;
+    display: flex;
+  }
+  
+  .qx-choice-group[data-orientation="horizontal"] .qx-choice-group-options {
+    column-gap: var(--qx-space-gap-lg);
+    flex-flow: wrap;
+  }
+}
+
+@layer qx.components {
+  .qx-fieldset {
+    gap: var(--qx-space-form-gap);
+    border: 0;
+    flex-direction: column;
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    display: flex;
+  }
+  
+  .qx-fieldset-header {
+    gap: var(--qx-space-gap-xs);
+    flex-direction: column;
+    display: flex;
+  }
+  
+  .qx-fieldset-legend {
+    font: var(--qx-typography-title-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-heading);
+    color: var(--qx-color-text-default);
+    padding: 0;
+  }
+  
+  .qx-fieldset-legend[data-disabled] {
+    color: var(--qx-color-text-disabled);
+  }
+  
+  .qx-fieldset-description {
+    font: var(--qx-typography-body-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-subtle);
+    margin: 0;
+  }
+}
+
+@layer qx.components {
+  .qx-grid {
+    --qx-grid-current: var(--qx-grid-base, 1);
+    grid-template-columns: repeat(var(--qx-grid-current), minmax(0, 1fr));
+    align-items: stretch;
+    display: grid;
+  }
+  
+  .qx-grid[data-gap="none"] {
+    gap: 0;
+  }
+  
+  .qx-grid[data-gap="xs"] {
+    gap: var(--qx-space-gap-xs);
+  }
+  
+  .qx-grid[data-gap="sm"] {
+    gap: var(--qx-space-gap-sm);
+  }
+  
+  .qx-grid[data-gap="md"] {
+    gap: var(--qx-space-gap-md);
+  }
+  
+  .qx-grid[data-gap="lg"] {
+    gap: var(--qx-space-gap-lg);
+  }
+  
+  .qx-grid[data-gap="xl"] {
+    gap: var(--qx-space-gap-xl);
+  }
+  
+  .qx-grid[data-gap="2xl"] {
+    gap: var(--qx-space-layout-md);
+  }
+  
+  .qx-grid[data-gap="3xl"] {
+    gap: var(--qx-space-layout-lg);
+  }
+  
+  .qx-grid[data-gap="4xl"] {
+    gap: var(--qx-space-layout-xl);
+  }
+  
+  .qx-grid[data-align="start"] {
+    align-items: start;
+  }
+  
+  .qx-grid[data-align="center"] {
+    align-items: center;
+  }
+  
+  .qx-grid[data-align="end"] {
+    align-items: end;
+  }
+  
+  .qx-grid[data-align="stretch"] {
+    align-items: stretch;
+  }
+  
+  @media (width >= 600px) {
+    .qx-grid {
+      --qx-grid-current: var(--qx-grid-medium, var(--qx-grid-base, 1));
+    }
+  }
+  
+  @media (width >= 840px) {
+    .qx-grid {
+      --qx-grid-current: var(--qx-grid-expanded, var(--qx-grid-medium, var(--qx-grid-base, 1)));
+    }
+  }
+  
+  @media (width >= 1200px) {
+    .qx-grid {
+      --qx-grid-current: var(--qx-grid-large, var(--qx-grid-expanded, var(--qx-grid-medium, var(--qx-grid-base, 1))));
+    }
+  }
+  
+  @media (width >= 1600px) {
+    .qx-grid {
+      --qx-grid-current: var(--qx-grid-xlarge, var(--qx-grid-large, var(--qx-grid-expanded, var(--qx-grid-medium, var(--qx-grid-base, 1)))));
+    }
+  }
+}
+
+@layer qx.components {
+  .qx-heading {
+    font: var(--qx-typography-heading-lg);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-heading);
+    color: var(--qx-color-text-default);
+    margin: 0;
+  }
+  
+  .qx-heading[data-size="display-lg"] {
+    font-size: var(--qx-typography-display-lg-font-size);
+    line-height: var(--qx-typography-display-lg-line-height);
+  }
+  
+  .qx-heading[data-size="display-md"] {
+    font-size: var(--qx-typography-display-md-font-size);
+    line-height: var(--qx-typography-display-md-line-height);
+  }
+  
+  .qx-heading[data-size="display-sm"] {
+    font-size: var(--qx-typography-display-sm-font-size);
+    line-height: var(--qx-typography-display-sm-line-height);
+  }
+  
+  .qx-heading[data-size="heading-lg"] {
+    font-size: var(--qx-typography-heading-lg-font-size);
+    line-height: var(--qx-typography-heading-lg-line-height);
+  }
+  
+  .qx-heading[data-size="heading-md"] {
+    font-size: var(--qx-typography-heading-md-font-size);
+    line-height: var(--qx-typography-heading-md-line-height);
+  }
+  
+  .qx-heading[data-size="heading-sm"] {
+    font-size: var(--qx-typography-heading-sm-font-size);
+    line-height: var(--qx-typography-heading-sm-line-height);
+  }
+  
+  .qx-heading[data-size="title-lg"] {
+    font-size: var(--qx-typography-title-lg-font-size);
+    line-height: var(--qx-typography-title-lg-line-height);
+  }
+  
+  .qx-heading[data-size="title-md"] {
+    font-size: var(--qx-typography-title-md-font-size);
+    line-height: var(--qx-typography-title-md-line-height);
+  }
+  
+  .qx-heading[data-size="title-sm"] {
+    font-size: var(--qx-typography-title-sm-font-size);
+    line-height: var(--qx-typography-title-sm-line-height);
+  }
+  
+  .qx-heading[data-size^="display-"] {
+    font-variation-settings: "GEOM" var(--qx-font-geometry-display);
+  }
+  
+  .qx-heading[data-tone="subtle"] {
+    color: var(--qx-color-text-subtle);
+  }
+  
+  .qx-heading[data-tone="inverse"] {
+    color: var(--qx-color-text-inverse);
+  }
+  
+  .qx-heading[data-truncate="line"] {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  
+  .qx-heading[data-truncate="lines"] {
+    -webkit-line-clamp: var(--qx-text-lines);
+    line-clamp: var(--qx-text-lines);
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+  
+  .qx-heading[data-align="start"] {
+    text-align: start;
+  }
+  
+  .qx-heading[data-align="center"] {
+    text-align: center;
+  }
+  
+  .qx-heading[data-align="end"] {
+    text-align: end;
+  }
+}
+
+@layer qx.components {
+  .qx-inline {
+    flex-wrap: wrap;
+    align-items: center;
+    display: flex;
+  }
+  
+  .qx-inline[data-wrap="false"] {
+    flex-wrap: nowrap;
+  }
+  
+  .qx-inline[data-gap="none"] {
+    gap: 0;
+  }
+  
+  .qx-inline[data-gap="xs"] {
+    gap: var(--qx-space-gap-xs);
+  }
+  
+  .qx-inline[data-gap="sm"] {
+    gap: var(--qx-space-gap-sm);
+  }
+  
+  .qx-inline[data-gap="md"] {
+    gap: var(--qx-space-gap-md);
+  }
+  
+  .qx-inline[data-gap="lg"] {
+    gap: var(--qx-space-gap-lg);
+  }
+  
+  .qx-inline[data-gap="xl"] {
+    gap: var(--qx-space-gap-xl);
+  }
+  
+  .qx-inline[data-gap="2xl"] {
+    gap: var(--qx-space-layout-md);
+  }
+  
+  .qx-inline[data-gap="3xl"] {
+    gap: var(--qx-space-layout-lg);
+  }
+  
+  .qx-inline[data-gap="4xl"] {
+    gap: var(--qx-space-layout-xl);
+  }
+  
+  .qx-inline[data-align="start"] {
+    align-items: flex-start;
+  }
+  
+  .qx-inline[data-align="center"] {
+    align-items: center;
+  }
+  
+  .qx-inline[data-align="end"] {
+    align-items: flex-end;
+  }
+  
+  .qx-inline[data-align="baseline"] {
+    align-items: baseline;
+  }
+  
+  .qx-inline[data-align="stretch"] {
+    align-items: stretch;
+  }
+  
+  .qx-inline[data-justify="start"] {
+    justify-content: flex-start;
+  }
+  
+  .qx-inline[data-justify="center"] {
+    justify-content: center;
+  }
+  
+  .qx-inline[data-justify="end"] {
+    justify-content: flex-end;
+  }
+  
+  .qx-inline[data-justify="between"] {
+    justify-content: space-between;
+  }
+}
+
+@layer qx.components {
+  .qx-input {
+    align-items: center;
+    gap: var(--qx-space-gap-sm);
+    min-inline-size: 0;
+    block-size: var(--qx-size-control-lg);
+    padding-inline: var(--qx-space-inset-md);
+    background: var(--qx-color-bg-neutral-subtle);
+    box-shadow: inset 0 calc(-1 * var(--qx-border-width-default)) 0 var(--qx-color-border-strong);
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-default);
+    cursor: text;
+    transition-property: background-color;
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    border: 0;
+    border-start-start-radius: var(--qx-radius-control);
+    border-start-end-radius: var(--qx-radius-control);
+    display: flex;
+  }
+  
+  .qx-input:hover {
+    background: var(--qx-color-bg-neutral-subtle-hover);
+  }
+  
+  .qx-input:has( > .qx-input-control[data-invalid]), .qx-input.qx-textarea[data-invalid] {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-danger);
+    outline-offset: calc(-1 * var(--qx-focus-ring-width));
+    box-shadow: none;
+  }
+  
+  .qx-input:has( > .qx-input-control:focus), .qx-input.qx-textarea:focus {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: calc(-1 * var(--qx-focus-ring-width));
+    box-shadow: none;
+    background: var(--qx-color-bg-neutral-subtle);
+  }
+  
+  .qx-input:has( > .qx-input-control[readonly]), .qx-input.qx-textarea[readonly] {
+    box-shadow: inset 0 calc(-1 * var(--qx-border-width-default)) 0 var(--qx-color-border-subtle);
+    background: none;
+  }
+  
+  .qx-input:has( > .qx-input-control:disabled), .qx-input.qx-textarea:disabled {
+    background: var(--qx-color-bg-disabled);
+    box-shadow: inset 0 calc(-1 * var(--qx-border-width-default)) 0 var(--qx-color-border-disabled);
+    color: var(--qx-color-text-disabled);
+    cursor: not-allowed;
+  }
+  
+  .qx-input-control {
+    block-size: 100%;
+    min-inline-size: 0;
+    font: inherit;
+    color: inherit;
+    cursor: inherit;
+    background: none;
+    border: 0;
+    outline: 0;
+    flex: 1;
+    margin: 0;
+    padding: 0;
+  }
+  
+  .qx-input-control::placeholder, .qx-textarea::placeholder {
+    color: var(--qx-color-text-subtlest);
+    opacity: 1;
+  }
+  
+  .qx-input-icon {
+    color: var(--qx-color-icon-subtle);
+    flex: none;
+  }
+  
+  .qx-input-adornment {
+    color: var(--qx-color-text-subtle);
+    flex: none;
+    align-items: center;
+    display: inline-flex;
+  }
+  
+  .qx-textarea {
+    block-size: auto;
+    inline-size: 100%;
+    min-block-size: calc(var(--qx-textarea-rows) * 1lh + var(--qx-size-control-lg) - 1lh);
+    padding-block: calc((var(--qx-size-control-lg) - 1lh) / 2);
+    field-sizing: content;
+    resize: vertical;
+    display: block;
+  }
+  
+  .qx-textarea[data-max-rows] {
+    max-block-size: calc(var(--qx-textarea-max-rows) * 1lh + var(--qx-size-control-lg) - 1lh);
+  }
+  
+  @media (forced-colors: active) {
+    .qx-input {
+      border: var(--qx-border-width-default) solid FieldText;
+    }
+  
+    .qx-input:has( > .qx-input-control:disabled), .qx-textarea:disabled {
+      border-color: graytext;
+    }
+  }
+}
+
+@layer qx.components {
+  .qx-link {
+    border-radius: var(--qx-radius-sm);
+    color: var(--qx-color-text-link);
+    text-decoration-line: underline;
+    text-decoration-thickness: var(--qx-border-width-default);
+    text-underline-offset: 3px;
+    transition-property: color, text-decoration-thickness;
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    align-items: baseline;
+    gap: 2px;
+    display: inline-flex;
+  }
+  
+  .qx-link:hover {
+    color: var(--qx-color-text-link-hover);
+    text-decoration-thickness: var(--qx-border-width-strong);
+  }
+  
+  .qx-link:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: var(--qx-focus-ring-offset);
+  }
+  
+  .qx-link[data-tone="subtle"] {
+    color: var(--qx-color-text-subtle);
+  }
+  
+  .qx-link[data-tone="subtle"]:hover {
+    color: var(--qx-color-text-default);
+  }
+  
+  .qx-link[data-tone="inherit"] {
+    color: inherit;
+  }
+  
+  .qx-link .qx-link-icon {
+    flex: none;
+    align-self: center;
+  }
+}
+
+@layer qx.components {
+  .qx-menu-positioner {
+    z-index: var(--qx-z-popover);
+  }
+  
+  .qx-menu {
+    min-inline-size: 200px;
+    max-inline-size: min(320px, var(--available-width));
+    max-block-size: var(--available-height);
+    border: var(--qx-border-width-default) solid var(--qx-color-border-subtle);
+    border-radius: var(--qx-radius-overlay);
+    background: var(--qx-color-surface-overlay);
+    box-shadow: var(--qx-shadow-overlay);
+    color: var(--qx-color-text-default);
+    transition-property: opacity, translate;
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-enter);
+    outline: 0;
+    padding-block: 4px;
+    overflow-y: auto;
+  }
+  
+  .qx-menu[data-starting-style], .qx-menu[data-ending-style] {
+    opacity: 0;
+  }
+  
+  .qx-menu[data-side="bottom"]:is([data-starting-style], [data-ending-style]) {
+    translate: 0 -4px;
+  }
+  
+  .qx-menu[data-side="top"]:is([data-starting-style], [data-ending-style]) {
+    translate: 0 4px;
+  }
+  
+  .qx-menu[data-ending-style] {
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-exit);
+  }
+  
+  .qx-menu-item-icon {
+    color: var(--qx-color-icon-subtle);
+    flex: none;
+  }
+  
+  .qx-menu-item {
+    align-items: center;
+    gap: var(--qx-space-gap-sm);
+    block-size: var(--qx-size-control-md);
+    padding-inline: var(--qx-space-inset-md);
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    white-space: nowrap;
+    cursor: default;
+    -webkit-user-select: none;
+    user-select: none;
+    outline: 0;
+    display: flex;
+    position: relative;
+  }
+  
+  .qx-menu-item[data-highlighted] {
+    background: var(--qx-color-bg-neutral-subtle-hover);
+  }
+  
+  .qx-menu-item[data-highlighted]:before {
+    content: "";
+    inline-size: var(--qx-border-width-strong);
+    background: var(--qx-color-border-brand);
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+  }
+  
+  .qx-menu-item[data-popup-open] {
+    background: var(--qx-color-bg-neutral-subtle-hover);
+  }
+  
+  .qx-menu-item[data-tone="danger"] {
+    color: var(--qx-color-text-danger);
+  }
+  
+  .qx-menu-item[data-tone="danger"] .qx-menu-item-icon {
+    color: var(--qx-color-icon-danger);
+  }
+  
+  .qx-menu-item[data-disabled] {
+    color: var(--qx-color-text-disabled);
+  }
+  
+  .qx-menu-item[data-disabled] .qx-menu-item-icon {
+    color: var(--qx-color-icon-disabled);
+  }
+  
+  .qx-menu-item-label {
+    text-overflow: ellipsis;
+    flex: 1;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+  
+  .qx-menu-shortcut {
+    font: var(--qx-typography-code-sm);
+    color: var(--qx-color-text-subtlest);
+    margin-inline-start: var(--qx-space-gap-lg);
+  }
+  
+  .qx-menu-submenu-icon {
+    color: var(--qx-color-icon-subtle);
+    flex: none;
+  }
+  
+  [dir="rtl"] .qx-menu-submenu-icon {
+    scale: -1 1;
+  }
+  
+  .qx-menu-mark {
+    flex: none;
+    place-items: center;
+    block-size: 16px;
+    inline-size: 16px;
+    display: inline-grid;
+  }
+  
+  .qx-menu-mark-indicator {
+    display: flex;
+  }
+  
+  .qx-menu-dot {
+    border-radius: var(--qx-radius-full);
+    background: currentColor;
+    block-size: 6px;
+    inline-size: 6px;
+  }
+  
+  .qx-menu-group-label {
+    padding: 8px var(--qx-space-inset-md) 4px;
+    font: var(--qx-typography-label-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-subtle);
+  }
+  
+  .qx-menu-separator {
+    block-size: var(--qx-border-width-default);
+    background: var(--qx-color-border-subtle);
+    margin-block: 4px;
+  }
+  
+  @media (forced-colors: active) {
+    .qx-menu-item[data-highlighted] {
+      forced-color-adjust: none;
+      color: highlighttext;
+      background: highlight;
+    }
+  
+    .qx-menu-item[data-highlighted] .qx-menu-item-icon, .qx-menu-item[data-highlighted] .qx-menu-submenu-icon {
+      color: highlighttext;
+    }
+  
+    .qx-menu-separator {
+      forced-color-adjust: none;
+      background: canvastext;
+    }
+  }
+}
+
+@layer qx.components {
+  .qx-popover-positioner {
+    z-index: var(--qx-z-popover);
+  }
+  
+  .qx-popover {
+    gap: var(--qx-space-gap-md);
+    min-inline-size: 0;
+    max-inline-size: min(360px, var(--available-width));
+    max-block-size: var(--available-height);
+    padding: var(--qx-space-inset-lg);
+    border: var(--qx-border-width-default) solid var(--qx-color-border-subtle);
+    border-radius: var(--qx-radius-overlay);
+    background: var(--qx-color-surface-overlay);
+    box-shadow: var(--qx-shadow-overlay);
+    color: var(--qx-color-text-default);
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    transform-origin: var(--transform-origin);
+    transition-property: opacity, translate;
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-enter);
+    outline: 0;
+    flex-direction: column;
+    display: flex;
+    overflow: auto;
+  }
+  
+  .qx-popover[data-starting-style], .qx-popover[data-ending-style] {
+    opacity: 0;
+  }
+  
+  .qx-popover[data-side="bottom"]:is([data-starting-style], [data-ending-style]) {
+    translate: 0 -4px;
+  }
+  
+  .qx-popover[data-side="top"]:is([data-starting-style], [data-ending-style]) {
+    translate: 0 4px;
+  }
+  
+  .qx-popover[data-side="left"]:is([data-starting-style], [data-ending-style]) {
+    translate: 4px;
+  }
+  
+  .qx-popover[data-side="right"]:is([data-starting-style], [data-ending-style]) {
+    translate: -4px;
+  }
+  
+  .qx-popover[data-ending-style] {
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-exit);
+  }
+  
+  .qx-popover-header {
+    gap: var(--qx-space-gap-xs);
+    flex-direction: column;
+    display: flex;
+  }
+  
+  .qx-popover-title {
+    font: var(--qx-typography-title-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-heading);
+    margin: 0;
+  }
+  
+  .qx-popover-description {
+    color: var(--qx-color-text-subtle);
+    margin: 0;
+  }
+}
+
+@layer qx.components {
+  .qx-progress {
+    gap: var(--qx-space-gap-xs);
+    flex-direction: column;
+    min-inline-size: 0;
+    display: flex;
+  }
+  
+  .qx-progress-header {
+    justify-content: space-between;
+    align-items: baseline;
+    gap: var(--qx-space-gap-md);
+    display: flex;
+  }
+  
+  .qx-progress-label {
+    font: var(--qx-typography-label-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-subtle);
+  }
+  
+  .qx-progress-value {
+    font: var(--qx-typography-label-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    font-variant-numeric: tabular-nums;
+    color: var(--qx-color-text-default);
+  }
+  
+  .qx-progress-track {
+    background: var(--qx-color-border-default);
+    block-size: 4px;
+    position: relative;
+    overflow: hidden;
+  }
+  
+  .qx-progress-indicator {
+    background: var(--qx-color-bg-brand-bold);
+    block-size: 100%;
+    transition-property: inline-size;
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-standard);
+  }
+  
+  [data-tone="success"] .qx-progress-indicator {
+    background: var(--qx-color-bg-success-bold);
+  }
+  
+  [data-tone="warning"] .qx-progress-indicator {
+    background: var(--qx-color-bg-warning-bold);
+  }
+  
+  [data-tone="danger"] .qx-progress-indicator {
+    background: var(--qx-color-bg-danger-bold);
+  }
+  
+  .qx-progress-indicator[data-indeterminate] {
+    inline-size: 30%;
+    animation-name: qx-progress-slide;
+    animation-duration: calc(4 * var(--qx-motion-duration-slower));
+    animation-timing-function: var(--qx-motion-easing-standard);
+    animation-iteration-count: infinite;
+  }
+  
+  @keyframes qx-progress-slide {
+    from {
+      translate: -100%;
+    }
+  
+    to {
+      translate: 334%;
+    }
+  }
+  
+  @media (prefers-reduced-motion: reduce) {
+    .qx-progress-indicator[data-indeterminate] {
+      inline-size: 100%;
+      animation: 1.6s ease-in-out infinite qx-progress-fade;
+    }
+  }
+  
+  @keyframes qx-progress-fade {
+    50% {
+      opacity: .35;
+    }
+  }
+  
+  @media (forced-colors: active) {
+    .qx-progress-track, .qx-progress-indicator {
+      forced-color-adjust: none;
+    }
+  
+    .qx-progress-track {
+      background: graytext;
+    }
+  
+    .qx-progress-indicator {
+      background: highlight;
+    }
+  }
+}
+
+@layer qx.components {
+  .qx-radio {
+    border: var(--qx-border-width-default) solid var(--qx-color-border-strong);
+    border-radius: var(--qx-radius-full);
+    background: var(--qx-color-bg-input);
+    cursor: pointer;
+    block-size: 16px;
+    inline-size: 16px;
+    transition-property: border-color, border-width;
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    flex: none;
+    display: inline-block;
+  }
+  
+  .qx-radio:hover:not([data-disabled], [data-readonly]) {
+    border-color: var(--qx-color-border-strong-hover);
+  }
+  
+  .qx-radio[data-invalid] {
+    border-color: var(--qx-color-border-danger);
+  }
+  
+  .qx-radio[data-checked] {
+    border-width: 5px;
+    border-color: var(--qx-color-bg-brand-bold);
+  }
+  
+  .qx-radio[data-checked]:hover:not([data-disabled], [data-readonly]) {
+    border-color: var(--qx-color-bg-brand-bold-hover);
+  }
+  
+  .qx-radio[data-disabled] {
+    border-color: var(--qx-color-border-disabled);
+    background: var(--qx-color-bg-disabled);
+    cursor: not-allowed;
+  }
+  
+  .qx-radio[data-disabled][data-checked] {
+    border-color: var(--qx-color-icon-disabled);
+  }
+  
+  .qx-radio[data-readonly] {
+    cursor: default;
+  }
+  
+  .qx-radio:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: var(--qx-focus-ring-offset);
+  }
+}
+
+@layer qx.components {
+  .qx-scroll-area {
+    min-block-size: 0;
+    min-inline-size: 0;
+    display: flex;
+    position: relative;
+  }
+  
+  .qx-scroll-area-viewport {
+    overscroll-behavior: contain;
+    outline: 0;
+    flex: 1;
+    min-inline-size: 0;
+  }
+  
+  .qx-scroll-area-viewport:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: calc(-1 * var(--qx-focus-ring-width));
+  }
+  
+  .qx-scroll-area-scrollbar {
+    opacity: 0;
+    transition-property: opacity;
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    padding: 2px;
+    display: flex;
+  }
+  
+  .qx-scroll-area-scrollbar[data-orientation="vertical"] {
+    inline-size: 8px;
+  }
+  
+  .qx-scroll-area-scrollbar[data-orientation="horizontal"] {
+    block-size: 8px;
+  }
+  
+  .qx-scroll-area-scrollbar:is([data-hovering], [data-scrolling]), .qx-scroll-area:has( > .qx-scroll-area-viewport:focus-visible) > .qx-scroll-area-scrollbar {
+    opacity: 1;
+  }
+  
+  .qx-scroll-area-thumb {
+    border-radius: var(--qx-radius-sm);
+    background: var(--qx-color-border-strong);
+    flex: 1;
+  }
+  
+  [data-orientation="vertical"] > .qx-scroll-area-thumb {
+    inline-size: 100%;
+    block-size: var(--scroll-area-thumb-height);
+  }
+  
+  [data-orientation="horizontal"] > .qx-scroll-area-thumb {
+    inline-size: var(--scroll-area-thumb-width);
+    block-size: 100%;
+  }
+  
+  .qx-scroll-area-thumb:hover, .qx-scroll-area-thumb:active {
+    background: var(--qx-color-icon-subtle);
+  }
+  
+  @media (forced-colors: active) {
+    .qx-scroll-area-thumb {
+      forced-color-adjust: none;
+      background: canvastext;
+    }
+  }
+}
+
+@layer qx.components {
+  .qx-select-trigger {
+    align-items: center;
+    gap: var(--qx-space-gap-sm);
+    inline-size: 100%;
+    min-inline-size: 0;
+    block-size: var(--qx-size-control-lg);
+    padding-inline: var(--qx-space-inset-md);
+    background: var(--qx-color-bg-neutral-subtle);
+    box-shadow: inset 0 calc(-1 * var(--qx-border-width-default)) 0 var(--qx-color-border-strong);
+    color: var(--qx-color-text-default);
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    text-align: start;
+    cursor: pointer;
+    transition-property: background-color;
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    border: 0;
+    border-start-start-radius: var(--qx-radius-control);
+    border-start-end-radius: var(--qx-radius-control);
+    display: flex;
+  }
+  
+  .qx-select-trigger:hover {
+    background: var(--qx-color-bg-neutral-subtle-hover);
+  }
+  
+  .qx-select-trigger[data-invalid] {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-danger);
+    outline-offset: calc(-1 * var(--qx-focus-ring-width));
+    box-shadow: none;
+  }
+  
+  .qx-select-trigger:focus-visible, .qx-select-trigger[data-popup-open] {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: calc(-1 * var(--qx-focus-ring-width));
+    box-shadow: none;
+    background: var(--qx-color-bg-neutral-subtle);
+  }
+  
+  .qx-select-trigger[data-readonly] {
+    box-shadow: inset 0 calc(-1 * var(--qx-border-width-default)) 0 var(--qx-color-border-subtle);
+    cursor: default;
+    background: none;
+  }
+  
+  .qx-select-trigger[data-disabled] {
+    background: var(--qx-color-bg-disabled);
+    box-shadow: inset 0 calc(-1 * var(--qx-border-width-default)) 0 var(--qx-color-border-disabled);
+    color: var(--qx-color-text-disabled);
+    cursor: not-allowed;
+  }
+  
+  .qx-select-value {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+  
+  .qx-select-value[data-placeholder] {
+    color: var(--qx-color-text-subtlest);
+  }
+  
+  .qx-select-icon {
+    color: var(--qx-color-icon-default);
+    flex: none;
+    display: flex;
+  }
+  
+  [data-disabled] > .qx-select-icon {
+    color: var(--qx-color-icon-disabled);
+  }
+  
+  .qx-select-positioner {
+    z-index: var(--qx-z-popover);
+  }
+  
+  .qx-select-popup {
+    min-inline-size: var(--anchor-width);
+    max-inline-size: var(--available-width);
+    max-block-size: min(320px, var(--available-height));
+    border: var(--qx-border-width-default) solid var(--qx-color-border-subtle);
+    border-radius: var(--qx-radius-overlay);
+    background: var(--qx-color-surface-overlay);
+    box-shadow: var(--qx-shadow-overlay);
+    color: var(--qx-color-text-default);
+    transition-property: opacity, translate;
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-enter);
+    outline: 0;
+    padding-block: 4px;
+    overflow-y: auto;
+  }
+  
+  .qx-select-popup[data-starting-style], .qx-select-popup[data-ending-style] {
+    opacity: 0;
+  }
+  
+  .qx-select-popup[data-side="bottom"]:is([data-starting-style], [data-ending-style]) {
+    translate: 0 -4px;
+  }
+  
+  .qx-select-popup[data-side="top"]:is([data-starting-style], [data-ending-style]) {
+    translate: 0 4px;
+  }
+  
+  .qx-select-popup[data-ending-style] {
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-exit);
+  }
+  
+  .qx-select-option {
+    align-items: center;
+    gap: var(--qx-space-gap-sm);
+    block-size: var(--qx-size-control-md);
+    padding-inline: var(--qx-space-inset-md);
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    cursor: default;
+    -webkit-user-select: none;
+    user-select: none;
+    outline: 0;
+    display: flex;
+    position: relative;
+  }
+  
+  .qx-select-option[data-highlighted] {
+    background: var(--qx-color-bg-neutral-subtle-hover);
+  }
+  
+  .qx-select-option[data-highlighted]:before {
+    content: "";
+    inline-size: var(--qx-border-width-strong);
+    background: var(--qx-color-border-brand);
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+  }
+  
+  .qx-select-option[data-selected] {
+    font-weight: var(--qx-typography-label-md-font-weight);
+  }
+  
+  .qx-select-option[data-disabled] {
+    color: var(--qx-color-text-disabled);
+  }
+  
+  .qx-select-option-text {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+  
+  .qx-select-option-check {
+    color: var(--qx-color-icon-brand);
+    flex: none;
+    display: flex;
+  }
+  
+  .qx-select-group-label {
+    padding: 8px var(--qx-space-inset-md) 4px;
+    font: var(--qx-typography-label-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-subtle);
+  }
+  
+  @media (forced-colors: active) {
+    .qx-select-trigger {
+      border: var(--qx-border-width-default) solid ButtonText;
+    }
+  
+    .qx-select-option[data-highlighted] {
+      forced-color-adjust: none;
+      color: highlighttext;
+      background: highlight;
+    }
+  
+    .qx-select-option[data-highlighted] .qx-select-option-check {
+      color: highlighttext;
+    }
+  }
+}
+
+@layer qx.components {
+  .qx-separator {
+    background: var(--qx-color-border-subtle);
+    border: 0;
+    flex: none;
+    margin: 0;
+  }
+  
+  .qx-separator[data-orientation="horizontal"] {
+    inline-size: 100%;
+    block-size: var(--qx-border-width-default);
+  }
+  
+  .qx-separator[data-orientation="vertical"] {
+    inline-size: var(--qx-border-width-default);
+    align-self: stretch;
+  }
+  
+  .qx-separator[data-tone="default"] {
+    background: var(--qx-color-border-default);
+  }
+  
+  .qx-separator[data-tone="strong"] {
+    background: var(--qx-color-border-strong);
+  }
+  
+  @media (forced-colors: active) {
+    .qx-separator {
+      forced-color-adjust: none;
+      background: canvastext;
+    }
+  }
+}
+
+@layer qx.components {
+  .qx-skeleton {
+    border-radius: var(--qx-radius-sm);
+    background: var(--qx-color-bg-neutral-subtle-pressed);
+    block-size: 1lh;
+    inline-size: 100%;
+    animation-name: qx-skeleton-pulse;
+    animation-duration: calc(4 * var(--qx-motion-duration-slower));
+    animation-timing-function: var(--qx-motion-easing-standard);
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    display: block;
+  }
+  
+  .qx-skeleton[data-variant="block"] {
+    border-radius: var(--qx-radius-surface);
+    block-size: 64px;
+  }
+  
+  .qx-skeleton[data-variant="circle"] {
+    border-radius: var(--qx-radius-full);
+    block-size: 32px;
+    inline-size: 32px;
+  }
+  
+  @keyframes qx-skeleton-pulse {
+    to {
+      opacity: .45;
+    }
+  }
+  
+  @media (forced-colors: active) {
+    .qx-skeleton {
+      border: var(--qx-border-width-default) solid GrayText;
+    }
+  }
+}
+
+@layer qx.components {
+  .qx-skip-link {
+    z-index: var(--qx-z-skip-link);
+    padding: var(--qx-space-inset-sm) var(--qx-space-inset-md);
+    border-radius: var(--qx-radius-control);
+    background: var(--qx-color-surface-overlay);
+    box-shadow: var(--qx-shadow-overlay);
+    color: var(--qx-color-text-link);
+    font: var(--qx-typography-label-md);
+    text-underline-offset: 3px;
+    text-decoration: underline;
+    position: fixed;
+    inset-block-start: var(--qx-space-inset-sm);
+    inset-inline-start: var(--qx-space-inset-sm);
+  }
+  
+  .qx-skip-link:not(:focus) {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    block-size: 1px;
+    inline-size: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+  }
+  
+  .qx-skip-link:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: var(--qx-focus-ring-offset);
+  }
+}
+
+@layer qx.components {
+  .qx-slider {
+    gap: var(--qx-space-gap-xs);
+    flex-direction: column;
+    min-inline-size: 0;
+    display: flex;
+  }
+  
+  .qx-slider-header {
+    justify-content: space-between;
+    align-items: baseline;
+    gap: var(--qx-space-gap-md);
+    display: flex;
+  }
+  
+  .qx-slider-label {
+    font: var(--qx-typography-label-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-subtle);
+  }
+  
+  .qx-slider-value {
+    font: var(--qx-typography-label-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    font-variant-numeric: tabular-nums;
+    color: var(--qx-color-text-default);
+  }
+  
+  .qx-slider-control {
+    block-size: var(--qx-size-target-min);
+    touch-action: none;
+    -webkit-user-select: none;
+    user-select: none;
+    align-items: center;
+    padding-inline: 8px;
+    display: flex;
+  }
+  
+  .qx-slider-track {
+    background: var(--qx-color-border-default);
+    block-size: 4px;
+    inline-size: 100%;
+    position: relative;
+  }
+  
+  .qx-slider-indicator {
+    background: var(--qx-color-bg-brand-bold);
+    block-size: 100%;
+  }
+  
+  [data-disabled] .qx-slider-indicator {
+    background: var(--qx-color-bg-disabled);
+  }
+  
+  .qx-slider-thumb {
+    border-radius: var(--qx-radius-sm);
+    background: var(--qx-color-bg-brand-bold);
+    block-size: 16px;
+    inline-size: 16px;
+    box-shadow: 0 0 0 var(--qx-border-width-strong) var(--qx-color-surface-default);
+    cursor: grab;
+    transition-property: background-color;
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-standard);
+  }
+  
+  .qx-slider-thumb:hover {
+    background: var(--qx-color-bg-brand-bold-hover);
+  }
+  
+  .qx-slider-thumb[data-dragging] {
+    cursor: grabbing;
+  }
+  
+  .qx-slider-thumb:has(:focus-visible) {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: var(--qx-focus-ring-offset);
+  }
+  
+  .qx-slider-thumb[data-disabled] {
+    background: var(--qx-color-icon-disabled);
+    cursor: not-allowed;
+  }
+  
+  @media (forced-colors: active) {
+    .qx-slider-track, .qx-slider-indicator, .qx-slider-thumb {
+      forced-color-adjust: none;
+    }
+  
+    .qx-slider-track {
+      background: graytext;
+    }
+  
+    .qx-slider-indicator, .qx-slider-thumb {
+      background: highlight;
+    }
+  
+    .qx-slider-thumb {
+      box-shadow: 0 0 0 var(--qx-border-width-strong) Canvas;
+    }
+  
+    .qx-slider-thumb[data-disabled], [data-disabled] .qx-slider-indicator {
+      background: graytext;
+    }
+  }
+}
+
+@layer qx.components {
+  .qx-spinner {
+    border: 2px solid;
+    border-radius: var(--qx-radius-full);
+    block-size: 16px;
+    inline-size: 16px;
+    animation-name: qx-spinner-turn;
+    animation-duration: calc(2 * var(--qx-motion-duration-slower));
+    animation-timing-function: var(--qx-motion-easing-linear);
+    border-inline-end-color: #0000;
+    flex: none;
+    animation-iteration-count: infinite;
+    display: inline-block;
+  }
+  
+  .qx-spinner[data-size="sm"] {
+    block-size: 14px;
+    inline-size: 14px;
+  }
+  
+  .qx-spinner[data-size="lg"] {
+    block-size: 20px;
+    inline-size: 20px;
+  }
+  
+  .qx-spinner[data-size="xl"] {
+    block-size: 24px;
+    inline-size: 24px;
+  }
+  
+  .qx-spinner[data-tone="brand"] {
+    color: var(--qx-color-icon-brand);
+  }
+  
+  @keyframes qx-spinner-turn {
+    to {
+      rotate: 1turn;
+    }
+  }
+  
+  @media (prefers-reduced-motion: reduce) {
+    .qx-spinner {
+      border-inline-end-color: currentColor;
+      animation: 1.6s ease-in-out infinite qx-spinner-fade;
+    }
+  }
+  
+  @keyframes qx-spinner-fade {
+    50% {
+      opacity: .35;
+    }
+  }
+}
+
+@layer qx.components {
+  .qx-stack {
+    flex-direction: column;
+    display: flex;
+  }
+  
+  .qx-stack[data-gap="none"] {
+    gap: 0;
+  }
+  
+  .qx-stack[data-gap="xs"] {
+    gap: var(--qx-space-gap-xs);
+  }
+  
+  .qx-stack[data-gap="sm"] {
+    gap: var(--qx-space-gap-sm);
+  }
+  
+  .qx-stack[data-gap="md"] {
+    gap: var(--qx-space-gap-md);
+  }
+  
+  .qx-stack[data-gap="lg"] {
+    gap: var(--qx-space-gap-lg);
+  }
+  
+  .qx-stack[data-gap="xl"] {
+    gap: var(--qx-space-gap-xl);
+  }
+  
+  .qx-stack[data-gap="2xl"] {
+    gap: var(--qx-space-layout-md);
+  }
+  
+  .qx-stack[data-gap="3xl"] {
+    gap: var(--qx-space-layout-lg);
+  }
+  
+  .qx-stack[data-gap="4xl"] {
+    gap: var(--qx-space-layout-xl);
+  }
+  
+  .qx-stack[data-align="start"] {
+    align-items: flex-start;
+  }
+  
+  .qx-stack[data-align="center"] {
+    align-items: center;
+  }
+  
+  .qx-stack[data-align="end"] {
+    align-items: flex-end;
+  }
+  
+  .qx-stack[data-align="stretch"] {
+    align-items: stretch;
+  }
+  
+  .qx-stack[data-justify="start"] {
+    justify-content: flex-start;
+  }
+  
+  .qx-stack[data-justify="center"] {
+    justify-content: center;
+  }
+  
+  .qx-stack[data-justify="end"] {
+    justify-content: flex-end;
+  }
+  
+  .qx-stack[data-justify="between"] {
+    justify-content: space-between;
+  }
+}
+
+@layer qx.components {
+  .qx-switch {
+    border: var(--qx-border-width-default) solid var(--qx-color-border-strong);
+    border-radius: var(--qx-radius-sm);
+    background: var(--qx-color-bg-input);
+    cursor: pointer;
+    block-size: 18px;
+    inline-size: 32px;
+    transition-property: background-color, border-color;
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    flex: none;
+    display: inline-block;
+    position: relative;
+  }
+  
+  .qx-switch:hover:not([data-disabled], [data-readonly]) {
+    border-color: var(--qx-color-border-strong-hover);
+  }
+  
+  .qx-switch[data-invalid] {
+    border-color: var(--qx-color-border-danger);
+  }
+  
+  .qx-switch[data-checked] {
+    border-color: var(--qx-color-bg-brand-bold);
+    background: var(--qx-color-bg-brand-bold);
+  }
+  
+  .qx-switch[data-checked]:hover:not([data-disabled], [data-readonly]) {
+    border-color: var(--qx-color-bg-brand-bold-hover);
+    background: var(--qx-color-bg-brand-bold-hover);
+  }
+  
+  .qx-switch[data-disabled] {
+    border-color: var(--qx-color-border-disabled);
+    background: var(--qx-color-bg-disabled);
+    cursor: not-allowed;
+  }
+  
+  .qx-switch[data-readonly] {
+    cursor: default;
+  }
+  
+  .qx-switch:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: var(--qx-focus-ring-offset);
+  }
+  
+  .qx-switch-thumb {
+    border-radius: calc(var(--qx-radius-sm) / 2);
+    background: var(--qx-color-icon-subtle);
+    block-size: 12px;
+    inline-size: 12px;
+    transition-property: inset-inline-start, background-color;
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 2px;
+    translate: 0 -50%;
+  }
+  
+  .qx-switch-thumb[data-checked] {
+    background: var(--qx-color-surface-default);
+    inset-inline-start: 16px;
+  }
+  
+  .qx-switch-thumb[data-disabled] {
+    background: var(--qx-color-icon-disabled);
+  }
+  
+  .qx-choice-label > .qx-switch {
+    margin-block: 1px;
+  }
+  
+  @media (forced-colors: active) {
+    .qx-switch, .qx-switch-thumb {
+      forced-color-adjust: none;
+    }
+  
+    .qx-switch {
+      background: canvas;
+      border-color: canvastext;
+    }
+  
+    .qx-switch-thumb {
+      background: canvastext;
+    }
+  
+    .qx-switch[data-checked] {
+      background: highlight;
+      border-color: highlight;
+    }
+  
+    .qx-switch-thumb[data-checked] {
+      background: highlighttext;
+    }
+  
+    .qx-switch[data-disabled] {
+      background: canvas;
+      border-color: graytext;
+    }
+  
+    .qx-switch-thumb[data-disabled] {
+      background: graytext;
+    }
+  }
+}
+
+@layer qx.components {
+  .qx-table {
+    border-collapse: collapse;
+    inline-size: 100%;
+    color: var(--qx-color-text-default);
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+  }
+  
+  .qx-table-caption {
+    caption-side: top;
+    font: var(--qx-typography-label-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-subtle);
+    text-align: start;
+    padding-block-end: var(--qx-space-gap-sm);
+  }
+  
+  .qx-table-head {
+    background: var(--qx-color-bg-neutral-subtle);
+    font: var(--qx-typography-label-sm);
+    font-weight: var(--qx-typography-title-sm-font-weight);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    white-space: nowrap;
+  }
+  
+  .qx-table-cell {
+    border-block-start: var(--qx-border-width-default) solid var(--qx-color-border-subtle);
+  }
+  
+  .qx-table-head, .qx-table-cell {
+    block-size: var(--qx-size-row);
+    padding-block: 0;
+    padding-inline: var(--qx-space-inset-sm);
+    text-align: start;
+    vertical-align: middle;
+  }
+  
+  :is(.qx-table-head, .qx-table-cell):first-child {
+    padding-inline-start: var(--qx-space-inset-md);
+  }
+  
+  :is(.qx-table-head, .qx-table-cell):last-child {
+    padding-inline-end: var(--qx-space-inset-md);
+  }
+  
+  :is(.qx-table-head, .qx-table-cell)[data-align="center"] {
+    text-align: center;
+  }
+  
+  :is(.qx-table-head, .qx-table-cell)[data-align="end"] {
+    text-align: end;
+  }
+  
+  :is(.qx-table-head, .qx-table-cell)[data-numeric] {
+    font-variant-numeric: tabular-nums;
+  }
+  
+  .qx-table-row[data-selected] > .qx-table-cell {
+    background: var(--qx-color-bg-selected);
+  }
+  
+  .qx-table-body > .qx-table-row:not([data-selected]):hover > .qx-table-cell {
+    background: var(--qx-color-bg-neutral-subtle);
+  }
+}
+
+@layer qx.components {
+  .qx-tabs {
+    flex-direction: column;
+    min-inline-size: 0;
+    display: flex;
+  }
+  
+  .qx-tabs[data-orientation="vertical"] {
+    flex-direction: row;
+  }
+  
+  .qx-tabs-list {
+    min-inline-size: 0;
+    box-shadow: inset 0 calc(-1 * var(--qx-border-width-strong)) 0 var(--qx-color-border-subtle);
+    scrollbar-width: none;
+    display: flex;
+    position: relative;
+    overflow-x: auto;
+  }
+  
+  .qx-tabs-list[data-orientation="vertical"] {
+    box-shadow: none;
+    border-inline-start: var(--qx-border-width-strong) solid var(--qx-color-border-subtle);
+    flex-direction: column;
+    flex: none;
+    overflow-x: visible;
+  }
+  
+  .qx-tab {
+    align-items: center;
+    gap: var(--qx-space-gap-sm);
+    block-size: var(--qx-size-control-lg);
+    padding-inline: clamp(12px, var(--qx-size-control-lg) - 20px, 16px);
+    color: var(--qx-color-text-subtle);
+    font: var(--qx-typography-label-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    white-space: nowrap;
+    cursor: pointer;
+    transition-property: color;
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    background: none;
+    border: 0;
+    flex: none;
+    display: inline-flex;
+    position: relative;
+  }
+  
+  .qx-tab:hover {
+    color: var(--qx-color-text-default);
+  }
+  
+  .qx-tab[data-active] {
+    color: var(--qx-color-text-default);
+    font-weight: var(--qx-typography-title-sm-font-weight);
+  }
+  
+  .qx-tab[data-disabled] {
+    color: var(--qx-color-text-disabled);
+    cursor: not-allowed;
+  }
+  
+  .qx-tab:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: calc(-1 * var(--qx-focus-ring-width));
+  }
+  
+  .qx-tab-icon {
+    flex: none;
+  }
+  
+  .qx-tab-icon-filled, .qx-tab:has( > .qx-tab-icon-filled)[data-active] > .qx-tab-icon-outline {
+    display: none;
+  }
+  
+  .qx-tab[data-active] > .qx-tab-icon-filled {
+    display: block;
+  }
+  
+  .qx-tabs-indicator {
+    inline-size: var(--active-tab-width);
+    block-size: var(--qx-border-width-accent);
+    translate: var(--active-tab-left) 0;
+    background: var(--qx-color-border-brand);
+    transition-property: translate, inline-size, block-size;
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+  }
+  
+  [data-orientation="vertical"] > .qx-tabs-indicator {
+    inline-size: var(--qx-border-width-accent);
+    block-size: var(--active-tab-height);
+    translate: 0 var(--active-tab-top);
+    inset-block-end: auto;
+    inset-inline-start: calc(-1 * var(--qx-border-width-strong));
+  }
+  
+  .qx-tabs-panel {
+    outline: 0;
+    min-inline-size: 0;
+  }
+  
+  .qx-tabs-panel:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: var(--qx-focus-ring-offset);
+  }
+  
+  @media (forced-colors: active) {
+    .qx-tabs-list:not([data-orientation="vertical"]) {
+      border-block-end: var(--qx-border-width-strong) solid CanvasText;
+    }
+  
+    .qx-tabs-indicator {
+      forced-color-adjust: none;
+      background: highlight;
+    }
+  }
+}
+
+@layer qx.components {
+  .qx-text {
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    margin: 0;
+  }
+  
+  .qx-text[data-size="sm"] {
+    font-size: var(--qx-typography-body-sm-font-size);
+    line-height: var(--qx-typography-body-sm-line-height);
+  }
+  
+  .qx-text[data-size="md"] {
+    font-size: var(--qx-typography-body-md-font-size);
+    line-height: var(--qx-typography-body-md-line-height);
+  }
+  
+  .qx-text[data-size="lg"] {
+    font-size: var(--qx-typography-body-lg-font-size);
+    line-height: var(--qx-typography-body-lg-line-height);
+  }
+  
+  .qx-text[data-weight="regular"] {
+    font-weight: var(--qx-typography-body-md-font-weight);
+  }
+  
+  .qx-text[data-weight="medium"] {
+    font-weight: var(--qx-typography-label-md-font-weight);
+  }
+  
+  .qx-text[data-weight="semibold"] {
+    font-weight: var(--qx-typography-title-md-font-weight);
+  }
+  
+  .qx-text[data-mono] {
+    font-family: var(--qx-font-family-mono);
+  }
+  
+  .qx-text[data-tone="default"] {
+    color: var(--qx-color-text-default);
+  }
+  
+  .qx-text[data-tone="subtle"] {
+    color: var(--qx-color-text-subtle);
+  }
+  
+  .qx-text[data-tone="subtlest"] {
+    color: var(--qx-color-text-subtlest);
+  }
+  
+  .qx-text[data-tone="disabled"] {
+    color: var(--qx-color-text-disabled);
+  }
+  
+  .qx-text[data-tone="inverse"] {
+    color: var(--qx-color-text-inverse);
+  }
+  
+  .qx-text[data-tone="brand"] {
+    color: var(--qx-color-text-brand);
+  }
+  
+  .qx-text[data-tone="danger"] {
+    color: var(--qx-color-text-danger);
+  }
+  
+  .qx-text[data-tone="success"] {
+    color: var(--qx-color-text-success);
+  }
+  
+  .qx-text[data-tone="warning"] {
+    color: var(--qx-color-text-warning);
+  }
+  
+  .qx-text[data-tone="info"] {
+    color: var(--qx-color-text-info);
+  }
+  
+  .qx-text[data-truncate="line"] {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+  
+  .qx-text[data-truncate="lines"] {
+    -webkit-line-clamp: var(--qx-text-lines);
+    line-clamp: var(--qx-text-lines);
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+  
+  .qx-text[data-align="start"] {
+    text-align: start;
+  }
+  
+  .qx-text[data-align="center"] {
+    text-align: center;
+  }
+  
+  .qx-text[data-align="end"] {
+    text-align: end;
+  }
+}
+
+@layer qx.components {
+  .qx-toast-viewport {
+    z-index: var(--qx-z-toast);
+    gap: var(--qx-space-gap-sm);
+    outline: 0;
+    flex-direction: column-reverse;
+    inline-size: min(360px, 100vw - 32px);
+    display: flex;
+    position: fixed;
+    inset-block-end: var(--qx-space-inset-lg);
+    inset-inline-end: var(--qx-space-inset-lg);
+  }
+  
+  .qx-toast {
+    align-items: flex-start;
+    gap: var(--qx-space-gap-md);
+    border-inline-start: var(--qx-border-width-accent) solid var(--qx-color-icon-info);
+    border-radius: var(--qx-radius-overlay);
+    background: var(--qx-color-surface-overlay);
+    box-shadow: var(--qx-shadow-overlay);
+    color: var(--qx-color-text-default);
+    font: var(--qx-typography-body-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    transform: translate(var(--toast-swipe-movement-x, 0px), var(--toast-swipe-movement-y, 0px));
+    transition-property: opacity, translate, transform;
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-enter);
+    padding: 12px 8px 12px 14px;
+    display: flex;
+  }
+  
+  .qx-toast[data-starting-style], .qx-toast[data-ending-style] {
+    opacity: 0;
+    translate: 0 4px;
+  }
+  
+  .qx-toast[data-ending-style] {
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-exit);
+  }
+  
+  .qx-toast[data-swiping] {
+    transition: none;
+  }
+  
+  .qx-toast[data-limited] {
+    display: none;
+  }
+  
+  .qx-toast[data-tone="success"] {
+    border-inline-start-color: var(--qx-color-icon-success);
+  }
+  
+  .qx-toast[data-tone="warning"] {
+    border-inline-start-color: var(--qx-color-icon-warning);
+  }
+  
+  .qx-toast[data-tone="danger"] {
+    border-inline-start-color: var(--qx-color-icon-danger);
+  }
+  
+  .qx-toast-icon {
+    color: var(--qx-color-icon-info);
+    flex: none;
+    margin-block-start: 1px;
+  }
+  
+  .qx-toast[data-tone="success"] .qx-toast-icon {
+    color: var(--qx-color-icon-success);
+  }
+  
+  .qx-toast[data-tone="warning"] .qx-toast-icon {
+    color: var(--qx-color-icon-warning);
+  }
+  
+  .qx-toast[data-tone="danger"] .qx-toast-icon {
+    color: var(--qx-color-icon-danger);
+  }
+  
+  .qx-toast-content {
+    flex-direction: column;
+    flex: 1;
+    gap: 2px;
+    min-inline-size: 0;
+    display: flex;
+  }
+  
+  .qx-toast-title {
+    font: var(--qx-typography-title-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-heading);
+    margin: 0;
+  }
+  
+  .qx-toast-description {
+    font: var(--qx-typography-body-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    color: var(--qx-color-text-subtle);
+    margin: 0;
+  }
+  
+  .qx-toast-action {
+    flex: none;
+    margin-block: -2px;
+  }
+  
+  @media (forced-colors: active) {
+    .qx-toast {
+      border: var(--qx-border-width-default) solid CanvasText;
+      border-inline-start-width: var(--qx-border-width-accent);
+    }
+  }
+}
+
+@layer qx.components {
+  .qx-toggle {
+    justify-content: center;
+    align-items: center;
+    gap: var(--qx-space-gap-sm);
+    block-size: var(--qx-size-control-md);
+    border-radius: var(--qx-radius-control);
+    color: var(--qx-color-text-subtle);
+    font: var(--qx-typography-label-md);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    white-space: nowrap;
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    transition-property: background-color, color;
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-standard);
+    background: none;
+    border: 0;
+    padding-inline: 12px;
+    display: inline-flex;
+  }
+  
+  .qx-toggle:hover:not([data-disabled]):not([data-pressed]) {
+    background: var(--qx-color-bg-neutral-subtle);
+    color: var(--qx-color-text-default);
+  }
+  
+  .qx-toggle[data-pressed] {
+    background: var(--qx-color-bg-neutral-bold);
+    color: var(--qx-color-text-inverse);
+  }
+  
+  .qx-toggle[data-disabled] {
+    color: var(--qx-color-text-disabled);
+    cursor: not-allowed;
+  }
+  
+  .qx-toggle:focus-visible {
+    outline: var(--qx-focus-ring-width) solid var(--qx-color-border-focus);
+    outline-offset: calc(-1 * var(--qx-focus-ring-width));
+    box-shadow: inset 0 0 0 calc(var(--qx-focus-ring-width) + var(--qx-border-width-default))
+        var(--qx-color-surface-default);
+  }
+  
+  .qx-toggle[data-size="sm"] {
+    block-size: var(--qx-size-control-sm);
+    font-size: var(--qx-typography-label-sm-font-size);
+    line-height: var(--qx-typography-label-sm-line-height);
+    padding-inline: 8px;
+  }
+  
+  .qx-toggle[data-size="lg"] {
+    block-size: var(--qx-size-control-lg);
+    padding-inline: 16px;
+  }
+  
+  .qx-toggle[data-icon-only] {
+    aspect-ratio: 1;
+    padding-inline: 0;
+  }
+  
+  .qx-toggle .qx-toggle-icon-filled {
+    display: none;
+  }
+  
+  .qx-toggle[data-pressed] .qx-toggle-icon-filled {
+    display: block;
+  }
+  
+  .qx-toggle[data-pressed]:has(.qx-toggle-icon-filled) .qx-toggle-icon-outline {
+    display: none;
+  }
+  
+  .qx-toggle-group {
+    align-items: stretch;
+    display: inline-flex;
+  }
+  
+  .qx-toggle-group[data-orientation="vertical"] {
+    flex-direction: column;
+  }
+  
+  .qx-toggle-group[data-variant="separate"] {
+    gap: var(--qx-space-gap-xs);
+  }
+  
+  .qx-toggle-group[data-variant="segmented"] {
+    border: var(--qx-border-width-default) solid var(--qx-color-border-strong);
+    border-radius: var(--qx-radius-control);
+    overflow: hidden;
+  }
+  
+  .qx-toggle-group[data-variant="segmented"] > .qx-toggle {
+    block-size: calc(var(--qx-size-control-md) - 2 * var(--qx-border-width-default));
+    border-radius: 0;
+  }
+  
+  .qx-toggle-group[data-variant="segmented"] > .qx-toggle + .qx-toggle {
+    border-inline-start: var(--qx-border-width-default) solid var(--qx-color-border-strong);
+  }
+  
+  .qx-toggle-group[data-variant="segmented"][data-size="sm"] > .qx-toggle {
+    block-size: calc(var(--qx-size-control-sm) - 2 * var(--qx-border-width-default));
+  }
+  
+  .qx-toggle-group[data-variant="segmented"][data-size="lg"] > .qx-toggle {
+    block-size: calc(var(--qx-size-control-lg) - 2 * var(--qx-border-width-default));
+  }
+  
+  @media (forced-colors: active) {
+    .qx-toggle {
+      border: var(--qx-border-width-default) solid ButtonText;
+    }
+  
+    .qx-toggle[data-pressed] {
+      forced-color-adjust: none;
+      color: highlighttext;
+      background: highlight;
+      border-color: highlight;
+    }
+  }
+}
+
+@layer qx.components {
+  .qx-tooltip-positioner {
+    z-index: var(--qx-z-tooltip);
+  }
+  
+  .qx-tooltip {
+    border-radius: var(--qx-radius-tooltip);
+    background: var(--qx-color-surface-inverse);
+    max-inline-size: 280px;
+    color: var(--qx-color-text-inverse);
+    font: var(--qx-typography-body-sm);
+    font-variation-settings: "GEOM" var(--qx-font-geometry-body);
+    transition-property: opacity, translate;
+    transition-duration: var(--qx-motion-duration-normal);
+    transition-timing-function: var(--qx-motion-easing-enter);
+    padding: 4px 8px;
+  }
+  
+  .qx-tooltip[data-starting-style], .qx-tooltip[data-ending-style] {
+    opacity: 0;
+  }
+  
+  .qx-tooltip[data-side="top"]:is([data-starting-style], [data-ending-style]) {
+    translate: 0 4px;
+  }
+  
+  .qx-tooltip[data-side="bottom"]:is([data-starting-style], [data-ending-style]) {
+    translate: 0 -4px;
+  }
+  
+  .qx-tooltip[data-ending-style] {
+    transition-duration: var(--qx-motion-duration-fast);
+    transition-timing-function: var(--qx-motion-easing-exit);
+  }
+  
+  .qx-tooltip[data-instant] {
+    transition: none;
+  }
+  
+  @media (forced-colors: active) {
+    .qx-tooltip {
+      border: var(--qx-border-width-default) solid CanvasText;
+    }
+  }
+}
+
+@layer qx.components {
+  .qx-visually-hidden {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+    block-size: 1px;
+    inline-size: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+  }
+}