/* AUTO-GENERATED by @nexamas/design-system 1.4.0.
   Source: tokens/nexamas.tokens.json. Do not edit this file by hand. */
:root {
  --nx-font-family-sans: "Segoe UI Variable Text", "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  --nx-font-family-mono: Cascadia Mono, Consolas, ui-monospace, monospace;
  --nx-font-weight-regular: 400;
  --nx-font-weight-medium: 500;
  --nx-font-weight-semibold: 600;
  --nx-font-weight-bold: 700;
  --nx-font-weight-heavy: 800;
  --nx-typography-size-xs: 0.75rem;
  --nx-typography-size-sm: 0.875rem;
  --nx-typography-size-md: 1rem;
  --nx-typography-size-lg: 1.125rem;
  --nx-typography-size-xl: 1.25rem;
  --nx-typography-size2xl: 1.5rem;
  --nx-typography-size3xl: 2rem;
  --nx-typography-size4xl: 2.75rem;
  --nx-typography-size-display: clamp(2.875rem, 6vw, 5.125rem);
  --nx-typography-line-height-tight: 1.05;
  --nx-typography-line-height-heading: 1.18;
  --nx-typography-line-height-body: 1.6;
  --nx-typography-line-height-relaxed: 1.75;
  --nx-typography-letter-spacing-tight: -0.035em;
  --nx-typography-letter-spacing-normal: 0;
  --nx-typography-letter-spacing-wide: 0.08em;
  --nx-space-0: 0;
  --nx-space-1: 0.25rem;
  --nx-space-2: 0.5rem;
  --nx-space-3: 0.75rem;
  --nx-space-4: 1rem;
  --nx-space-5: 1.25rem;
  --nx-space-6: 1.5rem;
  --nx-space-7: 1.75rem;
  --nx-space-8: 2rem;
  --nx-space-10: 2.5rem;
  --nx-space-12: 3rem;
  --nx-space-16: 4rem;
  --nx-space-20: 5rem;
  --nx-space-24: 6rem;
  --nx-radius-none: 0;
  --nx-radius-sm: 0.5rem;
  --nx-radius-md: 0.625rem;
  --nx-radius-lg: 0.875rem;
  --nx-radius-xl: 1.125rem;
  --nx-radius-2xl: 1.375rem;
  --nx-radius-pill: 999px;
  --nx-radius-3xl: 1.75rem;
  --nx-border-width-hairline: 1px;
  --nx-border-width-strong: 2px;
  --nx-control-height-sm: 2.25rem;
  --nx-control-height-md: 2.75rem;
  --nx-control-height-lg: 3.25rem;
  --nx-control-target-minimum: 2.75rem;
  --nx-control-padding-inline-sm: 0.75rem;
  --nx-control-padding-inline-md: 1rem;
  --nx-control-padding-inline-lg: 1.25rem;
  --nx-layout-container: 74rem;
  --nx-layout-content-narrow: 48rem;
  --nx-layout-gutter: clamp(0.875rem, 3vw, 1.5rem);
  --nx-layout-section-gap: clamp(4rem, 9vw, 6.5rem);
  --nx-layout-grid-gap: 1.125rem;
  --nx-breakpoint-sm: 36rem;
  --nx-breakpoint-md: 48rem;
  --nx-breakpoint-lg: 64rem;
  --nx-breakpoint-xl: 80rem;
  --nx-motion-fast: 110ms;
  --nx-motion-normal: 180ms;
  --nx-motion-slow: 280ms;
  --nx-motion-ease-standard: cubic-bezier(0.1, 0.9, 0.2, 1);
  --nx-motion-ease-emphasized: cubic-bezier(0.1, 0.9, 0.2, 1);
  --nx-motion-ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --nx-z-base: 0;
  --nx-z-header: 20;
  --nx-z-overlay: 50;
  --nx-z-toast: 60;
  --nx-z-modal: 70;
  --nx-z-popover: 55;
  --nx-z-tooltip: 65;
  --nx-component-button-radius: var(--nx-radius-lg);
  --nx-component-button-height: var(--nx-control-height-md);
  --nx-component-button-padding-inline: var(--nx-control-padding-inline-md);
  --nx-component-button-font-weight: var(--nx-font-weight-semibold);
  --nx-component-field-radius: var(--nx-radius-lg);
  --nx-component-field-height: var(--nx-control-height-md);
  --nx-component-field-padding-inline: var(--nx-control-padding-inline-md);
  --nx-component-card-radius: var(--nx-radius-2xl);
  --nx-component-card-padding: var(--nx-space-5);
  --nx-component-focus-ring-width: 1px;
  --nx-component-focus-ring-offset: 1px;
  --nx-component-navigation-radius: var(--nx-radius-lg);
  --nx-component-navigation-item-padding-block: 0.625rem;
  --nx-component-navigation-item-padding-inline: 0.875rem;
  --nx-component-command-button-size: 4.15rem;
  --nx-component-command-button-radius: var(--nx-radius-xl);
  --nx-component-command-button-icon-size: 1.7rem;
  --nx-component-command-button-label-size: 0.75rem;
  --nx-component-dialog-radius: var(--nx-radius-2xl);
  --nx-component-dialog-padding: var(--nx-space-5);
  --nx-component-dialog-max-width: 34rem;
  --nx-component-toast-radius: var(--nx-radius-xl);
  --nx-component-toast-padding: var(--nx-space-4);
  --nx-component-list-item-radius: var(--nx-radius-lg);
  --nx-component-list-item-min-height: 2.875rem;
  --nx-component-badge-radius: var(--nx-radius-pill);
  --nx-component-badge-height: 1.5rem;
  --nx-component-progress-height: 1.875rem;
  --nx-component-progress-radius: var(--nx-radius-lg);
  --nx-component-switch-width: 2.5rem;
  --nx-component-switch-height: 1.25rem;
  --nx-component-menu-radius: var(--nx-radius-xl);
  --nx-component-menu-padding: var(--nx-space-2);
  --nx-component-status-banner-radius: var(--nx-radius-2xl);
  --nx-component-status-banner-padding: var(--nx-space-5);
  --nx-component-status-banner-icon-size: 3.25rem;
  --nx-component-status-banner-layer-offset: 1.25rem;
  --nx-component-skeleton-radius: var(--nx-radius-pill);
  --nx-component-skeleton-height: 0.625rem;
  --nx-component-skeleton-gap: 0.625rem;
  --nx-component-surface-radius: var(--nx-radius-2xl);
  --nx-component-surface-inset-highlight: inset 0 1px 0 rgba(255,255,255,.48);
  --nx-component-confirm-dialog-radius: var(--nx-radius-2xl);
  --nx-component-confirm-dialog-max-width: 30rem;
  --nx-component-confirm-dialog-icon-size: 2.75rem;
  --nx-component-confirm-dialog-padding: var(--nx-space-5);
  --nx-component-tooltip-radius: var(--nx-radius-md);
  --nx-component-tooltip-padding-block: 0.375rem;
  --nx-component-tooltip-padding-inline: 0.625rem;
  --nx-component-tooltip-max-width: 18rem;
  --nx-component-drop-zone-radius: var(--nx-radius-xl);
  --nx-component-drop-zone-padding: var(--nx-space-5);
  --nx-component-drop-zone-border-width: 1px;
  --nx-component-empty-state-radius: var(--nx-radius-2xl);
  --nx-component-empty-state-padding: var(--nx-space-7);
  --nx-component-empty-state-icon-size: 3rem;
  --nx-component-inline-feedback-radius: var(--nx-radius-lg);
  --nx-component-inline-feedback-padding-block: 0.625rem;
  --nx-component-inline-feedback-padding-inline: 0.75rem;
}

