/* =============================================================================
 * POE2 Deep · BD 文件编辑器（个人页右列编辑模式）
 * -----------------------------------------------------------------------------
 * 设计原则
 *   1. 颜色全部走全站设计 token（var(--bg-*) / var(--text-*) / var(--brand)
 *      / var(--accent-*) / var(--color-*)），亮暗双主题自动切换，文件内不再
 *      出现硬编码 rgba。
 *   2. 编辑器内部建立一层别名 token（--bd-surface / --bd-text / --bd-accent…），
 *      所有组件只引用这层别名，方便集中改色。
 *   3. 三个共享原子组件：
 *        .bd-editor-header / .bd-zone / .bd-editor-preview-panel
 *            —— 卡片基底（border / radius / background / shadow）
 *        .bd-editor-field
 *            —— 字段容器（label + input/textarea/select），统一焦点环
 *        .bd-row(+--item/--skill) / .bd-passive-group / .bd-passive-entry
 *            —— 可点击条目，统一状态修饰符
 *              .is-open / .is-active / .is-edited / .is-text-edited
 *              / .is-collapsed
 *   4. 滚动区统一 .bd-zone__body / .bd-editor-preview，使用全站
 *      var(--scrollbar-thumb) / var(--scrollbar-thumb-hover)。
 *   5. 类名保持与 poe2-bd-editor.js 渲染一致；本文件只负责样式。
 * ============================================================================= */


/* =============================================================================
 * 1. 入口动作（左/右拖入区里那两个进入/分享/下载按钮）
 *    - 由 build-library.js 渲染；
 *    - 与全站按钮风格保持一致（次级按钮 + 蓝色 hover 强调）。
 * ============================================================================= */

.summary-hero-bd-btn {
    cursor: pointer;
}

/* BD 编辑模式下，左侧 BD 文件按钮切换为「退出」状态：
   用强调色描边/文字提醒用户当前正处于编辑会话中 */
.summary-hero-bd-btn.summary-hero-bd-btn--exit {
    border-color: var(--accent-warning, #e07b3a);
    color: var(--accent-warning, #e07b3a);
    background: var(--bg-elevated);
}

.summary-hero-bd-btn.summary-hero-bd-btn--exit:hover {
    background: color-mix(in srgb, var(--accent-warning, #e07b3a) 12%, var(--bg-elevated));
}

/* BD 文件按钮 + 详情按钮：横向排列在右上角；postMeta 行换到下一行 */
.summary-hero-post-meta-corner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;
    max-width: min(340px, 60%);
}

.summary-hero-post-meta-corner > .summary-hero-post-meta-row {
    flex-basis: 100%;
    margin-top: 6px;
    margin-left: auto;
}

/* 横向排列后右侧需要更多 hero-body 内边距，避免文字撞按钮 */
.banner-summary-hero-slot .summary-hero--with-post-meta .summary-hero-body {
    padding-right: min(360px, 62%);
}

.compare-drop-zone--bd-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    min-height: 116px;
    padding: 12px;
    border-style: solid;
}

.compare-drop-bd-action {
    width: 100%;
    min-height: 92px;
    padding: 10px 16px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--transition-fast),
                background var(--transition-fast),
                color var(--transition-fast),
                transform var(--transition-fast),
                box-shadow var(--transition-fast);
}

.compare-drop-bd-action:hover {
    transform: translateY(-1px);
    border-color: var(--brand);
    background: var(--accent-blue-tint);
    color: var(--brand);
    box-shadow: var(--shadow-sm);
}

.compare-drop-bd-action:active {
    transform: translateY(0);
    box-shadow: var(--shadow-xs);
}

.compare-drop-bd-action--share {
    color: var(--text-secondary);
    font-weight: 600;
}


/* =============================================================================
 * 2. 编辑模式下隐藏右列原本的 banner / bd-section / tree
 * ============================================================================= */

.compare-col--bd-editor > .wegame-char-banner,
.compare-col--bd-editor > .wegame-char-shell,
.compare-col--bd-editor .wegame-char-banner,
.compare-col--bd-editor > .bd-section,
.compare-col--bd-editor > .wegame-tree-section,
.compare-col--bd-editor > .snapshot-warning-box {
    display: none !important;
}


/* =============================================================================
 * 3. 内部别名 token（双主题自动切换的入口）
 *    - 在 .bd-editor-header / .bd-editor-shell 上声明，子元素继承使用
 *    - 命名约定：bd-surface(背景) / bd-text(文字) / bd-border / bd-accent
 * ============================================================================= */

.bd-editor-header,
.bd-editor-shell {
    --bd-surface:           var(--bg-elevated);
    --bd-surface-soft:      var(--bg-secondary);
    --bd-surface-strong:    var(--bg-tertiary);
    --bd-surface-inset:     var(--bg-secondary);

    --bd-border:            var(--border-light);
    --bd-border-strong:     var(--border-medium);
    --bd-border-active:     var(--brand);

    --bd-text:              var(--text-primary);
    --bd-text-soft:         var(--text-secondary);
    --bd-text-muted:        var(--text-tertiary);

    --bd-accent:            var(--brand);
    --bd-accent-soft:       var(--accent-blue-tint);
    --bd-accent-strong:     var(--accent-gold-tint-strong);

    --bd-success:           var(--color-success);
    --bd-success-soft:      var(--color-success-bg);
    --bd-success-border:    var(--color-success-border);

    --bd-warning:           var(--color-warning);
    --bd-warning-soft:      var(--color-warning-bg);
    --bd-warning-border:    var(--color-warning-border);

    --bd-danger:            var(--color-error);

    --bd-radius:            var(--radius-md);
    --bd-radius-sm:         var(--radius-sm);
    --bd-radius-pill:       var(--radius-full);

    --bd-shadow:            var(--shadow-sm);
    --bd-shadow-strong:     var(--shadow-md);

    --bd-transition:        var(--transition-fast);
}

/* -----------------------------------------------------------------------------
 * 站点全局 button:hover（在 poe2-deep.css / poe2-deep-shell.css 里定义）会给所有
 * <button> 加 `transform: translateY(-1px); box-shadow: 0 8px 18px var(...)`，
 * 这条规则面向"CTA 按钮"而设计，但 BD 编辑器里把 <button> 当成 tab、列表项、图标、
 * 复选框等非 CTA 用途，套用全局 hover 会让整个编辑器到处出现"上浮 + 金色发光"的容器
 * 阴影，视觉非常嘈杂。
 *
 * 这里在编辑器作用域下统一 reset 掉 transform / box-shadow，且用 :where() 把
 * specificity 压成 0，让具体组件（如 .bd-skill-support-gem:hover 的 accent 外环）
 * 仍然可以用 class 选择器覆盖回自定义阴影。
 * --------------------------------------------------------------------------- */
:where(.bd-editor-header, .bd-editor-shell) button:hover {
    transform: none;
    box-shadow: none;
}


/* =============================================================================
 * 4. 卡片基底（header / zone / preview 共用）
 *    - 所有"块容器"共用 1px hairline 边框 + 大圆角
 *    - 头部 / 预览：用 --shadow-sm（柔和投影），像 macOS Settings 的 pane card
 *    - 分区（.bd-zone）：在 §7 中单独覆盖成"surface-soft 托盘 + 极浅阴影"，
 *      让中间三个工作区在视觉上沉下去一档，把焦点让给托盘里的卡片
 * ============================================================================= */

.bd-editor-header,
.bd-zone,
.bd-editor-preview-panel {
    border: 1px solid var(--bd-border);
    border-radius: var(--bd-radius);
    background: var(--bd-surface);
    box-shadow: var(--shadow-sm);
}


/* =============================================================================
 * 5. 通用文字 / 字段 / 滚动条原子
 * ============================================================================= */

.bd-editor-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--bd-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.bd-editor-field {
    display: grid;
    gap: 6px;
}

.bd-editor-field > span {
    color: var(--bd-text-soft);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
}

.bd-editor-field input,
.bd-editor-field textarea,
.bd-editor-field select {
    width: 100%;
    border: 1px solid var(--bd-border);
    border-radius: var(--bd-radius-sm);
    background: var(--bd-surface-soft);
    color: var(--bd-text);
    font: inherit;
    font-size: 13px;
    line-height: 1.5;
    transition: border-color var(--bd-transition),
                background var(--bd-transition),
                box-shadow var(--bd-transition);
}

.bd-editor-field input,
.bd-editor-field select {
    min-height: 36px;
    padding: 0 12px;
}

.bd-editor-field textarea {
    min-height: 88px;
    padding: 10px 12px;
    resize: vertical;
}

.bd-editor-field input:focus,
.bd-editor-field textarea:focus,
.bd-editor-field select:focus {
    outline: none;
    border-color: var(--bd-accent);
    background: var(--bd-surface);
    box-shadow: 0 0 0 3px var(--bd-accent-soft);
}

.bd-editor-field input::placeholder,
.bd-editor-field textarea::placeholder {
    color: var(--bd-text-muted);
}

/* —— 滚动条统一 —— */
.bd-zone__body,
.bd-editor-preview,
.bd-skill-supports {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

.bd-zone__body::-webkit-scrollbar,
.bd-editor-preview::-webkit-scrollbar,
.bd-skill-supports::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.bd-zone__body::-webkit-scrollbar-track,
.bd-editor-preview::-webkit-scrollbar-track,
.bd-skill-supports::-webkit-scrollbar-track {
    background: transparent;
}

.bd-zone__body::-webkit-scrollbar-thumb,
.bd-editor-preview::-webkit-scrollbar-thumb,
.bd-skill-supports::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
}

.bd-zone__body::-webkit-scrollbar-thumb:hover,
.bd-editor-preview::-webkit-scrollbar-thumb:hover,
.bd-skill-supports::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}


