/* ═══════════════════════════════════════════════════════════════════════
   NOX MOTION & EXTRAS
   Animation library + commonly-needed components that weren't yet built.

   Contents:
     1. Keyframe animations
     2. Animation utility classes
     3. Hover effect presets
     4. Transition utilities
     5. Loading states (spinner, bar, skeleton, shimmer)
     6. Empty states
     7. Alert banners
     8. Breadcrumbs (extra variants)
     9. Rating / stars
    10. File upload / drop zone
    11. Stepper / wizard
    12. Code blocks / terminal
    13. Toggle group (segmented control)
    14. Tooltips
    15. Tag / label variants
    16. Divider variants
    17. Avatar group (stacked)
    18. Status dot (online / offline / away / busy)
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────
   1 · KEYFRAMES
   ─────────────────────────────────────────────────────────────────────── */

@keyframes nox-fade-in       { from { opacity: 0; } to { opacity: 1; } }
@keyframes nox-fade-out      { from { opacity: 1; } to { opacity: 0; } }
@keyframes nox-slide-up      { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes nox-slide-down    { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes nox-slide-left    { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes nox-slide-right   { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes nox-zoom-in       { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
@keyframes nox-zoom-out      { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: scale(1); } }
@keyframes nox-bounce-in     { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(0.97); } 100% { transform: scale(1); } }

@keyframes nox-spin          { to { transform: rotate(360deg); } }
@keyframes nox-pulse         { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes nox-ping          { 75%, 100% { transform: scale(2); opacity: 0; } }
@keyframes nox-bounce        { 0%, 100% { transform: translateY(-6px); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } }
@keyframes nox-shake         { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); } 20%, 40%, 60%, 80% { transform: translateX(4px); } }
@keyframes nox-wiggle        { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

@keyframes nox-shimmer       { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes nox-loading-bar   { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } }

@keyframes nox-flip-in       { from { opacity: 0; transform: perspective(800px) rotateY(-40deg); } to { opacity: 1; transform: perspective(800px) rotateY(0); } }
@keyframes nox-rotate-in     { from { opacity: 0; transform: rotate(-180deg) scale(0.5); } to { opacity: 1; transform: rotate(0) scale(1); } }
@keyframes nox-swing         { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0); } }

/* ───────────────────────────────────────────────────────────────────────
   2 · ANIMATION UTILITY CLASSES
   Apply directly to any element. Default duration: 400ms.
   ─────────────────────────────────────────────────────────────────────── */

.nox-anim-fade-in      { animation: nox-fade-in 0.4s ease-out both; }
.nox-anim-fade-out     { animation: nox-fade-out 0.25s ease-in both; }
.nox-anim-slide-up     { animation: nox-slide-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nox-anim-slide-down   { animation: nox-slide-down 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nox-anim-slide-left   { animation: nox-slide-left 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nox-anim-slide-right  { animation: nox-slide-right 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nox-anim-zoom-in      { animation: nox-zoom-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nox-anim-zoom-out     { animation: nox-zoom-out 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nox-anim-bounce-in    { animation: nox-bounce-in 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) both; }
.nox-anim-flip-in      { animation: nox-flip-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nox-anim-rotate-in    { animation: nox-rotate-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }

.nox-anim-spin         { animation: nox-spin 1s linear infinite; }
.nox-anim-pulse        { animation: nox-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.nox-anim-ping         { animation: nox-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }
.nox-anim-bounce       { animation: nox-bounce 1s infinite; }
.nox-anim-shake        { animation: nox-shake 0.5s ease-in-out; }
.nox-anim-wiggle       { animation: nox-wiggle 0.8s ease-in-out infinite; }
.nox-anim-swing        { animation: nox-swing 1s ease-in-out infinite; transform-origin: top center; }

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

/* Duration modifiers */
.nox-dur-100  { animation-duration: 100ms; transition-duration: 100ms; }
.nox-dur-150  { animation-duration: 150ms; transition-duration: 150ms; }
.nox-dur-200  { animation-duration: 200ms; transition-duration: 200ms; }
.nox-dur-300  { animation-duration: 300ms; transition-duration: 300ms; }
.nox-dur-500  { animation-duration: 500ms; transition-duration: 500ms; }
.nox-dur-700  { animation-duration: 700ms; transition-duration: 700ms; }
.nox-dur-1000 { animation-duration: 1000ms; transition-duration: 1000ms; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ───────────────────────────────────────────────────────────────────────
   3 · HOVER EFFECT PRESETS
   Add to any element. They compose well with other classes.
   ─────────────────────────────────────────────────────────────────────── */

.nox-hover-lift {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
}
.nox-hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--nox-shadow-lg);
}

.nox-hover-grow {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.nox-hover-grow:hover { transform: scale(1.04); }

.nox-hover-shrink {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.nox-hover-shrink:hover { transform: scale(0.96); }

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

.nox-hover-slide {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.nox-hover-slide:hover { transform: translateX(4px); }

.nox-hover-underline {
  position: relative;
  background-image: linear-gradient(to right, currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.nox-hover-underline:hover { background-size: 100% 1px; }

.nox-hover-brighten {
  transition: filter 0.2s ease;
}
.nox-hover-brighten:hover { filter: brightness(1.15); }

.nox-hover-fade {
  transition: opacity 0.2s ease;
}
.nox-hover-fade:hover { opacity: 0.7; }

/* ───────────────────────────────────────────────────────────────────────
   4 · LOADING STATES
   ─────────────────────────────────────────────────────────────────────── */

/* Spinner — simple circle */
.nox-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid var(--nox-line);
  border-top-color: var(--nox-accent);
  border-radius: 50%;
  animation: nox-spin 0.8s linear infinite;
  flex-shrink: 0;
}
.nox-spinner.is-sm { width: 14px; height: 14px; border-width: 1.5px; }
.nox-spinner.is-lg { width: 32px; height: 32px; border-width: 3px; }
.nox-spinner.is-xl { width: 48px; height: 48px; border-width: 4px; }

/* Dot spinner — 3 bouncing dots */
.nox-spinner-dots {
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  height: 20px;
}
.nox-spinner-dots span {
  width: 6px;
  height: 6px;
  background: var(--nox-accent);
  border-radius: 50%;
  animation: nox-bounce 1s infinite;
}
.nox-spinner-dots span:nth-child(2) { animation-delay: 0.12s; }
.nox-spinner-dots span:nth-child(3) { animation-delay: 0.24s; }

/* Loading bar — top-of-page style */
.nox-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--nox-accent), transparent);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  z-index: 9999;
  animation: nox-loading-bar 1.2s ease-in-out infinite;
}

/* Skeleton loaders */
.nox-skeleton {
  display: block;
  background: linear-gradient(90deg, var(--nox-bg-2) 0%, var(--nox-bg-3) 40%, var(--nox-bg-2) 80%);
  background-size: 200% 100%;
  animation: nox-shimmer 1.4s linear infinite;
  border-radius: 6px;
}
.nox-skeleton-text     { height: 12px; margin: 6px 0; }
.nox-skeleton-title    { height: 24px; width: 60%; margin: 8px 0; }
.nox-skeleton-avatar   { width: 40px; height: 40px; border-radius: 50%; }
.nox-skeleton-avatar-lg{ width: 64px; height: 64px; border-radius: 50%; }
.nox-skeleton-card     { height: 140px; border-radius: 10px; }
.nox-skeleton-button   { height: 36px; width: 100px; border-radius: 6px; }

/* Full-screen loader */
.nox-loader-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: nox-fade-in 0.2s ease;
}
.nox-loader-overlay-text {
  margin-left: 14px;
  font-family: var(--nox-font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--nox-ink-3);
}

/* ───────────────────────────────────────────────────────────────────────
   5 · EMPTY STATES
   Use with icons: <div class="nox-empty"><span class="nox-icon nox-icon-2xl nox-i-folder"></span>...
   ─────────────────────────────────────────────────────────────────────── */

.nox-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  min-height: 280px;
  background: var(--nox-bg-1);
  border: 1px dashed var(--nox-line);
  border-radius: 12px;
}
.nox-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--nox-bg-3);
  color: var(--nox-ink-4);
  margin-bottom: 20px;
}
.nox-empty-icon .nox-icon { width: 32px; height: 32px; }
.nox-empty-icon.is-accent { background: var(--nox-accent-s); color: var(--nox-accent); border: 1px solid var(--nox-accent-g); }
.nox-empty-icon.is-green  { background: rgba(58,138,92,0.12); color: var(--nox-green); border: 1px solid rgba(58,138,92,0.25); }
.nox-empty-icon.is-red    { background: rgba(181,69,58,0.12); color: var(--nox-red); border: 1px solid rgba(181,69,58,0.25); }

.nox-empty-title {
  font-family: var(--nox-font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--nox-ink);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.nox-empty-desc {
  font-size: 14px;
  color: var(--nox-ink-3);
  line-height: 1.55;
  max-width: 380px;
  margin: 0 0 20px;
}
.nox-empty-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Compact inline empty */
.nox-empty-inline {
  padding: 28px 20px;
  min-height: 0;
  border-style: solid;
  border-radius: 8px;
}
.nox-empty-inline .nox-empty-icon { width: 48px; height: 48px; margin-bottom: 12px; }
.nox-empty-inline .nox-empty-icon .nox-icon { width: 20px; height: 20px; }
.nox-empty-inline .nox-empty-title { font-size: 15px; }
.nox-empty-inline .nox-empty-desc  { font-size: 13px; max-width: 320px; }

/* ───────────────────────────────────────────────────────────────────────
   6 · ALERT BANNERS
   ─────────────────────────────────────────────────────────────────────── */

.nox-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-left: 3px solid var(--nox-ink-4);
  border-radius: 8px;
  margin: 14px 0;
}
.nox-alert-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--nox-ink-3);
  margin-top: 2px;
}
.nox-alert-body { flex: 1; min-width: 0; }
.nox-alert-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--nox-ink);
  margin: 0 0 2px;
}
.nox-alert-desc {
  font-size: 13px;
  color: var(--nox-ink-2);
  line-height: 1.55;
  margin: 0;
}
.nox-alert-close {
  background: transparent;
  border: 0;
  color: var(--nox-ink-4);
  font-size: 16px;
  cursor: pointer;
  padding: 2px;
  line-height: 1;
  flex-shrink: 0;
}
.nox-alert-close:hover { color: var(--nox-ink); }

