/*
 * NBU CTF Theme - 墨绿黑客风格
 * 基于 CTFd core 主题叠加样式
 * 配色方案：
 *   背景     #0d1117 (GitHub 暗色背景，近黑)
 *   卡片背景  #161b22 (深灰黑)
 *   主色调   #1a7a4a (墨绿)
 *   亮绿强调  #00ff88 (霓虹绿，用于高亮)
 *   文字      #c9d1d9 (浅灰白)
 *   边框      #1a7a4a (墨绿描边)
 */

/* ──────────────────────────────────────
   全局强制黑色背景
   ────────────────────────────────────── */
html,
html[data-bs-theme="light"],
html[data-bs-theme="dark"] {
  --bs-body-bg: #0d1117 !important;
  --bs-body-color: #c9d1d9 !important;
  --bs-primary: #1a7a4a !important;
  --bs-primary-rgb: 26, 122, 74 !important;
  --bs-secondary: #8b949e !important;
  --bs-dark: #161b22 !important;
  --bs-dark-rgb: 22, 27, 34 !important;
  --bs-card-bg: #161b22 !important;
  --bs-border-color: #1a7a4a !important;
  --bs-link-color: #00ff88 !important;
  --bs-link-hover-color: #33ffaa !important;
  --nbu-green: #1a7a4a;
  --nbu-neon: #00ff88;
  --nbu-bg: #0d1117;
  --nbu-card: #161b22;
  --nbu-text: #c9d1d9;
  --nbu-border: #1a7a4a;
  --nbu-muted: #8b949e;
}

html body {
  background-color: #0d1117 !important;
  color: #c9d1d9 !important;
  font-family: "Fira Code", "Courier New", monospace, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ──────────────────────────────────────
   导航栏
   ────────────────────────────────────── */
html body .navbar,
html body nav.navbar {
  background-color: #0d1117 !important;
  border-bottom: 1px solid #1a7a4a !important;
  box-shadow: 0 2px 12px rgba(0, 255, 136, 0.15) !important;
}

html body .navbar-brand {
  color: #00ff88 !important;
  font-weight: bold;
  letter-spacing: 2px;
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.6);
}

html body .navbar-brand:hover {
  color: #33ffaa !important;
}

/* ── 导航菜单项（默认状态：灰色，无动画干扰） ── */
html body .nav-link {
  color: #c9d1d9 !important;
  transition: color 0.2s ease, text-shadow 0.2s ease;
  position: relative;
}

/* ── 导航菜单悬停效果：左一下 → 右一下 → 停在纯绿原位 ──
 *
 * 动画逻辑（steps(2, end)）：
 *   steps(2) = 把 0%→50%→100% 的3个关键帧分成2步跳完
 *   迭代1：0% → 50%（左偏 + 红左蓝右偏移）
 *   迭代2：50% → 100%（右偏 → 纯绿，回到原位）
 *   forwards：动画结束后保持在 100% 纯绿状态，不再动
 *
 * 关键帧设计：
 *   0%   左偏2px   + 红左蓝右偏移（故障感）
 *   50%  右偏2px   + 纯绿色（过渡）
 *   100% 回到原位  + 纯绿色（最终静止状态）
 */
html body .nav-link:hover,
html body .nav-link:focus {
  color: #00ff88 !important;
  animation: nbu-nav-hover 0.3s steps(2, end) 1 forwards;
}

