/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ✦ Magia Cupita · Unified CSS · v2.0 Final
   一体化文件:平台外壳 + v4.1 内容卡片 + 双主题联动

   ▸ 平台外壳(顶栏/按钮/输入框/评论区/分页)
   ▸ <ai> 内容卡片(故事/思维链/PC/NPC/记忆等)
   ▸ 白天主题:粉樱花调
   ▸ 夜晚主题:深紫星河调(随系统 prefers-color-scheme 自动切换)
   ▸ 动态纹理:顶栏漂浮粒子 + 扫光 + 输入框呼吸
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */


/* ╔════════════════════════════════════════════════════╗
   ║                                                    ║
   ║   PART A · <ai> 内容卡片样式                         ║
   ║   (原 v4.1 完整内容,粉调白天 + 深紫夜晚)            ║
   ║                                                    ║
   ╚════════════════════════════════════════════════════╝ */

/* ========== A1. 设计令牌(粉调白天) ========== */
ai {
  /* —— 底色系统:粉樱花奶白 —— */
  --bg:           #FFF5F7;
  --bg-card:     #FFFCF6;
  --bg-card-2:   #FCF0F2;
  --bg-inset:    #F8E5EA;
  --bg-cream:    #FFF8E8;
  --bg-night:    #1F1834;

  /* —— 文字色:深酒红系 —— */
  --text:        #5C2A48;
  --text-soft:   #8A4F70;
  --text-mute:   #B58FA0;
  --text-light:  #FFF;

  /* —— 主题色:糖果点缀 —— */
  --c-pink:      #E589B5;
  --c-pink-2:    #F4B3CE;
  --c-blue:      #7FB8D4;
  --c-blue-2:    #A8D2E5;
  --c-yellow:    #E5BD5E;
  --c-yellow-2: #F2D88E;
  --c-purple:    #9B7FC4;
  --c-purple-2: #BDA8DA;
  --c-magenta:   #D85A8B;
  --c-mint:      #88C9A8;

  /* —— 强调色 —— */
  --accent:      #D85A8B;
  --accent-warm: #E59D3D;

  /* —— 线条 —— */
  --line:         rgba(216, 90, 139, 0.12);
  --line-strong: rgba(216, 90, 139, 0.22);
  --line-dash:   rgba(216, 90, 139, 0.28);

  /* —— 阴影 —— */
  --sh-1: 0 1px 2px rgba(216, 90, 139, 0.06),
          0 4px 12px rgba(216, 90, 139, 0.08);
  --sh-2: 0 2px 4px rgba(216, 90, 139, 0.06),
          0 10px 24px rgba(216, 90, 139, 0.10),
          0 20px 44px rgba(82, 65, 110, 0.06);
  --sh-3: 0 4px 8px rgba(216, 90, 139, 0.08),
          0 16px 36px rgba(216, 90, 139, 0.12),
          0 32px 64px rgba(82, 65, 110, 0.08);
  --sh-in:  inset 0 1px 0 rgba(255, 255, 255, 0.72);

  /* —— 字体 —— */
  --ff-title: "Mochiy Pop One", "ZCOOL KuaiLe", "PingFang SC",
              "Microsoft YaHei", system-ui, sans-serif;
  --ff-body:  "Noto Sans SC", -apple-system, BlinkMacSystemFont,
              "PingFang SC", "Microsoft YaHei", sans-serif;
  --ff-mono:  "Cascadia Code", "JetBrains Mono", "Fira Code",
              "Consolas", monospace;

  /* —— 圆角 —— */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;

  /* —— 间距 —— */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;

  /* —— 过渡 —— */
  --ease:   cubic-bezier(0.32, 0.72, 0.24, 1.00);
  --bounce: cubic-bezier(0.34, 1.42, 0.64, 1.00);

  /* —— SVG 装饰 —— */
  --svg-star: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E5BD5E' d='M10 0 L11 9 L20 10 L11 11 L10 20 L9 11 L0 10 L9 9 Z'/%3E%3C/svg%3E");
  --svg-sparkle: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFF' d='M6 0 L7 5 L12 6 L7 7 L6 12 L5 7 L0 6 L5 5 Z'/%3E%3C/svg%3E");
}

/* ========== A2. 基础与全局 ========== */
ai {
  display: block;
  max-width: 100%;
  margin: 0;
  padding: var(--s-5);

  font-family: var(--ff-body);
  font-size: 15px;
  line-height: 1.85;
  letter-spacing: 0.012em;
  color: var(--text);

  background:
    radial-gradient(circle at 10% 4%, rgba(229, 137, 181, 0.08) 0 18%, transparent 38%),
    radial-gradient(circle at 92% 8%, rgba(127, 184, 212, 0.06) 0 16%, transparent 36%),
    radial-gradient(circle at 50% 110%, rgba(155, 127, 196, 0.05) 0 28%, transparent 50%),
    var(--bg);

  position: relative;
  overflow-x: hidden;
  scroll-behavior: smooth;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  transition: background-color 0.4s ease, color 0.4s ease;
}

ai *,
ai *::before,
ai *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ai * {
  word-wrap: break-word;
  overflow-wrap: anywhere;
  scrollbar-width: thin;
  scrollbar-color: var(--c-pink) rgba(216, 90, 139, 0.08);
}

ai *::before,
ai *::after { pointer-events: none; }

ai summary,
ai button,
ai a,
ai input,
ai select,
ai textarea { pointer-events: auto; }

/* —— 标题 —— */
ai h4, ai h5 {
  font-family: var(--ff-title);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: var(--s-2);
  color: var(--text);
}

ai h4 { font-size: 15.5px; }
ai h5 { font-size: 14px; color: var(--text-soft); }

/* —— 段落 —— */
ai p {
  margin-bottom: var(--s-4);
  max-width: 65ch;
}

/* —— 列表 —— */
ai ul { list-style: none; padding-left: 0; }

ai li {
  position: relative;
  padding-left: 22px;
  margin-bottom: var(--s-2);
  line-height: 1.78;
}

ai li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 10px;
  height: 10px;
  background: var(--c-yellow);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%,
                     79% 91%, 50% 70%, 21% 91%, 32% 57%,
                     2% 35%, 39% 35%);
  opacity: 0.88;
}

/* —— 代码 —— */
ai pre, ai code {
  font-family: var(--ff-mono);
  font-size: 0.88em;
  white-space: pre-wrap;
}

ai code {
  padding: 0.12em 0.45em;
  background: rgba(216, 90, 139, 0.10);
  border-radius: 5px;
  color: var(--c-magenta);
}

ai pre {
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--s-4);
  overflow-x: auto;
}

/* —— 链接 —— */
ai a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed rgba(216, 90, 139, 0.42);
  transition: color 0.25s var(--ease),
              border-color 0.25s var(--ease);
}

ai a:hover {
  color: #C24578;
  border-bottom-style: solid;
}

/* —— 图片 —— */
ai img {
  max-width: 100%;
  height: auto;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-1);
}

/* —— 引用 —— */
ai blockquote {
  border-left: 3px solid var(--c-magenta);
  background: rgba(216, 90, 139, 0.06);
  padding: var(--s-4) var(--s-5);
  margin: var(--s-4) 0;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--text-soft);
  font-style: italic;
}

/* —— 分隔线 —— */
ai hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(216, 90, 139, 0.28) 50%,
    transparent 100%);
  margin: var(--s-5) 0;
  position: relative;
}

ai hr::after {
  content: "✦";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg);
  padding: 0 var(--s-3);
  color: var(--c-magenta);
  font-size: 13px;
  opacity: 0.68;
}

/* ========== A3. 卡片公共质感 ========== */
ai .think,
ai .pc,
ai .npc,
ai .track,
ai .mem,
ai .act,
ai story {
  position: relative;
  background: var(--bg-card);
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  box-shadow: var(--sh-2);
  margin-bottom: var(--s-5);
  overflow: hidden;
  padding: var(--s-5);
  padding-left: calc(var(--s-5) + 4px);
  transition: background-color 0.4s ease,
              border-color 0.4s ease,
              box-shadow 0.4s ease;
}

/* —— 左侧 4px 色带 —— */
ai .think::before,
ai .pc::before,
ai .npc::before,
ai .track::before,
ai .mem::before,
ai .act::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 4px 0 0 4px;
}

ai .think::before { background: var(--c-purple); }
ai .pc::before    { background: var(--c-blue); }
ai .npc::before   { background: var(--c-magenta); }
ai .track::before { background: var(--c-purple-2); }
ai .mem::before   { background: var(--c-yellow); }
ai .act::before   { background: var(--c-pink); }

