.d-icon-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-1);
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--color-bg-input);
  backdrop-filter: var(--blur-sm);
  border: var(--token-border-1) solid var(--color-border-primary-strong);
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  font-size: 14px;
  cursor: pointer;
  transition: all var(--transition-normal);
  min-width: 80px;
  box-shadow: var(--shadow-button);
}

.d-icon-button svg {
  flex-shrink: 0;
  color: var(--color-text-primary);
  width: 24px;
  height: 24px;
}

.d-icon-button:hover {
  background: var(--color-bg-hover-strong);
  border-color: var(--color-border-primary-vivid);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-button-hover);
}

.d-icon-button-active {
  background: var(--color-primary-active);
  border-color: var(--color-border-primary-vivid);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-glow-primary-strong);
}

.d-icon-button-active:hover {
  background: var(--color-primary-active-strong);
  border-color: var(--color-border-primary-solid);
}.map-control {
  position: fixed;
  bottom: 32px;
  right: 32px;
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  z-index: 999;
  /* background: rgba(255, 0, 0, 0.1); */
}

.map-control-inner {
  display: flex;
  gap: var(--spacing-3);
  transition: transform var(--transition-normal), opacity var(--transition-normal);
}

.map-control-inner-collapsed {
  transform: translateX(calc(100% + 32px));
  opacity: 0;
  pointer-events: none;
}

.map-control-toggle {
  flex-shrink: 0;
  order: 1;
}

.map-control-inner {
  order: 0;
}.panel-modal-dialog-bg {
  background: rgba(11, 27, 45, 0.75);
  border: 1px solid rgba(111, 121, 131, 0.3);
  border-radius: 10px;
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  box-shadow: var(--shadow-panel);
}.ai-assistant-wrapper {
  position: absolute;
  top: 200px;
  bottom: 150px;
  right: 32px;
  display: flex;
  align-items: flex-start;
  z-index: var(--z-sticky);
}

.ai-assistant-wrapper.is-sim-mode {
  bottom: 60px;
}

.ai-assistant-wrapper.collapsed {
  pointer-events: none;
}

.ai-assistant-panel {
  width: 882px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-slow), opacity var(--transition-slow);
  position: relative;
}

.ai-assistant-panel.collapsed {
  transform: translateX(920px);
  opacity: 0;
  pointer-events: none;
}

.ai-header {
  padding: var(--spacing-4) var(--spacing-5);
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.ai-header .d-section-title {
  margin: 0;
}

/* Chat Area */
.ai-chat-area {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-6);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
}

.ai-chat-area::-webkit-scrollbar {
  width: 4px;
}

.ai-chat-area::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
}

/* Messages */
.chat-row {
  display: flex;
  gap: var(--spacing-4);
  align-items: flex-start;
  animation: slideIn var(--transition-slow);
}

.chat-row.user {
  flex-direction: row-reverse;
}

.avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  transition: transform 120ms ease-out;
}

.chat-row:hover .avatar {
  transform: scale(1.05);
}

.avatar.ai {
  background: transparent;
  /* border-color: rgba(255, 255, 255, 0.2); */
  transition: transform 120ms ease-out;
}

.avatar.user {
  background: linear-gradient(135deg, #0ea5e9 0%, #22d3ee 100%);
  border-color: rgba(255, 255, 255, 0.2);
  
}

/* 用户头像去掉外边框与底色 */
.chat-row.user .avatar {
  border: none;
  background: transparent;
  box-shadow: none;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.message-bubble {
  max-width: 75%;
  padding: var(--spacing-4) var(--spacing-5);
  font-size: var(--font-size-md);
  line-height: 1.6;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  letter-spacing: 0.3px;
}

.chat-row.ai .message-bubble {
  color: var(--token-gray-100);
  background: rgba(30, 41, 59, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px 24px 24px 24px;
  backdrop-filter: blur(12px);
  color: #fff;
}

.chat-row.user .message-bubble {
  background: rgba(0, 247, 255, 0.5);
  border: none;
  color: #ffffff;
  border-radius: 24px 4px 24px 24px;
  font-weight: 400;
}

/* Code Block Style */
.code-block {
  font-size: 14px;
  background: #0f172a;
  padding: var(--spacing-4);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  white-space: pre-wrap;
  margin-top: var(--spacing-2);
  line-height: 1.6;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

/* Status Card */
.status-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(6, 182, 212, 0.05);
  border: 1px solid rgba(6, 182, 212, 0.2);
  padding: var(--spacing-3) var(--spacing-5);
  border-radius: 100px;
  min-width: 320px;
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.1);
  backdrop-filter: blur(4px);
}

.status-text {
  color: #67e8f9;
  font-size: var(--font-size-base);
  font-weight: 500;
  letter-spacing: 0.5px;
}

.status-icon {
  margin-left: var(--spacing-4);
  display: flex;
  align-items: center;
}

.status-icon svg {
  width: 24px;
  height: 24px;
}

/* Loading Spinner */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(6, 182, 212, 0.2);
  border-top-color: #67e8f9;
  border-radius: var(--radius-full);
  animation: spin 1s linear infinite;
}

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

/* Input Area Redesign */
.ai-input-area {
  padding: var(--spacing-5);
  background: transparent;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.ai-input-container {
  background: rgba(13, 20, 36, 0.5);
  border: var(--token-border-1) solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  padding: var(--spacing-4);
  display: flex;
  flex-direction: column;
  position: relative;
  backdrop-filter: var(--blur-lg);
}

.ai-input-container:focus-within {
  border-color: var(--color-primary-muted);
}

.ai-input {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  outline: none;
  resize: none;
  min-height: 48px;
  max-height: 240px;
  line-height: 1.5;
}

.ai-input::placeholder {
  color: var(--color-text-disabled);
}

.ai-input-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--spacing-2);
}

.ai-action-btns {
  display: flex;
  gap: var(--spacing-3);
}

.ai-action-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  padding: 8px 16px;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  gap: var(--spacing-1-5);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.ai-action-btn:hover {
  background: rgba(6, 182, 212, 0.1);
  border-color: var(--color-primary-muted);
  color: var(--color-primary-light);
}

.ai-action-btn.active {
  background: rgba(6, 182, 212, 0.2);
  border-color: var(--color-primary);
  color: var(--color-primary-light);
  box-shadow: 0 0 12px rgba(6, 182, 212, 0.25);
}

.ai-send-btn-pill {
  background: rgba(6, 182, 212, 0.05);
  border: 1px solid rgba(6, 182, 212, 0.8);
  border-radius: 100px;
  padding: 8px 48px;
  color: #67e8f9;
  font-size: var(--font-size-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  cursor: pointer;
  transition: all var(--transition-normal);
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.3);
}

.ai-send-btn-pill:hover:not(:disabled) {
  background: rgba(6, 182, 212, 0.15);
  box-shadow: 0 0 25px rgba(6, 182, 212, 0.5);
}

.ai-send-btn-pill:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--color-text-disabled);
}.d-section-title {
  display: flex;
  align-items: center;
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  font-weight: normal;
  font-style: normal;
  padding-bottom: var(--spacing-2);
  margin-bottom: var(--spacing-5);
  margin-top: var(--spacing-3);
  position: relative;
}

/* 前段：固定宽度，固定颜色 */
.d-section-title::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--color-primary);
  box-shadow:
    0 0 6px rgba(6, 182, 212, 0.8),
    0 0 12px rgba(6, 182, 212, 0.4);
}

/* 后段：百分比宽度，灰色渐变透明 */
.d-section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 30px;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--color-border-default) 0%,
    transparent 100%
  );
}

.d-section-icon {
  color: var(--color-primary);
  margin-right: var(--spacing-2);
  transform: translateY(1px);
  width: 32px;
  height: 32px;
}

.ai-elf-float {
  position: absolute;
  z-index: var(--z-popover);
  width: 100px;
  height: 132px;
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition: transform var(--transition-normal);
}

.ai-elf-float:hover {
  transform: scale(1.1);
}

.ai-elf-float:active,
.ai-elf-float.ai-elf-dragging {
  cursor: grabbing;
  transform: scale(1);
  transition: none;
}

.ai-elf-float img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 8px 32px rgba(6, 182, 212, 0.5));
}.d-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: var(--z-popover);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.d-modal-container {
  pointer-events: auto;
  /* 统一弹框背景为 #0B1B2D，透明度 70% */
  background: rgba(11, 27, 45, 0.7);
  border: 1px solid rgba(111, 121, 131, 0.3);
  border-radius: 10px;
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  box-shadow: var(--shadow-panel);
  display: flex;
  flex-direction: column;
  animation: scaleIn var(--transition-slow);
  color: var(--color-text-primary);
  overflow: hidden;
}

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

.d-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-4) var(--spacing-6);
  border-bottom: var(--token-border-1) solid var(--color-border-subtle);
  flex-shrink: 0;
}

.d-modal-header-left {
  display: flex;
  align-items: center;
}

.d-modal-icon {
  margin-right: var(--spacing-2-5);
  color: var(--color-primary);
}

.d-modal-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: 0.5px;
  text-shadow: var(--text-shadow-glow);
}

.d-modal-close-btn {
  color: var(--color-text-subtle);
  cursor: pointer;
  transition: all var(--transition-normal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-1);
  border-radius: var(--radius-sm);
}

.d-modal-close-btn:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-hover-strong);
}

.d-modal-content {
  flex: 1;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.d-modal-footer {
  padding: var(--spacing-4) var(--spacing-6);
  border-top: var(--token-border-1) solid var(--color-border-subtle);
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-3);
  flex-shrink: 0;
}.d-loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg-overlay-heavy);
  backdrop-filter: var(--blur-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  z-index: var(--z-top);
  animation: fadeIn var(--transition-normal);
}

.d-loading-spinner {
  width: 48px;
  height: 48px;
  border: var(--token-border-4) solid var(--color-primary-muted);
  border-top-color: var(--color-primary);
  border-radius: var(--radius-full);
  animation: spin 1s linear infinite;
  box-shadow: var(--shadow-glow-primary-faint);
}

.d-loading-text {
  font-size: var(--font-size-lg);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  letter-spacing: 1px;
  text-shadow: var(--text-shadow-dark);
}

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

@keyframes dLoadingFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* 全局布局已移至 Grid布局组件.css */

.dp-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  font-style: italic;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-2);
  display: flex;
  align-items: center;
  text-shadow: 0 0 8px rgba(6, 182, 212, 0.4);
}

.dp-title::before {
  content: '//';
  color: var(--color-primary);
  margin-right: var(--spacing-2);
  font-weight: var(--font-weight-extrabold);
  font-size: var(--font-size-xl);
  animation: dp-glow-text 2s ease-in-out infinite alternate;
}

@keyframes dp-glow-text {
  from { text-shadow: 0 0 4px rgba(6, 182, 212, 0.4); }
  to { text-shadow: 0 0 12px rgba(6, 182, 212, 0.8), 0 0 20px rgba(6, 182, 212, 0.4); }
}

/* === SVG 图表容器 === */
.dp-chart-wrapper {
  position: relative;
  width: 100%;
  margin-top: var(--spacing-2);
}

.dp-chart-svg {
  width: 100%;
  height: 180px;
  overflow: visible;
}

.dp-svg-rect {
  transition: height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), y 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dp-svg-rect:hover {
  filter: brightness(1.3) drop-shadow(0 0 5px var(--color-primary));
}

.dp-chart-y-axis-labels {
  position: absolute;
  left: -20px;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 10px;
  color: var(--color-text-disabled);
  pointer-events: none;
}

/* === 图例与间距 === */
.dp-chart-legend {
  display: flex;
  gap: var(--spacing-4);
  justify-content: flex-end;
  margin-bottom: var(--spacing-3); /* 增加图例与图表的间距 */
}

.dp-legend-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-1-5);
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.dp-legend-item:hover {
  color: var(--color-text-primary);
}

.dp-legend-color {
  width: 10px; height: 10px;
  border-radius: 2px;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

/* === 列表项 === */
.dp-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: var(--spacing-2);
  padding: var(--spacing-2-5);
  border-radius: var(--radius-sm);
  border-left: var(--token-border-2) solid transparent;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.dp-info-row {
  display: flex;
  align-items: center; /* 图标在整行内垂直居中 */
  gap: var(--spacing-3);
}

.dp-info-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.dp-info-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.dp-list-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-left-color: var(--color-primary);
  transform: translateX(4px);
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.2);
}

/* 列表项流动扫光 */
.dp-list-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  transition: 0.5s;
}

.dp-list-item:hover::after {
  left: 100%;
  transition: 0.8s;
}

.dp-list-icon-box {
  width: 32px; height: 32px;
  background: var(--color-primary-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  margin-right: var(--spacing-3);
  box-shadow: inset 0 0 8px rgba(6, 182, 212, 0.2);
}

.dp-list-content {
  flex: 1;
}

.dp-list-title {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-1);
}

.dp-list-sub {
  font-size: var(--font-size-2xs);
  color: var(--color-text-disabled);
}

.dp-tag-row {
  display: flex;
  gap: var(--spacing-2);
  font-size: var(--font-size-2xs);
}

.dp-info-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-4);
}

.dp-info-metrics {
  display: flex;
  justify-content: space-between; /* 左下角 / 右下角 */
  align-items: flex-end;
  gap: var(--spacing-8);
  white-space: nowrap;
}

.dp-info-col {
  display: flex;
  flex-direction: row;        /* 互操作前/后 与数值同一行 */
  align-items: center;
  gap: var(--spacing-1);
}

.dp-info-label {
  font-size: var(--font-size-2xs);
  color: #22d3ee;
}

.dp-info-value {
  font-size: var(--font-size-xs);
  color: #fff;
}

.dp-tag-val {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

/* === 可滚动列表容器 === */
.dp-scrollable-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding-right: 4px;
}

/* === 表格 === */
.dp-table-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.dp-table-header-box {
  flex-shrink: 0;
  background: var(--color-bg-table-header);
  z-index: 2;
}

.dp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-md); /* 统一为左侧面板表格字号 */
  table-layout: fixed; /* 固定布局，防止内容撑开产生左右滚动条 */
}

.dp-table th {
  text-align: center;
  color: var(--color-primary);
  padding: var(--spacing-2);
  border-bottom: none;
  font-weight: normal;
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 场景列表头不需要省略号，保证“场景”两字完整展示 */
.dp-table th:first-child {
  text-overflow: clip;
}

.dp-table td {
  text-align: center; /* 统一居中对齐 */
  padding: var(--spacing-2);
  border-bottom: none;
  color: var(--color-text-tertiary);
  font-weight: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.dp-table tr:hover td {
  background: rgba(6, 182, 212, 0.08);
  color: var(--color-text-primary);
}

/* === 自动滚动动画核心实现 === */
.dp-table-scroll-body {
  flex: 1;
  overflow-y: auto; /* 核心修改：改为 auto 允许滚动条 */
  min-height: 0;
  position: relative;
}

/* 自定义滚动条样式 */
.dp-table-scroll-body::-webkit-scrollbar {
  width: 6px;
}

.dp-table-scroll-body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.dp-table-scroll-body::-webkit-scrollbar-thumb {
  background: rgba(6, 182, 212, 0.3);
  border-radius: 3px;
}

.dp-table-scroll-body::-webkit-scrollbar-thumb:hover {
  background: rgba(6, 182, 212, 0.5);
}

.dp-table-scroll-content {
  display: flex;
  flex-direction: column;
}

.dp-table-auto-scroll .dp-table-scroll-content {
  animation: dp-seamless-scroll 120s linear infinite;
}

/* 鼠标悬停时暂停动画 */
.dp-table-auto-scroll:hover .dp-table-scroll-content {
  animation-play-state: paused;
}

@keyframes dp-seamless-scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* === 运行效率表格：每 5 条分组加空隙与渐变分割线（纯背景实现，不影响布局宽度） === */
.dp-table-efficiency tbody tr:nth-child(5n) td {
  padding-bottom: calc(var(--spacing-2) * 2);
}

.dp-table-efficiency tbody tr:nth-child(5n) {
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.7),
    rgba(255, 255, 255, 0)
  );
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% 2px; /* 占整行宽度，高度 2px */
}

