/*
 * GIVCTF theme overrides
 * Replicates the design language of the project reference HTMLs
 * (CTF/ctf-proyector.html, CTF/ctf-admin.html):
 * - Cyan/amber accent palette on a dark background
 * - JetBrains Mono for headers, numbers, labels and buttons
 * - Rajdhani for body text and descriptions
 * - Sharp corners (no border-radius), 1px borders, subtle cyan glow on focus
 *
 * Loaded from templates/base.html AFTER the bundled main.<hash>.css and the
 * plugin styles, so cascade priority lands here while still letting an admin
 * override via Configs.theme_header.
 */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bg-primary: #0a0e14;
  --bg-secondary: #0f1419;
  --bg-card: #151b23;
  --accent-cyan: #00d9ff;
  --accent-amber: #ffb800;
  --accent-red: #ff3366;
  --accent-green: #00ff88;
  --text-primary: #e6e8eb;
  --text-secondary: #8a9199;
  --border-color: #1f2937;
  --glow: rgba(0, 217, 255, 0.3);

  /* Bootstrap variable overrides */
  --bs-body-bg: var(--bg-primary);
  --bs-body-color: var(--text-primary);
  --bs-body-font-family: 'Rajdhani', system-ui, sans-serif;
  --bs-primary: var(--accent-cyan);
  --bs-primary-rgb: 0, 217, 255;
  --bs-success: var(--accent-green);
  --bs-success-rgb: 0, 255, 136;
  --bs-danger: var(--accent-red);
  --bs-danger-rgb: 255, 51, 102;
  --bs-warning: var(--accent-amber);
  --bs-warning-rgb: 255, 184, 0;
  --bs-info: var(--accent-cyan);
  --bs-info-rgb: 0, 217, 255;
  --bs-secondary: var(--text-secondary);
  --bs-link-color: var(--accent-cyan);
  --bs-link-color-rgb: 0, 217, 255;
  --bs-link-hover-color: var(--accent-amber);
  --bs-border-color: var(--border-color);
  --bs-card-bg: var(--bg-card);
  --bs-card-border-color: var(--border-color);
  --bs-card-cap-bg: transparent;
  --bs-modal-bg: var(--bg-card);
  --bs-modal-border-color: var(--border-color);
  --bs-tooltip-bg: var(--bg-card);
  --bs-tooltip-color: var(--text-primary);
  --bs-popover-bg: var(--bg-card);
  --bs-popover-border-color: var(--border-color);
  --bs-popover-body-color: var(--text-primary);
}

/* ============================================================
   BASE TYPOGRAPHY & RESET
   ============================================================ */
