/* Circuit Pulse - Dark Tactical Laboratory Styles */
:root {
  --bg-obsidian: #070b14;
  --bg-surface: #0d1527;
  --bg-panel: rgba(13, 21, 39, 0.85);
  --border-tactical: rgba(56, 189, 248, 0.25);
  --glow-cyan: #38bdf8;
  --glow-emerald: #10b981;
  --glow-amber: #f59e0b;
  --glow-danger: #ef4444;
  --grid-dot: #1e293b;
  --text-muted: #64748b;
  --text-light: #f1f5f9;
}

* {
  box-sizing: border-box;
}

body {
  background-color: var(--bg-obsidian);
  color: var(--text-light);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  overflow: hidden;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

/* Breadboard Dot Matrix Pattern */
.breadboard-grid {
  background-color: var(--bg-surface);
  background-image: 
    radial-gradient(circle, rgba(56, 189, 248, 0.18) 1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
  background-size: 40px 40px, 10px 10px;
  background-position: 0 0, 0 0;
}

/* Glassmorphism Tactical Panels */
.tactical-glass {
  background: var(--bg-panel);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-tactical);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.6);
}

.tactical-glow-cyan {
  box-shadow: 0 0 15px rgba(56, 189, 248, 0.35);
}

.tactical-glow-emerald {
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
}

.tactical-glow-danger {
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.5);
  animation: pulse-danger 1.5s infinite;
}

@keyframes pulse-danger {
  0%, 100% { border-color: rgba(239, 68, 68, 0.8); box-shadow: 0 0 15px rgba(239, 68, 68, 0.6); }
  50% { border-color: rgba(239, 68, 68, 0.3); box-shadow: 0 0 5px rgba(239, 68, 68, 0.2); }
}

/* Live Simulation Badge Pulse */
@keyframes live-pulse {
  0% { transform: scale(0.95); opacity: 0.8; }
  50% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 8px #10b981); }
  100% { transform: scale(0.95); opacity: 0.8; }
}

.status-dot-live {
  animation: live-pulse 2s infinite ease-in-out;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #090e1a;
}
::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 3px;
  border: 1px solid rgba(56, 189, 248, 0.15);
}
::-webkit-scrollbar-thumb:hover {
  background: #334155;
  border-color: #38bdf8;
}

/* Component Canvas Elements */
.component-node {
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s ease;
  cursor: grab;
}
.component-node:active {
  cursor: grabbing;
}
.component-node.selected {
  outline: 2px solid #38bdf8;
  outline-offset: 4px;
}

/* Overload State */
.component-node.overloaded {
  animation: shake 0.5s ease-in-out, pulse-danger 1.2s infinite;
}

@keyframes shake {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(-3px, 2px) rotate(-1deg); }
  40% { transform: translate(3px, -2px) rotate(1deg); }
  60% { transform: translate(-2px, -1px) rotate(0deg); }
  80% { transform: translate(2px, 2px) rotate(1deg); }
}

/* Glowing LED emission */
.led-glow {
  transition: filter 0.2s ease, opacity 0.2s ease;
}

/* Motor Fan Spin */
@keyframes fan-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.fan-spinning {
  animation: fan-spin var(--spin-speed, 0.4s) linear infinite;
  transform-origin: center;
}

/* Terminal Pins */
.terminal-pin {
  transition: all 0.15s ease;
  cursor: crosshair;
}
.terminal-pin:hover {
  transform: scale(1.35);
  filter: drop-shadow(0 0 6px #38bdf8);
}
.terminal-pin.connecting {
  transform: scale(1.4);
  filter: drop-shadow(0 0 10px #10b981);
}

/* Flowing Wire Pulse Animation */
@keyframes wire-glow-pulse {
  0% { stroke-dashoffset: 40; }
  100% { stroke-dashoffset: 0; }
}

.wire-active-flow {
  stroke-dasharray: 6 6;
  animation: wire-glow-pulse 0.8s linear infinite;
}

/* Guide Drawer Transitions */
.drawer-transition {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

/* Tactical Button Styling */
.btn-tactical {
  position: relative;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(56, 189, 248, 0.3);
  color: #e2e8f0;
  transition: all 0.2s ease;
}
.btn-tactical:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: #38bdf8;
  color: #ffffff;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
}
.btn-tactical:active {
  transform: translateY(1px);
}
.btn-tactical.primary {
  background: rgba(56, 189, 248, 0.2);
  border-color: #38bdf8;
  color: #38bdf8;
}
.btn-tactical.primary:hover {
  background: #38bdf8;
  color: #070b14;
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.6);
}
.btn-tactical.danger {
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}
.btn-tactical.danger:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #ffffff;
  box-shadow: 0 0 14px rgba(239, 68, 68, 0.4);
}

/* Smoke particles for burned components */
.burn-smoke {
  position: absolute;
  pointer-events: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(148, 163, 184, 0.7);
  animation: smoke-float 1.8s ease-out forwards;
}

@keyframes smoke-float {
  0% { transform: translate(0, 0) scale(1); opacity: 0.9; }
  100% { transform: translate(calc(var(--rx, 0) * 20px), -45px) scale(3.5); opacity: 0; filter: blur(4px); }
}

/* Range input tactical styling */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: #1e293b;
  border-radius: 4px;
  height: 6px;
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #38bdf8;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.8);
  border: 2px solid #070b14;
  transition: transform 0.1s ease;
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}