/* ═══════════════════════════════════════════════════════════════════════════
   NOX TOKENS — Shared design system foundation
   Colors, fonts, spacing, themes, utilities, responsive prefixes
   Used by BOTH nox-dashboard.css AND nox-website.css
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 0 — GOOGLE FONTS
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=DM+Sans:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&family=Syne:wght@400;500;600;700;800&display=swap');


/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 1 — DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1a. Shared Tokens (theme-independent) ─── */

:root {
  /* Typography */
  --nox-font-display: 'Chakra Petch', sans-serif;
  --nox-font-body:    'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --nox-font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* Spacing Scale */
  --nox-1: 4px;   --nox-2: 8px;   --nox-3: 12px;  --nox-4: 16px;
  --nox-5: 20px;  --nox-6: 24px;  --nox-7: 32px;  --nox-8: 40px;

  /* Border Radii (client-overridable) */
  --nox-r:    6px;
  --nox-r-lg: 10px;
  --nox-r-xl: 14px;

  /* Transitions */
  --nox-ease:      0.18s ease;
  --nox-ease-slow: 0.3s ease;
  --nox-ease-fast: 0.12s ease;

  /* Layout */
  --nox-sidebar-w: 220px;
  --nox-sidebar-compact-w: 60px;
  --nox-topbar-h: 50px;

  /* Density (1 = default, overridden by density classes) */
  --nox-density: 1;

  /* Accent Color (default neutral silver — override per client) */
  --nox-accent:     #c0c0c0;
  --nox-accent-2:   #a0a0a0;
  --nox-accent-s:   rgba(192,192,192,0.08);
  --nox-accent-g:   rgba(192,192,192,0.15);
  --nox-accent-alt: #c0c0c0;
  --nox-accent-alt-s: rgba(192,192,192,0.08);
}

/* ─── 1b. Dark Theme (default) ─── */

:root,
[data-theme="dark"] {
  --nox-bg-0: #070808;
  --nox-bg-1: #0d0e0e;
  --nox-bg-2: #131414;
  --nox-bg-3: #1a1b1b;
  --nox-bg-4: #222323;
  --nox-bg-5: #2a2b2b;

  --nox-ink:   #d4d4d4;
  --nox-ink-2: #999999;
  --nox-ink-3: #606060;
  --nox-ink-4: #3a3a3a;

  --nox-line:   rgba(255,255,255,0.06);
  --nox-line-2: rgba(255,255,255,0.03);

  --nox-green:    #3a8a5c;
  --nox-green-s:  rgba(58,138,92,0.12);
  --nox-red:      #b5453a;
  --nox-red-s:    rgba(181,69,58,0.12);
  --nox-yellow:   #b59a3a;
  --nox-yellow-s: rgba(181,154,58,0.12);
  --nox-blue:     #3b82a6;
  --nox-blue-s:   rgba(59,130,166,0.12);
  --nox-purple:   #7c5aad;
  --nox-purple-s: rgba(124,90,173,0.12);

  --nox-shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --nox-shadow:    0 2px 8px rgba(0,0,0,0.3);
  --nox-shadow-lg: 0 4px 20px rgba(0,0,0,0.4);
  --nox-shadow-xl: 0 8px 32px rgba(0,0,0,0.5);

  --nox-overlay: rgba(0,0,0,0.7);

  --nox-toast-success-bg: #1e3a28;
  --nox-toast-error-bg:   #3a1e1e;
  --nox-toast-warning-bg: #3a3218;
  --nox-toast-info-bg:    var(--nox-bg-4);

  color-scheme: dark;
}

/* ─── 1c. Light Theme ─── */

[data-theme="light"] {
  --nox-bg-0: #F7F6F3;
  --nox-bg-1: #FFFFFF;
  --nox-bg-2: #FFFFFF;
  --nox-bg-3: #F2F1EE;
  --nox-bg-4: #ECEAE5;
  --nox-bg-5: #E2DFD8;

  --nox-ink:   #0E0E0E;
  --nox-ink-2: #2A2A2A;
  --nox-ink-3: #636059;
  --nox-ink-4: #A09D96;

  --nox-line:   #E2DFD8;
  --nox-line-2: #EDEAE4;

  --nox-green:    #1A6B40;
  --nox-green-s:  rgba(26,107,64,0.09);
  --nox-red:      #9B2C2C;
  --nox-red-s:    rgba(155,44,44,0.08);
  --nox-yellow:   #7A5A10;
  --nox-yellow-s: rgba(122,90,16,0.08);
  --nox-blue:     #1A5090;
  --nox-blue-s:   rgba(26,80,144,0.08);
  --nox-purple:   #5B2D90;
  --nox-purple-s: rgba(91,45,144,0.08);

  --nox-shadow-sm: 0 1px 3px rgba(14,14,14,.06), 0 2px 8px rgba(14,14,14,.03);
  --nox-shadow:    0 2px 12px rgba(14,14,14,.08), 0 8px 24px rgba(14,14,14,.04);
  --nox-shadow-lg: 0 8px 40px rgba(14,14,14,.14);
  --nox-shadow-xl: 0 12px 48px rgba(14,14,14,.18);

  --nox-overlay: rgba(14,14,14,0.35);

  --nox-toast-success-bg: #e8f5ec;
  --nox-toast-error-bg:   #fce8e8;
  --nox-toast-warning-bg: #fef3e0;
  --nox-toast-info-bg:    var(--nox-bg-4);

  color-scheme: light;
}

/* ─── 1d. Density Modifiers ─── */

.nox-density-compact   { --nox-density: 0.8; }
.nox-density-comfortable { --nox-density: 1; }
.nox-density-spacious  { --nox-density: 1.25; }


/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 2 — BASE / RESET
   ═══════════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--nox-font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--nox-ink);
  background: var(--nox-bg-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }

::selection { background: var(--nox-accent-s); color: var(--nox-ink); }
::placeholder { color: var(--nox-ink-4); }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--nox-bg-5); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--nox-ink-4); }


/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 3 — UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Display & Layout ─── */
.nox-flex          { display: flex; }
.nox-flex-col      { display: flex; flex-direction: column; }
.nox-flex-wrap     { flex-wrap: wrap; }
.nox-inline-flex   { display: inline-flex; }
.nox-grid          { display: grid; }
.nox-block         { display: block; }
.nox-inline-block  { display: inline-block; }
.nox-hidden        { display: none; }

.nox-items-center  { align-items: center; }
.nox-items-start   { align-items: flex-start; }
.nox-items-end     { align-items: flex-end; }
.nox-items-stretch { align-items: stretch; }

.nox-justify-between { justify-content: space-between; }
.nox-justify-center  { justify-content: center; }
.nox-justify-end     { justify-content: flex-end; }
.nox-justify-start   { justify-content: flex-start; }

.nox-flex-1    { flex: 1; }
.nox-shrink-0  { flex-shrink: 0; }
.nox-grow-0    { flex-grow: 0; }

.nox-relative  { position: relative; }
.nox-absolute  { position: absolute; }
.nox-fixed     { position: fixed; }
.nox-sticky    { position: sticky; top: 0; }

.nox-overflow-hidden { overflow: hidden; }
.nox-overflow-auto   { overflow-y: auto; }
.nox-overflow-x-auto { overflow-x: auto; }

.nox-w-full  { width: 100%; }
.nox-h-full  { height: 100%; }
.nox-min-w-0 { min-width: 0; }
.nox-min-h-0 { min-height: 0; }

.nox-z-10  { z-index: 10; }
.nox-z-50  { z-index: 50; }
.nox-z-100 { z-index: 100; }

/* ─── Gap ─── */
.nox-gap-1 { gap: var(--nox-1); } .nox-gap-2 { gap: var(--nox-2); }
.nox-gap-3 { gap: var(--nox-3); } .nox-gap-4 { gap: var(--nox-4); }
.nox-gap-5 { gap: var(--nox-5); } .nox-gap-6 { gap: var(--nox-6); }
.nox-gap-7 { gap: var(--nox-7); } .nox-gap-8 { gap: var(--nox-8); }

/* ─── Padding ─── */
.nox-p-0 { padding: 0; }
.nox-p-1 { padding: var(--nox-1); } .nox-p-2 { padding: var(--nox-2); }
.nox-p-3 { padding: var(--nox-3); } .nox-p-4 { padding: var(--nox-4); }
.nox-p-5 { padding: var(--nox-5); } .nox-p-6 { padding: var(--nox-6); }
.nox-p-7 { padding: var(--nox-7); } .nox-p-8 { padding: var(--nox-8); }

.nox-px-1 { padding-left: var(--nox-1); padding-right: var(--nox-1); }
.nox-px-2 { padding-left: var(--nox-2); padding-right: var(--nox-2); }
.nox-px-3 { padding-left: var(--nox-3); padding-right: var(--nox-3); }
.nox-px-4 { padding-left: var(--nox-4); padding-right: var(--nox-4); }
.nox-px-5 { padding-left: var(--nox-5); padding-right: var(--nox-5); }
.nox-px-6 { padding-left: var(--nox-6); padding-right: var(--nox-6); }

.nox-py-1 { padding-top: var(--nox-1); padding-bottom: var(--nox-1); }
.nox-py-2 { padding-top: var(--nox-2); padding-bottom: var(--nox-2); }
.nox-py-3 { padding-top: var(--nox-3); padding-bottom: var(--nox-3); }
.nox-py-4 { padding-top: var(--nox-4); padding-bottom: var(--nox-4); }
.nox-py-5 { padding-top: var(--nox-5); padding-bottom: var(--nox-5); }
.nox-py-6 { padding-top: var(--nox-6); padding-bottom: var(--nox-6); }

.nox-pt-1 { padding-top: var(--nox-1); } .nox-pt-2 { padding-top: var(--nox-2); }
.nox-pt-3 { padding-top: var(--nox-3); } .nox-pt-4 { padding-top: var(--nox-4); }
.nox-pb-1 { padding-bottom: var(--nox-1); } .nox-pb-2 { padding-bottom: var(--nox-2); }
.nox-pb-3 { padding-bottom: var(--nox-3); } .nox-pb-4 { padding-bottom: var(--nox-4); }
.nox-pl-1 { padding-left: var(--nox-1); } .nox-pl-2 { padding-left: var(--nox-2); }
.nox-pl-3 { padding-left: var(--nox-3); } .nox-pl-4 { padding-left: var(--nox-4); }
.nox-pr-1 { padding-right: var(--nox-1); } .nox-pr-2 { padding-right: var(--nox-2); }
.nox-pr-3 { padding-right: var(--nox-3); } .nox-pr-4 { padding-right: var(--nox-4); }

/* ─── Margin ─── */
.nox-m-0 { margin: 0; }
.nox-m-1 { margin: var(--nox-1); } .nox-m-2 { margin: var(--nox-2); }
.nox-m-3 { margin: var(--nox-3); } .nox-m-4 { margin: var(--nox-4); }
.nox-m-5 { margin: var(--nox-5); } .nox-m-6 { margin: var(--nox-6); }

.nox-mx-auto { margin-left: auto; margin-right: auto; }
.nox-ml-auto { margin-left: auto; }
.nox-mr-auto { margin-right: auto; }

.nox-mt-1 { margin-top: var(--nox-1); } .nox-mt-2 { margin-top: var(--nox-2); }
.nox-mt-3 { margin-top: var(--nox-3); } .nox-mt-4 { margin-top: var(--nox-4); }
.nox-mt-5 { margin-top: var(--nox-5); } .nox-mt-6 { margin-top: var(--nox-6); }
.nox-mb-1 { margin-bottom: var(--nox-1); } .nox-mb-2 { margin-bottom: var(--nox-2); }
.nox-mb-3 { margin-bottom: var(--nox-3); } .nox-mb-4 { margin-bottom: var(--nox-4); }
.nox-mb-5 { margin-bottom: var(--nox-5); } .nox-mb-6 { margin-bottom: var(--nox-6); }

/* ─── Typography ─── */
.nox-font-display { font-family: var(--nox-font-display); }
.nox-font-body    { font-family: var(--nox-font-body); }
.nox-font-mono    { font-family: var(--nox-font-mono); }

.nox-text-xs   { font-size: 9px; }
.nox-text-sm   { font-size: 11px; }
.nox-text-base { font-size: 13px; }
.nox-text-lg   { font-size: 15px; }
.nox-text-xl   { font-size: 18px; }
.nox-text-2xl  { font-size: 24px; }
.nox-text-3xl  { font-size: 32px; }
.nox-text-4xl  { font-size: 42px; }

.nox-font-300 { font-weight: 300; } .nox-font-400 { font-weight: 400; }
.nox-font-500 { font-weight: 500; } .nox-font-600 { font-weight: 600; }
.nox-font-700 { font-weight: 700; }

.nox-uppercase  { text-transform: uppercase; }
.nox-lowercase  { text-transform: lowercase; }
.nox-capitalize { text-transform: capitalize; }

.nox-tracking-tight   { letter-spacing: -0.02em; }
.nox-tracking-normal  { letter-spacing: 0; }
.nox-tracking-wide    { letter-spacing: 0.06em; }
.nox-tracking-wider   { letter-spacing: 0.12em; }
.nox-tracking-widest  { letter-spacing: 0.2em; }

.nox-leading-none    { line-height: 1; }
.nox-leading-tight   { line-height: 1.2; }
.nox-leading-normal  { line-height: 1.5; }
.nox-leading-relaxed { line-height: 1.7; }

.nox-text-center { text-align: center; }
.nox-text-right  { text-align: right; }
.nox-text-left   { text-align: left; }

.nox-truncate        { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nox-whitespace-nowrap { white-space: nowrap; }
.nox-break-words     { word-wrap: break-word; overflow-wrap: break-word; }
.nox-tabular-nums    { font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; }

/* ─── Colors ─── */
.nox-text-ink     { color: var(--nox-ink); }
.nox-text-ink-2   { color: var(--nox-ink-2); }
.nox-text-ink-3   { color: var(--nox-ink-3); }
.nox-text-ink-4   { color: var(--nox-ink-4); }
.nox-text-accent  { color: var(--nox-accent); }
.nox-text-accent-alt { color: var(--nox-accent-alt); }
.nox-text-green   { color: var(--nox-green); }
.nox-text-red     { color: var(--nox-red); }
.nox-text-yellow  { color: var(--nox-yellow); }
.nox-text-blue    { color: var(--nox-blue); }
.nox-text-purple  { color: var(--nox-purple); }

.nox-bg-0 { background: var(--nox-bg-0); }
.nox-bg-1 { background: var(--nox-bg-1); }
.nox-bg-2 { background: var(--nox-bg-2); }
.nox-bg-3 { background: var(--nox-bg-3); }
.nox-bg-4 { background: var(--nox-bg-4); }
.nox-bg-5 { background: var(--nox-bg-5); }
.nox-bg-accent-s { background: var(--nox-accent-s); }
.nox-bg-green-s  { background: var(--nox-green-s); }
.nox-bg-red-s    { background: var(--nox-red-s); }
.nox-bg-yellow-s { background: var(--nox-yellow-s); }
.nox-bg-blue-s   { background: var(--nox-blue-s); }
.nox-bg-purple-s { background: var(--nox-purple-s); }

/* ─── Borders ─── */
.nox-border        { border: 1px solid var(--nox-line); }
.nox-border-b      { border-bottom: 1px solid var(--nox-line); }
.nox-border-t      { border-top: 1px solid var(--nox-line); }
.nox-border-l      { border-left: 1px solid var(--nox-line); }
.nox-border-r      { border-right: 1px solid var(--nox-line); }
.nox-border-subtle { border: 1px solid var(--nox-line-2); }
.nox-border-none   { border: none; }

.nox-rounded      { border-radius: var(--nox-r); }
.nox-rounded-lg   { border-radius: var(--nox-r-lg); }
.nox-rounded-xl   { border-radius: var(--nox-r-xl); }
.nox-rounded-full { border-radius: 50%; }
.nox-rounded-none { border-radius: 0; }

/* ─── Shadows ─── */
.nox-shadow-sm   { box-shadow: var(--nox-shadow-sm); }
.nox-shadow      { box-shadow: var(--nox-shadow); }
.nox-shadow-lg   { box-shadow: var(--nox-shadow-lg); }
.nox-shadow-xl   { box-shadow: var(--nox-shadow-xl); }
.nox-shadow-none { box-shadow: none; }

/* ─── Misc ─── */
.nox-transition          { transition: all var(--nox-ease); }
.nox-cursor-pointer      { cursor: pointer; }
.nox-cursor-default      { cursor: default; }
.nox-pointer-events-none { pointer-events: none; }
.nox-select-none         { user-select: none; }
.nox-opacity-0   { opacity: 0; }
.nox-opacity-50  { opacity: 0.5; }
.nox-opacity-100 { opacity: 1; }


/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 4 — COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 4a. Shell Layout ─── */

.nox-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--nox-bg-0);
}

.nox-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.nox-content {
  flex: 1;
  overflow-y: auto;
  padding: calc(var(--nox-4) * var(--nox-density)) calc(var(--nox-5) * var(--nox-density));
}

/* ─── 4b. Sidebar ─── */

.nox-sidebar {
  width: var(--nox-sidebar-w);
  flex-shrink: 0;
  background: var(--nox-bg-1);
  border-right: 1px solid var(--nox-line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width var(--nox-ease-slow);
}

.nox-sidebar-logo {
  padding: calc(14px * var(--nox-density)) calc(16px * var(--nox-density)) calc(12px * var(--nox-density));
  border-bottom: 1px solid var(--nox-line);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nox-sidebar-icon {
  width: 32px;
  height: 32px;
  background: var(--nox-accent);
  border-radius: var(--nox-r);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--nox-font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--nox-bg-0);
  flex-shrink: 0;
}

.nox-sidebar-title {
  font-family: var(--nox-font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--nox-ink);
  line-height: 1.2;
}

.nox-sidebar-sub {
  font-family: var(--nox-font-mono);
  font-size: 8px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--nox-ink-4);
  margin-top: 1px;
}

.nox-sidenav {
  flex: 1;
  overflow-y: auto;
  padding: var(--nox-2);
}

.nox-nav-sec {
  font-family: var(--nox-font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--nox-ink-4);
  padding: 12px 10px 5px;
}

.nox-nav-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--nox-r);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--nox-ease-fast);
  width: 100%;
  background: none;
  text-align: left;
  color: var(--nox-ink-3);
  font-size: 12px;
  font-family: var(--nox-font-body);
  font-weight: 500;
  margin-bottom: 2px;
  position: relative;
}

.nox-nav-btn:hover {
  background: var(--nox-bg-3);
  color: var(--nox-ink-2);
}

.nox-nav-btn.active {
  background: var(--nox-accent-s);
  border-color: var(--nox-accent-g);
  color: var(--nox-accent);
}

.nox-nav-btn.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 16px;
  background: var(--nox-accent);
  border-radius: 0 2px 2px 0;
}

.nox-nav-icon {
  font-size: 14px;
  width: 16px;
  text-align: center;
  flex-shrink: 0;
  line-height: 1;
}

.nox-nav-badge {
  margin-left: auto;
  font-family: var(--nox-font-mono);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--nox-bg-4);
  color: var(--nox-ink-3);
}
.nox-nav-badge.red    { background: var(--nox-red-s); color: var(--nox-red); }
.nox-nav-badge.green  { background: var(--nox-green-s); color: var(--nox-green); }
.nox-nav-badge.accent { background: var(--nox-accent-s); color: var(--nox-accent); }

.nox-sidebar-foot {
  padding: calc(12px * var(--nox-density)) 14px;
  border-top: 1px solid var(--nox-line);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.nox-sidebar-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--nox-ink);
}

.nox-sidebar-role {
  font-family: var(--nox-font-mono);
  font-size: 9px;
  color: var(--nox-ink-4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Compact Sidebar (Icon Rail) */
.nox-sidebar-compact {
  width: var(--nox-sidebar-compact-w);
  flex-shrink: 0;
  background: var(--nox-bg-1);
  border-right: 1px solid var(--nox-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0 16px;
  gap: 4px;
  overflow: hidden;
}

.nox-sidebar-compact .nox-sidebar-icon {
  margin-bottom: 16px;
}

.nox-rail-btn {
  width: 42px;
  height: 42px;
  border-radius: var(--nox-r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--nox-ink-3);
  cursor: pointer;
  transition: background var(--nox-ease), color var(--nox-ease);
  font-size: 16px;
  position: relative;
}

.nox-rail-btn:hover {
  background: var(--nox-bg-3);
  color: var(--nox-ink-2);
}

.nox-rail-btn.active {
  background: var(--nox-accent-s);
  color: var(--nox-accent);
}

.nox-rail-btn.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 18px;
  background: var(--nox-accent);
  border-radius: 0 2px 2px 0;
}

/* ─── 4c. Topbar ─── */

.nox-topbar {
  height: var(--nox-topbar-h);
  background: var(--nox-bg-1);
  border-bottom: 1px solid var(--nox-line);
  display: flex;
  align-items: center;
  padding: 0 calc(var(--nox-5) * var(--nox-density));
  gap: 12px;
  flex-shrink: 0;
}

.nox-topbar-title {
  font-family: var(--nox-font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--nox-ink);
}

.nox-topbar-sub {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  color: var(--nox-ink-4);
}

.nox-topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ─── 4d. Footer ─── */

.nox-footer {
  padding: 8px calc(var(--nox-5) * var(--nox-density));
  border-top: 1px solid var(--nox-line);
  background: var(--nox-bg-1);
  font-family: var(--nox-font-mono);
  font-size: 9px;
  color: var(--nox-ink-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

/* ─── 4e. Section Label ─── */

.nox-sec {
  font-family: var(--nox-font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--nox-ink-4);
  margin-bottom: calc(var(--nox-3) * var(--nox-density));
  display: flex;
  align-items: center;
  gap: 10px;
}

.nox-sec::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--nox-line);
}

.nox-sec span { color: var(--nox-accent); }

/* ─── 4f. KPI Tile ─── */

.nox-kpi {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-lg);
  padding: calc(16px * var(--nox-density)) calc(18px * var(--nox-density)) calc(14px * var(--nox-density));
  position: relative;
  overflow: hidden;
  transition: border-color var(--nox-ease), transform var(--nox-ease), box-shadow var(--nox-ease);
  cursor: default;
}

.nox-kpi::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--nox-accent);
  opacity: 0;
  transition: opacity var(--nox-ease);
}

.nox-kpi:hover {
  border-color: var(--nox-bg-5);
  transform: translateY(-1px);
  box-shadow: var(--nox-shadow);
}

.nox-kpi:hover::after { opacity: 1; }

/* KPI color variants — top border */
.nox-kpi.green::after  { background: var(--nox-green); }
.nox-kpi.red::after    { background: var(--nox-red); }
.nox-kpi.yellow::after { background: var(--nox-yellow); }
.nox-kpi.blue::after   { background: var(--nox-blue); }
.nox-kpi.purple::after { background: var(--nox-purple); }

.nox-kpi-icon {
  position: absolute;
  right: calc(14px * var(--nox-density));
  top: calc(14px * var(--nox-density));
  width: 36px;
  height: 36px;
  border-radius: var(--nox-r-lg);
  background: var(--nox-bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--nox-ink-3);
}

.nox-kpi-label {
  font-family: var(--nox-font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--nox-ink-4);
  margin-bottom: 8px;
}

.nox-kpi-value {
  font-family: var(--nox-font-display);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
  color: var(--nox-ink);
  margin-bottom: 6px;
  font-feature-settings: 'tnum';
}

.nox-kpi-value.accent { color: var(--nox-accent); }
.nox-kpi-value.green  { color: var(--nox-green); }
.nox-kpi-value.red    { color: var(--nox-red); }
.nox-kpi-value.yellow { color: var(--nox-yellow); }
.nox-kpi-value.blue   { color: var(--nox-blue); }

.nox-kpi-delta {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--nox-ink-4);
}

.nox-kpi-delta.up   { color: var(--nox-green); }
.nox-kpi-delta.down { color: var(--nox-red); }
.nox-kpi-delta.flat { color: var(--nox-ink-4); }

/* ─── 4g. Card ─── */

.nox-card {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  box-shadow: var(--nox-shadow-sm);
  overflow: hidden;
  transition: border-color var(--nox-ease);
}

.nox-card:hover { border-color: var(--nox-bg-5); }

.nox-card-head {
  padding: calc(14px * var(--nox-density)) calc(18px * var(--nox-density)) calc(12px * var(--nox-density));
  border-bottom: 1px solid var(--nox-line-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.nox-card-kicker {
  font-family: var(--nox-font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--nox-ink-4);
  margin-bottom: 2px;
}

.nox-card-title {
  font-family: var(--nox-font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--nox-ink);
}

.nox-card-body {
  padding: calc(var(--nox-5) * var(--nox-density));
}

.nox-card-body.tight { padding: 0; }

.nox-card-footer {
  padding: calc(12px * var(--nox-density)) calc(18px * var(--nox-density));
  border-top: 1px solid var(--nox-line-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Card Variants */
.nox-card.featured {
  border-left: 3px solid var(--nox-accent);
}

.nox-card.alert {
  border-left: 3px solid var(--nox-red);
}

.nox-card.success {
  border-left: 3px solid var(--nox-green);
}

/* ─── 4h. Table ─── */

.nox-table { width: 100%; }

.nox-table th {
  font-family: var(--nox-font-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nox-ink-4);
  padding: calc(10px * var(--nox-density)) calc(14px * var(--nox-density));
  text-align: left;
  border-bottom: 1px solid var(--nox-line);
  background: var(--nox-bg-3);
  white-space: nowrap;
}

.nox-table td {
  padding: calc(10px * var(--nox-density)) calc(14px * var(--nox-density));
  border-bottom: 1px solid var(--nox-line-2);
  font-size: 12px;
  color: var(--nox-ink-2);
  vertical-align: middle;
}

.nox-table tbody tr { transition: background var(--nox-ease-fast); cursor: default; }
.nox-table tbody tr:hover { background: var(--nox-bg-3); }
.nox-table tbody tr:last-child td { border-bottom: none; }

.nox-table-striped tbody tr:nth-child(even) td { background: var(--nox-bg-1); }
.nox-table-fixed { table-layout: fixed; }

/* ─── 4i. Badge ─── */

.nox-badge {
  font-family: var(--nox-font-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  background: var(--nox-bg-4);
  color: var(--nox-ink-3);
  border: 1px solid var(--nox-line);
}

.nox-badge.green  { background: var(--nox-green-s); color: var(--nox-green); border-color: rgba(58,138,92,0.2); }
.nox-badge.red    { background: var(--nox-red-s); color: var(--nox-red); border-color: rgba(181,69,58,0.2); }
.nox-badge.yellow { background: var(--nox-yellow-s); color: var(--nox-yellow); border-color: rgba(181,154,58,0.2); }
.nox-badge.blue   { background: var(--nox-blue-s); color: var(--nox-blue); border-color: rgba(59,130,166,0.2); }
.nox-badge.purple { background: var(--nox-purple-s); color: var(--nox-purple); border-color: rgba(124,90,173,0.2); }
.nox-badge.accent { background: var(--nox-accent-s); color: var(--nox-accent); border-color: var(--nox-accent-g); }

.nox-badge-outline {
  background: transparent;
  border: 1px solid var(--nox-line);
  color: var(--nox-ink-3);
}
.nox-badge-outline.green  { border-color: var(--nox-green); color: var(--nox-green); }
.nox-badge-outline.red    { border-color: var(--nox-red); color: var(--nox-red); }
.nox-badge-outline.accent { border-color: var(--nox-accent); color: var(--nox-accent); }

/* ─── 4j. Avatar ─── */

.nox-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--nox-bg-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--nox-font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--nox-ink-3);
  flex-shrink: 0;
  text-transform: uppercase;
}

.nox-avatar-sm { width: 28px; height: 28px; font-size: 10px; }
.nox-avatar-lg { width: 44px; height: 44px; font-size: 14px; }

.nox-avatar.accent {
  background: var(--nox-accent-s);
  color: var(--nox-accent);
  border: 1.5px solid var(--nox-accent);
}

.nox-avatar.green  { background: var(--nox-green-s); color: var(--nox-green); }
.nox-avatar.red    { background: var(--nox-red-s); color: var(--nox-red); }
.nox-avatar.blue   { background: var(--nox-blue-s); color: var(--nox-blue); }
.nox-avatar.purple { background: var(--nox-purple-s); color: var(--nox-purple); }

/* ─── 4k. Row ─── */

.nox-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(10px * var(--nox-density)) calc(14px * var(--nox-density));
  border-bottom: 1px solid var(--nox-line-2);
  transition: background var(--nox-ease-fast);
  cursor: default;
}

.nox-row:hover { background: var(--nox-bg-3); }
.nox-row:last-child { border-bottom: none; }

/* ─── 4l. Button ─── */

.nox-btn {
  font-family: var(--nox-font-display);
  font-size: 11px;
  font-weight: 600;
  padding: calc(7px * var(--nox-density)) calc(14px * var(--nox-density));
  border-radius: var(--nox-r);
  cursor: pointer;
  border: none;
  transition: all var(--nox-ease-fast);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1.4;
}

.nox-btn-primary {
  background: var(--nox-accent);
  color: var(--nox-bg-0);
}
.nox-btn-primary:hover { background: var(--nox-accent-2); }

.nox-btn-ghost {
  background: transparent;
  color: var(--nox-ink-3);
  border: 1px solid var(--nox-line);
}
.nox-btn-ghost:hover {
  border-color: var(--nox-accent);
  color: var(--nox-accent);
}

.nox-btn-danger {
  background: var(--nox-red-s);
  color: var(--nox-red);
  border: 1px solid rgba(181,69,58,0.2);
}
.nox-btn-danger:hover { background: var(--nox-red); color: #fff; border-color: var(--nox-red); }

.nox-btn-accent-alt {
  background: var(--nox-accent-alt);
  color: var(--nox-bg-0);
}

.nox-btn-sm { padding: 5px 10px; font-size: 10px; }
.nox-btn-lg { padding: 10px 22px; font-size: 12px; }

.nox-btn-icon {
  width: 34px;
  height: 34px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--nox-r);
  background: var(--nox-bg-3);
  border: 1px solid var(--nox-line);
  color: var(--nox-ink-3);
  font-size: 15px;
  cursor: pointer;
  transition: all var(--nox-ease-fast);
}
.nox-btn-icon:hover { background: var(--nox-bg-4); color: var(--nox-ink-2); }

.nox-btn:disabled, .nox-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Button Group */
.nox-btn-group {
  display: inline-flex;
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r);
  overflow: hidden;
}
.nox-btn-group .nox-btn {
  border: none;
  border-radius: 0;
  border-right: 1px solid var(--nox-line);
  background: var(--nox-bg-2);
  color: var(--nox-ink-3);
}
.nox-btn-group .nox-btn:last-child { border-right: none; }
.nox-btn-group .nox-btn:hover { background: var(--nox-bg-3); color: var(--nox-ink); }
.nox-btn-group .nox-btn.active { background: var(--nox-accent-s); color: var(--nox-accent); }

/* ─── 4m. Form Controls ─── */

.nox-label {
  font-family: var(--nox-font-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--nox-ink-3);
  margin-bottom: 5px;
  display: block;
}

.nox-input, .nox-select, .nox-textarea {
  width: 100%;
  padding: calc(9px * var(--nox-density)) calc(12px * var(--nox-density));
  background: var(--nox-bg-1);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r);
  font-family: var(--nox-font-body);
  font-size: 13px;
  color: var(--nox-ink);
  transition: border-color var(--nox-ease), box-shadow var(--nox-ease);
  outline: none;
}

.nox-input:focus, .nox-select:focus, .nox-textarea:focus {
  border-color: var(--nox-accent);
  box-shadow: 0 0 0 2px var(--nox-accent-s);
}

.nox-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23606060'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}

.nox-textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.6;
}

.nox-input-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: calc(var(--nox-4) * var(--nox-density));
}

/* Checkbox */
.nox-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--nox-ink-2);
  user-select: none;
}

.nox-checkbox input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--nox-line);
  border-radius: 4px;
  background: var(--nox-bg-1);
  cursor: pointer;
  transition: all var(--nox-ease-fast);
  position: relative;
  flex-shrink: 0;
}

.nox-checkbox input[type="checkbox"]:checked {
  background: var(--nox-accent);
  border-color: var(--nox-accent);
}

.nox-checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid var(--nox-bg-0);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.nox-checkbox input[type="checkbox"]:focus {
  box-shadow: 0 0 0 2px var(--nox-accent-s);
}

/* Toggle */
.nox-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.nox-toggle-track {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--nox-bg-5);
  position: relative;
  transition: background var(--nox-ease);
  flex-shrink: 0;
}

.nox-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--nox-ink-3);
  transition: transform var(--nox-ease), background var(--nox-ease);
}

.nox-toggle input { display: none; }

.nox-toggle input:checked + .nox-toggle-track {
  background: var(--nox-accent);
}

.nox-toggle input:checked + .nox-toggle-track::after {
  transform: translateX(16px);
  background: var(--nox-bg-0);
}

.nox-toggle-label {
  font-size: 12px;
  color: var(--nox-ink-2);
}

/* Search */
.nox-search {
  position: relative;
}

.nox-search .nox-input {
  padding-left: 34px;
}

.nox-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--nox-ink-4);
  font-size: 13px;
  pointer-events: none;
}

/* Filter Bar */
.nox-filter-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.nox-filter-bar::-webkit-scrollbar { display: none; }

.nox-filter-chip {
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid var(--nox-line);
  background: transparent;
  color: var(--nox-ink-3);
  font-family: var(--nox-font-body);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--nox-ease-fast);
}

.nox-filter-chip:hover {
  background: var(--nox-bg-3);
  color: var(--nox-ink-2);
}

.nox-filter-chip.active {
  background: var(--nox-accent);
  color: var(--nox-bg-0);
  border-color: var(--nox-accent);
  font-weight: 600;
}

/* Tabs */
.nox-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--nox-line);
}

.nox-tab {
  padding: 10px 16px;
  font-family: var(--nox-font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--nox-ink-3);
  cursor: pointer;
  border: none;
  background: none;
  position: relative;
  transition: color var(--nox-ease);
}

.nox-tab:hover { color: var(--nox-ink); }

.nox-tab.active {
  color: var(--nox-accent);
  font-weight: 600;
}

.nox-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--nox-accent);
  border-radius: 2px 2px 0 0;
}

/* Pill Tabs */
.nox-tabs-pill {
  display: inline-flex;
  gap: 2px;
  background: var(--nox-bg-3);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-lg);
  padding: 3px;
}

.nox-tab-pill {
  padding: 5px 14px;
  border-radius: var(--nox-r);
  font-family: var(--nox-font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--nox-ink-3);
  cursor: pointer;
  border: none;
  background: none;
  transition: all var(--nox-ease-fast);
}

.nox-tab-pill:hover { color: var(--nox-ink); }

.nox-tab-pill.active {
  background: var(--nox-bg-2);
  color: var(--nox-ink);
  box-shadow: var(--nox-shadow-sm);
  font-weight: 600;
}

/* ─── 4n. Progress ─── */

.nox-progress {
  height: 3px;
  background: var(--nox-bg-5);
  border-radius: 2px;
  overflow: hidden;
}

.nox-progress-fill {
  height: 100%;
  background: var(--nox-accent);
  border-radius: 2px;
  transition: width var(--nox-ease-slow);
}

