/* ============================================================
   同盟对战 · 阵容克制关系图  样式
   暗色科技风，三栏布局：控制 / 舞台 / 详情
   ============================================================ */

:root {
  --bg: #080b16;
  --bg-2: #0d1425;
  --panel: #111a2e;
  --panel-2: #16203a;
  --line: #22304f;
  --line-soft: #1a2540;
  --text: #e6edf8;
  --text-dim: #8fa3c4;
  --text-faint: #5d6f8f;
  --accent: #4ea8ff;
  --accent-2: #7c5cff;
  --hot: #ff5a6e;
  --cool: #35b6ff;
  --good: #38d39f;
  --warn: #ffb547;
  --radius: 12px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: radial-gradient(1200px 800px at 75% -10%, #16224a 0%, var(--bg) 55%) fixed;
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: 14px;
  overflow: hidden;
}

button, input, select { font-family: inherit; }

/* ---------------- 顶栏 ---------------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 68px;
  padding: 0 18px;
  background: linear-gradient(180deg, rgba(22, 32, 58, .95), rgba(13, 20, 37, .92));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
  /* backdrop-filter 会创建层叠上下文，没有 z-index 时会被后面的 .stage 盖住，
     导致「检查更新」面板被画布内容穿透。这里明确抬高层级。 */
  position: relative;
  z-index: 60;
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 260px; }

.logo {
  width: 34px; height: 34px; border-radius: 10px;
  background: conic-gradient(from 200deg, var(--accent), var(--accent-2), var(--hot), var(--accent));
  box-shadow: 0 0 18px rgba(78, 168, 255, .55);
  animation: spin 9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.brand-text h1 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: .3px; }
.brand-text p { margin: 3px 0 0; font-size: 12px; color: var(--text-dim); }

.stat-strip { display: flex; gap: 10px; flex: 1; overflow: hidden; }

.stat {
  display: flex; flex-direction: column; align-items: center;
  min-width: 78px; padding: 6px 12px;
  background: rgba(30, 44, 74, .5);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}
.stat-num { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 11px; color: var(--text-faint); margin-top: 1px; }

.topbar-actions { display: flex; gap: 8px; }

/* ---------------- 通用按钮 ---------------- */
.btn {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 13px;
  transition: .18s ease;
  white-space: nowrap;
}
.btn:hover { border-color: var(--accent); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(78, 168, 255, .22); }
.btn:active { transform: translateY(0); }
.btn-primary { background: linear-gradient(135deg, #2f7fe0, #6b53e8); border-color: transparent; font-weight: 600; }
.btn-ghost { background: rgba(30, 44, 74, .45); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn.danger:hover { border-color: var(--hot); box-shadow: 0 4px 14px rgba(255, 90, 110, .22); }

/* ---------------- 布局 ---------------- */
.layout {
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr) 336px;
  gap: 12px;
  padding: 12px;
  height: calc(100% - 68px);
}

.panel {
  background: linear-gradient(180deg, rgba(17, 26, 46, .96), rgba(13, 20, 37, .96));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow-y: auto;
  overflow-x: hidden;
}
.panel::-webkit-scrollbar { width: 8px; }
.panel::-webkit-scrollbar-thumb { background: #26334f; border-radius: 8px; }

.sidebar { padding: 4px 14px 18px; }

.block { padding: 14px 0; border-bottom: 1px dashed var(--line-soft); }
.block:last-child { border-bottom: none; }
.block-title {
  margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: 1px;
  color: var(--text-dim); text-transform: uppercase;
}

.hint { margin: 8px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--text-faint); }
.hint.inline { margin: 0; align-self: center; }

/* ---------------- 拖拽导入 ---------------- */
.dropzone {
  border: 1.5px dashed #2c3d61;
  border-radius: 10px;
  padding: 16px 10px;
  text-align: center;
  cursor: pointer;
  transition: .2s ease;
  background: rgba(30, 44, 74, .25);
}
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: rgba(78, 168, 255, .1); }
.dropzone-inner strong { display: block; font-size: 13px; }
.dropzone-inner span { display: block; margin-top: 4px; font-size: 11px; color: var(--text-faint); }

.batch-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.batch-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; font-size: 11.5px;
  background: rgba(30, 44, 74, .4);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}
.batch-item .bi-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-item .bi-count { color: var(--accent); font-variant-numeric: tabular-nums; }
.batch-item .bi-del { cursor: pointer; color: var(--text-faint); padding: 0 2px; }
.batch-item .bi-del:hover { color: var(--hot); }
.batch-item .bi-gen { cursor: pointer; color: var(--text-faint); padding: 0 2px; }
.batch-item .bi-gen:hover { color: var(--good); }

.row-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }

/* ---------------- 分段控件 ---------------- */
.seg { display: flex; background: rgba(30, 44, 74, .5); border: 1px solid var(--line-soft); border-radius: 9px; padding: 3px; }
.seg-btn {
  flex: 1; border: none; background: transparent; color: var(--text-dim);
  padding: 6px 4px; border-radius: 7px; cursor: pointer; font-size: 12.5px; transition: .18s;
}
.seg-btn.active { background: linear-gradient(135deg, #2f7fe0, #6b53e8); color: #fff; font-weight: 600; }
.seg-sm { padding: 2px; }
.seg-sm .seg-btn { padding: 5px 2px; font-size: 11.5px; border-radius: 6px; }

/* 对阵详情里的培养度分层表 */
.tier-table { font-size: 12px; }
.tier-table .tt-row {
  display: grid; grid-template-columns: 108px minmax(0, 1fr) 60px 52px;
  gap: 8px; align-items: center; padding: 5px 6px;
  border-bottom: 1px solid var(--line-soft);
}
.tier-table .tt-row:last-child { border-bottom: none; }
.tier-table .tt-label { color: var(--text-dim); }
.tier-table .tt-bar { height: 7px; background: #1b2540; border-radius: 4px; overflow: hidden; }
.tier-table .tt-bar i { display: block; height: 100%; border-radius: 4px; }
.tier-table .tt-n { color: var(--text-faint); font-variant-numeric: tabular-nums; text-align: right; font-size: 11px; }
.tier-table .tt-rate { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.tier-table .tt-row.tt-active { background: rgba(78, 168, 255, .14); border-radius: 6px; }

/* ---------------- 过滤器 ---------------- */
.field { display: block; margin-bottom: 12px; }
.field-label { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.field-label b { color: var(--accent); font-variant-numeric: tabular-nums; }

input[type=range] {
  width: 100%; -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 4px; background: #253253; outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%;
  background: linear-gradient(135deg, #4ea8ff, #7c5cff);
  cursor: pointer; box-shadow: 0 0 10px rgba(78, 168, 255, .7);
}
input[type=range]::-moz-range-thumb {
  width: 15px; height: 15px; border: none; border-radius: 50%;
  background: #4ea8ff; cursor: pointer;
}
/* 开关未勾选时，它的参数滑块置灰——表明该参数当前不生效 */
input[type=range]:disabled { opacity: .3; cursor: not-allowed; }
input[type=range]:disabled::-webkit-slider-thumb { background: #4a5876; box-shadow: none; cursor: not-allowed; }
input[type=range]:disabled::-moz-range-thumb { background: #4a5876; cursor: not-allowed; }
.field.is-off .field-label { opacity: .45; }

.check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-dim); margin-bottom: 9px; cursor: pointer; }
.check input { accent-color: #4ea8ff; width: 14px; height: 14px; cursor: pointer; }
.check b { color: var(--accent); font-weight: 600; }

.filter-divider {
  margin: 12px 0 9px; padding-top: 10px; border-top: 1px dashed var(--line-soft);
  font-size: 11px; color: var(--text-faint); letter-spacing: .5px;
}

/* ---------------- 舞台 ---------------- */
.stage {
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(17, 26, 46, .96), rgba(10, 16, 31, .96));
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}

.view-tabs { display: flex; align-items: center; gap: 3px; padding: 8px 8px; border-bottom: 1px solid var(--line); overflow: hidden; }
.tabs-spacer { flex: 1; min-width: 8px; }

.tab {
  flex: none; white-space: nowrap;
  border: none; background: transparent; color: var(--text-dim);
  padding: 6px 9px; border-radius: 8px; cursor: pointer; font-size: 12.5px; transition: .18s;
}
.tab:hover { color: var(--text); background: rgba(78, 168, 255, .1); }
.tab.active { color: #fff; background: rgba(78, 168, 255, .18); box-shadow: inset 0 0 0 1px rgba(78, 168, 255, .35); }

.legend { display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: var(--text-dim); min-width: 0; overflow: hidden; }
.legend-item { display: flex; align-items: center; gap: 5px; white-space: nowrap; }

/* 标签栏宽度不够时：标签保持完整并允许横向滚动，图例逐级让位。
   1530px 以下 9 个标签就要 660px 以上，留着图例会把右侧标签压到滚动区外、看着像「标签没显示全」，
   而这个宽度是常见的笔记本窗口，所以这里直接收起图例（完整口径在「显示」面板的提示里）。 */
.view-tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.view-tabs::-webkit-scrollbar { height: 0; }
.legend { flex: none; }
@media (max-width: 1720px) {
  .legend .legend-extra { display: none; }
  .legend { gap: 8px; }
}
@media (max-width: 1530px) {
  .legend { display: none; }
}
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.legend-bar { width: 56px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--cool), #6b7896, var(--hot)); }

.stage-body { position: relative; flex: 1; min-height: 0; }

/* 隐藏的视图必须用 visibility 一并关掉：
   仅靠 opacity:0 时，持续重绘的 canvas 在 GPU 合成层里仍可能被画出来 */
.view {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  background: linear-gradient(180deg, rgba(15, 23, 42, .98), rgba(10, 16, 31, .98));
  transition: opacity .28s ease, visibility .28s;
}
.view.active { opacity: 1; visibility: visible; pointer-events: auto; }

#view-graph, #view-matrix { position: absolute; }
canvas { display: block; width: 100%; height: 100%; }

.canvas-overlay {
  position: absolute; pointer-events: none; z-index: 5;
  background: rgba(8, 12, 24, .94);
  border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font-size: 12px; line-height: 1.6;
  box-shadow: var(--shadow); opacity: 0; transition: opacity .14s;
  max-width: 280px;
}
.canvas-overlay.show { opacity: 1; }
.canvas-overlay b { color: var(--accent); }

.empty-state {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; color: var(--text-faint);
  text-align: center; padding: 20px;
}
.empty-state h3 { margin: 0; color: var(--text-dim); font-size: 15px; font-weight: 600; }
.empty-state p { margin: 0; font-size: 12.5px; }

.stage-foot {
  border-top: 1px solid var(--line);
  padding: 7px 12px; font-size: 11.5px; color: var(--text-faint);
  display: flex; gap: 16px; flex-wrap: wrap;
}

/* ---------------- 强度排行 ---------------- */
.rank-wrap { position: absolute; inset: 0; overflow-y: auto; padding: 14px 16px 24px; contain: layout; }
.rank-wrap::-webkit-scrollbar { width: 8px; }
.rank-wrap::-webkit-scrollbar-thumb { background: #26334f; border-radius: 8px; }

/* 列宽要能在 1366 这类窄屏里完整放下：minmax 压到刚好够读，
   否则最右侧的列会被挤出可视区（row 本身不换行、也不横向滚动） */
.rank-row {
  display: grid; grid-template-columns: 26px minmax(96px, 1.1fr) 124px minmax(268px, 2fr) 84px 92px 92px;
  align-items: center; gap: 8px;
  padding: 7px 10px; margin-bottom: 5px;
  background: rgba(22, 32, 58, .6);
  border: 1px solid var(--line-soft); border-radius: 9px;
  cursor: pointer; transition: .18s;
  opacity: 0; transform: translateY(6px);
  animation: rowIn .34s ease forwards;
}
@keyframes rowIn { to { opacity: 1; transform: none; } }
.rank-row:hover { border-color: var(--accent); background: rgba(78, 168, 255, .1); }

.rank-idx { font-weight: 700; color: var(--text-faint); font-variant-numeric: tabular-nums; text-align: center; }
.rank-name { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-score { min-width: 0; }
.rank-bar { position: relative; height: 7px; background: #1b2540; border-radius: 5px; overflow: hidden; }
.rank-bar i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 5px; transition: width .6s cubic-bezier(.2,.8,.2,1); }

/* 五维分项条：打击面 / 胜率 / 连胜 / 战损 / 劣势，各一根迷你条 + 分数 */
.rank-parts { display: flex; gap: 6px; margin-top: 4px; }
.rank-parts .rp { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rank-parts .rp-label { font-size: 9.5px; line-height: 1.1; color: #7f90ad; white-space: nowrap; overflow: hidden; }
.rank-parts .rp-bar { display: block; height: 4px; background: #1b2540; border-radius: 3px; overflow: hidden; }
.rank-parts .rp-bar i { display: block; height: 100%; border-radius: 3px; transition: width .5s ease; }
.rank-parts .rp-num { font-size: 9.5px; line-height: 1.1; color: #a8b6cc; font-variant-numeric: tabular-nums; }
.rank-val { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-dim); }
.rank-fair { display: block; margin-left: 0; font-weight: 700; }
.rank-fair.off { color: #5d6f8f; font-weight: 400; font-size: 11px; }
/* 底部口径说明 */
.rank-note { margin-top: 10px; padding: 9px 11px; font-size: 11.5px; line-height: 1.7; color: #8fa3c4;
  background: rgba(22, 32, 58, .45); border: 1px solid var(--line-soft); border-radius: 9px; }
.rank-note b { color: #c9d6ea; }

/* ---------------- 连赢证据（详情页） ---------------- */
.streak-evidence { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.streak-evidence .insp-btn-tip { font-size: 11.5px; color: #8fa3c4; }
.btn-xs { padding: 3px 8px !important; font-size: 11px !important; }
.streak-runs { margin-top: 10px; }
.streak-run-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.streak-run-row {
  display: grid; grid-template-columns: minmax(60px, 1.3fr) 52px minmax(120px, 1.6fr) auto;
  align-items: center; gap: 8px;
  padding: 4px 8px; border-radius: 7px;
  background: rgba(22, 32, 58, .55); border: 1px solid var(--line-soft);
  font-size: 11.5px; color: #a8b6cc;
}
.streak-run-row .run-player { color: #c9d6ea; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.streak-run-row .run-len { color: #ff9f7a; font-weight: 700; }
.streak-run-row .run-wuxun { color: #8fa3c4; font-variant-numeric: tabular-nums; text-align: right; }

/* ---------------- 数据表 ---------------- */
.table-wrap { position: absolute; inset: 0 0 40px 0; overflow: auto; }
.table-wrap::-webkit-scrollbar { width: 9px; height: 9px; }
.table-wrap::-webkit-scrollbar-thumb { background: #26334f; border-radius: 8px; }

.data-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.data-table th {
  position: sticky; top: 0; z-index: 2;
  background: #16203a; color: var(--text-dim); font-weight: 600;
  padding: 8px 10px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.data-table td { padding: 6px 10px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.data-table tbody tr:hover { background: rgba(78, 168, 255, .07); }
.data-table .tag { font-size: 11px; padding: 1px 7px; border-radius: 20px; border: 1px solid var(--line); }
.tag-win { color: var(--good); border-color: rgba(56, 211, 159, .4); background: rgba(56, 211, 159, .1); }
.tag-lose { color: var(--hot); border-color: rgba(255, 90, 110, .4); background: rgba(255, 90, 110, .1); }
.tag-draw { color: var(--warn); border-color: rgba(255, 181, 71, .4); background: rgba(255, 181, 71, .1); }

.pager { position: absolute; bottom: 0; left: 0; right: 0; height: 40px; display: flex; align-items: center; justify-content: center; gap: 10px; border-top: 1px solid var(--line); background: rgba(13, 20, 37, .9); font-size: 12px; color: var(--text-dim); }

/* ---------------- 详情面板 ---------------- */
.inspector { padding: 14px; }
.inspector-empty { color: var(--text-faint); font-size: 12.5px; line-height: 1.8; padding-top: 24px; }
.inspector-empty h3 { color: var(--text-dim); font-size: 14px; margin: 0 0 8px; }

.insp-head { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
.insp-kicker { font-size: 11px; letter-spacing: 1px; color: var(--text-faint); text-transform: uppercase; }
.insp-title { font-size: 15px; font-weight: 600; margin: 5px 0 0; line-height: 1.5; }

.insp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.insp-cell { background: rgba(22, 32, 58, .7); border: 1px solid var(--line-soft); border-radius: 9px; padding: 8px 10px; }
.insp-cell .k { font-size: 11px; color: var(--text-faint); }
.insp-cell .v { font-size: 15px; font-weight: 600; margin-top: 2px; font-variant-numeric: tabular-nums; }

/* 阵容详情里的操作按钮（推荐配置等） */
.insp-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 8px 0 10px; }
.insp-btn {
  font-size: 12px; padding: 5px 13px; border-radius: 7px; cursor: pointer; transition: .15s;
  border: 1px solid rgba(78, 168, 255, .5); background: rgba(78, 168, 255, .14); color: #9dc9ff;
}
.insp-btn:hover { background: rgba(78, 168, 255, .3); color: #dbe7ff; border-color: rgba(78, 168, 255, .85); }
.insp-btn-tip { font-size: 11px; color: #5d6f8f; }

/* 兵力态势拆解：强度只认「势均力敌」与「以少打多」 */
.force-split { background: rgba(22, 32, 58, .5); border: 1px solid var(--line-soft);
  border-radius: 9px; padding: 9px 11px; margin: 0 0 10px; }
.force-split .fs-title { font-size: 11px; color: var(--text-faint); margin-bottom: 7px; letter-spacing: .4px; }
.fs-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 11.5px; }
.fs-row.muted { opacity: .55; }
.fs-row .fs-k { flex: none; width: 62px; color: #c7d6f0; }
.fs-row .fs-n { flex: none; width: 52px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.fs-row .fs-v { flex: none; width: 56px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fs-tag { font-size: 9.5px; border-radius: 4px; padding: 0 5px; line-height: 15px;
  color: #35c46b; background: rgba(53, 196, 107, .13); }
.fs-tag.off { color: #7d90b0; background: rgba(125, 144, 176, .13); }
.force-split .fs-note { margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--line-soft);
  font-size: 11px; color: #8fa3c4; display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }

.insp-section { margin-top: 14px; }
.insp-section h4 { margin: 0 0 8px; font-size: 12px; color: var(--text-dim); font-weight: 600; letter-spacing: .5px; }

.vs-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; margin-bottom: 5px; border-radius: 8px;
  background: rgba(22, 32, 58, .6); border: 1px solid var(--line-soft);
  font-size: 12px; cursor: pointer; transition: .16s;
}
.vs-row:hover { border-color: var(--accent); background: rgba(78, 168, 255, .1); }
.vs-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-rate { font-variant-numeric: tabular-nums; font-weight: 600; }
.vs-n { color: var(--text-faint); font-size: 11px; font-variant-numeric: tabular-nums; }

.mini-bar { height: 5px; border-radius: 3px; background: #1b2540; overflow: hidden; margin-top: 3px; }
.mini-bar i { display: block; height: 100%; }

.battle-mini { padding: 7px 9px; margin-bottom: 6px; border-radius: 8px; background: rgba(22, 32, 58, .55); border: 1px solid var(--line-soft); font-size: 11.5px; line-height: 1.75; }
.battle-mini .bm-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-dim); }
.battle-mini .bm-side { display: flex; align-items: center; gap: 6px; padding: 1px 5px; border-radius: 5px; border-left: 2px solid transparent; }
.battle-mini .bm-a { color: var(--accent); }
.battle-mini .bm-d { color: var(--warn); }

/* 胜负：头部结论标签 */
.battle-mini .mb-result {
  padding: 1px 7px; border-radius: 20px; font-size: 10.5px; font-weight: 600;
  white-space: nowrap; letter-spacing: .3px;
}
.battle-mini .mb-result.atk { color: #7fd1ff; background: rgba(58, 210, 255, .13); border: 1px solid rgba(58, 210, 255, .38); }
.battle-mini .mb-result.def { color: #ffb547; background: rgba(255, 181, 71, .13); border: 1px solid rgba(255, 181, 71, .38); }
.battle-mini .mb-result.draw { color: #8fa3c4; background: rgba(143, 163, 196, .13); border: 1px solid rgba(143, 163, 196, .3); }

/* 胜负：胜方那一行整行高亮 */
.battle-mini .bm-side.bm-won { background: rgba(120, 180, 255, .1); border-left-color: #4ea8ff; }
.battle-mini .bm-side.bm-won .bm-player { color: #ffffff; font-weight: 600; }
.battle-mini .bm-side.bm-won .bm-comp { color: #e6efff; }
.battle-mini .bm-side:not(.bm-won) { opacity: .62; }

.bm-tag {
  display: inline-block; width: 15px; text-align: center; border-radius: 4px;
  font-size: 10px; font-weight: 600; line-height: 15px;
}
.bm-tag-atk { color: var(--accent); background: rgba(78, 168, 255, .16); }
.bm-tag-def { color: var(--warn); background: rgba(255, 181, 71, .16); }

.bm-crown {
  font-size: 10px; font-weight: 700; padding: 0 4px; border-radius: 4px;
  color: #0b1220; background: #7fd1ff; line-height: 15px;
}
.bm-player { color: #9db2d4; white-space: nowrap; }
.bm-comp { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #cddcf3; }
.bm-form { color: #8fa3c4; white-space: nowrap; }
.bm-meta { color: #5d6f8f; margin-top: 2px; }
/* 开战兵力：一眼看出双方以多少兵力交手 */
.bm-force { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 3px; font-size: 11.5px; }
.bm-force-k { color: #5d6f8f; }
.bm-force-v { color: #9db2d4; font-variant-numeric: tabular-nums; }

/* 关注的一方（当前 pair 里的那套阵容） */
.battle-mini .bm-side.bm-focus .bm-comp { text-decoration: underline; text-decoration-color: rgba(120, 180, 255, .45); }

/* ---------------- 全局拖拽遮罩 ---------------- */
.global-drop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(8, 12, 24, .8); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .18s;
}
.global-drop.show { opacity: 1; }
.global-drop-inner {
  padding: 30px 54px; border: 2px dashed var(--accent); border-radius: 18px;
  font-size: 17px; font-weight: 600; color: var(--accent);
  box-shadow: 0 0 50px rgba(78, 168, 255, .35);
}

/* ---------------- Toast ---------------- */
.toast-host { position: fixed; right: 18px; bottom: 18px; z-index: 120; display: flex; flex-direction: column; gap: 8px; }
.toast {
  padding: 10px 14px; border-radius: 10px; font-size: 12.5px; line-height: 1.6;
  background: rgba(22, 32, 58, .98); border: 1px solid var(--line);
  box-shadow: var(--shadow); max-width: 360px;
  animation: toastIn .28s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes toastIn { from { opacity: 0; transform: translateX(24px); } }
.toast.ok { border-color: rgba(56, 211, 159, .5); }
.toast.err { border-color: rgba(255, 90, 110, .5); }
.toast b { color: var(--accent); }

/* ---------------- 生成内置数据：抽屉面板 ---------------- */
.btn-accent {
  background: linear-gradient(135deg, #2f9e6e, #2380c4);
  border-color: transparent; font-weight: 600;
}
.btn-accent:hover { box-shadow: 0 4px 16px rgba(47, 158, 110, .35); }

.drawer-mask {
  position: fixed; inset: 0; z-index: 190;
  background: rgba(4, 8, 18, .62); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.drawer-mask.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 404px; max-width: 92vw; z-index: 200;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #121c33, #0c1425);
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 46px rgba(0, 0, 0, .5);
  transform: translateX(102%);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.drawer.open { transform: none; }

.drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 16px 16px 12px; border-bottom: 1px solid var(--line);
}
.drawer-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.drawer-sub { margin: 4px 0 0; font-size: 11.5px; color: var(--text-faint); }
.drawer-close {
  flex: none; width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(30, 44, 74, .5); color: var(--text-dim);
  font-size: 13px; line-height: 1; transition: .18s;
}
.drawer-close:hover { color: #fff; border-color: var(--hot); }

.drawer-body { flex: 1; overflow-y: auto; padding: 0 16px 22px; }
.drawer-body::-webkit-scrollbar { width: 8px; }
.drawer-body::-webkit-scrollbar-thumb { background: #26334f; border-radius: 8px; }

.select {
  width: 100%; padding: 8px 10px; border-radius: 9px; outline: none; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text); font-size: 12.5px;
}
.select:focus { border-color: var(--accent); }

.gen-preview { font-size: 12px; line-height: 1.7; }
.gen-preview .gp-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 5px 0; border-bottom: 1px dashed var(--line-soft);
}
.gen-preview .gp-row b { color: var(--accent); font-variant-numeric: tabular-nums; }
.gen-preview .gp-code {
  margin-top: 8px; padding: 8px 10px; border-radius: 8px; overflow-x: auto;
  background: #0a1120; border: 1px solid var(--line-soft);
  color: var(--text-dim); font-family: Consolas, "Courier New", monospace; font-size: 11px;
  white-space: pre; line-height: 1.5;
}
.gen-preview .gp-warn { color: var(--hot); }
.gen-preview .gp-ok { color: var(--good); }

/* ---------------- 同盟分析 ---------------- */
.ally-wrap {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 218px minmax(0, 1fr);
}
.ally-list { border-right: 1px solid var(--line); overflow-y: auto; padding: 10px; }
.ally-list::-webkit-scrollbar { width: 8px; }
.ally-list::-webkit-scrollbar-thumb { background: #26334f; border-radius: 8px; }

.ally-item {
  padding: 9px 10px; margin-bottom: 6px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line-soft); background: rgba(22, 32, 58, .5);
  transition: .18s;
}
.ally-item:hover { border-color: var(--accent); background: rgba(78, 168, 255, .1); }
.ally-item.active { border-color: rgba(78, 168, 255, .55); background: rgba(78, 168, 255, .16); }
.ai-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ai-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ai-rate { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-dim); }
.ai-meta { font-size: 11px; color: var(--text-faint); margin: 3px 0 5px; }

/* ---------------- 武将卡面图标 ---------------- */
/* 列表项：左侧卡面缩略图 + 右侧数据（只作用于武将列表，不影响其它 ally-list） */
.hero-item { display: flex; gap: 9px; align-items: flex-start; }
.hero-item .hero-icon {
  width: 36px; height: 56px; flex: none; border-radius: 5px; overflow: hidden;
  border: 1px solid var(--line-soft); background: rgba(10, 18, 34, .8);
}
.hero-item .hero-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-item .hero-body { flex: 1; min-width: 0; }

/* 详情页头部：左侧大卡面 + 右侧标题/概要 */
.hero-head { display: flex; gap: 14px; align-items: flex-start; }
.hero-head .hero-portrait {
  width: 92px; height: 142px; flex: none; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line-soft); background: rgba(10, 18, 34, .8);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
.hero-head .hero-portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-head-text { flex: 1; min-width: 0; }

/* 素材缺失时的文字占位（不破坏布局） */
.hero-icon-ph {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: var(--text-dim);
  background: linear-gradient(160deg, rgba(78, 168, 255, .2), rgba(124, 92, 255, .14));
}
.hero-portrait .hero-icon-ph { font-size: 26px; }

.ally-detail { overflow-y: auto; padding: 16px 18px 30px; }
.ally-detail::-webkit-scrollbar { width: 9px; }
.ally-detail::-webkit-scrollbar-thumb { background: #26334f; border-radius: 8px; }

.ally-head h2 { margin: 0; font-size: 18px; font-weight: 600; }
.ally-head-meta { margin-top: 5px; font-size: 12px; color: var(--text-faint); }

.ally-conclusion {
  margin: 14px 0; padding: 11px 13px; border-radius: 10px; font-size: 12.5px; line-height: 1.75;
  background: linear-gradient(135deg, rgba(78, 168, 255, .13), rgba(124, 92, 255, .1));
  border: 1px solid rgba(78, 168, 255, .32);
}
.ally-conclusion b { color: var(--accent); }
/* 结论里的分行与关键信息配色 */
.ally-conclusion .ac-title { margin-right: 6px; }
.ac-line { display: block; line-height: 1.9; }
.ac-comp { color: #dbe7ff; font-weight: 600; }
.ac-strong { color: #e5c07b; font-weight: 700; font-variant-numeric: tabular-nums; }
.ac-good { color: #35c46b; font-weight: 700; font-variant-numeric: tabular-nums; }
.ac-bad { color: #e5656e; font-weight: 700; font-variant-numeric: tabular-nums; }
.ac-warn { color: #ffb547; font-weight: 600; }
.ac-note { color: #8dc0ff; }
.ac-dim { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.ally-conclusion.warn {
  background: linear-gradient(135deg, rgba(255, 181, 71, .13), rgba(255, 90, 110, .08));
  border-color: rgba(255, 181, 71, .42);
}
.ally-conclusion.warn b { color: var(--warn); }

.ally-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

.ally-section { margin-top: 20px; }
.ally-section h3 {
  margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .5px;
  display: flex; align-items: baseline; gap: 8px;
  padding-bottom: 7px; border-bottom: 1px solid var(--line-soft);
}
.ally-note { font-size: 11px; font-weight: 400; color: var(--text-faint); }

/* 主流队伍 / 惯用阵型 */
.comp-list { display: flex; flex-direction: column; gap: 7px; }
.comp-row {
  padding: 8px 10px; border-radius: 9px; cursor: pointer;
  background: rgba(22, 32, 58, .55); border: 1px solid var(--line-soft);
  transition: .16s;
}
.comp-row:hover { border-color: var(--accent); background: rgba(78, 168, 255, .1); }
.cr-line { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.cr-name { flex: 1; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-share { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--accent); }
.cr-sub { display: flex; gap: 14px; margin-top: 5px; font-size: 11px; color: var(--text-faint); }
.cr-sub span { font-variant-numeric: tabular-nums; }
.comp-row .tag {
  font-size: 10px; padding: 1px 6px; border-radius: 20px;
  border: 1px solid var(--line); color: var(--text-faint); white-space: nowrap;
}

/* 主力玩家表格 */
.ally-table { font-size: 12px; }
.at-head, .at-row {
  display: grid; grid-template-columns: 1.1fr 56px 58px 60px 48px minmax(0, 1.5fr);
  gap: 8px; align-items: center; padding: 6px 8px;
}
.at-head { color: var(--text-faint); font-size: 11px; border-bottom: 1px solid var(--line-soft); }
.at-row { border-bottom: 1px solid var(--line-soft); border-radius: 6px; }
.at-row:hover { background: rgba(78, 168, 255, .08); }
.at-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-comp { color: var(--text-faint); display: flex; align-items: center; gap: 6px; min-width: 0; }
.at-comp > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.at-detail {
  flex: none; font-size: 11px; padding: 2px 8px; border-radius: 6px; cursor: pointer;
  border: 1px solid rgba(78, 168, 255, .45); background: rgba(78, 168, 255, .12);
  color: #8dc0ff; transition: .15s;
}
.at-detail:hover { background: rgba(78, 168, 255, .26); color: #dbe7ff; border-color: rgba(78, 168, 255, .7); }
/* 「详情」右侧的「战报」按钮 */
.at-comp .at-detail + .at-detail { margin-left: 2px; }
.at-rate { font-variant-numeric: tabular-nums; font-weight: 600; }
.at-red { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---- 主力玩家筛选栏：三组条件可任意叠加 ---- */
.pt-filter {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px;
  padding: 9px 11px; margin-bottom: 10px;
  background: rgba(22, 32, 58, .5); border: 1px solid var(--line-soft); border-radius: 9px;
}
.pt-filter .ptf { display: block; min-width: 132px; flex: 0 0 auto; }
.pt-filter .ptf-k { display: block; font-size: 11px; color: var(--text-faint); margin-bottom: 5px; }
.pt-filter .ptf-k b { color: var(--accent); font-variant-numeric: tabular-nums; }
.pt-filter input[type=range] { width: 132px; }
.ptf-group { display: block; }
.ptf-reds { display: flex; gap: 4px; flex-wrap: wrap; }
.ptf-red {
  font-size: 11px; padding: 2px 7px; border-radius: 6px; cursor: pointer; transition: .15s;
  border: 1px solid #2a3757; background: #16203a; color: #8fa3c4;
}
.ptf-red:hover { border-color: rgba(78, 168, 255, .5); color: #dbe7ff; }
.ptf-red.on { border-color: rgba(78, 168, 255, .85); background: rgba(78, 168, 255, .22); color: #dbe7ff; font-weight: 600; }
.ptf-tip { color: #5d6f8f; font-size: 10px; margin-left: 4px; }
.ptf-reset {
  font-size: 11px; padding: 3px 10px; border-radius: 6px; cursor: pointer;
  border: 1px solid #2a3757; background: #16203a; color: #8fa3c4; transition: .15s;
}
.ptf-reset:hover { border-color: rgba(78, 168, 255, .5); color: #dbe7ff; }
.pt-sum { font-size: 11.5px; color: var(--text-faint); margin-bottom: 6px; }
.pt-sum b { color: var(--accent); font-variant-numeric: tabular-nums; }
.pt-more { color: #5d6f8f; margin-left: 4px; }
.pt-empty { padding: 12px 8px; font-size: 12px; color: var(--text-faint); }

/* 反制推荐 */
.advice-group { margin-bottom: 16px; }
.advice-group:last-of-type { margin-bottom: 6px; }
.advice-group-title { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.agt-name { font-size: 12px; font-weight: 600; color: var(--text-dim); position: relative; padding-left: 10px; }
.agt-name::before {
  content: ''; position: absolute; left: 0; top: 2px; bottom: 2px;
  width: 3px; border-radius: 2px; background: var(--accent);
}
.agt-note { font-size: 11px; color: var(--text-faint); }

.advice-card {
  padding: 11px 12px; margin-bottom: 9px; border-radius: 11px; cursor: pointer;
  background: rgba(22, 32, 58, .6); border: 1px solid var(--line-soft);
  transition: .18s;
}
.advice-card:hover { border-color: var(--accent); transform: translateX(2px); }
.advice-card.best {
  border-color: rgba(56, 211, 159, .5);
  background: linear-gradient(135deg, rgba(56, 211, 159, .12), rgba(22, 32, 58, .6));
}
.ad-top { display: flex; align-items: center; gap: 10px; }
.ad-rank {
  flex: none; font-size: 10.5px; padding: 2px 8px; border-radius: 20px;
  background: rgba(78, 168, 255, .16); color: var(--accent); border: 1px solid rgba(78, 168, 255, .3);
}
.advice-card.best .ad-rank { background: rgba(56, 211, 159, .16); color: var(--good); border-color: rgba(56, 211, 159, .35); }
.ad-name { flex: 1; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-edge {
  flex: none; font-size: 10.5px; padding: 2px 8px; border-radius: 20px; border: 1px solid;
  white-space: nowrap;
}
.ad-edge.good { color: var(--good); border-color: rgba(56, 211, 159, .4); background: rgba(56, 211, 159, .1); }
.ad-edge.slight { color: var(--accent); border-color: rgba(78, 168, 255, .35); background: rgba(78, 168, 255, .1); }
.ad-edge.bad { color: var(--hot); border-color: rgba(255, 90, 110, .4); background: rgba(255, 90, 110, .1); }
.ad-rate { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ad-sub { margin-top: 5px; font-size: 11px; color: var(--text-faint); }
.ad-detail { margin-top: 8px; padding-top: 7px; border-top: 1px dashed var(--line-soft); display: flex; flex-direction: column; gap: 4px; }
.ad-detail-row { display: grid; grid-template-columns: minmax(0, 1fr) 126px 46px; gap: 8px; font-size: 11.5px; align-items: center; }
.ad-d-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); }
.ad-d-n { color: var(--text-faint); font-variant-numeric: tabular-nums; font-size: 11px; }
.ad-d-rate { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* 推荐卡片里的风险提示：这套阵容怕对方哪几套 */
.ad-risks {
  margin-top: 9px; padding: 8px 10px; border-radius: 8px;
  background: rgba(255, 181, 71, .07); border: 1px solid rgba(255, 181, 71, .28);
}
.ad-risk-title { font-size: 11px; color: var(--warn); font-weight: 600; margin-bottom: 5px; }
.ad-risk-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 108px 50px;
  gap: 8px; align-items: center; padding: 3px 4px;
  font-size: 11.5px; border-radius: 5px; transition: .15s;
}
.ad-risk-row:hover { background: rgba(255, 181, 71, .12); }
.ad-risk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); }
.ad-risk-n { color: var(--text-faint); font-variant-numeric: tabular-nums; font-size: 11px; }
.ad-risk-rate { text-align: right; font-weight: 600; color: var(--hot); font-variant-numeric: tabular-nums; }

/* 逐队伍单点克制 */
.percomp {
  padding: 9px 11px; margin-bottom: 8px; border-radius: 10px;
  background: rgba(22, 32, 58, .45); border: 1px solid var(--line-soft);
}
.pc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.pc-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-meta { font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.pc-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 50px 46px auto; gap: 8px;
  align-items: center; padding: 5px 7px; border-radius: 7px; cursor: pointer;
  font-size: 12px; transition: .15s;
}
.pc-weak {
  font-size: 10px; padding: 1px 6px; border-radius: 20px;
  color: var(--warn); border: 1px solid rgba(255, 181, 71, .4); background: rgba(255, 181, 71, .1);
  white-space: nowrap;
}
.pc-row:hover { background: rgba(78, 168, 255, .12); }
.pc-opp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); }
.pc-n { color: var(--text-faint); font-variant-numeric: tabular-nums; font-size: 11px; }
.pc-rate { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* 武将 / 技能小表格 */
.hero-table .ht-head, .hero-table .ht-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 72px 62px;
  gap: 8px; align-items: center; padding: 6px 8px;
}
.hero-table .ht-head { color: var(--text-faint); font-size: 11px; border-bottom: 1px solid var(--line-soft); }
.hero-table .ht-row {
  border-bottom: 1px solid var(--line-soft); border-radius: 6px;
  font-size: 12px; cursor: pointer; transition: .15s;
}
.hero-table .ht-row:hover { background: rgba(78, 168, 255, .08); }
.hero-table .ht-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero-table .ht-head > div:not(:first-child),
.hero-table .ht-row > div:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }

/* 红度 / 品级 曲线 */
.curve-box {
  margin-bottom: 10px; padding: 9px 11px; border-radius: 10px;
  background: rgba(22, 32, 58, .45); border: 1px solid var(--line-soft);
}
.curve-title { font-size: 11.5px; color: var(--text-dim); font-weight: 600; margin-bottom: 7px; }
.curve-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) 56px 50px;
  gap: 8px; align-items: center; font-size: 11.5px; padding: 2px 0;
}
.curve-label { color: var(--text-faint); }
.curve-bar { height: 8px; background: #1b2540; border-radius: 5px; overflow: hidden; }
.curve-bar i { display: block; height: 100%; border-radius: 5px; transition: width .4s cubic-bezier(.2,.8,.2,1); }
.curve-n { color: var(--text-faint); text-align: right; font-variant-numeric: tabular-nums; }
.curve-rate { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* 网络图的 2D / 3D 切换 */
.graph-mode {
  position: absolute; left: 14px; top: 12px; z-index: 5;
  padding: 8px 10px 6px; border-radius: 10px;
  background: rgba(14, 21, 38, .82); border: 1px solid var(--line-soft);
  backdrop-filter: blur(6px);
}
.graph-mode .seg { width: 168px; }
.graph-mode .hint { margin: 6px 0 0; font-size: 10.5px; }

/* 版本标识：用来确认浏览器加载的是新代码还是缓存 */
.build-tag {
  margin-left: 8px; padding: 1px 7px; border-radius: 20px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .3px;
  color: #7fd1ff; background: rgba(78, 168, 255, .13);
  border: 1px solid rgba(78, 168, 255, .35); vertical-align: middle;
}
.build-tag.stale { color: #ffb547; background: rgba(255, 181, 71, .13); border-color: rgba(255, 181, 71, .4); }

/* 检查更新面板 */
.topbar-actions { position: relative; }
.update-panel {
  position: absolute; right: 0; top: calc(100% + 8px);
  width: 390px; max-width: 92vw; max-height: 72vh; overflow: auto;
  padding: 14px 16px; border-radius: 12px; text-align: left;
  background: #101a2e; border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .72);
  display: none; z-index: 80;
}
.update-panel.show { display: block; animation: rowIn .22s ease; }
.up-title { font-size: 14px; font-weight: 600; color: #e6efff; margin-bottom: 4px; }
.up-title.up-new { color: #7fd1ff; }
.up-title.up-ok { color: #4ade80; }
.up-title.up-warn { color: var(--warn); }
.up-sub { font-size: 11.5px; color: var(--text-faint); margin-bottom: 8px; }
.up-name { font-size: 12.5px; color: #cddcf3; font-weight: 600; margin-bottom: 6px; }
.up-notes { margin: 0 0 10px; padding-left: 18px; font-size: 12px; color: var(--text-dim); line-height: 1.7; }
.up-notes li { margin-bottom: 2px; }
.up-actions { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.up-btn {
  display: inline-block; padding: 6px 12px; border-radius: 8px; font-size: 12px;
  color: #cddcf3; background: rgba(78, 168, 255, .12);
  border: 1px solid rgba(78, 168, 255, .35); text-decoration: none; transition: .16s;
}
.up-btn:hover { background: rgba(78, 168, 255, .22); color: #fff; }
.up-btn-main { background: linear-gradient(135deg, #2f7fe0, #6b53e8); color: #fff; border-color: transparent; font-weight: 600; }
.up-how {
  font-size: 11.5px; color: var(--text-faint); line-height: 1.75;
  background: rgba(22, 32, 58, .6); border: 1px solid var(--line-soft);
  padding: 9px 11px; border-radius: 8px;
}
.up-how code { color: #9db2d4; background: rgba(120, 160, 220, .12); padding: 0 4px; border-radius: 3px; }
.up-script {
  display: flex; align-items: center; gap: 8px; margin: 6px 0;
  padding: 6px 9px; border-radius: 7px;
  background: rgba(78, 168, 255, .09); border: 1px solid rgba(78, 168, 255, .24);
}
.up-script span { color: var(--text-faint); font-size: 11px; white-space: nowrap; }
.up-script code { color: #9fe0ff; font-weight: 600; }
#btnCheckUpdate.has-new { color: #7fd1ff; border-color: rgba(78, 168, 255, .5); }
#btnCheckUpdate.has-new::after {
  content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 6px;
  border-radius: 50%; background: #ff5c7a; vertical-align: middle;
}

/* 兵种徽章：彩色小标签，一眼区分枪 / 弓 / 骑 / 盾 */
.troop-set { display: inline-flex; gap: 2px; margin-left: 5px; vertical-align: middle; }
.troop {
  display: inline-block; width: 15px; height: 15px; line-height: 15px;
  text-align: center; border-radius: 4px; font-size: 10px; font-weight: 700;
  border: 1px solid transparent; flex: none;
}
.t-qiang { color: #ffb547; background: rgba(255, 181, 71, .15); border-color: rgba(255, 181, 71, .42); }
.t-gong { color: #4ea8ff; background: rgba(78, 168, 255, .15); border-color: rgba(78, 168, 255, .42); }
.t-qi { color: #c084fc; background: rgba(192, 132, 252, .15); border-color: rgba(192, 132, 252, .42); }
.t-dun { color: #4ade80; background: rgba(74, 222, 128, .15); border-color: rgba(74, 222, 128, .42); }
.t-qi2 { color: #22d3ee; background: rgba(34, 211, 238, .15); border-color: rgba(34, 211, 238, .42); }
.t-xie { color: #f472b6; background: rgba(244, 114, 182, .15); border-color: rgba(244, 114, 182, .42); }
.t-shui { color: #38bdf8; background: rgba(56, 189, 248, .15); border-color: rgba(56, 189, 248, .42); }
.t-other { color: #8fa3c4; background: rgba(143, 163, 196, .15); border-color: rgba(143, 163, 196, .38); }

/* 阵容名 + 兵种 的组合 */
.cw { display: inline-flex; align-items: center; gap: 2px; min-width: 0; }
.cw .cw-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 武将页的兵种展示 */
.troop-inline { display: inline-flex; align-items: center; gap: 5px; }
.troop-name { font-size: 12.5px; }
.ai-meta { display: flex; align-items: center; gap: 6px; }

/* 活跃时段 */
.hour-chart {
  display: flex; align-items: flex-end; gap: 3px; height: 76px;
  padding: 8px 10px; border-radius: 10px;
  background: rgba(22, 32, 58, .5); border: 1px solid var(--line-soft);
}
.hc-col {
  flex: 1; border-radius: 3px 3px 0 0; min-height: 2px;
  background: linear-gradient(180deg, #4ea8ff, #2f6fd0);
  transition: opacity .2s;
}
.hc-col:hover { opacity: 1 !important; box-shadow: 0 0 10px rgba(78, 168, 255, .6); }
.hour-axis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-faint); margin-top: 4px; padding: 0 4px; }

/* ---------------- 窄屏 ---------------- */
@media (max-width: 1660px) {
  /* 窗口不够宽时优先保留色带说明，隐藏次要图例 */
  .legend-extra { display: none; }
}
@media (max-width: 1280px) {
  .layout { grid-template-columns: 250px minmax(0, 1fr) 290px; }
  .stat-strip .stat:nth-child(n+4) { display: none; }
}
@media (max-width: 1024px) {
  html, body { overflow: auto; }
  .layout { grid-template-columns: 1fr; height: auto; }
  .stage { height: 66vh; }
  .panel { max-height: none; }
}

/* 装备 / 兵书分析页 */
.gear-wrap { position: absolute; inset: 0; overflow-y: auto; padding: 16px 20px 40px; }
.gear-head { margin-bottom: 14px; }
.gear-head h2 { font-size: 16px; font-weight: 600; color: #e6efff; margin-bottom: 4px; }
.gear-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 1200px) { .gear-two { grid-template-columns: 1fr; } }
.gear-sub { margin: 12px 0 6px; font-size: 12px; font-weight: 600; color: var(--text-dim); }
.gear-attr .ht-head, .gear-attr .ht-row { grid-template-columns: 130px repeat(4, minmax(0, 1fr)); }
.gear-bin { font-size: 11.5px; text-align: center; }
.gear-bin-l { color: var(--text-faint); font-size: 10.5px; margin-bottom: 1px; }
.gear-bin-v b { font-size: 13px; }
.gear-bin-n { color: #5d6f8f; margin-left: 5px; font-size: 10.5px; }
/* 属性分档块：把「实际数值范围」和「具体取值」都摊开 */
.gear-attr-block { display: flex; flex-direction: column; gap: 12px; margin-bottom: 6px; }
.gear-attr-card { border: 1px solid #1e2a44; border-radius: 8px; padding: 10px 12px; background: #0d1526; }
.gear-attr-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.gear-attr-head b { font-size: 13px; color: #dbe7ff; }
.gear-attr-meta { font-size: 11.5px; color: #7d90b0; }
.gear-bins { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 900px) { .gear-bins { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gear-bin2 { border: 1px solid #1b2740; border-radius: 6px; padding: 6px 8px; background: #101a2e; }
.gear-bin2-l { font-size: 11px; color: #7d90b0; }
.gear-bin2-r { font-size: 16px; font-weight: 700; line-height: 1.25; }
.gear-bin2-n { font-size: 11px; color: #8fa3c4; }
.gear-bin2-a { font-size: 10.5px; color: #5d6f8f; margin-top: 1px; }
.gear-vals-label { font-size: 11px; color: #7d90b0; margin: 9px 0 5px; }
.gear-vals { display: flex; flex-wrap: wrap; gap: 6px; }
.gear-val { display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 7px; border-radius: 999px;
  background: #101a2e; border: 1px solid #1b2740; font-size: 11.5px; }
.gear-val b { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.gear-val-n { color: #7d90b0; font-size: 10.5px; }
/* 维度影响排行 + 逐场对比（内战分析） */
.dim-list { display: flex; flex-direction: column; gap: 6px; }
.dim-row { display: grid; grid-template-columns: 110px 1fr 54px 54px 62px 76px; align-items: center; gap: 8px;
  padding: 5px 8px; border-radius: 6px; background: #101a2e; border: 1px solid #1b2740; }
.dim-name { font-size: 12px; color: #dbe7ff; }
.dim-bar { height: 8px; background: #16203a; border-radius: 4px; overflow: hidden; }
.dim-bar i { display: block; height: 100%; border-radius: 4px; }
.dim-rate { font-size: 14px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.dim-gap { font-size: 12px; text-align: right; color: #9db2d4; font-variant-numeric: tabular-nums; }
.dim-n { font-size: 11px; text-align: right; color: #7d90b0; }
.dim-tag { font-size: 11px; text-align: right; color: #8fa3c4; }

.mc-table { overflow-x: auto; border: 1px solid #1e2a44; border-radius: 8px; }
.mc-head, .mc-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr);
  border-bottom: 1px solid #16203a; }
.mc-head { background: #101a2e; font-size: 11.5px; color: #8fa3c4; }
.mc-head > div, .mc-row > div { padding: 5px 7px; font-size: 11.5px; text-align: center; white-space: nowrap; }
.mc-row:nth-child(even) { background: rgba(255,255,255,0.015); }
.mc-idx { color: #5d6f8f; }
.mc-win { font-weight: 600; }
.mc-win.is-atk { color: #4ea1ff; }
.mc-win.is-def { color: #ff9f43; }
.mc-win.is-draw { color: #8fa3c4; }
.mc-v { font-variant-numeric: tabular-nums; }
.mc-v b { font-weight: 600; }
.mc-v.mc-hi b { color: #35c46b; }
.mc-v.mc-lo b { color: #e5656e; }
.mc-v.mc-eq b { color: #8fa3c4; }
.mc-diff { font-size: 10px; opacity: 0.8; }
.mc-v.mc-na { color: #4a5a76; }
/* 内战分析：分区块对比布局 */
.vs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .vs-grid { grid-template-columns: 1fr; } }
.vs-box { border: 1px solid #1e2a44; border-radius: 8px; padding: 10px 12px; background: #0d1526; }
.vs-box-t { font-size: 12px; font-weight: 600; color: #dbe7ff; margin-bottom: 8px; }
.vs-box .dim-row { grid-template-columns: 92px 1fr 48px 48px 52px 60px; gap: 6px; padding: 4px 6px; }
.vs-box .dim-name { font-size: 11.5px; }
.vs-box .dim-rate { font-size: 13px; }
.vs-box .dim-gap, .vs-box .dim-n, .vs-box .dim-tag { font-size: 10.5px; }
/* 武将逐一对位 */
.hp-wrap { display: grid; grid-template-columns: 180px 1fr; gap: 14px; }
@media (max-width: 1000px) { .hp-wrap { grid-template-columns: 1fr; } }
.hp-list { display: flex; flex-direction: column; gap: 4px; max-height: 520px; overflow-y: auto; }
.hp-item { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 6px; background: #101a2e; border: 1px solid #1b2740; cursor: pointer; }
.hp-item:hover { border-color: #2a3a5c; }
.hp-item.active { border-color: #3b82f6; background: #14243f; }
.hp-name { font-size: 12.5px; color: #dbe7ff; }
.hp-n { font-size: 11px; color: #7d90b0; }
.hp-detail { min-width: 0; }
.hp-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.hp-head b { font-size: 14px; color: #dbe7ff; }
.hp-head-n { font-size: 11.5px; color: #7d90b0; }
.hp-table { overflow-x: auto; border: 1px solid #1e2a44; border-radius: 8px; margin-top: 4px; }
.hp-head-row, .hp-row { display: grid; grid-template-columns: 76px repeat(4, 78px) 1.4fr 1.4fr;
  border-bottom: 1px solid #16203a; }
.hp-head-row { background: #101a2e; font-size: 11px; color: #8fa3c4; }
.hp-head-row > div, .hp-row > div { padding: 5px 7px; font-size: 11.5px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-row:nth-child(even) { background: rgba(255,255,255,0.015); }
/* 属性值分档（武将对位） */
.val-list { display: flex; flex-direction: column; gap: 6px; }
.val-row { display: grid; grid-template-columns: 84px repeat(4, minmax(0, 1fr)) 62px;
  align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px;
  background: #101a2e; border: 1px solid #1b2740; }
.val-name { font-size: 12px; color: #dbe7ff; }
.val-bin { text-align: center; }
.val-bin-l { font-size: 10.5px; color: #5d6f8f; margin-bottom: 1px; }
.val-bin-v b { font-size: 14px; }
.val-bin-n { font-size: 10.5px; color: #7d90b0; margin-left: 4px; }
.val-spread { text-align: right; font-size: 13px; font-weight: 700; color: #9db2d4; font-variant-numeric: tabular-nums; }
.val-more { margin-top: 10px; }
.val-more > summary { font-size: 11.5px; color: #7d90b0; cursor: pointer; padding: 4px 0; }
.val-more > summary:hover { color: #9db2d4; }
/* 武将对位：特技 / 特效对比 */
.trait-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1100px) { .trait-list { grid-template-columns: 1fr; } }
.trait-box { border: 1px solid #1e2a44; border-radius: 8px; padding: 9px 11px; background: #0d1526; }
.trait-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.trait-head b { font-size: 12px; color: #dbe7ff; }
.trait-base { font-size: 10.5px; color: #7d90b0; }
.trait-table { display: flex; flex-direction: column; }
.trait-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px 42px 58px; align-items: center;
  column-gap: 4px; padding: 3px 2px; border-radius: 4px; font-size: 11.5px; }
.trait-row-h { color: #5d6f8f; }
.trait-row-h > div { overflow: visible; text-overflow: clip; }
.trait-row:nth-child(odd) { background: rgba(255,255,255,0.02); }
.trait-row-h { font-size: 10.5px; color: #5d6f8f; }
.trait-name { color: #c7d6f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trait-n { text-align: right; color: #8fa3c4; font-size: 11px; }
.trait-rate { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.trait-delta { text-align: right; font-variant-numeric: tabular-nums; color: #8fa3c4; }
.trait-delta.pos { color: #35c46b; }
.trait-delta.neg { color: #e5656e; }
/* 可折叠区块（内战分析） */
details.fold { border-top: 1px solid #16203a; padding-top: 0; }
details.fold > .fold-summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  cursor: pointer; list-style: none; padding: 10px 2px; margin: 0; user-select: none; }
details.fold > .fold-summary::-webkit-details-marker { display: none; }
details.fold > .fold-summary::before { content: '▸'; color: #5d6f8f; font-size: 11px; transition: transform .15s; }
details.fold[open] > .fold-summary::before { content: '▾'; }
details.fold > .fold-summary:hover::before { color: #8fa3c4; }
details.fold > .fold-summary .fold-title { font-size: 13.5px; font-weight: 600; color: #dbe7ff; }
details.fold[open] > .fold-summary { border-bottom: 1px solid #16203a; margin-bottom: 10px; }
details.fold > .fold-summary + * { margin-top: 0; }
/* 回合数分档 */
.rb-wrap { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
.rb-title { font-size: 12px; font-weight: 600; color: #dbe7ff; margin-bottom: 2px; }
.rb-row { display: grid; grid-template-columns: 132px 1fr 52px 56px; align-items: center; gap: 10px; }
.rb-label { font-size: 11.5px; color: #9db2d4; }
.rb-bar { height: 9px; background: #16203a; border-radius: 5px; overflow: hidden; }
.rb-bar i { display: block; height: 100%; border-radius: 5px; }
.rb-rate { text-align: right; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.rb-n { text-align: right; font-size: 11px; color: #7d90b0; }
/* 玩家分析：队伍武将红度卡片 */
.pc-box { border: 1px solid #1e2a44; border-radius: 8px; padding: 10px 12px; background: #0d1526; margin-bottom: 10px; }
.pc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.pc-name { font-size: 13px; font-weight: 600; color: #dbe7ff; }
.pc-meta { display: flex; gap: 12px; font-size: 11.5px; color: #8fa3c4; }
.pc-row { display: grid; grid-template-columns: 1.5fr 118px 56px 50px 1.6fr; align-items: center;
  gap: 8px; padding: 5px 4px; border-radius: 4px; font-size: 12px; }
.pc-row:nth-child(odd) { background: rgba(255,255,255,0.02); }
.pc-row-h { font-size: 10.5px; color: #5d6f8f; }
.pc-row-sum { border-top: 1px solid #1b2740; font-weight: 600; color: #dbe7ff; }
.pc-hn { display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-red { display: flex; align-items: center; gap: 6px; }
.pc-red-n { color: #9db2d4; font-variant-numeric: tabular-nums; font-size: 11.5px; }
.pc-pin, .pc-lv { text-align: center; color: #c7d6f0; font-variant-numeric: tabular-nums; }
.pc-eq { font-size: 11px; color: #7d90b0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.red-dots { display: inline-flex; gap: 2px; }
.red-dot { width: 8px; height: 8px; border-radius: 50%; background: #22304d; display: inline-block; }
.red-dot.on { background: #e5656e; }

/* 克制建议 */
.adv-item { border: 1px solid #1e2a44; border-radius: 8px; padding: 9px 11px; background: #0d1526; margin-bottom: 8px; }
.adv-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.adv-rank { color: #5d6f8f; font-size: 12px; }
.adv-comp { font-size: 12.5px; font-weight: 600; color: #dbe7ff; }
.adv-rate { font-size: 13px; font-weight: 700; margin-left: auto; }
.adv-cov { font-size: 11px; color: #8fa3c4; }
.adv-reason { font-size: 11.5px; color: #8fa3c4; margin-top: 4px; }
/* 玩家分析：逐条对阵明细（个人交手 / 全局口径都标出来） */
.adv-detail { margin-top: 5px; display: flex; flex-direction: column; gap: 2px; }
.adv-detail-row { display: grid; grid-template-columns: minmax(0,1fr) auto 52px 150px; align-items: center;
  gap: 10px; font-size: 11px; color: #8fa3c4; }
.adv-d-name { display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adv-d-n { font-variant-numeric: tabular-nums; }
.adv-d-rate { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.adv-d-src { color: #5d6f8f; text-align: right; }
.adv-risks { font-size: 11.5px; color: #e5a86b; margin-top: 4px; }
.adv-risks-t { color: #8fa3c4; }
/* 玩家筛选栏 */
.pf-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; margin-bottom: 8px;
  background: #0d1526; border: 1px solid #1b2740; border-radius: 8px; }
.pf-item { display: flex; flex-direction: column; gap: 2px; flex: 1 1 88px; min-width: 0; }
.pf-item-kw { flex: 2 1 150px; }
.pf-label { font-size: 10px; color: #5d6f8f; }
.pf-select, .pf-input { width: 100%; background: #101a2e; color: #c7d6f0;
  border: 1px solid #22304d; border-radius: 5px; padding: 4px 6px; font-size: 11.5px; outline: none; }
.pf-select:focus, .pf-input:focus { border-color: #3b82f6; }
.pf-count { flex: 1 1 100%; font-size: 11px; color: #7d90b0; padding-top: 2px; }
/* 玩家队伍卡片的胜/负/平 */
.pc-wl { color: #8fa3c4; font-variant-numeric: tabular-nums; }
/* 被筛选排除的场次提示 */
.pc-more { color: #e5a86b; font-size: 11px; }
/* 场次太少、胜率不可信 */
.ai-weak, .pc-weak { color: #e5a86b; font-size: 10.5px; }
/* 玩家分析：单点克制的一行（阵容 / 数据来源 / 胜率） */
.pc-xrow { display: grid; grid-template-columns: minmax(0,1fr) 148px 56px; align-items: center; gap: 10px;
  padding: 4px 8px; border-radius: 5px; font-size: 12px; }
.pc-xrow:nth-child(odd) { background: rgba(255,255,255,0.02); }
.pc-xrow:hover { background: rgba(78, 168, 255, .12); }
.pc-xsrc { color: #5d6f8f; font-size: 11px; }
.pc-xrate { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
/* 战报浮层 */
.bl-mask { position: fixed; inset: 0; background: rgba(4, 8, 16, 0.72); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 24px; }
.bl-panel { width: min(960px, 100%); max-height: 90vh; display: flex; flex-direction: column;
  background: #0b1424; border: 1px solid #22304d; border-radius: 12px; overflow: hidden;
  box-shadow: 0 18px 48px rgba(0,0,0,0.55); }
.bl-title { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid #1b2740; background: #0d1526; }
.bl-title-l { font-size: 13.5px; color: #dbe7ff; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.bl-detail { font-size: 11px; padding: 1px 7px; border-radius: 6px; cursor: pointer;
  border: 1px solid rgba(78, 168, 255, .45); background: rgba(78, 168, 255, .12);
  color: #8dc0ff; transition: .15s; margin-left: 2px; }
.bl-detail:hover { background: rgba(78, 168, 255, .26); color: #dbe7ff; border-color: rgba(78, 168, 255, .7); }
.bl-close { background: transparent; border: none; color: #7d90b0; font-size: 20px; line-height: 1;
  cursor: pointer; padding: 2px 6px; border-radius: 4px; }
.bl-close:hover { background: #1b2740; color: #dbe7ff; }
.bl-body { overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; }

/* ---- 阵容配置详情浮层（同一套阵容的不同配置） ---- */
.hc-panel { width: min(1080px, 100%); }
.hc-count { color: #7d90b0; font-size: 12px; margin-left: 6px; }
/* 配置浮窗的排序切换 */
.hc-sort { display: inline-flex; gap: 4px; margin-left: 10px; }
.hc-sort-btn {
  font-size: 11px; padding: 2px 9px; border-radius: 6px; cursor: pointer; transition: .15s;
  border: 1px solid #2a3757; background: #16203a; color: #8fa3c4;
}
.hc-sort-btn:hover { border-color: rgba(78, 168, 255, .5); color: #dbe7ff; }
.hc-sort-btn.on { border-color: rgba(78, 168, 255, .85); background: rgba(78, 168, 255, .22); color: #dbe7ff; font-weight: 600; }
.hc-body { overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 14px; }
.hc-body > * { flex: none; }

.hc-cfg { border: 1px solid #1e2a44; border-radius: 10px; background: #0d1526;
  flex: none; overflow: visible; }
.hc-cfg.main { border-color: rgba(78, 168, 255, .45); }
.hc-cfg-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 12px; background: #101a2e; font-size: 12px; color: #8fa3c4; }
.hc-cfg-rank { color: #dbe7ff; font-weight: 600; }
.hc-cfg.main .hc-cfg-rank { color: #7cc0ff; }
.hc-cfg-n { color: #c7d6f0; }
.hc-cfg-rate { font-weight: 600; }
.hc-cfg-red { color: #e5a86b; }
.hc-cfg-time { color: #5d6f8f; margin-left: auto; }

.hc-heroes { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 8px; padding: 10px; }
.hc-hero { border: 1px solid #1e2a44; border-radius: 8px; background: #0b1424; padding: 8px; }
.hc-hero-head { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 4px; }
.hc-hero-face { width: 34px; height: 52px; flex: none; border-radius: 4px; overflow: hidden;
  border: 1px solid #24314e; background: #0d1526; }
.hc-hero-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hc-hero-id { min-width: 0; flex: 1; }
.hc-hero-name { display: flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: #dbe7ff; }
.hc-hero-sub { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 3px; font-size: 10.5px; color: #8fa3c4; }
.hc-red { color: #e5a86b; }

/* 紧凑标签行：固定宽度小标题 + 自动换行的标签 */
.hc-block { display: flex; gap: 6px; align-items: flex-start; margin-top: 3px; }
.hc-block-t { flex: none; width: 26px; font-size: 10px; color: #5d6f8f; line-height: 17px; }
.hc-chips { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.hc-chip { display: inline-flex; align-items: center; gap: 3px; max-width: 100%;
  font-size: 11px; color: #dbe7ff; background: #16203a; border-radius: 4px;
  padding: 0 6px; line-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-chip-gear { color: #e5c07b; background: #1a2136; }
.hc-pin { font-size: 9.5px; color: #7cc0ff; flex: none; }
.hc-extra { font-size: 10px; color: #9d8cff; line-height: 17px; white-space: nowrap; }

/* ---- 阵型站位 ---- */
.hc-fm-bar { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px 0; }
.hc-fm-name { font-size: 12.5px; font-weight: 600; color: #e5c07b; }
.hc-fm-note { font-size: 11.5px; color: #7d90b0; }
.fm-board { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; }
.fm-lane { border: 1px dashed #22304d; border-radius: 10px; padding: 8px 10px 10px; background: rgba(13, 21, 38, .5); }
.fm-lane.empty { opacity: .45; }
.fm-lane-t { font-size: 11px; color: #5d6f8f; margin-bottom: 7px; letter-spacing: .5px; }
.fm-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.fm-slot { min-width: 0; border-radius: 8px; }
.fm-slot.filled { border: 1px solid rgba(78, 168, 255, .28); background: rgba(11, 20, 36, .8); padding: 8px; }
.fm-slot .hc-hero { border: none; background: transparent; padding: 0; }
.fm-demo { display: flex; align-items: center; justify-content: center; min-height: 64px;
  font-size: 12px; color: #8fa3c4; border-radius: 6px; background: rgba(78, 168, 255, .1); }
.fm-slot .hc-hero-head { margin-bottom: 3px; }
@media (max-width: 900px) {
  .fm-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .fm-slot.filled { padding: 5px; }
}
/* ===== 战报浮层：仿游戏战报卡 ===== */
/* 顶部横幅：深红棕底 + 金色统计（连战 N 场 · 斩获武勋） */
.bl2-title { background: linear-gradient(180deg, #4a2b22 0%, #33201c 55%, #2a1a17 100%);
  border-bottom: 1px solid #6b4633; }
.bl2-title .bl-title-l { color: #f0dcb4; }
.bl2-sum { flex: 1 1 auto; text-align: center; color: #e8c26a; font-size: 14px; letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6); white-space: nowrap; overflow: hidden; }
.bl2-sum b { font-size: 16px; margin-right: 10px; color: #ffd88a; }

.bl2-card { border: 1px solid #2b3a58; border-radius: 10px; overflow: hidden;
  background: linear-gradient(180deg, #101a2b 0%, #0b1220 100%);
  /* .bl-body 是 column 滚动容器：卡片必须禁止收缩，否则内容一多就被压扁而不是滚动 */
  flex: none; }
.bl2-card.is-win { box-shadow: inset 0 0 0 1px rgba(232, 194, 106, .25); }
/* 顶部条：攻守 + 第几场 + 地点 + 时间 */
.bl2-top { display: flex; align-items: center; gap: 12px; padding: 5px 12px;
  background: linear-gradient(180deg, #1b2942, #16233a); border-bottom: 1px solid #2b3a58;
  font-size: 11.5px; color: #8fa3c4; position: relative; }
/* 该场获得的武勋：固定在顶部条正中 */
.bl2-merit { position: absolute; left: 50%; transform: translateX(-50%);
  color: #e8c26a; font-weight: 600; font-variant-numeric: tabular-nums; }
.bl2-role { display: inline-flex; align-items: center; gap: 5px; color: #dbe7ff; font-weight: 600; }
.bl2-role-ico { font-style: normal; color: #e8c26a; font-size: 12px; }
.bl2-seq { color: #e8c26a; }
.bl2-round { color: #7d90b0; }
.bl2-place { color: #4ade80; }
.bl2-time { margin-left: auto; color: #c7d6f0; font-variant-numeric: tabular-nums; }
.bl2-top .bl-filtered-tag { margin-left: 0; }
/* 主体：我方卡组 | 我方信息 | 印章 | 敌方信息 | 敌方卡组 */
.bl2-body { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.bl2-cards { display: flex; gap: 6px; flex: 0 0 auto; }
.bl2-hero { position: relative; width: 74px; border: 1px solid #6b5a3a; border-radius: 8px;
  overflow: hidden; background: #141c2c; box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
  flex: none; }
.bl2-face { display: block; width: 100%; height: 100px; }
.bl2-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl2-face .hero-icon-ph { font-size: 26px; }
.bl2-lv { position: absolute; left: 4px; top: 22px; padding: 0 4px; border-radius: 3px;
  background: rgba(0, 0, 0, .6); color: #ffd88a; font-size: 10px; line-height: 15px; }
.bl2-hero .troop { position: absolute; left: 4px; top: 3px; }
.bl2-stars { position: absolute; left: 0; right: 0; bottom: 21px;
  display: flex; justify-content: center; gap: 1px; }
.bl2-stars i { width: 10px; height: 10px; background: rgba(255, 255, 255, .22);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.bl2-stars i.on { background: #e5484d; filter: drop-shadow(0 0 2px rgba(229, 72, 77, .85)); }
.bl2-name { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 11px;
  color: #e8c26a; padding: 2px 2px 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(180deg, rgba(10, 14, 22, .1), rgba(10, 14, 22, .82)); }
/* 信息块：我方右对齐、敌方左对齐，卡组在最外侧 */
.bl2-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bl2-info.me { align-items: flex-end; text-align: right; }
.bl2-info.foe { align-items: flex-start; }
.bl2-who { display: flex; align-items: center; gap: 6px; }
.bl2-pname { font-size: 13px; font-weight: 700; }
.bl2-pname.ally { color: #7ed957; }
.bl2-pname.enemy { color: #e5656e; }
.bl2-aname { font-size: 11px; color: #8fa3c4; }
.bl2-force-n { font-size: 12px; color: #c7d6f0; font-variant-numeric: tabular-nums; margin-bottom: 3px; }
.bl2-bar { width: 148px; height: 7px; border-radius: 4px; background: #1b2740; overflow: hidden; }
.bl2-bar i { display: block; height: 100%; border-radius: 4px; }
.bl2-info.foe .bl2-bar i { background: linear-gradient(90deg, #c9353c, #ff7a5c); }
.bl2-info.me .bl2-bar i { background: linear-gradient(90deg, #35507a, #4ea8ff); }
.bl2-sub { font-size: 10.5px; color: #5d6f8f; }
/* 中央结果印章 */
.bl2-stamp { flex: 0 0 92px; text-align: center; position: relative; }
.bl2-stamp::before { content: ''; position: absolute; left: 50%; top: 46%; width: 78px; height: 78px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 70%);
  border: 1px solid rgba(255, 255, 255, .07); }
.bl2-stamp b { position: relative; display: block; font-size: 48px; font-weight: 900; line-height: 1;
  transform: rotate(-8deg); }
.bl2-stamp.loss b { color: #cfdcec; text-shadow: 0 2px 10px rgba(0, 0, 0, .55); opacity: .92; }
.bl2-stamp.win b { color: #e8c26a; text-shadow: 0 2px 12px rgba(232, 194, 106, .45); }
.bl2-stamp.draw b { color: #8fa3c4; }
.bl2-stam { position: relative; margin-top: 8px; font-size: 11px; color: #e5656e; }
/* 同一次交战的多段战报（打平续战）：折叠为一组，默认只看最终结果 */
.bl2-chain { display: flex; flex-direction: column; flex: none; }
.bl2-chain-bar { display: flex; align-items: center; gap: 10px; padding: 4px 12px;
  background: linear-gradient(180deg, #1f2a3f, #18243a); border: 1px solid #2b3a58; border-bottom: none;
  border-radius: 10px 10px 0 0; font-size: 11px; color: #8fa3c4; }
.bl2-chain-tag { color: #e8c26a; font-weight: 600; }
.bl2-chain-note { color: #5d6f8f; }
.bl2-chain-toggle { margin-left: auto; background: #14243f; color: #9db2d4; border: 1px solid #22304d;
  border-radius: 5px; padding: 1px 10px; font-size: 11px; cursor: pointer; white-space: nowrap; }
.bl2-chain-toggle:hover { border-color: #3b82f6; color: #fff; }
.bl2-chain > .bl2-card { border-radius: 0 0 10px 10px; border-top: none; }
.bl2-chain-more { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.bl2-chain-more[hidden] { display: none; }
/* 被当前筛选条件排除的场次：照样列出，但弱化并打标 */
.bl2-card.is-filtered { opacity: .6; }
.bl-filtered-tag { font-size: 10.5px; color: #e5a86b;
  border: 1px solid rgba(229, 168, 107, .4); border-radius: 4px; padding: 0 6px; }
/* 窄屏折行，避免武将卡被挤没 */
@media (max-width: 720px) {
  .bl2-body { flex-wrap: wrap; justify-content: center; }
  .bl2-hero { width: 62px; }
  .bl2-face { height: 84px; }
  .bl2-bar { width: 120px; }
}
.bl-pager { display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 10px 14px; border-top: 1px solid #1b2740; background: #0d1526; }
.bl-btn { background: #14243f; color: #c7d6f0; border: 1px solid #22304d; border-radius: 6px;
  padding: 5px 14px; font-size: 12px; cursor: pointer; }
.bl-btn:hover:not([disabled]) { border-color: #3b82f6; color: #fff; }
.bl-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.bl-page { font-size: 12px; color: #8fa3c4; font-variant-numeric: tabular-nums; }

/* 队伍卡片上的「战报」按钮 */
.pc-log { background: #14243f; color: #9db2d4; border: 1px solid #22304d; border-radius: 5px;
  padding: 2px 10px; font-size: 11px; cursor: pointer; }
.pc-log:hover { border-color: #3b82f6; color: #fff; }
/* 武将对位里的技能表（4 列） */
.hp-detail .ally-table .ht-head, .hp-detail .ally-table .ht-row {
  grid-template-columns: minmax(0, 1fr) 44px 42px 58px;
  column-gap: 4px;
}
/* 「要小心」清单：一行一条，避免三个数字挤在括号里 */
.risk-list { margin-top: 5px; display: flex; flex-direction: column; gap: 4px; }
.risk-row { display: grid; grid-template-columns: minmax(0, 1fr) 108px 130px; align-items: center;
  gap: 10px; padding: 4px 8px; border-radius: 5px; background: rgba(229, 168, 107, 0.07);
  border-left: 2px solid rgba(229, 168, 107, 0.5); font-size: 11.5px; }
.risk-comp { color: #dbe7ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.risk-share { color: #7d90b0; text-align: right; }
.risk-mine { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.adv-risks-t { margin-top: 6px; }
/* 「克制的对手」展开按钮 */
.vs-more { display: block; width: 100%; margin-top: 6px; padding: 4px 8px; font-size: 11px;
  color: #8fa3c4; background: #101a2e; border: 1px dashed #22304d; border-radius: 5px; cursor: pointer; }
.vs-more:hover { color: #dbe7ff; border-color: #3b82f6; }
/* 战报浮层顶部的场景说明（如连赢证据） */
.bl-note { padding: 8px 14px; font-size: 12px; line-height: 1.6; color: #c9d6ea;
  background: rgba(78, 168, 255, .1); border-bottom: 1px solid var(--line-soft); }

/* 排行里的「最高 N 连」：可直接点开那段连赢的战报 */
.rank-streak-link { cursor: pointer; border-bottom: 1px dotted #5d6f8f; }
.rank-streak-link:hover { color: #ff9f7a; border-bottom-color: #ff9f7a; }

/* 连赢成色不足等提示：黄底一行，避免玩家被漂亮的连赢数字骗 */
.fs-warn { margin-top: 6px; padding: 6px 9px; font-size: 11.5px; line-height: 1.6; color: #ffd8a8;
  background: rgba(255, 170, 60, .12); border: 1px solid rgba(255, 170, 60, .35); border-radius: 7px; }

/* ---------------- 手操抓克制标签 + 作战习惯面板 ---------------- */
.pc-sniper { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 700; color: #ffd8a8; background: rgba(255, 170, 60, .16);
  border: 1px solid rgba(255, 170, 60, .45); cursor: help; }
.pc-sniper.is-strong { color: #ffb0a0; background: rgba(255, 100, 80, .18); border-color: rgba(255, 110, 90, .5); }
.ai-sniper { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: 10.5px;
  font-weight: 700; color: #ffd8a8; background: rgba(255, 170, 60, .18); border: 1px solid rgba(255, 170, 60, .4); }
.hb-row { display: flex; gap: 8px; align-items: baseline; padding: 5px 0; border-bottom: 1px dashed var(--line-soft);
  font-size: 12.5px; line-height: 1.65; color: #a8b6cc; }
.hb-row:last-child { border-bottom: none; }
.hb-row .hb-k { flex: none; width: 74px; color: #8fa3c4; font-weight: 600; }
.hb-row .hb-v { flex: 1 1 auto; min-width: 0; }
.hb-row.hb-sniper { background: rgba(255, 170, 60, .08); border-radius: 7px; padding: 6px 8px; margin: 2px 0; }
.hb-row.hb-sniper .hb-k { color: #ffb87a; }

/* 指向性标签按「真克制 / 只是常打 / 盯着被克队打」三种区分配色 */
.pc-sniper.kind-counter { color: #ffb0a0; background: rgba(255, 100, 80, .18); border-color: rgba(255, 110, 90, .5); }
.pc-sniper.kind-focus { color: #a8c4e8; background: rgba(120, 160, 220, .14); border-color: rgba(120, 160, 220, .38); }
.pc-sniper.kind-feeding { color: #ffd8a8; background: rgba(255, 170, 60, .16); border-color: rgba(255, 170, 60, .45); }
.ai-sniper.kind-counter { color: #ffb0a0; background: rgba(255, 100, 80, .18); border-color: rgba(255, 110, 90, .5); }
.ai-sniper.kind-focus { color: #a8c4e8; background: rgba(120, 160, 220, .14); border-color: rgba(120, 160, 220, .38); }
.ai-sniper.kind-feeding { color: #ffd8a8; background: rgba(255, 170, 60, .16); border-color: rgba(255, 170, 60, .45); }
.hb-row.hb-sniper.is-warn { background: rgba(255, 170, 60, .08); }
.hb-row.hb-sniper.is-warn .hb-k { color: #ffb87a; }

/* ---------------- 全局忙碌遮罩（导入 / 解析大文件） ---------------- */
.busy-mask { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center;
  background: #0a11206b; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.busy-box { text-align: center; color: #c9d6ea; text-shadow: 0 1px 4px rgba(0, 0, 0, .95), 0 0 14px rgba(10, 17, 32, .95); }
.busy-spin { width: 34px; height: 34px; margin: 0 auto 14px; border: 3px solid #1e2a44; border-top-color: #4ea8ff;
  border-radius: 50%; animation: acBusySpin .9s linear infinite; }
.busy-title { font-size: 15px; color: #ffffff; font-weight: 600; }
.busy-tip { font-size: 12px; margin-top: 6px; color: #c9d6ea; }
@keyframes acBusySpin { to { transform: rotate(360deg); } }