/**
 * NOXEN CSS FRAMEWORK v2.0
 * Layer 1 — Token System
 * All design decisions live here as CSS custom properties.
 * Every token is overridable. Every theme extends this.
 */

:root {

  /* ═══════════════════════════════════════
     COLOR — BASE PALETTE
  ═══════════════════════════════════════ */
  --nx-color-bg:          #03030a;
  --nx-color-surface:     #08080f;
  --nx-color-surface-2:   #0d0d1a;
  --nx-color-surface-3:   #131326;
  --nx-color-surface-4:   #1a1a33;
  --nx-color-overlay:     rgba(3,3,10,0.85);

  /* ═══════════════════════════════════════
     COLOR — TEXT
  ═══════════════════════════════════════ */
  --nx-color-text:        #eeeef8;
  --nx-color-text-2:      #8888b0;
  --nx-color-text-3:      #44446a;
  --nx-color-text-inv:    #03030a;

  /* ═══════════════════════════════════════
     COLOR — ACCENT (primary brand color)
  ═══════════════════════════════════════ */
  --nx-color-accent:      #00e5ff;
  --nx-color-accent-lo:   rgba(0,229,255,0.08);
  --nx-color-accent-md:   rgba(0,229,255,0.20);
  --nx-color-accent-hi:   rgba(0,229,255,0.45);
  --nx-color-accent-2:    #7b4fff;

  /* ═══════════════════════════════════════
     COLOR — SEMANTIC
  ═══════════════════════════════════════ */
  --nx-color-ok:          #00ff88;
  --nx-color-ok-lo:       rgba(0,255,136,0.08);
  --nx-color-ok-md:       rgba(0,255,136,0.20);
  --nx-color-warn:        #ffcc00;
  --nx-color-warn-lo:     rgba(255,204,0,0.08);
  --nx-color-warn-md:     rgba(255,204,0,0.20);
  --nx-color-err:         #ff3c3c;
  --nx-color-err-lo:      rgba(255,60,60,0.08);
  --nx-color-err-md:      rgba(255,60,60,0.20);
  --nx-color-info:        #bf5fff;
  --nx-color-info-lo:     rgba(191,95,255,0.08);
  --nx-color-info-md:     rgba(191,95,255,0.20);

  /* ═══════════════════════════════════════
     COLOR — BORDERS
  ═══════════════════════════════════════ */
  --nx-color-border:      rgba(255,255,255,0.06);
  --nx-color-border-2:    rgba(0,229,255,0.15);
  --nx-color-border-3:    rgba(0,229,255,0.30);

  /* ═══════════════════════════════════════
     SPACING — 4px base scale
  ═══════════════════════════════════════ */
  --nx-space-1:    4px;
  --nx-space-2:    8px;
  --nx-space-3:    12px;
  --nx-space-4:    16px;
  --nx-space-5:    24px;
  --nx-space-6:    32px;
  --nx-space-7:    48px;
  --nx-space-8:    64px;
  --nx-space-9:    96px;
  --nx-space-10:  128px;

  /* ═══════════════════════════════════════
     TYPOGRAPHY
  ═══════════════════════════════════════ */
  --nx-font-display: 'Oxanium', 'Segoe UI', system-ui, sans-serif;
  --nx-font-body:    'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --nx-font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --nx-text-xs:    0.70rem;   /* 11px */
  --nx-text-sm:    0.80rem;   /* 13px */
  --nx-text-base:  0.875rem;  /* 14px */
  --nx-text-md:    1rem;      /* 16px */
  --nx-text-lg:    1.125rem;  /* 18px */
  --nx-text-xl:    1.25rem;   /* 20px */
  --nx-text-2xl:   1.5rem;    /* 24px */
  --nx-text-3xl:   1.875rem;  /* 30px */
  --nx-text-4xl:   2.25rem;   /* 36px */
  --nx-text-5xl:   3rem;      /* 48px */
  --nx-text-6xl:   4rem;      /* 64px */

  /* Fluid typography — scales between viewport widths */
  --nx-fluid-sm:   clamp(0.80rem, 0.65rem + 0.5vw,  1rem);
  --nx-fluid-base: clamp(0.875rem, 0.75rem + 0.5vw, 1.125rem);
  --nx-fluid-lg:   clamp(1rem,     0.8rem  + 1vw,   1.5rem);
  --nx-fluid-xl:   clamp(1.25rem,  1rem    + 1.5vw, 2rem);
  --nx-fluid-2xl:  clamp(1.5rem,   1.2rem  + 2vw,   2.5rem);
  --nx-fluid-3xl:  clamp(2rem,     1.5rem  + 3vw,   4rem);
  --nx-fluid-hero: clamp(2.5rem,   1.8rem  + 4vw,   6rem);

  --nx-leading-tight:   1.25;
  --nx-leading-snug:    1.375;
  --nx-leading-normal:  1.5;
  --nx-leading-relaxed: 1.625;
  --nx-leading-loose:   2;

  --nx-tracking-tight:   -0.04em;
  --nx-tracking-snug:    -0.02em;
  --nx-tracking-normal:   0;
  --nx-tracking-wide:     0.05em;
  --nx-tracking-wider:    0.1em;
  --nx-tracking-widest:   0.2em;

  /* ═══════════════════════════════════════
     BORDER RADIUS
  ═══════════════════════════════════════ */
  --nx-radius-xs:   4px;
  --nx-radius-sm:   6px;
  --nx-radius-md:   10px;
  --nx-radius-lg:   16px;
  --nx-radius-xl:   24px;
  --nx-radius-2xl:  32px;
  --nx-radius-full: 9999px;

  /* ═══════════════════════════════════════
     ELEVATION — Box shadows
  ═══════════════════════════════════════ */
  --nx-shadow-xs:  0 1px 3px rgba(0,0,0,0.3);
  --nx-shadow-sm:  0 2px 8px rgba(0,0,0,0.4);
  --nx-shadow-md:  0 4px 20px rgba(0,0,0,0.5);
  --nx-shadow-lg:  0 8px 40px rgba(0,0,0,0.6);
  --nx-shadow-xl:  0 16px 80px rgba(0,0,0,0.7);
  --nx-shadow-glow: 0 0 24px var(--nx-color-accent-md);
  --nx-shadow-glow-lg: 0 0 60px var(--nx-color-accent-lo);

  /* ═══════════════════════════════════════
     MOTION
  ═══════════════════════════════════════ */
  --nx-ease-linear:  linear;
  --nx-ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --nx-ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --nx-ease-default: cubic-bezier(0.22, 1, 0.36, 1);
  --nx-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --nx-ease-bounce:  cubic-bezier(0.68, -0.55, 0.27, 1.55);

  --nx-duration-instant:  50ms;
  --nx-duration-fast:    150ms;
  --nx-duration-base:    250ms;
  --nx-duration-slow:    400ms;
  --nx-duration-slower:  600ms;
  --nx-duration-glacial: 800ms;

  /* ═══════════════════════════════════════
     Z-INDEX SCALE
  ═══════════════════════════════════════ */
  --nx-z-below:    -1;
  --nx-z-base:      0;
  --nx-z-raised:   10;
  --nx-z-dropdown: 100;
  --nx-z-sticky:   200;
  --nx-z-overlay:  300;
  --nx-z-modal:    400;
  --nx-z-toast:    500;
  --nx-z-top:      999;

  /* ═══════════════════════════════════════
     ANTIGRAVITY ENGINE TOKENS
  ═══════════════════════════════════════ */
  --nx-ag-seam-color:    var(--nx-color-accent);
  --nx-ag-seam-width:    1px;
  --nx-ag-seam-glow:     0 0 20px var(--nx-color-accent-md), 0 0 60px var(--nx-color-accent-lo);
  --nx-ag-reflect-blur:  1px;
  --nx-ag-reflect-fade:  0.45;
  --nx-ag-zone-depth:    600px;

  /* ═══════════════════════════════════════
     FLUID SPACING (clamp-based)
  ═══════════════════════════════════════ */
  --nx-fluid-space-xs:  clamp(4px,  0.5vw, 8px);
  --nx-fluid-space-sm:  clamp(8px,  1vw,   16px);
  --nx-fluid-space-md:  clamp(16px, 2vw,   32px);
  --nx-fluid-space-lg:  clamp(32px, 4vw,   64px);
  --nx-fluid-space-xl:  clamp(48px, 6vw,   96px);

  /* ═══════════════════════════════════════
     BRAND OVERRIDE ZONE
     (override these for your brand)
  ═══════════════════════════════════════ */
  --nx-brand-primary:   var(--nx-color-accent);
  --nx-brand-secondary: var(--nx-color-accent-2);
  --nx-brand-font:      var(--nx-font-display);

  /* ═══════════════════════════════════════
     PRINT TOKENS
  ═══════════════════════════════════════ */
  --nx-print-bg:       #ffffff;
  --nx-print-text:     #111111;
  --nx-print-border:   #cccccc;
  --nx-print-accent:   #007a8c;

}
/**
 * NOXEN CSS FRAMEWORK v2.0
 * Layer 2 — Theme Engine
 * 6 built-in themes. Switch with: data-nx-theme="NAME"
 * or JS: Noxen.theme('NAME')
 * Create custom themes: Noxen.createTheme('name', tokens)
 */

/* ═══════════════════════════════════════
   THEME: void (default — dark + cyan)
   Applied by default via :root tokens
═══════════════════════════════════════ */
[data-nx-theme="void"],
:root:not([data-nx-theme]) {
  /* inherits all defaults from _tokens.css */
  color-scheme: dark;
}

/* ═══════════════════════════════════════
   THEME: neon (deep space + electric blue)
═══════════════════════════════════════ */
[data-nx-theme="neon"] {
  color-scheme: dark;
  --nx-color-bg:         #010108;
  --nx-color-surface:    #050514;
  --nx-color-surface-2:  #0a0a20;
  --nx-color-surface-3:  #10102a;
  --nx-color-surface-4:  #161638;
  --nx-color-accent:     #4d9fff;
  --nx-color-accent-lo:  rgba(77,159,255,0.08);
  --nx-color-accent-md:  rgba(77,159,255,0.20);
  --nx-color-accent-hi:  rgba(77,159,255,0.45);
  --nx-color-accent-2:   #00e5ff;
  --nx-color-text:       #e8eeff;
  --nx-color-text-2:     #7088cc;
  --nx-color-text-3:     #303870;
  --nx-color-border:     rgba(77,159,255,0.08);
  --nx-color-border-2:   rgba(77,159,255,0.18);
  --nx-color-border-3:   rgba(77,159,255,0.35);
  --nx-ag-seam-color:    #4d9fff;
  --nx-shadow-glow:      0 0 24px rgba(77,159,255,0.3);
}

/* ═══════════════════════════════════════
   THEME: carbon (industrial + red)
═══════════════════════════════════════ */
[data-nx-theme="carbon"] {
  color-scheme: dark;
  --nx-color-bg:         #0a0806;
  --nx-color-surface:    #110e0a;
  --nx-color-surface-2:  #1a1410;
  --nx-color-surface-3:  #231c16;
  --nx-color-surface-4:  #2c241e;
  --nx-color-accent:     #ff4422;
  --nx-color-accent-lo:  rgba(255,68,34,0.08);
  --nx-color-accent-md:  rgba(255,68,34,0.20);
  --nx-color-accent-hi:  rgba(255,68,34,0.45);
  --nx-color-accent-2:   #ff8c00;
  --nx-color-text:       #f5ede8;
  --nx-color-text-2:     #aa8878;
  --nx-color-text-3:     #554438;
  --nx-color-text-inv:   #0a0806;
  --nx-color-border:     rgba(255,255,255,0.05);
  --nx-color-border-2:   rgba(255,68,34,0.18);
  --nx-color-border-3:   rgba(255,68,34,0.35);
  --nx-ag-seam-color:    #ff4422;
  --nx-shadow-glow:      0 0 24px rgba(255,68,34,0.3);
}

/* ═══════════════════════════════════════
   THEME: bio (organic + green)
═══════════════════════════════════════ */
[data-nx-theme="bio"] {
  color-scheme: dark;
  --nx-color-bg:         #030a05;
  --nx-color-surface:    #071208;
  --nx-color-surface-2:  #0d1c0f;
  --nx-color-surface-3:  #122516;
  --nx-color-surface-4:  #183020;
  --nx-color-accent:     #00e87a;
  --nx-color-accent-lo:  rgba(0,232,122,0.08);
  --nx-color-accent-md:  rgba(0,232,122,0.20);
  --nx-color-accent-hi:  rgba(0,232,122,0.45);
  --nx-color-accent-2:   #44ff88;
  --nx-color-text:       #e8f5ea;
  --nx-color-text-2:     #6a9b72;
  --nx-color-text-3:     #2a4a30;
  --nx-color-text-inv:   #030a05;
  --nx-color-border:     rgba(0,232,122,0.06);
  --nx-color-border-2:   rgba(0,232,122,0.18);
  --nx-color-border-3:   rgba(0,232,122,0.35);
  --nx-ag-seam-color:    #00e87a;
  --nx-shadow-glow:      0 0 24px rgba(0,232,122,0.3);
}

/* ═══════════════════════════════════════
   THEME: gold (luxury + amber)
═══════════════════════════════════════ */
[data-nx-theme="gold"] {
  color-scheme: dark;
  --nx-color-bg:         #080600;
  --nx-color-surface:    #120d00;
  --nx-color-surface-2:  #1c1500;
  --nx-color-surface-3:  #261c00;
  --nx-color-surface-4:  #302300;
  --nx-color-accent:     #ffd700;
  --nx-color-accent-lo:  rgba(255,215,0,0.08);
  --nx-color-accent-md:  rgba(255,215,0,0.20);
  --nx-color-accent-hi:  rgba(255,215,0,0.45);
  --nx-color-accent-2:   #ffaa00;
  --nx-color-text:       #f8f0e0;
  --nx-color-text-2:     #aa9060;
  --nx-color-text-3:     #554830;
  --nx-color-text-inv:   #080600;
  --nx-color-border:     rgba(255,215,0,0.06);
  --nx-color-border-2:   rgba(255,215,0,0.18);
  --nx-color-border-3:   rgba(255,215,0,0.35);
  --nx-ag-seam-color:    #ffd700;
  --nx-shadow-glow:      0 0 24px rgba(255,215,0,0.3);
}

/* ═══════════════════════════════════════
   THEME: paper (light + warm — accessible)
═══════════════════════════════════════ */
[data-nx-theme="paper"] {
  color-scheme: light;
  --nx-color-bg:         #faf9f7;
  --nx-color-surface:    #ffffff;
  --nx-color-surface-2:  #f4f2ee;
  --nx-color-surface-3:  #eceae4;
  --nx-color-surface-4:  #e2ded6;
  --nx-color-overlay:    rgba(250,249,247,0.92);
  --nx-color-accent:     #d45500;
  --nx-color-accent-lo:  rgba(212,85,0,0.06);
  --nx-color-accent-md:  rgba(212,85,0,0.14);
  --nx-color-accent-hi:  rgba(212,85,0,0.30);
  --nx-color-accent-2:   #9b2d00;
  --nx-color-text:       #1a1208;
  --nx-color-text-2:     #5a4a38;
  --nx-color-text-3:     #a09080;
  --nx-color-text-inv:   #faf9f7;
  --nx-color-ok:         #166534;
  --nx-color-warn:       #92400e;
  --nx-color-err:        #991b1b;
  --nx-color-info:       #4c1d95;
  --nx-color-border:     rgba(0,0,0,0.08);
  --nx-color-border-2:   rgba(212,85,0,0.20);
  --nx-color-border-3:   rgba(212,85,0,0.40);
  --nx-ag-seam-color:    #d45500;
  --nx-shadow-xs:        0 1px 3px rgba(0,0,0,0.08);
  --nx-shadow-sm:        0 2px 8px rgba(0,0,0,0.10);
  --nx-shadow-md:        0 4px 20px rgba(0,0,0,0.12);
  --nx-shadow-lg:        0 8px 40px rgba(0,0,0,0.14);
  --nx-shadow-glow:      0 0 20px rgba(212,85,0,0.15);
}

/* ═══════════════════════════════════════
   THEME: aurora (purple + pink)
═══════════════════════════════════════ */
[data-nx-theme="aurora"] {
  color-scheme: dark;
  --nx-color-bg:         #060310;
  --nx-color-surface:    #0c0620;
  --nx-color-surface-2:  #130930;
  --nx-color-surface-3:  #1a0c40;
  --nx-color-surface-4:  #210f50;
  --nx-color-accent:     #cc44ff;
  --nx-color-accent-lo:  rgba(204,68,255,0.08);
  --nx-color-accent-md:  rgba(204,68,255,0.20);
  --nx-color-accent-hi:  rgba(204,68,255,0.45);
  --nx-color-accent-2:   #ff44aa;
  --nx-color-text:       #f0e8ff;
  --nx-color-text-2:     #9966cc;
  --nx-color-text-3:     #442266;
  --nx-color-text-inv:   #060310;
  --nx-color-border:     rgba(204,68,255,0.08);
  --nx-color-border-2:   rgba(204,68,255,0.20);
  --nx-color-border-3:   rgba(204,68,255,0.40);
  --nx-ag-seam-color:    #cc44ff;
  --nx-shadow-glow:      0 0 24px rgba(204,68,255,0.35);
}

/* ═══════════════════════════════════════
   ACCESSIBILITY — High Contrast Mode
═══════════════════════════════════════ */
[data-nx-a11y="high-contrast"] {
  --nx-color-bg:       #000000;
  --nx-color-surface:  #0a0a0a;
  --nx-color-text:     #ffffff;
  --nx-color-text-2:   #eeeeee;
  --nx-color-accent:   #ffff00;
  --nx-color-border:   rgba(255,255,255,0.3);
  --nx-color-border-2: rgba(255,255,0,0.5);
}

/* ═══════════════════════════════════════
   PRINT MODE
═══════════════════════════════════════ */
[data-nx-mode="print"],
@media print {
  :root {
    --nx-color-bg:       var(--nx-print-bg);
    --nx-color-surface:  #f8f8f8;
    --nx-color-surface-2:#f0f0f0;
    --nx-color-surface-3:#e8e8e8;
    --nx-color-text:     var(--nx-print-text);
    --nx-color-text-2:   #444444;
    --nx-color-text-3:   #888888;
    --nx-color-accent:   var(--nx-print-accent);
    --nx-color-border:   var(--nx-print-border);
    --nx-shadow-md:      none;
    --nx-shadow-lg:      none;
    --nx-shadow-glow:    none;
  }
}