.nox-alert.is-info    { background: rgba(59,130,166,0.08); border-color: rgba(59,130,166,0.25); border-left-color: var(--nox-blue); }
.nox-alert.is-info .nox-alert-icon { color: var(--nox-blue); }
.nox-alert.is-success { background: rgba(58,138,92,0.08); border-color: rgba(58,138,92,0.25); border-left-color: var(--nox-green); }
.nox-alert.is-success .nox-alert-icon { color: var(--nox-green); }
.nox-alert.is-warning { background: rgba(181,154,58,0.08); border-color: rgba(181,154,58,0.25); border-left-color: var(--nox-yellow); }
.nox-alert.is-warning .nox-alert-icon { color: var(--nox-yellow); }
.nox-alert.is-error   { background: rgba(181,69,58,0.08); border-color: rgba(181,69,58,0.25); border-left-color: var(--nox-red); }
.nox-alert.is-error .nox-alert-icon { color: var(--nox-red); }
.nox-alert.is-accent  { background: var(--nox-accent-s); border-color: var(--nox-accent-g); border-left-color: var(--nox-accent); }
.nox-alert.is-accent .nox-alert-icon { color: var(--nox-accent); }

/* Toast (floating alert) */
.nox-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  min-width: 280px;
  max-width: 480px;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: var(--nox-shadow-xl);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  animation: nox-slide-left 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.nox-toast.is-success { border-left: 3px solid var(--nox-green); }