/* —— 折叠标题 —— */
ai .think summary,
ai .pc summary,
ai .npc summary,
ai .track summary,
ai .mem summary,
ai .act summary,
ai .star summary {
  font-family: var(--ff-title);
  font-size: 15.5px;
  letter-spacing: 0.03em;
  cursor: pointer;
  padding: var(--s-3) var(--s-5) var(--s-3) var(--s-3);
  border-radius: var(--r-md);
  position: relative;
  z-index: 1;
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  color: var(--text);
  transition: transform 0.25s var(--ease),
              box-shadow 0.25s var(--ease),
              background 0.25s var(--ease),
              color 0.4s ease;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

ai .think summary::marker,
ai .pc summary::marker,
ai .npc summary::marker,
ai .track summary::marker,
ai .mem summary::marker,
ai .act summary::marker,
ai .star summary::marker { display: none; }

ai .think summary::-webkit-details-marker,
ai .pc summary::-webkit-details-marker,
ai .npc summary::-webkit-details-marker,
ai .track summary::-webkit-details-marker,
ai .mem summary::-webkit-details-marker,
ai .act summary::-webkit-details-marker,
ai .star summary::-webkit-details-marker { display: none; }

ai [open] > summary {
  background: #FFF;
  box-shadow: 0 4px 12px rgba(216, 90, 139, 0.08);
}

/* —— 标题圆形图标 —— */
ai .think summary::before,
ai .pc summary::before,
ai .npc summary::before,
ai .track summary::before,
ai .mem summary::before,
ai .act summary::before {
  content: "";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #FFF;
  font-weight: 700;
  background: var(--c-purple);
  font-family: var(--ff-body);
  transition: transform 0.4s var(--bounce);
}

ai .think summary::before { background: var(--c-purple);  content: "✦"; }
ai .pc summary::before    { background: var(--c-blue);    content: "P"; font-size: 12px; }
ai .npc summary::before   { background: var(--c-magenta); content: "★"; }
ai .track summary::before { background: var(--c-purple-2); content: "◇"; }
ai .mem summary::before   { background: var(--c-yellow);  content: "M"; color: #5C4A1C; font-size: 12px; }
ai .act summary::before   { background: var(--c-pink);    content: "?"; }

ai [open] > summary::before {
  transform: rotate(360deg) scale(1.08);
}

/* ========== A4. 思维链 ========== */
ai .think .think-body {
  margin-top: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

ai .think .mod {
  background: transparent;
  padding: 0;
  margin: 0;
}

ai .think .mod-title {
  font-family: var(--ff-title);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--text);
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--c-purple);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-4);
  margin: 0 0 var(--s-3) 0;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  box-shadow: 0 2px 6px rgba(216, 90, 139, 0.06);
}

ai .think .grid3 {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-4);
}

ai .think .grid3 > div {
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4);
  position: relative;
  padding-left: calc(var(--s-4) + 6px);
}

ai .think .grid3 > div::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 3px;
}

ai .think .grid3 > div[t="权限"]::before { background: var(--c-blue); }
ai .think .grid3 > div[t="场景"]::before { background: var(--c-pink); }
ai .think .grid3 > div[t="连锁"]::before { background: var(--accent); }

ai .think d {
  display: block;
  font-size: 13.5px;
  line-height: 1.78;
  color: var(--text-soft);
  margin-bottom: var(--s-1);
}

ai .think .sub {
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4);
  margin-top: var(--s-2);
}

ai .think .sub:first-of-type { margin-top: 0; }

ai .think .sub h5 {
  font-family: var(--ff-title);
  font-size: 12.5px;
  color: var(--text-soft);
  margin-bottom: var(--s-2);
  padding-bottom: var(--s-1);
  border-bottom: 1px dashed var(--line-dash);
  letter-spacing: 0.04em;
}

ai .think .sub d {
  display: block;
  font-size: 12.5px;
  line-height: 1.78;
  color: var(--text-soft);
  margin-bottom: 2px;
  padding-left: 4px;
}

ai .think .sub d strong {
  color: var(--text);
  font-weight: 700;
}

ai .think .char-block {
  position: relative;
  padding-left: calc(var(--s-4) + 6px);
  border-left: 3px solid var(--c-magenta);
  background: var(--bg-card);
}

ai .think .char-block h5 {
  color: var(--c-magenta);
  font-size: 13px;
  border-bottom-color: rgba(216, 90, 139, 0.22);
}

ai .think .check-block {
  position: relative;
  padding-left: calc(var(--s-4) + 6px);
  border-left: 3px solid var(--c-purple);
  background: rgba(155, 127, 196, 0.06);
}

ai .think .check-block h5 {
  color: var(--c-purple);
  font-size: 13px;
  border-bottom-color: rgba(155, 127, 196, 0.22);
}

ai .think .sec-tag {
  display: inline-block;
  font-family: var(--ff-title);
  font-size: 11px;
  color: var(--accent);
  background: var(--bg-cream);
  border: 1px solid rgba(216, 90, 139, 0.22);
  padding: 1px 8px;
  border-radius: 10px;
  margin: var(--s-2) 0 var(--s-1) 0;
  letter-spacing: 0.06em;
  font-weight: 600;
}

ai .think .check-block .sec-tag {
  color: var(--c-purple);
  background: rgba(155, 127, 196, 0.10);
  border-color: rgba(155, 127, 196, 0.28);
}

ai .think .mod-meta {
  display: block;
  font-size: 12.5px;
  color: var(--text);
  background: var(--bg-cream);
  border: 1px solid rgba(229, 189, 94, 0.28);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-4);
  margin: 0 0 var(--s-3) 0;
  font-family: var(--ff-title);
  letter-spacing: 0.04em;
}

ai .think .mod-meta strong {
  color: var(--accent);
  font-family: var(--ff-mono);
  font-size: 13.5px;
  margin: 0 4px;
}

ai .think .calib-mark {
  display: block;
  text-align: center;
  font-size: 11.5px;
  color: var(--c-mint);
  background: transparent;
  border: none;
  padding: var(--s-2) 0 0 0;
  margin-top: var(--s-2);
  border-top: 1px dashed var(--line-dash);
  letter-spacing: 0.12em;
  font-style: italic;
}

/* ========== A5. 时间地点条 ========== */
ai hd {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-1);
  isolation: isolate;
  position: relative;
  margin: 0 var(--s-2) var(--s-5);
  padding: var(--s-5) var(--s-6) var(--s-5) calc(var(--s-7) + 4px);
  min-height: 104px;
  border-radius: 28px;
  border: 1px solid rgba(229, 137, 181, 0.42);

  background:
    radial-gradient(circle at 6% 50%, rgba(255, 255, 255, 0.62) 0 10%, transparent 22%),
    radial-gradient(circle at 96% 56%, rgba(255, 255, 255, 0.42) 0 7%, transparent 18%),
    linear-gradient(108deg, #FBD3DD 0%, #F4A6BD 44%, #E589B5 100%);

  box-shadow:
    0 2px 6px rgba(216, 90, 139, 0.18),
    0 12px 28px rgba(229, 137, 181, 0.20),
    0 20px 48px rgba(216, 90, 139, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);

  overflow: hidden;
  transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

ai hd::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), transparent 38%),
    radial-gradient(circle at 18% 28%, rgba(255, 255, 255, 0.52) 0 3.5px, transparent 4.5px),
    radial-gradient(circle at 84% 72%, rgba(255, 255, 255, 0.32) 0 3px, transparent 4px);
  border-radius: inherit;
}

ai hd::after {
  content: "";
  position: absolute;
  left: var(--s-5);
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  z-index: 1;
  background: var(--svg-star);
  background-size: contain;
  filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.68));
  opacity: 0.84;
  animation: twinkle 4.2s ease-in-out infinite;
}

ai hd span {
  position: relative;
  z-index: 2;
  display: block;
  max-width: 100%;
  margin: 0;
  font-family: var(--ff-title);
  font-size: 13.5px;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: rgba(92, 24, 56, 0.92);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.52);
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ========== A6. 正文 ========== */
ai story {
  padding: var(--s-6) var(--s-5);
  padding-left: calc(var(--s-5) + 4px);
}

ai story::before {
  background: linear-gradient(180deg, var(--c-pink) 0%, var(--c-purple-2) 100%);
}

ai story p {
  position: relative;
  text-indent: 2em;
  margin-bottom: var(--s-4);
  line-height: 1.96;
  color: var(--text);
  max-width: 64ch;
}

ai story p:first-child::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 0.45em;
  width: 12px;
  height: 12px;
  background: var(--svg-star);
  background-size: contain;
  opacity: 0.72;
}

ai story::after {
  content: "";
  position: absolute;
  top: 14%;
  right: 8%;
  width: 8px;
  height: 8px;
  background: var(--svg-sparkle);
  background-size: contain;
  opacity: 0.32;
  animation: twinkle 5.5s ease-in-out infinite 1.2s;
}

/* ========== A7. 状态行 ========== */
ai .status-row {
  display: grid;
  gap: var(--s-4);
  margin-bottom: var(--s-5);
}

/* ========== A8. PC 玩家面板 ========== */
ai .pc section { margin-top: var(--s-4); }

ai .pc d {
  display: block;
  font-size: 13.5px;
  line-height: 1.78;
  color: var(--text-soft);
  margin-bottom: var(--s-2);
  background: var(--bg-card-2);
  padding: var(--s-2) var(--s-3);
  border-radius: 8px;
  border: 1px solid var(--line);
}

ai .pc f {
  font-weight: 700;
  color: var(--c-magenta);
  margin-right: var(--s-1);
  font-size: 13px;
  letter-spacing: 0.04em;
}

ai .pc meter {
  width: 100%;
  height: 7px;
  vertical-align: middle;
}

ai .pc meter::-webkit-meter-bar {
  background: rgba(216, 90, 139, 0.08);
  border: none;
  border-radius: 4px;
}

ai .pc meter::-webkit-meter-optimum-value {
  background: linear-gradient(90deg, var(--c-mint), #B8E0C4);
  border-radius: 4px;
}

ai .pc .items {
  background: var(--bg-inset);
  border-radius: var(--r-sm);
  padding: var(--s-4);
  margin-top: var(--s-2);
  border: 1px solid var(--line);
}

/* ========== A9. NPC 角色 ========== */
ai .npc {
  background:
    radial-gradient(circle at 96% 4%, rgba(229, 137, 181, 0.08) 0 22%, transparent 42%),
    var(--bg-card);
}

ai .npc section {
  margin-top: var(--s-4);
  position: relative;
  z-index: 1;
}

ai .npc d {
  display: block;
  font-size: 13.5px;
  line-height: 1.78;
  color: var(--text-soft);
  margin-bottom: var(--s-2);
  background: var(--bg-card-2);
  padding: var(--s-2) var(--s-3);
  border-radius: 8px;
  border: 1px solid var(--line);
}

ai .npc f {
  font-weight: 700;
  color: var(--c-magenta);
  margin-right: var(--s-1);
  font-size: 13px;
  letter-spacing: 0.04em;
}

ai .npc b[type="爆"],
ai .npc b[type="数"] {
  display: inline-block;
  padding: 1px 9px;
  background: var(--bg-cream);
  color: var(--accent);
  font-weight: 700;
  font-size: 12.5px;
  margin: 0 2px;
  border: 1px solid rgba(216, 90, 139, 0.28);
  border-radius: 6px;
  font-family: var(--ff-mono);
}

ai .npc b[type="爆"] {
  background: var(--accent);
  color: #FFF;
  border-color: transparent;
}

/* —— HP/欲念双仪表 —— */
ai .npc .meters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  margin: var(--s-4) 0;
}

