/* ==========================================================================
   NEXORA Design System v1.0.0
   Premium AI Project Management SaaS
   ==========================================================================
   Prefix: nx- (classes) | --nx- (CSS variables)
   Themes: data-theme="light|dark" | data-accent="blue|violet|emerald|rose|amber"
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* --------------------------------------------------------------------------
   1. Root Design Tokens
   -------------------------------------------------------------------------- */
:root {
  --nx-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --nx-font-family-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  --nx-font-size-xs: 0.75rem; --nx-font-size-sm: 0.875rem; --nx-font-size-base: 1rem;
  --nx-font-size-lg: 1.125rem; --nx-font-size-xl: 1.25rem; --nx-font-size-2xl: 1.5rem;
  --nx-font-size-3xl: 1.875rem; --nx-font-size-4xl: 2.25rem; --nx-font-size-5xl: 3rem;
  --nx-font-weight-light: 300; --nx-font-weight-normal: 400; --nx-font-weight-medium: 500;
  --nx-font-weight-semibold: 600; --nx-font-weight-bold: 700; --nx-font-weight-extrabold: 800;
  --nx-line-height-tight: 1.25; --nx-line-height-snug: 1.375; --nx-line-height-normal: 1.5;
  --nx-line-height-relaxed: 1.625; --nx-line-height-loose: 2;
  --nx-letter-spacing-tight: -0.025em; --nx-letter-spacing-normal: 0; --nx-letter-spacing-wide: 0.025em;
  --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-8: 2rem;
  --nx-space-10: 2.5rem; --nx-space-12: 3rem; --nx-space-16: 4rem; --nx-space-20: 5rem;
  --nx-space-24: 6rem; --nx-space-32: 8rem;
  --nx-radius-none: 0; --nx-radius-sm: 0.25rem; --nx-radius-md: 0.375rem; --nx-radius-lg: 0.5rem;
  --nx-radius-xl: 0.75rem; --nx-radius-2xl: 1rem; --nx-radius-3xl: 1.5rem; --nx-radius-full: 9999px;
  --nx-shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.05);
  --nx-shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
  --nx-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --nx-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --nx-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
  --nx-shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25);
  --nx-shadow-inner: inset 0 2px 4px 0 rgba(0,0,0,0.05);
  --nx-transition-fast: 150ms cubic-bezier(0.4,0,0.2,1);
  --nx-transition-base: 200ms cubic-bezier(0.4,0,0.2,1);
  --nx-transition-slow: 300ms cubic-bezier(0.4,0,0.2,1);
  --nx-transition-slower: 500ms cubic-bezier(0.4,0,0.2,1);
  --nx-z-dropdown: 1000; --nx-z-sticky: 1020; --nx-z-fixed: 1030;
  --nx-z-modal-backdrop: 1040; --nx-z-modal: 1050; --nx-z-popover: 1060;
  --nx-z-tooltip: 1070; --nx-z-toast: 1080; --nx-z-command: 1090;
  --nx-sidebar-width: 260px; --nx-sidebar-collapsed-width: 72px;
  --nx-topbar-height: 64px; --nx-bottom-nav-height: 64px; --nx-content-max-width: 1440px;
  --nx-accent-primary: #2563EB; --nx-accent-secondary: #60A5FA;
  --nx-accent-primary-hover: #1D4ED8; --nx-accent-primary-active: #1E40AF;
  --nx-accent-primary-subtle: rgba(37,99,235,0.1); --nx-accent-primary-muted: rgba(37,99,235,0.2);
}

/* --------------------------------------------------------------------------
   2. Light Theme
   -------------------------------------------------------------------------- */
[data-theme="light"], .nx-theme-light {
  --nx-bg-primary: #FFFFFF; --nx-bg-secondary: #F8FAFC; --nx-bg-tertiary: #F1F5F9;
  --nx-bg-elevated: #FFFFFF; --nx-bg-overlay: rgba(15,23,42,0.5); --nx-bg-inverse: #0F172A;
  --nx-bg-accent-subtle: var(--nx-accent-primary-subtle);
  --nx-text-primary: #0F172A; --nx-text-secondary: #475569; --nx-text-tertiary: #94A3B8;
  --nx-text-inverse: #FFFFFF; --nx-text-accent: var(--nx-accent-primary);
  --nx-text-link: var(--nx-accent-primary); --nx-text-link-hover: var(--nx-accent-primary-hover);
  --nx-border-primary: #E2E8F0; --nx-border-secondary: #CBD5E1;
  --nx-border-focus: var(--nx-accent-primary); --nx-border-subtle: #F1F5F9;
  --nx-status-success: #059669; --nx-status-success-bg: #ECFDF5;
  --nx-status-warning: #D97706; --nx-status-warning-bg: #FFFBEB;
  --nx-status-error: #DC2626; --nx-status-error-bg: #FEF2F2;
  --nx-status-info: #2563EB; --nx-status-info-bg: #EFF6FF;
  --nx-skeleton-base: #E2E8F0; --nx-skeleton-highlight: #F8FAFC;
  --nx-scrollbar-track: #F1F5F9; --nx-scrollbar-thumb: #CBD5E1; --nx-scrollbar-thumb-hover: #94A3B8;
}

/* --------------------------------------------------------------------------
   3. Dark Theme
   -------------------------------------------------------------------------- */
[data-theme="dark"], .nx-theme-dark {
  --nx-bg-primary: #0F172A; --nx-bg-secondary: #1E293B; --nx-bg-tertiary: #334155;
  --nx-bg-elevated: #1E293B; --nx-bg-overlay: rgba(0,0,0,0.7); --nx-bg-inverse: #F8FAFC;
  --nx-bg-accent-subtle: var(--nx-accent-primary-subtle);
  --nx-text-primary: #F8FAFC; --nx-text-secondary: #CBD5E1; --nx-text-tertiary: #64748B;
  --nx-text-inverse: #0F172A; --nx-text-accent: var(--nx-accent-secondary);
  --nx-text-link: var(--nx-accent-secondary); --nx-text-link-hover: var(--nx-accent-primary);
  --nx-border-primary: #334155; --nx-border-secondary: #475569;
  --nx-border-focus: var(--nx-accent-secondary); --nx-border-subtle: #1E293B;
  --nx-status-success: #34D399; --nx-status-success-bg: rgba(5,150,105,0.15);
  --nx-status-warning: #FBBF24; --nx-status-warning-bg: rgba(217,119,6,0.15);
  --nx-status-error: #F87171; --nx-status-error-bg: rgba(220,38,38,0.15);
  --nx-status-info: #60A5FA; --nx-status-info-bg: rgba(37,99,235,0.15);
  --nx-skeleton-base: #334155; --nx-skeleton-highlight: #475569;
  --nx-scrollbar-track: #1E293B; --nx-scrollbar-thumb: #475569; --nx-scrollbar-thumb-hover: #64748B;
}

/* --------------------------------------------------------------------------
   4. Accent Themes
   -------------------------------------------------------------------------- */
[data-accent="blue"] {
  --nx-accent-primary: #2563EB; --nx-accent-secondary: #60A5FA;
  --nx-accent-primary-hover: #1D4ED8; --nx-accent-primary-active: #1E40AF;
  --nx-accent-primary-subtle: rgba(37,99,235,0.1); --nx-accent-primary-muted: rgba(37,99,235,0.2);
}

[data-accent="violet"] {
  --nx-accent-primary: #7C3AED; --nx-accent-secondary: #A78BFA;
  --nx-accent-primary-hover: #6D28D9; --nx-accent-primary-active: #5B21B6;
  --nx-accent-primary-subtle: rgba(124,58,237,0.1); --nx-accent-primary-muted: rgba(124,58,237,0.2);
}

[data-accent="emerald"] {
  --nx-accent-primary: #059669; --nx-accent-secondary: #34D399;
  --nx-accent-primary-hover: #047857; --nx-accent-primary-active: #065F46;
  --nx-accent-primary-subtle: rgba(5,150,105,0.1); --nx-accent-primary-muted: rgba(5,150,105,0.2);
}

[data-accent="rose"] {
  --nx-accent-primary: #E11D48; --nx-accent-secondary: #FB7185;
  --nx-accent-primary-hover: #BE123C; --nx-accent-primary-active: #9F1239;
  --nx-accent-primary-subtle: rgba(225,29,72,0.1); --nx-accent-primary-muted: rgba(225,29,72,0.2);
}

[data-accent="amber"] {
  --nx-accent-primary: #D97706; --nx-accent-secondary: #FBBF24;
  --nx-accent-primary-hover: #B45309; --nx-accent-primary-active: #92400E;
  --nx-accent-primary-subtle: rgba(217,119,6,0.1); --nx-accent-primary-muted: rgba(217,119,6,0.2);
}

/* --------------------------------------------------------------------------
   5. Base Reset & Typography
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body { font-family: var(--nx-font-family); font-size: var(--nx-font-size-base); line-height: var(--nx-line-height-normal); color: var(--nx-text-primary); background-color: var(--nx-bg-primary); }
img, video { display: block; max-width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Icon system — constrain all inline SVGs (never inherit max-width: 100%)
   -------------------------------------------------------------------------- */
.nx-icon,
svg.nx-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  display: block;
  overflow: visible;
}
.nx-icon-xs, svg.nx-icon-xs { width: 0.875rem; height: 0.875rem; }
.nx-icon-sm, svg.nx-icon-sm { width: 1rem; height: 1rem; }
.nx-icon-md, svg.nx-icon-md { width: 1.25rem; height: 1.25rem; }
.nx-icon-lg, svg.nx-icon-lg { width: 1.5rem; height: 1.5rem; }
.nx-icon-xl, svg.nx-icon-xl { width: 2rem; height: 2rem; }

/* Sidebar & nav icons */
.nx-sidebar-item-icon,
.nx-bottom-nav-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  display: block;
}

/* Topbar & action buttons */
.nx-topbar-action svg,
.nx-sidebar-toggle svg,
.nx-mobile-menu-btn svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  display: block;
}

/* Modal, drawer, toast controls */
.nx-modal-close svg,
.nx-drawer-close svg,
.nx-toast-close svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  display: block;
}

/* Command palette & search */
.nx-command-input-icon svg,
.nx-search-input-icon svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  display: block;
}
.nx-command-item-icon svg,
.nx-search-result-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  display: block;
}

/* Stat cards, empty states, breadcrumbs */
.nx-stat-card-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  display: block;
}
.nx-empty-icon svg {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  display: block;
}
.nx-empty-icon-lg svg { width: 2.5rem; height: 2.5rem; }
.nx-breadcrumb-separator svg,
.nx-table-sort-icon svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  display: block;
}

/* Workspace switcher chevron */
.nx-workspace-switcher svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  display: block;
  margin-left: auto;
}

/* Logo mark */
.nx-sidebar-logo-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  display: block;
}

/* Buttons with inline icons */
.nx-btn svg:not(.nx-chart-line) {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  display: block;
}
.nx-btn-lg svg:not(.nx-chart-line) { width: 1.125rem; height: 1.125rem; }

/* Task & kanban inline icons */
.nx-task-row svg,
.nx-task-card svg,
.nx-task-card-drag-handle svg {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

/* Bottom nav FAB */
.nx-bottom-nav-icon-wrapper svg,
.nx-bottom-nav-fab svg {
  width: 1.375rem;
  height: 1.375rem;
  flex-shrink: 0;
  display: block;
}

/* Tab icons */
.nx-tab svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  display: block;
}

/* Charts & data viz — these SHOULD fill their container */
.nx-chart-line,
.nx-chart-bar,
.nx-progress-circle svg,
.nx-workload-chart svg {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

/* Catch-all: any bare SVG inside the app shell without explicit sizing */
#nexora-app svg:not(.nx-chart-line):not([width]):not([height]),
#nexora-modal-root svg:not([width]):not([height]),
#nexora-drawer-root svg:not([width]):not([height]),
#nexora-toast-root svg:not([width]):not([height]),
#nexora-search-root svg:not([width]):not([height]),
#nexora-command-root svg:not([width]):not([height]) {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--nx-text-link); text-decoration: none; transition: color var(--nx-transition-fast); }
a:hover { color: var(--nx-text-link-hover); }
::selection { background-color: var(--nx-accent-primary-muted); color: var(--nx-text-primary); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--nx-scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--nx-scrollbar-thumb); border-radius: var(--nx-radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--nx-scrollbar-thumb-hover); }
.nx-app { display: flex; min-height: 100vh; background: var(--nx-bg-secondary); }
.nx-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#nx-page-root { flex: 1; display: flex; flex-direction: column; min-width: 0; width: 100%; }
#nx-page-root > .nx-content { flex: 1; width: 100%; }
#nx-page-root > .nx-page-documents { margin: var(--nx-space-6); width: calc(100% - var(--nx-space-12)); max-width: calc(var(--nx-content-max-width) - var(--nx-space-12)); align-self: center; }
.nx-content { flex: 1; padding: var(--nx-space-6); max-width: var(--nx-content-max-width); margin: 0 auto; width: 100%; box-sizing: border-box; }
.nx-page { width: 100%; }
.nx-page-header { margin-bottom: var(--nx-space-6); }
.nx-page-title { font-size: var(--nx-font-size-2xl); font-weight: var(--nx-font-weight-bold); color: var(--nx-text-primary); letter-spacing: var(--nx-letter-spacing-tight); }
.nx-page-subtitle { font-size: var(--nx-font-size-sm); color: var(--nx-text-secondary); margin-top: var(--nx-space-1); }

/* --------------------------------------------------------------------------
   6. Spacing Utilities
   -------------------------------------------------------------------------- */
.nx-m-0 { margin: var(--nx-space-0); }
.nx-mt-0 { margin-top: var(--nx-space-0); }
.nx-mr-0 { margin-right: var(--nx-space-0); }
.nx-mb-0 { margin-bottom: var(--nx-space-0); }
.nx-ml-0 { margin-left: var(--nx-space-0); }
.nx-mx-0 { margin-left: var(--nx-space-0); margin-right: var(--nx-space-0); }
.nx-my-0 { margin-top: var(--nx-space-0); margin-bottom: var(--nx-space-0); }
.nx-p-0 { padding: var(--nx-space-0); }
.nx-pt-0 { padding-top: var(--nx-space-0); }
.nx-pr-0 { padding-right: var(--nx-space-0); }
.nx-pb-0 { padding-bottom: var(--nx-space-0); }
.nx-pl-0 { padding-left: var(--nx-space-0); }
.nx-px-0 { padding-left: var(--nx-space-0); padding-right: var(--nx-space-0); }
.nx-py-0 { padding-top: var(--nx-space-0); padding-bottom: var(--nx-space-0); }
.nx-gap-0 { gap: var(--nx-space-0); }
.nx-m-1 { margin: var(--nx-space-1); }
.nx-mt-1 { margin-top: var(--nx-space-1); }
.nx-mr-1 { margin-right: var(--nx-space-1); }
.nx-mb-1 { margin-bottom: var(--nx-space-1); }
.nx-ml-1 { margin-left: var(--nx-space-1); }
.nx-mx-1 { margin-left: var(--nx-space-1); margin-right: var(--nx-space-1); }
.nx-my-1 { margin-top: var(--nx-space-1); margin-bottom: var(--nx-space-1); }
.nx-p-1 { padding: var(--nx-space-1); }
.nx-pt-1 { padding-top: var(--nx-space-1); }
.nx-pr-1 { padding-right: var(--nx-space-1); }
.nx-pb-1 { padding-bottom: var(--nx-space-1); }
.nx-pl-1 { padding-left: var(--nx-space-1); }
.nx-px-1 { padding-left: var(--nx-space-1); padding-right: var(--nx-space-1); }
.nx-py-1 { padding-top: var(--nx-space-1); padding-bottom: var(--nx-space-1); }
.nx-gap-1 { gap: var(--nx-space-1); }
.nx-m-2 { margin: var(--nx-space-2); }
.nx-mt-2 { margin-top: var(--nx-space-2); }
.nx-mr-2 { margin-right: var(--nx-space-2); }
.nx-mb-2 { margin-bottom: var(--nx-space-2); }
.nx-ml-2 { margin-left: var(--nx-space-2); }
.nx-mx-2 { margin-left: var(--nx-space-2); margin-right: var(--nx-space-2); }
.nx-my-2 { margin-top: var(--nx-space-2); margin-bottom: var(--nx-space-2); }
.nx-p-2 { padding: var(--nx-space-2); }
.nx-pt-2 { padding-top: var(--nx-space-2); }
.nx-pr-2 { padding-right: var(--nx-space-2); }
.nx-pb-2 { padding-bottom: var(--nx-space-2); }
.nx-pl-2 { padding-left: var(--nx-space-2); }
.nx-px-2 { padding-left: var(--nx-space-2); padding-right: var(--nx-space-2); }
.nx-py-2 { padding-top: var(--nx-space-2); padding-bottom: var(--nx-space-2); }
.nx-gap-2 { gap: var(--nx-space-2); }
.nx-m-3 { margin: var(--nx-space-3); }
.nx-mt-3 { margin-top: var(--nx-space-3); }
.nx-mr-3 { margin-right: var(--nx-space-3); }
.nx-mb-3 { margin-bottom: var(--nx-space-3); }
.nx-ml-3 { margin-left: var(--nx-space-3); }
.nx-mx-3 { margin-left: var(--nx-space-3); margin-right: var(--nx-space-3); }
.nx-my-3 { margin-top: var(--nx-space-3); margin-bottom: var(--nx-space-3); }
.nx-p-3 { padding: var(--nx-space-3); }
.nx-pt-3 { padding-top: var(--nx-space-3); }
.nx-pr-3 { padding-right: var(--nx-space-3); }
.nx-pb-3 { padding-bottom: var(--nx-space-3); }
.nx-pl-3 { padding-left: var(--nx-space-3); }
.nx-px-3 { padding-left: var(--nx-space-3); padding-right: var(--nx-space-3); }
.nx-py-3 { padding-top: var(--nx-space-3); padding-bottom: var(--nx-space-3); }
.nx-gap-3 { gap: var(--nx-space-3); }
.nx-m-4 { margin: var(--nx-space-4); }
.nx-mt-4 { margin-top: var(--nx-space-4); }
.nx-mr-4 { margin-right: var(--nx-space-4); }
.nx-mb-4 { margin-bottom: var(--nx-space-4); }
.nx-ml-4 { margin-left: var(--nx-space-4); }
.nx-mx-4 { margin-left: var(--nx-space-4); margin-right: var(--nx-space-4); }
.nx-my-4 { margin-top: var(--nx-space-4); margin-bottom: var(--nx-space-4); }
.nx-p-4 { padding: var(--nx-space-4); }
.nx-pt-4 { padding-top: var(--nx-space-4); }
.nx-pr-4 { padding-right: var(--nx-space-4); }
.nx-pb-4 { padding-bottom: var(--nx-space-4); }
.nx-pl-4 { padding-left: var(--nx-space-4); }
.nx-px-4 { padding-left: var(--nx-space-4); padding-right: var(--nx-space-4); }
.nx-py-4 { padding-top: var(--nx-space-4); padding-bottom: var(--nx-space-4); }
.nx-gap-4 { gap: var(--nx-space-4); }
.nx-m-5 { margin: var(--nx-space-5); }
.nx-mt-5 { margin-top: var(--nx-space-5); }
.nx-mr-5 { margin-right: var(--nx-space-5); }
.nx-mb-5 { margin-bottom: var(--nx-space-5); }
.nx-ml-5 { margin-left: var(--nx-space-5); }
.nx-mx-5 { margin-left: var(--nx-space-5); margin-right: var(--nx-space-5); }
.nx-my-5 { margin-top: var(--nx-space-5); margin-bottom: var(--nx-space-5); }
.nx-p-5 { padding: var(--nx-space-5); }
.nx-pt-5 { padding-top: var(--nx-space-5); }
.nx-pr-5 { padding-right: var(--nx-space-5); }
.nx-pb-5 { padding-bottom: var(--nx-space-5); }
.nx-pl-5 { padding-left: var(--nx-space-5); }
.nx-px-5 { padding-left: var(--nx-space-5); padding-right: var(--nx-space-5); }
.nx-py-5 { padding-top: var(--nx-space-5); padding-bottom: var(--nx-space-5); }
.nx-gap-5 { gap: var(--nx-space-5); }
.nx-m-6 { margin: var(--nx-space-6); }
.nx-mt-6 { margin-top: var(--nx-space-6); }
.nx-mr-6 { margin-right: var(--nx-space-6); }
.nx-mb-6 { margin-bottom: var(--nx-space-6); }
.nx-ml-6 { margin-left: var(--nx-space-6); }
.nx-mx-6 { margin-left: var(--nx-space-6); margin-right: var(--nx-space-6); }
.nx-my-6 { margin-top: var(--nx-space-6); margin-bottom: var(--nx-space-6); }
.nx-p-6 { padding: var(--nx-space-6); }
.nx-pt-6 { padding-top: var(--nx-space-6); }
.nx-pr-6 { padding-right: var(--nx-space-6); }
.nx-pb-6 { padding-bottom: var(--nx-space-6); }
.nx-pl-6 { padding-left: var(--nx-space-6); }
.nx-px-6 { padding-left: var(--nx-space-6); padding-right: var(--nx-space-6); }
.nx-py-6 { padding-top: var(--nx-space-6); padding-bottom: var(--nx-space-6); }
.nx-gap-6 { gap: var(--nx-space-6); }
.nx-m-8 { margin: var(--nx-space-8); }
.nx-mt-8 { margin-top: var(--nx-space-8); }
.nx-mr-8 { margin-right: var(--nx-space-8); }
.nx-mb-8 { margin-bottom: var(--nx-space-8); }
.nx-ml-8 { margin-left: var(--nx-space-8); }
.nx-mx-8 { margin-left: var(--nx-space-8); margin-right: var(--nx-space-8); }
.nx-my-8 { margin-top: var(--nx-space-8); margin-bottom: var(--nx-space-8); }
.nx-p-8 { padding: var(--nx-space-8); }
.nx-pt-8 { padding-top: var(--nx-space-8); }
.nx-pr-8 { padding-right: var(--nx-space-8); }
.nx-pb-8 { padding-bottom: var(--nx-space-8); }
.nx-pl-8 { padding-left: var(--nx-space-8); }
.nx-px-8 { padding-left: var(--nx-space-8); padding-right: var(--nx-space-8); }
.nx-py-8 { padding-top: var(--nx-space-8); padding-bottom: var(--nx-space-8); }
.nx-gap-8 { gap: var(--nx-space-8); }
.nx-m-10 { margin: var(--nx-space-10); }
.nx-mt-10 { margin-top: var(--nx-space-10); }
.nx-mr-10 { margin-right: var(--nx-space-10); }
.nx-mb-10 { margin-bottom: var(--nx-space-10); }
.nx-ml-10 { margin-left: var(--nx-space-10); }
.nx-mx-10 { margin-left: var(--nx-space-10); margin-right: var(--nx-space-10); }
.nx-my-10 { margin-top: var(--nx-space-10); margin-bottom: var(--nx-space-10); }
.nx-p-10 { padding: var(--nx-space-10); }
.nx-pt-10 { padding-top: var(--nx-space-10); }
.nx-pr-10 { padding-right: var(--nx-space-10); }
.nx-pb-10 { padding-bottom: var(--nx-space-10); }
.nx-pl-10 { padding-left: var(--nx-space-10); }
.nx-px-10 { padding-left: var(--nx-space-10); padding-right: var(--nx-space-10); }
.nx-py-10 { padding-top: var(--nx-space-10); padding-bottom: var(--nx-space-10); }
.nx-gap-10 { gap: var(--nx-space-10); }
.nx-m-12 { margin: var(--nx-space-12); }
.nx-mt-12 { margin-top: var(--nx-space-12); }
.nx-mr-12 { margin-right: var(--nx-space-12); }
.nx-mb-12 { margin-bottom: var(--nx-space-12); }
.nx-ml-12 { margin-left: var(--nx-space-12); }
.nx-mx-12 { margin-left: var(--nx-space-12); margin-right: var(--nx-space-12); }
.nx-my-12 { margin-top: var(--nx-space-12); margin-bottom: var(--nx-space-12); }
.nx-p-12 { padding: var(--nx-space-12); }
.nx-pt-12 { padding-top: var(--nx-space-12); }
.nx-pr-12 { padding-right: var(--nx-space-12); }
.nx-pb-12 { padding-bottom: var(--nx-space-12); }
.nx-pl-12 { padding-left: var(--nx-space-12); }
.nx-px-12 { padding-left: var(--nx-space-12); padding-right: var(--nx-space-12); }
.nx-py-12 { padding-top: var(--nx-space-12); padding-bottom: var(--nx-space-12); }
.nx-gap-12 { gap: var(--nx-space-12); }
.nx-m-16 { margin: var(--nx-space-16); }
.nx-mt-16 { margin-top: var(--nx-space-16); }
.nx-mr-16 { margin-right: var(--nx-space-16); }
.nx-mb-16 { margin-bottom: var(--nx-space-16); }
.nx-ml-16 { margin-left: var(--nx-space-16); }
.nx-mx-16 { margin-left: var(--nx-space-16); margin-right: var(--nx-space-16); }
.nx-my-16 { margin-top: var(--nx-space-16); margin-bottom: var(--nx-space-16); }
.nx-p-16 { padding: var(--nx-space-16); }
.nx-pt-16 { padding-top: var(--nx-space-16); }
.nx-pr-16 { padding-right: var(--nx-space-16); }
.nx-pb-16 { padding-bottom: var(--nx-space-16); }
.nx-pl-16 { padding-left: var(--nx-space-16); }
.nx-px-16 { padding-left: var(--nx-space-16); padding-right: var(--nx-space-16); }
.nx-py-16 { padding-top: var(--nx-space-16); padding-bottom: var(--nx-space-16); }
.nx-gap-16 { gap: var(--nx-space-16); }
.nx-m-20 { margin: var(--nx-space-20); }
.nx-mt-20 { margin-top: var(--nx-space-20); }
.nx-mr-20 { margin-right: var(--nx-space-20); }
.nx-mb-20 { margin-bottom: var(--nx-space-20); }
.nx-ml-20 { margin-left: var(--nx-space-20); }
.nx-mx-20 { margin-left: var(--nx-space-20); margin-right: var(--nx-space-20); }
.nx-my-20 { margin-top: var(--nx-space-20); margin-bottom: var(--nx-space-20); }
.nx-p-20 { padding: var(--nx-space-20); }
.nx-pt-20 { padding-top: var(--nx-space-20); }
.nx-pr-20 { padding-right: var(--nx-space-20); }
.nx-pb-20 { padding-bottom: var(--nx-space-20); }
.nx-pl-20 { padding-left: var(--nx-space-20); }
.nx-px-20 { padding-left: var(--nx-space-20); padding-right: var(--nx-space-20); }
.nx-py-20 { padding-top: var(--nx-space-20); padding-bottom: var(--nx-space-20); }
.nx-gap-20 { gap: var(--nx-space-20); }
.nx-m-24 { margin: var(--nx-space-24); }
.nx-mt-24 { margin-top: var(--nx-space-24); }
.nx-mr-24 { margin-right: var(--nx-space-24); }
.nx-mb-24 { margin-bottom: var(--nx-space-24); }
.nx-ml-24 { margin-left: var(--nx-space-24); }
.nx-mx-24 { margin-left: var(--nx-space-24); margin-right: var(--nx-space-24); }
.nx-my-24 { margin-top: var(--nx-space-24); margin-bottom: var(--nx-space-24); }
.nx-p-24 { padding: var(--nx-space-24); }
.nx-pt-24 { padding-top: var(--nx-space-24); }
.nx-pr-24 { padding-right: var(--nx-space-24); }
.nx-pb-24 { padding-bottom: var(--nx-space-24); }
.nx-pl-24 { padding-left: var(--nx-space-24); }
.nx-px-24 { padding-left: var(--nx-space-24); padding-right: var(--nx-space-24); }
.nx-py-24 { padding-top: var(--nx-space-24); padding-bottom: var(--nx-space-24); }
.nx-gap-24 { gap: var(--nx-space-24); }
.nx-m-32 { margin: var(--nx-space-32); }
.nx-mt-32 { margin-top: var(--nx-space-32); }
.nx-mr-32 { margin-right: var(--nx-space-32); }
.nx-mb-32 { margin-bottom: var(--nx-space-32); }
.nx-ml-32 { margin-left: var(--nx-space-32); }
.nx-mx-32 { margin-left: var(--nx-space-32); margin-right: var(--nx-space-32); }
.nx-my-32 { margin-top: var(--nx-space-32); margin-bottom: var(--nx-space-32); }
.nx-p-32 { padding: var(--nx-space-32); }
.nx-pt-32 { padding-top: var(--nx-space-32); }
.nx-pr-32 { padding-right: var(--nx-space-32); }
.nx-pb-32 { padding-bottom: var(--nx-space-32); }
.nx-pl-32 { padding-left: var(--nx-space-32); }
.nx-px-32 { padding-left: var(--nx-space-32); padding-right: var(--nx-space-32); }
.nx-py-32 { padding-top: var(--nx-space-32); padding-bottom: var(--nx-space-32); }
.nx-gap-32 { gap: var(--nx-space-32); }

