* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; background: #eef1f7; color: #2b2f38; min-height: 100vh; }

.app-header { background: linear-gradient(135deg, #243b6b 0%, #1f5fa8 60%, #2a7fc0 100%); padding: 20px 30px; border-bottom: 3px solid #e0b84c; box-shadow: 0 2px 8px rgba(0,0,0,0.12); }
.app-header h1 { font-size: 24px; color: #ffe9a8; letter-spacing: 2px; }
.app-header .subtitle { font-size: 13px; color: #cdd9ec; margin-top: 4px; }

.main-container { display: flex; min-height: calc(100vh - 80px); }

/* Sidebar */
.sidebar { width: 280px; background: #ffffff; border-right: 1px solid #e2e7f0; padding: 16px; overflow-y: auto; flex-shrink: 0; }
.sidebar h3 { color: #b8801a; font-size: 14px; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid #e8ebf2; }
.filter-group { margin-bottom: 20px; }
.filter-group label { display: block; font-size: 12px; color: #6a7180; margin-bottom: 6px; }
.filter-group select { width: 100%; padding: 8px; background: #f7f9fd; color: #2b2f38; border: 1px solid #d6dde9; border-radius: 6px; font-size: 13px; }

.stats-box { background: #f4f7fc; border: 1px solid #e2e7f0; border-radius: 8px; padding: 12px; margin-bottom: 16px; }
.stats-box .stat { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
.stats-box .stat-value { color: #c0392b; font-weight: bold; }

/* Content */
.content { flex: 1; padding: 20px; overflow-y: auto; }

/* 配置码导入/导出 */
.config-io { background: #ffffff; border: 1px solid #e2e7f0; border-radius: 12px; padding: 14px 18px; margin-bottom: 20px; box-shadow: 0 1px 4px rgba(40,60,100,0.05); }
.config-io.tool-collapse { padding: 12px 16px; }
.config-io .tool-head { color: #5a6678; font-size: 14px; }
.config-io.collapsed { background: #f7f9fc; box-shadow: none; }
.btn-mini { padding: 7px 14px; font-size: 13px; border: 1px solid #c8d2e0; background: #f4f7fc; color: #3a4150; border-radius: 6px; cursor: pointer; margin-right: 8px; transition: all 0.15s; }
.btn-mini:hover { border-color: #2a7fc0; color: #1f5fa8; }
.btn-mini.primary { background: #2a7fc0; color: #fff; border-color: #2a7fc0; }
.btn-mini.primary:hover { background: #1f5fa8; color: #fff; }
.config-io-hint { font-size: 12px; color: #8a91a0; }
#configIoBox { margin-top: 12px; }
#configCode { width: 100%; height: 64px; padding: 10px; border: 1px solid #d6dde9; border-radius: 8px; font-size: 12px; font-family: monospace; resize: vertical; background: #f7f9fd; color: #2b2f38; }
.config-io-actions { margin-top: 8px; display: flex; align-items: center; gap: 10px; }
.config-msg { font-size: 12px; color: #2e8b40; }
.profile-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.profile-row:last-child { margin-bottom: 0; }
.profile-label { font-size: 13px; color: #243b6b; font-weight: bold; }
#profileSelect { padding: 6px 8px; border: 1px solid #d6dde9; border-radius: 6px; font-size: 13px; background: #fff; color: #2b2f38; max-width: 160px; }
.profile-input { padding: 6px 10px; border: 1px solid #d6dde9; border-radius: 6px; font-size: 13px; width: 120px; }

/* A: 已选武将吸附栏 */
.selected-bar { position: sticky; top: 0; z-index: 20; background: #fff8e8; border: 1px solid #e6cf8a; border-radius: 8px; padding: 8px 12px; margin-bottom: 16px; box-shadow: 0 2px 6px rgba(40,60,100,0.08); }
.selected-bar .sb-title { font-size: 13px; font-weight: bold; color: #8a5a08; margin-right: 4px; }
.sb-chip { display: inline-block; margin: 3px 4px; padding: 3px 8px; background: #fff; border: 1px solid #e0b84c; border-radius: 14px; font-size: 12px; color: #3a2a00; }
.sb-x { margin-left: 5px; color: #c0392b; cursor: pointer; font-weight: bold; }
.sb-clear { margin-left: 8px; font-size: 12px; color: #2a7fc0; cursor: pointer; text-decoration: underline; }
.sb-batch { margin-left: 8px; font-size: 12px; color: #8a5a08; white-space: nowrap; }
.sb-br { margin-left: 3px; width: 22px; height: 22px; padding: 0; font-size: 12px; border: 1px solid #e0b84c; background: #fff; color: #8a5a08; border-radius: 5px; cursor: pointer; transition: all .12s; }
.sb-br:hover { background: #e0b84c; color: #fff; }

/* F: 结果摘要 */
.results-summary { font-size: 13px; color: #56607a; background: #eef3fa; border: 1px solid #dce3ee; border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; }
.results-summary .sm-good { color: #2e8b40; }
.results-summary .sm-low { color: #c0392b; }

/* Input Section */
.input-section { background: #ffffff; border-radius: 12px; padding: 20px; margin-bottom: 20px; border: 1px solid #e2e7f0; box-shadow: 0 1px 4px rgba(40,60,100,0.05); }
.input-section h2 { font-size: 16px; color: #243b6b; margin-bottom: 14px; }
.step-hint { font-size: 12px; color: #8a91a0; font-weight: normal; margin-left: 6px; }

.search-box { width: 100%; padding: 10px 14px; background: #f7f9fd; color: #2b2f38; border: 1px solid #d6dde9; border-radius: 8px; font-size: 14px; margin-bottom: 14px; }
.search-box:focus { outline: none; border-color: #e0b84c; }
.search-box::placeholder { color: #9aa2b1; }

.hero-group, .tactic-group { margin-bottom: 16px; }
.hero-group:last-child, .tactic-group:last-child { margin-bottom: 0; }
.group-title { display: flex; align-items: center; font-size: 13px; font-weight: bold; color: #b8801a; margin-bottom: 8px; padding-left: 2px; }
.faction-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }
.group-count { font-size: 11px; color: #9aa2b1; font-weight: normal; margin-left: 6px; }

.hero-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.hero-card { position: relative; background: #f7f9fd; border: 1px solid #dde3ee; border-radius: 8px; padding: 10px; cursor: pointer; transition: all 0.2s; text-align: center; }
.hero-card:hover { border-color: #b9c4d8; transform: translateY(-1px); box-shadow: 0 2px 6px rgba(40,60,100,0.08); }
.hero-card.selected { border-color: #e0b84c; background: #fff8e8; box-shadow: 0 0 0 2px rgba(224,184,76,0.25); }
.hero-card.selected::before { content: "✓"; position: absolute; top: 4px; right: 6px; color: #c79a2a; font-size: 12px; font-weight: bold; }
.hero-card .hero-name { font-size: 13px; font-weight: bold; margin-bottom: 4px; color: #2b2f38; }
.hero-card .hero-faction { font-size: 11px; color: #8a91a0; }
.hero-card .red-select { margin-top: 6px; }
.hero-card .red-select select { width: 100%; padding: 4px; background: #ffffff; color: #2b2f38; border: 1px solid #d6dde9; border-radius: 4px; font-size: 12px; }
/* 红度点按按钮（替代下拉，一点即定） */
.hero-card .red-btns { display: flex; gap: 3px; margin-top: 6px; justify-content: center; }
.red-btn { flex: 1; padding: 6px 0; min-width: 0; background: #fff; color: #6b7785; border: 1px solid #d6dde9; border-radius: 4px; font-size: 13px; cursor: pointer; line-height: 1.2; }
.red-btn:hover { border-color: #e0b84c; }
.red-btn.active { background: #e0b84c; color: #fff; border-color: #d2a832; font-weight: 700; }

/* 默认红度控制条 */
.default-red-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; background: #fff8e8; border: 1px solid #f0dcae; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; }
.dr-label { font-weight: 700; color: #8a6d1a; font-size: 14px; }
.hero-search-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.hero-search-bar .hs-icon { font-size: 15px; }
.hero-search-input { flex: 1; min-width: 0; padding: 9px 12px; font-size: 14px; border: 1px solid #c8d2e0; border-radius: 8px; outline: none; transition: border-color .15s; }
.hero-search-input:focus { border-color: #2a7fc0; box-shadow: 0 0 0 3px rgba(42,127,192,0.12); }
.hs-clear { padding: 7px 12px; font-size: 13px; border: 1px solid #c8d2e0; background: #f4f7fc; color: #5a6678; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.hs-clear:hover { border-color: #2a7fc0; color: #1f5fa8; }
.batch-import { margin-bottom: 12px; }
.batch-ta { width: 100%; box-sizing: border-box; font-size: 13px; padding: 8px 10px; border: 1px solid #c8d2e0; border-radius: 8px; resize: vertical; font-family: inherit; line-height: 1.5; }
.batch-ta:focus { border-color: #2a7fc0; outline: none; }
.batch-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.batch-btn { padding: 7px 16px; font-size: 13px; font-weight: 600; border: none; background: #2a7fc0; color: #fff; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.batch-btn:hover { background: #1f5fa8; }
.batch-msg { font-size: 12.5px; color: #4a7a4e; }
.sgz-toast { position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 20px); background: #2c3a4f; color: #fff; padding: 11px 20px; border-radius: 22px; font-size: 14px; box-shadow: 0 4px 16px rgba(0,0,0,0.25); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 9999; max-width: 86vw; text-align: center; }
.sgz-toast.show { opacity: 1; transform: translate(-50%, 0); }
.dr-btns { display: inline-flex; gap: 4px; }
.dr-btn { padding: 5px 10px; background: #fff; color: #6b7785; border: 1px solid #d6dde9; border-radius: 6px; font-size: 13px; cursor: pointer; }
.dr-btn:hover { border-color: #e0b84c; }
.dr-btn.active { background: #d9534f; color: #fff; border-color: #c9302c; font-weight: 700; }
.dr-hint { font-size: 12px; color: #a08a5a; }

.tactic-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.tactic-chip { padding: 5px 10px; background: #f4f7fc; border: 1px solid #d6dde9; border-radius: 16px; font-size: 12px; cursor: pointer; transition: all 0.2s; color: #3a4150; }
.tactic-chip:hover { border-color: #b9c4d8; }
.tactic-hint { padding: 18px; text-align: center; color: #8a91a0; font-size: 13px; background: #f4f7fc; border: 1px dashed #c8d2e0; border-radius: 8px; }
.tactic-evt { margin-left: 3px; font-size: 10px; color: #a87212; opacity: 0.9; }

/* 传承来源武将选区 */
.source-box { margin-bottom: 14px; padding: 12px 14px; background: #f2f7ff; border: 1px solid #cfe0f5; border-radius: 10px; }
.source-title { font-size: 13px; color: #1f5fa8; font-weight: bold; margin-bottom: 10px; }
.source-hint { font-size: 12px; color: #8a91a0; font-weight: normal; }
.source-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.source-chip { padding: 5px 12px; background: #ffffff; border: 1px solid #b9c4d8; border-radius: 16px; font-size: 12px; cursor: pointer; transition: all 0.15s; color: #3a4150; }
.source-chip:hover { border-color: #2a7fc0; }
.source-chip.selected { background: #2a7fc0; color: #fff; border-color: #2a7fc0; }
.source-chip.selected::before { content: "✓ "; }
.tactic-chip.selected { border-color: #3a9d4e; background: #e4f6e9; color: #2e7d32; font-weight: bold; }

.btn-recommend { display: block; width: 100%; padding: 14px; margin-top: 16px; background: linear-gradient(135deg, #e0b84c, #c79320); color: #3a2a00; font-size: 16px; font-weight: bold; border: none; border-radius: 8px; cursor: pointer; letter-spacing: 2px; transition: all 0.2s; }
.btn-recommend:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(199,147,32,0.35); }

/* Results */
.results-section { margin-top: 20px; }
.results-section h2 { font-size: 16px; color: #243b6b; margin-bottom: 14px; }

.result-card { background: #ffffff; border: 1px solid #e2e7f0; border-radius: 12px; margin-bottom: 16px; overflow: hidden; transition: all 0.2s; box-shadow: 0 1px 4px rgba(40,60,100,0.05); }
.result-card:hover { border-color: #c8d2e0; box-shadow: 0 2px 10px rgba(40,60,100,0.1); }
.result-card.perfect { border-left: 5px solid #3a9d4e; }
.result-card.partial { border-left: 5px solid #e8920c; }
.result-card.lacking { border-left: 5px solid #d9534f; }

.result-header { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; cursor: pointer; flex-wrap: wrap; gap: 8px; }
.result-header:hover { background: #f7f9fd; }
.result-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.result-title .lineup-name { font-size: 15px; font-weight: bold; color: #1f2530; }
.result-title .tier-badge { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: bold; }
.tier-T0 { background: #e23b3b; color: #fff; }
.tier-T0\.5 { background: #ef6c2b; color: #fff; }
.tier-T1 { background: #f0a31e; color: #fff; }
.tier-T1\.5 { background: #e0b400; color: #3a2a00; }
.tier-T2 { background: #6fb52e; color: #fff; }
.tier-T2\.5 { background: #2fa088; color: #fff; }
.troop-badge { padding: 2px 8px; border-radius: 4px; font-size: 11px; background: #e8edf5; color: #56607a; }
.match-info { font-size: 13px; }
.match-info .match-good { color: #2e8b40; font-weight: bold; }
.match-info .match-warn { color: #d27d0a; font-weight: bold; }
.match-info .match-bad { color: #d9534f; font-weight: bold; }
.result-pos { flex-basis: 100%; font-size: 12.5px; color: #6b7480; line-height: 1.4; margin-top: 2px; }
.result-pos .rp-fear { margin-left: 12px; color: #c0561a; }

.result-body { padding: 0 18px 18px; display: none; }
.result-card.expanded .result-body { display: block; }

/* 卡片顶部战法冲突提示条 */
.conflict-banner { margin: 10px 0 4px; padding: 8px 12px; background: #fff3e0; border: 1px solid #f0c478; border-left: 4px solid #e8920c; border-radius: 6px; font-size: 12.5px; color: #8a5a08; line-height: 1.6; }
.conflict-banner b { color: #c0392b; }
.conflict-banner .cf-t { color: #a87212; font-size: 11.5px; }
.conflict-mark { margin-left: 6px; color: #e8920c; font-size: 14px; cursor: help; }

.config-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.config-table th { background: #eef3fa; color: #243b6b; padding: 8px 10px; text-align: left; border-bottom: 1px solid #dce3ee; white-space: nowrap; }
.config-table td { padding: 8px 10px; border-bottom: 1px solid #eef1f6; vertical-align: top; color: #2b2f38; }
.config-table tr:hover { background: #f7f9fd; }

.status-match { color: #2e8b40; }
.status-partial { color: #d27d0a; }
.status-missing { color: #d9534f; }

.tactic-tag { display: inline-block; padding: 2px 6px; margin: 1px; border-radius: 3px; font-size: 11px; }
.tactic-tag.owned { background: #e4f6e9; color: #2e7d32; border: 1px solid #b7e0c0; }
.tactic-tag.not-owned { background: #fdeaea; color: #c0392b; border: 1px solid #f3c4c4; }
.tactic-tag.shared { border-style: dashed; }
.shared-badge { margin-left: 4px; padding: 0 4px; border-radius: 3px; font-size: 10px; background: #fff0cc; color: #9a6f15; border: 1px solid #e6cf8a; cursor: help; }
.tactic-src { margin-left: 3px; font-size: 10px; color: #2a7fc0; opacity: 0.85; }
.tactic-tag.season { background: #ede9fb; color: #5b46b0; border: 1px solid #cfc4ee; }
.tactic-season-tag { margin-left: 4px; font-size: 10px; color: #7a68c0; }
.season-note { margin-top: 10px; font-size: 12px; color: #7a68c0; background: #f4f1fc; border: 1px dashed #cfc4ee; border-radius: 6px; padding: 8px 10px; }

.missing-list { margin-top: 10px; padding: 10px; background: #fdf2f2; border-radius: 6px; border: 1px solid #f3d0d0; }
.missing-list h4 { color: #c0392b; font-size: 13px; margin-bottom: 6px; }
.missing-list ul { list-style: none; }
.missing-list li { font-size: 12px; color: #a14a45; padding: 2px 0; }
.missing-list li::before { content: "• "; color: #d9534f; }

.detail-row { display: flex; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.detail-item { background: #f4f7fc; border: 1px solid #e2e7f0; padding: 8px 12px; border-radius: 6px; font-size: 12px; }
.detail-item .label { color: #8a91a0; margin-bottom: 2px; }
.detail-item .value { color: #2b2f38; font-weight: 500; }

.score-display { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.score-chip { padding: 4px 8px; border-radius: 4px; font-size: 11px; background: #eef3fa; border: 1px solid #dce3ee; }
.score-chip .area { color: #6a7180; }
.score-chip .score { color: #c0392b; font-weight: bold; }

.variant-count { padding: 2px 8px; border-radius: 4px; font-size: 11px; background: #e9eafb; color: #4b3fa0; border: 1px solid #c5c8ef; }
.variant-block { margin-top: 12px; padding: 12px; background: #f7f9fd; border: 1px solid #e2e7f0; border-radius: 8px; }
.variant-block:first-of-type { margin-top: 10px; }
.variant-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.variant-name { font-size: 13px; font-weight: bold; color: #8a5a08; padding: 2px 10px; background: #fff3d6; border-radius: 4px; border: 1px solid #e6cf8a; }
.variant-head .score-display { margin-top: 0; }
.variant-missing { margin-top: 8px; padding: 6px 10px; background: #fdf2f2; border: 1px solid #f3d0d0; border-radius: 6px; font-size: 12px; color: #a14a45; }

.analysis-box { margin-top: 10px; padding: 10px; background: #f4f7fc; border: 1px solid #e8ebf2; border-radius: 6px; font-size: 12px; color: #56607a; line-height: 1.6; }

.no-results { text-align: center; padding: 40px; color: #9aa2b1; font-size: 14px; }

.low-match-toggle { margin-top: 8px; padding: 12px 16px; background: #faf3ee; border: 1px dashed #d8b89a; border-radius: 8px; cursor: pointer; font-size: 14px; color: #9a6a4a; user-select: none; transition: all 0.2s; }
.low-match-toggle:hover { border-color: #c89868; background: #f7ece2; }
.low-match-toggle #lowMatchArrow { color: #c0392b; margin-right: 6px; }
.low-match-hint { font-size: 12px; color: #a09080; margin-left: 6px; }
#lowMatchContainer { margin-top: 12px; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #eef1f7; }
::-webkit-scrollbar-thumb { background: #c8d2e0; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #b0bccf; }

/* ===== 模式切换 Tab ===== */
.mode-tabs { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.mode-tab {
  padding: 9px 20px; border: 1px solid #c9d4e6; background: #fff; color: #4a5568;
  border-radius: 22px; cursor: pointer; font-size: 15px; font-weight: 600; transition: all .15s;
}
.mode-tab:hover { border-color: #4a90d9; color: #2c6cb0; }
.mode-tab.active { background: #2c6cb0; color: #fff; border-color: #2c6cb0; box-shadow: 0 2px 8px rgba(44,108,176,.3); }
.mode-hint { color: #8895a7; font-size: 13px; }
.btn-help { margin-left: auto; padding: 6px 12px; border: 1px solid #c9d4e6; background: #fff; color: #5a6b80; border-radius: 16px; cursor: pointer; font-size: 13px; }
.btn-help:hover { border-color: #4a90d9; color: #2c6cb0; }

/* ===== 新手引导卡 ===== */
.onboard {
  position: relative; background: linear-gradient(135deg, #fbfdff 0%, #eef5ff 100%);
  border: 1px solid #cfe0f5; border-radius: 12px; padding: 18px 22px; margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(44,108,176,.08);
}
.onboard-x { position: absolute; top: 10px; right: 14px; border: none; background: none; font-size: 22px; line-height: 1; color: #9fb0c7; cursor: pointer; }
.onboard-x:hover { color: #d9534f; }
.onboard-title { font-size: 17px; font-weight: 700; color: #234; margin-bottom: 12px; }
.onboard-steps { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }
.ob-step { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: #3a4756; line-height: 1.6; }
.ob-step b { color: #2c6cb0; }
.ob-num { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #2c6cb0; color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.ob-more { font-size: 12px; color: #6b7785; background: #fff; border: 1px dashed #cfe0f5; border-radius: 6px; padding: 6px 10px; margin: 8px 0 12px; }
.ob-more b { color: #2c6cb0; }
.onboard-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-demo { padding: 9px 18px; border: none; background: #2e9d4e; color: #fff; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; }
.btn-demo:hover { background: #267e40; }
.btn-dismiss { padding: 9px 18px; border: 1px solid #c9d4e6; background: #fff; color: #4a5568; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 600; }
.btn-dismiss:hover { border-color: #2c6cb0; color: #2c6cb0; }

/* ===== 开荒卡片 ===== */
.kai-card .result-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kai-name { font-size: 17px; font-weight: 700; color: #2e7d32; }
.kai-summary { font-size: 13px; color: #6b7785; font-weight: normal; }
.kai-verify { background: #fff3cd; color: #946c00; border: 1px solid #ffe08a; border-radius: 4px; font-size: 11px; padding: 1px 6px; }
.kai-hero { display: inline-flex; align-items: baseline; gap: 4px; margin-right: 8px; font-weight: 600; }
.kai-hero-st { font-size: 11px; color: #8895a7; font-weight: normal; }
.kai-scores { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.kai-score {
  display: inline-flex; flex-direction: column; align-items: center; min-width: 56px;
  background: #f0f5fb; border: 1px solid #dbe6f3; border-radius: 8px; padding: 5px 8px;
}
.kai-score .ks-label { font-size: 11px; color: #6b7785; }
.kai-score .ks-val { font-size: 17px; font-weight: 700; color: #2c6cb0; }
.kai-score.overall { background: #e8f5ea; border-color: #b6e0bd; }
.kai-score.overall .ks-val { color: #2e7d32; }
.kai-redreq { background: #fff8e6; border-left: 3px solid #f0b429; padding: 7px 10px; border-radius: 4px; font-size: 13px; color: #6b5800; margin-bottom: 10px; }
.kai-block { margin-bottom: 10px; }
.kai-block-t { font-weight: 700; color: #3a4756; font-size: 13px; margin-bottom: 4px; }
.kai-block ul { margin: 0; padding-left: 20px; }
.kai-block li { font-size: 13px; color: #4a5568; line-height: 1.7; }
/* 碰瓷难度速查 */
.wild-block { background: #f7faff; border: 1px solid #e2ebf6; border-radius: 8px; padding: 10px 12px; }
.wild-tip { font-weight: normal; font-size: 12px; color: #8895a7; }
.wild-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.wild-lv { flex: none; font-weight: 700; color: #3a4756; font-size: 13px; width: 42px; }
.wild-arrow { flex: none; font-size: 11px; color: #9fb0c7; margin-right: 2px; }
.wild-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.wild-chip { font-size: 12px; padding: 3px 8px; border-radius: 12px; border: 1px solid; white-space: nowrap; }
.wild-warn { font-size: 12px; color: #a05a00; margin-top: 6px; line-height: 1.6; }

/* ===== 卡片分享按钮 ===== */
.card-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed #e2e7f0; flex-wrap: wrap; }
.btn-card { padding: 6px 14px; border: 1px solid #c9d4e6; background: #fff; color: #3a5572; border-radius: 6px; cursor: pointer; font-size: 13px; text-decoration: none; display: inline-block; }
.btn-card:hover { border-color: #2c6cb0; color: #2c6cb0; }
.btn-card.primary { background: #2c6cb0; color: #fff; border-color: #2c6cb0; }
.btn-card.primary:hover { background: #21568f; color: #fff; }
.card-act-msg { font-size: 12px; color: #2e8b40; }

/* ===== 出图弹窗 ===== */
.img-modal { position: fixed; inset: 0; background: rgba(20,28,42,.7); z-index: 999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.img-modal-box { background: #fff; border-radius: 12px; padding: 16px; max-width: 92vw; max-height: 92vh; overflow: auto; text-align: center; }
.img-modal-hint { font-size: 13px; color: #6b7785; margin-bottom: 10px; }
.img-modal-box img { max-width: 100%; height: auto; border: 1px solid #e2e7f0; border-radius: 8px; }
.img-modal-actions { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }

/* 阵容库卡片：与作战卡区分（中性色，无匹配状态） */
.result-card.library-card { border-left: 5px solid #5a8fc9; }

/* 可折叠工具面板（配速/碰瓷） */
.tool-collapse { padding: 10px 14px; }
.tool-head { cursor: pointer; font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 6px; user-select: none; }
.tool-arrow { display: inline-block; transition: transform .15s; color: #8895a7; font-size: 12px; }
.tool-collapse:not(.collapsed) .tool-arrow { transform: rotate(90deg); }
.tool-hint { font-size: 12px; font-weight: normal; color: #8895a7; margin-left: 4px; }
.tool-collapse .tool-body { margin-top: 10px; }
.tool-collapse.collapsed .tool-body { display: none; }
.speed-panel .tool-head { color: #2156a0; }
.pengci-panel .tool-head { color: #b23b3b; }

/* 进阶分析 折叠容器 */
.analysis-wrap { margin-bottom: 14px; }
.ac-head { cursor: pointer; font-size: 15px; font-weight: 700; color: #3a4756; display: flex; align-items: center; gap: 6px; user-select: none; padding: 8px 10px; background: #f4f6fa; border: 1px solid #e2e7f0; border-radius: 8px; }
.ac-arrow { display: inline-block; transition: transform .15s; color: #8895a7; font-size: 12px; }
.analysis-wrap:not(.open) .ac-arrow { transform: rotate(-90deg); }
.ac-hint { font-size: 12px; font-weight: normal; color: #8895a7; margin-left: 4px; }
.ac-body { margin-top: 10px; }
.analysis-wrap:not(.open) .ac-body { display: none; }
.analysis-wrap .multi-plan:last-child, .analysis-wrap .gap-summary:last-child, .analysis-wrap .roadmap:last-child { margin-bottom: 0; }

/* 队伍深度解读 */
.deep-analysis { background: #f6f4fb; border: 1px solid #ddd4f0; border-radius: 8px; padding: 10px 12px; margin-top: 10px; }
.da-t { font-size: 14px; font-weight: 700; color: #6a4bb0; margin-bottom: 6px; }
.da-pos { font-size: 13px; color: #4a3a7a; margin-bottom: 8px; line-height: 1.6; }
.da-roles { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.da-role { font-size: 13px; color: #4a5568; }
.da-role b { color: #6a4bb0; }
.da-chain { font-size: 12px; color: #4a5568; line-height: 1.7; margin-bottom: 2px; }
.da-chain span { display: inline-block; min-width: 48px; font-weight: 700; color: #8f7fb8; }
.da-cmt { font-size: 13px; color: #8a6d1a; background: #fff8e6; border-radius: 6px; padding: 6px 9px; margin-top: 8px; line-height: 1.6; }

/* 武将梯队角标 + 梯队表 */
.tier-tag { display: inline-block; font-size: 10px; padding: 0 5px; border-radius: 8px; margin-left: 4px; vertical-align: middle; font-weight: 700; }
.tier-lv一 { background: #fbe9c6; color: #9a6b00; }
.tier-lv二 { background: #e3eefb; color: #2c6cb0; }
.tier-lv三 { background: #eef0f3; color: #8895a7; }
.hero-card .tier-tag { position: absolute; top: 4px; left: 6px; margin: 0; }
.tier-table { background: #f4f6fa; border: 1px solid #e2e7f0; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }
.tt-row { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; border-top: 1px dashed #e2e7f0; }
.tt-row:first-child { border-top: none; }
.tt-lv { flex: none; font-weight: 700; font-size: 13px; padding: 2px 8px; border-radius: 6px; }
.tt-一 { background: #fbe9c6; color: #9a6b00; }
.tt-二 { background: #e3eefb; color: #2c6cb0; }
.tt-三 { background: #eef0f3; color: #8895a7; }
.tt-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.tt-chip { font-size: 12px; padding: 1px 7px; border: 1px solid; border-radius: 10px; }
.tt-note { font-size: 12px; color: #9fb0c7; margin-top: 8px; }
.sd-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.sd-item { font-size: 12px; line-height: 1.6; }
.sd-k { display: inline-block; font-weight: 700; color: #b23b3b; background: #fdeaea; border-radius: 4px; padding: 0 6px; margin-right: 5px; }
.sd-v { color: #4a5568; }
@media (max-width: 768px) { .sd-list { grid-template-columns: 1fr; } }
/* 战法查询 */
.td-result { margin-top: 8px; }
.td-hint { font-size: 12px; color: #9fb0c7; }
.td-card { background: #fff; border: 1px solid #e2e7f0; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; }
.td-name { font-size: 14px; font-weight: 700; color: #2c6cb0; }
.td-meta { font-size: 12px; font-weight: normal; color: #8895a7; }
.td-eff { font-size: 12px; color: #4a5568; line-height: 1.7; margin-top: 3px; }
.td-tag { font-size: 12px; color: #6a4bb0; margin-top: 3px; }
.td-src { font-size: 12px; color: #b5651d; margin-top: 3px; }
.hd-line { font-size: 12px; color: #4a5568; line-height: 1.7; margin-top: 2px; }
.hd-k { display: inline-block; width: 60px; font-weight: 700; color: #8895a7; }
.tactic-tag.has-detail { cursor: help; border-bottom: 1px dotted currentColor; }
.td-filter { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.td-chip { font-size: 12px; padding: 3px 10px; border: 1px solid #d6dde9; border-radius: 12px; cursor: pointer; color: #5a6b80; background: #fff; }
.td-chip:hover { border-color: #2c6cb0; }
.td-chip.active { background: #2c6cb0; color: #fff; border-color: #2c6cb0; }
/* 数据完整度看板 */
.cv-sum { font-size: 13px; color: #3a4756; margin-bottom: 8px; }
.cv-sum b { color: #2c6cb0; }
.cv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cv-table th, .cv-table td { border: 1px solid #e2e7f0; padding: 4px 8px; text-align: center; }
.cv-table th { background: #f0f5fb; color: #3a4756; }
.cv-table td:first-child, .cv-table th:first-child { text-align: left; }
.cv-y { color: #2e8b40; font-weight: 700; }
.cv-n { color: #d0d5dd; }
.cv-note { font-size: 12px; color: #9fb0c7; margin-top: 8px; }

/* 自由配将评估器 */
.eval-builder { background: #f4f6fa; border: 1px solid #e2e7f0; border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.eval-row, .eval-slot { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.eval-lab, .eval-aff-lab { font-size: 13px; font-weight: 600; color: #4a5568; }
.eval-builder select, .eval-tac-input { padding: 6px 10px; border: 1px solid #d6dde9; border-radius: 6px; font-size: 14px; background: #fff; }
.eval-tac-input { flex: 1; min-width: 200px; }
.eval-builder .btn-recommend { margin-top: 4px; }
.ev-card { background: #fff; border: 1px solid #e2e7f0; border-radius: 10px; padding: 14px 16px; }
.ev-score { font-size: 16px; font-weight: 700; color: #243b6b; margin-bottom: 10px; }
.ev-score b { font-size: 30px; color: #2c6cb0; }
.ev-score-sub { font-size: 14px; color: #8895a7; font-weight: normal; }
.ev-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 6px 0; border-top: 1px dashed #eef1f7; font-size: 13px; color: #3a4756; }
.ev-k { flex: none; width: 64px; font-weight: 700; color: #6b7785; }
.ev-tac-line { align-items: flex-start; }
.ev-tac-box { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.ev-tac-hero { font-size: 12px; color: #4a5666; background: #f7f9fc; border: 1px solid #e8edf4; border-radius: 7px; padding: 5px 9px; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.ev-tac-hero b { color: #243b6b; font-size: 13px; }
.ev-tac-zi { color: #1f7a3d; }
.ev-tac-cm { color: #2156a0; }
.ev-tac-none { color: #9aa3b0; }
.ev-tac-auto { font-size: 11px; color: #b26a00; margin-left: 4px; }
/* 评估器战法点选 */
.eval-tac-chooser { margin: 6px 0 4px; }
.etc-title { font-size: 13px; font-weight: 700; color: #243b6b; margin-bottom: 6px; }
.etc-hint { font-size: 12px; font-weight: 400; color: #8a91a0; }
.etc-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 6px 0; border-top: 1px dashed #eef1f7; }
.etc-name { font-weight: 700; color: #2156a0; font-size: 13px; min-width: 56px; }
.etc-zi { font-size: 11px; color: #1f7a3d; background: #e3f6e8; border-radius: 8px; padding: 2px 7px; }
.etc-chip { font-size: 12px; color: #4a5666; background: #f0f5fb; border: 1px solid #dbe6f3; border-radius: 12px; padding: 3px 9px; cursor: pointer; transition: all .12s; }
.etc-chip:hover { border-color: #2a7fc0; }
.etc-chip.sel { background: #2a7fc0; color: #fff; border-color: #2a7fc0; }
.etc-none { font-size: 12px; color: #9aa3b0; }
/* 功能体检 v2 */
.ev-fc { flex: 1; min-width: 0; }
.ev-fc-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ev-school { font-size: 12px; font-weight: 700; color: #6a4bb0; background: #f3effb; border-radius: 8px; padding: 2px 9px; }
.ev-fc-detail { font-size: 12px; color: #6a7585; margin-top: 5px; }
.ev-fc-note { font-size: 11px; color: #b26a00; margin-top: 3px; }
.ev-aff-chip { background: #f0f5fb; border: 1px solid #dbe6f3; border-radius: 12px; padding: 2px 9px; }
.ev-aff-chip.ev-s { background: #e8f5ea; border-color: #b6e0bd; color: #2e7d32; }
.ev-aff-chip.ev-bad { background: #fdeaea; border-color: #f1c0c0; color: #c0392b; }
.ev-eff { color: #2c6cb0; font-weight: 700; }
.ev-func { display: inline-block; font-size: 12px; padding: 2px 8px; border-radius: 10px; margin-right: 4px; }
.ev-func.ev-on { background: #e8f5ea; color: #2e7d32; }
.ev-func.ev-off { background: #fdeaea; color: #c0392b; }
.ev-func-note { font-size: 12px; color: #9fb0c7; }
.ev-yf { background: #fdf0e6; color: #b5651d; border-radius: 6px; padding: 1px 8px; font-weight: 600; }
.ev-tips { margin-top: 10px; font-size: 13px; color: #4a5568; }
.ev-tips ul { margin: 4px 0 0; padding-left: 20px; }
.ev-tips li { line-height: 1.7; }
.ev-note { font-size: 12px; color: #9fb0c7; margin-top: 10px; line-height: 1.6; }

/* 兵种克制角标 */
.counter-badge { display: inline-block; font-size: 11px; padding: 1px 7px; margin-left: 6px; border-radius: 10px; background: #fdeee2; color: #b5651d; border: 1px solid #f0cfa8; vertical-align: middle; }
.counter-badge b { color: #8a3b0e; }

/* 阵容克制 / 军师技 可填单元格 */
.ctr-cell { font-size: 12px; line-height: 1.6; min-width: 110px; }
.adv-cell { font-size: 12px; min-width: 80px; }
.editable-cell { cursor: text; }
.editable-cell:empty::before { content: '＋ 点此填写'; color: #c2cad6; font-size: 12px; }
.editable-cell:focus { outline: 2px solid #9cc3ec; outline-offset: -1px; background: #fafdff; border-radius: 3px; }

/* 战法体检 */
.tactic-check { font-size: 12px; padding: 5px 9px; border-radius: 6px; margin-top: 6px; line-height: 1.5; }
.tactic-check.ok { background: #eef7f0; color: #2e7d44; border: 1px solid #cfe8d4; }
.tactic-check.warn { background: #fff6e6; color: #9a6b00; border: 1px solid #f3dca0; }
.tc-f { display: inline-block; font-size: 12px; padding: 0 6px; border-radius: 8px; margin-right: 3px; }
.tc-f.on { background: #e8f5ea; color: #2e7d32; }
.tc-f.off { background: #fdeaea; color: #c0392b; }
/* 克制预警 */
.counter-warn { background: #fdeeee; border: 1px solid #f3cccc; border-radius: 6px; padding: 6px 10px; margin-top: 8px; font-size: 12px; color: #b23b3b; line-height: 1.6; }
.counter-warn b { color: #8a2a2a; }

/* 配速助手 */
.speed-panel { background: #eef4fb; border: 1px solid #cfe0f5; border-radius: 10px; padding: 14px 16px; margin: 14px 0; }
.speed-title { font-size: 16px; font-weight: 700; color: #2156a0; margin-bottom: 10px; }
.speed-sub { display: block; font-size: 12px; font-weight: normal; color: #7089a8; margin-top: 3px; }
.speed-rows { display: flex; flex-wrap: wrap; gap: 8px; }
.speed-row { display: inline-flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #d6dde9; border-radius: 8px; padding: 5px 8px; }
.speed-hn { font-size: 13px; font-weight: 600; color: #3a4756; }
.speed-row input { width: 70px; padding: 4px 6px; border: 1px solid #d6dde9; border-radius: 5px; font-size: 13px; }
.speed-hint { font-size: 13px; color: #7089a8; }
.speed-out { margin-top: 10px; }
.speed-order { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.speed-ol { font-weight: 700; color: #2156a0; margin-right: 4px; }
.speed-pill { background: #fff; border: 1px solid #cfe0f5; border-radius: 12px; padding: 3px 10px; color: #3a4756; }
.speed-pill b { color: #2156a0; }
.speed-arrow { color: #9fb0c7; margin: 0 2px; }
.speed-tip { font-size: 12px; color: #5a6b80; margin-top: 8px; line-height: 1.6; }
.speed-note { font-size: 12px; color: #8095ad; margin-top: 8px; line-height: 1.6; }
@media (max-width: 768px) { .speed-row input { width: 60px; } }

/* 养成路线图 */
.roadmap { background: #eef6fb; border: 1px solid #cfe2f0; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.rm-title { font-size: 15px; font-weight: 700; color: #1f6fa0; margin-bottom: 8px; }
.rm-sub { font-size: 12px; font-weight: normal; color: #7299b3; }
.rm-step { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; }
.rm-num { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #1f8fc0; color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.rm-body { font-size: 13px; color: #3a4756; line-height: 1.6; }
.rm-body b { color: #1f6fa0; }
.rm-teams { color: #5a6b80; }
.rm-note { font-size: 12px; color: #7299b3; margin-top: 6px; line-height: 1.6; }
.rm-pack { margin-top: 2px; }
.pack-tag { font-size: 12px; color: #9a6b00; background: #fff6e6; border: 1px solid #f0dcae; border-radius: 6px; padding: 1px 7px; }
.rm-nopack { font-size: 12px; color: #b0b8c4; }
.pk-heroes { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.pk-h { font-size: 11px; color: #5a6b80; background: #f0f5fb; border-radius: 8px; padding: 1px 6px; }
.pk-h-core { color: #1f7a3d; background: #e3f6e8; font-weight: 600; }
/* 卡包推荐 */
.pr-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.pr-controls .eval-tac-input { flex: 1; min-width: 180px; }
.pr-note { font-size: 12px; color: #6a7585; background: #f7f9fc; border: 1px dashed #d5deea; border-radius: 6px; padding: 6px 9px; margin-bottom: 10px; }
.pr-sum { font-size: 12px; color: #5a6678; margin-bottom: 8px; }
.pr-pack { border: 1px solid #e2e7f0; border-left-width: 4px; border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; background: #fff; }
.pr-pack.pr-gS { border-left-color: #e0a020; background: #fffdf4; }
.pr-pack.pr-gA { border-left-color: #e07b39; }
.pr-pack.pr-gAm { border-left-color: #2a7fc0; }
.pr-pack.pr-gB { border-left-color: #aab4c2; }
.pr-pack-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pr-pack-head b { font-size: 14px; color: #243b6b; }
.pr-grade { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 6px; font-size: 13px; font-weight: 800; color: #fff; }
.pr-grade.pr-gS { background: #e0a020; }
.pr-grade.pr-gA { background: #e07b39; }
.pr-grade.pr-gAm { background: #2a7fc0; }
.pr-grade.pr-gB { background: #aab4c2; }
.pr-cnt { font-size: 12px; color: #8a91a0; margin-left: auto; }
.pr-hits { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pr-hit { font-size: 12px; color: #5a6b80; background: #f0f5fb; border-radius: 8px; padding: 2px 7px; }
.pr-hit-core { color: #1f7a3d; background: #e3f6e8; font-weight: 600; }
.pr-dir { font-size: 12px; color: #6a4bb0; margin-top: 5px; }
.pr-unmatched { font-size: 12px; color: #b26a00; background: #fff6e6; border: 1px solid #f0d9a8; border-radius: 6px; padding: 6px 9px; margin-top: 6px; }
/* 武将平替 */
.sub-tag { display: inline-block; font-size: 11px; color: #6a4bb0; background: #f3effb; border: 1px solid #e0d6f3; border-radius: 8px; padding: 1px 6px; margin-top: 3px; }
.sub-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border: 1px solid #e2e7f0; border-left-width: 4px; border-radius: 8px; padding: 7px 10px; margin-bottom: 7px; background: #fff; }
.sub-item.sub-high { border-left-color: #2a9d4a; }
.sub-item.sub-low { border-left-color: #aab4c2; }
.sub-item b { font-size: 14px; color: #243b6b; }
.sub-grade { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 20px; padding: 0 6px; border-radius: 5px; font-size: 12px; font-weight: 700; color: #fff; }
.sub-grade.sub-high { background: #2a9d4a; }
.sub-grade.sub-low { background: #aab4c2; }
.sub-cost { font-size: 12px; color: #7a8492; }
.sub-none { font-size: 13px; color: #8a6d1a; background: #fff8e8; border: 1px solid #f0dcae; border-radius: 8px; padding: 9px 11px; }
.sub-note2 { font-size: 12px; color: #6a7585; margin-top: 4px; }
/* 对位预判 */
.mu-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.mu-sel { flex: 1; min-width: 120px; padding: 8px 10px; font-size: 13px; border: 1px solid #c8d2e0; border-radius: 8px; background: #fff; }
.mu-vs { font-weight: 800; color: #b23b3b; font-size: 14px; }
.mu-verdict { text-align: center; font-size: 20px; font-weight: 800; padding: 12px; border-radius: 10px; margin-bottom: 10px; }
.mu-verdict.mu-win { color: #1f7a3d; background: #e3f6e8; border: 1px solid #b8e6c4; }
.mu-verdict.mu-lose { color: #b23b3b; background: #fdeaea; border: 1px solid #f3cccc; }
.mu-verdict.mu-mid { color: #8a6d1a; background: #fff8e8; border: 1px solid #f0dcae; }
.mu-reasons { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.mu-r { font-size: 13px; padding: 6px 10px; border-radius: 7px; background: #f7f9fc; }
.mu-r-good { color: #1f7a3d; background: #eef9f1; }
.mu-r-bad { color: #b23b3b; background: #fdf0f0; }
.mu-r-mid { color: #5a6678; }
.mu-r-note { color: #8a6d1a; background: #fffaf0; font-size: 12px; }
.mu-profs { display: flex; flex-direction: column; gap: 4px; }
.mu-prof { font-size: 12px; color: #5a6678; background: #f4f6fa; border-radius: 6px; padding: 5px 9px; }
.mu-prof b { color: #243b6b; }
.rm-troop { margin-left: 8px; padding: 3px 8px; border: 1px solid #cfe2f0; border-radius: 6px; font-size: 13px; background: #fff; color: #1f6fa0; vertical-align: middle; }
.rm-empty { font-size: 13px; color: #7299b3; padding: 8px 0; }

/* 多队协同规划 */
.multi-plan { background: #f3f0fb; border: 1px solid #d8cef0; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.mp-title { font-size: 15px; font-weight: 700; color: #6a4bb0; margin-bottom: 8px; }
.mp-sub { font-size: 12px; font-weight: normal; color: #8f7fb8; }
.mp-team { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 6px 0; border-top: 1px dashed #e0d8f2; }
.mp-team:first-of-type { border-top: none; }
.mp-lab { flex: none; font-size: 12px; font-weight: 700; color: #fff; background: #7d5fc4; border-radius: 6px; padding: 3px 9px; }
.mp-name { font-weight: 700; color: #4a3a7a; }
.mp-troop { font-size: 12px; background: #fff; border: 1px solid #d8cef0; border-radius: 10px; padding: 1px 8px; color: #6a4bb0; }
.mp-heroes { font-size: 13px; color: #5a5570; }
.mp-warn { font-size: 12px; color: #9a6b00; background: #fff6e6; border: 1px solid #f3dca0; border-radius: 6px; padding: 6px 9px; margin-top: 8px; line-height: 1.6; }
.mp-note { font-size: 12px; color: #8f7fb8; margin-top: 8px; line-height: 1.6; }

/* 缺口汇总「最该补什么」 */
.gap-summary { background: #f0f7f1; border: 1px solid #c7e3cd; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.gap-title { font-size: 15px; font-weight: 700; color: #2e7d32; margin-bottom: 8px; }
.gap-row { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.gap-lab { flex: none; font-size: 13px; font-weight: 700; color: #3a4756; background: #fff; border: 1px solid #cfe0d2; border-radius: 6px; padding: 3px 8px; }
.gap-chip { font-size: 13px; background: #fff; border: 1px solid #d6e3d9; border-radius: 14px; padding: 3px 10px; color: #4a5568; }
.gap-chip b { color: #2e7d32; }
.gap-tier { font-size: 11px; color: #b8742a; background: #fff5e8; border-radius: 8px; padding: 1px 6px; margin-left: 2px; }
.gap-chip.gap-red { border-color: #e6c9a0; background: #fffaf2; }
.gap-chip.gap-red b { color: #c0561a; }
.gap-src { font-size: 12px; color: #2156a0; }
.gap-note { font-size: 12px; color: #6b8870; margin-top: 6px; line-height: 1.6; }

/* 整套出长图 按钮 + 可编辑出图表 */
.btn-export-sheet { font-size: 13px; font-weight: 600; padding: 5px 12px; margin-left: 10px; border: 1px solid #2c6cb0; background: #2c6cb0; color: #fff; border-radius: 16px; cursor: pointer; vertical-align: middle; }
.btn-export-sheet:hover { background: #21568f; }
.export-box { max-width: 760px; width: 94vw; text-align: left; }
.export-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; position: sticky; top: 0; background: #fff; padding-bottom: 8px; }
.export-hint { font-size: 13px; color: #6b7785; flex: 1; }
.export-sheet { background: #fff; padding: 18px 20px; border: 1px solid #e2e7f0; }
.ep-list { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow: auto; }
.ep-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #e2e7f0; border-radius: 8px; font-size: 14px; color: #3a4756; cursor: pointer; }
.ep-item:hover { background: #f4f8fd; border-color: #b9d2ee; }
.ep-item input { width: 16px; height: 16px; }
.es-title { font-size: 20px; font-weight: 800; color: #243b6b; text-align: center; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 2px solid #e0b84c; }
.es-team { margin-bottom: 16px; }
.es-team-name { font-size: 16px; font-weight: 700; color: #2c6cb0; margin-bottom: 6px; }
.es-variant { font-size: 13px; font-weight: 600; color: #8a6d1a; margin: 6px 0 3px; }
.es-table { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
.es-table th, .es-table td { border: 1px solid #d6dde9; padding: 6px 8px; font-size: 13px; text-align: left; vertical-align: top; }
.es-table th { background: #f0f5fb; color: #3a4756; font-weight: 700; white-space: nowrap; }
.es-details { font-size: 12px; color: #4a5568; margin: 4px 0 0; line-height: 1.7; }
.es-note { font-size: 13px; color: #6b5800; background: #fff8e6; border: 1px dashed #f0c463; border-radius: 6px; padding: 8px 10px; margin-top: 12px; }
.es-foot { font-size: 11px; color: #9fb0c7; text-align: right; margin-top: 10px; }
[contenteditable="true"]:focus { outline: 2px solid #9cc3ec; outline-offset: 1px; border-radius: 3px; }

/* 碰瓷血线速查面板 */
.pengci-panel { background: #fff5f5; border: 1px solid #f3cccc; border-radius: 10px; padding: 14px 16px; margin: 14px 0; }
.pengci-title { font-size: 16px; font-weight: 700; color: #b23b3b; margin-bottom: 10px; }
.pengci-sub { display: block; font-size: 12px; font-weight: normal; color: #9a7070; margin-top: 3px; }
.pengci-controls { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.pengci-controls label { font-size: 14px; color: #4a5568; font-weight: 600; }
.pengci-controls select { margin-left: 5px; padding: 6px 10px; border: 1px solid #d6dde9; border-radius: 6px; font-size: 14px; background: #fff; }
.pengci-out { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 14px; background: #fff; border: 1px solid #f3cccc; border-radius: 8px; }
.pengci-out-label { font-size: 13px; color: #6b7785; }
.pengci-out-val { font-size: 26px; font-weight: 800; color: #d9534f; }
.pengci-out-val.free { font-size: 18px; color: #2e8b40; }
.pengci-note { font-size: 12px; color: #a07a7a; margin-top: 8px; line-height: 1.6; }
@media (max-width: 768px) {
  .pengci-controls { flex-direction: column; align-items: stretch; gap: 8px; }
  .pengci-controls select { width: 100%; margin-left: 0; margin-top: 3px; }
  .pengci-controls label { display: flex; flex-direction: column; }
}

@media (max-width: 768px) {
  .main-container { flex-direction: column; }
  /* 手机端：内容在上，结果筛选侧栏移到下方，避免一打开先看到一堆筛选器 */
  .content { order: 1; }
  .sidebar { order: 2; width: 100%; border-right: none; border-top: 1px solid #e2e7f0; }
  .hero-grid { grid-template-columns: 1fr 1fr; }  /* 手机固定2列，卡片更宽 */
  /* 手机上红度按钮加大：换成每行3个、共2行，按钮更宽更好点 */
  .hero-card .red-btns { gap: 5px; margin-top: 8px; flex-wrap: wrap; }
  .red-btn { flex: 1 0 28%; padding: 10px 0; font-size: 16px; border-radius: 6px; }
  .mode-tab { padding: 8px 16px; font-size: 14px; }
  .kai-score { min-width: 48px; }
  .btn-help { margin-left: 0; }
  .onboard-actions { flex-direction: column; }
  .btn-demo, .btn-dismiss { width: 100%; }
  /* 折叠标题在手机上隐藏副提示，避免标题被挤换行 */
  .ac-hint, .tool-hint { display: none; }
  .ac-head, .tool-head { white-space: nowrap; }
  /* 作战/阵容库 配置表 → 手机端每将一张堆叠小卡 */
  .config-table thead { display: none; }
  .config-table, .config-table tbody, .config-table tr, .config-table td { display: block; width: 100%; }
  .config-table tr { border: 1px solid #e2e7f0; border-radius: 8px; margin-bottom: 8px; padding: 4px 6px; background: #fcfdff; }
  .config-table td { border: none; padding: 4px 4px; display: flex; gap: 8px; align-items: baseline; }
  .config-table td::before { content: attr(data-label); flex: none; width: 36px; color: #8895a7; font-weight: 600; font-size: 12px; }
  .config-table td:empty:not(.editable-cell) { display: none; }
}