ai .npc .meter-wrap {
  text-align: center;
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--s-3);
}

ai .npc .meter-wrap span {
  display: block;
  font-family: var(--ff-title);
  font-size: 12px;
  color: var(--text-soft);
  margin-bottom: var(--s-2);
  letter-spacing: 0.06em;
}

ai .npc .meter-wrap meter {
  width: 100%;
  height: 8px;
  display: block;
}

ai .npc .meter-wrap .meter-num {
  display: block;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--text-soft);
  font-style: normal;
  margin-top: 2px;
  letter-spacing: 0.02em;
}

ai .npc meter::-webkit-meter-bar {
  background: rgba(216, 90, 139, 0.08);
  border-radius: 4px;
  border: none;
}

ai .npc meter::-webkit-meter-optimum-value {
  background: linear-gradient(90deg, var(--c-pink), var(--c-magenta));
  border-radius: 4px;
}

/* —— 表/里身份分离卡片 —— */
ai .npc .surface {
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4);
  margin: var(--s-3) 0;
}

ai .npc .identity-card {
  position: relative;
  padding-left: calc(var(--s-4) + 6px);
}

ai .npc .identity-card::before {
  content: "";
  position: absolute;
  left: 0; top: var(--s-3); bottom: var(--s-3);
  width: 3px;
  border-radius: 3px;
  background: var(--c-blue);
}

ai .npc .identity-card.inner-id::before {
  background: var(--c-magenta);
}

ai .npc .id-title {
  font-family: var(--ff-title);
  font-size: 13px;
  color: var(--c-blue);
  margin-bottom: var(--s-2);
  letter-spacing: 0.04em;
  font-weight: 700;
}

ai .npc .identity-card.inner-id .id-title {
  color: var(--c-magenta);
}

ai .npc .id-eval {
  display: block;
  font-size: 13px;
  color: var(--text);
  background: var(--bg-card);
  padding: var(--s-2) var(--s-3);
  border-radius: 8px;
  border: 1px solid var(--line);
  margin-bottom: var(--s-3);
  line-height: 1.72;
  font-style: italic;
}

/* —— 血条行 —— */
ai .npc .bar-row {
  display: grid;
  grid-template-columns: 44px 1fr 60px;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-2);
}

ai .npc .bar-label {
  font-family: var(--ff-title);
  font-size: 12px;
  color: var(--text-soft);
  letter-spacing: 0.06em;
  text-align: left;
  font-weight: 600;
}

ai .npc .bar-track {
  position: relative;
  width: 100%;
  height: 10px;
  background: rgba(216, 90, 139, 0.08);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--line);
}

ai .npc .bar-track meter {
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
  border: none;
  -webkit-appearance: none;
  appearance: none;
}

ai .npc .bar-track meter::-webkit-meter-bar {
  background: transparent;
  border: none;
  border-radius: 5px;
}

ai .npc .bar-track .bar-favor::-webkit-meter-optimum-value {
  background: linear-gradient(90deg, var(--c-pink-2), var(--c-magenta));
  border-radius: 5px;
}
ai .npc .bar-track .bar-favor::-moz-meter-bar {
  background: linear-gradient(90deg, var(--c-pink-2), var(--c-magenta));
  border-radius: 5px;
}

ai .npc .bar-track .bar-heart::-webkit-meter-optimum-value {
  background: linear-gradient(90deg, var(--c-purple-2), var(--c-purple));
  border-radius: 5px;
}
ai .npc .bar-track .bar-heart::-moz-meter-bar {
  background: linear-gradient(90deg, var(--c-purple-2), var(--c-purple));
  border-radius: 5px;
}

ai .npc .bar-num {
  font-family: var(--ff-mono);
  font-size: 12px;
  color: var(--accent);
  font-weight: 700;
  font-style: normal;
  text-align: right;
  letter-spacing: 0.02em;
}

ai .npc .bar-reason {
  display: block;
  font-size: 12px;
  line-height: 1.62;
  color: var(--text-mute);
  background: transparent;
  border: none;
  padding: 2px 0 0 calc(44px + var(--s-3));
  margin-bottom: var(--s-2);
}

ai .npc .bar-reason f {
  font-size: 11px;
  color: var(--text-soft);
  margin-right: var(--s-1);
  padding: 1px 6px;
  background: var(--bg-inset);
  border-radius: 4px;
  border: 1px solid var(--line);
  font-weight: 600;
  letter-spacing: 0.04em;
}

ai .npc .bar-reason:last-child { margin-bottom: 0; }

/* —— 情绪六维血条 —— */
ai .npc .emotion-bars {
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: var(--s-4);
  margin: var(--s-3) 0;
}

ai .npc .emo-title {
  display: block;
  font-family: var(--ff-title);
  font-size: 13px;
  color: var(--text);
  margin-bottom: var(--s-3);
  letter-spacing: 0.04em;
  font-weight: 700;
}

ai .npc .emo-row {
  display: grid;
  grid-template-columns: 28px 1fr 38px;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-2);
}

ai .npc .emo-row:last-of-type { margin-bottom: var(--s-3); }

ai .npc .emo-label {
  font-family: var(--ff-title);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  width: 22px;
  height: 22px;
  line-height: 22px;
  border-radius: 6px;
  color: #FFF;
}