.nox-progress-fill.green  { background: var(--nox-green); }
.nox-progress-fill.red    { background: var(--nox-red); }
.nox-progress-fill.yellow { background: var(--nox-yellow); }

.nox-progress-lg { height: 6px; border-radius: 3px; }
.nox-progress-lg .nox-progress-fill { border-radius: 3px; }

/* ─── 4o. Live Indicator ─── */

.nox-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--nox-font-mono);
  font-size: 10px;
  color: var(--nox-ink-3);
}

.nox-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nox-green);
  animation: nox-pulse 2.5s ease infinite;
}

/* ─── 4p. Empty State ─── */

.nox-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--nox-8) var(--nox-4);
  text-align: center;
}

.nox-empty-icon {
  font-size: 36px;
  color: var(--nox-ink-4);
  margin-bottom: var(--nox-4);
  opacity: 0.5;
}

.nox-empty-title {
  font-family: var(--nox-font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--nox-ink-3);
  margin-bottom: var(--nox-2);
}

.nox-empty-text {
  font-size: 12px;
  color: var(--nox-ink-4);
  max-width: 280px;
  margin-bottom: var(--nox-4);
}

/* ─── 4q. Stat Row ─── */

.nox-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--nox-line-2);
}

.nox-stat-row:last-child { border-bottom: none; }

.nox-stat-label {
  font-size: 12px;
  color: var(--nox-ink-3);
}

.nox-stat-value {
  font-family: var(--nox-font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--nox-ink);
  font-feature-settings: 'tnum';
}

/* ─── 4r. Timeline ─── */

.nox-timeline {
  display: flex;
  flex-direction: column;
  padding-left: 20px;
  position: relative;
}

.nox-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--nox-line);
}

.nox-timeline-item {
  position: relative;
  padding: 0 0 calc(var(--nox-5) * var(--nox-density)) 16px;
}

.nox-timeline-item:last-child { padding-bottom: 0; }

.nox-timeline-dot {
  position: absolute;
  left: -17px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--nox-line);
  background: var(--nox-bg-2);
}

.nox-timeline-item.active .nox-timeline-dot {
  background: var(--nox-accent);
  border-color: var(--nox-accent);
}

.nox-timeline-item.completed .nox-timeline-dot {
  background: var(--nox-green);
  border-color: var(--nox-green);
}

.nox-timeline-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--nox-ink);
  margin-bottom: 2px;
}

.nox-timeline-text {
  font-size: 11px;
  color: var(--nox-ink-3);
  line-height: 1.5;
}

.nox-timeline-time {
  font-family: var(--nox-font-mono);
  font-size: 9px;
  color: var(--nox-ink-4);
  margin-top: 4px;
}

/* ─── 4s. List Item (Rich) ─── */

.nox-list-item {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--nox-density));
  padding: calc(11px * var(--nox-density)) calc(16px * var(--nox-density));
  border-bottom: 1px solid var(--nox-line-2);
  transition: background var(--nox-ease-fast), transform var(--nox-ease-fast);
  cursor: pointer;
}

.nox-list-item:hover {
  background: var(--nox-bg-3);
}

.nox-list-item:last-child { border-bottom: none; }

.nox-list-item-content { flex: 1; min-width: 0; }

.nox-list-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--nox-ink);
  margin-bottom: 1px;
}

.nox-list-item-sub {
  font-size: 11px;
  color: var(--nox-ink-3);
  font-weight: 400;
}

.nox-list-item-meta {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  color: var(--nox-ink-4);
  text-align: right;
  flex-shrink: 0;
}

/* ─── 4t. Detail Grid (Key-Value) ─── */

.nox-detail-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  align-items: baseline;
}

.nox-detail-label {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nox-ink-4);
  white-space: nowrap;
}

.nox-detail-value {
  font-size: 13px;
  color: var(--nox-ink);
}

/* ─── 4u. Chip ─── */

.nox-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 500;
  background: var(--nox-bg-4);
  color: var(--nox-ink-3);
  border: 1px solid var(--nox-line);
}

.nox-chip.accent { background: var(--nox-accent-s); color: var(--nox-accent); border-color: var(--nox-accent-g); }
.nox-chip.green  { background: var(--nox-green-s); color: var(--nox-green); border-color: rgba(58,138,92,0.2); }
.nox-chip.red    { background: var(--nox-red-s); color: var(--nox-red); border-color: rgba(181,69,58,0.2); }

/* ─── 4v. Divider ─── */

.nox-divider {
  height: 1px;
  background: var(--nox-line);
  margin: var(--nox-4) 0;
}

.nox-divider-text {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--nox-ink-4);
  font-family: var(--nox-font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: var(--nox-4) 0;
}

.nox-divider-text::before,
.nox-divider-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--nox-line);
}

/* ─── 4w. Count (Simple Big Number) ─── */

.nox-count {
  text-align: center;
}

.nox-count-value {
  font-family: var(--nox-font-display);
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -2px;
  color: var(--nox-ink);
  font-feature-settings: 'tnum';
}

.nox-count-label {
  font-family: var(--nox-font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--nox-ink-4);
  margin-top: 6px;
}

/* ─── 4x. Alert Banner ─── */

.nox-alert-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(10px * var(--nox-density)) calc(16px * var(--nox-density));
  border-radius: var(--nox-r);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: var(--nox-4);
  border: 1px solid;
}

.nox-alert-banner.info {
  background: var(--nox-blue-s);
  color: var(--nox-blue);
  border-color: rgba(59,130,166,0.2);
}

.nox-alert-banner.warning {
  background: var(--nox-yellow-s);
  color: var(--nox-yellow);
  border-color: rgba(181,154,58,0.2);
}

.nox-alert-banner.error {
  background: var(--nox-red-s);
  color: var(--nox-red);
  border-color: rgba(181,69,58,0.2);
}

.nox-alert-banner.success {
  background: var(--nox-green-s);
  color: var(--nox-green);
  border-color: rgba(58,138,92,0.2);
}

.nox-alert-banner-dismiss {
  margin-left: auto;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--nox-ease-fast);
}

.nox-alert-banner-dismiss:hover { opacity: 1; }

/* ─── 4y. Meter (Circular) ─── */

.nox-meter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.nox-meter-ring {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: conic-gradient(var(--nox-accent) calc(var(--meter-pct, 0) * 3.6deg), var(--nox-bg-5) 0deg);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.nox-meter-ring::after {
  content: '';
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--nox-bg-2);
}

.nox-meter-value {
  position: absolute;
  font-family: var(--nox-font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--nox-ink);
  z-index: 1;
}

.nox-meter-label {
  font-family: var(--nox-font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--nox-ink-4);
}

/* ─── 4z. Schedule Item ─── */

.nox-schedule-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(10px * var(--nox-density)) calc(14px * var(--nox-density));
  border-bottom: 1px solid var(--nox-line-2);
  transition: background var(--nox-ease-fast);
  cursor: pointer;
}

.nox-schedule-item:hover { background: var(--nox-bg-3); }
.nox-schedule-item:last-child { border-bottom: none; }

.nox-schedule-time {
  font-family: var(--nox-font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--nox-ink-2);
  width: 60px;
  flex-shrink: 0;
  font-feature-settings: 'tnum';
}

.nox-schedule-content { flex: 1; min-width: 0; }

.nox-schedule-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--nox-ink);
}

.nox-schedule-detail {
  font-size: 11px;
  color: var(--nox-ink-4);
  margin-top: 1px;
}

/* ─── 4aa. Activity Item ─── */

.nox-activity-item {
  display: flex;
  gap: 10px;
  padding: calc(8px * var(--nox-density)) 0;
  border-bottom: 1px solid var(--nox-line-2);
}

.nox-activity-item:last-child { border-bottom: none; }

.nox-activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nox-bg-5);
  margin-top: 4px;
  flex-shrink: 0;
}

.nox-activity-dot.accent { background: var(--nox-accent); }
.nox-activity-dot.green  { background: var(--nox-green); }
.nox-activity-dot.red    { background: var(--nox-red); }

.nox-activity-text {
  font-size: 12px;
  color: var(--nox-ink-2);
  flex: 1;
  line-height: 1.5;
}

.nox-activity-time {
  font-family: var(--nox-font-mono);
  font-size: 9px;
  color: var(--nox-ink-4);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ─── 4bb. Status Card (left-border indicator) ─── */

.nox-status-card {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-lg);
  padding: calc(14px * var(--nox-density)) calc(16px * var(--nox-density));
  position: relative;
  overflow: hidden;
  transition: border-color var(--nox-ease);
}

.nox-status-card:hover { border-color: var(--nox-bg-5); }

.nox-status-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
}

.nox-status-card.green::before  { background: var(--nox-green); }
.nox-status-card.red::before    { background: var(--nox-red); }
.nox-status-card.yellow::before { background: var(--nox-yellow); }
.nox-status-card.blue::before   { background: var(--nox-blue); }
.nox-status-card.accent::before { background: var(--nox-accent); }

.nox-status-card-title {
  font-family: var(--nox-font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--nox-ink);
  margin-bottom: 4px;
}

.nox-status-card-text {
  font-size: 12px;
  color: var(--nox-ink-3);
}

/* ─── 4cc. Calendar Day ─── */

.nox-calendar-day {
  margin-bottom: var(--nox-4);
}

.nox-calendar-day-header {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--nox-ink-4);
  padding: 6px 14px;
  background: var(--nox-bg-3);
  border-radius: var(--nox-r);
  margin-bottom: var(--nox-2);
}

/* ─── 4dd. Breadcrumb ─── */

.nox-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--nox-ink-4);
}

.nox-breadcrumb a {
  color: var(--nox-ink-3);
  transition: color var(--nox-ease-fast);
}

.nox-breadcrumb a:hover { color: var(--nox-accent); }

.nox-breadcrumb-sep {
  font-size: 10px;
  color: var(--nox-ink-4);
  opacity: 0.5;
}

.nox-breadcrumb-current {
  color: var(--nox-ink);
  font-weight: 500;
}

/* ─── 4ee. Pagination ─── */

.nox-pagination {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nox-page-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--nox-r);
  border: 1px solid var(--nox-line);
  background: var(--nox-bg-2);
  color: var(--nox-ink-3);
  font-family: var(--nox-font-mono);
  font-size: 11px;
  cursor: pointer;
  transition: all var(--nox-ease-fast);
}

.nox-page-btn:hover {
  background: var(--nox-bg-3);
  color: var(--nox-ink);
}

.nox-page-btn.active {
  background: var(--nox-accent);
  color: var(--nox-bg-0);
  border-color: var(--nox-accent);
}

.nox-page-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ─── 4ff. Dropdown ─── */

.nox-dropdown {
  position: relative;
  display: inline-block;
}

.nox-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 180px;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-lg);
  box-shadow: var(--nox-shadow-lg);
  padding: 4px;
  z-index: 200;
  display: none;
}

.nox-dropdown.open .nox-dropdown-menu { display: block; }

.nox-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--nox-r);
  font-size: 12px;
  color: var(--nox-ink-2);
  cursor: pointer;
  transition: background var(--nox-ease-fast);
  width: 100%;
  border: none;
  background: none;
  text-align: left;
}

.nox-dropdown-item:hover {
  background: var(--nox-bg-3);
  color: var(--nox-ink);
}

.nox-dropdown-item.danger { color: var(--nox-red); }
.nox-dropdown-item.danger:hover { background: var(--nox-red-s); }

.nox-dropdown-divider {
  height: 1px;
  background: var(--nox-line);
  margin: 4px 0;
}

/* ─── 4gg. Stepper ─── */

.nox-stepper {
  display: flex;
  align-items: center;
  gap: 0;
}

.nox-step {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.nox-step + .nox-step { margin-left: 24px; }

.nox-step + .nox-step::before {
  content: '';
  position: absolute;
  right: calc(100% + 4px);
  top: 50%;
  width: 16px;
  height: 1px;
  background: var(--nox-line);
}

.nox-step-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--nox-line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--nox-font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--nox-ink-4);
  background: var(--nox-bg-2);
  flex-shrink: 0;
}

.nox-step.active .nox-step-dot {
  border-color: var(--nox-accent);
  background: var(--nox-accent);
  color: var(--nox-bg-0);
}

.nox-step.completed .nox-step-dot {
  border-color: var(--nox-green);
  background: var(--nox-green);
  color: var(--nox-bg-0);
}

.nox-step-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--nox-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nox-step.active .nox-step-label { color: var(--nox-accent); }
.nox-step.completed .nox-step-label { color: var(--nox-ink-2); }

/* ─── 4hh. Modal ─── */

.nox-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--nox-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: nox-fade-in 0.2s ease;
}

.nox-modal-overlay.hidden { display: none; }

.nox-modal {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  box-shadow: var(--nox-shadow-xl);
  width: 90%;
  max-width: 420px;
  padding: calc(var(--nox-6) * var(--nox-density));
  animation: nox-modal-in 0.2s ease;
}

.nox-modal-lg { max-width: 640px; }

.nox-modal-title {
  font-family: var(--nox-font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--nox-ink);
  margin-bottom: var(--nox-2);
}

.nox-modal-text {
  font-size: 13px;
  color: var(--nox-ink-3);
  line-height: 1.6;
  margin-bottom: var(--nox-5);
}

/* ─── 4ii. Toast ─── */

.nox-toast-container {
  position: fixed;
  bottom: var(--nox-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: var(--nox-2);
  align-items: center;
  pointer-events: none;
}

.nox-toast {
  font-family: var(--nox-font-mono);
  font-size: 11px;
  font-weight: 500;
  padding: var(--nox-3) var(--nox-5);
  border-radius: var(--nox-r);
  opacity: 0;
  transform: translateY(12px);
  transition: all var(--nox-ease-slow);
  pointer-events: auto;
  text-align: center;
}

.nox-toast.show { opacity: 1; transform: translateY(0); }

.nox-toast-success {
  background: var(--nox-toast-success-bg);
  color: var(--nox-green);
  border: 1px solid rgba(58,138,92,0.2);
}

.nox-toast-error {
  background: var(--nox-toast-error-bg);
  color: var(--nox-red);
  border: 1px solid rgba(181,69,58,0.2);
}

.nox-toast-warning {
  background: var(--nox-toast-warning-bg);
  color: var(--nox-yellow);
  border: 1px solid rgba(181,154,58,0.2);
}

.nox-toast-info {
  background: var(--nox-toast-info-bg);
  color: var(--nox-ink-2);
  border: 1px solid var(--nox-line);
}

/* ─── 4jj. Loading ─── */

.nox-loading {
  position: fixed;
  inset: 0;
  background: var(--nox-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
}

.nox-loading.hidden { display: none; }

.nox-spinner {
  width: 32px;
  height: 32px;
  border: 2px solid var(--nox-bg-5);
  border-top-color: var(--nox-accent);
  border-radius: 50%;
  animation: nox-spin 0.7s linear infinite;
}

.nox-spinner-sm { width: 16px; height: 16px; border-width: 1.5px; }
.nox-spinner-lg { width: 48px; height: 48px; border-width: 3px; }

/* ─── 4kk. Skeleton Loading ─── */

.nox-skeleton {
  background: var(--nox-bg-4);
  border-radius: var(--nox-r);
  overflow: hidden;
  position: relative;
}

.nox-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--nox-bg-5), transparent);
  animation: nox-shimmer 1.5s linear infinite;
}

.nox-skeleton-line {
  height: 12px;
  border-radius: 3px;
  margin-bottom: 8px;
}

.nox-skeleton-line:last-child { margin-bottom: 0; }
.nox-skeleton-line.w-75 { width: 75%; }
.nox-skeleton-line.w-50 { width: 50%; }
.nox-skeleton-line.w-25 { width: 25%; }

.nox-skeleton-block {
  height: 80px;
  border-radius: var(--nox-r-lg);
}

.nox-skeleton-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

/* ─── 4ll. Tooltip ─── */

[data-tip] {
  position: relative;
}

[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--nox-bg-4);
  color: var(--nox-ink);
  font-family: var(--nox-font-mono);
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--nox-ease), transform var(--nox-ease);
  z-index: 300;
  border: 1px solid var(--nox-line);
  box-shadow: var(--nox-shadow);
}

[data-tip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 4 (cont.) — GRID UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */

.nox-g2       { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--nox-4) * var(--nox-density)); margin-bottom: calc(var(--nox-4) * var(--nox-density)); }
.nox-g3       { display: grid; grid-template-columns: repeat(3,1fr); gap: calc(var(--nox-4) * var(--nox-density)); margin-bottom: calc(var(--nox-4) * var(--nox-density)); }
.nox-g4       { display: grid; grid-template-columns: repeat(4,1fr); gap: calc(var(--nox-3) * var(--nox-density)); margin-bottom: calc(var(--nox-4) * var(--nox-density)); }
.nox-g5       { display: grid; grid-template-columns: repeat(5,1fr); gap: calc(var(--nox-3) * var(--nox-density)); margin-bottom: calc(var(--nox-4) * var(--nox-density)); }
.nox-g6       { display: grid; grid-template-columns: repeat(6,1fr); gap: calc(var(--nox-3) * var(--nox-density)); margin-bottom: calc(var(--nox-4) * var(--nox-density)); }
.nox-g-main   { display: grid; grid-template-columns: 1fr 320px; gap: calc(var(--nox-4) * var(--nox-density)); margin-bottom: calc(var(--nox-4) * var(--nox-density)); }
.nox-g-sidebar { display: grid; grid-template-columns: 260px 1fr; gap: calc(var(--nox-4) * var(--nox-density)); margin-bottom: calc(var(--nox-4) * var(--nox-density)); }
.nox-g-auto   { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: calc(var(--nox-4) * var(--nox-density)); margin-bottom: calc(var(--nox-4) * var(--nox-density)); }
.nox-g-auto-sm { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: calc(var(--nox-3) * var(--nox-density)); margin-bottom: calc(var(--nox-4) * var(--nox-density)); }


/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 5 — RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 1024px) {
  .nox-g4 { grid-template-columns: 1fr 1fr; }
  .nox-g5, .nox-g6 { grid-template-columns: repeat(3, 1fr); }
  .nox-g-main { grid-template-columns: 1fr; }
  .nox-g-sidebar { grid-template-columns: 1fr; }
  .nox-hide-tablet { display: none !important; }
  .nox-show-tablet { display: block !important; }
}

