/**
 * ============================================
 * 装备预览图专用主题配置
 * ============================================
 *
 * 本文件集中管理所有装备预览相关的CSS变量
 * 修改这些变量即可快速调整装备预览的视觉效果
 *
 * 使用方法：
 * 1. 直接修改下方 :root 中的变量值
 * 2. 保存文件后刷新页面即可看到效果
 *
 * 变量命名规范：
 * - 所有变量以 --preview- 开头，表示装备预览专用
 * - -bg: 背景色
 * - -text: 文字颜色
 * - -border: 边框
 * - -shadow: 阴影
 * - -size: 尺寸
 * - -font: 字体相关
 * - -margin: 外边距
 * - -padding: 内边距
 * - -inc: 增益值
 * - -stat: 统计属性
 */

:root {
  /* ==================== 容器背景颜色 ==================== */

  /* 预览区域（zone-preview）的整体背景色 */
  --preview-zone-bg: var(--card-bg);

  /* 装备主边框背景渐变（深蓝风格，从上到下） */
  --preview-main-bg-start: rgba(55, 61, 66, 0.98); /* 渐变起点：深灰蓝色 */
  --preview-main-bg-end: rgba(49, 56, 66, 0.9); /* 渐变终点：稍透明 */

  /* 装备主体内部背景渐变（白色半透明，营造层次感） */
  --preview-body-bg-start: rgba(255, 255, 255, 0.02); /* 渐变起点：极淡白色 */
  --preview-body-bg-end: rgba(255, 255, 255, 0.004); /* 渐变终点：几乎透明 */

  /* ==================== 边框和圆角 ==================== */

  /* 预览容器的圆角大小 */
  --preview-border-radius: 10px; /* 主容器圆角 */
  --preview-border-radius-sm: 6px; /* 小圆角（用于滚动条等） */

  /* 边框颜色（淡蓝色，低透明度） */
  --preview-border-color: rgba(180, 210, 230, 0.06);

  /* ==================== 阴影效果 ==================== */

  /* 主容器的多层阴影效果（营造立体感和深度） */
  --preview-shadow-main:
    0 16px 40px rgba(0, 0, 0, 0.72), /* 主阴影：深色大范围 */ 0 0 26px rgba(6, 18, 48, 0.1),
    /* 次阴影：蓝色调光晕 */ inset 0 1px 0 rgba(255, 255, 255, 0.02),
    /* 内阴影顶部：高光 */ inset 0 -20px 46px rgba(2, 8, 28, 0.66); /* 内阴影底部：深邃感 */

  /* ==================== 文字颜色 ==================== */

  /* 主要文字颜色 */
  --preview-text-primary: #ffffff; /* 主标题文字 */
  --preview-text-secondary: #ffffff; /* 次要文字（属性名称） */
  --preview-text-tertiary: #ffffff; /* 三级文字（元数据） */
  --preview-text-value: #ffffff; /* 数值文字（白色高亮） */

  /* 统计属性相关颜色 */
  --preview-stat-name: #ffffff; /* 属性名称（如"STR"） */
  --preview-stat-value: #ffffff; /* 属性数值 */
  --preview-stat-inc: #ffffff; /* 增益值默认色（绿色） */

  /* 各种增益值的颜色 */
  --preview-inc-flame: #0ae3ad; /* 火花增益：天蓝色 */
  --preview-inc-sf: #ffd700; /* 星力增益：金黄色 */
  --preview-inc-scroll: #66ff66; /* 卷轴增益：青绿色 */
  --preview-inc-pot: #ffd700; /* 潜能增益：黄色 */

  /* 副标题颜色 */
  --preview-sub-description: #ff8a18; /* 暖橙色（如职业需求描述） */

  /* ==================== 字体样式 ==================== */

  /* 字体大小 - 使用固定像素值以保持一致性 */
  --preview-font-size-base: 12px; /* 基础字号 - 增大字体 */
  --preview-font-size-sm: 11px; /* 小号字号 */
  --preview-font-size-xs: 10px; /* 极小字号 */

  /* 字体粗细 */
  --preview-font-weight-normal: 400; /* 常规 */
  --preview-font-weight-medium: 500; /* 中等 */
  --preview-font-weight-bold: 600; /* 粗体 */
  --preview-font-weight-heavy: 700; /* 超粗体（用于数值） */

  /* 行高 - 使用固定像素值以保持一致性 */
  --preview-line-height: 10px; /* 行高 10px，字体 12px，负行间距 */
  --preview-line-height-normal: 12px; /* 常规行高 */

  /* ==================== 装备图标样式 ==================== */

  /* 图标容器尺寸（包含图标的容器框大小） */
  --preview-icon-container-width: 82px; /* 容器宽度 */
  --preview-icon-container-height: 82px; /* 容器高度 */

  /* 装备图标本身的尺寸 */
  --preview-icon-size: 64px; /* 标准图标尺寸 */
  --preview-icon-size-lg: 72px; /* 大图标尺寸 */
  --preview-icon-size-sm: 56px; /* 小图标尺寸 */

  /* 图标容器的位置偏移 */
  --preview-icon-container-left: 0px; /* 左侧偏移 */
  --preview-icon-container-top: 0px; /* 顶部偏移 */

  /* ==================== 间距和边距 ==================== */

  /* 预览区域的内边距 */
  --preview-padding: var(--spacing-5); /* 常规内边距 (20px) */
  --preview-padding-sm: var(--spacing-4); /* 小内边距 (16px) */

  /* 属性行之间的间距 */
  --preview-stat-gap: 8px; /* 属性名和值之间的间距 */
  --preview-stat-padding: 2px; /* 属性行的内边距 */

  /* 标题的下边距 */
  --preview-title-margin-bottom: 8px; /* 标题下方留白 */

  /* 分隔线的边距 */
  --preview-divider-margin-top: 12px; /* 分隔线上方边距 */
  --preview-divider-margin-bottom: 6px; /* 分隔线下方边距 */
  --preview-divider-margin: 8px 0; /* 分隔线上下边距（简写） */

  /* 增益值图标的左边距 */
  --preview-inc-margin-left: 6px; /* 增益值图标与文字的间距 */

  /* ==================== 滚动条样式 ==================== */

  /* 滚动条的尺寸 */
  --preview-scrollbar-width: 8px; /* 垂直滚动条宽度 */
  --preview-scrollbar-height: 8px; /* 水平滚动条高度 */

  /* 滚动条颜色 */
  --preview-scrollbar-track-bg: #f1f5f9; /* 轨道背景色（浅灰蓝） */
  --preview-scrollbar-thumb-bg: #cbd5e1; /* 滑块颜色（中灰蓝） */
  --preview-scrollbar-thumb-hover: #94a3b8; /* 滑块悬停色（深灰蓝） */

  /* 滚动条圆角 */
  --preview-scrollbar-radius: 4px; /* 滑块圆角 */

  /* 滚动条过渡动画 */
  --preview-scrollbar-transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* ==================== 分隔线样式 ==================== */

  /* 分隔线的高度和边框 */
  --preview-divider-height: 2px; /* 分隔线高度 */
  --preview-divider-border: 1px solid rgba(180, 210, 230, 0.06); /* 边框样式 */
  --preview-divider-shadow: 0 0 10px rgba(255, 255, 255, 0.1); /* 发光效果 */

  /* ==================== Z-index 层级 ==================== */

  --preview-z-index-container: 0; /* 容器层级 */
  --preview-z-index-gloss: 0; /* 光泽层层级 */
  --preview-z-icon: 2; /* 图标层级 */
  --preview-z-index-divider: 5; /* 分隔线层级 */

  /* ==================== 过渡动画 ==================== */

  --preview-transition-base: var(--transition-base); /* 基础过渡动画 */

  /* ==================== 模糊效果 ==================== */

  --preview-blur: 6px; /* 背景模糊程度（用于毛玻璃效果） */

  /* ==================== Reboot 头部标签样式 ==================== */

  /* Combat Power Increase 文字样式 */
  --preview-header-cpi-color: #85919f; /* CPI文字颜色 */
  --preview-header-cpi-font-size: 11px; /* CPI字号 */
  --preview-header-cpi-font-weight: 400; /* CPI字重 */
  --preview-header-cpi-margin: 2px 1px 8px 2px; /* CPI外边距（上 右 下 左） */
  --preview-header-cpi-padding: 2px 2px 0px 20px; /* CPI内边距（上 右 下 左） */

  /* Currently Equipped 文字样式 */
  --preview-header-equipped-color: #a8b4bf; /* 装备文字颜色 */
  --preview-header-equipped-font-size: 14px; /* 装备字号 */
  --preview-header-equipped-font-weight: 700; /* 装备字重（粗体） */
  --preview-header-equipped-letter-spacing: 0.2px; /* 装备字间距 */
  --preview-header-equipped-margin: 12px 0px 0px 12px; /* 装备外边距（上 右 下 左） */
  --preview-header-equipped-padding: 2px 12px 0px 0px; /* 装备内边距（上 右 下 左） */

  /* 标签容器位置 */
  --preview-header-tags-top: 55px; /* 标签容器距离顶部位置 */
  --preview-header-tags-margin-top: 6px; /* 标签容器上边距 */

  /* 标签样式（Accessory/Ring等） */
  --preview-tag-padding: 2px 8px; /* 标签内边距 */
  --preview-tag-margin: 6px; /* 标签外边距 */
  --preview-tag-font-size: 11px; /* 标签字号 */
  --preview-tag-font-weight: 500; /* 标签字重 */
  --preview-tag-color: #b7bfc5; /* 标签文字颜色 */
  --preview-tag-bg: #47525c; /* 标签背景色 */
  --preview-tag-border-radius: 10px; /* 标签圆角 */

  /* ==================== Reboot 底部标签位置 ==================== */

  /* item-main-bottom 容器位置 */

  --preview-bottom-width: 100%; /* 容器宽度 */
  --preview-bottom-height: auto; /* 容器高度 */

  /* item-container 容器位置（装备图标容器，作为定位参考点） */
  --preview-icon-container-position: relative; /* 设为相对定位，作为标签的参考点 */

  /* reboot-header-right 容器位置（包含所有标签的容器） */

  --preview-header-right-position: absolute; /* 定位方式：绝对定位 */
  --preview-header-right-bottom: 0px; /* 距离底部的距离（负值表示在图标下方） */
  --preview-header-right-right: 0px; /* 距离右侧的距离 */
  --preview-header-right-width: auto; /* 容器宽度（自适应） */
}