.nox-toast.is-error   { border-left: 3px solid var(--nox-red); }
.nox-toast.is-warning { border-left: 3px solid var(--nox-yellow); }
.nox-toast.is-info    { border-left: 3px solid var(--nox-blue); }

/* ───────────────────────────────────────────────────────────────────────
   7 · BREADCRUMBS (extra variants)
   ─────────────────────────────────────────────────────────────────────── */

.nox-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--nox-font-mono);
  font-size: 11px;
  color: var(--nox-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 8px 0;
}
.nox-breadcrumb a {
  color: var(--nox-ink-3);
  text-decoration: none;
  transition: color 0.1s;
}
.nox-breadcrumb a:hover { color: var(--nox-accent); }
.nox-breadcrumb .sep {
  color: var(--nox-ink-4);
  opacity: 0.5;
}
.nox-breadcrumb > *:last-child { color: var(--nox-ink); }

/* ───────────────────────────────────────────────────────────────────────
   8 · RATING / STARS
   ─────────────────────────────────────────────────────────────────────── */

.nox-rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--nox-yellow);
}
.nox-rating .nox-icon { width: 16px; height: 16px; }
.nox-rating .is-empty { color: var(--nox-ink-4); opacity: 0.4; }
.nox-rating-label {
  font-family: var(--nox-font-mono);
  font-size: 11px;
  color: var(--nox-ink-3);
  margin-left: 8px;
  letter-spacing: 0.05em;
}

/* ───────────────────────────────────────────────────────────────────────
   9 · FILE UPLOAD / DROP ZONE
   ─────────────────────────────────────────────────────────────────────── */

.nox-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 24px;
  background: var(--nox-bg-1);
  border: 2px dashed var(--nox-line);
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
}
.nox-dropzone:hover {
  border-color: var(--nox-accent);
  background: var(--nox-accent-s);
}
.nox-dropzone.is-dragging {
  border-color: var(--nox-accent);
  background: var(--nox-accent-s);
  transform: scale(1.01);
}
.nox-dropzone-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nox-ink-4);
}
.nox-dropzone-icon .nox-icon { width: 32px; height: 32px; }
.nox-dropzone:hover .nox-dropzone-icon { color: var(--nox-accent); }
.nox-dropzone-title {
  font-family: var(--nox-font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--nox-ink);
}
.nox-dropzone-hint {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--nox-ink-4);
}

