/* ==============================================================
 * DNF 75 装备模拟器 —— 样式表
 * ============================================================== */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; }
body {
  background:#1a1612;
  color:#d8d4c8;
  font-family:"PingFang SC","微软雅黑","Microsoft YaHei",SimSun,sans-serif;
  font-size:12px;
  min-height:100vh;
  padding:12px 0;
}
input,select,button { font-family:inherit; color:inherit; }

.app{
  width:1280px;
  max-width:100%;
  margin:0 auto;
  background:linear-gradient(#2a251e,#1e1a14);
  border:2px solid #000;
  box-shadow:0 0 20px rgba(0,0,0,0.8),inset 0 0 40px rgba(0,0,0,0.5);
  padding:14px;
}

/* ============ 顶部 ============ */
.title-bar{
  background:linear-gradient(#5a4a28,#2a2214);
  border:1px solid #000;
  padding:8px 16px;
  color:#f1d78b;
  font-size:16px;
  font-weight:bold;
  text-align:center;
  letter-spacing:4px;
  text-shadow:2px 2px 0 #000;
  margin-bottom:10px;
}
.character-bar{
  background:#26221a;
  border:1px solid #000;
  padding:8px 12px;
  margin-bottom:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  align-items:center;
  box-shadow:inset 0 0 10px rgba(0,0,0,0.6);
}
.character-bar label{ color:#a89e82; display:flex; align-items:center; gap:6px; }
.character-bar select,
.character-bar input{
  background:#1a1610;
  border:1px solid #4a3e24;
  color:#f1d78b;
  padding:4px 8px;
  outline:none;
  min-width:80px;
}
.character-bar input[type=checkbox]{ min-width:0; width:14px; height:14px; accent-color:#c9a84a; }
.character-bar label{ white-space:nowrap; }
.character-bar select:focus,
.character-bar input:focus{ border-color:#c9a84a; }
.char-info{ margin-left:auto; color:#8a7e60; font-size:11px; }
.job-base-info{ color:#a89e82; font-size:12px; white-space:nowrap; }
.job-base-info span{ color:#f1d78b; font-weight:bold; }
.char-info b{ color:#f1c97a; }

/* ============ 属性微调栏 ============ */
.adjust-bar{
  background:#1e1b14;
  border:1px solid #000;
  padding:6px 12px;
  margin-bottom:12px;
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  align-items:center;
  box-shadow:inset 0 0 8px rgba(0,0,0,0.5);
}
.adjust-bar .adjust-title{ color:#c9a84a; font-size:12px; font-weight:bold; margin-right:8px; }
.adjust-bar label{ color:#a89e82; display:flex; align-items:center; gap:6px; font-size:12px; white-space:nowrap; }
.adjust-bar input{
  background:#1a1610;
  border:1px solid #4a3e24;
  color:#f1d78b;
  padding:3px 6px;
  outline:none;
  font-size:12px;
}
.adjust-bar input:focus{ border-color:#c9a84a; }

/* ============ Tab 切换栏 ============ */
.tab-bar{
  display:flex;
  gap:4px;
  margin-bottom:10px;
  border-bottom:2px solid #4a3e24;
}
.tab-btn{
  flex:0 0 auto;
  padding:8px 22px;
  background:linear-gradient(#3a3224,#26221a);
  border:1px solid #000;
  border-bottom:none;
  color:#a89e82;
  font-weight:bold;
  letter-spacing:2px;
  font-size:13px;
  cursor:pointer;
  user-select:none;
  transition:all .15s;
  border-radius:4px 4px 0 0;
  margin-bottom:-2px;
}
.tab-btn:hover{ color:#f1d78b; background:linear-gradient(#4a3e24,#3a3224); }
.tab-btn.active{
  background:linear-gradient(#5a4a28,#2a2214);
  color:#f1d78b;
  border-bottom:2px solid #c9a84a;
  text-shadow:1px 1px 0 #000;
}
.tab-pane{ display:none; }
.tab-pane.active{ display:block; }

/* ============ 装备细节：槽位上的迷你徽章（+强化/+增幅） ============ */
.slot .detail-badges{
  position:absolute;
  top:2px; left:3px;
  display:flex;
  flex-direction:column;
  gap:2px;
  z-index:2;
  pointer-events:none;
}
.slot .detail-badges .db-enh{
  background:rgba(239,68,68,0.9);
  color:#fff;
  font-size:10px;
  padding:0 4px;
  border:1px solid #000;
  border-radius:2px;
  font-weight:bold;
  letter-spacing:0;
  text-shadow:1px 1px 0 #000;
}
.slot .detail-badges .db-amp{
  background:rgba(255,140,58,0.9);
  color:#fff;
  font-size:10px;
  padding:0 4px;
  border:1px solid #000;
  border-radius:2px;
  font-weight:bold;
  letter-spacing:0;
  text-shadow:1px 1px 0 #000;
}
.slot .detail-badges .db-enc,
.slot .detail-badges .db-bdg{
  font-size:9px;
  padding:0 3px;
  border:1px solid #000;
  border-radius:2px;
  background:rgba(127,209,127,0.9);
  color:#fff;
  letter-spacing:0;
}
.slot .detail-badges .db-bdg{ background:rgba(127,138,255,0.9); }
.slot .detail-badges .db-seal{
  font-size:9px;
  padding:0 3px;
  border:1px solid #000;
  border-radius:2px;
  background:rgba(193,74,223,0.9);
  color:#fff;
  letter-spacing:0;
  font-weight:bold;
}

/* ============ 装备详情配置弹窗内的区块 ============ */
.detail-section{
  background:#1e1a14;
  border:1px solid #3a3226;
  padding:8px 12px;
  margin-bottom:8px;
}
.detail-section .ds-title{
  color:#f1c97a;
  font-weight:bold;
  font-size:12px;
  letter-spacing:1px;
  margin-bottom:6px;
  padding-bottom:3px;
  border-bottom:1px dashed #4a3e24;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.detail-section .ds-body{
  display:flex;
  flex-wrap:wrap;
  gap:8px 12px;
  align-items:center;
  font-size:12px;
  color:#a89e82;
}
.detail-section .ds-body label{ display:flex; align-items:center; gap:4px; white-space:nowrap; }
.detail-section .ds-body select{
  background:#1a1610;
  border:1px solid #4a3e24;
  color:#f1d78b;
  padding:4px 8px;
  font-size:12px;
  outline:none;
  min-width:90px;
}
.detail-section .ds-body select:focus{ border-color:#c9a84a; }
.detail-section .ds-hint{ color:#8a7e60; font-size:11px; }
.detail-head-info{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px 4px 12px;
  color:#a89e82;
  font-size:12px;
}
.detail-head-info .dh-icon{
  width:42px; height:42px;
  background-color:#1a1610;
  background-repeat:no-repeat;
  background-position:center;
  background-size:85% 85%;
  border:2px solid #c9a84a;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#f1d78b;
  font-size:10px;
  text-align:center;
}
.detail-head-info .dh-name{ color:#ff8c3a; font-weight:bold; font-size:14px; }
.detail-head-info .dh-name.set{ color:#c14adf; }
.detail-head-info .dh-tip{ color:#8a7e60; font-size:11px; }

/* ============ 徽记 / 宠物槽（Tab 1 装备穿戴页面）============
 * 结构与 Tab 2 完全对齐：每个徽记/宠物本身就是一个标准 .slot 装备槽
 * （class 上额外带 .slot-insignia 标记），外框、图标方格、has-value 金色
 * 高亮等视觉均通过已有的 .slot 规则控制，不再另写 72px|1fr grid。
 * 交互：<select> 绝对定位铺满右侧 info 区域，保留原生下拉 —— 只在视觉上
 * 等价于"点击槽位即可选择"，但下拉效率高于弹窗。 */
.slot.slot-insignia{
  position:relative;                      /* 让内部 select 绝对定位有参考 */
}
.slot.slot-insignia .info{
  position:relative;                      /* select 相对 .info 铺满 */
  padding:6px 10px;
}
.slot.slot-insignia .info > .insignia-select{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  padding:6px 10px;
  background:transparent;
  border:none;
  color:transparent;                      /* 文字由下面 .eq-name 展示，这里透明 */
  font-size:0;                            /* 避免原生 select 文字与 .eq-name 重叠 */
  outline:none;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  z-index:2;                              /* 盖在 .eq-name/.eq-grade 之上以接收点击 */
}
/* 下拉展开的 option 列表仍需正常可读 */
.slot.slot-insignia .info > .insignia-select option{
  color:#f1d78b;
  background:#1a1610;
  font-size:12px;
  font-weight:normal;
  text-shadow:none;
}
/* .eq-name / .eq-grade 在 select 下方，保持可见但不拦截点击 */
.slot.slot-insignia .info > .eq-name,
.slot.slot-insignia .info > .eq-grade{
  position:relative;
  z-index:1;
  pointer-events:none;
}
/* focus-within（原生 select 聚焦时）也触发金色高亮，点击反馈更清晰 */
.slot.slot-insignia:focus-within{ border-color:#c9a84a; }
.slot.slot-insignia.has-value:focus-within{ border-color:#f1c97a; }

/* ============ 套装快速穿戴栏 ============ */
.set-quick-bar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  background:linear-gradient(#2a2214,#1a1610);
  border:1px solid #3a3020;
  border-bottom:none;
  flex-wrap:wrap;
}
.set-quick-label{
  color:#f1d78b;
  font-size:13px;
  font-weight:bold;
  white-space:nowrap;
}
.set-quick-bar select{
  background:#1a1610;
  color:#e8d9b0;
  border:1px solid #5a4e30;
  padding:4px 8px;
  font-size:12px;
  border-radius:3px;
  cursor:pointer;
}
.set-quick-bar select:focus{ border-color:#c9a84a; outline:none; }
.set-quick-btn{
  padding:4px 14px !important;
  font-size:12px !important;
  min-width:auto !important;
  background:linear-gradient(#5a4e30,#3a3020) !important;
  border:1px solid #c9a84a !important;
  color:#f1d78b !important;
  cursor:pointer;
  border-radius:3px;
  transition:background .15s;
}
.set-quick-btn:hover{
  background:linear-gradient(#6a5e40,#4a4030) !important;
}

/* ============ 主体 ============
 * PC 端 .main 使用 5 列 grid：防具(auto) | 装扮(auto) | 弹性空白(1fr) | 徽记列(auto) | 武器列(auto)
 * Tab 1 (.main-equip) 与 Tab 2 (.main-detail) 共用同一份布局规则，完全一致。 */
.main{
  display:grid;
  grid-template-columns:auto auto 1fr auto auto;
  gap:8px;
}
.col-title{
  background:linear-gradient(#4a3e24,#2a2214);
  border:1px solid #000;
  color:#f1d78b;
  padding:5px 12px;
  font-weight:bold;
  letter-spacing:2px;
  margin-bottom:8px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.col-title .hint{ color:#8a7e60; font-size:11px; letter-spacing:0; font-weight:normal; }
.slot-list{ display:flex; flex-direction:column; gap:8px; }

.slot{
  display:grid;
  grid-template-columns:72px 1fr;
  background:#26221a;
  border:1px solid #000;
  box-shadow:inset 0 0 10px rgba(0,0,0,0.6);
  min-height:92px;
  cursor:pointer;
  transition:border-color .15s;
}
.slot:hover,
.slot.active{ border-color:#c9a84a; }
/* 已穿戴：整行 .slot 也保持金色边框（与未穿戴的暗边形成明显区分） */
.slot.has-value{ border-color:#6a5a2a; }
.slot.has-value:hover,
.slot.has-value.active{ border-color:#f1c97a; }

.slot .icon-box{
  background:radial-gradient(circle at 30% 30%,#3a3226,#1a1610);
  border-right:1px solid #000;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.slot .icon{
  width:56px; height:56px;
  /* 未穿戴：暗色装备槽，不发光 */
  border:2px solid #4a3e24;
  background:radial-gradient(circle at 30% 30%,#2a261e,#141108);
  display:flex;align-items:center;justify-content:center;
  color:#8a7e60;
  font-size:11px;
  text-align:center;
  box-shadow:inset 0 0 10px rgba(0,0,0,0.6);
  position:relative;
  transition:all .2s ease;
}
/* 已穿戴：.slot.has-value 时图标切换为金色装备槽 + 外发光 */
.slot.has-value .icon{
  border-color:#c9a84a;
  background:linear-gradient(135deg,#5a4a2a 0%,#2a2218 100%);
  color:#f1d78b;
  box-shadow:inset 0 0 10px rgba(255,200,100,0.3),0 0 8px rgba(201,168,74,0.4);
}
/* 带图片的装备图标：背景图由 JS 通过 inline style 设置，背景色/定位/尺寸由此处统一控制 */
.slot .icon.has-img{
  background-color:#1a1610;
  background-image:none; /* inline style 会覆盖，此行仅用于去渐变 */
  background-size:85% 85%;
  background-repeat:no-repeat;
  background-position:center;
}
.slot .icon .star-badge{
  position:absolute;
  top:-6px; right:-6px;
  background:#c14adf;
  color:#fff;
  font-size:10px;
  padding:1px 4px;
  border:1px solid #000;
  border-radius:2px;
  font-weight:bold;
  text-shadow:none;
}
.slot .slot-label{
  position:absolute;
  bottom:2px; left:3px;
  font-size:10px;
  color:#8a7e60;
  letter-spacing:1px;
}
.slot .info{
  padding:6px 10px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-width:0;
}
.eq-name{
  color:#ff8c3a;
  font-weight:bold;
  font-size:13px;
  text-shadow:1px 1px 0 #000;
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.eq-grade{ color:#9d9378; font-size:11px; margin-top:2px; }
.eq-grade .lv{
  display:inline-block;
  background:#3a2e18;
  color:#f1c97a;
  padding:0 5px;
  border:1px solid #6a4a20;
  margin-right:4px;
  font-size:10px;
}
.attrs{
  margin-top:4px;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0 10px;
  font-size:11px;
  line-height:1.5;
}
.attrs span{ color:#c3b892; }
.attrs .hi{ color:#7fd17f; }
.attrs .gold{ color:#f1c97a; }
.empty-name{ color:#5a5040; font-style:italic; font-weight:normal; }
.empty-icon{
  border-color:#4a4030 !important;
  color:#4a4030 !important;
  background:linear-gradient(135deg,#2a251e,#1a1610) !important;
  box-shadow:inset 0 0 10px rgba(0,0,0,0.6) !important;
}

/* ============ 底部 ============ */
/* ============ 配饰栏 ============ */
.accessory-bar{
  margin-top:12px;
  background:#26221a;
  border:1px solid #000;
  box-shadow:inset 0 0 10px rgba(0,0,0,0.6);
  padding:8px 10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  align-items:center;
}
.accessory-bar .acc-group{
  display:flex;
  gap:6px;
  align-items:center;
  padding:4px 8px;
  border-left:2px solid #4a3e24;
}
.accessory-bar .acc-group:first-child{ border-left:none; }
.accessory-bar .acc-title{ color:#f1c97a; font-weight:bold; margin-right:4px; }
.accessory-bar label{ color:#a89e82; display:flex; align-items:center; gap:4px; font-size:11px; }
.accessory-bar select{
  background:#1a1610;
  border:1px solid #4a3e24;
  color:#f1d78b;
  padding:3px 6px;
  font-size:11px;
  min-width:60px;
}
.accessory-bar input[type=checkbox]{ accent-color:#c9a84a; }
.accessory-bar .acc-hint{ color:#8a7e60; font-size:11px; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.btn-mini{
  background:linear-gradient(#4a3e24,#2a2214);
  border:1px solid #000;
  color:#f1d78b;
  padding:4px 10px;
  cursor:pointer;
  font-size:11px;
}
.btn-mini:hover{ background:linear-gradient(#5a4e34,#3a3224); }

/* ============ 附魔弹窗 ============ */
.enchant-row{
  display:flex;
  gap:8px;
  align-items:center;
  padding:4px 0;
  border-bottom:1px dashed #2a2414;
}
.enchant-row:last-child{ border-bottom:none; }
.enchant-row .en-part{
  min-width:68px;
  color:#f1c97a;
  font-weight:bold;
  font-size:11px;
}
.enchant-row select{
  background:#1a1610;
  border:1px solid #4a3e24;
  color:#d8d4c8;
  padding:5px 8px;
  font-size:11px;
  outline:none;
}
.enchant-row select:focus{ border-color:#c9a84a; }

/* ============ 加成来源 / 激活套装 ============ */
.bonus-bar{
  margin-top:10px;
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:10px;
}
.bonus-box{
  background:#26221a;
  border:1px solid #000;
  padding:8px 10px;
  box-shadow:inset 0 0 10px rgba(0,0,0,0.6);
}
.bonus-box .bonus-title{
  color:#f1c97a;
  font-weight:bold;
  margin-bottom:5px;
  padding-bottom:4px;
  border-bottom:1px solid #4a3e24;
  font-size:12px;
}
.bonus-box .bonus-body{ font-size:11px; color:#d8d4c8; line-height:1.7; }
.bonus-box .set-tag{
  display:inline-block;
  background:linear-gradient(#5a2868,#3a1a48);
  border:1px solid #c14adf;
  padding:2px 8px;
  margin:2px 4px 2px 0;
  border-radius:2px;
  color:#e8b7ff;
}
.bonus-box .src-tag{
  display:inline-block;
  padding:2px 8px;
  margin:2px 4px 2px 0;
  background:#1a1610;
  border:1px solid #4a3e24;
  color:#f1c97a;
  border-radius:2px;
}

.footer{ margin-top:12px; display:flex; flex-direction:row; gap:12px; align-items:flex-start; }
.total-panel{
  background:#26221a;
  border:1px solid #000;
  padding:10px 14px;
  box-shadow:inset 0 0 10px rgba(0,0,0,0.6);
}
.total-panel .th{
  color:#f1d78b;
  font-weight:bold;
  letter-spacing:2px;
  border-bottom:1px solid #4a3e24;
  padding-bottom:4px;
  margin-bottom:6px;
  display:flex;
  justify-content:space-between;
}
.total-panel .th small{ color:#8a7e60; font-weight:normal; font-size:11px; }
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2px 18px;
  line-height:1.7;
}
.stats .row{
  display:flex;
  justify-content:space-between;
  border-bottom:1px dashed #3a3226;
  padding:1px 0;
}
.stats .k{ color:#a89e82; }
.stats .v{ color:#dcd3b4; }
.stats .v.hi{ color:#7fd17f; }
.stats .v.gold{ color:#f1c97a; }
.stats .v.dmg{ color:#ff8c3a; font-weight:bold; }

.actions{ display:flex; flex-direction:row; gap:8px; flex-wrap:wrap; flex:1; }
.btn{
  background:linear-gradient(#6a5a30,#3a2e18);
  border:1px solid #000;
  color:#ffe9a8;
  padding:8px 10px;
  cursor:pointer;
  font-weight:bold;
  letter-spacing:2px;
  font-size:13px;
  box-shadow:inset 0 1px 0 rgba(255,220,120,0.3);
  user-select:none;
}
.btn:hover{ background:linear-gradient(#8a7a40,#4a3e28); }
.btn.secondary{ background:linear-gradient(#4a3e28,#2a2214); color:#c9c0a8; }

/* ============ 弹窗 ============ */
.modal-mask{
  position:fixed; inset:0;
  background:rgba(0,0,0,0.75);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99;
  padding:12px;
}
.modal-mask.show{ display:flex; }
.modal{
  background:linear-gradient(#2a251e,#1a1612);
  border:2px solid #c9a84a;
  box-shadow:0 0 30px rgba(201,168,74,0.4);
  width:720px;
  max-width:100%;
  max-height:90vh;
  display:flex;
  flex-direction:column;
}
.modal-head{
  background:linear-gradient(#5a4a28,#2a2214);
  padding:10px 14px;
  color:#f1d78b;
  font-weight:bold;
  letter-spacing:2px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.modal-head .back{
  cursor:pointer;
  color:#f1d78b;
  font-size:13px;
  padding:2px 8px;
  margin-right:8px;
  border:1px solid #c9a84a;
  font-weight:normal;
}
.modal-head .close{
  cursor:pointer;
  color:#f1d78b;
  font-size:18px;
  padding:0 6px;
}
.modal-filter{
  padding:8px 12px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  border-bottom:1px solid #4a3e24;
}
.modal-filter input,
.modal-filter select{
  background:#1a1610;
  border:1px solid #4a3e24;
  color:#f1d78b;
  padding:5px 8px;
  flex:1;
  min-width:100px;
  outline:none;
}
.modal-body{ overflow-y:auto; padding:6px 10px; flex:1; }

.eq-option{
  background:#1e1a14;
  border:1px solid #3a3226;
  padding:8px 10px;
  margin-bottom:6px;
  cursor:pointer;
  transition:all .12s;
}
.eq-option:hover{ border-color:#c9a84a; background:#2a2414; }
.eq-option .name{ color:#ff8c3a; font-weight:bold; }
.eq-option .name.set{ color:#c14adf; }
.eq-option .tags{ color:#8a7e60; font-size:11px; margin-top:3px; }
.eq-option .tags .star-count{ color:#f1c97a; }
.eq-option .tags .job-tag{ color:#7ab8ff; }
.eq-option .brief{ color:#a89e82; font-size:11px; margin-top:2px; line-height:1.5; }
.eq-option .brief .hi{ color:#7fd17f; }
.eq-option .brief .gold{ color:#f1c97a; }

/* ★ 星级选择器 */
.star-picker{ display:flex; flex-wrap:wrap; gap:8px; padding:14px; }
.star-card{
  flex:1 1 calc(50% - 8px);
  min-width:180px;
  background:#1e1a14;
  border:1px solid #3a3226;
  padding:10px 12px;
  cursor:pointer;
  transition:all .12s;
}
.star-card:hover{ border-color:#c9a84a; background:#2a2414; }
.star-card .star-head{
  color:#f1c97a;
  font-weight:bold;
  font-size:14px;
  margin-bottom:4px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.star-card .star-head .stars{ letter-spacing:1px; }
.star-card .star-head .tag{
  background:#3a2e18;
  color:#ffe9a8;
  border:1px solid #6a4a20;
  padding:1px 5px;
  font-size:10px;
  font-weight:normal;
  letter-spacing:0;
}
.star-card .star-attrs{ color:#a89e82; font-size:11px; line-height:1.6; }
.star-card .star-attrs .gold{ color:#f1c97a; }
.star-card .star-attrs .hi{ color:#7fd17f; }
.star-card .extra-line{
  color:#6fb4ff;
  font-size:11px;
  margin-top:4px;
  line-height:1.5;
}

/* ============ Toast ============ */
.toast{
  position:fixed;
  top:20px; left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,0.85);
  border:1px solid #c9a84a;
  color:#f1d78b;
  padding:8px 16px;
  z-index:999;
  display:none;
  font-size:13px;
}
.toast.show{ display:block; animation:fadeOut 2s forwards; }
@keyframes fadeOut{
  0%{opacity:1}
  70%{opacity:1}
  100%{opacity:0}
}

/* ============ 移动端 ============ */
@media (max-width: 860px){
  body{
    padding:0;
    font-size:13px;
    /* 背景保持与 PC 端一致（继承全局 body 样式，不再覆盖） */
  }
  .app{
    padding:8px;
    overflow-x:hidden;              /* 防止内容超出屏幕产生水平滚动 */
    /* .app 的背景、边框、阴影保持与 PC 端一致，不再覆盖 */
  }
  .title-bar{
    font-size:14px;
    letter-spacing:2px;
    padding:6px;
    /* 标题栏样式与 PC 端一致 */
  }
  .character-bar{
    flex-direction:column;
    align-items:stretch;
    gap:6px;
  }
  .character-bar label{ justify-content:space-between; }
  .character-bar select,
  .character-bar input{ min-width:0; width:100%; }
  .char-info{ margin:0; text-align:center; }

  /* ========== 套装快速穿戴栏 H5 适配 ========== */
  .set-quick-bar{
    padding:6px 8px;
    gap:6px;
  }
  .set-quick-bar select{ flex:1; min-width:0; font-size:11px; }
  .set-quick-label{ font-size:11px; }
  .set-quick-btn{ font-size:11px !important; padding:4px 10px !important; }

  /* ========== 核心：装备穿戴区（仿 character_equipment_display.html 布局，但保持 PC 配色）========== */
  .main{
    display:flex;
    justify-content:center;          /* 整体居中 */
    align-items:flex-start;
    gap:4px;                         /* 列间距统一缩小到 4px */
    padding:14px 4px;
    background:rgba(0,0,0,0.25);
    border:1px solid #000;
    box-shadow:inset 0 0 15px rgba(0,0,0,0.6);
    position:relative;
  }
  /* 列标题（防具 / 武器...）在移动端隐藏，使用纯图标栏 */
  .col-title{ display:none; }
  .col{
    flex:0 0 auto;
    width:72px;
    display:flex;
    flex-direction:column;
  }
  /* 防具列（左列）：H5 下作为独立 72px flex 列，内部竖向堆叠 —— 防具 5 件 + 宠物槽 */
  .col-defense{
    display:flex;
    flex-direction:column;
    width:72px;
    flex:0 0 72px;
    gap:8px;
  }
  .col-defense > .slot-list{
    flex:0 0 auto;
    width:72px;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  /* ====== 徽记 / 宠物槽 H5 特化 ======
     Tab 1 的徽记/宠物本身就是 .slot（class 上带 .slot-insignia），
     已自动复用下方 .slot / .slot.has-value 的 60×60 金色装备槽样式。
     H5 下需处理：
       1) 父选择器 .slot .info{display:none} 会把 select 也隐藏 —— 这里把
          .info 改为 display:contents，让 select 仍能定位到 .slot；
       2) select 透明覆盖整个 60×60 方格，点击方格唤起原生选择器；
       3) 隐藏 .eq-name/.eq-grade 文字，避免遮挡 icon 方格。 */
  .slot.slot-insignia{
    position:relative;
  }
  .slot.slot-insignia .info{
    display:contents;                     /* 透明容器，让 select 直接作为 .slot 的定位子元素 */
  }
  .slot.slot-insignia .eq-name,
  .slot.slot-insignia .eq-grade{
    display:none;                         /* H5 下只显示 icon 方格，不显示装备名文字 */
  }
  .slot.slot-insignia .insignia-select{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    border:none;
    background:transparent;
    color:transparent;
    font-size:0;
    appearance:none;
    -webkit-appearance:none;
    outline:none;
    cursor:pointer;
    z-index:2;
  }
  .slot.slot-insignia .insignia-select option{
    color:#f1d78b;
    background:#1a1610;
    font-size:13px;
  }
  .slot-list{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  /* ---- 单个装备方格 ----
     - 未穿戴（默认）：暗灰装备槽，不发光
     - 已穿戴（.has-value）：金色装备槽 + 外发光，与 PC 端视觉一致 */
  .slot{
    display:block;            /* 推翻 PC 的 grid 布局 */
    grid-template-columns:none;
    width:60px;
    height:60px;
    min-height:0;
    background:radial-gradient(circle at 30% 30%,#2a261e,#141108);
    border:2px solid #4a3e24;           /* 默认暗金边，不发光 */
    border-radius:4px;
    box-shadow:inset 0 0 10px rgba(0,0,0,0.6);
    overflow:hidden;
    position:relative;
    transition:all .25s ease;
    margin:0 auto;
  }
  /* 已穿戴：金色装备槽 + 外发光 */
  .slot.has-value{
    background:radial-gradient(circle at 30% 30%,#3a3226,#1a1610);
    border-color:#c9a84a;
    box-shadow:inset 0 0 10px rgba(255,200,100,0.3),0 0 8px rgba(201,168,74,0.4);
  }
  /* 点击反馈：仅当已穿戴时放大 + 高亮（未穿戴时只切边色避免强反差） */
  .slot:active,
  .slot.active{
    border-color:#8a7a40;
  }
  .slot.has-value:hover,
  .slot.has-value:active,
  .slot.has-value.active{
    border-color:#f1c97a;
    transform:scale(1.05);
    box-shadow:inset 0 0 10px rgba(255,200,100,0.4),0 0 14px rgba(241,201,122,0.7);
  }
  /* 图标容器占满整格 */
  .slot .icon-box{
    width:100%;
    height:100%;
    border:none;
    background:transparent;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
  }
  .slot .icon{
    width:100%;
    height:100%;
    border:none;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    font-size:10px;
    color:#f1d78b;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .slot .icon.has-img{
    background-size:90% 90%;
    background-position:center;
    background-repeat:no-repeat;
    background-color:transparent;
  }
  .slot .icon.empty-icon{
    background:radial-gradient(circle at 30% 30%,#2a251e,#1a1610) !important;
    color:#5a5040 !important;
    border:none !important;
    box-shadow:none !important;
  }
  .slot .icon .star-badge{
    position:absolute;
    top:2px; right:2px;
    background:#c14adf;
    color:#fff;
    font-size:9px;
    padding:1px 4px;
    border:1px solid #000;
    border-radius:2px;
    font-weight:bold;
    z-index:2;
  }
  /* 隐藏文字信息（移动端仅显示图标） */
  .slot .slot-label{ display:none; }
  .slot .info{ display:none; }
  /* 注：左右两列装备格子的边框已统一使用 .slot 的金色边框（与 PC 端一致） */

  /* ---- 中间角色展示区：已移除（用户反馈不好看）---- */

  /* ============ 其余面板 ============ */
  .attrs{ grid-template-columns:repeat(2,1fr); font-size:11px; }
  .eq-name{ font-size:13px; }
  .footer{ flex-direction:column; }
  .bonus-bar{ grid-template-columns:1fr; }
  .accessory-bar{ gap:6px 10px; }
  .accessory-bar .acc-group{ flex:1 1 100%; border-left:none; border-top:1px solid #4a3e24; padding-top:6px; }
  .stats{ grid-template-columns:repeat(2,1fr); font-size:12px; }
  .actions{ flex-direction:row; flex-wrap:wrap; width:100%; }
  .actions .btn{ flex:1 1 45%; padding:12px; font-size:14px; }
  .modal{ width:100%; max-height:95vh; }
  .modal-filter{ flex-direction:column; }
  .star-card{ flex:1 1 100%; }

  /* ========== H5 端：徽记列靠右对齐 ========== */
  .col-insignia{
    flex:0 0 auto;
    width:72px;
    display:flex;
    flex-direction:column;
    margin-left:auto;   /* 把徽记列推到武器列左侧 */
  }
  .col-insignia .insignia-slot-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    width:72px;
    min-width:0;        /* 覆盖 PC 端的 min-width:220px */
  }
  .col-insignia .col-title{ display:none; }

  /* ========== H5 端：装扮列紧跟防具列右侧 ========== */
  .col-costume{
    flex:0 0 auto;
    width:72px;
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .col-costume .slot-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    width:72px;
    min-width:0;
  }
  .col-costume .col-title{ display:none; }
  /* 覆盖 PC 端装扮列 slot 的固定宽度和 grid 布局 */
  .col-costume .slot{
    display:block;
    width:60px;
    height:60px;
    grid-template-columns:none;
  }
  .col-costume .slot .info{
    width:auto;
  }

  /* ========== H5 端：Tab 栏横向滚动，防止超出 ========== */
  .tab-bar{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    flex-wrap:nowrap;
    scrollbar-width:none;           /* Firefox 隐藏滚动条 */
  }
  .tab-bar::-webkit-scrollbar{ display:none; }  /* Chrome/Safari 隐藏滚动条 */
  .tab-btn{
    padding:8px 14px;
    font-size:12px;
    letter-spacing:1px;
    white-space:nowrap;
    flex-shrink:0;
  }

  /* ========== H5 端：圣者封印适配 ========== */
  .seal-wrap{
    padding:10px 4px;
  }
  .seal-circle{
    width:100%;
    max-width:320px;
    height:200px;
    margin:0 auto 14px;
  }
  .seal-icon-wrap{
    width:56px;
    height:56px;
    border-width:2px;
  }
  .seal-icon-wrap-center{
    width:72px;
    height:72px;
    border-width:3px;
  }
  .seal-icon{
    width:38px;
    height:38px;
  }
  .seal-icon-center{
    width:48px;
    height:48px;
  }
  .seal-slot-left{ left:8px; }
  .seal-slot-right{ right:8px; }
  .seal-slot-name{
    font-size:10px;
    letter-spacing:0;
  }
  .seal-lv-badge{
    font-size:10px;
    min-width:18px;
    height:18px;
    line-height:18px;
    border-radius:9px;
  }
  /* 连接线 SVG 自适应 */
  .seal-lines{
    width:100%;
    height:100%;
  }
  /* 配置面板：H5端保持3列但允许横向滚动 */
  .seal-config{
    grid-template-columns:repeat(3, minmax(140px, 1fr));
    gap:8px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .seal-config-col{
    padding:8px 10px;
    min-width:140px;
  }
  .seal-config-title{
    font-size:12px;
  }
  .seal-config-row{
    flex-wrap:wrap;
    gap:4px;
  }
  .seal-config-row label{
    min-width:60px;
    font-size:11px;
  }
  .seal-config-row select{
    font-size:11px;
    padding:3px 6px;
  }
}

/* ============ 装备细节 Tab & 装备穿戴 Tab：PC 端 grid 布局 ============ */
/* PC 端：
   main-equip（装备穿戴）：防具(auto) | 装扮(auto) | 弹性空白(1fr) | 徽记(auto) | 武器(auto) —— 5列
   main-detail（装备细节）：防具(auto) | 弹性空白(1fr) | 徽记(auto) | 武器(auto) —— 4列
   全部包裹在 min-width:861px 中，避免在 H5 端覆盖 flex 布局 */
@media (min-width: 861px){
  .main-equip{
    grid-template-columns: auto auto minmax(10px, 1fr) auto auto;
    column-gap:6px;
  }
  .main-detail{
    grid-template-columns: auto minmax(10px, 1fr) auto auto;
    column-gap:6px;
  }
  /* 防具列固定在最左 */
  .main-detail > .col:nth-child(1),
  .main-equip > .col:nth-child(1){
    grid-column: 1;
  }
  /* 徽记列：main-equip 放第4列，main-detail 放第3列 */
  .main-equip > .col-insignia{
    grid-column: 4;
    justify-self: end;
  }
  .main-detail > .col-insignia{
    grid-column: 3;
    justify-self: end;
  }
  /* 武器列：main-equip 放第5列，main-detail 放第4列 */
  .main-equip > .col:nth-child(4){
    grid-column: 5;
  }
  .main-detail > .col:nth-child(3){
    grid-column: 4;
  }
  /* 装扮列：固定宽度与防具列一致（72px图标 + 140px info = 212px） */
  .col-costume{
    width:212px;
  }
  .col-costume .slot-list{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .col-costume .slot{
    grid-template-columns:72px 140px;
    width:212px;
  }
  .col-costume .slot .info{
    width:140px;
    overflow:hidden;
  }
}
.col-costume .col-title{
  color:#c14adf;
}
/* 徽记列：4 个槽位竖向排列，宽度与单个装备槽一致
   min-width:220px 仅在 PC 端生效，H5 端在 @media(max-width:860px) 中已覆盖为 0 */
@media (min-width: 861px){
  .col-insignia{
    width:auto;
  }
  .col-insignia .insignia-slot-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:220px;
  }
}
.col-insignia .col-title{
  color:#f1c97a;
}

/* H5 端徽记列 & 装扮列的适配已合并到 @media (max-width: 860px) 中 */

/* ============ 武器专属特效 —— 自定义彩色下拉 ============
 * 原生 <select> <option> 在 macOS/部分浏览器里无法生效 inline style color，
 * 这里用 div 模拟下拉，确保 [星辉]/[月芒]/[穿石]/[破云] 颜色正确显示。
 *
 * 不用 <label> 包裹！因为 <label> 对其内部的 form 控件（即使是
 * display:none 的 <select>）会派发合成 click 事件，会冒泡到 document
 * 的全局关闭监听器，导致"点按钮 → 菜单瞬间关闭 → 看起来没数据"。 */
.weff-row{
  display:flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
}
.weff-label{ color:#a89e82; font-size:12px; }
.weff-custom{
  position:relative;
  display:inline-block;
  min-width:140px;
}
.weff-btn{
  background:#1a1610;
  border:1px solid #4a3e24;
  padding:4px 28px 4px 8px;
  font-size:12px;
  cursor:pointer;
  user-select:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  min-height:22px;
  position:relative;
}
.weff-btn:hover{ border-color:#c9a84a; }
.weff-btn .weff-caret{
  color:#8a7e60;
  font-size:10px;
  margin-left:4px;
}
.weff-menu{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  margin-top:2px;
  background:#1a1610;
  border:1px solid #4a3e24;
  box-shadow:0 4px 12px rgba(0,0,0,0.6);
  z-index:9999;
  max-height:240px;
  overflow-y:auto;
}
.weff-item{
  padding:6px 10px;
  font-size:12px;
  font-weight:bold;
  cursor:pointer;
  white-space:nowrap;
}
.weff-item:hover{ background:#2a2214; }
.weff-item.selected{ background:#2f2818; }

/* ===== 武器徽章槽位 ===== */
.weapon-badge-slot{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  margin-bottom:4px;
}
.weapon-badge-slot:last-child{ margin-bottom:0; }
.wbs-label{
  color:#a89e82;
  font-size:12px;
  min-width:32px;
}
.weapon-badge-slot select{
  background:#1a1610;
  border:1px solid #4a3e24;
  color:#f1d78b;
  padding:4px 8px;
  font-size:12px;
  outline:none;
}
.weapon-badge-slot select:focus{ border-color:#c9a84a; }
.weapon-badge-slot select:disabled{ color:#5a5040; cursor:not-allowed; }

/* ============ 技能设置 Tab ============ */
.skill-tab-wrap{
  padding:10px 6px;
}
.skill-tab-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
  padding-bottom:8px;
  border-bottom:1px solid #3a3224;
}
.skill-tab-hint{
  color:#7a7060;
  font-size:11px;
}
/* 技能网格：每行多列，自适应 */
.skill-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(80px, 1fr));
  gap:8px;
}
/* 分组标题行（通用技能 / 基本技能 / 职业技能） */
.skill-group-title{
  grid-column:1/-1;
  color:#c9a84a;
  font-size:12px;
  font-weight:bold;
  letter-spacing:1px;
  padding:4px 6px;
  background:linear-gradient(90deg,#2a2214,transparent);
  border-left:3px solid #c9a84a;
  margin-top:4px;
}
/* 单个技能卡片：竖向紧凑布局 */
.skill-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  background:#1e1a12;
  border:1px solid #3a3224;
  border-radius:4px;
  padding:6px 3px 5px;
  transition:border-color .15s;
  min-width:0;
  overflow:hidden;
  box-sizing:border-box;
}
.skill-card:hover{
  border-color:#5a4a28;
}
.skill-card.has-level{
  border-color:#6a5a2a;
}
.skill-card.skill-selected{
  border-color:#f0c040;
  box-shadow:0 0 6px rgba(240,192,64,.5);
  background:#2a2418;
}
/* BUFF技能分组标题 */
.skill-group-title-buff{
  border-left-color:#5ea74a;
  color:#8fce5a;
  background:linear-gradient(90deg,#162818,transparent);
  margin-top:12px;
}
/* 被动技能分组标题 */
.skill-group-title-passive{
  border-left-color:#7b5ea7;
  color:#b89edb;
  background:linear-gradient(90deg,#1e1628,transparent);
  margin-top:12px;
}
/* BUFF技能卡片 */
.skill-card-buff{
  border-color:#2a3a1a;
}
.skill-card-buff:hover{
  border-color:#3a5a2a;
}
.skill-card-buff.has-level{
  border-color:#4a6a2a;
}
/* 被动技能卡片 */
.skill-card-passive{
  border-color:#3a2848;
}
.skill-card-passive:hover{
  border-color:#5a3a6a;
}
.skill-card-passive.has-level{
  border-color:#6a4a8a;
}
/* 技能类型标签 */
.skill-type-badge{
  display:inline-block;
  font-size:9px;
  padding:0 3px;
  border-radius:2px;
  margin-left:3px;
  vertical-align:middle;
  line-height:14px;
}
.skill-type-badge.buff{
  background:#2a3a1a;
  color:#8fce5a;
  border:1px solid #4a6a2a;
}
.skill-type-badge.passive{
  background:#1a2a3a;
  color:#5ab8ce;
  border:1px solid #2a4a6a;
}
/* 图标容器（相对定位，用于叠加等级角标） */
.skill-card-icon-wrap{
  position:relative;
  flex:0 0 auto;
}
/* 技能图标 */
.skill-card-icon{
  display:block;
  width:52px;
  height:52px;
  border-radius:4px;
  border:1px solid #3a3224;
  background:#0e0c08;
  object-fit:cover;
  image-rendering:pixelated;
}
.skill-card-icon.no-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#444;
  font-size:20px;
  background:#0e0c08;
  width:52px;
  height:52px;
  border-radius:4px;
  border:1px solid #3a3224;
}
/* 等级角标（右上角） */
.skill-lv-badge{
  position:absolute;
  top:-4px;
  right:-4px;
  background:#c9a84a;
  color:#1a1610;
  font-size:10px;
  font-weight:bold;
  line-height:1;
  padding:1px 3px;
  border-radius:3px;
  min-width:14px;
  text-align:center;
  pointer-events:none;
  display:none;
}
.skill-lv-badge.show{ display:block; }
/* TP 角标（左上角） */
.skill-tp-badge{
  position:absolute;
  top:-4px;
  left:-4px;
  background:#3a7ab8;
  color:#e0f0ff;
  font-size:10px;
  font-weight:bold;
  line-height:1;
  padding:1px 3px;
  border-radius:3px;
  min-width:14px;
  text-align:center;
  pointer-events:none;
  display:none;
}
.skill-tp-badge.show{ display:block; }
/* 技能名称 */
.skill-card-name{
  color:#d4c89a;
  font-size:10px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  line-height:1.3;
  text-align:center;
}
/* 等级控制行：<< - [值] + >> */
.skill-ctrl-row{
  display:flex;
  align-items:center;
  gap:1px;
  width:100%;
  justify-content:center;
  box-sizing:border-box;
}
.skill-ctrl-btn{
  background:#2a2214;
  border:1px solid #4a3e24;
  border-radius:3px;
  color:#c9a84a;
  font-size:10px;
  font-weight:bold;
  line-height:1;
  padding:2px 3px;
  cursor:pointer;
  user-select:none;
  transition:background .1s, border-color .1s;
  flex:0 0 auto;
}
.skill-ctrl-btn:hover{ background:#3a3224; border-color:#c9a84a; }
.skill-ctrl-btn:active{ background:#4a3a1a; }
.skill-ctrl-btn.tp-btn{ color:#7ab8e0; border-color:#2a4a6a; }
.skill-ctrl-btn.tp-btn:hover{ background:#1a2a3a; border-color:#7ab8e0; }
/* 等级数值输入框 */
.skill-ctrl-val{
  background:#0e0c08;
  border:1px solid #3a3224;
  border-radius:3px;
  color:#f1d78b;
  font-size:11px;
  font-weight:bold;
  text-align:center;
  min-width:20px;
  padding:1px 2px;
  line-height:1.4;
  flex:1 1 0;
  max-width:28px;
  outline:none;
  cursor:text;
  /* 隐藏 number input 的上下箭头 */
  -moz-appearance:textfield;
}
.skill-ctrl-val::-webkit-inner-spin-button,
.skill-ctrl-val::-webkit-outer-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.skill-ctrl-val:focus{
  border-color:#c9a84a;
  background:#1a1610;
}
.skill-ctrl-val.tp-val{ color:#a8d8f8; border-color:#2a4a6a; }
.skill-ctrl-val.tp-val:focus{ border-color:#7ab8e0; }
/* 技能等级上限标签 */
.skill-max-label{
  color:#8a7e62;
  font-size:10px;
  font-weight:normal;
  line-height:1;
  flex:0 0 auto;
  white-space:nowrap;
}
/* TP 行标签 */
.skill-tp-row-label{
  color:#7ab8e0;
  font-size:9px;
  text-align:center;
  line-height:1;
  margin-top:-2px;
}
/* ===== 修炼日志自定义多选下拉 ===== */
.tl-dropdown{
  position:relative;
  display:inline-block;
}
/* 触发按钮：与 .character-bar select 完全一致 */
.tl-btn{
  background:#1a1610;
  border:1px solid #4a3e24;
  color:#f1d78b;
  padding:4px 8px;
  outline:none;
  min-width:80px;
  cursor:pointer;
  font-size:inherit;
  font-family:inherit;
  text-align:left;
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:4px;
}
.tl-btn:focus{ border-color:#c9a84a; }
/* 浮层面板 */
.tl-panel{
  display:none;
  position:absolute;
  top:calc(100% + 2px);
  right:0;
  z-index:999;
  background:#1a1610;
  border:1px solid #4a3e24;
  min-width:160px;
  max-width:220px;
  box-shadow:0 4px 12px rgba(0,0,0,0.7);
  white-space:nowrap;
}
.tl-panel.open{ display:block; }
/* 每一行 checkbox 选项 */
.tl-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  cursor:pointer;
  color:#d4c89a;
  font-size:12px;
  user-select:none;
  transition:background .1s;
}
.tl-item:hover{ background:#2a2210; }
.tl-item input[type=checkbox]{
  width:14px; height:14px;
  accent-color:#c9a84a;
  cursor:pointer;
  flex-shrink:0;
}
.tl-item.checked{
  background:#3a2e10;
  color:#f1d78b;
  font-weight:bold;
}

/* ============ 圣者封印 Tab ============ */
.seal-wrap{
  padding:14px 10px;
}
.seal-header{
  margin-bottom:14px;
  padding-bottom:8px;
  border-bottom:1px solid #3a3224;
}
.seal-header-hint{
  color:#7a7060;
  font-size:11px;
}
/* 圆形布局容器 */
.seal-circle{
  position:relative;
  width:420px;
  height:280px;
  margin:0 auto 20px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.seal-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
}
/* 单个封印槽位 */
.seal-slot{
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  z-index:1;
  cursor:default;
  transition:none;
  user-select:none;
  pointer-events:none;
}
.seal-slot-left{   left:20px;  top:50%; transform:translateY(-50%); }
.seal-slot-center{ left:50%;   top:50%; transform:translate(-50%,-50%); }
.seal-slot-right{  right:20px; top:50%; transform:translateY(-50%); }
/* 图标外框 */
.seal-icon-wrap{
  position:relative;
  width:72px;
  height:72px;
  border-radius:50%;
  border:3px solid #c14adf;
  background:radial-gradient(circle at 30% 30%,#3a2848,#1a1028);
  box-shadow:0 0 12px rgba(193,74,223,0.4), inset 0 0 10px rgba(193,74,223,0.2);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .2s;
}
.seal-icon-wrap-center{
  width:90px;
  height:90px;
  border-width:4px;
  box-shadow:0 0 20px rgba(193,74,223,0.6), inset 0 0 15px rgba(193,74,223,0.3);
}
.seal-slot.has-value .seal-icon-wrap{
  border-color:#e8b7ff;
  box-shadow:0 0 18px rgba(232,183,255,0.6), inset 0 0 12px rgba(193,74,223,0.4);
}
/* 图标 */
.seal-icon{
  width:48px;
  height:48px;
  background-size:85% 85%;
  background-repeat:no-repeat;
  background-position:center;
  border-radius:50%;
}
.seal-icon-center{
  width:60px;
  height:60px;
}
/* 等级角标 */
.seal-lv-badge{
  position:absolute;
  bottom:-4px;
  right:-4px;
  background:linear-gradient(135deg,#c14adf,#8a2aaf);
  color:#fff;
  font-size:12px;
  font-weight:bold;
  min-width:22px;
  height:22px;
  line-height:22px;
  text-align:center;
  border-radius:11px;
  border:2px solid #000;
  text-shadow:1px 1px 0 #000;
  z-index:3;
}
.seal-slot-name{
  color:#e8b7ff;
  font-size:12px;
  font-weight:bold;
  text-shadow:1px 1px 0 #000;
  letter-spacing:1px;
}
/* 配置面板 */
.seal-config{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:14px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  min-width:0;
}
.seal-config-col{
  background:#1e1a14;
  border:1px solid #3a3226;
  padding:10px 12px;
  border-radius:4px;
}
.seal-config-col.active{
  border-color:#c14adf;
  box-shadow:0 0 8px rgba(193,74,223,0.3);
}
.seal-config-title{
  color:#e8b7ff;
  font-weight:bold;
  font-size:13px;
  margin-bottom:8px;
  padding-bottom:4px;
  border-bottom:1px dashed #4a3e24;
  text-align:center;
  letter-spacing:1px;
}
.seal-config-row{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:6px;
  font-size:12px;
  color:#a89e82;
}
.seal-config-row:last-child{ margin-bottom:0; }
.seal-config-row label{
  min-width:70px;
  color:#a89e82;
  white-space:nowrap;
}
.seal-config-row select{
  background:#1a1610;
  border:1px solid #4a3e24;
  color:#f1d78b;
  padding:4px 8px;
  font-size:12px;
  outline:none;
  flex:1;
  min-width:60px;
}
.seal-config-row select:focus{ border-color:#c9a84a; }
.seal-config-row .seal-attr-text{
  color:#7fd17f;
  font-size:11px;
  flex:1;
}
/* 套装效果提示 */
.seal-set-info{
  background:#1e1a14;
  border:1px solid #3a3226;
  padding:10px 14px;
  border-radius:4px;
  color:#a89e82;
  font-size:12px;
  line-height:1.7;
}
.seal-set-info .seal-set-title{
  color:#c14adf;
  font-weight:bold;
  margin-bottom:4px;
}
.seal-set-info .seal-set-attr{
  color:#7fd17f;
}

/* ============ H5端技能设置页面：按钮和卡片放大 ============ */
@media (max-width: 860px){
  .skill-grid{
    grid-template-columns:repeat(auto-fill, minmax(90px, 1fr));
    gap:10px;
  }
  .skill-card{
    padding:8px 4px 7px;
  }
  .skill-ctrl-btn{
    font-size:14px;
    padding:6px 8px;
    min-width:28px;
    min-height:28px;
  }
  .skill-ctrl-val{
    font-size:13px;
    padding:4px 2px;
    min-height:28px;
  }
  .skill-card-name{
    font-size:11px;
  }
}

/* ============ 欢迎弹窗 ============ */
.welcome-mask{
  position:fixed; inset:0;
  background:rgba(0,0,0,0.82);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:12px;
  animation:welcomeFadeIn .3s ease;
}
@keyframes welcomeFadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
.welcome-mask.hide{
  animation:welcomeFadeOut .25s ease forwards;
}
@keyframes welcomeFadeOut{
  from{ opacity:1; }
  to{ opacity:0; }
}
.welcome-box{
  background:linear-gradient(#2a251e,#1a1612);
  border:2px solid #c9a84a;
  box-shadow:0 0 40px rgba(201,168,74,0.5), 0 0 80px rgba(0,0,0,0.6);
  width:600px;
  max-width:100%;
  max-height:90vh;
  display:flex;
  flex-direction:column;
  border-radius:4px;
  overflow:hidden;
}
.welcome-head{
  background:linear-gradient(#5a4a28,#2a2214);
  padding:12px 16px;
  color:#f1d78b;
  font-weight:bold;
  font-size:16px;
  letter-spacing:3px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.welcome-head .close{
  cursor:pointer;
  color:#f1d78b;
  font-size:20px;
  padding:0 6px;
  transition:color .15s;
}
.welcome-head .close:hover{ color:#fff; }
.welcome-body{
  padding:18px 22px;
  overflow-y:auto;
  flex:1;
  color:#e8d9b0;
  font-size:14px;
  line-height:1.8;
}
.welcome-body p{
  margin:0 0 12px 0;
}
.welcome-highlight{
  font-size:15px;
  color:#f1d78b;
  border-left:3px solid #c9a84a;
  padding-left:12px;
  margin-bottom:16px !important;
}
.welcome-body .em{
  color:#ff9f43;
  font-weight:bold;
}
.welcome-cta{
  color:#c9a84a;
  font-weight:bold;
  margin-top:8px !important;
}
.welcome-qr-row{
  display:flex;
  gap:24px;
  justify-content:center;
  margin-top:16px;
  flex-wrap:wrap;
}
.welcome-qr-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.welcome-qr-label{
  color:#f1d78b;
  font-size:13px;
  font-weight:bold;
}
.welcome-qr-img{
  width:160px;
  height:160px;
  object-fit:contain;
  border:1px solid #4a3e24;
  border-radius:4px;
  background:#fff;
  padding:4px;
}
.welcome-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 22px;
  border-top:1px solid #4a3e24;
  background:linear-gradient(#26221a,#1e1a14);
}
.welcome-noshow{
  color:#a09070;
  font-size:12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:4px;
}
.welcome-noshow input{
  accent-color:#c9a84a;
}
.welcome-btn{
  background:linear-gradient(#5a4a28,#3a3020);
  border:1px solid #c9a84a;
  color:#f1d78b;
  padding:8px 24px;
  font-size:14px;
  font-weight:bold;
  cursor:pointer;
  letter-spacing:1px;
  transition:all .15s;
}
.welcome-btn:hover{
  background:linear-gradient(#6a5e40,#4a4030);
  box-shadow:0 0 10px rgba(201,168,74,0.4);
}

@media(max-width:600px){
  .welcome-box{ width:100%; }
  .welcome-qr-img{ width:130px; height:130px; }
  .welcome-body{ padding:14px 16px; font-size:13px; }
}