/* (CSS 部分保持不变) */
  /* --- DARK THEME VARIABLES --- */
  :root {
      --dark-bg: #1e1e1e; /* 更深的背景 */
      --dark-surface: #2a2a2a; /* 容器、卡片等表面 */
      --dark-surface-light: #333333; /* 卡片等稍亮一点的表面 */
      --dark-text-primary: #e0e0e0; /* 主要文字颜色 */
      --dark-text-secondary: #b0b0b0; /* 次要文字颜色 */
      --dark-border: #444444; /* 边框颜色 */
      --dark-accent: #4a90e2; /* 强调色，蓝色 */
      --dark-accent-hover: #3a7bc8; /* 强调色悬停 */
      --dark-selected-bg: #004a8e; /* 选中项背景 */
      --dark-field-text: #4a90e2; /* 领域文本颜色 (原绿色系66bb6a调整为蓝色，调整亮度) */
      --dark-remarks-border: #00DFD8; /* 备注边框 (原黄色系#ffca28，修改为#00DFD8 Bright Cyan, 调整亮度 ) */
      --dark-remarks-text: #bdbdbd; /* 备注文本 */
      --dark-input-bg: #3a3a3a; /* 输入框背景 */
      --dark-input-border: #555555; /* 输入框边框 */
      --dark-pre-bg: #1c1c1c; /* pre标签背景 */
      --dark-pre-border: #383838; /* pre标签边框 */
      
      /* --- [新增] 定义小说风格的字体变量 --- */
      --font-family-novel: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  }

  body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      margin: 0;
      padding: 0;
      color: var(--dark-text-primary);   /* DARK */
      line-height: 1.6;
      
      /* === 修改背景 === */
      background-color: #121212; /* 基础底色变更深 */
      
      /* 添加一个位于顶部中心的微弱极光背景，呼应北极星 */
      background-image: 
          radial-gradient(circle at 50% 0%, rgba(0, 223, 216, 0.08) 0%, transparent 40%),
          radial-gradient(circle at 80% 20%, rgba(121, 40, 202, 0.06) 0%, transparent 30%);
      background-attachment: fixed; /* 滚动时背景固定 */
  }
  
  /* --- Header & Controls --- */
  header {
      text-align: center;              
      padding: 20px 0 5px 0; /* 原来是 padding: 20px 0; 现在改为下方只有 5px */
      margin: 0 auto;
      position: relative;
      max-width: 1200px;
  }
  
  /* --- Logo Styles --- */
  .logo-container {
      position: absolute;
      top: 1px; /* 调整 Logo 的 top 值从20-》1，使其与按钮的底部对齐 */
      left: 20px; /* 左侧距离 */
      z-index: 20; /* 确保在其他内容之上 */
      display: flex; /* 让logo内部的img居中 */
      align-items: center; 
      justify-content: center;
  }
  .logo-container img {
      height: 70px;
      width: auto;
      border-radius: 5px;
  }
  
  /* 标题现在独立于 Logo 容器，并使用 h1 标签 */
  h1 {
      /* --- 修改开始：使用艺术字体 --- */
      /* 英文优先 Cinzel，中文优先 Ma Shan Zheng，最后回退到草书/衬线体 */
      font-family: 'Playfair Display', 'Ma Shan Zheng', cursive, serif; 
      /* --- 修改结束 --- */
      text-align: center;
      margin-top: 30px; /* 根据实际 Logo 和按钮高度调整，从100-》30 */
      margin-bottom: 5px; /* 标题底部留一点空间 */
      font-size: 2.8em;  /* 稍微加大一点字号，因为毛笔字在视觉上通常比黑体显小 */
      font-weight: 400; /* 毛笔字体自带粗细，设为 400 即可，不用 600 */
      letter-spacing: 1.5px; /* 增加字间距，更有呼吸感 */
      line-height: 1.3;
      background: linear-gradient(
          90deg,               
          #00DFD8, /* 亮青色 */
          #7928CA  /* 紫色 */
      );
      background-size: 200% auto;
      color: transparent;
      -webkit-background-clip: text;
      background-clip: text;
      animation: colorWave 7s linear infinite;
      -webkit-animation: colorWave 7s linear infinite;
  }

  .top-right-controls {
      position: absolute;
      top: 20px;
      right: 20px;
      display: flex;
      align-items: center;
      gap: 15px; /* 按钮间距 */
      z-index: 10;
  }

  /* --- 统一的圆形图标按钮样式 --- */
  .icon-btn {
      width: 40px;  /* 固定宽度 */
      height: 40px; /* 固定高度，确保正圆 */
      border-radius: 50%; /* 变成圆形 */
      /* === 新增：PC端防止被拉伸的关键 === */
      flex: 0 0 40px;        /* 强制 flex 占用空间 */
      min-width: 40px; /* 绝对不准小于 40px (防挤扁) */
      max-width: 40px; /* 绝对不准大于 40px (防拉伸) */     
      /* ================================ */
      
      background-color: rgba(255, 255, 255, 0.05); /* 极淡背景 */
      backdrop-filter: blur(4px);
      border: 1px solid rgba(255, 255, 255, 0.15);
      color: var(--dark-text-secondary);
      
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s ease;
      text-decoration: none; /* 去掉链接下划线 */
      font-size: 1.1rem; /* 图标稍微大一点 */
      padding: 0; /* 移除内边距 */
      position: relative; /* 为语言下拉框定位做准备 */
      /* === 新增这行：防止被压缩 === */
      flex-shrink: 0; 
      flex-grow: 0
  }
  
  /* 悬停效果 */
  .icon-btn:hover {
      color: #fff;
      background-color: var(--dark-accent); /* 悬停变亮色 */
      border-color: var(--dark-accent);
      box-shadow: 0 0 15px var(--dark-accent); /* 发光 */
      transform: rotate(15deg); /* 增加一点俏皮的旋转 */
  }
  
  /* --- 语言选择器的特殊处理 (核心修改) --- */
  .language-wrapper select {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0; /* 关键：完全透明，但仍然可以点击 */
      cursor: pointer;
      appearance: none; /* 移除默认样式 */
      -webkit-appearance: none;
      z-index: 2; /* 确保在图标之上 */
  }
  
  /* --- 修复下拉菜单看不清的问题 --- */
  /* 这里强制设置下拉选项的背景色和文字颜色 */
  #languageSelector {
      color-scheme: dark; /* 告诉浏览器这是暗色控件，滚动条和箭头会自动变黑底 */
  }
  
  #languageSelector option {
      background-color: #1e1e1e; /* 下拉菜单背景：深灰 */
      color: #f0f0f0;            /* 下拉菜单文字：亮白 */
      padding: 10px;
  }
  
  .about-us-button:hover, 
  .settings-link:hover, 
  .language-selector:hover {
      color: #fff;
      border-color: var(--dark-accent);
      background-color: rgba(74, 144, 226, 0.15); /* 悬停微蓝 */
      box-shadow: 0 0 10px rgba(74, 144, 226, 0.2); /* 悬停微发光 */
      transform: translateY(-1px);
  }

  .settings-link .fa-cog {
      margin-right: 6px;
  }        

  /* --- Modal Styles (No changes below this point) --- */
  .modal {
      display: none;
      position: fixed;
      z-index: 1000;
      left: 0; top: 0;
      width: 100%; height: 100%;
      overflow: auto;
      background-color: rgba(0,0,0,0.7);
      animation: fadeIn 0.3s;
  }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

  .modal-content {
      background-color: var(--dark-surface);
      margin: 15% auto;
      padding: 30px;
      border: 1px solid var(--dark-border);
      width: 90%;
      max-width: 500px;
      border-radius: 10px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.5);
      position: relative;
  }
  /* === 宣言模态框：水晶铭牌风格 === */

  /* 1. 模态框容器 (背景板) */
  .manifesto-modal .modal-content {
      /* 核心：深色高模糊的磨砂玻璃 */
      background: rgba(25, 25, 25, 0.85); /* 透明度比主页稍低，保证文字阅读清晰 */
      backdrop-filter: blur(20px);        /* 强模糊，屏蔽背后杂乱元素 */
      -webkit-backdrop-filter: blur(20px);
      
      /* 边框：极细的半透明光环 */
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-top: 1px solid rgba(255, 255, 255, 0.2); /* 顶部高光 */
      
      /* 阴影：深邃的投影 + 微弱的青色外发光 */
      box-shadow: 
          0 20px 50px rgba(0, 0, 0, 0.8), 
          0 0 0 1px rgba(0, 223, 216, 0.1); 
          
      border-radius: 12px;
      
      /* 尺寸与位置 */
      /* === 修改点：宽度由 800px 改为 600px === */
      /* 这样看起来更像一个竖长的卷轴或铭牌，不会太宽 */
      max-width: 600px; 
      margin: 3% auto;  /* 距离顶部稍微远一点 */
      /* === 核心修改点 === */
      /* 原来是 padding: 40px; (上下左右都是40) */
      /* 改为：上6px, 左右40px, 下4px */
      /* 这样顶部更紧凑，也不会挡住右上角的关闭按钮 */
      padding: 6px 40px 40px; 
      position: relative;
  }
  
  /* 2. 标题：使用艺术字体 (Playfair Display / 马善政) */
  .manifesto-modal h2 {
      font-family: 'Playfair Display', 'Ma Shan Zheng', serif;
      font-size: 2em;
      text-align: center;
      font-weight: 700;
      /* === 核心修改点 === */
      margin-top: 6px;    /* 稍微留一点点给文字发光的空间，防止光晕被切断 */
      margin-bottom: 25px; /* 稍微缩减一点下方间距，让内容跟上来 */
      line-height: 1.3;    /* 稍微收紧行高，防止两行标题时中间空隙太大 */
      
      /* 使用您标志性的渐变色 */
      background: linear-gradient(90deg, #00DFD8, #7928CA);
      background-size: 200% auto;
      color: transparent;
      -webkit-background-clip: text;
      background-clip: text;
      
      /* 增加文字发光，增加神圣感 */
      filter: drop-shadow(0 0 5px rgba(0, 223, 216, 0.3));
      
      animation: colorWave 7s linear infinite;
  }
  
  /* 3. 正文：使用小说风格字体，提升阅读体验 */
  .manifesto-modal .manifesto-text {
     /* 使用霞鹜文楷，回退到系统楷体 */
      /*font-family: 'LXGW WenKai Screen', 'KaiTi', 'STKaiti', 'Playfair Display', serif;*/
      font-family: 'Playfair Display', 'Ma Shan Zheng', serif;
      
      color: #e0e0e0;     /* 稍微柔和的白色 */
      font-size: 1.15em;  /* 字号稍微大一点 */
      line-height: 1.9;   /* 宽松的行高，更像是在读诗 */
      text-align: justify;/* 两端对齐 */
      
      padding: 0 10px;    /* 左右留白 */
      max-height: 65vh;   /* 限制高度 */
      overflow-y: auto;   /* 允许滚动 */
  }
  
  /* 4. 段落间距 */
  .manifesto-modal p {
      margin-bottom: 1.5em;
      text-shadow: 0 1px 2px rgba(0,0,0,0.5); /* 增加文字立体感 */
  }
  
  /* 5. 结语：强调 */
  .manifesto-modal p.conclusion {
      text-align: center;
      font-style: normal; /* 中文不需要斜体 */
      font-family: 'Ma Shan Zheng', cursive; /* 结语用毛笔字 */
      font-size: 1.4em;
      color: var(--dark-accent);
      margin-top: 40px;
      padding-top: 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.1); /* 顶部分割线 */
  }
  
  /* 6. 关闭按钮优化 */
  .close-button {
      color: rgba(255, 255, 255, 0.5);
      font-size: 32px;
      top: 15px;
      right: 20px;
      transition: all 0.3s;
  }
  .close-button:hover {
      color: var(--dark-accent); /* 悬停变青色 */
      transform: rotate(90deg);  /* 旋转动效 */
  }
  
  /* --- 滚动条美化 (确保模态框内的滚动条也是深色的) --- */
  .manifesto-text::-webkit-scrollbar {
      width: 6px;
  }
  .manifesto-text::-webkit-scrollbar-track {
      background: rgba(0,0,0,0.2);
      border-radius: 3px;
  }
  .manifesto-text::-webkit-scrollbar-thumb {
      background: rgba(255,255,255,0.2);
      border-radius: 3px;
  }
  .manifesto-text::-webkit-scrollbar-thumb:hover {
      background: var(--dark-accent);
  }

  .settings-form .form-group {
      margin-bottom: 20px;
  }
  .settings-form label {
      display: block;
      margin-bottom: 8px;
      font-weight: bold;
      color: var(--dark-text-primary);
  }
  .settings-form select, .settings-form input[type="password"] {
      width: 100%;
      padding: 10px;
      background-color: var(--dark-input-bg);
      border: 1px solid var(--dark-input-border);
      border-radius: 4px;
      color: var(--dark-text-primary);
      font-size: 1rem;
      box-sizing: border-box;
      transition: border-color 0.3s, box-shadow 0.3s;
  }
  .settings-form select:focus, .settings-form input[type="password"]:focus {
      outline: none;
      border-color: var(--dark-accent);
      box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.3);
  }

  .settings-form .save-btn {
      width: 100%;
      padding: 12px;
      border: none;
      border-radius: 4px;
      color: #ffffff;
      background-color: var(--dark-accent);
      font-size: 1rem;
      font-weight: bold;
      cursor: pointer;
      transition: background-color 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
  }
  .settings-form .save-btn:hover {
      background-color: var(--dark-accent-hover);
  }

  @keyframes colorWave {
      0% { background-position: 0% 50%; }
      100% { background-position: 100% 50%; }
  }

  .container {
      width: 90%;
      max-width: 1200px;
      margin: 0 auto 20px auto;   /* 原来是 margin: 20px auto; 现在顶部改为 0，让它紧贴 Header */
      padding: 20px;
      
       /* === 核心修改开始 === */    
      /* 1. 背景：不再是纯实色，而是极低透明度的深色，透出一点背景 */
      background: rgba(30, 30, 30, 0.6); 
      
      /* 2. 磨砂效果：这是高级感的来源 (兼容性写法) */
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      
      /* 3. 边框：改为极细的半透明白/青色，模拟玻璃边缘的反光 */
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-top: 1px solid rgba(255, 255, 255, 0.12); /* 顶部稍微亮一点，模拟顶光 */
      
      /* 4. 圆角：稍微加大，更柔和 */
      border-radius: 16px;
      
      /* 5. 阴影：加深阴影，增加悬浮感，并带有一点点青色的环境光晕 */
      box-shadow: 
          0 10px 40px rgba(0, 0, 0, 0.6),      /* 深邃的主阴影 */
          0 0 0 1px rgba(0, 223, 216, 0.05);   /* 极微弱的青色轮廓光 */
          
      /* === 核心修改结束 === */
      color: var(--dark-text-primary);
  }

  /* 1. 标签栏容器 */
  .tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 10px; /* 按钮之间的间距 */
      /* 底部保留一条极淡的分割线，作为轨道 */
      border-bottom: 1px solid rgba(255, 255, 255, 0.08); 
      padding-bottom: 8px; /* 让按钮和分割线有点距离 */
      margin-bottom: 15px;
  }

  /* --- 替换原有的 .tab-button 相关样式 --- */
  /* 2. 标签按钮（默认状态） */
  .tab-button {
      padding: 5px 20px;
      cursor: pointer;
      background-color: transparent; /* 默认无背景 */
      color: var(--dark-text-secondary); /* 默认灰色文字 */
      font-size: 1rem;
      font-weight: 500;
      border: 1px solid transparent; /* 预留边框位置，防止切换时抖动 */
      border-radius: 50px; /* 胶囊圆角 */
      transition: all 0.3s ease;
  }
  
  /* 悬停状态 */
  .tab-button:hover {
      color: #fff;
      background-color: rgba(255, 255, 255, 0.05); /* 悬停时微微亮 */
  }
  
  /* 3. 选中状态（关键修改） */
  .tab-button.active {
      color: #fff; /* 文字变白 */
      font-weight: 600;
      
      /* 改动点：增加明显的渐变背景，不再是几乎看不见的透明色 */
      background: linear-gradient(90deg, rgba(0, 223, 216, 0.15) 0%, rgba(74, 144, 226, 0.15) 100%);
      
      /* 改动点：增加边框，让轮廓清晰可见 */
      border-color: var(--dark-accent);
      
      /* 改动点：增加整体微弱发光，而不是只有底部 */
      box-shadow: 0 0 12px rgba(0, 223, 216, 0.15);
      
      /* 移除之前的底部下划线样式，让它看起来是一个整体的块 */
      border-bottom: 1px solid var(--dark-accent); 
  }
      
  .tab-content { display: none; }
  .tab-content.active { display: block; }

  /* === 桌面端：调整标题字体和大小 === */
  .tab-content h2, 
  .interaction-area h2 {
      color: var(--dark-accent);
      margin-top: 0;
      margin-bottom: 20px; /* 稍微增加下边距 */
      
      /* 1. 修改字体：Playfair Display + 马善政 */
      font-family: 'Playfair Display', 'Ma Shan Zheng', serif;
      
      /* 2. 修改桌面端大小：从 1.5em 减小到 1.3em，更精致 */
      font-size: 1.3em; 
      
      font-weight: 600;
      letter-spacing: 1px; /* 增加字间距，更有艺术感 */
  }

  .leader-scroll-container {
      position: relative;
      margin-bottom: 20px;
      padding: 0 40px;
  }

  .leader-grid {
      display: flex;
      overflow-x: auto;
      overflow-y: hidden;
      /* === 核心修改 === */
      /* 原来是 padding: 10px 0; */
      /* 改为：上下 20px (给上浮留空间)，左右 20px (给放大和光晕留空间) */
      padding: 20px 20px; 
      gap: 20px;
      border-radius: 4px;
      scroll-behavior: smooth;
      -ms-overflow-style: none;
      scrollbar-width: none;
  }
  .leader-grid::-webkit-scrollbar { display: none; }

  .leader-card {
      /* === 修改背景：由实心 #333333 改为半透明深色 === */
      background: rgba(0, 0, 0, 0.2); /* 比容器更深一点，增加对比度 */            
      /* === 修改边框：更细更淡 === */
      border: 1px solid rgba(255, 255, 255, 0.08);
      
      border-radius: 8px;
      padding: 15px;
      color: var(--dark-text-primary);
      cursor: pointer;
      transition: all 0.3s ease;
       /* 调整阴影，不再那么生硬 */
      box-shadow: 0 4px 6px rgba(0,0,0,0.1);
      flex: 0 0 300px;
      min-height: 280px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
  }

 /* 悬停效果：轻微发亮 */
  .leader-card:hover {
      background: rgba(255, 255, 255, 0.05); /* 微微提亮 */
      border-color: var(--dark-accent);
      transform: translateY(-3px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  }
  
  /* === 1. 选中卡片的样式升级 === */
  .leader-card.selected {
      /* 背景：从左上角(亮)到右下角(暗)的极光渐变，模拟光照 */
      background: linear-gradient(
          135deg, 
          rgba(0, 223, 216, 0.15) 0%,   /* 左上角：亮青色，呼应北极星 */
          rgba(30, 30, 30, 0.8) 60%,    /* 中间：过渡到深空灰 */
          rgba(74, 144, 226, 0.05) 100% /* 右下角：微弱的蓝色 */
      );
      
      /* 边框：高亮，青色，带一点点透明度 */
      border-color: #00DFD8;
      
      /* 阴影：核心修改！增加外发光，让卡片“浮”起来，产生激活感 */
      box-shadow: 
          0 0 20px rgba(0, 223, 216, 0.2), /* 柔和的青色光晕 */
          inset 0 0 15px rgba(0, 223, 216, 0.05); /* 内部的微弱反光 */
          
      /* 稍微放大一点点，体现层级 */
      transform: scale(1.02) translateY(-3px);
      
      /* 确保定位基准，为了放置星星 */
      position: relative; 
      overflow: hidden; /* 防止光效溢出 */
  }
  
  /* === 2. 右上角闪烁的星星 (使用伪元素，无需改HTML) === */
  .leader-card.selected::after {
      /* 使用 FontAwesome 的星星图标代码 */
      content: "\f005"; 
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      
      /* 位置：绝对定位在右上角 */
      position: absolute;
      top: 10px;
      right: 12px;
      
      /* 颜色：金色 (Gold) 或 亮青色 (Cyan)，推荐金色代表"选中/北极星" */
      color: #FFD700; 
      
      /* 大小 */
      font-size: 1.2rem;
      
      /* 添加阴影，让星星发光 */
      text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
      
      /* 动画：应用闪烁动画 */
      animation: starTwinkle 2s infinite ease-in-out;
  }
  
  /* === 3. 定义星星闪烁动画 === */
  @keyframes starTwinkle {
      0% {
          opacity: 0.6;
          transform: scale(0.9) rotate(0deg);
          text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
      }
      50% {
          opacity: 1;
          transform: scale(1.1) rotate(5deg);
          text-shadow: 0 0 15px rgba(255, 215, 0, 1); /* 最亮时光晕变大 */
      }
      100% {
          opacity: 0.6;
          transform: scale(0.9) rotate(0deg);
          text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
      }
  }
  
  /* 适配：如果卡片被选中，里面的文字稍微变亮 */
  .leader-card.selected h3 {
      color: #00DFD8; /* 标题变青色 */
      text-shadow: 0 0 5px rgba(0, 223, 216, 0.3);
  }

  .leader-card h3 {
      margin-top: 0;
      color: var(--dark-accent);
      font-size: 1.1em;
  }

  .leader-card p {
      font-size: 0.9em;
      margin-bottom: 8px;
      color: var(--dark-text-secondary);
      flex-grow: 1;
  }
  .leader-card .field {
      font-style: italic;
      color: var(--dark-field-text);
      margin-top: auto;
  }
  .leader-card .remarks {
      font-size: 0.8em;
      color: var(--dark-remarks-text);
      border-left: 3px solid var(--dark-remarks-border);
      padding-left: 10px;
      margin-top: 10px;
  }

  /* --- 替换原有的 .scroll-button 相关样式 --- */
  .scroll-button {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      /* 玻璃拟态 */
      background-color: rgba(30, 30, 30, 0.6);
      backdrop-filter: blur(4px);
      color: var(--dark-text-primary);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      width: 40px; /* 稍微加大一点 */
      height: 40px;
      font-size: 18px;
      font-weight: bold;
      cursor: pointer;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  }
  
  .scroll-button:hover {
      background-color: var(--dark-accent);
      color: #fff;
      border-color: var(--dark-accent);
      box-shadow: 0 0 15px var(--dark-accent); /* 强烈发光 */
      transform: translateY(-50%) scale(1.1); /* 保持垂直居中并放大 */
  }
  .scroll-button:disabled {
      opacity: 0.5;
      cursor: not-allowed;
  }
  .scroll-button.left { left: 0px; }
  .scroll-button.right { right: 0px; }

  .interaction-area {
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid var(--dark-border);
  }
  
  /* Shared styles for textareas */
  .interaction-area textarea, 
      #generatedPromptText {
      width: 100%;
      box-sizing: border-box;
      min-height: 80px;
      padding: 15px; /* 增加内边距 */
      /* === 修改背景：深邃的凹陷感 === */
      background-color: rgba(0, 0, 0, 0.25); 
      
      /* 边框：极细 */
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 8px;

      /* 字体保持您之前改的小说风格 */
      color: var(--dark-text-primary);
      
      /* 聚焦时：边框变亮，微弱光晕 */
      transition: border-color 0.3s, box-shadow 0.3s;
      margin-bottom: 15px;
      font-size: 1em;
          
      /* 针对 generatedPromptText 的特殊处理整合在这里 *   
      white-space: pre-wrap;
      word-wrap: break-word;
  }
      
  .interaction-area textarea::placeholder {
      color: var(--dark-text-secondary);
  }
      
  .interaction-area textarea:focus {
      outline: none;
      border-color: var(--dark-accent);
      background-color: rgba(0, 0, 0, 0.4); /* 聚焦时背景更深，突出文字 */
      box-shadow: 0 0 10px rgba(74, 144, 226, 0.15);
  }   

  .interaction-area button {
      padding: 12px 24px;
      /* 默认使用渐变背景 */
      background: linear-gradient(135deg, #3a7bc8 0%, #4a90e2 100%);
      color: #fff;
      border: none;
      border-radius: 30px; /* 全圆角 (Pill shape) */
      cursor: pointer;
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: 0.5px;
      transition: all 0.3s ease;
      flex: 1 1 200px;
      max-width: 280px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* 投影增加层次 */
      position: relative;
      overflow: hidden;
  }
  
  /* 悬停效果：上浮 + 阴影加深 */
  .interaction-area button:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(74, 144, 226, 0.4);
      background: linear-gradient(135deg, #4a90e2 0%, #6ab0ff 100%); /* 变亮 */
  }
  
  /* 针对“沉浸模式”按钮，做差异化处理（幽灵按钮风格），避免喧宾夺主 */
  .interaction-area button#immersiveModeButton {
      background: transparent;
      border: 1px solid var(--dark-accent);
      color: var(--dark-accent);
      box-shadow: none;
  }
  .interaction-area button#immersiveModeButton:hover {
      background: rgba(74, 144, 226, 0.1);
      box-shadow: 0 0 15px rgba(74, 144, 226, 0.2);
  }
  
  /* 针对“获取北极星回复”按钮，做强调处理（更亮的渐变） */
  .interaction-area button#getAIResponseButton {
      background: linear-gradient(135deg, #00DFD8 0%, #007cf0 100%); /* 青到蓝的渐变，呼应北极星主题 */
      color: #000; /* 亮背景配深色字更易读 */
      font-weight: 700;
  }
  .interaction-area button#getAIResponseButton:hover {
      box-shadow: 0 6px 25px rgba(0, 223, 216, 0.5); /* 青色光晕 */
  }
  
  .interaction-area button:disabled {
      background: #444;
      color: #888;
      transform: none;
      box-shadow: none;
      cursor: not-allowed;
  }    

  /* === 在原代码下方添加这段，专门覆盖第1个按钮的样式 === */
      .interaction-buttons {
      display: flex;
      gap: 15px; /* 增加按钮之间的间距，让它们呼吸 */
      margin-bottom: 15px;
      flex-wrap: wrap; /* 允许换行 */
      justify-content: center; 
  }

  /* 1. 覆盖默认状态 */
  /* 使用 :first-child 或 :nth-child(1) 精准选中第一个按钮 */
  .interaction-buttons button:first-child {
      /* 背景：增加一点蓝色倾向，不再那么灰暗，提升活跃度 */
      background: rgba(74, 144, 226, 0.15) !important; 
      
      /* 边框：稍微亮一点，增加精致感 */
      border: 1px solid rgba(74, 144, 226, 0.5) !important;
      
      /* 文字：纯白，更清晰 */
      color: #ffffff !important;
      
      /* 阴影：增加一点微弱的蓝光，让它看起来是“通电”的 */
      box-shadow: 0 0 10px rgba(74, 144, 226, 0.1), inset 0 0 5px rgba(255, 255, 255, 0.05) !important;
      
      /* 保持字体粗细，防止显得太弱 */
      font-weight: 600;
  }
  
  /* 2. 覆盖悬停状态 */
  .interaction-buttons button:first-child:hover {
      background: rgba(74, 144, 226, 0.3) !important; /* 悬停变更亮 */
      border-color: #4a90e2 !important;
      box-shadow: 0 0 15px rgba(74, 144, 226, 0.3) !important;
      transform: translateY(-2px);
  }
      
  /* --- 修改开始：调整选中北极星信息的样式支持 Flex 布局 --- */
  #selected-leader-info {
      margin-bottom: 15px;
      padding: 12px 10px; /* 稍微增加一点高度 */    
      /* === 修改背景：极淡的青色渐变，像一道光束 === */
      background: linear-gradient(90deg, rgba(0, 223, 216, 0.08) 0%, rgba(0, 0, 0, 0) 80%);
      
      /* === 修改边框：只保留左侧和底部，更有设计感 === */
      border-radius: 0 4px 4px 0;
      border-left: 3px solid var(--dark-accent); /* 左侧亮条 */
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      
      /* 文字颜色调整 */
      color: var(--dark-text-secondary); /* 标签文字稍微暗一点 */
      font-size: 0.95em;
      
      /* Flex 布局保持不变 */
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  /* 让名字本身更亮 */
  #selectedLeaderName {
      color: #fff;
      font-weight: bold;
      font-family: 'Playfair Display', serif; /* 名字可以用艺术字体 */
      margin-left: 5px;
      font-size: 1.1em;
      text-shadow: 0 0 10px rgba(0, 223, 216, 0.3); /* 名字微发光 */
  }

  /* 新增：右侧拷贝小图标的样式 */
  .copy-leader-btn {
      cursor: pointer;
      color: var(--dark-text-secondary);
      font-size: 1.1em;
      padding: 5px;
      border-radius: 4px;
      transition: all 0.3s ease;
  }
  .copy-leader-btn:hover {
      color: var(--dark-accent);
      background-color: rgba(255, 255, 255, 0.1);
      transform: scale(1.1);
  }
  /* --- 修改结束 --- */

  .response-display {
      margin-top: 25px; /* 增加一点间距 */
      padding: 0; /* 移除内边距，因为我们要把背景去掉了 */
      
      /* === 核心修改：去掉实心背景和边框 === */
      background-color: transparent; 
      border: none;
      border-radius: 0;
  }

  ./* 标题样式优化：变成高亮的青色标题 */
  .response-display h4, 
  .collapsible-header h4 {
      margin-top: 0;
      margin-bottom: 15px;
      
      /* 颜色改为主题强调色 */
      color: var(--dark-accent); 
      
      font-family: 'Poppins', sans-serif; /* 使用英文字体库 */
      font-weight: 600;
      font-size: 1.1em;
      letter-spacing: 0.5px;
      
      /* 增加一个底部的发光线条 */
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(0, 223, 216, 0.2);
      display: flex; /* 如果有图标，保证对齐 */
      align-items: center;
  }
  
  /* 针对 "生成的 问题" 的折叠头部的特殊微调 */
  .collapsible-header {
      cursor: pointer;
      /* 给可点击区域加一点内边距，方便点击 */
      padding: 5px 0; 
      transition: opacity 0.3s;
  }
  .collapsible-header:hover {
      opacity: 0.8;
  }     
  .collapsible-header:hover #prompt-toggle-icon {
      color: var(--dark-accent);
  }        
  /* 箭头旋转动画类 */
  .icon-rotated {
      transform: rotate(180deg);
  }
  
  /* --- MODIFICATION START: Styles for aiResponseText (was pre) --- */
  #aiResponseText {
      white-space: pre-wrap;
      word-wrap: break-word;
      background-color: var(--dark-pre-bg);
      padding: 10px;
      border: 1px solid var(--dark-pre-border);
      border-radius: 4px;
      font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
      font-size: 0.9em;
      color: var(--dark-text-secondary);
      max-height: 300px;
      overflow-y: auto;
      /* 增加一个内部的顶部高光，增加立体感 */
      box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
  }
  /* --- MODIFICATION END --- */

  /* --- [新增] 统一输入框与答复框为小说阅读字体风格 --- */
  #userQuestion, 
  #generatedPromptText, 
  #aiResponseText {
      font-family: var(--font-family-novel);
      font-size: 1.05rem; /* 稍大字体 */
      line-height: 1.7;   /* 更宽松的行高 */
      text-align: justify;/* 两端对齐 */
      color: var(--dark-text-primary); /* 确保文字颜色为主要文字颜色 */
  }
  /* Make the prompt textarea taller */
  /* 调整提示词文本框，确保在展开时显示正确 */
  #generatedPromptText {
      width: 100%;
      box-sizing: border-box;
      min-height: 200px; /* Increased height for better editing */
  }
  /* --- [新增] 结束 --- */

     /* 2. 标题 H2：复刻流光渐变艺术字 */
  #immersiveModal h2 {
      font-family: 'Playfair Display', 'Ma Shan Zheng', serif;
      font-size: 2em;
      text-align: center;
      
      /* 间距控制 */
      margin-top: 6px;
      margin-bottom: 25px;
      line-height: 1.3;
      
      font-weight: 700;
      
      /* 使用您标志性的渐变色 */
      background: linear-gradient(90deg, #00DFD8, #7928CA);
      background-size: 200% auto;
      color: transparent;
      -webkit-background-clip: text;
      background-clip: text;
      
      /* 增加文字发光，增加神圣感 */
      filter: drop-shadow(0 0 5px rgba(0, 223, 216, 0.3));
      
      animation: colorWave 7s linear infinite;
      /* 6. 防干扰：确保没有普通文字阴影干扰发光效果 */
      text-shadow: none; 
  }
  
  /* 3. 正文容器：复刻小说排版 */
  #immersiveModal .manifesto-text {
      /*font-family: 'LXGW WenKai Screen', 'KaiTi', 'STKaiti', 'Playfair Display', serif;*/
      font-family: 'Playfair Display', 'Ma Shan Zheng', serif;
      
      /* 关键：使用 300 字重，配合抗锯齿，实现“清冷”质感 */
      -webkit-font-smoothing: antialiased;
      
      color: #e0e0e0;     /* 稍微柔和的白色 */
      font-size: 1.15em;
      line-height: 1.9;   /* 大行高，呼吸感 */
      text-align: justify;
      
      /* 滚动区域控制 */
      padding: 0 10px; /* 稍微给滚动条留点位置 */
      max-height: 65vh;
      overflow-y: auto;
      
      /* 微弱文字阴影增加清晰度 */
      text-shadow: 0 0 1px rgba(0,0,0,0.3);
  }
  
  /* 4. 强制覆盖内部段落样式 (防止被之前的 Segoe UI 权重覆盖) */
  #immersiveModal .manifesto-text p {
      font-family: inherit; /* 继承上面的 Noto Serif SC */
      font-size: inherit;
      line-height: inherit;
      margin-bottom: 1.5em;
      text-align: justify;
      text-shadow: 0 1px 2px rgba(0,0,0,0.5); /* 增加文字立体感 */
  }
  
  /* 5. 优化引用块 (Blockquote) - 使其更具文学感 */
  #immersiveModal .manifesto-text blockquote {
      /* 引用文字建议用楷体，与正文宋体区分，更有笔记感 */
      font-family: 'Playfair Display', 'Ma Shan Zheng', serif;
      
      font-size: 1.05em; 
      line-height: 1.8; 
      text-align: left; 
      
      /* 样式：透明背景 + 左侧亮条 */
      background-color: rgba(255, 255, 255, 0.03); 
      border-left: 3px solid var(--dark-accent); 
      
      padding: 15px 20px; 
      margin: 20px 0; 
      border-radius: 0 6px 6px 0;
      color: #d0d0d0;
  }
  
  /* 6. 优化内部小标题 (H3/H4) */
  #immersiveModal .manifesto-text h3,
  #immersiveModal .manifesto-text h4 {
      font-family: 'Playfair Display', 'Ma Shan Zheng', serif;
      color: var(--dark-accent);
      margin-top: 30px;
      margin-bottom: 15px;
      font-weight: 400; /* 宋体标题不宜太粗 */
      font-size: 1.3em;
      letter-spacing: 1px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      padding-bottom: 8px;
  }


  /* ===#apiSettingsModal (API设置) 样式重构，与整体保持一致=== */
  /* 1. 容器：深色磨砂玻璃 + 呼吸感光晕 */
  #apiSettingsModal .modal-content {
      /* 背景：深色高模糊 */
      background: rgba(25, 25, 25, 0.85);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      
      /* 边框：极细光环 */
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-top: 1px solid rgba(255, 255, 255, 0.2);
      
      /* 阴影 */
      box-shadow: 
          0 20px 50px rgba(0, 0, 0, 0.8), 
          0 0 0 1px rgba(0, 223, 216, 0.1); 
          
      border-radius: 12px;
      
      /* 尺寸与布局 */
      max-width: 500px; /* 设置不需要太宽，精致一点 */
      margin: 3% auto;  /* 垂直位置 */
      padding: 6px 40px 40px; /* 内部留白 */
      position: relative;
  }
  
  /* 2. 标题 H2：流光渐变艺术字 */
  #apiSettingsModal h2 {
      font-family: 'Playfair Display', 'Ma Shan Zheng', serif;
      font-size: 1.6em; /* 设置里标题不需要太大 */
      text-align: center;
      margin-top: 0;
      margin-bottom: 20px;
      font-weight: 700;
      letter-spacing: 1px;
      
      /* 渐变流光 */
      background: linear-gradient(90deg, #00DFD8, #7928CA);
      background-size: 200% auto;
      
      color: transparent;
      -webkit-background-clip: text;
      background-clip: text;
      
      /* 发光滤镜 */
      filter: drop-shadow(0 0 5px rgba(0, 223, 216, 0.4));
      animation: colorWave 7s linear infinite;
      
      /* 确保图标也垂直居中 */
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
  }
  /* 让标题里的图标也能吃到渐变色 */
  #apiSettingsModal h2 i {
      background: inherit;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
  }
  
  /* 3. 表单标签：优雅的宋体/衬线体 */
  #apiSettingsModal label {
      font-family: 'Noto Serif SC', 'Playfair Display', serif;
      font-size: 1.1em;
      color: #d0d0d0; /* 稍微柔和的灰白 */
      margin-bottom: 10px;
      font-weight: 500;
      letter-spacing: 0.5px;
  }
  #apiSettingsModal label i {
      color: var(--dark-accent); /* 图标用主题蓝/青色 */
      width: 20px; /* 固定宽度保证对齐 */
      text-align: center;
  }
  
  /* 4. 输入框与下拉菜单：深邃凹陷感 */
  #apiSettingsModal input[type="text"],
  #apiSettingsModal input[type="password"],
  #apiSettingsModal select {
      width: 100%;
      padding: 12px 15px;
      box-sizing: border-box;
      
      /* 字体保持一致 */
      font-family: 'Noto Serif SC', sans-serif; /* 输入内容用宋体也很有质感 */
      font-size: 1rem;
      color: #fff;
      
      /* 背景：半透明深色 */
      background-color: rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 6px;
      
      transition: all 0.3s ease;
      outline: none;
  }
  
  /* 聚焦状态：边框变青色，微弱发光 */
  #apiSettingsModal input:focus,
  #apiSettingsModal select:focus {
      border-color: #00DFD8;
      box-shadow: 0 0 10px rgba(0, 223, 216, 0.15);
      background-color: rgba(0, 0, 0, 0.5);
  }
  
  /* 下拉菜单选项的样式 (浏览器兼容性有限，但在Chrome下有效) */
  #apiSettingsModal select option {
      background-color: #1e1e1e;
      color: #fff;
      padding: 10px;
  }
  
  /* 5. 设为默认模型 (Checkbox) 区域 */
  #apiSettingsModal .form-group:last-of-type label {
      cursor: pointer;
      transition: color 0.3s;
      background: rgba(255,255,255,0.03); /* 给这一行加个淡淡的底色 */
      padding: 10px;
      border-radius: 6px;
      border: 1px solid rgba(255,255,255,0.05);
  }
  #apiSettingsModal .form-group:last-of-type label:hover {
      border-color: var(--dark-accent);
      color: #fff;
  }
  #apiSettingsModal input[type="checkbox"] {
      width: 16px;
      height: 16px;
      accent-color: var(--dark-accent); /* 设置勾选颜色 */
      cursor: pointer;
  }
  
  /* 6. 保存按钮：青蓝渐变，药丸形状 */
  #apiSettingsModal .save-btn {
      width: 100%;
      margin-top: 15px;
      padding: 12px;
      
      /* 渐变背景 */
      background: linear-gradient(135deg, #00DFD8 0%, #4a90e2 100%);
      
      color: #000; /* 亮背景配深色字 */
      font-weight: 700;
      font-size: 1.1em;
      font-family: 'Playfair Display', sans-serif;
      letter-spacing: 1px;
      
      border: none;
      border-radius: 30px;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(0, 223, 216, 0.3);
      
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
  }
  
  #apiSettingsModal .save-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 25px rgba(0, 223, 216, 0.5); /* 悬停更亮 */
      filter: brightness(1.1);
  }
  
  /* 7. 关闭按钮位置微调 */
  #apiSettingsModal .close-button {
      top: 15px;
      right: 20px;
      font-size: 28px;
      font-weight: 300;
      color: rgba(255,255,255,0.4);
  }
  #apiSettingsModal .close-button:hover {
      color: #00DFD8;
      transform: rotate(90deg);
  }

  .loading-spinner {
      border: 4px solid #555;
      border-top: 4px solid var(--dark-accent);
      border-radius: 50%;
      width: 20px;
      height: 20px;
      animation: spin 1s linear infinite;
      display: inline-block;
      margin-left: 10px;
      vertical-align: middle;
  }
  @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }

  footer {
      text-align: left;
      padding: 20px 50px;
      background: rgba(0, 0, 0, 0.5);
  }

  /* 媒体查询，在小屏幕上调整布局 */
  @media (max-width: 768px) {
       header {
          padding-top: 15px; /* 适当减少顶部内边距 */
      }
      .logo-container {
          top: 15px;
          left: 15px;
      }
      .logo-container img {
          height: 50px;
      }
      h1 {
          /* 调整移动端的 h1 margin-top */
          margin-top: 64px; /* 根据实际情况调整，确保不被 Logo 遮挡，从80—》64 */
          font-size: 2em; 
          margin-bottom: 1px; /* 增加一点底部边距，从15-》1 */
          line-height: 1.25;
          text-wrap: balance; /* 新增此行 */
      }
      .top-right-controls { 
          /* 相应调整移动端按钮位置 */
          top: 15px;
          right: 15px; 
          gap: 10px;
      }
      /* === 新增/修改：减小按钮尺寸 === */
      .icon-btn {
          width: 34px;       /* 电脑端是40px，这里缩小到34px */
          height: 34px;      /* 保持正圆 */
          /* === 新增：PC端防止被拉伸的关键 === */        
          flex: 0 0 34px;        /* 强制 flex 占用空间 */
          min-width: 34px;       /* 强制最小宽度 */
          max-width: 34px;       /* 强制最大宽度 */
          /* ================================ */
          font-size: 0.95rem;/* 图标也稍微调小 */
      }
      .about-us-button {
          font-size: 0.9rem; /* 恢复自动宽度 */
          padding: 6px 12px;
      }
      .settings-link { font-size: 0.9rem; padding: 6px 12px;}
      .language-selector { font-size: 0.8rem; padding: 7px; }

      body { line-height: 1.55; }
      .container { width: 92%; padding: 15px; margin-top: 0px; }
      .tabs { justify-content: flex-start; margin-bottom: 15px; }
      .tab-button { padding: 5px 14px; font-size: 11px; margin-right: 4px; margin-bottom: 4px; min-width: 30px; }
      /* === 手机端：增大标题字号 === */
      .tab-content h2, 
      .interaction-area h2 { 
          /* 原来是 0.9em，现在调大到 1.2em */
          font-size: 1.2em; 
          
          margin-bottom: 15px; 
          
          /* 确保手机上也继承艺术字体 */
          font-family: 'Playfair Display', 'Ma Shan Zheng', serif;
          
          /* 稍微居中或者保持左对齐，看您喜好，这里建议保持默认左对齐但加点左间距 */
          padding-left: 2px;
      }
      .leader-scroll-container { padding: 0 35px; }
      .leader-grid { gap: 15px; }
      .leader-card { flex: 0 0 250px; min-height: 260px; padding: 12px; }
      .leader-card h3 { font-size: 1.05em; }
      .leader-card p { font-size: 0.85em; }
      .leader-card .remarks { font-size: 0.78em; }
      .scroll-button { width: 32px; height: 32px; font-size: 18px; }
      .scroll-button.left { left: 3px; }
      .scroll-button.right { right: 3px; }
      .interaction-buttons { flex-direction: column; gap: 10px; }
      .interaction-area button { width: 100%; font-size: 0.92em; padding: 12px 15px; flex-grow: 0; flex-basis: auto; max-width: none; }
      .interaction-area textarea { font-size: 0.95em; min-height: 75px; padding: 9px; }
      #selected-leader-info { font-size: 0.95em; padding: 9px; }
      #aiResponseText { font-size: 0.95em; } /* MODIFIED: was pre */

      .manifesto-modal .modal-content {
          margin: 5% auto;
          max-width: 95%;
      }
      .manifesto-modal h2 {
          font-size: 1.5em;
          margin-bottom: 15px;
      }
      .manifesto-modal .manifesto-text {
          font-size: 0.95em;
          line-height: 1.7;
      }
      .manifesto-modal p.conclusion {
          font-size: 1.05em;
          margin-top: 20px;
      }
      #immersiveModal h2 {
          font-size: 1.3em;
          margin-bottom: 15px;
      }
      #immersiveModal .modal-section-title {
          font-size: 1.1em; /* 调整子标题 H3/H4 字体大小 */
          margin: 15px 0 8px 0;
      }
      #immersiveModal .manifesto-text p,
      #immersiveModal .manifesto-text blockquote {
          font-size: 0.95em; /* 调整段落和引用文本大小，与宣言模态框内容 (.manifesto-modal .manifesto-text) 保持一致 */
          line-height: 1.6; 
      }
  }

