.urban-panel {
  /* 主题色板: 温泉风格，暖色调，自然元素 */
  --color-wood-dark: #4a3e36;    /* 深木棕，用于标题、重要文本 */
  --color-wood-medium: #705b4b;  /* 中木棕，用于边框、分隔线 */
  --color-stone-light: #a68a71;   /* 浅暖石色，用于背景、高亮 */
  --color-water-blue: #a8d0db;     /* 柔和水蓝色，用于强调、点缀 */
  --color-mist-light: #e0f2f7;     /* 极淡雾气色，用于次要背景、渐变 */
  --color-moss-green: #8aa39b;    /* 柔和苔藓绿，用于特定标记 */

  /* 文本颜色 */
  --text-main: #333;          /* 主要文本 */
  --text-subtle: #777;        /* 次要/提示文本 */
  --text-light: #eee;         /* 亮色文本（用于深色背景上） */
  --dialogue-male: #8b4513; /* 男性对话（鞍褐色，更自然） */
  --dialogue-female: #cd5c5c; /* 女性对话（印第安红，更柔和） */

  /* 背景色 */
  --bg-paper: #fcf8f0;         /* 主内容区米白色背景 */
  --bg-panel: #fdfaf5;        /* 面板/折叠区域略浅背景 */

  /* 边框与分割线 */
  --border-soft: #e0d8cc;    /* 浅柔和边框 */
  --border-medium: #cbbcae;   /* 中等柔和边框 */

  /* 字体与基础布局 */
  font-family: "Noto Sans SC", "PingFang SC", sans-serif;
  line-height: 1.6;
  color: var(--text-main);
  background-color: var(--bg-paper);
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* 柔和阴影 */
  max-width: 100%; /* 移动端优先 */
  box-sizing: border-box;
  overflow-x: hidden; /* 防止内容溢出 */
  margin: 0; /* 移除容器默认外边距 */
  position: relative; /* 为可能存在的绝对定位伪元素做准备 */
}

/* 水平分割线样式 - 模拟竹制或木质的自然感 */
.urban-panel hr {
  border: none;
  border-top: 1px dashed var(--border-medium);
  margin: 20px 0;
  opacity: 0.7;
}

