/* ========== 主题变量 ========== */

/* 0 · 经典暖金（原默认风格） */
[data-theme="classic"],
:root {
  --bg: #0d0d0d;
  --surface: #161618;
  --surface-2: #1a1a1d;
  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(201, 169, 110, 0.35);
  --accent: #c9a96e;
  --accent-rgb: 201, 169, 110;
  --accent-bg: rgba(201, 169, 110, 0.14);
  --accent-border: rgba(201, 169, 110, 0.4);
  --accent-text: #1a1608;
  --text-primary: rgba(255, 255, 255, 0.9);
  --text-muted: rgba(255, 255, 255, 0.48);
  --shadow: rgba(0, 0, 0, 0.28);
  --text-on-surface: rgba(255, 255, 255, 0.9);
  --dashed-border: rgba(255, 255, 255, 0.08);
  --input-bg: rgba(255, 255, 255, 0.04);
  --input-border: rgba(255, 255, 255, 0.1);
  --hover-bg: rgba(255, 255, 255, 0.04);
  --scrollbar-thumb: rgba(255, 255, 255, 0.1);
  --scrollbar-track: transparent;
  /* 兼容旧变量名 + 派生 token */
  --surface2: var(--surface-2);
  --bg-elevated: #111111;
  --card: var(--surface);
  --text: rgba(255, 255, 255, 0.86);
  --muted: var(--text-muted);
  --text-title: rgba(255, 255, 255, 0.94);
  --text-value: var(--text-primary);
  --label-soft: var(--text-muted);
  --value-bright: var(--text-primary);
  --accent2: var(--accent);
  --brand: var(--accent);
  --result: var(--accent);
  --accent-bright: #d4b57e;
  --accent-dim: #a88b55;
  --accent-soft: var(--accent-bg);
  --accent-glow: rgba(var(--accent-rgb), 0.22);
  --accent-gradient: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 48%, var(--accent-dim) 100%);
  --glass-fill: var(--surface);
  --glass-fill-core: var(--surface-2);
  --glass-border: var(--border);
  --glass-border-strong: var(--accent-border);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --glass-inset-core: inset 0 0 14px rgba(201, 169, 110, 0.06);
  --glass-blur: blur(8px);
  --glass-bg: var(--surface);
  --glass-shadow: 0 4px 16px var(--shadow);
  --card-shadow: 0 4px 16px var(--shadow);
  --card-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.38), 0 0 18px rgba(201, 169, 110, 0.08);
  --chip-gradient: linear-gradient(135deg, rgba(201, 169, 110, 0.16), rgba(201, 169, 110, 0.05));
  --calc-primary: #d4c5a0;
  --calc-secondary: #9a9585;
  --calc-highlight: #e8dcc8;
  --calc-muted: #6b6658;
  --ornament-gold: #d4b96e;
  color-scheme: dark;
}

/* A · 深空墨蓝 */
[data-theme="deep-blue"] {
  --bg: #0c1018;
  --surface: #141822;
  --surface-2: #1a2030;
  --border: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.12);
  --accent: #e8c547;
  --accent-rgb: 232, 197, 71;
  --accent-bg: rgba(232, 197, 71, 0.08);
  --accent-border: rgba(232, 197, 71, 0.15);
  --accent-text: #1a1800;
  --text-primary: #e0dfe8;
  --text-muted: #5a6080;
  --shadow: rgba(0, 0, 0, 0.4);
  --text-on-surface: #e0dfe8;
  --dashed-border: rgba(255, 255, 255, 0.08);
  --input-bg: rgba(255, 255, 255, 0.04);
  --input-border: rgba(255, 255, 255, 0.1);
  --hover-bg: rgba(255, 255, 255, 0.04);
  --scrollbar-thumb: rgba(255, 255, 255, 0.1);
  --scrollbar-track: transparent;
  /* 兼容旧变量名 + 派生 token */
  --surface2: var(--surface-2);
  --bg-elevated: var(--surface);
  --card: var(--surface);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --text-title: var(--text-primary);
  --text-value: var(--text-primary);
  --label-soft: var(--text-muted);
  --value-bright: var(--text-primary);
  --accent2: var(--accent);
  --brand: var(--accent);
  --result: var(--accent);
  --accent-bright: #f0d56a;
  --accent-dim: #b89a30;
  --accent-soft: var(--accent-bg);
  --accent-glow: rgba(var(--accent-rgb), 0.22);
  --accent-gradient: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 48%, var(--accent-dim) 100%);
  --glass-fill: var(--surface);
  --glass-fill-core: var(--surface-2);
  --glass-border: var(--border);
  --glass-border-strong: var(--accent-border);
  --glass-inset: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent);
  --glass-inset-core: inset 0 0 14px var(--accent-bg);
  --glass-blur: blur(8px);
  --glass-bg: var(--surface);
  --glass-shadow: 0 4px 16px var(--shadow);
  --card-shadow: 0 4px 16px var(--shadow);
  --card-shadow-hover: 0 10px 28px var(--shadow), 0 0 18px rgba(var(--accent-rgb), 0.08);
  --chip-gradient: linear-gradient(135deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.05));
  --calc-primary: #e8dcc8;
  --calc-secondary: var(--text-muted);
  --calc-highlight: #f5edd8;
  --calc-muted: var(--text-muted);
  --ornament-gold: var(--accent);
  color-scheme: dark;
}

/* B · 纯白晨光 */
[data-theme="pure-white"] {
  --bg: #f5f3ee;
  --surface: #ffffff;
  --surface-2: #eae8e2;
  --border: rgba(0, 0, 0, 0.06);
  --border-strong: rgba(0, 0, 0, 0.12);
  --accent: #2a6b5c;
  --accent-rgb: 42, 107, 92;
  --accent-bg: rgba(42, 107, 92, 0.06);
  --accent-border: rgba(42, 107, 92, 0.15);
  --accent-text: #f0fff8;
  --text-primary: #2a2824;
  --text-muted: #8a8478;
  --shadow: rgba(0, 0, 0, 0.08);
  --text-on-surface: #2a2824;
  --dashed-border: rgba(0, 0, 0, 0.1);
  --input-bg: rgba(0, 0, 0, 0.03);
  --input-border: rgba(0, 0, 0, 0.1);
  --hover-bg: rgba(0, 0, 0, 0.03);
  --scrollbar-thumb: rgba(0, 0, 0, 0.1);
  --scrollbar-track: rgba(0, 0, 0, 0.02);
  --surface2: var(--surface-2);
  --bg-elevated: var(--surface);
  --card: var(--surface);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --text-title: var(--text-primary);
  --text-value: var(--text-primary);
  --label-soft: var(--text-muted);
  --value-bright: var(--text-primary);
  --accent2: var(--accent);
  --brand: var(--accent);
  --result: var(--accent);
  --accent-bright: #358a78;
  --accent-dim: #1f5448;
  --accent-soft: var(--accent-bg);
  --accent-glow: rgba(var(--accent-rgb), 0.22);
  --accent-gradient: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 48%, var(--accent-dim) 100%);
  --glass-fill: var(--surface);
  --glass-fill-core: var(--surface-2);
  --glass-border: var(--border);
  --glass-border-strong: var(--accent-border);
  --glass-inset: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent);
  --glass-inset-core: inset 0 0 14px var(--accent-bg);
  --glass-blur: blur(8px);
  --glass-bg: var(--surface);
  --glass-shadow: 0 4px 16px var(--shadow);
  --card-shadow: 0 4px 16px var(--shadow);
  --card-shadow-hover: 0 10px 28px var(--shadow), 0 0 18px rgba(var(--accent-rgb), 0.08);
  --chip-gradient: linear-gradient(135deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.05));
  --calc-primary: var(--accent);
  --calc-secondary: var(--text-muted);
  --calc-highlight: var(--accent-bright);
  --calc-muted: var(--text-muted);
  --ornament-gold: var(--accent);
  color-scheme: light;
}

/* C · 暗夜紫晶 */
[data-theme="dark-purple"] {
  --bg: #0e0a14;
  --surface: #181220;
  --surface-2: #20182c;
  --border: rgba(200, 160, 255, 0.06);
  --border-strong: rgba(200, 160, 255, 0.12);
  --accent: #c8a0ff;
  --accent-rgb: 200, 160, 255;
  --accent-bg: rgba(200, 160, 255, 0.08);
  --accent-border: rgba(200, 160, 255, 0.15);
  --accent-text: #1a0e2a;
  --text-primary: #e4def0;
  --text-muted: #6a5a80;
  --shadow: rgba(0, 0, 0, 0.5);
  --text-on-surface: #e4def0;
  --dashed-border: rgba(200, 160, 255, 0.1);
  --input-bg: rgba(200, 160, 255, 0.04);
  --input-border: rgba(200, 160, 255, 0.1);
  --hover-bg: rgba(200, 160, 255, 0.04);
  --scrollbar-thumb: rgba(200, 160, 255, 0.1);
  --scrollbar-track: transparent;
  --surface2: var(--surface-2);
  --bg-elevated: var(--surface);
  --card: var(--surface);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --text-title: var(--text-primary);
  --text-value: var(--text-primary);
  --label-soft: var(--text-muted);
  --value-bright: var(--text-primary);
  --accent2: var(--accent);
  --brand: var(--accent);
  --result: var(--accent);
  --accent-bright: #d4b8ff;
  --accent-dim: #a078d8;
  --accent-soft: var(--accent-bg);
  --accent-glow: rgba(var(--accent-rgb), 0.22);
  --accent-gradient: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 48%, var(--accent-dim) 100%);
  --glass-fill: var(--surface);
  --glass-fill-core: var(--surface-2);
  --glass-border: var(--border);
  --glass-border-strong: var(--accent-border);
  --glass-inset: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent);
  --glass-inset-core: inset 0 0 14px var(--accent-bg);
  --glass-blur: blur(8px);
  --glass-bg: var(--surface);
  --glass-shadow: 0 4px 16px var(--shadow);
  --card-shadow: 0 4px 16px var(--shadow);
  --card-shadow-hover: 0 10px 28px var(--shadow), 0 0 18px rgba(var(--accent-rgb), 0.08);
  --chip-gradient: linear-gradient(135deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.05));
  --calc-primary: #d4c8e8;
  --calc-secondary: var(--text-muted);
  --calc-highlight: #efe8f8;
  --calc-muted: var(--text-muted);
  --ornament-gold: var(--accent);
  color-scheme: dark;
}

/* D · 晨雾青瓷 */
[data-theme="mist-jade"] {
  --bg: #f0ece4;
  --surface: #e8e4dc;
  --surface-2: #ddd8d0;
  --border: rgba(0, 0, 0, 0.06);
  --border-strong: rgba(0, 0, 0, 0.12);
  --accent: #1a7a64;
  --accent-rgb: 26, 122, 100;
  --accent-bg: rgba(26, 122, 100, 0.06);
  --accent-border: rgba(26, 122, 100, 0.15);
  --accent-text: #f0fff8;
  --text-primary: #2a2824;
  --text-muted: #8a8478;
  --shadow: rgba(0, 0, 0, 0.06);
  --text-on-surface: #2a2824;
  --dashed-border: rgba(0, 0, 0, 0.1);
  --input-bg: rgba(0, 0, 0, 0.03);
  --input-border: rgba(0, 0, 0, 0.1);
  --hover-bg: rgba(0, 0, 0, 0.03);
  --scrollbar-thumb: rgba(0, 0, 0, 0.1);
  --scrollbar-track: rgba(0, 0, 0, 0.02);
  --surface2: var(--surface-2);
  --bg-elevated: var(--surface);
  --card: var(--surface);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --text-title: var(--text-primary);
  --text-value: var(--text-primary);
  --label-soft: var(--text-muted);
  --value-bright: var(--text-primary);
  --accent2: var(--accent);
  --brand: var(--accent);
  --result: var(--accent);
  --accent-bright: #24987c;
  --accent-dim: #146352;
  --accent-soft: var(--accent-bg);
  --accent-glow: rgba(var(--accent-rgb), 0.22);
  --accent-gradient: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 48%, var(--accent-dim) 100%);
  --glass-fill: var(--surface);
  --glass-fill-core: var(--surface-2);
  --glass-border: var(--border);
  --glass-border-strong: var(--accent-border);
  --glass-inset: inset 0 1px 0 color-mix(in srgb, var(--text-primary) 4%, transparent);
  --glass-inset-core: inset 0 0 14px var(--accent-bg);
  --glass-blur: blur(8px);
  --glass-bg: var(--surface);
  --glass-shadow: 0 4px 16px var(--shadow);
  --card-shadow: 0 4px 16px var(--shadow);
  --card-shadow-hover: 0 10px 28px var(--shadow), 0 0 18px rgba(var(--accent-rgb), 0.08);
  --chip-gradient: linear-gradient(135deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.05));
  --calc-primary: var(--accent);
  --calc-secondary: var(--text-muted);
  --calc-highlight: var(--accent-bright);
  --calc-muted: var(--text-muted);
  --ornament-gold: var(--accent);
  color-scheme: light;
}