/* 场景图标单元格样式（表格最左侧） */
.dp-scene-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
}

.dp-scene-icon {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.dp-scene-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.dp-scene-text {
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
  white-space: nowrap;
}

/* === 链条卡片 === */
.dp-chain-card {
  display: flex;
  align-items: center;
  background: var(--color-bg-card-solid);
  border: var(--token-border-1) solid var(--color-border-muted);
  border-radius: var(--radius-md);
  padding: var(--spacing-2-5);
  margin-bottom: var(--spacing-2-5);
  transition: all var(--transition-normal);
}

.dp-chain-card:hover {
  border-color: var(--color-info);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.dp-chain-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  background: rgba(59, 130, 246, 0.15);
  color: var(--color-info);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--spacing-3);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
}

.dp-chain-info {
  flex: 1;
}

.dp-chain-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--spacing-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.dp-chain-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-2xs);
  color: var(--color-text-subtle);
}

.dp-status-good { 
  color: var(--color-success); 
  text-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

/* === 简易折线图 === */
.dp-line-chart {
  width: 100%;
  height: 120px;
  position: relative;
  border-left: var(--token-border-1) solid var(--color-border-muted);
  border-bottom: var(--token-border-1) solid var(--color-border-muted);
  margin-top: var(--spacing-2);
}

.dp-line-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.dp-line-path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke-dashoffset 2s ease-in-out;
}

.dp-line-axis-label {
  font-size: var(--font-size-2xs);
  fill: var(--color-text-disabled);
}

.dp-export-pdf-btn {
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  padding: 12px 36px;
  font-size: 28px;
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition-normal);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.dp-export-pdf-btn:hover {
  background: var(--color-primary);
  color: #fff;
  /* box-shadow: 0 0 20px var(--color-primary); */
}

/* 信息发布表格专有样式，用于隐藏表头并适配原本的 list-item 风格 */
.dp-info-table .dp-table-header-box {
  display: none;
}

.dp-info-table .dp-table td {
  text-align: left;
  padding: 0;
  border: none;
  background: transparent;
}

.dp-info-table .dp-table tr {
  background: transparent;
}

.dp-info-table .dp-table tr:hover td {
  background: transparent;
}

.dp-info-row-cell {
  width: 100%;
  padding: var(--spacing-1) 0;
}.chart-container {
  width: 100%;
  height: 100%;
  min-height: 120px;
}/* 通用卡片基础样式 */
.dp-card {
  background: var(--color-bg-card);
  border: var(--token-border-1) solid rgba(6, 182, 212, 0.15);
  border-radius: var(--radius-md);
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 0px;
  padding-bottom: 0px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
  overflow: hidden; /* 确保内部扫描动效不溢出 */
  transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

/* 数据流动动效背景 */
.dp-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(6, 182, 212, 0.03) 45%,
    rgba(6, 182, 212, 0.08) 50%,
    rgba(6, 182, 212, 0.03) 55%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
  animation: dp-card-scan 8s linear infinite;
}

/* 装饰性边角光效 */
.dp-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 15px rgba(6, 182, 212, 0.05);
  pointer-events: none;
  z-index: 1;
}

.dp-card:hover {
  border-color: rgba(6, 182, 212, 0.4);
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.1), inset 0 0 25px rgba(6, 182, 212, 0.05);
}

@keyframes dp-card-scan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(50%); }
}

/* 加载状态样式 */
.dp-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(13, 24, 37, 0.6);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  backdrop-filter: blur(2px);
}

.dp-loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(6, 182, 212, 0.1);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: dp-spin 0.8s linear infinite;
}

@keyframes dp-spin {
  to {
    transform: rotate(360deg);
  }
}/* 封装的网格布局样式 */
.dp-grid-container {
  display: grid;
  gap: var(--spacing-3);
  margin: 16px;
  color: var(--color-text-primary);
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.dp-grid-item {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  box-sizing: border-box;
  /* 每个网格卡片外层描边：浅白色 */
  border: var(--token-border-1) solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-md);
  /* 入场交错动画 */
  animation: dp-grid-item-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--idx, 0) * 0.05s);
}

@keyframes dp-grid-item-in {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dp-grid-item > * {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}.global-metrics-panel {
  display: flex;
  flex-direction: column;
}

.metrics-header-wrapper {
  padding: var(--spacing-4) var(--spacing-5) 0 var(--spacing-5);
}

.metrics-header-wrapper .d-section-title {
  margin-top: 0;
  margin-bottom: 0;
}

.metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-3) var(--spacing-3);
  padding: var(--spacing-4) var(--spacing-5) var(--spacing-1) var(--spacing-5);
}

.metric-item {
  display: flex;
  align-items: center;
  width: 360px;
  height: 124px;
  padding: 0 var(--spacing-4);
  box-sizing: border-box;
  position: relative;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.metric-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding-left: var(--spacing-10);
}

.metric-label {
  font-size: var(--font-size-md);
  color: #00f7ff;
  margin-bottom: 0;
  white-space: nowrap;
}

.metric-value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: #ffffff;
  line-height: 1.2;
}.scene-metrics-modal-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
  padding: var(--spacing-1);
  color: var(--color-text-primary);
}

/* 顶部比对区域特殊样式 */
.smp-comparison-section {
  height: 100%;
}

.smp-comparison-body {
  display: flex;
  gap: var(--spacing-12);
  align-items: center;
  justify-content: center;
  height: calc(100% - 48px);
  padding: 0 var(--spacing-8);
  background: linear-gradient(rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.7)), 
              url('/assets/images/traffic-bg.jpg') center/cover no-repeat;
}

.smp-metrics-group,
.smp-bars-group {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: var(--spacing-5) var(--spacing-10);
  background: rgba(15, 23, 42, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(8px);
}

.smp-metrics-group {
  align-items: center;
  gap: var(--spacing-10);
}

.smp-metric-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.smp-metric-value {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
}

.smp-metric-value.cyan { color: #22d3ee; }
.smp-metric-value.green { color: #4ade80; }
.smp-metric-value.blue { color: #38bdf8; }
.smp-metric-value.yellow { color: var(--color-warning); }

.smp-metric-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--spacing-1);
}

.smp-bars-group {
  flex-direction: column;
  gap: var(--spacing-4);
  align-items: center;
}

.smp-bar-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  width: 100%;
  max-width: 600px;
}

.smp-bar-label {
  width: 100px;
  font-size: var(--font-size-sm);
  color: #fff;
  text-align: right;
}

.smp-bar-track {
  flex: 1;
  height: 20px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}

.smp-bar-fill {
  height: 100%;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: var(--spacing-2);
  transition: width var(--transition-slower);
}

.smp-bar-fill.cyan {
  background: linear-gradient(90deg, #0891b2, #22d3ee);
}

.smp-bar-fill.blue {
  background: linear-gradient(90deg, #0284c7, #38bdf8);
}

.smp-bar-value {
  font-size: var(--font-size-xs);
  font-weight: normal;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

.smp-bar-value-right {
  min-width: 60px;
  text-align: left;
}

/* 下方图表区域 */
.smp-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-5);
}

/* 合并后的卡片内容容器 */
.smp-combined-card-content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.smp-chart-wrapper {
  flex: 1;
  min-height: 0;
}

/* 柱状图 */
.smp-bar-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-3);
}

.smp-chart-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}

.smp-legend {
  display: flex;
  gap: var(--spacing-3);
}

.smp-legend-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
}

.smp-legend-color {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-xs);
}

.smp-bar-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 140px;
  padding: 0 var(--spacing-2);
  border-left: var(--token-border-1) solid var(--color-border-muted);
  border-bottom: var(--token-border-1) solid var(--color-border-muted);
  position: relative;
}

.smp-bar-chart-y-axis {
  position: absolute;
  left: -24px;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: var(--font-size-2xs);
  color: var(--color-text-disabled);
}

.smp-bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-1-5);
}

.smp-bar-bars {
  display: flex;
  gap: var(--spacing-0-5);
  align-items: flex-end;
  height: 120px;
}

.smp-bar {
  width: 14px;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  transition: height var(--transition-slow);
}

.smp-bar-x-label {
  font-size: var(--font-size-2xs);
  color: var(--color-text-subtle);
  white-space: nowrap;
}

.smp-unified-footer {
  display: flex;
  justify-content: center;
  gap: var(--spacing-8);
  padding: 8px 32px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 100px;
  margin: var(--spacing-2) auto var(--spacing-4);
  align-items: center;
  width: fit-content;
  backdrop-filter: blur(8px);
}

.smp-footer-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
}

.smp-footer-label {
  color: var(--color-text-primary);
}

.smp-footer-value {
  color: #22d3ee;
  font-weight: var(--font-weight-bold);
}

/* 折线图 */
.smp-line-chart-container {
  height: 140px;
  position: relative;
  border-left: var(--token-border-1) solid var(--color-border-muted);
  border-bottom: var(--token-border-1) solid var(--color-border-muted);
  margin-bottom: var(--spacing-2);
}

.smp-line-chart-container svg {
  width: 100%;
  height: 100%;
}

.smp-line-chart-x-labels {
  display: flex;
  justify-content: space-between;
  padding: 0 var(--spacing-2);
  font-size: var(--font-size-2xs);
  color: var(--color-text-subtle);
}.scene-metrics-panel {
  display: flex;
  flex-direction: column;
  position: relative;
}

.scene-metrics-header-wrapper {
  padding: var(--spacing-3) var(--spacing-5) 0 var(--spacing-5);
}

.scene-metrics-header-wrapper .d-section-title {
  margin-top: 0;
  margin-bottom: var(--spacing-3);
}

/* HUD 容器 */
.scene-metrics-hud {
  position: relative;
  padding: var(--spacing-4) var(--spacing-3);
  margin: 0 var(--spacing-4);
  border-radius: var(--radius-lg);
  overflow: hidden;
  
  background: 
    linear-gradient(rgba(6, 182, 212, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6, 182, 212, 0.03) 1px, transparent 1px),
    radial-gradient(ellipse at center, rgba(6, 182, 212, 0.05) 0%, transparent 70%);
  background-size: 20px 20px, 20px 20px, 100% 100%;
  background-position: center center;
}

/* 滑动容器 */
.scene-metrics-slider {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
}

/* 单页容器 */
.scene-metrics-page {
  flex-shrink: 0;
  width: 100%;
  position: relative;
}

/* 四象限网格布局 */
.scene-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  position: relative;
  min-height: 200px;
}

/* 十字分割线容器 */
.scene-metrics-crosshair {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.scene-metrics-crosshair::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(6, 182, 212, 0.3) 15%,
    rgba(6, 182, 212, 0.6) 50%,
    rgba(6, 182, 212, 0.3) 85%,
    transparent 100%
  );
}

.scene-metrics-crosshair::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(6, 182, 212, 0.3) 15%,
    rgba(6, 182, 212, 0.6) 50%,
    rgba(6, 182, 212, 0.3) 85%,
    transparent 100%
  );
}

/* 四个指标区域 */
.scene-metric-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-4);
  position: relative;
  z-index: 3;
}

/* 离十字线拉开，并根据需求微调位置 */
.scene-metric-item:nth-child(1) { transform: translate(-5%, -5%); }  
.scene-metric-item:nth-child(2) { transform: translate(5%, -5%); }  
.scene-metric-item:nth-child(3) { transform: translate(-5%, 5%); }  
.scene-metric-item:nth-child(4) { transform: translate(5%, 5%); }   

.scene-metric-clickable {
  cursor: pointer;
  transition: all var(--transition-normal);
  border-radius: var(--radius-md);
}

.scene-metric-clickable:hover {
  background: rgba(6, 182, 212, 0.08);
}

.scene-metric-clickable:active {
  background: rgba(6, 182, 212, 0.12);
}

.scene-metric-value {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  color: rgb(6, 182, 212);
  line-height: 1.1;
  letter-spacing: 1px;
}

.scene-metric-unit {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: rgb(5, 145, 169);
  margin-left: var(--spacing-1);
  letter-spacing: 0.5px;
}

.scene-metric-label {
  font-size: var(--font-size-base);
  color: rgb(180, 180, 180);
  text-align: center;
  white-space: nowrap;
  margin-top: var(--spacing-2);
  letter-spacing: 1px;
  font-weight: var(--font-weight-normal);
}

/* 分页控制 */
.scene-metrics-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  padding: var(--spacing-3) 0 var(--spacing-4) 0;
}

.scene-metrics-page-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: rgba(6, 182, 212, 0.1);
  border: 1px solid rgba(6, 182, 212, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-normal);
  padding: 0;
  flex-shrink: 0;
}

.scene-metrics-page-btn svg {
  width: 14px;
  height: 14px;
  color: rgba(6, 182, 212, 0.8);
}

.scene-metrics-page-btn:hover {
  background: rgba(6, 182, 212, 0.2);
  border-color: rgba(6, 182, 212, 0.5);
}

.scene-metrics-page-dots {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.scene-metrics-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: rgba(6, 182, 212, 0.2);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.scene-metrics-dot.active {
  background: rgb(6, 182, 212);
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.5);
  width: 20px;
  border-radius: 4px;
}

.scene-metrics-dot:hover:not(.active) {
  background: rgba(6, 182, 212, 0.4);
}.sim-record-modal-content {
  height: 100%;
  padding: var(--spacing-1) var(--spacing-1) var(--spacing-4);
  box-sizing: border-box;
}

/* 本弹框中不需要 GridContainer 的大外边框 */
.sim-record-modal-content .dp-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--spacing-3);
  height: 100%;
}

.sim-record-modal-content .dp-grid-item {
  border: none;
  border-radius: 0;
}

/* 各个卡片单独使用浅白色边框 */
.sim-record-modal-content .dp-card {
  border: var(--token-border-1) solid rgba(255, 255, 255, 0.25);
}

.sim-record-column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
}

/* 左列：上 35%，下两个各 32.5% */
.sim-record-column--left > *:nth-child(1) {
  flex: 0 0 35%;
  min-height: 0;
  overflow: hidden;
}

.sim-record-column--left > *:nth-child(2),
.sim-record-column--left > *:nth-child(3) {
  flex: 0 0 32.5%;
  min-height: 0;
  overflow: hidden;
}

/* 中间、右列：上下各 50% */
.sim-record-column--middle > *,
.sim-record-column--right > * {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* 柱状图容器 */
.sim-bar-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 160px;
  padding: var(--spacing-4) var(--spacing-2) var(--spacing-2);
  border-bottom: var(--token-border-1) solid var(--color-border-muted);
  position: relative;
}

.sim-bar-chart-y-axis {
  position: absolute;
  left: 0;
  top: var(--spacing-4);
  bottom: var(--spacing-2);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: var(--font-size-2xs);
  color: var(--color-text-disabled);
  padding-right: var(--spacing-1);
}

.sim-bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-2);
}

.sim-bar-bars {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 120px;
}

.sim-bar {
  width: 12px;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  transition: height var(--transition-slow);
}

.sim-bar-label {
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
  text-align: center;
  white-space: nowrap;
}

/* 图例 */
.sim-legend {
  display: flex;
  gap: var(--spacing-4);
  justify-content: flex-end;
  margin-bottom: var(--spacing-2);
}

.sim-legend-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
}

.sim-legend-color {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-xs);
}

/* 表格 */
.sim-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
  table-layout: fixed;
}

