:root {
  --bg: #0a0a0a;
  --bg-soft: #0d0d0d;
  --bg-card: #111;
  --red: #f00;
  --red-glow: rgba(255,0,0,.4);
  --green: #0f0;
  --green-dim: #2f5f2f;
  --text: #0f0;
  --text-dim: #888;
  --border: rgba(255,0,0,.25);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:'Courier New',Courier,monospace;
  line-height:1.6;overflow-x:hidden;min-height:100vh;
  background-image:
    linear-gradient(rgba(255,0,0,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,0,0,.03) 1px, transparent 1px);
  background-size:40px 40px;
  display:flex;flex-direction:column;
}
main{flex:1}

/* HEADER */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(10,10,10,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
  padding:12px 20px;
}
.nav-wrap{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.site-logo{
  font-size:1.4rem;letter-spacing:3px;color:var(--green);
  text-shadow:0 0 10px var(--red),0 0 3px var(--red);
  font-weight:bold;text-decoration:none;white-space:nowrap;
}
.site-nav ul{display:flex;gap:2px;list-style:none;flex-wrap:wrap;align-items:center}
.site-nav a{
  color:var(--text-dim);text-decoration:none;padding:6px 10px;font-size:.75rem;
  text-transform:uppercase;letter-spacing:1px;transition:.2s;
  border:1px solid transparent;border-radius:3px;white-space:nowrap;
}
.site-nav a:hover{color:var(--red);border-color:var(--red);text-shadow:0 0 5px var(--red)}
.site-nav a.cta{color:var(--red);border-color:var(--red)}
.site-nav a.cta:hover{background:var(--red);color:#000;box-shadow:0 0 15px var(--red-glow)}
.site-nav a.admin{color:#0ff;border-color:rgba(0,255,255,.4)}
.site-nav a.admin:hover{background:#0ff;color:#000}
@media(max-width:800px){
  .nav-wrap{justify-content:center;flex-direction:column;gap:10px}
  .site-nav ul{justify-content:center}
}

/* CONTAINER */
.container{max-width:1000px;margin:0 auto;padding:40px 20px;width:100%}
.container-wide{max-width:1200px;margin:0 auto;padding:0 20px;width:100%}

/* HEADINGS */
h1,h2{color:var(--red);letter-spacing:2px;margin-bottom:18px}
h1{font-size:clamp(1.8rem,4vw,2.5rem);text-transform:uppercase}
h2{font-size:clamp(1.4rem,3vw,1.9rem);text-transform:uppercase}
h3{color:var(--red);letter-spacing:1px;margin-bottom:10px;font-size:1.15rem}
p{margin-bottom:14px;color:#bbb}
a{color:var(--red);text-decoration:none}
a:hover{text-shadow:0 0 5px var(--red)}
.highlight{color:var(--green);text-shadow:0 0 5px var(--green);font-weight:bold}
.warn{color:#ff8888}
.ok{color:var(--green)}

/* CARDS */
.card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:8px;padding:24px;margin-bottom:18px;
  position:relative;overflow:hidden;transition:.3s;
  display:flex;flex-direction:column;
}
.card::before{
  content:'';position:absolute;top:0;left:0;width:3px;height:100%;
  background:var(--red);transform:scaleY(0);transform-origin:top;transition:.4s;
}
.card:hover{border-color:var(--red);transform:translateY(-2px);box-shadow:0 6px 24px rgba(255,0,0,.12)}
.card:hover::before{transform:scaleY(1)}
.card h2, .card h3{margin-top:0}

/* BUTTONS */
.btn{
  display:inline-block;padding:11px 24px;font-size:.88rem;
  text-transform:uppercase;letter-spacing:2px;text-decoration:none;
  border:2px solid var(--red);color:var(--red);background:transparent;
  cursor:pointer;transition:.25s;border-radius:3px;font-weight:bold;
  font-family:inherit;text-align:center;
}
.btn:hover{background:var(--red);color:#000;box-shadow:0 0 20px var(--red-glow);transform:translateY(-1px)}
.btn.ghost{border-color:var(--green);color:var(--green)}
.btn.ghost:hover{background:var(--green);color:#000;box-shadow:0 0 20px rgba(0,255,0,.4)}
.btn.small{padding:6px 14px;font-size:.75rem}

/* FORMS */
form{display:flex;flex-direction:column;gap:14px}
.field label{
  display:block;font-size:.78rem;color:var(--green);
  opacity:.85;margin-bottom:6px;text-transform:uppercase;letter-spacing:1.5px;
}
.field input,.field textarea{
  display:block;width:100%;background:#000;border:2px solid var(--green);
  color:var(--green);padding:11px 12px;font-family:inherit;font-size:1rem;
  outline:none;border-radius:3px;color-scheme:dark;transition:.2s;
}
.field input:focus,.field textarea:focus{
  border-color:var(--red);box-shadow:0 0 10px rgba(255,0,0,.5);
}
.field input::placeholder,.field textarea::placeholder{color:var(--green-dim);opacity:1}
button[type=submit]{
  display:block;padding:12px 24px;background:transparent;
  border:2px solid var(--red);color:var(--red);font-family:inherit;
  font-size:1rem;font-weight:bold;letter-spacing:3px;text-transform:uppercase;
  cursor:pointer;transition:.2s;border-radius:3px;
}
button[type=submit]:hover{background:var(--red);color:#000;box-shadow:0 0 22px var(--red-glow)}

/* FLASH */
.flash{
  padding:12px 16px;margin-bottom:18px;border-left:3px solid var(--red);
  background:rgba(255,0,0,.08);color:#ff8888;font-size:.9rem;border-radius:3px;
}
.flash.ok{border-color:var(--green);background:rgba(0,255,0,.08);color:var(--green)}

/* TABLES */
table{width:100%;border-collapse:collapse;margin:20px 0}
th,td{padding:10px 14px;border-bottom:1px solid #222;text-align:left;font-size:.9rem;vertical-align:middle}
th{color:var(--red);text-transform:uppercase;letter-spacing:1px;font-size:.78rem}
tr:hover{background:var(--bg-card)}

/* GRID */
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid-2{display:grid;gap:20px;grid-template-columns:1fr 1fr}
@media(max-width:800px){.grid-2{grid-template-columns:1fr}}

/* HERO */
.hero{
  max-width:1200px;margin:0 auto;padding:60px 20px 40px;
  text-align:center;position:relative;
}
.hero .tag{
  display:inline-block;padding:4px 14px;border:1px solid var(--red);
  color:var(--red);font-size:.75rem;letter-spacing:2px;text-transform:uppercase;
  border-radius:20px;margin-bottom:20px;
}
.hero h1{
  font-size:clamp(2rem,5vw,4rem);letter-spacing:4px;
  margin-bottom:18px;line-height:1.1;
  text-shadow:0 0 30px var(--red-glow),0 0 6px var(--red);
}
.hero .subtitle{font-size:clamp(1rem,2vw,1.2rem);max-width:800px;margin:0 auto 30px;color:#aaa;padding:0 10px}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:30px}

/* ASCII MASK */
.ascii-mask{
  display:block;max-width:100%;overflow:hidden;margin:40px auto 0;text-align:center;
  opacity:.8;text-shadow:0 0 6px var(--red);color:var(--red);
  font-size:clamp(5px, 1vw, 12px);line-height:1.1;white-space:pre;
  font-family:'DejaVu Sans Mono',monospace;
  scrollbar-width:none;-ms-overflow-style:none;
}
.ascii-mask::-webkit-scrollbar{display:none}

/* CTA BAND */
.cta-band{
  background:linear-gradient(135deg, rgba(255,0,0,.1), rgba(0,255,0,.05));
  border:1px dashed var(--red);border-radius:8px;
  padding:40px 20px;text-align:center;margin-bottom:60px;
}
.cta-band h2{font-size:clamp(1.2rem,3vw,2rem);word-wrap:break-word;margin-bottom:14px}
.cta-band p{color:#888;margin-bottom:20px}

/* FOOTER */
.site-footer{
  border-top:1px solid var(--border);padding:30px 20px;
  text-align:center;font-size:.8rem;color:#555;background:#050505;
}
.foot-logo{color:var(--red);letter-spacing:3px;font-weight:bold;margin-bottom:10px;font-size:1rem}
.foot-links{display:flex;gap:20px;justify-content:center;margin:14px 0;flex-wrap:wrap}
.foot-links a{color:#888;text-decoration:none;transition:.2s;font-size:.85rem}
.foot-links a:hover{color:var(--red);text-shadow:0 0 5px var(--red)}

/* GLITCH */
@keyframes glitch{
  0%,90%,100%{transform:translate(0)}
  92%{transform:translate(-2px,2px);text-shadow:2px 0 var(--green),-2px 0 var(--red)}
  94%{transform:translate(2px,-2px);text-shadow:-2px 0 var(--green),2px 0 var(--red)}
  96%{transform:translate(-1px,-1px)}
}

/* UTILS */
.muted{color:#666}
.center{text-align:center}
.mt-20{margin-top:20px}
.mb-20{margin-bottom:20px}
.flex-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}