html[data-nx-theme="light"] {
  color-scheme: light;
  --nx-color-canvas: #F1F6F9;
  --nx-color-canvas-start: #F8FAFC;
  --nx-color-canvas-end: #EAF1F5;
  --nx-color-surface: #F7FAFC;
  --nx-color-surface-raised: #FFFFFF;
  --nx-color-surface-soft: #F1F6F9;
  --nx-color-surface-muted: #E7EEF3;
  --nx-color-surface-interactive: #F8FAFC;
  --nx-color-surface-hover: #EDF4F8;
  --nx-color-surface-selected: #E1EDF5;
  --nx-color-text: #344A5B;
  --nx-color-text-strong: #203546;
  --nx-color-text-muted: #607587;
  --nx-color-text-subtle: #8A9BA9;
  --nx-color-text-on-accent: #F8FCFF;
  --nx-color-border: #D3DEE6;
  --nx-color-border-strong: #B7C8D5;
  --nx-color-border-interactive: #8EACC2;
  --nx-color-accent-primary: #5A94BE;
  --nx-color-accent-primary-hover: #4D86AF;
  --nx-color-accent-primary-pressed: #3E739B;
  --nx-color-accent-secondary: #4D8999;
  --nx-color-accent-secondary-hover: #407887;
  --nx-color-accent-tertiary: #7388AA;
  --nx-color-focus: #4C88B4;
  --nx-color-success: #4D8B4B;
  --nx-color-success-soft: #DCEBD9;
  --nx-color-warning: #A66B13;
  --nx-color-warning-soft: #F7E8C8;
  --nx-color-danger: #A84E55;
  --nx-color-danger-soft: #F3DDE0;
  --nx-color-info: #3E879A;
  --nx-color-info-soft: #D8EBEE;
  --nx-color-inverse-surface: #203747;
  --nx-color-inverse-surface-strong: #152A38;
  --nx-color-inverse-text: #F7FBFE;
  --nx-color-inverse-text-muted: #C8D7E2;
  --nx-color-inverse-border: rgba(232, 241, 247, 0.18);
  --nx-color-overlay: rgba(36, 60, 78, 0.32);
  --nx-color-scrim: rgba(26, 48, 64, 0.48);
  --nx-color-shadow-color: rgba(49, 73, 91, 0.10);
  --nx-color-shadow-strong-color: rgba(42, 64, 81, 0.16);
  --nx-color-checker-light: #F4F7F9;
  --nx-color-checker-dark: #E3EAEF;
  --nx-color-preview-light: #F4F8FA;
  --nx-color-preview-dark: #183040;
  --nx-gradient-brand: linear-gradient(180deg, #639CC4 0%, #5790B9 100%);
  --nx-gradient-brand-strong: linear-gradient(180deg, #5790B9 0%, #477FA8 100%);
  --nx-gradient-canvas: linear-gradient(180deg, #F8FAFC 0%, #F1F6F9 52%, #EAF1F5 100%);
  --nx-gradient-hero-glow: radial-gradient(circle at 84% 4%, rgba(255,255,255,.72), transparent 28rem);
  --nx-shadow-sm: 0 1px 2px rgba(49, 73, 91, 0.06), 0 5px 14px rgba(49, 73, 91, 0.045);
  --nx-shadow-md: 0 2px 4px rgba(49, 73, 91, 0.06), 0 12px 28px rgba(49, 73, 91, 0.07);
  --nx-shadow-lg: 0 4px 8px rgba(42, 64, 81, 0.07), 0 22px 52px rgba(42, 64, 81, 0.09);
  --nx-shadow-focus: 0 0 0 1px rgba(76, 136, 180, 0.88), 0 0 0 3px rgba(76, 136, 180, 0.16);
}

html[data-nx-theme="dark"] {
  color-scheme: dark;
  --nx-color-canvas: #121C24;
  --nx-color-canvas-start: #17242E;
  --nx-color-canvas-end: #0E171E;
  --nx-color-surface: #1A2731;
  --nx-color-surface-raised: #22313C;
  --nx-color-surface-soft: #16232C;
  --nx-color-surface-muted: #263743;
  --nx-color-surface-interactive: #1E2D37;
  --nx-color-surface-hover: #263946;
  --nx-color-surface-selected: #2B4556;
  --nx-color-text: #DCE6EC;
  --nx-color-text-strong: #F4F7F9;
  --nx-color-text-muted: #A7BAC6;
  --nx-color-text-subtle: #7F96A4;
  --nx-color-text-on-accent: #F8FCFF;
  --nx-color-border: #344956;
  --nx-color-border-strong: #496473;
  --nx-color-border-interactive: #65889C;
  --nx-color-accent-primary: #78AFD3;
  --nx-color-accent-primary-hover: #8BBEE0;
  --nx-color-accent-primary-pressed: #66A0C7;
  --nx-color-accent-secondary: #72B4C4;
  --nx-color-accent-secondary-hover: #8CC7D3;
  --nx-color-accent-tertiary: #9BAED4;
  --nx-color-focus: #80B7DA;
  --nx-color-success: #86C17F;
  --nx-color-success-soft: #294A31;
  --nx-color-warning: #E1B55C;
  --nx-color-warning-soft: #4A3B20;
  --nx-color-danger: #E09399;
  --nx-color-danger-soft: #4B2D32;
  --nx-color-info: #77BBC9;
  --nx-color-info-soft: #24434B;
  --nx-color-inverse-surface: #EDF5FA;
  --nx-color-inverse-surface-strong: #FFFFFF;
  --nx-color-inverse-text: #22394A;
  --nx-color-inverse-text-muted: #607A8C;
  --nx-color-inverse-border: rgba(30, 52, 68, 0.18);
  --nx-color-overlay: rgba(5, 15, 22, 0.50);
  --nx-color-scrim: rgba(2, 10, 16, 0.68);
  --nx-color-shadow-color: rgba(0,0,0,.28);
  --nx-color-shadow-strong-color: rgba(0,0,0,.42);
  --nx-color-checker-light: #DCE8F0;
  --nx-color-checker-dark: #B7C9D5;
  --nx-color-preview-light: #DCE8F0;
  --nx-color-preview-dark: #08141D;
  --nx-gradient-brand: linear-gradient(180deg, #82B8DB 0%, #71A8CE 100%);
  --nx-gradient-brand-strong: linear-gradient(180deg, #91C3E1 0%, #79AFD3 100%);
  --nx-gradient-canvas: linear-gradient(180deg, #17242E 0%, #121C24 56%, #0E171E 100%);
  --nx-gradient-hero-glow: radial-gradient(circle at 84% 4%, rgba(120,175,211,.10), transparent 28rem);
  --nx-shadow-sm: 0 1px 2px rgba(0,0,0,.22), 0 5px 14px rgba(0,0,0,.12);
  --nx-shadow-md: 0 2px 4px rgba(0,0,0,.25), 0 12px 28px rgba(0,0,0,.18);
  --nx-shadow-lg: 0 4px 9px rgba(0,0,0,.30), 0 24px 56px rgba(0,0,0,.26);
  --nx-shadow-focus: 0 0 0 1px rgba(128,183,218,.92), 0 0 0 3px rgba(128,183,218,.18);
}

html:not([data-nx-theme]) {
  color-scheme: light;
  --nx-color-canvas: #F1F6F9;
  --nx-color-canvas-start: #F8FAFC;
  --nx-color-canvas-end: #EAF1F5;
  --nx-color-surface: #F7FAFC;
  --nx-color-surface-raised: #FFFFFF;
  --nx-color-surface-soft: #F1F6F9;
  --nx-color-surface-muted: #E7EEF3;
  --nx-color-surface-interactive: #F8FAFC;
  --nx-color-surface-hover: #EDF4F8;
  --nx-color-surface-selected: #E1EDF5;
  --nx-color-text: #344A5B;
  --nx-color-text-strong: #203546;
  --nx-color-text-muted: #607587;
  --nx-color-text-subtle: #8A9BA9;
  --nx-color-text-on-accent: #F8FCFF;
  --nx-color-border: #D3DEE6;
  --nx-color-border-strong: #B7C8D5;
  --nx-color-border-interactive: #8EACC2;
  --nx-color-accent-primary: #5A94BE;
  --nx-color-accent-primary-hover: #4D86AF;
  --nx-color-accent-primary-pressed: #3E739B;
  --nx-color-accent-secondary: #4D8999;
  --nx-color-accent-secondary-hover: #407887;
  --nx-color-accent-tertiary: #7388AA;
  --nx-color-focus: #4C88B4;
  --nx-color-success: #4D8B4B;
  --nx-color-success-soft: #DCEBD9;
  --nx-color-warning: #A66B13;
  --nx-color-warning-soft: #F7E8C8;
  --nx-color-danger: #A84E55;
  --nx-color-danger-soft: #F3DDE0;
  --nx-color-info: #3E879A;
  --nx-color-info-soft: #D8EBEE;
  --nx-color-inverse-surface: #203747;
  --nx-color-inverse-surface-strong: #152A38;
  --nx-color-inverse-text: #F7FBFE;
  --nx-color-inverse-text-muted: #C8D7E2;
  --nx-color-inverse-border: rgba(232, 241, 247, 0.18);
  --nx-color-overlay: rgba(36, 60, 78, 0.32);
  --nx-color-scrim: rgba(26, 48, 64, 0.48);
  --nx-color-shadow-color: rgba(49, 73, 91, 0.10);
  --nx-color-shadow-strong-color: rgba(42, 64, 81, 0.16);
  --nx-color-checker-light: #F4F7F9;
  --nx-color-checker-dark: #E3EAEF;
  --nx-color-preview-light: #F4F8FA;
  --nx-color-preview-dark: #183040;
  --nx-gradient-brand: linear-gradient(180deg, #639CC4 0%, #5790B9 100%);
  --nx-gradient-brand-strong: linear-gradient(180deg, #5790B9 0%, #477FA8 100%);
  --nx-gradient-canvas: linear-gradient(180deg, #F8FAFC 0%, #F1F6F9 52%, #EAF1F5 100%);
  --nx-gradient-hero-glow: radial-gradient(circle at 84% 4%, rgba(255,255,255,.72), transparent 28rem);
  --nx-shadow-sm: 0 1px 2px rgba(49, 73, 91, 0.06), 0 5px 14px rgba(49, 73, 91, 0.045);
  --nx-shadow-md: 0 2px 4px rgba(49, 73, 91, 0.06), 0 12px 28px rgba(49, 73, 91, 0.07);
  --nx-shadow-lg: 0 4px 8px rgba(42, 64, 81, 0.07), 0 22px 52px rgba(42, 64, 81, 0.09);
  --nx-shadow-focus: 0 0 0 1px rgba(76, 136, 180, 0.88), 0 0 0 3px rgba(76, 136, 180, 0.16);
}

/* Nexamas Fluent experience primitives. These component contracts are shared by every Web host. */
.nx-theme-toggle,
.nx-button,
.nx-command-button {
  min-height: var(--nx-component-button-height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nx-space-2);
  padding: 0 var(--nx-component-button-padding-inline);
  border: var(--nx-border-width-hairline) solid var(--nx-color-border);
  border-bottom-color: var(--nx-color-border-strong);
  border-radius: var(--nx-component-button-radius);
  color: var(--nx-color-text);
  background: linear-gradient(180deg, color-mix(in srgb, var(--nx-color-surface-interactive) 96%, white 4%), var(--nx-color-surface-interactive));
  box-shadow: var(--nx-shadow-sm), inset 0 1px 0 color-mix(in srgb, white 35%, transparent);
  font: inherit;
  font-weight: var(--nx-component-button-font-weight);
  cursor: pointer;
  transition:
    border-color var(--nx-motion-normal) var(--nx-motion-ease-standard),
    background-color var(--nx-motion-normal) var(--nx-motion-ease-standard),
    box-shadow var(--nx-motion-normal) var(--nx-motion-ease-standard),
    transform var(--nx-motion-fast) var(--nx-motion-ease-standard);
}
.nx-theme-toggle { min-width: var(--nx-control-height-md); padding-inline: var(--nx-control-padding-inline-sm); }
.nx-command-button { width: var(--nx-component-command-button-size); min-width: var(--nx-component-command-button-size); padding: 0; border-radius: var(--nx-component-command-button-radius); }
.nx-theme-toggle:hover:not(:disabled),
.nx-button:hover:not(:disabled),
.nx-command-button:hover:not(:disabled) {
  border-color: var(--nx-color-border-strong);
  background: var(--nx-color-surface-hover);
}
.nx-theme-toggle:active:not(:disabled),
.nx-button:active:not(:disabled),
.nx-command-button:active:not(:disabled) {
  transform: scale(.985);
  border-color: var(--nx-color-border-interactive);
  background: var(--nx-color-surface-selected);
  box-shadow: inset 0 1px 2px color-mix(in srgb, black 12%, transparent);
}
.nx-theme-toggle:focus-visible,
.nx-button:focus-visible,
.nx-command-button:focus-visible { outline: none; box-shadow: var(--nx-shadow-focus); }
.nx-theme-toggle:disabled,
.nx-button:disabled,
.nx-command-button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.nx-theme-toggle__icon { font-size: 1rem; line-height: 1; }
.nx-button--primary {
  color: var(--nx-color-text-on-accent);
  border-color: color-mix(in srgb, var(--nx-color-accent-primary-pressed) 74%, transparent);
  border-bottom-color: var(--nx-color-accent-primary-pressed);
  background: var(--nx-gradient-brand);
  box-shadow: var(--nx-shadow-sm), inset 0 1px 0 color-mix(in srgb, white 28%, transparent);
}
.nx-button--primary:hover:not(:disabled) { border-color: var(--nx-color-accent-primary-pressed); background: var(--nx-color-accent-primary-hover); }
.nx-button--primary:active:not(:disabled) { background: var(--nx-color-accent-primary-pressed); }
.nx-button--danger { color: var(--nx-color-text-on-accent); border-color: var(--nx-color-danger); background: var(--nx-color-danger); }
.nx-button--subtle { border-color: transparent; background: transparent; box-shadow: none; }

.nx-card,
.nx-surface {
  border: var(--nx-border-width-hairline) solid var(--nx-color-border);
  border-radius: var(--nx-component-card-radius);
  color: var(--nx-color-text);
  background: color-mix(in srgb, var(--nx-color-surface) 96%, transparent);
  box-shadow: var(--nx-shadow-sm), inset 0 1px 0 color-mix(in srgb, white 22%, transparent);
}
.nx-card--soft, .nx-surface--soft { background: var(--nx-color-surface-soft); }
.nx-card--raised, .nx-surface--raised { background: var(--nx-color-surface-raised); box-shadow: var(--nx-shadow-md); }
.nx-surface--acrylic { background: color-mix(in srgb, var(--nx-color-surface) 82%, transparent); backdrop-filter: blur(22px) saturate(1.15); }

.nx-field {
  width: 100%;
  min-height: var(--nx-component-field-height);
  padding: 0 var(--nx-component-field-padding-inline);
  border: var(--nx-border-width-hairline) solid var(--nx-color-border-strong);
  border-bottom-color: var(--nx-color-text-subtle);
  border-radius: var(--nx-component-field-radius);
  color: var(--nx-color-text);
  background: var(--nx-color-surface-interactive);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 24%, transparent);
  font: inherit;
  transition: border-color var(--nx-motion-normal) var(--nx-motion-ease-standard), box-shadow var(--nx-motion-normal) var(--nx-motion-ease-standard), background var(--nx-motion-normal) var(--nx-motion-ease-standard);
}
textarea.nx-field { min-height: 7rem; padding-block: var(--nx-space-3); resize: vertical; }
.nx-field:hover:not(:disabled) { border-color: var(--nx-color-border-interactive); }
.nx-field:focus { border-color: var(--nx-color-border-strong); outline: none; box-shadow: inset 0 -2px 0 var(--nx-color-accent-primary), var(--nx-shadow-sm); }
.nx-field:disabled { opacity: .55; cursor: not-allowed; }

.nx-badge {
  min-height: var(--nx-component-badge-height);
  display: inline-flex;
  align-items: center;
  gap: var(--nx-space-2);
  padding: 0 var(--nx-space-3);
  border: var(--nx-border-width-hairline) solid var(--nx-color-border);
  border-radius: var(--nx-component-badge-radius);
  color: var(--nx-color-text-muted);
  background: var(--nx-color-surface-soft);
  font-size: var(--nx-typography-size-xs);
  font-weight: var(--nx-font-weight-semibold);
}
.nx-badge--success { color: var(--nx-color-success); border-color: color-mix(in srgb, var(--nx-color-success) 38%, transparent); background: var(--nx-color-success-soft); }
.nx-badge--warning { color: var(--nx-color-warning); border-color: color-mix(in srgb, var(--nx-color-warning) 38%, transparent); background: var(--nx-color-warning-soft); }
.nx-badge--danger { color: var(--nx-color-danger); border-color: color-mix(in srgb, var(--nx-color-danger) 38%, transparent); background: var(--nx-color-danger-soft); }

.nx-alert,
.nx-toast {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--nx-space-3);
  padding: var(--nx-component-toast-padding);
  border: var(--nx-border-width-hairline) solid var(--nx-color-border);
  border-radius: var(--nx-component-toast-radius);
  color: var(--nx-color-text);
  background: color-mix(in srgb, var(--nx-color-surface-raised) 96%, transparent);
  box-shadow: var(--nx-shadow-md);
}
.nx-alert--info, .nx-toast--info { border-color: color-mix(in srgb, var(--nx-color-info) 38%, transparent); background: var(--nx-color-info-soft); }
.nx-alert--success, .nx-toast--success { border-color: color-mix(in srgb, var(--nx-color-success) 38%, transparent); background: var(--nx-color-success-soft); }
.nx-alert--warning, .nx-toast--warning { border-color: color-mix(in srgb, var(--nx-color-warning) 38%, transparent); background: var(--nx-color-warning-soft); }
.nx-alert--danger, .nx-toast--danger { border-color: color-mix(in srgb, var(--nx-color-danger) 38%, transparent); background: var(--nx-color-danger-soft); }

.nx-list-item {
  min-height: var(--nx-component-list-item-min-height);
  display: flex;
  align-items: center;
  gap: var(--nx-space-3);
  padding: var(--nx-space-2) var(--nx-space-3);
  border: 1px solid transparent;
  border-radius: var(--nx-component-list-item-radius);
  color: var(--nx-color-text);
  background: transparent;
}
.nx-list-item:hover { background: var(--nx-color-surface-hover); }
.nx-list-item[aria-selected="true"], .nx-list-item.is-selected { border-color: color-mix(in srgb, var(--nx-color-accent-primary) 20%, transparent); background: var(--nx-color-surface-selected); }

.nx-segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-lg);
  background: color-mix(in srgb, var(--nx-color-surface-muted) 76%, transparent);
}
.nx-tab {
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nx-space-2);
  padding: 0 var(--nx-space-3);
  border: 0;
  border-radius: var(--nx-radius-md);
  color: var(--nx-color-text-muted);
  background: transparent;
  font: inherit;
  font-weight: var(--nx-font-weight-semibold);
  cursor: pointer;
}
.nx-tab:hover { color: var(--nx-color-text); background: var(--nx-color-surface-hover); }
.nx-tab[aria-selected="true"], .nx-tab[aria-pressed="true"], .nx-tab.is-active { color: var(--nx-color-text-strong); background: var(--nx-color-surface-raised); box-shadow: var(--nx-shadow-sm); }

.nx-dialog {
  width: min(calc(100% - 2rem), var(--nx-component-dialog-max-width));
  padding: var(--nx-component-dialog-padding);
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-component-dialog-radius);
  color: var(--nx-color-text);
  background: color-mix(in srgb, var(--nx-color-surface-raised) 97%, transparent);
  box-shadow: var(--nx-shadow-lg);
}
.nx-dialog::backdrop { background: var(--nx-color-overlay); backdrop-filter: blur(8px); }

.nx-context-menu {
  min-width: 12rem;
  padding: var(--nx-component-menu-padding);
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-component-menu-radius);
  color: var(--nx-color-text);
  background: color-mix(in srgb, var(--nx-color-surface-raised) 94%, transparent);
  box-shadow: var(--nx-shadow-lg);
  backdrop-filter: blur(22px) saturate(1.1);
}

.nx-progress {
  height: var(--nx-component-progress-height);
  overflow: hidden;
  border-radius: var(--nx-component-progress-radius);
  background: var(--nx-color-surface-muted);
}
.nx-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--nx-color-accent-primary); }

