/* =========================================================
   遥原世界交互面板 v3.0
   TRPG / 模拟经营 / 战争兵棋 / 记忆状态机适配版
   浅色字体 + 防误折叠修正版
   ========================================================= */

/* ===== 0. 全局容器 ===== */
.interaction-panel {
  font-family: "Segoe UI", "Noto Sans SC", "Noto Sans", "Microsoft YaHei", "Cascadia Code", system-ui, sans-serif;
  max-width: 860px;
  margin: 0 auto;
  background: #0b1a2e;
  color: #f2f7ff !important;
  font-weight: 500;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.62);
  overflow: hidden;
  border: 1px solid #1f3d5a;
}

.interaction-panel * {
  box-sizing: border-box;
}

.interaction-panel strong {
  color: #ffffff !important;
  font-weight: 800;
}

.interaction-panel code {
  font-family: "Cascadia Code", "Consolas", monospace;
  background: #071421;
  color: #d9ffd2 !important;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid #1a3550;
}

.interaction-panel pre {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: #f2f7ff !important;
}

/* ===== 1. 通用 details / summary ===== */
.interaction-panel details > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  color: #ffffff !important;
}

.interaction-panel details > summary::-webkit-details-marker {
  display: none;
}

.interaction-panel details[open] > summary {
  filter: brightness(1.08);
}

/* =========================================================
   1.1 防误折叠核心修正
   顶部摘要区与状态栏不再允许因 details 闭合而隐藏后续聊天内容。
   注意：其他扩展面板仍保持可折叠。
   ========================================================= */

.summary-block:not([open]) > *:not(summary),
.status-block:not([open]) > *:not(summary) {
  display: block !important;
}

.summary-block:not([open]) > .summary-content {
  display: grid !important;
}

.status-block:not([open]) > .status-content {
  display: block !important;
}

/* 防止平台把后续主体误判为 summary/status 子元素后一起隐藏 */
.summary-block:not([open]) .main-body,
.summary-block:not([open]) .status-row,
.summary-block:not([open]) .panel-block,
.summary-block:not([open]) .memory-machine,
.status-block:not([open]) .main-body,
.status-block:not([open]) .status-row,
.status-block:not([open]) .panel-block,
.status-block:not([open]) .memory-machine {
  display: block !important;
}

/* 顶部摘要区和状态栏箭头固定为展开态，避免误导 */
.summary-block > summary::after {
  content: "  展开";
  color: #b9ddff !important;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 8px;
}

.status-block > summary::before {
  content: "▾ ";
  font-size: 0.8rem;
}

/* ===== 2. 顶部摘要区 ===== */
.summary-block {
  background: linear-gradient(135deg, #102a41, #0b1a2e);
  border-bottom: 2px solid #5a9fd4;
  padding: 0;
  color: #f2f7ff !important;
}

.summary-block,
.summary-block *,
.summary-content,
.summary-content * {
  color: #f2f7ff !important;
}

.summary-block > summary {
  padding: 14px 22px;
  font-weight: 800;
  font-size: 1rem;
  color: #ffffff !important;
  background: #1a3550;
  cursor: pointer;
  letter-spacing: 0.5px;
}

.summary-block > summary::before {
  content: "📌 ";
}

.summary-block[open] > summary {
  background: #234a6b;
  color: #ffffff !important;
}

.summary-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  padding: 14px 22px;
  font-size: 0.9rem;
  line-height: 1.65;
  font-weight: 500;
  color: #f2f7ff !important;
}

.summary-content .label,
.summary-content .field-label {
  color: #b9ddff !important;
  font-weight: 700;
}

.summary-content .value,
.summary-content .field-value {
  color: #ffffff !important;
  font-weight: 600;
}

/* ===== 3. 正文区 ===== */
.main-body {
  padding: 28px 22px;
  line-height: 1.9;
  background: #0d1f33;
  border-bottom: 1px solid #1a3550;
  color: #f2f7ff !important;
  font-weight: 500;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  overflow: hidden;
}

.main-body,
.main-body * {
  color: inherit;
}

.main-body p {
  margin: 0 0 1.2em;
  max-width: 100%;
  color: #f2f7ff !important;
}

.main-body p:last-child {
  margin-bottom: 0;
}

.main-body hr {
  border: none;
  border-top: 1px solid #274663;
  margin: 18px 0;
}