/* ===== 深色主题变量（可选，预留扩展） ===== */
/*
@media (prefers-color-scheme: dark) {
  :root {
    --preview-text-primary: #e9eef2;
    --preview-text-secondary: #CFCFCF;
  }
}
*/

/* ============================================
 * Reboot 头部标签样式规则
 * ============================================
 * 以下规则使用上方定义的CSS变量
 * 修改变量值即可快速调整样式
 */

/* Combat Power Increase（战斗力提升） */
.builder-preview .item-main-border .reboot-header-cpi {
  color: var(--preview-header-cpi-color);
  font-size: var(--preview-header-cpi-font-size);
  font-weight: var(--preview-header-cpi-font-weight);
  margin: var(--preview-header-cpi-margin);
  padding: var(--preview-header-cpi-padding);
}

/* Currently Equipped（当前已装备） */
.builder-preview .item-main-border .reboot-header-equipped {
  margin: var(--preview-header-equipped-margin);
  color: var(--preview-header-equipped-color);
  font-size: var(--preview-header-equipped-font-size);
  font-weight: var(--preview-header-equipped-font-weight);
  letter-spacing: var(--preview-header-equipped-letter-spacing);
  padding: var(--preview-header-equipped-padding);
}

/* 标签容器 */
.builder-preview .item-main-border .reboot-header-tags {
  position: absolute;
  top: var(--preview-header-tags-top);
  margin-top: var(--preview-header-tags-margin-top);
}