/* ═══════════════════════════════════════
   REDUCED MOTION — system preference
═══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --nx-duration-fast:    0ms;
    --nx-duration-base:    0ms;
    --nx-duration-slow:    0ms;
    --nx-duration-slower:  0ms;
    --nx-duration-glacial: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/**
 * NOXEN CSS FRAMEWORK v2.0
 * Layer 3 — Base Reset + Typography
 */

/* ── Modern CSS Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  line-height: var(--nx-leading-normal);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  height: 100%;
}

body {
  background-color: var(--nx-color-bg);
  color: var(--nx-color-text);
  font-family: var(--nx-font-body);
  font-size: var(--nx-text-base);
  line-height: var(--nx-leading-normal);
  min-height: 100%;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Images ── */
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

/* ── Typography defaults ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--nx-font-display);
  font-weight: 700;
  line-height: var(--nx-leading-tight);
  letter-spacing: var(--nx-tracking-tight);
  color: var(--nx-color-text);
}
h1 { font-size: var(--nx-fluid-3xl); }
h2 { font-size: var(--nx-fluid-2xl); }
h3 { font-size: var(--nx-fluid-xl); }
h4 { font-size: var(--nx-text-xl); }
h5 { font-size: var(--nx-text-lg); }
h6 { font-size: var(--nx-text-md); }

p { line-height: var(--nx-leading-relaxed); color: var(--nx-color-text-2); margin-bottom: var(--nx-space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--nx-color-accent); text-decoration: none; transition: opacity var(--nx-duration-fast); }
a:hover { opacity: 0.8; }

strong, b { font-weight: 700; color: var(--nx-color-text); }
em, i { font-style: italic; }

code, kbd, samp, pre {
  font-family: var(--nx-font-mono);
  font-size: 0.9em;
}
code {
  background: var(--nx-color-surface-3);
  color: var(--nx-color-accent);
  padding: 2px 6px;
  border-radius: var(--nx-radius-xs);
  font-size: var(--nx-text-sm);
}
pre {
  background: var(--nx-color-surface-2);
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-md);
  padding: var(--nx-space-5);
  overflow-x: auto;
  line-height: var(--nx-leading-relaxed);
}
pre code { background: none; padding: 0; color: var(--nx-color-text); }

hr {
  border: none;
  border-top: 1px solid var(--nx-color-border);
  margin: var(--nx-space-6) 0;
}

/* ── Lists ── */
ul, ol { padding-left: var(--nx-space-5); color: var(--nx-color-text-2); line-height: var(--nx-leading-relaxed); }
li { margin-bottom: var(--nx-space-1); }

/* ── Forms global reset ── */
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}
button { cursor: pointer; }
[disabled] { opacity: 0.5; pointer-events: none; cursor: not-allowed; }

/* ── Focus visible (keyboard navigation) ── */
:focus-visible {
  outline: 2px solid var(--nx-color-accent);
  outline-offset: 2px;
  border-radius: var(--nx-radius-xs);
}

/* ── Selection ── */
::selection {
  background: var(--nx-color-accent-md);
  color: var(--nx-color-accent);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--nx-color-surface); }
::-webkit-scrollbar-thumb { background: var(--nx-color-surface-3); border-radius: var(--nx-radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--nx-color-accent-md); }

/* ── Skip to main (a11y) ── */
.nx-skip-link {
  position: absolute;
  top: -100%;
  left: var(--nx-space-4);
  background: var(--nx-color-accent);
  color: var(--nx-color-text-inv);
  padding: var(--nx-space-2) var(--nx-space-4);
  border-radius: 0 0 var(--nx-radius-md) var(--nx-radius-md);
  font-family: var(--nx-font-display);
  font-size: var(--nx-text-sm);
  font-weight: 700;
  z-index: var(--nx-z-top);
  transition: top var(--nx-duration-fast);
}
.nx-skip-link:focus { top: 0; }

/* ── Print base ── */
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: white !important; color: black !important; }
  nav, [nx-print-hide], [data-nx-print="hide"] { display: none !important; }
  [nx-print-only], [data-nx-print="only"] { display: block !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }
  h1, h2, h3, h4 { page-break-after: avoid; }
  p, blockquote { orphans: 3; widows: 3; }
  [nx-print-break-before] { page-break-before: always; }
  [nx-print-break-after]  { page-break-after: always; }
  [nx-print-break-avoid]  { page-break-inside: avoid; }
}
/**
 * NOXEN CSS FRAMEWORK v2.0
 * Layer 4 — Layout Engine
 * Smart Grid · Fluid Layouts · Section system · Flex utilities
 */

/* ═══════════════════════════════════════
   SECTION  nx="section"
   Full-width page sections with intent-based sizing
═══════════════════════════════════════ */
[nx="section"] {
  width: 100%;
  padding: var(--nx-space-9) var(--nx-fluid-space-xl);
}
[nx="section"][size="hero"]   { padding: var(--nx-space-10) var(--nx-fluid-space-xl); min-height: 90vh; display: flex; align-items: center; }
[nx="section"][size="full"]   { padding: var(--nx-fluid-space-xl); min-height: 100vh; display: flex; align-items: center; }
[nx="section"][size="narrow"] { padding: var(--nx-space-7) var(--nx-fluid-space-xl); max-width: 760px; margin: 0 auto; }
[nx="section"][size="wide"]   { padding: var(--nx-space-8) var(--nx-fluid-space-xl); max-width: 1400px; margin: 0 auto; }
[nx="section"][size="sm"]     { padding: var(--nx-space-7) var(--nx-fluid-space-xl); }
[nx="section"][size="lg"]     { padding: var(--nx-space-9) var(--nx-fluid-space-xl); }

/* ═══════════════════════════════════════
   CONTAINER
═══════════════════════════════════════ */
[nx="container"] {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--nx-fluid-space-md);
}
[nx="container"][size="sm"]   { max-width: 640px; }
[nx="container"][size="md"]   { max-width: 768px; }
[nx="container"][size="lg"]   { max-width: 1024px; }
[nx="container"][size="xl"]   { max-width: 1280px; }
[nx="container"][size="full"] { max-width: 100%; }

/* ═══════════════════════════════════════
   SMART GRID  nx="grid"
   Intent-based CSS Grid system
═══════════════════════════════════════ */
[nx="grid"] {
  display: grid;
  gap: var(--nx-fluid-space-md);
}

/* Column count shortcuts */
[nx="grid"][cols="1"] { grid-template-columns: 1fr; }
[nx="grid"][cols="2"] { grid-template-columns: repeat(2, 1fr); }
[nx="grid"][cols="3"] { grid-template-columns: repeat(3, 1fr); }
[nx="grid"][cols="4"] { grid-template-columns: repeat(4, 1fr); }
[nx="grid"][cols="5"] { grid-template-columns: repeat(5, 1fr); }
[nx="grid"][cols="6"] { grid-template-columns: repeat(6, 1fr); }

/* Auto-responsive — fills columns automatically */
[nx="grid"][cols="auto"],
[nx="grid"][cols="auto-sm"]  { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
[nx="grid"][cols="auto-md"]  { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
[nx="grid"][cols="auto-lg"]  { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }
[nx="grid"][cols="auto-xl"]  { grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }

/* Intent-based layouts */
[nx="grid"][layout="sidebar-main"] { grid-template-columns: 280px 1fr; }
[nx="grid"][layout="main-sidebar"] { grid-template-columns: 1fr 280px; }
[nx="grid"][layout="holy-grail"]   { grid-template-columns: 220px 1fr 220px; grid-template-rows: auto 1fr auto; }
[nx="grid"][layout="dashboard"]    { grid-template-columns: 240px 1fr; grid-template-rows: 60px 1fr auto; }
[nx="grid"][layout="mosaic"]       { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; }
[nx="grid"][layout="magazine"]     { grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; }
[nx="grid"][layout="masonry"]      {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows: 8px; /* JS fills in row spans */
  align-items: start;
}

/* Gap variants */
[nx="grid"][gap="none"] { gap: 0; }
[nx="grid"][gap="xs"]   { gap: var(--nx-space-2); }
[nx="grid"][gap="sm"]   { gap: var(--nx-space-3); }
[nx="grid"][gap="md"]   { gap: var(--nx-space-5); }
[nx="grid"][gap="lg"]   { gap: var(--nx-space-7); }
[nx="grid"][gap="xl"]   { gap: var(--nx-space-9); }

/* Alignment */
[nx="grid"][align="start"]   { align-items: start; }
[nx="grid"][align="center"]  { align-items: center; }
[nx="grid"][align="end"]     { align-items: end; }
[nx="grid"][align="stretch"] { align-items: stretch; }
[nx="grid"][justify="start"]   { justify-items: start; }
[nx="grid"][justify="center"]  { justify-items: center; }
[nx="grid"][justify="end"]     { justify-items: end; }

/* Subgrid support */
[nx="grid"][subgrid] {
  display: subgrid;
  grid-column: 1 / -1;
}

/* Responsive breakpoints */
@media (max-width: 1024px) {
  [nx="grid"][cols="4"], [nx="grid"][cols="5"], [nx="grid"][cols="6"] { grid-template-columns: repeat(3, 1fr); }
  [nx="grid"][layout="holy-grail"] { grid-template-columns: 1fr; }
  [nx="grid"][layout="dashboard"]  { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  [nx="grid"][cols="3"], [nx="grid"][cols="4"],
  [nx="grid"][cols="5"], [nx="grid"][cols="6"] { grid-template-columns: repeat(2, 1fr); }
  [nx="grid"][layout="sidebar-main"],
  [nx="grid"][layout="main-sidebar"] { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  [nx="grid"][cols="2"], [nx="grid"][cols="3"],
  [nx="grid"][cols="4"], [nx="grid"][cols="5"],
  [nx="grid"][cols="6"] { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════
   GRID ITEM SPANS
═══════════════════════════════════════ */
[span="2"]  { grid-column: span 2; }
[span="3"]  { grid-column: span 3; }
[span="4"]  { grid-column: span 4; }
[span="full"] { grid-column: 1 / -1; }
[row-span="2"] { grid-row: span 2; }
[row-span="3"] { grid-row: span 3; }

/* ═══════════════════════════════════════
   FLEX ROW/WRAP
═══════════════════════════════════════ */
[nx="row"] {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--nx-space-4);
  align-items: center;
}
[nx="row"][gap="none"] { gap: 0; }
[nx="row"][gap="xs"]   { gap: var(--nx-space-2); }
[nx="row"][gap="sm"]   { gap: var(--nx-space-3); }
[nx="row"][gap="md"]   { gap: var(--nx-space-5); }
[nx="row"][gap="lg"]   { gap: var(--nx-space-7); }
[nx="row"][nowrap]     { flex-wrap: nowrap; }
[nx="row"][justify="between"] { justify-content: space-between; }
[nx="row"][justify="center"]  { justify-content: center; }
[nx="row"][justify="end"]     { justify-content: flex-end; }
[nx="row"][justify="around"]  { justify-content: space-around; }
[nx="row"][align="start"]  { align-items: flex-start; }
[nx="row"][align="end"]    { align-items: flex-end; }
[nx="row"][align="stretch"]{ align-items: stretch; }

/* ═══════════════════════════════════════
   STACK (vertical flex column)
═══════════════════════════════════════ */
[nx="stack"] {
  display: flex;
  flex-direction: column;
  gap: var(--nx-space-4);
}
[nx="stack"][gap="none"] { gap: 0; }
[nx="stack"][gap="xs"]   { gap: var(--nx-space-2); }
[nx="stack"][gap="sm"]   { gap: var(--nx-space-3); }
[nx="stack"][gap="md"]   { gap: var(--nx-space-5); }
[nx="stack"][gap="lg"]   { gap: var(--nx-space-7); }
[nx="stack"][align="center"]  { align-items: center; }
[nx="stack"][align="end"]     { align-items: flex-end; }
[nx="stack"][align="start"]   { align-items: flex-start; }
[nx="stack"][align="stretch"] { align-items: stretch; }

/* ═══════════════════════════════════════
   CENTER — perfect centering utility
═══════════════════════════════════════ */
[nx="center"] {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ═══════════════════════════════════════
   DIVIDER  nx="divider"
═══════════════════════════════════════ */
[nx="divider"] {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--nx-color-border) 20%, var(--nx-color-border) 80%, transparent);
  margin: var(--nx-space-5) 0;
  border: none;
}
[nx="divider"][variant="accent"] {
  background: linear-gradient(90deg, transparent, var(--nx-color-accent-md) 20%, var(--nx-color-accent) 50%, var(--nx-color-accent-md) 80%, transparent);
  box-shadow: var(--nx-ag-seam-glow);
}
[nx="divider"][vertical] {
  height: auto;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--nx-color-border) 20%, var(--nx-color-border) 80%, transparent);
  margin: 0 var(--nx-space-5);
  align-self: stretch;
}

/* ═══════════════════════════════════════
   SPACER
═══════════════════════════════════════ */
[nx="spacer"] { flex: 1 1 auto; }
/**
 * NOXEN CSS FRAMEWORK v2.0
 * Layer 3 — Component System (25+ components)
 * All driven by nx="" attribute + modifiers.
 * Zero class names needed.
 */

/* ═══════════════════════════════════════
   CARD  nx="card"
═══════════════════════════════════════ */
[nx="card"] {
  background: var(--nx-color-surface);
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-lg);
  padding: var(--nx-space-6);
  position: relative;
  overflow: hidden;
  transition:
    transform       var(--nx-duration-base) var(--nx-ease-spring),
    border-color    var(--nx-duration-base),
    box-shadow      var(--nx-duration-base);
}
[nx="card"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--nx-color-accent-lo), transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--nx-duration-base);
}
[nx="card"]:hover { transform: translateY(-4px); border-color: var(--nx-color-border-2); box-shadow: var(--nx-shadow-lg), var(--nx-shadow-glow); }
[nx="card"]:hover::before { opacity: 1; }
[nx="card"][no-hover]:hover { transform: none; box-shadow: none; border-color: var(--nx-color-border); }

[nx="card"][variant="ghost"]   { background: transparent; }
[nx="card"][variant="solid"]   { background: var(--nx-color-surface-2); border-color: transparent; }
[nx="card"][variant="raised"]  { background: var(--nx-color-surface); box-shadow: var(--nx-shadow-md); }
[nx="card"][variant="accent"]  { background: var(--nx-color-accent-lo); border-color: var(--nx-color-border-2); }
[nx="card"][variant="outline"] { background: transparent; border-color: var(--nx-color-border-2); }
[nx="card"][variant="glass"]   { background: rgba(255,255,255,0.04); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-color: rgba(255,255,255,0.08); }

[nx="card"][size="sm"]  { padding: var(--nx-space-4); border-radius: var(--nx-radius-md); }
[nx="card"][size="lg"]  { padding: var(--nx-space-8); border-radius: var(--nx-radius-xl); }
[nx="card"][size="xl"]  { padding: var(--nx-space-9); border-radius: var(--nx-radius-2xl); }

/* ═══════════════════════════════════════
   BUTTON  nx="btn"
═══════════════════════════════════════ */
[nx="btn"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--nx-space-2);
  padding: 10px var(--nx-space-6);
  border-radius: var(--nx-radius-full);
  border: none;
  font-family: var(--nx-font-display);
  font-size: var(--nx-text-sm);
  font-weight: 600;
  letter-spacing: var(--nx-tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: var(--nx-color-accent);
  color: var(--nx-color-text-inv);
  transition: transform var(--nx-duration-fast) var(--nx-ease-spring), box-shadow var(--nx-duration-base);
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
}
[nx="btn"]::after {
  content: '';
  position: absolute;
  top: -40%; left: -20%;
  width: 50%; height: 180%;
  background: rgba(255,255,255,0.22);
  transform: skewX(-18deg) translateX(-100%);
  transition: transform var(--nx-duration-slow) var(--nx-ease-default);
}
[nx="btn"]:hover { transform: scale(1.04); box-shadow: var(--nx-shadow-glow); }
[nx="btn"]:hover::after { transform: skewX(-18deg) translateX(500%); }
[nx="btn"]:active { transform: scale(0.97); }

