/* ============================================
   COSMIC STARRY SKY COMMAND CONSOLE
   宇宙星空指挥中心
   Deep Space Theme
   ============================================ */

/* CSS Variables - Cosmic Command Console */
:root {
  --bg-void: #141414;
  --bg-deep: #1a1a1a;
  --bg-nebula: #171717;
  --bg-panel: rgba(26, 26, 26, 0.8);
  --bg-panel-solid: rgba(23, 23, 23, 0.95);

  --nebula-purple: rgba(255, 255, 255, 0.05);
  --nebula-blue: rgba(255, 255, 255, 0.03);
  --nebula-pink: rgba(255, 255, 255, 0.02);
  --nebula-cyan: rgba(255, 255, 255, 0.04);

  --cyan-primary: rgba(255, 255, 255, 0.8);
  --cyan-glow: rgba(255, 255, 255, 0.15);
  --cyan-dim: rgba(255, 255, 255, 0.08);
  --cyan-subtle: rgba(255, 255, 255, 0.04);

  --magenta-primary: rgba(255, 255, 255, 0.7);
  --magenta-glow: rgba(255, 255, 255, 0.1);
  --magenta-dim: rgba(255, 255, 255, 0.06);

  --star-white: #f7f7f7;
  --star-blue: rgba(255, 255, 255, 0.7);
  --star-purple: rgba(255, 255, 255, 0.6);

  --text-primary: #f7f7f7;
  --text-secondary: rgba(255, 255, 255, 0.5);
  --text-muted: rgba(255, 255, 255, 0.3);

  --border-glow: 1px solid rgba(255, 255, 255, 0.1);
  --shadow-glow: 0 0 20px rgba(255, 255, 255, 0.05);
  --shadow-panel: 0 4px 16px rgba(0, 0, 0, 0.3);

  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --font-display: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --transition-fast: 0.15s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.6s ease;
}

/* ============================================
   COLLAPSED SIDEBAR STYLES
   ============================================ */

.collapsed-sidebar {
  width: 48px;
  height: fit-content;
  background: rgba(20, 20, 20, 0.90);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 4px;
  gap: 4px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.sidebar-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.sidebar-icon-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.sidebar-icon-btn:hover {
  color: rgba(255, 255, 255, 0.8);
}

.sidebar-icon-btn:hover::before {
  opacity: 1;
}

.sidebar-icon-btn.active {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}

.sidebar-icon-btn.active::before {
  opacity: 0;
}

.sidebar-icon-btn.primary {
  width: 38px !important;
  height: 38px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  color: rgba(0, 0, 0, 0.85) !important;
  border-radius: 50% !important;
  margin-bottom: 4px;
  opacity: 1 !important;
  visibility: visible !important;
}

.sidebar-icon-btn.primary:hover {
  background: rgba(255, 255, 255, 1) !important;
  color: rgba(0, 0, 0, 1) !important;
}

.sidebar-icon-btn.primary::before {
  display: none !important;
}

.sidebar-icon-btn.primary.active {
  background: rgba(255, 255, 255, 0.9) !important;
  color: rgba(0, 0, 0, 0.85) !important;
}

.sidebar-divider {
  width: 24px;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 4px 0;
}

/* ============================================
   NODE LIST STYLES (LibTV Style)
   ============================================ */

.node-palette-list-view {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.node-palette-list-view::-webkit-scrollbar {
  width: 4px;
}

.node-palette-list-view::-webkit-scrollbar-track {
  background: transparent;
}

.node-palette-list-view::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

.node-palette-category {
  padding: 0 16px;
  margin-bottom: 8px;
}

.node-palette-category-title {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  padding: 12px 0 8px 0;
}

.node-palette-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
}

/* ============================================
   TOOLBOX / TEMPLATE PANEL STYLES
   ============================================ */

.toolbox-template-card {
  padding: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  transition: all 0.2s ease;
}

.toolbox-template-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.12);
}

.template-name {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 4px;
}

.template-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.4;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.template-use-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  background: rgba(255, 255, 255, 0.85);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.template-use-btn:hover {
  background: rgba(255, 255, 255, 1);
  color: rgba(0, 0, 0, 1);
}

/* ============================================
   HISTORY PANEL STYLES
   ============================================ */

.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.history-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}

.history-item-name {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 8px;
}

.history-item-time {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.3);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============================================
   HELP PANEL STYLES
   ============================================ */

.help-section {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 14px;
}

.help-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 12px;
}

.help-shortcut-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.help-shortcut-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.help-shortcut-key {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.08);
  padding: 3px 8px;
  border-radius: 6px;
  font-family: monospace;
}

.help-shortcut-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
}

.help-link-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.help-link-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
}

.help-link-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
}

.help-version-info {
  text-align: center;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.2);
  padding-top: 8px;
}

/* ============================================
   SUPPORT PANEL STYLES
   ============================================ */

.support-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 0 10px;
}

.support-icon-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}

.support-contact-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.support-contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.15s ease;
}

.support-contact-link:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
  cursor: pointer;
}

.node-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  cursor: grab;
  transition: background 0.15s ease;
  border-radius: 10px;
}

.node-list-item:hover {
  background: rgba(255, 255, 255, 0.06);
}

.node-list-item:active {
  cursor: grabbing;
  background: rgba(255, 255, 255, 0.1);
}

.node-list-item-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
  flex-shrink: 0;
}

.node-list-item-label {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
}

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

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=Exo+2:wght@300;400;500;600;700&display=swap');

/* ============================================
   COSMIC BACKGROUND - NEBULA & STARS
   ============================================ */

.cosmic-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--bg-void);
  overflow: hidden;
}

.cosmic-background::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 120% 80% at 15% 30%, rgba(107, 33, 168, 0.2) 0%, transparent 45%),
    radial-gradient(ellipse 100% 60% at 85% 50%, rgba(30, 58, 138, 0.18) 0%, transparent 40%),
    radial-gradient(ellipse 80% 50% at 45% 75%, rgba(190, 24, 93, 0.12) 0%, transparent 35%),
    radial-gradient(ellipse 60% 60% at 75% 15%, rgba(8, 145, 178, 0.1) 0%, transparent 40%),
    radial-gradient(ellipse 50% 40% at 30% 60%, rgba(139, 92, 246, 0.08) 0%, transparent 35%),
    radial-gradient(ellipse 40% 30% at 60% 40%, rgba(236, 72, 153, 0.06) 0%, transparent 30%);
  animation: nebulaPulse 20s ease-in-out infinite;
}

.cosmic-background::after {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 50% 50%, transparent 0%, var(--bg-void) 80%);
  opacity: 0.4;
}

.nebula-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
  background: 
    radial-gradient(ellipse 150% 100% at 10% 20%, rgba(88, 28, 135, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse 120% 80% at 90% 80%, rgba(30, 64, 175, 0.12) 0%, transparent 45%);
  animation: nebulaDrift 30s ease-in-out infinite;
}

.nebula-layer-secondary {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  background: 
    radial-gradient(ellipse 80% 60% at 20% 70%, rgba(157, 23, 77, 0.1) 0%, transparent 40%),
    radial-gradient(ellipse 100% 70% at 80% 30%, rgba(6, 95, 70, 0.08) 0%, transparent 35%);
  animation: nebulaDriftReverse 25s ease-in-out infinite;
}

.cosmic-dust {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: 
    radial-gradient(circle at 25% 35%, rgba(255, 255, 255, 0.02) 0%, transparent 20%),
    radial-gradient(circle at 65% 55%, rgba(200, 200, 255, 0.015) 0%, transparent 15%),
    radial-gradient(circle at 45% 80%, rgba(180, 150, 255, 0.02) 0%, transparent 18%);
  animation: dustFloat 40s ease-in-out infinite;
}

@keyframes nebulaPulse {
  0%, 100% { 
    opacity: 0.85;
    transform: scale(1);
  }
  33% { 
    opacity: 1;
    transform: scale(1.03);
  }
  66% { 
    opacity: 0.9;
    transform: scale(1.01);
  }
}

@keyframes nebulaDrift {
  0%, 100% { 
    transform: translate(0, 0) scale(1);
    opacity: 0.6;
  }
  25% { 
    transform: translate(20px, -10px) scale(1.02);
    opacity: 0.7;
  }
  50% { 
    transform: translate(-10px, 15px) scale(1.01);
    opacity: 0.5;
  }
  75% { 
    transform: translate(15px, 5px) scale(1.03);
    opacity: 0.65;
  }
}

@keyframes nebulaDriftReverse {
  0%, 100% { 
    transform: translate(0, 0) scale(1);
    opacity: 0.4;
  }
  33% { 
    transform: translate(-15px, 10px) scale(1.02);
    opacity: 0.5;
  }
  66% { 
    transform: translate(10px, -5px) scale(0.99);
    opacity: 0.35;
  }
}

