/* 风电项目经济测算 PWA - 移动端优先样式 v2 */

:root {
  /* 配色 */
  --primary: #0066ff;
  --primary-dark: #0052cc;
  --primary-light: #e6f0ff;
  --primary-glow: rgba(0, 102, 255, 0.18);
  --accent: #00b4ff;
  --bg: #f0f2f5;
  --bg-soft: #f7f9fc;
  --card-bg: #ffffff;
  --text: #1a1a1a;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;
  --border: #e5e7eb;
  --border-soft: #f3f4f6;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;
  --purple: #8b5cf6;

  /* 阴影 */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
  --shadow-primary: 0 4px 12px rgba(0, 102, 255, 0.25);
  --shadow-primary-lg: 0 8px 24px rgba(0, 102, 255, 0.3);

  /* 圆角 */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-md: 14px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* 安全区 */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --header-h: calc(56px + var(--safe-top));
  --action-bar-h: calc(60px + var(--safe-bottom));
  --nav-h: calc(64px + var(--safe-bottom));
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overscroll-behavior-y: contain;
  background-image:
    radial-gradient(circle at 0% 0%, rgba(0, 102, 255, 0.04) 0%, transparent 40%),
    radial-gradient(circle at 100% 0%, rgba(0, 180, 255, 0.04) 0%, transparent 40%);
  background-attachment: fixed;
}

button {
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

input, select, button, textarea {
  font-size: 16px;
  font-family: inherit;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---------- Header ---------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 12px;
  padding-top: var(--safe-top);
  background:
    linear-gradient(135deg, #0066ff 0%, #00b4ff 60%, #00d4ff 100%);
  color: white;
  box-shadow: 0 2px 12px rgba(0, 102, 255, 0.25);
  position: sticky;
}

.app-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.app-header h1 {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 1;
}

.icon-btn {
  background: rgba(255, 255, 255, 0.18);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.15s, transform 0.1s;
  position: relative;
  z-index: 1;
}

.icon-btn:active {
  background: rgba(255, 255, 255, 0.32);
  transform: scale(0.94);
}

.app-logo {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
  position: relative;
  z-index: 1;
}

.app-logo svg {
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.3));
}

/* ---------- Main / Pages ---------- */
#appMain {
  padding: 12px 12px calc(var(--action-bar-h) + var(--nav-h) + 16px);
  max-width: 720px;
  margin: 0 auto;
  min-height: calc(100vh - var(--header-h));
}

.page {
  display: none;
  animation: fadeIn 0.25s ease;
}

.page.active {
  display: block;
}

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

/* ---------- Tab Bar ---------- */
/* ---------- 模式切换（陆上/海上风电） ---------- */
.mode-switch {
  display: flex;
  margin-bottom: 10px;
  background: var(--card-bg);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 4px;
  box-shadow: var(--shadow-sm);
  gap: 4px;
}
.mode-btn {
  flex: 1;
  padding: 10px 0;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.mode-btn.active {
  background: linear-gradient(135deg, #0a7cff, #0a5fc4);
  color: #fff;
  box-shadow: 0 2px 6px rgba(10, 124, 255, 0.35);
}
.mode-btn:not(.active):active {
  background: rgba(10, 124, 255, 0.08);
}

/* 海上风电专属字段（21-25年档位）：默认隐藏，海上模式显示 */
.offshore-only {
  display: none !important;
}
body.offshore-mode .offshore-only {
  display: flex !important;
}

.tab-bar {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 5px;
  gap: 4px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-soft);
}

.tab-bar::-webkit-scrollbar {
  display: none;
}

.tab-btn {
  flex: 0 0 auto;
  padding: 9px 16px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-btn:active {
  transform: scale(0.96);
}

.tab-btn.active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  color: white;
  box-shadow: var(--shadow-primary);
}

/* ---------- Form ---------- */
.form {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 4px 16px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-soft);
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
  animation: fadeIn 0.2s ease;
}

.field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
  min-height: 56px;
  transition: background 0.15s;
}

.field:last-child {
  border-bottom: none;
}