[nx="btn"][variant="outline"] { background: transparent; color: var(--nx-color-accent); border: 1.5px solid var(--nx-color-accent); }
[nx="btn"][variant="outline"]:hover { background: var(--nx-color-accent-lo); }
[nx="btn"][variant="ghost"]   { background: var(--nx-color-surface-2); color: var(--nx-color-text-2); border: 1px solid var(--nx-color-border); }
[nx="btn"][variant="ghost"]:hover { color: var(--nx-color-text); border-color: var(--nx-color-border-2); background: var(--nx-color-surface-3); }
[nx="btn"][variant="solid"]   { background: var(--nx-color-surface-3); color: var(--nx-color-text); }
[nx="btn"][variant="danger"]  { background: var(--nx-color-err); color: #fff; }
[nx="btn"][variant="danger"]:hover { box-shadow: 0 0 20px var(--nx-color-err-md); }

[nx="btn"][size="xs"] { padding: 5px var(--nx-space-3); font-size: var(--nx-text-xs); }
[nx="btn"][size="sm"] { padding: 7px var(--nx-space-4); font-size: var(--nx-text-xs); }
[nx="btn"][size="lg"] { padding: 14px var(--nx-space-7); font-size: var(--nx-text-md); }
[nx="btn"][size="xl"] { padding: 18px var(--nx-space-8); font-size: var(--nx-text-lg); }
[nx="btn"][full]      { width: 100%; }
[nx="btn"][loading]   { pointer-events: none; opacity: 0.7; }
[nx="btn"][loading]::before {
  content: '';
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: nx-spin 0.6s linear infinite;
  margin-right: var(--nx-space-2);
}

/* ═══════════════════════════════════════
   BADGE  nx="badge"
═══════════════════════════════════════ */
[nx="badge"] {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px var(--nx-space-3);
  border-radius: var(--nx-radius-full);
  font-family: var(--nx-font-mono);
  font-size: var(--nx-text-xs);
  font-weight: 500;
  letter-spacing: 0.4px;
  background: var(--nx-color-accent-lo);
  color: var(--nx-color-accent);
  border: 1px solid var(--nx-color-border-2);
  white-space: nowrap;
}
[nx="badge"][tone="ok"]   { color:var(--nx-color-ok);   background:var(--nx-color-ok-lo);   border-color:rgba(0,255,136,0.25); }
[nx="badge"][tone="warn"] { color:var(--nx-color-warn); background:var(--nx-color-warn-lo); border-color:rgba(255,204,0,0.25); }
[nx="badge"][tone="err"]  { color:var(--nx-color-err);  background:var(--nx-color-err-lo);  border-color:rgba(255,60,60,0.25); }
[nx="badge"][tone="info"] { color:var(--nx-color-info); background:var(--nx-color-info-lo); border-color:rgba(191,95,255,0.25); }
[nx="badge"][size="sm"]   { padding: 2px var(--nx-space-2); font-size: 10px; }
[nx="badge"][size="lg"]   { padding: 5px var(--nx-space-4); font-size: var(--nx-text-sm); }

/* ═══════════════════════════════════════
   INPUT / TEXTAREA / SELECT  nx="input"
═══════════════════════════════════════ */
[nx="input"], [nx="textarea"], [nx="select"] {
  width: 100%;
  padding: 10px var(--nx-space-4);
  background: var(--nx-color-surface-2);
  border: 1.5px solid var(--nx-color-border);
  border-radius: var(--nx-radius-md);
  color: var(--nx-color-text);
  font-family: var(--nx-font-body);
  font-size: var(--nx-text-base);
  line-height: var(--nx-leading-normal);
  outline: none;
  transition: border-color var(--nx-duration-fast), box-shadow var(--nx-duration-fast);
  -webkit-appearance: none;
  appearance: none;
}
[nx="input"]:focus, [nx="textarea"]:focus, [nx="select"]:focus {
  border-color: var(--nx-color-accent);
  box-shadow: 0 0 0 3px var(--nx-color-accent-lo);
}
[nx="input"]::placeholder, [nx="textarea"]::placeholder { color: var(--nx-color-text-3); }
[nx="textarea"] { resize: vertical; min-height: 100px; }
[nx="select"]   { cursor: pointer; }

[nx="input"][variant="filled"], [nx="textarea"][variant="filled"] {
  background: var(--nx-color-surface-3);
  border-color: transparent;
}
[nx="input"][variant="underline"] {
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--nx-color-border);
  border-radius: 0;
  padding-left: 0; padding-right: 0;
}
[nx="input"][size="sm"] { padding: 7px var(--nx-space-3); font-size: var(--nx-text-sm); }
[nx="input"][size="lg"] { padding: 14px var(--nx-space-5); font-size: var(--nx-text-md); }
[nx="input"][tone="err"] { border-color: var(--nx-color-err); }
[nx="input"][tone="ok"]  { border-color: var(--nx-color-ok); }

/* ═══════════════════════════════════════
   ALERT  nx="alert"
═══════════════════════════════════════ */
[nx="alert"] {
  display: flex;
  gap: var(--nx-space-3);
  align-items: flex-start;
  padding: var(--nx-space-4) var(--nx-space-5);
  border-radius: var(--nx-radius-md);
  border-left: 3px solid var(--nx-color-accent);
  background: var(--nx-color-accent-lo);
  color: var(--nx-color-text-2);
  font-size: var(--nx-text-base);
  line-height: var(--nx-leading-normal);
}
[nx="alert"][tone="ok"]   { border-color:var(--nx-color-ok);   background:var(--nx-color-ok-lo);   }
[nx="alert"][tone="warn"] { border-color:var(--nx-color-warn); background:var(--nx-color-warn-lo); }
[nx="alert"][tone="err"]  { border-color:var(--nx-color-err);  background:var(--nx-color-err-lo);  }
[nx="alert"][tone="info"] { border-color:var(--nx-color-info); background:var(--nx-color-info-lo); }
[nx="alert"][dismissible] { padding-right: var(--nx-space-8); position: relative; }

/* ═══════════════════════════════════════
   AVATAR  nx="avatar"
═══════════════════════════════════════ */
[nx="avatar"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--nx-radius-full);
  background: var(--nx-color-surface-3);
  border: 2px solid var(--nx-color-border-2);
  font-family: var(--nx-font-display);
  font-size: var(--nx-text-sm);
  font-weight: 700;
  color: var(--nx-color-accent);
  overflow: hidden;
  flex-shrink: 0;
}
[nx="avatar"][size="xs"] { width:24px;  height:24px;  font-size:var(--nx-text-xs); }
[nx="avatar"][size="sm"] { width:32px;  height:32px;  font-size:var(--nx-text-xs); }
[nx="avatar"][size="lg"] { width:56px;  height:56px;  font-size:var(--nx-text-md); }
[nx="avatar"][size="xl"] { width:72px;  height:72px;  font-size:var(--nx-text-lg); }
[nx="avatar"][size="2xl"]{ width:96px;  height:96px;  font-size:var(--nx-text-2xl); }
[nx="avatar"][variant="square"] { border-radius: var(--nx-radius-md); }

/* Avatar group */
[nx="avatar-group"] { display: flex; }
[nx="avatar-group"] [nx="avatar"] { margin-left: -10px; border: 2px solid var(--nx-color-bg); }
[nx="avatar-group"] [nx="avatar"]:first-child { margin-left: 0; }

/* ═══════════════════════════════════════
   PROGRESS  nx="progress"
═══════════════════════════════════════ */
[nx="progress"] {
  height: 4px;
  background: var(--nx-color-surface-3);
  border-radius: var(--nx-radius-full);
  overflow: hidden;
  position: relative;
}
[nx="progress"][size="xs"] { height: 2px; }
[nx="progress"][size="sm"] { height: 3px; }
[nx="progress"][size="lg"] { height: 8px; }
[nx="progress"][size="xl"] { height: 12px; }
[nx="progress"]::after {
  content: '';
  display: block;
  height: 100%;
  width: calc(var(--nx-progress, 0) * 1%);
  border-radius: var(--nx-radius-full);
  background: linear-gradient(90deg, var(--nx-color-accent), var(--nx-color-accent-2));
  box-shadow: 0 0 8px var(--nx-color-accent-md);
  transition: width var(--nx-duration-slower) var(--nx-ease-default);
}
[nx="progress"][tone="ok"]::after   { background: var(--nx-color-ok); box-shadow: none; }
[nx="progress"][tone="warn"]::after { background: var(--nx-color-warn); box-shadow: none; }
[nx="progress"][tone="err"]::after  { background: var(--nx-color-err); box-shadow: none; }
[nx="progress"][indeterminate]::after {
  width: 40%;
  animation: nx-progress-slide 1.5s ease-in-out infinite;
}

/* ═══════════════════════════════════════
   CHIP  nx="chip"
═══════════════════════════════════════ */
[nx="chip"] {
  display: inline-flex;
  align-items: center;
  gap: var(--nx-space-2);
  padding: 4px var(--nx-space-3);
  border-radius: var(--nx-radius-full);
  font-family: var(--nx-font-mono);
  font-size: var(--nx-text-xs);
  background: var(--nx-color-surface-2);
  color: var(--nx-color-text-2);
  border: 1px solid var(--nx-color-border);
  cursor: pointer;
  transition: background var(--nx-duration-fast), color var(--nx-duration-fast), border-color var(--nx-duration-fast);
  -webkit-user-select: none;
  user-select: none;
}
[nx="chip"]:hover, [nx="chip"][active], [nx="chip"].active {
  background: var(--nx-color-accent-lo);
  color: var(--nx-color-accent);
  border-color: var(--nx-color-border-2);
}
[nx="chip"][tone="ok"]   { color:var(--nx-color-ok);   background:var(--nx-color-ok-lo);   border-color:rgba(0,255,136,0.20); }
[nx="chip"][tone="warn"] { color:var(--nx-color-warn); background:var(--nx-color-warn-lo); border-color:rgba(255,204,0,0.20); }
[nx="chip"][tone="err"]  { color:var(--nx-color-err);  background:var(--nx-color-err-lo);  border-color:rgba(255,60,60,0.20); }

/* ═══════════════════════════════════════
   TOOLTIP  nx="tooltip"
═══════════════════════════════════════ */
[nx="tooltip"] { position: relative; display: inline-flex; }
[nx="tooltip"][tip]::after {
  content: attr(tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--nx-color-surface-4);
  color: var(--nx-color-text);
  font-family: var(--nx-font-mono);
  font-size: var(--nx-text-xs);
  padding: 4px 10px;
  border-radius: var(--nx-radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--nx-duration-fast), transform var(--nx-duration-fast);
  border: 1px solid var(--nx-color-border);
  z-index: var(--nx-z-dropdown);
  max-width: 240px;
  white-space: normal;
  text-align: center;
}
[nx="tooltip"][tip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
[nx="tooltip"][tip-pos="bottom"]::after { bottom: auto; top: calc(100% + 8px); transform: translateX(-50%) translateY(-6px); }
[nx="tooltip"][tip-pos="left"]::after   { left: auto; right: calc(100% + 8px); bottom: 50%; transform: translateY(50%) translateX(-6px); }
[nx="tooltip"][tip-pos="right"]::after  { left: calc(100% + 8px); bottom: 50%; transform: translateY(50%) translateX(6px); }

/* ═══════════════════════════════════════
   TOGGLE  nx="toggle"
═══════════════════════════════════════ */
[nx="toggle"] {
  position: relative;
  display: inline-block;
  width: 44px; height: 24px;
  background: var(--nx-color-surface-3);
  border-radius: var(--nx-radius-full);
  border: 1px solid var(--nx-color-border);
  cursor: pointer;
  transition: background var(--nx-duration-fast), border-color var(--nx-duration-fast);
  flex-shrink: 0;
}
[nx="toggle"]::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  background: var(--nx-color-text-3);
  border-radius: 50%;
  top: 3px; left: 3px;
  transition: left var(--nx-duration-fast) var(--nx-ease-spring), background var(--nx-duration-fast);
}
[nx="toggle"][on], [nx="toggle"].on { background: var(--nx-color-accent); border-color: var(--nx-color-accent); }
[nx="toggle"][on]::after, [nx="toggle"].on::after { left: 21px; background: var(--nx-color-text-inv); }
[nx="toggle"][size="sm"] { width: 34px; height: 18px; }
[nx="toggle"][size="sm"]::after { width: 12px; height: 12px; top: 2px; left: 2px; }
[nx="toggle"][size="sm"][on]::after, [nx="toggle"][size="sm"].on::after { left: 16px; }
[nx="toggle"][size="lg"] { width: 56px; height: 30px; }
[nx="toggle"][size="lg"]::after { width: 22px; height: 22px; top: 3px; left: 3px; }
[nx="toggle"][size="lg"][on]::after, [nx="toggle"][size="lg"].on::after { left: 27px; }

/* ═══════════════════════════════════════
   LABEL  nx="label"
═══════════════════════════════════════ */
[nx="label"] {
  display: inline-block;
  font-family: var(--nx-font-mono);
  font-size: var(--nx-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--nx-tracking-wider);
  color: var(--nx-color-accent);
}
[nx="label"][muted]   { color: var(--nx-color-text-3); }
[nx="label"][size="lg"] { font-size: var(--nx-text-sm); }

/* ═══════════════════════════════════════
   SKELETON  nx="skeleton"
═══════════════════════════════════════ */
[nx="skeleton"] {
  background: linear-gradient(90deg,
    var(--nx-color-surface-2) 25%,
    var(--nx-color-surface-3) 50%,
    var(--nx-color-surface-2) 75%
  );
  background-size: 200% 100%;
  border-radius: var(--nx-radius-sm);
  animation: nx-shimmer 1.5s infinite;
}
@keyframes nx-shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════════
   MODAL  nx="modal"
═══════════════════════════════════════ */
[nx="modal-backdrop"] {
  position: fixed;
  inset: 0;
  background: var(--nx-color-overlay);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--nx-z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--nx-space-5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--nx-duration-base);
}
[nx="modal-backdrop"][open] { opacity: 1; pointer-events: all; }
[nx="modal"] {
  background: var(--nx-color-surface);
  border: 1px solid var(--nx-color-border-2);
  border-radius: var(--nx-radius-xl);
  padding: var(--nx-space-7);
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--nx-shadow-xl);
  transform: scale(0.95) translateY(16px);
  transition: transform var(--nx-duration-base) var(--nx-ease-spring);
}
[nx="modal-backdrop"][open] [nx="modal"] { transform: scale(1) translateY(0); }

/* ═══════════════════════════════════════
   TOAST  nx="toast"
═══════════════════════════════════════ */
[nx="toast-stack"] {
  position: fixed;
  bottom: var(--nx-space-5);
  right: var(--nx-space-5);
  z-index: var(--nx-z-toast);
  display: flex;
  flex-direction: column-reverse; /* newest at bottom */
  gap: var(--nx-space-2);
  max-width: 380px;
  width: 100%;
}
[nx="toast"] {
  background: var(--nx-color-surface-2);
  border: 1px solid var(--nx-color-border-2);
  border-radius: var(--nx-radius-lg);
  padding: var(--nx-space-4) var(--nx-space-5);
  display: flex;
  align-items: flex-start;
  gap: var(--nx-space-3);
  box-shadow: var(--nx-shadow-lg);
  animation: nx-toast-in var(--nx-duration-base) var(--nx-ease-spring) both;
}
@keyframes nx-toast-in { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
[nx="toast"][tone="ok"]   { border-left: 3px solid var(--nx-color-ok); }
[nx="toast"][tone="warn"] { border-left: 3px solid var(--nx-color-warn); }
[nx="toast"][tone="err"]  { border-left: 3px solid var(--nx-color-err); }
[nx="toast"][tone="info"] { border-left: 3px solid var(--nx-color-info); }

/* ═══════════════════════════════════════
   NAVBAR  nx="navbar"
═══════════════════════════════════════ */
[nx="navbar"] {
  display: flex;
  align-items: center;
  gap: var(--nx-space-4);
  height: 60px;
  padding: 0 var(--nx-space-6);
  background: var(--nx-color-surface);
  border-bottom: 1px solid var(--nx-color-border);
}
[nx="navbar"][sticky]   { position: sticky; top: 0; z-index: var(--nx-z-sticky); }
[nx="navbar"][fixed]    { position: fixed; top: 0; left: 0; right: 0; z-index: var(--nx-z-sticky); }
[nx="navbar"][glass]    { background: rgba(8,8,15,0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
[nx="navbar"][variant="transparent"] { background: transparent; border-color: transparent; }

/* ═══════════════════════════════════════
   TABLE  nx="table"
═══════════════════════════════════════ */
[nx="table"] {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--nx-text-sm);
}
[nx="table"] th {
  background: var(--nx-color-surface-2);
  color: var(--nx-color-text-2);
  font-family: var(--nx-font-mono);
  font-weight: 500;
  font-size: var(--nx-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--nx-tracking-wide);
  padding: var(--nx-space-3) var(--nx-space-4);
  text-align: left;
  border-bottom: 1px solid var(--nx-color-border);
}
[nx="table"] td {
  padding: var(--nx-space-3) var(--nx-space-4);
  border-bottom: 1px solid var(--nx-color-border);
  color: var(--nx-color-text-2);
}
[nx="table"][striped] tbody tr:nth-child(odd) td { background: var(--nx-color-surface-2); }
[nx="table"][hover] tbody tr:hover td { background: var(--nx-color-accent-lo); }

/* ═══════════════════════════════════════
   TABS  nx="tabs"
═══════════════════════════════════════ */
[nx="tabs"] {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--nx-color-border);
}
[nx="tab"] {
  padding: var(--nx-space-3) var(--nx-space-5);
  font-family: var(--nx-font-mono);
  font-size: var(--nx-text-sm);
  color: var(--nx-color-text-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--nx-duration-fast), border-color var(--nx-duration-fast);
  -webkit-user-select: none;
  user-select: none;
}
[nx="tab"]:hover             { color: var(--nx-color-text-2); }
[nx="tab"][active], [nx="tab"].active {
  color: var(--nx-color-accent);
  border-bottom-color: var(--nx-color-accent);
}

/* ═══════════════════════════════════════
   ACCORDION  nx="accordion"
═══════════════════════════════════════ */
[nx="accordion"] {
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-lg);
  overflow: hidden;
}
[nx="accordion-item"] {
  border-bottom: 1px solid var(--nx-color-border);
}
[nx="accordion-item"]:last-child { border-bottom: none; }
[nx="accordion-trigger"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--nx-space-4) var(--nx-space-5);
  background: none;
  border: none;
  color: var(--nx-color-text);
  font-family: var(--nx-font-body);
  font-size: var(--nx-text-base);
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background var(--nx-duration-fast);
}
[nx="accordion-trigger"]:hover { background: var(--nx-color-surface-2); }
[nx="accordion-trigger"]::after {
  content: '+';
  font-size: var(--nx-text-lg);
  color: var(--nx-color-accent);
  transition: transform var(--nx-duration-base) var(--nx-ease-spring);
  flex-shrink: 0;
}
[nx="accordion-trigger"][open]::after, [nx="accordion-trigger"].open::after { transform: rotate(45deg); }
[nx="accordion-content"] {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--nx-duration-slow) var(--nx-ease-default);
  padding: 0 var(--nx-space-5);
}
[nx="accordion-content"][open], [nx="accordion-content"].open {
  max-height: 600px;
  padding-bottom: var(--nx-space-4);
}

/* ═══════════════════════════════════════
   DROPDOWN  nx="dropdown"
═══════════════════════════════════════ */
[nx="dropdown"] { position: relative; display: inline-block; }
[nx="dropdown-menu"] {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  background: var(--nx-color-surface-2);
  border: 1px solid var(--nx-color-border-2);
  border-radius: var(--nx-radius-lg);
  padding: var(--nx-space-2);
  box-shadow: var(--nx-shadow-lg);
  z-index: var(--nx-z-dropdown);
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  pointer-events: none;
  transition: opacity var(--nx-duration-fast) var(--nx-ease-default), transform var(--nx-duration-fast) var(--nx-ease-spring);
}
[nx="dropdown-menu"][open], [nx="dropdown-menu"].open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}
[nx="dropdown-item"] {
  display: flex;
  align-items: center;
  gap: var(--nx-space-2);
  padding: var(--nx-space-2) var(--nx-space-3);
  border-radius: var(--nx-radius-sm);
  font-size: var(--nx-text-base);
  color: var(--nx-color-text-2);
  cursor: pointer;
  transition: background var(--nx-duration-fast), color var(--nx-duration-fast);
  -webkit-user-select: none;
  user-select: none;
}
[nx="dropdown-item"]:hover { background: var(--nx-color-accent-lo); color: var(--nx-color-accent); }