@keyframes dustFloat {
  0%, 100% { 
    transform: translate(0, 0);
    opacity: 0.8;
  }
  50% { 
    transform: translate(30px, -20px);
    opacity: 1;
  }
}

/* ============================================
   STAR FIELD LAYERS - ENHANCED
   ============================================ */

.star-field {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.star-distant {
  position: absolute;
  width: 1px;
  height: 1px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  animation: twinkleDistant 5s ease-in-out infinite;
}

.star-small {
  position: absolute;
  width: 1px;
  height: 1px;
  background: var(--star-white);
  border-radius: 50%;
  animation: twinkle 3s ease-in-out infinite;
}

.star-medium {
  position: absolute;
  width: 2px;
  height: 2px;
  background: var(--star-blue);
  border-radius: 50%;
  box-shadow: 0 0 4px var(--star-blue), 0 0 8px rgba(165, 243, 252, 0.3);
  animation: twinkle 4s ease-in-out infinite;
}

.star-large {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--star-purple);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--star-purple), 0 0 12px rgba(232, 121, 249, 0.4);
  animation: twinkleBright 5s ease-in-out infinite;
}

.star-bright {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 
    0 0 8px #ffffff,
    0 0 16px rgba(255, 255, 255, 0.5),
    0 0 24px rgba(165, 243, 252, 0.3);
  animation: starBrightPulse 6s ease-in-out infinite;
}

.star-blue-giant {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #60a5fa;
  border-radius: 50%;
  box-shadow: 
    0 0 10px #60a5fa,
    0 0 20px rgba(96, 165, 250, 0.5),
    0 0 30px rgba(96, 165, 250, 0.3);
  animation: blueGiantPulse 8s ease-in-out infinite;
}

.shooting-star {
  position: absolute;
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan-primary), rgba(0, 255, 255, 0.5), transparent);
  animation: shootingStar 8s linear infinite;
  opacity: 0;
  box-shadow: 0 0 6px var(--cyan-glow);
}

.shooting-star-long {
  position: absolute;
  width: 200px;
  height: 1px;
  background: linear-gradient(90deg, #ffffff, var(--cyan-primary), transparent);
  animation: shootingStarLong 15s linear infinite;
  opacity: 0;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

@keyframes twinkleDistant {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.5; }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

@keyframes twinkleBright {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.5); }
}

@keyframes starBrightPulse {
  0%, 100% { 
    opacity: 0.7; 
    transform: scale(1);
    box-shadow: 
      0 0 8px #ffffff,
      0 0 16px rgba(255, 255, 255, 0.5),
      0 0 24px rgba(165, 243, 252, 0.3);
  }
  50% { 
    opacity: 1; 
    transform: scale(1.3);
    box-shadow: 
      0 0 12px #ffffff,
      0 0 24px rgba(255, 255, 255, 0.7),
      0 0 36px rgba(165, 243, 252, 0.5);
  }
}

@keyframes blueGiantPulse {
  0%, 100% { 
    opacity: 0.6; 
    transform: scale(1);
  }
  50% { 
    opacity: 1; 
    transform: scale(1.2);
  }
}

@keyframes shootingStar {
  0% { 
    transform: translateX(-120px) translateY(0) rotate(-15deg);
    opacity: 0;
  }
  5% { opacity: 1; }
  15% { 
    transform: translateX(calc(100vw + 120px)) translateY(150px) rotate(-15deg);
    opacity: 0;
  }
  100% { opacity: 0; }
}

@keyframes shootingStarLong {
  0% { 
    transform: translateX(-200px) translateY(0) rotate(-20deg);
    opacity: 0;
  }
  3% { opacity: 0.8; }
  10% { 
    transform: translateX(calc(100vw + 200px)) translateY(200px) rotate(-20deg);
    opacity: 0;
  }
  100% { opacity: 0; }
}

.star-bright {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 
    0 0 8px #ffffff,
    0 0 16px rgba(255, 255, 255, 0.5),
    0 0 24px rgba(165, 243, 252, 0.3);
  animation: starBrightPulse 6s ease-in-out infinite;
}

.star-blue-giant {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #60a5fa;
  border-radius: 50%;
  box-shadow: 
    0 0 10px #60a5fa,
    0 0 20px rgba(96, 165, 250, 0.5),
    0 0 30px rgba(96, 165, 250, 0.3);
  animation: blueGiantPulse 8s ease-in-out infinite;
}

.star-large {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--star-purple);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--star-purple), 0 0 12px rgba(232, 121, 249, 0.4);
  animation: twinkleBright 5s ease-in-out infinite;
}

.shooting-star {
  position: absolute;
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, var(--cyan-primary), rgba(0, 255, 255, 0.5), transparent);
  animation: shootingStar 8s linear infinite;
  opacity: 0;
  box-shadow: 0 0 6px var(--cyan-glow);
}

.shooting-star-long {
  position: absolute;
  width: 200px;
  height: 1px;
  background: linear-gradient(90deg, #ffffff, var(--cyan-primary), transparent);
  animation: shootingStarLong 15s linear infinite;
  opacity: 0;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

@keyframes twinkleDistant {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.5; }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

@keyframes twinkleBright {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.5); }
}

@keyframes starBrightPulse {
  0%, 100% { 
    opacity: 0.7; 
    transform: scale(1);
    box-shadow: 
      0 0 8px #ffffff,
      0 0 16px rgba(255, 255, 255, 0.5),
      0 0 24px rgba(165, 243, 252, 0.3);
  }
  50% { 
    opacity: 1; 
    transform: scale(1.3);
    box-shadow: 
      0 0 12px #ffffff,
      0 0 24px rgba(255, 255, 255, 0.7),
      0 0 36px rgba(165, 243, 252, 0.5);
  }
}

@keyframes blueGiantPulse {
  0%, 100% { 
    opacity: 0.6; 
    transform: scale(1);
  }
  50% { 
    opacity: 1; 
    transform: scale(1.2);
  }
}

@keyframes shootingStar {
  0% { 
    transform: translateX(-120px) translateY(0) rotate(-15deg);
    opacity: 0;
  }
  5% { opacity: 1; }
  15% { 
    transform: translateX(calc(100vw + 120px)) translateY(150px) rotate(-15deg);
    opacity: 0;
  }
  100% { opacity: 0; }
}

/* ============================================
   SCANLINES & HOLOGRAPHIC OVERLAY
   ============================================ */

.scanlines {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.05) 2px,
    rgba(0, 0, 0, 0.05) 4px
  );
  opacity: 0.4;
}

.holographic-grid {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: 
    linear-gradient(transparent 50%, rgba(0, 255, 255, 0.02) 50%);
  background-size: 100% 4px;
  opacity: 0.5;
}

/* Horizontal Scan Line */
.scan-line {
  position: fixed;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--cyan-primary),
    var(--magenta-primary),
    transparent
  );
  box-shadow: 0 0 15px var(--cyan-glow), 0 0 30px var(--magenta-glow);
  animation: scanDown 10s linear infinite;
  z-index: 3;
  pointer-events: none;
  opacity: 0.7;
}

@keyframes scanDown {
  0% { top: -2px; }
  100% { top: 100%; }
}

/* ============================================
   GLASSMORPHISM PANELS - COSMIC STYLE
   ============================================ */

.glass-panel {
  background: var(--bg-panel);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: var(--border-glow);
  border-radius: 12px;
  box-shadow: var(--shadow-panel), var(--shadow-glow);
  position: relative;
  overflow: hidden;
}

.glass-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--cyan-primary),
    var(--magenta-primary),
    transparent
  );
  opacity: 0.6;
}

/* Corner Decorations - Cosmic Style */
.glass-panel::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  border-top: 2px solid var(--cyan-primary);
  border-left: 2px solid var(--cyan-primary);
  border-radius: 4px 0 0 0;
  box-shadow: 0 0 10px var(--cyan-glow);
}

/* ============================================
   COSMIC LOGO
   ============================================ */

.cyber-logo-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.cyber-logo {
  position: relative;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cyber-logo-frame {
  position: absolute;
  inset: 0;
  border: 2px solid var(--cyan-primary);
  border-radius: 16px;
  animation: logoFramePulse 4s ease-in-out infinite;
  box-shadow: 
    0 0 30px var(--cyan-glow),
    0 0 60px rgba(0, 255, 255, 0.2),
    inset 0 0 30px rgba(0, 255, 255, 0.1);
}

.cyber-logo-frame::before,
.cyber-logo-frame::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid var(--magenta-primary);
  box-shadow: 0 0 10px var(--magenta-glow);
}

.cyber-logo-frame::before {
  top: -6px;
  left: -6px;
  border-right: none;
  border-bottom: none;
}

.cyber-logo-frame::after {
  bottom: -6px;
  right: -6px;
  border-left: none;
  border-top: none;
}