html, body {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

body {
  font-family: 'Rajdhani', system-ui, sans-serif !important;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  font-weight: 700;
}

h1, .h1 {
  color: var(--accent-cyan);
  letter-spacing: -0.5px;
}

a {
  color: var(--accent-cyan);
  text-decoration: none;
  transition: color 120ms ease;
}
a:hover, a:focus {
  color: var(--accent-amber);
  text-decoration: none;
}

hr {
  border-color: var(--border-color) !important;
  opacity: 1;
}

::selection {
  background: var(--accent-cyan);
  color: var(--bg-primary);
}

code, kbd, pre, samp {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  color: var(--accent-amber);
}
pre {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 1rem;
  color: var(--text-primary);
}

small, .small {
  color: var(--text-secondary);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 0 !important;
  border-width: 1px;
  padding: 0.65rem 1.5rem;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

/* Bootstrap 5 buttons drive their colors through `--bs-btn-*` variables
 * scoped per variant class, so we override ALL of them here AND set the
 * shorthand properties with !important as belt-and-suspenders. */
.btn-primary {
  --bs-btn-bg: var(--accent-cyan);
  --bs-btn-color: var(--bg-primary);
  --bs-btn-border-color: var(--accent-cyan);
  --bs-btn-hover-bg: var(--accent-amber);
  --bs-btn-hover-color: var(--bg-primary);
  --bs-btn-hover-border-color: var(--accent-amber);
  --bs-btn-active-bg: var(--accent-amber);
  --bs-btn-active-color: var(--bg-primary);
  --bs-btn-active-border-color: var(--accent-amber);
  --bs-btn-disabled-bg: var(--accent-cyan);
  --bs-btn-disabled-color: var(--bg-primary);
  --bs-btn-disabled-border-color: var(--accent-cyan);
  background: var(--accent-cyan) !important;
  border-color: var(--accent-cyan) !important;
  color: var(--bg-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
  background: var(--accent-amber) !important;
  border-color: var(--accent-amber) !important;
  color: var(--bg-primary) !important;
}
.btn-primary:disabled,
.btn-primary.disabled {
  background: var(--accent-cyan) !important;
  border-color: var(--accent-cyan) !important;
  color: var(--bg-primary) !important;
  opacity: 0.5;
}

.btn-secondary {
  --bs-btn-bg: var(--bg-card);
  --bs-btn-color: var(--text-primary);
  --bs-btn-border-color: var(--border-color);
  --bs-btn-hover-bg: var(--bg-card);
  --bs-btn-hover-color: var(--accent-cyan);
  --bs-btn-hover-border-color: var(--accent-cyan);
  --bs-btn-active-bg: var(--bg-card);
  --bs-btn-active-color: var(--accent-cyan);
  --bs-btn-active-border-color: var(--accent-cyan);
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active {
  background: var(--bg-card) !important;
  border-color: var(--accent-cyan) !important;
  color: var(--accent-cyan) !important;
}

.btn-success {
  --bs-btn-bg: var(--accent-green);
  --bs-btn-color: var(--bg-primary);
  --bs-btn-border-color: var(--accent-green);
  --bs-btn-hover-bg: var(--accent-amber);
  --bs-btn-hover-color: var(--bg-primary);
  --bs-btn-hover-border-color: var(--accent-amber);
  --bs-btn-active-bg: var(--accent-amber);
  --bs-btn-active-color: var(--bg-primary);
  --bs-btn-active-border-color: var(--accent-amber);
  --bs-btn-disabled-bg: var(--accent-green);
  --bs-btn-disabled-color: var(--bg-primary);
  --bs-btn-disabled-border-color: var(--accent-green);
  background: var(--accent-green) !important;
  border-color: var(--accent-green) !important;
  color: var(--bg-primary) !important;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active {
  background: var(--accent-amber) !important;
  border-color: var(--accent-amber) !important;
  color: var(--bg-primary) !important;
}

.btn-danger {
  --bs-btn-bg: var(--accent-red);
  --bs-btn-color: var(--text-primary);
  --bs-btn-border-color: var(--accent-red);
  --bs-btn-hover-bg: var(--accent-red);
  --bs-btn-hover-color: var(--text-primary);
  --bs-btn-hover-border-color: var(--accent-amber);
  --bs-btn-active-bg: var(--accent-red);
  --bs-btn-active-color: var(--text-primary);
  --bs-btn-active-border-color: var(--accent-amber);
  --bs-btn-disabled-bg: var(--accent-red);
  --bs-btn-disabled-color: var(--text-primary);
  --bs-btn-disabled-border-color: var(--accent-red);
  background: var(--accent-red) !important;
  border-color: var(--accent-red) !important;
  color: var(--text-primary) !important;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active {
  background: var(--accent-red) !important;
  border-color: var(--accent-amber) !important;
  color: var(--text-primary) !important;
}

.btn-warning {
  --bs-btn-bg: var(--accent-amber);
  --bs-btn-color: var(--bg-primary);
  --bs-btn-border-color: var(--accent-amber);
  --bs-btn-hover-bg: var(--accent-cyan);
  --bs-btn-hover-color: var(--bg-primary);
  --bs-btn-hover-border-color: var(--accent-cyan);
  --bs-btn-active-bg: var(--accent-cyan);
  --bs-btn-active-color: var(--bg-primary);
  --bs-btn-active-border-color: var(--accent-cyan);
  background: var(--accent-amber) !important;
  border-color: var(--accent-amber) !important;
  color: var(--bg-primary) !important;
}
.btn-warning:hover,
.btn-warning:focus {
  background: var(--accent-cyan) !important;
  border-color: var(--accent-cyan) !important;
  color: var(--bg-primary) !important;
}

.btn-info {
  --bs-btn-bg: var(--accent-cyan);
  --bs-btn-color: var(--bg-primary);
  --bs-btn-border-color: var(--accent-cyan);
  --bs-btn-hover-bg: var(--accent-amber);
  --bs-btn-hover-color: var(--bg-primary);
  --bs-btn-hover-border-color: var(--accent-amber);
  --bs-btn-active-bg: var(--accent-amber);
  --bs-btn-active-color: var(--bg-primary);
  --bs-btn-active-border-color: var(--accent-amber);
  background: var(--accent-cyan) !important;
  border-color: var(--accent-cyan) !important;
  color: var(--bg-primary) !important;
}
.btn-info:hover, .btn-info:focus {
  background: var(--accent-amber) !important;
  border-color: var(--accent-amber) !important;
  color: var(--bg-primary) !important;
}

.btn-outline-primary {
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--accent-cyan);
  --bs-btn-border-color: var(--accent-cyan);
  --bs-btn-hover-bg: var(--accent-cyan);
  --bs-btn-hover-color: var(--bg-primary);
  --bs-btn-hover-border-color: var(--accent-cyan);
  --bs-btn-active-bg: var(--accent-cyan);
  --bs-btn-active-color: var(--bg-primary);
  --bs-btn-active-border-color: var(--accent-cyan);
  background: transparent !important;
  border-color: var(--accent-cyan) !important;
  color: var(--accent-cyan) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus,
.btn-outline-primary.active, .btn-outline-primary:active {
  background: var(--accent-cyan) !important;
  color: var(--bg-primary) !important;
}

.btn-outline-secondary {
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--text-secondary);
  --bs-btn-border-color: var(--border-color);
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-color: var(--accent-cyan);
  --bs-btn-hover-border-color: var(--accent-cyan);
  background: transparent !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}
.btn-outline-secondary:hover {
  background: transparent !important;
  border-color: var(--accent-cyan) !important;
  color: var(--accent-cyan) !important;
}

.btn-outline-success {
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--accent-green);
  --bs-btn-border-color: var(--accent-green);
  --bs-btn-hover-bg: var(--accent-green);
  --bs-btn-hover-color: var(--bg-primary);
  --bs-btn-hover-border-color: var(--accent-green);
  --bs-btn-active-bg: var(--accent-green);
  --bs-btn-active-color: var(--bg-primary);
  --bs-btn-active-border-color: var(--accent-green);
  background: transparent !important;
  border-color: var(--accent-green) !important;
  color: var(--accent-green) !important;
}
.btn-outline-success:hover, .btn-outline-success:focus,
.btn-outline-success.active, .btn-outline-success:active {
  background: var(--accent-green) !important;
  color: var(--bg-primary) !important;
}

.btn-outline-danger {
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--accent-red);
  --bs-btn-border-color: var(--accent-red);
  --bs-btn-hover-bg: var(--accent-red);
  --bs-btn-hover-color: var(--text-primary);
  --bs-btn-hover-border-color: var(--accent-red);
  --bs-btn-active-bg: var(--accent-red);
  --bs-btn-active-color: var(--text-primary);
  --bs-btn-active-border-color: var(--accent-red);
  background: transparent !important;
  border-color: var(--accent-red) !important;
  color: var(--accent-red) !important;
}
.btn-outline-danger:hover, .btn-outline-danger:focus,
.btn-outline-danger.active, .btn-outline-danger:active {
  background: var(--accent-red) !important;
  color: var(--text-primary) !important;
}

.btn-outline-info {
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--accent-cyan);
  --bs-btn-border-color: var(--accent-cyan);
  --bs-btn-hover-bg: var(--accent-cyan);
  --bs-btn-hover-color: var(--bg-primary);
  --bs-btn-hover-border-color: var(--accent-cyan);
  background: transparent !important;
  border-color: var(--accent-cyan) !important;
  color: var(--accent-cyan) !important;
}
.btn-outline-info:hover {
  background: var(--accent-cyan) !important;
  color: var(--bg-primary) !important;
}

.btn:focus,
.btn:focus-visible {
  box-shadow: 0 0 0 0.2rem var(--glow);
  outline: none;
}

.btn-link {
  color: var(--accent-cyan);
  text-decoration: none;
}
.btn-link:hover { color: var(--accent-amber); }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  color: var(--text-primary);
}
.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--border-color) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-cyan);
}
.card-body { color: var(--text-primary); }
.card-footer {
  background: transparent !important;
  border-top: 1px solid var(--border-color) !important;
}
.card-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-transform: uppercase;
  color: var(--text-primary);
}
.card-subtitle, .card-text { color: var(--text-secondary); }

