/* ============================================================
   NEXUS-7 // DESIGN SYSTEM
   Complete Style Reference
   Version: 2.7.4
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  line-height: var(--line-height-base);
  min-height: 100vh;
  overflow-x: hidden;
}

img, video, svg {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* ============================================================
   ROOT VARIABLES — DESIGN TOKENS
   ============================================================ */
:root {

  /* — COLORS — */
  --color-bg-base:        #07070a;
  --color-bg-deep:        #050507;
  --color-surface-1:      #0c0c12;
  --color-surface-2:      #101018;
  --color-surface-3:      #16161f;
  --color-surface-4:      #1c1c28;
  --color-surface-glass:  rgba(12, 12, 18, 0.85);

  /* Red Family */
  --color-red-900:        #450a0a;
  --color-red-800:        #7f1d1d;
  --color-crimson:        #8b0000;
  --color-red-600:        #b91c1c;
  --color-red-500:        #dc2626;
  --color-red-400:        #ef4444;
  --color-red-300:        #f87171;
  --color-red-200:        #fca5a5;
  --color-red-100:        #fee2e2;

  /* Accent (primary action) */
  --color-accent:         var(--color-red-500);
  --color-accent-hover:   var(--color-red-400);
  --color-accent-active:  var(--color-red-600);
  --color-accent-glow:    rgba(220, 38, 38, 0.35);
  --color-accent-glow-sm: rgba(220, 38, 38, 0.18);

  /* Semantic */
  --color-success:        #16a34a;
  --color-success-bg:     rgba(22, 163, 74, 0.12);
  --color-success-border: rgba(22, 163, 74, 0.3);
  --color-warning:        #ca8a04;
  --color-warning-bg:     rgba(202, 138, 4, 0.12);
  --color-warning-border: rgba(202, 138, 4, 0.3);
  --color-danger:         var(--color-red-500);
  --color-danger-bg:      rgba(220, 38, 38, 0.12);
  --color-danger-border:  rgba(220, 38, 38, 0.3);
  --color-info:           #2563eb;
  --color-info-bg:        rgba(37, 99, 235, 0.12);
  --color-info-border:    rgba(37, 99, 235, 0.3);

  /* Text */
  --color-text-primary:   #f0eeeb;
  --color-text-secondary: #8a8698;
  --color-text-muted:     #5a5768;
  --color-text-accent:    var(--color-red-400);
  --color-text-disabled:  #3d3b48;

  /* Borders */
  --color-border:         #1a1824;
  --color-border-subtle:  #13131e;
  --color-border-hover:   #2a2838;
  --color-border-accent:  rgba(220, 38, 38, 0.4);
  --color-border-glow:    rgba(220, 38, 38, 0.6);

  /* — SHADOWS — */
  --shadow-sm:    0 1px 3px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.7), 0 2px 6px rgba(0,0,0,0.5);
  --shadow-lg:    0 10px 40px rgba(0,0,0,0.8), 0 4px 16px rgba(0,0,0,0.6);
  --shadow-xl:    0 20px 60px rgba(0,0,0,0.9), 0 8px 24px rgba(0,0,0,0.7);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 0 rgba(0,0,0,0.3);

  /* Glow */
  --glow-sm:      0 0 8px var(--color-accent-glow-sm), 0 0 20px var(--color-accent-glow-sm);
  --glow-md:      0 0 16px var(--color-accent-glow), 0 0 40px rgba(220,38,38,0.2);
  --glow-lg:      0 0 30px var(--color-accent-glow), 0 0 80px rgba(220,38,38,0.25), 0 0 120px rgba(220,38,38,0.1);
  --glow-border:  0 0 0 1px var(--color-border-accent), 0 0 12px var(--color-accent-glow-sm);

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

  /* — SPACING — */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32: 128px;

  /* — TYPOGRAPHY — */
  --font-display: 'Oxanium', 'Rajdhani', sans-serif;
  --font-body:    'Rajdhani', 'Segoe UI', sans-serif;
  --font-mono:    'Share Tech Mono', 'Courier New', monospace;

  --fs-xs:    0.75rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-md:    1.125rem;
  --fs-lg:    1.25rem;
  --fs-xl:    1.5rem;
  --fs-2xl:   1.875rem;
  --fs-3xl:   2.25rem;
  --fs-4xl:   3rem;
  --fs-5xl:   4rem;
  --fs-6xl:   5rem;

  --fw-light:      300;
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;

  --line-height-base:   1.6;
  --line-height-tight:  1.15;
  --line-height-snug:   1.3;
  --line-height-loose:  1.8;

  --letter-spacing-tight:  -0.03em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.05em;
  --letter-spacing-wider:   0.1em;
  --letter-spacing-widest:  0.2em;

  /* — Z-INDEX LAYERS — */
  --z-base:       0;
  --z-above:      10;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    300;
  --z-modal:      400;
  --z-toast:      500;
  --z-tooltip:    600;

  /* — TRANSITIONS — */
  --transition-fast:   all 0.15s ease;
  --transition-base:   all 0.25s ease;
  --transition-slow:   all 0.4s ease;
  --transition-spring: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* — LAYOUT — */
  --container-max: 1280px;
  --container-pad: clamp(var(--space-4), 4vw, var(--space-8));

  /* — PATTERN COLORS — */
  --pattern-line-color:    rgba(220, 38, 38, 0.07);
  --pattern-dot-color:     rgba(220, 38, 38, 0.12);
  --pattern-geo-color:     rgba(220, 38, 38, 0.05);
  --pattern-scan-color:    rgba(0, 0, 0, 0.18);
}

