/* 组件级补充样式 */
.stage-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.btn.mini { padding: 3px 9px; font-size: 12px; border-radius: 6px; }

.plan-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .track { position: relative; width: 38px; height: 20px; border-radius: 10px; background: #d9d3c9; transition: background .15s ease; }
.switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: left .15s ease; }
.switch input:checked + .track { background: var(--violet); }
.switch input:checked + .track::after { left: 20px; }
.switch input:indeterminate + .track { background: #b3a4d4; }
.switch input:indeterminate + .track::after { left: 11px; }
.switch-label { font-size: 13px; color: var(--ink); }
.switch.mini { gap: 5px; }
.switch.mini .track { width: 30px; height: 16px; border-radius: 8px; }
.switch.mini .track::after { top: 2px; left: 2px; width: 12px; height: 12px; }
.switch.mini input:checked + .track::after { left: 16px; }
.switch.mini .switch-label { font-size: 12px; }

/* 配置数据页 */
.config-stack { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: #fdfbf8; }
.config-stack .config-grid { gap: 14px; }
.plan-export { margin-top: 18px; border: 1px solid var(--violet); background: var(--violet-2); }
.plan-export h2 { color: var(--violet); }
.plan-export .hint { margin-bottom: 10px; }

/* 运行演出 */
.run-side > .panel + .panel { margin-top: 14px; }
.run-drop { min-height: 104px; }
.run-drop .slot { min-height: 92px; }
.run-drop-empty { grid-column: 1 / -1; min-height: 84px; color: var(--muted); }
.run-blessing { position: relative; display: flex; align-items: center; gap: 6px; border: 1px solid #d5cfdf; border-radius: 7px; background: #fff; padding: 6px 9px; cursor: grab; font-size: 13px; }
.run-blessing.static { cursor: default; }
.run-blessing .reaction-icon { width: 18px; height: 18px; }
.run-team { display: flex; flex-wrap: wrap; gap: 8px; }
.run-blessing-cell { grid-column: span 2; display: flex; align-items: center; justify-content: flex-start; min-height: 92px; }
.run-blessing b { white-space: nowrap; }
/* 角色池启用状态 */
.pool-count { font-size: 12px; font-weight: normal; color: var(--muted); margin-left: 6px; }
.pool-count.over { color: #b03a2e; }
.pool-count.under { color: #b9770e; }
.pool-card { cursor: default; }
.pool-card.off { opacity: .4; filter: grayscale(1); }

/* 运行演出：花朵、抽卡要求、锁定、补位 */
.run-flowers { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.run-flowers b { font-size: 22px; color: var(--ink); }
.wanted-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.wanted-mini { width: 54px; text-align: center; font-size: 10px; color: var(--muted); }
.wanted-mini img { width: 54px; height: 54px; border-radius: 8px; border: 1px solid var(--line); object-fit: cover; display: block; }
.wanted-mini span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filler-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.char-wrap { position: relative; }
.char-wrap .lock-mark { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font-size: 20px; background: rgba(37, 44, 59, .42); border-radius: 7px; }
.char-wrap.locked .lock-mark { display: flex; }
.drop-locked { border-style: dotted; background: #f6f4ef; }
.notice { margin: 10px 0 0; padding: 8px 10px; border-radius: 8px; background: #fff6e5; border: 1px solid #ecd9b0; color: #8a6428; font-size: 13px; }

/* 顶部指标卡状态色 */
.metric.over { background: #fdecea; border-color: #f0bdb6; }
.metric.over b { color: #b03a2e; }
.metric.best { background: #eef7ec; border-color: #c9e3c3; }
.metric.best b { color: #2f7d32; }
.metric.ok { background: #eef3fb; border-color: #cfdcf2; }
.metric.under { background: #f2f1ee; border-color: #ddd8cf; }
.metric.under b { color: var(--muted); }

/* 出场幕数角标 */
.stage-mark { position: absolute; left: 50%; bottom: 21px; transform: translateX(-50%); min-width: 20px; height: 15px; border-radius: 8px; background: rgba(37, 44, 59, .72); color: #fff; font-size: 10px; font-weight: bold; display: flex; align-items: center; justify-content: center; padding: 0 5px; z-index: 3; letter-spacing: .5px; }
/* 核心角色与补位角色区分底色 */
.slot.filled.core-slot { background: #f3f1fb; border-width: 2px; border-color: #6f61a8; }
.slot.filled.filler-slot { background: #eef7ec; border-width: 1px; border-color: #bfe0bf; }
/* 抽卡要求 */
.wanted-mini { position: relative; }
.wanted-mini.must img { border-color: #b03a2e; }
.wanted-thumb { position: relative; display: block; }
.wanted-stage { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); min-width: 16px; text-align: center; background: rgba(37, 44, 59, .72); color: #fff; border-radius: 8px; font-size: 10px; font-weight: bold; padding: 0 4px; line-height: 14px; }
.wanted-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wanted-tag { display: block; font-style: normal; font-size: 10px; color: var(--muted); }
.wanted-mini.must .wanted-tag { color: #b03a2e; font-weight: bold; }
.wanted-mini.filler img { border-color: #2f9e44; }
.wanted-mini.filler .wanted-tag { color: #2f7d32; }
.wanted-mini.must.filler .wanted-tag { color: #b03a2e; }

/* 推荐补位：小头像点选 */
.filler-pick { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 54px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
.filler-pick:hover { border-color: var(--violet); }
.filler-pick img { width: 44px; height: 44px; border-radius: 6px; display: block; }
.filler-pick span { font-size: 10px; color: var(--muted); max-width: 46px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filler-pick.selected { border-color: var(--violet); box-shadow: 0 0 0 1px var(--violet); background: #f3f1fb; }
.filler-pick.selected span { color: var(--violet); font-weight: bold; }

/* 可用 / 待命角色：规划角色红框，补位角色橘框 */
.char-wrap.plan-core .char-card { border-width: 2px; border-color: #c0392b; }
.char-wrap.plan-filler .char-card { border-width: 2px; border-color: #2f9e44; }

/* 运行演出：标题行 + 推荐补位按钮 */
.run-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.run-head h2 { margin: 0; }
/* 近期要用的角色：炫彩描边（不动卡片本身的红/绿边框） */
/* 近期用不到的待命角色：压暗一层，便于和推荐角色区分 */
.char-wrap.dim .char-card::after { content: ""; position: absolute; inset: 0; border-radius: 7px; background: rgba(0, 0, 0, .62); pointer-events: none; }

/* 已完成幕次 */
.history-list { display: grid; gap: 10px; margin-top: 8px; }
.history-item { border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: #fffdf9; cursor: pointer; }
.history-item:hover { border-color: var(--violet); box-shadow: 0 1px 8px rgba(96, 86, 143, .16); }
.history-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 13px; }
.history-item .team-zone { min-height: 100px; }
.history-item .slot { min-height: 92px; }

/* 神秘收获 */
.relic-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.relic-bar select { max-width: 100%; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font: inherit; font-size: 12px; }
.relic-bar #apply-relic { padding: 4px 10px; font-size: 12px; }

/* 已完成幕次与操作按钮分开 */
.history-block { margin-top: 22px; padding-top: 14px; border-top: 1px dashed var(--line); }
.history-block > h3 { margin: 0 0 10px; }