/**
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * POE2 做装分享图片 - 样式文件（完全重构版）
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 * 
 * 📐 布局结构：
 * ┌────────────────────────┬────────────────────────────────────┐
 * │                        │  【第1行】装备图片 | 初始装备信息   │
 * │   【左侧】             ├────────────────────────────────────┤
 * │   操作步骤列表          │  【第2行】← 箭头 | 消耗材料 | 箭头 →│
 * │   （垂直居中排列）      ├────────────────────────────────────┤
 * │                        │  【第3行】装备图片 | 最终装备信息   │
 * └────────────────────────┴────────────────────────────────────┘
 * 
 * 🎯 定位系统：
 * - 每个模块使用绝对定位（position: absolute）
 * - 所有位置使用百分比（相对于1920×1080画布）
 * - 左侧步骤列表垂直居中（top: 50% + translateY(-50%)）
 * - 通过修改 :root 中的变量即可调整每个模块的位置
 * 
 * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🎨 全局配置变量（修改这里即可调整所有元素位置和尺寸）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
:root {
    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       🌓 主题颜色变量（亮色模式默认）
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    --theme-bg-primary: #1a1a1a;
    --theme-bg-secondary: rgba(255, 255, 255, 0.05);
    --theme-bg-tertiary: rgba(0, 0, 0, 0.3);
    --theme-text-primary: #fff;
    --theme-text-secondary: #999;
    --theme-border: rgba(255, 255, 255, 0.1);
    --theme-hover-bg: rgba(255, 255, 255, 0.02);
    
    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       1️⃣ 画布基础尺寸（应与背景图一致）
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    --share-card-width: 1920px;
    --share-card-height: 1080px;
    
    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       2️⃣ 左侧步骤列表位置控制（垂直居中布局）
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    --steps-left: 7%;                /* 📍 距离左边距离 */
    --steps-width: 38%;              /* 📏 步骤列表宽度 */
    --steps-vertical-offset: 8%;     /* ⬆️⬇️ 在垂直居中基础上的偏移（正值=向下，负值=向上）*/
    --steps-max-height: 70%;         /* 📏 最大高度（超出可滚动）*/
    
    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       3️⃣ 右侧区域整体配置（3行区域居中布局）
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    --right-area-left: 49%;          /* 📍 右侧区域距离左边 */
    --right-area-width: 50%;         /* 📏 右侧区域总宽度 */
    
    --row1-height: 42.5%;            /* 📏 第1行区域高度（初始装备）*/
    --row2-height: 15%;              /* 📏 第2行区域高度（消耗材料）*/
    --row3-height: 42.5%;            /* 📏 第3行区域高度（最终装备）*/
    
    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       4️⃣ 第1行（初始装备）- 区域内居中 + 偏移
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    /* 初始装备图片 */
    --initial-image-offset-x: -23%;  /* ➡️ 水平偏移（基于区域中心，正=右，负=左）*/
    --initial-image-offset-y: 0%;    /* ⬇️ 垂直偏移（基于区域中心，正=下，负=上）*/
    
    /* 初始装备信息 */
    --initial-info-offset-x: 16%;    /* ➡️ 水平偏移 */
    --initial-info-offset-y: 25%;     /* ⬇️ 垂直偏移 */
    --initial-info-width: 55%;       /* 📏 信息区域宽度 */
    
    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       5️⃣ 第2行（消耗材料+箭头）- 材料居中，箭头跟随材料
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    /* 材料区域 */
    --materials-offset-x: 0%;        /* ➡️ 水平偏移（基于区域中心）*/
    --materials-offset-y: 33%;        /* ⬇️ 垂直偏移 */
    --materials-max-width: 100%;      /* 📏 材料区域最大宽度 */
    
    /* 箭头间距（紧贴材料） */
    --arrow-left-gap: 11px;          /* ↔️ 左箭头距离材料的间距 */
    --arrow-right-gap: 1px;         /* ↔️ 右箭头距离材料的间距 */
    
    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       6️⃣ 第3行（最终装备）- 区域内居中 + 偏移
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    /* 最终装备图片 */
    --final-image-offset-x: -23%;    /* ➡️ 水平偏移（基于区域中心）*/
    --final-image-offset-y: 0%;      /* ⬇️ 垂直偏移 */
    
    /* 最终装备信息 */
    --final-info-offset-x: 16%;      /* ➡️ 水平偏移 */
    --final-info-offset-y: -12%;       /* ⬇️ 垂直偏移 */
    --final-info-width: 55%;         /* 📏 信息区域宽度 */
    
    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       6️⃣ 字体设置
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    --share-font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
    
    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       7️⃣ 字体大小（相对画布宽度）
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    --font-step-number: calc(var(--share-card-width) * 0.008);      /* 步骤编号 */
    --font-step-desc: calc(var(--share-card-width) * 0.008);        /* 步骤描述 */
    --font-change-item: calc(var(--share-card-width) * 0.007);      /* 词缀变化 */
    --font-change-prob: calc(var(--share-card-width) * 0.006);      /* 概率信息 */
    --font-item-name: calc(var(--share-card-width) * 0.016);        /* 装备名称 */
    --font-item-level: calc(var(--share-card-width) * 0.0075);      /* 物品等级 */
    --font-affix: calc(var(--share-card-width) * 0.0075);           /* 词缀文本 */
    --font-affix-tier: calc(var(--share-card-width) * 0.006);       /* T阶 */
    
    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       8️⃣ 图片/图标尺寸（独立控制每个元素）
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    
    /* 🖼️ 初始装备图片（独立控制） */
    --initial-image-size: calc(var(--share-card-width) * 0.11);     /* 📏 图片大小 */
    --initial-image-offset-x: -24%;    /* ➡️ 在图片区内的水平偏移（正=右移，负=左移）*/
    --initial-image-offset-y: 28%;    /* ⬇️ 在图片区内的垂直偏移（正=下移，负=上移）*/
    
    /* 🖼️ 最终装备图片（独立控制） */
    --final-image-size: calc(var(--share-card-width) * 0.11);       /* 📏 图片大小 */
    --final-image-offset-x: -24%;      /* ➡️ 在图片区内的水平偏移（正=右移，负=左移）*/
    --final-image-offset-y: -11%;      /* ⬇️ 在图片区内的垂直偏移（正=下移，负=上移）*/
    
    /* ⬅️ 左箭头（独立控制） */
    --arrow-left-size: calc(var(--share-card-width) * 0.05);   /* 📏 箭头宽度（3% = 57.6px）*/
    
    /* ➡️ 右箭头（独立控制） */
    --arrow-right-size: calc(var(--share-card-width) * 0.05);  /* 📏 箭头宽度（3% = 57.6px）*/
    
    /* 🪙 其他图标 */
    --material-icon-size: calc(var(--share-card-width) * 0.02);     /* 材料图标 */
    --step-header-icon-size: calc(var(--share-card-width) * 0.013); /* 步骤小图标 */
    
    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       9️⃣ 间距控制
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    --step-spacing: calc(var(--share-card-height) * 0.015);         /* 📏 步骤之间的间距（可自由调整）*/
    --step-padding: calc(var(--share-card-width) * 0.002);          /* 步骤内边距 */
    --material-gap: calc(var(--share-card-height) * 0.0036);        /* 材料之间间距 */
    
    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       🔟 网站文本位置控制
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    --website-text-left: 50%;               /* 📍 左右位置（默认居中）*/
    --website-text-top: 91.2%;                /* 📍 上下位置（默认居中）*/
    --website-text-size: calc(var(--share-card-width) * 0.007);  /* 📏 文字大小 */
    
    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       1️⃣1️⃣ 自定义文本位置控制
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    --custom-text-left: 50%;                /* 📍 左右位置（默认居中）*/
    --custom-text-top: 88.8%;                 /* 📍 上下位置（默认偏下）*/
    --custom-text-size: calc(var(--share-card-width) * 0.008); /* 📏 文字大小（稍大一些）*/
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🌞 亮色主题（Light Mode）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-theme="light"] {
    --theme-bg-primary: #f5f5f5;
    --theme-bg-secondary: rgba(0, 0, 0, 0.05);
    --theme-bg-tertiary: rgba(255, 255, 255, 0.8);
    --theme-text-primary: #333;
    --theme-text-secondary: #666;
    --theme-border: rgba(0, 0, 0, 0.1);
    --theme-hover-bg: rgba(0, 0, 0, 0.05);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📦 第一部分：图片显示区域（会导出到PNG）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ========================================
   页面容器（网页预览用）
   ======================================== */
#share-image-page {
    display: flex;
    flex-direction: column;
    padding: 20px;
    background: var(--theme-bg-primary);  /* ✅ 使用主题背景色 */
    min-height: 100%;
    width: 100%;
}