/* 布局 / 字体 / 状态色 / 数据标识色（不随主题变） */
:root {
  --font-display: "Noto Serif SC", "Songti SC", "SimSun", serif;
  --font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "Consolas", "Cascadia Mono", monospace;
  --ease-ui: 0.3s ease;
  --ok: #98c379;
  --warn: #e5c07b;
  --danger: #e06c75;
  --phase-rail-width: 152px;
  --setup-main-max-width: calc(100vw - 14.75rem - 2rem);
  --app-topbar-height: 58px;
  --ornament-cyan: #7eb8c9;

  /* ── 技能类型（数据标识色，不随主题） ── */
  --color-attack: #2dd4bf;
  --color-attack-bg: rgba(45, 212, 191, 0.06);
  --color-attack-border: rgba(45, 212, 191, 0.2);
  --color-attack-node: rgba(45, 212, 191, 0.1);

  --color-heavy: #ff9f43;
  --color-heavy-bg: rgba(255, 159, 67, 0.06);
  --color-heavy-border: rgba(255, 159, 67, 0.2);
  --color-heavy-node: rgba(255, 159, 67, 0.1);

  --color-skill: #4a9eff;
  --color-skill-bg: rgba(74, 158, 255, 0.06);
  --color-skill-border: rgba(74, 158, 255, 0.2);
  --color-skill-node: rgba(74, 158, 255, 0.1);

  --color-variation: #c084fc;
  --color-variation-bg: rgba(192, 132, 252, 0.06);
  --color-variation-border: rgba(192, 132, 252, 0.2);
  --color-variation-node: rgba(192, 132, 252, 0.1);

  --color-echo: #ffd93d;
  --color-echo-bg: rgba(255, 217, 61, 0.06);
  --color-echo-border: rgba(255, 217, 61, 0.2);
  --color-echo-node: rgba(255, 217, 61, 0.1);

  --color-sonance: #ff6b6b;
  --color-sonance-bg: rgba(255, 107, 107, 0.06);
  --color-sonance-border: rgba(255, 107, 107, 0.2);
  --color-sonance-node: rgba(255, 107, 107, 0.1);

  /* ── Buff分类（数据标识色，不随主题） ── */
  --color-deepen: #e85d5d;
  --color-deepen-bg: rgba(232, 93, 93, 0.06);
  --color-deepen-border: rgba(232, 93, 93, 0.2);

  --color-buff: #ffd93d;
  --color-buff-bg: rgba(255, 217, 61, 0.06);
  --color-buff-border: rgba(255, 217, 61, 0.2);

  --color-crit: #ffb347;
  --color-crit-bg: rgba(255, 179, 71, 0.06);
  --color-crit-border: rgba(255, 179, 71, 0.2);

  --color-defense: #a0a0a0;
  --color-defense-bg: rgba(160, 160, 160, 0.06);
  --color-defense-border: rgba(160, 160, 160, 0.2);

  --color-vulnerable: #c084fc;
  --color-vulnerable-bg: rgba(192, 132, 252, 0.06);
  --color-vulnerable-border: rgba(192, 132, 252, 0.2);

  --color-composite: #8b9dc3;
  --color-composite-bg: rgba(139, 157, 195, 0.06);
  --color-composite-border: rgba(139, 157, 195, 0.2);

  --color-resonance: #45e0cc;
  --color-resonance-bg: rgba(69, 224, 204, 0.06);
  --color-resonance-border: rgba(69, 224, 204, 0.2);
}

  * { box-sizing: border-box; margin: 0; padding: 0; }

  html {
    background: var(--bg);
    transition: background 300ms ease, color 300ms ease;
  }

  body {
    font-family: var(--font-body);
    font-size: 15px;
    letter-spacing: 0.01em;
    line-height: 1.55;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    padding-top: var(--app-topbar-height);
    transition: background 300ms ease, color 300ms ease;
  }

  /* 主题切换时表面元素平滑过渡 */
  .panel,
  .app-topbar,
  .app-sidenav,
  .workspace-phase-rail,
  .calc-summary-bar,
  .summary-bar,
  .wc-tooltip,
  .theme-switcher,
  .special-skill-card,
  .special-config-bar,
  .special-stats-bar,
  input,
  select,
  textarea,
  .btn {
    transition:
      background-color 300ms ease,
      border-color 300ms ease,
      color 300ms ease,
      box-shadow 300ms ease;
  }

  /* 数字/等宽区域：JetBrains Mono（无斜线零） */
  .mono,
  .counter-input,
  .detail-value,
  .summary-item-value,
  .rate-value,
  .mult-input,
  .mult-count-input,
  .stack-input,
  .wc-tooltip-value,
  .wc-tooltip-debug {
    font-family: var(--font-mono);
  }

  .wrap {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0 1rem 3rem;
    box-sizing: border-box;
  }

  body.has-phase-rail .wrap {
    padding-left: calc(var(--phase-rail-width) + 12px);
  }

  /* —— 顶栏：花纹作为 ::before 背景融入，不再单独占一层 —— */
  .app-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--app-topbar-height);
    margin: 0;
    padding: 8px 1.25rem 8px 16px;
    overflow: hidden;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 0;
  }

  /* 海水江崖纹：分层透明度在 SVG 内；CSS 负责上下溶入 */
  .app-topbar-motif {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    display: block;
    -webkit-mask-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.75) 0%,
      #000 28%,
      #000 58%,
      rgba(0, 0, 0, 0.45) 82%,
      transparent 100%
    );
    mask-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.75) 0%,
      #000 28%,
      #000 58%,
      rgba(0, 0, 0, 0.45) 82%,
      transparent 100%
    );
  }

  .app-topbar > .app-brand,
  .app-topbar > .app-user {
    position: relative;
    z-index: 1;
  }

  /* 导航栏底边：透明 → 淡金 → 透明 */
  .app-topbar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: 1.5px;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(212, 185, 110, 0.15) 18%,
      rgba(212, 185, 110, 0.55) 50%,
      rgba(126, 184, 201, 0.35) 72%,
      transparent 100%
    );
  }

  .app-corner {
    position: absolute;
    top: 6px;
    width: 36px;
    height: 36px;
    opacity: 0.26;
    pointer-events: none;
    z-index: 0;
  }

  .app-corner--tl { left: 8px; }
  .app-corner--tr { right: 8px; }

  @media (max-width: 720px) {
    :root {
      --app-topbar-height: 54px;
    }
    .app-topbar {
      padding: 6px 1rem 6px 12px;
    }
    .app-topbar-motif { opacity: 0.92; }
    .app-corner {
      width: 30px;
      height: 30px;
      top: 4px;
      opacity: 0.22;
    }
  }

  /* 区块分隔：居中纹样 + 两侧细线（纯 CSS，不挡交互） */
  .ornament-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 14px;
    margin: 1.1rem 0 0.85rem;
    pointer-events: none;
    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(212, 185, 110, 0.1) 14%,
        rgba(212, 185, 110, 0.32) 44%,
        transparent 49%
      ),
      linear-gradient(
        90deg,
        transparent 51%,
        rgba(126, 184, 201, 0.32) 56%,
        rgba(126, 184, 201, 0.1) 86%,
        transparent 100%
      );
    background-size: 46% 1px, 46% 1px;
    background-position: left center, right center;
    background-repeat: no-repeat;
  }

  .ornament-divider::after {
    content: "◈";
    font-size: 0.62rem;
    line-height: 1;
    color: rgba(212, 185, 110, 0.48);
    text-shadow: 0 0 8px rgba(126, 184, 201, 0.22);
  }

  #main > .panel + .panel,
  .buff-check-page > .buff-check-team-card + .buff-check-personal-section {
    position: relative;
    margin-top: 0.25rem;
  }

  #main > .panel + .panel::before,
  .buff-check-page > .buff-check-team-card + .buff-check-personal-section::before {
    content: "◈";
    display: flex;
    align-items: center;
    justify-content: center;
    height: 14px;
    margin: 0.35rem 0 1rem;
    pointer-events: none;
    font-size: 0.62rem;
    line-height: 1;
    color: rgba(212, 185, 110, 0.48);
    text-shadow: 0 0 8px rgba(126, 184, 201, 0.22);
    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(212, 185, 110, 0.1) 14%,
        rgba(212, 185, 110, 0.32) 44%,
        transparent 49%
      ),
      linear-gradient(
        90deg,
        transparent 51%,
        rgba(126, 184, 201, 0.32) 56%,
        rgba(126, 184, 201, 0.1) 86%,
        transparent 100%
      );
    background-size: 46% 1px, 46% 1px;
    background-position: left center, right center;
    background-repeat: no-repeat;
  }

  .app-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0 6px 4px;
    min-width: 0;
  }

  .app-brand-logo {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    object-fit: contain;
    display: block;
    /* 透明底 PNG，花纹可透出，不再用 blend 硬抠黑底 */
    background: transparent;
    transition: filter 300ms ease;
  }

  /* 浅色主题：白底 logo 反成黑色，避免看不见 */
  [data-theme="pure-white"] .app-brand-logo,
  [data-theme="mist-jade"] .app-brand-logo {
    filter: brightness(0);
  }

  .app-brand-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    line-height: 1.05;
    margin: 0;
  }

  .app-brand-cn {
    font-family: "Noto Serif SC", "Songti SC", "SimSun", serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.08em;
    white-space: nowrap;
    margin: 0;
    line-height: 1.05;
  }

  .app-brand-en {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    white-space: nowrap;
    margin: 0;
    line-height: 1.05;
  }

  .app-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 4px 0;
  }

  .app-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 40px;
    border: 1px solid var(--glass-border);
    background: linear-gradient(145deg, var(--surface2), var(--bg));
    box-shadow: 0 0 0 1px rgba(230, 176, 114, 0.08);
  }

  .app-user-name {
    font-size: 0.95rem;
    color: var(--text);
    white-space: nowrap;
  }

  .app-tools-drawer {
    margin: 0 0 0.75rem;
    padding: 0.35rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--muted);
  }

  .app-tools-drawer summary {
    cursor: pointer;
    user-select: none;
    padding: 0.25rem 0;
  }

  .app-tools-drawer[open] summary {
    margin-bottom: 0.45rem;
    color: var(--accent);
  }

  header.app-topbar {
    margin-bottom: 0;
  }

  .formula-bar {
    margin-top: 0.75rem;
    padding: 0.65rem 0.9rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--accent2);
  }

  .ref-video-bar {
    margin-top: 0.65rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.65rem 0.9rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
  }

  .ref-video-label {
    font-size: 0.82rem;
    color: var(--accent);
    font-weight: 600;
    white-space: nowrap;
  }

  .ref-video-input {
    flex: 1;
    min-width: 180px;
    padding: 0.4rem 0.55rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    font-size: 0.82rem;
  }

  .ref-video-input:focus {
    outline: none;
    border-color: var(--accent);
  }

  #sidebar {
    display: flex;
    flex-direction: column;
  }

  .sidebar-layout {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0;
  }

  .sidebar-shell {
    flex: 1;
  }

  .calc-notes-panel {
    margin-top: 1rem;
    flex-shrink: 0;
  }

  .calc-notes-panel h2 {
    margin-bottom: 0.45rem;
  }

  .calc-notes-input {
    width: 100%;
    min-height: 108px;
    max-height: 280px;
    resize: vertical;
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    font-size: 0.8rem;
    line-height: 1.45;
    font-family: inherit;
  }

  .calc-notes-input:focus {
    outline: none;
    border-color: var(--accent);
  }

  .layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 1.25rem;
    align-items: start;
  }

  /* 宽对照表不得把整页撑宽；横向滚动收在矩阵容器内 */
  .layout > #main {
    min-width: 0;
  }

  .layout.phase-setup {
    grid-template-columns: 1fr;
  }

  .layout.phase-setup #main {
    display: none;
  }

  .layout.phase-template {
    grid-template-columns: minmax(200px, 280px) minmax(0, 1fr);
  }

  .layout.phase-setup[data-setup-layout="columns"] {
    grid-template-columns: 1fr;
  }

  .layout.phase-setup[data-setup-layout="columns"] #main {
    display: none;
  }

  .layout.phase-rotation {
    grid-template-columns: 360px 1fr;
    padding-bottom: 52px;
  }

  /* 详细计算：摘要轨在主区内，应用侧栏收起 */
  .layout.phase-calc:not(.phase-special) {
    grid-template-columns: 1fr;
    padding-bottom: 52px;
  }

  .layout.phase-calc:not(.phase-special) #sidebar {
    display: none;
  }

  .layout.phase-calc.phase-special {
    grid-template-columns: 1fr;
    padding-bottom: 52px;
  }

  .layout.phase-calc.phase-special #sidebar {
    display: none;
  }

  .layout.phase-axis {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .layout.phase-axis #sidebar {
    display: none;
  }

  .layout.phase-axis #main {
    min-width: 0;
    min-height: calc(100vh - var(--app-topbar-height) - 2rem);
    display: block;
    height: auto;
    overflow: visible;
  }

  body.is-axis-resizing {
    cursor: row-resize;
    user-select: none;
  }

  body.is-axis-resizing iframe,
  body.is-axis-resizing .axis-skill-chip {
    pointer-events: none;
  }

  .layout.phase-check,
  .layout.phase-buff,
  .layout.phase-export {
    grid-template-columns: 1fr;
  }

  .layout.phase-check #sidebar,
  .layout.phase-buff #sidebar,
  .layout.phase-export #sidebar {
    display: none;
  }

  @media (max-width: 960px) {
    .layout,
    .layout.phase-setup,
    .layout.phase-template,
    .layout.phase-rotation,
    .layout.phase-calc,
    .layout.phase-axis,
    .layout.phase-buff,
    .layout.phase-check,
    .layout.phase-export { grid-template-columns: 1fr; }
    .layout.phase-setup #main { display: none; }
    .layout.phase-axis #sidebar,
    .layout.phase-calc #sidebar,
    .layout.phase-buff #sidebar,
    .layout.phase-check #sidebar,
    .layout.phase-export #sidebar { display: none; }
  }

  /* 全队编轴：上排轴 / 下技能库；技能库随内容向下撑开，页面滚动 */
  .panel.team-axis-board,
  .team-axis-board {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: calc(100vh - var(--app-topbar-height) - 2.5rem);
    max-height: none;
    height: auto;
    overflow: visible;
    padding: 0;
  }

  .team-axis-board > .axis-board-toolbar.toolbar,
  .team-axis-board > .axis-board-hint,
  .team-axis-board > .axis-merge-bar {
    flex: 0 0 auto;
  }

  .axis-board-toolbar.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 8px 16px;
    margin: 0;
    border-bottom: 1px solid var(--border);
    background: var(--input-bg);
    flex-wrap: wrap;
  }

  .toolbar-left,
  .toolbar-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
  }

  .toolbar-title {
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--text-title, var(--text));
    margin-right: 4px;
    white-space: nowrap;
  }

  .toolbar-btn {
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-primary, var(--text));
    background: var(--hover-bg);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: background 150ms, border-color 150ms, color 150ms, opacity 150ms;
  }

  .toolbar-btn:hover:not(:disabled) {
    background: var(--accent-bg);
  }

  .toolbar-btn.primary {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
    font-weight: 600;
  }

  .toolbar-btn.primary:hover:not(:disabled) {
    background: var(--accent-bright, var(--accent));
  }

  .toolbar-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .axis-board-hint {
    margin: 0;
    padding: 6px 16px 8px;
    border-bottom: 1px solid var(--border);
  }

  .axis-split-body {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: auto;
    height: auto;
  }

  .axis-lanes-panel {
    flex: 0 0 var(--axis-split-top, 36vh);
    height: var(--axis-split-top, 36vh);
    min-height: 120px;
    max-height: 70vh;
    overflow: auto;
    padding: 0.65rem 1rem 0.45rem;
  }

  .panel-divider {
    flex: 0 0 4px;
    height: 4px;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--hover-bg);
    cursor: row-resize;
    transition: background 150ms;
    z-index: 2;
  }

  .panel-divider:hover,
  .panel-divider.is-dragging {
    background: var(--border-strong);
  }

  .axis-lanes {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 0;
  }

  .team-axis-board.time-viz-on .axis-lanes {
    gap: 0.28rem;
  }
  .axis-lane {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 0.4rem;
    align-items: center;
    padding: 0.28rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface2) 88%, transparent);
  }
  .team-axis-board.time-viz-on .axis-lane {
    padding: 0.18rem 0.28rem;
    border-radius: 10px;
    gap: 0.35rem;
  }
  .axis-lane.is-active {
    border-color: color-mix(in srgb, var(--accent, #5b8def) 55%, var(--border));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #5b8def) 25%, transparent);
  }
  .axis-lane-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    text-align: center;
  }
  .axis-lane-avatar:hover:not(:disabled) {
    background: color-mix(in srgb, var(--surface) 70%, transparent);
  }
  .axis-lane-avatar.active {
    border-color: color-mix(in srgb, var(--accent, #5b8def) 50%, var(--border));
    background: color-mix(in srgb, var(--accent, #5b8def) 12%, var(--surface2));
  }
  .axis-lane-avatar.is-empty,
  .axis-lane-avatar:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }
  .axis-lane-avatar .char-avatar-card {
    width: 56px;
    height: 56px;
  }
  .team-axis-board.time-viz-on .axis-lane-avatar .char-avatar-card {
    width: 48px;
    height: 48px;
  }
  .axis-lane-track {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    min-height: 56px;
    padding: 0.35rem 0.45rem;
    border-radius: 10px;
    border: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
    background: color-mix(in srgb, var(--surface) 55%, transparent);
  }
  .axis-lane-track.is-active {
    border-style: solid;
    border-color: color-mix(in srgb, var(--accent, #5b8def) 35%, var(--border));
  }
  .axis-lane-track.is-empty {
    justify-content: center;
    opacity: 0.7;
  }
  .axis-lane-empty-hint { padding: 0.25rem 0.35rem; }

  /* 时间轴轨道：网格底 + 横向滚动 */
  .axis-lane-track.axis-time-track.timeline {
    display: block;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    min-height: 56px;
    padding: 12px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb), 0.45) var(--scrollbar-track);
    background-color: var(--text-muted);
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: 0 0;
  }

  .axis-lane-track.axis-time-track.timeline::-webkit-scrollbar {
    height: 5px;
  }

  .axis-lane-track.axis-time-track.timeline::-webkit-scrollbar-track {
    margin: 0 8px 2px;
    background: var(--hover-bg);
    border-radius: 999px;
  }

  .axis-lane-track.axis-time-track.timeline::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.45);
    border-radius: 999px;
  }

  .axis-lane-track.axis-time-track.timeline::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--accent-rgb), 0.65);
  }

  .axis-time-canvas.timeline-track {
    position: relative;
    display: block;
    min-width: max-content;
    min-height: 32px;
    height: 32px;
    padding: 0;
  }

  /* 节点间连接线 */
  .axis-time-canvas.timeline-track::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--accent-bg);
    z-index: 0;
    pointer-events: none;
    transform: translateY(-50%);
  }

  .axis-drop-indicator {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 32px;
    min-width: 28px;
    max-width: 200px;
    width: max-content;
    border: 1px dashed var(--accent);
    border-radius: 8px;
    background: rgba(var(--accent-rgb), 0.08);
    z-index: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 200ms ease, left 80ms ease;
  }

  .axis-drop-indicator:not([hidden]) {
    opacity: 1;
  }

  .axis-skill-chip,
  .skill-node {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    width: max-content;
    min-width: 28px;
    max-width: 200px;
    height: 32px;
    padding: 6px 10px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--hover-bg);
    position: relative;
    box-sizing: border-box;
    user-select: none;
    transition: transform 100ms, box-shadow 100ms;
  }

  .axis-skill-chip.is-free.skill-node {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    cursor: grab;
    z-index: 1;
  }

  .axis-skill-chip.is-free.skill-node:active,
  .axis-skill-chip.is-free.skill-node.dragging {
    cursor: grabbing;
    z-index: 10;
    transform: translateY(-50%) scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  }

  .axis-skill-chip.is-free.skill-node.is-snapped {
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.45), 0 4px 16px rgba(0, 0, 0, 0.28);
  }

  .skill-node-name,
  .axis-skill-chip .axis-skill-label.skill-node-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: inherit;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
    user-select: none;
    pointer-events: none;
  }

  .skill-node-rate {
    display: none;
  }

  .skill-node[data-type='普攻'] {
    background: var(--color-attack-node);
    border-color: var(--color-attack-border);
    color: var(--color-attack);
  }
  .skill-node[data-type='重击'] {
    background: var(--color-heavy-node);
    border-color: var(--color-heavy-border);
    color: var(--color-heavy);
  }
  .skill-node[data-type='技能'] {
    background: var(--color-skill-node);
    border-color: var(--color-skill-border);
    color: var(--color-skill);
  }
  .skill-node[data-type='变奏'] {
    background: var(--color-variation-node);
    border-color: var(--color-variation-border);
    color: var(--color-variation);
  }
  .skill-node[data-type='延奏'] {
    background: var(--color-echo-node);
    border-color: var(--color-echo-border);
    color: var(--color-echo);
  }
  .skill-node[data-type='声骸'] {
    background: var(--color-sonance-node);
    border-color: var(--color-sonance-border);
    color: var(--color-sonance);
  }

  .axis-skill-chip.is-free.is-merge-selected {
    border-color: #e6b422;
    background: color-mix(in srgb, #e6b422 28%, var(--surface2));
    box-shadow: 0 0 0 1px color-mix(in srgb, #e6b422 55%, transparent);
    z-index: 2;
  }

  .axis-skill-chip.is-free.is-batch-selected:not(.is-merge-selected) {
    border-color: rgba(var(--accent-rgb), 0.75);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.45);
    z-index: 2;
  }

  .axis-marquee {
    position: absolute;
    z-index: 20;
    pointer-events: none;
    box-sizing: border-box;
    border: 1px solid rgba(var(--accent-rgb), 0.75);
    background: rgba(var(--accent-rgb), 0.12);
    border-radius: 4px;
  }

  body.axis-marquee-active {
    cursor: crosshair;
    user-select: none;
  }

  body.axis-marquee-active .axis-skill-chip {
    pointer-events: none;
  }

  .team-axis-board.merge-pick-on .axis-skill-chip.is-free {
    cursor: pointer;
  }
  .axis-merge-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.55rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid color-mix(in srgb, #e6b422 45%, var(--border));
    border-radius: 8px;
    background: color-mix(in srgb, #e6b422 12%, var(--surface2));
  }
  .axis-merge-bar-label {
    font-size: 0.84rem;
    color: var(--text);
    margin-right: auto;
  }
  .axis-skill-chip.is-free.is-editing {
    cursor: text;
    z-index: 4;
  }
  .axis-skill-label {
    display: inline-block;
    font-size: 0.84rem;
    line-height: 1.2;
    color: var(--text);
    user-select: none;
    pointer-events: none;
  }
  .axis-skill-chip.is-free .axis-skill-rename {
    width: auto;
    max-width: none;
    min-width: 2ch;
    margin: 0;
    padding: 0.05rem 0.15rem;
    border-radius: 4px;
    field-sizing: content;
  }
  /* 编轴技能节点：自定义右键菜单 */
  .context-menu,
  .axis-skill-context-menu.context-menu,
  .timeline-skill-context-menu.context-menu,
  .dropdown-menu {
    position: fixed;
    z-index: 10000;
    min-width: 140px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px var(--shadow);
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 100ms ease, transform 100ms ease;
  }

  .context-menu.is-open,
  .axis-skill-context-menu.context-menu.is-open,
  .timeline-skill-context-menu.context-menu.is-open,
  .dropdown-menu.is-open {
    opacity: 1;
    transform: translateY(0);
  }

  .context-menu-item,
  .axis-skill-context-item,
  .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 8px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-size: 13px;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: background 100ms;
  }

  .context-menu-item:hover:not(:disabled):not(.is-disabled),
  .axis-skill-context-item:hover:not(:disabled),
  .dropdown-item:hover:not(:disabled) {
    background: var(--hover-bg);
  }

  .context-menu-item.danger,
  .axis-skill-context-item.danger {
    color: #ff5050;
  }

  .context-menu-item.danger:hover:not(:disabled),
  .axis-skill-context-item.danger:hover:not(:disabled) {
    background: rgba(255, 80, 80, 0.12);
  }

  .context-menu-item.is-disabled,
  .context-menu-item:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .context-menu-icon {
    flex: 0 0 auto;
    width: 1.1em;
    text-align: center;
    opacity: 0.9;
    font-size: 13px;
    line-height: 1;
  }

  .context-menu-divider {
    height: 1px;
    margin: 4px 8px;
    background: var(--hover-bg);
  }
  .axis-skill-chip.dragging { opacity: 0.9; }
  .axis-skill-chip.is-free.skill-node.dragging { opacity: 1; }
  .axis-skill-chip.drop-before::before,
  .axis-skill-chip.drop-after::after {
    content: '';
    position: absolute;
    top: 10%;
    bottom: 10%;
    width: 3px;
    border-radius: 2px;
    background: var(--accent, #5b8def);
  }
  .axis-skill-chip.drop-before::before { left: -5px; }
  .axis-skill-chip.drop-after::after { right: -5px; }
  .axis-skill-handle {
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: grab;
    padding: 0.1rem 0.15rem;
    line-height: 1;
    font-size: 0.85rem;
  }
  body.axis-dragging .axis-skill-handle { cursor: grabbing; }
  body.axis-dragging { user-select: none; }
  .axis-skill-idx {
    font-size: 0.72rem;
    color: var(--muted);
    min-width: 1rem;
    text-align: center;
  }
  .axis-skill-name {
    width: 7.5rem;
    max-width: 28vw;
    padding: 0.22rem 0.35rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 0.82rem;
  }
  .axis-skill-del {
    flex: 0 0 auto;
  }
  .axis-palette-panel {
    flex: 0 0 auto;
    min-height: 0;
    height: auto;
    overflow: visible;
    display: flex;
    flex-direction: column;
    border-top: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.12);
  }

  .axis-palette-panel .axis-palette-title {
    flex: 0 0 auto;
    margin: 0;
    padding: 0.65rem 1rem 0.35rem;
  }

  .axis-palette-panel .axis-palette-strip,
  .axis-palette-panel .rotation-strip.axis-palette-strip {
    flex: 0 0 auto;
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: visible;
    margin: 0;
  }

  .axis-skill-library {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-height: 0;
    height: auto;
    overflow: visible;
  }

  .skill-type-tabs {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
    padding: 10px 16px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-bottom: 1px solid var(--border);
  }

  .skill-type-tabs::-webkit-scrollbar {
    display: none;
    height: 0;
  }

  .skill-type-tab {
    flex: 0 0 auto;
    padding: 5px 14px;
    border: 0;
    border-radius: 6px;
    font-size: 13px;
    white-space: nowrap;
    color: var(--text-muted, var(--muted));
    background: transparent;
    cursor: pointer;
    transition: color 150ms, background 150ms;
  }

  .skill-type-tab:hover {
    color: var(--text-primary);
    background: var(--hover-bg);
  }

  .skill-type-tab.active {
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
  }

  .skill-type-tab.is-special-tab.active {
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
  }

  .skill-type-tab.is-special-tab:not(.active) {
    color: var(--text-primary);
  }

  .skill-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    overflow: visible;
    flex: 0 0 auto;
    height: auto;
    min-height: 0;
    align-content: start;
  }

  .skill-card {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    width: max-content;
    max-width: 100%;
    margin: 0;
    padding: 8px 12px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    color: inherit;
    font: inherit;
    text-align: left;
    transition: background 150ms, border-color 150ms, transform 100ms, opacity 150ms;
  }

  .skill-card:hover {
    border-color: var(--border);
    filter: brightness(1.08);
  }

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

  .skill-card[data-type='普攻'] {
    border-left-color: var(--color-attack);
    background: var(--color-attack-bg);
  }
  .skill-card[data-type='重击'] {
    border-left-color: var(--color-heavy);
    background: var(--color-heavy-bg);
  }
  .skill-card[data-type='技能'] {
    border-left-color: var(--color-skill);
    background: var(--color-skill-bg);
  }
  .skill-card[data-type='变奏'] {
    border-left-color: var(--color-variation);
    background: var(--color-variation-bg);
  }
  .skill-card[data-type='延奏'] {
    border-left-color: var(--color-echo);
    background: var(--color-echo-bg);
  }
  .skill-card[data-type='声骸'] {
    border-left-color: var(--color-sonance);
    background: var(--color-sonance-bg);
  }

  .skill-card[data-type='普攻'] .skill-card-rate { color: var(--color-attack); }
  .skill-card[data-type='重击'] .skill-card-rate { color: var(--color-heavy); }
  .skill-card[data-type='技能'] .skill-card-rate { color: var(--color-skill); }
  .skill-card[data-type='变奏'] .skill-card-rate { color: var(--color-variation); }
  .skill-card[data-type='延奏'] .skill-card-rate { color: var(--color-echo); }
  .skill-card[data-type='声骸'] .skill-card-rate { color: var(--color-sonance); }

  .skill-card-name {
    font-size: 13px;
    color: var(--text-primary, var(--text));
    flex: 0 1 auto;
    white-space: nowrap;
  }

  .skill-card-rate {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    flex-shrink: 0;
    margin-left: 12px;
    font-variant-numeric: tabular-nums;
  }

  .skill-card.in-axis {
    opacity: 0.5;
  }

  .skill-card.in-axis::after {
    content: '✓';
    color: var(--accent);
    margin-left: 8px;
    flex-shrink: 0;
    font-size: 12px;
  }

  .axis-skill-library-hint {
    flex: 0 0 auto;
    margin: 0;
    padding: 8px 16px 12px;
    font-size: 11px;
    color: var(--text-muted, var(--muted));
    border-top: 1px solid var(--border);
  }

  .axis-palette-panel .axis-special-palette {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border);
  }

  .team-axis-board > .axis-merge-bar {
    margin: 0.45rem 1rem 0;
  }
  .axis-special-palette {
    margin-top: 0;
    padding-top: 0;
  }
  .axis-special-palette .axis-skill-library {
    border-top: 0;
  }
  .rotation-chip.is-special-lib {
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
  }
  .rotation-chip.is-special-lib:hover {
    border-color: var(--accent);
    background: #2a4a6b;
  }
  .axis-skill-chip.is-free.skill-node.is-special {
    box-shadow: inset 0 0 0 1px rgba(120, 180, 220, 0.35);
  }
  .catalog-special-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.05rem;
    height: 1.05rem;
    margin-left: 0.15rem;
    padding: 0 0.2rem;
    border-radius: 4px;
    font-size: 0.62rem;
    color: #b8d8f0;
    background: rgba(70, 120, 160, 0.35);
    border: 1px solid rgba(120, 180, 220, 0.45);
  }

  /* ?? ??? ?? */
  .check-panel { overflow: auto; }

  /* 计算检查页整体布局 */
  .calc-check-page {
    max-width: 1480px;
    margin: 0 auto;
    padding: 20px 24px 40px;
    box-sizing: border-box;
  }

  .calc-check-page .calc-section + .calc-section {
    margin-top: 20px;
  }

  .calc-check-page .calc-section-title {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--calc-secondary);
    margin: 0 0 12px;
    letter-spacing: 0.02em;
  }

  .calc-check-page .calc-section-title::before {
    content: none;
  }

  .calc-check-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 4px;
    background: transparent;
    border: none;
    border-radius: 0;
  }

  .calc-check-nav-btn {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--hover-bg);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
  }

  .calc-check-nav-btn:hover {
    color: var(--accent);
    border-color: rgba(var(--accent-rgb), 0.35);
    background: rgba(var(--accent-rgb), 0.08);
  }

  .calc-check-nav-current {
    font-size: 13px;
    font-weight: 700;
    color: var(--calc-primary);
    letter-spacing: 0.02em;
  }

  /* 计算检查页 · 顶部指标横幅 */
  .calc-check-page .calc-summary-bar,
  .check-panel > .calc-summary-bar {
    display: flex;
    gap: 2px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    margin: 0;
    box-shadow: var(--card-shadow);
  }

  .calc-check-page .calc-summary-item,
  .check-panel .calc-summary-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px;
    transition: background 150ms;
    min-width: 0;
  }

  .calc-check-page .calc-summary-item:hover,
  .check-panel .calc-summary-item:hover {
    background: var(--hover-bg);
  }

  .calc-check-page .calc-summary-item + .calc-summary-item,
  .check-panel .calc-summary-item + .calc-summary-item {
    border-left: 1px solid var(--border);
  }

  .calc-check-page .calc-summary-label,
  .check-panel .calc-summary-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 11px;
    color: var(--calc-muted);
    letter-spacing: 0.04em;
  }

  .calc-check-page .calc-summary-value,
  .check-panel .calc-summary-value {
    font-family: 'JetBrains Mono', var(--font-mono, ui-monospace, monospace);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    text-align: center;
    word-break: break-all;
  }

  .calc-check-page .calc-summary-unit,
  .check-panel .calc-summary-unit {
    margin-left: 0.12em;
    font-size: 0.72em;
    font-weight: 600;
    color: var(--calc-secondary);
  }

  .calc-check-page .calc-summary-item.is-total .calc-summary-value,
  .calc-check-page .calc-summary-item.total .calc-summary-value,
  .check-panel .calc-summary-item.is-total .calc-summary-value,
  .check-panel .calc-summary-item.total .calc-summary-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--accent);
    text-shadow: 0 0 24px rgba(var(--accent-rgb), 0.18);
  }

  .calc-check-page .calc-summary-item .round-tag,
  .check-panel .calc-summary-item .round-tag {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(212, 197, 160, 0.06);
    color: var(--calc-secondary);
    letter-spacing: 0;
    font-weight: 500;
  }

  .calc-check-page .calc-action-btn,
  .calc-check-page .results-tool-btn,
  .calc-check-page .calc-check-nav-btn,
  .check-panel .calc-action-btn {
    color: var(--calc-muted);
    background: var(--hover-bg);
    border: 1px solid var(--border);
  }

  .calc-check-page .calc-action-btn:hover,
  .calc-check-page .results-tool-btn:hover,
  .calc-check-page .calc-check-nav-btn:hover,
  .check-panel .calc-action-btn:hover {
    color: var(--calc-primary);
    background: var(--accent-bg);
    border-color: rgba(212, 197, 160, 0.16);
  }

  .calc-check-page .check-avatar-round,
  .check-panel .check-avatar-round {
    margin-top: 0.15rem;
    text-align: center;
  }

  .calc-check-page .check-scroll {
    max-width: 100%;
  }

  @media (max-width: 720px) {
    .calc-check-page {
      padding: 16px 12px;
    }

    .calc-check-nav {
      flex-wrap: wrap;
      justify-content: center;
    }

    .calc-check-page .calc-summary-bar,
    .check-panel > .calc-summary-bar {
      flex-wrap: wrap;
      gap: 0;
    }

    .calc-check-page .calc-summary-item,
    .check-panel .calc-summary-item {
      flex: 1 1 33.33%;
      padding: 12px 8px;
    }

    .calc-check-page .calc-summary-item + .calc-summary-item,
    .check-panel .calc-summary-item + .calc-summary-item {
      border-left: none;
    }

    .calc-check-page .calc-summary-item:nth-child(n + 4),
    .check-panel .calc-summary-item:nth-child(n + 4) {
      border-top: 1px solid var(--border);
    }

    .calc-check-page .calc-summary-item:not(:nth-child(3n + 1)),
    .check-panel .calc-summary-item:not(:nth-child(3n + 1)) {
      border-left: 1px solid var(--border);
    }

    .calc-check-page .calc-summary-value,
    .check-panel .calc-summary-value {
      font-size: 15px;
    }

    .calc-check-page .calc-summary-item.is-total .calc-summary-value,
    .calc-check-page .calc-summary-item.total .calc-summary-value,
    .check-panel .calc-summary-item.is-total .calc-summary-value,
    .check-panel .calc-summary-item.total .calc-summary-value {
      font-size: 18px;
    }
  }

  .check-cycle-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
  }
  .check-cycle-bar .cycle-round-tabs {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
  }
  .calc-check-page .check-cycle-pill.cycle-tab.cycle-round-tab {
    min-width: 0;
    padding: 8px 16px;
    border-radius: 8px;
    background: var(--hover-bg);
    border: 1px solid rgba(212, 197, 160, 0.1);
  }
  .calc-check-page .check-cycle-pill.cycle-tab.cycle-round-tab.active {
    background: rgba(212, 197, 160, 0.1);
    border-color: rgba(212, 197, 160, 0.35);
  }
  .calc-check-page .check-cycle-pill .cycle-tab-name {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--calc-primary);
  }

  .calc-check-page .calc-member-switch {
    margin: 0 0 12px;
    padding: 0;
    background: transparent;
    border: none;
  }
  .calc-check-page .calc-member-switch .member-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    overflow: visible;
  }
  .calc-check-page .calc-member-switch .member-tab {
    position: relative;
    min-width: 140px;
    height: 52px;
    margin-right: -28px;
    padding: 0 36px 0 28px;
    border: 1px solid rgba(212, 197, 160, 0.12);
    border-radius: 0;
    background: var(--surface);
    clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 1;
    box-shadow: none;
  }
  .calc-check-page .calc-member-switch .member-tab:first-child {
    padding-left: 22px;
    clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
  }
  .calc-check-page .calc-member-switch .member-tab:hover {
    z-index: 2;
    border-color: rgba(212, 197, 160, 0.28);
  }
  .calc-check-page .calc-member-switch .member-tab.active {
    z-index: 3;
    background: rgba(212, 197, 160, 0.12);
    border-color: rgba(212, 197, 160, 0.4);
    color: var(--calc-highlight);
  }
  .calc-check-page .calc-member-switch .member-tab .tab-name {
    font-size: 15px;
    font-weight: 600;
    color: inherit;
  }
  .calc-check-page .calc-member-switch .member-tab .tab-dmg {
    display: none;
  }

  .check-board {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  .check-board-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    min-height: 38px;
  }
  .check-board-identity {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .check-board-avatar {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 8px;
    overflow: hidden;
  }
  .check-board-avatar .char-avatar-card {
    width: 38px;
    height: 38px;
  }
  .check-board-identity-text {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    min-width: 0;
  }
  .check-board-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
  }
  .check-board-expect {
    font-size: 13px;
    color: var(--calc-secondary);
    font-variant-numeric: tabular-nums;
  }
  .check-board-expect strong {
    color: var(--calc-primary);
    font-weight: 700;
    font-family: var(--font-mono);
  }
  .check-zone-picker {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }
  .check-zone-picker select {
    min-width: 160px;
    height: 38px;
    padding: 0 28px 0 12px;
    border-radius: 8px;
    border: 1px solid rgba(212, 197, 160, 0.12);
    background: var(--surface);
    color: var(--calc-primary);
    font-size: 13px;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--calc-secondary) 50%),
      linear-gradient(135deg, var(--calc-secondary) 50%, transparent 50%);
    background-position: calc(100% - 14px) 16px, calc(100% - 9px) 16px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
  }
  .check-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
    flex-wrap: wrap;
  }
  .check-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--calc-secondary);
  }
  .check-legend-item i {
    display: block;
    width: 38px;
    height: 16px;
    border-radius: 3px;
  }
  .check-legend-item.is-dmg i { background: #d4c5a0; }
  .check-legend-item.is-zone i { background: #8fb4c9; }
  .check-legend-item.is-mult i { background: #e5c07b; }

  .check-side { display: none; }
  .check-scroll {
    overflow-x: auto;
    min-width: 0;
    border: 1px solid rgba(212, 197, 160, 0.1);
    border-radius: 10px;
    background: rgba(20, 18, 16, 0.92);
  }
  .check-grid {
    display: grid;
    gap: 0;
    width: max-content;
    min-width: 100%;
  }
  .check-corner {
    position: sticky;
    z-index: 4;
    background: var(--surface);
    border-right: 1px solid rgba(212, 197, 160, 0.08);
    border-bottom: 1px solid rgba(212, 197, 160, 0.08);
    padding: 0.55rem 0.5rem;
    font-size: 12px;
    font-weight: 600;
    color: var(--calc-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .check-corner-toggle { left: 0; min-width: 48px; max-width: 48px; }
  .check-corner-name { left: 48px; min-width: 128px; max-width: 128px; }
  .check-corner-cov { left: 176px; min-width: 88px; max-width: 88px; }
  .check-skill-head {
    border-bottom: 1px solid rgba(212, 197, 160, 0.08);
    border-right: 1px solid rgba(212, 197, 160, 0.08);
    padding: 8px 8px 10px;
    text-align: center;
    min-width: 100px;
    max-width: 120px;
    background: rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
    justify-content: center;
  }
  .check-skill-head.is-covered,
  .check-cell.is-covered {
    background: rgba(212, 197, 160, 0.14);
    box-shadow: inset 0 0 0 1px rgba(232, 220, 200, 0.28);
  }
  .check-skill-head.is-covered {
    background: rgba(212, 197, 160, 0.2);
  }
  .check-skill-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    order: -1;
    margin: 0 0 4px;
  }
  .check-skill-dmg {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    color: #d4c5a0;
    line-height: 1.25;
  }
  .check-zone-val {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    color: #8fb4c9;
    line-height: 1.25;
  }
  .check-final-mult {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: #e5c07b;
    margin-top: 0;
    line-height: 1.25;
  }
  .check-skill-head.not-linked { opacity: 0.55; }
  .check-skill-head .tag-miss {
    display: block;
    font-size: 0.62rem;
    color: var(--warn);
    margin-top: 0.15rem;
  }
  .check-section-toggle {
    position: sticky;
    left: 0;
    z-index: 3;
    appearance: none;
    border: 0;
    border-right: 1px solid rgba(212, 197, 160, 0.08);
    border-bottom: 1px solid rgba(212, 197, 160, 0.08);
    background: var(--surface);
    color: var(--calc-primary);
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    min-width: 48px;
    max-width: 48px;
  }
  .check-section-label {
    position: sticky;
    left: 48px;
    z-index: 2;
    background: var(--surface);
    border-right: 1px solid rgba(212, 197, 160, 0.08);
    border-bottom: 1px solid rgba(212, 197, 160, 0.08);
    padding: 0.55rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
  }
  .check-section-label .sec-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--calc-primary);
  }
  .check-section-label .sec-count {
    font-size: 11px;
    color: var(--calc-muted);
  }
  .check-section-desc {
    border-bottom: 1px solid rgba(212, 197, 160, 0.08);
    border-right: 1px solid rgba(212, 197, 160, 0.08);
    padding: 0.55rem 0.75rem;
    font-size: 12px;
    color: var(--calc-secondary);
    display: flex;
    align-items: center;
    background: var(--input-bg);
  }
  .check-buff-empty {
    position: sticky;
    left: 48px;
    z-index: 2;
    background: rgba(20, 18, 16, 0.98);
    border-right: 1px solid rgba(212, 197, 160, 0.08);
    border-bottom: 1px solid rgba(212, 197, 160, 0.08);
    padding: 0.45rem 0.6rem;
    color: var(--calc-muted);
    font-size: 12px;
  }
  .check-buff-toggle-cell,
  .check-buff-name-cell,
  .check-buff-cov-cell {
    position: sticky;
    z-index: 2;
    background: rgba(20, 18, 16, 0.98);
    border-right: 1px solid rgba(212, 197, 160, 0.08);
    border-bottom: 1px solid rgba(212, 197, 160, 0.08);
    display: flex;
    align-items: center;
    min-height: 48px;
  }
  .check-buff-toggle-cell {
    left: 0;
    justify-content: center;
    min-width: 48px;
    max-width: 48px;
  }
  .check-buff-name-cell {
    left: 48px;
    min-width: 128px;
    max-width: 128px;
    padding: 0.3rem 0.45rem;
  }
  .check-buff-cov-cell {
    left: 176px;
    min-width: 88px;
    max-width: 88px;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--calc-secondary);
  }
  .check-buff-toggle-cell.active,
  .check-buff-name-cell.active,
  .check-buff-cov-cell.active {
    background: rgba(212, 197, 160, 0.1);
  }
  .check-buff-toggle-cell.is-verified,
  .check-buff-name-cell.is-verified,
  .check-buff-cov-cell.is-verified,
  .check-cell.is-verified {
    background: rgba(72, 160, 110, 0.18);
  }
  .check-buff-toggle-cell input[data-check-buff-toggle] {
    width: 16px;
    height: 16px;
    accent-color: #d4a05a;
    cursor: pointer;
    margin: 0;
  }
  .check-buff-name,
  .check-buff-name-btn {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 13px;
    text-align: left;
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .check-buff-name:hover,
  .check-buff-name.active,
  .check-buff-name-btn:hover,
  .check-buff-name-cell.active .check-buff-name-btn {
    color: var(--calc-highlight);
  }
  .check-cell {
    border-right: 1px solid rgba(212, 197, 160, 0.08);
    border-bottom: 1px solid rgba(212, 197, 160, 0.08);
    min-width: 100px;
    max-width: 120px;
    text-align: center;
    padding: 0.55rem 0.25rem;
    font-size: 14px;
    color: var(--calc-secondary);
    background: transparent;
    appearance: none;
    cursor: default;
  }
  button.check-cell {
    cursor: pointer;
  }
  .check-cell.ok {
    color: #d4a05a;
    font-weight: 700;
  }
  .check-cell.off,
  .check-cell.no {
    color: var(--text-muted);
  }
  .check-cell.na {
    color: var(--calc-muted);
    font-weight: 500;
    font-size: 0.72rem;
  }
  button.check-cell {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 2rem;
    background: transparent;
    border-left: 0;
    border-top: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    font-weight: 700;
  }
  button.check-cell:hover {
    background: rgba(212, 197, 160, 0.1);
  }
  button.check-cell.off {
    color: var(--text-muted);
  }
  .check-buff-ctx {
    position: fixed;
    z-index: 90;
    min-width: 7.5rem;
    padding: 0.25rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  }
  .check-buff-ctx button {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    padding: 0.4rem 0.55rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.82rem;
  }
  .check-buff-ctx button:hover {
    background: rgba(72, 160, 110, 0.22);
    color: #8fd4a8;
  }
  body.check-verify-paint {
    cursor: cell;
  }
  body.check-verify-paint .check-buff-name-cell,
  body.check-verify-paint .check-buff-name-btn {
    cursor: cell;
  }
  .check-cell.is-covered.is-verified {
    background: rgba(72, 160, 110, 0.34);
    box-shadow: inset 0 0 0 1px rgba(143, 212, 168, 0.45);
  }
  .check-cell.mismatch {
    cursor: default;
    opacity: 0.75;
  }
  .check-empty {
    padding: 1rem;
    color: var(--muted);
    font-size: 0.84rem;
  }

  /* ?? ??? � Excel ???? ?? */
  .check-excel-panel {
    margin-top: 1.1rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--border);
  }
  .check-excel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
  }
  .check-excel-head h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
    color: var(--calc-primary);
  }
  .check-excel-scroll {
    overflow-x: auto;
    border: 1px solid rgba(212, 197, 160, 0.12);
    border-radius: 8px;
    background: rgba(20, 18, 16, 0.92);
  }
  .check-excel-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
  }
  .check-excel-table th,
  .check-excel-table td {
    border: 1px solid rgba(120, 130, 145, 0.35);
    padding: 0.28rem 0.45rem;
    white-space: nowrap;
    text-align: right;
  }
  .check-excel-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #c9a96e;
    color: #1a1a1a;
    font-weight: 700;
    text-align: center;
  }
  .check-excel-table .check-excel-type,
  .check-excel-table .check-excel-name {
    text-align: left;
  }
  .check-excel-table th:nth-child(1),
  .check-excel-table th:nth-child(2) {
    text-align: left;
  }
  .check-excel-row.is-accent .check-excel-type {
    background: rgba(45, 140, 130, 0.35);
  }
  .check-excel-row.is-exec .check-excel-type,
  .check-excel-row.is-effect .check-excel-type {
    background: rgba(70, 120, 160, 0.32);
  }
  .check-excel-row.is-unlinked {
    opacity: 0.55;
  }
  .check-excel-total {
    font-weight: 650;
    color: var(--result, #e8c070);
  }
  .check-excel-crit {
    font-weight: 650;
    color: #f0a060;
  }
  .check-excel-na,
  .check-excel-empty {
    text-align: center !important;
    color: var(--muted);
    font-weight: 500;
  }
  .check-excel-empty {
    padding: 0.85rem !important;
  }

  /* 左侧阶段导航 */
  .app-sidenav,
  .workspace-phase-rail {
    position: fixed;
    left: 0;
    top: var(--app-topbar-height);
    bottom: 0;
    width: var(--phase-rail-width);
    z-index: 50;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0 1.5rem;
    box-sizing: border-box;
    background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg) 100%);
    border-right: 1px solid var(--border);
    overflow-x: hidden;
    overflow-y: auto;
  }

  [data-theme="pure-white"] .app-sidenav,
  [data-theme="pure-white"] .workspace-phase-rail,
  [data-theme="mist-jade"] .app-sidenav,
  [data-theme="mist-jade"] .workspace-phase-rail {
    background: var(--surface);
  }

  #workspacePhaseBar[hidden] .app-sidenav,
  #workspacePhaseBar[hidden] .workspace-phase-rail {
    display: none;
  }

  .app-sidenav-main,
  .workspace-phase-rail .phase-switch {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
  }

  /* 导航项之间：小型菱形分隔 */
  .app-sidenav-main > .app-sidenav-item:not(:last-child),
  .workspace-phase-rail .phase-switch > .app-sidenav-item:not(:last-child),
  .workspace-phase-rail .phase-switch > .workspace-phase-btn:not(:last-child) {
    margin-bottom: 2px;
  }

  .app-sidenav-main > .app-sidenav-item:not(:last-child)::after,
  .workspace-phase-rail .phase-switch > .app-sidenav-item:not(:last-child)::after,
  .workspace-phase-rail .phase-switch > .workspace-phase-btn:not(:last-child)::after {
    content: "◆";
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    font-size: 0.42rem;
    line-height: 1;
    color: rgba(var(--accent-rgb), 0.38);
    pointer-events: none;
    z-index: 1;
  }

  .app-sidenav-item,
  .workspace-phase-rail .workspace-phase-btn {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    font-family: "DM Sans", "Noto Sans SC", sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.02em;
    padding: 10px 12px 14px;
    cursor: pointer;
    line-height: 1.3;
    box-shadow: none;
    transition: color 0.2s ease;
    min-width: 0;
  }

  .app-sidenav-item > span,
  .workspace-phase-rail .workspace-phase-btn > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-sidenav-item .nav-term,
  .workspace-phase-rail .workspace-phase-btn .nav-term {
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 0.02em;
  }

  .app-sidenav-item .app-sidenav-icon,
  .workspace-phase-rail .workspace-phase-btn .app-sidenav-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke-width: 1.5;
    color: inherit;
  }

  .app-sidenav-item:hover:not(:disabled):not(.active),
  .workspace-phase-rail .workspace-phase-btn:hover:not(:disabled):not(.active) {
    color: #c8c8c8;
    background: transparent;
    transform: none;
    box-shadow: none;
  }

  .app-sidenav-item.active,
  .workspace-phase-rail .workspace-phase-btn.active {
    background: transparent;
    color: var(--text-primary)fff;
    box-shadow: none;
  }

  .app-sidenav-item.active::before,
  .workspace-phase-rail .workspace-phase-btn.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 2px;
    border-radius: 1px;
    background: #c9a96e;
  }

  .app-sidenav-item:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }

  .app-sidenav-foot {
    position: relative;
    margin-top: auto;
    padding-top: 0.65rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .app-sidenav-foot::before {
    content: "◆";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.42rem;
    line-height: 1;
    color: rgba(126, 184, 201, 0.35);
    pointer-events: none;
  }

  .app-sidenav-mascot {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 0 0.25rem 0.2rem;
    pointer-events: none;
  }

  .app-sidenav-mascot img {
    width: 128px;
    height: auto;
    max-width: calc(100% - 4px);
    border-radius: 0;
    display: block;
    object-fit: contain;
    user-select: none;
    background: transparent;
  }

  @media (max-width: 1100px) {
    .app-topbar {
      padding: 0 1rem;
    }
  }

  .workspace-phase-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.85rem;
    padding: 0.45rem 0.55rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
  }

  .workspace-phase-hint {
    font-size: 0.74rem;
    color: var(--muted);
    margin: 0;
    flex: 1;
    min-width: 12rem;
  }

  /* ??????????????????? */
  .workspace-phase-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.85rem;
    padding: 0.45rem 0.55rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
  }

  .workspace-phase-bar .phase-switch {
    display: inline-flex;
    gap: 0.3rem;
    padding: 0.2rem;
    border-radius: 9px;
    background: var(--surface2);
    border: 1px solid var(--border);
  }

  .workspace-phase-btn {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.38rem 0.85rem;
    border-radius: 7px;
    cursor: pointer;
  }

  .workspace-phase-btn.active {
    background: #243a55;
    color: var(--accent2);
  }

  .export-page h3 {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    color: var(--accent2);
  }

  .export-section {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
  }

  .export-section:first-of-type {
    margin-top: 0.35rem;
    padding-top: 0;
    border-top: 0;
  }

  .export-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.55rem;
    margin: 0.65rem 0 0.85rem;
  }

  .export-summary > div {
    padding: 0.55rem 0.65rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface2);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  .export-summary .muted {
    font-size: 0.72rem;
    color: var(--muted);
  }

  .export-summary strong {
    font-size: 1rem;
    color: var(--result);
  }

  .export-data-summary h4 {
    margin: 0 0 0.45rem;
    font-size: 0.88rem;
    color: var(--accent);
  }

  .export-team-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
    margin: 0.55rem 0 0.65rem;
  }

  .export-team-bar-item {
    text-align: left;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    border-radius: 8px;
    padding: 0.45rem 0.55rem;
    cursor: pointer;
  }

  .export-team-bar-item.active {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(91, 159, 212, 0.28);
  }

  .export-team-bar-item .row-top {
    display: flex;
    justify-content: space-between;
    gap: 0.35rem;
    font-size: 0.78rem;
  }

  .export-team-bar-item .bar-track {
    height: 6px;
    margin: 0.35rem 0;
    border-radius: 99px;
    background: var(--surface-2);
    overflow: hidden;
  }

  .export-team-bar-item .bar-fill {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: #5b9fd4;
  }

  .export-team-bar-item .bar-fill.slot-1 { background: #98c379; }
  .export-team-bar-item .bar-fill.slot-2 { background: #e5c07b; }

  .export-team-bar-item .row-badges {
    font-size: 0.7rem;
    color: var(--muted);
  }

  .export-team-special {
    grid-column: 1 / -1;
    margin: 0;
  }

  .export-summary-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.65rem;
  }

  .export-summary-tab {
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--muted);
    border-radius: 7px;
    padding: 0.32rem 0.75rem;
    font-weight: 600;
    cursor: pointer;
  }

  .export-summary-tab.active {
    background: #243a55;
    color: var(--accent2);
    border-color: var(--accent);
  }

  .export-summary-main {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .export-summary-main .panel-inner {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface2);
    padding: 0.65rem 0.75rem;
  }

  .export-pie-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: flex-start;
  }

  .export-pie-legend {
    flex: 1;
    min-width: 9rem;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
  }

  .export-pie-legend-row {
    display: grid;
    grid-template-columns: 0.7rem 1fr auto;
    gap: 0.35rem;
    align-items: center;
    font-size: 0.74rem;
  }

  .export-pie-legend-row .swatch {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 2px;
  }

  .export-pie-legend-row .val {
    color: var(--result);
    font-variant-numeric: tabular-nums;
  }

  .export-summary-loadout .loadout-line {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.82rem;
    padding: 0.22rem 0;
    border-bottom: 1px solid rgba(45, 63, 90, 0.55);
  }

  .export-summary-loadout .loadout-line .result {
    color: var(--result);
  }

  .echo-sub-sim {
    margin-top: 0.25rem;
  }

  .echo-sub-sim-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    margin: 0.55rem 0 0.65rem;
  }

  .echo-sub-sim-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
    gap: 0.45rem;
    margin-bottom: 0.75rem;
  }

  .echo-sub-sim-metrics > div {
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface2);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }

  .echo-sub-sim-metrics .muted {
    font-size: 0.7rem;
    color: var(--muted);
  }

  .echo-sub-sim-metrics strong {
    font-size: 0.95rem;
  }

  .echo-sub-sim-metrics strong.up {
    color: var(--result);
  }

  .echo-sub-sim-metrics strong.down {
    color: #c45c5c;
  }

  .echo-sub-sim-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    margin: 0.35rem 0 0.75rem;
  }

  .echo-sub-sim-matrix {
    display: grid;
    gap: 0.35rem 0.4rem;
    align-items: center;
    margin: 0.35rem 0 0.65rem;
    padding: 0.45rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface2);
  }

  .echo-sub-sim-corner {
    font-size: 0.68rem;
  }

  .echo-sub-sim-colhead {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent2);
    text-align: center;
  }

  .echo-sub-sim-colhead-add {
    min-height: 1em;
  }

  .echo-sub-sim-cat {
    display: contents;
  }

  .echo-sub-sim-cat-head {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
  }

  .echo-sub-sim-cat-head strong {
    font-size: 0.8rem;
    color: var(--accent2);
  }

  .echo-sub-sim-cat-head .muted {
    font-size: 0.66rem;
    line-height: 1.25;
  }

  .echo-sub-sim-cell {
    min-height: 1.7rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0.15rem;
  }

  .echo-sub-sim-cell.empty {
    color: var(--muted);
    font-size: 0.75rem;
    text-align: center;
    opacity: 0.55;
  }

  .echo-sub-sim-chip {
    padding: 0.2rem 0.25rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    cursor: context-menu;
  }

  .echo-sub-sim-chip select {
    font-size: 0.74rem;
    width: 100%;
    max-width: none;
    padding: 0.1rem 0.15rem;
  }

  .echo-sub-sim-add {
    min-width: 1.8rem;
    padding: 0.15rem 0.35rem;
    justify-self: center;
  }

  .echo-sub-sim-add-cat {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.65rem;
    font-size: 0.8rem;
  }

  .echo-sub-sim-add-cat select {
    font-size: 0.78rem;
    max-width: 9rem;
  }

  .echo-sub-sim-ctx {
    position: fixed;
    z-index: 80;
    min-width: 7rem;
    padding: 0.25rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  }

  .echo-sub-sim-ctx button {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
    padding: 0.4rem 0.55rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.82rem;
  }

  .echo-sub-sim-ctx button:hover {
    background: var(--surface2);
    color: #e07070;
  }

  .echo-sub-sim-margins {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    margin: 0.35rem 0 0.75rem;
    font-size: 0.78rem;
    color: var(--muted);
  }

  .echo-sub-sim-margins span strong {
    color: var(--text);
    font-weight: 600;
  }

  .echo-sub-sim-rec {
    margin: 0.35rem 0;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface2);
    font-size: 0.82rem;
  }

  .echo-sub-sim-rec .rec-gain {
    color: var(--result);
    font-weight: 700;
  }

  .echo-sub-sim-rec ol {
    margin: 0.35rem 0 0;
    padding-left: 1.1rem;
  }

  .export-cfg-compare {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
  }

  .export-cfg-compare > h4 {
    margin: 0 0 0.35rem;
  }

  .export-cfg-live {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    margin: 0.55rem 0 0.65rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface2);
  }

  .export-cfg-live-main {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.45rem 0.75rem;
    font-size: 0.82rem;
  }

  .export-cfg-live-main .cfg-live-label {
    font-size: 1rem;
    color: var(--accent2);
    font-variant-numeric: tabular-nums;
  }

  .export-cfg-live-preview {
    overflow-x: auto;
  }

  .export-cfg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.76rem;
  }

  .export-cfg-table th,
  .export-cfg-table td {
    border: 1px solid var(--border);
    padding: 0.35rem 0.45rem;
    text-align: left;
    vertical-align: middle;
  }

  .export-cfg-table th {
    background: var(--surface2);
    color: var(--muted);
    font-weight: 600;
    white-space: nowrap;
  }

  .export-cfg-table .cfg-short {
    color: var(--muted);
    font-size: 0.7rem;
    font-variant-numeric: tabular-nums;
  }

  .export-cfg-table .cfg-avg-tag {
    display: inline-block;
    margin-left: 0.3rem;
    padding: 0.02rem 0.28rem;
    border-radius: 3px;
    font-size: 0.62rem;
    color: var(--accent2);
    border: 1px solid rgba(91, 159, 212, 0.4);
    vertical-align: middle;
  }

  .export-cfg-table .cfg-special-cell {
    min-width: 6.5rem;
    vertical-align: top;
  }

  .export-cfg-table .cfg-special-detail {
    margin-top: 0.2rem;
    font-size: 0.66rem;
    color: var(--muted);
    line-height: 1.35;
  }

  .export-cfg-table .result {
    color: var(--result);
    font-variant-numeric: tabular-nums;
  }

  .export-cfg-table tr.cfg-live-row td {
    background: rgba(91, 159, 212, 0.08);
  }

  .export-cfg-table tr.cfg-dim td {
    opacity: 0.55;
  }

  .export-cfg-table tr.cfg-baseline td {
    background: rgba(152, 195, 121, 0.08);
  }

  .export-cfg-table .cfg-check {
    width: 2rem;
    text-align: center;
  }

  .export-cfg-table .cfg-label-input {
    width: min(11rem, 100%);
    padding: 0.2rem 0.35rem;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.76rem;
  }

  .export-cfg-table .tag-baseline {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    color: #98c379;
    border: 1px solid rgba(152, 195, 121, 0.45);
  }

  .export-cfg-note {
    margin: 0.45rem 0 0;
  }

  .export-gate-table-wrap {
    margin-bottom: 0.75rem;
    overflow-x: auto;
  }

  .export-gate-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.76rem;
  }

  .export-gate-table th,
  .export-gate-table td {
    border: 1px solid var(--border);
    padding: 0.35rem 0.45rem;
    text-align: left;
    vertical-align: top;
  }

  .export-gate-table th {
    background: var(--surface2);
    color: var(--muted);
    font-weight: 600;
  }

  .export-gate-table tr.locked td {
    color: var(--muted);
    opacity: 0.75;
  }

  .export-sweep-block {
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface2);
    padding: 0.65rem 0.75rem;
  }

  .export-sweep-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    margin-bottom: 0.45rem;
  }

  .export-sweep-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.75rem;
  }

  .export-sweep-svg {
    display: block;
    background: var(--surface);
    border-radius: 6px;
    border: 1px solid var(--border);
  }

  .export-chart-axis {
    fill: var(--muted);
    font-size: 10px;
  }

  .export-chart-tag {
    fill: #e5c07b;
    font-size: 11px;
    font-weight: 700;
  }

  .export-sweep-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    margin-top: 0.35rem;
    font-size: 0.72rem;
    color: var(--muted);
  }

  .export-sweep-legend .lg {
    display: inline-block;
    width: 0.85rem;
    height: 0.2rem;
    margin-right: 0.25rem;
    vertical-align: middle;
    border-radius: 2px;
  }

  .export-sweep-legend .lg.member { background: #5b9fd4; }
  .export-sweep-legend .lg.team {
    background: repeating-linear-gradient(90deg, #e5c07b 0 3px, transparent 3px 6px);
  }

  @media (max-width: 900px) {
    .export-team-strip,
    .export-summary-main {
      grid-template-columns: 1fr;
    }
  }

  .export-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.55rem 0.75rem;
    margin-bottom: 0.75rem;
  }

  .export-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
  }

  .export-scheme-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.55rem 0.75rem;
    margin: 0.65rem 0 0.55rem;
  }

  .export-scheme-library {
    margin-top: 0.35rem;
  }

  .tag-soon {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    color: #f5c896;
    border: 1px solid rgba(232, 148, 58, 0.45);
    background: rgba(232, 148, 58, 0.12);
    vertical-align: middle;
  }

  .export-card-preview {
    margin-top: 0.65rem;
    padding: 0.85rem;
    border-radius: 12px;
    border: 1px dashed var(--border);
    background: linear-gradient(180deg, #152030 0%, #101820 100%);
  }

  .export-card-preview-title {
    text-align: center;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 0.55rem;
  }

  .export-card-preview-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.35rem 0.65rem;
    font-size: 0.75rem;
    color: var(--muted);
    margin-bottom: 0.75rem;
  }

  .export-card-preview-meta .share {
    color: var(--accent2);
  }

  .export-card-preview-chars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
  }

  .export-card-char-slot {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface2);
    min-height: 9.5rem;
    display: flex;
    flex-direction: column;
  }

  .export-card-char-slot .portrait-ph {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 0.78rem;
    background: var(--hover-bg);
    min-height: 5.5rem;
  }

  .export-card-char-slot .char-tags {
    padding: 0.25rem 0.45rem;
    font-size: 0.72rem;
  }

  .export-card-char-slot .char-out {
    padding: 0.3rem 0.45rem 0.45rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--result);
  }

  .export-card-preview-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1.25rem;
    margin-top: 0.75rem;
    font-weight: 700;
    color: var(--accent2);
  }

  @media (max-width: 720px) {
    .export-card-preview-chars {
      grid-template-columns: 1fr;
    }
  }

  .setup-workspace {
    min-width: 0;
    max-width: var(--setup-main-max-width);
    width: 100%;
  }

  .setup-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    align-items: start;
  }

  @media (max-width: 1200px) {
    .setup-columns { grid-template-columns: 1fr; }
  }

  .setup-col { min-width: 0; }

  .setup-aside-card {
    position: sticky;
    top: 0.75rem;
  }

  .setup-dmg-line {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-bottom: 0.75rem;
  }

  .setup-dmg-line .label { font-size: 0.78rem; color: var(--muted); }
  .setup-dmg-line .value {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--result);
  }

  .rotation-build-summary {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 0.75rem;
  }

  .rotation-build-summary .summary-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
  }

  .rotation-build-summary .summary-row .muted { color: var(--muted); }

  .buff-drawer-root {
    position: fixed;
    inset: 0;
    z-index: 70;
    pointer-events: none;
  }

  .buff-drawer-root:empty { display: none; }

  .buff-drawer-backdrop {
    pointer-events: none;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity 200ms ease;
  }

  .buff-drawer-backdrop.open {
    pointer-events: auto;
    opacity: 1;
  }

  .buff-tab-trigger {
    pointer-events: auto;
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    padding: 16px 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-right: none;
    border-radius: 8px 0 0 8px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted, var(--muted));
    cursor: pointer;
    transition: color 200ms, background 200ms, box-shadow 200ms;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-family: inherit;
    letter-spacing: 0.12em;
  }

  .buff-tab-trigger:hover {
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.06);
  }

  .buff-tab-trigger.active {
    color: var(--accent);
    background: var(--surface);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
  }

  .buff-tab-trigger-text {
    display: inline-block;
  }

  .buff-drawer {
    pointer-events: none;
    position: fixed;
    right: 28px;
    top: 50%;
    transform: translateY(-50%) translateX(calc(100% + 40px));
    width: var(--drawer-w, 380px);
    min-width: 280px;
    max-width: min(480px, calc(100vw - 48px));
    height: 70vh;
    max-height: 70vh;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 32px var(--shadow);
    z-index: 49;
    display: flex;
    flex-direction: column;
    transition: transform 250ms ease;
    overflow: hidden;
  }

  .buff-drawer.open {
    pointer-events: auto;
    transform: translateY(-50%) translateX(0);
  }

  .buff-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }

  .buff-drawer-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
  }

  .buff-drawer-close {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 100ms;
    background: transparent;
    border: none;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    font-family: inherit;
  }

  .buff-drawer-close:hover {
    background: var(--accent-bg);
    color: var(--text-primary);
  }

  .buff-type-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    padding: 10px 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    min-width: 0;
  }

  .buff-type-tabs::-webkit-scrollbar {
    display: none;
  }

  .buff-type-tab {
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    flex: 0 0 auto;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 150ms;
    border: 1px solid transparent;
    background: transparent;
    font-family: inherit;
    line-height: 1.3;
  }

  .buff-type-tab:hover {
    color: var(--text-primary);
    background: var(--hover-bg);
  }

  .buff-type-tab.active {
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
    border-color: rgba(var(--accent-rgb), 0.2);
  }

  .buff-drawer-resize {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: col-resize;
    z-index: 2;
  }

  .buff-drawer-resize:hover {
    background: rgba(var(--accent-rgb), 0.2);
  }

  .buff-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  }

  .buff-drawer-body::-webkit-scrollbar {
    width: 6px;
  }

  .buff-drawer-body::-webkit-scrollbar-track {
    background: transparent;
  }

  .buff-drawer-body::-webkit-scrollbar-thumb {
    background: var(--hover-bg);
    border-radius: 3px;
  }

  .buff-drawer-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .buff-drawer-footer-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }

  .buff-drawer-footer-actions .buff-add-cat-select {
    width: 100%;
    height: 28px;
    padding: 0 8px;
    background: var(--hover-bg);
    border: 1px solid var(--input-border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 12px;
    font-family: inherit;
  }

  .buff-drawer-footer .add-buff-btn {
    width: 100%;
    padding: 10px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: all 150ms;
    font-family: inherit;
  }

  .buff-drawer-footer .add-buff-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.05);
  }

  .buff-drawer-footer .buff-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin: 8px 0 0;
    line-height: 1.5;
  }

  .buff-drawer-footer .buff-hint .keyword {
    color: var(--text-primary);
    font-weight: 500;
  }

  .buff-drawer-body .empty-state {
    text-align: center;
    padding: 24px 16px;
    color: var(--text-muted);
    font-size: 13px;
  }

  .buff-drawer-body .panel,
  .buff-drawer-body .buff-drawer-panel {
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  .buff-cat-tag,
  .buff-category-tag {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    color: var(--text-muted);
    background: var(--hover-bg);
    border: none;
    border-radius: 4px;
    padding: 2px 8px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .buff-add-cat-select {
    min-width: 7.5rem;
    max-width: 100%;
    font-size: 0.75rem;
  }

  .panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.1rem 1.2rem;
    box-shadow: var(--card-shadow);
    transition: border-color var(--ease-ui), box-shadow var(--ease-ui), transform var(--ease-ui), background-color 300ms ease;
  }

  .panel + .panel { margin-top: 1.1rem; }

  .panel h2 {
    font-family: var(--font-display);
    font-size: 0.98rem;
    color: var(--text-title);
    margin-bottom: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-shadow:
      1px 0 0 rgba(var(--accent-rgb), 0.22),
      -1px 0 0 rgba(var(--accent-rgb), 0.22),
      0 1px 0 rgba(var(--accent-rgb), 0.22),
      0 -1px 0 rgba(var(--accent-rgb), 0.22);
  }

  .panel h3 {
    font-size: 0.8rem;
    color: var(--muted);
    margin: 0.85rem 0 0.45rem;
    font-weight: 600;
  }

  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem 0.7rem;
  }

  .field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }

  .field.full { grid-column: 1 / -1; }

  label {
    font-size: 0.74rem;
    color: var(--muted);
  }

  input[type="number"], input[type="text"] {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface2);
    color: var(--text);
    font-size: 0.86rem;
  }

  input:focus {
    outline: none;
    border-color: var(--accent);
  }

  .hint { font-size: 0.7rem; color: var(--muted); margin-top: 0.35rem; }

  .btn {
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface2);
    color: var(--text);
    font-size: 0.78rem;
    cursor: pointer;
    transition: border-color var(--ease-ui), color var(--ease-ui), box-shadow var(--ease-ui), transform var(--ease-ui), background var(--ease-ui);
  }

  .btn:hover {
    border-color: rgba(var(--accent-rgb), 0.45);
    color: var(--accent-bright);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.12);
  }
  .btn.primary {
    background: var(--chip-gradient);
    border-color: rgba(var(--accent-rgb), 0.4);
    color: var(--brand);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.1);
  }
  .btn.danger:hover { border-color: var(--danger); color: var(--danger); }
  .btn.sm { padding: 0.2rem 0.45rem; font-size: 0.72rem; }
  .btn.icon { padding: 0.2rem 0.4rem; min-width: 1.6rem; }

  .buff-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.65rem;
    padding-left: 0.1rem;
  }

  .buff-tab {
    padding: 0.3rem 0.58rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface2);
    font-size: 0.76rem;
    color: var(--muted);
    cursor: pointer;
  }

  .buff-tab.active {
    border-color: rgba(91, 159, 212, 0.55);
    color: var(--accent2);
    background: rgba(91, 159, 212, 0.1);
  }

  .buff-tab.tone-general {
    border-color: rgba(120, 195, 130, 0.42);
    color: #8ecf98;
  }

  .buff-tab.tone-general.active {
    border-color: rgba(130, 210, 140, 0.85);
    color: #c8f5ce;
    background: rgba(90, 175, 100, 0.22);
  }

  .buff-tab.tone-type {
    border-color: rgba(95, 175, 215, 0.45);
    color: #7ebfe0;
  }

  .buff-tab.tone-type.active {
    border-color: rgba(110, 190, 230, 0.9);
    color: #b8e8ff;
    background: rgba(70, 155, 205, 0.24);
  }

  .sidebar-tabs {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid var(--border);
  }

  .sidebar-tab {
    flex: 1;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface2);
    font-size: 0.78rem;
    color: var(--muted);
    cursor: pointer;
    text-align: center;
  }

  .sidebar-tab.active {
    border-color: var(--accent);
    color: var(--accent2);
    background: #243a55;
  }

  .buff-group-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.6rem;
    padding: 0.45rem 0.5rem;
    border-radius: 10px;
    border: 1px solid rgba(232, 148, 58, 0.32);
    background: rgba(232, 148, 58, 0.07);
  }

  .buff-group-tab {
    padding: 0.4rem 0.78rem;
    border-radius: 8px;
    border: 1px solid rgba(232, 148, 58, 0.48);
    background: rgba(232, 148, 58, 0.14);
    font-size: 0.8rem;
    font-weight: 600;
    color: #f5c896;
    cursor: pointer;
  }

  .buff-group-tab:hover {
    border-color: rgba(245, 170, 90, 0.75);
    color: #ffe2bc;
  }

  .buff-group-tab.active {
    border-color: #e8943a;
    color: var(--text-primary);
    background: linear-gradient(180deg, #c76b22 0%, #a85518 100%);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
  }

  .sidebar-footer {
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--border);
  }

  .save-status {
    font-size: 11px;
    color: color-mix(in srgb, var(--text-muted) 45%, transparent);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
  }

  .save-status .save-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4aff8a;
    flex-shrink: 0;
  }

  .save-status.is-error .save-dot {
    background: #ff6b6b;
  }

  .save-status #saveStatus {
    color: inherit;
  }

  .save-status-action {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0 2px;
    margin: 0;
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 150ms;
  }

  .save-status-action:hover {
    color: var(--text-muted);
  }

  .save-status-action.danger:hover {
    color: #ff6b6b;
  }

  .sidebar-scheme-dock {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
  }

  .sidebar-scheme-dock .scheme-panel {
    margin-bottom: 0;
  }

  .sidebar-scheme-dock .scheme-library {
    max-height: 220px;
  }

  .buff-list { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }

  .buff-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 64px 72px auto;
    gap: 0.4rem;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .buff-source-prefix {
    flex: 0 0 auto;
    color: var(--accent, #7eb8ff);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
  }

  .buff-name-field {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    width: 100%;
  }

  .buff-name-field > input[type='text'] {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }

  .buff-item > .buff-name-field {
    min-width: 0;
  }

  .matrix-buff-head .buff-source-prefix {
    display: block;
    font-size: 0.65rem;
    line-height: 1.1;
    margin-bottom: 0.1rem;
    font-weight: 600;
    color: var(--accent, #7eb8ff);
  }

  .buff-item > input[type='text'] {
    min-width: 0;
    width: 100%;
  }

  .buff-item > input[type='number'],
  .buff-item > .buff-mode-select {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .buff-item.has-extra {
    grid-template-columns: minmax(0, 1fr) minmax(4.5rem, 84px) 64px 72px auto;
  }

  .buff-item.has-extra.has-extra-duo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 11rem) minmax(3.5rem, 4rem) minmax(3.5rem, 4.5rem) auto;
  }

  .buff-item.buff-item-compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      'name actions'
      'meta meta';
    gap: 0.35rem 0.4rem;
    align-items: center;
  }

  .buff-item.buff-item-compact:has(> .buff-cat-tag) {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      'tag name actions'
      'meta meta meta';
  }

  .buff-item.buff-item-compact > .buff-cat-tag {
    grid-area: tag;
  }

  .buff-item:has(> .buff-cat-tag):not(.buff-item-compact) {
    grid-template-columns: auto minmax(0, 1fr) 64px 72px auto;
  }

  .buff-item.has-extra:has(> .buff-cat-tag):not(.buff-item-compact) {
    grid-template-columns: auto minmax(0, 1fr) minmax(4.5rem, 84px) 64px 72px auto;
  }

  .buff-item.has-extra.has-extra-duo:has(> .buff-cat-tag):not(.buff-item-compact) {
    grid-template-columns: auto minmax(0, 1fr) minmax(0, 11rem) minmax(3.5rem, 4rem) minmax(3.5rem, 4.5rem) auto;
  }

  .buff-item.buff-item-compact > input[type='text'],
  .buff-item.buff-item-compact > .buff-name-field {
    grid-area: name;
    width: 100%;
    min-width: 0;
  }

  .buff-item.buff-item-compact > .btn {
    grid-area: actions;
    align-self: center;
  }

  .buff-item.buff-item-compact > .buff-meta-row {
    grid-area: meta;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5.25rem, 1fr));
    gap: 0.35rem;
    align-items: center;
    min-width: 0;
  }

  .buff-item.buff-item-compact .buff-meta-row .dmg-type-select,
  .buff-item.buff-item-compact .buff-meta-row .buff-mode-select,
  .buff-item.buff-item-compact .buff-meta-row input[type='number'] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Tab 抽屉：Buff 紧凑卡片条目 */
  .buff-drawer-body .buff-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .buff-drawer-body .buff-entry {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    grid-template-columns: none;
    grid-template-areas: none;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    min-width: 0;
    box-sizing: border-box;
  }

  /* 色条只表示来源类型；不按 Buff 分类改底色 */
  .buff-drawer-body .buff-entry[data-source='本体'] {
    border-left-color: #4a9eff;
  }

  .buff-drawer-body .buff-entry[data-source='全队'] {
    border-left-color: #c084fc;
  }

  .buff-drawer-body .buff-entry[data-source='武器'] {
    border-left-color: #2dd4bf;
  }

  .buff-drawer-body .buff-entry[data-source='声骸'] {
    border-left-color: #ff6b6b;
  }

  .buff-drawer-body .buff-entry[data-source='套装'] {
    border-left-color: #ffd93d;
  }

  .buff-drawer-body .buff-entry.is-stack,
  .buff-drawer-body .buff-entry.stack-def,
  .buff-drawer-body .buff-entry.composite-buff-editor {
    background: var(--input-bg);
  }

  .color-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }

  .color-legend .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 150ms, color 150ms;
    background: transparent;
    border: 0;
    font-family: inherit;
    line-height: 1.3;
  }

  .color-legend .legend-item:hover {
    background: var(--hover-bg);
  }

  .color-legend .legend-item.active {
    background: var(--accent-bg);
    color: var(--text-primary);
  }

  .color-legend .legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex-shrink: 0;
    display: inline-block;
  }

  .buff-drawer-body .buff-entry.is-dimmed {
    opacity: 0.28;
    filter: grayscale(0.35);
  }

  .buff-drawer-body .buff-entry.is-highlighted {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  }

  .buff-drawer-body .buff-category-tag,
  .buff-drawer-body .buff-cat-tag {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--text-muted);
    background: var(--hover-bg);
    border: none;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
  }

  .buff-drawer-body .buff-entry .team-buff-tag,
  .buff-drawer-body .buff-entry .team-buff-tag--weapon,
  .buff-drawer-body .buff-entry .team-buff-tag--echo,
  .buff-drawer-body .buff-entry .team-buff-tag--set {
    color: var(--text-muted);
    background: var(--hover-bg);
    border: 1px solid var(--border);
  }

  .buff-drawer-body .buff-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    gap: 8px;
    min-width: 0;
  }

  .buff-drawer-body .buff-entry-title {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
    margin-right: 4px;
  }

  .buff-drawer-body .source-tag,
  .buff-drawer-body .buff-source-tag,
  .buff-drawer-body .buff-source-prefix {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--hover-bg);
    padding: 1px 6px;
    border-radius: 3px;
    white-space: nowrap;
  }

  .buff-drawer-body .buff-entry-name,
  .buff-drawer-body .buff-entry-header input.buff-entry-name,
  .buff-drawer-body .buff-entry-header input.buff-name {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: 26px;
    margin: 0;
    padding: 0 4px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .buff-drawer-body .buff-entry-name:hover,
  .buff-drawer-body .buff-entry-name:focus {
    border-color: var(--text-muted);
    background: var(--hover-bg);
    outline: none;
  }

  .buff-drawer-body .buff-entry-name[readonly] {
    cursor: default;
    opacity: 0.92;
  }

  .buff-drawer-body .delete-btn,
  .buff-drawer-body .buff-entry-delete {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    opacity: 0.5;
    cursor: pointer;
    transition: all 100ms;
    background: transparent;
    border: none;
    flex: 0 0 auto;
    padding: 0;
    margin: 0;
    font-size: 16px;
    line-height: 1;
    font-family: inherit;
  }

  .buff-drawer-body .delete-btn:hover:not(:disabled),
  .buff-drawer-body .buff-entry-delete:hover:not(:disabled) {
    opacity: 1;
    background: rgba(255, 80, 80, 0.12);
    color: #ff5050;
  }

  .buff-drawer-body .delete-btn:disabled,
  .buff-drawer-body .buff-entry-delete:disabled {
    opacity: 0.25;
    cursor: not-allowed;
  }

  .buff-drawer-body .buff-entry-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
  }

  .buff-drawer-body .type-select,
  .buff-drawer-body .buff-entry-controls .dmg-type-select,
  .buff-drawer-body .buff-entry-controls .buff-mode-select {
    height: 28px;
    padding: 0 8px;
    background: var(--hover-bg);
    border: 1px solid var(--input-border);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 12px;
    min-width: 60px;
    max-width: 100%;
    box-sizing: border-box;
    font-family: inherit;
  }

  .buff-drawer-body .value-input,
  .buff-drawer-body .buff-entry-controls input.buff-entry-value[type='number'] {
    width: 56px;
    height: 28px;
    padding: 0 4px;
    background: var(--hover-bg);
    border: 1px solid var(--input-border);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    box-sizing: border-box;
  }

  .buff-drawer-body .value-input:focus,
  .buff-drawer-body .buff-entry-controls input.buff-entry-value[type='number']:focus,
  .buff-drawer-body .type-select:focus {
    border-color: var(--accent);
    outline: none;
  }

  .buff-extra-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-width: 0;
    max-width: 100%;
  }

  .buff-extra-fields .dmg-type-select {
    flex: 1 1 4.5rem;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  .buff-item.stack-def {
    grid-template-columns: minmax(0, 1fr) 64px 64px auto;
  }

  .buff-item.stack-def.has-extra {
    grid-template-columns: minmax(0, 1fr) minmax(4.5rem, 84px) 64px 64px auto;
  }

  .buff-item.stack-def.has-extra.has-extra-duo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 11rem) minmax(3.5rem, 4rem) minmax(3.5rem, 4rem) auto;
  }

  .buff-item.convergence-def {
    grid-template-columns: 1fr 5rem 5rem auto;
  }

  .buff-item.composite-buff-editor {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    padding: 0.5rem 0.55rem;
    grid-template-columns: none;
  }

  .composite-buff-main {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
  }

  .composite-buff-main > input[type='text'],
  .composite-buff-main > .buff-name-field {
    flex: 1 1 8rem;
    min-width: 6rem;
  }

  .composite-hint {
    margin: 0;
    font-size: 0.72rem;
  }

  .composite-effects {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  .composite-effect-card {
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.4rem;
    background: rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  .composite-effect-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
  }

  .composite-effect-head select {
    max-width: 100%;
  }

  .composite-skill-names input {
    width: 100%;
  }

  .composite-segs {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .composite-seg-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
  }

  .composite-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.78rem;
    color: var(--muted);
  }

  .composite-inline input[type='number'] {
    width: 4.2rem;
  }

  .buff-defaults {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.6rem;
    margin-top: 0.5rem;
  }

  .buff-defaults.buff-zone-list-wrap {
    display: block;
  }

  .buff-zone-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    width: 100%;
  }

  .buff-zone {
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.06);
  }

  .buff-zone-title {
    padding: 0.4rem 0.65rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--accent2);
    background: rgba(0, 0, 0, 0.18);
    border-bottom: 1px solid var(--border);
  }

  .buff-zone-body {
    padding: 0.5rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .buff-cat-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.55rem;
  }

  .buff-cat-label {
    font-size: 0.82rem;
    color: var(--muted);
    min-width: 5rem;
    flex-shrink: 0;
  }

  .buff-cat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.55rem;
    flex: 1;
    min-width: 0;
  }

  .buff-cat-chips .chip.stack-chip {
    flex-wrap: nowrap;
    gap: 0.3rem;
  }

  .buff-toggle-row .buff-zone-list {
    margin-top: 0.15rem;
  }

  .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.86rem;
    line-height: 1.4;
    color: var(--muted);
    cursor: default;
  }

  .chip .chip-check-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
  }

  .chip .buff-source-prefix {
    font-size: 0.78rem;
    line-height: 1.2;
  }

  .chip input { accent-color: var(--accent); }

  .chip.stack-chip { gap: 0.3rem; flex-wrap: wrap; }
  input.stack-input,
  input[type="number"].stack-input {
    width: 2.85rem;
    min-width: 2.85rem;
    max-width: 2.85rem;
    padding: 0.2rem 0.25rem;
    font-size: 0.86rem;
    text-align: center;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    -moz-appearance: textfield;
    flex: 0 0 auto;
  }
  input.stack-input::-webkit-outer-spin-button,
  input.stack-input::-webkit-inner-spin-button,
  input[type="number"].stack-input::-webkit-outer-spin-button,
  input[type="number"].stack-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .stack-result { color: var(--accent2); font-weight: 600; font-size: 0.86rem; }

  /* Buff ??? / ?????????????? */
  .setup-panel-buff,
  .setup-panel-buff-stats {
    font-size: 0.95rem;
  }
  .setup-panel-buff h2,
  .setup-panel-buff-stats h2 {
    font-size: 1.08rem;
    margin-bottom: 0.85rem;
  }
  .setup-panel-buff .hint,
  .setup-panel-buff-stats .hint {
    font-size: 0.84rem;
    line-height: 1.5;
    margin-top: 0.45rem;
  }
  .setup-panel-buff-stats .buff-zone-list {
    gap: 0.75rem;
  }
  .setup-panel-buff-stats .buff-zone-body {
    padding: 0.55rem 0.7rem;
    gap: 0.55rem;
  }

  /* Buff 统计：核心数据总览条（≤5 均分；>5 每格 20% 宽，底部细滚动条横滑） */
  .stats-overview-bar {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    padding: 0 0 2px;
    height: auto;
    min-width: 0;
    margin-bottom: 16px;
    background: var(--hover-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb), 0.45) var(--scrollbar-track);
  }

  .stats-overview-bar::-webkit-scrollbar {
    height: 5px;
  }

  .stats-overview-bar::-webkit-scrollbar-track {
    margin: 0 8px 2px;
    background: var(--hover-bg);
    border-radius: 999px;
  }

  .stats-overview-bar::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.45);
    border-radius: 999px;
  }

  .stats-overview-bar:not(.is-overflow)::-webkit-scrollbar {
    height: 0;
  }

  .stats-overview-bar:not(.is-overflow) {
    scrollbar-width: none;
  }

  .stats-overview-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    margin: 0;
    padding: 14px 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background 150ms;
    min-width: 0;
    overflow: hidden;
    height: auto;
  }

  /* 超出 5 条：固定占位 1/5 宽，其余滑出视口 */
  .stats-overview-bar.is-overflow .stats-overview-item {
    flex: 0 0 20%;
    min-width: 20%;
    max-width: 20%;
    box-sizing: border-box;
  }

  .stats-overview-item.is-compact {
    padding: 14px 10px;
  }

  .stats-overview-item:hover {
    background: var(--hover-bg);
  }

  .stats-overview-item + .stats-overview-item {
    border-left: 1px solid var(--border);
  }

  .stats-overview-label {
    font-size: 11px;
    color: var(--text-muted, var(--muted));
    white-space: nowrap;
    margin-bottom: 0;
    line-height: 1.2;
  }

  .stats-overview-main,
  .stats-overview-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--stat-accent, var(--accent));
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  .stats-overview-item[data-buff-stat-overview='deep'] .stats-overview-main,
  .stats-overview-item[data-buff-stat-overview='deep'] .stats-overview-value {
    color: var(--color-deepen);
  }
  .stats-overview-item[data-buff-stat-overview='bonus'] .stats-overview-main,
  .stats-overview-item[data-buff-stat-overview='bonus'] .stats-overview-value {
    color: var(--color-buff);
  }
  .stats-overview-item[data-buff-stat-overview='critDmg'] .stats-overview-main,
  .stats-overview-item[data-buff-stat-overview='critDmg'] .stats-overview-value,
  .stats-overview-item[data-buff-stat-overview='crit'] .stats-overview-main,
  .stats-overview-item[data-buff-stat-overview='crit'] .stats-overview-value {
    color: var(--color-crit);
  }
  .stats-overview-item[data-buff-stat-overview='def'] .stats-overview-main,
  .stats-overview-item[data-buff-stat-overview='def'] .stats-overview-value {
    color: var(--color-defense);
  }
  .stats-overview-item[data-buff-stat-overview='vuln'] .stats-overview-main,
  .stats-overview-item[data-buff-stat-overview='vuln'] .stats-overview-value {
    color: var(--color-vulnerable);
  }
  .stats-overview-item[data-buff-stat-overview='atk'] .stats-overview-main,
  .stats-overview-item[data-buff-stat-overview='atk'] .stats-overview-value {
    color: var(--color-attack);
  }
  .stats-overview-item[data-buff-stat-overview='mult'] .stats-overview-main,
  .stats-overview-item[data-buff-stat-overview='mult'] .stats-overview-value {
    color: var(--color-skill);
  }
  .stats-overview-item[data-buff-stat-overview='harmony'] .stats-overview-main,
  .stats-overview-item[data-buff-stat-overview='harmony'] .stats-overview-value {
    color: var(--color-resonance);
  }
  .stats-overview-item[data-buff-stat-overview='composite'] .stats-overview-main,
  .stats-overview-item[data-buff-stat-overview='composite'] .stats-overview-value {
    color: var(--color-composite);
  }

  .stat-card-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .stat-card {
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--stat-accent, var(--color-defense));
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
    transition: border-color 600ms ease, box-shadow 600ms ease;
  }

  .stat-card[data-type='倍率'] {
    border-left-color: var(--color-skill);
    background: var(--color-skill-bg);
  }
  .stat-card[data-type='加深'] {
    border-left-color: var(--color-deepen);
    background: var(--color-deepen-bg);
  }
  .stat-card[data-type='增伤'] {
    border-left-color: var(--color-buff);
    background: var(--color-buff-bg);
  }
  .stat-card[data-type='暴伤'],
  .stat-card[data-type='双暴'] {
    border-left-color: var(--color-crit);
    background: var(--color-crit-bg);
  }
  .stat-card[data-type='防御'] {
    border-left-color: var(--color-defense);
    background: var(--color-defense-bg);
  }
  .stat-card[data-type='易伤'] {
    border-left-color: var(--color-vulnerable);
    background: var(--color-vulnerable-bg);
  }
  .stat-card[data-type='谐幅'] {
    border-left-color: var(--color-resonance);
    background: var(--color-resonance-bg);
  }
  .stat-card[data-type='复合'] {
    border-left-color: var(--color-composite);
    background: var(--color-composite-bg);
  }
  .stat-card[data-type='攻击力'] {
    border-left-color: var(--color-attack);
    background: var(--color-attack-bg);
  }

  .stat-card.is-flash {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(var(--accent-rgb), 0.35);
  }

  .stat-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }

  .stat-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, var(--text));
    min-width: 0;
  }

  .stat-card-total {
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--stat-accent, var(--accent));
    font-variant-numeric: tabular-nums;
  }

  .stat-card-sources {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .stat-card .stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    min-width: 0;
  }

  .stat-card .stat-item + .stat-item {
    border-top: 1px dashed var(--border);
  }

  .stat-card .stat-item.is-off {
    opacity: 0.55;
  }

  .stat-card .stat-item-left {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
  }

  .stat-card .stat-item-check {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
  }

  .stat-card .type-tag {
    flex-shrink: 0;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent);
    white-space: nowrap;
  }

  .stat-card .source-tag {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--text-muted, var(--muted));
    background: var(--hover-bg);
    padding: 1px 6px;
    border-radius: 3px;
    white-space: nowrap;
  }

  .stat-card .stat-item-name {
    font-size: 13px;
    color: var(--text-primary, var(--text));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  .stat-card .stat-item-right {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
  }

  .stat-card .stat-item-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--stat-accent, var(--accent));
    white-space: nowrap;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
  }

  .stat-card .stat-item-value .stack-count {
    font-weight: 400;
    color: var(--text-muted, var(--muted));
  }

  .stat-card .expand-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    margin-top: 4px;
    padding: 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-size: 12px;
    color: var(--text-muted, var(--muted));
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease;
  }

  .stat-card .expand-toggle:hover {
    color: var(--text-primary, var(--text));
    background: var(--hover-bg);
  }

  .stat-card .expand-toggle svg,
  .stat-card .expand-toggle__chevron {
    flex: 0 0 auto;
    transition: transform 200ms ease;
  }

  .stat-card .expand-toggle.expanded svg,
  .stat-card .expand-toggle.expanded .expand-toggle__chevron {
    transform: rotate(180deg);
  }

  .stat-card .stat-detail {
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    border-top: 1px solid transparent;
    transition: max-height 300ms ease, padding 300ms ease, border-color 300ms ease;
  }

  .stat-card .stat-detail.expanded {
    max-height: 500px;
    padding-top: 8px;
    border-top-color: var(--border);
  }

  .stat-card .stat-detail__hint {
    margin: 0 0 8px;
    font-size: 11px;
    color: var(--text-muted, var(--muted));
  }

  .stat-card .stat-item.is-overview .stat-item-check {
    display: none;
  }

  .setup-panel-buff-stats.is-stat-cards .buff-zone[data-buff-zone='stack-hub'] {
    border-color: var(--border);
    border-radius: 10px;
    background: var(--input-bg);
  }
  .buff-stack-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.55rem;
    padding: 0.45rem 0.55rem;
    margin-bottom: 0.45rem;
    background: rgba(91, 159, 212, 0.06);
    border-radius: 6px;
    border: 1px dashed rgba(91, 159, 212, 0.35);
  }
  .buff-mode-select {
    font-size: 0.72rem;
    padding: 0.2rem 0.3rem;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
  }

  .timeline {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .phase,
  .phase-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 0;
    overflow: hidden;
    min-width: 0;
  }

  .phase-header,
  .phase-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 150ms ease;
    flex-wrap: wrap;
    background: transparent;
  }

  .phase-header:hover,
  .phase-head:hover {
    background: var(--input-bg);
  }

  .phase-collapse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    color: var(--text-muted);
  }

  .phase-collapse-btn:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
  }

  .phase-collapse-icon {
    display: block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    font-size: 10px;
    color: var(--text-muted);
    transition: transform 200ms ease;
    flex-shrink: 0;
  }

  .phase-card.collapsed .phase-collapse-icon {
    transform: rotate(-90deg);
  }

  .phase-card.collapsed .phase-header,
  .phase-card.collapsed .phase-head {
    border-bottom-color: transparent;
  }

  .phase-name,
  .phase-head input.phase-name,
  .phase-head input[type='text'][data-phase-name] {
    flex: 0 1 auto;
    min-width: 96px;
    max-width: 180px;
    height: 28px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, var(--text));
    cursor: text;
  }

  .phase-name:hover,
  .phase-head input.phase-name:hover {
    border-color: var(--border);
    background: var(--hover-bg);
  }

  .phase-name:focus,
  .phase-head input.phase-name:focus {
    outline: none;
    border-color: rgba(var(--accent-rgb), 0.45);
    background: var(--hover-bg);
  }

  .phase-lock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-muted);
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--hover-bg);
    border: none;
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .phase-lock:hover {
    color: var(--text-primary, var(--text));
    background: var(--accent-bg);
  }

  .phase-lock.locked {
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
  }

  .phase-header .phoebe-phase-mode,
  .phase-head .phoebe-phase-mode {
    flex-shrink: 0;
    max-width: 110px;
    height: 28px;
    font-size: 12px;
  }

  .phase-buff-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    text-align: left;
    pointer-events: none;
  }

  .phase-layer-overview {
    border-bottom: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.06);
  }

  .layer-overview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 16px;
    cursor: pointer;
    border: none;
    background: transparent;
    color: inherit;
    font-family: inherit;
    text-align: left;
  }

  .layer-overview-header:hover {
    background: var(--input-bg);
  }

  .layer-overview-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, var(--text));
  }

  .layer-overview-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  .layer-overview-collapse {
    font-size: 12px;
    color: var(--text-muted);
  }

  .phase-layer-overview-body {
    padding: 0 16px 12px;
  }

  .phase-layer-overview-body[hidden] {
    display: none !important;
  }

  .phase-layer-overview-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }

  .layer-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    border-radius: 16px;
    background: var(--hover-bg);
    border: 1px solid var(--border);
  }

  .layer-chip .chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--border-strong);
  }

  .layer-chip[data-source='本体'] .chip-dot,
  .layer-chip[data-source='模态'] .chip-dot {
    background: #4a9eff;
  }
  .layer-chip[data-source='武器'] .chip-dot { background: #2dd4bf; }
  .layer-chip[data-source='声骸'] .chip-dot { background: #ff6b6b; }
  .layer-chip[data-source='套装'] .chip-dot { background: #ffd93d; }
  .layer-chip[data-source='全队'] .chip-dot { background: #c084fc; }

  .layer-chip .chip-name {
    font-size: 12px;
    color: var(--text-muted);
    max-width: 7em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .layer-chip .chip-counter {
    display: inline-flex;
    align-items: center;
    gap: 2px;
  }

  .layer-step-btn {
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: var(--hover-bg);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .layer-step-btn:hover {
    background: var(--border-strong);
    color: var(--text-primary, var(--text));
  }

  .layer-step-input {
    width: 2.2rem;
    min-width: 2.2rem;
    height: 20px;
    padding: 0 2px;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
    color: var(--text-primary, var(--text));
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
    font-weight: 700;
    text-align: center;
  }

  .layer-step-input:focus {
    outline: none;
    border-color: rgba(var(--accent-rgb), 0.45);
  }

  .matrix-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border);
  }

  .matrix-toolbar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .matrix-toolbar-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, var(--text));
    white-space: nowrap;
  }

  .matrix-toolbar .mode-select {
    height: 28px;
    font-size: 12px;
    max-width: 120px;
  }

  .select-all-btn {
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 6px;
    color: var(--text-muted);
    background: var(--hover-bg);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease;
    font-family: inherit;
    flex-shrink: 0;
  }

  .select-all-btn:hover:not(:disabled) {
    color: var(--text-primary, var(--text));
    background: var(--accent-bg);
  }

  .select-all-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .phase-batch-buff-panel .buff-matrix-wrap {
    margin-top: 0;
    padding: 0 16px 12px;
  }

  .phase-batch-matrix .matrix-header-buff {
    cursor: help;
  }

  .buff-summary-tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--hover-bg);
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .buff-summary-tag .count {
    font-weight: 700;
    color: var(--text-primary, var(--text));
    font-variant-numeric: tabular-nums;
  }

  .phase-hint {
    font-size: 11px;
    color: var(--text-muted);
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    margin-left: auto;
  }

  .phase-card.locked .phase-hint {
    color: rgba(var(--accent-rgb), 0.45);
  }

  .phase-subtotal {
    margin-left: 0;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 15px;
    font-weight: 700;
    color: var(--accent);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .phase-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
  }

  .phase-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 100ms ease, background 100ms ease;
    background: transparent;
    border: none;
    font-size: 14px;
    line-height: 1;
    padding: 0;
  }

  .phase-action-btn:hover {
    background: var(--accent-bg);
    color: var(--text-primary, var(--text));
  }

  .phase-action-btn.danger:hover {
    color: #ff5050;
    background: rgba(255, 80, 80, 0.12);
  }

  .phase-body {
    max-height: 0;
    overflow: hidden;
    padding: 0;
    transition: max-height 300ms ease;
  }

  .phase-card.expanded .phase-body {
    max-height: 12000px;
  }

  .phase-body-inner {
    padding: 0 0 12px;
  }

  .phase-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.08);
  }

  .phase-footer-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
  }

  .phase-footer-btn {
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--hover-bg);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
    font-family: inherit;
  }

  .phase-footer-btn:hover {
    background: var(--accent-bg);
    color: var(--text-primary, var(--text));
  }

  .phase-footer-btn.danger:hover {
    color: #ff5050;
    border-color: rgba(255, 80, 80, 0.2);
    background: rgba(255, 80, 80, 0.08);
  }

  .phase-footer-subtotal {
    display: inline-flex;
    align-items: baseline;
    flex-shrink: 0;
    margin-left: auto;
  }

  .phase-subtotal-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-right: 8px;
  }

  .phase-subtotal-value {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 16px;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
  }

  .buff-overview-empty {
    font-size: 12px;
  }

  .attr-tag {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(var(--accent-rgb), 0.08);
    color: var(--accent);
    flex-shrink: 0;
    white-space: nowrap;
  }

  .phase-stack-popover {
    width: 200px;
  }

  .phase-body-inner > .phase-batch-buff-panel {
    margin: 0;
  }

  .phase-skill-list {
    border-bottom: 1px solid var(--border);
  }

  .phase-skill-list-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px 4px;
  }

  .phase-skill-list-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, var(--text));
  }

  .phase-skill-list-hint {
    font-size: 11px;
    margin: 0;
  }

  .phase-body-inner > .timeline-head,
  .phase-skill-list > .timeline-head,
  .phase-body-inner > .skill-group,
  .phase-body-inner > .empty-hint,
  .phase-skill-list > .empty-hint {
    margin-left: 16px;
    margin-right: 16px;
  }

  .phase-skill-list > .timeline-head {
    margin-top: 4px;
  }

  .phase-skill-list > .skill-group {
    margin-left: 0;
    margin-right: 0;
  }

  .phase-lock-tag {
    font-size: 0.72rem;
    color: var(--accent2);
    white-space: nowrap;
  }

  .add-phase-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-top: 4px;
    padding: 14px;
    border: 1px dashed var(--dashed-border);
    border-radius: 12px;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
  }

  .add-phase-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.04);
  }

  .buff-toggle-row {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.45rem 0.55rem;
    margin-bottom: 0.45rem;
    background: var(--surface);
    border-radius: 6px;
    border: 1px dashed var(--border);
  }

  .buff-toggle-row.inherit {
    border-style: solid;
    opacity: 0.75;
  }

  .inherit-label {
    font-size: 0.72rem;
    color: var(--warn);
    width: 100%;
    margin-bottom: 0.15rem;
  }

  .timeline-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin-bottom: 0;
    font-size: 0.7rem;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
  }

  .timeline-head > span:first-child {
    flex: 1;
    min-width: 120px;
  }

  .timeline-head > span:nth-child(2) {
    width: 132px;
    flex-shrink: 0;
  }

  .timeline-head > span:nth-child(3) {
    width: 96px;
    flex-shrink: 0;
  }

  .timeline-head.has-hybrid-mode > span:nth-child(4) {
    width: 118px;
    flex-shrink: 0;
  }

  .timeline-head > span:nth-last-child(2) {
    margin-left: auto;
    min-width: 110px;
  }

  .timeline-head > span:last-child {
    width: 120px;
    flex-shrink: 0;
  }

  .timeline-head.split-hint {
    display: flex;
  }

  .mult-input { min-width: 72px; }

  .char-picker { margin-bottom: 0.75rem; }
  .char-picker-toolbar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-bottom: 0.55rem;
  }
  .char-picker-meta { font-size: 0.72rem; color: var(--muted); flex: 1; min-width: 120px; }
  .char-picker-meta.error { color: var(--warn); }
  .char-filter-label {
    font-size: 0.78rem;
    color: var(--muted);
    margin-bottom: 0.35rem;
  }

  .palette-section {
    margin-bottom: 0.5rem;
  }

  .palette-section-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
  }

  .palette-section-header .char-filter-label {
    margin-bottom: 0;
    flex: 1;
  }

  .catalog-section-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    margin-top: 0.5rem;
    margin-bottom: 0.35rem;
    width: max-content;
    max-width: 100%;
  }
  .catalog-section-header .char-filter-label {
    margin-bottom: 0;
    margin-right: 0;
  }
  .catalog-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    justify-content: flex-start;
    width: max-content;
    max-width: 100%;
  }

  .catalog-toolbar.axis-toolbar,
  .axis-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 0;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
  }

  .axis-toolbar .toolbar-btn {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-primary, var(--text));
    background: var(--hover-bg);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 150ms;
    font-family: inherit;
    line-height: 1.3;
  }

  .axis-toolbar .toolbar-btn:hover:not(:disabled) {
    background: var(--accent-bg);
  }

  .axis-toolbar .toolbar-btn.primary {
    background: var(--accent);
    color: #000;
    border-color: var(--accent);
    font-weight: 600;
  }

  .axis-toolbar .toolbar-btn.primary:hover:not(:disabled) {
    background: var(--accent-bright, var(--accent));
    filter: brightness(1.05);
  }

  .axis-toolbar .toolbar-btn.toggle-active {
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--accent);
    border-color: rgba(var(--accent-rgb), 0.25);
  }

  .axis-toolbar .toolbar-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .axis-toolbar .toolbar-divider {
    width: 1px;
    height: 20px;
    background: var(--accent-bg);
    flex-shrink: 0;
    align-self: center;
  }

  .axis-toolbar .toolbar-more {
    position: relative;
  }

  .axis-toolbar .toolbar-more-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px;
    min-width: 140px;
    box-shadow: 0 8px 24px var(--shadow);
    z-index: 30;
  }

  .axis-toolbar .toolbar-more.open .toolbar-more-menu {
    display: block;
  }

  .axis-toolbar .toolbar-more-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border-radius: 6px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-family: inherit;
    color: var(--text-primary, var(--text));
    cursor: pointer;
    transition: background 100ms;
  }

  .axis-toolbar .toolbar-more-item:hover:not(:disabled) {
    background: var(--hover-bg);
  }

  .axis-toolbar .toolbar-more-item:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .palette-section-body.collapsed {
    display: none;
  }
  .char-element-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.55rem;
  }
  .char-element-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--hover-bg);
    color: var(--muted);
    font-size: 0.72rem;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, color 0.15s;
  }
  .char-element-tab:hover { border-color: rgba(184, 146, 255, 0.45); color: var(--text); }
  .char-element-tab.active {
    color: var(--text);
    border-color: rgba(184, 146, 255, 0.75);
    box-shadow: 0 0 0 1px rgba(184, 146, 255, 0.35), 0 0 12px rgba(184, 146, 255, 0.18);
    background: rgba(184, 146, 255, 0.08);
  }
  .char-element-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--text-primary);
    flex-shrink: 0;
  }
  .char-avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 0.5rem;
    max-height: 320px;
    overflow-y: auto;
    padding: 0.15rem;
  }
  .char-avatar-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.28rem;
    padding: 0.32rem 0.24rem 0.28rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface2);
    cursor: pointer;
    transition: border-color var(--ease-ui), background var(--ease-ui), box-shadow var(--ease-ui), transform var(--ease-ui);
  }
  .char-avatar-btn:hover {
    border-color: rgba(var(--accent-rgb), 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28), 0 0 14px rgba(201, 169, 110, 0.1);
  }
  .char-avatar-btn.active {
    border-color: transparent;
    background:
      linear-gradient(var(--surface2), var(--surface2)) padding-box,
      var(--accent-gradient) border-box;
    border: 1px solid transparent;
    box-shadow: 0 0 16px rgba(201, 169, 110, 0.16);
    transform: scale(1.02);
  }
  .char-avatar-wrap {
    position: relative;
    width: 100%;
  }
  .char-avatar-card {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-2);
    border: 1px solid rgba(58, 85, 120, 0.55);
  }
  .char-avatar-card .char-avatar-portrait {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
  }
  .char-avatar-fallback {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    z-index: 0;
  }
  .char-avatar-card .char-avatar-badge {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: rgba(10, 16, 28, 0.82);
    object-fit: contain;
    padding: 1px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    z-index: 2;
  }
  .char-avatar-badge.element { top: 3px; right: 3px; }
  .char-avatar-badge.weapon { bottom: 3px; right: 3px; background: rgba(0, 0, 0, 0.72); }
  .char-avatar-rank {
    position: absolute;
    top: 3px;
    left: 3px;
    font-size: 0.48rem;
    color: #f0c674;
    line-height: 1;
    background: rgba(10, 16, 28, 0.72);
    border-radius: 4px;
    padding: 1px 3px;
    z-index: 1;
  }
  .char-avatar-name {
    font-size: 0.62rem;
    color: var(--muted);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
  }
  .char-avatar-btn.active .char-avatar-name { color: var(--accent2); }

  .weapon-picker { margin-bottom: 0.75rem; }
  .weapon-picker-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin-bottom: 0.5rem;
  }
  .weapon-picker-meta {
    font-size: 0.72rem;
    color: var(--muted);
    flex: 1;
    min-width: 120px;
    line-height: 1.4;
  }
  .weapon-picker-meta.error { color: var(--warn); }

  .weapon-grid-manual {
    margin-bottom: 0.55rem;
  }

  .weapon-rarity-section {
    margin: 0.55rem 0 0.75rem;
    padding-top: 0.45rem;
    border-top: 1px solid var(--border);
  }

  .weapon-rarity-section:first-of-type {
    margin-top: 0.25rem;
  }

  .weapon-rarity-head {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    margin-bottom: 0.4rem;
  }

  .weapon-rarity-head strong {
    font-size: 0.85rem;
    color: var(--accent2);
  }

  .weapon-rarity-section.rarity-5 .weapon-rarity-head strong {
    color: #e6c35c;
  }

  .weapon-rarity-section.rarity-4 .weapon-rarity-head strong {
    color: #b892ff;
  }

  .weapon-rarity-head .muted {
    font-size: 0.72rem;
    color: var(--muted);
  }

  .weapon-search {
    width: 100%;
    margin-bottom: 0.5rem;
    padding: 0.42rem 0.55rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    font-size: 0.82rem;
  }
  .weapon-search:focus {
    outline: none;
    border-color: rgba(184, 146, 255, 0.55);
    box-shadow: 0 0 0 1px rgba(184, 146, 255, 0.25);
  }
  .weapon-selected-panel {
    margin-bottom: 0.55rem;
    padding: 0.55rem 0.6rem;
    border-radius: 10px;
    border: 1px solid rgba(184, 146, 255, 0.45);
    background: rgba(184, 146, 255, 0.06);
    box-shadow: 0 0 0 1px rgba(184, 146, 255, 0.12);
  }
  .weapon-selected-head {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
  }
  .weapon-selected-icon {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(36, 44, 68, 0.95) 0%, rgba(16, 20, 32, 0.98) 100%);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
  }
  .weapon-selected-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
  }
  .weapon-selected-info { flex: 1; min-width: 0; }
  .weapon-selected-title {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
  }
  .weapon-rank {
    font-size: 0.72rem;
    color: #e6c04a;
    font-weight: 700;
    margin-left: 0.15rem;
  }
  .weapon-selected-stats {
    margin-top: 0.2rem;
    font-size: 0.72rem;
    color: var(--muted);
    line-height: 1.35;
  }
  .weapon-ref-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
  }
  .weapon-ref-label {
    font-size: 0.72rem;
    color: var(--muted);
    margin-right: 0.1rem;
  }
  .weapon-ref-tab {
    min-width: 2.1rem;
    padding: 0.22rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--hover-bg);
    color: var(--muted);
    font-size: 0.72rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
  }
  .weapon-ref-tab:hover { border-color: var(--accent); color: var(--text); }
  .weapon-ref-tab.active {
    border-color: rgba(184, 146, 255, 0.75);
    color: var(--text);
    background: rgba(184, 146, 255, 0.12);
  }
  .weapon-effect-box {
    margin-top: 0.45rem;
    padding: 0.45rem 0.5rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--border);
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--muted);
    max-height: 4.5em;
    overflow-y: auto;
  }
  /* TEMPORARY: ???????? */
  .weapon-audit-panel {
    margin-top: 0.55rem;
    padding: 0.5rem 0.55rem;
    border-radius: 8px;
    border: 1px dashed rgba(210, 160, 80, 0.45);
    background: rgba(40, 32, 18, 0.45);
  }
  .weapon-audit-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.35rem 0.75rem;
    font-size: 0.78rem;
  }
  .weapon-audit-block {
    margin-top: 0.45rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--border);
  }
  .weapon-audit-block:first-of-type { border-top: 0; padding-top: 0.15rem; }
  .weapon-audit-head {
    color: #f5c896;
    font-weight: 600;
    font-size: 0.74rem;
    margin-bottom: 0.15rem;
  }
  .weapon-audit-src {
    font-size: 0.7rem;
    color: var(--muted);
    line-height: 1.4;
    margin-bottom: 0.15rem;
  }
  .weapon-audit-fx {
    font-size: 0.72rem;
    line-height: 1.4;
  }
  .weapon-audit-fx.applied { color: #8fd4a8; }
  .weapon-audit-fx.pending { color: #e8a060; }
  .weapon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 0.45rem;
    max-height: 280px;
    overflow-y: auto;
    padding: 0.12rem;
  }
  .weapon-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface2);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    min-height: 0;
    overflow: hidden;
  }
  .weapon-card:hover { border-color: var(--accent); }
  .weapon-card.active {
    border-color: var(--accent);
    background: rgba(184, 146, 255, 0.1);
    box-shadow: 0 0 0 1px rgba(184, 146, 255, 0.35);
  }
  .weapon-card.manual {
    justify-content: center;
    align-items: center;
    padding: 0.5rem 0.35rem;
    color: var(--muted);
    font-size: 0.74rem;
  }
  .weapon-card-icon {
    position: relative;
    width: 100%;
    height: 76px;
    border-radius: 0;
    background: linear-gradient(180deg, rgba(36, 44, 68, 0.95) 0%, rgba(16, 20, 32, 0.98) 100%);
    border: none;
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .weapon-card-icon > img:first-of-type {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px 4px 10px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
  }
  .weapon-card-fallback {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 0.72rem;
    color: var(--muted);
  }
  .weapon-card-type {
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.65);
  }
  .weapon-card-name {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding: 0.32rem 0.28rem 0.12rem;
  }
  .weapon-card-meta {
    font-size: 0.62rem;
    color: #e6c04a;
    line-height: 1.2;
    text-align: center;
    padding: 0 0.28rem 0.35rem;
    letter-spacing: 0.02em;
  }
  .rotation-item input[data-catalog-mult] {
    font-size: 0.76rem;
    padding: 0.22rem 0.3rem;
    min-width: 0;
    width: 100%;
  }

  .mult-count-cell {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    min-width: 0;
  }

  .mult-count-cell .mult-input[readonly] {
    opacity: 0.75;
    cursor: default;
    background: rgba(0, 0, 0, 0.04);
  }
  .mult-count-cell .mult-input {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
  }

  .mult-count-cell .mult-count-input {
    flex: 0 0 2.4rem;
    width: 2.4rem;
    min-width: 2.4rem;
    padding: 0.28rem 0.15rem;
    text-align: center;
    font-size: 0.78rem;
  }

  .mult-count-x {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1;
  }

  .mult-count-chip {
    margin-left: 0.1rem;
    color: var(--accent2);
    font-size: 0.85em;
  }

  .skill-group {
    margin-bottom: 0;
    border: none;
    border-radius: 0;
    overflow: visible;
    background: transparent;
    position: relative;
  }

  .skill-group.split {
    border-left: 2px solid #3a5578;
    margin: 0 0 4px;
  }

  .skill-group.is-custom-buff > .phase-skill-row .skill-index {
    color: var(--accent);
  }

  .phase-skill-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    background: transparent;
  }

  .phase-skill-row:hover {
    background: var(--input-bg);
  }

  .phase-skill-row {
    cursor: context-menu;
  }

  .phase-skill-row input,
  .phase-skill-row select,
  .phase-skill-row button,
  .phase-skill-row textarea {
    cursor: auto;
  }

  .phase-skill-row button {
    cursor: pointer;
  }

  .phase-skill-row .skill-index {
    flex-shrink: 0;
    width: 1.6rem;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
  }

  .skill-lock-icon {
    display: none;
    width: 14px;
    height: 14px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
    line-height: 1;
    color: var(--accent);
  }

  .phase-skill-row.locked .skill-lock-icon {
    display: inline-flex;
  }

  .phase-skill-row.hit-child {
    padding-left: 40px;
    background: rgba(0, 0, 0, 0.04);
  }

  .phase-skill-row.hit-child .hit-label-wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 40px;
    width: 96px;
    flex-shrink: 0;
  }

  .phase-skill-row.hit-child .hit-branch {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    flex-shrink: 0;
  }

  .phase-skill-row.hit-child .hit-label {
    font-size: 11px;
    color: var(--accent);
    font-weight: 600;
    min-width: 0;
    flex: 1;
    padding: 2px 4px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    font-family: inherit;
  }

  .phase-skill-row.hit-child .hit-label:hover:not(:disabled),
  .phase-skill-row.hit-child .hit-label:focus {
    border-color: var(--text-muted);
    background: var(--hover-bg);
    outline: none;
  }

  .phase-skill-row .split-parent-mult {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 108px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    font-size: 12px;
  }

  .phase-skill-row .split-parent-mult-value {
    font-weight: 600;
    color: var(--text-primary, var(--text));
  }

  .phase-skill-row .hit-index {
    visibility: hidden;
  }

  .phase-skill-row .name-cell {
    flex: 1;
    min-width: 120px;
  }

  .phase-skill-row .mult-count-cell {
    flex-shrink: 0;
  }

  .phase-skill-row .dmg-type-select,
  .phase-skill-row .dmg-type-inherit {
    width: 96px;
    flex-shrink: 0;
  }

  .phase-skill-row .skill-tag {
    width: 132px;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-muted);
  }

  .phase-skill-row .row-damage,
  .phase-skill-row .skill-damage-display {
    margin-left: auto;
    min-width: 120px;
    text-align: right;
  }

  .skill-damage-display {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    flex-shrink: 0;
    min-width: 120px;
  }

  .skill-damage-values {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .skill-damage-values .separator {
    color: var(--text-muted);
    font-size: 12px;
  }

  .skill-damage-expected {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
  }

  .skill-damage-crit {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-crit);
    font-variant-numeric: tabular-nums;
  }

  .skill-damage-labels {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
  }

  .skill-damage-labels span {
    font-size: 10px;
    color: var(--text-muted);
    min-width: 3.2em;
    text-align: center;
  }

  .phase-skill-row .row-actions {
    width: auto;
    min-width: 88px;
    flex-shrink: 0;
    justify-content: flex-end;
  }

  .phase-skill-row.has-hybrid-mode .brant-life-skill-btns,
  .phase-skill-row.has-hybrid-mode .phoebe-mode-skill-btns,
  .phase-skill-row .hybrid-slot {
    width: 118px;
    flex-shrink: 0;
  }

  .replace-skill-panel {
    border-top: 1px solid var(--border);
    background: var(--surface);
    padding: 0.55rem 0.65rem;
  }
  .replace-skill-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
  }
  .replace-skill-head .title {
    font-size: 0.82rem;
    color: var(--accent2);
  }
  .replace-skill-group {
    margin-top: 0.35rem;
  }
  .replace-skill-group .label {
    font-size: 0.72rem;
    color: var(--muted);
    margin-bottom: 0.25rem;
  }
  .replace-skill-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }
  .replace-skill-chip {
    cursor: pointer;
    border: 1px solid #3a5578;
    background: var(--surface-2);
    color: var(--accent2);
    border-radius: 999px;
    padding: 0.18rem 0.55rem;
    font-size: 0.74rem;
    line-height: 1.35;
  }
  .replace-skill-chip:hover {
    border-color: var(--accent);
    background: #22324a;
  }
  .replace-skill-chip .num {
    color: var(--muted);
    margin-left: 0.2rem;
  }

  .skill-row:not(.phase-skill-row),
  .hit-subrow:not(.phase-skill-row) {
    display: grid;
    grid-template-columns: minmax(80px, 1fr) minmax(108px, 132px) 96px 88px 1fr 72px;
    gap: 0.4rem;
    align-items: center;
    padding: 0.45rem 0.5rem;
  }

  .skill-row.has-brant-life:not(.phase-skill-row),
  .skill-row.has-hybrid-mode:not(.phase-skill-row) {
    grid-template-columns: minmax(72px, 1fr) minmax(100px, 124px) 88px 80px minmax(118px, 140px) 1fr 68px;
  }

  .brant-life-skill-btns,
  .phoebe-mode-skill-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    align-items: center;
    min-width: 0;
    padding: 0.15rem;
    border: 1px solid rgba(230, 180, 34, 0.4);
    border-radius: 6px;
    background: rgba(230, 180, 34, 0.08);
  }

  .phoebe-mode-skill-btns {
    border-color: rgba(120, 180, 255, 0.45);
    background: rgba(120, 180, 255, 0.1);
  }

  .brant-life-skill-btns .btn,
  .phoebe-mode-skill-btns .btn {
    padding: 0.12rem 0.32rem;
    font-size: 0.68rem;
    line-height: 1.2;
  }

  .phoebe-phase-mode {
    max-width: 11rem;
  }

  .skill-row { background: var(--surface); }

  .hit-subrow {
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    padding-left: 1.25rem;
    grid-template-columns: minmax(70px, 1fr) minmax(100px, 124px) 96px 88px 1fr 72px;
  }

  .hit-subrow::before {
    content: '?';
    position: absolute;
    margin-left: -0.9rem;
    color: var(--muted);
    font-size: 0.75rem;
  }

  .hit-subrow { position: relative; }

  @media (max-width: 1100px) {
    .skill-row:not(.phase-skill-row),
    .hit-subrow:not(.phase-skill-row) {
      grid-template-columns: 1fr 1fr;
    }
    .skill-row:not(.phase-skill-row) .row-damage,
    .hit-subrow:not(.phase-skill-row) .row-damage {
      grid-column: 1 / -1;
      text-align: left !important;
    }
    .skill-row:not(.phase-skill-row) .row-actions,
    .hit-subrow:not(.phase-skill-row) .row-actions {
      grid-column: 1 / -1;
    }
    .phase-skill-row {
      flex-wrap: wrap;
    }
    .phase-skill-row .row-damage {
      margin-left: 0;
    }
  }

  .row-damage {
    text-align: right;
    font-weight: 600;
    color: var(--ok);
    font-variant-numeric: tabular-nums;
    font-size: 0.86rem;
    min-width: 72px;
  }

  .row-damage.skill-damage-display {
    text-decoration: none;
    font-weight: inherit;
    color: inherit;
  }

  .row-damage.skill-damage-display.damage-tooltip {
    text-decoration: none;
  }

  .skill-row .row-damage { font-size: 0.9rem; }

  .row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
    align-items: center;
  }

  .row-menu {
    position: relative;
    display: inline-block;
  }

  .row-menu.open {
    z-index: 50;
  }

  .row-menu-panel {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 2px);
    z-index: 60;
    min-width: 8.5rem;
    padding: 0.35rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    flex-direction: column;
    gap: 0.28rem;
    box-shadow: 0 6px 16px var(--shadow);
  }

  .row-menu.open .row-menu-panel {
    display: flex;
  }

  .row-menu-panel .btn {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }

  .phase-head .catalog-stack-badge {
    margin-right: 0.15rem;
  }

  .phase-batch-buff-panel {
    padding: 0;
    border-bottom: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.12);
    min-width: 0;
  }

  .phase-batch-buff-panel .buff-toggle-row {
    margin-top: 0;
    margin-bottom: 0;
  }

  .phase-batch-matrix-wrap.buff-matrix-wrap,
  .buff-matrix-wrap {
    margin-top: 0;
    overflow: visible;
    min-width: 0;
    max-width: 100%;
  }

  .buff-matrix-hint {
    margin: 0 0 8px;
  }

  .buff-matrix-container {
    --matrix-row-h: 36px;
    --matrix-header-h: 72px;
    display: flex;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    align-items: flex-start;
  }

  .buff-matrix-fixed {
    flex-shrink: 0;
    width: 160px;
    background: var(--surface);
    z-index: 2;
    border-right: 1px solid var(--border);
  }

  .matrix-fixed-corner {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    box-sizing: border-box;
    height: var(--matrix-header-h);
    min-height: var(--matrix-header-h);
    max-height: var(--matrix-header-h);
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--input-bg);
    border-bottom: 1px solid var(--border);
  }

  .matrix-skill-row {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: var(--matrix-row-h);
    min-height: var(--matrix-row-h);
    max-height: var(--matrix-row-h);
    padding: 0 8px;
    border-bottom: 1px solid var(--border);
    gap: 6px;
    overflow: hidden;
  }

  .matrix-skill-row:hover {
    background: var(--input-bg);
  }

  .matrix-skill-row.matrix-focused {
    box-shadow: inset 3px 0 0 rgba(var(--accent-rgb), 0.55);
    background: rgba(var(--accent-rgb), 0.06);
  }

  .matrix-row.highlight-flash,
  .matrix-skill-row.highlight-flash,
  tr.highlight-flash {
    animation: matrix-row-flash 500ms ease 3;
  }

  .phase-batch-matrix tr.highlight-flash td {
    animation: matrix-row-flash 500ms ease 3;
  }

  @keyframes matrix-row-flash {
    0%, 100% { background-color: transparent; }
    50% { background-color: rgba(var(--accent-rgb), 0.12); }
  }

  .matrix-skill-row.matrix-locked {
    opacity: 0.55;
  }

  .matrix-row.hit-child,
  .matrix-skill-row.hit-child {
    background: rgba(0, 0, 0, 0.04);
  }

  .matrix-skill-row.hit-child .skill-name,
  .matrix-row.hit-child .skill-name {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding-left: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    min-width: 0;
    overflow: hidden;
  }

  .matrix-skill-row.hit-child .hit-branch {
    color: var(--accent);
    flex-shrink: 0;
  }

  .matrix-skill-row.hit-child .hit-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .matrix-drag-spacer {
    width: 16px;
    flex-shrink: 0;
  }

  .phase-batch-matrix tr.matrix-locked td.matrix-cell:not(.disabled) {
    opacity: 0.55;
    cursor: not-allowed;
  }

  .matrix-drag-handle {
    width: 16px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    color: var(--text-muted);
    flex-shrink: 0;
    font-size: 10px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
  }

  .matrix-drag-handle:hover:not(:disabled) {
    color: var(--text-muted);
    background: var(--hover-bg);
  }

  .matrix-drag-handle:active:not(:disabled) {
    cursor: grabbing;
  }

  .matrix-drag-handle.catalog-drag-handle::before {
    content: '⠿';
    pointer-events: none;
  }

  .matrix-drag-handle.catalog-drag-handle {
    width: 16px;
    height: 20px;
  }

  .buff-matrix-fixed .matrix-skill-name,
  .matrix-skill-row .matrix-skill-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--accent);
    text-align: left;
  }

  .matrix-skill-name.customized,
  .matrix-skill-row.matrix-custom .matrix-skill-name {
    color: var(--accent);
  }

  .matrix-skill-name.matrix-skill-pick {
    cursor: pointer;
    user-select: none;
  }

  .buff-matrix-scroll {
    overflow-x: auto;
    flex: 1;
    min-width: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  }

  .buff-matrix-scroll::-webkit-scrollbar {
    height: 5px;
  }

  .buff-matrix-scroll::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 999px;
  }

  .phase-batch-matrix {
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    table-layout: fixed;
  }

  .phase-batch-matrix th,
  .phase-batch-matrix td {
    border: 0;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    padding: 0;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    box-sizing: border-box;
  }

  .phase-batch-matrix thead tr {
    height: calc(var(--matrix-header-h) / 2);
  }

  .phase-batch-matrix .matrix-header-group,
  .phase-batch-matrix th.matrix-zone-head {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    padding: 0 4px;
    height: calc(var(--matrix-header-h) / 2);
    min-height: calc(var(--matrix-header-h) / 2);
    max-height: calc(var(--matrix-header-h) / 2);
    box-sizing: border-box;
    letter-spacing: 0.04em;
    background: var(--input-bg);
    border-bottom: 1px solid var(--border);
    border-right: 2px solid var(--border-strong);
    border-top: 3px solid transparent;
    color: var(--text-muted);
    position: relative;
    overflow: hidden;
  }

  .phase-batch-matrix .matrix-header-group.is-last-group,
  .phase-batch-matrix .matrix-header-group:last-child {
    border-right: none;
  }

  .phase-batch-matrix .matrix-header-group[data-category='倍率'] {
    border-top-color: #4a9eff;
    color: #4a9eff;
  }
  .phase-batch-matrix .matrix-header-group[data-category='攻击'] {
    border-top-color: #2dd4bf;
    color: #2dd4bf;
  }
  .phase-batch-matrix .matrix-header-group[data-category='加深'] {
    border-top-color: #e85d5d;
    color: #e85d5d;
  }
  .phase-batch-matrix .matrix-header-group[data-category='增伤'] {
    border-top-color: #ffd93d;
    color: #ffd93d;
  }
  .phase-batch-matrix .matrix-header-group[data-category='暴击'] {
    border-top-color: #f472b6;
    color: #f472b6;
  }
  .phase-batch-matrix .matrix-header-group[data-category='暴伤'] {
    border-top-color: #ffb347;
    color: #ffb347;
  }
  .phase-batch-matrix .matrix-header-group[data-category='减抗'] {
    border-top-color: #94a3b8;
    color: #94a3b8;
  }
  .phase-batch-matrix .matrix-header-group[data-category='防御'] {
    border-top-color: #a0a0a0;
    color: #a0a0a0;
  }
  .phase-batch-matrix .matrix-header-group[data-category='易伤'] {
    border-top-color: #c084fc;
    color: #c084fc;
  }
  .phase-batch-matrix .matrix-header-group[data-category='谐幅'] {
    border-top-color: #45e0cc;
    color: #45e0cc;
  }

  .phase-batch-matrix .matrix-header-buff,
  .phase-batch-matrix th.matrix-buff-head {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    text-align: center;
    padding: 0 4px;
    height: calc(var(--matrix-header-h) / 2);
    min-height: calc(var(--matrix-header-h) / 2);
    max-height: calc(var(--matrix-header-h) / 2);
    box-sizing: border-box;
    min-width: 56px;
    max-width: 80px;
    width: 64px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    background: var(--input-bg);
  }

  .phase-batch-matrix .matrix-header-buff.last-in-group:not(.is-last-group) {
    border-right: 2px solid var(--border-strong);
  }

  .phase-batch-matrix .matrix-header-buff[data-category='倍率'] { background: rgba(74, 158, 255, 0.03); }
  .phase-batch-matrix .matrix-header-buff[data-category='攻击'] { background: rgba(45, 212, 191, 0.03); }
  .phase-batch-matrix .matrix-header-buff[data-category='加深'] { background: rgba(232, 93, 93, 0.03); }
  .phase-batch-matrix .matrix-header-buff[data-category='增伤'] { background: rgba(255, 217, 61, 0.03); }
  .phase-batch-matrix .matrix-header-buff[data-category='暴击'] { background: rgba(244, 114, 182, 0.03); }
  .phase-batch-matrix .matrix-header-buff[data-category='暴伤'] { background: rgba(255, 179, 71, 0.03); }
  .phase-batch-matrix .matrix-header-buff[data-category='减抗'] { background: rgba(148, 163, 184, 0.03); }
  .phase-batch-matrix .matrix-header-buff[data-category='防御'] { background: rgba(160, 160, 160, 0.03); }
  .phase-batch-matrix .matrix-header-buff[data-category='易伤'] { background: rgba(192, 132, 252, 0.03); }
  .phase-batch-matrix .matrix-header-buff[data-category='谐幅'] { background: rgba(69, 224, 204, 0.03); }

  .phase-batch-matrix tbody tr {
    height: var(--matrix-row-h);
  }

  .phase-batch-matrix tbody tr:not(.matrix-locked):hover td.matrix-cell {
    background: var(--input-bg);
  }

  .phase-batch-matrix tr.matrix-locked {
    opacity: 0.55;
  }

  .matrix-cell {
    text-align: center;
    padding: 0 4px;
    min-width: 56px;
    width: 64px;
    height: var(--matrix-row-h);
    min-height: var(--matrix-row-h);
    max-height: var(--matrix-row-h);
    line-height: calc(var(--matrix-row-h) - 1px);
    box-sizing: border-box;
    cursor: pointer;
    transition: background 100ms ease;
    user-select: none;
    border-right: 1px solid var(--border);
    overflow: hidden;
  }

  .matrix-cell.last-in-group {
    border-right: 2px solid var(--border-strong);
  }

  .matrix-cell:hover:not(.disabled):not(.is-locked) {
    background: var(--hover-bg);
  }

  .matrix-cell.checked {
    font-weight: 700;
    color: var(--accent);
  }

  .matrix-cell.checked[data-category='倍率'] { color: #4a9eff; }
  .matrix-cell.checked[data-category='攻击'] { color: #2dd4bf; }
  .matrix-cell.checked[data-category='加深'] { color: #e85d5d; }
  .matrix-cell.checked[data-category='增伤'] { color: #ffd93d; }
  .matrix-cell.checked[data-category='暴击'] { color: #f472b6; }
  .matrix-cell.checked[data-category='暴伤'] { color: #ffb347; }
  .matrix-cell.checked[data-category='减抗'] { color: #94a3b8; }
  .matrix-cell.checked[data-category='防御'] { color: #a0a0a0; }
  .matrix-cell.checked[data-category='易伤'] { color: #c084fc; }
  .matrix-cell.checked[data-category='谐幅'] { color: #45e0cc; }

  .matrix-cell.mixed[data-category='倍率'] { color: rgba(74, 158, 255, 0.7); }
  .matrix-cell.mixed[data-category='攻击'] { color: rgba(45, 212, 191, 0.7); }
  .matrix-cell.mixed[data-category='加深'] { color: rgba(232, 93, 93, 0.7); }
  .matrix-cell.mixed[data-category='增伤'] { color: rgba(255, 217, 61, 0.7); }
  .matrix-cell.mixed[data-category='暴击'] { color: rgba(244, 114, 182, 0.7); }
  .matrix-cell.mixed[data-category='暴伤'] { color: rgba(255, 179, 71, 0.7); }
  .matrix-cell.mixed[data-category='减抗'] { color: rgba(148, 163, 184, 0.7); }
  .matrix-cell.mixed[data-category='防御'] { color: rgba(160, 160, 160, 0.7); }
  .matrix-cell.mixed[data-category='易伤'] { color: rgba(192, 132, 252, 0.7); }
  .matrix-cell.mixed[data-category='谐幅'] { color: rgba(69, 224, 204, 0.7); }

  .matrix-cell.disabled {
    color: var(--text-muted);
    cursor: not-allowed;
  }

  .matrix-cell.parent-summary {
    color: var(--text-muted);
    cursor: default;
    font-weight: 400;
  }

  .matrix-cell.parent-summary:hover {
    background: transparent;
  }

  .matrix-cell.unchecked {
    color: var(--text-muted);
  }

  .matrix-cell.mixed {
    font-weight: 600;
  }

  .matrix-cell.stack {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-weight: 700;
    font-size: 13px;
    color: var(--text-primary, var(--text));
  }

  .matrix-cell.preview-select {
    background: rgba(var(--accent-rgb), 0.15) !important;
  }

  .matrix-cell.preview-deselect {
    background: rgba(255, 80, 80, 0.1) !important;
  }

  .buff-matrix-container.matrix-painting,
  .phase-batch-matrix.matrix-painting {
    user-select: none;
    cursor: cell;
  }

  .phase-batch-matrix td.matrix-paint-hit {
    /* preview classes carry the flash color */
  }

  .chip.chip-mismatch {
    opacity: 0.72;
    color: #c07070;
    border-color: rgba(192, 112, 112, 0.45);
    cursor: default;
    user-select: none;
  }
  .chip.chip-mismatch .chip-mismatch-mark {
    font-weight: 700;
    margin-right: 0.2rem;
  }

  .skill-tag {
    font-size: 0.68rem;
    color: var(--accent2);
    background: #243a55;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
  }

  .dmg-type-select {
    padding: 0.25rem 0.35rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface2);
    color: var(--accent2);
    font-size: 0.72rem;
    min-width: 0;
  }

  .dmg-type-inherit {
    font-size: 0.72rem;
    color: var(--muted);
  }

  .mode-select {
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface2);
    color: var(--text);
    font-size: 0.72rem;
  }

  .hit-buff-detail {
    padding: 0.45rem 0.55rem;
    background: var(--surface-2);
    border-top: 1px solid var(--border);
  }

  .skill-group .hit-buff-detail { margin: 0; }

  .summary-bar {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    text-align: center;
  }

  .summary-bar .label { font-size: 0.85rem; color: var(--muted); }
  .summary-bar .value,
  .summary-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }

  .summary-bar .value.big,
  .summary-value.big {
    color: var(--accent);
  }

  .summary-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    align-items: end;
    text-align: center;
  }

  @media (max-width: 900px) {
    .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  @media (max-width: 640px) {
    .summary-grid { grid-template-columns: 1fr; }
  }

  .summary-grid input {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent);
  }

  /* —— 结果页仪表盘（两层：英雄总览 + 各轮对比） —— */
  .results-dashboard {
    --rd-card: var(--surface);
    --rd-page: var(--bg);
    --rd-border: var(--border);
    --rd-aux: var(--text-muted);
    --rd-up: #4ade80;
    --rd-down: #f87171;
    --rd-gold-a: var(--accent);
    --rd-gold-b: var(--accent);
    margin-top: 1rem;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .results-hero,
  .results-compare {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    padding: 20px;
  }

  .results-hero-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
  }

  .results-tool-btn,
  .calc-action-btn {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--hover-bg);
    color: var(--text-muted);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    padding: 0.35rem 0.7rem;
    border-radius: 8px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  }

  .results-tool-btn:hover,
  .calc-action-btn:hover {
    color: var(--accent);
    border-color: var(--accent-border);
    background: var(--accent-bg);
  }

  .results-hero-body {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 20px 28px;
    align-items: end;
  }

  .results-hero-primary .label,
  .results-hero-secondary .label,
  .results-aux-item .label,
  .results-dashboard .calc-summary-label {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin-bottom: 0.35rem;
  }

  .results-hero-primary .label .hint,
  .results-hero-secondary .label .hint,
  .results-aux-item .label .hint {
    color: var(--text-muted);
    font-weight: 400;
    letter-spacing: 0;
  }

  .results-hero-total,
  .results-dashboard .calc-summary-item.total .calc-summary-value,
  .results-dashboard .summary-value.big {
    font-family: 'JetBrains Mono', var(--font-mono, monospace);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    filter: none;
    text-shadow: 0 0 24px rgba(var(--accent-rgb), 0.18);
  }

  .results-hero-dps,
  .results-aux-value,
  .results-dashboard .calc-summary-value,
  .results-dashboard .summary-value {
    font-family: 'JetBrains Mono', var(--font-mono, monospace);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
  }

  .results-hero-dps {
    font-size: clamp(16px, 1.6vw, 20px);
    font-weight: 700;
    color: var(--accent);
  }

  .results-hero-aux {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding-top: 8px;
    border-top: 1px solid var(--border);
  }

  .results-aux-item {
    padding: 8px 12px;
    transition: background 150ms;
  }

  .results-aux-item + .results-aux-item {
    border-left: 1px solid var(--border);
  }

  .results-aux-item:hover {
    background: var(--hover-bg);
  }

  .results-unit {
    margin-left: 0.15rem;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-muted);
    opacity: 1;
  }

  .results-hero-total.is-counting,
  .results-hero-dps.is-counting {
    animation: results-count-pulse 0.5s ease;
  }

  @keyframes results-count-pulse {
    0% { opacity: 0.55; transform: translateY(4px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .results-hero-total.is-counting,
    .results-hero-dps.is-counting {
      animation: none;
    }
  }

  .results-compare-head {
    margin-bottom: 12px;
  }

  .results-compare-title {
    margin: 0 0 0.35rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text-primary);
  }

  .results-compare-hint {
    margin: 0;
    font-size: 0.68rem;
    line-height: 1.45;
    color: var(--text-muted);
  }

  .round-cards-container {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }

  .round-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 20px;
    flex: 1;
    min-width: 240px;
  }

  .round-card.is-active-round {
    border-color: rgba(var(--accent-rgb), 0.28);
    box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.08);
  }

  .round-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
  }

  .round-card-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
  }

  .round-card-total {
    font-family: 'JetBrains Mono', var(--font-mono, ui-monospace, monospace);
    font-size: 18px;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
  }

  .round-card-meta {
    margin: -4px 0 12px;
    font-size: 11px;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .round-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .round-card-grid--total {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .round-card-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .round-card-field .field-label {
    font-size: 11px;
    color: var(--text-muted);
  }

  .round-card-field .field-value,
  .round-card-value {
    font-family: 'JetBrains Mono', var(--font-mono, ui-monospace, monospace);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }

  .round-card-field .field-value--dur {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
  }

  .round-card-field .field-unit {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
  }

  .round-card-field.dps .field-value {
    color: var(--color-attack);
    font-size: 16px;
    font-weight: 700;
  }

  .round-card-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    flex-shrink: 0;
  }

  .round-card-delta.down {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
  }

  .round-card-delta.up {
    color: #4aff8a;
    background: rgba(74, 255, 138, 0.1);
  }

  .round-card.total-card {
    border-color: rgba(var(--accent-rgb), 0.15);
    background: rgba(var(--accent-rgb), 0.02);
    margin-bottom: 0;
  }

  .round-card.total-card .round-card-name {
    color: var(--accent);
  }

  .results-dur {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }

  .results-dur-value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: inherit;
  }

  .results-dur-edit {
    appearance: none;
    border: none;
    background: var(--hover-bg);
    color: var(--text-muted);
    width: 22px;
    height: 22px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
  }

  .results-dur-edit:hover {
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.12);
  }

  .results-dur.is-editing .results-dur-value,
  .results-dur.is-editing .results-dur-edit {
    display: none;
  }

  .results-dur-input {
    width: 3.6rem;
    padding: 0.2rem 0.3rem;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 6px;
  }

  @media (max-width: 820px) {
    .results-hero-body {
      grid-template-columns: 1fr;
    }

    .results-hero-aux {
      grid-template-columns: 1fr;
    }

    .round-cards-container {
      flex-direction: column;
    }

    .round-card {
      min-width: 0;
      width: 100%;
    }

    .round-card-grid--total {
      grid-template-columns: 1fr 1fr;
    }
  }

  .calc-timeline-panel .results-dashboard.summary-bar {
    background: transparent;
    border: none;
  }

  .results-dashboard .cycle-round-summary {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    text-align: left;
  }

  .results-dashboard .results-compare {
    /* 对比区本身已是卡片组，去掉外层大卡片底以免双层框 */
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }

  .results-dashboard .cycle-round-summary-title,
  .results-dashboard .cycle-round-summary-hint,
  .results-dashboard .cycle-round-summary-grid {
    display: none;
  }

  .skill-group.locked {
    border-color: var(--warn);
    box-shadow: inset 0 0 0 1px rgba(229, 192, 123, 0.25);
  }

  .locked-tag {
    font-size: 0.68rem;
    color: var(--warn);
  }

  .locked-collapsed-hint {
    font-size: 0.68rem;
    color: var(--muted);
    padding: 0.2rem 0.55rem 0.35rem;
    border-top: 1px dashed var(--border);
  }

  .empty-hint {
    text-align: center;
    color: var(--muted);
    font-size: 0.82rem;
    padding: 1.5rem;
  }

  .rotation-panel { margin-bottom: 1rem; }

  .cycle-config {
    margin: 0.65rem 0 0.5rem;
    padding: 0.65rem 0.75rem;
    background: rgba(91, 159, 212, 0.06);
    border: 1px solid var(--border);
    border-radius: 8px;
  }

  .cycle-config-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
  }

  .cycle-config-body {
    margin-top: 0.55rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--border);
  }

  .cycle-count-field {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .cycle-count-field input {
    width: 4rem;
    text-align: center;
  }

  .cycle-round-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
  }

  .cycle-round-tab {
    padding: 0.28rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface2);
    font-size: 0.72rem;
    color: var(--muted);
    cursor: pointer;
    touch-action: none;
    user-select: none;
  }

  .cycle-round-tab[data-cycle-round-draggable] {
    cursor: grab;
  }

  .cycle-round-tab.active {
    border-color: var(--accent);
    color: var(--accent2);
    background: #243a55;
  }

  .cycle-round-tab.has-data {
    border-color: rgba(152, 195, 121, 0.45);
  }

  body.cycle-round-dragging {
    cursor: grabbing;
    user-select: none;
  }

  body.cycle-round-dragging .cycle-round-tab {
    cursor: grabbing;
  }

  .cycle-round-tab.dragging {
    opacity: 0.45;
  }

  .cycle-round-tab.drop-before {
    box-shadow: inset 3px 0 0 var(--accent);
  }

  .cycle-round-tab.drop-after {
    box-shadow: inset -3px 0 0 var(--accent);
  }

  .cycle-editing-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.45rem;
    font-size: 0.72rem;
    color: var(--accent2);
  }

  .special-char-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.65rem;
  }

  .special-char-tab {
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface2);
    font-size: 0.74rem;
    color: var(--muted);
    cursor: pointer;
  }

  .special-char-tab.active {
    border-color: var(--accent);
    color: var(--accent2);
    background: #243a55;
  }

  .cycle-breakdown {
    margin-top: 0.85rem;
    padding: 0.75rem 0.9rem;
    background: rgba(240, 198, 116, 0.06);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-align: left;
  }

  .cycle-breakdown.detail-rounds {
    margin-top: 8px;
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    text-align: left;
  }

  .detail-rounds-title {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
  }

  .formula-hint {
    font-size: 11px;
    color: color-mix(in srgb, var(--text-muted) 55%, transparent);
    padding: 8px 12px;
    background: var(--input-bg);
    border-radius: 6px;
    margin-bottom: 16px;
    line-height: 1.6;
    cursor: pointer;
    transition: all 150ms;
    max-height: 32px;
    overflow: hidden;
  }

  .formula-hint.expanded,
  .formula-hint.is-open {
    max-height: 200px;
    color: var(--text-muted);
    background: var(--hover-bg);
  }

  .formula-hint::after {
    content: '▼ 展开';
    float: right;
    font-size: 10px;
  }

  .formula-hint.expanded::after,
  .formula-hint.is-open::after {
    content: '▲ 收起';
  }

  .formula-hint .formula-hint-full {
    display: none;
  }

  .formula-hint.expanded .formula-hint-summary,
  .formula-hint.is-open .formula-hint-summary {
    display: none;
  }

  .formula-hint.expanded .formula-hint-full,
  .formula-hint.is-open .formula-hint-full {
    display: inline;
  }

  .detail-round-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 8px;
    transition: background 150ms ease;
  }

  .detail-round-row:last-child {
    margin-bottom: 0;
  }

  .detail-round-row:hover {
    background: var(--hover-bg);
  }

  .detail-round-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    width: 100%;
  }

  .detail-round-top {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 0;
  }

  .detail-round-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 60px;
  }

  .detail-round-damage {
    font-family: 'JetBrains Mono', var(--font-mono, ui-monospace, monospace);
    font-size: 15px;
    font-weight: 700;
    color: var(--accent);
    margin-left: 12px;
    font-variant-numeric: tabular-nums;
  }

  .detail-round-buffs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }

  .detail-round-buff-chip {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--hover-bg);
    color: var(--text-muted);
  }

  .detail-round-buff-chip.is-empty {
    opacity: 0.7;
  }

  .detail-round-buff-chip .chip-count {
    font-weight: 700;
    color: var(--text-primary);
    margin-left: 2px;
  }

  .detail-round-delta {
    font-size: 12px;
    font-weight: 600;
    color: #ff6b6b;
    margin-left: 8px;
  }

  .detail-round-delta.up {
    color: #4aff8a;
  }

  .detail-round-delta.down {
    color: #ff6b6b;
  }

  .detail-round-row.total {
    background: rgba(var(--accent-rgb), 0.03);
    border-color: rgba(var(--accent-rgb), 0.1);
  }

  .detail-round-row.current {
    border-left: 3px solid var(--accent);
  }

  .detail-round-row.current .detail-round-name::after {
    content: '当前';
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(var(--accent-rgb), 0.15);
    color: var(--accent);
    margin-left: 8px;
    font-weight: 600;
  }

  .cycle-breakdown h3 {
    margin: 0 0 0.5rem;
    font-size: 0.78rem;
    color: var(--accent);
  }

  .cycle-breakdown.detail-rounds .detail-rounds-title {
    color: var(--text-primary);
    font-size: 14px;
  }

  .cycle-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.2rem 0;
    font-size: 0.8rem;
  }

  .cycle-label {
    min-width: 3.5rem;
    color: var(--muted);
  }

  .cycle-value {
    font-weight: 600;
    color: var(--result);
    font-variant-numeric: tabular-nums;
  }

  .cycle-delta {
    font-size: 0.72rem;
    color: var(--ok);
  }

  .cycle-row.cycle-total {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--border);
  }

  .cycle-round-summary {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
    text-align: left;
  }

  .cycle-round-summary-title {
    margin: 0 0 0.45rem;
    font-size: 0.78rem;
    color: var(--accent);
    font-weight: 600;
    text-align: center;
  }

  .cycle-round-summary-hint {
    margin: 0 0 0.55rem;
    font-size: 0.68rem;
    text-align: center;
  }

  .cycle-round-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.5rem;
  }

  .cycle-round-card {
    padding: 0.55rem 0.65rem;
    background: rgba(91, 159, 212, 0.08);
    border: 1px solid var(--border);
    border-radius: 8px;
    text-align: center;
  }

  .cycle-round-card-title {
    font-size: 0.72rem;
    color: var(--accent2);
    font-weight: 600;
    margin-bottom: 0.35rem;
  }

  .cycle-round-card-stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 0.72rem;
    padding: 0.12rem 0;
  }

  .cycle-round-card-stat .label {
    color: var(--muted);
    font-size: 0.68rem;
  }

  .cycle-round-card-stat .value {
    font-weight: 600;
    color: var(--result);
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
  }

  .cycle-round-card-duration {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
    font-size: 0.68rem;
  }

  .cycle-round-card-duration .label {
    color: var(--muted);
  }

  .cycle-round-card-duration input {
    width: 3.4rem;
    padding: 0.18rem 0.25rem;
    text-align: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent2);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px;
  }

  .cycle-row.cycle-total .cycle-value {
    font-size: 0.95rem;
  }

  .rotation-strip {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.55rem 0.65rem;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 0.75rem;
  }

  .palette-group {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.35rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(58, 85, 120, 0.35);
  }

  .palette-group:last-child {
    padding-bottom: 0;
    border-bottom: none;
  }

  .palette-group-label {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.02em;
  }

  .palette-group-count {
    font-size: 0.68rem;
    font-weight: 500;
    color: #6a7f99;
    background: rgba(36, 58, 85, 0.6);
    border: 1px solid rgba(58, 85, 120, 0.5);
    border-radius: 999px;
    padding: 0.05rem 0.4rem;
  }

  .palette-group-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    width: 100%;
  }

  .rotation-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    background: #243a55;
    border: 1px solid #3a5578;
    border-radius: 6px;
    font-size: 0.78rem;
    color: var(--accent2);
  }

  .rotation-chip .num {
    color: var(--muted);
    font-size: 0.7rem;
  }

  .rotation-chip[data-add-palette-to-catalog] {
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
  }

  .rotation-chip[data-add-palette-to-catalog]:hover {
    border-color: var(--accent);
    background: #2a4a6b;
  }

  .rotation-chip[data-composite-pick-library-skill] {
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
  }

  .rotation-chip[data-composite-pick-library-skill]:hover {
    border-color: rgba(210, 140, 55, 0.45);
  }

  .rotation-chip.is-selected {
    border-color: rgba(210, 140, 55, 0.65);
    background: rgba(210, 140, 55, 0.14);
  }

  .rotation-chip.is-template-extra {
    background: rgba(210, 140, 55, 0.18);
    border-color: rgba(210, 140, 55, 0.75);
    color: #f0c674;
  }

  .skill-group.timeline-highlight {
    animation: timeline-flash 1.1s ease 2;
  }

  .rotation-block.catalog-highlight {
    animation: timeline-flash 1.1s ease 2;
  }

  @keyframes timeline-flash {
    0%, 100% { box-shadow: none; }
    40% { box-shadow: 0 0 0 2px var(--accent), 0 0 14px rgba(91, 159, 212, 0.45); }
  }

  .rotation-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .rotation-block,
  .axis-row {
    position: relative;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: 8px;
    margin-bottom: 6px;
    overflow: hidden;
    padding-left: 28px;
    transition: background 150ms ease, opacity 150ms ease, border-color 150ms ease, transform 200ms ease;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .axis-row:hover,
  .rotation-block:hover {
    background: var(--hover-bg);
  }

  .axis-row[data-type='普攻'] { border-left-color: var(--color-attack); }
  .axis-row[data-type='重击'] { border-left-color: var(--color-heavy); }
  .axis-row[data-type='共鸣技能'] { border-left-color: var(--color-skill); }
  .axis-row[data-type='共鸣解放'] { border-left-color: var(--color-echo); }
  .axis-row[data-type='变奏'] { border-left-color: var(--color-variation); }
  .axis-row[data-type='延奏'] { border-left-color: var(--color-echo); }
  .axis-row[data-type='声骸'] { border-left-color: var(--color-sonance); }

  .rotation-block.in-timeline,
  .axis-row.in-timeline,
  .axis-row.in-axis {
    border-color: rgba(var(--accent-rgb), 0.22);
    background: rgba(var(--accent-rgb), 0.03);
    box-shadow: none;
    opacity: 1;
    position: relative;
  }

  .axis-row.in-axis::before,
  .axis-row.in-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent);
    border-radius: 8px 8px 0 0;
    pointer-events: none;
    z-index: 1;
  }

  .rotation-block.in-timeline .rotation-num,
  .axis-row.in-timeline .rotation-num,
  .axis-row.in-axis .rotation-num {
    color: var(--accent);
  }

  .axis-row.in-axis .skill-name,
  .axis-row.in-axis .axis-skill-name {
    color: var(--text-primary, var(--text));
  }

  .axis-row.not-in-axis {
    opacity: 0.5;
  }

  .axis-row.not-in-axis:hover {
    opacity: 0.8;
  }

  .axis-row.not-in-axis .skill-name,
  .axis-row.not-in-axis .axis-skill-name {
    color: var(--text-muted, var(--muted));
  }

  .axis-skill-name-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
  }

  .axis-skill-name-wrap .axis-skill-name,
  .axis-skill-name-wrap .skill-name,
  .axis-row-main .skill-name,
  .axis-row-main .axis-skill-name,
  .axis-row-main input[data-catalog-name] {
    flex: 0 0 auto;
    width: 140px !important;
    max-width: 140px;
    min-width: 60px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .in-axis-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(var(--accent-rgb), 0.2);
    color: var(--accent);
    letter-spacing: 0.03em;
    flex-shrink: 0;
    white-space: nowrap;
    line-height: 1.4;
    border: none;
    margin: 0;
  }

  .not-in-axis-hint {
    font-size: 10px;
    color: var(--text-muted, var(--muted));
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--hover-bg);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .axis-row.not-in-axis .btn-in-axis {
    background: rgba(var(--accent-rgb), 0.15);
    color: var(--accent);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
  }

  .axis-row.not-in-axis .btn-in-axis:hover:not(:disabled) {
    background: rgba(var(--accent-rgb), 0.25);
    color: var(--accent);
    border-color: rgba(var(--accent-rgb), 0.4);
  }

  .axis-row.in-axis .btn-in-axis.is-done,
  .axis-row.in-axis .btn-in-axis {
    background: transparent;
    color: var(--text-muted, var(--muted));
    border: none;
  }

  .rotation-block.catalog-selected,
  .axis-row.catalog-selected {
    background: rgba(var(--accent-rgb), 0.08);
    border-color: rgba(var(--accent-rgb), 0.3);
    border-left-width: 4px;
    box-shadow: none;
    opacity: 1;
  }

  .axis-row.catalog-selected .axis-row-index .rotation-num {
    background: var(--accent);
    color: #000;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    min-width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: selectPop 200ms ease;
  }

  @keyframes selectPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
  }

  /* 多选：选中行勾选标记（覆盖 in-axis 顶条 ::before） */
  .rotation-list.has-selection .axis-row.catalog-selected::before {
    content: '✓';
    position: absolute;
    left: 6px;
    top: 50%;
    right: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
    color: #000;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border: none;
    z-index: 2;
    pointer-events: none;
  }

  .rotation-list.has-selection .axis-row:not(.catalog-selected)::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    right: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    background: transparent;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
  }

  .rotation-list.has-selection .axis-row:not(.catalog-selected),
  .calc-page .rotation-list.has-selection .axis-row:not(.catalog-selected) {
    opacity: 0.45;
  }

  .rotation-list.has-selection .axis-row:not(.catalog-selected):hover,
  .calc-page .rotation-list.has-selection .axis-row:not(.catalog-selected):hover {
    opacity: 0.7;
  }

  .rotation-list.has-selection .axis-row.catalog-selected,
  .calc-page .rotation-list.has-selection .axis-row.catalog-selected {
    opacity: 1;
  }

  .rotation-list.all-selected {
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-radius: 10px;
    padding: 4px;
    box-sizing: border-box;
  }

  .rotation-list.catalog-painting {
    user-select: none;
    cursor: cell;
  }

  .rotation-block.catalog-paint-hit {
    animation: catalog-paint-flash 0.4s ease;
  }

  @keyframes catalog-paint-flash {
    0% { background: rgba(91, 159, 212, 0.35); }
    100% { background: transparent; }
  }

  .rotation-block.catalog-selected.catalog-paint-hit {
    animation: catalog-paint-flash-selected 0.4s ease;
  }

  @keyframes catalog-paint-flash-selected {
    0% { background: rgba(91, 159, 212, 0.42); }
    100% { background: rgba(91, 159, 212, 0.08); }
  }

  .catalog-index-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.12rem;
    min-width: 1.6rem;
  }

  .catalog-drag-handle,
  .drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 32px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
    cursor: grab;
    flex-shrink: 0;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    transition: all 150ms;
  }

  .catalog-drag-handle::before,
  .drag-handle::before {
    content: '⠿';
    pointer-events: none;
  }

  .catalog-drag-handle:hover,
  .drag-handle:hover {
    color: var(--text-muted, var(--muted));
    background: var(--hover-bg);
  }

  .catalog-drag-handle:active,
  .drag-handle:active {
    cursor: grabbing;
  }

  .catalog-drag-handle.is-pending,
  .drag-handle.is-pending {
    color: var(--text-muted, var(--muted));
    background: var(--hover-bg);
  }

  .catalog-drag-handle.is-dragging,
  .drag-handle.is-dragging,
  body.catalog-dragging .catalog-drag-handle.is-dragging,
  body.catalog-dragging .drag-handle.is-dragging {
    cursor: grabbing;
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.18);
  }

  body.catalog-dragging .catalog-drag-handle,
  body.timeline-dragging .catalog-drag-handle {
    cursor: grabbing;
  }

  .rotation-block.dragging,
  .axis-row.dragging {
    opacity: 0.4;
    background: rgba(var(--accent-rgb), 0.05);
    border-style: dashed;
    border-color: rgba(var(--accent-rgb), 0.3);
  }

  .drag-placeholder {
    height: 4px;
    background: var(--accent);
    border-radius: 2px;
    margin: 2px 0;
    flex-shrink: 0;
    animation: placeholderPulse 1s ease-in-out infinite;
    pointer-events: none;
  }

  @keyframes placeholderPulse {
    0%,
    100% { opacity: 1; }
    50% { opacity: 0.4; }
  }

  .rotation-block.drop-before,
  .axis-row.drop-before {
    box-shadow: none;
  }

  .rotation-block.drop-after,
  .axis-row.drop-after {
    box-shadow: none;
  }

  body.catalog-dragging,
  body.timeline-dragging {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
  }

  body.catalog-dragging .rotation-list {
    position: relative;
    user-select: none;
    touch-action: none;
  }

  body.catalog-dragging .rotation-list::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(var(--accent-rgb), 0.03);
    border-radius: 8px;
    pointer-events: none;
    z-index: 0;
  }

  body.catalog-dragging .rotation-list > * {
    position: relative;
    z-index: 1;
  }
  .skill-group.dragging {
    opacity: 0.45;
  }
  .skill-group.drop-before {
    box-shadow: inset 0 2px 0 0 var(--accent);
  }
  .skill-group.drop-after {
    box-shadow: inset 0 -2px 0 0 var(--accent);
  }
  body.timeline-dragging .timeline {
    user-select: none;
  }

  .rotation-item {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.28rem 0.35rem;
    padding: 0.35rem 0.45rem;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: none;
    border-radius: 0;
    vertical-align: top;
  }

  .axis-row-main,
  .rotation-item.axis-row-main {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    padding: 10px 12px;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: 0;
    border-radius: 0;
    min-width: 0;
  }

  .axis-row-index,
  .axis-row-main .catalog-index-cell {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    width: auto;
    min-width: 28px;
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--text-muted);
  }

  .axis-row-main .rotation-num {
    font-size: 12px;
    color: var(--text-muted);
    min-width: 1.1em;
    text-align: center;
  }

  .axis-skill-name,
  .axis-row-main input[data-catalog-name] {
    box-sizing: border-box;
    height: 28px;
    padding: 0 6px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text-primary, var(--text));
    font-size: 14px;
    font-weight: 600;
  }

  .axis-skill-name:hover,
  .axis-skill-name:focus,
  .axis-row-main input[data-catalog-name]:hover,
  .axis-row-main input[data-catalog-name]:focus {
    border-color: var(--text-muted);
    background: var(--hover-bg);
    outline: none;
    text-overflow: clip;
  }

  .axis-row-main .type-pill,
  .axis-row-main .dmg-type-select.type-pill {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    height: 22px;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 600;
    background: var(--hover-bg);
    color: var(--text-muted);
    font-family: inherit;
  }

  .type-pill[data-type='普攻'],
  .dmg-type-select.type-pill[data-type='普攻'] {
    background: rgba(45, 212, 191, 0.1);
    color: var(--color-attack);
  }
  .type-pill[data-type='重击'],
  .dmg-type-select.type-pill[data-type='重击'] {
    background: rgba(255, 159, 67, 0.1);
    color: var(--color-heavy);
  }
  .type-pill[data-type='共鸣技能'],
  .dmg-type-select.type-pill[data-type='共鸣技能'] {
    background: rgba(74, 158, 255, 0.1);
    color: var(--color-skill);
  }
  .type-pill[data-type='共鸣解放'],
  .dmg-type-select.type-pill[data-type='共鸣解放'] {
    background: rgba(255, 217, 61, 0.12);
    color: var(--color-echo);
  }
  .type-pill[data-type='变奏'],
  .dmg-type-select.type-pill[data-type='变奏'] {
    background: rgba(192, 132, 252, 0.12);
    color: var(--color-variation);
  }
  .type-pill[data-type='延奏'],
  .dmg-type-select.type-pill[data-type='延奏'] {
    background: rgba(255, 217, 61, 0.1);
    color: var(--color-echo);
  }
  .type-pill[data-type='声骸'],
  .dmg-type-select.type-pill[data-type='声骸'] {
    background: rgba(255, 107, 107, 0.12);
    color: var(--color-sonance);
  }

  .axis-row-main .mult-count-cell {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    width: auto;
  }

  .axis-row-main .mult-count-cell .mult-input,
  .axis-row-main .mult-count-cell .rate-value {
    min-width: 4.8rem;
    width: 4.8rem;
    height: 28px;
    text-align: right;
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    background: var(--hover-bg);
    border: 1px solid var(--input-border);
    border-radius: 6px;
    padding: 0 6px;
    box-sizing: border-box;
  }

  .axis-row-main .mult-count-cell .mult-count-x {
    color: var(--text-muted);
    font-size: 12px;
  }

  .axis-row-main .mult-count-cell .mult-count-input {
    width: 2.2rem;
    height: 28px;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    background: var(--hover-bg);
    border: 1px solid var(--input-border);
    border-radius: 6px;
  }

  .axis-energy,
  .axis-row-main .catalog-energy-hint {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    min-width: 0;
    text-align: left;
  }

  .axis-mode-tag {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
  }

  .axis-source-tags {
    display: inline-flex;
    gap: 3px;
    flex: 0 0 auto;
  }

  .axis-source-tag,
  .source-tag {
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--hover-bg);
    color: var(--text-muted);
    white-space: nowrap;
  }

  .axis-actions,
  .axis-row-main .row-actions.axis-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    margin-left: auto;
    flex-wrap: nowrap;
    width: auto;
    max-width: none;
  }

  .axis-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 100ms;
    background: transparent;
    border: none;
    font-size: 12px;
    font-family: inherit;
    padding: 0;
    position: relative;
  }

  .axis-action-btn:hover:not(:disabled) {
    background: var(--accent-bg);
    color: var(--text-primary);
  }

  .axis-action-btn.danger:hover:not(:disabled) {
    color: #ff5050;
    background: rgba(255, 80, 80, 0.12);
  }

  .axis-action-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  .axis-action-count {
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 9px;
    line-height: 1;
    color: var(--accent);
  }

  .axis-buff-row,
  .axis-row-buffs {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px 5px 44px;
    border-top: 1px dashed var(--border);
    flex-wrap: wrap;
    min-width: 0;
  }

  .axis-buff-row .catalog-stack-inline-wrap,
  .axis-row-buffs .catalog-stack-inline-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    max-width: 100%;
  }

  .axis-buff-tag,
  .axis-row-buffs .catalog-stack-inline.axis-buff-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--hover-bg);
    border: 1px solid var(--border);
    color: var(--text-muted);
    white-space: nowrap;
    margin: 0;
    cursor: default;
  }

  .axis-buff-tag::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--border-strong);
  }

  .axis-buff-tag[data-source='模态']::before { background: #4a9eff; }
  .axis-buff-tag[data-source='武器']::before { background: #2dd4bf; }
  .axis-buff-tag[data-source='声骸']::before { background: #ff6b6b; }
  .axis-buff-tag[data-source='套装']::before { background: #ffd93d; }

  .axis-buff-tag .buff-name,
  .axis-buff-tag .catalog-stack-label {
    color: var(--text-muted);
    font-weight: 500;
    position: relative;
  }

  .axis-buff-tag .layer-count {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 12px;
    margin-left: 2px;
    color: var(--text-primary, var(--text));
  }

  .axis-buff-tag .layer-x {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    user-select: none;
  }

  .axis-buff-tag .stack-input,
  .axis-row-buffs .axis-buff-tag .stack-input {
    width: 1.5rem;
    min-width: 1.5rem;
    height: 18px;
    padding: 0;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    text-align: left;
    color: inherit;
    background: transparent;
    border: none;
    border-radius: 0;
    outline: none;
    -moz-appearance: textfield;
  }

  .axis-buff-tag .stack-input::-webkit-outer-spin-button,
  .axis-buff-tag .stack-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .axis-buff-tag .stack-input:focus {
    background: var(--hover-bg);
    border-radius: 3px;
  }

  .axis-buff-tag[data-count='0'] .layer-count,
  .axis-buff-tag[data-count='0'] .stack-input {
    color: var(--text-muted);
  }

  .axis-buff-tag[data-count='1'] .layer-count,
  .axis-buff-tag[data-count='1'] .stack-input {
    color: var(--text-primary, var(--text));
  }

  .axis-buff-tag:not([data-count='0']):not([data-count='1']) .layer-count,
  .axis-buff-tag:not([data-count='0']):not([data-count='1']) .stack-input {
    color: var(--accent);
  }

  .axis-buff-tag .layer,
  .axis-row-buffs .axis-buff-tag .layer {
    display: none;
  }

  .rotation-item .catalog-index-cell {
    flex: 0 0 auto;
  }

  .rotation-item .dmg-type-select {
    flex: 0 0 auto;
    width: 5.25rem;
  }

  .rotation-item.axis-row-main .dmg-type-select,
  .axis-row-main .dmg-type-select {
    width: auto;
    min-width: 0;
  }

  .rotation-item .mult-count-cell {
    flex: 0 0 auto;
    width: 7.1rem;
  }

  .rotation-item.axis-row-main .mult-count-cell,
  .axis-row-main .mult-count-cell {
    width: auto;
  }

  .rotation-item .row-actions {
    display: inline-flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 0.28rem;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    max-width: 100%;
    margin-left: 0;
    min-width: 0;
  }

  .rotation-item.axis-row-main .row-actions.axis-actions,
  .axis-row-main .row-actions.axis-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    margin-left: auto;
    max-width: none;
  }

  .catalog-energy-hint {
    font-size: 0.68rem;
    color: var(--muted);
    white-space: nowrap;
    min-width: 2.2rem;
    text-align: center;
  }

  .catalog-stack-inline-wrap {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.35rem;
    align-items: center;
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
  }
  .catalog-stack-inline {
    display: inline-flex;
    align-items: center;
    gap: 0.12rem;
    font-size: 0.62rem;
    color: var(--muted);
    white-space: nowrap;
  }
  .catalog-stack-inline .stack-input {
    width: 1.85rem;
    font-size: 0.68rem;
    padding: 0.08rem 0.12rem;
  }
  .catalog-stack-label {
    position: relative;
    color: var(--accent2);
    font-weight: 500;
    cursor: help;
  }

  .rotation-item input[data-catalog-name] {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: calc(var(--catalog-name-em, 8) * 1em);
    max-width: min(100%, 28em);
    min-width: 4.5em;
    font-size: 0.76rem;
    padding: 0.22rem 0.35rem;
  }

  .axis-row-main input[data-catalog-name],
  .axis-row-main .axis-skill-name {
    width: 140px;
    max-width: 140px;
    min-width: 60px;
    font-size: 14px;
    font-weight: 600;
    padding: 0 6px;
  }

  @media (max-width: 900px) {
    .axis-row-main,
    .rotation-item.axis-row-main {
      flex-wrap: wrap;
    }

    .axis-row-main .row-actions.axis-actions {
      width: 100%;
      justify-content: flex-end;
      margin-left: 0;
    }
  }

  .rotation-mult-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.45rem 0.4rem;
    border-top: 1px dashed var(--border);
    background: rgba(0, 0, 0, 0.1);
  }

  .axis-row-detail.rotation-mult-row,
  .axis-row-detail,
  .axis-detail {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 300ms ease, padding 300ms ease, background 150ms ease;
    padding: 0 12px 0 44px;
    border-top: 1px dashed transparent;
    background: transparent;
    box-sizing: border-box;
  }

  .axis-row-detail.expanded,
  .axis-detail.expanded {
    max-height: 72px;
    padding: 8px 12px 8px 44px;
    border-top-color: var(--text-muted);
    background: rgba(0, 0, 0, 0.15);
    overflow-x: auto;
    overflow-y: hidden;
  }

  .axis-row.detail-open,
  .axis-row.in-axis.detail-open {
    background: rgba(var(--accent-rgb), 0.03);
  }

  .axis-row.detail-open.catalog-selected {
    background: rgba(var(--accent-rgb), 0.08);
  }

  .axis-detail-fields,
  .detail-grid {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
    width: max-content;
    min-width: 100%;
  }

  .detail-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 56px;
    flex-shrink: 0;
  }

  .detail-label {
    font-size: 10px;
    color: var(--text-muted, var(--muted));
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .detail-value {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .detail-value.accent {
    color: var(--accent);
  }

  .detail-field.mult-base .detail-value {
    font-weight: 700;
  }

  .detail-field.damage .detail-value {
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
  }

  .detail-field.crit-damage .detail-value {
    color: var(--color-crit);
    font-size: 13px;
    font-weight: 700;
  }

  .axis-row-detail .rotation-mult-meta {
    display: none;
  }

  .mult-chip-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.28rem;
    overflow-x: auto;
    flex: 1;
    min-width: 0;
    padding-bottom: 2px;
  }

  .mult-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: 2.1rem;
    padding: 0.12rem 0.3rem;
    border-radius: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 0.62rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .mult-chip .k { color: var(--muted); line-height: 1.2; }
  .mult-chip .v {
    color: var(--accent2);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: 0.68rem;
    line-height: 1.25;
  }

  .mult-chip-final {
    border-color: rgba(240, 198, 116, 0.4);
    background: rgba(240, 198, 116, 0.08);
  }

  .mult-chip-final .v { color: var(--result); }

  .rotation-panel.mult-check-active .mult-chip[data-mult-zone="skillMult"] {
    display: none;
  }

  .rotation-panel.mult-check-active .detail-field[data-mult-zone="skillMult"] {
    opacity: 0.45;
  }

  .rotation-panel.mult-check-active .mult-chip-checkable {
    min-width: 2.65rem;
    padding: 0.18rem 0.38rem;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  }

  .rotation-panel.mult-check-active .detail-field.mult-chip-checkable {
    min-width: 0;
    padding: 2px 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.12s ease, box-shadow 0.12s ease;
  }

  .rotation-panel.mult-check-active .mult-chip-checkable:hover {
    border-color: var(--accent);
  }

  .rotation-panel.mult-check-active .detail-field.mult-chip-checkable:hover {
    background: var(--hover-bg);
  }

  .rotation-panel.mult-check-active .mult-chip-checkable.mult-check-zone-active {
    outline: 1px solid rgba(232, 184, 74, 0.55);
  }

  .mult-chip.mult-check-c0 {
    background: rgba(201, 149, 46, 0.42);
    border-color: rgba(232, 184, 74, 0.9);
    box-shadow: 0 0 0 1px rgba(255, 217, 138, 0.28);
  }
  .mult-chip.mult-check-c0 .v { color: #ffd98a; }

  .detail-field.mult-check-c0 {
    background: rgba(201, 149, 46, 0.28);
    border-radius: 4px;
  }
  .detail-field.mult-check-c0 .detail-value { color: #ffd98a; }

  .mult-chip.mult-check-c1 {
    background: rgba(224, 108, 117, 0.4);
    border-color: rgba(224, 108, 117, 0.85);
    box-shadow: 0 0 0 1px rgba(245, 176, 182, 0.25);
  }
  .mult-chip.mult-check-c1 .v { color: #f5b0b6; }

  .detail-field.mult-check-c1 {
    background: rgba(224, 108, 117, 0.28);
    border-radius: 4px;
  }
  .detail-field.mult-check-c1 .detail-value { color: #f5b0b6; }

  .mult-chip.mult-check-c2 {
    background: rgba(152, 195, 121, 0.4);
    border-color: rgba(152, 195, 121, 0.85);
    box-shadow: 0 0 0 1px rgba(197, 224, 176, 0.25);
  }
  .mult-chip.mult-check-c2 .v { color: #c5e0b0; }

  .detail-field.mult-check-c2 {
    background: rgba(152, 195, 121, 0.28);
    border-radius: 4px;
  }
  .detail-field.mult-check-c2 .detail-value { color: #c5e0b0; }

  .mult-chip.mult-check-c3 {
    background: rgba(126, 200, 227, 0.4);
    border-color: rgba(91, 159, 212, 0.9);
    box-shadow: 0 0 0 1px rgba(184, 224, 240, 0.25);
  }
  .mult-chip.mult-check-c3 .v { color: #b8e0f0; }

  .detail-field.mult-check-c3 {
    background: rgba(126, 200, 227, 0.28);
    border-radius: 4px;
  }
  .detail-field.mult-check-c3 .detail-value { color: #b8e0f0; }

  .rotation-mult-meta {
    font-size: 0.62rem;
    color: var(--muted);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .rotation-stack-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem 0.45rem;
    padding: 0.28rem 0.45rem 0.35rem;
    border-top: 1px dashed var(--border);
    background: rgba(91, 159, 212, 0.05);
  }

  .catalog-stack-item {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.68rem;
    color: var(--muted);
  }

  .catalog-stack-item .stack-input { width: 2rem; }

  .catalog-stack-badge {
    font-size: 0.62rem;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--accent2);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
  }

  .catalog-stack-badge.has-override {
    border-color: rgba(240, 198, 116, 0.45);
    color: var(--result);
  }

  .catalog-stack-badge:hover { border-color: var(--accent); }

  .row-damage.damage-tooltip { cursor: help; text-decoration: underline dotted var(--muted); text-underline-offset: 2px; }
  .row-damage .dmg-expect { font-variant-numeric: tabular-nums; }
  .row-damage .dmg-crit-label {
    margin-left: 0.35rem;
    font-size: 0.72em;
    color: var(--muted);
    font-weight: 600;
  }
  .row-damage .dmg-crit {
    margin-left: 0.15rem;
    font-variant-numeric: tabular-nums;
    color: var(--result);
    font-weight: 600;
  }
  .mult-chip-crit { opacity: 0.92; }

  .rotation-num {
    text-align: center;
    font-size: 0.75rem;
    color: var(--muted);
    font-weight: 600;
  }

  .rotation-num-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    min-width: 24px;
  }

  .catalog-timeline-badge,
  .in-axis-badge.catalog-timeline-badge {
    font-size: 10px;
    font-weight: 700;
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.2);
    border: none;
    border-radius: 4px;
    padding: 2px 8px;
    white-space: nowrap;
    line-height: 1.4;
    letter-spacing: 0.03em;
  }

  .name-cell {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    min-width: 0;
  }

  .name-cell input { flex: 1; min-width: 0; }

  .catalog-pick {
    width: 46px;
    flex-shrink: 0;
    padding: 0.2rem 0.15rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: #2a4a6b;
    color: var(--accent2);
    font-size: 0.68rem;
    cursor: pointer;
  }

  .catalog-badge {
    font-size: 0.65rem;
    color: var(--warn);
    white-space: nowrap;
  }

  .team-bar {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
  }

  #teamBar[hidden] {
    display: none;
  }

  .calc-team-nav-dock .team-bar {
    margin-bottom: 0;
  }

  /* —— 详细计算页：顶部紧凑摘要横幅 + 主列 —— */
  .calc-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    min-width: 0;
    /* 与上方配置区右侧留白大致对齐：编辑轴列表 / 时间线整体左收 */
    --calc-editor-right-gap: clamp(2.75rem, 8vw, 7rem);
  }

  .calc-summary-bar.summary-bar {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: linear-gradient(135deg, var(--surface) 0%, rgba(var(--accent-rgb), 0.02) 100%);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    padding: 0;
    margin: 0 0 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    width: 100%;
  }

  .calc-summary-bar.summary-bar::-webkit-scrollbar {
    display: none;
    height: 0;
  }

  .calc-summary-bar .summary-group {
    display: contents;
  }

  .calc-summary-bar .summary-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    white-space: nowrap;
    margin: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    flex: 0 0 auto;
  }

  .calc-summary-bar > .summary-group-stats > .summary-item + .summary-item,
  .calc-summary-bar > .summary-group-chars > .summary-item + .summary-item,
  .calc-summary-bar > .summary-group-chars > .summary-item:first-child {
    border-left: 1px solid var(--border);
  }

  .calc-summary-bar .summary-item-label {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .calc-summary-bar .summary-item-value {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }

  .calc-summary-bar .summary-item.total .summary-item-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent);
    text-shadow: 0 0 20px rgba(var(--accent-rgb), 0.3);
  }

  .calc-summary-bar .summary-item.dps .trend-up {
    color: var(--ok);
    font-size: 11px;
    line-height: 1;
  }

  .calc-summary-bar .summary-item.dps .trend-down {
    color: #ff5050;
    font-size: 11px;
    line-height: 1;
  }

  .calc-summary-bar .summary-item.char {
    cursor: pointer;
    transition: background 150ms, opacity 150ms;
  }

  .calc-summary-bar .summary-item.char::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--color-attack);
  }

  .calc-summary-bar .summary-item.char[data-member-slot='0']::before {
    background: #2dd4bf;
  }

  .calc-summary-bar .summary-item.char[data-member-slot='1']::before {
    background: #c084fc;
  }

  .calc-summary-bar .summary-item.char[data-member-slot='2']::before {
    background: #4a9eff;
  }

  .calc-summary-bar .summary-item.char[data-member-slot='3']::before {
    background: var(--color-heavy);
  }

  .calc-summary-bar .summary-item.char[data-name='陆·赫斯']::before {
    background: #2dd4bf;
  }

  .calc-summary-bar .summary-item.char[data-name='达妮娅']::before,
  .calc-summary-bar .summary-item.char[data-name='达尼娅']::before {
    background: #c084fc;
  }

  .calc-summary-bar .summary-item.char[data-name='莫宁']::before {
    background: #4a9eff;
  }

  .calc-summary-bar .summary-item.char[data-name='特殊']::before,
  .calc-summary-bar .summary-item.char[data-switch-special]::before {
    background: var(--accent);
  }

  .calc-summary-bar .summary-item.char .summary-item-value {
    display: inline-block;
    transition: transform 150ms ease, color 150ms ease;
    color: var(--text-primary);
  }

  .char-card-damage {
    color: var(--text-primary);
  }

  .char-card-percent {
    color: var(--text-muted);
  }

  .calc-summary-bar .summary-item.char:hover {
    background: var(--hover-bg);
  }

  .calc-summary-bar .summary-item.char:hover .summary-item-value {
    transform: scale(1.05);
  }

  .calc-summary-bar .summary-item.char.active {
    background: rgba(var(--accent-rgb), 0.08);
  }

  .calc-summary-bar .summary-item.char.active .summary-item-value {
    color: var(--accent);
    font-weight: 700;
  }

  .calc-summary-bar .summary-item.char[data-percent='0'],
  .calc-summary-bar .summary-item.char.is-zero {
    opacity: 0.35;
  }

  .calc-summary-bar .summary-item.char[data-percent='0'] .summary-item-value,
  .calc-summary-bar .summary-item.char.is-zero .summary-item-value {
    color: var(--text-muted);
  }

  .calc-summary-bar .summary-item.char[data-percent='0']:hover,
  .calc-summary-bar .summary-item.char.is-zero:hover {
    opacity: 0.75;
  }

  .calc-summary-bar .summary-item.monster .summary-item-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
  }

  .calc-summary-bar .summary-item.monster .unit {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 400;
  }

  .calc-summary-bar .summary-inline-input {
    width: 52px;
    height: 24px;
    padding: 0 4px;
    background: var(--hover-bg);
    border: 1px solid var(--input-border);
    border-radius: 5px;
    color: var(--text-primary, var(--text));
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
  }

  .calc-summary-bar .summary-inline-input.summary-item-value {
    font-size: 15px;
    font-weight: 700;
  }

  .calc-summary-bar .summary-inline-input:focus {
    border-color: var(--accent);
    outline: none;
  }

  .calc-summary-bar .summary-inline-input[readonly],
  .calc-summary-bar .summary-inline-input[data-cycle-axis-sum] {
    cursor: default;
    opacity: 0.92;
  }

  .calc-summary-bar .summary-inline-input[readonly]:focus,
  .calc-summary-bar .summary-inline-input[data-cycle-axis-sum]:focus {
    border-color: var(--text-muted);
  }

  .cycle-dur-popover .cycle-dur-popover__unit {
    font-size: 12px;
    color: var(--text-muted, var(--muted));
    margin-left: 2px;
  }

  .calc-summary-bar .summary-item-suffix {
    font-size: 12px;
    color: var(--text-muted, var(--muted));
  }

  @media (max-width: 860px) {
    .calc-summary-bar.summary-bar {
      flex-wrap: wrap;
      overflow-x: visible;
    }

    .calc-summary-bar .summary-group {
      display: flex;
      align-items: stretch;
      flex: 1 1 100%;
      min-width: 0;
      overflow-x: auto;
      scrollbar-width: none;
    }

    .calc-summary-bar .summary-group::-webkit-scrollbar {
      display: none;
    }

    .calc-summary-bar .summary-group-chars {
      border-top: 1px solid var(--border);
    }

    .calc-summary-bar .summary-group-stats .summary-item:first-child {
      border-left: 0;
    }
  }

  .calc-main-col {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
  }

  /* 兼容旧类名（若仍有残留节点） */
  .calc-summary-rail,
  .calc-summary-totals,
  .calc-member-cards,
  .calc-monster-block {
    display: contents;
  }

  .calc-main-title-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
  }

  .calc-main-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-title);
    letter-spacing: 0.02em;
  }

  .calc-main-title::before {
    content: '';
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    margin-right: 0.45rem;
    background: var(--accent);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    vertical-align: 0.05em;
  }

  .calc-main-hint {
    margin: 0 0 0.55rem;
    width: 100%;
  }

  .calc-section-label,
  .calc-section-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    color: var(--text-title);
  }

  .calc-section-label::before,
  .calc-timeline-panel > .calc-section-title::before {
    content: '';
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--accent);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    flex-shrink: 0;
  }

  .calc-rotation-panel {
    padding: 0.85rem 1rem 1rem;
  }

  .calc-axis-meta-block {
    margin: 0.25rem 0 0.75rem;
    padding: 0.85rem 1rem 1rem;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    width: calc(100% - var(--calc-editor-right-gap, 0px));
    max-width: calc(100% - var(--calc-editor-right-gap, 0px));
    box-sizing: border-box;
  }

  .action-btns {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }

  .action-btn {
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-primary, var(--text));
    background: var(--hover-bg);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: background 150ms, border-color 150ms, color 150ms;
    font-family: inherit;
  }

  .action-btn:hover {
    background: var(--accent-bg);
    border-color: var(--text-muted);
  }

  .calc-cycle-config {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
  }

  .cycle-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
  }

  .cycle-toggle-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    margin: 0;
  }

  .cycle-toggle-wrap input[data-cycle-enabled] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
  }

  .cycle-toggle {
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: var(--hover-bg);
    position: relative;
    flex-shrink: 0;
    transition: background 200ms;
    pointer-events: none;
  }

  .cycle-toggle::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 200ms;
  }

  .cycle-toggle-wrap input[data-cycle-enabled]:checked + .cycle-toggle {
    background: var(--accent);
  }

  .cycle-toggle-wrap input[data-cycle-enabled]:checked + .cycle-toggle::after {
    transform: translateX(16px);
  }

  .cycle-toggle-wrap:focus-within .cycle-toggle {
    box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.35);
  }

  .cycle-toggle-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, var(--text));
  }

  .calc-cycle-config .cycle-count-field {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted, var(--muted));
  }

  .cycle-count-select {
    height: 32px;
    padding: 0 12px;
    background: var(--hover-bg);
    border: 1px solid var(--input-border);
    border-radius: 6px;
    color: var(--text-primary, var(--text));
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    color-scheme: dark;
  }

  .cycle-count-select:focus {
    border-color: var(--accent);
    outline: none;
  }

  .cycle-count-select option {
    color: #f0f0f0;
    background-color: #1a1a1a;
  }

  .cycle-count-select option:checked,
  .cycle-count-select option:hover,
  .cycle-count-select option:focus {
    color: var(--text-primary)fff;
    background-color: #2a2a2a;
  }

  .calc-cycle-config .cycle-config-hint {
    margin: 0;
    flex: 1;
    min-width: 10rem;
    font-size: 12px;
  }

  .calc-cycle-config .cycle-config-body {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  .cycle-tabs,
  .calc-cycle-config .cycle-round-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 2px;
  }

  .cycle-tab.cycle-round-tab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 150ms, background 150ms, opacity 150ms, box-shadow 150ms;
    min-width: 168px;
    flex: 0 0 auto;
    color: inherit;
    font: inherit;
    text-align: left;
    touch-action: none;
    user-select: none;
  }

  .cycle-tab.cycle-round-tab:hover {
    border-color: var(--border-strong);
  }

  .cycle-tab.cycle-round-tab.active {
    border-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.06);
    color: var(--text-primary, var(--text));
  }

  .cycle-tab.cycle-round-tab.has-data:not(.active) {
    border-color: rgba(var(--accent-rgb), 0.28);
  }

  .cycle-tab-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, var(--text));
  }

  .cycle-tab-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  .cycle-tab-dur {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    pointer-events: none;
  }

  .cycle-tab-dur-label,
  .cycle-tab-dur-unit {
    font-size: 11px;
    color: var(--text-muted, var(--muted));
    font-weight: 400;
    line-height: 1;
  }

  .cycle-tab-dur-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 22px;
    padding: 0 8px;
    background: var(--hover-bg);
    border: 1px solid var(--input-border);
    border-radius: 999px;
    color: var(--text-primary, var(--text));
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }

  .cycle-tab-damage {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 700;
    color: var(--accent);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
  }

  .cycle-tab.cycle-round-tab[data-cycle-round-draggable] {
    cursor: grab;
  }

  body.cycle-round-dragging .cycle-tab.cycle-round-tab {
    cursor: grabbing;
  }

  .cycle-tab.cycle-round-tab.dragging {
    opacity: 0.4;
  }

  .cycle-tab.cycle-round-tab.drop-before {
    box-shadow: none;
    border-left: 2px dashed var(--accent);
  }

  .cycle-tab.cycle-round-tab.drop-after {
    box-shadow: none;
    border-right: 2px dashed var(--accent);
  }

  .cycle-hint {
    font-size: 12px;
    color: var(--text-muted, var(--muted));
    padding: 8px 12px;
    background: var(--input-bg);
    border-radius: 6px;
    line-height: 1.6;
    margin: 0 0 0;
  }

  .calc-cycle-config .cycle-editing-hint {
    margin-bottom: 12px;
  }

  .calc-page .catalog-section-header {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - var(--calc-editor-right-gap, 0px));
    max-width: calc(100% - var(--calc-editor-right-gap, 0px));
    gap: 0.5rem 0.75rem;
    margin-top: 0.75rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--border);
    box-sizing: border-box;
  }

  .calc-page .catalog-toolbar,
  .calc-page .catalog-toolbar.axis-toolbar {
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    padding: 8px 0 4px;
  }

  .calc-page .catalog-toolbar .btn.sm {
    border-radius: 6px;
    font-size: 0.72rem;
  }

  .calc-page .rotation-list {
    width: calc(100% - var(--calc-editor-right-gap, 0px));
    max-width: calc(100% - var(--calc-editor-right-gap, 0px));
    align-items: stretch;
    box-sizing: border-box;
  }

  .calc-page .rotation-block,
  .calc-page .axis-row {
    width: 100%;
    border-radius: 8px;
    background: var(--input-bg);
  }

  .calc-page .rotation-block.in-timeline,
  .calc-page .axis-row.in-timeline,
  .calc-page .axis-row.in-axis {
    border-color: rgba(var(--accent-rgb), 0.22);
    background: rgba(var(--accent-rgb), 0.03);
    box-shadow: none;
  }

  .calc-page .rotation-block.in-timeline .rotation-num,
  .calc-page .axis-row.in-timeline .rotation-num,
  .calc-page .axis-row.in-axis .rotation-num {
    color: var(--accent);
  }

  .calc-page .axis-row.not-in-axis {
    opacity: 0.5;
  }

  .calc-page .axis-row.not-in-axis:hover {
    opacity: 0.8;
  }

  .calc-page .rotation-item.axis-row-main {
    width: 100%;
    padding: 10px 12px;
    gap: 8px;
  }

  .calc-page .rotation-mult-row:not(.axis-row-detail) {
    padding: 0.35rem 0.55rem 0.5rem;
    border-top: 1px solid var(--border);
  }

  .calc-page .axis-row-detail.rotation-mult-row,
  .calc-page .axis-row-detail,
  .calc-page .axis-detail {
    border-top: 1px dashed transparent;
    background: transparent;
    padding: 0 12px 0 44px;
  }

  .calc-page .axis-row-detail.expanded,
  .calc-page .axis-detail.expanded {
    max-height: 72px;
    padding: 8px 12px 8px 44px;
    border-top-color: var(--text-muted);
    background: rgba(0, 0, 0, 0.15);
  }

  .calc-page .mult-chip-strip {
    gap: 0.35rem;
  }

  .calc-page .mult-chip {
    min-width: 4.2rem;
    padding: 0.28rem 0.4rem;
    border-radius: 6px;
    background: var(--surface);
    border: 1px solid var(--border);
  }

  .calc-timeline-panel {
    margin-bottom: 0;
    width: calc(100% - var(--calc-editor-right-gap));
    max-width: calc(100% - var(--calc-editor-right-gap));
    box-sizing: border-box;
  }

  .calc-timeline-panel .phase,
  .calc-timeline-panel .phase-card {
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
  }

  .calc-timeline-panel .phase-header,
  .calc-timeline-panel .phase-head {
    background: transparent;
    border-bottom: 1px solid var(--border);
  }

  .calc-timeline-panel .phase-card.collapsed .phase-header,
  .calc-timeline-panel .phase-card.collapsed .phase-head {
    border-bottom-color: transparent;
  }

  .calc-timeline-panel .phase.locked .phase-header,
  .calc-timeline-panel .phase.locked .phase-head {
    background: rgba(var(--accent-rgb), 0.04);
  }

  .calc-timeline-panel .summary-bar {
    background: var(--surface2);
    border: 1px solid var(--border);
  }

  .calc-timeline-panel .cycle-round-card {
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
  }

  /* ???????????? */
  .calc-team-nav .team-summary-grid {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 0.65rem;
  }

  .calc-team-nav .team-summary-grid input {
    width: 100%;
    text-align: left;
  }

  .calc-team-nav .team-monster-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.45rem;
  }

  .calc-team-nav .team-monster-row .field {
    justify-content: space-between;
  }

  .calc-team-nav .team-monster-row input {
    width: 5rem;
  }

  .calc-team-nav .member-tabs {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .calc-team-nav .member-tab {
    width: 100%;
    min-width: 0;
  }

  .calc-team-nav .team-breakdown {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.78rem;
    color: var(--muted);
  }

  .calc-member-switch {
    margin-bottom: 0.65rem;
    padding: 0.55rem 0.65rem;
  }

  .special-sidebar-below {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  .special-sidebar-below > .panel {
    margin-top: 0.55rem;
  }

  /* 特殊技能 · 顶部紧凑配置栏 */
  .special-config-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin: 0 0 16px;
    flex-wrap: wrap;
  }

  .special-config-bar .config-tabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .special-config-bar .config-tab {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 150ms, background 150ms;
  }

  .special-config-bar .config-tab:hover {
    color: var(--text-primary);
  }

  .special-config-bar .config-tab.active {
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
  }

  .special-char-indicators {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
  }

  .char-indicator {
    appearance: none;
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 150ms, background 150ms;
  }

  .char-indicator:hover {
    color: var(--text-primary);
    background: var(--hover-bg);
  }

  .char-indicator.is-active {
    color: var(--text-primary);
    background: rgba(var(--accent-rgb), 0.08);
  }

  .char-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--text-muted);
  }

  .char-indicator[data-member-slot='0'] .char-dot,
  .char-indicator[data-char='陆·赫斯'] .char-dot {
    background: #2dd4bf;
  }

  .char-indicator[data-member-slot='1'] .char-dot,
  .char-indicator[data-char='达妮娅'] .char-dot,
  .char-indicator[data-char='达尼娅'] .char-dot {
    background: #c084fc;
  }

  .char-indicator[data-member-slot='2'] .char-dot,
  .char-indicator[data-char='莫宁'] .char-dot {
    background: #4a9eff;
  }

  .char-indicator[data-char='特殊'] .char-dot {
    background: var(--accent);
  }

  .char-indicator[data-percent='0'],
  .char-indicator.is-zero {
    opacity: 0.35;
  }

  .char-indicator[data-percent='0']:hover,
  .char-indicator.is-zero:hover {
    opacity: 0.75;
  }

  .char-indicator.is-static {
    cursor: default;
  }

  .char-indicator-pct {
    font-family: var(--font-mono);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: inherit;
    opacity: 0.85;
  }

  .special-harmo {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin-left: auto;
  }

  .harmo-label {
    font-size: 12px;
    color: var(--text-muted);
  }

  .harmo-value {
    font-family: 'JetBrains Mono', var(--font-mono, monospace);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
  }

  .special-buff-summary {
    margin: -8px 0 16px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
  }

  .special-buff-summary-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 10px;
  }

  .special-buff-summary-head strong {
    font-size: 13px;
    color: var(--text-primary);
  }

  .special-buff-summary-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 6px 10px;
  }

  .special-buff-summary-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: 6px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    font-size: 12px;
  }

  .special-buff-summary-item.is-off {
    opacity: 0.45;
  }

  .special-buff-summary-item .sbs-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
  }

  .special-buff-summary-item .sbs-cat {
    color: var(--text-muted);
    font-size: 11px;
  }

  .special-buff-summary-item .sbs-val {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    font-weight: 600;
  }

  .special-buff-summary-item .sbs-state {
    font-size: 11px;
    color: var(--text-muted);
  }

  @media (max-width: 720px) {
    .special-harmo {
      margin-left: 0;
      width: 100%;
    }
  }

  .calc-member-switch .member-tabs {
    flex-direction: column;
    margin-bottom: 0;
  }

  .calc-member-switch .member-tab {
    width: 100%;
    min-width: 0;
  }

  .check-panel > .calc-member-switch {
    margin: 0.5rem 0 0.65rem;
  }

  .check-panel > .calc-member-switch .member-tabs {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .check-panel > .calc-member-switch .member-tab {
    width: auto;
    min-width: 110px;
  }

  .export-scheme-dock {
    margin-top: 1rem;
  }

  .team-summary-grid {
    display: grid;
    grid-template-columns: 1fr 120px 1fr;
    gap: 1rem;
    text-align: center;
    align-items: end;
    margin-bottom: 0.75rem;
  }

  @media (max-width: 640px) {
    .team-summary-grid { grid-template-columns: 1fr; }
  }

  .team-summary-grid input {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--result);
  }

  .team-monster-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    align-items: center;
    padding: 0.55rem 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.65rem;
  }

  .team-monster-row .field {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }

  .team-monster-row label {
    font-size: 0.78rem;
    color: var(--muted);
    white-space: nowrap;
  }

  .team-monster-row input {
    width: 72px;
  }

  .member-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
  }

  .team-shared-buff-section {
    margin-bottom: 0.55rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface2);
    overflow: hidden;
  }

  .team-shared-buff-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.6rem;
    cursor: pointer;
    user-select: none;
  }

  .team-shared-buff-head .title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent2);
  }

  .team-shared-buff-body {
    padding: 0 0.6rem 0.6rem;
    border-top: 1px solid var(--border);
  }

  .team-shared-buff-body.collapsed {
    display: none;
  }

  .team-buff-tag {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 8px;
    white-space: nowrap;
    letter-spacing: 0.02em;
  }

  .team-buff-tag--weapon {
    color: #e8b86d;
    border-color: rgba(232, 184, 109, 0.45);
    background: rgba(232, 184, 109, 0.1);
  }

  .team-buff-tag--echo {
    color: #7ec8e3;
    border-color: rgba(126, 200, 227, 0.45);
    background: rgba(126, 200, 227, 0.1);
  }

  .team-buff-tag--set {
    color: #9bcea0;
    border-color: rgba(155, 206, 160, 0.45);
    background: rgba(155, 206, 160, 0.1);
  }

  .team-buff-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
  }

  .weapon-team-buff-matrix {
    margin-top: 0.55rem;
    padding: 0.55rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.12);
  }

  .weapon-team-buff-matrix-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--accent2);
    margin-bottom: 0.45rem;
  }

  /* —— 全队 Buff 分配（卡片流 + BuffCell） ——
   * .buff-source-board / .buff-source-card / .buff-grid
   * 状态指示器：.buff-cell--active | --disabled | --none | --stackable
   */
  .buff-source-board {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  @media (min-width: 960px) {
    .buff-source-board {
      grid-template-columns: 1fr 1fr;
    }
  }

  .buff-source-card {
    --tba-accent: rgba(255, 255, 255, 0.28);
    /* 实色底：固定接收列滚动遮罩与卡片一致 */
    --tba-card-bg: color-mix(in srgb, var(--surface) 94%, #ffffff 6%);
    --tba-label-col-w: 64px;
    /* 左右行高严格同源，防止横滑区与接收列错位 */
    --buff-header-height: 36px;
    --buff-row-height: 44px;
    --buff-row-gap: 12px;
    --buff-body-pad-y: 12px;
    --buff-body-pad-left: 12px;
    --buff-body-pad-right: 16px;
    /* 与自定义横向滚动条同高；两侧底 padding 都预留，避免仅右侧被顶歪 */
    --buff-hscroll-size: 6px;
    background: var(--tba-card-bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
  }

  /* 无 Buff：紧凑单行，低对比，不抢焦点 */
  .buff-source-card.is-empty {
    background: var(--input-bg);
    border-color: var(--text-muted);
    opacity: 0.72;
  }

  .buff-source-card.is-empty > .card-header {
    min-height: 40px;
    padding: 0.35rem 0.7rem 0.35rem 0.85rem;
    border-bottom: none;
    background: transparent;
  }

  .buff-source-card.is-empty .card-header__avatar .char-avatar-card {
    width: 28px;
    height: 28px;
    opacity: 0.7;
  }

  .buff-source-card.is-empty .card-header__title {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--muted);
  }

  .card-header__empty-tag {
    flex-shrink: 0;
    margin-left: 0.15rem;
    padding: 0.08rem 0.4rem;
    border-radius: 4px;
    background: var(--hover-bg);
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.3;
  }

  .buff-source-card > .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem 0.55rem 0.85rem;
    border-bottom: 1px solid var(--border);
    border-left: 3px solid var(--tba-accent);
    background: rgba(0, 0, 0, 0.12);
  }

  .buff-source-card.is-collapsed > .card-header {
    border-bottom-color: transparent;
  }

  .card-header__identity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
  }

  .card-header__avatar .char-avatar-card {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }

  .card-header__avatar .char-avatar-card.is-plain .char-avatar-badge,
  .card-header__avatar .char-avatar-card.is-plain .char-avatar-rank {
    display: none;
  }

  .card-header__title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-title, var(--text));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .card-header__count {
    flex-shrink: 0;
    min-width: 1.25rem;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: var(--accent-bg);
    color: var(--muted);
    font-size: 0.65rem;
    font-weight: 600;
    text-align: center;
  }

  .card-header__toggle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
  }

  .card-header__toggle:hover {
    border-color: var(--border);
    background: var(--hover-bg);
    color: var(--text);
  }

  .card-header__chevron {
    display: block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    transition: transform 200ms ease;
  }

  .buff-source-card.is-collapsed .card-header__chevron {
    transform: rotate(-90deg);
  }

  .buff-source-card > .card-body {
    display: flex;
    max-height: 960px;
    opacity: 1;
    overflow: hidden; /* 外层不滚；仅右侧 buff 区横向滚 */
    border-radius: 0 0 8px 8px;
    transition: max-height 200ms ease, opacity 200ms ease;
  }

  .buff-source-card.is-collapsed > .card-body {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
  }

  /* 左侧接收角色列：横向滚动时固定不动 */
  .buff-source-card .fixed-label-col {
    flex-shrink: 0;
    width: var(--tba-label-col-w);
    position: sticky;
    left: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--buff-row-gap);
    padding: var(--buff-body-pad-y) 0 calc(var(--buff-body-pad-y) + var(--buff-hscroll-size))
      var(--buff-body-pad-left);
    box-sizing: border-box;
    background: var(--tba-card-bg);
    box-shadow: 6px 0 10px -6px rgba(0, 0, 0, 0.55);
  }

  .buff-source-card .fixed-label-col .label-header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: var(--buff-header-height);
    box-sizing: border-box;
    border-bottom: 1px solid var(--border);
    font-size: 0.7rem;
    color: var(--muted);
    text-align: center;
  }

  .buff-source-card .fixed-label-col .label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: var(--buff-row-height);
    min-height: var(--buff-row-height);
    max-height: var(--buff-row-height);
    box-sizing: border-box;
    overflow: hidden;
  }

  /* 右侧 Buff 区外壳：横滑 + 左右箭头 */
  .buff-source-card .scrollable-buff-shell {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: stretch;
  }

  .buff-source-card .scrollable-buff-area {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    /* 与 fixed-label-col 上下 padding 完全一致（含滚动条预留） */
    padding: var(--buff-body-pad-y) var(--buff-body-pad-right)
      calc(var(--buff-body-pad-y) + var(--buff-hscroll-size)) 8px;
    box-sizing: border-box;
    /* Firefox：默认几乎不可见，悬停/滚动时加深 */
    --tba-sb-thumb: rgba(255, 255, 255, 0.05);
    --tba-sb-track: rgba(255, 255, 255, 0.02);
    scrollbar-width: thin;
    scrollbar-color: var(--tba-sb-thumb) var(--tba-sb-track);
    transition: scrollbar-color 200ms ease;
  }

  .buff-source-card .scrollable-buff-area.is-scroll-ui-visible {
    --tba-sb-thumb: rgba(255, 255, 255, 0.15);
    --tba-sb-track: rgba(255, 255, 255, 0.03);
  }

  /* WebKit：仅本区域自定义横向滚动条 */
  .buff-source-card .scrollable-buff-area::-webkit-scrollbar {
    height: var(--buff-hscroll-size);
  }

  .buff-source-card .scrollable-buff-area::-webkit-scrollbar-track {
    background: var(--tba-sb-track);
    border-radius: 3px;
    transition: background 200ms ease;
  }

  .buff-source-card .scrollable-buff-area::-webkit-scrollbar-thumb {
    background: var(--tba-sb-thumb);
    border-radius: 3px;
    transition: background 200ms ease;
  }

  .buff-source-card .scrollable-buff-area.is-scroll-ui-visible::-webkit-scrollbar-thumb:hover,
  .buff-source-card .scrollable-buff-area::-webkit-scrollbar-thumb:hover {
    background: var(--border-strong);
  }

  .buff-source-card .scrollable-buff-arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: rgba(22, 22, 24, 0.72);
    color: var(--text-primary);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease, background 200ms ease, color 200ms ease, border-color 200ms ease;
  }

  /* 可滚动时：悬停 / 滚动条可见态 / 焦点内 → 箭头显现 */
  .buff-source-card .scrollable-buff-shell.is-scrollable:hover .scrollable-buff-arrow:not([hidden]),
  .buff-source-card .scrollable-buff-shell.is-scrollable.is-scroll-ui-visible .scrollable-buff-arrow:not([hidden]),
  .buff-source-card .scrollable-buff-shell.is-scrollable:focus-within .scrollable-buff-arrow:not([hidden]) {
    opacity: 1;
    pointer-events: auto;
  }

  .buff-source-card .scrollable-buff-arrow--prev {
    left: 2px;
  }

  .buff-source-card .scrollable-buff-arrow--next {
    right: 2px;
  }

  .buff-source-card .scrollable-buff-arrow:hover {
    background: rgba(40, 40, 44, 0.92);
    border-color: rgba(201, 169, 110, 0.35);
    color: var(--text-primary);
  }

  .buff-source-card .scrollable-buff-arrow[hidden] {
    display: none !important;
  }

  .buff-source-card .scrollable-buff-area > .buff-grid {
    display: grid;
    grid-template-columns: repeat(var(--buff-cols, 1), minmax(100px, 1fr));
    grid-template-rows: var(--buff-header-height) repeat(3, var(--buff-row-height));
    column-gap: 24px;
    row-gap: var(--buff-row-gap);
    align-items: stretch;
    width: max-content;
    min-width: 100%;
  }

  /* 禁止 grid 子项按内容撑高行轨（否则叠层 cell 会把右侧行顶歪） */
  .buff-source-card .scrollable-buff-area > .buff-grid > * {
    min-width: 0;
    min-height: 0;
  }

  .buff-grid__buff-head {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--buff-header-height);
    max-height: var(--buff-header-height);
    box-sizing: border-box;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
    line-height: 1.25;
    font-weight: 500;
    color: var(--muted);
    text-align: center;
    min-width: 0;
    max-width: 100%;
    padding: 0 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .buff-grid__buff-head.is-clickable {
    cursor: pointer;
    color: var(--muted);
    text-decoration: underline dotted;
    text-underline-offset: 2px;
  }

  .buff-grid__buff-head.is-clickable:hover {
    color: var(--accent, #c9a96e);
  }

  .buff-grid__recv {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    padding: 0;
  }

  .buff-grid__recv .char-avatar-card {
    width: 36px;
    height: 36px;
  }

  .buff-grid__recv .char-avatar-badge,
  .buff-grid__recv .char-avatar-rank {
    display: none !important;
  }

  .buff-grid__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--buff-row-height);
    max-height: var(--buff-row-height);
    min-height: 0;
    padding: 0 2px;
    box-sizing: border-box;
    /* 勿 hidden：叠层角标/ bump 动画会被裁切，看起来像「应用后角标消失」 */
    overflow: visible;
  }

  .team-buff-assign-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
  }

  .team-buff-assign-cell .team-buff-assign-stack {
    width: 3.2rem;
    min-width: 2.6rem;
    padding: 0.12rem 0.2rem;
    font-size: 0.7rem;
    text-align: center;
  }

  /* BuffCell — 20px 状态圆，36px 点击热区 */
  .buff-cell {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0 auto;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .buff-cell__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: inherit;
    z-index: 1;
  }

  .buff-cell__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-sizing: border-box;
    transition:
      transform 150ms ease,
      background 150ms ease,
      border-color 150ms ease,
      color 150ms ease,
      opacity 150ms ease,
      box-shadow 150ms ease;
  }

  .buff-cell__icon {
    width: 12px;
    height: 12px;
    display: block;
    opacity: 0;
    transition: opacity 150ms ease;
  }

  .buff-cell__icon--lock {
    width: 18px;
    height: 18px;
    opacity: 1;
    color: var(--text-muted);
    transition: color 150ms ease;
  }

  /* active / stackable：可勾选 */
  .buff-cell--active .buff-cell__dot,
  .buff-cell--stackable .buff-cell__dot {
    border: 2px solid var(--accent, #c9a96e);
    background: transparent;
    color: var(--text-primary);
  }

  .buff-cell--active.is-checked .buff-cell__dot,
  .buff-cell--stackable.is-checked .buff-cell__dot,
  .buff-cell--active:has(.buff-cell__input:checked) .buff-cell__dot,
  .buff-cell--stackable:has(.buff-cell__input:checked) .buff-cell__dot {
    background: var(--accent, #c9a96e);
    border-color: var(--accent, #c9a96e);
  }

  .buff-cell--active.is-checked .buff-cell__icon,
  .buff-cell--stackable.is-checked .buff-cell__icon,
  .buff-cell--active:has(.buff-cell__input:checked) .buff-cell__icon,
  .buff-cell--stackable:has(.buff-cell__input:checked) .buff-cell__icon {
    opacity: 1;
  }

  /* 20px → 22px */
  .buff-cell--active:hover .buff-cell__dot,
  .buff-cell--stackable .buff-cell__toggle:hover .buff-cell__dot {
    transform: scale(1.1);
  }

  /* disabled：固定不生效，18px 锁 */
  .buff-cell--disabled {
    cursor: not-allowed;
  }

  .buff-cell--disabled .buff-cell__dot {
    width: 20px;
    height: 20px;
    background: transparent;
    border: none;
  }

  .buff-cell--disabled:hover .buff-cell__icon--lock {
    color: var(--text-muted);
  }

  /* none：极淡占位 */
  .buff-cell--none {
    cursor: default;
    pointer-events: none;
  }

  .buff-cell--none .buff-cell__dot {
    width: 20px;
    height: 20px;
    background: transparent;
    border: 1.5px dashed var(--border-strong);
    opacity: 0.45;
  }

  /* stackable badge：独立热区，与圆点并列（间距见 .buff-cell--stackable gap: 4px） */
  .buff-cell__badge-hit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-muted);
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
  }

  .buff-cell__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: transparent;
    color: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    pointer-events: none;
    box-sizing: border-box;
    transition: transform 150ms ease, background 150ms ease, color 150ms ease, opacity 150ms ease;
  }

  .buff-cell__stack-hint {
    display: block;
    width: 14px;
    height: 14px;
  }

  /* 层数 0：显示叠层提示图标（可点开设置） */
  .buff-cell__badge.is-zero {
    min-width: 18px;
    height: 18px;
    padding: 0;
    background: transparent;
    color: var(--text-muted);
    opacity: 1;
  }

  /* 已有叠层：accent 数字角标 */
  .buff-cell__badge.is-stacked {
    background: color-mix(in srgb, var(--accent, #c9a96e) 80%, transparent);
    color: var(--text-primary);
  }

  .buff-cell__badge-hit:hover,
  .buff-cell__badge-hit:focus-visible {
    color: var(--text-primary);
  }

  .buff-cell__badge-hit:hover .buff-cell__badge.is-zero,
  .buff-cell__badge-hit:focus-visible .buff-cell__badge.is-zero {
    color: var(--text-primary);
  }

  .buff-cell__badge-hit:hover .buff-cell__badge.is-stacked,
  .buff-cell__badge-hit:focus-visible .buff-cell__badge.is-stacked {
    filter: brightness(1.08);
  }

  .buff-cell__badge.is-bump {
    animation: tba-badge-bump 200ms ease;
  }

  @keyframes tba-badge-bump {
    0% { transform: scale(1.2); }
    100% { transform: scale(1); }
  }

  .buff-cell__badge-hit:hover .buff-cell__badge {
    transform: scale(1.1);
  }

  .buff-cell__badge-hit:hover .buff-cell__badge.is-bump {
    animation: none;
  }

  /* stackable：圆点开关 + 角标分列，间距 4px */
  .buff-cell--stackable {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: auto;
    height: auto;
    min-height: 36px;
    cursor: default;
  }

  .buff-cell--stackable .buff-cell__toggle {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
  }

  .buff-cell--stackable .buff-cell__input {
    inset: 0;
    width: 100%;
    height: 100%;
  }

  .buff-cell--stackable .buff-cell__badge-hit {
    position: relative;
    flex-shrink: 0;
  }

  .buff-cell--stackable.is-auto-stack .buff-cell__badge {
    background: var(--border-strong);
  }

  /* 叠层设置小面板（毛玻璃，宽 220px） */
  .tba-stack-popover {
    position: fixed;
    z-index: 13000;
    box-sizing: border-box;
    width: 220px;
    padding: 12px 14px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 32px var(--shadow);
    color: var(--text-primary);
  }

  .tba-stack-popover[hidden] {
    display: none !important;
  }

  .tba-stack-popover__title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent, #c9a96e);
    letter-spacing: 0.02em;
    margin-bottom: 10px;
  }

  .tba-stack-popover__progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 10px;
  }

  .tba-stack-popover__bar {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: var(--hover-bg);
    overflow: hidden;
  }

  .tba-stack-popover__bar > i {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--accent, #c9a96e);
    transition: width 120ms ease;
  }

  .tba-stack-popover__ratio {
    flex-shrink: 0;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    min-width: 2.6rem;
    text-align: right;
  }

  .tba-stack-popover__stepper {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 10px;
  }

  .tba-stack-popover__btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--hover-bg);
    color: var(--text);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
  }

  .tba-stack-popover__btn:hover:not(:disabled) {
    border-color: rgba(var(--accent-rgb), 0.45);
    background: rgba(201, 169, 110, 0.12);
  }

  .tba-stack-popover__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .tba-stack-popover__value {
    flex: 1;
    width: 0;
    min-width: 0;
    height: 32px;
    padding: 0 0.35rem;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.28);
    color: var(--text);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  .tba-stack-popover__value:focus {
    outline: none;
    border-color: rgba(201, 169, 110, 0.55);
  }

  .tba-stack-popover__slider {
    display: block;
    width: 100%;
    height: 24px;
    margin: 0 0 10px;
    padding: 0;
    cursor: pointer;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
  }

  .tba-stack-popover__slider:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .tba-stack-popover__slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: var(--border-strong);
  }

  .tba-stack-popover__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    margin-top: -9px;
    border-radius: 50%;
    border: 2px solid var(--surface);
    background: var(--accent, #c9a96e);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    cursor: pointer;
  }

  .tba-stack-popover__slider::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: var(--border-strong);
  }

  .tba-stack-popover__slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--surface);
    background: var(--accent, #c9a96e);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    cursor: pointer;
  }

  .tba-stack-popover__hint {
    margin: 0 0 8px;
    font-size: 0.68rem;
    line-height: 1.35;
  }

  .tba-stack-popover__apply {
    display: block;
    width: 100%;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(201, 169, 110, 0.4);
    border-radius: 8px;
    background: rgba(201, 169, 110, 0.16);
    color: var(--accent, #c9a96e);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
  }

  .tba-stack-popover__apply:hover {
    background: rgba(201, 169, 110, 0.26);
  }

  .tba-stack-popover__apply + .tba-stack-popover__hint {
    margin: 6px 0 0;
    text-align: center;
    opacity: 0.75;
  }

  .buff-item.buff-row-focus {
    outline: 2px solid var(--accent2, #7eb8e8);
    outline-offset: 2px;
    background: rgba(91, 159, 212, 0.12);
    transition: outline-color 0.2s ease, background 0.2s ease;
  }

  .weapon-team-buff-matrix .matrix-buff-mismatch {
    color: var(--muted);
    font-size: 0.78rem;
  }

  .buff-item.team-mirror input,
  .buff-item.team-mirror select {
    opacity: 0.88;
    cursor: default;
  }

  .member-tab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface2);
    color: var(--text);
    cursor: pointer;
    min-width: 110px;
    border-left-width: 3px;
  }

  .member-tab:hover { border-color: var(--accent); }

  .member-tab.active {
    background: #2a3d55;
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(91, 159, 212, 0.25);
  }

  .member-tab.slot-0 { border-left-color: #5b9fd4; }
  .member-tab.slot-1 { border-left-color: #98c379; }
  .member-tab.slot-2 { border-left-color: #e5c07b; }
  .member-tab.slot-special { border-left-color: #c678dd; }

  .special-skills-panel .special-skills-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 0.35rem;
  }

  .special-skills-panel .special-skills-head h2 {
    margin: 0;
  }

  .special-skills-panel .save-status {
    margin-left: auto;
  }

  .add-skill-btns {
    display: flex;
    gap: 8px;
    margin: 16px 0;
  }

  .add-skill-btn {
    flex: 1;
    padding: 10px;
    border: 1px dashed var(--dashed-border);
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    transition: all 150ms;
  }

  .add-skill-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.04);
  }

  .special-stats-bar {
    display: flex;
    gap: 2px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 16px;
  }

  .special-stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px;
  }

  .special-stat-item + .special-stat-item {
    border-left: 1px solid var(--border);
  }

  .special-stat-label {
    font-size: 11px;
    color: var(--text-muted);
  }

  .special-stat-value {
    font-family: 'JetBrains Mono', var(--font-mono, ui-monospace, monospace);
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
  }

  .special-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0.5rem;
  }

  .special-skill-card {
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
  }

  .special-skill-card.locked {
    border-color: rgba(201, 169, 110, 0.22);
  }

  .special-skill-card .skill-card-main {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .special-skill-card .skill-card-name {
    width: auto;
    min-width: 72px;
    max-width: 140px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 2px 6px;
  }

  .special-skill-card .skill-card-name:hover,
  .special-skill-card .skill-card-name:focus {
    border-color: var(--text-muted);
    background: var(--hover-bg);
  }

  .special-skill-card .skill-type-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
  }

  .special-skill-card .skill-type-badge.处决 {
    background: rgba(255, 107, 107, 0.1);
    color: #ff6b6b;
  }

  .special-skill-card .skill-type-badge.效应 {
    background: rgba(192, 132, 252, 0.1);
    color: #c084fc;
  }

  .special-skill-card .skill-type-badge:disabled {
    opacity: 0.75;
    cursor: default;
  }

  .special-skill-card .skill-param {
    display: flex;
    align-items: baseline;
    gap: 4px;
  }

  .special-skill-card .skill-param .param-label {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
  }

  .special-skill-card .skill-param .param-value {
    font-family: 'JetBrains Mono', var(--font-mono, ui-monospace, monospace);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
  }

  .special-skill-card .skill-param .param-value input,
  .special-skill-card .skill-param .param-value select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 1px 4px;
    min-width: 0;
    max-width: 88px;
  }

  .special-skill-card .skill-param .param-value input:hover,
  .special-skill-card .skill-param .param-value select:hover,
  .special-skill-card .skill-param .param-value input:focus,
  .special-skill-card .skill-param .param-value select:focus {
    border-color: var(--text-muted);
    background: var(--hover-bg);
  }

  .special-skill-card .skill-param .param-value input[readonly] {
    opacity: 0.85;
    cursor: default;
  }

  .special-skill-card .skill-param .param-value input.mult-input {
    width: 64px;
    text-align: right;
  }

  .special-skill-card .skill-param .param-value input[data-special-effect-count],
  .special-skill-card .skill-param .param-value input[data-special-track-layers],
  .special-skill-card .skill-param .param-value input[data-special-harmony-amp] {
    width: 48px;
    text-align: center;
  }

  .special-skill-card .skill-param + .skill-param {
    padding-left: 12px;
    border-left: 1px solid var(--border);
  }

  .special-skill-card .skill-card-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
  }

  .special-skill-card .skill-buff-char {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    flex-wrap: wrap;
  }

  .special-skill-card .skill-buff-char .mode-select {
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 5px;
    border: 1px solid var(--border);
    background: var(--hover-bg);
    color: var(--text-primary);
    max-width: 140px;
  }

  .special-skill-card .skill-damage {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .special-skill-card .skill-damage .expected {
    font-family: 'JetBrains Mono', var(--font-mono, ui-monospace, monospace);
    font-size: 15px;
    font-weight: 700;
    color: var(--accent);
  }

  .special-skill-card .skill-damage .sep {
    color: var(--text-muted);
  }

  .special-skill-card .skill-damage .crit {
    font-family: 'JetBrains Mono', var(--font-mono, ui-monospace, monospace);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-crit);
  }

  .special-skill-card .skill-card-actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
  }

  .special-skill-card .skill-card-action {
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 5px;
    color: var(--text-muted);
    background: var(--hover-bg);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 150ms;
  }

  .special-skill-card .skill-card-action:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
  }

  .special-skill-card .skill-card-action.active {
    color: var(--accent);
    border-color: rgba(201, 169, 110, 0.28);
  }

  .special-skill-card .skill-card-action.danger:hover {
    color: #ff5050;
    border-color: rgba(255, 80, 80, 0.2);
  }

  .special-cell-na {
    color: var(--muted);
    font-size: 0.82rem;
    text-align: center;
  }

  .special-mult-row {
    margin-top: 0.5rem;
  }

  .special-buff-row {
    margin-top: 0.5rem;
  }

  .member-tab .tab-name { font-size: 0.82rem; font-weight: 600; }
  .member-tab .tab-dmg { font-size: 0.75rem; color: var(--result); font-variant-numeric: tabular-nums; }

  .member-copy-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
  }

  .member-copy-label {
    margin: 0;
    flex: 0 0 auto;
  }

  .member-copy-select {
    flex: 1;
    min-width: 100px;
    padding: 0.28rem 0.4rem;
    font-size: 0.76rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
  }

  .team-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    font-size: 0.75rem;
    color: var(--muted);
  }

  .team-breakdown span strong { color: var(--text); }

  .member-name-input {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--accent2);
    background: transparent;
    border: none;
    border-bottom: 1px dashed var(--border);
    padding: 0.1rem 0;
    width: 100%;
    max-width: 140px;
  }

  .summary-readonly {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--muted);
    padding: 0.35rem 0;
  }

  .char-stat-group {
    grid-column: 1 / -1;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.55rem 0.65rem;
    background: var(--surface2);
  }

  .char-stat-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .char-stat-head label {
    font-size: 0.78rem;
    color: var(--muted);
    min-width: 4.5rem;
  }

  .char-stat-total {
    flex: 1;
    min-width: 72px;
    max-width: 100px;
    text-align: right;
    font-weight: 600;
    color: var(--accent2);
    background: var(--surface);
    cursor: default;
  }

  .char-stat-sources {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }

  .char-stat-sources.collapsed { display: none; }

  .char-stat-item {
    display: grid;
    grid-template-columns: 1fr 72px auto;
    gap: 0.4rem;
    align-items: center;
  }

  .char-stat-item.has-dmg-type {
    grid-template-columns: 1fr 88px 72px auto;
  }

  .char-stat-item .dmg-type-select {
    font-size: 0.72rem;
    min-width: 0;
    padding: 0.25rem 0.2rem;
  }

  .char-stat-item input[type="text"] {
    font-size: 0.78rem;
  }

  .char-stat-item.echo-source input,
  .char-stat-item.echo-source select {
    opacity: 0.85;
    cursor: default;
  }

  .echo-panel { margin-bottom: 0.5rem; }
  .setup-team-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
    padding: 0.35rem 0 1.75rem;
    max-width: var(--setup-main-max-width);
    width: 100%;
  }

  .setup-member-col.panel,
  .setup-member-col {
    min-width: 0;
    padding: 0;
    margin: 0;
    overflow: visible;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--card-shadow);
    transition: border-color var(--ease-ui), box-shadow var(--ease-ui), transform var(--ease-ui);
  }

  .setup-member-col:hover {
    border-color: rgba(201, 169, 110, 0.22);
    box-shadow: var(--card-shadow-hover);
  }

  /* —— 卡片工具类 —— */
  .ui-glass-card {
    isolation: isolate;
    background: var(--card);
    border: 1px solid var(--border);
    box-shadow: var(--card-shadow);
    transition: border-color var(--ease-ui), box-shadow var(--ease-ui), transform var(--ease-ui);
  }

  .ui-glass-card:hover {
    border-color: rgba(201, 169, 110, 0.35);
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-1px);
  }

  .ui-glass-card--core {
    background: var(--surface2);
    border-color: rgba(201, 169, 110, 0.35);
    box-shadow:
      var(--glass-inset-core),
      var(--card-shadow);
    position: relative;
  }

  .ui-glass-card--core::after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--accent-gradient);
    opacity: 0.85;
  }

  .ui-glass-card--core:hover {
    border-color: rgba(201, 169, 110, 0.5);
    box-shadow:
      var(--glass-inset-core),
      var(--card-shadow-hover);
    transform: scale(1.02);
  }

  .ui-chip-gradient {
    border: 1px solid rgba(201, 169, 110, 0.28);
    background: var(--chip-gradient);
    box-shadow: inset 0 0 10px rgba(201, 169, 110, 0.04);
  }

  .setup-team-grid > .panel + .panel {
    margin-top: 0;
  }

  /* —— 配置选择跟稿：分区标题 / 上下栏 —— */
  .setup-sec {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    min-width: 0;
  }

  .setup-sec-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-title);
    letter-spacing: 0.06em;
    line-height: 1.35;
    text-shadow:
      1px 0 0 rgba(201, 169, 110, 0.22),
      -1px 0 0 rgba(201, 169, 110, 0.22),
      0 1px 0 rgba(201, 169, 110, 0.22),
      0 -1px 0 rgba(201, 169, 110, 0.22);
  }

  .setup-sec-mark {
    width: 0.7rem;
    height: 0.8rem;
    flex: 0 0 auto;
    background: var(--accent-gradient);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.25);
  }

  .setup-sec-body {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
  }

  .setup-member-upper {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 1rem;
    padding: 0 1.15rem 1.15rem;
  }

  .setup-member-upper-left,
  .setup-member-upper-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
  }

  .setup-pick-card-wrap {
    position: relative;
  }

  .setup-pick-card {
    width: 100%;
    text-align: left;
  }

  .setup-inline-btn-spacer {
    display: block;
    height: 1.55rem;
  }

  .setup-inline-btn {
    position: absolute;
    left: calc(72px + 0.75rem + 0.85rem);
    bottom: 0.85rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid var(--input-border);
    background: var(--hover-bg);
    color: var(--text-primary);
    font-size: 0.72rem;
    padding: 0.2rem 0.65rem;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color var(--ease-ui), color var(--ease-ui), box-shadow var(--ease-ui), transform var(--ease-ui);
  }

  .setup-inline-btn::after {
    content: "→";
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1;
  }

  .setup-inline-btn:hover {
    border-color: rgba(var(--accent-rgb), 0.45);
    color: var(--accent-bright);
    box-shadow: 0 0 8px rgba(201, 169, 110, 0.15);
    transform: translateY(-1px);
  }

  .setup-chip-board {
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface2);
    box-shadow: var(--card-shadow);
  }

  .setup-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
  }

  .setup-combat-mode {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 2px 8px var(--shadow);
  }

  /* 标签 + 按钮同一行，避免模态掉到下一行把左侧撑高 */
  .setup-combat-mode-main {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
  }

  .setup-combat-mode-main .setup-chip-row {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
  }

  .setup-combat-mode .btn {
    border: 1px solid var(--input-border);
    background: var(--hover-bg);
    color: var(--text-primary);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }

  .setup-combat-mode .btn:hover {
    transform: scale(1.03);
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.2);
  }

  .setup-combat-mode .btn.primary,
  .setup-combat-mode .btn.active {
    background: rgba(201, 169, 110, 0.15);
    border-color: rgba(var(--accent-rgb), 0.45);
    color: var(--accent-bright);
    box-shadow: 0 0 10px rgba(201, 169, 110, 0.1);
    text-shadow: none;
    transform: scale(1.02);
  }

  .setup-combat-mode-label {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 0.82rem;
    color: var(--muted);
  }

  .setup-combat-mode .btn.sm {
    min-width: 0;
    border-radius: 6px;
    font-size: 0.72rem;
    padding: 0.18rem 0.45rem;
    white-space: nowrap;
  }

  .setup-combat-mode-detail {
    font-size: 0.68rem;
    margin: 0;
    line-height: 1.35;
  }

  .setup-member-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    border-radius: 10px;
    padding: 0.35rem 0.75rem 0.35rem 0.4rem;
    cursor: pointer;
    max-width: 12rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transition: border-color var(--ease-ui), box-shadow var(--ease-ui), transform var(--ease-ui);
  }

  .setup-member-chip:hover {
    border-color: rgba(var(--accent-rgb), 0.4);
    box-shadow: 0 0 12px rgba(201, 169, 110, 0.12);
    transform: translateY(-1px);
  }

  .setup-member-chip-el {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    object-fit: contain;
    border-radius: 50%;
  }

  .setup-member-chip-el.fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-primary);
  }

  .setup-member-chip-name {
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .setup-echo-controls {
    gap: 0.55rem;
  }

  .setup-echo-ctrl-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
  }

  .setup-echo-ctrl-label {
    flex: 0 0 4.5rem;
    font-size: 0.82rem;
    color: var(--text);
  }

  .setup-add-set {
    width: 100%;
    justify-content: center;
    gap: 0.35rem;
    border-style: dashed;
  }

  .setup-add-set-plus {
    font-weight: 700;
  }

  .setup-icon-btn {
    min-width: 2rem;
    padding: 0.35rem 0.45rem !important;
  }

  .echo-row-label {
    flex: 0 0 3.5rem;
    font-size: 0.82rem;
    color: var(--text);
    white-space: nowrap;
  }

  .echo-row-fields {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: 0.35rem;
    min-width: 0;
    align-items: center;
  }

  /* 主/副词条：名称与数值同一行（对齐源文件横排） */
  .echo-row-fields > .echo-field-select {
    width: auto;
    flex: 1 1 6rem;
    min-width: 0;
    max-width: none;
  }

  .echo-row-fields > .echo-sub-value,
  .echo-row-fields > .echo-main-value {
    width: auto;
    flex: 0 0 4.6rem;
    min-width: 4.2rem;
    max-width: 5.2rem;
  }

  .echo-row-fields > .setup-icon-btn,
  .echo-row-fields > .btn {
    flex: 0 0 auto;
  }

  .build-slot-identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0;
    margin: 0 0 0.65rem;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
  }

  .build-slot-identity:disabled {
    cursor: default;
  }

  .build-slot-meta {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
  }

  .build-slot-meta-line {
    font-size: 0.72rem;
    color: var(--muted);
  }

  .echo-sub-block {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.35rem;
  }

  .build-slot-foot {
    margin-top: 0.45rem;
  }

  .build-panel-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
  }

  .build-panel-summary-grid .build-panel-stat-card:not(.half) {
    grid-column: 1 / -1;
  }

  .setup-member-col .setup-lower-body,
  .setup-member-col .build-echo-block {
    min-width: 0;
    overflow: visible;
  }

  /* 配置选择声骸区（跟稿后保留可读密度） */
  .setup-member-col .build-controls.compact {
    padding: 0.75rem 0.85rem;
    gap: 0.55rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--glass-fill);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-inset);
  }

  .setup-member-col .build-slots-stack {
    gap: 0.65rem;
  }

  .setup-member-col .echo-summary.compact {
    font-size: 0.78rem;
    margin-top: 0.65rem;
  }

  .setup-member-col .echo-set-summary-block {
    margin: 0.45rem 0 0;
    padding: 0.45rem 0.55rem;
    font-size: 0.78rem;
  }

  .setup-member-col .build-cost-chip {
    font-size: 0.72rem;
    padding: 0.15rem 0.4rem;
  }

  .setup-member-col .echo-cost-badge {
    margin-left: 0.25rem;
    font-size: 0.72rem;
    color: var(--muted);
  }

  .setup-member-col .echo-cost-badge.over {
    color: var(--danger);
  }

  /* —— Buff检查页（跟稿 buff选择） —— */
  .buff-check-page {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 0.25rem 0 1.75rem;
    max-width: var(--setup-main-max-width);
    width: 100%;
  }

  .buff-check-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
  }

  .buff-check-muted-hint {
    margin: 0;
    font-size: 0.72rem;
    color: #a0a0a0;
    line-height: 1.4;
  }

  .buff-check-team-card.team-shared-buff-section {
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--card-shadow);
    overflow: hidden;
  }

  .buff-check-team-card-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
  }

  .buff-check-team-icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: var(--accent-bright);
    stroke-width: 1.5;
  }

  .buff-check-team-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: #f5f5f5;
    letter-spacing: 0.04em;
  }

  .buff-check-team-title .nav-term {
    font-family: var(--font-mono);
    font-weight: 500;
  }

  .buff-check-team-hint {
    margin-left: auto;
    font-size: 0.7rem;
    color: #777;
  }

  .buff-check-team-card .team-shared-buff-body {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    padding: 1rem 1rem 1.15rem;
    border-top: 0;
  }

  .buff-check-team-card .team-shared-buff-body.collapsed {
    display: none;
  }

  .buff-check-block {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-width: 0;
  }

  .buff-check-matrix-wrap {
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
  }

  .buff-check-page .team-buff-assign-table th,
  .buff-check-page .team-buff-assign-table td {
    border-color: var(--border);
    background: transparent;
  }

  .buff-check-page .team-buff-assign-corner,
  .buff-check-page .team-buff-assign-rowhead {
    background: var(--hover-bg);
  }

  .buff-check-page .team-buff-assign-src-group {
    background: rgba(201, 169, 110, 0.1);
    color: #f0f0f0;
  }

  .buff-check-page .team-buff-assign-buff-th {
    background: var(--hover-bg);
    color: #a0a0a0;
  }

  .buff-check-page .team-buff-assign-buff-th.is-clickable {
    color: var(--accent-bright);
    text-decoration: none;
  }

  .buff-check-page .team-buff-assign-buff-th.is-clickable:hover {
    background: rgba(201, 169, 110, 0.12);
    color: var(--text-primary);
  }

  .buff-check-page .team-buff-assign-td {
    background: rgba(0, 0, 0, 0.18);
  }

  .buff-check-page .team-buff-assign-avatar .char-avatar-card {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
  }

  .buff-check-source-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.35rem 0.75rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #292c31;
  }

  .buff-check-source-panel .buff-list {
    gap: 0;
  }

  /* Buff 来源条目：紧凑卡片 */
  .buff-check-source-panel .buff-entry {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    grid-template-columns: none;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border-strong);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 8px;
    min-width: 0;
  }

  .buff-check-source-panel .buff-entry[data-source='本体'] {
    border-left-color: #4a9eff;
  }

  .buff-check-source-panel .buff-entry[data-source='全队'] {
    border-left-color: #c084fc;
  }

  .buff-check-source-panel .buff-entry[data-source='武器'] {
    border-left-color: #2dd4bf;
  }

  .buff-check-source-panel .buff-entry[data-source='声骸'] {
    border-left-color: #ff6b6b;
  }

  .buff-check-source-panel .buff-entry[data-source='套装'] {
    border-left-color: #ffd93d;
  }

  .buff-check-source-panel .buff-entry[data-source='自定义'] {
    border-left-color: var(--text-muted);
  }

  .buff-check-source-panel .buff-entry.is-stack,
  .buff-check-source-panel .buff-entry.stack-def,
  .buff-check-source-panel .buff-entry.composite-buff-editor {
    background: var(--input-bg);
  }

  .buff-check-source-panel .buff-category-tag,
  .buff-check-source-panel .buff-cat-tag {
    font-size: 11px;
    color: var(--text-muted);
    background: var(--hover-bg);
    border: none;
    padding: 2px 8px;
    border-radius: 4px;
  }

  .buff-check-source-panel .buff-entry .team-buff-tag,
  .buff-check-source-panel .buff-entry .team-buff-tag--weapon,
  .buff-check-source-panel .buff-entry .team-buff-tag--echo,
  .buff-check-source-panel .buff-entry .team-buff-tag--set {
    color: var(--text-muted);
    background: var(--hover-bg);
    border: 1px solid var(--border);
  }

  .buff-check-source-panel .stack-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    padding: 2px 10px;
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    border-radius: 4px;
    background: rgba(var(--accent-rgb), 0.1);
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
  }

  .buff-check-source-panel .stack-indicator:hover {
    background: rgba(var(--accent-rgb), 0.18);
    border-color: rgba(var(--accent-rgb), 0.55);
  }

  .buff-check-source-panel .stack-indicator.is-bump {
    animation: tba-badge-bump 0.2s ease;
  }

  .buff-check-source-panel .stack-indicator__icon {
    flex: 0 0 auto;
    opacity: 0.9;
  }

  .buff-check-source-panel .stack-indicator__count {
    font-variant-numeric: tabular-nums;
    min-width: 1.4em;
  }

  .buff-check-source-panel .buff-entry.composite-buff-editor {
    padding: 10px 14px;
  }

  .buff-check-source-panel .buff-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    min-width: 0;
  }

  .buff-check-source-panel .buff-entry-title {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1 1 auto;
    margin-right: 4px;
  }

  .buff-check-source-panel .source-tag,
  .buff-check-source-panel .buff-source-tag,
  .buff-check-source-panel .buff-source-prefix {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--hover-bg);
    color: var(--text-muted, var(--muted));
    white-space: nowrap;
  }

  .buff-check-source-panel .buff-entry-header .buff-entry-name,
  .buff-check-source-panel .buff-entry-header .buff-name,
  .buff-check-source-panel .buff-entry-header input.buff-name,
  .buff-check-source-panel .buff-entry-header input.buff-entry-name {
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: 28px;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: var(--text-primary, var(--text));
    font-size: 13px;
    font-weight: 500;
  }

  .buff-check-source-panel .buff-entry-header .buff-name:hover,
  .buff-check-source-panel .buff-entry-header .buff-name:focus,
  .buff-check-source-panel .buff-entry-header .buff-entry-name:hover,
  .buff-check-source-panel .buff-entry-header .buff-entry-name:focus {
    border-color: var(--text-muted);
    background: var(--hover-bg);
    outline: none;
  }

  .buff-check-source-panel .buff-entry-header .buff-name[readonly],
  .buff-check-source-panel .buff-entry-header .buff-entry-name[readonly] {
    cursor: default;
    opacity: 0.92;
  }

  .buff-check-source-panel .delete-btn,
  .buff-check-source-panel .buff-entry-delete {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted, var(--muted));
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 150ms ease, background 150ms ease, color 150ms ease;
  }

  .buff-check-source-panel .delete-btn:hover:not(:disabled),
  .buff-check-source-panel .buff-entry-delete:hover:not(:disabled) {
    opacity: 1;
    background: rgba(255, 80, 80, 0.12);
    color: #ff5050;
  }

  .buff-check-source-panel .buff-entry-delete:disabled,
  .buff-check-source-panel .delete-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
  }

  .buff-check-source-panel .buff-entry-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .buff-check-source-panel .buff-entry > .buff-entry-controls input.buff-entry-value[type='number'] {
    width: 64px;
    height: 32px;
    min-width: 64px;
    max-width: 64px;
    padding: 0 8px;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.22);
    color: var(--text-primary, var(--text));
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    box-sizing: border-box;
  }

  .buff-check-source-panel .buff-entry > .buff-entry-controls input.buff-entry-value[type='number']:focus {
    border-color: rgba(var(--accent-rgb), 0.55);
    outline: none;
  }

  .buff-check-source-panel .buff-entry > .buff-entry-controls .buff-entry-select {
    height: 32px;
    min-width: 4.5rem;
    max-width: none;
    width: auto;
    padding: 0 10px;
    border: 1px solid var(--input-border);
    border-radius: 999px;
    background: var(--hover-bg);
    color: var(--text-muted, var(--muted));
    font-size: 12px;
    font-weight: 500;
    box-sizing: border-box;
    cursor: pointer;
    color-scheme: dark;
  }

  .buff-check-source-panel .buff-entry > .buff-entry-controls .buff-entry-select:focus {
    border-color: rgba(var(--accent-rgb), 0.55);
    color: var(--text-primary, var(--text));
    outline: none;
  }

  /* 展开 option 高对比（勿让收起态 muted 渗进下拉列表） */
  .buff-check-source-panel .buff-entry-select option {
    color: #f0f0f0;
    background-color: #1a1a1a;
  }

  .buff-check-source-panel .buff-entry-select option:checked,
  .buff-check-source-panel .buff-entry-select option:hover,
  .buff-check-source-panel .buff-entry-select option:focus {
    color: var(--text-primary)fff;
    background-color: #2a2a2a;
  }

  .buff-check-source-panel .buff-entry-select optgroup {
    color: var(--accent);
    background-color: #111111;
    font-weight: 600;
  }

  .buff-check-source-panel .buff-entry-kind {
    margin-left: auto;
  }

  .buff-check-source-panel .buff-entry-mode-hint {
    margin: 0;
    font-size: 12px;
  }

  .buff-check-source-panel .buff-entry .composite-hint {
    margin-top: 6px;
  }

  .buff-check-source-panel .buff-entry.buff-row-focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    background: rgba(var(--accent-rgb), 0.08);
  }

  /* 一级分类：可横滑标签栏 + 选中底指示条；过多时底部细滚动条 */
  .buff-check-page .buff-check-group-tabs.buff-group-tabs,
  .buff-check-source-panel .buff-group-tabs--scroll {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin: 0;
    padding: 0 0 10px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--accent-rgb), 0.45) var(--scrollbar-track);
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
  }

  .buff-check-page .buff-check-group-tabs.buff-group-tabs::-webkit-scrollbar,
  .buff-check-source-panel .buff-group-tabs--scroll::-webkit-scrollbar {
    height: 5px;
  }

  .buff-check-page .buff-check-group-tabs.buff-group-tabs::-webkit-scrollbar-track,
  .buff-check-source-panel .buff-group-tabs--scroll::-webkit-scrollbar-track {
    margin: 0 4px;
    background: var(--hover-bg);
    border-radius: 999px;
  }

  .buff-check-page .buff-check-group-tabs.buff-group-tabs::-webkit-scrollbar-thumb,
  .buff-check-source-panel .buff-group-tabs--scroll::-webkit-scrollbar-thumb {
    background: rgba(var(--accent-rgb), 0.45);
    border-radius: 999px;
  }

  .buff-check-page .buff-check-group-tabs .buff-group-tab,
  .buff-check-source-panel .category-tab {
    flex: 0 0 auto;
    min-width: unset;
    padding: 6px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted, var(--muted));
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: none;
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
  }

  .buff-check-page .buff-check-group-tabs .buff-group-tab:hover,
  .buff-check-source-panel .category-tab:hover {
    color: var(--text-primary);
    border-color: transparent;
    background: var(--hover-bg);
  }

  .buff-check-page .buff-check-group-tabs .buff-group-tab.active,
  .buff-check-source-panel .category-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
    box-shadow: none;
  }

  /* 子标签槽：无子分类时也占位，防止谐幅↔复合等切换抖动 */
  .buff-sub-tabs-slot {
    box-sizing: border-box;
    margin-top: 8px;
    min-height: 26px; /* 与 .buff-sub-tab 行高对齐：padding4×2 + 12×1.3 + border */
  }

  .buff-sub-tabs-slot.is-empty {
    visibility: hidden;
    pointer-events: none;
  }

  /* 二级子标签：更小 pill，与一级明显分层 */
  .buff-check-page .buff-tabs.buff-sub-tabs,
  .buff-check-source-panel .buff-sub-tabs,
  .buff-sub-tabs-slot > .buff-sub-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .buff-check-page .buff-sub-tab,
  .buff-check-source-panel .buff-sub-tab {
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid var(--input-border);
    background: var(--hover-bg);
    color: var(--text-muted, var(--muted));
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    cursor: pointer;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease;
  }

  .buff-check-page .buff-sub-tab:hover,
  .buff-check-source-panel .buff-sub-tab:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
    background: var(--hover-bg);
  }

  .buff-check-page .buff-sub-tab.active,
  .buff-check-source-panel .buff-sub-tab.active {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.08);
  }

  /* 子标签 tone 在来源面板弱化，避免盖过层级区分 */
  .buff-check-page .buff-sub-tab.tone-general,
  .buff-check-page .buff-sub-tab.tone-type,
  .buff-check-source-panel .buff-sub-tab.tone-general,
  .buff-check-source-panel .buff-sub-tab.tone-type {
    border-color: var(--text-muted);
    color: var(--text-muted, var(--muted));
    background: var(--hover-bg);
  }

  .buff-check-page .buff-sub-tab.tone-general.active,
  .buff-check-page .buff-sub-tab.tone-type.active,
  .buff-check-source-panel .buff-sub-tab.tone-general.active,
  .buff-check-source-panel .buff-sub-tab.tone-type.active {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.08);
  }

  .buff-check-add-btn.btn,
  .buff-check-page .buff-check-add-btn {
    align-self: flex-start;
    margin-top: 0.15rem;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    border-radius: 4px;
    font-size: 0.75rem;
  }

  .buff-check-add-btn.btn:hover,
  .buff-check-page .buff-check-add-btn:hover {
    border-color: rgba(var(--accent-rgb), 0.45);
    color: var(--accent-bright);
    background: var(--accent-bg);
  }

  /* Buff 来源底部：说明 + 添加 */
  .buff-check-source-panel .buff-source-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }

  .buff-check-source-panel .help-text {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--input-bg);
    font-size: 11px;
    color: var(--text-muted, var(--muted));
    line-height: 1.5;
  }

  .buff-check-source-panel .help-text__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    cursor: pointer;
    user-select: none;
  }

  .buff-check-source-panel .help-text__summary::-webkit-details-marker {
    display: none;
  }

  .buff-check-source-panel .help-text__summary-text {
    flex: 1 1 auto;
    min-width: 0;
  }

  .buff-check-source-panel .help-text__q {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid var(--border);
    color: var(--text-muted, var(--muted));
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
  }

  .buff-check-source-panel .help-text__summary:hover .help-text__q,
  .buff-check-source-panel .help-text[open] .help-text__q {
    border-color: rgba(var(--accent-rgb), 0.55);
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.1);
  }

  .buff-check-source-panel .help-text__body {
    display: none;
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-muted, var(--muted));
    line-height: 1.5;
  }

  .buff-check-source-panel .help-text[open] .help-text__body,
  .buff-check-source-panel .help-text:hover .help-text__body {
    display: block;
  }

  .buff-check-source-panel .help-text__body p {
    margin: 0 0 0.35em;
  }

  .buff-check-source-panel .help-text__body p:last-child {
    margin-bottom: 0;
  }

  .buff-check-source-panel .add-buff-btn {
    width: 100%;
    padding: 10px;
    margin-top: 0;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted, var(--muted));
    font-size: 13px;
    cursor: pointer;
    transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
  }

  .buff-check-source-panel .add-buff-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(var(--accent-rgb), 0.05);
  }

  .buff-check-empty {
    padding: 1.5rem 0.75rem;
    text-align: center;
    color: #888;
    font-size: 0.88rem;
  }

  .buff-check-personal-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .buff-check-personal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    align-items: start;
  }

  /* 覆盖 .panel + .panel 的纵向间距，避免第 2/3 列被顶下去 */
  .buff-check-personal-grid > .panel,
  .buff-check-personal-grid > .panel + .panel {
    margin-top: 0;
  }

  .buff-check-member-col {
    min-width: 0;
    padding: 0.85rem 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: linear-gradient(165deg, rgba(26, 26, 26, 0.94) 0%, rgba(13, 13, 13, 0.9) 100%);
    box-shadow: var(--card-shadow);
  }

  .buff-check-member-col > .setup-panel-buff-stats {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
  }

  .buff-check-member-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.75rem;
    padding: 0 0 0.65rem;
    border-bottom: 1px solid var(--border);
  }

  .buff-check-member-avatar {
    flex: 0 0 auto;
  }

  .buff-check-member-avatar .char-avatar-card {
    width: 44px;
    height: 44px;
    border-radius: 8px;
  }

  .buff-check-member-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #f5f5f5;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .buff-check-subpanel.panel {
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .buff-check-member-col .panel + .panel {
    margin-top: 0;
  }

  .buff-check-subpanel .setup-sec-title {
    margin-bottom: 0.45rem;
    font-size: 0.95rem;
  }

  .buff-check-subpanel .buff-list {
    gap: 0.45rem;
  }

  @media (max-width: 1100px) {
    .buff-check-personal-grid {
      grid-template-columns: 1fr;
    }
  }
  .setup-member-col-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
    padding: 1rem 1rem 0.75rem;
    flex-wrap: wrap;
    border-bottom: 1px solid transparent;
  }
  .setup-member-col-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
    min-width: 0;
  }
  .setup-member-col-head strong {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-title);
  }
  .setup-member-name {
    width: 4.5rem;
    min-width: 3.5rem;
    max-width: 6rem;
    padding: 0.2rem 0.35rem;
    font-size: 0.72rem;
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--muted);
    border-radius: 6px;
  }
  .setup-member-dmg {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-variant-numeric: tabular-nums;
    color: var(--result) !important;
    white-space: nowrap;
  }

  .setup-member-dmg-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    object-fit: contain;
    opacity: 0.95;
    filter: drop-shadow(0 0 4px var(--accent-glow));
  }

  .setup-member-dmg-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
  }

  .setup-member-dmg-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--accent-bright);
    text-shadow: 0 0 8px rgba(201, 169, 110, 0.25);
  }
  .setup-lower-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.45rem 0 0.35rem;
  }
  .setup-lower-body {
    min-width: 0;
    padding: 0 1rem 1rem;
    border-top: 1px solid var(--border);
    padding-top: 1rem;
  }
  .setup-member-col .build-hero-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface2);
    box-shadow: var(--card-shadow);
    transition: border-color var(--ease-ui), box-shadow var(--ease-ui), transform var(--ease-ui);
  }
  .setup-member-col .build-hero-card:hover {
    border-color: rgba(201, 169, 110, 0.35);
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-1px);
  }
  .setup-member-col .build-hero-card .char-avatar-card,
  .setup-member-col .build-weapon-icon {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
  }
  .setup-member-col .build-weapon-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--surface2);
    color: var(--muted);
    font-size: 1.4rem;
  }
  .setup-member-col .build-hero-name {
    font-family: var(--font-display);
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: 0.03em;
  }
  .setup-member-col .build-hero-stat-line {
    font-size: 0.72rem;
    color: var(--muted);
    line-height: 1.45;
  }
  /* 右侧「面板属性」卡片 */
  .setup-member-col .build-panel-stat-card.ui-glass-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.28rem;
    padding: 0.6rem 0.75rem;
    border-radius: 8px;
    color: inherit;
    cursor: pointer;
    width: 100%;
    text-align: left;
    border: 1px solid var(--border);
    background: var(--surface2);
    box-shadow: var(--card-shadow);
    transition: border-color var(--ease-ui), box-shadow var(--ease-ui), transform var(--ease-ui), background var(--ease-ui);
  }
  .setup-member-col .build-panel-stat-card.ui-glass-card:hover {
    border-color: rgba(201, 169, 110, 0.35);
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-1px);
  }
  /* 暴击 / 爆伤：关键数据点睛 */
  .setup-member-col .build-panel-stat-card.ui-glass-card.is-highlight,
  .setup-member-col .build-panel-stat-card.ui-glass-card--core {
    border-color: rgba(var(--accent-rgb), 0.4);
    background: var(--surface2);
    box-shadow:
      var(--glass-inset-core),
      var(--card-shadow);
  }
  .setup-member-col .build-panel-stat-card.ui-glass-card.is-highlight:hover,
  .setup-member-col .build-panel-stat-card.ui-glass-card--core:hover {
    border-color: rgba(201, 169, 110, 0.55);
    box-shadow:
      var(--glass-inset-core),
      var(--card-shadow-hover);
    transform: scale(1.02);
  }
  .setup-member-col .build-panel-stat-label-row {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    line-height: 1;
  }
  .setup-member-col .build-panel-stat-icon,
  .setup-member-col .build-panel-stat-icon--attr,
  .setup-member-col .build-panel-stat-icon--crit,
  .setup-member-col .build-panel-stat-icon--type {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    object-fit: contain;
    opacity: 0.85;
    display: block;
  }
  .setup-member-col .build-panel-stat-label {
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1;
  }
  .setup-member-col .build-panel-stat-value {
    font-size: 1.02rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    letter-spacing: 0.01em;
  }
  /* 暴击 / 爆伤 / 总伤：亮金 + 轻微外发光 */
  .setup-member-col .build-panel-stat-card.is-highlight .build-panel-stat-value,
  .setup-member-col .ui-glass-card--core .build-panel-stat-value {
    color: var(--accent-bright);
    font-weight: 700;
    text-shadow: 0 0 8px rgba(201, 169, 110, 0.28);
  }
  .resonance-chain-compact {
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface2);
    box-shadow: var(--card-shadow);
    font-size: 0.78rem;
  }
  .resonance-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.45rem;
  }
  .resonance-chip {
    border: 1px solid var(--input-border);
    background: var(--hover-bg);
    color: var(--text-primary);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.18rem 0.45rem;
    border-radius: 6px;
    cursor: pointer;
    min-width: 1.9rem;
    transition: border-color var(--ease-ui), background var(--ease-ui), color var(--ease-ui), transform var(--ease-ui), box-shadow var(--ease-ui);
  }
  .resonance-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 8px rgba(201, 169, 110, 0.12);
  }
  .resonance-chip.active {
    background: rgba(201, 169, 110, 0.15);
    color: var(--accent-bright);
    border: 1px solid rgba(201, 169, 110, 0.45);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.12);
    text-shadow: none;
    transform: scale(1.02);
  }
  .resonance-chip:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }
  .build-slots-stack {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  .build-slots-stack .build-slots-col {
    display: contents;
  }
  .build-controls.compact {
    padding: 0.4rem;
    margin-bottom: 0.4rem;
  }
  .echo-summary.compact {
    font-size: 0.72rem;
    margin-top: 0.35rem;
  }
  .panel-stat-edit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.28rem 0.4rem;
    border-radius: 6px;
    background: var(--surface2);
    font-size: 0.78rem;
  }
  .panel-stat-edit-row input {
    width: 7rem;
    padding: 0.25rem 0.35rem;
  }
  @media (max-width: 1400px) {
    .setup-member-upper {
      grid-template-columns: 1fr;
    }
  }
  @media (max-width: 1100px) {
    .setup-team-grid {
      grid-template-columns: 1fr;
    }
  }

  /* —— 声骸选取面板 —— */
  /* 槽位 DOM 会随词条编辑整段重绘：禁止入场 animation，避免每次操作抖动 */
  .setup-member-col .build-slots-stack .build-slot-card,
  .setup-member-col .echo-sub-block,
  .setup-member-col .echo-sub-row {
    animation: none;
  }

  .setup-member-col .build-slot-card {
    padding: 1rem 1.05rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background:
      linear-gradient(165deg, rgba(26, 26, 26, 0.92) 0%, rgba(13, 13, 13, 0.88) 100%);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      0 6px 20px rgba(0, 0, 0, 0.28);
  }

  .setup-member-col .build-slot-card:hover {
    border-color: rgba(201, 169, 110, 0.22);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      0 10px 26px rgba(0, 0, 0, 0.34),
      0 0 16px rgba(201, 169, 110, 0.06);
  }

  .setup-member-col .build-slot-card.is-main {
    border-color: rgba(201, 169, 110, 0.38);
    box-shadow:
      inset 0 0 18px rgba(201, 169, 110, 0.05),
      0 8px 24px rgba(0, 0, 0, 0.32),
      0 0 18px rgba(201, 169, 110, 0.1);
  }

  .setup-member-col .build-slot-identity {
    margin-bottom: 0.85rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
  }

  .setup-member-col .build-slot-visual,
  .setup-member-col .build-slot-visual img,
  .setup-member-col .build-slot-visual-ph {
    width: 72px;
    height: 72px;
    border-radius: 8px;
  }

  .setup-member-col .build-slot-visual-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hover-bg);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.85rem;
  }

  .setup-member-col .build-slot-visual-name {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: #f5f5f5;
  }

  .setup-member-col .build-slot-card.is-main .build-slot-visual-name {
    color: var(--accent-bright);
    text-shadow: 0 0 10px rgba(201, 169, 110, 0.2);
  }

  .setup-member-col .build-slot-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.55rem;
    min-width: 0;
  }

  .setup-member-col .build-slot-main-badge {
    flex: 0 0 auto;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(201, 169, 110, 0.4);
    background: rgba(201, 169, 110, 0.12);
    color: var(--accent-bright);
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.35;
  }

  .setup-member-col .build-slot-meta-line {
    color: #a0a0a0;
  }

  .setup-member-col .echo-main-row,
  .setup-member-col .echo-sub-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.4rem;
    margin-bottom: 0;
    width: 100%;
  }

  /* 主词条：独立磨砂卡片 */
  .setup-member-col .echo-main-card {
    padding: 0.7rem 0.8rem;
    border-radius: 10px;
    border: 1px solid transparent;
    background:
      linear-gradient(var(--surface), var(--surface)) padding-box,
      linear-gradient(135deg, rgba(var(--accent-rgb), 0.45), color-mix(in srgb, var(--text-primary) 8%, transparent), rgba(var(--accent-rgb), 0.2)) border-box;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow:
      inset 0 0 18px rgba(var(--accent-rgb), 0.05),
      0 4px 14px var(--shadow);
  }

  .setup-member-col .echo-main-card .echo-row-label {
    color: #f5f5f5;
    font-weight: 600;
    letter-spacing: 0.04em;
  }

  .setup-member-col .echo-main-card .echo-field-select {
    color: #f5f5f5;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.28);
    border-color: var(--border);
  }

  .setup-member-col .echo-main-card .echo-main-value {
    font-family: var(--font-body);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--accent-bright);
    background: rgba(201, 169, 110, 0.08);
    border-color: rgba(201, 169, 110, 0.28);
    text-shadow: 0 0 8px rgba(201, 169, 110, 0.2);
  }

  .setup-member-col .echo-sub-block {
    margin-top: 0.65rem;
    gap: 0.45rem;
  }

  .setup-member-col .echo-sub-divider {
    height: 1px;
    margin: 0.15rem 0 0.35rem;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.08) 20%,
      rgba(201, 169, 110, 0.12) 50%,
      rgba(255, 255, 255, 0.08) 80%,
      transparent
    );
  }

  .setup-member-col .echo-sub-row {
    position: relative;
    padding: 0.4rem 0.5rem 0.4rem 0.35rem;
    border-radius: 8px;
    background: var(--input-bg);
    border: 1px solid var(--border);
  }

  .setup-member-col .echo-sub-row:hover {
    background: var(--input-bg);
    border-color: var(--border);
  }

  .setup-member-col .echo-sub-tip {
    width: 5px;
    height: 5px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgba(201, 169, 110, 0.55);
    box-shadow: 0 0 6px rgba(201, 169, 110, 0.25);
  }

  .setup-member-col .echo-sub-row.tip-crit .echo-sub-tip {
    background: rgba(196, 98, 98, 0.75);
    box-shadow: 0 0 6px rgba(196, 98, 98, 0.28);
  }

  .setup-member-col .echo-sub-row.tip-atk .echo-sub-tip {
    background: rgba(201, 169, 110, 0.7);
  }

  .setup-member-col .echo-sub-row.tip-hp .echo-sub-tip {
    background: rgba(126, 184, 218, 0.65);
  }

  .setup-member-col .echo-sub-row.tip-type .echo-sub-tip {
    background: rgba(168, 140, 214, 0.65);
  }

  .setup-member-col .echo-sub-row .echo-row-label {
    color: #a0a0a0;
    flex: 0 0 2.8rem;
  }

  .setup-member-col .echo-row-fields {
    flex-wrap: nowrap;
  }

  .setup-member-col .echo-field-select,
  .setup-member-col .echo-main-value {
    min-width: 0;
    padding: 0.42rem 0.5rem;
    font-size: 0.78rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.28);
    color: #f0f0f0;
    color-scheme: dark;
  }

  /* 收起态：属性名略淡；展开 option 另设高对比（勿让 #a0a0a0 渗进下拉列表） */
  .setup-member-col .echo-sub-row .echo-field-select:not(.echo-sub-value) {
    color: #a0a0a0;
    font-weight: 500;
  }

  .setup-member-col .echo-field-select option {
    color: #f0f0f0;
    background-color: #1a1a1a;
  }

  .setup-member-col .echo-field-select option:checked,
  .setup-member-col .echo-field-select option:hover,
  .setup-member-col .echo-field-select option:focus {
    color: var(--text-primary)fff;
    background-color: #2a2a2a;
  }

  .setup-member-col .echo-field-select optgroup {
    color: var(--accent);
    background-color: #111111;
    font-weight: 600;
  }

  .setup-member-col .echo-sub-row .echo-sub-value {
    color: #f0f0f0;
    font-weight: 600;
  }

  .setup-member-col .echo-sub-row.tip-neutral .echo-sub-tip {
    background: rgba(160, 160, 160, 0.55);
    box-shadow: none;
  }

  .setup-member-col .echo-row-fields > .echo-field-select:not(.echo-sub-value) {
    flex: 1 1 auto;
    width: auto;
  }

  .setup-member-col .echo-row-fields > .echo-sub-value,
  .setup-member-col .echo-row-fields > .echo-main-value {
    flex: 0 0 4.6rem;
    width: 4.6rem;
  }

  /* 删除按钮：默认融入，hover 强调 */
  .setup-member-col .echo-sub-del.setup-icon-btn {
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 !important;
    border-radius: 50%;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1;
    transition: color var(--ease-ui), background var(--ease-ui), border-color var(--ease-ui), transform var(--ease-ui);
  }

  .setup-member-col .echo-sub-del.setup-icon-btn:hover {
    color: var(--accent-bright);
    background: rgba(201, 169, 110, 0.12);
    border-color: rgba(201, 169, 110, 0.35);
    transform: scale(1.08);
  }

  /* + 添加副词条：幽灵按钮 */
  .setup-member-col .setup-add-sub {
    margin-top: 0.15rem;
    align-self: flex-start;
    background: transparent;
    border: 1px solid rgba(201, 169, 110, 0.28);
    color: rgba(201, 169, 110, 0.75);
    transition: color var(--ease-ui), border-color var(--ease-ui), background var(--ease-ui), box-shadow var(--ease-ui);
  }

  .setup-member-col .setup-add-sub:hover:not(:disabled) {
    color: var(--accent-bright);
    border-color: rgba(201, 169, 110, 0.65);
    background: rgba(201, 169, 110, 0.1);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.12);
  }

  .setup-member-col .build-slot-foot {
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--border);
  }

  .setup-member-col .build-slot-foot .btn.primary {
    background: rgba(201, 169, 110, 0.14);
    border-color: rgba(var(--accent-rgb), 0.45);
    color: var(--accent-bright);
  }

  .setup-member-col .build-set-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 3rem 2rem;
    gap: 0.45rem;
    align-items: center;
    padding: 0.2rem 0;
  }

  .setup-member-col .build-set-pick {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface2);
    color: var(--text);
    font-size: 0.78rem;
    cursor: pointer;
    min-width: 0;
  }

  .setup-member-col .echo-set-count-label {
    font-size: 0.82rem;
    color: var(--muted);
  }

  .setup-member-col .echo-set-count-input {
    width: 3rem;
    padding: 0.4rem 0.35rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    text-align: center;
  }

  .setup-workspace .sidebar-footer {
    margin-top: 0.75rem;
    opacity: 0.75;
  }

  .build-panel { margin-bottom: 0.5rem; }
  .build-hero-layout {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) minmax(210px, 0.95fr) minmax(240px, 1.2fr);
    gap: 0.65rem;
    margin-bottom: 0.75rem;
    align-items: start;
  }
  .build-hero-select-col {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
  }
  .build-hero-mid {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
  }
  .build-hero-panel {
    min-width: 0;
  }
  .build-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
    margin-bottom: 0.75rem;
  }
  .build-controls {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
    padding: 0.55rem 0.6rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface2);
  }
  .build-hero-card {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.45rem 0.5rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: inherit;
    cursor: pointer;
    text-align: left;
  }
  .build-hero-card:hover { border-color: var(--accent); }
  .build-hero-card .char-avatar-card { width: 56px; height: 56px; flex-shrink: 0; }
  .build-hero-meta { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
  .build-hero-label { font-size: 0.68rem; color: var(--muted); }
  .build-hero-name {
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .build-hero-sub { font-size: 0.72rem; color: var(--muted); }
  .build-hero-stat-line {
    font-size: 0.7rem;
    color: var(--text);
    display: flex;
    gap: 0.35rem;
    min-width: 0;
  }
  .build-hero-stat-line .k {
    color: var(--muted);
    flex-shrink: 0;
  }
  .build-hero-weapon-wrap { display: flex; flex-direction: column; gap: 0.35rem; }
  .build-weapon-icon {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .build-weapon-icon img { width: 100%; height: 100%; object-fit: contain; }
  .build-weapon-ph { color: var(--muted); font-size: 1rem; }
  .build-weapon-ref { padding: 0 0.1rem; }

  .build-panel-summary {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.5rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(12, 18, 28, 0.55);
    min-height: 100%;
  }
  .build-panel-summary-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem;
  }
  .build-panel-summary-quad {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
  }
  .build-panel-summary-stack {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
  }
  .build-panel-stat-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.12rem;
    width: 100%;
    padding: 0.45rem 0.55rem;
    border-radius: 8px;
    color: inherit;
    cursor: pointer;
    text-align: left;
  }
  .build-panel-stat-card:not(.ui-glass-card) {
    border: 1px solid var(--border);
    background: var(--glass-fill);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-inset);
  }
  .build-panel-stat-label {
    font-size: 0.7rem;
    color: var(--label-soft);
  }
  .build-panel-stat-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--value-bright);
    font-variant-numeric: tabular-nums;
  }
  .build-panel-stat-card.is-highlight .build-panel-stat-value,
  .build-panel-stat-card.ui-glass-card--core .build-panel-stat-value {
    color: var(--accent-bright);
    text-shadow: 0 0 10px rgba(212, 163, 122, 0.15);
  }
  .build-panel-stat-hint {
    font-size: 0.68rem;
    color: var(--muted);
  }
  .build-modal.build-modal--panel-stat {
    width: min(480px, 96vw);
  }
  .panel-stat-modal-block { display: flex; flex-direction: column; gap: 0.35rem; }
  .panel-stat-modal-total {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
  }
  .panel-stat-modal-total strong {
    color: var(--result);
    font-size: 1.15rem;
  }
  .panel-stat-modal-h {
    margin: 0.45rem 0 0.15rem;
    font-size: 0.78rem;
    color: var(--accent2);
    font-weight: 600;
  }
  .panel-stat-source-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }
  .panel-stat-source-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.28rem 0.4rem;
    border-radius: 6px;
    background: var(--surface2);
    border: 1px solid transparent;
    font-size: 0.78rem;
  }
  .panel-stat-source-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .panel-stat-source-value {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    color: var(--accent2);
    font-weight: 600;
  }

  @media (max-width: 1100px) {
    .build-hero-layout {
      grid-template-columns: 1fr 1fr;
    }
    .build-hero-panel {
      grid-column: 1 / -1;
    }
  }
  @media (max-width: 720px) {
    .build-hero-layout {
      grid-template-columns: 1fr;
    }
  }
  .build-cost-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
  }
  .build-cost-chip {
    font-size: 0.7rem;
    padding: 0.12rem 0.4rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    color: var(--muted);
    background: rgba(0, 0, 0, 0.15);
  }
  .build-ctrl-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
  }
  .build-set-rows {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  .build-set-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }
  .build-set-pick {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.4rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.12);
    color: inherit;
    cursor: pointer;
    font-size: 0.78rem;
    text-align: left;
  }
  .build-set-pick:hover { border-color: var(--accent); }
  .build-slots {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }
  /* 配置选择：声骸槽按稿单列上下排，不挤两列 */
  .build-slots.build-slots-stack,
  .setup-member-col .build-slots {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 0.65rem;
  }
  .build-slots-col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .build-slot-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface2);
    padding: 0.5rem 0.55rem;
  }
  .build-slot-card.is-main { border-color: rgba(232, 148, 58, 0.55); }
  .build-slot-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.4rem;
  }
  .build-slot-set { font-size: 0.78rem; color: var(--accent2); }
  .build-slot-set.empty { color: var(--muted); }
  .build-slot-head .tag.main {
    border-color: rgba(232, 148, 58, 0.6);
    color: #f5c896;
  }
  .build-slot-visual {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
  }
  .build-slot-visual img,
  .build-slot-visual-ph {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: contain;
    background: var(--surface-2);
  }
  .build-slot-visual-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 0.75rem;
  }
  .build-slot-visual-name { font-size: 0.8rem; }
  .build-modal.build-modal--set-pick {
    width: min(860px, 94vw);
    max-height: 90vh;
  }
  .build-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(6, 10, 16, 0.62);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 3vh 0.75rem 4vh;
    overflow: auto;
  }
  .build-modal {
    width: min(520px, 100%);
    max-height: 88vh;
    overflow: auto;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: 0 16px 48px var(--shadow);
    color: var(--text-primary);
  }
  .build-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 1;
  }
  .build-modal-body { padding: 0.75rem; }
  .build-modal--set-pick .build-modal-body { padding: 0.9rem 1rem 1rem; }
  .build-modal-set-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.2rem, 1fr));
    gap: 0.4rem;
    max-height: min(64vh, 520px);
    overflow: auto;
    margin: 0;
    padding-right: 0.2rem;
  }
  .build-modal-set-picker .echo-set-pick-btn {
    gap: 0.4rem;
    padding: 0.4rem 0.5rem;
    border-radius: 8px;
    font-size: 0.74rem;
    line-height: 1.25;
    min-height: 2.6rem;
  }
  .build-modal-set-picker .echo-set-pick-btn img,
  .build-modal-set-picker .echo-set-pick-btn .echo-set-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 6px;
  }
  .build-modal-set-picker .echo-set-pick-btn span {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .build-modal-set-picker .echo-set-pick-btn.empty {
    grid-column: auto;
    justify-content: flex-start;
  }

  .char-buff-tpl-modal.build-modal { width: min(720px, 100%); }
  .char-buff-tpl-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.65rem; }
  .char-buff-tpl-list { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.5rem 0; }
  .char-buff-tpl-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.35rem 0.5rem;
    align-items: start;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface2);
    font-size: 0.78rem;
  }
  .char-buff-tpl-row .meta { color: var(--muted); font-size: 0.72rem; }
  .char-buff-tpl-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem 0.55rem;
    padding: 0.55rem;
    border: 1px dashed var(--border);
    border-radius: 8px;
    margin-top: 0.5rem;
  }
  .char-buff-tpl-form .field.full { grid-column: 1 / -1; }
  .char-buff-tpl-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.65rem; }
  .tpl-skill-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.3rem;
    max-height: 180px;
    overflow: auto;
    padding: 0.35rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
  }
  .tpl-skill-check {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.3rem 0.35rem;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 0.72rem;
    cursor: pointer;
  }
  .tpl-skill-check:hover { background: var(--hover-bg); }
  .tpl-skill-check:has(input:checked) {
    border-color: rgba(210, 140, 55, 0.55);
    background: rgba(210, 140, 55, 0.12);
  }
  .tpl-skill-check input { margin-right: 0.25rem; }
  .tpl-skill-check .meta { color: var(--muted); font-size: 0.66rem; }
  .tpl-fx-card { margin-bottom: 0.45rem; }
  .char-buff-tpl-msg { font-size: 0.78rem; color: var(--accent2); margin: 0.35rem 0; }
  .char-buff-tpl-msg.warn { color: var(--warn); }
  .char-buff-tpl-page-sidebar .char-buff-tpl-actions { margin-top: 0.5rem; }
  .template-workspace .sidebar-shell { min-width: 0; }
  .template-workspace .char-buff-tpl-page-sidebar {
    padding: 0.65rem 0.75rem;
  }
  .template-workspace .char-buff-tpl-page-sidebar h2 {
    margin-bottom: 0.45rem;
    font-size: 0.88rem;
  }
  .template-workspace .char-buff-tpl-page-sidebar .field {
    margin-bottom: 0.45rem;
  }
  .template-workspace .char-buff-tpl-page-sidebar .field label {
    font-size: 0.72rem;
    margin-bottom: 0.2rem;
  }
  .template-workspace .char-buff-tpl-tabs {
    gap: 0.25rem;
    margin-bottom: 0.45rem;
  }
  .template-workspace .char-buff-tpl-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.35rem;
  }
  .template-workspace .char-buff-tpl-actions .btn.sm {
    padding: 0.22rem 0.45rem;
    font-size: 0.68rem;
  }
  .template-page-main { display: flex; flex-direction: column; gap: 0.75rem; }
  .template-extra-skills {
    border: 1px solid rgba(210, 140, 55, 0.35);
    border-radius: 8px;
    background: rgba(210, 140, 55, 0.06);
    padding: 0.65rem 0.75rem;
  }
  .template-extra-skills-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    color: #f0c674;
  }
  .template-extra-skills-head strong { font-size: 0.92rem; }
  .template-extra-skills-head .hint { margin: 0; color: rgba(240, 198, 116, 0.75); }
  .template-extra-skill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    padding: 0.4rem 0;
    border-top: 1px solid rgba(210, 140, 55, 0.18);
  }
  .template-extra-skill-row:first-of-type { border-top: none; }
  .template-extra-skill-row input[type="text"],
  .template-extra-skill-row input[type="number"],
  .template-extra-skill-row select {
    min-width: 0;
  }
  .template-extra-skill-row .field-label {
    font-size: 0.7rem;
    color: var(--muted);
    margin-right: 0.15rem;
  }
  .template-extra-skills-actions { margin-top: 0.45rem; }

  .augusta-mech-panel {
    border: 1px solid rgba(165, 107, 232, 0.45);
    background: linear-gradient(180deg, rgba(165, 107, 232, 0.12) 0%, rgba(36, 40, 58, 0.55) 100%);
  }

  .augusta-mech-panel h3 {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    color: #d4b4f5;
  }

  .augusta-mech-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.45rem 0.65rem;
    margin: 0.55rem 0;
    align-items: end;
  }

  .augusta-mech-grid label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.72rem;
    color: var(--muted);
  }

  .augusta-mech-grid input,
  .augusta-mech-grid select {
    width: 100%;
    min-width: 0;
  }

  .augusta-mech-preview {
    margin-top: 0.45rem;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.22);
    font-size: 0.8rem;
    line-height: 1.45;
  }

  .augusta-mech-rules {
    margin: 0.35rem 0 0;
    padding-left: 1.1rem;
    font-size: 0.78rem;
    color: var(--muted);
  }
  .template-skill-library-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
    padding: 0.45rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface2);
    margin-bottom: 0.5rem;
  }
  .template-skill-chip,
  .composite-skill-pick-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.2rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.72rem;
    cursor: pointer;
    color: inherit;
  }
  .template-skill-chip { cursor: default; opacity: 0.85; }
  .composite-skill-pick-chip:hover { border-color: rgba(210, 140, 55, 0.45); }
  .composite-skill-pick-chip.selected {
    border-color: rgba(210, 140, 55, 0.65);
    background: rgba(210, 140, 55, 0.14);
  }
  .composite-skill-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.35rem;
  }
  .composite-skill-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    padding: 0.15rem 0.35rem;
    border-radius: 999px;
    border: 1px solid rgba(210, 140, 55, 0.45);
    background: rgba(210, 140, 55, 0.1);
    font-size: 0.72rem;
  }
  .composite-skill-chip .chip-x {
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    padding: 0 0.15rem;
    font-size: 0.85rem;
    line-height: 1;
  }
  .composite-skill-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    max-height: 140px;
    overflow: auto;
    padding: 0.35rem;
    border: 1px dashed var(--border);
    border-radius: 8px;
  }
  .build-hero-char-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
  }
  .resonance-chain-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.55rem;
    padding: 0.45rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: rgba(12, 18, 28, 0.55);
    font-size: 0.74rem;
  }
  .resonance-chain-checks-col {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
  }
  .resonance-chain-checks-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    font-weight: 600;
  }
  .resonance-chain-current {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--accent);
  }
  .resonance-chain-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.45rem;
  }
  .resonance-chain-check {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    cursor: pointer;
    user-select: none;
  }
  .resonance-chain-check input { margin: 0; }
  .resonance-axis-board {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--border);
  }
  .resonance-axis-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    font-weight: 600;
  }
  .resonance-axis-base-row,
  .resonance-axis-rows {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
  }
  .resonance-axis-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
  }
  .resonance-axis-row.current {
    padding: 0.1rem 0.2rem;
    border-radius: 4px;
    background: rgba(90, 160, 255, 0.12);
  }
  .resonance-axis-mark {
    font-size: 0.68rem;
    color: var(--accent);
  }
  .resonance-axis-mark.muted { color: var(--muted); }
  .resonance-dmg-col {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
  }
  .resonance-dmg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
  }
  .resonance-dmg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.68rem;
  }
  .resonance-dmg-table th,
  .resonance-dmg-table td {
    padding: 0.18rem 0.28rem;
    border-bottom: 1px solid var(--border);
    text-align: right;
    white-space: nowrap;
  }
  .resonance-dmg-table th:first-child,
  .resonance-dmg-table td:first-child { text-align: left; }
  .resonance-dmg-table th {
    color: var(--muted);
    font-weight: 600;
  }
  .resonance-dmg-row.current td {
    background: rgba(210, 140, 55, 0.12);
    border-top: 1px solid rgba(210, 140, 55, 0.35);
    border-bottom: 1px solid rgba(210, 140, 55, 0.35);
    color: var(--result);
  }
  .weapon-ref-dmg-board { margin-top: 0.35rem; }
  .weapon-ref-dmg-board .weapon-ref-row { margin-top: 0; }
  .build-echo-pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 0.35rem;
    max-height: min(58vh, 420px);
    overflow-y: auto;
    padding-right: 0.15rem;
  }
  .build-echo-pick-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.3rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: inherit;
    cursor: pointer;
  }
  .build-echo-pick-btn.active,
  .build-echo-pick-btn:hover { border-color: var(--accent); }
  .build-echo-pick-icon {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .build-echo-pick-icon img { width: 100%; height: 100%; object-fit: contain; }
  .build-echo-pick-name { font-size: 0.64rem; text-align: center; line-height: 1.2; }
  .echo-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.55rem;
  }
  .echo-panel-head h2 { margin: 0; flex: 1; }
  .echo-loadout-body.collapsed { display: none; }
  .echo-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
    margin-bottom: 0.65rem;
  }
  .echo-cost-badge {
    font-size: 0.72rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--muted);
  }
  .echo-cost-badge.over { border-color: var(--danger); color: var(--danger); }
  .echo-set-summary-block { margin: 0.5rem 0 0.65rem; padding: 0.5rem 0.6rem; background: var(--surface2); border-radius: 8px; font-size: 0.85rem; }
  .echo-set-active-block + .echo-set-active-block { margin-top: 0.65rem; padding-top: 0.55rem; border-top: 1px dashed var(--border); }
  .echo-set-active-line { margin-top: 0.2rem; }
  .echo-set-active-tiers { margin-top: 0.45rem; display: flex; flex-direction: column; gap: 0.45rem; }
  .echo-set-active-tier {
    padding: 0.4rem 0.45rem;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.18);
    font-size: 0.72rem;
    line-height: 1.45;
  }
  .echo-set-active-tier-head { color: #f5c896; font-weight: 600; margin-bottom: 0.25rem; }
  .echo-set-active-fx {
    padding-left: 0.55rem;
    color: var(--muted);
  }
  .echo-set-active-fx.applied { color: #8fd4a8; }
  .echo-set-active-fx.pending { color: #e8a060; }
  .echo-set-active-main { margin-top: 0.55rem; }
  .echo-set-active-main-title { font-size: 0.72rem; color: var(--muted); margin-bottom: 0.25rem; }
  .echo-set-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-bottom: 0.55rem; }
  .echo-set-row .echo-field-select { flex: 1; min-width: 140px; }
  .echo-set-preview { margin: 0.25rem 0 0.5rem; line-height: 1.35; }
  .echo-set-loadout {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 0.75rem;
  }
  .echo-set-loadout-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.82rem;
  }
  .echo-set-entry {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface2);
    overflow: visible;
  }
  .echo-set-entry.expanded { border-color: rgba(232, 148, 58, 0.45); }
  .echo-set-entry-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.6rem;
    cursor: pointer;
  }
  .echo-set-entry-label {
    font-size: 0.72rem;
    color: var(--muted);
    min-width: 2.8rem;
  }
  .echo-set-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    object-fit: cover;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border);
    flex-shrink: 0;
  }
  .echo-set-icon.placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    color: var(--muted);
  }
  .echo-set-name {
    flex: 1;
    min-width: 6rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
  }
  .echo-set-name.empty { color: var(--muted); font-weight: 500; }
  .echo-set-count-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: var(--muted);
    margin-left: auto;
  }
  .echo-set-count-wrap input {
    width: 3rem;
    padding: 0.3rem 0.35rem;
    text-align: center;
    font-size: 0.78rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
  }
  .echo-set-entry-body {
    padding: 0 0.6rem 0.65rem;
    border-top: 1px dashed var(--border);
  }
  .echo-set-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.8rem, 1fr));
    gap: 0.35rem;
    max-height: min(42vh, 280px);
    overflow-y: auto;
    margin: 0.55rem 0 0.65rem;
    padding-right: 0.15rem;
  }
  .echo-set-pick-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.45rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.68rem;
    cursor: pointer;
    text-align: left;
    min-width: 0;
  }
  .echo-set-pick-btn:hover { border-color: var(--accent); }
  .echo-set-pick-btn.active {
    border-color: #e8943a;
    background: rgba(232, 148, 58, 0.12);
  }
  .echo-set-pick-btn img {
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
  }
  .echo-set-pick-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .echo-set-pick-btn.empty {
    grid-column: 1 / -1;
    justify-content: center;
  }
  .echo-set-entry-main { margin-bottom: 0.45rem; }
  .echo-set-tier-hints { font-size: 0.68rem; color: var(--muted); line-height: 1.45; }
  .echo-set-tier-hints .active-tier { color: #f5c896; }
  .echo-slot-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.55rem;
  }
  .echo-slot-tab {
    padding: 0.42rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface2);
    color: #f5c896;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
  }
  .echo-slot-tab:hover { border-color: var(--accent); }
  .echo-slot-tab.active {
    border-color: #e8943a;
    background: rgba(232, 148, 58, 0.14);
    box-shadow: 0 0 0 1px rgba(232, 148, 58, 0.25);
  }
  .echo-slot-detail { margin-bottom: 0.5rem; }
  .echo-slot-placeholder {
    padding: 1.1rem 0.75rem;
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    color: var(--muted);
    font-size: 0.72rem;
  }
  .echo-slot-list { display: flex; flex-direction: column; gap: 0.65rem; }
  .echo-slot-card {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.55rem 0.6rem;
    background: var(--surface2);
  }
  .echo-slot-head {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin-bottom: 0.45rem;
  }
  .echo-slot-head .cost-tag {
    font-weight: 600;
    font-size: 0.74rem;
    color: #f5c896;
    min-width: 2.5rem;
  }
  .echo-slot-head input[type="text"] {
    flex: 1;
    min-width: 5rem;
    font-size: 0.78rem;
  }
  .echo-main-row, .echo-sub-row {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: 0.35rem;
    align-items: center;
    margin-bottom: 0.3rem;
    font-size: 0.72rem;
  }
  .echo-sub-row {
    grid-template-columns: 4.5rem 1fr 4.5rem auto;
  }
  .echo-sub-row.has-type {
    grid-template-columns: 4.5rem 1fr 5.2rem 4.5rem auto;
  }
  .echo-sub-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
    min-width: 0;
  }
  .echo-main-row.main2-row { opacity: 0.88; }
  .echo-main-row .tag, .echo-sub-row .tag {
    color: var(--muted);
    font-size: 0.68rem;
  }
  .echo-main-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
    min-width: 0;
  }
  .echo-main-row select,
  .echo-sub-row select,
  .echo-main-row input,
  .echo-sub-row input {
    font-size: 0.72rem;
    min-width: 0;
  }
  .echo-field-select {
    flex: 1 1 5.5rem;
    min-width: 5.5rem;
    max-width: 100%;
    padding: 0.35rem 0.45rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface2);
    color: var(--text);
    color-scheme: dark;
    cursor: pointer;
  }
  .echo-field-select:focus {
    outline: none;
    border-color: var(--accent);
  }
  .echo-field-select option {
    color: #f0f0f0;
    background-color: #1a1a1a;
  }
  .echo-field-select option:checked,
  .echo-field-select option:hover,
  .echo-field-select option:focus {
    color: var(--text-primary)fff;
    background-color: #2a2a2a;
  }
  .echo-field-select optgroup {
    color: var(--accent);
    background-color: #111111;
    font-weight: 600;
  }
  .echo-main-value {
    flex: 0 0 3.6rem;
    width: 3.6rem;
    padding: 0.35rem 0.3rem;
    text-align: center;
  }
  .echo-main2-label {
    flex: 1 1 5rem;
    min-width: 4rem;
  }
  /* 旧版扁平网格结构仍用满宽；嵌套在 .echo-row-fields 内时由上方规则横排 */
  .echo-sub-row > .echo-field-select {
    width: 100%;
    flex: none;
  }
  .echo-sub-row > .echo-sub-value {
    width: 100%;
    min-width: 4.2rem;
    max-width: 5.5rem;
    padding: 0.35rem 0.25rem;
    text-align: center;
    flex: none;
  }
  .echo-sub-value {
    min-width: 4.2rem;
    max-width: 5.5rem;
    padding: 0.35rem 0.25rem;
    text-align: center;
  }
  .echo-toolbar .echo-field-select {
    min-width: 5rem;
    flex: none;
  }
  .echo-sub-head {
    margin: 0.45rem 0 0.25rem;
    font-size: 0.68rem;
    color: var(--muted);
  }
  .echo-summary {
    margin-top: 0.65rem;
    padding: 0.5rem 0.55rem;
    border-radius: 8px;
    border: 1px dashed rgba(232, 148, 58, 0.35);
    background: rgba(232, 148, 58, 0.06);
    font-size: 0.72rem;
    line-height: 1.55;
    color: var(--muted);
  }
  .echo-summary strong { color: var(--text); }

  .scheme-panel .field { margin-bottom: 0.5rem; }

  .scheme-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.5rem 0;
  }

  .scheme-library {
    margin-top: 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    max-height: 280px;
    overflow-y: auto;
  }

  .scheme-lib-item {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.45rem 0.55rem;
    background: var(--surface2);
  }

  .scheme-lib-item .lib-title { font-size: 0.82rem; font-weight: 600; color: var(--accent2); }
  .scheme-lib-item .lib-meta { font-size: 0.68rem; color: var(--muted); margin-top: 0.15rem; }
  .scheme-lib-item .lib-actions { display: flex; gap: 0.35rem; margin-top: 0.35rem; flex-wrap: wrap; }
  .scheme-lib-item.auto-backup { border-style: dashed; opacity: 0.92; }

  .lib-auto-tag {
    font-size: 0.62rem;
    font-weight: 500;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.05rem 0.3rem;
    margin-left: 0.25rem;
    vertical-align: middle;
  }

  .rotation-archive-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: 0;
  }

  .rotation-panel > div:first-child {
    justify-content: flex-start;
  }

  /* —— 通用悬停 Tooltip（WcTooltip） —— */
  .wc-tooltip {
    position: fixed;
    z-index: 9999;
    background: var(--surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 32px var(--shadow);
    max-width: 380px;
    min-width: 180px;
    padding: 0;
    pointer-events: none;
    animation: tooltipIn 120ms ease forwards;
    box-sizing: border-box;
    color: var(--text-primary);
  }

  .wc-tooltip[hidden] {
    display: none !important;
  }

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

  .wc-tooltip.closing {
    animation: tooltipOut 80ms ease forwards;
  }

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

  .wc-tooltip-arrow {
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    transform: rotate(45deg);
    box-sizing: border-box;
  }

  .wc-tooltip[data-placement='top'] .wc-tooltip-arrow {
    bottom: -5px;
    top: auto;
    margin-left: -4px;
    border-top: none;
    border-left: none;
  }

  .wc-tooltip[data-placement='bottom'] .wc-tooltip-arrow {
    top: -5px;
    bottom: auto;
    margin-left: -4px;
    border-bottom: none;
    border-right: none;
  }

  .wc-tooltip[data-placement='left'] .wc-tooltip-arrow {
    right: -5px;
    left: auto;
    margin-top: -4px;
    border-bottom: none;
    border-left: none;
  }

  .wc-tooltip[data-placement='right'] .wc-tooltip-arrow {
    left: -5px;
    right: auto;
    margin-top: -4px;
    border-top: none;
    border-right: none;
  }

  .wc-tooltip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--border);
  }

  .wc-tooltip[data-variant='skill-info'] .wc-tooltip-header {
    border-bottom: none;
    padding-bottom: 4px;
  }

  .wc-tooltip-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 0;
  }

  .wc-tooltip-subtitle {
    font-size: 11px;
    color: var(--text-muted);
    padding: 4px 14px 6px;
  }

  .wc-tooltip-badge {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(var(--accent-rgb), 0.15);
    color: var(--accent);
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
  }

  .wc-tooltip-body {
    padding: 8px 14px;
  }

  .wc-tooltip-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
    gap: 16px;
  }

  .wc-tooltip-label {
    font-size: 12px;
    color: var(--text-muted);
  }

  .wc-tooltip-value {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  .wc-tooltip-text {
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
  }

  .wc-tooltip-footer {
    padding: 6px 14px 10px;
    border-top: 1px solid var(--border);
  }

  .wc-tooltip-source {
    font-size: 11px;
    color: var(--text-muted, var(--muted));
  }

  .wc-tooltip-source .source-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
  }

  .wc-tooltip[data-variant='buff'] .wc-tooltip-title,
  .wc-tooltip[data-variant='buff-desc'] .wc-tooltip-title {
    color: var(--accent, #c9a96e);
  }

  .wc-tooltip[data-variant='buff-desc'] {
    max-width: 320px;
  }

  .wc-tooltip-desc {
    font-size: 12px;
    color: var(--text-muted, var(--muted));
    line-height: 1.6;
    margin: 0;
  }

  .wc-tooltip-desc .keyword {
    color: var(--text-primary, var(--text));
    font-weight: 500;
  }

  .wc-tooltip-desc .number {
    font-family: var(--font-mono);
    color: var(--accent);
    font-weight: 600;
  }

  .wc-tooltip[data-variant='skill-info'] .wc-tooltip-body {
    padding-top: 4px;
  }

  .wc-tooltip[data-variant='calc-detail'] {
    max-width: 420px;
    min-width: 280px;
  }

  .wc-tooltip-divider {
    height: 1px;
    background: var(--hover-bg);
    margin: 6px 0;
  }

  .wc-tooltip-section-title {
    font-size: 11px;
    color: var(--text-muted, var(--muted));
    letter-spacing: 0.04em;
    margin-bottom: 4px;
  }

  .wc-tooltip-value.accent {
    color: var(--accent);
    font-weight: 700;
  }

  .wc-tooltip-value.crit {
    color: var(--color-crit);
  }

  .wc-tooltip-row.highlight {
    background: rgba(var(--accent-rgb), 0.04);
    border-radius: 4px;
    padding: 4px 6px;
    margin: 0 -6px;
  }

  .wc-tooltip-row.multi {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px 12px;
  }

  .wc-tooltip-row.multi .wc-tooltip-label:nth-of-type(2) {
    margin-left: auto;
  }

  .wc-tooltip-debug {
    font-size: 10px;
    color: var(--text-muted);
    padding-top: 6px;
    margin-top: 4px;
    border-top: 1px dashed var(--border);
    font-family: var(--font-mono);
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
  }

  /* Buff 游戏原文：编辑面板（悬停查看已统一走 WcTooltip） */
  .buff-game-text-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.75rem;
    margin: 0 0 0.65rem;
  }

  .buff-game-text-edit-toggle {
    cursor: pointer;
    user-select: none;
  }

  .buff-game-text-hit {
    cursor: help;
    border-bottom: 1px dotted rgba(201, 169, 110, 0.45);
  }

  .buff-game-text-hit[data-can-edit-game-text]:hover {
    cursor: pointer;
    color: var(--accent2);
  }

  .catalog-stack-label.has-game-text-card {
    cursor: help;
  }

  .buff-game-text-layer {
    position: fixed;
    inset: 0;
    z-index: 12000;
    pointer-events: none;
  }

  .buff-game-text-layer[hidden] {
    display: none !important;
  }

  /* —— 编辑原文案面板（保留可交互） —— */
  .buff-game-text-editor {
    position: fixed;
    width: min(26rem, calc(100vw - 1.5rem));
    max-height: min(70vh, 28rem);
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    border: 1px solid rgba(201, 169, 110, 0.35);
    border-radius: 10px;
    background: linear-gradient(165deg, #1a1a1d 0%, #141416 55%, #101012 100%);
    box-shadow:
      0 12px 40px rgba(0, 0, 0, 0.45),
      0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    overflow: hidden;
  }

  .buff-game-text-card-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 0.65rem;
    border-bottom: 1px solid var(--border);
    background: rgba(201, 169, 110, 0.06);
  }

  .buff-game-text-badge {
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 0.12rem 0.4rem;
    border-radius: 4px;
    color: #9ec9ea;
    border: 1px solid rgba(91, 159, 212, 0.45);
    background: rgba(91, 159, 212, 0.12);
  }

  .buff-game-text-badge.is-edit {
    color: #e5c07b;
    border-color: rgba(229, 192, 123, 0.45);
    background: rgba(229, 192, 123, 0.1);
  }

  .buff-game-text-card-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.86rem;
    color: var(--text);
    font-weight: 650;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .buff-game-text-close {
    flex: 0 0 auto;
    margin-left: auto;
  }

  .buff-game-text-textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0.65rem 0.8rem;
    border: none;
    border-bottom: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.22);
    color: var(--text);
    font-size: 0.8rem;
    line-height: 1.55;
    resize: vertical;
    min-height: 10rem;
  }

  .buff-game-text-textarea:focus {
    outline: none;
    background: rgba(201, 169, 110, 0.06);
  }

  .buff-game-text-editor-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.65rem;
  }

  .buff-game-text-editor-hint {
    flex: 1 1 auto;
    margin: 0;
    min-width: 6rem;
  }
  .chain-game-text-batch-layer {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(8, 12, 18, 0.55);
  }

  .chain-game-text-batch-layer[hidden] {
    display: none !important;
  }

  .chain-game-text-batch-panel {
    width: min(36rem, 100%);
    max-height: min(90vh, 44rem);
    overflow: auto;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-primary);
    box-shadow: 0 12px 40px var(--shadow);
    padding: 0.85rem 1rem 1rem;
  }

  .chain-game-text-batch-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
  }

  .chain-game-text-batch-hint {
    margin: 0 0 0.75rem;
    line-height: 1.45;
  }

  .chain-game-text-batch-rows {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 0.75rem;
  }

  .chain-game-text-batch-row {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: 0.45rem;
    align-items: start;
  }

  .chain-game-text-batch-row label {
    padding-top: 0.45rem;
    font-size: 0.85rem;
    color: #9db4c9;
  }

  .chain-game-text-batch-row textarea {
    width: 100%;
    min-height: 3.2rem;
    resize: vertical;
    border-radius: 6px;
    border: 1px solid rgba(120, 160, 200, 0.28);
    background: var(--hover-bg);
    color: inherit;
    padding: 0.4rem 0.5rem;
    font: inherit;
    line-height: 1.4;
  }

  .chain-game-text-batch-row textarea:focus {
    outline: none;
    border-color: rgba(91, 159, 212, 0.65);
    background: rgba(91, 159, 212, 0.06);
  }

  .chain-game-text-batch-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
  }

  .chain-game-text-batch-actions [data-chain-game-text-batch-status] {
    flex: 1 1 auto;
    margin-right: auto;
  }

  /* —— 确认弹窗（排轴清空 / 删除等） —— */
  .confirm-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: overlayFadeIn 150ms ease;
    padding: 1rem;
  }

  .confirm-modal-overlay.is-closing {
    animation: overlayFadeOut 150ms ease forwards;
  }

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

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

  .confirm-modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 28px 32px 24px;
    min-width: min(360px, 100%);
    max-width: 440px;
    width: 100%;
    box-shadow: 0 16px 48px var(--shadow);
    animation: modalSlideUp 200ms ease;
    color: var(--text-primary);
  }

  .confirm-modal.closing {
    animation: modalFadeOut 150ms ease forwards;
  }

  @keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  @keyframes modalFadeOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(8px) scale(0.97); }
  }

  .confirm-modal-title {
    display: flex;
    align-items: flex-start;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
    line-height: 1.5;
  }

  .confirm-modal-title .warning-icon,
  .confirm-modal-title .danger-icon {
    display: inline-flex;
    flex-shrink: 0;
    width: 1.15em;
    height: 1.15em;
    margin-right: 6px;
    margin-top: 0.12em;
  }

  .confirm-modal-title .warning-icon {
    color: #ff9f43;
  }

  .confirm-modal-title .danger-icon {
    color: #ff5050;
  }

  .confirm-modal-title .warning-icon svg,
  .confirm-modal-title .danger-icon svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .confirm-modal-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
  }

  .confirm-modal-desc .highlight {
    color: var(--text-primary);
    font-weight: 500;
  }

  .confirm-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }

  .confirm-modal-actions .btn-cancel {
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--hover-bg);
    border: 1px solid var(--input-border);
    cursor: pointer;
    transition: background 150ms;
  }

  .confirm-modal-actions .btn-cancel:hover {
    background: var(--hover-bg);
  }

  .confirm-modal-actions .btn-cancel:focus-visible {
    outline: 2px solid rgba(var(--accent-rgb), 0.55);
    outline-offset: 2px;
  }

  .confirm-modal-actions .btn-confirm {
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 150ms;
  }

  .confirm-modal-actions .btn-confirm.safe {
    background: var(--accent);
    color: #000;
    border: 1px solid var(--accent);
  }

  .confirm-modal-actions .btn-confirm.safe:hover {
    filter: brightness(1.1);
  }

  .confirm-modal-actions .btn-confirm.danger {
    background: #ff5050;
    color: var(--text-primary);
    border: 1px solid #ff5050;
  }

  .confirm-modal-actions .btn-confirm.danger:hover {
    background: #ff3333;
  }

  .confirm-modal-actions .btn-confirm:focus-visible {
    outline: 2px solid var(--border-strong);
    outline-offset: 2px;
  }