/* File list (uploaded files) */
.nox-file-list { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; }
.nox-file-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: 6px;
}
.nox-file-item-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--nox-bg-3);
  border-radius: 6px;
  color: var(--nox-ink-3);
  flex-shrink: 0;
}
.nox-file-item-body { flex: 1; min-width: 0; }
.nox-file-item-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--nox-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nox-file-item-meta {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  color: var(--nox-ink-4);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ───────────────────────────────────────────────────────────────────────
   10 · STEPPER / WIZARD
   ─────────────────────────────────────────────────────────────────────── */

.nox-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0;
  width: 100%;
}
.nox-step {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.nox-step-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--nox-line);
  background: var(--nox-bg-2);
  color: var(--nox-ink-4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--nox-font-mono);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  transition: all 0.2s;
}
.nox-step-label {
  font-family: var(--nox-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--nox-ink-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nox-step-connector {
  flex: 1;
  height: 2px;
  background: var(--nox-line);
  min-width: 24px;
}
.nox-step.is-done .nox-step-dot { background: var(--nox-accent); border-color: var(--nox-accent); color: #000; }
.nox-step.is-done .nox-step-label { color: var(--nox-ink-3); }
.nox-step.is-done + .nox-step-connector { background: var(--nox-accent); }
.nox-step.is-active .nox-step-dot {
  border-color: var(--nox-accent);
  background: var(--nox-accent-s);
  color: var(--nox-accent);
  box-shadow: 0 0 0 4px var(--nox-accent-s);
}
.nox-step.is-active .nox-step-label { color: var(--nox-ink); font-weight: 700; }

/* Vertical variant */
.nox-stepper-v {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 14px 0;
}
.nox-stepper-v .nox-step {
  position: relative;
  padding-bottom: 32px;
  padding-left: 0;
  flex: unset;
}
.nox-stepper-v .nox-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 28px;
  bottom: 8px;
  width: 2px;
  background: var(--nox-line);
}
.nox-stepper-v .nox-step.is-done:not(:last-child)::before { background: var(--nox-accent); }
.nox-stepper-v .nox-step-body {
  margin-left: 8px;
  padding-top: 2px;
}
.nox-stepper-v .nox-step-title {
  font-family: var(--nox-font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--nox-ink);
  margin-bottom: 4px;
}
.nox-stepper-v .nox-step-desc {
  font-size: 12px;
  color: var(--nox-ink-3);
  line-height: 1.5;
}

/* ───────────────────────────────────────────────────────────────────────
   11 · CODE BLOCKS / TERMINAL
   ─────────────────────────────────────────────────────────────────────── */

.nox-code {
  display: block;
  background: var(--nox-bg-1);
  border: 1px solid var(--nox-line);
  border-radius: 8px;
  padding: 16px 18px;
  font-family: var(--nox-font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--nox-ink-2);
  overflow-x: auto;
  white-space: pre;
  margin: 12px 0;
}
.nox-code-inline {
  font-family: var(--nox-font-mono);
  font-size: 0.88em;
  background: var(--nox-bg-2);
  color: var(--nox-accent);
  border: 1px solid var(--nox-line);
  padding: 1px 6px;
  border-radius: 4px;
}

/* Terminal output */
.nox-terminal {
  background: #0a0a0a;
  border: 1px solid var(--nox-line);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  font-family: var(--nox-font-mono);
  margin: 14px 0;
}
.nox-terminal-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #111;
  border-bottom: 1px solid var(--nox-line);
}
.nox-terminal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #555;
}
.nox-terminal-dot.is-red    { background: #ff5f56; }
.nox-terminal-dot.is-yellow { background: #ffbd2e; }
.nox-terminal-dot.is-green  { background: #27c93f; }
.nox-terminal-title {
  margin-left: auto;
  font-size: 11px;
  color: #888;
  letter-spacing: 0.05em;
}
.nox-terminal-body {
  padding: 16px 18px;
  font-size: 12px;
  line-height: 1.65;
  color: #c0c0c0;
  overflow-x: auto;
}
.nox-terminal-prompt { color: #27c93f; margin-right: 8px; }
.nox-terminal-cmd    { color: #e0e0e0; }
.nox-terminal-out    { color: #888; }
.nox-terminal-err    { color: #ff5f56; }
.nox-terminal-ok     { color: #27c93f; }

/* Diff / change view */
.nox-diff {
  display: block;
  background: var(--nox-bg-1);
  border: 1px solid var(--nox-line);
  border-radius: 8px;
  overflow: hidden;
  font-family: var(--nox-font-mono);
  font-size: 12px;
  line-height: 1.55;
  margin: 14px 0;
}
.nox-diff-line { padding: 3px 16px; white-space: pre; display: block; }
.nox-diff-line.is-add { background: rgba(58,138,92,0.12); color: var(--nox-green); }
.nox-diff-line.is-del { background: rgba(181,69,58,0.12); color: var(--nox-red); }
.nox-diff-line.is-ctx { color: var(--nox-ink-3); }

/* ───────────────────────────────────────────────────────────────────────
   12 · TOGGLE GROUP / SEGMENTED CONTROL
   ─────────────────────────────────────────────────────────────────────── */

.nox-toggle-group {
  display: inline-flex;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.nox-toggle-group button {
  padding: 6px 14px;
  font-family: var(--nox-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: var(--nox-ink-3);
  cursor: pointer;
  transition: all 0.1s;
}
.nox-toggle-group button:hover { color: var(--nox-ink); }
.nox-toggle-group button.is-active {
  background: var(--nox-bg);
  color: var(--nox-ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  font-weight: 700;
}

/* ───────────────────────────────────────────────────────────────────────
   13 · TOOLTIPS
   Use data-tooltip attribute. Position via modifier.
   ─────────────────────────────────────────────────────────────────────── */

[data-nox-tooltip] {
  position: relative;
}
[data-nox-tooltip]::before {
  content: attr(data-nox-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--nox-bg-3);
  color: var(--nox-ink);
  font-family: var(--nox-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: all 0.15s;
  border: 1px solid var(--nox-line);
  box-shadow: var(--nox-shadow-md);
  z-index: 10;
}
[data-nox-tooltip]::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 4px solid transparent;
  border-top-color: var(--nox-bg-3);
  pointer-events: none;
  opacity: 0;
  transition: all 0.15s;
  z-index: 10;
}
[data-nox-tooltip]:hover::before,
[data-nox-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

[data-nox-tooltip-pos="bottom"]::before { top: calc(100% + 6px); bottom: auto; transform: translateX(-50%) translateY(-4px); }
[data-nox-tooltip-pos="bottom"]::after  { top: calc(100% + 2px); bottom: auto; border-top-color: transparent; border-bottom-color: var(--nox-bg-3); transform: translateX(-50%) translateY(-4px); }
[data-nox-tooltip-pos="bottom"]:hover::before,
[data-nox-tooltip-pos="bottom"]:hover::after { transform: translateX(-50%) translateY(0); }

/* ───────────────────────────────────────────────────────────────────────
   14 · TAG / LABEL VARIANTS
   ─────────────────────────────────────────────────────────────────────── */

.nox-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-family: var(--nox-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--nox-bg-3);
  color: var(--nox-ink-2);
  border: 1px solid var(--nox-line);
  border-radius: 4px;
  font-weight: 600;
  line-height: 1.3;
}
.nox-tag.is-accent { background: var(--nox-accent-s); color: var(--nox-accent); border-color: var(--nox-accent-g); }
.nox-tag.is-green  { background: rgba(58,138,92,0.12); color: var(--nox-green); border-color: rgba(58,138,92,0.25); }
.nox-tag.is-red    { background: rgba(181,69,58,0.12); color: var(--nox-red); border-color: rgba(181,69,58,0.25); }
.nox-tag.is-yellow { background: rgba(181,154,58,0.12); color: var(--nox-yellow); border-color: rgba(181,154,58,0.25); }
.nox-tag.is-blue   { background: rgba(59,130,166,0.12); color: var(--nox-blue); border-color: rgba(59,130,166,0.25); }
.nox-tag.is-solid  { background: var(--nox-ink); color: var(--nox-bg); border-color: var(--nox-ink); }
.nox-tag.is-rounded { border-radius: 100px; padding-left: 10px; padding-right: 10px; }
.nox-tag.is-sm { font-size: 9px; padding: 2px 6px; letter-spacing: 0.08em; }
.nox-tag.is-lg { font-size: 11px; padding: 5px 10px; }

.nox-tag-close {
  background: transparent;
  border: 0;
  color: currentColor;
  opacity: 0.5;
  padding: 0;
  margin-left: 2px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}
.nox-tag-close:hover { opacity: 1; }

/* C4 — .nox-tag-remove consolidated here (was duplicated in nox-dashboard.css).
   Circular close button used inside .nox-tag chips / .nox-tag-input. */
.nox-tag-remove {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--nox-ink-4);
  font-size: 10px;
  cursor: pointer;
  transition: all 0.12s;
  line-height: 1;
  padding: 0;
}
.nox-tag-remove:hover {
  background: var(--nox-bg-5);
  color: var(--nox-ink);
}

/* ───────────────────────────────────────────────────────────────────────
   15 · DIVIDER VARIANTS
   ─────────────────────────────────────────────────────────────────────── */

.nox-divider {
  height: 1px;
  background: var(--nox-line);
  margin: 24px 0;
  border: 0;
}
.nox-divider-dashed { background: transparent; border-top: 1px dashed var(--nox-line); }
.nox-divider-dotted { background: transparent; border-top: 1px dotted var(--nox-line); }
.nox-divider-thick  { height: 2px; background: var(--nox-line); }
.nox-divider-accent { height: 2px; background: var(--nox-accent); }

.nox-divider-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 28px 0;
  font-family: var(--nox-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--nox-ink-4);
}
.nox-divider-label::before,
.nox-divider-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--nox-line);
}

/* ───────────────────────────────────────────────────────────────────────
   16 · AVATAR GROUP (stacked)
   ─────────────────────────────────────────────────────────────────────── */

.nox-avatar-group {
  display: inline-flex;
  align-items: center;
}
.nox-avatar-group > * {
  margin-left: -8px;
  border: 2px solid var(--nox-bg);
  position: relative;
  z-index: 1;
  transition: transform 0.15s;
}
.nox-avatar-group > *:first-child { margin-left: 0; }
.nox-avatar-group > *:hover {
  transform: translateY(-2px);
  z-index: 2;
}
.nox-avatar-group-more {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--nox-bg-3);
  color: var(--nox-ink-3);
  border: 2px solid var(--nox-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--nox-font-mono);
  font-size: 10px;
  font-weight: 700;
  margin-left: -8px;
}

/* ───────────────────────────────────────────────────────────────────────
   17 · STATUS DOT (online / offline / away / busy)
   ─────────────────────────────────────────────────────────────────────── */

.nox-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nox-ink-4);
  flex-shrink: 0;
}
.nox-status-dot.is-online  { background: var(--nox-green); box-shadow: 0 0 0 2px rgba(58,138,92,0.25); }
.nox-status-dot.is-busy    { background: var(--nox-red); box-shadow: 0 0 0 2px rgba(181,69,58,0.25); }
.nox-status-dot.is-away    { background: var(--nox-yellow); box-shadow: 0 0 0 2px rgba(181,154,58,0.25); }
.nox-status-dot.is-offline { background: var(--nox-ink-4); box-shadow: 0 0 0 2px rgba(180,180,180,0.12); }
.nox-status-dot.is-pulse   { animation: nox-pulse 2s infinite; }

.nox-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: 100px;
  font-family: var(--nox-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nox-ink-3);
}
.nox-status-chip.is-online  { color: var(--nox-green); }
.nox-status-chip.is-busy    { color: var(--nox-red); }
.nox-status-chip.is-away    { color: var(--nox-yellow); }
.nox-status-chip.is-offline { color: var(--nox-ink-4); }

/* ───────────────────────────────────────────────────────────────────────
   18 · CHART COMPONENTS (donut, line, area)
   ─────────────────────────────────────────────────────────────────────── */

/* Donut chart — pure CSS */
.nox-donut {
  --pct: 75%;
  --donut-size: 120px;
  --thick: 14px;
  --donut-color: var(--nox-accent);
  width: var(--donut-size);
  height: var(--donut-size);
  border-radius: 50%;
  background: conic-gradient(var(--donut-color) var(--pct), var(--nox-bg-3) 0);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nox-donut::before {
  content: '';
  position: absolute;
  inset: var(--thick);
  background: var(--nox-bg);
  border-radius: 50%;
}
.nox-donut-val {
  position: relative;
  z-index: 1;
  font-family: var(--nox-font-display);
  font-size: calc(var(--donut-size) * 0.2);
  font-weight: 800;
  color: var(--nox-ink);
  letter-spacing: -0.02em;
}
.nox-donut-label {
  position: relative;
  z-index: 1;
  font-family: var(--nox-font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--nox-ink-4);
  text-align: center;
}

/* Area/line chart (svg preferred but css-only fallback) */
.nox-area-chart {
  position: relative;
  height: 120px;
  background:
    linear-gradient(to top, var(--nox-bg-3) 1px, transparent 1px) 0 25% / 100% 25%,
    linear-gradient(to top, var(--nox-bg-3) 1px, transparent 1px) 0 50% / 100% 25%,
    linear-gradient(to top, var(--nox-bg-3) 1px, transparent 1px) 0 75% / 100% 25%;
  border-bottom: 1px solid var(--nox-line);
  border-left: 1px solid var(--nox-line);
  padding: 8px 0 0;
}

/* ───────────────────────────────────────────────────────────────────────
   19 · PROGRESS BAR VARIANTS
   ─────────────────────────────────────────────────────────────────────── */

.nox-progress {
  display: block;
  height: 6px;
  background: var(--nox-bg-3);
  border-radius: 100px;
  overflow: hidden;
  position: relative;
}
.nox-progress-fill {
  height: 100%;
  background: var(--nox-accent);
  border-radius: 100px;
  width: var(--val, 50%);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.nox-progress.is-sm { height: 4px; }
.nox-progress.is-lg { height: 10px; }
.nox-progress.is-striped .nox-progress-fill {
  background-image: linear-gradient(45deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%);
  background-size: 12px 12px;
}
.nox-progress.is-animated .nox-progress-fill {
  animation: nox-progress-stripes 0.8s linear infinite;
}
@keyframes nox-progress-stripes { to { background-position: 12px 0; } }

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

/* Progress with label above */
.nox-progress-labeled { margin: 8px 0; }
.nox-progress-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-family: var(--nox-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nox-ink-3);
}
.nox-progress-label-row strong { color: var(--nox-ink); font-weight: 700; }

/* ───────────────────────────────────────────────────────────────────────
   20 · THEME TOGGLE (reusable component)
   Replaces the inline-styled button used across all templates.
   Positioned bottom-right so it doesn't overlap topbars/topnavs.

   Usage:
     <button class="nox-theme-toggle"
             onclick="document.documentElement.dataset.theme=
                      document.documentElement.dataset.theme==='dark'?'light':'dark'">
       Theme
     </button>
   ─────────────────────────────────────────────────────────────────────── */

.nox-theme-toggle {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 9999;
  padding: 7px 14px;
  font-family: var(--nox-font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--nox-ink-3);
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: 100px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}
.nox-theme-toggle:hover {
  color: var(--nox-ink);
  border-color: var(--nox-ink-4);
  background: var(--nox-bg-3);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
.nox-theme-toggle:active {
  transform: translateY(0);
}

/* Position modifiers if you need to override */
.nox-theme-toggle.is-top-right    { top: 16px; right: 16px; bottom: auto; }
.nox-theme-toggle.is-top-left     { top: 16px; left: 16px; right: auto; bottom: auto; }
.nox-theme-toggle.is-bottom-left  { bottom: 16px; left: 16px; right: auto; }

/* Hide the toggle (useful for embed/iframe contexts) */
.nox-theme-toggle.is-hidden { display: none !important; }

/* M9 — keep the fixed toggle clear of content/bottom bars on narrow viewports */
@media (max-width: 640px) {
  .nox-theme-toggle { bottom: 60px; right: 8px; transform: scale(0.9); }
}

/* ───────────────────────────────────────────────────────────────────────
   21 · UNIVERSAL CROSS-INDUSTRY COMPONENTS
   Components that work across ALL service business templates.
   ─────────────────────────────────────────────────────────────────────── */

/* Booking widget (compact appointment slot picker) */
.nox-booking {
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: 14px;
  padding: 20px;
  max-width: 420px;
}
.nox-booking-head {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--nox-line);
}
.nox-booking-title {
  font-family: var(--nox-font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--nox-ink);
  margin: 0 0 4px;
}
.nox-booking-sub {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--nox-ink-4);
}
.nox-booking-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 14px;
}
.nox-booking-day {
  padding: 8px 4px;
  background: var(--nox-bg);
  border: 1px solid var(--nox-line);
  border-radius: 6px;
  font-family: var(--nox-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nox-ink-3);
  text-align: center;
  cursor: pointer;
  transition: all 0.1s;
}
.nox-booking-day-num {
  font-family: var(--nox-font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--nox-ink);
  margin-top: 2px;
  display: block;
}
.nox-booking-day:hover { border-color: var(--nox-ink-4); }
.nox-booking-day.is-active {
  background: var(--nox-accent-s);
  border-color: var(--nox-accent);
  color: var(--nox-accent);
}
.nox-booking-day.is-active .nox-booking-day-num { color: var(--nox-accent); }
.nox-booking-day.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.nox-booking-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 6px;
}
.nox-booking-slot {
  padding: 8px 10px;
  background: var(--nox-bg);
  border: 1px solid var(--nox-line);
  border-radius: 6px;
  font-family: var(--nox-font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--nox-ink-2);
  cursor: pointer;
  text-align: center;
  transition: all 0.1s;
}
.nox-booking-slot:hover { border-color: var(--nox-accent); color: var(--nox-accent); }
.nox-booking-slot.is-active {
  background: var(--nox-accent);
  border-color: var(--nox-accent);
  color: #fff;
}
.nox-booking-slot.is-taken {
  opacity: 0.35;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* FAQ Accordion (universally needed) */
.nox-faq {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--nox-line);
}
.nox-faq-item {
  border-bottom: 1px solid var(--nox-line);
}
.nox-faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 20px 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: var(--nox-ink);
  font-family: var(--nox-font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color 0.1s;
}
.nox-faq-q:hover { color: var(--nox-accent); }
.nox-faq-q-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid var(--nox-line);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--nox-ink-3);
  transition: transform 0.2s, color 0.1s;
}
.nox-faq-item.is-open .nox-faq-q-icon { transform: rotate(45deg); color: var(--nox-accent); border-color: var(--nox-accent); }
.nox-faq-a {
  display: none;
  padding: 0 0 24px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--nox-ink-3);
  max-width: 720px;
}
.nox-faq-item.is-open .nox-faq-a { display: block; }

