/* ========================================================
   layout.css — 顶栏 / 主区域 / 通用面板 / 通用抽屉
   来源：V22 HTML <style> 拆分 — 不改逻辑/不重构
   v22.8 修复：原文件头部 6-17 行是 base.css 末尾 .ai-segment-list 规则
   被截断后残留的属性 + 尾闭合。该段属性已在 base.css 内补完，本文件
   改为直接从 .ai-segment-list.show 开始。
   ======================================================== */

  .ai-segment-list.show { display: block; }
  /* V11: 列表副标题 */
  .ai-segment-list-subtitle {
    font-size: 10px;
    color: var(--text-tertiary);
    margin-bottom: 8px;
    padding-left: 11px;
    letter-spacing: 0.3px;
  }
  .ai-segment-list-subtitle strong {
    color: var(--accent-cyan);
    font-weight: 600;
  }
  .ai-segment-list-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-cyan);
    border-left: 3px solid var(--accent-cyan);
    padding-left: 8px;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
  }
  .ai-segment-list-title strong { color: var(--text-primary); font-weight: 700; }
  .ai-segment-card {
    background: var(--bg-panel-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--text-tertiary);
    padding: 7px 10px;          /* V12: 9 → 7 进一步精简，3 张卡 + 标题恰好放下 */
    margin-bottom: 6px;
    cursor: pointer;
    transition: all 0.18s;
    font-size: 11.5px;
  }
  .ai-segment-card:last-child { margin-bottom: 0; }
  .ai-segment-card:hover {
    background: rgba(0, 212, 255, 0.05);
    border-color: var(--accent-cyan);
  }
  .ai-segment-card.risk-high {
    border-left-color: var(--risk-red);
    background: linear-gradient(90deg, rgba(231, 76, 60, 0.06) 0%, var(--bg-panel-2) 50%);
  }
  .ai-segment-card.risk-high:hover {
    background: linear-gradient(90deg, rgba(231, 76, 60, 0.12) 0%, rgba(0, 212, 255, 0.05) 60%);
  }
  .ai-segment-card.risk-mid-high {
    border-left-color: var(--accent-amber);
    background: linear-gradient(90deg, rgba(255, 181, 46, 0.06) 0%, var(--bg-panel-2) 50%);
  }
  .ai-segment-card.risk-mid-high:hover {
    background: linear-gradient(90deg, rgba(255, 181, 46, 0.12) 0%, rgba(0, 212, 255, 0.05) 60%);
  }
  .ai-segment-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
  }
  .ai-segment-highway-title {
    flex: 1;
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: 0.3px;
  }
  .ai-segment-highway-title .ai-segment-highway {
    color: var(--accent-cyan);
    font-family: "Roboto Mono", monospace;
    font-size: 12px;
    margin-right: 4px;
  }
  .ai-segment-risk-tag {
    flex-shrink: 0;
    padding: 1px 7px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
  }
  .ai-segment-risk-tag.risk-high { color: var(--risk-red); background: rgba(231, 76, 60, 0.18); }
  .ai-segment-risk-tag.risk-mid-high { color: var(--accent-amber); background: rgba(255, 181, 46, 0.18); }
  /* V11: 隐藏原 meta 行（"桥梁12处 · 长下坡2处"等详情留给概览页） */
  .ai-segment-meta {
    display: none;
  }
  .ai-segment-risks {
    font-size: 10.5px;
    color: var(--text-secondary);
    margin: 2px 0 4px;
    letter-spacing: 0.2px;
  }
  .ai-segment-risks strong { color: var(--text-primary); }
  /* V11: 卡片底部 footer = 节点 chip + CTA；V12: margin-top 收紧 */
  .ai-segment-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2px;
  }
  .ai-segment-node-chip {
    font-size: 10px;
    padding: 2px 7px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    letter-spacing: 0.3px;
    font-family: "Roboto Mono", monospace;
    font-weight: 600;
  }
  .ai-segment-node-chip.risk-high {
    border-color: rgba(231, 76, 60, 0.45);
    color: var(--risk-red);
    background: rgba(231, 76, 60, 0.06);
  }
  .ai-segment-node-chip.risk-mid-high {
    border-color: rgba(255, 181, 46, 0.45);
    color: var(--accent-amber);
    background: rgba(255, 181, 46, 0.06);
  }
  .ai-segment-cta {
    font-size: 11px;
    color: #c084fc;
    letter-spacing: 0.5px;
    font-weight: 600;
  }
  .ai-segment-list.dimmed { opacity: 0.55; transform: scale(0.985); }
  .ai-segment-list.dimmed .ai-segment-card { pointer-events: none; }
  /* V8 Bug 3 修复：概览页打开时直接隐藏路段列表 */
  .ai-segment-list.hidden-by-overview { display: none !important; }

  /* === V12: 路段卡片"选中态"视觉强化 === */
  .ai-segment-card { position: relative; }
  /* 未选中卡片轻微变弱，让选中卡片视觉上前置 */
  .ai-segment-list .ai-segment-card:not(.selected) { opacity: 0.62; }
  .ai-segment-list .ai-segment-card:not(.selected):hover { opacity: 0.92; }
  /* V13: 选中卡片更明显 — 左侧 3px 实色 cyan + 浅底 + 强外发光 + "● 当前选中" chip */
  .ai-segment-card.selected {
    border-left: 3px solid var(--accent-cyan) !important;
    background: linear-gradient(90deg, rgba(0, 212, 255, 0.13) 0%, rgba(15, 28, 48, 0.5) 60%) !important;
    box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.45), 0 0 18px rgba(0, 212, 255, 0.18);
    opacity: 1;
  }
  .ai-segment-card.selected .ai-segment-risk-tag { display: none; }
  .ai-segment-card.selected::after {
    content: '● 当前选中';
    position: absolute;
    top: 6px; right: 8px;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--accent-cyan);
    background: rgba(0, 212, 255, 0.18);
    padding: 2px 7px;
    letter-spacing: 0.4px;
    box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.28);
  }
  /* V12: 节点 chip 在父子联动结构里仍然有用（一眼看到节点数），但可弱化对比 */
  .ai-segment-node-chip { opacity: 0.85; }
  
  /* === V12 核心: 左下"节点风险清单"（联动当前选中路段）— V13 同步 320px === */
  .impact-nodes-list {
    position: absolute;
    left: 16px;
    bottom: 100px;       /* 让出底部时间轴 + data-stream */
    width: 320px;        /* V13: 360 → 320，与路段卡片同步 */
    max-height: 260px;
    overflow-y: auto;
    z-index: 22;
    background: rgba(10, 20, 36, 0.92);
    border: 1px solid var(--border-light);
    border-left: 3px solid #a855f7;  /* 紫色与路段卡片的 cyan 区分 */
    backdrop-filter: blur(8px);
    padding: 9px 11px 8px;
    display: none;
  }
  .impact-nodes-list.show { display: block; }
  .impact-nodes-list::-webkit-scrollbar { width: 4px; }
  .impact-nodes-list::-webkit-scrollbar-track { background: var(--bg-panel); }
  .impact-nodes-list::-webkit-scrollbar-thumb { background: var(--border-light); }
  
  /* V13: header 紫色背景 + 抹掉父容器 padding 形成贴边色块（视觉上和 cyan 路段框区分） */
  .impact-nodes-header {
    background: rgba(168, 85, 247, 0.10);
    margin: -9px -11px 8px;
    padding: 6px 11px 6px;
    border-bottom: 1px solid rgba(168, 85, 247, 0.22);
  }
  .impact-nodes-title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 11px;
    font-weight: 600;
    color: #c084fc;
    letter-spacing: 0.5px;
  }
  /* V13: 标题前加 "↓ 路段下钻" 暗示父子关系 */
  .impact-nodes-title::before {
    content: '↓ 路段下钻 ';
    color: var(--text-tertiary);
    font-size: 10px;
    font-weight: 400;
    margin-right: 4px;
    letter-spacing: 0.3px;
  }
  .impact-nodes-sort-hint {
    font-size: 10px;
    color: var(--text-tertiary);
    font-weight: 400;
    letter-spacing: 0.3px;
  }
  .impact-nodes-subtitle {
    font-size: 10.5px;
    color: var(--text-tertiary);
    margin-top: 3px;
    letter-spacing: 0.3px;
  }
  .impact-nodes-subtitle strong {
    color: var(--text-secondary);
    font-weight: 600;
  }
  
  .impact-node-row {
    display: grid;
    grid-template-columns: 38px 1fr auto auto 14px;
    gap: 6px;
    align-items: center;
    font-size: 11px;
    padding: 5px 7px;
    margin: 2px 0;
    border-left: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1.3;
  }
  .impact-node-row.risk-high {
    border-left-color: var(--risk-red);
    background: rgba(231, 76, 60, 0.06);
  }
  .impact-node-row.risk-mid-high {
    border-left-color: var(--accent-amber);
    background: rgba(255, 181, 46, 0.05);
  }
  .impact-node-row.risk-mid {
    border-left-color: var(--risk-yellow);
    background: rgba(241, 196, 15, 0.04);
  }
  .impact-node-row:hover {
    background: rgba(0, 212, 255, 0.07);
    transform: translateX(1px);
  }
  .impact-node-row .node-km {
    font-family: 'Roboto Mono', monospace;
    font-size: 10px;
    color: var(--text-tertiary);
  }
  .impact-node-row .node-name {
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .impact-node-row .node-risk-type {
    font-size: 10px;
    color: var(--text-tertiary);
    white-space: nowrap;
  }
  .impact-node-row .node-level-tag {
    font-size: 10px;
    padding: 1px 5px;
    font-weight: 700;
    letter-spacing: 0.3px;
  }
  .impact-node-row .node-level-tag.risk-high    { color: var(--risk-red);    background: rgba(231, 76, 60, 0.18); }
  .impact-node-row .node-level-tag.risk-mid-high{ color: var(--accent-amber);background: rgba(255, 181, 46, 0.18); }
  .impact-node-row .node-level-tag.risk-mid     { color: var(--risk-yellow); background: rgba(241, 196, 15, 0.16); }
  .impact-node-row .node-arrow {
    color: #c084fc;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.15s;
  }
  .impact-node-row:hover .node-arrow {
    color: var(--accent-cyan);
    transform: translateX(2px);
  }

  /* V4.0 路段孪生概览页抽屉（第二层）头部关闭按钮（V8 Bug 3.3） */
  .seg-overview-head { position: relative; }
  .seg-overview-close {
    position: absolute;
    top: 12px; right: 14px;
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    width: 26px; height: 26px;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    line-height: 1;
    transition: all 0.15s;
    z-index: 5;
  }
  .seg-overview-close:hover {
    border-color: var(--risk-red);
    color: var(--risk-red);
    background: rgba(231, 76, 60, 0.1);
  }
  
  /* V8 Bug 3.1 修复：桩号示意 SVG 增大 */
  .seg-axis-wrap {
    /* 已有定义 padding，新增最小高度 */
    min-height: 130px;
  }
  
  /* === V8 Bug 1 + Bug 4 修复：摄像头模态浮层（保留概览页） === */
  .camera-modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1900;
    display: none;
    backdrop-filter: blur(2px);
  }
  .camera-modal-backdrop.show { display: block; }
  .camera-modal {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: 540px;
    max-height: 86vh;
    z-index: 2000;
    /* V11: 渐变背景 + 微 cyan 高光边框，与概览页保持视觉延续 */
    background: linear-gradient(180deg, var(--bg-panel-2) 0%, var(--bg-panel) 100%);
    border: 1px solid rgba(0, 212, 255, 0.22);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 212, 255, 0.06);
    display: none;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .camera-modal.show {
    display: flex;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  .camera-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.08) 0%, transparent 70%);
    flex-shrink: 0;
  }
  .camera-modal-titleblock { flex: 1; min-width: 0; }
  .camera-modal-tag {
    display: inline-block;
    background: rgba(0, 212, 255, 0.18);
    color: var(--accent-cyan);
    font-family: "Roboto Mono", monospace;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
  }
  .camera-modal-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 3px;
  }
  .camera-modal-subtitle {
    font-size: 11.5px;
    color: var(--text-secondary);
  }
  .camera-modal-close {
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    width: 26px; height: 26px;
    cursor: pointer;
    font-size: 13px;
    font-family: inherit;
    line-height: 1;
    flex-shrink: 0;
    margin-left: 10px;
  }
  .camera-modal-close:hover {
    border-color: var(--risk-red);
    color: var(--risk-red);
  }
  .camera-modal-body {
    overflow-y: auto;
    padding: 12px 16px 14px;
    flex: 1;
  }
  .camera-modal-section { margin-bottom: 12px; }
  .camera-modal-section:last-child { margin-bottom: 0; }
  .camera-modal-section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    letter-spacing: 1px;
    margin-bottom: 6px;
  }
  .camera-modal .camera-feed {
    background: #000;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }
  .camera-modal .camera-feed svg { width: 100%; height: 100%; display: block; }
  .camera-modal-alert {
    margin-top: 8px;
    padding: 7px 10px;
    background: rgba(231, 76, 60, 0.1);
    border-left: 2px solid var(--risk-red);
    color: var(--risk-red);
    font-size: 12px;
    font-weight: 500;
  }
  .camera-modal-actions {
    margin: 0;
    padding-left: 18px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.7;
  }
  .camera-modal-actions li { margin: 3px 0; }
  .camera-modal-actions strong { color: var(--text-primary); }
  .camera-modal-footer {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
  }
  .camera-modal-btn {
    padding: 7px 14px;
    border: 1px solid var(--border-light);
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: all 0.15s;
  }
  .camera-modal-btn.ghost:hover {
    border-color: var(--text-secondary);
    color: var(--text-primary);
  }
  .camera-modal-btn.primary {
    background: linear-gradient(135deg, var(--accent-cyan), #0099cc);
    border-color: var(--accent-cyan);
    color: var(--bg-deep);
    font-weight: 600;
  }
  .camera-modal-btn.primary:hover {
    box-shadow: 0 0 14px rgba(0, 212, 255, 0.5);
  }
  
  /* === V8 必做项 1：高速车流量热力着色（colors via stroke 由 JS 注入）=== */
  /* 注：着色通过 JS 设 stroke 属性，CSS 不参与；此处仅为图层透明度统一 */
  
  /* === V8 必做项 2：气象云层（半透明云团缓慢漂移）=== */
  #ov-weather-layer { pointer-events: none; }

  /* === V4.0 路段孪生概览页抽屉（第二层）=== */
  .seg-overview-head {
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.05) 0%, transparent 80%);
  }
  .seg-overview-head.risk-mid-high {
    background: linear-gradient(135deg, rgba(255, 181, 46, 0.05) 0%, transparent 80%);
  }
  .seg-overview-tag {
    display: inline-block;
    background: rgba(0, 212, 255, 0.18);
    color: var(--accent-cyan);
    font-family: "Roboto Mono", monospace;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
  }
  .seg-overview-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    margin-bottom: 6px;
  }
  .seg-overview-meta {
    font-size: 11.5px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 8px;
  }
  .seg-overview-meta-line {
    display: block;
  }
  .seg-overview-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    font-size: 11.5px;
    margin-top: 6px;
  }
  .seg-overview-summary .level-badge {
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
  }
  .seg-overview-summary .level-badge.high { background: rgba(231, 76, 60, 0.2); color: var(--risk-red); }
  .seg-overview-summary .level-badge.mid-high { background: rgba(255, 181, 46, 0.2); color: var(--accent-amber); }
  .seg-overview-summary .main-risks { color: var(--text-secondary); }
  .seg-overview-summary .main-risks strong { color: var(--text-primary); }
  .seg-overview-cta-btn {
    margin-top: 10px;
    width: 100%;
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    color: white;
    border: none;
    padding: 9px 14px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
  }
  .seg-overview-cta-btn:hover { box-shadow: 0 0 16px rgba(168, 85, 247, 0.5); }
  
  /* 概览主体两栏 */
  .seg-overview-body {
    display: grid;
    grid-template-columns: 60% 40%;
    gap: 0;
  }
  .seg-overview-left {
    padding: 14px 14px 14px 16px;
    border-right: 1px solid var(--border);
  }
  .seg-overview-right {
    padding: 14px 16px 14px 14px;
    overflow-y: auto;
    max-height: calc(100vh - 280px);
  }
  
  /* 横向桩号轴 SVG */
  .seg-axis-wrap {
    background: var(--bg-deep);
    border: 1px solid var(--border);
    padding: 12px 8px 6px;
    margin-bottom: 12px;
    position: relative;
  }
  .seg-axis-svg {
    width: 100%;
    display: block;
  }
  .seg-axis-citystart, .seg-axis-cityend {
    font-size: 11px;
    fill: var(--text-primary);
    font-weight: 600;
    /* V11 #2.4: 加描边让文字在风险点光圈背景上也清晰 */
    stroke: var(--bg-panel);
    stroke-width: 3;
    paint-order: stroke;
  }
  .seg-axis-line {
    stroke: var(--border-light);
    stroke-width: 1.5;
  }
  .seg-axis-tick { stroke: var(--text-tertiary); stroke-width: 1; }
  .seg-axis-tick-text {
    fill: var(--text-secondary); font-size: 10px; font-family: "Roboto Mono", monospace;
    /* V11 #2.4: 桩号刻度文字加描边 */
    stroke: var(--bg-panel);
    stroke-width: 2.5;
    paint-order: stroke;
  }
  .seg-risk-dot { transition: r 0.3s; cursor: pointer; }
  .seg-risk-dot.high { fill: var(--risk-red); }
  .seg-risk-dot.mid-high { fill: var(--accent-amber); }
  .seg-risk-dot.mid { fill: var(--risk-yellow); }
  .seg-risk-pulse { fill: rgba(231, 76, 60, 0.3); animation: seg-pulse 3s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
  .seg-risk-pulse.mid-high { fill: rgba(255, 181, 46, 0.3); }
  .seg-risk-pulse.mid { fill: rgba(241, 196, 15, 0.25); }
  @keyframes seg-pulse {
    0%, 100% { opacity: 0.6; r: 8; }
    50% { opacity: 0; r: 14; }
  }
  .seg-monitor-dot { fill: var(--text-tertiary); opacity: 0.65; }
  .seg-axis-label-text {
    fill: var(--text-secondary);
    font-size: 9.5px;
    font-family: inherit;
  }
  .seg-axis-label-text.high { fill: var(--risk-red); font-weight: 600; }
  .seg-axis-label-text.mid-high { fill: var(--accent-amber); }
  
  /* 4 个 KPI 卡片 */
  .seg-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
  .seg-kpi-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    padding: 8px 6px;
    text-align: center;
  }
  .seg-kpi-num {
    font-size: 18px;
    font-weight: 700;
    font-family: "Roboto Mono", monospace;
    color: var(--text-primary);
    line-height: 1.1;
  }
  .seg-kpi-num.red { color: var(--risk-red); }
  .seg-kpi-num.amber { color: var(--accent-amber); }
  .seg-kpi-num.cyan { color: var(--accent-cyan); }
  .seg-kpi-label {
    font-size: 10px;
    color: var(--text-tertiary);
    margin-top: 4px;
    letter-spacing: 0.5px;
  }
  
  /* 7 类警示点分组 */
  .point-group {
    margin-bottom: 10px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    padding: 8px 10px;
  }
  .point-group-resource { background: rgba(46, 204, 113, 0.04); border-color: rgba(46, 204, 113, 0.2); }
  .point-group-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.8px;
    margin-bottom: 6px;
    border-left: 2px solid var(--accent-cyan);
    padding-left: 6px;
  }
  .point-group-resource .point-group-title { border-left-color: var(--risk-green); color: var(--risk-green); }
  .point-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    align-items: center;
    padding: 5px 6px;
    margin: 2px 0;
    font-size: 11px;
    border-left: 2px solid transparent;
    transition: all 0.15s;
    cursor: pointer;
  }
  .point-item:hover { background: rgba(0, 212, 255, 0.06); }
  .point-item.risk-high { border-left-color: var(--risk-red); background: rgba(231, 76, 60, 0.04); }
  .point-item.risk-mid-high { border-left-color: var(--accent-amber); background: rgba(255, 181, 46, 0.04); }
  .point-item.risk-mid { border-left-color: var(--risk-yellow); }
  .point-item.risk-low { border-left-color: var(--text-tertiary); }
  .point-item.status-ready, .point-item.status-standby {
    border-left-color: transparent;
  }
  .point-item.status-ready::before, .point-item.status-standby::before {
    content: '●';
    color: var(--risk-green);
    margin-right: 2px;
    font-size: 8px;
  }
  .point-name { color: var(--text-primary); font-weight: 500; }
  .point-name .point-km {
    color: var(--text-tertiary);
    font-family: "Roboto Mono", monospace;
    font-size: 10px;
    margin-right: 4px;
  }
  .point-level {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    text-align: center;
    min-width: 32px;
  }
  .point-level.risk-high { color: var(--risk-red); background: rgba(231, 76, 60, 0.16); }
  .point-level.risk-mid-high { color: var(--accent-amber); background: rgba(255, 181, 46, 0.16); }
  .point-level.risk-mid { color: var(--risk-yellow); background: rgba(241, 196, 15, 0.16); }
  .point-level.risk-low { color: var(--text-tertiary); background: rgba(122, 147, 184, 0.12); }
  .point-level.status-ready, .point-level.status-standby { color: var(--risk-green); background: rgba(46, 204, 113, 0.12); }
  .point-meta {
    font-size: 10.5px;
    color: var(--text-tertiary);
    grid-column: 1 / -1;
    padding-left: 4px;
  }
  .point-arrow {
    color: var(--accent-cyan);
    font-weight: 600;
  }
  .point-item.has-no-camera { cursor: default; }
  .point-item.has-no-camera .point-arrow { display: none; }
  
  /* AI 综合判断 + 建议 */
  .seg-ai-block {
    margin-top: 14px;
    padding: 10px 12px;
    background: rgba(168, 85, 247, 0.06);
    border-left: 2px solid #a855f7;
  }
  .seg-ai-block-title {
    font-size: 11.5px;
    font-weight: 600;
    color: #c084fc;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
  }
  .seg-ai-block-text {
    font-size: 11.5px;
    color: var(--text-secondary);
    line-height: 1.65;
  }
  .seg-ai-block-list {
    margin: 0;
    padding-left: 16px;
    font-size: 11.5px;
    color: var(--text-secondary);
    line-height: 1.7;
  }
  .seg-ai-block-list li { margin: 3px 0; }
  .seg-ai-block-list li strong { color: var(--text-primary); }
  
  /* === V4.0 全省态势右下角图例 === */
  .ov-map-legend {
    position: absolute;
    bottom: 14px; right: 14px;
    width: 200px;
    background: rgba(10, 20, 36, 0.92);
    border: 1px solid var(--border);
    backdrop-filter: blur(8px);
    font-size: 11px;
    color: var(--text-secondary);
    z-index: 22;
    transition: all 0.25s;
  }
  .ov-map-legend.collapsed { width: auto; }
  .ov-map-legend.collapsed .legend-body { display: none; }
  .ov-map-legend .legend-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
  }
  .ov-map-legend .legend-header-btn {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    padding: 0 4px;
  }
  .ov-map-legend .legend-header-btn:hover { color: var(--accent-cyan); }
  .ov-map-legend .legend-body {
    padding: 4px 10px 8px;
  }
  .ov-map-legend .legend-section { padding: 4px 0; }
  .ov-map-legend .legend-section + .legend-section { border-top: 1px dashed var(--border); }
  .ov-map-legend .legend-section-title {
    font-size: 10px;
    color: var(--text-tertiary);
    letter-spacing: 1px;
    margin-bottom: 3px;
  }
  .ov-map-legend .legend-row {
    display: flex; align-items: center; gap: 6px; padding: 2px 0;
    font-size: 10.5px;
  }
  .ov-map-legend .legend-line {
    display: inline-block; width: 18px; height: 2px;
  }
  .ov-map-legend .legend-line.green { background: var(--risk-green); }
  .ov-map-legend .legend-line.amber { background: var(--accent-amber); }
  .ov-map-legend .legend-line.red { background: var(--risk-red); }
  .ov-map-legend .legend-icon {
    display: inline-block;
    width: 14px;
    text-align: center;
    font-size: 11px;
  }
  .ov-map-legend .legend-icon.port { color: #4dabf7; }
  .ov-map-legend .legend-icon.airport { color: #c084fc; }
  .ov-map-legend .legend-icon.service { color: var(--risk-green); }
  .ov-map-legend .legend-cloud {
    display: inline-block;
    width: 14px; height: 8px;
    border-radius: 5px;
  }
  .ov-map-legend .legend-cloud.icerain { background: rgba(160, 200, 220, 0.4); border: 1px solid rgba(160, 200, 220, 0.7); }
  .ov-map-legend .legend-cloud.rain { background: rgba(80, 130, 180, 0.4); border: 1px solid rgba(80, 130, 180, 0.7); }
  
  
  /* === V3.6 模式切换 fade-in === */
  @keyframes modeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .mode-anim {
    animation: modeIn 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  
  html, body {
    background: var(--bg-deep);
    color: var(--text-primary);
    font-family: "PingFang SC", "Microsoft YaHei", "Source Han Sans CN", sans-serif;
    font-size: 13px;
    line-height: 1.5;
    overflow: hidden;
    height: 100vh;
  }
  
  /* ===== 顶栏 ===== */
  .topbar {
    height: 64px;
    background: linear-gradient(180deg, #0a1424 0%, #0f1c30 100%);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 22px;
    position: relative;
    z-index: 100;
    gap: 22px;
  }
  .topbar::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
    opacity: 0.4;
  }
  .topbar .logo {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    min-width: 520px;
  }
  .topbar .logo-mark {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--accent-cyan), #0066cc);
    clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0 70%, 0 30%);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; color: white;
    flex-shrink: 0;
  }
  .topbar .title-block {
    display: flex;
    flex-direction: column;
    width: 520px;
    max-width: none;
    min-width: 480px;
    justify-content: center;
  }
  .topbar .title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    white-space: nowrap;
    color: var(--text-primary);
    line-height: 1.25;
  }
  .topbar .subtitle {
    font-size: 10px;
    color: var(--text-tertiary);
    letter-spacing: 0.4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
  }
  
  /* 模式切换 */
  .mode-switcher {
    display: flex;
    gap: 0;
    border: 1px solid var(--border-light);
    flex-shrink: 0;
    height: 44px;
  }
  .mode-tab {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 0 22px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.8px;
    transition: all 0.18s;
    border-right: 1px solid var(--border-light);
    position: relative;
    white-space: nowrap;
    display: flex;
    align-items: center;
    height: 100%;
  }
  .mode-tab:last-child { border-right: none; }
  .mode-tab:hover {
    color: var(--text-primary);
    background: rgba(0, 212, 255, 0.06);
  }
  .mode-tab.active {
    background: rgba(0, 212, 255, 0.15);
    color: var(--accent-cyan);
    box-shadow: inset 0 -1px 0 rgba(0, 212, 255, 0.4),
                0 0 14px rgba(0, 212, 255, 0.2);
    /* V3.6: 去掉 text-shadow，文字发光在小字号上会糊；保留底部高光条 */
  }
  .mode-tab.active::after {
    content: '';
    position: absolute;
    top: -1px; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
    box-shadow: 0 0 8px var(--accent-cyan);
  }
  .mode-tab .mode-icon {
    margin-right: 6px;
    font-size: 13px;
  }
  
  .topbar .center-info {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    padding-right: 14px;
    min-width: 0;
  }
  .topbar .info-item { display: flex; flex-direction: column; align-items: center; }
  /* V3.6: 系统时间是装饰，字号更小、字色更淡 */
  .topbar .info-label { font-size: 11px; color: var(--text-tertiary); letter-spacing: 1px; white-space: nowrap; }
  .topbar .info-value { font-size: 12.5px; color: var(--text-primary); font-weight: 500; white-space: nowrap; }
  /* 系统时间专项弱化（区别于核心 KPI 置信度） */
  .topbar .info-item.info-time .info-value {
    font-size: 11px;
    color: var(--text-tertiary);
    font-family: "Roboto Mono", monospace;
    font-weight: 400;
  }
  /* 置信度作为核心 KPI 略微强化 */
  .topbar .info-item.info-conf .info-value {
    color: var(--accent-cyan);
    font-weight: 600;
  }
  
  .topbar .right-info {
    display: flex; align-items: center; gap: 10px;
    font-size: 11px; color: var(--text-secondary);
    flex-shrink: 0;
  }
  .topbar .alert-badge {
    background: var(--risk-red);
    color: white;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    animation: pulse-red 4s ease-in-out infinite;  /* V3.6: 2s → 4s 减少疲劳 */
  }
  @keyframes pulse-red {
    0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.55); }
    50%      { box-shadow: 0 0 0 4px rgba(231, 76, 60, 0); }  /* 6px → 4px 缩小扩散 */
  }
  
  /* ===== 主区域 ===== */
  .main {
    height: calc(100vh - 64px);
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(420px, 1fr);
    gap: 1px;
    background: var(--border);
    position: relative;
  }
  
  .left-panel {
    background: var(--bg-panel);
    display: grid;
    /* V5.1 任务1: 主画面占绝对优势，时间轴压缩为薄条，impact-list 默认折叠 */
    grid-template-rows: minmax(0, 1fr) 58px minmax(132px, auto);
    gap: 1px;
    overflow: hidden;
  }
  
  .right-panel {
    background: var(--bg-panel);
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 1px;
    overflow: hidden;
    min-width: 0;
  }
  
  /* === V4.0 一句话生成孪生场景 浮层（覆盖主沙盘） === */
  .twin-genesis-overlay {
    position: absolute;
    top: 100px; left: 14px; right: 220px;
    bottom: 100px;
    background: rgba(10, 20, 36, 0.96);
    border: 1px solid #a855f7;
    backdrop-filter: blur(10px);
    padding: 14px 18px;
    z-index: 35;
    display: none;
    flex-direction: column;
    overflow-y: auto;
    box-shadow: 0 0 30px rgba(168, 85, 247, 0.4);
  }
  .twin-genesis-overlay.show { display: flex; }
  .twin-genesis-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
    margin-bottom: 10px;
  }
  .twin-genesis-title {
    color: #c084fc;
    font-size: 12px;
    letter-spacing: 1.5px;
    font-weight: 600;
  }
  .twin-genesis-overlay .ai-step {
    padding: 7px 0 7px 22px;
    font-size: 11.5px;
    color: var(--text-secondary);
    position: relative;
    border-bottom: 1px dashed rgba(122, 147, 184, 0.12);
    line-height: 1.5;
  }
  .twin-genesis-overlay .ai-step::before {
    content: '';
    position: absolute;
    left: 6px; top: 13px;
    width: 8px; height: 8px;
    background: var(--border-light);
    border-radius: 50%;
  }
  .twin-genesis-overlay .ai-step.active::before {
    background: #a855f7;
    box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.25);
    animation: aiStepPulse 1s infinite;
  }
  .twin-genesis-overlay .ai-step.done::before {
    background: var(--risk-green);
  }
  .twin-genesis-overlay .ai-step.done {
    color: var(--text-primary);
  }
  .twin-genesis-overlay .ai-step strong {
    color: var(--accent-cyan);
  }
  .twin-genesis-overlay .ai-step .ai-step-tag {
    display: inline-block;
    background: rgba(0, 212, 255, 0.15);
    color: var(--accent-cyan);
    padding: 0 5px;
    font-size: 11px;
    margin-right: 5px;
    font-family: "Roboto Mono", monospace;
    letter-spacing: 0.5px;
  }