:root {
  --font-family: system-ui, 'Manrope', 'Inter';
  --font-size: 16px;
  --font-icon-family: lucide;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --link-color: #e0a526;
  --text-color: #d4d4d4;
  --text-muted: #808080;
  --text-xs: 0.7rem;
  --text-sm: 0.8rem;
  --text-base: 0.875rem;
  --text-lg: 1rem;
  --text-xl: 1.125rem;
  --text-2xl: 1.375rem;
  --text-3xl: 1.75rem;
  --background-color: #090909;
  --color-primary: #e0a526;
  --color-primary-lighter: #f0c95c;
  --color-primary-light: #e8b83e;
  --color-primary-dark: #c48e1e;
  --color-primary-darker: #a07416;
  --color-secondary: #6c9bcf;
  --color-secondary-lighter: hsl(212 51% 82%);
  --color-secondary-light: hsl(212 51% 72%);
  --color-secondary-dark: hsl(212 51% 52%);
  --color-secondary-darker: hsl(212 51% 42%);
  --color-success: #4ade80;
  --color-success-lighter: hsl(142 69% 78%);
  --color-success-light: hsl(142 69% 68%);
  --color-success-dark: hsl(142 69% 48%);
  --color-success-darker: hsl(142 69% 38%);
  --color-danger: #f87171;
  --color-danger-lighter: hsl(0 91% 91%);
  --color-danger-light: hsl(0 91% 81%);
  --color-danger-dark: hsl(0 91% 61%);
  --color-danger-darker: hsl(0 91% 51%);
  --color-warning: #fbbf24;
  --color-warning-lighter: hsl(43 96% 76%);
  --color-warning-light: hsl(43 96% 66%);
  --color-warning-dark: hsl(43 96% 46%);
  --color-warning-darker: hsl(43 96% 36%);
  --color-info: #60a5fa;
  --color-info-lighter: hsl(213 94% 88%);
  --color-info-light: hsl(213 94% 78%);
  --color-info-dark: hsl(213 94% 58%);
  --color-info-darker: hsl(213 94% 48%);
  --color-surface: #151515;
  --color-surface-light: #1e1e1e;
  --color-surface-lighter: #282828;
  --color-surface-dark: #0f0f0f;
  --color-surface-darker: #090909;
  --color-hover: #e0a526;
  --color-hover-lighter: hsl(41 75% 71%);
  --color-hover-light: hsl(41 75% 61%);
  --color-hover-dark: hsl(41 75% 41%);
  --color-hover-darker: hsl(41 75% 31%);
  --color-focus: #e0a526;
  --color-focus-lighter: hsl(41 75% 71%);
  --color-focus-light: hsl(41 75% 61%);
  --color-focus-dark: hsl(41 75% 41%);
  --color-focus-darker: hsl(41 75% 31%);
  --color-inverse: #090909;
  --color-inverse-lighter: #2a2a2a;
  --color-inverse-light: #1a1a1a;
  --color-inverse-dark: #060606;
  --color-inverse-darker: #000000;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 0.75rem;
  --spacing-lg: 1rem;
  --spacing-xl: 1.5rem;
  --spacing-2xl: 2rem;
  --spacing-3xl: 3rem;
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  --radius-none: 0;
  --radius-sm: 0.25rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.375rem;
  --radius-xl: 0.5rem;
  --radius-full: 9999px;
  --shadow-none: none;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --shadow-2xl: none;
  --border-width: 1px;
  --border-color: #252525;
  --uix-button-border-width: 1px;
  --uix-button-border-color: #333333;
  --uix-button-border-radius: 0.25rem;
  --uix-button-shadow: none;
  --uix-button-hover-shadow: none;
  --uix-button-active-shadow: none;
  --uix-button-font-weight: 500;
  --uix-button-text-transform: none;
  --uix-button-primary-color: #090909;
  --uix-button-secondary-color: #090909;
  --uix-input-background: #0f0f0f;
  --uix-input-background-focus: #151515;
  --uix-input-background-disabled: #090909;
  --uix-input-border-color: #252525;
  --uix-input-border-width: 1px;
  --uix-input-border-radius: 0.25rem;
  --uix-input-border-focus: #e0a526;
  --uix-input-border-error: #f87171;
  --uix-input-text: #d4d4d4;
  --uix-input-placeholder: #555;
  --uix-input-icon: #808080;
  --uix-input-shadow: none;
  --uix-input-focus-shadow: 0 0 0 1px rgba(224,165,38,0.2);
  --uix-checkbox-border-width: 1px;
  --uix-checkbox-border-color: #333333;
  --uix-checkbox-border-radius: 0.125rem;
  --uix-checkbox-shadow: none;
  --uix-checkbox-hover-border-color: #e0a526;
  --uix-checkbox-checked-background-color: #e0a526;
  --uix-checkbox-checked-border-color: #e0a526;
  --uix-checkbox-label-font-weight: 400;
  --uix-label-font-size: 0.8rem;
  --uix-label-font-weight: 500;
  --uix-label-color: #aaa;
  --uix-label-letter-spacing: 0.02em;
  --uix-label-text-transform: none;
  --uix-label-margin: 0.25rem;
  --uix-tab-border-color: #252525;
  --uix-tab-border-radius: 0;
  --uix-tab-shadow: none;
  --uix-tab-list-background: #090909;
  --uix-tab-list-border-color: #252525;
  --uix-tab-padding: 0.5rem 1rem;
  --uix-tab-gap: 0;
  --uix-tab-font-size: 0.8rem;
  --uix-tab-font-weight: 400;
  --uix-tab-text-transform: none;
  --uix-tab-letter-spacing: 0;
  --uix-tab-color: #808080;
  --uix-tab-color-hover: #d4d4d4;
  --uix-tab-color-active: #d4d4d4;
  --uix-tab-background: transparent;
  --uix-tab-background-hover: #151515;
  --uix-tab-background-active: #151515;
  --uix-tab-border-width: 0;
  --uix-tab-border-active: none;
  --uix-card-background: #151515;
  --uix-card-border: #252525;
  --uix-card-border-width: 1px;
  --uix-card-border-hover: #333333;
  --uix-card-text: #d4d4d4;
  --uix-card-text-muted: #808080;
  --uix-card-header-background: transparent;
  --uix-card-header-border: #252525;
  --uix-card-footer-background: transparent;
  --uix-card-footer-border: #252525;
  --uix-card-icon-background: #0f0f0f;
  --uix-card-icon-size: 2rem;
  --uix-card-icon-border-radius: 0.25rem;
  --uix-modal-background: #151515;
  --uix-modal-border-width: 1px;
  --uix-modal-border-color: #333333;
  --uix-modal-border-radius: 0.375rem;
  --uix-modal-shadow: 0 8px 32px rgba(0,0,0,0.6);
  --uix-modal-color: #d4d4d4;
  --uix-modal-overlay: rgba(0, 0, 0, 0.7);
  --uix-modal-header-padding: 1rem;
  --uix-modal-header-border-width: 1px;
  --uix-modal-header-background: #151515;
  --uix-modal-header-font-size: 1rem;
  --uix-modal-header-font-weight: 600;
  --uix-modal-header-color: #d4d4d4;
  --uix-modal-body-padding: 1rem;
  --uix-modal-body-color: #aaa;
  --uix-modal-footer-padding: 0.75rem 1rem;
  --uix-modal-footer-border-width: 1px;
  --uix-modal-footer-background: #0f0f0f;
  --uix-dropdown-background: #151515;
  --uix-dropdown-background-hover: #1e1e1e;
  --uix-dropdown-background-active: #282828;
  --uix-dropdown-border: #252525;
  --uix-dropdown-text: #d4d4d4;
  --uix-dropdown-text-muted: #808080;
  --uix-dropdown-separator: #252525;
  --uix-dropdown-shadow: 0 4px 16px rgba(0,0,0,0.5);
  --uix-badge-default-background: #1e1e1e;
  --uix-badge-default-text: #d4d4d4;
  --uix-badge-default-border: #333333;
  --uix-badge-success-background: #166534;
  --uix-badge-success-text: #4ade80;
  --uix-badge-success-border: #166534;
  --uix-badge-danger-background: #7f1d1d;
  --uix-badge-danger-text: #f87171;
  --uix-badge-danger-border: #7f1d1d;
  --uix-badge-warning-background: #78350f;
  --uix-badge-warning-text: #fbbf24;
  --uix-badge-warning-border: #78350f;
  --uix-badge-info-background: #1e3a5f;
  --uix-badge-info-text: #60a5fa;
  --uix-badge-info-border: #1e3a5f;
  --uix-tag-background: #1e1e1e;
  --uix-tag-color: #d4d4d4;
  --uix-tag-border-color: transparent;
  --uix-tag-border-radius: 0.25rem;
  --uix-tag-font-size: 0.6875rem;
  --uix-tag-font-weight: 500;
  --uix-tag-padding-x: 0.5rem;
  --uix-tag-padding-y: 0.125rem;
  --uix-tag-gap: 0.25rem;
  --uix-list-background: transparent;
  --uix-list-background-hover: #1e1e1e;
  --uix-list-background-active: #282828;
  --uix-list-background-selected: #1e1e1e;
  --uix-list-border: #252525;
  --uix-list-border-hover: #333333;
  --uix-list-text: #d4d4d4;
  --uix-list-text-muted: #808080;
  --uix-tree-background: transparent;
  --uix-tree-background-hover: #1e1e1e;
  --uix-tree-background-selected: #1e1e1e;
  --uix-tree-border: #252525;
  --uix-tree-indent: 1rem;
  --uix-tree-icon: #808080;
  --uix-tree-icon-hover: #d4d4d4;
  --uix-table-border-width: 1px;
  --uix-table-border-color: #252525;
  --uix-table-border-radius: 0.25rem;
  --uix-table-shadow: none;
  --uix-table-header-background: #0f0f0f;
  --uix-table-header-color: #aaa;
  --uix-table-header-font-weight: 500;
  --uix-table-header-font-size: 0.75rem;
  --uix-table-header-text-transform: none;
  --uix-table-row-background: #151515;
  --uix-table-row-hover-background: #1e1e1e;
  --uix-table-cell-padding: 0.5rem 0.75rem;
  --uix-table-cell-font-size: 0.8rem;
  --uix-table-cell-color: #d4d4d4;
  --uix-sidebar-background: #0f0f0f;
  --uix-sidebar-border-width: 1px;
  --uix-sidebar-border-color: #252525;
  --uix-sidebar-border-radius: 0;
  --uix-sidebar-shadow: none;
  --uix-sidebar-width: 256px;
  --uix-sidebar-collapsed-width: 48px;
  --uix-sidebar-header-padding: 0.75rem;
  --uix-sidebar-header-background: #0f0f0f;
  --uix-sidebar-header-border-width: 1px;
  --uix-sidebar-header-font-weight: 600;
  --uix-sidebar-content-padding: 0.5rem;
  --uix-sidebar-footer-padding: 0.5rem;
  --uix-sidebar-footer-background: #0f0f0f;
  --uix-sidebar-footer-border-width: 1px;
  --uix-sidebar-toggle-background: transparent;
  --uix-sidebar-toggle-hover-background: #1e1e1e;
  --uix-sidebar-toggle-border-radius: 0.25rem;
  --uix-sidebar-item-padding: 0.375rem 0.75rem;
  --uix-sidebar-item-border-radius: 0.25rem;
  --uix-sidebar-item-font-weight: 400;
  --uix-sidebar-item-color: #808080;
  --uix-sidebar-item-hover-background: #1e1e1e;
  --uix-sidebar-item-hover-color: #d4d4d4;
  --uix-sidebar-item-active-background: #e0a52615;
  --uix-sidebar-item-active-color: #e0a526;
  --uix-sidebar-item-active-font-weight: 500;
  --uix-panel-background: #151515;
  --uix-panel-background-hover: #1e1e1e;
  --uix-panel-border: #252525;
  --uix-panel-header-background: transparent;
  --uix-panel-header-text: #d4d4d4;
  --uix-panel-header-border: #252525;
  --uix-progress-border-width: 0;
  --uix-progress-border-color: transparent;
  --uix-progress-border-radius: 0.25rem;
  --uix-progress-background: #1e1e1e;
  --uix-progress-fill-background: #e0a526;
  --uix-progress-shadow: none;
  --uix-progress-height: 0.375rem;
  --uix-breadcrumbs-font-size: 0.8rem;
  --uix-breadcrumbs-font-weight: 400;
  --uix-breadcrumbs-current-font-weight: 500;
  --uix-breadcrumbs-text-transform: none;
  --uix-breadcrumbs-letter-spacing: 0;
  --uix-breadcrumbs-link-color: #808080;
  --uix-breadcrumbs-link-hover-color: #d4d4d4;
  --uix-breadcrumbs-current-color: #d4d4d4;
  --uix-breadcrumbs-separator-color: #555;
  --uix-breadcrumbs-gap: 0.25rem;
  --uix-pagination-border-width: 1px;
  --uix-pagination-border-color: #252525;
  --uix-pagination-border-radius: 0.25rem;
  --uix-pagination-background: #151515;
  --uix-pagination-color: #d4d4d4;
  --uix-pagination-font-weight: 400;
  --uix-pagination-shadow: none;
  --uix-pagination-hover-background: #1e1e1e;
  --uix-pagination-hover-border-color: #333333;
  --uix-pagination-hover-shadow: none;
  --uix-pagination-active-background: #e0a526;
  --uix-pagination-active-border-color: #e0a526;
  --uix-pagination-active-color: #090909;
  --uix-pagination-active-shadow: none;
  --path: /theme.js;
  --admin: gruvbox-dark;
  --font-google-0: Manrope;
  --icon-family: lucide;
  --runtime: true;
}

/* Bundled font: Manrope */
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/manrope-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/manrope-400.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/manrope-400.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/manrope-400-0102.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/manrope-400-0100.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/manrope-400-0000.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/manrope-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/manrope-400.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/manrope-400.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/manrope-400-0102.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/manrope-400-0100.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/manrope-400-0000.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/manrope-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/manrope-400.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/manrope-400.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/manrope-400-0102.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/manrope-400-0100.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/manrope-400-0000.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/manrope-400.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/manrope-400.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/manrope-400.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/manrope-400-0102.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/manrope-400-0100.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/manrope-400-0000.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* /node_modules/@bootstrapp/uix/theme.css */
html,
body {
  font-family: var(--font-family);
  background-color: var(--background-color);
  color: var(--text-color);
  width: 100%;
  min-height: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

*::selection {
  background: color-mix(in srgb, var(--color-primary) 60%, transparent);
  color: #ffffff;
}
*::-moz-selection {
  background: color-mix(in srgb, var(--color-primary) 60%, transparent);
  color: #ffffff;
}
*::-webkit-selection {
  background: color-mix(in srgb, var(--color-primary) 60%, transparent);
  color: #ffffff;
}

a,
::part(anchor) {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

html {
  font-size: var(--font-size, 14px);
}
@media (max-width: 768px) {
  html {
    font-size: 18px;
  }
}
@media (max-width: 480px) {
  html {
    font-size: 20px;
  }
}

textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
:root {
  box-sizing: border-box;
  text-size-adjust: none;
  line-height: 1.2;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  border-color: var(--border-color, currentColor);
}
* {
  margin: 0;
}
body {
  font-family: var(--font-family);
}
button,
textarea,
select {
  background-color: inherit;
  border-width: 0;
  color: inherit;
}
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
input,
button,
textarea,
select {
  font: inherit;
  background: inherit;
  border: inherit;
}
p {
  font-family: var(--font-family);
  overflow-wrap: break-word;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading, var(--font-family));
  overflow-wrap: break-word;
}
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.8);
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(121, 121, 121, 0.4);
  border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 100, 100, 0.7);
}

::-webkit-scrollbar-thumb:active {
  background: rgba(85, 85, 85, 0.8);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(121, 121, 121, 0.4) transparent;
}

.dark {
  filter: invert(1) hue-rotate(180deg);
}
.dark img,
.dark dialog,
.dark video,
.dark iframe {
  filter: invert(1) hue-rotate(180deg);
}

[direction="horizontal"] {
  --flex-direction: row;
  flex-direction: row;
}

[direction="vertical"] {
  --flex-direction: column;
  flex-direction: column;
}

[cursor-pointer] {
  cursor: pointer;
}

[w-full] {
  width: 100%;
}

[h-full] {
  height: 100%;
}

[min-h-0] {
  min-height: 0;
}

[min-w-0] {
  min-width: 0;
}

[flex] {
  display: flex;
}

[flex-col] {
  flex-direction: column;
}

[flex-1] {
  flex: 1;
}

[flex-grow] {
  flex-grow: 1;
}
[flex-shrink-0] {
  flex-shrink: 0;
}

body:not(.production) {
  *:not(:defined) {
    display: block;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    border: 1px solid red;
  }
}

@view-transition {
  navigation: auto;
}


/* Component CSS (53 files) */
:where(.uix-alert, uix-alert) {
	display: block;

	&::part(alert) {
		display: flex;
		align-items: flex-start;
		gap: var(--uix-alert-gap, 0.75rem);
		padding: var(--uix-alert-padding, 0.75rem 1rem);
		background: var(--uix-alert-background, var(--color-surface-light));
		border: var(--border-width, 1px) solid var(--uix-alert-border-color, var(--color-surface));
		border-left: var(--uix-alert-accent-width, 4px) solid var(--uix-alert-accent-color, var(--color-primary));
		border-radius: var(--uix-alert-border-radius, var(--radius-md, 0.375rem));
	}

	&::part(icon) {
		flex-shrink: 0;
		width: 1.25rem;
		height: 1.25rem;
		color: var(--uix-alert-icon-color, var(--color-primary));
	}

	&::part(content) {
		flex: 1;
		min-width: 0;
		font-size: var(--uix-alert-font-size, var(--text-sm, 0.875rem));
		line-height: 1.5;
		color: var(--uix-alert-text-color, var(--text-color));
	}

	&[variant="default"]::part(alert) {
		--uix-alert-accent-color: var(--color-surface-dark);
		--uix-alert-icon-color: var(--color-surface-dark);
	}

	&[variant="success"]::part(alert) {
		--uix-alert-accent-color: var(--color-success);
		--uix-alert-icon-color: var(--color-success);
	}

	&[variant="warning"]::part(alert) {
		--uix-alert-accent-color: var(--color-warning);
		--uix-alert-icon-color: var(--color-warning);
	}

	&[variant="error"]::part(alert) {
		--uix-alert-accent-color: var(--color-danger);
		--uix-alert-icon-color: var(--color-danger);
	}

	&[variant="info"]::part(alert) {
		--uix-alert-accent-color: var(--color-info);
		--uix-alert-icon-color: var(--color-info);
	}
}