.main-body blockquote {
  margin: 14px 0;
  padding: 10px 14px;
  background: rgba(137, 180, 250, 0.08);
  border-left: 4px solid #89b4fa;
  color: #f0f6ff !important;
}

/* ===== 4. 角色状态 & 交互对象双列 ===== */
.status-row {
  display: flex;
  gap: 1px;
  background: #1a3550;
  border-bottom: 1px solid #1a3550;
  color: #f2f7ff !important;
}

.status-row,
.status-row *,
.status-block,
.status-block *,
.status-content,
.status-content * {
  color: #f2f7ff !important;
}

.status-block {
  flex: 1;
  background: #0d1f33;
  min-width: 0;
}

.status-block > summary {
  padding: 12px 18px;
  font-weight: 700;
  font-size: 0.95rem;
  background: #1a3550;
  color: #ffffff !important;
  cursor: pointer;
  letter-spacing: 0.3px;
}

.status-content {
  padding: 12px 18px;
  font-size: 0.85rem;
  line-height: 1.8;
  color: #edf6ff !important;
  font-weight: 500;
}

.status-content .field-label,
.status-content .label {
  color: #b9ddff !important;
  font-weight: 700;
}

.status-content .field-value,
.status-content .value {
  color: #ffffff !important;
  font-weight: 600;
}

/* ===== 5. 通用扩展面板 ===== */
.panel-row {
  display: flex;
  gap: 1px;
  background: #1a3550;
  border-bottom: 1px solid #1a3550;
}

.panel-row .panel-block {
  flex: 1;
  min-width: 0;
}

.panel-block {
  background: #0d1f33;
  border-bottom: 1px solid #1a3550;
  color: #f2f7ff !important;
}

.panel-block > summary {
  padding: 12px 20px;
  font-weight: 800;
  font-size: 0.95rem;
  color: #ffffff !important;
  background: #162e47;
  letter-spacing: 0.3px;
}

.panel-block > summary::before {
  content: "▸ ";
  font-size: 0.8rem;
}

.panel-block[open] > summary::before {
  content: "▾ ";
}

.panel-content {
  padding: 14px 20px;
  font-size: 0.84rem;
  line-height: 1.75;
  color: #edf6ff !important;
}

.panel-content * {
  color: #edf6ff !important;
}

.panel-note {
  margin: 8px 0;
  padding: 8px 10px;
  background: rgba(137, 180, 250, 0.08);
  border-left: 3px solid #89b4fa;
  border-radius: 4px;
  color: #f0f6ff !important;
}

.panel-warning {
  margin: 8px 0;
  padding: 8px 10px;
  background: rgba(245, 194, 66, 0.1);
  border-left: 3px solid #f5c542;
  border-radius: 4px;
  color: #fff3bf !important;
}

.panel-danger {
  margin: 8px 0;
  padding: 8px 10px;
  background: rgba(224, 88, 88, 0.11);
  border-left: 3px solid #e05858;
  border-radius: 4px;
  color: #ffe0e0 !important;
}

.panel-success {
  margin: 8px 0;
  padding: 8px 10px;
  background: rgba(166, 227, 161, 0.1);
  border-left: 3px solid #a6e3a1;
  border-radius: 4px;
  color: #e8ffe5 !important;
}

/* ===== 6. 模拟经营面板 ===== */
.management-panel {
  border-top: 2px solid #5bc0be;
}

.management-panel > summary {
  background: #12383c;
  color: #d9fffd !important;
}

.management-panel > summary::after {
  content: "  模拟经营";
  color: #aafcf8 !important;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 8px;
}

.management-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.management-card {
  background: #091827;
  border: 1px solid #1f3d5a;
  border-radius: 8px;
  padding: 10px 12px;
  color: #f2f7ff !important;
}

.management-card-title {
  color: #aafcf8 !important;
  font-weight: 800;
  font-size: 0.88rem;
  margin-bottom: 6px;
}

.management-card-value {
  color: #ffffff !important;
  font-weight: 700;
}

.management-card-desc {
  color: #d6e5f2 !important;
  font-size: 0.8rem;
  margin-top: 4px;
}

/* ===== 7. 资源库存面板 ===== */
.resource-panel {
  border-top: 2px solid #a6e3a1;
}

.resource-panel > summary {
  background: #123622;
  color: #e8ffe5 !important;
}