/* =============================================================================
 * 6. 头部（name / description / ascendancy）
 *    退出能力已合并到左侧 summary 区的 BD 文件按钮，编辑模式下它会切换为「退出」
 * ============================================================================= */

.bd-editor-header {
    display: grid;
    gap: 14px;
    padding: 18px 20px;
}


/* =============================================================================
 * 7. 工作区 & 分区（装备 / 技能 / 天赋）
 * -----------------------------------------------------------------------------
 * 设计语言：参考 Apple HIG（macOS Sonoma 系统设置面板 / iOS 17 分组列表）
 *
 *   设计原则
 *   1) 不用颜色作分区身份。三个分区视觉上是同一种容器，靠"大字标题 + 留白
 *      + 多层柔和阴影"来做主次，不用橙/蓝/紫这种 toy-like 的色彩区分。
 *   2) 焦点 / 选中色统一回到品牌蓝（--bd-accent ← --brand），全站只有一种
 *      "选中"的颜色含义。
 *   3) 层级靠"表面亮度差 + 阴影"建立：
 *        Page bg (最深)
 *          └ Zone tray  (略亮一档：亮=#F9F9FC / 暗=#0E0E10，无色染)
 *               └ Card  (亮一档：亮=白 / 暗=#151517，靠多层柔和阴影"浮"出来)
 *                    └ 展开抽屉（卡内反色面板）
 *   4) 字体层级（macOS 系统设置式）：
 *        Section 标题  17px / 600 / 字距 -0.01em / 非全大写
 *        卡片标题      14~15px / 700
 *        卡片副文 / 计数   12~13px / 500 / muted
 *      靠"size + weight + color"三件套区分，而不是把"装备"这两个字染成橙色。
 *   5) 阴影只用 var(--shadow-xs/sm/md)（已按主题自动加深），不再硬编码 rgba。
 * ============================================================================= */

.bd-editor-shell {
    margin-top: 14px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.bd-editor-workspace {
    display: grid;
    gap: 14px;
    min-height: 0;
}

/* "分区组 ↔ 预览面板"之间的留白；预览面板和左列无对应模块，
   所以这里给一个固定的 gap 即可 */
.bd-editor-workspace--bd-rows {
    display: grid;
    gap: 16px;
}

/* .bd-zones 内部分区之间的间距不再固定，
   而是交给 .bd-zone--skills / --passives 各自的 margin-top 用变量同步左列实际间距，
   这样右侧装备 / 技能 / 天赋三个分区可以精确对齐左列同名模块的顶端位置。 */
.bd-zones {
    display: grid;
    gap: 0;
    min-width: 0;
}

/* .bd-zone：极简"托盘"
   - 比卡片暗一档的底色（无色染）→ 让卡片浮出来
   - hairline 边框 + 极浅一层投影，存在感很弱（不抢卡片焦点）
   - 圆角与卡片差一档（zone 偏大 radius-md，card 偏小 radius-sm）
     这种"外大内小"的圆角差也是 Apple 卡片嵌套常用的层级技巧 */
.bd-zone {
    position: relative;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 14px;
    min-width: 0;
    min-height: 0;
    padding: 18px 18px 14px;
    border: 1px solid var(--bd-border);
    border-radius: var(--bd-radius);
    background: var(--bd-surface-soft);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

/* 暗模式下 --bg-elevated 与 --bg-secondary 取值相同（都是 #151517），
   按 surface-soft 写法会让"托盘"与"卡片"颜色一模一样。
   这里把托盘色压到 #0E0E10（介于页面 bg-primary 与 card 之间），
   让暗模式下卡片仍能从托盘上"浮"出一档。 */
[data-theme="dark"] .bd-zone {
    background: #0E0E10;
    border-color: #2A2A2E;
}

/* —— 分区头：macOS Settings 风的 pane 标题 ——
   · 17px / 600 / 主色文字 / 字距微负
   · 计数为右侧 muted 小字（非徽章），降低视觉权重
   · 标题与列表之间用一条 hairline 分隔线（border-bottom）做温和切割 */
.bd-zone__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px 12px;
    border-bottom: 1px solid var(--bd-border);
    color: var(--bd-text);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    line-height: 1.25;
}

/* 计数从"实色徽章"降级为"右侧 muted 小字"——只是次要信息，不抢眼 */
.bd-zone__head strong {
    display: inline;
    padding: 0;
    min-width: 0;
    height: auto;
    background: transparent;
    color: var(--bd-text-muted);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    border-radius: 0;
    box-shadow: none;
}

.bd-zone__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    /* 上下额外留 6px，让 .bd-row.is-open 的 accent 外环 + 抬升阴影不会被 overflow:auto 切掉 */
    padding: 6px 6px 6px 0;
    scrollbar-gutter: stable;
}

.bd-zone--items {
    height: var(--bd-items-zone-height, 360px);
}

/* 三分区之间的纵向 gap 完全由 JS 实测的左列间距驱动：
   - syncSectionHeights() 会读取左列 #itemsList → #skillsList → 天赋树
     这三块的 getBoundingClientRect 上下边距，
     写到 --bd-items-skills-gap / --bd-skills-passives-gap 上
   - 这两条变量分别接到下面两个 margin-top 上，
     这样右侧每个分区的顶端就能精确对上左侧同名模块的顶端位置 */
.bd-zone--skills {
    height: var(--bd-skills-zone-height, 420px);
    margin-top: var(--bd-items-skills-gap, 10px);
}

.bd-zone--passives {
    height: var(--bd-passives-zone-height, 620px);
    margin-top: var(--bd-skills-passives-gap, 0px);
}


/* =============================================================================
 * 8. 通用条目行（.bd-row）
 *    所有装备 / 通用技能 / 主技能行的视觉骨架
 * ============================================================================= */

