/* ═══════════════════════════════════════════════════════════════════════════
   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);
  transition: border-color var(--nox-ease);
  /* overflow:visible so chart hover labels & tooltips show.
     Use .nox-card-clip modifier when you need overflow:hidden. */
}

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

/* Opt-in clipping for cards with edge-bleed children (rare) */
.nox-card-clip { overflow: hidden; }

.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 removed (L1) — identical canonical copy lives in nox-tokens.css. */
.nox-btn-xs { padding: 3px 8px; font-size: 9px; letter-spacing: 0.05em; }
.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);
  /* min 140px per row → .nox-row-2 = 280px (fits 5-stage funnels with card-head) */
  grid-auto-rows: minmax(140px, 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 base/label/track/fill are CANONICAL in nox-premium.css (C2).
   The dashboard duplicate was removed; premium loads later and won anyway.
   The dashboard-only color helpers (.nox-bar-h-fill.green/.red/.blue/.yellow/.purple),
   the .nox-bar-h-val class, and the in-fill text display used by nox-layout-topnav.html
   and nox-layout-analytics.html were consolidated into nox-premium.css next to .nox-bar-h. */

/* ─── 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 is CANONICAL in nox-premium.css (C3). Premium loads later and won;
   its .nox-gauge supports BOTH --pct (e.g. 78%) AND --val (unitless 0–100, via
   --pct:calc(var(--val)*1%)) plus --gauge-size for sizing, so all existing
   markup (both --val and --pct dashboards) keeps working. The dashboard
   duplicate (.nox-gauge/-label/-val plus the unused .nox-gauge-sub and
   .nox-gauge-multi, neither referenced by any HTML) was removed here. */

/* ─── 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 and .nox-tag-remove are CANONICAL in nox-motion.css (C4) — the
   mono/uppercase chip is the intended look and motion loads last. The dashboard
   .nox-tag base + .nox-tag-remove duplicates were removed; .nox-tag-remove now
   lives once in nox-motion.css next to .nox-tag. */

.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 ─── */
/* C4 — this duplicate tag-input/.nox-tag/.nox-tag-remove block was removed.
   .nox-tag-input (+ its input) is defined once earlier in this file; the
   .nox-tag chip and .nox-tag-remove close button are canonical in
   nox-motion.css (mono/uppercase look, loads last). */


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

/* ════════════════════════════════════════════════════════════════════════
   RIBBON SYSTEM
   Inline pills, diagonal corner ribbons, and full-width strips for
   flagging cards/widgets ("New", "Pro", "Beta", "Sold out", etc.).
   Color modifiers: .is-accent / .is-green / .is-red / .is-yellow.
   ════════════════════════════════════════════════════════════════════════ */

/* Host: parent that ribbons (corner/strip) anchor against. Add to any
   .nox-card or container that should carry an absolutely-positioned ribbon.
   overflow:hidden clips the corner ribbon's tails neatly to the card edge. */
.nox-ribbon-host {
  position: relative;
  overflow: hidden;
}

/* ── Inline pill ribbon ──
   Drops into a header/title row; flows with content (no positioning). */
.nox-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--nox-font-mono);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 4px 9px;
  border-radius: 3px;
  white-space: nowrap;
  background: var(--nox-bg-4);
  color: var(--nox-ink-2);
  border: 1px solid var(--nox-line);
}

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

/* ── Diagonal corner ribbon ──
   A 45° banner pinned to a card corner. Requires an ancestor with
   .nox-ribbon-host (position:relative; overflow:hidden). The element is a
   square overflow box; the inner band is rotated and over-wide so its ends
   bleed past the card edge for a clean printed-ribbon look. */
.nox-ribbon-corner {
  position: absolute;
  top: 0;
  width: 96px;
  height: 96px;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
}
.nox-ribbon-corner > span,
.nox-ribbon-corner b {
  position: absolute;
  display: block;
  width: 150%;
  padding: 5px 0;
  font-family: var(--nox-font-mono);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  text-align: center;
  color: var(--nox-bg-0);
  background: var(--nox-accent);
  box-shadow: var(--nox-shadow-sm);
  pointer-events: auto;
}

.nox-ribbon-corner.top-right { right: 0; }
.nox-ribbon-corner.top-right > span,
.nox-ribbon-corner.top-right b {
  top: 18px;
  right: -38px;
  transform: rotate(45deg);
}

.nox-ribbon-corner.top-left { left: 0; }
.nox-ribbon-corner.top-left > span,
.nox-ribbon-corner.top-left b {
  top: 18px;
  left: -38px;
  transform: rotate(-45deg);
}