/* 导航 hover 故障动画：左偏 → 右偏 → 纯绿静止 */
@keyframes nbu-nav-hover {
  /* 第1步（左）：文字左偏2px + 字体轮廓红蓝色彩分离 */
  0% {
    transform: translate(-2px, 0);
    text-shadow:
      0 0 10px rgba(0, 255, 136, 0.9),
      0 0 20px rgba(0, 255, 136, 0.6),
      -4px 0 0 rgba(255, 32, 96, 0.85),   /* 红色左偏移：字体轮廓左边缘红色 */
       4px 0 0 rgba(0, 212, 255, 0.85);  /* 蓝色右偏移：字体轮廓右边缘蓝色 */
  }
  /* 第2步（右）：文字右偏2px + 纯绿色（无红蓝偏移） */
  50% {
    transform: translate(2px, 0);
    text-shadow:
      0 0 10px rgba(0, 255, 136, 0.9),
      0 0 20px rgba(0, 255, 136, 0.6);
  }
  /* 终点（回到原位）：纯绿色，字体轮廓清晰，无任何偏移 */
  100% {
    transform: translate(0, 0);
    text-shadow:
      0 0 10px rgba(0, 255, 136, 0.9),
      0 0 20px rgba(0, 255, 136, 0.6);
  }
}

html body .navbar-toggler {
  border-color: #1a7a4a !important;
}

html body .navbar-toggler-icon {
  filter: invert(60%) sepia(80%) saturate(400%) hue-rotate(100deg);
}

/* ──────────────────────────────────────
   下拉菜单
   ────────────────────────────────────── */
html body .dropdown-menu {
  background-color: #161b22 !important;
  border: 1px solid #1a7a4a !important;
  box-shadow: 0 4px 20px rgba(0, 255, 136, 0.15);
}

html body .dropdown-item {
  color: #c9d1d9 !important;
}

html body .dropdown-item:hover,
html body .dropdown-item:focus {
  background-color: #1a7a4a !important;
  color: #00ff88 !important;
}

html body .dropdown-item.bg-primary {
  background-color: #1a7a4a !important;
  color: #00ff88 !important;
}

/* ──────────────────────────────────────
   Jumbotron / Hero 区域 - 赛博朋克霓虹版
   ────────────────────────────────────── */
html body .jumbotron {
  background:
    linear-gradient(135deg, #050d0a 0%, #071a10 40%, #050d0a 100%) !important;
  color: #c9d1d9 !important;
  border-bottom: 1px solid #00ff88;
  box-shadow: 0 4px 30px rgba(0, 255, 136, 0.2), inset 0 -1px 0 rgba(0, 255, 136, 0.3);
  position: relative;
  overflow: hidden;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

/* CRT 扫描线底纹 */
html body .jumbotron::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 255, 136, 0.025) 3px,
    rgba(0, 255, 136, 0.025) 4px
  );
  pointer-events: none;
  z-index: 0;
}

/* 流动扫描光束：从顶部向下扫过的绿色光线 */
html body .jumbotron::after {
  content: "";
  position: absolute;
  top: -2px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 255, 136, 0) 10%,
    #00ff88 45%,
    rgba(0, 255, 136, 0.8) 50%,
    #00ff88 55%,
    rgba(0, 255, 136, 0) 90%,
    transparent 100%
  );
  box-shadow: 0 0 12px 2px rgba(0, 255, 136, 0.6), 0 0 30px 6px rgba(0, 255, 136, 0.3);
  animation: nbu-scan 3.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  pointer-events: none;
  z-index: 2;
}

/* 内容区 z-index 确保在伪元素之上 */
html body .jumbotron > * {
  position: relative;
  z-index: 1;
}
html body .jumbotron .container {
  position: relative;
  z-index: 1;
}

/* ── 扫描光束动画：每隔3.5秒从顶部扫到底部 ── */
@keyframes nbu-scan {
  0%   { transform: translateY(0);    opacity: 0; }
  5%   { opacity: 1; }
  85%  { opacity: 0.9; }
  100% { transform: translateY(320px); opacity: 0; }
}

/* ── 霓虹主标题（所有页面的 jumbotron h1）
 * 平时：微弱绿色霓虹发光
 * 故障时（88%-96%，约0.5秒）：text-shadow 色彩分离，字体轮廓红蓝偏移
   ── */