@keyframes logoFramePulse {
  0%, 100% { 
    transform: scale(1) rotate(0deg);
    box-shadow: 
      0 0 30px var(--cyan-glow),
      0 0 60px rgba(0, 255, 255, 0.2),
      inset 0 0 30px rgba(0, 255, 255, 0.1);
  }
  50% { 
    transform: scale(1.02) rotate(1deg);
    box-shadow: 
      0 0 50px var(--cyan-glow),
      0 0 80px rgba(0, 255, 255, 0.3),
      inset 0 0 40px rgba(0, 255, 255, 0.15);
  }
}

.cyber-logo-inner {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, 
    rgba(107, 33, 168, 0.3), 
    rgba(30, 58, 138, 0.3),
    rgba(190, 24, 93, 0.2)
  );
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: 
    inset 0 0 30px rgba(0, 255, 255, 0.1),
    0 0 20px rgba(107, 33, 168, 0.3);
}

.cyber-logo-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(0, 255, 255, 0.3) 50%,
    transparent 70%
  );
  animation: logoShine 4s ease-in-out infinite;
}

@keyframes logoShine {
  0% { transform: translateX(-100%) rotate(0deg); }
  100% { transform: translateX(100%) rotate(0deg); }
}

.cyber-logo-text {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 900;
  color: var(--cyan-primary);
  text-shadow: 
    0 0 20px var(--cyan-glow),
    0 0 40px rgba(0, 255, 255, 0.3);
  position: relative;
  z-index: 1;
}

/* ============================================
   COSMIC TITLE
   ============================================ */

.cyber-title {
  font-family: var(--font-display);
  font-size: clamp(48px, 10vw, 80px);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  position: relative;
  background: linear-gradient(
    90deg,
    var(--cyan-primary) 0%,
    var(--star-purple) 50%,
    var(--magenta-primary) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: titleGradient 6s linear infinite;
}

@keyframes titleGradient {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* Advanced Title with Pulsing Glow */
.cyber-title-advanced {
  font-family: var(--font-display);
  font-size: clamp(48px, 10vw, 80px);
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  position: relative;
  color: var(--cyan-primary);
  text-shadow: 
    0 0 10px var(--cyan-glow),
    0 0 20px var(--cyan-glow),
    0 0 40px rgba(0, 255, 255, 0.3),
    0 0 80px rgba(107, 33, 168, 0.2);
  animation: cosmicTitlePulse 4s ease-in-out infinite;
}

@keyframes cosmicTitlePulse {
  0%, 100% {
    text-shadow: 
      0 0 10px var(--cyan-glow),
      0 0 20px var(--cyan-glow),
      0 0 40px rgba(0, 255, 255, 0.3),
      0 0 80px rgba(107, 33, 168, 0.2);
    color: var(--cyan-primary);
  }
  33% {
    text-shadow: 
      0 0 15px rgba(232, 121, 249, 0.5),
      0 0 30px rgba(232, 121, 249, 0.4),
      0 0 50px rgba(190, 24, 93, 0.3);
    color: #e879f9;
  }
  66% {
    text-shadow: 
      0 0 20px var(--magenta-glow),
      0 0 40px var(--magenta-glow),
      0 0 60px rgba(255, 0, 255, 0.4);
    color: var(--magenta-primary);
  }
}

.cyber-subtitle {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 8px;
}

/* Flicker Effect */
.flicker {
  animation: flicker 0.2s infinite;
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
  75% { opacity: 0.95; }
}

/* Glitch Effect */
.glitch {
  position: relative;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch::before {
  animation: glitch-1 0.4s infinite linear alternate-reverse;
  color: var(--cyan-primary);
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  opacity: 0.8;
}

.glitch::after {
  animation: glitch-2 0.4s infinite linear alternate-reverse;
  color: var(--magenta-primary);
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  opacity: 0.8;
}

@keyframes glitch-1 {
  0% { transform: translateX(0); }
  100% { transform: translateX(-3px); }
}

@keyframes glitch-2 {
  0% { transform: translateX(0); }
  100% { transform: translateX(3px); }
}

/* ============================================
   STATUS INDICATORS
   ============================================ */

.status-bar {
  display: flex;
  gap: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan-primary);
  box-shadow: 0 0 10px var(--cyan-glow);
  animation: statusPulse 2s ease-in-out infinite;
}

.status-indicator.active {
  background: #00ff88;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
}

.status-indicator.warning {
  background: #ffaa00;
  box-shadow: 0 0 10px rgba(255, 170, 0, 0.6);
}

.status-indicator.error {
  background: #ff3366;
  box-shadow: 0 0 10px rgba(255, 51, 102, 0.6);
}

@keyframes statusPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.9); }
}

/* ============================================
   CTA BUTTON - COSMIC STYLE
   ============================================ */

.cyber-button-cta {
  position: relative;
  padding: 18px 56px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--magenta-primary);
  background: transparent;
  border: 2px solid var(--magenta-primary);
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 
    0 0 25px rgba(255, 0, 255, 0.3),
    0 0 50px rgba(190, 24, 93, 0.2),
    inset 0 0 25px rgba(255, 0, 255, 0.1);
}

.cyber-button-cta::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 0, 255, 0.5),
    rgba(107, 33, 168, 0.3),
    transparent
  );
  transition: left 0.6s ease;
}

.cyber-button-cta::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px solid rgba(255, 0, 255, 0.4);
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.3s ease;
  box-shadow: 0 0 20px var(--magenta-glow);
}

.cyber-button-cta:hover {
  transform: scale(1.05);
  background: rgba(255, 0, 255, 0.15);
  box-shadow: 
    0 0 50px rgba(255, 0, 255, 0.6),
    0 0 100px rgba(190, 24, 93, 0.4),
    inset 0 0 40px rgba(255, 0, 255, 0.2);
  text-shadow: 0 0 25px var(--magenta-glow);
}

.cyber-button-cta:hover::before {
  left: 100%;
}

.cyber-button-cta:hover::after {
  opacity: 1;
}

/* ============================================
   CORNER BRACKETS
   ============================================ */

.corner-brackets {
  position: relative;
  padding: 20px 40px;
}

.corner-brackets::before,
.corner-brackets::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 30px;
  border: 2px solid var(--cyan-primary);
  box-shadow: 0 0 10px var(--cyan-glow);
}

.corner-brackets::before {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
}

.corner-brackets::after {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
}

/* ============================================
   TERMINAL TEXT EFFECT
   ============================================ */

.terminal-text {
  font-family: var(--font-mono);
  color: var(--cyan-primary);
  text-shadow: 0 0 8px var(--cyan-glow);
}

.terminal-cursor {
  display: inline-block;
  width: 10px;
  height: 18px;
  background: var(--cyan-primary);
  margin-left: 4px;
  animation: cursorBlink 1s step-end infinite;
  box-shadow: 0 0 10px var(--cyan-glow);
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Click Prompt Animation */
.click-prompt {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
  animation: promptPulse 2.5s ease-in-out infinite;
}

@keyframes promptPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; color: var(--cyan-primary); }
}

/* ============================================
   SIDEBAR DATA MODULES - COSMIC STYLE
   ============================================ */

.sidebar-module {
  position: relative;
  background: rgba(13, 13, 43, 0.7);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(0, 255, 255, 0.25);
  padding: 16px;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  overflow: hidden;
  box-shadow: 
    0 0 20px rgba(0, 255, 255, 0.1),
    inset 0 0 30px rgba(107, 33, 168, 0.1);
}

/* Angular Corner Shapes */
.sidebar-module::before,
.sidebar-module::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
}

.sidebar-module::before {
  top: 0;
  right: 0;
  border-top: 10px solid var(--cyan-primary);
  border-left: 10px solid transparent;
  filter: drop-shadow(0 0 5px var(--cyan-glow));
}

.sidebar-module::after {
  bottom: 0;
  left: 0;
  border-bottom: 10px solid var(--magenta-primary);
  border-right: 10px solid transparent;
  filter: drop-shadow(0 0 5px var(--magenta-glow));
}

.sidebar-module-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 255, 255, 0.2);
  color: var(--cyan-primary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 0 0 5px var(--cyan-glow);
}

.sidebar-module-header svg {
  width: 14px;
  height: 14px;
  opacity: 0.9;
  filter: drop-shadow(0 0 3px var(--cyan-glow));
}

/* Status Bar */
.status-bar-mock {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  font-size: 10px;
}

.status-bar-mock .label {
  color: var(--text-muted);
  min-width: 60px;
}

.status-bar-mock .bar {
  flex: 1;
  height: 8px;
  background: rgba(0, 255, 255, 0.1);
  border: 1px solid rgba(0, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}

.status-bar-mock .bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cyan-primary), var(--magenta-primary), var(--nebula-purple));
  animation: barPulse 2s ease-in-out infinite;
  box-shadow: 0 0 10px var(--cyan-glow);
}

@keyframes barPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.status-bar-mock .value {
  color: var(--cyan-primary);
  font-size: 9px;
  text-shadow: 0 0 5px var(--cyan-glow);
}