/* Mobile */
@media (max-width: 768px) {
  .nox-sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    z-index: 900;
    transform: translateX(-100%);
    transition: transform var(--nox-ease-slow);
    box-shadow: none;
  }

  .nox-sidebar.open {
    transform: translateX(0);
    box-shadow: var(--nox-shadow-xl);
  }

  .nox-sidebar-compact { display: none; }

  .nox-content {
    padding: var(--nox-3);
  }

  .nox-g2, .nox-g3, .nox-g4, .nox-g5, .nox-g6,
  .nox-g-main, .nox-g-sidebar, .nox-g-auto, .nox-g-auto-sm {
    grid-template-columns: 1fr;
  }

  .nox-kpi-value { font-size: 26px; }
  .nox-count-value { font-size: 32px; }

  .nox-topbar { padding: 0 var(--nox-3); }

  .nox-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .nox-modal { width: 95%; max-width: none; margin: var(--nox-4); }

  .nox-stepper { flex-wrap: wrap; gap: 8px; }
  .nox-step + .nox-step { margin-left: 0; }
  .nox-step + .nox-step::before { display: none; }

  .nox-hide-mobile { display: none !important; }
  .nox-show-mobile { display: block !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 6 — ANIMATIONS


/* ═══════════════════════════════════════════════════════════════════════════
   BLOCK A: EXPANDED COLOR PALETTE (16 colors x 11 shades)
   ═══════════════════════════════════════════════════════════════════════════ */
   BLOCK A: EXPANDED COLOR SYSTEM
   16 colors x 11 shades = 176 color tokens
   ============================================================ */

/* ----------------------------------------
   Color Tokens — CSS Custom Properties
   ---------------------------------------- */

:root {
  /* Slate */
  --nox-slate-50: #f8fafc;
  --nox-slate-100: #f1f5f9;
  --nox-slate-200: #e2e8f0;
  --nox-slate-300: #cbd5e1;
  --nox-slate-400: #94a3b8;
  --nox-slate-500: #64748b;
  --nox-slate-600: #475569;
  --nox-slate-700: #334155;
  --nox-slate-800: #1e293b;
  --nox-slate-900: #0f172a;
  --nox-slate-950: #020617;

  /* Gray */
  --nox-gray-50: #f9fafb;
  --nox-gray-100: #f3f4f6;
  --nox-gray-200: #e5e7eb;
  --nox-gray-300: #d1d5db;
  --nox-gray-400: #9ca3af;
  --nox-gray-500: #6b7280;
  --nox-gray-600: #4b5563;
  --nox-gray-700: #374151;
  --nox-gray-800: #1f2937;
  --nox-gray-900: #111827;
  --nox-gray-950: #030712;

  /* Zinc */
  --nox-zinc-50: #fafafa;
  --nox-zinc-100: #f4f4f5;
  --nox-zinc-200: #e4e4e7;
  --nox-zinc-300: #d4d4d8;
  --nox-zinc-400: #a1a1aa;
  --nox-zinc-500: #71717a;
  --nox-zinc-600: #52525b;
  --nox-zinc-700: #3f3f46;
  --nox-zinc-800: #27272a;
  --nox-zinc-900: #18181b;
  --nox-zinc-950: #09090b;

  /* Red */
  --nox-red-50: #fef2f2;
  --nox-red-100: #fee2e2;
  --nox-red-200: #fecaca;
  --nox-red-300: #fca5a5;
  --nox-red-400: #f87171;
  --nox-red-500: #ef4444;
  --nox-red-600: #dc2626;
  --nox-red-700: #b91c1c;
  --nox-red-800: #991b1b;
  --nox-red-900: #7f1d1d;
  --nox-red-950: #450a0a;

  /* Orange */
  --nox-orange-50: #fff7ed;
  --nox-orange-100: #ffedd5;
  --nox-orange-200: #fed7aa;
  --nox-orange-300: #fdba74;
  --nox-orange-400: #fb923c;
  --nox-orange-500: #f97316;
  --nox-orange-600: #ea580c;
  --nox-orange-700: #c2410c;
  --nox-orange-800: #9a3412;
  --nox-orange-900: #7c2d12;
  --nox-orange-950: #431407;

  /* Amber */
  --nox-amber-50: #fffbeb;
  --nox-amber-100: #fef3c7;
  --nox-amber-200: #fde68a;
  --nox-amber-300: #fcd34d;
  --nox-amber-400: #fbbf24;
  --nox-amber-500: #f59e0b;
  --nox-amber-600: #d97706;
  --nox-amber-700: #b45309;
  --nox-amber-800: #92400e;
  --nox-amber-900: #78350f;
  --nox-amber-950: #451a03;

  /* Yellow */
  --nox-yellow-50: #fefce8;
  --nox-yellow-100: #fef9c3;
  --nox-yellow-200: #fef08a;
  --nox-yellow-300: #fde047;
  --nox-yellow-400: #facc15;
  --nox-yellow-500: #eab308;
  --nox-yellow-600: #ca8a04;
  --nox-yellow-700: #a16207;
  --nox-yellow-800: #854d0e;
  --nox-yellow-900: #713f12;
  --nox-yellow-950: #422006;

  /* Lime */
  --nox-lime-50: #f7fee7;
  --nox-lime-100: #ecfccb;
  --nox-lime-200: #d9f99d;
  --nox-lime-300: #bef264;
  --nox-lime-400: #a3e635;
  --nox-lime-500: #84cc16;
  --nox-lime-600: #65a30d;
  --nox-lime-700: #4d7c0f;
  --nox-lime-800: #3f6212;
  --nox-lime-900: #365314;
  --nox-lime-950: #1a2e05;

  /* Green */
  --nox-green-50: #f0fdf4;
  --nox-green-100: #dcfce7;
  --nox-green-200: #bbf7d0;
  --nox-green-300: #86efac;
  --nox-green-400: #4ade80;
  --nox-green-500: #22c55e;
  --nox-green-600: #16a34a;
  --nox-green-700: #15803d;
  --nox-green-800: #166534;
  --nox-green-900: #14532d;
  --nox-green-950: #052e16;

  /* Emerald */
  --nox-emerald-50: #ecfdf5;
  --nox-emerald-100: #d1fae5;
  --nox-emerald-200: #a7f3d0;
  --nox-emerald-300: #6ee7b7;
  --nox-emerald-400: #34d399;
  --nox-emerald-500: #10b981;
  --nox-emerald-600: #059669;
  --nox-emerald-700: #047857;
  --nox-emerald-800: #065f46;
  --nox-emerald-900: #064e3b;
  --nox-emerald-950: #022c22;

  /* Teal */
  --nox-teal-50: #f0fdfa;
  --nox-teal-100: #ccfbf1;
  --nox-teal-200: #99f6e4;
  --nox-teal-300: #5eead4;
  --nox-teal-400: #2dd4bf;
  --nox-teal-500: #14b8a6;
  --nox-teal-600: #0d9488;
  --nox-teal-700: #0f766e;
  --nox-teal-800: #115e59;
  --nox-teal-900: #134e4a;
  --nox-teal-950: #042f2e;

  /* Cyan */
  --nox-cyan-50: #ecfeff;
  --nox-cyan-100: #cffafe;
  --nox-cyan-200: #a5f3fc;
  --nox-cyan-300: #67e8f9;
  --nox-cyan-400: #22d3ee;
  --nox-cyan-500: #06b6d4;
  --nox-cyan-600: #0891b2;
  --nox-cyan-700: #0e7490;
  --nox-cyan-800: #155e75;
  --nox-cyan-900: #164e63;
  --nox-cyan-950: #083344;

  /* Blue */
  --nox-blue-50: #eff6ff;
  --nox-blue-100: #dbeafe;
  --nox-blue-200: #bfdbfe;
  --nox-blue-300: #93c5fd;
  --nox-blue-400: #60a5fa;
  --nox-blue-500: #3b82f6;
  --nox-blue-600: #2563eb;
  --nox-blue-700: #1d4ed8;
  --nox-blue-800: #1e40af;
  --nox-blue-900: #1e3a8a;
  --nox-blue-950: #172554;

  /* Indigo */
  --nox-indigo-50: #eef2ff;
  --nox-indigo-100: #e0e7ff;
  --nox-indigo-200: #c7d2fe;
  --nox-indigo-300: #a5b4fc;
  --nox-indigo-400: #818cf8;
  --nox-indigo-500: #6366f1;
  --nox-indigo-600: #4f46e5;
  --nox-indigo-700: #4338ca;
  --nox-indigo-800: #3730a3;
  --nox-indigo-900: #312e81;
  --nox-indigo-950: #1e1b4b;

  /* Violet */
  --nox-violet-50: #f5f3ff;
  --nox-violet-100: #ede9fe;
  --nox-violet-200: #ddd6fe;
  --nox-violet-300: #c4b5fd;
  --nox-violet-400: #a78bfa;
  --nox-violet-500: #8b5cf6;
  --nox-violet-600: #7c3aed;
  --nox-violet-700: #6d28d9;
  --nox-violet-800: #5b21b6;
  --nox-violet-900: #4c1d95;
  --nox-violet-950: #2e1065;

  /* Rose */
  --nox-rose-50: #fff1f2;
  --nox-rose-100: #ffe4e6;
  --nox-rose-200: #fecdd3;
  --nox-rose-300: #fda4af;
  --nox-rose-400: #fb7185;
  --nox-rose-500: #f43f5e;
  --nox-rose-600: #e11d48;
  --nox-rose-700: #be123c;
  --nox-rose-800: #9f1239;
  --nox-rose-900: #881337;
  --nox-rose-950: #4c0519;
}

/* ----------------------------------------
   Text Color Utilities
   ---------------------------------------- */

.nox-text-slate-50 { color: var(--nox-slate-50); }
.nox-text-slate-100 { color: var(--nox-slate-100); }
.nox-text-slate-200 { color: var(--nox-slate-200); }
.nox-text-slate-300 { color: var(--nox-slate-300); }
.nox-text-slate-400 { color: var(--nox-slate-400); }
.nox-text-slate-500 { color: var(--nox-slate-500); }
.nox-text-slate-600 { color: var(--nox-slate-600); }
.nox-text-slate-700 { color: var(--nox-slate-700); }
.nox-text-slate-800 { color: var(--nox-slate-800); }
.nox-text-slate-900 { color: var(--nox-slate-900); }
.nox-text-slate-950 { color: var(--nox-slate-950); }

.nox-text-gray-50 { color: var(--nox-gray-50); }
.nox-text-gray-100 { color: var(--nox-gray-100); }
.nox-text-gray-200 { color: var(--nox-gray-200); }
.nox-text-gray-300 { color: var(--nox-gray-300); }
.nox-text-gray-400 { color: var(--nox-gray-400); }
.nox-text-gray-500 { color: var(--nox-gray-500); }
.nox-text-gray-600 { color: var(--nox-gray-600); }
.nox-text-gray-700 { color: var(--nox-gray-700); }
.nox-text-gray-800 { color: var(--nox-gray-800); }
.nox-text-gray-900 { color: var(--nox-gray-900); }
.nox-text-gray-950 { color: var(--nox-gray-950); }

.nox-text-zinc-50 { color: var(--nox-zinc-50); }
.nox-text-zinc-100 { color: var(--nox-zinc-100); }
.nox-text-zinc-200 { color: var(--nox-zinc-200); }
.nox-text-zinc-300 { color: var(--nox-zinc-300); }
.nox-text-zinc-400 { color: var(--nox-zinc-400); }
.nox-text-zinc-500 { color: var(--nox-zinc-500); }
.nox-text-zinc-600 { color: var(--nox-zinc-600); }
.nox-text-zinc-700 { color: var(--nox-zinc-700); }
.nox-text-zinc-800 { color: var(--nox-zinc-800); }
.nox-text-zinc-900 { color: var(--nox-zinc-900); }
.nox-text-zinc-950 { color: var(--nox-zinc-950); }

.nox-text-red-50 { color: var(--nox-red-50); }
.nox-text-red-100 { color: var(--nox-red-100); }
.nox-text-red-200 { color: var(--nox-red-200); }
.nox-text-red-300 { color: var(--nox-red-300); }
.nox-text-red-400 { color: var(--nox-red-400); }
.nox-text-red-500 { color: var(--nox-red-500); }
.nox-text-red-600 { color: var(--nox-red-600); }
.nox-text-red-700 { color: var(--nox-red-700); }
.nox-text-red-800 { color: var(--nox-red-800); }
.nox-text-red-900 { color: var(--nox-red-900); }
.nox-text-red-950 { color: var(--nox-red-950); }

.nox-text-orange-50 { color: var(--nox-orange-50); }
.nox-text-orange-100 { color: var(--nox-orange-100); }
.nox-text-orange-200 { color: var(--nox-orange-200); }
.nox-text-orange-300 { color: var(--nox-orange-300); }
.nox-text-orange-400 { color: var(--nox-orange-400); }
.nox-text-orange-500 { color: var(--nox-orange-500); }
.nox-text-orange-600 { color: var(--nox-orange-600); }
.nox-text-orange-700 { color: var(--nox-orange-700); }
.nox-text-orange-800 { color: var(--nox-orange-800); }
.nox-text-orange-900 { color: var(--nox-orange-900); }
.nox-text-orange-950 { color: var(--nox-orange-950); }

.nox-text-amber-50 { color: var(--nox-amber-50); }
.nox-text-amber-100 { color: var(--nox-amber-100); }
.nox-text-amber-200 { color: var(--nox-amber-200); }
.nox-text-amber-300 { color: var(--nox-amber-300); }
.nox-text-amber-400 { color: var(--nox-amber-400); }
.nox-text-amber-500 { color: var(--nox-amber-500); }
.nox-text-amber-600 { color: var(--nox-amber-600); }
.nox-text-amber-700 { color: var(--nox-amber-700); }
.nox-text-amber-800 { color: var(--nox-amber-800); }
.nox-text-amber-900 { color: var(--nox-amber-900); }
.nox-text-amber-950 { color: var(--nox-amber-950); }

.nox-text-yellow-50 { color: var(--nox-yellow-50); }
.nox-text-yellow-100 { color: var(--nox-yellow-100); }
.nox-text-yellow-200 { color: var(--nox-yellow-200); }
.nox-text-yellow-300 { color: var(--nox-yellow-300); }
.nox-text-yellow-400 { color: var(--nox-yellow-400); }
.nox-text-yellow-500 { color: var(--nox-yellow-500); }
.nox-text-yellow-600 { color: var(--nox-yellow-600); }
.nox-text-yellow-700 { color: var(--nox-yellow-700); }
.nox-text-yellow-800 { color: var(--nox-yellow-800); }
.nox-text-yellow-900 { color: var(--nox-yellow-900); }
.nox-text-yellow-950 { color: var(--nox-yellow-950); }

.nox-text-lime-50 { color: var(--nox-lime-50); }
.nox-text-lime-100 { color: var(--nox-lime-100); }
.nox-text-lime-200 { color: var(--nox-lime-200); }
.nox-text-lime-300 { color: var(--nox-lime-300); }
.nox-text-lime-400 { color: var(--nox-lime-400); }
.nox-text-lime-500 { color: var(--nox-lime-500); }
.nox-text-lime-600 { color: var(--nox-lime-600); }
.nox-text-lime-700 { color: var(--nox-lime-700); }
.nox-text-lime-800 { color: var(--nox-lime-800); }
.nox-text-lime-900 { color: var(--nox-lime-900); }
.nox-text-lime-950 { color: var(--nox-lime-950); }

.nox-text-green-50 { color: var(--nox-green-50); }
.nox-text-green-100 { color: var(--nox-green-100); }
.nox-text-green-200 { color: var(--nox-green-200); }
.nox-text-green-300 { color: var(--nox-green-300); }
.nox-text-green-400 { color: var(--nox-green-400); }
.nox-text-green-500 { color: var(--nox-green-500); }
.nox-text-green-600 { color: var(--nox-green-600); }
.nox-text-green-700 { color: var(--nox-green-700); }
.nox-text-green-800 { color: var(--nox-green-800); }
.nox-text-green-900 { color: var(--nox-green-900); }
.nox-text-green-950 { color: var(--nox-green-950); }

.nox-text-emerald-50 { color: var(--nox-emerald-50); }
.nox-text-emerald-100 { color: var(--nox-emerald-100); }
.nox-text-emerald-200 { color: var(--nox-emerald-200); }
.nox-text-emerald-300 { color: var(--nox-emerald-300); }
.nox-text-emerald-400 { color: var(--nox-emerald-400); }
.nox-text-emerald-500 { color: var(--nox-emerald-500); }
.nox-text-emerald-600 { color: var(--nox-emerald-600); }
.nox-text-emerald-700 { color: var(--nox-emerald-700); }
.nox-text-emerald-800 { color: var(--nox-emerald-800); }
.nox-text-emerald-900 { color: var(--nox-emerald-900); }
.nox-text-emerald-950 { color: var(--nox-emerald-950); }

.nox-text-teal-50 { color: var(--nox-teal-50); }
.nox-text-teal-100 { color: var(--nox-teal-100); }
.nox-text-teal-200 { color: var(--nox-teal-200); }
.nox-text-teal-300 { color: var(--nox-teal-300); }
.nox-text-teal-400 { color: var(--nox-teal-400); }
.nox-text-teal-500 { color: var(--nox-teal-500); }
.nox-text-teal-600 { color: var(--nox-teal-600); }
.nox-text-teal-700 { color: var(--nox-teal-700); }
.nox-text-teal-800 { color: var(--nox-teal-800); }
.nox-text-teal-900 { color: var(--nox-teal-900); }
.nox-text-teal-950 { color: var(--nox-teal-950); }

.nox-text-cyan-50 { color: var(--nox-cyan-50); }
.nox-text-cyan-100 { color: var(--nox-cyan-100); }
.nox-text-cyan-200 { color: var(--nox-cyan-200); }
.nox-text-cyan-300 { color: var(--nox-cyan-300); }
.nox-text-cyan-400 { color: var(--nox-cyan-400); }
.nox-text-cyan-500 { color: var(--nox-cyan-500); }
.nox-text-cyan-600 { color: var(--nox-cyan-600); }
.nox-text-cyan-700 { color: var(--nox-cyan-700); }
.nox-text-cyan-800 { color: var(--nox-cyan-800); }
.nox-text-cyan-900 { color: var(--nox-cyan-900); }
.nox-text-cyan-950 { color: var(--nox-cyan-950); }

.nox-text-blue-50 { color: var(--nox-blue-50); }
.nox-text-blue-100 { color: var(--nox-blue-100); }
.nox-text-blue-200 { color: var(--nox-blue-200); }
.nox-text-blue-300 { color: var(--nox-blue-300); }
.nox-text-blue-400 { color: var(--nox-blue-400); }
.nox-text-blue-500 { color: var(--nox-blue-500); }
.nox-text-blue-600 { color: var(--nox-blue-600); }
.nox-text-blue-700 { color: var(--nox-blue-700); }
.nox-text-blue-800 { color: var(--nox-blue-800); }
.nox-text-blue-900 { color: var(--nox-blue-900); }
.nox-text-blue-950 { color: var(--nox-blue-950); }

.nox-text-indigo-50 { color: var(--nox-indigo-50); }
.nox-text-indigo-100 { color: var(--nox-indigo-100); }
.nox-text-indigo-200 { color: var(--nox-indigo-200); }
.nox-text-indigo-300 { color: var(--nox-indigo-300); }
.nox-text-indigo-400 { color: var(--nox-indigo-400); }
.nox-text-indigo-500 { color: var(--nox-indigo-500); }
.nox-text-indigo-600 { color: var(--nox-indigo-600); }
.nox-text-indigo-700 { color: var(--nox-indigo-700); }
.nox-text-indigo-800 { color: var(--nox-indigo-800); }
.nox-text-indigo-900 { color: var(--nox-indigo-900); }
.nox-text-indigo-950 { color: var(--nox-indigo-950); }

.nox-text-violet-50 { color: var(--nox-violet-50); }
.nox-text-violet-100 { color: var(--nox-violet-100); }
.nox-text-violet-200 { color: var(--nox-violet-200); }
.nox-text-violet-300 { color: var(--nox-violet-300); }
.nox-text-violet-400 { color: var(--nox-violet-400); }
.nox-text-violet-500 { color: var(--nox-violet-500); }
.nox-text-violet-600 { color: var(--nox-violet-600); }
.nox-text-violet-700 { color: var(--nox-violet-700); }
.nox-text-violet-800 { color: var(--nox-violet-800); }
.nox-text-violet-900 { color: var(--nox-violet-900); }
.nox-text-violet-950 { color: var(--nox-violet-950); }

.nox-text-rose-50 { color: var(--nox-rose-50); }
.nox-text-rose-100 { color: var(--nox-rose-100); }
.nox-text-rose-200 { color: var(--nox-rose-200); }
.nox-text-rose-300 { color: var(--nox-rose-300); }
.nox-text-rose-400 { color: var(--nox-rose-400); }
.nox-text-rose-500 { color: var(--nox-rose-500); }
.nox-text-rose-600 { color: var(--nox-rose-600); }
.nox-text-rose-700 { color: var(--nox-rose-700); }
.nox-text-rose-800 { color: var(--nox-rose-800); }
.nox-text-rose-900 { color: var(--nox-rose-900); }
.nox-text-rose-950 { color: var(--nox-rose-950); }

/* ----------------------------------------
   Background Color Utilities
   ---------------------------------------- */

.nox-bg-slate-50 { background-color: var(--nox-slate-50); }
.nox-bg-slate-100 { background-color: var(--nox-slate-100); }
.nox-bg-slate-200 { background-color: var(--nox-slate-200); }
.nox-bg-slate-300 { background-color: var(--nox-slate-300); }
.nox-bg-slate-400 { background-color: var(--nox-slate-400); }
.nox-bg-slate-500 { background-color: var(--nox-slate-500); }
.nox-bg-slate-600 { background-color: var(--nox-slate-600); }
.nox-bg-slate-700 { background-color: var(--nox-slate-700); }
.nox-bg-slate-800 { background-color: var(--nox-slate-800); }
.nox-bg-slate-900 { background-color: var(--nox-slate-900); }
.nox-bg-slate-950 { background-color: var(--nox-slate-950); }

.nox-bg-gray-50 { background-color: var(--nox-gray-50); }
.nox-bg-gray-100 { background-color: var(--nox-gray-100); }
.nox-bg-gray-200 { background-color: var(--nox-gray-200); }
.nox-bg-gray-300 { background-color: var(--nox-gray-300); }
.nox-bg-gray-400 { background-color: var(--nox-gray-400); }
.nox-bg-gray-500 { background-color: var(--nox-gray-500); }
.nox-bg-gray-600 { background-color: var(--nox-gray-600); }
.nox-bg-gray-700 { background-color: var(--nox-gray-700); }
.nox-bg-gray-800 { background-color: var(--nox-gray-800); }
.nox-bg-gray-900 { background-color: var(--nox-gray-900); }
.nox-bg-gray-950 { background-color: var(--nox-gray-950); }

.nox-bg-zinc-50 { background-color: var(--nox-zinc-50); }
.nox-bg-zinc-100 { background-color: var(--nox-zinc-100); }
.nox-bg-zinc-200 { background-color: var(--nox-zinc-200); }
.nox-bg-zinc-300 { background-color: var(--nox-zinc-300); }
.nox-bg-zinc-400 { background-color: var(--nox-zinc-400); }
.nox-bg-zinc-500 { background-color: var(--nox-zinc-500); }
.nox-bg-zinc-600 { background-color: var(--nox-zinc-600); }
.nox-bg-zinc-700 { background-color: var(--nox-zinc-700); }
.nox-bg-zinc-800 { background-color: var(--nox-zinc-800); }
.nox-bg-zinc-900 { background-color: var(--nox-zinc-900); }
.nox-bg-zinc-950 { background-color: var(--nox-zinc-950); }

.nox-bg-red-50 { background-color: var(--nox-red-50); }
.nox-bg-red-100 { background-color: var(--nox-red-100); }
.nox-bg-red-200 { background-color: var(--nox-red-200); }
.nox-bg-red-300 { background-color: var(--nox-red-300); }
.nox-bg-red-400 { background-color: var(--nox-red-400); }
.nox-bg-red-500 { background-color: var(--nox-red-500); }
.nox-bg-red-600 { background-color: var(--nox-red-600); }
.nox-bg-red-700 { background-color: var(--nox-red-700); }
.nox-bg-red-800 { background-color: var(--nox-red-800); }
.nox-bg-red-900 { background-color: var(--nox-red-900); }
.nox-bg-red-950 { background-color: var(--nox-red-950); }

.nox-bg-orange-50 { background-color: var(--nox-orange-50); }
.nox-bg-orange-100 { background-color: var(--nox-orange-100); }
.nox-bg-orange-200 { background-color: var(--nox-orange-200); }
.nox-bg-orange-300 { background-color: var(--nox-orange-300); }
.nox-bg-orange-400 { background-color: var(--nox-orange-400); }
.nox-bg-orange-500 { background-color: var(--nox-orange-500); }
.nox-bg-orange-600 { background-color: var(--nox-orange-600); }
.nox-bg-orange-700 { background-color: var(--nox-orange-700); }
.nox-bg-orange-800 { background-color: var(--nox-orange-800); }
.nox-bg-orange-900 { background-color: var(--nox-orange-900); }
.nox-bg-orange-950 { background-color: var(--nox-orange-950); }

.nox-bg-amber-50 { background-color: var(--nox-amber-50); }
.nox-bg-amber-100 { background-color: var(--nox-amber-100); }
.nox-bg-amber-200 { background-color: var(--nox-amber-200); }
.nox-bg-amber-300 { background-color: var(--nox-amber-300); }
.nox-bg-amber-400 { background-color: var(--nox-amber-400); }
.nox-bg-amber-500 { background-color: var(--nox-amber-500); }
.nox-bg-amber-600 { background-color: var(--nox-amber-600); }
.nox-bg-amber-700 { background-color: var(--nox-amber-700); }
.nox-bg-amber-800 { background-color: var(--nox-amber-800); }
.nox-bg-amber-900 { background-color: var(--nox-amber-900); }
.nox-bg-amber-950 { background-color: var(--nox-amber-950); }

.nox-bg-yellow-50 { background-color: var(--nox-yellow-50); }
.nox-bg-yellow-100 { background-color: var(--nox-yellow-100); }
.nox-bg-yellow-200 { background-color: var(--nox-yellow-200); }
.nox-bg-yellow-300 { background-color: var(--nox-yellow-300); }
.nox-bg-yellow-400 { background-color: var(--nox-yellow-400); }
.nox-bg-yellow-500 { background-color: var(--nox-yellow-500); }
.nox-bg-yellow-600 { background-color: var(--nox-yellow-600); }
.nox-bg-yellow-700 { background-color: var(--nox-yellow-700); }
.nox-bg-yellow-800 { background-color: var(--nox-yellow-800); }
.nox-bg-yellow-900 { background-color: var(--nox-yellow-900); }
.nox-bg-yellow-950 { background-color: var(--nox-yellow-950); }

.nox-bg-lime-50 { background-color: var(--nox-lime-50); }
.nox-bg-lime-100 { background-color: var(--nox-lime-100); }
.nox-bg-lime-200 { background-color: var(--nox-lime-200); }
.nox-bg-lime-300 { background-color: var(--nox-lime-300); }
.nox-bg-lime-400 { background-color: var(--nox-lime-400); }
.nox-bg-lime-500 { background-color: var(--nox-lime-500); }
.nox-bg-lime-600 { background-color: var(--nox-lime-600); }
.nox-bg-lime-700 { background-color: var(--nox-lime-700); }
.nox-bg-lime-800 { background-color: var(--nox-lime-800); }
.nox-bg-lime-900 { background-color: var(--nox-lime-900); }
.nox-bg-lime-950 { background-color: var(--nox-lime-950); }

.nox-bg-green-50 { background-color: var(--nox-green-50); }
.nox-bg-green-100 { background-color: var(--nox-green-100); }
.nox-bg-green-200 { background-color: var(--nox-green-200); }
.nox-bg-green-300 { background-color: var(--nox-green-300); }
.nox-bg-green-400 { background-color: var(--nox-green-400); }
.nox-bg-green-500 { background-color: var(--nox-green-500); }
.nox-bg-green-600 { background-color: var(--nox-green-600); }
.nox-bg-green-700 { background-color: var(--nox-green-700); }
.nox-bg-green-800 { background-color: var(--nox-green-800); }
.nox-bg-green-900 { background-color: var(--nox-green-900); }
.nox-bg-green-950 { background-color: var(--nox-green-950); }

.nox-bg-emerald-50 { background-color: var(--nox-emerald-50); }
.nox-bg-emerald-100 { background-color: var(--nox-emerald-100); }
.nox-bg-emerald-200 { background-color: var(--nox-emerald-200); }
.nox-bg-emerald-300 { background-color: var(--nox-emerald-300); }
.nox-bg-emerald-400 { background-color: var(--nox-emerald-400); }
.nox-bg-emerald-500 { background-color: var(--nox-emerald-500); }
.nox-bg-emerald-600 { background-color: var(--nox-emerald-600); }
.nox-bg-emerald-700 { background-color: var(--nox-emerald-700); }
.nox-bg-emerald-800 { background-color: var(--nox-emerald-800); }
.nox-bg-emerald-900 { background-color: var(--nox-emerald-900); }
.nox-bg-emerald-950 { background-color: var(--nox-emerald-950); }

.nox-bg-teal-50 { background-color: var(--nox-teal-50); }
.nox-bg-teal-100 { background-color: var(--nox-teal-100); }
.nox-bg-teal-200 { background-color: var(--nox-teal-200); }
.nox-bg-teal-300 { background-color: var(--nox-teal-300); }
.nox-bg-teal-400 { background-color: var(--nox-teal-400); }
.nox-bg-teal-500 { background-color: var(--nox-teal-500); }
.nox-bg-teal-600 { background-color: var(--nox-teal-600); }
.nox-bg-teal-700 { background-color: var(--nox-teal-700); }
.nox-bg-teal-800 { background-color: var(--nox-teal-800); }
.nox-bg-teal-900 { background-color: var(--nox-teal-900); }
.nox-bg-teal-950 { background-color: var(--nox-teal-950); }

.nox-bg-cyan-50 { background-color: var(--nox-cyan-50); }
.nox-bg-cyan-100 { background-color: var(--nox-cyan-100); }
.nox-bg-cyan-200 { background-color: var(--nox-cyan-200); }
.nox-bg-cyan-300 { background-color: var(--nox-cyan-300); }
.nox-bg-cyan-400 { background-color: var(--nox-cyan-400); }
.nox-bg-cyan-500 { background-color: var(--nox-cyan-500); }
.nox-bg-cyan-600 { background-color: var(--nox-cyan-600); }
.nox-bg-cyan-700 { background-color: var(--nox-cyan-700); }
.nox-bg-cyan-800 { background-color: var(--nox-cyan-800); }
.nox-bg-cyan-900 { background-color: var(--nox-cyan-900); }
.nox-bg-cyan-950 { background-color: var(--nox-cyan-950); }

.nox-bg-blue-50 { background-color: var(--nox-blue-50); }
.nox-bg-blue-100 { background-color: var(--nox-blue-100); }
.nox-bg-blue-200 { background-color: var(--nox-blue-200); }
.nox-bg-blue-300 { background-color: var(--nox-blue-300); }
.nox-bg-blue-400 { background-color: var(--nox-blue-400); }
.nox-bg-blue-500 { background-color: var(--nox-blue-500); }
.nox-bg-blue-600 { background-color: var(--nox-blue-600); }
.nox-bg-blue-700 { background-color: var(--nox-blue-700); }
.nox-bg-blue-800 { background-color: var(--nox-blue-800); }
.nox-bg-blue-900 { background-color: var(--nox-blue-900); }
.nox-bg-blue-950 { background-color: var(--nox-blue-950); }

.nox-bg-indigo-50 { background-color: var(--nox-indigo-50); }
.nox-bg-indigo-100 { background-color: var(--nox-indigo-100); }
.nox-bg-indigo-200 { background-color: var(--nox-indigo-200); }
.nox-bg-indigo-300 { background-color: var(--nox-indigo-300); }
.nox-bg-indigo-400 { background-color: var(--nox-indigo-400); }
.nox-bg-indigo-500 { background-color: var(--nox-indigo-500); }
.nox-bg-indigo-600 { background-color: var(--nox-indigo-600); }
.nox-bg-indigo-700 { background-color: var(--nox-indigo-700); }
.nox-bg-indigo-800 { background-color: var(--nox-indigo-800); }
.nox-bg-indigo-900 { background-color: var(--nox-indigo-900); }
.nox-bg-indigo-950 { background-color: var(--nox-indigo-950); }

.nox-bg-violet-50 { background-color: var(--nox-violet-50); }
.nox-bg-violet-100 { background-color: var(--nox-violet-100); }
.nox-bg-violet-200 { background-color: var(--nox-violet-200); }
.nox-bg-violet-300 { background-color: var(--nox-violet-300); }
.nox-bg-violet-400 { background-color: var(--nox-violet-400); }
.nox-bg-violet-500 { background-color: var(--nox-violet-500); }
.nox-bg-violet-600 { background-color: var(--nox-violet-600); }
.nox-bg-violet-700 { background-color: var(--nox-violet-700); }
.nox-bg-violet-800 { background-color: var(--nox-violet-800); }
.nox-bg-violet-900 { background-color: var(--nox-violet-900); }
.nox-bg-violet-950 { background-color: var(--nox-violet-950); }

.nox-bg-rose-50 { background-color: var(--nox-rose-50); }
.nox-bg-rose-100 { background-color: var(--nox-rose-100); }
.nox-bg-rose-200 { background-color: var(--nox-rose-200); }
.nox-bg-rose-300 { background-color: var(--nox-rose-300); }
.nox-bg-rose-400 { background-color: var(--nox-rose-400); }
.nox-bg-rose-500 { background-color: var(--nox-rose-500); }
.nox-bg-rose-600 { background-color: var(--nox-rose-600); }
.nox-bg-rose-700 { background-color: var(--nox-rose-700); }
.nox-bg-rose-800 { background-color: var(--nox-rose-800); }
.nox-bg-rose-900 { background-color: var(--nox-rose-900); }
.nox-bg-rose-950 { background-color: var(--nox-rose-950); }

/* ----------------------------------------
   Border Color Utilities
   ---------------------------------------- */

.nox-border-slate-50 { border-color: var(--nox-slate-50); }
.nox-border-slate-100 { border-color: var(--nox-slate-100); }
.nox-border-slate-200 { border-color: var(--nox-slate-200); }
.nox-border-slate-300 { border-color: var(--nox-slate-300); }
.nox-border-slate-400 { border-color: var(--nox-slate-400); }
.nox-border-slate-500 { border-color: var(--nox-slate-500); }
.nox-border-slate-600 { border-color: var(--nox-slate-600); }
.nox-border-slate-700 { border-color: var(--nox-slate-700); }
.nox-border-slate-800 { border-color: var(--nox-slate-800); }
.nox-border-slate-900 { border-color: var(--nox-slate-900); }
.nox-border-slate-950 { border-color: var(--nox-slate-950); }

.nox-border-gray-50 { border-color: var(--nox-gray-50); }
.nox-border-gray-100 { border-color: var(--nox-gray-100); }
.nox-border-gray-200 { border-color: var(--nox-gray-200); }
.nox-border-gray-300 { border-color: var(--nox-gray-300); }
.nox-border-gray-400 { border-color: var(--nox-gray-400); }
.nox-border-gray-500 { border-color: var(--nox-gray-500); }
.nox-border-gray-600 { border-color: var(--nox-gray-600); }
.nox-border-gray-700 { border-color: var(--nox-gray-700); }
.nox-border-gray-800 { border-color: var(--nox-gray-800); }
.nox-border-gray-900 { border-color: var(--nox-gray-900); }
.nox-border-gray-950 { border-color: var(--nox-gray-950); }

.nox-border-zinc-50 { border-color: var(--nox-zinc-50); }
.nox-border-zinc-100 { border-color: var(--nox-zinc-100); }
.nox-border-zinc-200 { border-color: var(--nox-zinc-200); }
.nox-border-zinc-300 { border-color: var(--nox-zinc-300); }
.nox-border-zinc-400 { border-color: var(--nox-zinc-400); }
.nox-border-zinc-500 { border-color: var(--nox-zinc-500); }
.nox-border-zinc-600 { border-color: var(--nox-zinc-600); }
.nox-border-zinc-700 { border-color: var(--nox-zinc-700); }
.nox-border-zinc-800 { border-color: var(--nox-zinc-800); }
.nox-border-zinc-900 { border-color: var(--nox-zinc-900); }
.nox-border-zinc-950 { border-color: var(--nox-zinc-950); }

.nox-border-red-50 { border-color: var(--nox-red-50); }
.nox-border-red-100 { border-color: var(--nox-red-100); }
.nox-border-red-200 { border-color: var(--nox-red-200); }
.nox-border-red-300 { border-color: var(--nox-red-300); }
.nox-border-red-400 { border-color: var(--nox-red-400); }
.nox-border-red-500 { border-color: var(--nox-red-500); }
.nox-border-red-600 { border-color: var(--nox-red-600); }
.nox-border-red-700 { border-color: var(--nox-red-700); }
.nox-border-red-800 { border-color: var(--nox-red-800); }
.nox-border-red-900 { border-color: var(--nox-red-900); }
.nox-border-red-950 { border-color: var(--nox-red-950); }

.nox-border-orange-50 { border-color: var(--nox-orange-50); }
.nox-border-orange-100 { border-color: var(--nox-orange-100); }
.nox-border-orange-200 { border-color: var(--nox-orange-200); }
.nox-border-orange-300 { border-color: var(--nox-orange-300); }
.nox-border-orange-400 { border-color: var(--nox-orange-400); }
.nox-border-orange-500 { border-color: var(--nox-orange-500); }
.nox-border-orange-600 { border-color: var(--nox-orange-600); }
.nox-border-orange-700 { border-color: var(--nox-orange-700); }
.nox-border-orange-800 { border-color: var(--nox-orange-800); }
.nox-border-orange-900 { border-color: var(--nox-orange-900); }
.nox-border-orange-950 { border-color: var(--nox-orange-950); }

.nox-border-amber-50 { border-color: var(--nox-amber-50); }
.nox-border-amber-100 { border-color: var(--nox-amber-100); }
.nox-border-amber-200 { border-color: var(--nox-amber-200); }
.nox-border-amber-300 { border-color: var(--nox-amber-300); }
.nox-border-amber-400 { border-color: var(--nox-amber-400); }
.nox-border-amber-500 { border-color: var(--nox-amber-500); }
.nox-border-amber-600 { border-color: var(--nox-amber-600); }
.nox-border-amber-700 { border-color: var(--nox-amber-700); }
.nox-border-amber-800 { border-color: var(--nox-amber-800); }
.nox-border-amber-900 { border-color: var(--nox-amber-900); }
.nox-border-amber-950 { border-color: var(--nox-amber-950); }

.nox-border-yellow-50 { border-color: var(--nox-yellow-50); }
.nox-border-yellow-100 { border-color: var(--nox-yellow-100); }
.nox-border-yellow-200 { border-color: var(--nox-yellow-200); }
.nox-border-yellow-300 { border-color: var(--nox-yellow-300); }
.nox-border-yellow-400 { border-color: var(--nox-yellow-400); }
.nox-border-yellow-500 { border-color: var(--nox-yellow-500); }
.nox-border-yellow-600 { border-color: var(--nox-yellow-600); }
.nox-border-yellow-700 { border-color: var(--nox-yellow-700); }
.nox-border-yellow-800 { border-color: var(--nox-yellow-800); }
.nox-border-yellow-900 { border-color: var(--nox-yellow-900); }
.nox-border-yellow-950 { border-color: var(--nox-yellow-950); }

.nox-border-lime-50 { border-color: var(--nox-lime-50); }
.nox-border-lime-100 { border-color: var(--nox-lime-100); }
.nox-border-lime-200 { border-color: var(--nox-lime-200); }
.nox-border-lime-300 { border-color: var(--nox-lime-300); }
.nox-border-lime-400 { border-color: var(--nox-lime-400); }
.nox-border-lime-500 { border-color: var(--nox-lime-500); }
.nox-border-lime-600 { border-color: var(--nox-lime-600); }
.nox-border-lime-700 { border-color: var(--nox-lime-700); }
.nox-border-lime-800 { border-color: var(--nox-lime-800); }
.nox-border-lime-900 { border-color: var(--nox-lime-900); }
.nox-border-lime-950 { border-color: var(--nox-lime-950); }

.nox-border-green-50 { border-color: var(--nox-green-50); }
.nox-border-green-100 { border-color: var(--nox-green-100); }
.nox-border-green-200 { border-color: var(--nox-green-200); }
.nox-border-green-300 { border-color: var(--nox-green-300); }
.nox-border-green-400 { border-color: var(--nox-green-400); }
.nox-border-green-500 { border-color: var(--nox-green-500); }
.nox-border-green-600 { border-color: var(--nox-green-600); }
.nox-border-green-700 { border-color: var(--nox-green-700); }
.nox-border-green-800 { border-color: var(--nox-green-800); }
.nox-border-green-900 { border-color: var(--nox-green-900); }
.nox-border-green-950 { border-color: var(--nox-green-950); }

.nox-border-emerald-50 { border-color: var(--nox-emerald-50); }
.nox-border-emerald-100 { border-color: var(--nox-emerald-100); }
.nox-border-emerald-200 { border-color: var(--nox-emerald-200); }
.nox-border-emerald-300 { border-color: var(--nox-emerald-300); }
.nox-border-emerald-400 { border-color: var(--nox-emerald-400); }
.nox-border-emerald-500 { border-color: var(--nox-emerald-500); }
.nox-border-emerald-600 { border-color: var(--nox-emerald-600); }
.nox-border-emerald-700 { border-color: var(--nox-emerald-700); }
.nox-border-emerald-800 { border-color: var(--nox-emerald-800); }
.nox-border-emerald-900 { border-color: var(--nox-emerald-900); }
.nox-border-emerald-950 { border-color: var(--nox-emerald-950); }

.nox-border-teal-50 { border-color: var(--nox-teal-50); }
.nox-border-teal-100 { border-color: var(--nox-teal-100); }
.nox-border-teal-200 { border-color: var(--nox-teal-200); }
.nox-border-teal-300 { border-color: var(--nox-teal-300); }
.nox-border-teal-400 { border-color: var(--nox-teal-400); }
.nox-border-teal-500 { border-color: var(--nox-teal-500); }
.nox-border-teal-600 { border-color: var(--nox-teal-600); }
.nox-border-teal-700 { border-color: var(--nox-teal-700); }
.nox-border-teal-800 { border-color: var(--nox-teal-800); }
.nox-border-teal-900 { border-color: var(--nox-teal-900); }
.nox-border-teal-950 { border-color: var(--nox-teal-950); }

.nox-border-cyan-50 { border-color: var(--nox-cyan-50); }
.nox-border-cyan-100 { border-color: var(--nox-cyan-100); }
.nox-border-cyan-200 { border-color: var(--nox-cyan-200); }
.nox-border-cyan-300 { border-color: var(--nox-cyan-300); }
.nox-border-cyan-400 { border-color: var(--nox-cyan-400); }
.nox-border-cyan-500 { border-color: var(--nox-cyan-500); }
.nox-border-cyan-600 { border-color: var(--nox-cyan-600); }
.nox-border-cyan-700 { border-color: var(--nox-cyan-700); }
.nox-border-cyan-800 { border-color: var(--nox-cyan-800); }
.nox-border-cyan-900 { border-color: var(--nox-cyan-900); }
.nox-border-cyan-950 { border-color: var(--nox-cyan-950); }

.nox-border-blue-50 { border-color: var(--nox-blue-50); }
.nox-border-blue-100 { border-color: var(--nox-blue-100); }
.nox-border-blue-200 { border-color: var(--nox-blue-200); }
.nox-border-blue-300 { border-color: var(--nox-blue-300); }
.nox-border-blue-400 { border-color: var(--nox-blue-400); }
.nox-border-blue-500 { border-color: var(--nox-blue-500); }
.nox-border-blue-600 { border-color: var(--nox-blue-600); }
.nox-border-blue-700 { border-color: var(--nox-blue-700); }
.nox-border-blue-800 { border-color: var(--nox-blue-800); }
.nox-border-blue-900 { border-color: var(--nox-blue-900); }
.nox-border-blue-950 { border-color: var(--nox-blue-950); }

.nox-border-indigo-50 { border-color: var(--nox-indigo-50); }
.nox-border-indigo-100 { border-color: var(--nox-indigo-100); }
.nox-border-indigo-200 { border-color: var(--nox-indigo-200); }
.nox-border-indigo-300 { border-color: var(--nox-indigo-300); }
.nox-border-indigo-400 { border-color: var(--nox-indigo-400); }
.nox-border-indigo-500 { border-color: var(--nox-indigo-500); }
.nox-border-indigo-600 { border-color: var(--nox-indigo-600); }
.nox-border-indigo-700 { border-color: var(--nox-indigo-700); }
.nox-border-indigo-800 { border-color: var(--nox-indigo-800); }
.nox-border-indigo-900 { border-color: var(--nox-indigo-900); }
.nox-border-indigo-950 { border-color: var(--nox-indigo-950); }

.nox-border-violet-50 { border-color: var(--nox-violet-50); }
.nox-border-violet-100 { border-color: var(--nox-violet-100); }
.nox-border-violet-200 { border-color: var(--nox-violet-200); }
.nox-border-violet-300 { border-color: var(--nox-violet-300); }
.nox-border-violet-400 { border-color: var(--nox-violet-400); }
.nox-border-violet-500 { border-color: var(--nox-violet-500); }
.nox-border-violet-600 { border-color: var(--nox-violet-600); }
.nox-border-violet-700 { border-color: var(--nox-violet-700); }
.nox-border-violet-800 { border-color: var(--nox-violet-800); }
.nox-border-violet-900 { border-color: var(--nox-violet-900); }
.nox-border-violet-950 { border-color: var(--nox-violet-950); }

.nox-border-rose-50 { border-color: var(--nox-rose-50); }
.nox-border-rose-100 { border-color: var(--nox-rose-100); }
.nox-border-rose-200 { border-color: var(--nox-rose-200); }
.nox-border-rose-300 { border-color: var(--nox-rose-300); }
.nox-border-rose-400 { border-color: var(--nox-rose-400); }
.nox-border-rose-500 { border-color: var(--nox-rose-500); }
.nox-border-rose-600 { border-color: var(--nox-rose-600); }
.nox-border-rose-700 { border-color: var(--nox-rose-700); }
.nox-border-rose-800 { border-color: var(--nox-rose-800); }
.nox-border-rose-900 { border-color: var(--nox-rose-900); }
.nox-border-rose-950 { border-color: var(--nox-rose-950); }


/* ============================================================


/* ═══════════════════════════════════════════════════════════════════════════
   BLOCK B: EXPANDED UTILITY CLASSES (Tailwind-equivalent)
   ═══════════════════════════════════════════════════════════════════════════ */
   BLOCK B: EXPANDED UTILITY CLASSES
   ============================================================ */

/* ----------------------------------------
   1. Sizing — Width
   ---------------------------------------- */

.nox-w-auto { width: auto; }
.nox-w-full { width: 100%; }
.nox-w-screen { width: 100vw; }
.nox-w-min { width: min-content; }
.nox-w-max { width: max-content; }
.nox-w-fit { width: fit-content; }
.nox-w-0 { width: 0px; }
.nox-w-px { width: 1px; }
.nox-w-0\.5 { width: 2px; }
.nox-w-1 { width: 4px; }
.nox-w-1\.5 { width: 6px; }
.nox-w-2 { width: 8px; }
.nox-w-2\.5 { width: 10px; }
.nox-w-3 { width: 12px; }
.nox-w-3\.5 { width: 14px; }
.nox-w-4 { width: 16px; }
.nox-w-5 { width: 20px; }
.nox-w-6 { width: 24px; }
.nox-w-7 { width: 28px; }
.nox-w-8 { width: 32px; }
.nox-w-9 { width: 36px; }
.nox-w-10 { width: 40px; }
.nox-w-11 { width: 44px; }
.nox-w-12 { width: 48px; }
.nox-w-14 { width: 56px; }
.nox-w-16 { width: 64px; }
.nox-w-20 { width: 80px; }
.nox-w-24 { width: 96px; }
.nox-w-28 { width: 112px; }
.nox-w-32 { width: 128px; }
.nox-w-36 { width: 144px; }
.nox-w-40 { width: 160px; }
.nox-w-44 { width: 176px; }
.nox-w-48 { width: 192px; }
.nox-w-52 { width: 208px; }
.nox-w-56 { width: 224px; }
.nox-w-60 { width: 240px; }
.nox-w-64 { width: 256px; }
.nox-w-72 { width: 288px; }
.nox-w-80 { width: 320px; }
.nox-w-96 { width: 384px; }
.nox-w-1\/2 { width: 50%; }
.nox-w-1\/3 { width: 33.333%; }
.nox-w-2\/3 { width: 66.667%; }
.nox-w-1\/4 { width: 25%; }
.nox-w-2\/4 { width: 50%; }
.nox-w-3\/4 { width: 75%; }
.nox-w-1\/5 { width: 20%; }
.nox-w-2\/5 { width: 40%; }
.nox-w-3\/5 { width: 60%; }
.nox-w-4\/5 { width: 80%; }
.nox-w-1\/6 { width: 16.667%; }
.nox-w-2\/6 { width: 33.333%; }
.nox-w-3\/6 { width: 50%; }
.nox-w-4\/6 { width: 66.667%; }
.nox-w-5\/6 { width: 83.333%; }
.nox-w-1\/12 { width: 8.333%; }
.nox-w-2\/12 { width: 16.667%; }
.nox-w-3\/12 { width: 25%; }
.nox-w-4\/12 { width: 33.333%; }
.nox-w-5\/12 { width: 41.667%; }
.nox-w-6\/12 { width: 50%; }
.nox-w-7\/12 { width: 58.333%; }
.nox-w-8\/12 { width: 66.667%; }
.nox-w-9\/12 { width: 75%; }
.nox-w-10\/12 { width: 83.333%; }
.nox-w-11\/12 { width: 91.667%; }

/* ----------------------------------------
   Sizing — Max Width
   ---------------------------------------- */

.nox-max-w-0 { max-width: 0; }
.nox-max-w-none { max-width: none; }
.nox-max-w-xs { max-width: 320px; }
.nox-max-w-sm { max-width: 384px; }
.nox-max-w-md { max-width: 448px; }
.nox-max-w-lg { max-width: 512px; }
.nox-max-w-xl { max-width: 576px; }
.nox-max-w-2xl { max-width: 672px; }
.nox-max-w-3xl { max-width: 768px; }
.nox-max-w-4xl { max-width: 896px; }
.nox-max-w-5xl { max-width: 1024px; }
.nox-max-w-6xl { max-width: 1152px; }
.nox-max-w-7xl { max-width: 1280px; }
.nox-max-w-full { max-width: 100%; }
.nox-max-w-prose { max-width: 65ch; }
.nox-max-w-screen-sm { max-width: 640px; }
.nox-max-w-screen-md { max-width: 768px; }
.nox-max-w-screen-lg { max-width: 1024px; }
.nox-max-w-screen-xl { max-width: 1280px; }
.nox-max-w-screen-2xl { max-width: 1536px; }
.nox-max-w-min { max-width: min-content; }
.nox-max-w-max { max-width: max-content; }
.nox-max-w-fit { max-width: fit-content; }

/* ----------------------------------------
   Sizing — Min Width
   ---------------------------------------- */

.nox-min-w-0 { min-width: 0; }
.nox-min-w-full { min-width: 100%; }
.nox-min-w-min { min-width: min-content; }
.nox-min-w-max { min-width: max-content; }
.nox-min-w-fit { min-width: fit-content; }
.nox-min-w-px { min-width: 1px; }
.nox-min-w-1 { min-width: 4px; }
.nox-min-w-2 { min-width: 8px; }
.nox-min-w-3 { min-width: 12px; }
.nox-min-w-4 { min-width: 16px; }
.nox-min-w-5 { min-width: 20px; }
.nox-min-w-6 { min-width: 24px; }
.nox-min-w-7 { min-width: 28px; }
.nox-min-w-8 { min-width: 32px; }
.nox-min-w-9 { min-width: 36px; }
.nox-min-w-10 { min-width: 40px; }
.nox-min-w-11 { min-width: 44px; }
.nox-min-w-12 { min-width: 48px; }
.nox-min-w-14 { min-width: 56px; }
.nox-min-w-16 { min-width: 64px; }
.nox-min-w-20 { min-width: 80px; }
.nox-min-w-24 { min-width: 96px; }
.nox-min-w-28 { min-width: 112px; }
.nox-min-w-32 { min-width: 128px; }
.nox-min-w-36 { min-width: 144px; }
.nox-min-w-40 { min-width: 160px; }
.nox-min-w-44 { min-width: 176px; }
.nox-min-w-48 { min-width: 192px; }
.nox-min-w-52 { min-width: 208px; }
.nox-min-w-56 { min-width: 224px; }
.nox-min-w-60 { min-width: 240px; }
.nox-min-w-64 { min-width: 256px; }
.nox-min-w-72 { min-width: 288px; }
.nox-min-w-80 { min-width: 320px; }
.nox-min-w-96 { min-width: 384px; }

/* ----------------------------------------
   Sizing — Height
   ---------------------------------------- */

.nox-h-auto { height: auto; }
.nox-h-full { height: 100%; }
.nox-h-screen { height: 100vh; }
.nox-h-min { height: min-content; }
.nox-h-max { height: max-content; }
.nox-h-fit { height: fit-content; }
.nox-h-dvh { height: 100dvh; }
.nox-h-svh { height: 100svh; }
.nox-h-lvh { height: 100lvh; }
.nox-h-0 { height: 0px; }
.nox-h-px { height: 1px; }
.nox-h-0\.5 { height: 2px; }
.nox-h-1 { height: 4px; }
.nox-h-1\.5 { height: 6px; }
.nox-h-2 { height: 8px; }
.nox-h-2\.5 { height: 10px; }
.nox-h-3 { height: 12px; }
.nox-h-3\.5 { height: 14px; }
.nox-h-4 { height: 16px; }
.nox-h-5 { height: 20px; }
.nox-h-6 { height: 24px; }
.nox-h-7 { height: 28px; }
.nox-h-8 { height: 32px; }
.nox-h-9 { height: 36px; }
.nox-h-10 { height: 40px; }
.nox-h-11 { height: 44px; }
.nox-h-12 { height: 48px; }
.nox-h-14 { height: 56px; }
.nox-h-16 { height: 64px; }
.nox-h-20 { height: 80px; }
.nox-h-24 { height: 96px; }
.nox-h-28 { height: 112px; }
.nox-h-32 { height: 128px; }
.nox-h-36 { height: 144px; }
.nox-h-40 { height: 160px; }
.nox-h-44 { height: 176px; }
.nox-h-48 { height: 192px; }
.nox-h-52 { height: 208px; }
.nox-h-56 { height: 224px; }
.nox-h-60 { height: 240px; }
.nox-h-64 { height: 256px; }
.nox-h-72 { height: 288px; }
.nox-h-80 { height: 320px; }
.nox-h-96 { height: 384px; }

/* ----------------------------------------
   Sizing — Max Height
   ---------------------------------------- */

.nox-max-h-0 { max-height: 0; }
.nox-max-h-none { max-height: none; }
.nox-max-h-full { max-height: 100%; }
.nox-max-h-screen { max-height: 100vh; }
.nox-max-h-min { max-height: min-content; }
.nox-max-h-max { max-height: max-content; }
.nox-max-h-fit { max-height: fit-content; }
.nox-max-h-px { max-height: 1px; }
.nox-max-h-1 { max-height: 4px; }
.nox-max-h-2 { max-height: 8px; }
.nox-max-h-3 { max-height: 12px; }
.nox-max-h-4 { max-height: 16px; }
.nox-max-h-5 { max-height: 20px; }
.nox-max-h-6 { max-height: 24px; }
.nox-max-h-7 { max-height: 28px; }
.nox-max-h-8 { max-height: 32px; }
.nox-max-h-9 { max-height: 36px; }
.nox-max-h-10 { max-height: 40px; }
.nox-max-h-11 { max-height: 44px; }
.nox-max-h-12 { max-height: 48px; }
.nox-max-h-14 { max-height: 56px; }
.nox-max-h-16 { max-height: 64px; }
.nox-max-h-20 { max-height: 80px; }
.nox-max-h-24 { max-height: 96px; }
.nox-max-h-28 { max-height: 112px; }
.nox-max-h-32 { max-height: 128px; }
.nox-max-h-36 { max-height: 144px; }
.nox-max-h-40 { max-height: 160px; }
.nox-max-h-44 { max-height: 176px; }
.nox-max-h-48 { max-height: 192px; }
.nox-max-h-52 { max-height: 208px; }
.nox-max-h-56 { max-height: 224px; }
.nox-max-h-60 { max-height: 240px; }
.nox-max-h-64 { max-height: 256px; }
.nox-max-h-72 { max-height: 288px; }
.nox-max-h-80 { max-height: 320px; }
.nox-max-h-96 { max-height: 384px; }

/* ----------------------------------------
   Sizing — Min Height
   ---------------------------------------- */

.nox-min-h-0 { min-height: 0; }
.nox-min-h-full { min-height: 100%; }
.nox-min-h-screen { min-height: 100vh; }
.nox-min-h-min { min-height: min-content; }
.nox-min-h-max { min-height: max-content; }
.nox-min-h-fit { min-height: fit-content; }
.nox-min-h-dvh { min-height: 100dvh; }
.nox-min-h-svh { min-height: 100svh; }
.nox-min-h-lvh { min-height: 100lvh; }
.nox-min-h-px { min-height: 1px; }
.nox-min-h-1 { min-height: 4px; }
.nox-min-h-2 { min-height: 8px; }
.nox-min-h-3 { min-height: 12px; }
.nox-min-h-4 { min-height: 16px; }
.nox-min-h-5 { min-height: 20px; }
.nox-min-h-6 { min-height: 24px; }
.nox-min-h-7 { min-height: 28px; }
.nox-min-h-8 { min-height: 32px; }
.nox-min-h-9 { min-height: 36px; }
.nox-min-h-10 { min-height: 40px; }
.nox-min-h-11 { min-height: 44px; }
.nox-min-h-12 { min-height: 48px; }
.nox-min-h-14 { min-height: 56px; }
.nox-min-h-16 { min-height: 64px; }
.nox-min-h-20 { min-height: 80px; }
.nox-min-h-24 { min-height: 96px; }
.nox-min-h-28 { min-height: 112px; }
.nox-min-h-32 { min-height: 128px; }
.nox-min-h-36 { min-height: 144px; }
.nox-min-h-40 { min-height: 160px; }
.nox-min-h-44 { min-height: 176px; }
.nox-min-h-48 { min-height: 192px; }
.nox-min-h-52 { min-height: 208px; }
.nox-min-h-56 { min-height: 224px; }
.nox-min-h-60 { min-height: 240px; }
.nox-min-h-64 { min-height: 256px; }
.nox-min-h-72 { min-height: 288px; }
.nox-min-h-80 { min-height: 320px; }
.nox-min-h-96 { min-height: 384px; }

/* ----------------------------------------
   Sizing — Size (width + height)
   ---------------------------------------- */

.nox-size-auto { width: auto; height: auto; }
.nox-size-full { width: 100%; height: 100%; }
.nox-size-min { width: min-content; height: min-content; }
.nox-size-max { width: max-content; height: max-content; }
.nox-size-fit { width: fit-content; height: fit-content; }
.nox-size-0 { width: 0px; height: 0px; }
.nox-size-px { width: 1px; height: 1px; }
.nox-size-0\.5 { width: 2px; height: 2px; }
.nox-size-1 { width: 4px; height: 4px; }
.nox-size-1\.5 { width: 6px; height: 6px; }
.nox-size-2 { width: 8px; height: 8px; }
.nox-size-2\.5 { width: 10px; height: 10px; }
.nox-size-3 { width: 12px; height: 12px; }
.nox-size-3\.5 { width: 14px; height: 14px; }
.nox-size-4 { width: 16px; height: 16px; }
.nox-size-5 { width: 20px; height: 20px; }
.nox-size-6 { width: 24px; height: 24px; }
.nox-size-7 { width: 28px; height: 28px; }
.nox-size-8 { width: 32px; height: 32px; }
.nox-size-9 { width: 36px; height: 36px; }
.nox-size-10 { width: 40px; height: 40px; }
.nox-size-11 { width: 44px; height: 44px; }
.nox-size-12 { width: 48px; height: 48px; }
.nox-size-14 { width: 56px; height: 56px; }
.nox-size-16 { width: 64px; height: 64px; }
.nox-size-20 { width: 80px; height: 80px; }
.nox-size-24 { width: 96px; height: 96px; }
.nox-size-28 { width: 112px; height: 112px; }
.nox-size-32 { width: 128px; height: 128px; }
.nox-size-36 { width: 144px; height: 144px; }
.nox-size-40 { width: 160px; height: 160px; }
.nox-size-44 { width: 176px; height: 176px; }
.nox-size-48 { width: 192px; height: 192px; }
.nox-size-52 { width: 208px; height: 208px; }
.nox-size-56 { width: 224px; height: 224px; }
.nox-size-60 { width: 240px; height: 240px; }
.nox-size-64 { width: 256px; height: 256px; }
.nox-size-72 { width: 288px; height: 288px; }
.nox-size-80 { width: 320px; height: 320px; }
.nox-size-96 { width: 384px; height: 384px; }

/* ----------------------------------------
   2. Grid
   ---------------------------------------- */

.nox-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.nox-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nox-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nox-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nox-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.nox-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.nox-grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.nox-grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.nox-grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
.nox-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.nox-grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.nox-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.nox-grid-cols-none { grid-template-columns: none; }
.nox-grid-cols-subgrid { grid-template-columns: subgrid; }

.nox-grid-rows-1 { grid-template-rows: repeat(1, minmax(0, 1fr)); }
.nox-grid-rows-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.nox-grid-rows-3 { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.nox-grid-rows-4 { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.nox-grid-rows-5 { grid-template-rows: repeat(5, minmax(0, 1fr)); }
.nox-grid-rows-6 { grid-template-rows: repeat(6, minmax(0, 1fr)); }
.nox-grid-rows-none { grid-template-rows: none; }
.nox-grid-rows-subgrid { grid-template-rows: subgrid; }

.nox-col-span-1 { grid-column: span 1 / span 1; }
.nox-col-span-2 { grid-column: span 2 / span 2; }
.nox-col-span-3 { grid-column: span 3 / span 3; }
.nox-col-span-4 { grid-column: span 4 / span 4; }
.nox-col-span-5 { grid-column: span 5 / span 5; }
.nox-col-span-6 { grid-column: span 6 / span 6; }
.nox-col-span-7 { grid-column: span 7 / span 7; }
.nox-col-span-8 { grid-column: span 8 / span 8; }
.nox-col-span-9 { grid-column: span 9 / span 9; }
.nox-col-span-10 { grid-column: span 10 / span 10; }
.nox-col-span-11 { grid-column: span 11 / span 11; }
.nox-col-span-12 { grid-column: span 12 / span 12; }
.nox-col-span-full { grid-column: 1 / -1; }
.nox-col-auto { grid-column: auto; }

.nox-col-start-1 { grid-column-start: 1; }
.nox-col-start-2 { grid-column-start: 2; }
.nox-col-start-3 { grid-column-start: 3; }
.nox-col-start-4 { grid-column-start: 4; }
.nox-col-start-5 { grid-column-start: 5; }
.nox-col-start-6 { grid-column-start: 6; }
.nox-col-start-7 { grid-column-start: 7; }
.nox-col-start-8 { grid-column-start: 8; }
.nox-col-start-9 { grid-column-start: 9; }
.nox-col-start-10 { grid-column-start: 10; }
.nox-col-start-11 { grid-column-start: 11; }
.nox-col-start-12 { grid-column-start: 12; }
.nox-col-start-13 { grid-column-start: 13; }
.nox-col-start-auto { grid-column-start: auto; }

.nox-col-end-1 { grid-column-end: 1; }
.nox-col-end-2 { grid-column-end: 2; }
.nox-col-end-3 { grid-column-end: 3; }
.nox-col-end-4 { grid-column-end: 4; }
.nox-col-end-5 { grid-column-end: 5; }
.nox-col-end-6 { grid-column-end: 6; }
.nox-col-end-7 { grid-column-end: 7; }
.nox-col-end-8 { grid-column-end: 8; }
.nox-col-end-9 { grid-column-end: 9; }
.nox-col-end-10 { grid-column-end: 10; }
.nox-col-end-11 { grid-column-end: 11; }
.nox-col-end-12 { grid-column-end: 12; }
.nox-col-end-13 { grid-column-end: 13; }
.nox-col-end-auto { grid-column-end: auto; }

.nox-row-span-1 { grid-row: span 1 / span 1; }
.nox-row-span-2 { grid-row: span 2 / span 2; }
.nox-row-span-3 { grid-row: span 3 / span 3; }
.nox-row-span-4 { grid-row: span 4 / span 4; }
.nox-row-span-5 { grid-row: span 5 / span 5; }
.nox-row-span-6 { grid-row: span 6 / span 6; }
.nox-row-span-full { grid-row: 1 / -1; }
.nox-row-auto { grid-row: auto; }

.nox-row-start-1 { grid-row-start: 1; }
.nox-row-start-2 { grid-row-start: 2; }
.nox-row-start-3 { grid-row-start: 3; }
.nox-row-start-4 { grid-row-start: 4; }
.nox-row-start-5 { grid-row-start: 5; }
.nox-row-start-6 { grid-row-start: 6; }
.nox-row-start-7 { grid-row-start: 7; }
.nox-row-start-auto { grid-row-start: auto; }

.nox-row-end-1 { grid-row-end: 1; }
.nox-row-end-2 { grid-row-end: 2; }
.nox-row-end-3 { grid-row-end: 3; }
.nox-row-end-4 { grid-row-end: 4; }
.nox-row-end-5 { grid-row-end: 5; }
.nox-row-end-6 { grid-row-end: 6; }
.nox-row-end-7 { grid-row-end: 7; }
.nox-row-end-auto { grid-row-end: auto; }

.nox-auto-cols-auto { grid-auto-columns: auto; }
.nox-auto-cols-min { grid-auto-columns: min-content; }
.nox-auto-cols-max { grid-auto-columns: max-content; }
.nox-auto-cols-fr { grid-auto-columns: minmax(0, 1fr); }

.nox-auto-rows-auto { grid-auto-rows: auto; }
.nox-auto-rows-min { grid-auto-rows: min-content; }
.nox-auto-rows-max { grid-auto-rows: max-content; }
.nox-auto-rows-fr { grid-auto-rows: minmax(0, 1fr); }

.nox-grid-flow-row { grid-auto-flow: row; }
.nox-grid-flow-col { grid-auto-flow: column; }
.nox-grid-flow-dense { grid-auto-flow: dense; }
.nox-grid-flow-row-dense { grid-auto-flow: row dense; }
.nox-grid-flow-col-dense { grid-auto-flow: column dense; }

.nox-place-content-center { place-content: center; }
.nox-place-content-start { place-content: start; }
.nox-place-content-end { place-content: end; }
.nox-place-content-between { place-content: space-between; }
.nox-place-content-around { place-content: space-around; }
.nox-place-content-evenly { place-content: space-evenly; }
.nox-place-content-baseline { place-content: baseline; }
.nox-place-content-stretch { place-content: stretch; }

.nox-place-items-start { place-items: start; }
.nox-place-items-end { place-items: end; }
.nox-place-items-center { place-items: center; }
.nox-place-items-baseline { place-items: baseline; }
.nox-place-items-stretch { place-items: stretch; }

.nox-place-self-auto { place-self: auto; }
.nox-place-self-start { place-self: start; }
.nox-place-self-end { place-self: end; }
.nox-place-self-center { place-self: center; }
.nox-place-self-stretch { place-self: stretch; }

/* ----------------------------------------
   3. Flexbox Extended
   ---------------------------------------- */

.nox-basis-auto { flex-basis: auto; }
.nox-basis-full { flex-basis: 100%; }
.nox-basis-0 { flex-basis: 0px; }
.nox-basis-px { flex-basis: 1px; }
.nox-basis-0\.5 { flex-basis: 2px; }
.nox-basis-1 { flex-basis: 4px; }
.nox-basis-1\.5 { flex-basis: 6px; }
.nox-basis-2 { flex-basis: 8px; }
.nox-basis-2\.5 { flex-basis: 10px; }
.nox-basis-3 { flex-basis: 12px; }
.nox-basis-3\.5 { flex-basis: 14px; }
.nox-basis-4 { flex-basis: 16px; }
.nox-basis-5 { flex-basis: 20px; }
.nox-basis-6 { flex-basis: 24px; }
.nox-basis-7 { flex-basis: 28px; }
.nox-basis-8 { flex-basis: 32px; }
.nox-basis-9 { flex-basis: 36px; }
.nox-basis-10 { flex-basis: 40px; }
.nox-basis-11 { flex-basis: 44px; }
.nox-basis-12 { flex-basis: 48px; }
.nox-basis-14 { flex-basis: 56px; }
.nox-basis-16 { flex-basis: 64px; }
.nox-basis-20 { flex-basis: 80px; }
.nox-basis-24 { flex-basis: 96px; }
.nox-basis-28 { flex-basis: 112px; }
.nox-basis-32 { flex-basis: 128px; }
.nox-basis-36 { flex-basis: 144px; }
.nox-basis-40 { flex-basis: 160px; }
.nox-basis-44 { flex-basis: 176px; }
.nox-basis-48 { flex-basis: 192px; }
.nox-basis-52 { flex-basis: 208px; }
.nox-basis-56 { flex-basis: 224px; }
.nox-basis-60 { flex-basis: 240px; }
.nox-basis-64 { flex-basis: 256px; }
.nox-basis-72 { flex-basis: 288px; }
.nox-basis-80 { flex-basis: 320px; }
.nox-basis-96 { flex-basis: 384px; }
.nox-basis-1\/2 { flex-basis: 50%; }
.nox-basis-1\/3 { flex-basis: 33.333%; }
.nox-basis-2\/3 { flex-basis: 66.667%; }
.nox-basis-1\/4 { flex-basis: 25%; }
.nox-basis-2\/4 { flex-basis: 50%; }
.nox-basis-3\/4 { flex-basis: 75%; }
.nox-basis-1\/5 { flex-basis: 20%; }
.nox-basis-2\/5 { flex-basis: 40%; }
.nox-basis-3\/5 { flex-basis: 60%; }
.nox-basis-4\/5 { flex-basis: 80%; }
.nox-basis-1\/6 { flex-basis: 16.667%; }
.nox-basis-2\/6 { flex-basis: 33.333%; }
.nox-basis-3\/6 { flex-basis: 50%; }
.nox-basis-4\/6 { flex-basis: 66.667%; }
.nox-basis-5\/6 { flex-basis: 83.333%; }

.nox-flex-1 { flex: 1 1 0%; }
.nox-flex-auto { flex: 1 1 auto; }
.nox-flex-initial { flex: 0 1 auto; }
.nox-flex-none { flex: none; }

.nox-grow { flex-grow: 1; }
.nox-grow-0 { flex-grow: 0; }
.nox-shrink { flex-shrink: 1; }
.nox-shrink-0 { flex-shrink: 0; }

.nox-flex-wrap { flex-wrap: wrap; }
.nox-flex-wrap-reverse { flex-wrap: wrap-reverse; }
.nox-flex-nowrap { flex-wrap: nowrap; }

.nox-order-first { order: -9999; }
.nox-order-last { order: 9999; }
.nox-order-none { order: 0; }
.nox-order-1 { order: 1; }
.nox-order-2 { order: 2; }
.nox-order-3 { order: 3; }
.nox-order-4 { order: 4; }
.nox-order-5 { order: 5; }
.nox-order-6 { order: 6; }
.nox-order-7 { order: 7; }
.nox-order-8 { order: 8; }
.nox-order-9 { order: 9; }
.nox-order-10 { order: 10; }
.nox-order-11 { order: 11; }
.nox-order-12 { order: 12; }

.nox-self-auto { align-self: auto; }
.nox-self-start { align-self: flex-start; }
.nox-self-center { align-self: center; }
.nox-self-end { align-self: flex-end; }
.nox-self-stretch { align-self: stretch; }
.nox-self-baseline { align-self: baseline; }

.nox-justify-self-auto { justify-self: auto; }
.nox-justify-self-start { justify-self: start; }
.nox-justify-self-center { justify-self: center; }
.nox-justify-self-end { justify-self: end; }
.nox-justify-self-stretch { justify-self: stretch; }

/* Gap extended */
.nox-gap-x-0 { column-gap: 0; }
.nox-gap-x-px { column-gap: 1px; }
.nox-gap-x-0\.5 { column-gap: 2px; }
.nox-gap-x-1 { column-gap: 4px; }
.nox-gap-x-1\.5 { column-gap: 6px; }
.nox-gap-x-2 { column-gap: 8px; }
.nox-gap-x-2\.5 { column-gap: 10px; }
.nox-gap-x-3 { column-gap: 12px; }
.nox-gap-x-3\.5 { column-gap: 14px; }
.nox-gap-x-4 { column-gap: 16px; }
.nox-gap-x-5 { column-gap: 20px; }
.nox-gap-x-6 { column-gap: 24px; }
.nox-gap-x-7 { column-gap: 28px; }
.nox-gap-x-8 { column-gap: 32px; }
.nox-gap-x-9 { column-gap: 36px; }
.nox-gap-x-10 { column-gap: 40px; }
.nox-gap-x-11 { column-gap: 44px; }
.nox-gap-x-12 { column-gap: 48px; }
.nox-gap-x-14 { column-gap: 56px; }
.nox-gap-x-16 { column-gap: 64px; }
.nox-gap-x-20 { column-gap: 80px; }
.nox-gap-x-24 { column-gap: 96px; }
.nox-gap-y-0 { row-gap: 0; }
.nox-gap-y-px { row-gap: 1px; }
.nox-gap-y-0\.5 { row-gap: 2px; }
.nox-gap-y-1 { row-gap: 4px; }
.nox-gap-y-1\.5 { row-gap: 6px; }
.nox-gap-y-2 { row-gap: 8px; }
.nox-gap-y-2\.5 { row-gap: 10px; }
.nox-gap-y-3 { row-gap: 12px; }
.nox-gap-y-3\.5 { row-gap: 14px; }
.nox-gap-y-4 { row-gap: 16px; }
.nox-gap-y-5 { row-gap: 20px; }
.nox-gap-y-6 { row-gap: 24px; }
.nox-gap-y-7 { row-gap: 28px; }
.nox-gap-y-8 { row-gap: 32px; }
.nox-gap-y-9 { row-gap: 36px; }
.nox-gap-y-10 { row-gap: 40px; }
.nox-gap-y-11 { row-gap: 44px; }
.nox-gap-y-12 { row-gap: 48px; }
.nox-gap-y-14 { row-gap: 56px; }
.nox-gap-y-16 { row-gap: 64px; }
.nox-gap-y-20 { row-gap: 80px; }
.nox-gap-y-24 { row-gap: 96px; }

/* ----------------------------------------
   4. Transforms
   ---------------------------------------- */

.nox-scale-0 { transform: scale(0); }
.nox-scale-50 { transform: scale(0.5); }
.nox-scale-75 { transform: scale(0.75); }
.nox-scale-90 { transform: scale(0.9); }
.nox-scale-95 { transform: scale(0.95); }
.nox-scale-100 { transform: scale(1); }
.nox-scale-105 { transform: scale(1.05); }
.nox-scale-110 { transform: scale(1.1); }
.nox-scale-125 { transform: scale(1.25); }
.nox-scale-150 { transform: scale(1.5); }

.nox-scale-x-0 { transform: scaleX(0); }
.nox-scale-x-50 { transform: scaleX(0.5); }
.nox-scale-x-75 { transform: scaleX(0.75); }
.nox-scale-x-90 { transform: scaleX(0.9); }
.nox-scale-x-95 { transform: scaleX(0.95); }
.nox-scale-x-100 { transform: scaleX(1); }
.nox-scale-x-105 { transform: scaleX(1.05); }
.nox-scale-x-110 { transform: scaleX(1.1); }
.nox-scale-x-125 { transform: scaleX(1.25); }
.nox-scale-x-150 { transform: scaleX(1.5); }

.nox-scale-y-0 { transform: scaleY(0); }
.nox-scale-y-50 { transform: scaleY(0.5); }
.nox-scale-y-75 { transform: scaleY(0.75); }
.nox-scale-y-90 { transform: scaleY(0.9); }
.nox-scale-y-95 { transform: scaleY(0.95); }
.nox-scale-y-100 { transform: scaleY(1); }
.nox-scale-y-105 { transform: scaleY(1.05); }
.nox-scale-y-110 { transform: scaleY(1.1); }
.nox-scale-y-125 { transform: scaleY(1.25); }
.nox-scale-y-150 { transform: scaleY(1.5); }

.nox-rotate-0 { transform: rotate(0deg); }
.nox-rotate-1 { transform: rotate(1deg); }
.nox-rotate-2 { transform: rotate(2deg); }
.nox-rotate-3 { transform: rotate(3deg); }
.nox-rotate-6 { transform: rotate(6deg); }
.nox-rotate-12 { transform: rotate(12deg); }
.nox-rotate-45 { transform: rotate(45deg); }
.nox-rotate-90 { transform: rotate(90deg); }
.nox-rotate-180 { transform: rotate(180deg); }
.-nox-rotate-1 { transform: rotate(-1deg); }
.-nox-rotate-2 { transform: rotate(-2deg); }
.-nox-rotate-3 { transform: rotate(-3deg); }
.-nox-rotate-6 { transform: rotate(-6deg); }
.-nox-rotate-12 { transform: rotate(-12deg); }
.-nox-rotate-45 { transform: rotate(-45deg); }
.-nox-rotate-90 { transform: rotate(-90deg); }
.-nox-rotate-180 { transform: rotate(-180deg); }

.nox-translate-x-0 { transform: translateX(0px); }
.nox-translate-x-px { transform: translateX(1px); }
.nox-translate-x-0\.5 { transform: translateX(2px); }
.nox-translate-x-1 { transform: translateX(4px); }
.nox-translate-x-1\.5 { transform: translateX(6px); }
.nox-translate-x-2 { transform: translateX(8px); }
.nox-translate-x-2\.5 { transform: translateX(10px); }
.nox-translate-x-3 { transform: translateX(12px); }
.nox-translate-x-3\.5 { transform: translateX(14px); }
.nox-translate-x-4 { transform: translateX(16px); }
.nox-translate-x-5 { transform: translateX(20px); }
.nox-translate-x-6 { transform: translateX(24px); }
.nox-translate-x-7 { transform: translateX(28px); }
.nox-translate-x-8 { transform: translateX(32px); }
.nox-translate-x-9 { transform: translateX(36px); }
.nox-translate-x-10 { transform: translateX(40px); }
.nox-translate-x-11 { transform: translateX(44px); }
.nox-translate-x-12 { transform: translateX(48px); }
.nox-translate-x-14 { transform: translateX(56px); }
.nox-translate-x-16 { transform: translateX(64px); }
.nox-translate-x-20 { transform: translateX(80px); }
.nox-translate-x-24 { transform: translateX(96px); }
.nox-translate-x-1\/2 { transform: translateX(50%); }
.nox-translate-x-1\/3 { transform: translateX(33.333%); }
.nox-translate-x-2\/3 { transform: translateX(66.667%); }
.nox-translate-x-1\/4 { transform: translateX(25%); }
.nox-translate-x-3\/4 { transform: translateX(75%); }
.nox-translate-x-full { transform: translateX(100%); }

.-nox-translate-x-px { transform: translateX(-1px); }
.-nox-translate-x-0\.5 { transform: translateX(-2px); }
.-nox-translate-x-1 { transform: translateX(-4px); }
.-nox-translate-x-1\.5 { transform: translateX(-6px); }
.-nox-translate-x-2 { transform: translateX(-8px); }
.-nox-translate-x-2\.5 { transform: translateX(-10px); }
.-nox-translate-x-3 { transform: translateX(-12px); }
.-nox-translate-x-3\.5 { transform: translateX(-14px); }
.-nox-translate-x-4 { transform: translateX(-16px); }
.-nox-translate-x-5 { transform: translateX(-20px); }
.-nox-translate-x-6 { transform: translateX(-24px); }
.-nox-translate-x-7 { transform: translateX(-28px); }
.-nox-translate-x-8 { transform: translateX(-32px); }
.-nox-translate-x-9 { transform: translateX(-36px); }
.-nox-translate-x-10 { transform: translateX(-40px); }
.-nox-translate-x-11 { transform: translateX(-44px); }
.-nox-translate-x-12 { transform: translateX(-48px); }
.-nox-translate-x-14 { transform: translateX(-56px); }
.-nox-translate-x-16 { transform: translateX(-64px); }
.-nox-translate-x-20 { transform: translateX(-80px); }
.-nox-translate-x-24 { transform: translateX(-96px); }
.-nox-translate-x-1\/2 { transform: translateX(-50%); }
.-nox-translate-x-1\/3 { transform: translateX(-33.333%); }
.-nox-translate-x-2\/3 { transform: translateX(-66.667%); }
.-nox-translate-x-1\/4 { transform: translateX(-25%); }
.-nox-translate-x-3\/4 { transform: translateX(-75%); }
.-nox-translate-x-full { transform: translateX(-100%); }

.nox-translate-y-0 { transform: translateY(0px); }
.nox-translate-y-px { transform: translateY(1px); }
.nox-translate-y-0\.5 { transform: translateY(2px); }
.nox-translate-y-1 { transform: translateY(4px); }
.nox-translate-y-1\.5 { transform: translateY(6px); }
.nox-translate-y-2 { transform: translateY(8px); }
.nox-translate-y-2\.5 { transform: translateY(10px); }
.nox-translate-y-3 { transform: translateY(12px); }
.nox-translate-y-3\.5 { transform: translateY(14px); }
.nox-translate-y-4 { transform: translateY(16px); }
.nox-translate-y-5 { transform: translateY(20px); }
.nox-translate-y-6 { transform: translateY(24px); }
.nox-translate-y-7 { transform: translateY(28px); }
.nox-translate-y-8 { transform: translateY(32px); }
.nox-translate-y-9 { transform: translateY(36px); }
.nox-translate-y-10 { transform: translateY(40px); }
.nox-translate-y-11 { transform: translateY(44px); }
.nox-translate-y-12 { transform: translateY(48px); }
.nox-translate-y-14 { transform: translateY(56px); }
.nox-translate-y-16 { transform: translateY(64px); }
.nox-translate-y-20 { transform: translateY(80px); }
.nox-translate-y-24 { transform: translateY(96px); }
.nox-translate-y-1\/2 { transform: translateY(50%); }
.nox-translate-y-1\/3 { transform: translateY(33.333%); }
.nox-translate-y-2\/3 { transform: translateY(66.667%); }
.nox-translate-y-1\/4 { transform: translateY(25%); }
.nox-translate-y-3\/4 { transform: translateY(75%); }
.nox-translate-y-full { transform: translateY(100%); }

.-nox-translate-y-px { transform: translateY(-1px); }
.-nox-translate-y-0\.5 { transform: translateY(-2px); }
.-nox-translate-y-1 { transform: translateY(-4px); }
.-nox-translate-y-1\.5 { transform: translateY(-6px); }
.-nox-translate-y-2 { transform: translateY(-8px); }
.-nox-translate-y-2\.5 { transform: translateY(-10px); }
.-nox-translate-y-3 { transform: translateY(-12px); }
.-nox-translate-y-3\.5 { transform: translateY(-14px); }
.-nox-translate-y-4 { transform: translateY(-16px); }
.-nox-translate-y-5 { transform: translateY(-20px); }
.-nox-translate-y-6 { transform: translateY(-24px); }
.-nox-translate-y-7 { transform: translateY(-28px); }
.-nox-translate-y-8 { transform: translateY(-32px); }
.-nox-translate-y-9 { transform: translateY(-36px); }
.-nox-translate-y-10 { transform: translateY(-40px); }
.-nox-translate-y-11 { transform: translateY(-44px); }
.-nox-translate-y-12 { transform: translateY(-48px); }
.-nox-translate-y-14 { transform: translateY(-56px); }
.-nox-translate-y-16 { transform: translateY(-64px); }
.-nox-translate-y-20 { transform: translateY(-80px); }
.-nox-translate-y-24 { transform: translateY(-96px); }
.-nox-translate-y-1\/2 { transform: translateY(-50%); }
.-nox-translate-y-1\/3 { transform: translateY(-33.333%); }
.-nox-translate-y-2\/3 { transform: translateY(-66.667%); }
.-nox-translate-y-1\/4 { transform: translateY(-25%); }
.-nox-translate-y-3\/4 { transform: translateY(-75%); }
.-nox-translate-y-full { transform: translateY(-100%); }

.nox-skew-x-0 { transform: skewX(0deg); }
.nox-skew-x-1 { transform: skewX(1deg); }
.nox-skew-x-2 { transform: skewX(2deg); }
.nox-skew-x-3 { transform: skewX(3deg); }
.nox-skew-x-6 { transform: skewX(6deg); }
.nox-skew-x-12 { transform: skewX(12deg); }
.-nox-skew-x-1 { transform: skewX(-1deg); }
.-nox-skew-x-2 { transform: skewX(-2deg); }
.-nox-skew-x-3 { transform: skewX(-3deg); }
.-nox-skew-x-6 { transform: skewX(-6deg); }
.-nox-skew-x-12 { transform: skewX(-12deg); }

.nox-skew-y-0 { transform: skewY(0deg); }
.nox-skew-y-1 { transform: skewY(1deg); }
.nox-skew-y-2 { transform: skewY(2deg); }
.nox-skew-y-3 { transform: skewY(3deg); }
.nox-skew-y-6 { transform: skewY(6deg); }
.nox-skew-y-12 { transform: skewY(12deg); }
.-nox-skew-y-1 { transform: skewY(-1deg); }
.-nox-skew-y-2 { transform: skewY(-2deg); }
.-nox-skew-y-3 { transform: skewY(-3deg); }
.-nox-skew-y-6 { transform: skewY(-6deg); }
.-nox-skew-y-12 { transform: skewY(-12deg); }

.nox-origin-center { transform-origin: center; }
.nox-origin-top { transform-origin: top; }
.nox-origin-top-right { transform-origin: top right; }
.nox-origin-right { transform-origin: right; }
.nox-origin-bottom-right { transform-origin: bottom right; }
.nox-origin-bottom { transform-origin: bottom; }
.nox-origin-bottom-left { transform-origin: bottom left; }
.nox-origin-left { transform-origin: left; }
.nox-origin-top-left { transform-origin: top left; }

/* ----------------------------------------
   5. Filters
   ---------------------------------------- */

.nox-blur-none { filter: blur(0); }
.nox-blur-sm { filter: blur(4px); }
.nox-blur { filter: blur(8px); }
.nox-blur-md { filter: blur(12px); }
.nox-blur-lg { filter: blur(16px); }
.nox-blur-xl { filter: blur(24px); }
.nox-blur-2xl { filter: blur(40px); }
.nox-blur-3xl { filter: blur(64px); }

.nox-brightness-0 { filter: brightness(0); }
.nox-brightness-50 { filter: brightness(0.5); }
.nox-brightness-75 { filter: brightness(0.75); }
.nox-brightness-90 { filter: brightness(0.9); }
.nox-brightness-95 { filter: brightness(0.95); }
.nox-brightness-100 { filter: brightness(1); }
.nox-brightness-105 { filter: brightness(1.05); }
.nox-brightness-110 { filter: brightness(1.1); }
.nox-brightness-125 { filter: brightness(1.25); }
.nox-brightness-150 { filter: brightness(1.5); }
.nox-brightness-200 { filter: brightness(2); }

.nox-contrast-0 { filter: contrast(0); }
.nox-contrast-50 { filter: contrast(0.5); }
.nox-contrast-75 { filter: contrast(0.75); }
.nox-contrast-90 { filter: contrast(0.9); }
.nox-contrast-95 { filter: contrast(0.95); }
.nox-contrast-100 { filter: contrast(1); }
.nox-contrast-105 { filter: contrast(1.05); }
.nox-contrast-110 { filter: contrast(1.1); }
.nox-contrast-125 { filter: contrast(1.25); }
.nox-contrast-150 { filter: contrast(1.5); }
.nox-contrast-200 { filter: contrast(2); }

.nox-grayscale-0 { filter: grayscale(0); }
.nox-grayscale { filter: grayscale(100%); }

.nox-hue-rotate-0 { filter: hue-rotate(0deg); }
.nox-hue-rotate-15 { filter: hue-rotate(15deg); }
.nox-hue-rotate-30 { filter: hue-rotate(30deg); }
.nox-hue-rotate-60 { filter: hue-rotate(60deg); }
.nox-hue-rotate-90 { filter: hue-rotate(90deg); }
.nox-hue-rotate-180 { filter: hue-rotate(180deg); }
.-nox-hue-rotate-15 { filter: hue-rotate(-15deg); }
.-nox-hue-rotate-30 { filter: hue-rotate(-30deg); }
.-nox-hue-rotate-60 { filter: hue-rotate(-60deg); }
.-nox-hue-rotate-90 { filter: hue-rotate(-90deg); }
.-nox-hue-rotate-180 { filter: hue-rotate(-180deg); }

.nox-invert-0 { filter: invert(0); }
.nox-invert { filter: invert(100%); }

.nox-saturate-0 { filter: saturate(0); }
.nox-saturate-50 { filter: saturate(0.5); }
.nox-saturate-100 { filter: saturate(1); }
.nox-saturate-150 { filter: saturate(1.5); }
.nox-saturate-200 { filter: saturate(2); }

.nox-sepia-0 { filter: sepia(0); }
.nox-sepia { filter: sepia(100%); }

.nox-drop-shadow-sm { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05)); }
.nox-drop-shadow { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06)); }
.nox-drop-shadow-md { filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06)); }
.nox-drop-shadow-lg { filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1)); }
.nox-drop-shadow-xl { filter: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08)); }
.nox-drop-shadow-2xl { filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15)); }
.nox-drop-shadow-none { filter: drop-shadow(0 0 #0000); }

/* Backdrop Filters */

.nox-backdrop-blur-none { backdrop-filter: blur(0); }
.nox-backdrop-blur-sm { backdrop-filter: blur(4px); }
.nox-backdrop-blur { backdrop-filter: blur(8px); }
.nox-backdrop-blur-md { backdrop-filter: blur(12px); }
.nox-backdrop-blur-lg { backdrop-filter: blur(16px); }
.nox-backdrop-blur-xl { backdrop-filter: blur(24px); }
.nox-backdrop-blur-2xl { backdrop-filter: blur(40px); }
.nox-backdrop-blur-3xl { backdrop-filter: blur(64px); }

.nox-backdrop-brightness-0 { backdrop-filter: brightness(0); }
.nox-backdrop-brightness-50 { backdrop-filter: brightness(0.5); }
.nox-backdrop-brightness-75 { backdrop-filter: brightness(0.75); }
.nox-backdrop-brightness-90 { backdrop-filter: brightness(0.9); }
.nox-backdrop-brightness-95 { backdrop-filter: brightness(0.95); }
.nox-backdrop-brightness-100 { backdrop-filter: brightness(1); }
.nox-backdrop-brightness-105 { backdrop-filter: brightness(1.05); }
.nox-backdrop-brightness-110 { backdrop-filter: brightness(1.1); }
.nox-backdrop-brightness-125 { backdrop-filter: brightness(1.25); }
.nox-backdrop-brightness-150 { backdrop-filter: brightness(1.5); }
.nox-backdrop-brightness-200 { backdrop-filter: brightness(2); }

.nox-backdrop-contrast-0 { backdrop-filter: contrast(0); }
.nox-backdrop-contrast-50 { backdrop-filter: contrast(0.5); }
.nox-backdrop-contrast-75 { backdrop-filter: contrast(0.75); }
.nox-backdrop-contrast-90 { backdrop-filter: contrast(0.9); }
.nox-backdrop-contrast-95 { backdrop-filter: contrast(0.95); }
.nox-backdrop-contrast-100 { backdrop-filter: contrast(1); }
.nox-backdrop-contrast-105 { backdrop-filter: contrast(1.05); }
.nox-backdrop-contrast-110 { backdrop-filter: contrast(1.1); }
.nox-backdrop-contrast-125 { backdrop-filter: contrast(1.25); }
.nox-backdrop-contrast-150 { backdrop-filter: contrast(1.5); }
.nox-backdrop-contrast-200 { backdrop-filter: contrast(2); }

.nox-backdrop-grayscale-0 { backdrop-filter: grayscale(0); }
.nox-backdrop-grayscale { backdrop-filter: grayscale(100%); }

.nox-backdrop-hue-rotate-0 { backdrop-filter: hue-rotate(0deg); }
.nox-backdrop-hue-rotate-15 { backdrop-filter: hue-rotate(15deg); }
.nox-backdrop-hue-rotate-30 { backdrop-filter: hue-rotate(30deg); }
.nox-backdrop-hue-rotate-60 { backdrop-filter: hue-rotate(60deg); }
.nox-backdrop-hue-rotate-90 { backdrop-filter: hue-rotate(90deg); }
.nox-backdrop-hue-rotate-180 { backdrop-filter: hue-rotate(180deg); }

.nox-backdrop-invert-0 { backdrop-filter: invert(0); }
.nox-backdrop-invert { backdrop-filter: invert(100%); }

.nox-backdrop-saturate-0 { backdrop-filter: saturate(0); }
.nox-backdrop-saturate-50 { backdrop-filter: saturate(0.5); }
.nox-backdrop-saturate-100 { backdrop-filter: saturate(1); }
.nox-backdrop-saturate-150 { backdrop-filter: saturate(1.5); }
.nox-backdrop-saturate-200 { backdrop-filter: saturate(2); }

.nox-backdrop-sepia-0 { backdrop-filter: sepia(0); }
.nox-backdrop-sepia { backdrop-filter: sepia(100%); }

.nox-backdrop-opacity-0 { backdrop-filter: opacity(0); }
.nox-backdrop-opacity-5 { backdrop-filter: opacity(0.05); }
.nox-backdrop-opacity-10 { backdrop-filter: opacity(0.1); }
.nox-backdrop-opacity-20 { backdrop-filter: opacity(0.2); }
.nox-backdrop-opacity-25 { backdrop-filter: opacity(0.25); }
.nox-backdrop-opacity-30 { backdrop-filter: opacity(0.3); }
.nox-backdrop-opacity-40 { backdrop-filter: opacity(0.4); }
.nox-backdrop-opacity-50 { backdrop-filter: opacity(0.5); }
.nox-backdrop-opacity-60 { backdrop-filter: opacity(0.6); }
.nox-backdrop-opacity-70 { backdrop-filter: opacity(0.7); }
.nox-backdrop-opacity-75 { backdrop-filter: opacity(0.75); }
.nox-backdrop-opacity-80 { backdrop-filter: opacity(0.8); }
.nox-backdrop-opacity-90 { backdrop-filter: opacity(0.9); }
.nox-backdrop-opacity-95 { backdrop-filter: opacity(0.95); }
.nox-backdrop-opacity-100 { backdrop-filter: opacity(1); }

/* ----------------------------------------
   6. Transitions & Animation
   ---------------------------------------- */

.nox-transition-none { transition-property: none; }
.nox-transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.nox-transition-default { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.nox-transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.nox-transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.nox-transition-shadow { transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.nox-transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }

.nox-duration-0 { transition-duration: 0ms; }
.nox-duration-75 { transition-duration: 75ms; }
.nox-duration-100 { transition-duration: 100ms; }
.nox-duration-150 { transition-duration: 150ms; }
.nox-duration-200 { transition-duration: 200ms; }
.nox-duration-300 { transition-duration: 300ms; }
.nox-duration-500 { transition-duration: 500ms; }
.nox-duration-700 { transition-duration: 700ms; }
.nox-duration-1000 { transition-duration: 1000ms; }

.nox-ease-linear { transition-timing-function: linear; }
.nox-ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
.nox-ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.nox-ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

.nox-delay-0 { transition-delay: 0ms; }
.nox-delay-75 { transition-delay: 75ms; }
.nox-delay-100 { transition-delay: 100ms; }
.nox-delay-150 { transition-delay: 150ms; }
.nox-delay-200 { transition-delay: 200ms; }
.nox-delay-300 { transition-delay: 300ms; }
.nox-delay-500 { transition-delay: 500ms; }
.nox-delay-700 { transition-delay: 700ms; }
.nox-delay-1000 { transition-delay: 1000ms; }

.nox-animate-none { animation: none; }
.nox-animate-spin { animation: nox-spin 1s linear infinite; }
.nox-animate-ping { animation: nox-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.nox-animate-pulse { animation: nox-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.nox-animate-bounce { animation: nox-bounce 1s infinite; }

@keyframes nox-spin { to { transform: rotate(360deg); } }
@keyframes nox-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
@keyframes nox-pulse { 50% { opacity: 0.5; } }
@keyframes nox-bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } }

/* ----------------------------------------
   7. Border Expanded
   ---------------------------------------- */

.nox-border-0 { border-width: 0; }
.nox-border-1 { border-width: 1px; }
.nox-border-2 { border-width: 2px; }
.nox-border-4 { border-width: 4px; }
.nox-border-8 { border-width: 8px; }

.nox-border-t-0 { border-top-width: 0; }
.nox-border-t-1 { border-top-width: 1px; }
.nox-border-t-2 { border-top-width: 2px; }
.nox-border-t-4 { border-top-width: 4px; }
.nox-border-t-8 { border-top-width: 8px; }

.nox-border-r-0 { border-right-width: 0; }
.nox-border-r-1 { border-right-width: 1px; }
.nox-border-r-2 { border-right-width: 2px; }
.nox-border-r-4 { border-right-width: 4px; }
.nox-border-r-8 { border-right-width: 8px; }

.nox-border-b-0 { border-bottom-width: 0; }
.nox-border-b-1 { border-bottom-width: 1px; }
.nox-border-b-2 { border-bottom-width: 2px; }
.nox-border-b-4 { border-bottom-width: 4px; }
.nox-border-b-8 { border-bottom-width: 8px; }

.nox-border-l-0 { border-left-width: 0; }
.nox-border-l-1 { border-left-width: 1px; }
.nox-border-l-2 { border-left-width: 2px; }
.nox-border-l-4 { border-left-width: 4px; }
.nox-border-l-8 { border-left-width: 8px; }

.nox-border-x-0 { border-left-width: 0; border-right-width: 0; }
.nox-border-x-1 { border-left-width: 1px; border-right-width: 1px; }
.nox-border-x-2 { border-left-width: 2px; border-right-width: 2px; }
.nox-border-x-4 { border-left-width: 4px; border-right-width: 4px; }
.nox-border-x-8 { border-left-width: 8px; border-right-width: 8px; }
.nox-border-y-0 { border-top-width: 0; border-bottom-width: 0; }
.nox-border-y-1 { border-top-width: 1px; border-bottom-width: 1px; }
.nox-border-y-2 { border-top-width: 2px; border-bottom-width: 2px; }
.nox-border-y-4 { border-top-width: 4px; border-bottom-width: 4px; }
.nox-border-y-8 { border-top-width: 8px; border-bottom-width: 8px; }

.nox-border-solid { border-style: solid; }
.nox-border-dashed { border-style: dashed; }
.nox-border-dotted { border-style: dotted; }
.nox-border-double { border-style: double; }
.nox-border-hidden { border-style: hidden; }
.nox-border-none { border-style: none; }

.nox-border-collapse { border-collapse: collapse; }
.nox-border-separate { border-collapse: separate; }

.nox-border-spacing-0 { border-spacing: 0; }
.nox-border-spacing-1 { border-spacing: 4px; }
.nox-border-spacing-2 { border-spacing: 8px; }
.nox-border-spacing-3 { border-spacing: 12px; }
.nox-border-spacing-4 { border-spacing: 16px; }
.nox-border-spacing-5 { border-spacing: 20px; }
.nox-border-spacing-6 { border-spacing: 24px; }
.nox-border-spacing-8 { border-spacing: 32px; }

.nox-divide-x-0 > * + * { border-left-width: 0; }
.nox-divide-x > * + * { border-left-width: 1px; }
.nox-divide-x-2 > * + * { border-left-width: 2px; }
.nox-divide-x-4 > * + * { border-left-width: 4px; }
.nox-divide-x-8 > * + * { border-left-width: 8px; }

.nox-divide-y-0 > * + * { border-top-width: 0; }
.nox-divide-y > * + * { border-top-width: 1px; }
.nox-divide-y-2 > * + * { border-top-width: 2px; }
.nox-divide-y-4 > * + * { border-top-width: 4px; }
.nox-divide-y-8 > * + * { border-top-width: 8px; }

.nox-divide-x-reverse > * + * { border-right-width: 1px; border-left-width: 0; }
.nox-divide-y-reverse > * + * { border-bottom-width: 1px; border-top-width: 0; }

.nox-divide-solid > * + * { border-style: solid; }
.nox-divide-dashed > * + * { border-style: dashed; }
.nox-divide-dotted > * + * { border-style: dotted; }
.nox-divide-double > * + * { border-style: double; }
.nox-divide-none > * + * { border-style: none; }

.nox-divide-slate-200 > * + * { border-color: var(--nox-slate-200); }
.nox-divide-slate-300 > * + * { border-color: var(--nox-slate-300); }
.nox-divide-slate-600 > * + * { border-color: var(--nox-slate-600); }
.nox-divide-slate-700 > * + * { border-color: var(--nox-slate-700); }
.nox-divide-gray-200 > * + * { border-color: var(--nox-gray-200); }
.nox-divide-gray-300 > * + * { border-color: var(--nox-gray-300); }
.nox-divide-gray-600 > * + * { border-color: var(--nox-gray-600); }
.nox-divide-gray-700 > * + * { border-color: var(--nox-gray-700); }
.nox-divide-zinc-200 > * + * { border-color: var(--nox-zinc-200); }
.nox-divide-zinc-300 > * + * { border-color: var(--nox-zinc-300); }
.nox-divide-zinc-600 > * + * { border-color: var(--nox-zinc-600); }
.nox-divide-zinc-700 > * + * { border-color: var(--nox-zinc-700); }

.nox-ring-0 { box-shadow: 0 0 0 0px var(--nox-ring-color, var(--nox-accent)); }
.nox-ring-1 { box-shadow: 0 0 0 1px var(--nox-ring-color, var(--nox-accent)); }
.nox-ring-2 { box-shadow: 0 0 0 2px var(--nox-ring-color, var(--nox-accent)); }
.nox-ring { box-shadow: 0 0 0 3px var(--nox-ring-color, var(--nox-accent)); }
.nox-ring-4 { box-shadow: 0 0 0 4px var(--nox-ring-color, var(--nox-accent)); }
.nox-ring-8 { box-shadow: 0 0 0 8px var(--nox-ring-color, var(--nox-accent)); }
.nox-ring-inset { --nox-ring-inset: inset; }

.nox-ring-offset-0 { --nox-ring-offset-width: 0px; }
.nox-ring-offset-1 { --nox-ring-offset-width: 1px; }
.nox-ring-offset-2 { --nox-ring-offset-width: 2px; }
.nox-ring-offset-4 { --nox-ring-offset-width: 4px; }
.nox-ring-offset-8 { --nox-ring-offset-width: 8px; }

.nox-ring-slate-400 { --nox-ring-color: var(--nox-slate-400); }
.nox-ring-slate-500 { --nox-ring-color: var(--nox-slate-500); }
.nox-ring-gray-400 { --nox-ring-color: var(--nox-gray-400); }
.nox-ring-gray-500 { --nox-ring-color: var(--nox-gray-500); }
.nox-ring-red-400 { --nox-ring-color: var(--nox-red-400); }
.nox-ring-red-500 { --nox-ring-color: var(--nox-red-500); }
.nox-ring-blue-400 { --nox-ring-color: var(--nox-blue-400); }
.nox-ring-blue-500 { --nox-ring-color: var(--nox-blue-500); }
.nox-ring-green-400 { --nox-ring-color: var(--nox-green-400); }
.nox-ring-green-500 { --nox-ring-color: var(--nox-green-500); }
.nox-ring-indigo-400 { --nox-ring-color: var(--nox-indigo-400); }
.nox-ring-indigo-500 { --nox-ring-color: var(--nox-indigo-500); }
.nox-ring-violet-400 { --nox-ring-color: var(--nox-violet-400); }
.nox-ring-violet-500 { --nox-ring-color: var(--nox-violet-500); }

.nox-outline-none { outline: 2px solid transparent; outline-offset: 2px; }
.nox-outline { outline-style: solid; outline-width: 2px; outline-offset: 2px; }
.nox-outline-dashed { outline-style: dashed; outline-width: 2px; outline-offset: 2px; }
.nox-outline-dotted { outline-style: dotted; outline-width: 2px; outline-offset: 2px; }
.nox-outline-double { outline-style: double; outline-width: 2px; outline-offset: 2px; }
.nox-outline-0 { outline-width: 0; }
.nox-outline-1 { outline-width: 1px; }
.nox-outline-2 { outline-width: 2px; }
.nox-outline-4 { outline-width: 4px; }
.nox-outline-8 { outline-width: 8px; }
.nox-outline-offset-0 { outline-offset: 0; }
.nox-outline-offset-1 { outline-offset: 1px; }
.nox-outline-offset-2 { outline-offset: 2px; }
.nox-outline-offset-4 { outline-offset: 4px; }
.nox-outline-offset-8 { outline-offset: 8px; }

/* ----------------------------------------
   8. Effects & Interactivity
   ---------------------------------------- */

.nox-object-contain { object-fit: contain; }
.nox-object-cover { object-fit: cover; }
.nox-object-fill { object-fit: fill; }
.nox-object-none { object-fit: none; }
.nox-object-scale-down { object-fit: scale-down; }

.nox-object-bottom { object-position: bottom; }
.nox-object-center { object-position: center; }
.nox-object-left { object-position: left; }
.nox-object-left-bottom { object-position: left bottom; }
.nox-object-left-top { object-position: left top; }
.nox-object-right { object-position: right; }
.nox-object-right-bottom { object-position: right bottom; }
.nox-object-right-top { object-position: right top; }
.nox-object-top { object-position: top; }

.nox-mix-blend-normal { mix-blend-mode: normal; }
.nox-mix-blend-multiply { mix-blend-mode: multiply; }
.nox-mix-blend-screen { mix-blend-mode: screen; }
.nox-mix-blend-overlay { mix-blend-mode: overlay; }
.nox-mix-blend-darken { mix-blend-mode: darken; }
.nox-mix-blend-lighten { mix-blend-mode: lighten; }
.nox-mix-blend-color-dodge { mix-blend-mode: color-dodge; }
.nox-mix-blend-color-burn { mix-blend-mode: color-burn; }
.nox-mix-blend-hard-light { mix-blend-mode: hard-light; }
.nox-mix-blend-soft-light { mix-blend-mode: soft-light; }
.nox-mix-blend-difference { mix-blend-mode: difference; }
.nox-mix-blend-exclusion { mix-blend-mode: exclusion; }
.nox-mix-blend-hue { mix-blend-mode: hue; }
.nox-mix-blend-saturation { mix-blend-mode: saturation; }
.nox-mix-blend-color { mix-blend-mode: color; }
.nox-mix-blend-luminosity { mix-blend-mode: luminosity; }

.nox-bg-blend-normal { background-blend-mode: normal; }
.nox-bg-blend-multiply { background-blend-mode: multiply; }
.nox-bg-blend-screen { background-blend-mode: screen; }
.nox-bg-blend-overlay { background-blend-mode: overlay; }
.nox-bg-blend-darken { background-blend-mode: darken; }
.nox-bg-blend-lighten { background-blend-mode: lighten; }
.nox-bg-blend-color-dodge { background-blend-mode: color-dodge; }
.nox-bg-blend-color-burn { background-blend-mode: color-burn; }
.nox-bg-blend-hard-light { background-blend-mode: hard-light; }
.nox-bg-blend-soft-light { background-blend-mode: soft-light; }
.nox-bg-blend-difference { background-blend-mode: difference; }
.nox-bg-blend-exclusion { background-blend-mode: exclusion; }

.nox-isolate { isolation: isolate; }
.nox-isolation-auto { isolation: auto; }

.nox-will-change-auto { will-change: auto; }
.nox-will-change-scroll { will-change: scroll-position; }
.nox-will-change-contents { will-change: contents; }
.nox-will-change-transform { will-change: transform; }

.nox-overscroll-auto { overscroll-behavior: auto; }
.nox-overscroll-contain { overscroll-behavior: contain; }
.nox-overscroll-none { overscroll-behavior: none; }
.nox-overscroll-x-auto { overscroll-behavior-x: auto; }
.nox-overscroll-x-contain { overscroll-behavior-x: contain; }
.nox-overscroll-x-none { overscroll-behavior-x: none; }
.nox-overscroll-y-auto { overscroll-behavior-y: auto; }
.nox-overscroll-y-contain { overscroll-behavior-y: contain; }
.nox-overscroll-y-none { overscroll-behavior-y: none; }

.nox-scroll-auto { scroll-behavior: auto; }
.nox-scroll-smooth { scroll-behavior: smooth; }

.nox-snap-start { scroll-snap-align: start; }
.nox-snap-end { scroll-snap-align: end; }
.nox-snap-center { scroll-snap-align: center; }
.nox-snap-align-none { scroll-snap-align: none; }
.nox-snap-none { scroll-snap-type: none; }
.nox-snap-x { scroll-snap-type: x var(--nox-snap-strictness, mandatory); }
.nox-snap-y { scroll-snap-type: y var(--nox-snap-strictness, mandatory); }
.nox-snap-both { scroll-snap-type: both var(--nox-snap-strictness, mandatory); }
.nox-snap-mandatory { --nox-snap-strictness: mandatory; }
.nox-snap-proximity { --nox-snap-strictness: proximity; }
.nox-snap-normal { scroll-snap-stop: normal; }
.nox-snap-always { scroll-snap-stop: always; }

.nox-cursor-auto { cursor: auto; }
.nox-cursor-default { cursor: default; }
.nox-cursor-pointer { cursor: pointer; }
.nox-cursor-wait { cursor: wait; }
.nox-cursor-text { cursor: text; }
.nox-cursor-move { cursor: move; }
.nox-cursor-help { cursor: help; }
.nox-cursor-not-allowed { cursor: not-allowed; }
.nox-cursor-none { cursor: none; }
.nox-cursor-context-menu { cursor: context-menu; }
.nox-cursor-progress { cursor: progress; }
.nox-cursor-cell { cursor: cell; }
.nox-cursor-crosshair { cursor: crosshair; }
.nox-cursor-vertical-text { cursor: vertical-text; }
.nox-cursor-alias { cursor: alias; }
.nox-cursor-copy { cursor: copy; }
.nox-cursor-no-drop { cursor: no-drop; }
.nox-cursor-grab { cursor: grab; }
.nox-cursor-grabbing { cursor: grabbing; }
.nox-cursor-all-scroll { cursor: all-scroll; }
.nox-cursor-col-resize { cursor: col-resize; }
.nox-cursor-row-resize { cursor: row-resize; }
.nox-cursor-n-resize { cursor: n-resize; }
.nox-cursor-e-resize { cursor: e-resize; }
.nox-cursor-s-resize { cursor: s-resize; }
.nox-cursor-w-resize { cursor: w-resize; }
.nox-cursor-ne-resize { cursor: ne-resize; }
.nox-cursor-nw-resize { cursor: nw-resize; }
.nox-cursor-se-resize { cursor: se-resize; }
.nox-cursor-sw-resize { cursor: sw-resize; }
.nox-cursor-ew-resize { cursor: ew-resize; }
.nox-cursor-ns-resize { cursor: ns-resize; }
.nox-cursor-nesw-resize { cursor: nesw-resize; }
.nox-cursor-nwse-resize { cursor: nwse-resize; }
.nox-cursor-zoom-in { cursor: zoom-in; }
.nox-cursor-zoom-out { cursor: zoom-out; }

.nox-resize-none { resize: none; }
.nox-resize { resize: both; }
.nox-resize-x { resize: horizontal; }
.nox-resize-y { resize: vertical; }

.nox-touch-auto { touch-action: auto; }
.nox-touch-none { touch-action: none; }
.nox-touch-pan-x { touch-action: pan-x; }
.nox-touch-pan-left { touch-action: pan-left; }
.nox-touch-pan-right { touch-action: pan-right; }
.nox-touch-pan-y { touch-action: pan-y; }
.nox-touch-pan-up { touch-action: pan-up; }
.nox-touch-pan-down { touch-action: pan-down; }
.nox-touch-pinch-zoom { touch-action: pinch-zoom; }
.nox-touch-manipulation { touch-action: manipulation; }

.nox-select-none { user-select: none; }
.nox-select-auto { user-select: auto; }
.nox-select-text { user-select: text; }
.nox-select-all { user-select: all; }

.nox-pointer-events-none { pointer-events: none; }
.nox-pointer-events-auto { pointer-events: auto; }

.nox-appearance-none { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.nox-appearance-auto { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; }

.nox-accent-auto { accent-color: auto; }
.nox-accent-current { accent-color: var(--nox-accent); }
.nox-accent-inherit { accent-color: inherit; }

.nox-caret-transparent { caret-color: transparent; }
.nox-caret-current { caret-color: currentColor; }
.nox-caret-accent { caret-color: var(--nox-accent); }

/* ----------------------------------------
   9. Extended Spacing
   ---------------------------------------- */

.nox-p-7 { padding: 28px; }
.nox-p-8 { padding: 32px; }
.nox-p-9 { padding: 36px; }
.nox-p-10 { padding: 40px; }
.nox-p-11 { padding: 44px; }
.nox-p-12 { padding: 48px; }
.nox-p-14 { padding: 56px; }
.nox-p-16 { padding: 64px; }
.nox-p-20 { padding: 80px; }
.nox-p-24 { padding: 96px; }
.nox-p-28 { padding: 112px; }
.nox-p-32 { padding: 128px; }
.nox-p-36 { padding: 144px; }
.nox-p-40 { padding: 160px; }
.nox-p-44 { padding: 176px; }
.nox-p-48 { padding: 192px; }
.nox-p-52 { padding: 208px; }
.nox-p-56 { padding: 224px; }
.nox-p-60 { padding: 240px; }
.nox-p-64 { padding: 256px; }
.nox-p-72 { padding: 288px; }
.nox-p-80 { padding: 320px; }
.nox-p-96 { padding: 384px; }

.nox-px-7 { padding-left: 28px; padding-right: 28px; }
.nox-px-8 { padding-left: 32px; padding-right: 32px; }
.nox-px-9 { padding-left: 36px; padding-right: 36px; }
.nox-px-10 { padding-left: 40px; padding-right: 40px; }
.nox-px-11 { padding-left: 44px; padding-right: 44px; }
.nox-px-12 { padding-left: 48px; padding-right: 48px; }
.nox-px-14 { padding-left: 56px; padding-right: 56px; }
.nox-px-16 { padding-left: 64px; padding-right: 64px; }
.nox-px-20 { padding-left: 80px; padding-right: 80px; }
.nox-px-24 { padding-left: 96px; padding-right: 96px; }

.nox-py-7 { padding-top: 28px; padding-bottom: 28px; }
.nox-py-8 { padding-top: 32px; padding-bottom: 32px; }
.nox-py-9 { padding-top: 36px; padding-bottom: 36px; }
.nox-py-10 { padding-top: 40px; padding-bottom: 40px; }
.nox-py-11 { padding-top: 44px; padding-bottom: 44px; }
.nox-py-12 { padding-top: 48px; padding-bottom: 48px; }
.nox-py-14 { padding-top: 56px; padding-bottom: 56px; }
.nox-py-16 { padding-top: 64px; padding-bottom: 64px; }
.nox-py-20 { padding-top: 80px; padding-bottom: 80px; }
.nox-py-24 { padding-top: 96px; padding-bottom: 96px; }

.nox-pt-7 { padding-top: 28px; }
.nox-pt-8 { padding-top: 32px; }
.nox-pt-9 { padding-top: 36px; }
.nox-pt-10 { padding-top: 40px; }
.nox-pt-11 { padding-top: 44px; }
.nox-pt-12 { padding-top: 48px; }
.nox-pt-14 { padding-top: 56px; }
.nox-pt-16 { padding-top: 64px; }
.nox-pt-20 { padding-top: 80px; }
.nox-pt-24 { padding-top: 96px; }

.nox-pr-7 { padding-right: 28px; }
.nox-pr-8 { padding-right: 32px; }
.nox-pr-9 { padding-right: 36px; }
.nox-pr-10 { padding-right: 40px; }
.nox-pr-11 { padding-right: 44px; }
.nox-pr-12 { padding-right: 48px; }
.nox-pr-14 { padding-right: 56px; }
.nox-pr-16 { padding-right: 64px; }
.nox-pr-20 { padding-right: 80px; }
.nox-pr-24 { padding-right: 96px; }

.nox-pb-7 { padding-bottom: 28px; }
.nox-pb-8 { padding-bottom: 32px; }
.nox-pb-9 { padding-bottom: 36px; }
.nox-pb-10 { padding-bottom: 40px; }
.nox-pb-11 { padding-bottom: 44px; }
.nox-pb-12 { padding-bottom: 48px; }
.nox-pb-14 { padding-bottom: 56px; }
.nox-pb-16 { padding-bottom: 64px; }
.nox-pb-20 { padding-bottom: 80px; }
.nox-pb-24 { padding-bottom: 96px; }

.nox-pl-7 { padding-left: 28px; }
.nox-pl-8 { padding-left: 32px; }
.nox-pl-9 { padding-left: 36px; }
.nox-pl-10 { padding-left: 40px; }
.nox-pl-11 { padding-left: 44px; }
.nox-pl-12 { padding-left: 48px; }
.nox-pl-14 { padding-left: 56px; }
.nox-pl-16 { padding-left: 64px; }
.nox-pl-20 { padding-left: 80px; }
.nox-pl-24 { padding-left: 96px; }

.nox-m-7 { margin: 28px; }
.nox-m-8 { margin: 32px; }
.nox-m-9 { margin: 36px; }
.nox-m-10 { margin: 40px; }
.nox-m-11 { margin: 44px; }
.nox-m-12 { margin: 48px; }
.nox-m-14 { margin: 56px; }
.nox-m-16 { margin: 64px; }
.nox-m-20 { margin: 80px; }
.nox-m-24 { margin: 96px; }
.nox-m-28 { margin: 112px; }
.nox-m-32 { margin: 128px; }
.nox-m-36 { margin: 144px; }
.nox-m-40 { margin: 160px; }
.nox-m-44 { margin: 176px; }
.nox-m-48 { margin: 192px; }
.nox-m-auto { margin: auto; }

.nox-mx-7 { margin-left: 28px; margin-right: 28px; }
.nox-mx-8 { margin-left: 32px; margin-right: 32px; }
.nox-mx-9 { margin-left: 36px; margin-right: 36px; }
.nox-mx-10 { margin-left: 40px; margin-right: 40px; }
.nox-mx-12 { margin-left: 48px; margin-right: 48px; }
.nox-mx-14 { margin-left: 56px; margin-right: 56px; }
.nox-mx-16 { margin-left: 64px; margin-right: 64px; }
.nox-mx-20 { margin-left: 80px; margin-right: 80px; }
.nox-mx-24 { margin-left: 96px; margin-right: 96px; }

.nox-my-7 { margin-top: 28px; margin-bottom: 28px; }
.nox-my-8 { margin-top: 32px; margin-bottom: 32px; }
.nox-my-9 { margin-top: 36px; margin-bottom: 36px; }
.nox-my-10 { margin-top: 40px; margin-bottom: 40px; }
.nox-my-12 { margin-top: 48px; margin-bottom: 48px; }
.nox-my-14 { margin-top: 56px; margin-bottom: 56px; }
.nox-my-16 { margin-top: 64px; margin-bottom: 64px; }
.nox-my-20 { margin-top: 80px; margin-bottom: 80px; }
.nox-my-24 { margin-top: 96px; margin-bottom: 96px; }

.nox-mt-7 { margin-top: 28px; }
.nox-mt-8 { margin-top: 32px; }
.nox-mt-9 { margin-top: 36px; }
.nox-mt-10 { margin-top: 40px; }
.nox-mt-11 { margin-top: 44px; }
.nox-mt-12 { margin-top: 48px; }
.nox-mt-14 { margin-top: 56px; }
.nox-mt-16 { margin-top: 64px; }
.nox-mt-20 { margin-top: 80px; }
.nox-mt-24 { margin-top: 96px; }

.nox-mr-7 { margin-right: 28px; }
.nox-mr-8 { margin-right: 32px; }
.nox-mr-9 { margin-right: 36px; }
.nox-mr-10 { margin-right: 40px; }
.nox-mr-12 { margin-right: 48px; }
.nox-mr-14 { margin-right: 56px; }
.nox-mr-16 { margin-right: 64px; }
.nox-mr-20 { margin-right: 80px; }
.nox-mr-24 { margin-right: 96px; }

.nox-mb-7 { margin-bottom: 28px; }
.nox-mb-8 { margin-bottom: 32px; }
.nox-mb-9 { margin-bottom: 36px; }
.nox-mb-10 { margin-bottom: 40px; }
.nox-mb-11 { margin-bottom: 44px; }
.nox-mb-12 { margin-bottom: 48px; }
.nox-mb-14 { margin-bottom: 56px; }
.nox-mb-16 { margin-bottom: 64px; }
.nox-mb-20 { margin-bottom: 80px; }
.nox-mb-24 { margin-bottom: 96px; }

.nox-ml-7 { margin-left: 28px; }
.nox-ml-8 { margin-left: 32px; }
.nox-ml-9 { margin-left: 36px; }
.nox-ml-10 { margin-left: 40px; }
.nox-ml-11 { margin-left: 44px; }
.nox-ml-12 { margin-left: 48px; }
.nox-ml-14 { margin-left: 56px; }
.nox-ml-16 { margin-left: 64px; }
.nox-ml-20 { margin-left: 80px; }
.nox-ml-24 { margin-left: 96px; }

.nox-gap-7 { gap: 28px; }
.nox-gap-8 { gap: 32px; }
.nox-gap-9 { gap: 36px; }
.nox-gap-10 { gap: 40px; }
.nox-gap-11 { gap: 44px; }
.nox-gap-12 { gap: 48px; }
.nox-gap-14 { gap: 56px; }
.nox-gap-16 { gap: 64px; }
.nox-gap-20 { gap: 80px; }
.nox-gap-24 { gap: 96px; }

/* Space between children */
.nox-space-x-0 > * + * { margin-left: 0; }
.nox-space-x-px > * + * { margin-left: 1px; }
.nox-space-x-0\.5 > * + * { margin-left: 2px; }
.nox-space-x-1 > * + * { margin-left: 4px; }
.nox-space-x-1\.5 > * + * { margin-left: 6px; }
.nox-space-x-2 > * + * { margin-left: 8px; }
.nox-space-x-2\.5 > * + * { margin-left: 10px; }
.nox-space-x-3 > * + * { margin-left: 12px; }
.nox-space-x-3\.5 > * + * { margin-left: 14px; }
.nox-space-x-4 > * + * { margin-left: 16px; }
.nox-space-x-5 > * + * { margin-left: 20px; }
.nox-space-x-6 > * + * { margin-left: 24px; }
.nox-space-x-7 > * + * { margin-left: 28px; }
.nox-space-x-8 > * + * { margin-left: 32px; }
.nox-space-x-9 > * + * { margin-left: 36px; }
.nox-space-x-10 > * + * { margin-left: 40px; }
.nox-space-x-12 > * + * { margin-left: 48px; }
.nox-space-x-14 > * + * { margin-left: 56px; }
.nox-space-x-16 > * + * { margin-left: 64px; }

.nox-space-y-0 > * + * { margin-top: 0; }
.nox-space-y-px > * + * { margin-top: 1px; }
.nox-space-y-0\.5 > * + * { margin-top: 2px; }
.nox-space-y-1 > * + * { margin-top: 4px; }
.nox-space-y-1\.5 > * + * { margin-top: 6px; }
.nox-space-y-2 > * + * { margin-top: 8px; }
.nox-space-y-2\.5 > * + * { margin-top: 10px; }
.nox-space-y-3 > * + * { margin-top: 12px; }
.nox-space-y-3\.5 > * + * { margin-top: 14px; }
.nox-space-y-4 > * + * { margin-top: 16px; }
.nox-space-y-5 > * + * { margin-top: 20px; }
.nox-space-y-6 > * + * { margin-top: 24px; }
.nox-space-y-7 > * + * { margin-top: 28px; }
.nox-space-y-8 > * + * { margin-top: 32px; }
.nox-space-y-9 > * + * { margin-top: 36px; }
.nox-space-y-10 > * + * { margin-top: 40px; }
.nox-space-y-12 > * + * { margin-top: 48px; }
.nox-space-y-14 > * + * { margin-top: 56px; }
.nox-space-y-16 > * + * { margin-top: 64px; }

.nox-space-x-reverse > * + * { margin-right: 1px; margin-left: 0; }
.nox-space-y-reverse > * + * { margin-bottom: 1px; margin-top: 0; }

/* Negative margins */
.-nox-m-1 { margin: -4px; }
.-nox-m-2 { margin: -8px; }
.-nox-m-3 { margin: -12px; }
.-nox-m-4 { margin: -16px; }
.-nox-m-5 { margin: -20px; }
.-nox-m-6 { margin: -24px; }
.-nox-m-7 { margin: -28px; }
.-nox-m-8 { margin: -32px; }
.-nox-m-9 { margin: -36px; }
.-nox-m-10 { margin: -40px; }
.-nox-m-12 { margin: -48px; }
.-nox-m-14 { margin: -56px; }
.-nox-m-16 { margin: -64px; }
.-nox-m-20 { margin: -80px; }
.-nox-m-24 { margin: -96px; }

.-nox-mt-1 { margin-top: -4px; }
.-nox-mt-2 { margin-top: -8px; }
.-nox-mt-3 { margin-top: -12px; }
.-nox-mt-4 { margin-top: -16px; }
.-nox-mt-5 { margin-top: -20px; }
.-nox-mt-6 { margin-top: -24px; }
.-nox-mt-7 { margin-top: -28px; }
.-nox-mt-8 { margin-top: -32px; }
.-nox-mt-10 { margin-top: -40px; }
.-nox-mt-12 { margin-top: -48px; }
.-nox-mt-16 { margin-top: -64px; }

.-nox-mr-1 { margin-right: -4px; }
.-nox-mr-2 { margin-right: -8px; }
.-nox-mr-3 { margin-right: -12px; }
.-nox-mr-4 { margin-right: -16px; }
.-nox-mr-5 { margin-right: -20px; }
.-nox-mr-6 { margin-right: -24px; }
.-nox-mr-8 { margin-right: -32px; }

.-nox-mb-1 { margin-bottom: -4px; }
.-nox-mb-2 { margin-bottom: -8px; }
.-nox-mb-3 { margin-bottom: -12px; }
.-nox-mb-4 { margin-bottom: -16px; }
.-nox-mb-5 { margin-bottom: -20px; }
.-nox-mb-6 { margin-bottom: -24px; }
.-nox-mb-8 { margin-bottom: -32px; }

.-nox-ml-1 { margin-left: -4px; }
.-nox-ml-2 { margin-left: -8px; }
.-nox-ml-3 { margin-left: -12px; }
.-nox-ml-4 { margin-left: -16px; }
.-nox-ml-5 { margin-left: -20px; }
.-nox-ml-6 { margin-left: -24px; }
.-nox-ml-8 { margin-left: -32px; }

.-nox-mx-1 { margin-left: -4px; margin-right: -4px; }
.-nox-mx-2 { margin-left: -8px; margin-right: -8px; }
.-nox-mx-3 { margin-left: -12px; margin-right: -12px; }
.-nox-mx-4 { margin-left: -16px; margin-right: -16px; }
.-nox-mx-5 { margin-left: -20px; margin-right: -20px; }
.-nox-mx-6 { margin-left: -24px; margin-right: -24px; }
.-nox-mx-8 { margin-left: -32px; margin-right: -32px; }

.-nox-my-1 { margin-top: -4px; margin-bottom: -4px; }
.-nox-my-2 { margin-top: -8px; margin-bottom: -8px; }
.-nox-my-3 { margin-top: -12px; margin-bottom: -12px; }
.-nox-my-4 { margin-top: -16px; margin-bottom: -16px; }
.-nox-my-5 { margin-top: -20px; margin-bottom: -20px; }
.-nox-my-6 { margin-top: -24px; margin-bottom: -24px; }
.-nox-my-8 { margin-top: -32px; margin-bottom: -32px; }

/* Inset */
.nox-inset-auto { inset: auto; }
.nox-inset-0 { inset: 0; }
.nox-inset-px { inset: 1px; }
.nox-inset-1 { inset: 4px; }
.nox-inset-2 { inset: 8px; }
.nox-inset-3 { inset: 12px; }
.nox-inset-4 { inset: 16px; }
.nox-inset-5 { inset: 20px; }
.nox-inset-6 { inset: 24px; }
.nox-inset-7 { inset: 28px; }
.nox-inset-8 { inset: 32px; }
.nox-inset-9 { inset: 36px; }
.nox-inset-10 { inset: 40px; }
.nox-inset-12 { inset: 48px; }
.nox-inset-14 { inset: 56px; }
.nox-inset-16 { inset: 64px; }
.nox-inset-1\/2 { inset: 50%; }
.nox-inset-1\/3 { inset: 33.333%; }
.nox-inset-2\/3 { inset: 66.667%; }
.nox-inset-full { inset: 100%; }

.nox-inset-x-auto { left: auto; right: auto; }
.nox-inset-x-0 { left: 0; right: 0; }
.nox-inset-x-1 { left: 4px; right: 4px; }
.nox-inset-x-2 { left: 8px; right: 8px; }
.nox-inset-x-4 { left: 16px; right: 16px; }

.nox-inset-y-auto { top: auto; bottom: auto; }
.nox-inset-y-0 { top: 0; bottom: 0; }
.nox-inset-y-1 { top: 4px; bottom: 4px; }
.nox-inset-y-2 { top: 8px; bottom: 8px; }
.nox-inset-y-4 { top: 16px; bottom: 16px; }

.nox-top-auto { top: auto; }
.nox-top-0 { top: 0; }
.nox-top-px { top: 1px; }
.nox-top-1 { top: 4px; }
.nox-top-2 { top: 8px; }
.nox-top-3 { top: 12px; }
.nox-top-4 { top: 16px; }
.nox-top-5 { top: 20px; }
.nox-top-6 { top: 24px; }
.nox-top-8 { top: 32px; }
.nox-top-10 { top: 40px; }
.nox-top-12 { top: 48px; }
.nox-top-16 { top: 64px; }
.nox-top-20 { top: 80px; }
.nox-top-1\/2 { top: 50%; }
.nox-top-1\/3 { top: 33.333%; }
.nox-top-full { top: 100%; }

.nox-right-auto { right: auto; }
.nox-right-0 { right: 0; }
.nox-right-px { right: 1px; }
.nox-right-1 { right: 4px; }
.nox-right-2 { right: 8px; }
.nox-right-3 { right: 12px; }
.nox-right-4 { right: 16px; }
.nox-right-5 { right: 20px; }
.nox-right-6 { right: 24px; }
.nox-right-8 { right: 32px; }
.nox-right-10 { right: 40px; }
.nox-right-12 { right: 48px; }
.nox-right-16 { right: 64px; }
.nox-right-20 { right: 80px; }
.nox-right-full { right: 100%; }

.nox-bottom-auto { bottom: auto; }
.nox-bottom-0 { bottom: 0; }
.nox-bottom-px { bottom: 1px; }
.nox-bottom-1 { bottom: 4px; }
.nox-bottom-2 { bottom: 8px; }
.nox-bottom-3 { bottom: 12px; }
.nox-bottom-4 { bottom: 16px; }
.nox-bottom-5 { bottom: 20px; }
.nox-bottom-6 { bottom: 24px; }
.nox-bottom-8 { bottom: 32px; }
.nox-bottom-10 { bottom: 40px; }
.nox-bottom-12 { bottom: 48px; }
.nox-bottom-16 { bottom: 64px; }
.nox-bottom-20 { bottom: 80px; }
.nox-bottom-full { bottom: 100%; }

.nox-left-auto { left: auto; }
.nox-left-0 { left: 0; }
.nox-left-px { left: 1px; }
.nox-left-1 { left: 4px; }
.nox-left-2 { left: 8px; }
.nox-left-3 { left: 12px; }
.nox-left-4 { left: 16px; }
.nox-left-5 { left: 20px; }
.nox-left-6 { left: 24px; }
.nox-left-8 { left: 32px; }
.nox-left-10 { left: 40px; }
.nox-left-12 { left: 48px; }
.nox-left-16 { left: 64px; }
.nox-left-20 { left: 80px; }
.nox-left-1\/2 { left: 50%; }
.nox-left-full { left: 100%; }

.-nox-top-1 { top: -4px; }
.-nox-top-2 { top: -8px; }
.-nox-top-4 { top: -16px; }
.-nox-right-1 { right: -4px; }
.-nox-right-2 { right: -8px; }
.-nox-right-4 { right: -16px; }
.-nox-bottom-1 { bottom: -4px; }
.-nox-bottom-2 { bottom: -8px; }
.-nox-bottom-4 { bottom: -16px; }
.-nox-left-1 { left: -4px; }
.-nox-left-2 { left: -8px; }
.-nox-left-4 { left: -16px; }

/* ----------------------------------------
   10. Typography Extended
   ---------------------------------------- */

.nox-line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.nox-line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nox-line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nox-line-clamp-4 { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.nox-line-clamp-5 { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.nox-line-clamp-6 { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.nox-line-clamp-none { display: block; -webkit-line-clamp: unset; overflow: visible; }

.nox-underline { text-decoration-line: underline; }
.nox-overline { text-decoration-line: overline; }
.nox-line-through { text-decoration-line: line-through; }
.nox-no-underline { text-decoration-line: none; }

.nox-decoration-solid { text-decoration-style: solid; }
.nox-decoration-double { text-decoration-style: double; }
.nox-decoration-dotted { text-decoration-style: dotted; }
.nox-decoration-dashed { text-decoration-style: dashed; }
.nox-decoration-wavy { text-decoration-style: wavy; }

.nox-decoration-0 { text-decoration-thickness: 0; }
.nox-decoration-1 { text-decoration-thickness: 1px; }
.nox-decoration-2 { text-decoration-thickness: 2px; }
.nox-decoration-4 { text-decoration-thickness: 4px; }
.nox-decoration-8 { text-decoration-thickness: 8px; }
.nox-decoration-auto { text-decoration-thickness: auto; }
.nox-decoration-from-font { text-decoration-thickness: from-font; }

.nox-underline-offset-0 { text-underline-offset: 0; }
.nox-underline-offset-1 { text-underline-offset: 1px; }
.nox-underline-offset-2 { text-underline-offset: 2px; }
.nox-underline-offset-4 { text-underline-offset: 4px; }
.nox-underline-offset-8 { text-underline-offset: 8px; }
.nox-underline-offset-auto { text-underline-offset: auto; }

.nox-indent-0 { text-indent: 0; }
.nox-indent-1 { text-indent: 4px; }
.nox-indent-2 { text-indent: 8px; }
.nox-indent-3 { text-indent: 12px; }
.nox-indent-4 { text-indent: 16px; }
.nox-indent-5 { text-indent: 20px; }
.nox-indent-6 { text-indent: 24px; }
.nox-indent-7 { text-indent: 28px; }
.nox-indent-8 { text-indent: 32px; }
.nox-indent-9 { text-indent: 36px; }
.nox-indent-10 { text-indent: 40px; }

.nox-hyphens-none { hyphens: none; }
.nox-hyphens-manual { hyphens: manual; }
.nox-hyphens-auto { hyphens: auto; }

.nox-content-none { content: none; }

.nox-text-ellipsis { text-overflow: ellipsis; }
.nox-text-clip { text-overflow: clip; }

.nox-align-baseline { vertical-align: baseline; }
.nox-align-top { vertical-align: top; }
.nox-align-middle { vertical-align: middle; }
.nox-align-bottom { vertical-align: bottom; }
.nox-align-text-top { vertical-align: text-top; }
.nox-align-text-bottom { vertical-align: text-bottom; }
.nox-align-sub { vertical-align: sub; }
.nox-align-super { vertical-align: super; }

.nox-text-5xl { font-size: 48px; line-height: 1; }
.nox-text-6xl { font-size: 60px; line-height: 1; }
.nox-text-7xl { font-size: 72px; line-height: 1; }
.nox-text-8xl { font-size: 96px; line-height: 1; }
.nox-text-9xl { font-size: 128px; line-height: 1; }

.nox-leading-3 { line-height: 12px; }
.nox-leading-4 { line-height: 16px; }
.nox-leading-5 { line-height: 20px; }
.nox-leading-6 { line-height: 24px; }
.nox-leading-7 { line-height: 28px; }
.nox-leading-8 { line-height: 32px; }
.nox-leading-9 { line-height: 36px; }
.nox-leading-10 { line-height: 40px; }
.nox-leading-none { line-height: 1; }
.nox-leading-tight { line-height: 1.25; }
.nox-leading-snug { line-height: 1.375; }
.nox-leading-normal { line-height: 1.5; }
.nox-leading-relaxed { line-height: 1.625; }
.nox-leading-loose { line-height: 2; }

.nox-tracking-tighter { letter-spacing: -0.05em; }
.nox-tracking-tight { letter-spacing: -0.025em; }
.nox-tracking-normal { letter-spacing: 0em; }
.nox-tracking-wide { letter-spacing: 0.025em; }
.nox-tracking-wider { letter-spacing: 0.05em; }
.nox-tracking-widest { letter-spacing: 0.1em; }

.nox-break-normal { overflow-wrap: normal; word-break: normal; }
.nox-break-words { overflow-wrap: break-word; }
.nox-break-all { word-break: break-all; }
.nox-break-keep { word-break: keep-all; }

.nox-whitespace-normal { white-space: normal; }
.nox-whitespace-nowrap { white-space: nowrap; }
.nox-whitespace-pre { white-space: pre; }
.nox-whitespace-pre-line { white-space: pre-line; }
.nox-whitespace-pre-wrap { white-space: pre-wrap; }
.nox-whitespace-break-spaces { white-space: break-spaces; }

.nox-italic { font-style: italic; }
.nox-not-italic { font-style: normal; }

.nox-normal-nums { font-variant-numeric: normal; }
.nox-ordinal { font-variant-numeric: ordinal; }
.nox-slashed-zero { font-variant-numeric: slashed-zero; }
.nox-lining-nums { font-variant-numeric: lining-nums; }
.nox-oldstyle-nums { font-variant-numeric: oldstyle-nums; }
.nox-proportional-nums { font-variant-numeric: proportional-nums; }
.nox-tabular-nums { font-variant-numeric: tabular-nums; }
.nox-diagonal-fractions { font-variant-numeric: diagonal-fractions; }
.nox-stacked-fractions { font-variant-numeric: stacked-fractions; }

.nox-list-none { list-style-type: none; }
.nox-list-disc { list-style-type: disc; }
.nox-list-decimal { list-style-type: decimal; }
.nox-list-inside { list-style-position: inside; }
.nox-list-outside { list-style-position: outside; }

/* ----------------------------------------
   11. Accessibility & Misc
   ---------------------------------------- */

.nox-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
.nox-not-sr-only { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; }

.nox-focus-visible\:ring:focus-visible { box-shadow: 0 0 0 3px var(--nox-accent-g); outline: none; }
.nox-focus\:ring:focus { box-shadow: 0 0 0 3px var(--nox-accent-g); outline: none; }
.nox-focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .nox-motion-reduce { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
@media (prefers-reduced-motion: no-preference) {
  .nox-motion-safe { }
}

.nox-z-0 { z-index: 0; }
.nox-z-10 { z-index: 10; }
.nox-z-20 { z-index: 20; }
.nox-z-30 { z-index: 30; }
.nox-z-40 { z-index: 40; }
.nox-z-50 { z-index: 50; }
.nox-z-60 { z-index: 60; }
.nox-z-70 { z-index: 70; }
.nox-z-80 { z-index: 80; }
.nox-z-90 { z-index: 90; }
.nox-z-100 { z-index: 100; }
.nox-z-auto { z-index: auto; }
.-nox-z-10 { z-index: -10; }
.-nox-z-20 { z-index: -20; }
.-nox-z-50 { z-index: -50; }

.nox-opacity-0 { opacity: 0; }
.nox-opacity-5 { opacity: 0.05; }
.nox-opacity-10 { opacity: 0.1; }
.nox-opacity-15 { opacity: 0.15; }
.nox-opacity-20 { opacity: 0.2; }
.nox-opacity-25 { opacity: 0.25; }
.nox-opacity-30 { opacity: 0.3; }
.nox-opacity-35 { opacity: 0.35; }
.nox-opacity-40 { opacity: 0.4; }
.nox-opacity-45 { opacity: 0.45; }
.nox-opacity-50 { opacity: 0.5; }
.nox-opacity-55 { opacity: 0.55; }
.nox-opacity-60 { opacity: 0.6; }
.nox-opacity-65 { opacity: 0.65; }
.nox-opacity-70 { opacity: 0.7; }
.nox-opacity-75 { opacity: 0.75; }
.nox-opacity-80 { opacity: 0.8; }
.nox-opacity-85 { opacity: 0.85; }
.nox-opacity-90 { opacity: 0.9; }
.nox-opacity-95 { opacity: 0.95; }
.nox-opacity-100 { opacity: 1; }

.nox-float-left { float: left; }
.nox-float-right { float: right; }
.nox-float-none { float: none; }
.nox-float-start { float: inline-start; }
.nox-float-end { float: inline-end; }
.nox-clear-left { clear: left; }
.nox-clear-right { clear: right; }
.nox-clear-both { clear: both; }
.nox-clear-none { clear: none; }

.nox-columns-1 { columns: 1; }
.nox-columns-2 { columns: 2; }
.nox-columns-3 { columns: 3; }
.nox-columns-4 { columns: 4; }
.nox-columns-5 { columns: 5; }
.nox-columns-6 { columns: 6; }
.nox-columns-7 { columns: 7; }
.nox-columns-8 { columns: 8; }
.nox-columns-9 { columns: 9; }
.nox-columns-10 { columns: 10; }
.nox-columns-11 { columns: 11; }
.nox-columns-12 { columns: 12; }
.nox-columns-auto { columns: auto; }
.nox-columns-3xs { columns: 256px; }
.nox-columns-2xs { columns: 288px; }
.nox-columns-xs { columns: 320px; }
.nox-columns-sm { columns: 384px; }
.nox-columns-md { columns: 448px; }
.nox-columns-lg { columns: 512px; }
.nox-columns-xl { columns: 576px; }

.nox-break-before-auto { break-before: auto; }
.nox-break-before-avoid { break-before: avoid; }
.nox-break-before-all { break-before: all; }
.nox-break-before-page { break-before: page; }
.nox-break-before-column { break-before: column; }
.nox-break-after-auto { break-after: auto; }
.nox-break-after-avoid { break-after: avoid; }
.nox-break-after-all { break-after: all; }
.nox-break-after-page { break-after: page; }
.nox-break-after-column { break-after: column; }
.nox-break-inside-auto { break-inside: auto; }
.nox-break-inside-avoid { break-inside: avoid; }
.nox-break-inside-avoid-page { break-inside: avoid-page; }
.nox-break-inside-avoid-column { break-inside: avoid-column; }

.nox-box-decoration-clone { box-decoration-break: clone; }
.nox-box-decoration-slice { box-decoration-break: slice; }

.nox-box-border { box-sizing: border-box; }
.nox-box-content { box-sizing: content-box; }

.nox-inline { display: inline; }
.nox-inline-block { display: inline-block; }
.nox-inline-flex { display: inline-flex; }
.nox-inline-grid { display: inline-grid; }
.nox-inline-table { display: inline-table; }
.nox-flow-root { display: flow-root; }
.nox-contents { display: contents; }
.nox-list-item { display: list-item; }

.nox-static { position: static; }
.nox-fixed { position: fixed; }
.nox-absolute { position: absolute; }
.nox-relative { position: relative; }
.nox-sticky { position: sticky; }

.nox-visible { visibility: visible; }
.nox-invisible { visibility: hidden; }
.nox-collapse { visibility: collapse; }

.nox-overflow-auto { overflow: auto; }
.nox-overflow-hidden { overflow: hidden; }
.nox-overflow-clip { overflow: clip; }
.nox-overflow-visible { overflow: visible; }
.nox-overflow-scroll { overflow: scroll; }
.nox-overflow-x-auto { overflow-x: auto; }
.nox-overflow-x-hidden { overflow-x: hidden; }
.nox-overflow-x-clip { overflow-x: clip; }
.nox-overflow-x-visible { overflow-x: visible; }
.nox-overflow-x-scroll { overflow-x: scroll; }
.nox-overflow-y-auto { overflow-y: auto; }
.nox-overflow-y-hidden { overflow-y: hidden; }
.nox-overflow-y-clip { overflow-y: clip; }
.nox-overflow-y-visible { overflow-y: visible; }
.nox-overflow-y-scroll { overflow-y: scroll; }

.nox-aspect-auto { aspect-ratio: auto; }
.nox-aspect-square { aspect-ratio: 1 / 1; }
.nox-aspect-video { aspect-ratio: 16 / 9; }
.nox-aspect-4\/3 { aspect-ratio: 4 / 3; }
.nox-aspect-3\/2 { aspect-ratio: 3 / 2; }
.nox-aspect-2\/1 { aspect-ratio: 2 / 1; }

.nox-table-auto { table-layout: auto; }
.nox-table-fixed { table-layout: fixed; }

.nox-caption-top { caption-side: top; }
.nox-caption-bottom { caption-side: bottom; }


/* ============================================================


/* ═══════════════════════════════════════════════════════════════════════════
   BLOCK C: RESPONSIVE PREFIX SYSTEM (sm: md: lg: xl: 2xl:)
   ═══════════════════════════════════════════════════════════════════════════ */
   BLOCK C: RESPONSIVE PREFIX SYSTEM
   5 breakpoints x core utility subsets
   ============================================================ */

/* ----------------------------------------
   sm: 640px
   ---------------------------------------- */
@media (min-width: 640px) {
  .sm\:nox-hidden { display: none; }
  .sm\:nox-block { display: block; }
  .sm\:nox-flex { display: flex; }
  .sm\:nox-grid { display: grid; }
  .sm\:nox-inline { display: inline; }
  .sm\:nox-inline-block { display: inline-block; }
  .sm\:nox-inline-flex { display: inline-flex; }
  .sm\:nox-inline-grid { display: inline-grid; }
  .sm\:nox-contents { display: contents; }
  .sm\:nox-flow-root { display: flow-root; }
  .sm\:nox-table { display: table; }

  .sm\:nox-flex-row { flex-direction: row; }
  .sm\:nox-flex-row-reverse { flex-direction: row-reverse; }
  .sm\:nox-flex-col { flex-direction: column; }
  .sm\:nox-flex-col-reverse { flex-direction: column-reverse; }
  .sm\:nox-flex-wrap { flex-wrap: wrap; }
  .sm\:nox-flex-wrap-reverse { flex-wrap: wrap-reverse; }
  .sm\:nox-flex-nowrap { flex-wrap: nowrap; }
  .sm\:nox-flex-1 { flex: 1 1 0%; }
  .sm\:nox-flex-auto { flex: 1 1 auto; }
  .sm\:nox-flex-initial { flex: 0 1 auto; }
  .sm\:nox-flex-none { flex: none; }
  .sm\:nox-grow { flex-grow: 1; }
  .sm\:nox-grow-0 { flex-grow: 0; }
  .sm\:nox-shrink { flex-shrink: 1; }
  .sm\:nox-shrink-0 { flex-shrink: 0; }

  .sm\:nox-items-start { align-items: flex-start; }
  .sm\:nox-items-end { align-items: flex-end; }
  .sm\:nox-items-center { align-items: center; }
  .sm\:nox-items-baseline { align-items: baseline; }
  .sm\:nox-items-stretch { align-items: stretch; }
  .sm\:nox-self-auto { align-self: auto; }
  .sm\:nox-self-start { align-self: flex-start; }
  .sm\:nox-self-end { align-self: flex-end; }
  .sm\:nox-self-center { align-self: center; }
  .sm\:nox-self-stretch { align-self: stretch; }

  .sm\:nox-justify-start { justify-content: flex-start; }
  .sm\:nox-justify-end { justify-content: flex-end; }
  .sm\:nox-justify-center { justify-content: center; }
  .sm\:nox-justify-between { justify-content: space-between; }
  .sm\:nox-justify-around { justify-content: space-around; }
  .sm\:nox-justify-evenly { justify-content: space-evenly; }

  .sm\:nox-gap-0 { gap: 0; }
  .sm\:nox-gap-1 { gap: 4px; }
  .sm\:nox-gap-2 { gap: 8px; }
  .sm\:nox-gap-3 { gap: 12px; }
  .sm\:nox-gap-4 { gap: 16px; }
  .sm\:nox-gap-5 { gap: 20px; }
  .sm\:nox-gap-6 { gap: 24px; }
  .sm\:nox-gap-7 { gap: 28px; }
  .sm\:nox-gap-8 { gap: 32px; }
  .sm\:nox-gap-9 { gap: 36px; }
  .sm\:nox-gap-10 { gap: 40px; }
  .sm\:nox-gap-12 { gap: 48px; }
  .sm\:nox-gap-14 { gap: 56px; }
  .sm\:nox-gap-16 { gap: 64px; }

  .sm\:nox-p-0 { padding: 0; }
  .sm\:nox-p-1 { padding: 4px; }
  .sm\:nox-p-2 { padding: 8px; }
  .sm\:nox-p-3 { padding: 12px; }
  .sm\:nox-p-4 { padding: 16px; }
  .sm\:nox-p-5 { padding: 20px; }
  .sm\:nox-p-6 { padding: 24px; }
  .sm\:nox-p-7 { padding: 28px; }
  .sm\:nox-p-8 { padding: 32px; }
  .sm\:nox-p-10 { padding: 40px; }
  .sm\:nox-p-12 { padding: 48px; }
  .sm\:nox-p-16 { padding: 64px; }
  .sm\:nox-px-0 { padding-left: 0; padding-right: 0; }
  .sm\:nox-px-1 { padding-left: 4px; padding-right: 4px; }
  .sm\:nox-px-2 { padding-left: 8px; padding-right: 8px; }
  .sm\:nox-px-3 { padding-left: 12px; padding-right: 12px; }
  .sm\:nox-px-4 { padding-left: 16px; padding-right: 16px; }
  .sm\:nox-px-5 { padding-left: 20px; padding-right: 20px; }
  .sm\:nox-px-6 { padding-left: 24px; padding-right: 24px; }
  .sm\:nox-px-7 { padding-left: 28px; padding-right: 28px; }
  .sm\:nox-px-8 { padding-left: 32px; padding-right: 32px; }
  .sm\:nox-py-0 { padding-top: 0; padding-bottom: 0; }
  .sm\:nox-py-1 { padding-top: 4px; padding-bottom: 4px; }
  .sm\:nox-py-2 { padding-top: 8px; padding-bottom: 8px; }
  .sm\:nox-py-3 { padding-top: 12px; padding-bottom: 12px; }
  .sm\:nox-py-4 { padding-top: 16px; padding-bottom: 16px; }
  .sm\:nox-py-5 { padding-top: 20px; padding-bottom: 20px; }
  .sm\:nox-py-6 { padding-top: 24px; padding-bottom: 24px; }
  .sm\:nox-py-7 { padding-top: 28px; padding-bottom: 28px; }
  .sm\:nox-py-8 { padding-top: 32px; padding-bottom: 32px; }
  .sm\:nox-pt-0 { padding-top: 0; }
  .sm\:nox-pt-1 { padding-top: 4px; }
  .sm\:nox-pt-2 { padding-top: 8px; }
  .sm\:nox-pt-3 { padding-top: 12px; }
  .sm\:nox-pt-4 { padding-top: 16px; }
  .sm\:nox-pt-6 { padding-top: 24px; }
  .sm\:nox-pt-8 { padding-top: 32px; }
  .sm\:nox-pb-0 { padding-bottom: 0; }
  .sm\:nox-pb-1 { padding-bottom: 4px; }
  .sm\:nox-pb-2 { padding-bottom: 8px; }
  .sm\:nox-pb-3 { padding-bottom: 12px; }
  .sm\:nox-pb-4 { padding-bottom: 16px; }
  .sm\:nox-pb-6 { padding-bottom: 24px; }
  .sm\:nox-pb-8 { padding-bottom: 32px; }

  .sm\:nox-m-0 { margin: 0; }
  .sm\:nox-m-1 { margin: 4px; }
  .sm\:nox-m-2 { margin: 8px; }
  .sm\:nox-m-3 { margin: 12px; }
  .sm\:nox-m-4 { margin: 16px; }
  .sm\:nox-m-5 { margin: 20px; }
  .sm\:nox-m-6 { margin: 24px; }
  .sm\:nox-m-8 { margin: 32px; }
  .sm\:nox-m-auto { margin: auto; }
  .sm\:nox-mx-0 { margin-left: 0; margin-right: 0; }
  .sm\:nox-mx-1 { margin-left: 4px; margin-right: 4px; }
  .sm\:nox-mx-2 { margin-left: 8px; margin-right: 8px; }
  .sm\:nox-mx-3 { margin-left: 12px; margin-right: 12px; }
  .sm\:nox-mx-4 { margin-left: 16px; margin-right: 16px; }
  .sm\:nox-mx-6 { margin-left: 24px; margin-right: 24px; }
  .sm\:nox-mx-8 { margin-left: 32px; margin-right: 32px; }
  .sm\:nox-mx-auto { margin-left: auto; margin-right: auto; }
  .sm\:nox-my-0 { margin-top: 0; margin-bottom: 0; }
  .sm\:nox-my-1 { margin-top: 4px; margin-bottom: 4px; }
  .sm\:nox-my-2 { margin-top: 8px; margin-bottom: 8px; }
  .sm\:nox-my-3 { margin-top: 12px; margin-bottom: 12px; }
  .sm\:nox-my-4 { margin-top: 16px; margin-bottom: 16px; }
  .sm\:nox-my-6 { margin-top: 24px; margin-bottom: 24px; }
  .sm\:nox-my-8 { margin-top: 32px; margin-bottom: 32px; }
  .sm\:nox-mt-0 { margin-top: 0; }
  .sm\:nox-mt-1 { margin-top: 4px; }
  .sm\:nox-mt-2 { margin-top: 8px; }
  .sm\:nox-mt-3 { margin-top: 12px; }
  .sm\:nox-mt-4 { margin-top: 16px; }
  .sm\:nox-mt-6 { margin-top: 24px; }
  .sm\:nox-mt-8 { margin-top: 32px; }
  .sm\:nox-mb-0 { margin-bottom: 0; }
  .sm\:nox-mb-1 { margin-bottom: 4px; }
  .sm\:nox-mb-2 { margin-bottom: 8px; }
  .sm\:nox-mb-3 { margin-bottom: 12px; }
  .sm\:nox-mb-4 { margin-bottom: 16px; }
  .sm\:nox-mb-6 { margin-bottom: 24px; }
  .sm\:nox-mb-8 { margin-bottom: 32px; }
  .sm\:nox-ml-auto { margin-left: auto; }
  .sm\:nox-mr-auto { margin-right: auto; }
  .sm\:nox-mt-auto { margin-top: auto; }
  .sm\:nox-mb-auto { margin-bottom: auto; }

  .sm\:nox-text-xs { font-size: 12px; line-height: 16px; }
  .sm\:nox-text-sm { font-size: 14px; line-height: 20px; }
  .sm\:nox-text-base { font-size: 16px; line-height: 24px; }
  .sm\:nox-text-lg { font-size: 18px; line-height: 28px; }
  .sm\:nox-text-xl { font-size: 20px; line-height: 28px; }
  .sm\:nox-text-2xl { font-size: 24px; line-height: 32px; }
  .sm\:nox-text-3xl { font-size: 30px; line-height: 36px; }
  .sm\:nox-text-4xl { font-size: 36px; line-height: 40px; }
  .sm\:nox-text-left { text-align: left; }
  .sm\:nox-text-center { text-align: center; }
  .sm\:nox-text-right { text-align: right; }
  .sm\:nox-text-justify { text-align: justify; }
  .sm\:nox-font-normal { font-weight: 400; }
  .sm\:nox-font-medium { font-weight: 500; }
  .sm\:nox-font-semibold { font-weight: 600; }
  .sm\:nox-font-bold { font-weight: 700; }

  .sm\:nox-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .sm\:nox-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:nox-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:nox-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sm\:nox-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sm\:nox-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .sm\:nox-grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .sm\:nox-grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .sm\:nox-grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .sm\:nox-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .sm\:nox-grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
  .sm\:nox-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .sm\:nox-grid-cols-none { grid-template-columns: none; }
  .sm\:nox-col-span-1 { grid-column: span 1 / span 1; }
  .sm\:nox-col-span-2 { grid-column: span 2 / span 2; }
  .sm\:nox-col-span-3 { grid-column: span 3 / span 3; }
  .sm\:nox-col-span-4 { grid-column: span 4 / span 4; }
  .sm\:nox-col-span-5 { grid-column: span 5 / span 5; }
  .sm\:nox-col-span-6 { grid-column: span 6 / span 6; }
  .sm\:nox-col-span-7 { grid-column: span 7 / span 7; }
  .sm\:nox-col-span-8 { grid-column: span 8 / span 8; }
  .sm\:nox-col-span-9 { grid-column: span 9 / span 9; }
  .sm\:nox-col-span-10 { grid-column: span 10 / span 10; }
  .sm\:nox-col-span-11 { grid-column: span 11 / span 11; }
  .sm\:nox-col-span-12 { grid-column: span 12 / span 12; }
  .sm\:nox-col-span-full { grid-column: 1 / -1; }

  .sm\:nox-w-full { width: 100%; }
  .sm\:nox-w-auto { width: auto; }
  .sm\:nox-w-screen { width: 100vw; }
  .sm\:nox-w-min { width: min-content; }
  .sm\:nox-w-max { width: max-content; }
  .sm\:nox-w-fit { width: fit-content; }
  .sm\:nox-w-1\/2 { width: 50%; }
  .sm\:nox-w-1\/3 { width: 33.333%; }
  .sm\:nox-w-2\/3 { width: 66.667%; }
  .sm\:nox-w-1\/4 { width: 25%; }
  .sm\:nox-w-3\/4 { width: 75%; }
  .sm\:nox-w-1\/5 { width: 20%; }
  .sm\:nox-w-2\/5 { width: 40%; }
  .sm\:nox-w-3\/5 { width: 60%; }
  .sm\:nox-w-4\/5 { width: 80%; }
  .sm\:nox-w-1\/6 { width: 16.667%; }
  .sm\:nox-w-5\/6 { width: 83.333%; }
  .sm\:nox-max-w-none { max-width: none; }
  .sm\:nox-max-w-full { max-width: 100%; }
  .sm\:nox-max-w-prose { max-width: 65ch; }
  .sm\:nox-max-w-sm { max-width: 384px; }
  .sm\:nox-max-w-md { max-width: 448px; }
  .sm\:nox-max-w-lg { max-width: 512px; }
  .sm\:nox-max-w-xl { max-width: 576px; }
  .sm\:nox-max-w-2xl { max-width: 672px; }
  .sm\:nox-max-w-3xl { max-width: 768px; }
  .sm\:nox-max-w-4xl { max-width: 896px; }
  .sm\:nox-max-w-5xl { max-width: 1024px; }
  .sm\:nox-h-auto { height: auto; }
  .sm\:nox-h-full { height: 100%; }
  .sm\:nox-h-screen { height: 100vh; }

  .sm\:nox-order-first { order: -9999; }
  .sm\:nox-order-last { order: 9999; }
  .sm\:nox-order-none { order: 0; }
  .sm\:nox-order-1 { order: 1; }
  .sm\:nox-order-2 { order: 2; }
  .sm\:nox-order-3 { order: 3; }
  .sm\:nox-order-4 { order: 4; }
  .sm\:nox-order-5 { order: 5; }
  .sm\:nox-order-6 { order: 6; }

  .sm\:nox-static { position: static; }
  .sm\:nox-fixed { position: fixed; }
  .sm\:nox-absolute { position: absolute; }
  .sm\:nox-relative { position: relative; }
  .sm\:nox-sticky { position: sticky; }

  .sm\:nox-visible { visibility: visible; }
  .sm\:nox-invisible { visibility: hidden; }

  .sm\:nox-overflow-auto { overflow: auto; }
  .sm\:nox-overflow-hidden { overflow: hidden; }
  .sm\:nox-overflow-visible { overflow: visible; }
  .sm\:nox-overflow-scroll { overflow: scroll; }

  .sm\:nox-rounded-none { border-radius: 0; }
  .sm\:nox-rounded-sm { border-radius: 2px; }
  .sm\:nox-rounded { border-radius: 4px; }
  .sm\:nox-rounded-md { border-radius: 6px; }
  .sm\:nox-rounded-lg { border-radius: 8px; }
  .sm\:nox-rounded-xl { border-radius: 12px; }
  .sm\:nox-rounded-2xl { border-radius: 16px; }
  .sm\:nox-rounded-full { border-radius: 9999px; }

  .sm\:nox-border-0 { border-width: 0; }
  .sm\:nox-border-1 { border-width: 1px; }
  .sm\:nox-border-2 { border-width: 2px; }
  .sm\:nox-border-4 { border-width: 4px; }

  .sm\:nox-space-x-0 > * + * { margin-left: 0; }
  .sm\:nox-space-x-1 > * + * { margin-left: 4px; }
  .sm\:nox-space-x-2 > * + * { margin-left: 8px; }
  .sm\:nox-space-x-3 > * + * { margin-left: 12px; }
  .sm\:nox-space-x-4 > * + * { margin-left: 16px; }
  .sm\:nox-space-x-6 > * + * { margin-left: 24px; }
  .sm\:nox-space-x-8 > * + * { margin-left: 32px; }
  .sm\:nox-space-y-0 > * + * { margin-top: 0; }
  .sm\:nox-space-y-1 > * + * { margin-top: 4px; }
  .sm\:nox-space-y-2 > * + * { margin-top: 8px; }
  .sm\:nox-space-y-3 > * + * { margin-top: 12px; }
  .sm\:nox-space-y-4 > * + * { margin-top: 16px; }
  .sm\:nox-space-y-6 > * + * { margin-top: 24px; }
  .sm\:nox-space-y-8 > * + * { margin-top: 32px; }

  .sm\:nox-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sm\:nox-whitespace-normal { white-space: normal; }
  .sm\:nox-whitespace-nowrap { white-space: nowrap; }

  .sm\:nox-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
  .sm\:nox-not-sr-only { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; }

  .sm\:nox-aspect-auto { aspect-ratio: auto; }
  .sm\:nox-aspect-square { aspect-ratio: 1 / 1; }
  .sm\:nox-aspect-video { aspect-ratio: 16 / 9; }
}

/* ----------------------------------------
   md: 768px
   ---------------------------------------- */
@media (min-width: 768px) {
  .md\:nox-hidden { display: none; }
  .md\:nox-block { display: block; }
  .md\:nox-flex { display: flex; }
  .md\:nox-grid { display: grid; }
  .md\:nox-inline { display: inline; }
  .md\:nox-inline-block { display: inline-block; }
  .md\:nox-inline-flex { display: inline-flex; }
  .md\:nox-inline-grid { display: inline-grid; }
  .md\:nox-contents { display: contents; }
  .md\:nox-flow-root { display: flow-root; }
  .md\:nox-table { display: table; }

  .md\:nox-flex-row { flex-direction: row; }
  .md\:nox-flex-row-reverse { flex-direction: row-reverse; }
  .md\:nox-flex-col { flex-direction: column; }
  .md\:nox-flex-col-reverse { flex-direction: column-reverse; }
  .md\:nox-flex-wrap { flex-wrap: wrap; }
  .md\:nox-flex-wrap-reverse { flex-wrap: wrap-reverse; }
  .md\:nox-flex-nowrap { flex-wrap: nowrap; }
  .md\:nox-flex-1 { flex: 1 1 0%; }
  .md\:nox-flex-auto { flex: 1 1 auto; }
  .md\:nox-flex-initial { flex: 0 1 auto; }
  .md\:nox-flex-none { flex: none; }
  .md\:nox-grow { flex-grow: 1; }
  .md\:nox-grow-0 { flex-grow: 0; }
  .md\:nox-shrink { flex-shrink: 1; }
  .md\:nox-shrink-0 { flex-shrink: 0; }

  .md\:nox-items-start { align-items: flex-start; }
  .md\:nox-items-end { align-items: flex-end; }
  .md\:nox-items-center { align-items: center; }
  .md\:nox-items-baseline { align-items: baseline; }
  .md\:nox-items-stretch { align-items: stretch; }
  .md\:nox-self-auto { align-self: auto; }
  .md\:nox-self-start { align-self: flex-start; }
  .md\:nox-self-end { align-self: flex-end; }
  .md\:nox-self-center { align-self: center; }
  .md\:nox-self-stretch { align-self: stretch; }

  .md\:nox-justify-start { justify-content: flex-start; }
  .md\:nox-justify-end { justify-content: flex-end; }
  .md\:nox-justify-center { justify-content: center; }
  .md\:nox-justify-between { justify-content: space-between; }
  .md\:nox-justify-around { justify-content: space-around; }
  .md\:nox-justify-evenly { justify-content: space-evenly; }

  .md\:nox-gap-0 { gap: 0; }
  .md\:nox-gap-1 { gap: 4px; }
  .md\:nox-gap-2 { gap: 8px; }
  .md\:nox-gap-3 { gap: 12px; }
  .md\:nox-gap-4 { gap: 16px; }
  .md\:nox-gap-5 { gap: 20px; }
  .md\:nox-gap-6 { gap: 24px; }
  .md\:nox-gap-7 { gap: 28px; }
  .md\:nox-gap-8 { gap: 32px; }
  .md\:nox-gap-9 { gap: 36px; }
  .md\:nox-gap-10 { gap: 40px; }
  .md\:nox-gap-12 { gap: 48px; }
  .md\:nox-gap-14 { gap: 56px; }
  .md\:nox-gap-16 { gap: 64px; }

  .md\:nox-p-0 { padding: 0; }
  .md\:nox-p-1 { padding: 4px; }
  .md\:nox-p-2 { padding: 8px; }
  .md\:nox-p-3 { padding: 12px; }
  .md\:nox-p-4 { padding: 16px; }
  .md\:nox-p-5 { padding: 20px; }
  .md\:nox-p-6 { padding: 24px; }
  .md\:nox-p-7 { padding: 28px; }
  .md\:nox-p-8 { padding: 32px; }
  .md\:nox-p-10 { padding: 40px; }
  .md\:nox-p-12 { padding: 48px; }
  .md\:nox-p-16 { padding: 64px; }
  .md\:nox-px-0 { padding-left: 0; padding-right: 0; }
  .md\:nox-px-1 { padding-left: 4px; padding-right: 4px; }
  .md\:nox-px-2 { padding-left: 8px; padding-right: 8px; }
  .md\:nox-px-3 { padding-left: 12px; padding-right: 12px; }
  .md\:nox-px-4 { padding-left: 16px; padding-right: 16px; }
  .md\:nox-px-5 { padding-left: 20px; padding-right: 20px; }
  .md\:nox-px-6 { padding-left: 24px; padding-right: 24px; }
  .md\:nox-px-7 { padding-left: 28px; padding-right: 28px; }
  .md\:nox-px-8 { padding-left: 32px; padding-right: 32px; }
  .md\:nox-py-0 { padding-top: 0; padding-bottom: 0; }
  .md\:nox-py-1 { padding-top: 4px; padding-bottom: 4px; }
  .md\:nox-py-2 { padding-top: 8px; padding-bottom: 8px; }
  .md\:nox-py-3 { padding-top: 12px; padding-bottom: 12px; }
  .md\:nox-py-4 { padding-top: 16px; padding-bottom: 16px; }
  .md\:nox-py-5 { padding-top: 20px; padding-bottom: 20px; }
  .md\:nox-py-6 { padding-top: 24px; padding-bottom: 24px; }
  .md\:nox-py-7 { padding-top: 28px; padding-bottom: 28px; }
  .md\:nox-py-8 { padding-top: 32px; padding-bottom: 32px; }
  .md\:nox-pt-0 { padding-top: 0; }
  .md\:nox-pt-1 { padding-top: 4px; }
  .md\:nox-pt-2 { padding-top: 8px; }
  .md\:nox-pt-3 { padding-top: 12px; }
  .md\:nox-pt-4 { padding-top: 16px; }
  .md\:nox-pt-6 { padding-top: 24px; }
  .md\:nox-pt-8 { padding-top: 32px; }
  .md\:nox-pb-0 { padding-bottom: 0; }
  .md\:nox-pb-1 { padding-bottom: 4px; }
  .md\:nox-pb-2 { padding-bottom: 8px; }
  .md\:nox-pb-3 { padding-bottom: 12px; }
  .md\:nox-pb-4 { padding-bottom: 16px; }
  .md\:nox-pb-6 { padding-bottom: 24px; }
  .md\:nox-pb-8 { padding-bottom: 32px; }

  .md\:nox-m-0 { margin: 0; }
  .md\:nox-m-1 { margin: 4px; }
  .md\:nox-m-2 { margin: 8px; }
  .md\:nox-m-3 { margin: 12px; }
  .md\:nox-m-4 { margin: 16px; }
  .md\:nox-m-5 { margin: 20px; }
  .md\:nox-m-6 { margin: 24px; }
  .md\:nox-m-8 { margin: 32px; }
  .md\:nox-m-auto { margin: auto; }
  .md\:nox-mx-0 { margin-left: 0; margin-right: 0; }
  .md\:nox-mx-2 { margin-left: 8px; margin-right: 8px; }
  .md\:nox-mx-4 { margin-left: 16px; margin-right: 16px; }
  .md\:nox-mx-6 { margin-left: 24px; margin-right: 24px; }
  .md\:nox-mx-8 { margin-left: 32px; margin-right: 32px; }
  .md\:nox-mx-auto { margin-left: auto; margin-right: auto; }
  .md\:nox-my-0 { margin-top: 0; margin-bottom: 0; }
  .md\:nox-my-2 { margin-top: 8px; margin-bottom: 8px; }
  .md\:nox-my-4 { margin-top: 16px; margin-bottom: 16px; }
  .md\:nox-my-6 { margin-top: 24px; margin-bottom: 24px; }
  .md\:nox-my-8 { margin-top: 32px; margin-bottom: 32px; }
  .md\:nox-mt-0 { margin-top: 0; }
  .md\:nox-mt-2 { margin-top: 8px; }
  .md\:nox-mt-4 { margin-top: 16px; }
  .md\:nox-mt-6 { margin-top: 24px; }
  .md\:nox-mt-8 { margin-top: 32px; }
  .md\:nox-mb-0 { margin-bottom: 0; }
  .md\:nox-mb-2 { margin-bottom: 8px; }
  .md\:nox-mb-4 { margin-bottom: 16px; }
  .md\:nox-mb-6 { margin-bottom: 24px; }
  .md\:nox-mb-8 { margin-bottom: 32px; }
  .md\:nox-ml-auto { margin-left: auto; }
  .md\:nox-mr-auto { margin-right: auto; }

  .md\:nox-text-xs { font-size: 12px; line-height: 16px; }
  .md\:nox-text-sm { font-size: 14px; line-height: 20px; }
  .md\:nox-text-base { font-size: 16px; line-height: 24px; }
  .md\:nox-text-lg { font-size: 18px; line-height: 28px; }
  .md\:nox-text-xl { font-size: 20px; line-height: 28px; }
  .md\:nox-text-2xl { font-size: 24px; line-height: 32px; }
  .md\:nox-text-3xl { font-size: 30px; line-height: 36px; }
  .md\:nox-text-4xl { font-size: 36px; line-height: 40px; }
  .md\:nox-text-left { text-align: left; }
  .md\:nox-text-center { text-align: center; }
  .md\:nox-text-right { text-align: right; }
  .md\:nox-font-normal { font-weight: 400; }
  .md\:nox-font-medium { font-weight: 500; }
  .md\:nox-font-semibold { font-weight: 600; }
  .md\:nox-font-bold { font-weight: 700; }

  .md\:nox-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .md\:nox-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:nox-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:nox-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:nox-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .md\:nox-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .md\:nox-grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .md\:nox-grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .md\:nox-grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .md\:nox-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .md\:nox-grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
  .md\:nox-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .md\:nox-grid-cols-none { grid-template-columns: none; }
  .md\:nox-col-span-1 { grid-column: span 1 / span 1; }
  .md\:nox-col-span-2 { grid-column: span 2 / span 2; }
  .md\:nox-col-span-3 { grid-column: span 3 / span 3; }
  .md\:nox-col-span-4 { grid-column: span 4 / span 4; }
  .md\:nox-col-span-5 { grid-column: span 5 / span 5; }
  .md\:nox-col-span-6 { grid-column: span 6 / span 6; }
  .md\:nox-col-span-7 { grid-column: span 7 / span 7; }
  .md\:nox-col-span-8 { grid-column: span 8 / span 8; }
  .md\:nox-col-span-9 { grid-column: span 9 / span 9; }
  .md\:nox-col-span-10 { grid-column: span 10 / span 10; }
  .md\:nox-col-span-11 { grid-column: span 11 / span 11; }
  .md\:nox-col-span-12 { grid-column: span 12 / span 12; }
  .md\:nox-col-span-full { grid-column: 1 / -1; }

  .md\:nox-w-full { width: 100%; }
  .md\:nox-w-auto { width: auto; }
  .md\:nox-w-screen { width: 100vw; }
  .md\:nox-w-1\/2 { width: 50%; }
  .md\:nox-w-1\/3 { width: 33.333%; }
  .md\:nox-w-2\/3 { width: 66.667%; }
  .md\:nox-w-1\/4 { width: 25%; }
  .md\:nox-w-3\/4 { width: 75%; }
  .md\:nox-w-1\/5 { width: 20%; }
  .md\:nox-w-2\/5 { width: 40%; }
  .md\:nox-w-3\/5 { width: 60%; }
  .md\:nox-w-4\/5 { width: 80%; }
  .md\:nox-w-1\/6 { width: 16.667%; }
  .md\:nox-w-5\/6 { width: 83.333%; }
  .md\:nox-max-w-none { max-width: none; }
  .md\:nox-max-w-full { max-width: 100%; }
  .md\:nox-max-w-prose { max-width: 65ch; }
  .md\:nox-max-w-sm { max-width: 384px; }
  .md\:nox-max-w-md { max-width: 448px; }
  .md\:nox-max-w-lg { max-width: 512px; }
  .md\:nox-max-w-xl { max-width: 576px; }
  .md\:nox-max-w-2xl { max-width: 672px; }
  .md\:nox-max-w-3xl { max-width: 768px; }
  .md\:nox-max-w-4xl { max-width: 896px; }
  .md\:nox-max-w-5xl { max-width: 1024px; }
  .md\:nox-h-auto { height: auto; }
  .md\:nox-h-full { height: 100%; }
  .md\:nox-h-screen { height: 100vh; }

  .md\:nox-order-first { order: -9999; }
  .md\:nox-order-last { order: 9999; }
  .md\:nox-order-none { order: 0; }

  .md\:nox-static { position: static; }
  .md\:nox-fixed { position: fixed; }
  .md\:nox-absolute { position: absolute; }
  .md\:nox-relative { position: relative; }
  .md\:nox-sticky { position: sticky; }
  .md\:nox-visible { visibility: visible; }
  .md\:nox-invisible { visibility: hidden; }
  .md\:nox-overflow-auto { overflow: auto; }
  .md\:nox-overflow-hidden { overflow: hidden; }
  .md\:nox-overflow-visible { overflow: visible; }

  .md\:nox-rounded-none { border-radius: 0; }
  .md\:nox-rounded { border-radius: 4px; }
  .md\:nox-rounded-md { border-radius: 6px; }
  .md\:nox-rounded-lg { border-radius: 8px; }
  .md\:nox-rounded-xl { border-radius: 12px; }
  .md\:nox-rounded-2xl { border-radius: 16px; }
  .md\:nox-rounded-full { border-radius: 9999px; }

  .md\:nox-space-x-0 > * + * { margin-left: 0; }
  .md\:nox-space-x-2 > * + * { margin-left: 8px; }
  .md\:nox-space-x-4 > * + * { margin-left: 16px; }
  .md\:nox-space-x-6 > * + * { margin-left: 24px; }
  .md\:nox-space-x-8 > * + * { margin-left: 32px; }
  .md\:nox-space-y-0 > * + * { margin-top: 0; }
  .md\:nox-space-y-2 > * + * { margin-top: 8px; }
  .md\:nox-space-y-4 > * + * { margin-top: 16px; }
  .md\:nox-space-y-6 > * + * { margin-top: 24px; }
  .md\:nox-space-y-8 > * + * { margin-top: 32px; }

  .md\:nox-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .md\:nox-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
  .md\:nox-not-sr-only { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; }
  .md\:nox-aspect-auto { aspect-ratio: auto; }
  .md\:nox-aspect-square { aspect-ratio: 1 / 1; }
  .md\:nox-aspect-video { aspect-ratio: 16 / 9; }
}

/* ----------------------------------------
   lg: 1024px
   ---------------------------------------- */
@media (min-width: 1024px) {
  .lg\:nox-hidden { display: none; }
  .lg\:nox-block { display: block; }
  .lg\:nox-flex { display: flex; }
  .lg\:nox-grid { display: grid; }
  .lg\:nox-inline { display: inline; }
  .lg\:nox-inline-block { display: inline-block; }
  .lg\:nox-inline-flex { display: inline-flex; }
  .lg\:nox-inline-grid { display: inline-grid; }
  .lg\:nox-contents { display: contents; }
  .lg\:nox-flow-root { display: flow-root; }
  .lg\:nox-table { display: table; }

  .lg\:nox-flex-row { flex-direction: row; }
  .lg\:nox-flex-row-reverse { flex-direction: row-reverse; }
  .lg\:nox-flex-col { flex-direction: column; }
  .lg\:nox-flex-col-reverse { flex-direction: column-reverse; }
  .lg\:nox-flex-wrap { flex-wrap: wrap; }
  .lg\:nox-flex-wrap-reverse { flex-wrap: wrap-reverse; }
  .lg\:nox-flex-nowrap { flex-wrap: nowrap; }
  .lg\:nox-flex-1 { flex: 1 1 0%; }
  .lg\:nox-flex-auto { flex: 1 1 auto; }
  .lg\:nox-flex-initial { flex: 0 1 auto; }
  .lg\:nox-flex-none { flex: none; }
  .lg\:nox-grow { flex-grow: 1; }
  .lg\:nox-grow-0 { flex-grow: 0; }
  .lg\:nox-shrink { flex-shrink: 1; }
  .lg\:nox-shrink-0 { flex-shrink: 0; }

  .lg\:nox-items-start { align-items: flex-start; }
  .lg\:nox-items-end { align-items: flex-end; }
  .lg\:nox-items-center { align-items: center; }
  .lg\:nox-items-baseline { align-items: baseline; }
  .lg\:nox-items-stretch { align-items: stretch; }
  .lg\:nox-self-auto { align-self: auto; }
  .lg\:nox-self-start { align-self: flex-start; }
  .lg\:nox-self-end { align-self: flex-end; }
  .lg\:nox-self-center { align-self: center; }
  .lg\:nox-self-stretch { align-self: stretch; }

  .lg\:nox-justify-start { justify-content: flex-start; }
  .lg\:nox-justify-end { justify-content: flex-end; }
  .lg\:nox-justify-center { justify-content: center; }
  .lg\:nox-justify-between { justify-content: space-between; }
  .lg\:nox-justify-around { justify-content: space-around; }
  .lg\:nox-justify-evenly { justify-content: space-evenly; }

  .lg\:nox-gap-0 { gap: 0; }
  .lg\:nox-gap-1 { gap: 4px; }
  .lg\:nox-gap-2 { gap: 8px; }
  .lg\:nox-gap-3 { gap: 12px; }
  .lg\:nox-gap-4 { gap: 16px; }
  .lg\:nox-gap-5 { gap: 20px; }
  .lg\:nox-gap-6 { gap: 24px; }
  .lg\:nox-gap-7 { gap: 28px; }
  .lg\:nox-gap-8 { gap: 32px; }
  .lg\:nox-gap-9 { gap: 36px; }
  .lg\:nox-gap-10 { gap: 40px; }
  .lg\:nox-gap-12 { gap: 48px; }
  .lg\:nox-gap-14 { gap: 56px; }
  .lg\:nox-gap-16 { gap: 64px; }

  .lg\:nox-p-0 { padding: 0; }
  .lg\:nox-p-1 { padding: 4px; }
  .lg\:nox-p-2 { padding: 8px; }
  .lg\:nox-p-3 { padding: 12px; }
  .lg\:nox-p-4 { padding: 16px; }
  .lg\:nox-p-5 { padding: 20px; }
  .lg\:nox-p-6 { padding: 24px; }
  .lg\:nox-p-7 { padding: 28px; }
  .lg\:nox-p-8 { padding: 32px; }
  .lg\:nox-p-10 { padding: 40px; }
  .lg\:nox-p-12 { padding: 48px; }
  .lg\:nox-p-16 { padding: 64px; }
  .lg\:nox-px-0 { padding-left: 0; padding-right: 0; }
  .lg\:nox-px-2 { padding-left: 8px; padding-right: 8px; }
  .lg\:nox-px-4 { padding-left: 16px; padding-right: 16px; }
  .lg\:nox-px-6 { padding-left: 24px; padding-right: 24px; }
  .lg\:nox-px-8 { padding-left: 32px; padding-right: 32px; }
  .lg\:nox-px-10 { padding-left: 40px; padding-right: 40px; }
  .lg\:nox-px-12 { padding-left: 48px; padding-right: 48px; }
  .lg\:nox-py-0 { padding-top: 0; padding-bottom: 0; }
  .lg\:nox-py-2 { padding-top: 8px; padding-bottom: 8px; }
  .lg\:nox-py-4 { padding-top: 16px; padding-bottom: 16px; }
  .lg\:nox-py-6 { padding-top: 24px; padding-bottom: 24px; }
  .lg\:nox-py-8 { padding-top: 32px; padding-bottom: 32px; }
  .lg\:nox-py-10 { padding-top: 40px; padding-bottom: 40px; }
  .lg\:nox-py-12 { padding-top: 48px; padding-bottom: 48px; }

  .lg\:nox-m-0 { margin: 0; }
  .lg\:nox-m-2 { margin: 8px; }
  .lg\:nox-m-4 { margin: 16px; }
  .lg\:nox-m-6 { margin: 24px; }
  .lg\:nox-m-8 { margin: 32px; }
  .lg\:nox-m-auto { margin: auto; }
  .lg\:nox-mx-0 { margin-left: 0; margin-right: 0; }
  .lg\:nox-mx-2 { margin-left: 8px; margin-right: 8px; }
  .lg\:nox-mx-4 { margin-left: 16px; margin-right: 16px; }
  .lg\:nox-mx-6 { margin-left: 24px; margin-right: 24px; }
  .lg\:nox-mx-8 { margin-left: 32px; margin-right: 32px; }
  .lg\:nox-mx-auto { margin-left: auto; margin-right: auto; }
  .lg\:nox-my-0 { margin-top: 0; margin-bottom: 0; }
  .lg\:nox-my-2 { margin-top: 8px; margin-bottom: 8px; }
  .lg\:nox-my-4 { margin-top: 16px; margin-bottom: 16px; }
  .lg\:nox-my-6 { margin-top: 24px; margin-bottom: 24px; }
  .lg\:nox-my-8 { margin-top: 32px; margin-bottom: 32px; }
  .lg\:nox-mt-0 { margin-top: 0; }
  .lg\:nox-mt-2 { margin-top: 8px; }
  .lg\:nox-mt-4 { margin-top: 16px; }
  .lg\:nox-mt-6 { margin-top: 24px; }
  .lg\:nox-mt-8 { margin-top: 32px; }
  .lg\:nox-mb-0 { margin-bottom: 0; }
  .lg\:nox-mb-2 { margin-bottom: 8px; }
  .lg\:nox-mb-4 { margin-bottom: 16px; }
  .lg\:nox-mb-6 { margin-bottom: 24px; }
  .lg\:nox-mb-8 { margin-bottom: 32px; }
  .lg\:nox-ml-auto { margin-left: auto; }
  .lg\:nox-mr-auto { margin-right: auto; }

  .lg\:nox-text-xs { font-size: 12px; line-height: 16px; }
  .lg\:nox-text-sm { font-size: 14px; line-height: 20px; }
  .lg\:nox-text-base { font-size: 16px; line-height: 24px; }
  .lg\:nox-text-lg { font-size: 18px; line-height: 28px; }
  .lg\:nox-text-xl { font-size: 20px; line-height: 28px; }
  .lg\:nox-text-2xl { font-size: 24px; line-height: 32px; }
  .lg\:nox-text-3xl { font-size: 30px; line-height: 36px; }
  .lg\:nox-text-4xl { font-size: 36px; line-height: 40px; }
  .lg\:nox-text-5xl { font-size: 48px; line-height: 1; }
  .lg\:nox-text-6xl { font-size: 60px; line-height: 1; }
  .lg\:nox-text-left { text-align: left; }
  .lg\:nox-text-center { text-align: center; }
  .lg\:nox-text-right { text-align: right; }
  .lg\:nox-font-normal { font-weight: 400; }
  .lg\:nox-font-medium { font-weight: 500; }
  .lg\:nox-font-semibold { font-weight: 600; }
  .lg\:nox-font-bold { font-weight: 700; }

  .lg\:nox-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .lg\:nox-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:nox-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:nox-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:nox-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:nox-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lg\:nox-grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .lg\:nox-grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .lg\:nox-grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .lg\:nox-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .lg\:nox-grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
  .lg\:nox-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .lg\:nox-grid-cols-none { grid-template-columns: none; }
  .lg\:nox-col-span-1 { grid-column: span 1 / span 1; }
  .lg\:nox-col-span-2 { grid-column: span 2 / span 2; }
  .lg\:nox-col-span-3 { grid-column: span 3 / span 3; }
  .lg\:nox-col-span-4 { grid-column: span 4 / span 4; }
  .lg\:nox-col-span-5 { grid-column: span 5 / span 5; }
  .lg\:nox-col-span-6 { grid-column: span 6 / span 6; }
  .lg\:nox-col-span-7 { grid-column: span 7 / span 7; }
  .lg\:nox-col-span-8 { grid-column: span 8 / span 8; }
  .lg\:nox-col-span-9 { grid-column: span 9 / span 9; }
  .lg\:nox-col-span-10 { grid-column: span 10 / span 10; }
  .lg\:nox-col-span-11 { grid-column: span 11 / span 11; }
  .lg\:nox-col-span-12 { grid-column: span 12 / span 12; }
  .lg\:nox-col-span-full { grid-column: 1 / -1; }

  .lg\:nox-w-full { width: 100%; }
  .lg\:nox-w-auto { width: auto; }
  .lg\:nox-w-screen { width: 100vw; }
  .lg\:nox-w-1\/2 { width: 50%; }
  .lg\:nox-w-1\/3 { width: 33.333%; }
  .lg\:nox-w-2\/3 { width: 66.667%; }
  .lg\:nox-w-1\/4 { width: 25%; }
  .lg\:nox-w-3\/4 { width: 75%; }
  .lg\:nox-w-1\/5 { width: 20%; }
  .lg\:nox-w-2\/5 { width: 40%; }
  .lg\:nox-w-3\/5 { width: 60%; }
  .lg\:nox-w-4\/5 { width: 80%; }
  .lg\:nox-w-1\/6 { width: 16.667%; }
  .lg\:nox-w-5\/6 { width: 83.333%; }
  .lg\:nox-max-w-none { max-width: none; }
  .lg\:nox-max-w-full { max-width: 100%; }
  .lg\:nox-max-w-prose { max-width: 65ch; }
  .lg\:nox-max-w-3xl { max-width: 768px; }
  .lg\:nox-max-w-4xl { max-width: 896px; }
  .lg\:nox-max-w-5xl { max-width: 1024px; }
  .lg\:nox-max-w-6xl { max-width: 1152px; }
  .lg\:nox-max-w-7xl { max-width: 1280px; }
  .lg\:nox-h-auto { height: auto; }
  .lg\:nox-h-full { height: 100%; }
  .lg\:nox-h-screen { height: 100vh; }

  .lg\:nox-order-first { order: -9999; }
  .lg\:nox-order-last { order: 9999; }
  .lg\:nox-order-none { order: 0; }

  .lg\:nox-static { position: static; }
  .lg\:nox-fixed { position: fixed; }
  .lg\:nox-absolute { position: absolute; }
  .lg\:nox-relative { position: relative; }
  .lg\:nox-sticky { position: sticky; }
  .lg\:nox-visible { visibility: visible; }
  .lg\:nox-invisible { visibility: hidden; }
  .lg\:nox-overflow-auto { overflow: auto; }
  .lg\:nox-overflow-hidden { overflow: hidden; }
  .lg\:nox-overflow-visible { overflow: visible; }

  .lg\:nox-rounded-none { border-radius: 0; }
  .lg\:nox-rounded { border-radius: 4px; }
  .lg\:nox-rounded-md { border-radius: 6px; }
  .lg\:nox-rounded-lg { border-radius: 8px; }
  .lg\:nox-rounded-xl { border-radius: 12px; }
  .lg\:nox-rounded-2xl { border-radius: 16px; }
  .lg\:nox-rounded-full { border-radius: 9999px; }

  .lg\:nox-space-x-0 > * + * { margin-left: 0; }
  .lg\:nox-space-x-2 > * + * { margin-left: 8px; }
  .lg\:nox-space-x-4 > * + * { margin-left: 16px; }
  .lg\:nox-space-x-6 > * + * { margin-left: 24px; }
  .lg\:nox-space-x-8 > * + * { margin-left: 32px; }
  .lg\:nox-space-y-0 > * + * { margin-top: 0; }
  .lg\:nox-space-y-2 > * + * { margin-top: 8px; }
  .lg\:nox-space-y-4 > * + * { margin-top: 16px; }
  .lg\:nox-space-y-6 > * + * { margin-top: 24px; }
  .lg\:nox-space-y-8 > * + * { margin-top: 32px; }

  .lg\:nox-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lg\:nox-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
  .lg\:nox-not-sr-only { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; }
}

/* ----------------------------------------
   xl: 1280px
   ---------------------------------------- */
@media (min-width: 1280px) {
  .xl\:nox-hidden { display: none; }
  .xl\:nox-block { display: block; }
  .xl\:nox-flex { display: flex; }
  .xl\:nox-grid { display: grid; }
  .xl\:nox-inline { display: inline; }
  .xl\:nox-inline-block { display: inline-block; }
  .xl\:nox-inline-flex { display: inline-flex; }
  .xl\:nox-inline-grid { display: inline-grid; }
  .xl\:nox-contents { display: contents; }

  .xl\:nox-flex-row { flex-direction: row; }
  .xl\:nox-flex-row-reverse { flex-direction: row-reverse; }
  .xl\:nox-flex-col { flex-direction: column; }
  .xl\:nox-flex-col-reverse { flex-direction: column-reverse; }
  .xl\:nox-flex-wrap { flex-wrap: wrap; }
  .xl\:nox-flex-nowrap { flex-wrap: nowrap; }
  .xl\:nox-flex-1 { flex: 1 1 0%; }
  .xl\:nox-flex-auto { flex: 1 1 auto; }
  .xl\:nox-flex-none { flex: none; }
  .xl\:nox-grow { flex-grow: 1; }
  .xl\:nox-grow-0 { flex-grow: 0; }
  .xl\:nox-shrink { flex-shrink: 1; }
  .xl\:nox-shrink-0 { flex-shrink: 0; }

  .xl\:nox-items-start { align-items: flex-start; }
  .xl\:nox-items-end { align-items: flex-end; }
  .xl\:nox-items-center { align-items: center; }
  .xl\:nox-items-baseline { align-items: baseline; }
  .xl\:nox-items-stretch { align-items: stretch; }

  .xl\:nox-justify-start { justify-content: flex-start; }
  .xl\:nox-justify-end { justify-content: flex-end; }
  .xl\:nox-justify-center { justify-content: center; }
  .xl\:nox-justify-between { justify-content: space-between; }
  .xl\:nox-justify-around { justify-content: space-around; }
  .xl\:nox-justify-evenly { justify-content: space-evenly; }

  .xl\:nox-gap-0 { gap: 0; }
  .xl\:nox-gap-1 { gap: 4px; }
  .xl\:nox-gap-2 { gap: 8px; }
  .xl\:nox-gap-3 { gap: 12px; }
  .xl\:nox-gap-4 { gap: 16px; }
  .xl\:nox-gap-5 { gap: 20px; }
  .xl\:nox-gap-6 { gap: 24px; }
  .xl\:nox-gap-7 { gap: 28px; }
  .xl\:nox-gap-8 { gap: 32px; }
  .xl\:nox-gap-10 { gap: 40px; }
  .xl\:nox-gap-12 { gap: 48px; }
  .xl\:nox-gap-16 { gap: 64px; }

  .xl\:nox-p-0 { padding: 0; }
  .xl\:nox-p-2 { padding: 8px; }
  .xl\:nox-p-3 { padding: 12px; }
  .xl\:nox-p-4 { padding: 16px; }
  .xl\:nox-p-5 { padding: 20px; }
  .xl\:nox-p-6 { padding: 24px; }
  .xl\:nox-p-8 { padding: 32px; }
  .xl\:nox-p-10 { padding: 40px; }
  .xl\:nox-p-12 { padding: 48px; }
  .xl\:nox-p-16 { padding: 64px; }
  .xl\:nox-px-0 { padding-left: 0; padding-right: 0; }
  .xl\:nox-px-2 { padding-left: 8px; padding-right: 8px; }
  .xl\:nox-px-4 { padding-left: 16px; padding-right: 16px; }
  .xl\:nox-px-6 { padding-left: 24px; padding-right: 24px; }
  .xl\:nox-px-8 { padding-left: 32px; padding-right: 32px; }
  .xl\:nox-px-10 { padding-left: 40px; padding-right: 40px; }
  .xl\:nox-px-12 { padding-left: 48px; padding-right: 48px; }
  .xl\:nox-py-0 { padding-top: 0; padding-bottom: 0; }
  .xl\:nox-py-2 { padding-top: 8px; padding-bottom: 8px; }
  .xl\:nox-py-4 { padding-top: 16px; padding-bottom: 16px; }
  .xl\:nox-py-6 { padding-top: 24px; padding-bottom: 24px; }
  .xl\:nox-py-8 { padding-top: 32px; padding-bottom: 32px; }
  .xl\:nox-py-10 { padding-top: 40px; padding-bottom: 40px; }
  .xl\:nox-py-12 { padding-top: 48px; padding-bottom: 48px; }

  .xl\:nox-m-0 { margin: 0; }
  .xl\:nox-m-2 { margin: 8px; }
  .xl\:nox-m-4 { margin: 16px; }
  .xl\:nox-m-6 { margin: 24px; }
  .xl\:nox-m-8 { margin: 32px; }
  .xl\:nox-m-auto { margin: auto; }
  .xl\:nox-mx-auto { margin-left: auto; margin-right: auto; }
  .xl\:nox-mx-0 { margin-left: 0; margin-right: 0; }
  .xl\:nox-mx-4 { margin-left: 16px; margin-right: 16px; }
  .xl\:nox-mx-8 { margin-left: 32px; margin-right: 32px; }
  .xl\:nox-my-0 { margin-top: 0; margin-bottom: 0; }
  .xl\:nox-my-4 { margin-top: 16px; margin-bottom: 16px; }
  .xl\:nox-my-8 { margin-top: 32px; margin-bottom: 32px; }
  .xl\:nox-mt-0 { margin-top: 0; }
  .xl\:nox-mt-4 { margin-top: 16px; }
  .xl\:nox-mt-8 { margin-top: 32px; }
  .xl\:nox-mb-0 { margin-bottom: 0; }
  .xl\:nox-mb-4 { margin-bottom: 16px; }
  .xl\:nox-mb-8 { margin-bottom: 32px; }
  .xl\:nox-ml-auto { margin-left: auto; }
  .xl\:nox-mr-auto { margin-right: auto; }

  .xl\:nox-text-xs { font-size: 12px; line-height: 16px; }
  .xl\:nox-text-sm { font-size: 14px; line-height: 20px; }
  .xl\:nox-text-base { font-size: 16px; line-height: 24px; }
  .xl\:nox-text-lg { font-size: 18px; line-height: 28px; }
  .xl\:nox-text-xl { font-size: 20px; line-height: 28px; }
  .xl\:nox-text-2xl { font-size: 24px; line-height: 32px; }
  .xl\:nox-text-3xl { font-size: 30px; line-height: 36px; }
  .xl\:nox-text-4xl { font-size: 36px; line-height: 40px; }
  .xl\:nox-text-5xl { font-size: 48px; line-height: 1; }
  .xl\:nox-text-6xl { font-size: 60px; line-height: 1; }
  .xl\:nox-text-left { text-align: left; }
  .xl\:nox-text-center { text-align: center; }
  .xl\:nox-text-right { text-align: right; }
  .xl\:nox-font-normal { font-weight: 400; }
  .xl\:nox-font-medium { font-weight: 500; }
  .xl\:nox-font-semibold { font-weight: 600; }
  .xl\:nox-font-bold { font-weight: 700; }

  .xl\:nox-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .xl\:nox-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xl\:nox-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xl\:nox-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .xl\:nox-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .xl\:nox-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .xl\:nox-grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .xl\:nox-grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .xl\:nox-grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .xl\:nox-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .xl\:nox-grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
  .xl\:nox-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .xl\:nox-grid-cols-none { grid-template-columns: none; }
  .xl\:nox-col-span-1 { grid-column: span 1 / span 1; }
  .xl\:nox-col-span-2 { grid-column: span 2 / span 2; }
  .xl\:nox-col-span-3 { grid-column: span 3 / span 3; }
  .xl\:nox-col-span-4 { grid-column: span 4 / span 4; }
  .xl\:nox-col-span-5 { grid-column: span 5 / span 5; }
  .xl\:nox-col-span-6 { grid-column: span 6 / span 6; }
  .xl\:nox-col-span-8 { grid-column: span 8 / span 8; }
  .xl\:nox-col-span-10 { grid-column: span 10 / span 10; }
  .xl\:nox-col-span-12 { grid-column: span 12 / span 12; }
  .xl\:nox-col-span-full { grid-column: 1 / -1; }

  .xl\:nox-w-full { width: 100%; }
  .xl\:nox-w-auto { width: auto; }
  .xl\:nox-w-1\/2 { width: 50%; }
  .xl\:nox-w-1\/3 { width: 33.333%; }
  .xl\:nox-w-2\/3 { width: 66.667%; }
  .xl\:nox-w-1\/4 { width: 25%; }
  .xl\:nox-w-3\/4 { width: 75%; }
  .xl\:nox-w-1\/5 { width: 20%; }
  .xl\:nox-w-2\/5 { width: 40%; }
  .xl\:nox-w-3\/5 { width: 60%; }
  .xl\:nox-w-4\/5 { width: 80%; }
  .xl\:nox-w-1\/6 { width: 16.667%; }
  .xl\:nox-w-5\/6 { width: 83.333%; }
  .xl\:nox-max-w-none { max-width: none; }
  .xl\:nox-max-w-full { max-width: 100%; }
  .xl\:nox-max-w-5xl { max-width: 1024px; }
  .xl\:nox-max-w-6xl { max-width: 1152px; }
  .xl\:nox-max-w-7xl { max-width: 1280px; }
  .xl\:nox-h-auto { height: auto; }
  .xl\:nox-h-full { height: 100%; }
  .xl\:nox-h-screen { height: 100vh; }

  .xl\:nox-order-first { order: -9999; }
  .xl\:nox-order-last { order: 9999; }
  .xl\:nox-order-none { order: 0; }

  .xl\:nox-static { position: static; }
  .xl\:nox-fixed { position: fixed; }
  .xl\:nox-absolute { position: absolute; }
  .xl\:nox-relative { position: relative; }
  .xl\:nox-sticky { position: sticky; }
  .xl\:nox-visible { visibility: visible; }
  .xl\:nox-invisible { visibility: hidden; }
  .xl\:nox-overflow-auto { overflow: auto; }
  .xl\:nox-overflow-hidden { overflow: hidden; }
  .xl\:nox-overflow-visible { overflow: visible; }

  .xl\:nox-space-x-0 > * + * { margin-left: 0; }
  .xl\:nox-space-x-4 > * + * { margin-left: 16px; }
  .xl\:nox-space-x-6 > * + * { margin-left: 24px; }
  .xl\:nox-space-x-8 > * + * { margin-left: 32px; }
  .xl\:nox-space-y-0 > * + * { margin-top: 0; }
  .xl\:nox-space-y-4 > * + * { margin-top: 16px; }
  .xl\:nox-space-y-6 > * + * { margin-top: 24px; }
  .xl\:nox-space-y-8 > * + * { margin-top: 32px; }

  .xl\:nox-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .xl\:nox-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
  .xl\:nox-not-sr-only { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; }
}

/* ----------------------------------------
   2xl: 1536px
   ---------------------------------------- */
@media (min-width: 1536px) {
  .\32xl\:nox-hidden { display: none; }
  .\32xl\:nox-block { display: block; }
  .\32xl\:nox-flex { display: flex; }
  .\32xl\:nox-grid { display: grid; }
  .\32xl\:nox-inline { display: inline; }
  .\32xl\:nox-inline-block { display: inline-block; }
  .\32xl\:nox-inline-flex { display: inline-flex; }
  .\32xl\:nox-inline-grid { display: inline-grid; }
  .\32xl\:nox-contents { display: contents; }

  .\32xl\:nox-flex-row { flex-direction: row; }
  .\32xl\:nox-flex-row-reverse { flex-direction: row-reverse; }
  .\32xl\:nox-flex-col { flex-direction: column; }
  .\32xl\:nox-flex-col-reverse { flex-direction: column-reverse; }
  .\32xl\:nox-flex-wrap { flex-wrap: wrap; }
  .\32xl\:nox-flex-nowrap { flex-wrap: nowrap; }
  .\32xl\:nox-flex-1 { flex: 1 1 0%; }
  .\32xl\:nox-flex-auto { flex: 1 1 auto; }
  .\32xl\:nox-flex-none { flex: none; }

  .\32xl\:nox-items-start { align-items: flex-start; }
  .\32xl\:nox-items-end { align-items: flex-end; }
  .\32xl\:nox-items-center { align-items: center; }
  .\32xl\:nox-items-stretch { align-items: stretch; }

  .\32xl\:nox-justify-start { justify-content: flex-start; }
  .\32xl\:nox-justify-end { justify-content: flex-end; }
  .\32xl\:nox-justify-center { justify-content: center; }
  .\32xl\:nox-justify-between { justify-content: space-between; }
  .\32xl\:nox-justify-around { justify-content: space-around; }
  .\32xl\:nox-justify-evenly { justify-content: space-evenly; }

  .\32xl\:nox-gap-0 { gap: 0; }
  .\32xl\:nox-gap-2 { gap: 8px; }
  .\32xl\:nox-gap-4 { gap: 16px; }
  .\32xl\:nox-gap-6 { gap: 24px; }
  .\32xl\:nox-gap-8 { gap: 32px; }
  .\32xl\:nox-gap-10 { gap: 40px; }
  .\32xl\:nox-gap-12 { gap: 48px; }
  .\32xl\:nox-gap-16 { gap: 64px; }

  .\32xl\:nox-p-0 { padding: 0; }
  .\32xl\:nox-p-2 { padding: 8px; }
  .\32xl\:nox-p-4 { padding: 16px; }
  .\32xl\:nox-p-6 { padding: 24px; }
  .\32xl\:nox-p-8 { padding: 32px; }
  .\32xl\:nox-p-10 { padding: 40px; }
  .\32xl\:nox-p-12 { padding: 48px; }
  .\32xl\:nox-p-16 { padding: 64px; }
  .\32xl\:nox-px-0 { padding-left: 0; padding-right: 0; }
  .\32xl\:nox-px-4 { padding-left: 16px; padding-right: 16px; }
  .\32xl\:nox-px-6 { padding-left: 24px; padding-right: 24px; }
  .\32xl\:nox-px-8 { padding-left: 32px; padding-right: 32px; }
  .\32xl\:nox-px-10 { padding-left: 40px; padding-right: 40px; }
  .\32xl\:nox-px-12 { padding-left: 48px; padding-right: 48px; }
  .\32xl\:nox-py-0 { padding-top: 0; padding-bottom: 0; }
  .\32xl\:nox-py-4 { padding-top: 16px; padding-bottom: 16px; }
  .\32xl\:nox-py-6 { padding-top: 24px; padding-bottom: 24px; }
  .\32xl\:nox-py-8 { padding-top: 32px; padding-bottom: 32px; }
  .\32xl\:nox-py-10 { padding-top: 40px; padding-bottom: 40px; }
  .\32xl\:nox-py-12 { padding-top: 48px; padding-bottom: 48px; }

  .\32xl\:nox-m-0 { margin: 0; }
  .\32xl\:nox-m-4 { margin: 16px; }
  .\32xl\:nox-m-8 { margin: 32px; }
  .\32xl\:nox-m-auto { margin: auto; }
  .\32xl\:nox-mx-auto { margin-left: auto; margin-right: auto; }
  .\32xl\:nox-mx-0 { margin-left: 0; margin-right: 0; }
  .\32xl\:nox-mx-4 { margin-left: 16px; margin-right: 16px; }
  .\32xl\:nox-mx-8 { margin-left: 32px; margin-right: 32px; }
  .\32xl\:nox-mt-0 { margin-top: 0; }
  .\32xl\:nox-mt-4 { margin-top: 16px; }
  .\32xl\:nox-mt-8 { margin-top: 32px; }
  .\32xl\:nox-mb-0 { margin-bottom: 0; }
  .\32xl\:nox-mb-4 { margin-bottom: 16px; }
  .\32xl\:nox-mb-8 { margin-bottom: 32px; }
  .\32xl\:nox-ml-auto { margin-left: auto; }

  .\32xl\:nox-text-xs { font-size: 12px; line-height: 16px; }
  .\32xl\:nox-text-sm { font-size: 14px; line-height: 20px; }
  .\32xl\:nox-text-base { font-size: 16px; line-height: 24px; }
  .\32xl\:nox-text-lg { font-size: 18px; line-height: 28px; }
  .\32xl\:nox-text-xl { font-size: 20px; line-height: 28px; }
  .\32xl\:nox-text-2xl { font-size: 24px; line-height: 32px; }
  .\32xl\:nox-text-3xl { font-size: 30px; line-height: 36px; }
  .\32xl\:nox-text-4xl { font-size: 36px; line-height: 40px; }
  .\32xl\:nox-text-5xl { font-size: 48px; line-height: 1; }
  .\32xl\:nox-text-6xl { font-size: 60px; line-height: 1; }
  .\32xl\:nox-text-left { text-align: left; }
  .\32xl\:nox-text-center { text-align: center; }
  .\32xl\:nox-text-right { text-align: right; }

  .\32xl\:nox-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .\32xl\:nox-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .\32xl\:nox-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .\32xl\:nox-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .\32xl\:nox-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .\32xl\:nox-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .\32xl\:nox-grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .\32xl\:nox-grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .\32xl\:nox-grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .\32xl\:nox-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .\32xl\:nox-grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
  .\32xl\:nox-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .\32xl\:nox-grid-cols-none { grid-template-columns: none; }
  .\32xl\:nox-col-span-1 { grid-column: span 1 / span 1; }
  .\32xl\:nox-col-span-2 { grid-column: span 2 / span 2; }
  .\32xl\:nox-col-span-3 { grid-column: span 3 / span 3; }
  .\32xl\:nox-col-span-4 { grid-column: span 4 / span 4; }
  .\32xl\:nox-col-span-6 { grid-column: span 6 / span 6; }
  .\32xl\:nox-col-span-8 { grid-column: span 8 / span 8; }
  .\32xl\:nox-col-span-12 { grid-column: span 12 / span 12; }
  .\32xl\:nox-col-span-full { grid-column: 1 / -1; }

  .\32xl\:nox-w-full { width: 100%; }
  .\32xl\:nox-w-auto { width: auto; }
  .\32xl\:nox-w-1\/2 { width: 50%; }
  .\32xl\:nox-w-1\/3 { width: 33.333%; }
  .\32xl\:nox-w-2\/3 { width: 66.667%; }
  .\32xl\:nox-w-1\/4 { width: 25%; }
  .\32xl\:nox-w-3\/4 { width: 75%; }
  .\32xl\:nox-w-1\/5 { width: 20%; }
  .\32xl\:nox-w-4\/5 { width: 80%; }
  .\32xl\:nox-w-1\/6 { width: 16.667%; }
  .\32xl\:nox-w-5\/6 { width: 83.333%; }
  .\32xl\:nox-max-w-none { max-width: none; }
  .\32xl\:nox-max-w-full { max-width: 100%; }
  .\32xl\:nox-max-w-7xl { max-width: 1280px; }
  .\32xl\:nox-max-w-screen-2xl { max-width: 1536px; }
  .\32xl\:nox-h-auto { height: auto; }
  .\32xl\:nox-h-full { height: 100%; }
  .\32xl\:nox-h-screen { height: 100vh; }

  .\32xl\:nox-order-first { order: -9999; }
  .\32xl\:nox-order-last { order: 9999; }
  .\32xl\:nox-order-none { order: 0; }

  .\32xl\:nox-static { position: static; }
  .\32xl\:nox-fixed { position: fixed; }
  .\32xl\:nox-absolute { position: absolute; }
  .\32xl\:nox-relative { position: relative; }
  .\32xl\:nox-sticky { position: sticky; }
  .\32xl\:nox-visible { visibility: visible; }
  .\32xl\:nox-invisible { visibility: hidden; }
  .\32xl\:nox-overflow-auto { overflow: auto; }
  .\32xl\:nox-overflow-hidden { overflow: hidden; }

  .\32xl\:nox-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .\32xl\:nox-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
  .\32xl\:nox-not-sr-only { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; }
}

/* ============================================================
   END OF NOX DESIGN SYSTEM CSS EXPANSION
   ============================================================ */


/* ═══════════════════════════════════════════════════════════════════════════
   NOX v3 EXPANSION — Fonts, Forms, Components, Animations, Themes
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   NOX v3 EXPANSION — BLOCKS D, E, F, G, H
   Fonts, Forms, Components, Animations, Themes
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════


/* ═══════════════════════════════════════════════════════════════════════════
   BLOCK H: ADDITIONAL THEMES (midnight, cream, frost, carbon, paper)
   ═══════════════════════════════════════════════════════════════════════════ */
   BLOCK H — ADDITIONAL THEMES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Theme: Midnight (deep blue-black, FenceOps-inspired) ─── */

[data-theme="midnight"] {
  --nox-bg-0: #070A0C;
  --nox-bg-1: #0C1014;
  --nox-bg-2: #111820;
  --nox-bg-3: #162028;
  --nox-bg-4: #1C2A34;
  --nox-bg-5: #22323E;

  --nox-ink:   #E8EEF2;
  --nox-ink-2: #A8BCC8;
  --nox-ink-3: #5A7A8A;
  --nox-ink-4: #304050;

  --nox-line:   rgba(255,255,255,0.07);
  --nox-line-2: rgba(255,255,255,0.04);

  --nox-shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --nox-shadow:    0 2px 8px rgba(0,0,0,0.4);
  --nox-shadow-lg: 0 4px 20px rgba(0,0,0,0.5);
  --nox-shadow-xl: 0 8px 32px rgba(0,0,0,0.6);

  --nox-overlay: rgba(7,10,12,0.8);
  --nox-toast-success-bg: #0C2418;
  --nox-toast-error-bg:   #2A0C0C;
  --nox-toast-warning-bg: #2A2008;
  --nox-toast-info-bg:    var(--nox-bg-4);

  color-scheme: dark;
}

/* ─── Theme: Cream (warm beige, LDTC-inspired) ─── */

[data-theme="cream"] {
  --nox-bg-0: #F5F0E8;
  --nox-bg-1: #FAF7F2;
  --nox-bg-2: #FFFFFF;
  --nox-bg-3: #EDE6D8;
  --nox-bg-4: #E2D9C8;
  --nox-bg-5: #D4C9B4;

  --nox-ink:   #0D1B2E;
  --nox-ink-2: #344054;
  --nox-ink-3: #6B7B93;
  --nox-ink-4: #98A6BA;

  --nox-line:   rgba(30,22,12,0.1);
  --nox-line-2: rgba(30,22,12,0.06);

  --nox-green:    #177A4E;
  --nox-green-s:  rgba(23,122,78,0.08);
  --nox-red:      #D63B2F;
  --nox-red-s:    rgba(214,59,47,0.08);
  --nox-yellow:   #C47A1A;
  --nox-yellow-s: rgba(196,122,26,0.08);
  --nox-blue:     #1B5FCC;
  --nox-blue-s:   rgba(27,95,204,0.08);

  --nox-shadow-sm: 0 1px 3px rgba(13,27,46,.06), 0 2px 8px rgba(13,27,46,.03);
  --nox-shadow:    0 2px 12px rgba(13,27,46,.08), 0 8px 24px rgba(13,27,46,.04);
  --nox-shadow-lg: 0 8px 40px rgba(13,27,46,.12);
  --nox-shadow-xl: 0 12px 48px rgba(13,27,46,.16);

  --nox-overlay: rgba(13,27,46,0.3);
  --nox-toast-success-bg: #eaf5ee;
  --nox-toast-error-bg:   #fce8e8;
  --nox-toast-warning-bg: #fef3e0;
  --nox-toast-info-bg:    var(--nox-bg-4);

  color-scheme: light;
}

/* ─── Theme: Frost (cool silver-gray) ─── */

[data-theme="frost"] {
  --nox-bg-0: #F0F2F5;
  --nox-bg-1: #F8F9FB;
  --nox-bg-2: #FFFFFF;
  --nox-bg-3: #E8EBF0;
  --nox-bg-4: #DDE1E8;
  --nox-bg-5: #CDD3DC;

  --nox-ink:   #1A1D23;
  --nox-ink-2: #3A3F48;
  --nox-ink-3: #6B7280;
  --nox-ink-4: #9CA3AF;

  --nox-line:   rgba(26,29,35,0.1);
  --nox-line-2: rgba(26,29,35,0.06);

  --nox-shadow-sm: 0 1px 3px rgba(26,29,35,.06), 0 2px 8px rgba(26,29,35,.03);
  --nox-shadow:    0 2px 12px rgba(26,29,35,.08), 0 8px 24px rgba(26,29,35,.04);
  --nox-shadow-lg: 0 8px 40px rgba(26,29,35,.12);
  --nox-shadow-xl: 0 12px 48px rgba(26,29,35,.16);

  --nox-overlay: rgba(26,29,35,0.3);
  --nox-toast-success-bg: #e8f5ec;
  --nox-toast-error-bg:   #fce8e8;
  --nox-toast-warning-bg: #fef3e0;
  --nox-toast-info-bg:    var(--nox-bg-4);

  color-scheme: light;
}

/* ─── Theme: Carbon (pure black, high contrast) ─── */

[data-theme="carbon"] {
  --nox-bg-0: #000000;
  --nox-bg-1: #0A0A0A;
  --nox-bg-2: #111111;
  --nox-bg-3: #1A1A1A;
  --nox-bg-4: #222222;
  --nox-bg-5: #2A2A2A;

  --nox-ink:   #F0F0F0;
  --nox-ink-2: #B0B0B0;
  --nox-ink-3: #707070;
  --nox-ink-4: #404040;

  --nox-line:   rgba(255,255,255,0.08);
  --nox-line-2: rgba(255,255,255,0.04);

  --nox-shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
  --nox-shadow:    0 2px 8px rgba(0,0,0,0.5);
  --nox-shadow-lg: 0 4px 20px rgba(0,0,0,0.6);
  --nox-shadow-xl: 0 8px 32px rgba(0,0,0,0.7);

  --nox-overlay: rgba(0,0,0,0.85);
  --nox-toast-success-bg: #0A1F10;
  --nox-toast-error-bg:   #1F0A0A;
  --nox-toast-warning-bg: #1F1A0A;
  --nox-toast-info-bg:    var(--nox-bg-4);

  color-scheme: dark;
}

/* ─── Theme: Paper (true white, print-like) ─── */

[data-theme="paper"] {
  --nox-bg-0: #FAFAFA;
  --nox-bg-1: #FFFFFF;
  --nox-bg-2: #FFFFFF;
  --nox-bg-3: #F5F5F5;
  --nox-bg-4: #EEEEEE;
  --nox-bg-5: #E0E0E0;

  --nox-ink:   #212121;
  --nox-ink-2: #424242;
  --nox-ink-3: #757575;
  --nox-ink-4: #BDBDBD;

  --nox-line:   rgba(0,0,0,0.12);
  --nox-line-2: rgba(0,0,0,0.06);

  --nox-green:    #2E7D32;
  --nox-green-s:  rgba(46,125,50,0.08);
  --nox-red:      #C62828;
  --nox-red-s:    rgba(198,40,40,0.08);
  --nox-yellow:   #F57F17;
  --nox-yellow-s: rgba(245,127,23,0.08);
  --nox-blue:     #1565C0;
  --nox-blue-s:   rgba(21,101,192,0.08);

  --nox-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --nox-shadow:    0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.04);
  --nox-shadow-lg: 0 4px 20px rgba(0,0,0,.1);
  --nox-shadow-xl: 0 8px 32px rgba(0,0,0,.12);

  --nox-overlay: rgba(33,33,33,0.3);
  --nox-toast-success-bg: #e8f5e9;
  --nox-toast-error-bg:   #ffebee;
  --nox-toast-warning-bg: #fff8e1;
  --nox-toast-info-bg:    var(--nox-bg-4);

  color-scheme: light;
}



/* ═══════════════════════════════════════════════════════════════════════════
   NOX v3 FINAL EXPANSION — Gradients, States, Components, Position, Print
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   BLOCK D: EXPANDED FONT SYSTEM (serif, geometric, clean, friendly, technical)
   Prose/article styling + code blocks + terminal output
   ═══════════════════════════════════════════════════════════════════════════ */
   BLOCK D — EXPANDED FONT SYSTEM
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Additional Font Imports ─── */
/* Add to the @import at top of file:
   &family=Syne:wght@400;500;600;700;800
   &family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400
   &family=Space+Mono:wght@400;700
   &family=Inter:wght@300;400;500;600;700
   &family=DM+Sans:wght@300;400;500;600;700
*/

/* Font family tokens */
:root {
  --nox-font-serif:      'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --nox-font-geometric:  'Syne', 'Outfit', system-ui, sans-serif;
  --nox-font-clean:      'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --nox-font-friendly:   'DM Sans', 'Outfit', system-ui, sans-serif;
  --nox-font-technical:  'Space Mono', 'JetBrains Mono', monospace;
}

.nox-font-serif     { font-family: var(--nox-font-serif); }
.nox-font-geometric { font-family: var(--nox-font-geometric); }
.nox-font-clean     { font-family: var(--nox-font-clean); }
.nox-font-friendly  { font-family: var(--nox-font-friendly); }
.nox-font-technical { font-family: var(--nox-font-technical); }

/* Font weight 800 */
.nox-font-800 { font-weight: 800; }

/* ─── Fluid Typography ─── */

.nox-text-fluid-sm   { font-size: clamp(12px, 1.2vw, 14px); }
.nox-text-fluid-base { font-size: clamp(14px, 1.4vw, 16px); }
.nox-text-fluid-lg   { font-size: clamp(16px, 1.8vw, 20px); }
.nox-text-fluid-xl   { font-size: clamp(20px, 2.5vw, 28px); }
.nox-text-fluid-2xl  { font-size: clamp(24px, 3.5vw, 36px); }
.nox-text-fluid-3xl  { font-size: clamp(30px, 4.5vw, 48px); }
.nox-text-fluid-4xl  { font-size: clamp(36px, 6vw, 64px); }
.nox-text-fluid-hero { font-size: clamp(40px, 8vw, 96px); }

/* ─── Prose / Article Styling ─── */

.nox-prose {
  font-family: var(--nox-font-body);
  font-size: 15px;
  line-height: 1.8;
  color: var(--nox-ink-2);
  max-width: 65ch;
}

.nox-prose > * + * { margin-top: 1.25em; }

.nox-prose h1 {
  font-family: var(--nox-font-display);
  font-size: 2.25em;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--nox-ink);
  margin-top: 2em;
  margin-bottom: 0.5em;
}

.nox-prose h2 {
  font-family: var(--nox-font-display);
  font-size: 1.6em;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--nox-ink);
  margin-top: 1.75em;
  margin-bottom: 0.5em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--nox-line);
}

.nox-prose h3 {
  font-family: var(--nox-font-display);
  font-size: 1.3em;
  font-weight: 600;
  line-height: 1.3;
  color: var(--nox-ink);
  margin-top: 1.5em;
  margin-bottom: 0.4em;
}

.nox-prose h4 {
  font-family: var(--nox-font-display);
  font-size: 1.1em;
  font-weight: 600;
  color: var(--nox-ink);
  margin-top: 1.25em;
  margin-bottom: 0.3em;
}

.nox-prose p {
  margin-top: 0;
  margin-bottom: 1.25em;
}

.nox-prose a {
  color: var(--nox-accent);
  text-decoration: underline;
  text-decoration-color: var(--nox-accent-g);
  text-underline-offset: 2px;
  transition: text-decoration-color var(--nox-ease-fast);
}

.nox-prose a:hover {
  text-decoration-color: var(--nox-accent);
}

.nox-prose strong { color: var(--nox-ink); font-weight: 600; }
.nox-prose em { font-style: italic; }

.nox-prose ul, .nox-prose ol {
  padding-left: 1.5em;
  margin-bottom: 1.25em;
}

.nox-prose ul { list-style-type: disc; }
.nox-prose ol { list-style-type: decimal; }

.nox-prose li { margin-bottom: 0.5em; }
.nox-prose li > ul, .nox-prose li > ol { margin-top: 0.5em; margin-bottom: 0; }

.nox-prose blockquote {
  border-left: 3px solid var(--nox-accent);
  padding: 0.75em 1.25em;
  margin: 1.5em 0;
  background: var(--nox-accent-s);
  border-radius: 0 var(--nox-r) var(--nox-r) 0;
  font-style: italic;
  color: var(--nox-ink-2);
}

.nox-prose blockquote p { margin-bottom: 0; }

.nox-prose hr {
  border: none;
  height: 1px;
  background: var(--nox-line);
  margin: 2em 0;
}

.nox-prose img {
  border-radius: var(--nox-r-lg);
  border: 1px solid var(--nox-line);
  margin: 1.5em 0;
}

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

.nox-prose table th {
  font-family: var(--nox-font-mono);
  font-size: 0.75em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--nox-ink-4);
  padding: 0.75em 1em;
  border-bottom: 2px solid var(--nox-line);
  text-align: left;
}

.nox-prose table td {
  padding: 0.75em 1em;
  border-bottom: 1px solid var(--nox-line-2);
  color: var(--nox-ink-2);
}

.nox-prose table tbody tr:hover td { background: var(--nox-bg-3); }

/* Description list */
.nox-prose dl { margin: 1.25em 0; }
.nox-prose dt { font-weight: 600; color: var(--nox-ink); margin-top: 1em; }
.nox-prose dd { margin-left: 1.5em; margin-top: 0.25em; }

/* Prose size variants */
.nox-prose-sm { font-size: 13px; line-height: 1.7; }
.nox-prose-lg { font-size: 17px; line-height: 1.85; }
.nox-prose-xl { font-size: 19px; line-height: 1.9; }

/* ─── Code Block Component ─── */

.nox-prose code, .nox-code-inline {
  font-family: var(--nox-font-mono);
  font-size: 0.85em;
  padding: 0.15em 0.4em;
  background: var(--nox-bg-4);
  border: 1px solid var(--nox-line);
  border-radius: 4px;
  color: var(--nox-accent);
  white-space: nowrap;
}

.nox-prose pre, .nox-code {
  font-family: var(--nox-font-mono);
  font-size: 12px;
  line-height: 1.7;
  background: var(--nox-bg-1);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-lg);
  padding: 16px 20px;
  overflow-x: auto;
  margin: 1.5em 0;
  color: var(--nox-ink-2);
  tab-size: 2;
  -moz-tab-size: 2;
}

.nox-prose pre code, .nox-code code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
  white-space: pre;
}

.nox-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--nox-bg-3);
  border: 1px solid var(--nox-line);
  border-bottom: none;
  border-radius: var(--nox-r-lg) var(--nox-r-lg) 0 0;
  font-family: var(--nox-font-mono);
  font-size: 10px;
  color: var(--nox-ink-4);
}