.bd-row {
    flex: 0 0 auto;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--bd-border);
    border-radius: var(--bd-radius-sm);
    background: var(--bd-surface);
    /* Apple 风的"卡片浮在托盘上"阴影：用站点 token，亮/暗模式自动加深。
       默认极轻，仅一层 --shadow-xs，足以与 surface-soft 托盘拉开层级而不抢戏。 */
    box-shadow: var(--shadow-xs);
    transition: border-color var(--bd-transition),
                background var(--bd-transition),
                box-shadow var(--bd-transition),
                transform var(--bd-transition);
}

.bd-row:hover {
    /* hover 不染色，只把边缘和投影抬高一档（Apple 系统 List 的 row hover 风格） */
    border-color: var(--bd-border-strong);
    box-shadow: var(--shadow-sm);
}

.bd-row.is-open {
    /* 选中态：单一品牌蓝。3px 软外环 + 抬升投影，焦点感强但不刺眼。
       不再让外环跟随"分区色"，全站只有一种"已激活"的颜色含义。 */
    border-color: var(--bd-border-active);
    box-shadow:
        0 0 0 3px var(--bd-accent-soft),
        var(--shadow-md);
}

.bd-row__button {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) minmax(120px, 0.42fr);
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 64px;
    padding: 8px 36px 8px 10px;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--bd-transition);
}

.bd-row__button:hover {
    background: var(--bd-accent-soft);
}