.field > span {
  /* 标签按内容紧凑显示，不再占据中间大量空白（改之前是 flex:1） */
  flex: 0 0 auto;
  max-width: none;        /* 已由 JS alignFieldsByLongestLabel 精确统一 min-width 做左缘对齐，
                             取消原 58% 百分比上限（否则超长 span 在窄容器下会被迫折两行） */
  min-width: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.4;
  /* 强制单行，任何情况下都不折成两行：保证运维"社保公积等比例/总包费率(1-5年)/材料费(≤20MW)"
     及建设"目标资本金税前IRR/单位造价"等标签始终是一行。 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 在超窄屏(≤360px)下，标签字号降 1px 节省横向空间，但依然强制单行不折两行。 */
@media (max-width: 360px) {
  .field > span {
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* 新的"输入框紧随标签并拉满到最右"布局：
 *   .field (display:flex) 的三个子级：
 *     1. <span> 标签  —— flex:0 0 auto 紧包文字
 *     2. <input>/<select>/<date> 控制 —— flex:1 1 auto 吃满剩余空间（从标签右到 em 左）
 *     3. <em> 单位  —— 有单位时 flex:0 0 36px；没单位时不存在，输入框直接拉到最右端
 * 结果：标签文字多长，输入框的"左边缘"就紧跟在它右边，然后往右延展到最长。
 */
.field input[type="number"],
.field input[type="date"],
.field input[type="text"],
.field select {
  flex: 1 1 auto;
  width: auto;
  min-width: 108px;       /* 手机上也能点：至少 5 位数字可见 */
  max-width: none;        /* 解除 128px 最大限制，允许拉满 */
  margin-left: 0;         /* 去掉原来的"推到最右"：现在拉满就自然到右边缘 */
  padding: 9px 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  text-align: right;
  line-height: 1.3;
  -webkit-appearance: none;
  appearance: none;
  transition: all 0.15s;
  height: 42px;
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--primary);
  background: white;
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.field input:disabled,
.field select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.4);
  /* 注意：这里不能再用 background: 简写，否则会把上方 .field select 的自定义 SVG 箭头覆盖掉！
     改为 background-image: 单独指定斜纹图层，保证能在 disabled select 上跟箭头 SVG 同时存在（见下一条规则）。 */
  background-color: var(--bg-soft);
}

/* disabled 态的 select：斜纹底图放在底层（z-order 第一），灰色 chevron 箭头放在顶层（z-order 第二）。
   这样既保留了"禁用"的斜纹视觉提示，又不会让箭头完全消失（用户能看清这是下拉框）。 */
.field select:disabled {
  background-image:
    repeating-linear-gradient(
      45deg,
      var(--bg-soft),
      var(--bg-soft) 4px,
      rgba(0, 0, 0, 0.03) 4px,
      rgba(0, 0, 0, 0.03) 8px
    ),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-position:
    0 0,
    calc(100% - 12px) 50%;
  background-size:
    auto,
    16px 16px;
  background-repeat:
    repeat,
    no-repeat;
  padding-right: 34px !important;
}

.field input[type="date"] {
  text-align: right;
  color: var(--text);
}

.field em {
  /* 旧版写死 36px 会导致"长单位被截断"且"无法做最长单位统一宽度"；
   * 新版改为按内容自然宽度，由 JS 中的 alignFieldsByLongestLabel 动态计算
   * 本面板最长 em 的宽度后统一写 inline width，保证所有行右缘对齐在同一竖线。
   * flex:0 0 auto 保证它不被 flex 压缩/拉伸，真实宽度由 JS inline width 精确决定。 */
  flex: 0 0 auto;
  color: var(--text-tertiary);
  font-style: normal;
  font-size: 12px;
  text-align: left;
  padding-left: 2px;
  align-self: center;
  /* 原先 line-height:1（12px）会让"元/瓦/年、元/kW、元/kWh"等中文字形
   * 在 Windows 下渲染出 ~14px 高度的 glyph，scrollHeight 溢出 2px，
   * 肉眼看起来像"单位跑到了第二行"。现在调回 1.5（18px）
   * 让字形完整容纳在一行内，绝不出现两行视觉。 */
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 占位单位（给 <input type=date> / <select> / 纯数字无单位的字段补一个）：
 * 视觉完全透明，但参与 flex 布局占据跟"本面板最长单位"完全相同的宽度，
 * 让所有行的 flex:1 输入框都分配到完全相等的空间 → 输入框右缘绝对对齐在同一竖线。 */
.field em.em-placeholder {
  visibility: hidden;
  pointer-events: none;
  /* 内容完全清零：宽度完全由 JS inline style.width 控制，避免任何 padding/content 自身撑宽，
   * 这是跟真实 em 对齐的关键（真实 em 的宽度也由 JS inline style.width 精确写死）。 */
  content: "";
  width: 0;
  min-width: 0;
  padding-left: 0;
}
.field em.em-placeholder::before {
  content: "";   /* 不再塞不换行空格，防止自身撑宽。占位 em 宽度完全由 JS 写的 inline width 决定。 */
}

/* Select 下拉箭头：
   旧版用两个 45° linear-gradient 拼三角形 → 粗糙古早感。
   新版用 stroke-linecap=round 的 chevron-down SVG，颜色统一用 --text-secondary，
   聚焦时切到 --primary，跟整体"柔和精致"的设计语言匹配。
   padding-right 从 26 → 34：图标 16px + 左右各 9px 呼吸空间。 */
.field select {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-position: calc(100% - 12px) 50%;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  padding-right: 34px !important;
  cursor: pointer;
}
.field select:hover {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
.field select:focus {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-color: white;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

/* input[type=date]：替换 Chromium/Edge 老旧的灰色日历图标，
   做法：
   1) ::-webkit-calendar-picker-indicator 设 opacity=0 且放大到 42×42 → 保留原生点击热区（点任意位置都能弹出日期）但图标隐藏。
   2) input[type=date] 自身通过 background-image 画一个跟 chevron 同风格的圆角 calendar-outline SVG 作为新图标，padding-right=34px 跟 select 对齐。
   3) 未选值时内部编辑区文字用 --text-tertiary 当 placeholder 灰，跟 number 空值视觉一致。
*/
.field input[type="date"] {
  text-align: right;
  color: var(--text);
  padding-right: 34px !important;       /* 跟 select 完全相同的右侧图标位 */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4.5' width='18' height='17' rx='2.5'/><path d='M16 3v3M8 3v3M3 10h18'/></svg>");
  background-position: calc(100% - 12px) 50%;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.field input[type="date"]:hover {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4.5' width='18' height='17' rx='2.5'/><path d='M16 3v3M8 3v3M3 10h18'/></svg>");
}
.field input[type="date"]:focus {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4.5' width='18' height='17' rx='2.5'/><path d='M16 3v3M8 3v3M3 10h18'/></svg>");
  background-color: white;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-glow);
  color: var(--text);
  outline: none;
}

/* —— 日期输入内部编辑区（Chromium-only）：未选值时文字统一灰，视觉跟 number 空值一致 —— */
.field input[type="date"]::-webkit-datetime-edit {
  padding-right: 2px;        /* 文字跟新 calendar 图标不要太挤 */
}
.field input[type="date"]::-webkit-datetime-edit-text,
.field input[type="date"]::-webkit-datetime-edit-month-field,
.field input[type="date"]::-webkit-datetime-edit-day-field,
.field input[type="date"]::-webkit-datetime-edit-year-field {
  color: inherit;            /* 默认继承 input color (var(--text))；选值后是正常深色 */
}
.field input[type="date"]:in-range::-webkit-datetime-edit-year-field,
.field input[type="date"]:in-range::-webkit-datetime-edit-month-field,
.field input[type="date"]:in-range::-webkit-datetime-edit-day-field,
.field input[type="date"]:in-range::-webkit-datetime-edit-text {
  color: var(--text);
}

/* —— 关键：把老旧原生日历图标隐藏+扩热区 ——
   ① opacity:0 让它不显示；
   ② width/height 放大到覆盖新图标的那块区域 + 周围；
   ③ 用负 margin-left/right 让它在布局上"占据 0 宽度"，不会把日期数字往左挤；
   ④ background: transparent 确保不盖住我们的新 SVG。
   （绝对不用 position:absolute，因为在 Chromium 对 input 的 shadow DOM 里行为不稳定） */
.field input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  background: transparent;
  cursor: pointer;
  width: 44px;              /* 足够覆盖 16px 图标 + 右边 padding 空间 */
  height: 42px;             /* 与控件高度一致 */
  margin-left: -34px;       /* 向左推 34px = padding-right 宽度，正好对齐新 SVG */
  margin-right: -10px;      /* 再吃掉 10px 让它"零宽"不占布局 */
  padding: 0;
  border: 0;
  outline: 0;
}
/* 不单独再写 position: relative 冗余块（合并到上方基础 RULE 即可）*/

/* Firefox 兼容：隐藏原生 date 清除按钮，视觉更干净 */
.field input[type="date"]::-webkit-clear-button {
  display: none;
}
.field input[type="date"]::-moz-placeholder {
  color: var(--text-tertiary);
}
.field input[type="text"]::placeholder,
.field input[type="number"]::placeholder {
  color: var(--text-tertiary);
  opacity: 1;
}

/* hover 全局：所有 .field 控件在 hover 时 border 更明显但不突兀 */
.field input[type="number"]:hover:not(:disabled):not(:focus),
.field input[type="text"]:hover:not(:disabled):not(:focus),
.field select:hover:not(:disabled):not(:focus),
.field input[type="date"]:hover:not(:disabled):not(:focus) {
  border-color: #cbd5e1;   /* 比 --border 深一级，有轻微反馈但不喧宾夺主 */
}

/* ---------- Switch ---------- */
.switch {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
}

.switch input {
  display: none;
}

.switch-slider {
  flex: 0 0 auto;
  width: 46px;
  height: 26px;
  background: #d1d5db;
  border-radius: var(--radius-full);
  position: relative;
  transition: background 0.25s;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.switch-slider::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  background: white;
  border-radius: var(--radius-full);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.1);
}

.switch input:checked + .switch-slider {
  background: linear-gradient(135deg, var(--success) 0%, #34d399 100%);
}

.switch input:checked + .switch-slider::after {
  transform: translateX(20px);
}

.switch-text {
  flex: 1;
  font-size: 14px;
  color: var(--text);
  line-height: 1.4;
}

/* ---------- Sub-section / Info ---------- */
.sub-section {
  margin: 8px -16px;
  padding: 12px 16px 4px;
  background: var(--bg-soft);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}

.sub-section:first-child {
  margin-top: -4px;
  border-top: none;
}

.sub-section h3 {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--text-tertiary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-box {
  margin-top: 12px;
  padding: 10px 12px;
  background: linear-gradient(135deg, var(--primary-light) 0%, rgba(0, 180, 255, 0.05) 100%);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  border-left: 3px solid var(--primary);
}

.info-box b {
  color: var(--primary);
  font-weight: 600;
}

/* ---------- Cards ---------- */
.card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  padding: 18px 16px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-soft);
  transition: transform 0.2s, box-shadow 0.2s;
}

.card h2 {
  font-size: 16px;
  margin: 0 0 14px;
  color: var(--text);
  font-weight: 600;
  position: relative;
  padding-left: 12px;
}

.card h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background: linear-gradient(180deg, var(--primary), var(--accent));
  border-radius: 2px;
}

.hidden {
  display: none !important;
}

/* ---------- Metric Cards ---------- */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.metric-card {
  background: var(--card-bg);
  border-radius: var(--radius-md);
  padding: 14px 12px 14px 16px;
  text-align: left;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-soft);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.metric-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--c, var(--primary));
  background-image: linear-gradient(180deg, var(--c, var(--primary)) 0%, var(--c, var(--primary)) 100%);
}

