/* ============ NEON 80s THEME ============ */
:root {
  --bg-dark: #0a0118;
  --bg-panel: rgba(16, 8, 40, 0.85);
  --neon-blue: #00d4ff;
  --neon-purple: #b026ff;
  --neon-pink: #ff2ec4;
  --neon-green: #39ff88;
  --neon-red: #ff3860;
  --text-main: #d8e6ff;
}

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

body {
  background: var(--bg-dark);
  color: var(--text-main);
  font-family: 'Courier New', 'Consolas', monospace;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
}

/* Perspective grid background */
.grid-bg {
  position: fixed; inset: 0;
  background-image:
    linear-gradient(transparent 95%, rgba(0, 212, 255, 0.25) 95%),
    linear-gradient(90deg, transparent 95%, rgba(176, 38, 255, 0.25) 95%);
  background-size: 60px 60px;
  transform: perspective(400px) rotateX(60deg) translateY(30%) scale(2.5);
  transform-origin: bottom;
  opacity: 0.35;
  z-index: -2;
  animation: grid-move 8s linear infinite;
}
@keyframes grid-move {
  from { background-position: 0 0; }
  to { background-position: 0 60px; }
}

/* CRT scanlines */
.scanlines {
  position: fixed; inset: 0;
  background: repeating-linear-gradient(
    transparent 0px, transparent 2px,
    rgba(0,0,0,0.12) 2px, rgba(0,0,0,0.12) 4px
  );
  pointer-events: none;
  z-index: 3;
}

.container {
  width: 100%; max-width: 860px;
  padding: 2rem 1rem;
  z-index: 2;
}

/* Neon text */
.neon-text-blue, h1.neon-text-blue, h2.neon-text-blue {
  color: #e8f9ff;
  text-shadow: 0 0 6px var(--neon-blue), 0 0 16px var(--neon-blue), 0 0 32px var(--neon-blue), 0 0 64px var(--neon-blue);
}
.neon-text-purple {
  color: #f3e8ff;
  text-shadow: 0 0 6px var(--neon-purple), 0 0 18px var(--neon-purple), 0 0 36px var(--neon-purple);
}
/* Softer variant for long body text (about page): readable paragraphs
   keep a subtle purple glow instead of the full neon bloom. */
.neon-text-purple-less {
  color: #e9d9ff;
  text-shadow: 0 0 3px rgba(176, 38, 255, 0.45), 0 0 9px rgba(176, 38, 255, 0.25);
}
.neon-green { color: #eafff3; text-shadow: 0 0 6px var(--neon-green), 0 0 16px var(--neon-green); }
.neon-red { color: #ffe9ee; text-shadow: 0 0 6px var(--neon-red), 0 0 16px var(--neon-red); }

/* Glitch title */
.glitch { position: relative; }
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  opacity: 0.75;
}
.glitch::before { color: var(--neon-pink); animation: glitch-anim 3s infinite alternate-reverse; clip-path: inset(20% 0 40% 0); }
.glitch::after { color: var(--neon-blue); animation: glitch-anim 2s infinite alternate-reverse; clip-path: inset(50% 0 10% 0); }
@keyframes glitch-anim {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(2px, -1px); }
  60% { transform: translate(-1px, 2px); }
  80% { transform: translate(1px, -2px); }
  100% { transform: translate(0); }
}

.hero { text-align: center; margin-bottom: 2rem; }
.hero h1 { font-size: 3rem; letter-spacing: 0.2em; }
.subtitle { margin-top: 0.6rem; opacity: 0.85; letter-spacing: 0.05em; }

/* Panels */
.panel {
  background: var(--bg-panel);
  border: 2px solid var(--neon-purple);
  border-radius: 10px;
  box-shadow: 0 0 12px var(--neon-purple), inset 0 0 24px rgba(176, 38, 255, 0.15);
  padding: 2rem;
  margin-bottom: 2rem;
  backdrop-filter: blur(6px);
}
.panel h3 { margin-bottom: 1rem; }