.sim-table th {
  text-align: center;
  color: var(--color-primary);
  padding: var(--spacing-2) var(--spacing-1-5);
  border-bottom: var(--token-border-1) solid var(--color-border-primary);
  font-weight: var(--font-weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sim-table td {
  text-align: center;
  padding: var(--spacing-2) var(--spacing-1-5);
  border-bottom: var(--token-border-1) solid var(--color-border-faint);
  color: var(--color-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sim-table tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}

/* 指标网格 */
.sim-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-3);
}

.sim-metric-box {
  background: var(--color-bg-input);
  border: var(--token-border-1) solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--spacing-3);
}

.sim-metric-title {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--spacing-2);
}

.sim-metric-subtitle {
  font-size: var(--font-size-2xs);
  color: var(--color-text-disabled);
  margin-top: var(--spacing-1);
}

.sim-metric-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  margin-bottom: var(--spacing-1);
}

.sim-metric-label {
  color: var(--color-text-subtle);
}

.sim-metric-value {
  color: var(--color-primary);
  font-family: var(--font-family-code);
}

/* 链条信息卡片 */
.sim-chain-info {
  background: var(--color-bg-input);
  border: var(--token-border-1) solid var(--color-primary-muted);
  border-radius: var(--radius-md);
  padding: var(--spacing-3);
  margin-bottom: var(--spacing-3);
}

.sim-chain-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-2);
}

.sim-chain-id {
  font-size: var(--font-size-md);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.sim-chain-type {
  font-size: var(--font-size-xs);
  color: var(--color-warning-light);
  background: rgba(251, 191, 36, 0.15);
  padding: var(--spacing-0-5) var(--spacing-2);
  border-radius: var(--radius-xl);
}

.sim-chain-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-2);
  font-size: var(--font-size-xs);
}

.sim-chain-detail-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-0-5);
}

.sim-chain-detail-label {
  color: var(--color-text-disabled);
}

.sim-chain-detail-value {
  color: var(--color-text-secondary);
}

.sim-chain-status-good {
  color: var(--color-success);
}

/* 折线图 */
.sim-line-chart {
  height: 100px;
  position: relative;
  border-left: var(--token-border-1) solid var(--color-border-muted);
  border-bottom: var(--token-border-1) solid var(--color-border-muted);
  margin: var(--spacing-3) 0;
}

.sim-line-chart svg {
  width: 100%;
  height: 100%;
}

.sim-line-chart-labels {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-2xs);
  color: var(--color-text-disabled);
  margin-top: var(--spacing-1);
}

.sim-line-legend {
  display: flex;
  gap: var(--spacing-4);
  margin-top: var(--spacing-2);
}

.sim-line-legend-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-1-5);
  font-size: var(--font-size-2xs);
  color: var(--color-text-muted);
}

.sim-line-legend-line {
  width: 16px;
  height: 2px;
  border-radius: 1px;
}

/* 信息发布列表 */
.sim-info-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.sim-info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-2);
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-sm);
  border-left: var(--token-border-2) solid transparent;
}

.sim-info-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-left-color: var(--color-primary);
}

.sim-info-item-left {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-0-5);
}

.sim-info-item-title {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.sim-info-item-sub {
  font-size: var(--font-size-2xs);
  color: var(--color-text-disabled);
}

.sim-info-item-right {
  display: flex;
  gap: var(--spacing-3);
  font-size: var(--font-size-2xs);
}

.sim-info-tag {
  color: var(--color-text-subtle);
}

.sim-info-tag-val {
  color: var(--color-primary);
  font-family: var(--font-family-code);
}

/* 可滚动表格容器 */
.sim-table-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}

/* 自定义滚动条样式 */
.sim-table-scroll::-webkit-scrollbar {
  width: 6px;
}

.sim-table-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.sim-table-scroll::-webkit-scrollbar-thumb {
  background: rgba(6, 182, 212, 0.3);
  border-radius: 3px;
}

.sim-table-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(6, 182, 212, 0.5);
}

.dp-export-pdf-btn {
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  padding: 12px 36px;
  font-size: 28px;
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--transition-normal);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.dp-export-pdf-btn:hover {
  background: var(--color-primary);
  color: #fff;
}.interop-sim-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.interop-sim-header-wrapper {
  padding: var(--spacing-1) var(--spacing-5) 0 var(--spacing-5);
  flex-shrink: 0;
}

.interop-sim-header-wrapper .d-section-title {
  margin-top: 0;
  margin-bottom: var(--spacing-1);
}

.interop-sim-table-header-wrapper {
  margin: 0 var(--spacing-5);
  flex-shrink: 0;
  background: var(--color-bg-table-header);
  border-radius: 6px 6px 0 0;
  z-index: 2;
}

.interop-sim-table-header {
  display: flex; 
  margin: 0;
  flex-shrink: 0;
  padding: 0 var(--spacing-2);
  border-left: var(--token-border-2) solid transparent;
}

.interop-sim-table-header-cell {
  flex: 1;
  padding: var(--spacing-2) 0;
  font-size: var(--font-size-lg);
  color: rgba(6, 182, 212, 0.9);
  font-weight: var(--font-weight-bold);
  text-align: left;
}

.interop-sim-table-header-cell:first-child {
  flex: 1;
  text-align: center;
}

.interop-sim-table-header-cell:nth-child(2) {
  flex: 2;
  text-align: center;
}

.interop-sim-table-header-cell:nth-child(3) {
  text-align: center;
}

.interop-sim-content {
  margin: 0 var(--spacing-5);
  padding: 0;
  flex: 1;
  overflow-y: auto; /* 核心修改：允许滚动条 */
  min-height: 0;
  position: relative;
}

/* 自定义滚动条样式 */
.interop-sim-content::-webkit-scrollbar {
  width: 6px;
}

.interop-sim-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
}

.interop-sim-content::-webkit-scrollbar-thumb {
  background: rgba(6, 182, 212, 0.3);
  border-radius: 3px;
}

.interop-sim-content::-webkit-scrollbar-thumb:hover {
  background: rgba(6, 182, 212, 0.5);
}

.interop-sim-scroll-container {
  display: flex;
  flex-direction: column;
}

.interop-sim-auto-scroll {
  animation: interop-seamless-scroll 40s linear infinite;
}

.interop-sim-auto-scroll:hover {
  animation-play-state: paused;
}

@keyframes interop-seamless-scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

.interop-sim-scroll-list {
  display: flex;
  flex-direction: column;
}

.interop-sim-table-row {
  display: flex;
  align-items: center;
  height: 55px;
  padding: 0 var(--spacing-2);
  background: transparent;
  border-radius: 6px;
  margin-bottom: 0;
  transition: all var(--transition-normal);
  border-left: var(--token-border-2) solid transparent;
}

.interop-sim-table-row:hover {
  background: rgba(6, 182, 212, 0.15);
  border-left: var(--token-border-2) solid var(--color-primary);
}

.interop-sim-table-row.selected {
  background: rgba(6, 182, 212, 0.2);
  border-left: var(--token-border-2) solid var(--color-primary);
}

.interop-sim-table-cell {
  flex: 1;
  font-size: var(--font-size-base);
  color: var(--color-text-tertiary);
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.interop-sim-table-cell:first-child {
  flex: 1;
  color: var(--color-primary);
  text-align: center;
}

.interop-sim-table-cell:nth-child(2) {
  flex: 2;
  text-align: center;
}

.interop-sim-table-cell:nth-child(3) {
  text-align: center;
}.d-switch {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  position: relative;
  vertical-align: middle;
}

.d-switch-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.d-switch-track {
  width: 90px;
  height: 40px;
  background: var(--color-bg-input);
  border: var(--token-border-1) solid var(--color-border-default);
  border-radius: var(--radius-full);
  position: relative;
  transition: all var(--transition-normal);
  display: flex;
  align-items: center;
  padding: 0 4px;
}

.d-switch-thumb {
  width: 30px;
  height: 30px;
  background: var(--token-white);
  border-radius: var(--radius-full);
  transition: transform var(--transition-normal);
  box-shadow: var(--shadow-sm);
}

.d-switch-input:checked + .d-switch-track {
  background: var(--color-primary);
  border-color: var(--color-primary-dark);
  box-shadow: var(--shadow-glow-primary-faint);
}

.d-switch-input:checked + .d-switch-track .d-switch-thumb {
  transform: translateX(50px);
}

.d-switch:hover .d-switch-track {
  border-color: var(--color-primary-light);
  background: var(--color-bg-hover-strong);
}

/* 修正：当 Switch 处于选中状态时，hover 应保持并强化主色调，而非变回深色背景 */
.d-switch:hover .d-switch-input:checked + .d-switch-track {
  background: var(--color-primary-light);
  filter: brightness(1.1);
  border-color: var(--color-primary);
}

.d-switch-input:disabled + .d-switch-track {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--color-bg-subtle);
}

.d-switch:has(.d-switch-input:disabled) {
  cursor: not-allowed;
}
/* 总容器：flex占满高度，取消留白，子模块按比例分配 1:2:1 */
.sim-param-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: hidden; /* 取消总滚动条 */
  color: #fff;
  padding: 0 var(--spacing-2); /* 极小的左右内边距，减少留白 */
  gap: var(--spacing-3); /* 极小的模块间距，取消大留白 */
}

.sim-header-wrapper {
  padding: var(--spacing-4) var(--spacing-5);
  display: flex;
  align-items: center;
}

.sim-header-wrapper .d-section-title {
  margin: 0;
}

.sim-section {
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  gap: var(--spacing-4);
  box-sizing: border-box;
}
.sim-section:first-child {
  flex: 34%;
}
.sim-section:nth-child(2) {
  flex: 31%;
}
.sim-section:nth-child(3) {
  margin-bottom: calc(-1 * var(--spacing-2));
  flex: 35%;
}
.sim-section:last-child {
  height: 300px;
}

.sim-section-header-wrapper {
  padding: var(--spacing-4) var(--spacing-5);
  display: flex;
  align-items: center;
}

.sim-section-header-wrapper .d-section-title {
  margin: 0;
}

.sim-card {
  flex: 1;
  overflow-y: auto;
  background: var(--color-bg-card);
  border: var(--token-border-1) solid var(--color-border-muted);
  padding: var(--spacing-4) var(--spacing-5);
  /* margin: 0 var(--spacing-5); */
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.sim-params-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-4) var(--spacing-6);
  border: none;
  box-shadow: none;
  background: transparent;
  margin-top: calc(-1 * var(--spacing-4));
  overflow-x: hidden;
  /* margin-bottom: calc(-1 * var(--spacing-6)); */
  padding-left: 0;
  margin-left: 0;
  margin-right: 0;
  padding: 0 var(--spacing-5);
}

.sim-param-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-4); /* 减少项间距 */
}

.sim-param-label {
  width: 140px; /* 缩小标签宽度，显示更多内容 */
  height: 36px;
  font-size: 24px; /* 适度缩小字号，显示更多内容 */
  line-height: 36px;
  text-align: center;
  color: #FFFFFF;
  white-space: nowrap;
}


.sim-param-value {
  width: 140px;
  height: 50px;
  border: 1px solid #0edee9;
  border-color: rgba(14, 222, 233, 0.4);
  border-radius: 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sim-param-value input {
  width: 100%;
  height: 100%;
  border: none !important;
  outline: none !important;
  background: transparent !important;
}
/* 聚焦时，sim-param-value的边框颜色为蓝色 sim-param-value是input的父级 */
.sim-param-value:focus-within {
  border-color: var(--color-primary-light);
  background: var(--color-bg-input-focus);
  box-shadow: inset 0 0 15px var(--color-primary-subtle), var(--shadow-glow-primary-faint);
}
/* .sim-param-value:hover {
  border-color: var(--color-primary-light);
  background: var(--color-bg-input-focus);
  box-shadow: inset 0 0 15px var(--color-primary-subtle), var(--shadow-glow-primary-faint);
} */

.sim-lignt-time {
  width: 105px;
  height: 51px;
  font-size: 22px;
  background-color: #00babd;
  color: #FFF;
  border: solid 1px #0edee9;
  font-weight: 500;
}
.sim-morning {
  background: linear-gradient(180deg, rgba(5, 253, 255, 0.50) 0%, rgba(0, 186, 189, 0.50) 100%);;
}
.sim-evening {
  background: linear-gradient(180deg, rgba(11, 27, 45, 0.50) 0%, rgba(36, 88, 147, 0.50) 100%);;
}

/* 算法智能体配置样式 */
.sim-algo-container {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--spacing-5);
  width: 100%;
  box-sizing: border-box;
  margin-top: calc(-1 * var(--spacing-3));
  margin-bottom: calc(-1 * var(--spacing-6));
}

.sim-algo-container svg {
  width: 100%;
  height: auto;
  display: block;
}

.sim-controls-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-2) var(--spacing-5);
  border: none;
  box-shadow: none;
  background: transparent;
  padding-top: 0;
  padding-bottom: 2;
  margin-top: calc(-1 * var(--spacing-4));
  /* margin-bottom: calc(-1 * var(--spacing-6)); */
}

.sim-control-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
  background: rgba(11, 27, 45, 0.59);
  padding: var(--spacing-2-5) var(--spacing-3-5);
  border-radius: 10px;
  border: 1px solid rgba(14, 222, 233, 0.27);
}

.sim-control-icon {
  width: 35px;
  height: 35px;
  flex-shrink: 0;
}

.sim-control-label {
  font-size: var(--font-size-base);
  color: #FFF;
  font-weight: 500;
  white-space: nowrap;
  text-align: left;
  flex: 1;
  padding-left: 20px;
}

.sim-debug-grid {
  margin-top: calc(-1 * var(--spacing-5));
}

.sim-debug-btn {
  width: 100%;
  background: rgba(6, 182, 212, 0.15);
  border: 1px solid rgba(6, 182, 212, 0.4);
  color: #00f7ff;
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: all var(--transition-normal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sim-debug-btn:hover {
  background: rgba(6, 182, 212, 0.25);
  border-color: #00f7ff;
  box-shadow: 0 0 10px rgba(0, 247, 255, 0.2);
}

.sim-debug-btn:active {
  transform: translateY(1px);
}

.d-switch-input:checked  + .d-switch-track{
  background-color: rgba(14,222,233,0.3) !important;
}.d-slider-container {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: 137px;
  height: 10px;
  border: solid #0edee9 1px;
  border-color: rgba(14, 222, 233, 0.4);
  border-radius: 10px;
}

.d-slider-input {
  -webkit-appearance: none;
  width: 200px;
  height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
  outline: none;
}

.d-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
  border: solid #0edee9 1px;
  background-color: #FFF;
}

/* .d-slider-input::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  background: #2563eb;
} */

.d-slider-input::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: #3b82f6;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s;
}

/* .d-slider-input::-moz-range-thumb:hover {
  transform: scale(1.1);
  background: #2563eb;
} */

.d-slider-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.d-slider-input:disabled::-webkit-slider-thumb {
  background: #94a3b8;
  cursor: not-allowed;
}

.d-slider-value {
  font-size: 14px;
  color: #64748b;
  min-width: 40px;
}

/* 填充样式（可选） */
.d-slider-input {
  background: linear-gradient(to right, #3b82f6 0%, #3b82f6 var(--fill-percentage), #e2e8f0 var(--fill-percentage), #e2e8f0 100%);
}

.d-slider-value-tooltip {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  color: #0edeea;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 20px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none; /* 防止遮挡滑块操作 */
  transition: left 0.1s ease;
  z-index: 10;
  font-size: 20px;
  font-weight: 500;
}
.d-slider-wrapper {
  position: relative;
}.d-tabs-wrapper {
  width: 100%;
}

.d-tabs-header {
  display: flex;
  width: fit-content;
  border: 1px solid #0edee9;
  border-color: rgba(14, 222, 233, 0.4);
  border-radius: 10px;
  color: #FFF;
  overflow: hidden;
}

/* 选项卡样式 */
.d-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tab-width, 109px);
  height: var(--tab-height, 51px);
  font-size: 22px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(11, 27, 45, 0.70) 0%, rgba(36, 88, 147, 0.70) 102%);

}

/* 移除最后一个选项的右边框 */
.d-tab-last {
  border-right: none;
}