.resource-panel > summary::after {
  content: "  资源库存";
  color: #d9ffd2 !important;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 8px;
}

.resource-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin: 8px 0 12px;
}

.resource-table th {
  background: #183a2a;
  color: #d9ffd2 !important;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 2px solid #295b41;
  white-space: nowrap;
}

.resource-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #1a3550;
  vertical-align: top;
  color: #f2f7ff !important;
}

.resource-name {
  color: #ffffff !important;
  font-weight: 700;
}

.resource-amount {
  color: #e8ffe5 !important;
  font-weight: 700;
}

.resource-trend-up {
  color: #d9ffd2 !important;
  font-weight: 800;
}

.resource-trend-flat {
  color: #fff3bf !important;
  font-weight: 800;
}

.resource-trend-down {
  color: #ffcccc !important;
  font-weight: 800;
}

/* ===== 8. 生产队列 / 工业面板 ===== */
.production-panel {
  border-top: 2px solid #fab387;
}

.production-panel > summary {
  background: #3a2415;
  color: #ffe9d8 !important;
}

.production-panel > summary::after {
  content: "  生产队列";
  color: #ffe0c8 !important;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 8px;
}

.production-list {
  list-style: none;
  padding: 0;
  margin: 8px 0;
}

.production-item {
  background: #091827;
  border: 1px solid #3b4f66;
  border-left: 4px solid #fab387;
  border-radius: 7px;
  margin-bottom: 8px;
  padding: 10px 12px;
  color: #f2f7ff !important;
}

.production-title {
  color: #ffffff !important;
  font-weight: 800;
  margin-bottom: 5px;
}

.production-meta {
  color: #d6e5f2 !important;
  font-size: 0.8rem;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: #071421;
  border: 1px solid #1a3550;
  border-radius: 999px;
  overflow: hidden;
  margin: 8px 0;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #fab387, #f5c542);
  border-radius: 999px;
}

/* 可用宽度类 */
.progress-0 { width: 0%; }
.progress-10 { width: 10%; }
.progress-20 { width: 20%; }
.progress-30 { width: 30%; }
.progress-40 { width: 40%; }
.progress-50 { width: 50%; }
.progress-60 { width: 60%; }
.progress-70 { width: 70%; }
.progress-80 { width: 80%; }
.progress-90 { width: 90%; }
.progress-100 { width: 100%; }

/* ===== 9. 据点状态面板 ===== */
.settlement-panel {
  border-top: 2px solid #89b4fa;
}

.settlement-panel > summary {
  background: #172f55;
  color: #e3eeff !important;
}

.settlement-panel > summary::after {
  content: "  据点状态";
  color: #d7e6ff !important;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 8px;
}

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

.settlement-stat {
  background: #091827;
  border: 1px solid #1f3d5a;
  border-radius: 7px;
  padding: 9px 10px;
  color: #f2f7ff !important;
}

.settlement-label {
  color: #b9ddff !important;
  font-size: 0.75rem;
  font-weight: 700;
}

.settlement-value {
  color: #ffffff !important;
  font-size: 0.95rem;
  font-weight: 800;
  margin-top: 2px;
}

/* ===== 10. 战争兵棋面板 ===== */
.wargame-panel {
  border-top: 2px solid #e08888;
}

.wargame-panel > summary {
  background: #421a1d;
  color: #ffe0e0 !important;
}

.wargame-panel > summary::after {
  content: "  战争兵棋";
  color: #ffd0d0 !important;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 8px;
}

.wargame-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin: 8px 0 12px;
}

.wargame-table th {
  background: #4b2024;
  color: #ffdada !important;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 2px solid #6b2e34;
  white-space: nowrap;
}

.wargame-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #1a3550;
  vertical-align: top;
  color: #f2f7ff !important;
}

.force-friendly {
  color: #d7e6ff !important;
  font-weight: 800;
}

.force-hostile {
  color: #ffcccc !important;
  font-weight: 800;
}

.force-neutral {
  color: #fff3bf !important;
  font-weight: 800;
}

.tactical-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  margin: 1px 3px 1px 0;
}

.tactical-tag.good {
  background: #123622;
  color: #d9ffd2 !important;
}

.tactical-tag.warn {
  background: #3a2d13;
  color: #fff3bf !important;
}

