/* Fikir CSS v0.1 - Generated bundle */
/* Do not edit dist directly */
@layer reset, base, layouts, recipes, components, utilities;

/* Source: packages/tokens/core.css */
@layer base {
  :root {
    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;

    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 0.875rem;
    --radius-xl: 1.25rem;

    --transition-duration-fast: 100ms;
    --transition-duration-base: 180ms;
    --transition-duration-slow: 320ms;

    --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.06), 0 2px 8px rgb(0 0 0 / 0.08);
    --shadow-md: 0 4px 12px rgb(0 0 0 / 0.1), 0 8px 24px rgb(0 0 0 / 0.12);
    --shadow-lg: 0 12px 40px rgb(0 0 0 / 0.16), 0 4px 12px rgb(0 0 0 / 0.08);

    --color-primary-500: oklch(62% 0.18 262);
    --color-primary-600: oklch(56% 0.18 262);
    --color-danger-500: oklch(60% 0.2 24);
    --color-success-500: oklch(58% 0.18 145);
    --color-success-600: oklch(50% 0.17 145);
    --color-warning-500: oklch(72% 0.17 85);
    --color-warning-600: oklch(60% 0.16 85);
    --color-info-500: oklch(65% 0.15 220);

    --color-gray-50: oklch(98% 0.004 260);
    --color-gray-100: oklch(95% 0.006 260);
    --color-gray-300: oklch(86% 0.01 260);
    --color-gray-700: oklch(38% 0.01 260);
    --color-gray-900: oklch(22% 0.01 260);

    --container-md: 64rem;
  }
}

/* Source: packages/tokens/semantic.css */
@layer base {
  :root,
  [data-theme="light"] {
    --color-bg-default: var(--color-gray-50);
    --color-bg-surface: #ffffff;
    --color-bg-elevated: #ffffff;
    --color-fg-default: var(--color-gray-900);
    --color-fg-muted: var(--color-gray-700);
    --color-border-subtle: var(--color-gray-300);
    --color-accent: var(--color-primary-500);
    --color-danger: var(--color-danger-500);
    --color-success: var(--color-success-500);
    --color-warning: var(--color-warning-500);
    --color-info: var(--color-info-500);

    --color-danger-subtle: color-mix(in oklch, var(--color-danger) 18%, var(--color-bg-surface));
    --color-success-subtle: color-mix(in oklch, var(--color-success) 20%, var(--color-bg-surface));
    --color-warning-subtle: color-mix(in oklch, var(--color-warning) 22%, var(--color-bg-surface));
    --color-info-subtle: color-mix(in oklch, var(--color-info) 14%, var(--color-bg-surface));
  }
}

/* Source: packages/tokens/themes/dark.css */
@layer base {
  [data-theme="dark"] {
    --color-bg-default: oklch(16% 0.01 260);
    --color-bg-surface: oklch(22% 0.012 260);
    --color-bg-elevated: oklch(26% 0.012 260);
    --color-fg-default: oklch(96% 0.008 260);
    --color-fg-muted: oklch(72% 0.01 260);
    --color-border-subtle: oklch(34% 0.012 260);

    --color-danger: color-mix(in oklch, var(--color-danger-500) 80%, var(--color-fg-default));
    --color-success: color-mix(in oklch, var(--color-success-500) 80%, var(--color-fg-default));
    --color-warning: color-mix(in oklch, var(--color-warning-500) 85%, var(--color-fg-default));
    --color-info: color-mix(in oklch, var(--color-info-500) 80%, var(--color-fg-default));

    --color-danger-subtle: color-mix(in oklch, var(--color-danger) 16%, var(--color-bg-surface));
    --color-success-subtle: color-mix(in oklch, var(--color-success) 16%, var(--color-bg-surface));
    --color-warning-subtle: color-mix(in oklch, var(--color-warning) 16%, var(--color-bg-surface));
    --color-info-subtle: color-mix(in oklch, var(--color-info) 14%, var(--color-bg-surface));
  }
}

/* Source: packages/reset/index.css */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  img,
  svg,
  video,
  canvas {
    display: block;
    max-inline-size: 100%;
  }

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

/* Source: packages/base/index.css */
@layer base {
  html,
  body {
    min-block-size: 100%;
  }

  body {
    background: var(--color-bg-default);
    color: var(--color-fg-default);
    font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
    line-height: 1.5;
  }

  a {
    color: var(--color-accent);
    text-underline-offset: 0.2em;
  }

  :focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }
}

/* Source: packages/layouts/container.css */
@layer layouts {
  .container {
    --container-max: var(--container-md);
    --container-gutter: var(--space-4);
    inline-size: min(100% - (2 * var(--container-gutter)), var(--container-max));
    margin-inline: auto;
  }
}

/* Source: packages/layouts/stack.css */
@layer layouts {
  .stack {
    --stack-gap: var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-inline-size: 0;
  }

  .stack > * + * {
    margin-block-start: var(--stack-gap);
  }

  .stack[data-stack-split-after] {
    justify-content: flex-start;
  }

  .stack[data-stack-split-after] > :nth-child(n + 2) {
    margin-block-start: 0;
  }

  .stack[data-stack-split-after] > :nth-child(n + 2):last-child {
    margin-block-start: auto;
  }
}

/* Source: packages/layouts/cluster.css */
@layer layouts {
  .cluster {
    --cluster-gap: var(--space-2);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--cluster-gap);
  }

  .cluster[data-cluster-justify="between"] {
    justify-content: space-between;
  }

  .cluster[data-cluster-nowrap="true"] {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}

/* Source: packages/layouts/center.css */
@layer layouts {
  .center {
    --center-max: var(--container-md);
    --center-gutter: var(--space-4);
    inline-size: min(100% - (2 * var(--center-gutter)), var(--center-max));
    margin-inline: auto;
  }

  .center[data-center-intrinsic="true"] {
    display: grid;
    place-items: center;
    min-block-size: 100%;
  }
}

/* Source: packages/layouts/sidebar.css */
@layer layouts {
  .sidebar {
    --sidebar-width: 18rem;
    --sidebar-gap: var(--space-6);
    --sidebar-min: 14rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sidebar-gap);
  }

  @media (min-width: 56rem) {
    .sidebar {
      grid-template-columns: minmax(var(--sidebar-min), var(--sidebar-width)) minmax(0, 1fr);
      align-items: start;
    }

    .sidebar[data-sidebar-side="end"] {
      grid-template-columns: minmax(0, 1fr) minmax(var(--sidebar-min), var(--sidebar-width));
    }
  }
}

/* Source: packages/layouts/switcher.css */
@layer layouts {
  .switcher {
    --switcher-gap: var(--space-4);
    --switcher-min: 16rem;
    display: flex;
    flex-wrap: wrap;
    gap: var(--switcher-gap);
  }

  .switcher > * {
    flex: 1 1 var(--switcher-min);
    min-inline-size: min(100%, var(--switcher-min));
  }

  .switcher[data-switcher-fixed="true"] > * {
    flex-grow: 0;
  }
}

/* Source: packages/layouts/grid.css */
@layer layouts {
  .grid {
    --grid-gap: var(--space-3);
    --grid-min: 14rem;
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min)), 1fr));
  }
}