/* --------------------------------------------------------------------------
   7. Flex & Grid Utilities
   -------------------------------------------------------------------------- */
.nx-flex-row { flex-direction: row; }
.nx-flex-col { flex-direction: column; }
.nx-flex-row-reverse { flex-direction: row-reverse; }
.nx-flex-col-reverse { flex-direction: column-reverse; }
.nx-items-start { align-items: flex-start; }
.nx-justify-start { justify-content: flex-start; }
.nx-items-end { align-items: flex-end; }
.nx-justify-end { justify-content: flex-end; }
.nx-items-center { align-items: center; }
.nx-justify-center { justify-content: center; }
.nx-items-between { align-items: space-between; }
.nx-justify-between { justify-content: space-between; }
.nx-items-around { align-items: space-around; }
.nx-justify-around { justify-content: space-around; }
.nx-items-evenly { align-items: space-evenly; }
.nx-justify-evenly { justify-content: space-evenly; }
.nx-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.nx-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nx-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nx-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nx-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.nx-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.nx-grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.nx-grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.nx-grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.nx-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.nx-grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.nx-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.nx-col-span-1 { grid-column: span 1 / span 1; }
.nx-col-span-2 { grid-column: span 2 / span 2; }
.nx-col-span-3 { grid-column: span 3 / span 3; }
.nx-col-span-4 { grid-column: span 4 / span 4; }
.nx-col-span-5 { grid-column: span 5 / span 5; }
.nx-col-span-full { grid-column: 1 / -1; }
.nx-flex { display: flex; }
.nx-inline-flex { display: inline-flex; }
.nx-grid { display: grid; }
.nx-flex-1 { flex: 1 1 0%; }
.nx-flex-auto { flex: 1 1 auto; }
.nx-flex-none { flex: none; }
.nx-flex-wrap { flex-wrap: wrap; }
.nx-flex-nowrap { flex-wrap: nowrap; }
.nx-self-start { align-self: flex-start; }
.nx-self-center { align-self: center; }
.nx-self-end { align-self: flex-end; }
.nx-self-stretch { align-self: stretch; }
.nx-w-full { width: 100%; }
.nx-h-full { height: 100%; }
.nx-min-h-screen { min-height: 100vh; }
.nx-overflow-hidden { overflow: hidden; }
.nx-overflow-auto { overflow: auto; }
.nx-overflow-x-auto { overflow-x: auto; }
.nx-overflow-y-auto { overflow-y: auto; }
.nx-relative { position: relative; }
.nx-absolute { position: absolute; }
.nx-fixed { position: fixed; }
.nx-sticky { position: sticky; }
.nx-inset-0 { inset: 0; }
.nx-hidden { display: none; }
.nx-block { display: block; }
.nx-inline-block { display: inline-block; }

/* --------------------------------------------------------------------------
   8. Typography Utilities
   -------------------------------------------------------------------------- */
.nx-text-xs { font-size: var(--nx-font-size-xs); }
.nx-text-sm { font-size: var(--nx-font-size-sm); }
.nx-text-base { font-size: var(--nx-font-size-base); }
.nx-text-lg { font-size: var(--nx-font-size-lg); }
.nx-text-xl { font-size: var(--nx-font-size-xl); }
.nx-text-2xl { font-size: var(--nx-font-size-2xl); }
.nx-text-3xl { font-size: var(--nx-font-size-3xl); }
.nx-text-4xl { font-size: var(--nx-font-size-4xl); }
.nx-text-5xl { font-size: var(--nx-font-size-5xl); }
.nx-font-light { font-weight: 300; }
.nx-font-normal { font-weight: 400; }
.nx-font-medium { font-weight: 500; }
.nx-font-semibold { font-weight: 600; }
.nx-font-bold { font-weight: 700; }
.nx-font-extrabold { font-weight: 800; }
.nx-text-primary { color: var(--nx-text-primary); }
.nx-text-secondary { color: var(--nx-text-secondary); }
.nx-text-tertiary { color: var(--nx-text-tertiary); }
.nx-text-accent { color: var(--nx-text-accent); }
.nx-text-inverse { color: var(--nx-text-inverse); }
.nx-text-success { color: var(--nx-status-success); }
.nx-text-warning { color: var(--nx-status-warning); }
.nx-text-error { color: var(--nx-status-error); }
.nx-text-info { color: var(--nx-status-info); }
.nx-text-center { text-align: center; }
.nx-text-left { text-align: left; }
.nx-text-right { text-align: right; }
.nx-text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-text-nowrap { white-space: nowrap; }
.nx-leading-tight { line-height: var(--nx-line-height-tight); }
.nx-leading-normal { line-height: var(--nx-line-height-normal); }
.nx-leading-relaxed { line-height: var(--nx-line-height-relaxed); }
.nx-tracking-tight { letter-spacing: var(--nx-letter-spacing-tight); }
.nx-tracking-wide { letter-spacing: var(--nx-letter-spacing-wide); }
.nx-font-mono { font-family: var(--nx-font-family-mono); }
.nx-uppercase { text-transform: uppercase; }
.nx-capitalize { text-transform: capitalize; }

/* --------------------------------------------------------------------------
   9. Border & Shadow Utilities
   -------------------------------------------------------------------------- */
.nx-rounded-none { border-radius: var(--nx-radius-none); }
.nx-rounded-sm { border-radius: var(--nx-radius-sm); }
.nx-rounded-md { border-radius: var(--nx-radius-md); }
.nx-rounded-lg { border-radius: var(--nx-radius-lg); }
.nx-rounded-xl { border-radius: var(--nx-radius-xl); }
.nx-rounded-2xl { border-radius: var(--nx-radius-2xl); }
.nx-rounded-3xl { border-radius: var(--nx-radius-3xl); }
.nx-rounded-full { border-radius: var(--nx-radius-full); }
.nx-shadow-xs { box-shadow: var(--nx-shadow-xs); }
.nx-shadow-sm { box-shadow: var(--nx-shadow-sm); }
.nx-shadow-md { box-shadow: var(--nx-shadow-md); }
.nx-shadow-lg { box-shadow: var(--nx-shadow-lg); }
.nx-shadow-xl { box-shadow: var(--nx-shadow-xl); }
.nx-shadow-2xl { box-shadow: var(--nx-shadow-2xl); }
.nx-shadow-inner { box-shadow: var(--nx-shadow-inner); }
.nx-border { border: 1px solid var(--nx-border-primary); }
.nx-border-0 { border: none; }
.nx-border-t { border-top: 1px solid var(--nx-border-primary); }
.nx-border-b { border-bottom: 1px solid var(--nx-border-primary); }
.nx-border-l { border-left: 1px solid var(--nx-border-primary); }
.nx-border-r { border-right: 1px solid var(--nx-border-primary); }
.nx-border-subtle { border-color: var(--nx-border-subtle); }
.nx-border-accent { border-color: var(--nx-accent-primary); }
.nx-divide-y > * + * { border-top: 1px solid var(--nx-border-primary); }
.nx-ring-focus:focus { outline: none; box-shadow: 0 0 0 3px var(--nx-accent-primary-muted); }
.nx-ring-focus:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--nx-accent-primary-muted); }

/* --------------------------------------------------------------------------
   10. Buttons
   -------------------------------------------------------------------------- */
.nx-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--nx-space-2); padding: var(--nx-space-2) var(--nx-space-4); font-size: var(--nx-font-size-sm); font-weight: var(--nx-font-weight-medium); line-height: var(--nx-line-height-tight); border-radius: var(--nx-radius-lg); border: 1px solid transparent; cursor: pointer; transition: all var(--nx-transition-fast); white-space: nowrap; user-select: none; }
.nx-btn:disabled, .nx-btn.nx-btn-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.nx-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--nx-accent-primary-muted); }
.nx-btn-primary { background-color: var(--nx-accent-primary); color: #FFFFFF; border-color: var(--nx-accent-primary); }
.nx-btn-primary:hover:not(:disabled) { background-color: var(--nx-accent-primary-hover); border-color: var(--nx-accent-primary-hover); }
.nx-btn-primary:active:not(:disabled) { background-color: var(--nx-accent-primary-active); border-color: var(--nx-accent-primary-active); }
.nx-btn-secondary { background-color: var(--nx-bg-tertiary); color: var(--nx-text-primary); border-color: var(--nx-border-primary); }
.nx-btn-secondary:hover:not(:disabled) { background-color: var(--nx-border-primary); }
.nx-btn-outline { background-color: transparent; color: var(--nx-accent-primary); border-color: var(--nx-accent-primary); }
.nx-btn-outline:hover:not(:disabled) { background-color: var(--nx-accent-primary-subtle); }
.nx-btn-ghost { background-color: transparent; color: var(--nx-text-secondary); border-color: transparent; }
.nx-btn-ghost:hover:not(:disabled) { background-color: var(--nx-bg-tertiary); color: var(--nx-text-primary); }
.nx-btn-danger { background-color: var(--nx-status-error); color: #FFFFFF; border-color: var(--nx-status-error); }
.nx-btn-danger:hover:not(:disabled) { filter: brightness(0.9); }
.nx-btn-success { background-color: var(--nx-status-success); color: #FFFFFF; border-color: var(--nx-status-success); }
.nx-btn-link { background: none; border: none; color: var(--nx-text-link); padding: 0; }
.nx-btn-link:hover:not(:disabled) { color: var(--nx-text-link-hover); text-decoration: underline; }
.nx-btn-xs { padding: var(--nx-space-1) var(--nx-space-2); font-size: var(--nx-font-size-xs); border-radius: var(--nx-radius-md); }
.nx-btn-sm { padding: var(--nx-space-1) var(--nx-space-3); font-size: var(--nx-font-size-xs); }
.nx-btn-lg { padding: var(--nx-space-3) var(--nx-space-6); font-size: var(--nx-font-size-base); }
.nx-btn-xl { padding: var(--nx-space-4) var(--nx-space-8); font-size: var(--nx-font-size-lg); }
.nx-btn-icon { padding: var(--nx-space-2); aspect-ratio: 1; }
.nx-btn-icon.nx-btn-sm { padding: var(--nx-space-1); }
.nx-btn-icon.nx-btn-lg { padding: var(--nx-space-3); }
.nx-btn-block { display: flex; width: 100%; }
.nx-btn-group { display: inline-flex; }
.nx-btn-group .nx-btn { border-radius: 0; }
.nx-btn-group .nx-btn:first-child { border-radius: var(--nx-radius-lg) 0 0 var(--nx-radius-lg); }
.nx-btn-group .nx-btn:last-child { border-radius: 0 var(--nx-radius-lg) var(--nx-radius-lg) 0; }
.nx-btn-group .nx-btn + .nx-btn { margin-left: -1px; }
.nx-btn-loading { position: relative; color: transparent !important; pointer-events: none; }
.nx-btn-loading::after { content: ''; position: absolute; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: nx-spin 0.6s linear infinite; color: inherit; }
.nx-btn-primary.nx-btn-loading::after { color: #FFFFFF; }

/* --------------------------------------------------------------------------
   11. Form Inputs
   -------------------------------------------------------------------------- */
.nx-input-group { display: flex; flex-direction: column; gap: var(--nx-space-1); }
.nx-label { font-size: var(--nx-font-size-sm); font-weight: var(--nx-font-weight-medium); color: var(--nx-text-primary); }
.nx-label-required::after { content: ' *'; color: var(--nx-status-error); }
.nx-input, .nx-textarea, .nx-select { width: 100%; padding: var(--nx-space-2) var(--nx-space-3); font-size: var(--nx-font-size-sm); color: var(--nx-text-primary); background-color: var(--nx-bg-primary); border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-lg); transition: border-color var(--nx-transition-fast), box-shadow var(--nx-transition-fast); }
.nx-input:hover, .nx-textarea:hover, .nx-select:hover { border-color: var(--nx-border-secondary); }
.nx-input:focus, .nx-textarea:focus, .nx-select:focus { outline: none; border-color: var(--nx-border-focus); box-shadow: 0 0 0 3px var(--nx-accent-primary-muted); }
.nx-input::placeholder, .nx-textarea::placeholder { color: var(--nx-text-tertiary); }
.nx-input:disabled, .nx-textarea:disabled, .nx-select:disabled { opacity: 0.5; cursor: not-allowed; background-color: var(--nx-bg-tertiary); }
.nx-input-error, .nx-textarea.nx-input-error { border-color: var(--nx-status-error); }
.nx-input-error:focus { box-shadow: 0 0 0 3px rgba(220,38,38,0.2); }
.nx-input-success { border-color: var(--nx-status-success); }
.nx-textarea { min-height: 100px; resize: vertical; line-height: var(--nx-line-height-relaxed); }
.nx-input-sm { padding: var(--nx-space-1) var(--nx-space-2); font-size: var(--nx-font-size-xs); }
.nx-input-lg { padding: var(--nx-space-3) var(--nx-space-4); font-size: var(--nx-font-size-base); }
.nx-input-hint { font-size: var(--nx-font-size-xs); color: var(--nx-text-tertiary); }
.nx-input-error-msg { font-size: var(--nx-font-size-xs); color: var(--nx-status-error); }
.nx-input-wrapper { position: relative; display: flex; align-items: center; }
.nx-input-icon { position: absolute; left: var(--nx-space-3); color: var(--nx-text-tertiary); pointer-events: none; }
.nx-input-wrapper .nx-input { padding-left: var(--nx-space-10); }
.nx-input-wrapper .nx-input-icon-right { left: auto; right: var(--nx-space-3); }
.nx-input-wrapper .nx-input-has-icon-right { padding-right: var(--nx-space-10); }
.nx-checkbox, .nx-radio { display: inline-flex; align-items: center; gap: var(--nx-space-2); cursor: pointer; font-size: var(--nx-font-size-sm); color: var(--nx-text-primary); }
.nx-checkbox input, .nx-radio input { width: 1rem; height: 1rem; accent-color: var(--nx-accent-primary); cursor: pointer; }
.nx-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.nx-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.nx-switch-track { width: 2.5rem; height: 1.375rem; background: var(--nx-border-secondary); border-radius: var(--nx-radius-full); transition: background var(--nx-transition-fast); }
.nx-switch-thumb { position: absolute; left: 2px; top: 2px; width: 1.125rem; height: 1.125rem; background: #FFFFFF; border-radius: 50%; transition: transform var(--nx-transition-fast); box-shadow: var(--nx-shadow-sm); }
.nx-switch input:checked + .nx-switch-track { background: var(--nx-accent-primary); }
.nx-switch input:checked ~ .nx-switch-thumb { transform: translateX(1.125rem); }
.nx-switch input:focus-visible + .nx-switch-track { box-shadow: 0 0 0 3px var(--nx-accent-primary-muted); }
.nx-form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--nx-space-4); }
.nx-search-input { padding-left: var(--nx-space-10); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394A3B8' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.857 1.106a5.5 5.5 0 1 1 0-11 5.5 5.5 0 0 1 0 11z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: var(--nx-space-3) center; }

/* --------------------------------------------------------------------------
   12. Cards
   -------------------------------------------------------------------------- */
.nx-card { background: var(--nx-bg-elevated); border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-xl); box-shadow: var(--nx-shadow-sm); overflow: hidden; transition: box-shadow var(--nx-transition-base), border-color var(--nx-transition-base); }
.nx-card:hover { box-shadow: var(--nx-shadow-md); }
.nx-card-interactive { cursor: pointer; }
.nx-card-interactive:hover { border-color: var(--nx-accent-primary-muted); box-shadow: var(--nx-shadow-lg); transform: translateY(-1px); }
.nx-card-header { display: flex; align-items: center; justify-content: space-between; padding: var(--nx-space-4) var(--nx-space-6); border-bottom: 1px solid var(--nx-border-primary); }
.nx-card-title { font-size: var(--nx-font-size-base); font-weight: var(--nx-font-weight-semibold); color: var(--nx-text-primary); }
.nx-card-subtitle { font-size: var(--nx-font-size-xs); color: var(--nx-text-tertiary); margin-top: var(--nx-space-1); }
.nx-card-body { padding: var(--nx-space-6); }
.nx-card-body-compact { padding: var(--nx-space-4); }
.nx-card-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--nx-space-2); padding: var(--nx-space-4) var(--nx-space-6); border-top: 1px solid var(--nx-border-primary); background: var(--nx-bg-secondary); }
.nx-card-accent { border-top: 3px solid var(--nx-accent-primary); }
.nx-card-flat { box-shadow: none; }
.nx-card-elevated { box-shadow: var(--nx-shadow-lg); border: none; }
.nx-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--nx-space-4); }
.nx-stat-card { padding: var(--nx-space-6); }
.nx-stat-card-value { font-size: var(--nx-font-size-3xl); font-weight: var(--nx-font-weight-bold); color: var(--nx-text-primary); line-height: 1; }
.nx-stat-card-label { font-size: var(--nx-font-size-sm); color: var(--nx-text-secondary); margin-top: var(--nx-space-2); }
.nx-stat-card-change { display: inline-flex; align-items: center; gap: var(--nx-space-1); font-size: var(--nx-font-size-xs); font-weight: var(--nx-font-weight-medium); margin-top: var(--nx-space-2); }
.nx-stat-card-change-up { color: var(--nx-status-success); }
.nx-stat-card-change-down { color: var(--nx-status-error); }

/* --------------------------------------------------------------------------
   13. Badges & Tags
   -------------------------------------------------------------------------- */
.nx-badge { display: inline-flex; align-items: center; gap: var(--nx-space-1); padding: var(--nx-space-1) var(--nx-space-2); font-size: var(--nx-font-size-xs); font-weight: var(--nx-font-weight-medium); line-height: 1; border-radius: var(--nx-radius-full); white-space: nowrap; }
.nx-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.nx-badge-sm { padding: 2px var(--nx-space-1); font-size: 0.625rem; }
.nx-badge-lg { padding: var(--nx-space-1) var(--nx-space-3); font-size: var(--nx-font-size-sm); }
.nx-badge-outline { background: transparent; border: 1px solid currentColor; }
.nx-tag { display: inline-flex; align-items: center; gap: var(--nx-space-1); padding: var(--nx-space-1) var(--nx-space-2); font-size: var(--nx-font-size-xs); background: var(--nx-bg-tertiary); color: var(--nx-text-secondary); border-radius: var(--nx-radius-md); }
.nx-tag-removable { padding-right: var(--nx-space-1); }
.nx-tag-remove { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; border: none; background: transparent; color: var(--nx-text-tertiary); cursor: pointer; border-radius: var(--nx-radius-sm); }
.nx-tag-remove:hover { background: var(--nx-border-primary); color: var(--nx-text-primary); }
.nx-priority-high { background: var(--nx-status-error-bg); color: var(--nx-status-error); }
.nx-priority-medium { background: var(--nx-status-warning-bg); color: var(--nx-status-warning); }
.nx-priority-low { background: var(--nx-status-info-bg); color: var(--nx-status-info); }
.nx-priority-none { background: var(--nx-bg-tertiary); color: var(--nx-text-tertiary); }

.nx-badge-default { background: var(--nx-bg-tertiary); color: var(--nx-text-secondary); }
.nx-badge-primary { background: var(--nx-accent-primary-subtle); color: var(--nx-accent-primary); }
.nx-badge-success { background: var(--nx-status-success-bg); color: var(--nx-status-success); }
.nx-badge-warning { background: var(--nx-status-warning-bg); color: var(--nx-status-warning); }
.nx-badge-error { background: var(--nx-status-error-bg); color: var(--nx-status-error); }
.nx-badge-info { background: var(--nx-status-info-bg); color: var(--nx-status-info); }

/* --------------------------------------------------------------------------
   14. Avatars
   -------------------------------------------------------------------------- */