html body .jumbotron h1,
html body h1.nbu-page-title,
html body .page-title {
  color: #00ff88 !important;
  font-family: "Fira Code", "Courier New", monospace !important;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  /* 平时：微弱绿色霓虹，保持清晰 */
  text-shadow:
    0 0 8px rgba(0, 255, 136, 0.6),
    0 0 16px rgba(0, 255, 136, 0.3);
  animation: nbu-title-glitch 2s ease-in-out infinite;
  position: relative;
  display: inline-block;
}

/* ── 故障效果主体（nbu-glitch类，由JS自动添加到h1） ── */
html body h1.nbu-glitch,
html body .jumbotron h1.nbu-glitch {
  position: relative;
}

/* 红色偏移层（上方裁切） */
html body h1.nbu-glitch::before,
html body .jumbotron h1.nbu-glitch::before {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  color: #ff2060;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: none;
  animation: nbu-glitch-top 4s steps(1, end) infinite;
  clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0%);
  opacity: 0.9;
  z-index: 1;
  pointer-events: none;
}

/* 蓝色偏移层（下方裁切） */
html body h1.nbu-glitch::after,
html body .jumbotron h1.nbu-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  color: #00d4ff;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: none;
  animation: nbu-glitch-bot 4s steps(1, end) infinite;
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  opacity: 0.9;
  z-index: 2;
  pointer-events: none;
}

/* ── 标题故障动画：正常微弱发光 → 故障色彩分离 → 恢复
 * 4秒循环，87%时间稳定，故障时段约0.5秒（88%-96%）
   ── */
@keyframes nbu-title-glitch {
  /* 正常状态（0%-87%）：微弱绿色霓虹，字体清晰，无偏移 */
  0%, 87%, 100% {
    text-shadow:
      0 0 8px rgba(0, 255, 136, 0.6),
      0 0 16px rgba(0, 255, 136, 0.3);
    opacity: 1;
    transform: translate(0, 0);
  }
  /* 故障帧1（88%）：红左蓝右色彩分离登场 */
  88% {
    text-shadow:
      0 0 8px rgba(0, 255, 136, 0.6),
      0 0 16px rgba(0, 255, 136, 0.3),
      -3px 0 0 rgba(255, 0, 80, 0.85),   /* 红色左偏移3px：字体左边缘红色 */
       3px 0 0 rgba(0, 200, 255, 0.85);  /* 蓝色右偏移3px：字体右边缘蓝色 */
    opacity: 1;
    transform: translate(-1px, 0);
  }
  /* 故障帧2（89.5%）：偏移缩小，轻微抖动 */
  89.5% {
    text-shadow:
      0 0 6px rgba(0, 255, 136, 0.5),
      -2px 0 0 rgba(255, 0, 80, 0.6),
       2px 0 0 rgba(0, 200, 255, 0.6);
    opacity: 0.85;
    transform: translate(2px, 0);
  }
  /* 故障帧3（91%）：强化色彩分离，偏移加大 */
  91% {
    text-shadow:
      0 0 10px rgba(0, 255, 136, 0.7),
      0 0 20px rgba(0, 255, 136, 0.2),
      -4px 0 0 rgba(255, 0, 80, 0.9),
       4px 0 0 rgba(0, 200, 255, 0.9);
    opacity: 1;
    transform: translate(-2px, 0);
  }
  /* 故障帧4（92.5%）：短暂消隐 */
  92.5% {
    text-shadow:
      0 0 4px rgba(0, 255, 136, 0.3);
    opacity: 0.7;
    transform: translate(1px, 0);
  }
  /* 故障帧5（94%）：再次色彩分离 */
  94% {
    text-shadow:
      0 0 8px rgba(0, 255, 136, 0.6),
      0 0 16px rgba(0, 255, 136, 0.3),
      -3px 0 0 rgba(255, 0, 80, 0.8),
       3px 0 0 rgba(0, 200, 255, 0.8);
    opacity: 1;
    transform: translate(0, 0);
  }
  /* 故障帧6（96%）：恢复正常 */
  96% {
    text-shadow:
      0 0 8px rgba(0, 255, 136, 0.6),
      0 0 16px rgba(0, 255, 136, 0.3);
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* ── 故障伪元素动画（红蓝层在故障时段闪入闪出，配合主动画节奏） ── */
@keyframes nbu-glitch-top {
  /* 平时隐藏 */
  0%, 86.9%, 100% {
    clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0%);
    transform: translate(0, 0);
  }
  88% {
    clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%);
    transform: translate(-3px, -1px);
  }
  89.5% {
    clip-path: polygon(0 10%, 100% 10%, 100% 28%, 0 28%);
    transform: translate(2px, 0);
  }
  91% {
    clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
    transform: translate(-4px, -1px);
  }
  92.5% {
    clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0%);
    transform: translate(0, 0);
  }
  94% {
    clip-path: polygon(0 0, 100% 0, 100% 22%, 0 22%);
    transform: translate(-2px, 0);
  }
  95.9% {
    clip-path: polygon(0 0, 100% 0, 100% 0%, 0 0%);
    transform: translate(0, 0);
  }
}