/* 手机端小屏幕样式 (max-width: 480px) - 最终合并修复版 */
@media (max-width: 480px) {
  /* --- 1. 头部与 Logo --- */
  header {
      padding-top: 10px;
  }
  .logo-container {
      top: 10px;
      left: 10px;
  }
  .logo-container img {
      height: 45px;
  }
  h1 {
      margin-top: 56px; 
      font-size: 1.6em;
      letter-spacing: 0px; 
      line-height: 1.2; 
      text-wrap: balance; 
  }
  .top-right-controls { 
      right: 10px; 
      gap: 8px;
  }

  /* --- 2. 顶部功能按钮 --- */
  .icon-btn {
      width: 30px;
      height: 30px;
      font-size: 0.85rem;
      border-width: 0.5px;
  }
  .about-us-button { font-size: 0.8rem; padding: 5px 10px; }
  .settings-link { font-size: 0.8rem; padding: 5px 10px;}
  .language-selector { font-size: 0.75rem; padding: 6px; }

  /* --- 3. 容器与Tab --- */
  .container { width: 95%; padding: 10px; margin-top: 0px; }
  .tab-content h2, .interaction-area h2 { font-size: 0.9em; margin-bottom: 10px; }
  
  /* 补全 .tabs 的 Flex 属性，确保按钮能自动换行 */
  .tabs {
      display: flex;
      flex-wrap: wrap; /* 关键：防止英文挤出屏幕 */
      justify-content: center;
      gap: 8px;
      margin-bottom: 15px;
  }

  .tab-button { 
      font-size: 11px; 
      padding: 4px 4px; /* 稍微增加一点横向点击范围 */
      margin-right: 2px; 
      margin-bottom: 3px; 
      min-width: 30px;
      flex: 0 0 auto; /* 防止被压缩 */
  }

  /* --- 4. [核心修复] 卡片滚动区域 --- */
  
  /* 修复A: 隐藏左右翻页按钮 */
  .scroll-button {
      display: none !important; 
  }
  
  /* 修复B: 移除容器原本的左右黑边 (原代码是 padding: 0 28px) */
  .leader-scroll-container { 
      padding: 0 !important; /* 改为0，释放屏幕宽度 */
      margin-bottom: 20px;
  }

  /* 修复C: 调整卡片轨道 padding */
  .leader-grid { 
      display: flex;
      overflow-x: auto;
      gap: 15px;
      
      /* 上下 25px：防止星星和光晕被切 */
      /* 左右 10px：给卡片留出一点点呼吸感，但不要太宽导致被遮挡 */
      padding: 25px 10px; 
      
      scroll-padding-left: 10px; 
  }

  /* 修复D: 增大卡片宽度 */
  .leader-card { 
      /* 85vw：占据屏幕 85% 宽度，视觉上更完整，两边黑边极小 */
      flex: 0 0 83vw; 
      min-height: auto; 
      padding: 10px; 
      position: relative; /* 确保星星定位正确 */
  }
  
  .leader-card h3 { font-size: 1em; }
  .leader-card p { font-size: 0.82em; }
  .leader-card .remarks { font-size: 0.75em; }
  
  /* 针对手机微调星星位置 */
  .leader-card.selected::after {
      top: 8px;
      right: 8px;
  }

  /* --- 5. 交互区域与模态框 (保持原样) --- */
  .interaction-area button { font-size: 0.88em; padding: 10px 12px; }
  #selected-leader-info { font-size: 0.9em; padding: 8px; }
  .interaction-area textarea { min-height: 65px; font-size: 0.9em; padding: 8px; }
  .response-display { padding: 10px; }
  #aiResponseText { font-size: 0.9em; padding: 8px; }
  
  .manifesto-modal h2 { font-size: 1.3em; }
  .manifesto-modal .manifesto-text { font-size: 0.9em; line-height: 1.6; }
  .manifesto-modal p.conclusion { font-size: 1em; }
  
  .manifesto-modal .modal-content {
      width: 94%;          
      margin: 20px auto;   
      padding: 15px;       
      box-sizing: border-box; 
  }
  .close-button { right: 10px; top: 5px; }
  
  #immersiveModal h2 { font-size: 1.0em; }
  #immersiveModal .modal-section-title { font-size: 1.0em; margin: 12px 0 6px 0; }
  #immersiveModal .manifesto-text p,
  #immersiveModal .manifesto-text blockquote { font-size: 0.9em; line-height: 1.5; } 

  /* 手机端apiSettingsModal样式适配 */
  #apiSettingsModal .modal-content {
      width: 80%;
      margin: 3% auto;
      padding: 4px 20px;
  }
  #apiSettingsModal h2 {
      font-size: 1.5em;
  }
}    

  /* === 全局滚动条美化 (Chrome, Edge, Safari) === */
  /* 1. 设置滚动条的整体尺寸 */
  ::-webkit-scrollbar {
      width: 10px;     /* 纵向滚动条宽度 */
      height: 10px;    /* 横向滚动条高度 */
  }     
  
  /* 2. 滚动条轨道 (Track)：设为透明或极淡的深色 */
  ::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.1); 
      border-radius: 5px;
  }
  
  /* 3. 滚动条滑块 (Thumb)：设为半透明的深灰色 */
  ::-webkit-scrollbar-thumb {
      background-color: rgba(255, 255, 255, 0.15); /* 默认状态：低调的灰 */
      border-radius: 5px;
      border: 2px solid transparent; /* 关键：用透明边框挤压背景，制造“悬浮”感 */
      background-clip: content-box;  /* 让颜色只填充在内容区域 */
  }
  
  /* 4. 鼠标悬停在滑块上：变亮或变成主题色 */
  ::-webkit-scrollbar-thumb:hover {
      background-color: var(--dark-accent); /* 悬停时变成你的主题蓝/青色 */
      border-width: 1px; /* 悬停时稍微变大一点 */
  }
  
  /* 5. 两个滚动条交汇的角落 */
  ::-webkit-scrollbar-corner {
      background: transparent;
  }
  
  /* === 全局滚动条美化 (Firefox) === */
  * {
      scrollbar-width: thin; /* 瘦身 */
      scrollbar-color: rgba(255, 255, 255, 0.15) transparent; /* 滑块颜色 轨道颜色 */
  }

  /* --- 音乐播放器样式 --- */
  /* 1. 音乐按钮容器 */
  .music-wrapper {
      position: relative; /* 为绝对定位的小标记做参照 */
      overflow: visible;  /* 允许小标记超出圆圈边界 */
  }        
  /* 2. 随机播放小标记 (右上角的小圆点) */
  .random-badge {
      position: absolute;
      top: -5px;
      right: -5px;
      width: 18px;
      height: 18px;
      
     /* === 修改 1: 暂时隐藏 (如需隐藏请取消下一行的注释) === */
     display: none; 
  
      /* === 修改 2: 优化颜色 (未来启用时请使用下方样式，替代原来的金色渐变) === */
      /* 原来的金色太亮，改为深色半透明风格，更显高级且不抢眼 */
      background: rgba(255, 255, 255, 0.15); /* 低调的半透明白 */
      backdrop-filter: blur(2px);            /* 磨砂感 */
      border: 1px solid rgba(255, 255, 255, 0.2);
      color: rgba(255, 255, 255, 0.7);       /* 文字颜色柔和一点 */
      /* ------------------------------------------------------- */
  
      border-radius: 50%;
      /* display: flex; <--- 未来启用时，记得把上面的 display: none 去掉，恢复这行 display: flex */
      align-items: center;
      justify-content: center;
      font-size: 10px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.3);
      z-index: 5;
      cursor: pointer;
      transition: all 0.2s;
  }
  
  .random-badge:hover {
      transform: scale(1.1);
      /* 悬停时稍微亮一点，提示可点击 */
      background: var(--dark-accent); 
      color: #fff;
      border-color: var(--dark-accent);
  }
  /* 3. 播放时的动画效果 */
  .music-playing .main-music-icon {
      animation: musicRotate 3s linear infinite; /* 图标旋转 */
      color: var(--dark-accent); /* 变成主题色 */
  }        
  /* 音乐图标旋转动画 */
  @keyframes musicRotate {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }        
  /* 手机端适配：防止小标记被切掉 */
  @media (max-width: 480px) {
       /* 1. 确保右上角控制区不换行、不压缩 */
      .top-right-controls { 
          right: 10px; 
          gap: 8px;
          flex-wrap: nowrap; /* 禁止换行 */
          z-index: 100; /* 提高层级，防止被背景遮挡 */
      }
  
      /* 2. 强制设定按钮尺寸和样式 */
      .icon-btn {
          width: 32px !important;  /* 稍微给大一点点触控面积 */
          height: 32px !important;
          /* === 新增：PC端防止被拉伸的关键 === */        
          flex: 0 0 32px !important;;        /* 强制 flex 占用空间 */
          min-width: 32px !important;;       /* 强制最小宽度 */
          max-width: 32px !important;;       /* 强制最大宽度 */
          /* ================================ */
          font-size: 0.9rem !important; /* 字体大小适配 */
          border-width: 1px !important; /* 边框清晰化 */
          flex-shrink: 0 !important;    /* 核心：禁止压缩 */
          display: flex !important;     /* 确保 Flex 居中生效 */
          align-items: center;
          justify-content: center;
      }        
      /* 3. 手机端取消 Hover 旋转特效 (防止点击后图标卡住) */
      .icon-btn:hover {
          transform: none !important; 
          background-color: rgba(255, 255, 255, 0.05); /* 保持背景微亮，但不要旋转 */
      }
  }

  /* === [新增] Begin 优雅阅读模式 (Celestial Manuscript Mode) === */
  /* 1. 模态框背景：极深色，高模糊，营造专注感 */
  .elegant-modal {
      background-color: rgba(10, 10, 10, 0.95); /* 比普通模态框更黑 */
      backdrop-filter: blur(15px);
      -webkit-backdrop-filter: blur(15px);
      display: none; /* 默认隐藏 */
      opacity: 0;
      transition: opacity 0.4s ease; /* 淡入淡出 */
  }
  
  .elegant-modal.show {
      opacity: 1;
  }
  
  /* 2. 核心容器：模拟悬浮的手稿/卡片 */
  .elegant-container {
      width: 90%;
      max-width: 800px; /* 类似A4纸或书籍宽度 */
      height: 85vh;     /* 占据大部分屏幕高度 */
      margin: 5vh auto; /* 垂直居中 */
      
      /* 核心质感：深色磨砂 + 极细光边 */
      background: linear-gradient(145deg, rgba(30, 30, 30, 0.9), rgba(20, 20, 20, 0.95));
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 
          0 20px 60px rgba(0, 0, 0, 0.8),         /* 深邃投影 */
          0 0 0 1px rgba(0, 223, 216, 0.1),       /* 极细青色外框 */
          inset 0 0 30px rgba(0, 223, 216, 0.05); /* 内部微光 */
          
      border-radius: 12px;
      position: relative;
      overflow: hidden; /* 裁剪内部溢出 */
      transform: scale(0.95);
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* 弹性放大效果 */
  }
  
  .elegant-modal.show .elegant-container {
      transform: scale(1);
  }
  
  /* 3. 关闭按钮：特殊设计，位于右上角 */
  .elegant-close {
      position: absolute;
      top: 15px;
      right: 20px;
      font-size: 32px;
      color: rgba(255, 255, 255, 0.3);
      z-index: 10;
      transition: all 0.3s;
  }
  .elegant-close:hover {
      color: var(--dark-accent);
      transform: rotate(90deg);
  }
  
  /* 4. 内容滚动区 */
  .elegant-content {
      height: 100%;
      overflow-y: auto;
      padding: 60px 50px; /* 宽敞的内边距，类似书籍留白 */
      box-sizing: border-box;
      
      /* 隐藏滚动条但保留功能 */
      scrollbar-width: thin;
      scrollbar-color: rgba(255,255,255,0.1) transparent;
  }
  .elegant-content::-webkit-scrollbar { width: 6px; }
  .elegant-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
  
  /* 5. 装饰星号 */
  .decoration-star {
      text-align: center;
      color: var(--dark-accent);
      font-size: 1.2rem;
      opacity: 0.8;
      margin-bottom: 30px;
      animation: pulseStar 3s infinite ease-in-out;
  }
  @keyframes pulseStar { 0%, 100% { opacity: 0.4; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.1); } }
  
  /* 6. 标签小字 (Question / Insight) */
  .elegant-label {
      font-family: 'Cinzel', serif; /* 使用已引入的衬线大写字体 */
      font-size: 0.8rem;
      letter-spacing: 3px;
      color: rgba(255, 255, 255, 0.6);
      text-align: center;
      margin-bottom: 15px;
      border-bottom: 1px solid rgba(255,255,255,0.1);
      display: inline-block;
      padding-bottom: 5px;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
  }
  
  /* 7. 问题文本 */
  #elegantQuestionText {
      font-family: 'Noto Serif SC', 'Playfair Display', serif; /* 宋体/衬线体 */
      font-style: italic;
      color: #e0e0e0;
      font-size: 1.1rem;
      line-height: 1.6;
      text-align: center;
      max-width: 80%;
      margin: 0 auto;
  }
  
  /* 8. 分割线 */
  .elegant-divider {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(0, 223, 216, 0.4), transparent);
      margin: 40px auto;
      width: 60%;
  }
  
  /* 9. 答案文本 (核心) */
  #elegantAnswerText {
      font-family: 'Noto Serif SC', 'Playfair Display', serif; /* 核心阅读字体 */
      font-size: 1.25rem; /* 字号较大 */
      line-height: 2;     /* 宽松行高，极大提升阅读感 */
      color: #e0e0e0;
      text-align: justify; /* 两端对齐 */
      text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  }
  
  /* 增加段落间距 */
  #elegantAnswerText p { margin-bottom: 1.5em; }
  /* 强调重点 */
  #elegantAnswerText strong { color: var(--dark-accent); font-weight: 700; }

  /* 确保公式过长时可以横向滚动，而不是撑乱布局 */
  .elegant-content #elegantAnswerText {
      overflow-x: auto; /* 允许横向滚动 */
      line-height: 1.8; /* 增加行高，避免公式上下打架 */
  }
  
  /* 针对 MathJax 生成的容器进行优化 */
  mjx-container {
      overflow-x: auto;
      overflow-y: hidden;
      max-width: 100%;
      vertical-align: middle; 
  }
  
  /* 10. 底部 Logo */
  .elegant-footer {
      margin-top: 60px;
      text-align: center;
      font-family: 'Cinzel', serif;
      font-size: 0.9rem;
      color: rgba(255, 255, 255, 0.6);
  }
  
  /* === 移动端适配 === */
  @media (max-width: 768px) {
      .elegant-container {
          width: 100%;
          height: 100%;
          margin: 0;
          border-radius: 0; /* 全屏模式 */
          border: none;
      }
      .elegant-content {
          padding: 40px 20px; /* 减少内边距 */
      }
      #elegantQuestionText {
          font-size: 1rem;
          max-width: 100%;
      }
      #elegantAnswerText {
          font-size: 1.1rem;
          line-height: 1.8;
      }
      .elegant-close {
          top: 20px;
          right: 20px;
      }
  }
  /* ===END [新增] Begin 优雅阅读模式 (Celestial Manuscript Mode) === */