/* ============================================================
   BASE
   ============================================================ */
::selection {
  background: var(--color-accent);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg-deep); }
::-webkit-scrollbar-thumb { background: var(--color-surface-4); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-accent); }

/* ============================================================
   LAYOUT
   ============================================================ */
.nx-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.nx-section {
  padding: var(--space-24) 0;
  position: relative;
  overflow: hidden;
}

.nx-section--alt {
  background-color: var(--color-surface-1);
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.nx-h1, .nx h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-4xl), 6vw, var(--fs-6xl));
  font-weight: var(--fw-extrabold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
}

.nx-h2, .nx h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-3xl), 4vw, var(--fs-4xl));
  font-weight: var(--fw-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
}

.nx-h3, .nx h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--line-height-snug);
  color: var(--color-text-primary);
}

.nx-h4, .nx h4 {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.nx-body-text {
  font-size: var(--fs-base);
  line-height: var(--line-height-base);
  color: var(--color-text-secondary);
}

.nx-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-secondary);
}

.nx-muted { color: var(--color-text-muted); }
.nx-text-accent { color: var(--color-text-accent); }
.nx-text-warn { color: var(--color-warning); }
.nx-text-danger { color: var(--color-danger); }
.nx-text-success { color: var(--color-success); }

/* ============================================================
   BACKGROUND PATTERNS
   ============================================================ */

/* Grid Pattern */
.pattern-grid {
  background-image:
    linear-gradient(var(--pattern-line-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--pattern-line-color) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Dot Pattern */
.pattern-dot {
  background-image: radial-gradient(var(--pattern-dot-color) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
}

/* Diamond Pattern */
.pattern-diamond {
  background-image:
    linear-gradient(45deg, var(--pattern-line-color) 1px, transparent 1px),
    linear-gradient(-45deg, var(--pattern-line-color) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Geometric Pattern */
.pattern-geometric {
  background-image:
    linear-gradient(30deg, var(--pattern-geo-color) 1px, transparent 1px),
    linear-gradient(150deg, var(--pattern-geo-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--pattern-geo-color) 1px, transparent 1px);
  background-size: 36px 36px;
}

/* Scanlines Overlay */
.pattern-scanline::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    var(--pattern-scan-color) 3px,
    var(--pattern-scan-color) 4px
  );
  pointer-events: none;
  z-index: var(--z-above);
}

/* Vignette utility */
.vignette::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.8) 100%);
  pointer-events: none;
}