/* ========== 主题切换器 ========== */
.theme-switcher {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10050;
  display: flex;
  gap: 6px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 20px var(--shadow);
  transition: background 300ms, border-color 300ms, box-shadow 300ms;
}

.theme-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 150ms;
  position: relative;
  padding: 0;
  appearance: none;
}

.theme-btn:hover {
  transform: scale(1.15);
}

.theme-btn.active {
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.3);
}

.theme-btn::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 10px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
  transition: transform 150ms;
}

.theme-btn.active::after {
  transform: translateX(-50%) scaleX(1);
}

.theme-btn[data-theme="classic"] {
  background: linear-gradient(135deg, #0d0d0d 50%, #c9a96e 50%);
}

.theme-btn[data-theme="deep-blue"] {
  background: linear-gradient(135deg, #0c1018 50%, #e8c547 50%);
}

.theme-btn[data-theme="pure-white"] {
  background: linear-gradient(135deg, #f5f3ee 50%, #2a6b5c 50%);
}

.theme-btn[data-theme="dark-purple"] {
  background: linear-gradient(135deg, #0e0a14 50%, #c8a0ff 50%);
}

.theme-btn[data-theme="mist-jade"] {
  background: linear-gradient(135deg, #f0ece4 50%, #1a7a64 50%);
}

.theme-btn-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
  color: var(--text-primary);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms;
}

.theme-btn:hover .theme-btn-tooltip {
  opacity: 1;
}

/* dzɫ���⣺���� / ������ǿ��Ӱ */
[data-theme="pure-white"] .wc-tooltip,
[data-theme="mist-jade"] .wc-tooltip,
[data-theme="pure-white"] .confirm-modal,
[data-theme="mist-jade"] .confirm-modal,
[data-theme="pure-white"] .build-modal,
[data-theme="mist-jade"] .build-modal {
  box-shadow: 0 12px 40px var(--shadow), 0 2px 10px var(--shadow);
}

/* �������������� */
* {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* ����ť���֣�dzɫ accent ���� accent-text */
.btn.primary,
.confirm-modal-actions .btn-confirm.safe {
  color: var(--accent-text) !important;
}

/* �����û����ܿ������л��� */
.app-topbar > .app-user {
  margin-right: 180px;
}

@media (max-width: 720px) {
  .theme-switcher {
    top: auto;
    bottom: 16px;
    right: 12px;
  }
  .app-topbar > .app-user {
    margin-right: 0;
  }
}