/* ============================================================
   MODALS
   ============================================================ */
.modal-content {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  box-shadow: 0 0 30px rgba(0, 217, 255, 0.12) !important;
  color: var(--text-primary);
  --bs-modal-bg: var(--bg-card);
  --bs-modal-color: var(--text-primary);
  --bs-modal-border-color: var(--border-color);
  --bs-modal-border-radius: 0;
  --bs-modal-box-shadow: 0 0 30px rgba(0, 217, 255, 0.12);
  --bs-modal-header-border-color: var(--border-color);
  --bs-modal-footer-border-color: var(--border-color);
}
.modal-header {
  border-bottom: 1px solid var(--border-color) !important;
}
.modal-header .modal-title,
.modal-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-transform: uppercase;
  color: var(--accent-cyan);
  letter-spacing: 0.02em;
}
.modal-body {
  background: var(--bg-card);
  color: var(--text-primary);
}
.modal-footer {
  border-top: 1px solid var(--border-color) !important;
  background: var(--bg-card);
}
.modal-backdrop.show { opacity: 0.85; }

/* Close button (X) — Bootstrap 5 uses an SVG background-image. We invert it
 * to white and recolor on hover to amber so it stays visible against bg-card. */
.btn-close, .close {
  filter: invert(1) grayscale(100%) brightness(2) !important;
  opacity: 0.7;
  background-color: transparent !important;
  border: none;
  width: 1.2em;
  height: 1.2em;
  transition: opacity 120ms ease, transform 120ms ease;
}
.btn-close:hover, .btn-close:focus,
.close:hover, .close:focus {
  opacity: 1 !important;
  transform: scale(1.1);
  outline: none;
  box-shadow: none !important;
}