/* ============================================================
   NEXUS-7 BUTTONS
   ============================================================ */
.btn--nx {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 20px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-base);
  position: relative;
  overflow: hidden;
  text-decoration: none;
  line-height: 1;
}

.btn--nx::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 60%);
  pointer-events: none;
}

/* Primary */
.btn--primary {
  background: var(--color-red-600);
  border-color: var(--color-red-500);
  color: #fff;
  box-shadow: var(--glow-sm), var(--shadow-md);
}
.btn--primary:hover:not(:disabled) {
  background: var(--color-red-500);
  border-color: var(--color-red-400);
  box-shadow: var(--glow-md), var(--shadow-lg);
  transform: translateY(-1px);
}
.btn--primary:active:not(:disabled) {
  background: var(--color-crimson);
  transform: translateY(0);
  box-shadow: var(--glow-sm);
}

/* Secondary */
.btn--secondary {
  background: var(--color-surface-3);
  border-color: var(--color-border-hover);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sm);
}
.btn--secondary:hover:not(:disabled) {
  background: var(--color-surface-4);
  border-color: var(--color-border-accent);
  box-shadow: var(--glow-border);
  transform: translateY(-1px);
}

/* Outline */
.btn--outline {
  background: transparent;
  border-color: var(--color-border-hover);
  color: var(--color-text-primary);
}
.btn--outline:hover:not(:disabled) {
  background: rgba(220,38,38,0.08);
  border-color: var(--color-accent);
  color: var(--color-accent);
  box-shadow: var(--glow-sm);
}

/* Ghost */
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-secondary);
}
.btn--ghost:hover:not(:disabled) {
  background: var(--color-surface-2);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

/* Danger */
.btn--danger {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-border);
  color: var(--color-red-300);
}
.btn--danger:hover:not(:disabled) {
  background: var(--color-danger);
  border-color: var(--color-red-400);
  color: #fff;
  box-shadow: var(--glow-md);
  transform: translateY(-1px);
}

/* Disabled */
.btn--nx:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Sizes */
.btn--xs   { padding: 5px 10px; font-size: var(--fs-xs); }
.btn--sm   { padding: 7px 14px; font-size: var(--fs-xs); }
.btn--lg   { padding: 13px 28px; font-size: var(--fs-base); }
.btn--xl   { padding: 16px 36px; font-size: var(--fs-md); }

/* Icon Button */
.btn--icon {
  padding: 8px;
  width: 38px;
  height: 38px;
  aspect-ratio: 1;
}

/* Full Width */
.btn--full { width: 100%; justify-content: center; }

/* ============================================================
   NEXUS-7 FORMS
   ============================================================ */
.nx-form-group { display: flex; flex-direction: column; gap: var(--space-2); }

.nx-form-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.nx-form-label--valid { color: var(--color-success); }
.nx-form-label--error { color: var(--color-danger); }

.nx-input,
.nx-textarea,
.nx-select {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  padding: 10px 14px;
  font-size: var(--fs-base);
  width: 100%;
  transition: var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

.nx-input::placeholder,
.nx-textarea::placeholder { color: var(--color-text-muted); }

.nx-input:focus,
.nx-textarea:focus,
.nx-select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(220,38,38,0.15);
  background: var(--color-surface-3);
}

.nx-input--valid {
  border-color: var(--color-success) !important;
  box-shadow: 0 0 0 3px rgba(22,163,74,0.12) !important;
}

.nx-input--error {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.15) !important;
}

.nx-input:disabled,
.nx-textarea:disabled,
.nx-select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--color-surface-1);
}

.nx-textarea { resize: vertical; min-height: 100px; }

/* Toggle */
.nx-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}
.nx-toggle input { display: none; }