ai .npc .emo-row[lv="喜"] .emo-label { background: var(--c-yellow); color: #5C4A1C; }
ai .npc .emo-row[lv="怒"] .emo-label { background: var(--c-magenta); }
ai .npc .emo-row[lv="哀"] .emo-label { background: var(--c-blue); color: #1E3A52; }
ai .npc .emo-row[lv="惧"] .emo-label { background: var(--c-purple); }
ai .npc .emo-row[lv="惊"] .emo-label { background: var(--c-pink); }
ai .npc .emo-row[lv="恶"] .emo-label { background: var(--text-mute); }

ai .npc .emo-row .bar-track {
  height: 8px;
  border-radius: 4px;
}

ai .npc .emo-row[lv="喜"] meter::-webkit-meter-optimum-value { background: linear-gradient(90deg, var(--c-yellow-2), var(--c-yellow)); }
ai .npc .emo-row[lv="怒"] meter::-webkit-meter-optimum-value { background: linear-gradient(90deg, var(--c-pink), var(--c-magenta)); }
ai .npc .emo-row[lv="哀"] meter::-webkit-meter-optimum-value { background: linear-gradient(90deg, var(--c-blue-2), var(--c-blue)); }
ai .npc .emo-row[lv="惧"] meter::-webkit-meter-optimum-value { background: linear-gradient(90deg, var(--c-purple-2), var(--c-purple)); }
ai .npc .emo-row[lv="惊"] meter::-webkit-meter-optimum-value { background: linear-gradient(90deg, var(--c-pink-2), var(--c-pink)); }
ai .npc .emo-row[lv="恶"] meter::-webkit-meter-optimum-value { background: linear-gradient(90deg, #B8B0C8, #8A7FA0); }

ai .npc .emo-row[lv="喜"] meter::-moz-meter-bar { background: var(--c-yellow); }
ai .npc .emo-row[lv="怒"] meter::-moz-meter-bar { background: var(--c-magenta); }
ai .npc .emo-row[lv="哀"] meter::-moz-meter-bar { background: var(--c-blue); }
ai .npc .emo-row[lv="惧"] meter::-moz-meter-bar { background: var(--c-purple); }
ai .npc .emo-row[lv="惊"] meter::-moz-meter-bar { background: var(--c-pink); }
ai .npc .emo-row[lv="恶"] meter::-moz-meter-bar { background: #8A7FA0; }

ai .npc .emo-row .bar-num {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  color: var(--text-soft);
  font-weight: 600;
  font-style: normal;
  text-align: right;
}

ai .npc .emotion-bars .lead {
  display: block;
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px dashed var(--line-dash);
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.06em;
}

/* —— 内心独白 —— */
ai .npc .inner {
  background: var(--bg-inset);
  border-left: 3px solid var(--c-magenta);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--s-4);
  margin: var(--s-4) 0;
  font-style: italic;
  line-height: 1.85;
  color: var(--text);
}

ai .npc .body-detail {
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--s-4);
  margin-top: var(--s-4);
}

ai .npc .body-detail summary {
  font-size: 13.5px;
  padding: var(--s-2) var(--s-3);
  background: var(--bg-inset);
}

ai .npc .body-detail summary::before {
  background: var(--text-mute);
  content: "+";
  font-size: 14px;
}

ai .npc .body-detail d {
  background: var(--bg-inset);
  margin-top: var(--s-1);
}

/* ========== A10. 角色追踪 ========== */
ai .track section { margin-top: var(--s-4); }

ai .track .char-track {
  display: block;
  background: var(--bg-card-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-5) + 4px);
  margin-bottom: var(--s-2);
  font-size: 13px;
  line-height: 1.82;
  color: var(--text-soft);
  position: relative;
  transition: transform 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
}

ai .track .char-track::before {
  content: "";
  position: absolute;
  left: var(--s-3);
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background: var(--c-yellow);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%,
                     79% 91%, 50% 70%, 21% 91%, 32% 57%,
                     2% 35%, 39% 35%);
  opacity: 0.78;
}

ai .track .char-track:hover {
  transform: translateX(2px);
  box-shadow: -2px 4px 12px rgba(216, 90, 139, 0.10);
}

ai .track .char-track .n {
  font-weight: 700;
  color: var(--c-purple);
  font-size: 13.5px;
  margin-right: var(--s-2);
}

ai .track .char-track span { margin-right: var(--s-2); }

/* ========== A11. 记忆区 ========== */
ai .mem h4 {
  font-size: 14px;
  color: var(--c-yellow);
  filter: brightness(0.85);
  margin: var(--s-4) 0 var(--s-2) 0;
  padding-bottom: var(--s-1);
  border-bottom: 1px dashed var(--line-dash);
}

ai .mem h4:first-child { margin-top: 0; }

ai .mem d {
  display: block;
  font-size: 13px;
  line-height: 1.82;
  color: var(--text-soft);
  background: var(--bg-card-2);
  padding: var(--s-2) var(--s-4);
  border-radius: 8px;
  margin-bottom: var(--s-1);
  border-left: 3px solid var(--c-yellow);
  border-right: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ========== A12. 星记忆回廊(永远深色星空) ========== */
ai .star {
  position: relative;
  padding: var(--s-6);
  border-radius: var(--r-xl);
  background:
    radial-gradient(circle at 24% 12%, rgba(155, 127, 196, 0.22), transparent 28%),
    radial-gradient(circle at 82% 16%, rgba(127, 184, 212, 0.12), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(216, 90, 139, 0.10), transparent 28%),
    linear-gradient(180deg, #221A3D 0%, #150E28 100%);
  color: rgba(232, 224, 244, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.16),
    0 24px 56px rgba(34, 26, 61, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -24px 56px rgba(0, 0, 0, 0.22);
  margin-bottom: var(--s-5);
  overflow: hidden;
}

ai .star::before {
  content: "";
  position: absolute;
  inset: -25%;
  background-image:
    radial-gradient(circle at 18% 25%, rgba(229, 189, 94, 0.72) 1.2px, transparent 1.8px),
    radial-gradient(circle at 82% 68%, rgba(127, 184, 212, 0.56) 0.9px, transparent 1.4px),
    radial-gradient(circle at 45% 55%, rgba(229, 137, 181, 0.52) 1px, transparent 1.6px),
    radial-gradient(circle at 65% 30%, rgba(155, 127, 196, 0.56) 0.9px, transparent 1.4px),
    radial-gradient(circle at 30% 75%, rgba(229, 189, 94, 0.36) 0.7px, transparent 1.2px);
  background-size: 150px 150px, 200px 200px, 120px 120px, 170px 170px, 90px 90px;
  opacity: 0.58;
  animation: starfield 200s linear infinite;
}

ai .star summary {
  color: var(--c-yellow);
  background: rgba(229, 189, 94, 0.08);
  border: 1px solid rgba(229, 189, 94, 0.20);
}

ai .star summary::before {
  content: "✨";
  background: transparent;
  font-size: 14px;
  filter: drop-shadow(0 0 4px rgba(229, 189, 94, 0.52));
}

ai .star-config {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(229, 189, 94, 0.14);
  border-radius: var(--r-sm);
  padding: var(--s-4);
  margin: var(--s-4) 0;
}

ai .star-config summary {
  font-size: 13.5px;
  padding: var(--s-2) var(--s-3);
  background: rgba(229, 189, 94, 0.06);
  border-radius: 8px;
  color: rgba(216, 200, 232, 0.86);
  border: none;
}

ai .star-config summary::before {
  content: "⚙";
  background: transparent;
  color: rgba(216, 200, 232, 0.78);
  font-size: 13px;
}

ai .star-config d {
  display: block;
  font-size: 12px;
  line-height: 1.78;
  color: rgba(216, 200, 232, 0.74);
  background: rgba(255, 255, 255, 0.03);
  padding: var(--s-1) var(--s-2);
  border-radius: 5px;
  margin-bottom: var(--s-1);
}

ai .star-mem {
  position: relative;
  z-index: 1;
  margin-top: var(--s-5);
}

ai .star-mem h4 {
  font-family: var(--ff-title);
  font-size: 14.5px;
  color: var(--c-yellow);
  text-align: center;
  margin: var(--s-5) 0 var(--s-3) 0;
  text-shadow: 0 0 8px rgba(229, 189, 94, 0.28);
  letter-spacing: 0.08em;
}

ai .star .tbl {
  overflow-x: auto;
  border-radius: var(--r-sm);
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--s-4);
  margin: var(--s-4) 0;
  position: relative;
}

ai .star .tbl::before {
  content: "← 滑动查看 →";
  position: absolute;
  top: 5px;
  right: 9px;
  font-size: 10px;
  color: rgba(127, 184, 212, 0.62);
  background: rgba(31, 23, 52, 0.78);
  padding: 1px 7px;
  border-radius: 4px;
}

ai .star table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-size: 13px;
}

ai .star table thead { background: rgba(229, 189, 94, 0.12); }

ai .star table th {
  padding: var(--s-2) var(--s-4);
  text-align: left;
  color: var(--c-yellow);
  font-weight: 600;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(229, 189, 94, 0.20);
}

ai .star table td {
  padding: var(--s-2) var(--s-4);
  color: rgba(208, 200, 224, 0.84);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  line-height: 1.72;
}

ai .star table td:first-child {
  color: var(--c-blue-2);
  font-weight: 600;
}

ai .star table tr:hover td {
  background: rgba(229, 189, 94, 0.05);
}

/* ========== A13. 选项区(竖向) ========== */
ai .act .btns,
ai .act .btns.vertical {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-4);
}

ai .act button {
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: none;
  cursor: pointer;
  transition: transform 0.25s var(--bounce),
              box-shadow 0.25s var(--ease),
              background 0.25s var(--ease);
  position: relative;
  width: 100%;
  flex: 1 1 100%;
  min-width: 0;
  text-align: left;
  outline: none;
}

ai .act button[n="1"],
ai .act button[n="2"],
ai .act button[n="3"] {
  padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-7) + 4px);
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow:
    0 2px 4px rgba(216, 90, 139, 0.04),
    0 6px 14px rgba(216, 90, 139, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  line-height: 1.5;
  min-height: 56px;
  display: flex;
  align-items: center;
}

ai .act button[n="1"]::before,
ai .act button[n="2"]::before,
ai .act button[n="3"]::before {
  content: "";
  position: absolute;
  left: var(--s-2);
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-title);
  font-size: 15px;
  color: #FFF;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32),
              0 2px 4px rgba(216, 90, 139, 0.10);
}