/* markdown H2 标题样式 (如 `## 【思维链规则】`) */
.urban-panel h2 {
  font-size: 1.1em; /* 18px */
  color: var(--color-wood-dark);
  text-align: center;
  margin: 15px 0 10px;
  padding: 10px 0;
  border-bottom: 2px solid var(--color-wood-medium);
  background: linear-gradient(to right, var(--bg-paper), var(--color-stone-light) 50%, var(--bg-paper));
  border-radius: 4px;
  letter-spacing: 0.05em;
  position: relative;
}
/* 标题两端装饰 */
.urban-panel h2::before,
.urban-panel h2::after {
  content: '🌿'; /* 小叶子或自然符号 */
  font-size: 0.8em;
  color: var(--color-moss-green);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.urban-panel h2::before {
  left: 10px;
}
.urban-panel h2::after {
  right: 10px;
}


/* 元数据块 (时间、地点、环境) */
.urban-panel hr:nth-of-type(1) + p {
  font-size: 0.85em; /* 13-14px */
  color: var(--text-subtle);
  text-align: center;
  margin-bottom: 10px;
  padding: 8px 15px;
  background-color: var(--color-mist-light);
  border-radius: 6px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
}

/* 状态栏块 ("📊 状态栏:...") */
.urban-panel hr:nth-of-type(2) + p {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 12px;
  padding: 12px 10px;
  background-color: var(--bg-panel);
  border-radius: 6px;
  margin-bottom: 15px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
  font-size: 0.8em; /* 12-13px */
  color: var(--text-main);
  border: 1px solid var(--border-soft);
  line-height: 1.4;
  white-space: pre-wrap;
  text-align: center;
}

/* 主文本内容段落 */
.urban-panel p {
  margin-bottom: 1.2em;
  font-size: 0.95em; /* 15px */
  line-height: 1.8;
  text-align: justify;
  padding: 0 10px;
  text-indent: 2em; /* 首行缩进 */
}

/* 对话样式: 男性 (class="aus") */
.urban-panel span.aus {
  color: var(--dialogue-male);
  font-weight: bold;
  display: block;
  margin: 1em 0;
  padding: 0 15px 0 10px;
  text-align: left;
  border-left: 3px solid var(--dialogue-male);
  background-color: rgba(139, 69, 19, 0.05); /* 淡淡的背景色 */
  border-radius: 3px;
}

/* 对话样式: 女性 (class="aes") */
.urban-panel span.aes {
  color: var(--dialogue-female);
  font-weight: bold;
  display: block;
  margin: 1em 0;
  padding: 0 10px 0 15px;
  text-align: right;
  border-right: 3px solid var(--dialogue-female);
  background-color: rgba(205, 92, 92, 0.05); /* 淡淡的背景色 */
  border-radius: 3px;
}

/* 折叠区域 (details/summary) 样式 */
.urban-panel details {
  background-color: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}

.urban-panel details summary {
  display: flex; /* 使用 flexbox 对齐图标和文本 */
  align-items: center;
  padding: 12px 15px;
  cursor: pointer;
  font-weight: bold;
  color: var(--color-wood-dark);
  background: linear-gradient(to right, var(--color-stone-light), var(--color-mist-light));
  border-bottom: 1px solid var(--border-medium);
  user-select: none;
  transition: all 0.2s ease;
  position: relative; /* 为伪元素图标做准备 */
}

/* 折叠图标 (▶ / ▼) */
.urban-panel details summary::before {
  content: '▶'; /* 默认关闭状态图标 */
  display: inline-block;
  margin-right: 10px;
  transition: transform 0.2s ease;
  color: var(--color-wood-dark);
  font-size: 0.9em;
}

.urban-panel details[open] summary::before {
  content: '▼'; /* 打开状态图标 */
  transform: rotate(0deg);
}

/* 折叠标题悬停效果 */
.urban-panel details summary:hover {
  background: linear-gradient(to right, var(--color-wood-medium), var(--color-stone-light));
  color: var(--text-light);
  border-bottom-color: var(--color-wood-dark);
}
.urban-panel details summary:hover::before {
  color: var(--text-light);
}

/* 折叠内容内的段落样式 */
.urban-panel details > p, /* 直接子P标签 */
.urban-panel details > div > p, /* 如果有div包裹 */
.urban-panel details > ul > li { /* 如果是列表 */
  padding: 8px 15px;
  margin: 0;
  font-size: 0.85em; /* 13-14px */
  line-height: 1.5;
  color: var(--text-main);
  border-left: 3px solid var(--color-water-blue); /* 左侧装饰线 */
  padding-left: 12px;
  margin-bottom: 5px;
  background-color: rgba(var(--color-mist-light), 0.3); /* 淡淡的背景色 */
  border-radius: 0 4px 4px 0;
}
/* 最后一个P标签或列表项通常没有下边距 */
.urban-panel details > p:last-child,
.urban-panel details > div > p:last-child,
.urban-panel details > ul > li:last-child {
  margin-bottom: 0;
}

/* 针对星记忆配置的文本，使其更像代码或配置 */
.urban-panel details details > p {
  font-family: monospace;
  font-size: 0.8em;
  color: var(--text-subtle);
  border-left-color: var(--color-moss-green);
  background-color: rgba(var(--color-wood-dark), 0.05);
}

/* 好友列表的提示信息 */
.urban-panel details p i {
  display: block;
  text-align: center;
  font-style: italic;
  color: var(--text-subtle);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-soft);
}

/* 表格样式 (用于星记忆区) */
.urban-panel table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 0.8em; /* 13px */
  background-color: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  overflow: hidden; /* 确保圆角表格边框 */
}

.urban-panel table th,
.urban-panel table td {
  border: 1px solid var(--border-soft);
  padding: 8px;
  text-align: left;
}

