ai { /* 主容器，所有内容都通过此选择器进行约束和样式定义 */
  /* 定义主题颜色变量 */
  --c-primary: #ffd700; /* 主金色 */
  --c-secondary: #e0b200; /* 次金色 */
  --c-accent: #a132ff; /* 强调色，例如史诗天赋 */
  --c-text-dark: #333;   /* 主文本色（深灰，保证可读性）*/
  --c-bg-dark: #1a1a1a;  /* 主背景深色 */
  --c-bg-light: #2a2a2a; /* 次背景深色 */
  --c-border-subtle: rgba(255,215,0,0.15); /* 边界线淡金 */
  --c-border-strong: rgba(255,215,0,0.3); /* 边界线金 */

  /* 基础布局和字体设置 */
  display: block; /* 确保ai标签行为与div一致 */
  max-width: 100vw; /* 限制宽度以适应小屏幕 */
  margin: 10px auto; /* 垂直居中，顶部留白 */
  padding: 10px;
  box-sizing: border-box; /* 边框和内边距不增加元素总宽度 */
  font-family: 'Zen Old Mincho', 'Noto Serif JP', serif;
  font-size: 14px; /* 移动端基础字号 */
  line-height: 1.6;
  color: var(--c-text-dark); /* 主体文本颜色 */
  background: var(--c-bg-light); /* 容器背景，不是全局背景 */
  border-radius: 8px;
  overflow: hidden; /* 防止内容溢出 */
  box-shadow: 0 4px 15px rgba(0,0,0,0.3); /* 轻微阴影 */
  border: 1px solid var(--c-border-strong); /* 强调边框 */
  position: relative; /* 用于伪元素定位 */
  z-index: 1;

  /* 伪元素背景装饰 - 模拟历史卷轴或粗糙边缘 */
  &::before {
    content: '';
    position: absolute;
    top: -5px; bottom: -5px; left: -5px; right: -5px;
    background: linear-gradient(45deg, rgba(var(--c-primary), 0.1) 0%, transparent 50%, rgba(var(--c-primary), 0.1) 100%);
    border: 1px dashed rgba(var(--c-primary), 0.2);
    border-radius: 10px;
    z-index: -1;
    pointer-events: none; /* 确保不阻挡点击 */
  }

  @media (min-width: 768px) {
    max-width: 800px; /* 桌面端最大宽度 */
    padding: 15px 20px;
    font-size: 15px;
  }
}

/* 头部样式 */
ai header {
  text-align: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-border-subtle);
  position: relative;
  overflow: hidden;

  /* 标题背景装饰 */
  &::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0; height: 3px;
    background: linear-gradient(to right, transparent, var(--c-primary), transparent);
    animation: flowLight 5s infinite linear;
  }
}