.nx-status-dot { width: .5rem; height: .5rem; display: inline-block; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent); }
.nx-empty-state { min-height: 12rem; display: grid; place-items: center; gap: var(--nx-space-3); padding: var(--nx-space-6); border: 1px dashed var(--nx-color-border-strong); border-radius: var(--nx-radius-lg); color: var(--nx-color-text-muted); background: color-mix(in srgb, var(--nx-color-surface-soft) 72%, transparent); text-align: center; }


/* Nexamas Soft Fluent DNA 1.2 -------------------------------------------------
   Shared visual language extracted from the approved Nexamas references.
   Product adapters should map stable product DOM to these semantic contracts. */
.nx-card,
.nx-surface,
.nx-dialog,
.nx-context-menu {
  border-color: color-mix(in srgb, var(--nx-color-border) 86%, transparent);
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--nx-color-surface-raised) 96%, white 4%),
      color-mix(in srgb, var(--nx-color-surface) 94%, transparent));
  box-shadow:
    var(--nx-shadow-sm),
    inset 0 1px 0 color-mix(in srgb, white 58%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--nx-color-border) 34%, transparent);
}
.nx-card,
.nx-surface { border-radius: var(--nx-component-surface-radius); }
.nx-card--raised,
.nx-surface--raised {
  box-shadow:
    var(--nx-shadow-md),
    inset 0 1px 0 color-mix(in srgb, white 64%, transparent);
}