/* 第一个选项的圆角 */
.d-tab-first {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

/* 最后一个选项的圆角 */
.d-tab-last {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* 激活状态 */
.d-tab-active {
  background: linear-gradient(180deg, rgba(5, 253, 255, 0.30) 0%, rgba(0, 186, 189, 0.30) 100%);
  color: white !important;
  border-color: #0edee9 !important;
  position: relative;
  z-index: 1;
}

/* 激活状态的边框处理 */
.d-tab-active + .d-tab {
  border-left-color: #0edee9;
}

/* 禁用状态 */
.d-tab-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* 固定宽度和高度变体 */
.d-tab-fixed {
  flex: 0 0 auto;
}.d-input-wrapper {
  position: relative;
  width: 100%;
}

.d-input {
  width: 100%;
  background: var(--color-bg-input);
  border: var(--token-border-1) solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: var(--spacing-1-5) var(--spacing-2-5);
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  outline: none;
  transition: border-color var(--transition-normal);
  box-sizing: border-box;
  height: 54px;
  line-height: 1;
  display: block;
}

.d-input:focus {
  border-color: var(--color-primary);
  background: var(--color-bg-input-focus);
}

.d-input:disabled {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--color-border-subtle);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  opacity: 0.8;
}

.d-input::placeholder {
  color: var(--color-border-muted);
}
.d-input-error {
  border: solid 1px #FA1919;
}
.d-input-error::placeholder {
  color: rgba(250, 25, 25, 0.5);
}

/* Number input styling: 彻底移除数字输入框的上下箭头/步长控制器 */
.d-input[type=number] {
  -moz-appearance: textfield;
}

.d-input[type=number]::-webkit-inner-spin-button,
.d-input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}.left-panel-wrapper {
  position: absolute;
  top: 200px;
  left: 32px;
  bottom: 150px;
  width: 882px;
  z-index: var(--z-dropdown);
  display: flex;
  flex-direction: column;
  transition: transform var(--transition-slow), opacity var(--transition-slow), width 0.4s ease;
}

.left-panel-wrapper.is-sim-mode {
  width: 882px;
  bottom: 60px;
}

.left-panel-wrapper.collapsed {
  transform: translateX(-920px);
  opacity: 0;
  pointer-events: none;
}

.left-panel-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  margin-bottom: 0;
  gap: var(--spacing-4);
}.top-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 186px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  z-index: var(--z-panel);
}

.top-panel-left {
  display: flex;
  align-items: center;
  gap: 40px;
  position: relative;
  z-index: 10;
}

.top-panel-time {
  font-family: var(--font-family-base);
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  width: 200px;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;
}

.top-panel-nav-group {
  display: flex;
  align-items: center;
  gap: 36px;
}

.top-panel-nav-btn {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  border: var(--token-border-1) solid rgba(6, 182, 212, 0.4);
  background: var(--color-bg-input);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.top-panel-nav-btn:hover {
  background: var(--color-primary-muted);
  border-color: var(--color-primary);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-glow-primary-subtle);
  transform: translateY(-2px);
}

.top-panel-nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(1);
}

.top-panel-nav-btn:disabled:hover {
  transform: none;
  box-shadow: none;
  background: var(--color-bg-input);
  border-color: rgba(6, 182, 212, 0.4);
}

.top-panel-nav-btn svg {
  width: 36px;
  height: 36px;
}

.top-panel-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  pointer-events: none;
  padding-top: 0;
}

.top-panel-title-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
}

.top-panel-title-box {
  position: relative;
  height: 186px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  gap: 16px;
}

.top-panel-title-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  width: auto;
  pointer-events: none;
}

.top-panel-title-icon {
  position: relative;
  z-index: 1;
  width: auto;
  height: auto;
}

.top-panel-title {
  position: relative;
  top: -22px;
  font-size: 55px;
  font-weight: var(--font-weight-bold);
  color: #ffffff;
  letter-spacing: 12px;
  text-shadow: var(--text-shadow-glow-strong);
  z-index: 1;
}

/* 中部悬浮指标面板样式 */
.top-panel-float-container {
  display: flex;
  gap: 40px;
  padding-top: 4px;
  pointer-events: auto;
}

.top-panel-float-card {
  background: var(--color-bg-glass-dark);
  border: var(--token-border-1) solid var(--color-border-primary);
  box-shadow: var(--shadow-xl);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  border-radius: var(--radius-lg);
  padding: 16px 32px 24px 32px;
  min-width: 440px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.top-panel-float-card:hover {
  background: var(--color-bg-glass-light);
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-primary-subtle);
}

.top-panel-float-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
  opacity: 0.7;
}

.float-card-value-box {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 10px;
}

.float-card-value {
  font-family: var(--font-family-base);
  font-size: var(--font-size-7xl);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-warning-light);
  font-style: italic;
  text-shadow: var(--text-shadow-glow-strong);
  line-height: 1.2;
}

.float-card-unit {
  font-size: var(--font-size-base);
  color: var(--token-white);
  font-weight: var(--font-weight-semibold);
  opacity: 0.9;
}

.float-card-label {
  font-size: var(--font-size-base);
  color: var(--color-text-tertiary);
  font-weight: var(--font-weight-medium);
  letter-spacing: 1px;
}

/* Right Panel Styles */
.top-panel-right {
  display: flex;
  align-items: center;
  height: 100%;
}

.top-panel-right-grid {
  display: flex;
  align-items: center;
  height: 80px;
}

.top-panel-grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  height: 100%;
  position: relative;
  gap: 16px;
}

/* 分隔线 */
.top-panel-grid-item::after {
  content: '';
  position: absolute;
  right: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: rgba(255, 255, 255, 0.15);
}

.top-panel-grid-item:last-child::after {
  display: none;
}

.top-panel-stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
}

.top-panel-stat-icon img {
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 0 16px rgba(6, 182, 212, 0.5));
}

.top-panel-stat-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 80px;
  height: 48px;
}

.top-panel-stat-value {
  font-family: var(--font-family-base);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.top-panel-stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-subtle);
  margin-top: 2px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
}* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--color-bg-page);
  color: var(--token-gray-100);
  overflow: hidden;
}

.app {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/* 加载状态 */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg-overlay-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  z-index: var(--z-popover);
}

.loading-spinner {
  width: 48px;
  height: 48px;
  border: var(--token-border-4) solid rgba(59, 130, 246, 0.2);
  border-top-color: var(--color-info);
  border-radius: var(--radius-full);
  animation: spin 1s linear infinite;
}

.loading-text {
  font-size: var(--font-size-base);
  color: var(--color-text-hint);
  letter-spacing: 0.5px;
}

/* 错误提示 */
.error-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg-overlay-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-popover);
  color: var(--color-danger);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
}

/* 路口标记样式 */
.intersection-marker {
  border-radius: var(--radius-full);
  border: var(--token-border-2) solid var(--color-text-tertiary);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-normal);
}

.intersection-marker-warning {
  animation: pulse 1.5s ease-in-out infinite;
}

/* 路口信息窗体样式 */
.intersection-info {
  min-width: 240px;
  max-width: 240px;
  --intersection-accent: rgba(6, 182, 212, 0.45);
  --intersection-glow: rgba(6, 182, 212, 0.2);
  --intersection-value-color: #06b6d4;
  position: relative;
  background:
    radial-gradient(circle at 18% 0%, rgba(34, 211, 238, 0.2) 0%, rgba(34, 211, 238, 0) 58%),
    linear-gradient(145deg, rgba(6, 20, 38, 0.97), rgba(9, 28, 50, 0.94));
  border-radius: 10px;
  color: var(--color-text-primary);
  border: 1px solid var(--intersection-accent);
  box-shadow: 0 0 20px var(--intersection-glow), 0 4px 16px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  pointer-events: none;
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
}

.intersection-info::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--intersection-accent);
  pointer-events: none;
}

.intersection-info__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(10, 36, 58, 0.72), rgba(10, 36, 58, 0.24));
  border-bottom: 1px solid var(--color-border-primary-faint);
}

.intersection-info h4 {
  margin: 0;
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.2px;
  text-shadow: var(--text-shadow-subtle);
}

.intersection-info__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  padding: 0 8px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.45;
}

.intersection-info__badge--good {
  color: #c8f5de;
  background: rgba(42, 188, 113, 0.2);
  border-color: rgba(42, 188, 113, 0.45);
}

.intersection-info__badge--warn {
  color: #fff3b8;
  background: rgba(237, 207, 78, 0.2);
  border-color: rgba(237, 207, 78, 0.45);
}

.intersection-info__badge--danger {
  color: #ffd4da;
  background: rgba(217, 47, 67, 0.2);
  border-color: rgba(217, 47, 67, 0.48);
}

.intersection-info__badge--extreme {
  color: #ffc7d1;
  background: rgba(175, 26, 51, 0.22);
  border-color: rgba(175, 26, 51, 0.5);
}

.intersection-info__badge--unknown {
  color: #cbeaf1;
  background: rgba(6, 182, 212, 0.2);
  border-color: rgba(6, 182, 212, 0.45);
}

.intersection-info-content {
  padding: 8px 12px;
}

.intersection-info-content p {
  margin: 6px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.35;
}

.intersection-info-content .label {
  color: var(--color-text-hint);
}

.intersection-info-content .value {
  color: var(--intersection-value-color);
  font-weight: var(--font-weight-medium);
}

.intersection-info--good {
  --intersection-accent: rgba(42, 188, 113, 0.52);
  --intersection-glow: rgba(42, 188, 113, 0.24);
  --intersection-value-color: #2abc71;
}

.intersection-info--warn {
  --intersection-accent: rgba(237, 207, 78, 0.5);
  --intersection-glow: rgba(237, 207, 78, 0.22);
  --intersection-value-color: #edcf4e;
}

.intersection-info--danger {
  --intersection-accent: rgba(217, 47, 67, 0.56);
  --intersection-glow: rgba(217, 47, 67, 0.24);
  --intersection-value-color: #d92f43;
}

.intersection-info--extreme {
  --intersection-accent: rgba(175, 26, 51, 0.6);
  --intersection-glow: rgba(175, 26, 51, 0.28);
  --intersection-value-color: #af1a33;
}

.roadline-info {
  min-width: 320px;
  max-width: 320px;
  --roadline-accent: rgba(6, 182, 212, 0.45);
  --roadline-glow: rgba(6, 182, 212, 0.2);
  --roadline-value-color: #06b6d4;
  position: relative;
  background:
    radial-gradient(circle at 18% 0%, rgba(34, 211, 238, 0.18) 0%, rgba(34, 211, 238, 0) 58%),
    linear-gradient(145deg, rgba(6, 20, 38, 0.97), rgba(9, 28, 50, 0.94));
  border-radius: var(--radius-lg);
  color: var(--color-text-primary);
  border: 1px solid var(--roadline-accent);
  box-shadow: 0 0 20px var(--roadline-glow), 0 4px 16px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  pointer-events: none;
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
}

.roadline-info::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--roadline-accent);
  pointer-events: none;
}

.roadline-info__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-1-5);
  background: linear-gradient(180deg, rgba(10, 36, 58, 0.72), rgba(10, 36, 58, 0.24));
  border-bottom: var(--token-border-1) solid var(--color-border-primary-faint);
}

.roadline-info h4 {
  padding: var(--spacing-2-5) var(--spacing-3-5);
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  text-shadow: var(--text-shadow-subtle);
}

.roadline-info__badge {
  margin-right: var(--spacing-3);
  padding: 0 var(--spacing-1-5);
  border-radius: var(--radius-full);
  border: var(--token-border-1) solid transparent;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.5;
}

.roadline-info-content {
  padding: var(--spacing-2-5) var(--spacing-3-5);
}

.roadline-info-content p {
  margin: var(--spacing-1-5) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.roadline-info-content .label {
  color: var(--color-text-hint);
}

.roadline-info-content .value {
  color: var(--roadline-value-color);
  font-weight: var(--font-weight-medium);
}

.roadline-info--good {
  --roadline-accent: rgba(42, 188, 113, 0.52);
  --roadline-glow: rgba(42, 188, 113, 0.24);
  --roadline-value-color: #2abc71;
}

.roadline-info--warn {
  --roadline-accent: rgba(237, 207, 78, 0.5);
  --roadline-glow: rgba(237, 207, 78, 0.22);
  --roadline-value-color: #edcf4e;
}

.roadline-info--danger {
  --roadline-accent: rgba(217, 47, 67, 0.56);
  --roadline-glow: rgba(217, 47, 67, 0.24);
  --roadline-value-color: #d92f43;
}

.roadline-info--extreme {
  --roadline-accent: rgba(175, 26, 51, 0.6);
  --roadline-glow: rgba(175, 26, 51, 0.28);
  --roadline-value-color: #af1a33;
}

.roadline-info__badge--good {
  color: #c8f5de;
  background: rgba(42, 188, 113, 0.2);
  border-color: rgba(42, 188, 113, 0.45);
}

.roadline-info__badge--warn {
  color: #fff3b8;
  background: rgba(237, 207, 78, 0.2);
  border-color: rgba(237, 207, 78, 0.45);
}

.roadline-info__badge--danger {
  color: #ffd4da;
  background: rgba(217, 47, 67, 0.2);
  border-color: rgba(217, 47, 67, 0.48);
}

.roadline-info__badge--extreme {
  color: #ffc7d1;
  background: rgba(175, 26, 51, 0.22);
  border-color: rgba(175, 26, 51, 0.5);
}

/* 自定义事件标记样式 */
.custom-content-marker {
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.custom-content-marker img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 自定义信息窗口样式 */
.amap-info-contentContainer::after {
  content: '';
  position: absolute;
  top: 5px;
  left: -5px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-right: 10px solid rgba(27, 27, 27, 0.9);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.custom-info-window {
  position: relative;
  min-width: 200px;
  max-width: 450px;
  background: rgba(16, 12, 42, 0.95);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 12px rgba(72, 72, 72, 0.5);
  overflow: hidden;
  color: var(--color-text-primary);
}

.custom-info-window .custom-info-window-header {
  padding: var(--spacing-3) var(--spacing-4);
  box-sizing: border-box;
  background: rgba(27, 27, 27, 0.9);
}

.custom-info-window .custom-info-window-header .title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

.custom-info-window .custom-info-window-header .road-name {
  display: block;
  margin-top: var(--spacing-1);
  font-size: var(--font-size-base);
  opacity: 0.8;
}

.custom-info-window .custom-info-window-content {
  padding: var(--spacing-4);
}

.custom-info-window .custom-info-window-content .info-item {
  display: flex;
  margin-bottom: var(--spacing-3);
  font-size: var(--font-size-base);
  line-height: 1.5;
}

.custom-info-window .custom-info-window-content .info-item:last-child {
  margin-bottom: 0;
}

.custom-info-window .custom-info-window-content .info-item .label {
  width: 80px;
  color: var(--color-text-hint);
}

.custom-info-window .custom-info-window-content .info-item .value {
  flex: 1;
  color: var(--token-gray-200);
}

.custom-info-window .custom-info-window-content .info-item .value.status-0 {
  color: #52c41a;
}

.custom-info-window .custom-info-window-content .info-item .value.status-1 {
  color: #faad14;
}

.custom-info-window .custom-info-window-content .info-item .value.status-2 {
  color: #f5222d;
}

.custom-info-window .custom-info-window-content .info-item .value.status-3 {
  color: #d9d9d9;
}

.custom-info-window .custom-info-window-footer {
  margin: var(--spacing-3) var(--spacing-4);
  padding: var(--spacing-3) 0;
  box-sizing: border-box;
  border-top: var(--token-border-1) solid rgba(240, 240, 240, 0.2);
  text-align: right;
}

.custom-info-window .custom-info-window-footer .enter-btn {
  padding: var(--spacing-1-5) var(--spacing-4);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background: #1890ff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-slow);
}

.custom-info-window .custom-info-window-footer .enter-btn:hover {
  background: #40a9ff;
}

.custom-info-window .custom-info-window-footer .enter-btn:active {
  background: #096dd9;
}

.bottom-center-player-wrapper {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  z-index: var(--z-dropdown);
  pointer-events: auto;
}

.right-sim-panel-wrapper {
  position: absolute;
  top: 200px;
  bottom: 60px;
  right: 32px;
  width: 882px;
  z-index: var(--z-sticky);
  transition: transform var(--transition-slow), opacity var(--transition-slow);
  pointer-events: auto; 
}

.right-sim-panel-wrapper.collapsed {
  transform: translateX(920px);
  opacity: 0;
  /* pointer-events: none; */
}
.d-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-sm);
  border: var(--token-border-1) solid transparent;
  font-size: var(--font-size-base);
  cursor: pointer;
  transition: all var(--transition-normal);
  color: var(--color-text-primary);
  min-width: 80px;
  font-weight: var(--font-weight-medium);
  outline: none;
}

.d-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}