/* Data Link Status */
.data-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0, 255, 255, 0.1);
}

.data-link:last-child {
  border-bottom: none;
}

.data-link .link-id {
  color: var(--text-muted);
  min-width: 50px;
}

.data-link .link-bar {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
}

.data-link .link-bar .filled {
  color: var(--cyan-primary);
  text-shadow: 0 0 5px var(--cyan-glow);
}

.data-link .link-bar .empty {
  color: var(--text-muted);
  opacity: 0.3;
}

.data-link .link-status {
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 2px;
  text-transform: uppercase;
}

.data-link .link-status.connected {
  background: rgba(0, 255, 136, 0.2);
  color: #00ff88;
  border: 1px solid rgba(0, 255, 136, 0.4);
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.2);
}

.data-link .link-status.pending {
  background: rgba(255, 170, 0, 0.2);
  color: #ffaa00;
  border: 1px solid rgba(255, 170, 0, 0.4);
  box-shadow: 0 0 8px rgba(255, 170, 0, 0.2);
}

.data-link .link-status.offline {
  background: rgba(255, 51, 102, 0.2);
  color: #ff3366;
  border: 1px solid rgba(255, 51, 102, 0.4);
  box-shadow: 0 0 8px rgba(255, 51, 102, 0.2);
}

/* ============================================
   STATUS DISPLAY
   ============================================ */

.system-status-display {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.status-module {
  text-align: center;
  padding: 12px;
  background: rgba(0, 255, 255, 0.05);
  border: 1px solid rgba(0, 255, 255, 0.2);
  position: relative;
}

.status-module::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan-primary), var(--magenta-primary));
  box-shadow: 0 0 10px var(--cyan-glow);
}

.status-module .value {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--cyan-primary);
  text-shadow: 0 0 15px var(--cyan-glow);
}

.status-module .label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-top: 4px;
}

/* ============================================
   ANIMATED BORDER
   ============================================ */

.animated-border {
  position: relative;
}

.animated-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border: 2px solid transparent;
  background: linear-gradient(90deg, var(--cyan-primary), var(--magenta-primary), var(--nebula-purple), var(--cyan-primary)) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: borderRotate 4s linear infinite;
  border-radius: 14px;
}

@keyframes borderRotate {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ============================================
   SERVICE WARNING BANNER
   ============================================ */

.service-warning {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 12px 24px;
  background: linear-gradient(90deg, rgba(255, 51, 102, 0.25), rgba(190, 24, 93, 0.15));
  border-bottom: 1px solid rgba(255, 51, 102, 0.5);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ff6688;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 1000;
  backdrop-filter: blur(15px);
  box-shadow: 0 0 30px rgba(255, 51, 102, 0.2);
}

.service-warning .indicator {
  width: 8px;
  height: 8px;
  background: #ff3366;
  border-radius: 50%;
  animation: errorPulse 1s ease-in-out infinite;
  box-shadow: 0 0 15px rgba(255, 51, 102, 0.8);
}

@keyframes errorPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255, 51, 102, 0.8); }
  50% { box-shadow: 0 0 20px rgba(255, 51, 102, 1); }
}

/* ============================================
   CANVAS PARTICLE BACKGROUND
   ============================================ */

#particle-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
  .cyber-title {
    font-size: 36px;
    letter-spacing: 0.05em;
  }
  
  .cyber-title-advanced {
    font-size: 36px;
  }
  
  .cyber-logo {
    width: 100px;
    height: 100px;
  }
  
  .cyber-logo-inner {
    width: 70px;
    height: 70px;
  }
  
  .cyber-logo-text {
    font-size: 40px;
  }
  
  .status-bar {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
  
  .system-status-display {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  
  .sidebar-module {
    padding: 12px;
  }
  
  .cyber-button-cta {
    padding: 14px 36px;
    font-size: 12px;
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.text-cyan { color: var(--cyan-primary); }
.text-magenta { color: var(--magenta-primary); }
.text-muted { color: var(--text-muted); }

.glow-cyan { text-shadow: 0 0 15px var(--cyan-glow); }
.glow-magenta { text-shadow: 0 0 15px var(--magenta-glow); }

.border-glow { border: var(--border-glow); }
.shadow-glow { box-shadow: var(--shadow-glow); }

.font-mono { font-family: var(--font-mono); }
.font-display { font-family: var(--font-display); }

/* ============================================
   HERO SECTION - ADVANCED EFFECTS
   ============================================ */

.hero-title-pulsing {
  font-family: var(--font-display);
  font-size: clamp(48px, 10vw, 80px);
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  position: relative;
  color: var(--cyan-primary);
  animation: heroTitlePulse 4s ease-in-out infinite;
}

@keyframes heroTitlePulse {
  0%, 100% {
    color: var(--cyan-primary);
    text-shadow: 
      0 0 10px var(--cyan-glow),
      0 0 20px var(--cyan-glow),
      0 0 40px rgba(0, 255, 255, 0.4),
      0 0 80px rgba(0, 255, 255, 0.2);
  }
  33% {
    color: #a5f3fc;
    text-shadow: 
      0 0 15px rgba(165, 243, 252, 0.6),
      0 0 30px rgba(165, 243, 252, 0.4),
      0 0 50px rgba(165, 243, 252, 0.3);
  }
  66% {
    color: #e879f9;
    text-shadow: 
      0 0 15px rgba(232, 121, 249, 0.6),
      0 0 30px rgba(232, 121, 249, 0.4),
      0 0 50px rgba(190, 24, 93, 0.3);
  }
}

.typing-cursor {
  display: inline-block;
  color: var(--cyan-primary);
  font-size: 1em;
  margin-left: 2px;
  text-shadow: 0 0 10px var(--cyan-glow);
  animation: cursorBlink 0.8s step-end infinite;
}

.typing-cursor-small {
  display: inline-block;
  color: var(--cyan-primary);
  font-size: 0.9em;
  margin-left: 2px;
  text-shadow: 0 0 8px var(--cyan-glow);
  animation: cursorBlink 0.6s step-end infinite;
}

.hero-status-text {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-top: 12px;
  min-height: 20px;
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.2);
}

/* ============================================
   HERO CTA BUTTON - MAGENTA NEON
   ============================================ */

.hero-cta-button {
  position: relative;
  padding: 18px 56px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--magenta-primary);
  background: transparent;
  border: none;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  margin-top: 32px;
}

.hero-cta-button .button-text {
  position: relative;
  z-index: 3;
}

.hero-cta-button .button-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 0, 255, 0.15),
    rgba(107, 33, 168, 0.1),
    transparent
  );
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  z-index: 1;
}

.hero-cta-button .button-border {
  position: absolute;
  inset: 0;
  border: 2px solid var(--magenta-primary);
  box-shadow: 
    0 0 20px rgba(255, 0, 255, 0.4),
    0 0 40px rgba(255, 0, 255, 0.2),
    inset 0 0 20px rgba(255, 0, 255, 0.1);
  transition: all 0.4s ease;
  z-index: 2;
}

.hero-cta-button::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 1px solid rgba(255, 0, 255, 0.3);
  opacity: 0;
  transition: all 0.4s ease;
  z-index: 0;
}

.hero-cta-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(255, 0, 255, 0.3) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  transition: all 0.5s ease;
  z-index: 0;
}

.hero-cta-button:hover {
  transform: scale(1.03);
  color: #ff66ff;
}

.hero-cta-button:hover .button-glow {
  transform: translateX(100%);
}

.hero-cta-button:hover .button-border {
  box-shadow: 
    0 0 40px rgba(255, 0, 255, 0.7),
    0 0 80px rgba(255, 0, 255, 0.4),
    0 0 120px rgba(255, 0, 255, 0.2),
    inset 0 0 30px rgba(255, 0, 255, 0.15);
  border-color: #ff66ff;
}

.hero-cta-button:hover::before {
  opacity: 1;
  box-shadow: 0 0 30px rgba(255, 0, 255, 0.5);
}

.hero-cta-button:hover::after {
  width: 200%;
  height: 200%;
}

.hero-cta-button:active {
  transform: scale(0.98);
}

/* ============================================
   QUANTUM GRID OVERLAY
   ============================================ */

.quantum-grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: 
    linear-gradient(90deg, transparent 49.5%, rgba(0, 255, 255, 0.015) 50%, transparent 50.5%),
    linear-gradient(0deg, transparent 49.5%, rgba(0, 255, 255, 0.015) 50%, transparent 50.5%);
  background-size: 60px 60px;
  animation: quantumGridPulse 8s ease-in-out infinite;
}

@keyframes quantumGridPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.5; }
}

/* ============================================
   QUANTUM CONCEPT VISUAL (CSS ALTERNATIVE)
   ============================================ */

.quantum-concept-bg {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.15;
}

.quantum-concept-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 100% 100% at 30% 30%, rgba(0, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse 80% 80% at 70% 70%, rgba(255, 0, 255, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse 60% 60% at 50% 50%, rgba(107, 33, 168, 0.1) 0%, transparent 50%);
  animation: quantumWave 12s ease-in-out infinite;
}

