@layer lu-components {

  /* ── LuSelect ─────────────────────────────────────────────────────────── */
  .lu-select {
    display: flex; align-items: center; justify-content: space-between;
    height: 2.25rem; width: 100%; padding: 0 var(--lu-space-3);
    border-radius: var(--lu-radius-input);
    border: 1px solid var(--lu-color-border);
    background: var(--lu-color-surface);
    font-size: var(--lu-text-sm); color: var(--lu-color-text);
    cursor: pointer; transition: border-color var(--lu-duration-base), box-shadow var(--lu-duration-base);
    outline: none; gap: var(--lu-space-2);
  }
  .lu-select:focus,
  .lu-select:focus-visible {
    border-color: var(--lu-color-border-focus);
    box-shadow: 0 0 0 1px var(--lu-color-border-focus);
  }
  .lu-select:disabled { opacity: 0.4; cursor: not-allowed; }
  .lu-select--error {
    border-color: var(--lu-color-danger);
    box-shadow: 0 0 0 1px var(--lu-color-danger);
  }
  .lu-select__placeholder { color: var(--lu-color-text-disabled); }
  .lu-select__icon {
    width: 1rem; height: 1rem; flex-shrink: 0;
    color: var(--lu-color-text-muted);
    transition: transform var(--lu-duration-base);
  }
  .lu-select__icon--open { transform: rotate(180deg); }
  
  .lu-select__panel {
    position: absolute; z-index: var(--lu-z-dropdown);
    background: var(--lu-color-surface-raised);
    border: 1px solid var(--lu-color-border);
    border-radius: var(--lu-radius-card);
    box-shadow: var(--lu-shadow-lg);
    overflow: hidden; margin-top: 2px;
  }
  .lu-select__search {
    display: block; width: 100%;
    padding: var(--lu-space-2) var(--lu-space-3);
    border: none; border-bottom: 1px solid var(--lu-color-border);
    background: var(--lu-color-surface);
    font-size: var(--lu-text-sm); color: var(--lu-color-text);
    outline: none;
  }
  .lu-select__option-list {
    max-height: 16rem; overflow-y: auto; padding: var(--lu-space-1);
  }
  .lu-select__option {
    display: flex; align-items: center;
    padding: var(--lu-space-2) var(--lu-space-3);
    border-radius: var(--lu-radius-2);
    font-size: var(--lu-text-sm); cursor: pointer;
    transition: background var(--lu-duration-fast);
    color: var(--lu-color-text);
  }
  .lu-select__option--active { background: var(--lu-color-surface-hover); }
  .lu-select__option--selected { color: var(--lu-color-primary); font-weight: var(--lu-font-medium); }
  .lu-select__option--disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
  .lu-select__empty {
    padding: var(--lu-space-4); text-align: center;
    font-size: var(--lu-text-sm); color: var(--lu-color-text-muted);
  }


  /* ── LuTabs ───────────────────────────────────────────────────────────── */
  .lu-tabs { display: flex; flex-direction: column; width: 100%; gap: var(--lu-space-4); }
  
  .lu-tab-list { display: flex; align-items: center; gap: var(--lu-space-1); flex-shrink: 0; }
  
  /* Variant: default */
  .lu-tab-list--default {
    padding: var(--lu-space-1);
    background: var(--lu-color-surface-sunken);
    border-radius: var(--lu-radius-3);
    border: 1px solid var(--lu-color-border);
  }
  .lu-tab-list--default .lu-tab--active {
    background: var(--lu-color-surface-raised);
    color: var(--lu-color-text);
    box-shadow: var(--lu-shadow-xs);
    border-bottom: 2px solid transparent;
  }
  
  /* Variant: card-header */
  .lu-tab-list--card-header {
    padding: 0 var(--lu-space-4);
    border-bottom: 1px solid var(--lu-color-border);
    gap: 0; background: transparent;
    height: 2.5rem;
    align-items: stretch;
  }
  .lu-tab-list--card-header .lu-tab { 
    border-radius: 0; 
    height: 100%;
    padding: 0 var(--lu-space-3);
  }
  .lu-tab-list--card-header .lu-tab--active {
    color: var(--lu-color-text);
    border-bottom: 2px solid var(--lu-color-primary);
    margin-bottom: -1px;
  }
  
  /* Variant: underline */
  .lu-tab-list--underline {
    border-bottom: 1px solid var(--lu-color-border);
    gap: var(--lu-space-4); background: transparent; padding: 0;
  }
  .lu-tab-list--underline .lu-tab { border-radius: 0; }
  .lu-tab-list--underline .lu-tab--active {
    color: var(--lu-color-text);
    border-bottom: 2px solid var(--lu-color-primary);
    margin-bottom: -1px;
  }

  .lu-tab {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--lu-space-1);
    padding: var(--lu-space-1) var(--lu-space-3);
    border-radius: var(--lu-radius-2); border: none; border-bottom: 2px solid transparent;
    font-size: var(--lu-text-sm); font-weight: var(--lu-font-medium);
    color: var(--lu-color-text-muted);
    cursor: pointer; white-space: nowrap; background: transparent;
    transition: background var(--lu-duration-base), color var(--lu-duration-base), box-shadow var(--lu-duration-base), border-color var(--lu-duration-base);
    outline: none;
  }
  .lu-tab:hover { background: var(--lu-color-surface-hover); color: var(--lu-color-text); }
  .lu-tab--active { border-bottom: 2px solid var(--lu-color-primary); color: var(--lu-color-text); }
  .lu-tab:focus-visible { outline: 2px solid var(--lu-color-border-focus); outline-offset: 2px; z-index: 1; }

  .lu-tab-panel { padding: 0; width: 100%; }


  /* ── LuToggleGroup ────────────────────────────────────────────────────── */
  .lu-toggle-group {
    display: inline-flex; align-items: center; gap: 2px;
    padding: 2px; border-radius: var(--lu-radius-3);
    background: var(--lu-color-surface-sunken);
    border: 1px solid var(--lu-color-border);
  }
  .lu-toggle-group--ghost {
    background: transparent; border-color: transparent; padding: 0; gap: 0;
  }
  .lu-toggle-button {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--lu-space-1);
    padding: var(--lu-space-1) var(--lu-space-2);
    border: none; border-radius: var(--lu-radius-2);
    font-size: var(--lu-text-sm); font-weight: var(--lu-font-medium);
    cursor: pointer; color: var(--lu-color-text-muted);
    background: transparent; transition: background var(--lu-duration-base), color var(--lu-duration-base);
    outline: none;
  }
  .lu-toggle-button:hover { background: var(--lu-color-surface-hover); color: var(--lu-color-text); }
  .lu-toggle-button--active {
    background: var(--lu-color-surface-raised); color: var(--lu-color-text); box-shadow: var(--lu-shadow-xs);
  }
  .lu-toggle-button--ghost { padding: var(--lu-space-1); }
  .lu-toggle-button--ghost.lu-toggle-button--active {
    background: var(--lu-color-surface-hover); color: var(--lu-color-text); box-shadow: none;
  }
  .lu-toggle-button:focus-visible { outline: 2px solid var(--lu-color-border-focus); outline-offset: 2px; }


  /* ── LuSwitch ─────────────────────────────────────────────────────────── */
  .lu-switch-root {
    display: inline-flex; align-items: center; gap: var(--lu-space-2); cursor: pointer;
  }
  .lu-switch {
    position: relative; display: inline-flex; align-items: center;
    height: 1.25rem; width: 2.25rem; border-radius: var(--lu-radius-full);
    border: none; background: var(--lu-color-surface-sunken);
    border: 1.5px solid var(--lu-color-border);
    transition: background var(--lu-duration-base), border-color var(--lu-duration-base);
    outline: none; cursor: pointer; flex-shrink: 0;
  }
  .lu-switch:focus-visible { outline: 2px solid var(--lu-color-border-focus); outline-offset: 2px; }
  .lu-switch--checked { background: var(--lu-color-primary); border-color: var(--lu-color-primary); }
  .lu-switch--indeterminate { background: var(--lu-color-warning); border-color: var(--lu-color-warning); }
  .lu-switch:disabled, .lu-switch-root:has(:disabled) { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
  .lu-switch__thumb {
    position: absolute; left: 2px; height: 0.875rem; width: 0.875rem;
    border-radius: var(--lu-radius-full); background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform var(--lu-duration-base) var(--lu-ease-spring);
  }
  .lu-switch__thumb--checked { transform: translateX(1rem); }
  .lu-switch__thumb--indeterminate { transform: translateX(0.5rem); }
  .lu-switch__label { font-size: var(--lu-text-sm); color: var(--lu-color-text); user-select: none; }


  /* ── LuCheckbox ───────────────────────────────────────────────────────── */
  .lu-checkbox-container {
    display: inline-flex; align-items: center; gap: var(--lu-space-2);
  }
  .lu-checkbox {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1rem; height: 1rem; border-radius: var(--lu-radius-2);
    border: 1.5px solid var(--lu-color-border); background: var(--lu-color-surface);
    color: transparent; cursor: pointer; flex-shrink: 0;
    transition: background var(--lu-duration-base), border-color var(--lu-duration-base), color var(--lu-duration-base);
    outline: none;
  }
  .lu-checkbox:hover { border-color: var(--lu-color-primary); }
  .lu-checkbox:focus-visible { outline: 2px solid var(--lu-color-border-focus); outline-offset: 2px; }
  .lu-checkbox--active { background: var(--lu-color-primary); border-color: var(--lu-color-primary); color: #fff; }
  .lu-checkbox--error { border-color: var(--lu-color-danger); }
  .lu-checkbox:disabled, .lu-checkbox-container:has(:disabled) { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
  .lu-checkbox__icon { width: 0.625rem; height: 0.625rem; stroke-width: 3; display: block; }
  .lu-checkbox__label { font-size: var(--lu-text-sm); color: var(--lu-color-text); cursor: pointer; user-select: none; }


  /* ── LuRadio ──────────────────────────────────────────────────────────── */
  .lu-radio-group {
    display: flex; flex-direction: column; gap: var(--lu-space-2);
  }
  .lu-radio-container {
    display: inline-flex; align-items: center; gap: var(--lu-space-2);
  }
  .lu-radio {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1rem; height: 1rem; border-radius: var(--lu-radius-full);
    border: 1.5px solid var(--lu-color-border); background: var(--lu-color-surface);
    cursor: pointer; flex-shrink: 0;
    transition: border-color var(--lu-duration-base), background var(--lu-duration-base);
    outline: none;
  }
  .lu-radio:hover { border-color: var(--lu-color-primary); }
  .lu-radio:focus-visible { outline: 2px solid var(--lu-color-border-focus); outline-offset: 2px; }
  .lu-radio--checked { border-color: var(--lu-color-primary); background: var(--lu-color-primary); }
  .lu-radio:disabled, .lu-radio-container:has(:disabled) { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
  .lu-radio__dot { width: 0.375rem; height: 0.375rem; border-radius: var(--lu-radius-full); background: #fff; }
  .lu-radio__label { font-size: var(--lu-text-sm); color: var(--lu-color-text); cursor: pointer; user-select: none; }

}