/* ═══════════════════════════════════════
   CARD HEADER / FOOTER helpers
═══════════════════════════════════════ */
[nx="card-header"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nx-space-3);
  margin-bottom: var(--nx-space-5);
  padding-bottom: var(--nx-space-4);
  border-bottom: 1px solid var(--nx-color-border);
}
[nx="card-footer"] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--nx-space-3);
  margin-top: var(--nx-space-5);
  padding-top: var(--nx-space-4);
  border-top: 1px solid var(--nx-color-border);
}

/* ═══════════════════════════════════════
   STAT  nx="stat"
═══════════════════════════════════════ */
[nx="stat"] {
  display: flex;
  flex-direction: column;
  gap: var(--nx-space-2);
}
[nx="stat-label"] {
  font-family: var(--nx-font-mono);
  font-size: var(--nx-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--nx-tracking-wider);
  color: var(--nx-color-text-3);
}
[nx="stat-value"] {
  font-family: var(--nx-font-display);
  font-size: var(--nx-text-4xl);
  font-weight: 800;
  color: var(--nx-color-text);
  line-height: 1;
  letter-spacing: var(--nx-tracking-tight);
}
[nx="stat-desc"] {
  font-size: var(--nx-text-sm);
  color: var(--nx-color-text-2);
}

/* ═══════════════════════════════════════
   GLOBAL ANIMATIONS
═══════════════════════════════════════ */
@keyframes nx-spin {
  to { transform: rotate(360deg); }
}
@keyframes nx-progress-slide {
  0%   { margin-left: -40%; }
  100% { margin-left: 100%; }
}
@keyframes nx-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
@keyframes nx-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}


/* ═══════════════════════════════════════════════════════════════
   FEATURE v2.1 — DRAWER  nx="drawer"
   Slide-in panel from any edge. Zero JS required for CSS part.
═══════════════════════════════════════════════════════════════ */

[nx="drawer-backdrop"] {
  position: fixed;
  inset: 0;
  background: var(--nx-color-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--nx-z-modal);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--nx-duration-base) var(--nx-ease-default);
  display: flex;
}
[nx="drawer-backdrop"][open] {
  opacity: 1;
  pointer-events: all;
}

[nx="drawer"] {
  position: fixed;
  z-index: calc(var(--nx-z-modal) + 1);
  background: var(--nx-color-surface);
  border-color: var(--nx-color-border-2);
  border-style: solid;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: transform var(--nx-duration-slow) var(--nx-ease-spring),
              opacity var(--nx-duration-base) var(--nx-ease-default);
  opacity: 0;
  pointer-events: none;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ── Left (default) ── */
[nx="drawer"],
[nx="drawer"][side="left"] {
  top: 0; bottom: 0; left: 0;
  width: min(320px, 85vw);
  border-width: 0 1px 0 0;
  transform: translateX(-100%);
  border-radius: 0 var(--nx-radius-xl) var(--nx-radius-xl) 0;
}
/* ── Right ── */
[nx="drawer"][side="right"] {
  top: 0; bottom: 0; right: 0; left: auto;
  width: min(320px, 85vw);
  border-width: 0 0 0 1px;
  transform: translateX(100%);
  border-radius: var(--nx-radius-xl) 0 0 var(--nx-radius-xl);
}
/* ── Bottom ── */
[nx="drawer"][side="bottom"] {
  bottom: 0; top: auto; left: 0; right: 0;
  width: 100%;
  height: min(480px, 85vh);
  border-width: 1px 0 0 0;
  transform: translateY(100%);
  border-radius: var(--nx-radius-xl) var(--nx-radius-xl) 0 0;
}
/* ── Top ── */
[nx="drawer"][side="top"] {
  top: 0; bottom: auto; left: 0; right: 0;
  width: 100%;
  height: min(320px, 60vh);
  border-width: 0 0 1px 0;
  transform: translateY(-100%);
  border-radius: 0 0 var(--nx-radius-xl) var(--nx-radius-xl);
}

/* Open state */
[nx="drawer"][open] {
  opacity: 1;
  pointer-events: all;
  transform: translate(0, 0);
}

/* Drawer sub-elements */
[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-color-border);
  flex-shrink: 0;
}
[nx="drawer-body"] {
  flex: 1;
  padding: var(--nx-space-6);
  overflow-y: auto;
}
[nx="drawer-footer"] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--nx-space-3);
  padding: var(--nx-space-5) var(--nx-space-6);
  border-top: 1px solid var(--nx-color-border);
  flex-shrink: 0;
}
[nx="drawer-close"] {
  background: none;
  border: none;
  color: var(--nx-color-text-3);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  padding: 4px;
  border-radius: var(--nx-radius-sm);
  transition: color var(--nx-duration-fast), background var(--nx-duration-fast);
}
[nx="drawer-close"]:hover {
  color: var(--nx-color-text);
  background: var(--nx-color-surface-3);
}

/* Size variants */
[nx="drawer"][size="sm"] { width: min(240px, 80vw); }
[nx="drawer"][size="lg"] { width: min(480px, 90vw); }
[nx="drawer"][size="xl"] { width: min(640px, 95vw); }
[nx="drawer"][side="bottom"][size="sm"] { height: min(280px, 50vh); width: 100%; }
[nx="drawer"][side="bottom"][size="lg"] { height: min(640px, 90vh); width: 100%; }

/* Handle bar for bottom/top drawers */
[nx="drawer"][side="bottom"]::before,
[nx="drawer"][side="top"]::after {
  content: '';
  display: block;
  width: 40px;
  height: 4px;
  border-radius: var(--nx-radius-full);
  background: var(--nx-color-border-2);
  margin: 12px auto 4px;
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════
   FEATURE v2.1 — COMMAND PALETTE  nx="command"
   Cmd+K searchable command menu
═══════════════════════════════════════════════════════════════ */

[nx="command-backdrop"] {
  position: fixed;
  inset: 0;
  background: var(--nx-color-overlay);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--nx-z-top);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--nx-duration-fast) var(--nx-ease-default);
}
[nx="command-backdrop"][open] {
  opacity: 1;
  pointer-events: all;
}

[nx="command"] {
  width: min(580px, 90vw);
  background: var(--nx-color-surface);
  border: 1px solid var(--nx-color-border-2);
  border-radius: var(--nx-radius-xl);
  box-shadow: var(--nx-shadow-xl), var(--nx-shadow-glow-lg);
  overflow: hidden;
  transform: scale(0.94) translateY(-16px);
  transition: transform var(--nx-duration-base) var(--nx-ease-spring);
}
[nx="command-backdrop"][open] [nx="command"] {
  transform: scale(1) translateY(0);
}

[nx="command-input-wrap"] {
  display: flex;
  align-items: center;
  gap: var(--nx-space-3);
  padding: var(--nx-space-4) var(--nx-space-5);
  border-bottom: 1px solid var(--nx-color-border);
}
[nx="command-input-wrap"]::before {
  content: '⌘';
  color: var(--nx-color-text-3);
  font-size: 18px;
  flex-shrink: 0;
}
[nx="command-input"] {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--nx-color-text);
  font-family: var(--nx-font-body);
  font-size: var(--nx-text-md);
  line-height: var(--nx-leading-normal);
}
[nx="command-input"]::placeholder {
  color: var(--nx-color-text-3);
}

[nx="command-list"] {
  max-height: 360px;
  overflow-y: auto;
  padding: var(--nx-space-2);
  scrollbar-width: thin;
}

[nx="command-group"] {
  margin-bottom: var(--nx-space-1);
}
[nx="command-group-label"] {
  font-family: var(--nx-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--nx-tracking-wider);
  color: var(--nx-color-text-3);
  padding: var(--nx-space-2) var(--nx-space-3) var(--nx-space-1);
}

[nx="command-item"] {
  display: flex;
  align-items: center;
  gap: var(--nx-space-3);
  padding: var(--nx-space-3) var(--nx-space-3);
  border-radius: var(--nx-radius-md);
  cursor: pointer;
  color: var(--nx-color-text-2);
  font-size: var(--nx-text-base);
  transition: background var(--nx-duration-fast), color var(--nx-duration-fast);
  -webkit-user-select: none;
  user-select: none;
}
[nx="command-item"]:hover,
[nx="command-item"][active],
[nx="command-item"].nx-active {
  background: var(--nx-color-accent-lo);
  color: var(--nx-color-text);
}
[nx="command-item"] .cmd-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--nx-radius-sm);
  background: var(--nx-color-surface-3);
  border: 1px solid var(--nx-color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
[nx="command-item"] .cmd-label { flex: 1; }
[nx="command-item"] .cmd-shortcut {
  font-family: var(--nx-font-mono);
  font-size: 11px;
  color: var(--nx-color-text-3);
  background: var(--nx-color-surface-3);
  border: 1px solid var(--nx-color-border);
  padding: 2px 6px;
  border-radius: var(--nx-radius-xs);
}
[nx="command-item"][hidden] { display: none; }

[nx="command-empty"] {
  text-align: center;
  padding: var(--nx-space-7) var(--nx-space-5);
  color: var(--nx-color-text-3);
  font-size: var(--nx-text-sm);
  display: none;
}
[nx="command-empty"].visible { display: block; }

[nx="command-footer"] {
  display: flex;
  align-items: center;
  gap: var(--nx-space-4);
  padding: var(--nx-space-3) var(--nx-space-5);
  border-top: 1px solid var(--nx-color-border);
  background: var(--nx-color-surface-2);
}
[nx="command-footer"] .cmd-hint {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--nx-font-mono);
  font-size: 10px;
  color: var(--nx-color-text-3);
}
[nx="command-footer"] .cmd-hint kbd {
  background: var(--nx-color-surface-3);
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-xs);
  padding: 1px 5px;
  font-size: 10px;
}


/* ═══════════════════════════════════════════════════════════════
   FEATURE v2.1 — CAROUSEL  nx="carousel"
   Responsive touch/drag slider
═══════════════════════════════════════════════════════════════ */

[nx="carousel"] {
  position: relative;
  overflow: hidden;
  border-radius: var(--nx-radius-lg);
  --nx-carousel-index: 0;
  --nx-carousel-gap: 16px;
  --nx-carousel-per-view: 1;
}

[nx="carousel-track"] {
  display: flex;
  gap: var(--nx-carousel-gap);
  transition: transform var(--nx-duration-slow) var(--nx-ease-spring);
  transform: translateX(calc(
    (-100% / var(--nx-carousel-per-view) - var(--nx-carousel-gap)) *
    var(--nx-carousel-index)
  ));
  will-change: transform;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
[nx="carousel-track"]:active { cursor: grabbing; }

[nx="carousel-slide"] {
  flex: 0 0 calc(
    (100% - var(--nx-carousel-gap) * (var(--nx-carousel-per-view) - 1))
    / var(--nx-carousel-per-view)
  );
  min-width: 0;
}

/* Per-view variants */
[nx="carousel"][per-view="2"] { --nx-carousel-per-view: 2; }
[nx="carousel"][per-view="3"] { --nx-carousel-per-view: 3; }
[nx="carousel"][per-view="4"] { --nx-carousel-per-view: 4; }
@media (max-width: 768px) {
  [nx="carousel"][per-view="3"],
  [nx="carousel"][per-view="4"] { --nx-carousel-per-view: 2; }
}
@media (max-width: 480px) {
  [nx="carousel"][per-view="2"],
  [nx="carousel"][per-view="3"],
  [nx="carousel"][per-view="4"] { --nx-carousel-per-view: 1; }
}

/* Nav buttons */
[nx="carousel-prev"],
[nx="carousel-next"] {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  border-radius: var(--nx-radius-full);
  background: var(--nx-color-surface-2);
  border: 1px solid var(--nx-color-border-2);
  color: var(--nx-color-text);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--nx-duration-fast), box-shadow var(--nx-duration-fast), transform var(--nx-duration-fast);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
[nx="carousel-prev"] { left: var(--nx-space-4); }
[nx="carousel-next"] { right: var(--nx-space-4); }
[nx="carousel-prev"]:hover,
[nx="carousel-next"]:hover {
  background: var(--nx-color-accent-lo);
  border-color: var(--nx-color-border-3);
  box-shadow: var(--nx-shadow-glow);
  transform: translateY(-50%) scale(1.1);
}
[nx="carousel-prev"][disabled],
[nx="carousel-next"][disabled] {
  opacity: 0.3;
  pointer-events: none;
}

/* Dots */
[nx="carousel-dots"] {
  display: flex;
  justify-content: center;
  gap: var(--nx-space-2);
  padding: var(--nx-space-4) 0 0;
}
[nx="carousel-dot"] {
  width: 8px;
  height: 8px;
  border-radius: var(--nx-radius-full);
  background: var(--nx-color-surface-3);
  border: 1px solid var(--nx-color-border);
  cursor: pointer;
  transition: all var(--nx-duration-fast) var(--nx-ease-spring);
}
[nx="carousel-dot"][active],
[nx="carousel-dot"].active {
  width: 24px;
  background: var(--nx-color-accent);
  border-color: var(--nx-color-accent);
}

/* Autoplay progress bar */
[nx="carousel"][autoplay]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--nx-color-accent);
  animation: nx-carousel-progress var(--nx-carousel-duration, 3s) linear infinite;
}
@keyframes nx-carousel-progress {
  from { width: 0%; }
  to   { width: 100%; }
}


/* ═══════════════════════════════════════════════════════════════
   FEATURE v2.1 — CONTAINER QUERIES
   Component-level responsive — @container based
═══════════════════════════════════════════════════════════════ */

[nx-container] {
  container-type: inline-size;
  container-name: attr(nx-container);
  width: 100%;
}

/* Card adapts to its container, not the viewport */
@container (max-width: 400px) {
  [nx="card"] [nx="card-header"] { flex-direction: column; align-items: flex-start; }
  [nx="card"] [nx="grid"] { grid-template-columns: 1fr !important; }
  [nx="stat-value"] { font-size: var(--nx-text-2xl); }
}
@container (min-width: 600px) {
  [nx="card"][cq-wide] { display: grid; grid-template-columns: 200px 1fr; gap: var(--nx-space-5); }
}

/* Responsive utility: nx-cq="hide-sm / show-sm / stack-sm" */
[nx-cq="hide-sm"] { display: block; }
[nx-cq="show-sm"] { display: none; }
[nx-cq="stack-sm"] { display: flex; flex-direction: row; gap: var(--nx-space-4); }

@container (max-width: 480px) {
  [nx-cq="hide-sm"]  { display: none !important; }
  [nx-cq="show-sm"]  { display: block !important; }
  [nx-cq="stack-sm"] { flex-direction: column !important; }
}
@container (max-width: 480px) {
  [nx-cq="cols-1"] { grid-template-columns: 1fr !important; }
}
@container (min-width: 481px) and (max-width: 768px) {
  [nx-cq="cols-2"] { grid-template-columns: repeat(2, 1fr) !important; }
}


/* ═══════════════════════════════════════════════════════════════
   FEATURE v2.1 — DATA GRID  nx="data-grid"
   Sortable, filterable, paginated table
═══════════════════════════════════════════════════════════════ */

[nx="data-grid"] {
  width: 100%;
  background: var(--nx-color-surface);
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-lg);
  overflow: hidden;
}

[nx="data-grid-toolbar"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nx-space-4);
  padding: var(--nx-space-4) var(--nx-space-5);
  border-bottom: 1px solid var(--nx-color-border);
  background: var(--nx-color-surface-2);
  flex-wrap: wrap;
}
[nx="data-grid-search"] {
  display: flex;
  align-items: center;
  gap: var(--nx-space-2);
  background: var(--nx-color-surface-3);
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-md);
  padding: 6px 12px;
  min-width: 220px;
}
[nx="data-grid-search"]::before { content: '⌕'; color: var(--nx-color-text-3); font-size: 16px; }
[nx="data-grid-search"] input {
  background: none;
  border: none;
  outline: none;
  color: var(--nx-color-text);
  font-family: var(--nx-font-body);
  font-size: var(--nx-text-sm);
  width: 100%;
}
[nx="data-grid-search"] input::placeholder { color: var(--nx-color-text-3); }

[nx="data-grid-wrap"] {
  overflow-x: auto;
}

[nx="data-grid"] table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--nx-text-sm);
  min-width: 500px;
}
[nx="data-grid"] th {
  background: var(--nx-color-surface-2);
  color: var(--nx-color-text-3);
  font-family: var(--nx-font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--nx-tracking-wide);
  padding: var(--nx-space-3) var(--nx-space-4);
  text-align: left;
  border-bottom: 1px solid var(--nx-color-border);
  white-space: nowrap;
  position: relative;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: color var(--nx-duration-fast), background var(--nx-duration-fast);
}
[nx="data-grid"] th:hover { color: var(--nx-color-text); background: var(--nx-color-surface-3); }
[nx="data-grid"] th[sort="asc"]::after  { content: ' ↑'; color: var(--nx-color-accent); }
[nx="data-grid"] th[sort="desc"]::after { content: ' ↓'; color: var(--nx-color-accent); }
[nx="data-grid"] th[sort="asc"],
[nx="data-grid"] th[sort="desc"] { color: var(--nx-color-accent); }

[nx="data-grid"] td {
  padding: var(--nx-space-3) var(--nx-space-4);
  border-bottom: 1px solid var(--nx-color-border);
  color: var(--nx-color-text-2);
  vertical-align: middle;
  transition: background var(--nx-duration-fast);
}
[nx="data-grid"] tbody tr:last-child td { border-bottom: none; }
[nx="data-grid"] tbody tr:hover td { background: var(--nx-color-accent-lo); }
[nx="data-grid"] tbody tr.selected td { background: var(--nx-color-accent-lo); border-left: 2px solid var(--nx-color-accent); }
[nx="data-grid"] td:first-child { color: var(--nx-color-text); font-weight: 500; }
[nx="data-grid"][striped] tbody tr:nth-child(odd) td { background: var(--nx-color-surface-2); }