.quantum-concept-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    conic-gradient(from 0deg at 50% 50%, 
      transparent 0deg, 
      rgba(0, 255, 255, 0.03) 30deg, 
      transparent 60deg,
      rgba(255, 0, 255, 0.03) 90deg,
      transparent 120deg,
      rgba(107, 33, 168, 0.03) 150deg,
      transparent 180deg,
      rgba(0, 255, 255, 0.03) 210deg,
      transparent 240deg,
      rgba(255, 0, 255, 0.03) 270deg,
      transparent 300deg,
      rgba(107, 33, 168, 0.03) 330deg,
      transparent 360deg
    );
  animation: quantumRotate 30s linear infinite;
}

@keyframes quantumWave {
  0%, 100% { 
    transform: scale(1) rotate(0deg);
    opacity: 0.8;
  }
  50% { 
    transform: scale(1.1) rotate(5deg);
    opacity: 1;
  }
}

@keyframes quantumRotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ============================================
   RESPONSIVE HERO
   ============================================ */

@media (max-width: 768px) {
  .hero-title-pulsing {
    font-size: 36px;
    letter-spacing: 0.08em;
  }
  
  .hero-status-text {
    font-size: 11px;
    letter-spacing: 0.15em;
  }
  
  .hero-cta-button {
    padding: 14px 36px;
    font-size: 12px;
  }
  
  .quantum-grid-overlay {
    background-size: 40px 40px;
  }
}

/* ============================================
   ADVANCED SCI-FI POLISH
   ============================================ */

/* Geometric Border-Image Pattern */
.panel-geometric-border {
  position: relative;
  border: 2px solid transparent;
  background: 
    linear-gradient(var(--bg-panel), var(--bg-panel)) padding-box,
    linear-gradient(
      90deg,
      var(--cyan-primary) 0%,
      transparent 10%,
      var(--cyan-primary) 20%,
      transparent 30%,
      var(--magenta-primary) 40%,
      transparent 50%,
      var(--cyan-primary) 60%,
      transparent 70%,
      var(--magenta-primary) 80%,
      transparent 90%,
      var(--cyan-primary) 100%
    ) border-box;
  border-radius: 8px;
  animation: borderGlowShift 4s linear infinite;
}

.panel-geometric-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid transparent;
  background: 
    linear-gradient(45deg, 
      transparent 45%, 
      var(--cyan-primary) 45%, 
      var(--cyan-primary) 55%, 
      transparent 55%
    );
  background-size: 8px 8px;
  opacity: 0.3;
  pointer-events: none;
  animation: borderPatternMove 20s linear infinite;
}

@keyframes borderGlowShift {
  0% { filter: brightness(1) drop-shadow(0 0 5px var(--cyan-glow)); }
  50% { filter: brightness(1.2) drop-shadow(0 0 15px var(--cyan-glow)); }
  100% { filter: brightness(1) drop-shadow(0 0 5px var(--cyan-glow)); }
}

@keyframes borderPatternMove {
  0% { background-position: 0 0; }
  100% { background-position: 80px 80px; }
}

/* Hero Panel with Geometric Border */
.hero-panel-advanced {
  position: relative;
  padding: 40px 60px;
  background: var(--bg-panel);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.hero-panel-advanced::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  background: 
    linear-gradient(var(--bg-panel), var(--bg-panel)) padding-box,
    repeating-linear-gradient(
      90deg,
      var(--cyan-primary) 0px,
      var(--cyan-primary) 2px,
      transparent 2px,
      transparent 8px,
      var(--magenta-primary) 8px,
      var(--magenta-primary) 10px,
      transparent 10px,
      transparent 16px
    ) border-box;
  border-radius: 12px;
  animation: heroBorderPulse 3s ease-in-out infinite;
}

.hero-panel-advanced::after {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 8px;
  pointer-events: none;
}

@keyframes heroBorderPulse {
  0%, 100% { 
    box-shadow: 
      0 0 20px var(--cyan-glow),
      inset 0 0 20px rgba(0, 255, 255, 0.05);
  }
  50% { 
    box-shadow: 
      0 0 40px var(--cyan-glow),
      0 0 60px var(--magenta-glow),
      inset 0 0 30px rgba(0, 255, 255, 0.1);
  }
}

/* ============================================
   FLICKER EFFECTS
   ============================================ */

.holographic-flicker {
  animation: holoFlicker 0.15s infinite;
}

@keyframes holoFlicker {
  0%, 100% { opacity: 1; }
  5% { opacity: 0.95; }
  10% { opacity: 1; }
  15% { opacity: 0.97; }
  20% { opacity: 1; }
  50% { opacity: 0.98; }
  80% { opacity: 1; }
  85% { opacity: 0.96; }
}

.status-flicker {
  animation: statusFlicker 4s ease-in-out infinite;
}

@keyframes statusFlicker {
  0%, 100% { opacity: 1; }
  10% { opacity: 0.95; }
  20% { opacity: 1; }
  30% { opacity: 0.97; }
  40% { opacity: 1; }
  50% { opacity: 0.98; }
  60% { opacity: 1; }
  70% { opacity: 0.96; }
  80% { opacity: 1; }
  90% { opacity: 0.98; }
}

.text-flicker-soft {
  animation: textFlickerSoft 5s ease-in-out infinite;
}

@keyframes textFlickerSoft {
  0%, 100% { opacity: 1; text-shadow: 0 0 10px var(--cyan-glow); }
  25% { opacity: 0.95; }
  50% { opacity: 1; text-shadow: 0 0 15px var(--cyan-glow); }
  75% { opacity: 0.97; }
}

.intermittent-flicker {
  animation: intermittentFlicker 8s ease-in-out infinite;
}

@keyframes intermittentFlicker {
  0%, 20% { opacity: 1; }
  21% { opacity: 0.8; }
  22% { opacity: 1; }
  40%, 60% { opacity: 1; }
  61% { opacity: 0.85; }
  62% { opacity: 0.95; }
  63% { opacity: 1; }
  80%, 100% { opacity: 1; }
}

.log-flicker {
  animation: logFlicker 6s steps(1) infinite;
}

@keyframes logFlicker {
  0%, 100% { opacity: 1; }
  15% { opacity: 0.9; }
  16% { opacity: 1; }
  45% { opacity: 1; }
  46% { opacity: 0.85; }
  47% { opacity: 1; }
  75% { opacity: 1; }
  76% { opacity: 0.92; }
  77% { opacity: 1; }
}

/* ============================================
   ENHANCED CRT SCANLINE EFFECT
   ============================================ */

.crt-scanlines {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  background: 
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 1px,
      rgba(0, 0, 0, 0.08) 1px,
      rgba(0, 0, 0, 0.08) 2px
    );
  animation: crtFlicker 0.1s infinite;
}

@keyframes crtFlicker {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 1; }
}

.crt-scanlines::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    transparent 50%,
    rgba(0, 255, 255, 0.01) 50%
  );
  background-size: 100% 4px;
  animation: scanlineMove 0.08s linear infinite;
}

@keyframes scanlineMove {
  0% { transform: translateY(0); }
  100% { transform: translateY(4px); }
}

.crt-scanlines::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    rgba(0, 0, 0, 0.2) 90%,
    rgba(0, 0, 0, 0.4) 100%
  );
}

.horizontal-scan-beam {
  position: fixed;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 255, 255, 0.1) 10%,
    rgba(0, 255, 255, 0.4) 50%,
    rgba(0, 255, 255, 0.1) 90%,
    transparent 100%
  );
  box-shadow: 
    0 0 10px var(--cyan-glow),
    0 0 20px rgba(0, 255, 255, 0.3);
  animation: horizontalScan 12s linear infinite;
  z-index: 101;
  pointer-events: none;
  opacity: 0.6;
}

@keyframes horizontalScan {
  0% { 
    top: -3px;
    opacity: 0;
  }
  2% { opacity: 0.6; }
  98% { opacity: 0.6; }
  100% { 
    top: 100%;
    opacity: 0;
  }
}

/* Secondary scan beam - slower */
.horizontal-scan-beam-secondary {
  position: fixed;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 0, 255, 0.05) 20%,
    rgba(255, 0, 255, 0.2) 50%,
    rgba(255, 0, 255, 0.05) 80%,
    transparent 100%
  );
  box-shadow: 0 0 15px var(--magenta-glow);
  animation: horizontalScanSecondary 18s linear infinite;
  z-index: 101;
  pointer-events: none;
  opacity: 0.4;
}

@keyframes horizontalScanSecondary {
  0% { 
    top: -2px;
    opacity: 0;
  }
  3% { opacity: 0.4; }
  97% { opacity: 0.4; }
  100% { 
    top: 100%;
    opacity: 0;
  }
}

/* ============================================
   PARALLAX EFFECTS
   ============================================ */