.nx-button,
.nx-theme-toggle {
  border-color: color-mix(in srgb, var(--nx-color-border) 88%, transparent);
  border-bottom-color: color-mix(in srgb, var(--nx-color-border-strong) 90%, transparent);
  border-radius: var(--nx-component-button-radius);
  color: var(--nx-color-text);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--nx-color-surface-raised) 86%, transparent),
      color-mix(in srgb, var(--nx-color-surface-interactive) 94%, transparent));
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--nx-color-shadow-color) 44%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 56%, transparent);
}
.nx-button:hover:not(:disabled),
.nx-theme-toggle:hover:not(:disabled) {
  border-color: var(--nx-color-border-strong);
  background: var(--nx-color-surface-hover);
  box-shadow: var(--nx-shadow-sm), inset 0 1px 0 color-mix(in srgb, white 62%, transparent);
}
.nx-button--primary {
  border-color: color-mix(in srgb, var(--nx-color-accent-primary-pressed) 64%, var(--nx-color-border));
  color: var(--nx-color-text-on-accent);
  background: var(--nx-gradient-brand);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--nx-color-accent-primary) 22%, transparent), inset 0 1px 0 color-mix(in srgb, white 32%, transparent);
}

.nx-command-button,
.nx-command-tile {
  min-width: var(--nx-component-command-button-size);
  min-height: var(--nx-component-command-button-size);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--nx-space-2);
  padding: var(--nx-space-3);
  border: 1px solid color-mix(in srgb, var(--nx-color-border) 88%, transparent);
  border-bottom-color: color-mix(in srgb, var(--nx-color-border-strong) 88%, transparent);
  border-radius: var(--nx-component-command-button-radius);
  color: var(--nx-color-text);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--nx-color-surface-raised) 84%, transparent),
    color-mix(in srgb, var(--nx-color-surface-interactive) 92%, transparent));
  box-shadow: 0 2px 7px color-mix(in srgb, var(--nx-color-shadow-color) 48%, transparent), inset 0 1px 0 color-mix(in srgb, white 58%, transparent);
  font: inherit;
  cursor: pointer;
}
.nx-command-button:hover:not(:disabled),
.nx-command-tile:hover:not(:disabled) {
  border-color: var(--nx-color-border-strong);
  color: var(--nx-color-text-strong);
  background: var(--nx-color-surface-hover);
  transform: translateY(-1px);
  box-shadow: var(--nx-shadow-sm), inset 0 1px 0 color-mix(in srgb, white 64%, transparent);
}
.nx-command-button > svg,
.nx-command-button > [aria-hidden="true"],
.nx-command-tile__icon {
  width: var(--nx-component-command-button-icon-size);
  height: var(--nx-component-command-button-icon-size);
  color: var(--nx-color-accent-primary-pressed);
}
.nx-command-tile__label { color: var(--nx-color-text); font-size: var(--nx-component-command-button-label-size); font-weight: var(--nx-font-weight-medium); }

