:root {
      /* NVIDIA 纯正高对比深色系统 (参考 +nvidia.html) */
      --bg-dark: #000000;
      --bg-panel: rgba(255, 255, 255, 0.05);
      --bg-panel-hover: rgba(255, 255, 255, 0.08);
      --border-cyan: rgba(255, 255, 255, 0.08);
      --border-cyan-bright: #76b900;
      --text-main: #e2e8f0;
      --text-muted: #94a3b8;
      --text-highlight: #ffffff;
      --accent-cyan: #76b900;
      --accent-green: #76b900;
      --accent-yellow: #fbbf24;
      --accent-orange: #f97316;
      --accent-red: #ef4444;
      --accent-blue: #76b900;
      --accent-purple: #c084fc;
      --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      --header-bg: #000000;
      --card-shadow: none;
    }

    [data-theme="light"] {
      /* Webflow 极简浅色系统 */
      --bg-dark: #ffffff;
      --bg-panel: #ffffff;
      --bg-panel-hover: rgba(0, 0, 0, 0.02);
      --border-cyan: rgba(20, 110, 245, 0.18);
      --border-cyan-bright: #146ef5;
      --text-main: #1e293b;
      --text-muted: #666666;
      --text-highlight: #1e293b;
      --accent-cyan: #146ef5;
      --accent-green: #16a34a;
      --accent-yellow: #d97706;
      --accent-orange: #ea580c;
      --accent-red: #dc2626;
      --accent-blue: #146ef5;
      --accent-purple: #9333ea;
      --header-bg: rgba(255, 255, 255, 0.98);
      --card-shadow: 0 4px 16px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
    }

    .insight-highlight {
      background: rgba(251, 191, 36, 0.16);
      color: #fbbf24;
      font-weight: 600;
      padding: 1px 5px;
      margin: 0 1px;
      border-radius: 3px;
      border-bottom: 1px solid rgba(251, 191, 36, 0.4);
      display: inline;
    }

    [data-theme="light"] .insight-highlight {
      background: rgba(217, 119, 6, 0.12);
      color: #b45309;
      border-bottom: 1px solid rgba(217, 119, 6, 0.35);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      background-color: var(--bg-dark);
      background-image: none;
      color: var(--text-main);
      font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      /* ponytail: viewport-based font scaling — all px font-size/em values inherit this base */
      font-size: min(1.6vw, 16px);
      min-height: 100vh;
      overflow-x: hidden;
      display: flex;
      flex-direction: column;
      transition: background-color .25s ease, color .25s ease;
      -webkit-font-smoothing: antialiased;
      -webkit-text-size-adjust: 100%;
      -webkit-tap-highlight-color: transparent;
      scrollbar-width: thin;
      scrollbar-color: rgba(118, 185, 0, 0.4) #000000;
    }
    [data-theme="light"], [data-theme="light"] body {
      scrollbar-color: #94a3b8 #e2e8f0;
    }

    /* Scrollbars */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: #000000; }
    ::-webkit-scrollbar-thumb { background: rgba(118, 185, 0, 0.4); border-radius: 0px; }
    ::-webkit-scrollbar-thumb:hover { background: #76b900; }
    [data-theme="light"] ::-webkit-scrollbar-track { background: #e2e8f0; }
    [data-theme="light"] ::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 3px; }


    /* Top Header Bar */
    header.hud-header {
      height: 3.375em;
      background: var(--header-bg);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24px;
      position: sticky;
      top: 0;
      z-index: 100;
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
    }
    .header-left { display: flex; align-items: center; gap: 12px; }
    .header-toggle {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: #76b900;
      padding: 4px 8px;
      border-radius: 0px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.2s;
    }
    .header-toggle:hover { background: rgba(255, 255, 255, 0.1); border-color: #76b900; }
    [data-theme="light"] .header-toggle { border-radius: 4px; }
    [data-theme="light"] .header-toggle:hover { background: rgba(20, 110, 245, 0.08); }
    .header-title {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: 0.06em;
      color: #76b900;
      display: flex;
      align-items: center;
      gap: 8px;
      text-transform: uppercase;
    }
    .header-title .tagline {
      font-size: 11px;
      font-weight: 400;
      color: #999999;
      border-left: 1px solid rgba(255, 255, 255, 0.15);
      padding-left: 8px;
      letter-spacing: 0.5px;
      text-transform: none;
      font-family: var(--font-mono);
    }

    .header-center {
      display: flex;
      align-items: center;
      gap: 16px;
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--text-muted);
    }
    .time-badge {
      background: rgba(118, 185, 0, 0.08);
      border: 1px solid var(--border-cyan);
      padding: 3px 8px;
      border-radius: 4px;
      color: var(--accent-cyan);
    }
    [data-theme="light"] .time-badge {
      background: rgba(20, 110, 245, 0.06);
    }

    .header-right { display: flex; align-items: center; gap: 10px; }
    .hud-stat-pill {
      background: rgba(118, 185, 0, 0.08);
      border: 1px solid var(--border-cyan);
      padding: 4px 10px;
      border-radius: 4px;
      font-size: 11px;
      font-family: var(--font-mono);
      color: var(--accent-green);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .hud-stat-pill.alert {
      background: rgba(249, 115, 22, 0.1);
      border-color: rgba(249, 115, 22, 0.3);
      color: var(--accent-orange);
    }
    .hud-btn {
      background: transparent;
      border: 1px solid transparent;
      color: var(--text-main);
      padding: 5px 12px;
      border-radius: 4px;
      font-size: 12px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 5px;
      transition: all 0.2s;
      text-decoration: none;
    }
    .hud-btn:hover {
      background: rgba(118, 185, 0, 0.12);
      border-color: var(--border-cyan);
      color: var(--accent-cyan);
    }
    [data-theme="light"] .hud-btn:hover {
      background: rgba(20, 110, 245, 0.06);
      border-color: var(--border-cyan);
      color: var(--accent-cyan);
    }
    .hud-btn.active {
      background: var(--accent-cyan);
      color: #000000;
      font-weight: 700;
    }
    [data-theme="light"] .hud-btn.active {
      color: #ffffff;
      font-weight: 600;
    }
    .hud-dropdown-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
    }
    .hud-dropdown-menu {
      position: absolute;
      top: calc(100% + 4px);
      right: 0;
      min-width: 140px;
      background: rgba(13, 23, 46, 0.95);
      border: 1px solid rgba(0, 240, 255, 0.3);
      border-radius: 6px;
      padding: 4px;
      display: none;
      flex-direction: column;
      gap: 2px;
      z-index: 1000;
      backdrop-filter: blur(8px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    }
    .hud-dropdown-menu::before {
      content: "";
      position: absolute;
      top: -10px;
      left: 0;
      right: 0;
      height: 10px;
      background: transparent;
    }
    .hud-dropdown-wrap:hover .hud-dropdown-menu,
    .hud-dropdown-menu.hud-show {
      display: flex;
    }
    .hud-dropdown-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 10px;
      font-size: 12px;
      color: #e2e8f0;
      text-decoration: none;
      border-radius: 4px;
      transition: all 0.15s ease;
      white-space: nowrap;
    }
    .hud-dropdown-item:hover {
      background: rgba(0, 240, 255, 0.15);
      color: #00f0ff;
    }
    .hud-dropdown-item .feed-count-badge {
      font-size: 11px;
      color: #00f0ff;
      font-weight: 600;
      margin-left: 8px;
    }
    [data-theme="light"] .hud-dropdown-menu {
      background: rgba(255, 255, 255, 0.98);
      border: 1px solid #cbd5e1;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    }
    [data-theme="light"] .hud-dropdown-item {
      color: #334155;
    }
    [data-theme="light"] .hud-dropdown-item:hover {
      background: rgba(2, 132, 199, 0.08);
      color: #0284c7;
    }
    [data-theme="light"] .hud-dropdown-item .feed-count-badge {
      color: #0284c7;
    }

    /* Main Dashboard Layout with Explicit Grid Areas */
    .dashboard-container {
      flex: 1;
      padding: 8px 10px;
      display: grid;
      /* minmax(0, ...) 彻底消除 Safari/WebKit min-content 溢出 */
      grid-template-columns: minmax(130px, 14vw) minmax(0, 1fr) minmax(210px, 19vw);
      grid-template-rows: 1fr;
      grid-template-areas: "sidebar center sources";
      gap: 8px;
      width: 100%;
      max-width: 100vw;
      min-height: 0;
      height: calc(100vh - 3.5em);
      box-sizing: border-box;
      margin: 0;
    }

    /* NVIDIA Card Box Style (from +nvidia.html) */
    .hud-card {
      background: var(--bg-panel);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 0px;
      position: relative;
      overflow: hidden;
      box-shadow: none;
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      display: flex;
      flex-direction: column;
      transition: all 0.2s ease;
    }
    .hud-card:hover {
      background: var(--bg-panel-hover);
      border-color: rgba(118, 185, 0, 0.4);
    }
    [data-theme="light"] .hud-card {
      border-radius: 6px;
      border: 1px solid rgba(0, 0, 0, 0.08);
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    }
    [data-theme="light"] .hud-card:hover {
      background: #ffffff;
      border-color: rgba(20, 110, 245, 0.3);
    }
    .card-header {
      padding: 6px 12px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: transparent;
    }
    [data-theme="light"] .card-header {
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }
    .card-title {
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.04em;
      color: #ffffff;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    [data-theme="light"] .card-title {
      color: #1e293b !important;
      font-weight: 700 !important;
    }
    .card-body {
      padding: 6px 10px;
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    /* Grid Area Assignments */
    .sidebar-column-stack {
      grid-area: sidebar;
      min-height: 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
      overflow-y: auto;
    }
    .sidebar-card { grid-area: sidebar; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
    .sidebar-nav-card, .sidebar-settings-card, .sidebar-donut-card {
      flex-shrink: 0;
    }
    .center-stage-container {
      grid-area: center;
      min-height: 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
      height: 100%;
      overflow: hidden;
    }
    .stage-map-analytics-row {
      flex: 1;
      min-height: 0;
      min-width: 0;
      display: grid;
      /* 比例调整为 68% 地图 + 32% 右侧分析列，确保词云和趋势图不拥挤且不外溢 */
      grid-template-columns: minmax(0, 68%) minmax(0, 32%);
      gap: 8px;
      height: 100%;
      width: 100%;
    }
    .map-card {
      grid-column: 1 / 2;
      height: 100%;
      min-height: 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
    }
    .analytics-vertical-stack {
      grid-column: 2 / 3;
      display: flex;
      flex-direction: column;
      gap: 6px;
      height: 100%;
      min-height: 0;
      min-width: 0;
    }
    .analytics-vertical-stack .hud-card {
      flex: 1;
      min-height: 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
    }
    .analytics-vertical-stack .hud-card.perf-compute-card {
      flex: 0 0 auto;
      min-height: 7.5em;
    }
    .analytics-chart-box {
      width: 100%;
      height: 100%;
      min-height: 5em;
      min-width: 0;
    }
    .sources-card { grid-area: sources; min-height: 0; min-width: 0; display: flex; flex-direction: column; }

    /* ============================================================
       AI Workflow & Progress Bar Component Styles
       ============================================================ */
    .workflow-card {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      border: 1px solid var(--border-cyan);
      background: var(--bg-panel);
      border-radius: 6px;
      position: relative;
      overflow: hidden;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), inset 0 0 15px rgba(0, 240, 255, 0.03);
      backdrop-filter: blur(12px);
    }
    .workflow-card-header {
      padding: 7px 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgba(0, 240, 255, 0.15);
      background: rgba(5, 12, 28, 0.85);
    }
    /* 确保流水线卡片标题文字清晰 */
    .workflow-card .card-title {
      color: var(--text-highlight);
      display: flex;
      align-items: center;
    }
    .workflow-card .card-title::before {
      content: "";
      display: inline-block;
      width: 3.5px;
      height: 14px;
      border-radius: 1.5px;
      background: var(--accent-cyan);
      box-shadow: 0 0 8px var(--accent-cyan);
      margin-right: 6px;
      animation: wfLineBreath 2s ease-in-out infinite;
      flex-shrink: 0;
    }
    @keyframes wfLineBreath {
      0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--accent-cyan); }
      50% { opacity: 0.35; box-shadow: 0 0 2px var(--accent-cyan); }
    }
    .workflow-card .workflow-title-zh { color: var(--text-muted); }
    .workflow-header-left {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .workflow-title-zh {
      font-size: 11px;
      font-weight: 400;
      color: var(--text-muted);
      margin-left: 6px;
      opacity: 0.85;
    }
    .workflow-task-badge {
      font-size: 11px;
      font-family: var(--font-mono);
      color: var(--text-muted);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .workflow-step-counter {
      color: #ff9500;
      font-weight: 600;
    }
    .workflow-header-right {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .live-blink-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--accent-green);
      box-shadow: 0 0 8px var(--accent-green);
      animation: liveDotBreath 2s ease-in-out infinite;
      flex-shrink: 0;
      display: inline-block;
    }
    @keyframes liveDotBreath {
      0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 8px var(--accent-green); }
      50% { opacity: 0.35; transform: scale(0.75); box-shadow: 0 0 2px var(--accent-green); }
    }
    .workflow-live-tag {
      background: rgba(118, 185, 0, 0.08);
      border: 1px solid var(--border-cyan);
      color: var(--accent-green);
      font-size: 11px;
      font-family: var(--font-mono);
      padding: 4px 10px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .workflow-action-btn {
      padding: 3px 8px;
      font-size: 11px;
      height: 24px;
      line-height: 1;
    }
    /* 深色模式下：低调精致暗调微透胶囊按钮，纯白文字，弱化视觉抢占 */
    .trigger-pipeline-btn {
      background: rgba(255, 255, 255, 0.08) !important;
      border: 1px solid rgba(255, 255, 255, 0.12) !important;
      color: #ffffff !important;
      font-weight: 500 !important;
      padding: 5px 12px !important;
      border-radius: 6px !important;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s ease;
      font-size: 11.5px;
      letter-spacing: 0.3px;
      box-shadow: none !important;
    }
    .trigger-pipeline-btn:hover {
      background: rgba(255, 255, 255, 0.14) !important;
      border-color: rgba(255, 255, 255, 0.25) !important;
      color: #ffffff !important;
      transform: translateY(-1px);
    }
    .trigger-pipeline-btn.loading {
      opacity: 0.8;
      cursor: not-allowed;
      pointer-events: none;
    }
    .trigger-btn-icon {
      font-size: 13px;
      display: inline-block;
      color: inherit;
    }
    .trigger-btn-icon.spinning {
      animation: triggerSpin 1s infinite linear;
    }
    @keyframes triggerSpin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .workflow-card-body {
      padding: 8px 10px;
    }
    .workflow-steps-grid {
      display: grid;
      grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
      gap: 6px;
      width: 100%;
      align-items: stretch;
      transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .wf-step-connector {
      display: flex;
      align-items: center;
      justify-content: center;
      align-self: center;
      color: rgba(0, 240, 255, 0.22);
      width: 14px;
      flex-shrink: 0;
      transition: all 0.3s ease;
      user-select: none;
    }
    .wf-connector-svg {
      width: 14px;
      height: 14px;
      display: block;
    }
    .wf-step-connector.active {
      color: var(--accent-cyan);
      filter: drop-shadow(0 0 6px var(--accent-cyan));
      animation: arrowPulse 1.2s infinite ease-in-out;
    }
    .wf-step-connector.done {
      color: var(--accent-green);
    }
    @keyframes arrowPulse {
      0%, 100% { opacity: 0.4; transform: translateX(0); }
      50% { opacity: 1; transform: translateX(3px); }
    }
    .workflow-step-box {
      min-height: 12em;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 0px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      cursor: pointer;
      transition: all 0.2s ease;
      overflow: hidden;
      position: relative;
    }
    .workflow-step-box:hover {
      background: rgba(255, 255, 255, 0.08);
      border-color: #76b900;
    }
    .workflow-step-box.step-current {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid #76b900;
      box-shadow: 0 0 16px rgba(118, 185, 0, 0.2);
      z-index: 2;
    }
    .workflow-step-box.step-done {
      border: 1px solid rgba(118, 185, 0, 0.4);
      background: rgba(118, 185, 0, 0.06);
    }
    .workflow-step-box.step-idle {
      border: 1px dashed rgba(255, 255, 255, 0.15) !important;
      background: transparent !important;
    }

    /* 水印大号背景数字 */
    .step-watermark-num {
      position: absolute;
      bottom: -2px;
      right: 2px;
      font-size: 88px;
      font-weight: 900;
      font-family: var(--font-mono);
      line-height: 0.85;
      color: rgba(0, 240, 255, 0.12);
      pointer-events: none;
      user-select: none;
      letter-spacing: -4px;
      z-index: 0;
      transition: color 0.3s ease;
    }
    .step-done .step-watermark-num {
      color: rgba(0, 230, 118, 0.13);
    }
    .step-current .step-watermark-num {
      color: rgba(0, 240, 255, 0.15);
    }

    /* 卡片顶部行 */
    .wf-card-top-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      z-index: 1;
      margin-bottom: 6px;
    }
    .wf-step-title-wrap {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .wf-step-idx-badge {
      font-size: 11px;
      font-weight: 800;
      font-family: var(--font-mono);
      color: #cbd5e1 !important;
      background: transparent !important;
      border: none !important;
      border-radius: 0;
      padding: 1px 6px;
      line-height: 1.2;
    }
    .step-done .wf-step-idx-badge {
      color: var(--accent-green);
      background: rgba(0, 230, 118, 0.15);
      border-color: rgba(0, 230, 118, 0.4);
    }
    .wf-step-top-title {
      font-size: 13px;
      font-weight: 700;
      color: #ffffff;
      letter-spacing: 0.5px;
    }
    .wf-step-status-pill {
      font-size: 10px;
      font-weight: 600;
      border-radius: 12px;
      padding: 2px 8px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
    }
    .wf-step-status-pill.status-idle {
      color: #cbd5e1 !important;
      background: transparent !important;
      border: none !important;
    }
    .wf-step-status-pill.status-running {
      color: #38bdf8;
      background: rgba(56, 189, 248, 0.15);
      border: 1px solid rgba(56, 189, 248, 0.5);
      box-shadow: 0 0 8px rgba(56, 189, 248, 0.3);
    }
    .wf-step-status-pill.status-running .wf-status-icon {
      animation: spinGear 2s linear infinite;
      display: inline-block;
    }
    @keyframes spinGear {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    .wf-step-status-pill.status-done {
      color: #00e676;
      background: rgba(0, 230, 118, 0.15);
      border: 1px solid rgba(0, 230, 118, 0.4);
      box-shadow: 0 0 8px rgba(0, 230, 118, 0.2);
    }
    .wf-step-status-pill.status-pending {
      color: var(--text-muted);
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.12);
    }

    /* 卡片中部核心区（待命/完成态下完全垂直水平居中，图标放大凸显科技感） */
    .wf-card-main-center {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      z-index: 1;
      padding: 10px 0;
      margin: auto 0;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .step-current .wf-card-main-center {
      flex: 0 0 auto;
      padding: 2px 0 6px;
      margin: 0;
    }
    .wf-center-icon-box {
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .step-current .wf-center-icon-box {
      width: 42px;
      height: 42px;
      margin-bottom: 2px;
    }
    .workflow-step-box:hover .wf-center-icon-box {
      transform: scale(1.1);
    }
    .wf-tech-svg {
      width: 56px;
      height: 56px;
      filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
      transition: all 0.3s ease;
    }
    .step-current .wf-tech-svg {
      width: 38px;
      height: 38px;
      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
    }
    .step-done .wf-tech-svg {
      filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
    }
    .wf-center-title {
      font-size: 15.5px;
      font-weight: 700;
      color: #f8fafc;
      letter-spacing: 0.6px;
      margin-bottom: 4px;
      text-shadow: none;
    }
    .step-done .wf-center-title {
      color: #f8fafc;
      text-shadow: none;
    }
    .wf-center-subtitle {
      font-size: 11px;
      color: var(--text-muted);
      line-height: 1.35;
      margin-bottom: 4px;
      max-width: 95%;
    }

    /* 状态视图切换 */
    .wf-state-view {
      width: 100%;
      z-index: 1;
    }
    .wf-view-idle {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 4px 0 8px;
    }
    .wf-view-running {
      display: none;
      flex-direction: column;
      gap: 6px;
      padding: 2px 0 6px;
    }
    .wf-view-done {
      display: none;
      justify-content: center;
      align-items: center;
      padding: 4px 0 8px;
    }

    /* 状态切换显隐控制 */
    .step-idle .wf-view-idle,
    .step-pending .wf-view-idle {
      display: flex;
    }
    .step-current .wf-view-idle {
      display: none;
    }
    .step-current .wf-view-running {
      display: flex;
      animation: fadeInSubsteps 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    .step-done .wf-view-idle,
    .step-done .wf-view-running {
      display: none;
    }
    .step-done .wf-view-done {
      display: flex;
    }

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

    /* 待开始按钮 */
    .wf-start-btn {
      background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
      color: #ffffff;
      border: 1px solid rgba(56, 189, 248, 0.5);
      border-radius: 20px;
      padding: 5px 18px;
      font-size: 11.5px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      box-shadow: 0 2px 10px rgba(2, 132, 199, 0.35);
      transition: all 0.2s ease;
    }
    .wf-start-btn:hover {
      background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
      box-shadow: 0 4px 14px rgba(14, 165, 233, 0.5);
      transform: translateY(-1px);
    }
    .wf-start-btn .btn-play-icon {
      font-size: 10px;
    }

    /* 完成药丸徽章 */
    .wf-done-pill {
      color: #00e676;
      background: rgba(0, 230, 118, 0.12);
      border: 1px solid rgba(0, 230, 118, 0.4);
      border-radius: 20px;
      padding: 4px 16px;
      font-size: 11px;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      box-shadow: 0 0 10px rgba(0, 230, 118, 0.2);
    }

    /* 运行中进度条 */
    .wf-prog-row {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      margin-bottom: 6px;
    }
    .wf-prog-track {
      flex: 1;
      height: 6px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 3px;
      overflow: hidden;
      position: relative;
    }
    .wf-prog-fill {
      height: 100%;
      background: linear-gradient(90deg, #1d4ed8 0%, #0ea5e9 60%, #10b981 100%);
      border-radius: 3px;
      transition: width 0.18s cubic-bezier(0.1, 0.9, 0.2, 1);
      position: relative;
      overflow: hidden;
    }
    .wf-prog-fill::after {
      content: '';
      position: absolute;
      top: 0; left: -100%; width: 100%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
      animation: progGlowShimmer 1.8s infinite linear;
    }
    @keyframes progGlowShimmer {
      0% { left: -100%; }
      100% { left: 100%; }
    }
    .wf-prog-val {
      font-size: 11px;
      font-weight: 700;
      font-family: var(--font-mono);
      color: #f8fafc;
      min-width: 30px;
      text-align: right;
    }

    /* 摩托车转速表数字飙升动效（高对比、清晰无眩光） */
    .wf-rev-num {
      font-family: 'JetBrains Mono', 'Fira Code', var(--font-mono, monospace);
      font-weight: 700;
      color: #f1f5f9;
      letter-spacing: 0.3px;
      display: inline-block;
      transition: color 0.15s ease;
    }
    .wf-rev-active {
      color: #ffffff !important;
      font-weight: 800;
    }
    .wf-timeline-item.done .wf-rev-num {
      color: #34d399;
    }

    /* 6个子步骤垂直时间线 */
    .wf-substeps-wrap {
      width: 100%;
      background: rgba(0, 0, 0, 0.35);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 6px;
      padding: 6px 8px;
    }
    .wf-substeps-title {
      font-size: 10.5px;
      font-weight: 600;
      color: #94a3b8;
      margin-bottom: 4px;
      padding-left: 2px;
    }
    .wf-timeline-list {
      display: flex;
      flex-direction: column;
      gap: 3px;
      position: relative;
    }
    .wf-timeline-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 10.5px;
      line-height: 1.35;
      padding: 3px 5px;
      border-radius: 4px;
      border: none;
      transition: background 0.2s ease;
    }
    .wf-timeline-item.active {
      background: rgba(0, 0, 0, 0.45);
      border: none;
      box-shadow: none;
    }
    .wf-tl-left {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      flex: 1;
    }
    .wf-tl-node {
      width: 12px;
      height: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .wf-node-dot-pending {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(148, 163, 184, 0.3);
    }
    .wf-node-dot-active {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #090d16;
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
      border: 1.5px solid #cbd5e1;
    }
    .wf-node-dot-done {
      color: #34d399;
      font-size: 9.5px;
      font-weight: 900;
    }
    .wf-tl-name {
      color: #cbd5e1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .wf-timeline-item.active .wf-tl-name {
      color: #ffffff;
      font-weight: 600;
    }
    .wf-timeline-item.done .wf-tl-name {
      color: #94a3b8;
    }
    .wf-tl-metric {
      font-size: 10px;
      color: #94a3b8;
      font-family: var(--font-mono);
      margin-left: 4px;
    }
    .wf-tl-status-tag {
      font-size: 9.5px;
      flex-shrink: 0;
      margin-left: 4px;
      color: #64748b;
      border: none;
    }
    .wf-tl-status-tag.active {
      background: transparent;
      border: none;
      padding: 0;
      color: #f1f5f9;
      font-weight: 700;
    }
    .wf-tl-status-tag.done {
      color: #34d399;
      font-weight: 600;
      border: none;
    }

    /* 底部说明文字 (Footer Text - 纯文本无边框背景，限制在左下角) */
    .wf-footer-card {
      margin-top: auto;
      width: 100%;
      max-width: 65%;
      background: transparent;
      border: none;
      box-shadow: none;
      padding: 0;
      display: flex;
      align-items: flex-start;
      z-index: 1;
    }
    .step-done .wf-footer-card {
      background: transparent;
      border: none;
      box-shadow: none;
    }
    .wf-footer-icon {
      display: none;
    }
    .wf-footer-text {
      font-size: 10px;
      color: var(--text-muted);
      line-height: 1.35;
      flex: 1;
      text-align: left;
    }
    .step-done .wf-footer-text {
      color: #94a3b8;
    }
    .wf-footer-text strong {
      color: var(--accent-cyan);
      font-family: var(--font-mono);
    }
    .step-done .wf-footer-text strong {
      color: var(--accent-green);
    }


    /* Detail View Elements */
    .step-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      line-height: 1.3;
    }
    .step-num-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: rgba(0, 240, 255, 0.12);
      border: 1px solid var(--accent-cyan);
      color: var(--accent-cyan);
      font-size: 10px;
      font-weight: 700;
      font-family: var(--font-mono);
      margin-right: 5px;
    }
    .step-title {
      font-size: 12.5px;
      font-weight: 700;
      color: #ffffff;
    }

    /* Universal Step Progress Track */
    .step-prog-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      margin: 6px 0 3px;
    }
    .step-prog-track {
      flex: 1;
      height: 5px;
      background: rgba(255, 255, 255, 0.09);
      border-radius: 3px;
      overflow: hidden;
    }
    .step-prog-fill {
      height: 100%;
      background: linear-gradient(90deg, #ff9500, #ffd600);
      box-shadow: 0 0 10px rgba(255, 149, 0, 0.6);
      transition: width 0.35s ease;
    }
    .step-prog-val {
      font-size: 11px;
      font-family: var(--font-mono);
      font-weight: 700;
      color: var(--accent-orange);
      white-space: nowrap;
    }

    /* Quantified Metrics Tag */
    .step-metrics-tag {
      font-size: 10.5px;
      font-family: var(--font-mono);
      font-weight: 600;
      color: var(--accent-cyan);
      background: rgba(0, 240, 255, 0.09);
      border: 1px solid rgba(0, 240, 255, 0.25);
      border-radius: 4px;
      padding: 2px 6px;
      margin: 3px 0 2px;
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }

    /* Single-Line Smooth Push Ticker */
    .step-ticker-wrapper.single-line-push {
      height: 26px;
      overflow: hidden;
      position: relative;
      background: rgba(0, 0, 0, 0.45);
      border-radius: 4px;
      padding: 0 8px;
      border: 1px solid rgba(0, 240, 255, 0.18);
      margin-top: 4px;
    }
    .step-ticker-slider {
      display: flex;
      flex-direction: column;
      transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .step-ticker-line {
      font-size: 10.5px;
      line-height: 26px;
      height: 26px;
      color: var(--text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .step-current .step-ticker-line {
      color: #ffd600;
      font-weight: 600;
      text-shadow: 0 0 8px rgba(255, 214, 0, 0.4);
    }


    /* 流水线阶段间三角形流向箭头 */
    .wf-step-arrow {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      width: 18px;
      position: relative;
    }
    .wf-step-arrow::after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border-top: 7px solid transparent;
      border-bottom: 7px solid transparent;
      border-left: 10px solid rgba(0, 240, 255, 0.45);
      filter: drop-shadow(0 0 3px rgba(0, 240, 255, 0.6));
    }

    /* 当前执行的区块自动放大 */
    .workflow-steps-grid {
      display: flex !important;
      align-items: stretch !important;
      gap: 6px !important;
    }
    .workflow-step-box {
      flex: 1;
      min-width: 0;
      transition: flex 0.4s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease !important;
    }
    .workflow-step-box.step-current {
      flex: 2.2 !important;
      min-height: 162px !important;
    }

    /* AI Model Performance Gauges Card (4 Heterogeneous High-End Dynamic Patterns) */
    .perf-gauges-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 6px;
      width: 100%;
      height: 100%;
      align-items: stretch;
    }
    .perf-gauge-card {
      display: flex;
      align-items: center;
      gap: 8px;
      background: rgba(13, 23, 46, 0.75);
      border: 1px solid rgba(0, 240, 255, 0.16);
      border-radius: 6px;
      padding: 6px 8px;
      position: relative;
      overflow: hidden;
      transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .perf-gauge-card:hover {
      background: rgba(15, 28, 56, 0.95);
      border-color: rgba(0, 240, 255, 0.4);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }
    .gauge-left-graphic {
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .gauge-right-info {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: left;
    }
    .gauge-num-line {
      display: flex;
      align-items: baseline;
      gap: 5px;
      margin-bottom: 2px;
      flex-wrap: nowrap;
    }
    .perf-val-num {
      font-family: var(--font-mono);
      font-size: 15.5px;
      font-weight: 800;
      line-height: 1.1;
      letter-spacing: -0.2px;
    }
    .val-cyan { color: #00f0ff; text-shadow: 0 0 8px rgba(0, 240, 255, 0.5); }
    .val-amber { color: #fbbf24; text-shadow: 0 0 8px rgba(251, 191, 36, 0.5); }
    .val-emerald { color: #34d399; text-shadow: 0 0 8px rgba(52, 211, 153, 0.5); }
    .val-purple { color: #c084fc; text-shadow: 0 0 8px rgba(192, 132, 252, 0.5); }

    /* Token 数值单独定档：12.9505亿 共 8 字符，此处约 84px。原先是 index.html 的行内
       style="font-size:13.5px"，行内样式优先级压过下面的容器查询，故挪进 CSS。 */
    .perf-val-num.num-token { font-size: 14.5px; letter-spacing: -0.3px; }

    /* 窄屏兜底：.perf-gauge-card 是 overflow:hidden，被挤时必须先压右侧的状态徽标，
       数值本身绝不参与收缩——否则客户看到的就是被截掉尾数的半个数字。 */
    .gauge-num-line .perf-val-num { flex: 0 0 auto; white-space: nowrap; }
    .gauge-num-line .gauge-dynamic-pill { flex: 0 1 auto; min-width: 0; overflow: hidden; }

    /* 按卡片自身宽度取舍，而不是按视口——同一视口下这 4 张卡宽度一致，但右侧分析列的
       占比随断点变化（1920→单卡 200px，1366→122px，1280→107px）。
       实测：数值需 84px，卡片开销 = 44px 装饰图形 + 8px 间距 + 16px padding + 2px 边框。
       卡片窄到装不下时，优先牺牲纯装饰元素，数值永远完整可读。 */
    .perf-gauge-card { container-type: inline-size; }

    @container (max-width: 148px) {
      /* 砍掉左侧装饰图形，让出 52px */
      .gauge-left-graphic { display: none; }
    }
    @container (max-width: 112px) {
      /* 再窄就收掉状态徽标并降一档字号，仍保证 12.9505亿 完整显示 */
      .gauge-dynamic-pill { display: none; }
      .perf-val-num { font-size: 13px; }
      .perf-val-num.num-token { font-size: 12.5px; }
    }

    /* 数值跳动时的闪光。此前只定义在 lab.css，首页 dashboard.js 加的 glow-flash 是死代码。 */
    .perf-val-num.glow-flash { animation: valGlowFlash 0.4s ease-out; }
    @keyframes valGlowFlash {
      0% { transform: scale(1.15); filter: drop-shadow(0 0 8px currentColor); }
      100% { transform: scale(1); filter: none; }
    }

    .gauge-dynamic-pill {
      font-size: 7.5px;
      font-weight: 700;
      padding: 1.5px 4px;
      border-radius: 2px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      line-height: 1;
      white-space: nowrap;
    }
    .pill-cyan { background: rgba(0, 240, 255, 0.15); color: #00f0ff; }
    .pill-amber { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
    .pill-emerald { background: rgba(52, 211, 153, 0.15); color: #34d399; }
    .pill-purple { background: rgba(192, 132, 252, 0.15); color: #c084fc; }

    .perf-gauge-name {
      font-size: 10.5px;
      font-weight: 600;
      color: #f1f5f9;
      line-height: 1.2;
      white-space: nowrap;
    }
    .perf-gauge-sub {
      font-size: 9px;
      color: #94a3b8;
      line-height: 1.2;
      margin-top: 1px;
      white-space: nowrap;
    }

    /* ----------------------------------------------------
       Pattern 1: Precision HUD Reticle Scanner (研判综合精度)
       ---------------------------------------------------- */
    .hud-reticle-scanner {
      width: 42px;
      height: 42px;
      position: relative;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0, 240, 255, 0.1) 0%, rgba(8, 16, 32, 0.85) 75%);
      border: 1px solid rgba(0, 240, 255, 0.35);
    }
    .reticle-ring.outer-dashed {
      position: absolute;
      inset: 2px;
      border-radius: 50%;
      border: 1px dashed rgba(0, 240, 255, 0.45);
      animation: reticleSpinReverse 8s linear infinite;
    }
    .reticle-ring.inner-solid {
      position: absolute;
      inset: 8px;
      border-radius: 50%;
      border: 1px solid rgba(0, 240, 255, 0.25);
    }
    .reticle-crosshair {
      position: absolute;
      inset: 0;
      background: 
        linear-gradient(rgba(0, 240, 255, 0.35) 1px, transparent 1px) center/100% 1px no-repeat,
        linear-gradient(90deg, rgba(0, 240, 255, 0.35) 1px, transparent 1px) center/1px 100% no-repeat;
    }
    .reticle-sweep-sector {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: conic-gradient(from 0deg, transparent 0deg, transparent 270deg, rgba(0, 240, 255, 0.25) 320deg, #00f0ff 360deg);
      animation: reticleSpin 2s linear infinite;
    }
    .reticle-target-dot {
      position: absolute;
      top: 9px;
      right: 10px;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #00f0ff;
      box-shadow: 0 0 6px #00f0ff;
      animation: reticleBlip 2s ease-in-out infinite;
    }
    @keyframes reticleSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    @keyframes reticleSpinReverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
    @keyframes reticleBlip { 0%, 100% { opacity: 0.2; transform: scale(0.6); } 50% { opacity: 1; transform: scale(1.3); } }

    /* ----------------------------------------------------
       Pattern 2: Quantum Pulse Oscilloscope (单篇推理时延)
       ---------------------------------------------------- */
    .oscilloscope-wave-box {
      width: 44px;
      height: 36px;
      position: relative;
      background: rgba(8, 16, 32, 0.85);
      border: 1px solid var(--latency-color, rgba(251, 191, 36, 0.35));
      border-radius: 4px;
      padding: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      --latency-color: #fbbf24;
    }
    .ecg-pulse-svg {
      width: 100%;
      height: 100%;
      color: var(--latency-color, #fbbf24);
    }
    .ecg-pulse-line {
      stroke-dasharray: 60;
      stroke-dashoffset: 60;
      animation: ecgSweep 1.6s ease-in-out infinite;
    }
    .ecg-scan-dot {
      animation: ecgDotPulse 1.6s ease-in-out infinite;
    }
    @keyframes ecgSweep {
      0% { stroke-dashoffset: 60; opacity: 0.3; }
      50% { stroke-dashoffset: 0; opacity: 1; filter: drop-shadow(0 0 3px currentColor); }
      100% { stroke-dashoffset: -60; opacity: 0.3; }
    }
    @keyframes ecgDotPulse {
      0%, 100% { opacity: 0.2; transform: scale(0.6); }
      50% { opacity: 1; transform: scale(1.2); filter: drop-shadow(0 0 4px currentColor); }
    }
    .speed-cyan { --latency-color: #00f0ff; }
    .speed-yellow { --latency-color: #fbbf24; }
    .speed-red { --latency-color: #ff3b30; }

    /* ----------------------------------------------------
       Pattern 3: Dual Orbital Satellite Scanner (嗅探覆盖度)
       ---------------------------------------------------- */
    .orbital-satellite-box {
      width: 42px;
      height: 42px;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .orbit-ring-outer {
      position: absolute;
      inset: 1px;
      border-radius: 50%;
      border: 1.5px solid rgba(52, 211, 153, 0.25);
      border-top-color: #34d399;
      border-right-color: #34d399;
      animation: orbitSpin 3s linear infinite;
    }
    .orbit-ring-inner {
      position: absolute;
      inset: 7px;
      border-radius: 50%;
      border: 1px dashed rgba(52, 211, 153, 0.4);
      animation: orbitSpinRev 5s linear infinite;
    }
    .orbit-satellite {
      position: absolute;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #34d399;
      box-shadow: 0 0 6px #34d399;
    }
    .orbit-satellite.sat-1 {
      top: -1px;
      left: calc(50% - 2px);
      animation: satOrbit 3s linear infinite;
    }
    .orbit-core-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #34d399;
      box-shadow: 0 0 8px #34d399;
      animation: corePulse 2s ease-in-out infinite;
    }
    @keyframes orbitSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    @keyframes orbitSpinRev { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
    @keyframes corePulse { 0%, 100% { transform: scale(0.8); opacity: 0.6; } 50% { transform: scale(1.2); opacity: 1; } }

    /* ----------------------------------------------------
       Pattern 4: Quantum Flux Pillars (实时 Token 消耗)
       ---------------------------------------------------- */
    .quantum-flux-box {
      width: 42px;
      height: 36px;
      position: relative;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      gap: 4px;
      padding-bottom: 2px;
    }
    .flux-pillar {
      width: 5px;
      height: 28px;
      background: rgba(192, 132, 252, 0.15);
      border-radius: 2px;
      position: relative;
      overflow: hidden;
    }
    .flux-fill {
      position: absolute;
      left: 0; right: 0; bottom: 0;
      background: linear-gradient(180deg, #f0abfc 0%, #a855f7 100%);
      border-radius: 2px;
      box-shadow: 0 0 6px rgba(192, 132, 252, 0.6);
      animation: fluxJump 1.2s ease-in-out infinite alternate;
    }
    .flux-pillar.p1 .flux-fill { height: 45%; animation-delay: 0.1s; animation-duration: 0.9s; }
    .flux-pillar.p2 .flux-fill { height: 85%; animation-delay: 0.3s; animation-duration: 1.1s; }
    .flux-pillar.p3 .flux-fill { height: 65%; animation-delay: 0.05s; animation-duration: 0.8s; }
    .flux-pillar.p4 .flux-fill { height: 95%; animation-delay: 0.25s; animation-duration: 1.0s; }
    .flux-spark {
      position: absolute;
      width: 2.5px;
      height: 2.5px;
      border-radius: 50%;
      background: #f0abfc;
      box-shadow: 0 0 4px #f0abfc;
      animation: sparkRise 1.5s ease-out infinite;
    }
    .flux-spark.s1 { left: 8px; bottom: 4px; }
    .flux-spark.s2 { right: 8px; bottom: 6px; animation-delay: 0.6s; }
    @keyframes fluxJump { 0% { height: 25%; } 100% { height: 95%; } }
    @keyframes sparkRise { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-20px); opacity: 0; } }

    /* Left Sidebar Donut Section */
    .sidebar-donut-section {
      margin-top: auto;
      padding-top: 8px;
      border-top: 1px solid rgba(0, 240, 255, 0.15);
      display: flex;
      flex-direction: column;
    }
    .sidebar-donut-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2px;
    }
    .sidebar-donut-title {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-highlight);
    }
    #doughnutChart {
      width: 100%;
      height: 120px;
    }
    .grade-legend-list {
      display: flex;
      flex-direction: column;
      gap: 5px;
      margin-top: 6px;
    }
    .grade-legend-row {
      background: rgba(0, 0, 0, 0.28);
      border: none;
      border-radius: 4px;
      padding: 4px 6px;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .grade-legend-row:hover {
      background: rgba(0, 240, 255, 0.08);
      border-color: var(--accent-cyan);
    }
    .grade-legend-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .grade-tag {
      font-size: 10px;
      font-weight: 700;
      padding: 1px 5px;
      border-radius: 3px;
    }
    .grade-tag.grade-s {
      background: rgba(255, 59, 48, 0.18);
      border: none;
      color: #ff3b30;
    }
    .grade-tag.grade-a {
      background: rgba(255, 149, 0, 0.18);
      border: none;
      color: #ff9500;
    }
    .grade-tag.grade-b {
      background: rgba(10, 132, 255, 0.18);
      border: none;
      color: #0a84ff;
    }
    .grade-tag.grade-c {
      background: rgba(148, 163, 184, 0.18);
      border: none;
      color: #94a3b8;
    }
    .grade-count {
      font-size: 10px;
      font-family: var(--font-mono);
      font-weight: 600;
      color: #ffffff;
    }
    .grade-delta {
      font-size: 9px;
      font-family: var(--font-mono);
      font-weight: 600;
      margin-left: 4px;
    }
    .grade-delta.up { color: #34d399; }
    .grade-delta.down { color: #f87171; }
    .grade-delta.flat { color: var(--text-muted); }
    [data-theme="light"] .grade-delta.up { color: #059669; }
    [data-theme="light"] .grade-delta.down { color: #dc2626; }
    .grade-legend-desc {
      font-size: 9px;
      color: var(--text-muted);
      margin-top: 2px;
      line-height: 1.25;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .step-ticker-slider {
      display: flex;
      flex-direction: column;
      transition: transform 0.35s ease-in-out;
    }
    .step-ticker-line {
      font-size: 9.5px;
      line-height: 14px;
      height: 14px;
      color: var(--text-muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .step-current .step-ticker-line {
      color: #ffd600;
    }

    .step-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 2px;
    }
    .step-pill {
      font-size: 10px;
      font-family: var(--font-mono);
      padding: 1px 6px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }
    .step-pill.done {
      background: rgba(0, 230, 118, 0.15);
      border: 1px solid rgba(0, 230, 118, 0.4);
      color: var(--accent-green);
    }
    .step-pill.current {
      background: rgba(255, 149, 0, 0.2);
      border: 1px solid #ff9500;
      color: #ff9500;
      box-shadow: 0 0 6px rgba(255, 149, 0, 0.3);
    }
    .step-pill.pending {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      color: var(--text-muted);
    }
    .step-pill.idle {
      background: rgba(0, 240, 255, 0.08);
      border: 1px solid rgba(0, 240, 255, 0.25);
      color: var(--accent-cyan);
    }
    .step-pill.idle::before {
      content: '';
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--accent-cyan);
      box-shadow: 0 0 4px var(--accent-cyan);
      animation: pillBreath 2s ease-in-out infinite;
      flex-shrink: 0;
    }
    .step-idle .simple-sub-pill::before {
      content: '';
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: var(--accent-cyan);
      box-shadow: 0 0 4px var(--accent-cyan);
      animation: pillBreath 2s ease-in-out infinite;
      margin-right: 3px;
      vertical-align: middle;
    }
    @keyframes pillBreath {
      0%, 100% { opacity: 1; box-shadow: 0 0 4px var(--accent-cyan); }
      50% { opacity: 0.3; box-shadow: 0 0 1px var(--accent-cyan); }
    }
    .step-badge-current {
      background: #ff9500;
      color: #000;
      font-size: 9px;
      font-weight: 700;
      padding: 1px 5px;
      border-radius: 3px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      box-shadow: 0 0 6px rgba(255, 149, 0, 0.6);
    }
    .step-progress-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 10px;
      margin-top: 3px;
    }
    .step-meta-label {
      color: var(--text-muted);
      font-size: 10px;
    }
    .step-progress-val {
      font-family: var(--font-mono);
      font-weight: 700;
      color: #ff9500;
    }
    .step-progress-track {
      width: 100%;
      height: 5px;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 3px;
      overflow: hidden;
      margin: 2px 0 3px;
      border: 1px solid rgba(255, 149, 0, 0.25);
    }
    .step-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #ff9500, #ffd600);
      border-radius: 3px;
      transition: width 0.4s ease;
      box-shadow: 0 0 6px #ff9500;
    }
    .step-status-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 10px;
      margin-bottom: 2px;
    }
    .step-eta-badge {
      font-family: var(--font-mono);
      color: var(--accent-cyan);
      font-size: 10px;
    }
    .step-sub-ticker {
      font-size: 9.5px;
      color: #cbd5e1;
      line-height: 1.25;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      opacity: 0.9;
    }
    .nav-list { list-style: none; margin-bottom: 16px; }
    .nav-item {
      padding: 8px 12px;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 500;
      color: var(--text-muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;
      transition: all 0.2s;
      border-left: 2px solid transparent;
    }
    .nav-item:hover {
      background: rgba(0, 240, 255, 0.08);
      color: var(--text-main);
    }
    .nav-item.active {
      background: rgba(0, 240, 255, 0.15);
      color: var(--accent-cyan);
      border-left: 2px solid var(--accent-cyan);
      font-weight: 600;
      box-shadow: inset 0 0 10px rgba(0, 240, 255, 0.15);
    }
    /* 态势控制中心 nav 旁的 badge 数字 (无边框浅红微色块) */
    .nav-badge {
      float: right;
      font-size: 11px;
      font-family: var(--font-mono);
      font-weight: 700;
      padding: 1px 7px;
      border-radius: 10px;
      background: rgba(244, 63, 94, 0.16);
      color: #fb7185;
      border: none !important;
      box-shadow: none !important;
      margin-top: 2px;
      letter-spacing: 0.3px;
    }
    .nav-badge.zero {
      background: rgba(148, 163, 184, 0.12);
      color: #94a3b8;
      border: none !important;
      box-shadow: none !important;
    }

    .settings-section-title {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--accent-cyan);
      margin: 8px 0 4px;
      padding-bottom: 3px;
      border-bottom: 1px dashed rgba(0, 240, 255, 0.2);
      display: flex;
      align-items: center;
    }
    .setting-group { margin-bottom: 6px; }
    .setting-label {
      font-size: 11px;
      color: var(--text-muted);
      margin-bottom: 6px;
      display: flex;
      justify-content: space-between;
    }
    .slider-container { display: flex; align-items: center; gap: 8px; }
    .hud-slider {
      flex: 1;
      accent-color: var(--accent-cyan);
      height: 4px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 2px;
      cursor: pointer;
    }
    .pill-group { display: flex; flex-wrap: wrap; gap: 4px; }
    .pill-btn {
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(0, 240, 255, 0.2);
      color: var(--text-muted);
      font-size: 11px;
      padding: 3px 8px;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s;
    }
    .pill-btn:hover { border-color: var(--accent-cyan); color: #fff; }
    .pill-btn.active {
      background: rgba(0, 240, 255, 0.2);
      border-color: var(--accent-cyan);
      color: var(--accent-cyan);
      font-weight: 600;
    }
    .hud-select {
      width: 100%;
      background: rgba(10, 20, 40, 0.8);
      border: 1px solid var(--border-cyan);
      color: var(--text-main);
      padding: 5px 8px;
      border-radius: 4px;
      font-size: 11px;
      outline: none;
    }
    .filter-reset-btn {
      width: auto !important;
      margin: 0 !important;
      padding: 1px 4px !important;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      color: var(--text-muted);
      font-size: 10px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 3px;
      transition: all 0.2s ease;
      opacity: 0.75;
      line-height: 1;
    }
    .filter-reset-btn:hover {
      background: transparent !important;
      border: none !important;
      color: var(--accent-cyan) !important;
      opacity: 1;
    }
    .active-filter-tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: rgba(0, 240, 255, 0.15);
      border: 1px solid rgba(0, 240, 255, 0.35);
      color: var(--accent-cyan);
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 3px;
      cursor: pointer;
      transition: all 0.15s;
    }
    .active-filter-tag:hover {
      background: rgba(255, 59, 48, 0.2);
      border-color: #ff3b30;
      color: #ff3b30;
    }
    .event-tag-pill {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      background: rgba(0, 240, 255, 0.08);
      border: 1px solid rgba(0, 240, 255, 0.25);
      color: var(--accent-cyan);
      font-size: 10px;
      font-weight: 500;
      padding: 1px 6px;
      border-radius: 3px;
      cursor: pointer;
      transition: all 0.15s;
    }
    .event-tag-pill:hover {
      background: rgba(0, 240, 255, 0.22);
      border-color: var(--accent-cyan);
    }
    [data-theme="light"] .event-tag-pill {
      background: rgba(10, 102, 194, 0.08);
      border-color: rgba(10, 102, 194, 0.25);
      color: #0a66c2;
    }
    [data-theme="light"] .event-tag-pill:hover {
      background: rgba(10, 102, 194, 0.18);
      border-color: #0a66c2;
    }
    .related-article-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 6px 10px;
      border-radius: 4px;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.08);
      cursor: pointer;
      transition: all 0.15s;
    }
    .related-article-item:hover {
      background: rgba(0, 240, 255, 0.08);
      border-color: rgba(0, 240, 255, 0.3);
    }
    [data-theme="light"] .related-article-item {
      background: rgba(0, 0, 0, 0.02);
      border-color: rgba(0, 0, 0, 0.08);
    }
    [data-theme="light"] .related-article-item:hover {
      background: rgba(10, 102, 194, 0.08);
      border-color: rgba(10, 102, 194, 0.25);
    }

    /* Center Map Panel */
    .map-card { height: 100%; min-height: 0; display: flex; flex-direction: column; }
    .map-chart-container { width: 100%; height: 100%; flex: 1; min-height: 15em; display: block; }
    .map-legend {
      position: absolute;
      bottom: 12px;
      left: 14px;
      background: rgba(8, 16, 32, 0.82);
      border: 1px solid rgba(0, 240, 255, 0.3);
      border-radius: 20px;
      padding: 6px 14px;
      font-size: 13px;
      font-weight: 500;
      z-index: 10;
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px 16px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
      pointer-events: none;
    }
    .legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
    .legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
    .legend-dot.dot-s { background: #ff3b30; box-shadow: 0 0 8px #ff3b30; }
    .legend-dot.dot-recent { background: #00f0ff; box-shadow: 0 0 8px #00f0ff; }
    .legend-dot.dot-a { background: #ff9500; box-shadow: 0 0 8px #ff9500; }
    .legend-dot.dot-normal { background: #00e676; box-shadow: 0 0 8px #00e676; }

    
    /* Main Layout Lock - Never Stretch Page */
    html, body {
      height: 100% !important;
      max-height: 100vh !important;
      overflow: hidden !important;
    }
    .dashboard-container {
      height: calc(100vh - 66px) !important;
      max-height: calc(100vh - 66px) !important;
      min-height: 0 !important;
      overflow: hidden !important;
      display: grid !important;
      grid-template-columns: 210px 1fr 355px !important;
      grid-template-rows: 100% !important;
      grid-template-areas: "sidebar center sources" !important;
      gap: 10px !important;
      padding: 10px 12px !important;
      box-sizing: border-box !important;
    }

    /* Right Panel: Strictly Fixed Stacked Column (2/3 Reports + 1/3 Sources) */
    .right-column-stack {
      grid-area: sources !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 10px !important;
      min-width: 0 !important;
      height: 100% !important;
      max-height: 100% !important;
      min-height: 0 !important;
      overflow: hidden !important;
    }
    .reports-panel-card {
      flex: 65 1 0% !important;
      height: 65% !important;
      min-height: 0 !important;
      max-height: 65% !important;
      display: flex !important;
      flex-direction: column !important;
      background: var(--bg-panel);
      border: 1px solid var(--border-cyan);
      border-radius: 6px;
      overflow: hidden !important;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(0, 240, 255, 0.03);
    }
    .sources-card {
      flex: 35 1 0% !important;
      height: 35% !important;
      min-height: 0 !important;
      max-height: 35% !important;
      display: flex !important;
      flex-direction: column !important;
      background: var(--bg-panel);
      border: 1px solid var(--border-cyan);
      border-radius: 6px;
      overflow: hidden !important;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(0, 240, 255, 0.03);
    }
    .reports-panel-body {
      flex: 1 !important;
      min-height: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      padding: 6px 8px !important;
      overflow: hidden !important;
    }
    .reports-feed-list {
      flex: 1 !important;
      min-height: 0 !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 3px !important;
    }
    .report-compact-row {
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
      padding: 3px 6px !important;
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(0, 240, 255, 0.12);
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.2s ease;
      min-height: 26px !important;
      height: 26px !important;
      flex-shrink: 0 !important;
      box-sizing: border-box !important;
    }
    .report-compact-row:hover {
      background: rgba(0, 240, 255, 0.12) !important;
      border-color: var(--accent-cyan) !important;
      transform: translateX(2px);
      box-shadow: 0 2px 8px rgba(0, 240, 255, 0.25);
    }
    .report-compact-badge {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 10px !important;
      font-weight: 700 !important;
      line-height: 1 !important;
      padding: 2px 5px !important;
      border-radius: 3px !important;
      border: none !important;
      white-space: nowrap !important;
      flex-shrink: 0 !important;
      font-family: var(--font-mono) !important;
      letter-spacing: 0.5px !important;
    }
    .report-compact-title {
      font-size: 11.5px !important;
      color: var(--text-main) !important;
      overflow: hidden !important;
      white-space: nowrap !important;
      text-overflow: ellipsis !important;
      flex: 1 !important;
      font-weight: 500 !important;
      line-height: 1.2 !important;
    }
    .report-compact-date {
      font-size: 10px !important;
      color: var(--text-muted) !important;
      font-family: var(--font-mono) !important;
      white-space: nowrap !important;
      flex-shrink: 0 !important;
    }
    .report-new-badge {
      display: inline-block !important;
      font-size: 9px !important;
      font-weight: 700 !important;
      padding: 1px 4px !important;
      border-radius: 3px !important;
      background: rgba(255, 59, 48, 0.25) !important;
      color: #ff3b30 !important;
      letter-spacing: 0.5px !important;
      flex-shrink: 0 !important;
      animation: newPulse 2s ease-in-out infinite !important;
    }
    @keyframes newPulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }
    [data-theme="light"] .report-new-badge {
      background: rgba(255, 59, 48, 0.12) !important;
      color: #dc2626 !important;
    }

    /* Modal Architecture matching reports.html */
    .modal {
      display: none !important;
      position: fixed !important;
      inset: 0 !important;
      background: rgba(3, 7, 18, 0.85) !important;
      z-index: 9999 !important;
      align-items: flex-start !important;
      justify-content: center !important;
      padding: 30px 16px !important;
      overflow: auto !important;
      -webkit-backdrop-filter: blur(8px) !important;
      backdrop-filter: blur(8px) !important;
    }
    .modal.open {
      display: flex !important;
    }
    .modalbox {
      background: #0b1528 !important;
      max-width: 920px !important;
      width: 100% !important;
      border-radius: 8px !important;
      padding: 20px 24px !important;
      box-shadow: 0 0 40px rgba(0, 240, 255, 0.3) !important;
      max-height: 88vh !important;
      overflow: auto !important;
      border: 1px solid var(--border-cyan-bright) !important;
      color: var(--text-main) !important;
      box-sizing: border-box !important;
    }
    .modalbox h2 {
      margin: 0 0 6px;
      font-size: 18px;
      line-height: 1.4;
      color: #ffffff;
      padding-right: 30px;
    }
    .modalbox .meta-bar {
      color: var(--text-muted);
      font-size: 11.5px;
      margin-bottom: 12px;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
      border-bottom: 1px solid rgba(0, 240, 255, 0.2);
      padding-bottom: 8px;
    }
    .modalbox .close {
      float: right;
      font-size: 24px;
      color: var(--text-muted);
      cursor: pointer;
      border: none;
      background: none;
      line-height: 1;
    }
    .modalbox .close:hover { color: #ffffff; }

    .copy-btn {
      float: right;
      font-size: 11.5px;
      padding: 3px 10px;
      border: 1px solid var(--accent-blue);
      background: rgba(10, 132, 255, 0.15);
      color: #fff;
      border-radius: 3px;
      cursor: pointer;
      margin-left: 6px;
      font-family: inherit;
      transition: all 0.2s;
    }
    .copy-btn:hover { background: var(--accent-blue); color: #fff; }
    .copy-btn.copied { background: #2e7d32; color: #fff; border-color: #2e7d32; }

    .upgrade-btn {
      float: right;
      font-size: 11.5px;
      padding: 3px 10px;
      border: 1px solid #e65100;
      background: rgba(230, 81, 0, 0.15);
      color: #ff9800;
      border-radius: 3px;
      cursor: pointer;
      margin-left: 6px;
      font-family: inherit;
      transition: all 0.2s ease;
    }
    .upgrade-btn:hover { background: #e65100; color: #fff; }
    .upgrade-btn:disabled { opacity: 0.6; cursor: wait; background: rgba(230, 81, 0, 0.1); border-color: #ffb74d; color: #ffb74d; }

    .markdown h1 { margin: 16px 0 10px; font-size: 20px; color: #ffffff; border-bottom: 2px solid var(--accent-blue); padding-bottom: 5px; }
    .markdown h2 { margin: 14px 0 8px; font-size: 16px; color: var(--accent-cyan); border-bottom: 1px solid rgba(0, 240, 255, 0.2); padding-bottom: 4px; }
    .markdown h3 { margin: 12px 0 6px; font-size: 14px; color: #ffd600; }
    .markdown p { margin: 0 0 10px; line-height: 1.75; color: var(--text-main); }
    .markdown ul, .markdown ol { margin: 0 0 10px 0; padding-left: 26px; }
    .markdown li { margin: 0 0 4px; line-height: 1.7; color: var(--text-main); }
    .markdown strong { color: #ffffff; }
    .markdown code { background: rgba(0, 240, 255, 0.1); padding: 1px 5px; border-radius: 3px; font-size: 12px; color: var(--accent-cyan); }
    .markdown pre { background: rgba(0, 0, 0, 0.5); padding: 10px; border-radius: 4px; overflow: auto; border: 1px solid rgba(0, 240, 255, 0.2); }

    /* Progress card */
    .upgrade-progress-card {
      background: rgba(15, 23, 42, 0.85);
      border: 1px solid rgba(99, 102, 241, 0.4);
      border-radius: 6px;
      padding: 10px 14px;
      margin: 8px 0 12px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
      animation: cardFadeIn 0.3s ease;
      transition: all 0.3s ease;
    }
    .upgrade-progress-card.success { background: rgba(46, 125, 50, 0.15); border-color: rgba(74, 222, 128, 0.5); }
    .upgrade-progress-card.error { background: rgba(220, 38, 38, 0.15); border-color: rgba(248, 113, 113, 0.5); }
    .progress-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
    .progress-title-wrap { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12px; color: var(--accent-cyan); }
    .upgrade-progress-card.success .progress-title-wrap { color: #4ade80; }
    .upgrade-progress-card.error .progress-title-wrap { color: #f87171; }
    .progress-timer { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
    .progress-bar-track { height: 6px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; overflow: hidden; position: relative; }
    .upgrade-progress-card.success .progress-bar-track { background: rgba(46, 125, 50, 0.2); }
    .progress-bar-fill {
      height: 100%; width: 0%;
      background: linear-gradient(90deg, #0a66c2 0%, #00f0ff 60%, #00e676 100%);
      border-radius: 3px;
      transition: width 0.4s ease;
      position: relative;
    }
    .upgrade-progress-card.success .progress-bar-fill { background: #16a34a; }
    .upgrade-progress-card.error .progress-bar-fill { background: #dc2626; }
    .progress-bar-fill::after {
      content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
      animation: shimmer 1.6s infinite;
    }
    .progress-steps-list { display: flex; justify-content: space-between; margin-top: 6px; gap: 4px; }
    .progress-step-item { flex: 1; font-size: 10.5px; color: var(--text-muted); text-align: center; transition: color 0.3s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .progress-step-item.active { color: var(--accent-cyan); font-weight: 600; }
    .progress-step-item.done { color: #4ade80; font-weight: 500; }
    .progress-step-item::before { content: ''; display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--text-muted); margin: 0 auto 2px; transition: all 0.3s; }
    .progress-step-item.active::before { background: var(--accent-cyan); transform: scale(1.4); box-shadow: 0 0 6px var(--accent-cyan); }
    .progress-step-item.done::before { background: #4ade80; }

    /* Light theme overrides for reports panel & modal */
    [data-theme="light"] .reports-panel-card {
      background: #ffffff !important;
      border: 1px solid rgba(0, 0, 0, 0.08) !important;
      box-shadow: 0 2px 10px rgba(0,0,0,0.04) !important;
    }
    [data-theme="light"] .report-compact-row {
      background: #ffffff !important;
      border: 1px solid rgba(0, 0, 0, 0.06) !important;
    }
    [data-theme="light"] .report-compact-row:hover {
      background: rgba(20, 110, 245, 0.04) !important;
      border-color: #146ef5 !important;
      box-shadow: 0 2px 8px rgba(20, 110, 245, 0.12) !important;
    }
    [data-theme="light"] .report-compact-title { color: #1e293b !important; }
    [data-theme="light"] .report-compact-date { color: #666666 !important; }
    [data-theme="light"] .modal { background: rgba(15, 23, 42, 0.5) !important; }
    [data-theme="light"] .modalbox {
      background: #ffffff !important;
      border: 1px solid rgba(0, 0, 0, 0.08) !important;
      box-shadow: 0 20px 45px rgba(0,0,0,0.1) !important;
      color: #1e293b !important;
    }
    [data-theme="light"] .modalbox h2 { color: #1e293b !important; }
    [data-theme="light"] .modalbox .meta-bar { border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important; color: #666666 !important; }
    [data-theme="light"] .markdown h1 { color: #1e293b !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; }
    [data-theme="light"] .markdown h2 { color: #1e293b !important; border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important; }
    [data-theme="light"] .markdown h3 { color: #d97706 !important; }
    [data-theme="light"] .markdown strong { color: #1e293b !important; }
    [data-theme="light"] .markdown code { background: #f1f5f9 !important; color: #146ef5 !important; }
    [data-theme="light"] .copy-btn { background: rgba(20, 110, 245, 0.08) !important; color: #146ef5 !important; border-color: rgba(20, 110, 245, 0.25) !important; }
    [data-theme="light"] .copy-btn:hover { background: #146ef5 !important; color: #ffffff !important; }
    [data-theme="light"] .upgrade-btn { background: #fff3e0 !important; color: #e65100 !important; border-color: #ffb74d !important; }
    [data-theme="light"] .upgrade-btn:hover { background: #e65100 !important; color: #fff !important; }
    [data-theme="light"] .upgrade-progress-card { background: #f8fafc !important; border-color: rgba(0, 0, 0, 0.08) !important; }
    
    .sources-table-container {
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      max-height: calc(100vh - 280px);
    }
    .sources-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 11.5px;
      table-layout: fixed;
    }
    .sources-table th {
      text-align: left;
      padding: 5px 3px;
      color: var(--text-muted);
      border-bottom: 1px solid rgba(0, 240, 255, 0.2);
      font-size: 10.5px;
      text-transform: uppercase;
      position: sticky;
      top: 0;
      background: rgba(13, 23, 46, 0.96);
      z-index: 2;
      white-space: nowrap;
    }
    .sources-table td {
      padding: 5px 3px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.04);
      color: var(--text-main);
      vertical-align: middle;
    }
    .sources-table tr:hover { background: rgba(0, 240, 255, 0.08); cursor: pointer; }
    .source-name-cell {
      display: flex;
      align-items: center;
      gap: 4px;
      overflow: hidden;
      white-space: nowrap;
    }
    .source-rank-num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 15px;
      height: 15px;
      border-radius: 3px;
      background: rgba(255, 255, 255, 0.06);
      color: var(--text-muted);
      font-size: 9.5px;
      font-family: var(--font-mono);
      flex-shrink: 0;
    }
    .source-rank-num.rank-1 { background: rgba(255, 214, 0, 0.2); color: #ffd600; font-weight: 700; }
    .source-rank-num.rank-2 { background: rgba(0, 240, 255, 0.2); color: #00f0ff; font-weight: 700; }
    .source-rank-num.rank-3 { background: rgba(0, 230, 118, 0.2); color: #00e676; font-weight: 700; }
    .source-main-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 600;
      color: var(--text-main);
      font-size: 11px;
    }
    .source-flag-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13.5px;
      line-height: 1;
      cursor: help;
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
      transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .source-flag-badge:hover {
      transform: scale(1.35);
    }
    .source-dir-tag {
      font-size: 9.5px;
      padding: 2px 5px;
      border-radius: 3px;
      font-weight: 600;
      text-align: center;
      white-space: nowrap;
      letter-spacing: 0.2px;
      display: inline-block;
      border: none !important;
    }
    .dir-thinktank { background: rgba(191, 90, 242, 0.2); color: #c084fc; border: 1px solid rgba(191, 90, 242, 0.35); }
    .dir-defense { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.35); }
    .dir-econ { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.35); }
    .dir-geo { background: rgba(37, 99, 235, 0.25); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.4); }
    .dir-gov { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.35); }
    .dir-media { background: rgba(6, 182, 212, 0.2); color: #22d3ee; border: 1px solid rgba(6, 182, 212, 0.35); }

    .source-tag {
      font-size: 10px;
      padding: 1px 6px;
      border-radius: 3px;
      font-weight: 600;
      text-align: center;
      white-space: nowrap;
    }
    .sentiment-negative { background: rgba(255, 59, 48, 0.15); color: var(--accent-red); border: 1px solid rgba(255, 59, 48, 0.3); }
    .sentiment-mixed { background: rgba(255, 149, 0, 0.15); color: var(--accent-orange); border: 1px solid rgba(255, 149, 0, 0.3); }
    .sentiment-neutral { background: rgba(255, 214, 0, 0.15); color: var(--accent-yellow); border: 1px solid rgba(255, 214, 0, 0.3); }
    .sentiment-positive { background: rgba(0, 230, 118, 0.15); color: var(--accent-green); border: 1px solid rgba(0, 230, 118, 0.3); }

    .sources-bar-section {
      padding-top: 10px;
      border-top: 1px solid rgba(0, 240, 255, 0.15);
      margin-top: 8px;
    }
    .source-bar-item { margin-bottom: 8px; }
    .source-bar-label {
      display: flex;
      justify-content: space-between;
      font-size: 11px;
      margin-bottom: 3px;
      color: var(--text-muted);
    }
    .source-progress-track {
      height: 6px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 3px;
      overflow: hidden;
    }
    .source-progress-fill {
      height: 100%;
      border-radius: 3px;
      transition: width 0.6s ease;
    }

    /* Bottom Row - 3 Analytics Cards */
    .bottom-row-container {
      grid-area: bottom;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 12px;
      min-height: 0;
    }
    .bottom-chart-box { width: 100%; height: 160px; }

    /* Keyword Word Cloud / List */
    .wordcloud-container {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-content: flex-start;
      height: 160px;
      overflow-y: auto;
      padding: 4px;
    }
    .word-chip {
      background: rgba(0, 240, 255, 0.06);
      border: 1px solid rgba(0, 240, 255, 0.2);
      color: var(--text-main);
      padding: 4px 9px;
      border-radius: 4px;
      font-size: 12px;
      font-family: var(--font-mono);
      cursor: pointer;
      transition: all 0.2s;
    }
    .word-chip:hover {
      background: rgba(0, 240, 255, 0.25);
      color: #fff;
      border-color: var(--accent-cyan);
      box-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
      transform: scale(1.05);
    }
    .word-chip.hot-high {
      font-size: 15px;
      font-weight: 700;
      color: var(--accent-cyan);
      border-color: rgba(0, 240, 255, 0.5);
    }
    .word-chip.hot-med {
      font-size: 13px;
      font-weight: 600;
      color: #99eeff;
    }

    /* Intelligence Dossier Modal */
    .modal-overlay {
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(3, 7, 18, 0.85);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      z-index: 200;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .modal-overlay.active { display: flex; }
    .modal-card {
      background: #0b1528;
      border: 1px solid var(--border-cyan-bright);
      box-shadow: 0 0 40px rgba(0, 240, 255, 0.3);
      border-radius: 8px;
      width: 100%;
      max-width: 860px;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      animation: modalFadeIn 0.25s ease;
    }
    @keyframes modalFadeIn {
      from { opacity: 0; transform: scale(0.95); }
      to { opacity: 1; transform: scale(1); }
    }
    .modal-header {
      padding: 14px 18px;
      border-bottom: 1px solid var(--border-cyan);
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(0, 240, 255, 0.05);
    }
    .modal-title { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.4; }
    .modal-close {
      background: transparent;
      border: none;
      color: var(--text-muted);
      font-size: 20px;
      cursor: pointer;
      padding: 4px;
    }
    .modal-close:hover { color: var(--accent-cyan); }
    .modal-body {
      padding: 18px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .score-radar-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
      background: rgba(0, 0, 0, 0.3);
      padding: 12px;
      border-radius: 6px;
      border: 1px solid rgba(0, 240, 255, 0.15);
    }
    .score-dim-box {
      text-align: center;
      padding: 8px 4px;
      background: rgba(255, 255, 255, 0.02);
      border-radius: 4px;
    }
    .score-dim-name { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
    .score-dim-val { font-size: 16px; font-weight: 700; font-family: var(--font-mono); color: var(--accent-cyan); }
    .score-total-badge {
      font-size: 20px;
      font-weight: 800;
      padding: 4px 12px;
      border-radius: 4px;
      display: inline-block;
    }
    .grade-S { background: rgba(255, 59, 48, 0.2); color: var(--accent-red); border: 1px solid var(--accent-red); }
    .grade-A { background: rgba(255, 149, 0, 0.2); color: var(--accent-orange); border: 1px solid var(--accent-orange); }
    .grade-B { background: rgba(10, 132, 255, 0.2); color: var(--accent-blue); border: 1px solid var(--accent-blue); }
    .grade-C { background: rgba(142, 142, 147, 0.2); color: #8e8e93; border: 1px solid #8e8e93; }

    .article-text-panel {
      background: rgba(0, 0, 0, 0.25);
      border: 1px solid rgba(255, 255, 255, 0.06);
      border-radius: 6px;
      padding: 14px;
      line-height: 1.7;
      font-size: 13px;
      color: #d1d5db;
      white-space: pre-wrap;
      max-height: 320px;
      overflow-y: auto;
    }

    /* Live Feed Drawer */
    .feed-drawer {
      position: fixed;
      top: 54px; right: -480px; width: 460px; bottom: 0;
      background: rgba(11, 21, 40, 0.95);
      border-left: 1px solid var(--border-cyan);
      box-shadow: -10px 0 30px rgba(0, 0, 0, 0.8);
      z-index: 150;
      transition: right 0.3s ease;
      display: flex;
      flex-direction: column;
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
    }
    .feed-drawer.open { right: 0; }
    .drawer-header {
      padding: 12px 16px;
      border-bottom: 1px solid rgba(0, 240, 255, 0.2);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .feed-list { flex: 1; overflow-y: auto; padding: 10px; }
    .reports-drawer {
      position: fixed;
      top: 54px; right: -520px; width: 500px; bottom: 0;
      background: rgba(11, 21, 40, 0.95);
      border-left: 1px solid var(--border-cyan);
      box-shadow: -10px 0 30px rgba(0, 0, 0, 0.8);
      z-index: 155;
      transition: right 0.3s ease;
      display: flex;
      flex-direction: column;
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
    }
    .reports-drawer.open { right: 0; }
    .report-item {
      padding: 10px 12px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      cursor: pointer;
      transition: background 0.15s;
    }
    .report-item:hover { background: rgba(0, 240, 255, 0.06); }
    .report-item-title { font-size: 13px; color: #fff; font-weight: 500; margin-bottom: 4px; line-height: 1.4; }
    .report-item-meta { font-size: 11px; color: var(--text-muted); display: flex; justify-content: space-between; align-items: center; }
    .report-detail-drawer {
      position: fixed;
      top: 54px; right: -620px; width: 600px; bottom: 0;
      background: rgba(11, 21, 40, 0.97);
      border-left: 1px solid var(--border-cyan);
      box-shadow: -10px 0 30px rgba(0, 0, 0, 0.8);
      z-index: 160;
      transition: right 0.3s ease;
      display: flex;
      flex-direction: column;
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
    }
    .report-detail-drawer.open { right: 0; }
    .report-md-body { flex: 1; overflow-y: auto; padding: 16px; font-size: 13px; color: var(--text-main); line-height: 1.7; }
    .report-md-body h1,.report-md-body h2,.report-md-body h3 { color: var(--accent-cyan); margin: 16px 0 8px; }
    .report-md-body p { margin: 8px 0; }
    .report-md-body ul,.report-md-body ol { padding-left: 20px; }

    /* --- 首页标准研判报告弹窗 (与 reports.html 体验完全一致) --- */
    #reportModal.modal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(3, 7, 18, 0.85);
      z-index: 210;
      align-items: flex-start;
      justify-content: center;
      padding: 40px 16px;
      overflow: auto;
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
    }
    #reportModal.modal.open { display: flex; }
    #reportModal .modalbox {
      background: #0b1528;
      max-width: 900px;
      width: 100%;
      border-radius: 8px;
      padding: 24px 28px;
      box-shadow: 0 0 40px rgba(0, 240, 255, 0.25), 0 20px 25px -5px rgba(0, 0, 0, 0.5);
      max-height: 85vh;
      overflow: auto;
      border: 1px solid var(--border-cyan-bright);
      color: #e2e8f0;
      animation: modalFadeIn 0.25s ease;
    }
    .modal-title-zh {
      font-weight: 700;
      font-size: 19px;
      color: #ffffff;
      line-height: 1.4;
      margin-bottom: 3px;
    }
    .modal-title-en {
      font-size: 12.5px;
      color: var(--text-muted);
      line-height: 1.4;
    }
    .modal-cat-tag {
      color: var(--accent-cyan);
      font-weight: 600;
    }
    .modal-raw-link {
      color: var(--accent-cyan);
      text-decoration: none;
      margin-left: auto;
      font-size: 12px;
      transition: opacity 0.2s;
    }
    .modal-raw-link:hover {
      text-decoration: underline;
    }

    [data-theme="light"] #reportModal.modal {
      background: rgba(15, 23, 42, 0.5);
    }
    [data-theme="light"] #reportModal .modalbox {
      background: #ffffff;
      border: 1px solid rgba(0, 0, 0, 0.08);
      box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1);
      color: #1e293b;
    }
    [data-theme="light"] .modal-title-zh {
      color: #0d2c54;
    }
    [data-theme="light"] .modal-title-en {
      color: #64748b;
    }
    [data-theme="light"] .modal-cat-tag {
      color: #146ef5;
    }
    [data-theme="light"] .modal-raw-link {
      color: #146ef5;
    }

    #reportModal .close {
      float: right;
      font-size: 24px;
      color: var(--text-muted);
      cursor: pointer;
      border: none;
      background: none;
      line-height: 1;
      transition: color 0.2s;
    }
    #reportModal .close:hover { color: var(--accent-cyan); }
    [data-theme="light"] #reportModal .close:hover { color: #146ef5; }
    #reportModal .meta-bar {
      color: var(--text-muted);
      font-size: 12px;
      margin: 12px 0 16px;
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      padding-bottom: 10px;
    }
    [data-theme="light"] #reportModal .meta-bar {
      border-bottom-color: rgba(0, 0, 0, 0.06);
    }

    /* 报告功能按钮组 */
    .copy-btn {
      float: right;
      font-size: 12px;
      padding: 4px 10px;
      border: 1px solid var(--accent-cyan);
      background: rgba(0, 240, 255, 0.08);
      color: var(--accent-cyan);
      border-radius: 4px;
      cursor: pointer;
      margin-left: 6px;
      font-family: inherit;
      transition: all 0.2s ease;
    }
    .copy-btn:hover {
      background: var(--accent-cyan);
      color: #000;
    }
    .copy-btn.copied {
      background: #16a34a;
      color: #fff;
      border-color: #16a34a;
    }
    .upgrade-btn {
      float: right;
      font-size: 12px;
      padding: 4px 10px;
      border: 1px solid #ea580c;
      background: rgba(234, 88, 12, 0.08);
      color: #fb923c;
      border-radius: 4px;
      cursor: pointer;
      margin-left: 6px;
      font-family: inherit;
      transition: all 0.2s ease;
    }
    .upgrade-btn:hover {
      background: #ea580c;
      color: #fff;
    }
    .upgrade-btn:disabled {
      opacity: 0.6;
      cursor: wait;
    }
    [data-theme="light"] .copy-btn {
      border-color: #146ef5;
      background: #ffffff;
      color: #146ef5;
    }
    [data-theme="light"] .copy-btn:hover {
      background: #146ef5;
      color: #ffffff;
    }
    [data-theme="light"] .upgrade-btn {
      background: #ffffff;
      color: #ea580c;
    }

    /* Markdown 格式排版渲染 */
    #reportModal .markdown h1 { margin: 18px 0 10px; font-size: 20px; color: var(--accent-cyan); border-bottom: 2px solid var(--accent-blue); padding-bottom: 6px; }
    #reportModal .markdown h2 { margin: 16px 0 8px; font-size: 17px; color: var(--accent-cyan); border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 4px; }
    #reportModal .markdown h3 { margin: 14px 0 6px; font-size: 15px; color: #fff; }
    #reportModal .markdown p { margin: 0 0 10px; line-height: 1.75; color: #cbd5e1; font-size: 13.5px; }
    #reportModal .markdown ul, #reportModal .markdown ol { margin: 0 0 10px 0; padding-left: 24px; }
    #reportModal .markdown li { margin: 0 0 5px; line-height: 1.7; color: #cbd5e1; font-size: 13.5px; }
    #reportModal .markdown strong { color: var(--accent-cyan); }
    #reportModal .markdown code { background: rgba(0, 240, 255, 0.08); padding: 1px 5px; border-radius: 4px; font-size: 12.5px; color: var(--accent-cyan); font-family: var(--font-mono); }
    #reportModal .markdown pre { background: rgba(0, 0, 0, 0.3); padding: 10px; border-radius: 6px; overflow: auto; border: 1px solid rgba(255, 255, 255, 0.08); }
    #reportModal .markdown a { color: var(--accent-cyan); text-decoration: none; word-break: break-all; }
    #reportModal .markdown a:hover { text-decoration: underline; }

    [data-theme="light"] #reportModal .markdown h1 { color: #0d2c54; border-bottom-color: #146ef5; }
    [data-theme="light"] #reportModal .markdown h2 { color: #0d2c54; border-bottom-color: rgba(0, 0, 0, 0.08); }
    [data-theme="light"] #reportModal .markdown h3 { color: #1e293b; }
    [data-theme="light"] #reportModal .markdown p, [data-theme="light"] #reportModal .markdown li { color: #334155; }
    [data-theme="light"] #reportModal .markdown strong { color: #146ef5; }
    [data-theme="light"] #reportModal .markdown code { background: rgba(20, 110, 245, 0.06); color: #146ef5; }
    [data-theme="light"] #reportModal .markdown pre { background: #f8fafc; border-color: rgba(0, 0, 0, 0.08); }
    [data-theme="light"] #reportModal .markdown a { color: #146ef5; }
    .feed-count-badge { font-size: 11px; color: var(--accent-cyan); font-weight: 600; margin-left: 8px; }
    .feed-item {
      padding: 10px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      border-radius: 4px;
      margin-bottom: 6px;
      background: rgba(255, 255, 255, 0.02);
      cursor: pointer;
      transition: all 0.2s;
    }
    .feed-item:hover {
      background: rgba(0, 240, 255, 0.1);
      border-color: rgba(0, 240, 255, 0.3);
    }
    .feed-item-title { font-size: 13px; font-weight: 600; color: var(--text-highlight); margin-bottom: 4px; }
    .feed-item-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); }

    /* ============================================================
       Webflow Light Theme Comprehensive Overrides
       ============================================================ */
    [data-theme="light"] header.hud-header {
      background: #ffffff !important;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    }
    [data-theme="light"] .header-toggle {
      background: #ffffff !important;
      border-color: rgba(0, 0, 0, 0.12) !important;
      color: #146ef5 !important;
    }
    [data-theme="light"] .header-toggle:hover {
      background: rgba(20, 110, 245, 0.06) !important;
      border-color: #146ef5 !important;
      box-shadow: none !important;
    }
    [data-theme="light"] .header-title {
      color: #146ef5 !important;
      text-shadow: none !important;
    }
    [data-theme="light"] .header-title span {
      color: #146ef5 !important;
    }
    [data-theme="light"] .header-title .tagline {
      color: #666666 !important;
      border-left: 1px solid rgba(0, 0, 0, 0.12) !important;
    }
    [data-theme="light"] .header-center {
      color: #666666 !important;
    }
    [data-theme="light"] .time-badge {
      background: rgba(20, 110, 245, 0.06) !important;
      border-color: rgba(20, 110, 245, 0.2) !important;
      color: #146ef5 !important;
      font-weight: 600 !important;
    }
    [data-theme="light"] .hud-stat-pill {
      background: rgba(22, 163, 74, 0.08) !important;
      border-color: rgba(22, 163, 74, 0.25) !important;
      color: #16a34a !important;
    }
    [data-theme="light"] .hud-stat-pill.alert {
      background: rgba(234, 88, 12, 0.08) !important;
      border-color: rgba(234, 88, 12, 0.25) !important;
      color: #ea580c !important;
    }
    [data-theme="light"] .hud-btn {
      background: transparent !important;
      border: 1px solid transparent !important;
      color: #334155 !important;
      box-shadow: none !important;
    }
    [data-theme="light"] .hud-btn:hover {
      background: rgba(20, 110, 245, 0.06) !important;
      color: #146ef5 !important;
      border-color: rgba(20, 110, 245, 0.2) !important;
      box-shadow: none !important;
    }
    [data-theme="light"] .hud-btn.active {
      background: #146ef5 !important;
      color: #ffffff !important;
      border-color: #146ef5 !important;
    }

    /* Cards & Panels */
    [data-theme="light"] .hud-card {
      background: #ffffff !important;
      border: 1px solid rgba(0, 0, 0, 0.08) !important;
      border-radius: 6px !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    }
    [data-theme="light"] .hud-card::before,
    [data-theme="light"] .hud-card::after {
      display: none !important;
    }
    [data-theme="light"] .card-header {
      background: #ffffff !important;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    }
    [data-theme="light"] .card-title {
      color: #1e293b !important;
      font-weight: 700 !important;
      text-shadow: none !important;
    }
    [data-theme="light"] .card-title::before {
      background: #146ef5 !important;
      box-shadow: none !important;
    }
    [data-theme="light"] .card-header span {
      color: #1e293b !important;
    }

    /* Left Sidebar Navigation & Controls */
    [data-theme="light"] .nav-item {
      color: #475569 !important;
    }
    [data-theme="light"] .nav-item:hover {
      background: rgba(0, 0, 0, 0.03) !important;
      color: #146ef5 !important;
    }
    [data-theme="light"] .nav-item.active {
      background: rgba(20, 110, 245, 0.08) !important;
      color: #146ef5 !important;
      border-left: 3px solid #146ef5 !important;
      box-shadow: none !important;
      font-weight: 600 !important;
    }
    [data-theme="light"] .nav-badge {
      background: #fee2e2 !important;
      color: #dc2626 !important;
      border: 1px solid #fca5a5 !important;
      font-weight: 700 !important;
    }
    [data-theme="light"] .nav-badge.zero {
      background: rgba(0, 0, 0, 0.05) !important;
      color: #94a3b8 !important;
      border-color: rgba(0, 0, 0, 0.08) !important;
    }
    [data-theme="light"] .settings-section-title {
      color: #1e293b !important;
      font-weight: 700 !important;
      border-bottom: 1px dashed rgba(0, 0, 0, 0.1) !important;
    }
    [data-theme="light"] .setting-label {
      color: #666666 !important;
    }
    [data-theme="light"] .pill-btn {
      background: #ffffff !important;
      border: 1px solid rgba(0, 0, 0, 0.12) !important;
      color: #475569 !important;
      border-radius: 4px !important;
    }
    [data-theme="light"] .pill-btn:hover {
      background: rgba(20, 110, 245, 0.05) !important;
      border-color: #146ef5 !important;
      color: #146ef5 !important;
    }
    [data-theme="light"] .pill-btn.active {
      background: #146ef5 !important;
      color: #ffffff !important;
      border-color: #146ef5 !important;
    }
    [data-theme="light"] .hud-select {
      background: #ffffff !important;
      border: 1px solid rgba(0, 0, 0, 0.12) !important;
      color: #1e293b !important;
      border-radius: 4px !important;
    }
    [data-theme="light"] .hud-select option {
      background: #ffffff !important;
      color: #1e293b !important;
    }
    [data-theme="light"] .hud-slider {
      background: #e2e8f0 !important;
      accent-color: #146ef5 !important;
    }

    /* Map and Legend */
    [data-theme="light"] .map-legend {
      background: rgba(255, 255, 255, 0.92) !important;
      border: 1px solid rgba(0, 0, 0, 0.08) !important;
      color: #1e293b !important;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
      border-radius: 6px !important;
    }
    [data-theme="light"] .legend-item {
      color: #334155 !important;
    }
    [data-theme="light"] .legend-dot.dot-recent {
      background: #146ef5;
      box-shadow: 0 0 8px rgba(20, 110, 245, 0.4);
    }

    /* Right Sources Card & Table */
    [data-theme="light"] .sources-table th {
      background: #f8fafc !important;
      color: #666666 !important;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    }
    [data-theme="light"] .sources-table td {
      border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
      color: #1e293b !important;
    }
    [data-theme="light"] .sources-table tr:hover {
      background: rgba(0, 0, 0, 0.02) !important;
    }
    [data-theme="light"] .source-name-cell span:first-child {
      color: #1e293b !important;
    }
    [data-theme="light"] .sources-bar-section {
      border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
    }
    [data-theme="light"] .source-bar-label {
      color: #475569 !important;
    }
    [data-theme="light"] .source-progress-track {
      background: #e2e8f0 !important;
    }
    [data-theme="light"] #sourcesTotalBadge {
      background: transparent !important;
      color: #666666 !important;
      border: none !important;
      font-weight: 500 !important;
      padding: 0 !important;
    }
    [data-theme="light"] #reportsPanelCountBadge {
      background: transparent !important;
      color: #666666 !important;
      border: none !important;
      font-weight: 500 !important;
      padding: 0 !important;
    }
    [data-theme="light"] .source-rank-num { background: rgba(0, 0, 0, 0.05) !important; color: #666666 !important; }
    [data-theme="light"] .source-rank-num.rank-1 { background: #fef3c7 !important; color: #b45309 !important; }
    [data-theme="light"] .source-rank-num.rank-2 { background: #e0f2fe !important; color: #0369a1 !important; }
    [data-theme="light"] .source-rank-num.rank-3 { background: #dcfce7 !important; color: #15803d !important; }
    /* 研判方向：五彩高辨识度标签体系（彻底区分地缘政治与媒体舆情） */
    [data-theme="light"] .dir-thinktank { background: #f3e8ff !important; color: #7e22ce !important; border: 1px solid #d8b4fe !important; }
    [data-theme="light"] .dir-defense { background: #fee2e2 !important; color: #dc2626 !important; border: 1px solid #fca5a5 !important; }
    [data-theme="light"] .dir-econ { background: #fef3c7 !important; color: #d97706 !important; border: 1px solid #fcd34d !important; }
    [data-theme="light"] .dir-geo { background: #dbeafe !important; color: #1d4ed8 !important; border: 1px solid #93c5fd !important; font-weight: 700 !important; }
    [data-theme="light"] .dir-gov { background: #dcfce7 !important; color: #15803d !important; border: 1px solid #86efac !important; }
    [data-theme="light"] .dir-media { background: #ccfbf1 !important; color: #0f766e !important; border: 1px solid #99f6e4 !important; }
    [data-theme="light"] .filter-reset-btn { background: transparent !important; border: none !important; box-shadow: none !important; color: #146ef5 !important; opacity: 0.85; }
    [data-theme="light"] .filter-reset-btn:hover { background: transparent !important; border: none !important; color: #0d55c8 !important; opacity: 1; }
    [data-theme="light"] .active-filter-tag { background: rgba(20, 110, 245, 0.08) !important; border-color: rgba(20, 110, 245, 0.25) !important; color: #146ef5 !important; }

    /* Bottom Cards & Chips */
    [data-theme="light"] .word-chip {
      background: #ffffff !important;
      border: 1px solid rgba(0, 0, 0, 0.08) !important;
      color: #334155 !important;
      border-radius: 9999px !important;
    }
    [data-theme="light"] .word-chip:hover {
      background: rgba(20, 110, 245, 0.06) !important;
      border-color: #146ef5 !important;
      color: #146ef5 !important;
      box-shadow: none !important;
    }
    [data-theme="light"] .word-chip.hot-high {
      color: #146ef5 !important;
      font-weight: 700 !important;
      border-color: rgba(20, 110, 245, 0.3) !important;
    }

    /* Modal & Drawers */
    [data-theme="light"] .modal-overlay {
      background: rgba(15, 23, 42, 0.5) !important;
    }
    [data-theme="light"] .modal-card {
      background: #ffffff !important;
      border: 1px solid rgba(0, 0, 0, 0.08) !important;
      border-radius: 6px !important;
      box-shadow: 0 20px 45px rgba(0, 0, 0, 0.1) !important;
    }
    [data-theme="light"] .modal-header {
      background: #ffffff !important;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    }
    [data-theme="light"] .modal-title {
      color: #1e293b !important;
      font-weight: 700 !important;
    }
    [data-theme="light"] .modal-close {
      color: #666666 !important;
    }
    [data-theme="light"] .modal-close:hover {
      color: #146ef5 !important;
    }
    [data-theme="light"] .score-radar-grid {
      background: #f8fafc !important;
      border-color: rgba(0, 0, 0, 0.06) !important;
    }
    [data-theme="light"] .score-dim-box {
      background: #ffffff !important;
      border: 1px solid rgba(0, 0, 0, 0.08) !important;
      border-radius: 4px !important;
    }
    [data-theme="light"] .score-dim-name {
      color: #666666 !important;
    }
    [data-theme="light"] .score-dim-val {
      color: #146ef5 !important;
    }
    [data-theme="light"] .article-text-panel {
      background: #f8fafc !important;
      color: #1e293b !important;
      border: 1px solid rgba(0, 0, 0, 0.06) !important;
      border-radius: 4px !important;
    }
    [data-theme="light"] .feed-drawer,
    [data-theme="light"] .reports-drawer,
    [data-theme="light"] .report-detail-drawer {
      background: #ffffff !important;
      border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
      box-shadow: -8px 0 24px rgba(0, 0, 0, 0.06) !important;
    }
    [data-theme="light"] .drawer-header {
      background: #ffffff !important;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    }
    [data-theme="light"] .drawer-header input {
      background: #ffffff !important;
      border: 1px solid rgba(0, 0, 0, 0.12) !important;
      color: #1e293b !important;
      border-radius: 4px !important;
    }
    [data-theme="light"] .feed-item,
    [data-theme="light"] .report-item {
      background: #ffffff !important;
      border: 1px solid rgba(0, 0, 0, 0.08) !important;
      border-radius: 6px !important;
    }
    [data-theme="light"] .feed-item:hover,
    [data-theme="light"] .report-item:hover {
      background: rgba(0, 0, 0, 0.02) !important;
      border-color: #146ef5 !important;
    }
    [data-theme="light"] .feed-item-title,
    [data-theme="light"] .report-item-title {
      color: #1e293b !important;
    }
    [data-theme="light"] .feed-item-meta,
    [data-theme="light"] .report-item-meta {
      color: #666666 !important;
    }
    [data-theme="light"] .report-md-body {
      color: #1e293b !important;
    }

    /* Light Theme AI Workflow Overrides (Webflow Clean Card Style) */
    [data-theme="light"] .workflow-card {
      background: #ffffff !important;
      border: 1px solid rgba(0, 0, 0, 0.08) !important;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
      border-radius: 6px !important;
    }
    [data-theme="light"] .workflow-card-header {
      background: #ffffff !important;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
    }
    [data-theme="light"] .workflow-card .card-title {
      color: #1e293b !important;
      font-weight: 700 !important;
    }
    [data-theme="light"] .workflow-title-zh {
      color: #666666 !important;
    }
    [data-theme="light"] .workflow-step-box {
      background: #ffffff !important;
      border: 1px solid rgba(0, 0, 0, 0.08) !important;
      border-radius: 6px !important;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    }
    [data-theme="light"] .workflow-step-box:hover {
      border-color: #146ef5 !important;
      background: rgba(0, 0, 0, 0.02) !important;
      box-shadow: 0 4px 16px rgba(20, 110, 245, 0.12) !important;
    }
    [data-theme="light"] .workflow-step-box.step-current {
      background: rgba(20, 110, 245, 0.03) !important;
      border-color: #146ef5 !important;
      box-shadow: 0 4px 16px rgba(20, 110, 245, 0.15) !important;
    }
    [data-theme="light"] .workflow-step-box.step-done {
      background: rgba(22, 163, 74, 0.03) !important;
      border-color: rgba(22, 163, 74, 0.4) !important;
      box-shadow: 0 2px 10px rgba(22, 163, 74, 0.06) !important;
    }
    [data-theme="light"] .workflow-step-box.step-idle {
      border: 1px dashed rgba(0, 0, 0, 0.15) !important;
      background: #ffffff !important;
    }
    [data-theme="light"] .wf-step-connector {
      color: rgba(0, 0, 0, 0.15) !important;
    }
    [data-theme="light"] .wf-step-connector.active {
      color: #146ef5 !important;
      filter: drop-shadow(0 0 4px rgba(20, 110, 245, 0.35)) !important;
    }
    [data-theme="light"] .wf-step-connector.done {
      color: #16a34a !important;
      filter: drop-shadow(0 0 4px rgba(22, 163, 74, 0.3)) !important;
    }
    [data-theme="light"] .step-watermark-num {
      color: rgba(20, 110, 245, 0.06) !important;
    }
    [data-theme="light"] .step-done .step-watermark-num {
      color: rgba(22, 163, 74, 0.08) !important;
    }
    [data-theme="light"] .step-current .step-watermark-num {
      color: rgba(20, 110, 245, 0.1) !important;
    }
    [data-theme="light"] .wf-step-idx-badge {
      color: #cbd5e1 !important;
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
    }
    [data-theme="light"] .step-done .wf-step-idx-badge {
      color: #16a34a !important;
      background: rgba(22, 163, 74, 0.1) !important;
      border-color: rgba(22, 163, 74, 0.3) !important;
    }
    [data-theme="light"] .wf-center-icon-box {
      background: #ffffff;
      border: 1.5px solid rgba(0, 0, 0, 0.08);
      border-radius: 50%;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }
    [data-theme="light"] .workflow-step-box:hover .wf-center-icon-box {
      background: rgba(20, 110, 245, 0.05);
      border-color: rgba(20, 110, 245, 0.3);
      box-shadow: 0 4px 12px rgba(20, 110, 245, 0.12);
    }
    [data-theme="light"] .step-current .wf-center-icon-box {
      background: rgba(20, 110, 245, 0.08);
      border-color: #146ef5;
      box-shadow: 0 0 12px rgba(20, 110, 245, 0.2);
    }
    [data-theme="light"] .step-done .wf-center-icon-box {
      background: rgba(22, 163, 74, 0.08);
      border-color: #16a34a;
    }
    [data-theme="light"] .wf-tech-svg {
      filter: saturate(1.8) brightness(0.8) contrast(1.25) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.06)) !important;
    }
    [data-theme="light"] .step-current .wf-tech-svg {
      filter: saturate(2) brightness(0.75) contrast(1.3) drop-shadow(0 2px 4px rgba(20, 110, 245, 0.25)) !important;
    }
    [data-theme="light"] .wf-step-top-title {
      color: #1e293b !important;
    }
    [data-theme="light"] .wf-center-title {
      color: #1e293b !important;
      font-weight: 700 !important;
      text-shadow: none !important;
    }
    [data-theme="light"] .wf-center-subtitle {
      color: #666666 !important;
    }
    [data-theme="light"] .wf-step-status-pill.status-idle {
      color: #cbd5e1 !important;
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
    }
    [data-theme="light"] .wf-step-status-pill.status-running {
      color: #146ef5 !important;
      background: rgba(20, 110, 245, 0.12) !important;
      border-color: #146ef5 !important;
      box-shadow: none !important;
      border-radius: 9999px !important;
    }
    [data-theme="light"] .wf-step-status-pill.status-done {
      color: #16a34a !important;
      background: rgba(22, 163, 74, 0.1) !important;
      border-color: rgba(22, 163, 74, 0.3) !important;
      box-shadow: none !important;
      border-radius: 9999px !important;
    }
    [data-theme="light"] .wf-step-status-pill.status-pending {
      color: #94a3b8 !important;
      background: rgba(0, 0, 0, 0.04) !important;
      border-color: rgba(0, 0, 0, 0.08) !important;
      border-radius: 9999px !important;
    }
    [data-theme="light"] .wf-done-pill {
      color: #16a34a !important;
      background: rgba(22, 163, 74, 0.1) !important;
      border-color: rgba(22, 163, 74, 0.3) !important;
      box-shadow: none !important;
      border-radius: 9999px !important;
    }
    [data-theme="light"] .wf-prog-track {
      background: #e2e8f0 !important;
      border-radius: 4px !important;
    }
    [data-theme="light"] .wf-prog-fill {
      background: linear-gradient(90deg, #146ef5, #10b981) !important;
      box-shadow: none !important;
      border-radius: 4px !important;
    }
    [data-theme="light"] .wf-prog-val {
      color: #1e293b !important;
      font-weight: 700 !important;
    }

    /* 浅色主题下的数字与转速表动效 */
    [data-theme="light"] .wf-rev-num {
      color: #334155 !important;
      text-shadow: none !important;
    }
    [data-theme="light"] .wf-rev-active {
      color: #1e293b !important;
      font-weight: 800 !important;
      text-shadow: none !important;
    }
    [data-theme="light"] .wf-timeline-item.done .wf-rev-num {
      color: #16a34a !important;
    }

    [data-theme="light"] .wf-substeps-wrap {
      background: #f8fafc !important;
      border: 1px solid rgba(0, 0, 0, 0.06) !important;
      border-radius: 6px !important;
    }
    [data-theme="light"] .wf-substeps-title {
      color: #666666 !important;
    }
    [data-theme="light"] .wf-timeline-item {
      border: none !important;
    }
    [data-theme="light"] .wf-timeline-item.active {
      background: rgba(20, 110, 245, 0.04) !important;
      border: none !important;
      box-shadow: none !important;
    }
    [data-theme="light"] .wf-timeline-item .wf-tl-name {
      color: #475569 !important;
    }
    [data-theme="light"] .wf-timeline-item.active .wf-tl-name {
      color: #1e293b !important;
      font-weight: 700 !important;
    }
    [data-theme="light"] .wf-timeline-item.done .wf-tl-name {
      color: #666666 !important;
    }
    [data-theme="light"] .wf-tl-metric {
      color: #475569 !important;
    }
    [data-theme="light"] .wf-tl-status-tag {
      color: #94a3b8 !important;
      border: none !important;
    }
    [data-theme="light"] .wf-tl-status-tag.active {
      background: transparent !important;
      border: none !important;
      padding: 0 !important;
      color: #1e293b !important;
      font-weight: 700 !important;
      box-shadow: none !important;
    }
    [data-theme="light"] .wf-tl-status-tag.done {
      color: #16a34a !important;
      background: transparent !important;
      border: none !important;
      font-weight: 600 !important;
    }
    [data-theme="light"] .wf-node-dot-pending {
      background: #cbd5e1 !important;
    }
    [data-theme="light"] .wf-node-dot-active {
      background: #1e293b !important;
      border-color: #cbd5e1 !important;
      box-shadow: 0 0 4px rgba(30, 41, 59, 0.2) !important;
    }
    [data-theme="light"] .wf-node-dot-done {
      color: #16a34a !important;
    }
    [data-theme="light"] .wf-footer-card {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      padding: 0 !important;
    }
    [data-theme="light"] .step-done .wf-footer-card {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
    }
    [data-theme="light"] .wf-footer-text {
      color: #666666 !important;
    }
    [data-theme="light"] .step-done .wf-footer-text {
      color: #475569 !important;
    }
    [data-theme="light"] .wf-footer-text strong {
      color: #1e293b !important;
    }
    [data-theme="light"] .step-done .wf-footer-text strong {
      color: #16a34a !important;
    }
    [data-theme="light"] .workflow-live-tag {
      background: rgba(22, 163, 74, 0.08) !important;
      border-color: rgba(22, 163, 74, 0.25) !important;
      color: #16a34a !important;
      border-radius: 6px !important;
    }
    /* 浅色模式下：极简精致浅灰胶囊按钮，温和不突兀，hover时轻微高亮 */
    [data-theme="light"] .trigger-pipeline-btn {
      background: #f1f5f9 !important;
      border: 1px solid rgba(0, 0, 0, 0.08) !important;
      color: #334155 !important;
      font-weight: 600 !important;
      border-radius: 6px !important;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    }
    [data-theme="light"] .trigger-pipeline-btn:hover {
      background: #e2e8f0 !important;
      color: #0f172a !important;
      border-color: rgba(0, 0, 0, 0.15) !important;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
    }

    /* Light theme 4 dynamic pattern cards */
    [data-theme="light"] .perf-gauge-card {
      background: #ffffff !important;
      border: 1px solid rgba(0, 0, 0, 0.08) !important;
      border-radius: 6px !important;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    }
    [data-theme="light"] .perf-gauge-card:hover {
      background: rgba(0, 0, 0, 0.02) !important;
      border-color: #146ef5 !important;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    }
    [data-theme="light"] .perf-gauge-name {
      color: #1e293b !important;
      font-weight: 700 !important;
    }
    [data-theme="light"] .perf-gauge-sub {
      color: #666666 !important;
    }
    [data-theme="light"] .val-cyan { color: #146ef5 !important; text-shadow: none !important; }
    [data-theme="light"] .val-amber { color: #d97706 !important; text-shadow: none !important; }
    [data-theme="light"] .val-emerald { color: #16a34a !important; text-shadow: none !important; }
    [data-theme="light"] .val-purple { color: #9333ea !important; text-shadow: none !important; }
    [data-theme="light"] .pill-cyan { background: rgba(20, 110, 245, 0.08) !important; color: #146ef5 !important; border-radius: 9999px !important; }
    [data-theme="light"] .pill-amber { background: #fef3c7 !important; color: #b45309 !important; border-radius: 9999px !important; }
    [data-theme="light"] .pill-emerald { background: #dcfce7 !important; color: #16a34a !important; border-radius: 9999px !important; }
    [data-theme="light"] .pill-purple { background: #f3e8ff !important; color: #9333ea !important; border-radius: 9999px !important; }

    [data-theme="light"] .hud-reticle-scanner {
      background: radial-gradient(circle, #ffffff 0%, #f0f9ff 80%) !important;
      border-color: rgba(20, 110, 245, 0.2) !important;
    }
    [data-theme="light"] .reticle-ring.outer-dashed { border-color: #146ef5 !important; }
    [data-theme="light"] .reticle-ring.inner-solid { border-color: rgba(20, 110, 245, 0.4) !important; }
    [data-theme="light"] .reticle-sweep-sector {
      background: conic-gradient(from 0deg, transparent 0deg, transparent 270deg, rgba(20, 110, 245, 0.2) 320deg, #146ef5 360deg) !important;
    }
    [data-theme="light"] .reticle-target-dot { background: #146ef5 !important; box-shadow: 0 0 6px #146ef5 !important; }

    [data-theme="light"] .oscilloscope-wave-box {
      background: #ffffff !important;
      border-color: rgba(0, 0, 0, 0.08) !important;
      --latency-color: #d97706 !important;
    }
    [data-theme="light"] .ecg-pulse-svg { color: var(--latency-color, #d97706) !important; }

    [data-theme="light"] .orbit-ring-outer { border-color: #a7f3d0 !important; border-top-color: #16a34a !important; border-right-color: #16a34a !important; }
    [data-theme="light"] .orbit-ring-inner { border-color: #6ee7b7 !important; }
    [data-theme="light"] .orbit-satellite { background: #16a34a !important; box-shadow: 0 0 6px #16a34a !important; }
    [data-theme="light"] .orbit-core-dot { background: #16a34a !important; box-shadow: 0 0 6px #16a34a !important; }

    [data-theme="light"] .quantum-flux-box .flux-pillar { background: #f3e8ff !important; }
    [data-theme="light"] .quantum-flux-box .flux-fill {
      background: linear-gradient(180deg, #c084fc 0%, #9333ea 100%) !important;
      box-shadow: 0 0 4px rgba(147, 51, 234, 0.3) !important;
    }
    [data-theme="light"] .step-metrics-tag {
      background: rgba(20, 110, 245, 0.08) !important;
      border-color: rgba(20, 110, 245, 0.2) !important;
      color: #146ef5 !important;
      border-radius: 9999px !important;
    }
    [data-theme="light"] .step-prog-track {
      background: #e2e8f0 !important;
      border-radius: 4px !important;
    }
    [data-theme="light"] .step-ticker-wrapper {
      background: #f8fafc !important;
      border-color: rgba(0, 0, 0, 0.06) !important;
      border-radius: 4px !important;
    }
    [data-theme="light"] .step-ticker-line {
      color: #666666 !important;
    }
    [data-theme="light"] .step-current .step-ticker-line {
      color: #b45309 !important;
      font-weight: 600 !important;
    }
    [data-theme="light"] .step-num-badge {
      background: rgba(20, 110, 245, 0.08) !important;
      border-color: #146ef5 !important;
      color: #146ef5 !important;
      border-radius: 4px !important;
    }
    [data-theme="light"] .perf-gauge-item {
      background: #ffffff !important;
      border-color: rgba(0, 0, 0, 0.08) !important;
      border-radius: 6px !important;
    }
    [data-theme="light"] .perf-gauge-item:hover {
      background: rgba(0, 0, 0, 0.02) !important;
      border-color: #146ef5 !important;
      box-shadow: 0 2px 10px rgba(20, 110, 245, 0.12) !important;
    }
    [data-theme="light"] .perf-gauge-circle-container {
      background: #f8fafc !important;
      border-color: rgba(0, 0, 0, 0.08) !important;
    }
    [data-theme="light"] .perf-gauge-val-center {
      color: #1e293b !important;
    }
    [data-theme="light"] .sidebar-donut-section {
      border-top-color: rgba(0, 0, 0, 0.06) !important;
    }
    [data-theme="light"] .grade-legend-row {
      background: #ffffff !important;
      border: 1px solid rgba(0, 0, 0, 0.04) !important;
      border-radius: 4px !important;
    }
    [data-theme="light"] .grade-legend-row:hover {
      background: rgba(0, 0, 0, 0.02) !important;
      border-color: rgba(0, 0, 0, 0.08) !important;
    }
    [data-theme="light"] .grade-count {
      color: #1e293b !important;
    }
    [data-theme="light"] .grade-legend-desc {
      color: #666666 !important;
    }

    /* ============================================================
       全设备与浏览器跨端响应式适配 (Responsive Adaptations)
       ============================================================ */
    @media screen and (max-width: 1440px) {
      .dashboard-container {
        grid-template-columns: minmax(120px, 13vw) minmax(0, 1fr) minmax(190px, 18vw);
        gap: 6px;
        padding: 6px;
      }
      .header-title .tagline {
        display: none;
      }
      .workflow-steps-grid {
        gap: 4px !important;
      }
      .stage-map-analytics-row {
        grid-template-columns: minmax(0, 65%) minmax(0, 35%);
        gap: 6px;
      }
    }

    @media screen and (max-width: 1200px) {
      body { font-size: min(1.4vw, 14px); }
      header.hud-header {
        height: auto;
        min-height: 3.25em;
        padding: 8px 12px;
        flex-wrap: wrap;
        gap: 8px;
      }
      .header-left {
        flex: 1 1 auto;
      }
      .header-center {
        order: 3;
        width: 100%;
        justify-content: space-between;
        padding-top: 4px;
        border-top: 1px solid rgba(0, 240, 255, 0.1);
        font-size: 11px;
      }
      .header-right {
        flex: 0 0 auto;
      }
      .dashboard-container {
        grid-template-columns: minmax(140px, 18vw) minmax(0, 1fr);
        grid-template-areas:
          "sidebar center"
          "sources sources";
        height: auto;
        min-height: calc(100vh - 3.5em);
        overflow-y: auto;
        overflow-x: hidden;
      }
      .sources-card {
        max-height: 440px;
      }
      .sources-table-container {
        max-height: 360px;
      }
      .stage-map-analytics-row {
        grid-template-columns: minmax(0, 62%) minmax(0, 38%);
        height: auto;
        min-height: 22em;
      }
    }

    /* 专门适配非全屏 / 短视口高度 (MacBook 13"/14"/15" Safari 未全屏或带书签栏时) */
    @media screen and (max-height: 820px) {
      .dashboard-container {
        height: auto;
        min-height: calc(100vh - 3.5em);
        overflow-y: auto;
        overflow-x: hidden;
      }
      .workflow-step-box {
        min-height: 8.5em !important;
      }
      .map-card {
        min-height: 18em;
      }
      .analytics-vertical-stack {
        min-height: 18em;
      }
    }

    @media screen and (max-width: 900px) {
      /* ponytail: mobile font floor — 12px minimum readable */
      body { font-size: max(12px, min(1.8vw, 14px)); }
      .dashboard-container {
        display: flex;
        flex-direction: column;
        height: auto;
        padding: 8px 6px;
      }
      .sidebar-card {
        width: 100%;
        max-height: none;
      }
      .center-stage-container {
        width: 100%;
        height: auto;
        overflow: visible;
      }
      .workflow-steps-grid {
        flex-wrap: wrap !important;
      }
      .workflow-step-box {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: 140px;
        min-height: 8.75em !important;
      }
      .workflow-step-box.step-current {
        flex: 1 1 100% !important;
      }
      .wf-step-arrow {
        display: none !important;
      }
      .analytics-vertical-stack .hud-card {
        flex: 1 1 100%;
      }
      .feed-drawer,
      .reports-drawer,
      .report-detail-drawer {
        width: 100% !important;
        max-width: 100vw !important;
        right: -100vw;
      }
    }

    @media screen and (max-width: 600px) {
      /* ponytail: phone — guarantee 13px minimum readable font */
      body { font-size: 13px; }
      header.hud-header {
        padding: 6px 8px;
      }
      .header-title {
        font-size: 13px;
        letter-spacing: 0.5px;
      }
      .header-center {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
      }
      .header-right {
        gap: 6px;
      }
      .hud-stat-pill {
        display: none;
      }
      .hud-btn {
        padding: 4px 8px;
        font-size: 11px;
      }
      .workflow-step-box {
        flex: 1 1 100% !important;
      }
      .score-radar-grid {
        grid-template-columns: repeat(2, 1fr) !important;
      }
      .map-legend {
        position: static;
        margin-top: 8px;
        border-radius: 8px;
        font-size: 11px;
        justify-content: center;
      }
      .modal-overlay {
        padding: 8px;
      }
      .modal-card {
        max-height: 96vh;
      }
      .modal-header {
        padding: 10px 12px;
      }
      .modal-body {
        padding: 12px;
      }
    }

    /* 移动端安全区域适配 */
    @supports (padding: max(0px)) {
      header.hud-header {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
        padding-top: max(0px, env(safe-area-inset-top));
      }
      .dashboard-container {
        padding-left: max(10px, env(safe-area-inset-left));
        padding-right: max(10px, env(safe-area-inset-right));
        padding-bottom: max(10px, env(safe-area-inset-bottom));
      }
    }


    /* -----------------------------------------------------------------------
     * 报告弹窗操作条。ponytail 2026-09-17 —— 与 reports.css 同一处改动的暗色版。
     * 见 reports.css 里的说明：float:right 只在这个容器内取消。
     * --------------------------------------------------------------------- */
    .modal-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0; padding-bottom: 8px; border-bottom: 1px dashed rgba(0, 240, 255, 0.18); }
    .modal-actions:empty { display: none; }
        /* 三类按钮的几何统一钉在这里：.copy-btn / .upgrade-btn 在本文件里各有两份定义
     * （后一份覆盖前一份），照抄任何一份都会和另一份错开 2px。 */
    .modal-actions .copy-btn, .modal-actions .upgrade-btn, .modal-actions .export-btn { float: none; margin-left: 0; font-size: 12px; padding: 4px 10px; line-height: 18px; }
    .modal-actions .actions-spacer { margin-left: auto; }
    .export-btn { font-size: 11.5px; padding: 3px 10px; border: 1px solid #16a34a; background: rgba(22, 163, 74, 0.15); color: #4ade80; border-radius: 3px; cursor: pointer; font-family: inherit; transition: all 0.2s; }
    .export-btn:hover { background: #16a34a; color: #fff; }
    .export-btn:disabled { opacity: 0.6; cursor: wait; }
    [data-theme="light"] .modal-actions { border-bottom-color: rgba(0, 0, 0, 0.12); }
    [data-theme="light"] .export-btn { background: rgba(22, 163, 74, 0.08) !important; color: #15803d !important; border-color: rgba(22, 163, 74, 0.3) !important; }
    [data-theme="light"] .export-btn:hover { background: #16a34a !important; color: #ffffff !important; }
    @media screen and (max-width: 768px) {
      .modal-actions { gap: 4px; }
      .modal-actions .actions-spacer { display: none; }
      .export-btn { padding: 2px 6px; font-size: 11px; }
    }