@import url('https://fonts.loli.net/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;500;700&family=Share+Tech+Mono&family=JetBrains+Mono:wght@300;400;700&family=Noto+Sans+SC:wght@300;400;700&display=swap');

:root{
  --cyan:#00e5ff;
  --magenta:#ff00e5;
  --yellow:#ffe600;
  --green:#00ff88;
  --red:#ff1744;
  --amber:#ffb300;
  --purple:#8b00ff;
  --pink:#ff3df0;
  --void:#050510;
  --void-deep:#020108;
  --font-display:'Orbitron',sans-serif;
  --font-body:'Rajdhani',sans-serif;
  --font-mono:'Share Tech Mono',monospace;
  --font-tech:'Share Tech Mono',monospace;
  --font-code:'JetBrains Mono',monospace;
  --font-cn:'Noto Sans SC',sans-serif;
}

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

.hidden{display:none!important}

/* ============ CRT SCANLINES ============ */
.crt-overlay,.crt{
  position:fixed;top:0;left:0;width:100%;height:100%;
  pointer-events:none;
  z-index:9000;
  background:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0.03) 0px,
      rgba(0,0,0,0.03) 1px,
      transparent 1px,
      transparent 3px
    );
  mix-blend-mode:multiply;
}

/* ============ VIGNETTE ============ */
.vignette{
  position:fixed;top:0;left:0;width:100%;height:100%;
  pointer-events:none;
  z-index:8999;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,0.65) 100%);
}

/* ============ FILM GRAIN ============ */
.film-grain{
  position:fixed;top:0;left:0;width:100%;height:100%;
  pointer-events:none;
  z-index:8998;opacity:0.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:128px 128px;
  animation:grain 0.5s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}
  10%{transform:translate(-2%,-3%)}
  20%{transform:translate(3%,2%)}
  30%{transform:translate(-1%,3%)}
  40%{transform:translate(2%,-2%)}
  50%{transform:translate(-3%,1%)}
  60%{transform:translate(1%,-1%)}
  70%{transform:translate(-2%,3%)}
  80%{transform:translate(3%,-3%)}
  90%{transform:translate(-1%,2%)}
}

/* ============ SHARED BUTTON STYLES ============ */
.btn-cyber{
  font-family:var(--font-display);
  font-size:13px;letter-spacing:2px;
  padding:10px 22px;
  background:linear-gradient(135deg,rgba(0,240,255,0.1),rgba(255,0,229,0.1));
  border:1px solid var(--cyan);
  color:var(--cyan);
  cursor:pointer;
  text-transform:uppercase;
  position:relative;
  transition:all 0.25s;
  text-shadow:0 0 5px var(--cyan);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.btn-cyber:hover{
  background:linear-gradient(135deg,rgba(0,240,255,0.25),rgba(255,0,229,0.25));
  color:#fff;
  box-shadow:0 0 15px var(--cyan),0 0 30px rgba(0,240,255,0.4);
  border-color:var(--magenta);
}

/* ============ SHARED SCROLLBAR ============ */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:rgba(0,0,0,0.3)}
::-webkit-scrollbar-thumb{background:var(--cyan);border-radius:3px}

/* ============ SHARED SELECTION ============ */
::selection{background:rgba(0,229,255,0.3);color:#fff}