.nx-field {
  border-color: color-mix(in srgb, var(--nx-color-border-strong) 82%, transparent);
  border-bottom-color: color-mix(in srgb, var(--nx-color-border-strong) 96%, transparent);
  border-radius: var(--nx-component-field-radius);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--nx-color-surface-raised) 68%, transparent),
    color-mix(in srgb, var(--nx-color-surface-interactive) 96%, transparent));
  box-shadow: 0 2px 7px color-mix(in srgb, var(--nx-color-shadow-color) 40%, transparent), inset 0 1px 0 color-mix(in srgb, white 52%, transparent);
}
.nx-field:focus {
  border-color: var(--nx-color-accent-primary);
  background: var(--nx-color-surface-raised);
  box-shadow: var(--nx-shadow-focus), inset 0 1px 0 color-mix(in srgb, white 62%, transparent);
}

.nx-navigation-list {
  padding: var(--nx-space-2);
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-component-card-radius);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--nx-color-surface-raised) 72%, transparent),
    color-mix(in srgb, var(--nx-color-surface-soft) 92%, transparent));
  box-shadow: var(--nx-shadow-sm), inset 0 1px 0 color-mix(in srgb, white 52%, transparent);
}
.nx-list-item,
.nx-navigation-item {
  min-height: var(--nx-component-list-item-min-height);
  border: 1px solid transparent;
  border-radius: var(--nx-component-list-item-radius);
  color: var(--nx-color-text);
  background: transparent;
}
.nx-list-item:hover,
.nx-navigation-item:hover { background: color-mix(in srgb, var(--nx-color-surface-hover) 88%, transparent); }
.nx-list-item[aria-selected="true"],
.nx-list-item.is-selected,
.nx-navigation-item[aria-current="page"],
.nx-navigation-item.is-selected {
  border-color: color-mix(in srgb, var(--nx-color-accent-primary) 68%, var(--nx-color-border));
  color: var(--nx-color-text-strong);
  background: color-mix(in srgb, var(--nx-color-surface-selected) 94%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 40%, transparent);
}