.d-button:active {
  transform: translateY(0);
  filter: brightness(0.9);
}

.d-button-primary {
  background: rgba(6, 182, 212, 0.8);
  border-color: var(--color-primary);
}

.d-button-info {
  background: rgba(59, 130, 246, 0.8);
  border-color: var(--color-info);
}

.d-button-warning {
  background: rgba(180, 140, 20, 0.8);
  border-color: var(--color-warning);
}

.d-button-success {
  background: rgba(34, 197, 94, 0.6);
  border-color: var(--color-success);
}

.d-button-danger {
  background: rgba(220, 38, 38, 0.8);
  border-color: var(--color-danger-dark);
}

.d-button-default {
  background: var(--color-bg-hover-strong);
  border-color: var(--color-border-default);
}
.d-checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.d-checkbox-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.d-checkbox-box {
  width: 32px;
  height: 32px;
  border: var(--token-border-2) solid var(--color-border-muted);
  border-radius: var(--radius-sm);
  background: var(--color-bg-input);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-normal);
}

.d-checkbox:hover .d-checkbox-box {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
}

.d-checkbox-input:checked + .d-checkbox-box {
  background: rgba(6, 182, 212, 0.8);
  border-color: var(--color-primary);
}

.d-checkbox-input:checked + .d-checkbox-box .d-checkbox-icon {
  opacity: 1;
  transform: scale(1);
}

.d-checkbox-icon {
  color: var(--color-text-primary);
  opacity: 0;
  transform: scale(0.5);
  transition: all var(--transition-fast);
}

/* 部分选中样式 */
.d-checkbox-box.indeterminate {
  background: rgba(6, 182, 212, 0.8);
  border-color: var(--color-primary);
}

.d-checkbox-box.indeterminate .d-checkbox-icon {
  opacity: 1;
  transform: scale(1);
}

.d-checkbox-input:disabled + .d-checkbox-box {
  opacity: 0.5;
  cursor: not-allowed;
}

.d-checkbox:has(.d-checkbox-input:disabled) {
  cursor: not-allowed;
}.d-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg-overlay);
  backdrop-filter: var(--blur-sm);
  z-index: var(--z-loading);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn var(--transition-normal);
}

@keyframes dDialogFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.d-dialog-container {
  background: rgba(11, 27, 45, 0.75);
  border: 1px solid rgba(111, 121, 131, 0.3);
  border-radius: 10px;
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  box-shadow: var(--shadow-panel);
  min-width: 420px;
  max-width: 580px;
  animation: dDialogSlideIn 0.25s ease-out;
  color: var(--color-text-primary);
}

@keyframes dDialogSlideIn {
  from { opacity: 0; transform: scale(0.92) translateY(-10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.d-dialog-header {
  display: flex;
  align-items: center;
  padding: var(--spacing-4) var(--spacing-5) var(--spacing-3);
  border-bottom: var(--token-border-1) solid var(--color-border-subtle);
}

.d-dialog-icon {
  margin-right: var(--spacing-2-5);
  flex-shrink: 0;
}

.d-dialog-icon.info { color: var(--color-primary); }
.d-dialog-icon.warning { color: var(--color-warning); }
.d-dialog-icon.error { color: var(--color-danger); }
.d-dialog-icon.success { color: var(--color-success); }

.d-dialog-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: 0.3px;
}

.d-dialog-body {
  padding: var(--spacing-5);
}

.d-dialog-message {
  font-size: var(--font-size-base);
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.6;
  word-break: break-word;
  white-space: pre-wrap;
}

.d-dialog-input {
  width: 100%;
  margin-top: var(--spacing-4);
  background: var(--color-bg-input);
  border: var(--token-border-1) solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--spacing-2-5) var(--spacing-3);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  outline: none;
  transition: border-color var(--transition-normal);
}

.d-dialog-input:focus {
  border-color: var(--color-primary);
  background: rgba(0, 0, 0, 0.4);
}

.d-dialog-input::placeholder {
  color: var(--color-text-faint);
}

.d-dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-2-5);
  padding: var(--spacing-3) var(--spacing-5) var(--spacing-4);
  border-top: var(--token-border-1) solid var(--color-border-subtle);
}

.d-dialog-btn {
  padding: var(--spacing-2) var(--spacing-5);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-normal);
  border: var(--token-border-1) solid transparent;
}

.d-dialog-btn-cancel {
  background: var(--color-bg-subtle);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--color-text-tertiary);
}

.d-dialog-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--color-text-primary);
}

.d-dialog-btn-confirm {
  background: rgba(6, 182, 212, 0.8);
  border-color: var(--color-primary);
  color: var(--color-text-primary);
}

.d-dialog-btn-confirm:hover {
  background: rgba(6, 182, 212, 0.95);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

.d-dialog-btn-danger {
  background: rgba(239, 68, 68, 0.8);
  border-color: var(--color-danger);
  color: var(--color-text-primary);
}

.d-dialog-btn-danger:hover {
  background: rgba(239, 68, 68, 0.95);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}.scenario-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: var(--spacing-5);
  padding: var(--spacing-3);
}

.preset-section {
  flex-shrink: 0;
}

.preset-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-6);
  padding: 0 var(--spacing-2-5);
}

.scenario-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 240px;
  background: var(--color-bg-input);
  border: var(--token-border-1) solid var(--color-border-muted);
  border-radius: var(--radius-2xl);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.scenario-card:hover {
  background: var(--color-primary-subtle);
  border-color: var(--color-primary);
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(6, 182, 212, 0.15);
}

.scenario-icon-wrapper {
  margin-bottom: var(--spacing-4);
  color: var(--color-text-tertiary);
  transition: color var(--transition-slow);
}

.scenario-card:hover .scenario-icon-wrapper {
  color: var(--color-primary);
}

.scenario-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  letter-spacing: 0.5px;
}

.divider {
  height: 1px;
  background: var(--color-border-muted);
  margin: 0 var(--spacing-2-5);
}

.list-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 var(--spacing-2-5);
  overflow: hidden;
  min-height: 0;
}

.list-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-4);
  flex-shrink: 0;
}

.search-wrapper {
  display: flex;
  align-items: center;
  background: var(--color-bg-input);
  border: var(--token-border-1) solid var(--color-border-muted);
  border-radius: var(--radius-md);
  padding: var(--spacing-1-5) var(--spacing-3);
  width: 300px;
}

.search-wrapper input {
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  margin-left: var(--spacing-2);
  width: 100%;
  outline: none;
  font-size: var(--font-size-base);
}

.action-buttons {
  display: flex;
  gap: var(--spacing-3);
}

.list-btn {
  display: flex;
  align-items: center;
  font-size: var(--font-size-md);
  padding: var(--spacing-1-5) var(--spacing-4);
}

.scheme-table-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--color-bg-subtle);
  border: var(--token-border-1) solid var(--color-border-faint);
  border-radius: var(--radius-lg);
  overflow: auto;
}

.scheme-table-wrapper table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.scheme-table-wrapper thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg-table-header);
  color: var(--color-text-tertiary);
  font-weight: var(--font-weight-medium);
  text-align: left;
  padding: var(--spacing-3) var(--spacing-4);
  font-size: var(--font-size-base);
  border-bottom: var(--token-border-1) solid var(--color-border-muted);
}

.scheme-table-wrapper tbody td {
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: var(--token-border-1) solid var(--color-border-faint);
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
}

.scheme-table-wrapper tbody tr {
  transition: background var(--transition-normal);
  cursor: pointer;
}

.scheme-table-wrapper tbody tr:hover {
  background: var(--color-bg-hover);
}

.col-check {
  width: 50px;
}

.col-name-header, .col-name {
  width: 20%;
}

.col-scene-header, .col-scene {
  width: 20%;
}

.col-region-header, .col-region {
  width: 20%;
}

.col-time-header, .col-time {
  width: 20%;
}

.col-action-header, .col-action {
  width: 150px;
}

.scheme-table-wrapper th.col-check, .scheme-table-wrapper td.col-check {
  text-align: center;
  vertical-align: middle;
  padding: var(--spacing-3) 0;
}

.scheme-table-wrapper th.col-check .d-checkbox, .scheme-table-wrapper td.col-check .d-checkbox {
  display: inline-flex;
  justify-content: center;
  margin: 0 auto;
}

.col-name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary) !important;
}

.col-info {
  color: var(--color-text-muted) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.col-time {
  color: var(--color-text-subtle) !important;
  font-size: var(--font-size-md);
}

.col-action {
  display: flex;
  gap: var(--spacing-2);
  justify-content: flex-start;
}

.icon-btn {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--spacing-1-5);
  border-radius: var(--radius-sm);
  transition: all var(--transition-normal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-btn:hover {
  color: var(--color-primary);
  background: var(--color-primary-subtle);
}

.icon-btn.danger:hover {
  color: var(--color-danger);
  background: rgba(239, 68, 68, 0.15);
}

.icon-btn.success:hover {
  color: var(--color-success);
  background: rgba(34, 197, 94, 0.15);
}

.loading-td, .empty-td {
  text-align: center;
  padding: var(--spacing-10) !important;
  color: var(--color-text-disabled) !important;
}.d-select-wrapper {
  position: relative;
  width: 100%;
}

/* 触发器 */
.d-select-trigger {
  width: 100%;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-bg-input);
  border: var(--token-border-1) solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: var(--spacing-1-5) var(--spacing-2-5);
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  cursor: pointer;
  transition: all var(--transition-normal);
  user-select: none;
  box-sizing: border-box;
}

.d-select-trigger:hover {
  border-color: var(--color-border-default);
  background: rgba(0, 0, 0, 0.4);
}

.d-select-trigger.active {
  border-color: var(--color-primary);
  background: var(--color-bg-input-focus);
  box-shadow: 0 0 0 2px var(--color-primary-muted);
}

.d-select-input-container {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  min-width: 0;
  height: 100%;
}

.d-select-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  outline: none;
  cursor: pointer;
  width: 100%;
  padding: 0;
  line-height: 1;
  height: 100%;
}

.d-select-input::placeholder {
  color: var(--color-text-faint);
}

.d-select-trigger.active .d-select-input {
  cursor: text;
}

.d-select-search-icon {
  color: var(--color-primary);
  flex-shrink: 0;
}

.d-select-icon {
  color: var(--color-text-subtle);
  transition: transform var(--transition-normal);
  margin-left: var(--spacing-2);
}

.d-select-trigger.active .d-select-icon {
  transform: rotate(180deg);
  color: var(--color-primary);
}

/* 下拉菜单 */
.d-select-dropdown {
  position: fixed;
  z-index: var(--z-dialog);
  background: rgba(18, 24, 38, 0.98);
  border: var(--token-border-1) solid var(--color-border-primary);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  backdrop-filter: var(--blur-md);
  max-height: 400px;
  overflow-y: auto;
  padding: var(--spacing-1) 0;
  animation: dSelectFadeIn var(--transition-fast);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-default) transparent;
}

.d-select-dropdown::-webkit-scrollbar {
  width: 6px;
}
.d-select-dropdown::-webkit-scrollbar-track {
  background: transparent;
}
.d-select-dropdown::-webkit-scrollbar-thumb {
  background-color: var(--color-border-default);
  border-radius: 3px;
}

@keyframes dSelectFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 选项 */
.d-select-option {
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-md);
  color: var(--color-text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color var(--transition-fast);
}

.d-select-option:hover {
  background-color: rgba(6, 182, 212, 0.15);
  color: var(--color-text-primary);
}

.d-select-option.selected {
  background-color: rgba(6, 182, 212, 0.25);
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

.d-select-check {
  color: var(--color-primary);
  margin-left: var(--spacing-2);
}

.d-select-empty {
  padding: var(--spacing-4);
  text-align: center;
  color: var(--color-text-disabled);
  font-size: var(--font-size-sm);
}.d-form-item {
  display: flex;
  align-items: center;
  margin-bottom: var(--spacing-2);
  width: 100%;
}

.d-form-item-label {
  width: 110px;
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
  text-align: right;
  margin-right: var(--spacing-4);
  flex-shrink: 0;
  font-weight: var(--font-weight-medium);
}

.d-form-item-content {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}

.d-form-item-unit {
  margin-left: var(--spacing-2);
  color: var(--color-text-disabled);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  width: 32px;
}
.d-tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-2);
}

.d-tag-item {
  padding: 5px var(--spacing-2-5);
  border: var(--token-border-1) solid var(--color-border-primary);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: rgba(6, 182, 212, 0.8);
  cursor: pointer;
  transition: all var(--transition-normal);
  background: var(--color-primary-faint);
}

.d-tag-item:hover {
  border-color: var(--color-primary);
  color: var(--color-text-primary);
  background: rgba(6, 182, 212, 0.15);
}

.d-tag-item.active {
  background: rgba(6, 182, 212, 0.8);
  color: var(--color-text-primary);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-glow-primary-subtle);
}
.d-radio-group {
  display: flex;
  gap: var(--spacing-2);
}

.d-radio-item {
  padding: var(--spacing-1-5) var(--spacing-3);
  border: var(--token-border-1) solid var(--color-border-default);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-normal);
  background: var(--color-bg-input);
}

.d-radio-item:hover {
  border-color: var(--color-border-default);
}

.d-radio-item.active {
  border-color: var(--color-primary);
  color: var(--color-text-primary);
  background: var(--color-primary-muted);
  box-shadow: var(--shadow-glow-primary-faint);
}
.sim-settings-body-wrapper {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.sim-settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-15);
  padding: 0 var(--spacing-2-5);
}

.sim-settings-column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

/* 内部两列布局 */
.sim-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-2) var(--spacing-6);
}

/* 消除 Grid 内部 FormItem 的 margin */
.sim-row-2 .d-form-item {
  margin-bottom: 0;
}

/* 针对仿真设置主体区域的表单项布局调整：加长标题，缩短输入框 */
.sim-settings-grid .d-form-item {
  display: flex;
  align-items: center;
}

.sim-settings-grid .d-form-item-label {
  flex: 0 0 160px;
  text-align: right;
  margin-right: var(--spacing-4);
}

/* 修正：对齐输入框和下拉框的宽度，确保即便有单位也能保持左对齐 */
.sim-settings-grid .d-input-wrapper,
.sim-settings-grid .d-select-wrapper {
  width: 260px !important;
  flex: 0 0 260px;
}

/* 紧凑组布局 */
.compact-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

/* 针对某些需要特殊对齐的区域 */
.sim-section-content {
  padding-left: var(--spacing-1);
}

/* === Top Nav Bar Integrated Styles === */

.sim-settings-top-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--spacing-5) var(--spacing-6);
  background: rgba(255, 255, 255, 0.03);
  border: var(--token-border-1) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-8);
  gap: var(--spacing-12);
}

.sim-nav-fields-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  flex: 1;
}

.sim-nav-row {
  display: flex;
  gap: var(--spacing-10);
  width: 100%;
}