/* Source: packages/recipes/index.css */
@layer recipes {
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
  }

  .btn-sm {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
  }

  .btn-md {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-md);
  }

  .btn-lg {
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-lg);
  }

  .btn-solid {
    background: var(--color-primary-500);
    color: var(--color-gray-50);
  }

  .btn-outline {
    border-color: var(--color-border-subtle);
    color: var(--color-fg-default);
    background: transparent;
  }

  .btn-primary {
    background: var(--color-primary-500);
    color: var(--color-gray-50);
  }

  .btn-neutral {
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    border-color: var(--color-border-subtle);
  }

  .btn-danger {
    background: var(--color-danger);
    color: var(--color-gray-50);
  }

  .card {
    display: block;
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }

  .card-plain {
    box-shadow: none;
  }

  .card-elevated {
    box-shadow: var(--shadow-sm);
  }

  .card-p-sm {
    padding: var(--space-3);
  }

  .card-p-md {
    padding: var(--space-4);
  }

  .card-p-lg {
    padding: var(--space-6);
  }

  .input {
    display: block;
    width: 100%;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-default);
    color: var(--color-fg-default);
  }

  .alert {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
  }

  .alert-danger {
    background: var(--color-danger-subtle);
    border-color: color-mix(in oklch, var(--color-danger) 45%, var(--color-bg-surface));
    border-left-width: 3px;
    color: var(--color-fg-default);
  }

  .alert-warning {
    background: var(--color-warning-subtle);
    border-color: var(--color-warning);
    border-left-width: 3px;
    color: var(--color-fg-default);
  }

  .alert-success {
    background: var(--color-success-subtle);
    border-color: var(--color-success);
    border-left-width: 3px;
    color: var(--color-fg-default);
  }

  .alert-info {
    background: var(--color-info-subtle);
    border-color: var(--color-info);
    border-left-width: 3px;
    color: var(--color-fg-default);
  }

  .alert-neutral {
    background: var(--color-bg-surface);
    border-color: var(--color-border-subtle);
    color: var(--color-fg-muted);
  }

  .badge {
    display: inline-flex;
    align-items: center;
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: 600;
  }

  .badge-neutral {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    color: var(--color-fg-default);
  }

  .badge-primary {
    background: var(--color-primary-500);
    color: var(--color-gray-50);
  }

  .badge-danger {
    background: var(--color-danger);
    color: var(--color-gray-50);
  }

  .badge-warning {
    background: color-mix(in oklch, var(--color-warning) 22%, var(--color-bg-surface));
    color: color-mix(in oklch, var(--color-warning-600) 90%, var(--color-fg-default));
    border-color: color-mix(in oklch, var(--color-warning) 60%, var(--color-bg-surface));
  }

  .badge-success {
    background: color-mix(in oklch, var(--color-success) 20%, var(--color-bg-surface));
    color: color-mix(in oklch, var(--color-success-600) 90%, var(--color-fg-default));
    border-color: color-mix(in oklch, var(--color-success) 55%, var(--color-bg-surface));
  }

  .badge-info {
    background: var(--color-info-subtle);
    color: color-mix(in oklch, var(--color-info) 70%, var(--color-fg-default));
    border-color: color-mix(in oklch, var(--color-info) 40%, var(--color-bg-surface));
  }

  .modal {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .tabs {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
}

/* Source: packages/components/button.css */
/*
  Button canonical class surface is generated into @layer recipes from contracts/recipes.contract.mjs.
  This file is reserved for non-canonical behavioral refinements.
*/
@layer components {
  .btn:disabled {
    cursor: not-allowed;
    opacity: 0.65;
  }
}

/* Source: packages/components/card.css */
/*
  Card canonical class surface is generated into @layer recipes from contracts/recipes.contract.mjs.
  This file is reserved for composition behavior that does not introduce new canonical selectors.
*/
@layer components {
  .card[data-card-layout="stack"] > * + * {
    margin-block-start: var(--space-3);
  }

  .card > [data-card-slot="footer"] {
    border-top: 1px solid var(--color-border-subtle);
    padding-block-start: var(--space-3);
  }
}

/* Source: packages/components/input.css */
@layer components {
  .input {
    inline-size: 100%;
    min-block-size: 2.5rem;
    padding-inline: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
  }

  .input:focus-visible {
    border-color: var(--color-accent);
  }

  .input[aria-invalid="true"] {
    border-color: var(--color-danger);
  }

  .input[aria-invalid="true"]:focus-visible {
    border-color: var(--color-danger);
  }

  .input[readonly]:not([disabled]) {
    background: var(--color-bg-default);
    color: var(--color-fg-muted);
    cursor: text;
  }

  .input[disabled] {
    background: var(--color-bg-default);
    color: var(--color-fg-muted);
    cursor: not-allowed;
    opacity: 0.7;
  }
}

/* Source: packages/components/icon-button.css */
@layer components {
  .icon-button {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
  }

  .icon-button:hover:not(:disabled) {
    background: var(--color-bg-default);
  }

  .icon-button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  .icon-button:disabled {
    cursor: not-allowed;
    opacity: 0.65;
  }

  .icon-button > svg {
    inline-size: 1em;
    block-size: 1em;
    fill: currentcolor;
  }

  .icon-button-sm {
    inline-size: 2rem;
    block-size: 2rem;
    font-size: var(--font-size-sm);
  }

  .icon-button-md {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    font-size: var(--font-size-md);
  }

  .icon-button-lg {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    font-size: var(--font-size-lg);
  }
}

/* Source: packages/components/link.css */
@layer components {
  .link {
    color: var(--color-accent);
    text-decoration-line: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.15em;
    font-weight: 500;
    transition: color 120ms ease;
  }

  .link:hover {
    color: var(--color-primary-600);
  }

  .link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  .link[aria-disabled="true"] {
    color: var(--color-fg-muted);
    text-decoration: none;
    pointer-events: none;
    cursor: default;
  }

  .link-muted {
    color: var(--color-fg-muted);
  }

  .link-danger {
    color: var(--color-danger);
  }
}

/* Source: packages/components/divider.css */
@layer components {
  .divider {
    margin: 0;
    border: 0;
    border-block-start: 1px solid var(--color-border-subtle);
  }

  .divider[data-orientation="vertical"] {
    inline-size: 1px;
    block-size: auto;
    align-self: stretch;
    border-block-start: 0;
    border-inline-start: 1px solid var(--color-border-subtle);
  }
}

/* Source: packages/components/surface.css */
@layer components {
  .surface {
    display: block;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    padding: var(--space-4);
  }

  .surface-raised {
    box-shadow: var(--shadow-sm);
  }

  .surface-sunken {
    background: var(--color-bg-default);
  }
}

/* Source: packages/components/visually-hidden.css */
@layer components {
  .visually-hidden {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

/* Source: packages/components/skeleton.css */
@layer components {
  .skeleton {
    display: block;
    background: linear-gradient(
      90deg,
      color-mix(in oklch, var(--color-border-subtle) 35%, var(--color-bg-surface)) 25%,
      color-mix(in oklch, var(--color-border-subtle) 60%, var(--color-bg-surface)) 50%,
      color-mix(in oklch, var(--color-border-subtle) 35%, var(--color-bg-surface)) 75%
    );
    background-size: 200% 100%;
    border-radius: var(--radius-sm);
    animation: skeleton-shimmer 1.2s linear infinite;
  }

  .skeleton-text {
    inline-size: 100%;
    block-size: 0.9em;
  }

  .skeleton-block {
    inline-size: 100%;
    min-block-size: 4rem;
  }

  .skeleton-circle {
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 999px;
  }

  .skeleton-table {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .skeleton-table-row {
    display: flex;
    gap: var(--space-3);
    align-items: center;
  }

  .skeleton-table-row .skeleton-text {
    flex: 1;
  }

  .skeleton-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .skeleton-form-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .skeleton-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
  }

  .skeleton-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  @keyframes skeleton-shimmer {
    from {
      background-position: 100% 0;
    }

    to {
      background-position: -100% 0;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  @layer components {
    .skeleton {
      animation: none;
    }
  }
}

/* Source: packages/components/spinner.css */
@layer components {
  .spinner {
    inline-size: 1rem;
    block-size: 1rem;
    display: inline-block;
    border: 2px solid var(--color-border-subtle);
    border-top-color: var(--color-accent);
    border-radius: 999px;
    animation: spinner-rotate 900ms linear infinite;
  }

  .spinner-sm {
    inline-size: 0.875rem;
    block-size: 0.875rem;
  }

  .spinner-md {
    inline-size: 1rem;
    block-size: 1rem;
  }

  .spinner-lg {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    border-width: 3px;
  }

  @keyframes spinner-rotate {
    to {
      transform: rotate(1turn);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  @layer components {
    .spinner {
      animation: none;
    }
  }
}

/* Source: packages/components/textarea.css */
@layer components {
  .textarea {
    inline-size: 100%;
    min-block-size: 6.5rem;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    resize: vertical;
  }

  .textarea:focus-visible {
    border-color: var(--color-accent);
  }

  .textarea[aria-invalid="true"] {
    border-color: var(--color-danger);
  }

  .textarea[aria-invalid="true"]:focus-visible {
    border-color: var(--color-danger);
  }

  .textarea[readonly]:not([disabled]) {
    background: var(--color-bg-default);
    color: var(--color-fg-muted);
    cursor: text;
  }

  .textarea[disabled] {
    background: var(--color-bg-default);
    color: var(--color-fg-muted);
    cursor: not-allowed;
    opacity: 0.7;
  }
}

/* Source: packages/components/select.css */
@layer components {
  .select {
    inline-size: 100%;
    min-block-size: 2.5rem;
    padding-inline: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    cursor: pointer;
  }

  .select:focus-visible {
    border-color: var(--color-accent);
  }

  .select[aria-invalid="true"] {
    border-color: var(--color-danger);
  }

  .select[aria-invalid="true"]:focus-visible {
    border-color: var(--color-danger);
  }

  .select[disabled] {
    background: var(--color-bg-default);
    color: var(--color-fg-muted);
    cursor: not-allowed;
    opacity: 0.7;
  }
}

/* Source: packages/components/checkbox.css */
@layer components {
  .checkbox {
    inline-size: 1rem;
    block-size: 1rem;
    margin: 0;
    accent-color: var(--color-accent);
  }

  .checkbox:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary-500) 35%, transparent);
  }

  .checkbox[aria-invalid="true"] {
    outline: 2px solid var(--color-danger);
    outline-offset: 1px;
  }

  .checkbox[disabled] {
    cursor: not-allowed;
    opacity: 0.7;
  }
}

/* Source: packages/components/radio.css */
@layer components {
  .radio {
    inline-size: 1rem;
    block-size: 1rem;
    margin: 0;
    accent-color: var(--color-accent);
  }

  .radio:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary-500) 35%, transparent);
  }

  .radio[aria-invalid="true"] {
    outline: 2px solid var(--color-danger);
    outline-offset: 1px;
  }

  .radio[disabled] {
    cursor: not-allowed;
    opacity: 0.7;
  }
}

/* Source: packages/components/switch.css */
@layer components {
  .switch {
    inline-size: 2.25rem;
    block-size: 1.25rem;
    margin: 0;
    border-radius: 999px;
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-default);
    cursor: pointer;
    appearance: none;
    position: relative;
    transition: background-color 120ms ease, border-color 120ms ease;
  }

  .switch::before {
    content: "";
    inline-size: 0.95rem;
    block-size: 0.95rem;
    border-radius: 999px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border-subtle);
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0.12rem;
    transform: translate(0, -50%);
    transition: transform 120ms ease;
  }

  .switch:checked {
    background: var(--color-accent);
    border-color: var(--color-accent);
  }

  .switch:checked::before {
    transform: translate(0.95rem, -50%);
    border-color: transparent;
  }

  .switch:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary-500) 35%, transparent);
  }

  .switch[aria-invalid="true"] {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-danger) 25%, transparent);
  }

  .switch[disabled] {
    cursor: not-allowed;
    opacity: 0.7;
  }
}