.bd-row__main {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.bd-row__topline {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.bd-row__type {
    color: var(--bd-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.bd-row__title {
    color: var(--bd-text);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.bd-row__meta {
    color: var(--bd-text-soft);
    font-size: 12px;
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bd-row__id {
    overflow: hidden;
    color: var(--bd-text-muted);
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bd-row__id.is-warning {
    color: var(--bd-warning);
}

.bd-row__edited {
    display: inline-flex;
    align-items: center;
    height: 18px;
    padding: 0 8px;
    border-radius: var(--bd-radius-pill);
    background: var(--bd-success-soft);
    color: var(--bd-success);
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    border: 1px solid var(--bd-success-border);
}

.bd-row__chevron {
    position: absolute;
    right: 14px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--bd-text-muted);
    border-bottom: 2px solid var(--bd-text-muted);
    transform: translateY(-50%) rotate(-45deg);
    transition: transform var(--bd-transition),
                border-color var(--bd-transition);
}

.bd-row.is-open .bd-row__chevron {
    transform: translateY(-50%) rotate(45deg);
    border-color: var(--bd-accent);
}

/* —— 行展开后的编辑面板（等级上下限 + additional_text） —— */
.bd-row-panel {
    display: grid;
    gap: 10px;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--bd-border);
    background: var(--bd-surface-soft);
}

.bd-row-panel__levels {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

/* =============================================================================
 * 折叠面板顶部的横向 Tab 切换器 + 复选框徽章
 *   - 装备：攻略 / 物品 / 等级（攻略 + 物品 默认勾选；等级默认不勾选）
 *   - 技能 / 天赋：攻略 / 等级（攻略默认勾选；等级默认不勾选）
 *   - 每个 Tab 右上角的复选框徽章控制「是否启用」：未启用 → 编辑器只读 +
 *     导出 BD JSON 时跳过该字段
 *   - 复选框 click 由 JS 阻断冒泡，所以点徽章只切勾选状态、不切 Tab
 * ============================================================================= */
.bd-row-panel--tabbed {
    padding: 0;
    background: transparent;
    border-top: 0;
    gap: 0;
    grid-template-rows: auto 1fr;
}

/* Tab 条整体：上下两条横线 + 中间分隔成多列的"表格式" tab bar，
   不再是按钮样式（参考用户手稿） */
.bd-row-panel__tabs {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    padding: 0;
    background: var(--bd-surface-soft);
    border-top: 1px solid var(--bd-border);
    border-bottom: 1px solid var(--bd-border);
}

.bd-row-panel__tab {
    box-sizing: border-box;
    /* inline-flex：label + 复选框 inline 排列，复选框在 label 后面紧跟一格 gap，
       彻底放弃 absolute / transform，hover 时位置绝对稳定 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* 充足的左右内边距让"|内容描述|"看起来像独立的一格 */
    padding: 8px 22px;
    border: 0;
    /* 每个 tab 右侧一条竖线作为与下一个 tab 的分隔 */
    border-right: 1px solid var(--bd-border);
    border-radius: 0;
    background: transparent;
    color: var(--bd-text-soft);
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    user-select: none;
    /* 仅过渡颜色，不过渡任何会影响布局的属性 */
    transition: background 0.15s ease, color 0.15s ease;
    outline: none;
}

/* 第一个 tab 补一条左侧竖线，让 |内容|装备|等级| 形成首尾闭合的格子 */
.bd-row-panel__tab:first-child {
    border-left: 1px solid var(--bd-border);
}

/* 最后一个 tab 保留右侧竖线，作为整组 tabs 的右收边 */

.bd-row-panel__tab:hover {
    color: var(--bd-text);
    background: color-mix(in srgb, var(--bd-accent) 6%, transparent);
}

.bd-row-panel__tab:focus-visible {
    box-shadow: inset 0 0 0 2px var(--bd-accent-soft);
}

.bd-row-panel__tab.is-active {
    color: var(--bd-text);
    font-weight: 600;
    background: var(--bd-surface);
    /* 用 inset 底部色条标记当前选中的 tab，不影响布局 */
    box-shadow: inset 0 -2px 0 var(--bd-accent);
}

/* 未勾选的 Tab：弱化标题，提示用户该字段不会写入 BD 文件 */
.bd-row-panel__tab.is-disabled .bd-row-panel__tab-label {
    color: var(--bd-text-muted);
    text-decoration: line-through;
    text-decoration-color: var(--bd-text-muted);
    text-decoration-thickness: 1px;
}

.bd-row-panel__tab-label {
    display: inline-block;
    pointer-events: none;
}

/* 复选框徽章：紧跟在 label 后面 inline 排列
   - 未勾选：透明背景 + 灰边框
   - 已勾选：accent 背景 + 内嵌对号
   - 不再使用 absolute / transform 定位，hover 时位置绝对稳定 */
.bd-row-panel__tab-check {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    /* flex 子元素：不被父 flex 拉伸 / 压缩 */
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    padding: 0;
    margin: 0;
    border-style: solid;
    border-width: 1.5px;
    border-color: var(--bd-border-strong);
    border-radius: 4px;
    background: var(--bd-surface);
    color: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 仅过渡颜色相关，width/height/margin/padding 永不变，杜绝抖动 */
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bd-row-panel__tab-check:hover {
    border-color: var(--bd-accent);
}

.bd-row-panel__tab-check:focus-visible {
    /* box-shadow 是 outside ring，不占布局空间，hover/focus 时位置不会变 */
    outline: none;
    box-shadow: 0 0 0 2px var(--bd-accent-soft);
}

.bd-row-panel__tab-check.is-checked {
    background: var(--bd-accent);
    border-color: var(--bd-accent);
    /* 对号颜色：在 accent 背景上需要高对比度，固定走白色，亮暗主题都可读 */
    color: #fff;
}

/* 用 border 画对号，避免依赖 SVG / font icon */
.bd-row-panel__tab-check-mark {
    display: inline-block;
    width: 10px;
    height: 6px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-1.5px) rotate(-45deg);
    opacity: 0;
    transition: opacity 0.12s ease;
    pointer-events: none;
}

.bd-row-panel__tab-check.is-checked .bd-row-panel__tab-check-mark {
    opacity: 1;
}

/* —— Tab body：装在 panel 主体里的实际编辑区 —— */
.bd-row-panel__body {
    padding: 12px 14px 14px;
    background: var(--bd-surface-soft);
    border-top: 1px solid var(--bd-border);
}

/* 等级 Tab 未勾选：把 input 灰显（disabled 属性已让浏览器禁用交互） */
.bd-row-panel__levels.is-disabled {
    opacity: 0.55;
}

/* 装备「物品」Tab：与攻略 Tab 共用 .bd-markup-editor 样式，
   只多一行用于「恢复默认」按钮的操作条 */
.bd-item-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bd-item-text__actions {
    display: flex;
    justify-content: flex-end;
}

.bd-item-text__reset {
    appearance: none;
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid var(--bd-border);
    background: var(--bd-surface);
    color: var(--bd-text-soft);
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.bd-item-text__reset:hover {
    color: var(--bd-text);
    border-color: var(--bd-border-strong);
    background: var(--bd-surface-strong);
}

/* markup 编辑器只读态：灰显 + 屏蔽工具条 + 鼠标变 not-allowed
   contenteditable=false 已经让浏览器拦截输入，CSS 只补视觉差异 */
.bd-editor-field--md.is-readonly .bd-markup-editor {
    opacity: 0.55;
    cursor: not-allowed;
}

.bd-editor-field--md.is-readonly .bd-markup-toolbar {
    pointer-events: none;
    opacity: 0.4;
}

/* =============================================================================
 * 9. 装备行（.bd-row--item）
 *    - 行高与技能/天赋一致（64px）；图标按自身宽高比完整显示在 56×56 容器内，
 *      非正方形贴图（武器/腰带等）会按比例缩小不裁剪
 * ============================================================================= */

.bd-row--item .bd-row__button,
.bd-row__button--item {
    grid-template-columns: 60px minmax(0, 1fr);
    min-height: 64px;
    padding: 6px 36px 6px 10px;
}

.bd-row--item .bd-row-icon {
    width: 56px;
    height: 56px;
    padding: 4px;
    box-sizing: border-box;
    background: var(--bd-surface-strong);
    /* 强制改成 flex 居中：避免 .bd-row-icon 基类的 display:grid 因隐式行高
       被自然尺寸更大的 img 撑大，导致 max-height:100% 失效从而溢出容器 */
    display: flex !important;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.bd-row--item .bd-row-icon img {
    display: block;
    /* 显式让 img box 严格贴合容器内边距框，再用 object-fit: contain
       做等比缩放居中，长方形贴图（武器/腰带）完整显示不裁剪 */
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain !important;
    object-position: center;
}

/* 空武器槽：虚线占位 + 「+」 占位图标 */
.bd-row--empty {
    background: transparent;
    border-style: dashed;
    border-color: var(--bd-border);
    box-shadow: none;
}

.bd-row--empty:hover {
    background: var(--bd-surface-soft);
    border-color: var(--bd-accent);
}

.bd-row--empty .bd-row__title {
    color: var(--bd-text-muted);
    font-style: italic;
    font-weight: 600;
}

.bd-row--empty .bd-row__meta {
    color: var(--bd-text-muted);
    font-size: 11px;
    opacity: 0.85;
}

.bd-row-icon--empty {
    border-style: dashed;
    border-color: var(--bd-border-strong);
    background: var(--bd-surface-soft);
    color: var(--bd-text-muted);
    display: grid;
    place-items: center;
}

.bd-row-icon--empty .bd-row-icon__plus {
    font-size: 26px;
    line-height: 1;
    font-weight: 400;
    color: var(--bd-text-muted);
    opacity: 0.7;
}

.bd-row--empty.is-open .bd-row__title,
.bd-row--empty.is-text-edited .bd-row__title {
    color: var(--bd-text);
    font-style: normal;
}

.bd-row--empty.is-open .bd-row-icon--empty,
.bd-row--empty.is-text-edited .bd-row-icon--empty {
    border-color: var(--bd-accent);
    background: var(--bd-accent-soft);
}

.bd-row--empty.is-open .bd-row-icon__plus,
.bd-row--empty.is-text-edited .bd-row-icon__plus {
    color: var(--bd-accent);
    opacity: 1;
}


/* =============================================================================
 * 10. 技能行（.bd-row--skill）
 *     - 主技能图标 + 标题 + 右侧辅助宝石条 + 展开 toggle
 * ============================================================================= */

.bd-skill-row-shell {
    position: relative;
    display: grid;
    /* 左侧：主技能 icon + 辅助技能 chips（同一格，内部 flex）
       右侧：当前选中技能 icon + 名称 */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 8px 44px 8px 10px;
    transition: background var(--bd-transition);
}

/* 左侧组合：主技能图标 + 辅助技能 chip 列表 */
.bd-skill-row-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* 主技能图标按钮（左侧第一个） */
.bd-skill-row-main-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--bd-border);
    border-radius: var(--bd-radius-sm);
    background: var(--bd-surface);
    cursor: pointer;
    transition: border-color var(--bd-transition),
                background var(--bd-transition);
}

.bd-skill-row-main-icon:hover {
    border-color: var(--bd-accent);
    background: var(--bd-accent-soft);
}

.bd-skill-row-main-icon .bd-row-icon {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 6px;
    background: transparent;
}

/* 注意：技能行的 shell 区域 hover 不再做整块背景填充。
   之前的 background: var(--bd-accent-soft) 会让用户把鼠标移到右侧
   .bd-skill-main 时，整个 shell（包括左侧主技能 + 辅助 chip 一带）
   都被染成 accent 色，视觉上像一个"容器阴影/容器变色"，分散注意力。
   现在 hover 反馈仅由：
     - .bd-row:hover  → 仅 border-color 强化
     - .bd-skill-row-main-icon:hover / .bd-skill-support-gem:hover / .bd-skill-main:hover
       → 各自的本地 hover 状态
   提供，避免整行的"容器变色"效果。 */

/* 右侧：当前选中技能（文本在左、icon 紧贴最右） */
.bd-skill-main {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
    min-height: 48px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: right;
    cursor: pointer;
    transition: color var(--bd-transition);
}

/* 关键：覆盖站点全局 button:hover 给所有 <button> 加的
   `transform: translateY(-1px); box-shadow: 0 8px 18px var(--accent-gold-tint-strong);`
   该全局规则会让 .bd-skill-main hover 时整块右侧选中区上浮 1px + 出现大块金/蓝色发光阴影，
   视觉上像是"容器被点亮"。这里显式 reset 掉，只保留标题文字变色作为 hover 反馈。 */
.bd-skill-main:hover {
    transform: none;
    box-shadow: none;
}

.bd-skill-main:hover .bd-row__title {
    color: var(--bd-accent);
}

.bd-row--skill .bd-row__main {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 0;
}

/* skill 行右侧 icon 固定大小，紧贴右边 */
.bd-skill-main > .bd-row-icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
}

.bd-skill-supports {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    /* 给选中宝石的外环 box-shadow + -2px translateY 留出空间，
       否则会被 overflow-x: auto 在水平/垂直方向裁掉 */
    padding: 8px 10px;
    overflow-x: auto;
    overflow-y: visible;
}

.bd-skill-support-gem {
    position: relative;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--bd-border);
    border-radius: var(--bd-radius-sm);
    background: var(--bd-surface);
    color: inherit;
    cursor: pointer;
    transition: border-color var(--bd-transition),
                background var(--bd-transition),
                box-shadow var(--bd-transition),
                transform 0.08s ease;
}

.bd-skill-support-gem:hover {
    border-color: var(--bd-accent);
    background: var(--bd-accent-soft);
}

/* 选中态：单层 3px 实心外圈 + 微抬升，保证一眼识别但只有一层环 */
.bd-skill-support-gem.is-active {
    border-color: var(--bd-accent);
    background: var(--bd-accent-soft);
    box-shadow: 0 0 0 3px var(--bd-accent);
    transform: translateY(-1px);
    z-index: 2;
}

.bd-skill-support-gem .bd-row-icon {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 6px;
    background: transparent;
}

/* 技能行右侧的展开/折叠按钮：
   命中区扩大成右侧整条（约 40 × 整行高度），
   视觉上仍只显示一个居中的箭头，左侧悬停高亮反馈点击区域 */
.bd-skill-toggle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--bd-text-muted);
    cursor: pointer;
    transition: background var(--bd-transition),
                color var(--bd-transition);
}

.bd-skill-toggle:hover {
    background: var(--bd-accent-soft);
    color: var(--bd-accent);
}

.bd-skill-toggle:focus-visible {
    outline: 2px solid var(--bd-accent);
    outline-offset: -3px;
}

.bd-skill-toggle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translate(-50%, -60%) rotate(-45deg);
    transition: transform var(--bd-transition);
}

.bd-row--skill.is-open .bd-skill-toggle::before {
    transform: translate(-50%, -40%) rotate(45deg);
}


/* =============================================================================
 * 11. 图标基底（.bd-row-icon，所有类型共用）
 * ============================================================================= */

.bd-row-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border: 1px solid var(--bd-border);
    border-radius: var(--bd-radius-sm);
    background: var(--bd-surface-soft);
    color: var(--bd-text);
    font-size: 13px;
    font-weight: 700;
}