/* ============================================================
   FORMS
   ============================================================ */
.form-control,
.form-select,
.input-group-text,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
  background: var(--bg-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  color: var(--text-primary) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
  background: var(--bg-primary) !important;
  border-color: var(--accent-cyan) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 0 0 0.2rem var(--glow) !important;
  outline: none !important;
}
.form-control::placeholder,
input::placeholder,
textarea::placeholder { color: var(--text-secondary); opacity: 0.7; }

.form-label, label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 700;
}
.form-text { color: var(--text-secondary); }
.input-group-text {
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
}
.form-check-input {
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 0;
}
.form-check-input:checked {
  background-color: var(--accent-cyan);
  border-color: var(--accent-cyan);
}
.form-check-input:focus {
  box-shadow: 0 0 0 0.2rem var(--glow);
  border-color: var(--accent-cyan);
}

/* ============================================================
   TABLES
   ============================================================ */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-primary);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.02);
  --bs-table-striped-color: var(--text-primary);
  --bs-table-hover-bg: rgba(0, 217, 255, 0.05);
  --bs-table-hover-color: var(--text-primary);
  --bs-table-border-color: var(--border-color);
  color: var(--text-primary);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
}
.table thead { background: var(--bg-primary); }
.table thead th {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-cyan) !important;
  border-bottom: 2px solid var(--border-color) !important;
  font-weight: 700;
  background: var(--bg-primary) !important;
}
.table tbody td, .table tbody th {
  border-color: var(--border-color);
  vertical-align: middle;
  color: var(--text-primary);
  background-color: transparent;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: rgba(255, 255, 255, 0.02);
  color: var(--text-primary);
}
.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: rgba(0, 217, 255, 0.05);
}

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  border-radius: 0;
  padding: 0.35rem 0.6rem;
}
.badge.bg-primary,   .badge-primary   { background: rgba(0, 217, 255, 0.15) !important;  color: var(--accent-cyan)  !important; border: 1px solid var(--accent-cyan); }
.badge.bg-success,   .badge-success   { background: rgba(0, 255, 136, 0.15) !important;  color: var(--accent-green) !important; border: 1px solid var(--accent-green); }
.badge.bg-warning,   .badge-warning   { background: rgba(255, 184, 0, 0.15) !important;  color: var(--accent-amber) !important; border: 1px solid var(--accent-amber); }
.badge.bg-danger,    .badge-danger    { background: rgba(255, 51, 102, 0.15) !important; color: var(--accent-red)   !important; border: 1px solid var(--accent-red); }
.badge.bg-info,      .badge-info      { background: rgba(0, 217, 255, 0.15) !important;  color: var(--accent-cyan)  !important; border: 1px solid var(--accent-cyan); }
.badge.bg-secondary, .badge-secondary { background: var(--bg-card) !important;            color: var(--text-secondary) !important; border: 1px solid var(--border-color); }

/* ============================================================
   ALERTS
   ============================================================ */
.alert,
.alert-primary, .alert-success, .alert-danger,
.alert-warning, .alert-info, .alert-secondary {
  --bs-alert-bg: var(--bg-card);
  --bs-alert-color: var(--text-primary);
  --bs-alert-border-color: var(--border-color);
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-left-width: 4px !important;
  border-radius: 0 !important;
  color: var(--text-primary) !important;
}
.alert-primary   { border-left-color: var(--accent-cyan)  !important; }
.alert-success   { border-left-color: var(--accent-green) !important; }
.alert-warning   { border-left-color: var(--accent-amber) !important; }
.alert-danger    { border-left-color: var(--accent-red)   !important; }
.alert-info      { border-left-color: var(--accent-cyan)  !important; }
.alert-secondary { border-left-color: var(--text-secondary) !important; }
.alert .alert-link { color: var(--accent-cyan); }
.alert strong { color: var(--text-primary); }

