:root {
  --bg: #f5f8ff;
  --bg-alt: #e8efff;
  --text: #0f1330;
  --muted: #4f5a88;
  --panel: rgba(255, 255, 255, 0.9);
  --line: rgba(50, 82, 180, 0.2);
  --neon-cyan: #8aeaff;
  --neon-magenta: #dc65ff;
  --neon-lime: #72b0f9;
}

html[data-theme="dark"] {
  --bg: #080914;
  --bg-alt: #131933;
  --text: #ecf4ff;
  --muted: #9eb3ff;
  --panel: rgba(16, 21, 43, 0.82);
  --line: rgba(101, 135, 255, 0.3);
  --neon-cyan: #8aeaff;
  --neon-magenta: #dc65ff;
  --neon-lime: #72b0f9;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  background: radial-gradient(circle at 20% 10%, var(--bg-alt), var(--bg));
  color: var(--text);
}

.site-header {
  border-bottom: 1px solid var(--line);
  background: linear-gradient(100deg, rgba(10,13,32,0.95), rgba(31,18,61,0.92));
  box-shadow: 0 0 30px rgba(138, 234, 255, 0.15);
}

.container { width: min(1120px, 93vw); margin: 0 auto; }
.header-row { display:flex; align-items:center; justify-content:space-between; padding: .9rem 0; }
.brand { display:flex; align-items:center; gap:.7rem; color:#dff6ff; text-decoration:none; }
.brand h1 {
  margin:0;
  font-family: Orbitron, sans-serif;
  letter-spacing:.12em;
  font-size:1.2rem;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.brand p { margin:0; font-size:.75rem; color:#8aeaff; }
.brand-logo { width:42px; height:42px; }

.theme-toggle {
  background: transparent;
  color: #e8fbff;
  border: 1px solid rgba(138,234,255,.45);
  border-radius: 999px;
  padding: .4rem .8rem;
  cursor: pointer;
}

.panel {
  background: var(--panel);
  margin-top: 1.2rem;
  border-radius: 12px;
  padding: 1.1rem;
  border: 1px solid var(--neon-magenta);
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 35px rgba(2,7,25,.25), 0 0 10px rgba(220, 101, 255, 0.3);
}

.glitch-frame { position: relative; }
.glitch-frame::before,
.glitch-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.glitch-frame::before { border: 1px solid rgba(138,234,255,.18); transform: translate(2px, -1px); }
.glitch-frame::after { border: 1px solid rgba(220,101,255,.13); transform: translate(-1px, 2px); }

.stacked-form, .filter-grid { display: grid; gap: .6rem; max-width: 520px; }
.filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 1rem; max-width:none; }

input, select, textarea, button {
  border-radius: 8px;
  border: 1px solid var(--line);
  padding: .55rem .65rem;
  font: inherit;
  background: rgba(8, 18, 44, 0.08);
  color: var(--text);
}
button {
  cursor: pointer;
  border-color: rgba(138,234,255,.5);
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta));
  color: #041120;
  font-weight: 700;
}

.error { color: #ff6d8e; font-weight: 600; }
a { color: var(--neon-cyan); }

table { width: 100%; border-collapse: collapse; margin-top: .75rem; }
th, td { border-bottom: 1px solid var(--line); text-align: left; padding: .45rem; }
.badge { display:inline-block; padding:.15rem .5rem; border-radius:999px; font-size:.8rem; font-weight:700; }
.badge-new { background: rgba(114,176,249,.14); color: var(--neon-lime); }
.badge-changed { background: rgba(220,101,255,.15); color: var(--neon-magenta); }

.flash { border-radius: 8px; padding: .75rem .9rem; margin-bottom: 1rem; }
.flash-warning { background: rgba(255, 160, 50, 0.15); color: #ffd4aa; border: 1px solid rgba(255, 193, 120, 0.4); }

.metric-card-grid {
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  margin:1rem 0;
}
.metric-card {
  border:1px solid var(--neon-magenta);
  border-radius:10px;
  padding:.8rem;
  background: rgba(17, 24, 48, 0.35);
  box-shadow: 0 0 5px rgba(220, 101, 255, 0.2);
}
.metric-card h3 { margin-top:0; font-family: Orbitron, sans-serif; font-size:.95rem; }
.inline-form { display:grid; gap:.35rem; margin-top:.35rem; }
.top-nav { display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1rem; }
.top-nav a { padding:.3rem .55rem; border:1px solid var(--line); border-radius:999px; text-decoration:none; }
.toolbar { display:flex; gap:.6rem; justify-content:space-between; align-items:center; margin:.7rem 0; flex-wrap:wrap; }
.table-wrap { overflow-x:auto; }
.dual-form { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); }
.flash-success { background: rgba(67, 224, 142, 0.15); color: #bbffd7; border: 1px solid rgba(88, 238, 165, 0.45); }
dialog { border:1px solid var(--line); border-radius:12px; background:var(--panel); color:var(--text); width:min(520px, 94vw); }
menu { display:flex; justify-content:flex-end; gap:.5rem; padding:0; margin:0; }

@media (max-width: 700px) {
  .filter-grid { grid-template-columns: 1fr; }
  th, td { white-space: nowrap; }
}