ai .act button[n="1"]::before {
  content: "A";
  background: linear-gradient(135deg, var(--c-pink) 0%, #D6709E 100%);
}
ai .act button[n="2"]::before {
  content: "B";
  background: linear-gradient(135deg, var(--c-blue) 0%, #6BA8C5 100%);
}
ai .act button[n="3"]::before {
  content: "C";
  background: linear-gradient(135deg, var(--c-yellow) 0%, #D5AA48 100%);
  color: #5C4A1C;
}

ai .act button[n="1"]:hover,
ai .act button[n="2"]:hover,
ai .act button[n="3"]:hover {
  transform: translateY(-2px);
  background: #FFF;
  box-shadow:
    0 4px 8px rgba(216, 90, 139, 0.08),
    0 12px 24px rgba(216, 90, 139, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

ai .act button[n="1"]:hover::before { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 4px 10px rgba(229, 137, 181, 0.42); }
ai .act button[n="2"]:hover::before { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 4px 10px rgba(127, 184, 212, 0.42); }
ai .act button[n="3"]:hover::before { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 4px 10px rgba(229, 189, 94, 0.42); }

ai .act button.sys {
  background: var(--bg-card-2);
  color: var(--text-soft);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  font-size: 13px;
  border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(216, 90, 139, 0.04);
  width: 100%;
  flex: 1 1 100%;
  text-align: left;
  justify-content: flex-start;
  display: flex;
  align-items: center;
  gap: 6px;
}

ai .act button[n="4"]::before { content: "⚙ "; }
ai .act button[n="5"]::before { content: "⏳ "; }

ai .act button.sys:hover {
  background: #FFF;
  color: var(--text);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(216, 90, 139, 0.10);
}

ai .act button:active { transform: scale(0.98); }

/* ========== A14. details 动画 ========== */
ai details { transition: all 0.25s var(--ease); }

ai details[open] { animation: detailsOpen 0.35s var(--ease); }

@keyframes detailsOpen {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@supports (interpolate-size: allow-keywords) {
  ai details { interpolate-size: allow-keywords; }
  ai details > *:not(summary) {
    overflow: hidden;
    transition:
      height 0.35s var(--ease),
      opacity 0.25s var(--ease),
      margin-top 0.25s var(--ease);
  }
  ai details:not([open]) > *:not(summary) {
    height: 0;
    opacity: 0;
    margin-top: 0;
  }
}

/* ========== A15. 关键帧 ========== */
@keyframes spin { to { transform: rotate(360deg); } }

@keyframes starfield {
  from { transform: translate(0, 0); }
  to   { transform: translate(-32px, -32px); }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.84; transform: translateY(-50%) scale(1); }
  50%      { opacity: 0.48; transform: translateY(-50%) scale(0.88); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* ========== A16. 响应式 ========== */
@media (min-width: 768px) {
  ai .think .grid3 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
  ai .think .grid3 > div:nth-child(1) { grid-column: 1; grid-row: 1; }
  ai .think .grid3 > div:nth-child(2) { grid-column: 2; grid-row: 1; }
  ai .think .grid3 > div:nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
  ai .status-row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  ai {
    padding: var(--s-3);
    font-size: 14.5px;
    line-height: 1.82;
  }

  ai hd {
    min-height: 96px;
    margin-inline: 0;
    padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-6) + 4px);
    border-radius: 22px;
  }
  ai hd::after { left: var(--s-3); width: 18px; height: 18px; }
  ai hd span { font-size: 12.5px; line-height: 1.68; }

  ai story, ai .think, ai .pc, ai .npc, ai .track, ai .mem, ai .act {
    border-radius: var(--r-lg);
    padding: var(--s-4);
    padding-left: calc(var(--s-4) + 4px);
  }
  ai story { padding: var(--s-5) var(--s-4); padding-left: calc(var(--s-4) + 4px); }

  ai .think summary, ai .pc summary, ai .npc summary,
  ai .track summary, ai .mem summary, ai .act summary {
    font-size: 14px;
    padding: var(--s-2) var(--s-3) var(--s-2) var(--s-2);
  }

  ai .think .mod-title { font-size: 13px; padding: var(--s-2) var(--s-3); }
  ai .think .sub { padding: var(--s-3); }
  ai .think .sub h5 { font-size: 12px; }
  ai .think .sub d { font-size: 12px; }
  ai .think .sec-tag { font-size: 10.5px; }

  ai .think .grid3 { grid-template-columns: 1fr; }
  ai .status-row { grid-template-columns: 1fr; }
  ai .npc .meters { grid-template-columns: 1fr; }

  ai .npc .bar-row {
    grid-template-columns: 36px 1fr 52px;
    gap: var(--s-2);
  }
  ai .npc .bar-reason { padding-left: calc(36px + var(--s-2)); }
  ai .npc .emo-row {
    grid-template-columns: 24px 1fr 34px;
    gap: var(--s-2);
  }

  ai .act .btns,
  ai .act .btns.vertical { flex-direction: column; }
  ai .act button { flex: 1 1 100%; min-width: auto; }
  ai .act button[n="1"],
  ai .act button[n="2"],
  ai .act button[n="3"] { min-height: 52px; }

  ai .star { padding: var(--s-5); border-radius: var(--r-lg); }
  ai .star summary { font-size: 14.5px; }
  ai .star table { font-size: 12.5px; }
  ai .star table th, ai .star table td { padding: var(--s-1) var(--s-3); }
}

@media (min-width: 1024px) {
  ai {
    max-width: 1160px;
    margin: 0 auto;
    padding: var(--s-6);
  }
  ai .act .btns,
  ai .act .btns.vertical {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-rows: none;
    gap: var(--s-3);
  }
  ai .act .btns button[n="1"],
  ai .act .btns button[n="2"],
  ai .act .btns button[n="3"] { grid-row: auto; }
  ai .act .btns button.sys {
    grid-row: auto;
    justify-self: stretch;
    width: 100%;
    margin: 0;
  }
}

/* ========== A17. 滚动条 / 选区 / 打印 / 辅助类 ========== */
ai ::-webkit-scrollbar { width: 6px; height: 6px; }
ai ::-webkit-scrollbar-track { background: transparent; border-radius: 4px; }
ai ::-webkit-scrollbar-thumb {
  background: var(--c-pink);
  border-radius: 4px;
  opacity: 0.62;
}
ai ::-webkit-scrollbar-thumb:hover { background: var(--c-magenta); }

ai ::selection {
  background: rgba(229, 137, 181, 0.42);
  color: var(--text);
  text-shadow: none;
}
ai ::-moz-selection {
  background: rgba(229, 137, 181, 0.42);
  color: var(--text);
  text-shadow: none;
}

@media print {
  ai { background: #FFF; padding: 20mm; color: #000; }
  ai::before,
  ai hd::before, ai hd::after,
  ai .star::before { display: none; }
  ai details[open] summary ~ * { display: block !important; }
  ai .act { display: none; }
}

ai summary:focus-visible {
  outline: 2px solid var(--c-yellow);
  outline-offset: 3px;
  border-radius: 8px;
}

ai button:focus-visible {
  outline: 2px solid var(--c-pink);
  outline-offset: 3px;
}

ai .badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  background: var(--bg-cream);
  color: var(--accent);
  border: 1px solid rgba(216, 90, 139, 0.22);
}

ai .badge.pink   { background: #FCE5EE; color: #B04575; border-color: rgba(229, 137, 181, 0.32); }
ai .badge.blue   { background: #E2F0F8; color: #3F7592; border-color: rgba(127, 184, 212, 0.32); }
ai .badge.yellow { background: #FCF3D4; color: #8A6D1E; border-color: rgba(229, 189, 94, 0.32); }
ai .badge.purple { background: #ECE3F8; color: #65479A; border-color: rgba(155, 127, 196, 0.32); }


/* ╔════════════════════════════════════════════════════╗
   ║                                                    ║
   ║   PART B · 平台外壳样式                              ║
   ║   (顶栏/按钮/输入框/分页/评论区)                      ║
   ║                                                    ║
   ╚════════════════════════════════════════════════════╝ */

/* ========== B1. 顶栏 + 动态粒子 ========== */
.sticky.w-full.top-0.flex.items-center {
  background: #FFF5F7 !important;
  border-bottom: 1px solid rgba(216, 90, 139, 0.18) !important;
  box-shadow: 0 2px 12px rgba(216, 90, 139, 0.08) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: background-color 0.4s ease, border-color 0.4s ease !important;
}

.sticky.w-full.top-0.flex.items-center::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    radial-gradient(circle at 12% 35%, rgba(229, 137, 181, 0.42) 1.2px, transparent 2px),
    radial-gradient(circle at 78% 65%, rgba(216, 90, 139, 0.32) 1px, transparent 1.8px),
    radial-gradient(circle at 38% 78%, rgba(244, 179, 206, 0.52) 1.4px, transparent 2.2px),
    radial-gradient(circle at 88% 22%, rgba(229, 189, 94, 0.28) 0.9px, transparent 1.5px),
    radial-gradient(circle at 22% 12%, rgba(155, 127, 196, 0.32) 0.8px, transparent 1.4px),
    radial-gradient(circle at 62% 42%, rgba(229, 137, 181, 0.26) 1px, transparent 1.6px);
  background-size:
    140px 140px, 180px 180px, 100px 100px,
    160px 160px, 120px 120px, 200px 200px;
  background-repeat: repeat;
  opacity: 0.62;
  animation: particle-drift 90s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.sticky.w-full.top-0.flex.items-center::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(229, 137, 181, 0.62) 20%,
    rgba(216, 90, 139, 0.82) 50%,
    rgba(229, 137, 181, 0.62) 80%,
    transparent 100%);
  background-size: 200% 100%;
  animation: light-sweep 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes particle-drift {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 140px 70px, -180px 90px, 100px -50px, -160px 80px, 120px -60px, -200px 100px; }
}

@keyframes light-sweep {
  0%, 100% { background-position: -100% 0; opacity: 0.42; }
  50%      { background-position: 100% 0;  opacity: 0.82; }
}

.sticky.w-full.top-0.flex.items-center > * {
  position: relative !important;
  z-index: 1 !important;
}

/* —— 模型选择器 —— */
#ai-model-selector .group.flex.items-center {
  background: #FFFCF6 !important;
  border: 1px solid rgba(216, 90, 139, 0.22) !important;
  border-left: 3px solid #D85A8B !important;
  border-radius: 10px !important;
  padding: 4px 10px !important;
  box-shadow: 0 2px 6px rgba(216, 90, 139, 0.10),
              inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  transition: background 0.25s ease,
              border-color 0.25s ease,
              transform 0.25s cubic-bezier(0.34, 1.42, 0.64, 1) !important;
}

#ai-model-selector .group.flex.items-center:hover {
  background: #FFF !important;
  border-left-color: #E589B5 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(216, 90, 139, 0.18) !important;
}

#ai-model-selector .truncate.text-\[13px\] {
  color: #5C2A48 !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

#ai-model-selector .shrink-0.flex.items-center svg {
  color: #D85A8B !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.42, 0.64, 1) !important;
}

#ai-model-selector .group.flex.items-center:hover svg {
  transform: rotate(180deg) !important;
}

/* —— 顶栏图标 —— */
.sticky.w-full.top-0 svg.lucide-clock-8 { color: #D85A8B !important; }
.sticky.w-full.top-0 svg:has(use[href="#icon-icon-set"]) { color: #D85A8B !important; }

.sticky.w-full.top-0 span.MuiBadge-dot.md\:hidden {
  background: #D85A8B !important;
  box-shadow: 0 0 0 2px #FFF5F7,
              0 0 8px rgba(216, 90, 139, 0.62) !important;
  animation: dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.2); opacity: 0.78; }
}

.sticky.w-full.top-0 button.MuiIconButton-root:has(svg.lucide-music-2) {
  background: rgba(229, 137, 181, 0.12) !important;
  border-radius: 10px !important;
  transition: all 0.25s ease !important;
}

.sticky.w-full.top-0 button.MuiIconButton-root:has(svg.lucide-music-2):hover {
  background: rgba(229, 137, 181, 0.22) !important;
  transform: translateY(-1px) !important;
}

.sticky.w-full.top-0 button.MuiIconButton-root svg.lucide-music-2 {
  color: #D85A8B !important;
}

#header-setting-button {
  background: rgba(216, 90, 139, 0.10) !important;
  border-radius: 10px !important;
  transition: all 0.25s ease !important;
}

#header-setting-button:hover {
  background: rgba(216, 90, 139, 0.22) !important;
  transform: translateY(-1px) rotate(45deg) !important;
}

#header-setting-button svg {
  color: #D85A8B !important;
  transition: transform 0.4s cubic-bezier(0.34, 1.42, 0.64, 1) !important;
}

