/* ═══════════════════════════════════════════════════════════════════════════
   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; }


/* ═══════════════════════════════════════════════════════════════════════════
/* ═══════════════════════════════════════════════════════════════════════════
   NOX DASHBOARD — Dashboard-specific components
   Load AFTER nox-tokens.css
   Includes: KPIs, cards, tables, kanban, sidebars, forms, charts, data viz,
             layout variations, role/field components, mobile UI, PWA
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 4 — CORE COMPONENTS (Shell, Sidebar, Topbar, KPI, Card, Table, etc.)
   ═══════════════════════════════════════════════════════════════════════════ */
   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 7 — LAYOUT VARIATIONS (Dashboard layouts)
   ═══════════════════════════════════════════════════════════════════════════ */
   LAYER 7 — LAYOUT VARIATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Layout 1: Top Navigation (no sidebar) ─── */

.nox-layout-topnav {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.nox-topnav {
  background: var(--nox-bg-1);
  border-bottom: 1px solid var(--nox-line);
  display: flex;
  align-items: center;
  padding: 0 var(--nox-6);
  height: 56px;
  flex-shrink: 0;
  gap: var(--nox-6);
}

.nox-topnav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding-right: var(--nox-6);
  border-right: 1px solid var(--nox-line);
  margin-right: var(--nox-2);
}

.nox-topnav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.nox-topnav-link {
  padding: 8px 14px;
  font-family: var(--nox-font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--nox-ink-3);
  border-radius: var(--nox-r);
  transition: all var(--nox-ease-fast);
  cursor: pointer;
  border: none;
  background: none;
  white-space: nowrap;
}

.nox-topnav-link:hover { background: var(--nox-bg-3); color: var(--nox-ink-2); }
.nox-topnav-link.active { background: var(--nox-accent-s); color: var(--nox-accent); font-weight: 600; }

.nox-topnav-right {
  display: flex;
  align-items: center;
  gap: var(--nox-2);
  margin-left: auto;
}

/* ─── Layout 2: Split Panel (3-column) ─── */

.nox-layout-split {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.nox-split-nav {
  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;
  gap: 4px;
}

.nox-split-list {
  width: 300px;
  flex-shrink: 0;
  background: var(--nox-bg-1);
  border-right: 1px solid var(--nox-line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.nox-split-list-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--nox-line);
  flex-shrink: 0;
}

.nox-split-list-body {
  flex: 1;
  overflow-y: auto;
}

.nox-split-list-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--nox-line-2);
  cursor: pointer;
  transition: background var(--nox-ease-fast);
}

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

.nox-split-list-item.active {
  background: var(--nox-accent-s);
  border-left: 2px solid var(--nox-accent);
}

.nox-split-detail {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.nox-split-detail-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--nox-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.nox-split-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--nox-5);
}

/* ─── Layout 3: Stacked / Full-Width (no sidebar) ─── */

.nox-layout-stacked {
  min-height: 100vh;
  background: var(--nox-bg-0);
}

.nox-stacked-header {
  background: var(--nox-bg-1);
  border-bottom: 1px solid var(--nox-line);
  padding: var(--nox-5) var(--nox-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nox-stacked-body {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--nox-6);
}

.nox-stacked-body-wide { max-width: 1440px; }
.nox-stacked-body-narrow { max-width: 800px; }

.nox-stacked-hero {
  text-align: center;
  padding: var(--nox-8) var(--nox-4);
}

.nox-stacked-hero-title {
  font-family: var(--nox-font-display);
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.1;
  color: var(--nox-ink);
  margin-bottom: var(--nox-3);
}

.nox-stacked-hero-sub {
  font-size: 15px;
  color: var(--nox-ink-3);
  max-width: 500px;
  margin: 0 auto;
}

/* ─── Layout 4: Dashboard Grid (widget-based) ─── */

.nox-layout-dashboard {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.nox-dashboard-grid {
  flex: 1;
  overflow-y: auto;
  padding: var(--nox-4);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(80px, auto);
  gap: var(--nox-3);
  align-content: start;
}

/* Widget span classes (for dashboard-grid layout) */
.nox-span-1  { grid-column: span 1; }  .nox-span-2  { grid-column: span 2; }
.nox-span-3  { grid-column: span 3; }  .nox-span-4  { grid-column: span 4; }
.nox-span-5  { grid-column: span 5; }  .nox-span-6  { grid-column: span 6; }
.nox-span-7  { grid-column: span 7; }  .nox-span-8  { grid-column: span 8; }
.nox-span-9  { grid-column: span 9; }  .nox-span-10 { grid-column: span 10; }
.nox-span-11 { grid-column: span 11; } .nox-span-12 { grid-column: span 12; }

.nox-row-1  { grid-row: span 1; }  .nox-row-2  { grid-row: span 2; }
.nox-row-3  { grid-row: span 3; }  .nox-row-4  { grid-row: span 4; }

/* ─── Layout 5: Dual Sidebar (nav + context panel) ─── */

.nox-layout-dual {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.nox-panel-right {
  width: 320px;
  flex-shrink: 0;
  background: var(--nox-bg-1);
  border-left: 1px solid var(--nox-line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.nox-panel-right-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--nox-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.nox-panel-right-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--nox-4);
}

/* Responsive layout overrides */
@media (max-width: 1024px) {
  .nox-split-list { width: 240px; }
  .nox-panel-right { width: 260px; }
  .nox-dashboard-grid { grid-template-columns: repeat(6, 1fr); }
  .nox-span-7, .nox-span-8, .nox-span-9, .nox-span-10, .nox-span-11, .nox-span-12 { grid-column: span 6; }
}

@media (max-width: 768px) {
  .nox-topnav { padding: 0 var(--nox-3); gap: var(--nox-2); }
  .nox-topnav-links { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .nox-topnav-logo { border-right: none; padding-right: 0; margin-right: 0; }

  .nox-split-list { display: none; }
  .nox-split-nav { display: none; }

  .nox-panel-right { display: none; }

  .nox-dashboard-grid { grid-template-columns: 1fr; }
  .nox-span-1,.nox-span-2,.nox-span-3,.nox-span-4,.nox-span-5,.nox-span-6,
  .nox-span-7,.nox-span-8,.nox-span-9,.nox-span-10,.nox-span-11,.nox-span-12 { grid-column: span 1; }

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


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


/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 8 — DATA VISUALIZATION
   ═══════════════════════════════════════════════════════════════════════════ */
   LAYER 8 — DATA VISUALIZATION (Pure CSS)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Horizontal Bar Chart ─── */

.nox-chart-bar-h {
  display: flex;
  flex-direction: column;
  gap: var(--nox-3);
}

.nox-bar-h {
  display: flex;
  align-items: center;
  gap: var(--nox-3);
}

.nox-bar-h-label {
  width: 70px;
  font-size: 11px;
  color: var(--nox-ink-2);
  flex-shrink: 0;
  text-align: right;
}

.nox-bar-h-track {
  flex: 1;
  height: 22px;
  background: var(--nox-bg-4);
  border-radius: 3px;
  overflow: hidden;
}

.nox-bar-h-fill {
  height: 100%;
  background: var(--nox-accent);
  border-radius: 3px;
  width: var(--val, 50%);
  transition: width 0.6s ease;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
  font-family: var(--nox-font-mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--nox-bg-0);
  min-width: 24px;
}

.nox-bar-h-fill.green  { background: var(--nox-green); }
.nox-bar-h-fill.red    { background: var(--nox-red); }
.nox-bar-h-fill.blue   { background: var(--nox-blue); }
.nox-bar-h-fill.yellow { background: var(--nox-yellow); }
.nox-bar-h-fill.purple { background: var(--nox-purple); }

.nox-bar-h-val {
  width: 40px;
  font-family: var(--nox-font-mono);
  font-size: 11px;
  color: var(--nox-ink-2);
  flex-shrink: 0;
  text-align: right;
}

/* ─── Vertical Bar Chart ─── */

.nox-chart-bar-v {
  display: flex;
  align-items: flex-end;
  gap: var(--nox-2);
  height: 160px;
  padding-top: var(--nox-5);
  border-bottom: 1px solid var(--nox-line);
}

.nox-bar-v-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}

.nox-bar-v {
  width: 100%;
  max-width: 36px;
  background: var(--nox-accent);
  border-radius: 3px 3px 0 0;
  height: var(--val, 50%);
  transition: height 0.6s ease, opacity var(--nox-ease);
  cursor: pointer;
  position: relative;
}

.nox-bar-v:hover { opacity: 0.8; }

.nox-bar-v::before {
  content: attr(data-val);
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--nox-font-mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--nox-ink-2);
  opacity: 0;
  transition: opacity var(--nox-ease);
  white-space: nowrap;
}

.nox-bar-v:hover::before { opacity: 1; }

.nox-bar-v.green  { background: var(--nox-green); }
.nox-bar-v.red    { background: var(--nox-red); }
.nox-bar-v.blue   { background: var(--nox-blue); }

.nox-bar-v-label {
  font-size: 9px;
  color: var(--nox-ink-4);
  text-align: center;
  white-space: nowrap;
}

/* ─── Donut / Pie Chart ─── */

.nox-chart-donut {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(
    var(--c1, var(--nox-green)) 0deg calc(var(--p1, 35) * 3.6deg),
    var(--c2, var(--nox-blue)) calc(var(--p1, 35) * 3.6deg) calc((var(--p1, 35) + var(--p2, 30)) * 3.6deg),
    var(--c3, var(--nox-yellow)) calc((var(--p1, 35) + var(--p2, 30)) * 3.6deg) calc((var(--p1, 35) + var(--p2, 30) + var(--p3, 20)) * 3.6deg),
    var(--c4, var(--nox-bg-4)) calc((var(--p1, 35) + var(--p2, 30) + var(--p3, 20)) * 3.6deg) 360deg
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.nox-chart-donut::before {
  content: '';
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  background: var(--nox-bg-2);
}

.nox-chart-donut-center {
  position: relative;
  z-index: 1;
  text-align: center;
}

.nox-chart-donut-val {
  font-family: var(--nox-font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--nox-ink);
  line-height: 1;
}

.nox-chart-donut-sub {
  font-family: var(--nox-font-mono);
  font-size: 8px;
  color: var(--nox-ink-4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.nox-chart-pie {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}

/* Chart Legend */
.nox-chart-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nox-chart-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--nox-ink-2);
}

.nox-chart-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.nox-chart-legend-val {
  margin-left: auto;
  font-family: var(--nox-font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--nox-ink);
}

/* ─── Sparkline ─── */

.nox-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 32px;
}

.nox-spark-bar {
  flex: 1;
  background: var(--nox-accent-s);
  border-radius: 2px 2px 0 0;
  height: var(--h, 50%);
  min-height: 2px;
  transition: all var(--nox-ease-fast);
  cursor: pointer;
}

.nox-spark-bar:hover { background: var(--nox-accent); }
.nox-spark-bar:last-child { background: var(--nox-accent); }

/* SVG Sparkline (inline SVG) */
.nox-sparkline-svg { width: 100%; height: 32px; }
.nox-sparkline-svg .line { fill: none; stroke: var(--nox-accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nox-sparkline-svg .area { fill: var(--nox-accent-s); }
.nox-sparkline-svg.up .line { stroke: var(--nox-green); }
.nox-sparkline-svg.up .area { fill: var(--nox-green-s); }
.nox-sparkline-svg.down .line { stroke: var(--nox-red); }
.nox-sparkline-svg.down .area { fill: var(--nox-red-s); }

/* ─── Gauge ─── */

.nox-gauge {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(
    var(--nox-accent) 0deg calc(var(--val, 65) * 3.6deg),
    var(--nox-bg-4) calc(var(--val, 65) * 3.6deg) 360deg
  );
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.nox-gauge::before {
  content: '';
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: var(--nox-bg-2);
}

.nox-gauge-label {
  position: relative;
  z-index: 1;
  text-align: center;
}

.nox-gauge-val {
  font-family: var(--nox-font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--nox-ink);
  line-height: 1;
}

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

/* Multi-color gauge */
.nox-gauge-multi {
  background: conic-gradient(
    var(--nox-red) 0deg 72deg,
    var(--nox-yellow) 72deg 144deg,
    var(--nox-green) 144deg 216deg,
    var(--nox-blue) 216deg 288deg,
    var(--nox-purple) 288deg 360deg
  );
}

/* ─── Stacked Bar ─── */

.nox-stacked-bar {
  display: flex;
  width: 100%;
  height: 20px;
  border-radius: 3px;
  overflow: hidden;
  gap: 1px;
}

.nox-stacked-seg {
  height: 100%;
  flex: var(--pct, 1);
  background: var(--color, var(--nox-accent));
  transition: opacity var(--nox-ease-fast);
  cursor: pointer;
  position: relative;
}

.nox-stacked-seg:hover { opacity: 0.75; }

.nox-stacked-seg:first-child { border-radius: 3px 0 0 3px; }
.nox-stacked-seg:last-child  { border-radius: 0 3px 3px 0; }

/* ─── Funnel ─── */

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

.nox-funnel-stage {
  width: var(--w, 100%);
  height: 36px;
  background: var(--color, var(--nox-accent-s));
  border-radius: var(--nox-r);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  transition: all var(--nox-ease);
  cursor: pointer;
  position: relative;
}

.nox-funnel-stage:hover { opacity: 0.85; transform: scaleX(1.02); }

.nox-funnel-stage-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--nox-ink);
}

.nox-funnel-stage-val {
  font-family: var(--nox-font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--nox-ink-2);
}

.nox-funnel-stage-drop {
  font-family: var(--nox-font-mono);
  font-size: 9px;
  color: var(--nox-red);
  margin-left: 8px;
}

/* ─── Heatmap ─── */

.nox-heatmap {
  display: grid;
  grid-template-columns: repeat(var(--cols, 7), 1fr);
  gap: 3px;
}

.nox-heatmap-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--nox-bg-4);
  opacity: var(--intensity, 0.2);
  cursor: pointer;
  transition: all var(--nox-ease-fast);
  min-width: 14px;
  min-height: 14px;
}

.nox-heatmap-cell:hover { transform: scale(1.3); z-index: 1; }

.nox-heatmap-cell.l1 { background: var(--nox-accent); opacity: 0.2; }
.nox-heatmap-cell.l2 { background: var(--nox-accent); opacity: 0.4; }
.nox-heatmap-cell.l3 { background: var(--nox-accent); opacity: 0.6; }
.nox-heatmap-cell.l4 { background: var(--nox-accent); opacity: 0.8; }
.nox-heatmap-cell.l5 { background: var(--nox-accent); opacity: 1; }

/* ─── Trend Indicator ─── */

.nox-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--nox-r);
  font-family: var(--nox-font-mono);
  font-size: 10px;
  font-weight: 600;
}

.nox-trend.up   { background: var(--nox-green-s); color: var(--nox-green); }
.nox-trend.down { background: var(--nox-red-s); color: var(--nox-red); }
.nox-trend.flat { background: var(--nox-bg-4); color: var(--nox-ink-4); }

/* ─── Comparison Bar ─── */

.nox-compare {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nox-compare-row {
  display: flex;
  align-items: center;
  gap: var(--nox-3);
}

.nox-compare-label { width: 80px; font-size: 11px; color: var(--nox-ink-3); flex-shrink: 0; }

.nox-compare-track {
  flex: 1;
  height: 8px;
  background: var(--nox-bg-4);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.nox-compare-actual {
  height: 100%;
  background: var(--nox-accent);
  border-radius: 4px;
  width: var(--actual, 60%);
  transition: width 0.6s ease;
}

.nox-compare-target {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: var(--target, 80%);
  width: 2px;
  background: var(--nox-ink-3);
  border-radius: 1px;
}


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


/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 9 — ADVANCED COMPONENTS (Kanban, Accordion, Chat, etc.)
   ═══════════════════════════════════════════════════════════════════════════ */
   LAYER 9 — ADVANCED COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Kanban Board ─── */

.nox-kanban {
  display: flex;
  gap: var(--nox-3);
  overflow-x: auto;
  padding-bottom: var(--nox-3);
  height: 100%;
  -webkit-overflow-scrolling: touch;
}

.nox-kanban-col {
  width: 260px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--nox-2);
  background: var(--nox-bg-1);
  border-radius: var(--nox-r-lg);
  padding: var(--nox-3);
  border: 1px solid var(--nox-line);
}

.nox-kanban-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  margin-bottom: var(--nox-1);
}

.nox-kanban-col-title {
  font-family: var(--nox-font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--nox-ink);
}

.nox-kanban-col-count {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--nox-bg-3);
  color: var(--nox-ink-3);
}

.nox-kanban-col-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--nox-2);
  overflow-y: auto;
}

.nox-kanban-card {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r);
  padding: 12px;
  cursor: pointer;
  transition: transform var(--nox-ease-fast), box-shadow var(--nox-ease-fast), border-color var(--nox-ease-fast);
  position: relative;
  overflow: hidden;
}

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

.nox-kanban-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--card-color, transparent);
}

.nox-kanban-card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--nox-ink);
  margin-bottom: 6px;
}

.nox-kanban-card-desc {
  font-size: 11px;
  color: var(--nox-ink-3);
  margin-bottom: 8px;
  line-height: 1.4;
}

.nox-kanban-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ─── Accordion / Collapse ─── */

.nox-accordion {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-lg);
  overflow: hidden;
}

.nox-accordion-item { border-bottom: 1px solid var(--nox-line); }
.nox-accordion-item:last-child { border-bottom: none; }

.nox-accordion-trigger {
  width: 100%;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--nox-bg-2);
  border: none;
  cursor: pointer;
  font-family: var(--nox-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--nox-ink);
  transition: background var(--nox-ease-fast);
}

.nox-accordion-trigger:hover { background: var(--nox-bg-3); }

.nox-accordion-icon {
  font-size: 12px;
  color: var(--nox-ink-4);
  transition: transform var(--nox-ease);
}

.nox-accordion-item.open .nox-accordion-icon { transform: rotate(180deg); }

.nox-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--nox-ease-slow);
  background: var(--nox-bg-1);
}

.nox-accordion-item.open .nox-accordion-body { max-height: 500px; }

.nox-accordion-content {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--nox-ink-2);
  line-height: 1.6;
}

/* ─── Chat / Messaging ─── */

.nox-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.nox-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--nox-4);
  display: flex;
  flex-direction: column;
  gap: var(--nox-3);
}

.nox-chat-msg {
  display: flex;
  gap: 10px;
  max-width: 75%;
  align-items: flex-start;
}

.nox-chat-msg.sent { margin-left: auto; flex-direction: row-reverse; }

.nox-chat-bubble {
  padding: 10px 14px;
  border-radius: 12px 12px 12px 4px;
  background: var(--nox-bg-3);
  font-size: 13px;
  color: var(--nox-ink);
  line-height: 1.5;
}

.nox-chat-msg.sent .nox-chat-bubble {
  background: var(--nox-accent);
  color: var(--nox-bg-0);
  border-radius: 12px 12px 4px 12px;
}

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

.nox-chat-msg.sent .nox-chat-time { text-align: right; }

.nox-chat-typing {
  display: flex;
  gap: 4px;
  padding: 10px 16px;
  align-items: center;
}

.nox-chat-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nox-ink-4);
  animation: nox-typing 1s ease infinite;
}

.nox-chat-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.nox-chat-typing-dot:nth-child(3) { animation-delay: 0.3s; }

@keyframes nox-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-5px); opacity: 1; }
}

.nox-chat-input {
  display: flex;
  gap: var(--nox-2);
  padding: var(--nox-3);
  border-top: 1px solid var(--nox-line);
  background: var(--nox-bg-1);
}

.nox-chat-input .nox-input { border-radius: 20px; padding-left: 16px; }

/* ─── Rating / Stars ─── */

.nox-rating {
  display: inline-flex;
  gap: 2px;
}

.nox-star {
  font-size: 16px;
  color: var(--nox-bg-5);
  cursor: pointer;
  transition: color var(--nox-ease-fast), transform var(--nox-ease-fast);
}

.nox-star:hover { transform: scale(1.2); }
.nox-star.filled { color: var(--nox-yellow); }
.nox-star.half { background: linear-gradient(90deg, var(--nox-yellow) 50%, var(--nox-bg-5) 50%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

.nox-rating-val {
  font-family: var(--nox-font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--nox-ink);
  margin-left: 6px;
}

.nox-rating-count {
  font-size: 11px;
  color: var(--nox-ink-4);
  margin-left: 4px;
}

/* ─── Calendar Grid ─── */

.nox-calendar {
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-lg);
  overflow: hidden;
}

.nox-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--nox-bg-2);
  border-bottom: 1px solid var(--nox-line);
}

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

.nox-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.nox-calendar-weekday {
  padding: 8px;
  text-align: center;
  font-family: var(--nox-font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--nox-ink-4);
  background: var(--nox-bg-3);
  border-bottom: 1px solid var(--nox-line);
}

.nox-calendar-cell {
  min-height: 80px;
  padding: 6px 8px;
  border-right: 1px solid var(--nox-line-2);
  border-bottom: 1px solid var(--nox-line-2);
  background: var(--nox-bg-2);
  cursor: pointer;
  transition: background var(--nox-ease-fast);
}

.nox-calendar-cell:nth-child(7n) { border-right: none; }
.nox-calendar-cell:hover { background: var(--nox-bg-3); }

.nox-calendar-cell.today { background: var(--nox-accent-s); }
.nox-calendar-cell.other-month { opacity: 0.3; }

.nox-calendar-date {
  font-family: var(--nox-font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--nox-ink-2);
  margin-bottom: 4px;
}

.nox-calendar-cell.today .nox-calendar-date {
  color: var(--nox-accent);
}

.nox-calendar-event {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--nox-accent-s);
  color: var(--nox-accent);
}

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

/* ─── File Upload Zone ─── */

.nox-upload {
  border: 2px dashed var(--nox-line);
  border-radius: var(--nox-r-lg);
  padding: var(--nox-8) var(--nox-4);
  text-align: center;
  cursor: pointer;
  transition: all var(--nox-ease);
  background: var(--nox-bg-1);
}

.nox-upload:hover, .nox-upload.dragover {
  border-color: var(--nox-accent);
  background: var(--nox-accent-s);
}

.nox-upload-icon {
  font-size: 32px;
  color: var(--nox-ink-4);
  margin-bottom: var(--nox-3);
}

.nox-upload-text {
  font-size: 13px;
  color: var(--nox-ink-2);
  margin-bottom: var(--nox-1);
}

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

/* File Item */
.nox-file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r);
  margin-bottom: var(--nox-2);
}

.nox-file-icon { font-size: 18px; color: var(--nox-ink-3); flex-shrink: 0; }
.nox-file-name { font-size: 12px; color: var(--nox-ink); flex: 1; }
.nox-file-size { font-family: var(--nox-font-mono); font-size: 10px; color: var(--nox-ink-4); }

/* ─── Command Palette / Spotlight ─── */

.nox-command-overlay {
  position: fixed;
  inset: 0;
  background: var(--nox-overlay);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 20vh;
  z-index: 1100;
}

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

.nox-command {
  width: 90%;
  max-width: 560px;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  box-shadow: var(--nox-shadow-xl);
  overflow: hidden;
  animation: nox-slide-up 0.15s ease;
}

.nox-command-input {
  width: 100%;
  padding: 16px 20px;
  border: none;
  background: transparent;
  font-family: var(--nox-font-body);
  font-size: 16px;
  color: var(--nox-ink);
  outline: none;
  border-bottom: 1px solid var(--nox-line);
}

.nox-command-list {
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
}

.nox-command-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--nox-r);
  cursor: pointer;
  transition: background var(--nox-ease-fast);
}

.nox-command-item:hover, .nox-command-item.selected {
  background: var(--nox-bg-3);
}

.nox-command-item-icon {
  font-size: 16px;
  color: var(--nox-ink-3);
  width: 20px;
  text-align: center;
}

.nox-command-item-label {
  font-size: 13px;
  color: var(--nox-ink);
  flex: 1;
}

.nox-command-item-shortcut {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  color: var(--nox-ink-4);
  padding: 2px 6px;
  background: var(--nox-bg-4);
  border-radius: 3px;
}

.nox-command-group {
  font-family: var(--nox-font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--nox-ink-4);
  padding: 10px 14px 4px;
}

/* ─── Notification Panel ─── */

.nox-notif-bell {
  position: relative;
  cursor: pointer;
}

.nox-notif-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nox-red);
  border: 2px solid var(--nox-bg-1);
}

.nox-notif-count {
  position: absolute;
  top: -6px;
  right: -8px;
  font-family: var(--nox-font-mono);
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
  background: var(--nox-red);
  color: #fff;
  min-width: 16px;
  text-align: center;
}

.nox-notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-height: 420px;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  box-shadow: var(--nox-shadow-xl);
  z-index: 500;
  overflow: hidden;
  display: none;
}

.nox-notif-panel.open { display: block; }

.nox-notif-panel-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--nox-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nox-notif-panel-body {
  max-height: 340px;
  overflow-y: auto;
}

.nox-notif-item {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--nox-line-2);
  transition: background var(--nox-ease-fast);
  cursor: pointer;
}

.nox-notif-item:hover { background: var(--nox-bg-3); }
.nox-notif-item.unread { background: var(--nox-accent-s); }

.nox-notif-item-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}

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

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

/* ─── Comment Thread ─── */

.nox-comments {
  display: flex;
  flex-direction: column;
  gap: var(--nox-4);
}

.nox-comment {
  display: flex;
  gap: 10px;
}

.nox-comment-body { flex: 1; }

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

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

.nox-comment-text {
  font-size: 13px;
  color: var(--nox-ink-2);
  line-height: 1.6;
  margin-top: 4px;
}

.nox-comment-actions {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}

.nox-comment-action {
  font-size: 11px;
  color: var(--nox-ink-4);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: color var(--nox-ease-fast);
}

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

.nox-comment-replies {
  margin-left: 46px;
  margin-top: var(--nox-3);
  padding-left: var(--nox-4);
  border-left: 2px solid var(--nox-line);
  display: flex;
  flex-direction: column;
  gap: var(--nox-3);
}

/* ─── Carousel / Scroll Snap ─── */

.nox-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: var(--nox-3);
  padding-bottom: var(--nox-3);
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.nox-carousel::-webkit-scrollbar { display: none; }

.nox-carousel-item {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  flex-shrink: 0;
  width: 280px;
}

.nox-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: var(--nox-3);
}

.nox-carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nox-bg-5);
  cursor: pointer;
  transition: all var(--nox-ease-fast);
}

.nox-carousel-dot.active { background: var(--nox-accent); width: 18px; border-radius: 3px; }


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


/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 10 — INDUSTRY PATTERNS (Pricing, Invoice, Profile, Settings, Errors)
   NOTE: Pricing table duplicated in website.css, tag both OK
   ═══════════════════════════════════════════════════════════════════════════ */
   LAYER 10 — INDUSTRY PATTERNS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Pricing Table ─── */

.nox-pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--nox-4);
}

.nox-pricing-card {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  padding: var(--nox-6);
  display: flex;
  flex-direction: column;
  text-align: center;
  transition: transform var(--nox-ease), box-shadow var(--nox-ease);
}

.nox-pricing-card:hover { transform: translateY(-2px); box-shadow: var(--nox-shadow-lg); }

.nox-pricing-card.featured {
  border-color: var(--nox-accent);
  position: relative;
}

.nox-pricing-card.featured::before {
  content: 'Popular';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--nox-font-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 12px;
  background: var(--nox-accent);
  color: var(--nox-bg-0);
  border-radius: 10px;
}

.nox-pricing-name {
  font-family: var(--nox-font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--nox-ink);
  margin-bottom: var(--nox-2);
}

.nox-pricing-price {
  font-family: var(--nox-font-display);
  font-size: 42px;
  font-weight: 700;
  color: var(--nox-ink);
  line-height: 1;
  margin-bottom: var(--nox-1);
}

.nox-pricing-price sup {
  font-size: 18px;
  vertical-align: super;
  margin-right: 2px;
}

.nox-pricing-period {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  color: var(--nox-ink-4);
  margin-bottom: var(--nox-5);
}

.nox-pricing-features {
  list-style: none;
  text-align: left;
  margin-bottom: var(--nox-6);
  flex: 1;
}

.nox-pricing-feature {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--nox-line-2);
  font-size: 12px;
  color: var(--nox-ink-2);
}

.nox-pricing-feature:last-child { border-bottom: none; }

.nox-pricing-check {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
}

.nox-pricing-check.yes { background: var(--nox-green-s); color: var(--nox-green); }
.nox-pricing-check.no  { background: var(--nox-bg-4); color: var(--nox-ink-4); }

/* ─── Invoice / Receipt ─── */

.nox-invoice {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  overflow: hidden;
}

.nox-invoice-header {
  padding: var(--nox-6);
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--nox-line);
}

.nox-invoice-title {
  font-family: var(--nox-font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--nox-ink);
}

.nox-invoice-meta {
  text-align: right;
}

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

.nox-invoice-meta-val {
  font-size: 13px;
  color: var(--nox-ink);
  font-weight: 500;
}

.nox-invoice-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--nox-6);
  padding: var(--nox-5) var(--nox-6);
  border-bottom: 1px solid var(--nox-line);
}

.nox-invoice-party-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: 6px;
}

.nox-invoice-party-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--nox-ink);
  margin-bottom: 2px;
}

.nox-invoice-party-detail {
  font-size: 12px;
  color: var(--nox-ink-3);
  line-height: 1.6;
}

.nox-invoice-totals {
  padding: var(--nox-5) var(--nox-6);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.nox-invoice-total-row {
  display: flex;
  gap: var(--nox-8);
  font-size: 13px;
  color: var(--nox-ink-2);
}

.nox-invoice-total-row.grand {
  font-family: var(--nox-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--nox-ink);
  padding-top: 8px;
  border-top: 2px solid var(--nox-line);
  margin-top: 4px;
}

/* ─── Profile Card (Large) ─── */

.nox-profile {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  overflow: hidden;
}

.nox-profile-banner {
  height: 80px;
  background: linear-gradient(135deg, var(--nox-accent-s), var(--nox-accent-g));
}

.nox-profile-info {
  padding: 0 var(--nox-5) var(--nox-5);
  margin-top: -30px;
  display: flex;
  gap: var(--nox-4);
  align-items: flex-end;
}

.nox-profile-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--nox-bg-4);
  border: 3px solid var(--nox-bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--nox-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--nox-accent);
  flex-shrink: 0;
}

.nox-profile-name {
  font-family: var(--nox-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--nox-ink);
}

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

.nox-profile-body {
  padding: 0 var(--nox-5) var(--nox-5);
}

/* ─── Settings Sections ─── */

.nox-settings-group {
  margin-bottom: var(--nox-6);
}

.nox-settings-group-title {
  font-family: var(--nox-font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--nox-ink);
  margin-bottom: var(--nox-3);
}

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

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

.nox-settings-item-label {
  font-size: 13px;
  color: var(--nox-ink);
}

.nox-settings-item-desc {
  font-size: 11px;
  color: var(--nox-ink-4);
  margin-top: 2px;
}

/* ─── Error Page ─── */

.nox-error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: var(--nox-8);
}

.nox-error-code {
  font-family: var(--nox-font-display);
  font-size: clamp(60px, 12vw, 120px);
  font-weight: 700;
  letter-spacing: -2px;
  color: var(--nox-ink-4);
  line-height: 1;
  margin-bottom: var(--nox-3);
}

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

.nox-error-text {
  font-size: 13px;
  color: var(--nox-ink-3);
  max-width: 400px;
  margin-bottom: var(--nox-6);
}


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


/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 11 — MOBILE COMPONENTS (Bottom nav, FAB, bottom sheet)
   ═══════════════════════════════════════════════════════════════════════════ */
   LAYER 11 — MOBILE COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Bottom Navigation Bar ─── */

.nox-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--nox-bg-1);
  border-top: 1px solid var(--nox-line);
  padding: 6px 0 env(safe-area-inset-bottom, 0);
  z-index: 800;
}

@media (max-width: 768px) {
  .nox-bottom-nav { display: flex; }
}

.nox-bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0;
  cursor: pointer;
  background: none;
  border: none;
  color: var(--nox-ink-4);
  font-size: 10px;
  transition: color var(--nox-ease-fast);
}

.nox-bottom-nav-item.active { color: var(--nox-accent); }

.nox-bottom-nav-icon {
  font-size: 18px;
  line-height: 1;
}

.nox-bottom-nav-label {
  font-family: var(--nox-font-body);
  font-weight: 500;
}

/* ─── Floating Action Button (FAB) ─── */

.nox-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--nox-accent);
  color: var(--nox-bg-0);
  border: none;
  font-size: 22px;
  cursor: pointer;
  box-shadow: var(--nox-shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 700;
  transition: transform var(--nox-ease), box-shadow var(--nox-ease);
}

.nox-fab:hover {
  transform: scale(1.08);
  box-shadow: var(--nox-shadow-xl);
}

@media (max-width: 768px) {
  .nox-fab { bottom: 80px; }
}

/* ─── Bottom Sheet / Drawer ─── */

.nox-bottom-sheet-overlay {
  position: fixed;
  inset: 0;
  background: var(--nox-overlay);
  z-index: 900;
  display: none;
}

.nox-bottom-sheet-overlay.open { display: block; }

.nox-bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--nox-bg-2);
  border-radius: var(--nox-r-xl) var(--nox-r-xl) 0 0;
  max-height: 85vh;
  z-index: 901;
  transform: translateY(100%);
  transition: transform var(--nox-ease-slow);
  display: flex;
  flex-direction: column;
}

.nox-bottom-sheet-overlay.open + .nox-bottom-sheet,
.nox-bottom-sheet.open {
  transform: translateY(0);
}

.nox-bottom-sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--nox-bg-5);
  border-radius: 2px;
  margin: 10px auto;
  flex-shrink: 0;
}

.nox-bottom-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--nox-4);
}


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


/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 12 — VISUAL EFFECTS (Glass, patterns, gradients, extra colors)
   ═══════════════════════════════════════════════════════════════════════════ */
   LAYER 12 — VISUAL EFFECTS & EXTRAS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Glassmorphism ─── */

.nox-glass {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.08);
}

[data-theme="light"] .nox-glass {
  background: rgba(255,255,255,0.65);
  border-color: rgba(255,255,255,0.4);
}

/* ─── Pattern Backgrounds ─── */

.nox-bg-dots {
  background-image: radial-gradient(circle, var(--nox-line) 1px, transparent 1px);
  background-size: 20px 20px;
}

.nox-bg-grid {
  background-image:
    linear-gradient(var(--nox-line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--nox-line-2) 1px, transparent 1px);
  background-size: 40px 40px;
}

.nox-bg-diagonal {
  background-image: repeating-linear-gradient(
    135deg, transparent, transparent 40px,
    var(--nox-line-2) 40px, var(--nox-line-2) 41px
  );
}

/* ─── Gradient Text ─── */

.nox-text-gradient {
  background: linear-gradient(135deg, var(--nox-accent), var(--nox-accent-alt));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Additional Color Palette ─── */

:root,
[data-theme="dark"] {
  --nox-orange:   #D97706;
  --nox-orange-s: rgba(217,119,6,0.12);
  --nox-pink:     #DB2777;
  --nox-pink-s:   rgba(219,39,119,0.12);
  --nox-cyan:     #0891B2;
  --nox-cyan-s:   rgba(8,145,178,0.12);
  --nox-lime:     #65A30D;
  --nox-lime-s:   rgba(101,163,13,0.12);
  --nox-indigo:   #4F46E5;
  --nox-indigo-s: rgba(79,70,229,0.12);
}

[data-theme="light"] {
  --nox-orange:   #B45309;
  --nox-orange-s: rgba(180,83,9,0.08);
  --nox-pink:     #BE185D;
  --nox-pink-s:   rgba(190,24,93,0.08);
  --nox-cyan:     #0E7490;
  --nox-cyan-s:   rgba(14,116,144,0.08);
  --nox-lime:     #4D7C0F;
  --nox-lime-s:   rgba(77,124,15,0.08);
  --nox-indigo:   #4338CA;
  --nox-indigo-s: rgba(67,56,202,0.08);
}

.nox-text-orange { color: var(--nox-orange); }
.nox-text-pink   { color: var(--nox-pink); }
.nox-text-cyan   { color: var(--nox-cyan); }
.nox-text-lime   { color: var(--nox-lime); }
.nox-text-indigo { color: var(--nox-indigo); }

.nox-bg-orange-s { background: var(--nox-orange-s); }
.nox-bg-pink-s   { background: var(--nox-pink-s); }
.nox-bg-cyan-s   { background: var(--nox-cyan-s); }
.nox-bg-lime-s   { background: var(--nox-lime-s); }
.nox-bg-indigo-s { background: var(--nox-indigo-s); }

.nox-badge.orange { background: var(--nox-orange-s); color: var(--nox-orange); border-color: rgba(217,119,6,0.2); }
.nox-badge.pink   { background: var(--nox-pink-s); color: var(--nox-pink); border-color: rgba(219,39,119,0.2); }
.nox-badge.cyan   { background: var(--nox-cyan-s); color: var(--nox-cyan); border-color: rgba(8,145,178,0.2); }
.nox-badge.lime   { background: var(--nox-lime-s); color: var(--nox-lime); border-color: rgba(101,163,13,0.2); }
.nox-badge.indigo { background: var(--nox-indigo-s); color: var(--nox-indigo); border-color: rgba(79,70,229,0.2); }

/* ─── Card Hover Variants ─── */

.nox-card.hover-lift:hover { transform: translateY(-3px); box-shadow: var(--nox-shadow-lg); }
.nox-card.hover-glow:hover { box-shadow: 0 0 20px var(--nox-accent-s), var(--nox-shadow); }
.nox-card.hover-border:hover { border-color: var(--nox-accent); }

/* ─── Aspect Ratio Helpers ─── */
.nox-aspect-square  { aspect-ratio: 1; }
.nox-aspect-video   { aspect-ratio: 16/9; }
.nox-aspect-wide    { aspect-ratio: 21/9; }

/* ─── Print Styles ─── */
@media print {
  .nox-sidebar, .nox-sidebar-compact, .nox-topbar, .nox-bottom-nav,
  .nox-fab, .nox-toast-container, .nox-modal-overlay, .nox-loading { display: none !important; }
  .nox-content { overflow: visible !important; padding: 0 !important; }
  .nox-card { break-inside: avoid; box-shadow: none !important; border: 1px solid #ddd !important; }
  body { background: white !important; color: black !important; }
  .nox-invoice { border: 1px solid #ccc !important; }
  .nox-invoice-header, .nox-invoice-parties { border-color: #ddd !important; }
}


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


/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 13 — ROLE-BASED & FIELD COMPONENTS (Time clock, photos, signature)
   ═══════════════════════════════════════════════════════════════════════════ */
   LAYER 13 — ROLE-BASED & FIELD COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Time Clock ─── */

.nox-timeclock {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  padding: var(--nox-6);
  text-align: center;
}

.nox-timeclock-display {
  font-family: var(--nox-font-display);
  font-size: clamp(48px, 10vw, 72px);
  font-weight: 700;
  letter-spacing: -2px;
  color: var(--nox-ink);
  line-height: 1;
  font-feature-settings: 'tnum';
  margin-bottom: var(--nox-2);
}

.nox-timeclock-status {
  font-family: var(--nox-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: var(--nox-5);
}

.nox-timeclock-status.clocked-in { color: var(--nox-green); }
.nox-timeclock-status.clocked-out { color: var(--nox-ink-4); }
.nox-timeclock-status.on-break { color: var(--nox-yellow); }

.nox-timeclock-btn {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 3px solid var(--nox-accent);
  background: var(--nox-accent-s);
  color: var(--nox-accent);
  font-family: var(--nox-font-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all var(--nox-ease);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--nox-4);
}

.nox-timeclock-btn:hover {
  background: var(--nox-accent);
  color: var(--nox-bg-0);
  transform: scale(1.05);
  box-shadow: 0 0 30px var(--nox-accent-g);
}

.nox-timeclock-btn.active {
  border-color: var(--nox-red);
  background: var(--nox-red-s);
  color: var(--nox-red);
}

.nox-timeclock-btn.active:hover {
  background: var(--nox-red);
  color: #fff;
  box-shadow: 0 0 30px rgba(181,69,58,0.3);
}

.nox-timeclock-summary {
  display: flex;
  justify-content: center;
  gap: var(--nox-6);
  margin-top: var(--nox-4);
}

.nox-timeclock-stat-label {
  font-family: var(--nox-font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--nox-ink-4);
  margin-bottom: 2px;
}

.nox-timeclock-stat-val {
  font-family: var(--nox-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--nox-ink);
}

/* ─── Checklist (Field-ready) ─── */

.nox-checklist {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nox-check-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r);
  cursor: pointer;
  transition: all var(--nox-ease-fast);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

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

.nox-check-item:active { transform: scale(0.98); }

.nox-check-item.checked {
  background: var(--nox-green-s);
  border-color: rgba(58,138,92,0.2);
}

.nox-check-box {
  width: 24px;
  height: 24px;
  border: 2px solid var(--nox-line);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--nox-ease-fast);
  font-size: 14px;
  color: transparent;
}

.nox-check-item.checked .nox-check-box {
  background: var(--nox-green);
  border-color: var(--nox-green);
  color: #fff;
}

.nox-check-text {
  flex: 1;
  font-size: 14px;
  color: var(--nox-ink);
}

.nox-check-item.checked .nox-check-text {
  text-decoration: line-through;
  color: var(--nox-ink-3);
}

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

.nox-check-required::after {
  content: '*';
  color: var(--nox-red);
  margin-left: 4px;
}

/* ─── Photo Grid (Before/After) ─── */

.nox-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--nox-2);
}

.nox-photo-item {
  aspect-ratio: 1;
  background: var(--nox-bg-3);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--nox-ease);
}

.nox-photo-item:hover { border-color: var(--nox-accent); }

.nox-photo-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nox-photo-item-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4px 8px;
  background: rgba(0,0,0,0.6);
  font-family: var(--nox-font-mono);
  font-size: 9px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
}

.nox-photo-add {
  border: 2px dashed var(--nox-line);
  background: transparent;
  color: var(--nox-ink-4);
  font-size: 24px;
}

.nox-photo-add:hover {
  border-color: var(--nox-accent);
  color: var(--nox-accent);
  background: var(--nox-accent-s);
}

/* Before/After */
.nox-photo-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  border-radius: var(--nox-r-lg);
  overflow: hidden;
}

/* ─── Signature Pad ─── */

.nox-signature {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-lg);
  overflow: hidden;
}

.nox-signature-pad {
  width: 100%;
  height: 150px;
  background: var(--nox-bg-1);
  border-bottom: 1px solid var(--nox-line);
  position: relative;
  cursor: crosshair;
}

.nox-signature-pad::after {
  content: '';
  position: absolute;
  bottom: 30px;
  left: 20px;
  right: 20px;
  height: 1px;
  background: var(--nox-line);
}

.nox-signature-label {
  font-family: var(--nox-font-mono);
  font-size: 9px;
  color: var(--nox-ink-4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: absolute;
  bottom: 12px;
  left: 20px;
}

.nox-signature-actions {
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ─── Swipe Card (Mobile Jobs) ─── */

.nox-swipe-card {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  padding: var(--nox-5);
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.nox-swipe-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--nox-3);
}

.nox-swipe-card-title {
  font-family: var(--nox-font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--nox-ink);
}

.nox-swipe-card-sub {
  font-size: 12px;
  color: var(--nox-ink-3);
  margin-top: 2px;
}

.nox-swipe-card-body {
  margin-bottom: var(--nox-4);
}

.nox-swipe-card-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--nox-2);
}

.nox-swipe-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border-radius: var(--nox-r);
  background: var(--nox-bg-3);
  border: 1px solid var(--nox-line);
  cursor: pointer;
  transition: all var(--nox-ease-fast);
  font-size: 10px;
  color: var(--nox-ink-3);
  -webkit-tap-highlight-color: transparent;
}

.nox-swipe-action:active { transform: scale(0.95); }

.nox-swipe-action-icon {
  font-size: 18px;
}

.nox-swipe-action.call { color: var(--nox-green); }
.nox-swipe-action.navigate { color: var(--nox-blue); }
.nox-swipe-action.complete { color: var(--nox-accent); }
.nox-swipe-action.danger { color: var(--nox-red); }

/* ─── Map Placeholder ─── */

.nox-map {
  background: var(--nox-bg-3);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-lg);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.nox-map-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--nox-ink-4);
}

.nox-map-placeholder-icon { font-size: 32px; opacity: 0.5; }
.nox-map-placeholder-text { font-size: 12px; }

.nox-map-pin {
  position: absolute;
  width: 24px;
  height: 24px;
  background: var(--nox-accent);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid var(--nox-bg-0);
  box-shadow: var(--nox-shadow);
}

/* ─── Offline / Connection Indicator ─── */

.nox-offline-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px;
  background: var(--nox-red-s);
  color: var(--nox-red);
  font-family: var(--nox-font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nox-offline-bar.online {
  background: var(--nox-green-s);
  color: var(--nox-green);
}

/* ─── Onboarding Wizard ─── */

.nox-wizard {
  max-width: 600px;
  margin: 0 auto;
}

.nox-wizard-header {
  text-align: center;
  margin-bottom: var(--nox-6);
}

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

.nox-wizard-desc {
  font-size: 14px;
  color: var(--nox-ink-3);
  max-width: 400px;
  margin: 0 auto;
}

.nox-wizard-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: var(--nox-6);
}

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

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

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

.nox-wizard-step.completed .nox-wizard-dot {
  border-color: var(--nox-green);
  background: var(--nox-green);
  color: #fff;
}

.nox-wizard-line {
  width: 40px;
  height: 2px;
  background: var(--nox-line);
  flex-shrink: 0;
}

.nox-wizard-step.completed + .nox-wizard-step .nox-wizard-line,
.nox-wizard-step.completed .nox-wizard-line { background: var(--nox-green); }

.nox-wizard-card {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  padding: var(--nox-6);
}

.nox-wizard-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--nox-6);
}

/* ─── Quick Actions (Field FAB Menu) ─── */

.nox-quick-actions {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 700;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: var(--nox-2);
}

.nox-quick-actions-menu {
  display: flex;
  flex-direction: column;
  gap: var(--nox-2);
  align-items: flex-end;
  opacity: 0;
  transform: translateY(10px);
  transition: all var(--nox-ease);
  pointer-events: none;
}

.nox-quick-actions.open .nox-quick-actions-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.nox-quick-action-item {
  display: flex;
  align-items: center;
  gap: var(--nox-2);
  padding: 8px 14px;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: 24px;
  box-shadow: var(--nox-shadow-lg);
  cursor: pointer;
  transition: all var(--nox-ease-fast);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  color: var(--nox-ink);
}

.nox-quick-action-item:hover {
  background: var(--nox-bg-3);
  transform: translateX(-4px);
}

/* ─── Job Timer (Active Work) ─── */

.nox-timer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: var(--nox-green-s);
  border: 1px solid rgba(58,138,92,0.2);
  border-radius: 20px;
  font-family: var(--nox-font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--nox-green);
}

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

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

.nox-timer.paused .nox-timer-dot {
  background: var(--nox-yellow);
  animation: none;
}

/* ─── Customer Account Card ─── */

.nox-account-card {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  overflow: hidden;
}

.nox-account-header {
  padding: var(--nox-5);
  display: flex;
  gap: var(--nox-4);
  align-items: center;
  border-bottom: 1px solid var(--nox-line);
}

.nox-account-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--nox-accent-s);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--nox-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--nox-accent);
  flex-shrink: 0;
}

.nox-account-name {
  font-family: var(--nox-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--nox-ink);
}

.nox-account-id {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  color: var(--nox-ink-4);
  margin-top: 2px;
}

.nox-account-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--nox-line);
}

.nox-account-stat {
  padding: 14px;
  text-align: center;
  border-right: 1px solid var(--nox-line);
}

.nox-account-stat:last-child { border-right: none; }

.nox-account-stat-val {
  font-family: var(--nox-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--nox-ink);
}

.nox-account-stat-label {
  font-family: var(--nox-font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--nox-ink-4);
  margin-top: 2px;
}

.nox-account-body { padding: var(--nox-4); }

/* ─── Print Report Layout ─── */

.nox-report {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  overflow: hidden;
}

.nox-report-header {
  padding: var(--nox-6);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid var(--nox-line);
}

.nox-report-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nox-report-title {
  font-family: var(--nox-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--nox-ink);
}

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

.nox-report-section {
  padding: var(--nox-5) var(--nox-6);
  border-bottom: 1px solid var(--nox-line);
}

.nox-report-section:last-child { border-bottom: none; }

.nox-report-section-title {
  font-family: var(--nox-font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--nox-ink);
  margin-bottom: var(--nox-3);
}

.nox-report-footer {
  padding: var(--nox-4) var(--nox-6);
  background: var(--nox-bg-3);
  font-family: var(--nox-font-mono);
  font-size: 9px;
  color: var(--nox-ink-4);
  display: flex;
  justify-content: space-between;
}

/* ─── PWA Install Prompt ─── */

.nox-install-prompt {
  position: fixed;
  bottom: var(--nox-6);
  left: 50%;
  transform: translateX(-50%);
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  box-shadow: var(--nox-shadow-xl);
  padding: var(--nox-4) var(--nox-5);
  display: flex;
  align-items: center;
  gap: var(--nox-3);
  z-index: 1000;
  max-width: 400px;
  width: 90%;
  animation: nox-slide-up 0.3s ease;
}

.nox-install-prompt.hidden { display: none; }

.nox-install-icon {
  width: 40px;
  height: 40px;
  background: var(--nox-accent);
  border-radius: var(--nox-r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--nox-bg-0);
  flex-shrink: 0;
}

.nox-install-text {
  flex: 1;
}

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

.nox-install-desc {
  font-size: 11px;
  color: var(--nox-ink-3);
  margin-top: 1px;
}

/* ─── Mobile touch enhancements ─── */

@media (max-width: 768px) {
  .nox-swipe-card { margin-bottom: var(--nox-3); }
  .nox-swipe-card-actions { grid-template-columns: repeat(4, 1fr); }

  .nox-check-item { padding: 14px 16px; min-height: 52px; }
  .nox-check-box { width: 28px; height: 28px; }
  .nox-check-text { font-size: 15px; }

  .nox-timeclock-btn { width: 140px; height: 140px; font-size: 16px; }

  .nox-photo-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }

  .nox-quick-actions { bottom: 80px; }

  .nox-wizard { padding: 0 var(--nox-3); }
  .nox-wizard-card { padding: var(--nox-4); }
}


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


/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 15 — FINAL ADDITIONS (Bulk actions, sortable, callouts, changelog)
   ═══════════════════════════════════════════════════════════════════════════ */
   LAYER 15 — FINAL ADDITIONS (Bulk Actions, Inline Edit, Sortable, Callouts, etc.)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Bulk Actions Bar ─── */

.nox-bulk-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--nox-bg-2);
  border-top: 1px solid var(--nox-line);
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 50;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.3);
  animation: nox-slide-up 0.2s ease;
}

.nox-bulk-bar.hidden { display: none; }

.nox-bulk-count {
  font-family: var(--nox-font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--nox-accent);
  padding: 4px 10px;
  background: var(--nox-accent-s);
  border-radius: 10px;
}

.nox-bulk-actions {
  display: flex;
  gap: 6px;
  flex: 1;
}

.nox-bulk-dismiss {
  margin-left: auto;
  cursor: pointer;
  color: var(--nox-ink-4);
  font-size: 14px;
  background: none;
  border: none;
  padding: 4px;
  transition: color var(--nox-ease-fast);
}

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

/* ─── Row Selection (Checkbox Column) ─── */

.nox-table-select td:first-child,
.nox-table-select th:first-child {
  width: 40px;
  text-align: center;
}

.nox-row-check {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--nox-line);
  border-radius: 4px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: var(--nox-bg-1);
  transition: all var(--nox-ease-fast);
  display: inline-block;
  position: relative;
  vertical-align: middle;
}

.nox-row-check:checked {
  background: var(--nox-accent);
  border-color: var(--nox-accent);
}

.nox-row-check: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-table tbody tr.selected { background: var(--nox-accent-s); }

/* ─── Sortable Table Headers ─── */

.nox-th-sort {
  cursor: pointer;
  user-select: none;
  transition: color var(--nox-ease-fast);
}

.nox-th-sort:hover { color: var(--nox-ink-2); }

.nox-th-sort::after {
  content: ' ↕';
  font-size: 9px;
  color: var(--nox-ink-4);
  opacity: 0.5;
}

.nox-th-sort.asc::after { content: ' ↑'; opacity: 1; color: var(--nox-accent); }
.nox-th-sort.desc::after { content: ' ↓'; opacity: 1; color: var(--nox-accent); }

/* ─── Inline Edit ─── */

.nox-inline-edit {
  cursor: pointer;
  padding: 2px 6px;
  margin: -2px -6px;
  border-radius: var(--nox-r);
  border: 1px solid transparent;
  transition: all var(--nox-ease-fast);
}

.nox-inline-edit:hover {
  background: var(--nox-bg-3);
  border-color: var(--nox-line);
}

.nox-inline-edit.editing {
  background: var(--nox-bg-1);
  border-color: var(--nox-accent);
  box-shadow: 0 0 0 2px var(--nox-accent-s);
  outline: none;
}

/* ─── Tag Input ─── */

.nox-tag-input {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 8px;
  background: var(--nox-bg-1);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r);
  min-height: 38px;
  align-items: center;
  cursor: text;
  transition: border-color var(--nox-ease);
}

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

.nox-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--nox-bg-4);
  border-radius: 3px;
  font-size: 11px;
  color: var(--nox-ink-2);
}

.nox-tag-remove {
  cursor: pointer;
  font-size: 12px;
  color: var(--nox-ink-4);
  line-height: 1;
  transition: color var(--nox-ease-fast);
  background: none;
  border: none;
  padding: 0;
}

.nox-tag-remove:hover { color: var(--nox-red); }

.nox-tag-input input {
  border: none;
  background: none;
  outline: none;
  font-size: 12px;
  color: var(--nox-ink);
  flex: 1;
  min-width: 80px;
  padding: 2px 4px;
}

/* ─── Callout / Blockquote ─── */

.nox-callout {
  padding: 14px 18px;
  border-radius: var(--nox-r-lg);
  margin: 16px 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--nox-ink-2);
  border-left: 3px solid var(--nox-line);
  background: var(--nox-bg-3);
}

.nox-callout.accent { border-left-color: var(--nox-accent); background: var(--nox-accent-s); }
.nox-callout.green  { border-left-color: var(--nox-green); background: var(--nox-green-s); }
.nox-callout.red    { border-left-color: var(--nox-red); background: var(--nox-red-s); }
.nox-callout.yellow { border-left-color: var(--nox-yellow); background: var(--nox-yellow-s); }
.nox-callout.blue   { border-left-color: var(--nox-blue); background: var(--nox-blue-s); }

.nox-callout-title {
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  color: var(--nox-ink);
}

/* ─── Date Range Display ─── */

.nox-date-range {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--nox-bg-3);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r);
  cursor: pointer;
  transition: border-color var(--nox-ease-fast);
}

.nox-date-range:hover { border-color: var(--nox-accent); }

.nox-date-range-val {
  font-family: var(--nox-font-mono);
  font-size: 11px;
  color: var(--nox-ink);
  font-weight: 500;
}

.nox-date-range-sep {
  color: var(--nox-ink-4);
  font-size: 10px;
}

.nox-date-range-icon {
  color: var(--nox-ink-4);
  font-size: 13px;
}

/* ─── Keyboard Shortcut Hints ─── */

.nox-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 2px 6px;
  background: var(--nox-bg-4);
  border: 1px solid var(--nox-line);
  border-radius: 4px;
  font-family: var(--nox-font-mono);
  font-size: 10px;
  color: var(--nox-ink-3);
  line-height: 1.4;
  box-shadow: 0 1px 0 var(--nox-bg-5);
}

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

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

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

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

.nox-shortcut-plus {
  font-size: 10px;
  color: var(--nox-ink-4);
}

/* ─── Expandable Table Row ─── */

.nox-table-expandable tbody tr.expandable { cursor: pointer; }

.nox-table-expandable tbody tr.expandable td:first-child::before {
  content: '▸';
  display: inline-block;
  transition: transform var(--nox-ease);
  margin-right: 6px;
  font-size: 10px;
  color: var(--nox-ink-4);
}

.nox-table-expandable tbody tr.expandable.expanded td:first-child::before {
  transform: rotate(90deg);
}

.nox-table-expandable tbody tr.expand-content { display: none; }
.nox-table-expandable tbody tr.expandable.expanded + tr.expand-content { display: table-row; }
.nox-table-expandable tbody tr.expand-content td {
  padding: 14px 18px 14px 40px;
  background: var(--nox-bg-1);
  border-bottom: 1px solid var(--nox-line);
}

/* ─── Changelog / What's New ─── */

.nox-changelog {
  display: flex;
  flex-direction: column;
  gap: var(--nox-5);
}

.nox-changelog-entry {
  padding-left: 20px;
  border-left: 2px solid var(--nox-line);
  position: relative;
}

.nox-changelog-entry::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nox-accent);
}

.nox-changelog-version {
  font-family: var(--nox-font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--nox-ink);
  margin-bottom: 2px;
}

.nox-changelog-date {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  color: var(--nox-ink-4);
  margin-bottom: 8px;
}

.nox-changelog-list {
  font-size: 13px;
  color: var(--nox-ink-2);
  line-height: 1.7;
  padding-left: 16px;
}

.nox-changelog-list li { margin-bottom: 4px; }

.nox-changelog-tag {
  display: inline-block;
  font-family: var(--nox-font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 1px 6px;
  border-radius: 3px;
  margin-right: 6px;
}

.nox-changelog-tag.new     { background: var(--nox-green-s); color: var(--nox-green); }
.nox-changelog-tag.fix     { background: var(--nox-red-s); color: var(--nox-red); }
.nox-changelog-tag.improve { background: var(--nox-blue-s); color: var(--nox-blue); }
.nox-changelog-tag.change  { background: var(--nox-yellow-s); color: var(--nox-yellow); }

/* ─── Help Widget (Floating) ─── */

.nox-help-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--nox-accent);
  color: var(--nox-bg-0);
  border: none;
  font-size: 20px;
  cursor: pointer;
  box-shadow: var(--nox-shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 600;
  transition: transform var(--nox-ease), box-shadow var(--nox-ease);
}

.nox-help-btn:hover {
  transform: scale(1.08);
  box-shadow: var(--nox-shadow-xl);
}

@media (max-width: 768px) {
  .nox-help-btn { bottom: 80px; }
  .nox-bulk-bar { bottom: 56px; }
}

/* ─── Status Indicator (System Health) ─── */

.nox-system-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--nox-r);
  font-family: var(--nox-font-mono);
  font-size: 11px;
}

.nox-system-status.operational {
  background: var(--nox-green-s);
  color: var(--nox-green);
}

.nox-system-status.degraded {
  background: var(--nox-yellow-s);
  color: var(--nox-yellow);
}

.nox-system-status.down {
  background: var(--nox-red-s);
  color: var(--nox-red);
}

.nox-system-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.nox-system-status.operational .nox-system-dot {
  animation: nox-pulse 2.5s ease infinite;
}

/* ─── Drag Handle ─── */

.nox-drag-handle {
  cursor: grab;
  color: var(--nox-ink-4);
  font-size: 14px;
  padding: 4px;
  opacity: 0.4;
  transition: opacity var(--nox-ease-fast);
  user-select: none;
}

.nox-drag-handle:hover { opacity: 1; }
.nox-drag-handle:active { cursor: grabbing; }

/* ─── Color Swatch (for branding settings) ─── */

.nox-color-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.nox-color-swatch {
  width: 32px;
  height: 32px;
  border-radius: var(--nox-r);
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--nox-ease-fast);
  position: relative;
}

.nox-color-swatch:hover { transform: scale(1.15); }

.nox-color-swatch.selected {
  border-color: var(--nox-ink);
  box-shadow: 0 0 0 2px var(--nox-bg-0), 0 0 0 4px var(--nox-ink);
}

.nox-color-swatch.selected::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* ─── Number Input (Stepper) ─── */

.nox-number-input {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r);
  overflow: hidden;
}

.nox-number-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nox-bg-3);
  border: none;
  color: var(--nox-ink-3);
  cursor: pointer;
  font-size: 14px;
  transition: all var(--nox-ease-fast);
}

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

.nox-number-val {
  width: 48px;
  text-align: center;
  font-family: var(--nox-font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--nox-ink);
  background: var(--nox-bg-1);
  border: none;
  border-left: 1px solid var(--nox-line);
  border-right: 1px solid var(--nox-line);
  padding: 4px;
  outline: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   NOX v3 EXPANSION — Colors, Utilities, Responsive Prefixes
   ═══════════════════════════════════════════════════════════════════════════ */

/* ============================================================
   NOX DESIGN SYSTEM — CSS EXPANSION


/* ═══════════════════════════════════════════════════════════════════════════
   BLOCK E: EXPANDED FORM COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════ */
   BLOCK E — EXPANDED FORM COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Radio Buttons (Custom) ─── */

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

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

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

.nox-radio input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nox-accent);
}

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

/* Radio Card */
.nox-radio-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid var(--nox-line);
  border-radius: var(--nox-r-lg);
  cursor: pointer;
  transition: all var(--nox-ease-fast);
  background: var(--nox-bg-2);
  user-select: none;
}

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

.nox-radio-card.checked {
  border-color: var(--nox-accent);
  background: var(--nox-accent-s);
}

.nox-radio-card-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--nox-ink);
}

.nox-radio-card-desc {
  font-size: 11px;
  color: var(--nox-ink-3);
  margin-top: 1px;
}

/* Segmented Control (Radio Group) */
.nox-segmented {
  display: inline-flex;
  background: var(--nox-bg-3);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-lg);
  padding: 3px;
  gap: 2px;
}

.nox-segmented-option {
  padding: 6px 16px;
  border-radius: var(--nox-r);
  font-family: var(--nox-font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--nox-ink-3);
  cursor: pointer;
  border: none;
  background: none;
  transition: all var(--nox-ease-fast);
  white-space: nowrap;
}

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

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

/* ─── Range Slider ─── */

.nox-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--nox-bg-5);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}

.nox-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--nox-accent);
  border: 2px solid var(--nox-bg-0);
  box-shadow: var(--nox-shadow-sm);
  cursor: pointer;
  transition: transform var(--nox-ease-fast);
}

.nox-range::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.nox-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--nox-accent);
  border: 2px solid var(--nox-bg-0);
  box-shadow: var(--nox-shadow-sm);
  cursor: pointer;
}

.nox-range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
}

.nox-range::-moz-range-track {
  height: 4px;
  background: var(--nox-bg-5);
  border-radius: 2px;
  border: none;
}

.nox-range:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px var(--nox-accent-s);
}

/* Range with label */
.nox-range-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nox-range-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--nox-font-mono);
  font-size: 10px;
  color: var(--nox-ink-4);
}

.nox-range-value {
  font-family: var(--nox-font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--nox-ink);
  text-align: center;
}

/* ─── Input Group (Prepend/Append) ─── */

.nox-input-addon {
  display: flex;
  align-items: stretch;
}

.nox-input-addon .nox-input {
  border-radius: 0;
  border-right: none;
}

.nox-input-addon .nox-input:first-child {
  border-radius: var(--nox-r) 0 0 var(--nox-r);
}

.nox-input-addon .nox-input:last-child {
  border-radius: 0 var(--nox-r) var(--nox-r) 0;
  border-right: 1px solid var(--nox-line);
}

.nox-input-addon .nox-input:only-child {
  border-radius: var(--nox-r);
  border-right: 1px solid var(--nox-line);
}

.nox-input-prepend, .nox-input-append {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--nox-bg-3);
  border: 1px solid var(--nox-line);
  font-family: var(--nox-font-mono);
  font-size: 12px;
  color: var(--nox-ink-3);
  white-space: nowrap;
  flex-shrink: 0;
}

.nox-input-prepend {
  border-right: none;
  border-radius: var(--nox-r) 0 0 var(--nox-r);
}

.nox-input-append {
  border-left: none;
  border-radius: 0 var(--nox-r) var(--nox-r) 0;
}

.nox-input-prepend + .nox-input { border-radius: 0; }
.nox-input-prepend + .nox-input:last-child { border-radius: 0 var(--nox-r) var(--nox-r) 0; }

/* ─── Floating Label ─── */

.nox-float-label {
  position: relative;
}

.nox-float-label .nox-input,
.nox-float-label .nox-select,
.nox-float-label .nox-textarea {
  padding-top: 20px;
  padding-bottom: 6px;
}

.nox-float-label label {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--nox-ink-4);
  pointer-events: none;
  transition: all var(--nox-ease);
  transform-origin: left center;
}

.nox-float-label .nox-input:focus ~ label,
.nox-float-label .nox-input:not(:placeholder-shown) ~ label,
.nox-float-label .nox-select:focus ~ label,
.nox-float-label .nox-textarea:focus ~ label,
.nox-float-label .nox-textarea:not(:placeholder-shown) ~ label {
  top: 8px;
  transform: translateY(0);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--nox-accent);
}

/* ─── Form Validation States ─── */

.nox-input.error, .nox-select.error, .nox-textarea.error {
  border-color: var(--nox-red);
}

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

.nox-input.success, .nox-select.success, .nox-textarea.success {
  border-color: var(--nox-green);
}

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

.nox-input.warning, .nox-select.warning, .nox-textarea.warning {
  border-color: var(--nox-yellow);
}

.nox-field-error {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  color: var(--nox-red);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nox-field-success {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  color: var(--nox-green);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.nox-field-hint {
  font-size: 11px;
  color: var(--nox-ink-4);
  margin-top: 4px;
}

.nox-field-required::after {
  content: ' *';
  color: var(--nox-red);
}

/* Character counter */
.nox-char-count {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  color: var(--nox-ink-4);
  text-align: right;
  margin-top: 4px;
}

.nox-char-count.over { color: var(--nox-red); }

/* ─── OTP / PIN Input ─── */

.nox-otp {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.nox-otp-digit {
  width: 48px;
  height: 56px;
  text-align: center;
  font-family: var(--nox-font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--nox-ink);
  background: var(--nox-bg-1);
  border: 1.5px solid var(--nox-line);
  border-radius: var(--nox-r-lg);
  outline: none;
  transition: border-color var(--nox-ease), box-shadow var(--nox-ease);
  caret-color: var(--nox-accent);
}

.nox-otp-digit:focus {
  border-color: var(--nox-accent);
  box-shadow: 0 0 0 3px var(--nox-accent-s);
}

.nox-otp-digit.filled {
  border-color: var(--nox-accent);
  background: var(--nox-accent-s);
}

/* ─── Password Toggle ─── */

.nox-password-wrap {
  position: relative;
}

.nox-password-wrap .nox-input {
  padding-right: 40px;
}

.nox-password-toggle {
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  width: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--nox-ink-4);
  cursor: pointer;
  border-radius: 0 var(--nox-r) var(--nox-r) 0;
  transition: color var(--nox-ease-fast);
  font-size: 14px;
}

.nox-password-toggle:hover { color: var(--nox-ink-2); }

/* ─── Form Layout Patterns (from NOX-MISSING-COMPONENTS.md) ─── */

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

.nox-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--nox-3) * var(--nox-density, 1));
}

.nox-form-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: calc(var(--nox-3) * var(--nox-density, 1));
}

.nox-form-row-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: calc(var(--nox-3) * var(--nox-density, 1));
}

@media (max-width: 768px) {
  .nox-form-row, .nox-form-row-3, .nox-form-row-auto {
    grid-template-columns: 1fr;
  }
}

.nox-form-section {
  font-family: var(--nox-font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--nox-ink);
  padding: var(--nox-5) 0 var(--nox-3);
  border-bottom: 1px solid var(--nox-line);
  margin-bottom: var(--nox-4);
}

.nox-form-section:first-child { padding-top: 0; }

.nox-form-actions {
  display: flex;
  gap: var(--nox-3);
  justify-content: flex-end;
  padding-top: var(--nox-5);
  border-top: 1px solid var(--nox-line);
  margin-top: var(--nox-5);
}

/* ─── Input Sizes ─── */

.nox-input-sm, .nox-select-sm {
  padding: 5px 10px;
  font-size: 11px;
}

.nox-input-lg, .nox-select-lg {
  padding: 12px 16px;
  font-size: 15px;
}


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


/* ═══════════════════════════════════════════════════════════════════════════
   BLOCK F: NEW COMPONENTS (Tree view, drawer, command palette, etc.)
   ═══════════════════════════════════════════════════════════════════════════ */
   BLOCK F — NEW COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── View Toggling (SPA-like, from NOX-MISSING-COMPONENTS.md) ─── */

.nox-view { display: none; }
.nox-view.active { display: block; }
.nox-view-flex.active { display: flex; }
.nox-view-grid.active { display: grid; }

/* ─── Page Hero (sub-page banner) ─── */

.nox-page-hero {
  padding: calc(var(--nox-6) * var(--nox-density, 1)) calc(var(--nox-5) * var(--nox-density, 1));
  margin: calc(-1 * var(--nox-4) * var(--nox-density, 1)) calc(-1 * var(--nox-5) * var(--nox-density, 1)) calc(var(--nox-5) * var(--nox-density, 1));
  background: var(--nox-bg-1);
  border-bottom: 1px solid var(--nox-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nox-4);
}

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

.nox-page-hero-sub {
  font-size: 13px;
  color: var(--nox-ink-3);
  margin-top: 2px;
}

.nox-page-hero-actions {
  display: flex;
  gap: var(--nox-2);
  align-items: center;
}

/* ─── Data Row (universal clickable list item) ─── */

.nox-data-row {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--nox-density, 1));
  padding: calc(12px * var(--nox-density, 1)) calc(16px * var(--nox-density, 1));
  border-bottom: 1px solid var(--nox-line-2);
  cursor: pointer;
  transition: background var(--nox-ease-fast);
  -webkit-tap-highlight-color: transparent;
}

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

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

.nox-data-row-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--nox-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nox-data-row-sub {
  font-size: 11px;
  color: var(--nox-ink-3);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nox-data-row-meta {
  flex-shrink: 0;
  text-align: right;
}

.nox-data-row-chevron {
  color: var(--nox-ink-4);
  font-size: 12px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--nox-ease-fast);
}

.nox-data-row:hover .nox-data-row-chevron { opacity: 1; }

/* ─── Stat Mini (compact KPI for detail pages) ─── */

.nox-stat-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r);
}

.nox-stat-mini-value {
  font-family: var(--nox-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--nox-ink);
  line-height: 1;
  font-feature-settings: 'tnum';
}

.nox-stat-mini-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);
}

.nox-stat-mini-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--nox-r);
  background: var(--nox-bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--nox-ink-3);
  flex-shrink: 0;
}

/* ─── Theme Toggle (animated sun/moon switch) ─── */

.nox-theme-toggle {
  width: 48px;
  height: 26px;
  border-radius: 13px;
  background: var(--nox-bg-5);
  position: relative;
  cursor: pointer;
  border: 1px solid var(--nox-line);
  transition: background var(--nox-ease);
  flex-shrink: 0;
}

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

.nox-theme-toggle.light {
  background: var(--nox-accent-s);
}

.nox-theme-toggle.light::after {
  transform: translateX(22px);
  background: var(--nox-accent);
}

/* ─── Pill Filter (toggle filter pills) ─── */

.nox-pill-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

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

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

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

.nox-pill-filter .nox-pill-count {
  display: inline-block;
  font-family: var(--nox-font-mono);
  font-size: 10px;
  margin-left: 4px;
  opacity: 0.7;
}

/* ─── Tree View ─── */

.nox-tree {
  font-size: 13px;
}

.nox-tree-item {
  display: flex;
  flex-direction: column;
}

.nox-tree-node {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  cursor: pointer;
  border-radius: var(--nox-r);
  transition: background var(--nox-ease-fast);
  color: var(--nox-ink-2);
  user-select: none;
}

.nox-tree-node:hover { background: var(--nox-bg-3); }

.nox-tree-node.selected {
  background: var(--nox-accent-s);
  color: var(--nox-accent);
}

.nox-tree-toggle {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--nox-ink-4);
  transition: transform var(--nox-ease-fast);
  flex-shrink: 0;
}

.nox-tree-item.open > .nox-tree-node .nox-tree-toggle {
  transform: rotate(90deg);
}

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

.nox-tree-label { flex: 1; }

.nox-tree-children {
  padding-left: 24px;
  display: none;
  border-left: 1px solid var(--nox-line-2);
  margin-left: 11px;
}

.nox-tree-item.open > .nox-tree-children { display: block; }

/* ─── Side Sheet (slide-in right panel) ─── */

.nox-side-sheet-overlay {
  position: fixed;
  inset: 0;
  background: var(--nox-overlay);
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--nox-ease-slow), visibility var(--nox-ease-slow);
}

.nox-side-sheet-overlay.open {
  opacity: 1;
  visibility: visible;
}

.nox-side-sheet {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 420px;
  max-width: 90vw;
  background: var(--nox-bg-2);
  border-left: 1px solid var(--nox-line);
  box-shadow: var(--nox-shadow-xl);
  z-index: 901;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--nox-ease-slow);
}

.nox-side-sheet-overlay.open + .nox-side-sheet,
.nox-side-sheet.open {
  transform: translateX(0);
}

.nox-side-sheet-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--nox-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.nox-side-sheet-title {
  font-family: var(--nox-font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--nox-ink);
}

.nox-side-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.nox-side-sheet-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--nox-line);
  display: flex;
  gap: var(--nox-2);
  justify-content: flex-end;
  flex-shrink: 0;
}

/* ─── Loading Bar (top of page, YouTube-style) ─── */

.nox-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9999;
  pointer-events: none;
}

.nox-loading-bar-fill {
  height: 100%;
  background: var(--nox-accent);
  border-radius: 0 2px 2px 0;
  transition: width 0.4s ease;
  box-shadow: 0 0 8px var(--nox-accent-g);
}

.nox-loading-bar-fill.indeterminate {
  width: 30% !important;
  animation: nox-loading-bar-slide 1.5s ease infinite;
}

@keyframes nox-loading-bar-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* ─── Diff / Code Change View ─── */

.nox-diff {
  font-family: var(--nox-font-mono);
  font-size: 12px;
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-lg);
  overflow: hidden;
}

.nox-diff-header {
  padding: 8px 14px;
  background: var(--nox-bg-3);
  border-bottom: 1px solid var(--nox-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--nox-ink-3);
  font-size: 11px;
}

.nox-diff-line {
  display: flex;
  padding: 1px 14px;
  line-height: 1.6;
}

.nox-diff-line.added {
  background: rgba(58,138,92,0.1);
  color: var(--nox-green);
}

.nox-diff-line.removed {
  background: rgba(181,69,58,0.1);
  color: var(--nox-red);
}

.nox-diff-line.context {
  color: var(--nox-ink-3);
}

.nox-diff-line-num {
  width: 40px;
  text-align: right;
  color: var(--nox-ink-4);
  user-select: none;
  flex-shrink: 0;
  padding-right: 12px;
}

.nox-diff-line-content {
  flex: 1;
  white-space: pre;
  overflow-x: auto;
}

.nox-diff-line.added .nox-diff-line-content::before { content: '+ '; }
.nox-diff-line.removed .nox-diff-line-content::before { content: '- '; }
.nox-diff-line.context .nox-diff-line-content::before { content: '  '; }

/* ─── Mega Menu ─── */

.nox-mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-top: none;
  box-shadow: var(--nox-shadow-xl);
  padding: var(--nox-6);
  z-index: 200;
  display: none;
}

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

.nox-mega-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--nox-6);
}

.nox-mega-menu-section-title {
  font-family: var(--nox-font-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--nox-ink-4);
  margin-bottom: var(--nox-3);
}

.nox-mega-menu-item {
  display: flex;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--nox-r);
  cursor: pointer;
  transition: background var(--nox-ease-fast);
  text-decoration: none;
}

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

.nox-mega-menu-item-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--nox-r);
  background: var(--nox-bg-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--nox-ink-3);
  flex-shrink: 0;
}

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

.nox-mega-menu-item-desc {
  font-size: 11px;
  color: var(--nox-ink-4);
  margin-top: 1px;
}

/* ─── Popover ─── */

.nox-popover {
  position: absolute;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-lg);
  box-shadow: var(--nox-shadow-lg);
  padding: var(--nox-4);
  z-index: 300;
  min-width: 200px;
  max-width: 320px;
  display: none;
  animation: nox-fade-in 0.15s ease;
}

.nox-popover.open { display: block; }

.nox-popover-arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-right: none;
  border-bottom: none;
  transform: rotate(45deg);
  top: -6px;
  left: 20px;
}

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

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

/* ─── Speed Dial FAB ─── */

.nox-speed-dial {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 700;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: var(--nox-2);
}

.nox-speed-dial-trigger {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--nox-accent);
  color: var(--nox-bg-0);
  border: none;
  font-size: 22px;
  cursor: pointer;
  box-shadow: var(--nox-shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--nox-ease), box-shadow var(--nox-ease);
}

.nox-speed-dial-trigger:hover {
  transform: scale(1.05);
  box-shadow: var(--nox-shadow-xl);
}

.nox-speed-dial.open .nox-speed-dial-trigger {
  transform: rotate(45deg);
}

.nox-speed-dial-menu {
  display: flex;
  flex-direction: column;
  gap: var(--nox-2);
  align-items: flex-end;
  opacity: 0;
  transform: translateY(10px) scale(0.9);
  transition: all var(--nox-ease);
  pointer-events: none;
}

.nox-speed-dial.open .nox-speed-dial-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.nox-speed-dial-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-direction: row-reverse;
}

.nox-speed-dial-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  color: var(--nox-ink-2);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--nox-shadow);
  transition: all var(--nox-ease-fast);
}

.nox-speed-dial-btn:hover {
  background: var(--nox-accent-s);
  color: var(--nox-accent);
  border-color: var(--nox-accent-g);
}

.nox-speed-dial-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--nox-ink);
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  padding: 4px 10px;
  border-radius: var(--nox-r);
  box-shadow: var(--nox-shadow-sm);
  white-space: nowrap;
}

/* ─── Vertical Progress Steps ─── */

.nox-steps-vertical {
  display: flex;
  flex-direction: column;
}

.nox-step-v {
  display: flex;
  gap: 14px;
  position: relative;
  padding-bottom: var(--nox-5);
}

.nox-step-v:last-child { padding-bottom: 0; }

.nox-step-v-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.nox-step-v-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--nox-line);
  background: var(--nox-bg-2);
  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);
  z-index: 1;
}

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

.nox-step-v.completed .nox-step-v-dot {
  border-color: var(--nox-green);
  background: var(--nox-green);
  color: #fff;
}

.nox-step-v-line {
  width: 2px;
  flex: 1;
  background: var(--nox-line);
  margin-top: 4px;
}

.nox-step-v.completed .nox-step-v-line { background: var(--nox-green); }
.nox-step-v:last-child .nox-step-v-line { display: none; }

.nox-step-v-content { flex: 1; padding-top: 4px; }

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

.nox-step-v.active .nox-step-v-title { color: var(--nox-accent); }

.nox-step-v-desc {
  font-size: 12px;
  color: var(--nox-ink-3);
  line-height: 1.5;
}

/* ─── Snackbar ─── */

.nox-snackbar {
  position: fixed;
  bottom: var(--nox-6);
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-lg);
  box-shadow: var(--nox-shadow-xl);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1100;
  min-width: 300px;
  max-width: 560px;
  transition: transform var(--nox-ease-slow);
}

.nox-snackbar.show {
  transform: translateX(-50%) translateY(0);
}

.nox-snackbar-text {
  flex: 1;
  font-size: 13px;
  color: var(--nox-ink);
}

.nox-snackbar-action {
  font-family: var(--nox-font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--nox-accent);
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px 8px;
  border-radius: var(--nox-r);
  transition: background var(--nox-ease-fast);
  white-space: nowrap;
}

.nox-snackbar-action:hover { background: var(--nox-accent-s); }

/* ─── Avatar Group (stacked overlapping) ─── */

.nox-avatar-group {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.nox-avatar-group .nox-avatar {
  margin-left: -8px;
  border: 2px solid var(--nox-bg-2);
  position: relative;
}

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

.nox-avatar-group .nox-avatar:hover {
  z-index: 1;
  transform: translateY(-2px);
}

.nox-avatar-group-count {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--nox-bg-4);
  border: 2px solid var(--nox-bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--nox-font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--nox-ink-3);
  margin-left: -8px;
}

/* ─── Badge Dot (notification indicator without text) ─── */

.nox-badge-dot {
  position: relative;
}

.nox-badge-dot::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nox-red);
  border: 2px solid var(--nox-bg-2);
}

.nox-badge-dot.green::after { background: var(--nox-green); }
.nox-badge-dot.accent::after { background: var(--nox-accent); }

/* ─── Card Variants ─── */

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

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

.nox-card-h-media {
  width: 200px;
  flex-shrink: 0;
  background: var(--nox-bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nox-card-h-media img { width: 100%; height: 100%; object-fit: cover; }

.nox-card-h-body {
  flex: 1;
  padding: var(--nox-5);
  display: flex;
  flex-direction: column;
}

/* Interactive card */
.nox-card-interactive {
  cursor: pointer;
  transition: transform var(--nox-ease), box-shadow var(--nox-ease), border-color var(--nox-ease);
}

.nox-card-interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--nox-shadow-lg);
  border-color: var(--nox-accent-g);
}

.nox-card-interactive:active {
  transform: translateY(0);
}

/* Statistic card */
.nox-card-stat {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  padding: var(--nox-5);
  display: flex;
  align-items: center;
  gap: var(--nox-4);
  transition: border-color var(--nox-ease);
}

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

.nox-card-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--nox-r-lg);
  background: var(--nox-accent-s);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--nox-accent);
  flex-shrink: 0;
}

.nox-card-stat-value {
  font-family: var(--nox-font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--nox-ink);
  line-height: 1;
}

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


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


/* ═══════════════════════════════════════════════════════════════════════════
   BLOCK G: ANIMATION & TRANSITION LIBRARY
   ═══════════════════════════════════════════════════════════════════════════ */
   BLOCK G — ANIMATION & TRANSITION LIBRARY
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Keyframe Animations ─── */

@keyframes nox-bounce {
  0%, 100% { transform: translateY(-10%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}

@keyframes nox-ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

@keyframes nox-shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
  20%, 40%, 60%, 80% { transform: translateX(4px); }
}

@keyframes nox-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

@keyframes nox-swing {
  0% { transform: rotate(0deg); }
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg); }
  60% { transform: rotate(5deg); }
  80% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

@keyframes nox-slide-left {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes nox-slide-right {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes nox-slide-down {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes nox-zoom-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes nox-zoom-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.9); }
}

@keyframes nox-flip-x {
  from { transform: perspective(400px) rotateX(90deg); opacity: 0; }
  40% { transform: perspective(400px) rotateX(-10deg); }
  70% { transform: perspective(400px) rotateX(10deg); }
  to { transform: perspective(400px) rotateX(0); opacity: 1; }
}

@keyframes nox-rotate-in {
  from { transform: rotate(-180deg) scale(0); opacity: 0; }
  to { transform: rotate(0) scale(1); opacity: 1; }
}

@keyframes nox-fade-scale {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes nox-heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.1); }
  28% { transform: scale(1); }
  42% { transform: scale(1.1); }
  70% { transform: scale(1); }
}

@keyframes nox-flash {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}

@keyframes nox-rubber-band {
  0% { transform: scale(1); }
  30% { transform: scaleX(1.25) scaleY(0.75); }
  40% { transform: scaleX(0.75) scaleY(1.25); }
  50% { transform: scaleX(1.15) scaleY(0.85); }
  65% { transform: scaleX(0.95) scaleY(1.05); }
  75% { transform: scaleX(1.05) scaleY(0.95); }
  100% { transform: scale(1); }
}

/* ─── Animation Classes ─── */

.nox-animate-bounce    { animation: nox-bounce 1s 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-spin      { animation: nox-spin 1s linear infinite; }
.nox-animate-shake     { animation: nox-shake 0.6s ease; }
.nox-animate-wiggle    { animation: nox-wiggle 1s ease infinite; }
.nox-animate-swing     { animation: nox-swing 1s ease; }
.nox-animate-slide-up    { animation: nox-slide-up 0.3s ease; }
.nox-animate-slide-down  { animation: nox-slide-down 0.3s ease; }
.nox-animate-slide-left  { animation: nox-slide-left 0.3s ease; }
.nox-animate-slide-right { animation: nox-slide-right 0.3s ease; }
.nox-animate-zoom-in   { animation: nox-zoom-in 0.2s ease; }
.nox-animate-zoom-out  { animation: nox-zoom-out 0.2s ease; }
.nox-animate-flip      { animation: nox-flip-x 0.6s ease; }
.nox-animate-rotate-in { animation: nox-rotate-in 0.4s ease; }
.nox-animate-fade-scale { animation: nox-fade-scale 0.2s ease; }
.nox-animate-heartbeat { animation: nox-heartbeat 1.5s ease infinite; }
.nox-animate-flash     { animation: nox-flash 1s ease; }
.nox-animate-rubber    { animation: nox-rubber-band 0.8s ease; }
.nox-animate-shimmer   { animation: nox-shimmer 1.5s linear infinite; }
.nox-animate-none      { animation: none; }

/* ─── Animation Duration ─── */
.nox-animate-duration-75   { animation-duration: 75ms; }
.nox-animate-duration-100  { animation-duration: 100ms; }
.nox-animate-duration-150  { animation-duration: 150ms; }
.nox-animate-duration-200  { animation-duration: 200ms; }
.nox-animate-duration-300  { animation-duration: 300ms; }
.nox-animate-duration-500  { animation-duration: 500ms; }
.nox-animate-duration-700  { animation-duration: 700ms; }
.nox-animate-duration-1000 { animation-duration: 1000ms; }
.nox-animate-duration-2000 { animation-duration: 2000ms; }

/* ─── Animation Timing ─── */
.nox-animate-ease-linear  { animation-timing-function: linear; }
.nox-animate-ease-in      { animation-timing-function: cubic-bezier(0.4, 0, 1, 1); }
.nox-animate-ease-out     { animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.nox-animate-ease-in-out  { animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
.nox-animate-ease-bounce  { animation-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }

/* ─── Animation Delay ─── */
.nox-animate-delay-75   { animation-delay: 75ms; }
.nox-animate-delay-100  { animation-delay: 100ms; }
.nox-animate-delay-150  { animation-delay: 150ms; }
.nox-animate-delay-200  { animation-delay: 200ms; }
.nox-animate-delay-300  { animation-delay: 300ms; }
.nox-animate-delay-500  { animation-delay: 500ms; }
.nox-animate-delay-700  { animation-delay: 700ms; }
.nox-animate-delay-1000 { animation-delay: 1000ms; }

/* ─── Animation Iteration ─── */
.nox-animate-once     { animation-iteration-count: 1; }
.nox-animate-twice    { animation-iteration-count: 2; }
.nox-animate-infinite { animation-iteration-count: infinite; }

/* ─── Animation Direction ─── */
.nox-animate-normal    { animation-direction: normal; }
.nox-animate-reverse   { animation-direction: reverse; }
.nox-animate-alternate { animation-direction: alternate; }

/* ─── Animation Fill Mode ─── */
.nox-animate-fill-none     { animation-fill-mode: none; }
.nox-animate-fill-forwards { animation-fill-mode: forwards; }
.nox-animate-fill-backwards { animation-fill-mode: backwards; }
.nox-animate-fill-both     { animation-fill-mode: both; }

/* ─── Animation Play State ─── */
.nox-animate-running { animation-play-state: running; }
.nox-animate-paused  { animation-play-state: paused; }

/* ─── Hover Effect Presets ─── */

.nox-hover-lift { transition: transform var(--nox-ease), box-shadow var(--nox-ease); }
.nox-hover-lift:hover { transform: translateY(-3px); box-shadow: var(--nox-shadow-lg); }

.nox-hover-glow { transition: box-shadow var(--nox-ease); }
.nox-hover-glow:hover { box-shadow: 0 0 20px var(--nox-accent-g), var(--nox-shadow); }

.nox-hover-grow { transition: transform var(--nox-ease); }
.nox-hover-grow:hover { transform: scale(1.03); }

.nox-hover-shrink { transition: transform var(--nox-ease); }
.nox-hover-shrink:hover { transform: scale(0.97); }

.nox-hover-tilt { transition: transform var(--nox-ease); perspective: 800px; }
.nox-hover-tilt:hover { transform: rotateY(5deg) rotateX(2deg); }

.nox-hover-underline { position: relative; }
.nox-hover-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--nox-accent);
  transition: width var(--nox-ease);
}
.nox-hover-underline:hover::after { width: 100%; }

.nox-hover-border-reveal { border: 1px solid transparent; transition: border-color var(--nox-ease); }
.nox-hover-border-reveal:hover { border-color: var(--nox-accent); }

.nox-hover-bg-fill { transition: background var(--nox-ease), color var(--nox-ease); }
.nox-hover-bg-fill:hover { background: var(--nox-accent); color: var(--nox-bg-0); }

.nox-hover-shadow-up { transition: box-shadow var(--nox-ease); }
.nox-hover-shadow-up:hover { box-shadow: var(--nox-shadow-xl); }

.nox-hover-dim { transition: opacity var(--nox-ease); }
.nox-hover-dim:hover { opacity: 0.7; }

.nox-hover-bright { transition: filter var(--nox-ease); }
.nox-hover-bright:hover { filter: brightness(1.1); }


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


/* ═══════════════════════════════════════════════════════════════════════════
   FINAL EXPANSION LAYERS (Gradients, hover states, new components, misc)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════════
   NOX DESIGN SYSTEM v3.0 — EXPANSION MODULE
   Nexus Operations X | CSS Expansion for nox-styles-v3.html

   Contents:
     Section 1:  Gradient Utilities
     Section 2:  Background Utilities
     Section 3:  Container Queries
     Section 4:  Hover / Focus / Active State Variants
     Section 5:  New Components
     Section 6:  Expanded Inset / Position Utilities
     Section 7:  Table Display & List Utilities
     Section 8:  Print Utilities

   All classes prefixed with `nox-`.
   All colors use CSS custom properties (var(--nox-*)).
   ═══════════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 1 — GRADIENT UTILITIES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── 1.1 Gradient Direction Classes ─── */

.nox-bg-gradient-to-t   { background-image: linear-gradient(to top, var(--nox-gradient-stops)); }
.nox-bg-gradient-to-tr  { background-image: linear-gradient(to top right, var(--nox-gradient-stops)); }
.nox-bg-gradient-to-r   { background-image: linear-gradient(to right, var(--nox-gradient-stops)); }
.nox-bg-gradient-to-br  { background-image: linear-gradient(to bottom right, var(--nox-gradient-stops)); }
.nox-bg-gradient-to-b   { background-image: linear-gradient(to bottom, var(--nox-gradient-stops)); }
.nox-bg-gradient-to-bl  { background-image: linear-gradient(to bottom left, var(--nox-gradient-stops)); }
.nox-bg-gradient-to-l   { background-image: linear-gradient(to left, var(--nox-gradient-stops)); }
.nox-bg-gradient-to-tl  { background-image: linear-gradient(to top left, var(--nox-gradient-stops)); }
.nox-bg-gradient-radial  { background-image: radial-gradient(var(--nox-gradient-stops)); }
.nox-bg-gradient-conic   { background-image: conic-gradient(var(--nox-gradient-stops)); }
.nox-bg-gradient-none    { background-image: none; }


/* ─── 1.2 Gradient Stops — from / via / to ─── */
/* 16 colors x 3 shades (400, 500, 600) x from/via/to */

/* --- Slate --- */
.nox-from-slate-400 { --nox-gradient-from: #94a3b8; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-slate-500 { --nox-gradient-from: #64748b; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-slate-600 { --nox-gradient-from: #475569; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-via-slate-400  { --nox-gradient-stops: var(--nox-gradient-from), #94a3b8, var(--nox-gradient-to, transparent); }
.nox-via-slate-500  { --nox-gradient-stops: var(--nox-gradient-from), #64748b, var(--nox-gradient-to, transparent); }
.nox-via-slate-600  { --nox-gradient-stops: var(--nox-gradient-from), #475569, var(--nox-gradient-to, transparent); }
.nox-to-slate-400   { --nox-gradient-to: #94a3b8; }
.nox-to-slate-500   { --nox-gradient-to: #64748b; }
.nox-to-slate-600   { --nox-gradient-to: #475569; }

/* --- Gray --- */
.nox-from-gray-400 { --nox-gradient-from: #9ca3af; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-gray-500 { --nox-gradient-from: #6b7280; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-gray-600 { --nox-gradient-from: #4b5563; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-via-gray-400  { --nox-gradient-stops: var(--nox-gradient-from), #9ca3af, var(--nox-gradient-to, transparent); }
.nox-via-gray-500  { --nox-gradient-stops: var(--nox-gradient-from), #6b7280, var(--nox-gradient-to, transparent); }
.nox-via-gray-600  { --nox-gradient-stops: var(--nox-gradient-from), #4b5563, var(--nox-gradient-to, transparent); }
.nox-to-gray-400   { --nox-gradient-to: #9ca3af; }
.nox-to-gray-500   { --nox-gradient-to: #6b7280; }
.nox-to-gray-600   { --nox-gradient-to: #4b5563; }

/* --- Zinc --- */
.nox-from-zinc-400 { --nox-gradient-from: #a1a1aa; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-zinc-500 { --nox-gradient-from: #71717a; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-zinc-600 { --nox-gradient-from: #52525b; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-via-zinc-400  { --nox-gradient-stops: var(--nox-gradient-from), #a1a1aa, var(--nox-gradient-to, transparent); }
.nox-via-zinc-500  { --nox-gradient-stops: var(--nox-gradient-from), #71717a, var(--nox-gradient-to, transparent); }
.nox-via-zinc-600  { --nox-gradient-stops: var(--nox-gradient-from), #52525b, var(--nox-gradient-to, transparent); }
.nox-to-zinc-400   { --nox-gradient-to: #a1a1aa; }
.nox-to-zinc-500   { --nox-gradient-to: #71717a; }
.nox-to-zinc-600   { --nox-gradient-to: #52525b; }

/* --- Red --- */
.nox-from-red-400 { --nox-gradient-from: #f87171; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-red-500 { --nox-gradient-from: #ef4444; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-red-600 { --nox-gradient-from: #dc2626; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-via-red-400  { --nox-gradient-stops: var(--nox-gradient-from), #f87171, var(--nox-gradient-to, transparent); }
.nox-via-red-500  { --nox-gradient-stops: var(--nox-gradient-from), #ef4444, var(--nox-gradient-to, transparent); }
.nox-via-red-600  { --nox-gradient-stops: var(--nox-gradient-from), #dc2626, var(--nox-gradient-to, transparent); }
.nox-to-red-400   { --nox-gradient-to: #f87171; }
.nox-to-red-500   { --nox-gradient-to: #ef4444; }
.nox-to-red-600   { --nox-gradient-to: #dc2626; }

/* --- Orange --- */
.nox-from-orange-400 { --nox-gradient-from: #fb923c; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-orange-500 { --nox-gradient-from: #f97316; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-orange-600 { --nox-gradient-from: #ea580c; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-via-orange-400  { --nox-gradient-stops: var(--nox-gradient-from), #fb923c, var(--nox-gradient-to, transparent); }
.nox-via-orange-500  { --nox-gradient-stops: var(--nox-gradient-from), #f97316, var(--nox-gradient-to, transparent); }
.nox-via-orange-600  { --nox-gradient-stops: var(--nox-gradient-from), #ea580c, var(--nox-gradient-to, transparent); }
.nox-to-orange-400   { --nox-gradient-to: #fb923c; }
.nox-to-orange-500   { --nox-gradient-to: #f97316; }
.nox-to-orange-600   { --nox-gradient-to: #ea580c; }

/* --- Amber --- */
.nox-from-amber-400 { --nox-gradient-from: #fbbf24; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-amber-500 { --nox-gradient-from: #f59e0b; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-amber-600 { --nox-gradient-from: #d97706; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-via-amber-400  { --nox-gradient-stops: var(--nox-gradient-from), #fbbf24, var(--nox-gradient-to, transparent); }
.nox-via-amber-500  { --nox-gradient-stops: var(--nox-gradient-from), #f59e0b, var(--nox-gradient-to, transparent); }
.nox-via-amber-600  { --nox-gradient-stops: var(--nox-gradient-from), #d97706, var(--nox-gradient-to, transparent); }
.nox-to-amber-400   { --nox-gradient-to: #fbbf24; }
.nox-to-amber-500   { --nox-gradient-to: #f59e0b; }
.nox-to-amber-600   { --nox-gradient-to: #d97706; }

/* --- Yellow --- */
.nox-from-yellow-400 { --nox-gradient-from: #facc15; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-yellow-500 { --nox-gradient-from: #eab308; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-yellow-600 { --nox-gradient-from: #ca8a04; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-via-yellow-400  { --nox-gradient-stops: var(--nox-gradient-from), #facc15, var(--nox-gradient-to, transparent); }
.nox-via-yellow-500  { --nox-gradient-stops: var(--nox-gradient-from), #eab308, var(--nox-gradient-to, transparent); }
.nox-via-yellow-600  { --nox-gradient-stops: var(--nox-gradient-from), #ca8a04, var(--nox-gradient-to, transparent); }
.nox-to-yellow-400   { --nox-gradient-to: #facc15; }
.nox-to-yellow-500   { --nox-gradient-to: #eab308; }
.nox-to-yellow-600   { --nox-gradient-to: #ca8a04; }

/* --- Lime --- */
.nox-from-lime-400 { --nox-gradient-from: #a3e635; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-lime-500 { --nox-gradient-from: #84cc16; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-lime-600 { --nox-gradient-from: #65a30d; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-via-lime-400  { --nox-gradient-stops: var(--nox-gradient-from), #a3e635, var(--nox-gradient-to, transparent); }
.nox-via-lime-500  { --nox-gradient-stops: var(--nox-gradient-from), #84cc16, var(--nox-gradient-to, transparent); }
.nox-via-lime-600  { --nox-gradient-stops: var(--nox-gradient-from), #65a30d, var(--nox-gradient-to, transparent); }
.nox-to-lime-400   { --nox-gradient-to: #a3e635; }
.nox-to-lime-500   { --nox-gradient-to: #84cc16; }
.nox-to-lime-600   { --nox-gradient-to: #65a30d; }

/* --- Green --- */
.nox-from-green-400 { --nox-gradient-from: #4ade80; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-green-500 { --nox-gradient-from: #22c55e; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-green-600 { --nox-gradient-from: #16a34a; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-via-green-400  { --nox-gradient-stops: var(--nox-gradient-from), #4ade80, var(--nox-gradient-to, transparent); }
.nox-via-green-500  { --nox-gradient-stops: var(--nox-gradient-from), #22c55e, var(--nox-gradient-to, transparent); }
.nox-via-green-600  { --nox-gradient-stops: var(--nox-gradient-from), #16a34a, var(--nox-gradient-to, transparent); }
.nox-to-green-400   { --nox-gradient-to: #4ade80; }
.nox-to-green-500   { --nox-gradient-to: #22c55e; }
.nox-to-green-600   { --nox-gradient-to: #16a34a; }

/* --- Emerald --- */
.nox-from-emerald-400 { --nox-gradient-from: #34d399; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-emerald-500 { --nox-gradient-from: #10b981; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-emerald-600 { --nox-gradient-from: #059669; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-via-emerald-400  { --nox-gradient-stops: var(--nox-gradient-from), #34d399, var(--nox-gradient-to, transparent); }
.nox-via-emerald-500  { --nox-gradient-stops: var(--nox-gradient-from), #10b981, var(--nox-gradient-to, transparent); }
.nox-via-emerald-600  { --nox-gradient-stops: var(--nox-gradient-from), #059669, var(--nox-gradient-to, transparent); }
.nox-to-emerald-400   { --nox-gradient-to: #34d399; }
.nox-to-emerald-500   { --nox-gradient-to: #10b981; }
.nox-to-emerald-600   { --nox-gradient-to: #059669; }

/* --- Teal --- */
.nox-from-teal-400 { --nox-gradient-from: #2dd4bf; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-teal-500 { --nox-gradient-from: #14b8a6; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-teal-600 { --nox-gradient-from: #0d9488; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-via-teal-400  { --nox-gradient-stops: var(--nox-gradient-from), #2dd4bf, var(--nox-gradient-to, transparent); }
.nox-via-teal-500  { --nox-gradient-stops: var(--nox-gradient-from), #14b8a6, var(--nox-gradient-to, transparent); }
.nox-via-teal-600  { --nox-gradient-stops: var(--nox-gradient-from), #0d9488, var(--nox-gradient-to, transparent); }
.nox-to-teal-400   { --nox-gradient-to: #2dd4bf; }
.nox-to-teal-500   { --nox-gradient-to: #14b8a6; }
.nox-to-teal-600   { --nox-gradient-to: #0d9488; }

/* --- Cyan --- */
.nox-from-cyan-400 { --nox-gradient-from: #22d3ee; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-cyan-500 { --nox-gradient-from: #06b6d4; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-cyan-600 { --nox-gradient-from: #0891b2; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-via-cyan-400  { --nox-gradient-stops: var(--nox-gradient-from), #22d3ee, var(--nox-gradient-to, transparent); }
.nox-via-cyan-500  { --nox-gradient-stops: var(--nox-gradient-from), #06b6d4, var(--nox-gradient-to, transparent); }
.nox-via-cyan-600  { --nox-gradient-stops: var(--nox-gradient-from), #0891b2, var(--nox-gradient-to, transparent); }
.nox-to-cyan-400   { --nox-gradient-to: #22d3ee; }
.nox-to-cyan-500   { --nox-gradient-to: #06b6d4; }
.nox-to-cyan-600   { --nox-gradient-to: #0891b2; }

/* --- Blue --- */
.nox-from-blue-400 { --nox-gradient-from: #60a5fa; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-blue-500 { --nox-gradient-from: #3b82f6; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-blue-600 { --nox-gradient-from: #2563eb; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-via-blue-400  { --nox-gradient-stops: var(--nox-gradient-from), #60a5fa, var(--nox-gradient-to, transparent); }
.nox-via-blue-500  { --nox-gradient-stops: var(--nox-gradient-from), #3b82f6, var(--nox-gradient-to, transparent); }
.nox-via-blue-600  { --nox-gradient-stops: var(--nox-gradient-from), #2563eb, var(--nox-gradient-to, transparent); }
.nox-to-blue-400   { --nox-gradient-to: #60a5fa; }
.nox-to-blue-500   { --nox-gradient-to: #3b82f6; }
.nox-to-blue-600   { --nox-gradient-to: #2563eb; }

/* --- Indigo --- */
.nox-from-indigo-400 { --nox-gradient-from: #818cf8; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-indigo-500 { --nox-gradient-from: #6366f1; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-indigo-600 { --nox-gradient-from: #4f46e5; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-via-indigo-400  { --nox-gradient-stops: var(--nox-gradient-from), #818cf8, var(--nox-gradient-to, transparent); }
.nox-via-indigo-500  { --nox-gradient-stops: var(--nox-gradient-from), #6366f1, var(--nox-gradient-to, transparent); }
.nox-via-indigo-600  { --nox-gradient-stops: var(--nox-gradient-from), #4f46e5, var(--nox-gradient-to, transparent); }
.nox-to-indigo-400   { --nox-gradient-to: #818cf8; }
.nox-to-indigo-500   { --nox-gradient-to: #6366f1; }
.nox-to-indigo-600   { --nox-gradient-to: #4f46e5; }

/* --- Violet --- */
.nox-from-violet-400 { --nox-gradient-from: #a78bfa; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-violet-500 { --nox-gradient-from: #8b5cf6; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-violet-600 { --nox-gradient-from: #7c3aed; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-via-violet-400  { --nox-gradient-stops: var(--nox-gradient-from), #a78bfa, var(--nox-gradient-to, transparent); }
.nox-via-violet-500  { --nox-gradient-stops: var(--nox-gradient-from), #8b5cf6, var(--nox-gradient-to, transparent); }
.nox-via-violet-600  { --nox-gradient-stops: var(--nox-gradient-from), #7c3aed, var(--nox-gradient-to, transparent); }
.nox-to-violet-400   { --nox-gradient-to: #a78bfa; }
.nox-to-violet-500   { --nox-gradient-to: #8b5cf6; }
.nox-to-violet-600   { --nox-gradient-to: #7c3aed; }

/* --- Rose --- */
.nox-from-rose-400 { --nox-gradient-from: #fb7185; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-rose-500 { --nox-gradient-from: #f43f5e; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-rose-600 { --nox-gradient-from: #e11d48; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-via-rose-400  { --nox-gradient-stops: var(--nox-gradient-from), #fb7185, var(--nox-gradient-to, transparent); }
.nox-via-rose-500  { --nox-gradient-stops: var(--nox-gradient-from), #f43f5e, var(--nox-gradient-to, transparent); }
.nox-via-rose-600  { --nox-gradient-stops: var(--nox-gradient-from), #e11d48, var(--nox-gradient-to, transparent); }
.nox-to-rose-400   { --nox-gradient-to: #fb7185; }
.nox-to-rose-500   { --nox-gradient-to: #f43f5e; }
.nox-to-rose-600   { --nox-gradient-to: #e11d48; }

/* Special from/to: transparent, white, black */
.nox-from-transparent { --nox-gradient-from: transparent; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-white       { --nox-gradient-from: #ffffff; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-black       { --nox-gradient-from: #000000; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-via-transparent   { --nox-gradient-stops: var(--nox-gradient-from), transparent, var(--nox-gradient-to, transparent); }
.nox-via-white         { --nox-gradient-stops: var(--nox-gradient-from), #ffffff, var(--nox-gradient-to, transparent); }
.nox-via-black         { --nox-gradient-stops: var(--nox-gradient-from), #000000, var(--nox-gradient-to, transparent); }
.nox-to-transparent    { --nox-gradient-to: transparent; }
.nox-to-white          { --nox-gradient-to: #ffffff; }
.nox-to-black          { --nox-gradient-to: #000000; }

/* Theme-aware from/to stops */
.nox-from-accent { --nox-gradient-from: var(--nox-accent); --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-accent-2 { --nox-gradient-from: var(--nox-accent-2); --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-via-accent  { --nox-gradient-stops: var(--nox-gradient-from), var(--nox-accent), var(--nox-gradient-to, transparent); }
.nox-via-accent-2 { --nox-gradient-stops: var(--nox-gradient-from), var(--nox-accent-2), var(--nox-gradient-to, transparent); }
.nox-to-accent   { --nox-gradient-to: var(--nox-accent); }
.nox-to-accent-2 { --nox-gradient-to: var(--nox-accent-2); }


/* ─── 1.3 Preset Gradients ─── */

.nox-gradient-brand    { background: linear-gradient(135deg, var(--nox-accent), var(--nox-accent-2)); }
.nox-gradient-sunset   { background: linear-gradient(135deg, #f97316, #ec4899); }
.nox-gradient-ocean    { background: linear-gradient(135deg, #06b6d4, #3b82f6); }
.nox-gradient-forest   { background: linear-gradient(135deg, #22c55e, #0d9488); }
.nox-gradient-lavender { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.nox-gradient-midnight { background: linear-gradient(135deg, #1e3a5f, #0f172a); }
.nox-gradient-gold     { background: linear-gradient(135deg, #f59e0b, #b45309); }
.nox-gradient-steel    { background: linear-gradient(135deg, #64748b, #334155); }
.nox-gradient-ember    { background: linear-gradient(135deg, #ef4444, #f97316); }
.nox-gradient-ice      { background: linear-gradient(135deg, #67e8f9, #a78bfa); }
.nox-gradient-aurora    { background: linear-gradient(135deg, #22c55e, #06b6d4, #8b5cf6); }
.nox-gradient-cherry    { background: linear-gradient(135deg, #e11d48, #be123c); }
.nox-gradient-peach     { background: linear-gradient(135deg, #fb923c, #fda4af); }
.nox-gradient-arctic    { background: linear-gradient(135deg, #e0e7ff, #cffafe); }
.nox-gradient-volcanic  { background: linear-gradient(135deg, #991b1b, #f97316); }
.nox-gradient-moss      { background: linear-gradient(135deg, #365314, #84cc16); }

/* Gradient text utility */
.nox-gradient-text {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 2 — BACKGROUND UTILITIES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── 2.1 Background Size ─── */

.nox-bg-auto    { background-size: auto; }
.nox-bg-cover   { background-size: cover; }
.nox-bg-contain { background-size: contain; }

/* ─── 2.2 Background Position ─── */

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

/* ─── 2.3 Background Repeat ─── */

.nox-bg-repeat       { background-repeat: repeat; }
.nox-bg-no-repeat    { background-repeat: no-repeat; }
.nox-bg-repeat-x     { background-repeat: repeat-x; }
.nox-bg-repeat-y     { background-repeat: repeat-y; }
.nox-bg-repeat-round { background-repeat: round; }
.nox-bg-repeat-space { background-repeat: space; }

/* ─── 2.4 Background Attachment ─── */

.nox-bg-fixed  { background-attachment: fixed; }
.nox-bg-local  { background-attachment: local; }
.nox-bg-scroll { background-attachment: scroll; }

/* ─── 2.5 Background Clip ─── */

.nox-bg-clip-border  { background-clip: border-box; }
.nox-bg-clip-padding { background-clip: padding-box; }
.nox-bg-clip-content { background-clip: content-box; }
.nox-bg-clip-text    { -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ─── 2.6 Background Origin ─── */

.nox-bg-origin-border  { background-origin: border-box; }
.nox-bg-origin-padding { background-origin: padding-box; }
.nox-bg-origin-content { background-origin: content-box; }

/* ─── 2.7 Background Blend Mode ─── */

.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-dodge    { background-blend-mode: color-dodge; }
.nox-bg-blend-burn     { background-blend-mode: color-burn; }
.nox-bg-blend-hard     { background-blend-mode: hard-light; }
.nox-bg-blend-soft     { background-blend-mode: soft-light; }
.nox-bg-blend-diff     { background-blend-mode: difference; }
.nox-bg-blend-excl     { background-blend-mode: exclusion; }
.nox-bg-blend-hue      { background-blend-mode: hue; }
.nox-bg-blend-sat      { background-blend-mode: saturation; }
.nox-bg-blend-color    { background-blend-mode: color; }
.nox-bg-blend-lum      { background-blend-mode: luminosity; }

/* ─── 2.8 Mix Blend Mode ─── */

.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-dodge    { mix-blend-mode: color-dodge; }
.nox-mix-blend-burn     { mix-blend-mode: color-burn; }
.nox-mix-blend-hard     { mix-blend-mode: hard-light; }
.nox-mix-blend-soft     { mix-blend-mode: soft-light; }
.nox-mix-blend-diff     { mix-blend-mode: difference; }
.nox-mix-blend-excl     { mix-blend-mode: exclusion; }
.nox-mix-blend-hue      { mix-blend-mode: hue; }
.nox-mix-blend-sat      { mix-blend-mode: saturation; }
.nox-mix-blend-color    { mix-blend-mode: color; }
.nox-mix-blend-lum      { mix-blend-mode: luminosity; }

/* ─── 2.9 SVG Fill & Stroke ─── */

.nox-fill-current   { fill: currentColor; }
.nox-fill-none      { fill: none; }
.nox-fill-accent    { fill: var(--nox-accent); }
.nox-fill-ink       { fill: var(--nox-ink); }
.nox-fill-ink-2     { fill: var(--nox-ink-2); }
.nox-fill-ink-3     { fill: var(--nox-ink-3); }
.nox-fill-green     { fill: var(--nox-green); }
.nox-fill-red       { fill: var(--nox-red); }
.nox-fill-yellow    { fill: var(--nox-yellow); }
.nox-fill-blue      { fill: var(--nox-blue); }

.nox-stroke-current { stroke: currentColor; }
.nox-stroke-none    { stroke: none; }
.nox-stroke-accent  { stroke: var(--nox-accent); }
.nox-stroke-ink     { stroke: var(--nox-ink); }
.nox-stroke-ink-2   { stroke: var(--nox-ink-2); }
.nox-stroke-ink-3   { stroke: var(--nox-ink-3); }
.nox-stroke-green   { stroke: var(--nox-green); }
.nox-stroke-red     { stroke: var(--nox-red); }
.nox-stroke-yellow  { stroke: var(--nox-yellow); }
.nox-stroke-blue    { stroke: var(--nox-blue); }
.nox-stroke-line    { stroke: var(--nox-line); }

.nox-stroke-0 { stroke-width: 0; }
.nox-stroke-1 { stroke-width: 1; }
.nox-stroke-2 { stroke-width: 2; }
.nox-stroke-3 { stroke-width: 3; }
.nox-stroke-4 { stroke-width: 4; }

.nox-stroke-dash-none   { stroke-dasharray: none; }
.nox-stroke-dash-sm     { stroke-dasharray: 4 4; }
.nox-stroke-dash-md     { stroke-dasharray: 8 4; }
.nox-stroke-dash-lg     { stroke-dasharray: 12 6; }

.nox-stroke-cap-butt   { stroke-linecap: butt; }
.nox-stroke-cap-round  { stroke-linecap: round; }
.nox-stroke-cap-square { stroke-linecap: square; }

.nox-stroke-join-miter { stroke-linejoin: miter; }
.nox-stroke-join-round { stroke-linejoin: round; }
.nox-stroke-join-bevel { stroke-linejoin: bevel; }


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 3 — CONTAINER QUERIES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── 3.1 Container Types ─── */

.nox-container        { container-type: inline-size; }
.nox-container-normal { container-type: normal; }
.nox-container-size   { container-type: size; }

/* Named containers */
.nox-container-card    { container-type: inline-size; container-name: card; }
.nox-container-sidebar { container-type: inline-size; container-name: sidebar; }
.nox-container-main    { container-type: inline-size; container-name: main; }
.nox-container-widget  { container-type: inline-size; container-name: widget; }


/* ─── 3.2 @container — xs (320px) ─── */

@container (min-width: 320px) {
  .\@xs\:nox-hidden      { display: none; }
  .\@xs\:nox-block       { display: block; }
  .\@xs\:nox-flex        { display: flex; }
  .\@xs\:nox-grid        { display: grid; }
  .\@xs\:nox-inline      { display: inline; }
  .\@xs\:nox-inline-flex { display: inline-flex; }
  .\@xs\:nox-flex-col    { flex-direction: column; }
  .\@xs\:nox-flex-row    { flex-direction: row; }
  .\@xs\:nox-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .\@xs\:nox-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .\@xs\:nox-gap-2       { gap: 8px; }
  .\@xs\:nox-gap-3       { gap: 12px; }
  .\@xs\:nox-p-2         { padding: 8px; }
  .\@xs\:nox-p-3         { padding: 12px; }
  .\@xs\:nox-text-xs     { font-size: 11px; }
  .\@xs\:nox-text-sm     { font-size: 12px; }
  .\@xs\:nox-w-full      { width: 100%; }
  .\@xs\:nox-items-start { align-items: flex-start; }
  .\@xs\:nox-items-center { align-items: center; }
}

/* ─── 3.3 @container — sm (480px) ─── */

@container (min-width: 480px) {
  .\@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-flex { display: inline-flex; }
  .\@sm\:nox-flex-col    { flex-direction: column; }
  .\@sm\:nox-flex-row    { flex-direction: row; }
  .\@sm\:nox-flex-wrap   { flex-wrap: wrap; }
  .\@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-gap-2       { gap: 8px; }
  .\@sm\:nox-gap-3       { gap: 12px; }
  .\@sm\:nox-gap-4       { gap: 16px; }
  .\@sm\:nox-p-3         { padding: 12px; }
  .\@sm\:nox-p-4         { padding: 16px; }
  .\@sm\:nox-text-sm     { font-size: 12px; }
  .\@sm\:nox-text-base   { font-size: 13px; }
  .\@sm\:nox-text-lg     { font-size: 15px; }
  .\@sm\:nox-w-full      { width: 100%; }
  .\@sm\:nox-w-auto      { width: auto; }
  .\@sm\:nox-items-center { align-items: center; }
  .\@sm\:nox-justify-between { justify-content: space-between; }
}

/* ─── 3.4 @container — md (640px) ─── */

@container (min-width: 640px) {
  .\@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-flex { display: inline-flex; }
  .\@md\:nox-flex-col    { flex-direction: column; }
  .\@md\:nox-flex-row    { flex-direction: row; }
  .\@md\:nox-flex-wrap   { flex-wrap: wrap; }
  .\@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-gap-3       { gap: 12px; }
  .\@md\:nox-gap-4       { gap: 16px; }
  .\@md\:nox-gap-5       { gap: 20px; }
  .\@md\:nox-gap-6       { gap: 24px; }
  .\@md\:nox-p-4         { padding: 16px; }
  .\@md\:nox-p-5         { padding: 20px; }
  .\@md\:nox-p-6         { padding: 24px; }
  .\@md\:nox-text-base   { font-size: 13px; }
  .\@md\:nox-text-lg     { font-size: 15px; }
  .\@md\:nox-text-xl     { font-size: 18px; }
  .\@md\:nox-w-full      { width: 100%; }
  .\@md\:nox-w-auto      { width: auto; }
  .\@md\:nox-w-1\/2      { width: 50%; }
  .\@md\:nox-items-center { align-items: center; }
  .\@md\:nox-justify-between { justify-content: space-between; }
  .\@md\:nox-col-span-2  { grid-column: span 2 / span 2; }
}

/* ─── 3.5 @container — lg (900px) ─── */

@container (min-width: 900px) {
  .\@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-flex { display: inline-flex; }
  .\@lg\:nox-flex-col    { flex-direction: column; }
  .\@lg\:nox-flex-row    { flex-direction: row; }
  .\@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-gap-4       { gap: 16px; }
  .\@lg\:nox-gap-5       { gap: 20px; }
  .\@lg\:nox-gap-6       { gap: 24px; }
  .\@lg\:nox-gap-8       { gap: 32px; }
  .\@lg\:nox-p-6         { padding: 24px; }
  .\@lg\:nox-p-8         { padding: 32px; }
  .\@lg\:nox-text-xl     { font-size: 18px; }
  .\@lg\:nox-text-2xl    { font-size: 22px; }
  .\@lg\:nox-w-1\/2      { width: 50%; }
  .\@lg\:nox-w-1\/3      { width: 33.333%; }
  .\@lg\:nox-w-2\/3      { width: 66.666%; }
  .\@lg\:nox-col-span-2  { grid-column: span 2 / span 2; }
  .\@lg\:nox-col-span-3  { grid-column: span 3 / span 3; }
}

/* ─── 3.6 @container — xl (1200px) ─── */

@container (min-width: 1200px) {
  .\@xl\:nox-hidden      { display: none; }
  .\@xl\:nox-block       { display: block; }
  .\@xl\:nox-flex        { display: flex; }
  .\@xl\:nox-grid        { display: grid; }
  .\@xl\:nox-flex-row    { flex-direction: row; }
  .\@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-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .\@xl\:nox-gap-6       { gap: 24px; }
  .\@xl\:nox-gap-8       { gap: 32px; }
  .\@xl\:nox-p-8         { padding: 32px; }
  .\@xl\:nox-p-10        { padding: 40px; }
  .\@xl\:nox-text-2xl    { font-size: 22px; }
  .\@xl\:nox-text-3xl    { font-size: 28px; }
  .\@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; }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 4 — HOVER / FOCUS / ACTIVE STATE VARIANTS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── 4.1 Hover — Background ─── */

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

/* ─── 4.2 Hover — Text Color ─── */

.hover\:nox-text-ink:hover    { color: var(--nox-ink); }
.hover\:nox-text-ink-2:hover  { color: var(--nox-ink-2); }
.hover\:nox-text-ink-3:hover  { color: var(--nox-ink-3); }
.hover\:nox-text-accent:hover { color: var(--nox-accent); }
.hover\:nox-text-green:hover  { color: var(--nox-green); }
.hover\:nox-text-red:hover    { color: var(--nox-red); }
.hover\:nox-text-yellow:hover { color: var(--nox-yellow); }
.hover\:nox-text-blue:hover   { color: var(--nox-blue); }
.hover\:nox-text-purple:hover { color: var(--nox-purple); }
.hover\:nox-text-white:hover  { color: #ffffff; }

/* ─── 4.3 Hover — Opacity ─── */

.hover\:nox-opacity-0:hover   { opacity: 0; }
.hover\:nox-opacity-10:hover  { opacity: 0.1; }
.hover\:nox-opacity-20:hover  { opacity: 0.2; }
.hover\:nox-opacity-30:hover  { opacity: 0.3; }
.hover\:nox-opacity-40:hover  { opacity: 0.4; }
.hover\:nox-opacity-50:hover  { opacity: 0.5; }
.hover\:nox-opacity-60:hover  { opacity: 0.6; }
.hover\:nox-opacity-70:hover  { opacity: 0.7; }
.hover\:nox-opacity-80:hover  { opacity: 0.8; }
.hover\:nox-opacity-90:hover  { opacity: 0.9; }
.hover\:nox-opacity-100:hover { opacity: 1; }

/* ─── 4.4 Hover — Transform ─── */

.hover\:nox-scale-95:hover  { transform: scale(0.95); }
.hover\:nox-scale-98:hover  { transform: scale(0.98); }
.hover\:nox-scale-100:hover { transform: scale(1); }
.hover\:nox-scale-102:hover { transform: scale(1.02); }
.hover\:nox-scale-105:hover { transform: scale(1.05); }
.hover\:nox-scale-110:hover { transform: scale(1.1); }

.hover\:nox-translate-y-n1:hover { transform: translateY(-1px); }
.hover\:nox-translate-y-n2:hover { transform: translateY(-2px); }
.hover\:nox-translate-y-n3:hover { transform: translateY(-3px); }
.hover\:nox-translate-y-n4:hover { transform: translateY(-4px); }
.hover\:nox-translate-y-1:hover  { transform: translateY(1px); }
.hover\:nox-translate-y-2:hover  { transform: translateY(2px); }
.hover\:nox-translate-x-1:hover  { transform: translateX(4px); }
.hover\:nox-translate-x-n1:hover { transform: translateX(-4px); }

.hover\:nox-rotate-3:hover   { transform: rotate(3deg); }
.hover\:nox-rotate-6:hover   { transform: rotate(6deg); }
.hover\:nox-rotate-n3:hover  { transform: rotate(-3deg); }

/* ─── 4.5 Hover — Shadow ─── */

.hover\:nox-shadow-none:hover { box-shadow: none; }
.hover\:nox-shadow-sm:hover   { box-shadow: var(--nox-shadow-sm); }
.hover\:nox-shadow:hover      { box-shadow: var(--nox-shadow); }
.hover\:nox-shadow-lg:hover   { box-shadow: var(--nox-shadow-lg); }
.hover\:nox-shadow-xl:hover   { box-shadow: var(--nox-shadow-xl); }

/* ─── 4.6 Hover — Border ─── */

.hover\:nox-border-accent:hover     { border-color: var(--nox-accent); }
.hover\:nox-border-accent-g:hover   { border-color: var(--nox-accent-g); }
.hover\:nox-border-ink-4:hover      { border-color: var(--nox-ink-4); }
.hover\:nox-border-ink-3:hover      { border-color: var(--nox-ink-3); }
.hover\:nox-border-line:hover       { border-color: var(--nox-line); }
.hover\:nox-border-green:hover      { border-color: var(--nox-green); }
.hover\:nox-border-red:hover        { border-color: var(--nox-red); }
.hover\:nox-border-blue:hover       { border-color: var(--nox-blue); }
.hover\:nox-border-transparent:hover { border-color: transparent; }

/* ─── 4.7 Hover — Text Decoration ─── */

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

/* ─── 4.8 Hover — Ring (Outline) ─── */

.hover\:nox-ring-1:hover { box-shadow: 0 0 0 1px var(--nox-accent-g); }
.hover\:nox-ring-2:hover { box-shadow: 0 0 0 2px var(--nox-accent-g); }
.hover\:nox-ring-3:hover { box-shadow: 0 0 0 3px var(--nox-accent-g); }
.hover\:nox-ring-4:hover { box-shadow: 0 0 0 4px var(--nox-accent-g); }

/* ─── 4.9 Hover — 16 Palette Colors (text + bg at 500) ─── */

.hover\:nox-text-slate-500:hover   { color: var(--nox-slate-500); }
.hover\:nox-text-gray-500:hover    { color: var(--nox-gray-500); }
.hover\:nox-text-zinc-500:hover    { color: var(--nox-zinc-500); }
.hover\:nox-text-red-500:hover     { color: var(--nox-red-500); }
.hover\:nox-text-orange-500:hover  { color: var(--nox-orange-500); }
.hover\:nox-text-amber-500:hover   { color: var(--nox-amber-500); }
.hover\:nox-text-yellow-500:hover  { color: var(--nox-yellow-500); }
.hover\:nox-text-lime-500:hover    { color: var(--nox-lime-500); }
.hover\:nox-text-green-500:hover   { color: var(--nox-green-500); }
.hover\:nox-text-emerald-500:hover { color: var(--nox-emerald-500); }
.hover\:nox-text-teal-500:hover    { color: var(--nox-teal-500); }
.hover\:nox-text-cyan-500:hover    { color: var(--nox-cyan-500); }
.hover\:nox-text-blue-500:hover    { color: var(--nox-blue-500); }
.hover\:nox-text-indigo-500:hover  { color: var(--nox-indigo-500); }
.hover\:nox-text-violet-500:hover  { color: var(--nox-violet-500); }
.hover\:nox-text-rose-500:hover    { color: var(--nox-rose-500); }

.hover\:nox-bg-slate-500:hover   { background: var(--nox-slate-500); }
.hover\:nox-bg-gray-500:hover    { background: var(--nox-gray-500); }
.hover\:nox-bg-zinc-500:hover    { background: var(--nox-zinc-500); }
.hover\:nox-bg-red-500:hover     { background: var(--nox-red-500); }
.hover\:nox-bg-orange-500:hover  { background: var(--nox-orange-500); }
.hover\:nox-bg-amber-500:hover   { background: var(--nox-amber-500); }
.hover\:nox-bg-yellow-500:hover  { background: var(--nox-yellow-500); }
.hover\:nox-bg-lime-500:hover    { background: var(--nox-lime-500); }
.hover\:nox-bg-green-500:hover   { background: var(--nox-green-500); }
.hover\:nox-bg-emerald-500:hover { background: var(--nox-emerald-500); }
.hover\:nox-bg-teal-500:hover    { background: var(--nox-teal-500); }
.hover\:nox-bg-cyan-500:hover    { background: var(--nox-cyan-500); }
.hover\:nox-bg-blue-500:hover    { background: var(--nox-blue-500); }
.hover\:nox-bg-indigo-500:hover  { background: var(--nox-indigo-500); }
.hover\:nox-bg-violet-500:hover  { background: var(--nox-violet-500); }
.hover\:nox-bg-rose-500:hover    { background: var(--nox-rose-500); }

/* 16 colors at shade 400 hover */
.hover\:nox-text-slate-400:hover   { color: var(--nox-slate-400); }
.hover\:nox-text-gray-400:hover    { color: var(--nox-gray-400); }
.hover\:nox-text-zinc-400:hover    { color: var(--nox-zinc-400); }
.hover\:nox-text-red-400:hover     { color: var(--nox-red-400); }
.hover\:nox-text-orange-400:hover  { color: var(--nox-orange-400); }
.hover\:nox-text-amber-400:hover   { color: var(--nox-amber-400); }
.hover\:nox-text-yellow-400:hover  { color: var(--nox-yellow-400); }
.hover\:nox-text-lime-400:hover    { color: var(--nox-lime-400); }
.hover\:nox-text-green-400:hover   { color: var(--nox-green-400); }
.hover\:nox-text-emerald-400:hover { color: var(--nox-emerald-400); }
.hover\:nox-text-teal-400:hover    { color: var(--nox-teal-400); }
.hover\:nox-text-cyan-400:hover    { color: var(--nox-cyan-400); }
.hover\:nox-text-blue-400:hover    { color: var(--nox-blue-400); }
.hover\:nox-text-indigo-400:hover  { color: var(--nox-indigo-400); }
.hover\:nox-text-violet-400:hover  { color: var(--nox-violet-400); }
.hover\:nox-text-rose-400:hover    { color: var(--nox-rose-400); }

.hover\:nox-bg-slate-400:hover   { background: var(--nox-slate-400); }
.hover\:nox-bg-gray-400:hover    { background: var(--nox-gray-400); }
.hover\:nox-bg-zinc-400:hover    { background: var(--nox-zinc-400); }
.hover\:nox-bg-red-400:hover     { background: var(--nox-red-400); }
.hover\:nox-bg-orange-400:hover  { background: var(--nox-orange-400); }
.hover\:nox-bg-amber-400:hover   { background: var(--nox-amber-400); }
.hover\:nox-bg-yellow-400:hover  { background: var(--nox-yellow-400); }
.hover\:nox-bg-lime-400:hover    { background: var(--nox-lime-400); }
.hover\:nox-bg-green-400:hover   { background: var(--nox-green-400); }
.hover\:nox-bg-emerald-400:hover { background: var(--nox-emerald-400); }
.hover\:nox-bg-teal-400:hover    { background: var(--nox-teal-400); }
.hover\:nox-bg-cyan-400:hover    { background: var(--nox-cyan-400); }
.hover\:nox-bg-blue-400:hover    { background: var(--nox-blue-400); }
.hover\:nox-bg-indigo-400:hover  { background: var(--nox-indigo-400); }
.hover\:nox-bg-violet-400:hover  { background: var(--nox-violet-400); }
.hover\:nox-bg-rose-400:hover    { background: var(--nox-rose-400); }

/* 16 colors at shade 600 hover */
.hover\:nox-text-slate-600:hover   { color: var(--nox-slate-600); }
.hover\:nox-text-gray-600:hover    { color: var(--nox-gray-600); }
.hover\:nox-text-zinc-600:hover    { color: var(--nox-zinc-600); }
.hover\:nox-text-red-600:hover     { color: var(--nox-red-600); }
.hover\:nox-text-orange-600:hover  { color: var(--nox-orange-600); }
.hover\:nox-text-amber-600:hover   { color: var(--nox-amber-600); }
.hover\:nox-text-yellow-600:hover  { color: var(--nox-yellow-600); }
.hover\:nox-text-lime-600:hover    { color: var(--nox-lime-600); }
.hover\:nox-text-green-600:hover   { color: var(--nox-green-600); }
.hover\:nox-text-emerald-600:hover { color: var(--nox-emerald-600); }
.hover\:nox-text-teal-600:hover    { color: var(--nox-teal-600); }
.hover\:nox-text-cyan-600:hover    { color: var(--nox-cyan-600); }
.hover\:nox-text-blue-600:hover    { color: var(--nox-blue-600); }
.hover\:nox-text-indigo-600:hover  { color: var(--nox-indigo-600); }
.hover\:nox-text-violet-600:hover  { color: var(--nox-violet-600); }
.hover\:nox-text-rose-600:hover    { color: var(--nox-rose-600); }

.hover\:nox-bg-slate-600:hover   { background: var(--nox-slate-600); }
.hover\:nox-bg-gray-600:hover    { background: var(--nox-gray-600); }
.hover\:nox-bg-zinc-600:hover    { background: var(--nox-zinc-600); }
.hover\:nox-bg-red-600:hover     { background: var(--nox-red-600); }
.hover\:nox-bg-orange-600:hover  { background: var(--nox-orange-600); }
.hover\:nox-bg-amber-600:hover   { background: var(--nox-amber-600); }
.hover\:nox-bg-yellow-600:hover  { background: var(--nox-yellow-600); }
.hover\:nox-bg-lime-600:hover    { background: var(--nox-lime-600); }
.hover\:nox-bg-green-600:hover   { background: var(--nox-green-600); }
.hover\:nox-bg-emerald-600:hover { background: var(--nox-emerald-600); }
.hover\:nox-bg-teal-600:hover    { background: var(--nox-teal-600); }
.hover\:nox-bg-cyan-600:hover    { background: var(--nox-cyan-600); }
.hover\:nox-bg-blue-600:hover    { background: var(--nox-blue-600); }
.hover\:nox-bg-indigo-600:hover  { background: var(--nox-indigo-600); }
.hover\:nox-bg-violet-600:hover  { background: var(--nox-violet-600); }
.hover\:nox-bg-rose-600:hover    { background: var(--nox-rose-600); }


/* ─── 4.10 Focus Variants ─── */

.focus\:nox-ring-1:focus { box-shadow: 0 0 0 1px var(--nox-accent-g); outline: none; }
.focus\:nox-ring-2:focus { box-shadow: 0 0 0 2px var(--nox-accent-g); outline: none; }
.focus\:nox-ring-3:focus { box-shadow: 0 0 0 3px var(--nox-accent-g); outline: none; }
.focus\:nox-ring-4:focus { box-shadow: 0 0 0 4px var(--nox-accent-g); outline: none; }
.focus\:nox-border-accent:focus     { border-color: var(--nox-accent); }
.focus\:nox-border-green:focus      { border-color: var(--nox-green); }
.focus\:nox-border-red:focus        { border-color: var(--nox-red); }
.focus\:nox-border-blue:focus       { border-color: var(--nox-blue); }
.focus\:nox-outline-none:focus      { outline: none; }
.focus\:nox-bg-1:focus              { background: var(--nox-bg-1); }
.focus\:nox-bg-2:focus              { background: var(--nox-bg-2); }
.focus\:nox-bg-3:focus              { background: var(--nox-bg-3); }
.focus\:nox-bg-4:focus              { background: var(--nox-bg-4); }
.focus\:nox-text-ink:focus          { color: var(--nox-ink); }
.focus\:nox-text-accent:focus       { color: var(--nox-accent); }
.focus\:nox-shadow:focus            { box-shadow: var(--nox-shadow); }
.focus\:nox-shadow-lg:focus         { box-shadow: var(--nox-shadow-lg); }

/* ─── 4.11 Focus-Visible (Keyboard Only) ─── */

.focus-visible\:nox-ring-1:focus-visible { box-shadow: 0 0 0 1px var(--nox-accent-g); outline: none; }
.focus-visible\:nox-ring-2:focus-visible { box-shadow: 0 0 0 2px var(--nox-accent-g); outline: none; }
.focus-visible\:nox-ring-3:focus-visible { box-shadow: 0 0 0 3px var(--nox-accent-g); outline: none; }
.focus-visible\:nox-ring-4:focus-visible { box-shadow: 0 0 0 4px var(--nox-accent-g); outline: none; }
.focus-visible\:nox-outline:focus-visible { outline: 2px solid var(--nox-accent); outline-offset: 2px; }
.focus-visible\:nox-outline-sm:focus-visible { outline: 1px solid var(--nox-accent); outline-offset: 1px; }
.focus-visible\:nox-border-accent:focus-visible { border-color: var(--nox-accent); }
.focus-visible\:nox-bg-3:focus-visible { background: var(--nox-bg-3); }
.focus-visible\:nox-bg-4:focus-visible { background: var(--nox-bg-4); }

/* ─── 4.12 Active Variants ─── */

.active\:nox-scale-90:active  { transform: scale(0.90); }
.active\:nox-scale-95:active  { transform: scale(0.95); }
.active\:nox-scale-98:active  { transform: scale(0.98); }
.active\:nox-bg-3:active      { background: var(--nox-bg-3); }
.active\:nox-bg-4:active      { background: var(--nox-bg-4); }
.active\:nox-bg-5:active      { background: var(--nox-bg-5); }
.active\:nox-bg-accent:active { background: var(--nox-accent); }
.active\:nox-bg-accent-g:active { background: var(--nox-accent-g); }
.active\:nox-shadow-none:active { box-shadow: none; }
.active\:nox-shadow-sm:active   { box-shadow: var(--nox-shadow-sm); }
.active\:nox-translate-y-0:active { transform: translateY(0); }
.active\:nox-translate-y-1:active { transform: translateY(1px); }
.active\:nox-opacity-80:active    { opacity: 0.8; }
.active\:nox-opacity-90:active    { opacity: 0.9; }

/* ─── 4.13 Disabled Variants ─── */

.disabled\:nox-opacity-30:disabled         { opacity: 0.3; }
.disabled\:nox-opacity-40:disabled         { opacity: 0.4; }
.disabled\:nox-opacity-50:disabled         { opacity: 0.5; }
.disabled\:nox-cursor-not-allowed:disabled { cursor: not-allowed; }
.disabled\:nox-pointer-events-none:disabled { pointer-events: none; }
.disabled\:nox-bg-3:disabled               { background: var(--nox-bg-3); }
.disabled\:nox-bg-4:disabled               { background: var(--nox-bg-4); }
.disabled\:nox-text-ink-4:disabled         { color: var(--nox-ink-4); }
.disabled\:nox-border-line:disabled        { border-color: var(--nox-line); }
.disabled\:nox-shadow-none:disabled        { box-shadow: none; }
.disabled\:nox-grayscale:disabled          { filter: grayscale(100%); }

/* ─── 4.14 Group Hover (parent .nox-group hover affects children) ─── */

.nox-group:hover .group-hover\:nox-opacity-0   { opacity: 0; }
.nox-group:hover .group-hover\:nox-opacity-50  { opacity: 0.5; }
.nox-group:hover .group-hover\:nox-opacity-70  { opacity: 0.7; }
.nox-group:hover .group-hover\:nox-opacity-100 { opacity: 1; }

.nox-group:hover .group-hover\:nox-text-ink    { color: var(--nox-ink); }
.nox-group:hover .group-hover\:nox-text-ink-2  { color: var(--nox-ink-2); }
.nox-group:hover .group-hover\:nox-text-accent { color: var(--nox-accent); }
.nox-group:hover .group-hover\:nox-text-green  { color: var(--nox-green); }
.nox-group:hover .group-hover\:nox-text-red    { color: var(--nox-red); }
.nox-group:hover .group-hover\:nox-text-white  { color: #ffffff; }

.nox-group:hover .group-hover\:nox-bg-2        { background: var(--nox-bg-2); }
.nox-group:hover .group-hover\:nox-bg-3        { background: var(--nox-bg-3); }
.nox-group:hover .group-hover\:nox-bg-4        { background: var(--nox-bg-4); }
.nox-group:hover .group-hover\:nox-bg-accent-s { background: var(--nox-accent-s); }

.nox-group:hover .group-hover\:nox-translate-x-1  { transform: translateX(4px); }
.nox-group:hover .group-hover\:nox-translate-x-2  { transform: translateX(8px); }
.nox-group:hover .group-hover\:nox-translate-x-n1 { transform: translateX(-4px); }
.nox-group:hover .group-hover\:nox-translate-y-n1 { transform: translateY(-4px); }
.nox-group:hover .group-hover\:nox-translate-y-n2 { transform: translateY(-8px); }
.nox-group:hover .group-hover\:nox-scale-105      { transform: scale(1.05); }
.nox-group:hover .group-hover\:nox-scale-110      { transform: scale(1.1); }

.nox-group:hover .group-hover\:nox-visible { visibility: visible; }
.nox-group:hover .group-hover\:nox-block   { display: block; }
.nox-group:hover .group-hover\:nox-flex    { display: flex; }
.nox-group:hover .group-hover\:nox-hidden  { display: none; }

.nox-group:hover .group-hover\:nox-shadow    { box-shadow: var(--nox-shadow); }
.nox-group:hover .group-hover\:nox-shadow-lg { box-shadow: var(--nox-shadow-lg); }
.nox-group:hover .group-hover\:nox-shadow-none { box-shadow: none; }

.nox-group:hover .group-hover\:nox-border-accent { border-color: var(--nox-accent); }
.nox-group:hover .group-hover\:nox-border-ink-4  { border-color: var(--nox-ink-4); }
.nox-group:hover .group-hover\:nox-border-line   { border-color: var(--nox-line); }

.nox-group:hover .group-hover\:nox-underline    { text-decoration: underline; }
.nox-group:hover .group-hover\:nox-no-underline { text-decoration: none; }

/* ─── 4.15 Focus-Within Variants ─── */

.focus-within\:nox-ring-2:focus-within { box-shadow: 0 0 0 2px var(--nox-accent-g); }
.focus-within\:nox-ring-4:focus-within { box-shadow: 0 0 0 4px var(--nox-accent-g); }
.focus-within\:nox-border-accent:focus-within { border-color: var(--nox-accent); }
.focus-within\:nox-bg-2:focus-within { background: var(--nox-bg-2); }
.focus-within\:nox-bg-3:focus-within { background: var(--nox-bg-3); }
.focus-within\:nox-shadow:focus-within { box-shadow: var(--nox-shadow); }

/* ─── 4.16 Placeholder Variants ─── */

.placeholder\:nox-text-ink-4::placeholder { color: var(--nox-ink-4); }
.placeholder\:nox-text-ink-3::placeholder { color: var(--nox-ink-3); }
.placeholder\:nox-text-accent::placeholder { color: var(--nox-accent); }
.placeholder\:nox-italic::placeholder { font-style: italic; }
.placeholder\:nox-opacity-50::placeholder { opacity: 0.5; }
.placeholder\:nox-opacity-70::placeholder { opacity: 0.7; }

/* ─── 4.17 First/Last Child Variants ─── */

.first\:nox-rounded-t-lg:first-child { border-top-left-radius: var(--nox-r-lg); border-top-right-radius: var(--nox-r-lg); }
.first\:nox-border-t-0:first-child { border-top-width: 0; }
.first\:nox-mt-0:first-child { margin-top: 0; }
.first\:nox-pt-0:first-child { padding-top: 0; }

.last\:nox-rounded-b-lg:last-child { border-bottom-left-radius: var(--nox-r-lg); border-bottom-right-radius: var(--nox-r-lg); }
.last\:nox-border-b-0:last-child { border-bottom-width: 0; }
.last\:nox-mb-0:last-child { margin-bottom: 0; }
.last\:nox-pb-0:last-child { padding-bottom: 0; }

/* ─── 4.18 Odd/Even Variants (for table rows) ─── */

.odd\:nox-bg-2:nth-child(odd) { background: var(--nox-bg-2); }
.odd\:nox-bg-3:nth-child(odd) { background: var(--nox-bg-3); }
.even\:nox-bg-2:nth-child(even) { background: var(--nox-bg-2); }
.even\:nox-bg-3:nth-child(even) { background: var(--nox-bg-3); }
.even\:nox-bg-1:nth-child(even) { background: var(--nox-bg-1); }


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 5 — NEW COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── 5.1 Drawer (left/right slide-in panel) ─── */

.nox-drawer-overlay {
  position: fixed;
  inset: 0;
  background: var(--nox-overlay);
  z-index: 900;
  opacity: 0;
  visibility: hidden;
  transition: all var(--nox-ease-slow);
}
.nox-drawer-overlay.open {
  opacity: 1;
  visibility: visible;
}

.nox-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 320px;
  max-width: 85vw;
  background: var(--nox-bg-2);
  border-right: 1px solid var(--nox-line);
  z-index: 901;
  transform: translateX(-100%);
  transition: transform var(--nox-ease-slow);
  display: flex;
  flex-direction: column;
  box-shadow: var(--nox-shadow-xl);
}
.nox-drawer.right {
  right: 0;
  left: auto;
  border-right: none;
  border-left: 1px solid var(--nox-line);
  transform: translateX(100%);
}
.nox-drawer.open {
  transform: translateX(0);
}
.nox-drawer.nox-drawer-sm { width: 260px; }
.nox-drawer.nox-drawer-lg { width: 420px; }
.nox-drawer.nox-drawer-xl { width: 560px; }
.nox-drawer.nox-drawer-full { width: 100vw; max-width: 100vw; }

.nox-drawer-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--nox-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.nox-drawer-header-title {
  font-family: var(--nox-font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--nox-ink);
}
.nox-drawer-close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--nox-r);
  border: none;
  background: none;
  color: var(--nox-ink-3);
  cursor: pointer;
  font-size: 16px;
  transition: all 0.12s;
}
.nox-drawer-close:hover {
  background: var(--nox-bg-4);
  color: var(--nox-ink);
}
.nox-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  scrollbar-width: thin;
  scrollbar-color: var(--nox-bg-5) transparent;
}
.nox-drawer-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--nox-line);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}


/* ─── 5.2 Hover Card ─── */

.nox-hover-card {
  position: relative;
  display: inline-block;
}
.nox-hover-card-content {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) scale(0.95);
  opacity: 0;
  visibility: hidden;
  transition: all 0.15s;
  z-index: 300;
  min-width: 280px;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  box-shadow: var(--nox-shadow-xl);
  padding: var(--nox-4);
  pointer-events: none;
}
.nox-hover-card:hover .nox-hover-card-content {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
  pointer-events: auto;
}
.nox-hover-card-content.top {
  bottom: calc(100% + 8px);
  top: auto;
}
.nox-hover-card-content.bottom {
  bottom: auto;
  top: calc(100% + 8px);
}
.nox-hover-card-content.left {
  left: 0;
  transform: translateX(0) scale(0.95);
}
.nox-hover-card:hover .nox-hover-card-content.left {
  transform: translateX(0) scale(1);
}
.nox-hover-card-content.right {
  left: auto;
  right: 0;
  transform: translateX(0) scale(0.95);
}
.nox-hover-card:hover .nox-hover-card-content.right {
  transform: translateX(0) scale(1);
}
.nox-hover-card-arrow {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: var(--nox-bg-2);
  border-right: 1px solid var(--nox-line);
  border-bottom: 1px solid var(--nox-line);
}


/* ─── 5.3 Resizable Panel Handle ─── */

.nox-resize-handle {
  width: 4px;
  cursor: col-resize;
  background: transparent;
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s;
}
.nox-resize-handle:hover {
  background: var(--nox-accent);
}
.nox-resize-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 24px;
  background: var(--nox-ink-4);
  border-radius: 1px;
  opacity: 0;
  transition: opacity 0.15s;
}
.nox-resize-handle:hover::after {
  opacity: 1;
}
.nox-resize-handle.active {
  background: var(--nox-accent);
}
.nox-resize-handle.active::after {
  opacity: 1;
  background: var(--nox-accent);
}
.nox-resize-handle-h {
  height: 4px;
  width: 100%;
  cursor: row-resize;
}
.nox-resize-handle-h::after {
  width: 24px;
  height: 2px;
}


/* ─── 5.4 Toolbar ─── */

.nox-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: var(--nox-bg-3);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-lg);
}
.nox-toolbar-vertical {
  flex-direction: column;
  width: fit-content;
}
.nox-toolbar-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--nox-r);
  border: none;
  background: none;
  color: var(--nox-ink-3);
  cursor: pointer;
  transition: all 0.12s;
  font-size: 14px;
  flex-shrink: 0;
}
.nox-toolbar-btn:hover {
  background: var(--nox-bg-4);
  color: var(--nox-ink);
}
.nox-toolbar-btn.active {
  background: var(--nox-accent-s);
  color: var(--nox-accent);
}
.nox-toolbar-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.nox-toolbar-btn-lg {
  width: 36px;
  height: 36px;
  font-size: 16px;
}
.nox-toolbar-sep {
  width: 1px;
  height: 20px;
  background: var(--nox-line);
  margin: 0 4px;
  flex-shrink: 0;
}
.nox-toolbar-vertical .nox-toolbar-sep {
  width: 20px;
  height: 1px;
  margin: 4px 0;
}
.nox-toolbar-group {
  display: flex;
  align-items: center;
  gap: 1px;
  background: var(--nox-line);
  border-radius: var(--nox-r);
  overflow: hidden;
}
.nox-toolbar-group .nox-toolbar-btn {
  border-radius: 0;
}


/* ─── 5.5 Menubar ─── */

.nox-menubar {
  display: flex;
  align-items: center;
  background: var(--nox-bg-1);
  border-bottom: 1px solid var(--nox-line);
  padding: 0 8px;
  height: 36px;
}
.nox-menubar-item {
  position: relative;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--nox-ink-3);
  cursor: pointer;
  border-radius: var(--nox-r);
  transition: all 0.12s;
  white-space: nowrap;
  user-select: none;
}
.nox-menubar-item:hover {
  background: var(--nox-bg-3);
  color: var(--nox-ink);
}
.nox-menubar-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 200px;
  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-menubar-item:hover .nox-menubar-dropdown,
.nox-menubar-item.open .nox-menubar-dropdown {
  display: block;
}
.nox-menubar-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--nox-ink-2);
  border-radius: var(--nox-r);
  cursor: pointer;
  transition: all 0.08s;
  white-space: nowrap;
}
.nox-menubar-option:hover {
  background: var(--nox-bg-3);
  color: var(--nox-ink);
}
.nox-menubar-option.disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}
.nox-menubar-option-icon {
  width: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--nox-ink-3);
  flex-shrink: 0;
}
.nox-menubar-option-shortcut {
  margin-left: auto;
  font-family: var(--nox-font-mono);
  font-size: 10px;
  color: var(--nox-ink-4);
  flex-shrink: 0;
}
.nox-menubar-divider {
  height: 1px;
  background: var(--nox-line);
  margin: 4px 0;
}


/* ─── 5.6 Metric Comparison Card ─── */

.nox-metric-compare {
  display: flex;
  gap: var(--nox-4);
  align-items: stretch;
}
.nox-metric-compare-item {
  flex: 1;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-lg);
  padding: var(--nox-4);
  text-align: center;
}
.nox-metric-compare-label {
  font-family: var(--nox-font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--nox-ink-4);
  margin-bottom: 6px;
}
.nox-metric-compare-value {
  font-family: var(--nox-font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--nox-ink);
  line-height: 1;
}
.nox-metric-compare-delta {
  font-family: var(--nox-font-mono);
  font-size: 11px;
  margin-top: 6px;
}
.nox-metric-compare-delta.up { color: var(--nox-green); }
.nox-metric-compare-delta.down { color: var(--nox-red); }
.nox-metric-compare-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--nox-font-mono);
  font-size: 10px;
  color: var(--nox-ink-4);
  padding: 0 8px;
  flex-shrink: 0;
}


/* ─── 5.7 Leaderboard / Ranking ─── */

.nox-leaderboard {
  display: flex;
  flex-direction: column;
}
.nox-leader-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--nox-line-2);
  transition: background 0.12s;
}
.nox-leader-item:last-child {
  border-bottom: none;
}
.nox-leader-item:hover {
  background: var(--nox-bg-3);
}
.nox-leader-rank {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--nox-font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--nox-ink-3);
  flex-shrink: 0;
}
.nox-leader-item:nth-child(1) .nox-leader-rank {
  color: var(--nox-yellow);
  background: var(--nox-yellow-s);
  border-radius: 50%;
}
.nox-leader-item:nth-child(2) .nox-leader-rank {
  color: var(--nox-ink-3);
  background: var(--nox-bg-4);
  border-radius: 50%;
}
.nox-leader-item:nth-child(3) .nox-leader-rank {
  color: var(--nox-orange);
  background: var(--nox-orange-s);
  border-radius: 50%;
}
.nox-leader-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--nox-bg-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--nox-ink-2);
  flex-shrink: 0;
  overflow: hidden;
}
.nox-leader-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nox-leader-content {
  flex: 1;
  min-width: 0;
}
.nox-leader-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--nox-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nox-leader-meta {
  font-size: 11px;
  color: var(--nox-ink-3);
}
.nox-leader-score {
  font-family: var(--nox-font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--nox-ink);
  flex-shrink: 0;
}
.nox-leader-bar {
  flex: 1;
  max-width: 120px;
  height: 6px;
  background: var(--nox-bg-4);
  border-radius: 3px;
  overflow: hidden;
}
.nox-leader-bar-fill {
  height: 100%;
  background: var(--nox-accent);
  border-radius: 3px;
  transition: width 0.6s ease;
}
.nox-leader-change {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  flex-shrink: 0;
}
.nox-leader-change.up { color: var(--nox-green); }
.nox-leader-change.down { color: var(--nox-red); }
.nox-leader-change.flat { color: var(--nox-ink-4); }


/* ─── 5.8 Dashboard Widget Frame ─── */

.nox-widget {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.18s;
}
.nox-widget:hover {
  border-color: var(--nox-bg-5);
}
.nox-widget-header {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--nox-line-2);
  flex-shrink: 0;
}
.nox-widget-title {
  font-family: var(--nox-font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--nox-ink);
}
.nox-widget-subtitle {
  font-size: 11px;
  color: var(--nox-ink-3);
  margin-top: 2px;
}
.nox-widget-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nox-widget-action {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--nox-r);
  border: none;
  background: none;
  color: var(--nox-ink-4);
  cursor: pointer;
  font-size: 13px;
  transition: all 0.12s;
}
.nox-widget-action:hover {
  background: var(--nox-bg-4);
  color: var(--nox-ink-2);
}
.nox-widget-body {
  flex: 1;
  padding: 16px;
  overflow: hidden;
}
.nox-widget-body.tight {
  padding: 0;
}
.nox-widget-body.scroll {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--nox-bg-5) transparent;
}
.nox-widget-footer {
  padding: 8px 16px;
  border-top: 1px solid var(--nox-line-2);
  font-size: 11px;
  color: var(--nox-ink-4);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nox-widget-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 800;
  border-radius: 0;
  max-width: none;
}
.nox-widget-loading {
  position: relative;
}
.nox-widget-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--nox-bg-2);
  opacity: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.nox-widget-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  text-align: center;
  color: var(--nox-ink-4);
  font-size: 12px;
  gap: 8px;
}
.nox-widget-empty-icon {
  font-size: 32px;
  opacity: 0.3;
}


/* ─── 5.9 Scroll Area ─── */

.nox-scroll-area {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--nox-bg-5) transparent;
}
.nox-scroll-area::-webkit-scrollbar { width: 6px; }
.nox-scroll-area::-webkit-scrollbar-track { background: transparent; }
.nox-scroll-area::-webkit-scrollbar-thumb { background: var(--nox-bg-5); border-radius: 3px; }
.nox-scroll-area::-webkit-scrollbar-thumb:hover { background: var(--nox-ink-4); }

.nox-scroll-area-h {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--nox-bg-5) transparent;
}
.nox-scroll-area-h::-webkit-scrollbar { height: 6px; }
.nox-scroll-area-h::-webkit-scrollbar-track { background: transparent; }
.nox-scroll-area-h::-webkit-scrollbar-thumb { background: var(--nox-bg-5); border-radius: 3px; }
.nox-scroll-area-h::-webkit-scrollbar-thumb:hover { background: var(--nox-ink-4); }

.nox-scroll-area-none { scrollbar-width: none; }
.nox-scroll-area-none::-webkit-scrollbar { display: none; }

.nox-scroll-area-xl::-webkit-scrollbar { width: 10px; }
.nox-scroll-area-xl::-webkit-scrollbar-thumb { border-radius: 5px; }


/* ─── 5.10 Date Display Component ─── */

.nox-date-display {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: 48px;
  height: 56px;
  background: var(--nox-bg-3);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-lg);
  overflow: hidden;
}
.nox-date-month {
  font-family: var(--nox-font-mono);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--nox-bg-0);
  background: var(--nox-accent);
  width: 100%;
  text-align: center;
  padding: 2px 0;
}
.nox-date-day {
  font-family: var(--nox-font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--nox-ink);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.nox-date-year {
  font-family: var(--nox-font-mono);
  font-size: 8px;
  color: var(--nox-ink-4);
  margin-bottom: 2px;
}
.nox-date-display-lg {
  width: 64px;
  height: 72px;
}
.nox-date-display-lg .nox-date-month { font-size: 9px; padding: 3px 0; }
.nox-date-display-lg .nox-date-day { font-size: 28px; }


/* ─── 5.11 Info / Stat List ─── */

.nox-info-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nox-info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--nox-r);
  transition: background 0.12s;
}
.nox-info-item:hover {
  background: var(--nox-bg-3);
}
.nox-info-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--nox-r);
  background: var(--nox-bg-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--nox-ink-3);
  flex-shrink: 0;
}
.nox-info-icon.accent {
  background: var(--nox-accent-s);
  color: var(--nox-accent);
}
.nox-info-icon.green {
  background: var(--nox-green-s);
  color: var(--nox-green);
}
.nox-info-icon.red {
  background: var(--nox-red-s);
  color: var(--nox-red);
}
.nox-info-icon.blue {
  background: var(--nox-blue-s);
  color: var(--nox-blue);
}
.nox-info-body {
  flex: 1;
  min-width: 0;
}
.nox-info-label {
  font-size: 12px;
  color: var(--nox-ink-3);
}
.nox-info-value {
  font-family: var(--nox-font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--nox-ink);
  flex-shrink: 0;
}
.nox-info-desc {
  font-size: 11px;
  color: var(--nox-ink-4);
  margin-top: 1px;
}


/* ─── 5.12 Inline Editable Cell ─── */

.nox-editable {
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--nox-r);
  border: 1px dashed transparent;
  transition: all 0.12s;
  position: relative;
}
.nox-editable:hover {
  border-color: var(--nox-line);
  background: var(--nox-bg-3);
}
.nox-editable:hover::after {
  content: '\270E';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: var(--nox-ink-4);
}
.nox-editable.editing {
  border-color: var(--nox-accent);
  background: var(--nox-bg-1);
  border-style: solid;
}
.nox-editable.editing::after {
  display: none;
}
.nox-editable-input {
  border: none;
  background: none;
  outline: none;
  font: inherit;
  color: var(--nox-ink);
  width: 100%;
  padding: 0;
  margin: 0;
}


/* ─── 5.13 Announcement Bar ─── */

.nox-announcement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--nox-accent);
  color: var(--nox-bg-0);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}
.nox-announcement a {
  color: inherit;
  text-decoration: underline;
  font-weight: 600;
}
.nox-announcement-close {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
  margin-left: auto;
  transition: opacity 0.12s;
  line-height: 1;
}
.nox-announcement-close:hover {
  opacity: 1;
}
.nox-announcement.info {
  background: var(--nox-blue);
}
.nox-announcement.warning {
  background: var(--nox-yellow);
  color: var(--nox-ink);
}
.nox-announcement.error {
  background: var(--nox-red);
}
.nox-announcement.success {
  background: var(--nox-green);
}
.nox-announcement.gradient {
  background: linear-gradient(90deg, var(--nox-accent), var(--nox-accent-2));
}


/* ─── 5.14 Feature Flag Badges ─── */

.nox-new-badge {
  position: relative;
}
.nox-new-badge::after {
  content: 'NEW';
  position: absolute;
  top: -6px;
  right: -8px;
  font-family: var(--nox-font-mono);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--nox-accent);
  color: var(--nox-bg-0);
  line-height: 1.3;
  pointer-events: none;
  z-index: 1;
}
.nox-beta-badge {
  position: relative;
}
.nox-beta-badge::after {
  content: 'BETA';
  position: absolute;
  top: -6px;
  right: -12px;
  font-family: var(--nox-font-mono);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--nox-purple);
  color: #ffffff;
  line-height: 1.3;
  pointer-events: none;
  z-index: 1;
}
.nox-pro-badge {
  position: relative;
}
.nox-pro-badge::after {
  content: 'PRO';
  position: absolute;
  top: -6px;
  right: -10px;
  font-family: var(--nox-font-mono);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 1px 4px;
  border-radius: 3px;
  background: linear-gradient(135deg, #f59e0b, #b45309);
  color: #ffffff;
  line-height: 1.3;
  pointer-events: none;
  z-index: 1;
}
.nox-alpha-badge {
  position: relative;
}
.nox-alpha-badge::after {
  content: 'ALPHA';
  position: absolute;
  top: -6px;
  right: -14px;
  font-family: var(--nox-font-mono);
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--nox-red);
  color: #ffffff;
  line-height: 1.3;
  pointer-events: none;
  z-index: 1;
}


/* ─── 5.15 Status Timeline (horizontal) ─── */

.nox-status-timeline {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px 0;
}
.nox-status-step {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
}
.nox-status-step:last-child {
  flex: 0;
}
.nox-status-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--nox-line);
  background: var(--nox-bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--nox-ink-4);
  flex-shrink: 0;
  z-index: 1;
  transition: all 0.2s;
}
.nox-status-step.active .nox-status-dot {
  border-color: var(--nox-accent);
  background: var(--nox-accent);
  color: var(--nox-bg-0);
}
.nox-status-step.completed .nox-status-dot {
  border-color: var(--nox-green);
  background: var(--nox-green);
  color: #ffffff;
}
.nox-status-step.error .nox-status-dot {
  border-color: var(--nox-red);
  background: var(--nox-red);
  color: #ffffff;
}
.nox-status-step.warning .nox-status-dot {
  border-color: var(--nox-yellow);
  background: var(--nox-yellow);
  color: var(--nox-bg-0);
}
.nox-status-line {
  flex: 1;
  height: 2px;
  background: var(--nox-line);
}
.nox-status-step.completed .nox-status-line {
  background: var(--nox-green);
}
.nox-status-step.active .nox-status-line {
  background: linear-gradient(to right, var(--nox-accent), var(--nox-line));
}
.nox-status-label {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--nox-ink-3);
  white-space: nowrap;
}
.nox-status-dot-wrapper {
  position: relative;
}
.nox-status-dot-lg {
  width: 28px;
  height: 28px;
  font-size: 13px;
}


/* ─── 5.16 Multi-Select Tokens ─── */

.nox-multi-select {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 8px;
  background: var(--nox-bg-1);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r);
  min-height: 38px;
  cursor: text;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.nox-multi-select:focus-within {
  border-color: var(--nox-accent);
  box-shadow: 0 0 0 2px var(--nox-accent-s);
}
.nox-multi-token {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--nox-accent-s);
  border: 1px solid var(--nox-accent-g);
  border-radius: 16px;
  font-size: 11px;
  color: var(--nox-accent);
}
.nox-multi-token.green {
  background: var(--nox-green-s);
  border-color: rgba(58,138,92,0.2);
  color: var(--nox-green);
}
.nox-multi-token.red {
  background: var(--nox-red-s);
  border-color: rgba(181,69,58,0.2);
  color: var(--nox-red);
}
.nox-multi-token.blue {
  background: var(--nox-blue-s);
  border-color: rgba(59,130,166,0.2);
  color: var(--nox-blue);
}
.nox-multi-token-remove {
  cursor: pointer;
  font-size: 12px;
  opacity: 0.6;
  transition: opacity 0.12s;
  background: none;
  border: none;
  color: inherit;
  line-height: 1;
  padding: 0;
}
.nox-multi-token-remove:hover {
  opacity: 1;
}
.nox-multi-select input {
  border: none;
  background: none;
  outline: none;
  font-size: 12px;
  color: var(--nox-ink);
  flex: 1;
  min-width: 80px;
  padding: 2px 4px;
}
.nox-multi-select input::placeholder {
  color: var(--nox-ink-4);
}


/* ─── 5.17 Pricing Toggle ─── */

.nox-pricing-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin-bottom: var(--nox-6);
}
.nox-pricing-toggle-label {
  font-size: 13px;
  color: var(--nox-ink-3);
  cursor: pointer;
  transition: color 0.12s;
}
.nox-pricing-toggle-label.active {
  color: var(--nox-ink);
  font-weight: 600;
}
.nox-pricing-save {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  color: var(--nox-green);
  background: var(--nox-green-s);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}
.nox-pricing-switch {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--nox-bg-4);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.18s;
}
.nox-pricing-switch.active {
  background: var(--nox-accent);
}
.nox-pricing-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.18s;
}
.nox-pricing-switch.active::after {
  transform: translateX(20px);
}


/* ─── 5.18 Reading Progress Bar ─── */

.nox-reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 9999;
  pointer-events: none;
}
.nox-reading-progress-fill {
  height: 100%;
  background: var(--nox-accent);
  width: 0;
  transition: width 0.1s linear;
}
.nox-reading-progress.thick {
  height: 3px;
}
.nox-reading-progress.gradient .nox-reading-progress-fill {
  background: linear-gradient(90deg, var(--nox-accent), var(--nox-accent-2));
}


/* ─── 5.19 Keyboard Shortcut Display Grid ─── */

.nox-shortcuts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--nox-line);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-lg);
  overflow: hidden;
}
.nox-shortcut-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--nox-bg-2);
  font-size: 12px;
  color: var(--nox-ink-2);
}
.nox-shortcut-cell .nox-kbd {
  font-size: 10px;
}
.nox-shortcuts-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.nox-shortcuts-grid-1 {
  grid-template-columns: 1fr;
}


/* ─── 5.20 Log Viewer ─── */

.nox-log-viewer {
  font-family: var(--nox-font-mono);
  font-size: 11px;
  background: var(--nox-bg-1);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-lg);
  overflow: hidden;
  max-height: 400px;
  display: flex;
  flex-direction: column;
}
.nox-log-header {
  padding: 8px 14px;
  background: var(--nox-bg-3);
  border-bottom: 1px solid var(--nox-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.nox-log-header-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--nox-ink-2);
}
.nox-log-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--nox-bg-5) transparent;
}
.nox-log-line {
  display: flex;
  padding: 2px 14px;
  line-height: 1.6;
  transition: background 0.08s;
}
.nox-log-line:hover {
  background: var(--nox-bg-3);
}
.nox-log-time {
  color: var(--nox-ink-4);
  width: 80px;
  flex-shrink: 0;
}
.nox-log-level {
  width: 50px;
  flex-shrink: 0;
  font-weight: 600;
}
.nox-log-level.error { color: var(--nox-red); }
.nox-log-level.warn  { color: var(--nox-yellow); }
.nox-log-level.info  { color: var(--nox-blue); }
.nox-log-level.debug { color: var(--nox-ink-4); }
.nox-log-level.trace { color: var(--nox-purple); }
.nox-log-msg {
  flex: 1;
  color: var(--nox-ink-2);
  word-break: break-all;
}
.nox-log-line.highlight {
  background: var(--nox-yellow-s);
}
.nox-log-filter {
  padding: 6px 14px;
  border-bottom: 1px solid var(--nox-line);
  display: flex;
  align-items: center;
  gap: 6px;
}
.nox-log-filter input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-family: var(--nox-font-mono);
  font-size: 11px;
  color: var(--nox-ink);
}


/* ─── 5.21 Cookie Consent Bar ─── */

.nox-cookie-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--nox-bg-2);
  border-top: 1px solid var(--nox-line);
  padding: 16px 24px;
  z-index: 9998;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
  transform: translateY(100%);
  transition: transform var(--nox-ease-slow);
}
.nox-cookie-bar.show {
  transform: translateY(0);
}
.nox-cookie-bar-text {
  flex: 1;
  font-size: 12px;
  color: var(--nox-ink-2);
  line-height: 1.5;
}
.nox-cookie-bar-text a {
  color: var(--nox-accent);
  text-decoration: underline;
}
.nox-cookie-bar-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.nox-cookie-bar-compact {
  max-width: 420px;
  left: auto;
  right: 16px;
  bottom: 16px;
  border-radius: var(--nox-r-xl);
  border: 1px solid var(--nox-line);
  flex-direction: column;
  align-items: flex-start;
}


/* ─── 5.22 Aspect Ratio Boxes ─── */

.nox-aspect-1-1 {
  aspect-ratio: 1 / 1;
}
.nox-aspect-16-9 {
  aspect-ratio: 16 / 9;
}
.nox-aspect-4-3 {
  aspect-ratio: 4 / 3;
}
.nox-aspect-3-2 {
  aspect-ratio: 3 / 2;
}
.nox-aspect-21-9 {
  aspect-ratio: 21 / 9;
}
.nox-aspect-9-16 {
  aspect-ratio: 9 / 16;
}
.nox-aspect-3-4 {
  aspect-ratio: 3 / 4;
}
.nox-aspect-2-3 {
  aspect-ratio: 2 / 3;
}


/* ─── 5.23 Notification Stacking (multiple toasts) ─── */

.nox-toast-stack {
  position: fixed;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 420px;
  width: 100%;
}
.nox-toast-stack.top-right {
  top: 16px;
  right: 16px;
}
.nox-toast-stack.top-left {
  top: 16px;
  left: 16px;
}
.nox-toast-stack.top-center {
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
}
.nox-toast-stack.bottom-right {
  bottom: 16px;
  right: 16px;
}
.nox-toast-stack.bottom-left {
  bottom: 16px;
  left: 16px;
}
.nox-toast-stack.bottom-center {
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
}
.nox-toast-stack .nox-toast {
  pointer-events: auto;
  animation: nox-toast-in 0.25s ease;
}
.nox-toast-stack .nox-toast.exiting {
  animation: nox-toast-out 0.2s ease forwards;
}

@keyframes nox-toast-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes nox-toast-out {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-8px) scale(0.96); }
}


/* ─── 5.24 Table Row Expansion Animation ─── */

.nox-table-expandable tr.expandable {
  cursor: pointer;
}
.nox-table-expandable tr.expandable:hover {
  background: var(--nox-bg-3);
}
.nox-table-expand-toggle {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  color: var(--nox-ink-3);
  cursor: pointer;
  transition: transform 0.2s;
  font-size: 10px;
}
.nox-table-expand-toggle.open {
  transform: rotate(90deg);
}
.nox-table-expand-row {
  background: var(--nox-bg-1);
}
.nox-table-expand-row td {
  padding: 0;
  border-bottom: 1px solid var(--nox-line-2);
}
.nox-table-expand-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 16px;
}
.nox-table-expand-content.open {
  max-height: 500px;
  padding: 16px;
}


/* ─── 5.25 Collapsible Sidebar Animation ─── */

.nox-sidebar-collapsible {
  width: var(--nox-sidebar-w);
  transition: width var(--nox-ease-slow);
  overflow: hidden;
}
.nox-sidebar-collapsible.collapsed {
  width: var(--nox-sidebar-compact-w);
}
.nox-sidebar-collapsible .nox-sidebar-text {
  white-space: nowrap;
  opacity: 1;
  transition: opacity 0.15s;
}
.nox-sidebar-collapsible.collapsed .nox-sidebar-text {
  opacity: 0;
  pointer-events: none;
}
.nox-sidebar-toggle {
  width: 28px;
  height: 28px;
  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);
  cursor: pointer;
  font-size: 12px;
  transition: all 0.12s;
  position: absolute;
  right: -14px;
  top: 16px;
  z-index: 10;
}
.nox-sidebar-toggle:hover {
  background: var(--nox-bg-4);
  color: var(--nox-ink);
}
.nox-sidebar-collapsible.collapsed .nox-sidebar-toggle {
  transform: rotate(180deg);
}


/* ─── 5.26 Card Skeleton Loading ─── */

@keyframes nox-skeleton-pulse {
  0% { opacity: 1; }
  50% { opacity: 0.4; }
  100% { opacity: 1; }
}
@keyframes nox-skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.nox-skeleton {
  background: var(--nox-bg-4);
  border-radius: var(--nox-r);
  animation: nox-skeleton-pulse 1.8s ease-in-out infinite;
}
.nox-skeleton-shimmer {
  background: linear-gradient(90deg, var(--nox-bg-4) 25%, var(--nox-bg-5) 50%, var(--nox-bg-4) 75%);
  background-size: 200% 100%;
  animation: nox-skeleton-shimmer 1.5s ease infinite;
}
.nox-skeleton-text {
  height: 12px;
  border-radius: 6px;
  margin-bottom: 8px;
}
.nox-skeleton-text.short { width: 60%; }
.nox-skeleton-text.medium { width: 80%; }
.nox-skeleton-text.full { width: 100%; }

.nox-skeleton-heading {
  height: 18px;
  width: 40%;
  border-radius: 6px;
  margin-bottom: 12px;
}
.nox-skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.nox-skeleton-avatar-lg {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}
.nox-skeleton-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--nox-r-lg);
}
.nox-skeleton-btn {
  width: 80px;
  height: 32px;
  border-radius: var(--nox-r);
}
.nox-skeleton-badge {
  width: 48px;
  height: 18px;
  border-radius: 9px;
}

/* Skeleton layout: card */
.nox-skeleton-card {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Skeleton layout: table row */
.nox-skeleton-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--nox-line-2);
}
.nox-skeleton-row .nox-skeleton { flex-shrink: 0; }

/* Skeleton layout: KPI */
.nox-skeleton-kpi {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  padding: 16px;
}
.nox-skeleton-kpi-label {
  height: 10px;
  width: 50%;
  border-radius: 5px;
  margin-bottom: 12px;
}
.nox-skeleton-kpi-value {
  height: 28px;
  width: 60%;
  border-radius: 6px;
  margin-bottom: 8px;
}
.nox-skeleton-kpi-delta {
  height: 12px;
  width: 30%;
  border-radius: 6px;
}

/* Skeleton layout: list */
.nox-skeleton-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}


/* ─── 5.27 Input with Clear Button ─── */

.nox-input-clearable {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
}
.nox-input-clearable input {
  width: 100%;
  padding-right: 32px;
}
.nox-input-clear-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: var(--nox-bg-5);
  color: var(--nox-ink-3);
  font-size: 10px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s;
  line-height: 1;
}
.nox-input-clearable:hover .nox-input-clear-btn,
.nox-input-clearable input:focus ~ .nox-input-clear-btn {
  opacity: 1;
}
.nox-input-clear-btn:hover {
  background: var(--nox-ink-4);
  color: var(--nox-ink);
}


/* ─── 5.28 Search Results Dropdown ─── */

.nox-search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-lg);
  box-shadow: var(--nox-shadow-xl);
  z-index: 300;
  max-height: 360px;
  overflow-y: auto;
  display: none;
  scrollbar-width: thin;
  scrollbar-color: var(--nox-bg-5) transparent;
}
.nox-search-dropdown.open {
  display: block;
}
.nox-search-dropdown-group {
  padding: 8px 0;
  border-bottom: 1px solid var(--nox-line-2);
}
.nox-search-dropdown-group:last-child {
  border-bottom: none;
}
.nox-search-dropdown-label {
  padding: 4px 14px;
  font-family: var(--nox-font-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--nox-ink-4);
}
.nox-search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.08s;
}
.nox-search-result:hover,
.nox-search-result.active {
  background: var(--nox-bg-3);
}
.nox-search-result-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--nox-r);
  background: var(--nox-bg-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--nox-ink-3);
  flex-shrink: 0;
}
.nox-search-result-body {
  flex: 1;
  min-width: 0;
}
.nox-search-result-title {
  font-size: 13px;
  color: var(--nox-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nox-search-result-title mark {
  background: var(--nox-accent-s);
  color: var(--nox-accent);
  border-radius: 2px;
  padding: 0 2px;
}
.nox-search-result-desc {
  font-size: 11px;
  color: var(--nox-ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nox-search-result-meta {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  color: var(--nox-ink-4);
  flex-shrink: 0;
}
.nox-search-empty {
  padding: 24px 14px;
  text-align: center;
  color: var(--nox-ink-4);
  font-size: 12px;
}
.nox-search-footer {
  padding: 8px 14px;
  border-top: 1px solid var(--nox-line-2);
  font-size: 11px;
  color: var(--nox-ink-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
}


/* ─── 5.29 Breadcrumb with Dropdown ─── */

.nox-breadcrumb-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.nox-breadcrumb-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--nox-r);
  border: none;
  background: none;
  font-size: 12px;
  color: var(--nox-ink-3);
  cursor: pointer;
  transition: all 0.12s;
}
.nox-breadcrumb-trigger:hover {
  background: var(--nox-bg-3);
  color: var(--nox-ink);
}
.nox-breadcrumb-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-breadcrumb-dropdown:hover .nox-breadcrumb-menu,
.nox-breadcrumb-dropdown.open .nox-breadcrumb-menu {
  display: block;
}
.nox-breadcrumb-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--nox-ink-2);
  border-radius: var(--nox-r);
  cursor: pointer;
  transition: background 0.08s;
}
.nox-breadcrumb-menu-item:hover {
  background: var(--nox-bg-3);
  color: var(--nox-ink);
}


/* ─── 5.30 Stats Comparison (before/after with arrow) ─── */

.nox-stats-compare {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-lg);
}
.nox-stats-compare-block {
  text-align: center;
  flex: 1;
}
.nox-stats-compare-label {
  font-family: var(--nox-font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--nox-ink-4);
  margin-bottom: 4px;
}
.nox-stats-compare-value {
  font-family: var(--nox-font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--nox-ink);
  line-height: 1;
}
.nox-stats-compare-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  color: var(--nox-ink-4);
  font-size: 16px;
}
.nox-stats-compare-change {
  font-family: var(--nox-font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}
.nox-stats-compare-change.up {
  color: var(--nox-green);
  background: var(--nox-green-s);
}
.nox-stats-compare-change.down {
  color: var(--nox-red);
  background: var(--nox-red-s);
}
.nox-stats-compare-change.flat {
  color: var(--nox-ink-4);
  background: var(--nox-bg-4);
}


/* ─── 5.31 Mini Calendar (Month Picker) ─── */

.nox-mini-calendar {
  width: 280px;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  padding: 12px;
  user-select: none;
}
.nox-mini-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.nox-mini-cal-title {
  font-family: var(--nox-font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--nox-ink);
}
.nox-mini-cal-nav {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--nox-r);
  border: none;
  background: none;
  color: var(--nox-ink-3);
  cursor: pointer;
  font-size: 12px;
  transition: all 0.12s;
}
.nox-mini-cal-nav:hover {
  background: var(--nox-bg-4);
  color: var(--nox-ink);
}
.nox-mini-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  margin-bottom: 4px;
}
.nox-mini-cal-weekday {
  text-align: center;
  font-family: var(--nox-font-mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--nox-ink-4);
  text-transform: uppercase;
  padding: 4px 0;
}
.nox-mini-cal-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.nox-mini-cal-day {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--nox-r);
  font-size: 12px;
  color: var(--nox-ink-2);
  cursor: pointer;
  transition: all 0.08s;
  border: none;
  background: none;
}
.nox-mini-cal-day:hover {
  background: var(--nox-bg-4);
  color: var(--nox-ink);
}
.nox-mini-cal-day.today {
  border: 1px solid var(--nox-accent);
  color: var(--nox-accent);
  font-weight: 600;
}
.nox-mini-cal-day.selected {
  background: var(--nox-accent);
  color: var(--nox-bg-0);
  font-weight: 600;
}
.nox-mini-cal-day.other-month {
  color: var(--nox-ink-4);
  opacity: 0.4;
}
.nox-mini-cal-day.disabled {
  opacity: 0.2;
  cursor: not-allowed;
  pointer-events: none;
}
.nox-mini-cal-day.range {
  background: var(--nox-accent-s);
  border-radius: 0;
}
.nox-mini-cal-day.range-start {
  background: var(--nox-accent);
  color: var(--nox-bg-0);
  border-radius: var(--nox-r) 0 0 var(--nox-r);
}
.nox-mini-cal-day.range-end {
  background: var(--nox-accent);
  color: var(--nox-bg-0);
  border-radius: 0 var(--nox-r) var(--nox-r) 0;
}
.nox-mini-cal-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--nox-accent);
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
}


/* ─── 5.32 Time Slots Grid ─── */

.nox-time-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: 6px;
}
.nox-time-slot {
  padding: 8px 12px;
  text-align: center;
  font-family: var(--nox-font-mono);
  font-size: 12px;
  color: var(--nox-ink-2);
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r);
  cursor: pointer;
  transition: all 0.12s;
}
.nox-time-slot:hover {
  background: var(--nox-bg-3);
  border-color: var(--nox-ink-4);
  color: var(--nox-ink);
}
.nox-time-slot.selected {
  background: var(--nox-accent);
  border-color: var(--nox-accent);
  color: var(--nox-bg-0);
  font-weight: 600;
}
.nox-time-slot.unavailable {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
  text-decoration: line-through;
}
.nox-time-slot.booked {
  background: var(--nox-red-s);
  border-color: var(--nox-red);
  color: var(--nox-red);
  cursor: not-allowed;
}
.nox-time-slots-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nox-time-slots-list .nox-time-slot {
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
}


/* ─── 5.33 Contact Card ─── */

.nox-contact-card {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  padding: var(--nox-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  transition: border-color 0.18s;
}
.nox-contact-card:hover {
  border-color: var(--nox-bg-5);
}
.nox-contact-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--nox-bg-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--nox-font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--nox-ink-2);
  overflow: hidden;
}
.nox-contact-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nox-contact-name {
  font-family: var(--nox-font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--nox-ink);
}
.nox-contact-role {
  font-size: 11px;
  color: var(--nox-ink-3);
  margin-top: -4px;
}
.nox-contact-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  text-align: left;
}
.nox-contact-info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--nox-ink-2);
}
.nox-contact-info-icon {
  width: 16px;
  text-align: center;
  color: var(--nox-ink-4);
  flex-shrink: 0;
  font-size: 12px;
}
.nox-contact-actions {
  display: flex;
  gap: 6px;
  width: 100%;
  margin-top: 4px;
}
.nox-contact-card-horizontal {
  flex-direction: row;
  text-align: left;
  align-items: flex-start;
  padding: var(--nox-4);
}
.nox-contact-card-horizontal .nox-contact-avatar {
  flex-shrink: 0;
}


/* ─── 5.34 Quote / Testimonial Card ─── */

.nox-testimonial {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  padding: var(--nox-6);
  position: relative;
}
.nox-testimonial-quote {
  font-size: 14px;
  color: var(--nox-ink);
  line-height: 1.6;
  font-style: italic;
  margin-bottom: 16px;
}
.nox-testimonial-quote::before {
  content: '\201C';
  font-family: var(--nox-font-display);
  font-size: 48px;
  color: var(--nox-accent);
  opacity: 0.3;
  position: absolute;
  top: 12px;
  left: 16px;
  line-height: 1;
}
.nox-testimonial-author {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nox-testimonial-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--nox-bg-4);
  overflow: hidden;
  flex-shrink: 0;
}
.nox-testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nox-testimonial-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--nox-ink);
}
.nox-testimonial-title {
  font-size: 11px;
  color: var(--nox-ink-3);
}
.nox-testimonial-stars {
  color: var(--nox-yellow);
  font-size: 12px;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.nox-testimonial-highlight {
  border-left: 3px solid var(--nox-accent);
}


/* ─── 5.35 Feature Card (icon + title + description) ─── */

.nox-feature-card {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  padding: var(--nox-6);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.18s;
}
.nox-feature-card:hover {
  border-color: var(--nox-bg-5);
  transform: translateY(-2px);
  box-shadow: var(--nox-shadow);
}
.nox-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--nox-r-lg);
  background: var(--nox-accent-s);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--nox-accent);
  flex-shrink: 0;
}
.nox-feature-icon.green { background: var(--nox-green-s); color: var(--nox-green); }
.nox-feature-icon.red { background: var(--nox-red-s); color: var(--nox-red); }
.nox-feature-icon.blue { background: var(--nox-blue-s); color: var(--nox-blue); }
.nox-feature-icon.yellow { background: var(--nox-yellow-s); color: var(--nox-yellow); }
.nox-feature-icon.purple { background: var(--nox-purple-s); color: var(--nox-purple); }
.nox-feature-icon.gradient {
  background: linear-gradient(135deg, var(--nox-accent), var(--nox-accent-2));
  color: #ffffff;
}
.nox-feature-title {
  font-family: var(--nox-font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--nox-ink);
}
.nox-feature-desc {
  font-size: 13px;
  color: var(--nox-ink-3);
  line-height: 1.5;
}
.nox-feature-card-horizontal {
  flex-direction: row;
  align-items: flex-start;
}
.nox-feature-card-center {
  align-items: center;
  text-align: center;
}


/* ─── 5.36 CTA Section (Call to Action Banner) ─── */

.nox-cta {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  padding: var(--nox-8);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.nox-cta-gradient {
  background: linear-gradient(135deg, var(--nox-accent-s), var(--nox-bg-2));
  border-color: var(--nox-accent-g);
}
.nox-cta-title {
  font-family: var(--nox-font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--nox-ink);
  line-height: 1.2;
}
.nox-cta-desc {
  font-size: 14px;
  color: var(--nox-ink-3);
  max-width: 520px;
  line-height: 1.5;
}
.nox-cta-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.nox-cta-inline {
  flex-direction: row;
  text-align: left;
  align-items: center;
  justify-content: space-between;
  padding: var(--nox-5);
}
.nox-cta-inline .nox-cta-content {
  flex: 1;
}
.nox-cta-minimal {
  background: none;
  border: none;
  padding: var(--nox-6) 0;
}


/* ─── 5.37 Social Proof Bar ─── */

.nox-social-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 16px 24px;
  flex-wrap: wrap;
}
.nox-social-proof-logo {
  height: 24px;
  opacity: 0.4;
  filter: grayscale(100%);
  transition: all 0.18s;
}
.nox-social-proof-logo:hover {
  opacity: 0.8;
  filter: grayscale(0%);
}
.nox-social-proof-label {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--nox-ink-4);
  width: 100%;
  text-align: center;
  margin-bottom: 8px;
}
.nox-social-proof-compact {
  gap: 20px;
}
.nox-social-proof-compact .nox-social-proof-logo {
  height: 18px;
}


/* ─── 5.38 App Store Badges ─── */

.nox-app-badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.nox-app-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--nox-bg-1);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-lg);
  text-decoration: none;
  transition: all 0.18s;
  cursor: pointer;
}
.nox-app-badge:hover {
  background: var(--nox-bg-3);
  border-color: var(--nox-bg-5);
}
.nox-app-badge-icon {
  font-size: 24px;
  flex-shrink: 0;
}
.nox-app-badge-text {
  display: flex;
  flex-direction: column;
}
.nox-app-badge-label {
  font-size: 9px;
  color: var(--nox-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.nox-app-badge-store {
  font-family: var(--nox-font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--nox-ink);
}
.nox-app-badge-dark {
  background: #000000;
  border-color: #333;
  color: #ffffff;
}
.nox-app-badge-dark .nox-app-badge-label { color: #999; }
.nox-app-badge-dark .nox-app-badge-store { color: #ffffff; }


/* ─── 5.39 Error Pages (404/500) ─── */

.nox-error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--nox-8);
  text-align: center;
  background: var(--nox-bg-0);
}
.nox-error-code {
  font-family: var(--nox-font-display);
  font-size: 120px;
  font-weight: 800;
  color: var(--nox-bg-4);
  line-height: 1;
  margin-bottom: 8px;
}
.nox-error-title {
  font-family: var(--nox-font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--nox-ink);
  margin-bottom: 8px;
}
.nox-error-desc {
  font-size: 14px;
  color: var(--nox-ink-3);
  max-width: 420px;
  line-height: 1.5;
  margin-bottom: 24px;
}
.nox-error-actions {
  display: flex;
  gap: 10px;
}
.nox-error-illustration {
  width: 200px;
  height: 200px;
  margin-bottom: 24px;
  opacity: 0.3;
}
.nox-error-code-gradient {
  background: linear-gradient(135deg, var(--nox-accent), var(--nox-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* ─── 5.40 Maintenance Mode Page ─── */

.nox-maintenance-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--nox-8);
  text-align: center;
  background: var(--nox-bg-0);
}
.nox-maintenance-icon {
  font-size: 56px;
  margin-bottom: 16px;
  opacity: 0.5;
}
.nox-maintenance-title {
  font-family: var(--nox-font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--nox-ink);
  margin-bottom: 8px;
}
.nox-maintenance-desc {
  font-size: 14px;
  color: var(--nox-ink-3);
  max-width: 420px;
  line-height: 1.5;
  margin-bottom: 24px;
}
.nox-maintenance-progress {
  width: 200px;
  height: 4px;
  background: var(--nox-bg-4);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 16px;
}
.nox-maintenance-progress-bar {
  height: 100%;
  width: 60%;
  background: var(--nox-accent);
  border-radius: 2px;
  animation: nox-progress-indeterminate 1.5s ease infinite;
}
@keyframes nox-progress-indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
.nox-maintenance-eta {
  font-family: var(--nox-font-mono);
  font-size: 11px;
  color: var(--nox-ink-4);
}


/* ─── 5.41 Coming Soon Page ─── */

.nox-coming-soon-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--nox-8);
  text-align: center;
  background: var(--nox-bg-0);
}
.nox-coming-soon-title {
  font-family: var(--nox-font-display);
  font-size: 36px;
  font-weight: 800;
  color: var(--nox-ink);
  margin-bottom: 8px;
}
.nox-coming-soon-desc {
  font-size: 14px;
  color: var(--nox-ink-3);
  max-width: 420px;
  line-height: 1.5;
  margin-bottom: 24px;
}
.nox-coming-soon-countdown {
  display: flex;
  gap: 12px;
  margin-bottom: 32px;
}
.nox-countdown-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.nox-countdown-value {
  font-family: var(--nox-font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--nox-ink);
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-lg);
  padding: 8px 16px;
  min-width: 64px;
  text-align: center;
}
.nox-countdown-label {
  font-family: var(--nox-font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--nox-ink-4);
}
.nox-coming-soon-notify {
  display: flex;
  gap: 8px;
  max-width: 380px;
  width: 100%;
}
.nox-coming-soon-notify input {
  flex: 1;
}


/* ─── 5.42 Version / Build Stamp ─── */

.nox-version-stamp {
  font-family: var(--nox-font-mono);
  font-size: 9px;
  color: var(--nox-ink-4);
  opacity: 0.6;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nox-version-stamp-tag {
  padding: 1px 5px;
  background: var(--nox-bg-4);
  border-radius: 3px;
  font-weight: 600;
}
.nox-version-stamp-env {
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
}
.nox-version-stamp-env.dev {
  background: var(--nox-yellow-s);
  color: var(--nox-yellow);
}
.nox-version-stamp-env.staging {
  background: var(--nox-blue-s);
  color: var(--nox-blue);
}
.nox-version-stamp-env.prod {
  background: var(--nox-green-s);
  color: var(--nox-green);
}


/* ─── 5.43 Watermark Overlay ─── */

.nox-watermark {
  position: fixed;
  inset: 0;
  z-index: 99999;
  pointer-events: none;
  overflow: hidden;
}
.nox-watermark-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-family: var(--nox-font-display);
  font-size: 64px;
  font-weight: 800;
  color: var(--nox-ink);
  opacity: 0.03;
  white-space: nowrap;
  user-select: none;
}
.nox-watermark-tiled {
  background-image: repeating-linear-gradient(
    -30deg,
    transparent,
    transparent 200px,
    rgba(255,255,255,0.015) 200px,
    rgba(255,255,255,0.015) 201px
  );
}
.nox-watermark-tiled::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 300%;
  height: 300%;
  font-family: var(--nox-font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--nox-ink);
  opacity: 0.03;
  line-height: 100px;
  letter-spacing: 100px;
  word-spacing: 100px;
  transform: rotate(-30deg);
  transform-origin: top left;
  white-space: normal;
  overflow: hidden;
  user-select: none;
}
.nox-watermark-corner {
  position: fixed;
  bottom: 16px;
  right: 16px;
  font-family: var(--nox-font-mono);
  font-size: 10px;
  color: var(--nox-ink);
  opacity: 0.1;
  user-select: none;
  pointer-events: none;
  z-index: 99999;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 6 — EXPANDED INSET / POSITION UTILITIES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── 6.1 Inset ─── */

.nox-inset-0    { inset: 0; }
.nox-inset-1    { inset: 4px; }
.nox-inset-2    { inset: 8px; }
.nox-inset-3    { inset: 12px; }
.nox-inset-4    { inset: 16px; }
.nox-inset-auto { inset: 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-3    { left: 12px; right: 12px; }
.nox-inset-x-4    { left: 16px; right: 16px; }
.nox-inset-x-auto { left: auto; right: 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-3    { top: 12px; bottom: 12px; }
.nox-inset-y-4    { top: 16px; bottom: 16px; }
.nox-inset-y-auto { top: auto; bottom: auto; }

/* ─── 6.2 Top ─── */

.nox-top-0    { top: 0; }
.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-7    { top: 32px; }
.nox-top-8    { top: 40px; }
.nox-top-auto { top: auto; }

/* ─── 6.3 Right ─── */

.nox-right-0    { right: 0; }
.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-7    { right: 32px; }
.nox-right-8    { right: 40px; }
.nox-right-auto { right: auto; }

/* ─── 6.4 Bottom ─── */

.nox-bottom-0    { bottom: 0; }
.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-7    { bottom: 32px; }
.nox-bottom-8    { bottom: 40px; }
.nox-bottom-auto { bottom: auto; }

/* ─── 6.5 Left ─── */

.nox-left-0    { left: 0; }
.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-7    { left: 32px; }
.nox-left-8    { left: 40px; }
.nox-left-auto { left: auto; }

/* ─── 6.6 Negative Offsets ─── */

.-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-right-1 { right: -4px; }
.-nox-right-2 { right: -8px; }
.-nox-right-3 { right: -12px; }
.-nox-right-4 { right: -16px; }

.-nox-bottom-1 { bottom: -4px; }
.-nox-bottom-2 { bottom: -8px; }
.-nox-bottom-3 { bottom: -12px; }
.-nox-bottom-4 { bottom: -16px; }

.-nox-left-1 { left: -4px; }
.-nox-left-2 { left: -8px; }
.-nox-left-3 { left: -12px; }
.-nox-left-4 { left: -16px; }

/* ─── 6.7 Percentage Insets ─── */

.nox-top-1\/2    { top: 50%; }
.nox-top-1\/3    { top: 33.333%; }
.nox-top-2\/3    { top: 66.666%; }
.nox-top-full    { top: 100%; }

.nox-right-1\/2  { right: 50%; }
.nox-right-full  { right: 100%; }

.nox-bottom-1\/2 { bottom: 50%; }
.nox-bottom-full { bottom: 100%; }

.nox-left-1\/2   { left: 50%; }
.nox-left-1\/3   { left: 33.333%; }
.nox-left-2\/3   { left: 66.666%; }
.nox-left-full   { left: 100%; }

/* ─── 6.8 Center Transforms ─── */

.nox-center-x  { left: 50%; transform: translateX(-50%); }
.nox-center-y  { top: 50%; transform: translateY(-50%); }
.nox-center-xy { top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* ─── 6.9 Z-Index ─── */

.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-100  { z-index: 100; }
.nox-z-200  { z-index: 200; }
.nox-z-300  { z-index: 300; }
.nox-z-500  { z-index: 500; }
.nox-z-800  { z-index: 800; }
.nox-z-900  { z-index: 900; }
.nox-z-999  { z-index: 999; }
.nox-z-9999 { z-index: 9999; }
.nox-z-auto { z-index: auto; }
.-nox-z-1   { z-index: -1; }
.-nox-z-10  { z-index: -10; }

/* ─── 6.10 Isolation ─── */

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

/* ─── 6.11 Object Fit & Position ─── */

.nox-object-cover   { object-fit: cover; }
.nox-object-contain { object-fit: contain; }
.nox-object-fill    { object-fit: fill; }
.nox-object-none    { object-fit: none; }
.nox-object-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; }


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 7 — TABLE DISPLAY & LIST UTILITIES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── 7.1 Table Display ─── */

.nox-table-auto          { table-layout: auto; }
.nox-table-fixed         { table-layout: fixed; }
.nox-table-display       { display: table; }
.nox-table-caption       { display: table-caption; }
.nox-table-cell          { display: table-cell; }
.nox-table-column        { display: table-column; }
.nox-table-column-group  { display: table-column-group; }
.nox-table-footer-group  { display: table-footer-group; }
.nox-table-header-group  { display: table-header-group; }
.nox-table-row-group     { display: table-row-group; }
.nox-table-row           { display: table-row; }

/* ─── 7.2 Caption Side ─── */

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

/* ─── 7.3 Border Collapse ─── */

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

/* ─── 7.4 Border Spacing ─── */

.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; }

/* ─── 7.5 List Style ─── */

.nox-list-none    { list-style-type: none; }
.nox-list-disc    { list-style-type: disc; }
.nox-list-decimal { list-style-type: decimal; }
.nox-list-circle  { list-style-type: circle; }
.nox-list-square  { list-style-type: square; }
.nox-list-alpha   { list-style-type: lower-alpha; }
.nox-list-roman   { list-style-type: lower-roman; }

.nox-list-inside  { list-style-position: inside; }
.nox-list-outside { list-style-position: outside; }

/* ─── 7.6 Visibility ─── */

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

/* ─── 7.7 Box Sizing ─── */

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

/* ─── 7.8 Display Extras ─── */

.nox-contents  { display: contents; }
.nox-flow-root { display: flow-root; }

/* ─── 7.9 Aspect Ratios ─── */

.nox-aspect-auto     { aspect-ratio: auto; }
.nox-aspect-square   { aspect-ratio: 1/1; }
.nox-aspect-video    { aspect-ratio: 16/9; }
.nox-aspect-photo    { aspect-ratio: 4/3; }
.nox-aspect-portrait { aspect-ratio: 3/4; }
.nox-aspect-cinema   { aspect-ratio: 21/9; }
.nox-aspect-golden   { aspect-ratio: 1.618/1; }

/* ─── 7.10 Container Max-Widths ─── */

.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-none   { max-width: none; }
.nox-max-w-prose  { max-width: 65ch; }
.nox-max-w-screen { max-width: 100vw; }

/* ─── 7.11 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; }

/* ─── 7.12 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; }

/* ─── 7.13 Max-Height ─── */

.nox-max-h-full   { max-height: 100%; }
.nox-max-h-screen { max-height: 100vh; }
.nox-max-h-none   { max-height: none; }
.nox-max-h-48     { max-height: 192px; }
.nox-max-h-64     { max-height: 256px; }
.nox-max-h-80     { max-height: 320px; }
.nox-max-h-96     { max-height: 384px; }
.nox-max-h-128    { max-height: 512px; }

/* ─── 7.14 Size (width + height) ─── */

.nox-size-3    { width: 12px; height: 12px; }
.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-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-32   { width: 128px; height: 128px; }
.nox-size-full { width: 100%; height: 100%; }

/* ─── 7.15 Columns (CSS Columns) ─── */

.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-xs { columns: 160px; }
.nox-columns-sm { columns: 240px; }
.nox-columns-md { columns: 320px; }
.nox-columns-lg { columns: 400px; }

.nox-column-gap-0 { column-gap: 0; }
.nox-column-gap-2 { column-gap: 8px; }
.nox-column-gap-4 { column-gap: 16px; }
.nox-column-gap-6 { column-gap: 24px; }
.nox-column-gap-8 { column-gap: 32px; }

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

/* ─── 7.16 Vertical Align ─── */

.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; }

/* ─── 7.17 Float & Clear ─── */

.nox-float-left  { float: left; }
.nox-float-right { float: right; }
.nox-float-none  { float: none; }

.nox-clear-left  { clear: left; }
.nox-clear-right { clear: right; }
.nox-clear-both  { clear: both; }
.nox-clear-none  { clear: none; }

.nox-clearfix::after {
  content: '';
  display: table;
  clear: both;
}

/* ─── 7.18 Scroll Behavior ─── */

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

.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; }

/* ─── 7.19 Scroll Snap ─── */

.nox-snap-none       { scroll-snap-type: none; }
.nox-snap-x          { scroll-snap-type: x mandatory; }
.nox-snap-x-prox     { scroll-snap-type: x proximity; }
.nox-snap-y          { scroll-snap-type: y mandatory; }
.nox-snap-y-prox     { scroll-snap-type: y proximity; }
.nox-snap-both       { scroll-snap-type: both mandatory; }

.nox-snap-start  { scroll-snap-align: start; }
.nox-snap-center { scroll-snap-align: center; }
.nox-snap-end    { scroll-snap-align: end; }
.nox-snap-none-align { scroll-snap-align: none; }

.nox-snap-stop-normal { scroll-snap-stop: normal; }
.nox-snap-stop-always { scroll-snap-stop: always; }

/* ─── 7.20 Touch Action ─── */

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

/* ─── 7.21 Resize ─── */

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

/* ─── 7.22 Appearance ─── */

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

/* ─── 7.23 Accent Color ─── */

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

/* ─── 7.24 Caret Color ─── */

.nox-caret-accent { caret-color: var(--nox-accent); }
.nox-caret-ink    { caret-color: var(--nox-ink); }
.nox-caret-red    { caret-color: var(--nox-red); }
.nox-caret-green  { caret-color: var(--nox-green); }
.nox-caret-transparent { caret-color: transparent; }

/* ─── 7.25 Will-Change ─── */

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

/* ─── 7.26 Content Visibility ─── */

.nox-content-auto    { content-visibility: auto; }
.nox-content-hidden  { content-visibility: hidden; }
.nox-content-visible { content-visibility: visible; }

/* ─── 7.27 Contain ─── */

.nox-contain-none     { contain: none; }
.nox-contain-content  { contain: content; }
.nox-contain-layout   { contain: layout; }
.nox-contain-paint    { contain: paint; }
.nox-contain-strict   { contain: strict; }


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 8 — PRINT UTILITIES
   ═══════════════════════════════════════════════════════════════════════════════ */

@media print {
  /* ─── 8.1 Display ─── */

  .nox-print-hidden  { display: none !important; }
  .nox-print-block   { display: block !important; }
  .nox-print-flex    { display: flex !important; }
  .nox-print-grid    { display: grid !important; }
  .nox-print-inline  { display: inline !important; }
  .nox-print-table   { display: table !important; }

  /* ─── 8.2 Page Breaks ─── */

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

  /* ─── 8.3 Visual Overrides ─── */

  .nox-print-bg-white       { background: white !important; }
  .nox-print-bg-transparent { background: transparent !important; }
  .nox-print-text-black     { color: black !important; }
  .nox-print-text-gray      { color: #333333 !important; }
  .nox-print-border-gray    { border-color: #dddddd !important; }
  .nox-print-border-black   { border-color: #000000 !important; }
  .nox-print-border-none    { border: none !important; }
  .nox-print-shadow-none    { box-shadow: none !important; }
  .nox-print-rounded-none   { border-radius: 0 !important; }
  .nox-print-opacity-100    { opacity: 1 !important; }

  /* ─── 8.4 Spacing ─── */

  .nox-print-p-0 { padding: 0 !important; }
  .nox-print-p-2 { padding: 8px !important; }
  .nox-print-p-4 { padding: 16px !important; }
  .nox-print-m-0 { margin: 0 !important; }
  .nox-print-m-2 { margin: 8px !important; }
  .nox-print-m-4 { margin: 16px !important; }
  .nox-print-mx-auto { margin-left: auto !important; margin-right: auto !important; }

  /* ─── 8.5 Size ─── */

  .nox-print-w-full { width: 100% !important; }
  .nox-print-w-auto { width: auto !important; }
  .nox-print-max-w-full { max-width: 100% !important; }
  .nox-print-h-auto { height: auto !important; }
  .nox-print-max-h-none { max-height: none !important; }
  .nox-print-overflow-visible { overflow: visible !important; }

  /* ─── 8.6 Text ─── */

  .nox-print-text-sm   { font-size: 10px !important; }
  .nox-print-text-base { font-size: 12px !important; }
  .nox-print-text-lg   { font-size: 14px !important; }
  .nox-print-text-left { text-align: left !important; }
  .nox-print-font-serif { font-family: Georgia, 'Times New Roman', serif !important; }

  /* ─── 8.7 Print Header / Footer ─── */

  .nox-print-header {
    display: block !important;
    position: running(header);
    text-align: center;
    font-size: 10px;
    color: #999;
    padding: 8px 0;
    border-bottom: 1px solid #ddd;
  }
  .nox-print-footer {
    display: block !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 9px;
    color: #999;
    padding: 8px;
    border-top: 1px solid #ddd;
  }

  /* ─── 8.8 Global Print Resets ─── */

  .nox-print-reset * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  .nox-print-reset a {
    text-decoration: underline;
  }

  /* ─── 8.9 Columns ─── */

  .nox-print-cols-1 { columns: 1 !important; }
  .nox-print-cols-2 { columns: 2 !important; }
  .nox-print-cols-3 { columns: 3 !important; }
  .nox-print-col-gap-4 { column-gap: 16px !important; }

  /* ─── 8.10 Table Specific ─── */

  .nox-print-table-fixed { table-layout: fixed !important; }
  .nox-print-table-auto  { table-layout: auto !important; }

  /* ─── 8.11 Image Handling ─── */

  .nox-print-grayscale { filter: grayscale(100%) !important; }
  .nox-print-img-block { display: block !important; max-width: 100% !important; }

  /* ─── 8.12 Page Margins ─── */

  @page { margin: 1cm; }
  @page :first { margin-top: 2cm; }
  @page :left { margin-left: 1.5cm; }
  @page :right { margin-right: 1.5cm; }

  /* ─── 8.13 URL Display ─── */

  .nox-print-show-urls a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 9px;
    color: #666;
    word-break: break-all;
  }

  /* ─── 8.14 Orphans / Widows ─── */

  .nox-print-orphans-2 { orphans: 2; }
  .nox-print-orphans-3 { orphans: 3; }
  .nox-print-widows-2  { widows: 2; }
  .nox-print-widows-3  { widows: 3; }

  /* ─── 8.15 Grid for Print ─── */

  .nox-print-grid-cols-1 { grid-template-columns: 1fr !important; }
  .nox-print-grid-cols-2 { grid-template-columns: 1fr 1fr !important; }
  .nox-print-grid-cols-3 { grid-template-columns: repeat(3, 1fr) !important; }
  .nox-print-gap-2 { gap: 8px !important; }
  .nox-print-gap-4 { gap: 16px !important; }

  /* ─── 8.16 Flex for Print ─── */

  .nox-print-flex-col  { flex-direction: column !important; }
  .nox-print-flex-row  { flex-direction: row !important; }
  .nox-print-flex-wrap { flex-wrap: wrap !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 9 — EXPANDED GRADIENT FROM/VIA/TO (200/300 shades)
   Additional gradient stops at commonly used lighter/darker shades
   ═══════════════════════════════════════════════════════════════════════════════ */

/* --- Slate 200/300/700/800 --- */
.nox-from-slate-200 { --nox-gradient-from: #e2e8f0; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-slate-300 { --nox-gradient-from: #cbd5e1; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-slate-700 { --nox-gradient-from: #334155; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-slate-800 { --nox-gradient-from: #1e293b; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-slate-900 { --nox-gradient-from: #0f172a; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-to-slate-200   { --nox-gradient-to: #e2e8f0; }
.nox-to-slate-300   { --nox-gradient-to: #cbd5e1; }
.nox-to-slate-700   { --nox-gradient-to: #334155; }
.nox-to-slate-800   { --nox-gradient-to: #1e293b; }
.nox-to-slate-900   { --nox-gradient-to: #0f172a; }
.nox-via-slate-200  { --nox-gradient-stops: var(--nox-gradient-from), #e2e8f0, var(--nox-gradient-to, transparent); }
.nox-via-slate-300  { --nox-gradient-stops: var(--nox-gradient-from), #cbd5e1, var(--nox-gradient-to, transparent); }
.nox-via-slate-700  { --nox-gradient-stops: var(--nox-gradient-from), #334155, var(--nox-gradient-to, transparent); }
.nox-via-slate-800  { --nox-gradient-stops: var(--nox-gradient-from), #1e293b, var(--nox-gradient-to, transparent); }

/* --- Gray 200/300/700/800 --- */
.nox-from-gray-200 { --nox-gradient-from: #e5e7eb; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-gray-300 { --nox-gradient-from: #d1d5db; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-gray-700 { --nox-gradient-from: #374151; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-gray-800 { --nox-gradient-from: #1f2937; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-gray-900 { --nox-gradient-from: #111827; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-to-gray-200   { --nox-gradient-to: #e5e7eb; }
.nox-to-gray-300   { --nox-gradient-to: #d1d5db; }
.nox-to-gray-700   { --nox-gradient-to: #374151; }
.nox-to-gray-800   { --nox-gradient-to: #1f2937; }
.nox-to-gray-900   { --nox-gradient-to: #111827; }
.nox-via-gray-200  { --nox-gradient-stops: var(--nox-gradient-from), #e5e7eb, var(--nox-gradient-to, transparent); }
.nox-via-gray-300  { --nox-gradient-stops: var(--nox-gradient-from), #d1d5db, var(--nox-gradient-to, transparent); }
.nox-via-gray-700  { --nox-gradient-stops: var(--nox-gradient-from), #374151, var(--nox-gradient-to, transparent); }
.nox-via-gray-800  { --nox-gradient-stops: var(--nox-gradient-from), #1f2937, var(--nox-gradient-to, transparent); }

/* --- Zinc 200/300/700/800 --- */
.nox-from-zinc-200 { --nox-gradient-from: #e4e4e7; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-zinc-300 { --nox-gradient-from: #d4d4d8; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-zinc-700 { --nox-gradient-from: #3f3f46; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-zinc-800 { --nox-gradient-from: #27272a; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-zinc-900 { --nox-gradient-from: #18181b; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-to-zinc-200   { --nox-gradient-to: #e4e4e7; }
.nox-to-zinc-300   { --nox-gradient-to: #d4d4d8; }
.nox-to-zinc-700   { --nox-gradient-to: #3f3f46; }
.nox-to-zinc-800   { --nox-gradient-to: #27272a; }
.nox-to-zinc-900   { --nox-gradient-to: #18181b; }
.nox-via-zinc-700  { --nox-gradient-stops: var(--nox-gradient-from), #3f3f46, var(--nox-gradient-to, transparent); }
.nox-via-zinc-800  { --nox-gradient-stops: var(--nox-gradient-from), #27272a, var(--nox-gradient-to, transparent); }

/* --- Red 200/300/700/800 --- */
.nox-from-red-200 { --nox-gradient-from: #fecaca; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-red-300 { --nox-gradient-from: #fca5a5; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-red-700 { --nox-gradient-from: #b91c1c; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-red-800 { --nox-gradient-from: #991b1b; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-red-900 { --nox-gradient-from: #7f1d1d; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-to-red-200   { --nox-gradient-to: #fecaca; }
.nox-to-red-300   { --nox-gradient-to: #fca5a5; }
.nox-to-red-700   { --nox-gradient-to: #b91c1c; }
.nox-to-red-800   { --nox-gradient-to: #991b1b; }
.nox-to-red-900   { --nox-gradient-to: #7f1d1d; }
.nox-via-red-200  { --nox-gradient-stops: var(--nox-gradient-from), #fecaca, var(--nox-gradient-to, transparent); }
.nox-via-red-300  { --nox-gradient-stops: var(--nox-gradient-from), #fca5a5, var(--nox-gradient-to, transparent); }
.nox-via-red-700  { --nox-gradient-stops: var(--nox-gradient-from), #b91c1c, var(--nox-gradient-to, transparent); }
.nox-via-red-800  { --nox-gradient-stops: var(--nox-gradient-from), #991b1b, var(--nox-gradient-to, transparent); }

/* --- Orange 200/300/700/800 --- */
.nox-from-orange-200 { --nox-gradient-from: #fed7aa; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-orange-300 { --nox-gradient-from: #fdba74; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-orange-700 { --nox-gradient-from: #c2410c; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-orange-800 { --nox-gradient-from: #9a3412; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-to-orange-200   { --nox-gradient-to: #fed7aa; }
.nox-to-orange-300   { --nox-gradient-to: #fdba74; }
.nox-to-orange-700   { --nox-gradient-to: #c2410c; }
.nox-to-orange-800   { --nox-gradient-to: #9a3412; }
.nox-via-orange-200  { --nox-gradient-stops: var(--nox-gradient-from), #fed7aa, var(--nox-gradient-to, transparent); }
.nox-via-orange-700  { --nox-gradient-stops: var(--nox-gradient-from), #c2410c, var(--nox-gradient-to, transparent); }

/* --- Amber 200/300/700/800 --- */
.nox-from-amber-200 { --nox-gradient-from: #fde68a; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-amber-300 { --nox-gradient-from: #fcd34d; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-amber-700 { --nox-gradient-from: #b45309; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-amber-800 { --nox-gradient-from: #92400e; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-to-amber-200   { --nox-gradient-to: #fde68a; }
.nox-to-amber-300   { --nox-gradient-to: #fcd34d; }
.nox-to-amber-700   { --nox-gradient-to: #b45309; }
.nox-to-amber-800   { --nox-gradient-to: #92400e; }
.nox-via-amber-200  { --nox-gradient-stops: var(--nox-gradient-from), #fde68a, var(--nox-gradient-to, transparent); }
.nox-via-amber-700  { --nox-gradient-stops: var(--nox-gradient-from), #b45309, var(--nox-gradient-to, transparent); }

/* --- Yellow 200/300/700/800 --- */
.nox-from-yellow-200 { --nox-gradient-from: #fef08a; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-yellow-300 { --nox-gradient-from: #fde047; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-yellow-700 { --nox-gradient-from: #a16207; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-yellow-800 { --nox-gradient-from: #854d0e; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-to-yellow-200   { --nox-gradient-to: #fef08a; }
.nox-to-yellow-300   { --nox-gradient-to: #fde047; }
.nox-to-yellow-700   { --nox-gradient-to: #a16207; }
.nox-to-yellow-800   { --nox-gradient-to: #854d0e; }
.nox-via-yellow-200  { --nox-gradient-stops: var(--nox-gradient-from), #fef08a, var(--nox-gradient-to, transparent); }
.nox-via-yellow-700  { --nox-gradient-stops: var(--nox-gradient-from), #a16207, var(--nox-gradient-to, transparent); }

/* --- Green 200/300/700/800 --- */
.nox-from-green-200 { --nox-gradient-from: #bbf7d0; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-green-300 { --nox-gradient-from: #86efac; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-green-700 { --nox-gradient-from: #15803d; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-green-800 { --nox-gradient-from: #166534; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-green-900 { --nox-gradient-from: #14532d; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-to-green-200   { --nox-gradient-to: #bbf7d0; }
.nox-to-green-300   { --nox-gradient-to: #86efac; }
.nox-to-green-700   { --nox-gradient-to: #15803d; }
.nox-to-green-800   { --nox-gradient-to: #166534; }
.nox-to-green-900   { --nox-gradient-to: #14532d; }
.nox-via-green-200  { --nox-gradient-stops: var(--nox-gradient-from), #bbf7d0, var(--nox-gradient-to, transparent); }
.nox-via-green-700  { --nox-gradient-stops: var(--nox-gradient-from), #15803d, var(--nox-gradient-to, transparent); }

/* --- Emerald 200/300/700/800 --- */
.nox-from-emerald-200 { --nox-gradient-from: #a7f3d0; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-emerald-300 { --nox-gradient-from: #6ee7b7; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-emerald-700 { --nox-gradient-from: #047857; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-emerald-800 { --nox-gradient-from: #065f46; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-to-emerald-200   { --nox-gradient-to: #a7f3d0; }
.nox-to-emerald-300   { --nox-gradient-to: #6ee7b7; }
.nox-to-emerald-700   { --nox-gradient-to: #047857; }
.nox-to-emerald-800   { --nox-gradient-to: #065f46; }
.nox-via-emerald-200  { --nox-gradient-stops: var(--nox-gradient-from), #a7f3d0, var(--nox-gradient-to, transparent); }
.nox-via-emerald-700  { --nox-gradient-stops: var(--nox-gradient-from), #047857, var(--nox-gradient-to, transparent); }

/* --- Teal 200/300/700/800 --- */
.nox-from-teal-200 { --nox-gradient-from: #99f6e4; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-teal-300 { --nox-gradient-from: #5eead4; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-teal-700 { --nox-gradient-from: #0f766e; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-teal-800 { --nox-gradient-from: #115e59; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-to-teal-200   { --nox-gradient-to: #99f6e4; }
.nox-to-teal-300   { --nox-gradient-to: #5eead4; }
.nox-to-teal-700   { --nox-gradient-to: #0f766e; }
.nox-to-teal-800   { --nox-gradient-to: #115e59; }
.nox-via-teal-200  { --nox-gradient-stops: var(--nox-gradient-from), #99f6e4, var(--nox-gradient-to, transparent); }
.nox-via-teal-700  { --nox-gradient-stops: var(--nox-gradient-from), #0f766e, var(--nox-gradient-to, transparent); }

/* --- Cyan 200/300/700/800 --- */
.nox-from-cyan-200 { --nox-gradient-from: #a5f3fc; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-cyan-300 { --nox-gradient-from: #67e8f9; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-cyan-700 { --nox-gradient-from: #0e7490; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-cyan-800 { --nox-gradient-from: #155e75; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-to-cyan-200   { --nox-gradient-to: #a5f3fc; }
.nox-to-cyan-300   { --nox-gradient-to: #67e8f9; }
.nox-to-cyan-700   { --nox-gradient-to: #0e7490; }
.nox-to-cyan-800   { --nox-gradient-to: #155e75; }
.nox-via-cyan-200  { --nox-gradient-stops: var(--nox-gradient-from), #a5f3fc, var(--nox-gradient-to, transparent); }
.nox-via-cyan-700  { --nox-gradient-stops: var(--nox-gradient-from), #0e7490, var(--nox-gradient-to, transparent); }

/* --- Blue 200/300/700/800 --- */
.nox-from-blue-200 { --nox-gradient-from: #bfdbfe; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-blue-300 { --nox-gradient-from: #93c5fd; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-blue-700 { --nox-gradient-from: #1d4ed8; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-blue-800 { --nox-gradient-from: #1e40af; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-blue-900 { --nox-gradient-from: #1e3a8a; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-to-blue-200   { --nox-gradient-to: #bfdbfe; }
.nox-to-blue-300   { --nox-gradient-to: #93c5fd; }
.nox-to-blue-700   { --nox-gradient-to: #1d4ed8; }
.nox-to-blue-800   { --nox-gradient-to: #1e40af; }
.nox-to-blue-900   { --nox-gradient-to: #1e3a8a; }
.nox-via-blue-200  { --nox-gradient-stops: var(--nox-gradient-from), #bfdbfe, var(--nox-gradient-to, transparent); }
.nox-via-blue-300  { --nox-gradient-stops: var(--nox-gradient-from), #93c5fd, var(--nox-gradient-to, transparent); }
.nox-via-blue-700  { --nox-gradient-stops: var(--nox-gradient-from), #1d4ed8, var(--nox-gradient-to, transparent); }
.nox-via-blue-800  { --nox-gradient-stops: var(--nox-gradient-from), #1e40af, var(--nox-gradient-to, transparent); }

/* --- Indigo 200/300/700/800 --- */
.nox-from-indigo-200 { --nox-gradient-from: #c7d2fe; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-indigo-300 { --nox-gradient-from: #a5b4fc; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-indigo-700 { --nox-gradient-from: #4338ca; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-indigo-800 { --nox-gradient-from: #3730a3; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-indigo-900 { --nox-gradient-from: #312e81; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-to-indigo-200   { --nox-gradient-to: #c7d2fe; }
.nox-to-indigo-300   { --nox-gradient-to: #a5b4fc; }
.nox-to-indigo-700   { --nox-gradient-to: #4338ca; }
.nox-to-indigo-800   { --nox-gradient-to: #3730a3; }
.nox-to-indigo-900   { --nox-gradient-to: #312e81; }
.nox-via-indigo-200  { --nox-gradient-stops: var(--nox-gradient-from), #c7d2fe, var(--nox-gradient-to, transparent); }
.nox-via-indigo-700  { --nox-gradient-stops: var(--nox-gradient-from), #4338ca, var(--nox-gradient-to, transparent); }

/* --- Violet 200/300/700/800 --- */
.nox-from-violet-200 { --nox-gradient-from: #ddd6fe; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-violet-300 { --nox-gradient-from: #c4b5fd; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-violet-700 { --nox-gradient-from: #6d28d9; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-violet-800 { --nox-gradient-from: #5b21b6; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-violet-900 { --nox-gradient-from: #4c1d95; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-to-violet-200   { --nox-gradient-to: #ddd6fe; }
.nox-to-violet-300   { --nox-gradient-to: #c4b5fd; }
.nox-to-violet-700   { --nox-gradient-to: #6d28d9; }
.nox-to-violet-800   { --nox-gradient-to: #5b21b6; }
.nox-to-violet-900   { --nox-gradient-to: #4c1d95; }
.nox-via-violet-200  { --nox-gradient-stops: var(--nox-gradient-from), #ddd6fe, var(--nox-gradient-to, transparent); }
.nox-via-violet-700  { --nox-gradient-stops: var(--nox-gradient-from), #6d28d9, var(--nox-gradient-to, transparent); }

/* --- Rose 200/300/700/800 --- */
.nox-from-rose-200 { --nox-gradient-from: #fecdd3; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-rose-300 { --nox-gradient-from: #fda4af; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-rose-700 { --nox-gradient-from: #be123c; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-rose-800 { --nox-gradient-from: #9f1239; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-rose-900 { --nox-gradient-from: #881337; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-to-rose-200   { --nox-gradient-to: #fecdd3; }
.nox-to-rose-300   { --nox-gradient-to: #fda4af; }
.nox-to-rose-700   { --nox-gradient-to: #be123c; }
.nox-to-rose-800   { --nox-gradient-to: #9f1239; }
.nox-to-rose-900   { --nox-gradient-to: #881337; }
.nox-via-rose-200  { --nox-gradient-stops: var(--nox-gradient-from), #fecdd3, var(--nox-gradient-to, transparent); }
.nox-via-rose-700  { --nox-gradient-stops: var(--nox-gradient-from), #be123c, var(--nox-gradient-to, transparent); }

/* --- Lime 200/300/700/800 --- */
.nox-from-lime-200 { --nox-gradient-from: #d9f99d; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-lime-300 { --nox-gradient-from: #bef264; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-lime-700 { --nox-gradient-from: #4d7c0f; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-from-lime-800 { --nox-gradient-from: #3f6212; --nox-gradient-stops: var(--nox-gradient-from), var(--nox-gradient-to, transparent); }
.nox-to-lime-200   { --nox-gradient-to: #d9f99d; }
.nox-to-lime-300   { --nox-gradient-to: #bef264; }
.nox-to-lime-700   { --nox-gradient-to: #4d7c0f; }
.nox-to-lime-800   { --nox-gradient-to: #3f6212; }
.nox-via-lime-200  { --nox-gradient-stops: var(--nox-gradient-from), #d9f99d, var(--nox-gradient-to, transparent); }
.nox-via-lime-700  { --nox-gradient-stops: var(--nox-gradient-from), #4d7c0f, var(--nox-gradient-to, transparent); }


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 10 — EXPANDED HOVER COLOR VARIANTS (shades 300 & 700)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* --- Text hover at shade 300 --- */
.hover\:nox-text-slate-300:hover   { color: var(--nox-slate-300); }
.hover\:nox-text-gray-300:hover    { color: var(--nox-gray-300); }
.hover\:nox-text-zinc-300:hover    { color: var(--nox-zinc-300); }
.hover\:nox-text-red-300:hover     { color: var(--nox-red-300); }
.hover\:nox-text-orange-300:hover  { color: var(--nox-orange-300); }
.hover\:nox-text-amber-300:hover   { color: var(--nox-amber-300); }
.hover\:nox-text-yellow-300:hover  { color: var(--nox-yellow-300); }
.hover\:nox-text-lime-300:hover    { color: var(--nox-lime-300); }
.hover\:nox-text-green-300:hover   { color: var(--nox-green-300); }
.hover\:nox-text-emerald-300:hover { color: var(--nox-emerald-300); }
.hover\:nox-text-teal-300:hover    { color: var(--nox-teal-300); }
.hover\:nox-text-cyan-300:hover    { color: var(--nox-cyan-300); }
.hover\:nox-text-blue-300:hover    { color: var(--nox-blue-300); }
.hover\:nox-text-indigo-300:hover  { color: var(--nox-indigo-300); }
.hover\:nox-text-violet-300:hover  { color: var(--nox-violet-300); }
.hover\:nox-text-rose-300:hover    { color: var(--nox-rose-300); }

/* --- Text hover at shade 700 --- */
.hover\:nox-text-slate-700:hover   { color: var(--nox-slate-700); }
.hover\:nox-text-gray-700:hover    { color: var(--nox-gray-700); }
.hover\:nox-text-zinc-700:hover    { color: var(--nox-zinc-700); }
.hover\:nox-text-red-700:hover     { color: var(--nox-red-700); }
.hover\:nox-text-orange-700:hover  { color: var(--nox-orange-700); }
.hover\:nox-text-amber-700:hover   { color: var(--nox-amber-700); }
.hover\:nox-text-yellow-700:hover  { color: var(--nox-yellow-700); }
.hover\:nox-text-lime-700:hover    { color: var(--nox-lime-700); }
.hover\:nox-text-green-700:hover   { color: var(--nox-green-700); }
.hover\:nox-text-emerald-700:hover { color: var(--nox-emerald-700); }
.hover\:nox-text-teal-700:hover    { color: var(--nox-teal-700); }
.hover\:nox-text-cyan-700:hover    { color: var(--nox-cyan-700); }
.hover\:nox-text-blue-700:hover    { color: var(--nox-blue-700); }
.hover\:nox-text-indigo-700:hover  { color: var(--nox-indigo-700); }
.hover\:nox-text-violet-700:hover  { color: var(--nox-violet-700); }
.hover\:nox-text-rose-700:hover    { color: var(--nox-rose-700); }

/* --- Bg hover at shade 300 --- */
.hover\:nox-bg-slate-300:hover   { background: var(--nox-slate-300); }
.hover\:nox-bg-gray-300:hover    { background: var(--nox-gray-300); }
.hover\:nox-bg-zinc-300:hover    { background: var(--nox-zinc-300); }
.hover\:nox-bg-red-300:hover     { background: var(--nox-red-300); }
.hover\:nox-bg-orange-300:hover  { background: var(--nox-orange-300); }
.hover\:nox-bg-amber-300:hover   { background: var(--nox-amber-300); }
.hover\:nox-bg-yellow-300:hover  { background: var(--nox-yellow-300); }
.hover\:nox-bg-lime-300:hover    { background: var(--nox-lime-300); }
.hover\:nox-bg-green-300:hover   { background: var(--nox-green-300); }
.hover\:nox-bg-emerald-300:hover { background: var(--nox-emerald-300); }
.hover\:nox-bg-teal-300:hover    { background: var(--nox-teal-300); }
.hover\:nox-bg-cyan-300:hover    { background: var(--nox-cyan-300); }
.hover\:nox-bg-blue-300:hover    { background: var(--nox-blue-300); }
.hover\:nox-bg-indigo-300:hover  { background: var(--nox-indigo-300); }
.hover\:nox-bg-violet-300:hover  { background: var(--nox-violet-300); }
.hover\:nox-bg-rose-300:hover    { background: var(--nox-rose-300); }

/* --- Bg hover at shade 700 --- */
.hover\:nox-bg-slate-700:hover   { background: var(--nox-slate-700); }
.hover\:nox-bg-gray-700:hover    { background: var(--nox-gray-700); }
.hover\:nox-bg-zinc-700:hover    { background: var(--nox-zinc-700); }
.hover\:nox-bg-red-700:hover     { background: var(--nox-red-700); }
.hover\:nox-bg-orange-700:hover  { background: var(--nox-orange-700); }
.hover\:nox-bg-amber-700:hover   { background: var(--nox-amber-700); }
.hover\:nox-bg-yellow-700:hover  { background: var(--nox-yellow-700); }
.hover\:nox-bg-lime-700:hover    { background: var(--nox-lime-700); }
.hover\:nox-bg-green-700:hover   { background: var(--nox-green-700); }
.hover\:nox-bg-emerald-700:hover { background: var(--nox-emerald-700); }
.hover\:nox-bg-teal-700:hover    { background: var(--nox-teal-700); }
.hover\:nox-bg-cyan-700:hover    { background: var(--nox-cyan-700); }
.hover\:nox-bg-blue-700:hover    { background: var(--nox-blue-700); }
.hover\:nox-bg-indigo-700:hover  { background: var(--nox-indigo-700); }
.hover\:nox-bg-violet-700:hover  { background: var(--nox-violet-700); }
.hover\:nox-bg-rose-700:hover    { background: var(--nox-rose-700); }


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 11 — RESPONSIVE HOVER STATES (sm/md/lg prefixed)
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 640px) {
  .sm\:hover\:nox-bg-3:hover { background: var(--nox-bg-3); }
  .sm\:hover\:nox-bg-4:hover { background: var(--nox-bg-4); }
  .sm\:hover\:nox-shadow:hover { box-shadow: var(--nox-shadow); }
  .sm\:hover\:nox-shadow-lg:hover { box-shadow: var(--nox-shadow-lg); }
  .sm\:hover\:nox-scale-105:hover { transform: scale(1.05); }
  .sm\:hover\:nox-translate-y-n2:hover { transform: translateY(-2px); }
}

@media (min-width: 768px) {
  .md\:hover\:nox-bg-3:hover { background: var(--nox-bg-3); }
  .md\:hover\:nox-bg-4:hover { background: var(--nox-bg-4); }
  .md\:hover\:nox-bg-accent-s:hover { background: var(--nox-accent-s); }
  .md\:hover\:nox-shadow:hover { box-shadow: var(--nox-shadow); }
  .md\:hover\:nox-shadow-lg:hover { box-shadow: var(--nox-shadow-lg); }
  .md\:hover\:nox-shadow-xl:hover { box-shadow: var(--nox-shadow-xl); }
  .md\:hover\:nox-scale-102:hover { transform: scale(1.02); }
  .md\:hover\:nox-scale-105:hover { transform: scale(1.05); }
  .md\:hover\:nox-translate-y-n2:hover { transform: translateY(-2px); }
  .md\:hover\:nox-translate-y-n3:hover { transform: translateY(-3px); }
  .md\:hover\:nox-border-accent:hover { border-color: var(--nox-accent); }
  .md\:hover\:nox-text-accent:hover { color: var(--nox-accent); }
  .md\:hover\:nox-text-ink:hover { color: var(--nox-ink); }
  .md\:hover\:nox-opacity-100:hover { opacity: 1; }
  .md\:hover\:nox-underline:hover { text-decoration: underline; }
}

@media (min-width: 1024px) {
  .lg\:hover\:nox-bg-3:hover { background: var(--nox-bg-3); }
  .lg\:hover\:nox-bg-4:hover { background: var(--nox-bg-4); }
  .lg\:hover\:nox-bg-accent-s:hover { background: var(--nox-accent-s); }
  .lg\:hover\:nox-shadow:hover { box-shadow: var(--nox-shadow); }
  .lg\:hover\:nox-shadow-lg:hover { box-shadow: var(--nox-shadow-lg); }
  .lg\:hover\:nox-shadow-xl:hover { box-shadow: var(--nox-shadow-xl); }
  .lg\:hover\:nox-scale-102:hover { transform: scale(1.02); }
  .lg\:hover\:nox-scale-105:hover { transform: scale(1.05); }
  .lg\:hover\:nox-scale-110:hover { transform: scale(1.1); }
  .lg\:hover\:nox-translate-y-n2:hover { transform: translateY(-2px); }
  .lg\:hover\:nox-translate-y-n3:hover { transform: translateY(-3px); }
  .lg\:hover\:nox-translate-y-n4:hover { transform: translateY(-4px); }
  .lg\:hover\:nox-border-accent:hover { border-color: var(--nox-accent); }
  .lg\:hover\:nox-text-accent:hover { color: var(--nox-accent); }
  .lg\:hover\:nox-text-ink:hover { color: var(--nox-ink); }
  .lg\:hover\:nox-opacity-100:hover { opacity: 1; }
  .lg\:hover\:nox-opacity-80:hover { opacity: 0.8; }
  .lg\:hover\:nox-underline:hover { text-decoration: underline; }
  .lg\:hover\:nox-no-underline:hover { text-decoration: none; }
  .lg\:hover\:nox-ring-2:hover { box-shadow: 0 0 0 2px var(--nox-accent-g); }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 12 — ADDITIONAL INTERACTIVE COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── 12.1 Command Palette / Spotlight ─── */

.nox-command-palette-overlay {
  position: fixed;
  inset: 0;
  background: var(--nox-overlay);
  z-index: 9990;
  opacity: 0;
  visibility: hidden;
  transition: all 0.15s;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
}
.nox-command-palette-overlay.open {
  opacity: 1;
  visibility: visible;
}
.nox-command-palette {
  width: 100%;
  max-width: 560px;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  box-shadow: var(--nox-shadow-xl);
  overflow: hidden;
  transform: scale(0.96) translateY(-10px);
  transition: all 0.15s;
}
.nox-command-palette-overlay.open .nox-command-palette {
  transform: scale(1) translateY(0);
}
.nox-command-palette-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--nox-line);
}
.nox-command-palette-input-icon {
  font-size: 16px;
  color: var(--nox-ink-3);
  flex-shrink: 0;
}
.nox-command-palette-input input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: 15px;
  color: var(--nox-ink);
}
.nox-command-palette-input input::placeholder {
  color: var(--nox-ink-4);
}
.nox-command-palette-results {
  max-height: 360px;
  overflow-y: auto;
  padding: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--nox-bg-5) transparent;
}
.nox-command-palette-group-label {
  padding: 6px 8px 4px;
  font-family: var(--nox-font-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--nox-ink-4);
}
.nox-command-palette-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--nox-r);
  cursor: pointer;
  transition: background 0.08s;
  font-size: 13px;
  color: var(--nox-ink-2);
}
.nox-command-palette-item:hover,
.nox-command-palette-item.active {
  background: var(--nox-bg-3);
  color: var(--nox-ink);
}
.nox-command-palette-item-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--nox-ink-3);
  flex-shrink: 0;
}
.nox-command-palette-item-label { flex: 1; }
.nox-command-palette-item-shortcut {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  color: var(--nox-ink-4);
  flex-shrink: 0;
}
.nox-command-palette-footer {
  padding: 8px 16px;
  border-top: 1px solid var(--nox-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--nox-ink-4);
}
.nox-command-palette-hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}


/* ─── 12.2 Color Picker Swatch ─── */

.nox-color-swatch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
.nox-color-swatch-item {
  width: 24px;
  height: 24px;
  border-radius: var(--nox-r);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.12s;
}
.nox-color-swatch-item:hover {
  transform: scale(1.15);
  box-shadow: var(--nox-shadow);
}
.nox-color-swatch-item.selected {
  border-color: var(--nox-ink);
  box-shadow: 0 0 0 2px var(--nox-bg-2);
}
.nox-color-swatch-item-lg {
  width: 32px;
  height: 32px;
  border-radius: var(--nox-r-lg);
}
.nox-color-preview {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nox-color-preview-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--nox-line);
  flex-shrink: 0;
}
.nox-color-preview-label {
  font-family: var(--nox-font-mono);
  font-size: 11px;
  color: var(--nox-ink-2);
}


/* ─── 12.3 Tag Input ─── */

.nox-tag-input {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 8px;
  background: var(--nox-bg-1);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r);
  min-height: 38px;
  cursor: text;
  transition: border-color 0.18s;
}
.nox-tag-input:focus-within {
  border-color: var(--nox-accent);
  box-shadow: 0 0 0 2px var(--nox-accent-s);
}
.nox-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 10px;
  background: var(--nox-bg-4);
  border-radius: var(--nox-r);
  font-size: 11px;
  color: var(--nox-ink-2);
}
.nox-tag-remove {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--nox-ink-4);
  font-size: 10px;
  cursor: pointer;
  transition: all 0.12s;
  line-height: 1;
  padding: 0;
}
.nox-tag-remove:hover {
  background: var(--nox-bg-5);
  color: var(--nox-ink);
}
.nox-tag-input input {
  border: none;
  background: none;
  outline: none;
  font-size: 12px;
  color: var(--nox-ink);
  flex: 1;
  min-width: 80px;
  padding: 2px 4px;
}


/* ─── 12.4 Rating Stars ─── */

.nox-rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.nox-rating-star {
  font-size: 16px;
  color: var(--nox-bg-5);
  cursor: pointer;
  transition: all 0.12s;
}
.nox-rating-star:hover {
  transform: scale(1.15);
}
.nox-rating-star.filled {
  color: var(--nox-yellow);
}
.nox-rating-star.half {
  position: relative;
}
.nox-rating-star.half::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
}
.nox-rating-sm .nox-rating-star { font-size: 12px; }
.nox-rating-lg .nox-rating-star { font-size: 24px; }
.nox-rating-value {
  font-family: var(--nox-font-mono);
  font-size: 12px;
  color: var(--nox-ink-2);
  margin-left: 6px;
}
.nox-rating-count {
  font-size: 11px;
  color: var(--nox-ink-4);
  margin-left: 4px;
}
.nox-rating-readonly .nox-rating-star {
  cursor: default;
}
.nox-rating-readonly .nox-rating-star:hover {
  transform: none;
}


/* ─── 12.5 Avatar Group ─── */

.nox-avatar-group {
  display: flex;
  align-items: center;
}
.nox-avatar-group .nox-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--nox-bg-2);
  margin-left: -8px;
  background: var(--nox-bg-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--nox-ink-2);
  overflow: hidden;
  position: relative;
  transition: transform 0.12s;
}
.nox-avatar-group .nox-avatar:first-child {
  margin-left: 0;
}
.nox-avatar-group .nox-avatar:hover {
  transform: translateY(-2px);
  z-index: 1;
}
.nox-avatar-group .nox-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nox-avatar-group-count {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--nox-bg-2);
  margin-left: -8px;
  background: var(--nox-bg-5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--nox-font-mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--nox-ink-2);
}
.nox-avatar-group-sm .nox-avatar,
.nox-avatar-group-sm .nox-avatar-group-count {
  width: 24px;
  height: 24px;
  font-size: 9px;
  margin-left: -6px;
}
.nox-avatar-group-lg .nox-avatar,
.nox-avatar-group-lg .nox-avatar-group-count {
  width: 40px;
  height: 40px;
  font-size: 13px;
  margin-left: -10px;
}


/* ─── 12.6 Notification Dot / Badge Count ─── */

.nox-dot {
  position: relative;
}
.nox-dot::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nox-red);
  border: 2px solid var(--nox-bg-2);
}
.nox-dot.green::after { background: var(--nox-green); }
.nox-dot.yellow::after { background: var(--nox-yellow); }
.nox-dot.blue::after { background: var(--nox-blue); }
.nox-dot.accent::after { background: var(--nox-accent); }

.nox-badge-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--nox-red);
  color: #ffffff;
  font-family: var(--nox-font-mono);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--nox-bg-2);
  line-height: 1;
}
.nox-badge-count.accent { background: var(--nox-accent); }
.nox-badge-count.green { background: var(--nox-green); }


/* ─── 12.7 Split Button ─── */

.nox-btn-split {
  display: inline-flex;
  align-items: stretch;
  border-radius: var(--nox-r);
  overflow: hidden;
}
.nox-btn-split-main {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  background: var(--nox-accent);
  color: var(--nox-bg-0);
  border: none;
  cursor: pointer;
  transition: all 0.12s;
}
.nox-btn-split-main:hover {
  filter: brightness(1.1);
}
.nox-btn-split-toggle {
  width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nox-accent);
  color: var(--nox-bg-0);
  border: none;
  border-left: 1px solid rgba(255,255,255,0.2);
  cursor: pointer;
  font-size: 10px;
  transition: all 0.12s;
}
.nox-btn-split-toggle:hover {
  filter: brightness(1.1);
}
.nox-btn-split-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 160px;
  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-btn-split-menu.open {
  display: block;
}


/* ─── 12.8 Segmented Control ─── */

.nox-segmented {
  display: inline-flex;
  background: var(--nox-bg-3);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-lg);
  padding: 2px;
  gap: 2px;
}
.nox-segmented-item {
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--nox-ink-3);
  border-radius: var(--nox-r);
  border: none;
  background: none;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.nox-segmented-item:hover {
  color: var(--nox-ink);
}
.nox-segmented-item.active {
  background: var(--nox-bg-2);
  color: var(--nox-ink);
  box-shadow: var(--nox-shadow-sm);
}
.nox-segmented-sm .nox-segmented-item {
  padding: 4px 10px;
  font-size: 11px;
}
.nox-segmented-lg .nox-segmented-item {
  padding: 8px 18px;
  font-size: 13px;
}
.nox-segmented-accent .nox-segmented-item.active {
  background: var(--nox-accent);
  color: var(--nox-bg-0);
}
.nox-segmented-full {
  display: flex;
  width: 100%;
}
.nox-segmented-full .nox-segmented-item {
  flex: 1;
  text-align: center;
}


/* ─── 12.9 File Upload Zone ─── */

.nox-upload-zone {
  border: 2px dashed var(--nox-line);
  border-radius: var(--nox-r-xl);
  padding: 32px;
  text-align: center;
  transition: all 0.18s;
  cursor: pointer;
  background: var(--nox-bg-1);
}
.nox-upload-zone:hover {
  border-color: var(--nox-accent);
  background: var(--nox-accent-s);
}
.nox-upload-zone.dragover {
  border-color: var(--nox-accent);
  background: var(--nox-accent-s);
  border-style: solid;
}
.nox-upload-zone-icon {
  font-size: 32px;
  color: var(--nox-ink-4);
  margin-bottom: 12px;
}
.nox-upload-zone-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--nox-ink);
  margin-bottom: 4px;
}
.nox-upload-zone-desc {
  font-size: 12px;
  color: var(--nox-ink-3);
}
.nox-upload-zone-hint {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  color: var(--nox-ink-4);
  margin-top: 8px;
}
.nox-upload-zone-compact {
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}
.nox-upload-file {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r);
  margin-top: 8px;
}
.nox-upload-file-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nox-bg-4);
  border-radius: var(--nox-r);
  font-size: 14px;
  color: var(--nox-ink-3);
  flex-shrink: 0;
}
.nox-upload-file-info {
  flex: 1;
  min-width: 0;
}
.nox-upload-file-name {
  font-size: 12px;
  color: var(--nox-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nox-upload-file-size {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  color: var(--nox-ink-4);
}
.nox-upload-file-remove {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--nox-ink-4);
  cursor: pointer;
  font-size: 12px;
  transition: all 0.12s;
  flex-shrink: 0;
}
.nox-upload-file-remove:hover {
  background: var(--nox-red-s);
  color: var(--nox-red);
}


/* ─── 12.10 Empty State / Placeholder ─── */

.nox-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}
.nox-empty-state-icon {
  font-size: 48px;
  color: var(--nox-ink-4);
  opacity: 0.3;
  margin-bottom: 16px;
}
.nox-empty-state-title {
  font-family: var(--nox-font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--nox-ink);
  margin-bottom: 6px;
}
.nox-empty-state-desc {
  font-size: 13px;
  color: var(--nox-ink-3);
  max-width: 360px;
  line-height: 1.5;
  margin-bottom: 16px;
}
.nox-empty-state-action {
  margin-top: 4px;
}
.nox-empty-state-sm {
  padding: 24px 16px;
}
.nox-empty-state-sm .nox-empty-state-icon { font-size: 32px; }
.nox-empty-state-sm .nox-empty-state-title { font-size: 14px; }
.nox-empty-state-sm .nox-empty-state-desc { font-size: 12px; }


/* ─── 12.11 Inline Alert / Callout ─── */

.nox-callout {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--nox-r-lg);
  border: 1px solid var(--nox-line);
  background: var(--nox-bg-2);
}
.nox-callout-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}
.nox-callout-body {
  flex: 1;
  min-width: 0;
}
.nox-callout-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--nox-ink);
  margin-bottom: 2px;
}
.nox-callout-text {
  font-size: 12px;
  color: var(--nox-ink-2);
  line-height: 1.5;
}
.nox-callout.info {
  border-color: var(--nox-blue);
  background: var(--nox-blue-s);
}
.nox-callout.info .nox-callout-icon { color: var(--nox-blue); }
.nox-callout.success {
  border-color: var(--nox-green);
  background: var(--nox-green-s);
}
.nox-callout.success .nox-callout-icon { color: var(--nox-green); }
.nox-callout.warning {
  border-color: var(--nox-yellow);
  background: var(--nox-yellow-s);
}
.nox-callout.warning .nox-callout-icon { color: var(--nox-yellow); }
.nox-callout.error {
  border-color: var(--nox-red);
  background: var(--nox-red-s);
}
.nox-callout.error .nox-callout-icon { color: var(--nox-red); }
.nox-callout.tip {
  border-color: var(--nox-purple);
  background: var(--nox-purple-s);
}
.nox-callout.tip .nox-callout-icon { color: var(--nox-purple); }


/* ─── 12.12 Progress Steps (vertical stepper) ─── */

.nox-stepper {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.nox-step {
  display: flex;
  gap: 12px;
  position: relative;
}
.nox-step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}
.nox-step-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--nox-line);
  background: var(--nox-bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--nox-ink-4);
  z-index: 1;
}
.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: #ffffff;
}
.nox-step.error .nox-step-dot {
  border-color: var(--nox-red);
  background: var(--nox-red);
  color: #ffffff;
}
.nox-step-line {
  width: 2px;
  flex: 1;
  background: var(--nox-line);
  min-height: 24px;
}
.nox-step.completed .nox-step-line {
  background: var(--nox-green);
}
.nox-step:last-child .nox-step-line {
  display: none;
}
.nox-step-content {
  padding-bottom: 24px;
  flex: 1;
}
.nox-step-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--nox-ink);
  margin-bottom: 2px;
}
.nox-step-desc {
  font-size: 12px;
  color: var(--nox-ink-3);
  line-height: 1.5;
}
.nox-step.disabled .nox-step-title { color: var(--nox-ink-4); }
.nox-step.disabled .nox-step-desc { color: var(--nox-ink-4); }


/* ─── 12.13 Stat Sparkline Container ─── */

.nox-sparkline-container {
  display: inline-flex;
  align-items: flex-end;
  gap: 1px;
  height: 24px;
}
.nox-sparkline-bar {
  width: 3px;
  background: var(--nox-accent);
  border-radius: 1px 1px 0 0;
  transition: height 0.3s ease;
  opacity: 0.6;
}
.nox-sparkline-bar:last-child {
  opacity: 1;
}
.nox-sparkline-bar.highlight {
  background: var(--nox-green);
  opacity: 1;
}
.nox-sparkline-bar.negative {
  background: var(--nox-red);
}
.nox-sparkline-lg {
  height: 40px;
}
.nox-sparkline-lg .nox-sparkline-bar {
  width: 4px;
}


/* ─── 12.14 Data Table Enhancements ─── */

.nox-table-sortable th {
  cursor: pointer;
  user-select: none;
  position: relative;
}
.nox-table-sortable th:hover {
  background: var(--nox-bg-3);
}
.nox-table-sort-icon {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  margin-left: 4px;
  opacity: 0.3;
  transition: opacity 0.12s;
  vertical-align: middle;
}
.nox-table-sortable th:hover .nox-table-sort-icon {
  opacity: 0.6;
}
.nox-table-sort-icon.asc,
.nox-table-sort-icon.desc {
  opacity: 1;
  color: var(--nox-accent);
}
.nox-table-pinned {
  position: sticky;
  background: var(--nox-bg-2);
  z-index: 1;
}
.nox-table-pinned-left { left: 0; }
.nox-table-pinned-right { right: 0; }
.nox-table-pinned-top { top: 0; }

.nox-table-selected {
  background: var(--nox-accent-s) !important;
}
.nox-table-selected td {
  border-color: var(--nox-accent-g);
}

.nox-table-group-header {
  background: var(--nox-bg-3);
  font-weight: 600;
  font-size: 12px;
  color: var(--nox-ink-2);
}
.nox-table-group-header td {
  padding: 6px 14px;
}

.nox-table-summary-row {
  background: var(--nox-bg-3);
  font-weight: 600;
  border-top: 2px solid var(--nox-line);
}

.nox-table-cell-editable {
  cursor: pointer;
  position: relative;
}
.nox-table-cell-editable:hover {
  background: var(--nox-bg-3);
}
.nox-table-cell-editable:hover::after {
  content: '\270E';
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: var(--nox-ink-4);
}

.nox-table-cell-status {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nox-table-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.nox-table-status-dot.green { background: var(--nox-green); }
.nox-table-status-dot.red { background: var(--nox-red); }
.nox-table-status-dot.yellow { background: var(--nox-yellow); }
.nox-table-status-dot.blue { background: var(--nox-blue); }
.nox-table-status-dot.gray { background: var(--nox-ink-4); }


/* ─── 12.15 Chip / Pill with Actions ─── */

.nox-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--nox-bg-3);
  border: 1px solid var(--nox-line);
  border-radius: 20px;
  font-size: 12px;
  color: var(--nox-ink-2);
  transition: all 0.12s;
  cursor: default;
}
.nox-chip:hover {
  background: var(--nox-bg-4);
}
.nox-chip-clickable {
  cursor: pointer;
}
.nox-chip-clickable:hover {
  border-color: var(--nox-accent);
  color: var(--nox-accent);
}
.nox-chip.selected {
  background: var(--nox-accent-s);
  border-color: var(--nox-accent);
  color: var(--nox-accent);
}
.nox-chip-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--nox-bg-5);
  margin-left: -4px;
  flex-shrink: 0;
  overflow: hidden;
}
.nox-chip-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nox-chip-remove {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--nox-ink-4);
  font-size: 10px;
  cursor: pointer;
  transition: all 0.12s;
  margin-right: -4px;
  padding: 0;
  line-height: 1;
}
.nox-chip-remove:hover {
  background: var(--nox-red-s);
  color: var(--nox-red);
}
.nox-chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}


/* ─── 12.16 Timeline (vertical) ─── */

.nox-timeline {
  position: relative;
  padding-left: 24px;
}
.nox-timeline::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 11px;
  width: 2px;
  background: var(--nox-line);
}
.nox-timeline-item {
  position: relative;
  padding-bottom: 24px;
}
.nox-timeline-item:last-child {
  padding-bottom: 0;
}
.nox-timeline-dot {
  position: absolute;
  left: -19px;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--nox-line);
  background: var(--nox-bg-2);
  z-index: 1;
}
.nox-timeline-item.active .nox-timeline-dot {
  border-color: var(--nox-accent);
  background: var(--nox-accent);
}
.nox-timeline-item.success .nox-timeline-dot {
  border-color: var(--nox-green);
  background: var(--nox-green);
}
.nox-timeline-item.error .nox-timeline-dot {
  border-color: var(--nox-red);
  background: var(--nox-red);
}
.nox-timeline-item.warning .nox-timeline-dot {
  border-color: var(--nox-yellow);
  background: var(--nox-yellow);
}
.nox-timeline-time {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  color: var(--nox-ink-4);
  margin-bottom: 4px;
}
.nox-timeline-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--nox-ink);
  margin-bottom: 2px;
}
.nox-timeline-desc {
  font-size: 12px;
  color: var(--nox-ink-3);
  line-height: 1.5;
}
.nox-timeline-content {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-lg);
  padding: 12px;
  margin-top: 8px;
}


/* ─── 12.17 Statistic Card with Trend ─── */

.nox-stat-card {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  padding: var(--nox-4);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nox-stat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nox-stat-label {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--nox-ink-4);
}
.nox-stat-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--nox-r);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.nox-stat-value {
  font-family: var(--nox-font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--nox-ink);
  line-height: 1;
}
.nox-stat-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.nox-stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--nox-font-mono);
  font-size: 11px;
  font-weight: 600;
}
.nox-stat-trend.up { color: var(--nox-green); }
.nox-stat-trend.down { color: var(--nox-red); }
.nox-stat-trend.flat { color: var(--nox-ink-4); }
.nox-stat-comparison {
  font-size: 11px;
  color: var(--nox-ink-4);
}


/* ─── 12.18 Form Field Group ─── */

.nox-field-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}
.nox-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--nox-ink-2);
}
.nox-field-label-required::after {
  content: '*';
  color: var(--nox-red);
  margin-left: 2px;
}
.nox-field-hint {
  font-size: 11px;
  color: var(--nox-ink-4);
}
.nox-field-error {
  font-size: 11px;
  color: var(--nox-red);
}
.nox-field-success {
  font-size: 11px;
  color: var(--nox-green);
}
.nox-field-group.has-error input,
.nox-field-group.has-error select,
.nox-field-group.has-error textarea {
  border-color: var(--nox-red);
}
.nox-field-group.has-error input:focus,
.nox-field-group.has-error select:focus,
.nox-field-group.has-error textarea:focus {
  box-shadow: 0 0 0 2px var(--nox-red-s);
}
.nox-field-group.has-success input,
.nox-field-group.has-success select,
.nox-field-group.has-success textarea {
  border-color: var(--nox-green);
}
.nox-field-addon {
  display: flex;
  align-items: stretch;
}
.nox-field-addon-text {
  padding: 0 12px;
  display: flex;
  align-items: center;
  background: var(--nox-bg-3);
  border: 1px solid var(--nox-line);
  font-size: 12px;
  color: var(--nox-ink-3);
  white-space: nowrap;
}
.nox-field-addon-text:first-child {
  border-right: none;
  border-radius: var(--nox-r) 0 0 var(--nox-r);
}
.nox-field-addon-text:last-child {
  border-left: none;
  border-radius: 0 var(--nox-r) var(--nox-r) 0;
}
.nox-field-addon input {
  border-radius: 0;
}
.nox-field-addon input:first-child {
  border-radius: var(--nox-r) 0 0 var(--nox-r);
}
.nox-field-addon input:last-child {
  border-radius: 0 var(--nox-r) var(--nox-r) 0;
}


/* ─── 12.19 Horizontal Divider with Text ─── */

.nox-divider-text {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--nox-ink-4);
  font-size: 11px;
  margin: 16px 0;
}
.nox-divider-text::before,
.nox-divider-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--nox-line);
}
.nox-divider-text.left::before {
  flex: 0 0 24px;
}
.nox-divider-text.right::after {
  flex: 0 0 24px;
}


/* ─── 12.20 Pagination ─── */

.nox-pagination {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nox-page-btn {
  min-width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--nox-r);
  border: 1px solid transparent;
  background: none;
  color: var(--nox-ink-3);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.12s;
  padding: 0 8px;
}
.nox-page-btn:hover {
  background: var(--nox-bg-3);
  color: var(--nox-ink);
}
.nox-page-btn.active {
  background: var(--nox-accent-s);
  color: var(--nox-accent);
  border-color: var(--nox-accent-g);
  font-weight: 600;
}
.nox-page-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.nox-page-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--nox-ink-4);
  font-size: 14px;
  letter-spacing: 2px;
}
.nox-pagination-info {
  font-family: var(--nox-font-mono);
  font-size: 11px;
  color: var(--nox-ink-4);
  margin-left: 8px;
}
.nox-pagination-sm .nox-page-btn {
  min-width: 28px;
  height: 28px;
  font-size: 11px;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 13 — DARK MODE PREFERENCE OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  .dark\:nox-bg-0   { background: var(--nox-bg-0); }
  .dark\:nox-bg-1   { background: var(--nox-bg-1); }
  .dark\:nox-bg-2   { background: var(--nox-bg-2); }
  .dark\:nox-bg-3   { background: var(--nox-bg-3); }
  .dark\:nox-text-ink   { color: var(--nox-ink); }
  .dark\:nox-text-ink-2 { color: var(--nox-ink-2); }
  .dark\:nox-border-line { border-color: var(--nox-line); }
  .dark\:nox-shadow-lg  { box-shadow: var(--nox-shadow-lg); }
  .dark\:nox-hidden { display: none; }
  .dark\:nox-block  { display: block; }
  .dark\:nox-invert { filter: invert(1); }
  .dark\:nox-opacity-80 { opacity: 0.8; }
  .dark\:nox-opacity-50 { opacity: 0.5; }
}

@media (prefers-color-scheme: light) {
  .light\:nox-bg-0   { background: var(--nox-bg-0); }
  .light\:nox-bg-1   { background: var(--nox-bg-1); }
  .light\:nox-bg-2   { background: var(--nox-bg-2); }
  .light\:nox-bg-3   { background: var(--nox-bg-3); }
  .light\:nox-text-ink   { color: var(--nox-ink); }
  .light\:nox-text-ink-2 { color: var(--nox-ink-2); }
  .light\:nox-border-line { border-color: var(--nox-line); }
  .light\:nox-shadow-lg  { box-shadow: var(--nox-shadow-lg); }
  .light\:nox-hidden { display: none; }
  .light\:nox-block  { display: block; }
  .light\:nox-invert { filter: invert(1); }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 14 — REDUCED MOTION & ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .nox-motion-safe\:nox-animate { animation: none !important; }
  .nox-motion-safe\:nox-transition { transition: none !important; }

  .nox-drawer { transition: none; }
  .nox-drawer-overlay { transition: none; }
  .nox-hover-card-content { transition: none; }
  .nox-table-expand-content { transition: none; }
  .nox-sidebar-collapsible { transition: none; }
  .nox-command-palette { transition: none; }
  .nox-toast-stack .nox-toast { animation: none; }
  .nox-cookie-bar { transition: none; }

  .nox-skeleton { animation: none; opacity: 0.6; }
  .nox-skeleton-shimmer { animation: none; opacity: 0.6; }
  .nox-maintenance-progress-bar { animation: none; }
  .nox-reading-progress-fill { transition: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .nox-motion-safe\:nox-transition { transition: all var(--nox-ease); }
  .nox-motion-safe\:nox-animate { animation-duration: 0.3s; }
}

/* Screen reader only */
.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;
}

/* Focus trap indicator */
.nox-focus-trap-active {
  outline: 2px dashed var(--nox-accent);
  outline-offset: -2px;
}

/* High contrast mode */
@media (forced-colors: active) {
  .nox-forced-colors-adjust { forced-color-adjust: auto; }
  .nox-forced-colors-none   { forced-color-adjust: none; }
}

/* Skip to content link */
.nox-skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  padding: 8px 16px;
  background: var(--nox-accent);
  color: var(--nox-bg-0);
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--nox-r);
  z-index: 99999;
  text-decoration: none;
  transition: top 0.15s;
}
.nox-skip-link:focus {
  top: 16px;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 15 — LOGICAL PROPERTIES (RTL/LTR support)
   ═══════════════════════════════════════════════════════════════════════════════ */

.nox-ps-0 { padding-inline-start: 0; }
.nox-ps-1 { padding-inline-start: 4px; }
.nox-ps-2 { padding-inline-start: 8px; }
.nox-ps-3 { padding-inline-start: 12px; }
.nox-ps-4 { padding-inline-start: 16px; }
.nox-ps-5 { padding-inline-start: 20px; }
.nox-ps-6 { padding-inline-start: 24px; }
.nox-ps-8 { padding-inline-start: 32px; }

.nox-pe-0 { padding-inline-end: 0; }
.nox-pe-1 { padding-inline-end: 4px; }
.nox-pe-2 { padding-inline-end: 8px; }
.nox-pe-3 { padding-inline-end: 12px; }
.nox-pe-4 { padding-inline-end: 16px; }
.nox-pe-5 { padding-inline-end: 20px; }
.nox-pe-6 { padding-inline-end: 24px; }
.nox-pe-8 { padding-inline-end: 32px; }

.nox-ms-0    { margin-inline-start: 0; }
.nox-ms-1    { margin-inline-start: 4px; }
.nox-ms-2    { margin-inline-start: 8px; }
.nox-ms-3    { margin-inline-start: 12px; }
.nox-ms-4    { margin-inline-start: 16px; }
.nox-ms-auto { margin-inline-start: auto; }

.nox-me-0    { margin-inline-end: 0; }
.nox-me-1    { margin-inline-end: 4px; }
.nox-me-2    { margin-inline-end: 8px; }
.nox-me-3    { margin-inline-end: 12px; }
.nox-me-4    { margin-inline-end: 16px; }
.nox-me-auto { margin-inline-end: auto; }

.nox-start-0    { inset-inline-start: 0; }
.nox-start-1    { inset-inline-start: 4px; }
.nox-start-2    { inset-inline-start: 8px; }
.nox-start-4    { inset-inline-start: 16px; }
.nox-start-auto { inset-inline-start: auto; }

.nox-end-0    { inset-inline-end: 0; }
.nox-end-1    { inset-inline-end: 4px; }
.nox-end-2    { inset-inline-end: 8px; }
.nox-end-4    { inset-inline-end: 16px; }
.nox-end-auto { inset-inline-end: auto; }

.nox-border-s-0 { border-inline-start-width: 0; }
.nox-border-s   { border-inline-start-width: 1px; }
.nox-border-s-2 { border-inline-start-width: 2px; }
.nox-border-s-4 { border-inline-start-width: 4px; }

.nox-border-e-0 { border-inline-end-width: 0; }
.nox-border-e   { border-inline-end-width: 1px; }
.nox-border-e-2 { border-inline-end-width: 2px; }
.nox-border-e-4 { border-inline-end-width: 4px; }

.nox-rounded-s    { border-start-start-radius: var(--nox-r); border-end-start-radius: var(--nox-r); }
.nox-rounded-s-lg { border-start-start-radius: var(--nox-r-lg); border-end-start-radius: var(--nox-r-lg); }
.nox-rounded-e    { border-start-end-radius: var(--nox-r); border-end-end-radius: var(--nox-r); }
.nox-rounded-e-lg { border-start-end-radius: var(--nox-r-lg); border-end-end-radius: var(--nox-r-lg); }

.nox-text-start { text-align: start; }
.nox-text-end   { text-align: end; }

.nox-float-start { float: inline-start; }
.nox-float-end   { float: inline-end; }


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 16 — RESPONSIVE CONTAINER QUERY EXTENSIONS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Extended @container queries with more utility classes */

@container (min-width: 320px) {
  .\@xs\:nox-text-xs     { font-size: 11px; }
  .\@xs\:nox-text-sm     { font-size: 12px; }
  .\@xs\:nox-text-base   { font-size: 13px; }
  .\@xs\:nox-p-1         { padding: 4px; }
  .\@xs\:nox-p-2         { padding: 8px; }
  .\@xs\:nox-gap-1       { gap: 4px; }
  .\@xs\:nox-gap-2       { gap: 8px; }
  .\@xs\:nox-w-full      { width: 100%; }
  .\@xs\:nox-w-auto      { width: auto; }
  .\@xs\:nox-flex-col    { flex-direction: column; }
  .\@xs\:nox-flex-wrap   { flex-wrap: wrap; }
  .\@xs\:nox-justify-center { justify-content: center; }
  .\@xs\:nox-items-center { align-items: center; }
  .\@xs\:nox-text-center { text-align: center; }
  .\@xs\:nox-text-left   { text-align: left; }
  .\@xs\:nox-order-1     { order: 1; }
  .\@xs\:nox-order-2     { order: 2; }
  .\@xs\:nox-col-span-1  { grid-column: span 1 / span 1; }
  .\@xs\:nox-col-span-2  { grid-column: span 2 / span 2; }
  .\@xs\:nox-row-span-2  { grid-row: span 2 / span 2; }
}

@container (min-width: 480px) {
  .\@sm\:nox-text-xs     { font-size: 11px; }
  .\@sm\:nox-text-base   { font-size: 13px; }
  .\@sm\:nox-p-2         { padding: 8px; }
  .\@sm\:nox-p-3         { padding: 12px; }
  .\@sm\:nox-p-5         { padding: 20px; }
  .\@sm\:nox-gap-3       { gap: 12px; }
  .\@sm\:nox-gap-5       { gap: 20px; }
  .\@sm\:nox-w-auto      { width: auto; }
  .\@sm\:nox-w-1\/2      { width: 50%; }
  .\@sm\:nox-flex-nowrap { flex-wrap: nowrap; }
  .\@sm\:nox-justify-between { justify-content: space-between; }
  .\@sm\:nox-justify-start { justify-content: flex-start; }
  .\@sm\:nox-text-left   { text-align: left; }
  .\@sm\:nox-text-center { text-align: center; }
  .\@sm\:nox-order-1     { order: 1; }
  .\@sm\:nox-order-2     { order: 2; }
  .\@sm\:nox-order-3     { order: 3; }
  .\@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-row-span-2  { grid-row: span 2 / span 2; }
  .\@sm\:nox-self-start  { align-self: flex-start; }
  .\@sm\:nox-self-center { align-self: center; }
  .\@sm\:nox-self-end    { align-self: flex-end; }
}

@container (min-width: 640px) {
  .\@md\:nox-text-sm     { font-size: 12px; }
  .\@md\:nox-text-base   { font-size: 13px; }
  .\@md\:nox-text-2xl    { font-size: 22px; }
  .\@md\:nox-p-3         { padding: 12px; }
  .\@md\:nox-p-8         { padding: 32px; }
  .\@md\:nox-gap-2       { gap: 8px; }
  .\@md\:nox-gap-8       { gap: 32px; }
  .\@md\:nox-w-auto      { width: auto; }
  .\@md\:nox-w-1\/2      { width: 50%; }
  .\@md\:nox-w-1\/3      { width: 33.333%; }
  .\@md\:nox-w-2\/3      { width: 66.666%; }
  .\@md\:nox-flex-nowrap { flex-wrap: nowrap; }
  .\@md\:nox-justify-between { justify-content: space-between; }
  .\@md\:nox-justify-start { justify-content: flex-start; }
  .\@md\:nox-justify-end  { justify-content: flex-end; }
  .\@md\:nox-text-left   { text-align: left; }
  .\@md\:nox-text-center { text-align: center; }
  .\@md\:nox-text-right  { text-align: right; }
  .\@md\:nox-order-1     { order: 1; }
  .\@md\:nox-order-2     { order: 2; }
  .\@md\:nox-order-3     { order: 3; }
  .\@md\:nox-col-span-1  { grid-column: span 1 / span 1; }
  .\@md\:nox-col-span-3  { grid-column: span 3 / span 3; }
  .\@md\:nox-col-span-4  { grid-column: span 4 / span 4; }
  .\@md\:nox-row-span-2  { grid-row: span 2 / span 2; }
  .\@md\:nox-row-span-3  { grid-row: span 3 / span 3; }
  .\@md\:nox-self-start  { align-self: flex-start; }
  .\@md\:nox-self-center { align-self: center; }
  .\@md\:nox-self-end    { align-self: flex-end; }
  .\@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)); }
}

@container (min-width: 900px) {
  .\@lg\:nox-text-lg     { font-size: 15px; }
  .\@lg\:nox-text-xl     { font-size: 18px; }
  .\@lg\:nox-text-2xl    { font-size: 22px; }
  .\@lg\:nox-text-3xl    { font-size: 28px; }
  .\@lg\:nox-p-4         { padding: 16px; }
  .\@lg\:nox-p-5         { padding: 20px; }
  .\@lg\:nox-p-6         { padding: 24px; }
  .\@lg\:nox-p-8         { padding: 32px; }
  .\@lg\:nox-p-10        { padding: 40px; }
  .\@lg\:nox-gap-4       { gap: 16px; }
  .\@lg\:nox-gap-6       { gap: 24px; }
  .\@lg\:nox-gap-8       { gap: 32px; }
  .\@lg\:nox-w-1\/2      { width: 50%; }
  .\@lg\:nox-w-1\/3      { width: 33.333%; }
  .\@lg\:nox-w-1\/4      { width: 25%; }
  .\@lg\:nox-w-2\/3      { width: 66.666%; }
  .\@lg\:nox-w-3\/4      { width: 75%; }
  .\@lg\:nox-flex-wrap   { flex-wrap: wrap; }
  .\@lg\:nox-flex-nowrap { flex-wrap: nowrap; }
  .\@lg\:nox-justify-between { justify-content: space-between; }
  .\@lg\:nox-text-left   { text-align: left; }
  .\@lg\:nox-text-right  { text-align: right; }
  .\@lg\:nox-col-span-2  { grid-column: span 2 / span 2; }
  .\@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-row-span-2  { grid-row: span 2 / span 2; }
  .\@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)); }
}

@container (min-width: 1200px) {
  .\@xl\:nox-text-2xl    { font-size: 22px; }
  .\@xl\:nox-text-3xl    { font-size: 28px; }
  .\@xl\:nox-text-4xl    { font-size: 36px; }
  .\@xl\:nox-p-6         { padding: 24px; }
  .\@xl\:nox-p-10        { padding: 40px; }
  .\@xl\:nox-p-12        { padding: 48px; }
  .\@xl\:nox-gap-4       { gap: 16px; }
  .\@xl\:nox-gap-6       { gap: 24px; }
  .\@xl\:nox-gap-10      { gap: 40px; }
  .\@xl\:nox-w-1\/4      { width: 25%; }
  .\@xl\:nox-w-1\/5      { width: 20%; }
  .\@xl\:nox-w-2\/5      { width: 40%; }
  .\@xl\:nox-w-3\/5      { width: 60%; }
  .\@xl\:nox-flex-nowrap { flex-wrap: nowrap; }
  .\@xl\:nox-text-left   { text-align: left; }
  .\@xl\:nox-col-span-2  { grid-column: span 2 / span 2; }
  .\@xl\:nox-col-span-5  { grid-column: span 5 / span 5; }
  .\@xl\:nox-col-span-6  { grid-column: span 6 / span 6; }
  .\@xl\:nox-grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .\@xl\:nox-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 17 — EXPANDED ANIMATION KEYFRAMES & UTILITIES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── 17.1 Entrance Animations ─── */

@keyframes nox-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes nox-fade-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes nox-fade-in-down {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes nox-fade-in-left {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes nox-fade-in-right {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes nox-scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes nox-scale-in-up {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes nox-slide-in-left {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}
@keyframes nox-slide-in-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes nox-slide-in-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
@keyframes nox-slide-in-down {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}
@keyframes nox-flip-in-x {
  from { opacity: 0; transform: perspective(400px) rotateX(90deg); }
  to { opacity: 1; transform: perspective(400px) rotateX(0); }
}
@keyframes nox-flip-in-y {
  from { opacity: 0; transform: perspective(400px) rotateY(90deg); }
  to { opacity: 1; transform: perspective(400px) rotateY(0); }
}
@keyframes nox-zoom-in {
  from { opacity: 0; transform: scale(0); }
  to { opacity: 1; transform: scale(1); }
}

/* ─── 17.2 Exit Animations ─── */

@keyframes nox-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes nox-fade-out-up {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes nox-fade-out-down {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(8px); }
}
@keyframes nox-scale-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.95); }
}
@keyframes nox-slide-out-left {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
@keyframes nox-slide-out-right {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

/* ─── 17.3 Continuous Animations ─── */

@keyframes nox-spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes nox-ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}
@keyframes nox-bounce-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes nox-wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}
@keyframes nox-pulse-ring {
  0% { box-shadow: 0 0 0 0 var(--nox-accent-g); }
  100% { box-shadow: 0 0 0 8px transparent; }
}
@keyframes nox-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes nox-heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.1); }
  28% { transform: scale(1); }
  42% { transform: scale(1.1); }
  56% { transform: scale(1); }
}
@keyframes nox-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes nox-shake {
  0%, 100% { transform: translateX(0); }
  10%, 50%, 90% { transform: translateX(-2px); }
  30%, 70% { transform: translateX(2px); }
}

/* ─── 17.4 Animation Utility Classes ─── */

.nox-anim-fade-in       { animation: nox-fade-in 0.3s ease both; }
.nox-anim-fade-in-up    { animation: nox-fade-in-up 0.3s ease both; }
.nox-anim-fade-in-down  { animation: nox-fade-in-down 0.3s ease both; }
.nox-anim-fade-in-left  { animation: nox-fade-in-left 0.3s ease both; }
.nox-anim-fade-in-right { animation: nox-fade-in-right 0.3s ease both; }
.nox-anim-scale-in      { animation: nox-scale-in 0.2s ease both; }
.nox-anim-scale-in-up   { animation: nox-scale-in-up 0.25s ease both; }
.nox-anim-slide-in-left { animation: nox-slide-in-left 0.3s ease both; }
.nox-anim-slide-in-right { animation: nox-slide-in-right 0.3s ease both; }
.nox-anim-slide-in-up   { animation: nox-slide-in-up 0.3s ease both; }
.nox-anim-slide-in-down { animation: nox-slide-in-down 0.3s ease both; }
.nox-anim-flip-in-x     { animation: nox-flip-in-x 0.4s ease both; }
.nox-anim-flip-in-y     { animation: nox-flip-in-y 0.4s ease both; }
.nox-anim-zoom-in       { animation: nox-zoom-in 0.2s ease both; }

.nox-anim-fade-out      { animation: nox-fade-out 0.2s ease both; }
.nox-anim-fade-out-up   { animation: nox-fade-out-up 0.2s ease both; }
.nox-anim-fade-out-down { animation: nox-fade-out-down 0.2s ease both; }
.nox-anim-scale-out     { animation: nox-scale-out 0.2s ease both; }
.nox-anim-slide-out-left { animation: nox-slide-out-left 0.3s ease both; }
.nox-anim-slide-out-right { animation: nox-slide-out-right 0.3s ease both; }

.nox-anim-spin-slow     { animation: nox-spin-slow 2s linear infinite; }
.nox-anim-ping          { animation: nox-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.nox-anim-bounce-soft   { animation: nox-bounce-soft 1.5s ease-in-out infinite; }
.nox-anim-wiggle        { animation: nox-wiggle 0.4s ease; }
.nox-anim-pulse-ring    { animation: nox-pulse-ring 1.5s ease infinite; }
.nox-anim-float         { animation: nox-float 3s ease-in-out infinite; }
.nox-anim-heartbeat     { animation: nox-heartbeat 1.5s ease infinite; }
.nox-anim-blink         { animation: nox-blink 1s step-end infinite; }
.nox-anim-shake         { animation: nox-shake 0.4s ease; }

/* ─── 17.5 Animation Modifiers ─── */

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

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

.nox-anim-once     { animation-iteration-count: 1; }
.nox-anim-infinite { animation-iteration-count: infinite; }
.nox-anim-ease     { animation-timing-function: ease; }
.nox-anim-ease-in  { animation-timing-function: ease-in; }
.nox-anim-ease-out { animation-timing-function: ease-out; }
.nox-anim-linear   { animation-timing-function: linear; }
.nox-anim-spring   { animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); }

.nox-anim-fill-both     { animation-fill-mode: both; }
.nox-anim-fill-forwards { animation-fill-mode: forwards; }
.nox-anim-fill-none     { animation-fill-mode: none; }

.nox-anim-paused  { animation-play-state: paused; }
.nox-anim-running { animation-play-state: running; }

/* Staggered children (set --nox-stagger-index on each child) */
.nox-anim-stagger > * {
  animation-delay: calc(var(--nox-stagger-index, 0) * 50ms);
}
.nox-anim-stagger-slow > * {
  animation-delay: calc(var(--nox-stagger-index, 0) * 100ms);
}
.nox-anim-stagger-fast > * {
  animation-delay: calc(var(--nox-stagger-index, 0) * 30ms);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 18 — ADDITIONAL SPACING & SIZING UTILITIES
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Gap extensions */
.nox-gap-px { gap: 1px; }
.nox-gap-0\.5 { gap: 2px; }
.nox-gap-9 { gap: 36px; }
.nox-gap-10 { gap: 40px; }
.nox-gap-12 { gap: 48px; }
.nox-gap-14 { gap: 56px; }
.nox-gap-16 { gap: 64px; }
.nox-gap-20 { gap: 80px; }

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

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

/* Space between children (margin-based) */
.nox-space-x-1 > * + * { margin-left: 4px; }
.nox-space-x-2 > * + * { margin-left: 8px; }
.nox-space-x-3 > * + * { margin-left: 12px; }
.nox-space-x-4 > * + * { margin-left: 16px; }
.nox-space-x-5 > * + * { margin-left: 20px; }
.nox-space-x-6 > * + * { margin-left: 24px; }
.nox-space-x-8 > * + * { margin-left: 32px; }

.nox-space-y-1 > * + * { margin-top: 4px; }
.nox-space-y-2 > * + * { margin-top: 8px; }
.nox-space-y-3 > * + * { margin-top: 12px; }
.nox-space-y-4 > * + * { margin-top: 16px; }
.nox-space-y-5 > * + * { margin-top: 20px; }
.nox-space-y-6 > * + * { margin-top: 24px; }
.nox-space-y-8 > * + * { margin-top: 32px; }

/* Width extensions */
.nox-w-px    { width: 1px; }
.nox-w-0\.5  { width: 2px; }
.nox-w-screen { width: 100vw; }
.nox-w-min   { width: min-content; }
.nox-w-max   { width: max-content; }
.nox-w-fit   { width: fit-content; }

/* Height extensions */
.nox-h-px     { height: 1px; }
.nox-h-0\.5   { height: 2px; }
.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; }

/* Margin extensions */
.nox-mx-px   { margin-left: 1px; margin-right: 1px; }
.nox-my-px   { margin-top: 1px; margin-bottom: 1px; }
.-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-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-m-1    { margin: -4px; }
.-nox-m-2    { margin: -8px; }
.-nox-m-3    { margin: -12px; }
.-nox-m-4    { margin: -16px; }
.-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-mb-1   { margin-bottom: -4px; }
.-nox-mb-2   { margin-bottom: -8px; }
.-nox-ml-1   { margin-left: -4px; }
.-nox-ml-2   { margin-left: -8px; }
.-nox-mr-1   { margin-right: -4px; }
.-nox-mr-2   { margin-right: -8px; }

/* Extended border widths */
.nox-border-3    { border-width: 3px; }
.nox-border-4    { border-width: 4px; }
.nox-border-6    { border-width: 6px; }
.nox-border-8    { border-width: 8px; }
.nox-border-t-3  { border-top-width: 3px; }
.nox-border-t-4  { border-top-width: 4px; }
.nox-border-b-3  { border-bottom-width: 3px; }
.nox-border-b-4  { border-bottom-width: 4px; }
.nox-border-l-3  { border-left-width: 3px; }
.nox-border-l-4  { border-left-width: 4px; }
.nox-border-r-3  { border-right-width: 3px; }
.nox-border-r-4  { border-right-width: 4px; }

/* Extended border radius */
.nox-rounded-2xl  { border-radius: 18px; }
.nox-rounded-3xl  { border-radius: 24px; }
.nox-rounded-4xl  { border-radius: 32px; }

/* Outline */
.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-accent  { outline-color: var(--nox-accent); }
.nox-outline-red     { outline-color: var(--nox-red); }
.nox-outline-green   { outline-color: var(--nox-green); }
.nox-outline-blue    { outline-color: var(--nox-blue); }
.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-dashed  { outline-style: dashed; }
.nox-outline-dotted  { outline-style: dotted; }
.nox-outline-solid   { outline-style: solid; }


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 19 — TEXT & TYPOGRAPHY EXTENSIONS
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─── 19.1 Text Decoration ─── */

.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-1         { text-decoration-thickness: 1px; }
.nox-decoration-2         { text-decoration-thickness: 2px; }
.nox-decoration-4         { text-decoration-thickness: 4px; }
.nox-decoration-auto      { text-decoration-thickness: auto; }

.nox-underline-offset-0   { text-underline-offset: 0px; }
.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-decoration-accent    { text-decoration-color: var(--nox-accent); }
.nox-decoration-red       { text-decoration-color: var(--nox-red); }
.nox-decoration-green     { text-decoration-color: var(--nox-green); }
.nox-decoration-blue      { text-decoration-color: var(--nox-blue); }
.nox-decoration-ink-4     { text-decoration-color: var(--nox-ink-4); }
.nox-decoration-transparent { text-decoration-color: transparent; }

/* ─── 19.2 Text Indent ─── */

.nox-indent-0  { text-indent: 0; }
.nox-indent-1  { text-indent: 4px; }
.nox-indent-2  { text-indent: 8px; }
.nox-indent-4  { text-indent: 16px; }
.nox-indent-8  { text-indent: 32px; }
.nox-indent-16 { text-indent: 64px; }

/* ─── 19.3 Word/Letter Spacing Extras ─── */

.nox-tracking-tightest { letter-spacing: -0.05em; }
.nox-tracking-tighter  { 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-tracking-mega     { letter-spacing: 0.2em; }

.nox-word-spacing-tight  { word-spacing: -2px; }
.nox-word-spacing-normal { word-spacing: normal; }
.nox-word-spacing-wide   { word-spacing: 4px; }
.nox-word-spacing-wider  { word-spacing: 8px; }

/* ─── 19.4 Text Transform Extras ─── */

.nox-capitalize-first::first-letter {
  text-transform: uppercase;
  font-size: 1.5em;
  font-weight: 700;
}

/* ─── 19.5 Hyphens ─── */

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

/* ─── 19.6 Writing Mode ─── */

.nox-writing-horizontal { writing-mode: horizontal-tb; }
.nox-writing-vertical-rl { writing-mode: vertical-rl; }
.nox-writing-vertical-lr { writing-mode: vertical-lr; }

/* ─── 19.7 Text Wrap ─── */

.nox-text-wrap    { text-wrap: wrap; }
.nox-text-nowrap  { text-wrap: nowrap; }
.nox-text-balance { text-wrap: balance; }
.nox-text-pretty  { text-wrap: pretty; }

/* ─── 19.8 Line Clamp ─── */

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

/* ─── 19.9 Line Height ─── */

.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-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; }

/* ─── 19.10 Font Variant ─── */

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

/* ─── 19.11 Selection Styling ─── */

.nox-select-accent::selection {
  background: var(--nox-accent-s);
  color: var(--nox-accent);
}
.nox-select-none-visual::selection {
  background: transparent;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   SECTION 20 — CURSOR & INTERACTION UTILITIES
   ═══════════════════════════════════════════════════════════════════════════════ */

.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     { cursor: context-menu; }
.nox-cursor-progress    { cursor: progress; }
.nox-cursor-cell        { cursor: cell; }
.nox-cursor-crosshair   { cursor: crosshair; }
.nox-cursor-vertical    { 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; }

/* Pointer Events */
.nox-pointer-events-none { pointer-events: none; }
.nox-pointer-events-auto { pointer-events: auto; }

/* User Select */
.nox-select-none { user-select: none; -webkit-user-select: none; }
.nox-select-text { user-select: text; }
.nox-select-all  { user-select: all; }
.nox-select-auto { user-select: auto; }

/* User Drag */
.nox-drag-none { -webkit-user-drag: none; }
.nox-drag-auto { -webkit-user-drag: auto; }
.nox-drag-element { -webkit-user-drag: element; }

/* Scroll Margin/Padding */
.nox-scroll-m-0  { scroll-margin: 0; }
.nox-scroll-m-1  { scroll-margin: 4px; }
.nox-scroll-m-2  { scroll-margin: 8px; }
.nox-scroll-m-4  { scroll-margin: 16px; }
.nox-scroll-m-8  { scroll-margin: 32px; }
.nox-scroll-mt-0 { scroll-margin-top: 0; }
.nox-scroll-mt-4 { scroll-margin-top: 16px; }
.nox-scroll-mt-8 { scroll-margin-top: 32px; }

.nox-scroll-p-0  { scroll-padding: 0; }
.nox-scroll-p-1  { scroll-padding: 4px; }
.nox-scroll-p-2  { scroll-padding: 8px; }
.nox-scroll-p-4  { scroll-padding: 16px; }
.nox-scroll-p-8  { scroll-padding: 32px; }
.nox-scroll-pt-0 { scroll-padding-top: 0; }
.nox-scroll-pt-4 { scroll-padding-top: 16px; }
.nox-scroll-pt-8 { scroll-padding-top: 32px; }

/* Backdrop Filter Utilities */
.nox-backdrop-blur-none { backdrop-filter: none; }
.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-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-100 { backdrop-filter: brightness(1); }
.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-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-grayscale     { backdrop-filter: grayscale(100%); }
.nox-backdrop-grayscale-0   { backdrop-filter: grayscale(0%); }
.nox-backdrop-sepia         { backdrop-filter: sepia(100%); }
.nox-backdrop-sepia-0       { backdrop-filter: sepia(0%); }
.nox-backdrop-invert        { backdrop-filter: invert(100%); }
.nox-backdrop-invert-0      { backdrop-filter: invert(0%); }

/* Transition Property Utilities */
.nox-transition-none      { transition-property: none; }
.nox-transition-all       { transition-property: all; transition-duration: 0.18s; transition-timing-function: ease; }
.nox-transition-default   { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-duration: 0.18s; transition-timing-function: ease; }
.nox-transition-colors    { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-duration: 0.18s; transition-timing-function: ease; }
.nox-transition-opacity   { transition-property: opacity; transition-duration: 0.18s; transition-timing-function: ease; }
.nox-transition-shadow    { transition-property: box-shadow; transition-duration: 0.18s; transition-timing-function: ease; }
.nox-transition-transform { transition-property: transform; transition-duration: 0.18s; transition-timing-function: ease; }

/* Transition Duration */
.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; }

/* Transition Timing */
.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-ease-spring  { transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.nox-ease-bounce  { transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }

/* Transition Delay */
.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; }


/* ═══════════════════════════════════════════════════════════════════════════════
   END OF NOX EXPANSION MODULE
   ═══════════════════════════════════════════════════════════════════════════════ */



/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 14 — PWA META TEMPLATE (Copy into <head>)
   ═══════════════════════════════════════════════════════════════════════════

   <!-- PWA Meta Tags — paste into your GAS HTML <head> -->
   <meta name="apple-mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
   <meta name="apple-mobile-web-app-title" content="ClientName">
   <meta name="mobile-web-app-capable" content="yes">
   <meta name="theme-color" content="#070808">
   <link rel="apple-touch-icon" href="ICON_URL_180x180">
   <link rel="manifest" href="MANIFEST_URL">

   <!-- manifest.json template -->
   {
     "name": "ClientName Dashboard",
     "short_name": "ClientName",
     "start_url": "WEBAPP_URL",
     "display": "standalone",
     "background_color": "#070808",
     "theme_color": "#070808",
     "icons": [
       { "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
       { "src": "icon-512.png", "sizes": "512x512", "type": "image/png" }
     ]
   }
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   CLIENT OVERRIDE TEMPLATE
   ═══════════════════════════════════════════════════════════════════════════

   Copy the block below into a <style> tag AFTER your <?!= include('nox-styles-v2') ?>
   to customize accent color per client:

   <style>
     :root,
     [data-theme="dark"],
     [data-theme="light"] {
       --nox-accent:   #F0A830;
       --nox-accent-2: #C88820;
       --nox-accent-s: rgba(240,168,48,0.08);
       --nox-accent-g: rgba(240,168,48,0.15);
     }


   ─── PRESET: Amber Operations (HVAC, Construction, Field Service) ───
   --nox-accent: #F0A830; --nox-accent-2: #C88820;
   --nox-accent-s: rgba(240,168,48,0.08); --nox-accent-g: rgba(240,168,48,0.15);

   ─── PRESET: Steel Blue (Corporate, Finance, SaaS) ───
   --nox-accent: #2E5F8A; --nox-accent-2: #3A72A0;
   --nox-accent-s: rgba(46,95,138,0.08); --nox-accent-g: rgba(46,95,138,0.15);

   ─── PRESET: Brass Gold (Luxury Real Estate, Premium Services) ───
   --nox-accent: #B8902A; --nox-accent-2: #9A7620;
   --nox-accent-s: rgba(184,144,42,0.08); --nox-accent-g: rgba(184,144,42,0.15);

   ─── PRESET: Teal (Medical, Health, Wellness, Clinics) ───
   --nox-accent: #0D9488; --nox-accent-2: #0F766E;
   --nox-accent-s: rgba(13,148,136,0.08); --nox-accent-g: rgba(13,148,136,0.15);

   ─── PRESET: Coral Energy (Gyms, Fitness, Athletics) ───
   --nox-accent: #E8614D; --nox-accent-2: #C84A38;
   --nox-accent-s: rgba(232,97,77,0.08); --nox-accent-g: rgba(232,97,77,0.15);

   ─── PRESET: Violet (Education, Creative Agencies, EdTech) ───
   --nox-accent: #7C3AED; --nox-accent-2: #6D28D9;
   --nox-accent-s: rgba(124,58,237,0.08); --nox-accent-g: rgba(124,58,237,0.15);

   ─── PRESET: Emerald (Landscaping, Agriculture, Environmental) ───
   --nox-accent: #059669; --nox-accent-2: #047857;
   --nox-accent-s: rgba(5,150,105,0.08); --nox-accent-g: rgba(5,150,105,0.15);

   ─── PRESET: Slate Minimal (Accounting, Legal, Consulting) ───
   --nox-accent: #64748B; --nox-accent-2: #475569;
   --nox-accent-s: rgba(100,116,139,0.08); --nox-accent-g: rgba(100,116,139,0.15);

   ─── PRESET: Warm Rose (Spa, Beauty, Hospitality) ───
   --nox-accent: #E11D48; --nox-accent-2: #BE123C;
   --nox-accent-s: rgba(225,29,72,0.08); --nox-accent-g: rgba(225,29,72,0.15);

   ─── PRESET: Navy (Marine, Transportation, Logistics) ───
   --nox-accent: #1E3A5F; --nox-accent-2: #162D4A;
   --nox-accent-s: rgba(30,58,95,0.08); --nox-accent-g: rgba(30,58,95,0.15);

   ─── BORDER RADIUS PRESETS ───
   Sharp/Corporate:  --nox-r: 4px; --nox-r-lg: 6px;  --nox-r-xl: 8px;
   Default:          --nox-r: 6px; --nox-r-lg: 10px; --nox-r-xl: 14px;
   Friendly/Rounded: --nox-r: 8px; --nox-r-lg: 14px; --nox-r-xl: 20px;
   Pill/Playful:     --nox-r: 12px; --nox-r-lg: 18px; --nox-r-xl: 24px;
   ═══════════════════════════════════════════════════════════════════════════ */



/* ═══════════════════════════════════════════════════════════════════════════
   INTEGRATION FIXES (hamburger, sidebar-backdrop, form-sec, card-kicker accent)
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   INTEGRATION FIXES — From real client deployment feedback
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Hamburger Menu Button (mobile sidebar toggle) ─── */

.nox-hamburger {
  display: none;
  width: 34px;
  height: 34px;
  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: 18px;
  cursor: pointer;
  transition: all var(--nox-ease-fast);
  flex-shrink: 0;
}

.nox-hamburger:hover { background: var(--nox-bg-4); color: var(--nox-ink); }

@media (max-width: 768px) {
  .nox-hamburger { display: flex; }
}

/* ─── Sidebar Backdrop (overlay behind mobile sidebar) ─── */

.nox-sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 899;
  opacity: 0;
  transition: opacity var(--nox-ease-slow);
}

.nox-sidebar-backdrop.open {
  display: block;
  opacity: 1;
}

/* ─── Form Section Divider (lighter than nox-sec, for inside cards/forms) ─── */

.nox-form-sec {
  font-family: var(--nox-font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--nox-ink);
  padding: var(--nox-4) 0 var(--nox-2);
  margin-bottom: var(--nox-3);
  border-bottom: 1px solid var(--nox-line-2);
}

.nox-form-sec:first-child { padding-top: 0; }

/* ─── Card Kicker Variants ─── */

.nox-card-kicker.accent { color: var(--nox-accent); }
.nox-card-kicker.bright { color: var(--nox-ink-2); }

/* ─── Flex Row Shorthand (common pattern) ─── */

.nox-flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ─── Text/Background White (for dark accents on light elements) ─── */

.nox-text-white { color: #ffffff; }
.nox-bg-white { background: #ffffff; }
.nox-bg-black { background: #000000; }
.nox-bg-transparent { background: transparent; }

/* ─── Gap X/Y separate ─── */

.nox-gap-x-1 { column-gap: var(--nox-1); } .nox-gap-x-2 { column-gap: var(--nox-2); }
.nox-gap-x-3 { column-gap: var(--nox-3); } .nox-gap-x-4 { column-gap: var(--nox-4); }
.nox-gap-x-5 { column-gap: var(--nox-5); } .nox-gap-x-6 { column-gap: var(--nox-6); }
.nox-gap-y-1 { row-gap: var(--nox-1); } .nox-gap-y-2 { row-gap: var(--nox-2); }
.nox-gap-y-3 { row-gap: var(--nox-3); } .nox-gap-y-4 { row-gap: var(--nox-4); }
.nox-gap-y-5 { row-gap: var(--nox-5); } .nox-gap-y-6 { row-gap: var(--nox-6); }

/* ═══════════════════════════════════════════════════════════════════════════
   NOX WEBSITE — Website-specific components
   Load AFTER nox-tokens.css
   Includes: hero variants, sticky nav, footer, feature grids, pricing tables,
             testimonials, CTA sections, blog prose, site-specific utilities

   Use for marketing sites, landing pages, about/contact/blog pages.
   DO NOT use for dashboards — use nox-dashboard.css instead.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   SITE-1 — STICKY NAVIGATION
   ═══════════════════════════════════════════════════════════════════════════ */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border-bottom: 1px solid var(--nox-line);
  padding: 0 max(24px, calc((100vw - 1200px)/2));
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background var(--nox-ease);
}

[data-theme="dark"] .site-nav,
[data-theme="midnight"] .site-nav,
[data-theme="carbon"] .site-nav { background: rgba(7,8,8,0.92); }

.site-nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.site-nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
}

.site-nav-link {
  font-size: 13px;
  color: var(--nox-ink-3);
  text-decoration: none;
  transition: color var(--nox-ease-fast);
  position: relative;
}

.site-nav-link:hover { color: var(--nox-ink); }

.site-nav-link.active { color: var(--nox-accent); }

.site-nav-cta {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Mobile nav toggle */
.site-nav-mobile-toggle {
  display: none;
  width: 32px;
  height: 32px;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--nox-ink);
  font-size: 20px;
  cursor: pointer;
}

@media (max-width: 768px) {
  .site-nav { padding: 0 16px; }
  .site-nav-links { display: none; }
  .site-nav-mobile-toggle { display: flex; }
}

/* Mega menu dropdown */
.site-mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--nox-bg-2);
  border-top: 1px solid var(--nox-line);
  border-bottom: 1px solid var(--nox-line);
  padding: 32px max(24px, calc((100vw - 1200px)/2));
  display: none;
  box-shadow: var(--nox-shadow-lg);
}

.site-nav-link.has-menu:hover + .site-mega-menu,
.site-mega-menu:hover { display: block; }

.site-mega-menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SITE-2 — HERO VARIANTS
   ═══════════════════════════════════════════════════════════════════════════ */

.site-section {
  padding: 80px max(24px, calc((100vw - 1100px)/2));
}

.site-section-tight { padding: 48px max(24px, calc((100vw - 1100px)/2)); }
.site-section-wide { padding: 80px max(24px, calc((100vw - 1400px)/2)); }

/* Centered Hero */
.site-hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 24px 80px;
  position: relative;
  overflow: hidden;
}

.site-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.site-hero::after {
  content: '';
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 400px;
  border-radius: 50%;
  background: var(--nox-accent-s);
  filter: blur(100px);
  pointer-events: none;
  opacity: 0.5;
}

.site-hero-content {
  position: relative;
  z-index: 1;
  max-width: 700px;
}

.site-hero-eyebrow {
  font-family: var(--nox-font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--nox-accent);
  margin-bottom: 16px;
}

.site-hero-title {
  font-family: var(--nox-font-display);
  font-size: clamp(36px, 6vw, 64px);
  font-weight: 700;
  color: var(--nox-ink);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

.site-hero-sub {
  font-size: clamp(15px, 2vw, 19px);
  color: var(--nox-ink-3);
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto 32px;
}

.site-hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.site-hero-trust {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
  font-size: 12px;
  color: var(--nox-ink-3);
}

.site-hero-trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Split Hero — text left, visual right */
.site-hero-split {
  min-height: 80vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
  padding: 120px max(24px, calc((100vw - 1200px)/2)) 80px;
  position: relative;
  overflow: hidden;
}

.site-hero-split-content { max-width: 540px; }
.site-hero-split .site-hero-title { text-align: left; }
.site-hero-split .site-hero-sub { text-align: left; margin: 0 0 28px; }
.site-hero-split .site-hero-actions { justify-content: flex-start; }

.site-hero-split-visual {
  aspect-ratio: 4/3;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  position: relative;
  overflow: hidden;
  box-shadow: var(--nox-shadow-xl);
}

@media (max-width: 900px) {
  .site-hero-split { grid-template-columns: 1fr; gap: 40px; padding: 100px 24px 60px; }
  .site-hero-split-content { max-width: none; text-align: center; }
  .site-hero-split .site-hero-title,
  .site-hero-split .site-hero-sub { text-align: center; }
  .site-hero-split .site-hero-actions { justify-content: center; }
}

/* Minimal Hero — smaller, for inner pages */
.site-hero-mini {
  padding: 120px max(24px, calc((100vw - 900px)/2)) 60px;
  text-align: center;
}

.site-hero-mini .site-hero-title { font-size: clamp(28px, 4vw, 44px); }
.site-hero-mini .site-hero-sub { font-size: 15px; }


/* ═══════════════════════════════════════════════════════════════════════════
   SITE-3 — SECTION HEADERS
   ═══════════════════════════════════════════════════════════════════════════ */

.site-section-header {
  text-align: center;
  margin-bottom: 48px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.site-section-eyebrow {
  font-family: var(--nox-font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--nox-accent);
  margin-bottom: 8px;
}

.site-section-title {
  font-family: var(--nox-font-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  color: var(--nox-ink);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.site-section-sub {
  font-size: 15px;
  color: var(--nox-ink-3);
  line-height: 1.6;
  max-width: 500px;
  margin: 0 auto;
}

.site-section-header-left { text-align: left; max-width: none; margin: 0 0 40px; }
.site-section-header-left .site-section-title,
.site-section-header-left .site-section-sub { margin-left: 0; margin-right: 0; }


/* ═══════════════════════════════════════════════════════════════════════════
   SITE-4 — FEATURE GRID
   ═══════════════════════════════════════════════════════════════════════════ */

.site-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.site-features-2 { grid-template-columns: repeat(2, 1fr); }
.site-features-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .site-features { grid-template-columns: 1fr 1fr; }
  .site-features-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .site-features, .site-features-2, .site-features-4 { grid-template-columns: 1fr; }
}

.site-feature {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  padding: 28px 24px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  text-align: center;
}

.site-feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--nox-shadow-lg);
  border-color: var(--nox-accent-g);
}

.site-feature-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--nox-r-lg);
  background: var(--nox-accent-s);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 0 auto 14px;
  color: var(--nox-accent);
}

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

.site-feature-desc {
  font-size: 13px;
  color: var(--nox-ink-3);
  line-height: 1.7;
}

/* Feature row variant — icon + text left-aligned */
.site-feature-row {
  display: flex;
  gap: 16px;
  padding: 20px;
  border-radius: var(--nox-r-xl);
  transition: background var(--nox-ease);
  text-align: left;
}

.site-feature-row:hover { background: var(--nox-bg-2); }

.site-feature-row .site-feature-icon {
  margin: 0;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  font-size: 18px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SITE-5 — ALTERNATING CONTENT ROWS
   ═══════════════════════════════════════════════════════════════════════════ */

.site-alt {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto 80px;
}

.site-alt:nth-child(even) .site-alt-content { order: 2; }
.site-alt:nth-child(even) .site-alt-visual { order: 1; }

.site-alt-content { max-width: 500px; }

.site-alt-eyebrow {
  font-family: var(--nox-font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--nox-accent);
  margin-bottom: 12px;
}

.site-alt-title {
  font-family: var(--nox-font-display);
  font-size: clamp(24px, 3.5vw, 36px);
  font-weight: 700;
  color: var(--nox-ink);
  line-height: 1.2;
  margin-bottom: 14px;
}

.site-alt-desc {
  font-size: 15px;
  color: var(--nox-ink-3);
  line-height: 1.7;
  margin-bottom: 20px;
}

.site-alt-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-alt-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  font-size: 14px;
  color: var(--nox-ink-2);
}

.site-alt-list li::before {
  content: '✓';
  color: var(--nox-green);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

.site-alt-visual {
  aspect-ratio: 4/3;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  overflow: hidden;
  box-shadow: var(--nox-shadow);
}

@media (max-width: 900px) {
  .site-alt { grid-template-columns: 1fr; gap: 40px; }
  .site-alt:nth-child(even) .site-alt-content,
  .site-alt:nth-child(even) .site-alt-visual { order: unset; }
  .site-alt-content { max-width: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SITE-6 — PRICING TABLE
   ═══════════════════════════════════════════════════════════════════════════ */

.site-pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}

.site-pricing-card {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  text-align: center;
  transition: transform .18s, box-shadow .18s;
  position: relative;
}

.site-pricing-card:hover { transform: translateY(-3px); box-shadow: var(--nox-shadow-lg); }

.site-pricing-card.featured {
  border-color: var(--nox-accent);
  border-width: 2px;
  transform: scale(1.02);
}

.site-pricing-card.featured::before {
  content: 'Most Popular';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--nox-font-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 14px;
  background: var(--nox-accent);
  color: var(--nox-bg-0);
  border-radius: 12px;
}

.site-pricing-name {
  font-family: var(--nox-font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--nox-ink);
  margin-bottom: 6px;
}

.site-pricing-tagline {
  font-size: 12px;
  color: var(--nox-ink-3);
  margin-bottom: 20px;
}

.site-pricing-price {
  font-family: var(--nox-font-display);
  font-size: 48px;
  font-weight: 700;
  color: var(--nox-ink);
  line-height: 1;
  margin-bottom: 4px;
}

.site-pricing-price sup {
  font-size: 18px;
  vertical-align: super;
  margin-right: 2px;
  color: var(--nox-ink-3);
}

.site-pricing-period {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--nox-ink-4);
  margin-bottom: 28px;
}

.site-pricing-features {
  list-style: none;
  text-align: left;
  margin-bottom: 28px;
  flex: 1;
  padding: 0;
}

.site-pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: 13px;
  color: var(--nox-ink-2);
  line-height: 1.5;
}

.site-pricing-feature::before {
  content: '✓';
  color: var(--nox-green);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.site-pricing-feature.no { color: var(--nox-ink-4); }
.site-pricing-feature.no::before { content: '✕'; color: var(--nox-ink-4); }

.site-pricing-cta {
  width: 100%;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SITE-7 — TESTIMONIALS
   ═══════════════════════════════════════════════════════════════════════════ */

.site-testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .site-testimonials { grid-template-columns: 1fr; }
}

.site-testimonial {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  padding: 24px;
  position: relative;
  transition: border-color var(--nox-ease);
}

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

.site-testimonial::before {
  content: '"';
  position: absolute;
  top: 10px;
  left: 20px;
  font-family: var(--nox-font-serif);
  font-size: 56px;
  color: var(--nox-accent-g);
  line-height: 1;
  font-weight: 700;
}

.site-testimonial-stars {
  color: var(--nox-yellow);
  margin-bottom: 10px;
  padding-top: 24px;
  font-size: 13px;
  letter-spacing: 2px;
}

.site-testimonial-quote {
  font-size: 14px;
  color: var(--nox-ink-2);
  line-height: 1.7;
  margin-bottom: 16px;
  font-style: italic;
}

.site-testimonial-author {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--nox-line-2);
}

.site-testimonial-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--nox-ink);
}

.site-testimonial-role {
  font-size: 11px;
  color: var(--nox-ink-4);
}

/* Single large testimonial */
.site-testimonial-large {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 48px 32px;
}

.site-testimonial-large .site-testimonial-quote {
  font-size: clamp(18px, 2.5vw, 24px);
  line-height: 1.5;
  font-style: normal;
  color: var(--nox-ink);
  font-weight: 400;
  margin-bottom: 24px;
}

.site-testimonial-large .site-testimonial-author {
  justify-content: center;
  border-top: none;
  padding-top: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SITE-8 — LOGO BAR / SOCIAL PROOF
   ═══════════════════════════════════════════════════════════════════════════ */

.site-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
  opacity: 0.6;
}

.site-logo {
  font-family: var(--nox-font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--nox-ink-3);
  letter-spacing: 0.5px;
  transition: color var(--nox-ease);
}

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

.site-logos-label {
  text-align: center;
  font-family: var(--nox-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--nox-ink-4);
  margin-bottom: 28px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SITE-9 — STATS BAR
   ═══════════════════════════════════════════════════════════════════════════ */

.site-stats {
  background: var(--nox-bg-2);
  border-top: 1px solid var(--nox-line);
  border-bottom: 1px solid var(--nox-line);
  padding: 32px 24px;
}

.site-stats-grid {
  display: flex;
  justify-content: center;
  gap: 64px;
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto;
}

.site-stat {
  text-align: center;
}

.site-stat-value {
  font-family: var(--nox-font-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 700;
  color: var(--nox-ink);
  line-height: 1;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

.site-stat-label {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nox-ink-4);
}


/* ═══════════════════════════════════════════════════════════════════════════
   SITE-10 — CTA SECTIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.site-cta {
  background: linear-gradient(135deg, var(--nox-accent-s), var(--nox-bg-2));
  border: 1px solid var(--nox-accent-g);
  border-radius: var(--nox-r-xl);
  padding: 56px 32px;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.site-cta-eyebrow {
  font-family: var(--nox-font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--nox-accent);
  margin-bottom: 12px;
}

.site-cta-title {
  font-family: var(--nox-font-display);
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 700;
  color: var(--nox-ink);
  line-height: 1.15;
  margin-bottom: 14px;
}

.site-cta-sub {
  font-size: 15px;
  color: var(--nox-ink-3);
  line-height: 1.6;
  max-width: 520px;
  margin: 0 auto 28px;
}

.site-cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Full-width banner CTA */
.site-cta-banner {
  background: var(--nox-accent);
  color: var(--nox-bg-0);
  padding: 56px 32px;
  text-align: center;
}

.site-cta-banner .site-cta-title { color: var(--nox-bg-0); }
.site-cta-banner .site-cta-sub { color: rgba(7,8,8,0.8); }


/* ═══════════════════════════════════════════════════════════════════════════
   SITE-11 — FOOTER
   ═══════════════════════════════════════════════════════════════════════════ */

.site-footer {
  background: var(--nox-bg-1);
  border-top: 1px solid var(--nox-line);
  padding: 56px max(24px, calc((100vw - 1100px)/2)) 32px;
}

[data-theme="light"] .site-footer,
[data-theme="paper"] .site-footer,
[data-theme="frost"] .site-footer,
[data-theme="cream"] .site-footer { background: var(--nox-ink); color: #999; }

.site-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto 40px;
}

@media (max-width: 768px) {
  .site-footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}

.site-footer-brand {
  font-family: var(--nox-font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--nox-ink);
  margin-bottom: 12px;
}

[data-theme="light"] .site-footer-brand,
[data-theme="paper"] .site-footer-brand,
[data-theme="frost"] .site-footer-brand,
[data-theme="cream"] .site-footer-brand { color: #fff; }

.site-footer-about {
  font-size: 13px;
  color: var(--nox-ink-3);
  line-height: 1.7;
  max-width: 280px;
  margin-bottom: 16px;
}

.site-footer-social {
  display: flex;
  gap: 10px;
}

.site-footer-social a {
  width: 32px;
  height: 32px;
  border-radius: var(--nox-r);
  background: var(--nox-bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nox-ink-3);
  transition: all var(--nox-ease-fast);
  text-decoration: none;
}

.site-footer-social a:hover { background: var(--nox-accent); color: var(--nox-bg-0); }

.site-footer-title {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nox-ink-4);
  margin-bottom: 14px;
}

.site-footer-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer-list li {
  padding: 6px 0;
}

.site-footer-list a {
  font-size: 13px;
  color: var(--nox-ink-3);
  text-decoration: none;
  transition: color var(--nox-ease-fast);
}

.site-footer-list a:hover { color: var(--nox-ink); }

.site-footer-bottom {
  padding-top: 24px;
  border-top: 1px solid var(--nox-line);
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--nox-ink-4);
}

.site-footer-bottom-links {
  display: flex;
  gap: 20px;
}

.site-footer-bottom-links a {
  color: var(--nox-ink-4);
  text-decoration: none;
  transition: color var(--nox-ease-fast);
}

.site-footer-bottom-links a:hover { color: var(--nox-ink-3); }


/* ═══════════════════════════════════════════════════════════════════════════
   SITE-12 — BLOG / ARTICLE STYLING
   ═══════════════════════════════════════════════════════════════════════════ */

.site-blog-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .site-blog-list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .site-blog-list { grid-template-columns: 1fr; }
}

.site-blog-card {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  overflow: hidden;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

.site-blog-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--nox-shadow-lg);
  border-color: var(--nox-accent-g);
}

.site-blog-card-image {
  aspect-ratio: 16/9;
  background: var(--nox-bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--nox-ink-4);
  border-bottom: 1px solid var(--nox-line);
}

.site-blog-card-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.site-blog-card-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 11px;
  color: var(--nox-ink-4);
  margin-bottom: 10px;
}

.site-blog-card-category {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  background: var(--nox-accent-s);
  color: var(--nox-accent);
  border-radius: 4px;
}

.site-blog-card-title {
  font-family: var(--nox-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--nox-ink);
  line-height: 1.3;
  margin-bottom: 8px;
  flex: 1;
}

.site-blog-card-excerpt {
  font-size: 13px;
  color: var(--nox-ink-3);
  line-height: 1.6;
  margin-bottom: 14px;
}

.site-blog-card-author {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--nox-line-2);
  font-size: 11px;
  color: var(--nox-ink-4);
}

/* Article (single post) layout */
.site-article {
  max-width: 720px;
  margin: 0 auto;
  padding: 120px 24px 80px;
}

.site-article-header {
  text-align: center;
  margin-bottom: 48px;
}

.site-article-category {
  font-family: var(--nox-font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--nox-accent);
  margin-bottom: 14px;
}

.site-article-title {
  font-family: var(--nox-font-display);
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 700;
  color: var(--nox-ink);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}

.site-article-meta {
  display: flex;
  justify-content: center;
  gap: 16px;
  align-items: center;
  font-size: 13px;
  color: var(--nox-ink-4);
  flex-wrap: wrap;
}

.site-article-content {
  font-family: var(--nox-font-body);
  font-size: 17px;
  line-height: 1.8;
  color: var(--nox-ink-2);
}

.site-article-content > * + * { margin-top: 1.3em; }

.site-article-content h2 {
  font-family: var(--nox-font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--nox-ink);
  line-height: 1.25;
  margin-top: 2em;
  margin-bottom: 0.5em;
}

.site-article-content h3 {
  font-family: var(--nox-font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--nox-ink);
  margin-top: 1.5em;
  margin-bottom: 0.4em;
}

.site-article-content p { margin-bottom: 1.3em; }

.site-article-content a {
  color: var(--nox-accent);
  text-decoration: underline;
  text-decoration-color: var(--nox-accent-g);
  text-underline-offset: 3px;
}

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

.site-article-content strong { color: var(--nox-ink); font-weight: 600; }

.site-article-content ul,
.site-article-content ol {
  padding-left: 1.5em;
  margin-bottom: 1.3em;
}

.site-article-content li { margin-bottom: 0.5em; }

.site-article-content blockquote {
  border-left: 3px solid var(--nox-accent);
  padding: 16px 24px;
  margin: 28px 0;
  background: var(--nox-accent-s);
  border-radius: 0 var(--nox-r) var(--nox-r) 0;
  font-family: var(--nox-font-serif);
  font-size: 20px;
  font-style: italic;
  color: var(--nox-ink);
  line-height: 1.6;
}

.site-article-content img {
  width: 100%;
  border-radius: var(--nox-r-lg);
  border: 1px solid var(--nox-line);
  margin: 24px 0;
}

.site-article-content hr {
  border: none;
  height: 1px;
  background: var(--nox-line);
  margin: 40px 0;
}

.site-article-footer {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--nox-line);
}

.site-article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.site-article-author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
}

.site-article-author-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--nox-accent-s);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--nox-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--nox-accent);
  flex-shrink: 0;
}

.site-article-author-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--nox-ink);
}

.site-article-author-bio {
  font-size: 12px;
  color: var(--nox-ink-3);
  line-height: 1.6;
  margin-top: 2px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SITE-13 — CONTACT FORM & INFO
   ═══════════════════════════════════════════════════════════════════════════ */

.site-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  max-width: 1000px;
  margin: 0 auto;
  align-items: start;
}

@media (max-width: 900px) {
  .site-contact { grid-template-columns: 1fr; gap: 32px; }
}

.site-contact-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.site-contact-info-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.site-contact-info-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--nox-r-lg);
  background: var(--nox-accent-s);
  color: var(--nox-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.site-contact-info-label {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nox-ink-4);
  margin-bottom: 4px;
}

.site-contact-info-value {
  font-size: 14px;
  color: var(--nox-ink);
  line-height: 1.6;
}

.site-contact-info-value a {
  color: var(--nox-accent);
  text-decoration: none;
}

.site-contact-form {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  padding: 28px;
}

.site-contact-map {
  aspect-ratio: 16/9;
  background: var(--nox-bg-3);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nox-ink-4);
  font-size: 14px;
  overflow: hidden;
  margin-top: 24px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SITE-14 — FAQ SECTION
   ═══════════════════════════════════════════════════════════════════════════ */

.site-faq {
  max-width: 760px;
  margin: 0 auto;
}

.site-faq-item {
  border-bottom: 1px solid var(--nox-line);
  padding: 20px 0;
}

.site-faq-item:first-child { border-top: 1px solid var(--nox-line); }

.site-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 4px 0;
  font-family: var(--nox-font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--nox-ink);
  transition: color var(--nox-ease-fast);
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.site-faq-question::-webkit-details-marker { display: none; }
.site-faq-question:hover { color: var(--nox-accent); }

.site-faq-question::after {
  content: '+';
  font-size: 20px;
  color: var(--nox-ink-3);
  transition: transform var(--nox-ease);
  flex-shrink: 0;
  margin-left: 16px;
}

.site-faq-item[open] .site-faq-question::after {
  transform: rotate(45deg);
  color: var(--nox-accent);
}

.site-faq-answer {
  font-size: 14px;
  color: var(--nox-ink-3);
  line-height: 1.7;
  padding: 14px 0 8px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SITE-15 — NEWSLETTER / EMAIL CAPTURE
   ═══════════════════════════════════════════════════════════════════════════ */

.site-newsletter {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  padding: 32px;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

.site-newsletter-title {
  font-family: var(--nox-font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--nox-ink);
  margin-bottom: 6px;
}

.site-newsletter-sub {
  font-size: 13px;
  color: var(--nox-ink-3);
  margin-bottom: 20px;
}

.site-newsletter-form {
  display: flex;
  gap: 8px;
}

.site-newsletter-form .nox-input {
  flex: 1;
}

@media (max-width: 600px) {
  .site-newsletter-form { flex-direction: column; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SITE-16 — TEAM / PEOPLE GRID
   ═══════════════════════════════════════════════════════════════════════════ */

.site-team {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 900px) { .site-team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .site-team { grid-template-columns: 1fr; } }

.site-team-member {
  text-align: center;
}

.site-team-photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: var(--nox-bg-3);
  margin: 0 auto 14px;
  border: 3px solid var(--nox-bg-2);
  box-shadow: var(--nox-shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--nox-font-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--nox-accent);
  overflow: hidden;
}

.site-team-name {
  font-family: var(--nox-font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--nox-ink);
  margin-bottom: 2px;
}

.site-team-role {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nox-ink-3);
  margin-bottom: 10px;
}

.site-team-bio {
  font-size: 12px;
  color: var(--nox-ink-3);
  line-height: 1.6;
  max-width: 220px;
  margin: 0 auto;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SITE-17 — SCROLL REVEAL ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes site-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.site-reveal {
  animation: site-fade-up 0.8s ease forwards;
  opacity: 0;
}

.site-reveal-delay-1 { animation-delay: 0.1s; }
.site-reveal-delay-2 { animation-delay: 0.2s; }
.site-reveal-delay-3 { animation-delay: 0.3s; }
.site-reveal-delay-4 { animation-delay: 0.4s; }


/* ═══════════════════════════════════════════════════════════════════════════
   SITE-18 — PRINT STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {
  .site-nav, .site-footer, .site-cta { display: none; }
  .site-section { padding: 20px 0; }
  .site-hero { min-height: auto; padding: 20px 0; }
  .site-hero::before, .site-hero::after { display: none; }
  body { background: white; color: black; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SITE-19 — MENU LAYOUTS (Restaurant, Spa, Salon — service menus)
   ═══════════════════════════════════════════════════════════════════════════ */

.site-menu {
  max-width: 900px;
  margin: 0 auto;
}

.site-menu-category {
  margin-bottom: 48px;
}

.site-menu-category-title {
  font-family: var(--nox-font-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  color: var(--nox-ink);
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.site-menu-category-sub {
  font-size: 13px;
  color: var(--nox-ink-3);
  text-align: center;
  margin-bottom: 28px;
}

.site-menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--nox-line);
  align-items: baseline;
}

.site-menu-item:last-child { border-bottom: none; }

.site-menu-item-name {
  font-family: var(--nox-font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--nox-ink);
  margin-bottom: 4px;
}

.site-menu-item-tags {
  display: inline-flex;
  gap: 6px;
  margin-left: 8px;
}

.site-menu-item-tag {
  font-family: var(--nox-font-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--nox-bg-4);
  color: var(--nox-ink-3);
  vertical-align: middle;
}

.site-menu-item-tag.v { background: var(--nox-green-s); color: var(--nox-green); }
.site-menu-item-tag.gf { background: var(--nox-yellow-s); color: var(--nox-yellow); }
.site-menu-item-tag.spicy { background: var(--nox-red-s); color: var(--nox-red); }
.site-menu-item-tag.new { background: var(--nox-accent-s); color: var(--nox-accent); }

.site-menu-item-desc {
  font-size: 13px;
  color: var(--nox-ink-3);
  line-height: 1.6;
}

.site-menu-item-price {
  font-family: var(--nox-font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--nox-accent);
  white-space: nowrap;
}

.site-menu-item-duration {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  color: var(--nox-ink-4);
  text-align: right;
  margin-top: 2px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SITE-20 — PROPERTY / LISTING CARDS (Real Estate, Auto Listings)
   ═══════════════════════════════════════════════════════════════════════════ */

.site-listings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 900px) { .site-listings { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .site-listings { grid-template-columns: 1fr; } }

.site-listing {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  overflow: hidden;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

.site-listing:hover {
  transform: translateY(-4px);
  box-shadow: var(--nox-shadow-xl);
  border-color: var(--nox-accent-g);
}

.site-listing-image {
  aspect-ratio: 4/3;
  background: var(--nox-bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: var(--nox-ink-4);
  position: relative;
  overflow: hidden;
}

.site-listing-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--nox-font-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--nox-accent);
  color: var(--nox-bg-0);
}

.site-listing-badge.new { background: var(--nox-green); color: #fff; }
.site-listing-badge.hot { background: var(--nox-red); color: #fff; }
.site-listing-badge.featured { background: var(--nox-yellow); color: var(--nox-bg-0); }

.site-listing-favorite {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--nox-ease-fast);
}

.site-listing-favorite:hover { background: var(--nox-red); transform: scale(1.1); }

.site-listing-price {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  font-family: var(--nox-font-display);
  font-size: 18px;
  font-weight: 700;
  backdrop-filter: blur(8px);
}

.site-listing-body {
  padding: 16px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.site-listing-title {
  font-family: var(--nox-font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--nox-ink);
  margin-bottom: 4px;
  line-height: 1.3;
}

.site-listing-location {
  font-size: 12px;
  color: var(--nox-ink-3);
  margin-bottom: 12px;
}

.site-listing-specs {
  display: flex;
  gap: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--nox-line-2);
  font-size: 12px;
  color: var(--nox-ink-2);
  margin-top: auto;
}

.site-listing-spec {
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-listing-spec-val {
  font-weight: 600;
  color: var(--nox-ink);
}


/* ═══════════════════════════════════════════════════════════════════════════
   SITE-21 — STAFF / PROFESSIONAL PROFILE CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

.site-profiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 900px) { .site-profiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .site-profiles { grid-template-columns: 1fr; } }

.site-profile {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}

.site-profile:hover { transform: translateY(-3px); box-shadow: var(--nox-shadow-lg); }

.site-profile-photo {
  aspect-ratio: 1;
  background: var(--nox-bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--nox-font-display);
  font-size: 56px;
  font-weight: 700;
  color: var(--nox-accent);
}

.site-profile-body {
  padding: 20px;
  text-align: center;
}

.site-profile-name {
  font-family: var(--nox-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--nox-ink);
  margin-bottom: 4px;
}

.site-profile-title {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nox-accent);
  margin-bottom: 12px;
}

.site-profile-credentials {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-bottom: 14px;
}

.site-profile-credential {
  font-family: var(--nox-font-mono);
  font-size: 9px;
  font-weight: 600;
  padding: 2px 8px;
  background: var(--nox-bg-3);
  border: 1px solid var(--nox-line);
  border-radius: 3px;
  color: var(--nox-ink-3);
}

.site-profile-bio {
  font-size: 12px;
  color: var(--nox-ink-3);
  line-height: 1.7;
  margin-bottom: 16px;
}

.site-profile-stats {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--nox-line-2);
}

.site-profile-stat {
  text-align: center;
}

.site-profile-stat-val {
  font-family: var(--nox-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--nox-ink);
  line-height: 1;
}

.site-profile-stat-label {
  font-family: var(--nox-font-mono);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--nox-ink-4);
  margin-top: 3px;
}

.site-profile-specialties {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin-bottom: 14px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SITE-22 — GALLERY GRID (Spa portfolio, landscaping projects, real estate)
   ═══════════════════════════════════════════════════════════════════════════ */

.site-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 900px) { .site-gallery { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .site-gallery { grid-template-columns: repeat(2, 1fr); } }

.site-gallery-masonry {
  columns: 3;
  column-gap: 10px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 900px) { .site-gallery-masonry { columns: 2; } }
@media (max-width: 600px) { .site-gallery-masonry { columns: 1; } }

.site-gallery-masonry .site-gallery-item {
  break-inside: avoid;
  margin-bottom: 10px;
  display: block;
}

.site-gallery-item {
  aspect-ratio: 1;
  background: var(--nox-bg-3);
  border-radius: var(--nox-r-lg);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform var(--nox-ease);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--nox-ink-4);
}

.site-gallery-item:hover { transform: scale(1.03); }

.site-gallery-item-tall { aspect-ratio: 3/4; }
.site-gallery-item-wide { aspect-ratio: 3/2; }

.site-gallery-item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7));
  opacity: 0;
  transition: opacity var(--nox-ease);
  display: flex;
  align-items: flex-end;
  padding: 14px;
  color: #fff;
}

.site-gallery-item:hover .site-gallery-item-overlay { opacity: 1; }

.site-gallery-item-caption {
  font-size: 12px;
  font-weight: 500;
}

/* Before/After slider container */
.site-ba-slider {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: var(--nox-r-xl);
  overflow: hidden;
  background: var(--nox-bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nox-ink-4);
  font-size: 14px;
  border: 1px solid var(--nox-line);
}

.site-ba-labels {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  justify-content: space-between;
}

.site-ba-label {
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  font-family: var(--nox-font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  backdrop-filter: blur(8px);
}


/* ═══════════════════════════════════════════════════════════════════════════
   SITE-23 — CLASS / APPOINTMENT SCHEDULE (Gym classes, spa services)
   ═══════════════════════════════════════════════════════════════════════════ */

.site-schedule {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}

.site-schedule-card {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  overflow: hidden;
  transition: transform .18s, box-shadow .18s;
  cursor: pointer;
}

.site-schedule-card:hover { transform: translateY(-2px); box-shadow: var(--nox-shadow); }

.site-schedule-card-head {
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--nox-accent-s), var(--nox-bg-2));
  border-bottom: 1px solid var(--nox-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-schedule-time {
  font-family: var(--nox-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--nox-accent);
}

.site-schedule-duration {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  color: var(--nox-ink-4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.site-schedule-card-body { padding: 16px 18px; }

.site-schedule-name {
  font-family: var(--nox-font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--nox-ink);
  margin-bottom: 4px;
}

.site-schedule-instructor {
  font-size: 12px;
  color: var(--nox-ink-3);
  margin-bottom: 10px;
}

.site-schedule-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--nox-line-2);
}

.site-schedule-spots {
  font-family: var(--nox-font-mono);
  font-size: 11px;
  color: var(--nox-ink-3);
}

.site-schedule-spots.full { color: var(--nox-red); }
.site-schedule-spots.open { color: var(--nox-green); }


/* ═══════════════════════════════════════════════════════════════════════════
   SITE-24 — MORTGAGE / PRICE CALCULATOR
   ═══════════════════════════════════════════════════════════════════════════ */

.site-calc {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  padding: 28px;
  max-width: 480px;
  margin: 0 auto;
}

.site-calc-title {
  font-family: var(--nox-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--nox-ink);
  margin-bottom: 4px;
}

.site-calc-sub {
  font-size: 12px;
  color: var(--nox-ink-3);
  margin-bottom: 20px;
}

.site-calc-result {
  margin-top: 20px;
  padding: 20px;
  background: var(--nox-accent-s);
  border: 1px solid var(--nox-accent-g);
  border-radius: var(--nox-r-lg);
  text-align: center;
}

.site-calc-result-label {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nox-accent);
  margin-bottom: 4px;
}

.site-calc-result-value {
  font-family: var(--nox-font-display);
  font-size: 36px;
  font-weight: 700;
  color: var(--nox-ink);
  line-height: 1;
}

.site-calc-result-period {
  font-family: var(--nox-font-mono);
  font-size: 11px;
  color: var(--nox-ink-3);
  margin-top: 4px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SITE-25 — GIFT CARD / PROMOTION BANNER
   ═══════════════════════════════════════════════════════════════════════════ */

.site-gift-card {
  background: linear-gradient(135deg, var(--nox-accent), var(--nox-accent-2));
  color: #fff;
  border-radius: var(--nox-r-xl);
  padding: 32px;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}

.site-gift-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  pointer-events: none;
}

.site-gift-card-content { position: relative; z-index: 1; }

.site-gift-card-eyebrow {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  opacity: 0.8;
  margin-bottom: 8px;
}

.site-gift-card-title {
  font-family: var(--nox-font-display);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.2;
}

.site-gift-card-sub {
  font-size: 13px;
  opacity: 0.9;
  line-height: 1.6;
  max-width: 400px;
}

.site-gift-card-actions {
  position: relative;
  z-index: 1;
}

@media (max-width: 700px) {
  .site-gift-card { grid-template-columns: 1fr; text-align: center; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SITE-26 — PRACTICE AREAS / SERVICE CARDS (Legal, Medical specialties)
   ═══════════════════════════════════════════════════════════════════════════ */

.site-practice-areas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 900px) { .site-practice-areas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .site-practice-areas { grid-template-columns: 1fr; } }

.site-practice-area {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  padding: 24px;
  transition: border-color var(--nox-ease), transform var(--nox-ease);
  text-decoration: none;
  display: block;
  border-left: 3px solid var(--nox-accent);
}

.site-practice-area:hover {
  transform: translateX(3px);
  border-color: var(--nox-accent);
}

.site-practice-area-title {
  font-family: var(--nox-font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--nox-ink);
  margin-bottom: 8px;
}

.site-practice-area-desc {
  font-size: 13px;
  color: var(--nox-ink-3);
  line-height: 1.6;
  margin-bottom: 12px;
}

.site-practice-area-link {
  font-family: var(--nox-font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--nox-accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SITE-27 — CERTIFICATION / TRUST BADGES
   ═══════════════════════════════════════════════════════════════════════════ */

.site-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.site-trust-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-lg);
  transition: border-color var(--nox-ease);
}

.site-trust-badge:hover { border-color: var(--nox-accent-g); }

.site-trust-badge-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--nox-r);
  background: var(--nox-accent-s);
  color: var(--nox-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.site-trust-badge-label {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--nox-ink-4);
}

.site-trust-badge-val {
  font-size: 13px;
  font-weight: 600;
  color: var(--nox-ink);
}


/* ═══════════════════════════════════════════════════════════════════════════
   SITE-28 — EMERGENCY / URGENT CTA
   ═══════════════════════════════════════════════════════════════════════════ */

.site-emergency {
  background: linear-gradient(135deg, var(--nox-red), #7f1d1d);
  color: #fff;
  padding: 24px 28px;
  border-radius: var(--nox-r-xl);
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
}

.site-emergency-icon {
  font-size: 40px;
  flex-shrink: 0;
  animation: nox-pulse 2s ease infinite;
}

.site-emergency-content { flex: 1; min-width: 240px; }

.site-emergency-title {
  font-family: var(--nox-font-display);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}

.site-emergency-sub {
  font-size: 13px;
  opacity: 0.9;
  line-height: 1.5;
}

.site-emergency-phone {
  font-family: var(--nox-font-display);
  font-size: 22px;
  font-weight: 700;
  background: #fff;
  color: var(--nox-red);
  padding: 10px 20px;
  border-radius: var(--nox-r);
  text-decoration: none;
  flex-shrink: 0;
  transition: transform var(--nox-ease);
}

.site-emergency-phone:hover { transform: scale(1.05); }


/* ═══════════════════════════════════════════════════════════════════════════
   SITE-29 — REVIEW AGGREGATE (star rating + count, Google/Yelp logos)
   ═══════════════════════════════════════════════════════════════════════════ */

.site-reviews-bar {
  display: flex;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 20px;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: var(--nox-r-xl);
  max-width: 900px;
  margin: 0 auto;
}

.site-review-source {
  display: flex;
  align-items: center;
  gap: 12px;
}

.site-review-source-logo {
  width: 44px;
  height: 44px;
  border-radius: var(--nox-r);
  background: var(--nox-bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--nox-font-display);
  font-weight: 700;
  color: var(--nox-ink-2);
  font-size: 14px;
}

.site-review-source-content {
  display: flex;
  flex-direction: column;
}

.site-review-source-stars {
  color: var(--nox-yellow);
  font-size: 14px;
  letter-spacing: 1px;
  line-height: 1;
}

.site-review-source-meta {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  color: var(--nox-ink-4);
  margin-top: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════
   NOX ICONS
   Custom SVG icon system — replaces emojis with NOX-branded symbols.
   Works via CSS mask-image + currentColor, so icons inherit text color
   and work across every theme.

   USAGE:
     <span class="nox-icon nox-i-house"></span>
     <span class="nox-icon nox-icon-lg nox-i-barbell"></span>
     <button><span class="nox-icon nox-i-plus"></span> New Item</button>

   SIZING:
     .nox-icon        → 1em (inline with text)
     .nox-icon-xs     → 12px
     .nox-icon-sm     → 14px
     .nox-icon-md     → 18px   (default for standalone)
     .nox-icon-lg     → 24px
     .nox-icon-xl     → 32px
     .nox-icon-2xl    → 48px
     .nox-icon-3xl    → 72px

   COLORING:
     Icons inherit currentColor automatically. To recolor:
       <span class="nox-icon nox-i-house" style="color:#E11D48;"></span>
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────── BASE ───────────── */

.nox-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: var(--nox-icon);
  mask-image: var(--nox-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  vertical-align: -0.125em;
  flex-shrink: 0;
  line-height: 1;
  user-select: none;
}

/* Sizes */
.nox-icon-xs  { width: 12px; height: 12px; }
.nox-icon-sm  { width: 14px; height: 14px; }
.nox-icon-md  { width: 18px; height: 18px; }
.nox-icon-lg  { width: 24px; height: 24px; }
.nox-icon-xl  { width: 32px; height: 32px; }
.nox-icon-2xl { width: 48px; height: 48px; }
.nox-icon-3xl { width: 72px; height: 72px; }

/* Convenience color utilities (optional — currentColor works by default) */
.nox-icon.is-accent { background-color: var(--nox-accent); }
.nox-icon.is-green  { background-color: var(--nox-green); }
.nox-icon.is-red    { background-color: var(--nox-red); }
.nox-icon.is-yellow { background-color: var(--nox-yellow); }
.nox-icon.is-blue   { background-color: var(--nox-blue); }
.nox-icon.is-muted  { background-color: var(--nox-ink-4); }

/* Circle badge wrapper for icons */
.nox-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--nox-accent-s);
  border: 1px solid var(--nox-accent-g);
  color: var(--nox-accent);
  flex-shrink: 0;
}
.nox-icon-badge.is-square { border-radius: 6px; }
.nox-icon-badge.is-lg { width: 44px; height: 44px; }
.nox-icon-badge.is-xl { width: 56px; height: 56px; }
.nox-icon-badge.is-green { background: rgba(58,138,92,0.12); border-color: rgba(58,138,92,0.25); color: var(--nox-green); }
.nox-icon-badge.is-red   { background: rgba(181,69,58,0.12); border-color: rgba(181,69,58,0.25); color: var(--nox-red); }
.nox-icon-badge.is-yellow{ background: rgba(181,154,58,0.12); border-color: rgba(181,154,58,0.25); color: var(--nox-yellow); }
.nox-icon-badge.is-blue  { background: rgba(59,130,166,0.12); border-color: rgba(59,130,166,0.25); color: var(--nox-blue); }
.nox-icon-badge.is-ink   { background: var(--nox-bg-3); border-color: var(--nox-line); color: var(--nox-ink-2); }

/* ═══════════════════════════════════════════════════════════════════════
   INDUSTRY ICONS — one or more per NOX industry vertical
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────── GYM / FITNESS ───────── */
.nox-i-barbell { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='1.5' y='7' width='2.5' height='10' rx='0.6'/><rect x='4.5' y='9' width='1.8' height='6' rx='0.5'/><line x1='6.5' y1='12' x2='17.5' y2='12'/><rect x='17.7' y='9' width='1.8' height='6' rx='0.5'/><rect x='20' y='7' width='2.5' height='10' rx='0.6'/></svg>"); }

.nox-i-dumbbell { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m3.5 15.5 5 5'/><path d='m6 18 2.5 2.5M20.5 8.5l-5-5M18 6l-2.5-2.5'/><path d='M6 13l5-5 5 5-5 5z'/></svg>"); }

.nox-i-heart-pulse { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/><path d='M3 13h2l2-4 3 8 3-6 2 2h4'/></svg>"); }

.nox-i-running { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='16' cy='4.5' r='1.7'/><path d='m13 21 1.9-6.8 3.1 2.6v5'/><path d='m6 14 2.3-2.4 5.4-1.9 3.1 1.6 2.7 2.7'/><path d='m6 19 3-2.5L12 20l-3 1'/></svg>"); }

.nox-i-boxing-glove { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M7 3h6a5 5 0 0 1 5 5v4a4 4 0 0 1-4 4H7a2 2 0 0 1-2-2v-2l1.5-2L5 8V5a2 2 0 0 1 2-2z'/><path d='M7 16v3a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-3'/><path d='M13 8v4'/></svg>"); }

.nox-i-stopwatch { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='14' r='7'/><path d='M12 10v4l2.5 2.5M10 2h4M12 5V7'/></svg>"); }

/* ───────── MEDICAL ───────── */
.nox-i-medical-cross { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='3'/><path d='M12 8v8M8 12h8'/></svg>"); }

.nox-i-stethoscope { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 3v7a5 5 0 0 0 10 0V3'/><path d='M4 3h2M12 3h2'/><path d='M9 15v3a4 4 0 0 0 8 0v-1.5'/><circle cx='17' cy='14' r='2'/></svg>"); }

.nox-i-tooth { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4c-3 0-5 1.5-7 2-1 .5-1 2 0 3s0 4 1 6c1 3 2 6 3 6s1-3 2-5 1-2 1-2 0 0 1 2 1 5 2 5 2-3 3-6c1-2 0-5 1-6s1-2.5 0-3c-2-.5-4-2-7-2z'/></svg>"); }

.nox-i-pill { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='8' width='20' height='8' rx='4' transform='rotate(-30 12 12)'/><path d='m8.5 7.5 7 9'/></svg>"); }

.nox-i-heart-cardiac { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>"); }

.nox-i-syringe { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m18 2 4 4M15 5l4 4'/><path d='m14 6-7 7v4h4l7-7z'/><path d='m8 16-4 4M9 14l2 2'/></svg>"); }

/* ───────── REAL ESTATE ───────── */
.nox-i-house { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-7h-6v7H4a1 1 0 0 1-1-1z'/></svg>"); }

.nox-i-building { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 21V6l8-3 8 3v15'/><path d='M8 9h2M8 13h2M8 17h2M14 9h2M14 13h2M14 17h2'/><path d='M10 21v-3h4v3'/></svg>"); }

.nox-i-key { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='7' cy='15' r='4'/><path d='m10 12 11-11'/><path d='m15 5 3 3M17 3l3 3'/></svg>"); }

.nox-i-pin { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2a7 7 0 0 1 7 7c0 4.5-4 9-7 12-3-3-7-7.5-7-12a7 7 0 0 1 7-7z'/><circle cx='12' cy='9' r='2.5'/></svg>"); }

/* ───────── RESTAURANT ───────── */
.nox-i-fork-knife { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M7 3v6m0 0v12M4 3v6a3 3 0 0 0 6 0V3'/><path d='M18 3v18M15 8c0-4 6-4 6 0v4c0 2-3 2-3 2'/></svg>"); }

.nox-i-chef-hat { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 14v6h12v-6'/><path d='M6 14a4 4 0 0 1-4-4 4 4 0 0 1 5-3.9 4 4 0 0 1 7-1.1 4 4 0 0 1 5 4 4 4 0 0 1-1 7.5'/><path d='M6 14h12'/></svg>"); }

.nox-i-wine-glass { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M8 3h8l-.5 7a3.5 3.5 0 1 1-7 0z'/><path d='M12 13.5V20M9 20h6'/></svg>"); }

.nox-i-coffee { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8h14v6a5 5 0 0 1-5 5H8a5 5 0 0 1-5-5z'/><path d='M17 8h2a3 3 0 0 1 0 6h-2'/><path d='M7 1v3M11 1v3M15 1v3'/></svg>"); }

/* ───────── SPA / WELLNESS ───────── */
.nox-i-lotus { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4C10 8 8 10 12 14c4-4 2-6 0-10z'/><path d='M6 9c-1 3 0 6 6 5C10 13 8 11 6 9z'/><path d='M18 9c1 3 0 6-6 5 2-1 4-3 6-5z'/><path d='M2 14c4 4 7 5 10 5s6-1 10-5c-5 0-6 2-10 2s-5-2-10-2z'/></svg>"); }

.nox-i-water-drop { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2.5s-7 7.5-7 12.5a7 7 0 0 0 14 0c0-5-7-12.5-7-12.5z'/></svg>"); }

.nox-i-leaf { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M19 4c0 9-7 16-15 16 0-8 6-16 15-16z'/><path d='M5 20C8 14 12 10 18 7'/></svg>"); }

.nox-i-scissors { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='6' r='3'/><circle cx='6' cy='18' r='3'/><line x1='20' y1='4' x2='8.12' y2='15.88'/><line x1='14.47' y1='14.48' x2='20' y2='20'/><line x1='8.12' y1='8.12' x2='12' y2='12'/></svg>"); }

/* ───────── LAW / PROFESSIONAL ───────── */
.nox-i-scales { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v18M6 21h12'/><path d='M4 7h16M8 5l4-2 4 2'/><path d='M7 7 3 15c0 2 2 3 4 3s4-1 4-3z'/><path d='m17 7-4 8c0 2 2 3 4 3s4-1 4-3z'/></svg>"); }

.nox-i-gavel { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m14 13-8 8'/><path d='M14 13h6M17 10h6M12 5l7 7M8.5 8.5l7 7M15.5 1.5l7 7'/></svg>"); }

.nox-i-shield { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2 4 5v7c0 4 3 8 8 10 5-2 8-6 8-10V5z'/></svg>"); }

.nox-i-book { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/><path d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/></svg>"); }

/* ───────── LANDSCAPING ───────── */
.nox-i-tree { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m12 3-4 5h3l-4 5h3l-4 5h10l-4-5h3l-4-5h3z'/><path d='M12 18v4'/></svg>"); }

.nox-i-flower { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='9' r='2.5'/><path d='M12 6.5c0-2.5-2-4-2-4s-2 2-2 4 1.5 2.5 2 2.5 2 0 2-2.5z'/><path d='M12 11.5c0 2.5 2 4 2 4s2-2 2-4-1.5-2.5-2-2.5-2 0-2 2.5z'/><path d='M9.5 9c-2.5 0-4 2-4 2s2 2 4 2 2.5-1.5 2.5-2-1-2-2.5-2z'/><path d='M14.5 9c2.5 0 4-2 4-2s-2-2-4-2-2.5 1.5-2.5 2 1 2 2.5 2z'/><path d='M12 12v10'/></svg>"); }

.nox-i-shovel { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 3 8 16'/><path d='M4 21c-1-1-2-3-1-4l4-4c2-2 4 0 5 1l1 1c1 1 3 3 1 5l-4 4c-1 1-3 0-4-1z'/><path d='M18 3h3v3'/></svg>"); }

.nox-i-grass { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20c0-4 2-7 2-10M8 20c0-5 2-10 2-12M12 20c0-6 2-12 2-14M16 20c0-5 2-10 2-12M20 20c0-4 2-7 2-10'/><path d='M2 20h20'/></svg>"); }

/* ───────── AUTO ───────── */
.nox-i-car { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 17h14l2-6-3-5H6L3 11z'/><circle cx='7' cy='17' r='2'/><circle cx='17' cy='17' r='2'/><path d='M3 11h18'/></svg>"); }

.nox-i-wrench { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M15 3 9 9l-6 6c-1 1-1 3 0 4s3 1 4 0l6-6 6-6a4 4 0 0 0-4-4z'/><path d='M15 3a4 4 0 0 1 4 4'/></svg>"); }

.nox-i-gear { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M12 2v3M12 19v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M2 12h3M19 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12'/></svg>"); }

.nox-i-tire { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='3'/><path d='M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.2 2.2M16.2 16.2l2.2 2.2M5.6 18.4l2.2-2.2M16.2 7.8l2.2-2.2'/></svg>"); }

/* ───────── HVAC ───────── */
.nox-i-fan { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='2'/><path d='M12 10V4C6 4 4 10 10 12M14 12h6c0 6-6 8-8 2M12 14v6c-6 0-8-6-2-8M10 12H4c0-6 6-8 8-2'/></svg>"); }

.nox-i-thermostat { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M14 4a3 3 0 0 0-6 0v10a5 5 0 1 0 6 0z'/><circle cx='11' cy='16' r='2.5'/><path d='M11 11v3'/></svg>"); }

.nox-i-snowflake { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2v20M4.22 6.22l15.56 9M19.78 6.22l-15.56 9'/><path d='m9 5 3 3 3-3M9 19l3-3 3 3M5 9l3-3M19 15l-3 3M5 15l3 3M19 9l-3-3'/></svg>"); }

.nox-i-flame { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M8.5 14.5A2.5 2.5 0 0 0 11 17c2.5 0 4-3 4-3s-1-6-2-7-3-1-3-1 1 3-1 3S7 7 7 7s3 4.5 1.5 7.5z'/><path d='M12 22c5 0 8-3 8-7 0-3-2-7-6-10 .5 5-2 4-2 4 0-4-3-8-9-8 3 3 5 5 5 9 0 3-4 2-4 5 0 4 3 7 8 7z'/></svg>"); }

/* ───────── PHOTOGRAPHY ───────── */
.nox-i-camera { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 8a2 2 0 0 1 2-2h2l2-2h6l2 2h2a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><circle cx='12' cy='13' r='4'/></svg>"); }

.nox-i-aperture { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='m14.31 8 5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16 3.95 6.06M14.31 16H2.83M16.62 12l-5.74 9.94'/></svg>"); }

/* ───────── CONSULTING ───────── */
.nox-i-briefcase { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='7' width='20' height='14' rx='2'/><path d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/><path d='M2 13h20'/></svg>"); }

.nox-i-lightbulb { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M9 18h6M10 22h4'/><path d='M12 2a7 7 0 0 0-4 12.7c1 .8 1.5 1.9 1.5 3.3h5c0-1.4.5-2.5 1.5-3.3A7 7 0 0 0 12 2z'/></svg>"); }

/* ───────── VENUE / EVENTS ───────── */
.nox-i-archway { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21V9a9 9 0 0 1 18 0v12'/><path d='M3 21h18'/><path d='M7 21V13a5 5 0 0 1 10 0v8'/></svg>"); }

.nox-i-rings { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='8' cy='15' r='6'/><circle cx='16' cy='15' r='6'/><path d='m6 6 2 3 2-3M14 6l2 3 2-3'/></svg>"); }

/* ═══════════════════════════════════════════════════════════════════════
   UI / UTILITY ICONS
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────── ACTIONS ───────── */
.nox-i-check { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>"); }

.nox-i-x { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M6 6l12 12M18 6 6 18'/></svg>"); }

.nox-i-plus { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M5 12h14'/></svg>"); }

.nox-i-minus { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/></svg>"); }

.nox-i-edit { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z'/></svg>"); }

.nox-i-trash { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18'/><path d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6'/><path d='M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/><path d='M10 11v6M14 11v6'/></svg>"); }

.nox-i-save { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z'/><path d='M17 21v-8H7v8M7 3v5h8'/></svg>"); }

.nox-i-download { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><path d='M7 10l5 5 5-5M12 15V3'/></svg>"); }

.nox-i-upload { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><path d='M17 8l-5-5-5 5M12 3v12'/></svg>"); }

.nox-i-copy { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='9' y='9' width='13' height='13' rx='2'/><path d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/></svg>"); }

.nox-i-share { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='18' cy='5' r='3'/><circle cx='6' cy='12' r='3'/><circle cx='18' cy='19' r='3'/><path d='m8.6 13.5 6.8 4M15.4 6.5l-6.8 4'/></svg>"); }

.nox-i-send { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m22 2-11 11'/><path d='M22 2 15 22l-4-9-9-4z'/></svg>"); }

.nox-i-search { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><path d='m21 21-4.35-4.35'/></svg>"); }

.nox-i-filter { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M22 3H2l8 9.5V19l4 2v-8.5z'/></svg>"); }

.nox-i-sort { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18M6 12h12M10 18h4'/></svg>"); }

.nox-i-refresh { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 2v6h-6M3 12a9 9 0 0 1 15-6.7L21 8'/><path d='M3 22v-6h6M21 12a9 9 0 0 1-15 6.7L3 16'/></svg>"); }

/* ───────── NAVIGATION ───────── */
.nox-i-arrow-up    { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 19V5M5 12l7-7 7 7'/></svg>"); }
.nox-i-arrow-down  { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 5v14M19 12l-7 7-7-7'/></svg>"); }
.nox-i-arrow-left  { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M19 12H5M12 19l-7-7 7-7'/></svg>"); }
.nox-i-arrow-right { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14M12 5l7 7-7 7'/></svg>"); }

.nox-i-chevron-up    { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 15 6-6 6 6'/></svg>"); }
.nox-i-chevron-down  { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); }
.nox-i-chevron-left  { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m15 18-6-6 6-6'/></svg>"); }
.nox-i-chevron-right { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m9 18 6-6-6-6'/></svg>"); }

.nox-i-external { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/><path d='m15 3 6 0 0 6M10 14 21 3'/></svg>"); }

.nox-i-menu { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12h18M3 6h18M3 18h18'/></svg>"); }

.nox-i-more-h { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='none'><circle cx='5' cy='12' r='1.8'/><circle cx='12' cy='12' r='1.8'/><circle cx='19' cy='12' r='1.8'/></svg>"); }

.nox-i-more-v { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='none'><circle cx='12' cy='5' r='1.8'/><circle cx='12' cy='12' r='1.8'/><circle cx='12' cy='19' r='1.8'/></svg>"); }

.nox-i-grid { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='7' rx='1'/><rect x='14' y='3' width='7' height='7' rx='1'/><rect x='3' y='14' width='7' height='7' rx='1'/><rect x='14' y='14' width='7' height='7' rx='1'/></svg>"); }

.nox-i-list { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/></svg>"); }

.nox-i-home { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m3 10 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/><path d='M9 22V12h6v10'/></svg>"); }

.nox-i-dashboard { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='7' height='9' rx='1'/><rect x='14' y='3' width='7' height='5' rx='1'/><rect x='14' y='12' width='7' height='9' rx='1'/><rect x='3' y='16' width='7' height='5' rx='1'/></svg>"); }

.nox-i-settings { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3'/><path d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/></svg>"); }

/* ───────── STATUS / FEEDBACK ───────── */
.nox-i-info { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4M12 8h.01'/></svg>"); }

.nox-i-warning { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'/><path d='M12 9v4M12 17h.01'/></svg>"); }

.nox-i-error { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m15 9-6 6M9 9l6 6'/></svg>"); }

.nox-i-check-circle { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/><path d='m22 4-10 10-3-3'/></svg>"); }

.nox-i-help { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01'/></svg>"); }

/* ───────── OBJECTS / DATA ───────── */
.nox-i-user { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>"); }

.nox-i-users { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/></svg>"); }

.nox-i-lock { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>"); }

.nox-i-unlock { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='11' width='18' height='11' rx='2'/><path d='M7 11V7a5 5 0 0 1 9.9-1'/></svg>"); }

.nox-i-bell { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/><path d='M13.73 21a2 2 0 0 1-3.46 0'/></svg>"); }

.nox-i-mail { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m22 7-10 7L2 7'/></svg>"); }

.nox-i-phone { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/></svg>"); }

.nox-i-message { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>"); }

.nox-i-calendar { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><path d='M16 2v4M8 2v4M3 10h18'/></svg>"); }

.nox-i-clock { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 6v6l4 2'/></svg>"); }

.nox-i-star { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m12 2 3 7 7 .8-5 5 1.5 7-6.5-4-6.5 4L7 14.8 2 9.8 9 9z'/></svg>"); }

.nox-i-star-fill { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1' stroke-linejoin='round'><path d='m12 2 3 7 7 .8-5 5 1.5 7-6.5-4-6.5 4L7 14.8 2 9.8 9 9z'/></svg>"); }

.nox-i-heart { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/></svg>"); }

.nox-i-bookmark { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z'/></svg>"); }

.nox-i-flag { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/><path d='M4 22v-7'/></svg>"); }

.nox-i-eye { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle cx='12' cy='12' r='3'/></svg>"); }

.nox-i-eye-off { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/><line x1='1' y1='1' x2='23' y2='23'/></svg>"); }

/* ───────── BUSINESS / CHARTS ───────── */
.nox-i-chart-bar { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='10' width='4' height='11'/><rect x='10' y='4' width='4' height='17'/><rect x='16' y='14' width='4' height='7'/></svg>"); }

.nox-i-chart-line { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3v18h18'/><path d='M7 14l4-4 4 4 5-5'/></svg>"); }

.nox-i-trending-up { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M23 6 13.5 15.5l-5-5L1 18'/><path d='M17 6h6v6'/></svg>"); }

.nox-i-trending-down { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M23 18 13.5 8.5l-5 5L1 6'/><path d='M17 18h6v-6'/></svg>"); }

.nox-i-dollar { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 1v22M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/></svg>"); }

.nox-i-credit-card { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='1' y='4' width='22' height='16' rx='2'/><line x1='1' y1='10' x2='23' y2='10'/></svg>"); }

.nox-i-cart { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='21' r='1'/><circle cx='20' cy='21' r='1'/><path d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/></svg>"); }

.nox-i-target { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><circle cx='12' cy='12' r='6'/><circle cx='12' cy='12' r='2'/></svg>"); }

.nox-i-award { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='7'/><path d='m8.21 13.89-1.21 7.11 5-3 5 3-1.21-7.11'/></svg>"); }

/* ───────── FILES / MEDIA ───────── */
.nox-i-file { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><path d='M14 2v6h6M16 13H8M16 17H8M10 9H8'/></svg>"); }

.nox-i-folder { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z'/></svg>"); }

.nox-i-image { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='8.5' cy='8.5' r='1.5'/><path d='m21 15-5-5L5 21'/></svg>"); }

.nox-i-video { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M23 7l-7 5 7 5z'/><rect x='1' y='5' width='15' height='14' rx='2'/></svg>"); }

.nox-i-play { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1' stroke-linejoin='round'><path d='m6 3 14 9-14 9z'/></svg>"); }

.nox-i-pause { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='none'><rect x='6' y='4' width='4' height='16' rx='1'/><rect x='14' y='4' width='4' height='16' rx='1'/></svg>"); }

/* ───────── SOCIAL / BRAND (NOX takes on platforms) ───────── */
.nox-i-link { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07L11.76 5.17'/><path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.72-1.71'/></svg>"); }

.nox-i-globe { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/></svg>"); }

.nox-i-zap { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M13 2 3 14h9l-1 8 10-12h-9z'/></svg>"); }

/* ───────── NOX BRAND SYMBOLS (exclusive) ───────── */
.nox-i-nox { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3 3 21 21 3 21 21'/></svg>"); }

.nox-i-diamond { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2 2 12l10 10 10-10z'/></svg>"); }

.nox-i-hex { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2 3 7v10l9 5 9-5V7z'/></svg>"); }

.nox-i-circle-dot { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='3' fill='black'/></svg>"); }

.nox-i-square-dot { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><rect x='9' y='9' width='6' height='6' fill='black' rx='1'/></svg>"); }

.nox-i-asterisk { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2v20M4.93 4.93l14.14 14.14M4.93 19.07 19.07 4.93M2 12h20'/></svg>"); }

.nox-i-quote { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='none'><path d='M5 5h4v4H7c0 1.5.5 2.5 2 3l-.5 2c-2-.5-3.5-2-3.5-5zM14 5h4v4h-2c0 1.5.5 2.5 2 3l-.5 2c-2-.5-3.5-2-3.5-5z'/></svg>"); }

.nox-i-sparkle { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m12 3 2 6 6 2-6 2-2 6-2-6-6-2 6-2z'/><path d='M19 2v4M22 4h-4M5 18v4M7 20H3'/></svg>"); }

.nox-i-flag-checkered { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 22v-7M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z'/><path d='M4 3h4v4H4zM12 3h4v4h-4zM8 7h4v4H8zM4 11h4v4H4zM12 11h4v4h-4zM16 7h4v4h-4z' fill='black' stroke='none'/></svg>"); }

.nox-i-activity { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M22 12h-4l-3 9L9 3l-3 9H2'/></svg>"); }

.nox-i-layers { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='m12 2 10 6-10 6L2 8z'/><path d='m2 17 10 6 10-6M2 12l10 6 10-6'/></svg>"); }

.nox-i-book-open { --nox-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/><path d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/></svg>"); }

/* ═══════════════════════════════════════════════════════════════════════
   ICON COMPOSITIONS — common patterns
   ═══════════════════════════════════════════════════════════════════════ */

/* Icon + text row */
.nox-icon-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Big standalone icon with background */
.nox-icon-feature {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--nox-accent-s);
  border: 1px solid var(--nox-accent-g);
  color: var(--nox-accent);
  flex-shrink: 0;
}
.nox-icon-feature .nox-icon { width: 28px; height: 28px; }
.nox-icon-feature.is-lg { width: 72px; height: 72px; border-radius: 16px; }
.nox-icon-feature.is-lg .nox-icon { width: 36px; height: 36px; }

/* Avatar-style circular icon */
.nox-icon-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--nox-bg-3);
  color: var(--nox-ink);
  flex-shrink: 0;
}
.nox-icon-avatar .nox-icon { width: 20px; height: 20px; }

/* ═══════════════════════════════════════════════════════════════════════
   END nox-icons.css
   ═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   NOX MOTION & EXTRAS
   Animation library + commonly-needed components that weren't yet built.

   Contents:
     1. Keyframe animations
     2. Animation utility classes
     3. Hover effect presets
     4. Transition utilities
     5. Loading states (spinner, bar, skeleton, shimmer)
     6. Empty states
     7. Alert banners
     8. Breadcrumbs (extra variants)
     9. Rating / stars
    10. File upload / drop zone
    11. Stepper / wizard
    12. Code blocks / terminal
    13. Toggle group (segmented control)
    14. Tooltips
    15. Tag / label variants
    16. Divider variants
    17. Avatar group (stacked)
    18. Status dot (online / offline / away / busy)
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────
   1 · KEYFRAMES
   ─────────────────────────────────────────────────────────────────────── */

@keyframes nox-fade-in       { from { opacity: 0; } to { opacity: 1; } }
@keyframes nox-fade-out      { from { opacity: 1; } to { opacity: 0; } }
@keyframes nox-slide-up      { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes nox-slide-down    { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes nox-slide-left    { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes nox-slide-right   { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes nox-zoom-in       { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
@keyframes nox-zoom-out      { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
@keyframes nox-bounce-in     { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(0.97); } 100% { transform: scale(1); } }

@keyframes nox-spin          { to { transform: rotate(360deg); } }
@keyframes nox-pulse         { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes nox-ping          { 75%, 100% { transform: scale(2); opacity: 0; } }
@keyframes nox-bounce        { 0%, 100% { transform: translateY(-6px); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } }
@keyframes nox-shake         { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); } 20%, 40%, 60%, 80% { transform: translateX(4px); } }
@keyframes nox-wiggle        { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

@keyframes nox-shimmer       { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes nox-loading-bar   { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } }

@keyframes nox-flip-in       { from { opacity: 0; transform: perspective(800px) rotateY(-40deg); } to { opacity: 1; transform: perspective(800px) rotateY(0); } }
@keyframes nox-rotate-in     { from { opacity: 0; transform: rotate(-180deg) scale(0.5); } to { opacity: 1; transform: rotate(0) scale(1); } }
@keyframes nox-swing         { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0); } }

/* ───────────────────────────────────────────────────────────────────────
   2 · ANIMATION UTILITY CLASSES
   Apply directly to any element. Default duration: 400ms.
   ─────────────────────────────────────────────────────────────────────── */

.nox-anim-fade-in      { animation: nox-fade-in 0.4s ease-out both; }
.nox-anim-fade-out     { animation: nox-fade-out 0.25s ease-in both; }
.nox-anim-slide-up     { animation: nox-slide-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nox-anim-slide-down   { animation: nox-slide-down 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nox-anim-slide-left   { animation: nox-slide-left 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nox-anim-slide-right  { animation: nox-slide-right 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nox-anim-zoom-in      { animation: nox-zoom-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nox-anim-zoom-out     { animation: nox-zoom-out 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nox-anim-bounce-in    { animation: nox-bounce-in 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) both; }
.nox-anim-flip-in      { animation: nox-flip-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nox-anim-rotate-in    { animation: nox-rotate-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }

.nox-anim-spin         { animation: nox-spin 1s linear infinite; }
.nox-anim-pulse        { animation: nox-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.nox-anim-ping         { animation: nox-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.nox-anim-bounce       { animation: nox-bounce 1s infinite; }
.nox-anim-shake        { animation: nox-shake 0.5s ease-in-out; }
.nox-anim-wiggle       { animation: nox-wiggle 0.8s ease-in-out infinite; }
.nox-anim-swing        { animation: nox-swing 1s ease-in-out infinite; transform-origin: top center; }

/* Delay modifiers */
.nox-delay-75   { animation-delay: 75ms; }
.nox-delay-100  { animation-delay: 100ms; }
.nox-delay-150  { animation-delay: 150ms; }
.nox-delay-200  { animation-delay: 200ms; }
.nox-delay-300  { animation-delay: 300ms; }
.nox-delay-500  { animation-delay: 500ms; }
.nox-delay-700  { animation-delay: 700ms; }
.nox-delay-1000 { animation-delay: 1000ms; }

/* Duration modifiers */
.nox-dur-100  { animation-duration: 100ms; transition-duration: 100ms; }
.nox-dur-150  { animation-duration: 150ms; transition-duration: 150ms; }
.nox-dur-200  { animation-duration: 200ms; transition-duration: 200ms; }
.nox-dur-300  { animation-duration: 300ms; transition-duration: 300ms; }
.nox-dur-500  { animation-duration: 500ms; transition-duration: 500ms; }
.nox-dur-700  { animation-duration: 700ms; transition-duration: 700ms; }
.nox-dur-1000 { animation-duration: 1000ms; transition-duration: 1000ms; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────
   3 · HOVER EFFECT PRESETS
   Add to any element. They compose well with other classes.
   ─────────────────────────────────────────────────────────────────────── */

.nox-hover-lift {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}
.nox-hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--nox-shadow-lg);
}

.nox-hover-grow {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.nox-hover-grow:hover { transform: scale(1.04); }

.nox-hover-shrink {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.nox-hover-shrink:hover { transform: scale(0.96); }

.nox-hover-glow {
  transition: box-shadow 0.2s ease;
}
.nox-hover-glow:hover { box-shadow: 0 0 0 3px var(--nox-accent-s), 0 0 20px var(--nox-accent-g); }

.nox-hover-slide {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.nox-hover-slide:hover { transform: translateX(4px); }

.nox-hover-underline {
  position: relative;
  background-image: linear-gradient(to right, currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nox-hover-underline:hover { background-size: 100% 1px; }

.nox-hover-brighten {
  transition: filter 0.2s ease;
}
.nox-hover-brighten:hover { filter: brightness(1.15); }

.nox-hover-fade {
  transition: opacity 0.2s ease;
}
.nox-hover-fade:hover { opacity: 0.7; }

/* ───────────────────────────────────────────────────────────────────────
   4 · LOADING STATES
   ─────────────────────────────────────────────────────────────────────── */

/* Spinner — simple circle */
.nox-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--nox-line);
  border-top-color: var(--nox-accent);
  border-radius: 50%;
  animation: nox-spin 0.8s linear infinite;
  flex-shrink: 0;
}
.nox-spinner.is-sm { width: 14px; height: 14px; border-width: 1.5px; }
.nox-spinner.is-lg { width: 32px; height: 32px; border-width: 3px; }
.nox-spinner.is-xl { width: 48px; height: 48px; border-width: 4px; }

/* Dot spinner — 3 bouncing dots */
.nox-spinner-dots {
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  height: 20px;
}
.nox-spinner-dots span {
  width: 6px;
  height: 6px;
  background: var(--nox-accent);
  border-radius: 50%;
  animation: nox-bounce 1s infinite;
}
.nox-spinner-dots span:nth-child(2) { animation-delay: 0.12s; }
.nox-spinner-dots span:nth-child(3) { animation-delay: 0.24s; }

/* Loading bar — top-of-page style */
.nox-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--nox-accent), transparent);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  z-index: 9999;
  animation: nox-loading-bar 1.2s ease-in-out infinite;
}

/* Skeleton loaders */
.nox-skeleton {
  display: block;
  background: linear-gradient(90deg, var(--nox-bg-2) 0%, var(--nox-bg-3) 40%, var(--nox-bg-2) 80%);
  background-size: 200% 100%;
  animation: nox-shimmer 1.4s linear infinite;
  border-radius: 6px;
}
.nox-skeleton-text     { height: 12px; margin: 6px 0; }
.nox-skeleton-title    { height: 24px; width: 60%; margin: 8px 0; }
.nox-skeleton-avatar   { width: 40px; height: 40px; border-radius: 50%; }
.nox-skeleton-avatar-lg{ width: 64px; height: 64px; border-radius: 50%; }
.nox-skeleton-card     { height: 140px; border-radius: 10px; }
.nox-skeleton-button   { height: 36px; width: 100px; border-radius: 6px; }

/* Full-screen loader */
.nox-loader-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: nox-fade-in 0.2s ease;
}
.nox-loader-overlay-text {
  margin-left: 14px;
  font-family: var(--nox-font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--nox-ink-3);
}

/* ───────────────────────────────────────────────────────────────────────
   5 · EMPTY STATES
   Use with icons: <div class="nox-empty"><span class="nox-icon nox-icon-2xl nox-i-folder"></span>...
   ─────────────────────────────────────────────────────────────────────── */

.nox-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  min-height: 280px;
  background: var(--nox-bg-1);
  border: 1px dashed var(--nox-line);
  border-radius: 12px;
}
.nox-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--nox-bg-3);
  color: var(--nox-ink-4);
  margin-bottom: 20px;
}
.nox-empty-icon .nox-icon { width: 32px; height: 32px; }
.nox-empty-icon.is-accent { background: var(--nox-accent-s); color: var(--nox-accent); border: 1px solid var(--nox-accent-g); }
.nox-empty-icon.is-green  { background: rgba(58,138,92,0.12); color: var(--nox-green); border: 1px solid rgba(58,138,92,0.25); }
.nox-empty-icon.is-red    { background: rgba(181,69,58,0.12); color: var(--nox-red); border: 1px solid rgba(181,69,58,0.25); }

.nox-empty-title {
  font-family: var(--nox-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--nox-ink);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.nox-empty-desc {
  font-size: 14px;
  color: var(--nox-ink-3);
  line-height: 1.55;
  max-width: 380px;
  margin: 0 0 20px;
}
.nox-empty-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Compact inline empty */
.nox-empty-inline {
  padding: 28px 20px;
  min-height: 0;
  border-style: solid;
  border-radius: 8px;
}
.nox-empty-inline .nox-empty-icon { width: 48px; height: 48px; margin-bottom: 12px; }
.nox-empty-inline .nox-empty-icon .nox-icon { width: 20px; height: 20px; }
.nox-empty-inline .nox-empty-title { font-size: 15px; }
.nox-empty-inline .nox-empty-desc  { font-size: 13px; max-width: 320px; }

/* ───────────────────────────────────────────────────────────────────────
   6 · ALERT BANNERS
   ─────────────────────────────────────────────────────────────────────── */

.nox-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-left: 3px solid var(--nox-ink-4);
  border-radius: 8px;
  margin: 14px 0;
}
.nox-alert-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--nox-ink-3);
  margin-top: 2px;
}
.nox-alert-body { flex: 1; min-width: 0; }
.nox-alert-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--nox-ink);
  margin: 0 0 2px;
}
.nox-alert-desc {
  font-size: 13px;
  color: var(--nox-ink-2);
  line-height: 1.55;
  margin: 0;
}
.nox-alert-close {
  background: transparent;
  border: 0;
  color: var(--nox-ink-4);
  font-size: 16px;
  cursor: pointer;
  padding: 2px;
  line-height: 1;
  flex-shrink: 0;
}
.nox-alert-close:hover { color: var(--nox-ink); }

.nox-alert.is-info    { background: rgba(59,130,166,0.08); border-color: rgba(59,130,166,0.25); border-left-color: var(--nox-blue); }
.nox-alert.is-info .nox-alert-icon { color: var(--nox-blue); }
.nox-alert.is-success { background: rgba(58,138,92,0.08); border-color: rgba(58,138,92,0.25); border-left-color: var(--nox-green); }
.nox-alert.is-success .nox-alert-icon { color: var(--nox-green); }
.nox-alert.is-warning { background: rgba(181,154,58,0.08); border-color: rgba(181,154,58,0.25); border-left-color: var(--nox-yellow); }
.nox-alert.is-warning .nox-alert-icon { color: var(--nox-yellow); }
.nox-alert.is-error   { background: rgba(181,69,58,0.08); border-color: rgba(181,69,58,0.25); border-left-color: var(--nox-red); }
.nox-alert.is-error .nox-alert-icon { color: var(--nox-red); }
.nox-alert.is-accent  { background: var(--nox-accent-s); border-color: var(--nox-accent-g); border-left-color: var(--nox-accent); }
.nox-alert.is-accent .nox-alert-icon { color: var(--nox-accent); }

/* Toast (floating alert) */
.nox-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  min-width: 280px;
  max-width: 480px;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: var(--nox-shadow-xl);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  animation: nox-slide-left 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.nox-toast.is-success { border-left: 3px solid var(--nox-green); }
.nox-toast.is-error   { border-left: 3px solid var(--nox-red); }
.nox-toast.is-warning { border-left: 3px solid var(--nox-yellow); }
.nox-toast.is-info    { border-left: 3px solid var(--nox-blue); }

/* ───────────────────────────────────────────────────────────────────────
   7 · BREADCRUMBS (extra variants)
   ─────────────────────────────────────────────────────────────────────── */

.nox-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--nox-font-mono);
  font-size: 11px;
  color: var(--nox-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 8px 0;
}
.nox-breadcrumb a {
  color: var(--nox-ink-3);
  text-decoration: none;
  transition: color 0.1s;
}
.nox-breadcrumb a:hover { color: var(--nox-accent); }
.nox-breadcrumb .sep {
  color: var(--nox-ink-4);
  opacity: 0.5;
}
.nox-breadcrumb > *:last-child { color: var(--nox-ink); }

/* ───────────────────────────────────────────────────────────────────────
   8 · RATING / STARS
   ─────────────────────────────────────────────────────────────────────── */

.nox-rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--nox-yellow);
}
.nox-rating .nox-icon { width: 16px; height: 16px; }
.nox-rating .is-empty { color: var(--nox-ink-4); opacity: 0.4; }
.nox-rating-label {
  font-family: var(--nox-font-mono);
  font-size: 11px;
  color: var(--nox-ink-3);
  margin-left: 8px;
  letter-spacing: 0.05em;
}

/* ───────────────────────────────────────────────────────────────────────
   9 · FILE UPLOAD / DROP ZONE
   ─────────────────────────────────────────────────────────────────────── */

.nox-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 24px;
  background: var(--nox-bg-1);
  border: 2px dashed var(--nox-line);
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
}
.nox-dropzone:hover {
  border-color: var(--nox-accent);
  background: var(--nox-accent-s);
}
.nox-dropzone.is-dragging {
  border-color: var(--nox-accent);
  background: var(--nox-accent-s);
  transform: scale(1.01);
}
.nox-dropzone-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nox-ink-4);
}
.nox-dropzone-icon .nox-icon { width: 32px; height: 32px; }
.nox-dropzone:hover .nox-dropzone-icon { color: var(--nox-accent); }
.nox-dropzone-title {
  font-family: var(--nox-font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--nox-ink);
}
.nox-dropzone-hint {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--nox-ink-4);
}

/* File list (uploaded files) */
.nox-file-list { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; }
.nox-file-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: 6px;
}
.nox-file-item-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nox-bg-3);
  border-radius: 6px;
  color: var(--nox-ink-3);
  flex-shrink: 0;
}
.nox-file-item-body { flex: 1; min-width: 0; }
.nox-file-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--nox-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nox-file-item-meta {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  color: var(--nox-ink-4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ───────────────────────────────────────────────────────────────────────
   10 · STEPPER / WIZARD
   ─────────────────────────────────────────────────────────────────────── */

.nox-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0;
  width: 100%;
}
.nox-step {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.nox-step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--nox-line);
  background: var(--nox-bg-2);
  color: var(--nox-ink-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--nox-font-mono);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.2s;
}
.nox-step-label {
  font-family: var(--nox-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--nox-ink-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nox-step-connector {
  flex: 1;
  height: 2px;
  background: var(--nox-line);
  min-width: 24px;
}
.nox-step.is-done .nox-step-dot { background: var(--nox-accent); border-color: var(--nox-accent); color: #000; }
.nox-step.is-done .nox-step-label { color: var(--nox-ink-3); }
.nox-step.is-done + .nox-step-connector { background: var(--nox-accent); }
.nox-step.is-active .nox-step-dot {
  border-color: var(--nox-accent);
  background: var(--nox-accent-s);
  color: var(--nox-accent);
  box-shadow: 0 0 0 4px var(--nox-accent-s);
}
.nox-step.is-active .nox-step-label { color: var(--nox-ink); font-weight: 700; }

/* Vertical variant */
.nox-stepper-v {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 14px 0;
}
.nox-stepper-v .nox-step {
  position: relative;
  padding-bottom: 32px;
  padding-left: 0;
  flex: unset;
}
.nox-stepper-v .nox-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 28px;
  bottom: 8px;
  width: 2px;
  background: var(--nox-line);
}
.nox-stepper-v .nox-step.is-done:not(:last-child)::before { background: var(--nox-accent); }
.nox-stepper-v .nox-step-body {
  margin-left: 8px;
  padding-top: 2px;
}
.nox-stepper-v .nox-step-title {
  font-family: var(--nox-font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--nox-ink);
  margin-bottom: 4px;
}
.nox-stepper-v .nox-step-desc {
  font-size: 12px;
  color: var(--nox-ink-3);
  line-height: 1.5;
}

/* ───────────────────────────────────────────────────────────────────────
   11 · CODE BLOCKS / TERMINAL
   ─────────────────────────────────────────────────────────────────────── */

.nox-code {
  display: block;
  background: var(--nox-bg-1);
  border: 1px solid var(--nox-line);
  border-radius: 8px;
  padding: 16px 18px;
  font-family: var(--nox-font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--nox-ink-2);
  overflow-x: auto;
  white-space: pre;
  margin: 12px 0;
}
.nox-code-inline {
  font-family: var(--nox-font-mono);
  font-size: 0.88em;
  background: var(--nox-bg-2);
  color: var(--nox-accent);
  border: 1px solid var(--nox-line);
  padding: 1px 6px;
  border-radius: 4px;
}

/* Terminal output */
.nox-terminal {
  background: #0a0a0a;
  border: 1px solid var(--nox-line);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  font-family: var(--nox-font-mono);
  margin: 14px 0;
}
.nox-terminal-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #111;
  border-bottom: 1px solid var(--nox-line);
}
.nox-terminal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #555;
}
.nox-terminal-dot.is-red    { background: #ff5f56; }
.nox-terminal-dot.is-yellow { background: #ffbd2e; }
.nox-terminal-dot.is-green  { background: #27c93f; }
.nox-terminal-title {
  margin-left: auto;
  font-size: 11px;
  color: #888;
  letter-spacing: 0.05em;
}
.nox-terminal-body {
  padding: 16px 18px;
  font-size: 12px;
  line-height: 1.65;
  color: #c0c0c0;
  overflow-x: auto;
}
.nox-terminal-prompt { color: #27c93f; margin-right: 8px; }
.nox-terminal-cmd    { color: #e0e0e0; }
.nox-terminal-out    { color: #888; }
.nox-terminal-err    { color: #ff5f56; }
.nox-terminal-ok     { color: #27c93f; }

/* Diff / change view */
.nox-diff {
  display: block;
  background: var(--nox-bg-1);
  border: 1px solid var(--nox-line);
  border-radius: 8px;
  overflow: hidden;
  font-family: var(--nox-font-mono);
  font-size: 12px;
  line-height: 1.55;
  margin: 14px 0;
}
.nox-diff-line { padding: 3px 16px; white-space: pre; display: block; }
.nox-diff-line.is-add { background: rgba(58,138,92,0.12); color: var(--nox-green); }
.nox-diff-line.is-del { background: rgba(181,69,58,0.12); color: var(--nox-red); }
.nox-diff-line.is-ctx { color: var(--nox-ink-3); }

/* ───────────────────────────────────────────────────────────────────────
   12 · TOGGLE GROUP / SEGMENTED CONTROL
   ─────────────────────────────────────────────────────────────────────── */

.nox-toggle-group {
  display: inline-flex;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.nox-toggle-group button {
  padding: 6px 14px;
  font-family: var(--nox-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: var(--nox-ink-3);
  cursor: pointer;
  transition: all 0.1s;
}
.nox-toggle-group button:hover { color: var(--nox-ink); }
.nox-toggle-group button.is-active {
  background: var(--nox-bg);
  color: var(--nox-ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  font-weight: 700;
}

/* ───────────────────────────────────────────────────────────────────────
   13 · TOOLTIPS
   Use data-tooltip attribute. Position via modifier.
   ─────────────────────────────────────────────────────────────────────── */

[data-nox-tooltip] {
  position: relative;
}
[data-nox-tooltip]::before {
  content: attr(data-nox-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--nox-bg-3);
  color: var(--nox-ink);
  font-family: var(--nox-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: all 0.15s;
  border: 1px solid var(--nox-line);
  box-shadow: var(--nox-shadow-md);
  z-index: 10;
}
[data-nox-tooltip]::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 4px solid transparent;
  border-top-color: var(--nox-bg-3);
  pointer-events: none;
  opacity: 0;
  transition: all 0.15s;
  z-index: 10;
}
[data-nox-tooltip]:hover::before,
[data-nox-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

[data-nox-tooltip-pos="bottom"]::before { top: calc(100% + 6px); bottom: auto; transform: translateX(-50%) translateY(-4px); }
[data-nox-tooltip-pos="bottom"]::after  { top: calc(100% + 2px); bottom: auto; border-top-color: transparent; border-bottom-color: var(--nox-bg-3); transform: translateX(-50%) translateY(-4px); }
[data-nox-tooltip-pos="bottom"]:hover::before,
[data-nox-tooltip-pos="bottom"]:hover::after { transform: translateX(-50%) translateY(0); }

/* ───────────────────────────────────────────────────────────────────────
   14 · TAG / LABEL VARIANTS
   ─────────────────────────────────────────────────────────────────────── */

.nox-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-family: var(--nox-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--nox-bg-3);
  color: var(--nox-ink-2);
  border: 1px solid var(--nox-line);
  border-radius: 4px;
  font-weight: 600;
  line-height: 1.3;
}
.nox-tag.is-accent { background: var(--nox-accent-s); color: var(--nox-accent); border-color: var(--nox-accent-g); }
.nox-tag.is-green  { background: rgba(58,138,92,0.12); color: var(--nox-green); border-color: rgba(58,138,92,0.25); }
.nox-tag.is-red    { background: rgba(181,69,58,0.12); color: var(--nox-red); border-color: rgba(181,69,58,0.25); }
.nox-tag.is-yellow { background: rgba(181,154,58,0.12); color: var(--nox-yellow); border-color: rgba(181,154,58,0.25); }
.nox-tag.is-blue   { background: rgba(59,130,166,0.12); color: var(--nox-blue); border-color: rgba(59,130,166,0.25); }
.nox-tag.is-solid  { background: var(--nox-ink); color: var(--nox-bg); border-color: var(--nox-ink); }
.nox-tag.is-rounded { border-radius: 100px; padding-left: 10px; padding-right: 10px; }
.nox-tag.is-sm { font-size: 9px; padding: 2px 6px; letter-spacing: 0.08em; }
.nox-tag.is-lg { font-size: 11px; padding: 5px 10px; }

.nox-tag-close {
  background: transparent;
  border: 0;
  color: currentColor;
  opacity: 0.5;
  padding: 0;
  margin-left: 2px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}
.nox-tag-close:hover { opacity: 1; }

/* ───────────────────────────────────────────────────────────────────────
   15 · DIVIDER VARIANTS
   ─────────────────────────────────────────────────────────────────────── */

.nox-divider {
  height: 1px;
  background: var(--nox-line);
  margin: 24px 0;
  border: 0;
}
.nox-divider-dashed { background: transparent; border-top: 1px dashed var(--nox-line); }
.nox-divider-dotted { background: transparent; border-top: 1px dotted var(--nox-line); }
.nox-divider-thick  { height: 2px; background: var(--nox-line); }
.nox-divider-accent { height: 2px; background: var(--nox-accent); }

.nox-divider-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0;
  font-family: var(--nox-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--nox-ink-4);
}
.nox-divider-label::before,
.nox-divider-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--nox-line);
}

/* ───────────────────────────────────────────────────────────────────────
   16 · AVATAR GROUP (stacked)
   ─────────────────────────────────────────────────────────────────────── */

.nox-avatar-group {
  display: inline-flex;
  align-items: center;
}
.nox-avatar-group > * {
  margin-left: -8px;
  border: 2px solid var(--nox-bg);
  position: relative;
  z-index: 1;
  transition: transform 0.15s;
}
.nox-avatar-group > *:first-child { margin-left: 0; }
.nox-avatar-group > *:hover {
  transform: translateY(-2px);
  z-index: 2;
}
.nox-avatar-group-more {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--nox-bg-3);
  color: var(--nox-ink-3);
  border: 2px solid var(--nox-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--nox-font-mono);
  font-size: 10px;
  font-weight: 700;
  margin-left: -8px;
}

/* ───────────────────────────────────────────────────────────────────────
   17 · STATUS DOT (online / offline / away / busy)
   ─────────────────────────────────────────────────────────────────────── */

.nox-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nox-ink-4);
  flex-shrink: 0;
}
.nox-status-dot.is-online  { background: var(--nox-green); box-shadow: 0 0 0 2px rgba(58,138,92,0.25); }
.nox-status-dot.is-busy    { background: var(--nox-red); box-shadow: 0 0 0 2px rgba(181,69,58,0.25); }
.nox-status-dot.is-away    { background: var(--nox-yellow); box-shadow: 0 0 0 2px rgba(181,154,58,0.25); }
.nox-status-dot.is-offline { background: var(--nox-ink-4); box-shadow: 0 0 0 2px rgba(180,180,180,0.12); }
.nox-status-dot.is-pulse   { animation: nox-pulse 2s infinite; }

.nox-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: 100px;
  font-family: var(--nox-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nox-ink-3);
}
.nox-status-chip.is-online  { color: var(--nox-green); }
.nox-status-chip.is-busy    { color: var(--nox-red); }
.nox-status-chip.is-away    { color: var(--nox-yellow); }
.nox-status-chip.is-offline { color: var(--nox-ink-4); }

/* ───────────────────────────────────────────────────────────────────────
   18 · CHART COMPONENTS (donut, line, area)
   ─────────────────────────────────────────────────────────────────────── */

/* Donut chart — pure CSS */
.nox-donut {
  --pct: 75%;
  --donut-size: 120px;
  --thick: 14px;
  --donut-color: var(--nox-accent);
  width: var(--donut-size);
  height: var(--donut-size);
  border-radius: 50%;
  background: conic-gradient(var(--donut-color) var(--pct), var(--nox-bg-3) 0);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nox-donut::before {
  content: '';
  position: absolute;
  inset: var(--thick);
  background: var(--nox-bg);
  border-radius: 50%;
}
.nox-donut-val {
  position: relative;
  z-index: 1;
  font-family: var(--nox-font-display);
  font-size: calc(var(--donut-size) * 0.2);
  font-weight: 800;
  color: var(--nox-ink);
  letter-spacing: -0.02em;
}
.nox-donut-label {
  position: relative;
  z-index: 1;
  font-family: var(--nox-font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--nox-ink-4);
  text-align: center;
}

/* Area/line chart (svg preferred but css-only fallback) */
.nox-area-chart {
  position: relative;
  height: 120px;
  background:
    linear-gradient(to top, var(--nox-bg-3) 1px, transparent 1px) 0 25% / 100% 25%,
    linear-gradient(to top, var(--nox-bg-3) 1px, transparent 1px) 0 50% / 100% 25%,
    linear-gradient(to top, var(--nox-bg-3) 1px, transparent 1px) 0 75% / 100% 25%;
  border-bottom: 1px solid var(--nox-line);
  border-left: 1px solid var(--nox-line);
  padding: 8px 0 0;
}

/* ───────────────────────────────────────────────────────────────────────
   19 · PROGRESS BAR VARIANTS
   ─────────────────────────────────────────────────────────────────────── */

.nox-progress {
  display: block;
  height: 6px;
  background: var(--nox-bg-3);
  border-radius: 100px;
  overflow: hidden;
  position: relative;
}
.nox-progress-fill {
  height: 100%;
  background: var(--nox-accent);
  border-radius: 100px;
  width: var(--val, 50%);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.nox-progress.is-sm { height: 4px; }
.nox-progress.is-lg { height: 10px; }
.nox-progress.is-striped .nox-progress-fill {
  background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%);
  background-size: 12px 12px;
}
.nox-progress.is-animated .nox-progress-fill {
  animation: nox-progress-stripes 0.8s linear infinite;
}
@keyframes nox-progress-stripes { to { background-position: 12px 0; } }

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

/* Progress with label above */
.nox-progress-labeled { margin: 8px 0; }
.nox-progress-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-family: var(--nox-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nox-ink-3);
}
.nox-progress-label-row strong { color: var(--nox-ink); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════
   END nox-motion.css
   ═══════════════════════════════════════════════════════════════════════ */