.parallax-layer {
  transition: transform 0.1s ease-out;
  will-change: transform;
}

.parallax-layer-1 {
  transform: translateZ(0);
}

.parallax-layer-2 {
  transform: translateZ(-1px) scale(1.1);
}

.parallax-layer-3 {
  transform: translateZ(-2px) scale(1.2);
}

.panel-parallax {
  transition: transform 0.15s ease-out;
}

.panel-parallax:hover {
  transform: translateZ(10px) scale(1.01);
}

/* Sidebar Parallax */
.sidebar-parallax {
  transition: transform 0.2s ease-out;
}

/* Glass Panel with Parallax */
.glass-panel-parallax {
  background: var(--bg-panel);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: var(--border-glow);
  border-radius: 12px;
  box-shadow: var(--shadow-panel), var(--shadow-glow);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.glass-panel-parallax:hover {
  transform: translateY(-2px) scale(1.005);
  box-shadow: 
    var(--shadow-panel),
    0 0 40px var(--cyan-glow),
    0 0 60px rgba(0, 255, 255, 0.1);
}

/* ============================================
   DATA DASHBOARD ENHANCED
   ============================================ */

.data-dashboard {
  position: relative;
  padding: 20px;
  background: rgba(13, 13, 43, 0.8);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 8px;
}

.data-dashboard::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
  background: 
    linear-gradient(rgba(13, 13, 43, 0.8), rgba(13, 13, 43, 0.8)) padding-box,
    repeating-linear-gradient(
      90deg,
      var(--cyan-primary) 0px,
      var(--cyan-primary) 3px,
      transparent 3px,
      transparent 12px
    ) border-box;
  border-radius: 8px;
  pointer-events: none;
  animation: dashboardBorderGlow 5s ease-in-out infinite;
}

@keyframes dashboardBorderGlow {
  0%, 100% {
    filter: drop-shadow(0 0 5px var(--cyan-glow));
  }
  50% {
    filter: drop-shadow(0 0 15px var(--cyan-glow)) drop-shadow(0 0 25px var(--magenta-glow));
  }
}

/* ============================================
   ADVANCED STATUS BAR
   ============================================ */

.status-bar-advanced {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(0, 255, 255, 0.05);
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.status-bar-advanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 255, 255, 0.1),
    transparent
  );
  animation: statusShimmer 3s ease-in-out infinite;
}

@keyframes statusShimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  .hero-panel-advanced {
    padding: 24px 32px;
  }
  
  .data-dashboard {
    padding: 12px;
  }
  
  .crt-scanlines {
    background-size: 100% 3px;
  }
}

/* ============================================
   ANIMATED LIST COMPONENT
   ============================================ */

.animated-list {
  position: relative;
  max-height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
  background: rgba(13, 13, 43, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 8px;
  outline: none;
}

.animated-list.with-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.animated-list.with-scrollbar::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}

.animated-list.with-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--cyan-primary), var(--magenta-primary));
  border-radius: 3px;
}

.animated-list.with-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #00ffff, #ff66ff);
}

.list-gradient-top,
.list-gradient-bottom {
  position: sticky;
  left: 0;
  right: 0;
  height: 30px;
  pointer-events: none;
  z-index: 10;
}

.list-gradient-top {
  top: 0;
  background: linear-gradient(
    to bottom,
    rgba(13, 13, 43, 0.9) 0%,
    transparent 100%
  );
  margin: -12px -12px 0 -12px;
}

.list-gradient-bottom {
  bottom: 0;
  background: linear-gradient(
    to top,
    rgba(13, 13, 43, 0.9) 0%,
    transparent 100%
  );
  margin: 0 -12px -12px -12px;
}

.animated-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 8px;
  background: rgba(0, 255, 255, 0.03);
  border: 1px solid rgba(0, 255, 255, 0.1);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: listItemSlideIn 0.4s ease-out forwards;
  opacity: 0;
  transform: translateX(-20px);
}

@keyframes listItemSlideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animated-list-item:last-child {
  margin-bottom: 0;
}

.animated-list-item:hover,
.animated-list-item.hovered {
  background: rgba(0, 255, 255, 0.08);
  border-color: rgba(0, 255, 255, 0.3);
  transform: translateX(4px);
  box-shadow: 
    0 0 15px rgba(0, 255, 255, 0.1),
    inset 0 0 20px rgba(0, 255, 255, 0.05);
}

.animated-list-item.selected {
  background: linear-gradient(
    135deg,
    rgba(0, 255, 255, 0.15) 0%,
    rgba(255, 0, 255, 0.1) 100%
  );
  border-color: var(--cyan-primary);
  box-shadow: 
    0 0 20px rgba(0, 255, 255, 0.2),
    inset 0 0 30px rgba(0, 255, 255, 0.05);
}

.animated-list-item.selected::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--cyan-primary), var(--magenta-primary));
  border-radius: 3px 0 0 3px;
}

.item-index {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(0, 255, 255, 0.5);
  min-width: 24px;
  text-align: right;
}

.animated-list-item:hover .item-index,
.animated-list-item.selected .item-index {
  color: var(--cyan-primary);
}

.item-content {
  flex: 1;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.animated-list-item:hover .item-content,
.animated-list-item.selected .item-content {
  color: var(--text-primary);
}

.item-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(0, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.animated-list-item:hover .item-indicator {
  background: rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 10px var(--cyan-glow);
}

.animated-list-item.selected .item-indicator {
  background: var(--cyan-primary);
  border-color: var(--cyan-primary);
  box-shadow: 
    0 0 10px var(--cyan-glow),
    0 0 20px rgba(0, 255, 255, 0.3);
}

/* Focus styles for keyboard navigation */
.animated-list:focus {
  border-color: rgba(0, 255, 255, 0.4);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1);
}

.animated-list:focus .animated-list-item.selected {
  border-color: var(--magenta-primary);
  box-shadow: 
    0 0 25px rgba(255, 0, 255, 0.2),
    inset 0 0 30px rgba(255, 0, 255, 0.05);
}

/* ============================================
   NODE PALETTE - COSMIC THEME
   ============================================ */

.node-palette-container {
  background: rgba(20, 20, 20, 0.90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease;
  margin-left: 8px;
}

.node-palette-container:hover {
  border-color: rgba(255, 255, 255, 0.08);
}

.node-palette-resizer {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 12px;
  cursor: ew-resize;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.resizer-bar {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 48px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px 0 0 2px;
  transition: all 0.2s ease;
}

.node-palette-resizer:hover .resizer-bar {
  background: rgba(255, 255, 255, 0.25);
  height: 60px;
}

.resizer-icon {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: rgba(255, 255, 255, 0.2);
  opacity: 0;
  transition: all 0.2s ease;
}

.node-palette-resizer:hover .resizer-icon {
  opacity: 1;
  color: rgba(255, 255, 255, 0.5);
}

.node-palette-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.node-palette-title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0;
  text-transform: none;
  text-shadow: none;
}

.node-palette-gradient-top,
.node-palette-gradient-bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 30px;
  pointer-events: none;
  z-index: 5;
}

.node-palette-gradient-top {
  top: 55px;
  background: linear-gradient(
    to bottom,
    rgba(20, 20, 20, 0.95) 0%,
    transparent 100%
  );
}

.node-palette-gradient-bottom {
  bottom: 50px;
  background: linear-gradient(
    to top,
    rgba(20, 20, 20, 0.95) 0%,
    transparent 100%
  );
}

.node-palette-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.node-palette-list::-webkit-scrollbar {
  width: 4px;
}

.node-palette-list::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 2px;
}

.node-palette-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
}

.node-palette-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(0, 255, 255, 0.03);
  border: 1px solid rgba(0, 255, 255, 0.1);
  border-radius: 10px;
  cursor: grab;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  animation: nodeItemSlideIn 0.4s ease-out forwards;
  opacity: 0;
  transform: translateX(-20px);
  position: relative;
}

@keyframes nodeItemSlideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.node-palette-item:active {
  cursor: grabbing;
}

.node-palette-item:hover {
  background: rgba(0, 255, 255, 0.08);
  border-color: rgba(0, 255, 255, 0.3);
  transform: translateX(4px);
  box-shadow: 
    0 0 20px rgba(0, 255, 255, 0.1),
    inset 0 0 20px rgba(0, 255, 255, 0.03);
}

.node-palette-item:hover::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--cyan-primary), var(--magenta-primary));
  border-radius: 3px 0 0 3px;
}

.node-index {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(0, 255, 255, 0.4);
  min-width: 20px;
  text-align: right;
}

.node-palette-item:hover .node-index {
  color: var(--cyan-primary);
}

.node-icon {
  padding: 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.4);
  transition: all 0.3s ease;
}

.node-palette-item:hover .node-icon {
  background: rgba(0, 255, 255, 0.1);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
}

.node-label {
  flex: 1;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.05em;
  transition: color 0.3s ease;
}