.nx-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--nx-radius-full); background: var(--nx-accent-primary-subtle); color: var(--nx-accent-primary); font-weight: var(--nx-font-weight-semibold); overflow: hidden; flex-shrink: 0; }
.nx-avatar img { width: 100%; height: 100%; object-fit: cover; }
.nx-avatar-ring { box-shadow: 0 0 0 2px var(--nx-bg-primary), 0 0 0 4px var(--nx-accent-primary); }
.nx-avatar-online { position: relative; }
.nx-avatar-online::after { content: ''; position: absolute; bottom: 0; right: 0; width: 25%; height: 25%; min-width: 8px; min-height: 8px; background: var(--nx-status-success); border: 2px solid var(--nx-bg-primary); border-radius: 50%; }
.nx-avatar-group { display: flex; }
.nx-avatar-group .nx-avatar { margin-left: calc(var(--nx-space-2) * -1); border: 2px solid var(--nx-bg-primary); }
.nx-avatar-group .nx-avatar:first-child { margin-left: 0; }
.nx-avatar-group-count { display: inline-flex; align-items: center; justify-content: center; background: var(--nx-bg-tertiary); color: var(--nx-text-secondary); font-size: var(--nx-font-size-xs); margin-left: calc(var(--nx-space-2) * -1); border: 2px solid var(--nx-bg-primary); border-radius: var(--nx-radius-full); }

.nx-avatar-xs { width: 1.5rem; height: 1.5rem; font-size: 0.625rem; }
.nx-avatar-sm { width: 2rem; height: 2rem; font-size: 0.75rem; }
.nx-avatar-md { width: 2.5rem; height: 2.5rem; font-size: 0.875rem; }
.nx-avatar-lg { width: 3rem; height: 3rem; font-size: 1rem; }
.nx-avatar-xl { width: 4rem; height: 4rem; font-size: 1.25rem; }
.nx-avatar-2xl { width: 5rem; height: 5rem; font-size: 1.5rem; }

/* --------------------------------------------------------------------------
   15. Sidebar
   -------------------------------------------------------------------------- */
.nx-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--nx-sidebar-width); background: var(--nx-bg-elevated); border-right: 1px solid var(--nx-border-primary); display: flex; flex-direction: column; z-index: var(--nx-z-fixed); transition: width var(--nx-transition-slow), transform var(--nx-transition-slow); overflow: hidden; }
.nx-sidebar-collapsed { width: var(--nx-sidebar-collapsed-width); }
.nx-sidebar-header { display: flex; align-items: center; gap: var(--nx-space-3); padding: var(--nx-space-4) var(--nx-space-4); height: var(--nx-topbar-height); border-bottom: 1px solid var(--nx-border-primary); flex-shrink: 0; }
.nx-sidebar-logo { display: flex; align-items: center; gap: var(--nx-space-2); font-size: var(--nx-font-size-lg); font-weight: var(--nx-font-weight-bold); color: var(--nx-text-primary); white-space: nowrap; overflow: hidden; }
.nx-sidebar-logo-icon { width: 2rem; height: 2rem; background: linear-gradient(135deg, var(--nx-accent-primary), var(--nx-accent-secondary)); border-radius: var(--nx-radius-lg); display: flex; align-items: center; justify-content: center; color: #FFFFFF; flex-shrink: 0; }
.nx-sidebar-logo-text { transition: opacity var(--nx-transition-fast); }
.nx-sidebar-collapsed .nx-sidebar-logo-text { opacity: 0; width: 0; }
.nx-sidebar-nav { flex: 1; overflow-y: auto; padding: var(--nx-space-3) var(--nx-space-2); }
.nx-sidebar-section { margin-bottom: var(--nx-space-4); }
.nx-sidebar-section-title { padding: var(--nx-space-2) var(--nx-space-3); font-size: var(--nx-font-size-xs); font-weight: var(--nx-font-weight-semibold); color: var(--nx-text-tertiary); text-transform: uppercase; letter-spacing: var(--nx-letter-spacing-wider); white-space: nowrap; overflow: hidden; transition: opacity var(--nx-transition-fast); }
.nx-sidebar-collapsed .nx-sidebar-section-title { opacity: 0; height: 0; padding: 0; margin: 0; }
.nx-sidebar-item { display: flex; align-items: center; gap: var(--nx-space-3); padding: var(--nx-space-2) var(--nx-space-3); margin-bottom: var(--nx-space-1); border-radius: var(--nx-radius-lg); color: var(--nx-text-secondary); font-size: var(--nx-font-size-sm); font-weight: var(--nx-font-weight-medium); cursor: pointer; transition: all var(--nx-transition-fast); white-space: nowrap; text-decoration: none; }
.nx-sidebar-item:hover { background: var(--nx-bg-tertiary); color: var(--nx-text-primary); }
.nx-sidebar-item-active { background: var(--nx-accent-primary-subtle); color: var(--nx-accent-primary); }
.nx-sidebar-item-active:hover { background: var(--nx-accent-primary-muted); }
.nx-sidebar-item-icon-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.nx-sidebar-item-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.nx-sidebar-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; transition: opacity var(--nx-transition-fast); }
.nx-sidebar-item-badge { margin-left: auto; flex-shrink: 0; }
.nx-sidebar-collapsed .nx-sidebar-item { position: relative; justify-content: center; gap: 0; padding: var(--nx-space-2); }
.nx-sidebar-collapsed .nx-sidebar-item-label { display: none; }
.nx-sidebar-collapsed .nx-sidebar-item-badge {
  position: absolute;
  top: 2px;
  left: calc(50% + 2px);
  margin-left: 0;
  min-width: 1rem;
  height: 1rem;
  padding: 0 3px;
  font-size: 0.5625rem;
  font-weight: var(--nx-font-weight-bold);
  line-height: 1rem;
  border-radius: var(--nx-radius-full);
  box-shadow: 0 0 0 2px var(--nx-bg-elevated);
  pointer-events: none;
}
.nx-sidebar-footer { padding: var(--nx-space-3) var(--nx-space-4); border-top: 1px solid var(--nx-border-primary); flex-shrink: 0; }
.nx-sidebar-toggle { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: none; background: transparent; color: var(--nx-text-tertiary); cursor: pointer; border-radius: var(--nx-radius-md); transition: all var(--nx-transition-fast); }
.nx-sidebar-toggle:hover { background: var(--nx-bg-tertiary); color: var(--nx-text-primary); }
.nx-sidebar-overlay { display: none; position: fixed; inset: 0; background: var(--nx-bg-overlay); z-index: calc(var(--nx-z-fixed) - 1); opacity: 0; transition: opacity var(--nx-transition-base); }
.nx-sidebar-overlay-visible { display: block; opacity: 1; }
.nx-main-with-sidebar { margin-left: var(--nx-sidebar-width); transition: margin-left var(--nx-transition-slow); }
.nx-main-sidebar-collapsed { margin-left: var(--nx-sidebar-collapsed-width); }

/* --------------------------------------------------------------------------
   16. Topbar
   -------------------------------------------------------------------------- */
.nx-topbar { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; height: var(--nx-topbar-height); padding: 0 var(--nx-space-6); background: var(--nx-bg-elevated); border-bottom: 1px solid var(--nx-border-primary); z-index: var(--nx-z-sticky); backdrop-filter: blur(8px); }
.nx-topbar-left { display: flex; align-items: center; gap: var(--nx-space-4); }
.nx-topbar-right { display: flex; align-items: center; gap: var(--nx-space-3); }
.nx-topbar-breadcrumb { display: flex; align-items: center; gap: var(--nx-space-2); font-size: var(--nx-font-size-sm); color: var(--nx-text-tertiary); }
.nx-topbar-breadcrumb-item { color: var(--nx-text-tertiary); }
.nx-topbar-breadcrumb-item:hover { color: var(--nx-text-secondary); }
.nx-topbar-breadcrumb-separator { color: var(--nx-text-tertiary); }
.nx-topbar-breadcrumb-current { color: var(--nx-text-primary); font-weight: var(--nx-font-weight-medium); }
.nx-topbar-search { position: relative; width: 280px; cursor: pointer; }
.nx-topbar-search .nx-input { width: 100%; background: var(--nx-bg-secondary); border-color: transparent; cursor: pointer; pointer-events: none; padding-right: var(--nx-space-10); }
.nx-topbar-search:hover .nx-input { background: var(--nx-bg-tertiary); border-color: var(--nx-border-primary); }
.nx-topbar-search:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--nx-accent-primary-muted); border-radius: var(--nx-radius-lg); }
.nx-topbar-search-kbd { position: absolute; right: var(--nx-space-3); top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; padding: 2px var(--nx-space-1); font-size: 0.625rem; font-family: var(--nx-font-family-mono); color: var(--nx-text-tertiary); background: var(--nx-bg-tertiary); border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-sm); pointer-events: none; }
.nx-topbar-action { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: none; background: transparent; color: var(--nx-text-secondary); cursor: pointer; border-radius: var(--nx-radius-lg); transition: background var(--nx-transition-fast), color var(--nx-transition-fast), box-shadow var(--nx-transition-fast); position: relative; appearance: none; -webkit-appearance: none; font: inherit; }
.nx-topbar-action:hover { background: var(--nx-bg-tertiary); color: var(--nx-text-primary); }
.nx-topbar-action:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--nx-accent-primary-muted); }
.nx-topbar-action-badge { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; background: var(--nx-status-error); border-radius: 50%; border: 2px solid var(--nx-bg-elevated); }
.nx-topbar-divider { width: 1px; height: 1.5rem; background: var(--nx-border-primary); }
.nx-topbar-user {
  display: flex; align-items: center; gap: var(--nx-space-2);
  padding: var(--nx-space-1) var(--nx-space-2) var(--nx-space-1) var(--nx-space-1);
  border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-lg);
  background: var(--nx-bg-secondary); color: var(--nx-text-primary);
  cursor: pointer; transition: background var(--nx-transition-fast), border-color var(--nx-transition-fast), box-shadow var(--nx-transition-fast);
  appearance: none; -webkit-appearance: none; font: inherit; text-align: left;
}
.nx-topbar-user:hover { background: var(--nx-bg-tertiary); border-color: var(--nx-border-secondary); }
.nx-topbar-user:active { background: var(--nx-bg-tertiary); }
.nx-topbar-user:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--nx-accent-primary-muted); }
.nx-topbar-user .nx-avatar { border: 2px solid var(--nx-border-primary); background: var(--nx-bg-elevated); }
[data-theme="dark"] .nx-topbar-user { background: var(--nx-bg-tertiary); }
[data-theme="light"] .nx-topbar-user { background: var(--nx-bg-secondary); }
.nx-topbar-user-info { display: flex; flex-direction: column; min-width: 0; }
.nx-topbar-user-name { font-size: var(--nx-font-size-sm); font-weight: var(--nx-font-weight-medium); color: var(--nx-text-primary); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nx-topbar-user-role { font-size: var(--nx-font-size-xs); color: var(--nx-text-tertiary); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --------------------------------------------------------------------------
   17. Modals
   -------------------------------------------------------------------------- */
.nx-modal-backdrop { position: fixed; inset: 0; background: var(--nx-bg-overlay); z-index: var(--nx-z-modal-backdrop); display: flex; align-items: center; justify-content: center; padding: var(--nx-space-4); opacity: 0; visibility: hidden; transition: opacity var(--nx-transition-base), visibility var(--nx-transition-base); }
.nx-modal-backdrop-open { opacity: 1; visibility: visible; }
.nx-modal { position: relative; width: 100%; max-width: 32rem; max-height: calc(100vh - var(--nx-space-8)); background: var(--nx-bg-elevated); border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-2xl); box-shadow: var(--nx-shadow-2xl); display: flex; flex-direction: column; transform: scale(0.95) translateY(10px); opacity: 0; transition: transform var(--nx-transition-base), opacity var(--nx-transition-base); overflow: hidden; }
.nx-modal-backdrop-open .nx-modal { transform: scale(1) translateY(0); opacity: 1; }
.nx-modal-sm { max-width: 24rem; }
.nx-modal-lg { max-width: 48rem; }
.nx-modal-xl { max-width: 64rem; }
.nx-modal-full { max-width: calc(100vw - var(--nx-space-8)); max-height: calc(100vh - var(--nx-space-8)); }
.nx-modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--nx-space-5) var(--nx-space-6); border-bottom: 1px solid var(--nx-border-primary); flex-shrink: 0; }
.nx-modal-title { font-size: var(--nx-font-size-lg); font-weight: var(--nx-font-weight-semibold); color: var(--nx-text-primary); }
.nx-modal-close { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: none; background: transparent; color: var(--nx-text-tertiary); cursor: pointer; border-radius: var(--nx-radius-md); transition: all var(--nx-transition-fast); }
.nx-modal-close:hover { background: var(--nx-bg-tertiary); color: var(--nx-text-primary); }
.nx-modal-body { flex: 1; padding: var(--nx-space-6); overflow-y: auto; }
.nx-modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--nx-space-3); padding: var(--nx-space-4) var(--nx-space-6); border-top: 1px solid var(--nx-border-primary); background: var(--nx-bg-secondary); flex-shrink: 0; }
.nx-modal-footer-between { justify-content: space-between; }
.nx-confirm-modal-icon { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--nx-radius-full); margin: 0 auto var(--nx-space-4); }
.nx-confirm-modal-icon-danger { background: var(--nx-status-error-bg); color: var(--nx-status-error); }
.nx-confirm-modal-icon-warning { background: var(--nx-status-warning-bg); color: var(--nx-status-warning); }
.nx-confirm-modal-icon-success { background: var(--nx-status-success-bg); color: var(--nx-status-success); }
.nx-confirm-modal-text { text-align: center; }
.nx-confirm-modal-text .nx-modal-title { margin-bottom: var(--nx-space-2); }

/* --------------------------------------------------------------------------
   18. Drawers
   -------------------------------------------------------------------------- */
.nx-drawer-backdrop { position: fixed; inset: 0; background: var(--nx-bg-overlay); z-index: var(--nx-z-modal-backdrop); opacity: 0; visibility: hidden; transition: opacity var(--nx-transition-base), visibility var(--nx-transition-base); }
.nx-drawer-backdrop-open { opacity: 1; visibility: visible; }
.nx-drawer {
  position: fixed; top: 0; bottom: 0; width: 24rem; max-width: 90vw;
  background: var(--nx-bg-elevated); box-shadow: var(--nx-shadow-2xl);
  z-index: var(--nx-z-modal); display: flex; flex-direction: column;
  transition: transform var(--nx-transition-slow);
}
.nx-drawer-right { right: 0; left: auto; border-left: 1px solid var(--nx-border-primary); transform: translateX(100%); }
.nx-drawer-left { left: 0; right: auto; border-right: 1px solid var(--nx-border-primary); transform: translateX(-100%); }
.nx-drawer-backdrop-open .nx-drawer-right { transform: translateX(0); }
.nx-drawer-backdrop-open .nx-drawer-left { transform: translateX(0); }
.nx-drawer-lg { width: 36rem; }
.nx-drawer-xl { width: 48rem; }
.nx-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: var(--nx-space-5) var(--nx-space-6); border-bottom: 1px solid var(--nx-border-primary); flex-shrink: 0; background: var(--nx-bg-elevated); }
.nx-drawer-title { font-size: var(--nx-font-size-lg); font-weight: var(--nx-font-weight-semibold); color: var(--nx-text-primary); margin: 0; }
.nx-drawer-body { flex: 1; padding: var(--nx-space-6); overflow-y: auto; background: var(--nx-bg-elevated); color: var(--nx-text-primary); }
.nx-drawer-body-flush { padding: 0; }
.nx-drawer-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--nx-space-3); padding: var(--nx-space-4) var(--nx-space-6); border-top: 1px solid var(--nx-border-primary); flex-shrink: 0; background: var(--nx-bg-secondary); }

/* Notification drawer items */
.nx-notifications-list { display: flex; flex-direction: column; }
.nx-notification {
  display: flex; align-items: flex-start; gap: var(--nx-space-3); width: 100%;
  padding: var(--nx-space-4) var(--nx-space-5); border: none; border-bottom: 1px solid var(--nx-border-subtle);
  background: var(--nx-bg-elevated); color: var(--nx-text-primary); text-align: left; cursor: pointer;
  transition: background var(--nx-transition-fast); font: inherit; appearance: none; -webkit-appearance: none;
}
.nx-notification:last-child { border-bottom: none; }
.nx-notification:hover { background: var(--nx-bg-secondary); }
.nx-notification-unread { background: var(--nx-accent-primary-subtle); }
.nx-notification-unread:hover { background: var(--nx-accent-primary-muted); }
.nx-notification-icon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 2.25rem; height: 2.25rem; border-radius: var(--nx-radius-lg);
  background: var(--nx-bg-tertiary); color: var(--nx-text-secondary);
}
.nx-notification-icon-milestone { background: var(--nx-status-info-bg); color: var(--nx-status-info); }
.nx-notification-icon-deadline { background: var(--nx-status-warning-bg); color: var(--nx-status-warning); }
.nx-notification-icon-comment { background: var(--nx-status-success-bg); color: var(--nx-status-success); }
.nx-notification-icon-assignment { background: var(--nx-accent-primary-subtle); color: var(--nx-accent-primary); }
.nx-notification-icon-mention,
.nx-notification-icon-update { background: var(--nx-bg-tertiary); color: var(--nx-accent-primary); }
.nx-notification-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--nx-space-1); }
.nx-notification-title { font-size: var(--nx-font-size-sm); font-weight: var(--nx-font-weight-semibold); color: var(--nx-text-primary); line-height: var(--nx-line-height-snug); }
.nx-notification-body { font-size: var(--nx-font-size-sm); color: var(--nx-text-secondary); line-height: var(--nx-line-height-relaxed); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nx-notification-time { font-size: var(--nx-font-size-xs); color: var(--nx-text-tertiary); margin-top: var(--nx-space-1); }
.nx-notification-dot { flex-shrink: 0; width: 8px; height: 8px; margin-top: var(--nx-space-2); border-radius: 50%; background: var(--nx-accent-primary); }
.nx-notifications-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--nx-space-12) var(--nx-space-6); color: var(--nx-text-secondary); gap: var(--nx-space-2); }
.nx-notifications-empty-icon { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--nx-radius-full); background: var(--nx-bg-tertiary); color: var(--nx-text-tertiary); margin-bottom: var(--nx-space-2); }
.nx-notifications-empty p { font-size: var(--nx-font-size-base); font-weight: var(--nx-font-weight-medium); color: var(--nx-text-primary); margin: 0; }

#nexora-drawer-root,
#nexora-modal-root,
#nexora-toast-root { font-family: var(--nx-font-family); color: var(--nx-text-primary); }

/* --------------------------------------------------------------------------
   19. Toasts
   -------------------------------------------------------------------------- */
.nx-toast-container { position: fixed; bottom: var(--nx-space-6); right: var(--nx-space-6); z-index: var(--nx-z-toast); display: flex; flex-direction: column; gap: var(--nx-space-3); max-width: 24rem; pointer-events: none; }
.nx-toast-container-top { bottom: auto; top: var(--nx-space-6); }
.nx-toast { display: flex; align-items: flex-start; gap: var(--nx-space-3); padding: var(--nx-space-4); background: var(--nx-bg-elevated); border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-xl); box-shadow: var(--nx-shadow-lg); pointer-events: auto; animation: nx-toast-in var(--nx-transition-base) ease-out; }
.nx-toast-exiting { animation: nx-toast-out var(--nx-transition-base) ease-in forwards; }
.nx-toast-icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-top: 2px; }
.nx-toast-content { flex: 1; min-width: 0; }
.nx-toast-title { font-size: var(--nx-font-size-sm); font-weight: var(--nx-font-weight-semibold); color: var(--nx-text-primary); }
.nx-toast-message { font-size: var(--nx-font-size-sm); color: var(--nx-text-secondary); margin-top: var(--nx-space-1); }
.nx-toast-close { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border: none; background: transparent; color: var(--nx-text-tertiary); cursor: pointer; border-radius: var(--nx-radius-sm); }
.nx-toast-close:hover { background: var(--nx-bg-tertiary); color: var(--nx-text-primary); }
.nx-toast-actions { display: flex; gap: var(--nx-space-2); margin-top: var(--nx-space-3); }

.nx-toast-success { border-left: 3px solid var(--nx-status-success); }
.nx-toast-success .nx-toast-icon { color: var(--nx-status-success); }
.nx-toast-warning { border-left: 3px solid var(--nx-status-warning); }
.nx-toast-warning .nx-toast-icon { color: var(--nx-status-warning); }
.nx-toast-error { border-left: 3px solid var(--nx-status-error); }
.nx-toast-error .nx-toast-icon { color: var(--nx-status-error); }
.nx-toast-info { border-left: 3px solid var(--nx-status-info); }
.nx-toast-info .nx-toast-icon { color: var(--nx-status-info); }

/* --------------------------------------------------------------------------
   20. Kanban Board
   -------------------------------------------------------------------------- */
.nx-kanban { display: flex; gap: var(--nx-space-4); overflow-x: auto; padding-bottom: var(--nx-space-4); min-height: calc(100vh - var(--nx-topbar-height) - var(--nx-space-12)); }
.nx-kanban-column { flex: 0 0 320px; display: flex; flex-direction: column; background: var(--nx-bg-secondary); border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-xl); max-height: 100%; }
.nx-kanban-column-header { display: flex; align-items: center; justify-content: space-between; padding: var(--nx-space-3) var(--nx-space-4); border-bottom: 1px solid var(--nx-border-primary); flex-shrink: 0; }
.nx-kanban-column-title { display: flex; align-items: center; gap: var(--nx-space-2); font-size: var(--nx-font-size-sm); font-weight: var(--nx-font-weight-semibold); color: var(--nx-text-primary); }
.nx-kanban-column-dot { width: 8px; height: 8px; border-radius: 50%; }
.nx-kanban-column-count { font-size: var(--nx-font-size-xs); color: var(--nx-text-tertiary); background: var(--nx-bg-tertiary); padding: 2px var(--nx-space-2); border-radius: var(--nx-radius-full); }
.nx-kanban-column-actions { display: flex; gap: var(--nx-space-1); }
.nx-kanban-column-body { flex: 1; overflow-y: auto; padding: var(--nx-space-3); display: flex; flex-direction: column; gap: var(--nx-space-3); min-height: 100px; }
.nx-kanban-column-body-drag-over { background: var(--nx-accent-primary-subtle); border-radius: 0 0 var(--nx-radius-xl) var(--nx-radius-xl); }
.nx-kanban-add-column { flex: 0 0 280px; display: flex; align-items: center; justify-content: center; min-height: 48px; border: 2px dashed var(--nx-border-secondary); border-radius: var(--nx-radius-xl); color: var(--nx-text-tertiary); cursor: pointer; transition: all var(--nx-transition-fast); background: transparent; font-size: var(--nx-font-size-sm); }
.nx-kanban-add-column:hover { border-color: var(--nx-accent-primary); color: var(--nx-accent-primary); background: var(--nx-accent-primary-subtle); }
.nx-kanban-column-todo .nx-kanban-column-dot { background: var(--nx-text-tertiary); }
.nx-kanban-column-progress .nx-kanban-column-dot { background: var(--nx-accent-primary); }
.nx-kanban-column-review .nx-kanban-column-dot { background: var(--nx-status-warning); }
.nx-kanban-column-done .nx-kanban-column-dot { background: var(--nx-status-success); }

/* --------------------------------------------------------------------------
   21. Task Cards
   -------------------------------------------------------------------------- */