.share-page-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px 20px;
    background: var(--theme-bg-secondary);  /* ✅ 使用主题次要背景色 */
    border-radius: 8px;
}

.share-page-header h2 {
    margin: 0;
    color: var(--theme-text-primary);  /* ✅ 使用主题主要文字颜色 */
    font-size: 24px;
}

/* 导出按钮容器（位于图片和编辑控件之间） */
.export-button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px 0 20px 0;
    padding: 20px 0 10px 0;
}

/* 背景图片切换按钮容器 */
.background-switch-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 0 0 30px 0;
    padding: 10px 0 20px 0;
    flex-wrap: wrap;
}

.bg-switch-btn {
    width: 120px;
    height: 80px;
    padding: 0;
    border: 3px solid transparent;
    border-radius: 8px;
    background: var(--theme-bg-tertiary);
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s;
    position: relative;
}

.bg-switch-btn img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bg-switch-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
    border-color: rgba(0, 122, 255, 0.5);
}

.bg-switch-btn.active {
    border-color: #007AFF;
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.2);
}

.bg-switch-btn.active::after {
    content: '✓';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    background: #007AFF;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

.share-action-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.share-action-btn.primary {
    background: linear-gradient(135deg, #007AFF, #0051D5);
    color: white;
}

.share-action-btn.primary:hover {
    background: linear-gradient(135deg, #0051D5, #003BA5);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

.share-action-btn.secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.share-action-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

#share-card-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 0;
    overflow: visible;  /* ✅ 允许查看整个卡片 */
    width: 100%;
    margin-bottom: -216px;  /* ✅ 补偿缩放后的垂直空间（1080×0.8=864，差值216px）*/
}

.share-card-placeholder {
    text-align: center;
    padding: 60px 20px;
    color: var(--theme-text-secondary);  /* ✅ 使用主题次要文字颜色 */
    font-size: 16px;
}

/* ========================================
   主画布容器（1920×1080）
   ======================================== */
#share-card-content.share-card {
    /* 固定尺寸 */
    width: var(--share-card-width);
    height: var(--share-card-height);
    min-width: var(--share-card-width);
    min-height: var(--share-card-height);
    max-width: var(--share-card-width);
    max-height: var(--share-card-height);
    flex-shrink: 0;
    
    /* ✅ 缩放显示，但不影响导出时的分辨率（导出函数会临时移除transform）*/
    transform: scale(0.82);
    transform-origin: top center;
    
    /* 背景图片（默认为1.avif） */
    background-image: url('photo/1.avif');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent !important;
    
    /* 定位容器 */
    position: relative;
    overflow: hidden;  /* ✅ 隐藏超出1920×1080的内容，避免横向滚动 */
    
    /* 字体 */
    font-family: var(--share-font-family) !important;
    
    /* 覆盖share-card.css的样式 */
    display: block !important;
    flex-direction: initial !important;
    padding: 0 !important;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

#share-card-content.share-card:hover {
    transform: scale(0.82);  /* ✅ 保持与正常状态相同的缩放 */
    box-shadow: none;
    border: none;
}
    
    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📍 左侧：操作步骤列表（垂直居中布局）
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.share-operations-section {
    /* 绝对定位 + 垂直居中 */
    position: absolute;
    left: var(--steps-left);
    width: var(--steps-width);
    max-height: var(--steps-max-height);
    
    /* ✅ 垂直居中：先定位到50%，再用transform偏移自身高度的50% */
    top: 50%;
    transform: translateY(calc(-50% + var(--steps-vertical-offset)));
    
    /* 内容样式 */
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;  /* ✅ 禁用横向滚动 */
    
    /* 清除旧样式 */
    background: transparent;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

/* 单个步骤项 */
.operation-item {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: var(--step-padding);
    padding-bottom: var(--step-spacing);  /* ✅ 使用可调整的步骤间距变量 */
    margin-bottom: 0;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: calc(var(--share-card-width) * 0.005);
    position: relative;
    width: 100%;  /* ✅ 强制宽度为父容器的100% */
    box-sizing: border-box;  /* ✅ 包含padding在宽度内 */
}

/* 步骤之间不显示分隔线 */
.operation-item::after {
    display: none;
}

.operation-item:hover:not(.simplified) {
    background: rgba(255, 255, 255, 0.02);
}

/* 隐藏状态 */
.operation-item.simplified {
    opacity: 0.4;
}

.operation-item.simplified .operation-changes {
    display: none;
}

.operation-item.simplified .operation-currency-icons {
    display: none;
}

/* 步骤内容区 */
.operation-content {
    display: flex;
    flex-direction: column;
    gap: calc(var(--share-card-height) * 0.0057);
    flex: 1;
    min-width: 0;  /* ✅ 允许flex子元素正确收缩 */
    overflow: hidden;  /* ✅ 防止内容溢出 */
}

/* 步骤头部（步骤编号 + 描述 + 小图标） */
.operation-header {
    display: flex;
    align-items: center;
    gap: calc(var(--share-card-width) * 0.004);
    max-width: 100%;  /* ✅ 限制最大宽度为父容器宽度 */
    overflow: hidden;  /* ✅ 防止溢出 */
}

.operation-number {
    color: #afafaf;
    font-weight: 600;
    font-size: var(--font-step-number);
    flex-shrink: 0;
}

.operation-desc {
    color: #afafaf;
    font-size: var(--font-step-desc);
    font-weight: 600;
    flex-shrink: 1;  /* ✅ 允许收缩 */
    overflow: hidden;  /* ✅ 防止溢出 */
    text-overflow: ellipsis;  /* ✅ 超长显示省略号 */
    white-space: nowrap;  /* ✅ 单行显示 */
}

.operation-header-icons {
    display: flex;
    align-items: center;
    gap: calc(var(--share-card-width) * 0.002);
    margin-left: calc(var(--share-card-width) * 0.003);
}

.operation-header-icon {
    width: var(--step-header-icon-size);
    height: var(--step-header-icon-size);
    flex-shrink: 0;
}

.operation-header-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 词缀变化详情 */
.operation-changes {
    display: flex;
    flex-direction: column;
    gap: calc(var(--share-card-height) * 0.0038);
    margin-left: calc(var(--share-card-width) * 0.005);
}

.change-item {
    display: flex;
    align-items: center;
    gap: calc(var(--share-card-width) * 0.003);
    font-size: var(--font-change-item);
    font-weight: 700;
    line-height: 1.4;
}

.change-label {
    font-weight: 600;
    flex-shrink: 0;
}

.change-label.remove {
    color: #680808;
    font-weight: 700;
}

.change-label.add {
    color: #026618;
    font-weight: 700;
}

.change-label.lock {
    color: #f59e0b;
    font-weight: 700;
}

.change-affix {
    color: #afafaf;
    font-weight: 700;
}

.change-prob {
    color: #afafaf;
    font-size: var(--font-change-prob);
    font-weight: 550;
    font-style: normal;
    flex-shrink: 0;
}

/* 自定义备注 */
.custom-note-display {
    color: #afafaf;
    font-size: calc(var(--share-card-width) * 0.0055);
    padding: calc(var(--share-card-height) * 0.0038) calc(var(--share-card-width) * 0.002);
    background: transparent;
    font-weight: 550;
    border-left: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: calc(var(--share-card-width) * 0.001);
    margin-top: calc(var(--share-card-height) * 0.0015);
}

.operation-item.simplified .custom-note-display {
    display: flex;
    opacity: 1;
}

.operation-item.more {
    color: #afafaf;
    text-align: center;
    font-style: italic;
}

/* 通货图标（右侧，已隐藏，改为头部小图标） */
.operation-currency-icons {
    display: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📍 右侧区域容器（3行区域）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.right-area-container {
    position: absolute;
    left: var(--right-area-left);
    top: 0;
    width: var(--right-area-width);
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📍 第1行区域（初始装备，42.5%高度）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.row1-container {
    height: var(--row1-height);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: visible;  /* ✅ 允许内容溢出 */
}

/* 初始装备图片 */
.initial-equipment-image {
    position: absolute;
    left: calc(50% + var(--initial-image-offset-x));  /* ✅ 修复：直接计算最终位置 */
    top: calc(50% + var(--initial-image-offset-y));
    transform: translate(-50%, -50%);  /* ✅ 然后居中元素本身 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 初始装备信息 */
.initial-equipment-info {
    position: absolute;
    left: calc(50% + var(--initial-info-offset-x));  /* ✅ 修复：直接计算最终位置 */
    top: calc(50% + var(--initial-info-offset-y));
    transform: translate(-50%, -50%);  /* ✅ 然后居中元素本身 */
    width: var(--initial-info-width);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible;  /* ✅ 允许内容溢出 */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📍 第2行区域（消耗材料+箭头，15%高度）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.row2-container {
    height: var(--row2-height);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: visible;  /* ✅ 允许内容溢出 */
}

/* 材料区域包裹层（用于整体偏移和包含箭头） */
.materials-center-container {
    position: relative;
    max-width: var(--materials-max-width);
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translate(var(--materials-offset-x), var(--materials-offset-y));
}

/* 左箭头（使用flex order + margin） */
.arrow-left-container {
    order: 1;  /* ✅ 第一个显示 */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
    margin-right: var(--arrow-left-gap);  /* ✅ 控制与材料的间距 */
}

/* 材料列表（使用flex order，确保居中，单行显示） */
.materials-list {
    order: 2;  /* ✅ 第二个显示，在两个箭头中间 */
    display: flex;
    flex-wrap: nowrap;  /* ✅ 不换行，只显示一行 */
    justify-content: center;  /* ✅ 材料图标居中排列 */
    align-items: center;
    gap: calc(var(--share-card-width) * 0.005);
    overflow: hidden;  /* ✅ 隐藏超出部分 */
}

/* 右箭头（使用flex order + margin） */
.arrow-right-container {
    order: 3;  /* ✅ 第三个显示 */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    white-space: nowrap;
    margin-left: var(--arrow-right-gap);  /* ✅ 控制与材料的间距 */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📍 第3行区域（最终装备，42.5%高度）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.row3-container {
    height: var(--row3-height);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: visible;  /* ✅ 允许内容溢出 */
}

/* 最终装备图片 */
.final-equipment-image {
    position: absolute;
    left: calc(50% + var(--final-image-offset-x));  /* ✅ 修复：直接计算最终位置 */
    top: calc(50% + var(--final-image-offset-y));
    transform: translate(-50%, -50%);  /* ✅ 然后居中元素本身 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 最终装备信息 */
.final-equipment-info {
    position: absolute;
    left: calc(50% + var(--final-info-offset-x));  /* ✅ 修复：直接计算最终位置 */
    top: calc(50% + var(--final-info-offset-y));
    transform: translate(-50%, -50%);  /* ✅ 然后居中元素本身 */
    width: var(--final-info-width);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: visible;  /* ✅ 允许内容溢出 */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🎨 装备图片通用样式
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.state-item-image {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(50, 50, 50, 0.3);
    border-radius: 4px;
}

/* 🖼️ 初始装备图片（独立控制） */
.initial-equipment-image .state-item-image {
    width: var(--initial-image-size);
    height: var(--initial-image-size);
}

/* 🖼️ 最终装备图片（独立控制） */
.final-equipment-image .state-item-image {
    width: var(--final-image-size);
    height: var(--final-image-size);
}

.state-item-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.state-item-name {
    font-size: var(--font-item-name);
    font-weight: 600;
    text-align: center;
    margin-bottom: calc(var(--share-card-height) * 0.005);
    word-break: break-word;
}

.state-item-name.rarity-normal {
    color: #e0e0e0;
}

.state-item-name.rarity-magic {
    color: #4fc3f7;
}

.state-item-name.rarity-rare {
    color: #ffeb3b;
}

.state-item-level {
    font-size: var(--font-item-level);
    color: #999;
    font-weight: 550;
    text-align: center;
    margin-bottom: calc(var(--share-card-height) * 0.0105);
}

/* 词缀列表 */
.state-affixes {
    width: 100%;
    font-size: var(--font-affix);
    font-weight: 550;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-right: calc(var(--share-card-width) * 0.01);
}

.state-empty {
    color: #666;
    text-align: center;
    padding: calc(var(--share-card-height) * 0.0095);
}

.affix-item {
    display: flex;
    align-items: center;  /* ✅ 改为居中对齐，让T阶和描述垂直居中 */
    gap: calc(var(--share-card-width) * 0.0025);
    padding: calc(var(--share-card-height) * 0.0029) calc(var(--share-card-width) * 0.0025);
    margin: calc(var(--share-card-height) * 0.0019) 0;
    border-radius: 3px;
}

.affix-tier {
    color: #999;
    font-size: var(--font-affix-tier);
    font-weight: 550;
    flex-shrink: 0;
    width: calc(var(--share-card-width) * 0.01);
    display: flex;
    align-items: center;  /* ✅ 确保T阶文字垂直居中 */
    justify-content: center;
}

/* T阶颜色 */
.affix-item.prefix .affix-tier {
    color: #ff4444;
}

.affix-item.suffix .affix-tier {
    color: #87CEEB;
}

.affix-item.corrupted .affix-tier {
    color: #ff9800;
}

.affix-desc {
    color: #8888ff;
    flex: 1;
    word-break: break-word;
    text-align: center;
}

/* 深渊词缀 */
.affix-item.abyss .affix-desc {
    color: #4CAF50 !important;
}

/* 破裂词缀 */
.affix-item.ruptured .affix-desc {
    color: #ff9800 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🎨 材料行样式（第2行）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 箭头图片通用样式 */
.arrow-image {
    max-width: none;
    height: auto;
    object-fit: contain;
    display: block;  /* ✅ 确保图片显示 */
}

/* ⬅️ 左箭头（独立控制） */
.arrow-left-container {
    /* 已在上面定义位置，这里添加调试样式 */
}

.arrow-left-container .arrow-image {
    width: var(--arrow-left-size);
    min-width: 10px;  /* ✅ 最小宽度，确保可见 */
}

/* ➡️ 右箭头（独立控制） */
.arrow-right-container {
    /* 已在上面定义位置，这里添加调试样式 */
}

.arrow-right-container .arrow-image {
    width: var(--arrow-right-size);
    min-width: 10px;  /* ✅ 最小宽度，确保可见 */
}

/* 材料中间区域 */
.materials-center {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.materials-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: calc(var(--share-card-width) * 0.002);
}

.materials-empty {
    color: #666;
    font-size: calc(var(--share-card-width) * 0.008);
}

/* 单个材料项（纵向排列：图标、×、数量） */
.material-item {
    display: flex;
    flex-direction: column;  /* ✅ 改为纵向排列 */
    align-items: center;
    justify-content: center;
    gap: calc(var(--share-card-width) * 0.001);  /* ✅ 减小间距，因为是纵向 */
}

.material-icon {
    width: var(--material-icon-size);
    height: var(--material-icon-size);
    object-fit: contain;
    flex-shrink: 0;
}

.material-multiply {
    color: #ccc;
    font-size: calc(var(--share-card-width) * 0.01);
    font-weight: bold;
    margin: 0 calc(var(--share-card-width) * 0.001);
}

.material-count {
    color: #c0c0c0;
    font-size: calc(var(--share-card-width) * 0.01);
    font-weight: bold;
}

.material-text {
    font-size: calc(var(--share-card-width) * 0.01);
    color: #fff;
}

.material-item.more {
    color: #999;
    font-size: calc(var(--share-card-width) * 0.0045);
    margin-top: calc(var(--share-card-height) * 0.0018);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   🔧 旧版兼容（用于JS中引用的类）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* JS会创建但不使用的容器（隐藏） */
.share-equipment-area {
    display: none !important;
}

/* 水印 */
.share-watermark {
    position: absolute;
    bottom: 10px;
    right: 20px;
    color: rgba(255, 255, 255, 0.3);
    font-size: 12px;
    font-weight: 500;
}

/* 网站文本（可调整位置） */
.share-website-text {
    position: absolute;
    left: var(--website-text-left);
    top: var(--website-text-top);
    transform: translate(-50%, -50%);  /* 居中对齐 */
    font-size: var(--website-text-size);
    font-weight: 700;
    color: rgba(126, 0, 0, 0.9);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    pointer-events: none;  /* 不阻挡鼠标事件 */
    user-select: none;
    z-index: 1000;
    white-space: nowrap;
}

/* 自定义文本（用户输入，可调整位置） */
.share-custom-text {
    position: absolute;
    left: var(--custom-text-left);
    top: var(--custom-text-top);
    transform: translate(-50%, -50%);  /* 居中对齐 */
    font-size: var(--custom-text-size);
    font-weight: 600;
    color: rgba(126, 0, 0, 0.9);  /* ✅ 暗红色 */
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6);
    pointer-events: none;  /* 不阻挡鼠标事件 */
    user-select: none;
    z-index: 1001;  /* 显示在网站文本之上 */
    white-space: nowrap;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   📦 第二部分：步骤编辑器（不在导出图片中）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.steps-edit-controls {
    margin-top: 20px;
    padding: 20px;
    background: var(--theme-bg-secondary);  /* ✅ 使用主题背景色 */
    border-radius: 8px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.edit-controls-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--theme-border);  /* ✅ 使用主题边框色 */
}

.edit-controls-header h3 {
    margin: 0;
    color: var(--theme-text-primary);  /* ✅ 使用主题文字颜色 */
    font-size: 18px;
}

.btn-close-edit {
    padding: 6px 12px;
    background: var(--theme-bg-tertiary);  /* ✅ 使用主题背景色 */
    color: var(--theme-text-primary);  /* ✅ 使用主题文字颜色 */
    border: 1px solid var(--theme-border);  /* ✅ 使用主题边框色 */
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.btn-close-edit:hover {
    background: var(--theme-hover-bg);  /* ✅ 使用主题悬停背景色 */
}

/* 位置控制组容器 */
.position-controls-group {
    background: var(--theme-bg-tertiary);  /* ✅ 使用主题第三背景色 */
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 15px;
}

/* 步骤间距控制器 */
.spacing-control {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    margin-bottom: 8px;
}

.spacing-control:last-child {
    margin-bottom: 0;
}

.spacing-control label {
    color: var(--theme-text-primary);  /* ✅ 使用主题文字颜色 */
    font-size: 14px;
    font-weight: 500;
    min-width: 80px;
}

.spacing-control input[type="range"] {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.spacing-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: #007AFF;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
}

.spacing-control input[type="range"]::-webkit-slider-thumb:hover {
    background: #0051D5;
    transform: scale(1.2);
}

.spacing-control input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #007AFF;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.spacing-control input[type="range"]::-moz-range-thumb:hover {
    background: #0051D5;
    transform: scale(1.2);
}

.spacing-control span {
    color: #007AFF;
    font-size: 14px;
    font-weight: bold;
    min-width: 30px;
    text-align: right;
}

/* 步骤修改标题（样式与位置修改保持一致） */
.steps-modification-header {
    margin-top: 20px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--theme-border);  /* ✅ 与位置修改样式一致 */
}

.steps-modification-header h4 {
    margin: 0;
    color: var(--theme-text-primary);
    font-size: 18px;  /* ✅ 与位置修改标题大小一致 */
    font-weight: 400;  /* ✅ 与位置修改标题粗细一致 */
}

/* 自定义文本输入容器（位于导出按钮下方） */
.custom-text-input-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 10px 0 20px 0;
    padding: 15px 20px;
    background: var(--theme-bg-secondary);
    border-radius: 8px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.custom-text-input-container label {
    color: var(--theme-text-primary);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.custom-text-input-field {
    padding: 8px 14px;
    background: var(--theme-bg-tertiary);
    border: 1px solid var(--theme-border);
    border-radius: 6px;
    color: var(--theme-text-primary);
    font-size: 14px;
    outline: none;
    width: 350px;
    transition: all 0.2s;
}

.custom-text-input-field:focus {
    border-color: #007AFF;
    background: var(--theme-hover-bg);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

.custom-text-input-field::placeholder {
    color: var(--theme-text-secondary);
    font-size: 13px;
}

.custom-text-counter {
    color: var(--theme-text-secondary);
    font-size: 13px;
    min-width: 45px;
    font-weight: 500;
}

/* 可编辑步骤列表 */
.editable-steps-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 600px;  /* ✅ 增大高度从400px到600px */
    overflow-y: auto;
}

.editable-step-item {
    background: var(--theme-bg-tertiary);  /* ✅ 使用主题背景色 */
    border-radius: 6px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s;
    user-select: none;
}

.editable-step-item:hover {
    background: var(--theme-hover-bg);  /* ✅ 使用主题悬停背景色 */
    transform: translateY(-1px);
}

.editable-step-item.hidden {
    opacity: 0.5;
}

.step-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.step-visibility-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.step-main-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.step-number {
    color: #f5a623;
    font-weight: 600;
    font-size: 13px;
}

.step-action-text {
    color: var(--theme-text-primary);  /* ✅ 使用主题文字颜色 */
    font-size: 13px;
}

.step-details {
    margin-left: 28px;
    color: var(--theme-text-secondary);  /* ✅ 使用主题次要文字颜色 */
    font-size: 11px;
    line-height: 1.5;
}

.step-detail-line {
    padding: 2px 0;
}

.custom-note-section {
    margin-top: 8px;
    margin-left: 28px;
}

.custom-note-input {
    width: 100%;
    padding: 6px 10px;
    background: var(--theme-bg-tertiary);  /* ✅ 使用主题背景色 */
    border: 1px solid var(--theme-border);  /* ✅ 使用主题边框色 */
    border-radius: 4px;
    color: var(--theme-text-primary);  /* ✅ 使用主题文字颜色 */
    font-size: 12px;
    outline: none;
}

.custom-note-input:focus {
    background: var(--theme-hover-bg);  /* ✅ 使用主题悬停背景色 */
    border-color: #007AFF;
}

.custom-note-input::placeholder {
    color: var(--theme-text-secondary);  /* ✅ 使用主题次要文字颜色 */
}

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

.share-operations-section::-webkit-scrollbar,
.equipment-info::-webkit-scrollbar,
.editable-steps-list::-webkit-scrollbar {
    width: 6px;
}

.share-operations-section::-webkit-scrollbar-track,
.equipment-info::-webkit-scrollbar-track,
.editable-steps-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.share-operations-section::-webkit-scrollbar-thumb,
.equipment-info::-webkit-scrollbar-thumb,
.editable-steps-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.share-operations-section::-webkit-scrollbar-thumb:hover,
.equipment-info::-webkit-scrollbar-thumb:hover,
.editable-steps-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}