.sim-nav-group {
  display: flex;
  align-items: center;
  flex: 1;
}

.sim-nav-label {
  flex: 0 0 120px;
  text-align: right;
  margin-right: var(--spacing-4);
  color: var(--color-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  font-style: italic;
  text-shadow: var(--text-shadow-glow);
}

.sim-nav-field {
  flex: 1;
  position: relative;
}

.sim-nav-field > * {
  width: 100% !important;
}

.sim-nav-scenario-group {
  flex: 0 0 auto;
  align-items: flex-start;
  padding-top: var(--spacing-1);
}

.sim-nav-buttons {
  display: flex;
  gap: var(--spacing-2);
}

.sim-scenario-btn {
  min-width: unset;
  padding: var(--spacing-1-5) var(--spacing-3-5);
  border: var(--token-border-1) solid rgba(255, 255, 255, 0.15);
  background: var(--color-bg-hover);
  font-size: var(--font-size-md);
}

/* 当按钮为 primary (选中) 时的覆盖 */
.sim-scenario-btn.d-button-primary {
  border-color: var(--color-primary);
  background: var(--color-primary-muted);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-glow-primary-faint);
}

.sim-scenario-btn:hover {
  border-color: var(--color-border-primary-strong);
}

/* 错误提示文字 */
.sim-input-error {
  color: #ff4d4f;
  font-size: var(--font-size-md);
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 2px;
  white-space: nowrap;
}

.sim-time-input-wrapper {
  position: relative;
}
.sim-time-error {
  color: #ff4d4f;
  font-size: var(--font-size-md);
  position: absolute;
  white-space: nowrap;
  right: 0;
  top: 50%;
  transform: translate(100%,-50%);
  padding-left: 35px;
}/* 语义指令弹出层样式 */

.global-instruction-stack {
  position: fixed;
  top: 120px;
  left: 40px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  z-index: 10000;
  pointer-events: none;
}

.instruction-card {
  background: rgba(0, 12, 24, 0.92);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-left: 5px solid var(--color-warning);
  padding: var(--spacing-4) var(--spacing-5);
  border-radius: var(--radius-lg);
  min-width: 320px;
  /* 降低最小宽度 */
  width: fit-content;
  /* 宽度根据内容自适应 */
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.7),
    inset 0 0 20px rgba(6, 182, 212, 0.15);
  animation: instruction-slide-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: auto;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.instruction-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  margin-bottom: var(--spacing-2-5);
}

.instruction-bell {
  filter: drop-shadow(0 0 6px rgba(234, 179, 8, 0.7));
}

.instruction-title {
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  /* 字体稍大 */
  font-weight: var(--font-weight-bold);
  letter-spacing: 1.5px;
  /* 增加字间距 */
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(6, 182, 212, 0.4);
}

.instruction-content {
  color: #a5f3fc;
  /* 亮色青色 */
  font-size: var(--font-size-base);
  line-height: 1.6;
  white-space: nowrap;
  letter-spacing: 0.8px;
  /* 优化代码可读性 */
  opacity: 0.9;
}

@keyframes instruction-slide-in {
  from {
    opacity: 0;
    transform: translateX(-60px) scale(0.92);
  }

  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}.sim-download-status-container {
  position: fixed;
  left: 40px;
  bottom: 60px;
  width: 600px; /* 减小宽度 */
  background: rgba(0, 15, 30, 0.85);
  border: 1px solid rgba(6, 182, 212, 0.2);
  border-radius: 8px;
  padding: 40px 40px; /* 减小内边距 */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 10001;
  pointer-events: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  animation: sim-status-fade-in 0.4s ease-out;
}

@keyframes sim-status-fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.sim-download-header {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px; /* 减小间距 */
}

.sim-download-hourglass {
  color: #22d3ee;
  animation: sim-spin-pulse 2s linear infinite;
}

@keyframes sim-spin-pulse {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(1); }
}

.sim-download-percentage {
  font-size: 48px; /* 减小百分比数字字体 */
  color: #ffffff;
  letter-spacing: 1px;
}

.sim-download-progress-track {
  width: 100%;
  height: 8px; /* 减小进度条高度 */
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  margin-bottom: 32px; /* 减小间距 */
  overflow: hidden;
}

.sim-download-progress-bar {
  height: 100%;
  background: #22d3ee;
  box-shadow: 0 0 15px rgba(34, 211, 238, 0.8);
  transition: width 0.3s ease-out;
}

.sim-download-title {
  color: #ffffff;
  font-size: 24px; /* 减小标题大小 */
  font-weight: 600;
  margin-bottom: 24px; /* 减小间距 */
  letter-spacing: 1.5px;
}

.sim-download-steps {
  display: flex;
  flex-direction: column;
  gap: 20px; /* 减小步骤间的垂直间距 */
}

.sim-download-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: rgba(6, 182, 212, 0.6);
  font-size: 18px; /* 减小步骤字体大小 */
  transition: all 0.3s;
}

.sim-download-step.active {
  color: #22d3ee;
  font-weight: 500;
}

.sim-download-step.completed {
  color: #22d3ee;
}

.sim-download-step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid currentColor;
}

.sim-download-step.active .sim-download-step-dot {
  background-color: #22d3ee;
  box-shadow: 0 0 10px #22d3ee;
}

.sim-download-step.completed .sim-download-step-dot {
  background-color: #22d3ee;
}

.sim-download-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(34, 211, 238, 0.2);
  border-top-color: #22d3ee;
  border-radius: 50%;
  animation: sim-loading-spin 1s linear infinite;
}

@keyframes sim-loading-spin {
  to { transform: rotate(360deg); }
}

.sim-download-circle {
  width: 16px;
  height: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
}/* 仿真数据弹窗样式 - 显示在地图上的实时数据气泡 */

.sim-data-popup {
  position: relative;
  min-width: 160px;
  max-width: 220px;
  padding: 12px 16px;
  background: rgba(0, 20, 40, 0.85);
  border: 1px solid rgba(6, 182, 212, 0.4);
  border-radius: 8px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 
    0 0 20px rgba(6, 182, 212, 0.3),
    0 4px 16px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  pointer-events: none;
  animation: simPopupFadeIn 0.3s ease-out;
}

@keyframes simPopupFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(5px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* 顶部发光边框效果 */
.sim-data-popup::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(6, 182, 212, 0.8), transparent);
  border-radius: 2px;
}

/* 底部箭头 */
.sim-data-popup::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid rgba(0, 20, 40, 0.85);
}

/* 弹窗标题 */
.sim-data-popup-title {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(6, 182, 212, 0.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 数据行容器 */
.sim-data-popup-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

/* 单行数据 */
.sim-data-popup-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  min-width: 0;
}

.sim-data-popup-label {
  color: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}

.sim-data-popup-value {
  color: #06b6d4;
  font-weight: 600;
  flex: 1 1 auto;
  min-width: 0;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 不同大小的弹窗变体 */
.sim-data-popup.size-sm {
  min-width: 120px;
  padding: 10px 12px;
}

.sim-data-popup.size-sm .sim-data-popup-title {
  font-size: 12px;
  margin-bottom: 6px;
  padding-bottom: 4px;
}

.sim-data-popup.size-sm .sim-data-popup-row {
  font-size: 11px;
}

.sim-data-popup.size-lg {
  min-width: 180px;
  max-width: 220px;
  padding: 14px 18px;
}

.sim-data-popup.size-lg .sim-data-popup-title {
  font-size: 16px;
  margin-bottom: 10px;
  padding-bottom: 8px;
}

.sim-data-popup.size-lg .sim-data-popup-row {
  font-size: 13px;
}

/* 不同状态的颜色变体 */
.sim-data-popup.status-good {
  border-color: rgba(34, 197, 94, 0.5);
  box-shadow: 
    0 0 20px rgba(34, 197, 94, 0.3),
    0 4px 16px rgba(0, 0, 0, 0.4);
}

.sim-data-popup.status-good::before {
  background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.8), transparent);
}

.sim-data-popup.status-good .sim-data-popup-value {
  color: #22c55e;
}

.sim-data-popup.status-warning {
  border-color: rgba(251, 191, 36, 0.5);
  box-shadow: 
    0 0 20px rgba(251, 191, 36, 0.3),
    0 4px 16px rgba(0, 0, 0, 0.4);
}

.sim-data-popup.status-warning::before {
  background: linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.8), transparent);
}

.sim-data-popup.status-warning .sim-data-popup-value {
  color: #fbbf24;
}

.sim-data-popup.status-danger {
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow: 
    0 0 20px rgba(239, 68, 68, 0.3),
    0 4px 16px rgba(0, 0, 0, 0.4);
}

.sim-data-popup.status-danger::before {
  background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.8), transparent);
}

.sim-data-popup.status-danger .sim-data-popup-value {
  color: #ef4444;
}

/* 过场引导弹窗（独立样式，不影响普通弹窗） */
.sim-intro-popup {
  position: relative;
  --intro-max-lines: 6;
  min-width: 320px;
  max-width: 360px;
  padding: 14px 18px;
  background: rgba(0, 20, 40, 0.9);
  border: 1px solid rgba(34, 197, 94, 0.5);
  border-radius: 8px;
  box-shadow:
    0 0 20px rgba(34, 197, 94, 0.3),
    0 4px 16px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
  pointer-events: none;
  animation: simPopupFadeIn 0.3s ease-out;
}

.sim-intro-popup::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.8), transparent);
  border-radius: 2px;
}

.sim-intro-popup::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid rgba(0, 20, 40, 0.9);
}

.sim-intro-popup-title {
  font-size: 20px;
  font-weight: 600;
  color: #22c55e;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(6, 182, 212, 0.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sim-intro-popup-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.sim-intro-popup-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  font-size: 16px;
  min-width: 0;
}

.sim-intro-popup-label {
  color: rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
}

.sim-intro-popup-value {
  color: #ffffff;
  font-weight: 600;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--intro-max-lines);
  line-clamp: var(--intro-max-lines);
  max-height: calc(1.45em * var(--intro-max-lines));
  overflow: hidden;
  text-overflow: ellipsis;
}
.map-container-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.map-container {
  width: 100%;
  height: 100%;
}

/* 加载状态 */
.map-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg-overlay-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  z-index: var(--z-popover);
}

.map-loading-spinner {
  width: 48px;
  height: 48px;
  border: var(--token-border-4) solid rgba(59, 130, 246, 0.2);
  border-top-color: var(--color-info);
  border-radius: var(--radius-full);
  animation: spin 1s linear infinite;
}

.map-loading-text {
  font-size: var(--font-size-base);
  color: var(--color-text-hint);
  letter-spacing: 0.5px;
}

/* 错误提示 */
.map-error-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-bg-overlay-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-popover);
  color: var(--color-danger);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
}

/* 飞线动画增强 */
.flyline-ripple {
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-radius: var(--radius-full);
  animation: flyline-ripple-ani 2s ease-out infinite;
  box-sizing: border-box;
}

@keyframes flyline-ripple-ani {
  0% { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(3.5); opacity: 0; }
}

.flyline-pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  filter: blur(0.5px);
  position: relative;
}

/* 信号立体发光效果 */
.flyline-pulse-dot::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: inherit;
  border-radius: var(--radius-full);
  opacity: 0.5;
  filter: blur(5px);
  animation: flyline-glow-ani 1s ease-in-out infinite alternate;
}

@keyframes flyline-glow-ani {
  from { transform: scale(1); opacity: 0.4; }
  to { transform: scale(1.6); opacity: 0.7; }
}

/* 警告点扁平化样式（静态，无动效） */
.warning-point-pulse {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 214, 184, 0.95), rgba(255, 117, 66, 0.92) 55%, rgba(244, 67, 54, 0.9) 100%);
  border: 1px solid rgba(255, 230, 210, 0.95);
  box-shadow: 0 0 0 5px rgba(255, 112, 67, 0.18);
}

.warning-zone-core {
  position: relative;
}

.warning-zone-core::after {
  content: '';
  position: absolute;
  left: -8px;
  top: -8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 112, 67, 0.12);
  filter: blur(2px);
}
.sim-result-detail {
  padding: var(--spacing-4) var(--spacing-2);
}

.sim-result-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-6);
  padding: var(--spacing-4) var(--spacing-5);
  margin-bottom: var(--spacing-6);
  background: rgba(255, 255, 255, 0.03);
  border: var(--token-border-1) solid var(--color-border-primary);
  border-radius: var(--radius-lg);
}

.sim-result-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-1);
}

.sim-result-score-value {
  font-size: 36px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.sim-result-score-value.success {
  color: var(--color-success);
}

.sim-result-score-value.fail {
  color: var(--color-danger);
}

.sim-result-score-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-hint);
}

.sim-result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--spacing-4);
}

.sim-result-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-1-5);
  padding: var(--spacing-3) var(--spacing-2);
  background: rgba(255, 255, 255, 0.03);
  border: var(--token-border-1) solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-normal);
}

.sim-result-card:hover {
  border-color: var(--color-border-primary);
}

.sim-result-card-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.sim-result-card-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-hint);
}

.sim-result-card-unit {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  margin-left: var(--spacing-0-5);
}

.sim-result-error {
  margin-top: var(--spacing-4);
  padding: var(--spacing-3) var(--spacing-4);
  background: rgba(245, 34, 45, 0.08);
  border: var(--token-border-1) solid rgba(245, 34, 45, 0.3);
  border-radius: var(--radius-md);
  color: var(--color-danger);
  font-size: var(--font-size-sm);
}

.sim-result-time {
  margin-top: var(--spacing-4);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

.sim-result-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
  padding: var(--spacing-10) 0;
  color: var(--color-text-hint);
  font-size: var(--font-size-base);
}.sim-player-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-6);
  padding: var(--spacing-4) var(--spacing-6);
  background: var(--color-bg-glass-darker);
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  border: var(--token-border-1) solid var(--color-border-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-panel);
  width: 100%;
  box-sizing: border-box;
}

/* 播放/暂停按钮 */
.sim-player-play-btn {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: #309b97;
  border: none;
  color: #165256;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--transition-normal);
}

.sim-player-play-btn:hover {
  background: #3ab0ac;
}

.sim-player-play-btn svg {
  width: 32px;
  height: 32px;
  stroke-width: 3;
}

/* 进度区域 */
.sim-player-progress-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
  min-width: 0;
}

.sim-player-progress-bar-wrapper {
  width: 100%;
  height: 12px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-xs);
  cursor: pointer;
  position: relative;
  margin: var(--spacing-1) 0;
}

.sim-player-progress-fill {
  height: 100%;
  background: linear-gradient(90deg,
    #6de9ce 0%,
    #2ffe79 33.33%,
    #11ff97 66.67%,
    #6de9ce 100%
  );
  border-radius: var(--radius-xs);
  box-shadow: 0 0 16px rgba(6, 182, 212, 0.4);
  position: relative;
}

.sim-player-progress-fill::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: #6de9ce;
  border: 2px solid white;
  border-radius: var(--radius-full);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.6);
  z-index: 1;
}

.sim-player-time-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sim-player-time-text {
  font-size: var(--font-size-lg);
  color: white;
}

.sim-player-config-label {
  font-size: var(--font-size-lg);
  color: white;
}

/* 速度按钮组 */
.sim-player-speed-group {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.sim-player-speed-btn {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: var(--token-border-1) solid var(--color-border-default);
  background: var(--color-bg-input);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
  white-space: nowrap;
}

.sim-player-speed-btn.active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-muted);
}

.sim-player-step-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}.sim-timeline-wrapper {
  position: absolute;
  bottom: 16px;  /* ------------32px */
  left: 32px;
  width: 882px;
  z-index: var(--z-dropdown);
  transition: transform var(--transition-slow), opacity var(--transition-slow);
  /* background: rgba(255, 0, 0, 0.1); */
}

.sim-timeline-wrapper.collapsed {
  transform: translateX(-920px);
  opacity: 0;
  pointer-events: none;
}