.nx-task-card { background: var(--nx-bg-elevated); border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-lg); padding: var(--nx-space-3); cursor: grab; transition: box-shadow var(--nx-transition-fast), transform var(--nx-transition-fast), border-color var(--nx-transition-fast); }
.nx-task-card:hover { box-shadow: var(--nx-shadow-md); border-color: var(--nx-border-secondary); }
.nx-task-card-dragging { opacity: 0.5; transform: rotate(2deg); box-shadow: var(--nx-shadow-xl); cursor: grabbing; animation: nx-kanban-drag 0.2s ease-out; }
.nx-task-card-ghost { opacity: 0.3; border: 2px dashed var(--nx-accent-primary); background: var(--nx-accent-primary-subtle); }
.nx-task-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--nx-space-2); margin-bottom: var(--nx-space-2); }
.nx-task-card-id { font-size: var(--nx-font-size-xs); font-family: var(--nx-font-family-mono); color: var(--nx-text-tertiary); }
.nx-task-card-title { font-size: var(--nx-font-size-sm); font-weight: var(--nx-font-weight-medium); color: var(--nx-text-primary); line-height: var(--nx-line-height-snug); margin-bottom: var(--nx-space-2); }
.nx-task-card-description { font-size: var(--nx-font-size-xs); color: var(--nx-text-secondary); line-height: var(--nx-line-height-relaxed); margin-bottom: var(--nx-space-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nx-task-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--nx-space-2); }
.nx-task-card-labels { display: flex; flex-wrap: wrap; gap: var(--nx-space-1); margin-bottom: var(--nx-space-2); }
.nx-task-card-label { display: inline-block; width: 2.5rem; height: 4px; border-radius: var(--nx-radius-full); }
.nx-task-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: var(--nx-space-3); padding-top: var(--nx-space-2); border-top: 1px solid var(--nx-border-subtle); }
.nx-task-card-due { display: flex; align-items: center; gap: var(--nx-space-1); font-size: var(--nx-font-size-xs); color: var(--nx-text-tertiary); }
.nx-task-card-due-overdue { color: var(--nx-status-error); }
.nx-task-card-due-soon { color: var(--nx-status-warning); }
.nx-task-card-progress { height: 3px; background: var(--nx-bg-tertiary); border-radius: var(--nx-radius-full); margin-top: var(--nx-space-2); overflow: hidden; }
.nx-task-card-progress-bar { height: 100%; background: var(--nx-accent-primary); border-radius: var(--nx-radius-full); transition: width var(--nx-transition-slow); }
.nx-task-card-ai { display: inline-flex; align-items: center; gap: var(--nx-space-1); font-size: var(--nx-font-size-xs); color: var(--nx-accent-primary); background: var(--nx-accent-primary-subtle); padding: 2px var(--nx-space-2); border-radius: var(--nx-radius-full); }
.nx-task-card-completed .nx-task-card-title { text-decoration: line-through; color: var(--nx-text-tertiary); }
.nx-task-card-compact { padding: var(--nx-space-2); }
.nx-task-card-compact .nx-task-card-title { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   22. Chart Placeholders
   -------------------------------------------------------------------------- */
.nx-chart { background: var(--nx-bg-elevated); border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-xl); padding: var(--nx-space-6); }
.nx-chart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--nx-space-4); }
.nx-chart-title { font-size: var(--nx-font-size-base); font-weight: var(--nx-font-weight-semibold); color: var(--nx-text-primary); }
.nx-chart-subtitle { font-size: var(--nx-font-size-xs); color: var(--nx-text-tertiary); margin-top: var(--nx-space-1); }
.nx-chart-body { position: relative; min-height: 200px; }
.nx-chart-placeholder { display: flex; align-items: flex-end; justify-content: space-around; height: 200px; padding: var(--nx-space-4) 0; gap: var(--nx-space-2); }
.nx-chart-bar { flex: 1; background: linear-gradient(to top, var(--nx-accent-primary), var(--nx-accent-secondary)); border-radius: var(--nx-radius-sm) var(--nx-radius-sm) 0 0; opacity: 0.8; transition: opacity var(--nx-transition-fast); min-width: 8px; }
.nx-chart-bar:hover { opacity: 1; }
.nx-chart-line { position: absolute; inset: var(--nx-space-4); }
.nx-chart-line-path { fill: none; stroke: var(--nx-accent-primary); stroke-width: 2; }
.nx-chart-line-area { fill: url(#nx-chart-gradient); opacity: 0.2; }
.nx-chart-pie { width: 160px; height: 160px; border-radius: 50%; margin: 0 auto; background: conic-gradient(var(--nx-accent-primary) 0% 35%, var(--nx-accent-secondary) 35% 60%, var(--nx-status-success) 60% 80%, var(--nx-status-warning) 80% 100%); position: relative; }
.nx-chart-pie-center { position: absolute; inset: 30%; background: var(--nx-bg-elevated); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-direction: column; }
.nx-chart-pie-value { font-size: var(--nx-font-size-xl); font-weight: var(--nx-font-weight-bold); color: var(--nx-text-primary); }
.nx-chart-pie-label { font-size: var(--nx-font-size-xs); color: var(--nx-text-tertiary); }
.nx-chart-legend { display: flex; flex-wrap: wrap; gap: var(--nx-space-4); margin-top: var(--nx-space-4); justify-content: center; }
.nx-chart-legend-item { display: flex; align-items: center; gap: var(--nx-space-2); font-size: var(--nx-font-size-xs); color: var(--nx-text-secondary); }
.nx-chart-legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.nx-chart-sparkline { display: flex; align-items: flex-end; gap: 2px; height: 32px; }
.nx-chart-sparkline-bar { flex: 1; background: var(--nx-accent-primary); border-radius: 1px; opacity: 0.6; min-width: 3px; }
.nx-chart-loading { display: flex; align-items: center; justify-content: center; height: 200px; color: var(--nx-text-tertiary); }
.nx-chart-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--nx-space-4); }
.nx-chart-grid-3 { grid-template-columns: repeat(3, 1fr); }

.nx-chart-bar:nth-child(1) { height: 40%; }
.nx-chart-bar:nth-child(2) { height: 65%; }
.nx-chart-bar:nth-child(3) { height: 45%; }
.nx-chart-bar:nth-child(4) { height: 80%; }
.nx-chart-bar:nth-child(5) { height: 55%; }
.nx-chart-bar:nth-child(6) { height: 70%; }
.nx-chart-bar:nth-child(7) { height: 50%; }
.nx-chart-bar:nth-child(8) { height: 90%; }
.nx-chart-bar:nth-child(9) { height: 60%; }
.nx-chart-bar:nth-child(10) { height: 75%; }

/* --------------------------------------------------------------------------
   23. Data Tables
   -------------------------------------------------------------------------- */
.nx-table-wrapper { overflow-x: auto; border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-xl); background: var(--nx-bg-elevated); }
.nx-table { width: 100%; border-collapse: collapse; font-size: var(--nx-font-size-sm); }
.nx-table thead { background: var(--nx-bg-secondary); }
.nx-table th { padding: var(--nx-space-3) var(--nx-space-4); text-align: left; font-weight: var(--nx-font-weight-semibold); color: var(--nx-text-secondary); font-size: var(--nx-font-size-xs); text-transform: uppercase; letter-spacing: var(--nx-letter-spacing-wide); border-bottom: 1px solid var(--nx-border-primary); white-space: nowrap; }
.nx-table th.nx-table-sortable { cursor: pointer; user-select: none; }
.nx-table th.nx-table-sortable:hover { color: var(--nx-text-primary); }
.nx-table-sort-icon { display: inline-block; margin-left: var(--nx-space-1); opacity: 0.4; }
.nx-table th.nx-table-sorted .nx-table-sort-icon { opacity: 1; color: var(--nx-accent-primary); }
.nx-table td { padding: var(--nx-space-3) var(--nx-space-4); color: var(--nx-text-primary); border-bottom: 1px solid var(--nx-border-subtle); vertical-align: middle; }
.nx-table tbody tr { transition: background var(--nx-transition-fast); }
.nx-table tbody tr:hover { background: var(--nx-bg-secondary); }
.nx-table tbody tr:last-child td { border-bottom: none; }
.nx-table-row-selected { background: var(--nx-accent-primary-subtle) !important; }
.nx-table-checkbox { width: 1rem; height: 1rem; accent-color: var(--nx-accent-primary); }
.nx-table-actions { display: flex; gap: var(--nx-space-1); opacity: 0; transition: opacity var(--nx-transition-fast); }
.nx-table tbody tr:hover .nx-table-actions { opacity: 1; }
.nx-table-empty { padding: var(--nx-space-12); text-align: center; color: var(--nx-text-tertiary); }
.nx-table-pagination { display: flex; align-items: center; justify-content: space-between; padding: var(--nx-space-3) var(--nx-space-4); border-top: 1px solid var(--nx-border-primary); background: var(--nx-bg-secondary); font-size: var(--nx-font-size-sm); color: var(--nx-text-secondary); }
.nx-table-pagination-info { font-size: var(--nx-font-size-xs); }
.nx-table-pagination-controls { display: flex; align-items: center; gap: var(--nx-space-1); }
.nx-table-pagination-btn { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: 1px solid var(--nx-border-primary); background: var(--nx-bg-elevated); border-radius: var(--nx-radius-md); cursor: pointer; color: var(--nx-text-secondary); transition: all var(--nx-transition-fast); }
.nx-table-pagination-btn:hover:not(:disabled) { background: var(--nx-bg-tertiary); color: var(--nx-text-primary); }
.nx-table-pagination-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.nx-table-pagination-btn-active { background: var(--nx-accent-primary); color: #FFFFFF; border-color: var(--nx-accent-primary); }
.nx-table-compact th, .nx-table-compact td { padding: var(--nx-space-2) var(--nx-space-3); }
.nx-table-striped tbody tr:nth-child(even) { background: var(--nx-bg-secondary); }
.nx-table-cell-numeric { text-align: right; font-family: var(--nx-font-family-mono); font-size: var(--nx-font-size-xs); }
.nx-table-cell-status { display: inline-flex; align-items: center; gap: var(--nx-space-2); }
.nx-table-toolbar { display: flex; align-items: center; justify-content: space-between; padding: var(--nx-space-3) var(--nx-space-4); border-bottom: 1px solid var(--nx-border-primary); gap: var(--nx-space-4); flex-wrap: wrap; }
.nx-table-toolbar-left { display: flex; align-items: center; gap: var(--nx-space-3); }
.nx-table-toolbar-right { display: flex; align-items: center; gap: var(--nx-space-2); }
.nx-table-filter { display: inline-flex; align-items: center; gap: var(--nx-space-2); padding: var(--nx-space-1) var(--nx-space-3); background: var(--nx-bg-secondary); border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-full); font-size: var(--nx-font-size-xs); color: var(--nx-text-secondary); cursor: pointer; }
.nx-table-filter-active { background: var(--nx-accent-primary-subtle); border-color: var(--nx-accent-primary); color: var(--nx-accent-primary); }

/* --------------------------------------------------------------------------
   24. Command Palette
   -------------------------------------------------------------------------- */
.nx-command-backdrop { position: fixed; inset: 0; background: var(--nx-bg-overlay); z-index: var(--nx-z-command); display: flex; align-items: flex-start; justify-content: center; padding-top: 15vh; opacity: 0; visibility: hidden; transition: opacity var(--nx-transition-base), visibility var(--nx-transition-base); }
.nx-command-backdrop-open { opacity: 1; visibility: visible; }
.nx-command { width: 100%; max-width: 36rem; background: var(--nx-bg-elevated); border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-2xl); box-shadow: var(--nx-shadow-2xl); overflow: hidden; transform: scale(0.98) translateY(-8px); transition: transform var(--nx-transition-base); }
.nx-command-backdrop-open .nx-command { transform: scale(1) translateY(0); }
.nx-command-input-wrapper { display: flex; align-items: center; gap: var(--nx-space-3); padding: var(--nx-space-4); border-bottom: 1px solid var(--nx-border-primary); }
.nx-command-input-icon { color: var(--nx-text-tertiary); flex-shrink: 0; }
.nx-command-input { flex: 1; border: none; background: transparent; font-size: var(--nx-font-size-base); color: var(--nx-text-primary); outline: none; }
.nx-command-input::placeholder { color: var(--nx-text-tertiary); }
.nx-command-kbd { display: inline-flex; padding: 2px var(--nx-space-2); font-size: var(--nx-font-size-xs); font-family: var(--nx-font-family-mono); color: var(--nx-text-tertiary); background: var(--nx-bg-tertiary); border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-sm); }
.nx-command-list { max-height: 320px; overflow-y: auto; padding: var(--nx-space-2); }
.nx-command-group { margin-bottom: var(--nx-space-2); }
.nx-command-group-label { padding: var(--nx-space-2) var(--nx-space-3); font-size: var(--nx-font-size-xs); font-weight: var(--nx-font-weight-semibold); color: var(--nx-text-tertiary); text-transform: uppercase; letter-spacing: var(--nx-letter-spacing-wide); }
.nx-command-item { display: flex; align-items: center; gap: var(--nx-space-3); padding: var(--nx-space-2) var(--nx-space-3); border-radius: var(--nx-radius-lg); cursor: pointer; transition: background var(--nx-transition-fast); }
.nx-command-item:hover, .nx-command-item-active { background: var(--nx-accent-primary-subtle); }
.nx-command-item-icon { width: 1.25rem; height: 1.25rem; color: var(--nx-text-tertiary); flex-shrink: 0; }
.nx-command-item-active .nx-command-item-icon { color: var(--nx-accent-primary); }
.nx-command-item-content { flex: 1; min-width: 0; }
.nx-command-item-title { font-size: var(--nx-font-size-sm); color: var(--nx-text-primary); }
.nx-command-item-desc { font-size: var(--nx-font-size-xs); color: var(--nx-text-tertiary); margin-top: 1px; }
.nx-command-item-shortcut { display: flex; gap: var(--nx-space-1); }
.nx-command-footer { display: flex; align-items: center; gap: var(--nx-space-4); padding: var(--nx-space-3) var(--nx-space-4); border-top: 1px solid var(--nx-border-primary); background: var(--nx-bg-secondary); font-size: var(--nx-font-size-xs); color: var(--nx-text-tertiary); }
.nx-command-footer-hint { display: flex; align-items: center; gap: var(--nx-space-1); }
.nx-command-ai-badge { display: inline-flex; align-items: center; gap: var(--nx-space-1); padding: 2px var(--nx-space-2); background: linear-gradient(135deg, var(--nx-accent-primary-subtle), var(--nx-accent-primary-muted)); color: var(--nx-accent-primary); border-radius: var(--nx-radius-full); font-size: var(--nx-font-size-xs); font-weight: var(--nx-font-weight-medium); }

/* --------------------------------------------------------------------------
   25. AI Chat
   -------------------------------------------------------------------------- */
.nx-ai-chat { display: flex; flex-direction: column; height: 100%; background: var(--nx-bg-elevated); border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-xl); overflow: hidden; }
.nx-ai-chat-header { display: flex; align-items: center; gap: var(--nx-space-3); padding: var(--nx-space-4); border-bottom: 1px solid var(--nx-border-primary); background: linear-gradient(135deg, var(--nx-accent-primary-subtle), transparent); }
.nx-ai-chat-avatar { width: 2rem; height: 2rem; border-radius: var(--nx-radius-full); background: linear-gradient(135deg, var(--nx-accent-primary), var(--nx-accent-secondary)); display: flex; align-items: center; justify-content: center; color: #FFFFFF; }
.nx-ai-chat-title { font-size: var(--nx-font-size-sm); font-weight: var(--nx-font-weight-semibold); color: var(--nx-text-primary); }
.nx-ai-chat-status { font-size: var(--nx-font-size-xs); color: var(--nx-status-success); display: flex; align-items: center; gap: var(--nx-space-1); }
.nx-ai-chat-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--nx-status-success); animation: nx-pulse 2s ease-in-out infinite; }
.nx-ai-chat-messages { flex: 1; overflow-y: auto; padding: var(--nx-space-4); display: flex; flex-direction: column; gap: var(--nx-space-4); }
.nx-ai-message { display: flex; gap: var(--nx-space-3); max-width: 85%; }
.nx-ai-message-user { align-self: flex-end; flex-direction: row-reverse; }
.nx-ai-message-avatar { width: 1.75rem; height: 1.75rem; border-radius: var(--nx-radius-full); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: var(--nx-font-size-xs); }
.nx-ai-message-assistant .nx-ai-message-avatar { background: linear-gradient(135deg, var(--nx-accent-primary), var(--nx-accent-secondary)); color: #FFFFFF; }
.nx-ai-message-user .nx-ai-message-avatar { background: var(--nx-bg-tertiary); color: var(--nx-text-secondary); }
.nx-ai-message-bubble { padding: var(--nx-space-3) var(--nx-space-4); border-radius: var(--nx-radius-xl); font-size: var(--nx-font-size-sm); line-height: var(--nx-line-height-relaxed); }
.nx-ai-message-assistant .nx-ai-message-bubble { background: var(--nx-bg-secondary); color: var(--nx-text-primary); border-bottom-left-radius: var(--nx-radius-sm); }
.nx-ai-message-user .nx-ai-message-bubble { background: var(--nx-accent-primary); color: #FFFFFF; border-bottom-right-radius: var(--nx-radius-sm); }
.nx-ai-message-time { font-size: var(--nx-font-size-xs); color: var(--nx-text-tertiary); margin-top: var(--nx-space-1); }
.nx-ai-message-user .nx-ai-message-time { text-align: right; }
.nx-ai-message-code { background: var(--nx-bg-primary); border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-md); padding: var(--nx-space-3); font-family: var(--nx-font-family-mono); font-size: var(--nx-font-size-xs); overflow-x: auto; margin-top: var(--nx-space-2); }
.nx-ai-message-actions { display: flex; gap: var(--nx-space-1); margin-top: var(--nx-space-2); opacity: 0; transition: opacity var(--nx-transition-fast); }
.nx-ai-message:hover .nx-ai-message-actions { opacity: 1; }
.nx-ai-typing { display: flex; align-items: center; gap: var(--nx-space-1); padding: var(--nx-space-3) var(--nx-space-4); }
.nx-ai-typing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--nx-text-tertiary); animation: nx-typing 1.4s ease-in-out infinite; }
.nx-ai-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.nx-ai-typing-dot:nth-child(3) { animation-delay: 0.4s; }
.nx-ai-chat-input-area { padding: var(--nx-space-4); border-top: 1px solid var(--nx-border-primary); background: var(--nx-bg-secondary); }
.nx-ai-chat-input-wrapper { display: flex; align-items: flex-end; gap: var(--nx-space-2); background: var(--nx-bg-primary); border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-xl); padding: var(--nx-space-2); transition: border-color var(--nx-transition-fast); }
.nx-ai-chat-input-wrapper:focus-within { border-color: var(--nx-border-focus); box-shadow: 0 0 0 3px var(--nx-accent-primary-muted); }
.nx-ai-chat-input { flex: 1; border: none; background: transparent; resize: none; min-height: 2.5rem; max-height: 120px; padding: var(--nx-space-2); font-size: var(--nx-font-size-sm); color: var(--nx-text-primary); outline: none; }
.nx-ai-chat-send { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: none; background: var(--nx-accent-primary); color: #FFFFFF; border-radius: var(--nx-radius-lg); cursor: pointer; transition: background var(--nx-transition-fast); flex-shrink: 0; }
.nx-ai-chat-send:hover { background: var(--nx-accent-primary-hover); }
.nx-ai-chat-send:disabled { opacity: 0.5; cursor: not-allowed; }
.nx-ai-suggestions { display: flex; flex-wrap: wrap; gap: var(--nx-space-2); padding: 0 var(--nx-space-4) var(--nx-space-4); }
.nx-ai-suggestion { padding: var(--nx-space-2) var(--nx-space-3); background: var(--nx-bg-secondary); border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-full); font-size: var(--nx-font-size-xs); color: var(--nx-text-secondary); cursor: pointer; transition: all var(--nx-transition-fast); }
.nx-ai-suggestion:hover { border-color: var(--nx-accent-primary); color: var(--nx-accent-primary); background: var(--nx-accent-primary-subtle); }
.nx-ai-chat-panel { position: fixed; bottom: var(--nx-space-6); right: var(--nx-space-6); width: 380px; height: 520px; z-index: var(--nx-z-fixed); box-shadow: var(--nx-shadow-2xl); animation: nx-slide-up var(--nx-transition-slow) ease-out; }
.nx-ai-chat-fab { position: fixed; bottom: var(--nx-space-6); right: var(--nx-space-6); width: 3.5rem; height: 3.5rem; border-radius: var(--nx-radius-full); background: linear-gradient(135deg, var(--nx-accent-primary), var(--nx-accent-secondary)); color: #FFFFFF; border: none; cursor: pointer; box-shadow: var(--nx-shadow-lg); display: flex; align-items: center; justify-content: center; z-index: var(--nx-z-fixed); transition: transform var(--nx-transition-fast), box-shadow var(--nx-transition-fast); }
.nx-ai-chat-fab:hover { transform: scale(1.05); box-shadow: var(--nx-shadow-xl); }

/* --------------------------------------------------------------------------
   26. Skeleton Loaders
   -------------------------------------------------------------------------- */
.nx-skeleton { background: linear-gradient(90deg, var(--nx-skeleton-base) 25%, var(--nx-skeleton-highlight) 50%, var(--nx-skeleton-base) 75%); background-size: 200% 100%; animation: nx-shimmer 1.5s ease-in-out infinite; border-radius: var(--nx-radius-md); }
.nx-skeleton-text { height: 0.875rem; margin-bottom: var(--nx-space-2); }
.nx-skeleton-text:last-child { width: 70%; margin-bottom: 0; }
.nx-skeleton-title { height: 1.25rem; width: 60%; margin-bottom: var(--nx-space-3); }
.nx-skeleton-avatar { width: 2.5rem; height: 2.5rem; border-radius: var(--nx-radius-full); }
.nx-skeleton-button { height: 2.25rem; width: 5rem; border-radius: var(--nx-radius-lg); }
.nx-skeleton-card { padding: var(--nx-space-6); border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-xl); background: var(--nx-bg-elevated); }
.nx-skeleton-image { width: 100%; height: 160px; border-radius: var(--nx-radius-lg); }
.nx-skeleton-table-row { display: flex; gap: var(--nx-space-4); padding: var(--nx-space-3) 0; }
.nx-skeleton-table-cell { flex: 1; height: 1rem; }
.nx-skeleton-kanban { display: flex; gap: var(--nx-space-4); }
.nx-skeleton-kanban-column { flex: 0 0 280px; padding: var(--nx-space-4); background: var(--nx-bg-secondary); border-radius: var(--nx-radius-xl); }
.nx-skeleton-task { height: 80px; margin-bottom: var(--nx-space-3); border-radius: var(--nx-radius-lg); }
.nx-skeleton-chart { height: 200px; border-radius: var(--nx-radius-lg); }
.nx-skeleton-sidebar-item { height: 2.25rem; margin-bottom: var(--nx-space-2); border-radius: var(--nx-radius-lg); }
.nx-skeleton-circle { border-radius: var(--nx-radius-full); }
.nx-skeleton-pulse { animation: nx-pulse 2s ease-in-out infinite; background: var(--nx-skeleton-base); }

/* --------------------------------------------------------------------------
   27. Empty States
   -------------------------------------------------------------------------- */
.nx-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--nx-space-12) var(--nx-space-6); text-align: center; }
.nx-empty-icon { width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; background: var(--nx-bg-tertiary); border-radius: var(--nx-radius-2xl); color: var(--nx-text-tertiary); margin-bottom: var(--nx-space-4); }
.nx-empty-icon-lg { width: 5rem; height: 5rem; }
.nx-empty-title { font-size: var(--nx-font-size-lg); font-weight: var(--nx-font-weight-semibold); color: var(--nx-text-primary); margin-bottom: var(--nx-space-2); }
.nx-empty-description { font-size: var(--nx-font-size-sm); color: var(--nx-text-secondary); max-width: 24rem; line-height: var(--nx-line-height-relaxed); margin-bottom: var(--nx-space-6); }
.nx-empty-actions { display: flex; gap: var(--nx-space-3); flex-wrap: wrap; justify-content: center; }
.nx-empty-compact { padding: var(--nx-space-8) var(--nx-space-4); }
.nx-empty-compact .nx-empty-icon { width: 3rem; height: 3rem; margin-bottom: var(--nx-space-3); }
.nx-empty-compact .nx-empty-title { font-size: var(--nx-font-size-base); }
.nx-empty-illustration { width: 200px; height: 160px; margin-bottom: var(--nx-space-6); opacity: 0.6; }
.nx-empty-search { background: var(--nx-accent-primary-subtle); color: var(--nx-accent-primary); }
.nx-empty-inbox .nx-empty-icon { background: var(--nx-status-info-bg); color: var(--nx-status-info); }
.nx-empty-projects .nx-empty-icon { background: var(--nx-accent-primary-subtle); color: var(--nx-accent-primary); }
.nx-empty-tasks .nx-empty-icon { background: var(--nx-status-success-bg); color: var(--nx-status-success); }
.nx-empty-team .nx-empty-icon { background: var(--nx-status-warning-bg); color: var(--nx-status-warning); }

/* --------------------------------------------------------------------------
   28. Error States
   -------------------------------------------------------------------------- */