/* ============================================================
   DROPDOWNS / LIST GROUP
   ============================================================ */
.dropdown-menu {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 0;
  color: var(--text-primary);
}
.dropdown-item {
  color: var(--text-primary);
  font-family: 'Rajdhani', system-ui, sans-serif;
}
.dropdown-item:hover, .dropdown-item:focus {
  background: var(--bg-primary);
  color: var(--accent-cyan);
}
.dropdown-divider {
  border-top-color: var(--border-color);
}
.dropdown-header {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
}

.list-group-item {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  color: var(--text-primary);
}
.list-group-item:hover {
  background: var(--bg-primary) !important;
  border-color: var(--accent-cyan) !important;
}
.list-group-item.active {
  background: var(--bg-primary) !important;
  border-color: var(--accent-cyan) !important;
  color: var(--accent-cyan);
}

/* ============================================================
   NAVBAR (refined — Block 4)
   ============================================================ */

/* Override .bg-dark on the navbar */
.navbar, .navbar.bg-dark, .navbar.fixed-top, .navbar-dark {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border-color) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.navbar-brand {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  text-transform: uppercase;
  color: var(--accent-cyan) !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 1.15rem;
}
.navbar-brand:hover, .navbar-brand:focus { color: var(--accent-amber) !important; }
.navbar-brand .ctf_logo { filter: brightness(1.1) saturate(1.1); }

.navbar .nav-link,
.navbar-nav .nav-link {
  font-family: 'Rajdhani', system-ui, sans-serif !important;
  color: var(--text-primary) !important;
  font-weight: 700;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.5rem 1rem !important;
  position: relative;
  transition: color 120ms ease;
}
.navbar .nav-link:hover,
.navbar-nav .nav-link:hover {
  color: var(--accent-amber) !important;
}
.navbar .nav-link:focus,
.navbar .nav-link:focus-visible {
  color: var(--accent-amber) !important;
  outline: none;
}

/* Active item: cyan + subtle glowing bottom bar */
.navbar .nav-link.active,
.navbar-nav .nav-link.active {
  color: var(--accent-cyan) !important;
}
.navbar .nav-link.active::after {
  content: "";
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 0.2rem;
  height: 2px;
  background: var(--accent-cyan);
  box-shadow: 0 0 8px var(--glow);
}

/* Mobile toggler */
.navbar-toggler {
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  color: var(--accent-cyan);
  padding: 0.35rem 0.6rem;
}
.navbar-toggler:focus { box-shadow: 0 0 0 0.2rem var(--glow) !important; }
.navbar-dark .navbar-toggler-icon,
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%2300d9ff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Notification count pill inside navbar */
.navbar .badge-notification {
  background: var(--accent-red) !important;
  color: var(--text-primary) !important;
  border: none !important;
  font-size: 0.7rem;
  margin-left: 0.25rem;
  padding: 0.2rem 0.45rem;
}

/* Theme/language switch buttons live inside .nav-link, normalize background */
.navbar .theme-switch,
.navbar .dropdown-toggle {
  background: transparent !important;
  border: none !important;
}
.navbar .dropdown-toggle::after { vertical-align: 0.15em; }

/* Mobile collapsed separator hr inside navbar */
.navbar hr {
  border-top: 1px solid var(--border-color) !important;
  opacity: 1;
  margin: 0.5rem 0;
}

/* Language dropdown current item */
.navbar .dropdown-item.bg-primary,
.navbar .dropdown-item.bg-primary.text-white {
  background: rgba(0, 217, 255, 0.15) !important;
  color: var(--accent-cyan) !important;
}

/* ============================================================
   TABS
   ============================================================ */
.nav-tabs {
  border-bottom: 1px solid var(--border-color);
}
.nav-tabs .nav-link {
  color: var(--text-secondary);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
  border-radius: 0;
}
.nav-tabs .nav-link:hover {
  color: var(--accent-amber);
  border-color: transparent;
}
.nav-tabs .nav-link.active {
  background: var(--bg-card);
  color: var(--accent-cyan);
  border-color: var(--border-color);
  border-bottom: 2px solid var(--accent-cyan);
}

/* ============================================================
   PAGINATION & PROGRESS
   ============================================================ */