.node-palette-item:hover .node-label {
  color: var(--text-primary);
}

.node-drag-indicator {
  opacity: 0;
  color: rgba(0, 255, 255, 0.4);
  transition: all 0.3s ease;
}

.node-palette-item:hover .node-drag-indicator {
  opacity: 1;
  color: var(--cyan-primary);
}

.node-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(0, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.node-palette-item:hover .node-indicator {
  background: var(--cyan-primary);
  border-color: var(--cyan-primary);
  box-shadow: 0 0 10px var(--cyan-glow);
}

.node-palette-footer {
  padding: 16px;
  border-top: 1px solid rgba(0, 255, 255, 0.1);
  text-align: center;
}

.node-palette-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(0, 255, 255, 0.4);
  letter-spacing: 0.05em;
}

/* ============================================
   WORKFLOW SIDEBAR - COSMIC THEME
   ============================================ */

.workflow-sidebar {
  background: rgba(13, 13, 43, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 16px;
  overflow: hidden;
}

.workflow-sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px;
  border-bottom: 1px solid rgba(0, 255, 255, 0.1);
}

.workflow-sidebar-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

.workflow-sidebar-content {
  padding: 16px;
}

.workflow-section-title {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(0, 255, 255, 0.5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 255, 255, 0.1);
}

/* ============================================
   WORKFLOW SIDEBAR PANEL
   ============================================ */

.workflow-sidebar-panel {
  position: absolute;
  top: 76px;
  right: 16px;
  bottom: 16px;
  z-index: 30;
  background: rgba(20, 20, 20, 0.90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  box-shadow: none;
}

.workflow-sidebar-toggle {
  display: flex;
  align-items: center;
  height: 56px;
  border-bottom: 1px solid rgba(0, 255, 255, 0.1);
  flex-shrink: 0;
}

.workflow-sidebar-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  color: rgba(0, 255, 255, 0.6);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.workflow-toggle-btn {
  padding: 8px;
  background: rgba(0, 255, 255, 0.05);
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 8px;
  color: rgba(0, 255, 255, 0.6);
  transition: all 0.3s ease;
}

.workflow-toggle-btn:hover {
  background: rgba(0, 255, 255, 0.1);
  color: var(--cyan-primary);
  border-color: var(--cyan-primary);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
}

.workflow-sidebar-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--cyan-primary) transparent;
}

.workflow-sidebar-scroll::-webkit-scrollbar {
  width: 4px;
}

.workflow-sidebar-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.workflow-sidebar-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--cyan-primary), var(--magenta-primary));
  border-radius: 2px;
}

.workflow-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 16px;
  padding: 24px;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

.workflow-empty-state:hover {
  opacity: 1;
}

.workflow-empty-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(0, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 255, 255, 0.2);
  box-shadow: inset 0 0 30px rgba(0, 255, 255, 0.05);
}

.workflow-empty-text {
  font-family: var(--font-display);
  font-size: 12px;
  color: rgba(0, 255, 255, 0.5);
  letter-spacing: 0.05em;
}

.workflow-node-details {
  padding: 24px;
  min-height: 100%;
}

.workflow-node-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 255, 255, 0.1);
}

.workflow-node-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.05em;
}

.workflow-status-indicator {
  width: 4px;
  height: 32px;
  border-radius: 2px;
  background: rgba(0, 255, 255, 0.3);
}

.workflow-status-indicator.idle {
  background: rgba(0, 255, 255, 0.3);
}

.workflow-status-indicator.running {
  background: linear-gradient(180deg, var(--cyan-primary), var(--magenta-primary));
  animation: statusPulse 1.5s ease-in-out infinite;
}

.workflow-status-indicator.completed {
  background: #00ff88;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

.workflow-status-indicator.error {
  background: #ff4444;
  box-shadow: 0 0 10px rgba(255, 68, 68, 0.5);
}

@keyframes statusPulse {
  0%, 100% { opacity: 1; transform: scaleY(1); }
  50% { opacity: 0.6; transform: scaleY(0.8); }
}

.workflow-node-id {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(0, 255, 255, 0.4);
  background: rgba(0, 255, 255, 0.05);
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid rgba(0, 255, 255, 0.1);
}

.workflow-sections {
  display: flex;
  flex-direction: column;
}

.workflow-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  color: rgba(0, 255, 255, 0.5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 255, 255, 0.1);
}

.workflow-section-dot {
  width: 4px;
  height: 4px;
  background: var(--cyan-primary);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--cyan-glow);
}

.workflow-config-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.workflow-config-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(0, 255, 255, 0.5);
  text-transform: capitalize;
  transition: color 0.3s ease;
}

.workflow-config-item:hover .workflow-config-label {
  color: var(--cyan-primary);
}

.workflow-config-value {
  font-size: 13px;
  color: var(--text-secondary);
  background: rgba(0, 255, 255, 0.03);
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(0, 255, 255, 0.1);
  transition: all 0.3s ease;
  word-break: break-word;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
}

.workflow-config-item:hover .workflow-config-value {
  border-color: rgba(0, 255, 255, 0.25);
  background: rgba(0, 255, 255, 0.05);
}

.workflow-no-config {
  font-size: 13px;
  color: rgba(0, 255, 255, 0.3);
  text-align: center;
  padding: 16px;
  background: rgba(0, 255, 255, 0.02);
  border-radius: 10px;
  border: 1px dashed rgba(0, 255, 255, 0.15);
}

.workflow-status-idle,
.workflow-status-running,
.workflow-status-completed {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  font-size: 13px;
}

.workflow-status-idle {
  color: rgba(0, 255, 255, 0.5);
  background: rgba(0, 255, 255, 0.03);
  border: 1px solid rgba(0, 255, 255, 0.1);
}

.workflow-status-running {
  color: var(--cyan-primary);
  background: rgba(0, 255, 255, 0.08);
  border: 1px solid rgba(0, 255, 255, 0.2);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.1);
}

.workflow-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(0, 255, 255, 0.2);
  border-top-color: var(--cyan-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.workflow-status-completed {
  color: #00ff88;
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid rgba(0, 255, 136, 0.2);
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.1);
}

.workflow-status-error {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  font-size: 13px;
  color: #ff6666;
  background: rgba(255, 68, 68, 0.08);
  border: 1px solid rgba(255, 68, 68, 0.2);
  box-shadow: 0 0 20px rgba(255, 68, 68, 0.1);
}

.workflow-result-container {
  background: rgba(0, 255, 255, 0.03);
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(0, 255, 255, 0.1);
}

.workflow-result-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(0, 255, 255, 0.5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

/* ============================================
   ANTIGRAVITY 3D PARTICLE CONTAINER
   ============================================ */

.antigravity-container {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.6;
  mix-blend-mode: screen;
}

.antigravity-container canvas {
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
}

/* ============================================
   CUBES BACKGROUND LAYER
   ============================================ */

.cubes-background-layer {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.4;
  overflow: hidden;
}

.cubes-background-layer .default-animation {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
}

.cubes-background-layer .default-animation--scene {
  transform-style: preserve-3d;
}

.cubes-background-layer .cube {
  transform-style: preserve-3d;
  transform: rotateX(0deg) rotateY(0deg);
  transition: transform 0.3s ease;
}

.cubes-background-layer .cube-face {
  background: rgba(13, 13, 43, 0.2) !important;
  border: 1px solid rgba(0, 255, 255, 0.1) !important;
  box-shadow: inset 0 0 20px rgba(0, 255, 255, 0.05);
}

/* ============================================
   ASCII TEXT HERO WRAPPER
   ============================================ */

.ascii-hero-wrapper {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 150px;
  pointer-events: none;
  opacity: 0.8;
  z-index: 0;
}

.ascii-hero-wrapper .ascii-text-container {
  pointer-events: none;
}

.ascii-hero-wrapper .ascii-text-container pre {
  background-image: radial-gradient(circle, #00ffff 0%, #ff00ff 50%, #a855f7 100%) !important;
  mix-blend-mode: screen !important;
  pointer-events: none;
}

.ascii-hero-wrapper .ascii-text-container canvas {
  pointer-events: none;
}

/* ============================================
   WORKFLOW PAGE - COSMIC THEME
   ============================================ */

.workflow-cosmic-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #010810;
}

.workflow-cosmic-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse 100% 80% at 20% 20%, rgba(107, 33, 168, 0.1) 0%, transparent 50%),
    radial-gradient(ellipse 80% 60% at 80% 80%, rgba(30, 58, 138, 0.08) 0%, transparent 45%),
    radial-gradient(ellipse 60% 40% at 50% 50%, rgba(190, 24, 93, 0.05) 0%, transparent 40%);
  animation: workflowNebulaPulse 20s ease-in-out infinite;
}

@keyframes workflowNebulaPulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.02); }
}