/* ========== B2. 开场白选择器 ========== */
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"] {
  background: #FFFCF6 !important;
  border: 1px solid rgba(229, 189, 94, 0.32) !important;
  border-left: 3px solid #E5BD5E !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 6px rgba(229, 189, 78, 0.12),
              inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  transition: all 0.25s cubic-bezier(0.32, 0.72, 0.24, 1) !important;
}

div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]:hover {
  background: #FFF8E8 !important;
  border-left-color: #D5A848 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(229, 189, 78, 0.22) !important;
}

div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="SlidersH"] { color: #B58838 !important; }
div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="ChevronDown"] {
  color: #B58838 !important;
  transition: transform 0.3s ease !important;
}

div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]:hover svg[data-icon="ChevronDown"] {
  transform: translateY(2px) !important;
}

/* ========== B3. 按钮栏 ========== */
#ai-mod-button2 button.MuiButton-root {
  background: #FFFCF6 !important;
  color: #5C2A48 !important;
  border: 1px solid rgba(216, 90, 139, 0.22) !important;
  border-left: 3px solid #D85A8B !important;
  border-radius: 10px !important;
  font-family: "Noto Sans SC", -apple-system, sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.04em !important;
  padding: 6px 14px 6px 12px !important;
  box-shadow: 0 2px 6px rgba(216, 90, 139, 0.10),
              inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  transition: background 0.25s ease,
              border-color 0.25s ease,
              transform 0.25s cubic-bezier(0.34, 1.42, 0.64, 1) !important;
  text-transform: none !important;
}

#ai-mod-button2 button.MuiButton-root:hover {
  background: #FFF !important;
  border-color: rgba(216, 90, 139, 0.42) !important;
  border-left-color: #E589B5 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(216, 90, 139, 0.22) !important;
}

#ai-mod-button2 button.MuiButton-root:active { transform: scale(0.98) !important; }

#ai-mod-button2 button.MuiButton-root svg {
  color: #D85A8B !important;
  transition: all 0.25s ease !important;
}

#ai-mod-button2 button.MuiButton-root:hover svg {
  color: #E589B5 !important;
  transform: scale(1.08) !important;
}

/* ========== B4. 底部输入栏 ========== */
.bg-gradient-to-t {
  background: #FFF5F7 !important;
  border-top: 1px solid rgba(216, 90, 139, 0.18) !important;
  box-shadow: 0 -2px 12px rgba(216, 90, 139, 0.08) !important;
  transition: background-color 0.4s ease, border-color 0.4s ease !important;
}

#ai-chat-bottom-input {
  background: #FFFCF6 !important;
  border: 1px solid rgba(216, 90, 139, 0.22) !important;
  border-left: 3px solid #E589B5 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 6px rgba(216, 90, 139, 0.10),
              0 8px 18px rgba(216, 90, 139, 0.08),
              inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  transition: border-color 0.25s ease,
              box-shadow 0.25s ease !important;
}

#ai-chat-bottom-input:focus-within {
  border-color: rgba(216, 90, 139, 0.52) !important;
  border-left-color: #D85A8B !important;
  box-shadow: 0 2px 6px rgba(216, 90, 139, 0.16),
              0 8px 18px rgba(216, 90, 139, 0.22),
              inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  animation: input-breath 2.4s ease-in-out infinite;
}

@keyframes input-breath {
  0%, 100% { border-left-color: #D85A8B; }
  50%      { border-left-color: #E589B5; }
}

#ai-chat-input {
  background: transparent !important;
  color: #5C2A48 !important;
  font-family: "Noto Sans SC", -apple-system, sans-serif !important;
  font-size: 14.5px !important;
  line-height: 1.78 !important;
  letter-spacing: 0.012em !important;
  caret-color: #D85A8B !important;
}

#ai-chat-input::placeholder {
  color: rgba(92, 42, 72, 0.46) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}

#ai-chat-input::selection {
  background: rgba(229, 137, 181, 0.42) !important;
  color: #5C2A48 !important;
}

/* ========== B5. 分页栏 ========== */
.MuiPaginationItem-root {
  color: #8A4F70 !important;
  font-family: "Cascadia Code", "JetBrains Mono", monospace !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  transition: background 0.25s ease, color 0.25s ease !important;
}

.MuiPaginationItem-root:hover {
  background: rgba(229, 137, 181, 0.16) !important;
  color: #D85A8B !important;
}

.MuiPaginationItem-root.Mui-selected {
  background: #D85A8B !important;
  color: #FFF !important;
  box-shadow: 0 2px 4px rgba(216, 90, 139, 0.32),
              inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
  font-weight: 700 !important;
}

.MuiPaginationItem-root.Mui-selected:hover { background: #E589B5 !important; }

.MuiPaginationItem-root.Mui-disabled {
  color: rgba(138, 79, 112, 0.32) !important;
  opacity: 0.46 !important;
}

.MuiPaginationItem-icon { color: inherit !important; }

.MuiStack-root.css-1uwir8f .MuiBox-root {
  color: #8A4F70 !important;
  font-size: 13px !important;
}

.MuiInputBase-input {
  color: #5C2A48 !important;
  background: #FFFCF6 !important;
  border: 1px solid rgba(216, 90, 139, 0.22) !important;
  border-radius: 6px !important;
  font-family: "Cascadia Code", monospace !important;
  font-weight: 600 !important;
}

/* ========== B6. 评论区 ========== */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
  background: #FFF5F7 !important;
  border-top: 1px solid rgba(216, 90, 139, 0.18) !important;
}

div.text-lg.font-bold {
  color: #5C2A48 !important;
  font-family: "Mochiy Pop One", "PingFang SC", sans-serif !important;
  letter-spacing: 0.04em !important;
  position: relative;
  padding-left: 14px !important;
}

div.text-lg.font-bold::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  background: #D85A8B;
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(216, 90, 139, 0.42);
}

p.MuiTypography-body1.text-grey-600 {
  color: #8A4F70 !important;
  font-family: "Mochiy Pop One", "PingFang SC", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
}

span.MuiRating-iconEmpty svg {
  color: rgba(216, 90, 139, 0.22) !important;
  transition: transform 0.25s cubic-bezier(0.34, 1.42, 0.64, 1) !important;
}

span.MuiRating-iconFilled svg {
  color: #E5BD5E !important;
  filter: drop-shadow(0 0 6px rgba(229, 189, 94, 0.52));
  transition: transform 0.25s cubic-bezier(0.34, 1.42, 0.64, 1) !important;
}

span.MuiRating-root:hover svg { transform: scale(1.1) rotate(8deg) !important; }

span.text-orange-500 {
  color: #D85A8B !important;
  font-family: "Cascadia Code", monospace !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}

div.flex.flex-col.border-gray-200 {
  background: #FFFCF6 !important;
  border: 1px solid rgba(216, 90, 139, 0.22) !important;
  border-left: 3px solid #E589B5 !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 6px rgba(216, 90, 139, 0.10),
              inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  transition: all 0.25s ease !important;
}

div.flex.flex-col.border-gray-200:focus-within {
  border-color: rgba(216, 90, 139, 0.52) !important;
  border-left-color: #D85A8B !important;
  box-shadow: 0 4px 14px rgba(216, 90, 139, 0.22) !important;
}

textarea.rc-textarea {
  background: transparent !important;
  color: #5C2A48 !important;
  font-family: "Noto Sans SC", -apple-system, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.78 !important;
  caret-color: #D85A8B !important;
}

textarea.rc-textarea::placeholder {
  color: rgba(92, 42, 72, 0.46) !important;
  font-style: italic !important;
}

div.bg-gray-100.text-gray-500 {
  background: rgba(216, 90, 139, 0.10) !important;
  color: #D85A8B !important;
  font-family: "Cascadia Code", monospace !important;
  border-radius: 8px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
}

div.cursor-pointer.group.flex.items-center.justify-center {
  background: #D85A8B !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 6px rgba(216, 90, 139, 0.32),
              inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
  transition: all 0.25s cubic-bezier(0.34, 1.42, 0.64, 1) !important;
}

div.cursor-pointer.group.flex.items-center.justify-center:hover {
  background: #E589B5 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(216, 90, 139, 0.42),
              inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}

div.cursor-pointer.group.flex.items-center.justify-center:active {
  transform: scale(0.96) !important;
}

div[data-state="closed"] svg[data-icon="Send03"] {
  color: #FFF !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.42, 0.64, 1) !important;
}

div.cursor-pointer.group.flex.items-center.justify-center:hover svg[data-icon="Send03"] {
  transform: translateX(2px) rotate(-12deg) !important;
}

div.style_divider__mW0YX {
  background: rgba(216, 90, 139, 0.18) !important;
  height: 1px !important;
  border: none !important;
}

button.MuiButton-containedPrimary {
  background: #D85A8B !important;
  color: #FFF !important;
  border-radius: 10px !important;
  font-family: "Noto Sans SC", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  box-shadow: 0 2px 6px rgba(216, 90, 139, 0.32),
              inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
  text-transform: none !important;
  transition: all 0.25s ease !important;
}

button.MuiButton-containedPrimary:hover {
  background: #E589B5 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(216, 90, 139, 0.42) !important;
}

button.MuiButton-outlinedPrimary {
  background: #FFFCF6 !important;
  color: #D85A8B !important;
  border: 1px solid rgba(216, 90, 139, 0.42) !important;
  border-radius: 10px !important;
  font-family: "Noto Sans SC", sans-serif !important;
  font-weight: 600 !important;
  text-transform: none !important;
  transition: all 0.25s ease !important;
}