.nx-status-banner {
  --nx-status-color: var(--nx-color-info);
  --nx-status-soft: var(--nx-color-info-soft);
  position: relative;
  min-height: 7rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  margin-inline-start: var(--nx-component-status-banner-layer-offset);
  padding: var(--nx-component-status-banner-padding);
  padding-inline-start: calc(var(--nx-component-status-banner-padding) + var(--nx-space-4));
  border: 1px solid color-mix(in srgb, var(--nx-status-color) 48%, var(--nx-color-border));
  border-radius: var(--nx-component-status-banner-radius);
  color: var(--nx-color-text);
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--nx-color-surface-raised) 94%, transparent),
    color-mix(in srgb, var(--nx-status-soft) 42%, var(--nx-color-surface-raised)));
  box-shadow: var(--nx-shadow-sm), inset 0 1px 0 color-mix(in srgb, white 58%, transparent);
}
.nx-status-banner::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(-1 * var(--nx-component-status-banner-layer-offset));
  width: calc(var(--nx-component-status-banner-layer-offset) + var(--nx-radius-xl));
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--nx-status-color) 42%, var(--nx-color-border));
  border-inline-end: 0;
  border-radius: var(--nx-component-status-banner-radius) 0 0 var(--nx-component-status-banner-radius);
  background: color-mix(in srgb, var(--nx-status-soft) 82%, var(--nx-color-surface-soft));
}
:dir(rtl) .nx-status-banner::before { border-inline-start: 0; border-inline-end: 1px solid color-mix(in srgb, var(--nx-status-color) 42%, var(--nx-color-border)); border-radius: 0 var(--nx-component-status-banner-radius) var(--nx-component-status-banner-radius) 0; }
.nx-status-banner__icon {
  position: absolute;
  inset-inline-start: calc(-1 * var(--nx-component-status-banner-layer-offset) - var(--nx-space-3));
  inset-block-start: 50%;
  width: var(--nx-component-status-banner-icon-size);
  height: var(--nx-component-status-banner-icon-size);
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid color-mix(in srgb, var(--nx-status-color) 42%, var(--nx-color-border));
  border-radius: 50%;
  color: var(--nx-status-color);
  background: color-mix(in srgb, var(--nx-color-surface-raised) 92%, transparent);
  box-shadow: var(--nx-shadow-sm), inset 0 1px 0 color-mix(in srgb, white 64%, transparent);
}
.nx-status-banner__title { color: var(--nx-status-color); font-weight: var(--nx-font-weight-bold); }
.nx-status-banner--success { --nx-status-color: var(--nx-color-success); --nx-status-soft: var(--nx-color-success-soft); }
.nx-status-banner--warning { --nx-status-color: var(--nx-color-warning); --nx-status-soft: var(--nx-color-warning-soft); }
.nx-status-banner--danger { --nx-status-color: var(--nx-color-danger); --nx-status-soft: var(--nx-color-danger-soft); }
.nx-status-banner--help { --nx-status-color: var(--nx-color-accent-primary); --nx-status-soft: var(--nx-color-surface-selected); }

.nx-operation-progress {
  padding: var(--nx-space-4);
  border: 1px solid var(--nx-color-border-strong);
  border-radius: var(--nx-component-card-radius);
  background: linear-gradient(145deg, var(--nx-color-surface-raised), var(--nx-color-surface-soft));
  box-shadow: var(--nx-shadow-sm), inset 0 1px 0 color-mix(in srgb, white 58%, transparent);
}
.nx-operation-progress__track,
.nx-progress {
  position: relative;
  height: var(--nx-component-progress-height);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--nx-color-border-strong) 80%, transparent);
  border-radius: var(--nx-component-progress-radius);
  background: color-mix(in srgb, var(--nx-color-surface-muted) 82%, transparent);
  box-shadow: inset 0 1px 3px color-mix(in srgb, var(--nx-color-shadow-color) 48%, transparent);
}
.nx-operation-progress__fill,
.nx-progress > span {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--nx-color-accent-primary) 72%, var(--nx-color-surface-selected)), var(--nx-color-accent-primary));
}
.nx-operation-progress__value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--nx-color-text);
  font-size: var(--nx-typography-size-xs);
  font-weight: var(--nx-font-weight-medium);
}

.nx-loading-skeleton {
  display: grid;
  gap: var(--nx-component-skeleton-gap);
  padding: var(--nx-space-5);
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-component-card-radius);
  background: linear-gradient(145deg, var(--nx-color-surface-raised), var(--nx-color-surface-soft));
  box-shadow: var(--nx-shadow-sm), inset 0 1px 0 color-mix(in srgb, white 58%, transparent);
}
.nx-skeleton-line {
  height: var(--nx-component-skeleton-height);
  border-radius: var(--nx-component-skeleton-radius);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--nx-color-surface-muted) 86%, transparent) 0%,
    color-mix(in srgb, var(--nx-color-surface-raised) 78%, transparent) 45%,
    color-mix(in srgb, var(--nx-color-surface-muted) 86%, transparent) 100%);
  background-size: 220% 100%;
  animation: nx-soft-skeleton 1.55s ease-in-out infinite;
}
@keyframes nx-soft-skeleton { 0% { background-position: 100% 0; } 100% { background-position: -120% 0; } }

