:root {
  --bg1: #07050c;
  --bg2: #090311;
  --mag: #ff2da8;
  --cyan: #2de3ff;
  --violet: #6a3bff;
  --card: rgba(255,255,255,0.03);
  --glass: rgba(255,255,255,0.05);
  --text: #d7d2e9;
}

* { box-sizing: border-box; }

body {
  background: radial-gradient(circle at 20% 20%, #110019, #000);
  color: var(--text);
  margin:0;
  font-family: Inter, system-ui, Arial;
  overflow-x:hidden;
}

/* BG Effects */
body::before {
  content:"";
  position:fixed;
  inset:0;
  background:
    url("/assets/noise-film.png") repeat,
    url("/assets/rift-ring.png"),
    radial-gradient(circle, transparent, #000 70%);
  background-size: auto, 1800px, cover;
  background-position: center;
  mix-blend-mode: soft-light;
  opacity:.12;
  pointer-events:none;
  animation: drift 24s linear infinite;
}
@keyframes drift {
  0%{background-position:center;}
  50%{background-position:60% 40%;}
  100%{background-position:center;}
}

/* Layout */
.wrap { max-width:1100px; margin:auto; padding:20px; }

.site-header {
  display:flex;
  justify-content:space-between;
  margin-bottom:20px;
}
.logo { font-weight:800; }
.accent { color:var(--mag); }

.nav a {
  margin-left:18px;
  text-decoration:none;
  color:var(--cyan);
}

/* Tabs */
.tabs {
  display:flex;
  gap:8px;
  margin-bottom:20px;
}
.tab {
  padding:8px 14px;
  border:none;
  border-radius:8px;
  cursor:pointer;
  background:var(--glass);
  color:var(--text);
}
.tab.active {
  background:linear-gradient(90deg, var(--mag), var(--cyan));
  color:#000;
}

/* Panels */
.panel { display:none; }
.panel.active { display:block; }

h1 { margin-top:0; font-size:28px; }
h2 { margin-top:0; color:var(--cyan); }

.desc { opacity:.8; }

.card {
  background:var(--card);
  padding:16px;
  margin:18px 0;
  border-radius:12px;
  backdrop-filter:blur(6px);
}
.card.danger {
  border:1px solid rgba(255,0,74,0.5);
}

.console {
  background:#0003;
  padding:12px;
  border-radius:8px;
  color:#9cf;
  font-family: "JetBrains Mono", monospace;
  font-size:14px;
  white-space:pre-wrap;
}

/* Footer */
footer {
  text-align:center;
  padding:30px;
  opacity:.6;
}