.sim-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  padding: var(--spacing-2) 48px;
  margin: 0;
}

.sim-timeline-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.sim-timeline-track {
  flex: 1;
  position: relative;
  height: 16px;
  display: flex;
  align-items: center;
}

.sim-timeline-bar-wrapper {
  position: relative;
  width: 100%;
  height: 8px;
  display: flex;
  align-items: center;
}

.sim-timeline-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(90deg,
      #6de9ce 0%,
      #2ffe79 25%,
      #ffffff 50%,
      #11ff97 75%,
      #6de9ce 100%);
  background-size: 200% 100%;
  border-radius: var(--radius-xs);
  box-shadow: 0 0 20px rgba(47, 254, 121, 0.6);
  animation: sim-timeline-flow 2s linear infinite;
}

@keyframes sim-timeline-flow {
  0% {
    background-position: 200% 0;
  }

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

.sim-timeline-markers {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.sim-timeline-marker {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-full);
  border: 2px solid white;
  position: relative;
  z-index: 2;
  transition: all var(--transition-normal);
  cursor: pointer;
  pointer-events: auto;
}

.sim-timeline-marker::after {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
}

.sim-timeline-marker:nth-child(1) {
  background: #6de9ce;
}

.sim-timeline-marker:nth-child(2) {
  background: #3ff98e;
}

.sim-timeline-marker:nth-child(3) {
  background: #20ff88;
}

.sim-timeline-marker:nth-child(4) {
  background: #28faa5;
}

.sim-timeline-marker:nth-child(5) {
  background: #6de9ce;
}

.sim-timeline-marker.active {
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.6);
  transform: scale(1.6);
}

.sim-timeline-labels {
  display: flex;
  justify-content: space-between;
  padding: 0;
}

.sim-timeline-label {
  width: 16px;
  flex: 0 0 16px;
  display: flex;
  justify-content: center;
  white-space: nowrap;
  font-size: var(--font-size-base);
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all var(--transition-normal);
}

.sim-timeline-label.active {
  color: white;
}.right-sim-panel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 var(--spacing-4) var(--spacing-4) var(--spacing-4);
  gap: var(--spacing-4);
  overflow: hidden;
}

.right-sim-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
}

.interop-msg-section {
  flex: 0 0 auto;
  height: 65%;
}

.right-sim-section:not(.interop-msg-section) {
  flex: 1;
}

.right-sim-header {
  padding: var(--spacing-4) var(--spacing-1) var(--spacing-2);
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.right-sim-header .d-section-title {
  margin: 0;
  font-size: var(--font-size-xl);
}

/* 互操作消息看板样式 */
.cyber-msg-list {
  background: linear-gradient(180deg, rgba(10, 33, 50, 0.5) 0%, rgba(8, 28, 43, 0.35) 100%);
  border-radius: 20px;
  border: solid rgba(14, 222, 233, 0.24) 1px;
  border-radius: 0;
  padding: 30px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  /* height: 1062px; */
  flex: 1;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(14, 222, 233, 0.48) rgba(7, 27, 41, 0.28);
}

.cyber-msg-list::-webkit-scrollbar {
  width: 8px;
}

.cyber-msg-list::-webkit-scrollbar-track {
  background: rgba(7, 27, 41, 0.28);
  border-radius: 999px;
}

.cyber-msg-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(14, 222, 233, 0.62) 0%, rgba(14, 222, 233, 0.34) 100%);
  border-radius: 999px;
  border: 1px solid rgba(14, 222, 233, 0.22);
}

.cyber-msg-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(14, 222, 233, 0.78) 0%, rgba(14, 222, 233, 0.46) 100%);
}

.message-item-wrapper {
  display: flex;
  flex-direction: column;
}

.message-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-2);
  transition: background 0.2s;
  min-height: 80px;
}

.message-item:hover {
  background: rgba(14, 222, 233, 0.05);
}

.message-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.message-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.type-tag {
  color: #0EDEE9;
  font-weight: bold;
  font-size: var(--font-size-base);
}

.id-text {
  color: #0EDEE9;
  font-size: var(--font-size-base);
  opacity: 0.8;
}

.message-desc {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--font-size-base);
  line-height: 1.4;
}

.status-indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 80px;
}

.status-icon {
  width: 56px;
  height: 78px;
  object-fit: contain;
}

.cyber-divider {
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, #122232 0%, #0EDEE9 51.92%, #122232 100%);
  opacity: 0.6;
}

.chart-card {
  background: rgba(13, 27, 45, 0.4);
  border: 1px solid rgba(14, 222, 233, 0.15);
  border-radius: var(--radius-md);
  padding: var(--spacing-4);
  position: relative;
  /* flex: 1; */
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  height: 445px;
}

.chart-tooltip-manual {
  position: absolute;
  top: 10px;
  left: 60px;
  z-index: 10;
  background: rgba(0, 0, 0, 0.6);
  padding: 8px 12px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  border: 1px solid rgba(14, 222, 233, 0.3);
  color: #fff;
}

.tooltip-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.dot.before { background: #FDB70F; }
.dot.after { background: #0EDEE9; }

.chart-container-box {
  /* flex: 1; */
  height: 455px;
  min-height: 0;
}






.timeline-container {
  padding: 20px;
  border-radius: 8px;
}

.timeline-item-wrapper {
  position: relative;
  transition: all 0.3s ease;
}

.timeline-item {
  display: flex;
  align-items: stretch;
  gap: 16px;
  position: relative;
  --timeline-gap: 130px;
  margin-bottom: var(--timeline-gap);
}

/* 时间轴节点样式 */
.timeline-node {
  position: relative;
  width: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 20px;
}

.timeline-dot {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  position: relative;
  height: 64px;
  width: 64px;
}

/* 不同类型节点的边框颜色 */
.timeline-dot.safe {
  border-color: #00ff9d;
}

.timeline-dot.warning {
  border-color: #ffd700;
}

.timeline-dot.risk {
  border-color: #ff6b6b;
}

.timeline-dot.accident {
  border-color: #ff3333;
}

.timeline-dot.normal,
.timeline-dot.arrive,
.timeline-dot.user_oper {
  border-color: #00ccff;
}

/* 默认蓝色小圆点 */
.default-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #0EDEE9;
}

/* 用户修改小圆点样式 */
.user-oper-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(180deg, #0EDEE9 0%, #007E85 100%);
  border: 1px solid #0EDEE9;
  box-sizing: border-box;
}

.dot-icon {
  width: 63px;
  height: 63px;
}

/* 时间轴连线 */
.timeline-line {
  position: absolute;
  /* 从图标中心(20px padding + 32px 半高)开始延伸 */
  top: 52px;
  left: 50%;
  width: 2px;
  /* 高度设为 100%（即当前 item 高度）加上 gap，这样正好抵达到下一个 item 的相同 offset 处 */
  height: calc(100% + var(--timeline-gap));
  background: rgba(7, 113, 126, 1);
  transform-origin: top;
  transition: transform 1.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.8s ease-in-out;
  transform: scaleY(1);
  opacity: 1;
}

.timeline-item-wrapper:last-child .timeline-line {
  transform: scaleY(0);
  opacity: 0;
}

/* 新数据入场动画 */
@keyframes timelineItemAppear {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.timeline-item-wrapper:last-child .timeline-item {
  animation: timelineItemAppear 1.5s cubic-bezier(0.4, 0, 0.2, 1) 0.8s both;
}

/* 左侧时间样式 */
.timeline-time {
  min-width: 80px;
  display: flex;
  flex-direction: column;
  color: #FFF;
  font-size: 28px;
  text-align: right;
  font-weight: 400;
  width: 153px;
  margin-right: 15px;
  justify-content: flex-start;
  padding-top: 34px;
}

/* 右侧内容样式 */
.timeline-content {
  flex: 1;
  border-radius: 8px;
  padding: 12px 16px;
  transition: all 0.3s ease;
  margin-left: 11px;
  font-size: 28px;
  border-radius: 10px;
  color: #FFF;
  position: relative;
  background: rgba(16, 53, 77, 0.25);
  overflow: hidden;
  max-width: calc(100% - 200px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 24px;
  min-height: 64px;
}

.timeline-content.clickable {
  cursor: pointer;
}

.timeline-content.non-clickable {
  cursor: pointer;
}

.timeline-content.safe,
.timeline-content.warning,
.timeline-content.risk,
.timeline-content.accident {
  background: rgba(8, 59, 74, 0.50);
  margin-left: 18px;
  position: relative;
  border: 1px solid #0B8C99;
}

.timeline-content.user_oper {
  background: transparent;
  margin-left: 18px;
  position: relative;
  border: none;
  box-shadow: none;
  color: #FFF;
}

/* 三角形样式 */
.timeline-triangle {
  position: absolute;
  left: -10px; /* 向左突出 */
  top: 52px; /* 与图标中心线对齐 */
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 10px solid #0B8C99;
  filter: drop-shadow(-1px 0 1px rgba(0,0,0,0.1));
  z-index: 2;
}

/* 三角形的边框效果 - 使用伪元素实现边框 */
.timeline-triangle::after {
  content: '';
  position: absolute;
  left: 1px; /* 微调位置以显示边框 */
  top: -8px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 10px solid rgba(8, 59, 74, 0.50); /* 使用和内容区相同的背景色 */
  z-index: -1;
}

.timeline-content.user_oper .timeline-triangle {
  display: none;
}

.content-title {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: #e0e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.timeline-content:first-child .content-title{
  color: #0EDEE9;
}

.timeline-content.safe .content-title{
  color: #1DC902;
}
.timeline-content.accident .content-title{
  color: #FA1919;
}
.timeline-content.warning .content-title{
  color: #FDB70F;
}

.timeline-content.risk .content-title{
  color: #FFF9C4;
}

.timeline-content.arrive .content-title {
  color: #0EDEE9;
}

.timeline-content.user_oper .content-title {
  color: #FFFFFF;
}

.timeline-item-wrapper:hover .timeline-content:not(.user_oper) {
  border-color: #00ccff;
  box-shadow: 0 0 20px rgba(0, 204, 255, 0.1);
}

.content-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  overflow: hidden;
  max-width: 100%;
}



.content-id {
  color: #6c7a8a;
}

.content-desc {
  font-size: 28px;
  color: #fff;
  font-weight: 400;
  white-space: nowrap;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
}

.content-single-line {
  font-size: var(--font-size-base);
  color: #e0e8f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.timeline-content.user_oper .content-single-line {
  color: #FFFFFF;
}

.timeline-content.no-ellipsis .content-title,
.timeline-content.no-ellipsis .content-desc,
.timeline-content.no-ellipsis .content-single-line {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.timeline-follow-tooltip {
  position: fixed;
  z-index: 999999; /* 设置极高层级确保不被遮挡 */
  max-width: 600px;
  min-width: 260px;
  pointer-events: none;
  padding: 16px 20px;
  border-radius: 12px;
  background: rgba(7, 27, 41, 0.98);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 24px;
  line-height: 1.6;
  white-space: pre-line;
  word-break: break-word;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(14, 222, 233, 0.5);
}

/* 标签样式 */
.content-tags {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.tag {
  font-size: 28px;
  padding: 2px 8px;
  background: #1e262e;
  border: 1px solid #2a3a4a;
  border-radius: 4px;
  color: #8a9aa8;
}

/* 暗色模式优化 */
@media (prefers-color-scheme: dark) {
  .timeline-container {
    background: linear-gradient(180deg, rgba(10, 33, 50, 0.5) 0%, rgba(8, 28, 43, 0.35) 100%);
  }
  
  .timeline-content {
    background: rgba(16, 53, 77, 0.25);
  }
}.conflict-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  backdrop-filter: none;
  z-index: 9999;
  display: flex;
  pointer-events: none;
}

.conflict-modal-container {
  width: 1300px;
  height: 720px;
  background: rgba(11, 27, 45, 0.75);
  border: 1px solid rgba(111, 121, 131, 0.3);
  border-radius: 10px;
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
  box-shadow: var(--shadow-panel);
  position: absolute;
  right: 934px;
  top: calc(250px + (100vh - 260px) * 0.65 * 0.5);
  transform: translateY(-50%);
  padding: 32px;
  color: #fff;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.conflict-modal-close {
  position: absolute;
  top: 24px;
  right: 24px;
  cursor: pointer;
  color: #0EDEE9;
  transition: opacity 0.2s;
  z-index: 10;
}

.conflict-modal-close:hover {
  opacity: 0.7;
}

.conflict-main-content {
  flex: 1;
  display: flex;
  gap: 0; /* 间距通过 panel 内部 padding 处理 */
  min-height: 0;
  overflow: hidden; /* 确保右侧面板滑入时不溢出或干扰左侧 */
}

.conflict-left-panel {
  width: 550px;
  flex-shrink: 0; /* 防止宽度被挤压 */
  display: flex;
  flex-direction: column;
  padding-right: 32px;
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding-right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden; /* 确保过渡期间内容不溢出 */
}

.conflict-modal-header {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0; /* 允许 flex 子项缩小 */
}

.conflict-emergency-tag {
  color: #FDB70F;
  font-size: 24px;
  font-weight: bold;
  flex-shrink: 0;
}

.conflict-modal-title {
  color: #0EDEE9;
  font-size: 24px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conflict-desc {
  font-size: 18px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 32px;
  width: 100%;
}

.panel-title {
  font-size: 22px;
  color: #0EDEE9;
  margin-bottom: 16px;
  font-weight: bold;
}

.participants-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding-right: 8px;
}

.participant-item {
  height: 64px;
  background: rgba(14, 222, 233, 0.1);
  border: 1px solid rgba(14, 222, 233, 0.3);
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.participant-item.active {
  background: #12828b;
  border-color: #0EDEE9;
}

.participant-item:hover {
  background: rgba(14, 222, 233, 0.2);
}

.role-tag {
  color: #FDB70F;
  font-size: 18px;
  font-weight: bold;
  flex-shrink: 0;
}

.plate-number {
  font-size: 20px;
  flex: 1;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.participant-icon {
  color: #fff;
  flex-shrink: 0;
}

.vertical-divider {
  width: 1px;
  background: rgba(14, 222, 233, 0.2);
  height: 100%;
  flex-shrink: 0;
}

.conflict-right-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-left: 32px;
  animation: conflict-right-slide-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  min-width: 0; /* 允许 flex 子项正确分配空间 */
}

@keyframes conflict-right-slide-in {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.vehicle-id {
  font-size: 28px;
  color: #0EDEE9;
  margin-bottom: 24px;
}

.vehicle-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 40px;
  margin-bottom: 32px;
}

.info-item {
  display: flex;
  font-size: 18px;
  gap: 16px;
  align-items: center;
}

.info-label {
  color: rgba(255, 255, 255, 0.6);
  width: 90px;
  flex-shrink: 0;
  text-align: right;
}

.info-value {
  color: #fff;
}

.info-value.highlight {
  color: #FDB70F;
}

.info-value.status-normal {
  color: #1DC902;
}

.time-range-picker {
  height: 60px;
  border: 1px solid rgba(14, 222, 233, 0.5);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 0 20px;
  font-size: 18px;
  margin-bottom: 24px;
  color: #fff;
}

.time-sep {
  color: rgba(255, 255, 255, 0.6);
}

.track-query-btn {
  height: 60px;
  background: #2D8B93; /* 对应截图的深青色 */
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
  transition: filter 0.2s;
  margin-bottom: 32px;
}

.track-query-btn:hover {
  filter: brightness(1.1);
}

.trip-info {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.trip-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 40px;
  font-size: 18px;
}

.trip-point, .trip-stat {
  display: flex;
  gap: 16px;
  align-items: center;
}

.trip-label {
  color: rgba(255, 255, 255, 0.6);
  width: 90px;
  text-align: right;
  flex-shrink: 0;
}

.trip-value {
  color: #fff;
}

.highlight-val {
  color: #FDB70F;
}

/* 路口监控 视图 */
.monitoring-view {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.monitoring-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.info-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.status-link-icon {
  color: #06b6d4;
  opacity: 0.6;
}

.video-placeholder {
  flex: 1;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(14, 222, 233, 0.3);
  border-radius: 12px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  overflow: hidden;
  /* 使用模拟街道背景图 */
  background-image: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.2)), url('https://images.unsplash.com/photo-1545143333-11bbba59a902?auto=format&fit=crop&q=80&w=1200');
  background-size: cover;
  background-position: center;
}

.video-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background: rgba(0, 0, 0, 0.6);
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.video-play-btn {
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.video-play-btn:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.3);
}

.back-btn {
  height: 48px;
  padding: 0 40px;
  background: transparent;
  border: 1px solid rgba(14, 222, 233, 0.5);
  border-radius: 8px;
  color: #0EDEE9;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s;
  align-self: flex-start;
}

.back-btn:hover {
  background: rgba(14, 222, 233, 0.1);
}

/* 滚动条美化 */
.participants-list::-webkit-scrollbar {
  width: 6px;
}
.participants-list::-webkit-scrollbar-thumb {
  background: rgba(14, 222, 233, 0.3);
  border-radius: 3px;
}/* 全局统一滚动条样式 */

/* Webkit 浏览器 (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

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

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

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

/* Firefox 滚动条样式 */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar-thumb) transparent;
}