/* --- 对话画布 (Dialogue Canvas) v2.0 重制版 --- */

/* 1. 模态框容器：深邃宇宙背景 */
.canvas-modal {
    display: none;   /* 调试时暂时注释 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 2000;
    /* 核心背景：深蓝渐变 */
    background: linear-gradient(to bottom, #02060a 0%, #0d1620 100%);
    font-family: 'Noto Serif SC', 'Cinzel', serif;
    overflow: hidden; /* 防止背景滚动溢出 */
}

/* 2. 第一层星空：背景细碎星尘 (慢速漂移) */
.canvas-modal::before {
    content: "";
    position: absolute;
    top: 0; left: 0; 
    width: 200%; height: 200%; /* 放大容器以便移动 */
    
    /* 生成细小的白色星点，锐利不模糊 */
    background-image: 
        radial-gradient(1px 1px at 10% 10%, #fff, transparent),
        radial-gradient(1px 1px at 20% 30%, #fff, transparent),
        radial-gradient(1px 1px at 30% 15%, #fff, transparent),
        radial-gradient(1px 1px at 40% 60%, #fff, transparent),
        radial-gradient(1px 1px at 50% 30%, #fff, transparent),
        radial-gradient(1px 1px at 60% 80%, #fff, transparent),
        radial-gradient(1px 1px at 70% 50%, #fff, transparent),
        radial-gradient(1px 1px at 80% 20%, #fff, transparent),
        radial-gradient(1px 1px at 90% 70%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 25% 85%, rgba(255,255,255,0.8), transparent),
        radial-gradient(1.5px 1.5px at 75% 15%, rgba(255,255,255,0.8), transparent);
    
    background-size: 500px 500px; /* 定义星图重复的单元大小 */
    background-repeat: repeat;
    opacity: 0.5;
    
    /* 动画：左上角斜向缓慢移动 */
    animation: star-drift 120s linear infinite;
    z-index: -2;
}

/* 3. 第二层星空：近处亮星 (较快漂移 + 呼吸闪烁) */
.canvas-modal::after {
    content: "";
    position: absolute;
    top: -50%; left: -50%; 
    width: 200%; height: 200%;
    
    /* 较大的亮星，更稀疏 */
    background-image: 
        radial-gradient(2px 2px at 15% 15%, #fff, transparent),
        radial-gradient(2px 2px at 45% 75%, #fff, transparent),
        radial-gradient(2px 2px at 85% 35%, #fff, transparent),
        radial-gradient(2.5px 2.5px at 50% 50%, #fff, transparent); /* 一颗特亮的主星 */
        
    background-size: 600px 600px; /* 错开背景尺寸，增加随机感 */
    background-repeat: repeat;
    
    /* 复合动画：位移 + 闪烁 */
    animation: 
        star-drift 80s linear infinite reverse, /*反向移动，制造视差立体感*/
        star-twinkle 4s ease-in-out infinite alternate; /* 呼吸闪烁 */
        
    z-index: -1;
}

/* --- 动画定义 --- */

/* 星星漂移：移动 background-position 或者 translate */
@keyframes star-drift {
    from { transform: translate(0, 0); }
    to { transform: translate(-100px, -200px); }
}

/* 星星闪烁：改变透明度 */
@keyframes star-twinkle {
    0% { opacity: 0.3; }
    50% { opacity: 0.8; }
    100% { opacity: 0.3; }
}


/* 2. 核心视口 */
.canvas-viewport {
    position: relative;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    padding-bottom: 150px; /* 底部留白 */
    perspective: 1000px; /* 增加3D透视感 */
}

/* 3. 连线层：金色星轨 */
.thought-trails {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
    filter: drop-shadow(0 0 5px rgba(197, 160, 89, 0.5)); /* 发光效果 */
}

.trail-path {
    fill: none;
    stroke: #c5a059; /* 金色 */
    stroke-width: 1.5px;
    opacity: 0.6;
    /* 不再是虚线，而是像星图连线一样的实线 */
}

/* 4. 节点流容器 */
.thought-stream {
    position: relative;
    max-width: 1100px; /* 更宽一点 */
    margin: 0 auto;
    padding: 100px 40px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

/* 5. 通用节点卡片样式 */
.thought-node {
    position: relative;
    max-width: 48%;
    padding: 0; /* 内部布局负责padding */
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    animation: floatIn 0.8s ease-out forwards;
    opacity: 0;
}

@keyframes floatIn {
    from { opacity: 0; transform: translateY(30px) rotateX(5deg); }
    to { opacity: 1; transform: translateY(0) rotateX(0); }
}

/* 悬停效果：轻微上浮 + 发光增强 */
.thought-node:hover {
    transform: translateY(-5px);
    z-index: 10;
}

/* --- 用户提问卡片：极简便签风格 --- */
.thought-node.question-node {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.1); /* 半透明玻璃感 */
    border-left: 4px solid #fff;
    backdrop-filter: blur(10px);
    padding: 20px 25px;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    border-radius: 0 10px 10px 0;
}

.question-node .user-avatar-mark {
    position: absolute;
    left: -20px;
    top: -15px;
    width: 40px;
    height: 40px;
    background: #fff;
    color: #0d1218;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.user-handwriting {
    font-family: 'Ma Shan Zheng', cursive; /* 手写体 */
    font-size: 1.4rem;
    line-height: 1.6;
    letter-spacing: 1px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* --- 北极星回答卡片：古典羊皮纸风格 (修复版) --- */
.thought-node.answer-node {
    align-self: flex-end;
    background: #f4ecd8; 
    color: #2c1e12;
    
    /* 1. [核心修复] 移除原来的 clip-path (这个是造成切角生硬的元凶) */
    clip-path: none !important; 
    
    /* 2. 使用圆角：左上、右上、左下为小圆角，右下角为大圆角(模拟卷起) */
    border-radius: 4px 4px 4px 50px; 
    
    /* 3. 优化阴影：增加层次感 */
    box-shadow: 
        0 2px 5px rgba(0,0,0,0.05),       /* 基础阴影 */
        0 15px 30px rgba(0,0,0,0.2),      /* 远距离投影 */
        inset 0 0 60px rgba(139, 90, 43, 0.1); /* 纸张旧感内发光 */
        
    border: 1px solid rgba(139, 90, 43, 0.2);
    padding: 30px 40px;
    position: relative; /* 为伪元素定位做准备 */
}

/* 4. [核心修复] 新增：使用伪元素模拟右下角的“卷起阴影”，增加立体感 */
.thought-node.answer-node::after {
    content: '';
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    z-index: -1; /* 放在纸张下面 */
    
    /* 这是一个柔和的投影，模拟纸角翘起 */
    box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.4); 
    
    /* 配合父元素的大圆角，形成翘起感 */
    transform: skew(15deg) rotate(5deg);
    border-radius: 50%;
}

/* 5. [核心修复] 新增：模拟纸张卷起背面的高光（可选，增加精致度） */
.thought-node.answer-node::before {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
    
    /* 线性渐变模拟纸张卷曲的折痕光影 */
    background: linear-gradient(135deg, transparent 45%, rgba(0,0,0,0.05) 50%, rgba(255,255,255,0.3) 100%);
    border-radius: 0 0 4px 50px;
    pointer-events: none;
}

/* 保持原来的悬停高亮 */
.thought-node.answer-node:hover {
    box-shadow: 
        0 20px 50px rgba(197, 160, 89, 0.15),
        inset 0 0 20px rgba(139, 90, 43, 0.1);
    transform: translateY(-2px); /* 悬停轻微上浮 */
}

/* 北极星卡片内部元素 */
.star-decoration-top {
    text-align: center;
    color: #8b5a2b;
    margin-bottom: 15px;
    font-size: 1.2rem;
    opacity: 0.7;
}

.leader-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}

.leader-name {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 1.5rem;
    color: #3e2723;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.leader-badges {
    margin-top: 5px;
}

.badge-field {
    font-size: 0.75rem;
    background: #3e2723;
    color: #d7ccc8;
    padding: 2px 8px;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.leader-contribution-hint {
    font-size: 0.9rem;
    color: #6d4c41;
    font-style: italic;
    text-align: center;
    opacity: 0.8;
    margin-bottom: 15px;
    font-family: 'Playfair Display', serif;
}

.node-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, #8b5a2b, transparent);
    margin: 15px 0 20px 0;
    opacity: 0.4;
}

.star-content {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #1a1a1a;
    text-align: justify;
}

.star-decoration-bottom {
    margin-top: 25px;
    text-align: right;
    font-size: 0.8rem;
    color: #8b5a2b;
    font-family: 'Cinzel', serif;
    opacity: 0.6;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* 6. 右侧侧边栏 (保持不变或微调颜色) */
.inspiration-sidebar {
    background: #fdfbf7;
    box-shadow: -5px 0 30px rgba(0,0,0,0.5);
}

/* 7. 顶部工具栏适配深色背景 */
.canvas-title {
    color: #c5a059; /* 金色文字 */
    text-shadow: 0 0 10px rgba(197, 160, 89, 0.4);
}

/* 默认按钮样式 (如果有其他按钮需要) */
.canvas-toolbar button {
    color: #c5a059;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(197, 160, 89, 0.3);
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
}

.canvas-toolbar button:hover {
    background: #c5a059;
    color: #0d1218;
}

/* === [核心修复] 关闭按钮样式重写 === */
/* 确保覆盖之前的通用 button 样式，去除背景和边框 */
.canvas-toolbar .canvas-close-btn,
.canvas-close-btn {
    background: transparent !important; /* 核心：去除灰色背景 */
    border: none !important;            /* 去除边框 */
    box-shadow: none !important;        /* 去除阴影框 */
    color: rgba(255, 255, 255, 0.4);    /* 默认颜色调暗，不刺眼 */
    font-size: 2rem;                    /* 图标大一点 */
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 100;
}

/* 悬停效果：旋转 + 变亮 + 微弱光晕 */
.canvas-toolbar .canvas-close-btn:hover,
.canvas-close-btn:hover {
    background: rgba(255, 255, 255, 0.05) !important; /* 悬停时极淡的背景 */
    color: var(--dark-accent, #c5a059); /* 悬停变金色或主题色 */
    transform: rotate(90deg) scale(1.1); /* 优雅旋转 */
    text-shadow: 0 0 10px rgba(197, 160, 89, 0.5); /* 文字发光 */
}

/* 删除按钮样式 */
.node-delete-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 24px;
    height: 24px;
    border: none;
    background: rgba(255, 0, 0, 0.1);
    color: #ff4d4f;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* 默认隐藏 */
    transition: all 0.3s ease;
    z-index: 10;
}

.node-delete-btn:hover {
    background: #ff4d4f;
    color: white;
}

/* 鼠标悬停在节点上时显示删除按钮 */
.thought-node:hover .node-delete-btn {
    opacity: 1;
}

/* 确保节点定位基准 */
.thought-node {
    position: relative; /* 确保绝对定位相对于节点 */
}

/* --- 灵感手稿侧边栏 (Inspiration Sidebar) --- */
#inspirationSidebar {
    /* 1. 核心定位：必须 Fixed 才能悬浮在视口上 */
    position: fixed;
    top: 0;
    right: -350px; /* 默认隐藏在屏幕外 (宽度350px) */
    width: 350px;
    height: 100vh;
    
    /* 2. 关键层级：必须大于 canvas-modal 的 2000 */
    z-index: 3000 !important; 
    
    /* 3. 视觉样式 */
    background: #fdfbf7; /* 羊皮纸色 */
    box-shadow: -5px 0 30px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    
    /* 4. 动画过渡 */
    transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 当 JS 添加 .open 类时，滑入屏幕 */
#inspirationSidebar.open {
    right: 0;
}

/* 头部样式 */
.sidebar-header {
    padding: 20px;
    background: #f4ecd8;
    border-bottom: 2px solid #e0dcd0;
    flex-shrink: 0; /* 防止头部被压缩 */
}

.sidebar-header h3 {
    margin: 0;
    color: #8b5a2b;
    font-family: 'Cinzel', serif;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-header p {
    margin: 5px 0 0 0;
    font-size: 0.8rem;
    color: #888;
}

/* 笔记容器样式 */
.notes-container {
    flex: 1; /* 占满剩余高度 */
    overflow-y: auto; /* 允许滚动 */
    padding: 20px;
    outline: none; /* 去除 contenteditable 的蓝色边框 */
    font-family: 'Noto Serif SC', serif;
    color: #4a3b32;
    line-height: 1.6;
}

/* Placeholder 占位符逻辑 (纯CSS实现) */
.notes-container[data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: #aaa;
    font-style: italic;
    pointer-events: none;
}

/* JS 动态添加进来的笔记块样式 */
.inspiration-note-block {
    background: #fff;
    border-left: 3px solid #8b5a2b;
    padding: 10px 15px;
    margin-bottom: 15px;
    border-radius: 0 4px 4px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    font-size: 0.95rem;
    position: relative;
    /* 防止被误删，设为不可编辑，或者设为 true 允许修改 */
    user-select: text; 
}

/* 给笔记块加个引号装饰 */
.inspiration-note-block::before {
    content: '"';
    font-family: serif;
    font-size: 2rem;
    color: rgba(139, 90, 43, 0.2);
    position: absolute;
    top: -5px;
    left: 5px;
    pointer-events: none;
}

/* 适配移动端 */
@media (max-width: 768px) {
    .thought-stream {
        padding: 60px 20px;
        gap: 50px;
    }
    .thought-node {
        max-width: 90%;
    }
    .thought-node.question-node {
        align-self: center;
        margin-right: auto;
        border-radius: 10px;
    }
    .thought-node.answer-node {
        align-self: center;
        margin-left: auto;
    }
}