/* ============================================================
   components/chart2.css — v315 图表详情页专属样式
   适用：templates/v315/chart2.html、templates/v315/chart_rsrs.html（单图全屏 / RSRS 模型图表，Plotly 渲染）
   依赖：tokens.css（设计令牌）+ nav-v315.css（导航栏）+ section.css（neck/memo/footer 共享件）+ skeleton.css（骨架屏）
   唯一事实来源：本页所有视觉规则只在此维护，禁止再回收到模板内联
   ============================================================ */

/* ===== 全局 reset（防御 legacy CSS 注入，chart2 页无 base.css 兜底） ===== */
html,
body {
  width: 100% !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

/* fixed 导航常驻顶部，body 让出 40px；整页普通文档流。
   高度由各部分显式 calc 锁定。
   ⚠️ 注意：旧版 chart2.css 的 "13rem" 实际把图表下方的说明区+footer 也算到减数里，
   是冗余扣减。本组件按图表正上方四块 = 10rem 重算，更精准。 */
body {
  --nav-h: 40px;
  background: #fcfbf9 !important;
  padding-top: var(--nav-h, 52px) !important;
  font-family: var(--f-display, 'Microsoft YaHei', system-ui, sans-serif) !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  overflow: hidden !important;
}

/* ===== 图表卡（单图全屏模式） ===== */
body .chart2 {
  width: 90vw !important;
  max-width: 1560px !important;
  min-width: 720px !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* neck/memo/footer 移入 .chart2 后，覆盖 section.css 的 90vw 宽度 */
body .chart2 .neck,
body .chart2 .memo,
body .chart2 .footer {
  width: 100% !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

body .chart2-header {
  width: 100% !important;
  height: 2.5rem !important;
  flex: 0 0 auto !important;
  border-left: 4px solid var(--brand, #ef6a4c) !important;
  background-color: #fcfbf9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
  padding: 0 .75rem !important;
}

body .chart2-header-title {
  height: 100% !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  line-height: 2.5rem !important;
  text-align: left !important;
  padding-left: .25rem !important;
  letter-spacing: .5px !important;
  color: var(--text, #181c2d) !important;
}

body .chart2-header-title a {
  color: var(--text, #181c2d);
  font-weight: 500;
  text-decoration: none;
}



/* ===== 图表头部参数表单（轻盈输入 + GO 按钮） ===== */
body .chart-form {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: .5rem !important;
  flex-wrap: wrap !important;
}

body .chart-form label {
  display: inline-flex !important;
  align-items: center !important;
  gap: .25rem !important;
  font-size: var(--fs-sm, 13px) !important;
  color: var(--text-muted, #8b919c) !important;
}

body .chart-form input {
  height: 28px !important;
  border: 1px solid var(--border, #e3e6ef) !important;
  border-radius: var(--r, 8px) !important;
  padding: 0 .5rem !important;
  font-size: var(--fs-sm, 13px) !important;
  font-family: inherit !important;
  background: var(--bg, #fff) !important;
  color: var(--text, #181c2d) !important;
  transition: border-color var(--transition-fast, 150ms ease),
    box-shadow var(--transition-fast, 150ms ease) !important;
}

body .chart-form input:focus {
  outline: none !important;
  border-color: var(--brand, #ef6a4c) !important;
  box-shadow: 0 0 0 3px rgba(239, 106, 76, .12) !important;
}

body .chart-form .go-btn {
  height: 36px !important;
  padding: 0 .9rem !important;
  background: var(--brand, #ef6a4c) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--r, 8px) !important;
  font-size: var(--fs-sm, 13px) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background-color var(--transition-fast, 150ms ease) !important;
}

body .chart-form .go-btn:hover {
  background: #d55a3e !important;
}

/* ===== 标题：允许收缩 + 超出省略（与触发按钮共享 header 空间） ===== */
body .chart2-header-title {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  /* 给绝对定位的触发按钮预留空间 */
  padding-right: 110px !important;
}

body .chart2-header-title a {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* header 设为定位上下文，让绝对定位的按钮有参照 */
body .chart2-header {
  position: relative !important;
}

/* ===== 参数悬浮面板：触发按钮（图标 + 文字，常驻显示） ===== */
body .chart-form-toggle {
  position: absolute !important;
  right: .75rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  width: max-content !important;
  height: 30px !important;
  padding: 0 12px !important;
  background: var(--brand-wash, #fbeee5) !important;
  color: var(--brand, #ef6a4c) !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  transition: background-color var(--transition-fast, 150ms ease),
    color var(--transition-fast, 150ms ease),
    border-color var(--transition-fast, 150ms ease),
    transform var(--transition-fast, 150ms ease) !important;
}

body .chart-form-toggle:hover {
  background: var(--brand, #ef6a4c) !important;
  color: #fff !important;
  border-color: var(--brand, #ef6a4c) !important;
}

body .chart-form-toggle:active {
  background: var(--brand-strong, #c2451c) !important;
  border-color: var(--brand-strong, #c2451c) !important;
  transform: translateY(-50%) scale(.96) !important;
}

body .chart-form-toggle:focus-visible {
  outline: 2px solid var(--brand, #ef6a4c) !important;
  outline-offset: 2px !important;
}

body .chart-form-toggle-icon {
  display: block !important;
  width: 14px !important;
  height: 14px !important;
  stroke: currentColor !important;
  flex-shrink: 0 !important;
}

body .chart-form-toggle-text {
  display: inline-block !important;
  white-space: nowrap !important;
}

/* ===== 表单悬浮层：精致视觉 + 弹出动画 ===== */
body .chart-form {
  position: fixed !important;
  top: 56px !important;
  right: 12px !important;
  z-index: 1000 !important;
  display: none !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 420px !important;
  max-width: calc(100vw - 24px) !important;
  padding: 0 !important;
  background: var(--surface, #fff) !important;
  border: 1px solid var(--border, #e3e6ef) !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 40px rgba(24, 28, 45, .14),
    0 4px 12px rgba(24, 28, 45, .08),
    0 0 0 1px rgba(24, 28, 45, .02) !important;
  opacity: 0 !important;
  transform: translateY(-8px) scale(.98) !important;
  transform-origin: top right !important;
  transition: opacity .2s ease, transform .2s ease !important;
  overflow-y: auto !important;
  max-height: calc(100vh - 80px) !important;
  overflow: hidden !important;
}

body .chart-form.is-open {
  display: flex !important;
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
}

/* ===== 头部：标题 + 关闭按钮（同行，不再 absolute 漂到输入框上） ===== */
body .chart-form-title {
  display: flex !important;
  align-items: center !important;
  gap: .55rem !important;
  height: 42px !important;
  padding: 0 2.6rem 0 1rem !important;
  background: var(--surface-2, #eef0f3) !important;
  border-bottom: 1px solid var(--border, #e3e6ef) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text, #1f2430) !important;
  letter-spacing: .3px !important;
  flex: 0 0 auto !important;
  position: relative !important;
}

body .chart-form-title-bar {
  width: 3px !important;
  height: 14px !important;
  border-radius: 2px !important;
  background: var(--brand, #ef6a4c) !important;
  flex: 0 0 auto !important;
}

/* 关闭按钮：贴在 header 右侧，不再覆盖表单字段 */
body .chart-form-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--text-muted, #8b919c) !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 2 !important;
  transition: background-color var(--transition-fast, 150ms ease),
    color var(--transition-fast, 150ms ease) !important;
}

body .chart-form-close:hover {
  background: rgba(24, 28, 45, .08) !important;
  color: var(--text, #1f2430) !important;
}

/* ===== 表单主体：字段 + GO 按钮纵向堆叠 ===== */
body .chart-form-body {
  display: flex !important;
  flex-direction: column !important;
  gap: .75rem !important;
  padding: 1rem 1rem .8rem !important;
}

/* ===== 表单项：纵向堆叠（悬浮层内布局） ===== */
body .chart-form label {
  display: flex !important;
  align-items: center !important;
  gap: .6rem !important;
  width: 100% !important;
  min-width: 0 !important;
  font-size: 12px !important;
  color: var(--text, #1f2430) !important;
  font-weight: 500 !important;
}

/* label 文字固定最小宽度，让所有输入框起点对齐 */
body .chart-form label>span {
  flex: 0 0 auto !important;
  min-width: 48px !important;
  text-align: left !important;
  white-space: nowrap !important;
  color: var(--text-muted, #8b919c) !important;
  font-weight: 500 !important;
}

/* 输入框 / select 共享精致外观 */
body .chart-form input,
body .chart-form select {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: 36px !important;
  padding: 0 .7rem !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--text, #1f2430) !important;
  background-color: var(--bg, #f5f6f8) !important;
  border: 1px solid transparent !important;
  border-radius: 8px !important;
  transition: border-color var(--transition-fast, 150ms ease),
    box-shadow var(--transition-fast, 150ms ease),
    background-color var(--transition-fast, 150ms ease) !important;
  font-family: inherit !important;
}

body .chart-form input:hover:not(:focus),
body .chart-form select:hover:not(:focus) {
  background-color: var(--surface, #fff) !important;
  border-color: var(--border, #e3e6ef) !important;
}

body .chart-form input:focus,
body .chart-form select:focus {
  outline: none !important;
  background-color: var(--surface, #fff) !important;
  border-color: var(--brand, #ef6a4c) !important;
  box-shadow: 0 0 0 3px rgba(239, 106, 76, .14) !important;
}

body .chart-form input[type="number"] {
  max-width: 100% !important;
}

/* select 走浏览器原生箭头（Windows 上自绘 SVG 反复出现 3 个箭头问题，
   索性交给浏览器渲染，跨平台一致；padding-right 给原生箭头留位置） */
body .chart-form select {
  padding-right: 2rem !important;
  cursor: pointer !important;
}

body .chart-form input::placeholder {
  color: var(--text-muted, #8b919c) !important;
  opacity: 1 !important;
}

/* date 输入：去除浏览器自带日历图标，统一外观 */
body .chart-form input[type="date"] {
  position: relative !important;
  /* Firefox */
}

body .chart-form input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: .5 !important;
  cursor: pointer !important;
  padding: 0 .15rem !important;
  filter: grayscale(1) !important;
  transition: opacity var(--transition-fast, 150ms ease) !important;
}

body .chart-form input[type="date"]:hover::-webkit-calendar-picker-indicator {
  opacity: .85 !important;
}

body .chart-form input[type="date"]:focus::-webkit-calendar-picker-indicator {
  opacity: 1 !important;
  filter: grayscale(0) !important;
}

body .chart-search-dropdown {
  display: flex !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

body .chart-search-dropdown input[type="text"] {
  width: 100% !important;
  max-width: 100% !important;
}

/* 搜索下拉面板：悬浮层内显示 */
body .chart-search-panel {
  left: 0 !important;
  right: auto !important;
  min-width: 200px !important;
  max-width: 100% !important;
  border: 1px solid var(--border, #eceef1) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 20px rgba(24, 28, 45, .12),
    0 2px 6px rgba(24, 28, 45, .06) !important;
}

body .chart-search-panel .chart-search-item {
  border-radius: 4px !important;
  margin: 0 4px !important;
  width: calc(100% - 8px) !important;
}

/* GO 按钮：占满整行，按压反馈 */
body .chart-form .go-btn {
  width: auto !important;
  min-width: 5.5rem !important;
  height: 32px !important;
  margin-top: .3rem !important;
  padding: 0 1.5rem !important;
  align-self: center !important;
  background: transparent !important;
  color: var(--brand, #ef6a4c) !important;
  border: 1px solid var(--brand, #ef6a4c) !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  cursor: pointer !important;
  transition: background-color var(--transition-fast, 150ms ease),
    color var(--transition-fast, 150ms ease),
    transform var(--transition-fast, 150ms ease) !important;
}

body .chart-form .go-btn:hover {
  background: var(--brand, #ef6a4c) !important;
  color: #fff !important;
}

body .chart-form .go-btn:active {
  transform: scale(.98) !important;
}

/* ===== 统计指标区（fig.stat_lst 非空时才渲染） ===== */
body .chart2-indicators {
  width: 100% !important;
  height: 3rem !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 1.25rem !important;
  padding: 0 !important;
  background-color: #fcfbf9 !important;
  /* border-bottom: 1px solid var(--border, #eceef1) !important; */
}

body .indicator {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 90px !important;
}

body .indicator-label {
  font-size: var(--fs-xs, 12px) !important;
  color: var(--text-muted, #8b919c) !important;
  line-height: 1.4 !important;
}

body .indicator-value {
  font-size: var(--fs-base, 15px) !important;
  font-weight: 600 !important;
  color: var(--text, #181c2d) !important;
  line-height: 1.4 !important;
}

/* ===== 绘图区：flex 自适应填满剩余空间 =====
   .chart2 容器用 flex 列布局，图表区 flex:1 自动撑满
   下方 memo/footer 自然流式排列，无需硬编码 calc 偏移 */
body .chart2-content {
  width: 100% !important;
  flex: 1 1 0 !important;
  min-height: 0 !important;
  display: flex !important;
  position: relative !important;
  background-color: transparent !important;
}

body .chart2-content>div,
body #chartDiv,
body .js-plotly-plot,
body .plotly {
  border: none !important;
  outline: none !important;
  width: 100% !important;
  height: 100% !important;
}

/* ===== 无数据/错误占位（fig_json 为 None 时） ===== */
body .chart-empty {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 2rem !important;
  color: var(--text-muted, #8b919c) !important;
  font-size: var(--fs-lg, 17px) !important;
}

/* ===== 表单外壳（header + 可折叠模型参数面板，整页 GET 重渲染） ===== */
body .chart2-form {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  flex: 0 0 auto !important;
}

/* ===== RSRS 模型参数（可折叠高级面板，默认收起，不挤占图表高度） ===== */
body .chart-rsrs-params {
  width: 100% !important;
  flex: 0 0 auto !important;
  border-top: 1px solid var(--border, #eceef1) !important;
  background-color: #fcfbf9 !important;
  font-size: var(--fs-sm, 13px) !important;
}

body .chart-rsrs-params>summary {
  list-style: none !important;
  cursor: pointer !important;
  padding: .4rem .75rem !important;
  font-weight: 500 !important;
  color: var(--text-muted, #8b919c) !important;
  display: flex !important;
  align-items: center !important;
  gap: .4rem !important;
  user-select: none !important;
}

body .chart-rsrs-params>summary::-webkit-details-marker {
  display: none !important;
}

body .chart-rsrs-params>summary::before {
  content: "" !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 5px solid transparent !important;
  border-right: 5px solid transparent !important;
  border-top: 6px solid currentColor !important;
  transition: transform var(--transition-fast, 150ms ease) !important;
}

body .chart-rsrs-params[open]>summary::before {
  transform: rotate(180deg) !important;
}

body .chart-rsrs-params-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: .5rem .75rem !important;
  padding: .25rem .75rem .75rem !important;
  align-items: center !important;
}

body .chart-rsrs-params-grid label {
  display: inline-flex !important;
  align-items: center !important;
  gap: .25rem !important;
  color: var(--text-muted, #8b919c) !important;
}

body .chart-rsrs-params-grid input {
  height: 28px !important;
  width: 84px !important;
  border: 1px solid var(--border, #e3e6ef) !important;
  border-radius: var(--r, 8px) !important;
  padding: 0 .5rem !important;
  font-size: var(--fs-sm, 13px) !important;
  font-family: inherit !important;
  background: var(--bg, #fff) !important;
  color: var(--text, #181c2d) !important;
  transition: border-color var(--transition-fast, 150ms ease),
    box-shadow var(--transition-fast, 150ms ease) !important;
}

body .chart-rsrs-params-grid input:focus {
  outline: none !important;
  border-color: var(--brand, #ef6a4c) !important;
  box-shadow: 0 0 0 3px rgba(239, 106, 76, .12) !important;
}

body .rsrs-reset {
  height: 28px !important;
  padding: 0 .9rem !important;
  background: var(--surface-2, #f1f3f7) !important;
  color: var(--text, #181c2d) !important;
  border: 1px solid var(--border, #e3e6ef) !important;
  border-radius: var(--r, 8px) !important;
  font-size: var(--fs-sm, 13px) !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background-color var(--transition-fast, 150ms ease) !important;
}

body .rsrs-reset:hover {
  background: var(--hover, #e9ecf2) !important;
}

/* ===== 可访问性：尊重「减少动效」偏好 ===== */
@media (prefers-reduced-motion: reduce) {

  body .chart-form input,
  body .chart-form .go-btn,
  body .chart-form-toggle,
  body .chart-form,
  body .chart2-header-title a {
    transition: none !important;
  }
}

/* ===== 指数搜索下拉框 ===== */
body .chart-search-dropdown {
  position: relative !important;
  display: inline-block !important;
}

body .chart-search-dropdown input[type="text"] {
  width: 140px !important;
  cursor: text !important;
}

/* 表单浮层内：搜索输入框撑满剩余空间（避免「沪深300」过窄看不全） */
body .chart-form .chart-search-dropdown {
  display: flex !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

body .chart-form .chart-search-dropdown input[type="text"] {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

body .chart-search-panel {
  display: none;
  position: absolute !important;
  top: calc(100% + 4px) !important;
  left: 0 !important;
  z-index: 1000 !important;
  min-width: 160px !important;
  max-width: 240px !important;
  max-height: 280px !important;
  overflow-y: auto !important;
  background: var(--surface, #fff) !important;
  border: 1px solid var(--border, #e3e6ef) !important;
  border-radius: var(--r, 8px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .1) !important;
  padding: 4px 0 !important;
  opacity: 0 !important;
  transform: translateY(-8px) !important;
  transition: opacity var(--transition-fast, 150ms ease),
    transform var(--transition-fast, 150ms ease) !important;
}

body .chart-search-panel.is-open {
  display: block;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

body .chart-search-panel .chart-search-item {
  display: block !important;
  padding: 8px 12px !important;
  color: var(--text, #181c2d) !important;
  font-size: var(--fs-sm, 13px) !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: background-color var(--transition-fast, 150ms ease),
    color var(--transition-fast, 150ms ease) !important;
}

body .chart-search-panel .chart-search-item:hover,
body .chart-search-panel .chart-search-item.is-active {
  background-color: var(--hover, #f1f3f7) !important;
  color: var(--brand, #ef6a4c) !important;
}

body .chart-search-panel .chart-search-empty,
body .chart-search-panel .chart-search-loading,
body .chart-search-panel .chart-search-error {
  padding: 12px !important;
  color: var(--text-muted, #8b919c) !important;
  font-size: var(--fs-sm, 13px) !important;
  text-align: center !important;
}

body .chart-search-panel .chart-search-error {
  color: #d32f2f !important;
}

/* ===== 指数下拉菜单（chart_rsrs 自定义下拉，取代 <datalist>，可点击而非补全）=====
   触发方式：点击/聚焦 #index_name → 显示 idxPanel → 点击 <a data-value="..."> 写入输入框
   关键点：input 不 readonly，允许自由输入；面板 mousedown preventDefault 防止 blur 提前关闭 */
body .chart-rsrs-dropdown {
  position: relative !important;
  display: inline-block !important;
}

body .chart-rsrs-dropdown-panel {
  display: none;
  position: absolute !important;
  top: calc(100% + 2px) !important;
  left: 0 !important;
  z-index: 1000 !important;
  min-width: 140px !important;
  max-height: 240px !important;
  overflow-y: auto !important;
  background: var(--surface, #fff) !important;
  border: 1px solid var(--border, #e3e6ef) !important;
  border-radius: var(--r, 8px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08) !important;
  padding: 4px 0 !important;
}

body .chart-rsrs-dropdown-panel.is-open {
  display: block;
}

body .chart-rsrs-dropdown-panel a {
  display: block !important;
  padding: 6px 12px !important;
  color: var(--text, #181c2d) !important;
  font-size: var(--fs-sm, 13px) !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background-color var(--transition-fast, 150ms ease),
    color var(--transition-fast, 150ms ease) !important;
}

body .chart-rsrs-dropdown-panel a:hover {
  background-color: var(--hover, #f1f3f7) !important;
  color: var(--brand, #ef6a4c) !important;
}

/* ============================================================
   响应式：≤1024px（平板竖屏 / 窄桌面）
   ------------------------------------------------------------
   悬浮层在所有视口通用；此处仅调 header / 指标 / 颈部的紧凑度
   ============================================================ */
@media (max-width: 1024px) {

  /* header：标题独占一行，触发按钮靠右 */
  body .chart2-header {
    height: auto !important;
    min-height: 0 !important;
    flex-wrap: wrap !important;
    gap: .4rem !important;
    padding: .4rem 6.5rem .4rem .6rem !important;
  }

  body .chart2-header-title {
    line-height: 1.4 !important;
    font-size: .95rem !important;
    flex: 1 1 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    white-space: normal !important;
  }

  /* 统计指标区：紧凑 */
  body .chart2-indicators {
    gap: .75rem !important;
    height: auto !important;
    min-height: 2.5rem !important;
    padding: .2rem 0 !important;
  }

  body .indicator {
    min-width: 60px !important;
  }

  body .indicator-label {
    font-size: 11px !important;
  }

  body .indicator-value {
    font-size: 13px !important;
  }

  /* 颈部位：允许换行 */
  body .chart2 .neck {
    flex-wrap: wrap !important;
    gap: .25rem .75rem !important;
    padding: 0 .5rem !important;
    font-size: 12px !important;
  }
}

/* ============================================================
   响应式：≤640px（手机横屏 / 小平板）
   ------------------------------------------------------------
   悬浮层占满更大屏幕比例，统计指标紧凑
   ============================================================ */
@media (max-width: 640px) {
  body .chart2 {
    padding: 0 .25rem !important;
  }

  body .chart2-header {
    padding: .35rem .5rem !important;
  }

  /* 悬浮层在小屏下拉宽到右侧更多空间 */
  body .chart-form {
    width: calc(100vw - 16px) !important;
    right: 8px !important;
  }

  /* 统计指标区多列分布 */
  body .chart2-indicators {
    justify-content: space-around !important;
  }

  body .indicator {
    min-width: 28% !important;
  }
}

/* ===== 双列表单布局（悬浮层内 RSRS 参数专用）===== */
body .chart-form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: .8rem !important;
  align-items: center !important;
}

body .chart-form-row.chart-form-row-submit {
  grid-template-columns: 1fr !important;
  justify-content: flex-end !important;
  gap: .75rem !important;
  margin-top: .5rem !important;
}

body .chart-form-row.chart-form-row-submit .go-btn {
  justify-self: end !important;
}

body .chart-form-row label {
  margin: 0 !important;
}

body .chart-form-row label>span {
  min-width: 52px !important;
}

/* 空label占位（保证双列对齐） */
body .chart-form-row label:empty {
  visibility: hidden !important;
}

/* ===== RSRS 预设参数说明（纯文字）===== */
body .chart-form-presets {
  display: block !important;
  padding: .6rem 0 .2rem 0 !important;
  border-top: 1px solid var(--border-light, #f0f1f5) !important;
}

body .chart-form-presets .preset-text {
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: var(--text-muted, #8b919c) !important;
}

body .chart-form-presets .preset-text br {
  line-height: 1.6 !important;
}

/* GO按钮 */
body .chart-form .go-btn {
  width: auto !important;
  min-width: 8rem !important;
  height: 36px !important;
  padding: 0 1.5rem !important;
  align-self: center !important;
  background: transparent !important;
  color: var(--brand, #ef6a4c) !important;
  border: 1px solid var(--brand, #ef6a4c) !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: 1.5px !important;
  cursor: pointer !important;
  transition: background-color var(--transition-fast, 150ms ease),
    color var(--transition-fast, 150ms ease),
    transform var(--transition-fast, 150ms ease) !important;
}

body .chart-form .go-btn:hover {
  background: var(--brand, #ef6a4c) !important;
  color: #fff !important;
}

body .chart-form .go-btn:active {
  transform: scale(.98) !important;
}

/* 响应式：小屏自动变为单列 */
@media (max-width: 480px) {
  body .chart-form {
    width: calc(100vw - 16px) !important;
    right: 8px !important;
  }

  body .chart-form-row {
    grid-template-columns: 1fr !important;
    gap: .6rem !important;
  }

  body .chart-form-row label:empty {
    display: none !important;
  }
}