/* Source: packages/components/range-slider.css */
@layer components {
  .range-slider {
    inline-size: 100%;
    block-size: 1.5rem;
    appearance: none;
    background: transparent;
    cursor: pointer;
  }

  .range-slider::-webkit-slider-runnable-track {
    block-size: 0.375rem;
    border-radius: 999px;
    background: var(--color-border-subtle);
  }

  .range-slider::-webkit-slider-thumb {
    appearance: none;
    inline-size: 1rem;
    block-size: 1rem;
    border-radius: 999px;
    border: 2px solid var(--color-bg-surface);
    background: var(--color-accent);
    margin-block-start: -0.3125rem;
  }

  .range-slider::-moz-range-track {
    block-size: 0.375rem;
    border: none;
    border-radius: 999px;
    background: var(--color-border-subtle);
  }

  .range-slider::-moz-range-thumb {
    inline-size: 1rem;
    block-size: 1rem;
    border: 2px solid var(--color-bg-surface);
    border-radius: 999px;
    background: var(--color-accent);
  }

  .range-slider:focus-visible::-webkit-slider-thumb {
    outline: 2px solid color-mix(in oklch, var(--color-accent) 64%, var(--color-bg-surface));
    outline-offset: 1px;
  }

  .range-slider:focus-visible::-moz-range-thumb {
    outline: 2px solid color-mix(in oklch, var(--color-accent) 64%, var(--color-bg-surface));
    outline-offset: 1px;
  }

  .range-slider[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
  }
}

/* Source: packages/components/number-input.css */
@layer components {
  .number-input {
    display: flex;
    align-items: stretch;
    inline-size: 100%;
    gap: var(--space-2);
  }

  .number-input > .input[type="number"] {
    flex: 1 1 auto;
    min-inline-size: 0;
  }

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

  .number-input > .input[type="number"] {
    -moz-appearance: textfield;
  }

  .number-input-controls {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: var(--space-1);
  }

  .number-input-step {
    min-inline-size: 2rem;
    min-block-size: 1.1875rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    font-size: var(--font-size-sm);
    line-height: 1;
    padding: 0;
    cursor: pointer;
  }

  .number-input-step:focus-visible {
    border-color: var(--color-accent);
  }

  .number-input-step[disabled] {
    cursor: not-allowed;
    opacity: 0.65;
    color: var(--color-fg-muted);
    background: var(--color-bg-default);
  }
}

/* Source: packages/components/rating.css */
@layer components {
  .rating {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }

  .rating-item {
    inline-size: 2rem;
    min-block-size: 2rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--color-bg-surface);
    color: var(--color-fg-muted);
    line-height: 1;
    padding: 0;
    cursor: pointer;
  }

  .rating-item[data-active="true"],
  .rating-item-active {
    color: var(--color-accent);
    border-color: color-mix(in oklch, var(--color-accent) 52%, var(--color-bg-surface));
  }

  .rating-item:focus-visible {
    border-color: var(--color-accent);
  }

  .rating-item[disabled],
  .rating[aria-disabled="true"] .rating-item {
    cursor: not-allowed;
    opacity: 0.65;
    color: var(--color-fg-muted);
  }
}

/* Source: packages/components/tags-input.css */
@layer components {
  .tags-input {
    display: grid;
    gap: var(--space-2);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    padding: var(--space-2);
  }

  .tags-input-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
  }

  .tags-input-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    border: 1px solid var(--color-border-subtle);
    border-radius: 999px;
    background: color-mix(in oklch, var(--color-border-subtle) 22%, var(--color-bg-surface));
    color: var(--color-fg-default);
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-sm);
  }

  .tags-input-remove {
    inline-size: 1.25rem;
    min-block-size: 1.25rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: 999px;
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    line-height: 1;
    padding: 0;
    cursor: pointer;
  }

  .tags-input-field {
    border: none;
    background: transparent;
    color: var(--color-fg-default);
    min-inline-size: 8rem;
    min-block-size: 1.875rem;
    padding: 0;
  }

  .tags-input-field:focus-visible {
    outline: 2px solid color-mix(in oklch, var(--color-accent) 60%, var(--color-bg-surface));
    outline-offset: 2px;
  }

  .tags-input[data-tags-invalid="true"] {
    border-color: var(--color-danger);
  }

  .tags-input[data-tags-disabled="true"] {
    opacity: 0.7;
  }

  .tags-input[data-tags-disabled="true"] .tags-input-field,
  .tags-input[data-tags-disabled="true"] .tags-input-remove {
    cursor: not-allowed;
  }
}

/* Source: packages/components/otp-input.css */
@layer components {
  .otp-input {
    display: grid;
    gap: var(--space-2);
  }

  .otp-input-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  .otp-input-slot {
    inline-size: 2.5rem;
    min-block-size: 2.75rem;
    text-align: center;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    font-size: var(--font-size-md);
    font-weight: 600;
  }

  .otp-input-slot:focus-visible {
    border-color: var(--color-accent);
  }

  .otp-input-slot[aria-invalid="true"] {
    border-color: var(--color-danger);
  }

  .otp-input-slot[disabled] {
    cursor: not-allowed;
    opacity: 0.65;
    color: var(--color-fg-muted);
    background: var(--color-bg-default);
  }
}

/* Source: packages/components/input-group.css */
@layer components {
  .input-group {
    display: flex;
    inline-size: 100%;
    align-items: stretch;
  }

  .input-group > .input,
  .input-group > .textarea,
  .input-group > .select {
    flex: 1 1 auto;
    min-inline-size: 0;
  }

  .input-group-addon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2.5rem;
    padding-inline: var(--space-3);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-default);
    color: var(--color-fg-muted);
    font-size: var(--font-size-sm);
    white-space: nowrap;
  }

  .input-group > * + * {
    margin-inline-start: -1px;
  }

  .input-group > :first-child:not(:last-child) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }

  .input-group > :last-child:not(:first-child) {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }

  .input-group > :not(:first-child):not(:last-child) {
    border-radius: 0;
  }

  .input-group[data-input-group-invalid="true"] .input-group-addon {
    border-color: var(--color-danger);
  }
}

/* Source: packages/components/modal.css */
@layer components {
  .modal {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: none;
  }

  .modal[data-open="true"] {
    display: grid;
    place-items: center;
    padding: var(--space-4);
  }

  .modal-backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in oklch, black 45%, transparent);
  }

  .modal-dialog {
    position: relative;
    inline-size: min(100%, 34rem);
    max-block-size: calc(100dvh - (2 * var(--space-4)));
    overflow: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    box-shadow: var(--shadow-md);
  }

  .modal-header {
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .modal-body {
    padding: var(--space-4);
  }

  .modal-footer {
    padding: var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
  }
}

/* Source: packages/components/drawer.css */
@layer components {
  .drawer {
    position: fixed;
    inset: 0;
    z-index: 42;
    display: none;
  }

  .drawer[data-open="true"] {
    display: block;
  }

  .drawer-backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in oklch, black 38%, transparent);
  }

  .drawer-panel {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: min(100vw, 24rem);
    border-inline-start: 1px solid var(--color-border-subtle);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
  }

  .drawer-header {
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border-subtle);
  }

  .drawer-body {
    padding: var(--space-4);
    flex: 1;
    overflow: auto;
  }

  .drawer-footer {
    padding: var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
  }
}