.page-link {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--accent-cyan);
  border-radius: 0 !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.page-link:hover {
  background: var(--bg-primary);
  border-color: var(--accent-cyan);
  color: var(--accent-amber);
}
.page-item.active .page-link {
  background: var(--accent-cyan);
  border-color: var(--accent-cyan);
  color: var(--bg-primary);
}
.page-item.disabled .page-link {
  background: var(--bg-card);
  color: var(--text-secondary);
}

.progress {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 0;
  height: 8px;
}
.progress-bar { background: var(--accent-cyan); }

/* ============================================================
   PAGE HERO (Block 5 — operations command frame for home / CMS pages)
   ============================================================ */
.givctf-page-hero {
  padding: 3rem 1rem 4rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.givctf-page-frame {
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--accent-cyan);
  padding: 2.5rem 2.5rem 2rem;
  position: relative;
  box-shadow: 0 0 24px rgba(0, 217, 255, 0.06);
}
.givctf-page-frame::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 4px;
  height: 40px;
  background: var(--accent-amber);
}

.givctf-page-tagline {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  color: var(--text-secondary);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color);
}

.givctf-page-content {
  color: var(--text-primary);
  line-height: 1.7;
  font-size: 1.05rem;
}

.givctf-page-content h1 {
  font-size: 2.5rem;
  margin: 0 0 1.5rem;
  letter-spacing: -0.02em;
  color: var(--accent-cyan);
}
.givctf-page-content h2 {
  font-size: 1.6rem;
  color: var(--accent-cyan);
  margin: 2rem 0 1rem;
}
.givctf-page-content h3 {
  font-size: 1.25rem;
  color: var(--accent-amber);
  margin: 1.5rem 0 0.75rem;
}
.givctf-page-content h4, .givctf-page-content h5, .givctf-page-content h6 {
  margin: 1.25rem 0 0.5rem;
}
.givctf-page-content p { margin: 0 0 1rem; }
.givctf-page-content ul, .givctf-page-content ol {
  margin: 0 0 1rem 1.5rem;
}
.givctf-page-content li { margin-bottom: 0.4rem; }
.givctf-page-content a {
  color: var(--accent-cyan);
  border-bottom: 1px dashed rgba(0, 217, 255, 0.4);
}
.givctf-page-content a:hover {
  color: var(--accent-amber);
  border-bottom-color: var(--accent-amber);
}
.givctf-page-content img {
  max-width: 100%;
  height: auto;
}
/* Default CTFd placeholder home: shrink the centered logo so it doesn't dominate */
.givctf-page-content img.w-100 {
  max-width: 220px !important;
  padding: 0.5rem !important;
  margin: 0 auto 1.5rem !important;
  display: block !important;
}
.givctf-page-content .row { margin: 0; }
.givctf-page-content .col, .givctf-page-content [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}
.givctf-page-content blockquote {
  border-left: 3px solid var(--accent-cyan);
  background: var(--bg-primary);
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
  color: var(--text-primary);
}

/* ============================================================
   CHALLENGES GRID (Block 6 — challenge cards)
   ============================================================ */

/* Page-level jumbotron — flatten the heavy Bootstrap banner into a slim header */
.jumbotron {
  background: transparent !important;
  padding: 2.25rem 0 1.5rem !important;
  margin: 0 0 1rem !important;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
}
.jumbotron .container { padding-left: 1rem; padding-right: 1rem; }
.jumbotron h1 {
  text-align: center;
  font-size: 2rem;
  color: var(--accent-cyan);
  letter-spacing: 0.04em;
  margin: 0;
}

/* Loading spinner */
.spinner.fa-spin, .fa-circle-notch.fa-spin { color: var(--accent-cyan); }

/* Empty-state placeholder shown when there are zero challenges.
 * Uses flex column with !important to win against any bundled rules
 * and to keep centering correct even when Alpine x-show toggles display. */
div.givctf-empty-state,
.givctf-empty-state {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  padding: 4rem 1rem !important;
  margin: 2rem auto !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  text-transform: uppercase !important;
  letter-spacing: 0.18em !important;
  color: var(--text-secondary) !important;
  font-size: 0.9rem !important;
  line-height: 1.4 !important;
}
.givctf-empty-state::before {
  content: "⏳" !important;
  display: block !important;
  font-size: 2.5rem !important;
  line-height: 1 !important;
  margin-bottom: 1rem !important;
  opacity: 0.5 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Category section header — replicates the proyector "▶ TÍTULO" pattern */
.category-header {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.6rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
}
.category-header::before {
  content: "▶";
  color: var(--accent-cyan);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.85em;
}
.category-header h3 {
  color: var(--accent-cyan) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
  font-size: 1.3rem;
}

/* Challenge button (the card) */
.challenge-button.btn-dark,
.challenge-button {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  color: var(--text-primary) !important;
  padding: 1.4rem 1rem !important;
  text-align: center;
  position: relative;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease, background-color 150ms ease;
  min-height: 140px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  letter-spacing: normal !important;
  text-transform: none !important;
  font-weight: 500 !important;
}
.challenge-button:hover,
.challenge-button:focus,
.challenge-button:focus-visible {
  border-color: var(--accent-cyan) !important;
  box-shadow: 0 0 18px rgba(0, 217, 255, 0.25) !important;
  transform: translateY(-2px);
  background: var(--bg-card) !important;
  color: var(--text-primary) !important;
  outline: none;
}
.challenge-button:active {
  transform: translateY(0);
}

.challenge-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin: 0 !important;
}