.bd-row-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bd-row-icon__sprite {
    display: block;
    flex: 0 0 auto;
    background-repeat: no-repeat;
    transform: scale(var(--sprite-scale, 1));
    transform-origin: center;
}

/* —— 被动天赋图标（圆形 + 暖色描边） —— */
.bd-row-icon--passive {
    border-radius: var(--bd-radius-pill);
    border-color: color-mix(in srgb, var(--accent-orange) 50%, transparent);
    background:
        radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent-yellow) 35%, transparent), transparent 55%),
        var(--bd-surface-strong);
    color: var(--bd-text);
}

.bd-row-icon--passive.bd-row-icon--sprite {
    position: relative;
    overflow: visible;
    border-color: transparent;
    background: transparent;
}

.bd-row-icon--passive span {
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 2px var(--overlay-light);
}

.bd-row-icon--sprite {
    background: var(--bd-surface-strong);
}

.bd-row-icon--passive.bd-row-icon--sprite .bd-row-icon__sprite {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(var(--sprite-scale, 1));
}

.bd-row-icon__sprite--passive-icon,
.bd-row-icon__fallback-text {
    z-index: 1;
}

.bd-row-icon__sprite--passive-icon {
    border-radius: 50%;
    background-clip: padding-box;
}

.bd-row-icon__sprite--passive-frame {
    z-index: 2;
    pointer-events: none;
}

.bd-row-icon--fallback {
    background: var(--bd-surface-strong);
    color: var(--bd-text-soft);
}

.bd-row-icon--jewel-item {
    border-color: color-mix(in srgb, var(--accent-purple) 45%, transparent);
    background:
        radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--accent-purple) 32%, transparent), transparent 50%),
        var(--bd-surface-strong);
}


/* =============================================================================
 * 12. 编辑状态徽章（紧凑图标右上角的「对勾」）
 *     - 对于紧凑图标（辅助宝石、天赋节点等），任何编辑（等级/文本）都显示对勾
 *     - 对于宽行（装备/技能/通用），只在文本被填写时给图标加对勾；
 *       仅填等级的状态由行内文字徽章 .bd-row__edited「已填写」承担
 * ============================================================================= */

/* 容器需要 overflow: visible 才能显示徽章 */
.bd-row.is-text-edited > .bd-row__button > .bd-row-icon,
.bd-passive-entry.is-edited .bd-row-icon,
.bd-passive-entry.is-text-edited .bd-row-icon,
.bd-skill-row-main-icon.is-text-edited,
.bd-skill-row-main-icon.is-text-edited .bd-row-icon,
.bd-skill-support-gem.is-edited .bd-row-icon,
.bd-skill-support-gem.is-text-edited .bd-row-icon {
    position: relative;
    overflow: visible;
}

/* 绿色对勾外圆 */
.bd-row.is-text-edited > .bd-row__button > .bd-row-icon::after,
.bd-passive-entry.is-edited .bd-row-icon::after,
.bd-passive-entry.is-text-edited .bd-row-icon::after,
.bd-skill-row-main-icon.is-text-edited::after,
.bd-skill-support-gem.is-edited .bd-row-icon::after,
.bd-skill-support-gem.is-text-edited .bd-row-icon::after {
    content: "";
    position: absolute;
    top: -3px;
    right: -3px;
    width: 16px;
    height: 16px;
    border-radius: var(--bd-radius-pill);
    background: var(--bd-success);
    box-shadow: 0 0 0 2px var(--bd-surface),
                0 4px 8px color-mix(in srgb, var(--bd-success) 35%, transparent);
    z-index: 2;
}

/* 对勾本身 */
.bd-row.is-text-edited > .bd-row__button > .bd-row-icon::before,
.bd-passive-entry.is-edited .bd-row-icon::before,
.bd-passive-entry.is-text-edited .bd-row-icon::before,
.bd-skill-row-main-icon.is-text-edited::before,
.bd-skill-support-gem.is-edited .bd-row-icon::before,
.bd-skill-support-gem.is-text-edited .bd-row-icon::before {
    content: "";
    position: absolute;
    top: 3px;
    right: 1px;
    width: 7px;
    height: 4px;
    border-left: 2px solid var(--text-inverse);
    border-bottom: 2px solid var(--text-inverse);
    transform: rotate(-45deg);
    z-index: 3;
}


/* =============================================================================
 * 13. 天赋分组（.bd-passive-group）
 *     - 折叠/展开容器；分组色调仅作用在头部图标边框
 * ============================================================================= */

.bd-passive-group {
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid var(--bd-border);
    border-radius: var(--bd-radius-sm);
    background: var(--bd-surface);
    /* 与 .bd-row 共享同一套 Apple 风的"卡片浮起"系统 */
    box-shadow: var(--shadow-xs);
    transition: border-color var(--bd-transition),
                box-shadow var(--bd-transition),
                background var(--bd-transition);
}

.bd-passive-group:hover {
    border-color: var(--bd-border-strong);
    box-shadow: var(--shadow-sm);
}

.bd-passive-group.is-open {
    border-color: var(--bd-border-active);
    box-shadow:
        0 0 0 3px var(--bd-accent-soft),
        var(--shadow-md);
}

.bd-passive-group__head {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 60px;
    padding: 10px 36px 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--bd-border);
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--bd-transition);
}

.bd-passive-group__head:hover {
    background: var(--bd-accent-soft);
}

.bd-passive-group__title {
    color: var(--bd-text);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
    overflow-wrap: anywhere;
}

.bd-passive-group__head strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    border-radius: var(--bd-radius-pill);
    background: var(--bd-surface-strong);
    color: var(--bd-text-soft);
    font-size: 11px;
    font-weight: 700;
}

.bd-passive-group__chevron {
    position: absolute;
    top: 50%;
    right: 14px;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--bd-text-muted);
    border-bottom: 2px solid var(--bd-text-muted);
    transform: translateY(-50%) rotate(45deg);
    transition: transform var(--bd-transition),
                border-color var(--bd-transition);
}

.bd-passive-group__head:hover .bd-passive-group__chevron {
    border-color: var(--bd-accent);
}

.bd-passive-group.is-collapsed .bd-passive-group__chevron {
    transform: translateY(-50%) rotate(-45deg);
}

.bd-passive-group.is-collapsed .bd-passive-group__head {
    border-bottom-color: transparent;
}

.bd-passive-group__entries {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 8px;
    padding: 10px 12px 12px;
}

/* —— 分组色调：只染头部图标边框，不影响主体配色 —— */
.bd-passive-group--core .bd-passive-group__head .bd-row-icon,
.bd-passive-group--keystone .bd-passive-group__head .bd-row-icon {
    border-color: color-mix(in srgb, var(--accent-orange) 55%, transparent);
}