/* Source: packages/components/toast.css */
@layer components {
  .toast-viewport {
    position: fixed;
    inset-inline-end: var(--space-4);
    inset-block-end: var(--space-4);
    z-index: 45;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    inline-size: min(100vw - (2 * var(--space-4)), 22rem);
    pointer-events: none;
  }

  .toast {
    display: none;
    pointer-events: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    box-shadow: var(--shadow-md);
    padding: var(--space-3);
  }

  .toast[data-open="true"] {
    display: block;
  }

  .toast[data-tone="danger"] {
    border-color: color-mix(in oklch, var(--color-danger) 48%, var(--color-bg-surface));
    background: color-mix(in oklch, var(--color-danger) 16%, var(--color-bg-surface));
    color: var(--color-fg-default);
  }

  .toast-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-block-end: var(--space-1);
  }

  .toast-description {
    font-size: var(--font-size-sm);
    color: var(--color-fg-muted);
  }

  .toast-close {
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-end: var(--space-2);
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--color-fg-muted);
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    line-height: 1;
  }

  .toast-close:hover {
    color: var(--color-fg-default);
    background: color-mix(in oklch, var(--color-border-subtle) 50%, transparent);
  }

  .toast .toast-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-block-start: var(--space-2);
  }

  .toast.toast--success,
  .toast[data-tone="success"] {
    border-color: color-mix(in oklch, oklch(72% 0.17 145) 48%, var(--color-bg-surface));
    background: color-mix(in oklch, oklch(72% 0.17 145) 10%, var(--color-bg-surface));
  }

  .toast.toast--info,
  .toast[data-tone="info"] {
    border-color: color-mix(in oklch, oklch(62% 0.14 230) 48%, var(--color-bg-surface));
    background: color-mix(in oklch, oklch(62% 0.14 230) 10%, var(--color-bg-surface));
  }

  .toast.toast--warn,
  .toast[data-tone="warn"] {
    border-color: color-mix(in oklch, oklch(80% 0.18 75) 48%, var(--color-bg-surface));
    background: color-mix(in oklch, oklch(80% 0.18 75) 10%, var(--color-bg-surface));
  }

  .toast.toast--error,
  .toast[data-tone="error"] {
    border-color: color-mix(in oklch, var(--color-danger) 48%, var(--color-bg-surface));
    background: color-mix(in oklch, var(--color-danger) 10%, var(--color-bg-surface));
  }
}

/* Source: packages/components/tooltip.css */
@layer components {
  .tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
  }

  .tooltip-content {
    position: absolute;
    inset-block-end: calc(100% + var(--space-2));
    inset-inline-start: 50%;
    transform: translateX(-50%);
    inline-size: max-content;
    max-inline-size: 16rem;
    padding: 0.35rem var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-fg-default);
    color: var(--color-bg-surface);
    font-size: var(--font-size-xs);
    line-height: 1.4;
    box-shadow: var(--shadow-sm);
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }

  .tooltip[data-open="true"] .tooltip-content {
    opacity: 1;
    visibility: visible;
  }
}

/* Source: packages/components/popover.css */
@layer components {
  .popover {
    position: relative;
    display: inline-flex;
    align-items: center;
  }

  .popover-content {
    position: absolute;
    inset-block-start: calc(100% + var(--space-2));
    inset-inline-start: 0;
    z-index: 48;
    display: none;
    min-inline-size: 14rem;
    max-inline-size: 22rem;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    box-shadow: var(--shadow-md);
  }

  .popover[data-open="true"] .popover-content {
    display: block;
  }
}

/* Source: packages/components/dropdown-menu.css */
@layer components {
  .dropdown-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
  }

  .dropdown-menu-content {
    position: absolute;
    inset-block-start: calc(100% + var(--space-2));
    inset-inline-end: 0;
    z-index: 49;
    display: none;
    min-inline-size: 12rem;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    box-shadow: var(--shadow-md);
  }

  .dropdown-menu[data-open="true"] .dropdown-menu-content {
    display: grid;
    gap: var(--space-1);
  }

  .dropdown-menu-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    inline-size: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-fg-default);
    text-align: start;
    cursor: pointer;
  }

  .dropdown-menu-item:hover,
  .dropdown-menu-item:focus-visible {
    background: color-mix(in oklch, var(--color-primary-500) 14%, var(--color-bg-surface));
    border-color: color-mix(in oklch, var(--color-primary-500) 36%, var(--color-bg-surface));
  }
}

/* Source: packages/components/context-menu.css */
@layer components {
  .context-menu {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .context-menu-content {
    min-inline-size: 11rem;
    display: none;
    position: absolute;
    inset-block-start: calc(100% + var(--space-1));
    inset-inline-start: 0;
    z-index: 20;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    box-shadow: var(--shadow-sm);
    padding: var(--space-1);
  }

  .context-menu[data-open="true"] .context-menu-content {
    display: grid;
    gap: var(--space-1);
  }

  .context-menu-item {
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-fg-default);
    font-size: var(--font-size-sm);
    text-align: start;
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
  }

  .context-menu-item:hover,
  .context-menu-item:focus-visible {
    background: var(--color-bg-default);
  }
}

/* Source: packages/components/hover-card.css */
@layer components {
  .hover-card {
    position: relative;
    display: inline-flex;
    align-items: center;
  }

  .hover-card-content {
    position: absolute;
    inset-block-start: calc(100% + var(--space-2));
    inset-inline-start: 0;
    z-index: 48;
    display: none;
    min-inline-size: 16rem;
    max-inline-size: 24rem;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    box-shadow: var(--shadow-md);
  }

  .hover-card[data-open="true"] .hover-card-content {
    display: grid;
    gap: var(--space-2);
  }
}

/* Source: packages/components/progress.css */
@layer components {
  .progress {
    display: grid;
    gap: var(--space-2);
  }

  .progress-label {
    margin: 0;
    color: var(--color-fg-muted);
    font-size: var(--font-size-sm);
  }

  .progress-track {
    inline-size: 100%;
    block-size: 0.5rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-border-subtle);
  }

  .progress-indicator {
    inline-size: var(--progress-value, 0%);
    block-size: 100%;
    border-radius: inherit;
    background: var(--color-accent);
    transition: inline-size 180ms ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  @layer components {
    .progress-indicator {
      transition: none;
    }
  }
}

/* Source: packages/components/loading-overlay.css */
@layer components {
  .loading-overlay {
    position: relative;
  }

  .loading-overlay-backdrop {
    position: absolute;
    inset: 0;
    display: none;
    border-radius: inherit;
    background: color-mix(in oklch, var(--color-bg-default) 74%, transparent);
    backdrop-filter: blur(1px);
  }

  .loading-overlay-content {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border-radius: inherit;
    color: var(--color-fg-default);
    font-size: var(--font-size-sm);
    font-weight: 600;
  }

  .loading-overlay[data-loading="true"] .loading-overlay-backdrop,
  .loading-overlay[data-loading="true"] .loading-overlay-content {
    display: flex;
  }
}

/* Source: packages/components/tabs.css */
@layer components {
  .tabs {
    display: grid;
    gap: var(--space-3);
  }

  .tabs-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .tabs-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
  }

  .tabs-trigger[data-active="true"] {
    background: var(--color-primary-500);
    color: var(--color-gray-50);
    border-color: var(--color-primary-500);
  }

  .tabs-panel {
    display: none;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    padding: var(--space-3);
  }

  .tabs-panel[data-active="true"] {
    display: block;
  }
}

/* Source: packages/components/accordion.css */
@layer components {
  .accordion {
    display: grid;
    gap: var(--space-2);
  }

  .accordion-item {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
  }

  .accordion-trigger {
    inline-size: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: start;
    padding: var(--space-3);
    cursor: pointer;
    font-weight: 600;
  }

  .accordion-panel {
    display: none;
    padding: 0 var(--space-3) var(--space-3);
  }

  .accordion-item[data-open="true"] .accordion-panel {
    display: block;
  }
}

/* Source: packages/components/pagination.css */
@layer components {
  .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  .pagination-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2.25rem;
    padding: var(--space-2);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    text-decoration: none;
  }

  .pagination-item[aria-current="page"] {
    background: var(--color-primary-500);
    color: var(--color-gray-50);
    border-color: var(--color-primary-500);
    font-weight: 700;
  }
}

/* Source: packages/components/breadcrumb.css */
@layer components {
  .breadcrumb {
    display: block;
  }

  .breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-fg-muted);
  }

  .breadcrumb-link {
    color: var(--color-fg-default);
    text-decoration: none;
  }

  .breadcrumb-link:hover,
  .breadcrumb-link:focus-visible {
    text-decoration: underline;
  }

  .breadcrumb-current {
    color: var(--color-fg-default);
    font-weight: 600;
  }
}