/* Reviews summary (rating + count, used everywhere) */
.nox-reviews-summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
}
.nox-reviews-score {
  font-family: var(--nox-font-display);
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
  color: var(--nox-ink);
  letter-spacing: -0.02em;
}
.nox-reviews-stars {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--nox-yellow);
  margin-bottom: 4px;
}
.nox-reviews-stars .nox-icon { width: 16px; height: 16px; }
.nox-reviews-meta {
  font-family: var(--nox-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nox-ink-4);
}

/* Single review card (universal) */
.nox-review {
  padding: 20px;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: 10px;
}
.nox-review-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.nox-review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--nox-bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--nox-font-mono);
  font-weight: 700;
  font-size: 12px;
  color: var(--nox-ink-2);
  flex-shrink: 0;
}
.nox-review-meta { flex: 1; min-width: 0; }
.nox-review-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--nox-ink);
}
.nox-review-date {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nox-ink-4);
  margin-top: 2px;
}
.nox-review-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--nox-ink-2);
  margin: 0;
}
.nox-review-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-family: var(--nox-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nox-ink-4);
  padding-top: 12px;
  border-top: 1px solid var(--nox-line);
}

/* Comparison table (pricing, features, services) */
.nox-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.nox-compare th,
.nox-compare td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--nox-line);
}
.nox-compare thead th {
  font-family: var(--nox-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--nox-ink-4);
  font-weight: 600;
  border-bottom: 2px solid var(--nox-line);
  background: var(--nox-bg-1);
}
.nox-compare tbody td:first-child {
  font-weight: 600;
  color: var(--nox-ink);
}
.nox-compare tbody tr:hover { background: var(--nox-bg-2); }
.nox-compare .check { color: var(--nox-green); }
.nox-compare .x { color: var(--nox-ink-4); opacity: 0.4; }
.nox-compare .col-featured { background: var(--nox-accent-s); }
.nox-compare thead .col-featured {
  color: var(--nox-accent);
  border-bottom-color: var(--nox-accent);
}