.nx-toggle-track {
  position: relative;
  width: 42px;
  height: 22px;
  background: var(--color-surface-3);
  border: 1px solid var(--color-border-hover);
  border-radius: var(--radius-full);
  transition: var(--transition-fast);
  flex-shrink: 0;
}
.nx-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--color-text-muted);
  border-radius: var(--radius-full);
  transition: var(--transition-base);
}
.nx-toggle input:checked + .nx-toggle-track {
  background: rgba(220,38,38,0.2);
  border-color: var(--color-accent);
  box-shadow: var(--glow-sm);
}
.nx-toggle input:checked + .nx-toggle-track::after {
  transform: translateX(20px);
  background: var(--color-accent);
  box-shadow: var(--glow-sm);
}

/* ============================================================
   NEXUS-7 CARDS
   ============================================================ */
.nx-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
  transition: var(--transition-base);
}

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

/* Corner accents */
.nx-card-corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--color-accent);
  border-style: solid;
}
.nx-card-corner--tl { top: 8px; left: 8px; border-width: 1px 0 0 1px; }
.nx-card-corner--br { bottom: 8px; right: 8px; border-width: 0 1px 1px 0; }

.nx-card-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.nx-card-title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
  line-height: var(--line-height-snug);
}

.nx-card-text {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
  margin-bottom: var(--space-5);
}

/* Feature Card */
.nx-card--feature {
  background: linear-gradient(135deg, var(--color-surface-2) 0%, var(--color-surface-3) 100%);
  border-color: var(--color-border);
}
.nx-card--feature:hover { border-color: var(--color-border-accent); box-shadow: var(--glow-sm); }

.nx-card-icon-wrap {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(220,38,38,0.12);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
}

/* Glass Card */
.nx-card--glass {
  background: var(--color-surface-glass);
  border-color: rgba(255,255,255,0.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,0.05);
}
.nx-card--glass:hover {
  border-color: var(--color-border-accent);
  box-shadow: var(--glow-sm), var(--shadow-lg);
}

/* Elevated Glow Card */
.nx-card--glow {
  border-color: var(--color-border-accent);
  box-shadow: var(--glow-sm), var(--shadow-xl);
}
.nx-card--glow:hover { border-color: var(--color-accent); box-shadow: var(--glow-md), var(--shadow-xl); }

/* ============================================================
   NEXUS-7 AVATAR
   ============================================================ */
.nx-avatar {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--color-surface-4), var(--color-red-900));
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
  flex-shrink: 0;
}
.nx-avatar--lg { width: 60px; height: 60px; font-size: var(--fs-base); }

.nx-avatar-group { display: flex; }
.nx-avatar-group .nx-avatar {
  margin-left: -10px;
  box-shadow: 0 0 0 2px var(--color-surface-2);
  transition: var(--transition-fast);
}
.nx-avatar-group .nx-avatar:first-child { margin-left: 0; }

/* ============================================================
   NEXUS-7 BADGES & TAGS
   ============================================================ */
