/* 容器基准变量 */
ai {
  display: flex;
  flex-direction: column;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --bg-color: #0d1117;
  --panel-bg: rgba(22, 27, 34, 0.9);
  --text-main: #c9d1d9;
  --primary-color: #ff9800;
  --primary-glow: rgba(255, 152, 0, 0.6);
  --accent-color: #f44336;
  line-height: 1.5;
  color: var(--text-main);
  font-size: 14px;
}

/* 顶部环境标签 (对应你原版的时间线) */
ai hd {
  display: block;
  background: linear-gradient(90deg, rgba(255,152,0,0.15), transparent);
  border-left: 4px solid var(--primary-color);
  padding: 6px 12px;
  color: #fff;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 1px;
  border-radius: 2px;
  margin-bottom: 5px;
  text-shadow: 0 0 5px var(--primary-glow);
}

/* 档案折叠面板与卷轴网格背景 */
ai details {
  background: var(--panel-bg);
  border: 1px solid rgba(255,152,0,0.3);
  border-radius: 8px;
  margin-top: 15px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}
ai details::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(rgba(255,152,0,0.03) 1px, transparent 1px), 
              linear-gradient(90deg, rgba(255,152,0,0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  z-index: 0;
}

/* 写轮眼标题栏 (纯CSS绘制三勾玉自转) */
ai summary {
  background: rgba(0,0,0,0.7);
  padding: 12px 15px;
  font-weight: bold;
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,152,0,0.2);
  cursor: pointer;
  position: relative;
  z-index: 1;
  list-style: none;
  transition: all 0.3s ease;
}
ai summary::-webkit-details-marker {
  display: none;
}
ai summary::before {
  content: "";
  display: inline-block;
  width: 18px; height: 18px;
  margin-right: 10px;
  /* 纯CSS/SVG实现的写轮眼图案 */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='%23d32f2f' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='3' fill='%23000'/%3E%3Ccircle cx='12' cy='5' r='2.5' fill='%23000'/%3E%3Ccircle cx='6' cy='15.5' r='2.5' fill='%23000'/%3E%3Ccircle cx='18' cy='15.5' r='2.5' fill='%23000'/%3E%3C/svg%3E") no-repeat center/contain;
  animation: ai-spin 3s linear infinite;
  box-shadow: 0 0 10px var(--accent-color);
  border-radius: 50%;
}
@keyframes ai-spin { 100% { transform: rotate(360deg); } }

/* 分区区块与标题 */
ai sec {
  display: block;
  padding: 10px 15px 5px;
  position: relative;
  z-index: 1;
}
ai sec::before {
  content: attr(t);
  display: block;
  color: var(--primary-color);
  font-size: 12px;
  font-weight: 900;
  border-bottom: 1px dashed rgba(255,255,255,0.1);
  padding-bottom: 4px;
  margin-bottom: 8px;
}

/* 文本与高亮字段 */
ai f {
  display: block;
  font-size: 16px;
  color: #fff;
  font-weight: bold;
  text-shadow: 0 0 8px var(--primary-glow);
  margin-bottom: 6px;
}
ai d {
  display: block;
  font-size: 13px;
  color: #a5b4fc;
  margin-bottom: 4px;
}

/* 视觉化天赋标签 (对应你的 roll-section) */
ai d[r] {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  margin: 2px 4px 6px 0;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
}
ai d[r="SSS"] { 
  background: #d50000; 
  box-shadow: 0 0 10px #d50000; 
  animation: ai-pulse 2s infinite; 
}
ai d[r="SS"] { background: #ff9100; box-shadow: 0 0 6px #ff9100; }
ai d[r="S"]  { background: #ffd600; color: #000; }
ai d[r="A"]  { background: #aa00ff; }
ai d[r="B"]  { background: #2962ff; }

@keyframes ai-pulse {
  0% { box-shadow: 0 0 5px #d50000; }
  50% { box-shadow: 0 0 15px #d50000; }
  100% { box-shadow: 0 0 5px #d50000; }
}

/* 忍者六维网格 (替代JS雷达图的优雅移动端方案) */
ai st {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
ai st i {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(0,0,0,0.5);
  padding: 4px 8px;
  border-radius: 4px;
  border-left: 3px solid var(--primary-color);
  font-style: normal;
  font-size: 12px;
  color: #8b949e;
}
ai st b {
  color: #fff;
  font-size: 13px;
  text-shadow: 0 0 5px rgba(255,255,255,0.5);
}