/* HEBG — dark cybersecurity theme: black / dark gray / neon green / electric blue */
:root {
  --hebg-bg: #060808;
  --hebg-panel: #101414;
  --hebg-border: #1d2626;
  --hebg-green: #39ff14;
  --hebg-blue: #00b0ff;
  --hebg-dim: #7a8a8a;
}
body {
  background: var(--hebg-bg);
  color: #d7e0e0;
  font-family: "Segoe UI", system-ui, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
.hebg-nav { background: #0a0d0d; border-bottom: 1px solid var(--hebg-border); }
.brand-neon {
  color: var(--hebg-green) !important;
  font-family: "Consolas", "SFMono-Regular", monospace;
  font-weight: 700;
  letter-spacing: 2px;
  text-shadow: 0 0 12px rgba(57, 255, 20, .45);
}
.brand-sub {
  color: var(--hebg-dim);
  font-size: .55em;
  letter-spacing: 4px;
  margin-left: .6em;
  text-transform: uppercase;
  text-shadow: none;
}
.card, .list-group-item, .accordion-item, .modal-content {
  background: var(--hebg-panel);
  border: 1px solid var(--hebg-border);
}
.card-header { border-bottom: 1px solid var(--hebg-border); background: #0c1010; }
a { color: var(--hebg-blue); }
a:hover { color: #66ccff; }
.btn-neon {
  background: transparent;
  border: 1px solid var(--hebg-green);
  color: var(--hebg-green);
  font-family: monospace;
  letter-spacing: 1px;
}
.btn-neon:hover { background: var(--hebg-green); color: #000; box-shadow: 0 0 14px rgba(57,255,20,.5); }
.btn-blue { border: 1px solid var(--hebg-blue); color: var(--hebg-blue); background: transparent; }
.btn-blue:hover { background: var(--hebg-blue); color: #000; }
.text-neon { color: var(--hebg-green) !important; }
.text-eblue { color: var(--hebg-blue) !important; }
.alert-neon { background: rgba(57,255,20,.08); border-color: var(--hebg-green); color: var(--hebg-green); }
.mono { font-family: "Consolas", monospace; }
.stat-card { text-align: center; padding: 1.1rem .5rem; }
.stat-card .stat-value { font-size: 2rem; font-family: monospace; color: var(--hebg-green); }
.stat-card .stat-label { color: var(--hebg-dim); font-size: .75rem; text-transform: uppercase; letter-spacing: 2px; }
.countdown { font-family: monospace; color: var(--hebg-blue); font-size: 1.1rem; }
.challenge-card.locked { opacity: .45; filter: grayscale(.6); }
.challenge-card.solved { border-color: var(--hebg-green); box-shadow: 0 0 10px rgba(57,255,20,.18); }
.badge-difficulty-easy   { background: #144d14; color: #6dff6d; }
.badge-difficulty-medium { background: #4d4414; color: #ffd76d; }
.badge-difficulty-hard   { background: #4d2014; color: #ff9a6d; }
.badge-difficulty-insane { background: #4d1414; color: #ff6d6d; }
.flag-url {
  background: #060a0a;
  border: 1px dashed var(--hebg-blue);
  padding: .6rem .8rem;
  border-radius: .35rem;
  word-break: break-all;
  font-size: .85rem;
}
.table { --bs-table-bg: var(--hebg-panel); }
.rank-1 td { color: var(--hebg-green); font-weight: 700; }
.markdown-body h1, .markdown-body h2, .markdown-body h3 { color: var(--hebg-green); }
.markdown-body pre { background: #060a0a; border: 1px solid var(--hebg-border); padding: .8rem; border-radius: .35rem; }
.markdown-body code { color: var(--hebg-blue); }
.hebg-footer { border-top: 1px solid var(--hebg-border); letter-spacing: 2px; }
input.form-control, select.form-select { background: #0a0e0e; border-color: var(--hebg-border); }
input.form-control:focus { border-color: var(--hebg-green); box-shadow: 0 0 0 .2rem rgba(57,255,20,.15); background:#0a0e0e; }
@media (max-width: 576px) { .stat-card .stat-value { font-size: 1.4rem; } }

/* ===================== Admin Panel ===================== */
.admin-body { background: var(--hebg-bg); }
.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar {
  width: 240px; flex-shrink: 0; background: #0a0d0d;
  border-right: 1px solid var(--hebg-border);
  display: flex; flex-direction: column; padding: 1rem .75rem;
  position: sticky; top: 0; height: 100vh;
}
.admin-brand { font-weight: 700; font-size: 1.15rem; text-decoration: none; display: block; margin-bottom: 1.25rem; }
.admin-nav { display: flex; flex-direction: column; gap: .15rem; }
.admin-link {
  color: var(--hebg-dim); text-decoration: none; padding: .5rem .75rem;
  border-radius: 6px; font-size: .92rem; border: 1px solid transparent;
}
.admin-link:hover { color: #cfe; background: #0e1414; }
.admin-link.active {
  color: var(--hebg-green); background: rgba(57,255,20,.06);
  border-color: rgba(57,255,20,.25);
}
.admin-side-foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--hebg-border); }
.admin-main { flex: 1; padding: 1.5rem 2rem; max-width: 1200px; }
.admin-card { background: var(--hebg-panel); border: 1px solid var(--hebg-border); border-radius: 10px; overflow: hidden; }
.admin-table { margin: 0; --bs-table-bg: transparent; }
.admin-table th { color: var(--hebg-dim); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.admin-table td, .admin-table th { border-color: var(--hebg-border); vertical-align: middle; }

.stat-card {
  background: var(--hebg-panel); border: 1px solid var(--hebg-border);
  border-radius: 10px; padding: 1.1rem 1.25rem; transition: border-color .15s, box-shadow .15s;
}
.stat-card:hover { border-color: rgba(57,255,20,.4); box-shadow: 0 0 18px rgba(57,255,20,.12); }
.stat-num { font-size: 2rem; font-weight: 700; color: var(--hebg-green); line-height: 1; }
.stat-label { color: var(--hebg-dim); font-size: .85rem; margin-top: .35rem; }

.badge-role { background: #0e1620; color: var(--hebg-blue); border: 1px solid rgba(0,176,255,.35); font-weight: 500; text-transform: capitalize; }
.badge-status { text-transform: capitalize; font-weight: 500; }
.badge-active, .badge-running, .badge-published { background: rgba(57,255,20,.12); color: var(--hebg-green); border: 1px solid rgba(57,255,20,.35); }
.badge-disabled, .badge-draft, .badge-completed, .badge-scheduled { background: #161b1b; color: var(--hebg-dim); border: 1px solid var(--hebg-border); }
.badge-blocked { background: rgba(255,60,60,.12); color: #ff6b6b; border: 1px solid rgba(255,60,60,.4); }
.badge-diff { text-transform: capitalize; font-weight: 500; }
.badge-diff-easy { background: rgba(57,255,20,.12); color: var(--hebg-green); border: 1px solid rgba(57,255,20,.3); }
.badge-diff-medium { background: rgba(0,176,255,.12); color: var(--hebg-blue); border: 1px solid rgba(0,176,255,.3); }
.badge-diff-hard { background: rgba(255,170,0,.12); color: #ffb020; border: 1px solid rgba(255,170,0,.35); }
.badge-diff-insane { background: rgba(255,60,60,.12); color: #ff6b6b; border: 1px solid rgba(255,60,60,.4); }

@media (max-width: 768px) {
  .admin-shell { flex-direction: column; }
  .admin-sidebar { width: 100%; height: auto; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .admin-nav { flex-direction: row; flex-wrap: wrap; }
  .admin-side-foot { margin: 0 0 0 auto; border: 0; padding: 0; }
  .admin-main { padding: 1rem; }
}