.nox-code-header + .nox-code {
  border-radius: 0 0 var(--nox-r-lg) var(--nox-r-lg);
  margin-top: 0;
}

.nox-code-lang {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nox-code-copy {
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--nox-bg-4);
  border: 1px solid var(--nox-line);
  color: var(--nox-ink-4);
  font-size: 10px;
  transition: all var(--nox-ease-fast);
}

.nox-code-copy:hover {
  background: var(--nox-accent-s);
  color: var(--nox-accent);
  border-color: var(--nox-accent-g);
}

/* Line numbers */
.nox-code-numbered {
  counter-reset: line;
}

.nox-code-numbered .nox-code-line {
  display: flex;
  counter-increment: line;
}

.nox-code-numbered .nox-code-line::before {
  content: counter(line);
  display: inline-block;
  width: 2em;
  margin-right: 1em;
  text-align: right;
  color: var(--nox-ink-4);
  flex-shrink: 0;
  user-select: none;
}

/* Highlight line */
.nox-code-line.highlight {
  background: var(--nox-accent-s);
  margin: 0 -20px;
  padding: 0 20px;
}

/* ─── Terminal / Console Output ─── */

.nox-terminal {
  background: #0c0c0c;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--nox-r-lg);
  overflow: hidden;
  font-family: var(--nox-font-mono);
  font-size: 12px;
}

.nox-terminal-header {
  padding: 8px 14px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  gap: 8px;
}

.nox-terminal-dots {
  display: flex;
  gap: 6px;
}

.nox-terminal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.nox-terminal-dot.red    { background: #ff5f57; }
.nox-terminal-dot.yellow { background: #febc2e; }
.nox-terminal-dot.green  { background: #28c840; }

.nox-terminal-title {
  font-size: 11px;
  color: rgba(255,255,255,0.4);
  flex: 1;
  text-align: center;
}

.nox-terminal-body {
  padding: 14px 16px;
  color: #e0e0e0;
  line-height: 1.6;
  overflow-x: auto;
  max-height: 400px;
  overflow-y: auto;
}

.nox-terminal-line { display: block; }
.nox-terminal-prompt { color: #4ade80; }
.nox-terminal-comment { color: #6b7280; }
.nox-terminal-string { color: #fbbf24; }
.nox-terminal-error { color: #f87171; }
.nox-terminal-info { color: #60a5fa; }
.nox-terminal-success { color: #4ade80; }
.nox-terminal-muted { color: #4b5563; }


/* ═══════════════════════════════════════════════════════════════════════════