.challenge-inner > p {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-transform: uppercase;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
  word-break: break-word;
}
.challenge-inner > span {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--accent-amber);
  display: block;
  line-height: 1;
}

/* Solved state */
.challenge-button.challenge-solved {
  border-color: var(--accent-green) !important;
}
.challenge-button.challenge-solved::after {
  content: "✓";
  position: absolute;
  top: 0.45rem;
  right: 0.6rem;
  color: var(--accent-green);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
}
.challenge-button.challenge-solved .challenge-inner > span {
  color: var(--accent-green);
}
.challenge-button.challenge-solved:hover,
.challenge-button.challenge-solved:focus {
  border-color: var(--accent-green) !important;
  box-shadow: 0 0 18px rgba(0, 255, 136, 0.3) !important;
}

/* Disabled / locked challenges */
.challenge-button[disabled],
.challenge-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.challenge-button[disabled]::after,
.challenge-button.disabled::after {
  content: "🔒";
  position: absolute;
  top: 0.45rem;
  right: 0.6rem;
  font-size: 1rem;
  color: var(--text-secondary);
}

/* Compact spacing on small screens */
@media (max-width: 575.98px) {
  .challenge-button { min-height: 110px; padding: 1rem 0.75rem !important; }
  .challenge-inner > p { font-size: 0.9rem; }
  .challenge-inner > span { font-size: 1.4rem; }
}

/* ============================================================
   SCOREBOARD (Block 8)
   ============================================================ */

/* Chart container */
#score-graph {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color);
  padding: 1rem 0.5rem;
  margin: 1.5rem 0;
  min-height: 320px;
  position: relative;
}
#score-graph .spinner, #score-graph .fa-spin {
  color: var(--accent-cyan) !important;
}

/* Bracket switcher (when there are sub-brackets) */
#scoreboard .nav.nav-pills .nav-link {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  margin: 0 0.25rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-primary) !important;
}
#scoreboard .nav.nav-pills .nav-link.active,
#scoreboard .nav.nav-pills .nav-link:hover {
  background: var(--bg-primary) !important;
  border-color: var(--accent-cyan) !important;
  color: var(--accent-cyan) !important;
}

/* Standings table — replicates the proyector's "team-card" aesthetic via row styling */
#scoreboard .table {
  background: transparent !important;
  border: none !important;
}
#scoreboard .table thead th {
  background: var(--bg-primary) !important;
  color: var(--accent-cyan) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border-color) !important;
  padding: 0.85rem 0.75rem;
}

#scoreboard .table tbody tr {
  background: var(--bg-card) !important;
  --bs-table-accent-bg: transparent !important;
  --bs-table-bg-state: var(--bg-card) !important;
  border-bottom: 1px solid var(--border-color);
  transition: background-color 150ms ease, transform 150ms ease;
}
#scoreboard .table tbody tr > * { background: transparent !important; }
#scoreboard .table tbody tr:hover {
  background: rgba(0, 217, 255, 0.04) !important;
}
#scoreboard .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-accent-bg: rgba(255, 255, 255, 0.015) !important;
  background-color: var(--bs-table-accent-bg) !important;
}

/* Rank cell (col 1): big mono amber number, like proyector .team-rank */
#scoreboard .table tbody tr th[scope="row"] {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.5rem;
  color: var(--accent-amber);
  font-weight: 700;
  vertical-align: middle;
  width: 4rem;
  text-align: center;
  padding: 1rem 0.5rem;
}

/* Account name (col 2) */
#scoreboard .table tbody tr td:nth-child(2) {
  vertical-align: middle;
  padding: 1rem 0.75rem;
}
#scoreboard .table tbody tr td:nth-child(2) a {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 1.15rem;
  text-decoration: none;
  border-bottom: none;
}
#scoreboard .table tbody tr td:nth-child(2) a:hover {
  color: var(--accent-cyan);
}
#scoreboard .table tbody tr td:nth-child(2) .badge.bg-secondary {
  background: var(--bg-primary) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-color) !important;
  font-size: 0.7rem;
}