.tactical-tag.bad {
  background: #421a1d;
  color: #ffd0d0 !important;
}

/* ===== 11. 外交 / 势力关系面板 ===== */
.diplomacy-panel {
  border-top: 2px solid #cba6f7;
}

.diplomacy-panel > summary {
  background: #2e2047;
  color: #f0ddff !important;
}

.diplomacy-panel > summary::after {
  content: "  外交关系";
  color: #ead8ff !important;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 8px;
}

.faction-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.faction-card {
  background: #091827;
  border: 1px solid #352e52;
  border-radius: 8px;
  padding: 10px 12px;
  color: #f2f7ff !important;
}

.faction-name {
  color: #ffffff !important;
  font-weight: 800;
  margin-bottom: 5px;
}

.faction-attitude {
  font-size: 0.78rem;
  font-weight: 800;
  border-radius: 999px;
  padding: 2px 8px;
  display: inline-block;
  margin-bottom: 5px;
}

.attitude-friendly {
  background: #123622;
  color: #d9ffd2 !important;
}

.attitude-neutral {
  background: #313244;
  color: #edf6ff !important;
}

.attitude-watchful {
  background: #3a2d13;
  color: #fff3bf !important;
}

.attitude-hostile {
  background: #421a1d;
  color: #ffd0d0 !important;
}

.faction-note {
  color: #d6e5f2 !important;
  font-size: 0.8rem;
  line-height: 1.55;
}

/* ===== 12. 贸易 / 商贸面板 ===== */
.trade-panel {
  border-top: 2px solid #f5c542;
}

.trade-panel > summary {
  background: #3a2d13;
  color: #fff6c8 !important;
}

.trade-panel > summary::after {
  content: "  商贸交易";
  color: #fff3bf !important;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 8px;
}

.trade-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin: 8px 0 12px;
}

.trade-table th {
  background: #4a3917;
  color: #fff3bf !important;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 2px solid #6c5524;
  white-space: nowrap;
}

.trade-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #1a3550;
  vertical-align: top;
  color: #f2f7ff !important;
}

.trade-profit {
  color: #d9ffd2 !important;
  font-weight: 800;
}

.trade-risk {
  color: #ffd0d0 !important;
  font-weight: 800;
}

.trade-neutral {
  color: #fff3bf !important;
  font-weight: 800;
}

/* ===== 13. 探索 / 调查面板 ===== */
.exploration-panel {
  border-top: 2px solid #94e2d5;
}

.exploration-panel > summary {
  background: #12383c;
  color: #e0fffb !important;
}

.exploration-panel > summary::after {
  content: "  探索调查";
  color: #d7fffa !important;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 8px;
}

.clue-list {
  list-style: none;
  padding: 0;
  margin: 8px 0;
}

.clue-item {
  border-left: 4px solid #94e2d5;
  background: #091827;
  border-radius: 7px;
  padding: 9px 11px;
  margin-bottom: 8px;
  color: #f2f7ff !important;
}

.clue-title {
  color: #ffffff !important;
  font-weight: 800;
}

.clue-detail {
  color: #d6e5f2 !important;
  font-size: 0.8rem;
  margin-top: 4px;
}

.clue-status {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  margin-left: 6px;
  background: #313244;
  color: #edf6ff !important;
}

/* ===== 14. 风险预警面板 ===== */
.risk-panel {
  border-top: 2px solid #ff6b6b;
}

.risk-panel > summary {
  background: #421a1d;
  color: #ffe0e0 !important;
}

.risk-panel > summary::after {
  content: "  风险预警";
  color: #ffd0d0 !important;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 8px;
}

.risk-list {
  list-style: none;
  margin: 8px 0;
  padding: 0;
}

.risk-item {
  background: #091827;
  border: 1px solid #4b2024;
  border-left: 4px solid #ff6b6b;
  border-radius: 7px;
  margin-bottom: 8px;
  padding: 9px 11px;
  color: #f2f7ff !important;
}

.risk-title {
  color: #ffe0e0 !important;
  font-weight: 800;
}

.risk-desc {
  color: #f2f7ff !important;
  font-size: 0.8rem;
  margin-top: 4px;
}

.risk-low {
  border-left-color: #a6e3a1;
}

.risk-medium {
  border-left-color: #f5c542;
}

.risk-high {
  border-left-color: #e08888;
}

