/* ═══════════════════════════════════════
   极简淡蓝 · 状态栏与卡片美化
   风格：清透 / 方框线条 / 黑字淡蓝底
═══════════════════════════════════════ */

/* ── 根容器 ── */
.ui-frame {
  font-family: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  color: #1a1a1a;
  line-height: 1.7;
  padding: 6px;
}

/* ── 所有折叠面板（通用） ── */
.ui-frame details {
  background: #eef4fb;
  border: 1.5px solid #b8cfe6;
  border-radius: 4px;
  margin: 8px 0;
  padding: 0;
  overflow: hidden;
}

/* ── 折叠标题栏 ── */
.ui-frame details summary {
  background: #dce8f5;
  border-bottom: 1.5px solid #b8cfe6;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
  transition: background 0.2s ease;
}

.ui-frame details summary::-webkit-details-marker {
  display: none;
}

/* 标题前的小方块指示器 */
.ui-frame details summary::before {
  content: "▸";
  font-size: 11px;
  color: #5a8abf;
  transition: transform 0.2s ease;
}

.ui-frame details[open] summary::before {
  transform: rotate(90deg);
}

/* 展开时标题高亮 */
.ui-frame details[open] summary {
  background: #d0e1f3;
}

/* ── 折叠面板内容区 ── */
.ui-frame details > *:not(summary) {
  padding: 0 14px;
}

.ui-frame details p,
.ui-frame details div {
  margin: 6px 0;
  font-size: 13.5px;
  color: #1a1a1a;
}

/* ── 正文段落 ── */
.ui-frame p {
  font-size: 14.5px;
  color: #1a1a1a;
  margin: 10px 0;
  text-align: justify;
}

/* ── 对话染色 ── */
.ui-frame .male-speech {
  color: #2b6cb0;
  font-weight: 500;
}

.ui-frame .female-speech {
  color: #c05680;
  font-weight: 500;
}

/* ── 表格样式（记忆区用） ── */
.ui-frame table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 12.5px;
}

.ui-frame thead th {
  background: #d0e1f3;
  border: 1px solid #b8cfe6;
  padding: 6px 8px;
  text-align: left;
  font-weight: 600;
  color: #1a1a1a;
}

.ui-frame tbody td {
  background: #f4f8fc;
  border: 1px solid #cddaea;
  padding: 6px 8px;
  color: #2a2a2a;
  vertical-align: top;
}

.ui-frame tbody tr:nth-child(even) td {
  background: #eaf0f8;
}

/* ── 状态数值行 ── */
.ui-frame strong {
  color: #1a1a1a;
  font-weight: 600;
}

/* ── 分隔线 ── */
.ui-frame hr {
  border: none;
  border-top: 1px solid #b8cfe6;
  margin: 10px 0;
}

/* ── 行动建议区（不折叠） ── */
.ui-frame ol,
.ui-frame ul {
  background: #f0f6fd;
  border: 1.5px solid #b8cfe6;
  border-radius: 4px;
  padding: 10px 14px 10px 32px;
  margin: 8px 0;
}

.ui-frame li {
  font-size: 13.5px;
  color: #1a1a1a;
  padding: 3px 0;
  border-bottom: 1px dashed #cddaea;
}

.ui-frame li:last-child {
  border-bottom: none;
}

/* ── 内嵌方框信息块 ── */
.ui-frame .info-box {
  background: #f4f8fc;
  border: 1px solid #b8cfe6;
  border-radius: 3px;
  padding: 8px 12px;
  margin: 6px 0;
  font-size: 13px;
}

/* ── 嵌套折叠（状态栏内子分类） ── */
.ui-frame details details {
  background: #f4f8fc;
  border: 1px solid #cddaea;
  margin: 6px 0;
}

.ui-frame details details summary {
  background: #e8eff8;
  border-bottom: 1px solid #cddaea;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
}

.ui-frame details details[open] summary {
  background: #dfe9f4;
}

/* ── H2/H3 小标题 ── */
.ui-frame h2 {
  font-size: 15px;
  color: #2b5a8a;
  border-left: 3px solid #5a8abf;
  padding-left: 8px;
  margin: 14px 0 8px;
}

.ui-frame h3 {
  font-size: 14px;
  color: #3a6a9a;
  margin: 10px 0 6px;
}

/* ── 滚动条美化 ── */
.ui-frame ::-webkit-scrollbar {
  width: 4px;
}

.ui-frame ::-webkit-scrollbar-track {
  background: #eef4fb;
}

.ui-frame ::-webkit-scrollbar-thumb {
  background: #b8cfe6;
  border-radius: 2px;
}

/* ── 移动端适配 ── */
@media (max-width: 600px) {
  .ui-frame details summary {
    font-size: 13px;
    padding: 7px 10px;
  }
  .ui-frame p {
    font-size: 14px;
  }
  .ui-frame table {
    font-size: 11.5px;
  }
  .ui-frame thead th,
  .ui-frame tbody td {
    padding: 4px 6px;
  }
}