@keyframes nbu-glitch-bot {
  /* 平时隐藏 */
  0%, 86.9%, 100% {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    transform: translate(0, 0);
  }
  88% {
    clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
    transform: translate(3px, 1px);
  }
  89.5% {
    clip-path: polygon(0 72%, 100% 72%, 100% 90%, 0 90%);
    transform: translate(-2px, 0);
  }
  91% {
    clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
    transform: translate(4px, 1px);
  }
  92.5% {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    transform: translate(0, 0);
  }
  94% {
    clip-path: polygon(0 78%, 100% 78%, 100% 96%, 0 96%);
    transform: translate(2px, 0);
  }
  95.9% {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    transform: translate(0, 0);
  }
}

/* ── 副标题 h2 ── */
html body .jumbotron h2 {
  color: #7fffc8 !important;
  text-shadow:
    0 0 8px  rgba(0, 255, 136, 0.7),
    0 0 20px rgba(0, 255, 136, 0.4);
  letter-spacing: 2px;
  font-family: "Fira Code", "Courier New", monospace !important;
}

/* ── Jumbotron 中的 badge ── */
html body .jumbotron .badge.bg-primary,
html body .jumbotron .badge.bg-secondary {
  background-color: transparent !important;
  border: 1px solid #00ff88 !important;
  color: #00ff88 !important;
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.4), inset 0 0 8px rgba(0, 255, 136, 0.1);
  text-shadow: 0 0 6px rgba(0, 255, 136, 0.7);
  letter-spacing: 1px;
}

/* ── Jumbotron 图标链接 ── */
html body .jumbotron a .fa-external-link-alt {
  color: #00ff88 !important;
  filter: drop-shadow(0 0 6px rgba(0, 255, 136, 0.7));
  transition: filter 0.3s;
}
html body .jumbotron a:hover .fa-external-link-alt {
  filter: drop-shadow(0 0 14px rgba(0, 255, 136, 1));
}

/* ── captain 操作按钮图标霓虹化 ── */
html body .jumbotron .fa-cogs,
html body .jumbotron .fa-user-tag,
html body .jumbotron .fa-ticket-alt,
html body .jumbotron .fa-trash-alt {
  color: #00ff88 !important;
  filter: drop-shadow(0 0 5px rgba(0, 255, 136, 0.6));
  transition: filter 0.25s, transform 0.25s;
}
html body .jumbotron .fa-cogs:hover,
html body .jumbotron .fa-user-tag:hover,
html body .jumbotron .fa-ticket-alt:hover,
html body .jumbotron .fa-trash-alt:hover {
  filter: drop-shadow(0 0 14px rgba(0, 255, 136, 1));
  transform: scale(1.2);
}
html body .jumbotron .fa-trash-alt {
  color: #ff4466 !important;
  filter: drop-shadow(0 0 5px rgba(255, 68, 102, 0.6));
}
html body .jumbotron .fa-trash-alt:hover {
  filter: drop-shadow(0 0 14px rgba(255, 68, 102, 1));
}

