:root {
  --cyber-bg: #0a0e17;
  --cyber-surface: #111827;
  --cyber-card: #1a2234;
  --cyber-border: #2d3a52;
  --cyber-accent: #00f0ff;
  --cyber-warning: #ff9f1c;
  --cyber-danger: #ff3b5c;
  --cyber-success: #00d68f;
  --cyber-muted: #64748b;
}

body {
  box-sizing: border-box;
  background-color: var(--cyber-bg);
  color: #f3f4f6;
}

*, *::before, *::after {
  box-sizing: inherit;
}

.bg-cyber-bg { background-color: var(--cyber-bg); }
.bg-cyber-surface { background-color: var(--cyber-surface); }
.bg-cyber-card { background-color: var(--cyber-card); }
.bg-cyber-border { background-color: var(--cyber-border); }
.bg-cyber-accent { background-color: var(--cyber-accent); }
.bg-cyber-warning { background-color: var(--cyber-warning); }
.bg-cyber-danger { background-color: var(--cyber-danger); }
.bg-cyber-success { background-color: var(--cyber-success); }
.bg-cyber-muted { background-color: var(--cyber-muted); }

.bg-cyber-bg\/50 { background-color: rgb(10 14 23 / 0.5); }
.bg-cyber-accent\/10 { background-color: rgb(0 240 255 / 0.1); }
.bg-cyber-accent\/20 { background-color: rgb(0 240 255 / 0.2); }
.bg-cyber-success\/10 { background-color: rgb(0 214 143 / 0.1); }
.bg-cyber-success\/20 { background-color: rgb(0 214 143 / 0.2); }
.bg-cyber-warning\/10 { background-color: rgb(255 159 28 / 0.1); }
.bg-cyber-warning\/20 { background-color: rgb(255 159 28 / 0.2); }
.bg-cyber-danger\/10 { background-color: rgb(255 59 92 / 0.1); }
.bg-cyber-danger\/20 { background-color: rgb(255 59 92 / 0.2); }
.bg-cyber-muted\/10 { background-color: rgb(100 116 139 / 0.1); }

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

.border-cyber-border { border-color: var(--cyber-border); }
.border-cyber-accent { border-color: var(--cyber-accent); }
.border-cyber-success { border-color: var(--cyber-success); }
.border-cyber-warning { border-color: var(--cyber-warning); }
.border-cyber-danger { border-color: var(--cyber-danger); }
.border-cyber-muted { border-color: var(--cyber-muted); }
.border-cyber-accent\/30 { border-color: rgb(0 240 255 / 0.3); }
.border-cyber-success\/30 { border-color: rgb(0 214 143 / 0.3); }
.border-cyber-warning\/30 { border-color: rgb(255 159 28 / 0.3); }
.border-cyber-danger\/30 { border-color: rgb(255 59 92 / 0.3); }
.border-cyber-muted\/30 { border-color: rgb(100 116 139 / 0.3); }

.hover\:bg-cyber-accent\/20:hover { background-color: rgb(0 240 255 / 0.2); }
.hover\:bg-cyber-danger\/20:hover { background-color: rgb(255 59 92 / 0.2); }
.hover\:bg-cyber-success\/20:hover { background-color: rgb(0 214 143 / 0.2); }
.hover\:bg-cyber-muted\/20:hover { background-color: rgb(100 116 139 / 0.2); }
.hover\:bg-cyber-border\/50:hover { background-color: rgb(45 58 82 / 0.5); }
.hover\:border-cyber-accent\/50:hover { border-color: rgb(0 240 255 / 0.5); }

.focus\:border-cyber-accent:focus {
  border-color: var(--cyber-accent);
}

.divide-cyber-border > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--cyber-border);
}

.from-cyber-accent {
  --tw-gradient-from: var(--cyber-accent) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 240 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-cyber-accent\/20 {
  --tw-gradient-from: rgb(0 240 255 / 0.2) var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(0 240 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-cyber-danger {
  --tw-gradient-to: var(--cyber-danger) var(--tw-gradient-to-position);
}

.to-cyber-danger\/20 {
  --tw-gradient-to: rgb(255 59 92 / 0.2) var(--tw-gradient-to-position);
}

.to-cyber-warning {
  --tw-gradient-to: var(--cyber-warning) var(--tw-gradient-to-position);
}

.scrollbar-cyber::-webkit-scrollbar { width: 6px; height: 6px; }
.scrollbar-cyber::-webkit-scrollbar-track { background: #1a2234; }
.scrollbar-cyber::-webkit-scrollbar-thumb { background: #2d3a52; border-radius: 3px; }
.scrollbar-cyber::-webkit-scrollbar-thumb:hover { background: #3d4a62; }

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 5px currentColor; }
  50% { box-shadow: 0 0 20px currentColor, 0 0 30px currentColor; }
}

@keyframes scan-line {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

@keyframes modal-fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes modal-fade-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes modal-panel-in {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes modal-panel-out {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
}

.animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
.animate-scan { animation: scan-line 2s linear infinite; }

.modal-open {
  animation: modal-fade-in 0.22s ease;
}

.modal-fade-in {
  animation: modal-fade-in 0.22s ease;
}

.modal-fade-out {
  animation: modal-fade-out 0.22s ease;
}

.modal-panel-in {
  animation: modal-panel-in 0.24s ease;
}

.modal-panel-out {
  animation: modal-panel-out 0.2s ease;
}

#vuln-modal > div,
#export-modal > div {
  transform-origin: center;
}

.terminal-text { text-shadow: 0 0 5px currentColor; }

.gradient-border {
  position: relative;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg, #00f0ff33, #ff3b5c33);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}