/* Pagination */
[nx="data-grid-pagination"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--nx-space-3) var(--nx-space-5);
  border-top: 1px solid var(--nx-color-border);
  background: var(--nx-color-surface-2);
  flex-wrap: wrap;
  gap: var(--nx-space-3);
}
[nx="data-grid-info"] {
  font-family: var(--nx-font-mono);
  font-size: 11px;
  color: var(--nx-color-text-3);
}
[nx="data-grid-pages"] { display: flex; gap: var(--nx-space-1); align-items: center; }
[nx="data-grid-page"] {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--nx-radius-sm);
  font-family: var(--nx-font-mono);
  font-size: 12px;
  color: var(--nx-color-text-3);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--nx-duration-fast);
  background: none;
}
[nx="data-grid-page"]:hover { border-color: var(--nx-color-border); color: var(--nx-color-text); }
[nx="data-grid-page"][active] {
  background: var(--nx-color-accent);
  color: var(--nx-color-text-inv);
  border-color: var(--nx-color-accent);
  font-weight: 700;
}
[nx="data-grid-page"][disabled] { opacity: 0.3; pointer-events: none; }

/* Empty state */
[nx="data-grid-empty"] {
  text-align: center;
  padding: var(--nx-space-9) var(--nx-space-5);
  color: var(--nx-color-text-3);
  font-size: var(--nx-text-sm);
  display: none;
}
[nx="data-grid-empty"].visible { display: block; }


/* ═══════════════════════════════════════════════════════════════
   FEATURE v2.1 — TOOLTIP  nx="tooltip"
═══════════════════════════════════════════════════════════════ */
[nx-tip] {
  position: relative;
}
[nx-tip]::before {
  content: attr(nx-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.88);
  background: var(--nx-color-surface-3);
  color: var(--nx-color-text);
  border: 1px solid var(--nx-color-border-2);
  border-radius: var(--nx-radius-md);
  padding: 6px 10px;
  font-size: 12px;
  font-family: var(--nx-font-body);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: var(--nx-z-tooltip, 9000);
  box-shadow: var(--nx-shadow-lg);
  transition: opacity 0.15s, transform 0.15s var(--nx-ease-spring);
  backdrop-filter: blur(8px);
  max-width: 240px;
  white-space: normal;
  text-align: center;
}
[nx-tip]::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--nx-color-border-2);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: calc(var(--nx-z-tooltip, 9000) + 1);
}
[nx-tip]:hover::before,
[nx-tip]:focus-visible::before { opacity: 1; transform: translateX(-50%) scale(1); }
[nx-tip]:hover::after,
[nx-tip]:focus-visible::after  { opacity: 1; }

/* Side variants */
[nx-tip][tip-side="bottom"]::before {
  top: calc(100% + 8px); bottom: auto;
  transform: translateX(-50%) scale(0.88);
}
[nx-tip][tip-side="bottom"]:hover::before { transform: translateX(-50%) scale(1); }
[nx-tip][tip-side="bottom"]::after {
  top: calc(100% + 2px); bottom: auto;
  border-top-color: transparent;
  border-bottom-color: var(--nx-color-border-2);
}
[nx-tip][tip-side="left"]::before {
  right: calc(100% + 8px); left: auto; bottom: auto; top: 50%;
  transform: translateY(-50%) scale(0.88);
}
[nx-tip][tip-side="left"]:hover::before { transform: translateY(-50%) scale(1); }
[nx-tip][tip-side="right"]::before {
  left: calc(100% + 8px); bottom: auto; top: 50%;
  transform: translateY(-50%) scale(0.88);
}
[nx-tip][tip-side="right"]:hover::before { transform: translateY(-50%) scale(1); }

/* Tone variants */
[nx-tip][tip-tone="ok"]::before    { background: var(--nx-color-ok-lo); border-color: var(--nx-color-ok); color: var(--nx-color-ok); }
[nx-tip][tip-tone="err"]::before   { background: var(--nx-color-err-lo); border-color: var(--nx-color-err); color: var(--nx-color-err); }
[nx-tip][tip-tone="warn"]::before  { background: var(--nx-color-warn-lo); border-color: var(--nx-color-warn); color: var(--nx-color-warn); }
[nx-tip][tip-tone="accent"]::before { background: var(--nx-color-accent-lo); border-color: var(--nx-color-accent); color: var(--nx-color-accent); }


/* ═══════════════════════════════════════════════════════════════
   FEATURE v2.1 — RATING  nx="rating"
═══════════════════════════════════════════════════════════════ */
[nx="rating"] {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  --nx-rating-color: var(--nx-color-warn);
  --nx-rating-size: 24px;
}
[nx="rating"][size="sm"] { --nx-rating-size: 16px; gap: 2px; }
[nx="rating"][size="lg"] { --nx-rating-size: 32px; gap: 6px; }
[nx="rating"][size="xl"] { --nx-rating-size: 40px; gap: 8px; }

[nx="rating-star"] {
  width: var(--nx-rating-size);
  height: var(--nx-rating-size);
  cursor: pointer;
  color: var(--nx-color-surface-3);
  transition: color 0.1s, transform 0.1s var(--nx-ease-spring);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--nx-rating-size);
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
}
[nx="rating-star"]::before { content: '★'; }
[nx="rating-star"].filled,
[nx="rating-star"].hover  { color: var(--nx-rating-color); transform: scale(1.15); }
[nx="rating-star"].half   { color: var(--nx-rating-color); opacity: 0.5; }

[nx="rating"][readonly] [nx="rating-star"] { cursor: default; }
[nx="rating"][readonly] [nx="rating-star"]:hover { transform: none; }

[nx="rating-value"] {
  font-family: var(--nx-font-mono);
  font-size: 13px;
  color: var(--nx-color-text-3);
  margin-left: 6px;
}


/* ═══════════════════════════════════════════════════════════════
   FEATURE v2.1 — TIMELINE  nx="timeline"
═══════════════════════════════════════════════════════════════ */
[nx="timeline"] {
  position: relative;
  padding-left: 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
[nx="timeline"]::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, var(--nx-color-accent), var(--nx-color-border));
}

[nx="timeline-item"] {
  position: relative;
  padding: 0 0 var(--nx-space-7) 20px;
  animation: nx-fade-up 0.4s var(--nx-ease-spring) both;
}
[nx="timeline-item"]:last-child { padding-bottom: 0; }

[nx="timeline-item"]::before {
  content: '';
  position: absolute;
  left: -21px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--nx-color-accent);
  border: 2px solid var(--nx-color-bg);
  box-shadow: 0 0 0 3px var(--nx-color-accent-lo), var(--nx-shadow-glow);
  z-index: 1;
  transition: transform 0.2s var(--nx-ease-spring), box-shadow 0.2s;
}
[nx="timeline-item"]:hover::before {
  transform: scale(1.4);
  box-shadow: 0 0 0 4px var(--nx-color-accent-lo), var(--nx-shadow-glow);
}

[nx="timeline-item"][tone="ok"]::before   { background: var(--nx-color-ok); box-shadow: 0 0 0 3px var(--nx-color-ok-lo); }
[nx="timeline-item"][tone="err"]::before  { background: var(--nx-color-err); box-shadow: 0 0 0 3px var(--nx-color-err-lo); }
[nx="timeline-item"][tone="warn"]::before { background: var(--nx-color-warn); box-shadow: 0 0 0 3px var(--nx-color-warn-lo); }
[nx="timeline-item"][tone="info"]::before { background: var(--nx-color-info); box-shadow: 0 0 0 3px var(--nx-color-info-lo); }
[nx="timeline-item"][current]::before     { animation: nx-pulse-ring 1.5s infinite; }

@keyframes nx-pulse-ring {
  0%   { box-shadow: 0 0 0 3px var(--nx-color-accent-lo), 0 0 0 6px rgba(0,229,255,0); }
  50%  { box-shadow: 0 0 0 5px var(--nx-color-accent-lo), 0 0 0 10px rgba(0,229,255,0.1); }
  100% { box-shadow: 0 0 0 3px var(--nx-color-accent-lo), 0 0 0 6px rgba(0,229,255,0); }
}

[nx="timeline-time"] {
  font-family: var(--nx-font-mono);
  font-size: 11px;
  color: var(--nx-color-text-3);
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}
[nx="timeline-title"] {
  font-weight: 600;
  font-size: var(--nx-text-base);
  color: var(--nx-color-text);
  margin-bottom: 4px;
}
[nx="timeline-body"] {
  font-size: var(--nx-text-sm);
  color: var(--nx-color-text-2);
  line-height: var(--nx-leading-relaxed);
}


/* ═══════════════════════════════════════════════════════════════
   FEATURE v2.1 — STEPPER  nx="stepper"
═══════════════════════════════════════════════════════════════ */
[nx="stepper"] {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  margin-bottom: var(--nx-space-8);
  --nx-step-active: 0;
}

[nx="step"] {
  display: flex;
  align-items: center;
  flex: 1;
  position: relative;
}
[nx="step"]:last-child { flex: 0; }
[nx="step"]:last-child [nx="step-line"] { display: none; }

[nx="step-dot"] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--nx-color-border);
  background: var(--nx-color-surface);
  color: var(--nx-color-text-3);
  font-family: var(--nx-font-mono);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 1;
  transition: all 0.25s var(--nx-ease-spring);
  position: relative;
}
[nx="step-label"] {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 12px;
  color: var(--nx-color-text-3);
  font-weight: 500;
  transition: color 0.2s;
}
[nx="step-line"] {
  flex: 1;
  height: 2px;
  background: var(--nx-color-border);
  margin: 0 4px;
  border-radius: 2px;
  transition: background 0.4s;
  overflow: hidden;
  position: relative;
}
[nx="step-line"]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--nx-color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--nx-ease-spring);
}

/* Active step */
[nx="step"][active] [nx="step-dot"],
[nx="step"][current] [nx="step-dot"] {
  border-color: var(--nx-color-accent);
  background: var(--nx-color-accent-lo);
  color: var(--nx-color-accent);
  box-shadow: 0 0 0 4px var(--nx-color-accent-lo);
}
[nx="step"][current] [nx="step-dot"] {
  background: var(--nx-color-accent);
  color: var(--nx-color-text-inv);
  box-shadow: 0 0 0 4px var(--nx-color-accent-lo), var(--nx-shadow-glow);
}
[nx="step"][active] [nx="step-label"],
[nx="step"][current] [nx="step-label"] { color: var(--nx-color-accent); font-weight: 600; }
[nx="step"][active] [nx="step-line"]::after { transform: scaleX(1); }

/* Step content panels */
[nx="step-panel"] { display: none; animation: nx-fade-up 0.3s var(--nx-ease-spring); }
[nx="step-panel"][active] { display: block; }

/* Step nav */
[nx="step-nav"] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--nx-space-6);
  padding-top: var(--nx-space-5);
  border-top: 1px solid var(--nx-color-border);
}


/* ═══════════════════════════════════════════════════════════════
   FEATURE v2.1 — DATE PICKER  nx="date-picker"
═══════════════════════════════════════════════════════════════ */
[nx="date-picker"] {
  position: relative;
  display: inline-block;
}
[nx="date-input"] {
  display: flex;
  align-items: center;
  gap: var(--nx-space-3);
  background: var(--nx-color-surface);
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-md);
  padding: 10px 14px;
  cursor: pointer;
  color: var(--nx-color-text);
  font-family: var(--nx-font-body);
  font-size: var(--nx-text-base);
  transition: border-color 0.15s, box-shadow 0.15s;
  min-width: 180px;
  user-select: none;
  -webkit-user-select: none;
}
[nx="date-input"]:hover { border-color: var(--nx-color-border-2); }
[nx="date-input"][open],
[nx="date-input"]:focus { border-color: var(--nx-color-accent); box-shadow: 0 0 0 3px var(--nx-color-accent-lo); outline: none; }
[nx="date-input"]::before { content: '📅'; font-size: 16px; }

[nx="date-calendar"] {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--nx-color-surface);
  border: 1px solid var(--nx-color-border-2);
  border-radius: var(--nx-radius-xl);
  box-shadow: var(--nx-shadow-xl);
  z-index: var(--nx-z-dropdown, 400);
  width: 280px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(0.97);
  transition: opacity 0.15s, transform 0.15s var(--nx-ease-spring);
}
[nx="date-calendar"][open] {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0) scale(1);
}

[nx="date-nav"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--nx-color-border);
}
[nx="date-nav"] button {
  background: none;
  border: none;
  color: var(--nx-color-text-3);
  cursor: pointer;
  font-size: 18px;
  padding: 4px 8px;
  border-radius: var(--nx-radius-sm);
  transition: background 0.1s, color 0.1s;
}
[nx="date-nav"] button:hover { background: var(--nx-color-surface-3); color: var(--nx-color-text); }
[nx="date-month-label"] {
  font-weight: 700;
  font-size: 14px;
  color: var(--nx-color-text);
  cursor: pointer;
}
[nx="date-month-label"]:hover { color: var(--nx-color-accent); }

[nx="date-weekdays"] {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 8px 12px 4px;
}
[nx="date-weekdays"] span {
  text-align: center;
  font-family: var(--nx-font-mono);
  font-size: 10px;
  color: var(--nx-color-text-3);
  padding: 4px 0;
  text-transform: uppercase;
}

[nx="date-grid"] {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  padding: 4px 12px 12px;
}
[nx="date-day"] {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border-radius: var(--nx-radius-sm);
  cursor: pointer;
  color: var(--nx-color-text-2);
  transition: background 0.1s, color 0.1s;
  font-family: var(--nx-font-mono);
}
[nx="date-day"]:hover           { background: var(--nx-color-surface-3); color: var(--nx-color-text); }
[nx="date-day"][today]          { color: var(--nx-color-accent); font-weight: 700; }
[nx="date-day"][selected]       { background: var(--nx-color-accent); color: var(--nx-color-text-inv); font-weight: 700; border-radius: var(--nx-radius-md); }
[nx="date-day"][other-month]    { color: var(--nx-color-text-3); opacity: 0.4; }
[nx="date-day"][disabled]       { opacity: 0.2; pointer-events: none; }
[nx="date-day"][in-range]       { background: var(--nx-color-accent-lo); border-radius: 0; }
[nx="date-day"][range-start]    { background: var(--nx-color-accent); color: var(--nx-color-text-inv); border-radius: var(--nx-radius-md) 0 0 var(--nx-radius-md); }
[nx="date-day"][range-end]      { background: var(--nx-color-accent); color: var(--nx-color-text-inv); border-radius: 0 var(--nx-radius-md) var(--nx-radius-md) 0; }


/* ═══════════════════════════════════════════════════════════════
   FEATURE v2.1 — FILE UPLOAD  nx="file-upload"
═══════════════════════════════════════════════════════════════ */
[nx="file-upload"] {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--nx-space-3);
  padding: var(--nx-space-8) var(--nx-space-6);
  border: 2px dashed var(--nx-color-border);
  border-radius: var(--nx-radius-xl);
  background: var(--nx-color-surface);
  cursor: pointer;
  text-align: center;
  transition: all 0.2s var(--nx-ease-spring);
  min-height: 160px;
}
[nx="file-upload"]:hover,
[nx="file-upload"][drag-over] {
  border-color: var(--nx-color-accent);
  background: var(--nx-color-accent-lo);
  box-shadow: 0 0 0 4px var(--nx-color-accent-lo), var(--nx-shadow-glow);
  transform: scale(1.01);
}
[nx="file-upload"] input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
[nx="file-upload-icon"] {
  font-size: 40px;
  line-height: 1;
  transition: transform 0.2s var(--nx-ease-spring);
}
[nx="file-upload"]:hover [nx="file-upload-icon"],
[nx="file-upload"][drag-over] [nx="file-upload-icon"] { transform: scale(1.2) translateY(-4px); }

[nx="file-upload-label"] {
  font-weight: 600;
  font-size: var(--nx-text-base);
  color: var(--nx-color-text);
}
[nx="file-upload-hint"] {
  font-size: var(--nx-text-xs);
  color: var(--nx-color-text-3);
  font-family: var(--nx-font-mono);
}
[nx="file-upload"][drag-over] [nx="file-upload-label"] { color: var(--nx-color-accent); }

[nx="file-list"] {
  display: flex;
  flex-direction: column;
  gap: var(--nx-space-2);
  margin-top: var(--nx-space-3);
  width: 100%;
}
[nx="file-item"] {
  display: flex;
  align-items: center;
  gap: var(--nx-space-3);
  padding: var(--nx-space-3) var(--nx-space-4);
  background: var(--nx-color-surface-2);
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-md);
  animation: nx-fade-up 0.2s var(--nx-ease-spring);
}
[nx="file-item-icon"] { font-size: 20px; flex-shrink: 0; }
[nx="file-item-info"] { flex: 1; min-width: 0; }
[nx="file-item-name"] { font-size: 13px; font-weight: 500; color: var(--nx-color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[nx="file-item-size"] { font-size: 11px; color: var(--nx-color-text-3); font-family: var(--nx-font-mono); }
[nx="file-item-remove"] {
  background: none; border: none; color: var(--nx-color-text-3);
  cursor: pointer; font-size: 16px; padding: 2px 6px;
  border-radius: var(--nx-radius-sm); flex-shrink: 0;
  transition: color 0.1s, background 0.1s;
}
[nx="file-item-remove"]:hover { color: var(--nx-color-err); background: var(--nx-color-err-lo); }

/* Upload progress */
[nx="file-upload"][uploading] { pointer-events: none; }
[nx="file-upload-progress"] {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--nx-color-surface-3);
  border-radius: 0 0 var(--nx-radius-xl) var(--nx-radius-xl);
  overflow: hidden;
}
[nx="file-upload-progress-bar"] {
  height: 100%;
  background: var(--nx-color-accent);
  border-radius: inherit;
  transition: width 0.3s var(--nx-ease-spring);
}


/* ═══════════════════════════════════════════════════════════════
   FEATURE v2.1 — COLOR PICKER  nx="color-picker"
═══════════════════════════════════════════════════════════════ */
[nx="color-picker"] {
  display: inline-flex;
  flex-direction: column;
  gap: var(--nx-space-3);
}

[nx="color-trigger"] {
  display: inline-flex;
  align-items: center;
  gap: var(--nx-space-3);
  background: var(--nx-color-surface);
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-md);
  padding: 8px 12px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-size: 13px;
  color: var(--nx-color-text);
  font-family: var(--nx-font-mono);
  min-width: 140px;
}
[nx="color-trigger"]:hover { border-color: var(--nx-color-border-2); }
[nx="color-trigger"][open] { border-color: var(--nx-color-accent); box-shadow: 0 0 0 3px var(--nx-color-accent-lo); }