.nx-error { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--nx-space-12) var(--nx-space-6); text-align: center; min-height: 400px; }
.nx-error-code { font-size: var(--nx-font-size-5xl); font-weight: var(--nx-font-weight-extrabold); color: var(--nx-text-tertiary); line-height: 1; margin-bottom: var(--nx-space-4); letter-spacing: var(--nx-letter-spacing-tight); }
.nx-error-icon { width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; background: var(--nx-status-error-bg); color: var(--nx-status-error); border-radius: var(--nx-radius-2xl); margin-bottom: var(--nx-space-4); }
.nx-error-title { font-size: var(--nx-font-size-xl); font-weight: var(--nx-font-weight-semibold); color: var(--nx-text-primary); margin-bottom: var(--nx-space-2); }
.nx-error-message { font-size: var(--nx-font-size-sm); color: var(--nx-text-secondary); max-width: 28rem; line-height: var(--nx-line-height-relaxed); margin-bottom: var(--nx-space-6); }
.nx-error-actions { display: flex; gap: var(--nx-space-3); }
.nx-error-inline { display: flex; align-items: center; gap: var(--nx-space-3); padding: var(--nx-space-3) var(--nx-space-4); background: var(--nx-status-error-bg); border: 1px solid rgba(220,38,38,0.2); border-radius: var(--nx-radius-lg); color: var(--nx-status-error); font-size: var(--nx-font-size-sm); }
.nx-error-inline-icon { flex-shrink: 0; }
.nx-error-inline-dismiss { margin-left: auto; background: none; border: none; color: var(--nx-status-error); cursor: pointer; opacity: 0.7; }
.nx-error-inline-dismiss:hover { opacity: 1; }
.nx-error-boundary { padding: var(--nx-space-8); border: 1px dashed var(--nx-status-error); border-radius: var(--nx-radius-xl); background: var(--nx-status-error-bg); text-align: center; }
.nx-error-network .nx-error-icon { background: var(--nx-status-warning-bg); color: var(--nx-status-warning); }
.nx-error-permission .nx-error-icon { background: var(--nx-status-info-bg); color: var(--nx-status-info); }
.nx-error-maintenance { background: linear-gradient(135deg, var(--nx-bg-secondary), var(--nx-bg-tertiary)); border-radius: var(--nx-radius-2xl); padding: var(--nx-space-16); }

/* --------------------------------------------------------------------------
   29. Mobile Bottom Nav
   -------------------------------------------------------------------------- */
.nx-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; height: var(--nx-bottom-nav-height); background: var(--nx-bg-elevated); border-top: 1px solid var(--nx-border-primary); z-index: var(--nx-z-fixed); padding-bottom: env(safe-area-inset-bottom); }
.nx-bottom-nav-inner { display: flex; align-items: center; justify-content: space-around; height: 100%; max-width: var(--nx-content-max-width); margin: 0 auto; }
.nx-bottom-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: 1; height: 100%; color: var(--nx-text-tertiary); font-size: 0.625rem; font-weight: var(--nx-font-weight-medium); text-decoration: none; transition: color var(--nx-transition-fast); cursor: pointer; border: none; background: transparent; }
.nx-bottom-nav-item:hover { color: var(--nx-text-secondary); }
.nx-bottom-nav-item-active { color: var(--nx-accent-primary); }
.nx-bottom-nav-icon { width: 1.375rem; height: 1.375rem; }
.nx-bottom-nav-item-active .nx-bottom-nav-icon { transform: scale(1.1); }
.nx-bottom-nav-badge { position: absolute; top: 8px; right: calc(50% - 16px); width: 8px; height: 8px; background: var(--nx-status-error); border-radius: 50%; border: 2px solid var(--nx-bg-elevated); }
.nx-bottom-nav-fab { position: relative; top: -12px; }
.nx-bottom-nav-fab .nx-bottom-nav-icon-wrapper { width: 3rem; height: 3rem; background: linear-gradient(135deg, var(--nx-accent-primary), var(--nx-accent-secondary)); border-radius: var(--nx-radius-full); display: flex; align-items: center; justify-content: center; color: #FFFFFF; box-shadow: var(--nx-shadow-lg); }
.nx-has-bottom-nav { padding-bottom: calc(var(--nx-bottom-nav-height) + env(safe-area-inset-bottom)); }

/* --------------------------------------------------------------------------
   30. Progress Bars
   -------------------------------------------------------------------------- */
.nx-progress { width: 100%; height: 8px; background: var(--nx-bg-tertiary); border-radius: var(--nx-radius-full); overflow: hidden; }
.nx-progress-bar { height: 100%; background: var(--nx-accent-primary); border-radius: var(--nx-radius-full); transition: width var(--nx-transition-slow); position: relative; overflow: hidden; }
.nx-progress-bar-animated { background: linear-gradient(90deg, var(--nx-accent-primary), var(--nx-accent-secondary), var(--nx-accent-primary)); background-size: 200% 100%; animation: nx-progress-stripe 2s linear infinite; }
.nx-progress-bar-indeterminate { width: 30% !important; animation: nx-progress-indeterminate 1.5s ease-in-out infinite; }
.nx-progress-sm { height: 4px; }
.nx-progress-lg { height: 12px; }
.nx-progress-success .nx-progress-bar { background: var(--nx-status-success); }
.nx-progress-warning .nx-progress-bar { background: var(--nx-status-warning); }
.nx-progress-error .nx-progress-bar { background: var(--nx-status-error); }
.nx-progress-stacked { display: flex; height: 8px; border-radius: var(--nx-radius-full); overflow: hidden; background: var(--nx-bg-tertiary); }
.nx-progress-segment { height: 100%; transition: width var(--nx-transition-slow); }
.nx-progress-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--nx-space-2); font-size: var(--nx-font-size-xs); color: var(--nx-text-secondary); }
.nx-progress-label-value { font-weight: var(--nx-font-weight-semibold); color: var(--nx-text-primary); }
.nx-progress-circle { position: relative; width: 64px; height: 64px; }
.nx-progress-circle svg { transform: rotate(-90deg); }
.nx-progress-circle-bg { fill: none; stroke: var(--nx-bg-tertiary); stroke-width: 4; }
.nx-progress-circle-bar { fill: none; stroke: var(--nx-accent-primary); stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset var(--nx-transition-slow); }
.nx-progress-circle-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--nx-font-size-sm); font-weight: var(--nx-font-weight-semibold); color: var(--nx-text-primary); }
.nx-progress-steps { display: flex; align-items: center; gap: var(--nx-space-2); }
.nx-progress-step { flex: 1; height: 4px; background: var(--nx-bg-tertiary); border-radius: var(--nx-radius-full); overflow: hidden; }
.nx-progress-step-complete { background: var(--nx-accent-primary); }
.nx-progress-step-active { background: linear-gradient(90deg, var(--nx-accent-primary) 50%, var(--nx-bg-tertiary) 50%); animation: nx-progress-step 1s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   31. Dropdowns & Menus
   -------------------------------------------------------------------------- */
.nx-dropdown { position: relative; display: inline-block; }
.nx-dropdown-menu { position: absolute; top: calc(100% + var(--nx-space-1)); left: 0; min-width: 12rem; background: var(--nx-bg-elevated); border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-xl); box-shadow: var(--nx-shadow-lg); padding: var(--nx-space-2); z-index: var(--nx-z-dropdown); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: all var(--nx-transition-fast); }
.nx-dropdown-open .nx-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nx-dropdown-menu-right { left: auto; right: 0; }
.nx-dropdown-item { display: flex; align-items: center; gap: var(--nx-space-2); padding: var(--nx-space-2) var(--nx-space-3); font-size: var(--nx-font-size-sm); color: var(--nx-text-primary); border-radius: var(--nx-radius-lg); cursor: pointer; transition: background var(--nx-transition-fast); border: none; background: transparent; width: 100%; text-align: left; }
.nx-dropdown-item:hover { background: var(--nx-bg-tertiary); }
.nx-dropdown-item-danger { color: var(--nx-status-error); }
.nx-dropdown-item-danger:hover { background: var(--nx-status-error-bg); }
.nx-dropdown-divider { height: 1px; background: var(--nx-border-primary); margin: var(--nx-space-2) 0; }
.nx-dropdown-label { padding: var(--nx-space-2) var(--nx-space-3); font-size: var(--nx-font-size-xs); font-weight: var(--nx-font-weight-semibold); color: var(--nx-text-tertiary); text-transform: uppercase; letter-spacing: var(--nx-letter-spacing-wide); }
.nx-dropdown-item-icon { width: 1rem; height: 1rem; color: var(--nx-text-tertiary); }
.nx-dropdown-item-shortcut { margin-left: auto; font-size: var(--nx-font-size-xs); color: var(--nx-text-tertiary); font-family: var(--nx-font-family-mono); }

/* --------------------------------------------------------------------------
   32. Tabs
   -------------------------------------------------------------------------- */
.nx-tabs { display: flex; flex-direction: column; }
.nx-tabs-list { display: flex; gap: var(--nx-space-1); border-bottom: 1px solid var(--nx-border-primary); padding: 0 var(--nx-space-2); overflow-x: auto; }
.nx-tab { display: inline-flex; align-items: center; gap: var(--nx-space-2); padding: var(--nx-space-3) var(--nx-space-4); font-size: var(--nx-font-size-sm); font-weight: var(--nx-font-weight-medium); color: var(--nx-text-secondary); border: none; background: transparent; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: all var(--nx-transition-fast); white-space: nowrap; }
.nx-tab:hover { color: var(--nx-text-primary); }
.nx-tab-active { color: var(--nx-accent-primary); border-bottom-color: var(--nx-accent-primary); }
.nx-tab-badge { font-size: var(--nx-font-size-xs); padding: 1px var(--nx-space-2); background: var(--nx-bg-tertiary); border-radius: var(--nx-radius-full); }
.nx-tab-active .nx-tab-badge { background: var(--nx-accent-primary-subtle); color: var(--nx-accent-primary); }
.nx-tab-panel { padding: var(--nx-space-6) 0; }
.nx-tab-panel-hidden { display: none; }
.nx-tabs-pills .nx-tabs-list { border-bottom: none; gap: var(--nx-space-2); padding: var(--nx-space-1); background: var(--nx-bg-secondary); border-radius: var(--nx-radius-lg); }
.nx-tabs-pills .nx-tab { border-bottom: none; border-radius: var(--nx-radius-md); margin-bottom: 0; padding: var(--nx-space-2) var(--nx-space-4); }
.nx-tabs-pills .nx-tab-active { background: var(--nx-bg-elevated); box-shadow: var(--nx-shadow-sm); color: var(--nx-text-primary); }
.nx-tabs-vertical { flex-direction: row; }
.nx-tabs-vertical .nx-tabs-list { flex-direction: column; border-bottom: none; border-right: 1px solid var(--nx-border-primary); padding: var(--nx-space-2); min-width: 200px; }
.nx-tabs-vertical .nx-tab { border-bottom: none; border-right: 2px solid transparent; margin-bottom: 0; margin-right: -1px; justify-content: flex-start; }
.nx-tabs-vertical .nx-tab-active { border-right-color: var(--nx-accent-primary); }

/* --------------------------------------------------------------------------
   33. Tooltips
   -------------------------------------------------------------------------- */
.nx-tooltip { position: relative; display: inline-block; }
.nx-tooltip-content { position: absolute; bottom: calc(100% + var(--nx-space-2)); left: 50%; transform: translateX(-50%); padding: var(--nx-space-2) var(--nx-space-3); background: var(--nx-bg-inverse); color: var(--nx-text-inverse); font-size: var(--nx-font-size-xs); border-radius: var(--nx-radius-md); white-space: nowrap; z-index: var(--nx-z-tooltip); opacity: 0; visibility: hidden; transition: all var(--nx-transition-fast); pointer-events: none; }
.nx-tooltip:hover .nx-tooltip-content, .nx-tooltip:focus-within .nx-tooltip-content { opacity: 1; visibility: visible; }
.nx-tooltip-content::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--nx-bg-inverse); }
.nx-tooltip-bottom .nx-tooltip-content { bottom: auto; top: calc(100% + var(--nx-space-2)); }
.nx-tooltip-bottom .nx-tooltip-content::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--nx-bg-inverse); }
.nx-tooltip-left .nx-tooltip-content { bottom: auto; top: 50%; left: auto; right: calc(100% + var(--nx-space-2)); transform: translateY(-50%); }
.nx-tooltip-right .nx-tooltip-content { bottom: auto; top: 50%; left: calc(100% + var(--nx-space-2)); transform: translateY(-50%); }

/* --------------------------------------------------------------------------
   34. Animations & Keyframes
   -------------------------------------------------------------------------- */
@keyframes nx-spin { to { transform: rotate(360deg); } }
@keyframes nx-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes nx-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes nx-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes nx-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes nx-slide-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes nx-slide-down { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes nx-slide-in-right { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes nx-slide-in-left { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes nx-scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes nx-toast-in { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes nx-toast-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } }
@keyframes nx-kanban-drag { 0% { transform: rotate(0deg) scale(1); } 100% { transform: rotate(2deg) scale(1.02); } }
@keyframes nx-progress-stripe { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes nx-progress-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } }
@keyframes nx-progress-step { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
@keyframes nx-typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes nx-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes nx-sidebar-collapse { from { width: var(--nx-sidebar-width); } to { width: var(--nx-sidebar-collapsed-width); } }
@keyframes nx-sidebar-expand { from { width: var(--nx-sidebar-collapsed-width); } to { width: var(--nx-sidebar-width); } }

.nx-animate-spin { animation: nx-spin 1s linear infinite; }
.nx-animate-pulse { animation: nx-pulse 2s ease-in-out infinite; }
.nx-animate-bounce { animation: nx-bounce 1s ease-in-out infinite; }
.nx-animate-fade-in { animation: nx-fade-in var(--nx-transition-base) ease-out; }
.nx-animate-slide-up { animation: nx-slide-up var(--nx-transition-base) ease-out; }
.nx-animate-slide-down { animation: nx-slide-down var(--nx-transition-base) ease-out; }
.nx-animate-scale-in { animation: nx-scale-in var(--nx-transition-base) ease-out; }
.nx-transition-all { transition: all var(--nx-transition-base); }
.nx-transition-colors { transition: color var(--nx-transition-fast), background-color var(--nx-transition-fast), border-color var(--nx-transition-fast); }
.nx-transition-transform { transition: transform var(--nx-transition-base); }
.nx-transition-opacity { transition: opacity var(--nx-transition-base); }

/* --------------------------------------------------------------------------
   35. Responsive Breakpoints
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .nx-sm\:flex { display: flex; }
  .nx-sm\:grid { display: grid; }
  .nx-sm\:hidden { display: none; }
  .nx-sm\:block { display: block; }
  .nx-sm\:inline-flex { display: inline-flex; }
  .nx-sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .nx-sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nx-sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nx-sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .nx-sm\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .nx-sm\:p-0 { padding: var(--nx-space-0); }
  .nx-sm\:m-0 { margin: var(--nx-space-0); }
  .nx-sm\:gap-0 { gap: var(--nx-space-0); }
  .nx-sm\:p-1 { padding: var(--nx-space-1); }
  .nx-sm\:m-1 { margin: var(--nx-space-1); }
  .nx-sm\:gap-1 { gap: var(--nx-space-1); }
  .nx-sm\:p-2 { padding: var(--nx-space-2); }
  .nx-sm\:m-2 { margin: var(--nx-space-2); }
  .nx-sm\:gap-2 { gap: var(--nx-space-2); }
  .nx-sm\:p-3 { padding: var(--nx-space-3); }
  .nx-sm\:m-3 { margin: var(--nx-space-3); }
  .nx-sm\:gap-3 { gap: var(--nx-space-3); }
  .nx-sm\:p-4 { padding: var(--nx-space-4); }
  .nx-sm\:m-4 { margin: var(--nx-space-4); }
  .nx-sm\:gap-4 { gap: var(--nx-space-4); }
  .nx-sm\:p-6 { padding: var(--nx-space-6); }
  .nx-sm\:m-6 { margin: var(--nx-space-6); }
  .nx-sm\:gap-6 { gap: var(--nx-space-6); }
  .nx-sm\:p-8 { padding: var(--nx-space-8); }
  .nx-sm\:m-8 { margin: var(--nx-space-8); }
  .nx-sm\:gap-8 { gap: var(--nx-space-8); }
  .nx-sm\:flex-row { flex-direction: row; }
  .nx-sm\:flex-col { flex-direction: column; }
  .nx-sm\:items-center { align-items: center; }
  .nx-sm\:justify-between { justify-content: space-between; }
  .nx-sm\:w-full { width: 100%; }
  .nx-sm\:w-auto { width: auto; }
  .nx-sm\:text-left { text-align: left; }
  .nx-sm\:text-center { text-align: center; }
}
@media (min-width: 768px) {
  .nx-md\:flex { display: flex; }
  .nx-md\:grid { display: grid; }
  .nx-md\:hidden { display: none; }
  .nx-md\:block { display: block; }
  .nx-md\:inline-flex { display: inline-flex; }
  .nx-md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .nx-md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nx-md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nx-md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .nx-md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .nx-md\:p-0 { padding: var(--nx-space-0); }
  .nx-md\:m-0 { margin: var(--nx-space-0); }
  .nx-md\:gap-0 { gap: var(--nx-space-0); }
  .nx-md\:p-1 { padding: var(--nx-space-1); }
  .nx-md\:m-1 { margin: var(--nx-space-1); }
  .nx-md\:gap-1 { gap: var(--nx-space-1); }
  .nx-md\:p-2 { padding: var(--nx-space-2); }
  .nx-md\:m-2 { margin: var(--nx-space-2); }
  .nx-md\:gap-2 { gap: var(--nx-space-2); }
  .nx-md\:p-3 { padding: var(--nx-space-3); }
  .nx-md\:m-3 { margin: var(--nx-space-3); }
  .nx-md\:gap-3 { gap: var(--nx-space-3); }
  .nx-md\:p-4 { padding: var(--nx-space-4); }
  .nx-md\:m-4 { margin: var(--nx-space-4); }
  .nx-md\:gap-4 { gap: var(--nx-space-4); }
  .nx-md\:p-6 { padding: var(--nx-space-6); }
  .nx-md\:m-6 { margin: var(--nx-space-6); }
  .nx-md\:gap-6 { gap: var(--nx-space-6); }
  .nx-md\:p-8 { padding: var(--nx-space-8); }
  .nx-md\:m-8 { margin: var(--nx-space-8); }
  .nx-md\:gap-8 { gap: var(--nx-space-8); }
  .nx-md\:flex-row { flex-direction: row; }
  .nx-md\:flex-col { flex-direction: column; }
  .nx-md\:items-center { align-items: center; }
  .nx-md\:justify-between { justify-content: space-between; }
  .nx-md\:w-full { width: 100%; }
  .nx-md\:w-auto { width: auto; }
  .nx-md\:text-left { text-align: left; }
  .nx-md\:text-center { text-align: center; }
}
@media (min-width: 1024px) {
  .nx-lg\:flex { display: flex; }
  .nx-lg\:grid { display: grid; }
  .nx-lg\:hidden { display: none; }
  .nx-lg\:block { display: block; }
  .nx-lg\:inline-flex { display: inline-flex; }
  .nx-lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .nx-lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nx-lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nx-lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .nx-lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .nx-lg\:p-0 { padding: var(--nx-space-0); }
  .nx-lg\:m-0 { margin: var(--nx-space-0); }
  .nx-lg\:gap-0 { gap: var(--nx-space-0); }
  .nx-lg\:p-1 { padding: var(--nx-space-1); }
  .nx-lg\:m-1 { margin: var(--nx-space-1); }
  .nx-lg\:gap-1 { gap: var(--nx-space-1); }
  .nx-lg\:p-2 { padding: var(--nx-space-2); }
  .nx-lg\:m-2 { margin: var(--nx-space-2); }
  .nx-lg\:gap-2 { gap: var(--nx-space-2); }
  .nx-lg\:p-3 { padding: var(--nx-space-3); }
  .nx-lg\:m-3 { margin: var(--nx-space-3); }
  .nx-lg\:gap-3 { gap: var(--nx-space-3); }
  .nx-lg\:p-4 { padding: var(--nx-space-4); }
  .nx-lg\:m-4 { margin: var(--nx-space-4); }
  .nx-lg\:gap-4 { gap: var(--nx-space-4); }
  .nx-lg\:p-6 { padding: var(--nx-space-6); }
  .nx-lg\:m-6 { margin: var(--nx-space-6); }
  .nx-lg\:gap-6 { gap: var(--nx-space-6); }
  .nx-lg\:p-8 { padding: var(--nx-space-8); }
  .nx-lg\:m-8 { margin: var(--nx-space-8); }
  .nx-lg\:gap-8 { gap: var(--nx-space-8); }
  .nx-lg\:flex-row { flex-direction: row; }
  .nx-lg\:flex-col { flex-direction: column; }
  .nx-lg\:items-center { align-items: center; }
  .nx-lg\:justify-between { justify-content: space-between; }
  .nx-lg\:w-full { width: 100%; }
  .nx-lg\:w-auto { width: auto; }
  .nx-lg\:text-left { text-align: left; }
  .nx-lg\:text-center { text-align: center; }
}
@media (min-width: 1280px) {
  .nx-xl\:flex { display: flex; }
  .nx-xl\:grid { display: grid; }
  .nx-xl\:hidden { display: none; }
  .nx-xl\:block { display: block; }
  .nx-xl\:inline-flex { display: inline-flex; }
  .nx-xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .nx-xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nx-xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nx-xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .nx-xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .nx-xl\:p-0 { padding: var(--nx-space-0); }
  .nx-xl\:m-0 { margin: var(--nx-space-0); }
  .nx-xl\:gap-0 { gap: var(--nx-space-0); }
  .nx-xl\:p-1 { padding: var(--nx-space-1); }
  .nx-xl\:m-1 { margin: var(--nx-space-1); }
  .nx-xl\:gap-1 { gap: var(--nx-space-1); }
  .nx-xl\:p-2 { padding: var(--nx-space-2); }
  .nx-xl\:m-2 { margin: var(--nx-space-2); }
  .nx-xl\:gap-2 { gap: var(--nx-space-2); }
  .nx-xl\:p-3 { padding: var(--nx-space-3); }
  .nx-xl\:m-3 { margin: var(--nx-space-3); }
  .nx-xl\:gap-3 { gap: var(--nx-space-3); }
  .nx-xl\:p-4 { padding: var(--nx-space-4); }
  .nx-xl\:m-4 { margin: var(--nx-space-4); }
  .nx-xl\:gap-4 { gap: var(--nx-space-4); }
  .nx-xl\:p-6 { padding: var(--nx-space-6); }
  .nx-xl\:m-6 { margin: var(--nx-space-6); }
  .nx-xl\:gap-6 { gap: var(--nx-space-6); }
  .nx-xl\:p-8 { padding: var(--nx-space-8); }
  .nx-xl\:m-8 { margin: var(--nx-space-8); }
  .nx-xl\:gap-8 { gap: var(--nx-space-8); }
  .nx-xl\:flex-row { flex-direction: row; }
  .nx-xl\:flex-col { flex-direction: column; }
  .nx-xl\:items-center { align-items: center; }
  .nx-xl\:justify-between { justify-content: space-between; }
  .nx-xl\:w-full { width: 100%; }
  .nx-xl\:w-auto { width: auto; }
  .nx-xl\:text-left { text-align: left; }
  .nx-xl\:text-center { text-align: center; }
}
@media (min-width: 1536px) {
  .nx-2xl\:flex { display: flex; }
  .nx-2xl\:grid { display: grid; }
  .nx-2xl\:hidden { display: none; }
  .nx-2xl\:block { display: block; }
  .nx-2xl\:inline-flex { display: inline-flex; }
  .nx-2xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .nx-2xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-2xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nx-2xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .nx-2xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .nx-2xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .nx-2xl\:p-0 { padding: var(--nx-space-0); }
  .nx-2xl\:m-0 { margin: var(--nx-space-0); }
  .nx-2xl\:gap-0 { gap: var(--nx-space-0); }
  .nx-2xl\:p-1 { padding: var(--nx-space-1); }
  .nx-2xl\:m-1 { margin: var(--nx-space-1); }
  .nx-2xl\:gap-1 { gap: var(--nx-space-1); }
  .nx-2xl\:p-2 { padding: var(--nx-space-2); }
  .nx-2xl\:m-2 { margin: var(--nx-space-2); }
  .nx-2xl\:gap-2 { gap: var(--nx-space-2); }
  .nx-2xl\:p-3 { padding: var(--nx-space-3); }
  .nx-2xl\:m-3 { margin: var(--nx-space-3); }
  .nx-2xl\:gap-3 { gap: var(--nx-space-3); }
  .nx-2xl\:p-4 { padding: var(--nx-space-4); }
  .nx-2xl\:m-4 { margin: var(--nx-space-4); }
  .nx-2xl\:gap-4 { gap: var(--nx-space-4); }
  .nx-2xl\:p-6 { padding: var(--nx-space-6); }
  .nx-2xl\:m-6 { margin: var(--nx-space-6); }
  .nx-2xl\:gap-6 { gap: var(--nx-space-6); }
  .nx-2xl\:p-8 { padding: var(--nx-space-8); }
  .nx-2xl\:m-8 { margin: var(--nx-space-8); }
  .nx-2xl\:gap-8 { gap: var(--nx-space-8); }
  .nx-2xl\:flex-row { flex-direction: row; }
  .nx-2xl\:flex-col { flex-direction: column; }
  .nx-2xl\:items-center { align-items: center; }
  .nx-2xl\:justify-between { justify-content: space-between; }
  .nx-2xl\:w-full { width: 100%; }
  .nx-2xl\:w-auto { width: auto; }
  .nx-2xl\:text-left { text-align: left; }
  .nx-2xl\:text-center { text-align: center; }
}

/* Mobile-first responsive layout overrides */
@media (max-width: 1023px) {
  .nx-sidebar { transform: translateX(-100%); }
  .nx-sidebar.nx-sidebar-mobile-open { transform: translateX(0); }
  .nx-main-with-sidebar { margin-left: 0; }
  .nx-main-sidebar-collapsed { margin-left: 0; }
  .nx-topbar-search { display: none; }
  .nx-topbar-user-info { display: none; }
  .nx-bottom-nav { display: block; }
  .nx-content { padding: var(--nx-space-4); }
  #nx-page-root > .nx-page-documents { margin: var(--nx-space-4); width: calc(100% - var(--nx-space-8)); }
  .nx-kanban-column { flex: 0 0 280px; }
  .nx-modal { max-width: calc(100vw - var(--nx-space-4)); margin: var(--nx-space-2); }
  .nx-drawer { width: 100vw; max-width: 100vw; }
  .nx-ai-chat-panel { width: calc(100vw - var(--nx-space-8)); height: calc(100vh - var(--nx-topbar-height) - var(--nx-bottom-nav-height) - var(--nx-space-8)); bottom: calc(var(--nx-bottom-nav-height) + var(--nx-space-4)); }
  .nx-chart-grid { grid-template-columns: 1fr; }
  .nx-form-row { grid-template-columns: 1fr; }
  .nx-table-toolbar { flex-direction: column; align-items: stretch; }
  .nx-card-grid { grid-template-columns: 1fr; }
  .nx-command { max-width: calc(100vw - var(--nx-space-4)); }
  .nx-toast-container { left: var(--nx-space-4); right: var(--nx-space-4); max-width: none; }
  #nexora-app .nx-grid-cols-3,
  #nexora-app .nx-grid-cols-4,
  #nexora-app .nx-grid-cols-5,
  #nexora-app .nx-grid-cols-7 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #nexora-app .nx-col-span-2,
  #nexora-app .nx-col-span-5 { grid-column: span 1; }
  #nexora-app .nx-chart-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nx-topbar-search-mobile { display: inline-flex; }
}

@media (max-width: 767px) {
  .nx-page-title { font-size: var(--nx-font-size-xl); }
  .nx-stat-card-value { font-size: var(--nx-font-size-2xl); }
  .nx-kanban-column { flex: 0 0 260px; }
  .nx-tabs-vertical { flex-direction: column; }
  .nx-tabs-vertical .nx-tabs-list { flex-direction: row; border-right: none; border-bottom: 1px solid var(--nx-border-primary); min-width: auto; overflow-x: auto; }
  .nx-tabs-vertical .nx-tab { border-right: none; border-bottom: 2px solid transparent; }
  .nx-tabs-vertical .nx-tab-active { border-bottom-color: var(--nx-accent-primary); border-right-color: transparent; }
  .nx-error-code { font-size: var(--nx-font-size-4xl); }
  .nx-modal-footer { flex-direction: column-reverse; }
  .nx-modal-footer .nx-btn { width: 100%; }
  .nx-drawer-footer { flex-direction: column-reverse; }
  .nx-drawer-footer .nx-btn { width: 100%; }
  #nexora-app .nx-grid-cols-2,
  #nexora-app .nx-grid-cols-3,
  #nexora-app .nx-grid-cols-4,
  #nexora-app .nx-grid-cols-5,
  #nexora-app .nx-grid-cols-7,
  #nexora-app .nx-chart-grid-3 { grid-template-columns: 1fr; }
  #nexora-app .nx-col-span-2,
  #nexora-app .nx-col-span-5 { grid-column: span 1; }
  .nx-page-header { flex-direction: column; align-items: stretch; }
  .nx-page-actions { width: 100%; }
  .nx-page-actions .nx-btn { flex: 1 1 auto; justify-content: center; }
  .nx-project-header .nx-flex.nx-items-start > .nx-flex.nx-gap-2:last-child { width: 100%; }
  .nx-project-header .nx-flex.nx-items-start > .nx-flex.nx-gap-2:last-child .nx-btn { flex: 1; }
  .nx-phoenix-highlights .nx-flex.nx-items-center.nx-gap-3 { flex-wrap: wrap; }
  .nx-phoenix-highlights .nx-ml-auto { margin-left: 0; width: 100%; }
  .nx-phoenix-highlights .nx-ml-auto .nx-btn { width: 100%; }
  .nx-my-work-toolbar .nx-select,
  .nx-my-work-toolbar .nx-btn { flex: 1 1 calc(50% - var(--nx-space-2)); min-width: 0; }
  .nx-doc-editor { padding: var(--nx-space-4) !important; }
  .nx-doc-editor-toolbar { flex-wrap: wrap; gap: var(--nx-space-2); }
  .nx-doc-editor-toolbar .nx-ml-auto { margin-left: 0; width: 100%; }
  .nx-page-ai .nx-ai-chat,
  .nx-ai-chat-page .nx-ai-chat { min-height: 360px; }
  .nx-settings-row { flex-wrap: wrap; }
  .nx-settings-row > *:last-child { margin-left: auto; }
}

@media (max-width: 639px) {
  .nx-topbar { padding: 0 var(--nx-space-4); }
  .nx-content { padding: var(--nx-space-4) var(--nx-space-3) var(--nx-space-6); }
  #nx-page-root > .nx-page-documents { margin: var(--nx-space-3); width: calc(100% - var(--nx-space-6)); }
  .nx-card-body { padding: var(--nx-space-4); }
  .nx-card-header { padding: var(--nx-space-3) var(--nx-space-4); }
  .nx-kanban { gap: var(--nx-space-3); }
  .nx-kanban-column { flex: 0 0 240px; }
  .nx-empty { padding: var(--nx-space-8) var(--nx-space-4); }
  .nx-ai-chat-fab { bottom: calc(var(--nx-bottom-nav-height) + var(--nx-space-4)); }
}

@media (min-width: 1024px) {
  .nx-sidebar-mobile-toggle { display: none; }
  .nx-sidebar-overlay { display: none !important; }
}

/* --------------------------------------------------------------------------
   36. Additional Components
   -------------------------------------------------------------------------- */
.nx-divider { height: 1px; background: var(--nx-border-primary); margin: var(--nx-space-4) 0; }
.nx-divider-vertical { width: 1px; height: auto; align-self: stretch; margin: 0 var(--nx-space-4); }
.nx-divider-text { display: flex; align-items: center; gap: var(--nx-space-4); color: var(--nx-text-tertiary); font-size: var(--nx-font-size-xs); }
.nx-divider-text::before, .nx-divider-text::after { content: ''; flex: 1; height: 1px; background: var(--nx-border-primary); }
.nx-alert { display: flex; align-items: flex-start; gap: var(--nx-space-3); padding: var(--nx-space-4); border-radius: var(--nx-radius-lg); font-size: var(--nx-font-size-sm); border: 1px solid transparent; }
.nx-alert-icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-top: 1px; }
.nx-alert-content { flex: 1; }
.nx-alert-title { font-weight: var(--nx-font-weight-semibold); margin-bottom: var(--nx-space-1); }
.nx-alert-info { background: var(--nx-status-info-bg); color: var(--nx-status-info); border-color: rgba(37,99,235,0.2); }
.nx-alert-success { background: var(--nx-status-success-bg); color: var(--nx-status-success); border-color: rgba(5,150,105,0.2); }
.nx-alert-warning { background: var(--nx-status-warning-bg); color: var(--nx-status-warning); border-color: rgba(217,119,6,0.2); }
.nx-alert-error { background: var(--nx-status-error-bg); color: var(--nx-status-error); border-color: rgba(220,38,38,0.2); }
.nx-alert-dismiss { flex-shrink: 0; background: none; border: none; color: inherit; cursor: pointer; opacity: 0.7; padding: var(--nx-space-1); }
.nx-alert-dismiss:hover { opacity: 1; }
.nx-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--nx-space-2); font-size: var(--nx-font-size-sm); }
.nx-breadcrumb-item { color: var(--nx-text-tertiary); }
.nx-breadcrumb-item:hover { color: var(--nx-text-secondary); }
.nx-breadcrumb-separator { color: var(--nx-text-tertiary); user-select: none; }
.nx-breadcrumb-current { color: var(--nx-text-primary); font-weight: var(--nx-font-weight-medium); }
.nx-pagination { display: flex; align-items: center; gap: var(--nx-space-1); }
.nx-pagination-btn { display: flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 var(--nx-space-2); border: 1px solid var(--nx-border-primary); background: var(--nx-bg-elevated); border-radius: var(--nx-radius-md); font-size: var(--nx-font-size-sm); color: var(--nx-text-secondary); cursor: pointer; transition: all var(--nx-transition-fast); }
.nx-pagination-btn:hover:not(:disabled) { background: var(--nx-bg-tertiary); color: var(--nx-text-primary); }
.nx-pagination-btn-active { background: var(--nx-accent-primary); color: #FFFFFF; border-color: var(--nx-accent-primary); }
.nx-pagination-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.nx-pagination-ellipsis { padding: 0 var(--nx-space-2); color: var(--nx-text-tertiary); }
.nx-spinner { display: inline-block; width: 1.5rem; height: 1.5rem; border: 2px solid var(--nx-border-primary); border-top-color: var(--nx-accent-primary); border-radius: 50%; animation: nx-spin 0.6s linear infinite; }
.nx-spinner-sm { width: 1rem; height: 1rem; border-width: 1.5px; }
.nx-spinner-lg { width: 2.5rem; height: 2.5rem; border-width: 3px; }
.nx-spinner-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.7); z-index: 10; border-radius: inherit; }
[data-theme="dark"] .nx-spinner-overlay { background: rgba(15,23,42,0.7); }
.nx-loading-center { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--nx-space-4); padding: var(--nx-space-12); color: var(--nx-text-tertiary); }
.nx-loading-text { font-size: var(--nx-font-size-sm); }

