/* strategy 区域独立样式 */
  .strategy-content {
    margin-top: 24px;
    min-height: 400px;
  }

  /* 状态信息 */
  .status-block {
    padding: 16px 20px;
    margin-bottom: 16px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.6;
    transition: opacity 0.5s ease;
  }

  .status-block.fading {
    opacity: 0;
  }

  .status-block.hidden {
    display: none;
  }

  .status-pending {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
  }

  .status-success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
  }

  .status-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
  }

  .status-skipped {
    background: #e0e7ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
  }

  .status-block .status-line {
    margin: 4px 0;
  }

  .status-block code {
    background: rgba(0, 0, 0, 0.08);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 13px;
  }

  /* 加载 spinner */
  .spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #92400e;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 8px;
  }

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

  /* 数据就绪提示区 */
  .ready-block {
    padding: 40px 20px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 6px;
    text-align: center;
    color: #475569;
  }

  .ready-block .ready-title {
    font-size: 18px;
    font-weight: 600;
    color: #1e40af;
    margin-bottom: 8px;
  }

  .ready-block .ready-sub {
    font-size: 13px;
    color: #64748b;
  }

  /* SVG 曲线样式 */
  #curveSvg .axis-line {
    stroke: #d1d5db;
    stroke-width: 1;
  }

  #curveSvg .grid-line {
    stroke: #f3f4f6;
    stroke-width: 1;
    stroke-dasharray: 2, 2;
  }

  #curveSvg .zero-line {
    stroke: #808080;
    stroke-width: 1;
    stroke-dasharray: 5, 3;
    stroke-opacity: 0.25;
  }

  #curveSvg .axis-label {
    fill: #6b7280;
    font-size: 11px;
  }

  #curveSvg .curve-line {
    fill: none;
    stroke: #2563eb;
    stroke-width: 1.5;
    stroke-linejoin: round;
    pointer-events: none;
  }

  #curveSvg .curve-line.curve-BOSS {
    stroke-width: 1.6;
  }

  #curveSvg .curve-line.curve-BOSS.active {
    stroke-width: 3.5;
  }

  #curveSvg .curve-hit {
    fill: none;
    stroke: transparent;
    stroke-width: 20;
    stroke-linejoin: round;
    pointer-events: stroke;
    cursor: pointer;
  }

  #curveSvg .area-fill {
    fill: rgba(37, 99, 235, 0.08);
  }

  #curveSvg .point-label {
    fill: #6b7280;
    font-size: 11px;
    font-weight: 500;
  }

  /* v5.8.172: 曲线末端日期标注 (与 last% 错开 +18px, 字号略小, 用曲线色)
     fill 由 JS 设置为曲线色 (_curveColor); 字号 10px / 400 weight, 与 last% 11px/500 区分
     不参与 fadeInUp 动画 (曲线本身已淡入, 标签随曲线出现) */
  #curveSvg .end-date-label {
    font-size: 10px;
    font-weight: 400;
    opacity: 1;
    pointer-events: none;
  }

  #curveSvg .x-anim {
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  }

  #curveSvg .y-anim {
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.7s ease;
  }

  @keyframes expandLine {
    to {
      stroke-dashoffset: 0;
    }
  }

  #curveSvg .curve-line.expand-anim {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: expandLine 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  /* X 轴底线 + Y 轴网格 + 0 轴虚线 - 全部从左到右展开 */
  @keyframes growLine {
    to {
      stroke-dashoffset: 0;
    }
  }

  #curveSvg .axis-line,
  #curveSvg .grid-line {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: growLine 0.8s ease-out 0s forwards;
  }

  #curveSvg .zero-line {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: growLine 0.8s ease-out 0.5s forwards;
    stroke-opacity: 0.25;
  }

  /* X/Y 刻度文字 - 渐显 */
  @keyframes fadeIn {
    to {
      opacity: 1;
    }
  }

  #curveSvg .axis-label {
    opacity: 0;
    animation: fadeIn 0.4s ease-out 0.6s forwards;
  }

  #curveSvg .axis-label.x-label-new {
    opacity: 1;
    animation: none;
  }

  #curveSvg .axis-label.y-label-new {
    opacity: 1;
    animation: none;
  }

  /* 曲线 - 从左到右展开 (pathLength=1 归一化) */
  @keyframes drawCurve {
    to {
      stroke-dashoffset: 0;
    }
  }

  #curveSvg .curve-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: drawCurve 1.5s ease-out 0.5s forwards;
  }

  /* 3 个百分比标签 - 展开后从左到右依次渐显 */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(4px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  #curveSvg .point-label {
    opacity: 0;
  }

  #curveSvg .point-label.lbl-1 {
    animation: fadeInUp 0.5s ease-out 2.0s forwards;
  }

  #curveSvg .point-label.lbl-2 {
    animation: fadeInUp 0.5s ease-out 2.25s forwards;
  }

  #curveSvg .point-label.lbl-3 {
    animation: fadeInUp 0.5s ease-out 2.5s forwards;
  }

  #curveSvg .point-label.fade-out {
    opacity: 0;
    animation: fadeOutLabel 0.35s ease-out forwards;
  }

  @keyframes fadeOutLabel {
    from {
      opacity: 1;
    }

    to {
      opacity: 0;
    }
  }

  /* v6.1.024: hover 加粗 (替代被禁用的 JS hover 联动 — JS mouseenter/mouseleave 不再操作 .active 类目避免污染 click 状态). */
  #curveSvg .curve-line:hover {
    stroke-width: 3;
  }
  #curveSvg .curve-line.active {
    stroke-width: 3;
  }
  /* v6.1.025: JS 恢复 mouseenter/leave 但用独立 .hovered / .hover-dimmed 临时类目 (不影响 click 状态).
     .hovered 跟 .active 加粗效果一致; .hover-dimmed 跟 .dimmed 半透效果一致 (opacity 0.5 比 dimmed 的 0.25 更轻, 保留可见性). */
  #curveSvg .curve-line.hovered {
    stroke-width: 3;
  }
  #curveSvg .curve-line.hover-dimmed {
    opacity: 0.5;
  }

  #curveSvg .point-label.active {
    font-size: 14px;
    font-weight: 700;
  }

  /* v5.8.223 (老板 2026-08-26): hover 联动 — 其他曲线和标注 +50% 透明度
     让当前 hover 的曲线和标注更突出. point-label 有 fadeIn 动画, dimmed 必须 !important 压过 */
  #curveSvg .curve-line.dimmed {
    opacity: 0.25;
  }

  /* v5.8.223 (老板 10:25): 75% 透明度 (更透明) */
  #curveSvg .point-label.dimmed {
    opacity: 0.25 !important;
  }

  /* v5.8.223: 75% 透明度 */

  .chart-legend {
    /* v5.9.119 (8-29 17:18 小马): 改用 grid 三栏 1fr auto 1fr 解决 v5.9.118 翻车
       (flex justify-content:center + 子 margin-left:auto 互斥, swatch 被挤到最左) */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding: 0 4px;
    font-size: 13px;
    color: #374151;
  }

  .legend-group {
    justify-self: center;
  }

  .legend-group {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .legend-swatch {
    display: inline-block;
    width: 16px;
    height: 3px;
    background: #2563eb;
    border-radius: 1.5px;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
  }

  .legend-label {
    font-weight: 500;
    white-space: nowrap;
  }

  .legend-spacer {
    display: inline-block;
    width: 24px;
  }

  .legend-diff {
    /* v5.8.222b (老板 2026-08-25 23:48): 改成 75% 灰色
       老板原话: "不用想太多，红色通常有特殊意义，你直接把它们的颜色改为75%灰色就好了"
       差额只是辅助参考, 不该用红色这种警示色 */
    display: inline-block;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
    font-size: 14px;
    white-space: nowrap;
  }

  .legend-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
  }

  .legend-toggle input {
    cursor: pointer;
    margin: 0;
  }

  #periodBar {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 26px;
    padding: 0 4px;
  }

  #periodBar button {
    flex: 0 0 auto;
    padding: 7px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: white;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.34, 1.2, 0.64, 1);
  }

  #periodBar button:hover {
    background: #f3f4f6;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  }

  #periodBar button.active {
    background: #2563eb;
    color: white;
    border-color: #2563eb;
    transform: scale(1.05);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
  }

  /* v5.9.115 (8-29 16:47 老板) 曲线选择弹窗 (新增, 不动原有) */
  .curve-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
  }

  .curve-picker-panel {
    background: #fff;
    border-radius: 8px;
    padding: 16px 20px;
    /* v5.9.121 (老板 23:08): 弹窗宽度缩 50% (320px → 160px) */
    width: 160px;
    max-height: 70vh;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
  }

  .curve-picker-header {
    /* v5.9.121 (老板 23:08): "完成"按钮放到 header 同一行 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 8px;
    margin-bottom: 12px;
  }

  .curve-picker-title {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
  }

  .curve-picker-hint {
    font-size: 12px;
    color: #6b7280;
  }

  .curve-picker-list {
    overflow-y: auto;
    max-height: 50vh;
    padding: 4px 0;
  }

  .curve-picker-row {
    padding: 6px 4px;
    border-radius: 4px;
    transition: background 0.15s;
  }

  .curve-picker-row:hover {
    background: #f9fafb;
  }

  .curve-picker-row.curve-picker-locked-row {
    opacity: 0.65;
  }

  .curve-picker-check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #1f2937;
  }

  .curve-picker-check input[type=checkbox] {
    margin: 0;
    cursor: pointer;
  }

  .curve-picker-check input[type=checkbox]:disabled {
    cursor: not-allowed;
  }

  .curve-picker-swatch {
    display: inline-block;
    width: 16px;
    height: 3px;
    border-radius: 1.5px;
    flex-shrink: 0;
  }

  .curve-picker-name {
    flex: 1;
    /* v6.1.020 (老板 2026-09-19 21:53): 老板感觉曲线名称字体偏小, 找不到定义位置; 由 .curve-picker-check 继承的 13px -> 显式 15px (+2px). 锁文字 .curve-picker-locked 11px 不动. */
    font-size: 15px;
  }

  .curve-picker-locked {
    color: #9ca3af;
    font-size: 11px;
  }

  .curve-picker-footer {
    border-top: 1px solid #e5e7eb;
    padding-top: 12px;
    margin-top: 8px;
    text-align: right;
  }

  .curve-picker-done {
    background: #3b82f6;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 6px 16px;
    font-size: 13px;
    cursor: pointer;
  }

  .curve-picker-done:hover {
    background: #2563eb;
  }

  .curve-picker-btn {
    /* v5.9.118 (8-29 16:55 老板): .legend-group 居中, 按钮 margin-left:auto 推右 */
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 4px 9px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;

  }

  .curve-picker-btn {
    justify-self: end;
  }

  .curve-picker-btn:hover {
    background: #e5e7eb;
  }