/* basic/XWUIAccordion/XWUIAccordion.css */
/**
 * XWUIAccordion Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/accordion/*.css (component-specific border widths)
 * - Roundness: theme/roundness/accordion/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-accordion {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.xwui-accordion-bordered {
    border: var(--border-accordion-width, var(--border-width-regular, 1.5px)) var(--border-accordion-style, solid) var(--border-accordion-color, var(--border-color, rgba(0, 0, 0, 0.1)));
    border-radius: var(--radius-accordion, var(--radius-md, 8px));
    overflow: hidden;
}

.xwui-accordion-flush {
    border: none;
    border-radius: 0;
}

/* Accordion Item */
.xwui-accordion-item {
    border-bottom: var(--border-accordion-width, var(--border-width-regular, 1.5px)) solid var(--border-accordion-color, var(--border-color, rgba(0, 0, 0, 0.1)));
}

.xwui-accordion-item:last-child {
    border-bottom: none;
}

.xwui-accordion-flush .xwui-accordion-item {
    border-bottom: var(--border-accordion-width, var(--border-width-regular, 1.5px)) solid var(--border-accordion-color, var(--border-color, rgba(0, 0, 0, 0.1)));
}

.xwui-accordion-flush .xwui-accordion-item:last-child {
    border-bottom: none;
}

/* Header */
.xwui-accordion-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.75rem);
    padding: var(--spacing-md, 1rem);
    background: var(--bg-primary, #ffffff);
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease;
}

.xwui-accordion-header:hover {
    background: var(--bg-hover, #f8f9fa);
}

.xwui-accordion-header:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--accent-primary, #4f46e5);
}

.xwui-accordion-item-disabled .xwui-accordion-header {
    cursor: not-allowed;
    opacity: 0.6;
}

.xwui-accordion-item-disabled .xwui-accordion-header:hover {
    background: var(--bg-primary, #ffffff);
}

/* Icon */
.xwui-accordion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--text-secondary, #6c757d);
}

.xwui-accordion-icon svg {
    width: 100%;
    height: 100%;
}

/* Title */
.xwui-accordion-title {
    flex: 1;
    font-weight: var(--font-weight-medium, 500);
    font-family: var(--font-headings-family, var(--font-family-base, sans-serif));
    color: var(--text-primary, #212529);
}

/* Arrow */
.xwui-accordion-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--text-secondary, #6c757d);
    transition: transform 0.2s ease;
}

.xwui-accordion-arrow svg {
    width: 100%;
    height: 100%;
}

.xwui-accordion-item-expanded .xwui-accordion-arrow {
    transform: rotate(180deg);
}

/* Content */
.xwui-accordion-content-wrapper {
    overflow: hidden;
}

.xwui-accordion-content {
    padding: var(--spacing-md, 1rem);
    padding-top: 0;
    color: var(--text-secondary, #6c757d);
}

/* Expanded state */
.xwui-accordion-item-expanded .xwui-accordion-header {
    background: var(--bg-secondary, #f8f9fa);
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */

/* Size variants */
:is(.xwui-accordion-s,.xwui-accordion-sm) .xwui-accordion-header {
    padding: var(--spacing-sm, 0.75rem);
    font-size: var(--font-size-sm, 0.875rem);
}

:is(.xwui-accordion-s,.xwui-accordion-sm) .xwui-accordion-content {
    padding: 0.75rem;
    padding-top: 0;
    font-size: 0.875rem;
}

:is(.xwui-accordion-l,.xwui-accordion-lg) .xwui-accordion-header {
    padding: var(--spacing-lg, 1.25rem);
    font-size: var(--font-size-lg, 1.125rem);
}

:is(.xwui-accordion-l,.xwui-accordion-lg) .xwui-accordion-content {
    padding: 1.25rem;
    padding-top: 0;
}


/* basic/XWUIActionGroup/XWUIActionGroup.css */
/**
 * XWUIActionGroup — trailing-actions cluster (meta text + buttons + icon buttons).
 * Uses theme tokens only; no hardcoded colors.
 */

.xwui-action-group {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    min-width: 0;
    color: var(--text-primary);
}

.xwui-action-group-full {
    display: flex;
    width: 100%;
}

/* Meta text — subtle label, e.g. "Edited Mar 12" */
.xwui-action-group-meta {
    color: var(--text-tertiary);
    font-size: 12px;
    padding: 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
}

/* Spacer / Separator */
.xwui-action-group-spacer { flex: 1 1 auto; }
.xwui-action-group-separator {
    width: 1px;
    align-self: stretch;
    background: var(--border-color);
    margin: 4px 4px;
}

/* Label buttons (e.g. Share dropdown) */
.xwui-action-group-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    height: 28px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    user-select: none;
}
.xwui-action-group-btn:hover:not(:disabled) {
    background: var(--bg-hover);
}
.xwui-action-group-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.xwui-action-group-btn-ghost { background: transparent; }
.xwui-action-group-btn-outline {
    border-color: var(--border-color);
    background: var(--bg-primary);
}
.xwui-action-group-btn-default {
    background: var(--bg-secondary, var(--bg-elevated));
}
.xwui-action-group-btn-primary {
    background: var(--accent-primary);
    color: var(--text-inverse, #fff);
}
.xwui-action-group-btn-primary:hover:not(:disabled) {
    filter: brightness(1.05);
}

.xwui-action-group-btn-label {
    font-weight: 500;
    white-space: nowrap;
}

.xwui-action-group-btn-leading,
.xwui-action-group-btn-trailing,
.xwui-action-group-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    flex-shrink: 0;
}

.xwui-action-group-btn-trailing { opacity: 0.7; }

/* Icon-only buttons (link, star, more) */
.xwui-action-group-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.xwui-action-group-icon-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.xwui-action-group-icon-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Size variants scale paddings and heights */
:is(.xwui-action-group-3xs,.xwui-action-group-xxxs) .xwui-action-group-btn,
:is(.xwui-action-group-3xs,.xwui-action-group-xxxs) .xwui-action-group-icon-btn { height: 20px; font-size: 11px; padding: 0 6px; }
:is(.xwui-action-group-2xs,.xwui-action-group-xxs)  .xwui-action-group-btn,
:is(.xwui-action-group-2xs,.xwui-action-group-xxs)  .xwui-action-group-icon-btn { height: 22px; font-size: 11px; padding: 0 7px; }
.xwui-action-group-xs   .xwui-action-group-btn,
.xwui-action-group-xs   .xwui-action-group-icon-btn { height: 24px; font-size: 12px; padding: 0 8px; }
/* sm is the default (28px), no override needed */
:is(.xwui-action-group-m,.xwui-action-group-md)   .xwui-action-group-btn { height: 32px; font-size: 14px; padding: 6px 12px; }
:is(.xwui-action-group-m,.xwui-action-group-md)   .xwui-action-group-icon-btn { width: 32px; height: 32px; }
:is(.xwui-action-group-l,.xwui-action-group-lg)   .xwui-action-group-btn { height: 36px; font-size: 14px; padding: 6px 14px; }
:is(.xwui-action-group-l,.xwui-action-group-lg)   .xwui-action-group-icon-btn { width: 36px; height: 36px; }
.xwui-action-group-xl   .xwui-action-group-btn { height: 40px; font-size: 15px; padding: 8px 16px; }
.xwui-action-group-xl   .xwui-action-group-icon-btn { width: 40px; height: 40px; }

/* basic/XWUIAffix/XWUIAffix.css */
/**
 * XWUIAffix Component Styles
 */

.xwui-affix-container {
    /* Container has no specific styles */
}

.xwui-affix-placeholder {
    /* Placeholder maintains space */
}

.xwui-affix {
    transition: all 0.3s ease;
}

.xwui-affix-affixed {
    z-index: 100;
    box-shadow: var(--shadow-md);
}


/* basic/XWUIAlert/XWUIAlert.css */
/**
 * XWUIAlert Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/alert/*.css (component-specific border widths)
 * - Roundness: theme/roundness/alert/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm, 0.75rem);
    padding: var(--spacing-md, 1rem);
    border-radius: var(--radius-alert, var(--radius-md, 8px));
    background: var(--bg-secondary);
    transition: opacity 0.2s, transform 0.2s;
}

.xwui-alert-closing {
    opacity: 0;
    transform: translateY(-8px);
}

/* Variants - use accent colors with light backgrounds */
.xwui-alert-info {
    background: var(--bg-elevated);
    color: var(--accent-primary);
    border: var(--border-alert-width, var(--border-width-regular, 1.5px)) solid var(--accent-primary);
}

.xwui-alert-success {
    background: var(--bg-elevated);
    color: var(--accent-success);
    border: var(--border-alert-width, var(--border-width-regular, 1.5px)) solid var(--accent-success);
}

.xwui-alert-warning {
    background: var(--bg-elevated);
    color: var(--accent-warning);
    border: var(--border-alert-width, var(--border-width-regular, 1.5px)) solid var(--accent-warning);
}

.xwui-alert-error {
    background: var(--bg-elevated);
    color: var(--accent-error);
    border: var(--border-alert-width, var(--border-width-regular, 1.5px)) solid var(--accent-error);
}

/* Bordered - explicit border variant */
.xwui-alert-bordered.xwui-alert-info {
    border-color: var(--accent-primary);
}

.xwui-alert-bordered.xwui-alert-success {
    border-color: var(--accent-success);
}

.xwui-alert-bordered.xwui-alert-warning {
    border-color: var(--accent-warning);
}

.xwui-alert-bordered.xwui-alert-error {
    border-color: var(--accent-error);
}

/* Filled - use accent colors as background */
.xwui-alert-filled.xwui-alert-info {
    background: var(--accent-primary);
    color: var(--text-inverse);
    border-color: var(--accent-primary);
}

.xwui-alert-filled.xwui-alert-success {
    background: var(--accent-success);
    color: var(--text-inverse);
    border-color: var(--accent-success);
}

.xwui-alert-filled.xwui-alert-warning {
    background: var(--accent-warning);
    color: var(--text-inverse);
    border-color: var(--accent-warning);
}

.xwui-alert-filled.xwui-alert-error {
    background: var(--accent-error);
    color: var(--text-inverse);
    border-color: var(--accent-error);
}

/* Icon */
.xwui-alert-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.xwui-alert-icon svg {
    width: 20px;
    height: 20px;
}

/* Content */
.xwui-alert-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.25rem);
}

.xwui-alert-title {
    font-weight: var(--font-weight-semibold, 600);
    font-size: var(--font-size-base, 0.9375rem);
}

.xwui-alert-message {
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.5;
    opacity: 0.9;
}

/* Action */
.xwui-alert-action {
    margin-top: var(--spacing-xs, 0.5rem);
    padding: var(--spacing-xs, 0.375rem) var(--spacing-sm, 0.75rem);
    border: none;
    background: transparent;
    font-weight: var(--font-weight-medium, 500);
    font-size: var(--font-size-sm, 0.875rem);
    text-decoration: underline;
    cursor: pointer;
    color: inherit;
    align-self: flex-start;
}

.xwui-alert-action:hover {
    opacity: 0.8;
}

/* Close button */
.xwui-alert-close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs, 0.25rem);
    border: none;
    background: transparent;
    cursor: pointer;
    color: currentColor;
    opacity: 0.5;
    border-radius: var(--radius-sm, 4px);
    transition: opacity 0.2s, background 0.2s;
}

.xwui-alert-close:hover {
    opacity: 1;
    background: var(--bg-hover);
}

.xwui-alert-filled .xwui-alert-close:hover {
    background: var(--bg-active);
}

.xwui-alert-close svg {
    width: 16px;
    height: 16px;
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */

/* basic/XWUIAnchor/XWUIAnchor.css */
/**
 * XWUIAnchor Component Styles
 */

.xwui-anchor-container {
    /* Container has no specific styles */
}

.xwui-anchor {
    /* Anchor navigation */
}

.xwui-anchor-affix {
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
}

.xwui-anchor-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.xwui-anchor-item {
    margin: 0;
}

.xwui-anchor-link {
    display: block;
    padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
    color: var(--text-secondary, #666);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: all 0.2s;
}

.xwui-anchor-link:hover {
    color: var(--accent-primary, #1890ff);
    border-left-color: var(--accent-primary, #1890ff);
}

.xwui-anchor-link-active {
    color: var(--accent-primary, #1890ff);
    border-left-color: var(--accent-primary, #1890ff);
    font-weight: var(--font-weight-medium, 500);
}

.xwui-anchor-list-nested {
    padding-left: 16px;
}


/* basic/XWUIAnnounce/XWUIAnnounce.css */
/* Visually hidden but available to screen readers */
.xwui-announce {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* basic/XWUIAspectRatio/XWUIAspectRatio.css */
/**
 * XWUIAspectRatio Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 */

.xwui-aspect-ratio {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.xwui-aspect-ratio-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Ensure images and videos fill the container properly */
.xwui-aspect-ratio-content > img,
.xwui-aspect-ratio-content > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Preset ratio classes (alternative to inline styles) */
.xwui-aspect-ratio-1-1 {
    padding-bottom: 100%;
}

.xwui-aspect-ratio-4-3 {
    padding-bottom: 75%;
}

.xwui-aspect-ratio-16-9 {
    padding-bottom: 56.25%;
}

.xwui-aspect-ratio-21-9 {
    padding-bottom: 42.857%;
}

.xwui-aspect-ratio-3-2 {
    padding-bottom: 66.667%;
}

.xwui-aspect-ratio-2-3 {
    padding-bottom: 150%;
}

.xwui-aspect-ratio-9-16 {
    padding-bottom: 177.778%;
}

/* Object fit variants */
.xwui-aspect-ratio-contain .xwui-aspect-ratio-content > img,
.xwui-aspect-ratio-contain .xwui-aspect-ratio-content > video {
    object-fit: contain;
}

.xwui-aspect-ratio-cover .xwui-aspect-ratio-content > img,
.xwui-aspect-ratio-cover .xwui-aspect-ratio-content > video {
    object-fit: cover;
}

.xwui-aspect-ratio-fill .xwui-aspect-ratio-content > img,
.xwui-aspect-ratio-fill .xwui-aspect-ratio-content > video {
    object-fit: fill;
}


/* basic/XWUIAutocomplete/XWUIAutocomplete.css */
/**
 * XWUIAutocomplete Component Styles
 */

.xwui-autocomplete-container {
    position: relative;
}

.xwui-autocomplete {
    position: relative;
}

.xwui-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--spacing-xs, 4px);
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--border-color, #d9d9d9);
    border-radius: var(--radius-sm, 4px);
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.15));
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
}

.xwui-autocomplete-option {
    padding: var(--spacing-sm, 8px) 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.xwui-autocomplete-option:hover {
    background-color: var(--bg-hover, #f5f5f5);
}

.xwui-autocomplete-option-selected {
    background-color: var(--bg-active, #e6f7ff);
}

.xwui-autocomplete-option-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.xwui-autocomplete-empty,
.xwui-autocomplete-loading {
    padding: var(--spacing-sm, 8px) 12px;
    text-align: center;
    color: var(--text-tertiary, #999);
}


/* basic/XWUIAvatar/XWUIAvatar.css */
/**
 * XWUIAvatar Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Roundness: theme/roundness/avatar/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--bg-secondary, #f8f9fa);
}

.xwui-avatar-circle {
    border-radius: 50%;
}

.xwui-avatar-square {
    border-radius: var(--radius-avatar, var(--radius-sm, 6px));
}

.xwui-avatar-bordered {
    border: var(--border-avatar-width, var(--border-width-thick, 2px)) var(--border-avatar-style, solid) var(--bg-primary);
    box-shadow: 0 0 0 1px var(--border-avatar-color, var(--border-color, #dee2e6));
}

/* Size variants */
.xwui-avatar-xs {
    width: 24px;
    height: 24px;
    font-size: var(--font-size-xs, 0.625rem);
}

.xwui-avatar-small {
    width: 32px;
    height: 32px;
    font-size: var(--font-size-xs, 0.75rem);
}

.xwui-avatar-medium {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-sm, 0.875rem);
}

.xwui-avatar-large {
    width: 48px;
    height: 48px;
    font-size: var(--font-size-base, 1rem);
}

.xwui-avatar-xl {
    width: 64px;
    height: 64px;
    font-size: var(--font-size-xl, 1.25rem);
}

/* Image */
.xwui-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fallback */
.xwui-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--text-inverse);
    font-weight: var(--font-weight-semibold, 600);
    text-transform: uppercase;
}

/* Status indicator */
.xwui-avatar-status {
    position: absolute;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    border: var(--border-width-thick, 2px) solid var(--bg-primary);
}

.xwui-avatar-xs .xwui-avatar-status,
.xwui-avatar-small .xwui-avatar-status {
    width: 8px;
    height: 8px;
}

.xwui-avatar-medium .xwui-avatar-status,
.xwui-avatar-large .xwui-avatar-status {
    width: 10px;
    height: 10px;
}

.xwui-avatar-xl .xwui-avatar-status {
    width: 12px;
    height: 12px;
}

.xwui-avatar-status-online {
    background: var(--accent-success);
}

.xwui-avatar-status-offline {
    background: var(--text-tertiary);
}

.xwui-avatar-status-away {
    background: var(--accent-warning);
}

.xwui-avatar-status-busy {
    background: var(--accent-error);
}

/* Avatar group */
.xwui-avatar-group {
    display: flex;
    flex-direction: row-reverse;
}

.xwui-avatar-group .xwui-avatar {
    margin-left: -8px;
    border: var(--border-width-thick, 2px) solid var(--bg-primary);
}

.xwui-avatar-group .xwui-avatar:last-child {
    margin-left: 0;
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */


/* basic/XWUIAvatarGroup/XWUIAvatarGroup.css */
/**
 * XWUIAvatarGroup Component Styles
 */

.xwui-avatar-group-container {
    /* Container has no specific styles */
}

.xwui-avatar-group {
    display: inline-flex;
    align-items: center;
}

.xwui-avatar-group-item {
    position: relative;
    border: 2px solid var(--bg-primary, #ffffff);
    border-radius: 50%;
    overflow: hidden;
}

.xwui-avatar-group-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bg-secondary, #f0f0f0);
    border: 2px solid var(--bg-primary, #ffffff);
    color: var(--text-secondary, #666);
    font-size: var(--font-size-xs, 12px);
    font-weight: var(--font-weight-medium, 500);
    cursor: default;
}


/* basic/XWUIBackdrop/XWUIBackdrop.css */
/**
 * XWUIBackdrop Component Styles
 * 
 * Style Dependencies (loaded in testers/app):
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Roundness: theme/roundness/backdrop/*.css (component-specific roundness)
 * - Lines: theme/lines/backdrop/*.css (component-specific border widths)
 * - Typography: theme/typography/*.css
 */

.xwui-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    
    /* Colors from theme (MANDATORY - use variables, never hardcode) */
    background-color: var(--color-backdrop-bg, rgba(0, 0, 0, 0.5));
    
    /* Z-index from config or default */
    z-index: var(--backdrop-z-index, 1000);
    
    /* Layout only - no hardcoded values */
    cursor: pointer;
    transition: opacity var(--transition-duration-backdrop, 0.2s) ease;
}

.xwui-backdrop-invisible {
    background-color: transparent;
}


/* basic/XWUIBackToTop/XWUIBackToTop.css */
/**
 * XWUIBackToTop Component Styles
 */

.xwui-back-to-top-container {
    /* Container has no specific styles */
}

.xwui-back-to-top {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--accent-primary, #1890ff);
    color: var(--text-inverse, #ffffff);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.15));
    transition: opacity 0.3s, transform 0.3s;
    z-index: 1000;
}

.xwui-back-to-top:hover {
    background-color: var(--accent-hover, #40a9ff);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.2));
}

.xwui-back-to-top:active {
    transform: translateY(0);
}

.xwui-back-to-top svg {
    width: 20px;
    height: 20px;
}


/* basic/XWUIBadge/XWUIBadge.css */
/**
 * XWUIBadge Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Roundness: theme/roundness/badge/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-semibold, 600);
    border-radius: var(--radius-badge, 999px);
    white-space: nowrap;
}

/* Size variants */
.xwui-badge-small {
    min-width: 16px;
    height: 16px;
    padding: 0 var(--spacing-xs, 4px);
    font-size: var(--font-size-xs, 0.625rem);
}

.xwui-badge-medium {
    min-width: 20px;
    height: 20px;
    padding: 0 var(--spacing-xs, 6px);
    font-size: var(--font-size-xs, 0.75rem);
}

.xwui-badge-large {
    min-width: 24px;
    height: 24px;
    padding: 0 var(--spacing-sm, 8px);
    font-size: var(--font-size-sm, 0.8125rem);
}

/* Dot variant */
.xwui-badge-dot {
    min-width: auto;
    padding: 0;
}

.xwui-badge-dot.xwui-badge-small {
    width: 6px;
    height: 6px;
}

.xwui-badge-dot.xwui-badge-medium {
    width: 8px;
    height: 8px;
}

.xwui-badge-dot.xwui-badge-large {
    width: 10px;
    height: 10px;
}

/* Color variants */
.xwui-badge-default {
    background: var(--bg-tertiary, #e9ecef);
    color: var(--text-primary, #212529);
}

.xwui-badge-primary {
    background: var(--accent-primary, #4f46e5);
    color: var(--text-inverse);
}

.xwui-badge-success {
    background: var(--accent-success, #10b981);
    color: var(--text-inverse);
}

.xwui-badge-warning {
    background: var(--accent-warning, #f59e0b);
    color: var(--text-inverse);
}

.xwui-badge-error {
    background: var(--accent-error, #ef4444);
    color: var(--text-inverse);
}

/* Position variants (for use as overlay) */
.xwui-badge-top-right {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
}

.xwui-badge-top-left {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
}

.xwui-badge-bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(50%, 50%);
}

.xwui-badge-bottom-left {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(-50%, 50%);
}

/* Badge container (wrapper for positioned badges) */
.xwui-badge-container {
    position: relative;
    display: inline-flex;
}

/* Animation for count changes */
@keyframes xwui-badge-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.xwui-badge-animate {
    animation: xwui-badge-pulse 0.3s ease;
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */


/* basic/XWUIBanner/XWUIBanner.css */
/**
 * XWUIBanner Component Styles
 * Vuetify Banner parity: dismissible announcement bar.
 */
.xwui-banner {
  width: 100%;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--color-banner-text, var(--color-on-surface));
  background: var(--color-banner-bg, #e3f2fd);
}

.xwui-banner--sticky {
  position: sticky;
  top: 0;
  z-index: 100;
}

.xwui-banner--info {
  background: var(--color-banner-info-bg, #e3f2fd);
  color: var(--color-banner-info-text, #0d47a1);
}

.xwui-banner--success {
  background: var(--color-banner-success-bg, #e8f5e9);
  color: var(--color-banner-success-text, #1b5e20);
}

.xwui-banner--warning {
  background: var(--color-banner-warning-bg, #fff3e0);
  color: var(--color-banner-warning-text, #e65100);
}

.xwui-banner--error {
  background: var(--color-banner-error-bg, #ffebee);
  color: var(--color-banner-error-text, #b71c1c);
}

.xwui-banner-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

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

.xwui-banner-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.xwui-banner-icon svg {
  width: 24px;
  height: 24px;
}

.xwui-banner-content {
  flex: 1;
  min-width: 0;
}

.xwui-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.xwui-banner-action {
  padding: 6px 12px;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-size: inherit;
  cursor: pointer;
}

.xwui-banner-action:hover {
  opacity: 0.9;
}

.xwui-banner-close {
  flex-shrink: 0;
  padding: 4px;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
}

.xwui-banner-close:hover {
  opacity: 1;
}

/* basic/XWUIBarAjax/XWUIBarAjax.css */
/**
 * XWUIBarAjax Component Styles
 * Quasar Ajax Bar parity: thin loading bar at top/bottom of viewport.
 */
.xwui-ajax-bar {
  position: fixed;
  left: 0;
  right: 0;
  height: var(--xwui-ajax-bar-size, 4px);
  /* Track background — color-mix on --text-primary so the track is visible
     against any backdrop (light or dark). Previously rgba(0,0,0,0.08) which
     became invisible on dark themes. */
  background: color-mix(in srgb, var(--text-primary) 8%, transparent);
  z-index: 10000;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.xwui-ajax-bar--visible {
  opacity: 1;
  visibility: visible;
}

.xwui-ajax-bar--top {
  top: 0;
}

.xwui-ajax-bar--bottom {
  bottom: 0;
  top: auto;
}

/* ── Container scope ─────────────────────────────────────────────────
   When `scope: 'container'` is set, the bar is absolutely-positioned
   relative to its mount element instead of fixed to the viewport. The
   component auto-promotes the mount to `position: relative` if needed.
   z-index drops to 2 so the scoped bar doesn't compete with global
   overlays. */
.xwui-ajax-bar--container {
  position: absolute;
  z-index: 2;
}

.xwui-ajax-bar-fill {
  height: 100%;
  /* Progress fill color — uses --accent-primary (the canonical name).
     The --color-primary fallback previously referenced here isn't defined
     by any accent theme, so the fallback never resolved; switching to the
     accent family guarantees a color regardless of accent pick. */
  background: var(--xwui-ajax-bar-color, var(--accent-primary));
  transition: width 0.2s ease;
}

.xwui-ajax-bar-fill--indeterminate {
  width: 30% !important;
  animation: xwui-ajax-bar-indeterminate 1.2s ease-in-out infinite;
}

@keyframes xwui-ajax-bar-indeterminate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(433%);
  }
}

/* basic/XWUIBarApp/XWUIBarApp.css */
/**
 * XWUIBarApp Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Typography: theme/typography/*.css
 */

.xwui-appbar {
    display: flex;
    align-items: center;
    width: 100%;
    background: var(--bg-primary);
    transition: background var(--motion-duration-normal, 0.2s) var(--motion-easing-standard, ease), box-shadow var(--motion-duration-normal, 0.2s) var(--motion-easing-standard, ease), height 0.25s ease;
}

/* M3 center-aligned: title in center, nav icon left, actions right */
.xwui-appbar-layout-center-aligned .xwui-appbar-left {
    flex: 1;
    justify-content: flex-start;
    min-width: 0;
}

.xwui-appbar-layout-center-aligned .xwui-appbar-center {
    flex: 0 1 auto;
    justify-content: center;
}

.xwui-appbar-layout-center-aligned .xwui-appbar-right {
    flex: 1;
    justify-content: flex-end;
    min-width: 0;
}

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

/* M3 collapse-on-scroll (medium/large) */
.xwui-appbar-collapsible {
    overflow: hidden;
}

.xwui-appbar-collapsible .xwui-appbar-inner {
    transition: opacity 0.2s ease;
}

.xwui-appbar-collapsed :is(.xwui-appbar-l,.xwui-appbar-lg) .xwui-appbar-title {
    font-size: var(--font-size-xl, 1.25rem);
}

.xwui-appbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 0 var(--spacing-md, 1rem);
    max-width: 100%;
}

/* Sections */
.xwui-appbar-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 1rem);
    flex-shrink: 0;
}

.xwui-appbar-center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 0 var(--spacing-md, 1rem);
}

.xwui-appbar-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.75rem);
    flex-shrink: 0;
}

/* Logo */
.xwui-appbar-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.xwui-appbar-logo img {
    height: 32px;
    width: auto;
}

.xwui-appbar-logo svg {
    height: 32px;
    width: auto;
}

/* Title */
.xwui-appbar-title {
    margin: 0;
    font-size: var(--font-size-xl, 1.25rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary);
    white-space: nowrap;
}

/* Size variants (canonical 9-step scale) */
:is(.xwui-appbar-3xs,.xwui-appbar-xxxs) { height: 24px; }
:is(.xwui-appbar-4xs,.xwui-appbar-xxxxs) { height: 12px; }
:is(.xwui-appbar-3xs,.xwui-appbar-xxxs) .xwui-appbar-title { font-size: var(--font-size-xs, 0.625rem); }
:is(.xwui-appbar-4xs,.xwui-appbar-xxxxs) .xwui-appbar-title { font-size: var(--font-size-xs, 0.625rem); }
:is(.xwui-appbar-3xs,.xwui-appbar-xxxs) .xwui-appbar-logo img,
:is(.xwui-appbar-3xs,.xwui-appbar-xxxs) .xwui-appbar-logo svg { height: 12px; }
:is(.xwui-appbar-4xs,.xwui-appbar-xxxxs) .xwui-appbar-logo img,
:is(.xwui-appbar-4xs,.xwui-appbar-xxxxs) .xwui-appbar-logo svg { height: 6px; }

:is(.xwui-appbar-2xs,.xwui-appbar-xxs) { height: 32px; }
:is(.xwui-appbar-2xs,.xwui-appbar-xxs) .xwui-appbar-title { font-size: var(--font-size-xs, 0.75rem); }
:is(.xwui-appbar-2xs,.xwui-appbar-xxs) .xwui-appbar-logo img,
:is(.xwui-appbar-2xs,.xwui-appbar-xxs) .xwui-appbar-logo svg { height: 16px; }

.xwui-appbar-xs { height: 40px; }
.xwui-appbar-xs .xwui-appbar-title { font-size: var(--font-size-sm, 0.875rem); }
.xwui-appbar-xs .xwui-appbar-logo img,
.xwui-appbar-xs .xwui-appbar-logo svg { height: 20px; }

:is(.xwui-appbar-s,.xwui-appbar-sm) {
    height: 48px;
}

:is(.xwui-appbar-s,.xwui-appbar-sm) .xwui-appbar-title {
    font-size: var(--font-size-base, 1rem);
}

:is(.xwui-appbar-s,.xwui-appbar-sm) .xwui-appbar-logo img,
:is(.xwui-appbar-s,.xwui-appbar-sm) .xwui-appbar-logo svg {
    height: 24px;
}

:is(.xwui-appbar-m,.xwui-appbar-md) {
    height: 64px;
}

:is(.xwui-appbar-l,.xwui-appbar-lg) {
    height: 80px;
}

:is(.xwui-appbar-l,.xwui-appbar-lg) .xwui-appbar-title {
    font-size: var(--font-size-2xl, 1.5rem);
}

:is(.xwui-appbar-l,.xwui-appbar-lg) .xwui-appbar-logo img,
:is(.xwui-appbar-l,.xwui-appbar-lg) .xwui-appbar-logo svg {
    height: 40px;
}

.xwui-appbar-xl { height: 96px; }
.xwui-appbar-xl .xwui-appbar-title { font-size: var(--font-size-3xl, 1.75rem); }
.xwui-appbar-xl .xwui-appbar-logo img,
.xwui-appbar-xl .xwui-appbar-logo svg { height: 48px; }

:is(.xwui-appbar-2xl,.xwui-appbar-xxl) { height: 124px; }
:is(.xwui-appbar-2xl,.xwui-appbar-xxl) .xwui-appbar-title { font-size: var(--font-size-4xl, 2rem); }
:is(.xwui-appbar-2xl,.xwui-appbar-xxl) .xwui-appbar-logo img,
:is(.xwui-appbar-2xl,.xwui-appbar-xxl) .xwui-appbar-logo svg { height: 60px; }

:is(.xwui-appbar-3xl,.xwui-appbar-xxxl) { height: 156px; }
:is(.xwui-appbar-4xl,.xwui-appbar-xxxxl) { height: 249.6px; }
:is(.xwui-appbar-3xl,.xwui-appbar-xxxl) .xwui-appbar-title { font-size: var(--font-size-5xl, 2.5rem); }
:is(.xwui-appbar-4xl,.xwui-appbar-xxxxl) .xwui-appbar-title { font-size: var(--font-size-5xl, 2.5rem); }
:is(.xwui-appbar-3xl,.xwui-appbar-xxxl) .xwui-appbar-logo img,
:is(.xwui-appbar-3xl,.xwui-appbar-xxxl) .xwui-appbar-logo svg { height: 72px; }
:is(.xwui-appbar-4xl,.xwui-appbar-xxxxl) .xwui-appbar-logo img,
:is(.xwui-appbar-4xl,.xwui-appbar-xxxxl) .xwui-appbar-logo svg { height: 115.2px; }

/* Legacy size aliases */
:is(.xwui-appbar-s,.xwui-appbar-sm) { height: 48px; }
:is(.xwui-appbar-s,.xwui-appbar-sm) .xwui-appbar-title { font-size: var(--font-size-base, 1rem); }
:is(.xwui-appbar-s,.xwui-appbar-sm) .xwui-appbar-logo img,
:is(.xwui-appbar-s,.xwui-appbar-sm) .xwui-appbar-logo svg { height: 24px; }
:is(.xwui-appbar-m,.xwui-appbar-md) { height: 64px; }
:is(.xwui-appbar-l,.xwui-appbar-lg) { height: 80px; }
:is(.xwui-appbar-l,.xwui-appbar-lg) .xwui-appbar-title { font-size: var(--font-size-2xl, 1.5rem); }
:is(.xwui-appbar-l,.xwui-appbar-lg) .xwui-appbar-logo img,
:is(.xwui-appbar-l,.xwui-appbar-lg) .xwui-appbar-logo svg { height: 40px; }

/* Variants */
.xwui-appbar-default {
    background: var(--bg-primary);
}

.xwui-appbar-transparent {
    background: transparent;
}

.xwui-appbar-elevated {
    background: var(--bg-elevated);
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}

/* Color variants */
.xwui-appbar-primary {
    background: var(--accent-primary);
}

.xwui-appbar-primary .xwui-appbar-title {
    color: var(--text-inverse);
}

.xwui-appbar-dark {
    background: var(--bg-tertiary);
}

.xwui-appbar-dark .xwui-appbar-title {
    color: var(--text-inverse);
}

.xwui-appbar-light {
    background: var(--bg-secondary);
}

/* Border */
.xwui-appbar-bordered {
    border-bottom: var(--border-appbar-width, var(--border-width-regular, 1.5px)) var(--border-appbar-style, solid) var(--border-appbar-color, var(--border-color, rgba(0, 0, 0, 0.1)));
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */

/* Fixed position spacer (canonical 9-step scale) */
:is(.xwui-appbar-spacer-3xs,.xwui-appbar-spacer-xxxs) { height: 24px; }
:is(.xwui-appbar-spacer-4xs,.xwui-appbar-spacer-xxxxs) { height: 12px; }
:is(.xwui-appbar-spacer-2xs,.xwui-appbar-spacer-xxs) { height: 32px; }
.xwui-appbar-spacer-xs { height: 40px; }
:is(.xwui-appbar-spacer-s,.xwui-appbar-spacer-sm) { height: 48px; }
:is(.xwui-appbar-spacer-m,.xwui-appbar-spacer-md) { height: 64px; }
:is(.xwui-appbar-spacer-l,.xwui-appbar-spacer-lg) { height: 80px; }
.xwui-appbar-spacer-xl { height: 96px; }
:is(.xwui-appbar-spacer-2xl,.xwui-appbar-spacer-xxl) { height: 124px; }
:is(.xwui-appbar-spacer-3xl,.xwui-appbar-spacer-xxxl) { height: 156px; }
:is(.xwui-appbar-spacer-4xl,.xwui-appbar-spacer-xxxxl) { height: 249.6px; }

/* Legacy spacer aliases */
:is(.xwui-appbar-spacer-s,.xwui-appbar-spacer-sm) { height: 48px; }
:is(.xwui-appbar-spacer-m,.xwui-appbar-spacer-md) { height: 64px; }
:is(.xwui-appbar-spacer-l,.xwui-appbar-spacer-lg) { height: 80px; }

/* Responsive adjustments */
@media (max-width: 768px) {
    .xwui-appbar-inner {
        padding: 0 var(--spacing-sm, 0.75rem);
    }
    
    .xwui-appbar-center {
        display: none;
    }
    
    .xwui-appbar-title {
        font-size: var(--font-size-base, 1rem);
    }
}


/* basic/XWUIBarBottomApp/XWUIBarBottomApp.css */
/**
 * XWUIBarBottomApp Component Styles
 * M3 Bottom app bar: toolbar at bottom with optional FAB and actions.
 *
 * Style Dependencies:
 * - Theme: theme/colors/{selected-theme}.css
 * - Theme: theme/accents/{selected-accent}.css
 * - Spacing/shadows from style layer
 */

.xwui-bottom-appbar-container {
    width: 100%;
}

.xwui-bottom-appbar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 80px;
    padding: 0 var(--spacing-md, 1rem);
    background: var(--bg-elevated);
    border-top: var(--border-width-regular, 1px) solid var(--border-color, rgba(0, 0, 0, 0.08));
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.xwui-bottom-appbar-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.xwui-bottom-appbar-elevated {
    box-shadow: var(--shadow-lg, 0 -4px 12px rgba(0, 0, 0, 0.08));
    border-top-color: transparent;
}

.xwui-bottom-appbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 100%;
    gap: var(--spacing-md, 1rem);
}

.xwui-bottom-appbar-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 4px);
    flex: 1;
    justify-content: flex-start;
    min-width: 0;
}

.xwui-bottom-appbar-fab-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* FAB sits above the bar (M3 style) - negative margin so it overlaps */
.xwui-bottom-appbar-fab {
    margin-top: -28px;
    flex-shrink: 0;
}

.xwui-bottom-appbar-fab-end .xwui-bottom-appbar-inner {
    justify-content: flex-end;
}

.xwui-bottom-appbar-fab-end .xwui-bottom-appbar-left {
    flex: 0;
}

.xwui-bottom-appbar-fab-end .xwui-bottom-appbar-fab-slot {
    order: 1;
}

.xwui-bottom-appbar-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 4px);
    flex: 1;
    justify-content: flex-end;
    min-width: 0;
}

/* Safe area for notched devices */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .xwui-bottom-appbar-fixed.xwui-bottom-appbar {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* basic/XWUIBarBulkAction/XWUIBarBulkAction.css */
/**
 * XWUIBarBulkAction Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 */

.xwui-bulk-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md, 1rem);
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
    background: var(--bg-elevated, #ffffff);
    border-top: 1px solid var(--border-color, #dee2e6);
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
    z-index: 1000;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.xwui-bulk-action-bar-fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    border-top: none;
    border-bottom: 1px solid var(--border-color, #dee2e6);
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.xwui-bulk-action-bar-fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

.xwui-bulk-action-bar-inline {
    position: relative;
    margin: var(--spacing-md, 1rem) 0;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--border-color, #dee2e6);
}

.xwui-bulk-action-bar-left {
    display: flex;
    align-items: center;
}

.xwui-bulk-action-bar-count {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 0.25rem);
}

.xwui-bulk-action-bar-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 var(--spacing-xs, 0.25rem);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--text-inverse, #ffffff);
    background: var(--accent-primary, #4f46e5);
    border-radius: 12px;
    line-height: 1;
}

.xwui-bulk-action-bar-count-text {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary, #212529);
}

.xwui-bulk-action-bar-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
}

.xwui-bulk-action-bar-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 0.25rem);
}


/* basic/XWUIBarcode/XWUIBarcode.css */
/* XWUIBarcode – headless barcode container */
.xwui-barcode-container {
  display: inline-block;
  padding: 0.25rem 0;
}

.xwui-barcode {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.xwui-barcode-svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.xwui-barcode-value {
  font-family: monospace;
  font-size: 0.75rem;
  text-align: center;
  color: var(--xwui-text-secondary, #666);
}

.xwui-barcode-empty {
  font-size: 0.875rem;
  color: var(--xwui-text-hint, #999);
}

/* basic/XWUIBarcodeAny/XWUIBarcodeAny.css */
/**
 * XWUIBarcodeAny Component Styles
 */

.xwui-barcode-any { display: inline-block; }
.xwui-barcode-any > div { display: inline-block; }

/* basic/XWUIBarcodeAztec/XWUIBarcodeAztec.css */
/**
 * XWUIBarcodeAztec Component Styles
 */

.xwui-barcode-aztec-container { display: inline-block; }
.xwui-barcode-aztec { display: inline-block; }
.xwui-barcode-aztec canvas { display: block; max-width: 100%; height: auto; image-rendering: pixelated; }
.xwui-barcode-aztec-error { color: #b91c1c; font: 12px monospace; padding: 6px 10px; border: 1px solid #fecaca; background: #fef2f2; border-radius: 4px; }

/* basic/XWUIBarcodeCodabar/XWUIBarcodeCodabar.css */
/**
 * XWUIBarcodeCodabar Component Styles
 */

.xwui-barcode-codabar { display: inline-block; }
.xwui-barcode-codabar canvas { display: block; max-width: 100%; height: auto; }

/* basic/XWUIBarcodeCode128/XWUIBarcodeCode128.css */
/**
 * XWUIBarcodeCode128 Component Styles
 */

.xwui-barcode-code128 { display: inline-block; }
.xwui-barcode-code128 canvas { display: block; max-width: 100%; height: auto; }

/* basic/XWUIBarcodeCode39/XWUIBarcodeCode39.css */
/**
 * XWUIBarcodeCode39 Component Styles
 */

.xwui-barcode-code39 { display: inline-block; }
.xwui-barcode-code39 canvas { display: block; max-width: 100%; height: auto; }

/* basic/XWUIBarcodeCode93/XWUIBarcodeCode93.css */
/**
 * XWUIBarcodeCode93 Component Styles
 */

.xwui-barcode-code93 { display: inline-block; }
.xwui-barcode-code93 canvas { display: block; max-width: 100%; height: auto; }

/* basic/XWUIBarcodeDataMatrix/XWUIBarcodeDataMatrix.css */
/**
 * XWUIBarcodeDataMatrix Component Styles
 */

.xwui-barcode-datamatrix-container { display: inline-block; }
.xwui-barcode-datamatrix { display: inline-block; }
.xwui-barcode-datamatrix canvas { display: block; max-width: 100%; height: auto; image-rendering: pixelated; }
.xwui-barcode-datamatrix-error { color: #b91c1c; font: 12px monospace; padding: 6px 10px; border: 1px solid #fecaca; background: #fef2f2; border-radius: 4px; }

/* basic/XWUIBarcodeEAN13/XWUIBarcodeEAN13.css */
/**
 * XWUIBarcodeEAN13 Component Styles
 */

.xwui-barcode-e-a-n13 { display: inline-block; }
.xwui-barcode-e-a-n13 canvas { display: block; max-width: 100%; height: auto; }

/* basic/XWUIBarcodeEAN2/XWUIBarcodeEAN2.css */
/**
 * XWUIBarcodeEAN2 Component Styles
 */

.xwui-barcode-e-a-n2 { display: inline-block; }
.xwui-barcode-e-a-n2 canvas { display: block; max-width: 100%; height: auto; }

/* basic/XWUIBarcodeEAN5/XWUIBarcodeEAN5.css */
/**
 * XWUIBarcodeEAN5 Component Styles
 */

.xwui-barcode-e-a-n5 { display: inline-block; }
.xwui-barcode-e-a-n5 canvas { display: block; max-width: 100%; height: auto; }

/* basic/XWUIBarcodeEAN8/XWUIBarcodeEAN8.css */
/**
 * XWUIBarcodeEAN8 Component Styles
 */

.xwui-barcode-e-a-n8 { display: inline-block; }
.xwui-barcode-e-a-n8 canvas { display: block; max-width: 100%; height: auto; }

/* basic/XWUIBarcodeITF/XWUIBarcodeITF.css */
/**
 * XWUIBarcodeITF Component Styles
 */

.xwui-barcode-i-t-f { display: inline-block; }
.xwui-barcode-i-t-f canvas { display: block; max-width: 100%; height: auto; }

/* basic/XWUIBarcodeITF14/XWUIBarcodeITF14.css */
/**
 * XWUIBarcodeITF14 Component Styles
 */

.xwui-barcode-i-t-f14 { display: inline-block; }
.xwui-barcode-i-t-f14 canvas { display: block; max-width: 100%; height: auto; }

/* basic/XWUIBarcodeLinear/XWUIBarcodeLinear.css */
/**
 * XWUIBarcodeLinear Component Styles
 */

.xwui-barcode-linear-container {
    display: inline-block;
}

.xwui-barcode-linear {
    display: inline-block;
}

.xwui-barcode-linear canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

.xwui-barcode-linear-error {
    color: #b91c1c;
    font: 12px monospace;
    padding: 6px 10px;
    border: 1px solid #fecaca;
    background: #fef2f2;
    border-radius: 4px;
}

/* basic/XWUIBarcodeMaxiCode/XWUIBarcodeMaxiCode.css */
/**
 * XWUIBarcodeMaxiCode Component Styles
 */

.xwui-barcode-maxicode-container { display: inline-block; }
.xwui-barcode-maxicode { display: inline-block; }
.xwui-barcode-maxicode canvas { display: block; max-width: 100%; height: auto; }
.xwui-barcode-maxicode-error { color: #b91c1c; font: 12px monospace; padding: 6px 10px; border: 1px solid #fecaca; background: #fef2f2; border-radius: 4px; }

/* basic/XWUIBarcodeMSI/XWUIBarcodeMSI.css */
/**
 * XWUIBarcodeMSI Component Styles
 */

.xwui-barcode-m-s-i { display: inline-block; }
.xwui-barcode-m-s-i canvas { display: block; max-width: 100%; height: auto; }

/* basic/XWUIBarcodePDF417/XWUIBarcodePDF417.css */
/**
 * XWUIBarcodePDF417 Component Styles
 */

.xwui-barcode-pdf417-container { display: inline-block; }
.xwui-barcode-pdf417 { display: inline-block; }
.xwui-barcode-pdf417 canvas { display: block; max-width: 100%; height: auto; image-rendering: pixelated; }
.xwui-barcode-pdf417-error { color: #b91c1c; font: 12px monospace; padding: 6px 10px; border: 1px solid #fecaca; background: #fef2f2; border-radius: 4px; }

/* basic/XWUIBarcodePharmacode/XWUIBarcodePharmacode.css */
/**
 * XWUIBarcodePharmacode Component Styles
 */

.xwui-barcode-pharmacode { display: inline-block; }
.xwui-barcode-pharmacode canvas { display: block; max-width: 100%; height: auto; }

/* basic/XWUIBarcodeQRCode/XWUIBarcodeQRCode.css */
/**
 * XWUIBarcodeQRCode Component Styles
 */

.xwui-barcode-qrcode-container {
    display: inline-block;
}

.xwui-barcode-qrcode {
    display: inline-block;
}

.xwui-barcode-qrcode canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

/* basic/XWUIBarcodeScanner/XWUIBarcodeScanner.css */
/**
 * XWUIBarcodeScanner Component Styles
 */

.xwui-barcode-scanner-container { display: inline-block; }
.xwui-barcode-scanner { display: inline-flex; flex-direction: column; gap: 8px; }
.xwui-barcode-scanner-stage { position: relative; background: #000; overflow: hidden; border-radius: 6px; }
.xwui-barcode-scanner-stage video { width: 100%; height: 100%; object-fit: cover; display: block; }
.xwui-barcode-scanner-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.xwui-barcode-scanner-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.xwui-barcode-scanner-controls button {
    padding: 6px 12px; border: 1px solid #d1d5db; background: #fff; border-radius: 6px; cursor: pointer;
}
.xwui-barcode-scanner-controls button:disabled { opacity: 0.5; cursor: not-allowed; }
.xwui-barcode-scanner-filelabel {
    padding: 6px 12px; border: 1px solid #d1d5db; background: #fff; border-radius: 6px; cursor: pointer;
}
.xwui-barcode-scanner-filelabel input[type=file] { display: none; }
.xwui-barcode-scanner-status { font: 13px/1.4 monospace; color: #1f2937; padding: 6px 8px; background: #f3f4f6; border-radius: 4px; }
.xwui-barcode-scanner-status-error { background: #fef2f2; color: #b91c1c; }

/* basic/XWUIBarcodeUPCA/XWUIBarcodeUPCA.css */
/**
 * XWUIBarcodeUPCA Component Styles
 */

.xwui-barcode-u-p-c-a { display: inline-block; }
.xwui-barcode-u-p-c-a canvas { display: block; max-width: 100%; height: auto; }

/* basic/XWUIBarcodeUPCE/XWUIBarcodeUPCE.css */
/**
 * XWUIBarcodeUPCE Component Styles
 */

.xwui-barcode-u-p-c-e { display: inline-block; }
.xwui-barcode-u-p-c-e canvas { display: block; max-width: 100%; height: auto; }

/* basic/XWUIBarPageHeader/XWUIBarPageHeader.css */
/**
 * XWUIBarPageHeader Component Styles
 * Element Plus Page Header parity: back, breadcrumb, title, subtitle, content.
 */
.xwui-shell-page-header {
  padding: 16px 0;
}

.xwui-shell-page-header-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.xwui-shell-page-header-back-link,
.xwui-shell-page-header-back-btn {
  font-size: 0.875rem;
  color: var(--accent-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}

.xwui-shell-page-header-back-btn:hover,
.xwui-shell-page-header-back-link:hover {
  text-decoration: underline;
}

.xwui-shell-page-header-breadcrumb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.xwui-shell-page-header-breadcrumb-item:not(:last-child)::after {
  content: '/';
  margin-left: 8px;
  color: var(--color-outline);
}

.xwui-shell-page-header-breadcrumb-item a {
  color: var(--accent-primary);
  text-decoration: none;
}

.xwui-shell-page-header-breadcrumb-item a:hover {
  text-decoration: underline;
}

.xwui-shell-page-header-heading {
  margin-bottom: 8px;
}

.xwui-shell-page-header-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}

.xwui-shell-page-header-subtitle {
  margin: 4px 0 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.xwui-shell-page-header-content {
  margin-top: 12px;
  color: var(--text-primary);
}

/* basic/XWUIBarSiteFooter/XWUIBarSiteFooter.css */
/* XWUIBarSiteFooter · reusable site-shell footer.
 *
 * Mirrors XWUIBarSiteHeader's contract for page-width / gutter:
 *   --xwui-bar-site-footer-max-width   inner content max-width
 *   --xwui-bar-site-footer-px          horizontal gutter
 */

xwui-bar-site-footer {
  display: block;
  width: 100%;
  --xwui-bar-site-footer-max-width: 1200px;
  --xwui-bar-site-footer-px: clamp(1rem, 3vw, 2.5rem);
}

.xwui-bar-site-footer {
  width: 100%;
  padding-inline: var(--xwui-bar-site-footer-px);
  background: var(--bg-secondary, var(--bg-app));
  color: var(--text-tertiary);
}
.xwui-bar-site-footer.is-bordered {
  border-top: 1px solid var(--border-light);
}

.xwui-bar-site-footer__inner {
  max-width: var(--xwui-bar-site-footer-max-width);
  margin-inline: auto;
  width: 100%;
  display: grid;
  gap: var(--spacing-xl, 2rem);
  grid-template-columns: 1.5fr repeat(3, 1fr);
  padding-block: 2.25rem;
}
.xwui-bar-site-footer__inner--bottom {
  padding-top: 1.25rem;
  padding-bottom: 1.5rem;
  display: block;
}

.xwui-bar-site-footer__brand-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.xwui-bar-site-footer__brand-link xwui-logo {
  display: inline-flex;
  min-height: 28px;
}
.xwui-bar-site-footer__brand-desc {
  color: var(--text-tertiary);
  margin-top: 0.75rem;
  max-width: 32ch;
  line-height: 1.5;
}
.xwui-bar-site-footer__brand-desc a {
  color: var(--accent-primary);
}

.xwui-bar-site-footer__col-title {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 0.75rem;
}
.xwui-bar-site-footer__col-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.4rem;
}
.xwui-bar-site-footer__col-link {
  color: var(--text-secondary);
  text-decoration: none;
}
.xwui-bar-site-footer__col-link:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.xwui-bar-site-footer__bottom {
  border-top: 1px solid var(--border-light);
  padding-top: 1.25rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--text-tertiary);
}

@media (max-width: 860px) {
  .xwui-bar-site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .xwui-bar-site-footer__inner {
    grid-template-columns: 1fr;
  }
}

/* basic/XWUIBarSiteHeader/XWUIBarSiteHeader.css */
/* XWUIBarSiteHeader · reusable site-shell top bar.
 *
 * The component renders generic structural classes only. Page-level
 * concerns like max-width are exposed as CSS custom properties so the
 * host site can tune them without forking the stylesheet:
 *
 *   --xwui-bar-site-header-max-width   page width clamp (defaults to 1200px)
 *   --xwui-bar-site-header-px          horizontal gutter
 *   --xwui-bar-site-header-mobile-bp   px at which the inline links collapse
 *
 * Tokens like --bg-app, --border-light, --text-primary etc. resolve
 * through the active XWUI style/theme, so the bar follows preset cycles
 * automatically.
 */

xwui-bar-site-header {
  display: block;
  width: 100%;
  --xwui-bar-site-header-max-width: 1200px;
  --xwui-bar-site-header-px: clamp(1rem, 3vw, 2.5rem);
  --xwui-bar-site-header-mobile-bp: 860px;
}

.xwui-bar-site-header {
  width: 100%;
  padding-inline: var(--xwui-bar-site-header-px);
  background: var(--bg-app);
}
.xwui-bar-site-header.has-blur {
  background: color-mix(in srgb, var(--bg-app) 75%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
}
.xwui-bar-site-header.is-bordered {
  border-bottom: 1px solid var(--border-light);
}
.xwui-bar-site-header.has-shadow {
  box-shadow: var(--shadow-lg);
}
.xwui-bar-site-header[data-position="sticky"] {
  position: sticky;
  top: 0;
  z-index: 50;
}
.xwui-bar-site-header[data-position="fixed"] {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
}

/* ── Scroll-transparency (config.scrollTransparent) ─────────────────────────
 * The background moves to a ::before layer so it can fade by scroll direction
 * WITHOUT touching the brand/nav/actions opacity. Opt-in via the class, so
 * headers that don't use the feature keep the plain `background` above. */
.xwui-bar-site-header.has-scroll-transparent {
  background: transparent;
  position: relative; /* ensure data-position sticky/fixed still wins below */
}
.xwui-bar-site-header.has-scroll-transparent[data-position="sticky"] { position: sticky; }
.xwui-bar-site-header.has-scroll-transparent[data-position="fixed"]  { position: fixed; }
.xwui-bar-site-header.has-scroll-transparent::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--bg-app);
  opacity: 1;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
/* Blur variant: fade a frosted layer + keep the backdrop blur on the bg layer. */
.xwui-bar-site-header.has-scroll-transparent.has-blur {
  backdrop-filter: none;
}
.xwui-bar-site-header.has-scroll-transparent.has-blur::before {
  /* Frosted surface. Consumers can supply a translucent brand background (e.g. a
     semi-transparent gradient) via --xwui-bar-site-header-blur-bg; the default is
     a translucent app-bg. color-mix() can't operate on a gradient --bg-app, so
     the override hook is how a gradient-themed bar gets blur without collapsing. */
  background: var(--xwui-bar-site-header-blur-bg, color-mix(in srgb, var(--bg-app) 75%, transparent));
  backdrop-filter: saturate(180%) blur(14px);
}
/* Content sits above the bg layer. */
.xwui-bar-site-header.has-scroll-transparent > .xwui-bar-site-header__inner {
  position: relative;
  z-index: 1;
}
/* Scrolling down → fade the background to the configured opacity (default 0.5). */
.xwui-bar-site-header.has-scroll-transparent.is-scroll-transparent::before {
  opacity: var(--xwui-bar-site-header-scroll-opacity, 0.5);
}
@media (prefers-reduced-motion: reduce) {
  .xwui-bar-site-header.has-scroll-transparent::before { transition: none; }
}

.xwui-bar-site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-lg, 1.5rem);
  padding-block: 0.85rem;
  max-width: var(--xwui-bar-site-header-max-width);
  margin-inline: auto;
  width: 100%;
}

.xwui-bar-site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.xwui-bar-site-header__brand:hover { text-decoration: none; }
.xwui-bar-site-header__brand xwui-logo {
  display: inline-flex;
  min-height: 28px;
}

.xwui-bar-site-header__links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.xwui-bar-site-header__link {
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-weight: 500;
  font-size: 0.95rem;
  text-decoration: none;
}
.xwui-bar-site-header__link:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
  text-decoration: none;
}
.xwui-bar-site-header__link.is-active {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.xwui-bar-site-header__link-icon {
  display: inline-flex;
  align-items: center;
  margin-inline-end: 0.4rem;
  vertical-align: -0.15em;
}

/* ── Dropdown nav item — a top-level menu node with children. ──────────────
   Open is pure CSS: hover OR keyboard focus anywhere inside the wrapper
   reveals the panel, so there is no JS open/close state to manage. */
.xwui-bar-site-header__menu {
  position: relative;
  display: inline-flex;
}
.xwui-bar-site-header__menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.xwui-bar-site-header__menu.is-active > .xwui-bar-site-header__menu-trigger {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.xwui-bar-site-header__menu-caret {
  display: inline-flex;
  transition: transform 150ms ease;
}
.xwui-bar-site-header__menu:hover .xwui-bar-site-header__menu-caret,
.xwui-bar-site-header__menu:focus-within .xwui-bar-site-header__menu-caret {
  transform: rotate(180deg);
}
.xwui-bar-site-header__dropdown {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  z-index: 51;
  min-width: 14rem;
  margin-top: 0.4rem;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--bg-elevated, var(--bg-card, var(--bg-app)));
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg, var(--radius-md));
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 140ms ease, transform 140ms ease, visibility 0s linear 140ms;
}
.xwui-bar-site-header__menu:hover .xwui-bar-site-header__dropdown,
.xwui-bar-site-header__menu:focus-within .xwui-bar-site-header__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.xwui-bar-site-header__dropdown-link {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.xwui-bar-site-header__dropdown-link:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  text-decoration: none;
}
.xwui-bar-site-header__dropdown-link.is-active {
  color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
}
.xwui-bar-site-header__dropdown-sep {
  height: 1px;
  margin: 0.3rem 0.2rem;
  background: var(--border-light);
}
/* RTL: anchor the panel to the trigger's inline-end edge. */
.xwui-bar-site-header[dir="rtl"] .xwui-bar-site-header__dropdown {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

.xwui-bar-site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* The burger is the only xwui-button placed as a direct child of
   .xwui-bar-site-header__inner. XWUI clobbers any custom class we set on
   xwui-button at render time, so we key off the structural selector. */
.xwui-bar-site-header__inner > xwui-button { display: none !important; }

.xwui-bar-site-header__drawer {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: 49;
  background: var(--bg-elevated, var(--bg-card, var(--bg-app)));
  border-bottom: 1px solid var(--border-light);
  box-shadow: var(--shadow-lg);
  max-height: 0;
  overflow: hidden;
  transition: max-height 220ms ease, opacity 180ms ease;
  opacity: 0;
  pointer-events: none;
}
.xwui-bar-site-header__drawer.is-open {
  max-height: 80vh;
  opacity: 1;
  pointer-events: auto;
}
.xwui-bar-site-header__drawer-list {
  display: flex;
  flex-direction: column;
  padding: 0.5rem var(--spacing-lg, 1rem);
}
.xwui-bar-site-header__drawer-link {
  padding: 0.85rem 0.75rem;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.xwui-bar-site-header__drawer-link:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  text-decoration: none;
}
.xwui-bar-site-header__drawer-link.is-active {
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
  color: var(--accent-primary);
}
.xwui-bar-site-header__drawer-link.is-active::after {
  content: '\2192';
}
.xwui-bar-site-header__drawer-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem var(--spacing-lg, 1rem) 1rem;
  border-top: 1px solid var(--border-light);
  flex-wrap: wrap;
}

/* Mobile drawer — a parent menu node flattens into a labelled group with its
   children indented beneath it (no nested dropdown on touch). */
.xwui-bar-site-header__drawer-group {
  display: flex;
  flex-direction: column;
}
.xwui-bar-site-header__drawer-group-title {
  padding: 0.85rem 0.75rem 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary, var(--text-secondary));
}
.xwui-bar-site-header__drawer-group .xwui-bar-site-header__drawer-link {
  padding-inline-start: 1.4rem;
  font-weight: 500;
}

.xwui-bar-site-header__scrim {
  position: fixed;
  inset: 0;
  z-index: 48;
  background: color-mix(in srgb, var(--bg-app) 55%, transparent);
  backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
.xwui-bar-site-header__scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 860px) {
  .xwui-bar-site-header__links { display: none; }
  .xwui-bar-site-header__inner > xwui-button { display: inline-flex !important; }
}
@media (min-width: 861px) {
  .xwui-bar-site-header__drawer,
  .xwui-bar-site-header__scrim { display: none; }
}

/* basic/XWUIBarToolbar/XWUIBarToolbar.css */
.xwui-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xs, 0.25rem);
  padding: var(--spacing-xs, 0.25rem);
}

.xwui-toolbar.xwui-toolbar-vertical {
  flex-direction: column;
  align-items: stretch;
}

.xwui-toolbar-item {
  display: inline-flex;
}

.xwui-toolbar-item-active {
  background: var(--accent-primary, #4f46e5);
  color: white;
}

/* basic/XWUIBleed/XWUIBleed.css */
/**
 * XWUIBleed Component Styles
 * Negative margins to break out of container. Values set inline from config.
 */
.xwui-bleed {
  box-sizing: border-box;
}

/* basic/XWUIBlockquote/XWUIBlockquote.css */
/**
 * XWUIBlockquote Component Styles
 * Quote text from external source. Use theme variables.
 */

.xwui-blockquote {
  margin: 0 0 1rem;
  padding-inline-start: var(--blockquote-padding-inline, 1rem);
  border-inline-start: 4px solid var(--color-blockquote-border, var(--color-primary, #1976d2));
  color: var(--color-blockquote-fg, var(--color-on-surface));
}

.xwui-blockquote-inner {
  font-style: var(--blockquote-font-style, italic);
}

.xwui-blockquote-caption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-style: normal;
  opacity: 0.85;
}

/* basic/XWUIBlockUI/XWUIBlockUI.css */
.xwui-blockui-host {
  position: relative;
  display: block;
}

.xwui-blockui-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--xwui-blockui-z, 9998);
  background: rgba(255, 255, 255, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.xwui-blockui-overlay.xwui-blockui-fullscreen {
  position: fixed;
  inset: 0;
}

.xwui-blockui-overlay.xwui-blockui-visible {
  display: flex;
}

.xwui-blockui-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md, 1rem);
}

.xwui-blockui-spinner-wrap {
  flex-shrink: 0;
}

.xwui-blockui-message {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-secondary, #4b5563);
  max-width: 20rem;
  text-align: center;
}

/* basic/XWUIBottomNavigation/XWUIBottomNavigation.css */
/**
 * XWUIBottomNavigation Component Styles
 * Bottom navigation bar for mobile
 */

.xwui-bottom-navigation-container {
    width: 100%;
}

.xwui-bottom-navigation {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: var(--bg-elevated, #ffffff);
    border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.05));
    padding: var(--spacing-xs, 4px) 0;
    min-height: 56px;
}

.xwui-bottom-navigation-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.xwui-bottom-navigation-elevated {
    box-shadow: var(--shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.1));
    border-top: none;
}

.xwui-bottom-navigation-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: var(--spacing-xs, 4px);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary, #6c757d);
    font-size: 0.75rem;
    font-weight: 500;
    transition: color 0.2s ease, transform 0.2s ease;
    min-height: 48px;
    gap: var(--spacing-xs, 4px);
    position: relative;
}

.xwui-bottom-navigation-item:hover:not(:disabled) {
    color: var(--text-primary, #212529);
    transform: translateY(-2px);
}

.xwui-bottom-navigation-item-active {
    color: var(--accent-primary, #4f46e5);
}

.xwui-bottom-navigation-item-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.xwui-bottom-navigation-item-icon {
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.xwui-bottom-navigation-item-icon svg {
    width: 100%;
    height: 100%;
}

.xwui-bottom-navigation-item-label {
    font-size: 0.75rem;
    line-height: 1;
}

.xwui-bottom-navigation-item-badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 20px);
    background-color: var(--accent-primary, #4f46e5);
    color: var(--text-inverse, #ffffff);
    font-size: 0.625rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    line-height: 1.2;
    z-index: 1;
}


/* basic/XWUIBottomSheet/XWUIBottomSheet.css */
/**
 * XWUIBottomSheet Component Styles
 * Re-exports canonical overlay bottom sheet styles.
 */

@import '../XWUIOverlayBottomSheet/XWUIOverlayBottomSheet.css';

/* basic/XWUIBox/XWUIBox.css */
/**
 * XWUIBox Component Styles
 * Basic layout container
 */

.xwui-box-container {
    /* Container has no specific styles */
}

.xwui-box {
    /* Box element - styles applied via inline styles or className */
    box-sizing: border-box;
    color: var(--text-primary, inherit);
}

/* Card-like surface · token-driven, so a theme switch restyles every surface.
   Replaces bespoke .xw-surface utility classes in host apps. */
.xwui-box-surface {
    /* Same token fallback chain XWUICard uses (--bg-card is empty in most
       themes, so it resolves to --bg-primary). */
    background: var(--bg-card, var(--bg-primary, var(--bg-secondary)));
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg, 1.5rem);
    transition:
        transform var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease),
        border-color var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease),
        box-shadow var(--motion-duration-fast, 150ms) var(--motion-easing-standard, ease);
}
.xwui-box-surface--hover:hover {
    transform: translateY(-2px);
    border-color: var(--border-color);
    box-shadow: var(--shadow-md);
}

/* Gradient background support */
.xwui-box-gradient-background {
    position: relative;
    overflow: hidden;
}

.xwui-box-gradient-wrapper {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.xwui-box-gradient-wrapper svg {
    width: 100%;
    height: 100%;
}

/* Glass effect support */
.xwui-box-glass-effect {
    /* Glass effect styles are applied inline via JavaScript */
    /* This class is used for identification and potential CSS overrides */
    /* Use CSS variables from styles system for shadow */
    box-shadow: var(--shadow-lg, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
}


/* basic/XWUIBreadcrumbs/XWUIBreadcrumbs.css */
/**
 * XWUIBreadcrumbs Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Typography: theme/typography/*.css
 */

.xwui-breadcrumbs {
    width: 100%;
}

.xwui-breadcrumbs-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

.xwui-breadcrumbs-item {
    display: flex;
    align-items: center;
}

/* Link */
.xwui-breadcrumbs-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs, 0.375rem);
    color: var(--text-secondary, #6c757d);
    text-decoration: none;
    transition: color 0.2s;
}

.xwui-breadcrumbs-link:hover {
    color: var(--accent-primary, #4f46e5);
}

/* Current */
.xwui-breadcrumbs-current {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs, 0.375rem);
    color: var(--text-primary, #212529);
    font-weight: var(--font-weight-medium, 500);
}

/* Ellipsis */
.xwui-breadcrumbs-ellipsis {
    color: var(--text-secondary, #6c757d);
    padding: 0 var(--spacing-xs, 0.25rem);
}

/* Icon */
.xwui-breadcrumbs-icon {
    display: flex;
    align-items: center;
}

.xwui-breadcrumbs-icon svg {
    width: 1em;
    height: 1em;
}

/* Separator */
.xwui-breadcrumbs-separator {
    display: flex;
    align-items: center;
    margin: 0 var(--spacing-sm, 0.5rem);
    color: var(--text-tertiary, #adb5bd);
}

.xwui-breadcrumbs-separator svg {
    width: 16px;
    height: 16px;
}

/* Size variants */
.xwui-breadcrumbs-small {
    font-size: var(--font-size-sm, 0.8125rem);
}

.xwui-breadcrumbs-small .xwui-breadcrumbs-separator svg {
    width: 14px;
    height: 14px;
}

.xwui-breadcrumbs-medium {
    font-size: var(--font-size-sm, 0.875rem);
}

.xwui-breadcrumbs-large {
    font-size: var(--font-size-base, 1rem);
}

.xwui-breadcrumbs-large .xwui-breadcrumbs-separator svg {
    width: 18px;
    height: 18px;
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */


/* basic/XWUIBrightness/XWUIBrightness.css */
/**
 * XWUIBrightness Component Styles
 * Minimal styling - extends style system variables
 */

.xwui-brightness-controller {
    padding: var(--spacing-md);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

.xwui-brightness-controller .xwui-slider {
    background: var(--bg-primary);
}

.xwui-brightness-controller .xwui-slider__icon {
    color: var(--accent-primary);
}

.xwui-brightness-controller .xwui-slider__icon svg {
    color: var(--accent-primary);
    fill: var(--accent-primary);
    stroke: var(--accent-primary);
}


/* basic/XWUIButton/XWUIButton.css */
/**
 * XWUIButton Component Styles
 * Button component with various variants and states
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Roundness: theme/roundness/button/*.css (component-specific roundness)
 * - Lines: theme/lines/button/*.css (component-specific border widths)
 * - Typography: theme/typography/*.css
 */

.xwui-button-container {
    display: inline-block;
}

.xwui-button-container.xwui-button-full-width {
    display: block;
    width: 100%;
}

.xwui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs, 0.5rem);
    font-family: var(--font-button-family, var(--font-family-base, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif));
    font-weight: var(--font-weight-medium, 500);
    border: none;
    border-radius: var(--radius-button, var(--radius-sm, 6px));
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    outline: none;
    position: relative;
    box-sizing: border-box;
    /* Light resting shadow — a STYLE-LEVEL setting (`--button-shadow`, defined
       per style in styles/style/{style}/shadows.css; default --shadow-sm). On by
       default. Per-button opt-out via config `shadow: false` (see below). */
    box-shadow: var(--button-shadow, var(--shadow-sm));
}

/* Per-button opt-out (config `shadow: false`) — drop the resting shadow. */
.xwui-button.xwui-button-no-shadow { --button-shadow: none; box-shadow: none; }

.xwui-button:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    box-shadow: var(--glow-button-focus, none);
}

.xwui-button:disabled,
.xwui-button.xwui-button-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
    /* Ensure text remains visible even when disabled */
    color: inherit !important;
}

/* Physical press — the button visibly depresses (shrinks) while held down,
   the way a real key does. The depth is a STYLE-LEVEL setting, not hardcoded:
   `--button-press-scale` is defined per style in styles/style/{style}/spacing.css
   (1 = no press / off). On by default. The `0.95` fallback keeps the press
   working for brands/styles that don't define the token. Per-button opt-out:
   XWUIButton sets `--button-press-scale: 1` inline when `press: false`.
   Variants set only `background` on :active, so this transform composes; the
   effect/toggleable buttons that declare their OWN :active transform (raised
   translateY, gradient reset, …) win by specificity and keep their feel. */
.xwui-button:active:not(:disabled) {
    transform: scale(var(--button-press-scale, 0.95));
}
/* Per-button opt-out (config `press: false`) — pin the scale to 1 (no press). */
.xwui-button.xwui-button-no-press { --button-press-scale: 1; }
@media (prefers-reduced-motion: reduce) {
    .xwui-button:active:not(:disabled) { transform: none; }
}

/* Sizes — canonical 9-level scale */
:is(.xwui-button-3xs,.xwui-button-xxxs) {
    padding: 1px 3px;
    font-size: var(--xwui-size-font-xxxs, 9px);
    min-height: 1rem;
    gap: 2px;
}
:is(.xwui-button-4xs,.xwui-button-xxxxs) {
    padding: 1px 1.5px;
    font-size: var(--xwui-size-font-xxxxs, 4.5px);
    min-height: 0.5rem;
    gap: 1px;
}
:is(.xwui-button-2xs,.xwui-button-xxs) {
    padding: 2px 4px;
    font-size: var(--xwui-size-font-xxs, 10px);
    min-height: 1.125rem;
    gap: 2px;
}
.xwui-button-xs {
    padding: 2px 6px;
    font-size: var(--xwui-size-font-xs, 11px);
    min-height: 1.5rem;
    gap: 2px;
}
:is(.xwui-button-s,.xwui-button-sm) {
    padding: var(--spacing-xs, 0.375rem) var(--spacing-sm, 0.75rem);
    font-size: var(--font-size-sm, 0.875rem);
    min-height: 2rem;
}
:is(.xwui-button-m,.xwui-button-md) {
    padding: var(--spacing-sm, 0.625rem) var(--spacing-md, 1.25rem);
    font-size: var(--font-size-sm, 0.875rem);
    min-height: 2.5rem;
}
:is(.xwui-button-l,.xwui-button-lg) {
    padding: var(--spacing-sm, 0.875rem) var(--spacing-lg, 1.75rem);
    font-size: var(--font-size-base, 1rem);
    min-height: 3rem;
}
.xwui-button-xl {
    padding: 14px 28px;
    font-size: var(--font-size-lg, 1.125rem);
    min-height: 3.5rem;
}
:is(.xwui-button-2xl,.xwui-button-xxl) {
    padding: 18px 34px;
    font-size: var(--font-size-xl, 1.25rem);
    min-height: 4rem;
}
:is(.xwui-button-3xl,.xwui-button-xxxl) {
    padding: 22px 40px;
    font-size: var(--font-size-xxl, 1.5rem);
    min-height: 5rem;
}
:is(.xwui-button-4xl,.xwui-button-xxxxl) {
    padding: 35.2px 64px;
    font-size: var(--font-size-xxl, 1.5rem);
    min-height: 8rem;
}

/* Legacy aliases — keep old class names working */
.xwui-button-tiny   { padding: 2px 4px; font-size: var(--font-size-xs, 0.75rem); min-height: 1.25rem; gap: 2px; }
.xwui-button-small  { padding: var(--spacing-xs, 0.375rem) var(--spacing-sm, 0.75rem); font-size: var(--font-size-sm, 0.875rem); min-height: 2rem; }
.xwui-button-medium { padding: var(--spacing-sm, 0.625rem) var(--spacing-md, 1.25rem); font-size: var(--font-size-sm, 0.875rem); min-height: 2.5rem; }
.xwui-button-large  { padding: var(--spacing-sm, 0.875rem) var(--spacing-lg, 1.75rem); font-size: var(--font-size-base, 1rem); min-height: 3rem; }

/* Density (M3, Fluent, Carbon) — overrides size padding when set */
.xwui-button-container[data-density="compact"] .xwui-button {
    padding: var(--control-padding-y-compact) var(--control-padding-x-compact);
    min-height: var(--control-min-height-compact);
}
.xwui-button-container[data-density="comfortable"] .xwui-button {
    padding: var(--control-padding-y-comfortable) var(--control-padding-x-comfortable);
    min-height: var(--control-min-height-comfortable);
}
.xwui-button-container[data-density="spacious"] .xwui-button {
    padding: var(--control-padding-y-spacious) var(--control-padding-x-spacious);
    min-height: var(--control-min-height-spacious);
}

/* ============================================
   Variants — driven by ROLE PAIRS (contrast-guaranteed bg+fg duos).
   Role pairs live in styles/theme/colors/*.css and are validated by
   tools/validate-theme-contrast.ts. Legacy tokens (--accent-*, --text-inverse)
   are kept as fallbacks so un-migrated themes keep working.
   ============================================ */

/* RESTING variant backgrounds no longer need !important: XWUIButton renders flat
   DOM and never carries XWUIItem status classes, so a resting solid button has no
   competing same-specificity background, and tonal/effect layers still win by
   specificity / source order. The :hover and :active backgrounds DO keep
   !important — there they must out-rank the tonal/effect `!important` resting
   fills (by specificity within the important tier) and let pressed fills (lower
   specificity) override :hover. Colors keep !important so the disabled
   `color:inherit` rule can't override the variant ink. */
.xwui-button.xwui-button-primary {
    background: var(--accent-primary, var(--role-primary-bg));
    color: var(--role-primary-fg, var(--text-inverse)) !important;
    border: var(--border-button-width, var(--border-width-regular, 1.5px)) var(--border-button-style, solid) var(--accent-primary, var(--role-primary-bg));
}
.xwui-button.xwui-button-primary:hover:not(:disabled) {
    background: var(--accent-hover, var(--role-primary-bg-hover)) !important;
    border-color: var(--accent-hover, var(--role-primary-bg-hover));
    box-shadow: var(--glow-button-hover, var(--button-shadow, var(--shadow-sm)));
}
.xwui-button.xwui-button-primary:active:not(:disabled) {
    background: var(--accent-primary, var(--role-primary-bg-active, var(--role-primary-bg))) !important;
    border-color: var(--accent-primary, var(--role-primary-bg-active, var(--role-primary-bg)));
    box-shadow: var(--glow-button-active, none);
}
.xwui-button.xwui-button-primary:focus-visible {
    box-shadow: var(--glow-button-focus, none);
}

/* Secondary is a DARK neutral solid (dark surface, inverse text) — the
   high-contrast counterpart to primary, matching the slate-800 "Secondary"
   in common button catalogues. Theme-aware: --text-primary/--text-inverse
   flip with the active colour theme, so it stays a contrast button in dark
   mode too. (Tonal-neutral, `.xwui-button-tonal.xwui-button-secondary`, keeps
   the light tinted look and wins by specificity.) */
.xwui-button.xwui-button-secondary {
    background: var(--text-primary);
    color: var(--text-inverse) !important;
    border: var(--border-button-width, var(--border-width-regular, 1.5px)) var(--border-button-style, solid) var(--text-primary);
}
.xwui-button.xwui-button-secondary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--text-primary) 88%, #000) !important;
    border-color: color-mix(in srgb, var(--text-primary) 88%, #000);
}
.xwui-button.xwui-button-secondary:active:not(:disabled) {
    background: color-mix(in srgb, var(--text-primary) 78%, #000) !important;
}

.xwui-button.xwui-button-success {
    background: var(--accent-success, var(--role-success-bg));
    color: var(--role-success-fg, var(--text-inverse)) !important;
    border: var(--border-button-width, var(--border-width-regular, 1.5px)) var(--border-button-style, solid) var(--accent-success, var(--role-success-bg));
}
.xwui-button.xwui-button-success:hover:not(:disabled) {
    background: var(--accent-success-hover, var(--role-success-bg-hover)) !important;
    border-color: var(--accent-success-hover, var(--role-success-bg-hover));
    box-shadow: var(--glow-button-hover, var(--button-shadow, var(--shadow-sm)));
}
.xwui-button.xwui-button-success:active:not(:disabled) {
    background: var(--accent-success, var(--role-success-bg-active, var(--role-success-bg))) !important;
    border-color: var(--accent-success, var(--role-success-bg-active, var(--role-success-bg)));
}

.xwui-button.xwui-button-danger {
    background: var(--accent-error, var(--role-danger-bg));
    color: var(--role-danger-fg, var(--text-inverse)) !important;
    border: var(--border-button-width, var(--border-width-regular, 1.5px)) var(--border-button-style, solid) var(--accent-error, var(--role-danger-bg));
}
.xwui-button.xwui-button-danger:hover:not(:disabled) {
    background: var(--accent-error, var(--role-danger-bg-hover)) !important;
    border-color: var(--accent-error, var(--role-danger-bg-hover));
    box-shadow: var(--glow-button-hover, var(--button-shadow, var(--shadow-sm)));
}
.xwui-button.xwui-button-danger:active:not(:disabled) {
    background: var(--accent-error, var(--role-danger-bg-active, var(--role-danger-bg))) !important;
    border-color: var(--accent-error, var(--role-danger-bg-active, var(--role-danger-bg)));
}

.xwui-button.xwui-button-warning {
    background: var(--accent-warning, var(--role-warning-bg));
    /* fg guaranteed readable against the yellow bg via the theme pair */
    color: var(--role-warning-fg, var(--text-primary)) !important;
    border: var(--border-button-width, var(--border-width-regular, 1.5px)) var(--border-button-style, solid) var(--accent-warning, var(--role-warning-bg));
}
.xwui-button.xwui-button-warning:hover:not(:disabled) {
    background: var(--accent-warning, var(--role-warning-bg-hover)) !important;
    border-color: var(--accent-warning, var(--role-warning-bg-hover));
    color: var(--role-warning-fg, var(--text-primary)) !important;
}
.xwui-button.xwui-button-warning:active:not(:disabled) {
    background: var(--accent-warning, var(--role-warning-bg-active, var(--role-warning-bg))) !important;
    border-color: var(--accent-warning, var(--role-warning-bg-active, var(--role-warning-bg)));
    color: var(--role-warning-fg, var(--text-primary)) !important;
}

.xwui-button.xwui-button-info {
    background: var(--accent-primary, var(--role-info-bg));
    color: var(--role-info-fg, var(--text-inverse)) !important;
    border: var(--border-button-width, var(--border-width-regular, 1.5px)) var(--border-button-style, solid) var(--accent-primary, var(--role-info-bg));
}
.xwui-button.xwui-button-info:hover:not(:disabled) {
    background: var(--accent-hover, var(--role-info-bg-hover)) !important;
    border-color: var(--accent-hover, var(--role-info-bg-hover));
}
.xwui-button.xwui-button-info:active:not(:disabled) {
    background: var(--accent-primary, var(--role-info-bg-active, var(--role-info-bg))) !important;
    border-color: var(--accent-primary, var(--role-info-bg-active, var(--role-info-bg)));
}

/* Outline/ghost stay colored-text-only (no solid bg), so they use the role's bg
   as the *ink* color — which guarantees legibility against the page surface. */
.xwui-button.xwui-button-outline {
    background: transparent;
    color: var(--accent-primary, var(--role-primary-bg)) !important;
    border: var(--border-button-width, var(--border-width-regular, 1.5px)) var(--border-button-style, solid) var(--accent-primary, var(--role-primary-bg));
}
.xwui-button.xwui-button-outline:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--accent-hover, var(--role-primary-bg-hover));
}
.xwui-button.xwui-button-outline:active:not(:disabled) {
    background: var(--bg-active);
}

.xwui-button.xwui-button-ghost {
    background: transparent;
    color: var(--role-surface-fg, var(--text-primary)) !important;
    border: none;
}
.xwui-button.xwui-button-ghost:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--role-surface-fg, var(--text-primary)) !important;
}
.xwui-button.xwui-button-ghost:active:not(:disabled) {
    background: var(--bg-active);
    color: var(--role-surface-fg, var(--text-primary)) !important;
}

/* Flat variants (ghost / outline / link) must NOT look raised. The base button
   applies a resting drop shadow via --button-shadow (a style-level default); a
   transparent, no-fill button with a drop shadow reads wrong. Override the
   VARIABLE to none so it's gone in EVERY style and theme — both the resting
   (.xwui-button) and the :hover box-shadow read --button-shadow, so killing the
   variable removes both. The deliberate inset "pressed" shadow is unaffected. */
.xwui-button.xwui-button-ghost,
.xwui-button.xwui-button-outline,
.xwui-button.xwui-button-link {
    --button-shadow: none;
    box-shadow: none;
}

/* ============================================
   Toggleable push-button (pressed/unpressed state)
   ============================================ */

/* Pressed state — "pushed in" look: inset shadow + slightly darker bg.
   The bg/color pair comes from role-primary so contrast is guaranteed. */
.xwui-button.xwui-button-pressed {
    background: var(--accent-primary, var(--role-primary-bg-active, var(--role-primary-bg))) !important;
    color: var(--role-primary-fg, var(--text-inverse)) !important;
    border-color: var(--accent-primary, var(--role-primary-bg-active, var(--role-primary-bg))) !important;
    /* Inset shadow gives the tactile "pressed" feel */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(1px);
}

/* Outline variant when pressed: fill with role-primary (flip from ghost to filled) */
.xwui-button.xwui-button-outline.xwui-button-pressed {
    background: var(--accent-primary, var(--role-primary-bg)) !important;
    color: var(--role-primary-fg, var(--text-inverse)) !important;
    border-color: var(--accent-primary, var(--role-primary-bg)) !important;
}

/* Ghost variant when pressed: subtle fill, still no border */
.xwui-button.xwui-button-ghost.xwui-button-pressed {
    background: color-mix(in srgb, var(--accent-primary, var(--role-primary-bg)) 15%, transparent) !important;
    color: var(--accent-primary, var(--role-primary-bg)) !important;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.08) !important;
}

/* Keep the hover state visible even when pressed */
.xwui-button.xwui-button-pressed:hover:not(:disabled) {
    filter: brightness(1.06);
}

/* Toggleable buttons always have keyboard focus treatment */
.xwui-button-toggleable:focus-visible {
    outline: 2px solid var(--accent-primary, var(--role-primary-bg));
    outline-offset: 2px;
}

/* Full width */
.xwui-button-full-width {
    width: 100%;
}

/* Loading state — the label stays visible next to a real XWUISpinner child
   (mounted by XWUIButton.applyLoadingSpinner). The spinner sits before the
   text and inherits the button's text colour. Pointer events are disabled. */
.xwui-button-loading {
    pointer-events: none;
}
.xwui-button-loading-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* The embedded spinner: collapse its column gap and inherit the button colour
   so it reads as one of the button's own glyphs regardless of variant. */
.xwui-button .xwui-button-loading-spinner .xwui-spinner { gap: 0; }
.xwui-button .xwui-button-loading-spinner .xwui-spinner-icon { color: inherit; }

/* Icon */
.xwui-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Direct-child svg only (a raw custom-SVG icon) is sized to 1em. An XWUIIcon
   name-icon nests its svg deeper (.xwui-button-icon > .xwui-icon > … > svg) and
   sizes itself (18px), so this rule intentionally does NOT reach it. */
.xwui-button-icon > svg {
    width: 1em;
    height: 1em;
}

/* Icon-only buttons - center icon both horizontally and vertically */
.xwui-button:not(:has(.xwui-button-text)):has(.xwui-button-icon),
.xwui-button:not(:has(.xwui-item-text)):has(.xwui-button-icon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs, 0.375rem);
    aspect-ratio: 1;
}

/* Fallback for browsers that don't support :has() */
.xwui-button-icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs, 0.375rem);
    aspect-ratio: 1;
    min-width: var(--spacing-md, 1.25rem);
    min-height: var(--spacing-md, 1.25rem);
}

.xwui-button-icon-only .xwui-button-icon {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xwui-button-icon-only .xwui-button-icon svg {
    width: 1.25em;
    height: 1.25em;
    display: block;
    margin: auto;
}

/* Icon-only button sizes — canonical */
.xwui-button-icon-only:is(.xwui-button-3xs,.xwui-button-xxxs) { padding: 2px; min-width: 1rem;   min-height: 1rem; }
.xwui-button-icon-only:is(.xwui-button-4xs,.xwui-button-xxxxs) { padding: 1px; min-width: 0.5rem;   min-height: 0.5rem; }
.xwui-button-icon-only:is(.xwui-button-2xs,.xwui-button-xxs)  { padding: 2px; min-width: 1.125rem; min-height: 1.125rem; }
.xwui-button-icon-only.xwui-button-xs   { padding: 3px; min-width: 1.5rem;   min-height: 1.5rem; }
.xwui-button-icon-only:is(.xwui-button-s,.xwui-button-sm)   { padding: var(--spacing-xs, 0.375rem); min-width: 2rem;   min-height: 2rem; }
.xwui-button-icon-only:is(.xwui-button-m,.xwui-button-md)   { padding: var(--spacing-sm, 0.625rem); min-width: 2.5rem; min-height: 2.5rem; }
.xwui-button-icon-only:is(.xwui-button-l,.xwui-button-lg)   { padding: var(--spacing-sm, 0.875rem); min-width: 3rem;   min-height: 3rem; }
.xwui-button-icon-only.xwui-button-xl   { padding: 1rem;     min-width: 3.5rem; min-height: 3.5rem; }
.xwui-button-icon-only:is(.xwui-button-2xl,.xwui-button-xxl)  { padding: 1.25rem;  min-width: 4rem;   min-height: 4rem; }
.xwui-button-icon-only:is(.xwui-button-3xl,.xwui-button-xxxl) { padding: 1.5rem;   min-width: 5rem;   min-height: 5rem; }
.xwui-button-icon-only:is(.xwui-button-4xl,.xwui-button-xxxxl) { padding: 2.4rem;   min-width: 8rem;   min-height: 8rem; }

/* Icon-only legacy aliases */
.xwui-button-icon-only.xwui-button-small  { padding: var(--spacing-xs, 0.375rem); min-width: 2rem;   min-height: 2rem; }
.xwui-button-icon-only.xwui-button-medium { padding: var(--spacing-sm, 0.625rem); min-width: 2.5rem; min-height: 2.5rem; }
.xwui-button-icon-only.xwui-button-large  { padding: var(--spacing-sm, 0.875rem); min-width: 3rem;   min-height: 3rem; }

/* Text — the label. Semibold to match the previous XWUIItem `-bold` label
   weight. NOT flex:1, so an icon + label stay a tight, centred group (the
   button's own justify-content:center centres them) instead of the label
   stretching and pushing the icon to the edge. */
.xwui-button-text {
    font-weight: var(--font-weight-semibold, 600);
    text-align: center;
}

/* Ensure text inside buttons inherits button color for visibility */
.xwui-button .xwui-button-text,
.xwui-button span,
.xwui-button div {
    color: inherit;
}

/* Ensure icons inside buttons inherit button color for visibility */
.xwui-button .xwui-button-icon,
.xwui-button .xwui-icon {
    color: inherit;
}

/* Do NOT force fill/stroke on button icons. Icons resolved by XWUIIcon carry
   their own correct paint (feather/tabler: stroke="currentColor" fill="none";
   bootstrap: fill="currentColor"). Forcing `fill: currentColor` here filled
   the stroke-based glyphs solid — the "icon transformation" that made e.g. the
   gear render as a chunky blob. Inheriting `color` (above) is enough: the
   glyph's own currentColor references resolve to the button's text colour. */

/* Remove margin from xwui-icon when inside button - button uses gap for spacing */
.xwui-button .xwui-icon {
    margin: 0;
}

/* ============================================
   Link variant — looks like inline text, underlines on hover. No bg/border.
   ============================================ */
.xwui-button.xwui-button-link {
    background: transparent;
    color: var(--accent-primary, var(--role-primary-bg)) !important;
    border: none;
    padding-left: var(--spacing-xs, 0.375rem);
    padding-right: var(--spacing-xs, 0.375rem);
    min-height: 0;
}
.xwui-button.xwui-button-link:hover:not(:disabled) {
    background: transparent;
    color: var(--accent-hover, var(--accent-primary)) !important;
    text-decoration: underline;
}
.xwui-button.xwui-button-link:active:not(:disabled) {
    background: transparent;
}

/* ============================================
   Tonal / soft variants — tinted fill + coloured ink (M3 "tonal").
   Higher specificity than the solid `.xwui-button-<variant>` rules so the
   tint wins; ink stays the saturated role colour for legibility on the tint.
   ============================================ */
.xwui-button.xwui-button-tonal {
    border-color: transparent !important;
    box-shadow: none;
}
.xwui-button.xwui-button-tonal.xwui-button-primary,
.xwui-button.xwui-button-tonal.xwui-button-info {
    background: color-mix(in srgb, var(--accent-primary) 14%, transparent) !important;
    color: var(--accent-primary) !important;
}
.xwui-button.xwui-button-tonal.xwui-button-primary:hover:not(:disabled),
.xwui-button.xwui-button-tonal.xwui-button-info:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-primary) 24%, transparent) !important;
}
.xwui-button.xwui-button-tonal.xwui-button-danger {
    background: color-mix(in srgb, var(--accent-error) 14%, transparent) !important;
    color: var(--accent-error) !important;
}
.xwui-button.xwui-button-tonal.xwui-button-danger:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-error) 24%, transparent) !important;
}
.xwui-button.xwui-button-tonal.xwui-button-success {
    background: color-mix(in srgb, var(--accent-success) 16%, transparent) !important;
    color: color-mix(in srgb, var(--accent-success) 80%, black) !important;
}
.xwui-button.xwui-button-tonal.xwui-button-success:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-success) 26%, transparent) !important;
}
.xwui-button.xwui-button-tonal.xwui-button-warning {
    background: color-mix(in srgb, var(--accent-warning) 18%, transparent) !important;
    color: color-mix(in srgb, var(--accent-warning) 70%, black) !important;
}
.xwui-button.xwui-button-tonal.xwui-button-warning:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-warning) 28%, transparent) !important;
}
/* Neutral tonal (secondary) — surface tint, primary ink. */
.xwui-button.xwui-button-tonal.xwui-button-secondary {
    background: var(--bg-secondary, color-mix(in srgb, var(--text-primary) 8%, transparent)) !important;
    color: var(--text-primary) !important;
}
.xwui-button.xwui-button-tonal.xwui-button-secondary:hover:not(:disabled) {
    background: var(--bg-hover, color-mix(in srgb, var(--text-primary) 14%, transparent)) !important;
}

/* ============================================
   Shape overrides — per-button corner radius (overrides theme --radius-button).
   ============================================ */
.xwui-button.xwui-button-shape-sharp   { border-radius: 0 !important; }
.xwui-button.xwui-button-shape-rounded { border-radius: var(--radius-lg, 1rem) !important; }
.xwui-button.xwui-button-shape-pill    { border-radius: 9999px !important; }

/* Host element follows the button shape. The custom-element host (<xwui-button>)
   wraps the real <button>; without this it's a square box, so a border /
   background / backdrop-filter set on the HOST (the natural way to skin a button
   — e.g. a glassmorphism frosted ring) draws a stray RECTANGLE around the pill.
   Mirroring the shape attribute onto the host makes the host fully customizable:
   anything painted on it now hugs the button outline. inline-flex so the host
   shrink-wraps the button instead of stretching to a block. */
xwui-button { display: inline-flex; border-radius: var(--radius-button, var(--radius-sm, 6px)); }
xwui-button[shape="sharp"]   { border-radius: 0; }
xwui-button[shape="rounded"] { border-radius: var(--radius-lg, 1rem); }
xwui-button[shape="pill"]    { border-radius: 9999px; }
xwui-button[full-width="true"] { display: flex; width: 100%; }

/* ============================================
   Decorative effects — opt-in marketing / premium CTA treatments.
   ============================================ */
/* Gradient fill — warm pink → red → yellow sweep, lifts on hover. */
.xwui-button.xwui-button-effect-gradient {
    background: linear-gradient(to right, #ec4899, #ef4444, #eab308) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.12));
}
.xwui-button.xwui-button-effect-gradient:hover:not(:disabled) {
    background: linear-gradient(to right, #db2777, #dc2626, #ca8a04) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.18));
}
.xwui-button.xwui-button-effect-gradient:active:not(:disabled) {
    transform: translateY(0);
}

/* Custom gradient fill — the gradient itself is set inline (with !important to
   beat the variant's own background); this rule supplies the on-accent text and
   removes the border so any CSS gradient reads cleanly. */
.xwui-button.xwui-button-gradient {
    color: var(--text-on-accent, #ffffff) !important;
    border: none !important;
}
.xwui-button.xwui-button-gradient:hover:not(:disabled) {
    filter: brightness(1.06);
}

/* 3D push — solid bottom edge that collapses when pressed. */
.xwui-button.xwui-button-effect-raised {
    border-bottom: 4px solid color-mix(in srgb, var(--accent-primary) 65%, black) !important;
    transition: transform 0.08s ease, border-bottom-width 0.08s ease;
}
.xwui-button.xwui-button-effect-raised:active:not(:disabled) {
    border-bottom-width: 0 !important;
    transform: translateY(4px);
}

/* Animated glow halo — fuchsia pulse (the marketing "glow" accent). */
.xwui-button.xwui-button-effect-glow {
    animation: xwui-button-glow 2s ease-in-out infinite;
}
@keyframes xwui-button-glow {
    0%, 100% { box-shadow: 0 0 10px 2px color-mix(in srgb, #e879f9 55%, transparent); }
    50%      { box-shadow: 0 0 22px 6px color-mix(in srgb, #e879f9 80%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .xwui-button.xwui-button-effect-glow { animation: none; }
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */


/* basic/XWUIButtonAction/XWUIButtonAction.css */
/**
 * XWUIButtonAction — styles that layer on top of XWUIButton.
 *
 * XWUIButtonAction is a preset layer over XWUIButton: it picks an icon, label,
 * and variant from its `action` name and hands off to the parent class. All base
 * visuals come from XWUIButton.
 *
 * This file intentionally has no rules. It previously fought XWUIItem's nested
 * layout (`.xwui-item-text`, `.xwui-item-content-block`, `.xwui-item-primary-content`,
 * `.xwui-item-standard-layout`, `.xwui-item-icon`) to recenter icon-only/text-only
 * presets. XWUIButton no longer builds an XWUIItem — it renders a FLAT button with
 * `.xwui-button-icon` / `.xwui-button-text`, and handles icon-only mode itself via
 * `.xwui-button-icon-only`. Every `.xwui-item-*` selector here therefore matched
 * nothing (dead rules), so they were removed with no change to rendered output.
 *
 * The file is kept (not deleted) because XWUIComponent loads each component's CSS
 * by name; add preset-specific rules here if a future preset needs them.
 */

/* basic/XWUIButtonCopy/XWUIButtonCopy.css */
/**
 * XWUIButtonCopy Component Styles
 * Copy button with feedback
 */

.xwui-button-copy-container {
    display: inline-block;
}

.xwui-button-copy-wrapper {
    display: inline-block;
}


/* basic/XWUIButtonFAB/XWUIButtonFAB.css */
/**
 * XWUIButtonFAB Component Styles
 * MUI Floating Action Button: single FAB (standard + extended). M3 sizes.
 */

.xwui-button-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-fab, 16px);
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  /* Colors route through the canonical --accent-* family so the FAB follows
     whatever accent the user picks. --color-primary / --color-on-primary
     used to sit here as fallbacks but they're not defined by any theme,
     so the hardcoded #1976d2 Material blue was always winning. */
  color: var(--color-fab-fg, var(--role-primary-fg, var(--text-inverse, #fff)));
  background-color: var(--color-fab-bg, var(--accent-primary, #4f46e5));
  box-shadow: var(--shadow-fab, 0 4px 12px rgba(0,0,0,0.25));
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.xwui-button-fab:hover {
  background-color: var(--color-fab-bg-hover, var(--accent-primary-hover, var(--accent-hover)));
  box-shadow: var(--shadow-fab-hover, 0 6px 16px rgba(0,0,0,0.3));
}

.xwui-button-fab:focus-visible {
  outline: 2px solid var(--accent-primary, currentColor);
  outline-offset: 2px;
}

.xwui-button-fab[aria-disabled="true"],
.xwui-button-fab:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

/* FAB sizes (canonical 9-step scale) */
:is(.xwui-fab-3xs,.xwui-fab-xxxs) {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-fab-small, 6px);
}
:is(.xwui-fab-4xs,.xwui-fab-xxxxs) {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-fab-small, 6px);
}

:is(.xwui-fab-2xs,.xwui-fab-xxs) {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-fab-small, 8px);
}

.xwui-fab-xs {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-fab-small, 10px);
}

:is(.xwui-fab-s,.xwui-fab-sm) {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-fab-small, 12px);
}

:is(.xwui-fab-m,.xwui-fab-md) {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-fab, 16px);
}

:is(.xwui-fab-l,.xwui-fab-lg) {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-fab-large, 28px);
}

.xwui-fab-xl {
  width: 112px;
  height: 112px;
  border-radius: var(--radius-fab-large, 32px);
}

:is(.xwui-fab-2xl,.xwui-fab-xxl) {
  width: 144px;
  height: 144px;
  border-radius: var(--radius-fab-large, 40px);
}

:is(.xwui-fab-3xl,.xwui-fab-xxxl) {
  width: 176px;
  height: 176px;
  border-radius: var(--radius-fab-large, 48px);
}
:is(.xwui-fab-4xl,.xwui-fab-xxxxl) {
  width: 281.6px;
  height: 281.6px;
  border-radius: var(--radius-fab-large, 48px);
}

.xwui-fab-extended {
  padding-left: 16px;
  padding-right: 16px;
  width: auto;
  min-width: 48px;
}

.xwui-fab-extended:is(.xwui-fab-3xs,.xwui-fab-xxxs) { height: 20px; }
.xwui-fab-extended:is(.xwui-fab-4xs,.xwui-fab-xxxxs) { height: 10px; }
.xwui-fab-extended:is(.xwui-fab-2xs,.xwui-fab-xxs) { height: 28px; }
.xwui-fab-extended.xwui-fab-xs { height: 32px; }
.xwui-fab-extended:is(.xwui-fab-s,.xwui-fab-sm) { height: 40px; }
.xwui-fab-extended:is(.xwui-fab-m,.xwui-fab-md) { height: 56px; }
.xwui-fab-extended:is(.xwui-fab-l,.xwui-fab-lg) { height: 96px; }
.xwui-fab-extended.xwui-fab-xl { height: 112px; }
.xwui-fab-extended:is(.xwui-fab-2xl,.xwui-fab-xxl) { height: 144px; }
.xwui-fab-extended:is(.xwui-fab-3xl,.xwui-fab-xxxl) { height: 176px; }
.xwui-fab-extended:is(.xwui-fab-4xl,.xwui-fab-xxxxl) { height: 281.6px; }

/* Legacy size aliases */
.xwui-fab-small { width: 40px; height: 40px; border-radius: var(--radius-fab-small, 12px); }
.xwui-fab-medium { width: 56px; height: 56px; border-radius: var(--radius-fab, 16px); }
.xwui-fab-large { width: 96px; height: 96px; border-radius: var(--radius-fab-large, 28px); }
/* Extended + legacy-size: override the fixed width AND height from the size
   alias so the pill grows to fit its label. Previously only `height` was
   overridden, leaving the size alias's `width: 56px` in effect and clipping
   any label past ~2 glyphs (user-visible bug: "Add" rendered as "A /"). */
.xwui-fab-extended.xwui-fab-small { width: auto; height: 40px; }
.xwui-fab-extended.xwui-fab-medium { width: auto; height: 56px; }
.xwui-fab-extended.xwui-fab-large { width: auto; height: 96px; }

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

.xwui-fab-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Variants */
.xwui-fab-surface {
  background-color: var(--color-fab-surface-bg, var(--bg-elevated));
  color: var(--color-fab-surface-fg, var(--accent-primary));
}

.xwui-fab-secondary {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

.xwui-fab-tertiary {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

/* basic/XWUIButtonGroup/XWUIButtonGroup.css */
/**
 * XWUIButtonGroup Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Roundness: theme/roundness/button/*.css (component-specific roundness)
 */

.xwui-button-group {
    display: inline-flex;
    border-radius: var(--radius-button, var(--radius-md, 6px));
    overflow: hidden;
}

.xwui-button-group-vertical {
    flex-direction: column;
}

/* Grid orientation · packs items into N columns and as many rows as
 * needed. Used by `orientation: 'grid'` and by `orientation: 'auto'`
 * when auto resolves to grid. Column count comes from the
 * --xwui-bg-cols custom property set by the component on render. */
.xwui-button-group-grid {
    --xwui-bg-cols: 3;
    display: grid;
    grid-template-columns: repeat(var(--xwui-bg-cols), minmax(0, 1fr));
    width: 100%;
}
/* Stretch each child so cells share width evenly · the inner XWUIButton
 * is wrapped in a div, so target its child too. */
.xwui-button-group-grid .xwui-button-group-item,
.xwui-button-group-grid .xwui-button-group-item > div {
    width: 100%;
}

/* Group item */
.xwui-button-group-item {
    position: relative;
}

/* Border between items · differs per orientation so seams render as
 * one continuous outline. The grid mode uses both right + bottom
 * borders; the right column drops its right border, the last row drops
 * its bottom border. */
.xwui-button-group-horizontal .xwui-button-group-item:not(:last-child) {
    border-right: var(--border-width-regular, 1.5px) solid var(--border-color);
}

.xwui-button-group-vertical .xwui-button-group-item:not(:last-child) {
    border-right: none;
    border-bottom: var(--border-width-regular, 1.5px) solid var(--border-color);
}

.xwui-button-group-grid .xwui-button-group-item {
    border-right: var(--border-width-regular, 1.5px) solid var(--border-color);
    border-bottom: var(--border-width-regular, 1.5px) solid var(--border-color);
}
/* Last column · no right border. Uses :nth-child(Nn) where N is the
 * column count via the custom property. Browsers don't accept a custom
 * property inside :nth-child, so this falls back to :last-child for
 * non-perfect-grid cases (i.e. trailing partial row). */
.xwui-button-group-grid .xwui-button-group-item:nth-child(var(--xwui-bg-cols, 3)n),
.xwui-button-group-grid .xwui-button-group-item:last-child {
    border-right: none;
}

.xwui-button-group-item-selected {
    z-index: 1;
}

.xwui-button-group-item-selected > div {
    background: var(--accent-primary);
    color: var(--text-inverse);
    border-color: var(--accent-primary);
}


/* basic/XWUIButtonIcon/XWUIButtonIcon.css */
/* XWUIButtonIcon — wrapper for icon-only XWUIButton; no extra layout. */
.xwui-button-icon-container {
  display: inline-block;
}

/* basic/XWUIButtonSpeechToText/XWUIButtonSpeechToText.css */
/* XWUIButtonSpeechToText */
.xwui-button-speech-to-text-container {
  display: inline-block;
}

.xwui-button-speech-to-text-wrapper {
  display: contents;
}

/* basic/XWUIButtonSplit/XWUIButtonSplit.css */
/**
 * XWUIButtonSplit Component Styles
 * Split button with main action and dropdown
 */

.xwui-button-split-container {
    display: inline-block;
}

.xwui-button-split-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0;
}

.xwui-button-split-main {
    display: inline-block;
}

.xwui-button-split-main button,
.xwui-button-split-main .xwui-button {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.xwui-button-split-divider {
    width: 1px;
    height: 100%;
    background-color: var(--border-color, rgba(0, 0, 0, 0.05));
    align-self: stretch;
}

.xwui-button-split-dropdown {
    display: inline-block;
}

.xwui-button-split-dropdown button,
.xwui-button-split-dropdown .xwui-button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding-left: var(--spacing-xs, 4px);
    padding-right: var(--spacing-xs, 4px);
    min-width: auto;
}

.xwui-button-split-dropdown-container {
    position: absolute;
    z-index: 1000;
}

/* basic/XWUICalendar/XWUICalendar.css */
/**
 * XWUICalendar Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/calendar/*.css (component-specific border widths)
 * - Roundness: theme/roundness/calendar/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-calendar {
    width: 100%;
    background: var(--bg-primary);
    border: var(--border-calendar-width, var(--border-width-regular, 1.5px)) var(--border-calendar-style, solid) var(--border-calendar-color, var(--border-color));
    border-radius: var(--radius-calendar, var(--radius-md, 8px));
    padding: var(--spacing-md, 1rem);
    /* Keep the calendar inside its parent when padding + border are applied.
       Without box-sizing: border-box, width: 100% + padding pushes the root
       wider than the container and the last column clips off-screen. */
    box-sizing: border-box;
}

/* Navigation */
.xwui-calendar-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md, 1rem);
    gap: var(--spacing-md, 1rem);
}

.xwui-calendar-title {
    font-weight: var(--font-weight-semibold, 600);
    font-size: var(--font-size-lg, 1.125rem);
    color: var(--text-primary);
    flex: 1;
    text-align: center;
}

.xwui-calendar-nav-button,
.xwui-calendar-today-button {
    padding: var(--spacing-sm, 0.5rem) var(--spacing-sm, 0.75rem);
    border: var(--border-calendar-width, var(--border-width-regular, 1.5px)) var(--border-calendar-style, solid) var(--border-calendar-color, var(--border-color));
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: var(--radius-calendar, var(--radius-sm, 6px));
    cursor: pointer;
    transition: all 0.2s;
    font-size: var(--font-size-sm, 0.875rem);
}

.xwui-calendar-nav-button:hover,
.xwui-calendar-today-button:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-primary);
}

/* ============================================
   Clickable month/year segments in the title — let users jump straight to
   a month or year picker by clicking the label instead of walking through
   the prev/next arrows.
   ============================================ */
.xwui-calendar-title {
    /* Layout adjustment: the title is now a flex row of two buttons instead
       of a single text node, so we need inline-flex + gap for spacing. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.xwui-calendar-title-segment {
    background: transparent;
    border: 1px solid transparent;
    color: inherit;
    font: inherit;
    font-weight: var(--font-weight-semibold, 600);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.xwui-calendar-title-segment:hover {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}
.xwui-calendar-title-segment:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
}

/* ============================================
   Quick-pick grids (opens on title click; replaces the days view until
   the user selects or re-clicks the title).

   Month picker: 4 columns × 3 rows = 12 slots for Jan..Dec.
   Year picker:  3 columns, 21 rows (current year ±10), scrollable if tall.
   ============================================ */
.xwui-calendar-picker {
    display: grid;
    gap: var(--spacing-xs, 0.375rem);
    padding: var(--spacing-sm, 0.5rem) 0;
}

.xwui-calendar-month-picker {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.xwui-calendar-year-picker {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-height: 18rem;
    overflow-y: auto;
}

.xwui-calendar-picker-cell {
    padding: 0.625rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 6px);
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    font-weight: var(--font-weight-medium, 500);
    font-size: var(--font-size-sm, 0.875rem);
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    text-align: center;
    box-sizing: border-box;
}
.xwui-calendar-picker-cell:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-primary);
}
.xwui-calendar-picker-cell-active {
    background: var(--accent-primary);
    color: var(--role-primary-fg, var(--text-inverse));
    border-color: var(--accent-primary);
}
.xwui-calendar-picker-cell-active:hover {
    background: var(--accent-primary-hover, var(--accent-primary));
    border-color: var(--accent-primary-hover, var(--accent-primary));
}

/* Month view */
.xwui-calendar-month {
    width: 100%;
}

.xwui-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--spacing-xs, 0.25rem);
    margin-bottom: var(--spacing-sm, 0.5rem);
}

.xwui-calendar-weekday {
    text-align: center;
    font-weight: var(--font-weight-semibold, 600);
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary);
    padding: var(--spacing-sm, 0.5rem);
    min-width: 0;
    box-sizing: border-box;
}

/* The days grid uses `minmax(0, 1fr)` rather than bare `1fr` so each
   column's minimum is 0 instead of the "auto" min-content default that
   grid applies. With bare `1fr`, cells that contain wider content (e.g.
   numbers that wrap, borders + padding, or a focus ring) force the track
   to widen past 1/7 of the container and the last column spills past the
   right edge — exactly what the screenshot shows. */
.xwui-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--spacing-xs, 0.25rem);
}

.xwui-calendar-day {
    /* NOTE: `aspect-ratio: 1` is intentionally dropped here.
       Previously:
         aspect-ratio: 1 + min-height: 60px
       With a narrow grid (<420px, ~60px/col × 7), this forced the cell WIDTH
       up to 60px to satisfy the 1:1 ratio with min-height. 7 × 60 = 420px
       overflowed the 7-column grid track of a narrower parent, and adjacent
       cells painted on top of each other (the "double-strip" overlap bug).
       Letting each cell be exactly `1fr` wide and at least 60px tall keeps
       the grid honest at any parent width — the calendar stays rectangular
       on narrow layouts rather than breaking. */
    border: var(--border-calendar-width, var(--border-width-regular, 1.5px)) var(--border-calendar-style, solid) var(--border-calendar-color, var(--border-color));
    border-radius: var(--radius-calendar, var(--radius-sm, 6px));
    padding: var(--spacing-sm, 0.5rem);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    min-height: 60px;
    /* Include border + padding inside the 1fr track so the grid math adds
       up to the container width. Without this the cell's visual width =
       1fr + 2*padding + 2*border, which for 7 cells overflows. */
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
}

/* When the parent has enough room (≥ 480px grid), restore square cells for
   the classic calendar look. Below that, cells stay rectangular (taller
   than wide) and everything fits without overflow. */
@container (min-width: 480px) {
    .xwui-calendar-day {
        aspect-ratio: 1;
    }
}
.xwui-calendar-days {
    container-type: inline-size;
}

.xwui-calendar-day:hover:not(.xwui-calendar-day-disabled) {
    background: var(--bg-secondary);
    border-color: var(--accent-primary);
}

.xwui-calendar-day-other-month {
    opacity: 0.4;
}

/* Today — subtle tint + accent border. Text uses surface-fg so it stays readable
   regardless of the tint amount. */
.xwui-calendar-day-today {
    background: color-mix(in srgb, var(--accent-primary, var(--role-primary-bg)) 10%, var(--role-surface-bg, var(--bg-primary, #fff)));
    color: var(--role-surface-fg, var(--text-primary));
    border-color: var(--accent-primary, var(--role-primary-bg));
    font-weight: var(--font-weight-semibold, 600);
}

/* Selected — role-primary pair (bg+fg guaranteed-readable together).
   !important on both so XWUIItem status classes cannot override. */
.xwui-calendar-day-selected {
    background: var(--accent-primary, var(--role-primary-bg)) !important;
    color: var(--role-primary-fg, var(--text-inverse)) !important;
    border-color: var(--accent-primary, var(--role-primary-bg));
}

/* Today AND selected — the selected pair wins (bold filled), not the subtle tint. */
.xwui-calendar-day-today.xwui-calendar-day-selected {
    background: var(--accent-primary, var(--role-primary-bg)) !important;
    color: var(--role-primary-fg, var(--text-inverse)) !important;
}

.xwui-calendar-day-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.xwui-calendar-day-number {
    font-size: var(--font-size-sm, 0.875rem);
    margin-bottom: var(--spacing-xs, 0.25rem);
}

.xwui-calendar-day-events {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xxs, 0.125rem);
    margin-top: auto;
}

.xwui-calendar-event-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s;
}

.xwui-calendar-event-dot:hover {
    transform: scale(1.5);
}

.xwui-calendar-event-more {
    font-size: var(--font-size-xs, 0.625rem);
    color: var(--text-secondary);
    margin-left: var(--spacing-xs, 0.25rem);
}


/* basic/XWUICard/XWUICard.css */
/**
 * XWUICard Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Roundness: theme/roundness/container/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-card {
    display: flex;
    flex-direction: column;
    /* Card surface — themed via --bg-card (defined per theme in styles/theme/colors/*.css).
       Falls back to --bg-primary then white for robustness. */
    background: var(--bg-card, var(--bg-primary, #ffffff));
    color: var(--text-primary, #212529);
    border-radius: var(--radius-container, var(--radius-lg, 12px));
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
}

/* Variants */
.xwui-card-default {
    border: var(--border-container-width, var(--border-width-regular, 1.5px)) var(--border-container-style, solid) var(--border-container-color, var(--border-color, #dee2e6));
}

.xwui-card-outlined {
    border: var(--border-container-width, var(--border-width-regular, 1.5px)) var(--border-container-style, solid) var(--border-container-color, var(--border-color, #dee2e6));
    /* Outlined still has the themed card surface (not transparent), so content stays readable
       regardless of the page background. */
    background: var(--bg-card, var(--bg-primary, #ffffff));
}

.xwui-card-elevated {
    box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}

.xwui-card-filled {
    background: var(--bg-secondary, #f8f9fa);
    border: none;
}

/* Hover and clickable states */
.xwui-card-hoverable:hover {
    background: var(--bg-card-hover, var(--bg-card, var(--bg-primary, #ffffff)));
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
}

.xwui-card-clickable {
    cursor: pointer;
}

.xwui-card-clickable:focus {
    outline: none;
    box-shadow: var(--shadow-xs);
}

/* Cover */
.xwui-card-cover {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.xwui-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Header */
.xwui-card-header {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.25rem);
}

/* Header layout when tags are inline (tagsPosition: 'header') —
   titled content on the left, tags pushed to the right. */
.xwui-card-header.xwui-card-header-with-tags {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-sm, 0.75rem);
    flex-wrap: wrap;
}
.xwui-card-header.xwui-card-header-with-tags .xwui-card-titled {
    flex: 1 1 auto;
    min-width: 0;
}
.xwui-card-tags-inline {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs, 0.25rem);
    align-items: center;
    flex: 0 0 auto;
}

/* When the title is rendered via XWUIItem (title is an ItemConfig),
   drop any default margins and let the item's own sizing control the height. */
.xwui-card-title-item {
    min-width: 0;
}
.xwui-card-title-item .xwui-item {
    margin: 0;
}

.xwui-card-title-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.75rem);
    flex-wrap: wrap;
}

.xwui-card-title {
    margin: 0;
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary, #212529);
}

.xwui-card-badge {
    display: inline-flex;
    align-items: center;
}

.xwui-card-subtitle {
    margin: 0;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary, #6c757d);
}

/* Body */
.xwui-card-body {
    flex: 1;
    color: var(--text-primary, #212529);
}

/* Footer */
.xwui-card-footer {
    border-top: var(--border-card-width, var(--border-width-regular, 1.5px)) var(--border-card-style, solid) var(--border-card-color, var(--border-color, #dee2e6));
    margin-top: auto;
}

.xwui-card-footer.xwui-card-footer-borderless {
    border-top: none;
}

.xwui-card-footer-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs, 0.25rem);
    align-items: center;
}

/* Padding variants */
.xwui-card-padding-none .xwui-card-header,
.xwui-card-padding-none .xwui-card-body,
.xwui-card-padding-none .xwui-card-footer {
    padding: 0;
}

.xwui-card-padding-small .xwui-card-header,
.xwui-card-padding-small .xwui-card-body,
.xwui-card-padding-small .xwui-card-footer {
    padding: var(--spacing-sm, 0.75rem);
}

.xwui-card-padding-medium .xwui-card-header,
.xwui-card-padding-medium .xwui-card-body,
.xwui-card-padding-medium .xwui-card-footer {
    padding: var(--spacing-md, 1rem);
}

.xwui-card-padding-large .xwui-card-header,
.xwui-card-padding-large .xwui-card-body,
.xwui-card-padding-large .xwui-card-footer {
    padding: var(--spacing-lg, 1.5rem);
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */


/* basic/XWUICardFeature/XWUICardFeature.css */
/**
 * XWUICardFeature — feature highlight card.
 *
 * Every color, radius, spacing and shadow below resolves through XWUI's
 * canonical design-token names (--bg-*, --text-*, --border-*, --accent-*,
 * --role-*, --radius-*, --spacing-*, --shadow-*). No hardcoded hex, no
 * rgba() fallbacks — the card recolors automatically on every theme,
 * style and accent change.
 */

.xwui-card-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 0.9rem);
  padding: var(--spacing-lg, 1.5rem);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.xwui-card-feature[data-variant='outlined'] {
  background: transparent;
  border-color: var(--border-color);
}

.xwui-card-feature[data-variant='elevated'] {
  box-shadow: var(--shadow-md);
}

.xwui-card-feature[data-variant='ghost'] {
  background: transparent;
  border-color: transparent;
}

.xwui-card-feature[data-size='sm'] { padding: var(--spacing-md, 1rem); gap: 0.65rem; }
.xwui-card-feature[data-size='lg'] { padding: var(--spacing-xl, 2rem); gap: 1rem; }

.xwui-card-feature[data-hoverable='true']:hover {
  transform: translateY(-2px);
  border-color: var(--border-medium, var(--border-color));
  box-shadow: var(--shadow-md);
}

/* Icon tile — default uses the active theme's primary accent. */
.xwui-card-feature__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  color: var(--role-primary-fg, var(--text-inverse, var(--text-primary)));
  background: linear-gradient(
    135deg,
    var(--accent-primary),
    var(--accent-primary-hover, var(--accent-primary))
  );
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--accent-primary) 60%, transparent);
}

.xwui-card-feature__icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Accent variants — all driven by XWUI role/accent tokens. */
.xwui-card-feature[data-accent='accent'] .xwui-card-feature__icon {
  background: linear-gradient(
    135deg,
    var(--accent-info, var(--accent-primary)),
    var(--accent-primary)
  );
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--accent-info, var(--accent-primary)) 60%, transparent);
}
.xwui-card-feature[data-accent='success'] .xwui-card-feature__icon {
  background: linear-gradient(
    135deg,
    var(--role-success-bg-hover, var(--role-success-bg)),
    var(--role-success-bg)
  );
  color: var(--role-success-fg, var(--text-inverse, var(--text-primary)));
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--role-success-bg) 60%, transparent);
}
.xwui-card-feature[data-accent='warning'] .xwui-card-feature__icon {
  background: linear-gradient(
    135deg,
    var(--role-warning-bg-hover, var(--role-warning-bg)),
    var(--role-warning-bg)
  );
  color: var(--role-warning-fg, var(--text-inverse, var(--text-primary)));
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--role-warning-bg) 60%, transparent);
}
.xwui-card-feature[data-accent='danger'] .xwui-card-feature__icon {
  background: linear-gradient(
    135deg,
    var(--role-danger-bg-hover, var(--role-danger-bg)),
    var(--role-danger-bg)
  );
  color: var(--role-danger-fg, var(--text-inverse, var(--text-primary)));
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--role-danger-bg) 60%, transparent);
}
.xwui-card-feature[data-accent='none'] .xwui-card-feature__icon {
  background: var(--bg-hover);
  color: var(--text-primary);
  box-shadow: none;
}

.xwui-card-feature__tag {
  position: absolute;
  top: var(--spacing-md, 1rem);
  right: var(--spacing-md, 1rem);
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-full, 999px);
  background: var(--bg-hover);
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 600;
  border: 1px solid var(--border-light);
}

.xwui-card-feature__body {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.xwui-card-feature__title {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.xwui-card-feature[data-size='lg'] .xwui-card-feature__title { font-size: 1.25rem; }

.xwui-card-feature__description {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.55;
}

.xwui-card-feature__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: auto;
  color: var(--accent-primary);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}
.xwui-card-feature__link::after {
  content: '→';
  transition: transform 140ms ease;
}
.xwui-card-feature__link:hover { text-decoration: underline; color: var(--accent-primary-hover, var(--accent-primary)); }
.xwui-card-feature__link:hover::after { transform: translateX(3px); }

/* basic/XWUICarousel/XWUICarousel.css */
/**
 * XWUICarousel Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Roundness: theme/roundness/carousel/*.css (component-specific roundness)
 */

.xwui-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-carousel, var(--radius-md, 8px));
}

.xwui-carousel-track {
    display: flex;
    transition: transform 0.3s ease;
}

.xwui-carousel-slide {
    flex: 0 0 100%;
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.xwui-carousel-slide-active {
    opacity: 1;
}

/* Arrows */
.xwui-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-radius: 50%;
    cursor: pointer;
    font-size: var(--font-size-2xl, 1.5rem);
    line-height: 1;
    z-index: 10;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xwui-carousel-arrow:hover {
    background: var(--bg-primary);
    box-shadow: var(--shadow-md);
}

.xwui-carousel-arrow-prev {
    left: var(--spacing-md, 1rem);
}

.xwui-carousel-arrow-next {
    right: var(--spacing-md, 1rem);
}

/* Indicators */
.xwui-carousel-indicators {
    position: absolute;
    bottom: var(--spacing-md, 1rem);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--spacing-sm, 0.5rem);
    z-index: 10;
}

.xwui-carousel-indicator {
    width: 8px;
    height: 8px;
    border: none;
    background: var(--bg-secondary);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}

.xwui-carousel-indicator:hover {
    background: var(--bg-elevated);
}

.xwui-carousel-indicator-active {
    background: var(--bg-primary);
    width: 24px;
    border-radius: var(--radius-carousel, var(--radius-xs, 4px));
}


/* basic/XWUICascader/XWUICascader.css */
/**
 * XWUICascader Component Styles
 */

.xwui-cascader-container {
    position: relative;
}

.xwui-cascader {
    /* Component wrapper */
}

.xwui-cascader-menus {
    display: flex;
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--border-color, #d9d9d9);
    border-radius: var(--radius-sm, 4px);
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.15));
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
}

.xwui-cascader-menu {
    list-style: none;
    margin: 0;
    padding: var(--spacing-xs, 4px) 0;
    min-width: 150px;
    border-right: 1px solid var(--border-light, #f0f0f0);
}

.xwui-cascader-menu:last-child {
    border-right: none;
}

.xwui-cascader-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.xwui-cascader-menu-item:hover {
    background-color: var(--bg-hover, #f5f5f5);
}

.xwui-cascader-menu-item-selected {
    background-color: var(--bg-active, #e6f7ff);
    font-weight: var(--font-weight-medium, 500);
}

.xwui-cascader-menu-item-label {
    flex: 1;
}

.xwui-cascader-menu-item-arrow {
    margin-left: var(--spacing-sm, 8px);
    font-size: 10px;
    color: var(--text-tertiary, #999);
}


/* basic/XWUICenter/XWUICenter.css */
/**
 * XWUICenter Component Styles
 */

.xwui-center-wrapper {
    /* Wrapper has no specific styles */
}

.xwui-center {
    box-sizing: border-box;
}


/* basic/XWUICheckbox/XWUICheckbox.css */
/**
 * XWUICheckbox Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Roundness: theme/roundness/rounded.css (global roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-checkbox {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--spacing-sm, 0.625rem);
    cursor: pointer;
    user-select: none;
}

.xwui-checkbox-disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Hidden input */
.xwui-checkbox-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Visual checkbox */
.xwui-checkbox-visual {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--border-control-width, var(--border-width-thick, 2px)) var(--border-control-style, solid) var(--border-control-color, var(--border-color, #dee2e6));
    border-radius: var(--radius-control, var(--radius-xs, 4px));
    background: var(--bg-primary, #ffffff);
    transition: all 0.15s ease;
}

.xwui-checkbox-icon {
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.15s ease;
    color: var(--text-inverse);
}

/* Size variants */
.xwui-checkbox-small .xwui-checkbox-visual {
    width: 16px;
    height: 16px;
}

.xwui-checkbox-small .xwui-checkbox-icon {
    width: 12px;
    height: 12px;
}

.xwui-checkbox-medium .xwui-checkbox-visual {
    width: 20px;
    height: 20px;
}

.xwui-checkbox-medium .xwui-checkbox-icon {
    width: 14px;
    height: 14px;
}

.xwui-checkbox-large .xwui-checkbox-visual {
    width: 24px;
    height: 24px;
}

.xwui-checkbox-large .xwui-checkbox-icon {
    width: 18px;
    height: 18px;
}

/* Checked state */
.xwui-checkbox-input:checked + .xwui-checkbox-visual {
    background: var(--accent-primary, #4f46e5);
    border-color: var(--accent-primary, #4f46e5);
    box-shadow: var(--glow-checkbox-checked, none);
}

.xwui-checkbox-input:checked + .xwui-checkbox-visual .xwui-checkbox-icon-check {
    opacity: 1;
    transform: scale(1);
}

/* Indeterminate state */
.xwui-checkbox-input:indeterminate + .xwui-checkbox-visual {
    background: var(--accent-primary, #4f46e5);
    border-color: var(--accent-primary, #4f46e5);
}

.xwui-checkbox-input:indeterminate + .xwui-checkbox-visual .xwui-checkbox-icon-indeterminate {
    opacity: 1;
    transform: scale(1);
}

.xwui-checkbox-input:indeterminate + .xwui-checkbox-visual .xwui-checkbox-icon-check {
    opacity: 0;
}

/* Focus state */
.xwui-checkbox-input:focus-visible + .xwui-checkbox-visual {
    box-shadow: var(--glow-checkbox-focus, var(--shadow-xs));
}

/* Hover state */
.xwui-checkbox:hover .xwui-checkbox-visual {
    border-color: var(--accent-primary, #4f46e5);
}

/* Color variants */
.xwui-checkbox-success .xwui-checkbox-input:checked + .xwui-checkbox-visual,
.xwui-checkbox-success .xwui-checkbox-input:indeterminate + .xwui-checkbox-visual {
    background: var(--accent-success, #10b981);
    border-color: var(--accent-success, #10b981);
}

.xwui-checkbox-warning .xwui-checkbox-input:checked + .xwui-checkbox-visual,
.xwui-checkbox-warning .xwui-checkbox-input:indeterminate + .xwui-checkbox-visual {
    background: var(--accent-warning, #f59e0b);
    border-color: var(--accent-warning, #f59e0b);
}

.xwui-checkbox-error .xwui-checkbox-input:checked + .xwui-checkbox-visual,
.xwui-checkbox-error .xwui-checkbox-input:indeterminate + .xwui-checkbox-visual {
    background: var(--accent-error, #ef4444);
    border-color: var(--accent-error, #ef4444);
}

/* Text content */
.xwui-checkbox-text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xxs, 0.125rem);
}

.xwui-checkbox-label {
    font-size: var(--font-size-base, 0.9375rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary, #212529);
    line-height: 1.4;
}

.xwui-checkbox-description {
    font-size: var(--font-size-sm, 0.8125rem);
    color: var(--text-secondary, #6c757d);
    line-height: 1.4;
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */


/* basic/XWUIChip/XWUIChip.css */
/**
 * XWUIChip Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Roundness: theme/roundness/chip/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs, 0.375rem);
    border-radius: var(--radius-chip, 999px);
    font-weight: var(--font-weight-medium, 500);
    transition: opacity 0.2s, transform 0.2s;
}

.xwui-chip-closing {
    opacity: 0;
    transform: scale(0.8);
}

/* ============================================
   Variants — solid fills, mirroring XWUIButton's accent-token pattern.
   Colors come from theme/accents/*.css (--accent-*) + theme/colors/*.css;
   --role-*-fg pairs are contrast-guaranteed, with --text-* fallbacks.
   ============================================ */
.xwui-chip-default {
    background: var(--bg-secondary, var(--role-secondary-bg));
    color: var(--role-secondary-fg, var(--text-primary));
    border: 1px solid var(--border-color);
}
.xwui-chip-primary {
    background: var(--accent-primary, var(--role-primary-bg));
    color: var(--role-primary-fg, var(--text-on-accent, var(--text-inverse)));
}
.xwui-chip-success {
    background: var(--accent-success, var(--role-success-bg));
    color: var(--role-success-fg, var(--text-on-accent, var(--text-inverse)));
}
.xwui-chip-warning {
    background: var(--accent-warning, var(--role-warning-bg));
    color: var(--role-warning-fg, var(--text-primary));
}
.xwui-chip-error {
    background: var(--accent-error, var(--role-danger-bg));
    color: var(--role-danger-fg, var(--text-on-accent, var(--text-inverse)));
}

/* Size variants */
.xwui-chip-small {
    padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.625rem);
    font-size: var(--font-size-xs, 0.75rem);
}

.xwui-chip-medium {
    padding: var(--spacing-xs, 0.375rem) var(--spacing-sm, 0.75rem);
    font-size: var(--font-size-sm, 0.8125rem);
}

.xwui-chip-large {
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
    font-size: var(--font-size-sm, 0.875rem);
}

/* Avatar */
.xwui-chip-avatar {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: calc(var(--spacing-xs, 0.25rem) * -1);
}

.xwui-chip-avatar img {
    width: 1.25em;
    height: 1.25em;
    border-radius: 50%;
    object-fit: cover;
}

/* Icon */
.xwui-chip-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.xwui-chip-icon svg {
    width: 1em;
    height: 1em;
}

/* Label */
.xwui-chip-label {
    white-space: nowrap;
}

/* Close button */
.xwui-chip-close {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-right: calc(var(--spacing-xs, 0.25rem) * -1);
    margin-left: var(--spacing-xs, 0.25rem);
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s;
    flex-shrink: 0;
}

.xwui-chip-close:hover {
    background: var(--bg-hover);
}

.xwui-chip-close svg {
    width: 0.875em;
    height: 0.875em;
}

/* Clickable */
.xwui-chip-clickable {
    cursor: pointer;
    user-select: none;
}

.xwui-chip-clickable:hover {
    opacity: 0.9;
}

.xwui-chip-clickable:focus {
    outline: none;
    box-shadow: 0 0 0 2px currentColor;
}


/* basic/XWUICities/XWUICities.css */
.xwui-cities-host {
    min-width: min(100%, 260px);
    max-width: 100%;
}

/* basic/XWUICollapse/XWUICollapse.css */
/**
 * XWUICollapse Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 */

.xwui-collapse {
    overflow: hidden;
    transition: height 200ms ease-out;
}

.xwui-collapse-content {
    /* Ensure content doesn't get cut off during animation */
}

.xwui-collapse-collapsed {
    height: 0;
}

.xwui-collapse-expanded {
    height: auto;
}

.xwui-collapse-expanding,
.xwui-collapse-collapsing {
    /* During animation */
}

/* Visibility variants */
.xwui-collapse-hidden .xwui-collapse-content {
    visibility: hidden;
}

.xwui-collapse-visible .xwui-collapse-content {
    visibility: visible;
}

/* Fade variant */
.xwui-collapse-fade .xwui-collapse-content {
    opacity: 0;
    transition: opacity 200ms ease-out;
}

.xwui-collapse-fade.xwui-collapse-expanded .xwui-collapse-content {
    opacity: 1;
}


/* basic/XWUICommandPalette/XWUICommandPalette.css */
/* XWUICommandPalette — spotlight-style launcher.
   All colors/radii/shadows come from xwui design tokens. */

.xwui-command-palette-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 12vh;
  z-index: 1000;
}

.xwui-command-palette {
  --xwui-command-palette-max-height: 50vh;
  width: min(640px, calc(100vw - 40px));
  background: var(--bg-secondary, #1a1a1a);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-lg, 14px);
  box-shadow: var(--shadow-lg, 0 16px 50px rgba(0, 0, 0, 0.6));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.xwui-command-palette-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
}

.xwui-command-palette-kbd {
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--bg-tertiary, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  font-size: 11px;
  color: var(--text-secondary, rgba(255, 255, 255, 0.6));
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
}

.xwui-command-palette-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 15px;
  color: var(--text-primary, inherit);
  padding: 0;
}

.xwui-command-palette-list {
  max-height: var(--xwui-command-palette-max-height);
  overflow-y: auto;
}

.xwui-command-palette-item {
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background-color 0.08s ease, border-left-color 0.08s ease;
}

.xwui-command-palette-item:hover,
.xwui-command-palette-item-active {
  background: var(--bg-hover, rgba(255, 255, 255, 0.04));
  border-left-color: var(--accent-primary, #4f46e5);
}

.xwui-command-palette-title {
  font-size: 14px;
  color: var(--text-primary, inherit);
}

.xwui-command-palette-section {
  font-size: 11px;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.4));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  align-self: center;
}

.xwui-command-palette-empty {
  padding: 16px;
  text-align: center;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.4));
  font-size: 13px;
}

.xwui-command-palette-footer {
  display: flex;
  gap: 16px;
  padding: 8px 16px;
  border-top: 1px solid var(--border-color, rgba(255, 255, 255, 0.08));
  background: var(--bg-tertiary, rgba(255, 255, 255, 0.02));
  font-size: 11px;
  color: var(--text-tertiary, rgba(255, 255, 255, 0.4));
}

/* basic/XWUIComment/XWUIComment.css */
/**
 * XWUIComment Component Styles
 * Ant Design Comment parity.
 */
.xwui-comment {
  position: relative;
}

.xwui-comment-inner {
  display: flex;
  gap: 12px;
}

.xwui-comment-avatar {
  flex-shrink: 0;
}

.xwui-comment-avatar img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.xwui-comment-body {
  flex: 1;
  min-width: 0;
}

.xwui-comment-header {
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.xwui-comment-author {
  font-weight: 600;
  color: var(--color-comment-author, var(--text-primary));
}

.xwui-comment-datetime {
  font-size: 0.875rem;
  color: var(--color-comment-datetime, rgba(0,0,0,0.45));
}

.xwui-comment-content {
  color: var(--text-primary);
  line-height: 1.5;
}

.xwui-comment-actions {
  margin-top: 8px;
  display: flex;
  gap: 16px;
}

.xwui-comment-action {
  font-size: 0.875rem;
  color: var(--color-comment-action, rgba(0,0,0,0.45));
  cursor: pointer;
}

.xwui-comment-action:hover {
  color: var(--accent-primary);
}

.xwui-comment-nested {
  margin-left: 40px;
}

/* basic/XWUICompanyCard/XWUICompanyCard.css */
/* XWUICompanyCard - CRM company / account card */

.xwui-company-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color, transparent);
  border-radius: var(--radius-md, 8px);
  color: var(--text-primary);
  font-family: var(--font-body, inherit);
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.xwui-company-card-default     { background: var(--bg-primary); border-color: transparent; }
.xwui-company-card-outlined    { background: var(--bg-primary); border-color: var(--border-color); }
.xwui-company-card-elevated    { background: var(--bg-elevated); border-color: transparent; box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06)); }
.xwui-company-card-filled      { background: var(--bg-secondary); border-color: transparent; }

:is(.xwui-company-card-s,.xwui-company-card-sm) { gap: 0.5rem;   padding: 0.5rem 0.625rem;   font-size: 0.875rem; }
:is(.xwui-company-card-m,.xwui-company-card-md) { gap: 0.75rem;  padding: 0.875rem 1rem;     font-size: 0.9375rem; }
:is(.xwui-company-card-l,.xwui-company-card-lg) { gap: 0.9375rem; padding: 1.125rem 1.25rem; font-size: 1rem; }

.xwui-company-card-hoverable:hover { background: var(--bg-hover); border-color: var(--border-color); }
.xwui-company-card-clickable      { cursor: pointer; user-select: none; }
.xwui-company-card-clickable:active { background: var(--bg-active); }
.xwui-company-card-clickable:focus-visible { outline: 2px solid var(--role-primary-bg, #337ea9); outline-offset: 2px; }

/* Header */
.xwui-company-card-header {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.75rem;
  align-items: start;
}
.xwui-company-card-vertical .xwui-company-card-header {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}

.xwui-company-card-logo { display: flex; align-items: center; }

.xwui-company-card-identity { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }

.xwui-company-card-name-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.xwui-company-card-name {
  margin: 0;
  font-size: 1em;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.xwui-company-card-type { display: inline-flex; }

.xwui-company-card-subline {
  color: var(--text-secondary);
  font-size: 0.8125em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xwui-company-card-domain {
  display: inline-block;
  margin-top: 0.125rem;
  color: var(--role-info-bg, var(--text-secondary));
  font-size: 0.8125em;
  text-decoration: none;
}
.xwui-company-card-domain:hover { text-decoration: underline; }

/* Stats grid */
.xwui-company-card-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-light, var(--border-color));
}
.xwui-company-card-stat {
  padding: 0.5rem 0.625rem;
  background: var(--bg-elevated);
  border-radius: var(--radius-sm, 4px);
}
.xwui-company-card-stat-label {
  color: var(--text-tertiary);
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.xwui-company-card-stat-value {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin-top: 0.125rem;
  font-size: 1.0625em;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.xwui-company-card-stat-trend { font-size: 0.75em; line-height: 1; }
.xwui-company-card-stat-trend-up   { color: var(--role-success-bg, #15803d); }
.xwui-company-card-stat-trend-down { color: var(--role-danger-bg, #b91c1c); }
.xwui-company-card-stat-trend-flat { color: var(--text-tertiary); }

.xwui-company-card-stat-success { background: var(--role-success-bg, rgba(34,197,94,0.12)); }
.xwui-company-card-stat-warning { background: var(--role-warning-bg, rgba(234,179,8,0.16)); }
.xwui-company-card-stat-error   { background: var(--role-danger-bg, rgba(239,68,68,0.14)); }
.xwui-company-card-stat-info    { background: var(--role-info-bg, rgba(14,165,233,0.14)); }

.xwui-company-card-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; }

/* Owner footer */
.xwui-company-card-owner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-light, var(--border-color));
  font-size: 0.8125em;
  color: var(--text-secondary);
}
.xwui-company-card-owner-label { color: var(--text-tertiary); }
.xwui-company-card-owner-avatar { display: inline-flex; }
.xwui-company-card-owner-name { color: var(--text-primary); font-weight: 500; }

/* basic/XWUIComponent/XWUIComponent.css */
/* Reserve space for lazy-loaded content; uses theme tokens when in scope */
.xwui-lazy-placeholder {
  min-height: 4rem;
}

/* Skeleton system — shown while a lazy component is offscreen.
   Subclasses override renderSkeleton() to draw component-shaped blocks using
   .xwui-skeleton (+ optional .xwui-skeleton-text / .xwui-skeleton-circle / .xwui-skeleton-block). */
.xwui-skeleton-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm, 0.5rem);
  padding: var(--spacing-md, 1rem);
  background: var(--role-surface-bg, var(--bg-card, var(--bg-primary, #fff)));
  border-radius: var(--radius-container, var(--radius-lg, 12px));
}

.xwui-skeleton {
  display: block;
  position: relative;
  overflow: hidden;
  background: var(--skeleton-bg, #e5e7eb);
  border-radius: var(--radius-sm, 6px);
  animation: xwui-skeleton-pulse 1.4s ease-in-out infinite;
}

.xwui-skeleton-block { height: 3rem; width: 100%; }
.xwui-skeleton-text  { height: 0.85rem; width: 100%; border-radius: 4px; }
.xwui-skeleton-text-short { height: 0.85rem; width: 60%; border-radius: 4px; }
.xwui-skeleton-title { height: 1.1rem; width: 40%; border-radius: 4px; }
.xwui-skeleton-chip  { height: 1.1rem; width: 3rem; border-radius: 999px; }
.xwui-skeleton-circle { width: 2.5rem; height: 2.5rem; border-radius: 50%; }

@keyframes xwui-skeleton-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1;   }
}

/* Shimmer overlay variant (activates when the theme sets --skeleton-shimmer: 1) */
.xwui-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, #fff 35%, transparent) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: xwui-skeleton-shimmer 1.6s linear infinite;
}

@keyframes xwui-skeleton-shimmer {
  100% { transform: translateX(100%); }
}

/* basic/XWUIContactCard/XWUIContactCard.css */
/* XWUIContactCard - CRM contact card */

.xwui-contact-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.875rem;
  align-items: start;
  padding: 0.875rem 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color, transparent);
  border-radius: var(--radius-md, 8px);
  color: var(--text-primary);
  font-family: var(--font-body, inherit);
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Variants */
.xwui-contact-card-default     { background: var(--bg-primary); border-color: transparent; }
.xwui-contact-card-outlined    { background: var(--bg-primary); border-color: var(--border-color); }
.xwui-contact-card-elevated    { background: var(--bg-elevated); border-color: transparent; box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06)); }
.xwui-contact-card-filled      { background: var(--bg-secondary); border-color: transparent; }

/* Sizes */
:is(.xwui-contact-card-s,.xwui-contact-card-sm) { gap: 0.625rem; padding: 0.5rem 0.625rem; font-size: 0.875rem; }
:is(.xwui-contact-card-m,.xwui-contact-card-md) { gap: 0.875rem; padding: 0.875rem 1rem; font-size: 0.9375rem; }
:is(.xwui-contact-card-l,.xwui-contact-card-lg) { gap: 1.125rem; padding: 1.125rem 1.25rem; font-size: 1rem; }

/* Layouts */
.xwui-contact-card-vertical {
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}
.xwui-contact-card-vertical .xwui-contact-card-actions { justify-content: center; }

.xwui-contact-card-horizontal {
  grid-template-columns: auto 1fr auto;
}

.xwui-contact-card-inline {
  grid-template-columns: auto 1fr auto;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
}
.xwui-contact-card-inline .xwui-contact-card-methods,
.xwui-contact-card-inline .xwui-contact-card-tags,
.xwui-contact-card-inline .xwui-contact-card-last-activity { display: none; }

/* Hover & click */
.xwui-contact-card-hoverable:hover { background: var(--bg-hover); border-color: var(--border-color); }
.xwui-contact-card-clickable      { cursor: pointer; user-select: none; }
.xwui-contact-card-clickable:active { background: var(--bg-active); }
.xwui-contact-card-clickable:focus-visible { outline: 2px solid var(--role-primary-bg, #337ea9); outline-offset: 2px; }

/* Avatar slot */
.xwui-contact-card-avatar { display: flex; align-items: center; }

/* Body */
.xwui-contact-card-body { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }

.xwui-contact-card-identity {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.xwui-contact-card-name {
  margin: 0;
  font-size: 1em;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.xwui-contact-card-status,
.xwui-contact-card-custom-badge { display: inline-flex; }

/* Score chip — colour by data-score-level */
.xwui-contact-card-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  height: 1.6em;
  padding: 0 0.4em;
  border-radius: 999px;
  font-size: 0.75em;
  font-weight: 700;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  font-variant-numeric: tabular-nums;
}
.xwui-contact-card-score[data-score-level="hot"]      { background: var(--role-danger-bg, rgba(239,68,68,0.15)); color: var(--role-danger-fg, #b91c1c); border-color: transparent; }
.xwui-contact-card-score[data-score-level="warm"]     { background: var(--role-warning-bg, rgba(234,179,8,0.18)); color: var(--role-warning-fg, #92400e); border-color: transparent; }
.xwui-contact-card-score[data-score-level="lukewarm"] { background: var(--role-info-bg, rgba(14,165,233,0.16)); color: var(--role-info-fg, #075985); border-color: transparent; }
.xwui-contact-card-score[data-score-level="cold"]     { background: var(--bg-elevated); color: var(--text-secondary); }
.xwui-contact-card-score[data-score-level="frozen"]   { background: var(--bg-elevated); color: var(--text-tertiary); }

/* Subline */
.xwui-contact-card-subline {
  color: var(--text-secondary);
  font-size: 0.875em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Methods row */
.xwui-contact-card-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.75rem;
  margin-top: 0.25rem;
}
.xwui-contact-card-method {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.8125em;
  border-radius: var(--radius-sm, 4px);
  padding: 0.125rem 0.375rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light, var(--border-color));
  transition: background-color 0.12s ease, color 0.12s ease;
}
.xwui-contact-card-method:hover { color: var(--text-primary); background: var(--bg-hover); }
.xwui-contact-card-method-primary { color: var(--role-primary-bg, var(--text-primary)); border-color: var(--role-primary-bg, var(--border-color)); }

.xwui-contact-card-method-icon {
  width: 0.875em;
  height: 0.875em;
  background-color: currentColor;
  -webkit-mask: var(--xwui-icon, none) center / contain no-repeat;
          mask: var(--xwui-icon, none) center / contain no-repeat;
}
.xwui-contact-card-method-email .xwui-contact-card-method-icon { background: currentColor; clip-path: polygon(0 20%, 100% 20%, 100% 80%, 0 80%); }
.xwui-contact-card-method-phone .xwui-contact-card-method-icon,
.xwui-contact-card-method-mobile .xwui-contact-card-method-icon { background: currentColor; clip-path: circle(35%); }
.xwui-contact-card-method-website .xwui-contact-card-method-icon { background: currentColor; clip-path: circle(50%); }
.xwui-contact-card-method-address .xwui-contact-card-method-icon { background: currentColor; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.xwui-contact-card-method-linkedin .xwui-contact-card-method-icon,
.xwui-contact-card-method-twitter .xwui-contact-card-method-icon { background: currentColor; clip-path: polygon(20% 0, 80% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%); }

.xwui-contact-card-method-value {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 18ch;
}

/* Tags row */
.xwui-contact-card-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.375rem; }

/* Last-activity hint */
.xwui-contact-card-last-activity {
  margin-top: 0.5rem;
  font-size: 0.75em;
  color: var(--text-tertiary);
  font-style: italic;
}

/* Quick actions column */
.xwui-contact-card-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: nowrap;
}
.xwui-contact-card-action { display: inline-flex; }

/* Vertical reflow */
.xwui-contact-card-vertical .xwui-contact-card-body { align-items: center; }
.xwui-contact-card-vertical .xwui-contact-card-identity { justify-content: center; }
.xwui-contact-card-vertical .xwui-contact-card-methods,
.xwui-contact-card-vertical .xwui-contact-card-tags { justify-content: center; }

/* Inline: collapse to single row */
.xwui-contact-card-inline { align-items: center; }
.xwui-contact-card-inline .xwui-contact-card-name { font-size: 0.9375em; }
.xwui-contact-card-inline .xwui-contact-card-subline { font-size: 0.8125em; }

/* basic/XWUIContainer/XWUIContainer.css */
/**
 * XWUIContainer Component Styles
 * Container with max-width and centering
 */

.xwui-container-wrapper {
    /* Wrapper has no specific styles */
}

.xwui-container {
    box-sizing: border-box;
    width: 100%;
}


/* basic/XWUICountries/XWUICountries.css */
/* XWUICountries — host wraps XWUISelect / XWUIList */
.xwui-countries-host {
    min-width: min(100%, 260px);
    max-width: 100%;
}

/* basic/XWUIDataView/XWUIDataView.css */
/**
 * XWUIDataView Component Styles
 * List/grid layout and paginator (design reference: PrimeReact DataView — no React dependency).
 */
.xwui-dataview {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.xwui-dataview-layout-toggle {
  display: flex;
  gap: 4px;
}

.xwui-dataview-layout-btn {
  padding: 6px 10px;
  border: 1px solid var(--color-outline, #ccc);
  background: var(--bg-primary, #fff);
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.875rem;
}

.xwui-dataview-layout-btn[aria-pressed="true"] {
  background: var(--accent-primary);
  color: var(--role-primary-fg);
  border-color: var(--accent-primary);
}

.xwui-dataview-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.xwui-dataview--grid .xwui-dataview-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.xwui-dataview-item {
  padding: 8px;
  border: 1px solid var(--color-outline-variant, #eee);
  border-radius: 6px;
  background: var(--bg-primary);
}

.xwui-dataview-item-content {
  color: var(--text-primary);
}

.xwui-dataview-paginator {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.xwui-dataview-paginator button {
  padding: 6px 12px;
  border: 1px solid var(--color-outline);
  background: var(--bg-primary);
  border-radius: 4px;
  cursor: pointer;
}

.xwui-dataview-paginator button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* basic/XWUIDealCard/XWUIDealCard.css */
/* XWUIDealCard - Sales deal / opportunity card */

.xwui-deal-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color, transparent);
  border-radius: var(--radius-md, 8px);
  color: var(--text-primary);
  font-family: var(--font-body, inherit);
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}

.xwui-deal-card-default     { background: var(--bg-primary); border-color: transparent; }
.xwui-deal-card-outlined    { background: var(--bg-primary); border-color: var(--border-color); }
.xwui-deal-card-elevated    { background: var(--bg-elevated); border-color: transparent; box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06)); }
.xwui-deal-card-filled      { background: var(--bg-secondary); border-color: transparent; }

:is(.xwui-deal-card-s,.xwui-deal-card-sm) { gap: 0.375rem; padding: 0.5rem 0.625rem; font-size: 0.875rem; }
:is(.xwui-deal-card-m,.xwui-deal-card-md) { gap: 0.5rem;   padding: 0.875rem 1rem;   font-size: 0.9375rem; }
:is(.xwui-deal-card-l,.xwui-deal-card-lg) { gap: 0.625rem; padding: 1.125rem 1.25rem; font-size: 1rem; }

.xwui-deal-card-hoverable:hover { background: var(--bg-hover); border-color: var(--border-color); }
.xwui-deal-card-clickable      { cursor: pointer; user-select: none; }
.xwui-deal-card-clickable:active { background: var(--bg-active); }
.xwui-deal-card-clickable:focus-visible { outline: 2px solid var(--role-primary-bg, #337ea9); outline-offset: 2px; }

/* Stage strip — left edge accent */
.xwui-deal-card { border-left-width: 3px; border-left-style: solid; border-left-color: transparent; }
.xwui-deal-card-stage-lead         { border-left-color: var(--text-tertiary, #888); }
.xwui-deal-card-stage-qualified    { border-left-color: var(--text-secondary, #555); }
.xwui-deal-card-stage-discovery    { border-left-color: var(--role-info-bg, #0ea5e9); }
.xwui-deal-card-stage-proposal     { border-left-color: var(--role-primary-bg, #337ea9); }
.xwui-deal-card-stage-negotiation  { border-left-color: var(--role-warning-bg, #eab308); }
.xwui-deal-card-stage-won          { border-left-color: var(--role-success-bg, #22c55e); }
.xwui-deal-card-stage-lost         { border-left-color: var(--role-danger-bg, #ef4444); opacity: 0.85; }

/* Compact layout */
.xwui-deal-card-layout-compact { gap: 0.25rem; padding: 0.5rem 0.75rem; }
.xwui-deal-card-layout-compact .xwui-deal-card-prob { display: none; }
.xwui-deal-card-layout-compact .xwui-deal-card-tags { display: none; }
.xwui-deal-card-layout-compact .xwui-deal-card-footer { display: none; }

/* Header row */
.xwui-deal-card-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
  font-size: 0.75em;
}
.xwui-deal-card-stage,
.xwui-deal-card-health { display: inline-flex; }
.xwui-deal-card-close {
  margin-left: auto;
  color: var(--text-tertiary);
  font-size: 0.875em;
  font-variant-numeric: tabular-nums;
}
.xwui-deal-card-close-overdue { color: var(--role-danger-bg, #b91c1c); font-weight: 600; }

.xwui-deal-card-title {
  margin: 0;
  font-size: 1em;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xwui-deal-card-account {
  color: var(--text-secondary);
  font-size: 0.8125em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Amount */
.xwui-deal-card-amount-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.xwui-deal-card-amount {
  font-size: 1.25em;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.xwui-deal-card-weighted {
  font-size: 0.8125em;
  color: var(--text-secondary);
}

/* Probability bar */
.xwui-deal-card-prob { display: flex; flex-direction: column; gap: 0.25rem; }
.xwui-deal-card-prob-label {
  display: flex;
  justify-content: space-between;
  color: var(--text-tertiary);
  font-size: 0.75em;
  font-variant-numeric: tabular-nums;
}
.xwui-deal-card-prob-track {
  height: 4px;
  border-radius: 999px;
  background: var(--bg-elevated);
  overflow: hidden;
}
.xwui-deal-card-prob-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--role-primary-bg, #337ea9);
  transition: width 0.3s ease;
}
.xwui-deal-card-prob-fill[data-band="high"] { background: var(--role-success-bg, #22c55e); }
.xwui-deal-card-prob-fill[data-band="mid"]  { background: var(--role-primary-bg, #337ea9); }
.xwui-deal-card-prob-fill[data-band="low"]  { background: var(--role-warning-bg, #eab308); }
.xwui-deal-card-prob-fill[data-band="tiny"] { background: var(--role-danger-bg, #ef4444); }

.xwui-deal-card-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; }

/* Footer */
.xwui-deal-card-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-light, var(--border-color));
  font-size: 0.75em;
  color: var(--text-tertiary);
  flex-wrap: wrap;
}
.xwui-deal-card-owner {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.xwui-deal-card-owner-name { color: var(--text-secondary); }
.xwui-deal-card-last { margin-left: auto; font-style: italic; }

/* basic/XWUIDescriptionList/XWUIDescriptionList.css */
/**
 * XWUIDescriptionList Component Styles
 */

.xwui-description-list-container {
    /* Container has no specific styles */
}

.xwui-description-list {
    display: grid;
    gap: 16px;
}

.xwui-description-list-horizontal {
    grid-template-columns: auto 1fr;
}

.xwui-description-list-vertical {
    grid-template-columns: 1fr;
}

.xwui-description-list-item {
    display: contents;
}

.xwui-description-list-term {
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-secondary, #666);
    margin: 0;
}

.xwui-description-list-desc {
    margin: 0;
    color: var(--text-primary, #333);
}

.xwui-description-list-bordered {
    border: 1px solid var(--border-light, #e8e8e8);
    border-radius: var(--radius-sm, 4px);
}

.xwui-description-list-bordered .xwui-description-list-item {
    display: grid;
    grid-column: span 1;
    border-bottom: 1px solid var(--border-light, #e8e8e8);
    padding: var(--spacing-md, 12px);
}

.xwui-description-list-bordered .xwui-description-list-item:last-child {
    border-bottom: none;
}

/* Size variants (canonical 9-step scale) */
:is(.xwui-description-list-3xs,.xwui-description-list-xxxs) { font-size: 8px; }
:is(.xwui-description-list-4xs,.xwui-description-list-xxxxs) { font-size: 4px; }
:is(.xwui-description-list-2xs,.xwui-description-list-xxs) { font-size: 9px; }
.xwui-description-list-xs { font-size: 10px; }
:is(.xwui-description-list-s,.xwui-description-list-sm) { font-size: 12px; }
:is(.xwui-description-list-m,.xwui-description-list-md) { font-size: 14px; }
:is(.xwui-description-list-l,.xwui-description-list-lg) { font-size: 16px; }
.xwui-description-list-xl { font-size: 18px; }
:is(.xwui-description-list-2xl,.xwui-description-list-xxl) { font-size: 23px; }
:is(.xwui-description-list-3xl,.xwui-description-list-xxxl) { font-size: 29px; }
:is(.xwui-description-list-4xl,.xwui-description-list-xxxxl) { font-size: 46.4px; }

/* Legacy size aliases */
.xwui-description-list-small { font-size: 12px; }
.xwui-description-list-large { font-size: 16px; }


/* basic/XWUIDialog/XWUIDialog.css */
/**
 * XWUIDialog Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/dialog/*.css (component-specific border widths)
 * - Roundness: theme/roundness/dialog/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-overlay, rgba(0, 0, 0, 0.5));
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--spacing-2xl, 2rem);
    overflow-y: auto;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.xwui-dialog-overlay-visible {
    opacity: 1;
}

.xwui-dialog {
    background: var(--bg-primary, #ffffff);
    border-radius: var(--radius-dialog, var(--radius-lg, 12px));
    box-shadow: var(--shadow-xl, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
    width: 100%;
    max-height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
    transform: scale(0.95) translateY(-20px);
    transition: transform 0.2s ease;
    outline: none;
}

.xwui-dialog-visible {
    transform: scale(1) translateY(0);
}

.xwui-dialog-centered {
    margin: auto;
}

/* Size variants */
.xwui-dialog-small {
    max-width: 400px;
}

.xwui-dialog-medium {
    max-width: 560px;
}

.xwui-dialog-large {
    max-width: 800px;
}

.xwui-dialog-fullscreen {
    max-width: none;
    width: calc(100% - 4rem);
    height: calc(100vh - 4rem);
    border-radius: 0;
}

/* Header */
.xwui-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg, 1.25rem) var(--spacing-lg, 1.5rem);
    border-bottom: var(--border-dialog-width, var(--border-width-regular, 1.5px)) var(--border-dialog-style, solid) var(--border-dialog-color, var(--border-color, #dee2e6));
    flex-shrink: 0;
}

.xwui-dialog-title {
    margin: 0;
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary, #212529);
}

.xwui-dialog-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-secondary, #6c757d);
    border-radius: var(--radius-dialog, var(--radius-sm, 6px));
    transition: background 0.2s, color 0.2s;
}

.xwui-dialog-close:hover {
    background: var(--bg-secondary, #f8f9fa);
    color: var(--text-primary, #212529);
}

.xwui-dialog-close svg {
    width: 20px;
    height: 20px;
}

/* Body */
.xwui-dialog-body {
    padding: var(--spacing-lg, 1.5rem);
    flex: 1;
    color: var(--text-primary, #212529);
}

.xwui-dialog-scrollable .xwui-dialog-body {
    overflow-y: auto;
}

/* Footer */
.xwui-dialog-footer {
    padding: var(--spacing-md, 1rem) var(--spacing-lg, 1.5rem);
    border-top: var(--border-dialog-width, var(--border-width-regular, 1.5px)) var(--border-dialog-style, solid) var(--border-dialog-color, var(--border-color, #dee2e6));
    flex-shrink: 0;
}

/* Dialog buttons */
.xwui-dialog-btn {
    padding: var(--spacing-sm, 0.625rem) var(--spacing-md, 1rem);
    border: none;
    border-radius: var(--radius-dialog, var(--radius-sm, 6px));
    font-weight: var(--font-weight-medium, 500);
    font-size: var(--font-size-sm, 0.875rem);
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}

.xwui-dialog-btn-primary {
    background: var(--accent-primary, #4f46e5);
    color: var(--text-inverse);
}

.xwui-dialog-btn-primary:hover {
    background: var(--accent-hover, #4338ca);
}

.xwui-dialog-btn-secondary {
    background: var(--bg-secondary, #f8f9fa);
    color: var(--text-primary, #212529);
}

.xwui-dialog-btn-secondary:hover {
    background: var(--bg-tertiary, #e9ecef);
}

.xwui-dialog-btn-danger {
    background: var(--accent-error, #ef4444);
    color: var(--text-inverse);
}

.xwui-dialog-btn-danger:hover {
    background: var(--accent-error-hover, #dc2626);
}

/* Dark theme */
[data-theme="dark"] .xwui-dialog-overlay {
    background: var(--color-overlay-dark, rgba(0, 0, 0, 0.7));
}

[data-theme="dark"] .xwui-dialog {
    background: var(--bg-primary, #0f172a);
}

[data-theme="dark"] .xwui-dialog-header,
[data-theme="dark"] .xwui-dialog-footer {
    border-color: var(--border-color, #334155);
}

[data-theme="dark"] .xwui-dialog-title,
[data-theme="dark"] .xwui-dialog-body {
    color: var(--text-primary, #f1f5f9);
}

[data-theme="dark"] .xwui-dialog-close:hover {
    background: var(--bg-secondary, #1e293b);
}

[data-theme="dark"] .xwui-dialog-btn-secondary {
    background: var(--bg-secondary, #1e293b);
    color: var(--text-primary, #f1f5f9);
}

[data-theme="dark"] .xwui-dialog-btn-secondary:hover {
    background: var(--bg-tertiary, #334155);
}


/* basic/XWUIDisplayAvatar/XWUIDisplayAvatar.css */
/**
 * XWUIDisplayAvatar Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Roundness: theme/roundness/avatar/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--bg-secondary, #f8f9fa);
}

.xwui-avatar-circle {
    border-radius: 50%;
}

.xwui-avatar-square {
    border-radius: var(--radius-avatar, var(--radius-sm, 6px));
}

.xwui-avatar-bordered {
    border: var(--border-avatar-width, var(--border-width-thick, 2px)) var(--border-avatar-style, solid) var(--bg-primary);
    box-shadow: 0 0 0 1px var(--border-avatar-color, var(--border-color, #dee2e6));
}

/* Size variants — canonical 9-level scale */
:is(.xwui-avatar-3xs,.xwui-avatar-xxxs) { width: 16px; height: 16px; font-size: 8px; }
:is(.xwui-avatar-4xs,.xwui-avatar-xxxxs) { width: 8px; height: 8px; font-size: 4px; }
:is(.xwui-avatar-2xs,.xwui-avatar-xxs)  { width: 20px; height: 20px; font-size: 9px; }
.xwui-avatar-xs   { width: 24px; height: 24px; font-size: var(--font-size-xs, 0.625rem); }
:is(.xwui-avatar-s,.xwui-avatar-sm)   { width: 32px; height: 32px; font-size: var(--font-size-xs, 0.75rem); }
:is(.xwui-avatar-m,.xwui-avatar-md)   { width: 40px; height: 40px; font-size: var(--font-size-sm, 0.875rem); }
:is(.xwui-avatar-l,.xwui-avatar-lg)   { width: 48px; height: 48px; font-size: var(--font-size-base, 1rem); }
.xwui-avatar-xl   { width: 64px; height: 64px; font-size: var(--font-size-xl, 1.25rem); }
:is(.xwui-avatar-2xl,.xwui-avatar-xxl)  { width: 80px; height: 80px; font-size: var(--font-size-2xl, 1.5rem); }
:is(.xwui-avatar-3xl,.xwui-avatar-xxxl) { width: 96px; height: 96px; font-size: var(--font-size-3xl, 1.875rem); }
:is(.xwui-avatar-4xl,.xwui-avatar-xxxxl) { width: 153.6px; height: 153.6px; font-size: var(--font-size-3xl, 1.875rem); }

/* Legacy aliases */
.xwui-avatar-small  { width: 32px; height: 32px; font-size: var(--font-size-xs, 0.75rem); }
.xwui-avatar-medium { width: 40px; height: 40px; font-size: var(--font-size-sm, 0.875rem); }
.xwui-avatar-large  { width: 48px; height: 48px; font-size: var(--font-size-base, 1rem); }

/* Image */
.xwui-avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Fallback */
.xwui-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--text-inverse);
    font-weight: var(--font-weight-semibold, 600);
    text-transform: uppercase;
}

/* Status indicator */
.xwui-avatar-status {
    position: absolute;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    border: var(--border-width-thick, 2px) solid var(--bg-primary);
}

.xwui-avatar-xs .xwui-avatar-status,
.xwui-avatar-small .xwui-avatar-status {
    width: 8px;
    height: 8px;
}

.xwui-avatar-medium .xwui-avatar-status,
.xwui-avatar-large .xwui-avatar-status {
    width: 10px;
    height: 10px;
}

.xwui-avatar-xl .xwui-avatar-status {
    width: 12px;
    height: 12px;
}

.xwui-avatar-status-online {
    background: var(--accent-success);
}

.xwui-avatar-status-offline {
    background: var(--text-tertiary);
}

.xwui-avatar-status-away {
    background: var(--accent-warning);
}

.xwui-avatar-status-busy {
    background: var(--accent-error);
}

/* Avatar group */
.xwui-avatar-group {
    display: flex;
    flex-direction: row-reverse;
}

.xwui-avatar-group .xwui-avatar {
    margin-left: -8px;
    border: var(--border-width-thick, 2px) solid var(--bg-primary);
}

.xwui-avatar-group .xwui-avatar:last-child {
    margin-left: 0;
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */


/* basic/XWUIDisplayAvatarGroup/XWUIDisplayAvatarGroup.css */
/**
 * XWUIDisplayAvatarGroup Component Styles
 */

.xwui-avatar-group-container {
    /* Container has no specific styles */
}

.xwui-avatar-group {
    display: inline-flex;
    align-items: center;
}

.xwui-avatar-group-item {
    position: relative;
    border: 2px solid var(--bg-primary, #ffffff);
    border-radius: 50%;
    overflow: hidden;
}

.xwui-avatar-group-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--bg-secondary, #f0f0f0);
    border: 2px solid var(--bg-primary, #ffffff);
    color: var(--text-secondary, #666);
    font-size: var(--font-size-xs, 12px);
    font-weight: var(--font-weight-medium, 500);
    cursor: default;
}


/* basic/XWUIDisplayBadge/XWUIDisplayBadge.css */
/**
 * XWUIDisplayBadge Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Roundness: theme/roundness/badge/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-semibold, 600);
    border-radius: var(--radius-badge, 999px);
    white-space: nowrap;
}

/* Size variants (canonical 9-step scale) */
:is(.xwui-badge-3xs,.xwui-badge-xxxs) {
    min-width: 8px;
    height: 8px;
    padding: 0 var(--spacing-xs, 2px);
    font-size: var(--font-size-xs, 0.5rem);
}
:is(.xwui-badge-4xs,.xwui-badge-xxxxs) {
    min-width: 4px;
    height: 4px;
    padding: 0 var(--spacing-xs, 2px);
    font-size: var(--font-size-xs, 0.5rem);
}

:is(.xwui-badge-2xs,.xwui-badge-xxs) {
    min-width: 12px;
    height: 12px;
    padding: 0 var(--spacing-xs, 3px);
    font-size: var(--font-size-xs, 0.5625rem);
}

.xwui-badge-xs {
    min-width: 14px;
    height: 14px;
    padding: 0 var(--spacing-xs, 3px);
    font-size: var(--font-size-xs, 0.5625rem);
}

:is(.xwui-badge-s,.xwui-badge-sm) {
    min-width: 16px;
    height: 16px;
    padding: 0 var(--spacing-xs, 4px);
    font-size: var(--font-size-xs, 0.625rem);
}

:is(.xwui-badge-m,.xwui-badge-md) {
    min-width: 20px;
    height: 20px;
    padding: 0 var(--spacing-xs, 6px);
    font-size: var(--font-size-xs, 0.75rem);
}

:is(.xwui-badge-l,.xwui-badge-lg) {
    min-width: 24px;
    height: 24px;
    padding: 0 var(--spacing-sm, 8px);
    font-size: var(--font-size-sm, 0.8125rem);
}

.xwui-badge-xl {
    min-width: 28px;
    height: 28px;
    padding: 0 var(--spacing-sm, 10px);
    font-size: var(--font-size-sm, 0.875rem);
}

:is(.xwui-badge-2xl,.xwui-badge-xxl) {
    min-width: 36px;
    height: 36px;
    padding: 0 var(--spacing-md, 13px);
    font-size: var(--font-size-md, 1.125rem);
}

:is(.xwui-badge-3xl,.xwui-badge-xxxl) {
    min-width: 44px;
    height: 44px;
    padding: 0 var(--spacing-md, 16px);
    font-size: var(--font-size-lg, 1.4rem);
}
:is(.xwui-badge-4xl,.xwui-badge-xxxxl) {
    min-width: 70.4px;
    height: 70.4px;
    padding: 0 var(--spacing-md, 16px);
    font-size: var(--font-size-lg, 1.4rem);
}

/* Dot variant */
.xwui-badge-dot {
    min-width: auto;
    padding: 0;
}

.xwui-badge-dot:is(.xwui-badge-3xs,.xwui-badge-xxxs) {
    width: 3px;
    height: 3px;
}
.xwui-badge-dot:is(.xwui-badge-4xs,.xwui-badge-xxxxs) {
    width: 1.5px;
    height: 1.5px;
}

.xwui-badge-dot:is(.xwui-badge-2xs,.xwui-badge-xxs) {
    width: 4px;
    height: 4px;
}

.xwui-badge-dot.xwui-badge-xs {
    width: 5px;
    height: 5px;
}

.xwui-badge-dot:is(.xwui-badge-s,.xwui-badge-sm) {
    width: 6px;
    height: 6px;
}

.xwui-badge-dot:is(.xwui-badge-m,.xwui-badge-md) {
    width: 8px;
    height: 8px;
}

.xwui-badge-dot:is(.xwui-badge-l,.xwui-badge-lg) {
    width: 10px;
    height: 10px;
}

.xwui-badge-dot.xwui-badge-xl {
    width: 12px;
    height: 12px;
}

.xwui-badge-dot:is(.xwui-badge-2xl,.xwui-badge-xxl) {
    width: 16px;
    height: 16px;
}

.xwui-badge-dot:is(.xwui-badge-3xl,.xwui-badge-xxxl) {
    width: 20px;
    height: 20px;
}
.xwui-badge-dot:is(.xwui-badge-4xl,.xwui-badge-xxxxl) {
    width: 32px;
    height: 32px;
}

/* Legacy size aliases */
.xwui-badge-small { min-width: 16px; height: 16px; padding: 0 var(--spacing-xs, 4px); font-size: var(--font-size-xs, 0.625rem); }
.xwui-badge-medium { min-width: 20px; height: 20px; padding: 0 var(--spacing-xs, 6px); font-size: var(--font-size-xs, 0.75rem); }
.xwui-badge-large { min-width: 24px; height: 24px; padding: 0 var(--spacing-sm, 8px); font-size: var(--font-size-sm, 0.8125rem); }
.xwui-badge-dot.xwui-badge-small { width: 6px; height: 6px; }
.xwui-badge-dot.xwui-badge-medium { width: 8px; height: 8px; }
.xwui-badge-dot.xwui-badge-large { width: 10px; height: 10px; }

/* Color variants */
.xwui-badge-default {
    background: var(--bg-tertiary, #e9ecef);
    color: var(--text-primary, #212529);
}

.xwui-badge-primary {
    background: var(--accent-primary, #4f46e5);
    color: var(--text-inverse);
}

.xwui-badge-success {
    background: var(--accent-success, #10b981);
    color: var(--text-inverse);
}

.xwui-badge-warning {
    background: var(--accent-warning, #f59e0b);
    color: var(--text-inverse);
}

.xwui-badge-error {
    background: var(--accent-error, #ef4444);
    color: var(--text-inverse);
}

/* Position variants (for use as overlay) */
.xwui-badge-top-right {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
}

.xwui-badge-top-left {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
}

.xwui-badge-bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translate(50%, 50%);
}

.xwui-badge-bottom-left {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translate(-50%, 50%);
}

/* Badge container (wrapper for positioned badges) */
.xwui-badge-container {
    position: relative;
    display: inline-flex;
}

/* Animation for count changes */
@keyframes xwui-badge-pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.xwui-badge-animate {
    animation: xwui-badge-pulse 0.3s ease;
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */


/* basic/XWUIDisplayBarcode/XWUIDisplayBarcode.css */
/* XWUIDisplayBarcode – headless barcode container */
.xwui-barcode-container {
  display: inline-block;
  padding: 0.25rem 0;
}

.xwui-barcode {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.xwui-barcode-svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.xwui-barcode-value {
  font-family: monospace;
  font-size: 0.75rem;
  text-align: center;
  color: var(--xwui-text-secondary, #666);
}

.xwui-barcode-empty {
  font-size: 0.875rem;
  color: var(--xwui-text-hint, #999);
}

/* basic/XWUIDisplayBlockquote/XWUIDisplayBlockquote.css */
/**
 * XWUIDisplayBlockquote Component Styles
 * Quote text from external source. Use theme variables.
 */

.xwui-blockquote {
  margin: 0 0 1rem;
  padding-inline-start: var(--blockquote-padding-inline, 1rem);
  /* Left accent rail — uses --accent-primary so the quote stripe follows
     the selected accent. Previously referenced undefined --color-primary
     and fell through to hardcoded #1976d2 Material blue. */
  border-inline-start: 4px solid var(--color-blockquote-border, var(--accent-primary, #4f46e5));
  /* Body copy — --color-on-surface was never defined either. Use --text-primary. */
  color: var(--color-blockquote-fg, var(--text-primary));
}

.xwui-blockquote-inner {
  font-style: var(--blockquote-font-style, italic);
}

.xwui-blockquote-caption {
  margin-top: 0.5rem;
  font-size: 0.875rem;
  font-style: normal;
  opacity: 0.85;
}

/* basic/XWUIDisplayChip/XWUIDisplayChip.css */
/**
 * XWUIDisplayChip Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Roundness: theme/roundness/chip/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs, 0.375rem);
    border-radius: var(--radius-chip, 999px);
    font-weight: var(--font-weight-medium, 500);
    transition: opacity 0.2s, transform 0.2s, background 0.2s, color 0.2s, border-color 0.2s;
    /* Default visuals — every variant rule below overrides bg/color/border.
       Without this block a chip with no variant class renders as plain text. */
    border: 1px solid transparent;
}

.xwui-chip-closing {
    opacity: 0;
    transform: scale(0.8);
}

/* ============================================
   Variants — one pill style per semantic role.
   Uses accent/role vars so chips follow the active accent + color theme.
   ============================================ */
.xwui-chip-default {
    background: var(--bg-tertiary, var(--bg-secondary));
    background: color-mix(in srgb, var(--text-primary) 10%, transparent);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.xwui-chip-primary {
    background: var(--accent-primary-light, color-mix(in srgb, var(--accent-primary) 22%, transparent));
    color: var(--accent-primary);
    border-color: color-mix(in srgb, var(--accent-primary) 50%, transparent);
}

.xwui-chip-success {
    background: var(--accent-success-light, color-mix(in srgb, var(--accent-success) 22%, transparent));
    color: var(--accent-success);
    border-color: color-mix(in srgb, var(--accent-success) 50%, transparent);
}

.xwui-chip-warning {
    background: var(--accent-warning-light, color-mix(in srgb, var(--accent-warning) 22%, transparent));
    color: var(--accent-warning);
    border-color: color-mix(in srgb, var(--accent-warning) 50%, transparent);
}

.xwui-chip-error {
    background: var(--accent-error-light, color-mix(in srgb, var(--accent-error) 22%, transparent));
    color: var(--accent-error);
    border-color: color-mix(in srgb, var(--accent-error) 50%, transparent);
}

/* Size variants (canonical 9-step scale) */
:is(.xwui-chip-3xs,.xwui-chip-xxxs) {
    padding: var(--spacing-xs, 0.0625rem) var(--spacing-xs, 0.25rem);
    font-size: var(--font-size-xs, 0.5rem);
}
:is(.xwui-chip-4xs,.xwui-chip-xxxxs) {
    padding: var(--spacing-xs, 0.0625rem) var(--spacing-xs, 0.25rem);
    font-size: var(--font-size-xs, 0.5rem);
}

:is(.xwui-chip-2xs,.xwui-chip-xxs) {
    padding: var(--spacing-xs, 0.125rem) var(--spacing-xs, 0.375rem);
    font-size: var(--font-size-xs, 0.625rem);
}

.xwui-chip-xs {
    padding: var(--spacing-xs, 0.1875rem) var(--spacing-xs, 0.5rem);
    font-size: var(--font-size-xs, 0.6875rem);
}

:is(.xwui-chip-s,.xwui-chip-sm) {
    padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.625rem);
    font-size: var(--font-size-xs, 0.75rem);
}

:is(.xwui-chip-m,.xwui-chip-md) {
    padding: var(--spacing-xs, 0.375rem) var(--spacing-sm, 0.75rem);
    font-size: var(--font-size-sm, 0.8125rem);
}

:is(.xwui-chip-l,.xwui-chip-lg) {
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
    font-size: var(--font-size-sm, 0.875rem);
}

.xwui-chip-xl {
    padding: var(--spacing-sm, 0.625rem) var(--spacing-md, 1.25rem);
    font-size: var(--font-size-md, 1rem);
}

:is(.xwui-chip-2xl,.xwui-chip-xxl) {
    padding: var(--spacing-md, 0.8125rem) var(--spacing-md, 1.625rem);
    font-size: var(--font-size-md, 1.3rem);
}

:is(.xwui-chip-3xl,.xwui-chip-xxxl) {
    padding: var(--spacing-md, 1rem) var(--spacing-lg, 2rem);
    font-size: var(--font-size-lg, 1.6rem);
}
:is(.xwui-chip-4xl,.xwui-chip-xxxxl) {
    padding: var(--spacing-md, 1rem) var(--spacing-lg, 2rem);
    font-size: var(--font-size-lg, 1.6rem);
}

/* Legacy size aliases */
.xwui-chip-small { padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.625rem); font-size: var(--font-size-xs, 0.75rem); }
.xwui-chip-medium { padding: var(--spacing-xs, 0.375rem) var(--spacing-sm, 0.75rem); font-size: var(--font-size-sm, 0.8125rem); }
.xwui-chip-large { padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem); font-size: var(--font-size-sm, 0.875rem); }

/* M3 chip types (assist, filter, input, suggestion) — semantic styling hooks */
.xwui-chip-type-filter.xwui-chip-clickable {
    font-weight: var(--font-weight-medium);
}
.xwui-chip-type-input {
    /* Input chip often has avatar/icon; existing avatar/icon styles apply */
}
.xwui-chip-elevated {
    box-shadow: var(--shadow-sm);
}

/* Avatar */
.xwui-chip-avatar {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-left: calc(var(--spacing-xs, 0.25rem) * -1);
}

.xwui-chip-avatar img {
    width: 1.25em;
    height: 1.25em;
    border-radius: 50%;
    object-fit: cover;
}

/* Icon */
.xwui-chip-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.xwui-chip-icon svg {
    width: 1em;
    height: 1em;
}

/* Label */
.xwui-chip-label {
    white-space: nowrap;
}

/* Close button */
.xwui-chip-close {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-right: calc(var(--spacing-xs, 0.25rem) * -1);
    margin-left: var(--spacing-xs, 0.25rem);
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s;
    flex-shrink: 0;
}

.xwui-chip-close:hover {
    background: var(--bg-hover);
}

.xwui-chip-close svg {
    width: 0.875em;
    height: 0.875em;
}

/* Clickable */
.xwui-chip-clickable {
    cursor: pointer;
    user-select: none;
}

.xwui-chip-clickable:hover {
    opacity: 0.9;
}

.xwui-chip-clickable:focus {
    outline: none;
    box-shadow: 0 0 0 2px currentColor;
}


/* basic/XWUIDisplayColorPalette/XWUIDisplayColorPalette.css */
/**
 * XWUIDisplayColorPalette Component Styles
 *
 * A horizontal row of small color swatches used as a visual preview inside
 * pickers (e.g. each option in XWUIStyleSelector shows its 2 main colors).
 */

.xwui-color-palette {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    vertical-align: middle;
    line-height: 0;
}

.xwui-color-palette-swatch {
    display: inline-block;
    flex-shrink: 0;
    /* Subtle border so very-light swatches still read against very-light
       backgrounds and vice-versa. Uses color-mix on --text-primary so the
       edge adapts per theme (no hardcoded black/white). */
    border: 1px solid color-mix(in srgb, var(--text-primary) 20%, transparent);
    box-sizing: border-box;
}

/* ============================================
   Shape variants
   ============================================ */
.xwui-color-palette-square .xwui-color-palette-swatch {
    border-radius: 3px;
}

.xwui-color-palette-circle .xwui-color-palette-swatch {
    border-radius: 50%;
}

/* Stacked / overlap variant — swatches overlap slightly so they read as a
   single palette blob rather than separate chips. Useful for very compact
   list items (e.g. XWUIStyleSelector options). */
.xwui-color-palette-overlap {
    gap: 0;
}
.xwui-color-palette-overlap .xwui-color-palette-swatch + .xwui-color-palette-swatch {
    margin-left: -5px;
}

/* ============================================
   Size variants — swatch diameter, gap scales proportionally.
   ============================================ */
:is(.xwui-color-palette-3xs,.xwui-color-palette-xxxs) .xwui-color-palette-swatch { width: 6px;  height: 6px; }
:is(.xwui-color-palette-2xs,.xwui-color-palette-xxs)  .xwui-color-palette-swatch { width: 8px;  height: 8px; }
.xwui-color-palette-xs   .xwui-color-palette-swatch { width: 10px; height: 10px; }
:is(.xwui-color-palette-s,.xwui-color-palette-sm)   .xwui-color-palette-swatch { width: 12px; height: 12px; }
:is(.xwui-color-palette-m,.xwui-color-palette-md)   .xwui-color-palette-swatch { width: 16px; height: 16px; }
:is(.xwui-color-palette-l,.xwui-color-palette-lg)   .xwui-color-palette-swatch { width: 20px; height: 20px; }
.xwui-color-palette-xl   .xwui-color-palette-swatch { width: 24px; height: 24px; }
:is(.xwui-color-palette-2xl,.xwui-color-palette-xxl)  .xwui-color-palette-swatch { width: 32px; height: 32px; }
:is(.xwui-color-palette-3xl,.xwui-color-palette-xxxl) .xwui-color-palette-swatch { width: 40px; height: 40px; }

/* basic/XWUIDisplayDelivery/XWUIDisplayDelivery.css */
/* XWUIDisplayDelivery - delivery slot pill / inline / card */

.xwui-display-delivery {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-body, inherit);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Variants */
.xwui-display-delivery-pill {
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
}
.xwui-display-delivery-inline {
  /* no chrome */
  background: transparent;
  border: none;
  padding: 0;
}
.xwui-display-delivery-card {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0.5rem 0.75rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 8px);
  gap: 0.25rem;
}
.xwui-display-delivery-card .xwui-display-delivery-courier {
  display: block;
  font-size: 0.75em;
  color: var(--text-tertiary);
  margin-top: 0.125rem;
  font-style: italic;
}

/* Sizes */
:is(.xwui-display-delivery-2xs,.xwui-display-delivery-xxs) { font-size: 0.6875rem; }
.xwui-display-delivery-xs  { font-size: 0.75rem; }
:is(.xwui-display-delivery-s,.xwui-display-delivery-sm)  { font-size: 0.8125rem; }
:is(.xwui-display-delivery-m,.xwui-display-delivery-md)  { font-size: 0.9375rem; }
:is(.xwui-display-delivery-l,.xwui-display-delivery-lg)  { font-size: 1.0625rem; font-weight: 500; }

/* Tone — drives icon + label colour. Pill variant also tints background. */
.xwui-display-delivery-tone-info    { color: var(--role-info-bg, #0369a1); }
.xwui-display-delivery-tone-success { color: var(--role-success-bg, #15803d); }
.xwui-display-delivery-tone-warning { color: var(--role-warning-bg, #92400e); }
.xwui-display-delivery-tone-danger  { color: var(--role-danger-bg, #b91c1c); }
.xwui-display-delivery-tone-neutral { color: var(--text-secondary); }

.xwui-display-delivery-pill.xwui-display-delivery-tone-info    { background: rgba(3, 105, 161, 0.10);  border-color: rgba(3, 105, 161, 0.25);  }
.xwui-display-delivery-pill.xwui-display-delivery-tone-success { background: rgba(21, 128, 61, 0.10); border-color: rgba(21, 128, 61, 0.25); }
.xwui-display-delivery-pill.xwui-display-delivery-tone-warning { background: rgba(251, 191, 36, 0.18);border-color: rgba(251, 191, 36, 0.45);}
.xwui-display-delivery-pill.xwui-display-delivery-tone-danger  { background: rgba(185, 28, 28, 0.10); border-color: rgba(185, 28, 28, 0.30); }

/* Imminent: subtle pulse */
.xwui-display-delivery-imminent { animation: xwui-display-delivery-pulse 2.4s ease-in-out infinite; }
@keyframes xwui-display-delivery-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.18); }
}

.xwui-display-delivery-icon { line-height: 1; flex-shrink: 0; }
.xwui-display-delivery-text {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.125rem;
}
.xwui-display-delivery-date    { font-weight: 600; color: var(--text-primary); }
.xwui-display-delivery-window  { color: var(--text-secondary); font-weight: 500; }
.xwui-display-delivery-sep     { color: var(--text-tertiary); }
.xwui-display-delivery-status-label {
  font-size: 0.875em;
  color: inherit; /* uses tone */
  font-weight: 500;
}

/* In card variant, date + window are larger and on the same baseline */
.xwui-display-delivery-card .xwui-display-delivery-date    { font-size: 1.0625em; }
.xwui-display-delivery-card .xwui-display-delivery-window  { font-size: 1em; color: var(--text-primary); }

/* basic/XWUIDisplayDueDate/XWUIDisplayDueDate.css */
/**
 * XWUIDisplayDueDate — colored date chip.
 * Color states track --role-* tokens so they follow theme + accent.
 */

.xwui-due-date {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 3px 8px;
    border-radius: var(--radius-sm, 4px);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.2;
    background: var(--bg-secondary, color-mix(in srgb, var(--text-primary) 6%, transparent));
    color: var(--text-secondary);
    border: 1px solid transparent;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.xwui-due-date-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.xwui-due-date-icon svg { width: 1em; height: 1em; display: block; }
.xwui-due-date-label { line-height: 1; }

/* States */
.xwui-due-overdue {
    color: var(--role-danger-fg, #b42318);
    background: var(--role-danger-bg, color-mix(in srgb, #d92d20 14%, transparent));
    border-color: color-mix(in srgb, var(--role-danger-fg, #d92d20) 30%, transparent);
}
.xwui-due-today {
    color: var(--role-warning-fg, #b54708);
    background: var(--role-warning-bg, color-mix(in srgb, #f79009 16%, transparent));
    border-color: color-mix(in srgb, var(--role-warning-fg, #f79009) 35%, transparent);
    font-weight: var(--font-weight-semibold, 600);
}
.xwui-due-tomorrow {
    color: var(--role-info-fg, #175cd3);
    background: var(--role-info-bg, color-mix(in srgb, #2e90fa 14%, transparent));
    border-color: color-mix(in srgb, var(--role-info-fg, #2e90fa) 28%, transparent);
}
.xwui-due-thisWeek {
    color: var(--text-primary);
    background: var(--bg-secondary, color-mix(in srgb, var(--text-primary) 7%, transparent));
}
.xwui-due-future {
    color: var(--text-tertiary);
    background: transparent;
    border-color: var(--border-color);
}
.xwui-due-completed {
    color: var(--role-success-fg, #067647);
    background: var(--role-success-bg, color-mix(in srgb, #12b76a 14%, transparent));
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, currentColor 60%, transparent);
}
.xwui-due-none {
    color: var(--text-tertiary);
    background: transparent;
    border-color: var(--border-light, var(--border-color));
    border-style: dashed;
}

/* Sizes */
.xwui-due-date-xs { font-size: 0.6875rem; padding: 2px 6px; }
:is(.xwui-due-date-s,.xwui-due-date-sm) { font-size: 0.75rem; padding: 2px 7px; }
:is(.xwui-due-date-m,.xwui-due-date-md) { font-size: 0.8125rem; padding: 3px 8px; }
:is(.xwui-due-date-l,.xwui-due-date-lg) { font-size: 0.9375rem; padding: 4px 10px; }

/* basic/XWUIDisplayHealthIndicator/XWUIDisplayHealthIndicator.css */
/**
 * XWUIDisplayHealthIndicator — project health pill / gauge.
 */

.xwui-health {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1;
    font-weight: var(--font-weight-medium, 500);
    --hi-color: var(--text-secondary);
    --hi-bg: transparent;
    color: var(--hi-color);
    border-radius: var(--radius-md, 6px);
    transition: background 0.15s, color 0.15s;
    user-select: none;
    vertical-align: middle;
}

.xwui-health-glyph { display: inline-flex; align-items: center; justify-content: center; color: var(--hi-color); }
.xwui-health-glyph svg { width: 1em; height: 1em; display: block; }

/* Levels */
.xwui-health-level-on-track   { --hi-color: var(--role-success-fg, #067647); --hi-bg: var(--role-success-bg, color-mix(in srgb, #12b76a 14%, transparent)); }
.xwui-health-level-at-risk    { --hi-color: var(--role-warning-fg, #b54708); --hi-bg: var(--role-warning-bg, color-mix(in srgb, #f79009 16%, transparent)); }
.xwui-health-level-off-track  { --hi-color: var(--role-danger-fg, #b42318);  --hi-bg: var(--role-danger-bg, color-mix(in srgb, #d92d20 14%, transparent)); }
.xwui-health-level-on-hold    { --hi-color: var(--text-tertiary, #667085);   --hi-bg: color-mix(in srgb, var(--text-primary) 8%, transparent); }
.xwui-health-level-complete   { --hi-color: var(--role-info-fg, #175cd3);    --hi-bg: var(--role-info-bg, color-mix(in srgb, #2e90fa 14%, transparent)); }
.xwui-health-level-unknown    { --hi-color: var(--text-tertiary, #98a2b3);   --hi-bg: transparent; }

/* Variants */
.xwui-health-pill {
    background: var(--hi-bg);
    border: 1px solid color-mix(in srgb, var(--hi-color) 30%, transparent);
    padding: 4px 10px;
}
.xwui-health-dot {
    width: 0.625rem;
    height: 0.625rem;
    background: var(--hi-color);
    border-radius: 50%;
    padding: 0;
}
.xwui-health-dot .xwui-health-glyph { display: none; }

.xwui-health-gauge {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 4px 8px;
    min-width: 8rem;
    background: transparent;
}
.xwui-health-gauge .xwui-health-track {
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--hi-color) 18%, transparent);
    overflow: hidden;
    width: 100%;
}
.xwui-health-gauge .xwui-health-fill {
    display: block;
    height: 100%;
    background: var(--hi-color);
    transition: width 0.4s ease;
    border-radius: 999px;
}
.xwui-health-gauge .xwui-health-percent {
    font-size: 0.75em;
    color: var(--hi-color);
    align-self: flex-end;
}
.xwui-health-gauge .xwui-health-label {
    font-size: 0.8em;
    color: var(--hi-color);
}

/* Sizes */
.xwui-health-xs { font-size: 0.6875rem; }
:is(.xwui-health-s,.xwui-health-sm) { font-size: 0.75rem; }
:is(.xwui-health-m,.xwui-health-md) { font-size: 0.8125rem; }
:is(.xwui-health-l,.xwui-health-lg) { font-size: 0.9375rem; }

/* basic/XWUIDisplayHighlight/XWUIDisplayHighlight.css */
/**
 * XWUIDisplayHighlight Component Styles
 */
.xwui-highlight {
  display: inline;
}

.xwui-highlight-mark,
mark.xwui-highlight-mark {
  background-color: var(--color-highlight-bg, rgba(255, 235, 59, 0.5));
  color: inherit;
  padding: 0 0.1em;
  border-radius: 2px;
}

/* basic/XWUIDisplayIndicator/XWUIDisplayIndicator.css */
/**
 * XWUIDisplayIndicator Component Styles
 * Mantine Indicator: wrapper with corner dot/label.
 */
.xwui-indicator {
  position: relative;
  display: inline-block;
}

.xwui-indicator-inline {
  display: inline;
}

.xwui-indicator-child {
  display: block;
}

.xwui-indicator-dot {
  position: absolute;
  box-sizing: border-box;
  min-width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-indicator-bg, var(--accent-primary, #2563eb));
  border: 2px solid var(--color-indicator-border, var(--bg-primary, #ffffff));
}

.xwui-indicator-dot.xwui-indicator-with-label {
  min-width: 18px;
  height: 18px;
  font-size: 0.7rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border-radius: 999px;
  color: var(--role-primary-fg, #fff);
}

/* Position classes */
.xwui-indicator-pos-top-start { top: var(--xwui-indicator-offset, 0); left: var(--xwui-indicator-offset, 0); transform: translate(-50%, -50%); }
.xwui-indicator-pos-top-center { top: var(--xwui-indicator-offset, 0); left: 50%; transform: translate(-50%, -50%); }
.xwui-indicator-pos-top-end { top: var(--xwui-indicator-offset, 0); right: var(--xwui-indicator-offset, 0); transform: translate(50%, -50%); }
.xwui-indicator-pos-middle-start { top: 50%; left: var(--xwui-indicator-offset, 0); transform: translate(-50%, -50%); }
.xwui-indicator-pos-middle-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.xwui-indicator-pos-middle-end { top: 50%; right: var(--xwui-indicator-offset, 0); transform: translate(50%, -50%); }
.xwui-indicator-pos-bottom-start { bottom: var(--xwui-indicator-offset, 0); left: var(--xwui-indicator-offset, 0); transform: translate(-50%, 50%); }
.xwui-indicator-pos-bottom-center { bottom: var(--xwui-indicator-offset, 0); left: 50%; transform: translate(-50%, 50%); }
.xwui-indicator-pos-bottom-end { bottom: var(--xwui-indicator-offset, 0); right: var(--xwui-indicator-offset, 0); transform: translate(50%, 50%); }

/* basic/XWUIDisplayKbd/XWUIDisplayKbd.css */
/**
 * XWUIDisplayKbd Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Typography: theme/typography/*.css
 */

.xwui-kbd {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs, 0.25rem);
    font-family: var(--font-code-family, var(--font-family-mono, ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace));
}

.xwui-kbd-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75em;
    height: 1.75em;
    padding: 0 0.5em;
    border: var(--border-kbd-width, var(--border-width-regular, 1.5px)) var(--border-kbd-style, solid) var(--border-kbd-color, var(--border-color));
    border-radius: var(--radius-kbd, var(--radius-xs, 4px));
    background: var(--bg-secondary);
    box-shadow: var(--shadow-xs, 0 1px 0 var(--border-color)), inset 0 -1px 0 var(--border-color);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1;
}

/* Size variants */
:is(.xwui-kbd-s,.xwui-kbd-sm) .xwui-kbd-key {
    min-width: 1.5em;
    height: 1.5em;
    padding: 0 0.375em;
    font-size: var(--font-size-xs, 0.75rem);
}

:is(.xwui-kbd-l,.xwui-kbd-lg) .xwui-kbd-key {
    min-width: 2em;
    height: 2em;
    padding: 0 0.625em;
    font-size: var(--font-size-base, 1rem);
}

.xwui-kbd-separator {
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium, 500);
}


/* basic/XWUIDisplayLabel/XWUIDisplayLabel.css */
/**
 * XWUIDisplayLabel Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Typography: theme/typography/*.css
 */

.xwui-label {
    display: inline-block;
    font-weight: var(--font-weight-medium, 500);
    font-family: var(--font-label-family, var(--font-family-base, sans-serif));
    margin-bottom: var(--spacing-xs, 0.375rem);
    transition: color 0.2s;
}

.xwui-label-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Size variants (canonical 9-step scale) */
:is(.xwui-label-3xs,.xwui-label-xxxs) {
    font-size: var(--font-size-xs, 0.5rem);
}
:is(.xwui-label-4xs,.xwui-label-xxxxs) {
    font-size: var(--font-size-xs, 0.5rem);
}

:is(.xwui-label-2xs,.xwui-label-xxs) {
    font-size: var(--font-size-xs, 0.5625rem);
}

.xwui-label-xs {
    font-size: var(--font-size-xs, 0.6875rem);
}

:is(.xwui-label-s,.xwui-label-sm) {
    font-size: var(--font-size-xs, 0.75rem);
}

:is(.xwui-label-m,.xwui-label-md) {
    font-size: var(--font-size-sm, 0.875rem);
}

:is(.xwui-label-l,.xwui-label-lg) {
    font-size: var(--font-size-base, 1rem);
}

.xwui-label-xl {
    font-size: var(--font-size-lg, 1.125rem);
}

:is(.xwui-label-2xl,.xwui-label-xxl) {
    font-size: var(--font-size-xl, 1.4625rem);
}

:is(.xwui-label-3xl,.xwui-label-xxxl) {
    font-size: var(--font-size-xxl, 1.8rem);
}
:is(.xwui-label-4xl,.xwui-label-xxxxl) {
    font-size: var(--font-size-xxl, 1.8rem);
}

/* Legacy size aliases */
.xwui-label-small { font-size: var(--font-size-xs, 0.75rem); }
.xwui-label-medium { font-size: var(--font-size-sm, 0.875rem); }
.xwui-label-large { font-size: var(--font-size-base, 1rem); }

/* Required indicator */
.xwui-label-required {
    color: var(--accent-error);
    font-weight: var(--font-weight-semibold, 600);
}


/* basic/XWUIDisplayLockBanner/XWUIDisplayLockBanner.css */
/* XWUIDisplayLockBanner - lock-date / fiscal-period warning banner */

.xwui-lock-banner {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius-sm, 4px);
  font-family: var(--font-body, inherit);
  font-size: 0.875rem;
  line-height: 1.4;
  border: 1px solid transparent;
}

/* Intent variants — driven by role tokens so theme switching works */
.xwui-lock-banner-intent-warning {
  background: var(--role-warning-bg, rgba(234,179,8,0.16));
  color: var(--role-warning-fg, #92400e);
  border-color: var(--role-warning-bg, rgba(234,179,8,0.4));
}
.xwui-lock-banner-intent-danger {
  background: var(--role-danger-bg, rgba(239,68,68,0.18));
  color: var(--role-danger-fg, #b91c1c);
  border-color: var(--role-danger-bg, rgba(239,68,68,0.45));
}
.xwui-lock-banner-intent-info {
  background: var(--role-info-bg, rgba(14,165,233,0.16));
  color: var(--role-info-fg, #075985);
  border-color: var(--role-info-bg, rgba(14,165,233,0.45));
}

/* Style variants */
.xwui-lock-banner-banner { /* default — full-width banner */ }
.xwui-lock-banner-inline { display: inline-flex; padding: 0.25rem 0.5rem; font-size: 0.75rem; }
.xwui-lock-banner-inline .xwui-lock-banner-message { display: none; }
.xwui-lock-banner-compact {
  display: inline-flex;
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  border-radius: 999px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Slots */
.xwui-lock-banner-icon { font-size: 1.05em; line-height: 1; }
.xwui-lock-banner-text { min-width: 0; }
.xwui-lock-banner-head {
  display: flex;
  align-items: baseline;
  gap: 0;
  flex-wrap: wrap;
}
.xwui-lock-banner-title { font-weight: 600; }
.xwui-lock-banner-sep   { opacity: 0.6; }
.xwui-lock-banner-date  { font-variant-numeric: tabular-nums; opacity: 0.85; }
.xwui-lock-banner-message {
  margin-top: 0.125rem;
  font-size: 0.8125rem;
  opacity: 0.85;
}

.xwui-lock-banner-actions {
  display: inline-flex;
  gap: 0.375rem;
}
.xwui-lock-banner-action {
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-sm, 4px);
  background: rgba(255,255,255,0.5);
  color: inherit;
  border: 1px solid currentColor;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.xwui-lock-banner-action:hover { background: rgba(255,255,255,0.85); }
.xwui-lock-banner-action-primary { background: currentColor; color: var(--bg-primary); }
.xwui-lock-banner-action-primary:hover { filter: brightness(1.05); }
.xwui-lock-banner-action-ghost   { background: transparent; border-color: transparent; text-decoration: underline; }

.xwui-lock-banner-dismiss {
  width: 1.5rem; height: 1.5rem;
  border: none;
  background: transparent;
  color: inherit;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1;
  opacity: 0.7;
}
.xwui-lock-banner-dismiss:hover { opacity: 1; background: rgba(0,0,0,0.08); }

/* basic/XWUIDisplayMarquee/XWUIDisplayMarquee.css */
/**
 * XWUIDisplayMarquee — horizontal infinite-scroll logo strip.
 * All colors / fades / spacing via XWUI tokens.
 */

.xwui-marquee-container { display: block; width: 100%; }

/* Multi-row stack: rows scroll independently, optionally in alternating
   directions (set per row by JS). Spacing between rows is configurable
   via --xwui-marquee-row-gap. */
.xwui-marquee-stack {
  display: flex;
  flex-direction: column;
  gap: var(--xwui-marquee-row-gap, 32px);
  width: 100%;
}

.xwui-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.xwui-marquee__track {
  display: flex;
  width: max-content;
  animation: xwui-marquee-scroll var(--xwui-marquee-duration, 30s) linear infinite;
  will-change: transform;
}

.xwui-marquee--rtl .xwui-marquee__track {
  animation-direction: reverse;
}

.xwui-marquee--pause-hover:hover .xwui-marquee__track {
  animation-play-state: paused;
}

.xwui-marquee__list {
  display: flex;
  align-items: center;
  gap: var(--xwui-marquee-gap, 32px);
  padding: 0 calc(var(--xwui-marquee-gap, 32px) / 2);
  flex: 0 0 auto;
}

/* Items are always bare — no chip chrome. Logo (if any) sits next to
 * label (if any). Hover lifts opacity and shifts label color via tokens. */
.xwui-marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
  opacity: 0.85;
  transition: color 140ms ease, opacity 140ms ease;
}
.xwui-marquee__item:hover {
  color: var(--text-primary);
  opacity: 1;
}

.xwui-marquee__logo {
  width: var(--xwui-marquee-logo-size, var(--xwui-size-md, 32px));
  height: var(--xwui-marquee-logo-size, var(--xwui-size-md, 32px));
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
}

/* Inline-SVG slot · sized identically to .xwui-marquee__logo so an `svg`
   item lines up perfectly with a sibling `src` item. The inner <svg>
   inherits color via `currentColor` (theme-aware). */
.xwui-marquee__svg {
  width: var(--xwui-marquee-logo-size, var(--xwui-size-md, 32px));
  height: var(--xwui-marquee-logo-size, var(--xwui-size-md, 32px));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--text-primary);
}
.xwui-marquee__svg > svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}

.xwui-marquee__label {
  display: inline-block;
}

/* Edge fade: mask the strip so logos drift in / out softly. The mask
   uses currentcolor-agnostic alpha gradients — works in any theme. */
.xwui-marquee--fade {
  mask-image: linear-gradient(
    to right,
    transparent 0,
    black 8%,
    black 92%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black 8%,
    black 92%,
    transparent 100%
  );
}

@keyframes xwui-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Respect users who don't want motion. */
@media (prefers-reduced-motion: reduce) {
  .xwui-marquee__track { animation: none; }
}

/* basic/XWUIDisplayMonetary/XWUIDisplayMonetary.css */
/* XWUIDisplayMonetary - read-only currency display */

.xwui-display-monetary {
  display: inline-block;
  font-family: var(--font-body, inherit);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  white-space: nowrap;
}

/* xwui canonical size scale (matches XWUIDisplayBadge, XWUIInputNumber, etc.) */
:is(.xwui-display-monetary-4xs,.xwui-display-monetary-xxxxs) { font-size: 0.5625rem; }
:is(.xwui-display-monetary-3xs,.xwui-display-monetary-xxxs)  { font-size: 0.625rem; }
:is(.xwui-display-monetary-2xs,.xwui-display-monetary-xxs)   { font-size: 0.6875rem; }
.xwui-display-monetary-xs    { font-size: 0.75rem; }
:is(.xwui-display-monetary-s,.xwui-display-monetary-sm),
.xwui-display-monetary-small { font-size: 0.8125rem; }
:is(.xwui-display-monetary-m,.xwui-display-monetary-md),
.xwui-display-monetary-medium { font-size: 0.9375rem; }
:is(.xwui-display-monetary-l,.xwui-display-monetary-lg),
.xwui-display-monetary-large { font-size: 1.0625rem; font-weight: 500; }
.xwui-display-monetary-xl   { font-size: 1.25rem;  font-weight: 500; }
:is(.xwui-display-monetary-2xl,.xwui-display-monetary-xxl)  { font-size: 1.5rem;   font-weight: 600; }
:is(.xwui-display-monetary-3xl,.xwui-display-monetary-xxxl) { font-size: 1.875rem; font-weight: 700; }
:is(.xwui-display-monetary-4xl,.xwui-display-monetary-xxxxl){ font-size: 2.25rem;  font-weight: 700; }

.xwui-display-monetary-strong { font-weight: 700; }

/* For text-only tone we want the GREEN/RED hue (not the contrast colour used on solid backgrounds).
 * --role-success-bg / --role-danger-bg are the hue tokens; --role-*-fg is the text-on-* contrast (often white). */
.xwui-display-monetary-tone-positive { color: var(--role-success-bg, #15803d); }
.xwui-display-monetary-tone-negative { color: var(--role-danger-bg, #b91c1c); }
.xwui-display-monetary-tone-neutral  { color: var(--text-primary); }

.xwui-display-monetary-style-compact { font-weight: 600; }

/* basic/XWUIDisplayPersonChip/XWUIDisplayPersonChip.css */
/**
 * XWUIDisplayPersonChip — avatar + name chip.
 */

.xwui-person-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 2px 6px 2px 2px;
    border-radius: 999px;
    background: transparent;
    color: var(--text-primary);
    transition: background 0.15s;
    line-height: 1.2;
    max-width: 100%;
    vertical-align: middle;
}

.xwui-person-chip-clickable { cursor: pointer; }
.xwui-person-chip-clickable:hover { background: var(--bg-hover); }
.xwui-person-chip-clickable:focus { outline: 2px solid var(--role-info-fg, #2e90fa); outline-offset: 1px; }

.xwui-person-chip-avatar {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--bg-secondary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.xwui-person-chip-avatar-circle { border-radius: 50%; }
.xwui-person-chip-avatar-square { border-radius: var(--radius-sm, 6px); }

.xwui-person-chip-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.xwui-person-chip-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff;
    font-weight: var(--font-weight-semibold, 600);
    font-family: var(--font-family-base, inherit);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}

.xwui-person-chip-status {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    border: 2px solid var(--bg-primary, #fff);
    box-sizing: content-box;
}
.xwui-person-chip-status-online { background: #12b76a; }
.xwui-person-chip-status-away { background: #f79009; }
.xwui-person-chip-status-busy { background: #f04438; }
.xwui-person-chip-status-offline { background: #98a2b3; }

.xwui-person-chip-text {
    display: inline-flex;
    flex-direction: column;
    min-width: 0;
}
.xwui-person-chip-name {
    font-weight: var(--font-weight-medium, 500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.xwui-person-chip-role {
    font-size: 0.75em;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xwui-person-chip-remove {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
    margin-left: 4px;
    color: var(--text-tertiary);
    border-radius: 50%;
    width: 1.1em;
    height: 1.1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.xwui-person-chip-remove svg { width: 0.85em; height: 0.85em; display: block; }
.xwui-person-chip-remove:hover { background: var(--bg-active); color: var(--text-primary); }

/* Sizes */
.xwui-person-chip-xs { font-size: 0.6875rem; gap: 0.3rem; }
.xwui-person-chip-xs .xwui-person-chip-avatar { width: 16px; height: 16px; font-size: 0.5rem; }
:is(.xwui-person-chip-s,.xwui-person-chip-sm) { font-size: 0.75rem; gap: 0.4rem; }
:is(.xwui-person-chip-s,.xwui-person-chip-sm) .xwui-person-chip-avatar { width: 20px; height: 20px; font-size: 0.625rem; }
:is(.xwui-person-chip-m,.xwui-person-chip-md) { font-size: 0.8125rem; }
:is(.xwui-person-chip-m,.xwui-person-chip-md) .xwui-person-chip-avatar { width: 24px; height: 24px; font-size: 0.6875rem; }
:is(.xwui-person-chip-l,.xwui-person-chip-lg) { font-size: 0.9375rem; }
:is(.xwui-person-chip-l,.xwui-person-chip-lg) .xwui-person-chip-avatar { width: 32px; height: 32px; font-size: 0.8125rem; }
.xwui-person-chip-xl { font-size: 1rem; }
.xwui-person-chip-xl .xwui-person-chip-avatar { width: 40px; height: 40px; font-size: 1rem; }

.xwui-person-chip-avatar-only { padding: 0; }
.xwui-person-chip-avatar-only .xwui-person-chip-text { display: none; }

/* basic/XWUIDisplayPresenceStack/XWUIDisplayPresenceStack.css */
/**
 * XWUIDisplayPresenceStack
 *
 * A compact "who's here" row: overlapping avatar chips with online/offline
 * status dots, plus a text summary on the right. Every color, radius and
 * spacing resolves through XWUI tokens. No hardcoded colors.
 */

.xwui-presence-stack-container { display: block; }

.xwui-presence-stack {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.25rem 0;
}

.xwui-presence-stack__group {
  display: inline-flex;
  align-items: center;
}

.xwui-presence-stack__slot {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.xwui-presence-stack__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full, 999px);
  background: var(--bg-hover);
  border: 2px solid var(--bg-card);
  overflow: hidden;
  color: var(--text-primary);
  font-weight: 700;
  font-size: 0.72rem;
  line-height: 1;
}

.xwui-presence-stack__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

:is(.xwui-presence-stack__avatar--2xs,.xwui-presence-stack__avatar--xxs) { width: 18px; height: 18px; font-size: 0.6rem; }
.xwui-presence-stack__avatar--xs  { width: 22px; height: 22px; font-size: 0.65rem; }
:is(.xwui-presence-stack__avatar--s,.xwui-presence-stack__avatar--sm)  { width: 28px; height: 28px; font-size: 0.72rem; }
:is(.xwui-presence-stack__avatar--m,.xwui-presence-stack__avatar--md)  { width: 36px; height: 36px; font-size: 0.85rem; }
:is(.xwui-presence-stack__avatar--l,.xwui-presence-stack__avatar--lg)  { width: 44px; height: 44px; font-size: 1rem; }
.xwui-presence-stack__avatar--xl  { width: 56px; height: 56px; font-size: 1.15rem; }

.xwui-presence-stack__dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 9px;
  height: 9px;
  border-radius: var(--radius-full, 999px);
  border: 2px solid var(--bg-card);
}
.xwui-presence-stack__dot--on {
  background: var(--role-success-bg, var(--accent-primary));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--role-success-bg, var(--accent-primary)) 40%, transparent);
}
.xwui-presence-stack__dot--off {
  background: var(--text-tertiary);
}

.xwui-presence-stack__overflow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 0.4rem;
  border-radius: var(--radius-full, 999px);
  background: color-mix(in srgb, var(--accent-primary) 18%, var(--bg-hover));
  border: 2px solid var(--bg-card);
  color: var(--accent-primary);
  font-size: 0.7rem;
  font-weight: 700;
}

.xwui-presence-stack__summary {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  line-height: 1.2;
  white-space: nowrap;
}

/* basic/XWUIDisplayPriorityFlag/XWUIDisplayPriorityFlag.css */
/**
 * XWUIDisplayPriorityFlag — colored priority indicator.
 * Uses --role-{danger,warning,info,success}-{bg,fg} so colors track the active theme.
 */

.xwui-priority-flag {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs, 0.375rem);
    border-radius: var(--radius-md, 6px);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1;
    user-select: none;
    transition: background 0.15s, color 0.15s, transform 0.15s;
    /* Variant defaults */
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid transparent;
    --pf-color: var(--text-secondary);
    --pf-bg: transparent;
}

.xwui-priority-flag-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--pf-color);
}

.xwui-priority-flag-glyph svg {
    width: 1em;
    height: 1em;
    display: block;
}

.xwui-priority-flag-label { white-space: nowrap; }

/* ============ Priority colors (track theme tokens) ============ */
.xwui-priority-critical {
    --pf-color: var(--role-danger-fg, #b42318);
    --pf-bg: var(--role-danger-bg, color-mix(in srgb, #d92d20 16%, transparent));
}
.xwui-priority-urgent {
    --pf-color: var(--role-danger-fg, #c4320a);
    --pf-bg: var(--role-danger-bg, color-mix(in srgb, #f04438 14%, transparent));
}
.xwui-priority-high {
    --pf-color: var(--role-warning-fg, #b54708);
    --pf-bg: var(--role-warning-bg, color-mix(in srgb, #f79009 16%, transparent));
}
.xwui-priority-medium {
    --pf-color: var(--role-info-fg, #175cd3);
    --pf-bg: var(--role-info-bg, color-mix(in srgb, #2e90fa 14%, transparent));
}
.xwui-priority-low {
    --pf-color: var(--text-tertiary, #667085);
    --pf-bg: color-mix(in srgb, var(--text-primary) 8%, transparent);
}
.xwui-priority-none {
    --pf-color: var(--text-tertiary, #98a2b3);
    --pf-bg: transparent;
}

/* ============ Variants ============ */
.xwui-priority-flag-flag {
    color: var(--pf-color);
    background: transparent;
    padding: 2px 4px;
}
.xwui-priority-flag-pill {
    color: var(--pf-color);
    background: var(--pf-bg);
    border-color: color-mix(in srgb, var(--pf-color) 35%, transparent);
    padding: 4px 10px;
}
.xwui-priority-flag-dot {
    width: 0.625rem;
    height: 0.625rem;
    background: var(--pf-color);
    border-radius: 50%;
    padding: 0;
}
.xwui-priority-flag-dot .xwui-priority-flag-glyph { display: none; }
.xwui-priority-flag-bar {
    width: 0.25rem;
    align-self: stretch;
    background: var(--pf-color);
    border-radius: 999px;
    padding: 0;
    min-height: 1em;
}
.xwui-priority-flag-bar .xwui-priority-flag-glyph { display: none; }

/* ============ Sizes ============ */
:is(.xwui-priority-flag-2xs,.xwui-priority-flag-xxs) { font-size: 0.625rem; }
.xwui-priority-flag-xs  { font-size: 0.6875rem; }
:is(.xwui-priority-flag-s,.xwui-priority-flag-sm)  { font-size: 0.75rem; }
:is(.xwui-priority-flag-m,.xwui-priority-flag-md)  { font-size: 0.8125rem; }
:is(.xwui-priority-flag-l,.xwui-priority-flag-lg)  { font-size: 0.9375rem; }
.xwui-priority-flag-xl  { font-size: 1.0625rem; }

/* Critical pulses subtly to draw the eye */
.xwui-priority-flag-pill.xwui-priority-critical {
    animation: xwui-priority-flag-pulse 2.4s ease-in-out infinite;
}
@keyframes xwui-priority-flag-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pf-color) 40%, transparent); }
    50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--pf-color) 0%, transparent); }
}

/* basic/XWUIDisplayQRCode/XWUIDisplayQRCode.css */
/**
 * XWUIDisplayQRCode Component Styles
 */

.xwui-qrcode-container {
    display: inline-block;
}

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

.xwui-qrcode svg {
    display: block;
    /* Crisp-edges is also set as a `shape-rendering` attribute on the
     * SVG itself · this is a CSS belt-and-braces. */
    image-rendering: pixelated;
}

.xwui-qrcode-error {
    font-size: 11px;
    color: var(--accent-danger, #dc2626);
    padding: 6px 10px;
    border: 1px solid currentColor;
    border-radius: 4px;
}

/* basic/XWUIDisplayRating/XWUIDisplayRating.css */
/**
 * XWUIDisplayRating — emoji mood + numeric score.
 */

.xwui-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1;
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-secondary);
}
.xwui-rating-glyph { display: inline-flex; align-items: center; justify-content: center; }
.xwui-rating-glyph svg { width: 1.25em; height: 1.25em; display: block; }

.xwui-rating-score { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.xwui-rating-count { color: var(--text-tertiary); font-size: 0.85em; }

/* Colored moods — track theme tokens */
.xwui-rating-colored.xwui-rating-mood-smile { color: var(--role-success-fg, #067647); }
.xwui-rating-colored.xwui-rating-mood-meh   { color: var(--role-warning-fg, #b54708); }
.xwui-rating-colored.xwui-rating-mood-frown { color: var(--role-danger-fg, #b42318); }
.xwui-rating-mood-none { color: var(--text-tertiary); }

/* Sizes */
.xwui-rating-xs { font-size: 0.6875rem; }
:is(.xwui-rating-s,.xwui-rating-sm) { font-size: 0.75rem; }
:is(.xwui-rating-m,.xwui-rating-md) { font-size: 0.8125rem; }
:is(.xwui-rating-l,.xwui-rating-lg) { font-size: 0.9375rem; }
.xwui-rating-xl { font-size: 1.125rem; }
.xwui-rating-xl .xwui-rating-glyph svg { width: 1.5em; height: 1.5em; }

/* basic/XWUIDisplayRotting/XWUIDisplayRotting.css */
/**
 * XWUIDisplayRotting — stale-task age indicator.
 */

.xwui-rotting {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 1px 6px;
    border-radius: var(--radius-sm, 4px);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1;
    user-select: none;
}
.xwui-rotting-icon { display: inline-flex; align-items: center; justify-content: center; }
.xwui-rotting-icon svg { width: 1em; height: 1em; display: block; }
.xwui-rotting-label { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Severity */
.xwui-rotting-fresh {
    color: var(--text-tertiary);
    background: transparent;
}
.xwui-rotting-warn {
    color: var(--role-warning-fg, #b54708);
    background: var(--role-warning-bg, color-mix(in srgb, #f79009 14%, transparent));
}
.xwui-rotting-urgent {
    color: var(--role-danger-fg, #b42318);
    background: var(--role-danger-bg, color-mix(in srgb, #d92d20 14%, transparent));
    animation: xwui-rotting-pulse 2.4s ease-in-out infinite;
}
@keyframes xwui-rotting-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 35%, transparent); }
    50%      { box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 0%, transparent); }
}

/* Variants */
.xwui-rotting-dot {
    width: 0.625em;
    height: 0.625em;
    padding: 0;
    border-radius: 50%;
    background: currentColor;
}
.xwui-rotting-dot.xwui-rotting-fresh { background: var(--text-tertiary); }
.xwui-rotting-dot.xwui-rotting-warn { background: var(--role-warning-fg, #f79009); }
.xwui-rotting-dot.xwui-rotting-urgent { background: var(--role-danger-fg, #d92d20); }
.xwui-rotting-dot .xwui-rotting-icon { display: none; }

.xwui-rotting-icon {
    /* icon-only variant */
    background: transparent;
    padding: 0;
}

/* Sizes */
.xwui-rotting-xs { font-size: 0.625rem; padding: 1px 5px; }
:is(.xwui-rotting-s,.xwui-rotting-sm) { font-size: 0.6875rem; }
:is(.xwui-rotting-m,.xwui-rotting-md) { font-size: 0.75rem; }
:is(.xwui-rotting-l,.xwui-rotting-lg) { font-size: 0.875rem; padding: 2px 8px; }

/* basic/XWUIDisplaySparkline/XWUIDisplaySparkline.css */
.xwui-sparkline {
  display: inline-block;
  line-height: 0;
}

.xwui-sparkline svg {
  display: block;
  vertical-align: middle;
}

/* basic/XWUIDisplayStatistic/XWUIDisplayStatistic.css */
/**
 * XWUIDisplayStatistic Component Styles
 */

.xwui-statistic-container {
    /* Container has no specific styles */
}

.xwui-statistic {
    display: inline-block;
}

.xwui-statistic-title {
    font-size: var(--font-size-sm, 14px);
    color: var(--text-secondary, #666);
    margin-bottom: var(--spacing-xs, 4px);
}

.xwui-statistic-content {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs, 4px);
}

.xwui-statistic-value {
    font-size: 24px;
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary, #333);
    line-height: 1;
}

.xwui-statistic-prefix,
.xwui-statistic-suffix {
    font-size: var(--font-size-base, 16px);
    color: var(--text-secondary, #666);
}

/* Compact mode — tightened typography for dense card / sidebar layouts. */
.xwui-statistic--compact {
    display: block;
    width: 100%;
    min-width: 0;
    font-size: 0.88rem;
}
.xwui-statistic--compact .xwui-statistic-title {
    font-size: 0.75rem;
    color: var(--text-tertiary, #999);
    font-weight: 500;
    margin-bottom: 2px;
}
.xwui-statistic--compact .xwui-statistic-value {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
}
.xwui-statistic--compact .xwui-statistic-prefix,
.xwui-statistic--compact .xwui-statistic-suffix {
    font-size: 0.85rem;
}

/* Size scale variants */
.xwui-statistic--sm .xwui-statistic-title { font-size: 0.72rem; }
.xwui-statistic--sm .xwui-statistic-value { font-size: 1.1rem; font-weight: 600; }
.xwui-statistic--lg .xwui-statistic-title { font-size: 1rem; }
.xwui-statistic--lg .xwui-statistic-value { font-size: 2rem; font-weight: 600; }


/* basic/XWUIDisplayStatus/XWUIDisplayStatus.css */
/* Styles for XWUIDisplayStatus. */

/* basic/XWUIDisplaySubtaskBadge/XWUIDisplaySubtaskBadge.css */
/**
 * XWUIDisplaySubtaskBadge — done/total subtask closure badge.
 */

.xwui-subtask-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 1px 6px;
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-secondary, color-mix(in srgb, var(--text-primary) 6%, transparent));
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1;
    user-select: none;
}
.xwui-subtask-badge-complete {
    background: var(--role-success-bg, color-mix(in srgb, #12b76a 14%, transparent));
    color: var(--role-success-fg, #067647);
}
.xwui-subtask-badge-text { font-variant-numeric: tabular-nums; }
.xwui-subtask-badge-label { color: var(--text-tertiary); font-size: 0.85em; font-weight: var(--font-weight-normal, 400); }

.xwui-subtask-badge-ring { display: inline-flex; color: var(--accent-primary, #2e90fa); }
.xwui-subtask-badge-complete .xwui-subtask-badge-ring { color: var(--role-success-fg, #12b76a); }
.xwui-subtask-badge-ring-svg { width: 1em; height: 1em; display: block; }

.xwui-subtask-badge-bar {
    display: inline-block;
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-primary) 10%, transparent);
    overflow: hidden;
    margin-left: 4px;
}
.xwui-subtask-badge-bar-fill {
    display: block;
    height: 100%;
    background: var(--accent-primary, #2e90fa);
    transition: width 0.25s ease;
}
.xwui-subtask-badge-complete .xwui-subtask-badge-bar-fill { background: var(--role-success-fg, #12b76a); }

.xwui-subtask-badge-xs { font-size: 0.625rem; padding: 1px 5px; }
:is(.xwui-subtask-badge-s,.xwui-subtask-badge-sm) { font-size: 0.6875rem; }
:is(.xwui-subtask-badge-m,.xwui-subtask-badge-md) { font-size: 0.75rem; }
:is(.xwui-subtask-badge-l,.xwui-subtask-badge-lg) { font-size: 0.875rem; padding: 2px 8px; }

/* basic/XWUIDisplayTag/XWUIDisplayTag.css */
/**
 * XWUIDisplayTag Component Styles
 * Base tag component - simple, lightweight tag display
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Roundness: theme/roundness/container/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-tag, var(--radius-sm, 4px));
    font-weight: var(--font-weight-medium, 500);
    white-space: nowrap;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

/* Variants */
.xwui-tag-default {
    background: var(--bg-tag-default, var(--bg-secondary, #f8f9fa));
    color: var(--text-tag-default, var(--text-secondary, #6c757d));
    border: var(--border-tag-width, var(--border-width-thin, 1px)) var(--border-tag-style, solid) var(--border-tag-color, var(--border-color, #dee2e6));
}

.xwui-tag-primary {
    background: var(--bg-tag-primary, var(--accent-primary, #1890ff));
    color: var(--text-tag-primary, #ffffff);
    border: var(--border-tag-width, var(--border-width-thin, 1px)) var(--border-tag-style, solid) var(--border-tag-primary-color, var(--accent-primary, #1890ff));
}

.xwui-tag-success {
    background: var(--bg-tag-success, var(--accent-success, #52c41a));
    color: var(--text-tag-success, #ffffff);
    border: var(--border-tag-width, var(--border-width-thin, 1px)) var(--border-tag-style, solid) var(--border-tag-success-color, var(--accent-success, #52c41a));
}

.xwui-tag-warning {
    background: var(--bg-tag-warning, var(--accent-warning, #faad14));
    color: var(--text-tag-warning, #ffffff);
    border: var(--border-tag-width, var(--border-width-thin, 1px)) var(--border-tag-style, solid) var(--border-tag-warning-color, var(--accent-warning, #faad14));
}

.xwui-tag-error {
    background: var(--bg-tag-error, var(--accent-error, #ff4d4f));
    color: var(--text-tag-error, #ffffff);
    border: var(--border-tag-width, var(--border-width-thin, 1px)) var(--border-tag-style, solid) var(--border-tag-error-color, var(--accent-error, #ff4d4f));
}

/* Sizes — canonical 9-level scale */
:is(.xwui-tag-3xs,.xwui-tag-xxxs) {
    padding: 0 0.25rem;
    font-size: 8px;
    line-height: 1.2;
    letter-spacing: 0.05em;
    font-weight: var(--font-weight-semibold, 600);
}
:is(.xwui-tag-4xs,.xwui-tag-xxxxs) {
    padding: 0 0.125rem;
    font-size: 4px;
    line-height: 1.2;
    letter-spacing: 0.125em;
    font-weight: var(--font-weight-semibold, 600);
}
:is(.xwui-tag-2xs,.xwui-tag-xxs) {
    padding: 0.0313rem 0.3125rem;
    font-size: 9px;
    line-height: 1.25;
    letter-spacing: 0.04em;
    font-weight: var(--font-weight-semibold, 600);
}
.xwui-tag-xs {
    padding: var(--spacing-tag-xs-y, 0.0625rem) var(--spacing-tag-xs-x, 0.375rem);
    font-size: var(--font-size-xxs, 0.625rem); /* 10px */
    line-height: 1.3;
    letter-spacing: 0.04em;
    font-weight: var(--font-weight-semibold, 600);
}
:is(.xwui-tag-s,.xwui-tag-sm) {
    padding: var(--spacing-tag-s-y, 0.125rem) var(--spacing-tag-s-x, 0.5rem);
    font-size: var(--font-size-xs, 0.75rem);
    line-height: 1.4;
}
:is(.xwui-tag-m,.xwui-tag-md) {
    padding: var(--spacing-tag-m-y, 0.25rem) var(--spacing-tag-m-x, 0.75rem);
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.4;
}
:is(.xwui-tag-l,.xwui-tag-lg) {
    padding: var(--spacing-tag-l-y, 0.375rem) var(--spacing-tag-l-x, 1rem);
    font-size: var(--font-size-base, 1rem);
    line-height: 1.5;
}
.xwui-tag-xl {
    padding: var(--spacing-tag-xl-y, 0.5rem) var(--spacing-tag-xl-x, 1.25rem);
    font-size: var(--font-size-lg, 1.125rem);
    line-height: 1.5;
}
:is(.xwui-tag-2xl,.xwui-tag-xxl) {
    padding: 0.625rem 1.5rem;
    font-size: var(--font-size-xl, 1.25rem);
    line-height: 1.5;
}
:is(.xwui-tag-3xl,.xwui-tag-xxxl) {
    padding: 0.75rem 1.75rem;
    font-size: var(--font-size-2xl, 1.5rem);
    line-height: 1.5;
}
:is(.xwui-tag-4xl,.xwui-tag-xxxxl) {
    padding: 1.2rem 2.8rem;
    font-size: var(--font-size-2xl, 1.5rem);
    line-height: 1.5;
}

/* Legacy aliases: keep old class names working */
.xwui-tag-s      { padding: var(--spacing-tag-s-y, 0.125rem) var(--spacing-tag-s-x, 0.5rem); font-size: var(--font-size-xs, 0.75rem); line-height: 1.4; }
.xwui-tag-m      { padding: var(--spacing-tag-m-y, 0.25rem) var(--spacing-tag-m-x, 0.75rem); font-size: var(--font-size-sm, 0.875rem); line-height: 1.4; }
.xwui-tag-l      { padding: var(--spacing-tag-l-y, 0.375rem) var(--spacing-tag-l-x, 1rem); font-size: var(--font-size-base, 1rem); line-height: 1.5; }
.xwui-tag-small  { padding: var(--spacing-tag-s-y, 0.125rem) var(--spacing-tag-s-x, 0.5rem); font-size: var(--font-size-xs, 0.75rem); line-height: 1.4; }
.xwui-tag-medium { padding: var(--spacing-tag-m-y, 0.25rem)  var(--spacing-tag-m-x, 0.75rem); font-size: var(--font-size-sm, 0.875rem); line-height: 1.4; }
.xwui-tag-large  { padding: var(--spacing-tag-l-y, 0.375rem) var(--spacing-tag-l-x, 1rem);   font-size: var(--font-size-base, 1rem);  line-height: 1.5; }

/* xs tags use uppercase letters for a compact, punchy look (chip-like labels). */
.xwui-tag-xs .xwui-tag-label {
    text-transform: uppercase;
}

.xwui-tag-label {
    display: inline-block;
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */


/* basic/XWUIDisplayTruncatedFormat/XWUIDisplayTruncatedFormat.css */
/**
 * XWUIDisplayTruncatedFormat Component Styles
 * Blueprint TruncatedFormat parity.
 */
.xwui-truncated-format {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* basic/XWUIDisplayWatermark/XWUIDisplayWatermark.css */
/**
 * XWUIDisplayWatermark Component Styles
 */

.xwui-watermark-container {
    position: relative;
}

.xwui-watermark {
    /* Watermark overlay styles applied inline */
}


/* basic/XWUIDock/XWUIDock.css */
.xwui-dock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm, 0.5rem);
  padding: var(--spacing-md, 1rem);
  background: var(--color-surface-elevated, rgba(255, 255, 255, 0.9));
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}

.xwui-dock.xwui-dock-bottom,
.xwui-dock.xwui-dock-top {
  flex-direction: row;
}

.xwui-dock.xwui-dock-left,
.xwui-dock.xwui-dock-right {
  flex-direction: column;
}

.xwui-dock-item {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.xwui-dock-magnify .xwui-dock-item:hover {
  transform: scale(var(--xwui-dock-scale-max, 1.5));
}

.xwui-dock-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.xwui-dock-link {
  text-decoration: none;
  color: inherit;
}

/* basic/XWUIDurationPicker/XWUIDurationPicker.css */
/**
 * XWUIDurationPicker Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 */

.xwui-duration-picker {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 1rem);
    width: 100%;
}

.xwui-duration-picker-inputs {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-sm, 0.5rem);
}

.xwui-duration-picker-hours,
.xwui-duration-picker-minutes {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.25rem);
    flex: 0 0 auto;
}

.xwui-duration-picker-label {
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-secondary, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.xwui-duration-picker-separator {
    font-size: var(--font-size-xl, 1.25rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--text-primary, #212529);
    padding-bottom: var(--spacing-sm, 0.5rem);
    align-self: flex-end;
}

.xwui-duration-picker-presets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs, 0.25rem);
}

.xwui-duration-picker-preset {
    padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--accent-primary, #4f46e5);
    background: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: all 0.2s ease;
}

.xwui-duration-picker-preset:hover {
    background: var(--bg-hover, #f8f9fa);
    border-color: var(--accent-primary, #4f46e5);
    color: var(--accent-hover, #4338ca);
}

.xwui-duration-picker-preset:active {
    transform: scale(0.98);
}

.xwui-duration-picker-total {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-secondary, #6c757d);
    padding: var(--spacing-xs, 0.25rem) 0;
    border-top: 1px solid var(--border-light, #e9ecef);
}


/* basic/XWUIEmoji/XWUIEmoji.css */
/**
 * XWUIEmoji Component Styles
 *
 * Style Dependencies:
 * - Theme: styles/theme/emojis/{apple|google|twitter}.css — sets the
 *   `--emoji-font-family` (apple/google) or `--emoji-cdn-url` (twitter)
 *   variables and defines the `.emoji` base class.
 *
 * The `.xwui-emoji` wrapper is an inline-flex container so emoji sit on
 * the text baseline alongside labels and inline icons. The inner
 * `.emoji` element (span or img) is themed by the active emojis CSS
 * file selected via the HTML root's `data-emojis` attribute.
 */

.xwui-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
    vertical-align: middle;
    user-select: none;
}

.xwui-emoji .emoji {
    /* Font-based themes: the theme CSS sets font-family on `.emoji`.
       We only need to make sure our wrapper doesn't clamp the size. */
    font-style: normal;
    font-weight: normal;
}

.xwui-emoji img.emoji {
    /* Twemoji image path — ensure no selection outlines / dragging of the
       PNG, and keep it on-baseline with surrounding text. */
    display: inline-block;
    vertical-align: middle;
    -webkit-user-drag: none;
}

/* basic/XWUIEmpty/XWUIEmpty.css */
/**
 * XWUIEmpty Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Roundness: theme/roundness/rounded.css (global roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3xl, 3rem) var(--spacing-lg, 1.5rem);
    text-align: center;
}

/* Image */
.xwui-empty-image {
    width: 120px;
    height: 120px;
    margin-bottom: var(--spacing-lg, 1.5rem);
    opacity: 0.6;
}

/* Icon */
.xwui-empty-icon {
    width: 64px;
    height: 64px;
    margin-bottom: var(--spacing-lg, 1.5rem);
    color: var(--text-tertiary);
}

.xwui-empty-icon svg {
    width: 100%;
    height: 100%;
}

/* Title */
.xwui-empty-title {
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs, 0.5rem);
}

/* Description */
.xwui-empty-description {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg, 1.5rem);
    max-width: 400px;
}

/* Action */
.xwui-empty-action {
    padding: var(--spacing-sm, 0.625rem) var(--spacing-md, 1.25rem);
    border: var(--border-button-width, var(--border-width-regular, 1.5px)) var(--border-button-style, solid) var(--border-button-color, var(--border-color));
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: var(--radius-button, var(--radius-md, 6px));
    cursor: pointer;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    transition: all 0.2s;
}

.xwui-empty-action:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* Size variants */
.xwui-empty-small {
    padding: var(--spacing-xl, 2rem) var(--spacing-md, 1rem);
}

.xwui-empty-small .xwui-empty-image {
    width: 80px;
    height: 80px;
}

.xwui-empty-small .xwui-empty-icon {
    width: 48px;
    height: 48px;
}

.xwui-empty-large {
    padding: var(--spacing-3xl, 4rem) var(--spacing-xl, 2rem);
}

.xwui-empty-large .xwui-empty-image {
    width: 160px;
    height: 160px;
}

.xwui-empty-large .xwui-empty-icon {
    width: 96px;
    height: 96px;
}


/* basic/XWUIFab/XWUIFab.css */
/**
 * XWUIFab Component Styles
 * MUI Floating Action Button: single FAB (standard + extended). M3 sizes.
 */

.xwui-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--radius-fab, 16px);
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--color-fab-fg, var(--color-on-primary, #fff));
  background-color: var(--color-fab-bg, var(--color-primary, #1976d2));
  box-shadow: var(--shadow-fab, 0 4px 12px rgba(0,0,0,0.25));
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.xwui-fab:hover {
  background-color: var(--color-fab-bg-hover, var(--color-primary-hover));
  box-shadow: var(--shadow-fab-hover, 0 6px 16px rgba(0,0,0,0.3));
}

.xwui-fab:focus-visible {
  outline: 2px solid var(--color-focus-ring, currentColor);
  outline-offset: 2px;
}

.xwui-fab[aria-disabled="true"],
.xwui-fab:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

/* M3 FAB sizes */
.xwui-fab-small {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-fab-small, 12px);
}

.xwui-fab-medium {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-fab, 16px);
}

.xwui-fab-large {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-fab-large, 28px);
}

.xwui-fab-extended {
  padding-left: 16px;
  padding-right: 16px;
  width: auto;
  min-width: 48px;
}

.xwui-fab-extended.xwui-fab-small { height: 40px; }
.xwui-fab-extended.xwui-fab-medium { height: 56px; }
.xwui-fab-extended.xwui-fab-large { height: 96px; }

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

.xwui-fab-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Variants */
.xwui-fab-surface {
  background-color: var(--color-fab-surface-bg, var(--color-surface-container-high));
  color: var(--color-fab-surface-fg, var(--color-primary));
}

.xwui-fab-secondary {
  background-color: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
}

.xwui-fab-tertiary {
  background-color: var(--color-tertiary-container);
  color: var(--color-on-tertiary-container);
}

/* basic/XWUIFeed/XWUIFeed.css */
/**
 * XWUIFeed Component Styles
 * Semantic UI React Feed parity.
 */
.xwui-feed {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

:is(.xwui-feed--size-s,.xwui-feed--size-sm) .xwui-feed-event-label img {
  width: 28px;
  height: 28px;
}
:is(.xwui-feed--size-m,.xwui-feed--size-md) .xwui-feed-event-label img {
  width: 36px;
  height: 36px;
}
:is(.xwui-feed--size-l,.xwui-feed--size-lg) .xwui-feed-event-label img {
  width: 48px;
  height: 48px;
}

.xwui-feed-event {
  display: block;
}

.xwui-feed-event-content {
  display: flex;
  gap: 12px;
}

.xwui-feed-event-label {
  flex-shrink: 0;
}

.xwui-feed-event-label img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.xwui-feed-event-body {
  flex: 1;
  min-width: 0;
}

.xwui-feed-event-date {
  font-size: 0.75rem;
  color: var(--color-feed-date, rgba(0, 0, 0, 0.5));
  margin-bottom: 2px;
}

.xwui-feed-event-summary {
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.4;
}

.xwui-feed-event-extra {
  margin-top: 4px;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.xwui-feed-event-meta {
  margin-top: 4px;
  font-size: 0.8125rem;
  color: var(--color-feed-meta, rgba(0, 0, 0, 0.5));
}

/* basic/XWUIFeedbackAlert/XWUIFeedbackAlert.css */
/**
 * XWUIFeedbackAlert Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/alert/*.css (component-specific border widths)
 * - Roundness: theme/roundness/alert/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm, 0.75rem);
    padding: var(--spacing-md, 1rem);
    border-radius: var(--radius-alert, var(--radius-md, 8px));
    background: var(--bg-secondary);
    transition: opacity 0.2s, transform 0.2s;
}

.xwui-alert-closing {
    opacity: 0;
    transform: translateY(-8px);
}

/* Variants - use accent colors with light backgrounds */
.xwui-alert-info {
    background: var(--bg-elevated);
    color: var(--accent-primary);
    border: var(--border-alert-width, var(--border-width-regular, 1.5px)) solid var(--accent-primary);
}

.xwui-alert-success {
    background: var(--bg-elevated);
    color: var(--accent-success);
    border: var(--border-alert-width, var(--border-width-regular, 1.5px)) solid var(--accent-success);
}

.xwui-alert-warning {
    background: var(--bg-elevated);
    color: var(--accent-warning);
    border: var(--border-alert-width, var(--border-width-regular, 1.5px)) solid var(--accent-warning);
}

.xwui-alert-error {
    background: var(--bg-elevated);
    color: var(--accent-error);
    border: var(--border-alert-width, var(--border-width-regular, 1.5px)) solid var(--accent-error);
}

/* Bordered - explicit border variant */
.xwui-alert-bordered.xwui-alert-info {
    border-color: var(--accent-primary);
}

.xwui-alert-bordered.xwui-alert-success {
    border-color: var(--accent-success);
}

.xwui-alert-bordered.xwui-alert-warning {
    border-color: var(--accent-warning);
}

.xwui-alert-bordered.xwui-alert-error {
    border-color: var(--accent-error);
}

/* Filled - use accent colors as background */
.xwui-alert-filled.xwui-alert-info {
    background: var(--accent-primary);
    color: var(--text-inverse);
    border-color: var(--accent-primary);
}

.xwui-alert-filled.xwui-alert-success {
    background: var(--accent-success);
    color: var(--text-inverse);
    border-color: var(--accent-success);
}

.xwui-alert-filled.xwui-alert-warning {
    background: var(--accent-warning);
    color: var(--text-inverse);
    border-color: var(--accent-warning);
}

.xwui-alert-filled.xwui-alert-error {
    background: var(--accent-error);
    color: var(--text-inverse);
    border-color: var(--accent-error);
}

/* Icon */
.xwui-alert-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.xwui-alert-icon svg {
    width: 20px;
    height: 20px;
}

/* Content */
.xwui-alert-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.25rem);
}

.xwui-alert-title {
    font-weight: var(--font-weight-semibold, 600);
    font-size: var(--font-size-base, 0.9375rem);
}

.xwui-alert-message {
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.5;
    opacity: 0.9;
}

/* Action */
.xwui-alert-action {
    margin-top: var(--spacing-xs, 0.5rem);
    padding: var(--spacing-xs, 0.375rem) var(--spacing-sm, 0.75rem);
    border: none;
    background: transparent;
    font-weight: var(--font-weight-medium, 500);
    font-size: var(--font-size-sm, 0.875rem);
    text-decoration: underline;
    cursor: pointer;
    color: inherit;
    align-self: flex-start;
}

.xwui-alert-action:hover {
    opacity: 0.8;
}

/* Close button */
.xwui-alert-close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs, 0.25rem);
    border: none;
    background: transparent;
    cursor: pointer;
    color: currentColor;
    opacity: 0.5;
    border-radius: var(--radius-sm, 4px);
    transition: opacity 0.2s, background 0.2s;
}

.xwui-alert-close:hover {
    opacity: 1;
    background: var(--bg-hover);
}

.xwui-alert-filled .xwui-alert-close:hover {
    background: var(--bg-active);
}

.xwui-alert-close svg {
    width: 16px;
    height: 16px;
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */

/* basic/XWUIFeedbackBanner/XWUIFeedbackBanner.css */
/**
 * XWUIFeedbackBanner Component Styles
 * Vuetify Banner parity: dismissible announcement bar.
 *
 * Colours follow the same pattern as XWUIFeedbackAlert: a themed
 * --bg-elevated surface with an accent-coloured border + matching accent
 * text for the variant. No hardcoded Material pastels — everything falls
 * through the theme's colour pipeline so bluesmyth / night / dark /
 * catppuccin-mocha all render correctly.
 */
.xwui-banner {
  width: 100%;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color, rgba(255,255,255,0.1));
  border-radius: var(--radius-alert, var(--radius-md, 8px));
}

.xwui-banner--sticky {
  position: sticky;
  top: 0;
  z-index: 100;
}

.xwui-banner--info {
  background: var(--bg-elevated);
  color: var(--accent-primary);
  border-color: var(--accent-primary);
}

.xwui-banner--success {
  background: var(--bg-elevated);
  color: var(--accent-success);
  border-color: var(--accent-success);
}

.xwui-banner--warning {
  background: var(--bg-elevated);
  color: var(--accent-warning);
  border-color: var(--accent-warning);
}

.xwui-banner--error {
  background: var(--bg-elevated);
  color: var(--accent-error);
  border-color: var(--accent-error);
}

.xwui-banner-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

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

.xwui-banner-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.xwui-banner-icon svg {
  width: 24px;
  height: 24px;
}

.xwui-banner-content {
  flex: 1;
  min-width: 0;
}

.xwui-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.xwui-banner-action {
  padding: 6px 12px;
  border: 1px solid currentColor;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-size: inherit;
  cursor: pointer;
}

.xwui-banner-action:hover {
  opacity: 0.9;
}

.xwui-banner-close {
  flex-shrink: 0;
  padding: 4px;
  border: none;
  background: transparent;
  color: inherit;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.8;
}

.xwui-banner-close:hover {
  opacity: 1;
}

/* basic/XWUIFeedbackEmpty/XWUIFeedbackEmpty.css */
/**
 * XWUIFeedbackEmpty Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Roundness: theme/roundness/rounded.css (global roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3xl, 3rem) var(--spacing-lg, 1.5rem);
    text-align: center;
}

/* Image */
.xwui-empty-image {
    width: 120px;
    height: 120px;
    margin-bottom: var(--spacing-lg, 1.5rem);
    opacity: 0.6;
}

/* Icon */
.xwui-empty-icon {
    width: 64px;
    height: 64px;
    margin-bottom: var(--spacing-lg, 1.5rem);
    color: var(--text-tertiary);
}

.xwui-empty-icon svg {
    width: 100%;
    height: 100%;
}

/* Title */
.xwui-empty-title {
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs, 0.5rem);
}

/* Description */
.xwui-empty-description {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg, 1.5rem);
    max-width: 400px;
}

/* Actions (Blankslate: primary + secondary) */
.xwui-empty-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    justify-content: center;
    margin-top: var(--spacing-md);
}

.xwui-empty-action {
    padding: var(--spacing-sm, 0.625rem) var(--spacing-md, 1.25rem);
    border: var(--border-button-width, var(--border-width-regular, 1.5px)) var(--border-button-style, solid) var(--border-button-color, var(--border-color));
    background: var(--accent-primary);
    color: var(--text-inverse);
    border-radius: var(--radius-button, var(--radius-md, 6px));
    cursor: pointer;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    transition: all 0.2s;
}

.xwui-empty-action:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.xwui-empty-action-secondary {
    padding: var(--spacing-sm, 0.625rem) var(--spacing-md, 1.25rem);
    border: var(--border-button-width, var(--border-width-regular, 1.5px)) var(--border-button-style, solid) var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: var(--radius-button, var(--radius-md, 6px));
    cursor: pointer;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    transition: all 0.2s;
}

.xwui-empty-action-secondary:hover {
    background: var(--bg-secondary);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* Illustration slot (custom SVG/HTML) */
.xwui-empty-illustration {
    margin-bottom: var(--spacing-lg);
    max-width: 200px;
    max-height: 200px;
    color: var(--text-tertiary);
}

.xwui-empty-illustration svg {
    width: 100%;
    height: auto;
}

/* Size variants (canonical 9-step scale) */
:is(.xwui-empty-3xs,.xwui-empty-xxxs) {
    padding: var(--spacing-md, 1rem) var(--spacing-sm, 0.5rem);
}
:is(.xwui-empty-4xs,.xwui-empty-xxxxs) {
    padding: var(--spacing-md, 1rem) var(--spacing-sm, 0.5rem);
}
:is(.xwui-empty-3xs,.xwui-empty-xxxs) .xwui-empty-image { width: 40px; height: 40px; }
:is(.xwui-empty-4xs,.xwui-empty-xxxxs) .xwui-empty-image { width: 20px; height: 20px; }
:is(.xwui-empty-3xs,.xwui-empty-xxxs) .xwui-empty-icon { width: 24px; height: 24px; }
:is(.xwui-empty-4xs,.xwui-empty-xxxxs) .xwui-empty-icon { width: 12px; height: 12px; }

:is(.xwui-empty-2xs,.xwui-empty-xxs) {
    padding: var(--spacing-lg, 1.5rem) var(--spacing-sm, 0.75rem);
}
:is(.xwui-empty-2xs,.xwui-empty-xxs) .xwui-empty-image { width: 56px; height: 56px; }
:is(.xwui-empty-2xs,.xwui-empty-xxs) .xwui-empty-icon { width: 32px; height: 32px; }

.xwui-empty-xs {
    padding: var(--spacing-lg, 1.5rem) var(--spacing-md, 0.875rem);
}
.xwui-empty-xs .xwui-empty-image { width: 64px; height: 64px; }
.xwui-empty-xs .xwui-empty-icon { width: 40px; height: 40px; }

:is(.xwui-empty-s,.xwui-empty-sm) {
    padding: var(--spacing-xl, 2rem) var(--spacing-md, 1rem);
}
:is(.xwui-empty-s,.xwui-empty-sm) .xwui-empty-image { width: 80px; height: 80px; }
:is(.xwui-empty-s,.xwui-empty-sm) .xwui-empty-icon { width: 48px; height: 48px; }

:is(.xwui-empty-m,.xwui-empty-md) {
    padding: var(--spacing-2xl, 3rem) var(--spacing-lg, 1.5rem);
}
:is(.xwui-empty-m,.xwui-empty-md) .xwui-empty-image { width: 120px; height: 120px; }
:is(.xwui-empty-m,.xwui-empty-md) .xwui-empty-icon { width: 72px; height: 72px; }

:is(.xwui-empty-l,.xwui-empty-lg) {
    padding: var(--spacing-3xl, 4rem) var(--spacing-xl, 2rem);
}
:is(.xwui-empty-l,.xwui-empty-lg) .xwui-empty-image { width: 160px; height: 160px; }
:is(.xwui-empty-l,.xwui-empty-lg) .xwui-empty-icon { width: 96px; height: 96px; }

.xwui-empty-xl {
    padding: var(--spacing-3xl, 5rem) var(--spacing-xl, 2.5rem);
}
.xwui-empty-xl .xwui-empty-image { width: 200px; height: 200px; }
.xwui-empty-xl .xwui-empty-icon { width: 120px; height: 120px; }

:is(.xwui-empty-2xl,.xwui-empty-xxl) {
    padding: var(--spacing-3xl, 6.5rem) var(--spacing-xl, 3.25rem);
}
:is(.xwui-empty-2xl,.xwui-empty-xxl) .xwui-empty-image { width: 260px; height: 260px; }
:is(.xwui-empty-2xl,.xwui-empty-xxl) .xwui-empty-icon { width: 156px; height: 156px; }

:is(.xwui-empty-3xl,.xwui-empty-xxxl) {
    padding: var(--spacing-3xl, 8rem) var(--spacing-xl, 4rem);
}
:is(.xwui-empty-4xl,.xwui-empty-xxxxl) {
    padding: var(--spacing-3xl, 8rem) var(--spacing-xl, 4rem);
}
:is(.xwui-empty-3xl,.xwui-empty-xxxl) .xwui-empty-image { width: 320px; height: 320px; }
:is(.xwui-empty-4xl,.xwui-empty-xxxxl) .xwui-empty-image { width: 512px; height: 512px; }
:is(.xwui-empty-3xl,.xwui-empty-xxxl) .xwui-empty-icon { width: 192px; height: 192px; }
:is(.xwui-empty-4xl,.xwui-empty-xxxxl) .xwui-empty-icon { width: 307.2px; height: 307.2px; }

/* Legacy size aliases */
.xwui-empty-small { padding: var(--spacing-xl, 2rem) var(--spacing-md, 1rem); }
.xwui-empty-small .xwui-empty-image { width: 80px; height: 80px; }
.xwui-empty-small .xwui-empty-icon { width: 48px; height: 48px; }
.xwui-empty-large { padding: var(--spacing-3xl, 4rem) var(--spacing-xl, 2rem); }
.xwui-empty-large .xwui-empty-image { width: 160px; height: 160px; }
.xwui-empty-large .xwui-empty-icon { width: 96px; height: 96px; }


/* basic/XWUIFeedbackForm/XWUIFeedbackForm.css */
/* Styles for XWUIFeedbackForm. */

/* basic/XWUIFeedbackNonIdealState/XWUIFeedbackNonIdealState.css */
/**
 * XWUIFeedbackNonIdealState Component Styles
 * Blueprint NonIdealState parity.
 */
.xwui-non-ideal-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 24px;
  color: var(--color-non-ideal-state-fg, var(--text-primary));
}

.xwui-non-ideal-state-horizontal {
  flex-direction: row;
  text-align: left;
  gap: 24px;
}

.xwui-non-ideal-state-horizontal .xwui-non-ideal-state-text {
  align-items: flex-start;
}

.xwui-non-ideal-state-icon {
  font-size: 48px;
  line-height: 1;
  color: var(--color-non-ideal-state-icon, rgba(0,0,0,0.4));
  margin-bottom: 16px;
}

.xwui-non-ideal-state-horizontal .xwui-non-ideal-state-icon {
  margin-bottom: 0;
}

.xwui-non-ideal-state-icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.xwui-non-ideal-state-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.xwui-non-ideal-state-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.xwui-non-ideal-state-description {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-non-ideal-state-description, rgba(0,0,0,0.6));
  max-width: 400px;
}

.xwui-non-ideal-state-action {
  margin-top: 16px;
}

/* basic/XWUIFeedbackResult/XWUIFeedbackResult.css */
/**
 * XWUIFeedbackResult Component Styles
 * Clean, centered result/feedback layout: icon → title → description → actions
 * Structure and behavior only - colors from CSS variables
 *
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY)
 * - Typography: theme/typography/*.css
 */

.xwui-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-3xl, 3rem) var(--spacing-xl, 2rem);
    min-height: 200px;
}

.xwui-result-icon {
    width: 72px;
    height: 72px;
    margin-bottom: var(--spacing-lg, 1.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.xwui-result-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Status colors - filled circle icons (currentColor = circle fill) */
.xwui-result-success .xwui-result-icon {
    color: var(--accent-success);
}

.xwui-result-error .xwui-result-icon {
    color: var(--accent-error);
}

.xwui-result-info .xwui-result-icon {
    color: var(--accent-primary, #4f46e5);
}

.xwui-result-warning .xwui-result-icon {
    color: var(--accent-warning);
}

.xwui-result-title {
    font-size: var(--font-size-xl, 1.25rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--text-primary);
    margin: 0 0 var(--spacing-sm, 0.5rem);
    line-height: 1.3;
}

.xwui-result-description {
    font-size: var(--font-size-base, 1rem);
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-lg, 1.5rem);
    max-width: 400px;
    line-height: 1.5;
}

/* Action buttons row */
.xwui-result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md, 1rem);
    justify-content: center;
    margin-top: var(--spacing-md, 1rem);
}

.xwui-result-btn {
    min-height: 40px;
    padding: 0 var(--spacing-lg, 1.25rem);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    border-radius: var(--roundness-md, 8px);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    border: 1px solid transparent;
}

.xwui-result-btn-primary {
    background-color: var(--accent-primary);
    color: var(--text-inverse, #fff);
    border-color: var(--accent-primary);
}

.xwui-result-btn-primary:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}

.xwui-result-btn-secondary {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-medium, rgba(0,0,0,0.08));
}

.xwui-result-btn-secondary:hover {
    background-color: var(--bg-hover);
    border-color: var(--border-strong, rgba(0,0,0,0.12));
}

.xwui-result-extra {
    margin-top: var(--spacing-lg, 1.5rem);
    width: 100%;
    max-width: 400px;
}

/* Size variants (canonical 9-step scale) */
:is(.xwui-result-3xs,.xwui-result-xxxs) { padding: var(--spacing-md, 1rem) var(--spacing-sm, 0.75rem); min-height: 80px; }
:is(.xwui-result-4xs,.xwui-result-xxxxs) { padding: var(--spacing-md, 1rem) var(--spacing-sm, 0.75rem); min-height: 40px; }
:is(.xwui-result-3xs,.xwui-result-xxxs) .xwui-result-icon { width: 24px; height: 24px; margin-bottom: var(--spacing-sm, 0.5rem); }
:is(.xwui-result-4xs,.xwui-result-xxxxs) .xwui-result-icon { width: 12px; height: 12px; margin-bottom: var(--spacing-sm, 0.5rem); }
:is(.xwui-result-3xs,.xwui-result-xxxs) .xwui-result-title { font-size: var(--font-size-sm, 0.875rem); }
:is(.xwui-result-4xs,.xwui-result-xxxxs) .xwui-result-title { font-size: var(--font-size-sm, 0.875rem); }
:is(.xwui-result-3xs,.xwui-result-xxxs) .xwui-result-description { font-size: var(--font-size-xs, 0.75rem); }
:is(.xwui-result-4xs,.xwui-result-xxxxs) .xwui-result-description { font-size: var(--font-size-xs, 0.75rem); }

:is(.xwui-result-2xs,.xwui-result-xxs) { padding: var(--spacing-md, 1.25rem) var(--spacing-md, 1rem); min-height: 100px; }
:is(.xwui-result-2xs,.xwui-result-xxs) .xwui-result-icon { width: 32px; height: 32px; margin-bottom: var(--spacing-sm, 0.625rem); }
:is(.xwui-result-2xs,.xwui-result-xxs) .xwui-result-title { font-size: var(--font-size-base, 1rem); }
:is(.xwui-result-2xs,.xwui-result-xxs) .xwui-result-description { font-size: var(--font-size-xs, 0.8125rem); }

.xwui-result-xs { padding: var(--spacing-lg, 1.5rem) var(--spacing-md, 1rem); min-height: 120px; }
.xwui-result-xs .xwui-result-icon { width: 36px; height: 36px; margin-bottom: var(--spacing-sm, 0.75rem); }
.xwui-result-xs .xwui-result-title { font-size: var(--font-size-base, 1rem); }
.xwui-result-xs .xwui-result-description { font-size: var(--font-size-sm, 0.8125rem); }

:is(.xwui-result-s,.xwui-result-sm) {
    padding: var(--spacing-xl, 2rem) var(--spacing-lg, 1.5rem);
    min-height: 160px;
}
:is(.xwui-result-s,.xwui-result-sm) .xwui-result-icon { width: 48px; height: 48px; margin-bottom: var(--spacing-md, 1rem); }
:is(.xwui-result-s,.xwui-result-sm) .xwui-result-title { font-size: var(--font-size-lg, 1.125rem); }
:is(.xwui-result-s,.xwui-result-sm) .xwui-result-description { font-size: var(--font-size-sm, 0.875rem); }

:is(.xwui-result-m,.xwui-result-md) {
    padding: var(--spacing-2xl, 3rem) var(--spacing-xl, 1.75rem);
    min-height: 220px;
}
:is(.xwui-result-m,.xwui-result-md) .xwui-result-icon { width: 72px; height: 72px; margin-bottom: var(--spacing-lg, 1.5rem); }
:is(.xwui-result-m,.xwui-result-md) .xwui-result-title { font-size: var(--font-size-xl, 1.25rem); }
:is(.xwui-result-m,.xwui-result-md) .xwui-result-description { font-size: var(--font-size-base, 1rem); }

:is(.xwui-result-l,.xwui-result-lg) {
    padding: var(--spacing-3xl, 4rem) var(--spacing-xl, 2rem);
    min-height: 280px;
}
:is(.xwui-result-l,.xwui-result-lg) .xwui-result-icon { width: 96px; height: 96px; margin-bottom: var(--spacing-xl, 2rem); }
:is(.xwui-result-l,.xwui-result-lg) .xwui-result-title { font-size: var(--font-size-2xl, 1.5rem); }
:is(.xwui-result-l,.xwui-result-lg) .xwui-result-description { font-size: var(--font-size-lg, 1.125rem); }

.xwui-result-xl {
    padding: var(--spacing-3xl, 5rem) var(--spacing-xl, 2.5rem);
    min-height: 340px;
}
.xwui-result-xl .xwui-result-icon { width: 120px; height: 120px; margin-bottom: var(--spacing-xl, 2.5rem); }
.xwui-result-xl .xwui-result-title { font-size: var(--font-size-3xl, 1.875rem); }
.xwui-result-xl .xwui-result-description { font-size: var(--font-size-xl, 1.25rem); }

:is(.xwui-result-2xl,.xwui-result-xxl) {
    padding: var(--spacing-3xl, 6.5rem) var(--spacing-xl, 3.25rem);
    min-height: 440px;
}
:is(.xwui-result-2xl,.xwui-result-xxl) .xwui-result-icon { width: 156px; height: 156px; margin-bottom: var(--spacing-xl, 3rem); }
:is(.xwui-result-2xl,.xwui-result-xxl) .xwui-result-title { font-size: var(--font-size-4xl, 2.25rem); }
:is(.xwui-result-2xl,.xwui-result-xxl) .xwui-result-description { font-size: var(--font-size-xl, 1.5rem); }

:is(.xwui-result-3xl,.xwui-result-xxxl) {
    padding: var(--spacing-3xl, 8rem) var(--spacing-xl, 4rem);
    min-height: 560px;
}
:is(.xwui-result-4xl,.xwui-result-xxxxl) {
    padding: var(--spacing-3xl, 8rem) var(--spacing-xl, 4rem);
    min-height: 896px;
}
:is(.xwui-result-3xl,.xwui-result-xxxl) .xwui-result-icon { width: 192px; height: 192px; margin-bottom: var(--spacing-xl, 3.5rem); }
:is(.xwui-result-4xl,.xwui-result-xxxxl) .xwui-result-icon { width: 307.2px; height: 307.2px; margin-bottom: var(--spacing-xl, 3.5rem); }
:is(.xwui-result-3xl,.xwui-result-xxxl) .xwui-result-title { font-size: var(--font-size-5xl, 3rem); }
:is(.xwui-result-4xl,.xwui-result-xxxxl) .xwui-result-title { font-size: var(--font-size-5xl, 3rem); }
:is(.xwui-result-3xl,.xwui-result-xxxl) .xwui-result-description { font-size: var(--font-size-2xl, 1.75rem); }
:is(.xwui-result-4xl,.xwui-result-xxxxl) .xwui-result-description { font-size: var(--font-size-2xl, 1.75rem); }

/* Legacy size aliases */
.xwui-result-small { padding: var(--spacing-xl, 2rem) var(--spacing-lg, 1.5rem); min-height: 160px; }
.xwui-result-small .xwui-result-icon { width: 48px; height: 48px; margin-bottom: var(--spacing-md, 1rem); }
.xwui-result-small .xwui-result-title { font-size: var(--font-size-lg, 1.125rem); }
.xwui-result-small .xwui-result-description { font-size: var(--font-size-sm, 0.875rem); }
.xwui-result-large { padding: var(--spacing-3xl, 4rem) var(--spacing-xl, 2rem); min-height: 280px; }
.xwui-result-large .xwui-result-icon { width: 96px; height: 96px; margin-bottom: var(--spacing-xl, 2rem); }
.xwui-result-large .xwui-result-title { font-size: var(--font-size-2xl, 1.5rem); }
.xwui-result-large .xwui-result-description { font-size: var(--font-size-lg, 1.125rem); }

/* basic/XWUIField/XWUIField.css */
/**
 * XWUIField Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Typography: theme/typography/*.css
 */

.xwui-field {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.5rem);
    width: 100%;
}

.xwui-field-input {
    width: 100%;
}

.xwui-field-input-error input,
.xwui-field-input-error select,
.xwui-field-input-error textarea {
    border-color: var(--accent-error) !important;
}

.xwui-field-error {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--accent-error);
    margin-top: calc(var(--spacing-xs, 0.25rem) * -1);
}

.xwui-field-hint {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-secondary);
    margin-top: calc(var(--spacing-xs, 0.25rem) * -1);
}

/* Size variants */
:is(.xwui-field-s,.xwui-field-sm) .xwui-field-error,
:is(.xwui-field-s,.xwui-field-sm) .xwui-field-hint {
    font-size: var(--font-size-xs, 0.6875rem);
}

:is(.xwui-field-l,.xwui-field-lg) .xwui-field-error,
:is(.xwui-field-l,.xwui-field-lg) .xwui-field-hint {
    font-size: var(--font-size-sm, 0.8125rem);
}


/* basic/XWUIFilePreview/XWUIFilePreview.css */
/**
 * XWUIFilePreview Component Styles
 */

.xwui-file-preview {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 1rem);
    width: 100%;
}

.xwui-file-preview-empty {
    padding: var(--spacing-md, 1rem);
    text-align: center;
    color: var(--text-secondary, #6c757d);
}

.xwui-file-preview-single {
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 1rem);
    padding: var(--spacing-sm, 0.5rem);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--radius-md, 8px);
}

.xwui-file-preview-thumbnail {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary, #f8f9fa);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
}

/* Thumbnail size variants (canonical 9-step scale) */
:is(.xwui-file-preview-thumbnail-3xs,.xwui-file-preview-thumbnail-xxxs) { width: 24px; height: 24px; }
:is(.xwui-file-preview-thumbnail-4xs,.xwui-file-preview-thumbnail-xxxxs) { width: 12px; height: 12px; }
:is(.xwui-file-preview-thumbnail-2xs,.xwui-file-preview-thumbnail-xxs) { width: 36px; height: 36px; }
.xwui-file-preview-thumbnail-xs { width: 48px; height: 48px; }
:is(.xwui-file-preview-thumbnail-s,.xwui-file-preview-thumbnail-sm) { width: 64px; height: 64px; }
:is(.xwui-file-preview-thumbnail-m,.xwui-file-preview-thumbnail-md) { width: 96px; height: 96px; }
:is(.xwui-file-preview-thumbnail-l,.xwui-file-preview-thumbnail-lg) { width: 128px; height: 128px; }
.xwui-file-preview-thumbnail-xl { width: 160px; height: 160px; }
:is(.xwui-file-preview-thumbnail-2xl,.xwui-file-preview-thumbnail-xxl) { width: 208px; height: 208px; }
:is(.xwui-file-preview-thumbnail-3xl,.xwui-file-preview-thumbnail-xxxl) { width: 256px; height: 256px; }
:is(.xwui-file-preview-thumbnail-4xl,.xwui-file-preview-thumbnail-xxxxl) { width: 409.6px; height: 409.6px; }

/* Legacy size aliases */
.xwui-file-preview-thumbnail-small { width: 64px; height: 64px; }
.xwui-file-preview-thumbnail-medium { width: 96px; height: 96px; }
.xwui-file-preview-thumbnail-large { width: 128px; height: 128px; }

.xwui-file-preview-icon {
    font-size: 2rem;
}

.xwui-file-preview-type {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-secondary, #6c757d);
}

.xwui-file-preview-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.25rem);
}

.xwui-file-preview-name {
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary, #212529);
}

.xwui-file-preview-size {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary, #6c757d);
}

.xwui-file-preview-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--spacing-md, 1rem);
}

.xwui-file-preview-gallery-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.25rem);
    cursor: pointer;
}

.xwui-file-preview-gallery-name {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-secondary, #6c757d);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.xwui-file-preview-dialog-content {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}

.xwui-file-preview-iframe {
    width: 100%;
    height: 600px;
    border: none;
}

.xwui-file-preview-unsupported {
    padding: var(--spacing-lg, 1.5rem);
    text-align: center;
}

.xwui-file-preview-unsupported a {
    color: var(--accent-primary, #4f46e5);
    text-decoration: none;
}

.xwui-file-preview-unsupported a:hover {
    text-decoration: underline;
}


/* basic/XWUIFilters/XWUIFilters.css */
/**
 * XWUIFilters Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 */

.xwui-filters-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.xwui-filters {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--bg-primary, #ffffff);
    border: var(--border-width-regular, 1px) solid var(--border-color, #e0e0e0);
    border-radius: var(--radius-md, 8px);
}

/* Preview */
.xwui-filters-preview {
    padding: var(--spacing-sm, 0.75rem);
    border-bottom: var(--border-width-regular, 1px) solid var(--border-color, #e0e0e0);
    text-align: center;
}

.xwui-filters-preview-image {
    max-width: 100%;
    max-height: 300px;
    border-radius: var(--radius-sm, 4px);
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
}

/* Presets */
.xwui-filters-presets {
    padding: var(--spacing-sm, 0.75rem);
    border-bottom: var(--border-width-regular, 1px) solid var(--border-color, #e0e0e0);
}

.xwui-filters-label {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary, #212529);
    margin-bottom: var(--spacing-xs, 0.5rem);
}

.xwui-filters-presets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--spacing-xs, 0.5rem);
}

.xwui-filters-preset {
    padding: var(--spacing-xs, 0.5rem) var(--spacing-sm, 0.75rem);
    border: var(--border-width-regular, 1px) solid var(--border-color, #e0e0e0);
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-primary, #ffffff);
    color: var(--text-primary, #212529);
    cursor: pointer;
    font-size: var(--font-size-sm, 0.875rem);
    transition: all 0.2s ease;
}

.xwui-filters-preset:hover {
    background: var(--bg-hover, #f8f9fa);
    border-color: var(--border-medium, #ced4da);
}

.xwui-filters-preset.active {
    background: var(--accent-primary, #4f46e5);
    color: var(--text-inverse, #ffffff);
    border-color: var(--accent-primary, #4f46e5);
}

/* Custom Controls */
.xwui-filters-controls {
    padding: var(--spacing-sm, 0.75rem);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.75rem);
}

.xwui-filters-slider-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.75rem);
}

.xwui-filters-slider-label {
    min-width: 100px;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-primary, #212529);
}

.xwui-filters-slider {
    flex: 1;
    height: 4px;
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-secondary, #f8f9fa);
    outline: none;
    -webkit-appearance: none;
}

.xwui-filters-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-primary, #4f46e5);
    cursor: pointer;
}

.xwui-filters-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-primary, #4f46e5);
    cursor: pointer;
    border: none;
}

.xwui-filters-slider-value {
    min-width: 3rem;
    text-align: right;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary, #6c757d);
    font-family: var(--font-family-mono, 'Courier New', monospace);
}

.xwui-filters-reset {
    padding: var(--spacing-xs, 0.5rem) var(--spacing-sm, 0.75rem);
    border: var(--border-width-regular, 1px) solid var(--border-color, #e0e0e0);
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-secondary, #f8f9fa);
    color: var(--text-primary, #212529);
    cursor: pointer;
    font-size: var(--font-size-sm, 0.875rem);
    transition: all 0.2s ease;
    align-self: flex-start;
}

.xwui-filters-reset:hover {
    background: var(--bg-hover, #e9ecef);
    border-color: var(--border-medium, #ced4da);
}


/* basic/XWUIFlex/XWUIFlex.css */
/**
 * XWUIFlex Component Styles
 */

.xwui-flex-wrapper {
    /* Wrapper has no specific styles */
}

.xwui-flex {
    box-sizing: border-box;
}

.xwui-flex-item {
    /* Item inherits flex properties */
}


/* basic/XWUIFloatLabel/XWUIFloatLabel.css */
/**
 * XWUIFloatLabel Component Styles
 * PrimeReact FloatLabel parity: label floats up when focused or has value.
 */
.xwui-float-label {
  position: relative;
  display: inline-block;
  min-width: 120px;
}

.xwui-float-label-slot {
  display: block;
}

.xwui-float-label-slot input,
.xwui-float-label-slot textarea,
.xwui-float-label-slot select {
  width: 100%;
  padding: 12px 8px 4px;
  border: 1px solid var(--color-outline, #888);
  border-radius: 4px;
  font-size: 1rem;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.xwui-float-label-label {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  font-size: 1rem;
  color: var(--text-secondary);
  pointer-events: none;
  transition: transform 0.15s ease, font-size 0.15s ease, top 0.15s ease;
}

.xwui-float-label--floated .xwui-float-label-label {
  top: 6px;
  transform: translateY(0);
  font-size: 0.75rem;
  color: var(--accent-primary);
}

.xwui-float-label--floated .xwui-float-label-slot input,
.xwui-float-label--floated .xwui-float-label-slot textarea,
.xwui-float-label--floated .xwui-float-label-slot select {
  padding-top: 18px;
}

/* basic/XWUIFocusTrap/XWUIFocusTrap.css */
/**
 * XWUIFocusTrap Component Styles
 * Focus trap utility (no visual styles, purely functional)
 */

.xwui-focus-trap {
    /* Focus trap has no visual styles */
}


/* basic/XWUIFollowIndicator/XWUIFollowIndicator.css */
/**
 * XWUIFollowIndicator Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 */

.xwui-follow-indicator {
    display: inline-flex;
    align-items: center;
}

/* Button Variant */
.xwui-follow-indicator-button {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs, 0.25rem);
    padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem);
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-secondary, #6c757d);
    background: var(--bg-secondary, #f8f9fa);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.xwui-follow-indicator-button:hover {
    background: var(--bg-hover, #f8f9fa);
    border-color: var(--accent-primary, #4f46e5);
    color: var(--accent-primary, #4f46e5);
}

.xwui-follow-indicator-button.xwui-follow-indicator-following {
    color: var(--accent-primary, #4f46e5);
    background: var(--bg-primary, #ffffff);
    border-color: var(--accent-primary, #4f46e5);
}

/* Focus ring. Without this a focused (clicked) follow button gets the browser's
 * DEFAULT outline, which sits offset OUTSIDE the pill's own 1px border and reads
 * as a second box — i.e. "a button inside a button". Replace it with a soft
 * accent glow that hugs the rounded pill, so focus is clear without the nested
 * look. :focus-visible keeps it keyboard/AT-only (no ring on plain mouse press). */
.xwui-follow-indicator-button:focus-visible,
.xwui-follow-indicator-icon-only:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary, #4f46e5) 30%, transparent);
}

.xwui-follow-indicator-icon {
    font-size: 1em;
    line-height: 1;
}

.xwui-follow-indicator-label {
    white-space: nowrap;
}

/* Switch Variant */
.xwui-follow-indicator-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
    cursor: pointer;
    position: relative;
}

.xwui-follow-indicator-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.xwui-follow-indicator-slider {
    position: relative;
    width: 44px;
    height: 24px;
    background: var(--bg-tertiary, #e9ecef);
    border-radius: 24px;
    transition: background 0.3s ease;
}

.xwui-follow-indicator-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    top: 3px;
    background: var(--bg-primary, #ffffff);
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
}

.xwui-follow-indicator-checkbox:checked + .xwui-follow-indicator-slider {
    background: var(--accent-primary, #4f46e5);
}

.xwui-follow-indicator-checkbox:checked + .xwui-follow-indicator-slider::before {
    transform: translateX(20px);
}

.xwui-follow-indicator-switch-label {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-primary, #212529);
}

/* Icon Only Variant */
.xwui-follow-indicator-icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    font-size: 1.25rem;
    transition: transform 0.2s ease;
}

.xwui-follow-indicator-icon-only:hover {
    transform: scale(1.1);
}

/* Badge */
.xwui-follow-indicator-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 var(--spacing-xs, 0.25rem);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-bold, 700);
    color: var(--text-inverse, #ffffff);
    background: var(--accent-error, #ef4444);
    border-radius: 9px;
    position: absolute;
    top: -4px;
    right: -4px;
    line-height: 1;
}

.xwui-follow-indicator-icon-only .xwui-follow-indicator-badge {
    top: 0;
    right: 0;
}

/* Sizes */
:is(.xwui-follow-indicator-s,.xwui-follow-indicator-sm) .xwui-follow-indicator-button {
    padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem);
    font-size: var(--font-size-xs, 0.75rem);
}

:is(.xwui-follow-indicator-l,.xwui-follow-indicator-lg) .xwui-follow-indicator-button {
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
    font-size: var(--font-size-base, 1rem);
}


/* basic/XWUIForm/XWUIForm.css */
/**
 * XWUIForm Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Typography: theme/typography/*.css
 */

.xwui-form {
    width: 100%;
}

/* Layout variants */
.xwui-form-vertical {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg, 1.5rem);
}

.xwui-form-horizontal {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg, 1.5rem);
}

.xwui-form-inline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md, 1rem);
    align-items: flex-end;
}

/* Form field */
.xwui-form-field-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.5rem);
}

.xwui-form-horizontal .xwui-form-field-wrapper {
    flex-direction: row;
    align-items: center;
}

.xwui-form-inline .xwui-form-field-wrapper {
    flex-direction: column;
    min-width: 200px;
}

/* Horizontal layout label width control, applied to XWUIFormField internals */
.xwui-form-horizontal .xwui-form-field--h .xwui-form-field__item {
    flex: 0 0 var(--xwui-form-label-width, 220px);
    max-width: var(--xwui-form-label-width, 220px);
    min-width: var(--xwui-form-label-width, 220px);
    padding-right: var(--spacing-md, 1rem);
}

.xwui-form-horizontal .xwui-form-field--h .xwui-form-field__input {
    flex: 1 1 auto;
}

/* Control wrapper */
.xwui-form-control-wrapper {
    flex: 1;
}

.xwui-form-horizontal .xwui-form-control-wrapper {
    flex: 1;
}

/* Error state */
.xwui-form-error {
    border-color: var(--accent-error) !important;
}


/* basic/XWUIFormField/XWUIFormField.css */
/**
 * XWUIFormField Component Styles
 * Layout: h = horizontal (item | input), v = vertical (item above input)
 */

.xwui-form-field {
    display: flex;
    width: 100%;
    gap: var(--spacing-sm, 0.5rem);
    padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem);
    margin: calc(var(--spacing-xs, 0.25rem) * -1) calc(var(--spacing-sm, 0.5rem) * -1);
    border-radius: var(--radius-sm, 4px);
    transition: background-color 0.15s ease;
}

.xwui-form-field:hover {
    background-color: var(--surface-hover, rgba(0, 0, 0, 0.04));
}

.xwui-form-field--compact {
    position: relative;
}

/* Compact: hide the item visually; its primary text becomes input placeholder/aria-label */
.xwui-form-field--compact .xwui-form-field__item {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.xwui-form-field--v {
    flex-direction: column;
}

.xwui-form-field--h {
    flex-direction: row;
    align-items: flex-start;
}

.xwui-form-field--h .xwui-form-field__item {
    flex: 0 0 auto;
    min-width: 0;
}

/* Disable pointer cursor and hover background on the item (XWUIItem) when itemHoverStyle is false */
.xwui-form-field__item--no-hover .xwui-item-clickable {
    cursor: default;
}
.xwui-form-field__item--no-hover .xwui-item-clickable:hover:not(.xwui-item-status-before_start):not(.xwui-item-status-processing):not(.xwui-item-status-error):not(.xwui-item-status-pass) {
    background-color: transparent;
}

.xwui-form-field--h .xwui-form-field__input {
    flex: 1 1 auto;
    min-width: 0;
}

.xwui-form-field__input {
    width: 100%;
}

.xwui-form-field__input--error input,
.xwui-form-field__input--error select,
.xwui-form-field__input--error textarea {
    border-color: var(--accent-error, #dc3545) !important;
}

.xwui-form-field__error {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--accent-error, #dc3545);
    margin-top: calc(var(--spacing-xs, 0.25rem) * -1);
}

.xwui-form-field__hint {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-secondary);
    margin-top: calc(var(--spacing-xs, 0.25rem) * -1);
}

/* Hidden input wrapper (view mode: input kept in DOM but not visible) */
.xwui-form-field__input-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* View state: value shown as label (no input box) */
.xwui-form-field__view-value {
    min-height: 1.5em;
    padding: var(--spacing-xs, 0.25rem) 0;
    font-size: inherit;
    color: var(--text-primary, inherit);
    line-height: 1.5;
}

/* View editable: label is clickable, double-click to edit */
.xwui-form-field__view-value--editable {
    cursor: pointer;
    border-radius: var(--radius-sm, 4px);
    padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem);
    margin: calc(var(--spacing-xs, 0.25rem) * -1) 0;
}
.xwui-form-field__view-value--editable:hover {
    background: var(--surface-hover, rgba(0, 0, 0, 0.04));
}
.xwui-form-field__view-value--editable:focus {
    outline: 2px solid var(--accent-primary, #0066cc);
    outline-offset: 2px;
}

.xwui-form-field__view-value--hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}

.xwui-form-field__input-wrapper--hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
}

/* basic/XWUIFormulaEngine/XWUIFormulaEngine.css */
/* No styles for this component — placeholder written by tools/copy-lib-components.ts so the runtime CSS auto-loader doesn't 404. */

/* basic/XWUIGradientPicker/XWUIGradientPicker.css */
/* src/components/basic/XWUIGradientPicker/XWUIGradientPicker.css */
/* XWUIGradientPicker — Solid / Linear / Radial / Conic gradient editor.
 *
 * Visual contract: a fixed-width column (240–320 px) that the host pops
 * over a colour-trigger. The picker itself is non-modal — dismiss /
 * focus semantics live on the host so this stylesheet only owns the
 * intrinsic look. Colour values use the xwui theme tokens so the picker
 * inherits the host's theme automatically. */

.xwui-gradient-picker {
    display: block;
}

.xwui-gradient-picker-root {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.5rem);
    min-width: 240px;
    max-width: 320px;
    padding: var(--spacing-sm, 0.5rem);
    background: var(--bg-primary, #ffffff);
    border: var(--border-width-thin, 1px) solid var(--border-color, #e0e0e0);
    border-radius: var(--radius-container, 0.5rem);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    font-family: var(--font-family-base, system-ui, sans-serif);
    font-size: var(--font-size-sm, 0.875rem);
}

/* Type tabs — Solid / Linear / Radial / Conic. */
.xwui-gradient-picker-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
}

.xwui-gradient-picker-tab {
    appearance: none;
    border: var(--border-width-thin, 1px) solid var(--border-color, #e0e0e0);
    background: var(--bg-secondary, #f8f9fa);
    color: var(--text-primary, #212529);
    border-radius: var(--radius-chip, 4px);
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    font-size: var(--font-size-xs, 0.75rem);
}

.xwui-gradient-picker-tab.is-active {
    background: var(--accent-primary, #4f46e5);
    color: white;
    border-color: var(--accent-primary, #4f46e5);
}

/* Controls — per-type row layout. */
.xwui-gradient-picker-controls {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.375rem);
}

.xwui-gradient-picker-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.xwui-gradient-picker-row label {
    color: var(--text-secondary, #6c757d);
    font-size: var(--font-size-xs, 0.75rem);
    min-width: 56px;
}

.xwui-gradient-picker-row input[type="range"] {
    flex: 1 1 auto;
    min-width: 80px;
}

.xwui-gradient-picker-row input[type="text"],
.xwui-gradient-picker-row select {
    flex: 1 1 auto;
    min-width: 60px;
    padding: 0.125rem 0.375rem;
    border: var(--border-width-thin, 1px) solid var(--border-color, #e0e0e0);
    border-radius: var(--radius-input, 4px);
    background: var(--bg-primary, #ffffff);
    color: var(--text-primary, #212529);
}

.xwui-gradient-picker-row input[type="color"] {
    width: 32px;
    height: 24px;
    padding: 0;
    border: var(--border-width-thin, 1px) solid var(--border-color, #e0e0e0);
    background: transparent;
    cursor: pointer;
}

/* Live preview — square swatch ~64 px high. */
.xwui-gradient-picker-preview {
    height: 64px;
    border-radius: var(--radius-input, 4px);
    border: var(--border-width-thin, 1px) solid var(--border-color, #e0e0e0);
    background: #888;
}

/* Stops track — the draggable bar. */
.xwui-gradient-picker-track {
    position: relative;
    height: 22px;
    border-radius: var(--radius-input, 4px);
    border: var(--border-width-thin, 1px) solid var(--border-color, #e0e0e0);
    cursor: copy;
}

/* Each stop is a tiny circle pinned to its position on the track. */
.xwui-gradient-picker-stop {
    position: absolute;
    top: -4px;
    width: 14px;
    height: 28px;
    margin-left: -7px;
    border-radius: 4px;
    border: 2px solid var(--bg-primary, #ffffff);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
    cursor: ew-resize;
}

.xwui-gradient-picker-stop.is-selected {
    box-shadow: 0 0 0 2px var(--accent-primary, #4f46e5);
}

/* Selected-stop colour input row. */
.xwui-gradient-picker-stop-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.xwui-gradient-picker-stop-row label {
    color: var(--text-secondary, #6c757d);
    font-size: var(--font-size-xs, 0.75rem);
}

/* Action buttons. */
.xwui-gradient-picker-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.xwui-gradient-picker-btn {
    appearance: none;
    border: var(--border-width-thin, 1px) solid var(--border-color, #e0e0e0);
    background: var(--bg-secondary, #f8f9fa);
    color: var(--text-primary, #212529);
    border-radius: var(--radius-input, 4px);
    padding: 0.25rem 0.75rem;
    cursor: pointer;
    font-size: var(--font-size-sm, 0.875rem);
}

.xwui-gradient-picker-btn.is-primary {
    background: var(--accent-primary, #4f46e5);
    color: white;
    border-color: var(--accent-primary, #4f46e5);
}

/* basic/XWUIGrid/XWUIGrid.css */
/**
 * XWUIGrid Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Style: style/modern/spacing.css
 */

.xwui-grid {
    display: grid;
    width: 100%;
}

.xwui-grid-item {
    min-width: 0; /* Prevent grid blowout */
}

/* Common grid presets */
.xwui-grid-1 {
    grid-template-columns: 1fr;
}

.xwui-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.xwui-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.xwui-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.xwui-grid-6 {
    grid-template-columns: repeat(6, 1fr);
}

.xwui-grid-12 {
    grid-template-columns: repeat(12, 1fr);
}

/* Gap presets (canonical 9-step scale) */
:is(.xwui-grid-gap-3xs,.xwui-grid-gap-xxxs) {
    gap: var(--spacing-xxxs, 0.0625rem);
}
:is(.xwui-grid-gap-4xs,.xwui-grid-gap-xxxxs) {
    gap: var(--spacing-xxxs, 0.0625rem);
}

:is(.xwui-grid-gap-2xs,.xwui-grid-gap-xxs) {
    gap: var(--spacing-xxs, 0.125rem);
}

.xwui-grid-gap-xs {
    gap: var(--spacing-xs, 0.25rem);
}

:is(.xwui-grid-gap-s,.xwui-grid-gap-sm) {
    gap: var(--spacing-sm, 0.5rem);
}

:is(.xwui-grid-gap-m,.xwui-grid-gap-md) {
    gap: var(--spacing-md, 1rem);
}

:is(.xwui-grid-gap-l,.xwui-grid-gap-lg) {
    gap: var(--spacing-lg, 1.5rem);
}

.xwui-grid-gap-xl {
    gap: var(--spacing-xl, 2rem);
}

:is(.xwui-grid-gap-2xl,.xwui-grid-gap-xxl) {
    gap: var(--spacing-xxl, 2.6rem);
}

:is(.xwui-grid-gap-3xl,.xwui-grid-gap-xxxl) {
    gap: var(--spacing-xxxl, 3.2rem);
}
:is(.xwui-grid-gap-4xl,.xwui-grid-gap-xxxxl) {
    gap: var(--spacing-xxxl, 3.2rem);
}

/* Legacy gap aliases */
.xwui-grid-gap-s { gap: var(--spacing-sm, 0.5rem); }
.xwui-grid-gap-m { gap: var(--spacing-md, 1rem); }
.xwui-grid-gap-l { gap: var(--spacing-lg, 1.5rem); }

/* Auto-fit responsive grid */
.xwui-grid-auto-fit {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.xwui-grid-auto-fill {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

/* Alignment utilities */
.xwui-grid-center {
    align-items: center;
    justify-items: center;
}

.xwui-grid-stretch {
    align-items: stretch;
    justify-items: stretch;
}


/* basic/XWUIHero/XWUIHero.css */
/**
 * XWUIHero — page hero component.
 * Honors XWUI tokens; CSS-variable fallbacks provided for standalone usage.
 */

.xwui-hero {
  display: block;
  padding: var(--xwui-space-3xl, 4rem) var(--xwui-space-lg, 1.5rem);
  position: relative;
  overflow: hidden;
}

.xwui-hero[data-variant='gradient'] {
  background:
    radial-gradient(1200px 600px at 20% -10%,
      color-mix(in srgb, var(--xwui-color-brand-500, #6366f1) 18%, transparent),
      transparent 60%),
    radial-gradient(1000px 500px at 120% 20%,
      color-mix(in srgb, var(--xwui-color-accent-500, #a855f7) 14%, transparent),
      transparent 60%);
}

.xwui-hero__inner {
  max-width: var(--xwui-layout-max-width, 1360px);
  margin: 0 auto;
  display: grid;
  gap: var(--xwui-space-xl, 2rem);
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
}

.xwui-hero[data-align='center'] .xwui-hero__inner {
  grid-template-columns: 1fr;
  text-align: center;
  justify-items: center;
}

.xwui-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--xwui-space-md, 1.25rem);
}

.xwui-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--xwui-color-border-default, rgba(15, 23, 42, 0.12));
  background: var(--xwui-color-surface-1, #f8fafc);
  color: var(--xwui-color-text-secondary, #334155);
  border-radius: var(--xwui-radius-pill, 999px);
  font-size: 0.8125rem;
  font-weight: 500;
  width: fit-content;
}

.xwui-hero[data-align='center'] .xwui-hero__eyebrow { margin: 0 auto; }

.xwui-hero__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--xwui-color-brand-500, #6366f1);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--xwui-color-brand-500, #6366f1) 25%, transparent);
}

.xwui-hero__title {
  font-size: clamp(2.5rem, 5vw, 4.75rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--xwui-color-text-primary, #0f172a);
  margin: 0;
  font-weight: 800;
}

.xwui-hero[data-size='md'] .xwui-hero__title { font-size: clamp(2rem, 3.5vw, 3rem); }
.xwui-hero[data-size='xl'] .xwui-hero__title { font-size: clamp(3rem, 6vw, 5.5rem); }

.xwui-hero__title-highlight {
  background: linear-gradient(135deg,
    var(--xwui-color-brand-500, #6366f1),
    var(--xwui-color-accent-500, #a855f7));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.xwui-hero__subtitle {
  color: var(--xwui-color-text-secondary, #334155);
  font-size: clamp(1.05rem, 1.3vw + 0.5rem, 1.25rem);
  max-width: 52ch;
  line-height: 1.6;
  margin: 0;
}
.xwui-hero[data-align='center'] .xwui-hero__subtitle { margin-inline: auto; }

.xwui-hero__ctas {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.xwui-hero[data-align='center'] .xwui-hero__ctas { justify-content: center; }

.xwui-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.2rem;
  border-radius: var(--xwui-radius-md, 10px);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    transform 140ms ease;
}

.xwui-hero__cta--primary {
  color: #fff;
  background: linear-gradient(135deg,
    var(--xwui-color-brand-500, #6366f1),
    var(--xwui-color-brand-600, #4f46e5));
  box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--xwui-color-brand-500, #6366f1) 60%, transparent);
}
.xwui-hero__cta--primary:hover {
  background: linear-gradient(135deg,
    var(--xwui-color-brand-600, #4f46e5),
    var(--xwui-color-brand-700, #4338ca));
  color: #fff;
}

.xwui-hero__cta--secondary {
  background: var(--xwui-color-surface-1, #f8fafc);
  color: var(--xwui-color-text-primary, #0f172a);
  border-color: var(--xwui-color-border-default, rgba(15, 23, 42, 0.12));
}
.xwui-hero__cta--secondary:hover {
  background: var(--xwui-color-surface-2, #f1f5f9);
  color: var(--xwui-color-text-primary, #0f172a);
}

.xwui-hero__cta--ghost {
  background: transparent;
  color: var(--xwui-color-text-primary, #0f172a);
}
.xwui-hero__cta--ghost:hover {
  background: var(--xwui-color-surface-2, #f1f5f9);
}

.xwui-hero__meta {
  display: flex;
  gap: 1.25rem;
  color: var(--xwui-color-text-muted, #64748b);
  font-size: 0.9rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}
.xwui-hero__meta strong {
  color: var(--xwui-color-text-primary, #0f172a);
  font-weight: 700;
}

.xwui-hero__preview {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--xwui-radius-2xl, 28px);
  background:
    radial-gradient(400px 200px at 30% 20%,
      color-mix(in srgb, var(--xwui-color-brand-500, #6366f1) 30%, transparent),
      transparent 60%),
    radial-gradient(400px 200px at 80% 70%,
      color-mix(in srgb, var(--xwui-color-accent-500, #a855f7) 28%, transparent),
      transparent 60%),
    var(--xwui-color-surface-1, #f8fafc);
  border: 1px solid var(--xwui-color-border-subtle, rgba(15, 23, 42, 0.08));
  box-shadow: var(--xwui-shadow-lg, 0 12px 40px rgba(15, 23, 42, 0.12));
  padding: var(--xwui-space-lg, 1.5rem);
  overflow: hidden;
}

@media (max-width: 960px) {
  .xwui-hero__inner { grid-template-columns: 1fr; }
  .xwui-hero__preview { aspect-ratio: 16 / 10; }
}

/* basic/XWUIHidden/XWUIHidden.css */
/**
 * XWUIHidden Component Styles
 * Show/hide based on breakpoints
 */

.xwui-hidden-container {
    /* Base container */
}

.xwui-hidden-wrapper {
    /* Wrapper for content */
}

/* CSS-based hiding (when implementation is 'css') */
@media (max-width: 639px) {
    :is(.xwui-hidden-below-s,.xwui-hidden-below-sm) {
        display: none !important;
    }
}

@media (max-width: 767px) {
    :is(.xwui-hidden-below-m,.xwui-hidden-below-md) {
        display: none !important;
    }
}

@media (max-width: 1023px) {
    :is(.xwui-hidden-below-l,.xwui-hidden-below-lg) {
        display: none !important;
    }
}

@media (max-width: 1279px) {
    .xwui-hidden-below-xl {
        display: none !important;
    }
}

@media (max-width: 1535px) {
    .xwui-hidden-below-2xl {
        display: none !important;
    }
}

@media (min-width: 640px) {
    .xwui-hidden-above-xs {
        display: none !important;
    }
}

@media (min-width: 768px) {
    :is(.xwui-hidden-above-s,.xwui-hidden-above-sm) {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    :is(.xwui-hidden-above-m,.xwui-hidden-above-md) {
        display: none !important;
    }
}

@media (min-width: 1280px) {
    :is(.xwui-hidden-above-l,.xwui-hidden-above-lg) {
        display: none !important;
    }
}

@media (min-width: 1536px) {
    .xwui-hidden-above-xl {
        display: none !important;
    }
}

/* Only show at specific breakpoints */
.xwui-hidden-only-xs {
    display: none !important;
}

@media (min-width: 640px) {
    .xwui-hidden-only-xs {
        display: block !important;
    }
    
    :is(.xwui-hidden-only-s,.xwui-hidden-only-sm) {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .xwui-hidden-only-xs,
    :is(.xwui-hidden-only-s,.xwui-hidden-only-sm) {
        display: none !important;
    }
    
    :is(.xwui-hidden-only-m,.xwui-hidden-only-md) {
        display: block !important;
    }
}

@media (min-width: 1024px) {
    .xwui-hidden-only-xs,
    :is(.xwui-hidden-only-s,.xwui-hidden-only-sm),
    :is(.xwui-hidden-only-m,.xwui-hidden-only-md) {
        display: none !important;
    }
    
    :is(.xwui-hidden-only-l,.xwui-hidden-only-lg) {
        display: block !important;
    }
}

@media (min-width: 1280px) {
    .xwui-hidden-only-xs,
    :is(.xwui-hidden-only-s,.xwui-hidden-only-sm),
    :is(.xwui-hidden-only-m,.xwui-hidden-only-md),
    :is(.xwui-hidden-only-l,.xwui-hidden-only-lg) {
        display: none !important;
    }
    
    .xwui-hidden-only-xl {
        display: block !important;
    }
}

@media (min-width: 1536px) {
    .xwui-hidden-only-xs,
    :is(.xwui-hidden-only-s,.xwui-hidden-only-sm),
    :is(.xwui-hidden-only-m,.xwui-hidden-only-md),
    :is(.xwui-hidden-only-l,.xwui-hidden-only-lg),
    .xwui-hidden-only-xl {
        display: none !important;
    }
    
    .xwui-hidden-only-2xl {
        display: block !important;
    }
}


/* basic/XWUIHighlight/XWUIHighlight.css */
/**
 * XWUIHighlight Component Styles
 */
.xwui-highlight {
  display: inline;
}

.xwui-highlight-mark,
mark.xwui-highlight-mark {
  background-color: var(--color-highlight-bg, rgba(255, 235, 59, 0.5));
  color: inherit;
  padding: 0 0.1em;
  border-radius: 2px;
}

/* basic/XWUIHoverCard/XWUIHoverCard.css */
/**
 * XWUIHoverCard Component Styles
 * Inherits from XWUIPopover
 */

.xwui-hover-card-container {
    /* Container has no specific styles - inherits from XWUIPopover */
}


/* basic/XWUIIcon/XWUIIcon.css */
/**
 * XWUIIcon Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 */

.xwui-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    line-height: 0;
    vertical-align: middle;
    color: currentColor;
    transition: color 0.2s ease, transform 0.2s ease;
}

/* Size variants (canonical 9-step scale) */
:is(.xwui-icon-3xs,.xwui-icon-xxxs) {
    width: 6px;
    height: 6px;
}
:is(.xwui-icon-4xs,.xwui-icon-xxxxs) {
    width: 3px;
    height: 3px;
}

:is(.xwui-icon-2xs,.xwui-icon-xxs) {
    width: 9px;
    height: 9px;
}

.xwui-icon-xs {
    width: 12px;
    height: 12px;
}

:is(.xwui-icon-s,.xwui-icon-sm) {
    width: 16px;
    height: 16px;
}

:is(.xwui-icon-m,.xwui-icon-md) {
    width: 20px;
    height: 20px;
}

:is(.xwui-icon-l,.xwui-icon-lg) {
    width: 24px;
    height: 24px;
}

.xwui-icon-xl {
    width: 32px;
    height: 32px;
}

:is(.xwui-icon-2xl,.xwui-icon-xxl) {
    width: 42px;
    height: 42px;
}

:is(.xwui-icon-3xl,.xwui-icon-xxxl) {
    width: 52px;
    height: 52px;
}
:is(.xwui-icon-4xl,.xwui-icon-xxxxl) {
    width: 83.2px;
    height: 83.2px;
}

/* Legacy size aliases */
.xwui-icon-s { width: 16px; height: 16px; }
.xwui-icon-m { width: 20px; height: 20px; }
.xwui-icon-l { width: 24px; height: 24px; }

/* Icon content wrapper */
.xwui-icon-content {
    margin: 0;
    padding: 0;
    line-height: 0;
}

/* SVG styling */
.xwui-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

/* Spin animation */
.xwui-icon-spin {
    animation: xwui-icon-spin 1s linear infinite;
}

@keyframes xwui-icon-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Hover states */
.xwui-icon-clickable {
    cursor: pointer;
}

.xwui-icon-clickable:hover {
    opacity: 0.8;
}

/* Color variants using CSS variables */
.xwui-icon-primary {
    color: var(--accent-primary, #4f46e5);
}

.xwui-icon-success {
    color: var(--accent-success, #10b981);
}

.xwui-icon-warning {
    color: var(--accent-warning, #f59e0b);
}

.xwui-icon-error {
    color: var(--accent-error, #ef4444);
}

.xwui-icon-muted {
    color: var(--text-tertiary, #adb5bd);
}

/* ── RTL mirroring ──────────────────────────────────────────────────────────
 * Horizontal directional pointers are tagged `.xwui-icon-directional` by the
 * component (when `flipRtl` resolves to a directional glyph). Under an RTL
 * writing direction they flip on the X axis, so a "next" chevron / back arrow
 * keeps pointing the way the reader moves. Pure CSS keyed off the inherited
 * `dir`, so it reacts with no JS re-render. The `.xwui-icon-no-effects` opt-out
 * already forces `transform: none !important`, so it wins over this. */
[dir="rtl"] .xwui-icon-directional {
    transform: scaleX(-1);
}

/* No effects modifier - removes all transforms, transitions, and animations */
.xwui-icon-no-effects,
.xwui-icon-no-effects svg {
    transform: none !important;
    transition: none !important;
    animation: none !important;
    scale: 1 !important;
    rotate: 0deg !important;
}

/* ────────────────────────────────────────────────────────────────────────
 * Global icon-styles opt-out — `<html data-icons-styles="disabled">` (or
 * the same attribute on any ancestor) turns off ALL XWUI icon styling so
 * icons render with only the source SVG's own colors / sizes. No
 * `currentColor` inheritance from the parent's text colour, no XWUI-added
 * transitions, no `--icons-color-*` variable swaps. Intended for:
 *   • debugging "why does this icon look off" — isolates component CSS
 *     from library CSS
 *   • rendering brand / multi-hue logos at their authored palette without
 *     having to reach for XWUIIconConfig.themeMode or preserveColors
 *   • stripping interference when mounting third-party widgets that
 *     already style their own SVGs
 *
 * Nothing outside the `.xwui-icon` scope is affected — you can disable
 * icon styles without touching text colours, buttons, etc.
 * ──────────────────────────────────────────────────────────────────────── */
:root[data-icons-styles="disabled"] .xwui-icon,
[data-icons-styles="disabled"] .xwui-icon {
    color: initial !important;
    transition: none !important;
}
:root[data-icons-styles="disabled"] .xwui-icon svg,
[data-icons-styles="disabled"] .xwui-icon svg {
    color: initial !important;
}
/* Suppress the `--icons-color-*` cascade by resetting the vars on the
   same scope, so SVGs that reference them fall back to their original
   explicit fills or stroke="currentColor" (which is now `initial`). */
:root[data-icons-styles="disabled"],
[data-icons-styles="disabled"] {
    --icons-color-main: initial;
    --icons-color-secondary: initial;
    --icons-color-accent: initial;
    --icons-color-transparent: transparent;
}


/* basic/XWUIImage/XWUIImage.css */
/**
 * XWUIImage Component Styles
 * Enhanced image with fallbacks and lazy loading
 */

.xwui-image-container {
    display: inline-block;
}

.xwui-image-wrapper {
    position: relative;
    display: block;
    width: 100%;
}

/* Art-directed <picture> wrapper is layout-transparent so the inner <img>
   participates in the wrapper exactly as a bare <img> would (identical sizing
   whether or not responsive sources are used). */
.xwui-image-wrapper picture {
    display: contents;
}

.xwui-image {
    display: block;
    max-width: 100%;
    height: auto;
    transition: opacity 0.3s ease;
}

.xwui-image-loading {
    opacity: 0;
}

.xwui-image-loaded {
    opacity: 1;
}

.xwui-image-error {
    opacity: 0.5;
}

.xwui-image-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary, #f8f9fa);
    color: var(--text-secondary, #6c757d);
    font-size: 0.875rem;
}

.xwui-image-error-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary, #f1f3f5);
    color: var(--text-tertiary, #adb5bd);
    font-size: 0.875rem;
}

/* ── Blur-up progressive load ─────────────────────────────────────────────
   The placeholder (a tiny low-res image) is blurred + scaled and cross-fades
   out when the full image loads (opacity is set to 0 in JS on load). */
.xwui-image-placeholder {
    transition: opacity 0.6s ease;
}
.xwui-image-placeholder--blur {
    overflow: hidden;
}
.xwui-image-placeholder--blur img {
    filter: blur(18px);
    transform: scale(1.1);
}

/* ── Hover-to-zoom magnifier lens ─────────────────────────────────────────── */
.xwui-image-zoomable {
    cursor: crosshair;
}
.xwui-image-zoom-lens {
    position: absolute;
    pointer-events: none;
    background-repeat: no-repeat;
    border: 3px solid var(--bg-primary, #ffffff);
    box-shadow: 0 0 0 1px var(--border-color, rgba(0, 0, 0, 0.1)), 0 8px 24px rgba(0, 0, 0, 0.28);
    opacity: 0;
    transition: opacity 0.15s ease;
    z-index: 5;
}
.xwui-image-zoom-lens--circle { border-radius: 50%; }
.xwui-image-zoom-lens--square { border-radius: 10px; }
.xwui-image-zoom-lens.is-active {
    opacity: 1;
}

/* "Hover to zoom" hint pill — visible at rest, fades out while hovering. */
.xwui-image-zoom-hint {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.62);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.25s ease;
    z-index: 6;
}
.xwui-image-zoom-hint svg { flex-shrink: 0; }
.xwui-image-zoomable:hover .xwui-image-zoom-hint { opacity: 0; }

/* ── Image hotspots (annotation dots + tooltips) ──────────────────────────── */
.xwui-image-hotspots {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
}
.xwui-image-hotspot {
    position: absolute;
    width: 18px;
    height: 18px;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    cursor: pointer;
}
.xwui-image-hotspot-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--accent-primary, var(--role-primary-bg, #6366f1));
    opacity: 0.55;
    animation: xwui-image-hotspot-ping 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.xwui-image-hotspot-dot {
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--bg-primary, #ffffff);
    border: 3px solid var(--accent-primary, var(--role-primary-bg, #6366f1));
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
@keyframes xwui-image-hotspot-ping {
    0% { transform: scale(0.6); opacity: 0.7; }
    80%, 100% { transform: scale(2); opacity: 0; }
}
.xwui-image-hotspot-tip {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    width: max-content;
    max-width: 200px;
    background: var(--text-primary, #0f172a);
    color: var(--bg-primary, #ffffff);
    padding: 8px 10px;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
    text-align: left;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.xwui-image-hotspot:hover .xwui-image-hotspot-tip,
.xwui-image-hotspot:focus .xwui-image-hotspot-tip,
.xwui-image-hotspot:focus-within .xwui-image-hotspot-tip {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}
.xwui-image-hotspot-tip strong {
    display: block;
    font-size: 0.8125rem;
    margin-bottom: 2px;
}
.xwui-image-hotspot-tip span {
    display: block;
    font-size: 0.75rem;
    opacity: 0.8;
    line-height: 1.4;
}

/* ── Before/after comparison slider ───────────────────────────────────────── */
.xwui-image-compare {
    user-select: none;
    cursor: ew-resize;
}
.xwui-image-compare-before {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 3;
}
.xwui-image-compare-before img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.xwui-image-compare-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    background: var(--bg-primary, #ffffff);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    z-index: 4;
}
.xwui-image-compare-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bg-primary, #ffffff);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #64748b);
}
.xwui-image-compare-range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    z-index: 5;
}
.xwui-image-compare-label {
    position: absolute;
    top: 14px;
    background: rgba(15, 23, 42, 0.62);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 5px 11px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    pointer-events: none;
    z-index: 4;
}
.xwui-image-compare-label--before { left: 14px; }
.xwui-image-compare-label--after { right: 14px; }

/* ── Corner ribbon banner (reusable on any image/box surface) ─────────────── */
.xwui-image-ribbon {
    position: absolute;
    width: 104px;
    height: 104px;
    overflow: hidden;
    pointer-events: none;
    z-index: 4;
}
.xwui-image-ribbon span {
    position: absolute;
    display: block;
    width: 150px;
    padding: 6px 0;
    text-align: center;
    background: var(--accent-primary, #6366f1);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
}
.xwui-image-ribbon--top-right { top: 0; right: 0; }
.xwui-image-ribbon--top-right span { top: 24px; right: -40px; transform: rotate(45deg); }
.xwui-image-ribbon--top-left { top: 0; left: 0; }
.xwui-image-ribbon--top-left span { top: 24px; left: -40px; transform: rotate(-45deg); }
.xwui-image-ribbon--bottom-right { bottom: 0; right: 0; }
.xwui-image-ribbon--bottom-right span { bottom: 24px; right: -40px; transform: rotate(-45deg); }
.xwui-image-ribbon--bottom-left { bottom: 0; left: 0; }
.xwui-image-ribbon--bottom-left span { bottom: 24px; left: -40px; transform: rotate(45deg); }

/* Make the compare divider handle clearly draggable. */
.xwui-image-compare-handle { transition: transform 0.12s ease; }
.xwui-image-compare:hover .xwui-image-compare-handle { transform: translate(-50%, -50%) scale(1.08); }


/* basic/XWUIImageList/XWUIImageList.css */
/**
 * XWUIImageList Component Styles
 * MUI Image List: grid of images (standard, collapsed, quilted).
 */

.xwui-imagelist {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.xwui-imagelist-item {
  position: relative;
  overflow: hidden;
  background-color: var(--color-imagelist-item-bg, #eee);
}

.xwui-imagelist-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  vertical-align: middle;
}

.xwui-imagelist-item-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 12px;
  background: linear-gradient(transparent, var(--overlay-strong));
  color: var(--text-inverse);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.xwui-imagelist-item-title {
  font-weight: 600;
  font-size: 0.875rem;
}

.xwui-imagelist-item-subtitle {
  font-size: 0.75rem;
  opacity: 0.9;
}

.xwui-imagelist-collapsed .xwui-imagelist-item {
  /* Denser rows */
}

.xwui-imagelist-quilted .xwui-imagelist-item {
  /* Variable spans handled inline */
}

/* basic/XWUIIndicator/XWUIIndicator.css */
/**
 * XWUIIndicator Component Styles
 * Mantine Indicator: wrapper with corner dot/label.
 */
.xwui-indicator {
  position: relative;
  display: inline-block;
}

.xwui-indicator-inline {
  display: inline;
}

.xwui-indicator-child {
  display: block;
}

.xwui-indicator-dot {
  position: absolute;
  box-sizing: border-box;
  min-width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-indicator-bg, var(--color-primary));
  border: 2px solid var(--color-indicator-border, var(--color-surface));
}

.xwui-indicator-dot.xwui-indicator-with-label {
  min-width: 18px;
  height: 18px;
  font-size: 0.7rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border-radius: 999px;
  color: var(--color-on-primary, #fff);
}

/* Position classes */
.xwui-indicator-pos-top-start { top: 0; left: 0; transform: translate(-50%, -50%); }
.xwui-indicator-pos-top-center { top: 0; left: 50%; transform: translate(-50%, -50%); }
.xwui-indicator-pos-top-end { top: 0; right: 0; transform: translate(50%, -50%); }
.xwui-indicator-pos-middle-start { top: 50%; left: 0; transform: translate(-50%, -50%); }
.xwui-indicator-pos-middle-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.xwui-indicator-pos-middle-end { top: 50%; right: 0; transform: translate(50%, -50%); }
.xwui-indicator-pos-bottom-start { bottom: 0; left: 0; transform: translate(-50%, 50%); }
.xwui-indicator-pos-bottom-center { bottom: 0; left: 50%; transform: translate(-50%, 50%); }
.xwui-indicator-pos-bottom-end { bottom: 0; right: 0; transform: translate(50%, 50%); }

/* basic/XWUIInplace/XWUIInplace.css */
.xwui-inplace {
  display: inline-block;
  min-width: 6rem;
}

.xwui-inplace-display {
  cursor: pointer;
  padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem);
  border-radius: var(--radius-sm, 4px);
}

.xwui-inplace-display:hover {
  background: var(--bg-primary-hover, rgba(0, 0, 0, 0.04));
}

.xwui-inplace-display.xwui-inplace-placeholder {
  color: var(--color-text-tertiary, #9ca3af);
}

.xwui-inplace-display.xwui-inplace-disabled {
  cursor: not-allowed;
  opacity: 0.6;
  pointer-events: none;
}

.xwui-inplace-edit {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 0.25rem);
}

.xwui-inplace-input-wrap {
  min-width: 10rem;
}

.xwui-inplace-actions {
  display: flex;
  gap: var(--spacing-xs, 0.25rem);
}

/* basic/XWUIInput/XWUIInput.css */
/**
 * XWUIInput Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/input/*.css (component-specific border widths)
 * - Roundness: theme/roundness/input/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-input-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.375rem);
}

.xwui-input-full-width {
    width: 100%;
}

/* Label */
.xwui-input-label {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary);
}

.xwui-input-required {
    color: var(--accent-error);
}

/* Input container */
.xwui-input-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 0.5rem);
    border-radius: var(--radius-input, var(--radius-md, 6px));
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

/* Outlined variant */
.xwui-input-outlined .xwui-input-container {
    border: var(--border-input-width, var(--border-width-regular, 1.5px)) var(--border-input-style, solid) var(--border-input-color, var(--border-color));
    background: var(--bg-primary);
}

.xwui-input-outlined .xwui-input-container:hover {
    border-color: var(--border-strong);
}

.xwui-input-outlined .xwui-input-container.xwui-input-focused {
    border-color: var(--accent-primary);
    box-shadow: var(--glow-input-focus, var(--shadow-xs));
}

/* Filled variant */
.xwui-input-filled .xwui-input-container {
    border: var(--border-input-width, var(--border-width-regular, 1.5px)) var(--border-input-style, solid) transparent;
    background: var(--bg-secondary);
}

.xwui-input-filled .xwui-input-container:hover {
    background: var(--bg-tertiary);
}

.xwui-input-filled .xwui-input-container.xwui-input-focused {
    background: var(--bg-primary);
    border-color: var(--accent-primary);
    box-shadow: var(--glow-input-focus, none);
}

/* Underlined variant */
.xwui-input-underlined .xwui-input-container {
    border: none;
    border-bottom: var(--border-input-width, var(--border-width-thick, 2px)) var(--border-input-style, solid) var(--border-input-color, var(--border-color));
    border-radius: 0;
    background: transparent;
}

.xwui-input-underlined .xwui-input-container:hover {
    border-bottom-color: var(--border-strong);
}

.xwui-input-underlined .xwui-input-container.xwui-input-focused {
    border-bottom-color: var(--accent-primary);
    box-shadow: var(--glow-input-focus, none);
}

/* Input element */
.xwui-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-family: var(--font-input-family, var(--font-family-base, inherit));
    color: var(--text-primary);
    width: 100%;
    min-width: 0;
}

.xwui-input::placeholder {
    color: var(--text-tertiary);
}

/* Size variants */
:is(.xwui-input-s,.xwui-input-sm) .xwui-input-container {
    padding: var(--spacing-xs, 0.375rem) var(--spacing-sm, 0.75rem);
}

:is(.xwui-input-s,.xwui-input-sm) .xwui-input {
    font-size: var(--font-size-sm, 0.875rem);
}

:is(.xwui-input-m,.xwui-input-md) .xwui-input-container {
    padding: var(--spacing-sm, 0.625rem) var(--spacing-sm, 0.875rem);
}

:is(.xwui-input-m,.xwui-input-md) .xwui-input {
    font-size: var(--font-size-base, 0.9375rem);
}

:is(.xwui-input-l,.xwui-input-lg) .xwui-input-container {
    padding: var(--spacing-sm, 0.875rem) var(--spacing-md, 1rem);
}

:is(.xwui-input-l,.xwui-input-lg) .xwui-input {
    font-size: var(--font-size-base, 1rem);
}

/* Density (M3, Fluent, Carbon) */
.xwui-input-wrapper[data-density="compact"] .xwui-input-container {
    padding: var(--control-padding-y-compact) var(--control-padding-x-compact);
}
.xwui-input-wrapper[data-density="comfortable"] .xwui-input-container {
    padding: var(--control-padding-y-comfortable) var(--control-padding-x-comfortable);
}
.xwui-input-wrapper[data-density="spacious"] .xwui-input-container {
    padding: var(--control-padding-y-spacious) var(--control-padding-x-spacious);
}

/* Prefix and suffix */
.xwui-input-prefix,
.xwui-input-suffix {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.xwui-input-prefix svg,
.xwui-input-suffix svg {
    width: 18px;
    height: 18px;
}

/* Clear button */
.xwui-input-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: color 0.2s;
    flex-shrink: 0;
}

.xwui-input-clear:hover {
    color: var(--text-secondary);
}

.xwui-input-clear svg {
    width: 16px;
    height: 16px;
}

/* Password toggle */
.xwui-input-password-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: color 0.2s;
    flex-shrink: 0;
}

.xwui-input-password-toggle:hover {
    color: var(--text-secondary);
}

.xwui-input-password-toggle svg {
    width: 18px;
    height: 18px;
}

/* Helper text */
.xwui-input-helper {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.xwui-input-helper-error {
    color: var(--accent-error);
}

/* Format validation feedback (pattern, minLength, maxLength) */
.xwui-input-format-feedback {
    font-size: var(--font-size-xs, 0.75rem);
    margin-top: calc(var(--spacing-xs, 0.25rem) * -0.5);
}

.xwui-input-format-feedback--valid {
    color: var(--accent-success, #198754);
}

.xwui-input-format-feedback--invalid {
    color: var(--accent-error);
}

/* Format valid: border/ring success (do not override explicit error) */
.xwui-input-format-valid:not(.xwui-input-error) .xwui-input-container {
    border-color: var(--accent-success, #198754);
}

.xwui-input-format-valid:not(.xwui-input-error) .xwui-input-container.xwui-input-focused {
    /* Success focus ring — uses universal --accent-success-light. */
    box-shadow: 0 0 0 2px rgba(25, 135, 84, 0.2);
    box-shadow: 0 0 0 2px var(--accent-success-light);
}

/* Format invalid: border/ring error (only when not already in error state from setError) */
.xwui-input-format-invalid:not(.xwui-input-error) .xwui-input-container {
    border-color: var(--accent-error);
}

.xwui-input-format-invalid:not(.xwui-input-error) .xwui-input-container.xwui-input-focused {
    /* Error focus ring — uses universal --accent-error-light. */
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
    box-shadow: 0 0 0 2px var(--accent-error-light);
}

/* Error state */
.xwui-input-error .xwui-input-container {
    border-color: var(--accent-error) !important;
}

.xwui-input-error .xwui-input-container.xwui-input-focused {
    box-shadow: var(--glow-input-error, var(--shadow-xs));
}

.xwui-input-error .xwui-input-label {
    color: var(--accent-error);
}

/* Disabled state */
.xwui-input-disabled .xwui-input-container {
    background: var(--bg-secondary);
    cursor: not-allowed;
    opacity: 0.6;
}

.xwui-input-disabled .xwui-input {
    cursor: not-allowed;
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */


/* basic/XWUIInputAny/XWUIInputAny.css */
/**
 * XWUIInputAny Component Styles
 * The dynamic input is a thin wrapper around the resolved concrete input — it
 * adds no chrome of its own, just stretches to its container so the child input
 * lays out naturally. All visual styling comes from the resolved input's CSS.
 */

.xwui-input-any {
    display: block;
    width: 100%;
}

.xwui-input-any > * {
    width: 100%;
}

/* basic/XWUIInputAutocomplete/XWUIInputAutocomplete.css */
/**
 * XWUIInputAutocomplete Component Styles
 */

.xwui-autocomplete-container {
    position: relative;
}

.xwui-autocomplete {
    position: relative;
}

.xwui-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--spacing-xs, 4px);
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--border-color, #d9d9d9);
    border-radius: var(--radius-sm, 4px);
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.15));
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
}

.xwui-autocomplete-option {
    padding: var(--spacing-sm, 8px) 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.xwui-autocomplete-option:hover {
    background-color: var(--bg-hover, #f5f5f5);
}

.xwui-autocomplete-option-selected {
    background-color: var(--bg-active, #e6f7ff);
}

.xwui-autocomplete-option-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.xwui-autocomplete-empty,
.xwui-autocomplete-loading {
    padding: var(--spacing-sm, 8px) 12px;
    text-align: center;
    color: var(--text-tertiary, #999);
}


/* basic/XWUIInputCascader/XWUIInputCascader.css */
/**
 * XWUIInputCascader Component Styles
 */

.xwui-cascader-container {
    position: relative;
}

.xwui-cascader {
    /* Component wrapper */
}

.xwui-cascader-menus {
    display: flex;
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--border-color, #d9d9d9);
    border-radius: var(--radius-sm, 4px);
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.15));
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
}

.xwui-cascader-menu {
    list-style: none;
    margin: 0;
    padding: var(--spacing-xs, 4px) 0;
    min-width: 150px;
    border-right: 1px solid var(--border-light, #f0f0f0);
}

.xwui-cascader-menu:last-child {
    border-right: none;
}

.xwui-cascader-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.xwui-cascader-menu-item:hover {
    background-color: var(--bg-hover, #f5f5f5);
}

.xwui-cascader-menu-item-selected {
    background-color: var(--bg-active, #e6f7ff);
    font-weight: var(--font-weight-medium, 500);
}

.xwui-cascader-menu-item-label {
    flex: 1;
}

.xwui-cascader-menu-item-arrow {
    margin-left: var(--spacing-sm, 8px);
    font-size: 10px;
    color: var(--text-tertiary, #999);
}


/* basic/XWUIInputCheckbox/XWUIInputCheckbox.css */
/**
 * XWUIInputCheckbox Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Roundness: theme/roundness/rounded.css (global roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-checkbox {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--spacing-sm, 0.625rem);
    cursor: pointer;
    user-select: none;
}

.xwui-checkbox-disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Hidden input */
.xwui-checkbox-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Visual checkbox */
.xwui-checkbox-visual {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--border-control-width, var(--border-width-thick, 2px)) var(--border-control-style, solid) var(--border-control-color, var(--border-color, #dee2e6));
    border-radius: var(--radius-control, var(--radius-xs, 4px));
    background: var(--bg-primary, #ffffff);
    transition: all 0.15s ease;
}

.xwui-checkbox-icon {
    /* Position the icon precisely in the center, independent of any parent flex layout. */
    position: absolute;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.18s cubic-bezier(.2, .8, .2, 1), transform 0.25s cubic-bezier(.34, 1.56, .64, 1);
    color: var(--role-primary-fg, var(--text-inverse, #fff));
    pointer-events: none;
}

.xwui-checkbox-visual {
    position: relative; /* anchor for the absolutely-positioned icon */
}

/* Size variants — icon fills ~85% of the box for a confident, visible mark.
   Canonical 11-step scale: xxxxs|xxxs|xxs|xs|sm|md|lg|xl|xxl|xxxl|xxxxl. */
:is(.xwui-checkbox-4xs,.xwui-checkbox-xxxxs) .xwui-checkbox-visual { width: 9px;  height: 9px; }
:is(.xwui-checkbox-4xs,.xwui-checkbox-xxxxs) .xwui-checkbox-icon   { width: 7px;  height: 7px; }
:is(.xwui-checkbox-3xs,.xwui-checkbox-xxxs)  .xwui-checkbox-visual { width: 10px; height: 10px; }
:is(.xwui-checkbox-3xs,.xwui-checkbox-xxxs)  .xwui-checkbox-icon   { width: 8px;  height: 8px; }
:is(.xwui-checkbox-2xs,.xwui-checkbox-xxs)   .xwui-checkbox-visual { width: 12px; height: 12px; }
:is(.xwui-checkbox-2xs,.xwui-checkbox-xxs)   .xwui-checkbox-icon   { width: 10px; height: 10px; }
.xwui-checkbox-xs    .xwui-checkbox-visual { width: 14px; height: 14px; }
.xwui-checkbox-xs    .xwui-checkbox-icon   { width: 12px; height: 12px; }
:is(.xwui-checkbox-s,.xwui-checkbox-sm)    .xwui-checkbox-visual { width: 16px; height: 16px; }
:is(.xwui-checkbox-s,.xwui-checkbox-sm)    .xwui-checkbox-icon   { width: 14px; height: 14px; }
:is(.xwui-checkbox-m,.xwui-checkbox-md)    .xwui-checkbox-visual { width: 20px; height: 20px; }
:is(.xwui-checkbox-m,.xwui-checkbox-md)    .xwui-checkbox-icon   { width: 17px; height: 17px; }
:is(.xwui-checkbox-l,.xwui-checkbox-lg)    .xwui-checkbox-visual { width: 24px; height: 24px; }
:is(.xwui-checkbox-l,.xwui-checkbox-lg)    .xwui-checkbox-icon   { width: 20px; height: 20px; }
.xwui-checkbox-xl    .xwui-checkbox-visual { width: 28px; height: 28px; }
.xwui-checkbox-xl    .xwui-checkbox-icon   { width: 24px; height: 24px; }
:is(.xwui-checkbox-2xl,.xwui-checkbox-xxl)   .xwui-checkbox-visual { width: 32px; height: 32px; }
:is(.xwui-checkbox-2xl,.xwui-checkbox-xxl)   .xwui-checkbox-icon   { width: 27px; height: 27px; }
:is(.xwui-checkbox-3xl,.xwui-checkbox-xxxl)  .xwui-checkbox-visual { width: 40px; height: 40px; }
:is(.xwui-checkbox-3xl,.xwui-checkbox-xxxl)  .xwui-checkbox-icon   { width: 34px; height: 34px; }
:is(.xwui-checkbox-4xl,.xwui-checkbox-xxxxl) .xwui-checkbox-visual { width: 48px; height: 48px; }
:is(.xwui-checkbox-4xl,.xwui-checkbox-xxxxl) .xwui-checkbox-icon   { width: 40px; height: 40px; }

/* Checked state */
.xwui-checkbox-input:checked + .xwui-checkbox-visual {
    background: var(--accent-primary, #4f46e5);
    border-color: var(--accent-primary, #4f46e5);
    box-shadow: var(--glow-checkbox-checked, none);
}

.xwui-checkbox-input:checked + .xwui-checkbox-visual .xwui-checkbox-icon-check {
    opacity: 1;
    transform: scale(1);
}

/* Indeterminate state */
.xwui-checkbox-input:indeterminate + .xwui-checkbox-visual {
    background: var(--accent-primary, #4f46e5);
    border-color: var(--accent-primary, #4f46e5);
}

.xwui-checkbox-input:indeterminate + .xwui-checkbox-visual .xwui-checkbox-icon-indeterminate {
    opacity: 1;
    transform: scale(1);
}

.xwui-checkbox-input:indeterminate + .xwui-checkbox-visual .xwui-checkbox-icon-check {
    opacity: 0;
}

/* Focus state */
.xwui-checkbox-input:focus-visible + .xwui-checkbox-visual {
    box-shadow: var(--glow-checkbox-focus, var(--shadow-xs));
}

/* Hover state */
.xwui-checkbox:hover .xwui-checkbox-visual {
    border-color: var(--accent-primary, #4f46e5);
}

/* Color variants */
.xwui-checkbox-success .xwui-checkbox-input:checked + .xwui-checkbox-visual,
.xwui-checkbox-success .xwui-checkbox-input:indeterminate + .xwui-checkbox-visual {
    background: var(--accent-success, #10b981);
    border-color: var(--accent-success, #10b981);
}

.xwui-checkbox-warning .xwui-checkbox-input:checked + .xwui-checkbox-visual,
.xwui-checkbox-warning .xwui-checkbox-input:indeterminate + .xwui-checkbox-visual {
    background: var(--accent-warning, #f59e0b);
    border-color: var(--accent-warning, #f59e0b);
}

.xwui-checkbox-error .xwui-checkbox-input:checked + .xwui-checkbox-visual,
.xwui-checkbox-error .xwui-checkbox-input:indeterminate + .xwui-checkbox-visual {
    background: var(--accent-error, #ef4444);
    border-color: var(--accent-error, #ef4444);
}

/* Text content */
.xwui-checkbox-text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xxs, 0.125rem);
}

.xwui-checkbox-label {
    font-size: var(--font-size-base, 0.9375rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary, #212529);
    line-height: 1.4;
}

.xwui-checkbox-description {
    font-size: var(--font-size-sm, 0.8125rem);
    color: var(--text-secondary, #6c757d);
    line-height: 1.4;
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */


/* basic/XWUIInputColor/XWUIInputColor.css */
@import url('../XWUIInputPicker/XWUIInputPicker.css');

/* Color swatch · the leading slot. Sits to the LEFT of the text input
 * (matching the date picker's calendar icon position). The swatch IS
 * the popup trigger · clicking it opens the picker. */
.xwui-input-color-swatch {
    appearance: none;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    margin-right: 6px;
    padding: 0;
    border: 1px solid var(--border-light, rgba(0, 0, 0, 0.18));
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
    /* Center the embedded picker icon inside the swatch · the icon's
     * stroke uses currentColor, which is set per-instance to black or
     * white based on the swatch's perceived luminance (see
     * applySwatchIconContrast). */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.xwui-input-color-swatch__icon {
    pointer-events: none;
    opacity: 0.85;
    /* Subtle drop-shadow keeps the icon legible against mid-tone fills
     * even before the contrast switch kicks in. */
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.25));
}
/* Swatch-only mode (showInput: false) · the swatch is the entire control,
 * so the wrapper collapses around it and the swatch gets a slightly
 * larger touch target. The `is-swatch-only` marker class is set on the
 * picker wrapper by XWUIInputColor.setupColorSwatch when there is no
 * text input. */
.xwui-input-picker.is-swatch-only {
    display: inline-flex;
}
.xwui-input-picker.is-swatch-only .xwui-input-picker-input-wrapper {
    display: inline-flex;
    width: auto;
}
.xwui-input-picker.is-swatch-only .xwui-input-color-swatch {
    width: 36px;
    height: 36px;
    margin-right: 0;
}
.xwui-input-color-swatch:hover {
    transform: scale(1.05);
    border-color: var(--accent-primary, #4a90e2);
}
.xwui-input-color-swatch:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary, #4a90e2) 35%, transparent);
}

/* basic/XWUIInputColorPicker/XWUIInputColorPicker.css */
/**
 * XWUIInputColorPicker Component Styles
 */

.xwui-input-color-picker-container {
    /* Container has no specific styles */
}

.xwui-input-color-picker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.xwui-input-color-picker-swatch {
    width: 32px;
    height: 32px;
    border: 1px solid var(--border-color, #d9d9d9);
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    padding: 0;
    background: none;
}

.xwui-input-color-picker-swatch:hover {
    border-color: var(--accent-hover, #40a9ff);
}

.xwui-input-color-picker-native {
    display: none;
}

.xwui-input-color-picker-popover {
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--border-color, #d9d9d9);
    border-radius: var(--radius-sm, 4px);
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.15));
    padding: var(--spacing-md, 12px);
    z-index: 1000;
}

.xwui-input-color-picker-popover input[type="color"] {
    width: 100%;
    height: 40px;
    border: 1px solid var(--border-color, #d9d9d9);
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
}

.xwui-input-color-picker-presets {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
    margin-top: 8px;
}

.xwui-input-color-picker-preset {
    width: 24px;
    height: 24px;
    border: 1px solid var(--border-color, #d9d9d9);
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    padding: 0;
}

.xwui-input-color-picker-preset:hover {
    border-color: var(--accent-primary, #1890ff);
    transform: scale(1.1);
}

/* basic/XWUIInputDate/XWUIInputDate.css */
@import url('../XWUIInputPicker/XWUIInputPicker.css');

/* Styles for XWUIInputDate. */

/* basic/XWUIInputDatePicker/XWUIInputDatePicker.css */
/* Styles for XWUIInputDatePicker. */

/* basic/XWUIInputDateRange/XWUIInputDateRange.css */
@import url('../XWUIInputPicker/XWUIInputPicker.css');

/* Styles for XWUIInputDateRange. */

/* basic/XWUIInputDateRangePicker/XWUIInputDateRangePicker.css */
/* Styles for XWUIInputDateRangePicker. */

/* basic/XWUIInputDimensions/XWUIInputDimensions.css */
/* XWUIInputDimensions - L × W × H input with unit selector + volume display */

.xwui-input-dimensions {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: var(--font-body, inherit);
  color: var(--text-primary);
}

.xwui-input-dimensions-disabled { opacity: 0.6; pointer-events: none; }

/* xwui canonical size scale */
:is(.xwui-input-dimensions-3xs,.xwui-input-dimensions-xxxs)  { font-size: 0.625rem; }
:is(.xwui-input-dimensions-2xs,.xwui-input-dimensions-xxs)   { font-size: 0.6875rem; }
.xwui-input-dimensions-xs    { font-size: 0.75rem; }
:is(.xwui-input-dimensions-s,.xwui-input-dimensions-sm)    { font-size: 0.8125rem; }
:is(.xwui-input-dimensions-m,.xwui-input-dimensions-md)    { font-size: 0.9375rem; }
:is(.xwui-input-dimensions-l,.xwui-input-dimensions-lg)    { font-size: 1.0625rem; }
.xwui-input-dimensions-xl    { font-size: 1.25rem; }

.xwui-input-dimensions-wrap {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-primary);
  overflow: hidden;
}
.xwui-input-dimensions-wrap:focus-within {
  border-color: var(--role-primary-bg, #1d4ed8);
  box-shadow: 0 0 0 2px rgba(29,78,216,0.20);
}

.xwui-input-dimensions-input {
  width: 4rem;
  padding: 0.375rem 0.5rem;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: right;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.xwui-input-dimensions-input::placeholder { color: var(--text-tertiary); font-weight: 700; }

.xwui-input-dimensions-sep {
  display: inline-flex;
  align-items: center;
  padding: 0 0.25rem;
  background: var(--bg-elevated);
  color: var(--text-tertiary);
  font-weight: 700;
}

.xwui-input-dimensions-unit {
  padding: 0 0.5rem;
  border: none;
  border-left: 1px solid var(--border-light, var(--border-color));
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  outline: none;
}
.xwui-input-dimensions-unit:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }

.xwui-input-dimensions-volume {
  display: inline-flex;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.75em;
}
.xwui-input-dimensions-volume-label {
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  font-size: 0.6875em;
}
.xwui-input-dimensions-volume-value {
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

/* basic/XWUIInputDuration/XWUIInputDuration.css */
/* Styles for XWUIInputDuration. */

/* basic/XWUIInputDurationPicker/XWUIInputDurationPicker.css */
/* Styles for XWUIInputDurationPicker. */

/* basic/XWUIInputDurationRange/XWUIInputDurationRange.css */
/* Styles for XWUIInputDurationRange. */

/* basic/XWUIInputDurationRangePicker/XWUIInputDurationRangePicker.css */
/* Styles for XWUIInputDurationRangePicker. */

/* basic/XWUIInputEmoji/XWUIInputEmoji.css */
/**
 * XWUIInputEmoji Component Styles
 *
 * Mirrors XWUIInputIcon's structure: search on top, scrollable body with
 * per-category horizontal strips (or a single flat grid). Cells mount an
 * XWUIEmoji at size 'md' and grow slightly on hover for tactile feedback.
 */

.xwui-input-emoji-container {
    width: 100%;
}

.xwui-input-emoji {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    gap: 8px;
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-md, 6px);
    padding: 8px;
    box-sizing: border-box;
}

.xwui-input-emoji-search {
    flex: 0 0 auto;
}

.xwui-input-emoji-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    min-height: 120px;
}

.xwui-input-emoji-loading,
.xwui-input-emoji-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-secondary, #64748b);
    font-size: 13px;
}

.xwui-input-emoji-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.xwui-input-emoji-section-header {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 2px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary, #94a3b8);
}

.xwui-input-emoji-section-count {
    font-weight: 400;
    opacity: 0.7;
}

.xwui-input-emoji-strip {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 2px;
    scrollbar-width: thin;
}

.xwui-input-emoji-strip::-webkit-scrollbar {
    height: 6px;
}
.xwui-input-emoji-strip::-webkit-scrollbar-thumb {
    background: var(--color-border, #e5e7eb);
    border-radius: 3px;
}

.xwui-input-emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
    gap: 4px;
    padding: 4px 2px;
}

.xwui-input-emoji-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 4px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    flex: 0 0 auto;
    transition: background-color 0.12s ease, border-color 0.12s ease,
                transform 0.12s ease;
}

.xwui-input-emoji-cell:hover {
    background: var(--color-surface-hover, #f3f4f6);
    border-color: var(--color-border, #e5e7eb);
    transform: scale(1.08);
}

.xwui-input-emoji-cell:focus-visible {
    outline: none;
    border-color: var(--accent-primary, #6366f1);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary, #6366f1) 30%, transparent);
}

.xwui-input-emoji-cell-selected {
    background: color-mix(in srgb, var(--accent-primary, #6366f1) 12%, transparent);
    border-color: var(--accent-primary, #6366f1);
}

.xwui-input-emoji-cell-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 22px;
    line-height: 1;
}

.xwui-input-emoji-cell-emoji .emoji {
    font-size: 22px;
    line-height: 1;
}

.xwui-input-emoji-cell-emoji img.emoji {
    width: 22px;
    height: 22px;
}

.xwui-input-emoji-load-more {
    align-self: flex-start;
    margin-top: 4px;
    padding: 4px 10px;
    font-size: 11px;
    background: transparent;
    border: 1px dashed var(--color-border, #d1d5db);
    border-radius: var(--radius-sm, 4px);
    color: var(--text-secondary, #64748b);
    cursor: pointer;
}

.xwui-input-emoji-load-more:hover {
    border-color: var(--accent-primary, #6366f1);
    color: var(--accent-primary, #6366f1);
}

/* basic/XWUIInputEmojiPicker/XWUIInputEmojiPicker.css */
/**
 * XWUIInputEmojiPicker Component Styles
 *
 * Input-shaped trigger that opens an overlay with XWUIInputEmoji inside.
 * Matches the icon picker's styling so forms using both pickers stay
 * visually consistent.
 */

.xwui-input-emoji-picker-container {
    display: block;
    width: 100%;
}

.xwui-input-emoji-picker {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.xwui-input-emoji-picker-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary, #64748b);
}

.xwui-input-emoji-picker-input {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 36px;
    padding: 6px 8px 6px 10px;
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
    color: var(--text-primary, #111827);
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.xwui-input-emoji-picker-input:hover {
    border-color: var(--accent-primary, #6366f1);
}

.xwui-input-emoji-picker-input:focus-visible,
.xwui-input-emoji-picker-input[aria-expanded="true"] {
    outline: none;
    border-color: var(--accent-primary, #6366f1);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary, #6366f1) 25%, transparent);
}

.xwui-input-emoji-picker-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    line-height: 1;
    font-size: 20px;
}

.xwui-input-emoji-picker-preview .emoji {
    font-size: 20px;
    line-height: 1;
}
.xwui-input-emoji-picker-preview img.emoji {
    width: 20px;
    height: 20px;
}

.xwui-input-emoji-picker-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xwui-input-emoji-picker-name-placeholder {
    color: var(--text-tertiary, #94a3b8);
}

.xwui-input-emoji-picker-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--text-tertiary, #94a3b8);
    cursor: pointer;
    flex-shrink: 0;
    border-radius: var(--radius-sm, 4px);
}

.xwui-input-emoji-picker-trigger:hover {
    color: var(--text-primary, #111827);
    background: var(--color-surface-hover, #f3f4f6);
}

.xwui-input-emoji-picker-xs .xwui-input-emoji-picker-input { min-height: 24px; padding: 2px 6px; font-size: 12px; }
:is(.xwui-input-emoji-picker-s,.xwui-input-emoji-picker-sm) .xwui-input-emoji-picker-input { min-height: 30px; padding: 4px 8px; font-size: 13px; }
:is(.xwui-input-emoji-picker-l,.xwui-input-emoji-picker-lg) .xwui-input-emoji-picker-input { min-height: 42px; padding: 8px 10px; font-size: 15px; }
.xwui-input-emoji-picker-xl .xwui-input-emoji-picker-input { min-height: 48px; padding: 10px 12px; font-size: 16px; }

.xwui-input-emoji-picker-popup {
    position: fixed;
    z-index: 1000;
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-md, 6px);
    box-shadow: var(--shadow-lg, 0 10px 30px rgba(15, 23, 42, 0.18));
    padding: 0;
    box-sizing: border-box;
}

.xwui-input-emoji-picker-popup .xwui-input-emoji {
    border: none;
    border-radius: var(--radius-md, 6px);
    padding: 8px;
}

/* basic/XWUIInputGroup/XWUIInputGroup.css */
/**
 * XWUIInputGroup Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/input/*.css (component-specific border widths)
 * - Roundness: theme/roundness/input/*.css (component-specific roundness)
 */

.xwui-input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
    border: var(--border-input-width, var(--border-width-regular, 1.5px)) var(--border-input-style, solid) var(--border-input-color, var(--border-color));
    border-radius: var(--radius-input, var(--radius-sm, 6px));
    overflow: hidden;
}

.xwui-input-group-prefix,
.xwui-input-group-suffix {
    display: flex;
    align-items: center;
    padding: 0 var(--spacing-sm, 0.75rem);
    background: var(--bg-secondary);
    border-right: var(--border-input-width, var(--border-width-regular, 1.5px)) var(--border-input-style, solid) var(--border-input-color, var(--border-color));
    flex-shrink: 0;
}

.xwui-input-group-suffix {
    border-right: none;
    border-left: var(--border-input-width, var(--border-width-regular, 1.5px)) var(--border-input-style, solid) var(--border-input-color, var(--border-color));
}

.xwui-input-group-input {
    flex: 1;
    min-width: 0;
}

.xwui-input-group-input input,
.xwui-input-group-input select,
.xwui-input-group-input textarea {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
}

/* Size variants */
:is(.xwui-input-group-s,.xwui-input-group-sm) .xwui-input-group-prefix,
:is(.xwui-input-group-s,.xwui-input-group-sm) .xwui-input-group-suffix {
    padding: 0 var(--spacing-sm, 0.5rem);
    font-size: var(--font-size-sm, 0.8125rem);
}

:is(.xwui-input-group-l,.xwui-input-group-lg) .xwui-input-group-prefix,
:is(.xwui-input-group-l,.xwui-input-group-lg) .xwui-input-group-suffix {
    padding: 0 var(--spacing-md, 1rem);
    font-size: var(--font-size-base, 0.9375rem);
}


/* basic/XWUIInputIcon/XWUIInputIcon.css */
/**
 * XWUIInputIcon Component Styles
 *
 * A scrollable icon picker with search on top and per-library strips (or
 * a single flat grid) below. Icon cells render the XWUIIcon component
 * inside a button — the button gets focus/hover/selection styling, the
 * XWUIIcon renders the SVG at the configured pixel size.
 */

.xwui-input-icon-container {
    width: 100%;
}

.xwui-input-icon {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    gap: 8px;
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-md, 6px);
    padding: 8px;
    box-sizing: border-box;
}

.xwui-input-icon-search {
    flex: 0 0 auto;
}

.xwui-input-icon-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    min-height: 120px;
}

.xwui-input-icon-loading,
.xwui-input-icon-empty {
    padding: 24px;
    text-align: center;
    color: var(--text-secondary, #64748b);
    font-size: 13px;
}

/* ── Per-library section (grouped view) ─────────────────────────────── */
.xwui-input-icon-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.xwui-input-icon-section-header {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 2px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary, #94a3b8);
}

.xwui-input-icon-section-count {
    font-weight: 400;
    opacity: 0.7;
}

/* Horizontal-scrolling strip of icons in grouped mode. */
.xwui-input-icon-strip {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 2px;
    scrollbar-width: thin;
}

.xwui-input-icon-strip::-webkit-scrollbar {
    height: 6px;
}
.xwui-input-icon-strip::-webkit-scrollbar-thumb {
    background: var(--color-border, #e5e7eb);
    border-radius: 3px;
}

/* ── Flat grid (groupByLibrary: false) ──────────────────────────────── */
.xwui-input-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 4px;
    padding: 4px 2px;
}

/* ── Icon cell ──────────────────────────────────────────────────────── */
.xwui-input-icon-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 6px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    color: var(--text-primary, #111827);
    flex: 0 0 auto;
    transition: background-color 0.12s ease, border-color 0.12s ease,
                transform 0.12s ease;
}

.xwui-input-icon-cell:hover {
    background: var(--color-surface-hover, #f3f4f6);
    border-color: var(--color-border, #e5e7eb);
}

.xwui-input-icon-cell:focus-visible {
    outline: none;
    border-color: var(--accent-primary, #6366f1);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary, #6366f1) 30%, transparent);
}

.xwui-input-icon-cell-selected {
    background: color-mix(in srgb, var(--accent-primary, #6366f1) 12%, transparent);
    border-color: var(--accent-primary, #6366f1);
}

.xwui-input-icon-cell-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* ── Load-more button ───────────────────────────────────────────────── */
.xwui-input-icon-load-more {
    align-self: flex-start;
    margin-top: 4px;
    padding: 4px 10px;
    font-size: 11px;
    background: transparent;
    border: 1px dashed var(--color-border, #d1d5db);
    border-radius: var(--radius-sm, 4px);
    color: var(--text-secondary, #64748b);
    cursor: pointer;
}

.xwui-input-icon-load-more:hover {
    border-color: var(--accent-primary, #6366f1);
    color: var(--accent-primary, #6366f1);
}

/* basic/XWUIInputIconPicker/XWUIInputIconPicker.css */
/**
 * XWUIInputIconPicker Component Styles
 *
 * Input-shaped trigger that opens an overlay containing XWUIInputIcon.
 * Visual style mirrors XWUIInputText's outlined variant so the two
 * compose cleanly in a form.
 */

.xwui-input-icon-picker-container {
    display: block;
    width: 100%;
}

.xwui-input-icon-picker {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.xwui-input-icon-picker-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary, #64748b);
}

.xwui-input-icon-picker-input {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 36px;
    padding: 6px 8px 6px 10px;
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
    color: var(--text-primary, #111827);
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.xwui-input-icon-picker-input:hover {
    border-color: var(--accent-primary, #6366f1);
}

.xwui-input-icon-picker-input:focus-visible,
.xwui-input-icon-picker-input[aria-expanded="true"] {
    outline: none;
    border-color: var(--accent-primary, #6366f1);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary, #6366f1) 25%, transparent);
}

.xwui-input-icon-picker-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--text-primary, #111827);
}

.xwui-input-icon-picker-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xwui-input-icon-picker-name-placeholder {
    color: var(--text-tertiary, #94a3b8);
}

.xwui-input-icon-picker-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    color: var(--text-tertiary, #94a3b8);
    cursor: pointer;
    flex-shrink: 0;
    border-radius: var(--radius-sm, 4px);
}

.xwui-input-icon-picker-trigger:hover {
    color: var(--text-primary, #111827);
    background: var(--color-surface-hover, #f3f4f6);
}

/* ── Sizes ──────────────────────────────────────────────────────────── */
.xwui-input-icon-picker-xs .xwui-input-icon-picker-input { min-height: 24px; padding: 2px 6px; font-size: 12px; }
:is(.xwui-input-icon-picker-s,.xwui-input-icon-picker-sm) .xwui-input-icon-picker-input { min-height: 30px; padding: 4px 8px; font-size: 13px; }
:is(.xwui-input-icon-picker-l,.xwui-input-icon-picker-lg) .xwui-input-icon-picker-input { min-height: 42px; padding: 8px 10px; font-size: 15px; }
.xwui-input-icon-picker-xl .xwui-input-icon-picker-input { min-height: 48px; padding: 10px 12px; font-size: 16px; }

/* ── Popup ──────────────────────────────────────────────────────────── */
.xwui-input-icon-picker-popup {
    position: fixed;
    z-index: 1000;
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-md, 6px);
    box-shadow: var(--shadow-lg, 0 10px 30px rgba(15, 23, 42, 0.18));
    padding: 0;
    box-sizing: border-box;
}

/* Embedded grid inherits its own container styling; strip the extra
   border/background so the popup wrapper provides the visual frame. */
.xwui-input-icon-picker-popup .xwui-input-icon {
    border: none;
    border-radius: var(--radius-md, 6px);
    padding: 8px;
}

/* basic/XWUIInputJson/XWUIInputJson.css */
/**
 * XWUIInputJson Component Styles
 */

.xwui-json-input-container {
    /* Container has no specific styles */
}

.xwui-json-input-error {
    color: var(--accent-error, #ff4d4f);
    font-size: var(--font-size-xs, 12px);
    margin-bottom: var(--spacing-xs, 4px);
}

.xwui-json-input-textarea {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.xwui-json-input-error-state {
    border-color: var(--accent-error, #ff4d4f);
}


/* basic/XWUIInputKnob/XWUIInputKnob.css */
.xwui-knob {
  position: relative;
  border-radius: 50%;
  background: var(--bg-primary, #f3f4f6);
  border: 2px solid var(--border-color, #e5e7eb);
  cursor: ns-resize;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.xwui-knob:focus-visible {
  outline: 2px solid var(--accent-primary, #4f46e5);
  outline-offset: 2px;
}

.xwui-knob-track {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--bg-elevated, #fff);
  overflow: hidden;
}

.xwui-knob-fill {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform: rotate(-90deg);
}

.xwui-knob-value {
  position: relative;
  z-index: 1;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  color: var(--knob-value-color, var(--text-primary));
}

.xwui-knob-disabled,
.xwui-knob-readonly {
  cursor: not-allowed;
  opacity: 0.7;
}

/* basic/XWUIInputLocation/XWUIInputLocation.css */
/**
 * XWUIInputLocation Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Roundness: theme/roundness/rounded.css (global roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-locationinput {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 1rem);
}

.xwui-locationinput-input-wrapper {
    width: 100%;
}

.xwui-locationinput-input {
    width: 100%;
    padding: var(--spacing-sm, 0.75rem);
    border: var(--border-input-width, var(--border-width-regular, 1.5px)) var(--border-input-style, solid) var(--border-input-color, var(--border-color));
    border-radius: var(--radius-input, var(--radius-sm, 6px));
    font-family: var(--font-input-family, var(--font-family-base, inherit));
    font-size: var(--font-size-sm, 0.875rem);
    transition: border-color 0.2s;
}

.xwui-locationinput-input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.xwui-locationinput-map {
    width: 100%;
    border: var(--border-map-width, var(--border-width-regular, 1.5px)) var(--border-map-style, solid) var(--border-map-color, var(--border-color));
    border-radius: var(--radius-map, var(--radius-md, 8px));
    overflow: hidden;
}


/* basic/XWUIInputMentions/XWUIInputMentions.css */
/**
 * XWUIInputMentions Component Styles
 */

.xwui-mentions-container {
    position: relative;
}

/* Editable area (replaces textarea for mention styling) */
.xwui-mentions-input {
    width: 100%;
    min-height: 80px;
    padding: var(--spacing-sm, 0.75rem) var(--spacing-sm, 0.875rem);
    font-family: var(--font-input-family, var(--font-family-base, inherit));
    font-size: var(--font-size-base, 0.9375rem);
    line-height: 1.5;
    color: var(--text-primary, #212529);
    background: var(--bg-primary, #ffffff);
    border: var(--border-input-width, 1.5px) var(--border-input-style, solid) var(--border-input-color, var(--border-color, #dee2e6));
    border-radius: var(--radius-input, var(--radius-md, 6px));
    outline: none;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.xwui-mentions-input:empty::before {
    content: attr(data-placeholder);
    color: var(--text-tertiary, #adb5bd);
}

.xwui-mentions-input:focus {
    border-color: var(--accent-primary, #4f46e5);
    box-shadow: var(--shadow-xs, 0 0 0 1px rgba(79, 70, 229, 0.2));
}

.xwui-mentions-dropdown {
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--border-color, #d9d9d9);
    border-radius: var(--radius-sm, 4px);
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.15));
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
}

.xwui-mentions-option {
    padding: var(--spacing-sm, 8px) 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.xwui-mentions-option:hover,
.xwui-mentions-option-selected {
    background-color: var(--bg-active, #e6f7ff);
}

.xwui-mentions-empty {
    padding: var(--spacing-sm, 8px) 12px;
    text-align: center;
    color: var(--text-tertiary, #999);
}

/* Mention text in the input: @ and label use accent/mention color (follows theme) */
.xwui-mentions-input .xwui-mention {
    color: var(--xwui-mention-color, var(--accent-primary, #4f46e5));
    font-weight: var(--xwui-mention-font-weight, 500);
}


/* basic/XWUIInputMonetary/XWUIInputMonetary.css */
/* XWUIInputMonetary - currency-aware decimal input */

.xwui-input-monetary {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body, inherit);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
  max-width: 16rem;
  width: 100%;
}
.xwui-input-monetary:focus-within {
  border-color: var(--role-primary-bg, #337ea9);
  box-shadow: 0 0 0 2px rgba(51,126,169,0.20);
}
.xwui-input-monetary-disabled { opacity: 0.6; pointer-events: none; }
.xwui-input-monetary-readonly { background: transparent; border-color: transparent; }

/* xwui canonical size scale */
:is(.xwui-input-monetary-4xs,.xwui-input-monetary-xxxxs) { font-size: 0.5625rem; }
:is(.xwui-input-monetary-3xs,.xwui-input-monetary-xxxs)  { font-size: 0.625rem; }
:is(.xwui-input-monetary-2xs,.xwui-input-monetary-xxs)   { font-size: 0.6875rem; }
.xwui-input-monetary-xs    { font-size: 0.75rem; }
:is(.xwui-input-monetary-s,.xwui-input-monetary-sm),
.xwui-input-monetary-small { font-size: 0.8125rem; }
:is(.xwui-input-monetary-m,.xwui-input-monetary-md),
.xwui-input-monetary-medium { font-size: 0.9375rem; }
:is(.xwui-input-monetary-l,.xwui-input-monetary-lg),
.xwui-input-monetary-large { font-size: 1.0625rem; }
.xwui-input-monetary-xl   { font-size: 1.25rem; }
:is(.xwui-input-monetary-2xl,.xwui-input-monetary-xxl)  { font-size: 1.5rem; }
:is(.xwui-input-monetary-3xl,.xwui-input-monetary-xxxl) { font-size: 1.875rem; }
:is(.xwui-input-monetary-4xl,.xwui-input-monetary-xxxxl){ font-size: 2.25rem; }

.xwui-input-monetary-affix {
  display: inline-flex;
  align-items: center;
  padding: 0 0.5rem;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-weight: 500;
  border-color: var(--border-light, var(--border-color));
}
.xwui-input-monetary-prefix { border-right: 1px solid var(--border-light, var(--border-color)); }
.xwui-input-monetary-suffix { border-left: 1px solid var(--border-light, var(--border-color)); }

.xwui-input-monetary-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.375rem 0.5rem;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: right;
  outline: none;
  font-variant-numeric: tabular-nums;
}
.xwui-input-monetary-input::placeholder { color: var(--text-tertiary); }

.xwui-input-monetary-readonly-text {
  display: inline-block;
  padding: 0.375rem 0.5rem;
  text-align: right;
  font-weight: 500;
}

/* Tone colours: positive / negative / neutral (auto-derive from sign).
 * Use --role-success-bg / --role-danger-bg (the hue tokens) — NOT --role-*-fg
 * which is the contrast colour designed for text-on-coloured-background. */
.xwui-input-monetary-tone-positive .xwui-input-monetary-input,
.xwui-input-monetary-tone-positive .xwui-input-monetary-readonly-text { color: var(--role-success-bg, #15803d); }
.xwui-input-monetary-tone-negative .xwui-input-monetary-input,
.xwui-input-monetary-tone-negative .xwui-input-monetary-readonly-text { color: var(--role-danger-bg, #b91c1c); }
.xwui-input-monetary-tone-neutral { /* default */ }

/* basic/XWUIInputMultiSelect/XWUIInputMultiSelect.css */
/**
 * XWUIInputMultiSelect Component Styles
 */

.xwui-multi-select-container {
    /* Container has no specific styles */
}

.xwui-multi-select-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

.xwui-multi-select-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs, 4px);
    padding: 2px var(--spacing-sm, 8px);
    background-color: var(--bg-secondary, #f0f0f0);
    border-radius: var(--radius-sm, 4px);
    font-size: var(--font-size-xs, 12px);
}

.xwui-multi-select-tag-close {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-base, 16px);
    color: var(--text-secondary, #666);
}

.xwui-multi-select-tag-close:hover {
    color: var(--text-primary, #333);
}

.xwui-multi-select-tag-more {
    background-color: var(--bg-tertiary, #e0e0e0);
}


/* basic/XWUIInputNativeSelect/XWUIInputNativeSelect.css */
/**
 * XWUIInputNativeSelect Component Styles
 * Native select wrapper
 */

.xwui-native-select-container {
    display: inline-block;
}

.xwui-native-select-container.xwui-native-select-full-width {
    width: 100%;
}

.xwui-native-select-label {
    display: block;
    margin-bottom: var(--spacing-xs, 4px);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.xwui-native-select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.xwui-native-select-wrapper:is(.xwui-native-select-s,.xwui-native-select-sm) .xwui-native-select {
    padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
    font-size: 0.875rem;
}

.xwui-native-select-wrapper:is(.xwui-native-select-m,.xwui-native-select-md) .xwui-native-select {
    padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
    font-size: 1rem;
}

.xwui-native-select-wrapper:is(.xwui-native-select-l,.xwui-native-select-lg) .xwui-native-select {
    padding: var(--spacing-md, 16px) var(--spacing-lg, 24px);
    font-size: 1.125rem;
}

.xwui-native-select {
    width: 100%;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--radius-sm, 6px);
    background-color: var(--bg-primary, #ffffff);
    color: var(--text-primary);
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.xwui-native-select:hover:not(:disabled) {
    border-color: var(--border-strong, rgba(0, 0, 0, 0.08));
}

.xwui-native-select:focus {
    outline: none;
    border-color: var(--accent-primary, #4f46e5);
    /* Focus ring uses the accent-primary-alpha token (20% alpha of current
       accent); legacy rgba fallback retained for browsers without color-mix. */
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
    box-shadow: 0 0 0 2px var(--accent-primary-alpha);
}

.xwui-native-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--bg-tertiary, #f1f3f5);
}

.xwui-native-select-wrapper.xwui-native-select-error .xwui-native-select {
    border-color: var(--status-error, #f44336);
}

.xwui-native-select-wrapper.xwui-native-select-error .xwui-native-select:focus {
    border-color: var(--status-error, #f44336);
    /* Error focus ring uses --accent-error-light (universal semantic). */
    box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.1);
    box-shadow: 0 0 0 2px var(--accent-error-light);
}

.xwui-native-select-helper-text {
    margin-top: var(--spacing-xs, 4px);
    font-size: 0.75rem;
    color: var(--text-secondary, #6c757d);
}

.xwui-native-select-error-text {
    margin-top: var(--spacing-xs, 4px);
    font-size: 0.75rem;
    color: var(--status-error, #f44336);
}


/* basic/XWUIInputNumber/XWUIInputNumber.css */
/**
 * XWUIInputNumber Component Styles
 */

/* Outer wrapper — makes the whole component span the card's width just like
   XWUIInputText does. Without this, the underlying .xwui-number-input would
   render as an inline-block capsule floating in the card. */
.xwui-number-input-container {
    display: block;
    width: 100%;
}

/* Label + helper mirror XWUIInputText's tokens so Number reads as a sibling
   in the same form (same gray, weight, sizes). */
.xwui-number-input-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-secondary);
}
.xwui-number-input-helper {
    margin-top: 0.4rem;
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-secondary);
}
.xwui-number-input-helper-error { color: var(--accent-error); }
.xwui-number-input-has-error .xwui-number-input-label { color: var(--accent-error); }
.xwui-number-input-has-error .xwui-number-input { border-color: var(--accent-error) !important; }

/* Leading numeric icon — same muted tone as XWUIInputText's leading visual. */
.xwui-number-input-leading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding-inline-start: 0.6rem;
    color: var(--text-tertiary);
}

/* Host wrapper for the synced xwui slider (XWUIInputSlider). It owns its own
   track/thumb/theming internally, so this rule only positions the host below
   the field — no accent-color/cursor here (those targeted the old native range). */
.xwui-number-input-slider {
    width: 100%;
    margin-top: 0.6rem;
}

/* Bordered box — matches XWUIInputText.xwui-input-text-container in
   radius, border, background and focus ring so the two components read as
   siblings in a form. Full-width flex row: minus at far left, centered
   value input, plus at far right. */
.xwui-number-input {
    display: flex;
    align-items: center;
    width: 100%;
    border: var(--border-input-width, var(--border-width-regular, 1.5px)) var(--border-input-style, solid) var(--border-input-color, var(--border-color, #d9d9d9));
    border-radius: var(--radius-input, var(--radius-md, 6px));
    background: var(--bg-primary, #ffffff);
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.xwui-number-input:hover {
    border-color: var(--border-strong, var(--accent-primary, #40a9ff));
}

.xwui-number-input:focus-within {
    border-color: var(--accent-primary, #1890ff);
    box-shadow: var(--glow-input-focus, var(--shadow-xs));
}

.xwui-number-input-disabled {
    background-color: var(--bg-secondary, #f5f5f5);
    cursor: not-allowed;
}
/* Readable disabled text (no muddy global opacity), matching XWUIInputText. */
.xwui-number-input-disabled .xwui-number-input-field {
    color: var(--text-secondary);
    -webkit-text-fill-color: var(--text-secondary);
    cursor: not-allowed;
}

/* −/+ buttons — square, flush with the input's top/bottom. Flex-shrink
   prevents them from being squeezed when the field grows. */
.xwui-number-input-control {
    flex-shrink: 0;
    width: 2.25rem;
    align-self: stretch;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-lg, 1.125rem);
    line-height: 1;
    color: var(--text-secondary, var(--control-text));
    user-select: none;
}

.xwui-number-input-control:hover:not(:disabled) {
    background-color: var(--bg-hover, rgba(0, 0, 0, 0.04));
    color: var(--accent-primary, #1890ff);
}

.xwui-number-input-control:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Value field — takes all remaining space between the two buttons and
   centers its text, so "10" sits exactly in the middle of the row. */
.xwui-number-input-field {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    padding: var(--spacing-sm, 0.625rem) var(--spacing-xs, 0.5rem);
    text-align: center;
    background: transparent;
    font-size: var(--font-size-base, 0.9375rem);
    color: var(--text-primary, var(--control-text));
}

/* Suppress the inner <input>'s focus ring — the outer .xwui-number-input
   already shows a focus indicator via border-color + box-shadow on
   :focus-within. Without this, both :focus (older browsers) and
   :focus-visible (modern browsers) stack their native outline on top of
   the container's ring, producing a double-border look. */
.xwui-number-input-field:focus,
.xwui-number-input-field:focus-visible {
    outline: none;
    box-shadow: none;
}

.xwui-number-input-field::-webkit-inner-spin-button,
.xwui-number-input-field::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.xwui-number-input-field[type=number] {
    -moz-appearance: textfield;
}

/* Size variants — min-height lets content + padding set the natural height
   instead of force-cropping the field. The md/medium size is aligned with
   XWUIInputText's medium (2.5rem / 40px) so the two components sit at the
   same baseline in a form. */
:is(.xwui-number-input-3xs,.xwui-number-input-xxxs) { min-height: 1.25rem; }
:is(.xwui-number-input-4xs,.xwui-number-input-xxxxs) { min-height: 1rem;   }
:is(.xwui-number-input-2xs,.xwui-number-input-xxs)  { min-height: 1.5rem;  }
.xwui-number-input-xs   { min-height: 2rem;    }
:is(.xwui-number-input-s,.xwui-number-input-sm)   { min-height: 2.25rem; }
:is(.xwui-number-input-m,.xwui-number-input-md)   { min-height: 2.5rem;  }
:is(.xwui-number-input-l,.xwui-number-input-lg)   { min-height: 2.75rem; }
.xwui-number-input-xl   { min-height: 3rem;    }
:is(.xwui-number-input-2xl,.xwui-number-input-xxl)  { min-height: 3.5rem;  }
:is(.xwui-number-input-3xl,.xwui-number-input-xxxl) { min-height: 4rem;    }
:is(.xwui-number-input-4xl,.xwui-number-input-xxxxl){ min-height: 5rem;    }

/* Legacy size aliases (match XWUIInputText's) */
.xwui-number-input-small  { min-height: 2.25rem; }
.xwui-number-input-medium { min-height: 2.5rem;  }
.xwui-number-input-large  { min-height: 2.75rem; }


/* basic/XWUIInputOTP/XWUIInputOTP.css */
/**
 * XWUIInputOTP Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/input/*.css (component-specific border widths)
 * - Roundness: theme/roundness/input/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-input-otp {
    display: flex;
    gap: var(--spacing-sm, 0.5rem);
    justify-content: center;
}

.xwui-input-otp-digit {
    width: 3rem;
    height: 3rem;
    text-align: center;
    /* Bolder 2px border for clearer per-digit cells (theme line colour). */
    border: var(--border-width-bold, 2px) var(--border-input-style, solid) var(--border-input-color, var(--border-color));
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: var(--radius-input, var(--radius-md, 0.625rem));
    font-size: var(--font-size-xl, 1.5rem);
    font-weight: var(--font-weight-bold, 700);
    transition: all 0.2s;
}

/* Muted dash in empty boxes — theme tertiary text. */
.xwui-input-otp-digit::placeholder {
    color: var(--text-tertiary, #adb5bd);
    font-weight: var(--font-weight-normal, 400);
}

.xwui-input-otp-digit:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-light, rgba(79, 70, 229, 0.15));
}

/* Size variants */
:is(.xwui-input-otp-s,.xwui-input-otp-sm) .xwui-input-otp-digit {
    width: 2.5rem;
    height: 2.5rem;
    font-size: var(--font-size-base, 1rem);
}

:is(.xwui-input-otp-l,.xwui-input-otp-lg) .xwui-input-otp-digit {
    width: 3.5rem;
    height: 3.5rem;
    font-size: var(--font-size-2xl, 1.5rem);
}


/* basic/XWUIInputParagraph/XWUIInputParagraph.css */
/**
 * XWUIInputParagraph Component Styles
 * Multi-line (paragraph) text input.
 */

.xwui-input-paragraph-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.375rem);
}

.xwui-input-paragraph-full-width {
    width: 100%;
}

.xwui-input-paragraph-label {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary);
}

.xwui-input-paragraph-required {
    color: var(--accent-error);
}

.xwui-input-paragraph {
    width: 100%;
    border-radius: var(--radius-input, var(--radius-md, 6px));
    font-family: var(--font-input-family, var(--font-family-base, inherit));
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    min-height: 80px;
}

.xwui-input-paragraph::placeholder {
    color: var(--text-tertiary);
}

.xwui-input-paragraph-outlined .xwui-input-paragraph {
    border: var(--border-input-width, 1.5px) solid var(--border-input-color, var(--border-color));
    background: var(--bg-primary);
}

.xwui-input-paragraph-outlined .xwui-input-paragraph:hover {
    border-color: var(--border-strong);
}

.xwui-input-paragraph-outlined.xwui-input-paragraph-focused .xwui-input-paragraph {
    border-color: var(--accent-primary);
    box-shadow: var(--glow-input-focus, var(--shadow-xs));
    outline: none;
}

.xwui-input-paragraph-filled .xwui-input-paragraph {
    border: var(--border-input-width, 1.5px) solid transparent;
    background: var(--bg-secondary);
}

.xwui-input-paragraph-filled .xwui-input-paragraph:hover {
    background: var(--bg-tertiary);
}

.xwui-input-paragraph-filled.xwui-input-paragraph-focused .xwui-input-paragraph {
    background: var(--bg-primary);
    border-color: var(--accent-primary);
    outline: none;
}

:is(.xwui-input-paragraph-s,.xwui-input-paragraph-sm) .xwui-input-paragraph {
    padding: var(--spacing-sm, 0.5rem) var(--spacing-sm, 0.75rem);
    font-size: var(--font-size-sm, 0.875rem);
}

:is(.xwui-input-paragraph-m,.xwui-input-paragraph-md) .xwui-input-paragraph {
    padding: var(--spacing-sm, 0.75rem) var(--spacing-sm, 0.875rem);
    font-size: var(--font-size-base, 0.9375rem);
}

:is(.xwui-input-paragraph-l,.xwui-input-paragraph-lg) .xwui-input-paragraph {
    padding: var(--spacing-md, 1rem);
    font-size: var(--font-size-base, 1rem);
}

.xwui-input-paragraph-helper {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-secondary);
}

.xwui-input-paragraph-helper-error {
    color: var(--accent-error);
}

.xwui-input-paragraph-format-feedback {
    font-size: var(--font-size-xs, 0.75rem);
}

.xwui-input-paragraph-format-feedback--valid {
    color: var(--accent-success, #198754);
}

.xwui-input-paragraph-format-feedback--invalid {
    color: var(--accent-error);
}

.xwui-input-paragraph-format-valid:not(.xwui-input-paragraph-error) .xwui-input-paragraph {
    border-color: var(--accent-success, #198754);
}

.xwui-input-paragraph-format-invalid:not(.xwui-input-paragraph-error) .xwui-input-paragraph {
    border-color: var(--accent-error);
}

.xwui-input-paragraph-error .xwui-input-paragraph {
    border-color: var(--accent-error) !important;
}

.xwui-input-paragraph-error .xwui-input-paragraph-label {
    color: var(--accent-error);
}

.xwui-input-paragraph-disabled .xwui-input-paragraph {
    background: var(--bg-secondary);
    cursor: not-allowed;
    opacity: 0.6;
}

/* basic/XWUIInputPassword/XWUIInputPassword.css */
/**
 * XWUIInputPassword Component Styles
 */

.xwui-password-input-container {
    /* Container has no specific styles */
}

.xwui-password-input-wrapper {
    /* Wrapper for the input */
}

/* Strength meter — a 4-segment bar + a label. Segment fill colour follows the
   level (error / warning / success theme tokens); empty segments are the
   neutral track colour. */
.xwui-password-strength-meter {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.xwui-password-strength-bars {
    display: flex;
    gap: 0.35rem;
}

.xwui-password-strength-segment {
    flex: 1;
    height: 4px;
    border-radius: 9999px;
    background: var(--bg-tertiary, rgba(0, 0, 0, 0.08));
    transition: background-color 0.2s ease;
}

.xwui-password-strength-label {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-secondary);
}

/* Filled-segment colour by level. */
.xwui-password-strength-weak .xwui-password-strength-segment-filled {
    background: var(--accent-error, #ef4444);
}
.xwui-password-strength-weak .xwui-password-strength-label {
    color: var(--accent-error, #ef4444);
}

.xwui-password-strength-medium .xwui-password-strength-segment-filled {
    background: var(--accent-warning, #f59e0b);
}
.xwui-password-strength-medium .xwui-password-strength-label {
    color: var(--accent-warning, #f59e0b);
}

.xwui-password-strength-strong .xwui-password-strength-segment-filled {
    background: var(--accent-success, #10b981);
}
.xwui-password-strength-strong .xwui-password-strength-label {
    color: var(--accent-success, #10b981);
}

/* basic/XWUIInputPhone/XWUIInputPhone.css */
/* XWUIInputPhone - phone-number input with country dial-code picker */

.xwui-input-phone {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  font-family: var(--font-body, inherit);
  color: var(--text-primary);
  width: 100%;
  max-width: 22rem;
}

.xwui-input-phone-disabled { opacity: 0.6; pointer-events: none; }

/* Sizes */
:is(.xwui-input-phone-s,.xwui-input-phone-sm) { font-size: 0.8125rem; }
:is(.xwui-input-phone-m,.xwui-input-phone-md) { font-size: 0.9375rem; }
:is(.xwui-input-phone-l,.xwui-input-phone-lg) { font-size: 1.0625rem; }

/* Wrapper: picker + input together */
.xwui-input-phone-wrap {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-primary);
  overflow: hidden;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.xwui-input-phone-wrap:focus-within {
  border-color: var(--role-primary-bg, #337ea9);
  box-shadow: 0 0 0 2px var(--role-primary-bg, rgba(51,126,169,0.20));
}

/* Country picker button */
.xwui-input-phone-picker {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.5rem;
  background: var(--bg-elevated);
  border: none;
  border-right: 1px solid var(--border-light, var(--border-color));
  font: inherit;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.xwui-input-phone-picker:disabled { cursor: not-allowed; }
.xwui-input-phone-picker:hover:not(:disabled) { background: var(--bg-hover); }

.xwui-input-phone-flag { font-size: 1.05em; line-height: 1; }
.xwui-input-phone-dial { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.xwui-input-phone-caret { color: var(--text-tertiary); font-size: 0.7em; }

/* Number input */
.xwui-input-phone-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.375rem 0.5rem;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  outline: none;
  font-variant-numeric: tabular-nums;
}
.xwui-input-phone-input::placeholder { color: var(--text-tertiary); }
.xwui-input-phone-input-invalid { color: var(--role-danger-bg, #b91c1c); }

/* Picker dropdown list */
.xwui-input-phone-list {
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0.25rem 0 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 4px);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0,0,0,0.10));
  z-index: 10;
  min-width: 14rem;
  max-height: 16rem;
  overflow: auto;
}
.xwui-input-phone-list[hidden] { display: none; }

.xwui-input-phone-list-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.375rem 0.5rem;
  border-radius: var(--radius-xs, 3px);
  cursor: pointer;
}
.xwui-input-phone-list-item:hover,
.xwui-input-phone-list-item:focus-visible { background: var(--bg-hover); outline: none; }
.xwui-input-phone-list-item-selected { background: var(--bg-active); }

.xwui-input-phone-list-item .xwui-input-phone-name { color: var(--text-primary); }
.xwui-input-phone-list-item .xwui-input-phone-dial { color: var(--text-secondary); }

/* basic/XWUIInputPicker/XWUIInputPicker.css */
/* Styles for XWUIInputPicker. */

.xwui-input-picker-container {
    display: block;
    width: 100%;
}

.xwui-input-picker {
    display: block;
    width: 100%;
}

.xwui-input-picker-input-wrapper {
    display: flex;
    align-items: stretch;
    gap: 6px;
    width: 100%;
}

.xwui-input-picker-input-wrapper > :last-child {
    flex: 1 1 auto;
    min-width: 0;
}

.xwui-input-picker-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
    min-width: 36px;
    width: 36px;
    height: auto;
    align-self: stretch;
    background: var(--xwui-color-surface, transparent);
    color: var(--xwui-color-on-surface, currentColor);
    border: 1px solid var(--xwui-color-outline, rgba(0, 0, 0, 0.18));
    border-radius: var(--xwui-roundness-md, 6px);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.xwui-input-picker-icon:hover {
    background: var(--xwui-color-surface-hover, rgba(0, 0, 0, 0.04));
    border-color: var(--xwui-color-outline-strong, rgba(0, 0, 0, 0.28));
}

.xwui-input-picker-icon:focus-visible {
    outline: 2px solid var(--xwui-color-focus, #4f46e5);
    outline-offset: 2px;
}

.xwui-input-picker-icon:active {
    background: var(--xwui-color-surface-active, rgba(0, 0, 0, 0.08));
}

.xwui-input-picker-icon[disabled],
.xwui-input-picker-icon[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
}

.xwui-input-picker-icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

.xwui-input-picker-picker-container {
    margin-top: 8px;
}

/* basic/XWUIInputRadioGroup/XWUIInputRadioGroup.css */
/**
 * XWUIInputRadioGroup Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Typography: theme/typography/*.css
 */

.xwui-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.5rem);
}

.xwui-radio-group-label {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary, #212529);
    margin-bottom: var(--spacing-xs, 0.25rem);
}

.xwui-radio-options {
    display: flex;
    gap: var(--spacing-sm, 0.75rem);
}

.xwui-radio-group-vertical .xwui-radio-options {
    flex-direction: column;
}

.xwui-radio-group-horizontal .xwui-radio-options {
    flex-direction: row;
    flex-wrap: wrap;
}

/* Individual radio */
.xwui-radio {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--spacing-sm, 0.625rem);
    cursor: pointer;
    user-select: none;
}

.xwui-radio-disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Hidden input */
.xwui-radio-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Visual radio */
.xwui-radio-visual {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--border-control-width, var(--border-width-thick, 2px)) var(--border-control-style, solid) var(--border-control-color, var(--border-color, #dee2e6));
    border-radius: 50%;
    background: var(--bg-primary, #ffffff);
    transition: all 0.15s ease;
}

.xwui-radio-dot {
    border-radius: 50%;
    /* Layered fallback chain mirrors XWUICheckbox's check-icon:
       --role-primary-fg is the designed pairing for accent-primary backgrounds
       (white on every theme); --text-inverse alone is wrong on dark themes
       because it's near-black (meant for "text on a light surface") and would
       leave the dot nearly invisible on the indigo/azure checked fill. */
    background: var(--role-primary-fg, var(--text-inverse, #ffffff));
    transform: scale(0);
    transition: transform 0.15s ease;
}

/* Size variants */
:is(.xwui-radio-group-s,.xwui-radio-group-sm) .xwui-radio-visual {
    width: 16px;
    height: 16px;
}

:is(.xwui-radio-group-s,.xwui-radio-group-sm) .xwui-radio-dot {
    width: 6px;
    height: 6px;
}

:is(.xwui-radio-group-m,.xwui-radio-group-md) .xwui-radio-visual {
    width: 20px;
    height: 20px;
}

:is(.xwui-radio-group-m,.xwui-radio-group-md) .xwui-radio-dot {
    width: 8px;
    height: 8px;
}

:is(.xwui-radio-group-l,.xwui-radio-group-lg) .xwui-radio-visual {
    width: 24px;
    height: 24px;
}

:is(.xwui-radio-group-l,.xwui-radio-group-lg) .xwui-radio-dot {
    width: 10px;
    height: 10px;
}

/* Checked state */
.xwui-radio-input:checked + .xwui-radio-visual {
    background: var(--accent-primary, #4f46e5);
    border-color: var(--accent-primary, #4f46e5);
    box-shadow: var(--glow-radio-selected, none);
}

.xwui-radio-input:checked + .xwui-radio-visual .xwui-radio-dot {
    transform: scale(1);
}

/* Focus state */
.xwui-radio-input:focus-visible + .xwui-radio-visual {
    box-shadow: var(--glow-radio-focus, var(--shadow-xs));
}

/* Hover state */
.xwui-radio:hover .xwui-radio-visual {
    border-color: var(--accent-primary, #4f46e5);
}

/* Color variants */
.xwui-radio-group-success .xwui-radio-input:checked + .xwui-radio-visual {
    background: var(--accent-success, #10b981);
    border-color: var(--accent-success, #10b981);
}

.xwui-radio-group-warning .xwui-radio-input:checked + .xwui-radio-visual {
    background: var(--accent-warning, #f59e0b);
    border-color: var(--accent-warning, #f59e0b);
}

.xwui-radio-group-error .xwui-radio-input:checked + .xwui-radio-visual {
    background: var(--accent-error, #ef4444);
    border-color: var(--accent-error, #ef4444);
}

/* Text content */
.xwui-radio-text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xxs, 0.125rem);
}

.xwui-radio-label {
    font-size: var(--font-size-base, 0.9375rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary, #212529);
    line-height: 1.4;
}

.xwui-radio-description {
    font-size: var(--font-size-sm, 0.8125rem);
    color: var(--text-secondary, #6c757d);
    line-height: 1.4;
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */


/* basic/XWUIInputRangeSlider/XWUIInputRangeSlider.css */
/**
 * XWUIInputRangeSlider Component Styles
 * Inherits from XWUIInputSlider
 */

.xwui-range-slider-container {
    /* Container has no specific styles - inherits from XWUIInputSlider */
}


/* basic/XWUIInputRating/XWUIInputRating.css */
/**
 * XWUIInputRating Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Typography: theme/typography/*.css
 */

.xwui-rating-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.5rem);
}

.xwui-rating-label {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary);
}

.xwui-rating {
    display: inline-flex;
    gap: var(--spacing-xs, 0.25rem);
    align-items: center;
}

.xwui-rating-readonly {
    pointer-events: none;
}

/* Each slot is two icons stacked · the BG (gray) is always visible,
 * the FG (accent) is absolutely layered on top and its clip-path is
 * animated to reveal 0 / 50% / 100% based on the slot state. */
.xwui-rating-star {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    transition: transform 0.2s;
    /* Reserve space for the absolute FG · the BG defines the box size. */
    line-height: 0;
}

.xwui-rating-star:hover:not(.xwui-rating-readonly .xwui-rating-star) {
    transform: scale(1.1);
}

.xwui-rating-star-bg,
.xwui-rating-star-fg {
    display: inline-flex;
    transition: clip-path 0.15s ease, color 0.2s;
}
.xwui-rating-star-bg {
    color: var(--text-tertiary);
}
.xwui-rating-star-fg {
    position: absolute;
    inset: 0;
    color: var(--accent-warning);
    /* Hidden by default · revealed by the slot's state class. */
    clip-path: inset(0 100% 0 0);
    pointer-events: none;
}
.xwui-rating-star-full .xwui-rating-star-fg {
    clip-path: inset(0 0 0 0);
}
.xwui-rating-star-half .xwui-rating-star-fg {
    clip-path: inset(0 50% 0 0);
}

.xwui-rating-star svg {
    width: 1.5em;
    height: 1.5em;
}

/* Size variants */
:is(.xwui-rating-s,.xwui-rating-sm) .xwui-rating-star svg {
    width: 1.25em;
    height: 1.25em;
}

:is(.xwui-rating-l,.xwui-rating-lg) .xwui-rating-star svg {
    width: 2em;
    height: 2em;
}


/* basic/XWUIInputRecurrencePicker/XWUIInputRecurrencePicker.css */
/**
 * XWUIInputRecurrencePicker Component Styles
 */

.xwui-recurrence-picker {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 1rem);
    padding: var(--spacing-md, 1rem);
}

.xwui-recurrence-picker-label {
    display: block;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary, #212529);
    margin-bottom: var(--spacing-xs, 0.25rem);
}

.xwui-recurrence-picker-type,
.xwui-recurrence-picker-interval {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.25rem);
}

.xwui-recurrence-picker-interval {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
}

.xwui-recurrence-picker-unit {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary, #6c757d);
}

.xwui-recurrence-picker-days {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.25rem);
}

.xwui-recurrence-picker-days-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm, 0.5rem);
}

.xwui-recurrence-picker-day-of-month {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.25rem);
}

.xwui-recurrence-picker-preview {
    margin-top: var(--spacing-sm, 0.5rem);
}


/* basic/XWUIInputSegmentedControl/XWUIInputSegmentedControl.css */
/**
 * XWUIInputSegmentedControl Component Styles
 */

.xwui-segmented-control-container {
    /* Container has no specific styles */
}

.xwui-segmented-control {
    display: inline-flex;
    position: relative;
    background-color: var(--bg-secondary, #f0f0f0);
    border-radius: var(--radius-md, 6px);
    padding: 2px;
}

.xwui-segmented-control-block {
    display: flex;
    width: 100%;
}

.xwui-segmented-control-buttons {
    display: flex;
    position: relative;
    z-index: 1;
}

.xwui-segmented-control-button {
    flex: 1;
    border: none;
    background: transparent;
    padding: 4px 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: var(--font-size-sm, 14px);
    color: var(--text-secondary, #666);
    white-space: nowrap;
}

.xwui-segmented-control-button:hover:not(:disabled):not(.xwui-segmented-control-button-active) {
    color: var(--text-primary, #333);
}

.xwui-segmented-control-button-active {
    color: var(--accent-primary, #1890ff);
    font-weight: var(--font-weight-medium, 500);
}

.xwui-segmented-control-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.xwui-segmented-control-indicator {
    position: absolute;
    top: 2px;
    bottom: 2px;
    background-color: var(--bg-primary, #ffffff);
    border-radius: var(--radius-sm, 4px);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
    transition: left 0.3s ease, width 0.3s ease;
    z-index: 0;
    /* Start hidden (width: 0 is how JS also detects "not laid out yet") so
       it doesn't flash at the wrapper's left:0 / width:0 corner before the
       first updateSelection() writes real coordinates. */
    left: 0;
    width: 0;
}

/* Suppress the left/width transition on the very first paint so the
   indicator doesn't animate from a stale (pre-layout) position to the
   correct one. The JS controller removes this class after a double-rAF
   + fonts.ready settle. */
.xwui-segmented-control--no-transition .xwui-segmented-control-indicator {
    transition: none !important;
}

/* Size variants (canonical 9-step scale) */
:is(.xwui-segmented-control-3xs,.xwui-segmented-control-xxxs) { font-size: 7px; }
:is(.xwui-segmented-control-4xs,.xwui-segmented-control-xxxxs) { font-size: 3.5px; }
:is(.xwui-segmented-control-3xs,.xwui-segmented-control-xxxs) .xwui-segmented-control-button { padding: 1px 4px; }
:is(.xwui-segmented-control-4xs,.xwui-segmented-control-xxxxs) .xwui-segmented-control-button { padding: 1px 2px; }
:is(.xwui-segmented-control-2xs,.xwui-segmented-control-xxs) { font-size: 9px; }
:is(.xwui-segmented-control-2xs,.xwui-segmented-control-xxs) .xwui-segmented-control-button { padding: 1px 5px; }
.xwui-segmented-control-xs { font-size: 10px; }
.xwui-segmented-control-xs .xwui-segmented-control-button { padding: 1px 6px; }
:is(.xwui-segmented-control-s,.xwui-segmented-control-sm) { font-size: 12px; }
:is(.xwui-segmented-control-s,.xwui-segmented-control-sm) .xwui-segmented-control-button { padding: 2px 8px; }
:is(.xwui-segmented-control-m,.xwui-segmented-control-md) { font-size: 14px; }
:is(.xwui-segmented-control-m,.xwui-segmented-control-md) .xwui-segmented-control-button { padding: 4px 12px; }
:is(.xwui-segmented-control-l,.xwui-segmented-control-lg) { font-size: 16px; }
:is(.xwui-segmented-control-l,.xwui-segmented-control-lg) .xwui-segmented-control-button { padding: 6px 16px; }
.xwui-segmented-control-xl { font-size: 18px; }
.xwui-segmented-control-xl .xwui-segmented-control-button { padding: 8px 20px; }
:is(.xwui-segmented-control-2xl,.xwui-segmented-control-xxl) { font-size: 23px; }
:is(.xwui-segmented-control-2xl,.xwui-segmented-control-xxl) .xwui-segmented-control-button { padding: 10px 26px; }
:is(.xwui-segmented-control-3xl,.xwui-segmented-control-xxxl) { font-size: 29px; }
:is(.xwui-segmented-control-4xl,.xwui-segmented-control-xxxxl) { font-size: 46.4px; }
:is(.xwui-segmented-control-3xl,.xwui-segmented-control-xxxl) .xwui-segmented-control-button { padding: 13px 32px; }
:is(.xwui-segmented-control-4xl,.xwui-segmented-control-xxxxl) .xwui-segmented-control-button { padding: 20.8px 51.2px; }

/* Legacy size aliases */
.xwui-segmented-control-small { font-size: 12px; }
.xwui-segmented-control-small .xwui-segmented-control-button { padding: 2px 8px; }
.xwui-segmented-control-large { font-size: 16px; }
.xwui-segmented-control-large .xwui-segmented-control-button { padding: 6px 16px; }

.xwui-segmented-control-disabled {
    opacity: 0.6;
    pointer-events: none;
}

.xwui-segmented-control-icon {
    display: inline-flex;
    align-items: center;
}


/* basic/XWUIInputSelect/XWUIInputSelect.css */
/**
 * XWUIInputSelect Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/input/*.css (component-specific border widths)
 * - Roundness: theme/roundness/input/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-select-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.375rem);
    position: relative;
}

.xwui-select-full-width {
    width: 100%;
}

/* Label */
.xwui-select-label {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    font-family: var(--font-label-family, var(--font-family-base, sans-serif));
    color: var(--text-primary, #212529);
}

/* Trigger */
.xwui-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-radius: var(--radius-input, var(--radius-md, 6px));
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Outlined variant */
.xwui-select-outlined .xwui-select-trigger {
    border: var(--border-input-width, var(--border-width-regular, 1.5px)) var(--border-input-style, solid) var(--border-input-color, var(--border-color, #dee2e6));
    background: var(--bg-primary, #ffffff);
}

.xwui-select-outlined .xwui-select-trigger:hover {
    border-color: var(--border-strong, #adb5bd);
}

.xwui-select-outlined.xwui-select-open .xwui-select-trigger {
    border-color: var(--accent-primary, #4f46e5);
    box-shadow: var(--shadow-xs);
}

/* Filled variant */
.xwui-select-filled .xwui-select-trigger {
    border: var(--border-input-width, var(--border-width-regular, 1.5px)) var(--border-input-style, solid) transparent;
    background: var(--bg-secondary, #f8f9fa);
}

.xwui-select-filled .xwui-select-trigger:hover {
    background: var(--bg-tertiary, #f1f3f5);
}

.xwui-select-filled.xwui-select-open .xwui-select-trigger {
    background: var(--bg-primary, #ffffff);
    border-color: var(--accent-primary, #4f46e5);
}

/* Size variants — canonical 11-step scale: xxxxs|xxxs|xxs|xs|sm|md|lg|xl|xxl|xxxl|xxxxl.
   Smaller-than-sm sizes are needed for dense grids/cells; larger sizes mirror
   the rest of the xwui scale. */
:is(.xwui-select-4xs,.xwui-select-xxxxs) .xwui-select-trigger {
    padding: 1px 5px;
    font-size: 0.5rem;
    min-height: 18px;
}
:is(.xwui-select-3xs,.xwui-select-xxxs) .xwui-select-trigger {
    padding: 1px 6px;
    font-size: 0.5625rem;
    min-height: 20px;
}
:is(.xwui-select-2xs,.xwui-select-xxs) .xwui-select-trigger {
    padding: 2px 7px;
    font-size: 0.625rem;
    min-height: 22px;
}
.xwui-select-xs .xwui-select-trigger {
    padding: 3px 8px;
    font-size: 0.75rem;
    min-height: 26px;
}
:is(.xwui-select-s,.xwui-select-sm) .xwui-select-trigger {
    padding: var(--spacing-xs, 0.375rem) var(--spacing-sm, 0.75rem);
    font-size: var(--font-size-sm, 0.875rem);
    min-height: 32px;
}

:is(.xwui-select-m,.xwui-select-md) .xwui-select-trigger {
    padding: var(--spacing-sm, 0.625rem) var(--spacing-sm, 0.875rem);
    font-size: var(--font-size-base, 0.9375rem);
    min-height: 40px;
}

:is(.xwui-select-l,.xwui-select-lg) .xwui-select-trigger {
    padding: var(--spacing-sm, 0.875rem) var(--spacing-md, 1rem);
    font-size: var(--font-size-base, 1rem);
    min-height: 48px;
}
.xwui-select-xl .xwui-select-trigger {
    padding: 1rem 1.25rem;
    font-size: 1.125rem;
    min-height: 56px;
}
:is(.xwui-select-2xl,.xwui-select-xxl) .xwui-select-trigger {
    padding: 1.125rem 1.375rem;
    font-size: 1.25rem;
    min-height: 64px;
}
:is(.xwui-select-3xl,.xwui-select-xxxl) .xwui-select-trigger {
    padding: 1.25rem 1.5rem;
    font-size: 1.5rem;
    min-height: 72px;
}
:is(.xwui-select-4xl,.xwui-select-xxxxl) .xwui-select-trigger {
    padding: 1.5rem 1.75rem;
    font-size: 1.75rem;
    min-height: 84px;
}

/* Value display */
.xwui-select-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary, #212529);
}

.xwui-select-trigger:not(:has(.xwui-select-value:not(:empty))) .xwui-select-value {
    color: var(--text-tertiary, #adb5bd);
}

/* Icons */
.xwui-select-icons {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 0.25rem);
    flex-shrink: 0;
}

.xwui-select-arrow {
    display: flex;
    align-items: center;
    color: var(--text-secondary, #6c757d);
    transition: transform 0.2s;
}

.xwui-select-arrow svg {
    width: 16px;
    height: 16px;
}

.xwui-select-open .xwui-select-arrow {
    transform: rotate(180deg);
}

.xwui-select-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-tertiary, #adb5bd);
    transition: color 0.2s;
}

.xwui-select-clear:hover {
    color: var(--text-secondary, #6c757d);
}

.xwui-select-clear svg {
    width: 14px;
    height: 14px;
}

/* Dropdown — floats above every other card / row / table.
   The `.xwui-select-open` rule below promotes the host element into its
   own stacking context so the panel clears its siblings even when the
   containing column uses grid/flex layout. */
.xwui-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--bg-primary, #ffffff);
    border: var(--border-input-width, var(--border-width-regular, 1.5px)) var(--border-input-style, solid) var(--border-input-color, var(--border-color, #dee2e6));
    border-radius: var(--radius-input, var(--radius-md, 6px));
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.15));
    z-index: 9999;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}

.xwui-select-open {
    /* Any neighbouring card / row normally shares z-index: 0, so the
       dropdown's z-index only wins within the select's own stacking
       context. Promoting the open host here moves the whole dropdown
       branch above the siblings. */
    position: relative;
    z-index: 9999;
}
.xwui-select-open .xwui-select-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* Host element — xwui-input-select — when its inner wrapper is open
   should also escape any parent's overflow clip. */
xwui-input-select:has(.xwui-select-open),
xwui-input-select.xwui-open {
    position: relative;
    z-index: 9999;
}

/* Search */
.xwui-select-search {
    padding: var(--spacing-sm, 0.5rem);
    border-bottom: 1px solid var(--border-color, #dee2e6);
}

.xwui-select-search-input {
    width: 100%;
    padding: var(--spacing-sm, 0.5rem) var(--spacing-sm, 0.75rem);
    border: var(--border-input-width, var(--border-width-regular, 1.5px)) var(--border-input-style, solid) var(--border-input-color, var(--border-color, #dee2e6));
    border-radius: var(--radius-input, var(--radius-sm, 4px));
    font-size: var(--font-size-sm, 0.875rem);
    outline: none;
}

.xwui-select-search-input:focus {
    border-color: var(--accent-primary, #4f46e5);
}

/* Options */
.xwui-select-options {
    overflow-y: auto;
    max-height: inherit;
}

.xwui-select-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--spacing-sm, 0.625rem) var(--spacing-sm, 0.875rem);
    cursor: pointer;
    transition: background 0.1s;
}

.xwui-select-option:hover {
    background: var(--bg-hover, #f8f9fa);
}

.xwui-select-option-selected {
    background: var(--bg-hover);
}

.xwui-select-option-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.xwui-select-option-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: var(--border-input-width, var(--border-width-thick, 2px)) var(--border-input-style, solid) var(--border-input-color, var(--border-color, #dee2e6));
    border-radius: var(--radius-input, var(--radius-xs, 3px));
    color: var(--text-inverse);
    flex-shrink: 0;
}

.xwui-select-option-selected .xwui-select-option-checkbox {
    background: var(--accent-primary, #4f46e5);
    border-color: var(--accent-primary, #4f46e5);
}

.xwui-select-option-checkbox svg {
    width: 12px;
    height: 12px;
}

.xwui-select-option-label {
    flex: 1;
    color: var(--text-primary, #212529);
}

.xwui-select-option-check {
    color: var(--accent-primary, #4f46e5);
}

.xwui-select-option-check svg {
    width: 16px;
    height: 16px;
}

/* Groups */
.xwui-select-group {
    padding-top: var(--spacing-sm, 0.5rem);
}

.xwui-select-group:first-child {
    padding-top: 0;
}

.xwui-select-group-label {
    padding: var(--spacing-sm, 0.5rem) var(--spacing-sm, 0.875rem);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-secondary, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Empty state */
.xwui-select-empty {
    padding: var(--spacing-md, 1rem);
    text-align: center;
    color: var(--text-secondary, #6c757d);
}

/* Helper text */
.xwui-select-helper {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-secondary, #6c757d);
}

.xwui-select-helper-error {
    color: var(--accent-error, #ef4444);
}

/* Error state */
.xwui-select-error .xwui-select-trigger {
    border-color: var(--accent-error, #ef4444) !important;
}

/* Disabled state */
.xwui-select-disabled .xwui-select-trigger {
    background: var(--bg-secondary, #f8f9fa);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */


/* Per-option logo/image (XWUIInputSelectOption.image) — dropdown rows + selected
   trigger. Ported from XWUISelect. Inert unless an option supplies `image`. */
.xwui-select-option-image {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    object-fit: contain;
    border-radius: 4px;
}
.xwui-select-value {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.xwui-select-value-image {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    object-fit: contain;
    border-radius: 4px;
}
.xwui-select-value-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.xwui-select-value-placeholder {
    color: var(--text-tertiary, #adb5bd);
}


/* basic/XWUIInputSignaturePad/XWUIInputSignaturePad.css */
/**
 * XWUIInputSignaturePad Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 */

.xwui-signature-pad-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.xwui-signature-pad {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--bg-primary, #ffffff);
    border: var(--border-width-regular, 1px) solid var(--border-color, #e0e0e0);
    border-radius: var(--radius-md, 8px);
}

/* Canvas */
.xwui-signature-pad-canvas {
    width: 100%;
    height: 300px;
    border: var(--border-width-regular, 1px) solid var(--border-color, #e0e0e0);
    border-radius: var(--radius-sm, 4px);
    cursor: crosshair;
    touch-action: none;
}

.xwui-signature-pad-canvas:active {
    cursor: crosshair;
}

/* Controls */
.xwui-signature-pad-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 0.5rem);
    padding: var(--spacing-sm, 0.75rem);
    border-top: var(--border-width-regular, 1px) solid var(--border-color, #e0e0e0);
    background: var(--bg-secondary, #f8f9fa);
}


/* basic/XWUIInputSlider/XWUIInputSlider.css */
/**
 * XWUIInputSlider Component Styles - Production Quality
 * 100% Styles System Integration
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Theme: theme/roundness/slider/*.css (MANDATORY - provides slider roundness variables)
 * - Typography: theme/typography/*.css
 */

/* ============================================
   WRAPPER
   ============================================ */
.xwui-slider {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
    font-family: var(--font-family-base);
}

/* Label */
.xwui-slider__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary, var(--control-text));
    margin-bottom: var(--spacing-xs);
}

/* Title/Direction label */
.xwui-slider__title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-inverse, #ffffff);
    text-align: center;
    margin-bottom: var(--spacing-xs);
    padding: var(--spacing-xs);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.xwui-slider--vertical .xwui-slider__title {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    margin-bottom: 0;
    margin-right: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-xs);
}

/* ============================================
   CONTAINER & TRACK WRAPPER
   ============================================ */
.xwui-slider__container {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.xwui-slider__icons {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
}

.xwui-slider__track-wrapper {
    flex: 1;
    position: relative;
    padding: var(--spacing-sm) 0;
}

/* Icon */
.xwui-slider__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-inverse, #ffffff);
    font-size: var(--font-size-base);
    flex-shrink: 0;
}

/* Icon with better contrast - use white by default, allow override */
.xwui-slider__icon svg {
    color: var(--text-inverse, #ffffff);
    fill: currentColor;
    stroke: currentColor;
}

.xwui-slider--disabled .xwui-slider__icon {
    opacity: 0.5;
}

/* ============================================
   RAIL & TRACK
   ============================================ */
.xwui-slider__rail {
    position: relative;
    width: 100%;
    height: 100%;
}

.xwui-slider__track {
    position: relative;
    width: 100%;
    /* Track background — uses a tinted overlay of --text-primary instead of
       --bg-secondary. Reason: on every dark theme (dark, night, azure-forge,
       catppuccin-*), --bg-secondary is defined as the same value as --bg-card,
       which made the unfilled rail invisible against the card surface.
       color-mix on --text-primary produces a subtle contrast that works on
       both light and dark themes. The var() line is a fallback for browsers
       without color-mix support. */
    background: var(--bg-tertiary, var(--bg-secondary, var(--control-bg)));
    background: color-mix(in srgb, var(--text-primary) 12%, transparent);
    border-radius: var(--radius-slider-track, var(--radius-control, var(--radius-sm)));
    cursor: pointer;
    touch-action: none;
    user-select: none;
}

/* Size variants - Track height */
:is(.xwui-slider--s,.xwui-slider--sm) .xwui-slider__track {
    height: 4px;
}

:is(.xwui-slider--m,.xwui-slider--md) .xwui-slider__track {
    height: 6px;
}

:is(.xwui-slider--l,.xwui-slider--lg) .xwui-slider__track {
    height: 8px;
}

/* Vertical orientation - ensure parent container has height */
:has(> .xwui-slider--vertical) {
    height: 100%;
    display: flex;
    align-items: stretch;
}

.xwui-slider--vertical {
    flex-direction: row;
    align-items: stretch;
    height: 100%;
    width: auto;
    min-height: 200px;
}

.xwui-slider--vertical .xwui-slider__label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    margin-bottom: 0;
    margin-right: var(--spacing-xs);
    flex-shrink: 0;
}

.xwui-slider--vertical .xwui-slider__container {
    flex-direction: column;
    width: auto;
    height: 100%;
    min-height: 200px;
}

.xwui-slider--vertical .xwui-slider__icons {
    flex-direction: column;
    width: auto;
    height: 100%;
}

.xwui-slider--vertical .xwui-slider__track-wrapper {
    height: 100%;
    width: auto;
    padding: 0 var(--spacing-sm);
    flex: 1;
}

.xwui-slider--vertical .xwui-slider__rail {
    height: 100%;
    width: auto;
}

.xwui-slider--vertical .xwui-slider__track {
    width: 6px;
    height: 100%;
}

.xwui-slider--vertical:is(.xwui-slider--s,.xwui-slider--sm) .xwui-slider__track {
    width: 4px;
}

.xwui-slider--vertical:is(.xwui-slider--l,.xwui-slider--lg) .xwui-slider__track {
    width: 8px;
}

/* ============================================
   FILL (Active portion)
   ============================================ */
.xwui-slider__fill {
    position: absolute;
    background: var(--accent-primary, var(--control-active));
    border-radius: var(--radius-slider-track, var(--radius-control, var(--radius-sm)));
    transition: all 0.2s ease;
    pointer-events: none;
}

/* Horizontal fill */
.xwui-slider__fill {
    left: 0;
    top: 0;
    height: 100%;
}

/* Vertical fill */
.xwui-slider--vertical .xwui-slider__fill {
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
}

/* Color variants */
.xwui-slider--primary .xwui-slider__fill {
    background: var(--accent-primary, var(--control-active));
    box-shadow: var(--glow-slider-track-active, none);
}

.xwui-slider--secondary .xwui-slider__fill {
    background: var(--accent-light, var(--accent-primary));
}

.xwui-slider--success .xwui-slider__fill {
    background: var(--accent-success);
}

.xwui-slider--warning .xwui-slider__fill {
    background: var(--accent-warning);
}

.xwui-slider--error .xwui-slider__fill {
    background: var(--accent-error);
}

.xwui-slider--info .xwui-slider__fill {
    background: var(--accent-primary, var(--control-active));
}

/* Inverted track */
.xwui-slider--track-inverted .xwui-slider__fill {
    background: var(--bg-secondary, var(--control-bg));
}

.xwui-slider--track-inverted.xwui-slider--primary .xwui-slider__fill {
    background: var(--accent-primary, var(--control-active));
    opacity: 0.3;
}

/* ============================================
   THUMB
   ============================================ */
.xwui-slider__thumb {
    position: absolute;
    background: var(--bg-primary, var(--control-bg));
    border: var(--border-width-thick) solid var(--accent-primary, var(--control-active));
    border-radius: var(--radius-slider-thumb, 50%);
    cursor: grab;
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
    z-index: 1;
    touch-action: none;
    user-select: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Size variants - Thumb */
:is(.xwui-slider--s,.xwui-slider--sm) .xwui-slider__thumb {
    width: 14px;
    height: 14px;
}

:is(.xwui-slider--m,.xwui-slider--md) .xwui-slider__thumb {
    width: 18px;
    height: 18px;
}

:is(.xwui-slider--l,.xwui-slider--lg) .xwui-slider__thumb {
    width: 22px;
    height: 22px;
}

/* Horizontal thumb positioning */
.xwui-slider__thumb {
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Vertical thumb positioning */
.xwui-slider--vertical .xwui-slider__thumb {
    left: 50%;
    transform: translate(-50%, 50%);
}

/* Hover state · expanding themed halo (accent color at 50% alpha). The
   bigger ring appears around the thumb on hover; the color tracks the
   active theme because it's built off --accent-primary.
   WHY: CSS custom-property tokens let consumers override only the halo
   sizes from site-level CSS without needing !important specificity hacks. */
.xwui-slider__thumb:hover:not(:disabled),
.xwui-slider__thumb--hovered {
    box-shadow: 0 0 0 var(--xwui-slider-thumb-halo-size-hover, 10px) var(--xwui-slider-thumb-halo-color, color-mix(in srgb, var(--accent-primary) 50%, transparent));
}

/* Focus state */
.xwui-slider__thumb:focus-visible {
    outline: var(--border-width-thick) solid var(--accent-primary, var(--control-active));
    outline-offset: 2px;
    box-shadow: 0 0 0 var(--xwui-slider-thumb-halo-size-focus, 6px) var(--xwui-slider-thumb-halo-color-focus, color-mix(in srgb, var(--accent-primary) 35%, transparent));
}

/* Active/Dragging state · slightly larger halo for pressed feedback. */
.xwui-slider__thumb--active {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 0 0 var(--xwui-slider-thumb-halo-size-active, 14px) var(--xwui-slider-thumb-halo-color, color-mix(in srgb, var(--accent-primary) 50%, transparent));
    z-index: 2;
}

.xwui-slider--vertical .xwui-slider__thumb--active {
    transform: translate(-50%, 50%) scale(1.15);
}

/* Color variants - Thumb border */
.xwui-slider--primary .xwui-slider__thumb {
    border-color: var(--accent-primary, var(--control-active));
}

.xwui-slider--secondary .xwui-slider__thumb {
    border-color: var(--accent-light, var(--accent-primary));
}

.xwui-slider--success .xwui-slider__thumb {
    border-color: var(--accent-success);
}

.xwui-slider--warning .xwui-slider__thumb {
    border-color: var(--accent-warning);
}

.xwui-slider--error .xwui-slider__thumb {
    border-color: var(--accent-error);
}

.xwui-slider--info .xwui-slider__thumb {
    border-color: var(--accent-primary, var(--control-active));
}

/* ============================================
   THUMB CONTENT (Emoji/Shape/Image)
   ============================================ */
.xwui-slider__thumb-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0.75em;
    overflow: hidden;
}

.xwui-slider__thumb-content img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.xwui-slider__thumb-content svg {
    width: 100%;
    height: 100%;
}

/* Shape variants */
.xwui-slider__thumb-content--shape-square {
    border-radius: var(--radius-sm);
}

.xwui-slider__thumb-content--shape-diamond {
    border-radius: 0;
    transform: rotate(45deg);
}

/* Star shape is handled by content (emoji/SVG) */

/* ============================================
   HIDDEN NATIVE INPUT (Accessibility)
   ============================================ */
.xwui-slider__thumb input[type="range"] {
    /* Already styled inline, but ensure it's truly hidden */
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

/* ============================================
   TOOLTIP (Value Label) - Nested Structure
   ============================================ */
.xwui-slider__tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: var(--spacing-xs);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 10;
}

/* Tooltip circle wrapper - Clear, prominent styling */
.xwui-slider__tooltip-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--accent-primary, var(--control-active, #4f46e5));
    color: var(--text-inverse, #ffffff);
    border-radius: var(--radius-tooltip, var(--radius-sm));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--accent-primary, var(--control-active, #4f46e5));
    min-width: 24px;
    min-height: 24px;
}

/* Color variants for tooltip circle */
.xwui-slider--primary .xwui-slider__tooltip-circle {
    background: var(--accent-primary, var(--control-active, #4f46e5));
    border-color: var(--accent-primary, var(--control-active, #4f46e5));
    color: var(--text-inverse, #ffffff);
}

.xwui-slider--secondary .xwui-slider__tooltip-circle {
    background: var(--accent-light, var(--accent-primary, #6366f1));
    border-color: var(--accent-light, var(--accent-primary, #6366f1));
    color: var(--text-inverse, #ffffff);
}

.xwui-slider--success .xwui-slider__tooltip-circle {
    background: var(--accent-success, #10b981);
    border-color: var(--accent-success, #10b981);
    color: var(--text-inverse, #ffffff);
}

.xwui-slider--warning .xwui-slider__tooltip-circle {
    background: var(--accent-warning, #f59e0b);
    border-color: var(--accent-warning, #f59e0b);
    color: var(--text-inverse, #ffffff);
}

.xwui-slider--error .xwui-slider__tooltip-circle {
    background: var(--accent-error, #ef4444);
    border-color: var(--accent-error, #ef4444);
    color: var(--text-inverse, #ffffff);
}

.xwui-slider--info .xwui-slider__tooltip-circle {
    background: var(--accent-primary, var(--control-active, #4f46e5));
    border-color: var(--accent-primary, var(--control-active, #4f46e5));
    color: var(--text-inverse, #ffffff);
}

/* Tooltip label text */
.xwui-slider__tooltip-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    text-align: center;
}

/* Visible state */
.xwui-slider__tooltip--visible {
    opacity: 1;
    visibility: visible;
}

/* Always visible (open) state for valueLabelDisplay="on" */
.xwui-slider__tooltip--open {
    opacity: 1;
    visibility: visible;
}

/* Vertical tooltip */
.xwui-slider--vertical .xwui-slider__tooltip {
    bottom: auto;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-bottom: 0;
    margin-left: var(--spacing-xs);
}

/* ============================================
   MARKS
   ============================================ */
.xwui-slider__marks {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    top: 0;
    left: 0;
}

.xwui-slider--vertical .xwui-slider__marks {
    width: 100%;
    height: 100%;
}

.xwui-slider__mark {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(-50%);
}

.xwui-slider--vertical .xwui-slider__mark {
    transform: translateY(50%);
    left: 0;
}

.xwui-slider__mark-dot {
    width: 4px;
    height: 4px;
    background: var(--border-color, var(--control-border));
    border-radius: 50%;
    margin-top: calc(var(--spacing-sm) * -1);
    transition: background-color 0.2s ease;
}

/* Active mark state */
.xwui-slider__mark--active .xwui-slider__mark-dot {
    background: var(--accent-primary, var(--control-active));
}

:is(.xwui-slider--s,.xwui-slider--sm) .xwui-slider__mark-dot {
    width: 3px;
    height: 3px;
}

:is(.xwui-slider--l,.xwui-slider--lg) .xwui-slider__mark-dot {
    width: 5px;
    height: 5px;
}

.xwui-slider--vertical .xwui-slider__mark-dot {
    margin-top: 0;
    margin-left: calc(var(--spacing-sm) * -1);
}

.xwui-slider__mark-label {
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--text-secondary, var(--control-text-secondary));
    white-space: nowrap;
    transition: color 0.2s ease;
}

/* Active mark label state */
.xwui-slider__mark-label--active {
    color: var(--text-primary, var(--control-text));
    font-weight: var(--font-weight-medium);
}

.xwui-slider--vertical .xwui-slider__mark-label {
    margin-top: 0;
    margin-left: var(--spacing-xs);
}

/* ============================================
   STEPPERS
   ============================================ */
.xwui-slider__steppers {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    flex-shrink: 0;
}

.xwui-slider--vertical .xwui-slider__steppers {
    flex-direction: row;
}

.xwui-slider__stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-control-height-sm, 28px);
    height: var(--size-control-height-sm, 28px);
    padding: 0;
    background: var(--bg-primary, var(--control-bg));
    border: var(--border-width-thin) solid var(--border-color, var(--control-border));
    border-radius: var(--radius-button, var(--radius-sm));
    color: var(--text-primary, var(--control-text));
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.xwui-slider__stepper:hover:not(:disabled) {
    background: var(--bg-hover, var(--control-bg-hover));
    border-color: var(--accent-primary, var(--control-active));
    color: var(--accent-primary, var(--control-active));
}

.xwui-slider__stepper:active:not(:disabled) {
    background: var(--bg-active, var(--control-bg-active));
    transform: scale(0.95);
}

.xwui-slider__stepper:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   DISABLED STATE
   ============================================ */
.xwui-slider--disabled {
    opacity: 0.6;
    pointer-events: none;
}

.xwui-slider--disabled .xwui-slider__track,
.xwui-slider--disabled .xwui-slider__thumb {
    cursor: not-allowed;
}

.xwui-slider--disabled .xwui-slider__thumb:hover {
    box-shadow: none;
    transform: translate(-50%, -50%);
}

.xwui-slider--disabled .xwui-slider__stepper {
    cursor: not-allowed;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
.xwui-slider__thumb[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Screen reader only */
.xwui-slider__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 640px) {
    :is(.xwui-slider--s,.xwui-slider--sm) .xwui-slider__thumb {
        width: 16px;
        height: 16px;
    }
    
    :is(.xwui-slider--m,.xwui-slider--md) .xwui-slider__thumb {
        width: 20px;
        height: 20px;
    }
    
    :is(.xwui-slider--l,.xwui-slider--lg) .xwui-slider__thumb {
        width: 24px;
        height: 24px;
    }
}

/* ============================================
   VALUE EDIT LABELS (min / current / max)
   ============================================ */
/* Compact, click-to-edit value labels shown when displayInputMin /
   displayInputCurrent / displayInputMax are enabled. MIN sits at the start
   edge of the track, MAX at the end edge, CURRENT is centred above. Clicking a
   label swaps it for an inline text <input>. No headings, no boxes. */
.xwui-slider__edit {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary, var(--control-text-secondary));
    white-space: nowrap;
    cursor: text;
    border-radius: var(--radius-sm, 4px);
    padding: 0 2px;
    transition: color 0.12s ease, background-color 0.12s ease;
}
.xwui-slider__edit:hover,
.xwui-slider__edit:focus-visible {
    color: var(--text-primary, var(--control-text));
    background: var(--bg-hover, var(--control-bg-hover, rgba(0, 0, 0, 0.06)));
    outline: none;
}

/* MIN / MAX flank the rail; the rail flexes to fill the space between them. */
.xwui-slider__edge { flex-shrink: 0; }
.xwui-slider__edge--min { margin-right: var(--spacing-xs); }
.xwui-slider__edge--max { margin-left: var(--spacing-xs); }
.xwui-slider--has-edges .xwui-slider__rail {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

/* CURRENT — value feedback centred above the track. */
.xwui-slider__value {
    display: block;
    text-align: center;
    margin-bottom: 2px;
}

/* The inline editor that replaces a label on click. */
.xwui-slider__edit-input {
    width: 5ch;
    min-width: 3ch;
    font: inherit;
    color: var(--text-primary, var(--control-text));
    text-align: center;
    border: var(--border-width-thin, 1px) solid var(--accent-primary, var(--control-active));
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-primary, #fff);
    padding: 0 2px;
    box-sizing: content-box;
}
.xwui-slider__value .xwui-slider__edit-input { width: 6ch; }

/* ============================================
   DARK MODE SUPPORT
   ============================================ */
/* Dark mode is automatically handled via theme/colors/{theme}.css files */
/* Custom overrides can be added here if needed */

/* basic/XWUIInputSwitch/XWUIInputSwitch.css */
/**
 * XWUIInputSwitch Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Roundness: theme/roundness/rounded.css (global roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm, 0.75rem);
    cursor: pointer;
    user-select: none;
}

.xwui-switch-label-start {
    flex-direction: row-reverse;
}

.xwui-switch-disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Hidden input */
.xwui-switch-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Track */
.xwui-switch-track {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    border-radius: var(--radius-control, 999px);
    background: var(--xwui-switch-unchecked-bg, var(--border-color, #dee2e6));
    transition: background 0.2s ease, border-color 0.2s ease;
    border: 1px solid transparent;
}

/* Track with custom content (no thumb) */
.xwui-switch-track-content {
    justify-content: space-between;
    padding: 2px 4px;
}

/* Thumb - Clear circle styling matching slider tooltip */
.xwui-switch-thumb {
    position: absolute;
    border-radius: 50%;
    background: var(--text-inverse, #ffffff);
    border: 2px solid var(--border-color, #dee2e6);
    box-shadow: var(--shadow-thumb);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Size variants */
:is(.xwui-switch-s,.xwui-switch-sm) .xwui-switch-track {
    width: 32px;
    height: 18px;
}

:is(.xwui-switch-s,.xwui-switch-sm) .xwui-switch-thumb {
    width: 14px;
    height: 14px;
    left: 2px;
}

:is(.xwui-switch-s,.xwui-switch-sm) .xwui-switch-input:checked + .xwui-switch-track .xwui-switch-thumb {
    transform: translateX(14px);
}

:is(.xwui-switch-m,.xwui-switch-md) .xwui-switch-track {
    width: 44px;
    height: 24px;
}

:is(.xwui-switch-m,.xwui-switch-md) .xwui-switch-thumb {
    width: 20px;
    height: 20px;
    left: 2px;
}

:is(.xwui-switch-m,.xwui-switch-md) .xwui-switch-input:checked + .xwui-switch-track .xwui-switch-thumb {
    transform: translateX(20px);
}

:is(.xwui-switch-m,.xwui-switch-md) .xwui-switch-input:checked + .xwui-switch-track-content .xwui-switch-content-checked {
    right: 4px;
}

:is(.xwui-switch-l,.xwui-switch-lg) .xwui-switch-track {
    width: 56px;
    height: 30px;
}

:is(.xwui-switch-l,.xwui-switch-lg) .xwui-switch-thumb {
    width: 26px;
    height: 26px;
    left: 2px;
}

:is(.xwui-switch-l,.xwui-switch-lg) .xwui-switch-input:checked + .xwui-switch-track .xwui-switch-thumb {
    transform: translateX(26px);
}

:is(.xwui-switch-l,.xwui-switch-lg) .xwui-switch-input:checked + .xwui-switch-track-content .xwui-switch-content-checked {
    right: 4px;
}

/* Checked state */
.xwui-switch-input:checked + .xwui-switch-track {
    background: var(--xwui-switch-checked-bg, var(--accent-primary, #4f46e5));
    box-shadow: var(--glow-switch-track-checked, none);
}

.xwui-switch-input:checked + .xwui-switch-track .xwui-switch-thumb {
    background: var(--xwui-switch-checked-thumb, var(--text-inverse, #ffffff));
    border-color: var(--xwui-switch-checked-thumb-border, var(--accent-primary, #4f46e5));
    box-shadow: var(--glow-switch-thumb-checked);
}

/* Focus state */
.xwui-switch-input:focus-visible + .xwui-switch-track {
    outline: 2px solid var(--accent-primary, #4f46e5);
    outline-offset: 2px;
}

.xwui-switch-input:focus-visible + .xwui-switch-track .xwui-switch-thumb {
    box-shadow: var(--glow-switch-thumb-focus);
}

/* Hover state */
.xwui-switch:hover .xwui-switch-track {
    background: var(--border-strong, #adb5bd);
}

.xwui-switch:hover .xwui-switch-track .xwui-switch-thumb {
    box-shadow: var(--glow-switch-thumb-hover);
}

.xwui-switch:hover .xwui-switch-input:checked + .xwui-switch-track {
    background: var(--accent-hover, #4338ca);
    box-shadow: var(--glow-switch-track-checked, none);
}

.xwui-switch:hover .xwui-switch-input:checked + .xwui-switch-track .xwui-switch-thumb {
    box-shadow: var(--glow-switch-thumb-hover-checked);
}

/* Color variants */
.xwui-switch-success .xwui-switch-input:checked + .xwui-switch-track {
    background: var(--accent-success, #10b981);
}

.xwui-switch-success .xwui-switch-input:checked + .xwui-switch-track .xwui-switch-thumb {
    border-color: var(--accent-success, #10b981);
    box-shadow: var(--glow-switch-success-thumb);
}

.xwui-switch-success:hover .xwui-switch-input:checked + .xwui-switch-track {
    background: var(--accent-success-hover, #059669);
}

.xwui-switch-success:hover .xwui-switch-input:checked + .xwui-switch-track .xwui-switch-thumb {
    box-shadow: var(--glow-switch-success-thumb-hover);
}

.xwui-switch-warning .xwui-switch-input:checked + .xwui-switch-track {
    background: var(--accent-warning, #f59e0b);
}

.xwui-switch-warning .xwui-switch-input:checked + .xwui-switch-track .xwui-switch-thumb {
    border-color: var(--accent-warning, #f59e0b);
    box-shadow: var(--glow-switch-warning-thumb);
}

.xwui-switch-error .xwui-switch-input:checked + .xwui-switch-track {
    background: var(--accent-error, #ef4444);
}

.xwui-switch-error .xwui-switch-input:checked + .xwui-switch-track .xwui-switch-thumb {
    border-color: var(--accent-error, #ef4444);
    box-shadow: var(--glow-switch-error-thumb);
}

/* Custom content (icons, emojis, text) */
.xwui-switch-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75em;
    font-weight: 600;
    transition: opacity 0.2s ease, transform 0.2s ease;
    user-select: none;
    line-height: 1;
    flex-shrink: 0;
}

.xwui-switch-content-unchecked {
    opacity: 1;
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
}

.xwui-switch-content-checked {
    opacity: 0;
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
}

.xwui-switch-input:checked + .xwui-switch-track .xwui-switch-content-unchecked {
    opacity: 0;
}

.xwui-switch-input:checked + .xwui-switch-track .xwui-switch-content-checked {
    opacity: 1;
    position: absolute;
    right: 4px;
    transform: translateY(-50%);
}

/* Size adjustments for custom content */
:is(.xwui-switch-s,.xwui-switch-sm) .xwui-switch-content {
    font-size: 10px;
    min-width: 14px;
}

:is(.xwui-switch-m,.xwui-switch-md) .xwui-switch-content {
    font-size: 12px;
    min-width: 18px;
}

:is(.xwui-switch-l,.xwui-switch-lg) .xwui-switch-content {
    font-size: 14px;
    min-width: 22px;
}

/* Text content */
.xwui-switch-text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xxs, 0.125rem);
}

.xwui-switch-label {
    font-size: var(--font-size-base, 0.9375rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary, #212529);
    line-height: 1.4;
}

.xwui-switch-description {
    font-size: var(--font-size-sm, 0.8125rem);
    color: var(--text-secondary, #6c757d);
    line-height: 1.4;
}

/* Multi-state switch */
.xwui-switch-multi {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm, 0.75rem);
    position: relative; /* For tooltip positioning */
}

.xwui-switch-track-multi {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: var(--radius-control, 999px);
    background: var(--border-color, #dee2e6);
    border: 1px solid var(--border-strong, #adb5bd);
    transition: background 0.2s ease;
}

.xwui-switch-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: none;
    border-radius: var(--radius-control, 999px);
    background: transparent;
    cursor: pointer;
    /* Narrow transition to the properties that actually change — previously
     * `all 0.2s ease` forced the browser to consider every property as
     * potentially animating on every state change, which compounded with
     * the moving-thumb transform animation and caused the laggy feel
     * users reported. Only color and background transition now. */
    transition: color 0.15s ease, background-color 0.15s ease;
    color: var(--text-secondary, #6c757d);
    min-width: 36px;
    min-height: 36px;
}

.xwui-switch-option:hover:not(:disabled) {
    background: var(--overlay-xs);
    color: var(--text-primary, #212529);
}

.xwui-switch-option-selected {
    /* The pill here is painted with --accent-primary (a saturated brand color
       like indigo/blue/purple). Its foreground must contrast with the PILL,
       not with the page — so we use --accent-primary-fg (falls back to white,
       which every brand accent is designed to pair with).
       Previously this used --text-inverse, which flips to dark on dark themes
       → dark icon on purple pill, ~1.7:1 contrast, unreadable. */
    background: var(--accent-primary, #4f46e5);
    color: var(--accent-primary-fg, #ffffff);
    box-shadow: var(--shadow-thumb);
}

.xwui-switch-option:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.xwui-switch-option-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Size variants for multi-state */
:is(.xwui-switch-s,.xwui-switch-sm) .xwui-switch-option {
    padding: 4px 8px;
    min-width: 28px;
    min-height: 28px;
    font-size: var(--font-size-sm, 0.8125rem);
}

:is(.xwui-switch-s,.xwui-switch-sm) .xwui-switch-option-icon {
    width: 16px;
    height: 16px;
}

:is(.xwui-switch-m,.xwui-switch-md) .xwui-switch-option {
    padding: 6px 10px;
    min-width: 36px;
    min-height: 36px;
    font-size: var(--font-size-base, 0.9375rem);
}

:is(.xwui-switch-m,.xwui-switch-md) .xwui-switch-option-icon {
    width: 20px;
    height: 20px;
}

:is(.xwui-switch-l,.xwui-switch-lg) .xwui-switch-option {
    padding: 8px 14px;
    min-width: 44px;
    min-height: 44px;
    font-size: var(--font-size-lg, 1.0625rem);
}

:is(.xwui-switch-l,.xwui-switch-lg) .xwui-switch-option-icon {
    width: 24px;
    height: 24px;
}

/* ── Multi switch: moving-thumb highlight (binary-switch-like UX) ────── */

/* When moving-thumb is active, the track becomes the positioning context
   for the absolutely-positioned thumb circle. */
.xwui-switch-moving-thumb .xwui-switch-track-multi {
    position: relative;
}

/* The moving thumb: a pill that slides behind the selected option.
 *
 * Performance notes:
 *   • Only `transform` is transitioned — `width` is snapped instantly.
 *     Transitioning width costs a layout pass every frame; translating
 *     a promoted element is GPU-composited and essentially free.
 *   • `will-change: transform` hints the browser to promote this node
 *     to its own compositing layer upfront so the first slide doesn't
 *     stutter while the layer is created mid-animation.
 *   • The JS uses translate3d() (not translateX) so compositing kicks
 *     in even on browsers that only promote 3D-transformed layers.
 *
 * The `-no-transition` modifier class is set by the TS side on the very
 * first position-set after mount — without this, the thumb would animate
 * from its default (transform: none, so left edge = padding edge) to the
 * active option's offsetLeft, which looks like the thumb "flies in" on
 * page load.
 */
.xwui-switch-multi-thumb {
    position: absolute;
    top: 2px;
    bottom: 2px;
    /* left MUST be 0 so that `transform: translate3d(target.offsetLeft, …)`
     * lands the thumb's left edge exactly on the option's left edge.
     *
     * Both `offsetLeft` (on the JS side) and an abs-positioned element's
     * `left` (on the CSS side) are measured from the offsetParent's padding
     * edge. A non-zero CSS `left` therefore *adds* to the transform and
     * shifts the thumb that same amount to the right of the option it's
     * supposed to cover. The previous `left: 2px` produced a 2-pixel
     * rightward offset on every position — visible as the thumb sitting
     * slightly clipped-right over each icon. */
    left: 0;
    width: 36px; /* overridden inline to match selected option (snapped) */
    border-radius: var(--radius-control, 999px);
    background: var(--accent-primary, #4f46e5);
    box-shadow: var(--shadow-thumb);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.2s ease;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}

.xwui-switch-multi-thumb-no-transition {
    transition: none !important;
}

/* In moving-thumb mode, the selected option shows text/icon in the inverse
   color but DOES NOT paint its own pill background — the thumb handles that. */
.xwui-switch-moving-thumb .xwui-switch-option {
    position: relative;
    z-index: 1;
    background: transparent !important;
    box-shadow: none !important;
}
.xwui-switch-moving-thumb .xwui-switch-option-selected {
    /* The thumb behind this option is painted with --accent-primary; the icon
       must contrast with the thumb (saturated accent color), not with the page
       background. See `.xwui-switch-option-selected` above for full rationale. */
    background: transparent !important;
    color: var(--accent-primary-fg, #ffffff);
}
.xwui-switch-moving-thumb .xwui-switch-option:hover:not(:disabled) {
    background: transparent !important;
}

/* ── Compact multi switch (single visible option, cycles on press) ───── */

.xwui-switch-compact .xwui-switch-track-multi {
    /* The single option is itself the pill; no separate thumb needed. */
    padding: 2px;
    min-width: 40px;
}

.xwui-switch-compact .xwui-switch-option {
    /* In compact, the visible option is the pill — match the binary-switch feel. */
    border-radius: var(--radius-control, 999px);
    cursor: pointer;
}

/* Slight press-feedback so it feels clickable */
.xwui-switch-compact .xwui-switch-option:active:not(:disabled) {
    transform: scale(0.96);
    transition: transform 0.12s ease;
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */


/* basic/XWUIInputTags/XWUIInputTags.css */
/**
 * XWUIInputTags Component Styles — chips + inline input, theme-token driven.
 */

.xwui-input-tags {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
}

.xwui-input-tags-label {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-secondary);
}

.xwui-input-tags-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem;
    background: var(--bg-input, var(--bg-primary, #ffffff));
    border: var(--border-input-width, var(--border-width-regular, 1.5px)) var(--border-input-style, solid) var(--border-input-color, var(--border-color));
    border-radius: var(--radius-input, var(--radius-md, 0.5rem));
    transition: border-color 0.2s, box-shadow 0.2s;
}

.xwui-input-tags-field:focus-within {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--accent-primary-light, rgba(79, 70, 229, 0.15));
}

.xwui-input-tags-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.3rem 0.2rem 0.55rem;
    background: var(--bg-secondary, rgba(0, 0, 0, 0.05));
    color: var(--text-primary);
    border-radius: var(--radius-sm, 0.375rem);
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.2;
}

.xwui-input-tags-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border: none;
    background: transparent;
    color: var(--text-tertiary, #adb5bd);
    cursor: pointer;
    border-radius: 50%;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    transition: color 0.15s, background 0.15s;
}
.xwui-input-tags-chip-remove:hover {
    color: var(--accent-error, #ef4444);
    background: var(--bg-tertiary, rgba(0, 0, 0, 0.06));
}

.xwui-input-tags-input {
    flex: 1;
    min-width: 7rem;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-primary);
    font-size: var(--font-size-sm, 0.875rem);
    padding: 0.25rem;
}
.xwui-input-tags-input::placeholder {
    color: var(--text-tertiary, #adb5bd);
}

.xwui-input-tags-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.xwui-input-tags-helper {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-secondary);
}
/* Live count hint ("3 / 8"). Turns red when below the required minimum. */
.xwui-input-tags-count {
    margin-left: auto;
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-tertiary, #adb5bd);
    font-variant-numeric: tabular-nums;
}
.xwui-input-tags-invalid .xwui-input-tags-field { border-color: var(--accent-error, #ef4444); }
.xwui-input-tags-invalid .xwui-input-tags-count { color: var(--accent-error, #ef4444); }
.xwui-input-tags-full .xwui-input-tags-field { border-color: var(--accent-success, #198754); }

.xwui-input-tags-disabled .xwui-input-tags-field {
    background: var(--bg-secondary);
    cursor: not-allowed;
}
.xwui-input-tags-disabled .xwui-input-tags-input { cursor: not-allowed; }

/* basic/XWUIInputText/XWUIInputText.css */
/**
 * XWUIInputText Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/input/*.css (component-specific border widths)
 * - Roundness: theme/roundness/input/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-input-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.375rem);
}

.xwui-input-text-full-width {
    width: 100%;
}

/* Label */
.xwui-input-text-label {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary);
}

.xwui-input-text-required {
    color: var(--accent-error);
}

/* Input container — fixed min-height so height does not change when typing */
.xwui-input-text-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 0.5rem);
    border-radius: var(--radius-input, var(--radius-md, 6px));
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    box-sizing: border-box;
    min-height: 2.5rem; /* default for medium; overridden per size */
}

/* Leading visual wrap — reference: FormControl-input-leadingVisualWrap */
.xwui-input-text-leading-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-secondary);
}

.xwui-input-text-leading-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}

.xwui-input-text-leading-wrap svg,
.xwui-input-text-leading-visual svg {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
}

/* Input wrapper — reference: QueryBuilder-InputWrapper (flex grow, contains input) */
.xwui-input-text-input-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

/* Outlined variant */
.xwui-input-text-outlined .xwui-input-text-container {
    border: var(--border-input-width, var(--border-width-regular, 1.5px)) var(--border-input-style, solid) var(--border-input-color, var(--border-color));
    background: var(--bg-primary);
}

.xwui-input-text-outlined .xwui-input-text-container:hover {
    border-color: var(--border-strong);
}

.xwui-input-text-outlined .xwui-input-text-container.xwui-input-text-focused {
    border-color: var(--accent-primary);
    box-shadow: var(--glow-input-focus, var(--shadow-xs));
}

/* Filled variant — uses a tinted overlay of the text colour rather than a
   named bg token. Why: several themes (dark, night, azure-forge, catppuccin-*)
   define --bg-card === --bg-secondary, so the old `background: var(--bg-secondary)`
   made the filled input disappear against the surrounding card. color-mix on
   --text-primary produces a consistent subtle elevation against *any* card
   surface the input sits on. The var(...) line below is a fallback for
   browsers without color-mix support. */
.xwui-input-text-filled .xwui-input-text-container {
    border: var(--border-input-width, var(--border-width-regular, 1.5px)) var(--border-input-style, solid) transparent;
    background: var(--bg-tertiary, var(--bg-secondary));
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
}

.xwui-input-text-filled .xwui-input-text-container:hover {
    background: var(--bg-tertiary);
    background: color-mix(in srgb, var(--text-primary) 10%, transparent);
}

.xwui-input-text-filled .xwui-input-text-container.xwui-input-text-focused {
    background: var(--bg-primary);
    border-color: var(--accent-primary);
    box-shadow: var(--glow-input-focus, none);
}

/* Underlined variant */
.xwui-input-text-underlined .xwui-input-text-container {
    border: none;
    border-bottom: var(--border-input-width, var(--border-width-thick, 2px)) var(--border-input-style, solid) var(--border-input-color, var(--border-color));
    border-radius: 0;
    background: transparent;
}

.xwui-input-text-underlined .xwui-input-text-container:hover {
    border-bottom-color: var(--border-strong);
}

.xwui-input-text-underlined .xwui-input-text-container.xwui-input-text-focused {
    border-bottom-color: var(--accent-primary);
    box-shadow: var(--glow-input-focus, none);
}

/* Input element — stable height, with enough line-height that descenders
   (j, g, y, p, q) have room to render even at the smallest font sizes.
   line-height: 1.25 was too tight: at 15px font that's ~18.75px line, which
   puts the baseline only ~1.9px above the content-box bottom — the tail of
   a 'g' is ~3–4px and got clipped. 1.5 gives ~3.75px of bottom clearance,
   which fits every common font at every supported size. */
.xwui-input-text-container .xwui-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    outline-offset: 0;
    font-family: var(--font-input-family, var(--font-family-base, inherit));
    color: var(--text-primary);
    width: 100%;
    min-width: 0;
    line-height: 1.5;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    min-height: 0; /* let container control height */
}

/* Suppress global :focus-visible outline on inner input so only container border shows */
.xwui-input-text-container .xwui-input:focus,
.xwui-input-text-container .xwui-input:focus-visible {
    outline: none;
    outline-offset: 0;
}

.xwui-input::placeholder {
    color: var(--text-tertiary);
}

/* Hide browser native clear (X) on search inputs — we use our own clear button when clearable */
.xwui-input-text-container input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}
.xwui-input-text-container input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
.xwui-input-text-container input[type="search"]::-moz-search-cancel-button {
    appearance: none;
    -moz-appearance: none;
    display: none;
}

/* Size variants — use the canonical short-form scale (xs/sm/md/lg/xl)
   that XWUIInputText.ts actually emits on the wrapper. The previous
   selectors used legacy long names (-small/-medium/-large) that no
   longer match any rendered class, so the padding never applied and
   inputs had a 0px inner box which clipped glyph descenders. Pads use
   literal rems (not spacing tokens) so they survive any theme that
   redefines --spacing-sm to a small value. */
/* Canonical 11-step size scale: xxxxs|xxxs|xxs|xs|sm|md|lg|xl|xxl|xxxl|xxxxl.
   Smaller-than-xs sizes are needed for tight grid/cell embeds (e.g.
   PropertiesGrid rows in 28-32px row heights). Larger-than-xl sizes mirror
   the rest of the xwui scale. */
:is(.xwui-input-text-4xs,.xwui-input-text-xxxxs) .xwui-input-text-container {
    min-height: 1.25rem;
    padding: 0.0625rem 0.3125rem;
}
:is(.xwui-input-text-4xs,.xwui-input-text-xxxxs) .xwui-input { font-size: var(--font-size-xs, 0.5rem); }

:is(.xwui-input-text-3xs,.xwui-input-text-xxxs) .xwui-input-text-container {
    min-height: 1.375rem;
    padding: 0.0625rem 0.375rem;
}
:is(.xwui-input-text-3xs,.xwui-input-text-xxxs) .xwui-input { font-size: var(--font-size-xs, 0.5625rem); }

:is(.xwui-input-text-2xs,.xwui-input-text-xxs) .xwui-input-text-container {
    min-height: 1.5rem;
    padding: 0.125rem 0.4375rem;
}
:is(.xwui-input-text-2xs,.xwui-input-text-xxs) .xwui-input { font-size: var(--font-size-xs, 0.625rem); }

.xwui-input-text-xs .xwui-input-text-container {
    min-height: 2rem;
    padding: 0.25rem 0.625rem;
}
.xwui-input-text-xs .xwui-input { font-size: var(--font-size-xs, 0.75rem); }

:is(.xwui-input-text-s,.xwui-input-text-sm) .xwui-input-text-container {
    min-height: 2.25rem;
    padding: 0.375rem 0.75rem;
}
:is(.xwui-input-text-s,.xwui-input-text-sm) .xwui-input { font-size: var(--font-size-sm, 0.875rem); }

:is(.xwui-input-text-m,.xwui-input-text-md) .xwui-input-text-container {
    min-height: 2.5rem;
    padding: 0.5rem 0.875rem;
}
:is(.xwui-input-text-m,.xwui-input-text-md) .xwui-input { font-size: var(--font-size-base, 0.9375rem); }

:is(.xwui-input-text-l,.xwui-input-text-lg) .xwui-input-text-container {
    min-height: 2.75rem;
    padding: 0.625rem 1rem;
}
:is(.xwui-input-text-l,.xwui-input-text-lg) .xwui-input { font-size: var(--font-size-base, 1rem); }

.xwui-input-text-xl .xwui-input-text-container {
    min-height: 3rem;
    padding: 0.75rem 1.25rem;
}
.xwui-input-text-xl .xwui-input { font-size: var(--font-size-lg, 1.125rem); }

:is(.xwui-input-text-2xl,.xwui-input-text-xxl) .xwui-input-text-container {
    min-height: 3.5rem;
    padding: 0.875rem 1.375rem;
}
:is(.xwui-input-text-2xl,.xwui-input-text-xxl) .xwui-input { font-size: var(--font-size-lg, 1.25rem); }

:is(.xwui-input-text-3xl,.xwui-input-text-xxxl) .xwui-input-text-container {
    min-height: 4rem;
    padding: 1rem 1.5rem;
}
:is(.xwui-input-text-3xl,.xwui-input-text-xxxl) .xwui-input { font-size: var(--font-size-xl, 1.5rem); }

:is(.xwui-input-text-4xl,.xwui-input-text-xxxxl) .xwui-input-text-container {
    min-height: 4.75rem;
    padding: 1.125rem 1.75rem;
}
:is(.xwui-input-text-4xl,.xwui-input-text-xxxxl) .xwui-input { font-size: var(--font-size-xl, 1.75rem); }

/* Density (M3, Fluent, Carbon) */
.xwui-input-text-wrapper[data-density="compact"] .xwui-input-text-container {
    padding: var(--control-padding-y-compact) var(--control-padding-x-compact);
}
.xwui-input-text-wrapper[data-density="comfortable"] .xwui-input-text-container {
    padding: var(--control-padding-y-comfortable) var(--control-padding-x-comfortable);
}
.xwui-input-text-wrapper[data-density="spacious"] .xwui-input-text-container {
    padding: var(--control-padding-y-spacious) var(--control-padding-x-spacious);
}

/* Prefix and suffix */
.xwui-input-text-prefix,
.xwui-input-text-suffix {
    display: flex;
    align-items: center;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.xwui-input-text-prefix svg,
.xwui-input-text-suffix svg {
    width: 18px;
    height: 18px;
}

/* Clear wrap — keep in layout but do not grow container height; X stays visible */
.xwui-input-text-clear-wrap[hidden] {
    display: none !important;
}

.xwui-input-text-clear-wrap {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    flex-grow: 0;            /* NEVER grow — otherwise flexbox centered the X across the empty input */
    width: auto;
    min-width: 0;
    min-height: 0;           /* allow shrink; don’t force row to grow */
    align-self: stretch;    /* fill row height only, don’t exceed it */
    max-height: 100%;       /* cap at container height when container has explicit height */
    margin-left: auto;       /* pin to the right edge regardless of parent justify-content */
    order: 99;               /* always last among flex siblings so it sits after the input */
    position: relative;      /* give it its own stacking context so a buggy absolute child can't float into the input */
}

/* Clear button — fixed height AND width so it never increases the input row
   height AND never stretches to eat the input area. `width: auto` prevents
   the button from flex-growing to 100% when its container's justify layout
   changes. */
.xwui-input-text-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 1.5rem;
    min-height: 0;
    line-height: 1;
    padding: 0 var(--spacing-sm, 0.5rem);
    border: none;
    border-radius: var(--radius-sm, 4px);
    background: transparent;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: color 0.2s, background 0.2s;
    flex-shrink: 0;
    flex-grow: 0;
    box-sizing: border-box;
}

/* XWUIIcon renders the glyph inside a <div class="xwui-icon"> with inline
   width/height style. Cap that wrapper and its nested <svg> so the X can
   never end up at 100% of the input bar width, even if a component-level
   rule elsewhere sets svg { width: 100% } or a theme injects unexpected
   sizing. Without this cap the clear glyph briefly rendered as a huge X
   in the middle of the search input while the icon child was resolving. */
.xwui-input-text-clear > .xwui-icon {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
}
.xwui-input-text-clear > .xwui-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Clear-wrap layout hardening: justify-content: flex-end pins the visible
   button to the right edge of the slot, so a wide flex parent can't center
   the button across the whole input. */
.xwui-input-text-clear-wrap {
    justify-content: flex-end;
}

.xwui-input-text-clear:hover {
    color: var(--text-secondary);
    background: var(--bg-secondary, rgba(0, 0, 0, 0.04));
}

.xwui-input-text-clear:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.xwui-input-text-clear svg {
    width: 16px;
    height: 16px;
}

/* Password toggle */
.xwui-input-text-password-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: color 0.2s;
    flex-shrink: 0;
}

.xwui-input-text-password-toggle:hover {
    color: var(--text-secondary);
}

.xwui-input-text-password-toggle svg {
    width: 18px;
    height: 18px;
}

/* Helper text */
.xwui-input-text-helper {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.xwui-input-text-helper-error {
    color: var(--accent-error);
}

/* Format validation feedback (pattern, minLength, maxLength) */
.xwui-input-text-format-feedback {
    font-size: var(--font-size-xs, 0.75rem);
    margin-top: calc(var(--spacing-xs, 0.25rem) * -0.5);
}

.xwui-input-text-format-feedback--valid {
    color: var(--accent-success, #198754);
}

.xwui-input-text-format-feedback--invalid {
    color: var(--accent-error);
}

/* Format valid: border/ring success (do not override explicit error) */
.xwui-input-text-format-valid:not(.xwui-input-text-error) .xwui-input-text-container {
    border-color: var(--accent-success, #198754);
}

.xwui-input-text-format-valid:not(.xwui-input-text-error) .xwui-input-text-container.xwui-input-text-focused {
    /* Success-state focus ring — themed via accent-success-light (20% alpha
       success) so it follows the universal semantic palette on every theme.
       Fallback preserved for browsers without color-mix. */
    box-shadow: 0 0 0 2px rgba(25, 135, 84, 0.2);
    box-shadow: 0 0 0 2px var(--accent-success-light);
}

/* Format invalid: border/ring error (only when not already in error state from setError) */
.xwui-input-text-format-invalid:not(.xwui-input-text-error) .xwui-input-text-container {
    border-color: var(--accent-error);
}

.xwui-input-text-format-invalid:not(.xwui-input-text-error) .xwui-input-text-container.xwui-input-text-focused {
    /* Error-state focus ring — themed via accent-error-light. */
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
    box-shadow: 0 0 0 2px var(--accent-error-light);
}

/* Error state */
.xwui-input-text-error .xwui-input-text-container {
    border-color: var(--accent-error) !important;
}

.xwui-input-text-error .xwui-input-text-container.xwui-input-text-focused {
    box-shadow: var(--glow-input-error, var(--shadow-xs));
}

.xwui-input-text-error .xwui-input-text-label {
    color: var(--accent-error);
}

/* Success / valid state — green border, ring, and helper (semantic palette). */
.xwui-input-text-success .xwui-input-text-container {
    border-color: var(--accent-success, #198754) !important;
}
.xwui-input-text-success .xwui-input-text-container.xwui-input-text-focused {
    box-shadow: 0 0 0 2px rgba(25, 135, 84, 0.2);
    box-shadow: 0 0 0 2px var(--accent-success-light);
}
.xwui-input-text-helper-success {
    color: var(--accent-success, #198754);
}
/* Symmetry with the error state (which tints its label red): the success
   label is tinted green, so valid/invalid read the same way at a glance. */
.xwui-input-text-success .xwui-input-text-label {
    color: var(--accent-success, #198754);
}

/* Trailing state icon — red alert (error) / green check (success). The glyph
   inherits the state colour via currentColor on the wrap. */
.xwui-input-text-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding-inline-end: 0.6rem;
}
.xwui-input-text-state-icon svg { width: 18px; height: 18px; }
.xwui-input-text-error .xwui-input-text-state-icon { color: var(--accent-error); }
.xwui-input-text-success .xwui-input-text-state-icon { color: var(--accent-success, #198754); }

/* Disabled state — clean, legible grays (no muddy global opacity). Explicit
   token colours keep the text/icon readable, matching a clear "read-only" look. */
.xwui-input-text-disabled .xwui-input-text-container {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    cursor: not-allowed;
}
.xwui-input-text-disabled .xwui-input {
    cursor: not-allowed;
    /* Readable medium gray (#6c757d), not the washed-out tertiary (#adb5bd):
       a disabled value should still be legible, like a clear read-only field. */
    color: var(--text-secondary);
    -webkit-text-fill-color: var(--text-secondary);
}
.xwui-input-text-disabled .xwui-input-text-label,
.xwui-input-text-disabled .xwui-input-text-helper {
    color: var(--text-secondary);
}
.xwui-input-text-disabled .xwui-input-text-leading-wrap {
    color: var(--text-secondary);
}

/* ── Floating label ─────────────────────────────────────────────────────────
   The label rides inside the field, centred like a placeholder when empty and
   floating up when focused or filled (Material style). Outlined notches the top
   border with the field background; filled floats the label inside the fill. */
.xwui-input-text-floating .xwui-input-text-container {
    position: relative;
}
.xwui-input-text-floating .xwui-input-text-label {
    margin: 0;
}
.xwui-input-text-float-label {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 0.25rem;
    max-width: calc(100% - 1.7rem);
    color: var(--text-tertiary);
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    transform-origin: left center;
    transition: top 0.16s ease, transform 0.16s ease, color 0.16s ease;
}
/* Floated (focused OR filled). */
.xwui-input-text-float-active .xwui-input-text-float-label {
    top: 0;
    transform: translateY(-50%) scale(0.8);
    color: var(--accent-primary);
}
.xwui-input-text-floating.xwui-input-text-error .xwui-input-text-float-active .xwui-input-text-float-label { color: var(--accent-error); }
.xwui-input-text-floating.xwui-input-text-success .xwui-input-text-float-active .xwui-input-text-float-label { color: var(--accent-success); }

/* Outlined: notch the border by painting the field background behind the label. */
.xwui-input-text-floating.xwui-input-text-outlined .xwui-input-text-float-active .xwui-input-text-float-label {
    background: var(--bg-input, var(--bg-primary, #ffffff));
}
/* Filled: float to inside-top; give the input headroom so text clears the label. */
.xwui-input-text-floating.xwui-input-text-filled .xwui-input {
    padding-top: 1.2rem;
    padding-bottom: 0.45rem;
}
.xwui-input-text-floating.xwui-input-text-filled .xwui-input-text-float-active .xwui-input-text-float-label {
    top: 0.6rem;
    transform: scale(0.8);
}
/* Underlined floating (variant="underlined") — the "line under the input"
   mode: no box, just a bottom rule that turns accent on focus, with the label
   floating above it. The float label needs no notch (no top border to break),
   so it sits flush-left with no background fill. */
.xwui-input-text-floating.xwui-input-text-underlined .xwui-input-text-float-label {
    left: 0;
    padding-left: 0;
}
.xwui-input-text-floating.xwui-input-text-underlined .xwui-input-text-float-active .xwui-input-text-float-label {
    background: transparent;
    transform-origin: left top;
    transform: scale(0.8);
}

/* In-field slotted adornments — light-DOM children placed INSIDE the field.
   Mirrors XWUIButton's slotted-label support: authors drop <xwui-button>,
   <xwui-icon>, a kbd chip, a unit label, etc. between the tags and they render
   inside the field at the leading or trailing edge (data-slot routes the side). */
.xwui-input-text-slot {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs, 0.375rem);
    flex-shrink: 0;
    color: var(--text-secondary);
}
.xwui-input-text-slot-leading {
    margin-inline-end: var(--spacing-xs, 0.25rem);
}
/* Trailing slot sits after the clear button (order:99) at the rightmost edge. */
.xwui-input-text-slot-trailing {
    order: 100;
    margin-inline-start: var(--spacing-xs, 0.4rem);
    margin-inline-end: 0.35rem;
}
/* Cap a resolving <xwui-icon> so it can't briefly paint huge. */
.xwui-input-text-slot > .xwui-icon { width: 18px; height: 18px; flex-shrink: 0; }
.xwui-input-text-slot > .xwui-icon svg { width: 100%; height: 100%; display: block; }

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */


/* basic/XWUIInputTextarea/XWUIInputTextarea.css */
/**
 * XWUIInputTextarea Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/input/*.css (component-specific border widths)
 * - Roundness: theme/roundness/input/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-textarea-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.375rem);
}

.xwui-textarea-full-width {
    width: 100%;
}

/* Label */
.xwui-textarea-label {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    font-family: var(--font-label-family, var(--font-family-base, sans-serif));
    color: var(--text-primary, #212529);
}

.xwui-textarea-required {
    color: var(--accent-error, #ef4444);
}

/* Textarea element — line-height 1.5 gives descenders (j, g, y, p, q)
   enough vertical room to render without clipping on any font size. */
.xwui-textarea {
    width: 100%;
    border-radius: var(--radius-input, var(--radius-md, 6px));
    font-family: var(--font-input-family, var(--font-family-base, inherit));
    color: var(--text-primary, #212529);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    min-height: 80px;
    line-height: 1.5;
    box-sizing: border-box;
}

.xwui-textarea::placeholder {
    color: var(--text-tertiary, #adb5bd);
}

/* Outlined variant */
.xwui-textarea-outlined .xwui-textarea {
    border: var(--border-input-width, var(--border-width-regular, 1.5px)) var(--border-input-style, solid) var(--border-input-color, var(--border-color, #dee2e6));
    background: var(--bg-primary, #ffffff);
}

.xwui-textarea-outlined .xwui-textarea:hover {
    border-color: var(--border-strong, #adb5bd);
}

.xwui-textarea-outlined.xwui-textarea-focused .xwui-textarea {
    border-color: var(--accent-primary, #4f46e5);
    box-shadow: var(--shadow-xs);
    outline: none;
}

/* Filled variant — see XWUIInputText.css rationale: color-mix keeps the
   filled surface visible against any card bg on any theme, while the
   var() line provides a fallback for older browsers. */
.xwui-textarea-filled .xwui-textarea {
    border: var(--border-input-width, var(--border-width-regular, 1.5px)) var(--border-input-style, solid) transparent;
    background: var(--bg-tertiary, var(--bg-secondary, #f8f9fa));
    background: color-mix(in srgb, var(--text-primary) 6%, transparent);
}

.xwui-textarea-filled .xwui-textarea:hover {
    background: var(--bg-tertiary, #f1f3f5);
    background: color-mix(in srgb, var(--text-primary) 10%, transparent);
}

.xwui-textarea-filled.xwui-textarea-focused .xwui-textarea {
    background: var(--bg-primary, #ffffff);
    border-color: var(--accent-primary, #4f46e5);
    outline: none;
}

/* Size variants — match the canonical short-form scale (xs/sm/md/lg/xl)
   that the component TS emits. The previous -small/-medium/-large names
   no longer match any rendered class, so padding+font-size never applied
   and the textarea rendered with 0px padding, clipping descenders. */
.xwui-textarea-xs .xwui-textarea {
    padding: 0.375rem 0.625rem;
    font-size: var(--font-size-xs, 0.75rem);
}

:is(.xwui-textarea-s,.xwui-textarea-sm) .xwui-textarea {
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size-sm, 0.875rem);
}

:is(.xwui-textarea-m,.xwui-textarea-md) .xwui-textarea {
    padding: 0.625rem 0.875rem;
    font-size: var(--font-size-base, 0.9375rem);
}

:is(.xwui-textarea-l,.xwui-textarea-lg) .xwui-textarea {
    padding: 0.75rem 1rem;
    font-size: var(--font-size-base, 1rem);
}

.xwui-textarea-xl .xwui-textarea {
    padding: 0.875rem 1.25rem;
    font-size: var(--font-size-lg, 1.125rem);
}

/* Footer (helper text + character count) */
.xwui-textarea-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
}

.xwui-textarea-helper {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-secondary, #6c757d);
}

.xwui-textarea-helper-error {
    color: var(--accent-error, #ef4444);
}

.xwui-textarea-count {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-tertiary, #adb5bd);
    margin-left: auto;
}

/* Error state */
.xwui-textarea-error .xwui-textarea {
    border-color: var(--accent-error, #ef4444) !important;
}

.xwui-textarea-error.xwui-textarea-focused .xwui-textarea {
    box-shadow: var(--shadow-xs);
}

.xwui-textarea-error .xwui-textarea-label {
    color: var(--accent-error, #ef4444);
}

/* Disabled state */
.xwui-textarea-disabled .xwui-textarea {
    background: var(--bg-secondary, #f8f9fa);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */


/* basic/XWUIInputTime/XWUIInputTime.css */
@import url('../XWUIInputPicker/XWUIInputPicker.css');

/* Styles for XWUIInputTime. */

/* basic/XWUIInputTimePicker/XWUIInputTimePicker.css */
/* Styles for XWUIInputTimePicker. */

/* basic/XWUIInputTimeRange/XWUIInputTimeRange.css */
/* Styles for XWUIInputTimeRange. */

/* basic/XWUIInputTimeRangePicker/XWUIInputTimeRangePicker.css */
/* Styles for XWUIInputTimeRangePicker. */

/* basic/XWUIInputToggleGroup/XWUIInputToggleGroup.css */
/**
 * XWUIInputToggleGroup Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Roundness: theme/roundness/rounded.css (global roundness)
 */

.xwui-toggle-group {
    display: inline-flex;
    border-radius: var(--radius-md, 6px);
    flex-wrap: wrap;
    align-items: center;
}

.xwui-toggle-group-item {
    position: relative;
}

.xwui-toggle-group-item-selected {
    z-index: 1;
}

/* ============================================
   Spacing variants

   tight (default): segmented-control look — zero gap, divider line between
   adjacent buttons, overall rounded frame clipped by overflow: hidden. Good
   for connected views where one button is always active (view switcher,
   formatting toolbar).

   spaced: independent pill buttons with a gap between them. Good as a filter
   tab strip in an app bar / toolbar / free-flow context. Also adds outer
   padding so the buttons aren't flush against the group's parent edge.
   ============================================ */
.xwui-toggle-group-spacing-tight {
    gap: 0;
    overflow: hidden;
}

.xwui-toggle-group-spacing-tight .xwui-toggle-group-item:not(:last-child) {
    border-right: var(--border-width-regular, 1.5px) solid var(--border-color);
}

.xwui-toggle-group-spacing-spaced {
    gap: var(--spacing-xs, 0.375rem);
    padding: var(--spacing-xxs, 0.125rem);
    /* no overflow: hidden — each button carries its own rounded corners */
}


/* basic/XWUIInputTransferList/XWUIInputTransferList.css */
/**
 * XWUIInputTransferList Component Styles
 * Double-list transfer component
 */

.xwui-transfer-list-container {
    width: 100%;
}

.xwui-transfer-list-wrapper {
    display: flex;
    gap: var(--spacing-md, 16px);
    align-items: flex-start;
}

.xwui-transfer-list-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.05));
    border-radius: var(--radius-md, 8px);
    background: var(--bg-elevated, #ffffff);
    min-height: 300px;
    max-height: 400px;
}

.xwui-transfer-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.05));
}

.xwui-transfer-list-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.xwui-transfer-list-select-all {
    background: none;
    border: none;
    color: var(--accent-primary, #4f46e5);
    cursor: pointer;
    font-size: 0.75rem;
    padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
    border-radius: var(--radius-sm, 4px);
    transition: background-color 0.2s ease;
}

.xwui-transfer-list-select-all:hover {
    background-color: var(--bg-hover, #f8f9fa);
}

.xwui-transfer-list-search {
    padding: var(--spacing-sm, 8px);
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.05));
}

.xwui-transfer-list-search-input {
    width: 100%;
    padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.05));
    border-radius: var(--radius-sm, 4px);
    font-size: 0.875rem;
    background: var(--bg-primary, #ffffff);
    color: var(--text-primary);
}

.xwui-transfer-list-search-input:focus {
    outline: none;
    border-color: var(--accent-primary, #4f46e5);
}

.xwui-transfer-list-items {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-xs, 4px);
}

.xwui-transfer-list-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 8px);
    padding: var(--spacing-sm, 8px);
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.xwui-transfer-list-item:hover:not(.xwui-transfer-list-item-disabled) {
    background-color: var(--bg-hover, #f8f9fa);
}

.xwui-transfer-list-item-selected {
    background-color: var(--bg-active, #e9ecef);
}

.xwui-transfer-list-item-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.xwui-transfer-list-item-content {
    flex: 1;
}

.xwui-transfer-list-item-label {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 500;
}

.xwui-transfer-list-item-description {
    font-size: 0.75rem;
    color: var(--text-secondary, #6c757d);
    margin-top: 2px;
}

.xwui-transfer-list-empty {
    padding: var(--spacing-lg, 24px);
    text-align: center;
    color: var(--text-tertiary, #adb5bd);
    font-size: 0.875rem;
}

.xwui-transfer-list-operations {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-sm, 8px);
    padding: var(--spacing-md, 16px) 0;
}

.xwui-transfer-list-operation-button {
    padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.05));
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-primary, #ffffff);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.875rem;
    min-width: 60px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.xwui-transfer-list-operation-button:hover:not(:disabled) {
    background-color: var(--bg-hover, #f8f9fa);
    border-color: var(--accent-primary, #4f46e5);
}

.xwui-transfer-list-operation-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* basic/XWUIInputTreeSelect/XWUIInputTreeSelect.css */
/**
 * XWUIInputTreeSelect Component Styles
 */

.xwui-tree-select-container {
    position: relative;
}

.xwui-tree-select {
    /* Component wrapper */
}

.xwui-tree-select-dropdown {
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--border-color, #d9d9d9);
    border-radius: var(--radius-sm, 4px);
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.15));
    z-index: 1000;
    padding: var(--spacing-xs, 4px);
}


/* basic/XWUIInputUpload/XWUIInputUpload.css */
/**
 * XWUIInputUpload Component Styles
 * Structure and behavior only - colors come from CSS variables
 *
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Roundness: theme/roundness/rounded.css (global roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-input-upload {
    width: 100%;
}

/* Drop zone */
.xwui-input-upload-dropzone {
    border: var(--border-upload-width, var(--border-width-thick, 2px)) dashed var(--border-upload-color, var(--border-color));
    border-radius: var(--radius-upload, var(--radius-md, 8px));
    padding: var(--spacing-xl, 2rem);
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
    cursor: pointer;
    /* Component now has role="button" + tabindex="0" so the WHOLE dropzone
       is clickable, pasteable, and keyboard-activatable. User-select off so
       double-click doesn't highlight text instead of opening the picker. */
    user-select: none;
    -webkit-user-select: none;
    outline: none; /* We manage our own focus ring below. */
}

.xwui-input-upload-dropzone:hover {
    border-color: var(--accent-primary);
    background: var(--bg-secondary);
}

.xwui-input-upload-dropzone:focus-visible {
    border-color: var(--accent-primary);
    background: var(--bg-secondary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary, #4f46e5) 30%, transparent);
}

.xwui-input-upload-dropzone-dragover {
    border-color: var(--accent-primary);
    background: var(--bg-secondary);
    transform: scale(1.02);
    box-shadow: var(--shadow-md);
    transition: all 0.2s;
}

.xwui-input-upload-dropzone-dragover .xwui-input-upload-dropzone-content {
    opacity: 0.8;
}

.xwui-input-upload-dropzone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md, 1rem);
}

.xwui-input-upload-dropzone-content {
    gap: var(--spacing-sm, 0.5rem);
}

.xwui-input-upload-icon {
    width: 48px;
    height: 48px;
    color: var(--text-tertiary, #adb5bd);
    transition: color 0.2s;
}
.xwui-input-upload-dropzone:hover .xwui-input-upload-icon {
    color: var(--accent-primary);
}

.xwui-input-upload-icon svg {
    width: 100%;
    height: 100%;
}

.xwui-input-upload-text {
    color: var(--text-secondary);
    font-size: var(--font-size-sm, 0.875rem);
    margin: 0;
}

.xwui-input-upload-browse {
    color: var(--accent-primary);
    cursor: pointer;
    font-weight: var(--font-weight-medium, 500);
}
.xwui-input-upload-dropzone:hover .xwui-input-upload-browse {
    text-decoration: underline;
}

/* Detail hint: accepted formats + max size, muted. */
.xwui-input-upload-hint {
    color: var(--text-tertiary, #adb5bd);
    font-size: var(--font-size-xs, 0.75rem);
    margin: 0;
}

/* File list */
.xwui-input-upload-list {
    margin-top: var(--spacing-md, 1rem);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.xwui-input-upload-picture-card .xwui-input-upload-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--spacing-md, 1rem);
}

/* File item */
.xwui-input-upload-file-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.75rem);
    padding: var(--spacing-sm, 0.75rem);
    border: var(--border-upload-width, var(--border-width-regular, 1.5px)) var(--border-upload-style, solid) var(--border-upload-color, var(--border-color));
    border-radius: var(--radius-upload, var(--radius-sm, 6px));
    background: var(--bg-primary);
}

.xwui-input-upload-picture-card .xwui-input-upload-file-item {
    flex-direction: column;
    padding: var(--spacing-sm, 0.5rem);
}

.xwui-input-upload-file-preview {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-upload, var(--radius-sm, 6px));
    overflow: hidden;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.xwui-input-upload-file-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.xwui-input-upload-picture-card .xwui-input-upload-file-preview {
    width: 100%;
    height: 100px;
}

.xwui-input-upload-file-info {
    flex: 1;
    min-width: 0;
}

.xwui-input-upload-file-name {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xwui-input-upload-file-size {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-secondary);
    margin-top: var(--spacing-xs, 0.25rem);
}

.xwui-input-upload-file-progress {
    height: 2px;
    background: var(--accent-primary);
    margin-top: var(--spacing-sm, 0.5rem);
    transition: width 0.3s;
}

.xwui-input-upload-file-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.xwui-input-upload-file-remove {
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-xs, 4px);
    font-size: var(--font-size-xl, 1.25rem);
    line-height: 1;
    transition: all 0.2s;
}

.xwui-input-upload-file-remove:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* basic/XWUIInputWeight/XWUIInputWeight.css */
/* XWUIInputWeight - weight input with unit selector + alt readout */

.xwui-input-weight {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: var(--font-body, inherit);
  color: var(--text-primary);
}
.xwui-input-weight-disabled { opacity: 0.6; pointer-events: none; }

:is(.xwui-input-weight-3xs,.xwui-input-weight-xxxs) { font-size: 0.625rem; }
:is(.xwui-input-weight-2xs,.xwui-input-weight-xxs)  { font-size: 0.6875rem; }
.xwui-input-weight-xs   { font-size: 0.75rem; }
:is(.xwui-input-weight-s,.xwui-input-weight-sm)   { font-size: 0.8125rem; }
:is(.xwui-input-weight-m,.xwui-input-weight-md)   { font-size: 0.9375rem; }
:is(.xwui-input-weight-l,.xwui-input-weight-lg)   { font-size: 1.0625rem; }
.xwui-input-weight-xl   { font-size: 1.25rem; }

.xwui-input-weight-wrap {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-primary);
  overflow: hidden;
  max-width: 12rem;
}
.xwui-input-weight-wrap:focus-within {
  border-color: var(--role-primary-bg, #1d4ed8);
  box-shadow: 0 0 0 2px rgba(29,78,216,0.20);
}

.xwui-input-weight-input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding: 0.375rem 0.5rem;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: right;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.xwui-input-weight-input::placeholder { color: var(--text-tertiary); }

.xwui-input-weight-unit {
  padding: 0 0.5rem;
  border: none;
  border-left: 1px solid var(--border-light, var(--border-color));
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  outline: none;
}
.xwui-input-weight-unit:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }

.xwui-input-weight-alt {
  display: inline-flex;
  gap: 0.25rem;
  align-items: baseline;
  font-size: 0.75em;
}
.xwui-input-weight-alt-label { color: var(--text-tertiary); }
.xwui-input-weight-alt-value {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

/* basic/XWUIItem/XWUIItem.css */
/**
 * XWUIItem Component Styles
 * Styles for XWUIItem component that renders JSON config as HTML
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Roundness: theme/roundness/rounded.css (global roundness)
 * - Typography: theme/typography/*.css
 */

/* Base item styles */
.xwui-item {
    position: relative;
    width: 100%;
    transition: all 0.2s ease;
    border-radius: 6px;
}

/* Status-based background colors */
.xwui-item-status-before_start {
    background-color: var(--status-before-start) !important;
    border-left: 3px solid var(--status-before-start-border);
}

[dir="rtl"] .xwui-item-status-before_start {
    border-left: none;
    border-right: 3px solid var(--status-before-start-border);
}

.xwui-item-status-processing {
    background-color: var(--status-processing) !important;
    border-left: 3px solid var(--status-processing-border);
    color: var(--status-processing-text);
}

[dir="rtl"] .xwui-item-status-processing {
    border-left: none;
    border-right: 3px solid var(--status-processing-border);
}

.xwui-item-status-processing * {
    color: var(--status-processing-text);
}

.xwui-item-status-error {
    background-color: var(--status-error) !important;
    border-left: 3px solid var(--status-error-border);
    color: var(--status-error-text);
}

[dir="rtl"] .xwui-item-status-error {
    border-left: none;
    border-right: 3px solid var(--status-error-border);
}

.xwui-item-status-error * {
    color: var(--status-error-text);
}

.xwui-item-status-pass {
    /* No background color - use default */
    background-color: transparent;
}

/* Non-clickable items stay on the DEFAULT cursor — no pointer, no hover
   highlight. Only items that are actually interactive (`canClick !== false`,
   which adds `.xwui-item-clickable`) get the pointer + hover bg feedback.
   A lot of display-only item instances were inheriting pointer cursor
   from a parent rule; `cursor: default` here explicitly resets that.
   `:hover` is intentionally silent for non-clickable items. */
.xwui-item:not(.xwui-item-clickable) {
    cursor: default;
}
.xwui-item:not(.xwui-item-clickable):hover {
    background-color: inherit;
}

.xwui-item-clickable {
    cursor: pointer;
}

.xwui-item-clickable:hover:not(.xwui-item-status-before_start):not(.xwui-item-status-processing):not(.xwui-item-status-error):not(.xwui-item-status-pass):not(.xwui-item-no-hover) {
    background-color: var(--bg-hover);
}

/* Hover effects for status items - slightly darker. Opt-out via
   `.xwui-item-no-hover` (set by XWUIItemConfig.hoverHighlight = false).
   These only fire when the item is ALSO clickable — otherwise status
   items would still highlight on hover despite being display-only. */
.xwui-item-clickable.xwui-item-status-before_start:hover:not(.xwui-item-no-hover) {
    background-color: var(--status-before-start-hover) !important;
}

.xwui-item-clickable.xwui-item-status-processing:hover:not(.xwui-item-no-hover) {
    background-color: var(--status-processing-hover) !important;
}

.xwui-item-clickable.xwui-item-status-error:hover:not(.xwui-item-no-hover) {
    background-color: var(--status-error-hover) !important;
}

/* When hover highlight is disabled, force no background change on hover —
   including inside higher-level ancestor hover rules that might bleed in. */
.xwui-item-no-hover:hover {
    background-color: transparent !important;
}

/* Base item — token-driven density (overridden per size class below) */
.xwui-item {
    --xwui-item-font-size: var(--xwui-size-font-m, 14px);
    --xwui-item-pad-y: var(--xwui-size-pad-y-m, 6px);
    --xwui-item-pad-x: var(--xwui-size-pad-x-m, 14px);
    --xwui-item-icon-size: var(--xwui-size-icon-m, 16px);
    --xwui-item-image-size: calc(var(--xwui-item-icon-size) * 2);
    --xwui-item-gap: max(4px, calc(var(--xwui-item-icon-size) * 0.5));
    --xwui-item-line-height: 1.4;
    font-size: var(--xwui-item-font-size);
    line-height: var(--xwui-item-line-height);
    padding: var(--xwui-item-pad-y) var(--xwui-item-pad-x);
    box-sizing: border-box;
}

/* Size classes — set density tokens only (numbered + legacy aliases) */
:is(.xwui-item-size-4xs,.xwui-item-size-xxxxs) {
    --xwui-item-font-size: var(--xwui-size-font-4xs);
    --xwui-item-pad-y: var(--xwui-size-pad-y-4xs);
    --xwui-item-pad-x: var(--xwui-size-pad-x-4xs);
    --xwui-item-icon-size: var(--xwui-size-icon-4xs);
}
:is(.xwui-item-size-3xs,.xwui-item-size-xxxs) {
    --xwui-item-font-size: var(--xwui-size-font-3xs);
    --xwui-item-pad-y: var(--xwui-size-pad-y-3xs);
    --xwui-item-pad-x: var(--xwui-size-pad-x-3xs);
    --xwui-item-icon-size: var(--xwui-size-icon-3xs);
}
:is(.xwui-item-size-2xs,.xwui-item-size-xxs) {
    --xwui-item-font-size: var(--xwui-size-font-2xs);
    --xwui-item-pad-y: var(--xwui-size-pad-y-2xs);
    --xwui-item-pad-x: var(--xwui-size-pad-x-2xs);
    --xwui-item-icon-size: var(--xwui-size-icon-2xs);
}
.xwui-item-size-xs {
    --xwui-item-font-size: var(--xwui-size-font-xs);
    --xwui-item-pad-y: var(--xwui-size-pad-y-xs);
    --xwui-item-pad-x: var(--xwui-size-pad-x-xs);
    --xwui-item-icon-size: var(--xwui-size-icon-xs);
}
:is(.xwui-item-size-s,.xwui-item-size-sm) {
    --xwui-item-font-size: var(--xwui-size-font-s);
    --xwui-item-pad-y: var(--xwui-size-pad-y-s);
    --xwui-item-pad-x: var(--xwui-size-pad-x-s);
    --xwui-item-icon-size: var(--xwui-size-icon-s);
}
:is(.xwui-item-size-m,.xwui-item-size-md) {
    --xwui-item-font-size: var(--xwui-size-font-m);
    --xwui-item-pad-y: var(--xwui-size-pad-y-m);
    --xwui-item-pad-x: var(--xwui-size-pad-x-m);
    --xwui-item-icon-size: var(--xwui-size-icon-m);
}
:is(.xwui-item-size-l,.xwui-item-size-lg) {
    --xwui-item-font-size: var(--xwui-size-font-l);
    --xwui-item-pad-y: var(--xwui-size-pad-y-l);
    --xwui-item-pad-x: var(--xwui-size-pad-x-l);
    --xwui-item-icon-size: var(--xwui-size-icon-l);
}
.xwui-item-size-xl {
    --xwui-item-font-size: var(--xwui-size-font-xl);
    --xwui-item-pad-y: var(--xwui-size-pad-y-xl);
    --xwui-item-pad-x: var(--xwui-size-pad-x-xl);
    --xwui-item-icon-size: var(--xwui-size-icon-xl);
}
:is(.xwui-item-size-2xl,.xwui-item-size-xxl) {
    --xwui-item-font-size: var(--xwui-size-font-2xl);
    --xwui-item-pad-y: var(--xwui-size-pad-y-2xl);
    --xwui-item-pad-x: var(--xwui-size-pad-x-2xl);
    --xwui-item-icon-size: var(--xwui-size-icon-2xl);
}
:is(.xwui-item-size-3xl,.xwui-item-size-xxxl) {
    --xwui-item-font-size: var(--xwui-size-font-3xl);
    --xwui-item-pad-y: var(--xwui-size-pad-y-3xl);
    --xwui-item-pad-x: var(--xwui-size-pad-x-3xl);
    --xwui-item-icon-size: var(--xwui-size-icon-3xl);
}
:is(.xwui-item-size-4xl,.xwui-item-size-xxxxl) {
    --xwui-item-font-size: var(--xwui-size-font-4xl);
    --xwui-item-pad-y: var(--xwui-size-pad-y-4xl);
    --xwui-item-pad-x: var(--xwui-size-pad-x-4xl);
    --xwui-item-icon-size: var(--xwui-size-icon-4xl);
}

/* Legacy alias classes — inherit token vars from numbered equivalents above */
.xwui-item-size-s { --xwui-item-font-size: var(--xwui-size-font-s); --xwui-item-pad-y: var(--xwui-size-pad-y-s); --xwui-item-pad-x: var(--xwui-size-pad-x-s); --xwui-item-icon-size: var(--xwui-size-icon-s); }
.xwui-item-size-m { --xwui-item-font-size: var(--xwui-size-font-m); --xwui-item-pad-y: var(--xwui-size-pad-y-m); --xwui-item-pad-x: var(--xwui-size-pad-x-m); --xwui-item-icon-size: var(--xwui-size-icon-m); }
.xwui-item-size-l { --xwui-item-font-size: var(--xwui-size-font-l); --xwui-item-pad-y: var(--xwui-size-pad-y-l); --xwui-item-pad-x: var(--xwui-size-pad-x-l); --xwui-item-icon-size: var(--xwui-size-icon-l); }

/* Text overflow styles */
.xwui-item-text-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: var(--max-lines, 1);
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}

.xwui-item-text-expandable-wrapper {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs, 8px);
}

.xwui-item-text-expandable {
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: var(--max-lines, 3);
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    transition: all 0.3s ease;
}

.xwui-item-text-expandable.xwui-item-text-expanded {
    -webkit-line-clamp: unset;
    display: block;
}

.xwui-item-text-expand-btn {
    flex-shrink: 0;
    width: calc(var(--xwui-item-icon-size, 16px) * 1.5);
    height: calc(var(--xwui-item-icon-size, 16px) * 1.5);
    min-width: calc(var(--xwui-item-icon-size, 16px) * 1.5);
    padding: 0;
    border: var(--border-control-width, var(--border-width-regular, 1.5px)) var(--border-control-style, solid) var(--border-control-color, var(--border-color));
    border-radius: var(--radius-control, var(--radius-xs, 4px));
    background: var(--control-bg);
    color: var(--control-text);
    cursor: pointer;
    font-size: var(--xwui-item-font-size, 14px);
    font-weight: bold;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.xwui-item-text-expand-btn:hover {
    background: var(--control-bg-hover);
    border-color: var(--accent-primary);
}

.xwui-item-text-expand-btn:active {
    transform: scale(0.95);
}

/* Content block */
.xwui-item-content-block {
    display: flex;
    align-items: center;
    gap: var(--xwui-item-gap, var(--spacing-xs, 8px));
    flex-wrap: wrap;
    text-align: inherit;
}

/* Text styles */
.xwui-item-text {
    line-height: 1.5;
    text-align: inherit;
}

.xwui-item-text-bold {
    font-weight: 600;
}

.xwui-item-text-subdued {
    color: var(--text-secondary);
    opacity: 0.8;
}

.xwui-item-text-timestamp {
    font-size: 0.85em;
    color: var(--text-tertiary);
}

.xwui-item-select-text {
    user-select: text;
    -webkit-user-select: text;
}

/* Icon styles — scale with parent `.xwui-item-size-*` */
.xwui-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--xwui-item-icon-size, var(--xwui-size-icon-m, 16px));
    height: var(--xwui-item-icon-size, var(--xwui-size-icon-m, 16px));
    flex-shrink: 0;
}

.xwui-item-icon svg {
    width: 100%;
    height: 100%;
}

/* Image styles — scale with parent `.xwui-item-size-*` */
.xwui-item-image {
    width: var(--xwui-item-image-size, var(--xwui-size-m, 32px));
    height: var(--xwui-item-image-size, var(--xwui-size-m, 32px));
    object-fit: cover;
    flex-shrink: 0;
}

.xwui-item-image-circle {
    border-radius: 50%;
}

.xwui-item-image-square {
    border-radius: 4px;
}

/* Progress bar */
.xwui-item-progress-bar {
    width: 100%;
    height: 4px;
    background-color: var(--bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
}

.xwui-item-progress-fill {
    height: 100%;
    background-color: var(--accent-primary);
    transition: width 0.3s ease;
}

/* User stack */
.xwui-item-user-stack {
    display: flex;
    align-items: center;
    position: relative;
}

.xwui-item-user-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--bg-primary);
    object-fit: cover;
    position: relative;
    margin-left: -8px;
}

[dir="rtl"] .xwui-item-user-avatar {
    margin-left: 0;
    margin-right: -8px;
}

.xwui-item-user-avatar:first-child {
    margin-left: 0;
}

[dir="rtl"] .xwui-item-user-avatar:first-child {
    margin-right: 0;
}

/* Collapsed item */
.xwui-item-collapsed {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Standard layout */
.xwui-item-standard-layout {
    display: flex;
    align-items: center;
    gap: var(--xwui-item-gap, var(--spacing-xs, 8px));
    width: 100%;
    min-height: calc(var(--xwui-item-icon-size, 16px) + var(--xwui-item-pad-y, 6px) * 2);
}

.xwui-item-drag-handle {
    cursor: grab;
    display: flex;
    align-items: center;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.xwui-item-drag-handle:hover {
    opacity: 1;
}

.xwui-item-expand-icon {
    width: var(--xwui-item-icon-size, var(--xwui-size-icon-m, 16px));
    height: var(--xwui-item-icon-size, var(--xwui-size-icon-m, 16px));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.xwui-item-expand-icon.xwui-item-expanded {
    transform: rotate(90deg);
}

[dir="rtl"] .xwui-item-expand-icon.xwui-item-expanded {
    transform: rotate(-90deg) scaleX(-1);
}

.xwui-item-primary-content {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-align: inherit;
}

.xwui-item-add-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs, 4px);
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    opacity: 0;
    transition: all 0.2s ease;
}

.xwui-item:hover .xwui-item-add-button {
    opacity: 1;
}

.xwui-item-add-button:hover {
    background-color: var(--bg-hover);
}

/* XL layout (chat_bubble only) */
.xwui-item-xl-layout {
    display: flex;
    gap: var(--xwui-item-gap, var(--spacing-sm, 12px));
    width: 100%;
}

.xwui-item-checkbox {
    margin-top: 2px;
    flex-shrink: 0;
    width: calc(var(--xwui-item-icon-size, 16px) * 0.9);
    height: calc(var(--xwui-item-icon-size, 16px) * 0.9);
}

.xwui-item-xl-avatar-wrapper {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    padding-top: 2px;
}

/* Avatar wrapper RTL: same approach as xwui-item-content-block - no flex-direction reversal */
[dir="rtl"] .xwui-item-xl-avatar-wrapper {
    /* DO NOT use flex-direction: row-reverse - let browser handle RTL naturally with dir attribute */
    text-align: right;
}

[dir="ltr"] .xwui-item-xl-avatar-wrapper {
    text-align: left;
}

.xwui-item-xl-content-wrapper {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.xwui-item-xl-reaction-wrapper {
    display: flex;
    align-items: center;
    padding-left: 56px;
    margin-top: 4px;
    min-height: 20px;
}

[dir="rtl"] .xwui-item-xl-reaction-wrapper {
    padding-left: 0;
    padding-right: 56px;
}

.xwui-item-xl-content {
    flex: 1;
    min-width: 0;
    text-align: inherit;
}

.xwui-item-xl-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-sm, 12px);
    text-align: inherit;
}

.xwui-item-xl-header-other {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 8px);
    flex-shrink: 0;
}

.xwui-item-actions {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-xs, 4px) / 2);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.xwui-item:hover .xwui-item-actions {
    opacity: 1;
}

.xwui-item-action-button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs, 4px);
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.xwui-item-action-button:hover {
    background-color: var(--bg-hover);
}

/* Search item */
.xwui-item-search-container {
    position: relative;
    width: 100%;
}

.xwui-item-search-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    pointer-events: none;
    color: var(--text-tertiary);
}

.xwui-item-search-icon-ltr {
    left: 12px;
}

.xwui-item-search-icon-rtl {
    right: 12px;
}

.xwui-item-search-input {
    width: 100%;
    padding: var(--spacing-xs, 8px) var(--spacing-sm, 12px);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    font-size: 13px;
    transition: all 0.2s ease;
}

.xwui-item-search-input-ltr {
    padding-left: 36px;
}

.xwui-item-search-input-rtl {
    padding-right: 36px;
}

.xwui-item-search-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    /* Focus ring using accent color with opacity - works across all themes */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 10%, transparent);
}

/* Group list */
.xwui-item-group-list {
    margin-top: 4px;
}

.xwui-item-group-ltr {
    padding-left: 16px;
}

.xwui-item-group-rtl {
    padding-right: 16px;
}

[dir="rtl"] .xwui-item-group-list {
    padding-right: 16px;
    padding-left: 0;
}

[dir="ltr"] .xwui-item-group-list {
    padding-left: 16px;
    padding-right: 0;
}

/* XWUIItemGroup styles */
.xwui-item-group {
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-xs, 4px) / 4);
}

.xwui-item-group-item {
    width: 100%;
}

.xwui-item-nested-group {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-xs, 4px) / 4);
}

/* List item spacing - for standalone items in lists */
.xwui-item-list-item {
    margin-bottom: 2px;
}

.xwui-item-list-item:last-child {
    margin-bottom: 0;
}

/* Highlighted item */
.xwui-item-highlighted {
    animation: xwui-item-highlight 1.5s ease-out;
}

@keyframes xwui-item-highlight {
    from {
        background-color: var(--accent-primary);
        opacity: 0.3;
    }
    to {
        background-color: transparent;
        opacity: 0;
    }
}

/* RTL support */
[dir="rtl"] .xwui-item {
    text-align: right;
    direction: rtl;
}

[dir="ltr"] .xwui-item {
    text-align: left;
    direction: ltr;
}

[dir="rtl"] .xwui-item-standard-layout {
    flex-direction: row-reverse;
}

[dir="rtl"] .xwui-item-xl-layout {
    flex-direction: row-reverse;
}

[dir="rtl"] .xwui-item-xl-content-wrapper {
    text-align: right;
}

[dir="rtl"] .xwui-item-xl-header {
    /* DOM order is already reversed, so no need for flex-direction: row-reverse */
    text-align: right;
}

[dir="rtl"] .xwui-item-xl-header-other {
    flex-direction: row-reverse;
}

[dir="rtl"] .xwui-item-actions {
    flex-direction: row-reverse;
}

[dir="rtl"] .xwui-item-content-block {
    /* DO NOT use flex-direction: row-reverse - it causes text mirroring */
    /* Let browser handle RTL text flow naturally with dir attribute */
    text-align: right;
}

[dir="ltr"] .xwui-item-content-block {
    text-align: left;
}

[dir="rtl"] .xwui-item-user-stack {
    flex-direction: row-reverse;
}

/* xwui-item-text-expandable-wrapper: RTL handled naturally by browser with dir attribute */

[dir="rtl"] .xwui-item-checkbox {
    order: 1;
}

[dir="rtl"] .xwui-item-xl-content {
    order: 0;
    text-align: right;
}

[dir="ltr"] .xwui-item-xl-content {
    text-align: left;
}

[dir="rtl"] .xwui-item-primary-content {
    text-align: right;
}

[dir="ltr"] .xwui-item-primary-content {
    text-align: left;
}

[dir="rtl"] .xwui-item-text {
    text-align: right;
}

[dir="ltr"] .xwui-item-text {
    text-align: left;
}


/* basic/XWUIItemGroup/XWUIItemGroup.css */
/* No styles for this component — placeholder written by tools/copy-lib-components.ts so the runtime CSS auto-loader doesn't 404. */

/* basic/XWUIKbd/XWUIKbd.css */
/**
 * XWUIKbd Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Typography: theme/typography/*.css
 */

.xwui-kbd {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs, 0.25rem);
    font-family: var(--font-code-family, var(--font-family-mono, ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace));
}

.xwui-kbd-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75em;
    height: 1.75em;
    padding: 0 0.5em;
    border: var(--border-kbd-width, var(--border-width-regular, 1.5px)) var(--border-kbd-style, solid) var(--border-kbd-color, var(--border-color));
    border-radius: var(--radius-kbd, var(--radius-xs, 4px));
    background: var(--bg-secondary);
    box-shadow: var(--shadow-xs, 0 1px 0 var(--border-color)), inset 0 -1px 0 var(--border-color);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1;
}

/* Size variants */
.xwui-kbd-small .xwui-kbd-key {
    min-width: 1.5em;
    height: 1.5em;
    padding: 0 0.375em;
    font-size: var(--font-size-xs, 0.75rem);
}

.xwui-kbd-large .xwui-kbd-key {
    min-width: 2em;
    height: 2em;
    padding: 0 0.625em;
    font-size: var(--font-size-base, 1rem);
}

.xwui-kbd-separator {
    color: var(--text-secondary);
    font-weight: var(--font-weight-medium, 500);
}


/* basic/XWUIKnob/XWUIKnob.css */
.xwui-knob {
  position: relative;
  border-radius: 50%;
  background: var(--color-surface, #f3f4f6);
  border: 2px solid var(--color-border, #e5e7eb);
  cursor: ns-resize;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.xwui-knob:focus-visible {
  outline: 2px solid var(--accent-primary, #4f46e5);
  outline-offset: 2px;
}

.xwui-knob-track {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--color-surface-elevated, #fff);
  overflow: hidden;
}

.xwui-knob-fill {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  transform: rotate(-90deg);
}

.xwui-knob-value {
  position: relative;
  z-index: 1;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
}

.xwui-knob-disabled,
.xwui-knob-readonly {
  cursor: not-allowed;
  opacity: 0.7;
}

/* basic/XWUILabel/XWUILabel.css */
/**
 * XWUILabel Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Typography: theme/typography/*.css
 */

.xwui-label {
    display: inline-block;
    font-weight: var(--font-weight-medium, 500);
    font-family: var(--font-label-family, var(--font-family-base, sans-serif));
    margin-bottom: var(--spacing-xs, 0.375rem);
    transition: color 0.2s;
}

.xwui-label-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Size variants */
.xwui-label-small {
    font-size: var(--font-size-xs, 0.75rem);
}

.xwui-label-medium {
    font-size: var(--font-size-sm, 0.875rem);
}

.xwui-label-large {
    font-size: var(--font-size-base, 1rem);
}

/* Required indicator */
.xwui-label-required {
    color: var(--accent-error);
    font-weight: var(--font-weight-semibold, 600);
}


/* basic/XWUILanguages/XWUILanguages.css */
.xwui-languages-host {
    min-width: min(100%, 280px);
    max-width: 100%;
}

/* basic/XWUILayout/XWUILayout.css */
/**
 * XWUILayout Component Styles
 * Ant Design Layout: Header, Sider, Content, Footer.
 */
.xwui-layout {
  display: flex;
  flex-direction: column;
  min-height: 0;
  box-sizing: border-box;
}

.xwui-layout-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.xwui-layout-header {
  flex-shrink: 0;
  background: var(--color-layout-header-bg, var(--bg-primary));
  border-bottom: 1px solid var(--color-layout-border, rgba(0,0,0,0.06));
}

.xwui-layout-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

.xwui-layout-sider {
  flex-shrink: 0;
  background: var(--color-layout-sider-bg, var(--bg-primary));
  border-inline-end: 1px solid var(--color-layout-border, rgba(0,0,0,0.06));
}

.xwui-layout-content {
  flex: 1;
  min-width: 0;
  overflow: auto;
  background: var(--color-layout-content-bg, transparent);
}

.xwui-layout-footer {
  flex-shrink: 0;
  background: var(--color-layout-footer-bg, var(--bg-primary));
  border-top: 1px solid var(--color-layout-border, rgba(0,0,0,0.06));
}

.xwui-layout-vertical .xwui-layout-body {
  flex-direction: column;
}

.xwui-layout-vertical .xwui-layout-sider {
  border-inline-end: none;
  border-bottom: 1px solid var(--color-layout-border, rgba(0,0,0,0.06));
}

/* basic/XWUILayoutFlow/XWUILayoutFlow.css */
/**
 * XWUILayoutFlow — collection flow shell + catalog index grid.
 */

.xwui-layout-flow {
    width: 100%;
    min-width: 0;
    min-height: 0;
}

.xwui-layout-flow--h-rtl {
    direction: rtl;
}

.xwui-layout-flow--h-ltr {
    direction: ltr;
}

.xwui-layout-flow__grid,
.xwui-layout-flow__masonry,
.xwui-layout-flow__masonry-wrap {
    width: 100%;
}

/* Catalog index (centered max-width wrapper via XWUIBox) */
.xwui-layout-flow-catalog-index {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-xl, 2rem);
    width: 100%;
    box-sizing: border-box;
}

.xwui-layout-flow-catalog-grid .xwui-card {
    cursor: pointer;
}

.xwui-layout-flow-catalog-grid .xwui-card-footer-tags {
    gap: var(--spacing-xs, 0.25rem);
}

.xwui-layout-flow-catalog-grid .xwui-card-footer-tags .xwui-tag,
.xwui-layout-flow-catalog-grid .xwui-card-footer-tags .xwui-tag-label {
    font-size: 0.6875rem;
    padding: 0.125rem 0.375rem;
    line-height: 1.3;
}

.xwui-layout-flow-catalog-grid .xwui-card-footer-tags .xwui-tag {
    min-height: auto;
}

/* ItemBrowser icon grid density hooks stay on item group class */
.xwui-layout-flow .xwui-item-browser-icon-grid {
    width: 100%;
}

/* basic/XWUILayoutMasonry/XWUILayoutMasonry.css */
/**
 * XWUILayoutMasonry — shell around layout-flow masonry engine.
 */

.xwui-layout-masonry-root {
  width: 100%;
  min-width: 0;
}

.xwui-layout-masonry .xwui-layout-flow__masonry,
.xwui-layout-masonry .xwui-layout-masonry__engine {
  width: 100%;
}

/* basic/XWUILayoutRegion/XWUILayoutRegion.css */
/**
 * XWUILayoutRegion Component Styles
 * 3×3 named region layout with animation support.
 */

.xwui-layout-region {
  --xwui-lr-anim: 280ms;
  --xwui-lr-gap: 0px;
  --xwui-lr-overflow: auto;
  position: relative;
  width: 100%;
  display: grid;
  box-sizing: border-box;
  gap: var(--xwui-lr-gap);
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  transition:
    grid-template-columns var(--xwui-lr-anim) cubic-bezier(0.4, 0, 0.2, 1),
    grid-template-rows var(--xwui-lr-anim) cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Slots ── */

.xwui-layout-region-slot {
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  overflow: var(--xwui-lr-overflow);
  transition:
    opacity var(--xwui-lr-anim) cubic-bezier(0.4, 0, 0.2, 1),
    transform var(--xwui-lr-anim) cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
  transform: scale(1);
}

.xwui-layout-region-slot > * {
  flex: 1;
  min-width: 0;
  min-height: 0;
}

/* ── Slot states ── */

.xwui-lr-slot--hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.92);
}

.xwui-lr-slot--shrunk {
  opacity: 0.45;
  transform: scale(0.88);
  overflow: hidden;
}

.xwui-lr-slot--expanded {
  z-index: 1;
  /* Expanded-slot focus ring — uses the accent-primary-alpha token so the
     ring picks up the currently-selected accent instead of the hardcoded
     indigo rgba(99, 102, 241, 0.35). Falls back to rgba() composition using
     the primary-rgb tuple for older browsers without color-mix support. */
  box-shadow: 0 0 0 2px rgba(var(--accent-primary-rgb, 99, 102, 241), 0.35);
  box-shadow: 0 0 0 2px var(--accent-primary-alpha);
}

/* ── Cross-fade for layout changes ── */

.xwui-layout-region.xwui-lr-fade .xwui-layout-region-slot {
  opacity: 0.08 !important;
  transform: scale(0.96) !important;
}

/* ── Scalable modifier ── */

.xwui-layout-region-scalable {
  max-width: 100%;
  max-height: 100%;
}

/* basic/XWUILeadScore/XWUILeadScore.css */
/* XWUILeadScore - banded lead score visualization */

.xwui-lead-score {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-family: var(--font-body, inherit);
  color: var(--text-primary);
}

/* Band colour: drives currentColor for the dial arc and fill backgrounds */
/* Use --role-*-bg (the actual hue token) for text colour, not --role-*-fg
 * which is the contrast colour designed for text-on-coloured-background. */
.xwui-lead-score-band-frozen   { color: var(--text-tertiary, #888); }
.xwui-lead-score-band-cold     { color: var(--role-info-bg, #0369a1); }
.xwui-lead-score-band-lukewarm { color: var(--role-info-bg, #0ea5e9); opacity: 0.85; }
.xwui-lead-score-band-warm     { color: var(--role-warning-bg, #fbbf24); }
.xwui-lead-score-band-hot      { color: var(--role-danger-bg, #b91c1c); }
.xwui-lead-score-band-on-fire  { color: var(--role-danger-bg, #b91c1c); font-weight: 700; }

/* Sizes */
:is(.xwui-lead-score-s,.xwui-lead-score-sm) .xwui-lead-score-value { font-size: 0.875rem; }
:is(.xwui-lead-score-m,.xwui-lead-score-md) .xwui-lead-score-value { font-size: 1rem; }
:is(.xwui-lead-score-l,.xwui-lead-score-lg) .xwui-lead-score-value { font-size: 1.25rem; }

/* Chip mode */
.xwui-lead-score-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--bg-elevated);
  border: 1px solid currentColor;
  width: fit-content;
}
.xwui-lead-score-chip .xwui-lead-score-value {
  font-weight: 700;
  color: currentColor;
  font-variant-numeric: tabular-nums;
}
.xwui-lead-score-chip .xwui-lead-score-band {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: currentColor;
  opacity: 0.85;
}

/* Thermometer mode */
.xwui-lead-score-thermometer { min-width: 8rem; }
.xwui-lead-score-thermometer .xwui-lead-score-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.xwui-lead-score-thermometer .xwui-lead-score-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: currentColor;
}
.xwui-lead-score-thermometer .xwui-lead-score-band {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: currentColor;
  opacity: 0.85;
}
.xwui-lead-score-delta {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.xwui-lead-score-delta-up   { color: var(--role-success-bg, #15803d); }
.xwui-lead-score-delta-down { color: var(--role-danger-bg, #b91c1c); }

.xwui-lead-score-track {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: var(--bg-elevated);
  overflow: hidden;
}
.xwui-lead-score-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: currentColor;
  border-radius: 999px;
  transition: width 0.3s ease;
}
.xwui-lead-score-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 0.6875rem;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  margin-top: 0.125rem;
}
.xwui-lead-score-label {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  font-style: italic;
}

/* Dial mode */
.xwui-lead-score-dial-mode {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.xwui-lead-score-dial { display: block; color: currentColor; }
.xwui-lead-score-dial-text { font-family: var(--font-body, inherit); }
.xwui-lead-score-dial + .xwui-lead-score-band {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: currentColor;
  opacity: 0.85;
}

/* basic/XWUIList/XWUIList.css */
/**
 * XWUIList Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Roundness: theme/roundness/rounded.css (global roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-list-select-all {
    padding: var(--spacing-sm, 0.75rem) var(--spacing-md, 1rem);
    border-bottom: var(--border-list-width, var(--border-width-regular, 1.5px)) var(--border-list-style, solid) var(--border-list-color, var(--border-color));
    display: flex;
    align-items: center;
}

.xwui-list-select-all label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
    cursor: pointer;
    font-weight: var(--font-weight-medium, 500);
}

.xwui-list-select-all-checkbox {
    cursor: pointer;
}

.xwui-list-item-checkbox {
    margin-right: 0.75rem;
    cursor: pointer;
}

.xwui-list-item-checked {
    background: var(--bg-secondary);
}

.xwui-list {
    display: flex;
    flex-direction: column;
}

.xwui-list-bordered {
    border: var(--border-list-width, var(--border-width-regular, 1.5px)) var(--border-list-style, solid) var(--border-list-color, var(--border-color));
    border-radius: var(--radius-list, var(--radius-md, 8px));
    overflow: hidden;
}

/* HIG-style list variants */
.xwui-list-plain {
    background: transparent;
}

.xwui-list-grouped {
    background: var(--bg-secondary);
    border-radius: var(--radius-list);
}

.xwui-list-grouped [data-item-id] {
    background: var(--bg-primary);
    margin: var(--spacing-xs) 0;
    border-radius: var(--radius-sm);
}

.xwui-list-inset [data-item-id] {
    margin-left: var(--spacing-md);
    margin-right: var(--spacing-md);
    border-radius: var(--radius-sm);
}

.xwui-list-hoverable [data-item-id] {
    transition: background 0.2s;
}

.xwui-list-hoverable [data-item-id]:hover {
    background: var(--bg-secondary);
}

/* Size variants (canonical 9-step scale) */
:is(.xwui-list-3xs,.xwui-list-xxxs) { font-size: var(--font-size-xs, 0.5rem); }
:is(.xwui-list-4xs,.xwui-list-xxxxs) { font-size: var(--font-size-xs, 0.5rem); }
:is(.xwui-list-2xs,.xwui-list-xxs) { font-size: var(--font-size-xs, 0.625rem); }
.xwui-list-xs { font-size: var(--font-size-xs, 0.75rem); }
:is(.xwui-list-s,.xwui-list-sm) { font-size: var(--font-size-sm, 0.8125rem); }
:is(.xwui-list-m,.xwui-list-md) { font-size: var(--font-size-sm, 0.875rem); }
:is(.xwui-list-l,.xwui-list-lg) { font-size: var(--font-size-base, 0.9375rem); }
.xwui-list-xl { font-size: var(--font-size-base, 1.0625rem); }
:is(.xwui-list-2xl,.xwui-list-xxl) { font-size: var(--font-size-lg, 1.375rem); }
:is(.xwui-list-3xl,.xwui-list-xxxl) { font-size: var(--font-size-xl, 1.7rem); }
:is(.xwui-list-4xl,.xwui-list-xxxxl) { font-size: var(--font-size-xl, 1.7rem); }

/* Legacy size aliases */
.xwui-list-small { font-size: var(--font-size-sm, 0.8125rem); }
.xwui-list-medium { font-size: var(--font-size-sm, 0.875rem); }
.xwui-list-large { font-size: var(--font-size-base, 0.9375rem); }

/* Density (M3, Fluent, Carbon) — item padding via list padding / select-all */
.xwui-list[data-density="compact"] .xwui-list-select-all,
.xwui-list[data-density="compact"] [data-item-id] {
    padding: var(--control-padding-y-compact) var(--control-padding-x-compact);
}
.xwui-list[data-density="comfortable"] .xwui-list-select-all,
.xwui-list[data-density="comfortable"] [data-item-id] {
    padding: var(--control-padding-y-comfortable) var(--control-padding-x-comfortable);
}
.xwui-list[data-density="spacious"] .xwui-list-select-all,
.xwui-list[data-density="spacious"] [data-item-id] {
    padding: var(--control-padding-y-spacious) var(--control-padding-x-spacious);
}


/* basic/XWUILogo/XWUILogo.css */
/**
 * XWUILogo Component Styles
 * Clean logo + optional title/subtitle.
 */

.xwui-logo {
    display: inline-flex;
    min-height: 0;
    margin: 0;
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    overflow: visible;
}

.xwui-logo .xwui-logo-container {
    overflow: visible;
    --xwui-logo-bound-w: 160px;
    --xwui-logo-bound-h: 100px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.xwui-logo .xwui-logo-container.layout-v {
    flex-direction: column;
}

.xwui-logo .xwui-logo-container.layout-h {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 12px;
}

.xwui-logo .xwui-logo-container:is(.size-3xs,.size-xxxs) { --xwui-logo-bound-w:  32px; --xwui-logo-bound-h:  22px; }
.xwui-logo .xwui-logo-container:is(.size-4xs,.size-xxxxs) { --xwui-logo-bound-w:  16px; --xwui-logo-bound-h:  11px; }
.xwui-logo .xwui-logo-container:is(.size-2xs,.size-xxs)  { --xwui-logo-bound-w:  50px; --xwui-logo-bound-h:  34px; }
.xwui-logo .xwui-logo-container.size-xs   { --xwui-logo-bound-w:  72px; --xwui-logo-bound-h:  48px; }
.xwui-logo .xwui-logo-container:is(.size-s,.size-sm)   { --xwui-logo-bound-w: 110px; --xwui-logo-bound-h:  72px; }
.xwui-logo .xwui-logo-container:is(.size-m,.size-md)   { --xwui-logo-bound-w: 160px; --xwui-logo-bound-h: 100px; }
.xwui-logo .xwui-logo-container:is(.size-l,.size-lg)   { --xwui-logo-bound-w: 220px; --xwui-logo-bound-h: 140px; }
.xwui-logo .xwui-logo-container.size-xl   { --xwui-logo-bound-w: 320px; --xwui-logo-bound-h: 200px; }
.xwui-logo .xwui-logo-container:is(.size-2xl,.size-xxl)  { --xwui-logo-bound-w: 440px; --xwui-logo-bound-h: 280px; }
.xwui-logo .xwui-logo-container:is(.size-3xl,.size-xxxl) { --xwui-logo-bound-w: 600px; --xwui-logo-bound-h: 380px; }
.xwui-logo .xwui-logo-container:is(.size-4xl,.size-xxxxl) { --xwui-logo-bound-w: 960px; --xwui-logo-bound-h: 608px; }

.xwui-logo .xwui-logo-visual-wrapper {
    margin: 0;
    padding: 0;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    overflow: visible;
}

.xwui-logo .xwui-logo-svg-host {
    overflow: visible;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--xwui-logo-render-width, var(--xwui-logo-bound-w));
    height: var(--xwui-logo-render-height, var(--xwui-logo-bound-h));
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
}

.xwui-logo .xwui-logo-svg-host svg {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: block;
    shape-rendering: geometricPrecision;
    filter: var(--drop-shadow-logo);
    overflow: visible;
}

/* ── Image logo (<img> from `src` config) ──────────────── */
.xwui-logo .xwui-logo-img {
    display: block;
    width: var(--xwui-logo-render-width, var(--xwui-logo-bound-w));
    height: var(--xwui-logo-render-height, var(--xwui-logo-bound-h));
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-xs, 4px);
}

/* ── Text/Icon mark (from `text` or `icon` config) ─────── */
.xwui-logo .xwui-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--xwui-logo-render-height, var(--xwui-logo-bound-h));
    height: var(--xwui-logo-render-height, var(--xwui-logo-bound-h));
    max-width: var(--xwui-logo-bound-w);
    max-height: var(--xwui-logo-bound-h);
    background: var(--accent-primary, #6366f1);
    color: #fff;
    font-weight: 700;
    font-size: calc(var(--xwui-logo-render-height, var(--xwui-logo-bound-h)) * 0.5);
    flex-shrink: 0;
    user-select: none;
    line-height: 1;
}

.xwui-logo .xwui-logo-mark-circle { border-radius: 50%; }
.xwui-logo .xwui-logo-mark-rounded { border-radius: var(--radius-md, 8px); }
.xwui-logo .xwui-logo-mark-square { border-radius: 0; }

/* Icon inside mark inherits color */
.xwui-logo .xwui-logo-mark .xwui-icon,
.xwui-logo .xwui-logo-mark .xwui-icon svg {
    color: inherit !important;
    stroke: currentColor;
    fill: none;
}

.xwui-logo .xwui-logo-brand-title {
    font-size: var(--xwui-logo-title-font-size, 2rem);
    font-weight: var(--xwui-logo-title-font-weight, 700);
    letter-spacing: var(--xwui-logo-title-letter-spacing, -1px);
    line-height: var(--xwui-logo-title-line-height, 1);
    font-family: var(--xwui-logo-title-font-family, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
    color: var(--text-primary);
    display: inline-flex;
    align-items: baseline;
    gap: 0;
}

.xwui-logo .xwui-logo-brand-title .xwui-logo-title-part {
    display: inline-block;
}

.xwui-logo .xwui-logo-text-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.xwui-logo .xwui-logo-container.layout-h .xwui-logo-text-block {
    align-items: flex-start;
}

.xwui-logo .xwui-logo-brand-subtitle {
    font-size: var(--xwui-logo-subtitle-font-size, 0.75rem);
    font-weight: var(--xwui-logo-subtitle-font-weight, 500);
    letter-spacing: var(--xwui-logo-subtitle-letter-spacing, 0.08em);
    line-height: var(--xwui-logo-subtitle-line-height, 1.2);
    text-transform: var(--xwui-logo-subtitle-text-transform, uppercase);
    font-family: var(--xwui-logo-subtitle-font-family, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
    color: var(--text-secondary);
}

/* Dark/light color scheme: logo text and graphic black or white */
.xwui-logo.xwui-logo-scheme-light {
    color: #111111;
}

.xwui-logo.xwui-logo-scheme-light .xwui-logo-brand-title,
.xwui-logo.xwui-logo-scheme-light .xwui-logo-brand-title .xwui-logo-title-part {
    color: #111111;
}

.xwui-logo.xwui-logo-scheme-light .xwui-logo-brand-subtitle {
    color: #333333;
}

.xwui-logo.xwui-logo-scheme-dark {
    color: #ffffff;
}

.xwui-logo.xwui-logo-scheme-dark .xwui-logo-brand-title,
.xwui-logo.xwui-logo-scheme-dark .xwui-logo-brand-title .xwui-logo-title-part {
    color: #ffffff;
}

.xwui-logo.xwui-logo-scheme-dark .xwui-logo-brand-subtitle {
    color: rgba(255, 255, 255, 0.85);
}

/* Dark scheme: only title/subtitle text is white; logo graphic keeps original colors */


/* Logo-only mode with shape-only brand: hide wordmark so only the icon shows (from brand logo.json) */
.xwui-logo-svg-host.xwui-logo-shape-only .exonware-logo-text {
    display: none;
}

/* ── Item mode (logoConfig: 'item') ───────────────────────────────────────
   Render the logo as a clickable list/menu item row — a brand mark followed
   by its title, with hover + active affordances. Lets a logo act as an
   XWUIItem-style entry (e.g. a system launcher in an app shell). */
.xwui-logo-container.xwui-logo-item {
    flex-direction: row;
    align-items: center;
    gap: 0.625rem;
    inline-size: 100%;
    box-sizing: border-box;
    padding: 0.45rem 0.6rem;
    border-radius: var(--border-radius-md, 8px);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.xwui-logo-container.xwui-logo-item:hover {
    background-color: var(--bg-hover, color-mix(in srgb, currentColor 8%, transparent));
}
.xwui-logo-container.xwui-logo-item:focus-visible {
    outline: 2px solid var(--accent-color, #2962ff);
    outline-offset: 1px;
}
.xwui-logo-container.xwui-logo-item.is-active,
.xwui-logo-container.xwui-logo-item[aria-current='true'] {
    background-color: color-mix(in srgb, var(--accent-color, #2962ff) 14%, transparent);
}
/* Keep the title compact + truncating in the item row. */
.xwui-logo-container.xwui-logo-item .xwui-logo-text-block {
    min-inline-size: 0;
    flex: 1 1 auto;
}
.xwui-logo-container.xwui-logo-item .xwui-logo-brand-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* basic/XWUILogoStrip/XWUILogoStrip.css */
/* No styles for this component — placeholder written by tools/copy-lib-components.ts so the runtime CSS auto-loader doesn't 404. */

/* basic/XWUIMap/XWUIMap.css */
/* XWUIMap Component Styles
 * Multi-provider Leaflet-backed map. Structure + state only — Leaflet's own CSS
 * (loaded from CDN at runtime) handles tile-pane / control / popup chrome.
 */

.xwui-map {
  width: 100%;
  height: 100%;
  min-height: 300px;
  position: relative;
  display: block;
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  background: var(--bg-elevated);
  font-family: var(--font-body, inherit);
  color: var(--text-primary);
}

.xwui-map-canvas {
  width: 100%;
  height: 100%;
  background: var(--bg-elevated);
}

/* Keep Leaflet tiles SQUARE — component-scoped defense in depth. The global
 * guarantee lives in src/styles/core/utilities.css (co-located with the image
 * rounding rule it counteracts); this mirror keeps the component correct even
 * when loaded standalone without core utilities. Covers raster tiles (<img>),
 * vector / heat tiles (<canvas>), and image overlays — a rounded app theme
 * (glass / data-roundness) would otherwise round each tile, leaving
 * star-shaped "sparkle" gaps where four rounded tiles meet. The map CONTAINER
 * stays rounded (.xwui-map) — only the inner tiles are reset. */
.xwui-map .leaflet-tile,
.xwui-map .leaflet-pane img.leaflet-tile,
.xwui-map .leaflet-tile-container img,
.xwui-map .leaflet-tile-container canvas,
.xwui-map .leaflet-pane > canvas,
.xwui-map img.leaflet-image-layer,
.xwui-map img.leaflet-marker-icon {
  border-radius: 0 !important;
}

/* Loading skeleton — shown during async CDN bootstrap */
.xwui-map-loading {
  position: absolute;
  inset: 0;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: var(--bg-elevated, rgba(255, 255, 255, 0.92));
  color: var(--text-secondary, #666);
  font-size: 0.875rem;
}

.xwui-map-loading-spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid var(--border-color, rgba(0, 0, 0, 0.12));
  border-top-color: var(--accent-color, #3388ff);
  border-radius: 50%;
  animation: xwui-map-spin 0.8s linear infinite;
}

@keyframes xwui-map-spin {
  to { transform: rotate(360deg); }
}

.xwui-map-retry-btn {
  margin-top: 0.5rem;
  padding: 0.375rem 0.875rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-primary);
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
}
.xwui-map-retry-btn:hover {
  background: var(--bg-hover);
}

/* Error state — shown when Leaflet fails to load (offline / blocked CDN) */
.xwui-map-error {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 1rem;
  color: var(--role-danger-bg, #b91c1c);
  font-size: 0.875rem;
  font-style: italic;
  text-align: center;
}

/* Selected-marker hint (used when consumer code adds 'xwui-map-marker-selected' to icon className) */
.xwui-map-marker-selected {
  filter: hue-rotate(180deg) brightness(1.5);
  border: 2px solid var(--role-warning-bg, #fbbf24);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--role-warning-bg, #fbbf24);
}

/* Provider/theme picker chrome (optional — host app may render its own) */
.xwui-map-controls {
  position: absolute;
  z-index: 1000;
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 4px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
  font-size: 0.8125rem;
}
.xwui-map-controls-top-right    { top: 8px;    right: 8px;  }
.xwui-map-controls-top-left     { top: 8px;    left: 8px;   }
.xwui-map-controls-bottom-right { bottom: 8px; right: 8px;  }
.xwui-map-controls-bottom-left  { bottom: 8px; left: 8px;   }

.xwui-map-controls select,
.xwui-map-controls button {
  padding: 4px 8px;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  background: var(--bg-primary);
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
}
.xwui-map-controls button:hover { background: var(--bg-hover); }

/* Playback overlay — bottom-right floating control row (play/pause, speed, loop).
 * Only mounted when data.playback is supplied; no-op for static maps. */
.xwui-map-playback-controls {
  position: absolute;
  bottom: var(--spacing-sm, 8px);
  right: var(--spacing-sm, 8px);
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs, 6px);
  padding: var(--spacing-xs, 6px) var(--spacing-sm, 8px);
  background: var(--surface-primary, var(--bg-primary, #fff));
  color: var(--text-primary, #111);
  border: 1px solid var(--border-container-color, var(--border-color, rgba(0,0,0,0.12)));
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
  font-size: 0.8125rem;
}

.xwui-map-playback-controls .xwui-map-playback-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 var(--spacing-xs, 6px);
  border: 1px solid var(--border-container-color, var(--border-color, rgba(0,0,0,0.12)));
  border-radius: var(--radius-sm, 4px);
  background: var(--surface-primary, var(--bg-primary, #fff));
  color: var(--text-primary, #111);
  font: inherit;
  cursor: pointer;
}
.xwui-map-playback-controls .xwui-map-playback-play:hover {
  background: var(--accent-color, var(--bg-hover, rgba(0,0,0,0.05)));
  color: var(--text-on-accent, var(--text-primary, #111));
}

.xwui-map-playback-controls .xwui-map-playback-speed {
  height: 28px;
  padding: 0 var(--spacing-xs, 6px);
  border: 1px solid var(--border-container-color, var(--border-color, rgba(0,0,0,0.12)));
  border-radius: var(--radius-sm, 4px);
  background: var(--surface-primary, var(--bg-primary, #fff));
  color: var(--text-primary, #111);
  font: inherit;
  cursor: pointer;
}

.xwui-map-playback-controls .xwui-map-playback-loop {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs, 4px);
  color: var(--text-primary, #111);
  cursor: pointer;
  user-select: none;
}

/* Default playback marker icon — kept neutral so consumers can override via
 * a marker style sheet without specificity wars. */
.xwui-map-playback-marker {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent-color, #3388ff);
  border: 2px solid var(--surface-primary, #fff);
  box-shadow: 0 0 0 1px var(--border-container-color, rgba(0,0,0,0.2));
}

/* Live tracking marker (WebSocket / track replay) */
.xwui-map-tracking-marker {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--role-success-bg, #16a34a);
  border: 2px solid var(--surface-primary, #fff);
  box-shadow: 0 0 0 2px var(--role-success-bg, #16a34a);
}

/* Size-able SVG pin marker (data.markers[].iconSize). Leaflet's divIcon adds a
 * white box + border by default — strip it so only the SVG pin shows. */
.xwui-map-pin {
  background: transparent;
  border: none;
}
.xwui-map-pin svg {
  display: block;
}

/* basic/XWUIMarkdownDisplay/XWUIMarkdownDisplay.css */
/**
 * XWUIMarkdownDisplay Component Styles
 *
 * Deliberately background-free: the root `.xwui-markdown-display` sets NO
 * background and NO border so it inherits whatever surface it's placed on
 * (docs page, chat bubble, card body, tooltip). Only typographic + inline
 * element styling lives here; all colors come from xwui theme tokens.
 */

.xwui-markdown-display {
    /* No background. No border. No padding. Inherit the host surface. */
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-family-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-size: var(--font-size-md, 0.95rem);
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

/* Collapse outer margins so the block sits flush in any container. */
.xwui-markdown-display > :first-child { margin-top: 0; }
.xwui-markdown-display > :last-child { margin-bottom: 0; }

/* ── Headings ─────────────────────────────────────────── */
.xwui-markdown-display .xwui-md-h {
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.3;
    margin: 1.4em 0 0.6em;
}
.xwui-markdown-display .xwui-md-h1 { font-size: 1.7em; }
.xwui-markdown-display .xwui-md-h2 { font-size: 1.4em; }
.xwui-markdown-display .xwui-md-h3 { font-size: 1.18em; }
.xwui-markdown-display .xwui-md-h4 { font-size: 1.05em; }
.xwui-markdown-display .xwui-md-h5 { font-size: 0.95em; text-transform: uppercase; letter-spacing: 0.04em; }
.xwui-markdown-display .xwui-md-h6 { font-size: 0.88em; color: var(--text-secondary); }

/* ── Paragraphs + inline ──────────────────────────────── */
.xwui-markdown-display .xwui-md-p { margin: 0.7em 0; }

.xwui-markdown-display .xwui-md-strong { font-weight: 700; }
.xwui-markdown-display .xwui-md-em { font-style: italic; }
.xwui-markdown-display .xwui-md-del { text-decoration: line-through; opacity: 0.75; }

.xwui-markdown-display .xwui-md-link {
    color: var(--accent-primary, #1976d2);
    text-decoration: none;
}
.xwui-markdown-display .xwui-md-link:hover { text-decoration: underline; }

.xwui-markdown-display .xwui-md-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm, 6px);
    display: block;
    margin: 0.6em 0;
}

/* ── Code ─────────────────────────────────────────────── */
.xwui-markdown-display .xwui-md-code-inline {
    font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 0.86em;
    background: var(--bg-secondary, rgba(127, 127, 127, 0.12));
    border: 1px solid var(--border-subtle, rgba(127, 127, 127, 0.2));
    border-radius: var(--radius-xs, 4px);
    padding: 0.1em 0.4em;
}

.xwui-markdown-display .xwui-md-pre {
    margin: 0.8em 0;
    padding: 0.9em 1.1em;
    background: var(--bg-code, var(--bg-secondary, rgba(127, 127, 127, 0.1)));
    border: 1px solid var(--border-subtle, rgba(127, 127, 127, 0.2));
    border-radius: var(--radius-md, 8px);
    overflow-x: auto;
}
.xwui-markdown-display .xwui-md-code-block {
    font-family: var(--font-family-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    font-size: 0.84em;
    line-height: 1.55;
    color: var(--text-primary);
    white-space: pre;
}

/* When selectableCodeOnly is set, only code is selectable (chat surfaces). */
.xwui-markdown-display-code-select { user-select: none; }
.xwui-markdown-display-code-select .xwui-md-pre,
.xwui-markdown-display-code-select .xwui-md-code-inline { user-select: text; }

/* ── Blockquote ───────────────────────────────────────── */
.xwui-markdown-display .xwui-md-blockquote {
    margin: 0.8em 0;
    padding: 0.4em 1em;
    border-left: 3px solid var(--accent-primary, #1976d2);
    color: var(--text-secondary);
    background: transparent;
}
.xwui-markdown-display .xwui-md-blockquote > :first-child { margin-top: 0; }
.xwui-markdown-display .xwui-md-blockquote > :last-child { margin-bottom: 0; }

/* ── Lists ────────────────────────────────────────────── */
.xwui-markdown-display .xwui-md-list { margin: 0.6em 0; padding-left: 1.6em; }
.xwui-markdown-display .xwui-md-list-item { margin: 0.25em 0; }
.xwui-markdown-display .xwui-md-list-item-task { list-style: none; margin-left: -1.3em; }
.xwui-markdown-display .xwui-md-task { margin-right: 0.45em; vertical-align: middle; }

/* ── Horizontal rule ──────────────────────────────────── */
.xwui-markdown-display .xwui-md-hr {
    border: none;
    border-top: 1px solid var(--border-subtle, rgba(127, 127, 127, 0.3));
    margin: 1.4em 0;
}

/* ── Tables ───────────────────────────────────────────── */
.xwui-markdown-display .xwui-md-table {
    border-collapse: collapse;
    margin: 0.9em 0;
    width: 100%;
    font-size: 0.92em;
}
.xwui-markdown-display .xwui-md-table th,
.xwui-markdown-display .xwui-md-table td {
    border: 1px solid var(--border-subtle, rgba(127, 127, 127, 0.25));
    padding: 0.45em 0.7em;
    text-align: left;
}
.xwui-markdown-display .xwui-md-table th {
    background: var(--bg-secondary, rgba(127, 127, 127, 0.08));
    font-weight: 600;
}

/* basic/XWUIMasonry/XWUIMasonry.css */
/**
 * XWUIMasonry Component Styles
 * Pinterest-style masonry layout
 */

.xwui-masonry-container {
    width: 100%;
}

.xwui-masonry {
    display: flex;
    /* WHY: flex-start lets empty columns report offsetHeight=0 so the shortest-column
       picker fires correctly on initial distribution; the default stretch makes empty
       columns inherit the container height and everything lands in column 0. */
    align-items: flex-start;
    width: 100%;
    gap: var(--spacing-md, 16px);
}

.xwui-masonry-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.xwui-masonry-item {
    width: 100%;
    break-inside: avoid;
    page-break-inside: avoid;
}


/* basic/XWUIMath/XWUIMath.css */
/* src/components/basic/XWUIMath/XWUIMath.css
 * Native MathML styling — the browser does the layout; tokens do the look. */

.xwui-math {
  color: var(--text-primary, inherit);
  font-family: var(--font-family-base, inherit);
}

.xwui-math-block {
  display: block;
  text-align: center;
  margin: var(--spacing-sm, 0.5rem) 0;
  overflow-x: auto;
}

.xwui-math-inline {
  display: inline;
}

.xwui-math math {
  font-size: 1.15em;
}

.xwui-math-source {
  display: block;
  margin-top: var(--spacing-xs, 0.25rem);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--text-secondary, #9ca3af);
  background: var(--bg-secondary, rgba(127, 127, 127, 0.07));
  border-radius: var(--radius-sm, 6px);
  padding: 0.15rem 0.45rem;
  text-align: start;
  width: fit-content;
  margin-inline: auto;
}

/* basic/XWUIMediaQuery/XWUIMediaQuery.css */
/**
 * XWUIMediaQuery Component Styles
 * Media query wrapper (mostly functional, minimal styles)
 */

.xwui-media-query-container {
    /* Container styles if needed */
}

.xwui-media-query-wrapper {
    /* Wrapper styles */
}


/* basic/XWUIMentions/XWUIMentions.css */
/**
 * XWUIMentions Component Styles
 */

.xwui-mentions-container {
    position: relative;
}

.xwui-mentions-dropdown {
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--border-color, #d9d9d9);
    border-radius: var(--radius-sm, 4px);
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.15));
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
}

.xwui-mentions-option {
    padding: var(--spacing-sm, 8px) 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.xwui-mentions-option:hover,
.xwui-mentions-option-selected {
    background-color: var(--bg-active, #e6f7ff);
}

.xwui-mentions-empty {
    padding: var(--spacing-sm, 8px) 12px;
    text-align: center;
    color: var(--text-tertiary, #999);
}


/* basic/XWUIMenu/XWUIMenu.css */
/**
 * XWUIMenu Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/menu/*.css (component-specific border widths)
 * - Roundness: theme/roundness/menu/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-menu {
    width: 100%;
}

.xwui-menu-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0.5rem;
}

.xwui-menu-vertical .xwui-menu-list {
    flex-direction: column;
    gap: var(--spacing-xs, 0.25rem);
}

/* Menu item */
.xwui-menu-item {
    position: relative;
}

.xwui-menu-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
    padding: var(--spacing-sm, 0.625rem) var(--spacing-md, 1rem);
    border-radius: var(--radius-menu, var(--radius-sm, 6px));
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
}

.xwui-menu-link:hover:not(.xwui-menu-item-disabled .xwui-menu-link) {
    background: var(--bg-secondary);
}

.xwui-menu-item-selected .xwui-menu-link {
    background: var(--accent-primary);
    color: var(--text-inverse);
}

.xwui-menu-item-disabled .xwui-menu-link {
    opacity: 0.5;
    cursor: not-allowed;
}

.xwui-menu-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.xwui-menu-icon svg {
    width: 1em;
    height: 1em;
}

.xwui-menu-label {
    flex: 1;
}

.xwui-menu-arrow {
    margin-left: auto;
    font-size: var(--font-size-sm, 0.875rem);
}

/* Submenu */
.xwui-menu-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--bg-primary);
    border: var(--border-menu-width, var(--border-width-regular, 1.5px)) var(--border-menu-style, solid) var(--border-menu-color, var(--border-color));
    border-radius: var(--radius-menu, var(--radius-md, 8px));
    box-shadow: var(--shadow-lg);
    list-style: none;
    padding: var(--spacing-sm, 0.5rem);
    margin: 0;
    z-index: 1000;
}

.xwui-menu-item:hover .xwui-menu-submenu {
    display: block;
}

.xwui-menu-vertical .xwui-menu-submenu {
    position: static;
    margin-top: var(--spacing-xs, 0.25rem);
    margin-left: var(--spacing-md, 1rem);
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--border-color);
}

/* Divider */
.xwui-menu-divider {
    height: 1px;
    background: var(--border-color);
    margin: var(--spacing-sm, 0.5rem) 0;
    list-style: none;
}

/* Size variants */
.xwui-menu-small .xwui-menu-link {
    padding: var(--spacing-sm, 0.5rem) var(--spacing-sm, 0.75rem);
    font-size: var(--font-size-sm, 0.8125rem);
}

.xwui-menu-large .xwui-menu-link {
    padding: var(--spacing-sm, 0.75rem) var(--spacing-lg, 1.25rem);
    font-size: var(--font-size-base, 0.9375rem);
}


/* basic/XWUIMenuBar/XWUIMenuBar.css */
/**
 * XWUIMenuBar Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/menu/*.css (component-specific border widths)
 * - Typography: theme/typography/*.css
 */

.xwui-menubar {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--bg-primary);
    border-bottom: var(--border-menu-width, var(--border-width-regular, 1.5px)) var(--border-menu-style, solid) var(--border-menu-color, var(--border-color));
    padding: 0;
}

.xwui-menubar-item {
    position: relative;
}

.xwui-menubar-button {
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
    border: none;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    font-size: var(--font-size-sm, 0.875rem);
    transition: background 0.2s;
    border-radius: 0;
}

.xwui-menubar-button:hover {
    background: var(--bg-secondary);
}

.xwui-menubar-button:focus {
    outline: none;
    background: var(--bg-secondary);
}


/* basic/XWUIMenuContext/XWUIMenuContext.css */
/**
 * XWUIMenuContext Component Styles
 * Uses XWUIMenuDropdown styles
 * 
 * Style Dependencies:
 * - Same as XWUIMenuDropdown component
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 */


/* basic/XWUIMenuDrawer/XWUIMenuDrawer.css */
/**
 * XWUIDrawer Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/drawer/*.css (component-specific border widths)
 * - Roundness: theme/roundness/drawer/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.xwui-drawer-overlay-visible {
    opacity: 1;
}

.xwui-drawer {
    position: fixed;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    box-shadow: var(--shadow-xl);
    z-index: 10000;
    transition: transform 0.3s ease;
}

/* Placement variants */
.xwui-drawer-left {
    top: 0;
    left: 0;
    bottom: 0;
    transform: translateX(-100%);
}

.xwui-drawer-right {
    top: 0;
    right: 0;
    bottom: 0;
    transform: translateX(100%);
}

.xwui-drawer-top {
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-100%);
}

.xwui-drawer-bottom {
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(100%);
}

.xwui-drawer-visible {
    transform: translate(0, 0);
}

/* Size variants */
.xwui-drawer-left.xwui-drawer-small,
.xwui-drawer-right.xwui-drawer-small {
    width: 320px;
}

.xwui-drawer-left.xwui-drawer-medium,
.xwui-drawer-right.xwui-drawer-medium {
    width: 480px;
}

.xwui-drawer-left.xwui-drawer-large,
.xwui-drawer-right.xwui-drawer-large {
    width: 640px;
}

.xwui-drawer-left.xwui-drawer-full,
.xwui-drawer-right.xwui-drawer-full {
    width: 100%;
}

.xwui-drawer-top.xwui-drawer-small,
.xwui-drawer-bottom.xwui-drawer-small {
    height: 240px;
}

.xwui-drawer-top.xwui-drawer-medium,
.xwui-drawer-bottom.xwui-drawer-medium {
    height: 400px;
}

.xwui-drawer-top.xwui-drawer-large,
.xwui-drawer-bottom.xwui-drawer-large {
    height: 600px;
}

.xwui-drawer-top.xwui-drawer-full,
.xwui-drawer-bottom.xwui-drawer-full {
    height: 100%;
}

/* Header */
.xwui-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg, 1.25rem) var(--spacing-lg, 1.5rem);
    border-bottom: var(--border-drawer-width, var(--border-width-regular, 1.5px)) var(--border-drawer-style, solid) var(--border-drawer-color, var(--border-color));
    flex-shrink: 0;
}

.xwui-drawer-title {
    margin: 0;
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary);
}

.xwui-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: var(--radius-overlay, var(--radius-sm, 6px));
    transition: background 0.2s, color 0.2s;
}

.xwui-drawer-close:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.xwui-drawer-close svg {
    width: 20px;
    height: 20px;
}

/* Body */
.xwui-drawer-body {
    flex: 1;
    padding: var(--spacing-lg, 1.5rem);
    overflow-y: auto;
    color: var(--text-primary);
}

/* Footer */
.xwui-drawer-footer {
    padding: var(--spacing-md, 1rem) var(--spacing-lg, 1.5rem);
    border-top: var(--border-drawer-width, var(--border-width-regular, 1.5px)) var(--border-drawer-style, solid) var(--border-drawer-color, var(--border-color));
    flex-shrink: 0;
}


/* basic/XWUIMenuDrawerSwipeable/XWUIMenuDrawerSwipeable.css */
/**
 * XWUISwipeableDrawer Component Styles
 * 
 * Style Dependencies (loaded in testers/app):
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Roundness: theme/roundness/drawer/*.css (component-specific roundness)
 * - Lines: theme/lines/drawer/*.css (component-specific border widths)
 * - Typography: theme/typography/*.css
 * 
 * Note: This component extends XWUIMenuDrawer, so drawer styles apply.
 * Additional styles for swipe gestures are defined here.
 */

.xwui-swipeable-drawer {
    /* Inherits from XWUIMenuDrawer */
    touch-action: pan-y; /* Allow vertical panning for swipe gestures */
    user-select: none; /* Prevent text selection during swipe */
}

/* Swipe indicator (optional visual feedback) */
.xwui-swipeable-drawer-swipe-indicator {
    position: absolute;
    width: var(--spacing-md, 4px);
    height: var(--spacing-lg, 40px);
    background-color: var(--color-border, var(--color-text-secondary, #666));
    border-radius: var(--radius-full, 999px);
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity var(--transition-duration-fast, 0.2s) ease;
}

.xwui-swipeable-drawer-swipe-indicator.visible {
    opacity: 1;
}


/* basic/XWUIMenuDropdown/XWUIMenuDropdown.css */
/**
 * XWUIDropdownMenu Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/menu/*.css (component-specific border widths)
 * - Roundness: theme/roundness/menu/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-dropdown-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.xwui-dropdown-menu-overlay-visible {
    opacity: 1;
    pointer-events: auto;
}

.xwui-dropdown-menu {
    position: fixed;
    min-width: 200px;
    max-width: 320px;
    min-height: 40px;
    padding: var(--spacing-sm, 0.5rem);
    background: var(--bg-primary, #ffffff);
    border: var(--border-menu-width, var(--border-width-regular, 1.5px)) var(--border-menu-style, solid) var(--border-menu-color, var(--border-color, #e0e0e0));
    border-radius: var(--radius-menu, var(--radius-md, 8px));
    box-shadow: var(--shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.15));
    z-index: 10002;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: auto;
    color: var(--text-primary, #000000);
    display: block;
    visibility: visible;
}

.xwui-dropdown-menu-visible {
    opacity: 1;
    transform: scale(1);
}

/* Menu item — hosts an XWUIItem row */
.xwui-dropdown-menu-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 0.25rem);
    padding: var(--spacing-xxs, 0.125rem) var(--spacing-xs, 0.25rem);
    border-radius: var(--radius-menu, var(--radius-sm, 6px));
    cursor: pointer;
    transition: background 0.2s;
}

.xwui-dropdown-menu-item-content {
    flex: 1;
    min-width: 0;
    pointer-events: none;
}

.xwui-dropdown-menu-item-content .xwui-item {
    width: 100%;
}

.xwui-dropdown-menu-item-active {
    background: var(--bg-hover, rgba(99, 102, 241, 0.06));
}

.xwui-dropdown-menu-item:hover:not(.xwui-dropdown-menu-item-disabled) {
    background: var(--bg-secondary, #f5f5f5);
}

.xwui-dropdown-menu-item-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.xwui-dropdown-menu-item-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.xwui-dropdown-menu-item-icon svg {
    width: 1em;
    height: 1em;
}

.xwui-dropdown-menu-item-label {
    flex: 1;
}

.xwui-dropdown-menu-item-arrow {
    margin-left: auto;
    color: var(--text-secondary);
}

/* Divider */
.xwui-dropdown-menu-divider {
    height: 1px;
    background: var(--border-color, #e0e0e0);
    margin: var(--spacing-sm, 0.5rem) 0;
}


/* basic/XWUIMenuModel/XWUIMenuModel.css */
/* No styles for this component — placeholder written by tools/copy-lib-components.ts so the runtime CSS auto-loader doesn't 404. */

/* basic/XWUIMenuNavigation/XWUIMenuNavigation.css */
/**
 * XWUIMenuNavigation Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 */

.xwui-navigation-menu {
    width: 100%;
}


/* basic/XWUIMeterGroup/XWUIMeterGroup.css */
.xwui-metergroup {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md, 1rem);
}

.xwui-metergroup-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 0.25rem);
}

.xwui-metergroup-label {
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--text-secondary, #4b5563);
}

.xwui-metergroup-progress {
  min-width: 0;
}

/* basic/XWUIMilestoneMarker/XWUIMilestoneMarker.css */
/**
 * XWUIMilestoneMarker Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 */

.xwui-milestone-marker {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs, 0.25rem);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.xwui-milestone-marker:hover {
    transform: scale(1.1);
}

.xwui-milestone-marker-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--accent-primary, #4f46e5);
    color: var(--text-inverse, #ffffff);
    border-radius: 50%;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-bold, 700);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
}

.xwui-milestone-marker-completed .xwui-milestone-marker-icon {
    background: var(--accent-success, #10b981);
}

.xwui-milestone-marker-label {
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary, #212529);
    text-align: center;
    white-space: nowrap;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xwui-milestone-marker-progress {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 0.25rem);
    width: 100%;
    max-width: 100px;
}

.xwui-milestone-marker-progress-bar {
    flex: 1;
    height: 4px;
    background: var(--bg-tertiary, #e9ecef);
    border-radius: 2px;
    overflow: hidden;
}

.xwui-milestone-marker-progress-fill {
    height: 100%;
    background: var(--accent-primary, #4f46e5);
    transition: width 0.3s ease;
}

.xwui-milestone-marker-progress-text {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-secondary, #6c757d);
    white-space: nowrap;
}

/* Variants */
.xwui-milestone-marker-compact {
    gap: 0;
}

.xwui-milestone-marker-compact .xwui-milestone-marker-label {
    display: none;
}

.xwui-milestone-marker-detailed {
    min-width: 120px;
}

/* Sizes */
:is(.xwui-milestone-marker-s,.xwui-milestone-marker-sm) .xwui-milestone-marker-icon {
    width: 16px;
    height: 16px;
    font-size: var(--font-size-xs, 0.75rem);
}

:is(.xwui-milestone-marker-l,.xwui-milestone-marker-lg) .xwui-milestone-marker-icon {
    width: 32px;
    height: 32px;
    font-size: var(--font-size-base, 1rem);
}


/* basic/XWUIMobileStepper/XWUIMobileStepper.css */
/**
 * XWUIMobileStepper Component Styles
 * 
 * Style Dependencies (loaded in testers/app):
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Roundness: theme/roundness/stepper/*.css (component-specific roundness)
 * - Lines: theme/lines/stepper/*.css (component-specific border widths)
 * - Typography: theme/typography/*.css
 */

.xwui-mobile-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--spacing-md, 1rem);
    
    /* Colors from theme (MANDATORY - use variables, never hardcode) */
    background-color: var(--color-stepper-bg, var(--color-background));
    border-top: var(--border-width-regular, 1px) solid var(--color-border, rgba(0, 0, 0, 0.12));
}

.xwui-mobile-stepper-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--stepper-z-index, 1000);
}

.xwui-mobile-stepper-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--stepper-z-index, 1000);
}

/* Dots variant */
.xwui-mobile-stepper-dots {
    display: flex;
    gap: var(--spacing-xs, 0.5rem);
    align-items: center;
    justify-content: center;
    flex: 1;
}

.xwui-mobile-stepper-dot {
    width: var(--stepper-dot-size, 8px);
    height: var(--stepper-dot-size, 8px);
    border-radius: var(--radius-full, 50%);
    background-color: var(--color-stepper-dot-inactive, rgba(0, 0, 0, 0.26));
    transition: all var(--transition-duration-fast, 0.2s) ease;
}

.xwui-mobile-stepper-dot-active {
    width: var(--stepper-dot-active-size, 12px);
    height: var(--stepper-dot-active-size, 12px);
    background-color: var(--color-stepper-dot-active, var(--color-primary));
}

/* Progress variant */
.xwui-mobile-stepper-progress-wrapper {
    flex: 1;
    height: var(--stepper-progress-height, 4px);
    background-color: var(--color-stepper-progress-bg, rgba(0, 0, 0, 0.12));
    border-radius: var(--radius-full, 999px);
    overflow: hidden;
    margin: 0 var(--spacing-md);
}

.xwui-mobile-stepper-progress-bar {
    height: 100%;
    background-color: var(--color-stepper-progress-active, var(--color-primary));
    border-radius: var(--radius-full, 999px);
    transition: width var(--transition-duration-normal, 0.3s) ease;
}

/* Text variant */
.xwui-mobile-stepper-text {
    flex: 1;
    text-align: center;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
    font-weight: var(--font-weight-medium, 500);
}

/* Buttons container */
.xwui-mobile-stepper-buttons {
    display: flex;
    gap: var(--spacing-sm, 0.5rem);
    align-items: center;
}

/* Button styles come from XWUIButton component */


/* basic/XWUIMultiSelect/XWUIMultiSelect.css */
/**
 * XWUIMultiSelect Component Styles
 */

.xwui-multi-select-container {
    /* Container has no specific styles */
}

.xwui-multi-select-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}

.xwui-multi-select-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs, 4px);
    padding: 2px var(--spacing-sm, 8px);
    background-color: var(--bg-secondary, #f0f0f0);
    border-radius: var(--radius-sm, 4px);
    font-size: var(--font-size-xs, 12px);
}

.xwui-multi-select-tag-close {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-base, 16px);
    color: var(--text-secondary, #666);
}

.xwui-multi-select-tag-close:hover {
    color: var(--text-primary, #333);
}

.xwui-multi-select-tag-more {
    background-color: var(--bg-tertiary, #e0e0e0);
}


/* basic/XWUINativeSelect/XWUINativeSelect.css */
/**
 * XWUINativeSelect Component Styles
 * Native select wrapper
 */

.xwui-native-select-container {
    display: inline-block;
}

.xwui-native-select-container.xwui-native-select-full-width {
    width: 100%;
}

.xwui-native-select-label {
    display: block;
    margin-bottom: var(--spacing-xs, 4px);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.xwui-native-select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.xwui-native-select-wrapper.xwui-native-select-small .xwui-native-select {
    padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
    font-size: 0.875rem;
}

.xwui-native-select-wrapper.xwui-native-select-medium .xwui-native-select {
    padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
    font-size: 1rem;
}

.xwui-native-select-wrapper.xwui-native-select-large .xwui-native-select {
    padding: var(--spacing-md, 16px) var(--spacing-lg, 24px);
    font-size: 1.125rem;
}

.xwui-native-select {
    width: 100%;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--radius-sm, 6px);
    background-color: var(--bg-primary, #ffffff);
    color: var(--text-primary);
    font-family: inherit;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.xwui-native-select:hover:not(:disabled) {
    border-color: var(--border-strong, rgba(0, 0, 0, 0.08));
}

.xwui-native-select:focus {
    outline: none;
    border-color: var(--accent-primary, #4f46e5);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

.xwui-native-select:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background-color: var(--bg-tertiary, #f1f3f5);
}

.xwui-native-select-wrapper.xwui-native-select-error .xwui-native-select {
    border-color: var(--status-error, #f44336);
}

.xwui-native-select-wrapper.xwui-native-select-error .xwui-native-select:focus {
    border-color: var(--status-error, #f44336);
    box-shadow: 0 0 0 2px rgba(244, 67, 54, 0.1);
}

.xwui-native-select-helper-text {
    margin-top: var(--spacing-xs, 4px);
    font-size: 0.75rem;
    color: var(--text-secondary, #6c757d);
}

.xwui-native-select-error-text {
    margin-top: var(--spacing-xs, 4px);
    font-size: 0.75rem;
    color: var(--status-error, #f44336);
}


/* basic/XWUINav/XWUINav.css */
/**
 * XWUINav Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Roundness: theme/roundness/button/*.css (component-specific roundness)
 * - Lines: theme/lines/button/*.css (component-specific border widths)
 * - Typography: theme/typography/*.css
 */

.xwui-nav {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Search Container */
.xwui-nav-search-container {
    position: absolute;
    top: var(--spacing-md, 1rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    width: 100%;
    max-width: 300px;
}

.xwui-nav-search {
    position: relative;
}

.xwui-nav-search-input {
    width: 100%;
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
    border: var(--border-width-regular, 1.5px) solid var(--color-border, #e0e0e0);
    border-radius: var(--radius-input, var(--radius-sm, 6px));
    background-color: var(--bg-primary, #ffffff);
    color: var(--text-primary, #000000);
    font-size: var(--font-size-base, 1rem);
    font-family: var(--font-family-base, inherit);
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.1));
}

.xwui-nav-search-input:focus {
    outline: none;
    border-color: var(--accent-primary, var(--color-primary));
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.1)), 
                0 0 0 2px var(--accent-primary-light, rgba(0, 123, 255, 0.25));
}

.xwui-nav-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--spacing-xs, 0.25rem);
    background-color: var(--bg-primary, #ffffff);
    border: var(--border-width-regular, 1.5px) solid var(--color-border, #e0e0e0);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.15));
    max-height: 300px;
    overflow-y: auto;
    z-index: 101;
}

.xwui-nav-search-result {
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
    cursor: pointer;
    color: var(--text-primary, #000000);
    border-bottom: var(--border-width-thin, 1px) solid var(--color-border-light, #f0f0f0);
    transition: background-color 0.2s ease;
}

.xwui-nav-search-result:hover {
    background-color: var(--bg-secondary, #f5f5f5);
}

.xwui-nav-search-result:last-child {
    border-bottom: none;
}

.xwui-nav-search-no-results {
    padding: var(--spacing-md, 1rem);
    text-align: center;
    color: var(--text-secondary, #666666);
    font-size: var(--font-size-sm, 0.875rem);
}

/* Controls Container */
.xwui-nav-controls {
    position: absolute;
    z-index: 100;
    padding: calc(var(--spacing-md, 1rem) * 2);
}

.xwui-nav-controls-top-left {
    top: 0;
    left: 0;
}

.xwui-nav-controls-top-right {
    top: 0;
    right: 0;
}

.xwui-nav-controls-bottom-left {
    bottom: 0;
    left: 0;
}

.xwui-nav-controls-bottom-right {
    bottom: 0;
    right: 0;
}

/* Controls Grid */
.xwui-nav-controls-grid {
    display: grid;
    grid-template-columns: repeat(3, 40px);
    grid-template-rows: repeat(3, 40px);
    gap: var(--spacing-xs, 0.25rem);
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: var(--spacing-sm, 0.5rem);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.15));
}

.xwui-nav-control-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--border-width-regular, 1.5px) solid var(--color-border, #e0e0e0);
    border-radius: var(--radius-button, var(--radius-sm, 6px));
    background-color: var(--bg-primary, #ffffff);
    color: var(--text-primary, #000000);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
}

.xwui-nav-control-btn:hover {
    background-color: var(--bg-secondary, #f5f5f5);
    border-color: var(--accent-primary, var(--color-primary));
    transform: translateY(-1px);
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.15));
}

.xwui-nav-control-btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
}

.xwui-nav-control-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Icon container inside buttons */
.xwui-nav-control-btn-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xwui-nav-control-btn-icon svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.xwui-nav-control-btn-icon > * {
    transform: none !important;
}

/* Reset button styling (centered) */
.xwui-nav-control-btn[title="Reset View"] {
    border-radius: 50%;
}

/* 3D controls grid */
.xwui-nav-controls-grid-3d {
    display: flex;
    flex-direction: column;
}


/* basic/XWUINavAnchor/XWUINavAnchor.css */
/**
 * XWUINavAnchor Component Styles
 */

.xwui-anchor-container {
    /* Container has no specific styles */
}

.xwui-anchor {
    /* Anchor navigation */
}

.xwui-anchor-affix {
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
}

.xwui-anchor-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.xwui-anchor-item {
    margin: 0;
}

.xwui-anchor-link {
    display: block;
    padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
    color: var(--text-secondary, #666);
    text-decoration: none;
    border-left: 2px solid transparent;
    transition: all 0.2s;
}

.xwui-anchor-link:hover {
    color: var(--accent-primary, #1890ff);
    border-left-color: var(--accent-primary, #1890ff);
}

.xwui-anchor-link-active {
    color: var(--accent-primary, #1890ff);
    border-left-color: var(--accent-primary, #1890ff);
    font-weight: var(--font-weight-medium, 500);
}

.xwui-anchor-list-nested {
    padding-left: 16px;
}


/* basic/XWUINavBar/XWUINavBar.css */
/**
 * XWUINavBar Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Roundness: theme/roundness/button/*.css (component-specific roundness)
 * - Lines: theme/lines/button/*.css (component-specific border widths)
 * - Typography: theme/typography/*.css
 */

.xwui-nav {
    position: relative;
    width: 100%;
    height: 100%;
}

/* ── `scope: 'viewport'` — full-site mode ─────────────────────────────
   Wrapper is promoted to `position: fixed` covering the entire browser
   window (`inset: 0`). Use when the nav-bar IS the app's outermost chrome
   — its buttons float over the whole page regardless of where the
   component was mounted in the DOM. z-index 1000 keeps it above typical
   content but below modal dialogs (which conventionally use 1300+). */
.xwui-nav--viewport {
    position: fixed !important;
    inset: 0;
    width: auto;
    height: auto;
    z-index: 1000;
}

/* Search Container */
.xwui-nav-search-container {
    position: absolute;
    top: var(--spacing-md, 1rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    width: 100%;
    max-width: 300px;
}

.xwui-nav-search {
    position: relative;
}

.xwui-nav-search-input {
    width: 100%;
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
    border: var(--border-width-regular, 1.5px) solid var(--border-color, #e0e0e0);
    border-radius: var(--radius-input, var(--radius-sm, 6px));
    background-color: var(--bg-primary, #ffffff);
    color: var(--text-primary, #000000);
    font-size: var(--font-size-base, 1rem);
    font-family: var(--font-family-base, inherit);
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.1));
}

.xwui-nav-search-input:focus {
    outline: none;
    border-color: var(--accent-primary, var(--accent-primary));
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.1)), 
                0 0 0 2px var(--accent-primary-light, rgba(0, 123, 255, 0.25));
}

.xwui-nav-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--spacing-xs, 0.25rem);
    background-color: var(--bg-primary, #ffffff);
    border: var(--border-width-regular, 1.5px) solid var(--border-color, #e0e0e0);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.15));
    max-height: 300px;
    overflow-y: auto;
    z-index: 101;
}

.xwui-nav-search-result {
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
    cursor: pointer;
    color: var(--text-primary, #000000);
    border-bottom: var(--border-width-thin, 1px) solid var(--border-color-light, #f0f0f0);
    transition: background-color 0.2s ease;
}

.xwui-nav-search-result:hover {
    background-color: var(--bg-secondary, #f5f5f5);
}

.xwui-nav-search-result:last-child {
    border-bottom: none;
}

.xwui-nav-search-no-results {
    padding: var(--spacing-md, 1rem);
    text-align: center;
    color: var(--text-secondary, #666666);
    font-size: var(--font-size-sm, 0.875rem);
}

/* Controls Container */
.xwui-nav-controls {
    position: absolute;
    z-index: 100;
    padding: calc(var(--spacing-md, 1rem) * 2);
}

.xwui-nav-controls-top-left {
    top: 0;
    left: 0;
}

.xwui-nav-controls-top-right {
    top: 0;
    right: 0;
}

.xwui-nav-controls-bottom-left {
    bottom: 0;
    left: 0;
}

.xwui-nav-controls-bottom-right {
    bottom: 0;
    right: 0;
}

/* Controls Grid */
.xwui-nav-controls-grid {
    display: grid;
    grid-template-columns: repeat(3, 40px);
    grid-template-rows: repeat(3, 40px);
    gap: var(--spacing-xs, 0.25rem);
    /* Control grid panel — theme-aware translucent elevated surface.
       Was hardcoded rgba(255,255,255,0.9) which rendered as a blinding
       white flash on dark themes. */
    background-color: rgba(255, 255, 255, 0.9);
    background-color: color-mix(in srgb, var(--bg-elevated, white) 90%, transparent);
    backdrop-filter: blur(10px);
    padding: var(--spacing-sm, 0.5rem);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.15));
}

.xwui-nav-control-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--border-width-regular, 1.5px) solid var(--border-color, #e0e0e0);
    border-radius: var(--radius-button, var(--radius-sm, 6px));
    background-color: var(--bg-primary, #ffffff);
    color: var(--text-primary, #000000);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
}

.xwui-nav-control-btn:hover {
    background-color: var(--bg-secondary, #f5f5f5);
    border-color: var(--accent-primary, var(--accent-primary));
    transform: translateY(-1px);
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.15));
}

.xwui-nav-control-btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
}

.xwui-nav-control-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Icon container inside buttons */
.xwui-nav-control-btn-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.xwui-nav-control-btn-icon svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.xwui-nav-control-btn-icon > * {
    transform: none !important;
}

/* Reset button styling (centered) */
.xwui-nav-control-btn[title="Reset View"] {
    border-radius: 50%;
}

/* 3D controls grid */
.xwui-nav-controls-grid-3d {
    display: flex;
    flex-direction: column;
}


/* basic/XWUINavBottom/XWUINavBottom.css */
/**
 * XWUINavBottom Component Styles
 * Bottom navigation bar for mobile
 */

.xwui-bottom-navigation-container {
    width: 100%;
}

.xwui-bottom-navigation {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: var(--bg-elevated, #ffffff);
    border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.05));
    padding: var(--spacing-xs, 4px) 0;
    min-height: 56px;
}

.xwui-bottom-navigation-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.xwui-bottom-navigation-elevated {
    box-shadow: var(--shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.1));
    border-top: none;
}

.xwui-bottom-navigation-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: var(--spacing-xs, 4px);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary, #6c757d);
    font-size: 0.75rem;
    font-weight: 500;
    transition: color 0.2s ease, transform 0.2s ease;
    min-height: 48px;
    gap: var(--spacing-xs, 4px);
    position: relative;
}

.xwui-bottom-navigation-item:hover:not(:disabled) {
    color: var(--text-primary, #212529);
    transform: translateY(-2px);
}

.xwui-bottom-navigation-item-active {
    color: var(--accent-primary, #4f46e5);
}

.xwui-bottom-navigation-item-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.xwui-bottom-navigation-item-icon {
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.xwui-bottom-navigation-item-icon svg {
    width: 100%;
    height: 100%;
}

.xwui-bottom-navigation-item-label {
    font-size: 0.75rem;
    line-height: 1;
}

.xwui-bottom-navigation-item-badge {
    position: absolute;
    top: 2px;
    right: calc(50% - 20px);
    background-color: var(--accent-primary, #4f46e5);
    color: var(--text-inverse, #ffffff);
    font-size: 0.625rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    line-height: 1.2;
    z-index: 1;
}


/* basic/XWUINavBreadcrumbs/XWUINavBreadcrumbs.css */
/**
 * XWUINavBreadcrumbs Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Typography: theme/typography/*.css
 */

.xwui-breadcrumbs {
    width: 100%;
}

.xwui-breadcrumbs-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

.xwui-breadcrumbs-item {
    display: flex;
    align-items: center;
}

/* Link */
.xwui-breadcrumbs-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs, 0.375rem);
    color: var(--text-secondary, #6c757d);
    text-decoration: none;
    transition: color 0.2s;
}

.xwui-breadcrumbs-link:hover {
    color: var(--accent-primary, #4f46e5);
}

/* Current */
.xwui-breadcrumbs-current {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs, 0.375rem);
    color: var(--text-primary, #212529);
    font-weight: var(--font-weight-medium, 500);
}

/* Ellipsis */
.xwui-breadcrumbs-ellipsis {
    color: var(--text-secondary, #6c757d);
    padding: 0 var(--spacing-xs, 0.25rem);
}

/* Icon */
.xwui-breadcrumbs-icon {
    display: flex;
    align-items: center;
}

.xwui-breadcrumbs-icon svg {
    width: 1em;
    height: 1em;
}

/* Separator */
.xwui-breadcrumbs-separator {
    display: flex;
    align-items: center;
    margin: 0 var(--spacing-sm, 0.5rem);
    color: var(--text-tertiary, #adb5bd);
}

.xwui-breadcrumbs-separator svg {
    width: 16px;
    height: 16px;
}

/* Size variants (canonical 9-step scale) */
:is(.xwui-breadcrumbs-3xs,.xwui-breadcrumbs-xxxs) { font-size: var(--font-size-xs, 0.5rem); }
:is(.xwui-breadcrumbs-4xs,.xwui-breadcrumbs-xxxxs) { font-size: var(--font-size-xs, 0.5rem); }
:is(.xwui-breadcrumbs-3xs,.xwui-breadcrumbs-xxxs) .xwui-breadcrumbs-separator svg { width: 7px; height: 7px; }
:is(.xwui-breadcrumbs-4xs,.xwui-breadcrumbs-xxxxs) .xwui-breadcrumbs-separator svg { width: 3.5px; height: 3.5px; }
:is(.xwui-breadcrumbs-2xs,.xwui-breadcrumbs-xxs) { font-size: var(--font-size-xs, 0.625rem); }
:is(.xwui-breadcrumbs-2xs,.xwui-breadcrumbs-xxs) .xwui-breadcrumbs-separator svg { width: 10px; height: 10px; }
.xwui-breadcrumbs-xs { font-size: var(--font-size-xs, 0.75rem); }
.xwui-breadcrumbs-xs .xwui-breadcrumbs-separator svg { width: 12px; height: 12px; }
:is(.xwui-breadcrumbs-s,.xwui-breadcrumbs-sm) { font-size: var(--font-size-sm, 0.8125rem); }
:is(.xwui-breadcrumbs-s,.xwui-breadcrumbs-sm) .xwui-breadcrumbs-separator svg { width: 14px; height: 14px; }
:is(.xwui-breadcrumbs-m,.xwui-breadcrumbs-md) { font-size: var(--font-size-sm, 0.875rem); }
:is(.xwui-breadcrumbs-m,.xwui-breadcrumbs-md) .xwui-breadcrumbs-separator svg { width: 16px; height: 16px; }
:is(.xwui-breadcrumbs-l,.xwui-breadcrumbs-lg) { font-size: var(--font-size-base, 1rem); }
:is(.xwui-breadcrumbs-l,.xwui-breadcrumbs-lg) .xwui-breadcrumbs-separator svg { width: 18px; height: 18px; }
.xwui-breadcrumbs-xl { font-size: var(--font-size-lg, 1.125rem); }
.xwui-breadcrumbs-xl .xwui-breadcrumbs-separator svg { width: 20px; height: 20px; }
:is(.xwui-breadcrumbs-2xl,.xwui-breadcrumbs-xxl) { font-size: var(--font-size-xl, 1.4625rem); }
:is(.xwui-breadcrumbs-2xl,.xwui-breadcrumbs-xxl) .xwui-breadcrumbs-separator svg { width: 26px; height: 26px; }
:is(.xwui-breadcrumbs-3xl,.xwui-breadcrumbs-xxxl) { font-size: var(--font-size-xxl, 1.8rem); }
:is(.xwui-breadcrumbs-4xl,.xwui-breadcrumbs-xxxxl) { font-size: var(--font-size-xxl, 1.8rem); }
:is(.xwui-breadcrumbs-3xl,.xwui-breadcrumbs-xxxl) .xwui-breadcrumbs-separator svg { width: 32px; height: 32px; }
:is(.xwui-breadcrumbs-4xl,.xwui-breadcrumbs-xxxxl) .xwui-breadcrumbs-separator svg { width: 51.2px; height: 51.2px; }

/* Legacy size aliases */
.xwui-breadcrumbs-small { font-size: var(--font-size-sm, 0.8125rem); }
.xwui-breadcrumbs-small .xwui-breadcrumbs-separator svg { width: 14px; height: 14px; }
.xwui-breadcrumbs-medium { font-size: var(--font-size-sm, 0.875rem); }
.xwui-breadcrumbs-large { font-size: var(--font-size-base, 1rem); }
.xwui-breadcrumbs-large .xwui-breadcrumbs-separator svg { width: 18px; height: 18px; }

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */


/* basic/XWUINavDock/XWUINavDock.css */
.xwui-dock {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm, 0.5rem);
  padding: var(--spacing-md, 1rem);
  background: var(--bg-elevated, rgba(255, 255, 255, 0.9));
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}

.xwui-dock.xwui-dock-bottom,
.xwui-dock.xwui-dock-top {
  flex-direction: row;
}

.xwui-dock.xwui-dock-left,
.xwui-dock.xwui-dock-right {
  flex-direction: column;
}

.xwui-dock-item {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.xwui-dock-magnify .xwui-dock-item:hover {
  transform: scale(var(--xwui-dock-scale-max, 1.5));
}

.xwui-dock-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.xwui-dock-link {
  text-decoration: none;
  color: inherit;
}

/* basic/XWUINavigationRail/XWUINavigationRail.css */
/**
 * XWUINavigationRail Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/navigation/*.css (component-specific border widths)
 * - Typography: theme/typography/*.css
 */

.xwui-navigation-rail {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: var(--spacing-sm, 0.5rem);
    border-top: var(--border-navigation-width, var(--border-width-regular, 1.5px)) var(--border-navigation-style, solid) var(--border-navigation-color, var(--border-color));
    background: var(--bg-primary);
}

.xwui-navigation-rail-rtl {
    flex-direction: row-reverse;
}

.xwui-navigation-rail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs, 0.25rem);
    padding: var(--spacing-sm, 0.5rem);
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
    max-width: 120px;
}

.xwui-navigation-rail-item:hover {
    opacity: 0.8;
}

.xwui-navigation-rail-item-active {
    opacity: 1;
}

.xwui-navigation-rail-item-icon {
    font-size: var(--font-size-xl, 1.25rem);
    line-height: 1;
}

.xwui-navigation-rail-item-label {
    font-size: var(--font-size-xs, 0.75rem);
    line-height: 1;
}


/* basic/XWUINavMenu/XWUINavMenu.css */
/**
 * XWUINavMenu Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/menu/*.css (component-specific border widths)
 * - Roundness: theme/roundness/menu/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-menu {
    width: 100%;
}

.xwui-menu-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0.5rem;
}

.xwui-menu-vertical .xwui-menu-list {
    flex-direction: column;
    gap: var(--spacing-xs, 0.25rem);
}

/* Menu item */
.xwui-menu-item {
    position: relative;
}

.xwui-menu-link {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
    padding: var(--spacing-sm, 0.625rem) var(--spacing-md, 1rem);
    border-radius: var(--radius-menu, var(--radius-sm, 6px));
    text-decoration: none;
    color: var(--text-primary);
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
}

.xwui-menu-link:hover:not(.xwui-menu-item-disabled .xwui-menu-link) {
    background: var(--bg-secondary);
}

.xwui-menu-item-selected .xwui-menu-link {
    background: var(--accent-primary);
    color: var(--text-inverse);
}

.xwui-menu-item-disabled .xwui-menu-link {
    opacity: 0.5;
    cursor: not-allowed;
}

.xwui-menu-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.xwui-menu-icon svg {
    width: 1em;
    height: 1em;
}

.xwui-menu-label {
    flex: 1;
}

.xwui-menu-arrow {
    margin-left: auto;
    font-size: var(--font-size-sm, 0.875rem);
}

/* Submenu */
.xwui-menu-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--bg-primary);
    border: var(--border-menu-width, var(--border-width-regular, 1.5px)) var(--border-menu-style, solid) var(--border-menu-color, var(--border-color));
    border-radius: var(--radius-menu, var(--radius-md, 8px));
    box-shadow: var(--shadow-lg);
    list-style: none;
    padding: var(--spacing-sm, 0.5rem);
    margin: 0;
    z-index: 1000;
}

.xwui-menu-item:hover .xwui-menu-submenu {
    display: block;
}

.xwui-menu-vertical .xwui-menu-submenu {
    position: static;
    margin-top: var(--spacing-xs, 0.25rem);
    margin-left: var(--spacing-md, 1rem);
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--border-color);
}

/* Divider */
.xwui-menu-divider {
    height: 1px;
    background: var(--border-color);
    margin: var(--spacing-sm, 0.5rem) 0;
    list-style: none;
}

/* Size variants */
:is(.xwui-menu-s,.xwui-menu-sm) .xwui-menu-link {
    padding: var(--spacing-sm, 0.5rem) var(--spacing-sm, 0.75rem);
    font-size: var(--font-size-sm, 0.8125rem);
}

:is(.xwui-menu-l,.xwui-menu-lg) .xwui-menu-link {
    padding: var(--spacing-sm, 0.75rem) var(--spacing-lg, 1.25rem);
    font-size: var(--font-size-base, 0.9375rem);
}


/* basic/XWUINavMenuBar/XWUINavMenuBar.css */
/**
 * XWUINavMenuBar Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/menu/*.css (component-specific border widths)
 * - Typography: theme/typography/*.css
 */

.xwui-menubar {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--bg-primary);
    border-bottom: var(--border-menu-width, var(--border-width-regular, 1.5px)) var(--border-menu-style, solid) var(--border-menu-color, var(--border-color));
    padding: 0;
}

.xwui-menubar-item {
    position: relative;
}

.xwui-menubar-button {
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
    border: none;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    font-size: var(--font-size-sm, 0.875rem);
    transition: background 0.2s;
    border-radius: 0;
}

.xwui-menubar-button:hover {
    background: var(--bg-secondary);
}

.xwui-menubar-button:focus {
    outline: none;
    background: var(--bg-secondary);
}


/* basic/XWUINavMenuContext/XWUINavMenuContext.css */
/**
 * XWUINavMenuContext Component Styles
 * Uses XWUINavMenuDropdown styles
 * 
 * Style Dependencies:
 * - Same as XWUINavMenuDropdown component
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 */


/* basic/XWUINavMenuDrawer/XWUINavMenuDrawer.css */
/**
 * XWUIDrawer Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/drawer/*.css (component-specific border widths)
 * - Roundness: theme/roundness/drawer/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.xwui-drawer-overlay-visible {
    opacity: 1;
}

.xwui-drawer {
    position: fixed;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    box-shadow: var(--shadow-xl);
    z-index: 10000;
    transition: transform 0.3s ease;
}

/* Placement variants */
.xwui-drawer-left {
    top: 0;
    left: 0;
    bottom: 0;
    transform: translateX(-100%);
}

.xwui-drawer-right {
    top: 0;
    right: 0;
    bottom: 0;
    transform: translateX(100%);
}

.xwui-drawer-top {
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-100%);
}

.xwui-drawer-bottom {
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(100%);
}

.xwui-drawer-visible {
    transform: translate(0, 0);
}

/* Size variants (canonical 9-step scale) */
.xwui-drawer-left:is(.xwui-drawer-3xs,.xwui-drawer-xxxs),
.xwui-drawer-right:is(.xwui-drawer-3xs,.xwui-drawer-xxxs) { width: 160px; }
.xwui-drawer-left:is(.xwui-drawer-4xs,.xwui-drawer-xxxxs),
.xwui-drawer-right:is(.xwui-drawer-4xs,.xwui-drawer-xxxxs) { width: 80px; }
.xwui-drawer-left:is(.xwui-drawer-2xs,.xwui-drawer-xxs),
.xwui-drawer-right:is(.xwui-drawer-2xs,.xwui-drawer-xxs) { width: 220px; }
.xwui-drawer-left.xwui-drawer-xs,
.xwui-drawer-right.xwui-drawer-xs { width: 260px; }
.xwui-drawer-left:is(.xwui-drawer-s,.xwui-drawer-sm),
.xwui-drawer-right:is(.xwui-drawer-s,.xwui-drawer-sm) { width: 320px; }
.xwui-drawer-left:is(.xwui-drawer-m,.xwui-drawer-md),
.xwui-drawer-right:is(.xwui-drawer-m,.xwui-drawer-md) { width: 480px; }
.xwui-drawer-left:is(.xwui-drawer-l,.xwui-drawer-lg),
.xwui-drawer-right:is(.xwui-drawer-l,.xwui-drawer-lg) { width: 640px; }
.xwui-drawer-left.xwui-drawer-xl,
.xwui-drawer-right.xwui-drawer-xl { width: 768px; }
.xwui-drawer-left:is(.xwui-drawer-2xl,.xwui-drawer-xxl),
.xwui-drawer-right:is(.xwui-drawer-2xl,.xwui-drawer-xxl) { width: 998px; }
.xwui-drawer-left:is(.xwui-drawer-3xl,.xwui-drawer-xxxl),
.xwui-drawer-right:is(.xwui-drawer-3xl,.xwui-drawer-xxxl) { width: 1228px; }
.xwui-drawer-left:is(.xwui-drawer-4xl,.xwui-drawer-xxxxl),
.xwui-drawer-right:is(.xwui-drawer-4xl,.xwui-drawer-xxxxl) { width: 1964.8px; }

.xwui-drawer-left.xwui-drawer-full,
.xwui-drawer-right.xwui-drawer-full {
    width: 100%;
}

.xwui-drawer-top:is(.xwui-drawer-3xs,.xwui-drawer-xxxs),
.xwui-drawer-bottom:is(.xwui-drawer-3xs,.xwui-drawer-xxxs) { height: 120px; }
.xwui-drawer-top:is(.xwui-drawer-4xs,.xwui-drawer-xxxxs),
.xwui-drawer-bottom:is(.xwui-drawer-4xs,.xwui-drawer-xxxxs) { height: 60px; }
.xwui-drawer-top:is(.xwui-drawer-2xs,.xwui-drawer-xxs),
.xwui-drawer-bottom:is(.xwui-drawer-2xs,.xwui-drawer-xxs) { height: 170px; }
.xwui-drawer-top.xwui-drawer-xs,
.xwui-drawer-bottom.xwui-drawer-xs { height: 200px; }
.xwui-drawer-top:is(.xwui-drawer-s,.xwui-drawer-sm),
.xwui-drawer-bottom:is(.xwui-drawer-s,.xwui-drawer-sm) { height: 240px; }
.xwui-drawer-top:is(.xwui-drawer-m,.xwui-drawer-md),
.xwui-drawer-bottom:is(.xwui-drawer-m,.xwui-drawer-md) { height: 400px; }
.xwui-drawer-top:is(.xwui-drawer-l,.xwui-drawer-lg),
.xwui-drawer-bottom:is(.xwui-drawer-l,.xwui-drawer-lg) { height: 600px; }
.xwui-drawer-top.xwui-drawer-xl,
.xwui-drawer-bottom.xwui-drawer-xl { height: 720px; }
.xwui-drawer-top:is(.xwui-drawer-2xl,.xwui-drawer-xxl),
.xwui-drawer-bottom:is(.xwui-drawer-2xl,.xwui-drawer-xxl) { height: 936px; }
.xwui-drawer-top:is(.xwui-drawer-3xl,.xwui-drawer-xxxl),
.xwui-drawer-bottom:is(.xwui-drawer-3xl,.xwui-drawer-xxxl) { height: 1152px; }
.xwui-drawer-top:is(.xwui-drawer-4xl,.xwui-drawer-xxxxl),
.xwui-drawer-bottom:is(.xwui-drawer-4xl,.xwui-drawer-xxxxl) { height: 1843.2px; }

/* Legacy size aliases */
.xwui-drawer-left.xwui-drawer-small,
.xwui-drawer-right.xwui-drawer-small { width: 320px; }
.xwui-drawer-left.xwui-drawer-medium,
.xwui-drawer-right.xwui-drawer-medium { width: 480px; }
.xwui-drawer-left.xwui-drawer-large,
.xwui-drawer-right.xwui-drawer-large { width: 640px; }
.xwui-drawer-top.xwui-drawer-small,
.xwui-drawer-bottom.xwui-drawer-small { height: 240px; }
.xwui-drawer-top.xwui-drawer-medium,
.xwui-drawer-bottom.xwui-drawer-medium { height: 400px; }
.xwui-drawer-top.xwui-drawer-large,
.xwui-drawer-bottom.xwui-drawer-large { height: 600px; }

.xwui-drawer-top.xwui-drawer-full,
.xwui-drawer-bottom.xwui-drawer-full {
    height: 100%;
}

/* Header */
.xwui-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg, 1.25rem) var(--spacing-lg, 1.5rem);
    border-bottom: var(--border-drawer-width, var(--border-width-regular, 1.5px)) var(--border-drawer-style, solid) var(--border-drawer-color, var(--border-color));
    flex-shrink: 0;
}

.xwui-drawer-title {
    margin: 0;
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary);
}

.xwui-drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: var(--radius-overlay, var(--radius-sm, 6px));
    transition: background 0.2s, color 0.2s;
}

.xwui-drawer-close:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.xwui-drawer-close svg {
    width: 20px;
    height: 20px;
}

/* Body */
.xwui-drawer-body {
    flex: 1;
    padding: var(--spacing-lg, 1.5rem);
    overflow-y: auto;
    color: var(--text-primary);
}

/* Footer */
.xwui-drawer-footer {
    padding: var(--spacing-md, 1rem) var(--spacing-lg, 1.5rem);
    border-top: var(--border-drawer-width, var(--border-width-regular, 1.5px)) var(--border-drawer-style, solid) var(--border-drawer-color, var(--border-color));
    flex-shrink: 0;
}


/* basic/XWUINavMenuDrawerSwipeable/XWUINavMenuDrawerSwipeable.css */
/**
 * XWUISwipeableDrawer Component Styles
 * 
 * Style Dependencies (loaded in testers/app):
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Roundness: theme/roundness/drawer/*.css (component-specific roundness)
 * - Lines: theme/lines/drawer/*.css (component-specific border widths)
 * - Typography: theme/typography/*.css
 * 
 * Note: This component extends XWUINavMenuDrawer, so drawer styles apply.
 * Additional styles for swipe gestures are defined here.
 */

.xwui-swipeable-drawer {
    /* Inherits from XWUINavMenuDrawer */
    touch-action: pan-y; /* Allow vertical panning for swipe gestures */
    user-select: none; /* Prevent text selection during swipe */
}

/* Swipe indicator (optional visual feedback) */
.xwui-swipeable-drawer-swipe-indicator {
    position: absolute;
    width: var(--spacing-md, 4px);
    height: var(--spacing-lg, 40px);
    background-color: var(--border-color, var(--text-secondary, #666));
    border-radius: var(--radius-full, 999px);
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity var(--transition-duration-fast, 0.2s) ease;
}

.xwui-swipeable-drawer-swipe-indicator.visible {
    opacity: 1;
}


/* basic/XWUINavMenuDropdown/XWUINavMenuDropdown.css */
/**
 * XWUIDropdownMenu Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/menu/*.css (component-specific border widths)
 * - Roundness: theme/roundness/menu/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-dropdown-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10001;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.xwui-dropdown-menu-overlay-visible {
    opacity: 1;
    pointer-events: auto;
}

.xwui-dropdown-menu {
    position: fixed;
    min-width: 200px;
    max-width: 320px;
    min-height: 40px;
    padding: var(--spacing-sm, 0.5rem);
    background: var(--bg-primary, #ffffff);
    border: var(--border-menu-width, var(--border-width-regular, 1.5px)) var(--border-menu-style, solid) var(--border-menu-color, var(--border-color, #e0e0e0));
    border-radius: var(--radius-menu, var(--radius-md, 8px));
    box-shadow: var(--shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.15));
    z-index: 10002;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: auto;
    color: var(--text-primary, #000000);
    display: block;
    visibility: visible;
}

.xwui-dropdown-menu-visible {
    opacity: 1;
    transform: scale(1);
}

/* Menu item — hosts an XWUIItem row */
.xwui-dropdown-menu-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.75rem);
    padding: var(--spacing-sm, 0.625rem) var(--spacing-sm, 0.75rem);
    border-radius: var(--radius-menu, var(--radius-sm, 6px));
    cursor: pointer;
    transition: background 0.2s;
    font-size: var(--font-size-sm, 0.875rem);
}

/* WHY: the XWUIItem row owns click semantics at the menu-row level, so the
   embedded row must not intercept pointer events meant for the menu item. */
.xwui-dropdown-menu-item-content {
    flex: 1;
    min-width: 0;
    pointer-events: none;
}

.xwui-dropdown-menu-item-content .xwui-item {
    width: 100%;
}

.xwui-dropdown-menu-item-active {
    background: var(--bg-hover, rgba(99, 102, 241, 0.06));
}

.xwui-dropdown-menu-item:hover:not(.xwui-dropdown-menu-item-disabled) {
    background: var(--bg-secondary, #f5f5f5);
}

.xwui-dropdown-menu-item-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.xwui-dropdown-menu-item-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.xwui-dropdown-menu-item-icon svg {
    width: 1em;
    height: 1em;
}

.xwui-dropdown-menu-item-label {
    flex: 1;
}

.xwui-dropdown-menu-item-arrow {
    margin-left: auto;
    color: var(--text-secondary);
}

/* Divider */
.xwui-dropdown-menu-divider {
    height: 1px;
    background: var(--border-color, #e0e0e0);
    margin: var(--spacing-sm, 0.5rem) 0;
}


/* basic/XWUINavMenuNavigation/XWUINavMenuNavigation.css */
/**
 * XWUINavMenuNavigation Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 */

.xwui-navigation-menu {
    width: 100%;
}


/* basic/XWUINavMobileStepper/XWUINavMobileStepper.css */
/**
 * XWUINavMobileStepper Component Styles
 * 
 * Style Dependencies (loaded in testers/app):
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Roundness: theme/roundness/stepper/*.css (component-specific roundness)
 * - Lines: theme/lines/stepper/*.css (component-specific border widths)
 * - Typography: theme/typography/*.css
 */

.xwui-mobile-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--spacing-md, 1rem);
    
    /* Colors from theme (MANDATORY - use variables, never hardcode) */
    background-color: var(--color-stepper-bg, var(--color-background));
    border-top: var(--border-width-regular, 1px) solid var(--border-color, rgba(0, 0, 0, 0.12));
}

.xwui-mobile-stepper-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--stepper-z-index, 1000);
}

.xwui-mobile-stepper-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--stepper-z-index, 1000);
}

/* Dots variant */
.xwui-mobile-stepper-dots {
    display: flex;
    gap: var(--spacing-xs, 0.5rem);
    align-items: center;
    justify-content: center;
    flex: 1;
}

.xwui-mobile-stepper-dot {
    width: var(--stepper-dot-size, 8px);
    height: var(--stepper-dot-size, 8px);
    border-radius: var(--radius-full, 50%);
    background-color: var(--color-stepper-dot-inactive, rgba(0, 0, 0, 0.26));
    transition: all var(--transition-duration-fast, 0.2s) ease;
}

.xwui-mobile-stepper-dot-active {
    width: var(--stepper-dot-active-size, 12px);
    height: var(--stepper-dot-active-size, 12px);
    background-color: var(--color-stepper-dot-active, var(--accent-primary));
}

/* Progress variant */
.xwui-mobile-stepper-progress-wrapper {
    flex: 1;
    height: var(--stepper-progress-height, 4px);
    background-color: var(--color-stepper-progress-bg, rgba(0, 0, 0, 0.12));
    border-radius: var(--radius-full, 999px);
    overflow: hidden;
    margin: 0 var(--spacing-md);
}

.xwui-mobile-stepper-progress-bar {
    height: 100%;
    background-color: var(--color-stepper-progress-active, var(--accent-primary));
    border-radius: var(--radius-full, 999px);
    transition: width var(--transition-duration-normal, 0.3s) ease;
}

/* Text variant */
.xwui-mobile-stepper-text {
    flex: 1;
    text-align: center;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary, rgba(0, 0, 0, 0.6));
    font-weight: var(--font-weight-medium, 500);
}

/* Buttons container */
.xwui-mobile-stepper-buttons {
    display: flex;
    gap: var(--spacing-sm, 0.5rem);
    align-items: center;
}

/* Full-width buttons modifier — set by XWUINavMobileStepperConfig.fullWidthButtons.
   The button row grows to fill the stepper and each button's container takes an
   equal share, so Back and Next are the same width and together span 100% of
   their available space. */
.xwui-mobile-stepper-full-width-buttons .xwui-mobile-stepper-buttons {
    flex: 1;
    width: 100%;
}
.xwui-mobile-stepper-full-width-buttons .xwui-mobile-stepper-button-container {
    flex: 1;
}
.xwui-mobile-stepper-full-width-buttons .xwui-mobile-stepper-button-container > button {
    width: 100%;
}

/* Button styles come from XWUIButton component */


/* basic/XWUINavPagination/XWUINavPagination.css */
/**
 * XWUINavPagination Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/pagination/*.css (component-specific border widths)
 * - Roundness: theme/roundness/pagination/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-pagination {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.xwui-pagination-list {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 0.25rem);
    list-style: none;
    padding: 0;
    margin: 0;
}

.xwui-pagination-total {
    margin-right: var(--spacing-sm, 0.5rem);
    color: var(--text-secondary);
    font-size: var(--font-size-sm, 0.875rem);
}

/* Buttons */
.xwui-pagination-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 var(--spacing-sm, 0.5rem);
    border: var(--border-pagination-width, var(--border-width-regular, 1.5px)) var(--border-pagination-style, solid) var(--border-pagination-color, var(--border-color));
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: var(--radius-pagination, var(--radius-sm, 6px));
    cursor: pointer;
    font-size: var(--font-size-sm, 0.875rem);
    transition: all 0.2s;
}

.xwui-pagination-button:hover:not(:disabled) {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.xwui-pagination-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.xwui-pagination-button-active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-inverse);
}

.xwui-pagination-button-active:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

/* Ellipsis */
.xwui-pagination-ellipsis {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    color: var(--text-secondary);
}

/* Size variants */
:is(.xwui-pagination-s,.xwui-pagination-sm) .xwui-pagination-button {
    min-width: 28px;
    height: 28px;
    font-size: var(--font-size-sm, 0.8125rem);
}

:is(.xwui-pagination-l,.xwui-pagination-lg) .xwui-pagination-button {
    min-width: 36px;
    height: 36px;
    font-size: var(--font-size-base, 0.9375rem);
}

/* Simple mode */
.xwui-pagination-simple-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.xwui-pagination-simple-input {
    width: 50px;
    height: 32px;
    padding: 0 var(--spacing-sm, 0.5rem);
    border: var(--border-pagination-width, var(--border-width-regular, 1.5px)) var(--border-pagination-style, solid) var(--border-pagination-color, var(--border-color));
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: var(--radius-pagination, var(--radius-sm, 6px));
    text-align: center;
    font-size: var(--font-size-sm, 0.875rem);
}

.xwui-pagination-simple-separator {
    color: var(--text-secondary);
}

.xwui-pagination-simple-total {
    color: var(--text-secondary);
}

/* Size changer */
.xwui-pagination-size-changer {
    margin-left: var(--spacing-sm, 0.5rem);
}

.xwui-pagination-size-select {
    padding: var(--spacing-xs, 0.375rem) var(--spacing-sm, 0.75rem);
    border: var(--border-pagination-width, var(--border-width-regular, 1.5px)) var(--border-pagination-style, solid) var(--border-pagination-color, var(--border-color));
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: var(--radius-pagination, var(--radius-sm, 6px));
    font-size: var(--font-size-sm, 0.875rem);
    cursor: pointer;
}

/* Quick jumper */
.xwui-pagination-jumper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: var(--spacing-sm, 0.5rem);
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary);
}

.xwui-pagination-jumper-input {
    width: 50px;
    height: 32px;
    padding: 0 var(--spacing-sm, 0.5rem);
    border: var(--border-pagination-width, var(--border-width-regular, 1.5px)) var(--border-pagination-style, solid) var(--border-pagination-color, var(--border-color));
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: var(--radius-pagination, var(--radius-sm, 6px));
    text-align: center;
    font-size: var(--font-size-sm, 0.875rem);
}


/* basic/XWUINavRail/XWUINavRail.css */
/**
 * XWUINavRail Component Styles
 * Structure + a subtle default visual theme. All colours come from
 * CSS variables so brand / theme / accent changes apply automatically.
 *
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css      (MANDATORY — bg / text / border vars)
 * - Theme: theme/accents/{selected-accent}.css    (MANDATORY — --accent-primary etc.)
 * - Lines: theme/lines/navigation/*.css           (component-specific border widths)
 * - Typography: theme/typography/*.css
 *
 * MODIFIERS
 *   .xwui-navigation-rail--container → scope:'container' — `position:
 *     absolute` anchored to mount element instead of pinned to viewport.
 *   .xwui-navigation-rail--vertical → orientation:'vertical' — items
 *     stack top-to-bottom (Material NavigationRail pattern). Good for
 *     side panels or in a 2×2 card that needs a tall narrow nav strip.
 *   .xwui-navigation-rail-rtl → items flow right-to-left.
 */

/* ── Base layout (horizontal, viewport-scoped by default) ───────────── */
.xwui-navigation-rail {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
    gap: var(--spacing-xs, 0.25rem);
    border-top: var(--border-navigation-width, var(--border-width-regular, 1.5px))
                var(--border-navigation-style, solid)
                var(--border-navigation-color, var(--border-color, rgba(0, 0, 0, 0.1)));
    background: var(--bg-primary, #ffffff);
    color: var(--text-primary, #111);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}

.xwui-navigation-rail-rtl {
    flex-direction: row-reverse;
}

/* ── Container scope — absolute within host instead of fixed viewport ── */
.xwui-navigation-rail--container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    box-shadow: none; /* the card itself already has its own shadow */
}

/* ── Vertical orientation — Material-style side rail ────────────────── */
.xwui-navigation-rail--vertical {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    /* Stretch to fill the host vertically so it reads as a full-height
       side bar. In container scope, the host's padding bounds the rail. */
    top: 0;
    right: auto;
    width: 80px;
    padding: var(--spacing-md, 1rem) var(--spacing-xs, 0.375rem);
    gap: var(--spacing-xs, 0.375rem);
    border-top: none;
    border-right: var(--border-navigation-width, var(--border-width-regular, 1.5px))
                  var(--border-navigation-style, solid)
                  var(--border-navigation-color, var(--border-color, rgba(0, 0, 0, 0.1)));
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.04);
}
.xwui-navigation-rail--vertical.xwui-navigation-rail-rtl {
    flex-direction: column; /* orientation wins over RTL for vertical rails */
    left: auto;
    right: 0;
    border-right: none;
    border-left: var(--border-navigation-width, var(--border-width-regular, 1.5px))
                 var(--border-navigation-style, solid)
                 var(--border-navigation-color, var(--border-color, rgba(0, 0, 0, 0.1)));
}

/* ── Items — rest state ─────────────────────────────────────────────── */
.xwui-navigation-rail-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 10px;
    border: none;
    background: transparent;
    color: var(--text-secondary, rgba(0, 0, 0, 0.64));
    cursor: pointer;
    border-radius: var(--radius-md, 8px);
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
    flex: 1;
    max-width: 120px;
    min-height: 56px;
    text-decoration: none;
    font-family: inherit;
    font-weight: var(--font-weight-medium, 500);
}

.xwui-navigation-rail--vertical .xwui-navigation-rail-item {
    flex: 0 0 auto;
    max-width: none;
    width: 100%;
    min-height: 64px;
    padding: 10px 6px;
}

.xwui-navigation-rail-item:hover:not(.xwui-navigation-rail-item-active) {
    background: color-mix(in srgb, var(--text-primary, #000) 6%, transparent);
    color: var(--text-primary, #111);
}

.xwui-navigation-rail-item:active {
    transform: scale(0.96);
}

/* ── Active item — accent-tinted pill behind the content ────────────── */
.xwui-navigation-rail-item-active {
    color: var(--accent-primary, #4f46e5);
    background: color-mix(in srgb, var(--accent-primary, #4f46e5) 14%, transparent);
    font-weight: var(--font-weight-semibold, 600);
}
.xwui-navigation-rail-item-active:hover {
    background: color-mix(in srgb, var(--accent-primary, #4f46e5) 22%, transparent);
}

/* ── Icon — larger in vertical, smaller in horizontal ──────────────── */
.xwui-navigation-rail-item-icon {
    font-size: var(--font-size-lg, 1.125rem);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
}
.xwui-navigation-rail-item-icon svg {
    width: 22px;
    height: 22px;
}
.xwui-navigation-rail--vertical .xwui-navigation-rail-item-icon svg {
    width: 24px;
    height: 24px;
}

/* ── Label — always below the icon (column flex) ────────────────────── */
.xwui-navigation-rail-item-label {
    font-size: var(--font-size-xs, 0.75rem);
    line-height: 1.2;
    text-align: center;
    /* In vertical orientation, labels are often shorter; allow them to
       wrap to 2 lines at most without pushing the item too tall. */
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 100%;
    word-break: break-word;
}

/* ── Icon-only items (config.iconOnly) ──────────────────────────────────
   No visible label — the label surfaces as an XWUITooltip on hover and
   stays on the button as aria-label. The item shrinks to a compact square
   so the rail fits narrow hosts (e.g. the 56px shell activity bar). */
.xwui-navigation-rail-item-icon-only {
    gap: 0;
    min-height: 44px;
}
.xwui-navigation-rail--vertical .xwui-navigation-rail-item-icon-only {
    min-height: 48px;
    padding: var(--spacing-sm, 0.5rem) var(--spacing-xs, 0.375rem);
}

/* ── Focus ring for keyboard users ──────────────────────────────────── */
.xwui-navigation-rail-item:focus-visible {
    outline: 2px solid var(--accent-primary, #4f46e5);
    outline-offset: -2px;
}

/* basic/XWUINavSidebar/XWUINavSidebar.css */
/**
 * XWUINavSidebar Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/sidebar/*.css (component-specific border widths)
 * - Roundness: theme/roundness/sidebar/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-sidebar {
    position: relative;
    height: 100%;
    background: var(--bg-primary);
    border-right: var(--border-sidebar-width, var(--border-width-regular, 1.5px)) var(--border-sidebar-style, solid) var(--border-sidebar-color, var(--border-color));
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease;
}

.xwui-sidebar-right {
    border-right: none;
    border-left: var(--border-sidebar-width, var(--border-width-regular, 1.5px)) var(--border-sidebar-style, solid) var(--border-sidebar-color, var(--border-color));
}

.xwui-sidebar-header {
    padding: var(--spacing-md, 1rem);
    border-bottom: var(--border-sidebar-width, var(--border-width-regular, 1.5px)) var(--border-sidebar-style, solid) var(--border-sidebar-color, var(--border-color));
}

.xwui-sidebar-toggle {
    position: absolute;
    top: var(--spacing-md, 1rem);
    right: -12px;
    width: 24px;
    height: 24px;
    border: var(--border-sidebar-width, var(--border-width-regular, 1.5px)) var(--border-sidebar-style, solid) var(--border-sidebar-color, var(--border-color));
    background: var(--bg-primary);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.2s;
}

.xwui-sidebar-toggle:hover {
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
}

.xwui-sidebar-right .xwui-sidebar-toggle {
    right: auto;
    left: -12px;
}

.xwui-sidebar-menu {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-sm, 0.5rem);
}

.xwui-sidebar-footer {
    padding: var(--spacing-md, 1rem);
    border-top: var(--border-sidebar-width, var(--border-width-regular, 1.5px)) var(--border-sidebar-style, solid) var(--border-sidebar-color, var(--border-color));
}

.xwui-sidebar-collapsed .xwui-sidebar-header,
.xwui-sidebar-collapsed .xwui-sidebar-footer {
    padding: var(--spacing-sm, 0.5rem);
    text-align: center;
}


/* basic/XWUINavSpeedDial/XWUINavSpeedDial.css */
/**
 * XWUINavSpeedDial Component Styles
 */

.xwui-speed-dial-container {
    /* Container has no specific styles */
}

.xwui-speed-dial {
    position: fixed;
    z-index: 1000;
}

.xwui-speed-dial-main {
    height: 56px;
    min-width: 56px;
    border-radius: 28px;
    padding: 0 16px;
    background-color: var(--accent-primary);
    color: var(--text-inverse);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    box-shadow: var(--shadow-lg);
    transition: transform 0.3s, background-color 0.3s, min-width 0.2s;
    z-index: 1001;
}

/* Size variants (canonical 9-step scale) */
.xwui-speed-dial-main:is(.xwui-speed-dial-3xs,.xwui-speed-dial-xxxs) { min-width: 20px; height: 20px; border-radius: 10px; padding: 0 6px; }
.xwui-speed-dial-main:is(.xwui-speed-dial-4xs,.xwui-speed-dial-xxxxs) { min-width: 10px; height: 10px; border-radius: 5px; padding: 0 3px; }
.xwui-speed-dial-main:is(.xwui-speed-dial-3xs,.xwui-speed-dial-xxxs) .xwui-speed-dial-main-label { display: none; }
.xwui-speed-dial-main:is(.xwui-speed-dial-4xs,.xwui-speed-dial-xxxxs) .xwui-speed-dial-main-label { display: none; }
.xwui-speed-dial-main:is(.xwui-speed-dial-2xs,.xwui-speed-dial-xxs) { min-width: 28px; height: 28px; border-radius: 14px; padding: 0 8px; }
.xwui-speed-dial-main:is(.xwui-speed-dial-2xs,.xwui-speed-dial-xxs) .xwui-speed-dial-main-label { display: none; }
.xwui-speed-dial-main.xwui-speed-dial-xs { min-width: 32px; height: 32px; border-radius: 16px; padding: 0 10px; }
.xwui-speed-dial-main.xwui-speed-dial-xs .xwui-speed-dial-main-label { display: none; }
.xwui-speed-dial-main:is(.xwui-speed-dial-s,.xwui-speed-dial-sm) {
    min-width: 40px;
    height: 40px;
    border-radius: 20px;
    padding: 0 12px;
}

.xwui-speed-dial-main:is(.xwui-speed-dial-s,.xwui-speed-dial-sm) .xwui-speed-dial-main-label {
    display: none;
}

.xwui-speed-dial-main:is(.xwui-speed-dial-m,.xwui-speed-dial-md) {
    min-width: 56px;
    height: 56px;
    border-radius: 28px;
}

.xwui-speed-dial-main:is(.xwui-speed-dial-l,.xwui-speed-dial-lg) {
    min-width: 96px;
    height: 96px;
    border-radius: 48px;
    padding: 0 24px;
}

.xwui-speed-dial-main:is(.xwui-speed-dial-l,.xwui-speed-dial-lg) svg {
    width: 36px;
    height: 36px;
}

.xwui-speed-dial-main.xwui-speed-dial-xl { min-width: 112px; height: 112px; border-radius: 56px; padding: 0 28px; }
.xwui-speed-dial-main.xwui-speed-dial-xl svg { width: 42px; height: 42px; }
.xwui-speed-dial-main:is(.xwui-speed-dial-2xl,.xwui-speed-dial-xxl) { min-width: 144px; height: 144px; border-radius: 72px; padding: 0 36px; }
.xwui-speed-dial-main:is(.xwui-speed-dial-2xl,.xwui-speed-dial-xxl) svg { width: 54px; height: 54px; }
.xwui-speed-dial-main:is(.xwui-speed-dial-3xl,.xwui-speed-dial-xxxl) { min-width: 176px; height: 176px; border-radius: 88px; padding: 0 44px; }
.xwui-speed-dial-main:is(.xwui-speed-dial-4xl,.xwui-speed-dial-xxxxl) { min-width: 281.6px; height: 281.6px; border-radius: 140.8px; padding: 0 70.4px; }
.xwui-speed-dial-main:is(.xwui-speed-dial-3xl,.xwui-speed-dial-xxxl) svg { width: 66px; height: 66px; }
.xwui-speed-dial-main:is(.xwui-speed-dial-4xl,.xwui-speed-dial-xxxxl) svg { width: 105.6px; height: 105.6px; }

/* Extended FAB (M3) — icon + label */
.xwui-speed-dial-main.xwui-speed-dial-extended {
    border-radius: 28px;
    padding-left: 16px;
    padding-right: 20px;
}

.xwui-speed-dial-main.xwui-speed-dial-extended:is(.xwui-speed-dial-3xs,.xwui-speed-dial-xxxs) { border-radius: 10px; padding-left: 6px; padding-right: 8px; }
.xwui-speed-dial-main.xwui-speed-dial-extended:is(.xwui-speed-dial-4xs,.xwui-speed-dial-xxxxs) { border-radius: 5px; padding-left: 3px; padding-right: 4px; }
.xwui-speed-dial-main.xwui-speed-dial-extended:is(.xwui-speed-dial-2xs,.xwui-speed-dial-xxs) { border-radius: 14px; padding-left: 8px; padding-right: 11px; }
.xwui-speed-dial-main.xwui-speed-dial-extended.xwui-speed-dial-xs { border-radius: 16px; padding-left: 10px; padding-right: 13px; }
.xwui-speed-dial-main.xwui-speed-dial-extended:is(.xwui-speed-dial-s,.xwui-speed-dial-sm) {
    border-radius: 20px;
    padding-left: 12px;
    padding-right: 16px;
}

.xwui-speed-dial-main.xwui-speed-dial-extended:is(.xwui-speed-dial-l,.xwui-speed-dial-lg) {
    border-radius: 48px;
    padding-left: 24px;
    padding-right: 28px;
}

.xwui-speed-dial-main.xwui-speed-dial-extended.xwui-speed-dial-xl { border-radius: 56px; padding-left: 28px; padding-right: 32px; }
.xwui-speed-dial-main.xwui-speed-dial-extended:is(.xwui-speed-dial-2xl,.xwui-speed-dial-xxl) { border-radius: 72px; padding-left: 36px; padding-right: 42px; }
.xwui-speed-dial-main.xwui-speed-dial-extended:is(.xwui-speed-dial-3xl,.xwui-speed-dial-xxxl) { border-radius: 88px; padding-left: 44px; padding-right: 52px; }
.xwui-speed-dial-main.xwui-speed-dial-extended:is(.xwui-speed-dial-4xl,.xwui-speed-dial-xxxxl) { border-radius: 140.8px; padding-left: 70.4px; padding-right: 83.2px; }

/* Legacy size aliases */
.xwui-speed-dial-main.xwui-speed-dial-small { min-width: 40px; height: 40px; border-radius: 20px; padding: 0 12px; }
.xwui-speed-dial-main.xwui-speed-dial-small .xwui-speed-dial-main-label { display: none; }
.xwui-speed-dial-main.xwui-speed-dial-medium { min-width: 56px; height: 56px; border-radius: 28px; }
.xwui-speed-dial-main.xwui-speed-dial-large { min-width: 96px; height: 96px; border-radius: 48px; padding: 0 24px; }
.xwui-speed-dial-main.xwui-speed-dial-large svg { width: 36px; height: 36px; }
.xwui-speed-dial-main.xwui-speed-dial-extended.xwui-speed-dial-small { border-radius: 20px; padding-left: 12px; padding-right: 16px; }
.xwui-speed-dial-main.xwui-speed-dial-extended.xwui-speed-dial-large { border-radius: 48px; padding-left: 24px; padding-right: 28px; }

.xwui-speed-dial-main-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.xwui-speed-dial-main:hover {
    background-color: var(--accent-hover, #40a9ff);
    transform: scale(1.1);
}

.xwui-speed-dial-main svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s;
}

.xwui-speed-dial-open .xwui-speed-dial-main svg {
    transform: rotate(45deg);
}

.xwui-speed-dial-actions {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 72px;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s, transform 0.3s;
}

.xwui-speed-dial-open .xwui-speed-dial-actions {
    pointer-events: auto;
    opacity: 1;
    transform: scale(1);
}

.xwui-speed-dial-action {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--bg-primary, #ffffff);
    color: var(--text-primary, #333);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.15));
    transition: transform 0.2s, background-color 0.2s;
    position: relative;
}

.xwui-speed-dial-action:hover {
    background-color: var(--bg-hover, #f0f0f0);
    transform: scale(1.1);
}

.xwui-speed-dial-action svg {
    width: 20px;
    height: 20px;
}

.xwui-speed-dial-action-label {
    position: absolute;
    right: 56px;
    white-space: nowrap;
    background: var(--color-overlay-dark, rgba(0, 0, 0, 0.8));
    color: var(--text-inverse, #ffffff);
    padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
    border-radius: var(--radius-sm, 4px);
    font-size: var(--font-size-xs, 12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.xwui-speed-dial-action:hover .xwui-speed-dial-action-label {
    opacity: 1;
}

.xwui-speed-dial-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-overlay, rgba(0, 0, 0, 0.3));
    z-index: 999;
    display: none;
}

/* ── Container-scoped mode ─────────────────────────────────────────────
   When `config.scope === 'container'`, the wrapper is tagged
   `.xwui-speed-dial--container` and the overlay
   `.xwui-speed-dial-overlay--container`. Both switch from fixed (viewport-
   wide) to absolute (bound by the host element, which is promoted to
   `position: relative` by the component if it was static). The z-index
   also drops to a local stacking context so the scoped dial doesn't
   compete with app-level overlays/toasts. */
.xwui-speed-dial--container {
    position: absolute !important;
    z-index: 2;
}
.xwui-speed-dial-overlay--container {
    position: absolute;
    z-index: 1;
}
.xwui-speed-dial-container--scoped {
    /* Host has been promoted by JS when static — nothing to add here, but
       a class hook is useful for consumer-supplied CSS overrides. */
}

.xwui-speed-dial-actions.xwui-speed-dial-down {
    flex-direction: column-reverse;
    margin-bottom: 0;
    margin-top: 72px;
}

.xwui-speed-dial-actions.xwui-speed-dial-left {
    flex-direction: row-reverse;
    margin-bottom: 0;
    margin-right: 72px;
}

.xwui-speed-dial-actions.xwui-speed-dial-right {
    flex-direction: row;
    margin-bottom: 0;
    margin-left: 72px;
}


/* basic/XWUINavSteps/XWUINavSteps.css */
/**
 * XWUINavSteps Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Typography: theme/typography/*.css
 */

.xwui-steps {
    /* Drives both the icon circle size AND the connector tail offsets so they
       stay aligned across sm/md/lg (previously the tail was hardcoded to 32px
       and broke at size="sm"). */
    --xwui-step-icon-size: 32px;
    display: flex;
    width: 100%;
}

.xwui-steps-horizontal {
    flex-direction: row;
}

.xwui-steps-vertical {
    flex-direction: column;
}

/* Step */
.xwui-step {
    position: relative;
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm, 0.75rem);
}

.xwui-steps-vertical .xwui-step {
    flex-direction: row;
    flex: none;
    margin-bottom: var(--spacing-md, 1rem);
}

/* Icon */
.xwui-step-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--xwui-step-icon-size, 32px);
    height: var(--xwui-step-icon-size, 32px);
    border-radius: 50%;
    border: var(--border-navigation-width, var(--border-width-thick, 2px)) var(--border-navigation-style, solid) var(--border-navigation-color, var(--border-color));
    background: var(--bg-primary);
    font-weight: var(--font-weight-semibold, 600);
    transition: all 0.2s;
}

.xwui-step-icon svg {
    width: 18px;
    height: 18px;
}

/* Status variants */
.xwui-step-wait .xwui-step-icon {
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.xwui-step-process .xwui-step-icon {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-inverse);
}

.xwui-step-finish .xwui-step-icon {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-inverse);
}

.xwui-step-error .xwui-step-icon {
    background: var(--accent-error, var(--role-danger-bg, var(--accent-danger)));
    border-color: var(--accent-error, var(--role-danger-bg, var(--accent-danger)));
    color: var(--text-inverse);
}

/* Content */
.xwui-step-content {
    flex: 1;
    padding-top: var(--spacing-xs, 0.25rem);
}

.xwui-step-title {
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs, 0.25rem);
}

.xwui-step-wait .xwui-step-title {
    color: var(--text-secondary);
}

.xwui-step-description {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary);
}

/* Tail (connector) */
.xwui-step-tail {
    position: absolute;
    background: var(--border-color);
    transition: background 0.2s;
}

.xwui-steps-horizontal .xwui-step-tail {
    top: calc(var(--xwui-step-icon-size, 32px) / 2);
    left: calc(var(--xwui-step-icon-size, 32px) + 0.75rem);
    right: 0;
    height: 2px;
}

.xwui-steps-vertical .xwui-step-tail {
    top: calc(var(--xwui-step-icon-size, 32px) + 0.75rem);
    left: calc(var(--xwui-step-icon-size, 32px) / 2);
    bottom: -1rem;
    width: 2px;
}

.xwui-step-tail-active {
    background: var(--accent-primary);
}

/* Size variants · set the shared icon-size var so the connector tails track. */
:is(.xwui-steps-s,.xwui-steps-sm) { --xwui-step-icon-size: 24px; }
:is(.xwui-steps-l,.xwui-steps-lg) { --xwui-step-icon-size: 40px; }

:is(.xwui-steps-s,.xwui-steps-sm) .xwui-step-icon {
    width: 24px;
    height: 24px;
    font-size: var(--font-size-xs, 0.75rem);
}

:is(.xwui-steps-s,.xwui-steps-sm) .xwui-step-icon svg {
    width: 14px;
    height: 14px;
}

:is(.xwui-steps-l,.xwui-steps-lg) .xwui-step-icon {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-base, 1rem);
}

:is(.xwui-steps-l,.xwui-steps-lg) .xwui-step-icon svg {
    width: 22px;
    height: 22px;
}


/* basic/XWUINavTabMenu/XWUINavTabMenu.css */
.xwui-tabmenu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs, 0.25rem);
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.xwui-tabmenu-underline .xwui-tabmenu-item-active {
  border-bottom: 2px solid var(--accent-primary, #4f46e5);
  margin-bottom: -1px;
}

.xwui-tabmenu-item {
  margin: 0;
}

.xwui-tabmenu-item-active .xwui-button-container .xwui-button {
  font-weight: 600;
}

/* basic/XWUINavTabs/XWUINavTabs.css */
/**
 * XWUINavTabs Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/tab/*.css (component-specific border widths)
 * - Roundness: theme/roundness/tab/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-tabs {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.xwui-tabs-vertical {
    flex-direction: row;
}

/* Tab list */
.xwui-tabs-list {
    display: flex;
    gap: 0;
}

.xwui-tabs-horizontal .xwui-tabs-list {
    flex-direction: row;
    border-bottom: var(--border-tab-width, var(--border-width-regular, 1.5px)) var(--border-tab-style, solid) var(--border-tab-color, var(--border-color, #dee2e6));
}

.xwui-tabs-vertical .xwui-tabs-list {
    flex-direction: column;
    border-right: var(--border-tab-width, var(--border-width-regular, 1.5px)) var(--border-tab-style, solid) var(--border-tab-color, var(--border-color, #dee2e6));
    min-width: 150px;
}

.xwui-tabs-centered .xwui-tabs-list {
    justify-content: center;
}

.xwui-tabs-full-width .xwui-tab {
    flex: 1;
}

/* Individual tab */
.xwui-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm, 0.5rem);
    border: none;
    background: transparent;
    cursor: pointer;
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-secondary, #6c757d);
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    position: relative;
    white-space: nowrap;
}

.xwui-tab:hover:not(.xwui-tab-disabled) {
    color: var(--text-primary, #212529);
}

.xwui-tab-active {
    color: var(--accent-primary, #4f46e5);
}

.xwui-tab-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Size variants.
   The component config accepts both legacy names ("small"/"medium"/"large")
   and the canonical xwui scale ("xxxs"→"xxxxl"). Previously the CSS only
   defined the legacy names, so `size: 'sm'` (which the config treats as
   the canonical small) produced an unstyled tab strip — tabs had no
   padding, sitting flush against each other as unspaced text. These
   extra selectors alias every canonical size to a matching padding
   scale so the component feels the same regardless of which naming
   style the caller uses. */
.xwui-tabs-small .xwui-tab,
:is(.xwui-tabs-4xs,.xwui-tabs-xxxxs) .xwui-tab,
:is(.xwui-tabs-3xs,.xwui-tabs-xxxs) .xwui-tab,
:is(.xwui-tabs-2xs,.xwui-tabs-xxs) .xwui-tab,
.xwui-tabs-xs .xwui-tab,
:is(.xwui-tabs-s,.xwui-tabs-sm) .xwui-tab {
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
    font-size: var(--font-size-sm, 0.8125rem);
}

.xwui-tabs-medium .xwui-tab,
:is(.xwui-tabs-m,.xwui-tabs-md) .xwui-tab {
    padding: var(--spacing-sm, 0.75rem) var(--spacing-lg, 1.25rem);
    font-size: var(--font-size-sm, 0.875rem);
}

.xwui-tabs-large .xwui-tab,
:is(.xwui-tabs-l,.xwui-tabs-lg) .xwui-tab,
.xwui-tabs-xl .xwui-tab,
:is(.xwui-tabs-2xl,.xwui-tabs-xxl) .xwui-tab,
:is(.xwui-tabs-3xl,.xwui-tabs-xxxl) .xwui-tab,
:is(.xwui-tabs-4xl,.xwui-tabs-xxxxl) .xwui-tab {
    padding: var(--spacing-md, 1rem) var(--spacing-lg, 1.5rem);
    font-size: var(--font-size-base, 1rem);
}

/* Line variant — flat bottom underline. Needs `border-radius: 0` on the
   tab button itself to defeat the global `button { border-radius: 6px }`
   rule from core/utilities.css: without this, the `::after` pseudo would
   clip along the tab's rounded corners and render as a bracket shape at
   the bottom of the active tab instead of a flat line. */
.xwui-tabs-line .xwui-tab,
.xwui-tabs-underline .xwui-tab {
    border-radius: 0;
}

.xwui-tabs-line .xwui-tab-active::after {
    content: '';
    position: absolute;
    background: var(--accent-primary, #4f46e5);
}

.xwui-tabs-line.xwui-tabs-horizontal .xwui-tab-active::after {
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
}

.xwui-tabs-line.xwui-tabs-vertical .xwui-tab-active::after {
    right: -1px;
    top: 0;
    bottom: 0;
    width: 2px;
}

/* Card variant */
.xwui-tabs-card .xwui-tab {
    border: var(--border-tab-width, var(--border-width-regular, 1.5px)) var(--border-tab-style, solid) transparent;
    border-radius: var(--radius-tab, var(--radius-sm, 6px)) var(--radius-tab, var(--radius-sm, 6px)) 0 0;
    margin-bottom: -1px;
}

.xwui-tabs-card .xwui-tab-active {
    background: var(--bg-primary, #ffffff);
    border-color: var(--border-color, #dee2e6);
    border-bottom-color: transparent;
}

.xwui-tabs-card.xwui-tabs-vertical .xwui-tab {
    border-radius: var(--radius-tab, var(--radius-sm, 6px)) 0 0 var(--radius-tab, var(--radius-sm, 6px));
    margin-bottom: 0;
    margin-right: -1px;
}

.xwui-tabs-card.xwui-tabs-vertical .xwui-tab-active {
    border-right-color: transparent;
    border-bottom-color: var(--border-color, #dee2e6);
}

/* Underline variant (Primer UnderlineNav-style) */
.xwui-tabs-underline.xwui-tabs-horizontal .xwui-tabs-list {
    border-bottom: var(--border-tab-width, 1px) solid var(--border-tab-color, var(--border-color));
}

.xwui-tabs-underline .xwui-tab-active::after {
    content: '';
    position: absolute;
    background: var(--accent-primary);
}

.xwui-tabs-underline.xwui-tabs-horizontal .xwui-tab-active::after {
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
}

.xwui-tabs-underline.xwui-tabs-vertical .xwui-tab-active::after {
    right: -1px;
    top: 0;
    bottom: 0;
    width: 2px;
}

/* Button variant */
.xwui-tabs-button .xwui-tabs-list {
    gap: var(--spacing-xs, 0.25rem);
    padding: var(--spacing-xs, 0.25rem);
    background: var(--bg-secondary, #f8f9fa);
    border-radius: var(--radius-tab, var(--radius-md, 8px));
    border: none;
}

.xwui-tabs-button .xwui-tab {
    border-radius: var(--radius-tab, var(--radius-sm, 6px));
}

.xwui-tabs-button .xwui-tab-active {
    background: var(--bg-primary, #ffffff);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

/* Tab icon */
.xwui-tab-icon {
    display: flex;
    align-items: center;
}

.xwui-tab-icon svg {
    width: 16px;
    height: 16px;
}

/* Tab content/panels */
.xwui-tabs-content {
    flex: 1;
}

.xwui-tab-panel {
    padding: var(--spacing-md, 1rem) 0;
}

.xwui-tabs-vertical .xwui-tab-panel {
    padding: 0 var(--spacing-md, 1rem);
}

.xwui-tab-panel[hidden] {
    display: none;
}

/* Dark theme */
[data-theme="dark"] .xwui-tabs-horizontal .xwui-tabs-list,
[data-theme="dark"] .xwui-tabs-vertical .xwui-tabs-list {
    border-color: var(--border-color, #334155);
}

[data-theme="dark"] .xwui-tab {
    color: var(--text-secondary, #94a3b8);
}

[data-theme="dark"] .xwui-tab:hover:not(.xwui-tab-disabled) {
    color: var(--text-primary, #f1f5f9);
}

[data-theme="dark"] .xwui-tabs-card .xwui-tab-active {
    background: var(--bg-primary, #0f172a);
    border-color: var(--border-color, #334155);
}

[data-theme="dark"] .xwui-tabs-button .xwui-tabs-list {
    background: var(--bg-secondary, #1e293b);
}

[data-theme="dark"] .xwui-tabs-button .xwui-tab-active {
    background: var(--bg-primary, #0f172a);
}

/* ── Strip wrapper: arrows + tab list + add button in one row ───────── */
.xwui-tabs-strip {
    display: flex;
    align-items: stretch;
    gap: 2px;
    min-width: 0;
}

/* Scrollable tab list: clip overflow horizontally so arrows can scroll it */
.xwui-tabs-strip .xwui-tabs-list {
    overflow-x: auto;
    scrollbar-width: none;
    min-width: 0;
}
.xwui-tabs-strip .xwui-tabs-list::-webkit-scrollbar { display: none; }

/* Nav arrows (prev / next) */
.xwui-tabs-nav,
.xwui-tabs-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: transparent;
    border: none;
    color: var(--text-secondary, #6c757d);
    cursor: pointer;
    border-radius: var(--radius-sm, 6px);
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}
.xwui-tabs-nav:hover,
.xwui-tabs-add:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.xwui-tabs-nav:disabled,
.xwui-tabs-add:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Drag-to-reorder visual feedback
 * Cursor stays NORMAL on hover — browsers show the closed-fist "grabbing"
 * cursor automatically during a native drag operation, which is what we
 * want. Showing `cursor: grab` on hover makes the tab feel non-clickable.
 * We DO however mark the currently-dragged tab with reduced opacity and
 * paint a colored edge on the hovered target tab to show the drop slot. */
.xwui-tab-dragging { opacity: 0.4; cursor: grabbing; }
.xwui-tab-drop-before { box-shadow: inset 2px 0 0 0 var(--accent-primary); }
.xwui-tab-drop-after  { box-shadow: inset -2px 0 0 0 var(--accent-primary); }

/* Drop target for external XWUIItem drags (acceptItemDrops config) */
.xwui-tabs-strip-drop-active {
    background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
    box-shadow: inset 0 0 0 2px var(--accent-primary);
    transition: background 0.12s ease, box-shadow 0.12s ease;
}

/* Per-tab close button */
.xwui-tab-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    color: var(--text-tertiary, #adb5bd);
    cursor: pointer;
    opacity: 0.6;
    transition: background 0.15s, opacity 0.15s, color 0.15s;
}
.xwui-tab-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    opacity: 1;
}

/* Per-tab favorite (★) + archive toggles + subtitle + leading image. */
.xwui-tab-star,
.xwui-tab-archive {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    color: var(--text-tertiary, #adb5bd);
    cursor: pointer;
    opacity: 0.6;
    line-height: 1;
    transition: background 0.15s, opacity 0.15s, color 0.15s, transform 0.1s;
}
.xwui-tab-star { font-size: 14px; }
.xwui-tab-star:hover,
.xwui-tab-archive:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    opacity: 1;
}
.xwui-tab-star:active,
.xwui-tab-archive:active { transform: scale(0.9); }
.xwui-tab-star-on {
    color: var(--accent-warning, #f59e0b);
    opacity: 1;
}
.xwui-tab-archive-on {
    color: var(--accent-primary, #4f46e5);
    opacity: 1;
}
.xwui-tab-labelcol {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
}
.xwui-tab-subtitle {
    font-size: 0.75em;
    color: var(--text-tertiary, #94a3b8);
    font-weight: 400;
}
.xwui-tab-image {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 4px;
}

/* Smart scroll arrows — hide nav buttons when at the edge (set via JS).
   WHY: the hidden attribute alone is often defeated by the flex display
   rule on .xwui-tabs-nav, so we enforce display:none explicitly. */
.xwui-tabs-nav[hidden] { display: none !important; }

/* Fade-gradient overlay — signals overflowed content in each direction.
   WHY: applied via JS class toggle on the strip so the gradient tracks
   scroll position rather than being always-on. */
.xwui-tabs-strip { position: relative; }
.xwui-tabs-strip::before,
.xwui-tabs-strip::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 32px;
    pointer-events: none;
    z-index: 4;
    opacity: 0;
    transition: opacity 140ms ease;
}
.xwui-tabs-strip::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-app, var(--bg-base, #fff)), transparent);
}
.xwui-tabs-strip::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-app, var(--bg-base, #fff)), transparent);
}
.xwui-tabs-strip.xwui-tabs-strip--faded-left::before  { opacity: 1; }
.xwui-tabs-strip.xwui-tabs-strip--faded-right::after  { opacity: 1; }


/* basic/XWUINonIdealState/XWUINonIdealState.css */
/**
 * XWUINonIdealState Component Styles
 * Blueprint NonIdealState parity.
 */
.xwui-non-ideal-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px 24px;
  color: var(--color-non-ideal-state-fg, var(--color-on-surface));
}

.xwui-non-ideal-state-horizontal {
  flex-direction: row;
  text-align: left;
  gap: 24px;
}

.xwui-non-ideal-state-horizontal .xwui-non-ideal-state-text {
  align-items: flex-start;
}

.xwui-non-ideal-state-icon {
  font-size: 48px;
  line-height: 1;
  color: var(--color-non-ideal-state-icon, rgba(0,0,0,0.4));
  margin-bottom: 16px;
}

.xwui-non-ideal-state-horizontal .xwui-non-ideal-state-icon {
  margin-bottom: 0;
}

.xwui-non-ideal-state-icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.xwui-non-ideal-state-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.xwui-non-ideal-state-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.xwui-non-ideal-state-description {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-non-ideal-state-description, rgba(0,0,0,0.6));
  max-width: 400px;
}

.xwui-non-ideal-state-action {
  margin-top: 16px;
}

/* basic/XWUINotification/XWUINotification.css */
/**
 * XWUINotification Component Styles
 * Ant Design Notification parity.
 */
.xwui-notification {
  position: relative;
  min-width: 320px;
  max-width: 384px;
  padding: 16px 24px;
  background: var(--color-notification-bg, var(--color-surface));
  border-radius: var(--radius-notification, 8px);
  box-shadow: var(--shadow-notification, var(--shadow-lg));
  border: 1px solid var(--color-notification-border, var(--border-light));
}

.xwui-notification-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--text-tertiary);
}

.xwui-notification-close:hover {
  color: var(--text-primary);
}

.xwui-notification-body {
  display: flex;
  gap: 12px;
}

.xwui-notification-icon {
  flex-shrink: 0;
}

.xwui-notification-icon img {
  width: 24px;
  height: 24px;
}

.xwui-notification-text {
  flex: 1;
  min-width: 0;
}

.xwui-notification-title {
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--color-on-surface);
}

.xwui-notification-description {
  font-size: 0.875rem;
  color: var(--color-on-surface-muted, rgba(0,0,0,0.65));
}

.xwui-notification-info { border-inline-start: 4px solid var(--color-info); }
.xwui-notification-success { border-inline-start: 4px solid var(--color-success); }
.xwui-notification-warning { border-inline-start: 4px solid var(--color-warning); }
.xwui-notification-error { border-inline-start: 4px solid var(--color-error); }

/* basic/XWUIOverlayBackdrop/XWUIOverlayBackdrop.css */
/**
 * XWUIOverlayBackdrop Component Styles
 * 
 * Style Dependencies (loaded in testers/app):
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Roundness: theme/roundness/backdrop/*.css (component-specific roundness)
 * - Lines: theme/lines/backdrop/*.css (component-specific border widths)
 * - Typography: theme/typography/*.css
 */

.xwui-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    
    /* Colors from theme (MANDATORY - use variables, never hardcode) */
    background-color: var(--color-backdrop-bg, rgba(0, 0, 0, 0.5));
    
    /* Z-index from config or default */
    z-index: var(--backdrop-z-index, 1000);
    
    /* Layout only - no hardcoded values */
    cursor: pointer;
    transition: opacity var(--transition-duration-backdrop, 0.2s) ease;
}

.xwui-backdrop-invisible {
    background-color: transparent;
}


/* basic/XWUIOverlayBlockUI/XWUIOverlayBlockUI.css */
.xwui-blockui-host {
  position: relative;
  display: block;
}

.xwui-blockui-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--xwui-blockui-z, 9998);
  /* Scrim — derived from --bg-primary so it dims correctly on any theme.
     On light: a white-ish veil; on dark: a near-black veil. Previously
     hardcoded rgba(255,255,255,0.6) which was a blinding white flash on
     every dark theme. */
  background: color-mix(in srgb, var(--bg-primary, white) 60%, transparent);
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.xwui-blockui-overlay.xwui-blockui-fullscreen {
  position: fixed;
  inset: 0;
}

.xwui-blockui-overlay.xwui-blockui-visible {
  display: flex;
}

.xwui-blockui-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md, 1rem);
}

.xwui-blockui-spinner-wrap {
  flex-shrink: 0;
}

.xwui-blockui-message {
  font-size: var(--font-size-sm, 0.875rem);
  /* Was var(--text-secondary, ...) — that legacy name isn't defined
     by any theme; switched to the canonical --text-secondary. */
  color: var(--text-secondary, #4b5563);
  max-width: 20rem;
  text-align: center;
}

/* basic/XWUIOverlayBottomSheet/XWUIOverlayBottomSheet.css */
/**
 * XWUIOverlayBottomSheet Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/overlay/*.css (component-specific border widths)
 * - Roundness: theme/roundness/rounded.css (global roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-bottomsheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: var(--color-overlay, rgba(0, 0, 0, 0.45));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.xwui-bottomsheet-overlay-visible {
    opacity: 1;
}

.xwui-bottomsheet {
    width: 100%;
    max-width: 100%;
    background: var(--bg-elevated, var(--bg-primary));
    color: var(--text-primary);
    box-shadow: var(--shadow-xl);
    border-radius: var(--radius-overlay, var(--radius-lg, 16px)) var(--radius-overlay, var(--radius-lg, 16px)) 0 0;
    overflow: hidden;
    transform: translateY(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.xwui-bottomsheet-visible {
    transform: translateY(0);
}

.xwui-bottomsheet-title {
    padding: var(--spacing-md, 1rem) var(--spacing-lg, 1.5rem);
    font-weight: var(--font-weight-semibold, 600);
    font-size: var(--font-size-lg, 1.125rem);
    border-bottom: var(--border-bottomsheet-width, var(--border-width-regular, 1.5px)) var(--border-bottomsheet-style, solid) var(--border-bottomsheet-color, var(--border-color));
    flex-shrink: 0;
}

.xwui-bottomsheet-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-lg, 1.5rem);
    min-height: 0;
}


/* basic/XWUIOverlayDialog/XWUIOverlayDialog.css */
/**
 * XWUIOverlayDialog Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/dialog/*.css (component-specific border widths)
 * - Roundness: theme/roundness/dialog/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-overlay, rgba(0, 0, 0, 0.5));
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--spacing-2xl, 2rem);
    overflow-y: auto;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.xwui-dialog-overlay-visible {
    opacity: 1;
}

.xwui-dialog {
    background: var(--bg-primary);
    border-radius: var(--radius-dialog, var(--radius-lg, 12px));
    box-shadow: var(--shadow-xl, 0 25px 50px -12px rgba(0, 0, 0, 0.25));
    width: 100%;
    max-height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
    transform: scale(0.95) translateY(-20px);
    transition: transform 0.2s ease;
    outline: none;
}

.xwui-dialog-visible {
    transform: scale(1) translateY(0);
}

.xwui-dialog-centered {
    margin: auto;
}

/* Size variants (canonical 9-step scale) */
:is(.xwui-dialog-3xs,.xwui-dialog-xxxs) { max-width: 200px; }
:is(.xwui-dialog-4xs,.xwui-dialog-xxxxs) { max-width: 100px; }
:is(.xwui-dialog-2xs,.xwui-dialog-xxs) { max-width: 260px; }
.xwui-dialog-xs { max-width: 320px; }
:is(.xwui-dialog-s,.xwui-dialog-sm) { max-width: 400px; }
:is(.xwui-dialog-m,.xwui-dialog-md) { max-width: 560px; }
:is(.xwui-dialog-l,.xwui-dialog-lg) { max-width: 800px; }
.xwui-dialog-xl { max-width: 960px; }
:is(.xwui-dialog-2xl,.xwui-dialog-xxl) { max-width: 1248px; }
:is(.xwui-dialog-3xl,.xwui-dialog-xxxl) { max-width: 1536px; }
:is(.xwui-dialog-4xl,.xwui-dialog-xxxxl) { max-width: 2457.6px; }

/* Legacy size aliases */
.xwui-dialog-small { max-width: 400px; }
.xwui-dialog-medium { max-width: 560px; }
.xwui-dialog-large { max-width: 800px; }

.xwui-dialog-fullscreen {
    max-width: none;
    width: calc(100% - 4rem);
    height: calc(100vh - 4rem);
    border-radius: 0;
}

/* Header */
.xwui-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg, 1.25rem) var(--spacing-lg, 1.5rem);
    border-bottom: var(--border-dialog-width, var(--border-width-regular, 1.5px)) var(--border-dialog-style, solid) var(--border-dialog-color, var(--border-color, #dee2e6));
    flex-shrink: 0;
}

.xwui-dialog-title {
    margin: 0;
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary);
}

.xwui-dialog-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: var(--radius-dialog, var(--radius-sm, 6px));
    transition: background 0.2s, color 0.2s;
}

.xwui-dialog-close:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.xwui-dialog-close svg {
    width: 20px;
    height: 20px;
}

/* Body */
.xwui-dialog-body {
    padding: var(--spacing-lg, 1.5rem);
    flex: 1;
    color: var(--text-primary);
}

.xwui-dialog-scrollable .xwui-dialog-body {
    overflow-y: auto;
}

/* Footer */
.xwui-dialog-footer {
    padding: var(--spacing-md, 1rem) var(--spacing-lg, 1.5rem);
    border-top: var(--border-dialog-width, var(--border-width-regular, 1.5px)) var(--border-dialog-style, solid) var(--border-dialog-color, var(--border-color, #dee2e6));
    flex-shrink: 0;
}

/* Dialog buttons */
.xwui-dialog-btn {
    padding: var(--spacing-sm, 0.625rem) var(--spacing-md, 1rem);
    border: none;
    border-radius: var(--radius-dialog, var(--radius-sm, 6px));
    font-weight: var(--font-weight-medium, 500);
    font-size: var(--font-size-sm, 0.875rem);
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}

.xwui-dialog-btn-primary {
    background: var(--accent-primary);
    color: var(--text-inverse);
}

.xwui-dialog-btn-primary:hover {
    background: var(--accent-hover);
}

.xwui-dialog-btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.xwui-dialog-btn-secondary:hover {
    background: var(--bg-tertiary);
}

.xwui-dialog-btn-danger {
    background: var(--accent-error);
    color: var(--text-inverse);
}

.xwui-dialog-btn-danger:hover {
    background: var(--accent-error-hover, var(--status-error-hover));
}

/* Dark theme */
[data-theme="dark"] .xwui-dialog-overlay {
    background: var(--color-overlay-dark, rgba(0, 0, 0, 0.7));
}

[data-theme="dark"] .xwui-dialog {
    background: var(--bg-primary, #0f172a);
}

[data-theme="dark"] .xwui-dialog-header,
[data-theme="dark"] .xwui-dialog-footer {
    border-color: var(--border-color, #334155);
}

[data-theme="dark"] .xwui-dialog-title,
[data-theme="dark"] .xwui-dialog-body {
    color: var(--text-primary, #f1f5f9);
}

[data-theme="dark"] .xwui-dialog-close:hover {
    background: var(--bg-secondary, #1e293b);
}

[data-theme="dark"] .xwui-dialog-btn-secondary {
    background: var(--bg-secondary, #1e293b);
    color: var(--text-primary, #f1f5f9);
}

[data-theme="dark"] .xwui-dialog-btn-secondary:hover {
    background: var(--bg-tertiary, #334155);
}


/* basic/XWUIOverlayFocusTrap/XWUIOverlayFocusTrap.css */
/**
 * XWUIOverlayFocusTrap Component Styles
 * Focus trap utility (no visual styles, purely functional)
 */

.xwui-focus-trap {
    /* Focus trap has no visual styles */
}


/* basic/XWUIOverlayHoverCard/XWUIOverlayHoverCard.css */
/**
 * XWUIOverlayHoverCard Component Styles
 * Inherits from XWUIOverlayPopover
 */

.xwui-hover-card-container {
    /* Container has no specific styles - inherits from XWUIOverlayPopover */
}


/* basic/XWUIOverlayNotification/XWUIOverlayNotification.css */
/**
 * XWUIOverlayNotification Component Styles
 * Ant Design Notification parity.
 */
.xwui-notification {
  position: relative;
  min-width: 320px;
  max-width: 384px;
  padding: 16px 24px;
  background: var(--color-notification-bg, var(--bg-primary));
  border-radius: var(--radius-notification, 8px);
  box-shadow: var(--shadow-notification, var(--shadow-lg));
  border: 1px solid var(--color-notification-border, var(--border-light));
}

.xwui-notification-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: var(--text-tertiary);
}

.xwui-notification-close:hover {
  color: var(--text-primary);
}

.xwui-notification-body {
  display: flex;
  gap: 12px;
}

.xwui-notification-icon {
  flex-shrink: 0;
}

.xwui-notification-icon img {
  width: 24px;
  height: 24px;
}

.xwui-notification-text {
  flex: 1;
  min-width: 0;
}

.xwui-notification-title {
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text-primary);
}

.xwui-notification-description {
  font-size: 0.875rem;
  color: var(--text-primary-muted, rgba(0,0,0,0.65));
}

.xwui-notification-info { border-inline-start: 4px solid var(--accent-info); }
.xwui-notification-success { border-inline-start: 4px solid var(--accent-success); }
.xwui-notification-warning { border-inline-start: 4px solid var(--accent-warning); }
.xwui-notification-error { border-inline-start: 4px solid var(--accent-error); }

/* basic/XWUIOverlayPopconfirm/XWUIOverlayPopconfirm.css */
/**
 * XWUIOverlayPopconfirm Component Styles
 */

.xwui-popconfirm-container {
    /* Container has no specific styles */
}

.xwui-popconfirm-content {
    padding: 12px;
    min-width: 200px;
}

.xwui-popconfirm-title {
    font-weight: 500;
    margin-bottom: 4px;
}

.xwui-popconfirm-description {
    color: var(--text-secondary, #666);
    font-size: var(--font-size-sm, 14px);
    margin-bottom: var(--spacing-md, 12px);
}

.xwui-popconfirm-buttons {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm, 8px);
}

.xwui-popconfirm-cancel,
.xwui-popconfirm-ok {
    padding: var(--spacing-xs, 4px) var(--spacing-md, 12px);
    border: 1px solid var(--border-color, #d9d9d9);
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    font-size: var(--font-size-sm, 14px);
    transition: all 0.2s;
}

.xwui-popconfirm-cancel {
    background: var(--bg-primary, #ffffff);
    color: var(--text-secondary, #666);
}

.xwui-popconfirm-cancel:hover {
    border-color: var(--accent-hover, #40a9ff);
    color: var(--accent-primary, #1890ff);
}

.xwui-popconfirm-ok {
    background: var(--accent-primary, #1890ff);
    color: var(--text-inverse, #ffffff);
    border-color: var(--accent-primary, #1890ff);
}

.xwui-popconfirm-ok:hover {
    background: var(--accent-hover, #40a9ff);
    border-color: var(--accent-hover, #40a9ff);
}


/* basic/XWUIOverlayPopover/XWUIOverlayPopover.css */
/**
 * XWUIOverlayPopover Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/popover/*.css (component-specific border widths)
 * - Roundness: theme/roundness/popover/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-popover-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.2s;
}

.xwui-popover-overlay-visible {
    opacity: 1;
}

.xwui-popover {
    position: fixed;
    min-width: 200px;
    max-width: 400px;
    background: var(--bg-primary);
    border: var(--border-popover-width, var(--border-width-regular, 1.5px)) var(--border-popover-style, solid) var(--border-popover-color, var(--border-color));
    border-radius: var(--radius-popover, var(--radius-md, 8px));
    box-shadow: var(--shadow-xl);
    z-index: 10000;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.2s, transform 0.2s;
}

.xwui-popover-visible {
    opacity: 1;
    transform: scale(1);
}

/* Arrow */
.xwui-popover-arrow {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--bg-primary);
    border: var(--border-popover-width, var(--border-width-regular, 1.5px)) var(--border-popover-style, solid) var(--border-popover-color, var(--border-color));
    transform: rotate(45deg);
}

.xwui-popover-top .xwui-popover-arrow {
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    border-top: none;
    border-right: none;
}

.xwui-popover-bottom .xwui-popover-arrow {
    top: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    border-bottom: none;
    border-left: none;
}

.xwui-popover-left .xwui-popover-arrow {
    right: -5px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    border-top: none;
    border-left: none;
}

.xwui-popover-right .xwui-popover-arrow {
    left: -5px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    border-bottom: none;
    border-right: none;
}

/* Content */
.xwui-popover-content {
    padding: var(--spacing-md, 1rem);
}

.xwui-popover-title {
    font-weight: var(--font-weight-semibold, 600);
    font-size: var(--font-size-base, 0.9375rem);
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm, 0.5rem);
}

.xwui-popover-body {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary);
    line-height: 1.5;
}


/* basic/XWUIOverlayPortal/XWUIOverlayPortal.css */
/**
 * XWUIOverlayPortal Component Styles
 * Portal container for rendering content outside normal DOM hierarchy
 */

.xwui-portal {
    /* Portal container - styles applied by parent or via className */
    /* Default: no specific styling, content is positioned as needed */
    position: relative;
}

/* When portal is used for modals/overlays, ensure it's on top */
.xwui-portal.xwui-portal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    pointer-events: none;
}

.xwui-portal.xwui-portal-overlay > * {
    pointer-events: auto;
}


/* basic/XWUIOverlaySideSheet/XWUIOverlaySideSheet.css */
/**
 * XWUIOverlaySideSheet — M3/Fluent side sheet (overlay or push)
 */

.xwui-side-sheet-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-overlay, rgba(0, 0, 0, 0.4));
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--motion-duration-normal) var(--motion-easing-standard),
                visibility var(--motion-duration-normal);
}

.xwui-side-sheet-overlay-visible {
    opacity: 1;
    visibility: visible;
}

.xwui-side-sheet {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1001;
    background: var(--bg-primary);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    transition: transform var(--motion-duration-normal) var(--motion-easing-standard);
    max-width: 100%;
}

.xwui-side-sheet-right {
    right: 0;
    transform: translateX(100%);
}

.xwui-side-sheet-right.xwui-side-sheet-visible {
    transform: translateX(0);
}

.xwui-side-sheet-left {
    left: 0;
    transform: translateX(-100%);
}

.xwui-side-sheet-left.xwui-side-sheet-visible {
    transform: translateX(0);
}

/* Width variants (canonical 9-step scale) */
:is(.xwui-side-sheet-width-3xs,.xwui-side-sheet-width-xxxs) { width: 180px; }
:is(.xwui-side-sheet-width-4xs,.xwui-side-sheet-width-xxxxs) { width: 90px; }
:is(.xwui-side-sheet-width-2xs,.xwui-side-sheet-width-xxs) { width: 240px; }
.xwui-side-sheet-width-xs { width: 300px; }
:is(.xwui-side-sheet-width-s,.xwui-side-sheet-width-sm) { width: 360px; }
:is(.xwui-side-sheet-width-m,.xwui-side-sheet-width-md) { width: 480px; }
:is(.xwui-side-sheet-width-l,.xwui-side-sheet-width-lg) { width: 600px; }
.xwui-side-sheet-width-xl { width: 720px; }
:is(.xwui-side-sheet-width-2xl,.xwui-side-sheet-width-xxl) { width: 936px; }
:is(.xwui-side-sheet-width-3xl,.xwui-side-sheet-width-xxxl) { width: 1152px; }
:is(.xwui-side-sheet-width-4xl,.xwui-side-sheet-width-xxxxl) { width: 1843.2px; }

/* Legacy size aliases */
.xwui-side-sheet-width-small { width: 360px; }
.xwui-side-sheet-width-medium { width: 480px; }
.xwui-side-sheet-width-large { width: 600px; }

.xwui-side-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.xwui-side-sheet-title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.xwui-side-sheet-close {
    padding: var(--spacing-xs);
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
}

.xwui-side-sheet-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.xwui-side-sheet-body {
    flex: 1;
    overflow: auto;
    padding: var(--spacing-md);
}

.xwui-side-sheet-footer {
    padding: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

/* basic/XWUIOverlayToast/XWUIOverlayToast.css */
/**
 * XWUIOverlayToast Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/toast/*.css (component-specific border widths)
 * - Roundness: theme/roundness/toast/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-toast-container {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.75rem);
    z-index: 10000;
    pointer-events: none;
}

.xwui-toast-top-right {
    top: var(--spacing-md, 1rem);
    right: var(--spacing-md, 1rem);
}

.xwui-toast-top-left {
    top: var(--spacing-md, 1rem);
    left: var(--spacing-md, 1rem);
}

.xwui-toast-top-center {
    top: var(--spacing-md, 1rem);
    left: 50%;
    transform: translateX(-50%);
}

.xwui-toast-bottom-right {
    bottom: var(--spacing-md, 1rem);
    right: var(--spacing-md, 1rem);
}

.xwui-toast-bottom-left {
    bottom: var(--spacing-md, 1rem);
    left: var(--spacing-md, 1rem);
}

.xwui-toast-bottom-center {
    bottom: var(--spacing-md, 1rem);
    left: 50%;
    transform: translateX(-50%);
}

/* Toast */
.xwui-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm, 0.75rem);
    min-width: 300px;
    max-width: 420px;
    padding: var(--spacing-md, 1rem);
    background: var(--bg-primary, #ffffff);
    border-radius: var(--radius-toast, var(--radius-md, 8px));
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
    border: var(--border-toast-width, var(--border-width-regular, 1.5px)) var(--border-toast-style, solid) var(--border-toast-color, var(--border-color, #dee2e6));
    pointer-events: auto;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.2s, transform 0.2s;
}

.xwui-toast-container[class*="left"] .xwui-toast {
    transform: translateX(-100%);
}

.xwui-toast-container[class*="center"] .xwui-toast {
    transform: translateY(-20px);
}

.xwui-toast-visible {
    opacity: 1;
    transform: translateX(0) translateY(0);
}

.xwui-toast-exiting {
    opacity: 0;
    transform: translateX(100%);
}

.xwui-toast-container[class*="left"] .xwui-toast-exiting {
    transform: translateX(-100%);
}

.xwui-toast-container[class*="center"] .xwui-toast-exiting {
    transform: translateY(-20px);
}

/* Icon */
.xwui-toast-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.xwui-toast-icon svg {
    width: 20px;
    height: 20px;
}

/* Variants */
.xwui-toast-info .xwui-toast-icon {
    color: var(--accent-primary);
}

.xwui-toast-success .xwui-toast-icon {
    color: var(--accent-success);
}

.xwui-toast-warning .xwui-toast-icon {
    color: var(--accent-warning);
}

.xwui-toast-error .xwui-toast-icon {
    color: var(--accent-error);
}

/* Content */
.xwui-toast-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.25rem);
}

.xwui-toast-title {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary, #212529);
}

.xwui-toast-message {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary, #6c757d);
}

/* Action */
.xwui-toast-action {
    margin-top: var(--spacing-sm, 0.5rem);
    padding: 0;
    border: none;
    background: transparent;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--accent-primary, #4f46e5);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    align-self: flex-start;
}

.xwui-toast-action:hover {
    color: var(--accent-hover, #4338ca);
}

/* Close button */
.xwui-toast-close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-tertiary, #adb5bd);
    border-radius: var(--radius-toast, var(--radius-xs, 4px));
    transition: background 0.2s, color 0.2s;
}

.xwui-toast-close:hover {
    background: var(--bg-secondary, #f8f9fa);
    color: var(--text-secondary, #6c757d);
}

.xwui-toast-close svg {
    width: 16px;
    height: 16px;
}

/* Dark theme */
[data-theme="dark"] .xwui-toast {
    background: var(--bg-elevated, #1e293b);
    border-color: var(--border-color, #334155);
}

[data-theme="dark"] .xwui-toast-title {
    color: var(--text-primary, #f1f5f9);
}

[data-theme="dark"] .xwui-toast-close:hover {
    background: var(--bg-primary, #0f172a);
}


/* basic/XWUIOverlayTooltip/XWUIOverlayTooltip.css */
/**
 * XWUIOverlayTooltip Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/tooltip/*.css (component-specific border widths)
 * - Roundness: theme/roundness/tooltip/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-tooltip {
    position: fixed;
    z-index: 200001;
    padding: var(--spacing-sm, 0.5rem) var(--spacing-sm, 0.75rem);
    font-size: var(--font-size-sm, 0.8125rem);
    color: var(--text-inverse);
    background: var(--text-primary);
    border-radius: var(--radius-tooltip, var(--radius-sm, 6px));
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
    max-width: 250px;
    word-wrap: break-word;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}

.xwui-tooltip-visible {
    opacity: 1;
    transform: scale(1);
}

/* Arrow */
.xwui-tooltip-arrow::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
    transform: rotate(45deg);
}

.xwui-tooltip-top.xwui-tooltip-arrow::before {
    bottom: -4px;
    left: 50%;
    margin-left: -4px;
}

.xwui-tooltip-bottom.xwui-tooltip-arrow::before {
    top: -4px;
    left: 50%;
    margin-left: -4px;
}

.xwui-tooltip-left.xwui-tooltip-arrow::before {
    right: -4px;
    top: 50%;
    margin-top: -4px;
}

.xwui-tooltip-right.xwui-tooltip-arrow::before {
    left: -4px;
    top: 50%;
    margin-top: -4px;
}

/* Light variant */
.xwui-tooltip-light {
    color: var(--text-primary, #212529);
    background: var(--bg-primary, #ffffff);
    border: var(--border-tooltip-width, var(--border-width-regular, 1.5px)) var(--border-tooltip-style, solid) var(--border-tooltip-color, var(--border-color, #dee2e6));
}

/* Dark theme already looks good */


/* basic/XWUIOverlayTour/XWUIOverlayTour.css */
/**
 * XWUIOverlayTour Component Styles
 */

.xwui-tour-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-overlay, rgba(0, 0, 0, 0.45));
    z-index: 998;
}

.xwui-tour-highlight {
    /* Highlight styles applied inline */
}

.xwui-tour-popover {
    background: var(--bg-primary, #ffffff);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.15));
    padding: var(--spacing-md, 16px);
    max-width: 320px;
    z-index: 1001;
}

.xwui-tour-popover-title {
    font-size: var(--font-size-base, 16px);
    font-weight: var(--font-weight-medium, 500);
    margin-bottom: var(--spacing-sm, 8px);
}

.xwui-tour-popover-description {
    font-size: var(--font-size-sm, 14px);
    color: var(--text-secondary, #666);
    margin-bottom: var(--spacing-md, 16px);
}

.xwui-tour-popover-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.xwui-tour-popover-btn {
    padding: 4px 12px;
    border: 1px solid var(--border-color, #d9d9d9);
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-primary, #ffffff);
    cursor: pointer;
    font-size: var(--font-size-sm, 14px);
}

.xwui-tour-popover-btn:hover:not(:disabled) {
    border-color: var(--accent-primary, #40a9ff);
    color: var(--accent-primary, #1890ff);
}

.xwui-tour-popover-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.xwui-tour-popover-btn-next {
    background: var(--accent-primary, #1890ff);
    color: var(--text-inverse, #ffffff);
    border-color: var(--accent-primary, #1890ff);
}

.xwui-tour-popover-btn-next:hover:not(:disabled) {
    background: var(--accent-hover, #40a9ff);
    border-color: var(--accent-hover, #40a9ff);
}

.xwui-tour-popover-btn-skip {
    color: var(--text-secondary, #666);
}


/* basic/XWUIPageHeader/XWUIPageHeader.css */
/**
 * XWUIPageHeader Component Styles
 * Element Plus Page Header parity: back, breadcrumb, title, subtitle, content.
 */
.xwui-page-header {
  padding: 16px 0;
}

.xwui-page-header-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.xwui-page-header-back-link,
.xwui-page-header-back-btn {
  font-size: 0.875rem;
  color: var(--color-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
}

.xwui-page-header-back-btn:hover,
.xwui-page-header-back-link:hover {
  text-decoration: underline;
}

.xwui-page-header-breadcrumb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--color-on-surface-variant);
}

.xwui-page-header-breadcrumb-item:not(:last-child)::after {
  content: '/';
  margin-left: 8px;
  color: var(--color-outline);
}

.xwui-page-header-breadcrumb-item a {
  color: var(--color-primary);
  text-decoration: none;
}

.xwui-page-header-breadcrumb-item a:hover {
  text-decoration: underline;
}

.xwui-page-header-heading {
  margin-bottom: 8px;
}

.xwui-page-header-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-on-surface);
}

.xwui-page-header-subtitle {
  margin: 4px 0 0;
  font-size: 0.875rem;
  color: var(--color-on-surface-variant);
  line-height: 1.4;
}

.xwui-page-header-content {
  margin-top: 12px;
  color: var(--color-on-surface);
}

/* basic/XWUIPagination/XWUIPagination.css */
/**
 * XWUIPagination Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/pagination/*.css (component-specific border widths)
 * - Roundness: theme/roundness/pagination/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-pagination {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.xwui-pagination-list {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 0.25rem);
    list-style: none;
    padding: 0;
    margin: 0;
}

.xwui-pagination-total {
    margin-right: var(--spacing-sm, 0.5rem);
    color: var(--text-secondary);
    font-size: var(--font-size-sm, 0.875rem);
}

/* Buttons */
.xwui-pagination-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 var(--spacing-sm, 0.5rem);
    border: var(--border-pagination-width, var(--border-width-regular, 1.5px)) var(--border-pagination-style, solid) var(--border-pagination-color, var(--border-color));
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: var(--radius-pagination, var(--radius-sm, 6px));
    cursor: pointer;
    font-size: var(--font-size-sm, 0.875rem);
    transition: all 0.2s;
}

.xwui-pagination-button:hover:not(:disabled) {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.xwui-pagination-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.xwui-pagination-button-active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-inverse);
}

.xwui-pagination-button-active:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

/* Ellipsis */
.xwui-pagination-ellipsis {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    color: var(--text-secondary);
}

/* Size variants */
.xwui-pagination-small .xwui-pagination-button {
    min-width: 28px;
    height: 28px;
    font-size: var(--font-size-sm, 0.8125rem);
}

.xwui-pagination-large .xwui-pagination-button {
    min-width: 36px;
    height: 36px;
    font-size: var(--font-size-base, 0.9375rem);
}

/* Simple mode */
.xwui-pagination-simple-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.xwui-pagination-simple-input {
    width: 50px;
    height: 32px;
    padding: 0 var(--spacing-sm, 0.5rem);
    border: var(--border-pagination-width, var(--border-width-regular, 1.5px)) var(--border-pagination-style, solid) var(--border-pagination-color, var(--border-color));
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: var(--radius-pagination, var(--radius-sm, 6px));
    text-align: center;
    font-size: var(--font-size-sm, 0.875rem);
}

.xwui-pagination-simple-separator {
    color: var(--text-secondary);
}

.xwui-pagination-simple-total {
    color: var(--text-secondary);
}

/* Size changer */
.xwui-pagination-size-changer {
    margin-left: var(--spacing-sm, 0.5rem);
}

.xwui-pagination-size-select {
    padding: var(--spacing-xs, 0.375rem) var(--spacing-sm, 0.75rem);
    border: var(--border-pagination-width, var(--border-width-regular, 1.5px)) var(--border-pagination-style, solid) var(--border-pagination-color, var(--border-color));
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: var(--radius-pagination, var(--radius-sm, 6px));
    font-size: var(--font-size-sm, 0.875rem);
    cursor: pointer;
}

/* Quick jumper */
.xwui-pagination-jumper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: var(--spacing-sm, 0.5rem);
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary);
}

.xwui-pagination-jumper-input {
    width: 50px;
    height: 32px;
    padding: 0 var(--spacing-sm, 0.5rem);
    border: var(--border-pagination-width, var(--border-width-regular, 1.5px)) var(--border-pagination-style, solid) var(--border-pagination-color, var(--border-color));
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: var(--radius-pagination, var(--radius-sm, 6px));
    text-align: center;
    font-size: var(--font-size-sm, 0.875rem);
}


/* basic/XWUIPanel/XWUIPanel.css */
/**
 * XWUIPanel Component Styles
 * Structure-only — no colors, borders, or shadows hardcoded.
 * Consumers style via className or CSS variables.
 */

.xwui-panel {
    display: flex;
    flex-direction: column;
    min-height: 0; /* allow flex children to shrink below content height */
}

.xwui-panel-fill {
    height: 100%;
}

/* Header — pinned to top, never scrolls */
.xwui-panel-header {
    flex-shrink: 0;
}

/* Body — fills remaining space, scrollable by default */
.xwui-panel-body {
    flex: 1;
    min-height: 0; /* required for overflow to work inside flex */
    overflow-y: auto;
    overflow-x: hidden;
}

.xwui-panel-body-no-scroll {
    overflow: hidden;
}

/* Footer — pinned to bottom, never scrolls */
.xwui-panel-footer {
    flex-shrink: 0;
}

/* basic/XWUIPaper/XWUIPaper.css */
/**
 * XWUIPaper Component Styles
 * Elevated surface (MUI Paper equivalent). Use theme variables for colors and shadows.
 */

.xwui-paper {
  background-color: var(--color-paper-bg, var(--bg-primary, #fff));
  color: var(--color-paper-fg, var(--text-primary, #111));
  border-radius: var(--radius-paper, 8px);
  box-sizing: border-box;
  transition: box-shadow var(--transition-duration-surface, 0.2s) ease;
}

.xwui-paper-square {
  border-radius: 0;
}

/* Variant: elevated – shadow only */
.xwui-paper-elevated {
  border: none;
}
.xwui-paper-elevated[data-elevation="0"] { box-shadow: none; }
.xwui-paper-elevated[data-elevation="1"] { box-shadow: var(--shadow-paper-1, 0 1px 3px rgba(0,0,0,0.12)); }
.xwui-paper-elevated[data-elevation="2"] { box-shadow: var(--shadow-paper-2, 0 2px 6px rgba(0,0,0,0.14)); }
.xwui-paper-elevated[data-elevation="3"] { box-shadow: var(--shadow-paper-3, 0 4px 12px rgba(0,0,0,0.15)); }
.xwui-paper-elevated[data-elevation="4"] { box-shadow: var(--shadow-paper-4, 0 6px 20px rgba(0,0,0,0.16)); }
.xwui-paper-elevated[data-elevation="5"] { box-shadow: var(--shadow-paper-5, 0 8px 28px rgba(0,0,0,0.18)); }

/* Variant: outlined – border, minimal shadow */
.xwui-paper-outlined {
  border: 1px solid var(--color-paper-border, rgba(0,0,0,0.12));
  box-shadow: none;
}

/* Variant: plain – no shadow, no border */
.xwui-paper-plain {
  border: none;
  box-shadow: none;
}

.xwui-paper-header {
  border-bottom: 1px solid var(--color-paper-divider, rgba(0,0,0,0.08));
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.xwui-paper-footer {
  border-top: 1px solid var(--color-paper-divider, rgba(0,0,0,0.08));
  padding-top: 8px;
  margin-top: 8px;
}

.xwui-paper-content {
  min-height: 0;
}

/* basic/XWUIParallax/XWUIParallax.css */
.xwui-parallax {
  overflow: hidden;
  position: relative;
}

.xwui-parallax-inner {
  will-change: transform;
  transition: transform 0.1s ease-out;
}

/* basic/XWUIPicker/XWUIPicker.css */
/* Styles for XWUIPicker. */

/* basic/XWUIPickerColor/XWUIPickerColor.css */
/* XWUIPickerColor · variant-driven color picker popup.
 *
 * Layout principles:
 * - The picker root is the popup that XWUIPicker positions absolutely.
 *   We give it a card surface + width + padding here.
 * - Every part has a `xwpc-*` namespace so consumers can override
 *   individual parts without leaking into other components.
 * - Colors / radii / shadows / spacing route through XWUI tokens so
 *   the picker re-themes with the rest of the app.
 * - Per-variant body layouts live under [data-body=...] selectors near
 *   the bottom · they only adjust grid/flex shapes, never repeat part
 *   styling.
 */

.xwui-picker-color {
    --xwpc-width: 260px;
    --xwpc-radius: var(--radius-lg, 12px);
    --xwpc-radius-sm: var(--radius-sm, 6px);
    --xwpc-pad: 12px;
    --xwpc-gap: 10px;
    --xwpc-bg: var(--bg-elevated, var(--bg-card, #ffffff));
    --xwpc-fg: var(--text-primary, #111);
    --xwpc-muted: var(--text-tertiary, #888);
    --xwpc-border: var(--border-light, rgba(0, 0, 0, 0.1));
    --xwpc-field-bg: var(--bg-input, var(--bg-secondary, #f5f6f7));
    --xwpc-thumb-color: #fff;

    width: var(--xwpc-width);
    box-sizing: border-box;
    background: var(--xwpc-bg);
    color: var(--xwpc-fg);
    border: 1px solid var(--xwpc-border);
    border-radius: var(--xwpc-radius);
    box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.18));
    padding: var(--xwpc-pad);
    font-family: inherit;
    font-size: 12px;
    user-select: none;
}
.xwui-picker-color *,
.xwui-picker-color *::before,
.xwui-picker-color *::after { box-sizing: border-box; }

/* Inline mode · the picker mounts in normal flow (not as a floating
 * popup). Drop the popup-only shadow so it reads as a static card
 * rather than something hovering. */
.xwui-picker-color.xwui-picker-inline {
    box-shadow: none;
}

/* ─── Body shells ─────────────────────────────────────────────────────── */

.xwpc-body {
    display: flex;
    flex-direction: column;
    gap: var(--xwpc-gap);
}
.xwpc-body[data-body="photoshop"] {
    flex-direction: row;
    align-items: stretch;
    gap: 14px;
}
.xwpc-body[data-body="presets-only"] {
    gap: 8px;
}
.xwpc-body[data-body="block"] {
    align-items: stretch;
    gap: 8px;
}
.xwpc-body[data-body="twitter"] {
    gap: 8px;
}
.xwpc-body[data-body="material"] {
    gap: 8px;
}

/* ─── Saturation panel ────────────────────────────────────────────────── */

.xwpc-saturation {
    --xwpc-sat-w: 240px;
    --xwpc-sat-h: 160px;
    --xwpc-hue-color: #ff0000;
    position: relative;
    width: 100%;
    height: var(--xwpc-sat-h);
    border-radius: var(--xwpc-radius-sm);
    overflow: hidden;
    cursor: crosshair;
    touch-action: none;
    background: var(--xwpc-hue-color);
}
.xwpc-saturation__white,
.xwpc-saturation__black {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.xwpc-saturation__white {
    background: linear-gradient(to right, #fff, transparent);
}
.xwpc-saturation__black {
    background: linear-gradient(to top, #000, transparent);
}
.xwpc-saturation__thumb {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--xwpc-thumb-color, #fff);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* ─── Hue slider ──────────────────────────────────────────────────────── */

.xwpc-hue {
    position: relative;
    border-radius: 999px;
    overflow: visible;
    cursor: pointer;
    touch-action: none;
    background: linear-gradient(
        to right,
        #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%,
        #00f 67%, #f0f 83%, #f00 100%
    );
}
.xwpc-hue--horizontal { width: 100%; height: 12px; }
.xwpc-hue--vertical {
    height: 100%; width: 14px;
    background: linear-gradient(
        to bottom,
        #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%,
        #00f 67%, #f0f 83%, #f00 100%
    );
}
.xwpc-hue__thumb {
    position: absolute;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* ─── Alpha slider ────────────────────────────────────────────────────── */

.xwpc-alpha {
    position: relative;
    border-radius: 999px;
    overflow: visible;
    cursor: pointer;
    touch-action: none;
}
.xwpc-alpha--horizontal { width: 100%; height: 12px; }
.xwpc-alpha--vertical { height: 100%; width: 14px; }
.xwpc-alpha__gradient {
    position: absolute;
    inset: 0;
    border-radius: 999px;
}
.xwpc-alpha__thumb {
    position: absolute;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* ─── Sliders row (preview + sliders) ─────────────────────────────────── */

.xwpc-sliders-row {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 10px;
    align-items: center;
}
.xwpc-sliders-row--no-preview {
    grid-template-columns: 1fr;
}
.xwpc-sliders-row__preview-col {
    width: 32px; height: 32px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--xwpc-border);
}
.xwpc-sliders-row__preview-col .xwpc-preview { width: 100%; height: 100%; border-radius: 0; border: 0; }
.xwpc-sliders-row__sliders {
    display: flex; flex-direction: column;
    gap: 8px;
}

/* ─── Preview swatch ──────────────────────────────────────────────────── */

.xwpc-preview {
    position: relative;
    width: 32px; height: 32px;
    border-radius: var(--xwpc-radius-sm);
    overflow: hidden;
    border: 1px solid var(--xwpc-border);
}
.xwpc-preview__fill,
.xwpc-preview__half {
    position: absolute;
    top: 0; bottom: 0;
}
.xwpc-preview__fill { left: 0; right: 0; }
.xwpc-preview--comparison {
    width: 100%; height: 36px;
}
.xwpc-preview__half--new { left: 0; right: 50%; }
.xwpc-preview__half--old { left: 50%; right: 0; }

/* ─── Numeric / hex inputs ────────────────────────────────────────────── */

.xwpc-fields-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
}
.xwpc-numeric-mount { display: contents; }
.xwpc-fields {
    display: grid;
    gap: 4px;
    flex: 1;
}
.xwpc-fields--rgb,
.xwpc-fields--hsl,
.xwpc-fields--hsv {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.xwpc-fields--rgb.xwpc-fields--alpha,
.xwpc-fields--hsl.xwpc-fields--alpha,
.xwpc-fields--hsv.xwpc-fields--alpha {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.xwpc-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
}
.xwpc-field--hex {
    flex: 2;
}
.xwpc-field__input {
    width: 100%;
    height: 26px;
    padding: 0 6px;
    border: 1px solid var(--xwpc-border);
    border-radius: var(--xwpc-radius-sm);
    background: var(--xwpc-field-bg);
    color: var(--xwpc-fg);
    font: inherit;
    font-size: 11px;
    text-align: center;
    text-transform: uppercase;
    outline: none;
    min-width: 0;
}
.xwpc-field__input:focus {
    border-color: var(--accent-primary, #4a90e2);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary, #4a90e2) 22%, transparent);
}
.xwpc-field__label {
    margin-top: 4px;
    text-align: center;
    font-size: 10px;
    color: var(--xwpc-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ─── Format cycler ───────────────────────────────────────────────────── */

.xwpc-format-cycler {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: stretch;
    width: 18px;
}
.xwpc-format-cycler__btn {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--xwpc-muted);
    padding: 0;
    height: 12px;
    line-height: 1;
    cursor: pointer;
    font-size: 10px;
}
.xwpc-format-cycler__btn:hover { color: var(--xwpc-fg); }

/* ─── Eyedropper ──────────────────────────────────────────────────────── */

.xwpc-eyedropper {
    appearance: none;
    background: var(--xwpc-field-bg);
    color: var(--xwpc-fg);
    border: 1px solid var(--xwpc-border);
    border-radius: var(--xwpc-radius-sm);
    width: 28px;
    height: 28px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}
.xwpc-eyedropper:hover {
    background: var(--bg-hover, color-mix(in srgb, var(--xwpc-fg) 6%, transparent));
}

/* ─── Preset grid ─────────────────────────────────────────────────────── */

.xwpc-presets {
    --xwpc-cols: 8;
    --xwpc-cell: 18px;
}
.xwpc-presets--grid {
    display: grid;
    grid-template-columns: repeat(var(--xwpc-cols), 1fr);
    gap: 4px;
}
.xwpc-preset {
    appearance: none;
    border: 1px solid var(--xwpc-border);
    border-radius: 3px;
    width: var(--xwpc-cell);
    height: var(--xwpc-cell);
    padding: 0;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 120ms ease;
    box-shadow: inset 0 0 0 0 transparent;
}
.xwpc-presets--rounded .xwpc-preset {
    border-radius: 6px;
}
.xwpc-preset:hover {
    transform: scale(1.08);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
}
.xwpc-preset.is-active {
    box-shadow: inset 0 0 0 2px var(--xwpc-bg), inset 0 0 0 3px var(--accent-primary, #4a90e2);
}

/* ─── Preset circles ──────────────────────────────────────────────────── */

.xwpc-presets--circles {
    --xwpc-cols: 6;
    --xwpc-cell: 28px;
    display: grid;
    grid-template-columns: repeat(var(--xwpc-cols), 1fr);
    gap: 6px;
    justify-items: center;
}
.xwpc-preset--circle {
    appearance: none;
    border: 0;
    width: var(--xwpc-cell);
    height: var(--xwpc-cell);
    border-radius: 50%;
    background: var(--xwpc-preset-color);
    cursor: pointer;
    box-shadow: 0 0 0 1px var(--xwpc-border);
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.xwpc-preset--circle:hover {
    transform: scale(1.15);
}
.xwpc-preset--circle.is-active {
    box-shadow: 0 0 0 2px var(--xwpc-bg), 0 0 0 4px var(--xwpc-preset-color);
}

/* ─── Color wheel ─────────────────────────────────────────────────────── */

.xwpc-wheel {
    --xwpc-wheel-size: 200px;
    position: relative;
    width: var(--xwpc-wheel-size);
    height: var(--xwpc-wheel-size);
    /* Keep the disc round even when the parent flex/grid container would
     * stretch one axis. aspect-ratio + flex-shrink:0 lock the wheel as a
     * square; max-width:100% ensures it scales down rather than overflows
     * when the available column is narrower than the configured size. */
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    cursor: crosshair;
    touch-action: none;
}
.xwpc-wheel__hue {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        from -90deg,
        #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00
    );
}
.xwpc-wheel__sat {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at center, #fff 0%, rgba(255, 255, 255, 0) 70%);
}
.xwpc-wheel__thumb {
    position: absolute;
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid var(--xwpc-thumb-color, #fff);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* ─── Block variant ───────────────────────────────────────────────────── */

.xwpc-block-preview {
    position: relative;
    height: 96px;
    border-radius: var(--xwpc-radius-sm);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.xwpc-block-preview::before {
    content: '';
    position: absolute;
    top: -12px; left: 50%;
    transform: translateX(-50%);
    border: 12px solid transparent;
    border-bottom-color: var(--xwpc-bg);
}
.xwpc-block-preview__swatch {
    position: absolute;
    inset: 0;
    border-radius: 0;
    border: 0;
    width: auto; height: auto;
}
.xwpc-block-preview__label {
    position: relative;
    z-index: 1;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ─── Twitter variant ─────────────────────────────────────────────────── */

.xwpc-twitter-hex-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
    padding: 6px;
    background: var(--xwpc-field-bg);
    border-radius: var(--xwpc-radius-sm);
}
.xwpc-twitter-hex-row__hash {
    display: inline-flex;
    align-items: center;
    color: var(--xwpc-muted);
    padding: 0 4px;
}
.xwpc-twitter-hex-row .xwpc-field--hex { flex: 1; }

/* ─── Material variant ────────────────────────────────────────────────── */

.xwpc-material-preview {
    width: 100%;
    height: 56px;
    border-radius: var(--xwpc-radius-sm);
}

/* ─── Photoshop variant ───────────────────────────────────────────────── */

.xwpc-ps-left { flex: 1; display: flex; gap: 10px; }
.xwpc-ps-left .xwpc-saturation { flex: 1; height: var(--xwpc-sat-h); }
.xwpc-ps-left .xwpc-hue--vertical { width: 14px; }
.xwpc-ps-right {
    width: 110px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.xwpc-ps-right .xwpc-fields--rgb,
.xwpc-ps-right .xwpc-fields--hsv {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ─── Wheel-card variant ──────────────────────────────────────────────── */

.xwui-picker-color--wheel .xwpc-fields-row {
    margin-top: 6px;
}

/* ─── Vertical 1D channel sliders (value-vertical / saturation-vertical) ─ */

.xwpc-vchannel {
    position: relative;
    width: 14px;
    height: 160px;
    border-radius: 999px;
    overflow: visible;
    cursor: pointer;
    touch-action: none;
}
.xwpc-vchannel__track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    border: 1px solid var(--xwpc-border);
}
.xwpc-vchannel__thumb {
    position: absolute;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* ─── Channel sliders (R / G / B / H / S / V) ─────────────────────────── */

.xwpc-cslider {
    display: grid;
    grid-template-columns: 14px 1fr 44px;
    align-items: center;
    gap: 6px;
    height: 18px;
}
.xwpc-cslider__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--xwpc-muted);
    text-align: center;
}
.xwpc-cslider__track {
    position: relative;
    height: 8px;
    border-radius: 999px;
    overflow: visible;
    border: 1px solid var(--xwpc-border);
    cursor: pointer;
    touch-action: none;
    background: var(--xwpc-field-bg);
}
.xwpc-cslider__fill {
    position: absolute; inset: 0;
    border-radius: 999px;
}
.xwpc-cslider__thumb {
    position: absolute;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.xwpc-cslider__input {
    width: 100%;
    height: 22px;
    padding: 0 4px;
    border: 1px solid var(--xwpc-border);
    border-radius: var(--xwpc-radius-sm);
    background: var(--xwpc-field-bg);
    color: var(--xwpc-fg);
    font: inherit;
    font-size: 11px;
    text-align: center;
    outline: none;
}
.xwpc-cslider__input:focus {
    border-color: var(--accent-primary, #4a90e2);
}
.xwpc-cslider-group {
    display: flex; flex-direction: column;
    gap: 6px;
}

/* ─── Hue ring + composites (Unity / Krita-style) ─────────────────────── */

.xwpc-hue-ring {
    --xwpc-ring-thickness: 24px;
    position: relative;
    /* Same square-lock as the wheel · the ring must stay perfectly
     * circular regardless of the parent flex/grid layout. */
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    max-width: 100%;
    cursor: pointer;
    touch-action: none;
    border-radius: 50%;
    overflow: visible;
}
.xwpc-hue-ring__hue {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        from -90deg,
        #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00
    );
}
.xwpc-hue-ring__hole {
    position: absolute;
    inset: var(--xwpc-ring-thickness);
    border-radius: 50%;
    background: var(--xwpc-bg);
    pointer-events: none;
}
.xwpc-hue-ring__thumb {
    position: absolute;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: transparent;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.xwpc-hue-ring-composite {
    position: relative;
    margin: 0 auto;
}
/* Square sat panel inside the ring (Unity-style) · the panel covers the
 * hole so we want it visually crisp without the ring's hole-fill peeking
 * through. The panel already paints its own background via the gradients. */
.xwpc-hue-ring-composite__panel {
    border-radius: var(--xwpc-radius-sm);
    overflow: hidden;
    z-index: 1;
}
/* Triangle interior · crosshair cursor matches the square saturation
 * panel's 2D-picker affordance. Thumb stays click-through. */
.xwpc-tri-surface {
    cursor: crosshair;
}

/* Triangle thumb (Krita-style). */
.xwpc-tri-thumb {
    position: absolute;
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 2;
}

/* ─── Custom layout ────────────────────────────────────────────────────
 * The 'custom' body type renders explicit `layout` arrays. Top-level
 * entries flow in the standard column gap; nested arrays become flex
 * rows so consumers can mix any parts side-by-side. */

.xwpc-body[data-body="custom"] {
    gap: var(--xwpc-gap);
}
.xwpc-custom-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.xwpc-custom-row > * { min-width: 0; }
.xwpc-custom-row > .xwpc-fields { flex: 1; }
.xwpc-custom-row > .xwpc-field--hex { flex: 1; }
.xwpc-spacer {
    flex: 1;
    display: inline-block;
}

/* ─── Variant width tweaks ────────────────────────────────────────────── */

.xwui-picker-color--photoshop {
    --xwpc-pad: 16px;
}
.xwui-picker-color--material .xwpc-body {
    padding: 4px;
}

/* basic/XWUIPickerDate/XWUIPickerDate.css */
/* Styles for XWUIPickerDate. */

/* basic/XWUIPickerDateRange/XWUIPickerDateRange.css */
/* Styles for XWUIPickerDateRange. */

/* basic/XWUIPickerTime/XWUIPickerTime.css */
/* Styles for XWUIPickerTime. */

/* basic/XWUIPipelineStages/XWUIPipelineStages.css */
/* XWUIPipelineStages - CRM stage progression */

.xwui-pipeline-stages {
  display: flex;
  font-family: var(--font-body, inherit);
  color: var(--text-primary);
  width: 100%;
}

/* Sizes (font-size + padding) */
:is(.xwui-pipeline-stages-s,.xwui-pipeline-stages-sm) { font-size: 0.75rem; }
:is(.xwui-pipeline-stages-m,.xwui-pipeline-stages-md) { font-size: 0.875rem; }
:is(.xwui-pipeline-stages-l,.xwui-pipeline-stages-lg) { font-size: 1rem; }

.xwui-pipeline-stage {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: default;
}

.xwui-pipeline-stage[role="listitem"][type="button"],
button.xwui-pipeline-stage { cursor: pointer; }
button.xwui-pipeline-stage:focus-visible { outline: 2px solid var(--role-primary-bg, #337ea9); outline-offset: 2px; }

/* Truncate long labels */
.xwui-pipeline-stages-truncate .xwui-pipeline-stage-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ─── Chevron orientation (Salesforce-style arrows) ─── */
.xwui-pipeline-stages-chevron {
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  background: var(--bg-elevated);
}
.xwui-pipeline-stages-chevron .xwui-pipeline-stage {
  position: relative;
  padding: 0.5rem 1.5rem 0.5rem 1.75rem;
  background: var(--bg-elevated);
  color: var(--text-tertiary);
  font-weight: 500;
  white-space: nowrap;
  border-right: 1px solid var(--border-light, var(--border-color));
}
.xwui-pipeline-stages-chevron .xwui-pipeline-stage:first-child { padding-left: 1rem; }
.xwui-pipeline-stages-chevron .xwui-pipeline-stage:last-child  { border-right: none; padding-right: 1rem; }
/* Arrow caps */
.xwui-pipeline-stages-chevron .xwui-pipeline-stage::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 0;
  bottom: 0;
  width: 20px;
  background: inherit;
  clip-path: polygon(0 0, 50% 50%, 0 100%);
  z-index: 1;
}
.xwui-pipeline-stages-chevron .xwui-pipeline-stage:last-child::after { display: none; }

.xwui-pipeline-stages-chevron .xwui-pipeline-stage-completed {
  background: var(--role-success-bg, rgba(34,197,94,0.18));
  color: var(--role-success-fg, #047857);
}
.xwui-pipeline-stages-chevron .xwui-pipeline-stage-current {
  background: var(--role-primary-bg, #337ea9);
  color: #fff;
  font-weight: 600;
}
.xwui-pipeline-stages-chevron .xwui-pipeline-stage-upcoming {
  background: var(--bg-elevated);
  color: var(--text-tertiary);
}
.xwui-pipeline-stages-chevron .xwui-pipeline-stage-lost {
  background: var(--role-danger-bg, rgba(239,68,68,0.18));
  color: var(--role-danger-fg, #b91c1c);
}
.xwui-pipeline-stages-chevron .xwui-pipeline-stage-skipped {
  background: var(--bg-elevated);
  color: var(--text-tertiary);
  text-decoration: line-through;
  opacity: 0.7;
}

.xwui-pipeline-stages-chevron .xwui-pipeline-stage-prob {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-left: 0.5rem;
  opacity: 0.85;
}

/* ─── Bar orientation (Monday-style segmented) ─── */
.xwui-pipeline-stages-bar {
  background: var(--bg-elevated);
  border-radius: var(--radius-sm, 4px);
  padding: 0.125rem;
  gap: 0.125rem;
}
.xwui-pipeline-stages-bar .xwui-pipeline-stage {
  padding: 0.375rem 0.5rem;
  border-radius: var(--radius-xs, 3px);
  background: var(--bg-secondary);
  color: var(--text-tertiary);
  font-weight: 500;
}
.xwui-pipeline-stages-bar .xwui-pipeline-stage-completed {
  background: var(--role-success-bg, rgba(34,197,94,0.20));
  color: var(--role-success-fg, #047857);
}
.xwui-pipeline-stages-bar .xwui-pipeline-stage-current {
  background: var(--role-primary-bg, #337ea9);
  color: #fff;
  font-weight: 600;
}
.xwui-pipeline-stages-bar .xwui-pipeline-stage-upcoming { background: var(--bg-secondary); color: var(--text-tertiary); }
.xwui-pipeline-stages-bar .xwui-pipeline-stage-lost     { background: var(--role-danger-bg, rgba(239,68,68,0.20)); color: var(--role-danger-fg, #b91c1c); }

.xwui-pipeline-stage-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25em;
  height: 1.25em;
  border-radius: 999px;
  background: rgba(0,0,0,0.08);
  font-weight: 700;
  font-size: 0.75em;
  font-variant-numeric: tabular-nums;
}
.xwui-pipeline-stage-current .xwui-pipeline-stage-marker {
  background: rgba(255,255,255,0.25);
  color: inherit;
}

/* ─── Steps orientation (vertical / breadcrumb) ─── */
.xwui-pipeline-stages-steps {
  flex-direction: column;
  gap: 0.25rem;
  align-items: stretch;
}
.xwui-pipeline-stages-steps .xwui-pipeline-stage {
  flex: 0 0 auto;
  justify-content: flex-start;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-elevated);
  position: relative;
}
.xwui-pipeline-stages-steps .xwui-pipeline-stage:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 1.05em;
  top: 100%;
  width: 1px;
  height: 0.25rem;
  background: var(--border-color);
}
.xwui-pipeline-stages-steps .xwui-pipeline-stage-completed { background: var(--role-success-bg); color: var(--role-success-fg); }
.xwui-pipeline-stages-steps .xwui-pipeline-stage-current   { background: var(--role-primary-bg); color: #fff; font-weight: 600; }
.xwui-pipeline-stages-steps .xwui-pipeline-stage-lost      { background: var(--role-danger-bg); color: var(--role-danger-fg); }
.xwui-pipeline-stages-steps .xwui-pipeline-stage-prob {
  margin-left: auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* basic/XWUIPopconfirm/XWUIPopconfirm.css */
/**
 * XWUIPopconfirm Component Styles
 */

.xwui-popconfirm-container {
    /* Container has no specific styles */
}

.xwui-popconfirm-content {
    padding: 12px;
    min-width: 200px;
}

.xwui-popconfirm-title {
    font-weight: 500;
    margin-bottom: 4px;
}

.xwui-popconfirm-description {
    color: var(--text-secondary, #666);
    font-size: var(--font-size-sm, 14px);
    margin-bottom: var(--spacing-md, 12px);
}

.xwui-popconfirm-buttons {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm, 8px);
}

.xwui-popconfirm-cancel,
.xwui-popconfirm-ok {
    padding: var(--spacing-xs, 4px) var(--spacing-md, 12px);
    border: 1px solid var(--border-color, #d9d9d9);
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    font-size: var(--font-size-sm, 14px);
    transition: all 0.2s;
}

.xwui-popconfirm-cancel {
    background: var(--bg-primary, #ffffff);
    color: var(--text-secondary, #666);
}

.xwui-popconfirm-cancel:hover {
    border-color: var(--accent-hover, #40a9ff);
    color: var(--accent-primary, #1890ff);
}

.xwui-popconfirm-ok {
    background: var(--accent-primary, #1890ff);
    color: var(--text-inverse, #ffffff);
    border-color: var(--accent-primary, #1890ff);
}

.xwui-popconfirm-ok:hover {
    background: var(--accent-hover, #40a9ff);
    border-color: var(--accent-hover, #40a9ff);
}


/* basic/XWUIPopover/XWUIPopover.css */
/**
 * XWUIPopover Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/popover/*.css (component-specific border widths)
 * - Roundness: theme/roundness/popover/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-popover-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.2s;
}

.xwui-popover-overlay-visible {
    opacity: 1;
}

.xwui-popover {
    position: fixed;
    min-width: 200px;
    max-width: 400px;
    background: var(--bg-primary);
    border: var(--border-popover-width, var(--border-width-regular, 1.5px)) var(--border-popover-style, solid) var(--border-popover-color, var(--border-color));
    border-radius: var(--radius-popover, var(--radius-md, 8px));
    box-shadow: var(--shadow-xl);
    z-index: 10000;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.2s, transform 0.2s;
}

.xwui-popover-visible {
    opacity: 1;
    transform: scale(1);
}

/* Arrow */
.xwui-popover-arrow {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--bg-primary);
    border: var(--border-popover-width, var(--border-width-regular, 1.5px)) var(--border-popover-style, solid) var(--border-popover-color, var(--border-color));
    transform: rotate(45deg);
}

.xwui-popover-top .xwui-popover-arrow {
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    border-top: none;
    border-right: none;
}

.xwui-popover-bottom .xwui-popover-arrow {
    top: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    border-bottom: none;
    border-left: none;
}

.xwui-popover-left .xwui-popover-arrow {
    right: -5px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    border-top: none;
    border-left: none;
}

.xwui-popover-right .xwui-popover-arrow {
    left: -5px;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    border-bottom: none;
    border-right: none;
}

/* Content */
.xwui-popover-content {
    padding: var(--spacing-md, 1rem);
}

.xwui-popover-title {
    font-weight: var(--font-weight-semibold, 600);
    font-size: var(--font-size-base, 0.9375rem);
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm, 0.5rem);
}

.xwui-popover-body {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary);
    line-height: 1.5;
}


/* basic/XWUIPortal/XWUIPortal.css */
/**
 * XWUIPortal Component Styles
 * Portal container for rendering content outside normal DOM hierarchy
 */

.xwui-portal {
    /* Portal container - styles applied by parent or via className */
    /* Default: no specific styling, content is positioned as needed */
    position: relative;
}

/* When portal is used for modals/overlays, ensure it's on top */
.xwui-portal.xwui-portal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    pointer-events: none;
}

.xwui-portal.xwui-portal-overlay > * {
    pointer-events: auto;
}


/* basic/XWUIProgress/XWUIProgress.css */
/**
 * XWUIProgress Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Roundness: theme/roundness/progress/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-progress {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.5rem);
}

.xwui-progress-label {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary, #212529);
}

/* Linear Progress */
.xwui-progress-linear {
    width: 100%;
}

.xwui-progress-track {
    width: 100%;
    background: var(--bg-tertiary, #e9ecef);
    border-radius: var(--radius-progress, 999px);
    overflow: hidden;
}

.xwui-progress-small .xwui-progress-track {
    height: 4px;
}

.xwui-progress-medium .xwui-progress-track {
    height: 8px;
}

.xwui-progress-large .xwui-progress-track {
    height: 12px;
}

.xwui-progress-fill {
    height: 100%;
    background: var(--accent-primary, #4f46e5);
    border-radius: var(--radius-progress, 999px);
    transition: width 0.3s ease;
}

.xwui-progress-success .xwui-progress-fill {
    background: var(--accent-success, #10b981);
}

.xwui-progress-warning .xwui-progress-fill {
    background: var(--accent-warning, #f59e0b);
}

.xwui-progress-error .xwui-progress-fill {
    background: var(--accent-error, #ef4444);
}

/* Indeterminate animation */
.xwui-progress-indeterminate .xwui-progress-fill {
    width: 50% !important;
    animation: xwui-progress-indeterminate 1.5s ease-in-out infinite;
}

@keyframes xwui-progress-indeterminate {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(200%);
    }
}

.xwui-progress-value {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-secondary, #6c757d);
    text-align: right;
}

/* Circular Progress */
.xwui-progress-circular {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.xwui-progress-circular svg {
    transform: rotate(-90deg);
}

.xwui-progress-circular-track {
    stroke: var(--bg-tertiary, #e9ecef);
}

.xwui-progress-circular-fill {
    stroke: var(--accent-primary, #4f46e5);
    transition: stroke-dashoffset 0.3s ease;
    stroke-linecap: round;
}

.xwui-progress-success .xwui-progress-circular-fill {
    stroke: var(--accent-success, #10b981);
}

.xwui-progress-warning .xwui-progress-circular-fill {
    stroke: var(--accent-warning, #f59e0b);
}

.xwui-progress-error .xwui-progress-circular-fill {
    stroke: var(--accent-error, #ef4444);
}

.xwui-progress-circular-value {
    position: absolute;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary, #212529);
}

.xwui-progress-large .xwui-progress-circular-value {
    font-size: var(--font-size-sm, 0.875rem);
}

/* Circular indeterminate */
.xwui-progress-circular.xwui-progress-indeterminate svg {
    animation: xwui-progress-circular-rotate 2s linear infinite;
}

.xwui-progress-circular.xwui-progress-indeterminate .xwui-progress-circular-fill {
    stroke-dasharray: 80, 200;
    stroke-dashoffset: 0;
    animation: xwui-progress-circular-dash 1.5s ease-in-out infinite;
}

@keyframes xwui-progress-circular-rotate {
    100% {
        transform: rotate(270deg);
    }
}

@keyframes xwui-progress-circular-dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 100, 200;
        stroke-dashoffset: -15;
    }
    100% {
        stroke-dasharray: 100, 200;
        stroke-dashoffset: -125;
    }
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */


/* basic/XWUIProgressBar/XWUIProgressBar.css */
/**
 * XWUIProgressBar Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Roundness: theme/roundness/progress/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-progress {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.5rem);
}

.xwui-progress-label {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary, #212529);
}

/* Linear Progress */
.xwui-progress-linear {
    width: 100%;
}

.xwui-progress-track {
    width: 100%;
    background: var(--bg-tertiary, #e9ecef);
    border-radius: var(--radius-progress, 999px);
    overflow: hidden;
}

:is(.xwui-progress-s,.xwui-progress-sm) .xwui-progress-track {
    height: 4px;
}

:is(.xwui-progress-m,.xwui-progress-md) .xwui-progress-track {
    height: 8px;
}

:is(.xwui-progress-l,.xwui-progress-lg) .xwui-progress-track {
    height: 12px;
}

.xwui-progress-fill {
    height: 100%;
    background: var(--accent-primary, #4f46e5);
    border-radius: var(--radius-progress, 999px);
    transition: width 0.3s ease;
}

.xwui-progress-success .xwui-progress-fill {
    background: var(--accent-success, #10b981);
}

.xwui-progress-warning .xwui-progress-fill {
    background: var(--accent-warning, #f59e0b);
}

.xwui-progress-error .xwui-progress-fill {
    background: var(--accent-error, #ef4444);
}

/* Indeterminate animation */
.xwui-progress-indeterminate .xwui-progress-fill {
    width: 50% !important;
    animation: xwui-progress-indeterminate 1.5s ease-in-out infinite;
}

@keyframes xwui-progress-indeterminate {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(200%);
    }
}

.xwui-progress-value {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-secondary, #6c757d);
    text-align: right;
}

/* Circular Progress */
.xwui-progress-circular {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.xwui-progress-circular svg {
    transform: rotate(-90deg);
}

.xwui-progress-circular-track {
    stroke: var(--bg-tertiary, #e9ecef);
}

.xwui-progress-circular-fill {
    stroke: var(--accent-primary, #4f46e5);
    transition: stroke-dashoffset 0.3s ease;
    stroke-linecap: round;
}

.xwui-progress-success .xwui-progress-circular-fill {
    stroke: var(--accent-success, #10b981);
}

.xwui-progress-warning .xwui-progress-circular-fill {
    stroke: var(--accent-warning, #f59e0b);
}

.xwui-progress-error .xwui-progress-circular-fill {
    stroke: var(--accent-error, #ef4444);
}

.xwui-progress-circular-value {
    position: absolute;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary, #212529);
}

:is(.xwui-progress-l,.xwui-progress-lg) .xwui-progress-circular-value {
    font-size: var(--font-size-sm, 0.875rem);
}

/* Circular indeterminate */
.xwui-progress-circular.xwui-progress-indeterminate svg {
    animation: xwui-progress-circular-rotate 2s linear infinite;
}

.xwui-progress-circular.xwui-progress-indeterminate .xwui-progress-circular-fill {
    stroke-dasharray: 80, 200;
    stroke-dashoffset: 0;
    animation: xwui-progress-circular-dash 1.5s ease-in-out infinite;
}

@keyframes xwui-progress-circular-rotate {
    100% {
        transform: rotate(270deg);
    }
}

@keyframes xwui-progress-circular-dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 100, 200;
        stroke-dashoffset: -15;
    }
    100% {
        stroke-dasharray: 100, 200;
        stroke-dashoffset: -125;
    }
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */

/* Block mode — fills the container so no site-level override needed. */
.xwui-progress--block {
    display: block;
    width: 100%;
    min-width: 0;
}


/* basic/XWUIProgressBySubtasks/XWUIProgressBySubtasks.css */
/**
 * XWUIProgressBySubtasks Component Styles
 */

.xwui-progress-by-subtasks {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 1rem);
    width: 100%;
}

.xwui-progress-by-subtasks-header {
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary, #212529);
}

.xwui-progress-by-subtasks-stats {
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 1rem);
}

.xwui-progress-by-subtasks-progress {
    width: 100%;
}

.xwui-progress-by-subtasks-tree {
    margin-top: var(--spacing-sm, 0.5rem);
}


/* basic/XWUIProgressCircle/XWUIProgressCircle.css */
/**
 * XWUIProgressCircle Component Styles
 */
.xwui-progress-circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.xwui-progress-circle-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.xwui-progress-circle-track {
  stroke: var(--color-progress-track, rgba(0,0,0,0.1));
}

.xwui-progress-circle-value {
  stroke: var(--color-progress-value, var(--accent-primary, #1976d2));
  transition: stroke-dashoffset 0.2s ease;
}

.xwui-progress-circle-value-text {
  position: relative;
  z-index: 1;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* basic/XWUIProgressSkeleton/XWUIProgressSkeleton.css */
/**
 * XWUIProgressSkeleton Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Roundness: theme/roundness/skeleton/*.css (component-specific roundness)
 */

.xwui-skeleton-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.5rem);
}

.xwui-skeleton {
    /* Use dedicated skeleton color variable for theme-aware contrast */
    /* Falls back to bg-active, then to a medium gray */
    background: var(--skeleton-bg, var(--bg-active, #d0d0d0));
}

/* Variants */
.xwui-skeleton-text {
    border-radius: var(--radius-skeleton, var(--radius-xs, 4px));
}

.xwui-skeleton-circular {
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.xwui-skeleton-rectangular {
    border-radius: 0;
    width: 100%;
    height: 120px;
}

.xwui-skeleton-rounded {
    border-radius: var(--radius-skeleton, var(--radius-md, 8px));
    width: 100%;
    height: 120px;
}

/* Pulse animation */
.xwui-skeleton-pulse {
    animation: xwui-skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes xwui-skeleton-pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

/* Wave animation */
.xwui-skeleton-wave {
    position: relative;
    overflow: hidden;
}

.xwui-skeleton-wave::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        var(--bg-elevated),
        transparent
    );
    animation: xwui-skeleton-wave 1.5s linear infinite;
}

@keyframes xwui-skeleton-wave {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* No animation */
.xwui-skeleton-none {
    animation: none;
}

/* Preset compositions */
.xwui-skeleton-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.75rem);
}

.xwui-skeleton-avatar-text {
    display: flex;
    gap: var(--spacing-md, 1rem);
    align-items: center;
}

/* Preset-specific compositions */
.xwui-skeleton-preset-button {
    display: inline-flex;
}

.xwui-skeleton-preset-table {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.5rem);
}

.xwui-skeleton-preset-article {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.75rem);
}

.xwui-skeleton-preset-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.75rem);
}

.xwui-skeleton-preset-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.75rem);
}

.xwui-skeleton-preset-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 1rem);
}

.xwui-skeleton-preset-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 1rem);
}

.xwui-skeleton-preset-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.75rem);
    padding: var(--spacing-md, 1rem);
}

.xwui-skeleton-preset-footer {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.75rem);
}

.xwui-skeleton-preset-menu {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.5rem);
}

.xwui-skeleton-preset-avatar {
    display: inline-flex;
}

.xwui-skeleton-preset-image {
    display: block;
}

.xwui-skeleton-preset-video {
    display: block;
    aspect-ratio: 16 / 9;
}

.xwui-skeleton-preset-chart {
    display: block;
}

.xwui-skeleton-preset-code {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.5rem);
    font-family: monospace;
}

.xwui-skeleton-preset-badge {
    display: inline-flex;
}

.xwui-skeleton-preset-input {
    display: block;
}

.xwui-skeleton-preset-textarea {
    display: block;
}

.xwui-skeleton-preset-select {
    display: block;
}

.xwui-skeleton-preset-checkbox {
    display: inline-flex;
}

.xwui-skeleton-preset-radio {
    display: inline-flex;
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */


/* basic/XWUIProgressSpinner/XWUIProgressSpinner.css */
/**
 * XWUIProgressSpinner Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Typography: theme/typography/*.css
 */

.xwui-spinner {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm, 0.75rem);
}

.xwui-spinner-icon {
    animation: xwui-spinner-rotate 0.75s linear infinite;
}

.xwui-spinner-icon svg {
    display: block;
}

@keyframes xwui-spinner-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Size variants */
:is(.xwui-spinner-s,.xwui-spinner-sm) .xwui-spinner-icon svg {
    width: 16px;
    height: 16px;
}

:is(.xwui-spinner-m,.xwui-spinner-md) .xwui-spinner-icon svg {
    width: 24px;
    height: 24px;
}

:is(.xwui-spinner-l,.xwui-spinner-lg) .xwui-spinner-icon svg {
    width: 36px;
    height: 36px;
}

/* Color variants */
.xwui-spinner-primary .xwui-spinner-icon {
    color: var(--accent-primary, #4f46e5);
}

.xwui-spinner-secondary .xwui-spinner-icon {
    color: var(--text-secondary, #6c757d);
}

.xwui-spinner-white .xwui-spinner-icon {
    color: var(--text-inverse);
}

/* Label */
.xwui-spinner-label {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary, #6c757d);
}

.xwui-spinner-white .xwui-spinner-label {
    color: var(--text-inverse);
}

/* Overlay mode */
.xwui-spinner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-overlay, rgba(255, 255, 255, 0.8));
    z-index: 100;
}

.xwui-spinner-blur {
    backdrop-filter: blur(2px);
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */

/* Container utility */
.xwui-spinner-container {
    position: relative;
    min-height: 100px;
}

.xwui-spinner-container.xwui-spinner-loading > *:not(.xwui-spinner) {
    opacity: 0.5;
    pointer-events: none;
}


/* basic/XWUIQRCode/XWUIQRCode.css */
/**
 * XWUIQRCode Component Styles
 */

.xwui-qrcode-container {
    display: inline-block;
}

.xwui-qrcode {
    display: inline-block;
}

.xwui-qrcode canvas {
    display: block;
    max-width: 100%;
    height: auto;
}


/* basic/XWUIQuickActions/XWUIQuickActions.css */
/* XWUIQuickActions - CRM quick action toolbar */

.xwui-quick-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.25rem;
  border-radius: var(--radius-md, 8px);
  background: transparent;
  font-family: var(--font-body, inherit);
}
.xwui-quick-actions-vertical {
  flex-direction: column;
  align-items: stretch;
}

.xwui-quick-actions-ghost    { background: transparent; border: 1px solid transparent; }
.xwui-quick-actions-outlined { background: var(--bg-primary); border: 1px solid var(--border-color); }
.xwui-quick-actions-filled   { background: var(--bg-elevated); border: 1px solid transparent; }

:is(.xwui-quick-actions-s,.xwui-quick-actions-sm) { gap: 0.125rem; padding: 0.125rem; }
:is(.xwui-quick-actions-m,.xwui-quick-actions-md) { gap: 0.125rem; padding: 0.25rem; }
:is(.xwui-quick-actions-l,.xwui-quick-actions-lg) { gap: 0.25rem;  padding: 0.375rem; }

.xwui-quick-actions-separator {
  width: 1px;
  height: 1.25rem;
  background: var(--border-color);
  margin: 0 0.25rem;
  display: inline-block;
}
.xwui-quick-actions-vertical .xwui-quick-actions-separator {
  width: 100%; height: 1px; margin: 0.25rem 0;
}

/* Item slot — wraps button + optional label */
.xwui-quick-actions-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0;
  border-radius: var(--radius-sm, 4px);
}
.xwui-quick-actions-vertical .xwui-quick-actions-item {
  width: 100%;
  justify-content: flex-start;
  padding: 0.125rem 0.25rem;
}
.xwui-quick-actions-item-disabled { opacity: 0.5; pointer-events: none; }

.xwui-quick-actions-btn {
  position: relative;
  display: inline-flex;
}
.xwui-quick-actions-label {
  font-size: 0.8125rem;
  color: var(--text-primary);
  white-space: nowrap;
}

/* Badge dot/count on icon button */
.xwui-quick-actions-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  border-radius: 999px;
  background: var(--role-danger-bg, #ef4444);
  color: var(--role-danger-fg, #fff);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Intent tints (apply through XWUIButtonIcon variant; CSS layer adds subtle background) */
/* Use --role-*-bg for the icon hue (text-on-light-bg). The button-icon's own
 * background fill is set by XWUIButtonIcon's variant prop, not here. */
.xwui-quick-actions-item-primary .xwui-quick-actions-btn { color: var(--role-primary-bg, #1d4ed8); }
.xwui-quick-actions-item-danger  .xwui-quick-actions-btn { color: var(--role-danger-bg, #b91c1c); }
.xwui-quick-actions-item-success .xwui-quick-actions-btn { color: var(--role-success-bg, #15803d); }

/* When showLabels=true, each item becomes a row pill */
.xwui-quick-actions-show-labels .xwui-quick-actions-item {
  padding: 0.125rem 0.5rem 0.125rem 0.125rem;
  background: var(--bg-elevated);
}
.xwui-quick-actions-show-labels .xwui-quick-actions-item:hover { background: var(--bg-hover); }
.xwui-quick-actions-show-labels.xwui-quick-actions-vertical .xwui-quick-actions-item { width: 100%; }

/* basic/XWUIQuickCreate/XWUIQuickCreate.css */
/* XWUIQuickCreate - inline quick-create card */

.xwui-quick-create {
  display: block;
  font-family: var(--font-body, inherit);
  color: var(--text-primary);
}

.xwui-quick-create-ghost    { background: transparent; }
.xwui-quick-create-outlined { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-md, 8px); }
.xwui-quick-create-filled   { background: var(--bg-elevated); border-radius: var(--radius-md, 8px); }

:is(.xwui-quick-create-s,.xwui-quick-create-sm) { font-size: 0.8125rem; }
:is(.xwui-quick-create-m,.xwui-quick-create-md) { font-size: 0.9375rem; }
:is(.xwui-quick-create-l,.xwui-quick-create-lg) { font-size: 1rem; }

/* Trigger row (collapsed) */
.xwui-quick-create-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  width: 100%;
  background: transparent;
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-sm, 4px);
  color: var(--text-secondary);
  font: inherit;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.xwui-quick-create-trigger:hover {
  background: var(--bg-hover);
  border-color: var(--text-tertiary);
  color: var(--text-primary);
}
.xwui-quick-create-trigger-icon {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05em;
}
.xwui-quick-create-trigger-label { font-weight: 500; }

/* Form (expanded) */
.xwui-quick-create-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.625rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06));
}

.xwui-quick-create-primary {
  display: block;
}

.xwui-quick-create-input {
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-primary);
  color: var(--text-primary);
  font: inherit;
  outline: none;
  box-sizing: border-box;
}
.xwui-quick-create-input:focus {
  border-color: var(--role-primary-bg, #337ea9);
  box-shadow: 0 0 0 2px rgba(51,126,169,0.20);
}

.xwui-quick-create-input-primary {
  font-weight: 500;
  font-size: 1.0625em;
}

/* Extra fields grid */
.xwui-quick-create-extra {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.5rem;
}
.xwui-quick-create-field {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.xwui-quick-create-field-label {
  font-size: 0.6875em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  font-weight: 600;
}

/* Action row */
.xwui-quick-create-actions {
  display: flex;
  gap: 0.375rem;
  justify-content: flex-end;
  margin-top: 0.125rem;
}
.xwui-quick-create-submit,
.xwui-quick-create-cancel {
  padding: 0.4rem 0.875rem;
  border-radius: var(--radius-sm, 4px);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.xwui-quick-create-submit {
  background: var(--role-primary-bg, #337ea9);
  color: var(--role-primary-fg, #fff);
}
.xwui-quick-create-submit:hover:not(:disabled) {
  filter: brightness(1.05);
}
.xwui-quick-create-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.xwui-quick-create-cancel {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-color);
}
.xwui-quick-create-cancel:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* basic/XWUIRadioGroup/XWUIRadioGroup.css */
/**
 * XWUIRadioGroup Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Typography: theme/typography/*.css
 */

.xwui-radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.5rem);
}

.xwui-radio-group-label {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary, #212529);
    margin-bottom: var(--spacing-xs, 0.25rem);
}

.xwui-radio-options {
    display: flex;
    gap: var(--spacing-sm, 0.75rem);
}

.xwui-radio-group-vertical .xwui-radio-options {
    flex-direction: column;
}

.xwui-radio-group-horizontal .xwui-radio-options {
    flex-direction: row;
    flex-wrap: wrap;
}

/* Individual radio */
.xwui-radio {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--spacing-sm, 0.625rem);
    cursor: pointer;
    user-select: none;
}

.xwui-radio-disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Hidden input */
.xwui-radio-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Visual radio */
.xwui-radio-visual {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--border-control-width, var(--border-width-thick, 2px)) var(--border-control-style, solid) var(--border-control-color, var(--border-color, #dee2e6));
    border-radius: 50%;
    background: var(--bg-primary, #ffffff);
    transition: all 0.15s ease;
}

.xwui-radio-dot {
    border-radius: 50%;
    background: var(--text-inverse);
    transform: scale(0);
    transition: transform 0.15s ease;
}

/* Size variants */
.xwui-radio-group-small .xwui-radio-visual {
    width: 16px;
    height: 16px;
}

.xwui-radio-group-small .xwui-radio-dot {
    width: 6px;
    height: 6px;
}

.xwui-radio-group-medium .xwui-radio-visual {
    width: 20px;
    height: 20px;
}

.xwui-radio-group-medium .xwui-radio-dot {
    width: 8px;
    height: 8px;
}

.xwui-radio-group-large .xwui-radio-visual {
    width: 24px;
    height: 24px;
}

.xwui-radio-group-large .xwui-radio-dot {
    width: 10px;
    height: 10px;
}

/* Checked state */
.xwui-radio-input:checked + .xwui-radio-visual {
    background: var(--accent-primary, #4f46e5);
    border-color: var(--accent-primary, #4f46e5);
    box-shadow: var(--glow-radio-selected, none);
}

.xwui-radio-input:checked + .xwui-radio-visual .xwui-radio-dot {
    transform: scale(1);
}

/* Focus state */
.xwui-radio-input:focus-visible + .xwui-radio-visual {
    box-shadow: var(--glow-radio-focus, var(--shadow-xs));
}

/* Hover state */
.xwui-radio:hover .xwui-radio-visual {
    border-color: var(--accent-primary, #4f46e5);
}

/* Color variants */
.xwui-radio-group-success .xwui-radio-input:checked + .xwui-radio-visual {
    background: var(--accent-success, #10b981);
    border-color: var(--accent-success, #10b981);
}

.xwui-radio-group-warning .xwui-radio-input:checked + .xwui-radio-visual {
    background: var(--accent-warning, #f59e0b);
    border-color: var(--accent-warning, #f59e0b);
}

.xwui-radio-group-error .xwui-radio-input:checked + .xwui-radio-visual {
    background: var(--accent-error, #ef4444);
    border-color: var(--accent-error, #ef4444);
}

/* Text content */
.xwui-radio-text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xxs, 0.125rem);
}

.xwui-radio-label {
    font-size: var(--font-size-base, 0.9375rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary, #212529);
    line-height: 1.4;
}

.xwui-radio-description {
    font-size: var(--font-size-sm, 0.8125rem);
    color: var(--text-secondary, #6c757d);
    line-height: 1.4;
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */


/* basic/XWUIRangeSlider/XWUIRangeSlider.css */
/**
 * XWUIRangeSlider Component Styles
 * Inherits from XWUISlider
 */

.xwui-range-slider-container {
    /* Container has no specific styles - inherits from XWUISlider */
}


/* basic/XWUIRating/XWUIRating.css */
/**
 * XWUIRating Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Typography: theme/typography/*.css
 */

.xwui-rating-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.5rem);
}

.xwui-rating-label {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary);
}

.xwui-rating {
    display: inline-flex;
    gap: var(--spacing-xs, 0.25rem);
    align-items: center;
}

.xwui-rating-readonly {
    pointer-events: none;
}

/* Star */
.xwui-rating-star {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    transition: transform 0.2s;
}

.xwui-rating-star:hover:not(.xwui-rating-readonly .xwui-rating-star) {
    transform: scale(1.1);
}

.xwui-rating-star-icon {
    display: flex;
    color: var(--text-tertiary);
    transition: color 0.2s;
}

.xwui-rating-star-full .xwui-rating-star-icon {
    color: var(--accent-warning);
}

.xwui-rating-star-half .xwui-rating-star-icon {
    color: var(--accent-warning);
    clip-path: inset(0 50% 0 0);
}

.xwui-rating-star svg {
    width: 1.5em;
    height: 1.5em;
}

/* Size variants */
.xwui-rating-small .xwui-rating-star svg {
    width: 1.25em;
    height: 1.25em;
}

.xwui-rating-large .xwui-rating-star svg {
    width: 2em;
    height: 2em;
}


/* basic/XWUIRecurrencePicker/XWUIRecurrencePicker.css */
/**
 * XWUIRecurrencePicker Component Styles
 */

.xwui-recurrence-picker {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 1rem);
    padding: var(--spacing-md, 1rem);
}

.xwui-recurrence-picker-label {
    display: block;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary, #212529);
    margin-bottom: var(--spacing-xs, 0.25rem);
}

.xwui-recurrence-picker-type,
.xwui-recurrence-picker-interval {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.25rem);
}

.xwui-recurrence-picker-interval {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
}

.xwui-recurrence-picker-unit {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary, #6c757d);
}

.xwui-recurrence-picker-days {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.25rem);
}

.xwui-recurrence-picker-days-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm, 0.5rem);
}

.xwui-recurrence-picker-day-of-month {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.25rem);
}

.xwui-recurrence-picker-preview {
    margin-top: var(--spacing-sm, 0.5rem);
}


/* basic/XWUIRefresher/XWUIRefresher.css */
/**
 * XWUIRefresher Component Styles
 * Ionic Refresher parity: pull-to-refresh container.
 */
.xwui-refresher {
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 120px;
}

.xwui-refresher-translate {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  transition: transform 0.2s ease;
}

.xwui-refresher-indicator {
  flex-shrink: 0;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-primary);
}

.xwui-refresher-spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: xwui-refresher-spin 0.6s linear infinite;
}

.xwui-refresher--refreshing .xwui-refresher-spinner {
  animation: xwui-refresher-spin 0.6s linear infinite;
}

@keyframes xwui-refresher-spin {
  to {
    transform: rotate(360deg);
  }
}

.xwui-refresher-content {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

.xwui-refresher--disabled .xwui-refresher-translate {
  pointer-events: none;
}

/* basic/XWUIResizable/XWUIResizable.css */
/**
 * XWUIResizable Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Roundness: theme/roundness/rounded.css (global roundness)
 */

.xwui-resizable {
    position: relative;
    border: var(--border-resizable-width, var(--border-width-regular, 1.5px)) var(--border-resizable-style, solid) var(--border-resizable-color, var(--border-color));
    border-radius: var(--radius-resizable, var(--radius-md, 6px));
    overflow: hidden;
}

.xwui-resizable-content {
    width: 100%;
    height: 100%;
    overflow: auto;
}

/* Handles */
.xwui-resizable-handle {
    position: absolute;
    background: transparent;
    z-index: 10;
}

.xwui-resizable-handle-right {
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    cursor: ew-resize;
}

.xwui-resizable-handle-right:hover {
    background: var(--accent-primary);
}

.xwui-resizable-handle-bottom {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    cursor: ns-resize;
}

.xwui-resizable-handle-bottom:hover {
    background: var(--accent-primary);
}

.xwui-resizable-handle-corner {
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    cursor: nwse-resize;
    background: var(--border-color);
    border-radius: var(--radius-resizable, var(--radius-sm, 4px)) 0 0 0;
}

.xwui-resizable-handle-corner:hover {
    background: var(--accent-primary);
}


/* basic/XWUIResult/XWUIResult.css */
/**
 * XWUIResult Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Typography: theme/typography/*.css
 */

.xwui-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--spacing-3xl, 3rem) var(--spacing-xl, 2rem);
}

.xwui-result-icon {
    width: 72px;
    height: 72px;
    margin-bottom: var(--spacing-lg, 1.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
}

.xwui-result-icon svg {
    width: 100%;
    height: 100%;
}

/* Status colors */
.xwui-result-success .xwui-result-icon {
    color: var(--accent-success);
}

.xwui-result-error .xwui-result-icon {
    color: var(--accent-error);
}

.xwui-result-info .xwui-result-icon {
    color: var(--accent-info);
}

.xwui-result-warning .xwui-result-icon {
    color: var(--accent-warning);
}

.xwui-result-title {
    font-size: var(--font-size-xl, 1.25rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary);
    margin-bottom: var(--spacing-md, 1rem);
}

.xwui-result-description {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg, 1.5rem);
    max-width: 400px;
}

.xwui-result-extra {
    margin-top: var(--spacing-md, 1rem);
}

/* Size variants */
.xwui-result-small {
    padding: var(--spacing-xl, 2rem) var(--spacing-lg, 1.5rem);
}

.xwui-result-small .xwui-result-icon {
    width: 48px;
    height: 48px;
}

.xwui-result-small .xwui-result-title {
    font-size: var(--font-size-lg, 1.25rem);
}

.xwui-result-large {
    padding: var(--spacing-3xl, 4rem) var(--spacing-xl, 2rem);
}

.xwui-result-large .xwui-result-icon {
    width: 96px;
    height: 96px;
}

.xwui-result-large .xwui-result-title {
    font-size: var(--font-size-2xl, 2rem);
}


/* basic/XWUIReveal/XWUIReveal.css */
/**
 * XWUIReveal Component Styles
 * Semantic UI React Reveal parity: visible + hidden content, reveal on hover.
 */
.xwui-reveal {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.xwui-reveal-visible,
.xwui-reveal-hidden {
  display: block;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.xwui-reveal-hidden {
  position: absolute;
  inset: 0;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-reveal-overlay, rgba(0, 0, 0, 0.6));
  color: var(--color-on-reveal, #fff);
}

.xwui-reveal:hover .xwui-reveal-visible,
.xwui-reveal:focus-within .xwui-reveal-visible {
  opacity: 0;
}

.xwui-reveal:hover .xwui-reveal-hidden,
.xwui-reveal:focus-within .xwui-reveal-hidden {
  opacity: 1;
}

/* Effect: move up – hidden slides up over visible */
.xwui-reveal--effect-move-up .xwui-reveal-hidden {
  transform: translateY(100%);
}
.xwui-reveal--effect-move-up:hover .xwui-reveal-hidden,
.xwui-reveal--effect-move-up:focus-within .xwui-reveal-hidden {
  transform: translateY(0);
}

.xwui-reveal--effect-move-down .xwui-reveal-hidden {
  transform: translateY(-100%);
}
.xwui-reveal--effect-move-down:hover .xwui-reveal-hidden,
.xwui-reveal--effect-move-down:focus-within .xwui-reveal-hidden {
  transform: translateY(0);
}

.xwui-reveal--effect-move-left .xwui-reveal-hidden {
  transform: translateX(100%);
}
.xwui-reveal--effect-move-left:hover .xwui-reveal-hidden,
.xwui-reveal--effect-move-left:focus-within .xwui-reveal-hidden {
  transform: translateX(0);
}

.xwui-reveal--effect-move-right .xwui-reveal-hidden {
  transform: translateX(-100%);
}
.xwui-reveal--effect-move-right:hover .xwui-reveal-hidden,
.xwui-reveal--effect-move-right:focus-within .xwui-reveal-hidden {
  transform: translateX(0);
}

.xwui-reveal--effect-fade .xwui-reveal-hidden {
  transform: none;
}

.xwui-reveal--instant .xwui-reveal-visible,
.xwui-reveal--instant .xwui-reveal-hidden {
  transition: none;
}

/* basic/XWUIRibbon/XWUIRibbon.css */
/* XWUIRibbon - diagonal corner ribbon overlay */

.xwui-ribbon {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: var(--font-body, inherit);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  z-index: 5;
  --xwui-ribbon-bg: var(--role-success-bg, #22c55e);
  --xwui-ribbon-fg: var(--role-success-fg, #ffffff);
}

.xwui-ribbon-overlay { position: fixed; }

.xwui-ribbon-banner {
  background: var(--xwui-ribbon-bg);
  color: var(--xwui-ribbon-fg);
  white-space: nowrap;
  padding: 0.25em 2.5em;
  text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
  width: 12rem;
  pointer-events: auto;
}

/* Sizes (font-size + ribbon width adjust via em-based padding) */
:is(.xwui-ribbon-s,.xwui-ribbon-sm) .xwui-ribbon-banner { font-size: 0.625rem; width: 9rem; padding: 0.2em 2em; }
:is(.xwui-ribbon-m,.xwui-ribbon-md) .xwui-ribbon-banner { font-size: 0.75rem;  width: 12rem; padding: 0.25em 2.5em; }
:is(.xwui-ribbon-l,.xwui-ribbon-lg) .xwui-ribbon-banner { font-size: 0.875rem; width: 14rem; padding: 0.3em 3em; }

/* ── Corner placement (rotates the whole element to 45°) ─────────────── */
/* The outer .xwui-ribbon container is anchored to the corner; the banner
 * inside is overflow-clipped by the parent (parent must have overflow:hidden
 * + position:relative, OR use overlay mode). */

.xwui-ribbon-top-right {
  top: 0; right: 0;
  transform: translate(35%, 65%) rotate(45deg);
  transform-origin: center;
}
.xwui-ribbon-top-left {
  top: 0; left: 0;
  transform: translate(-35%, 65%) rotate(-45deg);
  transform-origin: center;
}
.xwui-ribbon-bottom-right {
  bottom: 0; right: 0;
  transform: translate(35%, -65%) rotate(-45deg);
  transform-origin: center;
}
.xwui-ribbon-bottom-left {
  bottom: 0; left: 0;
  transform: translate(-35%, -65%) rotate(45deg);
  transform-origin: center;
}

/* Folded "tape" tails: small triangles giving the ribbon a 3-D feel.
 * Hidden when folded=false. */
.xwui-ribbon-tail {
  display: none;
}
.xwui-ribbon-folded .xwui-ribbon-tail {
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: var(--xwui-ribbon-bg);
  filter: brightness(0.7);
  z-index: -1;
}
.xwui-ribbon-folded.xwui-ribbon-top-right .xwui-ribbon-tail,
.xwui-ribbon-folded.xwui-ribbon-bottom-left .xwui-ribbon-tail {
  border-width: 0.5em 0.5em 0 0;
  bottom: -0.5em;
  left: 0;
  border-color: var(--xwui-ribbon-bg) transparent transparent transparent;
}
.xwui-ribbon-folded.xwui-ribbon-top-left .xwui-ribbon-tail,
.xwui-ribbon-folded.xwui-ribbon-bottom-right .xwui-ribbon-tail {
  border-width: 0.5em 0 0 0.5em;
  bottom: -0.5em;
  right: 0;
  border-color: transparent transparent transparent var(--xwui-ribbon-bg);
}

/* Default intent variants — also drives the tail colour via --xwui-ribbon-bg */
.xwui-ribbon-default,
.xwui-ribbon-neutral { --xwui-ribbon-bg: var(--bg-elevated); --xwui-ribbon-fg: var(--text-primary); }
.xwui-ribbon-primary { --xwui-ribbon-bg: var(--role-primary-bg, #337ea9); --xwui-ribbon-fg: var(--role-primary-fg, #fff); }
.xwui-ribbon-success { --xwui-ribbon-bg: var(--role-success-bg, #22c55e); --xwui-ribbon-fg: var(--role-success-fg, #fff); }
.xwui-ribbon-warning { --xwui-ribbon-bg: var(--role-warning-bg, #eab308); --xwui-ribbon-fg: var(--role-warning-fg, #1f1300); }
.xwui-ribbon-danger  { --xwui-ribbon-bg: var(--role-danger-bg, #ef4444);  --xwui-ribbon-fg: var(--role-danger-fg, #fff); }
.xwui-ribbon-info    { --xwui-ribbon-bg: var(--role-info-bg, #0ea5e9);    --xwui-ribbon-fg: var(--role-info-fg, #fff); }

/* basic/XWUIScrollArea/XWUIScrollArea.css */
/**
 * XWUIScrollArea Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 */

.xwui-scroll-area {
    position: relative;
    overflow: hidden;
}

.xwui-scroll-area-viewport {
    width: 100%;
    height: 100%;
    overflow: auto;
}

/* Orientation */
.xwui-scroll-area-vertical .xwui-scroll-area-viewport {
    overflow-x: hidden;
    overflow-y: auto;
}

.xwui-scroll-area-horizontal .xwui-scroll-area-viewport {
    overflow-x: auto;
    overflow-y: hidden;
}

.xwui-scroll-area-both .xwui-scroll-area-viewport {
    overflow: auto;
}

/* Hide scrollbar */
.xwui-scroll-area-hide-scrollbar .xwui-scroll-area-viewport {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.xwui-scroll-area-hide-scrollbar .xwui-scroll-area-viewport::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}


/* basic/XWUIScrollTo/XWUIScrollTo.css */
/**
 * XWUIScrollTo Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 */

.xwui-scrollto {
    width: 100%;
    height: 100%;
}


/* basic/XWUISearch/XWUISearch.css */
/**
 * XWUISearch Component Styles
 * Uses XWUIInput styles; this file adds search-specific layout if needed.
 */

.xwui-search {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.xwui-search [class*="xwui-input"] {
    width: 100%;
}

/* basic/XWUISectionGrouping/XWUISectionGrouping.css */
/**
 * XWUISectionGrouping Component Styles
 */

.xwui-section-grouping {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 1rem);
    width: 100%;
}

.xwui-section-grouping-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary, #212529);
}

.xwui-section-grouping-count {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-normal, 400);
    color: var(--text-secondary, #6c757d);
}

.xwui-section-grouping-section {
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
}

.xwui-section-grouping-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
    background: var(--bg-secondary, #f8f9fa);
    border-bottom: 1px solid var(--border-color, #dee2e6);
}

.xwui-section-grouping-section-title {
    margin: 0;
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary, #212529);
}

.xwui-section-grouping-content {
    padding: var(--spacing-md, 1rem);
}


/* basic/XWUISegmentedControl/XWUISegmentedControl.css */
/**
 * XWUISegmentedControl Component Styles
 */

.xwui-segmented-control-container {
    /* Container has no specific styles */
}

.xwui-segmented-control {
    display: inline-flex;
    position: relative;
    background-color: var(--bg-secondary, #f0f0f0);
    border-radius: var(--radius-md, 6px);
    padding: 2px;
}

.xwui-segmented-control-block {
    display: flex;
    width: 100%;
}

.xwui-segmented-control-buttons {
    display: flex;
    position: relative;
    z-index: 1;
}

.xwui-segmented-control-button {
    flex: 1;
    border: none;
    background: transparent;
    padding: 4px 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: var(--font-size-sm, 14px);
    color: var(--text-secondary, #666);
    white-space: nowrap;
}

.xwui-segmented-control-button:hover:not(:disabled):not(.xwui-segmented-control-button-active) {
    color: var(--text-primary, #333);
}

.xwui-segmented-control-button-active {
    color: var(--accent-primary, #1890ff);
    font-weight: var(--font-weight-medium, 500);
}

.xwui-segmented-control-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.xwui-segmented-control-indicator {
    position: absolute;
    top: 2px;
    bottom: 2px;
    background-color: var(--bg-primary, #ffffff);
    border-radius: var(--radius-sm, 4px);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
    transition: left 0.3s ease, width 0.3s ease;
    z-index: 0;
}

.xwui-segmented-control-small {
    font-size: 12px;
}

.xwui-segmented-control-small .xwui-segmented-control-button {
    padding: 2px 8px;
}

.xwui-segmented-control-large {
    font-size: 16px;
}

.xwui-segmented-control-large .xwui-segmented-control-button {
    padding: 6px 16px;
}

.xwui-segmented-control-disabled {
    opacity: 0.6;
    pointer-events: none;
}

.xwui-segmented-control-icon {
    display: inline-flex;
    align-items: center;
}


/* basic/XWUISelect/XWUISelect.css */
/**
 * XWUISelect Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/input/*.css (component-specific border widths)
 * - Roundness: theme/roundness/input/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-select-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.375rem);
    position: relative;
}

.xwui-select-full-width {
    width: 100%;
}

/* Label */
.xwui-select-label {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    font-family: var(--font-label-family, var(--font-family-base, sans-serif));
    color: var(--text-primary, #212529);
}

/* Trigger */
.xwui-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border-radius: var(--radius-input, var(--radius-md, 6px));
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Outlined variant */
.xwui-select-outlined .xwui-select-trigger {
    border: var(--border-input-width, var(--border-width-regular, 1.5px)) var(--border-input-style, solid) var(--border-input-color, var(--border-color, #dee2e6));
    background: var(--bg-primary, #ffffff);
}

.xwui-select-outlined .xwui-select-trigger:hover {
    border-color: var(--border-strong, #adb5bd);
}

.xwui-select-outlined.xwui-select-open .xwui-select-trigger {
    border-color: var(--accent-primary, #4f46e5);
    box-shadow: var(--shadow-xs);
}

/* Filled variant */
.xwui-select-filled .xwui-select-trigger {
    border: var(--border-input-width, var(--border-width-regular, 1.5px)) var(--border-input-style, solid) transparent;
    background: var(--bg-secondary, #f8f9fa);
}

.xwui-select-filled .xwui-select-trigger:hover {
    background: var(--bg-tertiary, #f1f3f5);
}

.xwui-select-filled.xwui-select-open .xwui-select-trigger {
    background: var(--bg-primary, #ffffff);
    border-color: var(--accent-primary, #4f46e5);
}

/* Size variants */
.xwui-select-small .xwui-select-trigger {
    padding: var(--spacing-xs, 0.375rem) var(--spacing-sm, 0.75rem);
    font-size: var(--font-size-sm, 0.875rem);
    min-height: 32px;
}

.xwui-select-medium .xwui-select-trigger {
    padding: var(--spacing-sm, 0.625rem) var(--spacing-sm, 0.875rem);
    font-size: var(--font-size-base, 0.9375rem);
    min-height: 40px;
}

.xwui-select-large .xwui-select-trigger {
    padding: var(--spacing-sm, 0.875rem) var(--spacing-md, 1rem);
    font-size: var(--font-size-base, 1rem);
    min-height: 48px;
}

/* Value display */
.xwui-select-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary, #212529);
}

.xwui-select-trigger:not(:has(.xwui-select-value:not(:empty))) .xwui-select-value {
    color: var(--text-tertiary, #adb5bd);
}

/* Icons */
.xwui-select-icons {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 0.25rem);
    flex-shrink: 0;
}

.xwui-select-arrow {
    display: flex;
    align-items: center;
    color: var(--text-secondary, #6c757d);
    transition: transform 0.2s;
}

.xwui-select-arrow svg {
    width: 16px;
    height: 16px;
}

.xwui-select-open .xwui-select-arrow {
    transform: rotate(180deg);
}

.xwui-select-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-tertiary, #adb5bd);
    transition: color 0.2s;
}

.xwui-select-clear:hover {
    color: var(--text-secondary, #6c757d);
}

.xwui-select-clear svg {
    width: 14px;
    height: 14px;
}

/* Dropdown */
.xwui-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--bg-primary, #ffffff);
    border: var(--border-input-width, var(--border-width-regular, 1.5px)) var(--border-input-style, solid) var(--border-input-color, var(--border-color, #dee2e6));
    border-radius: var(--radius-input, var(--radius-md, 6px));
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
    z-index: 1000;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
}

.xwui-select-open .xwui-select-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Search */
.xwui-select-search {
    padding: var(--spacing-sm, 0.5rem);
    border-bottom: 1px solid var(--border-color, #dee2e6);
}

.xwui-select-search-input {
    width: 100%;
    padding: var(--spacing-sm, 0.5rem) var(--spacing-sm, 0.75rem);
    border: var(--border-input-width, var(--border-width-regular, 1.5px)) var(--border-input-style, solid) var(--border-input-color, var(--border-color, #dee2e6));
    border-radius: var(--radius-input, var(--radius-sm, 4px));
    font-size: var(--font-size-sm, 0.875rem);
    outline: none;
}

.xwui-select-search-input:focus {
    border-color: var(--accent-primary, #4f46e5);
}

/* Options */
.xwui-select-options {
    overflow-y: auto;
    max-height: inherit;
}

.xwui-select-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: var(--spacing-sm, 0.625rem) var(--spacing-sm, 0.875rem);
    cursor: pointer;
    transition: background 0.1s;
}

.xwui-select-option:hover {
    background: var(--bg-hover, #f8f9fa);
}

.xwui-select-option-selected {
    background: var(--bg-hover);
}

.xwui-select-option-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.xwui-select-option-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: var(--border-input-width, var(--border-width-thick, 2px)) var(--border-input-style, solid) var(--border-input-color, var(--border-color, #dee2e6));
    border-radius: var(--radius-input, var(--radius-xs, 3px));
    color: var(--text-inverse);
    flex-shrink: 0;
}

.xwui-select-option-selected .xwui-select-option-checkbox {
    background: var(--accent-primary, #4f46e5);
    border-color: var(--accent-primary, #4f46e5);
}

.xwui-select-option-checkbox svg {
    width: 12px;
    height: 12px;
}

.xwui-select-option-label {
    flex: 1;
    color: var(--text-primary, #212529);
}

.xwui-select-option-check {
    color: var(--accent-primary, #4f46e5);
}

.xwui-select-option-check svg {
    width: 16px;
    height: 16px;
}

/* Groups */
.xwui-select-group {
    padding-top: var(--spacing-sm, 0.5rem);
}

.xwui-select-group:first-child {
    padding-top: 0;
}

.xwui-select-group-label {
    padding: var(--spacing-sm, 0.5rem) var(--spacing-sm, 0.875rem);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-secondary, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Empty state */
.xwui-select-empty {
    padding: var(--spacing-md, 1rem);
    text-align: center;
    color: var(--text-secondary, #6c757d);
}

/* Helper text */
.xwui-select-helper {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-secondary, #6c757d);
}

.xwui-select-helper-error {
    color: var(--accent-error, #ef4444);
}

/* Error state */
.xwui-select-error .xwui-select-trigger {
    border-color: var(--accent-error, #ef4444) !important;
}

/* Disabled state */
.xwui-select-disabled .xwui-select-trigger {
    background: var(--bg-secondary, #f8f9fa);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */


/* Per-option logo/image (XWUISelectOption.image) — dropdown rows + selected trigger. */
.xwui-select-option-image {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    object-fit: contain;
    border-radius: 4px;
}
.xwui-select-value {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.xwui-select-value-image {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    object-fit: contain;
    border-radius: 4px;
}
.xwui-select-value-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.xwui-select-value-placeholder {
    color: var(--text-tertiary, #adb5bd);
}

/* basic/XWUISeparator/XWUISeparator.css */
/**
 * XWUISeparator Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Typography: theme/typography/*.css
 */

.xwui-separator {
    display: flex;
    align-items: center;
}

/* Horizontal separator */
.xwui-separator-horizontal {
    width: 100%;
    height: 1px;
    background: var(--border-color);
}

/* Vertical separator */
.xwui-separator-vertical {
    width: 1px;
    height: 100%;
    background: var(--border-color);
    min-height: 1rem;
}

/* Separator with label */
.xwui-separator-with-label {
    display: flex;
    align-items: center;
    width: 100%;
    gap: var(--spacing-md, 1rem);
}

.xwui-separator-line {
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.xwui-separator-label {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ── Resizable splitter ────────────────────────────────────────────────
   When `resizable: true` is set, the separator becomes a draggable
   handle (splitter / pane divider). Common pattern names: "splitter"
   (VS Code), "resizer" (Figma), "pane divider" (Chrome DevTools). Hit
   area widens to ~8px for easier grabbing; cursor flips to the right
   axis; hover bg tints to signal affordance. */
.xwui-separator--resizable {
    position: relative;
    background: transparent;
    user-select: none;
    transition: background-color 0.15s ease;
}
.xwui-separator--resizable.xwui-separator-horizontal {
    height: 8px;
    cursor: row-resize;
}
.xwui-separator--resizable.xwui-separator-vertical {
    width: 8px;
    cursor: col-resize;
}
.xwui-separator--resizable::after {
    content: '';
    position: absolute;
    background: var(--border-color, rgba(0, 0, 0, 0.12));
    transition: background-color 0.15s ease;
}
.xwui-separator--resizable.xwui-separator-horizontal::after {
    top: 50%; left: 0; right: 0; height: 1px;
    transform: translateY(-50%);
}
.xwui-separator--resizable.xwui-separator-vertical::after {
    left: 50%; top: 0; bottom: 0; width: 1px;
    transform: translateX(-50%);
}
.xwui-separator--resizable:hover::after,
.xwui-separator--resizable:focus-visible::after,
.xwui-separator--resizable.xwui-separator--dragging::after {
    background: var(--accent-primary, #4f46e5);
    height: 2px;
}
.xwui-separator--resizable.xwui-separator-vertical:hover::after,
.xwui-separator--resizable.xwui-separator-vertical:focus-visible::after,
.xwui-separator--resizable.xwui-separator-vertical.xwui-separator--dragging::after {
    height: auto;
    width: 2px;
}
.xwui-separator--resizable:hover,
.xwui-separator--resizable.xwui-separator--dragging {
    background: color-mix(in srgb, var(--accent-primary, #4f46e5) 8%, transparent);
}
.xwui-separator--resizable:focus-visible {
    outline: 2px solid var(--accent-primary, #4f46e5);
    outline-offset: 0;
}

/* ── MUI Divider parity ─────────────────────────────────────────────────────
   variant (fullWidth default / inset / middle), flexItem, light, and textAlign
   for the labelled (text) divider. (A resizable divider delegates to
   XWUISplitter, which carries its own visible-handle styling.) */

/* A labelled divider is NOT a 1px line — the with-label row provides the lines. */
.xwui-separator-horizontal:has(.xwui-separator-with-label) {
    height: auto;
    background: transparent;
}

/* variant: inset (indent the start) / middle (indent both ends). */
.xwui-separator-horizontal.xwui-separator-inset  { width: auto; margin-inline-start: 72px; }
.xwui-separator-horizontal.xwui-separator-middle { width: auto; margin-inline: 16px; }
.xwui-separator-vertical.xwui-separator-inset    { height: auto; margin-block-start: 8px; }
.xwui-separator-vertical.xwui-separator-middle   { height: auto; margin-block: 8px; }

/* flexItem: a vertical divider that stretches to a flex row's height. */
.xwui-separator-vertical.xwui-separator-flex-item {
    align-self: stretch;
    height: auto;
    min-height: 0;
}
/* The separator sits in a wrapping host (its container), which is the REAL flex
   child — so make that host stretch + become a flex box, and the nested divider
   fills it. (Without this the host stays content-height = 0 and the divider is
   invisible.) */
:has(> .xwui-separator-vertical.xwui-separator-flex-item) {
    align-self: stretch;
    display: flex;
}

/* light: a fainter divider colour. */
.xwui-separator-horizontal.xwui-separator-light,
.xwui-separator-vertical.xwui-separator-light {
    background: color-mix(in srgb, var(--border-color, #94a3b8) 50%, transparent);
}
.xwui-separator-light .xwui-separator-line {
    background: color-mix(in srgb, var(--border-color, #94a3b8) 50%, transparent);
}

/* textAlign: shift the label toward an end by shortening that side's line. */
.xwui-separator-align-left  .xwui-separator-line:first-child,
.xwui-separator-align-start .xwui-separator-line:first-child { flex: 0 0 24px; }
.xwui-separator-align-right .xwui-separator-line:last-child,
.xwui-separator-align-end   .xwui-separator-line:last-child { flex: 0 0 24px; }


/* basic/XWUIShell/XWUIShell.css */
/**
 * XWUIShell Component Styles
 * Structure only — colours come from theme CSS variables.
 *
 * The universal 5-region layout primitive, implemented as a CSS GRID so that
 * `presence: 'expanded'` on FIRST or LAST can punch the part outside its
 * default slot (FIRST.expanded spans top→bottom on the start edge, pushing
 * HEADER and FOOTER's column tracks aside).
 *
 *   ┌──────────────────────────────────────────────────────┐
 *   │                       HEADER                         │
 *   ├──────────┬───────────────────────────────┬───────────┤
 *   │  FIRST   │             BODY              │   LAST    │
 *   ├──────────┴───────────────────────────────┴───────────┤
 *   │                       FOOTER                         │
 *   └──────────────────────────────────────────────────────┘
 *
 * State is reflected from each part onto the root as
 * `data-{slot}-presence="visible|collapsed|expanded|hidden"`. The grid
 * template + track-size vars react to those attributes — no JS layout pass.
 */

/* ── Root grid ─────────────────────────────────────────────────────────────*/
.xwui-shell {
    display: grid;
    grid-template-columns:
        var(--xwui-shell-first-size, auto)
        minmax(0, 1fr)
        var(--xwui-shell-last-size, auto);
    grid-template-rows:
        var(--xwui-shell-header-size, auto)
        minmax(0, 1fr)
        var(--xwui-shell-footer-size, auto);
    grid-template-areas:
        "header header header"
        "first  body   last"
        "footer footer footer";
    width: 100%;
    min-height: 0;
    box-sizing: border-box;
    position: relative; /* anchor for the body-row-shadow overlay */
    contain: layout style;
}
.xwui-shell-fill {
    height: 100%;
}

/* Resizable regions FILL their grid track so the track var (driven by the
   divider drag) owns the visible size. Without this the part sizes to its own
   content and ignores the resized column/row — the divider would move but the
   rail wouldn't grow. The matching --xwui-shell-{slot}-size var is seeded from
   firstWidth/lastWidth and updated on every drag (see XWUIShell.ts). */
.xwui-shell > .xwui-shell-part[data-divider="divider"][data-anchor="start"],
.xwui-shell > .xwui-shell-part[data-divider="divider"][data-anchor="end"] {
    width: 100% !important;
}
.xwui-shell > .xwui-shell-part[data-divider="divider"][data-anchor="top"],
.xwui-shell > .xwui-shell-part[data-divider="divider"][data-anchor="bottom"] {
    height: 100% !important;
}

/* ── Sticky / transparent header + body-only scroll ─────────────────────────
   All three are opt-in via a root class (set from config). Pure CSS — no JS
   layout pass.

   `stickyHeader`  → the HEADER pins to the top of the scroll container as it
                     scrolls past. Use when the shell (or page) scrolls as a
                     whole; with `scrollBody` the header is already fixed so
                     this is a no-op.
   `transparentHeader` → a frosted, see-through sticky header. The header's own
                     content must not paint an opaque background for it to show.
   `scrollBody`    → only the BODY scrolls; HEADER/FOOTER/FIRST/LAST stay put.
                     The shell is held to its container height and the body row
                     is already `minmax(0, 1fr)`, so the cell can shrink below
                     its content and the body's own `overflow: auto` engages. */
.xwui-shell-sticky-header > .xwui-shell-part[data-anchor="top"] {
    position: sticky;
    top: 0;
    z-index: 5;
}

.xwui-shell-transparent-header > .xwui-shell-part[data-anchor="top"] {
    background: color-mix(in srgb, var(--bg-elevated, var(--bg-app, #ffffff)) 70%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.xwui-shell-scroll-body {
    height: 100%;
    min-height: 0;
}
/* Reassert the body's scroll even if `bodyNoScroll` was applied elsewhere. */
.xwui-shell-scroll-body > .xwui-shell-part[data-anchor="center"] > .xwui-shell-part-content {
    overflow: auto;
}
/* The body's single content wrapper must GROW with its content here — the
   generic `.xwui-shell-part-content > *:only-child { height: 100% }` rule would
   clamp it to the visible cell height, so its background / borders would stop
   at the fold while the content scrolls past (a half-painted body). `height:
   auto; min-height: 100%` keeps it filling the cell when short AND growing to
   cover the full scroll length when tall. */
.xwui-shell-scroll-body > .xwui-shell-part[data-anchor="center"] > .xwui-shell-part-content > *:only-child {
    height: auto;
    min-height: 100%;
}

/* ── Sticky footer + sticky side rails ─────────────────────────────────────*/
.xwui-shell-sticky-footer > .xwui-shell-part[data-anchor="bottom"] {
    position: sticky;
    bottom: 0;
    z-index: 5;
}
/* Side rails pin to the top of the scroll container and never grow taller than
   the viewport so a long rail can scroll on its own if needed. */
.xwui-shell-sticky-first > .xwui-shell-part[data-anchor="start"],
.xwui-shell-sticky-last > .xwui-shell-part[data-anchor="end"] {
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    overflow: auto;
}

/* ── Header elevation when "stuck" ─────────────────────────────────────────
   A 1px sentinel pinned to the shell's top edge is observed against the
   viewport; once it scrolls out, the JS sets `data-header-stuck` and the shadow
   appears. Lets a sticky header read as flat at rest and lifted once scrolled. */
.xwui-shell-stuck-sentinel {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
    visibility: hidden;
}
.xwui-shell-header-elevate > .xwui-shell-part[data-anchor="top"] {
    transition: box-shadow 0.18s ease;
}
.xwui-shell-header-elevate[data-header-stuck] > .xwui-shell-part[data-anchor="top"] {
    box-shadow: 0 10px 28px -6px rgba(0, 0, 0, 0.40), 0 4px 10px -3px rgba(0, 0, 0, 0.24);
}

/* ── Header condense on scroll ──────────────────────────────────────────────
   Once stuck, shrink the header row to `--xwui-shell-header-condensed` (a tall
   hero header collapses to a compact bar). The header part is `overflow:hidden`
   so over-tall content clips gracefully. */
.xwui-shell-header-condense {
    transition: none;
}
.xwui-shell-header-condense > .xwui-shell-part[data-anchor="top"] {
    transition: height 0.2s ease;
}
.xwui-shell-header-condense[data-header-stuck] {
    --xwui-shell-header-size: var(--xwui-shell-header-condensed, 48px);
}
/* Smooth (scroll-driven) condense: the JS interpolates --xwui-shell-header-size
   from the resting height down to the condensed height in lock-step with
   scrollTop, so the header shrinks continuously instead of snapping between two
   sizes. The height transition is removed because the scroll itself supplies the
   motion — a 0.2s transition would lag a frame behind every scroll tick. */
.xwui-shell-header-condense-smooth > .xwui-shell-part[data-anchor="top"] {
    transition: none;
}

/* ── Body horizontal scroll + scroll-snap ───────────────────────────────────*/
.xwui-shell-body-scroll-x > .xwui-shell-part[data-anchor="center"] > .xwui-shell-part-content {
    overflow-x: auto;
}
.xwui-shell-body-snap-x > .xwui-shell-part[data-anchor="center"] > .xwui-shell-part-content {
    scroll-snap-type: x mandatory;
}
.xwui-shell-body-snap-y > .xwui-shell-part[data-anchor="center"] > .xwui-shell-part-content {
    scroll-snap-type: y mandatory;
}
.xwui-shell-body-snap-both > .xwui-shell-part[data-anchor="center"] > .xwui-shell-part-content {
    scroll-snap-type: both mandatory;
}

/* ── Container-query responsive (size by the shell's OWN width) ──────────────
   The shell becomes a named size container; the FIRST / LAST rails collapse out
   below a 560px container width regardless of the viewport. Consumers can add
   their own `@container xwui-shell (...)` rules. */
.xwui-shell-container-responsive {
    container: xwui-shell / inline-size;
}
@container xwui-shell (max-width: 560px) {
    .xwui-shell-part[data-anchor="start"],
    .xwui-shell-part[data-anchor="end"] {
        display: none;
    }
}

/* ── Density ───────────────────────────────────────────────────────────────*/
.xwui-shell-density-compact {
    --xwui-shell-density: compact;
    --xwui-shell-header-collapsed-size: 32px;
    --xwui-shell-footer-collapsed-size: 32px;
}

/* ── Hairline separators between regions ───────────────────────────────────*/
.xwui-shell-region-dividers > .xwui-shell-part[data-anchor="top"]    { border-block-end: 1px solid var(--border-color, #e2e8f0); }
.xwui-shell-region-dividers > .xwui-shell-part[data-anchor="bottom"] { border-block-start: 1px solid var(--border-color, #e2e8f0); }
.xwui-shell-region-dividers > .xwui-shell-part[data-anchor="start"]  { border-inline-end: 1px solid var(--border-color, #e2e8f0); }
.xwui-shell-region-dividers > .xwui-shell-part[data-anchor="end"]    { border-inline-start: 1px solid var(--border-color, #e2e8f0); }

/* ── Readable-width body column ────────────────────────────────────────────
   The BODY background stays full-bleed; only its content column is constrained
   and centred (set `--xwui-shell-content-max` from config). */
.xwui-shell-content-constrained > .xwui-shell-part[data-anchor="center"] > .xwui-shell-part-content > * {
    max-width: var(--xwui-shell-content-max, none);
    margin-inline: auto;
}

/* ── Mobile safe-area insets ───────────────────────────────────────────────*/
.xwui-shell-safe-area > .xwui-shell-part[data-anchor="top"]    { padding-top: env(safe-area-inset-top, 0px); }
.xwui-shell-safe-area > .xwui-shell-part[data-anchor="bottom"] { padding-bottom: env(safe-area-inset-bottom, 0px); }
.xwui-shell-safe-area > .xwui-shell-part[data-anchor="start"]  { padding-inline-start: env(safe-area-inset-left, 0px); }
.xwui-shell-safe-area > .xwui-shell-part[data-anchor="end"]    { padding-inline-end: env(safe-area-inset-right, 0px); }

/* ── Stable scrollbar gutter (no content shift) ────────────────────────────*/
.xwui-shell-stable-scrollbar > .xwui-shell-part[data-anchor="center"] > .xwui-shell-part-content {
    scrollbar-gutter: stable;
}

/* ── Skip-to-content link (with `landmarks`) ───────────────────────────────*/
.xwui-shell-skip-link {
    position: absolute;
    inset-inline-start: 8px;
    top: -100px;
    z-index: 1000;
    padding: 8px 14px;
    background: var(--accent-primary, var(--accent-color, #2962ff));
    color: var(--text-inverse, #ffffff);
    border-radius: var(--radius-sm, 6px);
    font: var(--font-weight-medium, 500) var(--font-size-sm, 0.875rem) / 1 var(--font-family, system-ui);
    text-decoration: none;
    transition: top 0.15s ease;
}
.xwui-shell-skip-link:focus {
    top: 8px;
    outline: 2px solid var(--text-inverse, #ffffff);
    outline-offset: 2px;
}

/* ── Print: let everything flow (no clipping / internal scroll) ────────────*/
@media print {
    .xwui-shell,
    .xwui-shell .xwui-shell-part,
    .xwui-shell .xwui-shell-part-content {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }
}

/* Map each part to its grid area via its (stable) anchor attribute. The
   `> .xwui-shell-part` selector guards against nested shells with stray
   parts elsewhere in the DOM. Only applies to `data-flow="inline"` (the
   default) — when a part goes `floating`, its CSS uses `grid-area: 1 / 1 /
   -1 / -1` to cover the entire shell, so this anchor-keyed slot mapping
   would clobber that without the `:not(...)` exclusion. */
.xwui-shell > .xwui-shell-part[data-anchor="top"]:not([data-flow="floating"])    { grid-area: header; }
.xwui-shell > .xwui-shell-part[data-anchor="start"]:not([data-flow="floating"])  { grid-area: first; }
.xwui-shell > .xwui-shell-part[data-anchor="center"]:not([data-flow="floating"]) { grid-area: body; }
.xwui-shell > .xwui-shell-part[data-anchor="end"]:not([data-flow="floating"])    { grid-area: last; }
.xwui-shell > .xwui-shell-part[data-anchor="bottom"]:not([data-flow="floating"]) { grid-area: footer; }

/* ── Hidden tracks collapse ────────────────────────────────────────────────
   When a part is `hidden`, its `display: none` (from XWUIShellPart.css)
   removes the box. We also zero the corresponding grid track so the gap
   doesn't linger (auto-tracks default to 0 with no in-flow content, but
   pinning the var keeps things deterministic). */
.xwui-shell[data-first-presence="hidden"]  { --xwui-shell-first-size: 0; }
.xwui-shell[data-last-presence="hidden"]   { --xwui-shell-last-size: 0; }
.xwui-shell[data-header-presence="hidden"] { --xwui-shell-header-size: 0; }
.xwui-shell[data-footer-presence="hidden"] { --xwui-shell-footer-size: 0; }

/* ── Collapsed tracks (condensed sidebars / shrunk headers) ────────────────
   The Part's own CSS sets its width/height when collapsed; we also shrink
   the corresponding grid track so the column / row fits. Defaults can be
   overridden by the consumer at the shell-root level. */
.xwui-shell[data-header-presence="collapsed"] { --xwui-shell-header-size: var(--xwui-shell-header-collapsed-size, 40px); }
.xwui-shell[data-footer-presence="collapsed"] { --xwui-shell-footer-size: var(--xwui-shell-footer-collapsed-size, 40px); }
/* First/Last collapsed: shrink the grid COLUMN too. The Part's own CSS narrows
   its box, but when the consumer pinned an explicit firstWidth / lastWidth the
   column stays that fixed size — leaving the narrowed rail floating in a wide
   empty track (a confusing "ghost" sidebar with just a restore chevron in it).
   Collapsing the track to the rail width keeps it tight and intentional. */
.xwui-shell[data-first-presence="collapsed"] { --xwui-shell-first-size: var(--xwui-shell-first-collapsed-size, 48px); }
.xwui-shell[data-last-presence="collapsed"]  { --xwui-shell-last-size: var(--xwui-shell-last-collapsed-size, 48px); }

/* ── Expanded — area templates change ──────────────────────────────────────
   FIRST.expanded spills the start column top→bottom; HEADER and FOOTER's
   start track shrinks away (the `first` area now covers what was the
   first column of header and footer). Same shape for LAST. */
.xwui-shell[data-first-presence="expanded"] {
    grid-template-areas:
        "first header header"
        "first body   last"
        "first footer footer";
}
.xwui-shell[data-last-presence="expanded"] {
    grid-template-areas:
        "header header last"
        "first  body   last"
        "footer footer last";
}
.xwui-shell[data-first-presence="expanded"][data-last-presence="expanded"] {
    grid-template-areas:
        "first header last"
        "first body   last"
        "first footer last";
}

/* HEADER.expanded / FOOTER.expanded — vertical-stretch hint, NOT an area
   span (a top-anchored bar spanning all 3 rows doesn't have meaningful UX).
   See the AskUserQuestion answer: "Header can be collapsed or expanded".
   Expanded = grown to a banner / hero size; the track grows to ~30vh. */
.xwui-shell[data-header-presence="expanded"] { --xwui-shell-header-size: var(--xwui-shell-header-expanded-size, 30vh); }
.xwui-shell[data-footer-presence="expanded"] { --xwui-shell-footer-size: var(--xwui-shell-footer-expanded-size, 30vh); }

/* ── RTL ──────────────────────────────────────────────────────────────────
   CSS Grid's inline axis ALREADY reverses under `direction: rtl` — column
   tracks lay out right-to-left, and named areas inherit that flip. So with
   the same LTR template `"first body last"`, the part with `grid-area: first`
   naturally lands on the right edge in RTL. NO template override needed (and
   adding one would double-flip and cancel itself).

   We only need RTL to do anything special when `direction: rtl` is NOT being
   inherited from the host (e.g. a consumer set the class without the
   attribute). That path is intentionally not supported — the JS always pairs
   the `xwui-shell-rtl` class with `dir="rtl"` on the root. */

/* ── Floating backdrop (in-shell, NOT page-level) ──────────────────────────
   Appears while any part has `data-flow="floating"`. Covers the shell's box
   exactly — `position: absolute` against the shell root, which has
   `position: relative`. NEVER attached to `document.body`, so it can't
   overlay anything outside the shell's render rect. Click to dismiss every
   floating part. The opacity transition gives a soft fade-in / fade-out. */
.xwui-shell-floating-backdrop {
    position: absolute;
    inset: 0;
    /* Span the entire shell grid (header → footer) so the backdrop covers
       the full shell rect, NOT just the body-row. Same logic as the
       floating part itself — see XWUIShellPart.css. */
    grid-area: 1 / 1 / -1 / -1;
    z-index: 4;          /* under the part (z-index 5) but over content */
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity 250ms ease;
    cursor: pointer;
    pointer-events: auto;
}
.xwui-shell-floating-backdrop-visible { opacity: 1; }

/* When ANY slot is floating, collapse that slot's grid track so the
   non-floating layout reflows as if the part had left the grid. The part
   itself goes `position: absolute` (see XWUIShellPart.css) and overlays
   the shell. */
.xwui-shell[data-first-flow="floating"]  { --xwui-shell-first-size: 0; }
.xwui-shell[data-last-flow="floating"]   { --xwui-shell-last-size: 0; }
.xwui-shell[data-header-flow="floating"] { --xwui-shell-header-size: 0; }
.xwui-shell[data-footer-flow="floating"] { --xwui-shell-footer-size: 0; }

/* ── Restore tabs (edge buttons for hidden parts) ──────────────────────────
   When a part has `presence: 'hidden'`, the shell renders a tiny edge-tab
   on the side that part's anchor points to. Clicking it sets the part back
   to `visible`. Without this, a user who hits the close-X has no way to
   bring the part back from within the shell's own UI. The tab sits on
   `z-index: 7` so it stays above the body but UNDER any floating overlay
   (which is at 5/4) — wait, it's actually above the floating layer (5)
   because the user must always be able to dismiss-and-restore. */
.xwui-shell-restore-tab {
    position: absolute;
    z-index: 7;
    background: var(--bg-primary, #fff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--border-color, #e3e3e8);
    border-radius: 8px;
    padding: 0;
    /* Fade in to match the part's own transition timing. */
    animation: xwui-shell-restore-tab-in 220ms ease both;
}
@keyframes xwui-shell-restore-tab-in {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}
/* Per-anchor placement. Each tab nestles against the edge the part will
   slide back from when clicked. */
.xwui-shell-restore-tab[data-anchor="start"]  { top: 50%; inset-inline-start: 0; transform: translateY(-50%); }
.xwui-shell-restore-tab[data-anchor="end"]    { top: 50%; inset-inline-end: 0;   transform: translateY(-50%); }
.xwui-shell-restore-tab[data-anchor="top"]    { left: 50%; top: 0;    transform: translateX(-50%); }
.xwui-shell-restore-tab[data-anchor="bottom"] { left: 50%; bottom: 0; transform: translateX(-50%); }

/* ── Drag-and-drop simulation (two ghosts) ─────────────────────────────────
   While the user drags a part's "move" button, the shell renders TWO
   ghost overlays that together simulate the post-drop layout:
     • `.xwui-shell-drop-ghost-target` — accent-tinted rect over the slot
       the dragged part WILL land in. Label: "{source} → here".
     • `.xwui-shell-drop-ghost-source` — neutral-tinted rect over the slot
       the dragged part is LEAVING (showing where the DISPLACED part will
       end up after the swap). Label: "{target} → here".
   Both ghosts use `grid-area` to snap to actual slot boxes, so the user
   sees a realistic preview of the swap before committing. */
.xwui-shell-drop-ghost {
    position: relative;
    z-index: 6;
    pointer-events: none;
    display: none;                       /* JS sets `data-zone` to reveal */
    box-sizing: border-box;
    border-radius: 8px;
    animation: xwui-shell-drop-ghost-in 120ms ease both;
    overflow: hidden;
}
.xwui-shell-drop-ghost[data-zone] { display: block; }

/* Snap to the real slot rect via grid-area: each `data-zone` value names
   one of the 5 shell grid areas. */
.xwui-shell-drop-ghost[data-zone="top"]    { grid-area: header; }
.xwui-shell-drop-ghost[data-zone="bottom"] { grid-area: footer; }
.xwui-shell-drop-ghost[data-zone="start"]  { grid-area: first; }
.xwui-shell-drop-ghost[data-zone="end"]    { grid-area: last; }
.xwui-shell-drop-ghost[data-zone="center"] { grid-area: body; }

/* Target ghost — where the dragged part WILL land. Solid accent fill so
   it reads as the user's intended destination. */
.xwui-shell-drop-ghost-target {
    background: color-mix(in srgb, var(--accent-color, currentColor) 35%, transparent);
    border: 3px solid var(--accent-color, currentColor);
    box-shadow: 0 0 24px color-mix(in srgb, var(--accent-color, currentColor) 50%, transparent);
}

/* Source ghost — where the DISPLACED part will land (i.e. the slot the
   dragged part is leaving). Neutral tone so the user can tell it apart
   from the active destination. */
.xwui-shell-drop-ghost-source {
    background: color-mix(in srgb, var(--text-secondary, #888) 18%, transparent);
    border: 2px dashed var(--text-secondary, #888);
}

/* The "{from-slot} → here" label, rendered via ::after. JS sets
   `data-from-slot` and `data-to-slot` so the label can describe the
   move concretely. */
.xwui-shell-drop-ghost::after {
    content: attr(data-from-slot) ' → here';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    padding: 6px 14px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
}
.xwui-shell-drop-ghost-target::after {
    background: var(--accent-color, currentColor);
}
.xwui-shell-drop-ghost-source::after {
    background: var(--text-secondary, #555);
}

@keyframes xwui-shell-drop-ghost-in {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Body-row shadow ───────────────────────────────────────────────────────
   A positions-only overlay covering the body-row grid cell. Used by callers
   that need a real positioned ancestor (XWUIShellApp's splitter / mobile
   backdrop / ResizeObserver). It is `pointer-events: none` so it never
   intercepts clicks — children re-enable pointer-events as needed. */
.xwui-shell-bodyrow-shadow {
    position: absolute;
    grid-area: first / first / last / last; /* spans the middle row's three columns */
    inset-block:
        var(--xwui-shell-header-size, 0)
        var(--xwui-shell-footer-size, 0);
    inset-inline: 0;
    pointer-events: none;
}
.xwui-shell-bodyrow-shadow > * {
    pointer-events: auto;
}

/* basic/XWUIShellPart/XWUIShellPart.css */
/**
 * XWUIShellPart Component Styles
 * Structure + interaction only — colours come from theme CSS variables.
 *
 * Everything is keyed off `data-anchor`, `data-presence`, `data-flow`,
 * `data-divider` attributes on the root so state flips never require a
 * re-render — toggling the JS axis just flips the attribute.
 *
 * The 5-region outer layout lives in `XWUIShell.css`. This file styles the
 * intrinsic behaviour of ONE part regardless of which slot it ends up in.
 */

/* ── Root ──────────────────────────────────────────────────────────────────*/
.xwui-shell-part {
    display: block;
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
    /* Fluid presence transitions. Width / height animate when the size var
       flips (visible → collapsed → visible); opacity gives a soft fade.
       `display: none` (hidden) is non-transitionable — the edge-tab
       restore affordance covers the "bring it back" UX instead. */
    transition: width 220ms ease, height 220ms ease, opacity 180ms ease;
}

/* ── Presence axis ─────────────────────────────────────────────────────────*/
/* `hidden` — removed from layout entirely. The XWUIShell's grid var also
   zeros the slot's track size so the gap doesn't linger. */
.xwui-shell-part[data-presence="hidden"] {
    display: none;
}

/* `collapsed` — condensed track size. Sidebar parts collapse to an icon-rail
   width; header / footer parts collapse to a 40px strip. The shell can
   override the per-anchor default via its own `--xwui-shell-part-collapsed-*`
   vars set at the shell-root level. */
/* `max-width`/`max-height` (not just width/height) is what actually clamps the
   rail: the collapsed content keeps its layout box (`visibility: hidden`, not
   removed), so as a grid item the part is sized up to that content's width and
   `width` alone is ignored. The max- caps hard-clip it to the rail size; the
   part's `overflow: hidden` then clips the now-hidden content. */
.xwui-shell-part[data-presence="collapsed"][data-anchor="start"],
.xwui-shell-part[data-presence="collapsed"][data-anchor="end"] {
    width: var(--xwui-shell-part-collapsed-w, 40px) !important;
    max-width: var(--xwui-shell-part-collapsed-w, 40px) !important;
}
.xwui-shell-part[data-presence="collapsed"][data-anchor="top"],
.xwui-shell-part[data-presence="collapsed"][data-anchor="bottom"] {
    height: var(--xwui-shell-part-collapsed-h, 40px) !important;
    max-height: var(--xwui-shell-part-collapsed-h, 40px) !important;
}
/* In collapsed mode the regular content slot is hidden — only the
   controls strip (with the toggle button now showing the "restore"
   chevron) remains visible. Otherwise the cramped column would crop the
   consumer's content awkwardly. */
.xwui-shell-part[data-presence="collapsed"] > .xwui-shell-part-content {
    visibility: hidden;
}
/* …and the controls strip re-centers itself in the cramped collapsed
   rail so the toggle button is the obvious tap target. Also OVERRIDE
   the hover-only opacity rule from the controls block — when collapsed,
   the toggle button is the only affordance the user has to come back. */
.xwui-shell-part[data-presence="collapsed"] > .xwui-shell-part-controls {
    inset: 0;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    opacity: 1;
    transform: none;
}
/* When collapsed, only the toggle (now showing the "restore" chevron) is
   meaningful. The close-X and drag-swap buttons would just clutter the
   40px rail — hide them. */
.xwui-shell-part[data-presence="collapsed"] [data-control="close"],
.xwui-shell-part[data-presence="collapsed"] [data-control="drag"] {
    display: none;
}

/* `expanded` — the part SPILLS outside its grid slot. The track-template
   change happens in XWUIShell.css (driven by `data-{slot}-presence` on the
   shell root); the part itself just opts into an `--xwui-shell-part-expanded`
   marker hook for any component-level styling. */
.xwui-shell-part[data-presence="expanded"] {
    --xwui-shell-part-expanded: 1;
}

/* ── Flow axis ─────────────────────────────────────────────────────────────*/
/* `floating` — lifted out of the grid flow and pinned to the shell's edge
   that this part's anchor points to. The shell root provides the
   `position: relative` containing block; the part itself slides in from
   its anchor edge via a transform transition. The accompanying backdrop
   is the shell's `.xwui-shell-floating-backdrop` (in-shell, scoped). */
.xwui-shell-part[data-flow="floating"] {
    position: absolute;
    z-index: 5;
    /* Span the entire shell grid so the part can dock to any shell edge —
       NOT just the edges of the slot it originally occupied. Without this,
       a `start`-anchored part floating from the `first` column would only
       reach the body-row's vertical span (header + footer would still be
       visible above / below it). `1 / 1 / -1 / -1` covers all rows + cols. */
    grid-area: 1 / 1 / -1 / -1;
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.18),
        0 4px 10px rgba(0, 0, 0, 0.12);
    background: var(--bg-primary, #fff);
    transition: transform 220ms ease;
}
/* Start anchor — slides in from the start (LTR: left) edge. In RTL the
   shell's `direction: rtl` keeps the anchor on the right naturally, but
   for the absolute-positioned floating mode we use logical insets so the
   browser handles the flip for us. */
.xwui-shell-part[data-flow="floating"][data-anchor="start"] {
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: var(--xwui-shell-part-floating-w, 320px);
}
.xwui-shell-part[data-flow="floating"][data-anchor="end"] {
    top: 0;
    bottom: 0;
    inset-inline-end: 0;
    width: var(--xwui-shell-part-floating-w, 320px);
}
.xwui-shell-part[data-flow="floating"][data-anchor="top"] {
    top: 0;
    left: 0;
    right: 0;
    height: var(--xwui-shell-part-floating-h, 30vh);
}
.xwui-shell-part[data-flow="floating"][data-anchor="bottom"] {
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--xwui-shell-part-floating-h, 30vh);
}

/* `sliding` — a NON-modal drawer (unlike `floating`, no backdrop). The part is
   absolutely anchored to its edge and slides off-screen via `transform` when
   hidden, so show/hide animates instead of snapping with `display: none`. */
.xwui-shell-part[data-flow="sliding"] {
    position: absolute;
    z-index: 6;
    background: var(--bg-elevated, var(--bg-app, #ffffff));
    box-shadow: 0 8px 30px -8px rgba(0, 0, 0, 0.30);
    transition: transform 240ms ease, opacity 240ms ease;
}
.xwui-shell-part[data-flow="sliding"][data-anchor="start"]  { inset-block: 0; inset-inline-start: 0; }
.xwui-shell-part[data-flow="sliding"][data-anchor="end"]    { inset-block: 0; inset-inline-end: 0; }
.xwui-shell-part[data-flow="sliding"][data-anchor="top"]    { inset-inline: 0; inset-block-start: 0; }
.xwui-shell-part[data-flow="sliding"][data-anchor="bottom"] { inset-inline: 0; inset-block-end: 0; }

/* When hidden, keep it in the DOM and slide it off its edge (override the
   generic `display: none` so the exit can transition). */
.xwui-shell-part[data-flow="sliding"][data-presence="hidden"] {
    display: block;
    opacity: 0;
    pointer-events: none;
}
.xwui-shell-part[data-flow="sliding"][data-presence="hidden"][data-anchor="start"]  { transform: translateX(-105%); }
.xwui-shell-part[data-flow="sliding"][data-presence="hidden"][data-anchor="end"]    { transform: translateX(105%); }
.xwui-shell-part[data-flow="sliding"][data-presence="hidden"][data-anchor="top"]    { transform: translateY(-105%); }
.xwui-shell-part[data-flow="sliding"][data-presence="hidden"][data-anchor="bottom"] { transform: translateY(105%); }
/* RTL flips the inline-axis drawers. */
[dir="rtl"] .xwui-shell-part[data-flow="sliding"][data-presence="hidden"][data-anchor="start"] { transform: translateX(105%); }
[dir="rtl"] .xwui-shell-part[data-flow="sliding"][data-presence="hidden"][data-anchor="end"]   { transform: translateX(-105%); }

/* `pinned` — `position: sticky` against the nearest scrolling ancestor.
   The pinned part stays at its anchor edge while the surrounding content
   scrolls past. For this to be observable, the part's scrolling ancestor
   (usually the shell root or `.demo-frame`) must be scrollable (`overflow:
   auto/scroll`) AND the content inside the scroll context must overflow.
   The tester exposes both knobs (`Parent size` and `Body content` inputs)
   plus a `Shell overflow` toggle so users can exercise this combination.
   align-self/justify-self pins the part to the start of its grid cell so
   sticky can compute the correct offset. */
.xwui-shell-part[data-flow="pinned"] {
    position: sticky;
}
.xwui-shell-part[data-flow="pinned"][data-anchor="top"]    { top: 0; }
.xwui-shell-part[data-flow="pinned"][data-anchor="bottom"] { bottom: 0; }
.xwui-shell-part[data-flow="pinned"][data-anchor="start"] {
    inset-inline-start: 0;
    top: 0;
    align-self: start;
    height: max-content;
    min-height: 100%;
}
.xwui-shell-part[data-flow="pinned"][data-anchor="end"] {
    inset-inline-end: 0;
    top: 0;
    align-self: start;
    height: max-content;
    min-height: 100%;
}

/* ── Content slot ──────────────────────────────────────────────────────────*/
.xwui-shell-part-content {
    width: 100%;
    height: 100%;
    overflow: auto;
    box-sizing: border-box;
}
/* A part typically holds ONE wrapper element (a sidebar's `<aside>`, the
   main's `<XWUIPanel>`, etc.) — stretch it to fill the content slot so the
   wrapper inherits the part's grid-cell height without needing `height:100%`
   on every consumer. Falls back to natural height when the slot holds
   multiple children (text, fragments, etc.). */
.xwui-shell-part-content > *:only-child {
    height: 100%;
    box-sizing: border-box;
}

/* ── Resize handle ─────────────────────────────────────────────────────────
   An 8px-thick draggable strip on the inner edge of the part. The exact edge
   depends on which side the part is docked against. `start` = trailing edge,
   `end` = leading edge, etc. Center-anchored parts never get a handle (no
   meaningful edge — XWUIShellPart.ts gates this in JS too). The handle is
   the pointer target; the composed `XWUISeparator` inside it gives the
   visible line + ARIA + theming. */
.xwui-shell-part-handle {
    position: absolute;
    background: transparent;
    z-index: 4;
    /* Subtle hover affordance for sighted users. */
    transition: background-color 120ms ease;
    touch-action: none; /* Stops the browser from scrolling on touch-drag. */
}
/* A VISIBLE divider line at rest (centered in the 8px grab strip) so a
   resizable edge is obviously draggable — the handle used to be transparent
   until hover, which hid the resize affordance entirely. Bolds to the accent
   colour (plus a soft glow) on hover / while dragging. */
.xwui-shell-part-handle::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    background: color-mix(in srgb, var(--text-primary, #64748b) 32%, transparent);
    border-radius: 2px;
    transition: background-color 120ms ease, box-shadow 120ms ease;
}
.xwui-shell-part[data-anchor="start"] > .xwui-shell-part-handle::before,
.xwui-shell-part[data-anchor="end"]   > .xwui-shell-part-handle::before { width: 2px; height: 100%; }
.xwui-shell-part[data-anchor="top"]   > .xwui-shell-part-handle::before,
.xwui-shell-part[data-anchor="bottom"] > .xwui-shell-part-handle::before { width: 100%; height: 2px; }
.xwui-shell-part-handle:hover::before,
.xwui-shell-part-handle-dragging::before {
    background: var(--accent-primary, #3b82f6);
    box-shadow: 0 0 0 1px var(--accent-primary, #3b82f6);
}
/* The composed separator would double the line; the ::before above is the
   visible affordance (the separator stays for ARIA / pointer-target). */
.xwui-shell-part-handle .xwui-shell-part-separator { opacity: 0; }
.xwui-shell-part-handle:hover {
    background: color-mix(in srgb, var(--accent-color, var(--border-color, currentColor)) 12%, transparent);
}
.xwui-shell-part-handle:focus-visible {
    outline: 2px solid var(--accent-color, currentColor);
    outline-offset: -2px;
}
.xwui-shell-part-handle-dragging {
    background: color-mix(in srgb, var(--accent-color, var(--border-color, currentColor)) 45%, transparent);
}

/* The composed XWUISeparator inside the handle fills the handle's box so the
   user actually sees the divider line where the drag target is. */
.xwui-shell-part-handle .xwui-shell-part-separator {
    width: 100%;
    height: 100%;
    pointer-events: none; /* The handle catches the events. */
}

/* Anchor-specific edge positioning + cursor. */
.xwui-shell-part[data-anchor="start"] > .xwui-shell-part-handle {
    top: 0;
    bottom: 0;
    right: 0;
    width: 8px;
    cursor: col-resize;
}
.xwui-shell-part[data-anchor="end"] > .xwui-shell-part-handle {
    top: 0;
    bottom: 0;
    left: 0;
    width: 8px;
    cursor: col-resize;
}
.xwui-shell-part[data-anchor="top"] > .xwui-shell-part-handle {
    left: 0;
    right: 0;
    bottom: 0;
    height: 8px;
    cursor: row-resize;
}
.xwui-shell-part[data-anchor="bottom"] > .xwui-shell-part-handle {
    left: 0;
    right: 0;
    top: 0;
    height: 8px;
    cursor: row-resize;
}

/* ── Controls strip ────────────────────────────────────────────────────────
   A small icon row pinned to the inner edge of the part with the toggle /
   close / drag-to-swap buttons. INTENTIONALLY HIDDEN until the user hovers
   (or focuses into) the part — these are chrome affordances, not part of
   the consumer's content, so they shouldn't be visible permanently. They
   reveal with a 120ms opacity fade for a polished feel.

   Why opacity (not display) — the buttons need a non-zero bounding rect for
   keyboard focus / accessibility, and toggling display breaks the fade. */
.xwui-shell-part-controls {
    position: absolute;
    z-index: 6;
    display: flex;
    gap: 0.1rem;
    padding: 0.15rem 0.25rem;
    pointer-events: none; /* Buttons re-enable their own. */
    /* Subtle scrim so the icons read on any content underneath. */
    background: color-mix(in srgb, var(--bg-primary, #fff) 80%, transparent);
    backdrop-filter: blur(4px);
    border-radius: 6px;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 120ms ease, transform 120ms ease;
}
/* Reveal on hover / focus / while drag-swap is in progress. */
.xwui-shell-part:hover           > .xwui-shell-part-controls,
.xwui-shell-part:focus-within    > .xwui-shell-part-controls,
.xwui-shell-part-swapping        > .xwui-shell-part-controls {
    opacity: 1;
    transform: translateY(0);
}
.xwui-shell-part-controls > * {
    pointer-events: auto;
}
/* Positions use LOGICAL insets so the strip flips to the mirrored side under
   RTL automatically (it was pinned to the physical right before, so it stayed
   put when the writing direction flipped). The flex row also reverses its icon
   order in an RTL context — see the row-direction note below. */
/* Top / bottom anchors: strip lives at the inline-end of the part's edge. */
.xwui-shell-part-controls[data-anchor="top"]    { top: 4px;    inset-inline-end: 4px; }
.xwui-shell-part-controls[data-anchor="bottom"] { bottom: 4px; inset-inline-end: 4px; }
/* Start / end anchors: strip nestles in the inner corner so it doesn't
   overlap the divider handle on the outer edge. `start` parts' inner edge is
   the inline-end (trailing) side; `end` parts' inner edge is the inline-start. */
.xwui-shell-part-controls[data-anchor="start"]  { top: 4px; inset-inline-end: 12px; }
.xwui-shell-part-controls[data-anchor="end"]    { top: 4px; inset-inline-start: 12px; }
.xwui-shell-part-controls[data-anchor="center"] { top: 4px; inset-inline-end: 4px; }

/* Trim the icon buttons inside the strip so they're discreet. */
.xwui-shell-part-controls .xwui-button-container .xwui-button {
    min-width: 0;
    padding: 2px;
    height: 20px;
    width: 20px;
}
.xwui-shell-part-controls .xwui-button-container .xwui-button .xwui-icon {
    width: 14px;
    height: 14px;
}

/* ── Controls reveal mode (`controls` config → `data-controls` on the root) ──
   default / "hover" → reveal on hovering anywhere in the part (rule above).
   "always" → always shown.  "hidden" → never rendered visible.
   "edge"   → hidden until the pointer reaches the inner corner where the strip
              lives (the strip itself is the enlarged invisible hover target),
              so the toggle/close arrows stay out of the way until you go for
              them. Focus-within still reveals them for keyboard users. */
.xwui-shell-part[data-controls="always"] > .xwui-shell-part-controls {
    opacity: 1;
    transform: none;
}
/* `:not([data-presence="collapsed"])` — a collapsed part keeps its restore
   chevron even in `hidden` controls mode, otherwise there's no way to bring it
   back (a one-way trap). */
.xwui-shell-part[data-controls="hidden"]:not([data-presence="collapsed"]) > .xwui-shell-part-controls {
    display: none;
}
.xwui-shell-part[data-controls="edge"] > .xwui-shell-part-controls {
    pointer-events: auto;        /* hoverable while still invisible */
    padding: 10px 12px;          /* enlarge the corner hit zone */
}
.xwui-shell-part[data-controls="edge"]:hover > .xwui-shell-part-controls {
    opacity: 0;                  /* part-hover alone does NOT reveal in edge mode */
    transform: translateY(-2px);
}
.xwui-shell-part[data-controls="edge"] > .xwui-shell-part-controls:hover {
    opacity: 1;                  /* only reaching the corner strip reveals it */
    transform: none;
}

/* ── Visual state modifiers (frosted / transparent / shadow / elevated /
   bordered / minimized) ─────────────────────────────────────────────────────
   Orthogonal boolean looks, each toggled by a config flag. Most useful on
   sticky / floating / pinned parts (a frosted glass header floating over
   scrolling content), but valid on any part. Plain classes so they stack. */
.xwui-shell-part-frosted {
    background: color-mix(in srgb, var(--bg-elevated, var(--bg-app, #ffffff)) 65%, transparent);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    backdrop-filter: blur(10px) saturate(1.4);
}
.xwui-shell-part-transparent {
    background: transparent;
}
.xwui-shell-part-shadow {
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.28);
}
.xwui-shell-part-elevated {
    box-shadow: 0 14px 36px -8px rgba(0, 0, 0, 0.42), 0 4px 12px -4px rgba(0, 0, 0, 0.24);
}
.xwui-shell-part-bordered {
    border: 1px solid var(--border-color, #e2e8f0);
}
/* `minimized` — a compact "peek": the part shrinks to a slim strip on its
   axis and clips the overflow, WITHOUT hiding its content the way `collapsed`
   does. Sizes overridable via the part-minimized vars. */
.xwui-shell-part-minimized[data-anchor="top"],
.xwui-shell-part-minimized[data-anchor="bottom"] {
    height: var(--xwui-shell-part-minimized-h, 44px) !important;
}
.xwui-shell-part-minimized[data-anchor="start"],
.xwui-shell-part-minimized[data-anchor="end"] {
    width: var(--xwui-shell-part-minimized-w, 56px) !important;
}

/* ── Edge reveal trigger (`trigger: 'edge'`) ────────────────────────────────
   An invisible hover strip pinned to the part's anchor edge of its parent;
   `pointerenter` reveals a hidden/collapsed part (auto-hide dock pattern). The
   JS appends it to the part's parent and tags it with the part's `data-anchor`. */
.xwui-shell-part-edge-trigger {
    position: absolute;
    z-index: 5;
    /* A thin sliver — wide enough to hit with the pointer, invisible. */
}
.xwui-shell-part-edge-trigger[data-anchor="start"]  { top: 0; bottom: 0; left: 0;   width: 8px; }
.xwui-shell-part-edge-trigger[data-anchor="end"]    { top: 0; bottom: 0; right: 0;  width: 8px; }
.xwui-shell-part-edge-trigger[data-anchor="top"]    { left: 0; right: 0; top: 0;    height: 8px; }
.xwui-shell-part-edge-trigger[data-anchor="bottom"] { left: 0; right: 0; bottom: 0; height: 8px; }
.xwui-shell-part-edge-trigger[data-anchor="center"] { display: none; }

/* ── Drag-to-swap visuals ──────────────────────────────────────────────────
   While the user is dragging a part's swap button, the part itself follows
   the cursor (via two CSS vars updated by the JS handler) and the candidate
   drop target lights up with a dashed outline. */
.xwui-shell-part-swapping {
    transform: translate(
        var(--xwui-shell-part-swap-dx, 0),
        var(--xwui-shell-part-swap-dy, 0)
    );
    opacity: 0.7;
    z-index: 20;
    pointer-events: none;
    transition: opacity 100ms ease;
}
/* Legacy single-target highlight from the pre-zone drag-swap path. The
   shell now drives a `.xwui-shell-drop-indicator` overlay that's
   anchor-zone-aware (see XWUIShell.css). We leave the class no-op so
   external consumers wired against the old behavior don't break, but
   the visible affordance is the indicator, not this outline. */
.xwui-shell-part-swap-target { /* intentionally empty */ }

/* While the user is actively dragging a handle, suppress pointer-event /
   selection noise from the rest of the shell. The shell-root may also add
   its own `.xwui-shell-dragging` class for the same purpose. */
.xwui-shell-part-dragging,
.xwui-shell-part-dragging * {
    user-select: none;
}

/* While the part is being drag-swapped, force EVERY descendant to opt out
   of hit-testing — including the controls strip whose children normally
   have `pointer-events: auto`. Without this, `document.elementFromPoint`
   would keep hitting the drag-handle icon inside the source part itself,
   and `closest('.xwui-shell-part')` would resolve to the dragged source
   no matter where the cursor is — causing the zone detection to stick. */
.xwui-shell-part-swapping,
.xwui-shell-part-swapping * {
    pointer-events: none !important;
}

/* ── Reduced motion ───────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
    .xwui-shell-part,
    .xwui-shell-part-handle {
        transition: none !important;
    }
}

/* basic/XWUIShipmentCard/XWUIShipmentCard.css */
/* XWUIShipmentCard - logistics shipment / parcel summary card */

.xwui-shipment-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.875rem 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-color, transparent);
  border-radius: var(--radius-md, 8px);
  color: var(--text-primary);
  font-family: var(--font-body, inherit);
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.xwui-shipment-card-default  { background: var(--bg-primary); border-color: transparent; }
.xwui-shipment-card-outlined { background: var(--bg-primary); border-color: var(--border-color); }
.xwui-shipment-card-elevated { background: var(--bg-elevated); border-color: transparent; box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.06)); }
.xwui-shipment-card-filled   { background: var(--bg-secondary); border-color: transparent; }

:is(.xwui-shipment-card-s,.xwui-shipment-card-sm) { gap: 0.375rem; padding: 0.5rem 0.625rem; font-size: 0.875rem; }
:is(.xwui-shipment-card-m,.xwui-shipment-card-md) { gap: 0.5rem;   padding: 0.875rem 1rem;   font-size: 0.9375rem; }
:is(.xwui-shipment-card-l,.xwui-shipment-card-lg) { gap: 0.625rem; padding: 1.125rem 1.25rem; font-size: 1rem; }

.xwui-shipment-card-compact { gap: 0.25rem; padding: 0.5rem 0.75rem; }
.xwui-shipment-card-compact .xwui-shipment-card-meta,
.xwui-shipment-card-compact .xwui-shipment-card-tags,
.xwui-shipment-card-compact .xwui-shipment-card-last { display: none; }

.xwui-shipment-card-hoverable:hover { background: var(--bg-hover); border-color: var(--border-color); }
.xwui-shipment-card-clickable      { cursor: pointer; user-select: none; }
.xwui-shipment-card-clickable:active { background: var(--bg-active); }
.xwui-shipment-card-clickable:focus-visible { outline: 2px solid var(--role-primary-bg, #1d4ed8); outline-offset: 2px; }

/* Status-driven left strip — uses --role-*-bg (the actual hue token) */
.xwui-shipment-card-status-label-created    { border-left-color: var(--text-tertiary, #888); }
.xwui-shipment-card-status-picked-up        { border-left-color: var(--role-info-bg, #0369a1); }
.xwui-shipment-card-status-in-transit       { border-left-color: var(--role-info-bg, #0369a1); }
.xwui-shipment-card-status-at-hub           { border-left-color: var(--role-info-bg, #0369a1); }
.xwui-shipment-card-status-out-for-delivery { border-left-color: var(--role-warning-bg, #fbbf24); }
.xwui-shipment-card-status-delivered        { border-left-color: var(--role-success-bg, #15803d); }
.xwui-shipment-card-status-delivery-attempt { border-left-color: var(--role-warning-bg, #fbbf24); }
.xwui-shipment-card-status-returned         { border-left-color: var(--role-danger-bg, #b91c1c); }
.xwui-shipment-card-status-exception        { border-left-color: var(--role-danger-bg, #b91c1c); }
.xwui-shipment-card-status-cancelled        { border-left-color: var(--role-danger-bg, #b91c1c); opacity: 0.85; }

/* Header */
.xwui-shipment-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.8125em;
}
.xwui-shipment-card-carrier {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  background: var(--bg-elevated);
  padding: 0.125rem 0.5rem;
  border-radius: 3px;
}
.xwui-shipment-card-tracking {
  font-family: var(--font-mono, ui-monospace, 'SF Mono', Menlo, Consolas, monospace);
  font-size: 0.875em;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.xwui-shipment-card-service { display: inline-flex; }
.xwui-shipment-card-status {
  margin-left: auto;
  display: inline-flex;
}

/* Route */
.xwui-shipment-card-route {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0;
}
.xwui-shipment-card-route-end {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
}
.xwui-shipment-card-route-end-destination { justify-content: flex-end; text-align: right; }
.xwui-shipment-card-route-end-destination .xwui-shipment-card-route-text { text-align: right; }

.xwui-shipment-card-route-dot {
  width: 0.625rem; height: 0.625rem;
  border-radius: 999px;
  flex-shrink: 0;
}
.xwui-shipment-card-route-dot-origin      { background: var(--role-info-bg, #0369a1); }
.xwui-shipment-card-route-dot-destination { background: var(--role-success-bg, #15803d); }

.xwui-shipment-card-route-text { min-width: 0; }
.xwui-shipment-card-route-name {
  font-size: 0.8125em;
  color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.xwui-shipment-card-route-loc {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.xwui-shipment-card-route-arrow {
  color: var(--text-tertiary);
  font-size: 1.25em;
}

/* ETA row */
.xwui-shipment-card-eta {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-top: 0.25rem;
  border-top: 1px solid var(--border-light, var(--border-color));
}
.xwui-shipment-card-eta-label {
  font-size: 0.6875em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  font-weight: 600;
}
.xwui-shipment-card-eta-value {
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.xwui-shipment-card-delay {
  margin-left: auto;
  font-size: 0.75em;
  font-weight: 600;
  color: var(--role-danger-bg, #b91c1c);
}

/* Meta + tags + last update */
.xwui-shipment-card-meta {
  font-size: 0.75em;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.xwui-shipment-card-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.xwui-shipment-card-last {
  font-size: 0.6875em;
  color: var(--text-tertiary);
  font-style: italic;
}

/* basic/XWUIShortcuts/XWUIShortcuts.css */
/**
 * XWUIShortcuts Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Roundness: theme/roundness/*.css
 * - Typography: theme/typography/*.css
 */

.xwui-shortcuts {
    /* Component is invisible, just handles events */
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.xwui-shortcuts:focus-within {
    /* Active when focused */
    outline: none;
}


/* basic/XWUISidebar/XWUISidebar.css */
/**
 * XWUISidebar Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/sidebar/*.css (component-specific border widths)
 * - Roundness: theme/roundness/sidebar/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-sidebar {
    position: relative;
    height: 100%;
    background: var(--bg-primary);
    border-right: var(--border-sidebar-width, var(--border-width-regular, 1.5px)) var(--border-sidebar-style, solid) var(--border-sidebar-color, var(--border-color));
    display: flex;
    flex-direction: column;
    transition: width 0.3s ease;
}

.xwui-sidebar-right {
    border-right: none;
    border-left: var(--border-sidebar-width, var(--border-width-regular, 1.5px)) var(--border-sidebar-style, solid) var(--border-sidebar-color, var(--border-color));
}

.xwui-sidebar-header {
    padding: var(--spacing-md, 1rem);
    border-bottom: var(--border-sidebar-width, var(--border-width-regular, 1.5px)) var(--border-sidebar-style, solid) var(--border-sidebar-color, var(--border-color));
}

.xwui-sidebar-toggle {
    position: absolute;
    top: var(--spacing-md, 1rem);
    right: -12px;
    width: 24px;
    height: 24px;
    border: var(--border-sidebar-width, var(--border-width-regular, 1.5px)) var(--border-sidebar-style, solid) var(--border-sidebar-color, var(--border-color));
    background: var(--bg-primary);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.2s;
}

.xwui-sidebar-toggle:hover {
    background: var(--bg-secondary);
    box-shadow: var(--shadow-sm);
}

.xwui-sidebar-right .xwui-sidebar-toggle {
    right: auto;
    left: -12px;
}

.xwui-sidebar-menu {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-sm, 0.5rem);
}

.xwui-sidebar-footer {
    padding: var(--spacing-md, 1rem);
    border-top: var(--border-sidebar-width, var(--border-width-regular, 1.5px)) var(--border-sidebar-style, solid) var(--border-sidebar-color, var(--border-color));
}

.xwui-sidebar-collapsed .xwui-sidebar-header,
.xwui-sidebar-collapsed .xwui-sidebar-footer {
    padding: var(--spacing-sm, 0.5rem);
    text-align: center;
}


/* basic/XWUISignaturePad/XWUISignaturePad.css */
/**
 * XWUISignaturePad Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 */

.xwui-signature-pad-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.xwui-signature-pad {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--bg-primary, #ffffff);
    border: var(--border-width-regular, 1px) solid var(--border-color, #e0e0e0);
    border-radius: var(--radius-md, 8px);
}

/* Canvas */
.xwui-signature-pad-canvas {
    width: 100%;
    height: 300px;
    border: var(--border-width-regular, 1px) solid var(--border-color, #e0e0e0);
    border-radius: var(--radius-sm, 4px);
    cursor: crosshair;
    touch-action: none;
}

.xwui-signature-pad-canvas:active {
    cursor: crosshair;
}

/* Controls */
.xwui-signature-pad-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 0.5rem);
    padding: var(--spacing-sm, 0.75rem);
    border-top: var(--border-width-regular, 1px) solid var(--border-color, #e0e0e0);
    background: var(--bg-secondary, #f8f9fa);
}


/* basic/XWUISkeleton/XWUISkeleton.css */
/**
 * XWUISkeleton Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Roundness: theme/roundness/skeleton/*.css (component-specific roundness)
 */

.xwui-skeleton-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.5rem);
}

.xwui-skeleton {
    /* Use dedicated skeleton color variable for theme-aware contrast */
    /* Falls back to bg-active, then to a medium gray */
    background: var(--skeleton-bg, var(--bg-active, #d0d0d0));
}

/* Variants */
.xwui-skeleton-text {
    border-radius: var(--radius-skeleton, var(--radius-xs, 4px));
}

.xwui-skeleton-circular {
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.xwui-skeleton-rectangular {
    border-radius: 0;
    width: 100%;
    height: 120px;
}

.xwui-skeleton-rounded {
    border-radius: var(--radius-skeleton, var(--radius-md, 8px));
    width: 100%;
    height: 120px;
}

/* Pulse animation */
.xwui-skeleton-pulse {
    animation: xwui-skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes xwui-skeleton-pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

/* Wave animation */
.xwui-skeleton-wave {
    position: relative;
    overflow: hidden;
}

.xwui-skeleton-wave::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        var(--bg-elevated),
        transparent
    );
    animation: xwui-skeleton-wave 1.5s linear infinite;
}

@keyframes xwui-skeleton-wave {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* No animation */
.xwui-skeleton-none {
    animation: none;
}

/* Preset compositions */
.xwui-skeleton-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.75rem);
}

.xwui-skeleton-avatar-text {
    display: flex;
    gap: var(--spacing-md, 1rem);
    align-items: center;
}

/* Preset-specific compositions */
.xwui-skeleton-preset-button {
    display: inline-flex;
}

.xwui-skeleton-preset-table {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.5rem);
}

.xwui-skeleton-preset-article {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.75rem);
}

.xwui-skeleton-preset-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.75rem);
}

.xwui-skeleton-preset-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.75rem);
}

.xwui-skeleton-preset-form {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 1rem);
}

.xwui-skeleton-preset-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 1rem);
}

.xwui-skeleton-preset-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.75rem);
    padding: var(--spacing-md, 1rem);
}

.xwui-skeleton-preset-footer {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.75rem);
}

.xwui-skeleton-preset-menu {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.5rem);
}

.xwui-skeleton-preset-avatar {
    display: inline-flex;
}

.xwui-skeleton-preset-image {
    display: block;
}

.xwui-skeleton-preset-video {
    display: block;
    aspect-ratio: 16 / 9;
}

.xwui-skeleton-preset-chart {
    display: block;
}

.xwui-skeleton-preset-code {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.5rem);
    font-family: monospace;
}

.xwui-skeleton-preset-badge {
    display: inline-flex;
}

.xwui-skeleton-preset-input {
    display: block;
}

.xwui-skeleton-preset-textarea {
    display: block;
}

.xwui-skeleton-preset-select {
    display: block;
}

.xwui-skeleton-preset-checkbox {
    display: inline-flex;
}

.xwui-skeleton-preset-radio {
    display: inline-flex;
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */


/* basic/XWUISkipLink/XWUISkipLink.css */
/**
 * XWUISkipLink Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Roundness: theme/roundness/rounded.css (global roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-skiplink {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 10000;
    padding: var(--spacing-sm, 0.75rem) var(--spacing-md, 1rem);
    background: var(--bg-primary);
    border: var(--border-skiplink-width, var(--border-width-regular, 1.5px)) var(--border-skiplink-style, solid) var(--border-skiplink-color, var(--border-color));
    border-radius: var(--radius-skiplink, var(--radius-xs, 4px));
    text-decoration: none;
    font-weight: var(--font-weight-semibold, 600);
    transition: top 0.2s;
}

.xwui-skiplink:focus {
    top: var(--spacing-sm, 0.5rem);
    left: var(--spacing-sm, 0.5rem);
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}


/* basic/XWUISlider/XWUISlider.css */
/**
 * XWUISlider Component Styles - Production Quality
 * 100% Styles System Integration
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Theme: theme/roundness/slider/*.css (MANDATORY - provides slider roundness variables)
 * - Typography: theme/typography/*.css
 */

/* ============================================
   WRAPPER
   ============================================ */
.xwui-slider {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    width: 100%;
    font-family: var(--font-family-base);
}

/* Label */
.xwui-slider__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary, var(--control-text));
    margin-bottom: var(--spacing-xs);
}

/* Title/Direction label */
.xwui-slider__title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-inverse, #ffffff);
    text-align: center;
    margin-bottom: var(--spacing-xs);
    padding: var(--spacing-xs);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.xwui-slider--vertical .xwui-slider__title {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    margin-bottom: 0;
    margin-right: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-xs);
}

/* ============================================
   CONTAINER & TRACK WRAPPER
   ============================================ */
.xwui-slider__container {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.xwui-slider__icons {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
}

.xwui-slider__track-wrapper {
    flex: 1;
    position: relative;
    padding: var(--spacing-sm) 0;
}

/* Icon */
.xwui-slider__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-inverse, #ffffff);
    font-size: var(--font-size-base);
    flex-shrink: 0;
}

/* Icon with better contrast - use white by default, allow override */
.xwui-slider__icon svg {
    color: var(--text-inverse, #ffffff);
    fill: currentColor;
    stroke: currentColor;
}

.xwui-slider--disabled .xwui-slider__icon {
    opacity: 0.5;
}

/* ============================================
   RAIL & TRACK
   ============================================ */
.xwui-slider__rail {
    position: relative;
    width: 100%;
    height: 100%;
}

.xwui-slider__track {
    position: relative;
    width: 100%;
    /* The inactive rail must stay visible in BOTH light and dark themes.
       `--bg-secondary` resolves to a near-white fill in light mode (invisible
       on a light surface), so derive a guaranteed-contrast neutral from the
       text colour — ~28% of the text ink reads as a clear mid-grey on light
       backgrounds and a light grey on dark ones. */
    background: var(--bg-track, color-mix(in srgb, var(--text-primary, #334155) 28%, transparent));
    border-radius: var(--radius-slider-track, var(--radius-control, var(--radius-sm)));
    cursor: pointer;
    touch-action: none;
    user-select: none;
}

/* Size variants - Track height */
.xwui-slider--small .xwui-slider__track {
    height: 4px;
}

.xwui-slider--medium .xwui-slider__track {
    height: 6px;
}

.xwui-slider--large .xwui-slider__track {
    height: 8px;
}

/* Vertical orientation - ensure parent container has height */
:has(> .xwui-slider--vertical) {
    height: 100%;
    display: flex;
    align-items: stretch;
}

.xwui-slider--vertical {
    flex-direction: row;
    align-items: stretch;
    height: 100%;
    width: auto;
    min-height: 200px;
}

.xwui-slider--vertical .xwui-slider__label {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    margin-bottom: 0;
    margin-right: var(--spacing-xs);
    flex-shrink: 0;
}

.xwui-slider--vertical .xwui-slider__container {
    flex-direction: column;
    width: auto;
    height: 100%;
    min-height: 200px;
}

.xwui-slider--vertical .xwui-slider__icons {
    flex-direction: column;
    width: auto;
    height: 100%;
}

.xwui-slider--vertical .xwui-slider__track-wrapper {
    height: 100%;
    width: auto;
    padding: 0 var(--spacing-sm);
    flex: 1;
}

.xwui-slider--vertical .xwui-slider__rail {
    height: 100%;
    width: auto;
}

.xwui-slider--vertical .xwui-slider__track {
    width: 6px;
    height: 100%;
}

.xwui-slider--vertical.xwui-slider--small .xwui-slider__track {
    width: 4px;
}

.xwui-slider--vertical.xwui-slider--large .xwui-slider__track {
    width: 8px;
}

/* ============================================
   FILL (Active portion)
   ============================================ */
.xwui-slider__fill {
    position: absolute;
    background: var(--accent-primary, var(--control-active));
    border-radius: var(--radius-slider-track, var(--radius-control, var(--radius-sm)));
    transition: all 0.2s ease;
    pointer-events: none;
}

/* Horizontal fill */
.xwui-slider__fill {
    left: 0;
    top: 0;
    height: 100%;
}

/* Vertical fill */
.xwui-slider--vertical .xwui-slider__fill {
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
}

/* Color variants */
.xwui-slider--primary .xwui-slider__fill {
    background: var(--accent-primary, var(--control-active));
    box-shadow: var(--glow-slider-track-active, none);
}

.xwui-slider--secondary .xwui-slider__fill {
    background: var(--accent-light, var(--accent-primary));
}

.xwui-slider--success .xwui-slider__fill {
    background: var(--accent-success);
}

.xwui-slider--warning .xwui-slider__fill {
    background: var(--accent-warning);
}

.xwui-slider--error .xwui-slider__fill {
    background: var(--accent-error);
}

.xwui-slider--info .xwui-slider__fill {
    background: var(--accent-primary, var(--control-active));
}

/* Inverted track */
.xwui-slider--track-inverted .xwui-slider__fill {
    background: var(--bg-secondary, var(--control-bg));
}

.xwui-slider--track-inverted.xwui-slider--primary .xwui-slider__fill {
    background: var(--accent-primary, var(--control-active));
    opacity: 0.3;
}

/* ============================================
   THUMB
   ============================================ */
.xwui-slider__thumb {
    position: absolute;
    background: var(--bg-primary, var(--control-bg));
    border: var(--border-width-thick) solid var(--accent-primary, var(--control-active));
    border-radius: var(--radius-slider-thumb, 50%);
    cursor: grab;
    transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
    z-index: 1;
    touch-action: none;
    user-select: none;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Resting shadow so the (light-filled) thumb keeps definition against a
       light rail/surface — without it the small thumb reads as invisible in
       light mode. Hover/active/focus shadows below still layer on top. */
    box-shadow: var(--shadow-slider-thumb, 0 1px 4px rgba(0, 0, 0, 0.28));
}

/* Size variants - Thumb */
.xwui-slider--small .xwui-slider__thumb {
    width: 14px;
    height: 14px;
}

.xwui-slider--medium .xwui-slider__thumb {
    width: 18px;
    height: 18px;
}

.xwui-slider--large .xwui-slider__thumb {
    width: 22px;
    height: 22px;
}

/* Horizontal thumb positioning */
.xwui-slider__thumb {
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Vertical thumb positioning */
.xwui-slider--vertical .xwui-slider__thumb {
    left: 50%;
    transform: translate(-50%, 50%);
}

/* Hover state */
.xwui-slider__thumb:hover:not(:disabled),
.xwui-slider__thumb--hovered {
    box-shadow: var(--glow-slider-thumb-hover, 0 0 0 8px var(--bg-hover, var(--control-bg-hover, rgba(0, 0, 0, 0.05))));
}

/* Focus state */
.xwui-slider__thumb:focus-visible {
    outline: var(--border-width-thick) solid var(--accent-primary, var(--control-active));
    outline-offset: 2px;
    box-shadow: var(--glow-slider-thumb-focus, 0 0 0 4px var(--accent-primary, rgba(79, 70, 229, 0.2)));
}

/* Active/Dragging state */
.xwui-slider__thumb--active {
    cursor: grabbing;
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: var(--glow-slider-thumb-active, 0 0 0 12px var(--bg-hover, var(--control-bg-hover, rgba(0, 0, 0, 0.08))));
    z-index: 2;
}

.xwui-slider--vertical .xwui-slider__thumb--active {
    transform: translate(-50%, 50%) scale(1.15);
}

/* Color variants - Thumb border */
.xwui-slider--primary .xwui-slider__thumb {
    border-color: var(--accent-primary, var(--control-active));
}

.xwui-slider--secondary .xwui-slider__thumb {
    border-color: var(--accent-light, var(--accent-primary));
}

.xwui-slider--success .xwui-slider__thumb {
    border-color: var(--accent-success);
}

.xwui-slider--warning .xwui-slider__thumb {
    border-color: var(--accent-warning);
}

.xwui-slider--error .xwui-slider__thumb {
    border-color: var(--accent-error);
}

.xwui-slider--info .xwui-slider__thumb {
    border-color: var(--accent-primary, var(--control-active));
}

/* ============================================
   THUMB CONTENT (Emoji/Shape/Image)
   ============================================ */
.xwui-slider__thumb-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0.75em;
    overflow: hidden;
}

.xwui-slider__thumb-content img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.xwui-slider__thumb-content svg {
    width: 100%;
    height: 100%;
}

/* Shape variants */
.xwui-slider__thumb-content--shape-square {
    border-radius: var(--radius-sm);
}

.xwui-slider__thumb-content--shape-diamond {
    border-radius: 0;
    transform: rotate(45deg);
}

/* Star shape is handled by content (emoji/SVG) */

/* ============================================
   HIDDEN NATIVE INPUT (Accessibility)
   ============================================ */
.xwui-slider__thumb input[type="range"] {
    /* Already styled inline, but ensure it's truly hidden */
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
}

/* ============================================
   TOOLTIP (Value Label) - Nested Structure
   ============================================ */
.xwui-slider__tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: var(--spacing-xs);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    z-index: 10;
}

/* Tooltip circle wrapper - Clear, prominent styling */
.xwui-slider__tooltip-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    background: var(--accent-primary, var(--control-active, #4f46e5));
    color: var(--text-inverse, #ffffff);
    border-radius: var(--radius-tooltip, var(--radius-sm));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--accent-primary, var(--control-active, #4f46e5));
    min-width: 24px;
    min-height: 24px;
}

/* Color variants for tooltip circle */
.xwui-slider--primary .xwui-slider__tooltip-circle {
    background: var(--accent-primary, var(--control-active, #4f46e5));
    border-color: var(--accent-primary, var(--control-active, #4f46e5));
    color: var(--text-inverse, #ffffff);
}

.xwui-slider--secondary .xwui-slider__tooltip-circle {
    background: var(--accent-light, var(--accent-primary, #6366f1));
    border-color: var(--accent-light, var(--accent-primary, #6366f1));
    color: var(--text-inverse, #ffffff);
}

.xwui-slider--success .xwui-slider__tooltip-circle {
    background: var(--accent-success, #10b981);
    border-color: var(--accent-success, #10b981);
    color: var(--text-inverse, #ffffff);
}

.xwui-slider--warning .xwui-slider__tooltip-circle {
    background: var(--accent-warning, #f59e0b);
    border-color: var(--accent-warning, #f59e0b);
    color: var(--text-inverse, #ffffff);
}

.xwui-slider--error .xwui-slider__tooltip-circle {
    background: var(--accent-error, #ef4444);
    border-color: var(--accent-error, #ef4444);
    color: var(--text-inverse, #ffffff);
}

.xwui-slider--info .xwui-slider__tooltip-circle {
    background: var(--accent-primary, var(--control-active, #4f46e5));
    border-color: var(--accent-primary, var(--control-active, #4f46e5));
    color: var(--text-inverse, #ffffff);
}

/* Tooltip label text */
.xwui-slider__tooltip-label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    text-align: center;
}

/* Visible state */
.xwui-slider__tooltip--visible {
    opacity: 1;
    visibility: visible;
}

/* Always visible (open) state for valueLabelDisplay="on" */
.xwui-slider__tooltip--open {
    opacity: 1;
    visibility: visible;
}

/* Vertical tooltip */
.xwui-slider--vertical .xwui-slider__tooltip {
    bottom: auto;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-bottom: 0;
    margin-left: var(--spacing-xs);
}

/* ============================================
   MARKS
   ============================================ */
.xwui-slider__marks {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    top: 0;
    left: 0;
}

.xwui-slider--vertical .xwui-slider__marks {
    width: 100%;
    height: 100%;
}

.xwui-slider__mark {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(-50%);
}

.xwui-slider--vertical .xwui-slider__mark {
    transform: translateY(50%);
    left: 0;
}

.xwui-slider__mark-dot {
    width: 4px;
    height: 4px;
    background: var(--border-color, var(--control-border));
    border-radius: 50%;
    margin-top: calc(var(--spacing-sm) * -1);
    transition: background-color 0.2s ease;
}

/* Active mark state */
.xwui-slider__mark--active .xwui-slider__mark-dot {
    background: var(--accent-primary, var(--control-active));
}

.xwui-slider--small .xwui-slider__mark-dot {
    width: 3px;
    height: 3px;
}

.xwui-slider--large .xwui-slider__mark-dot {
    width: 5px;
    height: 5px;
}

.xwui-slider--vertical .xwui-slider__mark-dot {
    margin-top: 0;
    margin-left: calc(var(--spacing-sm) * -1);
}

.xwui-slider__mark-label {
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--text-secondary, var(--control-text-secondary));
    white-space: nowrap;
    transition: color 0.2s ease;
}

/* Active mark label state */
.xwui-slider__mark-label--active {
    color: var(--text-primary, var(--control-text));
    font-weight: var(--font-weight-medium);
}

.xwui-slider--vertical .xwui-slider__mark-label {
    margin-top: 0;
    margin-left: var(--spacing-xs);
}

/* ============================================
   STEPPERS
   ============================================ */
.xwui-slider__steppers {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    flex-shrink: 0;
}

.xwui-slider--vertical .xwui-slider__steppers {
    flex-direction: row;
}

.xwui-slider__stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--size-control-height-sm, 28px);
    height: var(--size-control-height-sm, 28px);
    padding: 0;
    background: var(--bg-primary, var(--control-bg));
    border: var(--border-width-thin) solid var(--border-color, var(--control-border));
    border-radius: var(--radius-button, var(--radius-sm));
    color: var(--text-primary, var(--control-text));
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.xwui-slider__stepper:hover:not(:disabled) {
    background: var(--bg-hover, var(--control-bg-hover));
    border-color: var(--accent-primary, var(--control-active));
    color: var(--accent-primary, var(--control-active));
}

.xwui-slider__stepper:active:not(:disabled) {
    background: var(--bg-active, var(--control-bg-active));
    transform: scale(0.95);
}

.xwui-slider__stepper:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   DISABLED STATE
   ============================================ */
.xwui-slider--disabled {
    opacity: 0.6;
    pointer-events: none;
}

.xwui-slider--disabled .xwui-slider__track,
.xwui-slider--disabled .xwui-slider__thumb {
    cursor: not-allowed;
}

.xwui-slider--disabled .xwui-slider__thumb:hover {
    box-shadow: none;
    transform: translate(-50%, -50%);
}

.xwui-slider--disabled .xwui-slider__stepper {
    cursor: not-allowed;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
.xwui-slider__thumb[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Screen reader only */
.xwui-slider__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 640px) {
    .xwui-slider--small .xwui-slider__thumb {
        width: 16px;
        height: 16px;
    }
    
    .xwui-slider--medium .xwui-slider__thumb {
        width: 20px;
        height: 20px;
    }
    
    .xwui-slider--large .xwui-slider__thumb {
        width: 24px;
        height: 24px;
    }
}

/* ============================================
   VALUE EDIT LABELS (min / current / max)
   ============================================ */
/* Compact, click-to-edit value labels shown when displayInputMin /
   displayInputCurrent / displayInputMax are enabled. MIN sits at the start
   edge of the track, MAX at the end edge, CURRENT is centred above. Clicking a
   label swaps it for an inline text <input>. No headings, no boxes. */
.xwui-slider__edit {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary, var(--control-text-secondary));
    white-space: nowrap;
    cursor: text;
    border-radius: var(--radius-sm, 4px);
    padding: 0 2px;
    transition: color 0.12s ease, background-color 0.12s ease;
}
.xwui-slider__edit:hover,
.xwui-slider__edit:focus-visible {
    color: var(--text-primary, var(--control-text));
    background: var(--bg-hover, var(--control-bg-hover, rgba(0, 0, 0, 0.06)));
    outline: none;
}

/* MIN / MAX flank the rail; the rail flexes to fill the space between them. */
.xwui-slider__edge { flex-shrink: 0; }
.xwui-slider__edge--min { margin-right: var(--spacing-xs); }
.xwui-slider__edge--max { margin-left: var(--spacing-xs); }
.xwui-slider--has-edges .xwui-slider__rail {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

/* CURRENT — value feedback centred above the track. */
.xwui-slider__value {
    display: block;
    text-align: center;
    margin-bottom: 2px;
}

/* The inline editor that replaces a label on click. */
.xwui-slider__edit-input {
    width: 5ch;
    min-width: 3ch;
    font: inherit;
    color: var(--text-primary, var(--control-text));
    text-align: center;
    border: var(--border-width-thin, 1px) solid var(--accent-primary, var(--control-active));
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-primary, #fff);
    padding: 0 2px;
    box-sizing: content-box;
}
.xwui-slider__value .xwui-slider__edit-input { width: 6ch; }

/* ============================================
   DARK MODE SUPPORT
   ============================================ */
/* Dark mode is automatically handled via theme/colors/{theme}.css files */
/* Custom overrides can be added here if needed */

/* basic/XWUISocialLinks/XWUISocialLinks.css */
/* No styles for this component — placeholder written by tools/copy-lib-components.ts so the runtime CSS auto-loader doesn't 404. */

/* basic/XWUISpace/XWUISpace.css */
/**
 * XWUISpace Component Styles
 */

.xwui-space-wrapper {
    /* Wrapper has no specific styles */
}

.xwui-space {
    box-sizing: border-box;
}

.xwui-space-item {
    /* Item inherits flex properties */
}

.xwui-space-split {
    color: var(--text-tertiary, rgba(0, 0, 0, 0.3));
    margin: 0 var(--spacing-xs, 4px);
}


/* basic/XWUISparkline/XWUISparkline.css */
.xwui-sparkline {
  display: inline-block;
  line-height: 0;
}

.xwui-sparkline svg {
  display: block;
  vertical-align: middle;
}

/* basic/XWUISpeedDial/XWUISpeedDial.css */
/**
 * XWUISpeedDial Component Styles
 */

.xwui-speed-dial-container {
    /* Container has no specific styles */
}

.xwui-speed-dial {
    position: fixed;
    z-index: 1000;
}

.xwui-speed-dial-main {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--accent-primary, #1890ff);
    color: var(--text-inverse, #ffffff);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.2));
    transition: transform 0.3s, background-color 0.3s;
    z-index: 1001;
}

.xwui-speed-dial-main:hover {
    background-color: var(--accent-hover, #40a9ff);
    transform: scale(1.1);
}

.xwui-speed-dial-main svg {
    width: 24px;
    height: 24px;
    transition: transform 0.3s;
}

.xwui-speed-dial-open .xwui-speed-dial-main svg {
    transform: rotate(45deg);
}

.xwui-speed-dial-actions {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 72px;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s, transform 0.3s;
}

.xwui-speed-dial-open .xwui-speed-dial-actions {
    pointer-events: auto;
    opacity: 1;
    transform: scale(1);
}

.xwui-speed-dial-action {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--bg-primary, #ffffff);
    color: var(--text-primary, #333);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.15));
    transition: transform 0.2s, background-color 0.2s;
    position: relative;
}

.xwui-speed-dial-action:hover {
    background-color: var(--bg-hover, #f0f0f0);
    transform: scale(1.1);
}

.xwui-speed-dial-action svg {
    width: 20px;
    height: 20px;
}

.xwui-speed-dial-action-label {
    position: absolute;
    right: 56px;
    white-space: nowrap;
    background: var(--color-overlay-dark, rgba(0, 0, 0, 0.8));
    color: var(--text-inverse, #ffffff);
    padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
    border-radius: var(--radius-sm, 4px);
    font-size: var(--font-size-xs, 12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.xwui-speed-dial-action:hover .xwui-speed-dial-action-label {
    opacity: 1;
}

.xwui-speed-dial-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-overlay, rgba(0, 0, 0, 0.3));
    z-index: 999;
    display: none;
}

.xwui-speed-dial-actions.xwui-speed-dial-down {
    flex-direction: column-reverse;
    margin-bottom: 0;
    margin-top: 72px;
}

.xwui-speed-dial-actions.xwui-speed-dial-left {
    flex-direction: row-reverse;
    margin-bottom: 0;
    margin-right: 72px;
}

.xwui-speed-dial-actions.xwui-speed-dial-right {
    flex-direction: row;
    margin-bottom: 0;
    margin-left: 72px;
}


/* basic/XWUISpinner/XWUISpinner.css */
/**
 * XWUISpinner Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Typography: theme/typography/*.css
 */

.xwui-spinner {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm, 0.75rem);
}

.xwui-spinner-icon {
    animation: xwui-spinner-rotate 0.75s linear infinite;
}

.xwui-spinner-icon svg {
    display: block;
}

@keyframes xwui-spinner-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Size variants */
.xwui-spinner-small .xwui-spinner-icon svg {
    width: 16px;
    height: 16px;
}

.xwui-spinner-medium .xwui-spinner-icon svg {
    width: 24px;
    height: 24px;
}

.xwui-spinner-large .xwui-spinner-icon svg {
    width: 36px;
    height: 36px;
}

/* Color variants */
.xwui-spinner-primary .xwui-spinner-icon {
    color: var(--accent-primary, #4f46e5);
}

.xwui-spinner-secondary .xwui-spinner-icon {
    color: var(--text-secondary, #6c757d);
}

.xwui-spinner-white .xwui-spinner-icon {
    color: var(--text-inverse);
}

/* Label */
.xwui-spinner-label {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary, #6c757d);
}

.xwui-spinner-white .xwui-spinner-label {
    color: var(--text-inverse);
}

/* Overlay mode */
.xwui-spinner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-overlay, rgba(255, 255, 255, 0.8));
    z-index: 100;
}

.xwui-spinner-blur {
    backdrop-filter: blur(2px);
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */

/* Container utility */
.xwui-spinner-container {
    position: relative;
    min-height: 100px;
}

.xwui-spinner-container.xwui-spinner-loading > *:not(.xwui-spinner) {
    opacity: 0.5;
    pointer-events: none;
}


/* basic/XWUISplashScreen/XWUISplashScreen.css */
/* ──────────────────────────────────────────────────────────────
   XWUISplashScreen — Boot splash with logo, spinner, and messages
   Reuses the fade/skip pattern from XWUIGameSplashScreen with basic tokens.
   ────────────────────────────────────────────────────────────── */

.xwui-splash-screen {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md, 1rem);
    background: var(--xwui-splash-bg, var(--bg-primary, #ffffff));
    color: var(--color-text-primary, #111827);
    z-index: var(--xwui-splash-z, 10000);
    opacity: 0;
    transition: opacity var(--splash-fade-time, 600ms) ease-in-out;
    user-select: none;
}

.xwui-splash-screen--visible {
    opacity: 1;
}

.xwui-splash-screen--fading {
    opacity: 0;
    pointer-events: none;
}

.xwui-splash-screen__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md, 1rem);
    max-width: min(90vw, 28rem);
    text-align: center;
}

.xwui-splash-screen__logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: xwui-splash-logo-enter 0.8s ease-out both;
}

.xwui-splash-screen__logo {
    max-width: var(--xwui-splash-logo-size, 220px);
    max-height: var(--xwui-splash-logo-size, 220px);
    object-fit: contain;
}

.xwui-splash-screen__spinner-wrap {
    flex-shrink: 0;
}

.xwui-splash-screen__message {
    font-family: var(--font-family-base, 'Inter', sans-serif);
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.5;
    color: var(--color-text-secondary, #4b5563);
    min-height: 1.5em;
}

@keyframes xwui-splash-logo-enter {
    0% { transform: scale(0.92); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.xwui-splash-screen__skip-hint {
    position: absolute;
    bottom: var(--xwui-splash-hint-bottom, 48px);
    font-family: var(--font-family-base, 'Inter', sans-serif);
    font-size: var(--xwui-splash-hint-size, 12px);
    color: var(--xwui-splash-hint-color, rgba(100, 116, 139, 0.55));
    letter-spacing: 0.08em;
    text-transform: uppercase;
    animation: xwui-splash-hint-pulse 2s ease-in-out infinite;
}

@keyframes xwui-splash-hint-pulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.85; }
}

[data-theme="dark"] .xwui-splash-screen,
.xwui-theme-dark .xwui-splash-screen {
    --xwui-splash-hint-color: rgba(226, 232, 240, 0.35);
}

.xwui-shell-app-splash-host {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: auto;
}

/* basic/XWUISplitter/XWUISplitter.css */
/**
 * XWUISplitter Component Styles
 * A draggable resize bar between two panes. Structure + affordance only —
 * colours come from theme CSS variables.
 */

.xwui-splitter {
    position: relative;
    flex: 0 0 auto;
    z-index: 4;
    background: transparent;
    align-self: stretch;
    /* Stops the browser from scrolling the page on a touch-drag. */
    touch-action: none;
    box-sizing: border-box;
}
.xwui-splitter-vertical {
    width: 8px;
    height: 100%;
    cursor: col-resize;
}
.xwui-splitter-horizontal {
    height: 8px;
    width: 100%;
    cursor: row-resize;
}

/* A VISIBLE divider line centered in the 8px grab strip, so it's obvious the
   bar is draggable. Bolds to the accent colour (plus a soft ring) on hover /
   while dragging. */
.xwui-splitter::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    border-radius: 2px;
    background: color-mix(in srgb, var(--text-primary, #64748b) 32%, transparent);
    transition: background-color 120ms ease, box-shadow 120ms ease;
}
.xwui-splitter-vertical::before { width: 2px; height: 100%; }
.xwui-splitter-horizontal::before { width: 100%; height: 2px; }

.xwui-splitter:hover::before,
.xwui-splitter--dragging::before {
    background: var(--accent-primary, #3b82f6);
    box-shadow: 0 0 0 1px var(--accent-primary, #3b82f6);
}
.xwui-splitter:focus-visible {
    outline: 2px solid var(--accent-primary, #3b82f6);
    outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
    .xwui-splitter::before { transition: none; }
}

/* basic/XWUISpoiler/XWUISpoiler.css */
/**
 * XWUISpoiler Component Styles
 */

.xwui-spoiler-container {
    /* Container has no specific styles */
}

.xwui-spoiler {
    /* Component wrapper */
}

.xwui-spoiler-content-wrapper {
    position: relative;
}

.xwui-spoiler-content {
    /* Content styles */
}

.xwui-spoiler-toggle {
    margin-top: var(--spacing-sm, 8px);
    padding: var(--spacing-xs, 4px) 0;
    border: none;
    background: transparent;
    color: var(--accent-primary, #1890ff);
    cursor: pointer;
    font-size: var(--font-size-sm, 14px);
}

.xwui-spoiler-toggle:hover {
    color: var(--accent-hover, #40a9ff);
}


/* basic/XWUIStack/XWUIStack.css */
/**
 * XWUIStack Component Styles
 */

.xwui-stack-wrapper {
    /* Wrapper has no specific styles */
}

.xwui-stack {
    box-sizing: border-box;
}

.xwui-stack-item {
    /* Item inherits flex properties */
}


/* basic/XWUIState/XWUIState.css */
/* Styles for XWUIState. */

/* basic/XWUIStatistic/XWUIStatistic.css */
/**
 * XWUIStatistic Component Styles
 */

.xwui-statistic-container {
    /* Container has no specific styles */
}

.xwui-statistic {
    display: inline-block;
}

.xwui-statistic-title {
    font-size: var(--font-size-sm, 14px);
    color: var(--text-secondary, #666);
    margin-bottom: var(--spacing-xs, 4px);
}

.xwui-statistic-content {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-xs, 4px);
}

.xwui-statistic-value {
    font-size: 24px;
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary, #333);
    line-height: 1;
}

.xwui-statistic-prefix,
.xwui-statistic-suffix {
    font-size: var(--font-size-base, 16px);
    color: var(--text-secondary, #666);
}


/* basic/XWUISteps/XWUISteps.css */
/**
 * XWUISteps Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Typography: theme/typography/*.css
 */

.xwui-steps {
    display: flex;
    width: 100%;
}

.xwui-steps-horizontal {
    flex-direction: row;
}

.xwui-steps-vertical {
    flex-direction: column;
}

/* Step */
.xwui-step {
    position: relative;
    flex: 1;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm, 0.75rem);
}

.xwui-steps-vertical .xwui-step {
    flex-direction: row;
    flex: none;
    margin-bottom: var(--spacing-md, 1rem);
}

/* Icon */
.xwui-step-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: var(--border-navigation-width, var(--border-width-thick, 2px)) var(--border-navigation-style, solid) var(--border-navigation-color, var(--border-color));
    background: var(--bg-primary);
    font-weight: var(--font-weight-semibold, 600);
    transition: all 0.2s;
}

.xwui-step-icon svg {
    width: 18px;
    height: 18px;
}

/* Status variants */
.xwui-step-wait .xwui-step-icon {
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.xwui-step-process .xwui-step-icon {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-inverse);
}

.xwui-step-finish .xwui-step-icon {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-inverse);
}

.xwui-step-error .xwui-step-icon {
    background: var(--accent-error);
    border-color: var(--accent-error);
    color: var(--text-inverse);
}

/* Content */
.xwui-step-content {
    flex: 1;
    padding-top: var(--spacing-xs, 0.25rem);
}

.xwui-step-title {
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs, 0.25rem);
}

.xwui-step-wait .xwui-step-title {
    color: var(--text-secondary);
}

.xwui-step-description {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary);
}

/* Tail (connector) */
.xwui-step-tail {
    position: absolute;
    background: var(--border-color);
    transition: background 0.2s;
}

.xwui-steps-horizontal .xwui-step-tail {
    top: 16px;
    left: calc(32px + 0.75rem);
    right: 0;
    height: 2px;
}

.xwui-steps-vertical .xwui-step-tail {
    top: calc(32px + 0.75rem);
    left: 16px;
    bottom: -1rem;
    width: 2px;
}

.xwui-step-tail-active {
    background: var(--accent-primary);
}

/* Size variants */
.xwui-steps-small .xwui-step-icon {
    width: 24px;
    height: 24px;
    font-size: var(--font-size-xs, 0.75rem);
}

.xwui-steps-small .xwui-step-icon svg {
    width: 14px;
    height: 14px;
}

.xwui-steps-large .xwui-step-icon {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-base, 1rem);
}

.xwui-steps-large .xwui-step-icon svg {
    width: 22px;
    height: 22px;
}


/* basic/XWUIStickersOverlay/XWUIStickersOverlay.css */
/**
 * XWUIStickersOverlay Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 */

.xwui-stickers-overlay-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Sticker Overlay */
.xwui-sticker-overlay {
    cursor: move;
    user-select: none;
    transition: transform 0.1s ease;
}

.xwui-sticker-overlay:hover {
    transform: scale(1.05);
}

.xwui-sticker-overlay.selected {
    outline: 2px solid var(--accent-primary, #4f46e5);
    outline-offset: 2px;
}

/* Sticker Picker */
.xwui-stickers-picker {
    display: flex;
    flex-direction: column;
    width: 300px;
    max-height: 400px;
}

.xwui-stickers-categories {
    display: flex;
    gap: var(--spacing-xs, 0.5rem);
    padding: var(--spacing-sm, 0.75rem);
    border-bottom: var(--border-width-regular, 1px) solid var(--border-color, #e0e0e0);
    overflow-x: auto;
}

.xwui-stickers-category-btn {
    padding: var(--spacing-xs, 0.375rem) var(--spacing-sm, 0.75rem);
    border: var(--border-width-regular, 1px) solid var(--border-color, #e0e0e0);
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-primary, #ffffff);
    color: var(--text-primary, #212529);
    cursor: pointer;
    font-size: var(--font-size-sm, 0.875rem);
    white-space: nowrap;
    transition: all 0.2s ease;
}

.xwui-stickers-category-btn:hover {
    background: var(--bg-hover, #f8f9fa);
    border-color: var(--border-medium, #ced4da);
}

.xwui-stickers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-xs, 0.5rem);
    padding: var(--spacing-sm, 0.75rem);
    overflow-y: auto;
}

.xwui-sticker-item {
    aspect-ratio: 1;
    padding: var(--spacing-xs, 0.5rem);
    border: var(--border-width-regular, 1px) solid var(--border-color, #e0e0e0);
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-primary, #ffffff);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.xwui-sticker-item:hover {
    background: var(--bg-hover, #f8f9fa);
    border-color: var(--accent-primary, #4f46e5);
    transform: scale(1.1);
}

.xwui-sticker-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* basic/XWUIStyle/XWUIStyle.css */
/**
 * XWUIStyle Component CSS
 * Structure and behavior only - no colors
 * 
 * Style Dependencies:
 * - This component manages CSS file loading and doesn't require style dependencies
 */

/* This component doesn't render any visible elements */
/* It only manages CSS file loading */


/* basic/XWUIStyleLoader/XWUIStyleLoader.css */
/* Styles for XWUIStyleLoader. */

/* basic/XWUIStyleSelector/XWUIStyleSelector.css */
/**
 * XWUIStyleSelector Component Styles
 * Searchable dropdown styling
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Roundness: theme/roundness/rounded.css (global roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-style-selector-container {
    width: 100%;
    font-family: var(--font-family-base, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

.xwui-style-selector-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 1rem);
    align-items: stretch;
}

.xwui-style-selector-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.5rem);
    padding: var(--spacing-md, 1rem);
    border: var(--border-width-regular, 1.5px) var(--border-style, solid) var(--border-color, #dee2e6);
    border-radius: var(--radius-md, 0.5rem);
    background: var(--bg-secondary, #f8f9fa);
}

.xwui-style-selector-group-label {
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary, #212529);
    margin-bottom: var(--spacing-sm, 0.5rem);
    padding-bottom: var(--spacing-xs, 0.25rem);
    border-bottom: var(--border-width-thin, 1px) var(--border-style, solid) var(--border-color, #dee2e6);
}

.xwui-style-selector-label {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-secondary, #6c757d);
    margin-bottom: var(--spacing-xs, 0.25rem);
}

.xwui-style-selector-dropdown {
    position: relative;
    flex: 1;
    min-width: 0;
}

.xwui-style-selector-selected {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm, 0.625rem) var(--spacing-sm, 0.875rem);
    background: var(--control-bg, #ffffff);
    border: var(--border-input-width, var(--border-width-regular, 1.5px)) var(--border-input-style, solid) var(--border-input-color, var(--control-border, #dee2e6));
    border-radius: var(--radius-input, var(--radius-sm, 0.375rem));
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 2.5rem;
}

.xwui-style-selector-selected:hover {
    background: var(--control-bg-hover, #f8f9fa);
    border-color: var(--accent-primary, #4f46e5);
}

.xwui-style-selector-selected:focus {
    outline: none;
    border-color: var(--accent-primary, #4f46e5);
    box-shadow: var(--shadow-xs, 0 0 0 3px var(--bg-hover));
}

.xwui-style-selector-dropdown.open .xwui-style-selector-selected {
    border-color: var(--accent-primary, #4f46e5);
    box-shadow: var(--shadow-xs, 0 0 0 3px var(--bg-hover));
}

.xwui-style-selector-selected-text {
    flex: 1;
    color: var(--control-text, #212529);
    font-size: var(--font-size-sm, 0.875rem);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xwui-style-selector-dropdown.has-selection .xwui-style-selector-selected-text {
    color: var(--text-primary, #212529);
    font-weight: var(--font-weight-medium, 500);
}

.xwui-style-selector-arrow {
    color: var(--text-tertiary, #adb5bd);
    font-size: var(--font-size-xs, 0.75rem);
    transition: transform 0.2s ease;
    margin-left: var(--spacing-sm, 0.5rem);
    flex-shrink: 0;
}

.xwui-style-selector-dropdown.open .xwui-style-selector-arrow {
    transform: rotate(180deg);
}

.xwui-style-selector-search-container {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--spacing-xs, 0.25rem);
    background: var(--control-bg, #ffffff);
    border: var(--border-input-width, var(--border-width-regular, 1.5px)) var(--border-input-style, solid) var(--border-input-color, var(--control-border, #dee2e6));
    border-radius: var(--radius-input, var(--radius-sm, 0.375rem));
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05));
    z-index: 1000;
    overflow: hidden;
}

.xwui-style-selector-search {
    width: 100%;
    padding: var(--spacing-sm, 0.625rem) var(--spacing-sm, 0.875rem);
    border: none;
    border-bottom: var(--border-input-width, var(--border-width-regular, 1.5px)) var(--border-input-style, solid) var(--border-input-color, var(--control-border, #dee2e6));
    background: var(--control-bg, #ffffff);
    color: var(--control-text, #212529);
    font-size: var(--font-size-sm, 0.875rem);
    outline: none;
}

.xwui-style-selector-search::placeholder {
    color: var(--text-tertiary, #adb5bd);
}

.xwui-style-selector-options {
    max-height: 12rem;
    overflow-y: auto;
    padding: var(--spacing-xs, 0.25rem) 0;
}

.xwui-style-selector-option {
    padding: var(--spacing-sm, 0.625rem) var(--spacing-sm, 0.875rem);
    cursor: pointer;
    color: var(--control-text, #212529);
    font-size: var(--font-size-sm, 0.875rem);
    transition: background-color 0.15s ease;
    /* Keep the inline palette preview + label text on one line with small
       gap. The palette is a child inserted at the start of the option. */
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 0.5rem);
}

/* Inline palette inside a selector option — spacing refinement only; the
   actual swatch sizing + shape comes from XWUIDisplayColorPalette's CSS. */
.xwui-style-selector-palette {
    flex-shrink: 0;
}

.xwui-style-selector-option:hover {
    background: var(--control-bg-hover, #f8f9fa);
}

.xwui-style-selector-option.selected {
    background: var(--accent-primary, #4f46e5);
    color: var(--text-inverse);
    font-weight: var(--font-weight-medium, 500);
}

.xwui-style-selector-option.selected:hover {
    background: var(--accent-hover, #4338ca);
}

.xwui-style-selector-option-empty {
    color: var(--text-tertiary, #adb5bd);
    cursor: default;
    font-style: italic;
}

.xwui-style-selector-option-empty:hover {
    background: transparent;
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */

/* Scrollbar styling */
.xwui-style-selector-options::-webkit-scrollbar {
    width: 8px;
}

.xwui-style-selector-options::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

.xwui-style-selector-options::-webkit-scrollbar-thumb {
    background: var(--border-medium);
    border-radius: var(--radius-xs, 4px);
}

.xwui-style-selector-options::-webkit-scrollbar-thumb:hover {
    background: var(--border-strong);
}


/* basic/XWUIStyleSwitch/XWUIStyleSwitch.css */
/**
 * XWUIStyleSwitch Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Roundness: theme/roundness/rounded.css (global roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-style-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs, 0.5rem);
}

/* Vertical UI separator (same color as switch options, aligns with track) */
.xwui-style-switch__separator {
    width: 1px;
    align-self: stretch;
    min-height: 1.25em;
    margin: 0 6px;
    background: currentColor;
    color: var(--text-secondary, var(--text-secondary, #6c757d));
    flex-shrink: 0;
}

/* Size variants (canonical 9-step scale) */
:is(.xwui-style-switch--3xs,.xwui-style-switch--xxxs) { font-size: var(--font-size-xs, 0.5rem); }
:is(.xwui-style-switch--4xs,.xwui-style-switch--xxxxs) { font-size: var(--font-size-xs, 0.5rem); }
:is(.xwui-style-switch--2xs,.xwui-style-switch--xxs) { font-size: var(--font-size-xs, 0.625rem); }
.xwui-style-switch--xs { font-size: var(--font-size-xs, 0.75rem); }
:is(.xwui-style-switch--s,.xwui-style-switch--sm) { font-size: var(--font-size-sm, 0.875rem); }
:is(.xwui-style-switch--m,.xwui-style-switch--md) { font-size: var(--font-size-base, 1rem); }
:is(.xwui-style-switch--l,.xwui-style-switch--lg) { font-size: var(--font-size-lg, 1.125rem); }
.xwui-style-switch--xl { font-size: var(--font-size-xl, 1.3125rem); }
:is(.xwui-style-switch--2xl,.xwui-style-switch--xxl) { font-size: var(--font-size-2xl, 1.7rem); }
:is(.xwui-style-switch--3xl,.xwui-style-switch--xxxl) { font-size: var(--font-size-3xl, 2.1rem); }
:is(.xwui-style-switch--4xl,.xwui-style-switch--xxxxl) { font-size: var(--font-size-3xl, 2.1rem); }

/* Settings icon: match switch option icon size and alignment (XWUIIcon uses .xwui-icon) */
:is(.xwui-style-switch--3xs,.xwui-style-switch--xxxs) .xwui-style-switch__settings-option .xwui-icon { width: 8px; height: 8px; min-width: 8px; min-height: 8px; }
:is(.xwui-style-switch--4xs,.xwui-style-switch--xxxxs) .xwui-style-switch__settings-option .xwui-icon { width: 4px; height: 4px; min-width: 4px; min-height: 4px; }
:is(.xwui-style-switch--2xs,.xwui-style-switch--xxs) .xwui-style-switch__settings-option .xwui-icon { width: 11px; height: 11px; min-width: 11px; min-height: 11px; }
.xwui-style-switch--xs .xwui-style-switch__settings-option .xwui-icon { width: 13px; height: 13px; min-width: 13px; min-height: 13px; }
:is(.xwui-style-switch--s,.xwui-style-switch--sm) .xwui-style-switch__settings-option .xwui-icon {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
}

:is(.xwui-style-switch--m,.xwui-style-switch--md) .xwui-style-switch__settings-option .xwui-icon {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
}

:is(.xwui-style-switch--l,.xwui-style-switch--lg) .xwui-style-switch__settings-option .xwui-icon {
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
}

.xwui-style-switch--xl .xwui-style-switch__settings-option .xwui-icon { width: 28px; height: 28px; min-width: 28px; min-height: 28px; }
:is(.xwui-style-switch--2xl,.xwui-style-switch--xxl) .xwui-style-switch__settings-option .xwui-icon { width: 36px; height: 36px; min-width: 36px; min-height: 36px; }
:is(.xwui-style-switch--3xl,.xwui-style-switch--xxxl) .xwui-style-switch__settings-option .xwui-icon { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
:is(.xwui-style-switch--4xl,.xwui-style-switch--xxxxl) .xwui-style-switch__settings-option .xwui-icon { width: 70.4px; height: 70.4px; min-width: 70.4px; min-height: 70.4px; }

/* Legacy size aliases */
.xwui-style-switch--small { font-size: var(--font-size-sm, 0.875rem); }
.xwui-style-switch--medium { font-size: var(--font-size-base, 1rem); }
.xwui-style-switch--large { font-size: var(--font-size-lg, 1.125rem); }
.xwui-style-switch--small .xwui-style-switch__settings-option .xwui-icon { width: 16px; height: 16px; min-width: 16px; min-height: 16px; }
.xwui-style-switch--medium .xwui-style-switch__settings-option .xwui-icon { width: 20px; height: 20px; min-width: 20px; min-height: 20px; }
.xwui-style-switch--large .xwui-style-switch__settings-option .xwui-icon { width: 24px; height: 24px; min-width: 24px; min-height: 24px; }

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */


/* basic/XWUIStyleToggle/XWUIStyleToggle.css */
/**
 * XWUIStyleToggle — cycling style picker. All colors / radii via XWUI
 * tokens so the toggle's own chrome retints when a preset is selected.
 */

.xwui-style-toggle-container { display: inline-block; }

.xwui-style-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-color);
  background: var(--bg-card);
  border-radius: var(--radius-full, 999px);
  overflow: visible;
  color: var(--text-primary);
  font-family: inherit;
}

.xwui-style-toggle__main,
.xwui-style-toggle__caret {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  padding: 0.4rem 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

.xwui-style-toggle__main:hover,
.xwui-style-toggle__caret:hover { background: var(--bg-hover); }

.xwui-style-toggle__caret {
  border-left: 1px solid var(--border-light);
  padding: 0.55rem 0;
  color: var(--text-tertiary);
}

.xwui-style-toggle__swatch {
  width: 14px; height: 14px;
  border-radius: var(--radius-full, 50%);
  border: 1px solid var(--overlay-subtle, var(--border-light));
  flex: 0 0 auto;
}
.xwui-style-toggle__swatch--active {
  background: var(--accent-primary);
}

.xwui-style-toggle__label {
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.xwui-style-toggle__count {
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
  font-size: 0.75rem;
  background: var(--bg-hover);
  border: 1px solid var(--border-light);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-full, 999px);
}

.xwui-style-toggle__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 100;
  min-width: 280px;
  max-height: 60vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated, var(--bg-card));
  border: 1px solid var(--border-color);
  border-radius: var(--radius-menu, var(--radius-lg));
  box-shadow: var(--shadow-lg);
}

.xwui-style-toggle__menu-head {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border-light);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  display: flex; justify-content: space-between; align-items: center;
}
.xwui-style-toggle__menu-head span {
  font-weight: 700;
  color: var(--accent-primary);
}

.xwui-style-toggle__menu-list {
  overflow-y: auto;
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.xwui-style-toggle__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.5rem 0.7rem;
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.85rem;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.xwui-style-toggle__item:hover { background: var(--bg-hover); }
.xwui-style-toggle__item.is-active {
  background: color-mix(in srgb, var(--accent-primary) 15%, var(--bg-card));
}
.xwui-style-toggle__item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.xwui-style-toggle__item-meta  { color: var(--text-tertiary); font-size: 0.75rem; white-space: nowrap; }

@media (max-width: 560px) {
  .xwui-style-toggle__label,
  .xwui-style-toggle__count { display: none; }
}

/* ── minimized mode: icon + step-switch track + CSS tooltip ─────────
   Double-class specificity (.xwui-style-toggle.xwui-style-toggle--minimized)
   overrides the single-class base rules (border, bg, padding) cleanly. */

.xwui-style-toggle.xwui-style-toggle--minimized {
  border: none;
  background: transparent;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0;
  /* Tooltip anchor: ::after is positioned relative to this element. */
  position: relative;
  overflow: visible;
}

/* ── Step-switch track ────────────────────────────────────────────── */

.xwui-style-toggle__min-track {
  display: block;
  width: 28px;
  height: 10px;
  background: color-mix(in srgb, var(--bg-hover, rgba(0,0,0,0.1)) 70%, transparent);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-full, 999px);
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
  /* Soft transition on background so it retints when the theme changes. */
  transition: background 0.2s ease, border-color 0.2s ease;
}

.xwui-style-toggle__min-track:hover {
  background: var(--bg-hover);
  border-color: var(--accent-primary);
}

/* Sliding thumb — position set inline via JS (computed from idx/total).
   WHY inline style for `left`: JS calculates the proportional offset in pixels
   (travel = 16 px) so the CSS stays purely visual and doesn't need --pos/--total
   CSS variable arithmetic, which is verbose and browser-support sensitive. */
.xwui-style-toggle__min-thumb {
  position: absolute;
  top: 1px;
  width: 8px;
  height: 8px;
  background: var(--accent-primary);
  border-radius: var(--radius-full, 999px);
  left: 1px;            /* default; overridden inline on each render */
  transition: left 0.2s ease, background 0.2s ease;
  pointer-events: none; /* track's click handler covers interaction */
}

/* ── CSS-only tooltip ────────────────────────────────────────────────
   content: attr(data-xwui-tooltip) reads the active preset's name set by
   the component on each setupDOM() call. Zero JS, zero portals, works for
   any language or script (Arabic, Latin, CJK…) because the attribute is
   set to whatever the preset's `name` field contains. */
.xwui-style-toggle--minimized[data-xwui-tooltip]::after {
  content: attr(data-xwui-tooltip);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--bg-elevated, #1e293b);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 4px);
  padding: 3px 8px;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  pointer-events: none;
  z-index: var(--z-tooltip, 200);
  box-shadow: var(--shadow-sm);
  /* Hidden by default; revealed on hover with a short fade-in. */
  opacity: 0;
  transition: opacity 0.15s ease;
}
.xwui-style-toggle--minimized[data-xwui-tooltip]:hover::after {
  opacity: 1;
}

/* basic/XWUISubtaskExpander/XWUISubtaskExpander.css */
/**
 * XWUISubtaskExpander Component Styles
 */

.xwui-subtask-expander {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.xwui-subtask-expander-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
    padding: var(--spacing-xs, 0.25rem) 0;
    cursor: pointer;
}

.xwui-subtask-expander-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-secondary, #6c757d);
    transition: transform 0.2s ease;
}

.xwui-subtask-expander-toggle:hover {
    color: var(--text-primary, #212529);
}

.xwui-subtask-expander-count {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary, #6c757d);
}

.xwui-subtask-expander-progress {
    flex: 1;
    max-width: 150px;
    margin-left: auto;
}

.xwui-subtask-expander-content {
    margin-top: var(--spacing-xs, 0.25rem);
    margin-left: var(--spacing-md, 1rem);
    padding-left: var(--spacing-sm, 0.5rem);
    border-left: 2px solid var(--border-light, #e9ecef);
}

.xwui-subtask-expander:not(.xwui-subtask-expander-expanded) .xwui-subtask-expander-content {
    display: none;
}


/* basic/XWUISwitch/XWUISwitch.css */
/**
 * XWUISwitch Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Roundness: theme/roundness/rounded.css (global roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm, 0.75rem);
    cursor: pointer;
    user-select: none;
}

.xwui-switch-label-start {
    flex-direction: row-reverse;
}

.xwui-switch-disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Hidden input */
.xwui-switch-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Track */
.xwui-switch-track {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    border-radius: var(--radius-control, 999px);
    background: var(--xwui-switch-unchecked-bg, var(--border-color, #dee2e6));
    transition: background 0.2s ease, border-color 0.2s ease;
    border: 1px solid transparent;
}

/* Track with custom content (no thumb) */
.xwui-switch-track-content {
    justify-content: space-between;
    padding: 2px 4px;
}

/* Thumb - Clear circle styling matching slider tooltip */
.xwui-switch-thumb {
    position: absolute;
    border-radius: 50%;
    background: var(--text-inverse, #ffffff);
    border: 2px solid var(--border-color, #dee2e6);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Size variants */
.xwui-switch-small .xwui-switch-track {
    width: 32px;
    height: 18px;
}

.xwui-switch-small .xwui-switch-thumb {
    width: 14px;
    height: 14px;
    left: 2px;
}

.xwui-switch-small .xwui-switch-input:checked + .xwui-switch-track .xwui-switch-thumb {
    transform: translateX(14px);
}

.xwui-switch-medium .xwui-switch-track {
    width: 44px;
    height: 24px;
}

.xwui-switch-medium .xwui-switch-thumb {
    width: 20px;
    height: 20px;
    left: 2px;
}

.xwui-switch-medium .xwui-switch-input:checked + .xwui-switch-track .xwui-switch-thumb {
    transform: translateX(20px);
}

.xwui-switch-medium .xwui-switch-input:checked + .xwui-switch-track-content .xwui-switch-content-checked {
    right: 4px;
}

.xwui-switch-large .xwui-switch-track {
    width: 56px;
    height: 30px;
}

.xwui-switch-large .xwui-switch-thumb {
    width: 26px;
    height: 26px;
    left: 2px;
}

.xwui-switch-large .xwui-switch-input:checked + .xwui-switch-track .xwui-switch-thumb {
    transform: translateX(26px);
}

.xwui-switch-large .xwui-switch-input:checked + .xwui-switch-track-content .xwui-switch-content-checked {
    right: 4px;
}

/* Checked state */
.xwui-switch-input:checked + .xwui-switch-track {
    background: var(--xwui-switch-checked-bg, var(--accent-primary, #4f46e5));
    box-shadow: var(--glow-switch-track-checked, none);
}

.xwui-switch-input:checked + .xwui-switch-track .xwui-switch-thumb {
    background: var(--xwui-switch-checked-thumb, var(--text-inverse, #ffffff));
    border-color: var(--xwui-switch-checked-thumb-border, var(--accent-primary, #4f46e5));
    box-shadow: var(--glow-switch-thumb-hover, 0 2px 6px rgba(79, 70, 229, 0.3), 0 1px 3px rgba(0, 0, 0, 0.1));
}

/* Focus state */
.xwui-switch-input:focus-visible + .xwui-switch-track {
    outline: 2px solid var(--accent-primary, #4f46e5);
    outline-offset: 2px;
}

.xwui-switch-input:focus-visible + .xwui-switch-track .xwui-switch-thumb {
    box-shadow: var(--glow-switch-thumb-focus, 0 0 0 3px rgba(79, 70, 229, 0.2), 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.08));
}

/* Hover state */
.xwui-switch:hover .xwui-switch-track {
    background: var(--border-strong, #adb5bd);
}

.xwui-switch:hover .xwui-switch-track .xwui-switch-thumb {
    box-shadow: var(--glow-switch-thumb-hover, 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 3px rgba(0, 0, 0, 0.1));
}

.xwui-switch:hover .xwui-switch-input:checked + .xwui-switch-track {
    background: var(--accent-hover, #4338ca);
    box-shadow: var(--glow-switch-track-checked, none);
}

.xwui-switch:hover .xwui-switch-input:checked + .xwui-switch-track .xwui-switch-thumb {
    box-shadow: var(--glow-switch-thumb-hover, 0 3px 8px rgba(79, 70, 229, 0.4), 0 2px 4px rgba(0, 0, 0, 0.12));
}

/* Color variants */
.xwui-switch-success .xwui-switch-input:checked + .xwui-switch-track {
    background: var(--accent-success, #10b981);
}

.xwui-switch-success .xwui-switch-input:checked + .xwui-switch-track .xwui-switch-thumb {
    border-color: var(--accent-success, #10b981);
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3), 0 1px 3px rgba(0, 0, 0, 0.1);
}

.xwui-switch-success:hover .xwui-switch-input:checked + .xwui-switch-track {
    background: var(--accent-success-hover, #059669);
}

.xwui-switch-success:hover .xwui-switch-input:checked + .xwui-switch-track .xwui-switch-thumb {
    box-shadow: 0 3px 8px rgba(16, 185, 129, 0.4), 0 2px 4px rgba(0, 0, 0, 0.12);
}

.xwui-switch-warning .xwui-switch-input:checked + .xwui-switch-track {
    background: var(--accent-warning, #f59e0b);
}

.xwui-switch-warning .xwui-switch-input:checked + .xwui-switch-track .xwui-switch-thumb {
    border-color: var(--accent-warning, #f59e0b);
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3), 0 1px 3px rgba(0, 0, 0, 0.1);
}

.xwui-switch-error .xwui-switch-input:checked + .xwui-switch-track {
    background: var(--accent-error, #ef4444);
}

.xwui-switch-error .xwui-switch-input:checked + .xwui-switch-track .xwui-switch-thumb {
    border-color: var(--accent-error, #ef4444);
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3), 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Custom content (icons, emojis, text) */
.xwui-switch-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75em;
    font-weight: 600;
    transition: opacity 0.2s ease, transform 0.2s ease;
    user-select: none;
    line-height: 1;
    flex-shrink: 0;
}

.xwui-switch-content-unchecked {
    opacity: 1;
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
}

.xwui-switch-content-checked {
    opacity: 0;
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
}

.xwui-switch-input:checked + .xwui-switch-track .xwui-switch-content-unchecked {
    opacity: 0;
}

.xwui-switch-input:checked + .xwui-switch-track .xwui-switch-content-checked {
    opacity: 1;
    position: absolute;
    right: 4px;
    transform: translateY(-50%);
}

/* Size adjustments for custom content */
.xwui-switch-small .xwui-switch-content {
    font-size: 10px;
    min-width: 14px;
}

.xwui-switch-medium .xwui-switch-content {
    font-size: 12px;
    min-width: 18px;
}

.xwui-switch-large .xwui-switch-content {
    font-size: 14px;
    min-width: 22px;
}

/* Text content */
.xwui-switch-text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xxs, 0.125rem);
}

.xwui-switch-label {
    font-size: var(--font-size-base, 0.9375rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary, #212529);
    line-height: 1.4;
}

.xwui-switch-description {
    font-size: var(--font-size-sm, 0.8125rem);
    color: var(--text-secondary, #6c757d);
    line-height: 1.4;
}

/* Multi-state switch */
.xwui-switch-multi {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm, 0.75rem);
    position: relative; /* For tooltip positioning */
}

.xwui-switch-track-multi {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: var(--radius-control, 999px);
    background: var(--border-color, #dee2e6);
    border: 1px solid var(--border-strong, #adb5bd);
    transition: background 0.2s ease;
}

.xwui-switch-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: none;
    border-radius: var(--radius-control, 999px);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-secondary, #6c757d);
    min-width: 36px;
    min-height: 36px;
}

.xwui-switch-option:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary, #212529);
}

.xwui-switch-option-selected {
    background: var(--accent-primary, #4f46e5);
    color: var(--text-inverse, #ffffff);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.xwui-switch-option:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.xwui-switch-option-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Size variants for multi-state */
.xwui-switch-small .xwui-switch-option {
    padding: 4px 8px;
    min-width: 28px;
    min-height: 28px;
    font-size: var(--font-size-sm, 0.8125rem);
}

.xwui-switch-small .xwui-switch-option-icon {
    width: 16px;
    height: 16px;
}

.xwui-switch-medium .xwui-switch-option {
    padding: 6px 10px;
    min-width: 36px;
    min-height: 36px;
    font-size: var(--font-size-base, 0.9375rem);
}

.xwui-switch-medium .xwui-switch-option-icon {
    width: 20px;
    height: 20px;
}

.xwui-switch-large .xwui-switch-option {
    padding: 8px 14px;
    min-width: 44px;
    min-height: 44px;
    font-size: var(--font-size-lg, 1.0625rem);
}

.xwui-switch-large .xwui-switch-option-icon {
    width: 24px;
    height: 24px;
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */


/* basic/XWUITable/XWUITable.css */
/**
 * XWUITable Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/table/*.css (component-specific border widths)
 * - Typography: theme/typography/*.css
 */

.xwui-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.xwui-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

/* Size variants (canonical 9-step scale) */
:is(.xwui-table-3xs,.xwui-table-xxxs) { font-size: var(--font-size-xs, 0.5rem); }
:is(.xwui-table-4xs,.xwui-table-xxxxs) { font-size: var(--font-size-xs, 0.5rem); }
:is(.xwui-table-3xs,.xwui-table-xxxs) .xwui-table-header,
:is(.xwui-table-3xs,.xwui-table-xxxs) .xwui-table-cell { padding: var(--spacing-xs, 0.25rem); }
:is(.xwui-table-4xs,.xwui-table-xxxxs) .xwui-table-header,
:is(.xwui-table-4xs,.xwui-table-xxxxs) .xwui-table-cell { padding: var(--spacing-xs, 0.25rem); }

:is(.xwui-table-2xs,.xwui-table-xxs) { font-size: var(--font-size-xs, 0.625rem); }
:is(.xwui-table-2xs,.xwui-table-xxs) .xwui-table-header,
:is(.xwui-table-2xs,.xwui-table-xxs) .xwui-table-cell { padding: var(--spacing-xs, 0.375rem); }

.xwui-table-xs { font-size: var(--font-size-xs, 0.75rem); }
.xwui-table-xs .xwui-table-header,
.xwui-table-xs .xwui-table-cell { padding: var(--spacing-xs, 0.4375rem); }

:is(.xwui-table-s,.xwui-table-sm) {
    font-size: var(--font-size-sm, 0.8125rem);
}

:is(.xwui-table-s,.xwui-table-sm) .xwui-table-header,
:is(.xwui-table-s,.xwui-table-sm) .xwui-table-cell {
    padding: var(--spacing-sm, 0.5rem);
}

:is(.xwui-table-m,.xwui-table-md) .xwui-table-header,
:is(.xwui-table-m,.xwui-table-md) .xwui-table-cell {
    padding: var(--spacing-sm, 0.75rem);
}

:is(.xwui-table-l,.xwui-table-lg) {
    font-size: var(--font-size-base, 0.9375rem);
}

:is(.xwui-table-l,.xwui-table-lg) .xwui-table-header,
:is(.xwui-table-l,.xwui-table-lg) .xwui-table-cell {
    padding: 1rem;
}

.xwui-table-xl { font-size: var(--font-size-base, 1.0625rem); }
.xwui-table-xl .xwui-table-header,
.xwui-table-xl .xwui-table-cell { padding: 1.25rem; }

:is(.xwui-table-2xl,.xwui-table-xxl) { font-size: var(--font-size-lg, 1.375rem); }
:is(.xwui-table-2xl,.xwui-table-xxl) .xwui-table-header,
:is(.xwui-table-2xl,.xwui-table-xxl) .xwui-table-cell { padding: 1.625rem; }

:is(.xwui-table-3xl,.xwui-table-xxxl) { font-size: var(--font-size-xl, 1.7rem); }
:is(.xwui-table-4xl,.xwui-table-xxxxl) { font-size: var(--font-size-xl, 1.7rem); }
:is(.xwui-table-3xl,.xwui-table-xxxl) .xwui-table-header,
:is(.xwui-table-3xl,.xwui-table-xxxl) .xwui-table-cell { padding: 2rem; }
:is(.xwui-table-4xl,.xwui-table-xxxxl) .xwui-table-header,
:is(.xwui-table-4xl,.xwui-table-xxxxl) .xwui-table-cell { padding: 3.2rem; }

/* Legacy size aliases */
.xwui-table-small { font-size: var(--font-size-sm, 0.8125rem); }
.xwui-table-small .xwui-table-header,
.xwui-table-small .xwui-table-cell { padding: var(--spacing-sm, 0.5rem); }
.xwui-table-medium .xwui-table-header,
.xwui-table-medium .xwui-table-cell { padding: var(--spacing-sm, 0.75rem); }
.xwui-table-large { font-size: var(--font-size-base, 0.9375rem); }
.xwui-table-large .xwui-table-header,
.xwui-table-large .xwui-table-cell { padding: 1rem; }

/* Density (M3, Fluent, Carbon) */
.xwui-table[data-density="compact"] .xwui-table-header,
.xwui-table[data-density="compact"] .xwui-table-cell {
    padding: var(--control-padding-y-compact) var(--control-padding-x-compact);
}
.xwui-table[data-density="comfortable"] .xwui-table-header,
.xwui-table[data-density="comfortable"] .xwui-table-cell {
    padding: var(--control-padding-y-comfortable) var(--control-padding-x-comfortable);
}
.xwui-table[data-density="spacious"] .xwui-table-header,
.xwui-table[data-density="spacious"] .xwui-table-cell {
    padding: var(--control-padding-y-spacious) var(--control-padding-x-spacious);
}

/* Bordered */
.xwui-table-bordered .xwui-table-header,
.xwui-table-bordered .xwui-table-cell {
    border: var(--border-table-width, var(--border-width-regular, 1.5px)) var(--border-table-style, solid) var(--border-table-color, var(--border-color));
}

/* Striped */
.xwui-table-striped .xwui-table-row:nth-child(even) {
    background: var(--bg-secondary);
}

/* Hoverable */
.xwui-table-hoverable .xwui-table-row:hover {
    background: var(--bg-secondary);
}

/* Header */
.xwui-table-header {
    font-weight: var(--font-weight-semibold, 600);
    text-align: left;
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.xwui-table-header-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
}

.xwui-table-header-sortable {
    cursor: pointer;
    user-select: none;
}

.xwui-table-header-sortable:hover {
    opacity: 0.8;
}

.xwui-table-sort-icon {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-secondary);
}

/* Row */
.xwui-table-row-selected {
    background: var(--bg-hover);
}

/* Cell */
.xwui-table-cell {
    color: var(--text-primary);
}

/* Select */
.xwui-table-select-header,
.xwui-table-select-cell {
    width: 40px;
    text-align: center;
}

/* Pagination */
.xwui-table-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md, 1rem);
    margin-top: var(--spacing-md, 1rem);
    padding: var(--spacing-md, 1rem);
}

.xwui-table-pagination-button {
    padding: var(--spacing-sm, 0.5rem) var(--spacing-sm, 0.75rem);
    border: var(--border-table-width, var(--border-width-regular, 1.5px)) var(--border-table-style, solid) var(--border-table-color, var(--border-color));
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: var(--radius-table, var(--radius-sm, 6px));
    cursor: pointer;
    transition: all 0.2s;
}

.xwui-table-pagination-button:hover:not(:disabled) {
    background: var(--bg-secondary);
    border-color: var(--accent-primary);
}

.xwui-table-pagination-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.xwui-table-pagination-info {
    color: var(--text-secondary);
    font-size: 0.875rem;
}


/* basic/XWUITabMenu/XWUITabMenu.css */
.xwui-tabmenu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs, 0.25rem);
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.xwui-tabmenu-underline .xwui-tabmenu-item-active {
  border-bottom: 2px solid var(--accent-primary, #4f46e5);
  margin-bottom: -1px;
}

.xwui-tabmenu-item {
  margin: 0;
}

.xwui-tabmenu-item-active .xwui-button-container .xwui-button {
  font-weight: 600;
}

/* basic/XWUITabs/XWUITabs.css */
/**
 * XWUITabs Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/tab/*.css (component-specific border widths)
 * - Roundness: theme/roundness/tab/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-tabs {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.xwui-tabs-vertical {
    flex-direction: row;
}

/* Tab list */
.xwui-tabs-list {
    display: flex;
    gap: 0;
}

.xwui-tabs-horizontal .xwui-tabs-list {
    flex-direction: row;
    border-bottom: var(--border-tab-width, var(--border-width-regular, 1.5px)) var(--border-tab-style, solid) var(--border-tab-color, var(--border-color, #dee2e6));
}

.xwui-tabs-vertical .xwui-tabs-list {
    flex-direction: column;
    border-right: var(--border-tab-width, var(--border-width-regular, 1.5px)) var(--border-tab-style, solid) var(--border-tab-color, var(--border-color, #dee2e6));
    min-width: 150px;
}

.xwui-tabs-centered .xwui-tabs-list {
    justify-content: center;
}

.xwui-tabs-full-width .xwui-tab {
    flex: 1;
}

/* Individual tab */
.xwui-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm, 0.5rem);
    border: none;
    background: transparent;
    cursor: pointer;
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-secondary, #6c757d);
    transition: color 0.2s, background 0.2s, border-color 0.2s;
    position: relative;
    white-space: nowrap;
}

.xwui-tab:hover:not(.xwui-tab-disabled) {
    color: var(--text-primary, #212529);
}

.xwui-tab-active {
    color: var(--accent-primary, #4f46e5);
}

.xwui-tab-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Size variants */
.xwui-tabs-small .xwui-tab {
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
    font-size: var(--font-size-sm, 0.8125rem);
}

.xwui-tabs-medium .xwui-tab {
    padding: var(--spacing-sm, 0.75rem) var(--spacing-lg, 1.25rem);
    font-size: var(--font-size-sm, 0.875rem);
}

.xwui-tabs-large .xwui-tab {
    padding: var(--spacing-md, 1rem) var(--spacing-lg, 1.5rem);
    font-size: var(--font-size-base, 1rem);
}

/* Line variant */
.xwui-tabs-line .xwui-tab-active::after {
    content: '';
    position: absolute;
    background: var(--accent-primary, #4f46e5);
}

.xwui-tabs-line.xwui-tabs-horizontal .xwui-tab-active::after {
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
}

.xwui-tabs-line.xwui-tabs-vertical .xwui-tab-active::after {
    right: -1px;
    top: 0;
    bottom: 0;
    width: 2px;
}

/* Card variant */
.xwui-tabs-card .xwui-tab {
    border: var(--border-tab-width, var(--border-width-regular, 1.5px)) var(--border-tab-style, solid) transparent;
    border-radius: var(--radius-tab, var(--radius-sm, 6px)) var(--radius-tab, var(--radius-sm, 6px)) 0 0;
    margin-bottom: -1px;
}

.xwui-tabs-card .xwui-tab-active {
    background: var(--bg-primary, #ffffff);
    border-color: var(--border-color, #dee2e6);
    border-bottom-color: transparent;
}

.xwui-tabs-card.xwui-tabs-vertical .xwui-tab {
    border-radius: var(--radius-tab, var(--radius-sm, 6px)) 0 0 var(--radius-tab, var(--radius-sm, 6px));
    margin-bottom: 0;
    margin-right: -1px;
}

.xwui-tabs-card.xwui-tabs-vertical .xwui-tab-active {
    border-right-color: transparent;
    border-bottom-color: var(--border-color, #dee2e6);
}

/* Button variant */
.xwui-tabs-button .xwui-tabs-list {
    gap: var(--spacing-xs, 0.25rem);
    padding: var(--spacing-xs, 0.25rem);
    background: var(--bg-secondary, #f8f9fa);
    border-radius: var(--radius-tab, var(--radius-md, 8px));
    border: none;
}

.xwui-tabs-button .xwui-tab {
    border-radius: var(--radius-tab, var(--radius-sm, 6px));
}

.xwui-tabs-button .xwui-tab-active {
    background: var(--bg-primary, #ffffff);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}

/* Tab icon */
.xwui-tab-icon {
    display: flex;
    align-items: center;
}

.xwui-tab-icon svg {
    width: 16px;
    height: 16px;
}

/* Tab content/panels */
.xwui-tabs-content {
    flex: 1;
}

.xwui-tab-panel {
    padding: var(--spacing-md, 1rem) 0;
}

.xwui-tabs-vertical .xwui-tab-panel {
    padding: 0 var(--spacing-md, 1rem);
}

.xwui-tab-panel[hidden] {
    display: none;
}

/* Dark theme */
[data-theme="dark"] .xwui-tabs-horizontal .xwui-tabs-list,
[data-theme="dark"] .xwui-tabs-vertical .xwui-tabs-list {
    border-color: var(--border-color, #334155);
}

[data-theme="dark"] .xwui-tab {
    color: var(--text-secondary, #94a3b8);
}

[data-theme="dark"] .xwui-tab:hover:not(.xwui-tab-disabled) {
    color: var(--text-primary, #f1f5f9);
}

[data-theme="dark"] .xwui-tabs-card .xwui-tab-active {
    background: var(--bg-primary, #0f172a);
    border-color: var(--border-color, #334155);
}

[data-theme="dark"] .xwui-tabs-button .xwui-tabs-list {
    background: var(--bg-secondary, #1e293b);
}

[data-theme="dark"] .xwui-tabs-button .xwui-tab-active {
    background: var(--bg-primary, #0f172a);
}


/* basic/XWUITabsSub/XWUITabsSub.css */
/* XWUITabsSub — compact secondary navigation strip
 * Pairs visually with XWUITabs (which is the primary). Designed for
 * authoring studios where a single screen carries multiple sub-modes.
 *
 * Class names:
 *   .xwui-tabs-sub                    — wrapper
 *   .xwui-tabs-sub-{small|medium}     — size modifier
 *   .xwui-tabs-sub-full-width         — stretch modifier
 *   .xwui-tabs-sub-item               — individual tab
 *   .xwui-tabs-sub-item-active        — active tab modifier
 *   .xwui-tabs-sub-item-disabled      — disabled tab modifier
 *   .xwui-tabs-sub-item-icon          — leading icon span
 *   .xwui-tabs-sub-item-label         — label span
 */

.xwui-tabs-sub {
    display: flex;
    align-items: stretch;
    gap: 4px;
    height: 36px;
    padding: 0 12px;
    background: var(--xwui-color-surface-1, #161a36);
    border-bottom: 1px solid var(--xwui-color-border, #2a2f55);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    flex-shrink: 0;
}

.xwui-tabs-sub-full-width { width: 100%; }

.xwui-tabs-sub-item {
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    color: var(--xwui-color-text-dim, #8a8fb5);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    user-select: none;
    transition: color 120ms ease, border-color 120ms ease;
}

.xwui-tabs-sub-small .xwui-tabs-sub-item { font-size: 10px; padding: 0 10px; }

.xwui-tabs-sub-item:hover {
    color: var(--xwui-color-text, #e6e9f7);
}

.xwui-tabs-sub-item-active {
    color: var(--xwui-color-accent, #41dcff);
    border-bottom-color: var(--xwui-color-accent, #41dcff);
}

.xwui-tabs-sub-item-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.xwui-tabs-sub-item-disabled:hover {
    color: var(--xwui-color-text-dim, #8a8fb5);
}

.xwui-tabs-sub-item-icon {
    font-size: 11px;
    line-height: 1;
}

.xwui-tabs-sub-item-label {
    line-height: 1;
}

/* basic/XWUITag/XWUITag.css */
/**
 * XWUITag Component Styles
 * Base tag component - simple, lightweight tag display
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Roundness: theme/roundness/container/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-tag, var(--radius-sm, 4px));
    font-weight: var(--font-weight-medium, 500);
    white-space: nowrap;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

/* Variants */
.xwui-tag-default {
    background: var(--bg-tag-default, var(--bg-secondary, #f8f9fa));
    color: var(--text-tag-default, var(--text-secondary, #6c757d));
    border: var(--border-tag-width, var(--border-width-thin, 1px)) var(--border-tag-style, solid) var(--border-tag-color, var(--border-color, #dee2e6));
}

.xwui-tag-primary {
    background: var(--bg-tag-primary, var(--accent-primary, #1890ff));
    color: var(--text-tag-primary, #ffffff);
    border: var(--border-tag-width, var(--border-width-thin, 1px)) var(--border-tag-style, solid) var(--border-tag-primary-color, var(--accent-primary, #1890ff));
}

.xwui-tag-success {
    background: var(--bg-tag-success, var(--color-success, #52c41a));
    color: var(--text-tag-success, #ffffff);
    border: var(--border-tag-width, var(--border-width-thin, 1px)) var(--border-tag-style, solid) var(--border-tag-success-color, var(--color-success, #52c41a));
}

.xwui-tag-warning {
    background: var(--bg-tag-warning, var(--color-warning, #faad14));
    color: var(--text-tag-warning, #ffffff);
    border: var(--border-tag-width, var(--border-width-thin, 1px)) var(--border-tag-style, solid) var(--border-tag-warning-color, var(--color-warning, #faad14));
}

.xwui-tag-error {
    background: var(--bg-tag-error, var(--color-error, #ff4d4f));
    color: var(--text-tag-error, #ffffff);
    border: var(--border-tag-width, var(--border-width-thin, 1px)) var(--border-tag-style, solid) var(--border-tag-error-color, var(--color-error, #ff4d4f));
}

/* Sizes */
.xwui-tag-small {
    padding: var(--spacing-tag-small-y, 0.125rem) var(--spacing-tag-small-x, 0.5rem);
    font-size: var(--font-size-xs, 0.75rem);
    line-height: 1.4;
}

.xwui-tag-medium {
    padding: var(--spacing-tag-medium-y, 0.25rem) var(--spacing-tag-medium-x, 0.75rem);
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.4;
}

.xwui-tag-large {
    padding: var(--spacing-tag-large-y, 0.375rem) var(--spacing-tag-large-x, 1rem);
    font-size: var(--font-size-base, 1rem);
    line-height: 1.5;
}

.xwui-tag-label {
    display: inline-block;
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */


/* basic/XWUITaskTemplateSelector/XWUITaskTemplateSelector.css */
/**
 * XWUITaskTemplateSelector Component Styles
 */

.xwui-task-template-selector {
    display: inline-block;
}

.xwui-task-template-selector-dialog {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 1rem);
    max-height: 70vh;
}

.xwui-task-template-selector-search {
    width: 100%;
}

.xwui-task-template-selector-categories {
    display: flex;
    justify-content: flex-start;
}

.xwui-task-template-selector-grid {
    overflow-y: auto;
    max-height: 50vh;
}


/* basic/XWUITaxBreakdown/XWUITaxBreakdown.css */
/* XWUITaxBreakdown - invoice / quote tax-totals rollup */

.xwui-tax-breakdown {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.625rem;
  font-family: var(--font-body, inherit);
  color: var(--text-primary);
  background: var(--bg-primary);
  border-radius: var(--radius-sm, 4px);
  font-variant-numeric: tabular-nums;
  max-width: 26rem;
}

.xwui-tax-breakdown-default  { background: transparent; padding: 0; }
.xwui-tax-breakdown-outlined { border: 1px solid var(--border-color); }
.xwui-tax-breakdown-filled   { background: var(--bg-elevated); }

.xwui-tax-breakdown-compact { gap: 0.125rem; padding: 0.375rem 0.5rem; font-size: 0.8125rem; }

.xwui-tax-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.25rem 0;
  font-size: 0.875rem;
}

.xwui-tax-breakdown-label {
  color: var(--text-secondary);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.xwui-tax-breakdown-amount {
  color: var(--text-primary);
  text-align: right;
  flex: 0 0 auto;
}

.xwui-tax-breakdown-row-subtotal { border-bottom: 1px dashed var(--border-light, var(--border-color)); padding-bottom: 0.375rem; margin-bottom: 0.125rem; }
.xwui-tax-breakdown-row-tax      { color: var(--text-secondary); }
.xwui-tax-breakdown-row-total {
  margin-top: 0.25rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-color);
  font-weight: 700;
}
.xwui-tax-breakdown-row-total .xwui-tax-breakdown-label { color: var(--text-primary); font-weight: 600; }

.xwui-tax-breakdown-input {
  width: 6.5rem;
  padding: 0.125rem 0.375rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-primary);
  color: inherit;
  font: inherit;
  text-align: right;
  font-variant-numeric: tabular-nums;
  outline: none;
}
.xwui-tax-breakdown-input:focus { border-color: var(--role-primary-bg, #337ea9); box-shadow: 0 0 0 2px rgba(51,126,169,0.20); }

/* basic/XWUITerminal/XWUITerminal.css */
.xwui-terminal {
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  font-family: ui-monospace, monospace;
  font-size: var(--font-size-sm, 0.875rem);
}

.xwui-terminal-dark {
  background: var(--bg-console, var(--bg-primary));
  color: var(--text-primary);
}

.xwui-terminal-light {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

.xwui-terminal-scroll {
  max-height: 20rem;
  overflow: auto;
  padding: var(--spacing-md, 1rem);
}

.xwui-terminal-output {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
}

/* basic/XWUITester/XWUITester.css */
/* XWUITester — Header + sidebar + toolbar + preview */

/* Full-viewport reset for the tester-view chrome. !important defeats inline
   <style> rules in individual Tester*.html sources (e.g. `body { max-width:
   1200px; padding: 2rem; margin: 0 auto; }`) which would otherwise constrain
   the chrome and leave a dead band on the right of the viewport.

   SCOPED with :has(#tester-container) — every tester host page mounts the view
   into <div id="tester-container">. Unscoped, this `html, body` rule shipped in
   the combined component bundle (components-all.css) and locked html/body to
   the viewport with overflow:hidden on EVERY page that loads the bundle,
   silently killing page scroll on consumer apps and the examples gallery. */
html:has(#tester-container),
body:has(#tester-container) { margin: 0 !important; padding: 0 !important; overflow: hidden; height: 100%; max-width: none !important; width: auto !important; }
#tester-container { margin: 0; padding: 0; height: 100%; }

.tester-container { display: flex; flex-direction: column; height: 100vh; overflow: hidden; background: var(--bg-elevated, #fff); margin: 0; }

/* ===== DARK HEADER ===== */
.tester-header { display: flex; align-items: center; padding: 0 16px; height: 50px; min-height: 50px; background: transparent; color: var(--text-primary, #111827); flex-shrink: 0; gap: 12px; border-bottom: 1px solid var(--border-color, #e5e7eb); }
.tester-header-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.tester-header-logo { flex-shrink: 0; padding-right: 12px; border-right: 1px solid var(--border-color, #e5e7eb); display: flex; align-items: center; }
.tester-header-icon { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--bg-secondary, #f3f4f6); border-radius: 4px; padding: 3px; }
.tester-header-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tester-header-text { flex: 1; min-width: 0; }
.tester-header-text h1 { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--text-primary, #111827); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tester-header-text p { margin: 0; font-size: 0.75rem; color: var(--text-secondary, #6b7280); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== BODY ===== */
.tester-body { display: flex; flex: 1; min-height: 0; overflow: hidden; }

/* ===== SIDEBAR ===== */
.tester-sidebar { width: 230px; min-width: 230px; border-right: 1px solid var(--border-color, #e5e7eb); background: var(--bg-elevated, #fff); overflow-y: auto; overflow-x: hidden; flex-shrink: 0; font-size: 13px; transition: width 0.2s, min-width 0.2s, padding 0.2s, opacity 0.2s; }
.tester-sidebar.collapsed { width: 0; min-width: 0; padding: 0; overflow: hidden; border-right: none; opacity: 0; }

/* Sidebar toggle button */
.tester-sidebar-toggle { position: relative; z-index: 5; width: 16px; flex-shrink: 0; border: none; border-right: 1px solid var(--border-color, #e5e7eb); background: var(--bg-secondary, #f9fafb); color: var(--text-tertiary, #9ca3af); cursor: pointer; font-size: 10px; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; }
.tester-sidebar-toggle:hover { background: var(--bg-hover, #f3f4f6); color: var(--text-primary, #111827); }
.tester-sidebar-loading { padding: 16px; color: var(--text-tertiary, #9ca3af); font-size: 12px; }
.tester-tree-group { border-bottom: 1px solid var(--border-light, #f3f4f6); }
.tester-tree-tier { display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 12px; border: none; background: var(--bg-secondary, #f9fafb); color: var(--text-primary, #111827); font-size: 12px; font-weight: 700; font-family: inherit; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; text-align: left; }
.tester-tree-tier:hover { background: var(--bg-hover, #f3f4f6); }
.tester-tree-arrow { display: inline-block; font-size: 8px; transition: transform 0.15s; color: var(--text-tertiary, #9ca3af); }
.tester-tree-arrow.open { transform: rotate(90deg); }
.tester-tree-count { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--text-secondary, #6b7280); }
.tester-tree-tier-list { padding: 2px 0; }
.tester-tree-component { display: flex; flex-direction: column; }
.tester-tree-component.active > .tester-tree-component-name { color: var(--role-primary-bg, #6366f1); background: var(--bg-active, rgba(99,102,241,0.06)); font-weight: 600; }
.tester-tree-component-name { display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 18px; color: var(--text-primary, #374151); text-decoration: none; font-size: 12.5px; line-height: 1.4; transition: background 0.1s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tester-tree-component-name:hover { background: var(--bg-hover, #f3f4f6); color: var(--role-primary-bg, #6366f1); }
.tester-tree-icon { width: 16px; height: 16px; flex-shrink: 0; object-fit: contain; opacity: 0.7; }
.tester-tree-tester { display: block; padding: 2px 12px 2px 40px; color: var(--text-secondary, #6b7280); text-decoration: none; font-size: 11.5px; line-height: 1.4; transition: background 0.1s; }
.tester-tree-tester:hover { background: var(--bg-hover, #f3f4f6); color: var(--role-primary-bg, #6366f1); }

/* ===== MAIN ===== */
.tester-main { flex: 1; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

/* ===== TOOLBAR ===== */
.tester-toolbar { display: flex; align-items: center; justify-content: space-between; height: 44px; min-height: 44px; padding: 0 16px; border-bottom: 1px solid var(--border-color, #e5e7eb); background: var(--bg-elevated, #fff); gap: 16px; flex-shrink: 0; z-index: 10; }
.tester-toolbar-left, .tester-toolbar-center, .tester-toolbar-right { display: flex; align-items: center; gap: 4px; }
.tester-toolbar-left { gap: 0; }
.tester-toolbar-right { gap: 8px; }
.tester-toolbar-theme { display: flex; align-items: center; }

.tester-toolbar-tab { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border: none; background: none; color: var(--text-secondary, #6b7280); font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer; border-bottom: 2px solid transparent; height: 43px; transition: color 0.15s, border-color 0.15s; }
.tester-toolbar-tab:hover { color: var(--text-primary, #111827); }
.tester-toolbar-tab.active { color: var(--role-primary-bg, #6366f1); border-bottom-color: var(--role-primary-bg, #6366f1); }
.tester-toolbar-tab-icon { display: inline-flex; align-items: center; }

.tester-toolbar-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid transparent; border-radius: var(--radius-sm, 6px); background: none; color: var(--text-tertiary, #9ca3af); cursor: pointer; transition: color 0.15s, background 0.15s, border-color 0.15s; }
.tester-toolbar-icon-btn:hover { color: var(--text-primary, #111827); background: var(--bg-hover, #f3f4f6); }
.tester-toolbar-icon-btn.active { color: var(--role-primary-bg, #6366f1); background: var(--bg-active, rgba(99,102,241,0.08)); border-color: var(--role-primary-bg, #6366f1); }
.tester-toolbar-icon-btn svg, .tester-toolbar-tab svg { color: inherit; stroke: currentColor; }

/* ===== PREVIEW AREA ===== */
.tester-preview-area { flex: 1; overflow: auto; padding: 24px; background-color: var(--bg-secondary, #f9fafb); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M 24 0 L 0 0 0 24' fill='none' stroke='%23e5e7eb' stroke-width='0.5'/%3E%3C/svg%3E"); background-size: 24px 24px; border-top: 2px solid var(--role-primary-bg, #6366f1); }
.test-area { display: flex; flex-direction: column; gap: 20px; }

/* ===== CODE AREA ===== */
.tester-code-area { flex: 1; overflow: auto; background: #1e1e1e; }
.tester-code-area pre { margin: 0; padding: 20px; font-family: 'Fira Code','Cascadia Code','JetBrains Mono','Consolas',monospace; font-size: 13px; line-height: 1.6; color: #d4d4d4; white-space: pre-wrap; word-wrap: break-word; }
.tester-code-area code { font-family: inherit; }

/* ===== CONSOLE AREA ===== */
.tester-console-area { flex: 1; overflow: auto; background: #1a1a2e; min-height: 200px; }

/* ===== STATUS (hidden — messages go to console) ===== */
.status { display: none; }

/* ===== CONSOLE ENTRIES ===== */
.tester-console-entry { padding: 4px 12px; font-family: 'Fira Code','Cascadia Code','JetBrains Mono','Consolas',monospace; font-size: 12px; line-height: 1.6; color: #d4d4d4; border-bottom: 1px solid rgba(255,255,255,0.05); }
.tester-console-time { color: #6b7280; }
.tester-console-type { font-weight: 600; }
.tester-console-success .tester-console-type { color: #4ade80; }
.tester-console-error .tester-console-type { color: #f87171; }
.tester-console-info .tester-console-type { color: #60a5fa; }

/* ===== EMBEDDED MODE (toolbar + preview only, no header/sidebar) ===== */
.tester-embedded { height: auto; border: 1px solid var(--border-color, #e5e7eb); border-radius: var(--radius-md, 8px); overflow: hidden; }
.tester-embedded .tester-main { overflow: visible; }
.tester-embedded .tester-preview-area { max-height: 500px; overflow: auto; }
.tester-embedded .tester-code-area { max-height: 400px; }
.tester-embedded .tester-console-area { max-height: 300px; }

/* ===== HIDDEN ===== */
.test-controls { display: none; }
/* Hide inline console — output goes to Console tab now */
#xwui-console { display: none !important; }

/* ===== VIEWPORT SIM ===== */
.tester-preview-viewport-active { display: flex; align-items: center; justify-content: center; }
.platform-viewport-inline { background: var(--bg-elevated, #fff); border: 2px solid var(--border-color, #d1d5db); border-radius: var(--radius-lg, 12px); box-shadow: 0 4px 24px rgba(0,0,0,0.08); overflow: hidden; flex-shrink: 0; }
.platform-viewport-inline-scroll { width: 100%; height: 100%; overflow: auto; }
.platform-viewport-content { box-sizing: border-box; padding: 16px; }

/* ===== PANEL (for addPanel() API) ===== */
.tester-panel { background: var(--bg-elevated, #fff); border: 1px solid var(--border-color, #e5e7eb); border-radius: var(--radius-md, 8px); overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.tester-panel-header { padding: 16px 20px 12px; }
.tester-panel-header h2 { margin: 0; font-size: 1.125rem; font-weight: 600; color: var(--text-primary, #111827); }
.tester-panel-header p { margin: 4px 0 0; font-size: 0.8125rem; color: var(--text-secondary, #6b7280); }
.tester-panel-toolbar { display: flex; align-items: center; justify-content: space-between; height: 42px; padding: 0 12px; border-top: 1px solid var(--border-light, #f3f4f6); border-bottom: 1px solid var(--border-light, #f3f4f6); background: var(--bg-secondary, #fafbfc); gap: 12px; }
.tester-panel-preview { padding: 20px; min-height: 80px; background-color: var(--bg-secondary, #f9fafb); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M 24 0 L 0 0 0 24' fill='none' stroke='%23e5e7eb' stroke-width='0.5'/%3E%3C/svg%3E"); background-size: 24px 24px; }
.tester-panel-code { background: #1e1e1e; }
.tester-panel-code pre { margin: 0; padding: 16px; font-family: 'Fira Code','Cascadia Code','JetBrains Mono','Consolas',monospace; font-size: 12px; line-height: 1.5; color: #d4d4d4; white-space: pre-wrap; word-wrap: break-word; }
.tester-panel-code code { font-family: inherit; }
.tester-panel-console { min-height: 120px; background: #1a1a2e; }
.tester-panels { display: flex; flex-direction: column; gap: 20px; }

/* ===== SETTINGS DRAWER ===== */
.xwui-menu-drawer .xwui-drawer-body.xwui-drawer-body-with-tabs { overflow: hidden !important; display: flex !important; flex-direction: column !important; padding: 0 !important; height: 100% !important; }
.xwui-menu-drawer .xwui-drawer-body.xwui-drawer-body-with-tabs > div:first-child { overflow-y: auto !important; flex: 1 1 auto !important; min-height: 0 !important; }
.xwui-menu-drawer .xwui-tabs { height: 100% !important; display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; }
.xwui-menu-drawer .xwui-tabs-list { flex-shrink: 0 !important; }
.xwui-menu-drawer .xwui-tabs-content { flex: 1 1 auto !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; height: 0 !important; }
.xwui-menu-drawer .xwui-tab-panel { flex: 1 1 auto !important; overflow-y: auto !important; padding: var(--spacing-md, 1rem) !important; box-sizing: border-box !important; height: 100% !important; }
.xwui-menu-drawer .xwui-tab-panel[hidden] { display: none !important; height: 0 !important; flex: 0 0 0 !important; }

/* basic/XWUITextarea/XWUITextarea.css */
/**
 * XWUITextarea Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/input/*.css (component-specific border widths)
 * - Roundness: theme/roundness/input/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-textarea-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.375rem);
}

.xwui-textarea-full-width {
    width: 100%;
}

/* Label */
.xwui-textarea-label {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    font-family: var(--font-label-family, var(--font-family-base, sans-serif));
    color: var(--text-primary, #212529);
}

.xwui-textarea-required {
    color: var(--accent-error, #ef4444);
}

/* Textarea element */
.xwui-textarea {
    width: 100%;
    border-radius: var(--radius-input, var(--radius-md, 6px));
    font-family: var(--font-input-family, var(--font-family-base, inherit));
    color: var(--text-primary, #212529);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    min-height: 80px;
}

.xwui-textarea::placeholder {
    color: var(--text-tertiary, #adb5bd);
}

/* Outlined variant */
.xwui-textarea-outlined .xwui-textarea {
    border: var(--border-input-width, var(--border-width-regular, 1.5px)) var(--border-input-style, solid) var(--border-input-color, var(--border-color, #dee2e6));
    background: var(--bg-primary, #ffffff);
}

.xwui-textarea-outlined .xwui-textarea:hover {
    border-color: var(--border-strong, #adb5bd);
}

.xwui-textarea-outlined.xwui-textarea-focused .xwui-textarea {
    border-color: var(--accent-primary, #4f46e5);
    box-shadow: var(--shadow-xs);
    outline: none;
}

/* Filled variant */
.xwui-textarea-filled .xwui-textarea {
    border: var(--border-input-width, var(--border-width-regular, 1.5px)) var(--border-input-style, solid) transparent;
    background: var(--bg-secondary, #f8f9fa);
}

.xwui-textarea-filled .xwui-textarea:hover {
    background: var(--bg-tertiary, #f1f3f5);
}

.xwui-textarea-filled.xwui-textarea-focused .xwui-textarea {
    background: var(--bg-primary, #ffffff);
    border-color: var(--accent-primary, #4f46e5);
    outline: none;
}

/* Size variants */
.xwui-textarea-small .xwui-textarea {
    padding: var(--spacing-sm, 0.5rem) var(--spacing-sm, 0.75rem);
    font-size: var(--font-size-sm, 0.875rem);
}

.xwui-textarea-medium .xwui-textarea {
    padding: var(--spacing-sm, 0.75rem) var(--spacing-sm, 0.875rem);
    font-size: var(--font-size-base, 0.9375rem);
}

.xwui-textarea-large .xwui-textarea {
    padding: var(--spacing-md, 1rem);
    font-size: var(--font-size-base, 1rem);
}

/* Footer (helper text + character count) */
.xwui-textarea-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
}

.xwui-textarea-helper {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-secondary, #6c757d);
}

.xwui-textarea-helper-error {
    color: var(--accent-error, #ef4444);
}

.xwui-textarea-count {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-tertiary, #adb5bd);
    margin-left: auto;
}

/* Error state */
.xwui-textarea-error .xwui-textarea {
    border-color: var(--accent-error, #ef4444) !important;
}

.xwui-textarea-error.xwui-textarea-focused .xwui-textarea {
    box-shadow: var(--shadow-xs);
}

.xwui-textarea-error .xwui-textarea-label {
    color: var(--accent-error, #ef4444);
}

/* Disabled state */
.xwui-textarea-disabled .xwui-textarea {
    background: var(--bg-secondary, #f8f9fa);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */


/* basic/XWUITextOverlay/XWUITextOverlay.css */
/**
 * XWUITextOverlay Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 */

.xwui-text-overlay-container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Toolbar */
.xwui-text-overlay-toolbar {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 0.5rem);
    padding: var(--spacing-sm, 0.75rem);
    background: var(--bg-secondary, #f8f9fa);
    border-bottom: var(--border-width-regular, 1px) solid var(--border-color, #e0e0e0);
    border-radius: var(--radius-sm, 4px) var(--radius-sm, 4px) 0 0;
}

.xwui-text-overlay-toolbar label {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-primary, #212529);
}

.xwui-text-overlay-toolbar input[type="number"],
.xwui-text-overlay-toolbar select,
.xwui-text-overlay-toolbar input[type="color"] {
    padding: var(--spacing-xs, 0.375rem);
    border: var(--border-width-regular, 1px) solid var(--border-color, #e0e0e0);
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-primary, #ffffff);
    color: var(--text-primary, #212529);
    font-size: var(--font-size-sm, 0.875rem);
}

.xwui-text-overlay-toolbar button {
    padding: var(--spacing-xs, 0.375rem) var(--spacing-sm, 0.75rem);
    border: var(--border-width-regular, 1px) solid var(--border-color, #e0e0e0);
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-primary, #ffffff);
    color: var(--text-primary, #212529);
    cursor: pointer;
    font-size: var(--font-size-sm, 0.875rem);
    transition: all 0.2s ease;
}

.xwui-text-overlay-toolbar button:hover {
    background: var(--bg-hover, #f8f9fa);
}

/* Text Overlay Item */
.xwui-text-overlay-item {
    cursor: move;
    user-select: none;
    padding: var(--spacing-xs, 0.25rem);
    border-radius: var(--radius-sm, 4px);
    transition: all 0.1s ease;
}

.xwui-text-overlay-item:hover {
    background: var(--bg-hover, rgba(79, 70, 229, 0.1));
}

.xwui-text-overlay-item.selected {
    outline: 2px solid var(--accent-primary, #4f46e5);
    outline-offset: 2px;
}


/* basic/XWUIThemeIcon/XWUIThemeIcon.css */
/**
 * XWUIThemeIcon Component Styles
 * Mantine ThemeIcon: icon with background, size, radius.
 */
.xwui-theme-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
}

.xwui-theme-icon-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  line-height: 1;
}

/* Radius */
.xwui-theme-icon-radius-xs { border-radius: 2px; }
:is(.xwui-theme-icon-radius-s,.xwui-theme-icon-radius-sm) { border-radius: 4px; }
:is(.xwui-theme-icon-radius-m,.xwui-theme-icon-radius-md) { border-radius: 8px; }
:is(.xwui-theme-icon-radius-l,.xwui-theme-icon-radius-lg) { border-radius: 12px; }
.xwui-theme-icon-radius-xl { border-radius: 16px; }
.xwui-theme-icon-radius-round { border-radius: 999px; }
.xwui-theme-icon-radius-full { border-radius: 9999px; }

/* Variants - use data-color for theme */
.xwui-theme-icon-default {
  background: var(--color-theme-icon-bg, rgba(0,0,0,0.06));
  color: var(--color-theme-icon-fg, var(--text-primary));
}

.xwui-theme-icon-light {
  background: var(--color-theme-icon-light-bg, rgba(25, 118, 210, 0.12));
  color: var(--color-theme-icon-light-fg, var(--accent-primary));
}

.xwui-theme-icon-filled {
  background: var(--color-theme-icon-filled-bg, var(--accent-primary));
  color: var(--color-theme-icon-filled-fg, var(--role-primary-fg));
}

.xwui-theme-icon-outline {
  background: transparent;
  border: 1px solid var(--color-theme-icon-outline-border, var(--accent-primary));
  color: var(--accent-primary);
}

/* basic/XWUIThing/XWUIThing.css */
/**
 * XWUIThing Component Styles
 * Naive UI Thing parity: entity display with avatar, title, description, action.
 */
.xwui-thing {
  display: block;
}

.xwui-thing-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.xwui-thing-avatar {
  flex-shrink: 0;
}

.xwui-thing-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

:is(.xwui-thing--size-s,.xwui-thing--size-sm) .xwui-thing-avatar img {
  width: 32px;
  height: 32px;
}

:is(.xwui-thing--size-l,.xwui-thing--size-lg) .xwui-thing-avatar img {
  width: 56px;
  height: 56px;
}

.xwui-thing-body {
  flex: 1;
  min-width: 0;
}

.xwui-thing-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--text-primary);
  line-height: 1.4;
}

:is(.xwui-thing--size-s,.xwui-thing--size-sm) .xwui-thing-title {
  font-size: 0.875rem;
}

:is(.xwui-thing--size-l,.xwui-thing--size-lg) .xwui-thing-title {
  font-size: 1.125rem;
}

.xwui-thing-description {
  margin-top: 4px;
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.xwui-thing-action {
  flex-shrink: 0;
}

/* basic/XWUITimeline/XWUITimeline.css */
/**
 * XWUITimeline Component Styles - Production Quality
 * 100% Styles System Integration
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Typography: theme/typography/*.css
 */

/* ============================================
   TIMELINE ROOT (ul)
   ============================================ */
.xwui-timeline {
    position: relative;
    padding: var(--spacing-md, 1rem) 0;
    margin: 0;
    list-style: none;
    width: 100%;
}

/* ============================================
   TIMELINE ITEM (li)
   ============================================ */
.xwui-timeline__item {
    position: relative;
    display: flex;
    gap: var(--spacing-md, 1rem);
    padding-bottom: var(--spacing-xl, 2rem);
    align-items: flex-start;
    min-height: 48px;
}

.xwui-timeline__item:last-child {
    padding-bottom: 0;
}

/* Clickable item */
.xwui-timeline__item[role="button"] {
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
    border-radius: var(--radius-sm, 4px);
    margin: 0 calc(var(--spacing-xs, 0.5rem) * -1);
    padding-left: var(--spacing-xs, 0.5rem);
    padding-right: var(--spacing-xs, 0.5rem);
}

.xwui-timeline__item[role="button"]:hover {
    background-color: var(--bg-hover, rgba(0, 0, 0, 0.04));
}

.xwui-timeline__item[role="button"]:active {
    transform: scale(0.98);
    background-color: var(--bg-active, rgba(0, 0, 0, 0.08));
}

.xwui-timeline__item[role="button"]:focus-visible {
    outline: var(--border-width-thick) solid var(--accent-primary, var(--control-active));
    outline-offset: 2px;
}

/* ============================================
   TIMELINE SEPARATOR (contains dot and connector)
   ============================================ */
.xwui-timeline__separator {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    z-index: 1;
}

/* ============================================
   TIMELINE DOT
   ============================================ */
.xwui-timeline__dot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    transition: all 0.2s ease;
}

/* Dot size variants */
:is(.xwui-timeline--dot-s,.xwui-timeline--dot-sm) .xwui-timeline__dot {
    width: 16px;
    height: 16px;
}

:is(.xwui-timeline--dot-m,.xwui-timeline--dot-md) .xwui-timeline__dot {
    width: 24px;
    height: 24px;
}

:is(.xwui-timeline--dot-l,.xwui-timeline--dot-lg) .xwui-timeline__dot {
    width: 32px;
    height: 32px;
}

/* Dot variants */
.xwui-timeline__dot--filled {
    background-color: var(--accent-primary, var(--control-active));
    border: none;
}

.xwui-timeline__dot--outlined {
    background-color: transparent;
    border: var(--border-width-thick) solid var(--accent-primary, var(--control-active));
}

.xwui-timeline__dot--default {
    background-color: transparent;
    border: none;
}

/* Inner dot for filled/default variants */
.xwui-timeline__dot-inner {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--text-inverse, #fff);
}

:is(.xwui-timeline--dot-s,.xwui-timeline--dot-sm) .xwui-timeline__dot-inner {
    width: 6px;
    height: 6px;
}

:is(.xwui-timeline--dot-l,.xwui-timeline--dot-lg) .xwui-timeline__dot-inner {
    width: 10px;
    height: 10px;
}

/* Dot with icon */
.xwui-timeline__dot--with-icon {
    font-size: 0.875em;
    color: var(--text-inverse, #fff);
}

.xwui-timeline__dot--with-icon svg {
    width: 100%;
    height: 100%;
}

/* Color variants - Filled */
.xwui-timeline__dot--filled-primary {
    background-color: var(--accent-primary, var(--control-active));
}

.xwui-timeline__dot--filled-secondary {
    background-color: var(--accent-light, var(--accent-primary));
}

.xwui-timeline__dot--filled-success {
    background-color: var(--accent-success);
}

.xwui-timeline__dot--filled-warning {
    background-color: var(--accent-warning);
}

.xwui-timeline__dot--filled-error {
    background-color: var(--accent-error);
}

.xwui-timeline__dot--filled-info {
    background-color: var(--accent-primary, var(--control-active));
}

.xwui-timeline__dot--filled-grey {
    background-color: var(--text-secondary, #666);
}

/* Color variants - Outlined */
.xwui-timeline__dot--outlined.xwui-timeline__dot--color-primary {
    border-color: var(--accent-primary, var(--control-active));
}

.xwui-timeline__dot--outlined.xwui-timeline__dot--color-secondary {
    border-color: var(--accent-light, var(--accent-primary));
}

.xwui-timeline__dot--outlined.xwui-timeline__dot--color-success {
    border-color: var(--accent-success);
}

.xwui-timeline__dot--outlined.xwui-timeline__dot--color-warning {
    border-color: var(--accent-warning);
}

.xwui-timeline__dot--outlined.xwui-timeline__dot--color-error {
    border-color: var(--accent-error);
}

.xwui-timeline__dot--outlined.xwui-timeline__dot--color-info {
    border-color: var(--accent-primary, var(--control-active));
}

.xwui-timeline__dot--outlined.xwui-timeline__dot--color-grey {
    border-color: var(--text-secondary, #666);
}

/* ============================================
   TIMELINE CONNECTOR (line between items)
   ============================================ */
.xwui-timeline__connector {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: calc(100% - 8px);
    background-color: var(--border-color, var(--control-border));
    flex-shrink: 0;
    margin-top: var(--spacing-xs, 0.5rem);
}

.xwui-timeline__item:last-child .xwui-timeline__connector {
    display: none;
}

/* ============================================
   TIMELINE CONTENT
   ============================================ */
.xwui-timeline__content {
    flex: 1;
    padding-top: 0.25rem;
    min-width: 0; /* Prevent flex item overflow */
}

.xwui-timeline__date {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-secondary, var(--control-text-secondary));
    margin-bottom: var(--spacing-xs, 0.5rem);
    font-weight: var(--font-weight-medium, 500);
}

.xwui-timeline__title {
    font-weight: var(--font-weight-semibold, 600);
    font-size: var(--font-size-base, 0.9375rem);
    color: var(--text-primary, var(--control-text));
    margin-bottom: var(--spacing-xs, 0.5rem);
    line-height: 1.4;
}

.xwui-timeline__description {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary, var(--control-text-secondary));
    line-height: 1.5;
}

/* ============================================
   TIMELINE OPPOSITE CONTENT
   ============================================ */
.xwui-timeline__opposite-content {
    flex: 1;
    padding-top: 0.25rem;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary, var(--control-text-secondary));
    text-align: right;
}

/* ============================================
   POSITION VARIANTS
   ============================================ */

/* Left position (default) */
.xwui-timeline--position-left .xwui-timeline__item {
    flex-direction: row;
}

.xwui-timeline--position-left .xwui-timeline__opposite-content {
    display: none;
}

/* Right position */
.xwui-timeline--position-right .xwui-timeline__item {
    flex-direction: row-reverse;
}

.xwui-timeline--position-right .xwui-timeline__content {
    text-align: right;
}

.xwui-timeline--position-right .xwui-timeline__opposite-content {
    display: none;
}

/* Alternate position */
.xwui-timeline--position-alternate .xwui-timeline__item--position-left {
    flex-direction: row;
}

.xwui-timeline--position-alternate .xwui-timeline__item--position-right {
    flex-direction: row-reverse;
}

.xwui-timeline--position-alternate .xwui-timeline__item--position-right .xwui-timeline__content {
    text-align: right;
}

/* Alternate reverse position */
.xwui-timeline--position-alternate-reverse .xwui-timeline__item--position-left {
    flex-direction: row-reverse;
}

.xwui-timeline--position-alternate-reverse .xwui-timeline__item--position-right {
    flex-direction: row;
}

.xwui-timeline--position-alternate-reverse .xwui-timeline__item--position-left .xwui-timeline__content {
    text-align: right;
}

/* Missing opposite content - adjust layout */
.xwui-timeline__item--missing-opposite-content {
    /* When opposite content is missing, content takes full width */
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 768px) {
    .xwui-timeline__item {
        flex-direction: row !important;
    }
    
    .xwui-timeline__content {
        text-align: left !important;
    }
    
    .xwui-timeline__opposite-content {
        display: none;
    }
    
    .xwui-timeline--position-alternate .xwui-timeline__item,
    .xwui-timeline--position-alternate-reverse .xwui-timeline__item {
        flex-direction: row !important;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */
.xwui-timeline__item[aria-hidden="true"] {
    display: none;
}

/* Screen reader only */
.xwui-timeline__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes xwui-timeline-item-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.xwui-timeline__item {
    animation: xwui-timeline-item-fade-in 0.3s ease forwards;
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */
/* Dark mode is automatically handled via theme/colors/{theme}.css files */
/* Custom overrides can be added here if needed */


/* basic/XWUITimelineZoom/XWUITimelineZoom.css */
/**
 * XWUITimelineZoom Component Styles
 */

.xwui-timeline-zoom {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md, 1rem);
    width: 100%;
}

.xwui-timeline-zoom-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-md, 1rem);
    padding: var(--spacing-sm, 0.5rem);
    background: var(--bg-secondary, #f8f9fa);
    border-radius: var(--radius-md, 8px);
}

.xwui-timeline-zoom-selector {
    flex: 0 0 auto;
}

.xwui-timeline-zoom-calendar {
    flex: 0 0 auto;
}

.xwui-timeline-zoom-navigation {
    display: flex;
    gap: var(--spacing-xs, 0.25rem);
    margin-left: auto;
}

.xwui-timeline-zoom-nav-btn {
    padding: var(--spacing-xs, 0.25rem) var(--spacing-sm, 0.5rem);
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    font-size: var(--font-size-base, 1rem);
    transition: all 0.2s ease;
}

.xwui-timeline-zoom-nav-btn:hover {
    background: var(--bg-hover, #f8f9fa);
    border-color: var(--accent-primary, #4f46e5);
}

.xwui-timeline-zoom-content {
    flex: 1;
    overflow: hidden;
}


/* basic/XWUITimePicker/XWUITimePicker.css */
/**
 * XWUITimePicker Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Roundness: theme/roundness/rounded.css (global roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-time-picker {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
}

.xwui-time-picker-select {
    padding: var(--spacing-sm, 0.5rem) var(--spacing-sm, 0.75rem);
    border: var(--border-input-width, var(--border-width-regular, 1.5px)) var(--border-input-style, solid) var(--border-input-color, var(--border-color));
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: var(--radius-input, var(--radius-sm, 6px));
    font-size: var(--font-size-sm, 0.875rem);
    cursor: pointer;
    transition: all 0.2s;
}

.xwui-time-picker-select:hover {
    border-color: var(--accent-primary);
}

.xwui-time-picker-select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-xs, 0 0 0 3px var(--bg-hover));
}

.xwui-time-picker-separator {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-secondary);
    font-size: var(--font-size-lg, 1.125rem);
}


/* basic/XWUITitled/XWUITitled.css */
/**
 * XWUITitled Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Typography: theme/typography/*.css
 */

.xwui-titled {
    display: flex;
    gap: var(--spacing-md, 1rem);
    align-items: flex-start;
}

.xwui-titled-icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--text-secondary, #6c757d);
}

.xwui-titled-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.25rem);
}

.xwui-titled-title {
    margin: 0;
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary, #212529);
    line-height: 1.4;
}

.xwui-titled-subtitle {
    margin: 0;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary, #6c757d);
    line-height: 1.4;
}

.xwui-titled-body {
    margin-top: var(--spacing-xs, 0.25rem);
    color: var(--text-primary, #212529);
    font-size: var(--font-size-base, 1rem);
    line-height: 1.5;
}

/* Note: Dark theme support is handled automatically via theme/colors/{theme}.css files */


/* basic/XWUIToast/XWUIToast.css */
/**
 * XWUIToast Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/toast/*.css (component-specific border widths)
 * - Roundness: theme/roundness/toast/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-toast-container {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 0.75rem);
    z-index: 10000;
    pointer-events: none;
}

.xwui-toast-top-right {
    top: var(--spacing-md, 1rem);
    right: var(--spacing-md, 1rem);
}

.xwui-toast-top-left {
    top: var(--spacing-md, 1rem);
    left: var(--spacing-md, 1rem);
}

.xwui-toast-top-center {
    top: var(--spacing-md, 1rem);
    left: 50%;
    transform: translateX(-50%);
}

.xwui-toast-bottom-right {
    bottom: var(--spacing-md, 1rem);
    right: var(--spacing-md, 1rem);
}

.xwui-toast-bottom-left {
    bottom: var(--spacing-md, 1rem);
    left: var(--spacing-md, 1rem);
}

.xwui-toast-bottom-center {
    bottom: var(--spacing-md, 1rem);
    left: 50%;
    transform: translateX(-50%);
}

/* Toast */
.xwui-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm, 0.75rem);
    min-width: 300px;
    max-width: 420px;
    padding: var(--spacing-md, 1rem);
    background: var(--bg-primary, #ffffff);
    border-radius: var(--radius-toast, var(--radius-md, 8px));
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
    border: var(--border-toast-width, var(--border-width-regular, 1.5px)) var(--border-toast-style, solid) var(--border-toast-color, var(--border-color, #dee2e6));
    pointer-events: auto;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.2s, transform 0.2s;
}

.xwui-toast-container[class*="left"] .xwui-toast {
    transform: translateX(-100%);
}

.xwui-toast-container[class*="center"] .xwui-toast {
    transform: translateY(-20px);
}

.xwui-toast-visible {
    opacity: 1;
    transform: translateX(0) translateY(0);
}

.xwui-toast-exiting {
    opacity: 0;
    transform: translateX(100%);
}

.xwui-toast-container[class*="left"] .xwui-toast-exiting {
    transform: translateX(-100%);
}

.xwui-toast-container[class*="center"] .xwui-toast-exiting {
    transform: translateY(-20px);
}

/* Icon */
.xwui-toast-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.xwui-toast-icon svg {
    width: 20px;
    height: 20px;
}

/* Variants */
.xwui-toast-info .xwui-toast-icon {
    color: var(--accent-primary);
}

.xwui-toast-success .xwui-toast-icon {
    color: var(--accent-success);
}

.xwui-toast-warning .xwui-toast-icon {
    color: var(--accent-warning);
}

.xwui-toast-error .xwui-toast-icon {
    color: var(--accent-error);
}

/* Content */
.xwui-toast-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 0.25rem);
}

.xwui-toast-title {
    font-weight: var(--font-weight-semibold, 600);
    color: var(--text-primary, #212529);
}

.xwui-toast-message {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--text-secondary, #6c757d);
}

/* Action */
.xwui-toast-action {
    margin-top: var(--spacing-sm, 0.5rem);
    padding: 0;
    border: none;
    background: transparent;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--accent-primary, #4f46e5);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    align-self: flex-start;
}

.xwui-toast-action:hover {
    color: var(--accent-hover, #4338ca);
}

/* Close button */
.xwui-toast-close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-tertiary, #adb5bd);
    border-radius: var(--radius-toast, var(--radius-xs, 4px));
    transition: background 0.2s, color 0.2s;
}

.xwui-toast-close:hover {
    background: var(--bg-secondary, #f8f9fa);
    color: var(--text-secondary, #6c757d);
}

.xwui-toast-close svg {
    width: 16px;
    height: 16px;
}

/* Dark theme */
[data-theme="dark"] .xwui-toast {
    background: var(--bg-elevated, #1e293b);
    border-color: var(--border-color, #334155);
}

[data-theme="dark"] .xwui-toast-title {
    color: var(--text-primary, #f1f5f9);
}

[data-theme="dark"] .xwui-toast-close:hover {
    background: var(--bg-primary, #0f172a);
}


/* basic/XWUIToggleGroup/XWUIToggleGroup.css */
/**
 * XWUIToggleGroup Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Roundness: theme/roundness/rounded.css (global roundness)
 */

.xwui-toggle-group {
    display: inline-flex;
    border-radius: var(--radius-md, 6px);
    overflow: hidden;
    gap: 0;
}

.xwui-toggle-group-item {
    position: relative;
}

.xwui-toggle-group-item:not(:last-child) {
    border-right: var(--border-width-regular, 1.5px) solid var(--border-color);
}

.xwui-toggle-group-item-selected {
    z-index: 1;
}


/* basic/XWUIToolbar/XWUIToolbar.css */
.xwui-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xs, 0.25rem);
  padding: var(--spacing-xs, 0.25rem);
}

.xwui-toolbar.xwui-toolbar-vertical {
  flex-direction: column;
  align-items: stretch;
}

.xwui-toolbar-item {
  display: inline-flex;
}

.xwui-toolbar-item-active {
  background: var(--accent-primary, #4f46e5);
  color: white;
}

/* basic/XWUITooltip/XWUITooltip.css */
/**
 * XWUITooltip Component Styles
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/tooltip/*.css (component-specific border widths)
 * - Roundness: theme/roundness/tooltip/*.css (component-specific roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-tooltip {
    position: fixed;
    z-index: 9999;
    padding: var(--spacing-sm, 0.5rem) var(--spacing-sm, 0.75rem);
    font-size: var(--font-size-sm, 0.8125rem);
    color: var(--text-inverse);
    background: var(--text-primary);
    border-radius: var(--radius-tooltip, var(--radius-sm, 6px));
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
    max-width: 250px;
    word-wrap: break-word;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}

.xwui-tooltip-visible {
    opacity: 1;
    transform: scale(1);
}

/* Arrow */
.xwui-tooltip-arrow::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
    transform: rotate(45deg);
}

.xwui-tooltip-top.xwui-tooltip-arrow::before {
    bottom: -4px;
    left: 50%;
    margin-left: -4px;
}

.xwui-tooltip-bottom.xwui-tooltip-arrow::before {
    top: -4px;
    left: 50%;
    margin-left: -4px;
}

.xwui-tooltip-left.xwui-tooltip-arrow::before {
    right: -4px;
    top: 50%;
    margin-top: -4px;
}

.xwui-tooltip-right.xwui-tooltip-arrow::before {
    left: -4px;
    top: 50%;
    margin-top: -4px;
}

/* Light variant */
.xwui-tooltip-light {
    color: var(--text-primary, #212529);
    background: var(--bg-primary, #ffffff);
    border: var(--border-tooltip-width, var(--border-width-regular, 1.5px)) var(--border-tooltip-style, solid) var(--border-tooltip-color, var(--border-color, #dee2e6));
}

/* Dark theme already looks good */


/* basic/XWUITour/XWUITour.css */
/**
 * XWUITour Component Styles
 */

.xwui-tour-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-overlay, rgba(0, 0, 0, 0.45));
    z-index: 998;
}

.xwui-tour-highlight {
    /* Highlight styles applied inline */
}

.xwui-tour-popover {
    background: var(--bg-primary, #ffffff);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-lg, 0 4px 12px rgba(0, 0, 0, 0.15));
    padding: var(--spacing-md, 16px);
    max-width: 320px;
    z-index: 1001;
}

.xwui-tour-popover-title {
    font-size: var(--font-size-base, 16px);
    font-weight: var(--font-weight-medium, 500);
    margin-bottom: var(--spacing-sm, 8px);
}

.xwui-tour-popover-description {
    font-size: var(--font-size-sm, 14px);
    color: var(--text-secondary, #666);
    margin-bottom: var(--spacing-md, 16px);
}

.xwui-tour-popover-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.xwui-tour-popover-btn {
    padding: 4px 12px;
    border: 1px solid var(--border-color, #d9d9d9);
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-primary, #ffffff);
    cursor: pointer;
    font-size: var(--font-size-sm, 14px);
}

.xwui-tour-popover-btn:hover:not(:disabled) {
    border-color: var(--accent-primary, #40a9ff);
    color: var(--accent-primary, #1890ff);
}

.xwui-tour-popover-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.xwui-tour-popover-btn-next {
    background: var(--accent-primary, #1890ff);
    color: var(--text-inverse, #ffffff);
    border-color: var(--accent-primary, #1890ff);
}

.xwui-tour-popover-btn-next:hover:not(:disabled) {
    background: var(--accent-hover, #40a9ff);
    border-color: var(--accent-hover, #40a9ff);
}

.xwui-tour-popover-btn-skip {
    color: var(--text-secondary, #666);
}


/* basic/XWUITrackingTimeline/XWUITrackingTimeline.css */
/* XWUITrackingTimeline - vertical shipment-tracking event log */

.xwui-tracking-timeline {
  display: flex;
  flex-direction: column;
  font-family: var(--font-body, inherit);
  color: var(--text-primary);
  font-size: 0.875rem;
}

.xwui-tracking-timeline-default {}
.xwui-tracking-timeline-outlined {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 8px);
  padding: 0.625rem;
}

.xwui-tracking-timeline-event {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  gap: 0.5rem;
  padding: 0.5rem 0;
}
.xwui-tracking-timeline-compact .xwui-tracking-timeline-event { padding: 0.25rem 0; }
.xwui-tracking-timeline-event-future { opacity: 0.55; }

.xwui-tracking-timeline-marker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.xwui-tracking-timeline-dot {
  width: 1.5rem; height: 1.5rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-elevated);
  border: 1.5px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.875em;
  flex-shrink: 0;
  z-index: 1;
}
.xwui-tracking-timeline-no-icons .xwui-tracking-timeline-dot {
  width: 0.75rem; height: 0.75rem;
}
.xwui-tracking-timeline-connector {
  position: absolute;
  top: 1.5rem;
  bottom: -0.5rem;
  width: 1.5px;
  background: var(--border-color);
}
.xwui-tracking-timeline-no-connector .xwui-tracking-timeline-connector { display: none; }

/* Tone — dot border colour reflects event tone */
.xwui-tracking-timeline-event-tone-info    .xwui-tracking-timeline-dot { border-color: var(--role-info-bg, #0369a1);    color: var(--role-info-bg, #0369a1); }
.xwui-tracking-timeline-event-tone-warning .xwui-tracking-timeline-dot { border-color: var(--role-warning-bg, #fbbf24); color: var(--role-warning-bg, #92400e); }
.xwui-tracking-timeline-event-tone-success .xwui-tracking-timeline-dot { border-color: var(--role-success-bg, #15803d); color: var(--role-success-bg, #15803d); background: rgba(34,197,94,0.10); }
.xwui-tracking-timeline-event-tone-danger  .xwui-tracking-timeline-dot { border-color: var(--role-danger-bg, #b91c1c);  color: var(--role-danger-bg, #b91c1c); }
.xwui-tracking-timeline-event-tone-neutral .xwui-tracking-timeline-dot { /* default */ }

.xwui-tracking-timeline-event-latest .xwui-tracking-timeline-dot {
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.20);
}

/* Body */
.xwui-tracking-timeline-body {
  min-width: 0;
  padding-bottom: 0.125rem;
}
.xwui-tracking-timeline-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.xwui-tracking-timeline-desc {
  font-weight: 600;
  color: var(--text-primary);
}
.xwui-tracking-timeline-event-latest .xwui-tracking-timeline-desc { color: var(--role-primary-bg, #1d4ed8); }
.xwui-tracking-timeline-ts {
  font-size: 0.75em;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.xwui-tracking-timeline-loc {
  margin-top: 0.125rem;
  font-size: 0.8125em;
  color: var(--text-secondary);
}
.xwui-tracking-timeline-detail {
  margin-top: 0.125rem;
  font-size: 0.75em;
  color: var(--text-tertiary);
}

.xwui-tracking-timeline-empty {
  padding: 1rem 0;
  text-align: center;
  color: var(--text-tertiary);
  font-style: italic;
  font-size: 0.875em;
}

/* basic/XWUITransferList/XWUITransferList.css */
/**
 * XWUITransferList Component Styles
 * Double-list transfer component
 */

.xwui-transfer-list-container {
    width: 100%;
}

.xwui-transfer-list-wrapper {
    display: flex;
    gap: var(--spacing-md, 16px);
    align-items: flex-start;
}

.xwui-transfer-list-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.05));
    border-radius: var(--radius-md, 8px);
    background: var(--bg-elevated, #ffffff);
    min-height: 300px;
    max-height: 400px;
}

.xwui-transfer-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.05));
}

.xwui-transfer-list-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.xwui-transfer-list-select-all {
    background: none;
    border: none;
    color: var(--accent-primary, #4f46e5);
    cursor: pointer;
    font-size: 0.75rem;
    padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
    border-radius: var(--radius-sm, 4px);
    transition: background-color 0.2s ease;
}

.xwui-transfer-list-select-all:hover {
    background-color: var(--bg-hover, #f8f9fa);
}

.xwui-transfer-list-search {
    padding: var(--spacing-sm, 8px);
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.05));
}

.xwui-transfer-list-search-input {
    width: 100%;
    padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.05));
    border-radius: var(--radius-sm, 4px);
    font-size: 0.875rem;
    background: var(--bg-primary, #ffffff);
    color: var(--text-primary);
}

.xwui-transfer-list-search-input:focus {
    outline: none;
    border-color: var(--accent-primary, #4f46e5);
}

.xwui-transfer-list-items {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-xs, 4px);
}

.xwui-transfer-list-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 8px);
    padding: var(--spacing-sm, 8px);
    border-radius: var(--radius-sm, 4px);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.xwui-transfer-list-item:hover:not(.xwui-transfer-list-item-disabled) {
    background-color: var(--bg-hover, #f8f9fa);
}

.xwui-transfer-list-item-selected {
    background-color: var(--bg-active, #e9ecef);
}

.xwui-transfer-list-item-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.xwui-transfer-list-item-content {
    flex: 1;
}

.xwui-transfer-list-item-label {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 500;
}

.xwui-transfer-list-item-description {
    font-size: 0.75rem;
    color: var(--text-secondary, #6c757d);
    margin-top: 2px;
}

.xwui-transfer-list-empty {
    padding: var(--spacing-lg, 24px);
    text-align: center;
    color: var(--text-tertiary, #adb5bd);
    font-size: 0.875rem;
}

.xwui-transfer-list-operations {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--spacing-sm, 8px);
    padding: var(--spacing-md, 16px) 0;
}

.xwui-transfer-list-operation-button {
    padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.05));
    border-radius: var(--radius-sm, 4px);
    background: var(--bg-primary, #ffffff);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.875rem;
    min-width: 60px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.xwui-transfer-list-operation-button:hover:not(:disabled) {
    background-color: var(--bg-hover, #f8f9fa);
    border-color: var(--accent-primary, #4f46e5);
}

.xwui-transfer-list-operation-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* basic/XWUITransition/XWUITransition.css */
/**
 * XWUITransition Component Styles
 * Animation transitions for enter/exit states
 */

.xwui-transition-container {
    /* Container has no specific styles */
}

.xwui-transition {
    /* Base transition styles */
    transition-property: opacity, transform, height, width;
    transition-timing-function: ease-in-out;
    will-change: opacity, transform, height, width;
}

/* Fade Transition */
.xwui-transition-fade {
    transition-property: opacity;
}

.xwui-transition-fade.xwui-transition-exited,
.xwui-transition-fade.xwui-transition-exiting {
    opacity: 0;
}

.xwui-transition-fade.xwui-transition-entered,
.xwui-transition-fade.xwui-transition-entering {
    opacity: 1;
}

/* Slide Transition */
.xwui-transition-slide {
    transition-property: opacity, transform;
}

/* Slide Up */
.xwui-transition-slide-up.xwui-transition-exited,
.xwui-transition-slide-up.xwui-transition-exiting {
    opacity: 0;
    transform: translateY(20px);
}

.xwui-transition-slide-up.xwui-transition-entered,
.xwui-transition-slide-up.xwui-transition-entering {
    opacity: 1;
    transform: translateY(0);
}

/* Slide Down */
.xwui-transition-slide-down.xwui-transition-exited,
.xwui-transition-slide-down.xwui-transition-exiting {
    opacity: 0;
    transform: translateY(-20px);
}

.xwui-transition-slide-down.xwui-transition-entered,
.xwui-transition-slide-down.xwui-transition-entering {
    opacity: 1;
    transform: translateY(0);
}

/* Slide Left */
.xwui-transition-slide-left.xwui-transition-exited,
.xwui-transition-slide-left.xwui-transition-exiting {
    opacity: 0;
    transform: translateX(20px);
}

.xwui-transition-slide-left.xwui-transition-entered,
.xwui-transition-slide-left.xwui-transition-entering {
    opacity: 1;
    transform: translateX(0);
}

/* Slide Right */
.xwui-transition-slide-right.xwui-transition-exited,
.xwui-transition-slide-right.xwui-transition-exiting {
    opacity: 0;
    transform: translateX(-20px);
}

.xwui-transition-slide-right.xwui-transition-entered,
.xwui-transition-slide-right.xwui-transition-entering {
    opacity: 1;
    transform: translateX(0);
}

/* Scale Transition */
.xwui-transition-scale {
    transition-property: opacity, transform;
    transform-origin: center;
}

.xwui-transition-scale.xwui-transition-exited,
.xwui-transition-scale.xwui-transition-exiting {
    opacity: 0;
    transform: scale(0.8);
}

.xwui-transition-scale.xwui-transition-entered,
.xwui-transition-scale.xwui-transition-entering {
    opacity: 1;
    transform: scale(1);
}

/* Grow Transition */
.xwui-transition-grow {
    transition-property: opacity, transform;
    transform-origin: center;
}

.xwui-transition-grow.xwui-transition-exited,
.xwui-transition-grow.xwui-transition-exiting {
    opacity: 0;
    transform: scale(0);
}

.xwui-transition-grow.xwui-transition-entered,
.xwui-transition-grow.xwui-transition-entering {
    opacity: 1;
    transform: scale(1);
}

/* Collapse Transition */
.xwui-transition-collapse {
    transition-property: height, opacity;
    overflow: hidden;
}

.xwui-transition-collapse.xwui-transition-exited,
.xwui-transition-collapse.xwui-transition-exiting {
    height: 0;
    opacity: 0;
}

.xwui-transition-collapse.xwui-transition-entered,
.xwui-transition-collapse.xwui-transition-entering {
    height: auto;
    opacity: 1;
}

/* Content wrapper */
.xwui-transition-content {
    /* Content inherits parent styles */
}


/* basic/XWUITree/XWUITree.css */
/**
 * XWUITree Component Styles
 * Structure and behavior only - colors come from CSS variables
 */

.xwui-tree { width: 100%; }

.xwui-tree-node { position: relative; }

.xwui-tree-node-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.5rem);
    padding: var(--spacing-sm, 0.5rem) var(--spacing-sm, 0.5rem);
    border-radius: var(--radius-tree, var(--radius-sm, 6px));
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
    color: var(--text-primary, #374151);
    font-size: var(--font-size-sm, 0.875rem);
}

.xwui-tree-node-content:hover:not(.xwui-tree-node-disabled .xwui-tree-node-content) {
    background: var(--bg-hover, var(--bg-secondary, #f3f4f6));
    color: var(--accent-primary, #6366f1);
}

.xwui-tree-node-selected > .xwui-tree-node-content {
    background: rgba(var(--accent-primary-rgb, 99, 102, 241), 0.1);
    color: var(--accent-primary, #6366f1);
    font-weight: 600;
}

.xwui-tree-node-disabled { opacity: 0.5; cursor: not-allowed; }

/* Expand/collapse arrow */
.xwui-tree-expand-icon {
    width: 14px; height: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 8px;
    color: var(--text-tertiary, #9ca3af);
    flex-shrink: 0;
    transition: transform 0.15s;
}
.xwui-tree-expand-icon.xwui-tree-expanded { transform: rotate(90deg); }

.xwui-tree-spacer { width: 14px; flex-shrink: 0; }

/* Node icon (inline SVG or text) */
/* Leading ordinal/index column (numbered sections). */
.xwui-tree-node-number {
    flex-shrink: 0;
    min-width: 1.5em;
    text-align: center;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text-tertiary, #94a3b8);
    opacity: 0.85;
}
.xwui-tree-compact .xwui-tree-node-number { font-size: 10.5px; }

.xwui-tree-node-icon {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    /* Fixed icon column so an empty / unresolved glyph can't expand and shove
       the label across the row. */
    width: 1.4em; min-width: 1.4em; max-width: 1.4em; overflow: hidden;
    font-size: 14px; color: var(--text-secondary, #6b7280);
}
.xwui-tree-node-icon svg { width: 1em; height: 1em; }

/* Node icon (image URL) */
.xwui-tree-node-icon-img {
    width: 16px; height: 16px; flex-shrink: 0;
    object-fit: contain; opacity: 0.75;
    border-radius: 2px;
}

/* Label */
.xwui-tree-node-label {
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Badge */
.xwui-tree-node-badge {
    margin-left: auto; flex-shrink: 0;
    font-size: 11px; font-weight: 500;
    color: var(--text-secondary, #6b7280);
    background: var(--bg-hover, var(--bg-secondary, #f3f4f6));
    padding: 1px 6px; border-radius: 8px;
}

/* Children container */
.xwui-tree-children { margin-left: 0; }

/* ===== COMPACT MODE ===== */
.xwui-tree-compact .xwui-tree-node-content {
    padding: 3px 8px;
    gap: 6px;
    font-size: 12.5px;
    border-radius: 4px;
}
.xwui-tree-compact .xwui-tree-node-icon-img { width: 14px; height: 14px; }
.xwui-tree-compact .xwui-tree-expand-icon { width: 12px; height: 12px; font-size: 7px; }
.xwui-tree-compact .xwui-tree-spacer { width: 12px; }
.xwui-tree-compact .xwui-tree-node-badge { font-size: 10px; padding: 0 5px; }

/* basic/XWUITreeSelect/XWUITreeSelect.css */
/**
 * XWUITreeSelect Component Styles
 */

.xwui-tree-select-container {
    position: relative;
}

.xwui-tree-select {
    /* Component wrapper */
}

.xwui-tree-select-dropdown {
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--border-color, #d9d9d9);
    border-radius: var(--radius-sm, 4px);
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0, 0, 0, 0.15));
    z-index: 1000;
    padding: var(--spacing-xs, 4px);
}


/* basic/XWUITreeTable/XWUITreeTable.css */
.xwui-treetable {
  overflow: auto;
}

.xwui-treetable table {
  width: 100%;
  border-collapse: collapse;
}

.xwui-treetable th,
.xwui-treetable td {
  padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  text-align: left;
}

.xwui-treetable th {
  font-weight: 600;
  background: var(--bg-primary-hover, rgba(0,0,0,0.02));
}

.xwui-treetable-expand {
  display: inline-flex;
  cursor: pointer;
  margin-right: var(--spacing-xs, 0.25rem);
  vertical-align: middle;
}

.xwui-treetable-expand-spacer {
  display: inline-block;
  width: 1.25rem;
  margin-right: var(--spacing-xs, 0.25rem);
}

.xwui-treetable-cell-label {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs, 0.25rem);
  min-width: 0;
}

.xwui-treetable-row-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--accent-primary, #6366f1);
}

.xwui-treetable-cell-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xwui-treetable tbody tr.is-row-selected {
  background: var(--bg-hover, rgba(99, 102, 241, 0.08));
}

/* Density — mirrors XWUITable size tokens (numbered + legacy class suffixes) */
:is(.xwui-treetable-4xs,.xwui-treetable-xxxxs) th,
:is(.xwui-treetable-4xs,.xwui-treetable-xxxxs) td { padding: var(--spacing-xs, 0.25rem); font-size: var(--font-size-xs, 0.5rem); }
:is(.xwui-treetable-3xs,.xwui-treetable-xxxs) th,
:is(.xwui-treetable-3xs,.xwui-treetable-xxxs) td { padding: var(--spacing-xs, 0.25rem); font-size: var(--font-size-xs, 0.5625rem); }
:is(.xwui-treetable-2xs,.xwui-treetable-xxs) th,
:is(.xwui-treetable-2xs,.xwui-treetable-xxs) td { padding: var(--spacing-xs, 0.375rem); font-size: var(--font-size-xs, 0.625rem); }
.xwui-treetable-xs th,
.xwui-treetable-xs td { padding: 0.25rem 0.5rem; font-size: var(--font-size-xs, 0.75rem); }
:is(.xwui-treetable-s,.xwui-treetable-sm) th,
:is(.xwui-treetable-s,.xwui-treetable-sm) td { padding: 0.375rem 0.625rem; font-size: var(--font-size-sm, 0.8125rem); }
:is(.xwui-treetable-m,.xwui-treetable-md) th,
:is(.xwui-treetable-m,.xwui-treetable-md) td { padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem); font-size: var(--font-size-sm, 0.875rem); }
:is(.xwui-treetable-l,.xwui-treetable-lg) th,
:is(.xwui-treetable-l,.xwui-treetable-lg) td { padding: 0.625rem 1.125rem; font-size: var(--font-size-base, 0.9375rem); }
.xwui-treetable-xl th,
.xwui-treetable-xl td { padding: 0.75rem 1.25rem; font-size: var(--font-size-base, 1.0625rem); }
:is(.xwui-treetable-2xl,.xwui-treetable-xxl) th,
:is(.xwui-treetable-2xl,.xwui-treetable-xxl) td { padding: 0.875rem 1.375rem; font-size: var(--font-size-lg, 1.375rem); }
:is(.xwui-treetable-3xl,.xwui-treetable-xxxl) th,
:is(.xwui-treetable-3xl,.xwui-treetable-xxxl) td { padding: 1rem 1.5rem; font-size: var(--font-size-xl, 1.7rem); }
:is(.xwui-treetable-4xl,.xwui-treetable-xxxxl) th,
:is(.xwui-treetable-4xl,.xwui-treetable-xxxxl) td { padding: 1.25rem 1.75rem; font-size: var(--font-size-xl, 1.7rem); }

/* basic/XWUITruncatedFormat/XWUITruncatedFormat.css */
/**
 * XWUITruncatedFormat Component Styles
 * Blueprint TruncatedFormat parity.
 */
.xwui-truncated-format {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* basic/XWUITypography/XWUITypography.css */
/**
 * XWUITypography Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Typography: theme/typography/*.css
 */

.xwui-typography {
    margin: 0;
    padding: 0;
}

/* Variants */
.xwui-typography-h1 {
    font-family: var(--font-headings-family, var(--font-family-base, sans-serif));
    font-size: var(--font-size-4xl, 2.5rem);
    font-weight: var(--font-weight-bold, 700);
    line-height: 1.2;
}

.xwui-typography-h2 {
    font-family: var(--font-headings-family, var(--font-family-base, sans-serif));
    font-size: var(--font-size-3xl, 2rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.3;
}

.xwui-typography-h3 {
    font-family: var(--font-headings-family, var(--font-family-base, sans-serif));
    font-size: var(--font-size-2xl, 1.75rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.4;
}

.xwui-typography-h4 {
    font-family: var(--font-headings-family, var(--font-family-base, sans-serif));
    font-size: var(--font-size-2xl, 1.5rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.4;
}

.xwui-typography-h5 {
    font-family: var(--font-headings-family, var(--font-family-base, sans-serif));
    font-size: var(--font-size-xl, 1.25rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.5;
}

.xwui-typography-h6 {
    font-family: var(--font-headings-family, var(--font-family-base, sans-serif));
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.5;
}

.xwui-typography-body {
    font-family: var(--font-body-family, var(--font-family-base, sans-serif));
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-normal, 400);
    line-height: 1.5;
}

.xwui-typography-caption {
    font-family: var(--font-caption-family, var(--font-family-base, sans-serif));
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-normal, 400);
    line-height: 1.4;
}

.xwui-typography-overline {
    font-family: var(--font-caption-family, var(--font-family-base, sans-serif));
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Weight overrides (independent of variant) */
.xwui-typography-weight-normal   { font-weight: var(--font-weight-normal, 400); }
.xwui-typography-weight-medium   { font-weight: var(--font-weight-medium, 500); }
.xwui-typography-weight-semibold { font-weight: var(--font-weight-semibold, 600); }
.xwui-typography-weight-bold     { font-weight: var(--font-weight-bold, 700); }

/* Color variants */
.xwui-typography-primary {
    color: var(--text-primary);
}

.xwui-typography-secondary {
    color: var(--text-secondary);
}

.xwui-typography-tertiary {
    color: var(--text-tertiary);
}

/* variant="inherit" · neutralises the typographic styling so the element
   adopts its parent's font (e.g. a gradient <span> inside an <h1> should keep
   the heading's size/weight, only adding the gradient fill). */
.xwui-typography-inherit {
    font: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    margin: 0;
}

/* Gradient text · accent → info gradient clipped to the glyphs. Token-driven,
   so it retints with the active theme/accent. Used for hero headline spans. */
.xwui-typography-gradient {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-info, var(--accent-primary)));
    -webkit-background-clip: text;
    background-clip: text;
    /* -webkit-text-fill-color wins over any inherited/utility `color` rule, so
       the glyphs stay transparent and reveal the gradient even when another
       color class (e.g. a global heading color) is also present. */
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* The gradient only paints inside the element's box; with a tight heading
       line-height the glyph DESCENDERS (g, y, p) extend just below it and end up
       unpainted → clipped. Extend the paint area with bottom padding so the full
       glyph shows. The value is in `em`, so it scales with ANY font-size, and is
       generous enough for any reasonable font/line-height — one dynamic fix for
       every gradient/clip text. The matching negative margin keeps the layout
       box unchanged, so nothing shifts. */
    padding-bottom: 0.22em;
    margin-bottom: -0.22em;
}

.xwui-typography-error {
    color: var(--accent-error);
}

.xwui-typography-success {
    color: var(--accent-success);
}

.xwui-typography-warning {
    color: var(--accent-warning);
}

/* ── Advanced effects (config-driven; values come from the view) ───────────── */

/* Highlight / mark — token-driven background behind the glyphs. A custom colour
   (config.highlight = "<color>") is applied inline by the view and wins. */
.xwui-typography-highlight {
    background: var(--highlight-bg, #fef08a);
    color: var(--text-primary);
    padding: 0 0.25em;
    border-radius: var(--radius-xs, 0.25rem);
}

/* Inline code chip. */
.xwui-typography-code {
    font-family: var(--font-mono-family, ui-monospace, "Cascadia Code", Consolas, monospace);
    font-size: 0.9em;
    background: var(--bg-secondary, rgba(0, 0, 0, 0.05));
    color: var(--accent-error, #db2777);
    padding: 0.1em 0.4em;
    border: var(--border-width-regular, 1px) solid var(--border-color);
    border-radius: var(--radius-sm, 0.375rem);
}

/* Blockquote rule — leading accent border (logical, so it flips for RTL). */
.xwui-typography-blockquote {
    border-inline-start: 4px solid var(--accent-primary);
    padding-inline-start: 1rem;
}

/* Breathing pulse for display titles (pairs with gradients). */
.xwui-typography-animated {
    animation: xwui-typography-pulse 2.2s ease-in-out infinite;
}
@keyframes xwui-typography-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
    .xwui-typography-animated { animation: none; }
}


/* basic/XWUITypographyDisplay/XWUITypographyDisplay.css */
/**
 * XWUITypographyDisplay Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Typography: theme/typography/*.css
 */

.xwui-typography {
    margin: 0;
    padding: 0;
}

/* Variants */
.xwui-typography-h1 {
    font-family: var(--font-headings-family, var(--font-family-base, sans-serif));
    font-size: var(--font-size-4xl, 2.5rem);
    font-weight: var(--font-weight-bold, 700);
    line-height: 1.2;
}

.xwui-typography-h2 {
    font-family: var(--font-headings-family, var(--font-family-base, sans-serif));
    font-size: var(--font-size-3xl, 2rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.3;
}

.xwui-typography-h3 {
    font-family: var(--font-headings-family, var(--font-family-base, sans-serif));
    font-size: var(--font-size-2xl, 1.75rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.4;
}

.xwui-typography-h4 {
    font-family: var(--font-headings-family, var(--font-family-base, sans-serif));
    font-size: var(--font-size-2xl, 1.5rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.4;
}

.xwui-typography-h5 {
    font-family: var(--font-headings-family, var(--font-family-base, sans-serif));
    font-size: var(--font-size-xl, 1.25rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.5;
}

.xwui-typography-h6 {
    font-family: var(--font-headings-family, var(--font-family-base, sans-serif));
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.5;
}

.xwui-typography-body {
    font-family: var(--font-body-family, var(--font-family-base, sans-serif));
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-normal, 400);
    line-height: 1.5;
}

.xwui-typography-caption {
    font-family: var(--font-caption-family, var(--font-family-base, sans-serif));
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-normal, 400);
    line-height: 1.4;
}

.xwui-typography-overline {
    font-family: var(--font-caption-family, var(--font-family-base, sans-serif));
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-medium, 500);
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Color variants */
.xwui-typography-primary {
    color: var(--text-primary);
}

.xwui-typography-secondary {
    color: var(--text-secondary);
}

.xwui-typography-tertiary {
    color: var(--text-tertiary);
}

.xwui-typography-error {
    color: var(--accent-error);
}

.xwui-typography-success {
    color: var(--accent-success);
}

.xwui-typography-warning {
    color: var(--accent-warning);
}


/* basic/XWUIUpload/XWUIUpload.css */
/**
 * XWUIUpload Component Styles
 * Structure and behavior only - colors come from CSS variables
 * 
 * Style Dependencies:
 * - Base: reset.css, typography.css, utilities.css
 * - Brand: brand/xwui/brand.css
 * - Style: style/modern/spacing.css, style/modern/shadows.css
 * - Theme: theme/colors/{selected-theme}.css (MANDATORY - provides all color variables)
 * - Theme: theme/accents/{selected-accent}.css (MANDATORY - provides accent color variables)
 * - Lines: theme/lines/balanced.css (global border widths)
 * - Roundness: theme/roundness/rounded.css (global roundness)
 * - Typography: theme/typography/*.css
 */

.xwui-upload {
    width: 100%;
}

/* Drop zone */
.xwui-upload-dropzone {
    border: var(--border-upload-width, var(--border-width-thick, 2px)) dashed var(--border-upload-color, var(--border-color));
    border-radius: var(--radius-upload, var(--radius-md, 8px));
    padding: var(--spacing-xl, 2rem);
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
    cursor: pointer;
}

.xwui-upload-dropzone:hover {
    border-color: var(--accent-primary);
    background: var(--bg-secondary);
}

.xwui-upload-dropzone-dragover {
    border-color: var(--accent-primary);
    background: var(--bg-secondary);
    transform: scale(1.02);
    box-shadow: var(--shadow-md);
    transition: all 0.2s;
}

.xwui-upload-dropzone-dragover .xwui-upload-dropzone-content {
    opacity: 0.8;
}

.xwui-upload-dropzone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md, 1rem);
}

.xwui-upload-icon {
    width: 48px;
    height: 48px;
    color: var(--text-secondary);
}

.xwui-upload-icon svg {
    width: 100%;
    height: 100%;
}

.xwui-upload-text {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.xwui-upload-browse {
    color: var(--accent-primary);
    cursor: pointer;
    text-decoration: underline;
}

/* File list */
.xwui-upload-list {
    margin-top: var(--spacing-md, 1rem);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.xwui-upload-picture-card .xwui-upload-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--spacing-md, 1rem);
}

/* File item */
.xwui-upload-file-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 0.75rem);
    padding: var(--spacing-sm, 0.75rem);
    border: var(--border-upload-width, var(--border-width-regular, 1.5px)) var(--border-upload-style, solid) var(--border-upload-color, var(--border-color));
    border-radius: var(--radius-upload, var(--radius-sm, 6px));
    background: var(--bg-primary);
}

.xwui-upload-picture-card .xwui-upload-file-item {
    flex-direction: column;
    padding: var(--spacing-sm, 0.5rem);
}

.xwui-upload-file-preview {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-upload, var(--radius-sm, 6px));
    overflow: hidden;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.xwui-upload-file-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.xwui-upload-picture-card .xwui-upload-file-preview {
    width: 100%;
    height: 100px;
}

.xwui-upload-file-info {
    flex: 1;
    min-width: 0;
}

.xwui-upload-file-name {
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xwui-upload-file-size {
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--text-secondary);
    margin-top: var(--spacing-xs, 0.25rem);
}

.xwui-upload-file-progress {
    height: 2px;
    background: var(--accent-primary);
    margin-top: var(--spacing-sm, 0.5rem);
    transition: width 0.3s;
}

.xwui-upload-file-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.xwui-upload-file-remove {
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-xs, 4px);
    font-size: var(--font-size-xl, 1.25rem);
    line-height: 1;
    transition: all 0.2s;
}

.xwui-upload-file-remove:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}


/* basic/XWUIValueCard/XWUIValueCard.css */
/* No styles for this component — placeholder written by tools/copy-lib-components.ts so the runtime CSS auto-loader doesn't 404. */

/* basic/XWUIVirtualScroller/XWUIVirtualScroller.css */
.xwui-virtualscroller {
  overflow: auto;
  height: 100%;
  min-height: 200px;
}

.xwui-virtualscroller-content {
  position: relative;
}

.xwui-virtualscroller-item {
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-md, 1rem);
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  box-sizing: border-box;
}

/* basic/XWUIVisuallyHidden/XWUIVisuallyHidden.css */
/**
 * XWUIVisuallyHidden Component Styles
 * Visually hides content while keeping it accessible to screen readers
 */

.xwui-visually-hidden-container {
    /* Container has no specific styles */
}

.xwui-visually-hidden {
    /* Position the element absolutely to remove it from normal flow */
    position: absolute !important;
    
    /* Make it very small */
    width: 1px !important;
    height: 1px !important;
    
    /* Hide overflow */
    overflow: hidden !important;
    
    /* Clip the element to make it invisible */
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    
    /* Ensure it doesn't take up space */
    padding: 0 !important;
    margin: -1px !important;
    
    /* Hide text */
    white-space: nowrap !important;
    
    /* Ensure it's not visible */
    border: 0 !important;
    
    /* Keep it accessible to screen readers */
    visibility: visible;
}

/* Alternative approach using modern clip-path */
@supports (clip-path: inset(50%)) {
    .xwui-visually-hidden {
        clip-path: inset(50%);
    }
}


/* basic/XWUIWatermark/XWUIWatermark.css */
/**
 * XWUIWatermark Component Styles
 */

.xwui-watermark-container {
    position: relative;
}

.xwui-watermark {
    /* Watermark overlay styles applied inline */
}


/* basic/XWUIWindowControls/XWUIWindowControls.css */
/**
 * XWUIWindowControls — OS-style window chrome buttons.
 * Uses theme tokens only. Supports 'windows', 'mac', 'linux', 'neutral' styles.
 */

.xwui-window-controls {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.xwui-window-control {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}

.xwui-window-control:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: -2px;
}

/* ── Neutral (default): flat theme-aware buttons ─────────────────── */
.xwui-window-controls-neutral .xwui-window-control {
    width: 32px;
    height: 28px;
    border-radius: var(--radius-sm, 4px);
}
.xwui-window-controls-neutral .xwui-window-control:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.xwui-window-controls-neutral .xwui-window-control-close:hover {
    background: #e81123;
    color: #ffffff;
}

/* ── Windows: flat rectangular buttons matching Windows 10/11 chrome ─── */
.xwui-window-controls-windows {
    gap: 0;
}
.xwui-window-controls-windows .xwui-window-control {
    width: 46px;
    height: 32px;
    border-radius: 0;
}
.xwui-window-controls-windows .xwui-window-control:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.xwui-window-controls-windows .xwui-window-control-close:hover {
    background: #e81123;
    color: #ffffff;
}

/* ── Linux: same as neutral but with more rounded corners ─────────── */
.xwui-window-controls-linux .xwui-window-control {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin: 0 2px;
    background: var(--bg-hover);
}
.xwui-window-controls-linux .xwui-window-control:hover {
    background: var(--border-color);
    color: var(--text-primary);
}

/* ── macOS: "traffic lights" dots ─────────────────────────────────── */
.xwui-window-controls-mac {
    gap: 8px;
    padding: 0 8px;
}
.xwui-window-controls-mac .xwui-window-control {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    /* Mac-style control glyph (×/−/+ inside the coloured dots). Theme-aware
       via color-mix on --text-primary so it stays legible on both light and
       dark backdrops. Previously hardcoded rgba(0,0,0,0.55) which vanished
       on dark themes. */
    color: color-mix(in srgb, var(--text-primary) 55%, transparent);
}
.xwui-window-controls-mac .xwui-window-control svg { display: none; }
.xwui-window-controls-mac:hover .xwui-window-control svg { display: block; width: 8px; height: 8px; }
.xwui-window-controls-mac .xwui-window-control-minimize { background: #f5bf4f; }
.xwui-window-controls-mac .xwui-window-control-maximize { background: #61c554; }
.xwui-window-controls-mac .xwui-window-control-close    { background: #ed6a5e; }

/* ── Size scaling (applies to neutral/windows/linux; mac keeps fixed dot size) ── */
:is(.xwui-window-controls-4xs,.xwui-window-controls-xxxxs) .xwui-window-control { width: 20px; height: 18px; }
:is(.xwui-window-controls-3xs,.xwui-window-controls-xxxs)  .xwui-window-control { width: 22px; height: 20px; }
:is(.xwui-window-controls-2xs,.xwui-window-controls-xxs)   .xwui-window-control { width: 24px; height: 22px; }
.xwui-window-controls-xs    .xwui-window-control { width: 28px; height: 24px; }
/* sm is default */
:is(.xwui-window-controls-m,.xwui-window-controls-md)    .xwui-window-control { width: 36px; height: 32px; }
:is(.xwui-window-controls-l,.xwui-window-controls-lg)    .xwui-window-control { width: 40px; height: 36px; }
.xwui-window-controls-xl    .xwui-window-control { width: 46px; height: 40px; }

/* Disable size scaling in mac mode (dots stay dot-sized) */
.xwui-window-controls-mac[class*="xwui-window-controls-"] .xwui-window-control {
    width: 12px !important;
    height: 12px !important;
}

/* basic/XWUIWorkloadView/XWUIWorkloadView.css */
/**
 * XWUIWorkloadView Component Styles
 */

.xwui-workload-view {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg, 1.5rem);
    width: 100%;
}

.xwui-workload-view-filter {
    display: flex;
    justify-content: flex-end;
}

.xwui-workload-view-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md, 1rem);
}

.xwui-workload-view-chart {
    width: 100%;
    overflow-x: auto;
}

.xwui-workload-view-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--spacing-md, 1rem);
}


/* basic/XWUIWrap/XWUIWrap.css */
/**
 * XWUIWrap Component Styles
 */
.xwui-wrap {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.xwui-wrap-item {
  flex-shrink: 0;
}