/* Source: packages/components/navbar.css */
@layer components {
  .navbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    padding: var(--space-3);
  }

  .navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 700;
  }

  .navbar-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }

  .navbar-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-fg-default);
    text-decoration: none;
    padding: var(--space-2) var(--space-3);
  }

  .navbar-item[aria-current="page"] {
    background: var(--color-primary-500);
    color: var(--color-gray-50);
    border-color: var(--color-primary-500);
  }
}

/* Source: packages/components/menu-bar.css */
@layer components {
  .menu-bar {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    padding: var(--space-1);
  }

  .menu-bar-list {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .menu-bar-item {
    position: relative;
  }

  .menu-bar-trigger {
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-fg-default);
    font-size: var(--font-size-sm);
    font-weight: 600;
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
  }

  .menu-bar-trigger:hover,
  .menu-bar-trigger:focus-visible,
  .menu-bar-item[data-open="true"] .menu-bar-trigger {
    background: var(--color-bg-default);
  }

  .menu-bar-content {
    position: absolute;
    inset-block-start: calc(100% + var(--space-1));
    inset-inline-start: 0;
    z-index: 20;
    min-inline-size: 11rem;
    display: none;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    box-shadow: var(--shadow-sm);
    padding: var(--space-1);
  }

  .menu-bar-item[data-open="true"] .menu-bar-content {
    display: grid;
    gap: var(--space-1);
  }

  .menu-bar-link {
    display: block;
    border-radius: var(--radius-sm);
    color: var(--color-fg-default);
    text-decoration: none;
    font-size: var(--font-size-sm);
    padding: var(--space-2) var(--space-3);
  }

  .menu-bar-link:hover,
  .menu-bar-link:focus-visible {
    background: var(--color-bg-default);
  }

  .menu-bar-divider {
    block-size: 1px;
    background: var(--color-border-subtle);
    margin-block: var(--space-1);
  }

  .menu-bar-submenu {
    position: relative;
  }

  .menu-bar-subtrigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    inline-size: 100%;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-fg-default);
    font-size: var(--font-size-sm);
    text-align: start;
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
  }

  .menu-bar-subtrigger:hover,
  .menu-bar-subtrigger:focus-visible,
  .menu-bar-submenu[data-open="true"] > .menu-bar-subtrigger {
    background: var(--color-bg-default);
  }

  .menu-bar-submenu-content {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 100%;
    z-index: 21;
    min-inline-size: 11rem;
    display: none;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    box-shadow: var(--shadow-sm);
    padding: var(--space-1);
  }

  .menu-bar-submenu[data-open="true"] > .menu-bar-submenu-content {
    display: grid;
    gap: var(--space-1);
  }
}

/* Source: packages/components/sidebar-nav.css */
@layer components {
  .sidebar-nav {
    display: grid;
    gap: var(--space-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    padding: var(--space-3);
  }

  .sidebar-nav-section {
    display: grid;
    gap: var(--space-2);
  }

  .sidebar-nav-item {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-fg-default);
    text-decoration: none;
    padding: var(--space-2) var(--space-3);
  }

  .sidebar-nav-item[aria-current="page"] {
    background: var(--color-primary-500);
    color: var(--color-gray-50);
    border-color: var(--color-primary-500);
    font-weight: 700;
  }
}

/* Source: packages/components/tree-view.css */
@layer components {
  .tree-view {
    display: grid;
    gap: var(--space-2);
  }

  .tree-view-group {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-1);
  }

  .tree-view-item {
    display: grid;
    gap: var(--space-1);
    padding-inline-start: var(--space-2);
    border-inline-start: 1px solid var(--color-border-subtle);
  }

  .tree-view-toggle {
    justify-self: start;
    min-block-size: 1.875rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    cursor: pointer;
  }

  .tree-view-label {
    color: var(--color-fg-default);
    font-size: var(--font-size-sm);
  }

  .tree-view-item[data-tree-expanded="false"] > .tree-view-group {
    display: none;
  }

  .tree-view-toggle:focus-visible {
    border-color: var(--color-accent);
  }

  .tree-view-toggle[disabled],
  .tree-view-item[aria-disabled="true"] .tree-view-toggle {
    cursor: not-allowed;
    opacity: 0.65;
  }
}

/* Source: packages/components/stepper.css */
@layer components {
  .stepper {
    display: grid;
    gap: var(--space-2);
  }

  .stepper-item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--space-2);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    padding: var(--space-2) var(--space-3);
  }

  .stepper-marker {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-default);
    color: var(--color-fg-default);
    font-size: var(--font-size-xs);
    font-weight: 700;
  }

  .stepper-item[data-state="complete"] .stepper-marker,
  .stepper-item[data-state="active"] .stepper-marker {
    background: var(--color-primary-500);
    color: var(--color-gray-50);
    border-color: var(--color-primary-500);
  }

  .stepper-label {
    display: block;
    font-weight: 600;
    line-height: 1.35;
  }
}

/* Source: packages/components/page-header.css */
@layer components {
  .page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    padding: var(--space-3);
  }

  .page-header-content {
    display: grid;
    gap: var(--space-2);
  }

  .page-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }
}

/* Source: packages/components/section-block.css */
@layer components {
  .section-block {
    display: grid;
    gap: var(--space-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    padding: var(--space-3);
  }

  .section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
  }

  .section-body {
    display: grid;
    gap: var(--space-2);
  }
}

/* Source: packages/components/app-shell.css */
@layer components {
  .app-shell {
    display: grid;
    gap: var(--space-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    padding: var(--space-3);
  }

  .app-shell-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    border-bottom: 1px solid var(--color-border-subtle);
    padding-bottom: var(--space-2);
  }

  .app-shell-content {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: minmax(0, 1fr);
  }

  .app-shell-sidebar {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    background: var(--color-bg-default);
  }

  .app-shell-main {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    background: var(--color-bg-default);
  }

  @media (min-width: 64rem) {
    .app-shell-content {
      grid-template-columns: 15rem minmax(0, 1fr);
      align-items: start;
    }
  }
}

/* Source: packages/components/split-pane.css */
@layer components {
  .split-pane {
    --split-pane-gap: var(--space-4);
    --split-pane-side: 20rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--split-pane-gap);
  }

  @media (min-width: 64rem) {
    .split-pane {
      grid-template-columns: minmax(var(--split-pane-side), 1fr) minmax(0, 1fr);
      align-items: start;
    }

    .split-pane[data-split-pane-side="end"] {
      grid-template-columns: minmax(0, 1fr) minmax(var(--split-pane-side), 1fr);
    }
  }

  .split-pane-primary,
  .split-pane-secondary {
    min-inline-size: 0;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    padding: var(--space-3);
  }
}

/* Source: packages/components/text.css */
@layer components {
  .text {
    margin: 0;
    color: var(--color-fg-default);
    font-size: var(--font-size-sm);
    line-height: 1.55;
  }
}

/* Source: packages/components/heading.css */
@layer components {
  .heading {
    margin: 0;
    color: var(--color-fg-default);
    font-size: var(--font-size-lg);
    line-height: 1.3;
    font-weight: 700;
  }
}

/* Source: packages/components/code.css */
@layer components {
  .code {
    display: inline-block;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--color-bg-default);
    color: var(--color-fg-default);
    font-size: var(--font-size-xs);
    line-height: 1.35;
    padding: 0 var(--space-1);
  }
}

/* Source: packages/components/code-block.css */
@layer components {
  .code-block {
    margin: 0;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-default);
    color: var(--color-fg-default);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    overflow-x: auto;
    padding: var(--space-3);
  }
}

/* Source: packages/components/callout.css */
@layer components {
  .callout {
    display: grid;
    gap: var(--space-2);
    border: 1px solid var(--color-border-subtle);
    border-inline-start: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    padding: var(--space-3);
  }

  .callout-title {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 700;
    line-height: 1.35;
  }

  .callout-body {
    margin: 0;
    color: var(--color-fg-muted);
    font-size: var(--font-size-sm);
    line-height: 1.5;
  }
}

/* Source: packages/components/quote.css */
@layer components {
  .quote {
    margin: 0;
    border-inline-start: 3px solid var(--color-border-subtle);
    color: var(--color-fg-muted);
    font-size: var(--font-size-sm);
    line-height: 1.6;
    padding-inline-start: var(--space-3);
  }
}

/* Source: packages/components/kbd.css */
@layer components {
  .kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 1.5rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--color-bg-default);
    color: var(--color-fg-default);
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1;
    padding: var(--space-1);
  }
}