@keyframes flowLight {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

ai h1 {
  font-family: 'Kiwi Maru', serif;
  font-size: 1.8em;
  color: var(--c-primary);
  text-shadow: 0 0 10px rgba(var(--c-primary),0.5);
  letter-spacing: 1px;
  margin: 0; padding: 0; /* 重置默认h1样式 */
  word-break: break-word; /* 避免长标题溢出 */
}

/* 导航标签 */
ai .tabs {
  display: flex;
  flex-wrap: wrap; /* 适应小屏幕换行 */
  justify-content: center;
  gap: 8px; /* 按钮间距 */
  margin-bottom: 15px;
  border-bottom: 1px solid var(--c-border-subtle);
  padding-bottom: 10px;
}

ai .tabs button {
  background: rgba(var(--c-primary), 0.08);
  color: var(--c-text-dark);
  border: 1px solid rgba(var(--c-primary), 0.2);
  padding: 8px 15px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 0.9em;
  transition: all 0.2s ease;
  flex-grow: 1; /* 小屏幕下按钮均分宽度 */
  max-width: 150px; /* 限制按钮最大宽度 */
  white-space: nowrap; /* 防止按钮文本换行 */
  overflow: hidden;
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}

ai .tabs button:hover {
  background-color: rgba(var(--c-primary), 0.15);
  border-color: var(--c-primary);
  color: var(--c-primary);
}

ai .tabs button[active] { /* 使用属性选择器处理激活状态 */
  background-color: var(--c-primary);
  color: var(--c-bg-dark); /* 激活按钮文字使用深色，保证可读性 */
  border-color: var(--c-primary);
  font-weight: bold;
  box-shadow: 0 0 8px rgba(var(--c-primary),0.6);
  transform: translateY(-2px);
}

/* 面板/内容区域 */
ai .pane {
  background: var(--c-bg-light); /* 更强调的背景色 */
  padding: 15px 10px;
  border-radius: 6px;
  margin-top: 15px;
  border: 1px solid var(--c-border-subtle);
  box-shadow: inset 0 0 8px rgba(var(--c-primary),0.05); /* 内部阴影 */
  display: none; /* 默认隐藏 */
  animation: fadeInPanel 0.4s ease-out forwards;
}

ai .pane.active {
  display: block;
}

@keyframes fadeInPanel {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 各级标题 */
ai h2 {
  font-family: 'Kiwi Maru', serif;
  font-size: 1.4em;
  color: var(--c-secondary);
  margin-top: 15px; margin-bottom: 10px;
  border-bottom: 1px dashed rgba(var(--c-primary),0.2);
  padding-bottom: 5px;
  text-shadow: 0 0 5px rgba(var(--c-primary),0.3);
  word-break: break-word;
}

ai h3 {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.1em;
  color: var(--c-secondary);
  margin-top: 15px; margin-bottom: 8px;
  word-break: break-word;
}

/* 正文段落与列表 */
ai article p, ai li, ai d {
  margin-bottom: 8px;
  color: var(--c-text-dark); /* 主文本颜色 */
}

ai strong {
  color: var(--c-primary);
}

ai em {
  font-style: normal;
  color: var(--c-secondary);
}

ai ul {
  list-style: none; /* 移除默认列表点 */
  padding-left: 10px; /* 统一缩进 */
}

ai ul li::before {
  content: '➢'; /* 使用自定义符号 */
  color: var(--c-primary);
  display: inline-block;
  width: 1em;
  margin-right: 5px;
}

/* Accordion (折叠面板) 样式 */
ai .accordion-h { /* 对应accordion-header */
  background-color: rgba(var(--c-primary), 0.05);
  color: var(--c-text-dark);
  padding: 10px 15px;
  border: 1px solid rgba(var(--c-primary), 0.15);
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  font-size: 0.95em;
  word-break: break-word;
}

ai .accordion-h:hover {
  background-color: rgba(var(--c-primary), 0.1);
  border-color: var(--c-primary);
}

ai .accordion-h[open] { /* 使用属性选择器表示打开状态 */
  background-color: rgba(var(--c-primary), 0.15);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

ai .accordion-c { /* 对应accordion-content */
  padding: 10px 15px;
  border: 1px solid rgba(var(--c-primary), 0.1);
  border-top: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  margin-bottom: 12px;
  background: rgba(var(--c-bg-dark), 0.5); /* 半透明背景 */
  overflow: hidden; /* 配合details标签隐藏滚动条 */
  /* transition: max-height 0.4s ease-out, opacity 0.4s ease-out; */
}

/* details/summary 标签模拟accordion行为 */
ai details {
  margin-bottom: 12px;
}
ai summary {
  background-color: rgba(var(--c-primary), 0.05);
  color: var(--c-text-dark);
  padding: 10px 15px;
  border: 1px solid var(--c-border-subtle);
  border-radius: 4px;
  cursor: pointer;
  list-style: none; /* 移除默认箭头 */
  display: block; /* 保持 flex 行为 */
  transition: background-color 0.2s ease, border-color 0.2s ease;
  position: relative;
  word-break: break-word;

  /* 自定义折叠/展开箭头 */
  &::marker, &::-webkit-details-marker {
    display: none;
  }
  &::after {
    content: '▼';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.2s ease;
    color: var(--c-secondary);
    font-size: 0.8em;
  }
}

ai details[open] summary {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  &::after {
    transform: translateY(-50%) rotate(-180deg);
  }
}

ai summary:hover {
  background-color: rgba(var(--c-primary), 0.1);
  border-color: var(--c-primary);
}

ai details > *:not(summary) { /* details内容样式 */
  background: var(--c-bg-light);
  padding: 10px 15px;
  border: 1px solid var(--c-border-subtle);
  border-top: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  animation: fadeInPanel 0.3s ease-out;
}

/* 表单元素 */
ai .c-form { /* 对应 custom-form */
  display: grid;
  grid-template-columns: 1fr; /* 移动端单列 */
  gap: 15px;
  padding: 15px;
  border: 1px solid var(--c-border-subtle);
  border-radius: 6px;
  background: rgba(var(--c-bg-dark), 0.6);

  @media (min-width: 600px) {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 桌面端多列 */
  }
}

ai label {
  display: block;
  margin-bottom: 5px;
  color: var(--c-text-dark);
  font-weight: bold;
}

ai input[type="text"], ai input[type="number"], ai textarea, ai select {
  width: calc(100% - 18px); /* 减去内边距和边框 */
  padding: 8px;
  margin-top: 5px;
  border: 1px solid var(--c-border-subtle);
  background-color: rgba(var(--c-bg-dark), 0.4);
  color: var(--c-text-dark);
  border-radius: 4px;
  font-size: 0.9em;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box; /* 确保正确计算宽度 */
}

ai input:focus, ai textarea:focus, ai select:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 5px rgba(var(--c-primary),0.5);
  outline: none;
}

ai textarea {
  resize: vertical;
  min-height: 80px;
}

ai .radio-g { /* 对应 radio-group */
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 5px;
}

ai .radio-g l { /* 对应 radio-group label，简化标签名为l */
  background-color: rgba(var(--c-primary), 0.05);
  color: var(--c-text-dark);
  padding: 6px 12px;
  border: 1px solid var(--c-border-subtle);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  font-size: 0.9em;
  text-align: center;
}

/* 隐藏实际的radio input，通过label控制样式 */
ai input[type="radio"] { display: none; }
ai input[type="radio"]:checked + l { /* 使用l作为label的简化标签名 */
  background-color: var(--c-primary);
  color: var(--c-bg-dark);
  border-color: var(--c-primary);
  font-weight: bold;
}
ai .radio-g l:hover {
  background-color: rgba(var(--c-primary), 0.1);
}

/* 按钮样式 (例如roll, copy, confirm) */
ai button {
  background-color: var(--c-primary);
  color: var(--c-bg-dark);
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  display: block; /* 默认块级 */
  width: auto;
  margin: 15px auto 0; /* 居中显示 */
  &:hover {
    background-color: var(--c-secondary);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(var(--c-primary),0.4);
  }
}

ai .roll-sec { /* 对应 roll-section */
  margin-top: 20px;
  padding: 15px;
  border: 1px solid var(--c-border-subtle);
  border-radius: 6px;
  background: rgba(var(--c-bg-dark), 0.6);
  text-align: center;
}

ai .roll-res { /* 对应 roll-results */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
  animation: fadeInPanel 0.4s ease-out;
}

ai .trait-c { /* 对应 trait-card，简化标签名为c */
  background: rgba(var(--c-bg-dark), 0.7);
  border: 1px solid; /* 边框颜色由品质决定 */
  padding: 12px;
  border-radius: 6px;
  min-width: 150px;
  text-align: left;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  font-size: 0.85em;
  color: var(--c-text-dark); /* 默认文字颜色 */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);

  &:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 10px rgba(var(--c-primary),0.3);
  }
  &[sel] { /* 使用属性选择器表示选中状态 */
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 0 12px rgba(var(--c-primary),0.7);
    border-width: 2px;
  }
}