/* Form */
.bypass-form { display: flex; flex-direction: column; gap: 1rem; }
.label { letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.8rem; opacity: 0.9; }
.input {
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid var(--neon-blue);
  border-radius: 6px;
  color: var(--text-main);
  padding: 0.8rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  outline: none;
}
.input:focus {
  box-shadow: 0 0 10px var(--neon-blue), inset 0 0 10px rgba(0, 212, 255, 0.2);
}
.neon-border-blue { box-shadow: 0 0 8px rgba(0, 212, 255, 0.6); }
.hp { position: absolute; left: -9999px; }

/* Buttons */
.btn {
  font-family: inherit;
  font-size: 1rem;
  letter-spacing: 0.15em;
  padding: 0.85rem 1.5rem;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  text-transform: uppercase;
}
.btn-neon {
  background: linear-gradient(45deg, var(--neon-blue), var(--neon-purple));
  border: none;
  color: #05010d;
  font-weight: bold;
  box-shadow: 0 0 14px var(--neon-blue), 0 0 28px rgba(176, 38, 255, 0.7);
}
.btn-neon:hover { transform: translateY(-2px); box-shadow: 0 0 22px var(--neon-blue), 0 0 44px var(--neon-purple); }
.btn-neon:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-danger {
  background: transparent;
  border: 1px solid var(--neon-red);
  color: var(--neon-red);
  box-shadow: 0 0 8px rgba(255, 56, 96, 0.5);
}

/* Status */
.status { text-align: center; margin-top: 1.5rem; }
.hidden { display: none; }
.spinner {
  width: 48px; height: 48px;
  margin: 0 auto 1rem;
  border: 4px solid transparent;
  border-top-color: var(--neon-blue);
  border-right-color: var(--neon-purple);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  box-shadow: 0 0 14px rgba(0, 212, 255, 0.5);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Result */
.result { text-align: center; margin-top: 1.5rem; padding: 1.2rem; border-radius: 8px; }
.result-ok { border: 2px solid var(--neon-green); box-shadow: 0 0 14px var(--neon-green); }
.result-fail { border: 2px solid var(--neon-red); box-shadow: 0 0 14px var(--neon-red); }
.result p { font-size: 1.05rem; }

/* Footer */
.footer { margin-top: auto; padding: 1.2rem; text-align: center; font-size: 0.8rem; }

/* "More info" neon button above the footer */
.more-info-nav {
  text-align: center;
  margin-top: 1.5rem;
  padding: 0 1rem;
}
.btn-more-info {
  display: inline-block;
  text-decoration: none;
  font-size: 0.85rem;
  padding: 0.55rem 1.4rem;
}

/* About / markdown page */
.about-content { line-height: 1.7; }
.about-content h1, .about-content h2, .about-content h3 {
  margin: 1.2rem 0 0.6rem;
}
.about-content p, .about-content ul, .about-content ol {
  margin: 0.6rem 0;
}
.about-content ul, .about-content ol { padding-left: 1.4rem; }
.about-content a { color: var(--neon-blue); }
.about-content code {
  background: rgba(176, 38, 255, 0.12);
  padding: 0.1em 0.4em; border-radius: 4px;
}
.about-back {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
}

/* Admin */
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
.inline-form { display: inline; }
.counters { display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; }
.counter { text-align: center; }
.counter-num { display: block; font-size: 2.4rem; font-weight: bold; }
.counter-label { text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.15em; opacity: 0.8; }
table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
th, td { padding: 0.5rem 0.6rem; border-bottom: 1px solid rgba(176, 38, 255, 0.3); text-align: left; font-size: 0.85rem; }
th { color: var(--neon-blue); text-transform: uppercase; letter-spacing: 0.1em; }
.mono { font-family: 'Consolas', monospace; word-break: break-all; }
.error-text { color: var(--neon-red); text-shadow: 0 0 8px var(--neon-red); margin-bottom: 1rem; }
.admin-panel { max-width: 460px; margin: 0 auto; }

@media (max-width: 640px) {
  .hero h1 { font-size: 2rem; }
  .panel { padding: 1.2rem; }
}