[nx="color-swatch-preview"] {
  width: 20px;
  height: 20px;
  border-radius: var(--nx-radius-sm);
  border: 1px solid rgba(255,255,255,0.15);
  flex-shrink: 0;
  transition: transform 0.15s;
}
[nx="color-trigger"]:hover [nx="color-swatch-preview"] { transform: scale(1.2); }

[nx="color-panel"] {
  background: var(--nx-color-surface);
  border: 1px solid var(--nx-color-border-2);
  border-radius: var(--nx-radius-xl);
  padding: var(--nx-space-4);
  box-shadow: var(--nx-shadow-xl);
  display: none;
  flex-direction: column;
  gap: var(--nx-space-3);
  width: 260px;
  animation: nx-fade-up 0.15s var(--nx-ease-spring);
}
[nx="color-panel"][open] { display: flex; }

[nx="color-swatches"] {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}
[nx="color-swatch"] {
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--nx-radius-sm);
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.12s var(--nx-ease-spring), border-color 0.12s;
}
[nx="color-swatch"]:hover  { transform: scale(1.25); }
[nx="color-swatch"][active] { border-color: #fff; transform: scale(1.2); box-shadow: 0 0 0 2px rgba(0,0,0,0.3); }

[nx="color-hex-input"] {
  display: flex;
  align-items: center;
  gap: var(--nx-space-2);
  background: var(--nx-color-surface-3);
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-md);
  padding: 8px 12px;
}
[nx="color-hex-input"]::before { content: '#'; font-family: var(--nx-font-mono); color: var(--nx-color-text-3); font-size: 14px; }
[nx="color-hex-input"] input {
  background: none; border: none; outline: none;
  color: var(--nx-color-text); font-family: var(--nx-font-mono);
  font-size: 14px; width: 100%; letter-spacing: 1px;
}

[nx="color-native"] {
  width: 100%; height: 36px;
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-md);
  cursor: pointer; padding: 2px;
  background: var(--nx-color-surface-3);
}


/* ═══════════════════════════════════════════════════════════════
   FEATURE v2.1 — KANBAN  nx="kanban"
═══════════════════════════════════════════════════════════════ */
[nx="kanban"] {
  display: flex;
  gap: var(--nx-space-4);
  overflow-x: auto;
  align-items: flex-start;
  padding-bottom: var(--nx-space-4);
  scrollbar-width: thin;
}

[nx="kanban-col"] {
  flex: 0 0 280px;
  background: var(--nx-color-surface-2);
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-xl);
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 120px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
[nx="kanban-col"][drag-over] {
  border-color: var(--nx-color-accent);
  box-shadow: 0 0 0 3px var(--nx-color-accent-lo);
}

[nx="kanban-col-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-color-border);
}
[nx="kanban-col-title"] {
  font-weight: 700;
  font-size: 13px;
  color: var(--nx-color-text);
  font-family: var(--nx-font-mono);
  text-transform: uppercase;
  letter-spacing: 1px;
}
[nx="kanban-col-count"] {
  font-family: var(--nx-font-mono);
  font-size: 11px;
  background: var(--nx-color-surface-3);
  border: 1px solid var(--nx-color-border);
  border-radius: 99px;
  padding: 2px 8px;
  color: var(--nx-color-text-3);
}

[nx="kanban-cards"] {
  display: flex;
  flex-direction: column;
  gap: var(--nx-space-2);
  padding: var(--nx-space-3);
  min-height: 60px;
  flex: 1;
}

[nx="kanban-card"] {
  background: var(--nx-color-surface);
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-lg);
  padding: var(--nx-space-4);
  cursor: grab;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s, opacity 0.2s;
  user-select: none;
  -webkit-user-select: none;
  position: relative;
}
[nx="kanban-card"]:hover {
  border-color: var(--nx-color-border-2);
  box-shadow: var(--nx-shadow-md);
  transform: translateY(-2px);
}
[nx="kanban-card"]:active,
[nx="kanban-card"].dragging {
  cursor: grabbing;
  box-shadow: var(--nx-shadow-xl), var(--nx-shadow-glow);
  transform: rotate(2deg) scale(1.03);
  border-color: var(--nx-color-accent);
  opacity: 0.9;
  z-index: 100;
}
[nx="kanban-card"][placeholder] {
  opacity: 0;
  pointer-events: none;
}

[nx="kanban-card-title"] { font-weight: 600; font-size: 13px; color: var(--nx-color-text); margin-bottom: 6px; }
[nx="kanban-card-desc"]  { font-size: 12px; color: var(--nx-color-text-3); line-height: 1.5; }
[nx="kanban-card-meta"]  { display: flex; align-items: center; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
[nx="kanban-card-avatar"]{ width: 22px; height: 22px; border-radius: 50%; background: var(--nx-color-accent-lo); border: 1px solid var(--nx-color-border-2); display:flex; align-items:center; justify-content:center; font-size:10px; }

/* Column accent colors */
[nx="kanban-col"][tone="warn"] [nx="kanban-col-header"] { border-bottom-color: rgba(255,204,0,0.2); }
[nx="kanban-col"][tone="warn"] [nx="kanban-col-title"] { color: var(--nx-color-warn); }
[nx="kanban-col"][tone="ok"] [nx="kanban-col-title"]   { color: var(--nx-color-ok); }
[nx="kanban-col"][tone="err"] [nx="kanban-col-title"]  { color: var(--nx-color-err); }
[nx="kanban-col"][tone="info"] [nx="kanban-col-title"] { color: var(--nx-color-info); }

[nx="kanban-add"] {
  background: none;
  border: 1px dashed var(--nx-color-border);
  border-radius: var(--nx-radius-md);
  color: var(--nx-color-text-3);
  font-size: 13px;
  padding: var(--nx-space-3);
  cursor: pointer;
  width: 100%;
  transition: all 0.15s;
  margin: 0 var(--nx-space-3) var(--nx-space-3);
  width: calc(100% - var(--nx-space-6));
}
[nx="kanban-add"]:hover { border-color: var(--nx-color-accent); color: var(--nx-color-accent); background: var(--nx-color-accent-lo); }


/* ═══════════════════════════════════════════════════════════════
   BOOTSTRAP PARITY — FORM CONTROLS
═══════════════════════════════════════════════════════════════ */

/* ── nx="form" with validation ── */
[nx="form"] {
  display: flex;
  flex-direction: column;
  gap: var(--nx-space-5);
}
[nx="field"] {
  display: flex;
  flex-direction: column;
  gap: var(--nx-space-2);
}
[nx="field-row"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--nx-space-4);
}

/* Floating label */
[nx="field"][float] {
  position: relative;
}
[nx="field"][float] [nx="label"] {
  position: absolute;
  top: 12px;
  left: 14px;
  font-size: var(--nx-text-base);
  color: var(--nx-color-text-3);
  pointer-events: none;
  transition: all 0.15s var(--nx-ease-spring);
  z-index: 1;
  background: transparent;
  padding: 0 4px;
}
[nx="field"][float] [nx="input"]:focus ~ [nx="label"],
[nx="field"][float] [nx="input"]:not(:placeholder-shown) ~ [nx="label"],
[nx="field"][float] [nx="textarea"]:focus ~ [nx="label"],
[nx="field"][float] [nx="textarea"]:not(:placeholder-shown) ~ [nx="label"] {
  top: -9px;
  font-size: 11px;
  color: var(--nx-color-accent);
  background: var(--nx-color-surface);
}

/* Validation states */
[nx="field"][valid]   [nx="input"],
[nx="field"][valid]   [nx="textarea"],
[nx="field"][valid]   [nx="select"]  { border-color: var(--nx-color-ok) !important; box-shadow: 0 0 0 3px var(--nx-color-ok-lo); }
[nx="field"][invalid] [nx="input"],
[nx="field"][invalid] [nx="textarea"],
[nx="field"][invalid] [nx="select"]  { border-color: var(--nx-color-err) !important; box-shadow: 0 0 0 3px var(--nx-color-err-lo); }
[nx="field"][warn]    [nx="input"],
[nx="field"][warn]    [nx="textarea"],
[nx="field"][warn]    [nx="select"]  { border-color: var(--nx-color-warn) !important; box-shadow: 0 0 0 3px var(--nx-color-warn-lo); }

[nx="field-hint"] {
  font-size: 11px;
  color: var(--nx-color-text-3);
  font-family: var(--nx-font-mono);
}
[nx="field"][valid]   [nx="field-hint"] { color: var(--nx-color-ok); }
[nx="field"][invalid] [nx="field-hint"] { color: var(--nx-color-err); }
[nx="field"][warn]    [nx="field-hint"] { color: var(--nx-color-warn); }
[nx="field-hint"]::before { margin-right: 4px; }
[nx="field"][valid]   [nx="field-hint"]::before { content: '✓ '; }
[nx="field"][invalid] [nx="field-hint"]::before { content: '✕ '; }
[nx="field"][warn]    [nx="field-hint"]::before { content: '⚠ '; }


/* ── nx="input-group" — prefix/suffix ── */
[nx="input-group"] {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-md);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: var(--nx-color-surface);
}
[nx="input-group"]:focus-within {
  border-color: var(--nx-color-accent);
  box-shadow: 0 0 0 3px var(--nx-color-accent-lo);
}
[nx="input-group"] [nx="input"],
[nx="input-group"] [nx="select"] {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  flex: 1;
  min-width: 0;
  background: transparent;
}
[nx="input-addon"] {
  display: flex;
  align-items: center;
  padding: 0 var(--nx-space-4);
  background: var(--nx-color-surface-2);
  color: var(--nx-color-text-3);
  font-size: var(--nx-text-sm);
  font-family: var(--nx-font-mono);
  white-space: nowrap;
  border-right: 1px solid var(--nx-color-border);
  flex-shrink: 0;
}
[nx="input-addon"]:last-child {
  border-right: none;
  border-left: 1px solid var(--nx-color-border);
}
[nx="input-addon"][nx="btn"] {
  border-radius: 0;
  border: none;
  border-left: 1px solid var(--nx-color-border);
}


/* ── nx="checkbox" / nx="radio" ── */
[nx="checkbox"],
[nx="radio"] {
  display: inline-flex;
  align-items: center;
  gap: var(--nx-space-2);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  font-size: var(--nx-text-base);
  color: var(--nx-color-text-2);
  transition: color 0.15s;
}
[nx="checkbox"]:hover,
[nx="radio"]:hover { color: var(--nx-color-text); }

[nx="checkbox"] input[type="checkbox"],
[nx="radio"]    input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--nx-color-border);
  background: var(--nx-color-surface);
  cursor: pointer;
  transition: all 0.15s var(--nx-ease-spring);
  flex-shrink: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
[nx="checkbox"] input[type="checkbox"] { border-radius: var(--nx-radius-sm); }
[nx="radio"]    input[type="radio"]    { border-radius: 50%; }

[nx="checkbox"] input[type="checkbox"]:checked,
[nx="radio"]    input[type="radio"]:checked {
  background: var(--nx-color-accent);
  border-color: var(--nx-color-accent);
  box-shadow: 0 0 0 3px var(--nx-color-accent-lo);
}
[nx="checkbox"] input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  width: 5px; height: 9px;
  border: 2px solid #000;
  border-top: none; border-left: none;
  transform: rotate(45deg) translate(-1px, -1px);
}
[nx="radio"] input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #000;
}
[nx="checkbox"] input:focus-visible,
[nx="radio"]    input:focus-visible {
  outline: 2px solid var(--nx-color-accent);
  outline-offset: 2px;
}
[nx="checkbox"][disabled],
[nx="radio"][disabled]    { opacity: 0.45; pointer-events: none; }

/* Check/radio group */
[nx="check-group"] {
  display: flex;
  flex-direction: column;
  gap: var(--nx-space-3);
}
[nx="check-group"][inline] { flex-direction: row; flex-wrap: wrap; gap: var(--nx-space-4); }


/* ── nx="range" — styled slider ── */
[nx="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: var(--nx-radius-full);
  background: var(--nx-color-surface-3);
  outline: none;
  cursor: pointer;
  border: none;
  padding: 0;
  transition: background 0.15s;
}
[nx="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--nx-color-accent);
  cursor: pointer;
  border: 3px solid var(--nx-color-bg);
  box-shadow: 0 0 0 2px var(--nx-color-accent), var(--nx-shadow-glow);
  transition: transform 0.15s var(--nx-ease-spring), box-shadow 0.15s;
}
[nx="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
[nx="range"]::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--nx-color-accent);
  cursor: pointer;
  border: 3px solid var(--nx-color-bg);
  box-shadow: 0 0 0 2px var(--nx-color-accent);
}
[nx="range"]:focus::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--nx-color-accent-lo), var(--nx-shadow-glow); }
[nx="range"][disabled] { opacity: 0.4; pointer-events: none; }

[nx="range-group"] {
  display: flex;
  flex-direction: column;
  gap: var(--nx-space-2);
}
[nx="range-labels"] {
  display: flex;
  justify-content: space-between;
  font-family: var(--nx-font-mono);
  font-size: 11px;
  color: var(--nx-color-text-3);
}
[nx="range-value"] {
  font-family: var(--nx-font-mono);
  font-size: 13px;
  color: var(--nx-color-accent);
  font-weight: 700;
  text-align: center;
}


/* ═══════════════════════════════════════════════════════════════
   BOOTSTRAP PARITY — NAVIGATION
═══════════════════════════════════════════════════════════════ */

/* ── nx="breadcrumb" ── */
[nx="breadcrumb"] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--nx-text-sm);
}
[nx="breadcrumb-item"] {
  display: flex;
  align-items: center;
  color: var(--nx-color-text-3);
}
[nx="breadcrumb-item"] + [nx="breadcrumb-item"]::before {
  content: '/';
  margin: 0 var(--nx-space-2);
  color: var(--nx-color-border-2);
  font-size: 12px;
}
[nx="breadcrumb-item"] a {
  color: var(--nx-color-text-2);
  text-decoration: none;
  transition: color 0.15s;
}
[nx="breadcrumb-item"] a:hover { color: var(--nx-color-accent); }
[nx="breadcrumb-item"][active] { color: var(--nx-color-text); font-weight: 500; }

/* Variants */
[nx="breadcrumb"][separator="›"] [nx="breadcrumb-item"] + [nx="breadcrumb-item"]::before { content: '›'; }
[nx="breadcrumb"][separator="→"] [nx="breadcrumb-item"] + [nx="breadcrumb-item"]::before { content: '→'; }
[nx="breadcrumb"][separator="."] [nx="breadcrumb-item"] + [nx="breadcrumb-item"]::before { content: '·'; }


/* ── nx="pagination" — standalone ── */
[nx="pagination"] {
  display: flex;
  align-items: center;
  gap: var(--nx-space-1);
  flex-wrap: wrap;
}
[nx="page-item"] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--nx-space-2);
  border-radius: var(--nx-radius-md);
  font-family: var(--nx-font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--nx-color-text-2);
  cursor: pointer;
  border: 1px solid transparent;
  background: none;
  transition: all 0.15s var(--nx-ease-spring);
  text-decoration: none;
  user-select: none;
  -webkit-user-select: none;
}
[nx="page-item"]:hover { border-color: var(--nx-color-border); color: var(--nx-color-text); background: var(--nx-color-surface-2); }
[nx="page-item"][active] { background: var(--nx-color-accent); color: var(--nx-color-text-inv); border-color: var(--nx-color-accent); font-weight: 700; box-shadow: var(--nx-shadow-glow); }
[nx="page-item"][disabled] { opacity: 0.3; pointer-events: none; }
[nx="page-item"][ellipsis] { pointer-events: none; color: var(--nx-color-text-3); }

/* Size variants */
[nx="pagination"][size="sm"] [nx="page-item"] { min-width: 28px; height: 28px; font-size: 11px; }
[nx="pagination"][size="lg"] [nx="page-item"] { min-width: 44px; height: 44px; font-size: 15px; }

/* Pill variant */
[nx="pagination"][variant="pill"] [nx="page-item"] { border-radius: var(--nx-radius-full); }


/* ── nx="nav-pills" ── */
[nx="tabs"][variant="pills"] {
  background: var(--nx-color-surface-2);
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-full);
  padding: 4px;
  gap: 2px;
}
[nx="tabs"][variant="pills"] [nx="tab"] {
  border-radius: var(--nx-radius-full);
  padding: 6px 18px;
  font-size: var(--nx-text-sm);
  font-weight: 500;
  color: var(--nx-color-text-2);
  transition: all 0.2s var(--nx-ease-spring);
  border: none;
}
[nx="tabs"][variant="pills"] [nx="tab"]:hover { color: var(--nx-color-text); background: var(--nx-color-surface-3); }
[nx="tabs"][variant="pills"] [nx="tab"].active {
  background: var(--nx-color-accent);
  color: var(--nx-color-text-inv);
  box-shadow: var(--nx-shadow-glow);
}

/* ── Navbar hamburger ── */
[nx="navbar-toggler"] {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  background: none;
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-md);
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s, background 0.15s;
  flex-shrink: 0;
}
[nx="navbar-toggler"]:hover { border-color: var(--nx-color-accent); background: var(--nx-color-accent-lo); }
[nx="navbar-toggler"] span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--nx-color-text);
  transition: all 0.25s var(--nx-ease-spring);
}
[nx="navbar-toggler"][open] span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
[nx="navbar-toggler"][open] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
[nx="navbar-toggler"][open] span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

[nx="navbar-collapse"] {
  display: flex;
  align-items: center;
  gap: var(--nx-space-4);
  flex: 1;
}

@media (max-width: 768px) {
  [nx="navbar-toggler"] { display: flex; }
  [nx="navbar-collapse"] {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--nx-color-surface);
    border-bottom: 1px solid var(--nx-color-border);
    flex-direction: column;
    align-items: flex-start;
    padding: var(--nx-space-4);
    gap: var(--nx-space-2);
    z-index: 100;
  }
  [nx="navbar-collapse"][open] { display: flex; }
  [nx="navbar"] { flex-wrap: wrap; position: relative; }
}