.risk-critical {
  border-left-color: #ff3b3b;
  box-shadow: 0 0 10px rgba(255, 59, 59, 0.18);
}

/* ===== 15. 记忆状态机容器 ===== */
.memory-machine {
  border-top: 2px solid #89b4fa;
  padding: 0;
  background: #0d1f33;
  animation: pulse-border 3s ease-in-out infinite;
  color: #f2f7ff !important;
}

.memory-machine,
.memory-machine * {
  color: #f2f7ff !important;
}

.memory-machine > summary {
  padding: 12px 22px;
  font-weight: 800;
  font-size: 1rem;
  background: #1a3550;
  cursor: pointer;
  color: #d7e6ff !important;
  letter-spacing: 0.5px;
}

.memory-machine > summary::before {
  content: "💻 ";
}

.memory-machine[open] > summary {
  background: #234a6b;
}

.memory-machine-content {
  padding: 16px 20px;
}

@keyframes pulse-border {
  0%, 100% { border-color: #89b4fa; }
  50% { border-color: #a6e3a1; }
}

/* ===== 16. 记忆表格 ===== */
.memory-section-title {
  font-weight: 800;
  font-size: 0.9rem;
  margin: 12px 0 8px;
  letter-spacing: 0.3px;
}

.memory-section-title.stm {
  color: #aafcf8 !important;
}

.memory-section-title.core {
  color: #ead8ff !important;
}

.memory-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
  font-size: 0.82rem;
}

.memory-table th {
  background: #1a3550;
  color: #d7e6ff !important;
  font-weight: 700;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 2px solid #313244;
  white-space: nowrap;
}

.memory-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #1a3550;
  color: #f2f7ff !important;
  vertical-align: top;
  line-height: 1.5;
}

.memory-table tr:last-child td {
  border-bottom: none;
}

.memory-table tr:hover td {
  background: rgba(90, 159, 212, 0.08);
}

.memory-table.stm-table .col-id {
  width: 36px;
  text-align: center;
}

.memory-table.stm-table .col-time {
  width: 150px;
}

.memory-table.core-table .col-num {
  width: 36px;
  text-align: center;
}

.memory-empty {
  color: #d6e5f2 !important;
  font-style: italic;
  font-size: 0.8rem;
  padding: 8px 10px;
}

.archive-badge {
  display: inline-block;
  background: #313244;
  color: #d7e6ff !important;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 8px;
}

/* ===== 17. 归档生成栏 ===== */
.archive-generator {
  margin-top: 12px;
  border: 1px solid #352e52;
  border-radius: 8px;
  background: #091827;
  overflow: hidden;
  color: #f2f7ff !important;
}

.archive-generator,
.archive-generator *,
.archive-generator-content,
.archive-generator-content * {
  color: #f2f7ff !important;
}

.archive-generator > summary {
  padding: 10px 14px;
  background: #2e2047;
  color: #ead8ff !important;
  font-weight: 800;
  font-size: 0.88rem;
}

.archive-generator > summary::before {
  content: "▸ ";
  font-size: 0.8rem;
}

.archive-generator[open] > summary::before {
  content: "▾ ";
}

.archive-generator-content {
  padding: 12px 14px;
}

.archive-entry {
  background: #071421 !important;
  color: #f2f7ff !important;
  border: 1px solid #313244;
  border-left: 4px solid #cba6f7;
  border-radius: 7px;
  padding: 12px;
  font-size: 0.78rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-x: auto;
}

pre.archive-entry,
pre.archive-entry *,
.archive-entry,
.archive-entry * {
  color: #f2f7ff !important;
  background-color: #071421 !important;
}

/* ===== 18. 势力对话颜色 ===== */
.main-body .speaker-mc {
  color: #fff3bf !important;
  font-weight: 800;
}

.main-body .thought-mc {
  color: #d6e5f2 !important;
  font-style: italic;
  font-weight: 400;
}

.main-body .speaker-nudo {
  color: #aafcf8 !important;
  font-weight: 700;
}

.main-body .speaker-luo {
  color: #ffd9b8 !important;
  font-weight: 700;
}

.main-body .speaker-wester {
  color: #dcecff !important;
  font-weight: 700;
}

.main-body .speaker-elf {
  color: #d9ffd2 !important;
  font-weight: 700;
}