/* 标签（Accessory/Ring等） */
.builder-preview .item-main-border .reboot-tag {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: var(--preview-tag-padding);
  margin: var(--preview-tag-margin);
  font-size: var(--preview-tag-font-size);
  font-weight: var(--preview-tag-font-weight);
  color: var(--preview-tag-color);
  background: var(--preview-tag-bg);
  border-radius: var(--preview-tag-border-radius);
}

/* ===== 强制覆盖 server-reboot-has-header 的样式 ===== */
/* 确保带 server-reboot-has-header 类的元素也使用相同的变量 */
.builder-preview .item-main-border.server-reboot-has-header .reboot-header-equipped {
  margin-top: var(--preview-header-equipped-margin-top);
  color: var(--preview-header-equipped-color);
  font-size: var(--preview-header-equipped-font-size);
  font-weight: var(--preview-header-equipped-font-weight);
  letter-spacing: var(--preview-header-equipped-letter-spacing);
}

.builder-preview .item-main-border.server-reboot-has-header .reboot-header-tags {
  position: absolute;
  top: var(--preview-header-tags-top);
  margin-top: var(--preview-header-tags-margin-top);
}

.builder-preview .item-main-border.server-reboot-has-header .reboot-tag {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: var(--preview-tag-padding);
  margin-left: var(--preview-tag-margin-left);
  font-size: var(--preview-tag-font-size);
  font-weight: var(--preview-tag-font-weight);
  color: var(--preview-tag-color);
  background: var(--preview-tag-bg);
  border-radius: var(--preview-tag-border-radius);
}