* { scrollbar-width: thin; scrollbar-color: var(--nx-color-border-strong) transparent; }
*::-webkit-scrollbar { width: .55rem; height: .55rem; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: var(--nx-radius-pill); background: var(--nx-color-border-strong); background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--nx-color-border-interactive); background-clip: padding-box; }


/* Nexamas Refined Soft Fluent 1.2.1: neutral materials and restrained depth. */
.nx-theme-toggle,
.nx-button,
.nx-command-button {
  border-color: var(--nx-color-border);
  border-bottom-color: var(--nx-color-border);
  background: var(--nx-color-surface-interactive);
  box-shadow: none;
}
.nx-theme-toggle:hover:not(:disabled),
.nx-button:hover:not(:disabled),
.nx-command-button:hover:not(:disabled) {
  border-color: var(--nx-color-border-strong);
  background: var(--nx-color-surface-hover);
  box-shadow: none;
  transform: none;
}
.nx-theme-toggle:active:not(:disabled),
.nx-button:active:not(:disabled),
.nx-command-button:active:not(:disabled) {
  transform: scale(.985);
  border-color: var(--nx-color-border-interactive);
  background: var(--nx-color-surface-selected);
  box-shadow: none;
}
.nx-theme-toggle:focus-visible,
.nx-button:focus-visible,
.nx-command-button:focus-visible { outline: none; box-shadow: var(--nx-shadow-focus); }
.nx-button--primary {
  border-color: var(--nx-color-accent-primary);
  border-bottom-color: var(--nx-color-accent-primary);
  background: var(--nx-color-accent-primary);
  box-shadow: none;
}
.nx-button--primary:hover:not(:disabled) { background: var(--nx-color-accent-primary-hover); box-shadow: none; }
.nx-card,
.nx-surface {
  border-color: var(--nx-color-border);
  background: var(--nx-color-surface-raised);
  box-shadow: var(--nx-shadow-sm);
}
.nx-card--soft,
.nx-surface--soft { background: var(--nx-color-surface-soft); box-shadow: none; }
.nx-field {
  border-color: var(--nx-color-border-strong);
  border-bottom-color: var(--nx-color-border-strong);
  background: var(--nx-color-surface-raised);
  box-shadow: none;
}
.nx-field:hover:not(:disabled) { border-color: var(--nx-color-border-interactive); }
.nx-field:focus,
.nx-field:focus-visible {
  border-color: var(--nx-color-accent-primary);
  outline: none;
  box-shadow: var(--nx-shadow-focus);
}
.nx-navigation-list {
  border-color: var(--nx-color-border);
  background: var(--nx-color-surface-raised);
  box-shadow: var(--nx-shadow-sm);
}
.nx-list-item[aria-selected="true"],
.nx-list-item.is-selected,
.nx-navigation-item[aria-current="page"],
.nx-navigation-item.is-selected { box-shadow: none; }
.nx-status-banner,
.nx-entity-status-card {
  --nx-status-color: var(--nx-color-info);
  --nx-status-soft: var(--nx-color-info-soft);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--nx-space-4);
  align-items: center;
  min-height: 6rem;
  margin: 0;
  padding: var(--nx-component-status-banner-padding);
  border: 1px solid color-mix(in srgb, var(--nx-status-color) 34%, var(--nx-color-border));
  border-radius: var(--nx-component-status-banner-radius);
  color: var(--nx-color-text);
  background: color-mix(in srgb, var(--nx-status-soft) 28%, var(--nx-color-surface-raised));
  box-shadow: var(--nx-shadow-sm);
}
.nx-status-banner::before,
.nx-entity-status-card::before { display: none; }
.nx-status-banner__icon,
.nx-entity-status-card__icon {
  position: static;
  width: var(--nx-component-status-banner-icon-size);
  height: var(--nx-component-status-banner-icon-size);
  display: grid;
  place-items: center;
  transform: none;
  border: 1px solid color-mix(in srgb, var(--nx-status-color) 34%, var(--nx-color-border));
  border-radius: 50%;
  color: var(--nx-status-color);
  background: var(--nx-color-surface-raised);
  box-shadow: none;
}
.nx-inline-message {
  display: flex;
  align-items: center;
  gap: var(--nx-space-2);
  min-height: 2.25rem;
  padding: var(--nx-space-2) var(--nx-space-3);
  border: 1px solid color-mix(in srgb, var(--nx-color-info) 22%, var(--nx-color-border));
  border-radius: var(--nx-radius-lg);
  color: var(--nx-color-text-muted);
  background: color-mix(in srgb, var(--nx-color-info-soft) 20%, var(--nx-color-surface-raised));
  font-size: var(--nx-typography-size-sm);
  box-shadow: none;
}
.nx-inline-message__icon { width: 1.1rem; height: 1.1rem; flex: none; color: var(--nx-color-info); }
.nx-operation-progress,
.nx-loading-skeleton {
  border-color: var(--nx-color-border);
  background: var(--nx-color-surface-raised);
  box-shadow: var(--nx-shadow-sm);
}
.nx-operation-progress__track,
.nx-progress { box-shadow: none; }
.nx-icon { width: 1.25rem; height: 1.25rem; display: block; flex: none; color: currentColor; }
.nx-icon--brand { width: 1.35rem; height: 1.35rem; }

/* Nexamas Visual Completion 1.3.0: overlays, feedback, drag states, and completion patterns. */
.nx-confirm-dialog {
  width: min(calc(100% - 2rem), var(--nx-component-confirm-dialog-max-width));
  padding: 0;
  border: 0;
  border-radius: var(--nx-component-confirm-dialog-radius);
  color: var(--nx-color-text);
  background: transparent;
  box-shadow: none;
}
.nx-confirm-dialog::backdrop { background: color-mix(in srgb, var(--nx-color-overlay) 92%, transparent); backdrop-filter: blur(4px); }
.nx-confirm-dialog__panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--nx-space-4);
  padding: var(--nx-component-confirm-dialog-padding);
  border: 1px solid var(--nx-color-border);
  border-radius: inherit;
  color: var(--nx-color-text);
  background: var(--nx-color-surface-raised);
  box-shadow: var(--nx-shadow-lg);
}
.nx-confirm-dialog__icon {
  width: var(--nx-component-confirm-dialog-icon-size);
  height: var(--nx-component-confirm-dialog-icon-size);
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--nx-color-danger);
  background: var(--nx-color-danger-soft);
  font-size: var(--nx-typography-size-xl);
  font-weight: var(--nx-font-weight-bold);
}
.nx-confirm-dialog[data-tone="warning"] .nx-confirm-dialog__icon { color: var(--nx-color-warning); background: var(--nx-color-warning-soft); }
.nx-confirm-dialog__content { min-width: 0; display: grid; gap: var(--nx-space-2); }
.nx-confirm-dialog__title { margin: 0; color: var(--nx-color-text-strong); font-size: var(--nx-typography-size-lg); }
.nx-confirm-dialog__message, .nx-confirm-dialog__hint { margin: 0; color: var(--nx-color-text-muted); }
.nx-confirm-dialog__hint { font-size: var(--nx-typography-size-sm); }
.nx-confirm-dialog__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--nx-space-2); padding-block-start: var(--nx-space-2); }