/* ── 用户/团队头像框 ── */
.nbu-avatar-ring {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 2px solid #00ff88;
  box-shadow:
    0 0 0 3px rgba(0, 255, 136, 0.25),
    0 0 18px rgba(0, 255, 136, 0.5),
    inset 0 0 12px rgba(0, 255, 136, 0.15);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 20, 10, 0.8);
  color: #00ff88;
  font-size: 2.4rem;
  overflow: hidden;
  position: relative;
  animation: nbu-avatar-pulse 3s ease-in-out infinite;
  flex-shrink: 0;
}
.nbu-avatar-ring img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
@keyframes nbu-avatar-pulse {
  0%,  100% { box-shadow: 0 0 0 3px rgba(0,255,136,0.25), 0 0 18px rgba(0,255,136,0.5), inset 0 0 12px rgba(0,255,136,0.15); }
  50%        { box-shadow: 0 0 0 5px rgba(0,255,136,0.15), 0 0 32px rgba(0,255,136,0.8), inset 0 0 20px rgba(0,255,136,0.25); }
}

/* ── 头像旁边的信息布局 ── */
.nbu-profile-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.nbu-profile-header .nbu-name-area {
  flex: 1;
  min-width: 0;
}

/* ── 上传头像按钮（team private） ── */
.nbu-avatar-upload-btn {
  position: absolute;
  bottom: 0; right: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: #0d1117;
  border: 1px solid #00ff88;
  color: #00ff88;
  font-size: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(0,255,136,0.5);
  transition: all 0.2s;
  z-index: 10;
}
.nbu-avatar-upload-btn:hover {
  background: #00ff88;
  color: #0d1117;
  box-shadow: 0 0 18px rgba(0,255,136,0.9);
}
.nbu-avatar-wrapper {
  position: relative;
  display: inline-block;
}

/* ── 积分/排名数字霓虹化 ── */
html body .jumbotron #team-score,
html body .jumbotron #team-place,
html body .jumbotron h2.text-center {
  color: #00ff88 !important;
  text-shadow: 0 0 12px rgba(0, 255, 136, 0.6) !important;
  font-family: "Fira Code", monospace !important;
}
html body .jumbotron #team-score small,
html body .jumbotron #team-place small,
html body .jumbotron h2.text-center small {
  color: #7fffc8 !important;
  text-shadow: 0 0 6px rgba(0, 255, 136, 0.4) !important;
  font-size: 0.55em;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ──────────────────────────────────────
   题目卡片 (Challenge Buttons)
   ────────────────────────────────────── */
html body .challenge-button,
html body [data-bs-theme="dark"] .challenge-button,
html body [data-bs-theme="light"] .challenge-button {
  background-color: #161b22 !important;
  border: 1px solid #1a7a4a !important;
  color: #c9d1d9 !important;
  border-radius: 6px;
  transition: all 0.25s ease;
  box-shadow: 0 0 6px rgba(0, 255, 136, 0.1);
}

html body .challenge-button:hover {
  background-color: #0a2318 !important;
  border-color: #00ff88 !important;
  color: #00ff88 !important;
  box-shadow: 0 0 18px rgba(0, 255, 136, 0.4) !important;
  transform: translateY(-2px);
}

html body .challenge-button.challenge-solved,
html body [data-bs-theme="dark"] .challenge-button.challenge-solved,
html body [data-bs-theme="light"] .challenge-button.challenge-solved {
  background-color: #1a7a4a !important;
  border-color: #00ff88 !important;
  color: #00ff88 !important;
}

html body .challenge-button.challenge-solved:hover {
  background-color: #22a05e !important;
}

/* ──────────────────────────────────────
   卡片
   ────────────────────────────────────── */
html body .card {
  background-color: #161b22 !important;
  border: 1px solid #1a7a4a !important;
  color: #c9d1d9 !important;
}

html body .card-header {
  background-color: #0a1f12 !important;
  border-bottom: 1px solid #1a7a4a !important;
  color: #00ff88 !important;
}

html body .card-footer {
  background-color: #0d1117 !important;
  border-top: 1px solid #1a7a4a !important;
}

/* ──────────────────────────────────────
   表格
   ────────────────────────────────────── */
html body .table,
html body table {
  color: #c9d1d9 !important;
  border-color: #1a7a4a !important;
}

html body .table th {
  color: #00ff88 !important;
  border-color: #1a7a4a !important;
  background-color: #0a1f12 !important;
}

html body .table td {
  border-color: rgba(26, 122, 74, 0.4) !important;
}

html body .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: rgba(26, 122, 74, 0.06) !important;
}