/* ============================================
 * Reboot 底部标签容器位置
 * ============================================
 * 控制 item-main-bottom 和 reboot-header-right 的位置
 * 标签容器现在相对于 item-container（装备图标容器）定位
 */

/* 装备图标容器 - 设为相对定位作为标签的参考点 */
.builder-preview .item-main-border .item-container {
  position: var(--preview-icon-container-position);
}

/* 底部容器 */
.builder-preview .item-main-border .item-main-bottom {
  position: var(--preview-bottom-position);
  width: var(--preview-bottom-width);
  height: var(--preview-bottom-height);
}

/* 右侧标签容器（包含所有标签） - 相对于 item-container 底部定位 */
.builder-preview .item-main-border .reboot-header-right {
  display: block;
  position: var(--preview-header-right-position);
  right: var(--preview-header-right-right);
  bottom: var(--preview-header-right-bottom);
  width: var(--preview-header-right-width);
  text-align: right;
}

/* 确保在有 header 时也应用相同的样式 */
.builder-preview .item-main-border.server-reboot-has-header .item-container {
  position: var(--preview-icon-container-position);
}

.builder-preview .item-main-border.server-reboot-has-header .item-main-header .reboot-header-right {
  display: block;
  position: var(--preview-header-right-position);
  right: var(--preview-header-right-right);
  bottom: var(--preview-header-right-bottom);
  width: var(--preview-header-right-width);
  text-align: right;
}

/* ============================================
 * 装备图标和状态信息容器（左右并排）
 * ============================================ */

/* 图标和状态信息容器 */
.builder-preview .item-main-border .item-icon-status-container {
  display: flex; /* 启用Flexbox */
  justify-content: space-between; /* 左右两端对齐 */
  align-items: flex-start; /* 顶部对齐 */
  gap: 12px; /* 左右间距 */
  margin-top: 6px;
  margin-bottom: 6px;
}

/* 左侧：装备图标容器 */
.builder-preview .item-main-border .item-icon-status-container .item-pic-container {
  flex: 0 0 auto; /* 不伸缩，根据内容宽度 */
  position: relative;
  width: 82px; /* 固定宽度 */
  height: 82px; /* 固定高度 */
}

/* 右侧：装备状态信息 */
.builder-preview .item-main-border .item-status-right {
  flex: 1 1 auto; /* 占据剩余空间 */
  display: flex;
  flex-direction: column; /* 垂直排列 */
  align-items: flex-end; /* 右对齐 */
  text-align: right;
}

/* 需求信息（独立显示在下方） */
.builder-preview .item-main-border .item-requirements {
  margin-top: 6px;
  margin-left: 0px;
  text-align: left;
  font-size: 0.9em;
  line-height: 1.1em;
  color: var(--preview-text-tertiary);
  margin-bottom: 20px;
}

.builder-preview .item-main-border .item-requirements .item-profession {
  color: #b5bdc3; /* 固定的灰色 */
  font-weight: var(--preview-font-weight-medium);
  margin-bottom: 2px;
}

.builder-preview .item-main-border .item-requirements .item-profession-value {
  color: var(--preview-stat-value);
  font-weight: var(--preview-font-weight-normal);
}

.builder-preview .item-main-border .item-requirements .item-level {
  color: #ffffff; /* 固定的灰色 */
  font-weight: var(--preview-font-weight-medium);
}

.builder-preview .item-main-border .item-requirements .item-level-value {
  color: var(--preview-stat-value);
  font-weight: var(--preview-font-weight-normal);
}

/* Combat Power Increase 样式 */
.builder-preview .item-main-border .item-status-right .reboot-header-cpi {
  color: var(--preview-header-cpi-color);
  font-size: var(--preview-header-cpi-font-size);
  font-weight: var(--preview-header-cpi-font-weight);
  margin: 0;
  padding: 0;
}

/* Currently Equipped 样式 */
.builder-preview .item-main-border .item-status-right .reboot-header-equipped {
  margin: 4px 0 0 0;
  color: var(--preview-header-equipped-color);
  font-size: var(--preview-header-equipped-font-size);
  font-weight: var(--preview-header-equipped-font-weight);
  letter-spacing: var(--preview-header-equipped-letter-spacing);
  padding: 0;
}

