:root{
  --bg:#08070a;
  --bg-panel:#111017;
  --bg-panel-alt:#17161f;
  --border:#2b2a35;
  --text:#f3f2f7;
  --text-dim:#9d9aa8;
  --accent:#ff2e63;
  --accent-2:#ff8c00;
  --accent-3:#b026ff;
  --accent-4:#ffd23f;
  --danger:#ff3b3b;
  --radius:14px;
  --font-display:'Segoe UI',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --font-mono:'SFMono-Regular','Consolas','Liberation Mono',Menlo,monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-display);
  min-height:100vh;
}
a{color:var(--accent);text-decoration:none;}
::selection{background:var(--accent);color:#fff;}

.noise-bg{
  position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.05;
  background-image:
    repeating-linear-gradient(0deg,transparent 0 2px,#fff 2px 3px);
  mix-blend-mode:overlay;
}

.glitch-heading{
  position:relative;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--text);
  text-transform:uppercase;
}
.glitch-heading::before,.glitch-heading::after{
  content:attr(data-text);
  position:absolute;left:0;top:0;width:100%;height:100%;
  overflow:hidden;
}
.glitch-heading::before{
  color:var(--accent);
  clip-path:inset(0 0 60% 0);
  transform:translate(-2px,-1px);
  animation:glitch-a 3.4s infinite steps(2,end);
}
.glitch-heading::after{
  color:var(--accent-3);
  clip-path:inset(60% 0 0 0);
  transform:translate(2px,1px);
  animation:glitch-b 2.6s infinite steps(2,end);
}
@keyframes glitch-a{
  0%,88%,100%{transform:translate(-2px,-1px);opacity:.9;}
  90%{transform:translate(3px,1px) skewX(4deg);opacity:1;}
  93%{transform:translate(-4px,0);opacity:.6;}
}
@keyframes glitch-b{
  0%,84%,100%{transform:translate(2px,1px);opacity:.85;}
  86%{transform:translate(-3px,-1px) skewX(-3deg);opacity:1;}
  95%{transform:translate(4px,0);opacity:.5;}
}

.scanlines{
  position:fixed;inset:0;pointer-events:none;z-index:5;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.015) 0px,
    rgba(255,255,255,0.015) 1px,
    transparent 1px,
    transparent 3px
  );
}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--bg-panel-alt);
  border:1px solid var(--border);
  color:var(--text);
  padding:10px 18px;
  border-radius:10px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:14px;
  cursor:pointer;
  transition:all .15s ease;
}
.btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px);}
.btn.primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-3));
  border:none;color:#fff;
}
.btn.primary:hover{filter:brightness(1.15);transform:translateY(-1px);}
.btn.danger{border-color:var(--danger);color:var(--danger);}
.btn.danger:hover{background:var(--danger);color:#fff;}
.btn.small{padding:6px 12px;font-size:12px;}

input,select,textarea{
  background:var(--bg);
  border:1px solid var(--border);
  color:var(--text);
  padding:10px 12px;
  border-radius:8px;
  font-family:var(--font-display);
  font-size:14px;
  width:100%;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);
}
label{font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:6px;}