/* --------------------------------------------------------------------------
   37. Project Management Components
   -------------------------------------------------------------------------- */
.nx-project-card { display: flex; flex-direction: column; background: var(--nx-bg-elevated); border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-xl); overflow: hidden; transition: all var(--nx-transition-base); }
.nx-project-card:hover { box-shadow: var(--nx-shadow-lg); border-color: var(--nx-border-secondary); }
.nx-project-card-cover { height: 120px; background: linear-gradient(135deg, var(--nx-accent-primary-subtle), var(--nx-accent-primary-muted)); position: relative; }
.nx-project-card-cover-icon { position: absolute; bottom: var(--nx-space-4); left: var(--nx-space-4); width: 2.5rem; height: 2.5rem; background: var(--nx-bg-elevated); border-radius: var(--nx-radius-lg); display: flex; align-items: center; justify-content: center; font-size: var(--nx-font-size-lg); box-shadow: var(--nx-shadow-md); }
.nx-project-card-body { padding: var(--nx-space-4); flex: 1; }
.nx-project-card-name { font-size: var(--nx-font-size-base); font-weight: var(--nx-font-weight-semibold); color: var(--nx-text-primary); margin-bottom: var(--nx-space-1); }
.nx-project-card-desc { font-size: var(--nx-font-size-xs); color: var(--nx-text-secondary); line-height: var(--nx-line-height-relaxed); margin-bottom: var(--nx-space-3); }
.nx-project-card-meta { display: flex; align-items: center; justify-content: space-between; }
.nx-project-card-stats { display: flex; gap: var(--nx-space-4); font-size: var(--nx-font-size-xs); color: var(--nx-text-tertiary); }
.nx-project-card-stat { display: flex; align-items: center; gap: var(--nx-space-1); }
.nx-timeline { position: relative; padding-left: var(--nx-space-8); }
.nx-timeline::before { content: ''; position: absolute; left: 11px; top: 0; bottom: 0; width: 2px; background: var(--nx-border-primary); }
.nx-timeline-item { position: relative; padding-bottom: var(--nx-space-6); }
.nx-timeline-item:last-child { padding-bottom: 0; }
.nx-timeline-dot { position: absolute; left: calc(var(--nx-space-8) * -1 + 4px); top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--nx-bg-elevated); border: 2px solid var(--nx-accent-primary); z-index: 1; }
.nx-timeline-dot-complete { background: var(--nx-accent-primary); }
.nx-timeline-time { font-size: var(--nx-font-size-xs); color: var(--nx-text-tertiary); margin-bottom: var(--nx-space-1); }
.nx-timeline-title { font-size: var(--nx-font-size-sm); font-weight: var(--nx-font-weight-medium); color: var(--nx-text-primary); }
.nx-timeline-desc { font-size: var(--nx-font-size-xs); color: var(--nx-text-secondary); margin-top: var(--nx-space-1); }
.nx-activity-feed { display: flex; flex-direction: column; gap: var(--nx-space-4); }
.nx-activity-item { display: flex; gap: var(--nx-space-3); }
.nx-activity-icon { width: 2rem; height: 2rem; border-radius: var(--nx-radius-full); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: var(--nx-font-size-xs); }
.nx-activity-icon-create { background: var(--nx-status-success-bg); color: var(--nx-status-success); }
.nx-activity-icon-update { background: var(--nx-status-info-bg); color: var(--nx-status-info); }
.nx-activity-icon-delete { background: var(--nx-status-error-bg); color: var(--nx-status-error); }
.nx-activity-icon-comment { background: var(--nx-accent-primary-subtle); color: var(--nx-accent-primary); }
.nx-activity-content { flex: 1; min-width: 0; }
.nx-activity-text { font-size: var(--nx-font-size-sm); color: var(--nx-text-primary); line-height: var(--nx-line-height-relaxed); }
.nx-activity-text strong { font-weight: var(--nx-font-weight-semibold); }
.nx-activity-time { font-size: var(--nx-font-size-xs); color: var(--nx-text-tertiary); margin-top: var(--nx-space-1); }
.nx-filter-bar { display: flex; align-items: center; gap: var(--nx-space-3); padding: var(--nx-space-3) var(--nx-space-4); background: var(--nx-bg-elevated); border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-xl); flex-wrap: wrap; }
.nx-filter-chip { display: inline-flex; align-items: center; gap: var(--nx-space-2); padding: var(--nx-space-1) var(--nx-space-3); background: var(--nx-bg-secondary); border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-full); font-size: var(--nx-font-size-xs); color: var(--nx-text-secondary); cursor: pointer; transition: all var(--nx-transition-fast); }
.nx-filter-chip:hover { border-color: var(--nx-border-secondary); color: var(--nx-text-primary); }
.nx-filter-chip-active { background: var(--nx-accent-primary-subtle); border-color: var(--nx-accent-primary); color: var(--nx-accent-primary); }
.nx-filter-chip-remove { display: flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; border-radius: 50%; background: transparent; border: none; color: inherit; cursor: pointer; opacity: 0.6; }
.nx-filter-chip-remove:hover { opacity: 1; background: var(--nx-accent-primary-muted); }
.nx-view-toggle { display: inline-flex; background: var(--nx-bg-secondary); border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-lg); padding: 2px; }
.nx-view-toggle-btn { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border: none; background: transparent; color: var(--nx-text-tertiary); border-radius: var(--nx-radius-md); cursor: pointer; transition: all var(--nx-transition-fast); }
.nx-view-toggle-btn:hover { color: var(--nx-text-secondary); }
.nx-view-toggle-btn-active { background: var(--nx-bg-elevated); color: var(--nx-text-primary); box-shadow: var(--nx-shadow-sm); }
.nx-milestone { display: flex; align-items: center; gap: var(--nx-space-3); padding: var(--nx-space-3) var(--nx-space-4); background: var(--nx-bg-secondary); border-left: 3px solid var(--nx-accent-primary); border-radius: 0 var(--nx-radius-lg) var(--nx-radius-lg) 0; }
.nx-milestone-date { font-size: var(--nx-font-size-xs); font-weight: var(--nx-font-weight-semibold); color: var(--nx-accent-primary); white-space: nowrap; }
.nx-milestone-title { font-size: var(--nx-font-size-sm); font-weight: var(--nx-font-weight-medium); color: var(--nx-text-primary); }
.nx-milestone-complete { border-left-color: var(--nx-status-success); opacity: 0.7; }
.nx-milestone-complete .nx-milestone-date { color: var(--nx-status-success); }

/* --------------------------------------------------------------------------
   38. Accessibility & Focus
   -------------------------------------------------------------------------- */
.nx-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; }
.nx-not-sr-only { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; }
.nx-focus-ring:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--nx-accent-primary-muted); }
.nx-skip-link { position: absolute; top: -100%; left: var(--nx-space-4); padding: var(--nx-space-2) var(--nx-space-4); background: var(--nx-accent-primary); color: #FFFFFF; border-radius: var(--nx-radius-md); z-index: 9999; font-size: var(--nx-font-size-sm); }
.nx-skip-link:focus { top: var(--nx-space-4); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
@media (prefers-contrast: high) {
  .nx-btn-primary { border: 2px solid currentColor; }
  .nx-card { border-width: 2px; }
  .nx-input, .nx-textarea, .nx-select { border-width: 2px; }
}

/* --------------------------------------------------------------------------
   39. Print Styles
   -------------------------------------------------------------------------- */
@media print {
  .nx-sidebar, .nx-topbar, .nx-bottom-nav, .nx-ai-chat-fab, .nx-ai-chat-panel, .nx-toast-container { display: none !important; }
  .nx-main-with-sidebar { margin-left: 0 !important; }
  .nx-content { padding: 0; max-width: none; }
  .nx-card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .nx-btn { display: none; }
  body { background: white; color: black; font-size: 12pt; }
  a { text-decoration: underline; color: black; }
  .nx-table { font-size: 10pt; }
  .nx-kanban { display: block; overflow: visible; }
  .nx-kanban-column { break-inside: avoid; margin-bottom: 1rem; width: 100%; }
}


/* --------------------------------------------------------------------------
   40. Extended Utility Classes
   -------------------------------------------------------------------------- */
.nx-w-auto { width: auto; }
.nx-w-full { width: 100%; }
.nx-w-screen { width: 100vw; }
.nx-w-min { width: min-content; }
.nx-w-max { width: max-content; }
.nx-w-fit { width: fit-content; }
.nx-h-auto { height: auto; }
.nx-h-full { height: 100%; }
.nx-h-screen { height: 100vh; }
.nx-max-w-xs { max-width: 20rem; }
.nx-max-w-sm { max-width: 24rem; }
.nx-max-w-md { max-width: 28rem; }
.nx-max-w-lg { max-width: 32rem; }
.nx-max-w-xl { max-width: 36rem; }
.nx-max-w-2xl { max-width: 42rem; }
.nx-max-w-3xl { max-width: 48rem; }
.nx-max-w-4xl { max-width: 56rem; }
.nx-max-w-5xl { max-width: 64rem; }
.nx-max-w-6xl { max-width: 72rem; }
.nx-max-w-7xl { max-width: 80rem; }
.nx-max-w-full { max-width: 100%; }
.nx-max-w-prose { max-width: 65ch; }
.nx-opacity-0 { opacity: 0.0; }
.nx-opacity-5 { opacity: 0.05; }
.nx-opacity-10 { opacity: 0.1; }
.nx-opacity-20 { opacity: 0.2; }
.nx-opacity-25 { opacity: 0.25; }
.nx-opacity-30 { opacity: 0.3; }
.nx-opacity-40 { opacity: 0.4; }
.nx-opacity-50 { opacity: 0.5; }
.nx-opacity-60 { opacity: 0.6; }
.nx-opacity-70 { opacity: 0.7; }
.nx-opacity-75 { opacity: 0.75; }
.nx-opacity-80 { opacity: 0.8; }
.nx-opacity-90 { opacity: 0.9; }
.nx-opacity-95 { opacity: 0.95; }
.nx-opacity-100 { opacity: 1.0; }
.nx-cursor-auto { cursor: auto; }
.nx-cursor-default { cursor: default; }
.nx-cursor-pointer { cursor: pointer; }
.nx-cursor-wait { cursor: wait; }
.nx-cursor-text { cursor: text; }
.nx-cursor-move { cursor: move; }
.nx-cursor-not-allowed { cursor: not-allowed; }
.nx-cursor-grab { cursor: grab; }
.nx-cursor-grabbing { cursor: grabbing; }
.nx-pointer-events-none { pointer-events: none; }
.nx-pointer-events-auto { pointer-events: auto; }
.nx-select-none { user-select: none; }
.nx-select-text { user-select: text; }
.nx-select-all { user-select: all; }
.nx-select-auto { user-select: auto; }
.nx-object-contain { object-fit: contain; }
.nx-object-cover { object-fit: cover; }
.nx-object-fill { object-fit: fill; }
.nx-object-none { object-fit: none; }
.nx-object-scale-down { object-fit: scale-down; }
.nx-aspect-square { aspect-ratio: 1/1; }
.nx-aspect-video { aspect-ratio: 16/9; }
.nx-aspect-photo { aspect-ratio: 4/3; }
.nx-z-0 { z-index: 0; }
.nx-z-10 { z-index: 10; }
.nx-z-20 { z-index: 20; }
.nx-z-30 { z-index: 30; }
.nx-z-40 { z-index: 40; }
.nx-z-50 { z-index: 50; }
.nx-order-0 { order: 0; }
.nx-order-1 { order: 1; }
.nx-order-2 { order: 2; }
.nx-order-3 { order: 3; }
.nx-order-4 { order: 4; }
.nx-order-5 { order: 5; }
.nx-grow { flex-grow: 1; }
.nx-grow-0 { flex-grow: 0; }
.nx-shrink { flex-shrink: 1; }
.nx-shrink-0 { flex-shrink: 0; }
.nx-bg-primary { background-color: var(--nx-bg-primary); }
.nx-bg-secondary { background-color: var(--nx-bg-secondary); }
.nx-bg-tertiary { background-color: var(--nx-bg-tertiary); }
.nx-bg-elevated { background-color: var(--nx-bg-elevated); }
.nx-bg-accent-subtle { background-color: var(--nx-accent-primary-subtle); }
.nx-bg-transparent { background-color: transparent; }
.nx-border-0 { border-width: 0px; }
.nx-border-1 { border-width: 1px; }
.nx-border-2 { border-width: 2px; }
.nx-border-4 { border-width: 4px; }
.nx-line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.nx-line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nx-line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nx-line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.nx-line-clamp-5 { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.nx-line-clamp-6 { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }

/* --------------------------------------------------------------------------
   41. Extended Component States
   -------------------------------------------------------------------------- */
.nx-is-loading { pointer-events: none; opacity: 0.7; }
.nx-is-disabled { opacity: 0.5; pointer-events: none; cursor: not-allowed; }
.nx-is-active { background: var(--nx-accent-primary-subtle); color: var(--nx-accent-primary); }
.nx-is-selected { background: var(--nx-accent-primary-subtle); border-color: var(--nx-accent-primary); }
.nx-is-dragging { opacity: 0.5; cursor: grabbing; }
.nx-is-dropped { animation: nx-scale-in var(--nx-transition-fast) ease-out; }
.nx-is-expanded { max-height: none; overflow: visible; }
.nx-is-collapsed { max-height: 0; overflow: hidden; }
.nx-is-visible { opacity: 1; visibility: visible; }
.nx-is-hidden { opacity: 0; visibility: hidden; }
.nx-is-sticky { position: sticky; top: 0; z-index: var(--nx-z-sticky); }
.nx-is-fixed { position: fixed; }
.nx-is-scrolling { box-shadow: var(--nx-shadow-md); }
.nx-group:hover .nx-group-hover-visible { opacity: 1; visibility: visible; }
.nx-group .nx-group-hover-hidden { opacity: 0; visibility: hidden; transition: all var(--nx-transition-fast); }
.nx-group:hover .nx-group-hover-hidden { opacity: 1; visibility: visible; }
.nx-group:hover .nx-group-hover-scale { transform: scale(1.05); }
.nx-group:hover .nx-group-hover-translate { transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   42. Notification & Status Indicators
   -------------------------------------------------------------------------- */
.nx-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.nx-status-dot-online { background: var(--nx-status-success); box-shadow: 0 0 0 2px var(--nx-bg-primary), 0 0 0 4px rgba(5,150,105,0.3); }
.nx-status-dot-offline { background: var(--nx-text-tertiary); }
.nx-status-dot-busy { background: var(--nx-status-error); }
.nx-status-dot-away { background: var(--nx-status-warning); }
.nx-status-indicator { display: inline-flex; align-items: center; gap: var(--nx-space-2); font-size: var(--nx-font-size-xs); color: var(--nx-text-secondary); }
.nx-notification-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 var(--nx-space-1); background: var(--nx-status-error); color: #FFFFFF; font-size: 0.625rem; font-weight: var(--nx-font-weight-bold); border-radius: var(--nx-radius-full); }
.nx-notification-badge-dot { width: 8px; height: 8px; min-width: 8px; padding: 0; }
.nx-unread-indicator { position: relative; }
.nx-unread-indicator::after { content: ''; position: absolute; top: 0; right: 0; width: 8px; height: 8px; background: var(--nx-accent-primary); border-radius: 50%; border: 2px solid var(--nx-bg-elevated); }
.nx-live-indicator { display: inline-flex; align-items: center; gap: var(--nx-space-1); font-size: var(--nx-font-size-xs); font-weight: var(--nx-font-weight-medium); color: var(--nx-status-error); text-transform: uppercase; letter-spacing: var(--nx-letter-spacing-wider); }
.nx-live-indicator::before { content: ''; width: 6px; height: 6px; background: var(--nx-status-error); border-radius: 50%; animation: nx-pulse 1.5s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   43. Calendar & Date Components
   -------------------------------------------------------------------------- */
.nx-calendar { background: var(--nx-bg-elevated); border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-xl); padding: var(--nx-space-4); }
.nx-calendar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--nx-space-4); }
.nx-calendar-title { font-size: var(--nx-font-size-base); font-weight: var(--nx-font-weight-semibold); color: var(--nx-text-primary); }
.nx-calendar-nav { display: flex; gap: var(--nx-space-1); }
.nx-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--nx-space-1); }
.nx-calendar-day-name { text-align: center; font-size: var(--nx-font-size-xs); font-weight: var(--nx-font-weight-medium); color: var(--nx-text-tertiary); padding: var(--nx-space-2); }
.nx-calendar-day { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; font-size: var(--nx-font-size-sm); color: var(--nx-text-primary); border-radius: var(--nx-radius-lg); cursor: pointer; transition: all var(--nx-transition-fast); border: none; background: transparent; }
.nx-calendar-day:hover { background: var(--nx-bg-tertiary); }
.nx-calendar-day-today { background: var(--nx-accent-primary-subtle); color: var(--nx-accent-primary); font-weight: var(--nx-font-weight-semibold); }
.nx-calendar-day-selected { background: var(--nx-accent-primary); color: #FFFFFF; }
.nx-calendar-day-other { color: var(--nx-text-tertiary); }
.nx-calendar-day-disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }
.nx-date-picker { position: relative; }
.nx-date-picker-dropdown { position: absolute; top: calc(100% + var(--nx-space-1)); left: 0; z-index: var(--nx-z-dropdown); }

