.mod-page-head{
  min-height:112px;
  height:auto;
  margin:0 0 14px 0;border-radius:10px;
  padding:18px 32px;
  border-bottom:1px solid #293541;
  background:radial-gradient(circle at 83% 15%,rgba(79,166,255,.14),transparent 28%),linear-gradient(100deg,#101a24,#0b1117);
}
.mod-page-head h1{font-size:24px;color:#eef4f8}
.mod-page-head p{margin-top:5px}
.mod-support-panel{max-width:1500px;margin:0 auto;padding:0 26px 22px;overflow:visible}
.mod-support-title{min-height:92px;display:flex;align-items:center;gap:14px;border-bottom:1px solid #2a3641}
.mod-support-icon{width:52px;height:52px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(145deg,#173454,#10243b);border:1px solid #315b80;color:#75b9ff;font-size:25px}
.mod-support-title h2{margin:0 0 5px;font-size:23px;color:#f1f5f8}
.mod-support-title p{margin:0;color:#8e9ca8;font-size:12px}
.mod-support-toggle-row{
  min-height:84px;
  margin:18px 0;
  padding:15px 18px;
  display:grid;
  grid-template-columns:auto auto 1fr;
  align-items:center;
  gap:13px;
  border:1px solid #2e4559;
  border-radius:10px;
  background:linear-gradient(100deg,rgba(38,91,139,.18),rgba(17,28,38,.72));
  cursor:pointer;
}
.mod-support-toggle-row>input{position:absolute;opacity:0;pointer-events:none}
.mod-switch{position:relative;width:52px;height:29px;border-radius:999px;background:#374552;border:1px solid #4c5a66;transition:.18s}
.mod-switch::after{content:"";position:absolute;left:3px;top:3px;width:21px;height:21px;border-radius:50%;background:#d9e1e7;box-shadow:0 2px 6px rgba(0,0,0,.34);transition:.18s}
.mod-support-toggle-row>input:checked+.mod-switch{background:#276ec0;border-color:#4fa6ff;box-shadow:0 0 0 3px rgba(79,166,255,.09)}
.mod-support-toggle-row>input:checked+.mod-switch::after{transform:translateX(23px);background:white}
.mod-toggle-copy{display:grid;gap:3px}
.mod-toggle-copy b{font-size:16px;color:#eef4f8}
.mod-toggle-copy small{color:#8c9aa6;font-size:11px}
.mod-support-picker{padding-top:3px}
.mod-support-picker-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:12px}
.mod-support-picker-head>div{display:grid;gap:3px}
.mod-support-picker-head b{font-size:16px;color:#eaf0f4}
.mod-support-picker-head small{color:#7f8d99;font-size:11px}
.mod-support-picker-head>span{padding:5px 9px;border:1px solid #344655;border-radius:999px;background:#0d151c;color:#9eb0be;font-size:10px}
.mod-support-grid{display:grid;grid-template-columns:repeat(6,minmax(128px,1fr));gap:11px;min-height:190px}
.mod-support-card{--support-accent:#6297d2;position:relative;min-width:0;height:196px;padding:0;overflow:hidden;border:1px solid #35434f;border-radius:9px;background:linear-gradient(155deg,#17222c,#0b1218 72%);color:#e9eff3;text-align:left;transition:.16s ease}
.mod-support-card:hover{transform:translateY(-2px);border-color:var(--support-accent);box-shadow:0 8px 20px rgba(0,0,0,.25)}
.mod-support-card.selected{border-color:#4fa6ff;box-shadow:0 0 0 2px rgba(79,166,255,.17),0 8px 22px rgba(0,0,0,.3)}
.mod-support-card.selected::after{content:"✓";position:absolute;right:8px;top:8px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#2c82df;color:#fff;font-weight:800;z-index:6;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.mod-support-portrait{position:relative;height:132px;overflow:hidden;border-bottom:1px solid #2b3741;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--support-accent) 18%,transparent),transparent 48%),#0c141b}
.mod-support-portrait img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);max-width:92%;height:96%;object-fit:contain;object-position:center bottom;image-rendering:pixelated;filter:drop-shadow(0 5px 6px rgba(0,0,0,.5));z-index:2}
.mod-support-fallback{position:absolute;inset:0;display:grid;place-items:center;color:color-mix(in srgb,var(--support-accent) 72%,#dce8f0);font-size:32px;font-weight:800}
.mod-support-card.portrait-ready .mod-support-fallback{display:none}
.mod-support-card-copy{height:64px;padding:7px 9px;display:grid;align-content:center;gap:2px;background:linear-gradient(90deg,#111a22,#0c1319)}
.mod-support-card-copy>div{display:flex;align-items:center;justify-content:space-between;gap:6px}
.mod-support-card-copy b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#f2f5f7}
.mod-support-card-copy em{font-style:normal;color:#f0c16b;font-size:10px}
.mod-support-card-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8595a2;font-size:9px}
.mod-support-hint{margin-top:14px;padding:10px 12px;border:1px solid #2c4356;border-radius:7px;background:#0e1922;color:#8fa5b6;font-size:11px;line-height:1.55}
.mod-support-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px;padding-top:13px;border-top:1px solid #293541}
.mod-support-status{min-width:0;color:#83929e;font-size:11px;line-height:1.5}
.mod-support-status.ok{color:#77d6ab}.mod-support-status.warn{color:#e6b07d}
.mod-support-footer>.primary{min-width:118px;padding:10px 22px;border-radius:6px;font-weight:700}
.mod-support-footer>.primary:disabled{opacity:.48;cursor:not-allowed}
.mod-boss-panel{margin-top:16px}
.mod-boss-level-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:12px 0;padding:13px 16px;border:1px solid #2e4559;border-radius:8px;background:#0e1821}
.mod-boss-level-row label{display:grid;gap:3px}.mod-boss-level-row label b{color:#eef4f8;font-size:14px}.mod-boss-level-row label small{color:#8595a2;font-size:11px}
.mod-boss-level-row select{min-width:180px;padding:9px 11px;border:1px solid #3a5265;border-radius:6px;background:#101c26;color:#e9f2f8}
@media(max-width:650px){.mod-boss-level-row{align-items:stretch;flex-direction:column}.mod-boss-level-row select{width:100%}}
@media(max-width:1250px){.mod-support-grid{grid-template-columns:repeat(4,minmax(128px,1fr))}}
@media(max-width:900px){.mod-support-grid{grid-template-columns:repeat(3,minmax(120px,1fr))}.mod-support-panel{padding:0 16px 18px}}
@media(max-width:650px){.mod-support-grid{grid-template-columns:repeat(2,minmax(110px,1fr))}.mod-support-footer{align-items:stretch;flex-direction:column}.mod-support-footer>.primary{width:100%}}
.mod-support-card.character-theme-0{--support-accent:#6297d2}
.mod-support-card.character-theme-1{--support-accent:#d36a78}
.mod-support-card.character-theme-2{--support-accent:#6db09a}
.mod-support-card.character-theme-3{--support-accent:#9d7bd8}
.mod-support-card.character-theme-4{--support-accent:#d5a45b}
.mod-support-card.character-theme-5{--support-accent:#7b8bd8}
.mod-support-card.character-theme-6{--support-accent:#62b8d1}
.mod-support-card.character-theme-7{--support-accent:#b56fc0}


/* ==================== 魔改页面移动端排版与文字切边修复 ==================== */
@media (max-width: 768px) {
  .mod-page-head {
    min-height: auto !important;
    margin: 0 0 12px 0 !important;
    padding: 12px 14px !important;
    border-radius: 8px !important;
  }
  .mod-page-head h1 {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
  .mod-page-head p {
    font-size: 12px !important;
    margin-top: 4px !important;
  }
  .mod-support-panel {
    padding: 12px 12px 16px !important;
    border-radius: 10px !important;
  }
  .mod-support-title {
    min-height: auto !important;
    padding: 8px 0 !important;
    gap: 10px !important;
  }
  .mod-support-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    font-size: 20px !important;
  }
  .mod-support-title h2 {
    font-size: 18px !important;
    margin-bottom: 2px !important;
  }
  .mod-support-title p {
    font-size: 11px !important;
  }
  .mod-support-toggle-row {
    min-height: auto !important;
    padding: 10px 12px !important;
    margin: 10px 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
  }
  .mod-toggle-copy {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  .mod-toggle-copy b {
    font-size: 14px !important;
  }
  .mod-toggle-copy small {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }
  .mod-switch {
    flex-shrink: 0 !important;
  }
  .mod-boss-level-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 10px 12px !important;
  }
  .mod-boss-level-row select {
    width: 100% !important;
    min-width: 0 !important;
  }
  .mod-support-hint {
    font-size: 11px !important;
    line-height: 1.5 !important;
    padding: 8px 10px !important;
    margin-top: 10px !important;
  }
  .mod-support-status {
    word-break: break-all !important;
    line-height: 1.5 !important;
    font-size: 11px !important;
  }
  .mod-support-footer {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
  }
  .mod-support-footer button {
    width: 100% !important;
    height: 38px !important;
  }
}


/* ==================== 魔改文字可读性与高清晰度排版提升 ==================== */
.mod-page-head {
  margin: 0 0 14px 0 !important;
  padding: 16px 20px !important;
  border-radius: 10px !important;
  min-height: auto !important;
}
.mod-page-head h1 {
  font-size: 24px !important;
  color: #ffffff !important;
  margin: 2px 0 6px !important;
  letter-spacing: 0.5px !important;
}
.mod-page-head p {
  font-size: 13px !important;
  color: #a4b6c7 !important;
  margin: 0 !important;
}

.mod-support-panel {
  padding: 16px 18px !important;
  border-radius: 12px !important;
  margin-bottom: 14px !important;
}

.mod-support-title {
  min-height: auto !important;
  padding: 8px 0 12px !important;
  gap: 12px !important;
}
.mod-support-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  color: #60a5fa !important;
  flex-shrink: 0 !important;
}
.mod-support-title h2 {
  font-size: 19px !important;
  color: #f8fafc !important;
  margin: 0 0 4px !important;
}
.mod-support-title p {
  font-size: 12px !important;
  color: #94a3b8 !important;
  line-height: 1.4 !important;
}

.mod-support-toggle-row {
  min-height: auto !important;
  padding: 12px 14px !important;
  margin: 10px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(30, 58, 88, 0.25), rgba(15, 23, 33, 0.75)) !important;
  border: 1px solid #2d3f52 !important;
}
.mod-toggle-copy {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
.mod-toggle-copy b {
  font-size: 15px !important;
  color: #ffffff !important;
}
.mod-toggle-copy small {
  font-size: 12px !important;
  color: #94a3b8 !important;
  line-height: 1.5 !important;
}
.mod-switch {
  flex-shrink: 0 !important;
}

.mod-support-picker-head {
  margin: 12px 0 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}
.mod-support-picker-head b {
  font-size: 15px !important;
  color: #f1f5f9 !important;
}
.mod-support-picker-head small {
  font-size: 11px !important;
  color: #8c9ea0 !important;
}
#supportSoldierSelectionLabel {
  font-size: 11px !important;
  padding: 3px 8px !important;
}

.mod-support-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 10px !important;
  min-height: auto !important;
}

.mod-support-card {
  height: 150px !important;
  border-radius: 10px !important;
}
.mod-support-portrait {
  height: 94px !important;
}
.mod-support-card-copy {
  height: 54px !important;
  padding: 6px 8px !important;
}

.mod-boss-level-row {
  padding: 12px 14px !important;
  border-radius: 10px !important;
  gap: 12px !important;
}
.mod-boss-level-row label b {
  font-size: 15px !important;
  color: #ffffff !important;
}
.mod-boss-level-row label small {
  font-size: 12px !important;
  color: #94a3b8 !important;
}

.mod-support-hint {
  font-size: 11px !important;
  color: #8b9ea0 !important;
  line-height: 1.5 !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  background: #0d151d !important;
  border: 1px solid #243444 !important;
}

.mod-support-footer {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
  padding-top: 12px !important;
}
.mod-support-status {
  font-size: 12px !important;
  line-height: 1.5 !important;
  word-break: break-all !important;
}
.mod-support-footer button {
  width: 100% !important;
  height: 40px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
}