/* ============================================================================
 * WBGT 赛事监测系统 · 科技深蓝 UI 基座  (static/css/wbgt-tech.css)
 *
 * 设计来源：与 v2.sos.jijiutuan.org.cn 监测大屏同一套色板与卡片语言
 *   · 背景：#0d1c4a / #142654 / #1b2f6a / #26407f / #16295c
 *     （2026-09-18 整体调浅一档：原 #050d2a 系偏黑，投到大屏上显得发闷）
 *   · 主色：霓虹青 #0efcff，亮青 #00c3ff，深青 #048eff，柔青 #33e3fe
 *   · 辅色：绿 #2cd0a8 / 青绿 #00aca0 / 紫 #263196
 *   · 警示：红 #ff3366 / 黄 #ffcc00
 *   · .tech-card：135° 渐变 + 1px 青边 + 四角描边光效 + 内发光，hover 提亮
 *
 * 用法：由 templates/base.html 在 Bootstrap 之后引入（因此下面的 Bootstrap
 * 覆盖规则生效），页面自己的 {% block extra_css %} 仍可继续覆盖本文件。
 *
 * 兼容性约定（不要改）：
 *   · 变量统一用 --w- 前缀，避免与各页面里既有的 --primary/--accent 等打架；
 *   · 保留 main.js 依赖的 #main-navbar / .navbar-collapsed / #navbar-toggle-btn /
 *     .navbar-toggler / .navbar-collapse / .btn-close 等选择器语义。
 * ==========================================================================*/

/* ---------------------------------------------------------------- 1. 变量 */
:root {
  /* 2026-09-18 整体调浅一档（需求："整体背景的深蓝色再浅一点"）。
     旧值依次为 #050d2a / #0a1940 / #102149 / #1a2f66 / #0d1b3f。 */
  --w-deep: #0d1c4a;
  --w-dark: #142654;
  --w-bg: #1b2f6a;
  --w-light: #26407f;
  --w-panel: #16295c;

  --w-cyan: #0efcff;
  --w-cyan-b: #00c3ff;
  --w-cyan-d: #048eff;
  --w-cyan-s: #33e3fe;

  --w-green: #2cd0a8;
  --w-teal: #00aca0;
  --w-purple: #263196;

  --w-red: #ff3366;
  --w-yellow: #ffcc00;

  --w-text: #e6f4ff;
  --w-text-2: #8fb3d9;
  --w-text-3: #5b7ba6;

  --w-line: rgba(14, 252, 255, 0.22);
  --w-line-soft: rgba(14, 252, 255, 0.12);
  --w-glow: 0 0 18px rgba(14, 252, 255, 0.35);
  --w-glow-sm: 0 0 9px rgba(14, 252, 255, 0.3);
  --w-radius: 6px;
  --w-nav-h: 64px;

  /* ------------------------------------------------------------------------
   * 向后兼容别名（**不要删**）
   * 旧 base.html 的 :root 里定义过这些变量名，而 index.html / data_entry.html /
   * admin/* 等模板仍在 `var(--primary-color)` / `var(--text-primary)` 这样引用它们。
   * 改名后若不保留别名，这些页面的文字色会变成"未定义"（深底上直接不可见）。
   * 这里一律别名到新 token，保证老页面零改动也能跟上新配色。
   * ---------------------------------------------------------------------- */
  --primary-color: var(--w-cyan-d);
  --secondary-color: var(--w-cyan-b);
  --accent-color: var(--w-cyan);
  --dark-bg: var(--w-deep);
  --dark-card: rgba(22, 41, 92, 0.78);
  --dark-card-hover: rgba(38, 64, 127, 0.85);
  --text-primary: var(--w-text);
  --text-secondary: var(--w-text-2);
  --risk-low-bg: rgba(44, 208, 168, 0.14);
  --risk-low-text: var(--w-green);
  --risk-medium-bg: rgba(255, 204, 0, 0.14);
  --risk-medium-text: var(--w-yellow);
  --risk-high-bg: rgba(255, 51, 102, 0.16);
  --risk-high-text: var(--w-red);
}

html { overflow-x: hidden; }