/* --------------------------------------------------------------------------
   44. File Upload Components
   -------------------------------------------------------------------------- */
.nx-upload { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--nx-space-8); border: 2px dashed var(--nx-border-secondary); border-radius: var(--nx-radius-xl); background: var(--nx-bg-secondary); cursor: pointer; transition: all var(--nx-transition-fast); text-align: center; }
.nx-upload:hover { border-color: var(--nx-accent-primary); background: var(--nx-accent-primary-subtle); }
.nx-upload-dragover { border-color: var(--nx-accent-primary); background: var(--nx-accent-primary-subtle); transform: scale(1.01); }
.nx-upload-icon { width: 3rem; height: 3rem; color: var(--nx-text-tertiary); margin-bottom: var(--nx-space-3); }
.nx-upload-text { font-size: var(--nx-font-size-sm); color: var(--nx-text-secondary); }
.nx-upload-text strong { color: var(--nx-accent-primary); font-weight: var(--nx-font-weight-medium); }
.nx-upload-hint { font-size: var(--nx-font-size-xs); color: var(--nx-text-tertiary); margin-top: var(--nx-space-2); }
.nx-file-list { display: flex; flex-direction: column; gap: var(--nx-space-2); margin-top: var(--nx-space-4); }
.nx-file-item { display: flex; align-items: center; gap: var(--nx-space-3); padding: var(--nx-space-3); background: var(--nx-bg-secondary); border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-lg); }
.nx-file-icon { width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; background: var(--nx-accent-primary-subtle); color: var(--nx-accent-primary); border-radius: var(--nx-radius-md); flex-shrink: 0; }
.nx-file-info { flex: 1; min-width: 0; }
.nx-file-name { font-size: var(--nx-font-size-sm); font-weight: var(--nx-font-weight-medium); color: var(--nx-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-file-size { font-size: var(--nx-font-size-xs); color: var(--nx-text-tertiary); }
.nx-file-progress { width: 100%; margin-top: var(--nx-space-2); }
.nx-file-remove { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border: none; background: transparent; color: var(--nx-text-tertiary); cursor: pointer; border-radius: var(--nx-radius-sm); flex-shrink: 0; }
.nx-file-remove:hover { background: var(--nx-status-error-bg); color: var(--nx-status-error); }

/* --------------------------------------------------------------------------
   45. Settings & Preferences Panel
   -------------------------------------------------------------------------- */
.nx-settings { display: grid; grid-template-columns: 240px 1fr; gap: var(--nx-space-8); min-height: 500px; }
.nx-settings-nav { display: flex; flex-direction: column; gap: var(--nx-space-1); }
.nx-settings-nav-item { display: flex; align-items: center; gap: var(--nx-space-3); padding: var(--nx-space-2) var(--nx-space-3); font-size: var(--nx-font-size-sm); color: var(--nx-text-secondary); border-radius: var(--nx-radius-lg); cursor: pointer; transition: all var(--nx-transition-fast); border: none; background: transparent; text-align: left; }
.nx-settings-nav-item:hover { background: var(--nx-bg-tertiary); color: var(--nx-text-primary); }
.nx-settings-nav-item-active { background: var(--nx-accent-primary-subtle); color: var(--nx-accent-primary); font-weight: var(--nx-font-weight-medium); }
.nx-settings-section { margin-bottom: var(--nx-space-8); }
.nx-settings-section-title { font-size: var(--nx-font-size-lg); font-weight: var(--nx-font-weight-semibold); color: var(--nx-text-primary); margin-bottom: var(--nx-space-1); }
.nx-settings-section-desc { font-size: var(--nx-font-size-sm); color: var(--nx-text-secondary); margin-bottom: var(--nx-space-6); }
.nx-settings-row { display: flex; align-items: center; justify-content: space-between; padding: var(--nx-space-4) 0; border-bottom: 1px solid var(--nx-border-subtle); gap: var(--nx-space-4); }
.nx-settings-row:last-child { border-bottom: none; }
.nx-settings-row-label { flex: 1; }
.nx-settings-row-title { font-size: var(--nx-font-size-sm); font-weight: var(--nx-font-weight-medium); color: var(--nx-text-primary); }
.nx-settings-row-desc { font-size: var(--nx-font-size-xs); color: var(--nx-text-tertiary); margin-top: var(--nx-space-1); }
.nx-theme-picker { display: flex; gap: var(--nx-space-3); }
.nx-theme-option { display: flex; flex-direction: column; align-items: center; gap: var(--nx-space-2); padding: var(--nx-space-3); border: 2px solid var(--nx-border-primary); border-radius: var(--nx-radius-xl); cursor: pointer; transition: all var(--nx-transition-fast); background: transparent; }
.nx-theme-option:hover { border-color: var(--nx-border-secondary); }
.nx-theme-option-active { border-color: var(--nx-accent-primary); background: var(--nx-accent-primary-subtle); }
.nx-theme-preview { width: 4rem; height: 3rem; border-radius: var(--nx-radius-md); overflow: hidden; display: flex; }
.nx-theme-preview-light { background: #FFFFFF; border: 1px solid #E2E8F0; }
.nx-theme-preview-dark { background: #0F172A; border: 1px solid #334155; }
.nx-accent-picker { display: flex; gap: var(--nx-space-2); flex-wrap: wrap; }
.nx-accent-option { width: 2rem; height: 2rem; border-radius: var(--nx-radius-full); cursor: pointer; border: 2px solid transparent; transition: all var(--nx-transition-fast); }
.nx-accent-option:hover { transform: scale(1.1); }
.nx-accent-option-active { border-color: var(--nx-text-primary); box-shadow: 0 0 0 2px var(--nx-bg-primary), 0 0 0 4px currentColor; }
.nx-accent-option-blue { background: #2563EB; color: #2563EB; }
.nx-accent-option-violet { background: #7C3AED; color: #7C3AED; }
.nx-accent-option-emerald { background: #059669; color: #059669; }
.nx-accent-option-rose { background: #E11D48; color: #E11D48; }
.nx-accent-option-amber { background: #D97706; color: #D97706; }

@media (max-width: 767px) {
  .nx-settings { grid-template-columns: 1fr; }
  .nx-settings-nav { flex-direction: row; overflow-x: auto; padding-bottom: var(--nx-space-2); -webkit-overflow-scrolling: touch; }
  .nx-settings-nav-item { white-space: nowrap; flex-shrink: 0; }
  .nx-theme-accent-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}

/* Theme accent picker */
.nx-theme-accent-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--nx-space-3); max-width: 280px; }
.nx-theme-accent-swatch { width: 100%; aspect-ratio: 1; border: 2px solid transparent; border-radius: var(--nx-radius-full); cursor: pointer; transition: transform var(--nx-transition-fast), box-shadow var(--nx-transition-fast); padding: 0; }
.nx-theme-accent-swatch:hover { transform: scale(1.08); }
.nx-theme-accent-swatch-active { border-color: var(--nx-text-primary); box-shadow: 0 0 0 3px var(--nx-bg-primary), 0 0 0 5px var(--nx-accent-primary); }

/* Settings forms */
.nx-settings-form .nx-label,
.nx-settings-appearance .nx-label,
.nx-settings-content form .nx-label { display: block; margin-bottom: var(--nx-space-2); }
.nx-settings-form .nx-input,
.nx-settings-form .nx-select,
.nx-settings-content form .nx-input,
.nx-settings-content form .nx-select { margin-bottom: var(--nx-space-4); }
.nx-checkbox-label { cursor: pointer; user-select: none; }
.nx-checkbox-label input { width: 1rem; height: 1rem; accent-color: var(--nx-accent-primary); }

/* --------------------------------------------------------------------------
   Inbox
   -------------------------------------------------------------------------- */
.nx-page-inbox .nx-page-header { margin-bottom: var(--nx-space-6); }
.nx-inbox-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nx-space-6); }
.nx-inbox-section { min-width: 0; }
.nx-inbox-section .nx-section-title { font-size: var(--nx-font-size-lg); font-weight: var(--nx-font-weight-semibold); color: var(--nx-text-primary); display: flex; align-items: center; gap: var(--nx-space-2); }
.nx-inbox-list { padding: 0; overflow: hidden; }
.nx-inbox-item { display: block; padding: var(--nx-space-4); border-bottom: 1px solid var(--nx-border-subtle); cursor: pointer; transition: background var(--nx-transition-fast); }
.nx-inbox-item:last-child { border-bottom: none; }
.nx-inbox-item:hover { background: var(--nx-bg-secondary); }
.nx-inbox-item-unread { background: var(--nx-accent-primary-subtle); }
.nx-inbox-item-unread:hover { background: var(--nx-accent-primary-muted); }
.nx-inbox-item-main { align-items: flex-start; }
.nx-inbox-item-message { font-size: var(--nx-font-size-sm); color: var(--nx-text-primary); line-height: var(--nx-line-height-relaxed); margin: 0; }
.nx-inbox-item-meta { flex-wrap: wrap; }
.nx-inbox-item-icon { width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; background: var(--nx-bg-tertiary); border-radius: var(--nx-radius-full); color: var(--nx-text-tertiary); flex-shrink: 0; }
.nx-inbox-unread-dot { width: 0.5rem; height: 0.5rem; background: var(--nx-accent-primary); border-radius: var(--nx-radius-full); flex-shrink: 0; margin-top: var(--nx-space-2); }

@media (max-width: 1023px) {
  .nx-inbox-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .nx-inbox-item { padding: var(--nx-space-3); }
  .nx-inbox-section .nx-flex.nx-items-center.nx-justify-between { flex-direction: column; align-items: flex-start; gap: var(--nx-space-2); }
}

/* --------------------------------------------------------------------------
   46. Onboarding & Welcome Components
   -------------------------------------------------------------------------- */
.nx-onboarding { display: flex; flex-direction: column; align-items: center; max-width: 32rem; margin: 0 auto; padding: var(--nx-space-8); text-align: center; }
.nx-onboarding-progress { display: flex; align-items: center; gap: var(--nx-space-2); margin-bottom: var(--nx-space-8); width: 100%; }
.nx-onboarding-step { flex: 1; height: 4px; background: var(--nx-bg-tertiary); border-radius: var(--nx-radius-full); overflow: hidden; }
.nx-onboarding-step-complete { background: var(--nx-accent-primary); }
.nx-onboarding-step-current { background: linear-gradient(90deg, var(--nx-accent-primary) 60%, var(--nx-bg-tertiary) 60%); }
.nx-onboarding-icon { width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--nx-accent-primary-subtle), var(--nx-accent-primary-muted)); border-radius: var(--nx-radius-2xl); color: var(--nx-accent-primary); margin-bottom: var(--nx-space-6); }
.nx-onboarding-title { font-size: var(--nx-font-size-2xl); font-weight: var(--nx-font-weight-bold); color: var(--nx-text-primary); margin-bottom: var(--nx-space-3); }
.nx-onboarding-desc { font-size: var(--nx-font-size-base); color: var(--nx-text-secondary); line-height: var(--nx-line-height-relaxed); margin-bottom: var(--nx-space-8); }
.nx-onboarding-actions { display: flex; gap: var(--nx-space-3); width: 100%; justify-content: center; }
.nx-welcome-banner { display: flex; align-items: center; gap: var(--nx-space-4); padding: var(--nx-space-4) var(--nx-space-6); background: linear-gradient(135deg, var(--nx-accent-primary-subtle), transparent); border: 1px solid var(--nx-accent-primary-muted); border-radius: var(--nx-radius-xl); margin-bottom: var(--nx-space-6); }
.nx-welcome-banner-icon { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; background: var(--nx-accent-primary); color: #FFFFFF; border-radius: var(--nx-radius-lg); flex-shrink: 0; }
.nx-welcome-banner-content { flex: 1; }
.nx-welcome-banner-title { font-size: var(--nx-font-size-sm); font-weight: var(--nx-font-weight-semibold); color: var(--nx-text-primary); }
.nx-welcome-banner-text { font-size: var(--nx-font-size-xs); color: var(--nx-text-secondary); margin-top: var(--nx-space-1); }
.nx-welcome-banner-dismiss { background: none; border: none; color: var(--nx-text-tertiary); cursor: pointer; padding: var(--nx-space-1); border-radius: var(--nx-radius-sm); }
.nx-welcome-banner-dismiss:hover { color: var(--nx-text-primary); background: var(--nx-bg-tertiary); }

/* --------------------------------------------------------------------------
   47. Search & Filter Results
   -------------------------------------------------------------------------- */
.nx-search-results { display: flex; flex-direction: column; gap: var(--nx-space-1); }
.nx-search-result { display: flex; align-items: center; gap: var(--nx-space-3); width: 100%; padding: var(--nx-space-3) var(--nx-space-4); border: none; background: transparent; border-radius: var(--nx-radius-lg); cursor: pointer; transition: background var(--nx-transition-fast); text-align: left; font: inherit; color: inherit; }
.nx-search-result:hover { background: var(--nx-bg-tertiary); }
.nx-search-result-icon { width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; background: var(--nx-bg-secondary); border-radius: var(--nx-radius-md); color: var(--nx-text-tertiary); flex-shrink: 0; }
.nx-search-result-content { flex: 1; min-width: 0; }
.nx-search-result-title { font-size: var(--nx-font-size-sm); font-weight: var(--nx-font-weight-medium); color: var(--nx-text-primary); }
.nx-search-result-title mark { background: var(--nx-accent-primary-subtle); color: var(--nx-accent-primary); border-radius: 2px; padding: 0 2px; }
.nx-search-result-meta { font-size: var(--nx-font-size-xs); color: var(--nx-text-tertiary); margin-top: 2px; }
.nx-search-result-type { font-size: var(--nx-font-size-xs); color: var(--nx-text-tertiary); background: var(--nx-bg-secondary); padding: 2px var(--nx-space-2); border-radius: var(--nx-radius-sm); flex-shrink: 0; }
.nx-search-empty { padding: var(--nx-space-8); text-align: center; color: var(--nx-text-tertiary); font-size: var(--nx-font-size-sm); }
.nx-search-loading { display: flex; align-items: center; justify-content: center; padding: var(--nx-space-8); gap: var(--nx-space-3); color: var(--nx-text-tertiary); font-size: var(--nx-font-size-sm); }
.nx-search-section { margin-bottom: var(--nx-space-4); }
.nx-search-section-title { padding: var(--nx-space-2) var(--nx-space-4); font-size: var(--nx-font-size-xs); font-weight: var(--nx-font-weight-semibold); color: var(--nx-text-tertiary); text-transform: uppercase; letter-spacing: var(--nx-letter-spacing-wide); }

/* --------------------------------------------------------------------------
   48. Comments & Collaboration
   -------------------------------------------------------------------------- */
.nx-comments { display: flex; flex-direction: column; gap: var(--nx-space-4); }
.nx-comment { display: flex; gap: var(--nx-space-3); }
.nx-comment-avatar { flex-shrink: 0; }
.nx-comment-body { flex: 1; min-width: 0; }
.nx-comment-header { display: flex; align-items: center; gap: var(--nx-space-2); margin-bottom: var(--nx-space-1); }
.nx-comment-author { font-size: var(--nx-font-size-sm); font-weight: var(--nx-font-weight-semibold); color: var(--nx-text-primary); }
.nx-comment-time { font-size: var(--nx-font-size-xs); color: var(--nx-text-tertiary); }
.nx-comment-edited { font-size: var(--nx-font-size-xs); color: var(--nx-text-tertiary); font-style: italic; }
.nx-comment-text { font-size: var(--nx-font-size-sm); color: var(--nx-text-primary); line-height: var(--nx-line-height-relaxed); }
.nx-comment-actions { display: flex; gap: var(--nx-space-3); margin-top: var(--nx-space-2); }
.nx-comment-action { font-size: var(--nx-font-size-xs); color: var(--nx-text-tertiary); background: none; border: none; cursor: pointer; padding: 0; transition: color var(--nx-transition-fast); }
.nx-comment-action:hover { color: var(--nx-text-secondary); }
.nx-comment-replies { margin-left: var(--nx-space-10); margin-top: var(--nx-space-4); padding-left: var(--nx-space-4); border-left: 2px solid var(--nx-border-primary); display: flex; flex-direction: column; gap: var(--nx-space-4); }
.nx-comment-input { display: flex; gap: var(--nx-space-3); align-items: flex-start; }
.nx-comment-input-field { flex: 1; }
.nx-mention { display: inline-flex; align-items: center; padding: 1px var(--nx-space-1); background: var(--nx-accent-primary-subtle); color: var(--nx-accent-primary); border-radius: var(--nx-radius-sm); font-size: var(--nx-font-size-sm); font-weight: var(--nx-font-weight-medium); }
.nx-reaction-bar { display: flex; gap: var(--nx-space-1); flex-wrap: wrap; margin-top: var(--nx-space-2); }
.nx-reaction { display: inline-flex; align-items: center; gap: var(--nx-space-1); padding: 2px var(--nx-space-2); background: var(--nx-bg-secondary); border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-full); font-size: var(--nx-font-size-xs); cursor: pointer; transition: all var(--nx-transition-fast); }
.nx-reaction:hover { border-color: var(--nx-border-secondary); background: var(--nx-bg-tertiary); }
.nx-reaction-active { background: var(--nx-accent-primary-subtle); border-color: var(--nx-accent-primary); color: var(--nx-accent-primary); }
.nx-reaction-emoji { font-size: var(--nx-font-size-sm); }
.nx-reaction-count { font-weight: var(--nx-font-weight-medium); color: var(--nx-text-secondary); }

/* --------------------------------------------------------------------------
   49. Dashboard Widgets
   -------------------------------------------------------------------------- */
.nx-dashboard { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--nx-space-4); }
.nx-widget { background: var(--nx-bg-elevated); border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-xl); overflow: hidden; }
.nx-widget-header { display: flex; align-items: center; justify-content: space-between; padding: var(--nx-space-4) var(--nx-space-5); border-bottom: 1px solid var(--nx-border-primary); }
.nx-widget-title { font-size: var(--nx-font-size-sm); font-weight: var(--nx-font-weight-semibold); color: var(--nx-text-primary); }
.nx-widget-actions { display: flex; gap: var(--nx-space-1); }
.nx-widget-body { padding: var(--nx-space-5); }
.nx-widget-col-3 { grid-column: span 3; }
.nx-widget-col-4 { grid-column: span 4; }
.nx-widget-col-6 { grid-column: span 6; }
.nx-widget-col-8 { grid-column: span 8; }
.nx-widget-col-12 { grid-column: span 12; }
.nx-widget-metric { text-align: center; padding: var(--nx-space-4); }
.nx-widget-metric-value { font-size: var(--nx-font-size-3xl); font-weight: var(--nx-font-weight-bold); color: var(--nx-text-primary); line-height: 1; }
.nx-widget-metric-label { font-size: var(--nx-font-size-xs); color: var(--nx-text-secondary); margin-top: var(--nx-space-2); text-transform: uppercase; letter-spacing: var(--nx-letter-spacing-wide); }
.nx-widget-list { display: flex; flex-direction: column; }
.nx-widget-list-item { display: flex; align-items: center; gap: var(--nx-space-3); padding: var(--nx-space-3) 0; border-bottom: 1px solid var(--nx-border-subtle); }
.nx-widget-list-item:last-child { border-bottom: none; }
.nx-quick-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--nx-space-3); }
.nx-quick-action { display: flex; flex-direction: column; align-items: center; gap: var(--nx-space-2); padding: var(--nx-space-4); background: var(--nx-bg-secondary); border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-xl); cursor: pointer; transition: all var(--nx-transition-fast); text-decoration: none; }
.nx-quick-action:hover { border-color: var(--nx-accent-primary-muted); background: var(--nx-accent-primary-subtle); transform: translateY(-2px); box-shadow: var(--nx-shadow-md); }
.nx-quick-action-icon { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; background: var(--nx-bg-elevated); border-radius: var(--nx-radius-lg); color: var(--nx-accent-primary); }
.nx-quick-action-label { font-size: var(--nx-font-size-xs); font-weight: var(--nx-font-weight-medium); color: var(--nx-text-primary); text-align: center; }

@media (max-width: 1023px) {
  .nx-dashboard { grid-template-columns: repeat(6, 1fr); }
  .nx-widget-col-3, .nx-widget-col-4 { grid-column: span 3; }
  .nx-widget-col-6, .nx-widget-col-8 { grid-column: span 6; }
}
@media (max-width: 639px) {
  .nx-dashboard { grid-template-columns: 1fr; }
  .nx-widget-col-3, .nx-widget-col-4, .nx-widget-col-6, .nx-widget-col-8, .nx-widget-col-12 { grid-column: span 1; }
}

/* --------------------------------------------------------------------------
   50. Keyboard Shortcuts Reference
   -------------------------------------------------------------------------- */
.nx-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 var(--nx-space-2); font-family: var(--nx-font-family-mono); font-size: var(--nx-font-size-xs); color: var(--nx-text-secondary); background: var(--nx-bg-tertiary); border: 1px solid var(--nx-border-primary); border-bottom-width: 2px; border-radius: var(--nx-radius-sm); box-shadow: var(--nx-shadow-xs); }
.nx-kbd-group { display: inline-flex; align-items: center; gap: var(--nx-space-1); }
.nx-kbd-separator { color: var(--nx-text-tertiary); font-size: var(--nx-font-size-xs); }
.nx-shortcuts-list { display: flex; flex-direction: column; gap: var(--nx-space-2); }
.nx-shortcut-row { display: flex; align-items: center; justify-content: space-between; padding: var(--nx-space-2) var(--nx-space-3); border-radius: var(--nx-radius-md); }
.nx-shortcut-row:hover { background: var(--nx-bg-secondary); }
.nx-shortcut-label { font-size: var(--nx-font-size-sm); color: var(--nx-text-primary); }
.nx-shortcut-keys { display: flex; gap: var(--nx-space-1); }