/* Corner ribbon color modifiers (applied to the .nox-ribbon-corner element) */
.nox-ribbon-corner.is-accent > span, .nox-ribbon-corner.is-accent b {
  background: var(--nox-accent); color: var(--nox-bg-0);
}
.nox-ribbon-corner.is-green > span, .nox-ribbon-corner.is-green b {
  background: var(--nox-green); color: #ffffff;
}
.nox-ribbon-corner.is-red > span, .nox-ribbon-corner.is-red b {
  background: var(--nox-red); color: #ffffff;
}
.nox-ribbon-corner.is-yellow > span, .nox-ribbon-corner.is-yellow b {
  background: var(--nox-yellow); color: var(--nox-bg-0);
}

/* ── Full-width strip ribbon ──
   A horizontal banner that spans the top of a host (e.g. a "Featured" or
   "Recommended" bar across a card). Pins to the top edge of a ribbon-host. */
.nox-ribbon-strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px var(--nox-3);
  font-family: var(--nox-font-mono);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  text-align: center;
  background: var(--nox-bg-4);
  color: var(--nox-ink-2);
  border-bottom: 1px solid var(--nox-line);
  z-index: 4;
}

.nox-ribbon-strip.is-accent {
  background: var(--nox-accent); color: var(--nox-bg-0);
  border-bottom-color: transparent;
}
.nox-ribbon-strip.is-green {
  background: var(--nox-green); color: #ffffff;
  border-bottom-color: transparent;
}
.nox-ribbon-strip.is-red {
  background: var(--nox-red); color: #ffffff;
  border-bottom-color: transparent;
}
.nox-ribbon-strip.is-yellow {
  background: var(--nox-yellow); color: var(--nox-bg-0);
  border-bottom-color: transparent;
}

/* ════════════════════════════════════════════════════════════════════════
   GUIDED TOUR / COACHMARK
   Floating onboarding cards with directional arrows, a step counter, and a
   dimming spotlight overlay that cuts a transparent hole around the target.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Coachmark card ──
   A small floating popover; position it (top/left/transform) inline or via
   utilities relative to the element it explains. Sits above the spotlight. */
.nox-coachmark {
  position: absolute;
  z-index: 10001;
  width: 280px;
  max-width: calc(100vw - 32px);
  padding: var(--nox-4);
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: 10px;
  box-shadow: var(--nox-shadow-xl);
  color: var(--nox-ink);
  font-family: var(--nox-font-body);
}

.nox-coachmark-title {
  font-family: var(--nox-font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--nox-ink);
  margin: 0 0 var(--nox-2);
  letter-spacing: 0.2px;
}

.nox-coachmark-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--nox-ink-2);
  margin: 0;
}

.nox-coachmark-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nox-3);
  margin-top: var(--nox-4);
  padding-top: var(--nox-3);
  border-top: 1px solid var(--nox-line-2);
}

.nox-coachmark-step {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--nox-ink-3);
  white-space: nowrap;
}

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

/* ── Coachmark arrow ──
   A small diamond pointing toward the target. Border halves recreate the
   card's border on the visible edges so the pointer reads as part of the card.
   Position modifiers set which edge the arrow protrudes from. */
.nox-coachmark::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--nox-bg-2);
  transform: rotate(45deg);
}

.nox-coachmark.arrow-top::after {
  top: -7px;
  left: 24px;
  border-top: 1px solid var(--nox-line);
  border-left: 1px solid var(--nox-line);
}
.nox-coachmark.arrow-bottom::after {
  bottom: -7px;
  left: 24px;
  border-bottom: 1px solid var(--nox-line);
  border-right: 1px solid var(--nox-line);
}
.nox-coachmark.arrow-left::after {
  left: -7px;
  top: 24px;
  border-bottom: 1px solid var(--nox-line);
  border-left: 1px solid var(--nox-line);
}
.nox-coachmark.arrow-right::after {
  right: -7px;
  top: 24px;
  border-top: 1px solid var(--nox-line);
  border-right: 1px solid var(--nox-line);
}

/* ── Tour spotlight overlay ──
   Dims the whole viewport while leaving the highlighted element visible.
   The "hole" is created with a huge spread box-shadow on a positioned box:
   size/position the .nox-tour-spotlight to match the target's bounding rect
   (e.g. via JS setting top/left/width/height), and the surrounding area is
   dimmed by the shadow. The box itself stays transparent (the cutout). */
.nox-tour-spotlight {
  position: fixed;
  z-index: 10000;
  border-radius: 8px;
  background: transparent;
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.62);
  transition: top var(--nox-ease-slow), left var(--nox-ease-slow),
              width var(--nox-ease-slow), height var(--nox-ease-slow);
}

/* Subtle accent ring around the cutout to draw the eye to the target. */
.nox-tour-spotlight::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 10px;
  border: 1px solid var(--nox-accent-g);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .nox-tour-spotlight { transition: none; }
}