.nx-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  white-space: nowrap;
}
.nx-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
  flex-shrink: 0;
}
.nx-badge--red     { background: var(--color-danger-bg);   border: 1px solid var(--color-danger-border);   color: var(--color-red-300); }
.nx-badge--green   { background: var(--color-success-bg);  border: 1px solid var(--color-success-border);  color: #4ade80; }
.nx-badge--yellow  { background: var(--color-warning-bg);  border: 1px solid var(--color-warning-border);  color: #fbbf24; }
.nx-badge--blue    { background: var(--color-info-bg);     border: 1px solid var(--color-info-border);     color: #60a5fa; }
.nx-badge--outline { background: transparent; border: 1px solid var(--color-border-hover); color: var(--color-text-secondary); }

.nx-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-secondary);
  cursor: default;
  transition: var(--transition-fast);
}
.nx-tag:hover { border-color: var(--color-border-accent); color: var(--color-text-primary); }
.nx-tag--accent { background: rgba(220,38,38,0.1); border-color: var(--color-border-accent); color: var(--color-red-300); }

/* ============================================================
   NEXUS-7 STATUS DOTS
   ============================================================ */
.nx-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.nx-status-dot--online  { background: var(--color-success); box-shadow: 0 0 6px rgba(22,163,74,0.8); }
.nx-status-dot--idle    { background: var(--color-warning); box-shadow: 0 0 6px rgba(202,138,4,0.8); }
.nx-status-dot--busy    { background: var(--color-danger); box-shadow: var(--glow-sm); }
.nx-status-dot--offline { background: var(--color-text-muted); }

/* ============================================================
   NEXUS-7 ALERTS
   ============================================================ */
.nx-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid;
  font-size: var(--fs-sm);
  line-height: var(--line-height-base);
}
.nx-alert--info    { background: var(--color-info-bg);    border-color: var(--color-info-border);    color: #93c5fd; }
.nx-alert--success { background: var(--color-success-bg); border-color: var(--color-success-border); color: #86efac; }
.nx-alert--warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: #fde68a; }
.nx-alert--danger  { background: var(--color-danger-bg);  border-color: var(--color-danger-border);  color: var(--color-red-200); }

/* ============================================================
   NEXUS-7 PROGRESS BARS
   ============================================================ */
.nx-progress {
  height: 4px;
  background: var(--color-surface-3);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.nx-progress--sm { height: 3px; }
.nx-progress--lg { height: 6px; }

.nx-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-red-600), var(--color-red-400));
  border-radius: var(--radius-full);
  box-shadow: var(--glow-sm);
  transition: width 1s ease;
}
.nx-progress--success .nx-progress__fill { background: linear-gradient(90deg, #14532d, var(--color-success)); }
.nx-progress--warning .nx-progress__fill { background: linear-gradient(90deg, #b45309, var(--color-warning)); }
.nx-progress--danger  .nx-progress__fill { background: linear-gradient(90deg, #7f1d1d, var(--color-danger)); }

/* ============================================================
   NEXUS-7 TABLE
   ============================================================ */
.nx-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-border); }

.nx-table {
  width: 100%;
  border-collapse: collapse;
}

.nx-table th {
  background: var(--color-surface-2);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.nx-table td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: middle;
}

.nx-table tr:last-child td { border-bottom: none; }

.nx-table tbody tr {
  background: var(--color-surface-1);
  transition: var(--transition-fast);
}
.nx-table tbody tr:hover { background: var(--color-surface-2); }

/* ============================================================
   NEXUS-7 MODALS
   ============================================================ */
.nx-modal {
  position: relative;
  z-index: 1;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-hover);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.nx-modal--danger { border-color: var(--color-border-accent); box-shadow: var(--glow-sm), var(--shadow-xl); }

.nx-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border-subtle);
}

.nx-modal-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
}

.nx-modal-close {
  font-size: var(--fs-base);
  color: var(--color-text-muted);
  cursor: pointer;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  transition: var(--transition-fast);
}
.nx-modal-close:hover { background: var(--color-danger-bg); color: var(--color-danger); }

.nx-modal-body {
  padding: var(--space-5) var(--space-6);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
}

.nx-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-surface-1);
}

/* ============================================================
   NEXUS-7 DROPDOWN / MENUS
   ============================================================ */
.nx-dropdown-menu {
  background: var(--color-surface-3);
  border: 1px solid var(--color-border-hover);
  border-radius: var(--radius-md);
  padding: var(--space-2) 0;
  min-width: 200px;
  box-shadow: var(--shadow-lg);
  z-index: var(--z-dropdown);
}

.nx-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
}
.nx-dropdown-item:hover { background: var(--color-surface-4); color: var(--color-text-primary); }
.nx-dropdown-item--active { background: rgba(220,38,38,0.08); color: var(--color-accent); }
.nx-dropdown-item--danger { color: var(--color-red-300); }
.nx-dropdown-item--danger:hover { background: var(--color-danger-bg); }

.nx-dropdown-divider { height: 1px; background: var(--color-border-subtle); margin: var(--space-2) 0; }