.urban-panel table th {
  background-color: var(--color-stone-light);
  color: var(--color-wood-dark);
  font-weight: bold;
  white-space: nowrap; /* 防止表头换行 */
}

.urban-panel table tr:nth-of-type(even) td {
  background-color: var(--color-mist-light); /* 斑马纹效果 */
}

/* 可用指令的样式 */
.urban-panel details summary[open] + p { /* 确保是指令列表的第一项 */
  margin-top: 10px;
}
.urban-panel details summary + p {
  padding-left: 15px; /* 调整内边距 */
  border-left: none; /* 移除默认的左侧边框 */
  background-color: transparent; /* 移除背景色 */
  margin-bottom: 8px;
}
.urban-panel details summary + p::before {
  content: '⌘ '; /* 指令符号 */
  color: var(--color-water-blue);
  font-weight: bold;
  margin-right: 5px;
}
.urban-panel details p:not([class]):not([style]):empty + p::before { /* 移除连续的指令符号 */
    content: '';
}
/* 对于指令A. B. C. D. 这种格式，如果解析为p标签，我们可以这样处理 */
.urban-panel details p strong:first-child { /* 如果指令头被识别为strong */
    color: var(--color-wood-dark);
    font-weight: bold;
    margin-right: 5px;
}
/* 通用指令前缀 */
.urban-panel details p:first-letter {
    color: var(--color-wood-dark);
    font-weight: bold;
    margin-right: 4px;
}
/* 尝试为指令列表项添加样式 */
.urban-panel details[open] > p:not(:first-of-type) { /* 避免影响summary下面的第一个p */
    padding-left: 25px; /* 增加缩进 */
    border-left: 2px solid var(--color-water-blue);
    margin-left: 10px;
    position: relative;
}
.urban-panel details[open] > p:not(:first-of-type)::before {
    content: '‣'; /* 指示符 */
    position: absolute;
    left: 8px; /* 调整位置 */
    color: var(--color-water-blue);
    font-weight: bold;
}


/* 响应式调整 (移动端优先) */
@media (max-width: 600px) {
  .urban-panel {
    padding: 8px;
    border-radius: 0; /* 在小屏幕上移除圆角，实现全宽效果 */
  }
  .urban-panel h2 {
    font-size: 1em; /* 16px */
    margin: 10px 0;
    padding: 8px 0;
  }
  .urban-panel h2::before,
  .urban-panel h2::after {
    font-size: 0.7em;
  }
  .urban-panel p {
    font-size: 0.9em; /* 14px */
    padding: 0 5px;
    text-indent: 1.5em;
  }
  /* 元数据块在小屏幕上 */
  .urban-panel hr:nth-of-type(1) + p {
    font-size: 0.8em; /* 13px */
    padding: 6px 10px;
  }
  /* 状态栏块在小屏幕上 */
  .urban-panel hr:nth-of-type(2) + p {
    flex-direction: column; /* 垂直堆叠 */
    align-items: stretch; /* 拉伸到全宽 */
    font-size: 0.75em; /* 12px */
    padding: 10px 5px;
    gap: 6px;
  }
  .urban-panel details summary {
    font-size: 0.9em; /* 14px */
    padding: 10px 12px;
  }
  .urban-panel details > p,
  .urban-panel details > div > p,
  .urban-panel details > ul > li {
    font-size: 0.8em; /* 13px */
    padding: 6px 10px;
    margin-bottom: 3px;
  }
  .urban-panel span.aus, .urban-panel span.aes {
    font-size: 0.9em; /* 14px */
    padding: 0 8px;
    margin: 0.8em 0;
  }
  .urban-panel table th,
  .urban-panel table td {
    padding: 6px;
    font-size: 0.75em; /* 12px */
  }
  .urban-panel details[open] > p:not(:first-of-type) {
    padding-left: 20px;
    margin-left: 5px;
  }
  .urban-panel details[open] > p:not(:first-of-type)::before {
    left: 4px;
  }
}