/* 征程之路3 - 传承进度管理 */
* { box-sizing: border-box; }
body {
  font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
  margin: 0;
  padding: 0;
  background: #1a1d23;
  color: #e0e0e0;
  font-size: 14px;
  line-height: 1.5;
}
a { color: #7eb8da; text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1600px; margin: 0 auto; padding: 16px; }

/* 导航 */
.nav {
  background: #252830;
  padding: 12px 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.nav a {
  padding: 8px 16px;
  border-radius: 6px;
  background: #2d3139;
  color: #b0b8c0;
}
.nav a:hover, .nav a.active {
  background: #3d7ea6;
  color: #fff;
  text-decoration: none;
}

/* 区块 */
.section { display: none; }
.section.active { display: block; }

.block {
  background: #252830;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
}
.block h2 {
  margin: 0 0 16px 0;
  font-size: 18px;
  color: #fff;
  border-bottom: 1px solid #3d454e;
  padding-bottom: 10px;
}

/* 传承管理 - 槽位 Tab */
.slot-tabs {
  margin-bottom: 16px;
}
.slot-tabs-cat, .slot-tabs-slot {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.slot-tabs-cat a, .slot-tabs-slot a {
  padding: 6px 14px;
  border-radius: 4px;
  background: #2d3139;
  color: #a0a8b0;
  font-size: 13px;
  cursor: pointer;
}
.slot-tabs-cat a:hover, .slot-tabs-slot a:hover {
  background: #3d454e;
  color: #fff;
}
.slot-tabs-cat a.active, .slot-tabs-slot a.active {
  background: #3d7ea6;
  color: #fff;
}
.slot-tabs-slot { margin-left: 20px; }

/* 传承管理表格 */
.task-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.task-table th, .task-table td {
  padding: 8px 12px;
  text-align: left;
  border: 1px solid #3d454e;
}
.task-table th {
  background: #2d3139;
  color: #a0a8b0;
  font-weight: normal;
}
.task-table tr:nth-child(even) { background: #1e2128; }
.task-table tr:hover { background: #2a2e36; }
.task-table .cat { color: #7eb8da; width: 60px; }
.task-table .slot { color: #9ec78a; width: 70px; }
.task-table .task-tier.tier-white { border-left: 3px solid #e0e0e0; }
.task-table .task-tier.tier-green { border-left: 3px solid #4caf50; }
.task-table .task-tier.tier-blue { border-left: 3px solid #2196f3; }
.task-table .task-tier.tier-deepblue { border-left: 3px solid #1565c0; }
.task-table .task-tier.tier-red { border-left: 3px solid #f44336; }
.task-table .task-tier.tier-purple { border-left: 3px solid #9c27b0; }
.task-table .task-tier.tier-yellow { border-left: 3px solid #ffeb3b; }
.task-table .task-tier.tier-orange { border-left: 3px solid #ff9800; }
.task-table .task-tier.tier-pink { border-left: 3px solid #e91e8c; }
.task-table .req { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.task-table .act { width: 80px; text-align: center; }
.task-table .btn-del {
  padding: 4px 10px;
  background: #8b3a3a;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
.task-table .btn-del:hover { background: #a54545; }

/* 进度勾选 */
.progress-section {
  margin-bottom: 24px;
}
.progress-section:last-child { margin-bottom: 0; }
.progress-section h3 {
  margin: 0 0 12px 0;
  font-size: 15px;
}
.progress-section-power h3 { color: #f44336; }
.progress-section-agi h3 { color: #4caf50; }
.progress-section-int h3 { color: #2196f3; }
.progress-section-gen h3 { color: #ffeb3b; }
.progress-grid {
  display: grid;
  grid-template-columns: repeat(6, 230px);
  gap: 12px;
}
.progress-item {
  background: #2d3139;
  padding: 12px;
  border-radius: 6px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 230px;
  min-width: 230px;
  max-width: 230px;
  box-sizing: border-box;
}
.progress-slot { display: flex; flex-direction: column; min-height: 230px; }
.progress-slot .slot-name {
  font-weight: bold;
  margin-bottom: 6px;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
}
.progress-slot .btn-low-priority {
  padding: 2px 6px;
  font-size: 11px;
  background: #4a4d55;
  color: #a0a8b0;
}
.progress-slot .btn-low-priority:hover {
  background: #5a5d65;
  color: #fff;
}
.progress-slot .btn-low-priority.active {
  background: #6a5a4a;
  color: #c4a77d;
}
.progress-slot .btn-low-priority.active:hover {
  background: #7a6a5a;
  color: #e0d0a0;
}
.progress-slot.slot-cat-power .slot-name { color: #f44336; }
.progress-slot.slot-cat-agi .slot-name { color: #4caf50; }
.progress-slot.slot-cat-int .slot-name { color: #2196f3; }
.progress-slot.slot-cat-gen .slot-name { color: #ffeb3b; }
.progress-slot .progress-slot-body { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.progress-slot .progress-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px;
  background: #1e2128;
  border-radius: 4px;
  font-size: 12px;
  width: 206px;
  height: 102px;
  min-height: 66px;
  box-sizing: border-box;
  overflow: hidden;
}
.progress-slot .progress-row.done { opacity: 0.7; }
.progress-slot .progress-row.done .req { text-decoration: line-through; color: #888; }
.progress-slot .progress-row-next .req { color: #888; }
/* 传承等级颜色 tier (无白/E绿/D蓝/C深蓝/B红/A紫/S黄/SS黄/SSS粉，第一个 lv1-10 为无) */
.progress-row.tier-white { border-left: 3px solid #e0e0e0; }
.progress-row.tier-green { border-left: 3px solid #4caf50; }
.progress-row.tier-blue { border-left: 3px solid #2196f3; }
.progress-row.tier-deepblue { border-left: 3px solid #1565c0; }
.progress-row.tier-red { border-left: 3px solid #f44336; }
.progress-row.tier-purple { border-left: 3px solid #9c27b0; }
.progress-row.tier-yellow { border-left: 3px solid #ffeb3b; }
.progress-row.tier-orange { border-left: 3px solid #ff9800; }
.progress-row.tier-pink { border-left: 3px solid #e91e8c; }
.progress-slot .progress-row .row-label {
  width: 18px;
  color: #666;
  font-size: 11px;
}
.progress-slot .progress-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  cursor: pointer;
}
.progress-slot .progress-row .info { flex: 1; }
.progress-slot .progress-row .req { line-height: 1.5; }
.progress-slot .progress-row .req.req-three { display: flex; flex-direction: column; gap: 2px; }
.progress-slot .progress-row .req .req-line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress-slot-empty .slot-placeholder {
  color: #666;
  font-size: 12px;
  padding: 8px 0;
}
.progress-item.done { opacity: 0.6; }
.progress-item.done .req { text-decoration: line-through; color: #888; }
.progress-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  cursor: pointer;
}
.progress-item .info { flex: 1; }
.progress-item .tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  margin-right: 6px;
}
.progress-item .tag.cat-power { background: #5a7a4a; }
.progress-item .tag.cat-agi { background: #4a6a7a; }
.progress-item .tag.cat-int { background: #6a5a8a; }
.progress-item .tag.cat-gen { background: #7a6a4a; }
/* 传承等级对应 tag 背景色（E绿/D蓝/C深蓝/B红/A紫/S黄/SS黄/SSS粉） */
.progress-item .tag.tier-white { background: #e0e0e0; color: #333; }
.progress-item .tag.tier-green { background: #4caf50; color: #fff; }
.progress-item .tag.tier-blue { background: #2196f3; color: #fff; }
.progress-item .tag.tier-deepblue { background: #1565c0; color: #fff; }
.progress-item .tag.tier-red { background: #f44336; color: #fff; }
.progress-item .tag.tier-purple { background: #9c27b0; color: #fff; }
.progress-item .tag.tier-yellow { background: #ffeb3b; color: #333; }
.progress-item .tag.tier-orange { background: #ff9800; color: #fff; }
.progress-item .tag.tier-pink { background: #e91e8c; color: #fff; }
.progress-item .req { margin-top: 4px; font-size: 13px; }

/* 筛选 */
.filters {
  margin-bottom: 16px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.filters select {
  padding: 6px 12px;
  background: #2d3139;
  border: 1px solid #3d454e;
  color: #e0e0e0;
  border-radius: 4px;
}

/* 英雄推荐 */
.hero-rec {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.hero-card {
  background: #2d3139;
  border-radius: 8px;
  padding: 16px;
  border-left: 4px solid #3d7ea6;
}
.hero-card .name {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 8px;
}
.hero-card .score {
  color: #9ec78a;
  margin-bottom: 8px;
}
.hero-card .hero-card-boss {
  font-size: 13px;
  color: #c4a77d;
  margin-top: 6px;
}
.hero-card .hero-card-hero-name {
  color: #7eb8da;
  cursor: pointer;
  text-decoration: underline;
}
.hero-card .hero-card-hero-name:hover {
  color: #9ed0ea;
}
.hero-card .hero-card-actions {
  margin-top: 10px;
}
.hero-card .match-tasks {
  font-size: 12px;
  color: #a0a8b0;
  margin-top: 8px;
}
.hero-card .match-tasks span {
  display: inline-block;
  background: #3d454e;
  padding: 2px 8px;
  border-radius: 4px;
  margin: 2px 4px 2px 0;
}

/* 当前任务提示 */
.current-tasks {
  margin-bottom: 20px;
}
.current-tasks ul {
  margin: 0;
  padding-left: 20px;
}
.current-tasks li { margin: 6px 0; }

/* 表单 */
.form-row {
  margin-bottom: 12px;
}
.form-row label {
  display: inline-block;
  width: 80px;
  color: #a0a8b0;
}
.form-row input, .form-row select, .form-row textarea {
  padding: 6px 10px;
  background: #2d3139;
  border: 1px solid #3d454e;
  color: #e0e0e0;
  border-radius: 4px;
  width: 200px;
}
.form-row textarea {
  width: 400px;
  height: 80px;
  resize: vertical;
}
.btn {
  padding: 8px 16px;
  background: #3d7ea6;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
.btn:hover { background: #4d8eb6; }
.btn-secondary { background: #4a4d55; }
.btn-secondary:hover { background: #5a5d65; }
.btn-sm { padding: 4px 10px; font-size: 12px; }

/* 初始化按钮 */
.init-hint {
  background: #3d4a2a;
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 16px;
}
.init-hint .btn { margin-left: 8px; }

/* 统计 */
.stats {
  color: #a0a8b0;
  margin-bottom: 16px;
}

/* 英雄管理 - 矩阵表格 */
.hero-matrix-wrap {
  overflow-x: auto;
  margin-bottom: 16px;
}
.hero-matrix-section {
  margin-bottom: 24px;
}
.hero-matrix-section:last-child {
  margin-bottom: 0;
}
.hero-matrix-cat-title {
  margin: 0 0 8px 0;
  font-size: 15px;
  padding: 4px 0;
}
.hero-matrix-power .hero-matrix-cat-title { color: #f44336; }
.hero-matrix-agi .hero-matrix-cat-title { color: #4caf50; }
.hero-matrix-int .hero-matrix-cat-title { color: #2196f3; }
.hero-matrix-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 13px;
}
.hero-matrix-table th,
.hero-matrix-table td {
  border: 1px solid #3d454e;
  padding: 6px 10px;
  text-align: center;
}
.hero-matrix-table thead th {
  background: #5c3d35;
  color: #fff;
  font-weight: normal;
}
.hero-matrix-table .hero-matrix-col-hero {
  min-width: 70px;
}
.hero-matrix-power .hero-matrix-table .hero-matrix-col-hero {
  background: #5c3535 !important;
}
.hero-matrix-agi .hero-matrix-table .hero-matrix-col-hero {
  background: #354a35 !important;
}
.hero-matrix-int .hero-matrix-table .hero-matrix-col-hero {
  background: #353d5c !important;
}
.hero-matrix-table .hero-matrix-faction {
  background: #4a6b4a !important;
  color: #fff;
}
.hero-matrix-table .hero-matrix-race {
  background: #e8ddd5;
  color: #333;
  font-weight: 500;
  text-align: center;
}
.hero-matrix-table .hero-matrix-moral {
  min-width: 48px;
  font-size: 12px;
}
.hero-matrix-table .hero-matrix-moral.moral-good {
  background: #d4846a;
  color: #1a1a1a;
}
.hero-matrix-table .hero-matrix-moral.moral-evil {
  background: #3d4a6a;
  color: #fff;
}
.hero-matrix-table .hero-matrix-moral.moral-ambig {
  background: #6b8e6b;
  color: #fff;
}
.hero-matrix-table .hero-matrix-cell {
  background: #2d3139;
  min-width: 70px;
}
.hero-matrix-table .hero-matrix-cell.moral-good {
  background: #3d2d28;
}
.hero-matrix-table .hero-matrix-cell.moral-evil {
  background: #252d3d;
}
.hero-matrix-table .hero-matrix-cell.moral-ambig {
  background: #2d3d2d;
}
.hero-matrix-table .hero-matrix-name {
  cursor: pointer;
  display: inline;
  padding: 1px 3px;
  border-radius: 4px;
}
.hero-matrix-table .hero-matrix-name:hover {
  background: #3d7ea6;
  color: #fff;
}
.hero-matrix-table .hero-matrix-name.hero-female {
  color: #f44336;
}
.hero-matrix-table .hero-matrix-name.hero-female:hover {
  color: #fff;
}
.hero-matrix-table .hero-matrix-name.hero-variable {
  color: #2196f3;
}
.hero-matrix-table .hero-matrix-name.hero-variable:hover {
  color: #fff;
}
.hero-matrix-cell .hero-equip-btn {
  margin-left: 4px;
  font-size: 11px;
  color: #7eb8da;
  cursor: pointer;
}
.hero-matrix-cell .hero-equip-btn:hover {
  text-decoration: underline;
}

/* 英雄配装弹窗 */
.hero-equip-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-equip-modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
}
.hero-equip-modal-content {
  position: relative;
  background: #252830;
  border-radius: 8px;
  width: 90%;
  max-width: 640px;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
  border: 1px solid #3d454e;
}
.hero-equip-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid #3d454e;
  background: #2d3139;
}
.hero-equip-modal-header h3 {
  margin: 0;
  font-size: 16px;
  color: #fff;
}
.hero-equip-modal-close {
  background: none;
  border: none;
  color: #a0a8b0;
  font-size: 24px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
.hero-equip-modal-close:hover {
  color: #fff;
}
.hero-equip-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}
.hero-equip-slots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.hero-equip-slot-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-equip-slot-row label {
  width: 64px;
  color: #a0a8b0;
  font-size: 13px;
  flex-shrink: 0;
}
.hero-equip-slot-row select {
  flex: 1;
  padding: 6px 10px;
  background: #2d3139;
  border: 1px solid #3d454e;
  color: #e0e0e0;
  border-radius: 4px;
  font-size: 13px;
}
.hero-equip-select-wrap {
  flex: 1;
  position: relative;
}
.hero-equip-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: #2d3139;
  border: 1px solid #3d454e;
  color: #e0e0e0;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  min-height: 32px;
}
.hero-equip-select-trigger:hover {
  border-color: #4d5560;
}
.hero-equip-select-value {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hero-equip-select-value.tier-white { color: #e0e0e0; }
.hero-equip-select-value.tier-green { color: #4caf50; }
.hero-equip-select-value.tier-blue { color: #2196f3; }
.hero-equip-select-value.tier-deepblue { color: #42a5f5; }
.hero-equip-select-value.tier-red { color: #f44336; }
.hero-equip-select-value.tier-yellow { color: #ffeb3b; }
.hero-equip-select-value.tier-orange { color: #ff9800; }
.hero-equip-select-value.tier-pink { color: #e91e8c; }
.hero-equip-select-arrow {
  color: #888;
  margin-left: 6px;
}
.hero-equip-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 2px;
  background: #2d3139;
  border: 1px solid #3d454e;
  border-radius: 4px;
  z-index: 10;
  display: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.hero-equip-dropdown .hero-equip-search-input {
  width: 100%;
  padding: 6px 10px;
  background: #1e2128;
  border: none;
  border-bottom: 1px solid #3d454e;
  color: #e0e0e0;
  font-size: 13px;
  box-sizing: border-box;
  border-radius: 4px 4px 0 0;
}
.hero-equip-dropdown .hero-equip-opt-list {
  max-height: 180px;
  overflow-y: auto;
  padding: 4px 0;
}
.hero-equip-dropdown .hero-equip-opt {
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
}
.hero-equip-dropdown .hero-equip-opt:hover {
  background: #3d454e;
}
.hero-equip-dropdown .hero-equip-opt-clear {
  color: #888;
  border-bottom: 1px solid #3d454e;
}
.hero-equip-opt-name.tier-white { color: #e0e0e0; }
.hero-equip-opt-name.tier-green { color: #4caf50; }
.hero-equip-opt-name.tier-blue { color: #2196f3; }
.hero-equip-opt-name.tier-deepblue { color: #42a5f5; }
.hero-equip-opt-name.tier-red { color: #f44336; }
.hero-equip-opt-name.tier-yellow { color: #ffeb3b; }
.hero-equip-opt-name.tier-orange { color: #ff9800; }
.hero-equip-opt-name.tier-purple { color: #9c27b0; }
.hero-equip-opt-name.tier-pink { color: #e91e8c; }
.hero-equip-opt-q { color: #888; font-size: 12px; }
.hero-equip-actions {
  margin-bottom: 16px;
}
.hero-equip-materials h4 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #9ec78a;
}
.hero-equip-materials-list {
  background: #1e2128;
  border-radius: 6px;
  padding: 12px;
  max-height: 280px;
  overflow-y: auto;
  font-size: 13px;
}
.hero-equip-materials-list .material-cols {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-equip-materials-list .material-col {
  flex: 1;
  min-width: 200px;
}
.hero-equip-materials-list .material-col-title {
  font-size: 12px;
  color: #9ec78a;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #3d454e;
}
.hero-equip-materials-list .material-col-right .material-col-title {
  color: #7eb8da;
}
.hero-equip-materials-list .material-item {
  padding: 6px 10px;
  margin-bottom: 6px;
  border-radius: 4px;
  border-left: 3px solid;
  background: #2d3139;
  color: #b0b8c0;
}
.hero-equip-materials-list .material-item .material-name.tier-white { color: #e0e0e0; }
.hero-equip-materials-list .material-item .material-name.tier-green { color: #4caf50; }
.hero-equip-materials-list .material-item .material-name.tier-blue { color: #2196f3; }
.hero-equip-materials-list .material-item .material-name.tier-deepblue { color: #42a5f5; }
.hero-equip-materials-list .material-item .material-name.tier-red { color: #f44336; }
.hero-equip-materials-list .material-item .material-name.tier-yellow { color: #ffeb3b; }
.hero-equip-materials-list .material-item .material-name.tier-orange { color: #ff9800; }
.hero-equip-materials-list .material-item .material-name.tier-purple { color: #9c27b0; }
.hero-equip-materials-list .material-item .material-name.tier-pink { color: #e91e8c; }
.hero-equip-materials-list .material-item .material-acquire {
  display: block;
  font-size: 11px;
  color: #7eb8da;
  margin-top: 2px;
}
.hero-equip-materials-list .material-item.tier-white { border-left-color: #e0e0e0; }
.hero-equip-materials-list .material-item.tier-green { border-left-color: #4caf50; }
.hero-equip-materials-list .material-item.tier-blue { border-left-color: #2196f3; }
.hero-equip-materials-list .material-item.tier-deepblue { border-left-color: #1565c0; }
.hero-equip-materials-list .material-item.tier-red { border-left-color: #f44336; }
.hero-equip-materials-list .material-item.tier-yellow { border-left-color: #ffeb3b; }
.hero-equip-materials-list .material-item.tier-orange { border-left-color: #ff9800; }
.hero-equip-materials-list .material-item.tier-pink { border-left-color: #e91e8c; }
.hero-equip-materials-list .material-empty {
  color: #666;
}

/* 装备合成（思维导图+品质分级） */
.equip-shop-wrap {
  margin-top: 16px;
}
.equip-search-bar {
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.equip-search-input {
  width: 100%;
  max-width: 400px;
  padding: 8px 12px;
  border: 1px solid #3d454e;
  border-radius: 6px;
  background: #1e2128;
  color: #e0e0e0;
  font-size: 14px;
}
.equip-search-input:focus {
  outline: none;
  border-color: #3d7ea6;
}
.equip-search-input::placeholder {
  color: #666;
}
.equip-search-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.equip-search-label {
  font-size: 12px;
  color: #888;
  flex-shrink: 0;
}
.equip-tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.equip-tag-btn {
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid #3d454e;
  background: #2d3139;
  color: #a0a8b0;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.equip-tag-btn:hover {
  background: #3d454e;
  color: #fff;
}
.equip-tag-btn.active {
  border-color: #3d7ea6;
  background: #3d7ea6;
  color: #fff;
}
/* 装备品质颜色：E绿/D蓝/C深蓝/B红/A紫/S黄/SS黄/SSS粉 */
.equip-tag-btn.quality-e.active { background: #4caf50; border-color: #4caf50; }
.equip-tag-btn.quality-d.active { background: #2196f3; border-color: #2196f3; }
.equip-tag-btn.quality-c.active { background: #1565c0; border-color: #1565c0; }
.equip-tag-btn.quality-b.active { background: #f44336; border-color: #f44336; }
.equip-tag-btn.quality-a.active { background: #9c27b0; border-color: #9c27b0; }
.equip-tag-btn.quality-s.active { background: #ffeb3b; border-color: #ffeb3b; color: #333; }
.equip-tag-btn.quality-ss.active { background: #ffeb3b; border-color: #ffeb3b; color: #333; }
.equip-tag-btn.quality-sss.active { background: #e91e8c; border-color: #e91e8c; }
.equip-tag-btn.equip-attr-tag.active {
  background: #5a7a4a;
  border-color: #5a7a4a;
}
.equip-shop-main {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.equip-shop-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex-shrink: 0;
  max-height: 70vh;
  overflow-y: auto;
}
.equip-quality-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.equip-quality-label {
  font-size: 12px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 4px;
  width: fit-content;
}
/* 装备品质颜色：E绿/D蓝/C深蓝/B红/A紫/S黄/SS黄/SSS粉 */
.equip-quality-label.quality-e { background: #4caf50; color: #fff; }
.equip-quality-label.quality-d { background: #2196f3; color: #fff; }
.equip-quality-label.quality-c { background: #1565c0; color: #fff; }
.equip-quality-label.quality-b { background: #f44336; color: #fff; }
.equip-quality-label.quality-a { background: #9c27b0; color: #fff; }
.equip-quality-label.quality-s { background: #ffeb3b; color: #333; }
.equip-quality-label.quality-ss { background: #ffeb3b; color: #333; }
.equip-quality-label.quality-sss { background: #e91e8c; color: #fff; }
/* 装备等级对应传承 tier 颜色（与传承相同） */
.equip-quality-label.tier-white { background: #e0e0e0; color: #333; }
.equip-quality-label.tier-green { background: #4caf50; color: #fff; }
.equip-quality-label.tier-blue { background: #2196f3; color: #fff; }
.equip-quality-label.tier-deepblue { background: #1565c0; color: #fff; }
.equip-quality-label.tier-red { background: #f44336; color: #fff; }
.equip-quality-label.tier-purple { background: #9c27b0; color: #fff; }
.equip-quality-label.tier-yellow { background: #ffeb3b; color: #333; }
.equip-quality-label.tier-orange { background: #ff9800; color: #fff; }
.equip-quality-label.tier-pink { background: #e91e8c; color: #fff; }
.equip-quality-grid {
  display: grid;
  grid-template-columns: repeat(4, 170px);
  gap: 8px;
}
.equip-item-card {
  width: 170px;
  min-height: 80px;
  background: linear-gradient(145deg, #2a2e36 0%, #1e2128 100%);
  border: 2px solid #3d454e;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #c4a77d;
  font-size: 11px;
  text-align: center;
  padding: 6px 4px;
  word-break: break-all;
  overflow: hidden;
}
.equip-item-card .equip-card-name {
  font-weight: bold;
  color: #e8d4a0;
  margin-bottom: 4px;
  line-height: 1.2;
  width: 100%;
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}
.equip-card-icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
  margin-bottom: 4px;
}
.equip-attr-icon {
  display: inline-block;
  padding: 1px 4px;
  font-size: 9px;
  color: #9ec78a;
  background: rgba(94, 199, 138, 0.2);
  border-radius: 3px;
  border: 1px solid rgba(94, 199, 138, 0.4);
}
.equip-item-card .equip-card-acquire {
  font-size: 9px;
  color: #7eb8da;
  line-height: 1.2;
}
.equip-item-card:hover {
  border-color: #c4a77d;
  box-shadow: 0 0 12px rgba(196, 167, 125, 0.3);
  transform: scale(1.05);
}
.equip-item-card.active {
  border-color: #c4a77d;
  background: linear-gradient(145deg, #3a3e46 0%, #2a2e36 100%);
}
/* 装备品质颜色：E绿/D蓝/C深蓝/B红/A紫/S黄/SS黄/SSS粉 */
.equip-item-card.quality-e { border-left: 3px solid #4caf50; }
.equip-item-card.quality-d { border-left: 3px solid #2196f3; }
.equip-item-card.quality-c { border-left: 3px solid #1565c0; }
.equip-item-card.quality-b { border-left: 3px solid #f44336; }
.equip-item-card.quality-a { border-left: 3px solid #9c27b0; }
.equip-item-card.quality-s { border-left: 3px solid #ffeb3b; }
.equip-item-card.quality-ss { border-left: 3px solid #ffeb3b; }
.equip-item-card.quality-sss { border-left: 3px solid #e91e8c; }
/* 装备卡片等级对应传承 tier 颜色（与传承相同：白绿蓝深蓝红紫黄粉） */
.equip-item-card.tier-white { border-left: 3px solid #e0e0e0; }
.equip-item-card.tier-green { border-left: 3px solid #4caf50; }
.equip-item-card.tier-blue { border-left: 3px solid #2196f3; }
.equip-item-card.tier-deepblue { border-left: 3px solid #1565c0; }
.equip-item-card.tier-red { border-left: 3px solid #f44336; }
.equip-item-card.tier-purple { border-left: 3px solid #9c27b0; }
.equip-item-card.tier-yellow { border-left: 3px solid #ffeb3b; }
.equip-item-card.tier-orange { border-left: 3px solid #ff9800; }
.equip-item-card.tier-pink { border-left: 3px solid #e91e8c; }
.equip-shop-detail {
  flex: 1;
  min-width: 280px;
  background: #1e2128;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #3d454e;
}
.equip-detail-placeholder {
  color: #666;
  text-align: center;
  padding: 40px 20px;
}
.equip-synthesis-path {
  min-height: 200px;
  max-height: 65vh;
  overflow-y: auto;
}
.equip-mindmap-ctrl {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.equip-mindmap-ctrl select {
  padding: 4px 8px;
  background: #2d3139;
  border: 1px solid #3d454e;
  color: #e0e0e0;
  border-radius: 4px;
}
.equip-mindmap-chart {
  width: 100%;
  height: 480px;
  min-height: 320px;
}
/* 思维导图样式 */
.equip-mindmap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 16px 0;
}
.equip-mindmap-root {
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  max-width: 90%;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
  border: 2px solid;
}
/* 装备品质颜色：E绿/D蓝/C深蓝/B红/A紫/S黄/SS黄/SSS粉 */
.equip-mindmap-root.quality-e { background: #2a3a2a; border-color: #4caf50; color: #81c784; }
.equip-mindmap-root.quality-d { background: #2a2a3a; border-color: #2196f3; color: #64b5f6; }
.equip-mindmap-root.quality-c { background: #1a2a3a; border-color: #1565c0; color: #42a5f5; }
.equip-mindmap-root.quality-b { background: #3a2a2a; border-color: #f44336; color: #e57373; }
.equip-mindmap-root.quality-a { background: #2a1a2a; border-color: #9c27b0; color: #ba68c8; }
.equip-mindmap-root.quality-s { background: #3a3a2a; border-color: #ffeb3b; color: #ffeb3b; }
.equip-mindmap-root.quality-ss { background: #3a3a2a; border-color: #ffeb3b; color: #ffeb3b; }
.equip-mindmap-root.quality-sss { background: #3a1a2a; border-color: #e91e8c; color: #f06292; }
.equip-mindmap-branches {
  display: flex;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
}
.equip-mindmap-branch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.equip-mindmap-node-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.equip-mindmap-children {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}
.equip-mindmap-more {
  font-size: 11px;
  color: #888;
  padding: 4px 8px;
}
.equip-mindmap-tree .equip-mindmap-branch {
  align-items: center;
}
.equip-mindmap-connector {
  width: 2px;
  height: 20px;
  background: linear-gradient(to bottom, #c4a77d, #6b5a45);
  border-radius: 1px;
  flex-shrink: 0;
}
.equip-mindmap-node {
  padding: 10px 16px;
  background: linear-gradient(145deg, #2a2e36 0%, #1e2128 100%);
  border: 2px solid #4d5a6a;
  border-radius: 6px;
  font-size: 12px;
  color: #9ec78a;
  text-align: center;
  min-width: 80px;
  max-width: 140px;
  line-height: 1.3;
}
.equip-mindmap-node.equip-path-material-clickable {
  cursor: pointer;
}
.equip-mindmap-node.equip-path-material-clickable:hover {
  border-color: #c4a77d;
  box-shadow: 0 0 8px rgba(196, 167, 125, 0.3);
}
/* 装备品质颜色：E绿/D蓝/C深蓝/B红/A紫/S黄/SS黄/SSS粉 */
.equip-mindmap-node.quality-e { border-left: 3px solid #4caf50; }
.equip-mindmap-node.quality-d { border-left: 3px solid #2196f3; }
.equip-mindmap-node.quality-c { border-left: 3px solid #1565c0; }
.equip-mindmap-node.quality-b { border-left: 3px solid #f44336; }
.equip-mindmap-node.quality-a { border-left: 3px solid #9c27b0; }
.equip-mindmap-node.quality-s { border-left: 3px solid #ffeb3b; }
.equip-mindmap-node.quality-ss { border-left: 3px solid #ffeb3b; }
.equip-mindmap-node.quality-sss { border-left: 3px solid #e91e8c; }
.equip-detail-name {
  font-size: 16px;
  color: #fff;
  margin-bottom: 8px;
}
.equip-detail-desc {
  font-size: 12px;
  color: #a0a8b0;
  margin-top: 8px;
}
.equip-detail-images {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}
.equip-detail-images-label {
  width: 100%;
  font-size: 12px;
  color: #c4a77d;
  margin-bottom: 4px;
}
.equip-detail-img {
  max-width: 100%;
  max-height: 320px;
  border: 1px solid #3d454e;
  border-radius: 4px;
  cursor: pointer;
}
.equip-detail-img:hover {
  border-color: #c4a77d;
  box-shadow: 0 0 8px rgba(196, 167, 125, 0.3);
}