/* ── nx="scrollspy" ── */
[nx="scrollspy-nav"] [nx="scrollspy-link"] {
  display: block;
  padding: var(--nx-space-2) var(--nx-space-3);
  color: var(--nx-color-text-3);
  text-decoration: none;
  font-size: var(--nx-text-sm);
  border-left: 2px solid transparent;
  transition: all 0.15s;
}
[nx="scrollspy-nav"] [nx="scrollspy-link"]:hover { color: var(--nx-color-text-2); border-left-color: var(--nx-color-border-2); }
[nx="scrollspy-nav"] [nx="scrollspy-link"].active { color: var(--nx-color-accent); border-left-color: var(--nx-color-accent); font-weight: 500; }


/* ═══════════════════════════════════════════════════════════════
   BOOTSTRAP PARITY — CONTENT & TYPOGRAPHY
═══════════════════════════════════════════════════════════════ */

/* ── nx="blockquote" ── */
[nx="blockquote"] {
  position: relative;
  padding: var(--nx-space-5) var(--nx-space-6);
  border-left: 3px solid var(--nx-color-accent);
  background: var(--nx-color-accent-lo);
  border-radius: 0 var(--nx-radius-lg) var(--nx-radius-lg) 0;
  margin: 0;
  font-size: var(--nx-text-lg);
  color: var(--nx-color-text);
  font-style: italic;
  line-height: var(--nx-leading-relaxed);
}
[nx="blockquote"]::before {
  content: '\201C';
  position: absolute;
  top: -8px;
  left: 16px;
  font-size: 64px;
  color: var(--nx-color-accent);
  opacity: 0.3;
  font-family: Georgia, serif;
  line-height: 1;
}
[nx="blockquote-footer"] {
  display: block;
  margin-top: var(--nx-space-3);
  font-size: var(--nx-text-sm);
  color: var(--nx-color-text-3);
  font-style: normal;
  font-family: var(--nx-font-mono);
}
[nx="blockquote-footer"]::before { content: '— '; }

/* Tone variants */
[nx="blockquote"][tone="ok"]   { border-left-color: var(--nx-color-ok);   background: var(--nx-color-ok-lo);   }
[nx="blockquote"][tone="ok"]::before   { color: var(--nx-color-ok); }
[nx="blockquote"][tone="warn"] { border-left-color: var(--nx-color-warn); background: var(--nx-color-warn-lo); }
[nx="blockquote"][tone="warn"]::before { color: var(--nx-color-warn); }
[nx="blockquote"][tone="err"]  { border-left-color: var(--nx-color-err);  background: var(--nx-color-err-lo);  }
[nx="blockquote"][tone="err"]::before  { color: var(--nx-color-err); }


/* ── nx="list-group" ── */
[nx="list-group"] {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-lg);
  overflow: hidden;
}
[nx="list-item"] {
  display: flex;
  align-items: center;
  gap: var(--nx-space-3);
  padding: var(--nx-space-4) var(--nx-space-5);
  border-bottom: 1px solid var(--nx-color-border);
  color: var(--nx-color-text-2);
  font-size: var(--nx-text-base);
  background: var(--nx-color-surface);
  transition: background 0.12s, color 0.12s;
  text-decoration: none;
  cursor: default;
}
[nx="list-item"]:last-child { border-bottom: none; }
[nx="list-item"][action] { cursor: pointer; }
[nx="list-item"][action]:hover { background: var(--nx-color-surface-2); color: var(--nx-color-text); }
[nx="list-item"][active] { background: var(--nx-color-accent-lo); color: var(--nx-color-accent); border-left: 3px solid var(--nx-color-accent); font-weight: 500; }
[nx="list-item"][disabled] { opacity: 0.45; pointer-events: none; }
[nx="list-item"][tone="ok"]   { color: var(--nx-color-ok);   background: var(--nx-color-ok-lo); }
[nx="list-item"][tone="err"]  { color: var(--nx-color-err);  background: var(--nx-color-err-lo); }
[nx="list-item"][tone="warn"] { color: var(--nx-color-warn); background: var(--nx-color-warn-lo); }
[nx="list-item"][tone="info"] { color: var(--nx-color-info); background: var(--nx-color-info-lo); }

[nx="list-item-title"] { font-weight: 600; color: var(--nx-color-text); font-size: var(--nx-text-base); }
[nx="list-item-desc"]  { font-size: var(--nx-text-sm); color: var(--nx-color-text-3); }
[nx="list-item-meta"]  { margin-left: auto; display: flex; align-items: center; gap: var(--nx-space-2); flex-shrink: 0; }

/* Flush variant */
[nx="list-group"][flush] { border: none; border-radius: 0; }
[nx="list-group"][flush] [nx="list-item"] { border-left: none; border-right: none; }
[nx="list-group"][flush] [nx="list-item"]:first-child { border-top: none; }
[nx="list-group"][flush] [nx="list-item"]:last-child  { border-bottom: none; }

/* Numbered */
[nx="list-group"][numbered] { counter-reset: nx-list; }
[nx="list-group"][numbered] [nx="list-item"]::before {
  counter-increment: nx-list;
  content: counter(nx-list);
  font-family: var(--nx-font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--nx-color-text-3);
  min-width: 24px;
}


/* ── nx="figure" ── */
[nx="figure"] {
  display: flex;
  flex-direction: column;
  gap: var(--nx-space-2);
  margin: 0;
}
[nx="figure"] img,
[nx="figure"] video { width: 100%; border-radius: var(--nx-radius-lg); display: block; }
[nx="figcaption"] {
  font-size: var(--nx-text-sm);
  color: var(--nx-color-text-3);
  font-style: italic;
  text-align: center;
  font-family: var(--nx-font-mono);
}

/* ── Display headings ── */
[nx="display-1"] { font-size: clamp(3rem,   8vw,  7rem);  font-weight: 900; line-height: 1.05; letter-spacing: -0.03em; font-family: var(--nx-font-display); }
[nx="display-2"] { font-size: clamp(2.5rem, 6vw,  5.5rem); font-weight: 900; line-height: 1.08; letter-spacing: -0.025em; font-family: var(--nx-font-display); }
[nx="display-3"] { font-size: clamp(2rem,   5vw,  4.5rem); font-weight: 800; line-height: 1.1;  letter-spacing: -0.02em; }
[nx="display-4"] { font-size: clamp(1.8rem, 4vw,  3.5rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; }
[nx="display-5"] { font-size: clamp(1.5rem, 3vw,  2.5rem); font-weight: 700; line-height: 1.15; }
[nx="display-6"] { font-size: clamp(1.3rem, 2vw,  2rem);   font-weight: 700; line-height: 1.2; }

/* ── Text utilities ── */
[nx="lead"]      { font-size: var(--nx-text-xl); color: var(--nx-color-text-2); line-height: var(--nx-leading-relaxed); }
[nx="text-muted"]{ color: var(--nx-color-text-3); font-size: var(--nx-text-sm); }
[nx="text-truncate"] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[nx="mark"]      { background: rgba(255, 214, 0, 0.25); color: var(--nx-color-text); padding: 1px 4px; border-radius: 3px; }
[nx="kbd"] {
  font-family: var(--nx-font-mono);
  font-size: 12px;
  background: var(--nx-color-surface-3);
  border: 1px solid var(--nx-color-border);
  border-bottom-width: 2px;
  border-radius: var(--nx-radius-sm);
  padding: 2px 7px;
  color: var(--nx-color-text);
}
[nx="code"] {
  font-family: var(--nx-font-mono);
  font-size: 0.875em;
  background: var(--nx-color-surface-3);
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-sm);
  padding: 2px 6px;
  color: var(--nx-color-accent);
}
[nx="dl"] { display: grid; grid-template-columns: auto 1fr; gap: var(--nx-space-2) var(--nx-space-5); }
[nx="dt"] { font-weight: 600; color: var(--nx-color-text); font-size: var(--nx-text-sm); padding-top: 2px; }
[nx="dd"] { color: var(--nx-color-text-2); margin: 0; font-size: var(--nx-text-sm); }


/* ═══════════════════════════════════════════════════════════════
   BOOTSTRAP PARITY — FEEDBACK & OVERLAYS
═══════════════════════════════════════════════════════════════ */

/* ── nx="spinner" ── */
[nx="spinner"] {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid var(--nx-color-surface-3);
  border-top-color: var(--nx-color-accent);
  border-radius: 50%;
  animation: nx-spin 0.7s linear infinite;
  flex-shrink: 0;
}
[nx="spinner"][size="xs"] { width: 14px; height: 14px; border-width: 2px; }
[nx="spinner"][size="sm"] { width: 18px; height: 18px; border-width: 2px; }
[nx="spinner"][size="lg"] { width: 36px; height: 36px; border-width: 4px; }
[nx="spinner"][size="xl"] { width: 48px; height: 48px; border-width: 5px; }
[nx="spinner"][tone="ok"]   { border-top-color: var(--nx-color-ok); }
[nx="spinner"][tone="err"]  { border-top-color: var(--nx-color-err); }
[nx="spinner"][tone="warn"] { border-top-color: var(--nx-color-warn); }
[nx="spinner"][variant="grow"] {
  border: none;
  background: var(--nx-color-accent);
  animation: nx-grow-pulse 0.9s ease-in-out infinite;
}
@keyframes nx-grow-pulse {
  0%, 100% { transform: scale(0.6); opacity: 0.4; }
  50%       { transform: scale(1);   opacity: 1; }
}
[nx="spinner"][variant="dots"] {
  width: auto;
  height: auto;
  border: none;
  background: none;
  animation: none;
  display: inline-flex;
  gap: 5px;
  align-items: center;
}
[nx="spinner"][variant="dots"]::before,
[nx="spinner"][variant="dots"]::after,
[nx="spinner"][variant="dots"] span {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nx-color-accent);
  animation: nx-dot-bounce 1.2s ease-in-out infinite;
}
[nx="spinner"][variant="dots"]::before { animation-delay: 0s; }
[nx="spinner"][variant="dots"] span    { animation-delay: 0.15s; }
[nx="spinner"][variant="dots"]::after  { animation-delay: 0.3s; }
@keyframes nx-dot-bounce {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1; }
}


/* ── nx="popover" ── */
[nx="popover-wrap"] {
  position: relative;
  display: inline-block;
}
[nx="popover"] {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) scale(0.92);
  background: var(--nx-color-surface);
  border: 1px solid var(--nx-color-border-2);
  border-radius: var(--nx-radius-xl);
  box-shadow: var(--nx-shadow-xl);
  z-index: var(--nx-z-tooltip, 9000);
  width: 240px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s var(--nx-ease-spring);
  backdrop-filter: blur(12px);
}
[nx="popover"][open],
[nx="popover-wrap"]:focus-within [nx="popover"],
[nx="popover-wrap"][open] [nx="popover"] {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) scale(1);
}
/* Side variants */
[nx="popover"][side="bottom"] {
  bottom: auto; top: calc(100% + 10px);
  transform: translateX(-50%) scale(0.92);
}
[nx="popover"][side="bottom"][open] { transform: translateX(-50%) scale(1); }
[nx="popover"][side="right"] {
  bottom: auto; left: calc(100% + 10px);
  top: 50%; transform: translateY(-50%) scale(0.92);
}
[nx="popover"][side="right"][open] { transform: translateY(-50%) scale(1); }
[nx="popover"][side="left"] {
  bottom: auto; left: auto; right: calc(100% + 10px);
  top: 50%; transform: translateY(-50%) scale(0.92);
}
[nx="popover"][side="left"][open] { transform: translateY(-50%) scale(1); }

[nx="popover-header"] {
  padding: var(--nx-space-3) var(--nx-space-4);
  border-bottom: 1px solid var(--nx-color-border);
  font-weight: 600;
  font-size: var(--nx-text-sm);
  color: var(--nx-color-text);
}
[nx="popover-body"] {
  padding: var(--nx-space-4);
  font-size: var(--nx-text-sm);
  color: var(--nx-color-text-2);
  line-height: var(--nx-leading-relaxed);
}


/* ═══════════════════════════════════════════════════════════════
   BOOTSTRAP PARITY — UTILITY LAYER
   nx-d / nx-m / nx-p / nx-flex / nx-text / nx-bg etc.
═══════════════════════════════════════════════════════════════ */

/* ── Display ── */
[nx-d="none"]         { display: none !important; }
[nx-d="block"]        { display: block !important; }
[nx-d="flex"]         { display: flex !important; }
[nx-d="grid"]         { display: grid !important; }
[nx-d="inline"]       { display: inline !important; }
[nx-d="inline-flex"]  { display: inline-flex !important; }
[nx-d="inline-block"] { display: inline-block !important; }

/* Responsive show/hide */
@media (max-width: 576px)  { [nx-hide="xs"] { display: none !important; } [nx-show="xs"] { display: block !important; } }
@media (max-width: 768px)  { [nx-hide="sm"] { display: none !important; } [nx-show="sm"] { display: block !important; } }
@media (max-width: 1024px) { [nx-hide="md"] { display: none !important; } [nx-show="md"] { display: block !important; } }
@media (min-width: 1025px) { [nx-hide="lg"] { display: none !important; } [nx-show="lg"] { display: block !important; } }

/* ── Flex utilities ── */
[nx-flex="row"]     { display: flex; flex-direction: row; }
[nx-flex="col"]     { display: flex; flex-direction: column; }
[nx-flex="wrap"]    { flex-wrap: wrap; }
[nx-flex="nowrap"]  { flex-wrap: nowrap; }
[nx-flex="1"]       { flex: 1; }
[nx-flex="auto"]    { flex: auto; }
[nx-flex="none"]    { flex: none; }
[nx-flex="center"]  { display: flex; align-items: center; justify-content: center; }
[nx-flex="between"] { display: flex; align-items: center; justify-content: space-between; }
[nx-flex="end"]     { display: flex; align-items: center; justify-content: flex-end; }

[nx-align="start"]   { align-items: flex-start; }
[nx-align="center"]  { align-items: center; }
[nx-align="end"]     { align-items: flex-end; }
[nx-align="stretch"] { align-items: stretch; }

[nx-justify="start"]   { justify-content: flex-start; }
[nx-justify="center"]  { justify-content: center; }
[nx-justify="end"]     { justify-content: flex-end; }
[nx-justify="between"] { justify-content: space-between; }
[nx-justify="around"]  { justify-content: space-around; }

/* ── Spacing ── */
[nx-p="0"]  { padding: 0 !important; }
[nx-p="xs"] { padding: var(--nx-space-1) !important; }
[nx-p="sm"] { padding: var(--nx-space-3) !important; }
[nx-p="md"] { padding: var(--nx-space-5) !important; }
[nx-p="lg"] { padding: var(--nx-space-7) !important; }
[nx-p="xl"] { padding: var(--nx-space-9) !important; }

[nx-px="0"]  { padding-left: 0 !important; padding-right: 0 !important; }
[nx-px="sm"] { padding-left: var(--nx-space-3) !important; padding-right: var(--nx-space-3) !important; }
[nx-px="md"] { padding-left: var(--nx-space-5) !important; padding-right: var(--nx-space-5) !important; }
[nx-px="lg"] { padding-left: var(--nx-space-7) !important; padding-right: var(--nx-space-7) !important; }
[nx-py="0"]  { padding-top: 0 !important; padding-bottom: 0 !important; }
[nx-py="sm"] { padding-top: var(--nx-space-3) !important; padding-bottom: var(--nx-space-3) !important; }
[nx-py="md"] { padding-top: var(--nx-space-5) !important; padding-bottom: var(--nx-space-5) !important; }
[nx-py="lg"] { padding-top: var(--nx-space-7) !important; padding-bottom: var(--nx-space-7) !important; }

[nx-m="0"]   { margin: 0 !important; }
[nx-m="auto"]{ margin: auto !important; }
[nx-m="xs"]  { margin: var(--nx-space-1) !important; }
[nx-m="sm"]  { margin: var(--nx-space-3) !important; }
[nx-m="md"]  { margin: var(--nx-space-5) !important; }
[nx-m="lg"]  { margin: var(--nx-space-7) !important; }
[nx-mx="auto"]{ margin-left: auto !important; margin-right: auto !important; }
[nx-mb="0"]  { margin-bottom: 0 !important; }
[nx-mb="sm"] { margin-bottom: var(--nx-space-3) !important; }
[nx-mb="md"] { margin-bottom: var(--nx-space-5) !important; }
[nx-mb="lg"] { margin-bottom: var(--nx-space-7) !important; }
[nx-mt="0"]  { margin-top: 0 !important; }
[nx-mt="sm"] { margin-top: var(--nx-space-3) !important; }
[nx-mt="md"] { margin-top: var(--nx-space-5) !important; }
[nx-mt="lg"] { margin-top: var(--nx-space-7) !important; }

/* ── Width / Height ── */
[nx-w="full"]  { width: 100% !important; }
[nx-w="auto"]  { width: auto !important; }
[nx-w="half"]  { width: 50% !important; }
[nx-w="third"] { width: 33.333% !important; }
[nx-w="screen"]{ width: 100vw !important; }
[nx-h="full"]  { height: 100% !important; }
[nx-h="screen"]{ height: 100vh !important; }
[nx-h="auto"]  { height: auto !important; }