.metric-card:active {
  transform: scale(0.98);
}

.metric-title {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  line-height: 1.3;
  font-weight: 500;
}

.metric-value {
  font-size: 19px;
  font-weight: 700;
  color: var(--c, var(--primary));
  line-height: 1.2;
  letter-spacing: -0.5px;
  word-break: break-all;
}

@media (min-width: 540px) {
  .metric-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .metric-value {
    font-size: 21px;
  }
}

/* ---------- KV List ---------- */
.kv-list {
  display: flex;
  flex-direction: column;
}

.kv-list > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border-soft);
  font-size: 14px;
}

.kv-list > div:last-child {
  border-bottom: none;
}

.kv-list span {
  color: var(--text-secondary);
}

.kv-list b {
  color: var(--text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------- Tables ---------- */
.table-wrap {
  position: relative;      /* 方便 ::before 左遮罩以此为 containing block */
  overflow-x: auto;
  /* 防止橡皮筋/负滚时，表格内容绘制越界到滚动容器外（最后一道兜底裁剪） */
  overflow-clip-margin: 0px;
  contain: paint;
  /* 禁止横向 overscroll（橡皮筋左拉过头时 scrollLeft<0 导致冻结列左边露出后列内容） */
  overscroll-behavior-x: contain;
  -webkit-overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  margin: 0 -16px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}

/* 关键修复 1（左遮罩加宽 + 高 z-index 兜底遮挡）：
 * -16px 负 margin + 16px padding 的「全宽出血容器」在左侧留下 16px 宽的
 * padding-gap，再考虑到 Windows/安卓某些浏览器下 overscroll-behavior:contain
 * 不能完全抑制负滚到 scrollLeft=-30 左右，这里把遮罩宽度直接拉到 80px（约 16px
 * + 60px 缓冲），z-index 拉到 10（> 普通 td/th 的 0~8，< 冻结列 20~30），
 * 任何穿出来的后列内容都会被这层实色块挡死。 */
.table-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 80px;               /* 80px = 16px padding + 64px 负滚缓冲，挡住 -64px 内橡皮筋 */
  background: var(--card-bg);
  z-index: 10;
  pointer-events: none;      /* 不影响用户点击冻结列最左边的 "年份" 等文字 */
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}

.table-wrap table {
  width: 100%;
  /* 关键修复 2：border-collapse:separate 消除 collapse 下"共享边框"导致的 sticky 亚像素错位，
   * 用"只画右下 + 外框补左上"的方式重绘 1px 不重叠边框。 */
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  min-width: 600px;
  font-variant-numeric: tabular-nums;
  /* 作为表格外框，补上 separate 后每格不再画的 top+left 边 */
  border-top: 1px solid var(--border-soft);
  border-left: 1px solid var(--border-soft);
}

.table-wrap th,
.table-wrap td {
  padding: 9px 8px;
  text-align: right;
  white-space: nowrap;
  /* separate 模式下每格只画右下，相邻格自然不会出现"2px 重叠粗线" */
  border: none;
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  position: relative;        /* 给 first-child 扩展背景 ::before 做定位基准 */
}

.table-wrap th {
  background: var(--bg-soft);
  color: var(--text-secondary);
  font-weight: 600;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 8;                /* 普通表头 = 8（低于遮罩 10 / 冻结列 20~30） */
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  isolation: isolate;
}

/* ================================================================
 * 冻结列（th/td:first-child）核心硬防漏：
 *   1) z-index 升级：td=20 / th=30（绝对高于遮罩 10，不被遮罩盖住自身文字）
 *   2) 左侧背景盾牌：每个 first-child 追加 ::before，
 *      把自身背景色向左延伸 100px（完全覆盖 80px 宽的负滚区域）。
 *      这是 100% 保险的方案 —— 哪怕 box-shadow 因为亚像素漏 1px、
 *      哪怕遮罩没画到、哪怕 GPU 合成层穿透，这层向左铺的同色背景
 *      都会把任何滚动进来的后续列文字/数字给盖死。
 *      background:inherit 会自动读取父级 td/th 的背景色，所以：
 *        · 普通行 = 白
 *        · hover 行 = #ecf4ff
 *        · 建设期 = #fde2e2
 *        · 运营期 = #e1ecff
 *        · th (表头) = var(--bg-soft)
 *      全部自动继承，不需要每行特殊类单独写颜色。
 * ================================================================ */
.table-wrap th:first-child,
.table-wrap td:first-child {
  text-align: left;
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  background: var(--card-bg);
  z-index: 20;               /* 冻结列 body = 20（> 遮罩 10） */
  font-weight: 500;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  isolation: isolate;
  /* 双侧外延 box-shadow 继续保留做 1px 级兜底（虽然 ::before 已经挡住大部分了，
   * 两者叠加不冲突，保留是为了兼容 hover 时改 box-shadow 颜色的旧写法） */
  box-shadow: -2px 0 0 0 var(--card-bg),
               2px 0 0 0 var(--card-bg),
               3px 0 4px -2px rgba(0, 0, 0, 0.05);
}

/* 冻结列自身的"左侧背景盾牌"—— 把当前单元格背景向左铺 100px，
 * 完全遮挡负滚橡皮筋时从冻结列左边穿出来的后续列内容。
 * z-index: -1 让它躲在单元格自身内容（文字/边框）之下。 */
.table-wrap th:first-child::before,
.table-wrap td:first-child::before {
  content: "";
  position: absolute;
  left: -100px;
  top: 0;
  width: 100px;
  height: 100%;
  background: inherit;        /* 继承父单元格的 background，颜色自动匹配 */
  z-index: -1;
  pointer-events: none;
  /* 覆盖"box-shadow 漏的 1px"，往右多伸 1px 消除亚像素缝隙 */
  border-right: 1px solid transparent;
}

/* hover 时 td:first-child 的 box-shadow 会被改色（旧写法保留），
 * 但 ::before 盾牌颜色已自动跟随 background: inherit 改成 #ecf4ff，
 * 所以 hover 时左侧遮罩颜色也同步正确，不需额外写。 */

.table-wrap th:first-child {
  background: var(--bg-soft);
  z-index: 30;               /* 同时冻结 top + left -> 最高层（30 > td 20） */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  box-shadow: -2px 0 0 0 var(--bg-soft),
               2px 0 0 0 var(--bg-soft),
               3px 0 4px -2px rgba(0, 0, 0, 0.07);
}

tbody tr:hover {
  background: var(--primary-light);
}

tbody tr:hover td:first-child {
  /* sticky 列悬停时使用叠加的不透明合成色（防止透明透出后续滚动内容） */
  background: #ecf4ff;
  /* 跟随背景色同步更新双侧外延 box-shadow，保持遮挡完整 */
  box-shadow: -2px 0 0 0 #ecf4ff,
               2px 0 0 0 #ecf4ff,
               3px 0 4px -2px rgba(0, 0, 0, 0.05);
}

tr.row-construction td {
  background: rgba(239, 68, 68, 0.08);
}

tr.row-construction td:first-child {
  /* 不透明：base(card-bg #fff) + red 18% 合成 = #fde2e2 */
  background: #fde2e2;
  font-weight: 600;
  box-shadow: -2px 0 0 0 #fde2e2,
               2px 0 0 0 #fde2e2,
               3px 0 4px -2px rgba(0, 0, 0, 0.05);
  /* ::before 盾牌会自动 inherit background=#fde2e2，不用再写 */
}

tr.row-early td {
  background: rgba(0, 102, 255, 0.04);
}

tr.row-early td:first-child {
  /* 不透明：base + blue 14% 合成 = #e1ecff */
  background: #e1ecff;
  font-weight: 600;
  box-shadow: -2px 0 0 0 #e1ecff,
               2px 0 0 0 #e1ecff,
               3px 0 4px -2px rgba(0, 0, 0, 0.05);
  /* ::before 盾牌会自动 inherit background=#e1ecff，不用再写 */
}

/* NOTE: L717~L724 的旧版"sticky 列加右侧阴影+clip-path"规则已删除 ——
 * 它的特异性相同但声明更靠后，会覆盖前面的双侧外延 box-shadow；
 * 并且 clip-path inset(0 -4px 0 0) 把左侧外延剪掉，导致左边缝隙漏出。
 * 新版双侧外延 box-shadow 统一写在上面 .table-wrap / .modal-body 各 first-child 规则里。 */


/* ---------- Buttons ---------- */
.primary-btn,
.secondary-btn {
  border: none;
  border-radius: var(--radius);
  padding: 13px 22px;
  font-size: 15px;
  font-weight: 600;
  transition: transform 0.12s, box-shadow 0.2s, background 0.2s;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.primary-btn {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  color: white;
  box-shadow: var(--shadow-primary);
}

.primary-btn:active {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  transform: scale(0.97);
  box-shadow: var(--shadow-primary-lg);
}

.primary-btn.confirm-danger {
  background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.primary-btn.confirm-danger:active {
  background: linear-gradient(135deg, #dc2626 0%, #ea580c 100%);
  box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
}

.secondary-btn {
  background: var(--card-bg);
  color: var(--primary);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-xs);
}

.secondary-btn:active {
  background: var(--bg-soft);
  transform: scale(0.97);
}

/* ---------- Confirm 弹窗 ---------- */
.confirm-card {
  max-width: 420px;
  animation: confirmIn 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

.confirm-header {
  gap: 12px;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.18), transparent 70%);
  border-bottom: 1.5px solid var(--border-soft);
}

.confirm-header h2 {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}

.confirm-icon {
  font-size: 24px;
  line-height: 1;
  filter: drop-shadow(0 2px 3px rgba(251, 191, 36, 0.4));
}

.confirm-body {
  padding: 20px 22px;
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.confirm-footer {
  display: flex;
  gap: 10px;
  padding: 14px 18px 18px;
  background: linear-gradient(180deg, transparent, var(--bg-soft) 140%);
}

.confirm-footer .primary-btn,
.confirm-footer .secondary-btn {
  flex: 1;
  width: 0;
  padding: 11px 16px;
  min-height: 42px;
  font-size: 14.5px;
}

@media (prefers-color-scheme: dark) {
  .primary-btn.confirm-danger { box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35); }
  .confirm-header { background: linear-gradient(135deg, rgba(251, 191, 36, 0.12), transparent 70%); }
  .confirm-footer { background: linear-gradient(180deg, transparent, rgba(255,255,255,0.02) 140%); }
}

/* ---------- Action Bar ---------- */
.action-bar {
  position: fixed;
  bottom: var(--nav-h);
  left: 0;
  right: 0;
  height: var(--action-bar-h);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-soft);
  display: flex;
  gap: 8px;
  padding: 8px 12px calc(8px + var(--safe-bottom));
  z-index: 90;
  box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.06);
  max-width: 720px;
  margin: 0 auto;
}