/* Source: packages/components/markdown-surface.css */
@layer components {
  .markdown-surface {
    display: grid;
    gap: var(--space-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    padding: var(--space-4);
  }

  .markdown-surface h1,
  .markdown-surface h2,
  .markdown-surface h3,
  .markdown-surface p,
  .markdown-surface ul {
    margin: 0;
  }

  .markdown-surface ul {
    padding-inline-start: 1.2rem;
  }

  .markdown-surface pre {
    margin: 0;
  }
}

/* Source: packages/components/table.css */
@layer components {
  .table {
    inline-size: 100%;
    border-collapse: collapse;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
  }

  .table-head {
    background: var(--color-bg-default);
  }

  .table-body {
    background: var(--color-bg-surface);
  }

  .table-row + .table-row {
    border-top: 1px solid var(--color-border-subtle);
  }

  .table-head-cell,
  .table-cell {
    text-align: left;
    vertical-align: middle;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
  }

  .table-head-cell {
    font-weight: 700;
    color: var(--color-fg-default);
  }

  .table-cell {
    color: var(--color-fg-default);
  }

  .table-row[data-row-selected="true"] {
    background: color-mix(in oklch, var(--color-accent) 18%, var(--color-bg-surface));
  }

  .table-empty,
  .table-loading,
  .table-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-8) var(--space-4);
    text-align: center;
    color: var(--color-fg-muted);
    font-size: var(--font-size-sm);
  }

  .table-state-message {
    font-size: var(--font-size-sm);
    color: var(--color-fg-muted);
  }

  .table-error .table-state-message {
    color: var(--color-danger);
  }

  .table[data-loading="true"] .table-body {
    opacity: 0.5;
    pointer-events: none;
  }
}

/* Source: packages/components/data-grid.css */
@layer components {
  .data-grid {
    display: grid;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
  }

  .data-grid-head,
  .data-grid-body {
    display: grid;
  }

  .data-grid-row {
    display: grid;
    grid-template-columns: repeat(var(--data-grid-columns, 4), minmax(0, 1fr));
    align-items: center;
  }

  .data-grid-head .data-grid-row {
    background: var(--color-bg-default);
    font-weight: 700;
  }

  .data-grid-body .data-grid-row + .data-grid-row {
    border-top: 1px solid var(--color-border-subtle);
  }

  .data-grid-cell {
    min-inline-size: 0;
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .data-grid-row[data-row-selected="true"] {
    background: color-mix(in oklch, var(--color-accent) 18%, var(--color-bg-surface));
  }
}

/* Source: packages/components/empty-state.css */
@layer components {
  .empty-state {
    display: grid;
    justify-items: start;
    gap: var(--space-3);
    border: 1px dashed var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    padding: var(--space-4);
  }

  .empty-state-media {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--color-bg-default);
    border: 1px solid var(--color-border-subtle);
    font-size: var(--font-size-sm);
    font-weight: 700;
  }

  .empty-state-title {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 700;
    line-height: 1.35;
  }

  .empty-state-description {
    margin: 0;
    color: var(--color-fg-muted);
    font-size: var(--font-size-sm);
  }

  .empty-state-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }
}

/* Source: packages/components/result.css */
@layer components {
  .result {
    display: grid;
    gap: var(--space-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    padding: var(--space-4);
  }

  .result-media {
    font-size: 1.5rem;
    line-height: 1;
  }

  .result-title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
  }

  .result-description {
    margin: 0;
    color: var(--color-fg-muted);
  }

  .result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .result[data-result-tone="success"] {
    border-color: color-mix(in oklch, var(--color-accent) 42%, var(--color-bg-surface));
  }

  .result[data-result-tone="info"] {
    border-color: color-mix(in oklch, var(--color-primary-500) 42%, var(--color-bg-surface));
  }

  .result[data-result-tone="warning"] {
    border-color: color-mix(in oklch, var(--color-danger) 32%, var(--color-bg-surface));
    background: color-mix(in oklch, var(--color-danger) 8%, var(--color-bg-surface));
  }

  .result[data-result-tone="danger"] {
    border-color: color-mix(in oklch, var(--color-danger) 52%, var(--color-bg-surface));
    background: color-mix(in oklch, var(--color-danger) 12%, var(--color-bg-surface));
  }
}

/* Source: packages/components/avatar.css */
@layer components {
  .avatar {
    --avatar-size: 2.5rem;
    inline-size: var(--avatar-size);
    block-size: var(--avatar-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-default);
    color: var(--color-fg-default);
    font-size: var(--font-size-sm);
    font-weight: 700;
    flex: none;
  }

  .avatar-sm {
    --avatar-size: 2rem;
    font-size: var(--font-size-xs);
  }

  .avatar-md {
    --avatar-size: 2.5rem;
    font-size: var(--font-size-sm);
  }

  .avatar-lg {
    --avatar-size: 3rem;
    font-size: var(--font-size-md);
  }

  .avatar-image {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    block-size: 100%;
  }
}

/* Source: packages/components/avatar-group.css */
@layer components {
  .avatar-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    padding-inline-start: var(--space-2);
  }

  .avatar-group-item {
    margin-inline-start: calc(var(--space-2) * -1);
    border-radius: 999px;
  }

  .avatar-group-item > .avatar {
    border-width: 2px;
    border-color: var(--color-bg-surface);
    box-shadow: 0 0 0 1px var(--color-border-subtle);
  }
}

/* Source: packages/components/tag-chip.css */
@layer components {
  .tag-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    border: 1px solid var(--color-border-subtle);
    border-radius: 999px;
    background: var(--color-bg-default);
    color: var(--color-fg-default);
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1.2;
  }

  .tag-chip-label {
    white-space: nowrap;
  }

  .tag-chip-remove {
    inline-size: 1rem;
    block-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
  }

  .tag-chip-remove:hover,
  .tag-chip-remove:focus-visible {
    background: color-mix(in oklch, var(--color-border-subtle) 58%, var(--color-bg-surface));
  }
}

/* Source: packages/components/stat.css */
@layer components {
  .stat {
    display: grid;
    gap: var(--space-2);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    padding: var(--space-3);
  }

  .stat-label {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-fg-muted);
    font-weight: 600;
    line-height: 1.35;
  }

  .stat-value {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-fg-default);
  }

  .stat-meta {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-fg-muted);
    line-height: 1.35;
  }
}

/* Source: packages/components/timeline.css */
@layer components {
  .timeline {
    display: grid;
    gap: var(--space-2);
  }

  .timeline-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--space-3);
  }

  .timeline-marker {
    inline-size: 0.75rem;
    block-size: 0.75rem;
    margin-block-start: 0.35rem;
    border-radius: 999px;
    background: var(--color-primary-500);
    border: 1px solid var(--color-primary-500);
    box-shadow: 0 0 0 2px var(--color-bg-surface);
    flex: none;
  }

  .timeline-content {
    border-left: 1px solid var(--color-border-subtle);
    padding-inline-start: var(--space-3);
    padding-block-end: var(--space-3);
    color: var(--color-fg-default);
  }

  .timeline-item:last-child .timeline-content {
    padding-block-end: 0;
    border-left-color: transparent;
  }

  .timeline-title {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 700;
    line-height: 1.35;
  }

  .timeline-meta {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-fg-muted);
    line-height: 1.35;
  }
}

/* Source: packages/components/kpi-card.css */
@layer components {
  .kpi-card {
    display: grid;
    gap: var(--space-2);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    padding: var(--space-3);
  }

  .kpi-card-header {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-fg-muted);
    font-weight: 600;
    line-height: 1.35;
  }

  .kpi-card-value {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: 1.25;
  }

  .kpi-card-meta {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-fg-muted);
    line-height: 1.35;
  }

  .kpi-card-trend {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border: 1px solid var(--color-border-subtle);
    border-radius: 999px;
    padding: 0.125rem var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: 700;
    background: var(--color-bg-default);
    color: var(--color-fg-default);
  }
}

/* Source: packages/components/list.css */
@layer components {
  .list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-2);
  }

  .list-item {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    padding: var(--space-2) var(--space-3);
  }
}

/* Source: packages/components/description-list.css */
@layer components {
  .description-list {
    margin: 0;
    display: grid;
    gap: var(--space-2);
  }

  .description-list > div {
    display: grid;
    gap: var(--space-1);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    padding: var(--space-2) var(--space-3);
  }

  .description-term {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-fg-muted);
    font-weight: 600;
    line-height: 1.35;
  }

  .description-details {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-fg-default);
    line-height: 1.35;
  }
}

/* Source: packages/components/combobox.css */
@layer components {
  .combobox {
    position: relative;
    inline-size: 100%;
    display: grid;
    gap: var(--space-2);
  }

  .combobox-input {
    inline-size: 100%;
    min-block-size: 2.5rem;
    padding-inline: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
  }

  .combobox-input:focus-visible {
    border-color: var(--color-accent);
  }

  .combobox-list {
    margin: 0;
    padding: var(--space-1);
    list-style: none;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    max-block-size: 12rem;
    overflow: auto;
    box-shadow: var(--shadow-sm);
  }

  .combobox-option {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    line-height: 1.35;
    cursor: default;
  }

  .combobox-option[data-active="true"] {
    background: var(--color-bg-default);
  }

  .combobox-option[aria-selected="true"] {
    background: var(--color-primary-500);
    color: var(--color-gray-50);
  }
}