html body .table-hover > tbody > tr:hover {
  background-color: rgba(0, 255, 136, 0.08) !important;
  color: #00ff88 !important;
}

/* 计分板表格：强制所有文字绿色 */
html body #scoreboard .table td,
html body #scoreboard .table th,
html body .scoreboard-table td,
html body .scoreboard-table th,
html body #scoreboard table td,
html body #scoreboard table th {
  color: #00ff41 !important;
  border-color: rgba(0, 255, 65, 0.15) !important;
}
}

html body .table-dark {
  --bs-table-bg: #161b22 !important;
}

/* ──────────────────────────────────────
   按钮
   ────────────────────────────────────── */
html body .btn-primary {
  background-color: #1a7a4a !important;
  border-color: #1a7a4a !important;
  color: #fff !important;
}

html body .btn-primary:hover {
  background-color: #22a05e !important;
  border-color: #00ff88 !important;
  box-shadow: 0 0 12px rgba(0, 255, 136, 0.4);
}

html body .btn-success {
  background-color: #1a7a4a !important;
  border-color: #00ff88 !important;
}

html body .btn-outline-primary {
  color: #00ff88 !important;
  border-color: #1a7a4a !important;
}

html body .btn-outline-primary:hover {
  background-color: #1a7a4a !important;
  border-color: #00ff88 !important;
  color: #fff !important;
}

html body .btn-secondary {
  background-color: #21262d !important;
  border-color: #1a7a4a !important;
  color: #c9d1d9 !important;
}

html body .btn-secondary:hover {
  background-color: #2d333b !important;
  border-color: #00ff88 !important;
}

html body .btn-danger {
  background-color: #8b1a1a !important;
  border-color: #cc2222 !important;
}

html body .btn-light {
  background-color: #21262d !important;
  border-color: #1a7a4a !important;
  color: #c9d1d9 !important;
}

/* ──────────────────────────────────────
   表单
   ────────────────────────────────────── */
html body .form-control,
html body .form-select,
html body input,
html body select,
html body textarea {
  background-color: #0d1117 !important;
  border: 1px solid #1a7a4a !important;
  color: #c9d1d9 !important;
}

html body .form-control:focus,
html body .form-select:focus,
html body input:focus,
html body textarea:focus {
  background-color: #0d1117 !important;
  border-color: #00ff88 !important;
  color: #00ff88 !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 255, 136, 0.2) !important;
  outline: none;
}

html body .form-control::placeholder,
html body input::placeholder,
html body textarea::placeholder {
  color: #8b949e !important;
}

html body .form-label,
html body label {
  color: #c9d1d9 !important;
}

html body .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%2300ff88' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") !important;
}

html body .form-check-input {
  background-color: #0d1117 !important;
  border-color: #1a7a4a !important;
}

html body .form-check-input:checked {
  background-color: #1a7a4a !important;
  border-color: #00ff88 !important;
}

/* ──────────────────────────────────────
   输入框组
   ────────────────────────────────────── */
html body .input-group-text {
  background-color: #161b22 !important;
  border-color: #1a7a4a !important;
  color: #00ff88 !important;
}

/* ──────────────────────────────────────
   徽章 / Badge
   ────────────────────────────────────── */
html body .badge.bg-primary {
  background-color: #1a7a4a !important;
  color: #00ff88 !important;
}