:where(.uix-tooltip, uix-tooltip) {
  position: fixed;
  margin: 0;
  width: auto;
  height: auto;
  border: none;
  overflow: visible;
  pointer-events: none;
  inset: auto;

  padding: var(--uix-tooltip-padding-y, 0.375rem)
    var(--uix-tooltip-padding-x, 0.625rem);
  background: var(--uix-tooltip-background, var(--color-surface-inverse, #1a1a1a));
  color: var(--uix-tooltip-color, var(--color-text-inverse, #fff));
  border-radius: var(--uix-tooltip-radius, var(--radius-sm, 0.25rem));
  font-size: var(--uix-tooltip-font-size, var(--text-xs, 0.75rem));
  font-weight: var(--uix-tooltip-font-weight, var(--font-medium, 500));
  line-height: var(--uix-tooltip-line-height, 1.4);
  box-shadow: var(
    --uix-tooltip-shadow,
    var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.3))
  );
  white-space: nowrap;
  max-width: var(--uix-tooltip-max-width, 300px);

  /* Sizes */
  &[size="sm"] {
    --uix-tooltip-padding-y: 0.25rem;
    --uix-tooltip-padding-x: 0.5rem;
    --uix-tooltip-font-size: var(--text-xs, 0.75rem);
  }

  &[size="md"] {
    --uix-tooltip-padding-y: 0.375rem;
    --uix-tooltip-padding-x: 0.625rem;
    --uix-tooltip-font-size: var(--text-xs, 0.75rem);
  }

  &[size="lg"] {
    --uix-tooltip-padding-y: 0.5rem;
    --uix-tooltip-padding-x: 0.875rem;
    --uix-tooltip-font-size: var(--text-sm, 0.875rem);
  }

  /* Variants */
  &[variant="primary"] {
    --uix-tooltip-background: var(--color-primary);
    --uix-tooltip-color: var(--color-primary-inverse, var(--color-inverse, #fff));
  }

  &[variant="secondary"] {
    --uix-tooltip-background: var(--color-secondary);
    --uix-tooltip-color: var(--color-secondary-inverse, var(--color-inverse, #fff));
  }

  &[variant="success"] {
    --uix-tooltip-background: var(--color-success);
    --uix-tooltip-color: var(--color-success-inverse, var(--color-inverse, #fff));
  }

  &[variant="warning"] {
    --uix-tooltip-background: var(--color-warning);
    --uix-tooltip-color: var(--color-warning-inverse, var(--color-inverse, #000));
  }

  &[variant="danger"] {
    --uix-tooltip-background: var(--color-danger);
    --uix-tooltip-color: var(--color-danger-inverse, var(--color-inverse, #fff));
  }

  &[variant="info"] {
    --uix-tooltip-background: var(--color-info);
    --uix-tooltip-color: var(--color-info-inverse, var(--color-inverse, #fff));
  }
}


:where(.uix-badge, uix-badge) {

  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: fit-content;
  box-sizing: border-box;

  font-weight: var(--uix-badge-font-weight, var(--font-semibold, 600));
  font-size: var(--uix-badge-font-size, var(--text-xs, 0.75rem));
  line-height: var(--uix-badge-line-height, 1rem);
  padding: var(--uix-badge-padding-y, 0.15rem) var(--uix-badge-padding-x, 0.5rem);

  border-radius: var(--uix-badge-border-radius, var(--radius-md, 0.375rem));

  border: var(--uix-badge-border-width, 0) solid var(--uix-badge-border-color, transparent);

  background-color: var(--uix-badge-background);
  color: var(--uix-badge-color);

  &[variant="default"] {
    --uix-badge-background: var(--color-surface-dark);
    --uix-badge-color: var(--color-text-default);
    --uix-badge-border-color: var(--color-surface-lighter);
    --uix-badge-border-width: 1px;
  }

  &[variant="success"] {
    --uix-badge-background: var(--color-success);
    --uix-badge-color: var(--color-inverse);
    --uix-badge-border-color: var(--color-success-light);
  }

  &[variant="danger"] {
    --uix-badge-background: var(--color-danger);
    --uix-badge-color: var(--color-inverse);
    --uix-badge-border-color: var(--color-danger-light);
  }

  &[variant="warning"] {
    --uix-badge-background: var(--color-warning);
    --uix-badge-color: var(--color-inverse);
    --uix-badge-border-color: var(--color-warning-light);
  }

  &[variant="info"] {
    --uix-badge-background: var(--color-info);
    --uix-badge-color: var(--color-inverse);
    --uix-badge-border-color: var(--color-info-light);
  }

  &[outline] {
    background-color: transparent;

    &[variant="default"] {
      --uix-badge-border-color: var(--color-surface-dark);
      --uix-badge-color: var(--color-surface-darker);
    }

    &[variant="success"] {
      --uix-badge-border-color: var(--color-success-dark);
      --uix-badge-color: var(--color-success-dark);
    }

    &[variant="danger"] {
      --uix-badge-border-color: var(--color-danger-dark);
      --uix-badge-color: var(--color-danger-dark);
    }

    &[variant="warning"] {
      --uix-badge-border-color: var(--color-warning-dark);
      --uix-badge-color: var(--color-warning-dark);
    }

    &[variant="info"] {
      --uix-badge-border-color: var(--color-info-dark);
      --uix-badge-color: var(--color-info-dark);
    }
  }

  &[soft] {
    border: 1px solid transparent;

    &[variant="success"] {
      background-color: color-mix(in srgb, var(--color-success), transparent 85%);
      color: var(--color-success-darker);
    }

    &[variant="danger"] {
      background-color: color-mix(in srgb, var(--color-danger), transparent 85%);
      color: var(--color-danger-darker);
    }

    &[variant="warning"] {
      background-color: color-mix(in srgb, var(--color-warning), transparent 85%);
      color: var(--color-warning-darker);
    }

    &[variant="info"] {
      background-color: color-mix(in srgb, var(--color-info), transparent 85%);
      color: var(--color-info-darker);
    }
  }

  &[size="xs"] {
    --uix-badge-padding-y: 0.0625rem;
    --uix-badge-padding-x: 0.25rem;
    --uix-badge-font-size: var(--text-xs, 0.65rem);
  }

  &[size="sm"] {
    --uix-badge-padding-y: 0.1rem;
    --uix-badge-padding-x: 0.375rem;
    --uix-badge-font-size: var(--text-xs, 0.7rem);
  }

  &[size="md"] {
    --uix-badge-padding-y: 0.15rem;
    --uix-badge-padding-x: 0.5rem;
    --uix-badge-font-size: var(--text-xs, 0.75rem);
  }

  &[size="lg"] {
    --uix-badge-padding-y: 0.25rem;
    --uix-badge-padding-x: 0.75rem;
    --uix-badge-font-size: var(--text-sm, 0.875rem);
  }
}


:where(.uix-bottom-sheet, uix-bottom-sheet) {
  position: fixed;
  inset: 0;
  z-index: var(--uix-bottom-sheet-z-index, 999);
  pointer-events: none;

  &[open] {
    pointer-events: auto;
  }

  /* Slotted children inherit pointer-events from light DOM parent (host),
     NOT from shadow DOM slot context — override so they stay interactive */
  & > * {
    pointer-events: auto;
  }

  /* Backdrop: always in DOM, opacity-controlled */
  &::part(backdrop) {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }

  &[open]::part(backdrop) {
    opacity: 1;
    pointer-events: auto;
  }

  /* Panel: single sliding unit (content + nav) */
  &::part(panel) {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    background: var(--uix-bottom-sheet-bg, var(--color-surface-light, #1a1a1a));
    border-radius: var(--uix-bottom-sheet-radius, 16px) var(--uix-bottom-sheet-radius, 16px) 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    /* Collapsed: push down so only nav peeks above viewport */
    transform: translateY(calc(100% - var(--uix-bottom-sheet-nav-height, 56px) - env(safe-area-inset-bottom, 0px)));
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
  }

  &[open]::part(panel) {
    transform: translateY(0);
  }

  /* Content: always full height, transform hides/reveals */
  &::part(content) {
    height: var(--uix-bottom-sheet-sheet-height, calc(100vh - 104px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Nav: top of panel, always visible when collapsed */
  &::part(nav) {
    flex-shrink: 0;
    min-height: var(--uix-bottom-sheet-nav-height, 56px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    touch-action: none;
    user-select: none;
  }
}


:where(.uix-button, uix-button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--uix-button-width, fit-content);
  height: var(--uix-button-height, 2.5rem);
  white-space: nowrap;
  box-sizing: border-box;
  &::part(anchor) {
    border: 0;
    background: transparent;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    padding: 0 var(--uix-button-padding-x, 1rem);
  }

  font-family: inherit;
  font-weight: var(--uix-button-font-weight, var(--font-bold, 700));
  font-size: var(--uix-button-font-size, var(--text-sm, 0.875rem));
  line-height: var(--uix-button-line-height, 1.5);
  text-align: center;
  gap: var(--uix-button-gap, 0.5rem);

  border-radius: var(--uix-button-border-radius, var(--radius-md, 0.375rem));
  border: var(--uix-button-border-width, 2px) solid
    var(--uix-button-border-color, transparent);
  --uix-button-shadow: var(--uix-button-shadow-size, 0 0 0 0)
    var(--uix-button-border-color, transparent);
  --uix-button-hover-shadow: var(
      --uix-button-hover-shadow-size,
      var(--uix-button-shadow-size, 0 0 0 0)
    )
    var(--uix-button-border-color, transparent);
  box-shadow: var(--uix-button-shadow);
  text-decoration: none;
  cursor: pointer;
  text-transform: var(--uix-button-text-transform, none);
  transition: var(
    --uix-button-transition,
    transform 0.1s ease-in-out,
    background-color 0.2s ease-in-out,
    border-color 0.2s ease-in-out,
    box-shadow 0.15s ease-in-out,
    color 0.2s ease-in-out
  );
  background: transparent;
  user-select: none;
  background-color: var(--uix-button-background, #000);
  color: var(--uix-button-color, var(--uix-button-text-color, #333));

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

  &:not([disabled]):not([aria-disabled="true"]):hover {
    background-color: var(
      --uix-button-hover-background,
      var(--color-primary-dark)
    );
    border-color: var(
      --uix-button-hover-border-color,
      var(--uix-button-border-color, transparent)
    );
    color: var(--uix-button-hover-color, var(--uix-button-color));
    box-shadow: var(--uix-button-hover-shadow, var(--uix-button-shadow, none));
    transform: translate(
      var(--uix-button-hover-translate-x, 0),
      var(--uix-button-hover-translate-y, 0)
    );
  }

  &:not([disabled]):not([aria-disabled="true"]):active {
    background-color: var(
      --uix-button-active-background,
      var(--color-primary-darker)
    );
    box-shadow: var(--uix-button-active-shadow, var(--uix-button-shadow, none));
    transform: translate(
        var(--uix-button-active-translate-x, 0),
        var(--uix-button-active-translate-y, 0)
      )
      scale(0.97);
  }

  &:not(
      [variant],
      [primary],
      [secondary],
      [danger],
      [success],
      [warning],
      [border]
    ) {
    --uix-button-color: #fff;
    --uix-button-background: #000;
    --uix-button-border-color: #000;
    --uix-button-hover-background: #222;
    --uix-button-active-background: #222;
  }

  &[primary],
  &[variant="primary"] {
    --uix-button-background: var(--color-primary);
    --uix-button-border-color: var(--color-primary);
    --uix-button-hover-border-color: var(--color-primary-dark);
    --uix-button-hover-background: var(--color-primary-dark);
    --uix-button-active-background: var(--color-primary-darker);
    --uix-button-color: var(
      --uix-button-primary-color,
      var(--uix-button-text-color, #fff)
    );
  }

  &[secondary],
  &[variant="secondary"] {
    --uix-button-background: var(--color-secondary);
    --uix-button-border-color: var(--color-secondary);
    --uix-button-hover-background: var(--color-secondary-dark);
    --uix-button-hover-border-color: var(--color-secondary-dark);
    --uix-button-active-background: var(--color-secondary-darker);
    --uix-button-color: var(
      --uix-button-secondary-color,
      var(--uix-button-text-color, #fff)
    );
  }

  &[danger],
  &[variant="danger"] {
    --uix-button-background: var(--color-danger);
    --uix-button-border-color: var(--color-danger);
    --uix-button-hover-border-color: var(--color-danger-dark);
    --uix-button-hover-background: var(--color-danger-dark);
    --uix-button-active-background: var(--color-danger-darker);
    --uix-button-color: var(
      --uix-button-danger-color,
      var(--uix-button-text-color, #fff)
    );
  }

  &[success],
  &[variant="success"] {
    --uix-button-background: var(--color-success);
    --uix-button-border-color: var(--color-success);
    --uix-button-hover-border-color: var(--color-success-dark);
    --uix-button-hover-background: var(--color-success-dark);
    --uix-button-active-background: var(--color-success-darker);
    --uix-button-color: var(
      --uix-button-success-color,
      var(--uix-button-text-color, #fff)
    );
  }

  &[warning],
  &[variant="warning"] {
    --uix-button-background: var(--color-warning);
    --uix-button-border-color: var(--color-warning);
    --uix-button-hover-border-color: var(--color-warning-dark);
    --uix-button-hover-background: var(--color-warning-dark);
    --uix-button-active-background: var(--color-warning-darker);
    --uix-button-color: var(
      --uix-button-warning-color,
      var(--uix-button-text-color, #fff)
    );
  }

  &[outline] {
    color: var(--text-color);
    --uix-button-background: transparent;
    --uix-button-border-width: 2px;
    --uix-button-hover-color: var(--color-inverse);

    &[primary],
    &[variant="primary"] {
      --uix-button-border-color: var(--color-primary);
      --uix-button-hover-background: var(--color-primary);
      --uix-button-hover-border-color: var(--color-primary);
    }

    &[secondary],
    &[variant="secondary"] {
      --uix-button-border-color: var(--color-secondary);
      --uix-button-hover-background: var(--color-secondary);
      --uix-button-hover-border-color: var(--color-secondary);
    }

    &[danger],
    &[variant="danger"] {
      --uix-button-border-color: var(--color-danger);
      --uix-button-hover-background: var(--color-danger);
      --uix-button-hover-border-color: var(--color-danger);
    }

    &[success],
    &[variant="success"] {
      --uix-button-border-color: var(--color-success);
      --uix-button-hover-background: var(--color-success);
      --uix-button-hover-border-color: var(--color-success);
    }

    &[warning],
    &[variant="warning"] {
      --uix-button-border-color: var(--color-warning);
      --uix-button-hover-background: var(--color-warning);
      --uix-button-hover-border-color: var(--color-warning);
    }
  }

  &[border] {
    --uix-button-background: var(--color-surface);
    --uix-button-color: var(--text-color);
    --uix-button-border-color: var(--border-color, #404040);
    --uix-button-hover-background: var(--color-surface-light);
    --uix-button-active-background: var(--color-surface-lighter);
  }

  &[ghost] {
    color: var(--text-color);
    --uix-button-background: transparent;
    --uix-button-border-color: transparent;
    --uix-button-hover-background: var(--color-surface-dark);
    --uix-button-hover-color: var(--text-color);

    &[primary],
    &[variant="primary"] {
      --uix-button-hover-background: color-mix(
        in srgb,
        var(--color-primary),
        transparent 85%
      );
    }

    &[secondary],
    &[variant="secondary"] {
      --uix-button-hover-background: color-mix(
        in srgb,
        var(--color-secondary),
        transparent 85%
      );
    }

    &[danger],
    &[variant="danger"] {
      --uix-button-hover-background: color-mix(
        in srgb,
        var(--color-danger),
        transparent 85%
      );
    }

    &[success],
    &[variant="success"] {
      --uix-button-hover-background: color-mix(
        in srgb,
        var(--color-success),
        transparent 85%
      );
    }

    &[warning],
    &[variant="warning"] {
      --uix-button-hover-background: color-mix(
        in srgb,
        var(--color-warning),
        transparent 85%
      );
    }
  }

  &[flat] {
    --uix-button-shadow: none;
    --uix-button-border-color: transparent;
    --uix-button-border-width: 0;
    --uix-button-hover-shadow: none;
    --uix-button-active-shadow: none;
    --uix-button-hover-translate-x: 0;
    --uix-button-hover-translate-y: 0;
    --uix-button-active-translate-x: 0;
    --uix-button-active-translate-y: 0;
  }

  &[size="xs"] {
    --uix-button-height: 1.5rem;
    --uix-button-padding-x: 0.5rem;
    --uix-button-font-size: var(--uix-button-xs-font-size, 0.6rem);
    --uix-button-gap: 0.25rem;
  }

  &[size="sm"] {
    --uix-button-height: 2rem;
    --uix-button-padding-x: 0.8rem;
    --uix-button-font-size: var(--uix-button-sm-font-size, 0.8rem);
    --uix-button-gap: 0.375rem;
  }

  &[size="md"] {
    --uix-button-height: 2.5rem;
    --uix-button-padding-x: 1.25rem;
    --uix-button-font-size: var(--uix-button-md-font-size, 0.9rem);
    --uix-button-gap: 0.5rem;
  }

  &[size="lg"] {
    --uix-button-height: 3rem;
    --uix-button-padding-x: 1.5rem;
    --uix-button-font-size: var(--uix-button-lg-font-size, 1.1rem);
    --uix-button-gap: 0.625rem;
  }

  &[size="xl"] {
    --uix-button-height: 3.5rem;
    --uix-button-padding-x: 2rem;
    --uix-button-font-size: var(--uix-button-xl-font-size, 1.25rem);
    --uix-button-gap: 0.75rem;
  }

  &[w-full],
  &[wfull] {
    width: 100%;
    display: flex;
  }
}


:where(.uix-calendar, uix-calendar) {
  display: block;

  &::part(view-toggle) {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  &::part(toggle-btn) {
    flex: 1;
    padding: 0.5rem 1rem;
    font-weight: 900;
    font-size: 0.875rem;
    text-transform: uppercase;
    border: 3px solid var(--uix-calendar-border-color, black);
    border-radius: var(--uix-calendar-border-radius, var(--radius-lg, 0.75rem));
    background: white;
    box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 1);
    cursor: pointer;
    transition: all 0.15s ease;

    &:active {
      transform: translate(2px, 2px);
      box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 1);
    }
  }

  &::part(toggle-btn-active) {
    background: var(--uix-calendar-selected-bg, var(--color-accent, #f472b6));
  }

  &::part(header) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
  }

  &::part(nav-btn) {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 3px solid var(--uix-calendar-border-color, black);
    border-radius: 0.5rem;
    box-shadow: var(--uix-calendar-shadow, 4px 4px 0px 0px rgba(0, 0, 0, 1));
    cursor: pointer;
    transition: all 0.15s ease;

    &:active {
      transform: translate(2px, 2px);
      box-shadow: var(--uix-calendar-shadow-sm, 2px 2px 0px 0px rgba(0, 0, 0, 1));
    }
  }

  &::part(month-label) {
    font-size: 1.125rem;
    font-weight: 900;
    text-transform: uppercase;
  }

  &::part(today-btn) {
    width: 100%;
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
    background: #f9a8d4;
    border: 3px solid var(--uix-calendar-border-color, black);
    border-radius: var(--uix-calendar-border-radius, var(--radius-lg, 0.75rem));
    font-weight: 900;
    font-size: 0.875rem;
    text-transform: uppercase;
    box-shadow: var(--uix-calendar-shadow, 4px 4px 0px 0px rgba(0, 0, 0, 1));
    cursor: pointer;
    transition: all 0.15s ease;

    &:active {
      transform: translate(2px, 2px);
      box-shadow: var(--uix-calendar-shadow-sm, 2px 2px 0px 0px rgba(0, 0, 0, 1));
    }
  }

  &::part(grid) {
    background: white;
    border: 3px solid var(--uix-calendar-border-color, black);
    border-radius: var(--uix-calendar-border-radius, var(--radius-lg, 0.75rem));
    padding: 0.75rem;
    box-shadow: 6px 6px 0px 0px rgba(0, 0, 0, 1);
  }

  &::part(weekday-header) {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
    margin-bottom: 0.5rem;
  }

  &::part(weekday) {
    text-align: center;
    font-weight: 900;
    font-size: 0.75rem;
    color: #4b5563;
  }

  &::part(days-grid) {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
  }

  &::part(day) {
    aspect-ratio: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.25rem;
    border-radius: 0.5rem;
    border: 2px solid #d1d5db;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.15s ease;

    &:active {
      transform: translate(1px, 1px);
    }
  }

  &::part(day-today) {
    background: var(--uix-calendar-today-bg, #fef3c7);
    border-color: var(--uix-calendar-today-border, #eab308);
    border-width: 3px;
  }

  &::part(day-selected) {
    background: var(--uix-calendar-selected-bg, var(--color-accent, #f472b6));
    border-color: var(--uix-calendar-border-color, black);
    border-width: 3px;
    box-shadow: var(--uix-calendar-shadow-sm, 2px 2px 0px 0px rgba(0, 0, 0, 1));
  }

  &::part(day-other-month) {
    opacity: 0.4;
  }

  &::part(day-number) {
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.125rem;
  }

  &::part(day-events) {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  &::part(event) {
    font-size: 9px;
    line-height: 1.1;
    font-weight: 700;
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    border: 1px solid var(--uix-calendar-border-color, black);
    background: #e0e7ff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &::part(more-events) {
    font-size: 8px;
    font-weight: 700;
    color: #4b5563;
    padding: 0 0.25rem;
  }

  &::part(list) {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  &::part(list-section-title) {
    font-size: 0.875rem;
    font-weight: 900;
    text-transform: uppercase;
    color: #4b5563;
    margin-bottom: 0.75rem;
  }

  &::part(list-item) {
    display: flex;
    gap: 1rem;
    background: white;
    border: 3px solid var(--uix-calendar-border-color, black);
    border-radius: var(--uix-calendar-border-radius, var(--radius-lg, 0.75rem));
    padding: 1rem;
    box-shadow: var(--uix-calendar-shadow, 4px 4px 0px 0px rgba(0, 0, 0, 1));
    cursor: pointer;
    transition: all 0.15s ease;

    &:hover {
      transform: translate(2px, 2px);
      box-shadow: var(--uix-calendar-shadow-sm, 2px 2px 0px 0px rgba(0, 0, 0, 1));
    }
  }

  &::part(list-item-image) {
    width: 5rem;
    height: 5rem;
    object-fit: cover;
    border-radius: 0.5rem;
    border: 2px solid var(--uix-calendar-border-color, black);
  }

  &::part(list-item-title) {
    font-weight: 900;
    font-size: 0.875rem;
    line-height: 1.25;
  }

  &::part(list-item-meta) {
    font-size: 0.75rem;
    color: #4b5563;
    margin-top: 0.25rem;
  }

  &::part(recurring-badge) {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    background: #ddd6fe;
    border: 1px solid var(--uix-calendar-border-color, black);
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
  }

  &::part(panel-overlay) {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 40;
  }

  &::part(panel) {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 3px solid var(--uix-calendar-border-color, black);
    border-radius: 1rem 1rem 0 0;
    z-index: 50;
    max-height: 70vh;
    overflow-y: auto;
  }

  &::part(panel-header) {
    position: sticky;
    top: 0;
    background: white;
    border-bottom: 2px solid var(--uix-calendar-border-color, black);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &::part(panel-title) {
    font-weight: 900;
    font-size: 1.125rem;
  }

  &::part(panel-close) {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--uix-calendar-border-color, black);
    border-radius: 0.5rem;
    background: white;
    cursor: pointer;

    &:hover {
      background: #f3f4f6;
    }
  }

  &::part(panel-content) {
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  &::part(panel-item) {
    display: flex;
    gap: 0.75rem;
    background: #f9fafb;
    border: 2px solid var(--uix-calendar-border-color, black);
    border-radius: var(--uix-calendar-border-radius, var(--radius-lg, 0.75rem));
    padding: 0.75rem;
    cursor: pointer;
    box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 1);
    transition: all 0.15s ease;

    &:hover {
      transform: translate(2px, 2px);
      box-shadow: none;
    }
  }

  &::part(panel-item-image) {
    width: 4rem;
    height: 4rem;
    object-fit: cover;
    border-radius: 0.5rem;
    border: 2px solid var(--uix-calendar-border-color, black);
  }

  &::part(panel-item-title) {
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 1.25;
  }

  &::part(panel-item-meta) {
    font-size: 0.75rem;
    color: #4b5563;
    margin-top: 0.25rem;
  }

  &::part(panel-empty) {
    text-align: center;
    font-size: 0.875rem;
    font-weight: 700;
    color: #9ca3af;
    padding: 2rem 0;
  }

  &::part(empty) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 0;

    .empty-icon {
      font-size: 3.75rem;
      margin-bottom: 1rem;
    }

    .empty-text {
      font-size: 1.125rem;
      font-weight: 700;
      color: #9ca3af;
    }
  }
}


:where(.uix-card, uix-card) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  --uix-container-background: var(--uix-card-background, var(--color-surface));
  --uix-container-border-color: var(--uix-card-border, var(--border-color));
  --uix-container-border-radius: var(
    --uix-card-border-radius,
    var(--radius-md, 0.75rem)
  );

  --uix-container-padding-none: 0;
  --uix-container-padding-xs: 0;
  --uix-container-padding-sm: 0;
  --uix-container-padding-md: 0;
  --uix-container-padding-lg: 0;

  --uix-card-padding-xs: 0.6rem;
  --uix-card-padding-sm: 1rem;
  --uix-card-padding-md: 1.3rem;
  --uix-card-padding-lg: 1.8rem;

  &::part(body) {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  > [slot="header"] {
    margin: 0;
    display: flex;
    padding: var(--uix-card-header-padding, var(--uix-card-padding-sm));
    border-bottom-width: var(--uix-card-header-border-width, 0);
    border-bottom-style: solid;
    border-bottom-color: var(
      --uix-card-header-border-color,
      var(--border-color)
    );
    background: var(--uix-card-header-background-color, transparent);
  }

  > [slot="footer"] {
    display: flex;
    padding: var(--uix-card-footer-padding, var(--uix-card-padding-sm));
    border-top-width: var(--uix-card-footer-border-width, 0);
    border-top-style: var(--uix-card-footer-border-style, solid);
    border-top-color: var(--uix-card-footer-border-color, var(--border-color));
    background: var(--uix-card-footer-background-color, transparent);
    flex-direction: row;
    gap: var(--spacing-sm, 0.5rem);
    align-items: center;
    justify-content: var(--uix-card-footer-justify, flex-end);
  }

  &[style*="--uix-card-gradient-from"]::part(body) {
    background: linear-gradient(
      135deg,
      var(--uix-card-gradient-from),
      var(--uix-card-linear-to, var(--uix-card-gradient-from))
    );
  }

  &[padding="none"] {
    --uix-card-header-padding: 0;
    --uix-card-footer-padding: 0;
  }
  &[padding="none"]::part(body) {
    padding: 0;
  }

  &[padding="xs"] {
    --uix-card-header-padding: var(--uix-card-padding-xs);
    --uix-card-footer-padding: var(--uix-card-padding-xs);
  }
  &[padding="xs"]::part(body) {
    padding: var(--uix-card-padding-xs);
  }

  &[padding="sm"] {
    --uix-card-header-padding: var(--uix-card-padding-sm);
    --uix-card-footer-padding: var(--uix-card-padding-sm);
  }
  &[padding="sm"]::part(body) {
    padding: var(--uix-card-padding-sm);
  }

  &[padding="md"] {
    --uix-card-header-padding: var(--uix-card-padding-md);
    --uix-card-footer-padding: var(--uix-card-padding-md);
  }
  &[padding="md"]::part(body) {
    padding: var(--uix-card-padding-md);
  }

  &[padding="lg"] {
    --uix-card-header-padding: var(--uix-card-padding-lg);
    --uix-card-footer-padding: var(--uix-card-padding-lg);
  }
  &[padding="lg"]::part(body) {
    padding: var(--uix-card-padding-lg);
  }

  &[borderWidth="none"] {
    border-width: 0;
  }

  &[borderWidth="1"] {
    border-width: 1px;
  }

  &[borderWidth="2"] {
    border-width: 2px;
  }

  &[borderWidth="3"] {
    border-width: 3px;
  }

  &[borderStyle="solid"] {
    border-style: solid;
  }

  &[borderStyle="dashed"] {
    border-style: dashed;
  }

  &[borderStyle="dotted"] {
    border-style: dotted;
  }

  &[gap="none"]::part(body) {
    gap: 0;
  }

  &[gap="xs"]::part(body) {
    gap: var(--spacing-xs, 0.25rem);
  }

  &[gap="sm"]::part(body) {
    gap: var(--spacing-sm, 0.5rem);
  }

  &[gap="md"]::part(body) {
    gap: var(--spacing-md, 0.75rem);
  }

  &[gap="lg"]::part(body) {
    gap: var(--spacing-lg, 1rem);
  }

  &[gap="xl"]::part(body) {
    gap: var(--spacing-xl, 1.5rem);
  }

  &[shadow="sm"] {
    box-shadow: var(
      --uix-card-shadow,
      var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05))
    );
  }

  &[shadow="md"] {
    box-shadow: var(
      --uix-card-shadow,
      var(
        --shadow-md,
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06)
      )
    );
  }

  &[shadow="lg"] {
    box-shadow: var(
      --uix-card-shadow,
      var(
        --shadow-lg,
        0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05)
      )
    );
  }

  &[hover] {
    transition: all 200ms ease;
    cursor: pointer;

    &:hover {
      border-color: var(--uix-card-border-hover, var(--color-primary));
      box-shadow: var(
        --uix-card-hover-shadow,
        var(--uix-card-shadow-size, 0 0 0 0)
          var(--uix-card-border-hover, var(--color-primary))
      );
      transform: translate(
        var(--uix-card-hover-translate-x, 0),
        var(--uix-card-hover-translate-y, 0)
      );
    }

    &:active {
      box-shadow: var(--uix-card-active-shadow, none);
      transform: translate(
        var(--uix-card-active-translate-x, 0),
        var(--uix-card-active-translate-y, 0)
      );
    }
  }

  &[variant="filled"] {
    --uix-container-background: var(--color-surface-light);
    --uix-container-border-color: var(--color-surface);
  }

  &[variant="outlined"] {
    --uix-container-background: transparent;
    --uix-container-border-color: var(--color-surface);
  }

  &[variant="elevated"] {
    --uix-container-background: var(--color-surface-lighter);
    --uix-container-border-color: var(--color-surface-dark);
    box-shadow:
      0 1px 3px rgba(0, 0, 0, 0.12),
      0 1px 2px rgba(0, 0, 0, 0.24);

    &:hover {
      box-shadow:
        0 3px 6px rgba(0, 0, 0, 0.16),
        0 3px 6px rgba(0, 0, 0, 0.23);
      transition: box-shadow 0.3s ease;
    }
  }
}


:where(.uix-checkbox, uix-checkbox) {
  display: inline-flex;
  align-items: center;
  gap: var(--uix-checkbox-gap, 0.5rem);

  &:has(.checkbox:disabled) {
    cursor: not-allowed;
    opacity: 0.6;
  }

  .checkbox {
    appearance: none;
    width: var(--uix-checkbox-size, 1.5rem);
    height: var(--uix-checkbox-size, 1.5rem);
    border: var(--uix-checkbox-border-width, 2px) solid var(--uix-checkbox-border-color, var(--color-primary));
    border-radius: var(--uix-checkbox-border-radius, var(--radius-md, 0.375rem));
    background-color: var(--uix-checkbox-background-color, var(--color-surface));
    box-shadow: var(--uix-checkbox-shadow, none);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
    position: relative;
    flex-shrink: 0;

    &:hover:not(:disabled) {
      border-color: var(--uix-checkbox-hover-border-color, var(--color-primary));
    }

    &:checked {
      background-color: var(--uix-checkbox-checked-background-color, var(--color-primary));
      border-color: var(--uix-checkbox-checked-border-color, var(--color-primary));

      &::after {
        content: "";
        position: absolute;
        left: 30%;
        top: 10%;
        width: 30%;
        height: 60%;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
      }
    }

    &:indeterminate {
      background-color: var(--uix-checkbox-checked-background-color, var(--color-primary));
      border-color: var(--uix-checkbox-checked-border-color, var(--color-primary));

      &::after {
        content: "";
        position: absolute;
        left: 20%;
        top: 45%;
        width: 60%;
        height: 2px;
        background-color: white;
      }
    }

    &:focus-visible {
      outline: 2px solid var(--uix-checkbox-focus-outline-color, var(--color-primary));
      outline-offset: 2px;
    }

    &:disabled {
      cursor: not-allowed;
      background-color: var(--uix-checkbox-disabled-background-color, var(--color-subtle));
    }
  }

  .checkbox-label {
    color: var(--uix-checkbox-label-color, var(--text-color));
    font-size: var(--uix-checkbox-label-font-size, var(--text-base, 1rem));
    font-weight: var(--uix-checkbox-label-font-weight, var(--font-medium, 500));
    line-height: var(--leading-normal, 1.5);
    cursor: pointer;
    user-select: none;
  }

  .checkbox-required {
    color: var(--color-danger, #ef4444);
    margin-left: 0.25rem;
  }

  &[size="xs"] {
    --uix-checkbox-size: 1rem;
    --uix-checkbox-label-font-size: var(--text-xs, 0.75rem);
    --uix-checkbox-gap: 0.375rem;
  }

  &[size="sm"] {
    --uix-checkbox-size: 1.25rem;
    --uix-checkbox-label-font-size: var(--text-sm, 0.875rem);
    --uix-checkbox-gap: 0.5rem;
  }

  &[size="md"] {
    --uix-checkbox-size: 1.5rem;
    --uix-checkbox-label-font-size: var(--text-base, 1rem);
    --uix-checkbox-gap: 0.5rem;
  }

  &[size="lg"] {
    --uix-checkbox-size: 1.75rem;
    --uix-checkbox-label-font-size: var(--text-lg, 1.125rem);
    --uix-checkbox-gap: 0.625rem;
  }

  &[size="xl"] {
    --uix-checkbox-size: 2rem;
    --uix-checkbox-label-font-size: var(--text-xl, 1.25rem);
    --uix-checkbox-gap: 0.75rem;
  }

  &[variant="primary"] .checkbox:checked,
  &[variant="primary"] .checkbox:indeterminate {
    --uix-checkbox-checked-background-color: var(--color-primary);
    --uix-checkbox-checked-border-color: var(--color-primary);
  }

  &[variant="secondary"] .checkbox:checked,
  &[variant="secondary"] .checkbox:indeterminate {
    --uix-checkbox-checked-background-color: var(--color-secondary);
    --uix-checkbox-checked-border-color: var(--color-secondary);
  }

  &[variant="success"] .checkbox:checked,
  &[variant="success"] .checkbox:indeterminate {
    --uix-checkbox-checked-background-color: var(--color-success);
    --uix-checkbox-checked-border-color: var(--color-success);
  }

  &[variant="warning"] .checkbox:checked,
  &[variant="warning"] .checkbox:indeterminate {
    --uix-checkbox-checked-background-color: var(--color-warning);
    --uix-checkbox-checked-border-color: var(--color-warning);
  }

  &[variant="error"] .checkbox:checked,
  &[variant="error"] .checkbox:indeterminate {
    --uix-checkbox-checked-background-color: var(--color-danger);
    --uix-checkbox-checked-border-color: var(--color-danger);
  }
}


:where(.uix-collection, uix-collection) {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .uix-collection-switcher {
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent);

    button {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.3rem 0.6rem;
      border: 1px solid transparent;
      border-radius: 0.35rem;
      background: transparent;
      color: inherit;
      font-size: 0.8rem;
      text-transform: capitalize;
      cursor: pointer;
      opacity: 0.65;
    }

    button:hover {
      opacity: 1;
      background: color-mix(in srgb, currentColor 6%, transparent);
    }

    button.active {
      opacity: 1;
      border-color: color-mix(in srgb, currentColor 15%, transparent);
      background: color-mix(in srgb, currentColor 8%, transparent);
    }
  }

  .uix-collection-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .uix-collection-body > * {
    flex: 1;
    min-height: 0;
  }
}


.cm-scroller {
	overflow: auto !important;
}

.cm-editor {
	width: 100%;
}


:where(.uix-divider, uix-divider),
.split-pane::part(divider) {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0;
  width: 100%;
  height: var(--uix-divider-size, 2px);

  span {
    padding: 0 0.75rem;
    font-weight: bold;
    font-size: var(--uix-divider-font-size, 1.5rem);
  }

  &[resizable] {
    cursor: row-resize;

    &[vertical] {
      cursor: col-resize;
    }
  }

  &::before,
  &::after {
    content: "";
    flex-grow: 1;
    height: var(--uix-divider-size, 2px);
    background-color: var(--uix-divider-color, rgba(0, 0, 0, 0.05));
  }

  &[label] {
    padding: var(--uix-divider-padding, 1rem) 0;

    &::before,
    &::after {
      flex-grow: 1;
    }
  }

  &[vertical] {
    flex-direction: column;
    width: 1px;
    height: 100%;
    background-color: transparent;

    &::before,
    &::after {
      width: 1px;
      height: auto;
    }

    &[label] {
      padding: 0 var(--uix-divider-padding, 1rem);
    }
  }
}


:where(.uix-draggable, uix-draggable) {
  --uix-draggable-height: auto;
  transition:
    transform 0.6s ease,
    opacity 0.6s ease;
  will-change: transform;

  &.dragging {
    opacity: 0.1;
  }
}


:where(.uix-drawer, uix-drawer) {

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--uix-drawer-z-index, 1000);
  pointer-events: none;

  &[open] {
    pointer-events: auto;
    display: flex;
  }

  &::part(backdrop) {
    display: none;
    pointer-events: none;
  }

  &[open]::part(backdrop) {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--uix-drawer-overlay-background, rgba(0, 0, 0, 0.6));
    backdrop-filter: var(--uix-drawer-overlay-blur, blur(2px));
    z-index: var(--uix-drawer-overlay-z-index, 100);
    animation: drawer-backdrop-fade-in var(--uix-drawer-animation-duration, 0.25s) ease-out;
    cursor: pointer;
    pointer-events: auto;
  }

  &::part(panel) {
    position: absolute;
    background-color: var(--uix-drawer-background, var(--color-surface-light, #ffffff));
    box-shadow: var(--uix-drawer-shadow, var(--shadow-xl, 0 0 30px rgba(0, 0, 0, 0.4)));
    border: var(--uix-drawer-border-width, 0) solid var(--uix-drawer-border-color, var(--color-surface));
    z-index: var(--uix-drawer-panel-z-index, 1001);
    overflow-y: auto;
    overflow-x: hidden;
    transition: var(
      --uix-drawer-transition,
      transform var(--uix-drawer-animation-duration, 0.3s) ease-in-out,
      opacity var(--uix-drawer-animation-duration, 0.3s) ease-in-out
    );
    opacity: 0;
    pointer-events: none;
  }

  &[open]::part(panel) {
    opacity: 1;
    pointer-events: auto;
  }

  &::part(header) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--uix-drawer-header-padding, var(--spacing-md, 0.75rem) var(--spacing-lg, 1rem));
    border-bottom: var(--uix-drawer-header-border-width, var(--border-width, 1px)) solid var(--uix-drawer-header-border-color, var(--color-surface));
    background: var(--uix-drawer-header-background, transparent);
    font-size: var(--uix-drawer-header-font-size, var(--text-lg, 1.125rem));
    font-weight: var(--uix-drawer-header-font-weight, var(--font-semibold, 600));
    color: var(--uix-drawer-header-color, var(--text-color));
  }

  &::part(body) {
    flex: 1;
    padding: var(--uix-drawer-body-padding, var(--spacing-lg, 1rem));
    overflow-y: auto;
    color: var(--uix-drawer-body-color, var(--text-color));
  }

  &::part(footer) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--uix-drawer-footer-gap, var(--spacing-sm, 0.5rem));
    padding: var(--uix-drawer-footer-padding, var(--spacing-md, 0.75rem) var(--spacing-lg, 1rem));
    border-top: var(--uix-drawer-footer-border-width, var(--border-width, 1px)) solid var(--uix-drawer-footer-border-color, var(--color-surface));
    background: var(--uix-drawer-footer-background, transparent);
  }

  &:not([position]),
  &[position="left"] {
    &::part(panel) {
      top: 0;
      left: 0;
      bottom: 0;
      width: var(--uix-drawer-width, 280px);
      min-width: var(--uix-drawer-min-width, min(70%, 280px));
      max-width: var(--uix-drawer-max-width, 400px);
      height: 100%;
      transform: translateX(-100%);
      border-radius: 0 var(--uix-drawer-border-radius, 0) var(--uix-drawer-border-radius, 0) 0;
    }

    &[open]::part(panel) {
      transform: translateX(0);
    }
  }

  &[position="right"] {
    &::part(panel) {
      top: 0;
      right: 0;
      bottom: 0;
      width: var(--uix-drawer-width, 280px);
      min-width: var(--uix-drawer-min-width, min(70%, 280px));
      max-width: var(--uix-drawer-max-width, 400px);
      height: 100%;
      transform: translateX(100%);
      border-radius: var(--uix-drawer-border-radius, 0) 0 0 var(--uix-drawer-border-radius, 0);
    }

    &[open]::part(panel) {
      transform: translateX(0);
    }
  }

  &[position="top"] {
    &::part(panel) {
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: var(--uix-drawer-height, 50vh);
      min-height: var(--uix-drawer-min-height, 200px);
      max-height: var(--uix-drawer-max-height, 80vh);
      transform: translateY(-100%);
      border-radius: 0 0 var(--uix-drawer-border-radius, 0) var(--uix-drawer-border-radius, 0);
    }

    &[open]::part(panel) {
      transform: translateY(0);
    }
  }

  &[position="bottom"] {
    &::part(panel) {
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: var(--uix-drawer-height, 50vh);
      min-height: var(--uix-drawer-min-height, 200px);
      max-height: var(--uix-drawer-max-height, 80vh);
      transform: translateY(100%);
      border-radius: var(--uix-drawer-border-radius, 0) var(--uix-drawer-border-radius, 0) 0 0;
    }

    &[open]::part(panel) {
      transform: translateY(0);
    }
  }

  &[size="sm"] {
    --uix-drawer-width: 240px;
    --uix-drawer-height: 30vh;
  }

  &[size="md"] {
    --uix-drawer-width: 320px;
    --uix-drawer-height: 50vh;
  }

  &[size="lg"] {
    --uix-drawer-width: 400px;
    --uix-drawer-height: 70vh;
  }

  &[size="xl"] {
    --uix-drawer-width: 500px;
    --uix-drawer-height: 85vh;
  }

  &[size="full"] {
    --uix-drawer-width: 100%;
    --uix-drawer-height: 100vh;
    --uix-drawer-max-width: 100%;
    --uix-drawer-max-height: 100vh;
  }
}

@keyframes drawer-backdrop-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


:where(.uix-droparea, uix-droparea) {
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  will-change: transform;
  min-height: 100px;

  &[direction="horizontal"] {
    flex-direction: row;
  }

  &.over {
    background-color: rgba(0, 0, 0, 0.3);
  }

  &[orderable] {
    position: relative;
    min-height: 0;

    &.over {
      background-color: transparent;
    }

    &[data-dropping]::before {
      content: "";
      position: absolute;
      left: 8px;
      right: 8px;
      height: 2px;
      background: var(--color-primary, #fabd2f);
      border-radius: 1px;
      top: var(--drop-indicator-y, 0);
      pointer-events: none;
      z-index: 10;
    }

    &[direction="horizontal"][data-dropping]::before {
      top: 4px;
      bottom: 4px;
      left: var(--drop-indicator-x, 0);
      right: auto;
      width: 2px;
      height: auto;
    }
  }
}


:where(.uix-flex, uix-flex) {
  display: flex;
  flex-direction: var(--uix-flex-direction, row);
  gap: var(--uix-flex-gap);
  align-items: var(--uix-flex-align, stretch);
  justify-content: var(--uix-flex-justify, flex-start);
  flex-wrap: var(--uix-flex-wrap, nowrap);
  box-sizing: border-box;

  &[direction="row"] {
    --uix-flex-direction: row;
  }

  &[direction="column"] {
    --uix-flex-direction: column;
  }

  &[direction="row-reverse"] {
    --uix-flex-direction: row-reverse;
  }

  &[direction="column-reverse"] {
    --uix-flex-direction: column-reverse;
  }

  &[gap="none"] {
    --uix-flex-gap: 0;
  }

  &[gap="xs"] {
    --uix-flex-gap: var(--spacing-xs, 0.25rem);
  }

  &[gap="sm"] {
    --uix-flex-gap: var(--spacing-sm, 0.5rem);
  }

  &[gap="md"] {
    --uix-flex-gap: var(--spacing-md, 0.75rem);
  }

  &[gap="lg"] {
    --uix-flex-gap: var(--spacing-lg, 1rem);
  }

  &[gap="xl"] {
    --uix-flex-gap: var(--spacing-xl, 1.5rem);
  }

  &[gap="2xl"] {
    --uix-flex-gap: var(--spacing-2xl, 2rem);
  }

  &[gap="3xl"] {
    --uix-flex-gap: var(--spacing-3xl, 3rem);
  }

  &[align="start"] {
    --uix-flex-align: flex-start;
  }

  &[align="center"] {
    --uix-flex-align: center;
  }

  &[align="end"] {
    --uix-flex-align: flex-end;
  }

  &[align="stretch"] {
    --uix-flex-align: stretch;
  }

  &[align="baseline"] {
    --uix-flex-align: baseline;
  }

  &[justify="start"] {
    --uix-flex-justify: flex-start;
  }

  &[justify="center"] {
    --uix-flex-justify: center;
  }

  &[justify="end"] {
    --uix-flex-justify: flex-end;
  }

  &[justify="space-between"] {
    --uix-flex-justify: space-between;
  }

  &[justify="space-around"] {
    --uix-flex-justify: space-around;
  }

  &[justify="space-evenly"] {
    --uix-flex-justify: space-evenly;
  }

  &[wrap="wrap"] {
    --uix-flex-wrap: wrap;
  }

  &[wrap="nowrap"] {
    --uix-flex-wrap: nowrap;
  }

  &[wrap="wrap-reverse"] {
    --uix-flex-wrap: wrap-reverse;
  }

  &[responsive] {
    --uix-flex-direction: column;
    @media (min-width: 1024px) {
      --uix-flex-direction: row;
    }
  }

  > [flex-1] {
    flex: 1 1 0%;
    min-width: 0;
  }

  > [flex-auto] {
    flex: 1 1 auto;
  }

  > [flex-initial] {
    flex: 0 1 auto;
  }

  > [flex-none] {
    flex: none;
  }

  > [flex-grow] {
    flex-grow: 1;
  }

  > [flex-grow="0"] {
    flex-grow: 0;
  }

  > [flex-shrink] {
    flex-shrink: 1;
  }

  > [flex-shrink="0"] {
    flex-shrink: 0;
  }

  > [flex-basis="auto"] {
    flex-basis: auto;
  }

  > [flex-basis="0"] {
    flex-basis: 0;
  }

  > [align-self="start"] {
    align-self: flex-start;
  }

  > [align-self="center"] {
    align-self: center;
  }

  > [align-self="end"] {
    align-self: flex-end;
  }

  > [align-self="stretch"] {
    align-self: stretch;
  }

  > [w-full] {
    width: 100%;
  }

  > [hidden-below-lg] {
    display: none;
    @media (min-width: 1024px) {
      display: block;
    }
  }

  > [hidden-above-lg] {
    display: block;
    @media (min-width: 1024px) {
      display: none;
    }
  }
}


:where(.uix-grid, uix-grid) {
  display: block;

  &::part(container) {
    display: grid;
    gap: var(--uix-grid-gap, var(--spacing-md, 0.75rem));
    grid-template-columns: var(
      --uix-grid-cols,
      var(
        --uix-grid-columns,
        repeat(auto-fit, minmax(var(--uix-grid-min-column-width, 250px), 1fr))
      )
    );
    grid-template-rows: var(--uix-grid-rows, auto);
    align-items: var(--uix-grid-align, stretch);
    justify-items: var(--uix-grid-justify, start);
  }

  &[gap="none"]::part(container) {
    gap: 0;
  }

  &[gap="xs"]::part(container) {
    gap: var(--spacing-xs, 0.25rem);
  }

  &[gap="sm"]::part(container) {
    gap: var(--spacing-sm, 0.5rem);
  }

  &[gap="md"]::part(container) {
    gap: var(--spacing-md, 0.75rem);
  }

  &[gap="lg"]::part(container) {
    gap: var(--spacing-lg, 1rem);
  }

  &[gap="xl"]::part(container) {
    gap: var(--spacing-xl, 1.5rem);
  }

  &[gap="2xl"]::part(container) {
    gap: var(--spacing-2xl, 2rem);
  }

  &[gap="3xl"]::part(container) {
    gap: var(--spacing-3xl, 3rem);
  }

  &[align="start"]::part(container) {
    align-items: start;
  }

  &[align="center"]::part(container) {
    align-items: center;
  }

  &[align="end"]::part(container) {
    align-items: end;
  }

  &[align="stretch"]::part(container) {
    align-items: stretch;
  }

  &[justify="start"]::part(container) {
    justify-items: start;
  }

  &[justify="center"]::part(container) {
    justify-items: center;
  }

  &[justify="end"]::part(container) {
    justify-items: end;
  }

  &[justify="stretch"]::part(container) {
    justify-items: stretch;
  }

  &[columns="1"]::part(container) {
    grid-template-columns: repeat(1, 1fr);
  }

  &[columns="2"]::part(container) {
    grid-template-columns: repeat(2, 1fr);
  }

  &[columns="3"]::part(container) {
    grid-template-columns: repeat(3, 1fr);
  }

  &[columns="4"]::part(container) {
    grid-template-columns: repeat(4, 1fr);
  }

  &[columns="5"]::part(container) {
    grid-template-columns: repeat(5, 1fr);
  }

  &[columns="6"]::part(container) {
    grid-template-columns: repeat(6, 1fr);
  }

  &[columns="auto-fill"]::part(container) {
    grid-template-columns: repeat(
      auto-fill,
      minmax(var(--uix-grid-min-column-width, 250px), 1fr)
    );
  }
}


:where(.uix-heading, uix-heading) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
    font-family: var(--font-heading, var(--font-family));
    font-weight: var(--font-bold, 700);
    color: var(--text-color);
    line-height: var(--leading-tight, 1.2);
  }

  &[level="1"] h1 {
    font-size: var(--text-4xl, 2.25rem);
  }

  &[level="2"] h2 {
    font-size: var(--text-3xl, 1.875rem);
  }

  &[level="3"] h3 {
    font-size: var(--text-2xl, 1.5rem);
  }

  &[level="4"] h4 {
    font-size: var(--text-xl, 1.25rem);
  }

  &[level="5"] h5 {
    font-size: var(--text-lg, 1.125rem);
  }

  &[level="6"] h6 {
    font-size: var(--text-base, 1rem);
  }

  &[size="xs"] {
    h1, h2, h3, h4, h5, h6 {
      font-size: var(--text-xs, 0.75rem);
    }
  }

  &[size="sm"] {
    h1, h2, h3, h4, h5, h6 {
      font-size: var(--text-sm, 0.875rem);
    }
  }

  &[size="base"] {
    h1, h2, h3, h4, h5, h6 {
      font-size: var(--text-base, 1rem);
    }
  }

  &[size="lg"] {
    h1, h2, h3, h4, h5, h6 {
      font-size: var(--text-lg, 1.125rem);
    }
  }

  &[size="xl"] {
    h1, h2, h3, h4, h5, h6 {
      font-size: var(--text-xl, 1.25rem);
    }
  }

  &[size="2xl"] {
    h1, h2, h3, h4, h5, h6 {
      font-size: var(--text-2xl, 1.5rem);
    }
  }

  &[size="3xl"] {
    h1, h2, h3, h4, h5, h6 {
      font-size: var(--text-3xl, 1.875rem);
    }
  }

  &[size="4xl"] {
    h1, h2, h3, h4, h5, h6 {
      font-size: var(--text-4xl, 2.25rem);
    }
  }

  &[size="5xl"] {
    h1, h2, h3, h4, h5, h6 {
      font-size: var(--text-5xl, 3rem);
    }
  }

  &[transform="uppercase"] {
    h1, h2, h3, h4, h5, h6 {
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
  }

  &[weight="black"] {
    h1, h2, h3, h4, h5, h6 {
      font-weight: 900;
    }
  }
}


:where(.uix-icon, uix-icon) {
  display: inline-block;
  vertical-align: middle;
  width: var(--uix-icon-size, calc(var(--spacing, 0.25rem) * 4));
  height: var(--uix-icon-size, calc(var(--spacing, 0.25rem) * 4));

  svg {
    height: inherit;
    width: inherit;
  }

  &[solid] {
    stroke: currentColor;
    fill: currentColor;
  }

  &[color="primary"] {
    color: var(--color-primary);
  }

  &[color="secondary"] {
    color: var(--color-secondary);
  }

  &[color="success"] {
    color: var(--color-success);
  }

  &[color="danger"] {
    color: var(--color-danger);
  }

  &[color="warning"] {
    color: var(--color-warning);
  }

  &[color="info"] {
    color: var(--color-info);
  }

  &[color="inverse"] {
    color: var(--color-inverse);
  }

  &[size="xs"] {
    --uix-icon-size: calc(var(--spacing, 0.25rem) * 3);
  }

  &[size="sm"] {
    --uix-icon-size: calc(var(--spacing, 0.25rem) * 4);
  }

  &[size="md"] {
    --uix-icon-size: calc(var(--spacing, 0.25rem) * 6);
  }

  &[size="lg"] {
    --uix-icon-size: calc(var(--spacing, 0.25rem) * 8);
  }

  &[size="xl"] {
    --uix-icon-size: calc(var(--spacing, 0.25rem) * 10);
  }

  &[size="2xl"] {
    --uix-icon-size: calc(var(--spacing, 0.25rem) * 14);
  }

  &[size="3xl"] {
    --uix-icon-size: calc(var(--spacing, 0.25rem) * 20);
  }

  &[size="4xl"] {
    --uix-icon-size: calc(var(--spacing, 0.25rem) * 30);
  }
}


:where(.uix-icon-picker, uix-icon-picker) {
  &[data-open] {
    display: flex;
    flex-direction: column;
  }

  .picker-container {
    width: 320px;
    max-height: 400px;
    display: flex;
    flex-direction: column;
    background: var(--color-surface-darker, #1a1a1a);
    border: 1px solid var(--border-color, #333);
    border-radius: var(--radius-md, 0.375rem);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    overflow: hidden;
  }

  .picker-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color, #333);
  }

  .picker-tab {
    flex: 1;
    padding: 8px;
    background: none;
    border: none;
    color: var(--text-muted, #888);
    font-size: 13px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;

    &:hover {
      background: var(--color-surface-dark, rgba(255, 255, 255, 0.05));
    }

    &.active {
      color: var(--text-color, #ddd);
      border-bottom: 2px solid var(--color-primary, #fabd2f);
      margin-bottom: -1px;
    }
  }

  .picker-search {
    padding: 8px;
    border-bottom: 1px solid var(--border-color, #333);

    input {
      width: 100%;
      padding: 6px 8px;
      background: var(--color-surface-dark, #111);
      border: 1px solid var(--border-color, #333);
      border-radius: var(--radius-sm, 0.25rem);
      color: var(--text-color, #ddd);
      font-size: 13px;
      outline: none;

      &:focus {
        border-color: var(--color-primary, #fabd2f);
      }

      &::placeholder {
        color: var(--text-muted, #666);
      }
    }
  }

  .picker-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
    border-bottom: 1px solid var(--border-color, #333);
  }

  .category-pill {
    padding: 2px 8px;
    background: var(--color-surface-dark, #222);
    border: 1px solid var(--border-color, #333);
    border-radius: 999px;
    color: var(--text-muted, #888);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;

    &:hover {
      background: var(--color-surface-light, #333);
      color: var(--text-color, #ddd);
    }

    &.active {
      background: var(--color-primary, #fabd2f);
      color: var(--color-surface-darker, #111);
      border-color: var(--color-primary, #fabd2f);
    }
  }

  .picker-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    padding: 8px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
  }

  .emoji-grid {
    grid-template-columns: repeat(7, 1fr);
  }

  .picker-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 0.25rem);
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
    color: var(--text-color, #ddd);

    &:hover {
      background: var(--color-surface-light, #333);
      border-color: var(--border-color, #444);
    }

    &.selected {
      background: var(--color-primary, #fabd2f);
      color: var(--color-surface-darker, #111);
      border-color: var(--color-primary, #fabd2f);

      uix-icon {
        color: inherit;
      }
    }
  }

  .emoji-cell {
    font-size: 18px;
    line-height: 1;
  }

  .picker-empty {
    grid-column: 1 / -1;
    padding: 16px;
    text-align: center;
    color: var(--text-muted, #666);
    font-size: 13px;
  }
}


:where(.uix-input, uix-input) {

  display: inline-block;
  width: var(--uix-input-width, auto);
  box-sizing: border-box;

  .input-label {
    display: block;
    font-size: var(--uix-input-label-font-size, var(--text-sm, 0.875rem));
    font-weight: var(--uix-input-label-font-weight, var(--font-semibold, 600));
    margin-bottom: var(--uix-input-label-margin, 0.5rem);
    color: var(--uix-input-label-color, var(--text-color, #1a1a1a));
    letter-spacing: var(--uix-input-label-letter-spacing, 0);
    text-transform: var(--uix-input-label-text-transform, none);
  }

  .input-required {
    color: var(--color-danger, #ef4444);
    margin-left: 0.25rem;
  }

  input {
    width: 100%;
    height: var(--uix-input-height, 2.5rem);
    padding: var(--uix-input-padding-y, 0.5rem) var(--uix-input-padding-x, 0.75rem);
    font-size: var(--uix-input-font-size, var(--text-sm, 0.9rem));
    font-weight: var(--uix-input-font-weight, var(--font-normal, 400));
    line-height: var(--uix-input-line-height, 1.5rem);
    font-family: inherit;
    color: var(--uix-input-color, var(--text-color, inherit));
    box-sizing: border-box;

    background: var(--uix-input-background, var(--color-surface-light, #ffffff));
    border: var(--uix-input-border-width, var(--border-width, 1px)) solid
      var(--uix-input-border-color, var(--border-color, var(--color-surface, #e5e7eb)));
    border-radius: var(--uix-input-border-radius, var(--radius-md, 0.375rem));
    box-shadow: var(--uix-input-shadow, var(--shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)));
    outline: none;

    transition: var(
      --uix-input-transition,
      border-color 0.2s ease,
      background-color 0.2s ease,
      box-shadow 0.15s ease
    );

    &::placeholder {
      color: var(--uix-input-placeholder-color, var(--text-muted, #9ca3af));
      opacity: 1;
    }

    &:hover:not(:focus):not(:disabled) {
      border-color: var(--uix-input-hover-border-color, var(--color-primary-light));
    }

    &:focus {
      border-color: var(--uix-input-focus-border-color, var(--color-primary));
      background: var(--uix-input-focus-background, var(--uix-input-background));
      box-shadow: var(--uix-input-focus-shadow, 0 0 0 3px rgba(250, 189, 47, 0.1));
    }

    &:disabled {
      opacity: var(--uix-input-disabled-opacity, 0.6);
      background: var(--uix-input-disabled-background, var(--color-surface-dark));
      color: var(--uix-input-disabled-color, var(--text-muted));
      cursor: not-allowed;
    }

    &:read-only {
      background: var(--uix-input-readonly-background, var(--color-surface-dark));
      cursor: default;
    }
  }

  &[size="xs"] {
    --uix-input-height: 1.5rem;
    --uix-input-padding-y: 0.2rem;
    --uix-input-padding-x: 0.5rem;
    --uix-input-font-size: var(--text-xs, 0.75rem);
    --uix-input-line-height: 1rem;
    --uix-input-icon-size: 0.75rem;
  }

  &[size="sm"] {
    --uix-input-height: 2rem;
    --uix-input-padding-y: 0.3rem;
    --uix-input-padding-x: 0.6rem;
    --uix-input-font-size: var(--text-sm, 0.875rem);
    --uix-input-line-height: 1.25rem;
    --uix-input-icon-size: 0.875rem;
  }

  &[size="md"] {
    --uix-input-height: 2.5rem;
    --uix-input-padding-y: 0.5rem;
    --uix-input-padding-x: 0.75rem;
    --uix-input-font-size: var(--text-base, 1rem);
    --uix-input-line-height: 1.5rem;
    --uix-input-icon-size: 1rem;
  }

  &[size="lg"] {
    --uix-input-height: 3rem;
    --uix-input-padding-y: 0.625rem;
    --uix-input-padding-x: 1rem;
    --uix-input-font-size: var(--text-lg, 1.125rem);
    --uix-input-line-height: 1.75rem;
    --uix-input-icon-size: 1.25rem;
  }

  &[size="xl"] {
    --uix-input-height: 3.5rem;
    --uix-input-padding-y: 0.75rem;
    --uix-input-padding-x: 1.25rem;
    --uix-input-font-size: var(--text-xl, 1.25rem);
    --uix-input-line-height: 2rem;
    --uix-input-icon-size: 1.5rem;
  }

  &[required] input {
    border-left: 3px solid var(--uix-input-required-color, var(--color-warning));
  }

  &[error] {
    --uix-input-border-color: var(--color-danger);
    --uix-input-focus-border-color: var(--color-danger);
    --uix-input-focus-shadow: 0 0 0 3px rgba(251, 73, 52, 0.1);
  }

  &[success] {
    --uix-input-border-color: var(--color-success);
    --uix-input-focus-border-color: var(--color-success);
    --uix-input-focus-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
  }

  &[variant="primary"] {
    --uix-input-border-color: var(--color-primary);
    --uix-input-focus-border-color: var(--color-primary);
  }

  &[variant="secondary"] {
    --uix-input-border-color: var(--color-secondary);
    --uix-input-focus-border-color: var(--color-secondary);
  }

  &[variant="success"] {
    --uix-input-border-color: var(--color-success);
    --uix-input-focus-border-color: var(--color-success);
    --uix-input-focus-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
  }

  &[variant="warning"] {
    --uix-input-border-color: var(--color-warning);
    --uix-input-focus-border-color: var(--color-warning);
    --uix-input-focus-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
  }

  &[variant="error"] {
    --uix-input-border-color: var(--color-danger);
    --uix-input-focus-border-color: var(--color-danger);
    --uix-input-focus-shadow: 0 0 0 3px rgba(251, 73, 52, 0.1);
  }

  &[w-full],
  &[wfull],
  &[fullwidth] {
    width: 100%;
    display: block;
  }

  &:has(.uix-icon) {
    position: relative;

    .uix-icon {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: var(--uix-input-icon-offset, 0.75rem);
      width: var(--uix-input-icon-size, 1rem);
      height: var(--uix-input-icon-size, 1rem);
      color: var(--uix-input-icon-color, var(--text-muted));
      pointer-events: none;
    }

    input {
      padding-right: calc(
        var(--uix-input-icon-size, 1rem) +
        var(--uix-input-icon-offset, 0.75rem) *
        2
      );
    }
  }

  &:has(.uix-icon[left]) {
    .uix-icon {
      left: var(--uix-input-icon-offset, 0.75rem);
      right: auto;
    }

    input {
      padding-left: calc(
        var(--uix-input-icon-size, 1rem) +
        var(--uix-input-icon-offset, 0.75rem) *
        2
      );
      padding-right: var(--uix-input-padding-x, 0.75rem);
    }
  }
}


:where(.uix-join, uix-join) {
  display: inline-flex;
  flex-direction: row;
  --uix-join-border-radius: var(--radius-md, 0.375rem);
  border: var(--uix-input-border-width, 1px) solid var(--uix-input-border-color, var(--border-color));
  border-radius: var(--uix-join-border-radius);
  overflow: hidden;

  /* Remove borders from all children */
  > * {
    border: none;
    border-radius: 0;
    margin: 0;
    flex: 0 0 auto;
  }

  /* Remove borders from inner form elements */
  input,
  select,
  textarea,
  button {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  /* Separator line between children */
  > * + * {
    border-left: 1px solid var(--uix-input-border-color, var(--border-color));
  }

  /* Focus on entire container */
  &:focus-within {
    border-color: var(--uix-input-border-focus, var(--color-primary));
  }

  /* Vertical orientation */
  &[orientation="vertical"] {
    flex-direction: column;

    > * {
      width: 100%;
    }

    > * + * {
      border-left: none;
      border-top: 1px solid var(--uix-input-border-color, var(--border-color));
    }
  }
}


:where(.uix-kanban, uix-kanban) {
  display: flex;
  gap: 1rem;
  width: 100%;
  height: 100%;
  overflow-x: auto;
  padding: 0.5rem;

  .uix-kanban-column {
    display: flex;
    flex-direction: column;
    min-width: 16rem;
    max-width: 20rem;
    flex: 1 0 16rem;
    background: color-mix(in srgb, currentColor 4%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
    border-top: 2px solid var(--column-accent, color-mix(in srgb, currentColor 20%, transparent));
    border-radius: 0.5rem;
    overflow: hidden;
  }

  .uix-kanban-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.75;
  }

  .uix-kanban-count {
    margin-left: auto;
    font-size: 0.75rem;
    opacity: 0.6;
    font-weight: 400;
  }

  .uix-kanban-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.25rem 0.5rem;
    flex: 1;
    overflow-y: auto;
    min-height: 2rem;
  }

  .uix-kanban-card {
    display: block;
    padding: 0.5rem 0.6rem;
    cursor: pointer;
    font-size: 0.85rem;
  }

  .uix-kanban-footer {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent);

    input {
      width: 100%;
      background: transparent;
      border: none;
      outline: none;
      font-size: 0.85rem;
      color: inherit;
    }

    input::placeholder {
      opacity: 0.5;
    }
  }
}


:where(.uix-table, uix-table) {
  display: block;
  width: 100%;

  table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: var(--uix-table-border-width, var(--border-width, 1px)) solid var(--uix-table-border-color, var(--border-color, #e5e7eb));
    border-radius: var(--uix-table-border-radius, var(--radius-lg, 0.5rem));
    box-shadow: var(--uix-table-shadow, none);
    overflow: hidden;
  }

  thead {
    background-color: var(--uix-table-header-background, #f9fafb);
  }

  th {
    padding: var(--uix-table-cell-padding, 1rem);
    text-align: left;
    font-weight: var(--uix-table-header-font-weight, var(--font-semibold, 600));
    font-size: var(--uix-table-header-font-size, var(--text-xs, 0.75rem));
    text-transform: var(--uix-table-header-text-transform, uppercase);
    color: var(--uix-table-header-color, #374151);
    letter-spacing: 0.05em;
    border-bottom: var(--uix-table-border-width, var(--border-width, 1px)) solid var(--uix-table-border-color, var(--border-color, #e5e7eb));
  }

  tbody tr {
    background-color: var(--uix-table-row-background, #ffffff);
    transition: background-color 0.15s ease;
  }

  tbody tr:hover {
    background-color: var(--uix-table-row-hover-background, #f3f4f6);
  }

  tbody tr.clickable {
    cursor: pointer;
  }

  td {
    padding: var(--uix-table-cell-padding, 1rem);
    font-size: var(--uix-table-cell-font-size, var(--text-sm, 0.875rem));
    color: var(--uix-table-cell-color, #4b5563);
    border-bottom: var(--uix-table-border-width, var(--border-width, 1px)) solid var(--uix-table-border-color, var(--border-color, #e5e7eb));
  }

  tbody tr:last-child td {
    border-bottom: none;
  }
}


:where(.uix-label, uix-label) {
  display: block;

  .label {
    display: block;
    font-size: var(--uix-label-font-size, var(--text-sm, 0.875rem));
    font-weight: var(--uix-label-font-weight, var(--font-semibold, 600));
    margin-bottom: var(--uix-label-margin, 0.5rem);
    color: var(--uix-label-color, var(--text-color, #1a1a1a));
    letter-spacing: var(--uix-label-letter-spacing, 0);
    text-transform: var(--uix-label-text-transform, none);
    line-height: var(--uix-label-line-height, 1.4);
    cursor: pointer;
  }

  .label-required {
    color: var(--color-danger, #ef4444);
    margin-left: 0.25rem;
  }

  &[inline] {
    display: inline;

    .label {
      display: inline;
      margin-bottom: 0;
    }
  }

  &[size="xs"] {
    --uix-label-font-size: var(--text-xs, 0.75rem);
  }

  &[size="sm"] {
    --uix-label-font-size: var(--text-sm, 0.875rem);
  }

  &[size="md"] {
    --uix-label-font-size: var(--text-base, 1rem);
  }

  &[size="lg"] {
    --uix-label-font-size: var(--text-lg, 1.125rem);
  }

  &[size="xl"] {
    --uix-label-font-size: var(--text-xl, 1.25rem);
  }
}


:where(.uix-number-input, uix-number-input) {
  display: inline-block;
  width: 100%;

  .number-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
  }

  .number-input {
    width: 100%;
    font-family: inherit;
    font-size: var(--uix-input-font-size, var(--text-sm, 0.875rem));
    line-height: var(--uix-input-line-height, var(--leading-normal, 1.5));
    padding: var(--uix-input-padding-y, 0.5rem) var(--uix-input-padding-x, 0.75rem);
    padding-right: var(--uix-number-input-padding-right, 2.5rem);
    background-color: var(--uix-input-background-color, var(--color-surface));
    color: var(--uix-input-color, var(--color-primary));
    border: 1px solid var(--uix-input-border-color, var(--color-primary));
    border-radius: var(--uix-input-border-radius, var(--radius-md));
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;

    &:focus {
      border-color: var(--uix-input-focus-border-color, var(--color-primary));
      box-shadow: 0 0 0 3px var(--uix-input-focus-shadow-color, rgba(124, 111, 100, 0.1));
    }

    &:hover:not(:disabled):not(:focus) {
      border-color: var(--uix-input-hover-border-color, var(--color-hover));
    }

    &:disabled {
      background-color: var(--uix-input-disabled-background-color, var(--color-subtle));
      color: var(--uix-input-disabled-color, var(--color-muted));
      cursor: not-allowed;
      opacity: 0.6;
    }

    &[readonly] {
      background-color: var(--uix-input-readonly-background-color, var(--color-subtle));
      cursor: default;
    }

    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    &[type="number"] {
      -moz-appearance: textfield;
    }
  }

  .number-input-buttons {
    position: absolute;
    right: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 1px;
  }

  .number-input-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1rem;
    padding: 0;
    border: none;
    background-color: var(--uix-number-input-button-background, var(--color-hover));
    color: var(--uix-number-input-button-color, var(--color-secondary));
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;

    &:hover:not(:disabled) {
      background-color: var(--uix-number-input-button-hover-background, var(--color-surface-darker));
      color: var(--uix-number-input-button-hover-color, var(--color-primary));
    }

    &:active:not(:disabled) {
      transform: scale(0.95);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }

    uix-icon {
      width: 0.75rem;
      height: 0.75rem;
    }
  }

  &[size="xs"] .number-input {
    --uix-input-font-size: var(--text-xs, 0.75rem);
    --uix-input-padding-y: 0.25rem;
    --uix-input-padding-x: 0.5rem;
    --uix-number-input-padding-right: 2rem;
  }

  &[size="sm"] .number-input {
    --uix-input-font-size: var(--text-sm, 0.8125rem);
    --uix-input-padding-y: 0.375rem;
    --uix-input-padding-x: 0.625rem;
    --uix-number-input-padding-right: 2.25rem;
  }

  &[size="md"] .number-input {
    --uix-input-font-size: var(--text-sm, 0.875rem);
    --uix-input-padding-y: 0.5rem;
    --uix-input-padding-x: 0.75rem;
    --uix-number-input-padding-right: 2.5rem;
  }

  &[size="lg"] .number-input {
    --uix-input-font-size: var(--text-base, 1rem);
    --uix-input-padding-y: 0.625rem;
    --uix-input-padding-x: 1rem;
    --uix-number-input-padding-right: 3rem;
  }

  &[size="xl"] .number-input {
    --uix-input-font-size: var(--text-lg, 1.125rem);
    --uix-input-padding-y: 0.75rem;
    --uix-input-padding-x: 1.25rem;
    --uix-number-input-padding-right: 3.5rem;
  }

  &[show-buttons="false"] {
    .number-input {
      padding-right: var(--uix-input-padding-x, 0.75rem);
    }

    .number-input-buttons {
      display: none;
    }
  }
}


:where(.uix-switch, uix-switch) {
  display: inline-block;

  .switch-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;

    &:hover .switch-control:not(:has(.switch-native:disabled)) {
      opacity: 0.9;
    }

    &:has(.switch-native:disabled) {
      opacity: 0.5;
      cursor: not-allowed;
    }
  }

  .switch-label {
    font-size: 0.875rem;
    color: var(--text-color);
  }

  .switch-control {
    position: relative;
    width: 2.5rem;
    height: 1.5rem;
    background: var(--color-surface-dark, #3c3836);
    border-radius: var(--radius-full, 9999px);
    transition: background-color 0.2s ease;
    cursor: pointer;
    padding: 0.125rem;

    &:has(.switch-native:disabled) {
      cursor: not-allowed;
    }

    &:has(.switch-native:focus-visible) {
      outline: 2px solid var(--color-primary, #fabd2f);
      outline-offset: 2px;
    }
  }

  .switch-thumb {
    position: absolute;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--color-surface-darker, #282828);
    border-radius: var(--radius-full, 9999px);
    transition: transform 0.1s ease;
    top: 0.125rem;
    right: 0.125rem;
  }

  .switch-native {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;

    &:focus-visible ~ .switch-control {
      outline: 2px solid var(--color-primary, #fabd2f);
      outline-offset: 2px;
    }
  }

  &:has(.switch-native:checked) .switch-thumb {
    transform: translateX(-1rem);
  }

  &[disabled] {
    .switch-wrapper {
      opacity: 0.5;
      cursor: not-allowed;
    }

    .switch-control {
      cursor: not-allowed;
    }
  }

  &[size="xs"] {
    .switch-control {
      width: 1.75rem;
      height: 1rem;
      padding: 0.0625rem;
    }

    .switch-thumb {
      width: 0.875rem;
      height: 0.875rem;
      top: 0.0625rem;
      right: 0.0625rem;
    }

    &:has(.switch-native:checked) .switch-thumb {
      transform: translateX(-0.75rem);
    }
  }

  &[size="sm"] {
    .switch-control {
      width: 2rem;
      height: 1.25rem;
      padding: 0.125rem;
    }

    .switch-thumb {
      width: 1rem;
      height: 1rem;
      top: 0.125rem;
      right: 0.125rem;
    }

    &:has(.switch-native:checked) .switch-thumb {
      transform: translateX(-0.75rem);
    }
  }

  &[size="lg"] {
    .switch-control {
      width: 3rem;
      height: 1.75rem;
      padding: 0.125rem;
    }

    .switch-thumb {
      width: 1.5rem;
      height: 1.5rem;
      top: 0.125rem;
      right: 0.125rem;
    }

    &:has(.switch-native:checked) .switch-thumb {
      transform: translateX(-1.25rem);
    }
  }

  &[size="xl"] {
    .switch-control {
      width: 3.5rem;
      height: 2rem;
      padding: 0.125rem;
    }

    .switch-thumb {
      width: 1.75rem;
      height: 1.75rem;
      top: 0.125rem;
      right: 0.125rem;
    }

    &:has(.switch-native:checked) .switch-thumb {
      transform: translateX(-1.5rem);
    }
  }

  &[variant="primary"]:has(.switch-native:checked) .switch-control {
    background: var(--color-primary, #fabd2f);
  }

  &[variant="secondary"]:has(.switch-native:checked) .switch-control {
    background: var(--color-secondary, #83a598);
  }

  &[variant="success"]:has(.switch-native:checked) .switch-control {
    background: var(--color-success, #b8bb26);
  }

  &[variant="warning"]:has(.switch-native:checked) .switch-control {
    background: var(--color-warning, #fe8019);
  }

  &[variant="error"]:has(.switch-native:checked) .switch-control {
    background: var(--color-danger, #fb4934);
  }
}


:where(.uix-textarea, uix-textarea) {

  display: inline-block;
  width: var(--uix-textarea-width, 100%);
  box-sizing: border-box;

  .textarea-label {
    display: block;
    font-size: var(--uix-input-label-font-size, var(--text-sm, 0.875rem));
    font-weight: var(--uix-input-label-font-weight, var(--font-semibold, 600));
    margin-bottom: var(--uix-input-label-margin, 0.5rem);
    color: var(--uix-input-label-color, var(--text-color, #1a1a1a));
    letter-spacing: var(--uix-input-label-letter-spacing, 0);
    text-transform: var(--uix-input-label-text-transform, none);
  }

  .textarea-required {
    color: var(--color-danger, #ef4444);
    margin-left: 0.25rem;
  }

  textarea {
    width: 100%;
    min-height: var(--uix-textarea-min-height, 6rem);
    padding: var(--uix-input-padding-y, 0.5rem) var(--uix-input-padding-x, 0.75rem);
    box-sizing: border-box;

    background: var(--uix-input-background, var(--color-surface-light, #ffffff));
    border: var(--uix-input-border-width, var(--border-width, 1px)) solid var(--uix-input-border-color, var(--border-color, var(--color-surface, #e5e7eb)));
    border-radius: var(--uix-input-border-radius, var(--radius-md, 0.375rem));
    box-shadow: var(--uix-input-shadow, var(--shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)));

    transition: var(
      --uix-input-transition,
      border-color 0.2s ease,
      background-color 0.2s ease,
      box-shadow 0.15s ease
    );
    font-size: var(--uix-input-font-size, var(--text-sm, 0.9rem));
    font-weight: var(--uix-input-font-weight, var(--font-normal, 400));
    line-height: var(--uix-textarea-line-height, var(--leading-normal, 1.5));
    font-family: inherit;
    color: var(--uix-input-text, var(--uix-input-color, var(--text-color, inherit)));
    outline: none;
    resize: var(--uix-textarea-resize, vertical);

    &::placeholder {
      color: var(--uix-input-placeholder, var(--uix-input-placeholder-color, var(--text-muted, #9ca3af)));
      opacity: 1;
    }

    &:hover:not(:focus):not(:disabled) {
      border-color: var(--uix-input-hover-border-color, var(--color-primary-light));
    }

    &:focus {
      border-color: var(--uix-input-focus-border-color, var(--color-primary));
      background: var(--uix-input-focus-background, var(--uix-input-background));
      box-shadow: var(--uix-input-focus-shadow, 0 0 0 3px rgba(250, 189, 47, 0.1));
    }

    &:disabled {
      opacity: var(--uix-input-disabled-opacity, 0.6);
      background: var(--uix-input-disabled-background, var(--color-surface-dark));
      color: var(--uix-input-disabled-color, var(--text-muted));
      cursor: not-allowed;
    }

    &:read-only {
      background: var(--uix-input-readonly-background, var(--color-surface-dark));
      cursor: default;
    }
  }

  &[size="xs"] {
    --uix-input-padding-y: 0.25rem;
    --uix-input-padding-x: 0.5rem;
    --uix-input-font-size: var(--text-xs, 0.75rem);
    --uix-textarea-min-height: 3rem;
  }

  &[size="sm"] {
    --uix-input-padding-y: 0.375rem;
    --uix-input-padding-x: 0.625rem;
    --uix-input-font-size: var(--text-sm, 0.875rem);
    --uix-textarea-min-height: 4.5rem;
  }

  &[size="md"] {
    --uix-input-padding-y: 0.5rem;
    --uix-input-padding-x: 0.75rem;
    --uix-input-font-size: var(--text-base, 1rem);
    --uix-textarea-min-height: 6rem;
  }

  &[size="lg"] {
    --uix-input-padding-y: 0.625rem;
    --uix-input-padding-x: 1rem;
    --uix-input-font-size: var(--text-lg, 1.125rem);
    --uix-textarea-min-height: 7.5rem;
  }

  &[size="xl"] {
    --uix-input-padding-y: 0.75rem;
    --uix-input-padding-x: 1.25rem;
    --uix-input-font-size: var(--text-xl, 1.25rem);
    --uix-textarea-min-height: 9rem;
  }

  &[resize="none"] textarea {
    resize: none;
  }

  &[resize="both"] textarea {
    resize: both;
  }

  &[resize="horizontal"] textarea {
    resize: horizontal;
  }

  &[resize="vertical"] textarea {
    resize: vertical;
  }

  &[required] textarea {
    border-left: 3px solid var(--uix-input-required-color, var(--color-warning));
  }

  &[error] {
    --uix-input-border-color: var(--color-danger);
    --uix-input-focus-border-color: var(--color-danger);
    --uix-input-focus-shadow: 0 0 0 3px rgba(251, 73, 52, 0.1);
  }

  &[success] {
    --uix-input-border-color: var(--color-success);
    --uix-input-focus-border-color: var(--color-success);
    --uix-input-focus-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
  }

  &[variant="primary"] {
    --uix-input-border-color: var(--color-primary);
    --uix-input-focus-border-color: var(--color-primary);
  }

  &[variant="secondary"] {
    --uix-input-border-color: var(--color-secondary);
    --uix-input-focus-border-color: var(--color-secondary);
  }

  &[variant="success"] {
    --uix-input-border-color: var(--color-success);
    --uix-input-focus-border-color: var(--color-success);
    --uix-input-focus-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
  }

  &[variant="warning"] {
    --uix-input-border-color: var(--color-warning);
    --uix-input-focus-border-color: var(--color-warning);
    --uix-input-focus-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
  }

  &[variant="error"] {
    --uix-input-border-color: var(--color-danger);
    --uix-input-focus-border-color: var(--color-danger);
    --uix-input-focus-shadow: 0 0 0 3px rgba(251, 73, 52, 0.1);
  }

  &[w-full],
  &[wfull],
  &[fullwidth] {
    width: 100%;
    display: block;
  }
}


:where(.uix-markdown, uix-markdown) {
  display: block;
  overflow-y: auto;
  height: 100%;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--color-text-default);

  & > :first-child {
    margin-top: 0;
  }

  & > :last-child {
    margin-bottom: 0;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.3;
  }

  h1 {
    font-size: 1.75em;
    padding-bottom: 0.2em;
    border-bottom: 1px solid var(--border-color);
  }

  h2 {
    font-size: 1.4em;
    padding-bottom: 0.15em;
    border-bottom: 1px solid var(--border-color);
  }

  h3 {
    font-size: 1.2em;
  }

  h4 {
    font-size: 1.05em;
  }

  h5 {
    font-size: 1em;
  }

  h6 {
    font-size: 0.9em;
    color: var(--color-text-muted);
  }

  p {
    margin-bottom: 1em;
  }

  a {
    font-weight: 500;
    text-decoration: none;
    color: var(--color-primary);

    &:hover {
      text-decoration: underline;
    }
  }

  ul,
  ol {
    margin: 0 0 1em;
    padding-left: 2em;
  }

  ul {
    list-style-type: disc;
  }

  ul ul {
    list-style-type: circle;
  }

  ul ul ul {
    list-style-type: square;
  }

  ol {
    list-style-type: decimal;
  }

  li {
    margin-bottom: 0.25em;
  }

  li > ul,
  li > ol {
    margin-top: 0.25em;
    margin-bottom: 0;
  }

  /* Task lists (checkboxes) */
  li:has(> input[type="checkbox"]) {
    list-style: none;
    margin-left: -1.5em;
  }

  input[type="checkbox"] {
    margin-right: 0.5em;
    accent-color: var(--color-primary);
  }

  hr {
    border: 0;
    border-top: 1px solid var(--border-color);
    margin-block: 1.5em;
  }

  blockquote {
    margin: 0 0 1em;
    padding: 0.25em 1em;
    border-left: 3px solid var(--color-primary);
    color: var(--color-text-muted);

    & > :last-child {
      margin-bottom: 0;
    }
  }

  code {
    background-color: var(--color-surface-light, rgba(255, 255, 255, 0.06));
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.875em;
  }

  pre {
    background-color: var(--color-surface-dark, #1e1e1e);
    border: 1px solid var(--border-color);
    padding: 1em 1.25em;
    margin-block: 1em;
    border-radius: 6px;
    overflow-x: auto;
    white-space: pre-wrap;

    code {
      background-color: transparent;
      padding: 0;
      margin: 0;
      font-size: 0.875em;
      line-height: 1.6;
    }
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0 1.5em;
    font-size: 0.9em;
  }

  th,
  td {
    border: 1px solid var(--border-color);
    padding: 0.6em 1em;
    text-align: left;
  }

  thead th {
    font-weight: 600;
    background-color: var(--color-surface-light, rgba(255, 255, 255, 0.04));
  }

  tbody tr:nth-child(even) {
    background-color: var(--color-surface-light, rgba(255, 255, 255, 0.02));
  }

  img {
    max-width: 100%;
    border-radius: 6px;
  }

  strong {
    font-weight: 600;
  }

  del {
    color: var(--color-text-muted);
  }

  .wiki-link {
    color: var(--color-primary);
    cursor: pointer;
    border-bottom: 1px dashed var(--color-primary);
    text-decoration: none;
    padding: 0 2px;

    &:hover {
      border-bottom-style: solid;
    }
  }
}


:where(.uix-menu, uix-menu) {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  box-shadow: var(
    --uix-menu-shadow,
    var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.1))
  );

  &[size="sm"] {
    --uix-menu-item-font-size: var(--text-sm, 0.875rem);
    --uix-menu-item-padding: 0.375rem 0.75rem;
    --uix-menu-item-gap: 0.5rem;
  }

  &[size="md"] {
    --uix-menu-item-font-size: var(--text-sm, 0.875rem);
    --uix-menu-item-padding: 0.5rem 0.75rem;
    --uix-menu-item-gap: 0.75rem;
  }

  &[size="lg"] {
    --uix-menu-item-font-size: var(--text-base, 1rem);
    --uix-menu-item-padding: 0.625rem 1rem;
    --uix-menu-item-gap: 1rem;
  }

  > li[role="menuitem"] {
    list-style: none;
    margin: 0;
    padding: 0;

    > a,
    > button {
      display: flex;
      width: 100%;
      padding: var(--uix-menu-item-padding, 0.5rem 0.75rem);
      font-size: var(--uix-menu-item-font-size, var(--text-sm, 0.875rem));
      color: var(--dropdown-color, var(--text-color, default));
      text-decoration: none;
      background-color: transparent;
      border: none;
      cursor: pointer;
      transition:
        background-color 0.15s ease,
        color 0.15s ease;
      text-align: left;
      white-space: nowrap;

      &:hover {
        background-color: var(--color-primary, #fabd2f);
        color: var(--color-inverse, #282828);
      }

      &:active {
        background-color: var(--color-primary, #fabd2f);
        color: var(--color-inverse, #282828);
      }
    }
  }

  > li[role="separator"] {
    height: 1px;
    background-color: var(--panel-border, var(--dropdown-separator, #504945));
    margin: 0.25rem 0;
    padding: 0;
  }

  &[variant="bordered"]::part(container) {
    border-width: 2px;
  }

  &[variant="compact"] {
    --uix-menu-item-padding: 0.375rem 0.5rem;
  }

  &:not([rounded])::part(container) {
    border-radius: 0;
  }

  &:not([bordered])::part(container) {
    border: none;
  }

  &[variant="sidebar"] {
    box-shadow: none;
    background: transparent;
    padding: var(--uix-sidebar-nav-padding, 0);
    gap: var(--uix-sidebar-nav-gap, 0.25rem);

    > li {
      list-style: none;
      margin: 0;
      padding: 0;

      > a,
      > uix-link,
      > button {
        display: flex;
        align-items: center;
        gap: var(--uix-sidebar-item-gap, 0.75rem);
        width: 100%;
        padding: var(--uix-sidebar-item-padding, 0.75rem 1rem);
        border-radius: var(
          --uix-sidebar-item-border-radius,
          var(--radius-md, 0.5rem)
        );
        color: var(--uix-sidebar-item-color, var(--text-muted));
        font-weight: var(--uix-sidebar-item-font-weight, 500);
        font-size: var(--uix-menu-item-font-size, inherit);
        text-decoration: none;
        background: transparent;
        border: none;
        cursor: pointer;
        text-align: left;
        transition:
          background-color 0.2s ease,
          color 0.2s ease;

        &:hover {
          background-color: var(
            --uix-sidebar-item-hover-background,
            var(--color-surface-dark)
          );
          color: var(--uix-sidebar-item-hover-color, var(--text-color));
        }

        &.active,
        &[aria-current="page"] {
          background-color: var(
            --uix-sidebar-item-active-background,
            var(--color-surface-darker)
          );
          color: var(--uix-sidebar-item-active-color, var(--text-color));
          font-weight: var(--uix-sidebar-item-active-font-weight, 600);
        }
      }
    }

    > li.divider,
    > li[role="separator"] {
      height: 0;
      padding-top: var(--uix-sidebar-section-padding, 1rem);
      margin-top: var(--uix-sidebar-section-margin, 0.5rem);
      border-top: var(--border-width, 1px) solid
        var(--uix-sidebar-border-color, var(--color-surface-dark));
      background: none;
    }

    details {
      summary {
        display: flex;
        align-items: center;
        gap: var(--uix-sidebar-item-gap, 0.75rem);
        padding: var(--uix-sidebar-item-padding, 0.75rem 1rem);
        border-radius: var(
          --uix-sidebar-item-border-radius,
          var(--radius-md, 0.5rem)
        );
        color: var(--uix-sidebar-item-color, var(--text-muted));
        font-weight: var(--uix-sidebar-item-font-weight, 500);
        cursor: pointer;
        list-style: none;
        transition:
          background-color 0.2s ease,
          color 0.2s ease;

        &::-webkit-details-marker {
          display: none;
        }

        &:hover {
          background-color: var(
            --uix-sidebar-item-hover-background,
            var(--color-surface-dark)
          );
          color: var(--uix-sidebar-item-hover-color, var(--text-color));
        }

        .badge {
          display: inline-flex;
          align-items: center;
          padding: 0.1rem 0.4rem;
          font-size: 0.65rem;
          font-weight: 600;
          color: var(--text-muted);
          background: var(--color-surface-darker);
          border-radius: var(--radius-md, 0.375rem);
        }

        uix-icon:last-child {
          flex-shrink: 0;
          transition: transform 0.2s ease;
        }
      }

      &[open] summary uix-icon:last-child {
        transform: rotate(90deg);
      }

      > ul {
        list-style: none;
        margin: 0;
        padding: 0;
        padding-inline: var(--uix-sidebar-item-padding, 0.25rem);
        display: flex;
        flex-direction: column;
        gap: 0;

        > li {
          > a,
          > uix-link {
            display: flex;
            align-items: center;
            gap: var(--uix-sidebar-item-gap, 0.75rem);
            padding: var(--uix-sidebar-nested-item-padding, 0.375rem 1rem);
            border-radius: var(
              --uix-sidebar-item-border-radius,
              var(--radius-md, 0.5rem)
            );
            color: var(--uix-sidebar-item-color, var(--text-muted));
            font-size: var(--uix-sidebar-nested-item-font-size, 0.875rem);
            text-decoration: none;
            cursor: pointer;
            transition:
              background-color 0.2s ease,
              color 0.2s ease;

            &:hover {
              background-color: var(
                --uix-sidebar-item-hover-background,
                var(--color-surface-dark)
              );
              color: var(--uix-sidebar-item-hover-color, var(--text-color));
            }

            &.active,
            &[aria-current="page"] {
              background-color: var(
                --uix-sidebar-item-active-background,
                var(--color-surface-dark)
              );
              color: var(--uix-sidebar-item-active-color, var(--text-color));
              font-weight: 600;
            }
          }
        }
      }
    }
  }
}


:where(.uix-modal, uix-modal) {
  display: inline-block;

  &::part(dialog) {
    background: var(--uix-modal-background, #ffffff);
    border: var(--uix-modal-border-width, var(--border-width, 1px)) solid
      var(--uix-modal-border-color, var(--color-surface-darker));
    border-radius: var(--uix-modal-border-radius, var(--radius-lg, 0.75rem));
    box-shadow: var(--uix-modal-shadow, var(--shadow-xl, 0 25px 50px -12px rgb(0 0 0 / 0.25)));
    padding: 0;
    width: var(--uix-modal-width, 90vw);
    max-width: var(--uix-modal-max-width, 600px);
    color: var(--uix-modal-color, var(--text-color));

    &::backdrop {
      background: var(--uix-modal-overlay, rgba(0, 0, 0, 0.5));
      backdrop-filter: blur(2px);
    }
  }

  &[size="sm"] {
    --uix-modal-max-width: 400px;
  }
  &[size="md"] {
    --uix-modal-max-width: 600px;
  }
  &[size="lg"] {
    --uix-modal-max-width: 800px;
  }
  &[size="xl"] {
    --uix-modal-max-width: 1000px;
  }

  @media (max-width: 639px) {
    &::part(dialog) {
      width: 100%;
      max-width: 100%;
      height: 100%;
      max-height: 100%;
      margin: 0;
      border-radius: 0;
      border: none;
      box-shadow: none;
    }

    &::part(body) {
      max-height: none;
      flex: 1;
      overflow-y: auto;
    }
  }

  &::part(header) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--uix-modal-header-padding, 1.25rem 1.5rem);
    border-bottom: var(--uix-modal-header-border-width, var(--border-width, 1px)) solid
      var(--uix-modal-border-color, var(--color-surface-dark));
    background: var(--uix-modal-header-background, transparent);
    font-size: var(--uix-modal-header-font-size, var(--text-lg, 1.125rem));
    font-weight: var(--uix-modal-header-font-weight, var(--font-bold, 700));
    color: var(--uix-modal-header-color, var(--text-color));

    &:empty {
      display: none;
    }
  }

  &::part(close-button) {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--uix-modal-close-color, var(--text-color));
    cursor: pointer;
    border-radius: 0.375rem;
    transition:
      background-color 0.15s,
      color 0.15s;
    flex-shrink: 0;

    &:hover {
      background: var(--uix-modal-close-hover-background-color, #f3f4f6);
      color: var(--uix-modal-close-hover-color, var(--text-color));
    }
  }

  &::part(body) {
    padding: var(--uix-modal-body-padding, 1.5rem);
    color: var(--uix-modal-body-color, var(--text-color));
    font-size: var(--text-base, 1rem);
    line-height: 1.5;
    overflow-y: auto;
    max-height: 60vh;
  }

  &::part(footer),
  [slot="footer"] {
    padding: var(--uix-modal-footer-padding, 1rem 1.5rem);
    border-top: var(--uix-modal-footer-border-width, var(--border-width, 1px)) solid
      var(--uix-modal-border-color, var(--color-surface-darker));
    background: var(--uix-modal-footer-background, #f9fafb);

    &:empty {
      display: none;
    }
  }

  [slot="trigger"] {
    cursor: pointer;
  }

  [slot="footer"] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    align-items: center;
  }
}


:where(.uix-nav-item, uix-nav-item) {

  all: unset;
  display: flex;
  align-items: center;
  gap: var(--uix-nav-item-gap, 0.75rem);
  font-size: var(--uix-nav-item-font-size, var(--text-sm, 0.875rem));
  line-height: var(--uix-nav-item-line-height, var(--leading-tight, 1.25rem));
  color: var(--uix-nav-item-color, var(--text-color, inherit));
  background-color: var(--uix-nav-item-background, transparent);
  border-radius: var(--uix-nav-item-border-radius, 0);
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
  width: 100%;
  text-decoration: none;
  box-sizing: border-box;

  button {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  &[rounded] {
    --uix-nav-item-border-radius: var(--radius-md, 0.375rem);
  }

  &:not([prevent-collapse]) {
    &:hover:not(:disabled) {
      background-color: var(--uix-nav-item-hover-background, var(--color-surface-dark, rgba(0, 0, 0, 0.05)));
    }

    button {
      cursor: pointer;
    }
  }

  &[size="sm"] {
    --uix-nav-item-padding-y: 0.375rem;
    --uix-nav-item-padding-x: 0.5rem;
    --uix-nav-item-gap: 0.5rem;
    --uix-nav-item-font-size: var(--text-sm, 0.8125rem);
    --uix-nav-item-line-height: var(--leading-tight, 1.125rem);
  }

  &[size="lg"] {
    --uix-nav-item-padding-y: 0.625rem;
    --uix-nav-item-padding-x: 1rem;
    --uix-nav-item-gap: 1rem;
    --uix-nav-item-font-size: var(--text-base, 1rem);
    --uix-nav-item-line-height: var(--leading-normal, 1.5rem);
  }

  &[active][activeBg] {
    background-color: var(--uix-nav-item-active-background, #111);
    color: var(--uix-nav-item-active-color, #fff);
    font-weight: var(--font-semibold, 600);
  }

  &[active]:not([activeBg]) {
    background-color: transparent;
    color: var(--link-active-color);
    font-weight: var(--font-semibold, 600);
  }

  &:disabled {
    opacity: var(--uix-nav-item-disabled-opacity, 0.5);
    cursor: not-allowed;
  }

  .uix-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .label {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: var(--uix-nav-item-padding-y, 0.5rem) var(--uix-nav-item-padding-x, 0.75rem);
  }

  .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--uix-nav-item-badge-padding, 0.2rem 0.4rem);
    font-size: var(--uix-nav-item-badge-font-size, var(--text-xs, 0.6rem));
    font-weight: var(--font-semibold, 600);
    line-height: 1;
    color: var(--uix-nav-item-badge-color, var(--text-color, #fff));
    background-color: var(--uix-nav-item-badge-background, var(--color-surface-darker));
    border-radius: var(--uix-nav-item-badge-border-radius, var(--radius-md, 0.375rem));
    flex-shrink: 0;
  }

  &[header] button {
    position: relative;

    &::before {
      content: "";
      display: inline-block;
      width: 0.5em;
      height: 0.5em;
      margin-top: 5px;
      margin-left: 0.5rem;
      margin-right: 1rem;
      border-right: 2px solid currentColor;
      border-bottom: 2px solid currentColor;
      transform: rotate(-45deg);
      transition: transform 0.2s ease;
      flex-shrink: 0;
      vertical-align: middle;
    }
  }

  &[header][active] button::before {
    transform: rotate(45deg);
    margin-top: 3px;
  }

  &[iconOnly] {
    justify-content: center;

    .nav-item-icon {
      margin: 0;
      padding: var(--uix-nav-item-padding-y, 0.5rem) var(--uix-nav-item-padding-x, 0.75rem);
    }
  }

  &[indicatorPosition]:not([indicatorPosition="none"])[active]:not([activeBg]) {
    background-color: transparent;
  }

  &[indicatorPosition]:not([indicatorPosition="none"])[active][activeBg] {
    background-color: var(--uix-nav-item-active-background, #111);
    color: var(--uix-nav-item-active-color, #fff);
  }

  &[indicatorPosition="left"] {
    position: relative;

    &[active]::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: var(--uix-nav-item-indicator-width, 2px);
      height: var(--uix-nav-item-indicator-length, 50%);
      background-color: var(--uix-nav-item-indicator-color, var(--color-primary, currentColor));
      border-radius: 0 var(--radius-md, 4px) var(--radius-md, 4px) 0;
    }
  }

  &[indicatorPosition="right"] {
    position: relative;

    &[active]::before {
      content: "";
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: var(--uix-nav-item-indicator-width, 2px);
      height: var(--uix-nav-item-indicator-length, 50%);
      background-color: var(--uix-nav-item-indicator-color, var(--color-primary, currentColor));
      border-radius: var(--radius-md, 4px) 0 0 var(--radius-md, 4px);
    }
  }

  &[indicatorPosition="top"] {
    position: relative;

    &[active]::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      height: var(--uix-nav-item-indicator-width, 2px);
      width: var(--uix-nav-item-indicator-length, 50%);
      background-color: var(--uix-nav-item-indicator-color, var(--color-primary, currentColor));
      border-radius: 0 0 var(--radius-md, 4px) var(--radius-md, 4px);
    }
  }

  &[indicatorPosition="bottom"] {
    position: relative;

    &[active]::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      height: var(--uix-nav-item-indicator-width, 2px);
      width: var(--uix-nav-item-indicator-length, 50%);
      background-color: var(--uix-nav-item-indicator-color, var(--color-primary, currentColor));
      border-radius: var(--radius-md, 4px) var(--radius-md, 4px) 0 0;
    }
  }

  &:not([prevent-collapse]):hover:not(:disabled):not([active]) {
    color: var(--uix-nav-item-hover-color, var(--text-color, inherit));
  }
}


:where(.uix-navbar, uix-navbar) {
  display: flex;

  &::part(container) {
    display: flex;
    flex-grow: 1;
    background-color: var(--uix-navbar-background, var(--color-surface));
    border-bottom: 1px solid
      var(--uix-navbar-border-color, var(--color-primary));
    box-shadow: var(--uix-navbar-shadow, none);
  }

  &::part(inner) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    min-height: var(--uix-navbar-height, auto);
    padding: var(
      --uix-navbar-padding,
      var(--spacing-md, 0.75rem) var(--spacing-lg, 1rem)
    );
    max-width: var(--uix-navbar-max-width, 100%);
    margin: 0 auto;
    box-sizing: border-box;
  }

  &::part(brand) {
    display: flex;
    align-items: center;
    gap: var(--uix-navbar-brand-gap, 0.75rem);
    font-size: var(--uix-navbar-brand-font-size, var(--text-xl, 1.25rem));
    font-weight: var(--uix-navbar-brand-font-weight, var(--font-bold, 700));
    color: var(--uix-navbar-brand-color, var(--color-primary));
  }

  &::part(toggle) {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--uix-navbar-toggle-color, var(--color-primary));
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background-color 0.2s ease;

    &:hover {
      background-color: var(
        --uix-navbar-toggle-hover-background,
        var(--color-hover)
      );
    }
  }

  &::part(menu) {
    display: flex;
    align-items: center;
    flex: 1;
    width: 100%;
    gap: var(--uix-navbar-menu-gap, 2rem);
    flex-direction: var(--flex-direction);
  }

  &::part(start),
  &::part(center),
  &::part(end) {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--uix-navbar-items-gap, 1.5rem);
  }

  &::part(center) {
    flex: 1;
  }

  &[fixed="top"]::part(container) {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
  }

  &[fixed="bottom"]::part(container) {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
  }

  &[variant="bordered"]::part(container) {
    border-bottom-width: 2px;
  }

  &[variant="floating"]::part(container) {
    margin: var(--spacing-md, 0.75rem);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  &[transparent]::part(container) {
    background-color: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
  }

  &[direction="horizontal"]::part(start) {
    margin-left: var(--uix-navbar-start-margin, 2rem);
  }

  &[direction="vertical"]::part(inner) {
    flex-direction: column;
  }

  /* Collapsible vertical navbar */
  &[direction="vertical"][collapsible] {
    width: var(--uix-navbar-width, auto);
    transition: width 0.15s ease;
    overflow: hidden;
  }

  &[direction="vertical"][collapsed] {
    width: var(--uix-navbar-collapsed-width, 48px);
  }

  &[direction="vertical"][collapsed]::part(inner) {
    align-items: center;
    padding: var(--uix-navbar-collapsed-padding, 0);
  }

  &[direction="vertical"][collapsed]::part(menu) {
    align-items: center;
  }

  &[direction="vertical"][collapsed]::part(start),
  &[direction="vertical"][collapsed]::part(center),
  &[direction="vertical"][collapsed]::part(end) {
    align-items: center;
  }

  &[direction="vertical"]:not([collapsed])::part(menu),
  &[direction="vertical"]:not([collapsed])::part(start),
  &[direction="vertical"]:not([collapsed])::part(center),
  &[direction="vertical"]:not([collapsed])::part(end) {
    align-items: stretch;
  }

  @media (max-width: 768px) {
    &::part(toggle) {
      display: flex;
    }

    &::part(menu) {
      position: fixed;
      top: calc(var(--uix-navbar-height, 4rem));
      left: 0;
      right: 0;
      flex-direction: var(--flex-direction);
      align-items: stretch;
      background-color: var(--uix-navbar-background, var(--color-surface));
      border-top: 1px solid var(--uix-navbar-border-color, var(--color-primary));
      padding: var(--spacing-md, 0.75rem);
      gap: 0;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;

      &.active {
        max-height: calc(100vh - var(--uix-navbar-height, 4rem));
      }
    }

    &::part(start),
    &::part(center),
    &::part(end) {
      flex-direction: var(--flex-direction);
      align-items: stretch;
      gap: 0.5rem;
      margin: 0;
    }

    &::part(start) {
      padding-bottom: var(--spacing-md, 0.75rem);
      border-bottom: 1px solid var(--color-primary);
    }

    &::part(center) {
      padding: var(--spacing-md, 0.75rem) 0;
      border-bottom: 1px solid var(--color-primary);
    }

    &::part(end) {
      padding-top: var(--spacing-md, 0.75rem);
    }
  }
}


:where(.uix-progress-bar, uix-progress-bar) {
  display: block;
  width: 100%;

  .progress-container {
    width: 100%;
  }

  .progress-bar {
    width: 100%;
    height: var(--uix-progress-bar-height, 1rem);
    background: var(--uix-progress-bar-background, var(--color-secondary, #e5e5e5));
    border-radius: var(--uix-progress-bar-border-radius, var(--radius-full, 9999px));
    border: var(--uix-progress-bar-border-width, 0) solid var(--uix-progress-bar-border-color, transparent);
    box-shadow: var(--uix-progress-bar-shadow, none);
    overflow: hidden;
    position: relative;
  }

  .progress-fill {
    height: 100%;
    background: var(--uix-progress-bar-fill-background, var(--color-primary, #fabd2f));
    transition: width 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
  }

  .progress-label {
    color: var(--color-inverse, #1a1a1a);
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--font-semibold, 600);
    line-height: 1;
    white-space: nowrap;
  }

  &[size="sm"] .progress-bar {
    height: var(--uix-progress-bar-height-sm, 0.5rem);
  }

  &[size="sm"] .progress-label {
    font-size: 0.625rem;
  }

  &[size="lg"] .progress-bar {
    height: var(--uix-progress-bar-height-lg, 1.5rem);
  }

  &[size="lg"] .progress-label {
    font-size: var(--text-sm, 0.875rem);
  }

  &[variant="success"] .progress-fill {
    background: var(--color-success, #22c55e);
  }

  &[variant="danger"] .progress-fill {
    background: var(--color-danger, #ef4444);
  }

  &[variant="warning"] .progress-fill {
    background: var(--color-warning, #f97316);
  }

  &[variant="info"] .progress-fill {
    background: var(--color-info, #3b82f6);
  }

  &[striped] .progress-fill {
    background-image: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.15) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.15) 50%,
      rgba(255, 255, 255, 0.15) 75%,
      transparent 75%,
      transparent
    );
    background-size: 1rem 1rem;
  }

  &[animated] .progress-fill {
    animation: progress-bar-stripes 1s linear infinite;
  }
}

@keyframes progress-bar-stripes {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 1rem 0;
  }
}


:where(.uix-radio, uix-radio) {
  display: inline-block;

  .radio-wrapper {
    display: inline-flex;
    align-items: center;
    gap: var(--uix-radio-gap, 0.5rem);
    cursor: pointer;
    user-select: none;

    &:has(.radio:disabled) {
      cursor: not-allowed;
      opacity: 0.6;
    }
  }

  .radio {
    appearance: none;
    width: var(--uix-radio-size, 1.125rem);
    height: var(--uix-radio-size, 1.125rem);
    border: 2px solid var(--uix-radio-border-color, var(--color-primary));
    border-radius: 50%;
    background-color: var(--uix-radio-background-color, var(--color-surface));
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    position: relative;
    flex-shrink: 0;

    &:hover:not(:disabled) {
      border-color: var(--uix-radio-hover-border-color, var(--color-primary));
    }

    &:checked {
      border-color: var(--uix-radio-checked-border-color, var(--color-primary));

      &::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 50%;
        height: 50%;
        border-radius: 50%;
        background-color: var(--uix-radio-checked-background-color, var(--color-primary));
        transform: translate(-50%, -50%);
      }
    }

    &:focus-visible {
      outline: 2px solid var(--uix-radio-focus-outline-color, var(--color-primary));
      outline-offset: 2px;
    }

    &:disabled {
      cursor: not-allowed;
      background-color: var(--uix-radio-disabled-background-color, var(--color-subtle));
    }
  }

  .radio-label {
    color: var(--uix-radio-label-color, var(--text-color));
    font-size: var(--uix-radio-label-font-size, var(--text-sm, 0.875rem));
    line-height: var(--leading-normal, 1.5);
  }

  &[size="xs"] {
    --uix-radio-size: 0.875rem;
    --uix-radio-label-font-size: var(--text-xs, 0.75rem);
    --uix-radio-gap: 0.375rem;
  }

  &[size="sm"] {
    --uix-radio-size: 1rem;
    --uix-radio-label-font-size: var(--text-sm, 0.8125rem);
    --uix-radio-gap: 0.4375rem;
  }

  &[size="md"] {
    --uix-radio-size: 1.125rem;
    --uix-radio-label-font-size: var(--text-sm, 0.875rem);
    --uix-radio-gap: 0.5rem;
  }

  &[size="lg"] {
    --uix-radio-size: 1.25rem;
    --uix-radio-label-font-size: var(--text-base, 1rem);
    --uix-radio-gap: 0.625rem;
  }

  &[size="xl"] {
    --uix-radio-size: 1.5rem;
    --uix-radio-label-font-size: var(--text-lg, 1.125rem);
    --uix-radio-gap: 0.75rem;
  }

  &[variant="primary"] .radio:checked {
    --uix-radio-checked-border-color: var(--color-primary);

    &::after {
      --uix-radio-checked-background-color: var(--color-primary);
    }
  }

  &[variant="secondary"] .radio:checked {
    --uix-radio-checked-border-color: var(--color-secondary);

    &::after {
      --uix-radio-checked-background-color: var(--color-secondary);
    }
  }

  &[variant="success"] .radio:checked {
    --uix-radio-checked-border-color: var(--color-success);

    &::after {
      --uix-radio-checked-background-color: var(--color-success);
    }
  }

  &[variant="warning"] .radio:checked {
    --uix-radio-checked-border-color: var(--color-warning);

    &::after {
      --uix-radio-checked-background-color: var(--color-warning);
    }
  }

  &[variant="error"] .radio:checked {
    --uix-radio-checked-border-color: var(--color-danger);

    &::after {
      --uix-radio-checked-background-color: var(--color-danger);
    }
  }
}


:where(.uix-radio-group, uix-radio-group) {
  display: inline-flex;

  &::part(container) {
    display: flex;
    flex-direction: column;
    gap: var(--uix-radio-group-gap, 0.75rem);
  }

  &[orientation="horizontal"]::part(container) {
    flex-direction: row;
    flex-wrap: wrap;
  }
}


:where(.uix-select, uix-select) {
  display: inline-block;
  width: var(--uix-select-width, auto);
  box-sizing: border-box;

  .select-label {
    display: block;
    font-size: var(--uix-input-label-font-size, var(--text-sm, 0.875rem));
    font-weight: var(--uix-input-label-font-weight, var(--font-semibold, 600));
    margin-bottom: var(--uix-input-label-margin, 0.5rem);
    color: var(--uix-input-label-color, var(--text-color, #1a1a1a));
    letter-spacing: var(--uix-input-label-letter-spacing, 0);
    text-transform: var(--uix-input-label-text-transform, none);
  }

  .select-required {
    color: var(--color-danger, #ef4444);
    margin-left: 0.25rem;
  }

  .select-wrapper {
    position: relative;
    height: var(--uix-select-height, var(--uix-input-height, 2.5rem));
    box-sizing: border-box;
    background: var(
      --uix-select-background,
      var(--uix-input-background, var(--color-surface-light, #ffffff))
    );
    border: var(--uix-select-border-width, var(--uix-input-border-width, var(--border-width, 1px)))
      solid
      var(
        --uix-select-border-color,
        var(--uix-input-border-color, var(--border-color, var(--color-surface, #e5e7eb)))
      );
    border-radius: var(
      --uix-select-border-radius,
      var(--uix-input-border-radius, var(--radius-md, 0.375rem))
    );
    box-shadow: var(--uix-select-shadow, var(--uix-input-shadow, var(--shadow-sm, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1))));

    transition: var(
      --uix-select-transition,
      border-color 0.2s ease,
      background-color 0.2s ease,
      box-shadow 0.15s ease,
      transform 0.15s ease
    );

    &:hover:not(:focus-within) {
      border-color: var(
        --uix-select-hover-border-color,
        var(--uix-input-hover-border-color, var(--color-primary-light))
      );
    }

    &:focus-within {
      border-color: var(
        --uix-select-focus-border-color,
        var(--uix-input-focus-border-color, var(--color-primary))
      );
      box-shadow: var(
        --uix-select-focus-shadow,
        var(--uix-input-focus-shadow, 0 0 0 3px rgba(250, 189, 47, 0.1))
      );
    }
  }

  select {
    appearance: none;
    background: transparent;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    height: 100%;
    padding: var(--uix-select-padding-y, var(--uix-input-padding-y, 0.5rem))
      var(--uix-select-padding-x, var(--uix-input-padding-x, 0.75rem));
    padding-right: calc(
      var(--uix-select-padding-x, var(--uix-input-padding-x, 0.75rem)) +
      var(--uix-select-arrow-size, 1rem) +
      0.5rem
    );
    font-size: var(
      --uix-select-font-size,
      var(--uix-input-font-size, var(--text-sm, 0.875rem))
    );
    font-weight: var(
      --uix-select-font-weight,
      var(--uix-input-font-weight, var(--font-normal, 400))
    );
    font-family: inherit;
    line-height: var(--uix-select-line-height, 1.5);
    color: var(
      --uix-select-color,
      var(--uix-input-text, var(--text-color, inherit))
    );
    outline: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: var(--uix-select-transition, background-color 0.2s ease);

    option {
      background: var(
        --uix-select-option-background,
        var(--color-surface-light)
      );
      color: var(--uix-select-option-color, var(--text-color));
      padding: var(--spacing-xs, 0.25rem);

      &:checked {
        background: var(
          --uix-select-option-checked-background,
          var(--color-primary)
        );
        color: var(--uix-select-option-checked-color, var(--color-inverse));
      }
    }

    &::placeholder {
      color: var(
        --uix-select-placeholder,
        var(--uix-input-placeholder, var(--text-muted, #9ca3af))
      );
      opacity: 1;
    }

    &:focus {
      outline: none;
    }
  }

  .select-wrapper .select-arrow {
    position: absolute;
    right: var(--uix-select-padding-x, var(--uix-input-padding-x, 0.75rem));
    top: 50%;
    transform: translateY(-50%);
    width: var(--uix-select-arrow-size, 1rem);
    height: var(--uix-select-arrow-size, 1rem);
    color: var(
      --uix-select-arrow-color,
      var(--uix-input-icon, var(--text-muted))
    );
    opacity: 0.7;
    transition:
      opacity 0.2s ease,
      transform 0.2s ease;
    pointer-events: auto;
    cursor: pointer;
  }

  .select-wrapper:focus-within .select-arrow {
    opacity: 1;
  }

  &:has(select:disabled) {
    .select-wrapper {
      opacity: var(--uix-select-disabled-opacity, 0.6);
      cursor: not-allowed;
    }

    select {
      background: var(
        --uix-select-disabled-background,
        var(--uix-input-disabled-background, var(--color-surface-dark))
      );
      color: var(--uix-select-disabled-color, var(--text-muted));
      cursor: not-allowed;
    }

    .select-wrapper .select-arrow {
      opacity: 0.4;
    }
  }

  &[size="xs"] {
    --uix-select-height: 1.5rem;
    --uix-select-padding-y: 0.2rem;
    --uix-select-padding-x: 0.5rem;
    --uix-select-font-size: var(--text-xs, 0.75rem);
    --uix-select-arrow-size: 0.75rem;
  }

  &[size="sm"] {
    --uix-select-height: 2rem;
    --uix-select-padding-y: 0.3rem;
    --uix-select-padding-x: 0.6rem;
    --uix-select-font-size: var(--text-sm, 0.875rem);
    --uix-select-arrow-size: 0.875rem;
  }

  &[size="md"] {
    --uix-select-height: 2.5rem;
    --uix-select-padding-y: 0.5rem;
    --uix-select-padding-x: 0.75rem;
    --uix-select-font-size: var(--text-base, 1rem);
    --uix-select-arrow-size: 1rem;
  }

  &[size="lg"] {
    --uix-select-height: 3rem;
    --uix-select-padding-y: 0.625rem;
    --uix-select-padding-x: 1rem;
    --uix-select-font-size: var(--text-lg, 1.125rem);
    --uix-select-arrow-size: 1.25rem;
  }

  &[size="xl"] {
    --uix-select-height: 3.5rem;
    --uix-select-padding-y: 0.75rem;
    --uix-select-padding-x: 1.25rem;
    --uix-select-font-size: var(--text-xl, 1.25rem);
    --uix-select-arrow-size: 1.5rem;
  }

  &[required] .select-wrapper {
    border-left: 3px solid
      var(--uix-select-required-color, var(--color-warning));
  }

  &[error] {
    --uix-select-border-color: var(
      --uix-input-border-error,
      var(--color-danger)
    );
    --uix-select-focus-border-color: var(
      --uix-input-border-error,
      var(--color-danger)
    );
    --uix-select-focus-shadow: 0 0 0 3px rgba(251, 73, 52, 0.1);
  }

  &[success] {
    --uix-select-border-color: var(--color-success);
    --uix-select-focus-border-color: var(--color-success);
    --uix-select-focus-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
  }

  &[variant="primary"] {
    --uix-select-border-color: var(--color-primary);
    --uix-select-focus-border-color: var(--color-primary);
  }

  &[variant="secondary"] {
    --uix-select-border-color: var(--color-secondary);
    --uix-select-focus-border-color: var(--color-secondary);
  }

  &[variant="success"] {
    --uix-select-border-color: var(--color-success);
    --uix-select-focus-border-color: var(--color-success);
    --uix-select-focus-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
  }

  &[variant="warning"] {
    --uix-select-border-color: var(--color-warning);
    --uix-select-focus-border-color: var(--color-warning);
    --uix-select-focus-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1);
  }

  &[variant="error"] {
    --uix-select-border-color: var(
      --uix-input-border-error,
      var(--color-danger)
    );
    --uix-select-focus-border-color: var(
      --uix-input-border-error,
      var(--color-danger)
    );
    --uix-select-focus-shadow: 0 0 0 3px rgba(251, 73, 52, 0.1);
  }

  /* Searchable select */
  .select-search-input {
    appearance: none;
    background: transparent;
    border: none;
    width: 100%;
    height: 100%;
    padding: var(--uix-select-padding-y, var(--uix-input-padding-y, 0.5rem))
      var(--uix-select-padding-x, var(--uix-input-padding-x, 0.75rem));
    padding-right: calc(
      var(--uix-select-padding-x, var(--uix-input-padding-x, 0.75rem)) +
      var(--uix-select-arrow-size, 1rem) +
      0.5rem
    );
    font-size: var(
      --uix-select-font-size,
      var(--uix-input-font-size, var(--text-sm, 0.875rem))
    );
    font-weight: var(
      --uix-select-font-weight,
      var(--uix-input-font-weight, var(--font-normal, 400))
    );
    font-family: inherit;
    line-height: var(--uix-select-line-height, 1.5);
    color: var(
      --uix-select-color,
      var(--uix-input-text, var(--text-color, inherit))
    );
    outline: none;
    box-sizing: border-box;

    &::placeholder {
      color: var(
        --uix-select-placeholder,
        var(--uix-input-placeholder, var(--text-muted, #9ca3af))
      );
      opacity: 1;
    }
  }

  .select-dropdown {
    position: absolute;
    top: 100%;
    left: -1px;
    right: -1px;
    z-index: 50;
    max-height: 200px;
    overflow-y: auto;
    background: var(
      --uix-select-dropdown-background,
      var(--color-surface-light, #fff)
    );
    border: 1px solid
      var(--uix-select-dropdown-border, var(--color-surface-dark, #e5e7eb));
    border-top: none;
    border-radius: 0 0
      var(
        --uix-select-border-radius,
        var(--uix-input-border-radius, var(--radius-md, 0.375rem))
      )
      var(
        --uix-select-border-radius,
        var(--uix-input-border-radius, var(--radius-md, 0.375rem))
      );
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
  }

  .select-option {
    padding: var(--uix-select-padding-y, 0.375rem)
      var(--uix-select-padding-x, 0.75rem);
    cursor: pointer;
    font-size: var(
      --uix-select-font-size,
      var(--uix-input-font-size, var(--text-sm, 0.875rem))
    );
    color: var(--uix-select-color, var(--text-color, inherit));
    transition: background-color 0.1s ease;

    &:hover,
    &.highlighted {
      background: var(
        --uix-select-option-hover,
        var(--color-surface-dark, #f3f4f6)
      );
    }
  }

  .select-no-results {
    cursor: default;
    opacity: 0.5;
    &:hover {
      background: transparent;
    }
  }

  &[w-full],
  &[wfull],
  &[fullwidth] {
    width: 100%;
    display: block;
  }
}


:where(.uix-spinner, uix-spinner) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--uix-spinner-size, 2rem);
  height: var(--uix-spinner-size, 2rem);
  position: relative;

  &[primary] {
    --uix-spinner-color: var(--color-primary);
  }

  &[secondary] {
    --uix-spinner-color: var(--color-secondary);
  }

  &[success] {
    --uix-spinner-color: var(--color-success);
  }

  &[danger] {
    --uix-spinner-color: var(--color-danger);
  }

  &[warning] {
    --uix-spinner-color: var(--color-warning);
  }

  &[info] {
    --uix-spinner-color: var(--color-info);
  }

  &[size="xs"] {
    --uix-spinner-size: 1rem;
  }

  &[size="sm"] {
    --uix-spinner-size: 1.5rem;
  }

  &[size="md"] {
    --uix-spinner-size: 2rem;
  }

  &[size="lg"] {
    --uix-spinner-size: 3rem;
  }

  &[size="xl"] {
    --uix-spinner-size: 4rem;
  }

  &[variant="circular"]::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border: calc(var(--uix-spinner-size, 2rem) / 8) solid var(--color-surface-darker);
    border-top-color: var(--uix-spinner-color, var(--color-primary));
    border-radius: 50%;
    animation: spinner-circular 0.8s linear infinite;
  }

  &[variant="dots"] {
    gap: calc(var(--uix-spinner-size, 2rem) / 6);
  }

  &[variant="dots"] .dot {
    display: block;
    width: calc(var(--uix-spinner-size, 2rem) / 4);
    height: calc(var(--uix-spinner-size, 2rem) / 4);
    background-color: var(--uix-spinner-color, var(--color-primary));
    border-radius: 50%;
    animation: spinner-dots 1.4s ease-in-out infinite;
  }

  &[variant="dots"] .dot:nth-child(1) {
    animation-delay: -0.32s;
  }

  &[variant="dots"] .dot:nth-child(2) {
    animation-delay: -0.16s;
  }

  &[variant="dots"] .dot:nth-child(3) {
    animation-delay: 0s;
  }

  &[variant="bars"] {
    gap: calc(var(--uix-spinner-size, 2rem) / 8);
  }

  &[variant="bars"] .bar {
    display: block;
    width: calc(var(--uix-spinner-size, 2rem) / 6);
    height: 100%;
    background-color: var(--uix-spinner-color, var(--color-primary));
    border-radius: calc(var(--uix-spinner-size, 2rem) / 12);
    animation: spinner-bars 1.2s ease-in-out infinite;
  }

  &[variant="bars"] .bar:nth-child(1) {
    animation-delay: -0.24s;
  }

  &[variant="bars"] .bar:nth-child(2) {
    animation-delay: -0.12s;
  }

  &[variant="bars"] .bar:nth-child(3) {
    animation-delay: 0s;
  }
}

@keyframes spinner-circular {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spinner-dots {
  0%,
  80%,
  100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes spinner-bars {
  0%,
  40%,
  100% {
    transform: scaleY(0.4);
    opacity: 0.5;
  }
  20% {
    transform: scaleY(1);
    opacity: 1;
  }
}


:where(.uix-tabs, uix-tabs) {
  display: flex;
  flex-direction: column;
  width: 100%;

  border: var(--uix-tabs-border-width, 0) solid var(--uix-tabs-border-color, transparent);
  border-radius: var(--uix-tabs-border-radius, 0);
  box-shadow: var(--uix-tabs-shadow, none);
  background: var(--uix-tabs-background, transparent);
  overflow: hidden;

  &::part(tab-list) {
    display: flex;
    flex-direction: row;
    background: var(--uix-tabs-list-background, transparent);
    border-bottom: var(--border-width, 1px) solid
      var(--uix-tabs-list-border-color, var(--color-surface-dark));
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
  }

  [slot="tab"] {
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    cursor: pointer;
    position: relative;
    gap: var(--uix-tabs-gap, var(--spacing-xs, 0.25rem));
    padding: var(
      --uix-tabs-padding,
      var(--spacing-md, 0.75rem) var(--spacing-lg, 1rem)
    );
    font-family: inherit;
    font-size: var(--uix-tabs-font-size, var(--text-sm, 0.875rem));
    font-weight: var(--uix-tabs-font-weight, var(--font-medium, 500));
    text-transform: var(--uix-tabs-text-transform, none);
    letter-spacing: var(--uix-tabs-letter-spacing, normal);
    color: var(--uix-tabs-color, var(--text-muted));
    background: var(--uix-tabs-background, transparent);
    border: none;
    border-bottom: var(--uix-tabs-border-width, 2px) solid transparent;
    outline: none;
    transition:
      color 0.2s ease,
      background-color 0.2s ease,
      border-color 0.2s ease;

    &:hover {
      color: var(--uix-tabs-color-hover, var(--color-primary-light));
      background: var(--uix-tabs-background-hover, var(--color-surface-dark));
    }

    &:focus-visible {
      background: var(--uix-tabs-background-hover, var(--color-surface-dark));
    }

    &[active] {
      color: var(--uix-tabs-color-active, var(--text-color));
      background: var(--uix-tabs-background-active, transparent);
      border-bottom-color: var(--uix-tabs-border-active, var(--color-primary));
    }

    &[disabled] {
      opacity: 0.5;
      cursor: not-allowed;
      pointer-events: none;
    }
  }

  &::part(tab-panel) {
    display: flex;
    width: 100%;
    min-height: 0;
    overflow-y: auto;
    background: var(--uix-tabs-panel-background, transparent);
  }

  [slot="panel"] {
    min-height: 0;
    overflow-y: auto;
    padding: var(--uix-tabs-panel-padding, var(--spacing-lg, 1rem));
    flex-grow: 1;
    animation: fadeIn 0.2s ease-in-out;

    &[hide] {
      display: none;
    }
  }

  &[fullWidth] [slot="tab"] {
    flex: 1;
  }

  &[vertical] {
    flex-direction: row;
    height: 100%;

    &::part(tab-list) {
      flex-direction: column;
      border-bottom: none;
      border-right: var(--border-width, 1px) solid
        var(--uix-tabs-list-border-color, var(--color-surface-dark));
      min-width: 150px;
    }

    [slot="tab"] {
      justify-content: flex-start;
      border-bottom: none;
      border-right: var(--uix-tabs-border-width, 2px) solid transparent;

      &[active] {
        border-color: transparent;
        border-right-color: var(--uix-tabs-border-active, var(--color-primary));
      }
    }
  }
}

@media (min-width: 1024px) {
  :where(.uix-tabs, uix-tabs)[vertical][responsive] {
    height: auto;
    overflow: visible;
  }

  :where(.uix-tabs, uix-tabs)[vertical][responsive]::part(tab-list) {
    align-self: flex-start;
    position: sticky;
    top: var(--uix-tabs-sticky-top, 5rem);
  }
}

@media (max-width: 1023px) {
  :where(.uix-tabs, uix-tabs)[vertical][responsive] {
    flex-direction: column;
    height: auto;
  }

  :where(.uix-tabs, uix-tabs)[vertical][responsive]::part(tab-list) {
    flex-direction: row;
    border-right: none;
    border-bottom: var(--border-width, 1px) solid var(--uix-tabs-list-border-color, var(--color-surface-dark));
    min-width: unset;
    overflow-x: auto;
    scrollbar-width: none;
  }

  :where(.uix-tabs, uix-tabs)[vertical][responsive] [slot="tab"] {
    justify-content: center;
    border-right: none;
    border-bottom: var(--uix-tabs-border-width, 2px) solid transparent;

    &[active] {
      border-color: transparent;
      border-bottom-color: var(--uix-tabs-border-active, var(--color-primary));
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


:where(.uix-tag, uix-tag) {
  display: inline-flex;

  &::part(container) {
    display: inline-flex;
    align-items: center;
    gap: var(--uix-tag-gap, 0.375rem);
    padding: var(--uix-tag-padding-y, 0.25rem) var(--uix-tag-padding-x, 0.625rem);
    background-color: var(--uix-tag-background, var(--color-surface-darker));
    color: var(--uix-tag-color, var(--color-text-default));
    font-size: var(--uix-tag-font-size, var(--text-xs, 0.75rem));
    font-weight: var(--uix-tag-font-weight, var(--font-medium, 500));
    line-height: 1.5;
    border: 1px solid var(--uix-tag-border-color, transparent);
    border-radius: var(--uix-tag-border-radius, var(--radius-md));
    cursor: default;
    transition:
      background-color 0.2s ease,
      border-color 0.2s ease;

    &.rounded {
      border-radius: var(--uix-tag-border-radius-rounded, 9999px);
    }

    &[disabled] {
      opacity: 0.6;
      cursor: not-allowed;
    }
  }

  &::part(label) {
    flex: 1;
  }

  &::part(close) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.5rem;
    height: 0.5rem;
    padding: 0;
    margin: 0;
    margin-bottom: 0.25rem;
    border: none;
    background: none;
    color: inherit;
    cursor: pointer;
    font-size: 0.5rem;

    &:disabled {
      cursor: not-allowed;
    }
  }

  &[size="xs"] {
    --uix-tag-font-size: var(--text-xs, 0.625rem);
    --uix-tag-padding-y: 0.0625rem;
    --uix-tag-padding-x: 0.375rem;
    --uix-tag-gap: 0.1875rem;
  }

  &[size="sm"] {
    --uix-tag-font-size: var(--text-xs, 0.6875rem);
    --uix-tag-padding-y: 0.125rem;
    --uix-tag-padding-x: 0.5rem;
    --uix-tag-gap: 0.25rem;
  }

  &[size="md"] {
    --uix-tag-font-size: var(--text-xs, 0.75rem);
    --uix-tag-padding-y: 0.25rem;
    --uix-tag-padding-x: 0.625rem;
    --uix-tag-gap: 0.375rem;
  }

  &[size="lg"] {
    --uix-tag-font-size: var(--text-sm, 0.875rem);
    --uix-tag-padding-y: 0.375rem;
    --uix-tag-padding-x: 0.75rem;
    --uix-tag-gap: 0.5rem;
  }

  &[variant="default"]::part(container) {
    --uix-tag-background: var(--color-surface-darker);
    --uix-tag-color: var(--color-text-default);
  }

  &[variant="primary"]::part(container) {
    --uix-tag-background: var(--color-primary);
    --uix-tag-color: var(--color-inverse);
  }

  &[variant="secondary"]::part(container) {
    --uix-tag-background: var(--color-secondary);
    --uix-tag-color: var(--color-inverse);
  }

  &[variant="success"]::part(container) {
    --uix-tag-background: var(--color-success);
    --uix-tag-color: var(--color-inverse);
  }

  &[variant="warning"]::part(container) {
    --uix-tag-background: var(--color-warning);
    --uix-tag-color: var(--color-inverse);
  }

  &[variant="error"]::part(container) {
    --uix-tag-background: var(--color-danger);
    --uix-tag-color: var(--color-inverse);
  }

  &[variant="info"]::part(container) {
    --uix-tag-background: var(--color-info);
    --uix-tag-color: var(--color-inverse);
  }

  &[outlined]::part(container) {
    background-color: transparent;
    border-width: 1px;
  }

  &[outlined][variant="default"]::part(container) {
    --uix-tag-border-color: var(--border-color);
    --uix-tag-color: var(--color-text-default);
  }

  &[outlined][variant="primary"]::part(container) {
    --uix-tag-border-color: var(--color-primary);
    --uix-tag-color: var(--color-primary);
  }

  &[outlined][variant="secondary"]::part(container) {
    --uix-tag-border-color: var(--color-secondary);
    --uix-tag-color: var(--color-secondary);
  }

  &[outlined][variant="success"]::part(container) {
    --uix-tag-border-color: var(--color-success);
    --uix-tag-color: var(--color-success);
  }

  &[outlined][variant="warning"]::part(container) {
    --uix-tag-border-color: var(--color-warning);
    --uix-tag-color: var(--color-warning);
  }

  &[outlined][variant="error"]::part(container) {
    --uix-tag-border-color: var(--color-danger);
    --uix-tag-color: var(--color-danger);
  }

  &[outlined][variant="info"]::part(container) {
    --uix-tag-border-color: var(--color-info);
    --uix-tag-color: var(--color-info);
  }
}


:where(.uix-text, uix-text) {
  span,
  p,
  div {
    margin: 0;
    color: var(--text-color);
    font-family: inherit;
  }

  &[size="xs"] {
    span, p, div {
      font-size: var(--text-xs, 0.75rem);
    }
  }

  &[size="sm"] {
    span, p, div {
      font-size: var(--text-sm, 0.875rem);
    }
  }

  &[size="base"] {
    span, p, div {
      font-size: var(--text-base, 1rem);
    }
  }

  &[size="lg"] {
    span, p, div {
      font-size: var(--text-lg, 1.125rem);
    }
  }

  &[size="xl"] {
    span, p, div {
      font-size: var(--text-xl, 1.25rem);
    }
  }

  &[size="2xl"] {
    span, p, div {
      font-size: var(--text-2xl, 1.5rem);
    }
  }

  &[size="3xl"] {
    span, p, div {
      font-size: var(--text-3xl, 1.875rem);
    }
  }

  &[weight="normal"] {
    span, p, div {
      font-weight: var(--font-normal, 400);
    }
  }

  &[weight="medium"] {
    span, p, div {
      font-weight: var(--font-medium, 500);
    }
  }

  &[weight="semibold"] {
    span, p, div {
      font-weight: var(--font-semibold, 600);
    }
  }

  &[weight="bold"] {
    span, p, div {
      font-weight: var(--font-bold, 700);
    }
  }

  &[weight="black"] {
    span, p, div {
      font-weight: 900;
    }
  }

  &[muted] {
    span, p, div {
      color: var(--text-muted, #6b7280);
    }
  }

  &[tracking="wide"] {
    span, p, div {
      letter-spacing: 0.025em;
    }
  }

  &[tracking="wider"] {
    span, p, div {
      letter-spacing: 0.05em;
    }
  }

  &[mono] {
    span, p, div {
      font-family: monospace;
    }
  }

  &[align="left"] {
    span, p, div {
      text-align: left;
    }
  }

  &[align="center"] {
    span, p, div {
      text-align: center;
    }
  }

  &[align="right"] {
    span, p, div {
      text-align: right;
    }
  }

  &[color="primary"] {
    span, p, div {
      color: var(--color-primary);
    }
  }

  &[color="secondary"] {
    span, p, div {
      color: var(--color-secondary);
    }
  }

  &[color="success"] {
    span, p, div {
      color: var(--color-success);
    }
  }

  &[color="danger"] {
    span, p, div {
      color: var(--color-danger);
    }
  }

  &[color="warning"] {
    span, p, div {
      color: var(--color-warning);
    }
  }

  &[color="info"] {
    span, p, div {
      color: var(--color-info);
    }
  }

  &[color="muted"] {
    span, p, div {
      color: var(--text-muted, #6b7280);
    }
  }

  &[color="inverse"] {
    span, p, div {
      color: var(--color-inverse);
    }
  }

  &[transform="capitalize"] {
    span, p, div {
      text-transform: capitalize;
    }
  }

  &[transform="uppercase"] {
    span, p, div {
      text-transform: uppercase;
    }
  }

  &[transform="lowercase"] {
    span, p, div {
      text-transform: lowercase;
    }
  }

  &[transform="none"] {
    span, p, div {
      text-transform: none;
    }
  }
}


uix-theme-editor {
  display: block;
  min-height: 0;
}


:where(.uix-accordion, uix-accordion) {
  display: flex;
  width: 100%;

  &::part(container) {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: var(--uix-accordion-gap, 0);
    background: var(--uix-accordion-background, transparent);
    border: var(--uix-accordion-border-width, var(--border-width, 1px)) solid var(--uix-accordion-border-color, var(--border-color, transparent));
    border-radius: var(--uix-accordion-border-radius, var(--radius-md, 0.375rem));
    overflow: hidden;
  }

  /* Headers (odd children = 1st, 3rd, 5th...) */
  > *:nth-child(odd) {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    cursor: pointer;
    user-select: none;
    padding: var(--uix-accordion-padding, 0.5rem 0.75rem);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--font-semibold, 600);
    color: var(--uix-accordion-header-color, inherit);
    background: var(--uix-accordion-header-background, transparent);
    border: none;
    border-top: var(--border-width, 1px) solid var(--uix-accordion-header-border-top, var(--color-surface-dark));
    transition: var(--uix-accordion-transition, background-color 0.15s ease, color 0.15s ease);

    &:hover {
      background: var(--uix-accordion-header-background-hover, var(--color-surface-dark));
      color: var(--uix-accordion-header-color-hover, inherit);
    }

    &[active] {
      background: var(--uix-accordion-header-background-active, var(--color-surface-darker));
      color: var(--uix-accordion-header-color-active, inherit);
    }
  }

  > *:nth-child(1) {
    border-top: none;
  }

  /* Panels (even children = 2nd, 4th, 6th...) */
  > *:nth-child(even) {
    background: var(--uix-accordion-panel-background, transparent);
    color: var(--uix-accordion-panel-color, inherit);
    font-size: var(--text-sm, 0.875rem);
    line-height: var(--leading-relaxed, 1.6);
    transition: var(--uix-accordion-transition, background-color 0.15s ease, color 0.15s ease);

    &[hide] {
      display: none;
    }
  }

  /* Bordered variant */
  &[variant="bordered"] {
    --uix-accordion-border-color: var(--color-surface-dark);
    --uix-accordion-header-border-top: var(--color-surface-dark);
    --uix-accordion-header-background-hover: var(--color-surface-dark);
    --uix-accordion-header-background-active: var(--color-surface-darker);

    &::part(container) {
      border-width: 1px;
    }
  }

  /* Filled variant */
  &[variant="filled"] {
    --uix-accordion-background: var(--color-surface-darker);
    --uix-accordion-border-color: transparent;
    --uix-accordion-header-border-top: var(--color-surface-dark);
    --uix-accordion-header-background: var(--color-surface-darker);
    --uix-accordion-header-background-hover: var(--color-surface-dark);
    --uix-accordion-header-background-active: var(--color-surface-dark);
    --uix-accordion-panel-background: var(--color-surface-darker);

    > *:nth-child(odd)[active] {
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    }
  }

  /* Flush variant — minimal, no borders/padding around container */
  &[variant="flush"] {
    --uix-accordion-background: transparent;
    --uix-accordion-border-color: transparent;
    --uix-accordion-header-border-top: var(--color-surface-dark);
    --uix-accordion-header-background: transparent;
    --uix-accordion-header-background-hover: var(--color-surface-dark);
    --uix-accordion-header-background-active: var(--color-surface-darker);
    --uix-accordion-panel-background: transparent;

    &::part(container) {
      border: none;
      border-radius: 0;
    }

    > *:nth-child(1) {
      border-top: none;
    }
  }

  /* Separated variant */
  &[variant="separated"] {
    --uix-accordion-gap: var(--spacing-xs, 0.25rem);
    --uix-accordion-border-color: transparent;
    --uix-accordion-header-border-top: transparent;

    &::part(container) {
      border: none;
    }

    > *:nth-child(odd) {
      border: var(--border-width, 1px) solid var(--color-surface-dark);
      border-radius: var(--uix-accordion-border-radius, var(--radius-md, 0.375rem));
    }

    > *:nth-child(even) {
      border: var(--border-width, 1px) solid var(--color-surface-dark);
      border-top: none;
      border-radius: 0 0 var(--uix-accordion-border-radius, var(--radius-md, 0.375rem)) var(--uix-accordion-border-radius, var(--radius-md, 0.375rem));
    }
  }

  &:not([rounded]) {
    --uix-accordion-border-radius: 0;

    &::part(container) {
      border-radius: 0;
    }
  }
}


:where(.uix-tree, uix-tree) {
  display: block;
  background: var(--color-surface-darker);
  color: var(--text-color);
  user-select: none;
}


:where(.uix-tree-item, uix-tree-item) {
  display: block;

  &::part(item-content) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    border-radius: 0.25rem;
    transition: background 0.15s ease;

    &:hover {
      background: var(--color-surface-dark, rgba(255, 255, 255, 0.05));
    }
  }

  &[active]::part(item-content) {
    background: rgba(250, 189, 47, 0.2);
    color: var(--color-primary);
    margin-left: -1rem;
    padding-left: 1.5rem;
    border-radius: 0;
  }

  &::part(children) {
    padding-left: 1rem;
  }

  &:not([expanded])::part(children) {
    display: none;
  }

  .label {
    flex: 1;
    font-size: 0.875rem;
  }

  .modified {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
    flex-shrink: 0;
    margin-left: auto;
  }

  uix-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }
}


:where(.ide-extension-detail, ide-extension-detail) {
  display: block;
  width: 100%;
  height: 100%;
  overflow-y: auto;

  .detail-shell {
    max-width: 1040px;
    margin: 0 auto;
    padding: 24px 40px 64px;
  }

  .back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--color-primary);
    font-size: 12px;
    cursor: pointer;
    margin-bottom: 16px;
    user-select: none;

    &:hover {
      text-decoration: underline;
    }
  }

  .missing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 72px 0;
  }

  .missing-icon {
    opacity: 0.25;
  }

  .missing-text {
    color: var(--color-text-muted);
    font-size: 14px;
    margin: 0;
  }

  .hero {
    display: flex;
    gap: 20px;
    padding: 24px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--color-surface-dark);
    margin-bottom: 20px;
  }

  .hero-icon {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero-icon-svg {
    color: var(--color-primary);
  }

  .hero-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .hero-top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  .hero-name {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text-default);
    letter-spacing: -0.01em;
  }

  .hero-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    font-size: 12px;
    color: var(--color-text-muted);
  }

  .hero-meta uix-tag[variant="primary"] {
    --uix-tag-background: color-mix(in srgb, var(--color-primary) 16%, transparent);
    --uix-tag-color: var(--color-primary);
  }

  .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .hero-tagline {
    margin: 4px 0 0;
    color: var(--color-text-default);
    font-size: 14px;
    line-height: 1.5;
  }

  .hero-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
  }

  .layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 20px;
    align-items: start;
  }

  @media (max-width: 880px) {
    .layout {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .main {
    min-width: 0;
  }

  .tab-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 20px;
  }

  .section {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .section-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-default);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .section-count {
    color: var(--color-text-muted);
    font-weight: 400;
    font-size: 11px;
    padding: 1px 6px;
    background: var(--color-surface-light);
    border-radius: 99px;
    text-transform: none;
    letter-spacing: 0;
  }

  .section-copy {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-default);
  }

  .section-copy.subtle {
    color: var(--color-text-muted);
    font-size: 12px;
  }

  .sub-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .sub-title {
    font-size: 12px;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .facts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px;
  }

  .fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background: var(--color-surface-dark);
    border: 1px solid var(--border-color);
    border-radius: 6px;
  }

  .fact-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .fact-value {
    font-size: 14px;
    color: var(--color-text-default);
  }

  .contrib-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 24px;
    background: var(--color-surface-dark);
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    text-align: center;
  }

  .contrib-empty-icon {
    color: var(--color-text-muted);
    opacity: 0.6;
  }

  .contrib-empty-title {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-default);
  }

  .contrib-empty-text {
    margin: 0;
    font-size: 12px;
    color: var(--color-text-muted);
    max-width: 360px;
    line-height: 1.5;
  }

  .kv-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .kv {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: 12px;
    font-size: 12px;
    align-items: center;
  }

  .kv-k {
    color: var(--color-text-muted);
  }

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

  .kv-code, .block-code, code.menu-cmd {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
    padding: 2px 6px;
    background: var(--color-surface-light);
    border-radius: 4px;
    color: var(--color-text-default);
  }

  .block-code {
    display: inline-block;
    padding: 6px 10px;
    font-size: 12px;
  }

  .contrib-table {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
  }

  .contrib-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    font-size: 12px;
    border-bottom: 1px solid var(--border-color);

    &:last-child {
      border-bottom: 0;
    }

    &:hover {
      background: var(--color-surface-light);
    }
  }

  .contrib-id {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
    color: var(--color-primary);
    flex-shrink: 0;
  }

  .contrib-label {
    flex: 1;
    color: var(--color-text-default);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .contrib-kbd {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 10px;
    padding: 1px 5px;
    border: 1px solid var(--border-color);
    border-radius: 3px;
    background: var(--color-surface-dark);
    color: var(--color-text-muted);
  }

  .menu-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .menu-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: var(--color-surface-dark);
    border: 1px solid var(--border-color);
    border-radius: 6px;
  }

  .menu-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-default);
  }

  .menu-items {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-left: 8px;
  }

  .menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--color-text-default);
  }

  .menu-sep {
    height: 1px;
    background: var(--border-color);
    margin: 2px 0;
  }

  .tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .rail {
    position: sticky;
    top: 0;
  }

  .rail-header {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .rail-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .rail-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .rail-value {
    font-size: 13px;
    color: var(--color-text-default);
  }

  .link-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .link-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--color-primary);
    cursor: pointer;

    &:hover {
      text-decoration: underline;
    }
  }
}


:where(.ide-extensions-browser, ide-extensions-browser) {
  display: block;
  width: 100%;
  height: 100%;
  overflow-y: auto;

  .browser-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 32px 64px;
  }

  .browser-head {
    margin-bottom: 20px;
  }

  .browser-head-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .browser-title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text-default);
    letter-spacing: -0.01em;
  }

  .browser-subtitle {
    margin: 0;
    font-size: 13px;
    color: var(--color-text-muted);
  }

  .browser-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

  @media (max-width: 880px) {
    .browser-layout {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  .filter-rail {
    position: sticky;
    top: 0;
  }

  .filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .filter-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
  }

  .checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .checkbox-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .cb-count {
    font-size: 10px;
    color: var(--color-text-muted);
    padding: 0 5px;
    background: var(--color-surface-light);
    border-radius: 99px;
  }

  .tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .tag-count {
    font-size: 10px;
    opacity: 0.7;
    margin-left: 2px;
  }

  .browser-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .browser-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .search-wrap {
    flex: 1;
    min-width: 220px;
  }

  .toolbar-right {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .result-count {
    font-size: 12px;
    color: var(--color-text-muted);
  }

  .featured-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .featured-title {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }

  .featured-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
  }

  .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
  }

  .ext-card {
    cursor: pointer;
  }

  .card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
  }

  .card-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .card-head-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .card-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
  }

  .installed-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    background-color: var(--color-success);
    border-color: var(--color-success);
  }

  .card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-default);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
  }

  .card-head uix-tag[variant="primary"] {
    --uix-tag-background: color-mix(in srgb, var(--color-primary) 16%, transparent);
    --uix-tag-color: var(--color-primary);
  }

  .card-author {
    font-size: 11px;
    color: var(--color-text-muted);
  }

  .card-desc {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
  }

  .card-details {
    font-size: 12px;
    color: var(--color-primary);
    cursor: pointer;

    &:hover {
      text-decoration: underline;
    }
  }

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 64px 0;
    text-align: center;
  }

  .empty-icon {
    color: var(--color-text-muted);
    opacity: 0.4;
  }

  .empty-title {
    margin: 0;
    font-size: 14px;
    color: var(--color-text-muted);
  }
}


:where(.bsp-home, bsp-home) {
  display: block;
  width: 100%;
  height: 100%;
  overflow-y: auto;

  .welcome {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 48px 64px;
  }

  .welcome-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    column-gap: 48px;
    row-gap: 32px;
    align-items: start;
  }

  .section-start { grid-column: 1; grid-row: 1; }
  .section-quickstart { grid-column: 2; grid-row: 1; }
  .section-recent { grid-column: 1; grid-row: 2; }
  .section-extensions { grid-column: 2; grid-row: 2; }

  .section:empty { display: none; }

  @media (max-width: 640px) {
    .welcome-grid {
      grid-template-columns: 1fr;
      grid-template-rows: none;
      gap: 32px;
    }
    .section-start,
    .section-quickstart,
    .section-recent,
    .section-extensions {
      grid-column: 1;
      grid-row: auto;
    }
    .welcome {
      padding: 24px 20px 48px;
    }
  }

  .brand {
    margin-bottom: 32px;
  }

  .brand-name {
    font-size: 28px;
    font-weight: 300;
    margin: 0;
    color: var(--color-text-default);
    letter-spacing: -0.5px;
  }

  .brand-tagline {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 2px 0 0;
  }

  .section {
    min-width: 0;
  }

  .section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-default);
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .action-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    color: var(--color-primary);
    cursor: pointer;
    font-size: 13px;
    text-decoration: none;
    line-height: 1.5;

    &:hover {
      text-decoration: underline;
    }

    uix-icon {
      opacity: 0.7;
      flex-shrink: 0;
    }

    &.more {
      margin-top: 4px;
      opacity: 0.8;
    }
  }

  .recent-link {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 0;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.5;
    text-decoration: none;

    &:hover .recent-label {
      text-decoration: underline;
    }
  }

  .recent-label {
    color: var(--color-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
  }

  .recent-path {
    color: var(--color-text-muted);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .template-link {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 8px;
    margin: 0 -8px;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.1s;

    &:hover {
      background: var(--color-surface-light);
    }
  }

  .template-link-icon {
    color: var(--color-primary);
    margin-top: 2px;
    flex-shrink: 0;
  }

  .template-link-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .template-link-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-default);
    line-height: 1.4;
  }

  .template-link-desc {
    font-size: 12px;
    color: var(--color-text-muted);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}


:where(.bsp-home-sidebar, bsp-home-sidebar) {
  .fav-item {
    transition: background-color 0.15s;

    .fav-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;

      &:hover {
        transform: scale(1.15);
      }
    }
  }

  .fav-folder {
    transition: background-color 0.15s;
  }

  .emoji-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .fav-remove {
    transition: opacity 0.15s;
  }

  uix-draggable {
    cursor: grab;

    &.dragging {
      opacity: 0.3;
    }

    &:active {
      cursor: grabbing;
    }
  }

  .folder-drop-target {
    min-height: 0;
    transition: background-color 0.15s;

    &.over {
      background-color: rgba(var(--color-primary-rgb, 250, 189, 47), 0.1);
      border-radius: var(--radius-sm, 0.25rem);
    }
  }

  .folder-content-drop {
    min-height: 4px;
  }

  .quick-access-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 8px;
  }

  uix-droparea[droparea-id="root"] {
    min-height: 4px;
  }

  .explorer-wrapper {
    flex: 1 1 auto;
    min-height: 120px;
    max-height: 50vh;
    overflow-y: auto;
  }
}


:where(.bsp-recent, bsp-recent) {
  display: block;
  width: 100%;
  height: 100%;
  overflow-y: auto;

  .recent-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 32px 40px 48px;
  }

  .recent-heading {
    font-size: 22px;
    font-weight: 500;
    margin: 0 0 16px;
    color: var(--color-text-default);
  }

  .recent-empty {
    color: var(--color-text-muted);
    font-size: 13px;
  }

  .recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .recent-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.1s;
  }

  .recent-row:hover {
    background: var(--color-surface-light);
  }

  .recent-row-icon {
    color: var(--color-text-muted);
    flex-shrink: 0;
  }

  .recent-row-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
  }

  .recent-row-label {
    color: var(--color-text-default);
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .recent-row-scheme {
    color: var(--color-text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .recent-row-fav {
    opacity: 0;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: opacity 0.1s, color 0.1s;
    flex-shrink: 0;
  }

  .recent-row:hover .recent-row-fav {
    opacity: 0.5;
  }

  .recent-row-fav:hover {
    opacity: 1;
  }

  .recent-row-fav.is-fav {
    opacity: 1;
    color: var(--color-danger, #ef4444);
  }
}


:where(.bsp-raw-view, bsp-raw-view) {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;

  .raw-view {
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  uix-code {
    display: block;
    width: 100%;
    height: 100%;
  }

  .raw-state {
    padding: 24px;
  }
}


:where(.uix-link, uix-link) {

  display: inline-flex;
  align-items: center;
  justify-content: var(--uix-link-justify-content, center);
  width: var(--uix-link-width, auto);
  flex-direction: var(--uix-link-direction, row);
  gap: var(--uix-link-gap, var(--spacing-xs, 0.25rem));
  box-sizing: border-box;

  font-family: inherit;
  font-size: var(--uix-link-font-size, var(--text-sm, 0.875rem));
  font-weight: var(--uix-link-font-weight, var(--font-semibold, 600));
  line-height: var(--uix-link-line-height, 1.5);
  text-decoration: var(--uix-link-text-decoration, none);

  color: var(--uix-link-color, var(--text-color, inherit));
  cursor: pointer;

  &[vertical]::part(anchor) {
    display: flex;
    flex-direction: column;
  }

  &::part(anchor) {
    display: inline-flex;
    align-items: center;
    justify-content: var(--uix-link-justify-content, left);
    width: 100%;
    height: 100%;
    gap: var(--uix-link-gap, var(--spacing-xs, 0.25rem));
    flex-direction: var(--uix-link-direction, row);

    padding: var(--uix-link-padding-y, var(--spacing-sm, 0.5rem))
      var(--uix-link-padding-x, var(--spacing-md, 0.75rem));

    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-decoration: var(--uix-link-text-decoration, none);

    color: inherit;
    cursor: pointer;

    transition: var(
      --uix-link-transition,
      color 0.2s ease,
      opacity 0.2s ease,
      transform 0.1s ease
    );

    &:hover {
      color: var(--uix-link-hover-color, var(--uix-link-color));
      text-decoration: var(
        --uix-link-hover-text-decoration,
        var(--uix-link-text-decoration, none)
      );
      opacity: var(--uix-link-hover-opacity, 0.9);
    }

    &:active {
      color: var(--uix-link-active-color, var(--uix-link-color));
      transform: var(--uix-link-active-transform, scale(0.98));
    }

    &:focus-visible {
      outline: 2px solid var(--color-primary-dark, #d79921);
      outline-offset: 2px;
    }

    &:visited {
      color: var(--uix-link-visited-color, var(--uix-link-color));
    }

    &[disabled],
    &[aria-disabled="true"] {
      opacity: var(--uix-link-disabled-opacity, 0.5);
      cursor: not-allowed;
      pointer-events: none;
    }
  }

  &::part(icon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--uix-link-icon-size, 1.25rem);
    height: var(--uix-link-icon-size, 1.25rem);
    color: var(--uix-link-icon-color, currentColor);
    flex-shrink: 0;
  }

  &[underline] {
    --uix-link-text-decoration: underline;
  }

  &[underline="hover"] {
    --uix-link-text-decoration: none;
    --uix-link-hover-text-decoration: underline;
  }

  &[variant="primary"] {
    --uix-link-color: var(--color-primary);
    --uix-link-hover-color: var(--color-primary-dark);
    --uix-link-active-color: var(--color-primary-darker);
  }

  &[variant="secondary"] {
    --uix-link-color: var(--color-secondary);
    --uix-link-hover-color: var(--color-secondary-dark);
    --uix-link-active-color: var(--color-secondary-darker);
  }

  &[variant="muted"] {
    --uix-link-color: var(--text-muted);
    --uix-link-hover-color: var(--text-color);
  }

  &[size="xs"] {
    --uix-link-font-size: var(--text-xs, 0.75rem);
    --uix-link-padding-y: 0.2rem;
    --uix-link-padding-x: 0.4rem;
    --uix-link-gap: 0.125rem;
    --uix-link-icon-size: 0.75em;
  }

  &[size="sm"] {
    --uix-link-font-size: var(--text-sm, 0.875rem);
    --uix-link-padding-y: 0.25rem;
    --uix-link-padding-x: 0.5rem;
    --uix-link-gap: 0.25rem;
    --uix-link-icon-size: 0.875em;
  }

  &[size="md"] {
    --uix-link-font-size: var(--text-base, 1rem);
    --uix-link-padding-y: 0.5rem;
    --uix-link-padding-x: 0.75rem;
    --uix-link-gap: 0.375rem;
    --uix-link-icon-size: 1em;
  }

  &[size="lg"] {
    --uix-link-font-size: var(--text-lg, 1.125rem);
    --uix-link-padding-y: 0.75rem;
    --uix-link-padding-x: 1rem;
    --uix-link-gap: 0.5rem;
    --uix-link-icon-size: 1.125em;
  }

  &[size="xl"] {
    --uix-link-font-size: var(--text-xl, 1.25rem);
    --uix-link-padding-y: 1rem;
    --uix-link-padding-x: 1.25rem;
    --uix-link-gap: 0.625rem;
    --uix-link-icon-size: 1.25em;
  }

  &[compact] {
    --uix-link-padding-x: 0;
    --uix-link-padding-y: 0;
  }

  &[w-full],
  &[wfull] {
    width: 100%;
    display: flex;
  }
}


:where(.uix-container, uix-container) {
  display: block;
  box-sizing: border-box;
  background: var(--uix-container-background, var(--color-surface-lighter));
  border: var(--border-width, 1px) solid var(--uix-container-border-color, var(--color-surface-dark));
  border-radius: var(--uix-container-border-radius, var(--radius-md, 0.375rem));
  overflow: var(--uix-container-overflow, visible);

  --uix-container-padding-none: 0;
  --uix-container-padding-sm: var(--spacing-sm, 0.5rem);
  --uix-container-padding-md: var(--spacing-md, 0.75rem) var(--spacing-lg, 1rem);
  --uix-container-padding-lg: var(--spacing-lg, 1rem) var(--spacing-xl, 1.5rem);

  &[padding="none"] {
    padding: var(--uix-container-padding-none);
  }

  &[padding="sm"] {
    padding: var(--uix-container-padding-sm);
  }

  &[padding="md"] {
    padding: var(--uix-container-padding-md);
  }

  &[padding="lg"] {
    padding: var(--uix-container-padding-lg);
  }

  &[overflow="visible"] {
    --uix-container-overflow: visible;
  }

  &[overflow="hidden"] {
    --uix-container-overflow: hidden;
  }

  &[overflow="auto"] {
    --uix-container-overflow: auto;
  }

  &[overflow="scroll"] {
    --uix-container-overflow: scroll;
  }
}


:where(.uix-popover-controller, uix-popover-controller) {
  position: fixed;
  z-index: 10000;
  display: none;

  &[data-open] {
    display: flex;
    flex-direction: column;
  }
}