/* ------------------------------------------------------------ 2. 基础层 */
html { scroll-behavior: smooth; }

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Heiti SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--w-text);
  background-color: var(--w-deep);
  background-image:
    radial-gradient(1200px 620px at 12% -10%, rgba(4, 142, 255, 0.22), transparent 60%),
    radial-gradient(900px 520px at 92% 8%, rgba(14, 252, 255, 0.14), transparent 62%),
    radial-gradient(1000px 700px at 50% 108%, rgba(38, 49, 150, 0.28), transparent 60%),
    linear-gradient(180deg, #0e1e50 0%, #172b66 45%, #0e1e50 100%);
  background-attachment: fixed;
  min-height: 100vh;
  position: relative;
  padding-bottom: 84px;
  -webkit-font-smoothing: antialiased;
}

/* 细网格（科技底纹），只在背景层，不挡交互 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(14, 252, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 252, 255, 0.045) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 78%);
}

/* 内容层抬到网格之上 */
.container,
.container-fluid,
.footer { position: relative; z-index: 1; }

::selection { background: rgba(14, 252, 255, 0.28); color: #fff; }

h1, h2, h3, h4, h5, h6 { color: var(--w-text); letter-spacing: 0.01em; }
a { color: var(--w-cyan-b); text-decoration: none; transition: color .2s ease, opacity .2s ease; }
a:hover { color: var(--w-cyan); }
hr { border-color: var(--w-line-soft); opacity: 1; }
.text-muted { color: var(--w-text-3) !important; }
.small, small { color: var(--w-text-2); }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(13, 28, 74, 0.7); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(14, 252, 255, 0.5), rgba(4, 142, 255, 0.5));
  border-radius: 6px;
  border: 2px solid rgba(13, 28, 74, 0.7);
}
::-webkit-scrollbar-thumb:hover { background: rgba(14, 252, 255, 0.75); }

/* -------------------------------------------------------------- 3. 导航栏 */
.navbar {
  background: linear-gradient(90deg, rgba(13, 28, 74, 0.96), rgba(22, 41, 92, 0.94)) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--w-line-soft);
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(14, 252, 255, 0.12);
  padding: 0.55rem 0;
  position: sticky;
  top: 0;
  z-index: 1030;
}

.navbar-brand {
  font-weight: 700;
  font-size: 1.16rem;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  background: linear-gradient(92deg, var(--w-cyan) 0%, var(--w-cyan-b) 55%, var(--w-cyan-d) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(14, 252, 255, 0.35));
}

.navbar-logo {
  height: 36px;
  margin-right: 10px;
  filter: drop-shadow(0 0 7px rgba(14, 252, 255, 0.5));
  transition: transform .3s ease;
}
.navbar-brand:hover .navbar-logo { transform: scale(1.06); }

.navbar .nav-link {
  color: var(--w-text-2) !important;
  font-weight: 500;
  padding: 0.5rem 0.95rem !important;
  border-radius: 4px;
  position: relative;
  transition: color .2s ease, background .2s ease;
}
.navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 0.95rem;
  right: 0.95rem;
  bottom: 2px;
  height: 2px;
  background: linear-gradient(90deg, var(--w-cyan), var(--w-cyan-d));
  box-shadow: var(--w-glow-sm);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link.active { color: var(--w-cyan) !important; background: rgba(14, 252, 255, 0.07); }
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after { transform: scaleX(1); }

.navbar-toggler {
  cursor: pointer !important;
  border: 1px solid var(--w-line);
  border-radius: 5px;
  padding: 6px 10px;
  transition: all .25s ease;
  background: rgba(14, 252, 255, 0.06);
}
.navbar-toggler:hover { background: rgba(14, 252, 255, 0.16); box-shadow: var(--w-glow-sm); }
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(14, 252, 255, 0.22); outline: none; }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28014,252,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* 收缩后的状态（main.js 会加 .navbar-collapsed） */
#main-navbar { transition: width .3s cubic-bezier(.4,2,.6,1); width: 100%; min-width: 0; overflow: hidden; }
.navbar-collapsed { width: 0 !important; min-width: 0 !important; padding: 0 !important; overflow: hidden !important; background: none !important; box-shadow: none !important; border-bottom: none !important; }
.navbar-collapsed .container,
.navbar-collapsed .navbar-brand { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

/* 侧边圆形收缩按钮 */
#navbar-toggle-btn {
  position: fixed !important;
  left: 0 !important;
  top: 120px !important;
  height: 46px;
  width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  border: 1px solid var(--w-line) !important;
  border-radius: 0 50% 50% 0 !important;
  background: linear-gradient(180deg, rgba(20, 38, 84, 0.95), rgba(38, 64, 127, 0.95)) !important;
  color: var(--w-cyan) !important;
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.4);
  text-decoration: none !important;
  transition: all .25s ease;
}
#navbar-toggle-btn:hover {
  color: #fff !important;
  border-color: var(--w-cyan) !important;
  box-shadow: var(--w-glow);
}