/* Mobile nav drawer */
.nox-mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.nox-mobile-nav.is-open {
  display: block;
  opacity: 1;
  pointer-events: auto;
}
.nox-mobile-nav-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 88vw);
  background: var(--nox-bg);
  border-left: 1px solid var(--nox-line);
  padding: 24px;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
}
.nox-mobile-nav.is-open .nox-mobile-nav-panel { transform: translateX(0); }
.nox-mobile-nav-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--nox-line);
}
.nox-mobile-nav-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nox-mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-family: var(--nox-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--nox-ink-2);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: all 0.1s;
}
.nox-mobile-nav-link:hover { background: var(--nox-bg-2); color: var(--nox-ink); }
.nox-mobile-nav-link.is-active { background: var(--nox-accent-s); color: var(--nox-accent); }

/* Mobile menu trigger */
.nox-mobile-trigger {
  display: none;
  background: transparent;
  border: 1px solid var(--nox-line);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  color: var(--nox-ink);
}
@media (max-width: 768px) {
  .nox-mobile-trigger { display: inline-flex; }
}

/* Service / feature card (universal — works for ANY industry's services) */
.nox-service-card {
  padding: 24px;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all 0.15s;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.nox-service-card:hover {
  transform: translateY(-2px);
  border-color: var(--nox-accent-g);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.nox-service-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--nox-accent-s);
  border: 1px solid var(--nox-accent-g);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nox-accent);
  margin-bottom: 4px;
}
.nox-service-card-icon .nox-icon { width: 24px; height: 24px; }
.nox-service-card-title {
  font-family: var(--nox-font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--nox-ink);
}
.nox-service-card-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--nox-ink-3);
  flex: 1;
}
.nox-service-card-price {
  font-family: var(--nox-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nox-accent);
  font-weight: 700;
  padding-top: 12px;
  border-top: 1px solid var(--nox-line);
}