/* ============================================================
   NEXUS-7 TIMELINE
   ============================================================ */
.nx-timeline { list-style: none; display: flex; flex-direction: column; gap: 0; }
.nx-timeline-item {
  display: flex;
  gap: var(--space-4);
  padding-bottom: var(--space-5);
  position: relative;
}
.nx-timeline-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 24px;
  bottom: 0;
  width: 1px;
  background: var(--color-border);
}
.nx-timeline-marker {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  position: relative;
  z-index: 1;
}
.nx-timeline-item--done .nx-timeline-marker { border-color: var(--color-success); color: var(--color-success); background: var(--color-success-bg); }

/* ============================================================
   NEXUS-7 TABS
   ============================================================ */
.nx-tabs-bar {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  gap: 0;
}
.nx-tab-btn {
  padding: var(--space-3) var(--space-5);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: var(--transition-fast);
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  text-transform: uppercase;
  font-family: var(--font-body);
}
.nx-tab-btn:hover { color: var(--color-text-secondary); }
.nx-tab-btn--active { color: var(--color-accent); border-bottom-color: var(--color-accent); }

/* ============================================================
   NEXUS-7 ACCORDION
   ============================================================ */
.nx-accordion { display: flex; flex-direction: column; gap: var(--space-2); }
.nx-accordion-item {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: var(--transition-fast);
}
.nx-accordion-item:hover { border-color: var(--color-border-hover); }
.nx-accordion-item--open { border-color: var(--color-border-accent); }

.nx-accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.nx-accordion-item--open .nx-accordion-trigger { color: var(--color-text-primary); }

.nx-accordion-body {
  padding: 0 var(--space-5) var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-base);
}

/* ============================================================
   NEXUS-7 SECTION HEADERS
   ============================================================ */
.nx-section-header {
  margin-bottom: var(--space-12);
  max-width: 600px;
}

.nx-section-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--color-accent);
  letter-spacing: var(--letter-spacing-widest);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.nx-section-title {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-2xl), 4vw, var(--fs-3xl));
  font-weight: var(--fw-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
  margin-bottom: var(--space-4);
}

/* ============================================================
   NEXUS-7 PAGINATION
   ============================================================ */
.nx-pagination {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.nx-page-btn {
  min-width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition-fast);
  font-family: var(--font-mono);
  text-decoration: none;
}
.nx-page-btn:hover { border-color: var(--color-border-accent); color: var(--color-accent); background: rgba(220,38,38,0.06); }
.nx-page-btn--active { background: rgba(220,38,38,0.15); border-color: var(--color-accent); color: var(--color-accent); box-shadow: var(--glow-sm); }

/* ============================================================
   NEXUS-7 TOOLTIP
   ============================================================ */
.nx-tooltip {
  position: absolute;
  background: var(--color-surface-3);
  border: 1px solid var(--color-border-hover);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-xs);
  color: var(--color-text-secondary);
  line-height: var(--line-height-base);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-tooltip);
  pointer-events: none;
}

/* ============================================================
   NEXUS-7 BREADCRUMBS
   ============================================================ */
.nx-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  font-size: var(--fs-sm);
}
.nx-breadcrumb-item {
  color: var(--color-text-muted);
  transition: var(--transition-fast);
}
.nx-breadcrumb-item:hover { color: var(--color-accent); }
.nx-breadcrumb-item--current { color: var(--color-text-primary); cursor: default; }

/* ============================================================
   NEXUS-7 QUOTE
   ============================================================ */
.nx-quote {
  border-left: 2px solid var(--color-accent);
  padding: var(--space-4) var(--space-6);
  background: rgba(220,38,38,0.05);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.nx-quote p {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-style: italic;
  color: var(--color-text-primary);
  line-height: var(--line-height-snug);
}

/* ============================================================
   NEXUS-7 RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --space-24: 64px;
    --space-20: 48px;
    --space-16: 40px;
  }
}

@media print {
  body { background: #fff; color: #000; }
}