.workflow-grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: 
    linear-gradient(90deg, transparent 49.5%, rgba(0, 255, 255, 0.02) 50%, transparent 50.5%),
    linear-gradient(0deg, transparent 49.5%, rgba(0, 255, 255, 0.02) 50%, transparent 50.5%);
  background-size: 40px 40px;
  opacity: 0.5;
}

/* ============================================
   REACT FLOW CUSTOM STYLES
   ============================================ */

.react-flow {
  background: #000000 !important;
}

.react-flow__background {
  background: #000000 !important;
}

.react-flow__background pattern {
  fill: #000000 !important;
}

.react-flow__background line {
  stroke: rgba(255, 255, 255, 0.05) !important;
  stroke-width: 0.5 !important;
}

.react-flow__controls {
  background: rgba(13, 13, 43, 0.9) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(0, 255, 255, 0.2) !important;
  border-radius: 12px !important;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3) !important;
}

.react-flow__controls-button {
  background: transparent !important;
  border-bottom: 1px solid rgba(0, 255, 255, 0.1) !important;
  color: rgba(0, 255, 255, 0.6) !important;
  transition: all 0.3s ease !important;
}

.react-flow__controls-button:hover {
  background: rgba(0, 255, 255, 0.1) !important;
  color: var(--cyan-primary) !important;
}

.react-flow__controls-button:last-child {
  border-bottom: none !important;
}

.react-flow__minimap {
  background: rgba(13, 13, 43, 0.9) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(0, 255, 255, 0.2) !important;
  border-radius: 12px !important;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3) !important;
}

.react-flow__edge-path {
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(102, 126, 234, 0.5));
  transition: stroke 0.3s ease, filter 0.3s ease;
}

.react-flow__edge-path:hover {
  filter: drop-shadow(0 0 8px rgba(102, 126, 234, 0.8));
}

.react-flow__edge.selected .react-flow__edge-path {
  stroke: var(--cyan-primary) !important;
  filter: drop-shadow(0 0 10px var(--cyan-glow));
}

.react-flow__attribution {
  display: none !important;
}

/* ============================================
   WORKFLOW NODE STYLES - ENHANCED
   ============================================ */

.workflow-node {
  background: rgba(13, 13, 43, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(0, 255, 255, 0.15) !important;
  border-radius: 16px !important;
  box-shadow: 
    0 0 30px rgba(0, 0, 0, 0.4),
    inset 0 0 30px rgba(0, 255, 255, 0.02) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden;
}

.workflow-node:hover {
  border-color: rgba(0, 255, 255, 0.35) !important;
  box-shadow: 
    0 0 40px rgba(0, 255, 255, 0.1),
    inset 0 0 40px rgba(0, 255, 255, 0.03) !important;
  transform: translateY(-2px);
}

.workflow-node.selected {
  border-color: var(--cyan-primary) !important;
  box-shadow: 
    0 0 50px rgba(0, 255, 255, 0.2),
    0 0 100px rgba(0, 255, 255, 0.1),
    inset 0 0 50px rgba(0, 255, 255, 0.05) !important;
}

.workflow-node.running {
  border-color: #60a5fa !important;
  box-shadow: 
    0 0 30px rgba(96, 165, 250, 0.3),
    0 0 60px rgba(96, 165, 250, 0.15) !important;
  animation: nodeRunning 2s ease-in-out infinite;
}

@keyframes nodeRunning {
  0%, 100% { box-shadow: 0 0 30px rgba(96, 165, 250, 0.3), 0 0 60px rgba(96, 165, 250, 0.15); }
  50% { box-shadow: 0 0 50px rgba(96, 165, 250, 0.5), 0 0 80px rgba(96, 165, 250, 0.25); }
}

.workflow-node.completed {
  border-color: #00ff88 !important;
  box-shadow: 
    0 0 20px rgba(0, 255, 136, 0.2),
    0 0 40px rgba(0, 255, 136, 0.1) !important;
}

.workflow-node.error {
  border-color: #ff4444 !important;
  box-shadow: 
    0 0 20px rgba(255, 68, 68, 0.3),
    0 0 40px rgba(255, 68, 68, 0.15) !important;
}

/* Node Header */
.workflow-node-header {
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.1), rgba(255, 0, 255, 0.05)) !important;
  border-bottom: 1px solid rgba(0, 255, 255, 0.1) !important;
  padding: 12px 16px !important;
}

/* Node Handles */
.react-flow__handle {
  width: 12px !important;
  height: 12px !important;
  border: 2px solid rgba(13, 13, 43, 1) !important;
  border-radius: 50% !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 0 8px rgba(0, 255, 255, 0.3) !important;
  z-index: 100 !important;
  pointer-events: auto !important;
}

.react-flow__handle:hover {
  transform: scale(1.3) !important;
  box-shadow: 0 0 15px var(--cyan-glow) !important;
}

.react-flow__handle-top { top: -6px !important; }
.react-flow__handle-bottom { bottom: -6px !important; }
.react-flow__handle-left { left: -6px !important; }
.react-flow__handle-right { right: -6px !important; }

/* Connection Line */
.react-flow__connection-line {
  stroke: var(--cyan-primary) !important;
  stroke-width: 3 !important;
  filter: drop-shadow(0 0 5px var(--cyan-glow));
}

/* ============================================
   WORKFLOW ANIMATIONS
   ============================================ */

@keyframes nodeSlideIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.node-slide-in {
  animation: nodeSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes edgeDrawIn {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.edge-animated {
  stroke-dasharray: 10 5;
  animation: edgeDrawIn 0.5s ease forwards;
}

/* Floating Animation */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.floating {
  animation: float 6s ease-in-out infinite;
}

.floating-delayed {
  animation: float 8s ease-in-out infinite;
  animation-delay: 2s;
}

/* Pulse Animation */
@keyframes pulse-glow {
  0%, 100% { 
    opacity: 0.5;
    transform: scale(1);
  }
  50% { 
    opacity: 1;
    transform: scale(1.05);
  }
}

.pulse-glow {
  animation: pulse-glow 3s ease-in-out infinite;
}

/* ============================================
   WORKFLOW TOOLBAR
   ============================================ */

.workflow-toolbar {
  background: rgba(13, 13, 43, 0.9) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(0, 255, 255, 0.15) !important;
  border-radius: 12px !important;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3) !important;
}

.workflow-toolbar-btn {
  position: relative;
  padding: 10px 16px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: rgba(0, 255, 255, 0.6);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
}

.workflow-toolbar-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.1), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.workflow-toolbar-btn:hover {
  color: var(--cyan-primary);
  border-color: rgba(0, 255, 255, 0.3);
  background: rgba(0, 255, 255, 0.05);
}

.workflow-toolbar-btn:hover::before {
  opacity: 1;
}

.workflow-toolbar-btn.primary {
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(255, 0, 255, 0.1));
  border-color: rgba(0, 255, 255, 0.3);
  color: var(--cyan-primary);
}

.workflow-toolbar-btn.primary:hover {
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.3), rgba(255, 0, 255, 0.15));
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
}

/* ============================================
   WORKFLOW STATUS INDICATORS
   ============================================ */

.status-indicator-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.status-indicator-dot.idle {
  background: rgba(0, 255, 255, 0.3);
}

.status-indicator-dot.running {
  background: #60a5fa;
  box-shadow: 0 0 10px rgba(96, 165, 250, 0.5);
  animation: statusPulse 1.5s ease-in-out infinite;
}

.status-indicator-dot.completed {
  background: #00ff88;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
}

.status-indicator-dot.error {
  background: #ff4444;
  box-shadow: 0 0 10px rgba(255, 68, 68, 0.5);
  animation: errorPulse 1s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
}

@keyframes errorPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ============================================
   WORKFLOW SELECTOR POPUP
   ============================================ */

.workflow-node-selector {
  background: rgba(13, 13, 43, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(0, 255, 255, 0.2) !important;
  border-radius: 16px !important;
  box-shadow: 
    0 0 40px rgba(0, 0, 0, 0.5),
    0 0 80px rgba(0, 255, 255, 0.1) !important;
  animation: selectorSlideIn 0.2s ease-out;
}

@keyframes selectorSlideIn {
  from {
    opacity: 0;
    transform: translate(-50%, 20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 10px) scale(1);
  }
}

.workflow-node-selector-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.workflow-node-selector-item:hover {
  background: rgba(0, 255, 255, 0.08);
  border-color: rgba(0, 255, 255, 0.2);
  transform: translateX(4px);
}

/* ============================================
   RESPONSIVE WORKFLOW
   ============================================ */

@media (max-width: 768px) {
  .workflow-node {
    min-width: 260px !important;
    max-width: 280px !important;
  }
  
  .workflow-toolbar-btn {
    padding: 8px 12px;
    font-size: 11px;
  }
  
  .react-flow__controls {
    transform: scale(0.9);
  }
  
  .react-flow__minimap {
    display: none !important;
  }
}

.cyber-logo-text {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  color: var(--cyan-primary);
  text-shadow: 0 0 20px var(--cyan-glow);
}