html body .badge.bg-secondary {
  background-color: #21262d !important;
  color: #8b949e !important;
}

html body .badge.bg-success {
  background-color: #1a7a4a !important;
  color: #00ff88 !important;
}

/* ──────────────────────────────────────
   警告框 / Alert
   ────────────────────────────────────── */
html body .alert-success {
  background-color: #0a2318 !important;
  border-color: #1a7a4a !important;
  color: #00ff88 !important;
}

html body .alert-danger {
  background-color: #1a0a0a !important;
  border-color: #8b1a1a !important;
  color: #ff6666 !important;
}

html body .alert-info {
  background-color: #0a1a2a !important;
  border-color: #1a4a7a !important;
  color: #5badff !important;
}

html body .alert-warning {
  background-color: #1a1500 !important;
  border-color: #7a6a00 !important;
  color: #ffd700 !important;
}

/* ──────────────────────────────────────
   Modal 弹窗
   ────────────────────────────────────── */
html body .modal-content {
  background-color: #161b22 !important;
  border: 1px solid #1a7a4a !important;
  color: #c9d1d9 !important;
}

html body .modal-header {
  background-color: #0a1f12 !important;
  border-bottom: 1px solid #1a7a4a !important;
  color: #00ff88 !important;
}

html body .modal-title {
  color: #00ff88 !important;
}

html body .modal-footer {
  background-color: #0d1117 !important;
  border-top: 1px solid #1a7a4a !important;
}

html body .modal-backdrop {
  background-color: rgba(0, 0, 0, 0.85) !important;
}

html body .btn-close {
  filter: invert(1) sepia(100%) saturate(400%) hue-rotate(100deg);
}

/* ──────────────────────────────────────
   记分板页面
   ────────────────────────────────────── */
html body #score-graph,
html body .echarts-container {
  background-color: #0d1117 !important;
}

/* ──────────────────────────────────────
   Snackbar 通知
   ────────────────────────────────────── */
html body #snackbar {
  background-color: #0a1f12 !important;
  border: 1px solid #1a7a4a !important;
  color: #00ff88 !important;
}

/* ──────────────────────────────────────
   进度条
   ────────────────────────────────────── */
html body .progress {
  background-color: #21262d !important;
}

html body .progress-bar {
  background-color: #1a7a4a !important;
}

/* ──────────────────────────────────────
   链接
   ────────────────────────────────────── */
html body a {
  color: #00ff88 !important;
}

html body a:hover {
  color: #33ffaa !important;
  text-shadow: 0 0 6px rgba(0, 255, 136, 0.4);
}

/* 页脚文字链接不要发光 */
html body footer a,
html body .footer a {
  color: #8b949e !important;
  text-shadow: none;
}

html body footer a:hover,
html body .footer a:hover {
  color: #c9d1d9 !important;
}

/* ──────────────────────────────────────
   标题
   ────────────────────────────────────── */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
  color: #c9d1d9 !important;
}

html body h1 .text-muted,
html body h2 .text-muted {
  color: #8b949e !important;
}

/* ──────────────────────────────────────
   文字工具类
   ────────────────────────────────────── */
html body .text-muted {
  color: #8b949e !important;
}

html body .text-primary {
  color: #00ff88 !important;
}

html body .text-success {
  color: #00ff88 !important;
}

html body .text-danger {
  color: #ff6666 !important;
}

html body .text-white {
  color: #c9d1d9 !important;
}

/* ──────────────────────────────────────
   背景工具类
   ────────────────────────────────────── */
html body .bg-dark {
  background-color: #161b22 !important;
}

html body .bg-primary {
  background-color: #1a7a4a !important;
}

html body .bg-light {
  background-color: #21262d !important;
}

html body .bg-white {
  background-color: #161b22 !important;
}

/* ──────────────────────────────────────
   分页
   ────────────────────────────────────── */
html body .page-link {
  background-color: #161b22 !important;
  border-color: #1a7a4a !important;
  color: #00ff88 !important;
}

