@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Orbitron:wght@400;700;900&family=VT323&display=swap');

:root {
  --color-cyber-cyan: #00f3ff;
  --color-cyber-green: #39ff14;
  --color-cyber-pink: #ff007f;
  --color-bg-dark: #0a0e17;
  --color-bg-panel: rgba(13, 20, 35, 0.85);
  --font-cyber: 'Share Tech Mono', monospace;
  --font-pixel: 'VT323', monospace;
  --font-header: 'Orbitron', sans-serif;
}

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

body {
  background-color: var(--color-bg-dark);
  color: #d1f4ff;
  font-family: var(--font-cyber);
  overflow-x: hidden;
  height: 100%;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2300f3ff' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cline x1='12' y1='1' x2='12' y2='6'/%3E%3Cline x1='12' y1='18' x2='12' y2='23'/%3E%3Cline x1='1' y1='12' x2='6' y2='12'/%3E%3Cline x1='18' y1='12' x2='23' y2='12'/%3E%3C/svg%3E") 12 12, auto;
}

/* Hide scrollbar for clean app-like look but keep scrolling functional */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #070a12;
}
::-webkit-scrollbar-thumb {
  background: var(--color-cyber-cyan);
  border-radius: 4px;
  box-shadow: 0 0 10px var(--color-cyber-cyan);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-cyber-green);
  box-shadow: 0 0 15px var(--color-cyber-green);
}

/* CRT Monitor Scanline Overlay */
.crt::after {
  content: " ";
  display: block;
  position: fixed;
  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.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 9999;
  background-size: 100% 4px, 6px 100%;
  pointer-events: none;
}

.crt-flicker {
  animation: crt-flicker 0.15s infinite;
}

@keyframes crt-flicker {
  0% { opacity: 0.985; }
  50% { opacity: 1; }
  100% { opacity: 0.99; }
}

/* Cyberpunk terminal frames */
.terminal-frame {
  border: 1px solid rgba(0, 243, 255, 0.3);
  background: var(--color-bg-panel);
  box-shadow: 0 0 20px rgba(0, 243, 255, 0.05), inset 0 0 15px rgba(0, 243, 255, 0.05);
  position: relative;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  backdrop-filter: blur(8px);
}

.terminal-frame:hover {
  border-color: rgba(0, 243, 255, 0.6);
  box-shadow: 0 0 25px rgba(0, 243, 255, 0.15), inset 0 0 20px rgba(0, 243, 255, 0.1);
}

/* Neon Glow classes */
.glow-cyan {
  text-shadow: 0 0 10px var(--color-cyber-cyan), 0 0 20px rgba(0, 243, 255, 0.3);
}

.glow-green {
  text-shadow: 0 0 10px var(--color-cyber-green), 0 0 20px rgba(57, 255, 20, 0.3);
}

.glow-box-cyan {
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.4), inset 0 0 10px rgba(0, 243, 255, 0.2);
}

.glow-box-green {
  box-shadow: 0 0 15px rgba(57, 255, 20, 0.4), inset 0 0 10px rgba(57, 255, 20, 0.2);
}

/* Cyberpunk corners */
.corner-decor::before, .corner-decor::after,
.corner-decor-inner::before, .corner-decor-inner::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: var(--color-cyber-cyan);
  border-style: solid;
  pointer-events: none;
}

.corner-decor::before { top: -2px; left: -2px; border-width: 2px 0 0 2px; }
.corner-decor::after { top: -2px; right: -2px; border-width: 2px 2px 0 0; }
.corner-decor-inner::before { bottom: -2px; left: -2px; border-width: 0 0 2px 2px; }
.corner-decor-inner::after { bottom: -2px; right: -2px; border-width: 0 2px 2px 0; }

/* Custom cyber button */
.cyber-btn {
  font-family: var(--font-header);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 2px;
  position: relative;
  transition: all 0.2s ease-in-out;
  overflow: hidden;
  border: 1px solid var(--color-cyber-cyan);
  background: rgba(0, 243, 255, 0.05);
  color: var(--color-cyber-cyan);
  text-shadow: 0 0 5px var(--color-cyber-cyan);
}

.cyber-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 243, 255, 0.2), transparent);
  transition: all 0.4s ease;
}

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

.cyber-btn:hover {
  background: var(--color-cyber-cyan);
  color: #000;
  text-shadow: none;
  box-shadow: 0 0 15px var(--color-cyber-cyan);
  transform: translateY(-2px);
}

.cyber-btn:active {
  transform: translateY(1px);
}