/* Score (col 3): big mono green like proyector .team-score-inline */
#scoreboard .table tbody tr td:nth-child(3) {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.3rem;
  color: var(--accent-green);
  font-weight: 700;
  vertical-align: middle;
  text-align: right;
  padding: 1rem 0.75rem;
  white-space: nowrap;
}

/* Top 3 podium emphasis on the rank number */
#scoreboard .table tbody tr:nth-child(1) th[scope="row"] {
  color: #ffd700;
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.45);
  font-size: 1.7rem;
}
#scoreboard .table tbody tr:nth-child(2) th[scope="row"] {
  color: #c0c8d0;
  text-shadow: 0 0 10px rgba(192, 200, 208, 0.35);
  font-size: 1.6rem;
}
#scoreboard .table tbody tr:nth-child(3) th[scope="row"] {
  color: #cd7f32;
  text-shadow: 0 0 10px rgba(205, 127, 50, 0.35);
  font-size: 1.55rem;
}

/* ============================================================
   AUTH CARDS (Block 9 — login / register / reset_password)
   ============================================================ */
.givctf-auth-card {
  max-width: 480px;
  margin: 1.5rem auto 4rem;
  padding: 2rem 2.25rem 2.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-top: 4px solid var(--accent-cyan);
  box-shadow: 0 0 30px rgba(0, 217, 255, 0.08);
  position: relative;
}

/* Tagline strip above the form fields, replicating the page-hero look.
 * Generated via ::before instead of changing the template, so the markup stays minimal. */
.givctf-auth-card::before {
  content: "{ ACCESO }";
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--text-secondary);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-color);
}

.givctf-auth-card form b {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}
.givctf-auth-card .form-label {
  display: inline;
  font-family: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}
.givctf-auth-card .text-danger { color: var(--accent-red) !important; }

.givctf-auth-card .form-control {
  margin-top: 0.4rem;
  padding: 0.65rem 0.75rem;
  font-size: 1rem;
}

.givctf-auth-card small.form-text {
  font-family: 'Rajdhani', system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.givctf-auth-card a {
  color: var(--accent-cyan);
  font-weight: 700;
}
.givctf-auth-card a:hover { color: var(--accent-amber); }

.givctf-auth-card hr {
  border-color: var(--border-color);
  margin: 1.25rem 0;
}

/* Increase the jumbotron h1 slightly on auth pages so it functions as a logo */
.jumbotron h1 {
  font-size: 2.4rem;
  letter-spacing: -0.5px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--border-color);
  margin-top: 4rem;
  padding: 1.5rem 0;
  background: var(--bg-card);
}
.footer .text-muted, .footer .text-secondary, .footer a {
  color: var(--text-secondary) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer a:hover { color: var(--accent-amber) !important; }

/* ============================================================
   TEXT/BG UTILITIES OVERRIDE
   ============================================================ */
.text-primary   { color: var(--accent-cyan) !important; }
.text-success   { color: var(--accent-green) !important; }
.text-danger    { color: var(--accent-red) !important; }
.text-warning   { color: var(--accent-amber) !important; }
.text-info      { color: var(--accent-cyan) !important; }
.text-secondary, .text-muted { color: var(--text-secondary) !important; }
.text-light, .text-white { color: var(--text-primary) !important; }
.text-dark      { color: var(--bg-primary) !important; }

.bg-primary     { background-color: var(--accent-cyan) !important; color: var(--bg-primary) !important; }
.bg-success     { background-color: var(--accent-green) !important; color: var(--bg-primary) !important; }
.bg-danger      { background-color: var(--accent-red) !important; }
.bg-warning     { background-color: var(--accent-amber) !important; color: var(--bg-primary) !important; }
.bg-info        { background-color: var(--accent-cyan) !important; color: var(--bg-primary) !important; }
.bg-secondary   { background-color: var(--bg-card) !important; }
.bg-light       { background-color: var(--bg-card) !important; color: var(--text-primary) !important; }
.bg-dark        { background-color: var(--bg-primary) !important; }
.bg-body        { background-color: var(--bg-primary) !important; }
.bg-white       { background-color: var(--bg-card) !important; color: var(--text-primary) !important; }

.border, .border-top, .border-bottom, .border-start, .border-end, .border-left, .border-right {
  border-color: var(--border-color) !important;
}