/* 天赋品质颜色 */
ai .trait-c.epic { border-color: var(--c-accent); color: var(--c-accent); }
ai .trait-c.rare { border-color: #007bff; color: #007bff; }
ai .trait-c.uncommon { border-color: #28a745; color: #28a745; }
ai .trait-c.common { border-color: var(--c-text-dark); color: var(--c-text-dark); } /* 普通特质用主文本色 */
ai .trait-c.epic[sel] { box-shadow: 0 0 12px rgba(var(--c-accent),0.7); border-color: var(--c-accent); }
ai .trait-c.rare[sel] { box-shadow: 0 0 12px rgba(#007bff,0.7); border-color: #007bff; }
ai .trait-c.uncommon[sel] { box-shadow: 0 0 12px rgba(#28a745,0.7); border-color: #28a745; }


ai .qual-l { /* 对应 quality-label */
  position: absolute;
  top: 5px; right: 8px;
  font-size: 0.7em;
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--c-bg-dark); /* 标签文字用深色 */
  background-color: var(--c-primary); /* 默认背景色 */
}
ai .trait-c.epic .qual-l { background-color: var(--c-accent); }
ai .trait-c.rare .qual-l { background-color: #007bff; }
ai .trait-c.uncommon .qual-l { background-color: #28a745; }
ai .trait-c.common .qual-l { background-color: #888; }

ai .prev-box { /* 对应 preview-box */
  background: rgba(var(--c-bg-dark), 0.8);
  border: 1px dashed rgba(var(--c-primary), 0.4);
  border-radius: 6px;
  padding: 15px;
  margin-top: 20px;
  min-height: 100px;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
  color: var(--c-text-dark);
}

/* 复制按钮特殊样式 */
ai .copy-btn { /* 对应 copy-button */
  background-color: #28a745; /* 绿色 */
  &:hover {
    background-color: #218838;
  }
}

/* 状态栏 */
ai details[open] .status-grid { /* 状态栏信息网格 */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 5px 10px; /* 行间距、列间距 */
  margin-top: 10px;
  padding: 5px;
  border-top: 1px dashed var(--c-border-subtle);
}

ai d { /* 信息显示项，用于状态栏 */
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 0;
  color: var(--c-text-dark);
  font-size: 0.95em;
  word-break: break-word; /* 防止长文本溢出 */
}

ai d::before { /* 小图标装饰 */
  content: '✦';
  color: var(--c-secondary);
  font-size: 0.8em;
}

ai f { /* 特殊强调文本，例如人名、物品名 */
  color: var(--c-primary);
  font-weight: bold;
}

/* 历史/流言板 */
ai .hist-f, ai .goss-f { /* 对应 history-feed, gossip-feed */
  margin-top: 20px;
  padding: 15px;
  border: 1px solid var(--c-border-subtle);
  border-radius: 6px;
  background: rgba(var(--c-bg-dark), 0.6);
}

ai .hist-i, ai .goss-i { /* 对应 history-item, gossip-item */
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(var(--c-primary), 0.1);
  font-size: 0.9em;
  color: var(--c-text-dark);
}
ai .hist-i:last-child, ai .goss-i:last-child {
  border-bottom: none;
}

/* 强制内容溢出显示滚动条，避免内容被截断 */
ai article, ai details > *:not(summary), ai .prev-box, ai .hist-f, ai .goss-f {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* 移动端平滑滚动 */
}

/* 滚动条美化 (Webkit browsers) */
ai *::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
ai *::-webkit-scrollbar-track {
  background: var(--c-bg-dark);
  border-radius: 3px;
}
ai *::-webkit-scrollbar-thumb {
  background-color: var(--c-primary);
  border-radius: 3px;
  border: 1px solid var(--c-bg-dark);
}
ai *::-webkit-scrollbar-thumb:hover {
  background-color: var(--c-secondary);
}

/* 移动端特殊调整 */
@media (max-width: 480px) {
  ai {
    margin: 5px auto;
    padding: 8px;
    font-size: 13px;
  }
  ai h1 { font-size: 1.5em; }
  ai h2 { font-size: 1.2em; }
  ai h3 { font-size: 1em; }
  ai .tabs button {
    padding: 6px 10px;
    font-size: 0.85em;
  }
  ai .trait-c { /* 天赋卡片小一点 */
    min-width: unset;
    width: 45%; /* 两个一排 */
    font-size: 0.8em;
    padding: 8px;
  }
  ai .qual-l { font-size: 0.6em; top: 3px; right: 5px; padding: 1px 4px; }
  ai d { font-size: 0.85em; }
}