.bd-passive-group--ascendancy .bd-passive-group__head .bd-row-icon,
.bd-passive-group--jewel .bd-passive-group__head .bd-row-icon {
    border-color: color-mix(in srgb, var(--accent-purple) 50%, transparent);
}

.bd-passive-group--attribute .bd-passive-group__head .bd-row-icon,
.bd-passive-group--small .bd-passive-group__head .bd-row-icon {
    border-color: color-mix(in srgb, var(--accent-blue) 50%, transparent);
}

.bd-passive-group--notable .bd-passive-group__head .bd-row-icon {
    border-color: color-mix(in srgb, var(--accent-yellow) 55%, transparent);
}

.bd-passive-group--weapon .bd-passive-group__head .bd-row-icon,
.bd-passive-group--weapon-a .bd-passive-group__head .bd-row-icon,
.bd-passive-group--weapon-b .bd-passive-group__head .bd-row-icon {
    border-color: color-mix(in srgb, var(--brand) 60%, transparent);
}

.bd-passive-group__head .bd-row-icon--passive.bd-row-icon--sprite {
    border-color: transparent;
}


/* =============================================================================
 * 14. 单个天赋点（.bd-passive-entry）
 * ============================================================================= */

.bd-passive-entry {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 6px 9px;
    border: 1px solid var(--bd-border);
    border-radius: var(--bd-radius-sm);
    background: var(--bd-surface-soft);
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--bd-transition),
                background var(--bd-transition);
}

.bd-passive-entry:hover {
    border-color: var(--bd-border-strong);
    background: var(--bd-surface);
}

.bd-passive-entry.is-active {
    border-color: var(--bd-accent);
    background: var(--bd-accent-soft);
    box-shadow: 0 0 0 2px var(--bd-accent-soft);
}

.bd-passive-entry .bd-row-icon {
    width: 40px;
    height: 40px;
}