/* Source: packages/components/search-box.css */
@layer components {
  .search-box {
    display: flex;
    inline-size: 100%;
    align-items: stretch;
  }

  .search-box-input {
    flex: 1 1 auto;
    min-inline-size: 0;
    min-block-size: 2.5rem;
    padding-inline: var(--space-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
  }

  .search-box-input:focus-visible {
    border-color: var(--color-accent);
  }

  .search-box-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2.5rem;
    padding-inline: var(--space-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-primary-500);
    color: var(--color-gray-50);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
  }

  .search-box > * + * {
    margin-inline-start: -1px;
  }

  .search-box > :first-child:not(:last-child) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
  }

  .search-box > :last-child:not(:first-child) {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }
}

/* Source: packages/components/autocomplete.css */
@layer components {
  .autocomplete {
    position: relative;
    inline-size: 100%;
    display: grid;
    gap: var(--space-2);
  }

  .autocomplete-input {
    inline-size: 100%;
    min-block-size: 2.5rem;
    padding-inline: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
  }

  .autocomplete-input:focus-visible {
    border-color: var(--color-accent);
  }

  .autocomplete-list {
    margin: 0;
    padding: var(--space-1);
    list-style: none;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    max-block-size: 12rem;
    overflow: auto;
    box-shadow: var(--shadow-sm);
  }

  .autocomplete-option {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    line-height: 1.35;
  }

  .autocomplete-option[data-active="true"] {
    background: var(--color-bg-default);
  }
}

/* Source: packages/components/command-palette.css */
@layer components {
  .command-palette {
    position: relative;
    inline-size: 100%;
  }

  .command-palette-dialog {
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    padding: var(--space-3);
    box-shadow: var(--shadow-md);
    display: grid;
    gap: var(--space-2);
  }

  .command-palette-input {
    inline-size: 100%;
    min-block-size: 2.5rem;
    padding-inline: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
  }

  .command-palette-input:focus-visible {
    border-color: var(--color-accent);
  }

  .command-palette-list {
    margin: 0;
    padding: var(--space-1);
    list-style: none;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-default);
    display: grid;
    gap: var(--space-1);
  }

  .command-palette-item {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    line-height: 1.35;
  }

  .command-palette-item[data-active="true"] {
    background: var(--color-primary-500);
    color: var(--color-gray-50);
  }
}

/* Source: packages/components/date-picker.css */
@layer components {
  .date-picker {
    inline-size: 100%;
    display: grid;
    gap: var(--space-2);
  }

  .date-picker-input {
    inline-size: 100%;
    min-block-size: 2.5rem;
    padding-inline: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
  }

  .date-picker-input:focus-visible {
    border-color: var(--color-accent);
  }

  .date-picker-trigger {
    min-block-size: 2.5rem;
    padding-inline: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    cursor: pointer;
  }

  .date-picker-panel {
    display: none;
    padding: var(--space-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    box-shadow: var(--shadow-sm);
  }

  .date-picker[data-open="true"] .date-picker-panel {
    display: grid;
    gap: var(--space-2);
  }

  .date-picker-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-1);
  }

  .date-picker-day {
    min-block-size: 2rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    font-size: var(--font-size-sm);
    line-height: 1.2;
    cursor: pointer;
  }

  .date-picker-day[data-today="true"] {
    border-color: var(--color-accent);
  }

  .date-picker-day[data-selected="true"] {
    background: var(--color-primary-500);
    color: var(--color-gray-50);
    border-color: var(--color-primary-500);
  }

  .date-picker-day[data-outside="true"] {
    color: var(--color-fg-muted);
    background: var(--color-bg-default);
  }

  .date-picker-day[disabled] {
    color: var(--color-fg-muted);
    background: var(--color-bg-default);
    cursor: not-allowed;
    opacity: 0.7;
  }
}

/* Source: packages/components/date-range-picker.css */
@layer components {
  .date-range-picker {
    inline-size: 100%;
    display: grid;
    gap: var(--space-2);
  }

  .date-range-picker-start,
  .date-range-picker-end {
    inline-size: 100%;
    min-block-size: 2.5rem;
    padding-inline: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
  }

  .date-range-picker-start:focus-visible,
  .date-range-picker-end:focus-visible {
    border-color: var(--color-accent);
  }

  .date-range-picker-separator {
    color: var(--color-fg-muted);
    font-size: var(--font-size-sm);
    align-self: center;
  }

  .date-range-picker-trigger {
    min-block-size: 2.5rem;
    padding-inline: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    cursor: pointer;
  }

  .date-range-picker-panel {
    display: none;
    padding: var(--space-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    box-shadow: var(--shadow-sm);
  }

  .date-range-picker[data-open="true"] .date-range-picker-panel {
    display: grid;
    gap: var(--space-2);
  }

  .date-range-picker-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-1);
  }

  .date-range-picker-day {
    min-block-size: 2rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    font-size: var(--font-size-sm);
    line-height: 1.2;
    cursor: pointer;
  }

  .date-range-picker-day[data-in-range="true"] {
    background: color-mix(in oklab, var(--color-primary-500) 16%, var(--color-bg-surface));
    border-color: color-mix(in oklab, var(--color-primary-500) 40%, var(--color-border-subtle));
  }

  .date-range-picker-day[data-range-start="true"],
  .date-range-picker-day[data-range-end="true"] {
    background: var(--color-primary-500);
    color: var(--color-gray-50);
    border-color: var(--color-primary-500);
  }

  .date-range-picker-day[data-outside="true"] {
    color: var(--color-fg-muted);
    background: var(--color-bg-default);
  }

  .date-range-picker-day[disabled] {
    color: var(--color-fg-muted);
    background: var(--color-bg-default);
    cursor: not-allowed;
    opacity: 0.7;
  }
}

/* Source: packages/components/calendar.css */
@layer components {
  .calendar {
    inline-size: 100%;
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    box-shadow: var(--shadow-sm);
  }

  .calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
  }

  .calendar-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
  }

  .calendar-nav {
    min-block-size: 2rem;
    min-inline-size: 2rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    cursor: pointer;
  }

  .calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-1);
  }

  .calendar-weekday {
    text-align: center;
    font-size: var(--font-size-xs);
    color: var(--color-fg-muted);
  }

  .calendar-day {
    min-block-size: 2rem;
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-sm);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    font-size: var(--font-size-sm);
    line-height: 1.2;
    cursor: pointer;
  }

  .calendar-day[data-today="true"] {
    border-color: var(--color-accent);
  }

  .calendar-day[data-selected="true"] {
    background: var(--color-primary-500);
    color: var(--color-gray-50);
    border-color: var(--color-primary-500);
  }

  .calendar-day[data-outside="true"] {
    color: var(--color-fg-muted);
    background: var(--color-bg-default);
  }

  .calendar-day[disabled] {
    color: var(--color-fg-muted);
    background: var(--color-bg-default);
    cursor: not-allowed;
    opacity: 0.7;
  }
}

/* Source: packages/components/file-upload.css */
@layer components {
  .file-upload {
    inline-size: 100%;
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px dashed var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
  }

  .file-upload-input {
    inline-size: 100%;
    min-block-size: 2.5rem;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-subtle);
    background: var(--color-bg-default);
    color: var(--color-fg-default);
  }

  .file-upload-input:focus-visible {
    border-color: var(--color-accent);
  }

  .file-upload-meta {
    font-size: var(--font-size-sm);
    color: var(--color-fg-muted);
  }

  .file-upload-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .file-upload[data-has-file="true"] {
    border-color: var(--color-accent);
  }

  .file-upload-input[disabled] {
    color: var(--color-fg-muted);
    background: var(--color-bg-default);
    cursor: not-allowed;
    opacity: 0.7;
  }
}

/* Source: packages/components/dropzone.css */
@layer components {
  .dropzone {
    inline-size: 100%;
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px dashed var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    text-align: center;
  }

  .dropzone-input {
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    position: absolute;
    pointer-events: none;
  }

  .dropzone-hint {
    font-size: var(--font-size-sm);
    color: var(--color-fg-default);
  }

  .dropzone-meta {
    font-size: var(--font-size-sm);
    color: var(--color-fg-muted);
  }

  .dropzone-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
  }

  .dropzone[data-drag-over="true"] {
    border-color: var(--color-accent);
    background: color-mix(in oklab, var(--color-primary-500) 8%, var(--color-bg-surface));
  }

  .dropzone[data-disabled="true"] {
    opacity: 0.7;
  }
}