html body .page-link:hover {
  background-color: #1a7a4a !important;
  color: #fff !important;
}

html body .page-item.active .page-link {
  background-color: #1a7a4a !important;
  border-color: #00ff88 !important;
  color: #fff !important;
}

html body .page-item.disabled .page-link {
  background-color: #0d1117 !important;
  color: #8b949e !important;
}

/* ──────────────────────────────────────
   导航选项卡 (Tabs)
   ────────────────────────────────────── */
html body .nav-tabs {
  border-bottom: 1px solid #1a7a4a !important;
}

html body .nav-tabs .nav-link {
  color: #8b949e !important;
  border: 1px solid transparent !important;
}

html body .nav-tabs .nav-link:hover {
  color: #00ff88 !important;
  border-color: #1a7a4a !important;
}

html body .nav-tabs .nav-link.active {
  background-color: #161b22 !important;
  border-color: #1a7a4a #1a7a4a #161b22 !important;
  color: #00ff88 !important;
}

/* ──────────────────────────────────────
   代码块
   ────────────────────────────────────── */
html body code {
  color: #00ff88 !important;
  background-color: rgba(0, 255, 136, 0.1);
  padding: 0.1em 0.3em;
  border-radius: 3px;
}

html body pre {
  background-color: #0d1117 !important;
  border: 1px solid #1a7a4a !important;
  color: #c9d1d9 !important;
  padding: 1rem;
  border-radius: 6px;
}

html body pre code {
  background: none;
  padding: 0;
}

/* ──────────────────────────────────────
   加载动画
   ────────────────────────────────────── */
html body .spinner-border {
  color: #00ff88 !important;
}

/* ──────────────────────────────────────
   滚动条美化
   ────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #0d1117;
}

::-webkit-scrollbar-thumb {
  background: #1a7a4a;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #00ff88;
}

/* scan-line 已被 jumbotron 新版 ::after 动画替代，见上方 nbu-scan 规则 */

/* ──────────────────────────────────────
   亮色/暗色模式切换按钮的图标颜色
   ────────────────────────────────────── */
html body .theme-switch .fa-sun {
  color: #00ff88 !important;
}

/* ──────────────────────────────────────
   题目描述内容
   ────────────────────────────────────── */
html body .challenge-desc {
  color: #c9d1d9 !important;
}

/* ──────────────────────────────────────
   Blockquote
   ────────────────────────────────────── */
html body blockquote {
  border-left: 4px solid #1a7a4a !important;
  color: #8b949e !important;
}

/* ──────────────────────────────────────
   分隔线
   ────────────────────────────────────── */
html body hr {
  border-color: #1a7a4a !important;
  opacity: 0.5;
}

/* ──────────────────────────────────────
   列表组
   ────────────────────────────────────── */
html body .list-group-item {
  background-color: #161b22 !important;
  border-color: rgba(26, 122, 74, 0.4) !important;
  color: #c9d1d9 !important;
}

html body .list-group-item:hover {
  background-color: #0a2318 !important;
  color: #00ff88 !important;
}

html body .list-group-item.active {
  background-color: #1a7a4a !important;
  border-color: #00ff88 !important;
  color: #fff !important;
}

/* ──────────────────────────────────────
   Tooltip
   ────────────────────────────────────── */
html body .tooltip-inner {
  background-color: #1a7a4a !important;
  color: #00ff88 !important;
}

/* ──────────────────────────────────────
   登录/注册页面特化
   ────────────────────────────────────── */
html body .card .btn-primary {
  background-color: #1a7a4a !important;
  border-color: #1a7a4a !important;
  width: 100%;
  font-weight: bold;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

html body .card .btn-primary:hover {
  background-color: #22a05e !important;
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
}

/* ──────────────────────────────────────
   页脚
   ────────────────────────────────────── */
html body .footer {
  border-top: 1px solid rgba(26, 122, 74, 0.3) !important;
  background-color: #0d1117 !important;
}

/* 强制表头文字不换行 */
table thead th {
    white-space: nowrap;
}