.bd-passive-entry__text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.bd-passive-entry__name {
    color: var(--bd-text);
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bd-passive-entry__meta {
    color: var(--bd-text-muted);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =============================================================================
 * 15. 预览区（JSON + 计数 chips + 警告）
 * ============================================================================= */

.bd-editor-preview-panel {
    display: grid;
    gap: 12px;
    padding: 16px 18px;
}

.bd-editor-preview-panel__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.bd-editor-preview-panel h3 {
    margin: 0;
    color: var(--bd-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.bd-editor-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.bd-editor-stats span {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 9px;
    border-radius: var(--bd-radius-pill);
    background: var(--bd-surface-soft);
    color: var(--bd-text-soft);
    border: 1px solid var(--bd-border);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.bd-editor-preview {
    max-height: 420px;
    overflow: auto;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--bd-border);
    border-radius: var(--bd-radius-sm);
    background: var(--bd-surface-soft);
    color: var(--bd-text);
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: 11.5px;
    line-height: 1.55;
    white-space: pre;
}

.bd-editor-warning-list {
    display: grid;
    gap: 6px;
}

.bd-editor-warning-list:empty {
    display: none;
}

.bd-editor-warning {
    padding: 8px 12px;
    border: 1px solid var(--bd-warning-border);
    border-radius: var(--bd-radius-sm);
    background: var(--bd-warning-soft);
    color: var(--bd-warning);
    font-size: 12px;
    line-height: 1.4;
}

.bd-editor-empty {
    padding: 10px 6px;
    color: var(--bd-text-muted);
    font-size: 12px;
}


/* =============================================================================
 * 16. 源列点击映射高亮（左列装备/技能 → 右列条目）
 * ============================================================================= */

.compare-col--bd-source [data-bd-kind="item"],
.compare-col--bd-source #skillsList [data-bd-kind="skill"],
.compare-col--bd-source #skillsList [data-bd-kind="support"] {
    cursor: pointer;
    transition: outline-color var(--transition-fast);
}

.compare-col--bd-source [data-bd-kind="item"]:hover,
.compare-col--bd-source #skillsList [data-bd-kind="skill"]:hover,
.compare-col--bd-source #skillsList [data-bd-kind="support"]:hover {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}


/* =============================================================================
 * 17. Toast 浮窗（appendChild 到 body，所以直接走全站 token）
 * ============================================================================= */

.bd-editor-toast {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: var(--z-popover);
    max-width: min(360px, calc(100vw - 48px));
    padding: 11px 14px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.4;
    box-shadow: var(--shadow-lg);
    transform: translateY(10px);
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.bd-editor-toast.is-visible {
    transform: translateY(0);
    opacity: 1;
}

.bd-editor-toast--success {
    border-color: var(--color-success-border);
    background: var(--color-success-bg);
    color: var(--color-success);
}

.bd-editor-toast--warning {
    border-color: var(--color-warning-border);
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.bd-editor-toast--error {
    border-color: var(--color-error-border);
    background: var(--color-error-bg);
    color: var(--color-error);
}

.bd-editor-toast--info {
    border-color: var(--color-info-border);
    background: var(--color-info-bg);
    color: var(--color-info);
}


/* =============================================================================
 * 18. additional_text / description 富文本 markup（所见即所得编辑器）
 *     - .bd-markup-editor：contenteditable 区域，渲染后的样式就是用户看到的样式
 *     - 工具条 .bd-markup-toolbar 放在编辑区下方，分左右两组
 *         · 左侧：B / I / U
 *         · 右侧：颜色 swatch + 自定义颜色 picker
 *     - 颜色之间互斥 / 不嵌套（apply 时由 JS 拆分祖先 / unwrap 内层 color span）
 * ============================================================================= */

.bd-editor-field--md {
    grid-template-rows: auto auto;
}

/* 只读字段（如：进入 BD 编辑时锁定的「职业 / 升华」） */
.bd-editor-field--readonly .bd-editor-readonly-value {
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid var(--bd-border);
    border-radius: var(--bd-radius-sm);
    background: var(--bd-surface-soft);
    color: var(--bd-text);
    font-size: 13px;
    line-height: 1.5;
    cursor: default;
    user-select: text;
}

/* 编辑器 + 工具条共用同一个外壳：单一边框 + 圆角，
   工具条只用一条 1px 顶部分隔线与编辑器分开。 */
/* 文本输入区不再有外层容器/边框/焦点环：
   - 直接贴在面板背景上写字
   - 底部仅靠工具条 .bd-markup-toolbar 的 border-top 作为分隔线
   - 焦点态不再做包裹环，caret 颜色本身就足以表达"激活" */
.bd-markup-editor-shell {
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
}

.bd-markup-editor-shell:focus-within {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

/* 文本输入区改回跟随全站亮 / 暗主题：
   - 用 --bd-surface-soft 作为底色，亮色下是浅灰，暗色下是深灰，
     与同一面板里的 .bd-editor-field input/textarea 等控件保持一致的"输入框观感"；
   - 文本颜色用 --bd-text，markup tag 自带高饱和颜色（red/orange/green/blue/purple…），
     即便在浅底上也清晰可读；
   - 用一层薄边框 + focus 状态加强焦点环，把输入区"框"出来。 */
.bd-markup-editor {
    width: 100%;
    min-height: 96px;
    padding: 10px 12px;
    border: 1px solid var(--bd-border);
    border-radius: var(--bd-radius-sm);
    background: var(--bd-surface-soft);
    color: var(--bd-text);
    caret-color: var(--bd-accent);
    font: inherit;
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    cursor: text;
    transition: border-color var(--bd-transition),
                background var(--bd-transition),
                box-shadow var(--bd-transition);
}

.bd-markup-editor:focus {
    outline: none;
    border-color: var(--bd-accent);
    background: var(--bd-surface);
    box-shadow: 0 0 0 3px var(--bd-accent-soft);
}

/* contenteditable 自身没有 placeholder，用 :empty + ::before 做提示，颜色挂 muted token */
.bd-markup-editor:empty::before {
    content: "可输入文本，选中后用下方工具条添加格式…";
    color: var(--bd-text-muted);
    pointer-events: none;
}

/* 内嵌 markup span：内联 style 已经包含视觉效果，这里仅做 reset 防御 */
.bd-markup-editor span[data-md-tag] {
    background: transparent;
}

.bd-markup-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    /* 编辑区已经有自己的边框 + 圆角，工具条与之断开，靠 margin-top 拉开距离即可。
       不再画 border-top 避免在编辑区 border 下再叠一条相同色的线，看起来像双线。 */
    margin-top: 6px;
    padding: 4px 0 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.bd-markup-toolbar__group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.bd-markup-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--bd-radius-sm);
    background: transparent;
    color: var(--bd-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background var(--bd-transition),
                border-color var(--bd-transition),
                transform 0.08s ease;
}

.bd-markup-btn:hover {
    background: var(--bd-surface-strong);
    border-color: var(--bd-border-strong);
}

.bd-markup-btn:active {
    transform: scale(0.94);
}

.bd-markup-btn:focus-visible {
    outline: 2px solid var(--bd-accent);
    outline-offset: 1px;
}

.bd-markup-btn--bold b      { font-weight: 800; }
.bd-markup-btn--italic i    { font-style: italic; }
.bd-markup-btn--underline u { text-decoration: underline; text-underline-offset: 2px; }

.bd-markup-btn--color {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
}

.bd-markup-btn--color:hover {
    border-color: var(--bd-text);
    background-clip: padding-box;
}

.bd-markup-btn--red    { background: #ec5b5b; }
.bd-markup-btn--orange { background: #f6a040; }
.bd-markup-btn--yellow { background: #f3d24a; }
.bd-markup-btn--green  { background: #3ecf8a; }
.bd-markup-btn--blue   { background: #4ea2ff; }
.bd-markup-btn--purple { background: #b88dff; }

.bd-markup-btn--custom {
    position: relative;
    width: 28px;
    height: 28px;
    overflow: hidden;
    border: 1px solid var(--bd-border);
    background: var(--bd-surface);
}

.bd-markup-btn--custom input[type="color"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* 防止 .bd-editor-field input 的 min-height/padding 把这个隐形 picker 撑大 */
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    opacity: 0;
    cursor: pointer;
}

.bd-markup-btn--custom .bd-markup-btn__label {
    pointer-events: none;
    background: linear-gradient(135deg, #ec5b5b 0%, #f6a040 25%, #3ecf8a 50%, #4ea2ff 75%, #b88dff 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-weight: 800;
}


/* =============================================================================
 * 19. 响应式
 * ============================================================================= */

@media (max-width: 1024px) {
    .bd-row__button {
        grid-template-columns: 50px minmax(0, 1fr) minmax(96px, 0.4fr);
    }

    .bd-skill-row-shell {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .compare-drop-zone--bd-actions {
        grid-template-columns: 1fr;
    }

    .compare-drop-bd-action {
        font-size: 18px;
        min-height: 80px;
    }

    .bd-editor-header {
        padding: 14px 16px;
    }

    .bd-zone {
        padding: 12px 12px 10px;
    }

    .bd-row__button {
        grid-template-columns: 50px minmax(0, 1fr);
        min-height: 60px;
    }

    .bd-row__id {
        grid-column: 2 / 3;
        white-space: normal;
    }

    .bd-row-icon {
        width: 44px;
        height: 44px;
    }

    .bd-row-panel {
        padding: 10px 12px 12px;
    }

    /* tabbed 变体的内边距搬到 __body 上 */
    .bd-row-panel--tabbed {
        padding: 0;
    }

    .bd-row-panel__tab {
        padding: 8px 16px;
    }

    .bd-row-panel__body {
        padding: 10px 12px 12px;
    }

    .bd-row-panel__levels {
        grid-template-columns: 1fr;
    }

    .bd-row--item .bd-row__button,
    .bd-row__button--item {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .bd-row--item .bd-row-icon {
        width: 52px;
        height: 52px;
    }

    .bd-skill-row-shell {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        min-height: 60px;
        padding: 8px 40px 8px 8px;
    }

    .bd-skill-main {
        grid-template-columns: 50px minmax(0, 1fr);
        min-height: 44px;
    }

    .bd-skill-supports {
        flex-wrap: nowrap;
    }

    .bd-skill-row-main-icon {
        width: 38px;
        height: 38px;
    }

    .bd-skill-row-main-icon .bd-row-icon {
        width: 32px;
        height: 32px;
    }

    .bd-passive-group__head {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        padding: 10px 32px 10px 10px;
    }

    .bd-passive-group__entries {
        grid-template-columns: 1fr;
    }

    .bd-editor-preview-panel {
        padding: 14px 16px;
    }

    .bd-editor-preview-panel__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .bd-editor-stats {
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    .bd-row__button {
        grid-template-columns: 44px minmax(0, 1fr);
        padding: 8px 30px 8px 8px;
    }

    .bd-row-icon {
        width: 40px;
        height: 40px;
    }

    .bd-row__title {
        font-size: 13px;
    }

    .bd-editor-toast {
        left: 16px;
        right: 16px;
        bottom: 16px;
        max-width: none;
    }
}


/* =============================================================================
 * 选中态左右联动：钉住浮窗 + BD 文件信息预览面板
 * -----------------------------------------------------------------------------
 *   - .bd-pinned-selected：左列被选中条目（装备/技能 gem/珠宝孔）的高亮描边
 *   - .bd-pinned-shell：钉住面板根容器，position: fixed，永远不进入页面布局
 *       - 默认横向：两张卡左右并排
 *       - .bd-pinned-shell--stacked：剩余空间不够时改为竖向堆叠
 *   - .bd-pinned-card--tooltip：装载左侧原始浮窗 HTML（item / skill / passive）
 *   - .bd-pinned-card--info：装载 BD 文件内容预览，使用深色背景与攻略卡片区分
 * ============================================================================= */

.bd-pinned-selected {
    position: relative;
    z-index: 1;
}

.bd-pinned-selected::after {
    content: "";
    position: absolute;
    inset: -3px;
    z-index: 6;
    border: 2px solid var(--accent-gold, #f6c454);
    border-radius: inherit;
    box-shadow:
        0 0 0 2px color-mix(in srgb, var(--accent-gold, #f6c454) 35%, transparent),
        0 0 18px color-mix(in srgb, var(--accent-gold, #f6c454) 55%, transparent);
    pointer-events: none;
}

/* 默认 inherit 会从 .equip-slot-card / .gem-box / .main-buff-icon 拿圆角；
   兜底给一个圆角，避免那些没有 border-radius 的元素显示成方框 */
.bd-pinned-selected.main-buff-icon::after,
.bd-pinned-selected.buff-img-main::after,
.bd-pinned-selected.buff-img-support::after,
.bd-pinned-selected.gem-box::after {
    border-radius: 12px;
}

.bd-pinned-selected.buff-item::after {
    inset: 5px 10px;
    border-radius: 10px;
}

.bd-pinned-selected.main-buff-icon,
.bd-pinned-selected.buff-img-main,
.bd-pinned-selected.buff-img-support {
    overflow: visible;
}

.bd-pinned-shell {
    position: fixed;
    z-index: 3100; /* hover-record-tooltip 在 3000；钉住面板要盖在它之上 */
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 10px;
    padding: 0;
    pointer-events: auto;
    max-width: min(720px, calc(100vw - 24px));
    max-height: min(90vh, 760px);
}

/* class 选择器的 display:flex 会盖掉浏览器对 [hidden] 默认的 display:none，
   因此必须再补一条同等级的规则，让 hidden 属性真的能隐藏钉住面板 */
.bd-pinned-shell[hidden] {
    display: none !important;
}

.bd-pinned-shell--stacked {
    flex-direction: column;
    /* 给天赋树浮窗 / 技能浮窗多留点宽度：
       - 天赋树 .poe2-passivePopup min-width 263px
       - 技能 .skill-popup 默认 width 480px（在 BD 编辑器里我们把它压回 100%，
         为了排版不挤再给壳子留到 460px） */
    max-width: min(460px, calc(100vw - 24px));
}

.bd-pinned-card {
    flex: 0 0 auto;
    width: 320px;
    max-height: min(86vh, 720px);
    border-radius: 10px;
    overflow: auto;
    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.28),
        0 4px 12px rgba(15, 23, 42, 0.18);
}

.bd-pinned-shell--stacked .bd-pinned-card {
    width: 100%;
    /* 默认（BD 信息卡）保留 42vh；tooltip 卡单独放更高的上限 */
    max-height: 42vh;
}

/* 技能 / 天赋树浮窗本身高度可能动辄半屏（keystone 描述 + flavour 文本，
   或主技能 + 多个辅助），如果跟 BD 信息卡平分高度会被裁掉一大半 ——
   把 tooltip 卡的高度上限单独拉高，留下相对小的空间给 BD 信息卡兜底 */
.bd-pinned-shell--stacked .bd-pinned-card--tooltip {
    max-height: min(60vh, 600px);
}

.bd-pinned-shell--stacked .bd-pinned-card--info {
    max-height: min(32vh, 320px);
}

/* tooltip 卡：让里面嵌入的 .hover-record-tooltip__card / .record-popup
   保持自己的尺寸表现，所以这里只做 wrapper（透明，不画自己的背景）。
   border-radius 必须清掉：天赋树浮窗 .poe2-passivePopup 顶部用 ::before/::after
   贴边画装饰头图，外层带圆角 + overflow:auto 会把头图左右两端剪掉一截，
   表现就是「天赋树固定浮窗样式失效」 */
.bd-pinned-card--tooltip {
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}

.bd-pinned-card--tooltip > .hover-record-tooltip__card,
.bd-pinned-card--tooltip > .equip-message-tips,
.bd-pinned-card--tooltip > .record-popup,
.bd-pinned-card--tooltip > .skill-popup {
    width: 100%;
    max-width: none;
}

/* .skill-popup 内层 .skill-popup-inner 默认 width:100%，整体走流式布局即可；
   skill-popup 自身写死 width: 480px 不再生效，被外层 100% 拉宽到卡片宽度 */

/* 复用 iframe 内 fast-viewer 的天赋点 hover 浮窗 HTML 时，外层会带 .fast-tree-tooltip，
   但那条规则是为 iframe 内悬浮在画布上准备的：position: fixed + pointer-events: none，
   塞进钉住面板里会导致整张卡片"贴在视口左上角且无法滚动"。这里把它压回普通流。 */
.bd-pinned-tree-tooltip {
    position: static;
    pointer-events: auto;
    transform: none;
    max-width: none;
}

.bd-pinned-tree-tooltip .poe2-passivePopup {
    max-width: none;
}

/* iframe 内 formatRichText / socketedJewelHtml 用到的辅助文字样式
   —— 父窗口未加载 fast-viewer.css，这里给它们补上最小可用规则即可。
   只在钉住面板内的天赋树浮窗里生效，避免污染全局 */
.bd-pinned-tree-tooltip .fast-tree-term {
    text-decoration-line: underline;
    text-decoration-style: dashed;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.bd-pinned-tree-tooltip .fast-tree-jewel-item {
    text-align: center;
}

.bd-pinned-tree-tooltip .fast-tree-jewel-title {
    color: #d7bb7c;
}

.bd-pinned-tree-tooltip .fast-tree-jewel-base,
.bd-pinned-tree-tooltip .fast-tree-jewel-rarity {
    color: #c8c8c8;
}

.bd-pinned-tree-tooltip .fast-tree-jewel-implicit {
    color: #9aa8ff;
}

.bd-pinned-tree-tooltip .fast-tree-jewel-special {
    color: #b8a1ff;
}

.bd-pinned-card__placeholder {
    padding: 14px 16px;
    border: 1px dashed var(--border-light, rgba(148, 163, 184, 0.45));
    border-radius: 10px;
    background: var(--bg-elevated, #ffffff);
    color: var(--text-secondary, #475569);
    font-size: 12px;
    line-height: 1.45;
}

.bd-pinned-card__hint {
    color: var(--text-tertiary, #94a3b8);
    font-style: italic;
}

.bd-pinned-card__markup {
    white-space: pre-wrap;
}

/* BD 信息卡：用户规约 = 单纯的黑色背景；亮色主题下也维持黑色以跟左侧浮窗形成强对比。
   内容完全等同最终生成 BD 文件里 additional_text 字段（合并后的 markup 串）
   + level_interval 收尾行，不做任何 "tab/容器" 切分 */
.bd-pinned-card--info {
    background: #000;
    color: rgba(241, 245, 249, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.22);
    padding: 12px 14px 14px;
    font-size: 12.5px;
    line-height: 1.55;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bd-pinned-info__game-title {
    width: 100%;
    margin: -2px 0 2px;
    padding: 9px 12px;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.96);
    color: rgba(255, 236, 188, 0.98);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    letter-spacing: 0.2px;
}

.bd-pinned-info__text {
    color: rgba(241, 245, 249, 0.96);
    font-size: 12.5px;
    line-height: 1.6;
    word-break: break-word;
    white-space: pre-wrap;
}

.bd-pinned-info__level {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(165, 180, 252, 0.18);
    color: rgba(224, 231, 255, 0.96);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.bd-pinned-info__empty {
    color: rgba(148, 163, 184, 0.82);
    font-size: 12px;
    font-style: italic;
    line-height: 1.5;
}

/* ---------------------------------------------------------------------------
 * 跟随鼠标的 BD 信息浮窗（仅 BD 模式 + 未选中态显示）
 *   - 位于原生 #hoverTooltip 旁边，配合实际浮窗一起跟随鼠标移动
 *   - 选中态由 body.bd-editor-has-selection 整体强制 display:none，
 *     钉住面板接管显示
 * ------------------------------------------------------------------------- */
.bd-hover-info {
    position: fixed;
    z-index: 3050; /* 高于 hover-record-tooltip 的 3000，低于钉住面板的 3100 */
    pointer-events: none;
    width: 320px;
    max-width: min(360px, calc(100vw - 24px));
    max-height: min(70vh, 520px);
    overflow: auto;
    border-radius: 10px;
    background: #000;
    color: rgba(241, 245, 249, 0.96);
    border: 1px solid rgba(148, 163, 184, 0.22);
    padding: 12px 14px 14px;
    font-size: 12.5px;
    line-height: 1.55;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.55),
        0 4px 12px rgba(0, 0, 0, 0.35);
}

.bd-hover-info[hidden] {
    display: none;
}

/* 钉住选中态下：
 *   - 隐藏原生 #hoverTooltip（用户已经能在钉住面板里看到选中条目的完整信息，
 *     再 hover 其他条目不希望弹出第二份浮窗）
 *   - 隐藏跟随鼠标的 BD 信息浮窗（同上）
 * 用 display:none + !important 兜底，因为站点的 hover 系统会设置 hidden=false。 */
body.bd-editor-has-selection #hoverTooltip,
body.bd-editor-has-selection #hoverTooltipSync,
body.bd-editor-has-selection #bdHoverInfo {
    display: none !important;
}

@media (max-width: 900px) {
    .bd-pinned-shell {
        max-width: calc(100vw - 16px);
    }

    .bd-pinned-card {
        width: 280px;
    }

    .bd-pinned-shell--stacked .bd-pinned-card {
        max-height: 38vh;
    }

    .bd-pinned-shell--stacked .bd-pinned-card--tooltip {
        max-height: 56vh;
    }

    .bd-pinned-shell--stacked .bd-pinned-card--info {
        max-height: 28vh;
    }

    .bd-hover-info {
        width: 280px;
    }
}