/* Source: packages/components/editable-field.css */
@layer components {
  .editable-field {
    inline-size: 100%;
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
  }

  .editable-field-display {
    font-size: var(--font-size-sm);
    color: var(--color-fg-default);
  }

  .editable-field-editor {
    display: none;
    gap: var(--space-2);
  }

  .editable-field-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
  }

  .editable-field[data-editing="true"] .editable-field-display {
    display: none;
  }

  .editable-field[data-editing="true"] .editable-field-editor {
    display: grid;
  }

  .editable-field[data-disabled="true"] {
    opacity: 0.7;
  }
}

/* Source: packages/components/field.css */
@layer components {
  .field {
    --field-gap: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--field-gap);
  }

  .field[data-field-disabled="true"] {
    opacity: 0.8;
  }
}

/* Source: packages/components/label.css */
@layer components {
  .label {
    display: inline-block;
    color: var(--color-fg-default);
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1.4;
  }

  .label[for] {
    cursor: pointer;
  }

  .field[data-field-invalid="true"] .label {
    color: var(--color-danger);
  }
}

/* Source: packages/components/helper-text.css */
@layer components {
  .helper-text {
    color: var(--color-fg-muted);
    font-size: var(--font-size-sm);
    line-height: 1.4;
  }
}

/* Source: packages/components/error-text.css */
@layer components {
  .error-text {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1.4;
  }
}

/* Source: packages/components/segmented-control.css */
@layer components {
  .segmented-control {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-default);
  }

  .segmented-control-item {
    position: relative;
    display: inline-flex;
  }

  .segmented-control-input {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .segmented-control-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-fg-muted);
    cursor: pointer;
    user-select: none;
    transition: background 100ms, color 100ms;
  }

  .segmented-control-label:hover {
    color: var(--color-fg-default);
    background: color-mix(in oklch, var(--color-border-subtle) 40%, var(--color-bg-default));
  }

  .segmented-control-input:checked + .segmented-control-label {
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
    box-shadow: var(--shadow-sm);
  }

  .segmented-control-input:focus-visible + .segmented-control-label {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
  }

  .segmented-control-input:disabled + .segmented-control-label {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
  }

  .segmented-control--sm .segmented-control-label {
    padding: 0 var(--space-2);
    font-size: var(--font-size-xs);
  }

  .segmented-control--lg .segmented-control-label {
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-size-md);
  }
}

@media (prefers-reduced-motion: reduce) {
  @layer components {
    .segmented-control-label {
      transition: none;
    }
  }
}

/* Source: packages/components/settings-panel.css */
@layer components {
  .settings-panel {
    display: grid;
    grid-template-columns: minmax(12rem, 16rem) 1fr;
    min-block-size: 100%;
    background: var(--color-bg-default);
  }

  .settings-panel-sidebar {
    border-inline-end: 1px solid var(--color-border-subtle);
    padding: var(--space-4);
    background: var(--color-bg-surface);
  }

  .settings-panel-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .settings-panel-nav-item {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-fg-muted);
    text-decoration: none;
    cursor: pointer;
    border: 0;
    background: transparent;
    text-align: start;
    inline-size: 100%;
  }

  .settings-panel-nav-item:hover {
    background: var(--color-bg-default);
    color: var(--color-fg-default);
  }

  .settings-panel-nav-item[aria-current="page"],
  .settings-panel-nav-item[data-active="true"] {
    background: color-mix(in oklch, var(--color-accent) 12%, var(--color-bg-surface));
    color: var(--color-fg-default);
  }

  .settings-panel-content {
    padding: var(--space-6) var(--space-8);
    max-inline-size: 48rem;
  }

  .settings-panel-section {
    margin-block-end: var(--space-8);
  }

  .settings-panel-section + .settings-panel-section {
    padding-block-start: var(--space-6);
    border-block-start: 1px solid var(--color-border-subtle);
  }

  .settings-panel-section-title {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-block-end: var(--space-4);
  }

  .settings-panel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-block-end: 1px solid var(--color-border-subtle);
  }

  .settings-panel-row:last-child {
    border-block-end: 0;
  }

  .settings-panel-row-label {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .settings-panel-row-label > strong {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-fg-default);
  }

  .settings-panel-row-label > span {
    font-size: var(--font-size-xs);
    color: var(--color-fg-muted);
  }

  .settings-panel-row-control {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
}

/* Source: packages/components/badge.css */
@layer components {
  .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    border-radius: 999px;
    border: 1px solid var(--color-border-subtle);
    padding: var(--space-1) var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: 700;
    line-height: 1.2;
    background: color-mix(in oklch, var(--color-border-subtle) 28%, var(--color-bg-surface));
    color: var(--color-fg-default);
  }

  .badge-neutral {
    background: color-mix(in oklch, var(--color-border-subtle) 28%, var(--color-bg-surface));
    color: var(--color-fg-default);
    border-color: var(--color-border-subtle);
  }

  .badge-primary {
    background: var(--color-primary-500);
    color: var(--color-gray-50);
    border-color: transparent;
  }

  .badge-danger {
    background: color-mix(in oklch, var(--color-danger) 22%, var(--color-bg-surface));
    color: var(--color-fg-default);
    border-color: color-mix(in oklch, var(--color-danger) 52%, var(--color-bg-surface));
  }
}

/* Source: packages/components/alert.css */
@layer components {
  .alert {
    display: grid;
    gap: var(--space-2);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border-subtle);
    padding: var(--space-3) var(--space-4);
    background: var(--color-bg-surface);
    color: var(--color-fg-default);
  }

  .alert-title {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 700;
    line-height: 1.3;
  }

  .alert-description {
    margin: 0;
    color: var(--color-fg-muted);
    font-size: var(--font-size-sm);
  }

  .alert-danger {
    background: var(--color-danger-subtle);
    border-color: color-mix(in oklch, var(--color-danger) 45%, var(--color-bg-surface));
    border-left-width: 3px;
    color: var(--color-fg-default);
  }
}

/* Source: packages/utilities/spacing.css */
@layer utilities {
  .p-0 {
    padding: var(--space-0);
  }

  .p-2 {
    padding: var(--space-2);
  }

  .p-4 {
    padding: var(--space-4);
  }

  .px-4 {
    padding-inline: var(--space-4);
  }

  .py-2 {
    padding-block: var(--space-2);
  }

  .gap-2 {
    gap: var(--space-2);
  }

  .gap-4 {
    gap: var(--space-4);
  }

  .mt-0 {
    margin-block-start: 0;
  }

  /* Escape hatch: sınırlı ve bilinçli kullanım */
  .force-mt-0 {
    margin-block-start: 0 !important;
  }
}

/* Source: packages/utilities/typography.css */
@layer utilities {
  .text-xs {
    font-size: var(--font-size-xs);
  }

  .text-sm {
    font-size: var(--font-size-sm);
  }

  .text-md {
    font-size: var(--font-size-md);
  }

  .text-lg {
    font-size: var(--font-size-lg);
  }

  .font-medium {
    font-weight: 500;
  }

  .font-semibold {
    font-weight: 600;
  }
}

/* Source: packages/utilities/color.css */
@layer utilities {
  .bg-primary-500 {
    background: var(--color-primary-500);
  }

  .bg-primary-600 {
    background: var(--color-primary-600);
  }

  .bg-surface {
    background: var(--color-bg-surface);
  }

  .bg-red-500 {
    background: var(--color-danger);
  }

  .text-white {
    color: #fff;
  }

  .text-fg-default {
    color: var(--color-fg-default);
  }

  .border-subtle {
    border-color: var(--color-border-subtle);
  }

  .force-bg-red-500 {
    background: var(--color-danger) !important;
  }
}

/* Source: packages/utilities/layout.css */
@layer utilities {
  .flex {
    display: flex;
  }

  .inline-flex {
    display: inline-flex;
  }

  .items-center {
    align-items: center;
  }

  .justify-between {
    justify-content: space-between;
  }

  .w-full {
    inline-size: 100%;
  }
}

/* Source: packages/utilities/state.css */
@layer utilities {
  .hover\:bg-primary-600:hover {
    background: var(--color-primary-600);
  }

  .focus-visible\:ring-primary:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-primary-500) 35%, transparent);
  }

  .disabled\:opacity-50:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  [aria-invalid="true"].aria-invalid\:ring-danger {
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-danger) 35%, transparent);
  }

  [data-open="true"].data-open\:shadow-lg {
    box-shadow: var(--shadow-md);
  }
}

/* Source: packages/utilities/effects.css */
@layer utilities {
  .rounded-md {
    border-radius: var(--radius-md);
  }

  .rounded-lg {
    border-radius: var(--radius-lg);
  }

  .shadow-sm {
    box-shadow: var(--shadow-sm);
  }

  .shadow-md {
    box-shadow: var(--shadow-md);
  }
}