/* ===== Style Block 1 ===== */
/* ====== 全局重置与基础 ====== */

* { margin:0; padding:0; box-sizing:border-box; }

:root {

  --bg-primary: #0a1929;

  --bg-card: rgba(10,30,55,0.9);

  --bg-card-hover: rgba(15,40,70,0.95);

  --bg-card-alt: #0f273d;

  --neon-cyan: #00f0ff;

  --neon-green: #00ff88;

  --neon-purple: #a855f7;

  --neon-pink: #ff3e8a;

  --neon-orange: #ff8c00;

  --neon-yellow: #ffd700;

  --neon-blue: #3b82f6;

  --text-primary: #e0f0ff;

  --text-secondary: #7eb8e0;

  --text-muted: #4a6a8a;

  --border-color: rgba(0,240,255,0.15);

  --border-glow: rgba(0,240,255,0.4);

  --glass-bg: rgba(10,25,41,0.7);

  --shadow-neon: 0 0 15px rgba(0,240,255,0.15), 0 0 30px rgba(0,240,255,0.05);

  --shadow-card: 0 0 10px rgba(0,240,255,0.08), inset 0 1px 0 rgba(0,240,255,0.1);

  --radius: 8px;

  --transition: all 0.3s ease;

}

html, body {

  width:100%; min-height:auto;

  font-family: 'Microsoft YaHei','PingFang SC','Helvetica Neue',Arial,sans-serif;

  background: var(--bg-primary);

  color: var(--text-primary);

  overflow-x:hidden;

  max-width:100vw;

}