.main-body .speaker-south {
  color: #ffd0d0 !important;
  font-weight: 700;
}

/* ===== 19. 势力文本辅助色 ===== */
.faction-nudo {
  color: #aafcf8 !important;
  font-weight: 800;
}

.faction-luo {
  color: #ffd9b8 !important;
  font-weight: 800;
}

.faction-wester {
  color: #dcecff !important;
  font-weight: 800;
}

.faction-elf {
  color: #d9ffd2 !important;
  font-weight: 800;
}

.faction-south {
  color: #ffd0d0 !important;
  font-weight: 800;
}

.faction-tena {
  color: #fff3bf !important;
  font-weight: 800;
}

/* ===== 20. 状态标签 ===== */
.state-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  margin: 1px 3px 1px 0;
  background: #313244;
  color: #edf6ff !important;
}

.state-tag.green {
  background: #123622;
  color: #d9ffd2 !important;
}

.state-tag.blue {
  background: #172f55;
  color: #d7e6ff !important;
}

.state-tag.yellow {
  background: #3a2d13;
  color: #fff3bf !important;
}

.state-tag.red {
  background: #421a1d;
  color: #ffd0d0 !important;
}

.state-tag.purple {
  background: #2e2047;
  color: #ead8ff !important;
}

.state-tag.cyan {
  background: #12383c;
  color: #d7fffa !important;
}

/* ===== 21. 小型指标条 ===== */
.metric-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0;
}

.metric-label {
  flex: 0 0 90px;
  color: #b9ddff !important;
  font-size: 0.78rem;
  font-weight: 700;
}

.metric-bar {
  flex: 1;
  height: 7px;
  background: #071421;
  border: 1px solid #1a3550;
  border-radius: 999px;
  overflow: hidden;
}

.metric-fill {
  height: 100%;
  border-radius: 999px;
  background: #89b4fa;
}

.metric-fill.good {
  background: #a6e3a1;
}

.metric-fill.warn {
  background: #f5c542;
}

.metric-fill.bad {
  background: #e08888;
}

.metric-value {
  flex: 0 0 48px;
  color: #ffffff !important;
  font-size: 0.78rem;
  font-weight: 800;
  text-align: right;
}

/* ===== 22. 全局兜底：防止平台默认黑字覆盖 ===== */
.interaction-panel table,
.interaction-panel table *,
.interaction-panel tbody,
.interaction-panel tbody *,
.interaction-panel thead,
.interaction-panel thead *,
.interaction-panel tr,
.interaction-panel tr *,
.interaction-panel td,
.interaction-panel td *,
.interaction-panel th,
.interaction-panel th *,
.interaction-panel div,
.interaction-panel span,
.interaction-panel p,
.interaction-panel li,
.interaction-panel summary,
.interaction-panel details {
  color: inherit;
}

.summary-block table,
.summary-block table *,
.summary-content table,
.summary-content table *,
.status-block table,
.status-block table *,
.archive-generator table,
.archive-generator table *,
.archive-generator-content table,
.archive-generator-content table * {
  color: #f2f7ff !important;
}

/* ===== 23. 响应式适配 ===== */
@media (max-width: 720px) {
  .interaction-panel {
    max-width: 100%;
    border-radius: 8px;
  }

  .summary-content {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px 16px;
  }

  .main-body {
    padding: 20px 16px;
    line-height: 1.8;
  }

  .status-row,
  .panel-row {
    flex-direction: column;
  }

  .management-grid,
  .settlement-grid,
  .faction-grid {
    grid-template-columns: 1fr;
  }

  .memory-machine-content,
  .panel-content,
  .status-content {
    padding: 12px 14px;
  }

  .memory-table,
  .resource-table,
  .wargame-table,
  .trade-table {
    font-size: 0.76rem;
  }

  .memory-table.stm-table .col-time {
    width: auto;
  }

  .metric-row {
    flex-wrap: wrap;
  }

  .metric-label {
    flex: 0 0 100%;
  }

  .metric-value {
    flex: 0 0 40px;
  }
}

/* ===== 24. 低兼容环境兜底 ===== */
@supports not (display: grid) {
  .summary-content,
  .management-grid,
  .settlement-grid,
  .faction-grid {
    display: block;
  }

  .management-card,
  .settlement-stat,
  .faction-card {
    margin-bottom: 8px;
  }
}