:root {
  --cyber-void: #05070a;
  --cyber-panel: rgba(4, 18, 18, 0.86);
  --cyber-panel-strong: rgba(7, 28, 28, 0.94);
  --cyber-line: rgba(0, 229, 255, 0.38);
  --cyber-line-hot: rgba(0, 255, 65, 0.72);
  --cyber-green: #00ff41;
  --cyber-cyan: #00e5ff;
  --cyber-amber: #ffb300;
  --cyber-magenta: #ff3df2;
  --cyber-text: #e8fff0;
  --cyber-muted: #7fcf91;
  --cyber-shadow-green: 0 0 18px rgba(0, 255, 65, 0.34);
  --cyber-shadow-cyan: 0 0 18px rgba(0, 229, 255, 0.28);
  --cyber-grid:
    linear-gradient(rgba(0, 229, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 65, 0.045) 1px, transparent 1px);
}

.cyber-hologram-surface,
.dashboard-card,
.matrix-panel,
.matrix-glow,
.gear-feature-card {
  position: relative;
  border: 1px solid var(--cyber-line);
  border-radius: 8px;
  background:
    radial-gradient(circle at 20% 0%, rgba(0, 229, 255, 0.12), transparent 28%),
    linear-gradient(135deg, rgba(0, 255, 65, 0.08), rgba(0, 0, 0, 0.22)),
    var(--cyber-panel);
  box-shadow: var(--cyber-shadow-cyan), inset 0 0 24px rgba(0, 255, 65, 0.055);
}

.cyber-hologram-surface::before,
.dashboard-card::before,
.matrix-panel::before,
.matrix-glow::before,
.gear-feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--cyber-grid);
  background-size: 22px 22px;
  opacity: 0.18;
  pointer-events: none;
}

.cyber-hologram-surface:hover,
.dashboard-card:hover,
.matrix-panel:hover,
.matrix-glow:hover,
.gear-feature-card:hover {
  border-color: var(--cyber-line-hot);
  box-shadow: var(--cyber-shadow-green), var(--cyber-shadow-cyan), inset 0 0 28px rgba(0, 229, 255, 0.08);
}

.cyber-title,
.card-title,
.gear-welcome-title,
.gear-feature-title {
  color: var(--cyber-text);
  font-family: Orbitron, "Courier New", monospace;
  letter-spacing: 0;
  text-shadow: 0 0 12px rgba(0, 255, 65, 0.38);
}

.cyber-command,
.btn-matrix,
.gear-btn-matrix,
.quick-action-btn,
.sys-link-react-button {
  border: 1px solid var(--cyber-line);
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(0, 229, 255, 0.11), rgba(0, 255, 65, 0.05)),
    rgba(0, 0, 0, 0.34);
  color: var(--cyber-green);
  box-shadow: inset 0 0 14px rgba(0, 229, 255, 0.07);
  transition: border-color 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

.cyber-command:hover,
.btn-matrix:hover,
.gear-btn-matrix:hover,
.quick-action-btn:hover,
.sys-link-react-button:hover {
  border-color: var(--cyber-green);
  color: var(--cyber-text);
  box-shadow: var(--cyber-shadow-green), inset 0 0 18px rgba(0, 229, 255, 0.12);
  transform: translateY(-2px);
}

.cyber-status-ok {
  color: var(--cyber-green);
}

.cyber-status-warn {
  color: var(--cyber-amber);
}

.cyber-status-hot {
  color: var(--cyber-magenta);
}

.cyber-holo-scan {
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 229, 255, 0.025) 2px,
      rgba(0, 229, 255, 0.025) 4px
    );
}