/* Trust badge row (HIPAA, ASE, Insured, etc.) */
.nox-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 18px 0;
}
.nox-trust-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--nox-bg-2);
  border: 1px solid var(--nox-line);
  border-radius: 8px;
}
.nox-trust-badge-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--nox-accent-s);
  color: var(--nox-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.nox-trust-badge-icon .nox-icon { width: 18px; height: 18px; }
.nox-trust-badge-label {
  font-family: var(--nox-font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--nox-ink-4);
  line-height: 1.2;
}
.nox-trust-badge-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--nox-ink);
  line-height: 1.2;
  margin-top: 2px;
}

/* Emergency / urgent CTA strip */
.nox-emergency {
  background: rgba(181,69,58,0.1);
  border-top: 1px solid rgba(181,69,58,0.25);
  border-bottom: 1px solid rgba(181,69,58,0.25);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  text-align: center;
}
.nox-emergency-icon {
  color: var(--nox-red);
  flex-shrink: 0;
}
.nox-emergency-text {
  font-family: var(--nox-font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--nox-ink);
}
.nox-emergency-phone {
  font-family: var(--nox-font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--nox-red);
  text-decoration: none;
  padding: 6px 14px;
  background: rgba(181,69,58,0.15);
  border: 1px solid rgba(181,69,58,0.35);
  border-radius: 6px;
}
.nox-emergency-phone:hover { background: rgba(181,69,58,0.25); }

/* ───────────────────────────────────────────────────────────────────────
   22 · PRINT STYLES
   For invoices, receipts, reports, contracts.
   ─────────────────────────────────────────────────────────────────────── */