/* Green Cyber Button variation */
.cyber-btn-green {
  border-color: var(--color-cyber-green);
  background: rgba(57, 255, 20, 0.05);
  color: var(--color-cyber-green);
  text-shadow: 0 0 5px var(--color-cyber-green);
}

.cyber-btn-green::before {
  background: linear-gradient(90deg, transparent, rgba(57, 255, 20, 0.2), transparent);
}

.cyber-btn-green:hover {
  background: var(--color-cyber-green);
  color: #000;
  text-shadow: none;
  box-shadow: 0 0 15px var(--color-cyber-green);
}

/* Character Idle Hover Animation */
.character-float {
  animation: cyber-float 5s ease-in-out infinite;
}

@keyframes cyber-float {
  0% {
    transform: translateY(0px) rotate(0deg);
    filter: drop-shadow(0 5px 15px rgba(0, 243, 255, 0.2));
  }
  50% {
    transform: translateY(-15px) rotate(1deg);
    filter: drop-shadow(0 25px 30px rgba(0, 243, 255, 0.4));
  }
  100% {
    transform: translateY(0px) rotate(0deg);
    filter: drop-shadow(0 5px 15px rgba(0, 243, 255, 0.2));
  }
}

/* Glitch animation for text */
.glitch-text {
  position: relative;
}

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

.glitch-text::before {
  left: 2px;
  text-shadow: -2px 0 var(--color-cyber-pink);
  clip: rect(44px, 450px, 56px, 0);
  animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch-text::after {
  left: -2px;
  text-shadow: -2px 0 var(--color-cyber-cyan), 0 2px var(--color-cyber-green);
  clip: rect(85px, 450px, 140px, 0);
  animation: glitch-anim2 5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
  0% { clip: rect(31px, 9999px, 94px, 0); }
  10% { clip: rect(112px, 9999px, 76px, 0); }
  20% { clip: rect(85px, 9999px, 5px, 0); }
  30% { clip: rect(27px, 9999px, 115px, 0); }
  40% { clip: rect(73px, 9999px, 29px, 0); }
  50% { clip: rect(138px, 9999px, 102px, 0); }
  60% { clip: rect(4px, 9999px, 81px, 0); }
  70% { clip: rect(93px, 9999px, 142px, 0); }
  80% { clip: rect(122px, 9999px, 63px, 0); }
  90% { clip: rect(18px, 9999px, 131px, 0); }
  100% { clip: rect(67px, 9999px, 50px, 0); }
}

@keyframes glitch-anim2 {
  0% { clip: rect(76px, 9999px, 116px, 0); }
  11% { clip: rect(121px, 9999px, 41px, 0); }
  22% { clip: rect(3px, 9999px, 139px, 0); }
  33% { clip: rect(91px, 9999px, 4px, 0); }
  44% { clip: rect(14px, 9999px, 88px, 0); }
  55% { clip: rect(117px, 9999px, 126px, 0); }
  66% { clip: rect(45px, 9999px, 55px, 0); }
  77% { clip: rect(132px, 9999px, 93px, 0); }
  88% { clip: rect(58px, 9999px, 109px, 0); }
  100% { clip: rect(100px, 9999px, 12px, 0); }
}

/* Scanning matrix background */
.grid-bg {
  background-image: linear-gradient(rgba(0, 243, 255, 0.03) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center;
}

/* Pulse energy bar */
.pulse-bar {
  animation: pulse-width 2s ease-in-out infinite;
}

@keyframes pulse-width {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; filter: brightness(1.2) drop-shadow(0 0 8px var(--color-cyber-cyan)); }
}

/* Custom dossier tab design */
.dossier-tab.active {
  border-color: var(--color-cyber-cyan);
  color: var(--color-cyber-cyan);
  background: rgba(0, 243, 255, 0.1);
  box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);
}

/* Dot blink terminal effect */
.blink-dot {
  animation: blink 1s steps(2, start) infinite;
}

@keyframes blink {
  to { visibility: hidden; }
}

/* Subtitle style */
.cyber-label {
  font-family: var(--font-cyber);
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #5d7fa3;
}

/* Dynamic toast styling */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  pointer-events: none;
}

.toast {
  background: #070a12;
  border: 1px solid var(--color-cyber-cyan);
  color: var(--color-cyber-cyan);
  font-family: var(--font-cyber);
  padding: 12px 24px;
  box-shadow: 0 0 15px rgba(0, 243, 255, 0.3);
  margin-top: 10px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

/* Cyber Matrix Particle Stream CSS */
.plasma-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}