/* ---------------------------------------------------------------- 4. 卡片 */
.card {
  position: relative;
  background:
    linear-gradient(135deg, rgba(38, 64, 127, 0.5) 0%, rgba(22, 41, 92, 0.78) 100%) !important;
  border: 1px solid var(--w-line) !important;
  border-radius: var(--w-radius) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4), inset 0 0 26px rgba(0, 195, 255, 0.05);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--w-text);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
  margin-bottom: 20px;
  overflow: hidden;
}
.card:hover {
  border-color: rgba(14, 252, 255, 0.6) !important;
  box-shadow: 0 0 22px rgba(14, 252, 255, 0.26), inset 0 0 30px rgba(14, 252, 255, 0.08);
}
.card-header {
  background: linear-gradient(90deg, rgba(4, 142, 255, 0.22), rgba(14, 252, 255, 0.1)) !important;
  color: var(--w-text) !important;
  border-bottom: 1px solid var(--w-line-soft) !important;
  padding: 0.85rem 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.card-header.bg-primary { background: linear-gradient(90deg, rgba(4, 142, 255, 0.3), rgba(14, 252, 255, 0.14)) !important; }
.card-body { padding: 1.15rem; }
.card-footer {
  background: rgba(13, 28, 74, 0.5) !important;
  border-top: 1px solid var(--w-line-soft) !important;
  color: var(--w-text-2) !important;
}
.card-title { color: var(--w-text); font-weight: 700; }

/* 四角描边光效（与 v2 大屏 .tech-card 同一语言） */
.tech-card::before,
.tech-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.tech-card::before {
  background:
    linear-gradient(var(--w-cyan), var(--w-cyan)) top left / 16px 2px no-repeat,
    linear-gradient(var(--w-cyan), var(--w-cyan)) top left / 2px 16px no-repeat,
    linear-gradient(var(--w-cyan-b), var(--w-cyan-b)) bottom right / 16px 2px no-repeat,
    linear-gradient(var(--w-cyan-b), var(--w-cyan-b)) bottom right / 2px 16px no-repeat;
  filter: drop-shadow(0 0 3px rgba(14, 252, 255, 0.75));
}
.tech-card::after {
  background:
    linear-gradient(var(--w-cyan-b), var(--w-cyan-b)) top right / 16px 2px no-repeat,
    linear-gradient(var(--w-cyan-b), var(--w-cyan-b)) top right / 2px 16px no-repeat,
    linear-gradient(var(--w-cyan), var(--w-cyan)) bottom left / 16px 2px no-repeat,
    linear-gradient(var(--w-cyan), var(--w-cyan)) bottom left / 2px 16px no-repeat;
  filter: drop-shadow(0 0 3px rgba(14, 252, 255, 0.75));
}

/* ---------------------------------------------------------------- 5. 按钮 */
.btn {
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all .22s ease;
}
.btn-primary,
.btn-success {
  background: linear-gradient(135deg, rgba(4, 142, 255, 0.9) 0%, rgba(0, 195, 255, 0.9) 100%) !important;
  border: 1px solid rgba(14, 252, 255, 0.55) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(4, 142, 255, 0.3);
}
.btn-primary:hover,
.btn-success:hover {
  background: linear-gradient(135deg, rgba(0, 195, 255, 0.95), rgba(14, 252, 255, 0.9)) !important;
  border-color: var(--w-cyan) !important;
  box-shadow: 0 0 16px rgba(14, 252, 255, 0.5);
  transform: translateY(-1px);
}
.btn-outline-primary,
.btn-outline-light,
.btn-outline-info {
  border-color: var(--w-line) !important;
  color: var(--w-cyan) !important;
  background: rgba(14, 252, 255, 0.05);
}
.btn-outline-primary:hover,
.btn-outline-light:hover,
.btn-outline-info:hover {
  background: rgba(14, 252, 255, 0.16) !important;
  border-color: var(--w-cyan) !important;
  color: #fff !important;
  box-shadow: var(--w-glow-sm);
}
.btn-danger {
  background: linear-gradient(135deg, #c81e42, var(--w-red)) !important;
  border-color: rgba(255, 51, 102, 0.6) !important;
  color: #fff !important;
}
.btn-danger:hover { box-shadow: 0 0 16px rgba(255, 51, 102, 0.5); transform: translateY(-1px); }
.btn-secondary {
  background: rgba(38, 64, 127, 0.85) !important;
  border-color: var(--w-line-soft) !important;
  color: var(--w-text-2) !important;
}
.btn-secondary:hover { color: #fff !important; border-color: var(--w-line) !important; }
.btn-link { color: var(--w-cyan-b) !important; }
.btn-link:hover { color: var(--w-cyan) !important; }
.btn-close { filter: invert(1) grayscale(1) brightness(1.8); opacity: .7; }
.btn-close:hover { opacity: 1; }

/* ---------------------------------------------------------------- 6. 表单 */
.form-control,
.form-select {
  background: rgba(13, 28, 74, 0.78) !important;
  border: 1px solid var(--w-line-soft) !important;
  color: var(--w-text) !important;
  border-radius: 4px;
  padding: 0.6rem 0.85rem;
  transition: all .22s ease;
}
.form-control::placeholder { color: var(--w-text-3); }
.form-control:focus,
.form-select:focus {
  background: rgba(13, 28, 74, 0.95) !important;
  border-color: var(--w-cyan) !important;
  color: var(--w-text) !important;
  box-shadow: 0 0 0 2px rgba(14, 252, 255, 0.16), 0 0 14px rgba(14, 252, 255, 0.35) !important;
}
.form-label,
.input-label { color: var(--w-text-2); font-weight: 500; margin-bottom: 0.4rem; }
.form-select option { background: var(--w-dark); color: var(--w-text); }
.form-check-input {
  background-color: rgba(13, 28, 74, 0.8);
  border-color: var(--w-line);
}
.form-check-input:checked { background-color: var(--w-cyan-d); border-color: var(--w-cyan); }
.form-text, .invalid-feedback { color: var(--w-text-3); }
.input-group-text {
  background: rgba(38, 64, 127, 0.8);
  border-color: var(--w-line-soft);
  color: var(--w-cyan);
}

/* ---------------------------------------------------------------- 7. 表格 */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--w-text);
  --bs-table-border-color: var(--w-line-soft);
  color: var(--w-text);
  vertical-align: middle;
  margin-bottom: 0;
}
.table > :not(caption) > * > * { background-color: transparent; border-color: var(--w-line-soft); }
.table thead th {
  background: linear-gradient(90deg, rgba(4, 142, 255, 0.22), rgba(14, 252, 255, 0.08)) !important;
  color: var(--w-cyan) !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--w-line) !important;
  white-space: nowrap;
}
.table tbody tr { transition: background .2s ease; }
.table tbody tr:hover { background: rgba(14, 252, 255, 0.06) !important; }
.table-bordered td, .table-bordered th { border-color: var(--w-line-soft); }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: rgba(38, 64, 127, 0.22); }
.table-responsive { border-radius: var(--w-radius); }

/* --------------------------------------------------- 8. 徽标 / 风险等级色 */
.badge {
  padding: 0.42em 0.75em;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.03em;
  vertical-align: middle;
}
.badge.bg-primary { background: linear-gradient(135deg, var(--w-cyan-d), var(--w-cyan-b)) !important; color: #04122b !important; }
.badge.bg-success { background: var(--w-green) !important; color: #04122b !important; }
.badge.bg-warning { background: var(--w-yellow) !important; color: #2a1f00 !important; }
.badge.bg-danger  { background: var(--w-red) !important; color: #fff !important; }
.badge.bg-dark    { background: #2b3a55 !important; color: var(--w-text) !important; }
.badge.bg-light   { background: #e8eef7 !important; color: #0b1730 !important; }
.badge.bg-secondary { background: rgba(38, 64, 127, 0.9) !important; color: var(--w-text-2) !important; }
.badge.bg-info    { background: var(--w-teal) !important; color: #04122b !important; }

/* ================= WBGT 旗色（white / green / yellow / red / black） =================
 * 业务语义（app.py get_risk_level）：
 *   white  防寒保暖 ｜ green  正常运动 ｜ yellow 控制配速、注意补给
 *   red    降低配速、加强补给 ｜ black 停止跑步&终止比赛
 *
 * 2026-09-18 整体重做（需求："不同旗色做的更明显一点，可以参考高德导航超速"）。
 * 改前是「旗色 14~18% 透明叠在深蓝底上」，色相几乎被底色吃掉 —— 大屏上远看全是深蓝，
 * 5 档旗色基本分不出来，等于没有预警。
 * 高德超速告警的视觉语言是：**整块实心高饱和 + 亮边 + 强外发光 + 呼吸脉冲**，一眼就懂。
 * 这里对齐该语言，危险度越高越"实心、越亮、越会动"：
 *   white / green  安全档 —— 实心渐变，只求"稳"，不抢注意力、不做动画
 *   yellow         注意档 —— 实心琥珀 + 强辉光
 *   red            危险档 —— 实心高饱和红 + 2px 亮边 + 1.2s 呼吸脉冲
 *   black          最高危 —— 实心墨黑 + 白亮边 + 0.9s 红白脉冲（最刺眼的一档）
 * 配套：卡片内文字一律白字实心（原来数字走 .glow-text 的青渐变，在实心底上完全看不见）。
 * 动效自动受 `@media (prefers-reduced-motion: reduce)` 约束（见文件末尾），无需单独处理。
 * =============================================================================== */

/* 文字色块（卡片头右上角） */
.flag-badge-white  { background: #ffffff !important; color: #12234d !important; border: 1px solid rgba(255,255,255,.9) !important; }
.flag-badge-green  { background: #17d29b !important; color: #03271d !important; box-shadow: 0 0 14px rgba(23,210,155,.75); }
.flag-badge-yellow { background: #ffcc00 !important; color: #2a1f00 !important; box-shadow: 0 0 16px rgba(255,204,0,.8); }
/* 红/黑档改「白底 + 深色字」的反白样式：在实心红/黑卡上对比度最高，也最像告警牌 */
.flag-badge-red    { background: #ffffff !important; color: #c1002e !important; box-shadow: 0 0 18px rgba(255,80,120,.95); }
.flag-badge-black  { background: #000000 !important; color: #ffffff !important; border: 1px solid #ffffff !important; box-shadow: 0 0 18px rgba(255,255,255,.7); }

/* 卡片整体色调：实心 + 亮边 + 外发光 */
@keyframes w-flag-pulse {
  0%, 100% { box-shadow: 0 0 20px var(--flag-glow-a), 0 0 46px var(--flag-glow-b), inset 0 0 26px rgba(255,255,255,.08); }
  50%      { box-shadow: 0 0 36px var(--flag-glow-a), 0 0 84px var(--flag-glow-b), inset 0 0 42px rgba(255,255,255,.22); }
}
.flag-bg-white  { --flag-glow-a: rgba(219,232,255,.28); --flag-glow-b: rgba(219,232,255,.12);
                  background: linear-gradient(135deg, #55719f 0%, #2c4372 100%) !important;
                  border: 1px solid rgba(219,232,255,.8) !important;
                  box-shadow: 0 0 16px rgba(219,232,255,.20); }
.flag-bg-green  { --flag-glow-a: rgba(67,236,189,.42); --flag-glow-b: rgba(40,200,155,.18);
                  background: linear-gradient(135deg, #14a37c 0%, #0a6a55 100%) !important;
                  border: 1px solid #43ecbd !important;
                  box-shadow: 0 0 22px rgba(67,236,189,.34), inset 0 0 26px rgba(255,255,255,.06); }
.flag-bg-yellow { --flag-glow-a: rgba(255,213,74,.58); --flag-glow-b: rgba(255,170,0,.28);
                  background: linear-gradient(135deg, #e2a100 0%, #8d5d08 100%) !important;
                  border: 2px solid #ffd54a !important;
                  box-shadow: 0 0 26px rgba(255,200,0,.48), inset 0 0 28px rgba(255,255,255,.10); }
.flag-bg-red    { --flag-glow-a: rgba(255,60,100,.72); --flag-glow-b: rgba(255,20,70,.36);
                  background: linear-gradient(135deg, #ff2d55 0%, #ad0027 100%) !important;
                  border: 2px solid #ffa8bd !important;
                  animation: w-flag-pulse 1.2s ease-in-out infinite; }
.flag-bg-black  { --flag-glow-a: rgba(255,255,255,.60); --flag-glow-b: rgba(255,40,80,.45);
                  background: linear-gradient(135deg, #2b3140 0%, #06080e 100%) !important;
                  border: 2px solid #ffffff !important;
                  animation: w-flag-pulse .9s ease-in-out infinite; }

/* ---- 实心旗色卡片的「内部反白」 ----
 * 底色变实心后，卡内原来的深色/青色文字（时间、子温度标签、建议条、脚注）会看不清，
 * 统一改成白字 + 半透明白叠层。
 * 用属性选择器 `[class*="flag-bg-"]` 一次覆盖 5 档（将来新增旗色也自动生效）；
 * 叠加 .bs-point-card 后特异度 (0,3,0)，高于 dashboard.html 里的 `.bs-advice.adv-red` (0,2,0)，
 * 不会被后者压回深色 —— 这是必须的，否则"建议条"会在红卡上变成暗红字。 */
.bs-point-card[class*="flag-bg-"]::before,
.bs-point-card[class*="flag-bg-"]::after {
  background:
    linear-gradient(#fff, #fff) top left / 16px 2px no-repeat,
    linear-gradient(#fff, #fff) top left / 2px 16px no-repeat,
    linear-gradient(#fff, #fff) top right / 16px 2px no-repeat,
    linear-gradient(#fff, #fff) top right / 2px 16px no-repeat,
    linear-gradient(#fff, #fff) bottom left / 16px 2px no-repeat,
    linear-gradient(#fff, #fff) bottom left / 2px 16px no-repeat,
    linear-gradient(#fff, #fff) bottom right / 16px 2px no-repeat,
    linear-gradient(#fff, #fff) bottom right / 2px 16px no-repeat;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, .8));
  opacity: .8;
}
.bs-point-card[class*="flag-bg-"] .bs-point-head { background: rgba(255,255,255,.13); border-bottom-color: rgba(255,255,255,.3); }
.bs-point-card[class*="flag-bg-"] .bs-point-name { color: #fff; }
.bs-point-card[class*="flag-bg-"] .bs-point-name i { color: rgba(255,255,255,.85); }
.bs-point-card[class*="flag-bg-"] .bs-wbgt.glow-text {
  background: none; -webkit-text-fill-color: #fff; color: #fff; filter: none;
  text-shadow: 0 2px 10px rgba(0,0,0,.55), 0 0 26px rgba(255,255,255,.45);
}
.bs-point-card[class*="flag-bg-"] .bs-wbgt-unit { color: rgba(255,255,255,.92); }
.bs-point-card[class*="flag-bg-"] .bs-sub-temp { background: rgba(0,0,0,.30); border-color: rgba(255,255,255,.28); }
.bs-point-card[class*="flag-bg-"] .bs-sub-temp .lab { color: rgba(255,255,255,.78); }
.bs-point-card[class*="flag-bg-"] .bs-sub-temp .val { color: #fff; }
.bs-point-card[class*="flag-bg-"] .bs-advice { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.6); color: #fff; }
.bs-point-card[class*="flag-bg-"] .bs-point-foot { color: rgba(255,255,255,.82); }
.bs-point-card[class*="flag-bg-"] .stale-flag { background: rgba(0,0,0,.45); border-color: rgba(255,255,255,.65); color: #fff; }
/* 折线图给一块深色底：图表内的轴线/刻度是青灰色（JS 里写死），
   直接铺在实心红/黄底上会糊掉，加一层半透明深底就始终读得清。 */
.bs-point-card[class*="flag-bg-"] .point-chart { background: rgba(6,12,32,.40); border-radius: 4px; }
.bs-point-card.flag-bg-red .high-risk-chart,
.bs-point-card.flag-bg-black .high-risk-chart {
  outline-color: rgba(255,255,255,.8);
  box-shadow: inset 0 0 22px rgba(0,0,0,.40);
}

/* 风险等级胶囊（文字用） */
.risk-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .32rem .8rem; border-radius: 999px; font-weight: 700; font-size: .86rem; letter-spacing: .04em; }
.risk-pill-low     { background: rgba(44,208,168,.16); color: var(--w-green);  border: 1px solid rgba(44,208,168,.45); }
.risk-pill-medium  { background: rgba(255,204,0,.16);  color: var(--w-yellow); border: 1px solid rgba(255,204,0,.45); }
.risk-pill-high    { background: rgba(255,51,102,.16); color: var(--w-red);    border: 1px solid rgba(255,51,102,.5); }
.risk-pill-neutral { background: rgba(143,179,217,.14); color: var(--w-text-2); border: 1px solid rgba(143,179,217,.3); }

/* -------------------------------------------------------------- 9. 提示框 */
.alert {
  border: 1px solid var(--w-line-soft);
  border-radius: var(--w-radius);
  background: rgba(22, 41, 92, 0.85);
  color: var(--w-text);
}
.alert-info    { border-color: rgba(0,195,255,.4);  background: rgba(4,142,255,.12);  color: var(--w-cyan-s) !important; }
.alert-success { border-color: rgba(44,208,168,.4); background: rgba(44,208,168,.12); color: var(--w-green) !important; }
.alert-warning { border-color: rgba(255,204,0,.4);  background: rgba(255,204,0,.12);  color: var(--w-yellow) !important; }
.alert-danger  { border-color: rgba(255,51,102,.45);background: rgba(255,51,102,.12); color: #ff9cb4 !important; }

/* ------------------------------------------------- 10. 下拉 / 列表 / 分页 */
.dropdown-menu {
  background: rgba(20, 38, 84, 0.98);
  border: 1px solid var(--w-line);
  border-radius: var(--w-radius);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55), 0 0 20px rgba(14, 252, 255, 0.12);
  backdrop-filter: blur(10px);
  padding: 0.35rem;
}
.dropdown-item { color: var(--w-text-2); border-radius: 4px; padding: 0.5rem 0.7rem; transition: all .18s ease; }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(14, 252, 255, 0.14); color: #fff; }
.dropdown-item.active, .dropdown-item:active {
  background: linear-gradient(90deg, rgba(4,142,255,.5), rgba(14,252,255,.28));
  color: #fff;
}
.dropdown-divider { border-color: var(--w-line-soft); }

.list-group-item {
  background: rgba(22, 41, 92, 0.7);
  border-color: var(--w-line-soft);
  color: var(--w-text);
}
.list-group-item:hover { background: rgba(38, 64, 127, 0.75); }
.list-group-item.active {
  background: linear-gradient(90deg, rgba(4,142,255,.5), rgba(14,252,255,.25));
  border-color: var(--w-cyan);
}

.page-link {
  background: rgba(22, 41, 92, 0.8);
  border-color: var(--w-line-soft);
  color: var(--w-text-2);
}
.page-link:hover { background: rgba(14, 252, 255, 0.14); color: #fff; border-color: var(--w-cyan); }
.page-item.active .page-link { background: var(--w-cyan-d); border-color: var(--w-cyan); color: #04122b; }

.modal-content {
  background: linear-gradient(135deg, rgba(38,64,127,.75), rgba(22,41,92,.95));
  border: 1px solid var(--w-line);
  border-radius: var(--w-radius);
  color: var(--w-text);
  box-shadow: 0 0 40px rgba(0, 0, 0, .6), 0 0 30px rgba(14,252,255,.12);
}
.modal-header, .modal-footer { border-color: var(--w-line-soft); }

/* --------------------------------------------------- 11. 统计 / KPI 组件 */
.kpi-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }

.kpi-card {
  position: relative;
  padding: 1.05rem 1.15rem;
  border-radius: var(--w-radius);
  background: linear-gradient(135deg, rgba(38, 64, 127, 0.5), rgba(22, 41, 92, 0.8));
  border: 1px solid var(--w-line);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), inset 0 0 22px rgba(0, 195, 255, 0.05);
  overflow: hidden;
  transition: all .3s ease;
}
.kpi-card:hover {
  transform: translateY(-3px);
  border-color: rgba(14, 252, 255, 0.7);
  box-shadow: 0 0 22px rgba(14, 252, 255, 0.3), inset 0 0 26px rgba(14, 252, 255, 0.09);
}
/* 顶部渐隐高亮条 */
.kpi-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--w-cyan), transparent);
  opacity: .75;
}
.kpi-head { display: flex; align-items: center; gap: .55rem; margin-bottom: .55rem; }
.kpi-icon {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 5px;
  background: rgba(14, 252, 255, 0.12);
  border: 1px solid var(--w-line);
  color: var(--w-cyan);
  font-size: .95rem;
}
.kpi-label { color: var(--w-text-2); font-size: .82rem; letter-spacing: .05em; }
.kpi-value {
  font-size: 2.05rem;
  font-weight: 800;
  line-height: 1.05;
  color: var(--w-cyan);
  text-shadow: 0 0 18px rgba(14, 252, 255, 0.45);
  font-variant-numeric: tabular-nums;
}
.kpi-unit { font-size: .95rem; font-weight: 600; color: var(--w-text-2); margin-left: .18rem; }
.kpi-foot { margin-top: .5rem; font-size: .78rem; color: var(--w-text-3); }

/* 数字滚动/闪烁提示 */
@keyframes w-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(14, 252, 255, 0.4); }
  70%  { box-shadow: 0 0 0 12px rgba(14, 252, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(14, 252, 255, 0); }
}
.pulse-animation { animation: w-pulse 2.4s infinite; }

@keyframes w-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .35; } }
.blink { animation: w-blink 1.2s linear infinite; }

@keyframes w-spin { to { transform: rotate(360deg); } }
.spin { animation: w-spin 2s linear infinite; }

@keyframes w-scan {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}
/* 大屏可选扫描线（加在容器上） */
.scanline { position: relative; overflow: hidden; }
.scanline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; height: 90px;
  background: linear-gradient(180deg, transparent, rgba(14, 252, 255, 0.06), transparent);
  animation: w-scan 7s linear infinite;
  pointer-events: none;
}

/* 标题 */
.section-title,
.w-section-title {
  position: relative;
  padding-left: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--w-text);
}
.section-title::before,
.w-section-title::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 1.05em;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--w-cyan), var(--w-cyan-d));
  box-shadow: var(--w-glow-sm);
}

.glow-text {
  background: linear-gradient(92deg, var(--w-cyan) 0%, var(--w-cyan-b) 60%, var(--w-cyan-d) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgba(14, 252, 255, 0.35));
}

/* 在线/实时指示点 */
.live-dot {
  display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--w-green);
  box-shadow: 0 0 10px var(--w-green);
  animation: w-blink 1.6s ease-in-out infinite;
}
.live-dot.is-off { background: var(--w-text-3); box-shadow: none; animation: none; }

/* 表格：风险参考表 */
.risk-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.risk-table th,
.risk-table td { padding: .7rem .9rem; border-bottom: 1px solid var(--w-line-soft); }
.risk-table thead th {
  background: linear-gradient(90deg, rgba(4,142,255,.22), rgba(14,252,255,.08));
  color: var(--w-cyan);
  font-weight: 600;
  letter-spacing: .04em;
}
.risk-table tbody tr { transition: background .2s ease; }
.risk-table tbody tr:hover { background: rgba(14, 252, 255, 0.06); }
.risk-table td:first-child { width: 88px; }
.risk-white-row  td:first-child { border-left: 3px solid #e8eef7; }
.risk-green-row  td:first-child { border-left: 3px solid var(--w-green); }
.risk-yellow-row td:first-child { border-left: 3px solid var(--w-yellow); }
.risk-red-row    td:first-child { border-left: 3px solid var(--w-red); }
.risk-black-row  td:first-child { border-left: 3px solid #6b7a99; }

/* ---------------------------------------------------------------- 12. 页脚 */
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 16px 0;
  background: linear-gradient(90deg, rgba(13,28,74,.96), rgba(22,41,92,.92));
  border-top: 1px solid var(--w-line-soft);
  color: var(--w-text-3);
  text-align: center;
  font-size: .85rem;
  letter-spacing: .03em;
}
.footer p { margin-bottom: 0; color: var(--w-text-3); }

/* ------------------------------------------------------- 13. 通用小工具类 */
.w-panel {
  background: linear-gradient(135deg, rgba(38, 64, 127, 0.5), rgba(22, 41, 92, 0.8));
  border: 1px solid var(--w-line);
  border-radius: var(--w-radius);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), inset 0 0 22px rgba(0, 195, 255, 0.05);
  padding: 1.05rem 1.15rem;
}
.w-mono { font-variant-numeric: tabular-nums; font-family: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; }
.w-divider { height: 1px; background: var(--w-line-soft); margin: 1rem 0; border: 0; }

/* ---------------------------------------------------------------- 14. 响应式 */
@media (max-width: 991.98px) {
  .navbar { position: sticky; }
  .navbar-collapse {
    background: rgba(13, 28, 74, 0.98);
    border: 1px solid var(--w-line-soft);
    border-radius: var(--w-radius);
    margin-top: .55rem;
    padding: .5rem;
  }
  .kpi-value { font-size: 1.7rem; }
}
@media (max-width: 767.98px) {
  body { padding-bottom: 96px; }
  h1, h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
  .card-body { padding: 1rem; }
  .container { padding-left: 12px; padding-right: 12px; }
  #navbar-toggle-btn { top: 96px !important; height: 40px; width: 40px; }
  .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; }
  .kpi-value { font-size: 1.5rem; }
}

/* 尊重系统"减少动态效果" */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}