@media print {
  :root {
    --nox-bg: #fff;
    --nox-bg-1: #fff;
    --nox-bg-2: #fff;
    --nox-bg-3: #f5f5f5;
    --nox-ink: #000;
    --nox-ink-2: #222;
    --nox-ink-3: #555;
    --nox-line: #ddd;
  }
  body { background: #fff !important; color: #000 !important; }
  .nox-theme-toggle,
  .nox-mobile-trigger,
  nav.site-nav,
  nav.nox-nav-ed,
  nav.nox-shell-topnav,
  .nox-shell-subhead,
  .nox-sidebar,
  .nox-topbar,
  button:not(.print-show),
  .nox-loading-bar,
  .nox-toast,
  .no-print {
    display: none !important;
  }
  .nox-card {
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    page-break-inside: avoid;
  }
  .nox-table { font-size: 11px; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 10px; color: #666; }
  a[href^="#"]::after, a[href^="javascript"]::after { content: ""; }
  h1, h2, h3 { page-break-after: avoid; }
}

/* Print-only utility */
.print-only { display: none; }
@media print { .print-only { display: block; } }

/* ───────────────────────────────────────────────────────────────────────
   23 · SCROLL-REVEAL SYSTEM  (Mercury experience layer)
   IntersectionObserver-driven entrance choreography for the marketing site.
   Consumers add .nox-reveal (+ optional direction variant) to any element,
   then a tiny inline observer toggles .is-visible when it scrolls into view.
   The shared JS snippet (see nox-experience contract) drives this and the
   count-up. Everything degrades gracefully: with no JS / reduced-motion the
   content is shown immediately and unanimated.

   Eases & distances follow the playbook discipline rules: slow 700ms cubic
   ease-out, gentle translate ≤24px, no opacity flash on the destination.
   ─────────────────────────────────────────────────────────────────────── */

.nox-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.nox-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Directional / zoom variants — set the FROM transform; .is-visible resets it.
   Distances stay within the ≤24px gentle-motion budget. */
.nox-reveal.from-up    { transform: translateY(-20px); }
.nox-reveal.from-down  { transform: translateY(20px); }
.nox-reveal.from-left  { transform: translateX(-24px); }
.nox-reveal.from-right { transform: translateX(24px); }
.nox-reveal.zoom       { transform: scale(0.94); }

/* All variants land on the same resting state when revealed. */
.nox-reveal.from-up.is-visible,
.nox-reveal.from-down.is-visible,
.nox-reveal.from-left.is-visible,
.nox-reveal.from-right.is-visible,
.nox-reveal.zoom.is-visible {
  transform: none;
}

/* Staggered children — consumers set --nox-reveal-i per child for explicit
   control; the :nth-child fallback (up to 12) covers markup that doesn't. */
.nox-reveal-stagger > * {
  transition-delay: calc(var(--nox-reveal-i, 0) * 80ms);
}
.nox-reveal-stagger > *:nth-child(1)  { --nox-reveal-i: 0; }
.nox-reveal-stagger > *:nth-child(2)  { --nox-reveal-i: 1; }
.nox-reveal-stagger > *:nth-child(3)  { --nox-reveal-i: 2; }
.nox-reveal-stagger > *:nth-child(4)  { --nox-reveal-i: 3; }
.nox-reveal-stagger > *:nth-child(5)  { --nox-reveal-i: 4; }
.nox-reveal-stagger > *:nth-child(6)  { --nox-reveal-i: 5; }
.nox-reveal-stagger > *:nth-child(7)  { --nox-reveal-i: 6; }
.nox-reveal-stagger > *:nth-child(8)  { --nox-reveal-i: 7; }
.nox-reveal-stagger > *:nth-child(9)  { --nox-reveal-i: 8; }
.nox-reveal-stagger > *:nth-child(10) { --nox-reveal-i: 9; }
.nox-reveal-stagger > *:nth-child(11) { --nox-reveal-i: 10; }
.nox-reveal-stagger > *:nth-child(12) { --nox-reveal-i: 11; }

/* Parallax — JS (or scroll-timeline) writes the transform; this just hints
   the compositor. --nox-parallax-speed is the consumer-tunable multiplier. */
.nox-parallax {
  --nox-parallax-speed: 0.2;
  will-change: transform;
}

/* No-JS progressive enhancement: scroll-driven reveal via native
   animation-timeline. Apply .nox-reveal-scroll INSTEAD of relying on the
   observer; browsers without support simply show the element (the @supports
   guard means the keyframed start state never applies there). */
@supports (animation-timeline: view()) {
  @keyframes nox-reveal-scroll-kf {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
  }
  .nox-reveal-scroll {
    opacity: 0;
    animation: nox-reveal-scroll-kf linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 28%;
  }
}

/* Reduced motion — hard-disable the reveal/parallax choreography. Content is
   shown at its resting state with no transition, and the JS snippet likewise
   flips everything to .is-visible immediately. Mirrors the global reset above
   but is explicit (and !important) so authored transition-delays / variant
   transforms can never leave content hidden or shifted. */
@media (prefers-reduced-motion: reduce) {
  .nox-reveal,
  .nox-reveal.from-up,
  .nox-reveal.from-down,
  .nox-reveal.from-left,
  .nox-reveal.from-right,
  .nox-reveal.zoom,
  .nox-reveal.is-visible,
  .nox-reveal-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .nox-reveal-stagger > * {
    transition-delay: 0ms !important;
  }
  .nox-parallax {
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   END nox-motion.css
   ═══════════════════════════════════════════════════════════════════════ */