button.MuiButton-outlinedPrimary:hover {
  background: rgba(216, 90, 139, 0.08) !important;
  border-color: #E589B5 !important;
  transform: translateY(-1px) !important;
}

div.group.ml-0 {
  background: #FFFCF6 !important;
  border: 1px solid rgba(216, 90, 139, 0.18) !important;
  border-left: 3px solid rgba(229, 137, 181, 0.52) !important;
  border-radius: 14px !important;
  padding: 12px !important;
  margin-bottom: 8px !important;
  transition: all 0.25s ease !important;
}

div.group.ml-0:hover {
  background: #FFF !important;
  border-left-color: #D85A8B !important;
  transform: translateX(2px) !important;
  box-shadow: -2px 4px 12px rgba(216, 90, 139, 0.12) !important;
}

div.group img.rounded-full {
  border: 2px solid #FFFCF6 !important;
  box-shadow: 0 2px 6px rgba(216, 90, 139, 0.16),
              0 0 0 1px rgba(229, 137, 181, 0.32) !important;
  transition: transform 0.3s cubic-bezier(0.34, 1.42, 0.64, 1) !important;
}

div.group:hover img.rounded-full { transform: scale(1.08) rotate(-3deg) !important; }

div.text-sm.text-grey-600 span.font-bold {
  color: #5C2A48 !important;
  font-family: "Mochiy Pop One", "PingFang SC", sans-serif !important;
}