/* 标签容器 */
.builder-preview .item-main-border .item-status-right .reboot-tags {
  display: flex;
  flex-direction: column; /* 垂直排列 */
  align-items: flex-end; /* 右对齐 */
  margin-top: 4px;
}

/* 标签样式 */
.builder-preview .item-main-border .item-status-right .reboot-tag {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: var(--preview-tag-padding);
  margin-top: 6px; /* 顶部间距6px */
  margin-left: 0; /* 移除左侧间距 */
  margin-right: 0;
  margin-bottom: 0;
  font-size: var(--preview-tag-font-size);
  font-weight: var(--preview-tag-font-weight);
  color: var(--preview-tag-color);
  background: var(--preview-tag-bg);
  border-radius: var(--preview-tag-border-radius);
}

/* 第一个标签不添加顶部间距 */
.builder-preview .item-main-border .item-status-right .reboot-tag:first-child {
  margin-top: 0;
}

/* ============================================
 * 潜能属性样式（从 tooltip_gms.css 迁移）
 * ============================================ */

/* 潜能容器 字体楷体*/
.builder-preview .item-main-border .potential-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  margin: 4px 0 6px 0;
  font-family: "KaiTi", "楷体", "Times New Roman", serif;
}

/* 潜能等级图标 */
.builder-preview .item-main-border .potential-rank-icon {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  font-weight: 700;
  font-size: 10px;
  line-height: 12px;
  text-align: center;
  color: #2d343d;
  font-family:
    Arial,
    Helvetica,
    "Microsoft YaHei",
    "微软雅黑",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-style: normal;
  flex-shrink: 0;
}

/* 潜能等级文字
*/
.builder-preview .item-main-border .potential-rank-text {
  font-weight: 700;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* 潜能属性行 */
.builder-preview .item-main-border .potential-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 2px 0;
}

/* 潜能属性图标（bullet点） */
.builder-preview .item-main-border .potential-bullet {
  width: 6px;
  height: 6px;

  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
  flex: 0 0 auto;
}

/* 潜能属性文字 */
.builder-preview .item-main-border .potential-text {
  flex: 1 1 auto;
}

/* ============================================
 * 潜能等级颜色
 * ============================================ */

/* Legendary（传说）等级颜色 */
.builder-preview .item-main-border .potential-legendary .potential-rank-icon {
  background-color: #a0ff60;
}

.builder-preview .item-main-border .potential-legendary .potential-rank-text,
.builder-preview .item-main-border .potential-legendary .reboot-pot-tier {
  color: #a0ff60;
}

.builder-preview .item-main-border .potential-legendary .potential-bullet {
  background-color: #a0ff60;
}

.builder-preview .item-main-border .potential-legendary .potential-line {
  color: #ffffff;
}

/* Epic（史诗）等级颜色 */
.builder-preview .item-main-border .potential-epic .potential-rank-icon {
  background-color: #c8a2c8;
}

.builder-preview .item-main-border .potential-epic .potential-rank-text,
.builder-preview .item-main-border .potential-epic .reboot-pot-tier {
  color: #c8a2c8;
}

.builder-preview .item-main-border .potential-epic .potential-bullet {
  background-color: #c8a2c8;
}

.builder-preview .item-main-border .potential-epic .potential-line {
  color: #ffffff;
}

/* Unique（独特）等级颜色 */
.builder-preview .item-main-border .potential-unique .potential-rank-icon {
  background-color: #ffd700;
}

.builder-preview .item-main-border .potential-unique .potential-rank-text,
.builder-preview .item-main-border .potential-unique .reboot-pot-tier {
  color: #ffd700;
}

.builder-preview .item-main-border .potential-unique .potential-bullet {
  background-color: #ffd700;
}

.builder-preview .item-main-border .potential-unique .potential-line {
  color: #ffffff;
}

/* Rare（稀有）等级颜色 */
.builder-preview .item-main-border .potential-rare .potential-rank-icon {
  background-color: #6495ed;
}

.builder-preview .item-main-border .potential-rare .potential-rank-text,
.builder-preview .item-main-border .potential-rare .reboot-pot-tier {
  color: #6495ed;
}

.builder-preview .item-main-border .potential-rare .potential-bullet {
  background-color: #6495ed;
}

.builder-preview .item-main-border .potential-rare .potential-line {
  color: #ffffff;
}