body {

  background:

    linear-gradient(135deg, rgba(0,200,255,0.03) 1px, transparent 1px),

    linear-gradient(90deg, rgba(0,200,255,0.03) 1px, transparent 1px),

    linear-gradient(135deg, #0a1628 0%, #0d2137 50%, #0a1628 100%);

  background-size: 40px 40px, 40px 40px, 100% 100%;

  min-height: auto;

  padding-top:110px;

}

/* 滚动条 */

::-webkit-scrollbar { width:6px; height:6px; }

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb { background: var(--border-color); border-radius:3px; }

::-webkit-scrollbar-thumb:hover { background: var(--neon-cyan); }

/* ====== 页面标题行 ====== */

.page-header {

  width:100%; height:56px;

  background: linear-gradient(135deg, #040d1a 0%, #0a1940 50%, #051530 100%);

  border-bottom: 1px solid rgba(0,200,255,0.15);

  box-shadow: 0 4px 30px rgba(0,100,200,0.15);

  padding:0 2vw; position:fixed; top:0; left:0; z-index:1001;

  display:flex; align-items:center; justify-content:flex-start; gap:12px; overflow:hidden;

}

.header-logo {

  height:36px; width:auto; object-fit:contain; filter:brightness(1.2);

  flex-shrink:0; position:absolute; left:20px; top:50%; transform:translateY(-50%);

}

.page-header h1 {

  font-size:clamp(14px, 2vw, 26px); font-weight:700; color:#fff; letter-spacing:clamp(2px, 0.4vw, 6px);

  text-shadow: 0 0 20px rgba(0,150,255,0.6), 0 0 40px rgba(0,100,200,0.3);

  margin:0; padding:0; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); white-space:nowrap;

}

.page-header::before {

  content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%;
  pointer-events: none;

  background: radial-gradient(ellipse at center, rgba(0,150,255,0.06) 0%, transparent 70%);

  animation: headerGlow 8s ease-in-out infinite alternate;

}

@keyframes headerGlow {

  0% { opacity:0.5; transform:scale(1); }

  100% { opacity:1; transform:scale(1.1); }

}

.page-header-inner {

  width:100%; padding:0 2vw; display:flex; align-items:center;

  justify-content:center; position:relative; z-index:1;

}

.page-header-title {

  font-size:clamp(14px, 2vw, 26px); font-weight:bold; color:#fff; text-align:center; letter-spacing:clamp(2px, 0.4vw, 6px);

  text-shadow: 0 0 20px rgba(0,180,255,0.5), 0 0 40px rgba(0,120,255,0.2);

  margin:0;

  background: linear-gradient(90deg, #fff 0%, #a0d4ff 50%, #fff 100%);

  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;

}

/* ====== 顶部导航栏 ====== */

/* 热力图全屏态：覆盖行内420px高度，铺满整个屏幕 */
[id^="bmap-heatmap-"]:fullscreen { width:100vw !important; height:100vh !important; background:#0a1628 !important; }
[id^="bmap-heatmap-"]:-webkit-full-screen { width:100vw !important; height:100vh !important; background:#0a1628 !important; }

.top-bar {

  position:fixed; top:56px; left:0; width:100%; height:auto; min-height:70px;

  background: linear-gradient(135deg, #0a1628 0%, #1a3a5c 50%, #0d2137 100%);

  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);

  display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:6px 8px;

  padding:clamp(6px, 1vh, 12px) 2vw; z-index:1000;

  border-bottom:1px solid rgba(100,200,255,0.2);

  box-shadow: 0 4px 20px rgba(0,100,200,0.3);

  flex-wrap:wrap; gap:8px;

}

.logo-area {

  width:auto; flex-shrink:0; display:flex; align-items:center; justify-content:center;

  border-right:1px solid var(--border-color); padding-right:16px; margin-right:8px;

}

.logo-text {

  font-size:22px; font-weight:900; letter-spacing:2px;

  background:linear-gradient(135deg,#00f0ff,#00ff88);

  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;

  display:inline-block; min-width:40px; text-align:center;

}

.logo-placeholder {

  padding:6px 12px; background:linear-gradient(135deg,#00f0ff,#00ff88);

  border-radius:8px; display:flex; align-items:center; justify-content:center;

  color:#0a1628; font-weight:900; font-size:16px; letter-spacing:1px; white-space:nowrap;

}

.logo-area img { max-width:100%; max-height:100%; object-fit:contain; filter:brightness(1.2); }

.logo-placeholder {

  font-size:11px; color:var(--neon-cyan); font-weight:bold;

  text-shadow:0 0 8px rgba(0,240,255,0.5); text-align:center; line-height:1.3;

}

.top-control { display:flex; align-items:center; gap:8px; flex-shrink:0; }

.top-control label { font-size:12px; color:var(--text-secondary); white-space:nowrap; }

.date-select {

  background:var(--bg-card); border:1px solid var(--border-color);

  color:var(--text-primary); padding:6px 10px; border-radius:6px;

  font-size:13px; outline:none; cursor:pointer; transition:var(--transition); min-width:220px;

}

.date-select:hover, .date-select:focus {

  border-color:var(--neon-cyan); box-shadow:0 0 8px rgba(0,240,255,0.2);

}

.date-select option,
.date-select optgroup { background:var(--bg-card); color:var(--text-primary); }

.date-select optgroup { color:var(--neon-cyan); font-weight:600; }

/* ===== 日报日期手风琴选择器 ===== */
.date-picker { position:relative; display:inline-block; }

.date-picker-toggle {
  background:var(--bg-card); border:1px solid var(--border-color);
  color:var(--text-primary); padding:6px 10px; border-radius:6px;
  font-size:13px; outline:none; cursor:pointer; transition:var(--transition);
  min-width:220px; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:8px;
}

.date-picker-toggle:hover, .date-picker-toggle.open {
  border-color:var(--neon-cyan); box-shadow:0 0 8px rgba(0,240,255,0.2);
}

.date-picker-toggle .caret { transition:transform .2s ease; color:var(--neon-cyan); }
.date-picker-toggle.open .caret { transform:rotate(180deg); }

.date-picker-panel {
  position:absolute; top:calc(100% + 4px); left:0; z-index:50;
  width:240px; max-height:340px; overflow-y:auto;
  background:var(--bg-card); border:1px solid var(--neon-cyan);
  border-radius:8px; box-shadow:0 6px 24px rgba(0,0,0,.45), 0 0 12px rgba(0,240,255,.12);
  padding:4px;
}

.date-picker-panel::-webkit-scrollbar { width:8px; }
.date-picker-panel::-webkit-scrollbar-thumb { background:rgba(0,240,255,.3); border-radius:4px; }

.dp-month { border-bottom:1px solid rgba(255,255,255,.06); }
.dp-month:last-child { border-bottom:none; }

.dp-month-head {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 10px; cursor:pointer; user-select:none;
  font-size:13px; font-weight:600; color:var(--neon-cyan);
  transition:background .15s ease;
}
.dp-month-head:hover { background:rgba(0,240,255,.08); }
.dp-month-head .dp-caret { transition:transform .2s ease; font-size:11px; }
.dp-month.open .dp-month-head .dp-caret { transform:rotate(90deg); }

.dp-month-body {
  display:none; padding:2px 0 6px 0;
}
.dp-month.open .dp-month-body { display:block; }

.dp-date {
  display:block; width:100%; text-align:left; box-sizing:border-box;
  padding:5px 10px 5px 24px; border:none; background:transparent;
  color:var(--text-secondary); font-size:12.5px; cursor:pointer; border-radius:4px;
}
.dp-date:hover { background:rgba(0,240,255,.1); color:var(--text-primary); }
.dp-date.active {
  background:linear-gradient(135deg, rgba(0,240,255,.25), rgba(0,255,136,.12));
  color:#fff; font-weight:600;
}

.period-switch {

  display:flex; gap:4px; flex-shrink:0;

}

.period-btn {

  padding:5px 10px; font-size:12px; cursor:pointer;

  background:linear-gradient(135deg,rgba(0,240,255,0.15),rgba(0,255,136,0.08));

  border:1px solid var(--border-color); border-radius:6px;

  color:var(--text-primary); transition:var(--transition); white-space:nowrap;

}

.period-btn:hover { border-color:var(--neon-cyan); box-shadow:var(--shadow-neon); background:linear-gradient(135deg,rgba(0,240,255,0.25),rgba(0,255,136,0.15)); }

.period-btn.active {

  background:linear-gradient(135deg,rgba(0,240,255,0.25),rgba(0,255,136,0.15));

  border-color:var(--neon-cyan); color:#fff; font-weight:bold;

}

.page-switch {

  display:flex; gap:6px; flex-shrink:0; margin-left:8px; flex-wrap:wrap; align-items:center;

}

.page-btn {

  padding:8px 14px; font-size:12px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:36px; box-sizing:border-box;

  background:linear-gradient(135deg,rgba(0,240,255,0.15),rgba(0,255,136,0.08));

  border:1px solid var(--border-color); border-radius:6px;

  color:var(--text-primary); transition:var(--transition); white-space:nowrap;

}

.page-btn:last-child { border-right:none; }

.page-btn:hover { border-color:var(--neon-cyan); box-shadow:var(--shadow-neon); background:linear-gradient(135deg,rgba(0,240,255,0.25),rgba(0,255,136,0.15)); }

.page-btn.active {

  background:linear-gradient(135deg,rgba(0,240,255,0.25),rgba(0,255,136,0.15));

  border-color:var(--neon-cyan); color:#fff; font-weight:bold;

}

/* ====== 明细下拉菜单 ====== */

.detail-btn-wrap {

  position: relative;

  display: flex;

  align-items: center;

  flex-shrink: 0;

  margin-left: 0;

}

.detail-btn {

  padding: 5px 10px;

  font-size: 12px;

  cursor: pointer;

  background: linear-gradient(135deg,rgba(0,240,255,0.15),rgba(0,255,136,0.08));

  border: 1px solid var(--border-color);

  border-radius: 6px;

  color: var(--text-primary);

  transition: var(--transition);

  white-space: nowrap;

  display: flex;

  align-items: center;

  gap: 5px;

  user-select: none;

  min-width: 90px;

  justify-content: space-between;

}

.detail-btn:hover {

  border-color: var(--neon-cyan);

  box-shadow: var(--shadow-neon);

  background: linear-gradient(135deg,rgba(0,240,255,0.25),rgba(0,255,136,0.15));

}

.detail-btn.active-btn {

  background: linear-gradient(135deg,rgba(0,240,255,0.25),rgba(0,255,136,0.15));

  border-color: var(--neon-cyan);

  color: #fff;

}

.detail-btn .dd-arrow {

  font-size: 9px;

  opacity: 0.7;

  transition: transform 0.2s;

  display: inline-block;

}

/* 明细按钮文字限宽：选择司机/车辆后按钮宽度基本不变，避免顶栏换行错位 */

#driverDetailBtnText, #carDetailBtnText {

  display: inline-block;

  max-width: 150px;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  vertical-align: bottom;

}

.detail-btn-wrap.open .dd-arrow { transform: rotate(180deg); }

.detail-dropdown {

  display: none;

  position: absolute;

  top: calc(100% + 4px);

  left: 0;

  min-width: 160px;

  max-height: 300px;

  overflow-y: auto;

  background: rgba(10,30,55,0.99);

  border: 1px solid rgba(0,240,255,0.4);

  border-radius: 8px;

  box-shadow: 0 8px 32px rgba(0,240,255,0.15), 0 0 20px rgba(0,0,0,0.5);

  z-index: 9999;

}

.detail-dropdown::-webkit-scrollbar { width: 5px; }

.detail-dropdown::-webkit-scrollbar-track { background: rgba(0,240,255,0.05); border-radius: 3px; }

.detail-dropdown::-webkit-scrollbar-thumb { background: rgba(0,240,255,0.3); border-radius: 3px; }

.detail-dropdown-wrap.open { display: block; }

.detail-dd-search {

  padding: 7px 8px;

  border-bottom: 1px solid rgba(0,240,255,0.1);

  position: sticky;

  top: 0;

  background: rgba(10,30,55,0.99);

  z-index: 1;

}

.detail-dd-search input {

  width: 100%;

  padding: 4px 7px;

  background: rgba(0,240,255,0.05);

  border: 1px solid rgba(0,240,255,0.15);

  border-radius: 4px;

  color: var(--text-primary);

  font-size: 12px;

  outline: none;

}

.detail-dd-search input:focus { border-color: var(--neon-cyan); }

.detail-dd-search input::placeholder { color: var(--text-muted); }

.detail-dd-section-title {

  padding: 5px 8px 2px;

  font-size: 10px;

  color: rgba(0,240,255,0.4);

  letter-spacing: 1px;

  text-transform: uppercase;

  position: sticky;

  top: 38px;

  background: rgba(10,30,55,0.99);

}

.detail-dd-item {

  padding: 7px 10px;

  font-size: 12px;

  color: var(--text-primary);

  cursor: pointer;

  transition: background 0.1s;

  border-bottom: 1px solid rgba(0,240,255,0.04);

}

.detail-dd-item:last-child { border-bottom: none; }

.detail-dd-item:hover { background: rgba(0,240,255,0.1); color: var(--neon-cyan); }

.detail-dd-item.plate-item { color: #a0d4ff; }

.detail-dd-item.plate-item:hover { color: #00f5ff; }

.detail-dd-empty {

  padding: 14px 10px;

  text-align: center;

  color: var(--text-muted);

  font-size: 12px;

}

/* ====== 明细数据页 ====== */

.detail-page-title {
  font-size: clamp(16px, 2vw, 22px);
  font-weight: bold;
  margin-bottom: 16px;
  padding: 0 0 12px 0;
  letter-spacing: 1px;
  position: relative;
  text-align: left;
  background: linear-gradient(90deg, #00f5ff, #00ff88);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.detail-page-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, #00f5ff, transparent);
}

.detail-kpi-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: 16px;
  width: 100%;
}

/* === 司机/车辆明细页KPI卡（参照运营汇总 .metric-card 科技霓虹风） === */
.detail-kpi-card {
  background: linear-gradient(135deg, rgba(10,30,60,0.92), rgba(18,45,75,0.78));
  border: 1px solid rgba(0,245,255,0.25);
  border-radius: 8px;
  padding: 11px 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,245,255,0.06) inset, var(--shadow-card);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  min-width: 0;
  transition: border-color 0.25s, box-shadow 0.3s, transform 0.25s, background 0.3s;
}

/* 顶部霓虹条 */
.detail-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
  opacity: 0.9;
  z-index: 2;
  pointer-events: none;
}
/* 高光线覆盖层（与运营汇总同款） */
.detail-kpi-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(0,245,255,0.06) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
}

/* === 5色变体（按 data-category 区分） === */
.detail-kpi-card[data-category="cyan"]   { border-color: rgba(0,245,255,0.32); }
.detail-kpi-card[data-category="cyan"]::before   { background: linear-gradient(90deg, transparent, var(--neon-cyan),   transparent); }
.detail-kpi-card[data-category="purple"] { border-color: rgba(168,85,247,0.32); }
.detail-kpi-card[data-category="purple"]::before { background: linear-gradient(90deg, transparent, var(--neon-purple), transparent); }
.detail-kpi-card[data-category="pink"]   { border-color: rgba(255,62,138,0.32); }
.detail-kpi-card[data-category="pink"]::before   { background: linear-gradient(90deg, transparent, var(--neon-pink),   transparent); }
.detail-kpi-card[data-category="green"]  { border-color: rgba(0,255,136,0.32); }
.detail-kpi-card[data-category="green"]::before  { background: linear-gradient(90deg, transparent, var(--neon-green),  transparent); }
.detail-kpi-card[data-category="yellow"] { border-color: rgba(255,215,0,0.32); }
.detail-kpi-card[data-category="yellow"]::before { background: linear-gradient(90deg, transparent, var(--neon-yellow), transparent); }
.detail-kpi-card.cost-card { border-color: rgba(255,107,107,0.34); }
.detail-kpi-card.cost-card::before { background: linear-gradient(90deg, transparent, #ff6b6b, transparent); }

/* === 悬停：整体抬升 + 霓虹光晕（与运营汇总 .metric-card 同款高光） === */
.detail-kpi-card:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(14,38,68,0.96), rgba(22,52,82,0.84));
  box-shadow: var(--shadow-neon), inset 0 0 30px rgba(0,240,255,0.05);
}
.detail-kpi-card:hover[data-category="cyan"]   { border-color: var(--neon-cyan);   box-shadow: 0 8px 20px rgba(0,245,255,0.22),  inset 0 0 22px rgba(0,245,255,0.06); }
.detail-kpi-card:hover[data-category="purple"] { border-color: var(--neon-purple); box-shadow: 0 8px 20px rgba(168,85,247,0.22),inset 0 0 22px rgba(168,85,247,0.06); }
.detail-kpi-card:hover[data-category="pink"]   { border-color: var(--neon-pink);   box-shadow: 0 8px 20px rgba(255,62,138,0.22),inset 0 0 22px rgba(255,62,138,0.06); }
.detail-kpi-card:hover[data-category="green"]  { border-color: var(--neon-green);  box-shadow: 0 8px 20px rgba(0,255,136,0.22),inset 0 0 22px rgba(0,255,136,0.06); }
.detail-kpi-card:hover[data-category="yellow"] { border-color: var(--neon-yellow); box-shadow: 0 8px 20px rgba(255,215,0,0.22), inset 0 0 22px rgba(255,215,0,0.06); }
.detail-kpi-card.cost-card:hover               { border-color: #ff6b6b;           box-shadow: 0 8px 20px rgba(255,107,107,0.22), inset 0 0 22px rgba(255,107,107,0.06); }

/* === 文本部分 === */
.detail-kpi-card .kpi-name {
  font-size: 11px;
  color: #9cc8e6;
  margin-bottom: 5px;
  white-space: nowrap;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 2;
}
.detail-kpi-card .kpi-value {
  font-family: 'Orbitron', 'Microsoft YaHei', sans-serif;
  font-size: clamp(15px, 1.4vw, 19px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--neon-cyan);
  text-shadow: 0 0 10px rgba(0,245,255,0.55);
  position: relative;
  z-index: 2;
  line-height: 1.1;
  transition: transform 0.25s, text-shadow 0.25s;
}
.detail-kpi-card[data-category="purple"] .kpi-value { color: var(--neon-purple); text-shadow: 0 0 10px rgba(168,85,247,0.55); }
.detail-kpi-card[data-category="pink"]   .kpi-value { color: var(--neon-pink);   text-shadow: 0 0 10px rgba(255,62,138,0.55); }
.detail-kpi-card[data-category="green"]  .kpi-value { color: var(--neon-green);  text-shadow: 0 0 10px rgba(0,255,136,0.55); }
.detail-kpi-card[data-category="yellow"] .kpi-value { color: var(--neon-yellow); text-shadow: 0 0 10px rgba(255,215,0,0.55); }
.detail-kpi-card.cost-card .kpi-value              { color: #ff6b6b;             text-shadow: 0 0 10px rgba(255,107,107,0.55); }
/* hover 时数值轻微放大+增强光晕 */
.detail-kpi-card:hover .kpi-value { transform: scale(1.06); }
.detail-kpi-card:hover[data-category="cyan"] .kpi-value   { text-shadow: 0 0 16px rgba(0,245,255,0.85); }
.detail-kpi-card:hover[data-category="purple"] .kpi-value { text-shadow: 0 0 16px rgba(168,85,247,0.85); }
.detail-kpi-card:hover[data-category="pink"] .kpi-value   { text-shadow: 0 0 16px rgba(255,62,138,0.85); }
.detail-kpi-card:hover[data-category="green"] .kpi-value  { text-shadow: 0 0 16px rgba(0,255,136,0.85); }
.detail-kpi-card:hover[data-category="yellow"] .kpi-value { text-shadow: 0 0 16px rgba(255,215,0,0.85); }
.detail-kpi-card.cost-card:hover .kpi-value                { text-shadow: 0 0 16px rgba(255,107,107,0.85); }

.detail-kpi-card .kpi-sub {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
  position: relative;
  z-index: 2;
}

.detail-dashboard { margin-bottom: 16px; }

.dd-row { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }

.dd-chart-card {
  position: relative;
  flex: 1;
  min-width: 160px;
  background: linear-gradient(135deg, rgba(12,38,68,0.95), rgba(18,52,88,0.92));
  border: 1px solid rgba(0,245,255,0.3);
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,245,255,0.08) inset;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
/* 顶部霓虹线（跟运营汇总 chart-box::before 同款） */
.dd-chart-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,245,255,0.5), transparent);
  z-index: 2;
  pointer-events: none;
}
/* 扫描线动画（跟运营汇总 chart-box::after 同款） */
.dd-chart-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-cyan, #00f5ff), transparent);
  animation: ddChartScan 4s linear infinite;
  opacity: 0.5;
  z-index: 2;
  pointer-events: none;
}
@keyframes ddChartScan {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(320px); opacity: 0; }
}
.dd-chart-card:hover {
  border-color: var(--neon-cyan, #00f5ff);
  box-shadow: 0 6px 24px rgba(0,245,255,0.25), inset 0 0 25px rgba(0,245,255,0.08);
}

/* ====== 通用四角 L 形角标装饰（明细页 + 汇总页共用） ====== */
.card-corner {
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
  z-index: 5;
}
.card-corner::before, .card-corner::after {
  content: '';
  position: absolute;
  background: var(--neon-cyan, #00f5ff);
  box-shadow: 0 0 4px rgba(0,245,255,0.6);
}
.card-corner.tl { top: 0; left: 0; }
.card-corner.tl::before { width: 16px; height: 2px; top: 0; left: 0; }
.card-corner.tl::after  { width: 2px; height: 16px; top: 0; left: 0; }

.card-corner.tr { top: 0; right: 0; }
.card-corner.tr::before { width: 16px; height: 2px; top: 0; right: 0; }
.card-corner.tr::after  { width: 2px; height: 16px; top: 0; right: 0; }

.card-corner.bl { bottom: 0; left: 0; }
.card-corner.bl::before { width: 16px; height: 2px; bottom: 0; left: 0; }
.card-corner.bl::after  { width: 2px; height: 16px; bottom: 0; left: 0; }

.card-corner.br { bottom: 0; right: 0; }
.card-corner.br::before { width: 16px; height: 2px; bottom: 0; right: 0; }
.card-corner.br::after  { width: 2px; height: 16px; bottom: 0; right: 0; }

/* 成本/警示类卡片角标变红 */
.card-corner.warn::before, .card-corner.warn::after { background: #ff6b6b; box-shadow: 0 0 4px rgba(255,107,107,0.6); }

/* 司机/车辆明细页图表卡片 - 带装饰元素 */
.chart-card {
  position: relative;
  background: linear-gradient(135deg, rgba(8,20,40,0.95), rgba(12,32,58,0.9));
  border: 1px solid rgba(0,245,255,0.15);
  border-radius: 6px;
  padding: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  overflow: hidden;
}

/* 左上角装饰方块 */
.chart-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 3px;
  background: linear-gradient(90deg, #00f5ff, transparent);
}

.chart-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 20px;
  background: linear-gradient(180deg, #00f5ff, transparent);
}

/* 右下角装饰方块 */
.chart-card .card-corner-br {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 3px;
  background: linear-gradient(270deg, #00f5ff, transparent);
}

.chart-card .card-corner-br-v {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 3px;
  height: 20px;
  background: linear-gradient(0deg, #00f5ff, transparent);
}

.chart-card-title {
  font-size: 13px;
  font-weight: bold;
  color: #00f0ff;
  margin-bottom: 10px;
  padding-left: 12px;
  border-left: 3px solid #00f0ff;
  display: flex;
  align-items: center;
  gap: 8px;
}
.chart-card-sub {
  font-size: 11px;
  color: #7eb8e0;
  font-weight: normal;
  margin-left: auto;
}

.detail-table-card {
  background: linear-gradient(135deg, rgba(14,44,82,0.95), rgba(20,56,95,0.92));
  border: 1px solid rgba(0,245,255,0.3);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,245,255,0.06) inset;
  position: relative;
  overflow: hidden;
}
.detail-table-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,245,255,0.5), transparent);
}

.detail-table-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 12px;
  padding-bottom: 8px;
  letter-spacing: 1px;
  background: linear-gradient(90deg, #00f5ff, #00ff88);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}
.detail-table-title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 80px; height: 2px;
  background: linear-gradient(90deg, #00f5ff, transparent);
}

.detail-table-wrap { overflow-x: auto; overflow-y: auto; 

  max-height: 500px;

  overflow-y: auto;

  border-radius: 6px;

  margin-bottom: 12px;

}

.summary-row td {

  background: #0d3d6e !important;

  color: #00ff88 !important;

  font-weight: bold;

  position: sticky;

  bottom: 0;

  z-index: 2;

}

.summary-row td:first-child { border-radius: 0 0 0 4px; }

.summary-row td:last-child { border-radius: 0 0 4px 0; }

.detail-table-wrap::-webkit-scrollbar { width: 8px; }

.detail-table-wrap::-webkit-scrollbar-track { background: rgba(0,240,255,0.05); border-radius: 4px; }

.detail-table-wrap::-webkit-scrollbar-thumb { background: rgba(0,240,255,0.3); border-radius: 4px; }

.detail-table-wrap::-webkit-scrollbar-thumb:hover { background: rgba(0,240,255,0.5); }

.detail-table { width: 100%; border-collapse: collapse; font-size: 12px; }

.detail-table thead {

  position: sticky;

  top: 0;

  z-index: 10;

  background: linear-gradient(135deg, rgba(0,100,150,0.9), rgba(0,60,100,0.9));

}

.detail-table thead th {

  padding: 8px 6px;

  text-align: center;

  color: var(--neon-cyan);

  font-size: 11px;

  font-weight: bold;

  white-space: nowrap;

  border-bottom: 2px solid rgba(0,240,255,0.3);

  letter-spacing: 0.5px;

}

.detail-table tbody tr { border-bottom: 1px solid rgba(0,240,255,0.05); }

.detail-table tbody tr:nth-child(even) { background: rgba(0,240,255,0.03); }

.detail-table tbody tr:hover { background: rgba(0,240,255,0.08); }

.detail-table td { padding: 7px 6px; text-align: center; white-space: nowrap; color: var(--text-primary); font-size: 11px; }

.detail-table td:first-child,

.detail-table td:nth-child(2) { position: sticky; left: 0; background: inherit; z-index: 1; font-weight: bold; color: var(--neon-cyan); }

.detail-table td:first-child { left: 0; background: rgba(0,60,100,0.8); }

.detail-table td:nth-child(2) { left: 60px; background: rgba(0,60,100,0.6); }

.detail-pagination { display: flex; gap: 4px; align-items: center; justify-content: center; margin-top: 10px; flex-wrap: wrap; }

.detail-pagination button {

  padding: 4px 10px;

  background: rgba(0,240,255,0.1);

  border: 1px solid rgba(0,240,255,0.2);

  border-radius: 4px;

  color: var(--text-primary);

  font-size: 12px;

  cursor: pointer;

  transition: all 0.2s;

}

.detail-pagination button:hover { background: rgba(0,240,255,0.2); border-color: var(--neon-cyan); }

.detail-pagination button.active-page { background: rgba(0,240,255,0.25); border-color: var(--neon-cyan); color: var(--neon-cyan); font-weight: bold; }

.detail-pagination button:disabled { opacity: 0.3; cursor: not-allowed; }

.action-btns { display:flex; gap:8px; margin-left:auto; flex-shrink:0; flex-wrap:wrap; }

.act-btn {

  padding:8px 14px; font-size:12px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:4px;
  min-height:36px; box-sizing:border-box;

  background:linear-gradient(135deg,rgba(0,240,255,0.15),rgba(0,255,136,0.08));

  border:1px solid var(--border-color); border-radius:6px;

  color:var(--text-primary); transition:var(--transition);

  white-space:nowrap;

}

.act-btn:hover {

  border-color:var(--neon-cyan); box-shadow:var(--shadow-neon);

  background:linear-gradient(135deg,rgba(0,240,255,0.25),rgba(0,255,136,0.15));

  transform:translateY(-1px);

}

.act-btn svg { width:14px; height:14px; }

.line-select-wrap { 
  display:flex; align-items:center; gap:6px; flex-shrink:0;
  padding: 4px 10px;
  background: rgba(0,245,255,0.05);
  border: 1px solid rgba(0,245,255,0.15);
  border-radius: 8px;
}

.line-select-wrap label { 
  font-size:12px; color:var(--text-secondary); white-space:nowrap;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.line-select {

  background:var(--bg-card); border:1px solid var(--border-color);

  color:var(--text-primary); padding:5px 28px 5px 10px; border-radius:6px;

  font-size:12px; outline:none; cursor:pointer; min-width:90px; max-width:110px;
  transition: all 0.2s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300f5ff' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;

}

.line-select:hover {
  border-color: rgba(0,245,255,0.5);
  box-shadow: 0 0 8px rgba(0,245,255,0.15);
}

.line-select:focus {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 12px rgba(0,245,255,0.25);
}

.line-select option { background:var(--bg-card); color:var(--text-primary); }

/* ====== 主内容区 ====== */

.main-content { width:100%; max-width:100vw; padding:0 1.5vw 0 1.5vw; padding-top:70px; overflow-x:hidden; }

.page-section { display:none; animation:fadeIn 0.4s ease; }

.page-section.active { display:block; }

@keyframes fadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* ====== 模块标题 ====== */

.section-title {

  font-size:clamp(14px, 1.5vw, 20px); font-weight:bold; margin-top:0; margin-bottom:16px; padding-bottom:12px;

  border-bottom:2px solid transparent;

  background:linear-gradient(90deg,var(--neon-cyan),var(--neon-green));

  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;

  position:relative;

}

.section-title::after {

  content:''; position:absolute; bottom:-2px; left:0;

  width:120px; height:2px;

  background:linear-gradient(90deg,var(--neon-cyan),transparent);

}

.section-subtitle {

  font-size:13px; font-weight:normal; color:var(--text-muted);

  margin-top:4px; margin-bottom:14px; padding-left:2px; letter-spacing:0.5px;
  min-height:20px; line-height:20px; white-space:nowrap; overflow:visible;

}

.section-subtitle .weekday { color:var(--neon-cyan); font-weight:600; margin-left:2px; }

/* ====== 指标卡片网格 ====== */

.metrics-grid {

  display:grid;

  grid-template-columns:repeat(7,1fr);

  gap:4px;

  margin-bottom:6px;

  width:100%;

}

.metrics-grid > .metric-card {
  box-sizing: border-box;
}

#charter-metrics {
  grid-template-columns: repeat(7, 1fr);
}
/* 补充卡片行（3个卡片） */

.metrics-grid-secondary {

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:12px;

  margin-bottom:24px;

  width:100%;

}

.metric-card {

  background: linear-gradient(135deg, rgba(10,30,55,0.9), rgba(15,40,70,0.85));

  border:1px solid var(--border-color);

  border-radius:3px;

  padding:3px 3px;

  text-align:center;

  transition:var(--transition);

  position:relative;

  overflow:hidden;

  backdrop-filter:blur(10px);

  box-shadow:var(--shadow-card);

  min-height:40px;

}

.metric-card::before {

  content:''; position:absolute; top:0; left:0; right:0; height:1px;

  background:linear-gradient(90deg,transparent,var(--neon-cyan),transparent);

  opacity:0.6;

}

.metric-card::after {

  content:''; position:absolute; top:0; left:0; right:0; bottom:0;

  background:linear-gradient(180deg,rgba(0,240,255,0.03) 0%,transparent 50%);

  pointer-events:none;

}

.metric-card:hover {

  border-color:var(--neon-cyan);

  box-shadow:var(--shadow-neon),inset 0 0 30px rgba(0,240,255,0.05);

  transform:translateY(-1px);

  background:var(--bg-card-hover);

}

.metric-card.cost-card {
  border-color:rgba(255,107,107,0.25);
}
.metric-card.cost-card::before {
  background:linear-gradient(90deg,transparent,#ff6b6b,transparent);
  opacity:0.5;
}
.metric-card.cost-card .metric-value {
  color:#ff6b6b;
  text-shadow:0 0 10px rgba(255,107,107,0.4);
}

.metric-card.profit-card {
  border-color:rgba(0,255,136,0.25);
}
.metric-card.profit-card::before {
  background:linear-gradient(90deg,transparent,#00ff88,transparent);
  opacity:0.5;
}
.metric-card.profit-card .metric-value {
  color:#00ff88;
  text-shadow:0 0 10px rgba(0,255,136,0.4);
}

.metric-label {

  font-size:clamp(7px, 0.6vw, 9px); color:var(--text-secondary); margin-bottom:1px;

  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

  line-height:1.1;

}

.metric-value {

  font-size:clamp(11px, 1.1vw, 15px); font-weight:bold;

  color:var(--neon-cyan);

  text-shadow:0 0 5px rgba(0,240,255,0.4);

  font-variant-numeric:tabular-nums;

  line-height:1.1;

}

.metric-value.animating { animation:numberPulse 0.6s ease; }

@keyframes numberPulse { 0%{transform:scale(1.1);opacity:0.7} 100%{transform:scale(1);opacity:1} }

.metric-sub {

  font-size:8px; color:var(--text-muted); margin-top:0;

  line-height:1;

}

.metric-card.clickable { cursor:pointer; }

.metric-card.clickable:hover {

  background:rgba(0,240,255,0.05); border-color:var(--neon-cyan);

}

/* ====== 卡片分类颜色指示条 ====== */

.metric-card[data-category="core"]::before { background:linear-gradient(90deg,transparent,#3b82f6,transparent); opacity:0.8; }

.metric-card[data-category="business"]::before { background:linear-gradient(90deg,transparent,#34d399,transparent); opacity:0.8; }

.metric-card[data-category="cost"]::before { background:linear-gradient(90deg,transparent,#fbbf24,transparent); opacity:0.8; }

.metric-card[data-category="core"] { border-color:rgba(59,130,246,0.2); }

.metric-card[data-category="business"] { border-color:rgba(52,211,153,0.2); }

.metric-card[data-category="cost"] { border-color:rgba(251,191,36,0.2); }

.metric-card[data-category="core"]:hover { border-color:#3b82f6; box-shadow:0 0 15px rgba(59,130,246,0.2); }

.metric-card[data-category="business"]:hover { border-color:#34d399; box-shadow:0 0 15px rgba(52,211,153,0.2); }

.metric-card[data-category="cost"]:hover { border-color:#fbbf24; box-shadow:0 0 15px rgba(251,191,36,0.2); }

.metric-card[data-category="core"] .metric-value { color:#60a5fa; text-shadow:0 0 10px rgba(59,130,246,0.4); }

.metric-card[data-category="business"] .metric-value { color:#6ee7b7; text-shadow:0 0 10px rgba(52,211,153,0.4); }

.metric-card[data-category="cost"] .metric-value { color:#fcd34d; text-shadow:0 0 10px rgba(251,191,36,0.4); }

/* ====== 图表容器 ====== */

.chart-row {

  display:grid;

  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

  gap:16px; margin-bottom:24px;

}

.chart-box {

  background:linear-gradient(135deg,rgba(10,30,55,0.9),rgba(15,40,70,0.85));

  border:1px solid var(--border-color);

  border-radius:var(--radius);

  padding:clamp(10px, 1.5vw, 16px); min-height:240px;

  position:relative; backdrop-filter:blur(10px);

  transition:var(--transition);

  box-shadow:var(--shadow-card);

}

.chart-box::before {

  content:''; position:absolute; top:0; left:0; right:0; height:1px;

  background:linear-gradient(90deg,transparent,rgba(0,240,255,0.3),transparent);

}

.chart-box:hover {

  border-color:rgba(0,240,255,0.3);

  box-shadow:0 0 20px rgba(0,240,255,0.08),inset 0 0 20px rgba(0,240,255,0.03);

}

.chart-box .chart-title {

  font-size:clamp(12px, 1.1vw, 14px); font-weight:bold; margin-bottom:12px;

  color:var(--text-primary); padding-bottom:8px;

  border-bottom:1px solid var(--border-color);

}

.chart-container { width:100%; height:clamp(180px, 22vw, 280px); }

/* 小仪表盘行 */

.gauge-row {

  display:grid;

  grid-template-columns: minmax(160px, 26vw) 1fr;

  gap:16px; margin-bottom:24px;

  align-items: stretch;

}

.gauge-box {

  background:linear-gradient(135deg,rgba(10,30,55,0.9),rgba(15,40,70,0.85));

  border:1px solid var(--border-color);

  border-radius:var(--radius);

  padding:16px; text-align:center;

  backdrop-filter:blur(10px); transition:var(--transition);

  box-shadow:var(--shadow-card);

  display: flex;

  flex-direction: column;

  align-items: center;

  position: relative;

}

.gauge-box-wide {

  width: 100%;

  min-width: 0;

  display: flex;

  flex-direction: column;

}

.gauge-box::before {

  content:''; position:absolute; top:0; left:0; right:0; height:1px;

  background:linear-gradient(90deg,transparent,rgba(0,240,255,0.3),transparent);

}

.gauge-box:hover {

  border-color:rgba(0,240,255,0.35);

  box-shadow:0 0 20px rgba(0,240,255,0.08);

}

.gauge-container { width: min(240px, 28vw); height: min(240px, 28vw); flex-shrink: 0; }

.gauge-label { font-size:13px; color:var(--text-secondary); margin-top:4px; }

/* ====== 司机排名表格 ====== */

.driver-rank-section {

  background:linear-gradient(135deg,rgba(10,30,55,0.9),rgba(15,40,70,0.85));

  border:1px solid var(--border-color);

  border-radius:var(--radius);

  padding:20px; margin-bottom:24px; max-height:600px; overflow-y:auto;

  backdrop-filter:blur(10px);

  box-shadow:var(--shadow-card);

}

.driver-rank-section::before {

  content:''; position:absolute; top:0; left:0; right:0; height:1px;

  background:linear-gradient(90deg,transparent,rgba(0,240,255,0.3),transparent);

}

.driver-rank-title {

  font-size:16px; font-weight:bold; margin-bottom:16px;

  color:var(--text-primary);

  background:linear-gradient(90deg,var(--neon-cyan),var(--neon-green));

  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;

}

/* ====== 参考文件：指标卡片网格 ====== */
.metrics-grid-secondary {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:24px;
  width:100%;
}
.metric-card {
  background: linear-gradient(135deg, rgba(10,30,55,0.9), rgba(15,40,70,0.85));
  border:1px solid var(--border-color);
  border-radius:var(--radius);
  padding:14px 8px;
  text-align:center;
  transition:var(--transition);
  position:relative;
  overflow:hidden;
  backdrop-filter:blur(10px);
  box-shadow:var(--shadow-card);
}
.metric-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--neon-cyan),transparent);
  opacity:0.6;
}
.metric-card::after {
  content:''; position:absolute; top:0; left:0; right:0; bottom:0;
  background:linear-gradient(180deg,rgba(0,240,255,0.03) 0%,transparent 50%);
  pointer-events:none;
}
.metric-card:hover {
  border-color:var(--neon-cyan);
  box-shadow:var(--shadow-neon),inset 0 0 30px rgba(0,240,255,0.05);
  transform:translateY(-3px);
  background:var(--bg-card-hover);
}
.metric-label {
  font-size:clamp(10px, 0.9vw, 11px); color:var(--text-secondary); margin-bottom:6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.metric-value {
  font-size:clamp(14px, 1.6vw, 20px); font-weight:bold;
  color:var(--neon-cyan);
  text-shadow:0 0 10px rgba(0,240,255,0.4);
  font-variant-numeric:tabular-nums;
}
.metric-value.animating { animation:numberPulse 0.6s ease; }
@keyframes numberPulse { 0%{transform:scale(1.1);opacity:0.7} 100%{transform:scale(1);opacity:1} }
.metric-sub {
  font-size:10px; color:var(--text-muted); margin-top:4px;
}
.metric-card.clickable { cursor:pointer; }
.metric-card.clickable:hover {
  background:rgba(0,240,255,0.05); border-color:var(--neon-cyan);
}
/* 卡片分类颜色指示条 */
.metric-card[data-category="core"]::before { background:linear-gradient(90deg,transparent,#3b82f6,transparent); opacity:0.8; }
.metric-card[data-category="business"]::before { background:linear-gradient(90deg,transparent,#34d399,transparent); opacity:0.8; }
.metric-card[data-category="cost"]::before { background:linear-gradient(90deg,transparent,#fbbf24,transparent); opacity:0.8; }
.metric-card[data-category="core"] { border-color:rgba(59,130,246,0.2); }
.metric-card[data-category="business"] { border-color:rgba(52,211,153,0.2); }
.metric-card[data-category="cost"] { border-color:rgba(251,191,36,0.2); }
.metric-card[data-category="core"]:hover { border-color:#3b82f6; box-shadow:0 0 15px rgba(59,130,246,0.2); }
.metric-card[data-category="business"]:hover { border-color:#34d399; box-shadow:0 0 15px rgba(52,211,153,0.2); }
.metric-card[data-category="cost"]:hover { border-color:#fbbf24; box-shadow:0 0 15px rgba(251,191,36,0.2); }
.metric-card[data-category="core"] .metric-value { color:#60a5fa; text-shadow:0 0 10px rgba(59,130,246,0.4); }
.metric-card[data-category="business"] .metric-value { color:#6ee7b7; text-shadow:0 0 10px rgba(52,211,153,0.4); }
.metric-card[data-category="cost"] .metric-value { color:#fcd34d; text-shadow:0 0 10px rgba(251,191,36,0.4); }

.driver-table-wrap { overflow-x:auto; overflow-y:auto; max-height:400px; }

.driver-table { width:100%; border-collapse:collapse; font-size:13px; }

.driver-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

.driver-table thead th {

  background:rgba(0,80,120,0.95); color:var(--neon-cyan); font-weight:bold;

  padding:10px 8px; text-align:center; border-bottom:1px solid var(--border-color); white-space:nowrap;

}

.driver-table tbody tr {

  border-bottom:1px solid rgba(0,240,255,0.08); transition:var(--transition);

}

.driver-table tbody tr:nth-child(even) { background:var(--bg-card-alt); }

.driver-table tbody tr:hover {

  background:rgba(0,240,255,0.08);

  box-shadow:inset 0 0 20px rgba(0,240,255,0.05);

}

.driver-table td { padding:10px 8px; text-align:center; white-space:nowrap; }

.rank-badge {

  display:inline-flex; align-items:center; justify-content:center;

  width:28px; height:28px; border-radius:50%; font-weight:bold; font-size:14px;

}

.rank-1 { background:linear-gradient(135deg,#ffd700,#ffaa00); color:#000; }

.rank-2 { background:linear-gradient(135deg,#c0c0c0,#a0a0a0); color:#000; }

.rank-3 { background:linear-gradient(135deg,#cd7f32,#b8690e); color:#fff; }

.rank-n { background:rgba(0,240,255,0.1); color:var(--text-secondary); }

.driver-name-link {

  color:var(--neon-cyan); cursor:pointer;

  text-decoration:underline; text-decoration-style:dotted; transition:var(--transition);

}

.driver-name-link:hover { color:var(--neon-green); text-shadow:0 0 8px rgba(0,255,136,0.5); }

/* ====== 返回按钮 ====== */

.back-btn {

  display:inline-flex; align-items:center; gap:6px;

  padding:8px 16px; margin-bottom:16px;

  background:rgba(0,240,255,0.1); border:1px solid var(--border-color);

  border-radius:6px; color:var(--neon-cyan); cursor:pointer;

  font-size:13px; transition:var(--transition);

}

.back-btn:hover { background:rgba(0,240,255,0.2); border-color:var(--neon-cyan); box-shadow:var(--shadow-neon); }

/* ====== 导入弹窗 ====== */

.modal-overlay {

  display:none; position:fixed; top:0; left:0; right:0; bottom:0;

  background:rgba(0,0,0,0.7); z-index:2000;

  justify-content:center; align-items:center; backdrop-filter:blur(4px);

}

.modal-overlay.show { display:flex; }

.modal-box {

  background:linear-gradient(135deg,#0a1929,#0f2940);

  border:1px solid var(--border-glow);

  border-radius:16px; padding:30px; width:500px; max-width:90vw;

  box-shadow:0 0 40px rgba(0,240,255,0.15); animation:modalIn 0.3s ease;

}

@keyframes modalIn { from{opacity:0;transform:scale(0.95)} to{opacity:1;transform:scale(1)} }

.modal-title { font-size:18px; font-weight:bold; margin-bottom:20px; color:var(--neon-cyan); }

.drop-zone {

  border:2px dashed var(--border-color); border-radius:12px;

  padding:40px 20px; text-align:center; cursor:pointer;

  transition:var(--transition); margin-bottom:16px;

}

.drop-zone:hover, .drop-zone.dragover { border-color:var(--neon-cyan); background:rgba(0,240,255,0.05); }

.drop-zone-icon { font-size:40px; margin-bottom:10px; }

.drop-zone-text { font-size:14px; color:var(--text-secondary); }

.drop-zone-hint { font-size:12px; color:var(--text-muted); margin-top:6px; }

.import-progress-wrap {

  background: rgba(255,255,255,0.08);

  border-radius: 10px;

  height: 14px;

  overflow: hidden;

  border: 1px solid rgba(0,240,255,0.25);

}

.import-progress-bar {

  height: 100%;

  background: linear-gradient(90deg, #00f0ff, #0090cc, #00f0ff);

  background-size: 200% 100%;

  border-radius: 10px;

  width: 0%;

  transition: width 0.5s ease;

  animation: progressShine 1.8s ease-in-out infinite;

}

@keyframes progressShine {

  0%,100% { background-position: 0% 50%; }

  50% { background-position: 100% 50%; }

}

.modal-btns { display:flex; gap:10px; justify-content:flex-end; }

.modal-btn {

  padding:8px 20px; border-radius:6px; cursor:pointer;

  font-size:13px; border:1px solid var(--border-color); transition:var(--transition);

}

.modal-btn-cancel { background:transparent; color:var(--text-secondary); }

.modal-btn-cancel:hover { background:rgba(255,255,255,0.05); }

.modal-btn-confirm {

  background:linear-gradient(135deg,rgba(0,240,255,0.2),rgba(0,255,136,0.15));

  color:var(--neon-cyan); border-color:var(--neon-cyan);

}

.modal-btn-confirm:hover {

  background:linear-gradient(135deg,rgba(0,240,255,0.35),rgba(0,255,136,0.25));

  box-shadow:var(--shadow-neon);

}

/* ====== Toast通知 ====== */

.toast-container { position:fixed; top:140px; right:20px; z-index:3000; display:flex; flex-direction:column; gap:8px; }

.toast {

  padding:12px 20px; border-radius:8px; font-size:13px;

  animation:toastIn 0.3s ease,toastOut 0.3s ease 2.7s forwards;

  max-width:360px; box-shadow:0 4px 20px rgba(0,0,0,0.4);

}

.toast-success { background:rgba(0,255,136,0.15); border:1px solid var(--neon-green); color:var(--neon-green); }

.toast-error { background:rgba(255,62,138,0.15); border:1px solid var(--neon-pink); color:var(--neon-pink); }

.toast-info { background:rgba(0,240,255,0.15); border:1px solid var(--neon-cyan); color:var(--neon-cyan); }

@keyframes toastIn { from{opacity:0;transform:translateX(50px)} to{opacity:1;transform:translateX(0)} }

@keyframes toastOut { to{opacity:0;transform:translateX(50px)} }

/* ====== 空数据提示 ====== */

.empty-state { text-align:center; padding:60px 20px; color:var(--text-muted); }

.empty-state-icon { font-size:48px; margin-bottom:16px; }

.empty-state-text { font-size:16px; margin-bottom:20px; color:var(--text-secondary); }

.empty-state-btn {

  display:inline-flex; align-items:center; gap:6px;

  padding:10px 24px; border-radius:8px; cursor:pointer;

  background:linear-gradient(135deg,rgba(0,240,255,0.2),rgba(0,255,136,0.1));

  border:1px solid var(--neon-cyan); color:var(--neon-cyan); font-size:14px; transition:var(--transition);

}

.empty-state-btn:hover {

  background:linear-gradient(135deg,rgba(0,240,255,0.35),rgba(0,255,136,0.2));

  box-shadow:var(--shadow-neon);

}

/* ====== 响应式设计 ====== */

/* 热力图容器响应式高度（原行内420px改由CSS控制，随屏幕缩放；桌面保持420px原观感） */
.heatmap-main { height: clamp(320px, 30vw, 420px); }

.gauge-box-wide { width: 100%; min-width: 0; }

.car-type-loadrate-container { width: 100%; min-width: 0; height: clamp(240px, 28vw, 340px); display: block; }

@media(max-width:1600px) {

  .metrics-grid-secondary { grid-template-columns:repeat(3,1fr); }

  .chart-row { grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); }

  .main-content { padding:0 1.5vw 0 1.5vw; padding-top:70px; }

  .gauge-row { grid-template-columns: minmax(150px, 24vw) 1fr; }

  .gauge-container { width: min(180px, 22vw); height: min(180px, 22vw); }

  .chart-container { height:clamp(200px, 24vw, 260px); }

}

@media(max-width:1200px) {

  .metrics-grid-secondary { grid-template-columns:repeat(3,1fr); }

  .chart-row { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; }

  .top-bar { flex-wrap:wrap; height:auto; padding:8px 12px; gap:6px; }

  body { padding-top:100px; }

  .metric-card { padding:12px; }

  .metric-value { font-size:clamp(15px, 2vw, 20px); }

  .chart-container { height:clamp(200px, 22vw, 240px); }

  .gauge-row { grid-template-columns:repeat(2,1fr); gap:12px; }

  .gauge-container { width: min(150px, 28vw); height: min(150px, 28vw); }

}

@media(max-width:1024px) {

  .metrics-grid-secondary { grid-template-columns:repeat(3,1fr); }

  .chart-row { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }

  .top-bar { flex-wrap:wrap; gap:6px; }

  .action-btns { margin-left:0; width:100%; justify-content:flex-end; }

  .section-title { font-size:clamp(13px, 1.5vw, 16px); }

  .metric-label { font-size:clamp(9px, 1vw, 11px); }

  .metric-value { font-size:clamp(14px, 1.8vw, 18px); }

  .chart-container { height:clamp(200px, 22vw, 220px); }

  .gauge-row { grid-template-columns:repeat(2,1fr); }

  .gauge-container { width: min(130px, 30vw); height: min(130px, 30vw); }

  .driver-table { font-size:12px; }

}

@media(max-width:768px) {

  .metrics-grid-secondary { grid-template-columns:repeat(3,1fr); }

  .chart-row { grid-template-columns:1fr; gap:10px; }

  .gauge-row { grid-template-columns:1fr; }

  .gauge-container { width: min(160px, 45vw); height: min(160px, 45vw); }

  .top-bar { flex-wrap:wrap; padding:6px 8px; gap:4px; }

  body { padding-top:90px; }

  .page-switch { margin-left:0; width:100%; }

  .page-btn { flex:1; font-size:11px; padding:5px 6px; text-align:center; }

  .period-switch { width:100%; }

  .period-btn { flex:1; text-align:center; padding:5px 8px; }

  .action-btns { flex-wrap:wrap; gap:6px; }

  .section-title { font-size:clamp(13px, 3.5vw, 15px); margin-bottom:14px; }

  .metric-card { padding:10px; }

  .metric-value { font-size:clamp(13px, 3.5vw, 17px); }

  .metric-label { font-size:clamp(9px, 2.2vw, 11px); }

  .chart-container { height:clamp(180px, 40vw, 200px); }

  .driver-table { font-size:11px; }

  .driver-table thead th,.driver-table td { padding:8px 4px; }

  .car-type-loadrate-container { width: 100%; min-width: 0; height: clamp(180px, 45vw, 280px); display: block; }

  .line-select-wrap { width:100%; }

  .line-select,.date-select { width:100%; }

  /* 司机/车辆明细KPI卡片：7列→4列 */
  .detail-kpi-row { grid-template-columns: repeat(4, 1fr); gap:6px; }

  .top-control { width:100%; }

  /* 手机端热力图 */
  .heatmap-main { height: 300px; }

  .heatmap-toolbar button,.heatmap-toolbar select { padding:3px 8px; font-size:11px; }

}

@media(max-width:480px) {

  .heatmap-main { height: 240px; }

  .heatmap-toolbar { gap:4px; }

  /* 手机端表格横向滚动（明细/排名表不换行挤爆） */
  .table-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }

  .driver-table { min-width:640px; }

  /* 司机/车辆明细KPI卡片：3列→2列 */
  .detail-kpi-row { grid-template-columns: repeat(2, 1fr); gap:4px; }

}

@media(max-width:600px) {

  .metrics-grid-secondary { grid-template-columns:repeat(2,1fr); }

  .chart-row { grid-template-columns:1fr; gap:8px; }

  .main-content { padding:0 1vw 0 1vw; padding-top:70px; }

  .metric-value { font-size:clamp(12px, 4vw, 15px); }

  .metric-label { font-size:clamp(8px, 2.5vw, 10px); }

  /* 司机/车辆明细KPI卡片：4列→3列 */
  .detail-kpi-row { grid-template-columns: repeat(3, 1fr); gap:5px; }

  .section-title { font-size:clamp(12px, 3.5vw, 14px); }

  .chart-box { padding:1vh 1vw; min-height:200px; }

  .chart-container { height:clamp(160px, 45vw, 180px); }

  .gauge-container { width: min(110px, 50vw); height: min(110px, 50vw); }

  .gauge-row { grid-template-columns:1fr; gap:10px; }

  .car-type-loadrate-container { width: 100%; min-width: 0; height: clamp(160px, 50vw, 240px); display: block; }

  .driver-rank-section { padding:12px; }

  .logo-area { width:40px; }

  .logo-placeholder { font-size:9px; }

  .act-btn { padding:5px 10px; font-size:11px; }

}

@media(max-width:480px) {

  .metrics-grid-secondary { grid-template-columns:repeat(2,1fr); gap:8px; }

  .chart-row { grid-template-columns:1fr; gap:6px; }

  .metric-value { font-size:clamp(11px, 4vw, 13px); }

  .metric-label { font-size:clamp(7px, 2.2vw, 9px); }

  .section-title { font-size:clamp(11px, 3vw, 13px); }

  .chart-container { height:clamp(140px, 45vw, 170px); }

  .gauge-container { width: min(100px, 55vw); height: min(100px, 55vw); }

  .car-type-loadrate-container { width: 100%; min-width: 0; height: clamp(150px, 55vw, 200px); display: block; }

  .metric-card { padding:8px 4px; }

  .top-bar { padding:4px 6px; }

  .logo-area { width:32px; }

}

@media(max-width:480px) {

  .metrics-grid-secondary { grid-template-columns:repeat(2,1fr); gap:8px; }

  .chart-row { grid-template-columns:1fr; gap:6px; }

  .metric-value { font-size:clamp(11px, 4vw, 13px); }

  .metric-label { font-size:clamp(7px, 2.2vw, 9px); }

  .section-title { font-size:clamp(11px, 3vw, 13px); }

  .chart-container { height:clamp(140px, 45vw, 170px); }

  .gauge-container { width: min(100px, 55vw); height: min(100px, 55vw); }

  .car-type-loadrate-container { width: 100%; min-width: 0; height: clamp(160px, 50vw, 220px); display: block; }

  .metric-card { padding:8px 4px; }

  .top-bar { padding:4px 6px; }

  .logo-area { width:32px; }

}

@media(min-width:1920px) {

  .main-content { width:100%; }

  .metrics-grid-secondary { grid-template-columns:repeat(3,1fr); }

}

/* ====== 打印样式 ====== */

@media print {

  .top-bar,.page-header { display:none !important; }

  body { padding-top:0 !important; }

  .main-content { padding-top:20px !important; }

  body { padding-top:0; background:#fff; color:#000; }

  .metric-card,.chart-box,.driver-rank-section { border:1px solid #ccc; box-shadow:none; background:#fff; }

  .metric-value { -webkit-text-fill-color:#000; background:none; color:#000; }

}

/* ===== 司机/车辆统计页样式 ===== */

.stat-page { background:#040d1a; padding:20px; border-radius:8px; margin-top:20px; }

.section-title { color:#00f5ff; font-size:16px; font-weight:bold; margin-bottom:12px; }

.import-wrapper { display:flex; flex-wrap:wrap; gap:20px; align-items:center; margin-top:10px; }

.import-item { display:flex; align-items:center; gap:10px; }

.import-label { color:#e0e0e0; font-size:14px; }

.import-file { background:#040d1a; color:#e0e0e0; border:1px solid #00f5ff; padding:5px; border-radius:4px; }

.import-status { font-size:14px; padding:2px 8px; border-radius:4px; color:#ff6b6b; }

.import-status.success { color:#00ff88; background:rgba(0,255,136,0.2); }

.load-btn { background:#00f5ff; color:#040d1a; border:none; padding:6px 15px; border-radius:4px; cursor:pointer; font-weight:bold; }

.load-btn:disabled { background:#666; cursor:not-allowed; color:#aaa; }

.filter-section { background:rgba(10,25,47,0.6); padding:12px 15px; border-radius:8px; margin-bottom:20px; border:1px solid rgba(0,240,255,0.2); display:flex; flex-wrap:wrap; gap:15px; align-items:center; }

.filter-section select,.filter-section input { background:#040d1a; color:#e0e0e0; border:1px solid #00f5ff; padding:5px 8px; border-radius:4px; font-size:13px; }

.filter-section select { min-width:140px; }

.kpi-section { margin-bottom:20px; }

.kpi-grid { display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; }

.kpi-card { background:rgba(0,240,255,0.05); border:1px solid rgba(0,240,255,0.2); border-radius:6px; padding:12px 16px; min-width:140px; flex:1; }

.kpi-card.cost-card { border-left:3px solid #ff6b6b; }

.kpi-name { color:#a0d8ef; font-size:12px; margin-bottom:6px; }

.kpi-value { font-size:22px; font-weight:bold; color:#00ff88; }

.kpi-card.cost-card .kpi-value { color:#ff6b6b; }

.chart-section { margin-bottom:20px; }

.chart-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; margin-top:10px; }

.chart-item { background:rgba(10,25,47,0.6); border:1px solid rgba(0,240,255,0.15); border-radius:8px; padding:10px; }

.detail-section { margin-top:20px; }

.detail-table-wrap { overflow-x: auto; overflow-y: auto; max-height:500px; margin-top:10px; }

.detail-table { width:100%; border-collapse:collapse; color:#e0e0e0; font-size:13px; }

.detail-table th,.detail-table td { border:1px solid rgba(0,240,255,0.3); padding:7px 10px; text-align:center; white-space:nowrap; }

.detail-table th { background:linear-gradient(180deg, rgba(90,50,180,0.95) 0%, rgba(50,25,120,0.95) 100%); color:#ffffff; cursor:pointer; font-size:12px; position:sticky; top:0; z-index:10; font-weight:bold; text-shadow:0 1px 2px rgba(0,0,0,0.5); box-shadow:0 2px 8px rgba(120,80,255,0.3); border-bottom:2px solid rgba(150,100,255,0.6); }

.detail-table th:hover { background:rgba(0,240,255,0.2); }

.detail-table tr:nth-child(even) { background:rgba(0,240,255,0.03); }

.detail-table tr:hover { background:rgba(0,240,255,0.08); }

.detail-search { background:#040d1a; color:#e0e0e0; border:1px solid #00f5ff; padding:6px 10px; border-radius:4px; margin-bottom:10px; width:300px; }

.pagination { display:flex; justify-content:center; gap:5px; margin:15px 0; flex-wrap:wrap; }

.page-num-btn { padding:4px 10px; background:rgba(0,240,255,0.1); border:1px solid rgba(0,240,255,0.3); color:#e0e0e0; border-radius:4px; cursor:pointer; font-size:12px; }

.page-num-btn.active { background:#00f5ff; color:#040d1a; font-weight:bold; }

.export-btn { background:#00ff88; color:#040d1a; border:none; padding:8px 20px; border-radius:4px; cursor:pointer; font-weight:bold; margin-top:10px; }

@media(max-width:768px){.chart-grid{grid-template-columns:1fr}.kpi-grid{gap:8px}.kpi-card{min-width:120px}}

/* === 响应式断点结束 === */

/* ====== 司机/车辆明细页全宽自适应 ====== */

#driver-stat-page,

#car-stat-page {

  width: 100%;

  max-width: 100vw;

  padding: 70px 1.5vw 2vh 1.5vw;

  box-sizing: border-box;

  margin: 0;

}

#driver-stat-page *,

#car-stat-page * {

  box-sizing: border-box;

}

.detail-table-card {

  width: 100% !important;

  max-width: 100%;

  overflow-x: auto;

  overflow-y: auto;

  max-height: 600px;

}

.detail-table-card .detail-table th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(0, 100, 150, 0.95) !important;
  backdrop-filter: blur(4px);
}

.detail-table {

  min-width: 800px;

  width: 100%;

}

=== 导航按钮行显示/隐藏控制 ====== */

.nav-btn-row { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }

.nav-btn-row.hidden { display: none !important; }

/* ====== 司机/车辆页隐藏主导航按钮 ====== */

/* 司机/车辆页：detail-btn-wrap 正常显示 */

body.driver-page .page-header .detail-btn-wrap,

body.car-page .page-header .detail-btn-wrap { display: flex !important; }

/* 导入加载遮罩 */

#import-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.75);z-index:99999;display:none;

  flex-direction:column;align-items:center;justify-content:center;

  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}

#import-overlay .spin{width:52px;height:52px;border:5px solid rgba(255,255,255,.2);border-top-color:#1890ff;

  border-radius:50%;animation:xlsxspin .8s linear infinite}

#import-overlay .txt{color:#fff;font-size:15px;margin-top:18px;text-align:center;max-width:280px;line-height:1.6}

#import-overlay .fname{color:#1890ff;font-weight:600;margin-bottom:4px;font-size:13px}

#import-overlay .pbar{width:240px;height:5px;background:rgba(255,255,255,.15);border-radius:3px;margin-top:14px}

#import-overlay .pfilled{height:100%;background:#1890ff;border-radius:3px;width:0;transition:width .4s}

@keyframes xlsxspin{to{transform:rotate(360deg)}}

/* ====== 风格切换器 ====== */

.style-switcher{display:flex;align-items:center;gap:5px;z-index:10}

.style-switcher .ss-label{color:rgba(255,255,255,0.4);font-size:10px;letter-spacing:1px;margin-right:2px;flex-shrink:0}

.ss-btn{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);

  color:rgba(255,255,255,0.5);padding:3px 9px;font-size:10px;border-radius:20px;

  cursor:pointer;transition:all 0.2s;letter-spacing:0.3px;font-family:inherit;flex-shrink:0}

.ss-btn:hover{background:rgba(255,255,255,0.14);color:#fff}

.ss-btn.ss-active{background:rgba(255,255,255,0.18);border-color:rgba(255,255,255,0.35);color:#fff}

.ss-btn[data-theme="stripe"].ss-active{border-color:#6366f1;color:#818cf8;background:rgba(99,102,241,0.15)}

.ss-btn[data-theme="sentry"].ss-active{border-color:#a78bfa;color:#c4b5fd;background:rgba(139,92,246,0.15)}

.ss-btn[data-theme="posthog"].ss-active{border-color:#06b6d4;color:#22d3ee;background:rgba(6,182,212,0.15)}

.ss-btn[data-theme="revolut"].ss-active{border-color:#34d399;color:#6ee7b7;background:rgba(52,211,153,0.15)}

.ss-btn[data-theme="linear"].ss-active{border-color:#818cf8;color:#c7d2fe;background:rgba(129,140,248,0.15)}

/* ====== 5套风格 CSS 变量覆盖 ====== */

/* Stripe — 深邃蓝黑 + 紫蓝渐变 */

body.theme-stripe{--hdr-bg:linear-gradient(135deg,#0f0c29,#302b63,#24243e);

  --hdr-border:rgba(99,102,241,0.3);--hdr-shadow:0 4px 30px rgba(99,102,241,0.2);

  --hdr-glow:rgba(99,102,241,0.08);--accent:#6366f1;--accent2:#8b5cf6;

  --bg:#0e0e1a;--card:#1a1a2e;--card2:#16162a;--border:rgba(99,102,241,0.2);

  --text:#e2e8f0;--text2:#94a3b8;--text3:#475569;--num:#818cf8;--dash:#1e1e35;

  --echarts-palette:["#6366f1","#8b5cf6","#06b6d4","#10b981","#f59e0b","#ef4444","#ec4899","#14b8a6","#f97316","#a855f7"]}

/* Sentry — 极深暗色 + 粉紫科技感 */

body.theme-sentry{--hdr-bg:linear-gradient(135deg,#050914,#0d0f2e,#070c24);

  --hdr-border:rgba(168,85,247,0.25);--hdr-shadow:0 4px 30px rgba(168,85,247,0.18);

  --hdr-glow:rgba(168,85,247,0.07);--accent:#a855f7;--accent2:#ec4899;

  --bg:#04081a;--card:#0a0e25;--card2:#080b1f;--border:rgba(168,85,247,0.2);

  --text:#e2e8f0;--text2:#818cf8;--text3:#475569;--num:#c4b5fd;--dash:#090d1e;

  --echarts-palette:["#a855f7","#ec4899","#f472b6","#818cf8","#06b6d4","#10b981","#f59e0b","#ef4444","#14b8a6","#f97316"]}

/* PostHog — 海洋深蓝 + 青蓝霓虹 */

body.theme-posthog{--hdr-bg:linear-gradient(135deg,#030812,#05101f,#030a18);

  --hdr-border:rgba(6,182,212,0.25);--hdr-shadow:0 4px 30px rgba(6,182,212,0.18);

  --hdr-glow:rgba(6,182,212,0.07);--accent:#0891b2;--accent2:#06b6d4;

  --bg:#020810;--card:#060d1a;--card2:#050a16;--border:rgba(6,182,212,0.2);

  --text:#e0f2fe;--text2:#7dd3fc;--text3:#334155;--num:#22d3ee;--dash:#050c18;

  --echarts-palette:["#06b6d4","#22d3ee","#0891b2","#0ea5e9","#38bdf8","#10b981","#f59e0b","#ef4444","#a855f7","#f97316"]}

/* Revolut — 深色碳黑 + 翠绿金融感 */

body.theme-revolut{--hdr-bg:linear-gradient(135deg,#06090f,#0d1117,#080c12);

  --hdr-border:rgba(52,211,153,0.25);--hdr-shadow:0 4px 30px rgba(52,211,153,0.18);

  --hdr-glow:rgba(52,211,153,0.07);--accent:#059669;--accent2:#34d399;

  --bg:#050709;--card:#090e13;--card2:#070b10;--border:rgba(52,211,153,0.2);

  --text:#ecfdf5;--text2:#a7f3d0;--text3:#374151;--num:#6ee7b7;--dash:#080d12;

  --echarts-palette:["#34d399","#10b981","#059669","#06b6d4","#8b5cf6","#f59e0b","#ef4444","#f97316","#ec4899","#a855f7"]}

/* Linear — 纯黑极简 + 紫灰精致感 */

body.theme-linear{--hdr-bg:linear-gradient(135deg,#09090b,#0f0f10,#0a0a0c);

  --hdr-border:rgba(129,140,248,0.25);--hdr-shadow:0 4px 30px rgba(0,0,0,0.5);

  --hdr-glow:rgba(129,140,248,0.07);--accent:#6366f1;--accent2:#a5b4fc;

  --bg:#090909;--card:#111111;--card2:#0d0d0d;--border:rgba(129,140,248,0.15);

  --text:#ededef;--text2:#a1a1aa;--text3:#3f3f46;--num:#c7d2fe;--dash:#0e0e0e;

  --echarts-palette:["#6366f1","#818cf8","#a5b4fc","#8b5cf6","#10b981","#f59e0b","#ef4444","#f97316","#ec4899","#14b8a6"]}

/* 风格切换时覆盖原有固定颜色 */

body.theme-stripe .page-header,

body.theme-sentry .page-header,

body.theme-posthog .page-header,

body.theme-revolut .page-header,

body.theme-linear .page-header{

  background:var(--hdr-bg) !important;

  border-bottom:1px solid var(--hdr-border) !important;

  box-shadow:var(--hdr-shadow) !important}

body.theme-stripe .page-header::before,

body.theme-sentry .page-header::before,

body.theme-posthog .page-header::before,

body.theme-revolut .page-header::before,

body.theme-linear .page-header::before{

  background:var(--hdr-glow) !important}

body.theme-stripe,body.theme-sentry,body.theme-posthog,

body.theme-revolut,body.theme-linear{

  background:var(--bg) !important}

body.theme-stripe .card,body.theme-sentry .card,

body.theme-posthog .card,body.theme-revolut .card,

body.theme-linear .card{background:var(--card) !important;border-color:var(--border) !important}

body.theme-stripe .card2,body.theme-sentry .card2,

body.theme-posthog .card2,body.theme-revolut .card2,

body.theme-linear .card2{background:var(--card2) !important}

body.theme-stripe .top-bar,body.theme-sentry .top-bar,

body.theme-posthog .top-bar,body.theme-revolut .top-bar,

body.theme-linear .top-bar{background:var(--bg) !important;border-bottom:1px solid var(--border) !important}

body.theme-stripe .tab-bar,body.theme-sentry .tab-bar,

body.theme-posthog .tab-bar,body.theme-revolut .tab-bar,

body.theme-linear .tab-bar{background:var(--card) !important;border-bottom:1px solid var(--border) !important}

body.theme-stripe .dashboard,body.theme-sentry .dashboard,

body.theme-posthog .dashboard,body.theme-revolut .dashboard,

body.theme-linear .dashboard{background:var(--dash) !important}

/* ===== Style Block 2 ===== */
/* ====== SciFi Background ====== */

body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(0,180,255,0.12) 0%,transparent 60%),radial-gradient(ellipse 60% 40% at 85% 80%,rgba(99,102,241,0.08) 0%,transparent 50%),radial-gradient(ellipse 50% 30% at 15% 90%,rgba(6,182,212,0.07) 0%,transparent 50%)}

body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(0,180,255,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,180,255,0.04) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,black 30%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,black 30%,transparent 100%)}

/* ====== Header ====== */

.page-header{overflow:visible;border-bottom:1px solid rgba(0,180,255,0.15)!important}

.page-header::after{content:'';position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);width:70%;height:1px;background:linear-gradient(90deg,transparent,rgba(0,200,255,0.6),rgba(99,102,241,0.8),rgba(0,200,255,0.6),transparent);filter:blur(1px)}

@keyframes titleShine{0%{background-position:0% center}100%{background-position:200% center}}

.title-deco{display:flex;align-items:center;gap:12px;flex:1;justify-content:center}

.title-deco-line{height:1px;flex:1;max-width:100px;background:linear-gradient(90deg,transparent,rgba(96,165,250,0.3))}

.title-deco-line.r{background:linear-gradient(90deg,rgba(96,165,250,0.3),transparent)}

.title-deco-dot{width:4px;height:4px;border-radius:50%;background:#60a5fa;box-shadow:0 0 4px #60a5fa,0 0 8px rgba(96,165,250,0.4);animation:dotPulse 3s ease-in-out infinite;flex-shrink:0}

@keyframes dotPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.7)}}

/* ====== Card Tech ====== */

.card{position:relative;overflow:visible;border:1px solid rgba(0,180,255,0.15)!important;box-shadow:0 0 0 1px rgba(0,180,255,0.05),0 8px 32px rgba(0,0,0,0.5),inset 0 1px 0 rgba(255,255,255,0.04)!important;transition:box-shadow .3s,border-color .3s}

.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(0,200,255,0.4) 30%,rgba(99,102,241,0.6) 70%,transparent 95%);pointer-events:none}

.card-corner{position:absolute;width:14px;height:14px;pointer-events:none;z-index:2}

.card-corner-tl{top:-1px;left:-1px;border-top:2px solid rgba(0,200,255,0.7);border-left:2px solid rgba(0,200,255,0.7);border-top-left-radius:6px}

.card-corner-tr{top:-1px;right:-1px;border-top:2px solid rgba(0,200,255,0.7);border-right:2px solid rgba(0,200,255,0.7);border-top-right-radius:6px}

.card-corner-bl{bottom:-1px;left:-1px;border-bottom:2px solid rgba(99,102,241,0.7);border-left:2px solid rgba(99,102,241,0.7);border-bottom-left-radius:6px}

.card-corner-br{bottom:-1px;right:-1px;border-bottom:2px solid rgba(99,102,241,0.7);border-right:2px solid rgba(99,102,241,0.7);border-bottom-right-radius:6px}

.card:hover{border-color:rgba(0,200,255,0.3)!important;box-shadow:0 0 20px rgba(0,200,255,0.1),0 8px 32px rgba(0,0,0,0.5)!important}

.card-glow-top::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(0,200,255,0.8),transparent);animation:glowMove 3s ease-in-out infinite}

@keyframes glowMove{0%,100%{opacity:0.5;left:10%;right:10%}50%{opacity:1;left:5%;right:5%}}

/* ====== Divider ====== */

.section-divider{height:1px;margin:8px 0;background:linear-gradient(90deg,transparent,rgba(0,180,255,0.2),rgba(99,102,241,0.3),rgba(0,180,255,0.2),transparent);position:relative}

.section-divider::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:rgba(0,200,255,0.4);box-shadow:0 0 8px rgba(0,200,255,0.4)}

/* ====== Top bar & Tab ====== */

.top-bar{border-bottom:1px solid rgba(0,180,255,0.1)!important;box-shadow:0 1px 12px rgba(0,0,0,0.3)!important}

.tab-btn.active{color:#00d4ff!important;border-bottom:2px solid #00d4ff!important;text-shadow:0 0 10px rgba(0,200,255,0.5)!important}

/* ====== Data numbers ====== */

.metric-value,.kpi-num,.summary-num{text-shadow:0 0 10px rgba(0,200,255,0.3)!important}

/* ====== Sidebar ====== */

.sidebar-section{border:1px solid rgba(0,180,255,0.1)!important;box-shadow:inset 0 0 20px rgba(0,0,0,0.3),0 4px 16px rgba(0,0,0,0.3)!important}

/* ====== Scrollbar ====== */

::-webkit-scrollbar{width:6px;height:6px}

::-webkit-scrollbar-track{background:rgba(0,0,0,0.2)}

::-webkit-scrollbar-thumb{background:rgba(0,180,255,0.3);border-radius:3px}

::-webkit-scrollbar-thumb:hover{background:rgba(0,180,255,0.5)}

/* ====== Table ====== */

table th{background:rgba(0,100,150,0.15)!important;border-bottom:1px solid rgba(0,180,255,0.2)!important}

table tr:nth-child(even) td{background:rgba(0,80,120,0.06)!important}

table tr:hover td{background:rgba(0,150,200,0.08)!important}

/* ====== Theme btn ====== */

.ss-btn{border:1px solid rgba(0,180,255,0.25)!important;box-shadow:0 0 6px rgba(0,180,255,0.1)!important}

.ss-btn:hover{box-shadow:0 0 12px rgba(0,200,255,0.3)!important;border-color:rgba(0,200,255,0.5)!important}

/* ====== Layout ====== */

.dashboard{padding:16px!important;gap:14px!important}

.main-content{padding:14px 16px!important;gap:12px!important}

/* ===== Style Block 3 ===== */
/* ====== 面板样式（参照v3版本） ====== */
.panel-box {
  background: linear-gradient(135deg, rgba(10, 30, 60, 0.9), rgba(5, 15, 35, 0.95));
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.panel-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-purple), var(--neon-pink));
}

.panel-box::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 1px;
  background: linear-gradient(135deg, var(--neon-cyan), transparent, var(--neon-purple));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: borderGlow 3s ease-in-out infinite alternate;
}

@keyframes borderGlow {
  from { opacity: 0.3; }
  to { opacity: 0.8; }
}

/* ====== 角落装饰 ====== */
.corner-decor {
  position: absolute;
  width: 20px;
  height: 20px;
  pointer-events: none;
  z-index: 10;
}

.corner-decor::before, .corner-decor::after {
  content: '';
  position: absolute;
  background: var(--neon-cyan);
}

.corner-tl { top: 0; left: 0; }
.corner-tl::before { width: 20px; height: 2px; top: 0; left: 0; }
.corner-tl::after { width: 2px; height: 20px; top: 0; left: 0; }

.corner-tr { top: 0; right: 0; }
.corner-tr::before { width: 20px; height: 2px; top: 0; right: 0; }
.corner-tr::after { width: 2px; height: 20px; top: 0; right: 0; }

.corner-bl { bottom: 0; left: 0; }
.corner-bl::before { width: 20px; height: 2px; bottom: 0; left: 0; }
.corner-bl::after { width: 2px; height: 20px; bottom: 0; left: 0; }

.corner-br { bottom: 0; right: 0; }
.corner-br::before { width: 20px; height: 2px; bottom: 0; right: 0; }
.corner-br::after { width: 2px; height: 20px; bottom: 0; right: 0; }

/* 闪烁点 */
.corner-decor .blink-dot {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--neon-cyan);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--neon-cyan);
  animation: blinkDot 1.5s ease-in-out infinite;
}

.corner-tl .blink-dot { top: 0; left: 0; }
.corner-tr .blink-dot { top: 0; right: 0; animation-delay: 0.5s; }
.corner-bl .blink-dot { bottom: 0; left: 0; animation-delay: 1s; }
.corner-br .blink-dot { bottom: 0; right: 0; animation-delay: 1.5s; }

@keyframes blinkDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.5); }
}

/* ====== KPI卡片样式（参照v3版本） ====== */
.kpi-card {
  background: linear-gradient(135deg, rgba(10, 30, 60, 0.9), rgba(20, 50, 80, 0.7));
  border: 1px solid rgba(0, 240, 255, 0.15);
  border-radius: 10px;
  padding: 16px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-purple));
}

.kpi-card:hover {
  transform: translateY(-2px);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.2);
}

.kpi-card.cyan::before { background: linear-gradient(90deg, var(--neon-cyan), transparent); }
.kpi-card.purple::before { background: linear-gradient(90deg, var(--neon-purple), transparent); }
.kpi-card.pink::before { background: linear-gradient(90deg, var(--neon-pink), transparent); }
.kpi-card.green::before { background: linear-gradient(90deg, var(--neon-green), transparent); }
.kpi-card.yellow::before { background: linear-gradient(90deg, var(--neon-yellow), transparent); }

.kpi-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.kpi-value {
  font-family: 'Orbitron', sans-serif;
  font-size: 28px;
  font-weight: 700;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 30px rgba(0, 240, 255, 0.5);
}

.kpi-value.cyan { background: linear-gradient(90deg, var(--neon-cyan), #00aaff); -webkit-background-clip: text; background-clip: text; }
.kpi-value.purple { background: linear-gradient(90deg, var(--neon-purple), var(--neon-pink)); -webkit-background-clip: text; background-clip: text; }
.kpi-value.green { background: linear-gradient(90deg, var(--neon-green), #10b981); -webkit-background-clip: text; background-clip: text; }
.kpi-value.yellow { background: linear-gradient(90deg, var(--neon-yellow), #f59e0b); -webkit-background-clip: text; background-clip: text; }
.kpi-value.pink { background: linear-gradient(90deg, var(--neon-pink), var(--neon-orange)); -webkit-background-clip: text; background-clip: text; }

.kpi-unit {
  font-size: 14px;
  font-weight: 400;
  opacity: 0.7;
  margin-left: 4px;
}

.kpi-trend {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
}

.kpi-trend.up {
  background: rgba(52, 211, 153, 0.2);
  color: var(--neon-green);
}

.kpi-trend.down {
  background: rgba(244, 63, 94, 0.2);
  color: var(--neon-pink);
}

/* ====== 图表扫描线 ====== */
.chart-box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
  animation: chartScan 3s linear infinite;
  opacity: 0.6;
}
@keyframes chartScan {
  0% { transform: translateY(0); }
  100% { transform: translateY(300px); }
}

/* ====== 排名列表样式（参照v3版本） ====== */
.rank-list {
  padding: 10px 16px;
}

.rank-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 240, 255, 0.05);
  transition: all 0.3s ease;
  position: relative;
}

.rank-item:last-child { border-bottom: none; }

.rank-item:hover {
  background: linear-gradient(90deg, rgba(0,240,255,0.05), transparent);
  padding-left: 8px;
}

.rank-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: var(--neon-cyan);
  transition: height 0.3s ease;
}

.rank-item:hover::before {
  height: 70%;
}

.rank-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  margin-right: 12px;
}

.rank-badge.gold { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #000; }
.rank-badge.silver { background: linear-gradient(135deg, #94a3b8, #64748b); color: #fff; }
.rank-badge.bronze { background: linear-gradient(135deg, #cd7f32, #a0522d); color: #fff; }
.rank-badge.normal { background: rgba(0, 240, 255, 0.1); color: var(--text-secondary); }

.rank-name {
  flex: 1;
  font-size: 13px;
  color: var(--text-primary);
}

.rank-value {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  color: var(--neon-cyan);
}

/* ====== 进度条样式（参照v3版本） ====== */
.progress-bar {
  height: 6px;
  background: rgba(0, 240, 255, 0.1);
  border-radius: 3px;
  margin-top: 8px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-purple));
  position: relative;
  transition: width 0.5s ease;
  box-shadow: 0 0 8px var(--neon-cyan), 0 0 16px rgba(0,240,255,0.3);
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: progressShine 2s ease-in-out infinite;
}

@keyframes progressShine {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

/* ====== 环形进度（参照v3版本） ====== */
.ring-progress {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 20px auto;
}

.ring-progress svg {
  transform: rotate(-90deg);
}

.ring-bg {
  fill: none;
  stroke: rgba(0, 240, 255, 0.1);
  stroke-width: 8;
}

.ring-fill {
  fill: none;
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s ease;
}

.ring-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.ring-value {
  font-family: 'Orbitron', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--neon-cyan);
}

.ring-label {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
}

/* ====== 热力图样式（参照v3版本） ====== */
.heat-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 16px;
}

.heat-cell {
  aspect-ratio: 1;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease;
  cursor: pointer;
  animation: heatPulse 2s ease-in-out infinite;
}

.heat-cell:nth-child(2n) { animation-delay: -0.3s; }
.heat-cell:nth-child(3n) { animation-delay: -0.6s; }

.heat-cell:hover {
  transform: scale(1.1);
  z-index: 1;
  box-shadow: 0 0 15px var(--neon-cyan);
}

.heat-low { background: rgba(0, 240, 255, 0.2); }
.heat-mid { background: rgba(0, 240, 255, 0.5); }
.heat-high { background: rgba(0, 240, 255, 0.8); }
.heat-max { background: var(--neon-cyan); box-shadow: 0 0 10px var(--neon-cyan); }

@keyframes heatPulse {
  0%, 100% { box-shadow: 0 0 0 transparent; }
  50% { box-shadow: 0 0 8px rgba(0,240,255,0.4); }
}

/* ====== 面板标题样式（参照v3版本） ====== */
.panel-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--neon-cyan);
  padding: 16px 20px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(0, 240, 255, 0.1);
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  z-index: 5;
}

.panel-title::before {
  content: '';
  width: 4px;
  height: 16px;
  background: linear-gradient(180deg, var(--neon-cyan), var(--neon-purple));
  border-radius: 2px;
}

.panel-title .icon {
  animation: iconGlow 2s ease-in-out infinite;
}
@keyframes iconGlow {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3); }
}

/* ====== 3D透视卡片效果 ====== */
.kpi-card {
  transform-style: preserve-3d;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.kpi-card:hover {
  transform: translateY(-5px) rotateX(5deg);
  box-shadow: 0 20px 40px rgba(0,240,255,0.2), 0 0 30px rgba(0,240,255,0.1);
}

/* ====== 图表容器动态边框 ====== */
.chart-box {
  position: relative;
  border: 1px solid rgba(0,240,255,0.2);
  transition: border-color 0.3s ease;
}
.chart-box:hover {
  border-color: var(--neon-cyan);
  box-shadow: inset 0 0 20px rgba(0,240,255,0.1);
}

/* ====== 饼状图发光效果 ====== */
.pie-chart {
  filter: drop-shadow(0 0 10px rgba(0,240,255,0.3));
}

/* ====== 柱状图3D效果 ====== */
.bar-chart {
  transform: perspective(1000px) rotateX(5deg);
  transform-origin: bottom;
}

/* ====== 折线图发光 ====== */
.line-chart {
  filter: drop-shadow(0 0 8px rgba(0,240,255,0.4));
}

/* ====== 雷达图网格发光 ====== */
.radar-chart {
  filter: drop-shadow(0 0 15px rgba(99,102,241,0.3));
}

/* ====== 表格行悬停效果 ====== */
.data-table tr {
  transition: all 0.3s ease;
}
.data-table tr:hover {
  background: linear-gradient(90deg, rgba(0,240,255,0.1), transparent);
  transform: translateX(5px);
}

/* ====== 数据刷新指示器 ====== */
.refresh-indicator {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  background: var(--neon-cyan);
  border-radius: 50%;
  animation: refreshPulse 1.5s ease-in-out infinite;
}
@keyframes refreshPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 5px var(--neon-cyan); }
  50% { opacity: 0.5; box-shadow: 0 0 15px var(--neon-cyan); }
}

/* ====== 数字雨背景 ====== */
.matrix-rain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.02;
  background: 
    repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(0,240,255,0.1) 40px, rgba(0,240,255,0.1) 41px),
    repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(0,240,255,0.1) 40px, rgba(0,240,255,0.1) 41px);
}

/* ====== 音频波形装饰 ====== */
.audio-wave {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 30px;
  opacity: 0.3;
  pointer-events: none;
  z-index: 1;
}
.audio-bar {
  width: 4px;
  background: linear-gradient(to top, var(--neon-cyan), var(--neon-purple));
  animation: audioWave 1s ease-in-out infinite;
}
.audio-bar:nth-child(1) { height: 10px; animation-delay: 0s; }
.audio-bar:nth-child(2) { height: 20px; animation-delay: 0.1s; }
.audio-bar:nth-child(3) { height: 15px; animation-delay: 0.2s; }
.audio-bar:nth-child(4) { height: 25px; animation-delay: 0.3s; }
.audio-bar:nth-child(5) { height: 18px; animation-delay: 0.4s; }
.audio-bar:nth-child(6) { height: 22px; animation-delay: 0.5s; }
.audio-bar:nth-child(7) { height: 12px; animation-delay: 0.6s; }
@keyframes audioWave {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.5); }
}

/* ====== LOGO脉冲发光 ====== */
.logo {
  animation: logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 5px var(--neon-cyan)); }
  50% { filter: brightness(1.2) drop-shadow(0 0 15px var(--neon-cyan)); }
}

/* ====== 标题文字阴影动画 ====== */
.page-title {
  animation: titleGlow 2s ease-in-out infinite;
}
@keyframes titleGlow {
  0%, 100% { text-shadow: 0 0 10px rgba(0,240,255,0.5); }
  50% { text-shadow: 0 0 20px rgba(0,240,255,0.8), 0 0 30px rgba(0,240,255,0.4); }
}

/* ====== 全局按钮点击区域修复 ====== */
button, .btn, .period-btn, .page-btn, .detail-btn, .modal-btn, .act-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  height: 36px !important;
  min-height: 36px !important;
  line-height: 36px !important;
  padding: 0 16px !important;
  box-sizing: border-box !important;
  position: relative;
  z-index: 9999 !important;
  pointer-events: auto !important;
}

/* 确保所有伪元素都不阻挡点击 */
button::before, button::after,
.btn::before, .btn::after,
.period-btn::before, .period-btn::after,
.page-btn::before, .page-btn::after,
.detail-btn::before, .detail-btn::after,
.modal-btn::before, .modal-btn::after,
.act-btn::before, .act-btn::after {
  pointer-events: none !important;
}

/* ====== 按钮悬停光效 ====== */
.btn, .period-btn, .page-btn, .detail-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
.btn::before, .period-btn::before, .page-btn::before, .detail-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(0,240,255,0.3), transparent);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
  pointer-events: none; /* 装饰性伪元素不阻挡点击 */
}
.btn:hover::before, .period-btn:hover::before, .page-btn:hover::before, .detail-btn:hover::before {
  width: 200%;
  height: 200%;
}

/* ====== 霓虹边框效果 ====== */
.neon-border {
  border: 1px solid rgba(0,240,255,0.3);
  box-shadow: 0 0 5px rgba(0,240,255,0.2), inset 0 0 5px rgba(0,240,255,0.1);
  transition: all 0.3s ease;
}
.neon-border:hover {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 15px rgba(0,240,255,0.4), inset 0 0 10px rgba(0,240,255,0.2);
}

/* ====== 日期选择器发光边框 ====== */
input[type="date"], .date-select {
  border: 1px solid rgba(0,240,255,0.2);
  transition: all 0.3s ease;
}
input[type="date"]:focus, .date-select:focus {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 15px rgba(0,240,255,0.3);
}

/* ====== 激活状态脉冲指示器 ====== */
.active-pulse {
  position: relative;
}
.active-pulse::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -15px;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background: var(--neon-cyan);
  border-radius: 50%;
  animation: activePulse 1.5s ease-in-out infinite;
}
@keyframes activePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 5px var(--neon-cyan); }
  50% { opacity: 0.5; box-shadow: 0 0 15px var(--neon-cyan); }
}

/* ====== 卡片角落装饰（来自参考文件） ====== */
.card-corner {
  position: absolute;
  width: 12px;
  height: 12px;
  z-index: 10;
  pointer-events: none;
  border-color: rgba(0,200,255,0.7);
}
.card-corner.tl {
  top: -1px;
  left: -1px;
  border-top: 2px solid rgba(0,200,255,0.7);
  border-left: 2px solid rgba(0,200,255,0.7);
  border-top-left-radius: 6px;
}
.card-corner.tr {
  top: -1px;
  right: -1px;
  border-top: 2px solid rgba(0,200,255,0.7);
  border-right: 2px solid rgba(0,200,255,0.7);
  border-top-right-radius: 6px;
}
.card-corner.bl {
  bottom: -1px;
  left: -1px;
  border-bottom: 2px solid rgba(0,200,255,0.7);
  border-left: 2px solid rgba(0,200,255,0.7);
  border-bottom-left-radius: 6px;
}
.card-corner.br {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid rgba(0,200,255,0.7);
  border-right: 2px solid rgba(0,200,255,0.7);
  border-bottom-right-radius: 6px;
}

/* 备用类名 */
.card-corner-tl, .card-corner-tr, .card-corner-bl, .card-corner-br {
  position: absolute;
  width: 12px;
  height: 12px;
  z-index: 10;
  pointer-events: none;
}
.card-corner-tl {
  top: -1px;
  left: -1px;
  border-top: 2px solid rgba(0,200,255,0.7);
  border-left: 2px solid rgba(0,200,255,0.7);
  border-top-left-radius: 6px;
}
.card-corner-tr {
  top: -1px;
  right: -1px;
  border-top: 2px solid rgba(0,200,255,0.7);
  border-right: 2px solid rgba(0,200,255,0.7);
  border-top-right-radius: 6px;
}
.card-corner-bl {
  bottom: -1px;
  left: -1px;
  border-bottom: 2px solid rgba(0,200,255,0.7);
  border-left: 2px solid rgba(0,200,255,0.7);
  border-bottom-left-radius: 6px;
}
.card-corner-br {
  bottom: -1px;
  right: -1px;
  border-bottom: 2px solid rgba(0,200,255,0.7);
  border-right: 2px solid rgba(0,200,255,0.7);
  border-bottom-right-radius: 6px;
}

/* ====== 分隔线渐变效果 ====== */
.section-divider {
  height: 1px;
  margin: 8px 0;
  background: linear-gradient(90deg, transparent, rgba(0,180,255,0.2), rgba(99,102,241,0.3), rgba(0,180,255,0.2), transparent);
}

/* ====== 指标卡片增强样式 ====== */
.metric-card {
  background: linear-gradient(135deg, rgba(10,30,55,0.9), rgba(15,40,70,0.85));
  border: 1px solid rgba(0,240,255,0.15);
  border-radius: 8px;
  padding: 14px 8px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.metric-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
  opacity: 0.6;
}
.metric-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0,240,255,0.03) 0%, transparent 50%);
  pointer-events: none;
}
.metric-card:hover {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 20px rgba(0,240,255,0.2), inset 0 0 30px rgba(0,240,255,0.05);
  transform: translateY(-3px);
  background: rgba(15,40,70,0.95);
}

/* ====== 指标卡片分类颜色 ====== */
.metric-card[data-category="core"] {
  border-color: rgba(59,130,246,0.2);
}
.metric-card[data-category="core"]::before {
  background: linear-gradient(90deg, transparent, #3b82f6, transparent);
  opacity: 0.8;
}
.metric-card[data-category="core"] .metric-value {
  color: #60a5fa;
  text-shadow: 0 0 10px rgba(59,130,246,0.4);
}
.metric-card[data-category="core"]:hover {
  border-color: #3b82f6;
  box-shadow: 0 0 15px rgba(59,130,246,0.2);
}

.metric-card[data-category="business"] {
  border-color: rgba(52,211,153,0.2);
}
.metric-card[data-category="business"]::before {
  background: linear-gradient(90deg, transparent, #34d399, transparent);
  opacity: 0.8;
}
.metric-card[data-category="business"] .metric-value {
  color: #6ee7b7;
  text-shadow: 0 0 10px rgba(52,211,153,0.4);
}
.metric-card[data-category="business"]:hover {
  border-color: #34d399;
  box-shadow: 0 0 15px rgba(52,211,153,0.2);
}

.metric-card[data-category="cost"] {
  border-color: rgba(251,191,36,0.2);
}
.metric-card[data-category="cost"]::before {
  background: linear-gradient(90deg, transparent, #fbbf24, transparent);
  opacity: 0.8;
}
.metric-card[data-category="cost"] .metric-value {
  color: #fcd34d;
  text-shadow: 0 0 10px rgba(251,191,36,0.4);
}
.metric-card[data-category="cost"]:hover {
  border-color: #fbbf24;
  box-shadow: 0 0 15px rgba(251,191,36,0.2);
}

/* ====== 数字脉冲动画 ====== */
.metric-value.animating {
  animation: numberPulse 0.6s ease;
}
@keyframes numberPulse {
  0% { transform: scale(1.1); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

/* ====== 进度条光泽动画 ====== */
.progress-bar {
  position: relative;
  overflow: hidden;
}
.progress-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: progressShine 2s ease-in-out infinite;
}
@keyframes progressShine {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* ====== 热力图脉冲效果 ====== */
.heat-cell {
  animation: heatPulse 2s ease-in-out infinite;
}
@keyframes heatPulse {
  0%, 100% { box-shadow: 0 0 5px currentColor; }
  50% { box-shadow: 0 0 15px currentColor, 0 0 25px currentColor; }
}

/* ====== 排名列表项悬停效果 ====== */
.rank-item {
  transition: all 0.3s ease;
  position: relative;
}
.rank-item:hover {
  background: linear-gradient(90deg, rgba(0,240,255,0.1), transparent);
  transform: translateX(8px);
}
.rank-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--neon-cyan), var(--neon-purple));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.rank-item:hover::before {
  opacity: 1;
}

/* ====== 图表标题发光效果 ====== */
.chart-title {
  position: relative;
  display: inline-block;
}
.chart-title::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-purple), transparent);
}

/* ====== 面板盒增强样式 ====== */
.panel-box {
  background: linear-gradient(135deg, rgba(10, 30, 60, 0.9), rgba(5, 15, 35, 0.95));
  border: 1px solid rgba(0, 240, 255, 0.2);
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
.panel-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-purple), var(--neon-pink));
}

/* ====== 环形进度条发光 ====== */
.ring-progress {
  position: relative;
  width: 120px;
  height: 120px;
  margin: 20px auto;
}
.ring-progress svg {
  filter: drop-shadow(0 0 8px rgba(0,240,255,0.5));
}

/* ====== 数据标签发光 ====== */
.data-label {
  color: var(--neon-cyan);
  text-shadow: 0 0 8px rgba(0,240,255,0.5);
}

/* ====== 统计卡片增强 ====== */
.stat-card {
  background: linear-gradient(135deg, rgba(10,30,55,0.9), rgba(15,40,70,0.85));
  border: 1px solid rgba(0,240,255,0.15);
  border-radius: 10px;
  padding: 16px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-purple));
}
.stat-card:hover {
  border-color: rgba(0,240,255,0.4);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 20px rgba(0,240,255,0.1);
  transform: translateY(-2px);
}

/* ====== 表格头部发光 ====== */
.data-table th {
  background: linear-gradient(180deg, rgba(0,240,255,0.15), rgba(0,240,255,0.05));
  color: var(--neon-cyan);
  text-shadow: 0 0 5px rgba(0,240,255,0.3);
  position: relative;
}
.data-table th::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
}

/* ====== 图表发光效果增强 ====== */
.chart-container {
  position: relative;
  height: 220px;
  width: 100%;
}
.chart-container::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, var(--neon-cyan), var(--neon-purple), var(--neon-pink), var(--neon-cyan));
  border-radius: inherit;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
  filter: blur(8px);
}
.chart-container:hover::before {
  opacity: 0.5;
}

/* ====== 饼图中心发光 ====== */
.pie-center-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,240,255,0.1) 0%, transparent 70%);
  pointer-events: none;
}

/* ====== 柱状图柱子发光 ====== */
.bar-glow {
  filter: drop-shadow(0 0 5px rgba(0,240,255,0.5));
}

/* ====== 折线图线条发光 ====== */
.line-glow {
  filter: drop-shadow(0 0 8px rgba(168,85,247,0.6));
}

/* ====== 雷达图区域发光 ====== */
.radar-glow {
  filter: drop-shadow(0 0 10px rgba(0,240,255,0.4));
}

/* ====== 仪表盘发光效果 ====== */
.gauge-glow {
  filter: drop-shadow(0 0 15px rgba(0,240,255,0.3));
}

/* ====== 数据卡片标签发光 ====== */
.data-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(0,240,255,0.1);
  border: 1px solid rgba(0,240,255,0.3);
  color: var(--neon-cyan);
  font-size: 11px;
  text-shadow: 0 0 5px rgba(0,240,255,0.5);
}

/* ====== 闪烁点效果 ====== */
.blink-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--neon-cyan);
  animation: blinkDot 1.5s ease-in-out infinite;
  margin-right: 6px;
}
@keyframes blinkDot {
  0%, 100% { opacity: 1; box-shadow: 0 0 5px var(--neon-cyan); }
  50% { opacity: 0.3; box-shadow: 0 0 15px var(--neon-cyan); }
}

/* ====== 扫描线效果（可选） ====== */
.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
  opacity: 0.3;
  pointer-events: none;
}

/* ====== 网格背景效果 ====== */
.grid-bg {
  background-image: 
    linear-gradient(rgba(0,240,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,0.03) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* ====== 边框流动效果 ====== */
.border-flow {
  position: relative;
  overflow: hidden;
}
.border-flow::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
  animation: borderFlow 3s linear infinite;
}
@keyframes borderFlow {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* ====== 文字渐变效果 ====== */
.gradient-text {
  background: linear-gradient(90deg, var(--neon-cyan), var(--neon-purple), var(--neon-pink));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ====== 悬浮光晕效果 ====== */
.hover-glow {
  transition: all 0.3s ease;
}
.hover-glow:hover {
  box-shadow: 0 0 20px rgba(0,240,255,0.3), 0 0 40px rgba(0,240,255,0.1);
}

/* ====== 角落高亮 ====== */
.corner-highlight {
  position: relative;
}
.corner-highlight::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, transparent 50%, rgba(0,240,255,0.3) 50%);
  border-top-right-radius: inherit;
}

/* ====== 司机/车辆明细页面美化 ====== */
#driver-stat-page,
#car-stat-page {
  background: linear-gradient(135deg, rgba(10, 20, 40, 0.95), rgba(5, 15, 30, 0.98));
  border: 1px solid rgba(0, 240, 255, 0.15);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(4px);
}

/* 明细页卡片统一加 backdrop-filter（跟运营汇总 chart-box 同款） */
#driver-stat-page .dd-chart-card,
#car-stat-page .dd-chart-card,
#driver-stat-page .detail-kpi-card,
#car-stat-page .detail-kpi-card,
#driver-stat-page .detail-table-card,
#car-stat-page .detail-table-card {
  backdrop-filter: blur(10px);
}

/* 明细页图表卡 hover 外发光增强（跟运营汇总 hover-glow 同款） */
#driver-stat-page .dd-chart-card:hover,
#car-stat-page .dd-chart-card:hover {
  box-shadow: 0 0 20px rgba(0,245,255,0.25), 0 0 40px rgba(0,245,255,0.08), inset 0 0 25px rgba(0,245,255,0.08);
}

/* 明细页 grid-bg 网格背景（给容器加上） */
#driver-stat-page .detail-kpi-row,
#car-stat-page .detail-kpi-row {
  position: relative;
}
#driver-stat-page .detail-kpi-row::before,
#car-stat-page .detail-kpi-row::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    linear-gradient(rgba(0,240,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,0.025) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  z-index: 0;
}

/* 明细页 KPI 行内的卡片文字要在网格背景之上 */
#driver-stat-page .detail-kpi-card,
#car-stat-page .detail-kpi-card {
  position: relative;
  z-index: 1;
}

/* ====== 美化增强层结束 ====== */

/* ===== Style Block 4 ===== */
@keyframes pulseRing {
  0% { transform: scale(0.5); opacity: 0.6; }
  100% { transform: scale(2); opacity: 0; }
}

/* ===== 可折叠统计卡片容器 ===== */
.collapsible-metrics {
  margin-bottom: 16px;
  border: 1px solid rgba(0, 245, 255, 0.15);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(5, 20, 40, 0.3);
}
.collapsible-metrics-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: linear-gradient(90deg, rgba(0, 245, 255, 0.08), transparent);
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
}
.collapsible-metrics-header:hover {
  background: linear-gradient(90deg, rgba(0, 245, 255, 0.15), transparent);
}
.collapsible-metrics-title {
  color: #00f5ff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1px;
}
.collapsible-metrics-arrow {
  color: #7eb8e0;
  font-size: 10px;
  transition: transform 0.3s ease;
  display: inline-block;
}
.collapsible-metrics:not(.collapsed) .collapsible-metrics-arrow {
  transform: rotate(180deg);
}
.collapsible-metrics-content {
  padding: 12px;
  transition: max-height 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
  max-height: 5000px;
  opacity: 1;
}
.collapsible-metrics.collapsed .collapsible-metrics-content {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}



/* ====== 管理下拉菜单 ====== */
.admin-dropdown {
  position: relative !important;
  display: inline-block !important;
  vertical-align: middle;
}
.admin-dropdown .act-btn {
  display: inline-flex !important;
  align-items: center;
  white-space: nowrap;
}
.admin-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  min-width: 180px;
  background: #0a1929;
  border: 1px solid #00f0ff;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.8);
  z-index: 999999;
  display: none;
  overflow: hidden;
  padding: 4px 0;
}
.admin-dropdown-item {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 16px !important;
  cursor: pointer !important;
  color: #e0e0e0 !important;
  font-size: 13px !important;
  background: transparent !important;
  border: none !important;
  width: 100%;
  box-sizing: border-box;
}
.admin-dropdown-item:hover {
  background: rgba(0, 240, 255, 0.15) !important;
  color: #00f0ff !important;
}
.admin-dropdown-item svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.admin-dropdown.open .dropdown-arrow {
  transform: rotate(180deg);
}

/* ===== 新增：条件格式行着色 ===== */
/* 保险到期30天内 - 淡红色背景 */
tr.row-insurance-warning { background: rgba(239,68,68,0.12) !important; }
tr.row-insurance-warning:hover { background: rgba(239,68,68,0.22) !important; }
/* 审车到期30天内 - 淡红色背景 */
tr.row-inspect-warning { background: rgba(239,68,68,0.10) !important; }
tr.row-inspect-warning:hover { background: rgba(239,68,68,0.20) !important; }
/* 未处理违章 - 淡黄色背景 */
tr.row-violation-pending { background: rgba(245,158,11,0.12) !important; }
tr.row-violation-pending:hover { background: rgba(245,158,11,0.22) !important; }
/* 停运/报废车辆 - 灰色文字 */
tr.row-inactive { color: #6b7280 !important; opacity: 0.7; }
tr.row-inactive td { color: #6b7280 !important; }
/* 维修中车辆 - 淡橙色背景 */
tr.row-repairing { background: rgba(255,140,0,0.12) !important; }
tr.row-repairing:hover { background: rgba(255,140,0,0.22) !important; }

/* ===== 新增：车牌号管理模块 ===== */
.plate-badge {
  display: inline-block; font-size: 10px; padding: 1px 6px; margin: 1px 2px;
  border: 1px solid; border-radius: 8px; white-space: nowrap;
  background: rgba(10,30,55,0.6);
}
.plate-badge-zero {
  opacity: 0.4; border-color: rgba(100,116,139,0.3) !important; color: #64748b !important;
}
.status-tag {
  display: inline-block; font-size: 11px; padding: 2px 10px; border-radius: 10px; font-weight: 600;
}
.status-tag.status-active {
  background: rgba(16,185,129,0.15); color: #10b981; border: 1px solid rgba(16,185,129,0.3);
}
.status-tag.status-repairing {
  background: rgba(245,158,11,0.15); color: #f59e0b; border: 1px solid rgba(245,158,11,0.3);
}
.status-tag.status-stopped {
  background: rgba(107,114,128,0.15); color: #6b7280; border: 1px solid rgba(107,114,128,0.3);
}

/* ===== 新增：司机电话图标 ===== */
a[href^="tel:"] {
  text-decoration: none; margin-left: 3px; font-size: 12px;
}
a[href^="tel:"]:hover { opacity: 0.7; }

/* ===== 新增：验车整改关联字段标记 ===== */
td[title="系统关联字段"] { font-style: italic; }

/* ============================================================
   ====== 数据对比页面 - 侧边栏+内容区布局 ======
   ============================================================ */
.compare-layout {
  display: flex;
  height: calc(100vh - 160px);
  gap: 0;
}

/* 左侧边栏 */
.compare-sidebar-nav {
  width: 200px;
  min-width: 200px;
  background: linear-gradient(180deg, rgba(8,20,42,0.98), rgba(5,15,32,0.95));
  border-right: 1px solid rgba(0,240,255,0.15);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.compare-sidebar-nav::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 1px; height: 100%;
  background: linear-gradient(180deg, transparent, rgba(0,240,255,0.3), transparent);
}
.compare-sidebar-header {
  padding: 20px 16px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(0,240,255,0.1);
}
.compare-sidebar-logo {
  width: 36px; height: 36px;
  border: 2px solid rgba(0,240,255,0.4);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,240,255,0.06);
  font-size: 18px;
  box-shadow: 0 0 12px rgba(0,240,255,0.15);
}
.compare-sidebar-title-text {
  font-size: 15px;
  font-weight: bold;
  color: #00f0ff;
  letter-spacing: 2px;
  text-shadow: 0 0 8px rgba(0,240,255,0.4);
}
.compare-sidebar-menu {
  flex: 1;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.compare-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  color: #8ab4d0;
  font-size: 13px;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  position: relative;
}
.compare-sidebar-item:hover {
  background: rgba(0,240,255,0.08);
  color: #c0e0ff;
  border-color: rgba(0,240,255,0.15);
}
.compare-sidebar-item.active {
  background: linear-gradient(135deg, rgba(0,240,255,0.15), rgba(0,255,136,0.08));
  color: #00f0ff;
  border-color: rgba(0,240,255,0.3);
  font-weight: 600;
  box-shadow: 0 0 12px rgba(0,240,255,0.1);
}
.compare-sidebar-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: #00f0ff;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px rgba(0,240,255,0.5);
}
.compare-sidebar-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
}
.compare-sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(0,240,255,0.1);
}
.compare-sidebar-footer-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,240,255,0.3), transparent);
  margin-bottom: 8px;
}
.compare-sidebar-footer-text {
  font-size: 10px;
  color: #5a7a90;
  text-align: center;
  letter-spacing: 1px;
}

/* 右侧主区域 */
.compare-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* 顶部筛选区 */
.compare-filter-area {
  padding: 16px 20px;
  background: linear-gradient(180deg, rgba(8,20,42,0.6), rgba(5,15,32,0.3));
  border-bottom: 1px solid rgba(0,240,255,0.1);
  flex-shrink: 0;
}
.compare-filter-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.compare-filter-title {
  font-size: 14px;
  font-weight: bold;
  color: #00f0ff;
  padding-left: 12px;
  border-left: 3px solid #00f0ff;
  letter-spacing: 1px;
}
.compare-filter-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.compare-filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.compare-filter-group label {
  font-size: 12px;
  color: #7eb8e0;
  white-space: nowrap;
  min-width: 60px;
}
.compare-filter-select {
  background: rgba(0,240,255,0.05);
  border: 1px solid rgba(0,240,255,0.2);
  border-radius: 6px;
  padding: 6px 10px;
  color: #c0d8f0;
  font-size: 12px;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s;
}
.compare-filter-select:hover,
.compare-filter-select:focus {
  border-color: rgba(0,240,255,0.5);
}
.compare-filter-select option {
  background: #0a1929;
  color: #c0d8f0;
}
.compare-template-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.compare-template-btn {
  padding: 4px 10px;
  font-size: 11px;
  background: rgba(0,240,255,0.08);
  border: 1px solid rgba(0,240,255,0.2);
  border-radius: 4px;
  color: #7eb8e0;
  cursor: pointer;
  transition: all 0.2s;
}
.compare-template-btn:hover {
  background: rgba(0,240,255,0.15);
  border-color: rgba(0,240,255,0.4);
  color: #00f0ff;
}
.compare-items-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.compare-filter-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.compare-add-btn {
  padding: 6px 14px;
  font-size: 12px;
  background: rgba(0,240,255,0.08);
  border: 1px dashed rgba(0,240,255,0.3);
  border-radius: 6px;
  color: #7eb8e0;
  cursor: pointer;
  transition: all 0.2s;
}
.compare-add-btn:hover {
  background: rgba(0,240,255,0.15);
  border-color: rgba(0,240,255,0.5);
  color: #00f0ff;
}
.compare-run-btn {
  padding: 6px 20px;
  font-size: 12px;
  font-weight: bold;
  background: linear-gradient(135deg, rgba(0,240,255,0.2), rgba(0,255,136,0.12));
  border: 1px solid rgba(0,240,255,0.4);
  border-radius: 6px;
  color: #00f0ff;
  cursor: pointer;
  letter-spacing: 1px;
  transition: all 0.2s;
  box-shadow: 0 0 10px rgba(0,240,255,0.1);
}
.compare-run-btn:hover {
  background: linear-gradient(135deg, rgba(0,240,255,0.3), rgba(0,255,136,0.2));
  box-shadow: 0 0 20px rgba(0,240,255,0.2);
}

/* 内容区 */
.compare-content-area {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.compare-content-area::-webkit-scrollbar {
  width: 6px;
}
.compare-content-area::-webkit-scrollbar-track {
  background: rgba(0,240,255,0.03);
}
.compare-content-area::-webkit-scrollbar-thumb {
  background: rgba(0,240,255,0.15);
  border-radius: 3px;
}
.compare-result-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
}
.compare-result-header-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,240,255,0.4), transparent);
}
.compare-result-header-center {
  display: flex;
  align-items: center;
  gap: 12px;
}
.compare-result-header-icon {
  width: 32px; height: 32px;
  border: 2px solid rgba(0,240,255,0.4);
  border-radius: 8px;
  background: rgba(0,240,255,0.06);
  box-shadow: 0 0 12px rgba(0,240,255,0.15);
  position: relative;
}
.compare-result-header-icon::after {
  content: '📊';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
}
.compare-result-main-title {
  font-size: 16px;
  font-weight: bold;
  color: #00f0ff;
  letter-spacing: 2px;
}
.compare-result-sub-title {
  font-size: 11px;
  color: #7eb8e0;
  margin-top: 2px;
}
.compare-result-card {
  padding: 14px;
}
.compare-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.compare-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.compare-charts-row-3 {
  grid-template-columns: 1fr 1fr 1fr;
}

/* 空状态 */
.compare-empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px;
}
.compare-empty-icon {
  font-size: 48px;
  opacity: 0.3;
}
.compare-empty-text {
  font-size: 16px;
  color: #5a7a90;
  letter-spacing: 2px;
}
.compare-empty-hint {
  font-size: 12px;
  color: #3a5a70;
  letter-spacing: 1px;
}

/* KPI item styling (matching report pages) */
.compare-kpi-item {
  background: linear-gradient(135deg, rgba(10,30,60,0.92), rgba(18,45,75,0.78));
  border: 1px solid rgba(0,245,255,0.2);
  border-radius: 8px;
  padding: 12px;
  position: relative;
  overflow: hidden;
  transition: all 0.25s;
}
.compare-kpi-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--neon-cyan), transparent);
  opacity: 0.7;
}
.compare-kpi-item::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(0,245,255,0.04) 0%, transparent 50%);
  pointer-events: none;
}
.compare-kpi-item:hover {
  transform: translateY(-2px);
  border-color: rgba(0,245,255,0.4);
  box-shadow: 0 4px 16px rgba(0,240,255,0.15);
}

/* ============================================================
   ====== 车辆档案页面 - 侧边栏+内容区布局 ======
   ============================================================ */
.va-layout {
  display: flex;
  height: calc(100vh - 160px);
  gap: 0;
}

/* 左侧边栏 */
.va-sidebar-nav {
  width: 200px;
  min-width: 200px;
  background: linear-gradient(180deg, rgba(8,20,42,0.98), rgba(5,15,32,0.95));
  border-right: 1px solid rgba(0,240,255,0.15);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.va-sidebar-nav::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 1px; height: 100%;
  background: linear-gradient(180deg, transparent, rgba(0,240,255,0.3), transparent);
}
.va-sidebar-header {
  padding: 20px 16px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(0,240,255,0.1);
}
.va-sidebar-logo {
  width: 36px; height: 36px;
  border: 2px solid rgba(0,240,255,0.4);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,240,255,0.06);
  font-size: 18px;
  box-shadow: 0 0 12px rgba(0,240,255,0.15);
}
.va-sidebar-title-text {
  font-size: 15px;
  font-weight: bold;
  color: #00f0ff;
  letter-spacing: 2px;
  text-shadow: 0 0 8px rgba(0,240,255,0.4);
}
.va-sidebar-menu {
  flex: 1;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.va-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  color: #8ab4d0;
  font-size: 13px;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  position: relative;
}
.va-sidebar-item:hover {
  background: rgba(0,240,255,0.08);
  color: #c0e0ff;
  border-color: rgba(0,240,255,0.15);
}
.va-sidebar-item.active {
  background: linear-gradient(135deg, rgba(0,240,255,0.15), rgba(0,255,136,0.08));
  color: #00f0ff;
  border-color: rgba(0,240,255,0.3);
  font-weight: 600;
  box-shadow: 0 0 12px rgba(0,240,255,0.1);
}
.va-sidebar-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: #00f0ff;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px rgba(0,240,255,0.5);
}
.va-sidebar-icon {
  font-size: 16px;
  width: 20px;
  text-align: center;
}
.va-sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(0,240,255,0.1);
}
.va-sidebar-footer-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,240,255,0.3), transparent);
  margin-bottom: 8px;
}
.va-sidebar-footer-text {
  font-size: 10px;
  color: #5a7a90;
  text-align: center;
  letter-spacing: 1px;
}

/* 右侧主区域 */
.va-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* 顶部操作栏 */
.va-filter-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: linear-gradient(180deg, rgba(8,20,42,0.6), rgba(5,15,32,0.3));
  border-bottom: 1px solid rgba(0,240,255,0.1);
  flex-shrink: 0;
  gap: 16px;
}
.va-filter-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.va-page-title {
  font-size: 16px;
  font-weight: bold;
  color: #00f0ff;
  letter-spacing: 2px;
  text-shadow: 0 0 8px rgba(0,240,255,0.3);
}
.va-page-subtitle {
  font-size: 11px;
  color: #5a7a90;
}
.va-filter-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.va-filter-select {
  background: rgba(0,240,255,0.05);
  border: 1px solid rgba(0,240,255,0.2);
  border-radius: 6px;
  padding: 6px 10px;
  color: #c0d8f0;
  font-size: 12px;
  outline: none;
  cursor: pointer;
}
.va-filter-select:hover,
.va-filter-select:focus {
  border-color: rgba(0,240,255,0.5);
}
.va-filter-select option {
  background: #0a1929;
  color: #c0d8f0;
}
.va-filter-input {
  background: rgba(0,240,255,0.05);
  border: 1px solid rgba(0,240,255,0.2);
  border-radius: 6px;
  padding: 6px 10px;
  color: #c0d8f0;
  font-size: 12px;
  outline: none;
  width: 180px;
}
.va-filter-input::placeholder {
  color: #5a7a90;
}
.va-filter-input:focus {
  border-color: rgba(0,240,255,0.5);
}
.va-action-btn {
  padding: 6px 12px;
  font-size: 12px;
  background: rgba(0,240,255,0.08);
  border: 1px solid rgba(0,240,255,0.2);
  border-radius: 6px;
  color: #7eb8e0;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.va-action-btn:hover {
  background: rgba(0,240,255,0.15);
  border-color: rgba(0,240,255,0.4);
  color: #00f0ff;
}

/* 内容区 */
.va-content-area {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}
.va-content-area::-webkit-scrollbar {
  width: 6px;
}
.va-content-area::-webkit-scrollbar-track {
  background: rgba(0,240,255,0.03);
}
.va-content-area::-webkit-scrollbar-thumb {
  background: rgba(0,240,255,0.15);
  border-radius: 3px;
}

/* KPI cards grid for vehicle archive */
.va-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

/* Charts grid for vehicle archive */
.va-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

/* Vehicle table styling */
.va-table-card {
  position: relative;
  background: linear-gradient(135deg, rgba(8,20,40,0.95), rgba(12,32,58,0.9));
  border: 1px solid rgba(0,245,255,0.15);
  border-radius: 6px;
  padding: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  overflow: hidden;
}
.va-table-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 20px; height: 3px;
  background: linear-gradient(90deg, #00f5ff, transparent);
}
.va-table-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 20px;
  background: linear-gradient(180deg, #00f5ff, transparent);
}

/* ============================================================
   ====== 全局移动端适配（≤768px）追加块 ======
   说明：仅在窄屏生效，PC(>768px)布局不受影响；
        只调整CSS布局，不改动任何业务逻辑JS与功能元素。
   ============================================================ */
@media (max-width: 768px) {

  /* body 原本为固定头部预留了110px，移动端头部更矮，收窄避免大片空白 */
  body { padding-top: 64px !important; }

  /* 1. 模态框全屏化：移动端弹窗占满整屏，便于查看与操作 */
  .modal-overlay .modal-box {
    width: 100%;
    max-width: 100vw;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
    margin: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px;
    overflow-y: auto;
  }

  /* 2. 按钮触摸友好：最小点击高度44px，字号不小于13px */
  .btn, .act-btn, .detail-btn, .period-btn, .page-btn, .modal-btn {
    min-height: 44px;
    font-size: 13px;
    padding: 8px 14px;
  }

  /* 3. 输入框/下拉框触摸友好：14px防止iOS聚焦自动缩放 */
  input, select, textarea {
    min-height: 44px;
    font-size: 14px;
  }

  /* 4. 表格横向滚动：无wrapper时让表格本身可横向滑动 */
  .data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 5. 页面头部：高度自适应，标题缩小并回到正常文档流 */
  .page-header {
    height: auto;
    min-height: 48px;
    padding: 8px 12px;
  }
  .page-header h1 {
    position: static;
    transform: none;
    font-size: 16px;
    white-space: normal;
  }

  /* 6. 顶部导航栏及其子元素在移动端纵向占满整行宽度 */
  .top-bar,
  .top-control,
  .period-switch,
  .page-switch,
  .action-btns {
    width: 100%;
  }

  /* 7. 主内容区：左右收窄留白，顶部按移动端头部高度预留 */
  .main-content {
    padding: 8px !important;
    padding-top: 8px !important;
  }

  /* 8. 日期选择面板：贴边全宽展开 */
  .date-picker-panel {
    width: 100%;
    left: 0;
    right: 0;
    max-width: none;
  }

  /* 9. 下拉菜单：宽度贴合屏幕，过高时内部滚动 */
  .detail-dropdown,
  .admin-dropdown-menu {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: 60vh;
    overflow-y: auto;
  }

  /* 10. Toast：左右留安全边距 */
  .toast-container {
    left: 8px;
    right: 8px;
    width: auto;
  }
}