div.text-sm.text-grey-600 { color: #8A4F70 !important; }

span.text-\[10px\] {
  background: #E5BD5E !important;
  color: #5C4A1C !important;
  padding: 1px 7px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-family: "Cascadia Code", monospace !important;
}

div.break-all {
  color: #5C2A48 !important;
  line-height: 1.78 !important;
  font-size: 14px !important;
}

div.text-xs.text-grey-600 {
  color: rgba(138, 79, 112, 0.62) !important;
  font-family: "Cascadia Code", monospace !important;
  font-size: 11px !important;
}

button.text-gray-400 {
  color: rgba(138, 79, 112, 0.52) !important;
  border-radius: 8px !important;
  padding: 4px 8px !important;
  transition: all 0.25s ease !important;
}

button.text-gray-400:hover {
  color: #D85A8B !important;
  background: rgba(229, 137, 181, 0.16) !important;
  transform: scale(1.05) !important;
}

button.text-gray-400 svg { transition: transform 0.3s cubic-bezier(0.34, 1.42, 0.64, 1) !important; }
button.text-gray-400:hover svg { transform: scale(1.18) rotate(-12deg) !important; }

span.cursor-pointer {
  color: #D85A8B !important;
  font-weight: 600 !important;
  border-bottom: 1px dashed rgba(216, 90, 139, 0.42) !important;
  transition: all 0.25s ease !important;
}

span.cursor-pointer:hover {
  color: #C24578 !important;
  border-bottom-style: solid !important;
}

div.ml-8.border-l {
  border-left: 2px solid rgba(216, 90, 139, 0.32) !important;
  padding-left: 12px !important;
  margin-top: 8px !important;
  background: rgba(229, 137, 181, 0.06) !important;
  border-radius: 0 8px 8px 0 !important;
}


/* ╔════════════════════════════════════════════════════╗
   ║                                                    ║
   ║   PART C · 系统深色模式 → 切换为深紫夜晚主题          ║
   ║   ai 内容 + 平台外壳 同步联动                         ║
   ║                                                    ║
   ╚════════════════════════════════════════════════════╝ */

@media (prefers-color-scheme: dark) {

  /* ━━━━━ C1. ai 内容令牌覆盖为深紫 ━━━━━ */
  ai {
    --bg:           #14101E;
    --bg-card:     #1F1A2C;
    --bg-card-2:   #1A1626;
    --bg-inset:    #15111F;
    --bg-cream:    #2A2238;

    --text:        #E8E0F4;
    --text-soft:   rgba(232, 224, 244, 0.74);
    --text-mute:   rgba(232, 224, 244, 0.46);

    --line:         rgba(255, 255, 255, 0.08);
    --line-strong: rgba(255, 255, 255, 0.14);
    --line-dash:   rgba(255, 255, 255, 0.16);

    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.18),
            0 4px 12px rgba(0, 0, 0, 0.22);
    --sh-2: 0 2px 4px rgba(0, 0, 0, 0.18),
            0 10px 24px rgba(0, 0, 0, 0.28),
            0 20px 44px rgba(0, 0, 0, 0.22);

    background:
      radial-gradient(circle at 10% 4%, rgba(229, 137, 181, 0.10), transparent 38%),
      radial-gradient(circle at 92% 8%, rgba(127, 184, 212, 0.08), transparent 36%),
      var(--bg);
  }

  /* —— 时间地点条:恢复金色款 —— */
  ai hd {
    background:
      radial-gradient(circle at 6% 50%, rgba(255, 255, 255, 0.32) 0 10%, transparent 22%),
      linear-gradient(108deg, #E8C770 0%, #D5A848 44%, #B58838 100%);
    border-color: rgba(229, 189, 94, 0.32);
    box-shadow:
      0 12px 28px rgba(213, 168, 72, 0.18),
      0 20px 48px rgba(0, 0, 0, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.42);
  }
  ai hd span {
    color: rgba(40, 30, 12, 0.92);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.32);
  }

  /* —— 折叠标题 —— */
  ai .think summary,
  ai .pc summary,
  ai .npc summary,
  ai .track summary,
  ai .mem summary,
  ai .act summary {
    background: var(--bg-card-2);
    border-color: var(--line);
    color: var(--text);
  }
  ai [open] > summary { background: var(--bg-cream); }

  ai story p { color: rgba(232, 224, 244, 0.92); }
  ai .pc d, ai .npc d, ai .think d,
  ai .track .char-track, ai .mem d {
    background: var(--bg-card-2);
    color: var(--text-soft);
    border-color: var(--line);
  }

  ai .pc f { color: var(--c-blue-2); }
  ai .npc f { color: var(--c-pink-2); }
  ai .track .char-track .n { color: var(--c-purple-2); }
  ai .mem h4 { color: var(--c-yellow-2); filter: none; }

  /* —— NPC 身份卡片 —— */
  ai .npc .surface,
  ai .npc .emotion-bars {
    background: var(--bg-card-2);
    border-color: var(--line);
  }
  ai .npc .id-eval {
    background: var(--bg-inset);
    color: var(--text);
  }
  ai .npc .bar-track {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--line);
  }
  ai .npc .bar-reason f {
    background: var(--bg-inset);
    color: var(--text-soft);
  }
  ai .npc .id-title { color: var(--c-blue-2); }
  ai .npc .identity-card.inner-id .id-title { color: var(--c-pink-2); }

  /* —— 思维链模块 —— */
  ai .think .mod-title {
    background: var(--bg-card-2);
    border-color: var(--line);
    color: var(--text);
  }
  ai .think .char-block { background: var(--bg-card-2); }
  ai .think .check-block { background: rgba(155, 127, 196, 0.10); }
  ai .think .mod-meta {
    background: var(--bg-cream);
    color: var(--text);
  }
  ai .think .sec-tag {
    background: rgba(216, 90, 139, 0.14);
    color: var(--c-pink-2);
  }
  ai .think .check-block .sec-tag {
    background: rgba(155, 127, 196, 0.16);
    color: var(--c-purple-2);
  }

  /* —— 选项按钮 —— */
  ai .act button[n="1"],
  ai .act button[n="2"],
  ai .act button[n="3"] {
    background: var(--bg-card-2);
    color: var(--text);
    border-color: var(--line);
  }
  ai .act button[n="1"]:hover,
  ai .act button[n="2"]:hover,
  ai .act button[n="3"]:hover { background: var(--bg-cream); }
  ai .act button.sys {
    background: var(--bg-card-2);
    color: var(--text-soft);
    border-color: var(--line);
  }
  ai .act button.sys:hover {
    background: var(--bg-cream);
    color: var(--text);
  }

  ai code { background: rgba(155, 127, 196, 0.18); color: var(--c-purple-2); }
  ai pre { background: var(--bg-inset); }
  ai blockquote {
    background: rgba(155, 127, 196, 0.08);
    color: var(--text-soft);
  }

  /* ━━━━━ C2. 平台顶栏切换为深紫 ━━━━━ */
  .sticky.w-full.top-0.flex.items-center {
    background: #1F1A2C !important;
    border-bottom: 1px solid rgba(155, 127, 196, 0.22) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.32) !important;
  }

  .sticky.w-full.top-0.flex.items-center::before {
    background-image:
      radial-gradient(circle at 12% 35%, rgba(229, 137, 181, 0.62) 1.2px, transparent 2px),
      radial-gradient(circle at 78% 65%, rgba(189, 168, 218, 0.52) 1px, transparent 1.8px),
      radial-gradient(circle at 38% 78%, rgba(229, 189, 94, 0.42) 1.4px, transparent 2.2px),
      radial-gradient(circle at 88% 22%, rgba(168, 210, 229, 0.42) 0.9px, transparent 1.5px),
      radial-gradient(circle at 22% 12%, rgba(155, 127, 196, 0.52) 0.8px, transparent 1.4px),
      radial-gradient(circle at 62% 42%, rgba(244, 179, 206, 0.42) 1px, transparent 1.6px) !important;
    opacity: 0.78 !important;
  }

  .sticky.w-full.top-0.flex.items-center::after {
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(189, 168, 218, 0.62) 20%,
      rgba(229, 137, 181, 0.82) 50%,
      rgba(189, 168, 218, 0.62) 80%,
      transparent 100%) !important;
    background-size: 200% 100% !important;
  }

  /* 模型选择器 */
  #ai-model-selector .group.flex.items-center {
    background: #2A2238 !important;
    border-color: rgba(189, 168, 218, 0.32) !important;
    border-left-color: #BDA8DA !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  }
  #ai-model-selector .group.flex.items-center:hover {
    background: #342A48 !important;
    border-left-color: #E589B5 !important;
    box-shadow: 0 4px 12px rgba(155, 127, 196, 0.22) !important;
  }
  #ai-model-selector .truncate.text-\[13px\] { color: #E8E0F4 !important; }
  #ai-model-selector .shrink-0.flex.items-center svg { color: #BDA8DA !important; }

  /* 顶栏图标 */
  .sticky.w-full.top-0 svg.lucide-clock-8 { color: #A8D2E5 !important; }
  .sticky.w-full.top-0 svg:has(use[href="#icon-icon-set"]) { color: #BDA8DA !important; }

  .sticky.w-full.top-0 span.MuiBadge-dot.md\:hidden {
    background: #E589B5 !important;
    box-shadow: 0 0 0 2px #1F1A2C,
                0 0 8px rgba(229, 137, 181, 0.62) !important;
  }

  .sticky.w-full.top-0 button.MuiIconButton-root:has(svg.lucide-music-2) {
    background: rgba(229, 137, 181, 0.12) !important;
  }
  .sticky.w-full.top-0 button.MuiIconButton-root:has(svg.lucide-music-2):hover {
    background: rgba(229, 137, 181, 0.22) !important;
  }
  .sticky.w-full.top-0 button.MuiIconButton-root svg.lucide-music-2 { color: #F4B3CE !important; }

  #header-setting-button { background: rgba(155, 127, 196, 0.12) !important; }
  #header-setting-button:hover { background: rgba(155, 127, 196, 0.22) !important; }
  #header-setting-button svg { color: #BDA8DA !important; }

  /* 开场白选择器 */
  div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"] {
    background: #2A2238 !important;
    border-color: rgba(229, 189, 94, 0.32) !important;
    border-left-color: #E5BD5E !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  }
  div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]:hover {
    background: #342A48 !important;
    border-left-color: #F2D88E !important;
  }
  div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="SlidersH"],
  div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="ChevronDown"] {
    color: #F2D88E !important;
  }

  /* 按钮栏 */
  #ai-mod-button2 button.MuiButton-root {
    background: #1F1A2C !important;
    color: #E8E0F4 !important;
    border-color: rgba(155, 127, 196, 0.32) !important;
    border-left-color: #BDA8DA !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  }
  #ai-mod-button2 button.MuiButton-root:hover {
    background: #2A2238 !important;
    border-color: rgba(189, 168, 218, 0.52) !important;
    border-left-color: #E589B5 !important;
    color: #FFF !important;
    box-shadow: 0 4px 12px rgba(155, 127, 196, 0.32) !important;
  }
  #ai-mod-button2 button.MuiButton-root svg { color: #F4B3CE !important; }
  #ai-mod-button2 button.MuiButton-root:hover svg { color: #E589B5 !important; }

  /* 底部输入栏 */
  .bg-gradient-to-t {
    background: #14101E !important;
    border-top: 1px solid rgba(155, 127, 196, 0.22) !important;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.32) !important;
  }
  #ai-chat-bottom-input {
    background: #1F1A2C !important;
    border-color: rgba(155, 127, 196, 0.32) !important;
    border-left-color: #E589B5 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.32),
                0 8px 18px rgba(0, 0, 0, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  }
  #ai-chat-bottom-input:focus-within {
    border-color: rgba(229, 137, 181, 0.52) !important;
    border-left-color: #F4B3CE !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.32),
                0 8px 18px rgba(229, 137, 181, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  }
  #ai-chat-input {
    color: #E8E0F4 !important;
    caret-color: #F4B3CE !important;
  }
  #ai-chat-input::placeholder { color: rgba(232, 224, 244, 0.42) !important; }
  #ai-chat-input::selection {
    background: rgba(229, 137, 181, 0.42) !important;
    color: #FFF !important;
  }

  /* 分页 */
  .MuiPaginationItem-root { color: rgba(232, 224, 244, 0.62) !important; }
  .MuiPaginationItem-root:hover {
    background: rgba(229, 137, 181, 0.16) !important;
    color: #F4B3CE !important;
  }
  .MuiPaginationItem-root.Mui-selected {
    background: #D85A8B !important;
    color: #FFF !important;
    box-shadow: 0 2px 4px rgba(216, 90, 139, 0.42),
                inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  }
  .MuiPaginationItem-root.Mui-disabled { color: rgba(232, 224, 244, 0.22) !important; }
  .MuiStack-root.css-1uwir8f .MuiBox-root { color: rgba(232, 224, 244, 0.62) !important; }
  .MuiInputBase-input {
    color: #E8E0F4 !important;
    background: #1F1A2C !important;
    border-color: rgba(155, 127, 196, 0.32) !important;
  }

  /* 评论区 */
  div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    background: #14101E !important;
    border-top: 1px solid rgba(155, 127, 196, 0.22) !important;
  }
  div.text-lg.font-bold { color: #E8E0F4 !important; }
  div.text-lg.font-bold::before { background: #E589B5 !important; }

  p.MuiTypography-body1.text-grey-600 { color: rgba(232, 224, 244, 0.74) !important; }
  span.MuiRating-iconEmpty svg { color: rgba(232, 224, 244, 0.22) !important; }
  span.MuiRating-iconFilled svg { color: #F2D88E !important; }
  span.text-orange-500 { color: #F4B3CE !important; }

  div.flex.flex-col.border-gray-200 {
    background: #1F1A2C !important;
    border-color: rgba(155, 127, 196, 0.32) !important;
    border-left-color: #E589B5 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.32),
                inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  }
  div.flex.flex-col.border-gray-200:focus-within {
    border-color: rgba(229, 137, 181, 0.52) !important;
    border-left-color: #F4B3CE !important;
    box-shadow: 0 4px 14px rgba(229, 137, 181, 0.22) !important;
  }

  textarea.rc-textarea {
    color: #E8E0F4 !important;
    caret-color: #F4B3CE !important;
  }
  textarea.rc-textarea::placeholder { color: rgba(232, 224, 244, 0.42) !important; }

  div.bg-gray-100.text-gray-500 {
    background: rgba(155, 127, 196, 0.18) !important;
    color: #BDA8DA !important;
  }

  div.cursor-pointer.group.flex.items-center.justify-center {
    background: #D85A8B !important;
    box-shadow: 0 2px 6px rgba(216, 90, 139, 0.42),
                inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  }
  div.cursor-pointer.group.flex.items-center.justify-center:hover {
    background: #E589B5 !important;
  }

  div.style_divider__mW0YX { background: rgba(189, 168, 218, 0.32) !important; }

  button.MuiButton-containedPrimary {
    background: #9B7FC4 !important;
    box-shadow: 0 2px 6px rgba(155, 127, 196, 0.42),
                inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
  }
  button.MuiButton-containedPrimary:hover { background: #BDA8DA !important; }

  button.MuiButton-outlinedPrimary {
    background: #1F1A2C !important;
    color: #BDA8DA !important;
    border-color: rgba(155, 127, 196, 0.52) !important;
  }
  button.MuiButton-outlinedPrimary:hover {
    background: #2A2238 !important;
    color: #E8E0F4 !important;
  }

  div.group.ml-0 {
    background: #1F1A2C !important;
    border-color: rgba(155, 127, 196, 0.22) !important;
    border-left-color: rgba(189, 168, 218, 0.52) !important;
  }
  div.group.ml-0:hover {
    background: #2A2238 !important;
    border-left-color: #E589B5 !important;
    box-shadow: -2px 4px 12px rgba(0, 0, 0, 0.32) !important;
  }

  div.group img.rounded-full {
    border-color: #1F1A2C !important;
    box-shadow: 0 0 0 1px rgba(229, 137, 181, 0.42) !important;
  }
  div.text-sm.text-grey-600 span.font-bold { color: #E8E0F4 !important; }
  div.text-sm.text-grey-600 { color: rgba(232, 224, 244, 0.62) !important; }
  span.text-\[10px\] {
    background: #E5BD5E !important;
    color: #3A2A0E !important;
  }
  div.break-all { color: rgba(232, 224, 244, 0.92) !important; }
  div.text-xs.text-grey-600 { color: rgba(232, 224, 244, 0.42) !important; }

  button.text-gray-400 { color: rgba(232, 224, 244, 0.52) !important; }
  button.text-gray-400:hover {
    color: #F4B3CE !important;
    background: rgba(229, 137, 181, 0.16) !important;
  }

  span.cursor-pointer {
    color: #A8D2E5 !important;
    border-bottom-color: rgba(168, 210, 229, 0.42) !important;
  }
  span.cursor-pointer:hover { color: #C8E3F0 !important; }

  div.ml-8.border-l {
    border-left-color: rgba(155, 127, 196, 0.52) !important;
    background: rgba(155, 127, 196, 0.10) !important;
  }
}

/* ╔════════════════════════════════════════════════════╗
   ║  PART D · 可访问性                                   ║
   ╚════════════════════════════════════════════════════╝ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  ai .star::before { animation: none; }
}

@media (prefers-contrast: more) {
  ai { background: #FFF; }
  ai .think, ai .pc, ai .npc, ai .track, ai .mem, ai .act {
    border: 2px solid currentColor;
  }
  ai .star { background: #000; color: #FFF; border: 2px solid #FFF; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ✦ End · Magia Cupita Unified v2.0
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */