css
ai {
  display: block;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: #e0d6ec;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(212, 160, 231, 0.12), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(232, 132, 154, 0.10), transparent 50%),
    linear-gradient(160deg, #1a1025 0%, #251635 50%, #1a1025 100%);
  padding: 14px 12px;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(232, 196, 242, 0.15),
    inset 0 0 60px rgba(0, 0, 0, 0.4),
    0 8px 32px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(212, 160, 231, 0.2);
}
ai::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M20 0 Q25 10 20 20 Q15 30 20 40 M0 20 Q10 25 20 20 Q30 15 40 20' stroke='%23d4a0e7' stroke-width='0.4' fill='none' opacity='0.15'/></svg>");
  pointer-events: none;
  opacity: 0.5;
  z-index: 0;
}
ai::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent 0%, rgba(232, 196, 242, 0.04) 25%, transparent 50%, rgba(255, 140, 105, 0.04) 75%, transparent 100%);
  animation: rot 30s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes rot { to { transform: rotate(360deg); } }
ai > * { position: relative; z-index: 1; }
/* ===== 顶部 Header ===== */
ai header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 10px 14px;
  margin-bottom: 12px;
  background: linear-gradient(135deg, rgba(212, 160, 231, 0.12), rgba(232, 132, 154, 0.08));
  border-radius: 10px;
  border: 1px solid rgba(212, 160, 231, 0.25);
  position: relative;
  overflow: hidden;
}
ai header::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(232, 196, 242, 0.25), transparent);
  animation: shine 4s ease-in-out infinite;
}
@keyframes shine { 50%, 100% { left: 100%; } }
ai header t {
  display: block;
  font-size: 17px;
  font-weight: 600;
  background: linear-gradient(90deg, #d4a0e7, #e8c4f2, #f0b8b8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 2px;
  margin-bottom: 6px;
  text-shadow: 0 0 20px rgba(232, 196, 242, 0.4);
}
ai header d {
  font-size: 12px;
  color: #b8a9c6;
  letter-spacing: 1px;
  margin: 1px 0;
}
ai header d + d { 
  font-size: 11px;
  opacity: 0.85;
}
/* ===== 正文 article ===== */
ai article {
  background: linear-gradient(135deg, rgba(40, 25, 56, 0.6), rgba(30, 18, 42, 0.7));
  border-left: 3px solid;
  border-image: linear-gradient(180deg, #d4a0e7, #e8849a, #ff8c69) 1;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 0 8px 8px 0;
  box-shadow: inset 0 0 30px rgba(212, 160, 231, 0.05);
}
ai article p {
  margin: 0 0 10px;
  text-indent: 2em;
  font-size: 14px;
  color: #e8dcf2;
  line-height: 1.85;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
ai article p:last-child { margin-bottom: 0; }
ai article p:first-letter {
  color: #e8c4f2;
  font-weight: 600;
  font-size: 1.1em;
}
/* ===== details 折叠面板 ===== */
ai details {
  margin-bottom: 10px;
  background: linear-gradient(135deg, rgba(35, 22, 50, 0.85), rgba(28, 17, 40, 0.85));
  border-radius: 10px;
  border: 1px solid rgba(212, 160, 231, 0.18);
  overflow: hidden;
  transition: all 0.3s ease;
}
ai details[open] {
  border-color: rgba(212, 160, 231, 0.4);
  box-shadow: 0 4px 20px rgba(212, 160, 231, 0.15), inset 0 1px 0 rgba(232, 196, 242, 0.1);
}
ai details summary {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #e8c4f2;
  cursor: pointer;
  list-style: none;
  position: relative;
  background: linear-gradient(90deg, rgba(212, 160, 231, 0.1), transparent);
  letter-spacing: 1px;
  min-height: 22px;
  display: flex;
  align-items: center;
  user-select: none;
}
ai details summary::-webkit-details-marker { display: none; }
ai details summary::after {
  content: "▾";
  margin-left: auto;
  color: #d4a0e7;
  transition: transform 0.3s;
  font-size: 12px;
}
ai details[open] summary::after { transform: rotate(180deg); }
ai details summary:hover {
  background: linear-gradient(90deg, rgba(212, 160, 231, 0.2), rgba(232, 132, 154, 0.08));
  color: #f0d8f7;
}
ai details > p {
  margin: 0;
  padding: 10px 14px 12px;
  border-top: 1px solid rgba(212, 160, 231, 0.15);
}
/* ===== 名字高亮 ===== */
ai f {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  padding: 3px 10px;
  margin-bottom: 6px;
  background: linear-gradient(135deg, #d4a0e7, #e8849a);
  color: #1a1025;
  border-radius: 4px 12px 4px 12px;
  letter-spacing: 1.5px;
  box-shadow: 0 2px 8px rgba(212, 160, 231, 0.4);
}
/* ===== 数据行 ===== */
ai d {
  display: block;
  font-size: 13px;
  color: #d0c2dc;
  margin: 4px 0;
  padding: 4px 8px;
  background: rgba(212, 160, 231, 0.04);
  border-radius: 4px;
  border-left: 2px solid rgba(212, 160, 231, 0.3);
  transition: all 0.2s;
  line-height: 1.6;
}
ai d:hover {
  background: rgba(212, 160, 231, 0.12);
  border-left-color: #e8c4f2;
  transform: translateX(2px);
  color: #f0e6f8;
}
ai d d {
  margin: 3px 0 3px 8px;
  font-size: 12.5px;
  background: rgba(255, 140, 105, 0.05);
  border-left-color: rgba(255, 140, 105, 0.3);
}
/* ===== i 子标签（敏感/技巧/装备分类标题） ===== */
ai i {
  display: inline-block;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  margin-right: 6px;
  background: linear-gradient(90deg, #e8849a, #d4a0e7);
  color: #1a1025;
  border-radius: 8px;
  letter-spacing: 1px;
  vertical-align: middle;
}
/* ===== 分区属性标记 ===== */
ai p[t]::before {
  content: attr(t);
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  margin-bottom: 8px;
  background: linear-gradient(90deg, rgba(232, 132, 154, 0.25), rgba(212, 160, 231, 0.15));
  color: #f0b8b8;
  border-radius: 10px;
  letter-spacing: 2px;
  border: 1px solid rgba(232, 132, 154, 0.3);
}
ai d[t]::before {
  content: "◆ " attr(t);
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: #e8c4f2;
  margin-bottom: 4px;
  letter-spacing: 1.5px;
  opacity: 0.85;
}
/* ===== 敏感度分区特殊光效 ===== */
ai d[t="敏感"], 
ai d[t="外貌"] {
  background: linear-gradient(135deg, rgba(240, 184, 184, 0.08), rgba(232, 132, 154, 0.05));
  border-left-color: #f0b8b8;
  padding: 8px;
  margin: 6px 0;
}
ai d[t="敏感"] i {
  background: linear-gradient(90deg, #f0b8b8, #e8849a);
  animation: pulse 2.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 132, 154, 0.5); }
  50% { box-shadow: 0 0 8px 2px rgba(232, 132, 154, 0.3); }
}
ai d[t="技巧"], ai d[t="技巧链"], ai d[t="道具库"], ai d[t="装备"] {
  background: linear-gradient(135deg, rgba(255, 140, 105, 0.06), rgba(212, 160, 231, 0.04));
  border-left-color: #ff8c69;
}
ai d[t="阶段"] {
  background: linear-gradient(135deg, rgba(212, 160, 231, 0.08), rgba(232, 196, 242, 0.04));
  border-left-color: #d4a0e7;
}
ai d[t="增益"] {
  background: linear-gradient(135deg, rgba(255, 215, 130, 0.06), rgba(255, 140, 105, 0.04));
  border-left-color: #ffd782;
}
/* ===== 行动推荐 ===== */
ai p[t="行动"] d {
  background: linear-gradient(90deg, rgba(232, 132, 154, 0.1), rgba(212, 160, 231, 0.05));
  border-left: 3px solid #e8849a;
  padding: 8px 12px;
  margin: 5px 0;
  font-size: 13.5px;
  color: #f0e6f8;
  cursor: pointer;
  font-weight: 500;
}
ai p[t="行动"] d:hover {
  background: linear-gradient(90deg, rgba(232, 132, 154, 0.25), rgba(212, 160, 231, 0.15));
  border-left-color: #f0b8b8;
  transform: translateX(4px);
  box-shadow: 0 2px 12px rgba(232, 132, 154, 0.3);
  color: #fff;
}
/* ===== 记忆/档案 ===== */
ai p[t="记忆"] d:first-child,
ai p[t="档案"] d:first-child {
  background: linear-gradient(90deg, rgba(212, 160, 231, 0.15), transparent);
  border-left-color: #d4a0e7;
  font-weight: 600;
  color: #e8c4f2;
}
/* ===== 移动端微调 ===== */
@media (max-width: 480px) {
  ai { padding: 10px 8px; font-size: 13px; }
  ai header t { font-size: 15px; letter-spacing: 1px; }
  ai article p { font-size: 13.5px; }
  ai details summary { padding: 9px 10px; font-size: 13px; }
  ai details > p { padding: 8px 10px 10px; }
  ai d { font-size: 12.5px; padding: 3px 6px; }
}
/* ===== 增强1：欲望蓄能可视化进度条 ===== */
/* 通过自定义属性 --v 传入当前蓄能值(0-1000)，HTML中写作 style="--v:650" */
/* 使用方式：<d class="bar" style="--v:{当前蓄能数值}">欲望蓄能:{当前蓄能数值}/1000 | 阶段:{...}</d> */
ai d.bar {
  position: relative;
  background: linear-gradient(90deg, rgba(30, 18, 42, 0.6), rgba(30, 18, 42, 0.6)) padding-box;
  border-left: 2px solid #ff8c69;
  padding: 8px 10px;
  margin: 6px 0;
  overflow: hidden;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  z-index: 1;
}
ai d.bar::before {
  content: "";
  position: absolute;
  inset: 0;
  width: calc(var(--v, 0) / 10 * 1%);
  background: linear-gradient(90deg,
    #6a4c93 0%,
    #d4a0e7 25%,
    #e8849a 50%,
    #ff8c69 75%,
    #ff4444 100%);
  background-size: 1000% 100%;
  background-position: left center;
  z-index: -1;
  transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.3);
  animation: barflow 3s ease-in-out infinite;
}
ai d.bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(var(--v, 0) / 10 * 1% - 2px);
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, #fff, #f0b8b8, #fff);
  box-shadow: 0 0 8px #fff, 0 0 16px #e8849a, 0 0 24px #ff8c69;
  z-index: -1;
  animation: tipglow 1.5s ease-in-out infinite;
}
@keyframes barflow {
  0%, 100% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.25) saturate(1.3); }
}
@keyframes tipglow {
  0%, 100% { opacity: 0.7; transform: scaleY(0.95); }
  50% { opacity: 1; transform: scaleY(1.05); }
}
/* 蓄能阶段分级文字色调 */
ai d.bar[style*="--v:9"],
ai d.bar[style*="--v:10"] {
  color: #fff;
  text-shadow: 0 0 10px #ff4444, 0 1px 3px #000;
  animation: peakshake 0.4s ease-in-out infinite;
}
@keyframes peakshake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-1px); }
  75% { transform: translateX(1px); }
}
/* ===== 增强2：巅峰阶段呼吸光效 ===== */
/* HTML中给 <ai> 添加属性：<ai peak="1"> 触发巅峰光效 */
ai[peak="1"] {
  animation: peakbreathe 2.2s ease-in-out infinite;
  border-color: rgba(255, 100, 100, 0.5);
}
@keyframes peakbreathe {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(232, 196, 242, 0.15),
      inset 0 0 60px rgba(0, 0, 0, 0.4),
      0 0 20px rgba(255, 140, 105, 0.3),
      0 0 40px rgba(232, 132, 154, 0.2),
      0 8px 32px rgba(0, 0, 0, 0.5);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 200, 200, 0.3),
      inset 0 0 80px rgba(255, 70, 70, 0.15),
      0 0 50px rgba(255, 100, 100, 0.6),
      0 0 100px rgba(232, 132, 154, 0.4),
      0 8px 48px rgba(0, 0, 0, 0.6);
  }
}
ai[peak="1"]::after {
  animation: rot 12s linear infinite;
  background: conic-gradient(from 0deg,
    transparent 0%,
    rgba(255, 140, 105, 0.12) 25%,
    transparent 50%,
    rgba(255, 70, 70, 0.10) 75%,
    transparent 100%);
}
ai[peak="1"] header {
  border-color: rgba(255, 140, 105, 0.5);
  animation: headerpulse 2.2s ease-in-out infinite;
}
@keyframes headerpulse {
  0%, 100% { background: linear-gradient(135deg, rgba(212, 160, 231, 0.12), rgba(232, 132, 154, 0.08)); }
  50% { background: linear-gradient(135deg, rgba(255, 140, 105, 0.20), rgba(255, 70, 70, 0.12)); }
}
ai[peak="1"] header t {
  animation: titleflicker 1.8s ease-in-out infinite;
}
@keyframes titleflicker {
  0%, 100% {
    text-shadow: 0 0 20px rgba(232, 196, 242, 0.4);
    letter-spacing: 2px;
  }
  50% {
    text-shadow: 0 0 25px #ff8c69, 0 0 40px #e8849a;
    letter-spacing: 2.5px;
  }
}