/* CineStream AI - Developer Dark Console CSS */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  --bg-black: #000000;
  --surface-1: #0A0A0A;
  --surface-2: #111111;
  --surface-3: #161616;
  --surface-elevated: #1C1C1C;
  --border-subtle: #1E1E1E;
  --border-active: #2A2A2A;
  --border-highlight: #333333;
  --accent-green: #00FF66;
  --accent-green-dim: #00CC52;
  --accent-green-glow: rgba(0, 255, 102, 0.25);
  --accent-green-subtle: rgba(0, 255, 102, 0.08);
  --accent-cyan: #00E5FF;
  --accent-amber: #FFB300;
  --accent-red: #FF3B30;
  --text-primary: #EDEDED;
  --text-secondary: #A0A0A0;
  --text-muted: #666666;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-black);
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

.font-mono {
  font-family: 'JetBrains Mono', monospace !important;
}

.font-sans {
  font-family: 'Inter', sans-serif !important;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #050505;
}
::-webkit-scrollbar-thumb {
  background: #222222;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-green-dim);
}

/* 50px Engineering Grid Background */
.engineering-grid {
  background-size: 50px 50px;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

.engineering-grid-dense {
  background-size: 25px 25px;
  background-image: 
    linear-gradient(to right, rgba(0, 255, 102, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 255, 102, 0.05) 1px, transparent 1px);
}

/* Hero Glows */
.hero-glow {
  background: radial-gradient(circle 600px at 50% 10%, rgba(0, 255, 102, 0.12), transparent 70%);
}

.glow-card {
  position: relative;
}
.glow-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, rgba(0, 255, 102, 0.3), transparent 60%);
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.glow-card:hover::before {
  opacity: 1;
}

/* Scanlines */
.scanlines {
  position: relative;
  overflow: hidden;
}
.scanlines::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
  z-index: 20;
  background-size: 100% 3px, 6px 100%;
  pointer-events: none;
}

/* Cursor Blink */
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.cursor-blink {
  animation: blink 0.9s infinite;
}

/* Tooltip Nodes */
.node-tooltip {
  position: relative;
}
.node-tooltip .tooltip-content {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 50;
  pointer-events: none;
}
.node-tooltip:hover .tooltip-content {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Buttons */
.btn-neon {
  background-color: #00FF66;
  color: #000000;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  transition: all 0.2s ease;
}
.btn-neon:hover {
  background-color: #00E65C;
  box-shadow: 0 0 20px rgba(0, 255, 102, 0.4);
  transform: translateY(-1px);
}

.btn-secondary-dark {
  background-color: #121212;
  color: #EDEDED;
  border: 1px solid #262626;
  font-family: 'JetBrains Mono', monospace;
  transition: all 0.2s ease;
}
.btn-secondary-dark:hover {
  background-color: #1A1A1A;
  border-color: #383838;
  color: #FFFFFF;
}

details > summary {
  list-style: none;
}
details > summary::-webkit-details-marker {
  display: none;
}