/* 暗色滚动条变体 - 用于深色背景容器 */
.scrollbar-dark::-webkit-scrollbar-thumb {
  background-color: var(--color-scrollbar-thumb-dark);
}

.scrollbar-dark::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-scrollbar-thumb-dark-hover);
}

/* 隐藏滚动条但保留滚动功能 */
.scrollbar-hidden {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scrollbar-hidden::-webkit-scrollbar {
  display: none;
}
/* 标题 */
.text-heading {
  font-size: var(--font-size-5xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1.2;
}

/* 标题 - 小 */
.text-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  line-height: 1.3;
}

/* 正文 */
.text-body {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* 正文 - 小 */
.text-body-sm {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-tertiary);
  line-height: 1.5;
}

/* 标签/辅助 */
.text-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

/* 代码 */
.text-code {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

/* 数值显示 */
.text-metric {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  line-height: 1.1;
}

/* 小数值 */
.text-metric-sm {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
}:root {
  /* 阴影 */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-2xl: 0 20px 50px rgba(0, 0, 0, 0.5);
  --shadow-glow-primary: 0 0 15px rgba(6, 182, 212, 0.3);
  --shadow-glow-primary-strong: 0 0 20px rgba(6, 182, 212, 0.5);
  --shadow-glow-primary-subtle: 0 0 10px rgba(6, 182, 212, 0.3);
  --shadow-glow-primary-faint: 0 0 8px rgba(6, 182, 212, 0.2);
  --shadow-button: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-button-hover: 0 6px 16px rgba(0, 217, 255, 0.3);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-panel: 0 0 30px rgba(0, 0, 0, 0.6);
  --shadow-modal: 0 20px 50px rgba(0, 0, 0, 0.5);
  --shadow-dialog: 0 16px 48px rgba(0, 0, 0, 0.5);
  
  /* 模糊 */
  --blur-sm: blur(4px);
  --blur-md: blur(8px);
  --blur-lg: blur(12px);
  
  /* 过渡 */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;
  --transition-slower: 0.5s ease;
  
  /* 文本阴影 */
  --text-shadow-glow: 0 0 10px rgba(6, 182, 212, 0.5);
  --text-shadow-glow-strong: 0 0 20px rgba(6, 182, 212, 0.3);
  --text-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.5);
  --text-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* 玻璃态背景 */
.glass-bg {
  background: var(--color-bg-glass);
  border: var(--token-border-1) solid var(--color-primary);
  backdrop-filter: var(--blur-sm);
  -webkit-backdrop-filter: var(--blur-sm);
}

/* 动画关键帧 */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
:root {
  /* === 颜色语义 === */
  
  /* 品牌/主色 */
  --color-primary: var(--token-cyan-500);
  --color-primary-light: var(--token-cyan-400);
  --color-primary-dark: var(--token-cyan-600);
  --color-primary-muted: rgba(6, 182, 212, 0.2);
  --color-primary-subtle: rgba(6, 182, 212, 0.1);
  --color-primary-faint: rgba(6, 182, 212, 0.05);
  
  /* 主色 - 交互状态 */
  --color-primary-hover: rgba(6, 182, 212, 0.35);
  --color-primary-active: rgba(6, 182, 212, 0.15);
  --color-primary-active-strong: rgba(6, 182, 212, 0.25);
  
  /* 功能色 */
  --color-success: var(--color-primary);
  --color-success-light: var(--color-primary-light);
  --color-warning: var(--token-yellow-500);
  --color-warning-light: var(--token-yellow-400);
  --color-danger: var(--token-red-500);
  --color-danger-light: var(--token-red-400);
  --color-danger-dark: var(--token-red-600);
  --color-info: var(--token-blue-500);
  --color-info-light: var(--token-blue-400);
  --color-orange: var(--token-orange-500);
  --color-purple: var(--token-purple-500);
  --color-purple-light: var(--token-purple-400);
  --color-violet: var(--token-violet-500);
  --color-indigo: var(--token-indigo-500);
  --color-teal: var(--token-teal-500);
  
  /* 交通状态 */
  --color-traffic-smooth: var(--color-primary);
  --color-traffic-slow: var(--color-warning);
  --color-traffic-congested: var(--color-danger);
  
  /* 文本 */
  --color-text-primary: var(--token-white);
  --color-text-secondary: rgba(255, 255, 255, 0.9);
  --color-text-tertiary: rgba(255, 255, 255, 0.8);
  --color-text-muted: rgba(255, 255, 255, 0.6);
  --color-text-subtle: rgba(255, 255, 255, 0.5);
  --color-text-disabled: rgba(255, 255, 255, 0.4);
  --color-text-faint: rgba(255, 255, 255, 0.35);
  --color-text-hint: var(--token-gray-400);
  
  /* 背景 */
  --color-bg-page: var(--token-gray-900);
  --color-bg-elevated: var(--token-gray-800);
  --color-bg-card: rgba(15, 23, 42, 0.4);
  --color-bg-card-solid: rgba(15, 23, 42, 0.6);
  --color-bg-input: rgba(0, 0, 0, 0.3);
  --color-bg-input-focus: rgba(0, 0, 0, 0.5);
  --color-bg-overlay: rgba(0, 0, 0, 0.6);
  --color-bg-overlay-heavy: rgba(15, 23, 42, 0.85);
  --color-bg-overlay-dark: rgba(15, 23, 42, 0.95);
  --color-bg-hover: rgba(255, 255, 255, 0.05);
  --color-bg-hover-strong: rgba(255, 255, 255, 0.1);
  --color-bg-active: rgba(255, 255, 255, 0.08);
  --color-bg-panel: rgba(8, 20, 35, 0.95);
  --color-bg-panel-dark: rgba(5, 12, 20, 0.98);
  --color-bg-glass: rgba(11, 27, 45, 0.5);
  --color-bg-glass-dark: rgba(10, 15, 30, 0.75);
  --color-bg-glass-darker: rgba(10, 15, 30, 0.92);
  --color-bg-modal: rgba(13, 20, 36, 0.85);
  --color-bg-code: #0d1117;
  --color-bg-table-header: var(--token-gray-900);
  --color-bg-subtle: rgba(255, 255, 255, 0.03);
  
  /* 边框 */
  --color-border-default: rgba(255, 255, 255, 0.2);
  --color-border-muted: rgba(255, 255, 255, 0.1);
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-border-faint: rgba(255, 255, 255, 0.05);
  --color-border-focus: var(--color-primary);
  
  /* 边框 - 主色系列 */
  --color-border-primary-faint: rgba(6, 182, 212, 0.15);
  --color-border-primary: rgba(6, 182, 212, 0.3);
  --color-border-primary-medium: rgba(6, 182, 212, 0.5);
  --color-border-primary-strong: rgba(6, 182, 212, 0.6);
  --color-border-primary-vivid: rgba(6, 182, 212, 0.8);
  --color-border-primary-solid: var(--token-cyan-500);
  
  /* 滚动条 */
  --color-scrollbar-thumb: rgba(6, 182, 212, 0.3);
  --color-scrollbar-thumb-hover: rgba(6, 182, 212, 0.5);
  --color-scrollbar-thumb-dark: rgba(255, 255, 255, 0.2);
  --color-scrollbar-thumb-dark-hover: rgba(255, 255, 255, 0.3);
  
  /* 渐变 */
  --gradient-primary: linear-gradient(135deg, var(--token-teal-600) 0%, var(--token-cyan-500) 100%);
  --gradient-avatar-ai: linear-gradient(135deg, var(--token-indigo-500) 0%, var(--token-purple-500) 100%);
  --gradient-avatar-user: linear-gradient(135deg, #f59e0b 0%, var(--token-yellow-400) 100%);
  --gradient-badge: linear-gradient(135deg, var(--token-teal-600) 0%, var(--token-cyan-500) 100%);
  
  /* === 排版语义 === */
  
  --font-size-2xs: var(--token-text-2xs);
  --font-size-xs: var(--token-text-xs);
  --font-size-sm: var(--token-text-sm);
  --font-size-md: var(--token-text-md);
  --font-size-base: var(--token-text-base);
  --font-size-lg: var(--token-text-lg);
  --font-size-xl: var(--token-text-xl);
  --font-size-2xl: var(--token-text-2xl);
  --font-size-3xl: var(--token-text-3xl);
  --font-size-4xl: var(--token-text-4xl);
  --font-size-5xl: var(--token-text-5xl);
  --font-size-6xl: var(--token-text-6xl);
  --font-size-7xl: var(--token-text-7xl);
  --font-size-8xl: var(--token-text-8xl);
  
  --font-weight-normal: var(--token-weight-normal);
  --font-weight-medium: var(--token-weight-medium);
  --font-weight-semibold: var(--token-weight-semibold);
  --font-weight-bold: var(--token-weight-bold);
  --font-weight-extrabold: var(--token-weight-extrabold);
  
  /* === 间距语义 === */
  
  --spacing-0: var(--token-space-0);
  --spacing-0-5: var(--token-space-0-5);
  --spacing-1: var(--token-space-1);
  --spacing-1-5: var(--token-space-1-5);
  --spacing-2: var(--token-space-2);
  --spacing-2-5: var(--token-space-2-5);
  --spacing-3: var(--token-space-3);
  --spacing-3-5: var(--token-space-3-5);
  --spacing-4: var(--token-space-4);
  --spacing-5: var(--token-space-5);
  --spacing-6: var(--token-space-6);
  --spacing-8: var(--token-space-8);
  --spacing-10: var(--token-space-10);
  --spacing-12: var(--token-space-12);
  --spacing-15: var(--token-space-15);
  
  /* === 圆角语义 === */
  
  --radius-xs: var(--token-radius-xs);
  --radius-sm: var(--token-radius-sm);
  --radius-md: var(--token-radius-md);
  --radius-lg: var(--token-radius-lg);
  --radius-xl: var(--token-radius-xl);
  --radius-2xl: var(--token-radius-2xl);
  --radius-3xl: var(--token-radius-3xl);
  --radius-4xl: var(--token-radius-4xl);
  --radius-full: var(--token-radius-full);
  
  /* === 层级 (z-index) === */
  
  --z-base: 1;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-fixed: 1200;
  --z-modal-backdrop: 1300;
  --z-modal: 1400;
  --z-panel: 1500;
  --z-popover: 2000;
  --z-tooltip: 2500;
  --z-dialog: 3000;
  --z-loading: 4000;
  --z-top: 9999;
}:root {
  /* 色板 - 原子值 */
  --token-cyan-300: #67e8f9;
  --token-cyan-400: #22d3ee;
  --token-cyan-500: #06b6d4;
  --token-cyan-600: #0891b2;
  --token-cyan-700: #0e7490;
  
  --token-blue-400: #60a5fa;
  --token-blue-500: #3b82f6;
  --token-blue-600: #2563eb;
  
  --token-green-400: #4ade80;
  --token-green-500: #22c55e;
  --token-green-600: #16a34a;
  
  --token-yellow-400: #facc15;
  --token-yellow-500: #eab308;
  --token-yellow-600: #ca8a04;
  
  --token-orange-500: #f97316;
  
  --token-red-400: #f87171;
  --token-red-500: #ef4444;
  --token-red-600: #dc2626;
  
  --token-purple-400: #c084fc;
  --token-purple-500: #a855f7;
  --token-purple-600: #9333ea;
  --token-violet-500: #8b5cf6;
  --token-indigo-500: #6366f1;
  
  --token-teal-500: #14b8a6;
  --token-teal-600: #0d9488;
  
  --token-white: #ffffff;
  --token-black: #000000;
  
  --token-gray-50: #f8fafc;
  --token-gray-100: #f1f5f9;
  --token-gray-200: #e2e8f0;
  --token-gray-300: #cbd5e1;
  --token-gray-400: #94a3b8;
  --token-gray-500: #64748b;
  --token-gray-600: #475569;
  --token-gray-700: #334155;
  --token-gray-800: #1e293b;
  --token-gray-900: #0f172a;
  --token-gray-950: #0a0f1a;
  
  /* 字号 - 4K适配 (约2倍) */
  --token-text-2xs: 20px;
  --token-text-xs: 22px;
  --token-text-sm: 24px;
  --token-text-md: 26px;
  --token-text-base: 28px;
  --token-text-lg: 30px;
  --token-text-xl: 32px;
  --token-text-2xl: 36px;
  --token-text-3xl: 40px;
  --token-text-4xl: 44px;
  --token-text-5xl: 48px;
  --token-text-6xl: 52px;
  --token-text-7xl: 60px;
  --token-text-8xl: 64px;
  
  /* 字重 */
  --token-weight-normal: 400;
  --token-weight-medium: 500;
  --token-weight-semibold: 600;
  --token-weight-bold: 700;
  --token-weight-extrabold: 800;
  
  /* 间距 - 4K适配 (约2倍) */
  --token-space-0: 0px;
  --token-space-0-5: 4px;
  --token-space-1: 8px;
  --token-space-1-5: 12px;
  --token-space-2: 16px;
  --token-space-2-5: 20px;
  --token-space-3: 24px;
  --token-space-3-5: 28px;
  --token-space-4: 32px;
  --token-space-5: 40px;
  --token-space-6: 48px;
  --token-space-8: 64px;
  --token-space-10: 80px;
  --token-space-12: 96px;
  --token-space-15: 120px;
  
  /* 圆角 - 4K适配 */
  --token-radius-xs: 4px;
  --token-radius-sm: 8px;
  --token-radius-md: 12px;
  --token-radius-lg: 16px;
  --token-radius-xl: 20px;
  --token-radius-2xl: 24px;
  --token-radius-3xl: 32px;
  --token-radius-4xl: 40px;
  --token-radius-full: 9999px;
  
  /* 透明度 */
  --token-opacity-5: 0.05;
  --token-opacity-8: 0.08;
  --token-opacity-10: 0.1;
  --token-opacity-15: 0.15;
  --token-opacity-20: 0.2;
  --token-opacity-25: 0.25;
  --token-opacity-30: 0.3;
  --token-opacity-35: 0.35;
  --token-opacity-40: 0.4;
  --token-opacity-50: 0.5;
  --token-opacity-60: 0.6;
  --token-opacity-70: 0.7;
  --token-opacity-80: 0.8;
  --token-opacity-85: 0.85;
  --token-opacity-90: 0.9;
  --token-opacity-92: 0.92;
  --token-opacity-95: 0.95;
  --token-opacity-98: 0.98;
  
  /* 线宽 - 4K适配 */
  --token-border-1: 2px;
  --token-border-2: 4px;
  --token-border-4: 8px;

}