/* ── Text utilities ── */
[nx-text="left"]    { text-align: left !important; }
[nx-text="center"]  { text-align: center !important; }
[nx-text="right"]   { text-align: right !important; }
[nx-text="xs"]      { font-size: var(--nx-text-xs) !important; }
[nx-text="sm"]      { font-size: var(--nx-text-sm) !important; }
[nx-text="md"]      { font-size: var(--nx-text-md) !important; }
[nx-text="lg"]      { font-size: var(--nx-text-lg) !important; }
[nx-text="xl"]      { font-size: var(--nx-text-xl) !important; }
[nx-text="2xl"]     { font-size: var(--nx-text-2xl) !important; }
[nx-text="accent"]  { color: var(--nx-color-accent) !important; }
[nx-text="muted"]   { color: var(--nx-color-text-3) !important; }
[nx-text="ok"]      { color: var(--nx-color-ok) !important; }
[nx-text="err"]     { color: var(--nx-color-err) !important; }
[nx-text="warn"]    { color: var(--nx-color-warn) !important; }
[nx-text="bold"]    { font-weight: 700 !important; }
[nx-text="thin"]    { font-weight: 300 !important; }
[nx-text="mono"]    { font-family: var(--nx-font-mono) !important; }
[nx-text="upper"]   { text-transform: uppercase !important; letter-spacing: 0.08em; }
[nx-text="truncate"]{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[nx-text="wrap"]    { white-space: normal !important; }
[nx-text="nowrap"]  { white-space: nowrap !important; }

/* ── Background ── */
[nx-bg="surface"]   { background: var(--nx-color-surface) !important; }
[nx-bg="surface-2"] { background: var(--nx-color-surface-2) !important; }
[nx-bg="surface-3"] { background: var(--nx-color-surface-3) !important; }
[nx-bg="accent"]    { background: var(--nx-color-accent) !important; }
[nx-bg="accent-lo"] { background: var(--nx-color-accent-lo) !important; }
[nx-bg="ok"]        { background: var(--nx-color-ok-lo) !important; }
[nx-bg="err"]       { background: var(--nx-color-err-lo) !important; }
[nx-bg="warn"]      { background: var(--nx-color-warn-lo) !important; }
[nx-bg="transparent"]{ background: transparent !important; }

/* ── Border ── */
[nx-border="none"]  { border: none !important; }
[nx-border="0"]     { border-width: 0 !important; }
[nx-border="1"]     { border: 1px solid var(--nx-color-border) !important; }
[nx-border="accent"]{ border: 1px solid var(--nx-color-accent) !important; }
[nx-border="ok"]    { border: 1px solid var(--nx-color-ok) !important; }
[nx-border="err"]   { border: 1px solid var(--nx-color-err) !important; }
[nx-radius="none"]  { border-radius: 0 !important; }
[nx-radius="sm"]    { border-radius: var(--nx-radius-sm) !important; }
[nx-radius="md"]    { border-radius: var(--nx-radius-md) !important; }
[nx-radius="lg"]    { border-radius: var(--nx-radius-lg) !important; }
[nx-radius="xl"]    { border-radius: var(--nx-radius-xl) !important; }
[nx-radius="full"]  { border-radius: var(--nx-radius-full) !important; }

/* ── Overflow ── */
[nx-overflow="hidden"] { overflow: hidden !important; }
[nx-overflow="auto"]   { overflow: auto !important; }
[nx-overflow="scroll"] { overflow: scroll !important; }
[nx-overflow="x"]      { overflow-x: auto !important; overflow-y: hidden !important; }
[nx-overflow="y"]      { overflow-y: auto !important; overflow-x: hidden !important; }

/* ── Shadow ── */
[nx-shadow="none"]  { box-shadow: none !important; }
[nx-shadow="sm"]    { box-shadow: var(--nx-shadow-sm) !important; }
[nx-shadow="md"]    { box-shadow: var(--nx-shadow-md) !important; }
[nx-shadow="lg"]    { box-shadow: var(--nx-shadow-lg) !important; }
[nx-shadow="xl"]    { box-shadow: var(--nx-shadow-xl) !important; }
[nx-shadow="glow"]  { box-shadow: var(--nx-shadow-glow) !important; }

/* ── Visibility ── */
[nx-visible="visible"]   { visibility: visible !important; }
[nx-visible="invisible"] { visibility: hidden !important; }
[nx-visible="collapse"]  { visibility: collapse !important; }

/* ── Position ── */
[nx-pos="relative"] { position: relative !important; }
[nx-pos="absolute"] { position: absolute !important; }
[nx-pos="fixed"]    { position: fixed !important; }
[nx-pos="sticky"]   { position: sticky !important; top: 0; }

/* ── Gap ── */
[nx-gap="0"]  { gap: 0 !important; }
[nx-gap="xs"] { gap: var(--nx-space-1) !important; }
[nx-gap="sm"] { gap: var(--nx-space-3) !important; }
[nx-gap="md"] { gap: var(--nx-space-5) !important; }
[nx-gap="lg"] { gap: var(--nx-space-7) !important; }

/* ── Cursor ── */
[nx-cursor="pointer"] { cursor: pointer !important; }
[nx-cursor="default"] { cursor: default !important; }
[nx-cursor="not-allowed"] { cursor: not-allowed !important; }
[nx-cursor="grab"]    { cursor: grab !important; }

/* ── Opacity ── */
[nx-opacity="0"]   { opacity: 0 !important; }
[nx-opacity="25"]  { opacity: 0.25 !important; }
[nx-opacity="50"]  { opacity: 0.5 !important; }
[nx-opacity="75"]  { opacity: 0.75 !important; }
[nx-opacity="100"] { opacity: 1 !important; }

/* ── Transition ── */
[nx-transition="none"]  { transition: none !important; }
[nx-transition="all"]   { transition: all 0.2s var(--nx-ease-default) !important; }
[nx-transition="fast"]  { transition: all var(--nx-duration-fast) var(--nx-ease-default) !important; }
[nx-transition="slow"]  { transition: all var(--nx-duration-slow) var(--nx-ease-spring) !important; }
/**
 * NOXEN CSS FRAMEWORK v2.0
 * Layer 5 — Motion System
 * Entrance animations · Scroll reveals · Stagger groups · Exit animations
 * All respect prefers-reduced-motion automatically
 */

/* ═══════════════════════════════════════
   ENTRANCE ANIMATIONS  nx-enter=""
═══════════════════════════════════════ */
[nx-enter] {
  animation-fill-mode: both;
  animation-duration: var(--nx-duration-slow);
  animation-timing-function: var(--nx-ease-spring);
}

[nx-enter="fade"]       { animation-name: nx-fade-in; }
[nx-enter="rise"]       { animation-name: nx-rise-in; }
[nx-enter="fall"]       { animation-name: nx-fall-in; }
[nx-enter="slide-left"] { animation-name: nx-slide-in-left; }
[nx-enter="slide-right"]{ animation-name: nx-slide-in-right; }
[nx-enter="scale"]      { animation-name: nx-scale-in; }
[nx-enter="flip"]       { animation-name: nx-flip-in; }
[nx-enter="blur"]       { animation-name: nx-blur-in; }
[nx-enter="bounce"]     { animation-name: nx-bounce-in; animation-timing-function: var(--nx-ease-bounce); }

/* Speed modifiers */
[nx-enter][nx-speed="fast"]  { animation-duration: var(--nx-duration-base); }
[nx-enter][nx-speed="slow"]  { animation-duration: var(--nx-duration-glacial); }

/* ═══════════════════════════════════════
   SCROLL REVEAL  nx-scroll-reveal=""
   Triggered by IntersectionObserver in noxen.js
═══════════════════════════════════════ */
[nx-scroll-reveal] {
  opacity: 0;
  transition:
    opacity   var(--nx-duration-slow)  var(--nx-ease-default),
    transform var(--nx-duration-slow)  var(--nx-ease-spring);
}
[nx-scroll-reveal="rise"]        { transform: translateY(32px); }
[nx-scroll-reveal="fade"]        { transform: none; }
[nx-scroll-reveal="slide-left"]  { transform: translateX(-32px); }
[nx-scroll-reveal="slide-right"] { transform: translateX(32px); }
[nx-scroll-reveal="scale"]       { transform: scale(0.92); }
[nx-scroll-reveal="blur"]        { filter: blur(8px); }

[nx-scroll-reveal].nx-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ═══════════════════════════════════════
   STAGGER GROUPS  nx-stagger
   Children reveal sequentially
═══════════════════════════════════════ */
[nx-stagger] > * { --nx-stagger-delay: 0ms; }
[nx-stagger] > *:nth-child(1)  { animation-delay: calc(var(--nx-stagger-step, 80ms) * 1); }
[nx-stagger] > *:nth-child(2)  { animation-delay: calc(var(--nx-stagger-step, 80ms) * 2); }
[nx-stagger] > *:nth-child(3)  { animation-delay: calc(var(--nx-stagger-step, 80ms) * 3); }
[nx-stagger] > *:nth-child(4)  { animation-delay: calc(var(--nx-stagger-step, 80ms) * 4); }
[nx-stagger] > *:nth-child(5)  { animation-delay: calc(var(--nx-stagger-step, 80ms) * 5); }
[nx-stagger] > *:nth-child(6)  { animation-delay: calc(var(--nx-stagger-step, 80ms) * 6); }
[nx-stagger] > *:nth-child(7)  { animation-delay: calc(var(--nx-stagger-step, 80ms) * 7); }
[nx-stagger] > *:nth-child(8)  { animation-delay: calc(var(--nx-stagger-step, 80ms) * 8); }
[nx-stagger] > *:nth-child(9)  { animation-delay: calc(var(--nx-stagger-step, 80ms) * 9); }
[nx-stagger] > *:nth-child(10) { animation-delay: calc(var(--nx-stagger-step, 80ms) * 10); }
[nx-stagger] > *:nth-child(n+11) { animation-delay: calc(var(--nx-stagger-step, 80ms) * 11); }

[nx-stagger][nx-stagger-step="fast"]  { --nx-stagger-step: 40ms; }
[nx-stagger][nx-stagger-step="slow"]  { --nx-stagger-step: 140ms; }
[nx-stagger][nx-stagger-step="xslow"] { --nx-stagger-step: 220ms; }

/* ═══════════════════════════════════════
   CONTINUOUS ANIMATIONS  nx-animate=""
═══════════════════════════════════════ */
[nx-animate="pulse"]    { animation: nx-pulse   2s ease-in-out infinite; }
[nx-animate="bounce"]   { animation: nx-bounce  1.5s ease-in-out infinite; }
[nx-animate="spin"]     { animation: nx-spin    1s linear infinite; }
[nx-animate="spin-slow"]{ animation: nx-spin    3s linear infinite; }
[nx-animate="float"]    { animation: nx-float   4s ease-in-out infinite; }
[nx-animate="ping"]     { animation: nx-ping    1.5s cubic-bezier(0,0,0.2,1) infinite; }
[nx-animate="shake"]    { animation: nx-shake   0.5s ease-in-out; }
[nx-animate="glow"]     { animation: nx-glow    2s ease-in-out infinite; }

/* ═══════════════════════════════════════
   HOVER TRANSITIONS
═══════════════════════════════════════ */
[nx-hover="lift"]:hover   { transform: translateY(-4px); transition: transform var(--nx-duration-base) var(--nx-ease-spring); }
[nx-hover="scale"]:hover  { transform: scale(1.04); transition: transform var(--nx-duration-fast) var(--nx-ease-spring); }
[nx-hover="glow"]:hover   { box-shadow: var(--nx-shadow-glow); transition: box-shadow var(--nx-duration-base); }
[nx-hover="dim"]:hover    { opacity: 0.7; transition: opacity var(--nx-duration-fast); }
[nx-hover="bright"]:hover { filter: brightness(1.15); transition: filter var(--nx-duration-fast); }

/* ═══════════════════════════════════════
   KEYFRAMES
═══════════════════════════════════════ */
@keyframes nx-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes nx-rise-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes nx-fall-in {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes nx-slide-in-left {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes nx-slide-in-right {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes nx-scale-in {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes nx-flip-in {
  from { opacity: 0; transform: rotateX(-25deg) translateY(16px); }
  to   { opacity: 1; transform: rotateX(0) translateY(0); }
}
@keyframes nx-blur-in {
  from { opacity: 0; filter: blur(10px); }
  to   { opacity: 1; filter: blur(0); }
}
@keyframes nx-bounce-in {
  0%   { opacity: 0; transform: scale(0.4); }
  55%  { opacity: 1; transform: scale(1.08); }
  75%  { transform: scale(0.96); }
  90%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}
@keyframes nx-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes nx-glow {
  0%, 100% { box-shadow: 0 0 8px var(--nx-color-accent-md); }
  50%       { box-shadow: 0 0 24px var(--nx-color-accent-hi); }
}
@keyframes nx-ping {
  0%    { transform: scale(1); opacity: 1; }
  75%, 100% { transform: scale(2); opacity: 0; }
}
@keyframes nx-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}
@keyframes nx-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
@keyframes nx-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes nx-spin {
  to { transform: rotate(360deg); }
}
/**
 * NOXEN CSS FRAMEWORK v2.0
 * Antigravity Engine — The world's first CSS gravity system
 * nx-ag="mirror | reflect | floor | zone | pair | invert"
 */

/* ═══════════════════════════════════════
   MIRROR  nx-ag="mirror"
   Flips element on Y axis. Children auto-corrected.
═══════════════════════════════════════ */
[nx-ag="mirror"] {
  transform: scaleY(-1);
}
/* Auto-correct children so text/content reads normally */
[nx-ag="mirror"] > *,
[nx-ag-correct] {
  transform: scaleY(-1);
}

/* ═══════════════════════════════════════
   REFLECT  nx-ag="reflect"
   Ghost reflection below element with gradient fade
═══════════════════════════════════════ */
[nx-ag="reflect"] {
  transform: scaleY(-1);
  transform-origin: top center;
  opacity: var(--nx-ag-reflect-fade, 0.45);
  filter: blur(var(--nx-ag-reflect-blur, 1px));
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0.8) 0%,
    rgba(0,0,0,0.4) 40%,
    transparent 85%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0.8) 0%,
    rgba(0,0,0,0.4) 40%,
    transparent 85%
  );
  pointer-events: none;
}

/* ═══════════════════════════════════════
   FLOOR  nx-ag="floor"
   Antigravity flex — items stack from the bottom
   Perfect for: chat UIs, notification stacks
═══════════════════════════════════════ */
[nx-ag="floor"] {
  display: flex;
  flex-direction: column-reverse;
}

/* ═══════════════════════════════════════
   INVERT  nx-ag="invert"
   Full 3D perspective flip
═══════════════════════════════════════ */
[nx-ag="invert"] {
  transform: perspective(var(--nx-ag-zone-depth, 600px)) rotateX(180deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
[nx-ag="invert"] > * {
  transform: rotateX(180deg);
  backface-visibility: hidden;
}

/* ═══════════════════════════════════════
   ZONE  nx-ag="zone"
   Gravity zone container — children anchor to edges
═══════════════════════════════════════ */
[nx-ag="zone"] {
  position: relative;
  overflow: hidden;
}
[nx-ag="zone"][nx-ag-pull="top"]    { display: flex; flex-direction: column; justify-content: flex-start; }
[nx-ag="zone"][nx-ag-pull="bottom"] { display: flex; flex-direction: column; justify-content: flex-end; }
[nx-ag="zone"][nx-ag-pull="left"]   { display: flex; flex-direction: row; justify-content: flex-start; }
[nx-ag="zone"][nx-ag-pull="right"]  { display: flex; flex-direction: row; justify-content: flex-end; }
[nx-ag="zone"][nx-ag-pull="center"] { display: flex; align-items: center; justify-content: center; }

/* ═══════════════════════════════════════
   PAIR  nx-ag="pair"
   Two sections meeting at an antigravity seam
   Apply to: parent container
═══════════════════════════════════════ */
[nx-ag="pair"] {
  display: flex;
  flex-direction: column;
  position: relative;
}
/* The seam — glowing line between pair halves */
[nx-ag-seam] {
  height: var(--nx-ag-seam-width, 1px);
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,0) 5%,
    var(--nx-ag-seam-color) 50%,
    rgba(0,0,0,0) 95%,
    transparent 100%
  );
  box-shadow: var(--nx-ag-seam-glow);
  position: relative;
  z-index: 10;
  animation: nx-ag-seam-pulse 3s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes nx-ag-seam-pulse {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 1; }
}

/* ═══════════════════════════════════════
   AXIS CONTROL  nx-ag-axis=""
═══════════════════════════════════════ */
[nx-ag-axis="x"]    { transform: scaleX(-1); }
[nx-ag-axis="y"]    { transform: scaleY(-1); }
[nx-ag-axis="both"] { transform: scale(-1); }

/* ═══════════════════════════════════════
   ANTIGRAVITY ENTRY ANIMATIONS  nx-ag-enter=""
═══════════════════════════════════════ */
[nx-ag-enter] {
  animation-fill-mode: both;
  animation-duration: var(--nx-duration-slow);
  animation-timing-function: var(--nx-ease-spring);
}
[nx-ag-enter="fall"]        { animation-name: nx-ag-fall; }
[nx-ag-enter="rise"]        { animation-name: nx-ag-rise; }
[nx-ag-enter="flip"]        { animation-name: nx-ag-flip; }
[nx-ag-enter="slide-left"]  { animation-name: nx-ag-slide-left; }
[nx-ag-enter="slide-right"] { animation-name: nx-ag-slide-right; }

[nx-ag-enter][nx-ag-speed="fast"] { animation-duration: var(--nx-duration-base); }
[nx-ag-enter][nx-ag-speed="slow"] { animation-duration: var(--nx-duration-glacial); }

/* Stagger within antigravity containers */
[nx-ag-stagger] > *:nth-child(1)  { animation-delay: calc(var(--nx-stagger-step, 80ms) * 1); }
[nx-ag-stagger] > *:nth-child(2)  { animation-delay: calc(var(--nx-stagger-step, 80ms) * 2); }
[nx-ag-stagger] > *:nth-child(3)  { animation-delay: calc(var(--nx-stagger-step, 80ms) * 3); }
[nx-ag-stagger] > *:nth-child(4)  { animation-delay: calc(var(--nx-stagger-step, 80ms) * 4); }
[nx-ag-stagger] > *:nth-child(5)  { animation-delay: calc(var(--nx-stagger-step, 80ms) * 5); }
[nx-ag-stagger] > *:nth-child(6)  { animation-delay: calc(var(--nx-stagger-step, 80ms) * 6); }

/* Antigravity keyframes */
@keyframes nx-ag-fall {
  from { opacity: 0; transform: scaleY(-1) translateY(-40px); }
  to   { opacity: 1; transform: scaleY(-1) translateY(0); }
}
@keyframes nx-ag-rise {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes nx-ag-flip {
  from { opacity: 0; transform: rotateY(-90deg); }
  to   { opacity: 1; transform: rotateY(0); }
}
@keyframes nx-ag-slide-left {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes nx-ag-slide-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ═══════════════════════════════════════
   FLOOR GLOW — decorative floor reflection light
═══════════════════════════════════════ */
[nx-ag-floor-glow]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 60px;
  background: radial-gradient(ellipse at center top,
    var(--nx-color-accent-lo), transparent 70%);
  pointer-events: none;
}