.nx-context-menu {
  position: fixed;
  z-index: var(--nx-z-popover);
  min-width: 13rem;
  max-width: min(20rem, calc(100vw - 1rem));
  padding: var(--nx-component-menu-padding);
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-component-menu-radius);
  color: var(--nx-color-text);
  background: var(--nx-color-surface-raised);
  box-shadow: var(--nx-shadow-lg);
  backdrop-filter: none;
}
.nx-context-menu [role="menuitem"] {
  width: 100%;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  gap: var(--nx-space-3);
  padding: var(--nx-space-2) var(--nx-space-3);
  border: 0;
  border-radius: var(--nx-radius-lg);
  color: var(--nx-color-text);
  background: transparent;
  text-align: start;
  font: inherit;
  cursor: pointer;
}
.nx-context-menu [role="menuitem"]:hover,
.nx-context-menu [role="menuitem"]:focus-visible { outline: none; background: var(--nx-color-surface-hover); }
.nx-context-menu [role="menuitem"]:disabled { opacity: .45; cursor: not-allowed; }
.nx-context-menu [role="menuitem"].is-danger,
.nx-context-menu [role="menuitem"][data-tone="danger"] { color: var(--nx-color-danger); }
.nx-context-menu hr { height: 1px; margin: var(--nx-space-1) var(--nx-space-2); border: 0; background: var(--nx-color-border); }

.nx-tooltip {
  position: fixed;
  z-index: var(--nx-z-tooltip);
  max-width: var(--nx-component-tooltip-max-width);
  padding: var(--nx-component-tooltip-padding-block) var(--nx-component-tooltip-padding-inline);
  border: 1px solid var(--nx-color-inverse-border);
  border-radius: var(--nx-component-tooltip-radius);
  color: var(--nx-color-inverse-text);
  background: var(--nx-color-inverse-surface);
  box-shadow: var(--nx-shadow-md);
  font-size: var(--nx-typography-size-xs);
  line-height: 1.35;
  pointer-events: none;
  animation: nx-tooltip-in var(--nx-motion-fast) var(--nx-motion-ease-standard) both;
}
@keyframes nx-tooltip-in { from { opacity: 0; transform: translateY(2px) scale(.98); } to { opacity: 1; transform: none; } }

.nx-toast-stack { position: fixed; z-index: var(--nx-z-toast); inset-block-start: var(--nx-space-4); inset-inline-end: var(--nx-space-4); width: min(24rem, calc(100vw - 2rem)); display: grid; gap: var(--nx-space-2); pointer-events: none; }
.nx-toast-stack > * { pointer-events: auto; }
.nx-toast:not([hidden]) { animation: nx-toast-in var(--nx-motion-normal) var(--nx-motion-ease-decelerate) both; }
@keyframes nx-toast-in { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: none; } }

.nx-inline-feedback {
  display: flex;
  align-items: flex-start;
  gap: var(--nx-space-2);
  padding: var(--nx-component-inline-feedback-padding-block) var(--nx-component-inline-feedback-padding-inline);
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-component-inline-feedback-radius);
  color: var(--nx-color-text-muted);
  background: var(--nx-color-surface-soft);
  font-size: var(--nx-typography-size-sm);
}
.nx-inline-feedback[data-tone="danger"] { color: var(--nx-color-danger); border-color: color-mix(in srgb, var(--nx-color-danger) 30%, var(--nx-color-border)); background: var(--nx-color-danger-soft); }
.nx-inline-feedback[data-tone="success"] { color: var(--nx-color-success); border-color: color-mix(in srgb, var(--nx-color-success) 30%, var(--nx-color-border)); background: var(--nx-color-success-soft); }

.nx-drop-zone {
  display: grid;
  place-items: center;
  gap: var(--nx-space-3);
  min-height: 8rem;
  padding: var(--nx-component-drop-zone-padding);
  border: var(--nx-component-drop-zone-border-width) dashed var(--nx-color-border-strong);
  border-radius: var(--nx-component-drop-zone-radius);
  color: var(--nx-color-text-muted);
  background: var(--nx-color-surface-soft);
  text-align: center;
  transition: border-color var(--nx-motion-fast), background var(--nx-motion-fast), transform var(--nx-motion-fast);
}
.nx-drop-zone:hover,
.nx-drop-zone:focus-within,
.nx-drop-zone[data-drop-state="eligible"] { border-color: var(--nx-color-accent-primary); color: var(--nx-color-text); background: var(--nx-color-surface-selected); }
.nx-drop-zone[data-drop-state="active"] { transform: scale(.995); border-style: solid; background: color-mix(in srgb, var(--nx-color-accent-primary) 10%, var(--nx-color-surface-selected)); }
.nx-drop-zone[data-drop-state="invalid"] { border-color: var(--nx-color-danger); color: var(--nx-color-danger); background: var(--nx-color-danger-soft); }

.nx-empty-state,
.nx-error-state {
  min-height: 12rem;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--nx-space-3);
  padding: var(--nx-component-empty-state-padding);
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-component-empty-state-radius);
  color: var(--nx-color-text-muted);
  background: var(--nx-color-surface-soft);
  text-align: center;
}
.nx-empty-state__icon,
.nx-error-state__icon { width: var(--nx-component-empty-state-icon-size); height: var(--nx-component-empty-state-icon-size); color: var(--nx-color-accent-primary); }
.nx-error-state { border-color: color-mix(in srgb, var(--nx-color-danger) 24%, var(--nx-color-border)); background: color-mix(in srgb, var(--nx-color-danger-soft) 40%, var(--nx-color-surface-soft)); }
.nx-error-state__icon { color: var(--nx-color-danger); }

.nx-dragging { opacity: .62; transform: scale(.99); }
.nx-drop-eligible { outline: 1px dashed color-mix(in srgb, var(--nx-color-accent-primary) 55%, transparent); outline-offset: -2px; }
.nx-drop-target { border-color: var(--nx-color-accent-primary) !important; background: var(--nx-color-surface-selected) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--nx-color-accent-primary) 16%, transparent) !important; }

@media (max-width: 32rem) {
  .nx-confirm-dialog__panel { grid-template-columns: 1fr; }
  .nx-confirm-dialog__icon { width: 2.25rem; height: 2.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nx-theme-toggle, .nx-button, .nx-command-button, .nx-field, .nx-tooltip, .nx-toast, .nx-drop-zone { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}