.action-bar .primary-btn {
  flex: 1;
}

.action-bar .secondary-btn {
  flex: 0 0 auto;
  padding: 12px 14px;
  font-size: 14px;
}

/* ---------- Bottom Nav ---------- */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-soft);
  display: flex;
  z-index: 95;
  max-width: 720px;
  margin: 0 auto;
}

.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 500;
  padding-bottom: var(--safe-bottom);
  position: relative;
  transition: color 0.2s;
}

.nav-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 0 0 3px 3px;
  opacity: 0;
  transition: opacity 0.2s;
}

.nav-btn.active {
  color: var(--primary);
}

.nav-btn.active::before {
  opacity: 1;
}

.nav-btn.active .nav-ico {
  transform: scale(1.1);
  filter: drop-shadow(0 2px 4px var(--primary-glow));
}

.nav-ico {
  font-size: 22px;
  line-height: 1;
  transition: transform 0.2s, filter 0.2s;
}

/* ---------- Charts ---------- */
.chart-card {
  position: relative;
}

.chart-card canvas {
  width: 100% !important;
  height: 280px !important;
}

.scenario-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.scenario-actions input {
  flex: 1;
  min-width: 120px;
  padding: 11px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  background: var(--bg-soft);
  transition: all 0.15s;
}

.scenario-actions input:focus {
  outline: none;
  border-color: var(--primary);
  background: white;
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.scenario-actions button {
  flex: 0 0 auto;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  top: calc(var(--header-h) + 12px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.88);
  color: white;
  padding: 11px 22px;
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 500;
  z-index: 1000;
  max-width: 90vw;
  text-align: center;
  animation: toastIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translate(-50%, -12px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

/* ---------- 右上角下拉菜单 ---------- */
.dropdown {
  position: fixed;
  top: calc(var(--header-h) - 4px);
  right: 12px;
  min-width: 220px;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 900;
  padding: 6px;
  overflow: hidden;
  animation: dropdownIn 0.18s ease-out;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.1s;
  line-height: 1.3;
}

.dropdown button:hover,
.dropdown button:focus-visible {
  background: var(--primary-light);
  color: var(--primary-dark);
  outline: none;
}

.dropdown button:active { transform: scale(0.985); }

.dropdown-divider {
  height: 1px;
  margin: 4px 6px;
  background: var(--border-soft);
}

/* ---------- Modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal.hidden { display: none; }

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fadeIn 0.2s ease;
}

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

.modal-card {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: modalIn 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1.5px solid var(--border-soft);
  background: linear-gradient(135deg, var(--primary-light), transparent 70%);
}

.modal-header h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}

.modal-body {
  overflow-y: auto;
  padding: 20px 22px 24px;
  line-height: 1.7;
  color: var(--text-secondary);
  font-size: 14.5px;
}

.modal-body h3 {
  margin: 20px 0 8px;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--primary-dark);
}

.modal-body h3:first-child { margin-top: 0; }

.modal-body p  { margin: 0 0 12px; }
.modal-body ul { margin: 0 0 12px; padding-left: 20px; }
.modal-body li { margin-bottom: 6px; }

.modal-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12.5px;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--bg-soft);
  color: var(--primary-dark);
  border: 1px solid var(--border-soft);
}

.modal-body table {
  width: 100%;
  /* 关键修复 2：border-collapse:separate，消除 collapse 共享边框下的 sticky 亚像素错位 */
  border-collapse: separate;
  border-spacing: 0;
  margin: 8px 0 14px;
  font-size: 13.5px;
  min-width: 520px;
  /* 作为外框补左上（每格只画右下） */
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.modal-body th,
.modal-body td {
  padding: 8px 10px;
  background: var(--card-bg);
  text-align: left;
  white-space: nowrap;
  /* separate 下每格只画右边+下边，避免相邻两格 2px 粗线重叠 */
  border: none;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;        /* 给冻结列 ::before 扩展背景做定位基准 */
}

.modal-body th {
  background: var(--bg-soft);
  font-weight: 600;
  color: var(--text);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;               /* 普通表头 = 10（< 遮罩 12 / 冻结列 22~32） */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  isolation: isolate;
}

/* 模态框表格：冻结第一列（左对齐、sticky left），同样使用"滚动容器遮罩 + 冻结列自身背景延伸盾牌"双层防漏 */
.modal-body th:first-child,
.modal-body td:first-child {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  z-index: 22;               /* 冻结列 body = 22（> 遮罩 12） */
  background: var(--card-bg);
  text-align: left;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  isolation: isolate;
  /* 双侧外延 box-shadow 继续保留做 1px 级兜底 */
  box-shadow: -2px 0 0 0 var(--card-bg),
               2px 0 0 0 var(--card-bg),
               3px 0 4px -2px rgba(0, 0, 0, 0.06);
}

/* 模态框冻结列的"左侧背景盾牌"：把当前单元格背景向左铺 100px，
 * 完全遮挡负滚橡皮筋时穿出来的后列内容；背景色自动 inherit，无需特殊行额外写。 */
.modal-body th:first-child::before,
.modal-body td:first-child::before {
  content: "";
  position: absolute;
  left: -100px;
  top: 0;
  width: 100px;
  height: 100%;
  background: inherit;
  z-index: -1;
  pointer-events: none;
  border-right: 1px solid transparent;
}

.modal-body th:first-child {
  background: var(--bg-soft);
  z-index: 32; /* 同时在顶部和左侧冻结 -> 最高层级 */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  box-shadow: -2px 0 0 0 var(--bg-soft),
               2px 0 0 0 var(--bg-soft),
               3px 0 4px -2px rgba(0, 0, 0, 0.08);
}

/* 模态框里表格的外层容器（JS 动态插入）：横向滚动，允许小屏手机左右滑动 */
.modal-table {
  position: relative;
  overflow-x: auto;
  /* 防止橡皮筋/负滚时，表格内容绘制越界到滚动容器外 */
  overflow-clip-margin: 0px;
  contain: paint;
  /* 禁止横向 overscroll 橡皮筋拉到 scrollLeft<0（冻结列左边漏出的主要根因） */
  overscroll-behavior-x: contain;
  -webkit-overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  margin: 0 -22px 14px;
  padding: 0 22px 4px;
  border-radius: 4px;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}

/* 模态框表格左遮罩：22px padding + 68px 缓冲 = 90px 宽（抵御 -68px 内橡皮筋负滚）；
 * z-index=12 在普通列之上、冻结列之下 */
.modal-table::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 4px;              /* 容器 padding-bottom=4px，bottom:0 会往下多伸 4px 超出内边距，对齐 bottom:4px */
  width: 90px;              /* 22px padding + 68px 负滚缓冲 */
  background: var(--card-bg);
  z-index: 12;              /* > 普通 td/th(0-10) 盖住漏缝，< sticky first-child(22~32) 不盖冻结列 */
  pointer-events: none;
  border-top-left-radius: inherit;
}

/* 模态框里表格最后一个 table 去掉多余底部 margin，防止出现额外空行 */
.modal-table table {
  margin: 8px 0 0;
}

/* 文档模态框底部的关闭提示 */
.doc-close-hint {
  margin: 22px -22px -24px;
  padding: 14px 22px;
  background: var(--primary-light);
  border-top: 1.5px dashed var(--border);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  color: var(--primary-dark);
  font-size: 13.5px;
  line-height: 1.6;
  text-align: center;
}

.doc-close-hint b {
  color: inherit;
  font-weight: 700;
}

@media (prefers-color-scheme: dark) {
  .modal-header h2 { color: #f8fafc; }
  .modal-body h3 { color: var(--accent); }
  .modal-body code { color: var(--accent); }
  .dropdown button:hover,
  .dropdown button:focus-visible { color: #bfdbfe; }
  .doc-close-hint {
    background: rgba(59, 130, 246, 0.12);
    color: #bfdbfe;
  }
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-tertiary);
}

/* ---------- Dark mode ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #3b82f6;
    --primary-dark: #2563eb;
    --primary-light: rgba(59, 130, 246, 0.15);
    --primary-glow: rgba(59, 130, 246, 0.25);
    --accent: #60a5fa;
    --bg: #0f1115;
    --bg-soft: #1a1d23;
    --card-bg: #181b20;
    --text: #e5e7eb;
    --text-secondary: #9ca3af;
    --text-tertiary: #6b7280;
    --border: #2d3139;
    --border-soft: #232629;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-primary: 0 4px 12px rgba(59, 130, 246, 0.35);
    --shadow-primary-lg: 0 8px 24px rgba(59, 130, 246, 0.45);
  }

  body {
    background-image:
      radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.06) 0%, transparent 40%),
      radial-gradient(circle at 100% 0%, rgba(96, 165, 250, 0.06) 0%, transparent 40%);
  }

  th, td:first-child {
    background: #181b20;
  }

  th {
    background: #1a1d23;
  }

  th:first-child {
    background: #1a1d23;
  }

  tbody tr:hover td:first-child {
    background: #1c2838; /* 不透明暗色悬停（主色叠加） */
  }

  tr.row-construction td {
    background: rgba(239, 68, 68, 0.12);
  }

  tr.row-construction td:first-child {
    background: #3c1e22; /* 不透明：#181b20 + 红18% 合成 */
  }

  tr.row-early td {
    background: rgba(59, 130, 246, 0.08);
  }

  tr.row-early td:first-child {
    background: #1a2538; /* 不透明：#181b20 + 蓝14% 合成 */
  }

  /* 模态框表格暗色模式下 th/td 全部实色防透明 */
  .modal-body th,
  .modal-body td {
    background: #181b20;
  }
  .modal-body th,
  .modal-body th:first-child {
    background: #1a1d23;
  }

  .field input,
  .field select,
  .scenario-actions input {
    background: #0f1115;
    color: var(--text);
  }

  .action-bar,
  .bottom-nav {
    background: rgba(24, 27, 32, 0.92);
  }

  .toast {
    background: rgba(0, 0, 0, 0.92);
  }
}