/* --------------------------------------------------------------------------
   51. AI Feature Components
   -------------------------------------------------------------------------- */
.nx-ai-badge { display: inline-flex; align-items: center; gap: var(--nx-space-1); padding: 2px var(--nx-space-2); background: linear-gradient(135deg, var(--nx-accent-primary-subtle), var(--nx-accent-primary-muted)); color: var(--nx-accent-primary); border-radius: var(--nx-radius-full); font-size: var(--nx-font-size-xs); font-weight: var(--nx-font-weight-medium); }
.nx-ai-badge-icon { width: 0.875rem; height: 0.875rem; }
.nx-ai-insight { display: flex; gap: var(--nx-space-3); padding: var(--nx-space-4); background: linear-gradient(135deg, var(--nx-accent-primary-subtle), transparent); border: 1px solid var(--nx-accent-primary-muted); border-radius: var(--nx-radius-xl); margin-bottom: var(--nx-space-4); }
.nx-ai-insight-icon { width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; background: var(--nx-accent-primary); color: #FFFFFF; border-radius: var(--nx-radius-lg); flex-shrink: 0; }
.nx-ai-insight-content { flex: 1; }
.nx-ai-insight-title { font-size: var(--nx-font-size-sm); font-weight: var(--nx-font-weight-semibold); color: var(--nx-text-primary); margin-bottom: var(--nx-space-1); }
.nx-ai-insight-text { font-size: var(--nx-font-size-sm); color: var(--nx-text-secondary); line-height: var(--nx-line-height-relaxed); }
.nx-ai-insight-actions { display: flex; gap: var(--nx-space-2); margin-top: var(--nx-space-3); }
.nx-ai-generate { position: relative; }
.nx-ai-generate-btn { display: inline-flex; align-items: center; gap: var(--nx-space-2); padding: var(--nx-space-2) var(--nx-space-3); background: linear-gradient(135deg, var(--nx-accent-primary), var(--nx-accent-secondary)); color: #FFFFFF; border: none; border-radius: var(--nx-radius-lg); font-size: var(--nx-font-size-sm); font-weight: var(--nx-font-weight-medium); cursor: pointer; transition: all var(--nx-transition-fast); }
.nx-ai-generate-btn:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: var(--nx-shadow-md); }
.nx-ai-generate-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.nx-ai-summary { padding: var(--nx-space-4); background: var(--nx-bg-secondary); border-left: 3px solid var(--nx-accent-primary); border-radius: 0 var(--nx-radius-lg) var(--nx-radius-lg) 0; }
.nx-ai-summary-label { font-size: var(--nx-font-size-xs); font-weight: var(--nx-font-weight-semibold); color: var(--nx-accent-primary); text-transform: uppercase; letter-spacing: var(--nx-letter-spacing-wide); margin-bottom: var(--nx-space-2); }
.nx-ai-summary-text { font-size: var(--nx-font-size-sm); color: var(--nx-text-primary); line-height: var(--nx-line-height-relaxed); }
.nx-ai-priority-score { display: inline-flex; align-items: center; gap: var(--nx-space-1); padding: var(--nx-space-1) var(--nx-space-2); background: var(--nx-bg-tertiary); border-radius: var(--nx-radius-md); font-size: var(--nx-font-size-xs); font-weight: var(--nx-font-weight-medium); }
.nx-ai-priority-score-high { background: var(--nx-status-error-bg); color: var(--nx-status-error); }
.nx-ai-priority-score-medium { background: var(--nx-status-warning-bg); color: var(--nx-status-warning); }
.nx-ai-priority-score-low { background: var(--nx-status-success-bg); color: var(--nx-status-success); }
.nx-ai-suggestion-card { display: flex; align-items: flex-start; gap: var(--nx-space-3); padding: var(--nx-space-3); border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-lg); cursor: pointer; transition: all var(--nx-transition-fast); }
.nx-ai-suggestion-card:hover { border-color: var(--nx-accent-primary-muted); background: var(--nx-accent-primary-subtle); }
.nx-ai-suggestion-icon { color: var(--nx-accent-primary); flex-shrink: 0; margin-top: 2px; }
.nx-ai-suggestion-text { font-size: var(--nx-font-size-sm); color: var(--nx-text-primary); line-height: var(--nx-line-height-relaxed); }

/* --------------------------------------------------------------------------
   52. Team & Workspace Components
   -------------------------------------------------------------------------- */
.nx-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--nx-space-4); }
.nx-team-member { display: flex; align-items: center; gap: var(--nx-space-3); padding: var(--nx-space-4); background: var(--nx-bg-elevated); border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-xl); transition: all var(--nx-transition-base); }
.nx-team-member:hover { box-shadow: var(--nx-shadow-md); border-color: var(--nx-border-secondary); }
.nx-team-member-info { flex: 1; min-width: 0; }
.nx-team-member-name { font-size: var(--nx-font-size-sm); font-weight: var(--nx-font-weight-semibold); color: var(--nx-text-primary); }
.nx-team-member-role { font-size: var(--nx-font-size-xs); color: var(--nx-text-secondary); margin-top: 2px; }
.nx-team-member-status { font-size: var(--nx-font-size-xs); color: var(--nx-text-tertiary); display: flex; align-items: center; gap: var(--nx-space-1); margin-top: var(--nx-space-1); }
.nx-workspace-switcher { display: flex; align-items: center; gap: var(--nx-space-2); padding: var(--nx-space-2) var(--nx-space-3); background: var(--nx-bg-secondary); border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-lg); cursor: pointer; transition: all var(--nx-transition-fast); }
.nx-workspace-switcher:hover { border-color: var(--nx-border-secondary); background: var(--nx-bg-tertiary); }
.nx-workspace-icon { width: 1.5rem; height: 1.5rem; border-radius: var(--nx-radius-md); background: var(--nx-accent-primary); color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: var(--nx-font-size-xs); font-weight: var(--nx-font-weight-bold); flex-shrink: 0; }
.nx-workspace-name { font-size: var(--nx-font-size-sm); font-weight: var(--nx-font-weight-medium); color: var(--nx-text-primary); }
.nx-workspace-plan { font-size: var(--nx-font-size-xs); color: var(--nx-text-tertiary); }
.nx-invite-form { display: flex; gap: var(--nx-space-2); }
.nx-invite-form .nx-input { flex: 1; }
.nx-role-select { display: inline-flex; align-items: center; gap: var(--nx-space-1); padding: var(--nx-space-1) var(--nx-space-2); background: var(--nx-bg-secondary); border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-md); font-size: var(--nx-font-size-xs); color: var(--nx-text-secondary); cursor: pointer; }
.nx-permission-grid { display: grid; grid-template-columns: 1fr repeat(3, auto); gap: var(--nx-space-2) var(--nx-space-4); align-items: center; font-size: var(--nx-font-size-sm); }
.nx-permission-label { color: var(--nx-text-primary); font-weight: var(--nx-font-weight-medium); }
.nx-permission-header { font-size: var(--nx-font-size-xs); color: var(--nx-text-tertiary); text-align: center; font-weight: var(--nx-font-weight-semibold); text-transform: uppercase; }

/* --------------------------------------------------------------------------
   53. Scroll & Overflow Utilities
   -------------------------------------------------------------------------- */
.nx-scroll-smooth { scroll-behavior: smooth; }
.nx-scroll-snap-x { scroll-snap-type: x mandatory; overflow-x: auto; }
.nx-scroll-snap-y { scroll-snap-type: y mandatory; overflow-y: auto; }
.nx-scroll-snap-start { scroll-snap-align: start; }
.nx-scroll-snap-center { scroll-snap-align: center; }
.nx-scroll-hide { -ms-overflow-style: none; scrollbar-width: none; }
.nx-scroll-hide::-webkit-scrollbar { display: none; }
.nx-scroll-fade-top { mask-image: linear-gradient(to bottom, transparent, black 16px); }
.nx-scroll-fade-bottom { mask-image: linear-gradient(to top, transparent, black 16px); }
.nx-scroll-fade-y { mask-image: linear-gradient(to bottom, transparent, black 16px, black calc(100% - 16px), transparent); }
.nx-sticky-top { position: sticky; top: 0; z-index: var(--nx-z-sticky); }
.nx-sticky-bottom { position: sticky; bottom: 0; z-index: var(--nx-z-sticky); }

/* --------------------------------------------------------------------------
   54. Max-Width Responsive Utilities
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
  .nx-max-sm\:hidden { display: none; }
  .nx-max-sm\:block { display: block; }
  .nx-max-sm\:flex { display: flex; }
  .nx-max-sm\:grid { display: grid; }
  .nx-max-sm\:flex-col { flex-direction: column; }
  .nx-max-sm\:flex-row { flex-direction: row; }
  .nx-max-sm\:w-full { width: 100%; }
  .nx-max-sm\:text-center { text-align: center; }
  .nx-max-sm\:p-4 { padding: var(--nx-space-4); }
  .nx-max-sm\:gap-2 { gap: var(--nx-space-2); }
  .nx-max-sm\:gap-4 { gap: var(--nx-space-4); }
  .nx-max-sm\:order-first { order: -1; }
  .nx-max-sm\:order-last { order: 999; }
}

@media (max-width: 767px) {
  .nx-max-md\:hidden { display: none; }
  .nx-max-md\:block { display: block; }
  .nx-max-md\:flex { display: flex; }
  .nx-max-md\:grid { display: grid; }
  .nx-max-md\:flex-col { flex-direction: column; }
  .nx-max-md\:flex-row { flex-direction: row; }
  .nx-max-md\:w-full { width: 100%; }
  .nx-max-md\:text-center { text-align: center; }
  .nx-max-md\:p-4 { padding: var(--nx-space-4); }
  .nx-max-md\:gap-2 { gap: var(--nx-space-2); }
  .nx-max-md\:gap-4 { gap: var(--nx-space-4); }
  .nx-max-md\:order-first { order: -1; }
  .nx-max-md\:order-last { order: 999; }
}

@media (max-width: 1023px) {
  .nx-max-lg\:hidden { display: none; }
  .nx-max-lg\:block { display: block; }
  .nx-max-lg\:flex { display: flex; }
  .nx-max-lg\:grid { display: grid; }
  .nx-max-lg\:flex-col { flex-direction: column; }
  .nx-max-lg\:flex-row { flex-direction: row; }
  .nx-max-lg\:w-full { width: 100%; }
  .nx-max-lg\:text-center { text-align: center; }
  .nx-max-lg\:p-4 { padding: var(--nx-space-4); }
  .nx-max-lg\:gap-2 { gap: var(--nx-space-2); }
  .nx-max-lg\:gap-4 { gap: var(--nx-space-4); }
  .nx-max-lg\:order-first { order: -1; }
  .nx-max-lg\:order-last { order: 999; }
}

/* --------------------------------------------------------------------------
   55. Utility Combinations & Helpers
   -------------------------------------------------------------------------- */
.nx-center { display: flex; align-items: center; justify-content: center; }
.nx-center-x { display: flex; justify-content: center; }
.nx-center-y { display: flex; align-items: center; }
.nx-stack { display: flex; flex-direction: column; }
.nx-stack-sm { display: flex; flex-direction: column; gap: var(--nx-space-2); }
.nx-stack-md { display: flex; flex-direction: column; gap: var(--nx-space-4); }
.nx-stack-lg { display: flex; flex-direction: column; gap: var(--nx-space-6); }
.nx-cluster { display: flex; flex-wrap: wrap; gap: var(--nx-space-2); align-items: center; }
.nx-cluster-md { display: flex; flex-wrap: wrap; gap: var(--nx-space-4); align-items: center; }
.nx-sidebar-layout { display: flex; min-height: 100vh; }
.nx-split-view { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nx-space-4); height: 100%; }
.nx-split-view-sidebar { display: grid; grid-template-columns: 320px 1fr; gap: 0; height: 100%; border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-xl); overflow: hidden; }
.nx-split-view-sidebar-left { border-right: 1px solid var(--nx-border-primary); overflow-y: auto; background: var(--nx-bg-secondary); }
.nx-split-view-sidebar-main { overflow-y: auto; background: var(--nx-bg-elevated); }
.nx-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.nx-no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.nx-no-scrollbar::-webkit-scrollbar { display: none; }
.nx-text-balance { text-wrap: balance; }
.nx-text-pretty { text-wrap: pretty; }
.nx-break-words { overflow-wrap: break-word; word-break: break-word; }
.nx-break-all { word-break: break-all; }
.nx-whitespace-pre { white-space: pre; }
.nx-whitespace-pre-wrap { white-space: pre-wrap; }
.nx-antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.nx-subpixel-antialiased { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; }
.nx-isolate { isolation: isolate; }
.nx-contain-layout { contain: layout; }
.nx-contain-paint { contain: paint; }
.nx-contain-strict { contain: strict; }
.nx-blur-sm { filter: blur(4px); }
.nx-blur-md { filter: blur(8px); }
.nx-blur-lg { filter: blur(16px); }
.nx-backdrop-blur { backdrop-filter: blur(8px); }
.nx-backdrop-blur-sm { backdrop-filter: blur(4px); }
.nx-backdrop-blur-lg { backdrop-filter: blur(16px); }
.nx-grayscale { filter: grayscale(100%); }
.nx-grayscale-0 { filter: grayscale(0); }
.nx-invert { filter: invert(100%); }
.nx-invert-0 { filter: invert(0); }
.nx-brightness-50 { filter: brightness(0.5); }
.nx-brightness-75 { filter: brightness(0.75); }
.nx-brightness-100 { filter: brightness(1); }
.nx-brightness-125 { filter: brightness(1.25); }
.nx-contrast-more { filter: contrast(1.25); }
.nx-saturate-0 { filter: saturate(0); }
.nx-saturate-100 { filter: saturate(1); }
.nx-saturate-150 { filter: saturate(1.5); }
.nx-hue-rotate-15 { filter: hue-rotate(15deg); }
.nx-hue-rotate-30 { filter: hue-rotate(30deg); }
.nx-hue-rotate-60 { filter: hue-rotate(60deg); }
.nx-hue-rotate-90 { filter: hue-rotate(90deg); }
.nx-hue-rotate-180 { filter: hue-rotate(180deg); }
.nx-drop-shadow-sm { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); }
.nx-drop-shadow-md { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1)); }
.nx-drop-shadow-lg { filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1)); }

@media (max-width: 767px) {
  .nx-split-view { grid-template-columns: 1fr; }
  .nx-split-view-sidebar { grid-template-columns: 1fr; }
  .nx-split-view-sidebar-left { max-height: 200px; border-right: none; border-bottom: 1px solid var(--nx-border-primary); }
}

/* --------------------------------------------------------------------------
   56. Page Layout Components & Responsive Fixes
   -------------------------------------------------------------------------- */
#nexora-app {
  isolation: isolate;
  font-family: var(--nx-font-family-sans);
  color: var(--nx-text-primary);
  -webkit-font-smoothing: antialiased;
}
#nexora-app img:not(.nx-avatar img),
#nexora-app video { max-width: 100%; height: auto; }
#nexora-app .wp-block-post-content,
#nexora-app .entry-content { margin: 0; padding: 0; max-width: none; }
#nexora-app p:empty { display: none; }

.nx-hidden-mobile { display: inline; }
.nx-topbar-search-mobile { display: none; align-items: center; justify-content: center; }

.nx-page-header { gap: var(--nx-space-4); }
.nx-page-actions { flex-shrink: 0; }

.nx-stat-card-icon {
  display: flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: var(--nx-radius-lg);
  background: var(--nx-accent-primary-subtle); color: var(--nx-accent-primary); flex-shrink: 0;
}
.nx-stat-card-body { text-align: right; min-width: 0; }
.nx-dashboard-stats { width: 100%; }

.nx-search-input-wrapper { position: relative; min-width: 0; flex: 1 1 12rem; }
.nx-search-input-wrapper .nx-search-icon { position: absolute; left: var(--nx-space-3); top: 50%; transform: translateY(-50%); color: var(--nx-text-tertiary); pointer-events: none; }
.nx-search-input-wrapper .nx-search-input { width: 100%; padding-left: var(--nx-space-10); }

.nx-section-title {
  font-size: var(--nx-font-size-lg); font-weight: var(--nx-font-weight-semibold);
  color: var(--nx-text-primary); margin-bottom: var(--nx-space-3);
}

.nx-project-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: var(--nx-radius-lg);
  font-size: var(--nx-font-size-sm); flex-shrink: 0;
}
.nx-project-icon-lg { width: 3rem; height: 3rem; font-size: var(--nx-font-size-xl); border-radius: var(--nx-radius-xl); }

.nx-task-list-full .nx-task-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--nx-space-2) var(--nx-space-3);
  padding: var(--nx-space-3) var(--nx-space-4);
  border-bottom: 1px solid var(--nx-border-subtle);
  transition: background var(--nx-transition-fast);
  width: 100%; text-align: left;
}
.nx-task-list-full .nx-task-row:last-child { border-bottom: none; }
.nx-task-list-full .nx-task-row:hover { background: var(--nx-bg-secondary); }
.nx-task-row-main { min-width: 0; flex: 1 1 10rem; }
.nx-task-row-title { font-size: var(--nx-font-size-sm); font-weight: var(--nx-font-weight-medium); color: var(--nx-text-primary); line-height: var(--nx-line-height-snug); }
.nx-task-row-meta { margin-top: 2px; font-family: var(--nx-font-family-mono); }
.nx-task-row-completed .nx-task-row-title { text-decoration: line-through; color: var(--nx-text-tertiary); }
.nx-task-row-check { flex-shrink: 0; }
.nx-task-row-drag { opacity: 0.35; flex-shrink: 0; }
.nx-task-row:hover .nx-task-row-drag { opacity: 1; }
.nx-task-row-priority,
.nx-task-row-status,
.nx-task-row-project,
.nx-task-row-assignee,
.nx-task-row-due { flex-shrink: 0; }
.nx-task-row-project { max-width: 8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-task-row-due { display: inline-flex; align-items: center; gap: var(--nx-space-1); font-size: var(--nx-font-size-xs); white-space: nowrap; }

.nx-card-body.nx-p-0:has(.nx-table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nx-table-full { min-width: 640px; }

.nx-gantt { min-width: 0; }
.nx-gantt-row { display: flex; align-items: center; gap: var(--nx-space-3); min-width: 560px; }
.nx-gantt-label { flex: 0 0 180px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nx-gantt-track { flex: 1 1 auto; min-width: 120px; position: relative; border-radius: var(--nx-radius-lg); background: var(--nx-bg-secondary); }
.nx-gantt-row .nx-gantt-track { height: 36px; }
.nx-gantt-row-task .nx-gantt-track { height: 24px; background: transparent; }
.nx-gantt-date { flex: 0 0 80px; text-align: right; white-space: nowrap; }
.nx-gantt-header { padding-left: calc(180px + var(--nx-space-3)); min-width: 560px; }
.nx-gantt-header > span { flex: 1; }
.nx-gantt-bar { border-radius: var(--nx-radius-md); cursor: pointer; }
.nx-gantt-bar-label { display: flex; align-items: center; height: 100%; color: #fff; white-space: nowrap; overflow: hidden; }

.nx-workload-row { display: flex; align-items: center; gap: var(--nx-space-3); flex-wrap: wrap; }
.nx-workload-member { flex: 0 0 220px; min-width: 0; }
.nx-workload-bar-wrap { flex: 1 1 160px; min-width: 0; }
.nx-workload-bar { height: 28px; background: var(--nx-bg-tertiary); border-radius: var(--nx-radius-lg); overflow: hidden; position: relative; }
.nx-workload-stats { flex: 0 0 120px; text-align: right; white-space: nowrap; }
.nx-workload-legend { flex-wrap: wrap; }

.nx-page-documents { display: flex; min-height: calc(100vh - var(--nx-topbar-height) - var(--nx-space-12)); border: 1px solid var(--nx-border-primary); border-radius: var(--nx-radius-xl); overflow: hidden; background: var(--nx-bg-elevated); }
.nx-doc-sidebar { flex: 0 0 280px; width: 280px; min-height: 400px; overflow-y: auto; border-right: 1px solid var(--nx-border-primary); }
.nx-doc-tree-item { display: block; border: none; background: transparent; cursor: pointer; transition: background var(--nx-transition-fast); color: inherit; font: inherit; }
.nx-doc-tree-item:hover { background: var(--nx-bg-tertiary); }
.nx-doc-tree-item-active { background: var(--nx-accent-primary-subtle); color: var(--nx-accent-primary); }
.nx-doc-editor { flex: 1; min-width: 0; overflow-y: auto; }
.nx-doc-content { min-height: 200px; line-height: var(--nx-line-height-relaxed); color: var(--nx-text-primary); outline: none; }
.nx-doc-meta { flex-wrap: wrap; }

.nx-calendar-week-view { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nx-calendar-week-col { min-height: 120px; }
.nx-calendar-event { background: var(--nx-bg-secondary); cursor: pointer; transition: background var(--nx-transition-fast); }
.nx-calendar-event:hover { background: var(--nx-bg-tertiary); }
.nx-calendar-event-compact { background: var(--nx-accent-primary-subtle); color: var(--nx-accent-primary); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-calendar-dot { display: block; width: 6px; height: 6px; margin: 2px auto 0; border-radius: 50%; background: var(--nx-accent-primary); }

.nx-ai-suggestions .nx-btn { text-align: left; white-space: normal; height: auto; min-height: 2.5rem; padding: var(--nx-space-3); }
.nx-page-ai .nx-ai-chat,
.nx-ai-chat-page .nx-ai-chat { min-height: 480px; }
.nx-kanban-summary { width: 100%; }

.nx-phoenix-highlights .nx-flex.nx-items-center.nx-gap-4 { flex-wrap: wrap; }
.nx-phoenix-stat { min-width: 0; }

@media (max-width: 1023px) {
  .nx-hidden-mobile { display: none; }
  .nx-gantt-label { flex-basis: 140px; }
  .nx-gantt-date { flex-basis: 64px; font-size: 0.65rem; }
  .nx-gantt-header { padding-left: calc(140px + var(--nx-space-3)); }
  .nx-workload-member { flex-basis: 160px; }
  .nx-task-row-project,
  .nx-task-row-status { display: none; }
}

@media (max-width: 767px) {
  .nx-page-documents { flex-direction: column; min-height: auto; }
  .nx-doc-sidebar { flex: none; width: 100%; max-height: 220px; min-height: 0; border-right: none; border-bottom: 1px solid var(--nx-border-primary); }
  .nx-gantt-label { flex-basis: 100px; }
  .nx-gantt-header { padding-left: calc(100px + var(--nx-space-3)); }
  .nx-gantt-row { min-width: 480px; }
  .nx-workload-member { flex: 1 1 100%; }
  .nx-workload-stats { flex: 0 0 auto; margin-left: auto; }
  .nx-calendar-week-view.nx-grid-cols-7 { grid-template-columns: repeat(7, minmax(88px, 1fr)); min-width: 616px; }
  .nx-calendar-grid { gap: 2px; }
  .nx-calendar-day-name { padding: var(--nx-space-1); font-size: 0.625rem; }
  .nx-calendar-day { font-size: var(--nx-font-size-xs); border-radius: var(--nx-radius-md); }
  .nx-task-row-priority,
  .nx-task-row-assignee { display: none; }
  .nx-stat-card-body { text-align: left; }
  .nx-stat-card .nx-flex.nx-items-center.nx-justify-between { flex-direction: row; gap: var(--nx-space-3); }
}

@media (max-width: 639px) {
  .nx-my-work-toolbar .nx-select,
  .nx-my-work-toolbar .nx-btn { flex: 1 1 100%; }
  .nx-gantt-label { flex-basis: 72px; }
  .nx-gantt-date { display: none; }
  .nx-gantt-header { padding-left: 72px; }
}

/* --------------------------------------------------------------------------
   Logo Component (.nx-logo)
   -------------------------------------------------------------------------- */
.nx-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  transition: opacity var(--nx-transition-fast);
}
.nx-logo:hover { opacity: 0.82; }
.nx-logo__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.nx-logo__text {
  display: flex;
  flex-direction: column;
}
.nx-logo__brand {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .7;
  line-height: 1.3;
  color: var(--nx-text-secondary, #475569);
}
.nx-logo__name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--nx-text-primary, #0F172A);
}
@media (max-width: 480px) {
  .nx-logo__name { font-size: 16px; }
}

/* ==========================================================================
   End of NEXORA Design System
   ========================================================================== */