/* ========================================
   ⛩️ 咒術廻戦 · 明亮テーマ v1.0 — Part 1
   JUJUTSU KAISEN × CURSED ENERGY UI (BRIGHT)

   核心色彩 (咒力明蓝):
   - 背景: #F0F3FF (咒雾白 — 柔和底色)
   - 面板: #F8FAFF (结界白 — 近白冷蓝)
   - 主色调: #4A6CF7 (咒力蓝 — 核心视觉)
   - 强调色: #7B2FF2 (领域紫 — 醒目点缀)
   - 装饰色: #B3C5FF (浅咒边 — 柔和边界)
   - 文本: #1A1F36 (深靛紫 — 确保高可读性)
   - 列表文本: #2D2B55 (暗紫罗兰 — 物品/装备专用)
   - 危险: #E53E3E (赫 — 警报赤红)
   - 辅助青: #38B2AC (反转术蓝 — 信息提示)
   - 辅助绿: #48BB78 (术式绿 — 成功/活力)
   ======================================== */

/* =============================================
 * 1. 主题与全局定义 (Theme & Globals)
 * ============================================= */

/* --- 1.1. 核心动画 (Keyframes) --- */
@keyframes float-gentle {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.95; }
  50% { transform: translateY(-3px) scale(1.01); opacity: 1; }
}
@keyframes petal-drift {
  0% { background-position: 0% 0%; }
  100% { background-position: 0% 100%; }
}
@keyframes sakura-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(74, 108, 247, 0.25); }
  50% { box-shadow: 0 0 16px rgba(74, 108, 247, 0.55), 0 0 24px rgba(74, 108, 247, 0.3); }
}
@keyframes bloom-glow {
  0%, 100% { text-shadow: 0 0 4px #4A6CF7, 0 0 8px rgba(74, 108, 247, 0.4); }
  50% { text-shadow: 0 0 8px #4A6CF7, 0 0 16px rgba(74, 108, 247, 0.7), 0 0 20px rgba(123, 47, 242, 0.3); }
}
@keyframes note-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes petal-fall {
  0%, 100% { opacity: 0.12; }
  50% { opacity: 0.28; }
}
@keyframes scroll-reveal {
  0% { transform: scaleY(0.94); opacity: 0; }
  100% { transform: scaleY(1); opacity: 1; }
}
@keyframes gauge-shimmer {
  0%, 100% { opacity: 0.75; text-shadow: 0 0 6px rgba(74, 108, 247, 0.3); }
  50% { opacity: 1; text-shadow: 0 0 12px rgba(74, 108, 247, 0.6); }
}
@keyframes ribbon-breathe {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
@keyframes cot-text-vanish {
  0% { opacity: 1; }
  70% { opacity: 0; }
  100% { opacity: 0; visibility: hidden; height: 0; margin: 0; padding: 0; overflow: hidden; pointer-events: none; }
}
@keyframes petal-twirl {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes star-flash {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0.5; }
}
@keyframes petal-rise {
  0% { transform: translateY(0); opacity: 0.8; }
  100% { transform: translateY(-35px); opacity: 0; }
}
@keyframes bloom-shimmer {
  0%, 100% { box-shadow: 0 0 10px rgba(74, 108, 247, 0.2), inset 0 0 8px rgba(74, 108, 247, 0.1); }
  50% { box-shadow: 0 0 20px rgba(74, 108, 247, 0.45), inset 0 0 14px rgba(74, 108, 247, 0.2); }
}
@keyframes panel-light-sweep {
  0% { transform: translateX(-100%) skewX(-25deg); }
  100% { transform: translateX(200%) skewX(-25deg); }
}
@keyframes header-flow-line {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@keyframes loading-text-breathe {
  0%, 100% { opacity: 0.6; text-shadow: 0 0 6px rgba(123, 47, 242, 0.4); }
  50% { opacity: 1; text-shadow: 0 0 14px rgba(123, 47, 242, 0.75); }
}
@keyframes k-petal-spin {
  0% { transform: translateY(-50%) rotate(0deg); }
  100% { transform: translateY(-50%) rotate(360deg); }
}
@keyframes k-bar-shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}
@keyframes k-danger-pulse {
  0%, 100% { border-color: rgba(229, 62, 62, 0.25) !important; box-shadow: inset 0 0 0 rgba(229, 62, 62, 0) !important; }
  50% { border-color: rgba(229, 62, 62, 0.6) !important; box-shadow: inset 0 0 15px rgba(229, 62, 62, 0.15), 0 0 10px rgba(229, 62, 62, 0.2) !important; }
}
@keyframes k-fortune-pulse {
  0%, 100% { border-color: rgba(179, 197, 255, 0.3) !important; box-shadow: inset 0 0 0 rgba(179, 197, 255, 0) !important; }
  50% { border-color: rgba(74, 108, 247, 0.7) !important; box-shadow: inset 0 0 15px rgba(74, 108, 247, 0.2), 0 0 12px rgba(74, 108, 247, 0.25) !important; }
}
@keyframes star-twinkle {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.8); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}
@keyframes inv-item-glow {
  0%, 100% { box-shadow: 0 0 6px rgba(229, 62, 62, 0.3) !important; }
  50% { box-shadow: 0 0 12px rgba(229, 62, 62, 0.5), 0 0 20px rgba(229, 62, 62, 0.2) !important; }
}
/* 咒术回战专用动画 */
@keyframes cursed-energy-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes domain-expand-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(123, 47, 242, 0.2); }
  50% { box-shadow: 0 0 28px rgba(123, 47, 242, 0.5), 0 0 40px rgba(74, 108, 247, 0.2); }
}
@keyframes jujutsu-seal-spin {
  0% { transform: rotate(0deg); opacity: 0.15; }
  50% { opacity: 0.25; }
  100% { transform: rotate(360deg); opacity: 0.15; }
}
@keyframes user-cursed-flicker {
  0%, 100% { opacity: 0.8; transform: scale(1) translateY(0); }
  25% { opacity: 0.9; transform: scale(1.05) translateY(-1px); }
  50% { opacity: 0.75; transform: scale(0.98) translateY(1px); }
  75% { opacity: 0.85; transform: scale(1.02) translateY(-0.5px); }
}
@keyframes user-aura-pulse {
  0%, 100% { opacity: 0.65; transform: translateX(0) translateY(0); }
  50% { opacity: 0.75; transform: translateX(3px) translateY(-2px); }
}
@keyframes sukuna-mark-glow {
  0%, 100% { opacity: 0.08; }
  50% { opacity: 0.18; }
}
@keyframes cursed-particle-drift {
  0%   { transform: translateY(-10%) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.15; }
  90%  { opacity: 0.15; }
  100% { transform: translateY(110%) rotate(720deg); opacity: 0; }
}
@keyframes chuanqi-song-glow {
  0%, 100% { box-shadow: 0 0 6px rgba(74,108,247,0.25); }
  50%       { box-shadow: 0 0 14px rgba(74,108,247,0.55), 0 0 24px rgba(123,47,242,0.20); }
}
/* --- 1.2. 品质颜色变量 --- */
* {
  --color-rumen:     #6B7280;
  --color-zhongduan: #48BB78;
  --color-gaoduan:   #4A6CF7;
  --color-zhuanye:   #7B2FF2;
  --color-chuanqi:   #E53E3E;
}

/* =============================================
 * 2. 系统核心界面 (System Core UI)
 * ============================================= */

/* --- 2.1. CoT 思维助手 --- */
cot {
  display: block; position: relative; width: 100%; aspect-ratio: 3/1;
  overflow: hidden; box-sizing: border-box; contain: size layout paint;
  font-size: 0; line-height: 0; letter-spacing: 0;
}
cot * { display: none !important; }
cot::before {
  content: ""; display: block; width: 100%; height: 100%;
  pointer-events: none; background-repeat: no-repeat;
  background-position: center; background-size: cover;
  animation: float-gentle 7s ease-in-out infinite;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200'><defs><linearGradient id='paperGrad' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23F0F3FF'/><stop offset='1' stop-color='%23E4EBFF'/></linearGradient><linearGradient id='bG' x1='0' y1='0' x2='1' y2='1'><stop offset='0%25' stop-color='%23B3C5FF'/><stop offset='50%25' stop-color='%234A6CF7'/><stop offset='100%25' stop-color='%237B2FF2'/></linearGradient><style>.txt-main{font-family:Georgia,serif;font-weight:bold;font-size:22px;fill:%237B2FF2;text-anchor:middle;letter-spacing:6px}.txt-sub{font-family:Courier New,monospace;font-size:10px;fill:%231A1F36;text-anchor:middle;letter-spacing:2px}.txt-gauge{font-family:Courier New,monospace;font-size:7px;fill:%234A6CF7;text-anchor:middle}</style></defs><rect width='600' height='200' fill='url(%23paperGrad)'/><rect x='0' y='12' width='600' height='4' rx='2' fill='%23B3C5FF' opacity='0.5'/><rect x='0' y='184' width='600' height='4' rx='2' fill='%23B3C5FF' opacity='0.5'/><circle cx='100' cy='14' r='4' fill='%234A6CF7' opacity='0.3'/><circle cx='200' cy='14' r='3' fill='%23B3C5FF' opacity='0.4'/><circle cx='300' cy='14' r='5' fill='%237B2FF2' opacity='0.25'/><circle cx='400' cy='14' r='3' fill='%23B3C5FF' opacity='0.4'/><circle cx='500' cy='14' r='4' fill='%234A6CF7' opacity='0.3'/><g opacity='0.15' transform='translate(80,100)'><animateTransform attributeName='transform' type='rotate' from='0 80 100' to='360 80 100' dur='30s' repeatCount='indefinite'/><polygon points='0,-30 8,-10 28,-10 12,4 18,24 0,14 -18,24 -12,4 -28,-10 -8,-10' fill='none' stroke='%234A6CF7' stroke-width='1.5'/><circle r='8' fill='%23B3C5FF' opacity='0.4'/></g><g opacity='0.15' transform='translate(520,100)'><animateTransform attributeName='transform' type='rotate' from='360 520 100' to='0 520 100' dur='25s' repeatCount='indefinite'/><polygon points='0,-28 7,-9 26,-9 11,3 17,22 0,12 -17,22 -11,3 -26,-9 -7,-9' fill='none' stroke='%237B2FF2' stroke-width='1.5'/><circle r='7' fill='%234A6CF7' opacity='0.4'/></g><text x='180' y='80' font-size='18' fill='%234A6CF7' opacity='0.12'>⛩</text><text x='420' y='130' font-size='22' fill='%237B2FF2' opacity='0.1'>☯</text><text x='250' y='150' font-size='14' fill='%23B3C5FF' opacity='0.2'>✦</text><text x='370' y='70' font-size='16' fill='%234A6CF7' opacity='0.12'>◈</text><text x='300' y='88' class='txt-main'><tspan>⛩ 呪力解析中 ⛩</tspan><animate attributeName='opacity' values='0.6;1;0.6' dur='3s' repeatCount='indefinite'/></text><text x='300' y='116' class='txt-sub'><tspan>[ CURSED ENERGY ANALYZING ]</tspan></text><rect x='218' y='130' width='164' height='7' rx='3.5' fill='none' stroke='%23B3C5FF' stroke-width='0.8' opacity='0.5'/><rect x='220' y='131.5' width='160' height='4' rx='2' fill='%23E4EBFF' opacity='0.5'/><rect x='220' y='131.5' height='4' rx='2' fill='url(%23bG)' opacity='0.6'><animate attributeName='width' values='0;160;0' dur='4s' repeatCount='indefinite'/></rect><text x='205' y='138' class='txt-gauge'>0</text><text x='395' y='138' class='txt-gauge'>MAX</text></svg>");
}
cot:has(postition[stop]), cot:has(+ postition[stop]), cot:has(~ postition[stop]) {
  animation: cot-text-vanish 800ms ease forwards;
}
cot:has(postition[stop])::before, cot:has(+ postition[stop])::before, cot:has(~ postition[stop])::before {
  animation-play-state: paused !important; opacity: 0;
  transition: opacity 0.6s ease; content: none !important; background: none !important;
}

/* --- 2.2. 载入动画 --- */
.style_dot-flashing__8L91Q { display: none !important; }
div:has(> .style_dot-flashing__8L91Q.style_text__zGhNq) {
  width: 100% !important; height: auto !important; min-height: 140px !important;
  display: flex !important; flex-direction: column !important;
  justify-content: center !important; align-items: center !important;
  background: radial-gradient(circle, rgba(248,250,255,0.95) 0%, rgba(240,243,255,0.9) 100%) !important;
  border: 1px solid rgba(74, 108, 247, 0.2) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 6px 20px rgba(26,31,54,0.06), inset 0 0 30px rgba(255,255,255,0.7) !important;
  position: relative !important; overflow: hidden !important;
}
div:has(> .style_dot-flashing__8L91Q.style_text__zGhNq)::before {
  content: '' !important; position: absolute !important;
  top: 50% !important; left: 50% !important;
  transform: translate(-50%, -55%) !important;
  width: 90px !important; height: 90px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='sG' x1='0' y1='0' x2='1' y2='1'><stop offset='0%25' stop-color='%23B3C5FF'/><stop offset='50%25' stop-color='%234A6CF7'/><stop offset='100%25' stop-color='%237B2FF2'/></linearGradient></defs><g opacity='0.6'><animateTransform attributeName='transform' type='rotate' from='0 50 50' to='360 50 50' dur='6s' repeatCount='indefinite'/><polygon points='50,15 58,35 80,35 62,48 70,68 50,55 30,68 38,48 20,35 42,35' fill='none' stroke='url(%23sG)' stroke-width='2' opacity='0.7'/></g><circle cx='50' cy='50' r='8' fill='%234A6CF7' opacity='0.4'><animate attributeName='r' values='6;10;6' dur='2s' repeatCount='indefinite'/></circle><circle cx='50' cy='50' r='4' fill='%23B3C5FF' opacity='0.9'/></svg>") !important;
  background-size: contain !important; background-repeat: no-repeat !important;
  background-position: center !important;
}
div:has(> .style_dot-flashing__8L91Q.style_text__zGhNq)::after {
  content: '⛩ 呪力解析中...' !important;
  position: absolute !important; bottom: 18px !important;
  left: 50% !important; transform: translateX(-50%) !important;
  font-family: 'Georgia', 'Noto Serif SC', serif !important;
  font-size: 13px !important; font-weight: 700 !important;
  color: #7B2FF2 !important; letter-spacing: 0.25em !important;
  animation: loading-text-breathe 2.5s ease-in-out infinite !important;
  text-shadow: 0 0 8px rgba(123,47,242,0.4) !important;
}

/* --- 2.3. 顶部导航栏 — 咒纹流光版 --- */
.sticky.w-full.top-0.flex.items-center {
  background: linear-gradient(180deg,
    rgba(248,250,255,0.97) 0%,
    rgba(244,246,255,0.95) 50%,
    rgba(240,243,255,0.93) 100%) !important;
  border-bottom: none !important;
  box-shadow:
    0 1px 0 rgba(74,108,247,0.15),
    0 4px 24px rgba(74,108,247,0.08) !important;
  backdrop-filter: blur(20px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.2) !important;
  z-index: 19 !important; position: relative !important; overflow: hidden !important;
  min-height: 52px !important;
}

/* ── 咒纹粒子层 — 几何咒印飘动 ── */
.sticky.w-full.top-0.flex.items-center::before {
  content: '' !important;
  position: absolute !important; top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  pointer-events: none !important; z-index: 1 !important; opacity: 1 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 56' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3CradialGradient id='p1'%3E%3Cstop offset='0%25' stop-color='%234A6CF7' stop-opacity='0.7'/%3E%3Cstop offset='100%25' stop-color='%234A6CF7' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='p2'%3E%3Cstop offset='0%25' stop-color='%237B2FF2' stop-opacity='0.6'/%3E%3Cstop offset='100%25' stop-color='%237B2FF2' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cg%3E%3Crect x='0' y='0' width='4' height='4' fill='%234A6CF7' opacity='0' transform='rotate(45)'%3E%3CanimateMotion dur='8s' repeatCount='indefinite' path='M80,-8 C95,10 115,25 90,50'/%3E%3Canimate attributeName='opacity' values='0;0.5;0.3;0' dur='8s' repeatCount='indefinite'/%3E%3CanimateTransform attributeName='transform' type='rotate' values='0;180;360' dur='8s' repeatCount='indefinite'/%3E%3C/rect%3E%3C/g%3E%3Cg%3E%3Crect x='0' y='0' width='3.5' height='3.5' fill='%237B2FF2' opacity='0' transform='rotate(45)'%3E%3CanimateMotion dur='10s' repeatCount='indefinite' path='M300,-10 C280,12 310,30 285,52' begin='1s'/%3E%3Canimate attributeName='opacity' values='0;0.4;0.25;0' dur='10s' repeatCount='indefinite' begin='1s'/%3E%3CanimateTransform attributeName='transform' type='rotate' values='0;270;360' dur='10s' repeatCount='indefinite' begin='1s'/%3E%3C/rect%3E%3C/g%3E%3Cg%3E%3Ccircle r='2' fill='%234A6CF7' opacity='0'%3E%3CanimateMotion dur='7s' repeatCount='indefinite' path='M550,-6 C570,12 560,28 540,48' begin='2.5s'/%3E%3Canimate attributeName='opacity' values='0;0.6;0.3;0' dur='7s' repeatCount='indefinite' begin='2.5s'/%3E%3C/circle%3E%3C/g%3E%3Cg%3E%3Ccircle r='1.5' fill='%237B2FF2' opacity='0'%3E%3CanimateMotion dur='12s' repeatCount='indefinite' path='M700,-8 C720,6 710,24 690,46' begin='4s'/%3E%3Canimate attributeName='opacity' values='0;0.45;0.2;0' dur='12s' repeatCount='indefinite' begin='4s'/%3E%3C/circle%3E%3C/g%3E%3Ctext x='60' y='38' font-size='10' fill='%234A6CF7' opacity='0.08' font-family='Georgia'%3E%E2%9B%A9%3C/text%3E%3Ctext x='740' y='20' font-size='9' fill='%237B2FF2' opacity='0.1' font-family='Georgia'%3E%E2%98%AF%3C/text%3E%3C/svg%3E") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
}

/* 底部咒力流光线 */
.sticky.w-full.top-0.flex.items-center::after {
  content: '' !important; position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important; height: 2px !important;
  background: linear-gradient(90deg,
    transparent 0%, rgba(179,197,255,0.4) 10%,
    rgba(74,108,247,0.65) 25%, rgba(179,197,255,0.8) 40%,
    rgba(123,47,242,0.5) 50%, rgba(179,197,255,0.8) 60%,
    rgba(74,108,247,0.65) 75%, rgba(179,197,255,0.4) 90%,
    transparent 100%) !important;
  background-size: 200% 100% !important;
  animation: header-flow-line 6s linear infinite !important;
  z-index: 10 !important;
  box-shadow: 0 0 6px rgba(74,108,247,0.3), 0 0 12px rgba(123,47,242,0.2) !important;
}

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

/* 模型选择器 */
#ai-model-selector .group {
  background: rgba(255,255,255,0.8) !important;
  border: 1px solid rgba(74,108,247,0.2) !important;
  border-left: 2px solid #4A6CF7 !important;
  border-radius: 12px !important;
  padding: 0 12px !important; height: 2.0rem !important;
  transition: all 0.4s ease !important;
  box-shadow: 0 1px 6px rgba(74,108,247,0.08) !important;
  margin: 0 8px !important;
}
#ai-model-selector .group:hover {
  border-color: #7B2FF2 !important;
  background: rgba(255,255,255,0.98) !important;
  box-shadow: 0 2px 12px rgba(123,47,242,0.18) !important;
}
#ai-model-selector .truncate {
  font-size: 13px !important; font-weight: 700 !important;
  color: #7B2FF2 !important;
  font-family: 'Georgia', 'Noto Serif SC', serif !important;
  letter-spacing: 1.2px !important; transition: color 0.4s ease !important;
}
#ai-model-selector .group:hover .truncate { color: #4A6CF7 !important; }
#ai-model-selector svg { color: #B3C5FF !important; transition: all 0.4s ease !important; }
#ai-model-selector .group:hover svg { color: #7B2FF2 !important; transform: rotate(180deg) !important; }

/* 标签按钮 */
.sticky.w-full.top-0.flex.items-center .inline-flex.items-center {
  background: rgba(255,255,255,0.7) !important;
  color: #7B2FF2 !important;
  border: 1px solid rgba(74,108,247,0.2) !important;
  font-size: 0.75rem !important; font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  border-radius: 12px !important;
  padding: 4px 10px !important;
  box-shadow: 0 1px 4px rgba(74,108,247,0.08) !important;
  transition: all 0.4s ease !important;
  position: relative !important; overflow: hidden !important;
}
.sticky.w-full.top-0.flex.items-center .inline-flex.items-center::before {
  content: '' !important; position: absolute !important;
  top: 0 !important; left: -100% !important;
  width: 100% !important; height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(179,197,255,0.25), transparent) !important;
  transition: left 0.7s ease !important;
}
.sticky.w-full.top-0.flex.items-center .inline-flex.items-center:hover {
  background: rgba(255,255,255,0.95) !important;
  border-color: #4A6CF7 !important; color: #4A6CF7 !important;
  text-shadow: 0 0 8px rgba(74,108,247,0.3) !important;
  box-shadow: 0 2px 10px rgba(74,108,247,0.2) !important;
}
.sticky.w-full.top-0.flex.items-center .inline-flex.items-center:hover::before { left: 100% !important; }

/* 设置按钮 */
#header-setting-button {
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.8) !important;
  border: 1px solid rgba(212, 90, 31, 0.3) !important;
  transition: all 0.4s ease !important;
}
#header-setting-button:hover {
  border-color: #4A6CF7 !important;
  background: rgba(74,108,247,0.1) !important;
  box-shadow: 0 0 15px rgba(74,108,247,0.25) !important;
}
#header-setting-button svg { color: #7B2FF2 !important; transition: all 0.7s ease !important; }
#header-setting-button:hover svg { color: #4A6CF7 !important; transform: rotate(90deg) !important; }

/* --- 2.4. 输入框与底部按钮 --- */
.p-\[5\.5px\].max-h-\[150px\] {
  background: rgba(255,255,255,0.95) !important;
  border: 1px solid rgba(74,108,247,0.2) !important;
  border-radius: 16px !important;
  box-shadow: 0 -4px 15px rgba(26,31,54,0.06);
  padding: 8px !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  width: 100% !important; max-width: 100% !important; margin: 0 !important;
}

#ai-chat-input {
  background: #F8FAFF !important;
  border-radius: 12px !important;
  border: 1px solid rgba(74,108,247,0.25) !important;
  font-family: 'Georgia', 'Noto Serif SC', serif !important;
  font-size: 15px !important; line-height: 1.5 !important;
  color: #1A1F36 !important; caret-color: #4A6CF7 !important;
  padding: 10px 50px 10px 12px !important;
  height: auto !important; max-height: 150px !important;
  resize: none !important; outline: none !important;
  transition: all 0.4s ease;
  field-sizing: content !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  -webkit-appearance: none !important; appearance: none !important;
  -webkit-text-size-adjust: 100% !important;
  white-space: pre-wrap !important; word-break: break-word !important;
  box-shadow: inset 0 2px 8px rgba(74,108,247,0.04);
}
#ai-chat-input::placeholder { color: #B3C5FF !important; opacity: 0.8; }
#ai-chat-input:focus {
  border-color: #4A6CF7 !important;
  box-shadow: 0 0 10px rgba(74,108,247,0.2), inset 0 2px 8px rgba(74,108,247,0.04) !important;
  background: #FFFFFF !important;
}

.p-\[5\.5px\].max-h-\[150px\] .flex.items-center.px-1 {
  background: rgba(74,108,247,0.08) !important; color: #7B2FF2 !important;
  border-radius: 8px !important; border: 1px solid rgba(74,108,247,0.2) !important;
}
.p-\[5\.5px\].max-h-\[150px\] .mx-1 { background: rgba(74,108,247,0.15) !important; }

/* ============================================================
 * ⛩ 咒印发送按钮
 * ============================================================ */

@keyframes note-btn-idle {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  40%       { transform: translateY(-3px) rotate(3deg); }
  70%       { transform: translateY(-1px) rotate(-1deg); }
}
@keyframes note-btn-hover {
  0%   { transform: scale(1.08) rotate(-3deg); }
  50%  { transform: scale(1.13) rotate(5deg); }
  100% { transform: scale(1.08) rotate(-3deg); }
}
@keyframes note-btn-press {
  0%   { transform: scale(1.08); }
  35%  { transform: scale(0.88); }
  75%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}
@keyframes note-btn-ripple {
  0%   { transform: translate(-50%,-50%) scale(0); opacity: 0.55; }
  100% { transform: translate(-50%,-50%) scale(3); opacity: 0; }
}
@keyframes note-glow-pulse {
  0%, 100% {
    box-shadow:
      0 3px 14px rgba(74,108,247,0.38),
      0 0 0 3px rgba(74,108,247,0.08),
      inset 0 1px 0 rgba(255,255,255,0.35);
  }
  50% {
    box-shadow:
      0 5px 22px rgba(123,47,242,0.5),
      0 0 0 5px rgba(74,108,247,0.13),
      inset 0 1px 0 rgba(255,255,255,0.4);
  }
}

#ai-send-button {
  border-radius: 50% !important;
  width: 38px !important; height: 38px !important;
  padding: 0 !important; flex-shrink: 0 !important;
  position: relative !important; overflow: visible !important;
  background: linear-gradient(145deg,
    #B3C5FF 0%, #4A6CF7 50%, #7B2FF2 100%) !important;
  border: 2px solid rgba(255,255,255,0.55) !important;
  box-shadow:
    0 3px 14px rgba(74,108,247,0.38),
    0 0 0 3px rgba(74,108,247,0.08),
    inset 0 1px 0 rgba(255,255,255,0.35) !important;
  animation:
    note-btn-idle   3.6s ease-in-out infinite,
    note-glow-pulse 3.6s ease-in-out infinite !important;
  transition: border-color 0.3s ease !important;
  color: transparent !important; cursor: pointer !important;
}
#ai-send-button svg { opacity: 0 !important; pointer-events: none !important; }

/* ⛩ 咒印图标 */
#ai-send-button::before {
  content: '' !important;
  position: absolute !important; top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 20px !important; height: 20px !important;
  pointer-events: none !important; z-index: 2 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='%23fff' opacity='0.96'%3E%3Cpolygon points='10,1 12.5,7.5 19,7.5 13.5,12 15.5,18.5 10,14.5 4.5,18.5 6.5,12 1,7.5 7.5,7.5'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: contain !important; background-repeat: no-repeat !important;
  background-position: center !important;
  transition: transform 0.3s ease, filter 0.3s ease !important;
  filter: drop-shadow(0 1px 2px rgba(30,20,80,0.25)) !important;
}

#ai-send-button::after {
  content: '' !important;
  position: absolute !important; top: 50% !important; left: 50% !important;
  width: 38px !important; height: 38px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle,
    rgba(255,255,255,0.55) 0%,
    rgba(74,108,247,0.3) 50%,
    transparent 70%) !important;
  transform: translate(-50%,-50%) scale(0) !important;
  opacity: 0 !important; pointer-events: none !important;
  z-index: 1 !important; transition: none !important;
}

#ai-send-button:hover {
  background: linear-gradient(145deg,
    #8BA0F7 0%, #3B5DE7 45%, #6A1FD2 100%) !important;
  border-color: rgba(255,255,255,0.75) !important;
  box-shadow:
    0 6px 22px rgba(123,47,242,0.52),
    0 0 0 5px rgba(74,108,247,0.16),
    inset 0 1px 0 rgba(255,255,255,0.45) !important;
  animation: note-btn-hover 1s ease-in-out infinite !important;
}
#ai-send-button:hover::before {
  transform: translate(-50%,-50%) scale(1.15) !important;
  filter: drop-shadow(0 2px 4px rgba(30,10,60,0.3)) brightness(1.05) !important;
}
#ai-send-button:active {
  animation: note-btn-press 0.38s cubic-bezier(0.36,0.07,0.19,0.97) forwards !important;
  background: linear-gradient(145deg,
    #4A6CF7 0%, #7B2FF2 50%, #5A1FC2 100%) !important;
}
#ai-send-button:active::after {
  animation: note-btn-ripple 0.48s ease-out forwards !important;
}

@media (prefers-reduced-motion: reduce) {
  #ai-send-button          { animation: none !important; }
  #ai-send-button:hover    { animation: none !important; transform: scale(1.08) !important; }
  #ai-send-button:active   { animation: none !important; transform: scale(0.94) !important; }
  #ai-send-button:active::after { animation: none !important; }
}
@media (max-width: 768px) {
  #ai-send-button {
    width: 36px !important; height: 36px !important;
    animation: none !important;
    box-shadow: 0 2px 10px rgba(74,108,247,0.35), inset 0 1px 0 rgba(255,255,255,0.3) !important;
  }
  #ai-send-button::before { width: 18px !important; height: 18px !important; }
  #ai-send-button:hover    { animation: none !important; transform: none !important; }
  #ai-send-button:active::after { animation: none !important; }
}

div[class*="absolute"][class*="bottom-0"] {
  background: linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(240,243,255,0.98) 100%);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(74,108,247,0.2);
  box-shadow: 0 -4px 15px rgba(26,31,54,0.06); color: #1A1F36;
}
div[class*="absolute"][class*="bottom-0"]::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(74,108,247,0.4), transparent);
  animation: panel-light-sweep 7s ease-in-out infinite; animation-delay: 1.5s; opacity: 0.6;
}
div[class*="absolute"][class*="bottom-0"]::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='dotGrid' width='20' height='20' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='10' cy='10' r='0.8' fill='%234A6CF7' opacity='0.05'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='60' height='60' fill='url(%23dotGrid)'/%3E%3C/svg%3E");
  animation: petal-drift 100s linear infinite; opacity: 0.5;
  pointer-events: none; z-index: -1;
}
div[class*="absolute"][class*="bottom-0"] button:not([id="ai-send-button"]) {
  background: #F8FAFF; border: 1px solid rgba(74,108,247,0.25);
  border-radius: 12px; color: #1A1F36;
  font-family: 'Georgia', 'Noto Serif SC', serif;
  font-weight: 600; font-size: 14px; text-shadow: none;
  box-shadow: 0 2px 8px rgba(26,31,54,0.06);
  transition: all 0.3s ease; position: relative; overflow: hidden;
}
div[class*="absolute"][class*="bottom-0"] button:not([id="ai-send-button"])::before {
  content: ''; position: absolute; top: -15%; left: -170%; width: 50%; height: 130%;
  background: linear-gradient(90deg, transparent, rgba(179,197,255,0.25), transparent);
  transform: skewX(-30deg); transition: left 0.8s ease-in-out;
}
div[class*="absolute"][class*="bottom-0"] button:not([id="ai-send-button"]):hover {
  transform: translateY(-2px); color: #7B2FF2;
  background: #FFFFFF; border-color: #4A6CF7;
  box-shadow: 0 4px 12px rgba(74,108,247,0.15), 0 0 8px rgba(179,197,255,0.25);
}
div[class*="absolute"][class*="bottom-0"] button:not([id="ai-send-button"]):hover::before { left: 170%; }
div[class*="absolute"][class*="bottom-0"] button:not([id="ai-send-button"]):active {
  transform: translateY(0); background: #E4EBFF; border-color: #4A6CF7;
  box-shadow: inset 0 0 6px rgba(74,108,247,0.15), 0 2px 6px rgba(26,31,54,0.06);
  transition-duration: 0.15s;
}

/* =============================================
 * 3. 通用 UI 模块
 * ============================================= */

/* --- 3.1. 聊天容器与气泡 --- */
.chat {
  display: flex; flex-direction: column; gap: 14px; padding: 16px 12px;
  background: #F0F3FF;
  border: 1px solid rgba(74,108,247,0.15);
  border-left: 3px solid #4A6CF7; border-right: 3px solid #7B2FF2;
  border-radius: 16px; margin: 16px 0; position: relative;
  font-family: 'Georgia', 'Noto Serif SC', serif;
  box-shadow: 0 3px 15px rgba(26,31,54,0.04), inset 0 0 20px rgba(248,250,255,0.9);
  overflow: hidden;
}
.chat::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cdefs%3E%3Cpattern id='cursedBg' width='80' height='80' patternUnits='userSpaceOnUse'%3E%3Crect x='39' y='39' width='2' height='2' fill='%234A6CF7' opacity='0.04' transform='rotate(45 40 40)'/%3E%3Ccircle cx='10' cy='10' r='1' fill='%23B3C5FF' opacity='0.05'/%3E%3Ccircle cx='70' cy='20' r='1' fill='%237B2FF2' opacity='0.03'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='80' height='80' fill='url(%23cursedBg)'/%3E%3C/svg%3E");
  animation: petal-drift 30s linear infinite; opacity: 0.5;
  pointer-events: none; z-index: 0; will-change: background-position;
}
.chat::after { display: none !important; }
.chat > * { position: relative; z-index: 1; }

.bubble {
  max-width: 90%; padding: 10px 14px; position: relative; line-height: 1.6;
  word-wrap: break-word; border-radius: 16px;
  box-shadow: 0 2px 8px rgba(26,31,54,0.06);
  transition: transform 0.4s ease, box-shadow 0.4s ease; overflow: visible;
}
.bubble:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(26,31,54,0.1); }

.bubble.npc {
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(74,108,247,0.2);
  border-left: 3px solid #4A6CF7; color: #1A1F36; align-self: flex-start;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.bubble.npc::after {
  content: '⛩'; position: absolute; top: 6px; right: 8px;
  font-size: 10px; animation: ribbon-breathe 3s ease-in-out infinite; z-index: 2;
}
.bubble.npc .name { color: #7B2FF2; }
.bubble.npc .name::before { color: #4A6CF7; animation: star-flash 3.5s steps(1, end) infinite; }
.bubble.npc .msg { color: #1A1F36; }

.bubble.user {
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(123,47,242,0.2);
  border-right: 3px solid #7B2FF2; color: #1A1F36; align-self: flex-end;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.bubble.user::after {
  content: '◈'; position: absolute; top: 6px; left: 8px;
  font-size: 11px; color: #7B2FF2;
  animation: ribbon-breathe 3s ease-in-out infinite; z-index: 2;
}
.bubble.user .name { color: #7B2FF2; }
.bubble.user .name::before { color: #7B2FF2; animation: star-flash 3.5s steps(1, end) infinite 0.3s; }
.bubble.user .msg { color: #1A1F36; }

.bubble .name {
  font-size: 0.8em; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; margin-bottom: 6px; display: block;
  position: relative; padding-left: 16px; z-index: 1;
  font-family: 'Georgia', 'Noto Serif SC', serif;
}
.bubble .name::before {
  content: '◈'; position: absolute; left: 0; font-size: 1.1em; display: inline-block;
}
.bubble .msg { margin: 0; font-size: 0.95em; font-weight: 500; position: relative; z-index: 1; }

/* --- 3.2. 通用内容容器 --- */
.styled-prose-container {
  font-family: 'Georgia', 'Noto Serif SC', serif;
  position: relative; z-index: 1; color: #1A1F36;
}
.styled-prose-container br { line-height: 1.4; }

/* =============================================
 * 气泡装饰补丁 — 咒术回战主题
 * ============================================= */
.bg-gray-100\/90.relative.inline-block {
  position: relative !important; isolation: isolate !important; overflow: visible !important;
}

/* AI回答气泡 */
.chat-answer-container .bg-gray-100\/90.relative.inline-block {
  background: rgba(248,250,255,0.95) !important;
  color: #1A1F36 !important; border-radius: 16px !important;
  border: 1px solid rgba(74,108,247,0.15) !important;
  box-shadow: 0 8px 25px -10px rgba(26,31,54,0.08) !important;
  backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important;
}
.chat-answer-container .bg-gray-100\/90.relative.inline-block::before,
.chat-answer-container .bg-gray-100\/90.relative.inline-block::after {
  content: none !important;
}

/* 用户消息气泡 */
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) {
  background: linear-gradient(145deg,
    rgba(255,255,255,0.98) 0%,
    rgba(248,250,255,0.95) 50%,
    rgba(255,255,255,0.98) 100%) !important;
  border: 1px solid rgba(123,47,242,0.15) !important;
  box-shadow:
    0 6px 24px rgba(123,47,242,0.08),
    0 0 40px rgba(179,197,255,0.08),
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(74,108,247,0.04) !important;
  border-radius: 16px !important; color: #1A1F36 !important;
  backdrop-filter: blur(15px) !important; -webkit-backdrop-filter: blur(15px) !important;
}

/* 用户气泡 — 右上角咒力核心装饰 */
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90)::before {
  content: '' !important; position: absolute !important;
  top: -6px !important; right: -6px !important;
  width: 28px !important; height: 28px !important;
  pointer-events: none !important; z-index: 100 !important;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'><defs><linearGradient id='eG' x1='0%25' y1='100%25' x2='100%25' y2='0%25'><stop offset='0%25' stop-color='%234A6CF7' stop-opacity='0.8'/><stop offset='100%25' stop-color='%237B2FF2' stop-opacity='0.5'/></linearGradient></defs><g><animateTransform attributeName='transform' type='rotate' from='0 14 14' to='360 14 14' dur='20s' repeatCount='indefinite'/><polygon points='14,2 16,10 24,10 17.5,15 20,23 14,18 8,23 10.5,15 4,10 12,10' fill='url(%23eG)' opacity='0.5'/></g><circle cx='14' cy='14' r='3' fill='%234A6CF7' opacity='0.6'><animate attributeName='r' values='2.5;3.5;2.5' dur='2s' repeatCount='indefinite'/></circle></svg>") !important;
  background-size: contain !important; background-repeat: no-repeat !important;
  opacity: 0.85 !important; animation: user-cursed-flicker 3s ease-in-out infinite !important;
}

/* 用户气泡 — 左下角咒力余波装饰 */
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90)::after {
  content: '' !important; position: absolute !important;
  bottom: -8px !important; left: -8px !important;
  width: 70px !important; height: 70px !important;
  pointer-events: none !important; z-index: 100 !important;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 70'><defs><linearGradient id='rG' x1='0%25' y1='0%25' x2='100%25' y2='100%25'><stop offset='0%25' stop-color='%23B3C5FF' stop-opacity='0.4'/><stop offset='100%25' stop-color='%234A6CF7' stop-opacity='0.2'/></linearGradient></defs><text x='10' y='55' font-size='18' fill='%234A6CF7' opacity='0.2' font-family='Georgia'>✦</text><text x='32' y='38' font-size='12' fill='%237B2FF2' opacity='0.15' font-family='Georgia'>◈</text><circle cx='50' cy='25' r='3' fill='%234A6CF7' opacity='0.12'><animate attributeName='cy' values='25;20;25' dur='3s' repeatCount='indefinite'/><animate attributeName='opacity' values='0.12;0.06;0.12' dur='3s' repeatCount='indefinite'/></circle></svg>") !important;
  background-size: contain !important; background-repeat: no-repeat !important;
  opacity: 0.7 !important; animation: user-aura-pulse 12s ease-in-out infinite !important;
}

div.group.relative > div.relative.inline-block.bg-gray-100\/90 > * {
  position: relative !important; z-index: 1 !important;
}

/* --- 3.3. 折叠面板 (Details) --- */
.styled-prose-container details {
  background: #F8FAFF; border-radius: 12px; margin: 12px 0; overflow: visible;
  position: relative; border: 1px solid rgba(74,108,247,0.12);
  box-shadow: 0 4px 12px rgba(26,31,54,0.04);
  transition: all 0.4s ease; font-size: 15px; line-height: 1.6;
  padding: 0 16px 12px 16px;
}
.styled-prose-container details:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(26,31,54,0.07);
  border-color: rgba(74,108,247,0.25);
}
.styled-prose-container details:has(T:hover) { z-index: 100; }
.styled-prose-container details summary {
  background: transparent; padding: 12px 40px 12px 16px; margin: 0 -16px;
  font-weight: 700; font-size: 16px; cursor: pointer; color: #1A1F36;
  letter-spacing: 1.2px; position: relative; list-style: none;
  border-bottom: 1px solid rgba(74,108,247,0.08);
  transition: all 0.4s ease; font-family: 'Georgia', 'Noto Serif SC', serif;
}
.styled-prose-container details summary::-webkit-details-marker { display: none; }
.styled-prose-container details summary::before {
  content: ''; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px;
  border-right: 2px solid #4A6CF7; border-bottom: 2px solid #4A6CF7;
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.4s ease, border-color 0.4s ease;
}
.styled-prose-container details summary:hover::before { border-color: #7B2FF2; }
.styled-prose-container details[open] > summary {
  background: rgba(179,197,255,0.1);
  border-bottom-color: rgba(74,108,247,0.15);
  color: #7B2FF2; padding-top: 12px; margin-bottom: 12px;
  animation: scroll-reveal 0.5s ease-out;
}
.styled-prose-container details[open] > summary::before { transform: translateY(-50%) rotate(225deg); }
.styled-prose-container details > *:not(summary) {
  padding: 0; line-height: inherit; font-size: inherit; color: inherit; background: transparent;
}
.styled-prose-container details > summary {
  text-align: center !important; justify-content: center !important;
  font-family: 'Georgia', 'Noto Serif SC', serif !important;
  font-weight: 700 !important; letter-spacing: 3px !important;
}
.styled-prose-container details > summary::before {
  position: absolute !important; left: 16px !important; right: auto !important;
}

/* --- 3.4. Tooltip 标签 (T & Ti) --- */
.styled-prose-container T {
  position: static !important; display: inline-block;
  margin-bottom: 4px; margin-right: 6px; cursor: help;
  color: #2D2B55 !important; font-weight: 600; text-decoration: none;
  border-bottom: 1px dashed rgba(74,108,247,0.35);
  padding: 2px 8px; background: rgba(74,108,247,0.05);
  border-radius: 6px; transition: all 0.4s ease;
}
.styled-prose-container T::before { content: ""; }
.styled-prose-container T:hover {
  background: rgba(74,108,247,0.12); color: #7B2FF2 !important;
  border-bottom-style: solid; z-index: 100;
}
.styled-prose-container T Ti {
  display: block !important; visibility: hidden; opacity: 0;
  left: 0 !important; right: 0 !important; margin: 0 auto !important;
  width: max-content !important; max-width: 90% !important;
  top: auto !important; bottom: auto !important;
  transform: translateY(-100%) translateY(-10px) !important;
  white-space: normal; text-align: left;
  background: rgba(255,255,255,0.98); color: #1A1F36;
  border-radius: 12px !important;
  border: 1px solid rgba(74,108,247,0.3);
  border-left: 3px solid #4A6CF7;
  padding: 12px 16px; font-size: 0.85em; font-weight: 500;
  line-height: 1.6; font-family: 'Georgia', 'Noto Serif SC', serif;
  box-shadow: 0 8px 25px rgba(26,31,54,0.12), inset 0 0 15px rgba(240,243,255,0.5);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none; position: absolute; z-index: 99999;
  background-image: linear-gradient(90deg, rgba(74,108,247,0.3) 0%, transparent 50%);
  background-size: 100% 1px; background-repeat: no-repeat; background-position: top left;
}
.styled-prose-container T Ti::before {
  content: '⛩ 呪術档案 //'; display: block; font-size: 0.75em;
  color: #7B2FF2; margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 1px solid rgba(123,47,242,0.2);
  letter-spacing: 2px; font-weight: 700;
  font-family: 'Georgia', 'Noto Serif SC', serif;
}
.styled-prose-container T:hover Ti {
  visibility: visible; opacity: 1;
  transform: translateY(-100%) translateY(-10px) !important;
}
.styled-prose-container T Ti > span {
  display: inline-block; color: #7B2FF2; font-weight: 700; margin-right: 8px;
}

/* --- 3.5. 列表与卡片品质着色 --- */
.styled-prose-container [class*=card-body-] {
  margin: 2px 0; padding: 0; border-radius: 6px;
  background-color: transparent; border: none; transition: all 0.4s ease;
}
.styled-prose-container item_list [class*=card-body-rumen] T,
.styled-prose-container spell_card_list [class*=card-body-rumen] T { color: var(--color-rumen) !important; display: inline-block; }
.styled-prose-container item_list [class*=card-body-zhongduan] T,
.styled-prose-container spell_card_list [class*=card-body-zhongduan] T { color: var(--color-zhongduan) !important; display: inline-block; }
.styled-prose-container item_list [class*=card-body-gaoduan] T,
.styled-prose-container spell_card_list [class*=card-body-gaoduan] T { color: var(--color-gaoduan) !important; display: inline-block; }
.styled-prose-container item_list [class*=card-body-zhuanye] T,
.styled-prose-container spell_card_list [class*=card-body-zhuanye] T { color: var(--color-zhuanye) !important; display: inline-block; }
.styled-prose-container item_list [class*=card-body-chuanqi] T,
.styled-prose-container spell_card_list [class*=card-body-chuanqi] T { color: var(--color-chuanqi) !important; display: inline-block; }

.styled-prose-container [class*=card-body-rumen] T Ti     { border-color: rgba(107,114,128,0.30); }
.styled-prose-container [class*=card-body-zhongduan] T Ti  { border-color: rgba(72,187,120,0.35); }
.styled-prose-container [class*=card-body-gaoduan] T Ti    { border-color: rgba(74,108,247,0.35); }
.styled-prose-container [class*=card-body-zhuanye] T Ti    { border-color: rgba(123,47,242,0.35); }
.styled-prose-container [class*=card-body-chuanqi] T Ti    { border-color: rgba(229,62,62,0.40); box-shadow: 0 0 10px rgba(229,62,62,0.18), 0 8px 30px rgba(26,31,54,0.12); }

.styled-prose-container [class*=card-body-rumen] T Ti span:first-child     { color: var(--color-rumen) !important; }
.styled-prose-container [class*=card-body-zhongduan] T Ti span:first-child  { color: var(--color-zhongduan) !important; }
.styled-prose-container [class*=card-body-gaoduan] T Ti span:first-child    { color: var(--color-gaoduan) !important; }
.styled-prose-container [class*=card-body-zhuanye] T Ti span:first-child    { color: var(--color-zhuanye) !important; }
.styled-prose-container [class*=card-body-chuanqi] T Ti span:first-child    { color: var(--color-chuanqi) !important; }

/* =============================================
 * 4. 特殊内容模块 (Part 1)
 * ============================================= */

/* --- 4.1. 侧边栏定位修正 --- */
#ai-chat-answer:last-of-type:has(.env-sidebar, .u, .n, .p, .ship, .m) .chat,
#ai-chat-answer:last-of-type:has(.env-sidebar, .u, .n, .p, .ship, .m) .bubble,
#ai-chat-answer:last-of-type:has(.env-sidebar, .u, .n, .p, .ship, .m) div.group.relative > div.relative.inline-block.bg-gray-100\/90 {
  transform: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}

/* --- 4.2. 顶部信息 --- */
.top-info {
  display: flex !important; flex-direction: column !important; gap: 0 !important;
  margin: 16px 0 !important; padding: 0 !important;
  font-family: 'Georgia', 'Noto Serif SC', serif !important;
  background: linear-gradient(180deg, rgba(248,250,255,0.98) 0%, rgba(244,246,255,0.95) 100%) !important;
  border: 1px solid rgba(74,108,247,0.12) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 15px rgba(26,31,54,0.04), inset 0 0 30px rgba(255,255,255,0.5) !important;
  position: relative !important; overflow: hidden !important;
}
.top-info::before {
  content: '' !important; position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; height: 2px !important;
  background: linear-gradient(90deg, transparent 5%, #B3C5FF 25%, #4A6CF7 50%, #7B2FF2 75%, transparent 95%) !important;
  pointer-events: none !important;
}
.top-info > time, .top-info > position, .top-info > env {
  display: block !important; position: relative !important;
  padding: 12px 16px 12px 70px !important;
  font-size: 14px !important; font-weight: 600 !important; color: #1A1F36 !important;
  line-height: 1.7 !important; letter-spacing: 1.5px !important;
  background: transparent !important;
  border-bottom: 1px dashed rgba(74,108,247,0.1) !important;
  transition: all 0.3s ease !important;
}
.top-info > *:last-child { border-bottom: none !important; }
.top-info > *:hover { background: rgba(74,108,247,0.02) !important; }
.top-info > *::before {
  position: absolute !important; left: 14px !important; top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 12px !important; font-weight: 700 !important; color: #fff !important;
  letter-spacing: 1px !important; padding: 4px 8px !important;
  border-radius: 8px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important; white-space: nowrap !important;
}
.top-info > time::before {
  content: '時刻' !important;
  background: linear-gradient(135deg, #4A6CF7, #5E7DF8) !important;
  box-shadow: 0 2px 6px rgba(74,108,247,0.3) !important;
}
.top-info > position::before {
  content: '方位' !important;
  background: linear-gradient(135deg, #7B2FF2, #8E4AF5) !important;
  box-shadow: 0 2px 6px rgba(123,47,242,0.3) !important;
}
.top-info > env::before {
  content: '場景' !important;
  background: linear-gradient(135deg, #38B2AC, #4DC0B5) !important;
  box-shadow: 0 2px 6px rgba(56,178,172,0.3) !important;
}

/* --- 4.3. 侧边栏模块 --- */
@keyframes sidebar-tab-glow {
  0%, 100% { box-shadow: -2px 2px 12px rgba(74,108,247,0.25); }
  50%  { box-shadow: -2px 2px 20px rgba(74,108,247,0.5), inset 0 0 20px rgba(255,255,255,0.08); }
}
@keyframes sidebar-tab-glow-green {
  0%, 100% { box-shadow: -2px 2px 12px rgba(72,187,120,0.25); }
  50%  { box-shadow: -2px 2px 20px rgba(72,187,120,0.5), inset 0 0 20px rgba(255,255,255,0.08); }
}
@keyframes sidebar-tab-glow-blue {
  0%, 100% { box-shadow: -2px 2px 12px rgba(56,178,172,0.25); }
  50%  { box-shadow: -2px 2px 20px rgba(56,178,172,0.5), inset 0 0 20px rgba(255,255,255,0.08); }
}

.styled-prose-container .env-sidebar,
.styled-prose-container .u,
.styled-prose-container .n,
.styled-prose-container details.p,
.styled-prose-container details.ship,
.styled-prose-container details.m {
  position: relative !important; width: 100% !important;
  margin: 16px 0 !important; padding: 0 !important;
  font-family: 'Georgia', 'Noto Serif SC', serif !important;
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(240,243,255,0.9) 100%) !important;
  border: 2px solid rgba(74,108,247,0.25) !important;
  border-radius: 12px !important; overflow: hidden !important;
  transition: all 0.35s ease !important; box-shadow: none !important;
}
.styled-prose-container details.ship {
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(240,255,245,0.9) 100%) !important;
  border-color: rgba(72,187,120,0.25) !important; border-left: 3px solid #48BB78 !important;
}
.styled-prose-container details.m {
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(240,250,248,0.9) 100%) !important;
  border-color: rgba(56,178,172,0.25) !important; border-left: 3px solid #38B2AC !important;
}
.styled-prose-container details.p { border-left: 3px solid #4A6CF7 !important; }
.styled-prose-container details.n { border-left: 3px solid #4A6CF7 !important; }

.styled-prose-container .env-sidebar > summary,
.styled-prose-container .u > summary,
.styled-prose-container .n > summary,
.styled-prose-container details.p > summary,
.styled-prose-container details.ship > summary,
.styled-prose-container details.m > summary {
  padding: 12px 16px !important;
  background: linear-gradient(90deg, rgba(74,108,247,0.08), rgba(179,197,255,0.12), rgba(74,108,247,0.08)) !important;
  color: #1A1F36 !important; font-weight: 700 !important; font-size: 14px !important;
  cursor: pointer !important; list-style: none !important; outline: none !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin: 0 !important; border-bottom: 1px solid rgba(74,108,247,0.15) !important;
  box-shadow: none !important; letter-spacing: 2px !important;
  writing-mode: horizontal-tb !important; text-orientation: mixed;
}
.styled-prose-container details.ship > summary {
  background: linear-gradient(90deg, rgba(72,187,120,0.08), rgba(160,230,180,0.12), rgba(72,187,120,0.08)) !important;
  color: #1A5A2A !important; border-bottom-color: rgba(72,187,120,0.15) !important;
}
.styled-prose-container details.m > summary {
  background: linear-gradient(90deg, rgba(56,178,172,0.08), rgba(150,220,215,0.12), rgba(56,178,172,0.08)) !important;
  color: #1A4A48 !important; border-bottom-color: rgba(56,178,172,0.15) !important;
}
.styled-prose-container .env-sidebar > summary::-webkit-details-marker,
.styled-prose-container .u > summary::-webkit-details-marker,
.styled-prose-container .n > summary::-webkit-details-marker,
.styled-prose-container details.p > summary::-webkit-details-marker,
.styled-prose-container details.ship > summary::-webkit-details-marker,
.styled-prose-container details.m > summary::-webkit-details-marker { display: none !important; }
.styled-prose-container .env-sidebar > summary:hover,
.styled-prose-container .u > summary:hover,
.styled-prose-container .n > summary:hover,
.styled-prose-container details.p > summary:hover {
  background: linear-gradient(90deg, rgba(74,108,247,0.15), rgba(179,197,255,0.2), rgba(74,108,247,0.15)) !important;
  color: #7B2FF2 !important;
}
.styled-prose-container details.ship > summary:hover {
  background: linear-gradient(90deg, rgba(72,187,120,0.15), rgba(160,230,180,0.2), rgba(72,187,120,0.15)) !important;
  color: #2D8A4D !important;
}
.styled-prose-container details.m > summary:hover {
  background: linear-gradient(90deg, rgba(56,178,172,0.15), rgba(150,220,215,0.2), rgba(56,178,172,0.15)) !important;
  color: #2A7A78 !important;
}

/* 最新消息中侧边栏悬浮 */
#ai-chat-answer:last-of-type .env-sidebar,
#ai-chat-answer:last-of-type .u,
#ai-chat-answer:last-of-type .n,
#ai-chat-answer:last-of-type details.p,
#ai-chat-answer:last-of-type details.ship,
#ai-chat-answer:last-of-type details.m {
  position: fixed !important; right: 0 !important; z-index: 9999 !important;
  width: auto !important; background: transparent !important; border: none !important;
  box-shadow: none !important; margin: 0 !important; padding: 0 !important;
  overflow: visible !important;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: none !important; filter: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
#ai-chat-answer:last-of-type .env-sidebar { top: 60px !important; }
#ai-chat-answer:last-of-type .u { top: 175px !important; }
#ai-chat-answer:last-of-type details.p  { top: 60px !important; }
#ai-chat-answer:last-of-type details.n  { top: 170px !important; }
#ai-chat-answer:last-of-type .n         { top: 170px !important; }
#ai-chat-answer:last-of-type details.ship { top: 280px !important; }
#ai-chat-answer:last-of-type details.m  { top: 395px !important; }

/* ── 折叠标签 — 咒术风差异化 ── */
#ai-chat-answer:last-of-type .env-sidebar:not([open]) > summary,
#ai-chat-answer:last-of-type .u:not([open]) > summary,
#ai-chat-answer:last-of-type .n:not([open]) > summary,
#ai-chat-answer:last-of-type details.p:not([open]) > summary,
#ai-chat-answer:last-of-type details.ship:not([open]) > summary,
#ai-chat-answer:last-of-type details.m:not([open]) > summary {
  width: 38px !important; padding: 0 !important; margin: 0 !important;
  color: #fff !important; border-radius: 14px 0 0 14px !important;
  border-right: none !important;
  writing-mode: vertical-rl !important; text-orientation: upright !important;
  letter-spacing: 3px !important; text-align: center !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  height: auto !important; font-size: 13px !important;
  position: relative !important; overflow: hidden !important;
  /* 咒纹纹理层 */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 200'%3E%3Cdefs%3E%3CradialGradient id='tg'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.12'/%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect x='16' y='45' width='6' height='6' fill='url(%23tg)' transform='rotate(45 19 48)' opacity='0.3'%3E%3Canimate attributeName='opacity' values='0.2;0.5;0.2' dur='4s' repeatCount='indefinite'/%3E%3C/rect%3E%3Crect x='16' y='115' width='5' height='5' fill='url(%23tg)' transform='rotate(45 18.5 117.5)' opacity='0.25'%3E%3Canimate attributeName='opacity' values='0.15;0.4;0.15' dur='5s' repeatCount='indefinite' begin='1.5s'/%3E%3C/rect%3E%3Ccircle cx='19' cy='170' r='3' fill='url(%23tg)' opacity='0.2'%3E%3Canimate attributeName='opacity' values='0.15;0.35;0.15' dur='3.5s' repeatCount='indefinite' begin='2s'/%3E%3C/circle%3E%3C/svg%3E") !important;
  background-size: 100% 100% !important; background-repeat: no-repeat !important;
}

/* .p 主角状态 — 咒力蓝渐变 + 六芒星 */
#ai-chat-answer:last-of-type details.p:not([open]) > summary {
  background-color: transparent !important;
  background: linear-gradient(180deg, #6B8AF8, #4A6CF7, #7B2FF2) !important;
  border: 1px solid rgba(179,197,255,0.5) !important; border-right: none !important;
  text-shadow: 0 1px 3px rgba(30,20,80,0.4) !important;
  animation: sidebar-tab-glow 4s ease-in-out infinite !important;
  min-height: 95px !important;
}
#ai-chat-answer:last-of-type details.p:not([open]) > summary::before {
  content: '' !important; position: absolute !important;
  top: 8px !important; left: 50% !important; transform: translateX(-50%) !important;
  width: 20px !important; height: 20px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg opacity='0.85'%3E%3Cpolygon points='10,1 12,7 18,7 13,11 15,17 10,13 5,17 7,11 2,7 8,7' fill='%23fff' opacity='0.9'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: contain !important; background-repeat: no-repeat !important;
  border: none !important; border-radius: 0 !important;
}
#ai-chat-answer:last-of-type details.p:not([open]) > summary::after {
  content: '' !important; position: absolute !important;
  bottom: 8px !important; left: 50% !important; transform: translateX(-50%) !important;
  width: 16px !important; height: 16px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ctext x='2' y='13' font-size='12' fill='rgba(255,255,255,0.5)' font-family='Georgia'%3E%E2%97%88%3C/text%3E%3C/svg%3E") !important;
  background-size: contain !important; background-repeat: no-repeat !important;
  border: none !important;
}

/* .n NPC信息 — 咒力蓝渐变 + 人物图标 */
#ai-chat-answer:last-of-type .n:not([open]) > summary,
#ai-chat-answer:last-of-type details.n:not([open]) > summary {
  background-color: transparent !important;
  background: linear-gradient(180deg, #6B8AF8, #4A6CF7, #7B2FF2) !important;
  border: 1px solid rgba(179,197,255,0.5) !important; border-right: none !important;
  text-shadow: 0 1px 3px rgba(30,20,80,0.4) !important;
  animation: sidebar-tab-glow 4s ease-in-out infinite !important;
  min-height: 80px !important;
}
#ai-chat-answer:last-of-type .n:not([open]) > summary::before,
#ai-chat-answer:last-of-type details.n:not([open]) > summary::before {
  content: '' !important; position: absolute !important;
  top: 8px !important; left: 50% !important; transform: translateX(-50%) !important;
  width: 18px !important; height: 18px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='6' r='3.5' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='1.2'/%3E%3Cpath d='M3,16 C3,12 5.5,9.5 9,9.5 C12.5,9.5 15,12 15,16' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='1.2'/%3E%3C/svg%3E") !important;
  background-size: contain !important; background-repeat: no-repeat !important;
  border: none !important; border-radius: 0 !important;
}

/* .ship 队伍总览 — 术式绿渐变 */
#ai-chat-answer:last-of-type details.ship:not([open]) > summary {
  background-color: transparent !important;
  background: linear-gradient(180deg, #68D391, #48BB78, #2F855A) !important;
  border: 1px solid rgba(160,230,180,0.5) !important; border-right: none !important;
  text-shadow: 0 1px 3px rgba(20,60,30,0.4) !important;
  animation: sidebar-tab-glow-green 4s ease-in-out infinite !important;
  min-height: 100px !important;
}
#ai-chat-answer:last-of-type details.ship:not([open]) > summary::before {
  content: '' !important; position: absolute !important;
  top: 8px !important; left: 50% !important; transform: translateX(-50%) !important;
  width: 18px !important; height: 18px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ctext x='1' y='15' font-size='14' fill='rgba(255,255,255,0.7)' font-family='Georgia'%3E%E2%9B%A9%3C/text%3E%3C/svg%3E") !important;
  background-size: contain !important; background-repeat: no-repeat !important;
  border: none !important; border-radius: 0 !important;
}
#ai-chat-answer:last-of-type details.ship:not([open]) > summary::after {
  content: '' !important; position: absolute !important;
  bottom: 10px !important; left: 50% !important; transform: translateX(-50%) !important;
  width: 14px !important; height: 14px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='5' fill='none' stroke='rgba(255,255,255,0.35)' stroke-width='1' stroke-dasharray='2 2'/%3E%3C/svg%3E") !important;
  background-size: contain !important; background-repeat: no-repeat !important;
  border: none !important;
}

/* .m 过往记忆 — 反转蓝渐变 */
#ai-chat-answer:last-of-type details.m:not([open]) > summary {
  background-color: transparent !important;
  background: linear-gradient(180deg, #5CC7C2, #38B2AC, #2C8F8A) !important;
  border: 1px solid rgba(150,220,215,0.5) !important; border-right: none !important;
  text-shadow: 0 1px 3px rgba(20,50,48,0.4) !important;
  animation: sidebar-tab-glow-blue 4s ease-in-out infinite !important;
  min-height: 80px !important;
  font-size: 0 !important; line-height: 0 !important;
  color: transparent !important; gap: 0 !important;
  padding-top: 8px !important; padding-bottom: 8px !important;
}
#ai-chat-answer:last-of-type details.m:not([open]) > summary::before {
  content: '' !important; position: absolute !important;
  top: 10px !important; left: 50% !important; transform: translateX(-50%) !important;
  width: 18px !important; height: 18px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Crect x='3' y='3' width='12' height='12' rx='1.5' fill='none' stroke='rgba(255,255,255,0.55)' stroke-width='1.2'/%3E%3Cline x1='6' y1='6' x2='12' y2='6' stroke='rgba(255,255,255,0.4)' stroke-width='0.8'/%3E%3Cline x1='6' y1='9' x2='12' y2='9' stroke='rgba(255,255,255,0.35)' stroke-width='0.8'/%3E%3Cline x1='6' y1='12' x2='10' y2='12' stroke='rgba(255,255,255,0.3)' stroke-width='0.8'/%3E%3C/svg%3E") !important;
  background-size: contain !important; background-repeat: no-repeat !important;
  border: none !important; border-radius: 0 !important;
  margin-bottom: 2px !important;
}
#ai-chat-answer:last-of-type details.m:not([open]) > summary::after {
  content: '过往记忆' !important;
  display: block !important; font-size: 13px !important;
  line-height: 1 !important; color: #fff !important;
  writing-mode: vertical-rl !important; text-orientation: upright !important;
  letter-spacing: 3px !important; font-weight: 700 !important;
  font-family: 'Georgia', 'Noto Serif SC', serif !important;
  text-shadow: 0 1px 3px rgba(20,50,48,0.4) !important;
  position: absolute !important; top: 32px !important;
  left: 50% !important; transform: translateX(-50%) !important;
  width: auto !important; height: auto !important;
  background: none !important; border: none !important;
  border-radius: 0 !important; box-shadow: none !important;
  margin: 0 !important; padding: 0 !important;
  pointer-events: none !important;
}

/* env-sidebar / .u 保持蓝色 */
#ai-chat-answer:last-of-type .env-sidebar:not([open]) > summary,
#ai-chat-answer:last-of-type .u:not([open]) > summary {
  background-color: transparent !important;
  background: linear-gradient(180deg, #4A6CF7, #7B2FF2) !important;
  border: 1px solid rgba(179,197,255,0.4) !important; border-right: none !important;
  box-shadow: -2px 2px 15px rgba(26,31,54,0.2) !important;
  text-shadow: 0 0 5px rgba(179,197,255,0.5) !important;
}

/* ── 展开面板 ── */
#ai-chat-answer:last-of-type .env-sidebar[open],
#ai-chat-answer:last-of-type .u[open],
#ai-chat-answer:last-of-type .n[open],
#ai-chat-answer:last-of-type details.p[open],
#ai-chat-answer:last-of-type details.n[open] {
  top: 60px !important; width: 370px !important; max-height: 60vh !important;
  right: 35px !important; background: rgba(255,255,255,0.98) !important;
  border: 2px solid #4A6CF7 !important; border-right: none !important;
  border-radius: 14px 0 0 14px !important;
  box-shadow: -4px 4px 30px rgba(123,47,242,0.2), 0 0 60px rgba(179,197,255,0.15) !important;
  overflow-y: auto !important; overflow-x: hidden !important;
  backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important;
}
#ai-chat-answer:last-of-type details.ship[open] {
  top: 60px !important; width: 380px !important; max-height: 65vh !important;
  right: 35px !important; background: rgba(255,255,255,0.98) !important;
  border: 2px solid #48BB78 !important; border-right: none !important;
  border-radius: 14px 0 0 14px !important;
  box-shadow: -4px 4px 30px rgba(47,133,90,0.2), 0 0 60px rgba(160,230,180,0.12) !important;
  overflow-y: auto !important; overflow-x: hidden !important;
  backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important;
}
#ai-chat-answer:last-of-type details.m[open] {
  top: 60px !important; width: 380px !important; max-height: 60vh !important;
  right: 35px !important; background: rgba(255,255,255,0.98) !important;
  border: 2px solid #38B2AC !important; border-right: none !important;
  border-radius: 14px 0 0 14px !important;
  box-shadow: -4px 4px 30px rgba(44,143,138,0.2) !important;
  overflow-y: auto !important; overflow-x: hidden !important;
}

/* 展开面板头部 — 蓝紫系 */
#ai-chat-answer:last-of-type .env-sidebar[open] > summary,
#ai-chat-answer:last-of-type .u[open] > summary,
#ai-chat-answer:last-of-type .n[open] > summary,
#ai-chat-answer:last-of-type details.p[open] > summary,
#ai-chat-answer:last-of-type details.n[open] > summary {
  writing-mode: horizontal-tb !important; padding: 14px 50px 14px 18px !important;
  background: linear-gradient(135deg, #6B8AF8, #4A6CF7, #7B2FF2) !important;
  color: #fff !important; border-bottom: 2px solid rgba(255,255,255,0.2) !important;
  border-radius: 12px 0 0 0 !important; margin-bottom: 0 !important; box-shadow: none !important;
  position: sticky !important; top: 0 !important; z-index: 100 !important;
  text-align: left !important; display: flex !important; justify-content: flex-start !important;
  font-size: 15px !important; letter-spacing: 2.5px !important;
  text-shadow: 0 1px 4px rgba(30,20,80,0.3) !important;
  animation: none !important; min-height: 0 !important;
}
/* 展开面板头部 — 绿色系 */
#ai-chat-answer:last-of-type details.ship[open] > summary {
  writing-mode: horizontal-tb !important; padding: 14px 50px 14px 18px !important;
  background: linear-gradient(135deg, #68D391, #48BB78, #2F855A) !important;
  color: #fff !important; border-bottom: 2px solid rgba(255,255,255,0.2) !important;
  border-radius: 12px 0 0 0 !important; margin-bottom: 0 !important; box-shadow: none !important;
  position: sticky !important; top: 0 !important; z-index: 100 !important;
  text-align: left !important; display: flex !important; justify-content: flex-start !important;
  font-size: 15px !important; letter-spacing: 2.5px !important;
  text-shadow: 0 1px 4px rgba(20,60,30,0.3) !important;
  animation: none !important; min-height: 0 !important;
}
/* 展开面板头部 — 青色系 */
#ai-chat-answer:last-of-type details.m[open] > summary {
  writing-mode: horizontal-tb !important; padding: 14px 50px 14px 18px !important;
  background: linear-gradient(135deg, #5CC7C2, #38B2AC, #2C8F8A) !important;
  color: #fff !important; border-bottom: 2px solid rgba(255,255,255,0.2) !important;
  border-radius: 12px 0 0 0 !important; margin-bottom: 0 !important; box-shadow: none !important;
  position: sticky !important; top: 0 !important; z-index: 100 !important;
  text-align: left !important; display: flex !important; justify-content: flex-start !important;
  font-size: 15px !important; letter-spacing: 2.5px !important;
  text-shadow: 0 1px 4px rgba(20,50,48,0.3) !important;
  animation: none !important; min-height: 0 !important;
}

/* 展开标题前缀图标 */
#ai-chat-answer:last-of-type details.p[open] > summary::before {
  content: '⛩' !important; margin-right: 8px !important; font-size: 14px !important;
  position: static !important; transform: none !important;
  border: none !important; width: auto !important; height: auto !important;
  background: none !important;
}
#ai-chat-answer:last-of-type .n[open] > summary::before,
#ai-chat-answer:last-of-type details.n[open] > summary::before {
  content: '👤' !important; margin-right: 8px !important; font-size: 14px !important;
  position: static !important; transform: none !important;
  border: none !important; width: auto !important; height: auto !important;
  background: none !important;
}
#ai-chat-answer:last-of-type details.ship[open] > summary::before {
  content: '◈' !important; margin-right: 8px !important; font-size: 15px !important;
  position: static !important; transform: none !important;
  border: none !important; width: auto !important; height: auto !important;
  background: none !important;
}
#ai-chat-answer:last-of-type details.m[open] > summary::before {
  content: '📖' !important; margin-right: 8px !important; font-size: 14px !important;
  position: static !important; transform: none !important;
  border: none !important; width: auto !important; height: auto !important;
  background: none !important;
}

/* 关闭按钮 × */
#ai-chat-answer:last-of-type .env-sidebar[open] > summary::after,
#ai-chat-answer:last-of-type .u[open] > summary::after,
#ai-chat-answer:last-of-type .n[open] > summary::after,
#ai-chat-answer:last-of-type details.p[open] > summary::after,
#ai-chat-answer:last-of-type details.n[open] > summary::after,
#ai-chat-answer:last-of-type details.ship[open] > summary::after,
#ai-chat-answer:last-of-type details.m[open] > summary::after {
  content: '×' !important; position: absolute !important; right: 14px; top: 50%;
  transform: translateY(-50%); font-size: 22px !important; line-height: 0.8 !important;
  color: rgba(255,255,255,0.7) !important; text-shadow: none !important;
  font-weight: 300 !important;
}

/* 滚动条 — 蓝紫系 */
#ai-chat-answer:last-of-type .env-sidebar[open]::-webkit-scrollbar,
#ai-chat-answer:last-of-type .u[open]::-webkit-scrollbar,
#ai-chat-answer:last-of-type .n[open]::-webkit-scrollbar,
#ai-chat-answer:last-of-type details.p[open]::-webkit-scrollbar,
#ai-chat-answer:last-of-type details.n[open]::-webkit-scrollbar { width: 5px; }
#ai-chat-answer:last-of-type .env-sidebar[open]::-webkit-scrollbar-track,
#ai-chat-answer:last-of-type .u[open]::-webkit-scrollbar-track,
#ai-chat-answer:last-of-type .n[open]::-webkit-scrollbar-track,
#ai-chat-answer:last-of-type details.p[open]::-webkit-scrollbar-track,
#ai-chat-answer:last-of-type details.n[open]::-webkit-scrollbar-track { background: rgba(74,108,247,0.06); border-radius: 3px; }
#ai-chat-answer:last-of-type .env-sidebar[open]::-webkit-scrollbar-thumb,
#ai-chat-answer:last-of-type .u[open]::-webkit-scrollbar-thumb,
#ai-chat-answer:last-of-type .n[open]::-webkit-scrollbar-thumb,
#ai-chat-answer:last-of-type details.p[open]::-webkit-scrollbar-thumb,
#ai-chat-answer:last-of-type details.n[open]::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(74,108,247,0.4), rgba(123,47,242,0.3));
  border-radius: 3px;
}
/* 绿色系滚动条 */
#ai-chat-answer:last-of-type details.ship[open]::-webkit-scrollbar { width: 5px; }
#ai-chat-answer:last-of-type details.ship[open]::-webkit-scrollbar-track { background: rgba(72,187,120,0.06); }
#ai-chat-answer:last-of-type details.ship[open]::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(72,187,120,0.35), rgba(47,133,90,0.25)); border-radius: 3px;
}
/* 青色系滚动条 */
#ai-chat-answer:last-of-type details.m[open]::-webkit-scrollbar { width: 5px; }
#ai-chat-answer:last-of-type details.m[open]::-webkit-scrollbar-track { background: rgba(56,178,172,0.06); }
#ai-chat-answer:last-of-type details.m[open]::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(56,178,172,0.35), rgba(44,143,138,0.25)); border-radius: 3px;
}

/* 侧边栏面板内NPC卡片 */
#ai-chat-answer:last-of-type .u[open] > .classUI-npc-card,
#ai-chat-answer:last-of-type .n[open] > .classUI-npc-card,
#ai-chat-answer:last-of-type details.n[open] > .classUI-npc-card,
#ai-chat-answer:last-of-type details.ship[open] > .classUI-npc-card {
  background: transparent !important; border: none !important; box-shadow: none !important;
  padding-top: 14px !important; padding-bottom: 14px !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}

/* =============================================
 * 5. 系统覆盖 (Part 1)
 * ============================================= */
.group.ml-0 > .flex.items-start.gap-2 {
  font-family: 'Georgia', serif !important;
  background-color: #F8FAFF !important; border-radius: 12px !important;
  padding: 12px 16px !important; width: 100% !important;
  box-shadow: 0 3px 10px rgba(26,31,54,0.04) !important;
  border: 1px solid rgba(74,108,247,0.1) !important;
  transition: all 0.4s ease !important;
}
.group.ml-0 > .flex.items-start.gap-2:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(26,31,54,0.08) !important;
  background-color: #FFFFFF !important;
  border-color: rgba(74,108,247,0.25) !important;
}
.group.ml-0 .break-all { white-space: pre-wrap !important; line-height: 1.6 !important; color: #1A1F36 !important; }
.group.ml-0 > .flex.items-start.gap-2 .text-grey-600,
.group.ml-0 > .flex.items-start.gap-2 .text-gray-500,
.group.ml-0 > .flex.items-start.gap-2 .text-gray-400,
.group.ml-0 > .flex.items-start.gap-2 .font-bold { color: #1A1F36 !important; }
div.style_divider__mW0YX.style_horizontal__UvaHt {
  margin-top: 10px !important; margin-bottom: 10px !important;
  border-top: 1px solid rgba(74,108,247,0.15) !important; background: none !important;
}
.MuiButtonBase-root.MuiButton-root.css-1t7rg57,
.MuiButtonBase-root.MuiButton-root {
  font-family: 'Georgia', serif !important; font-weight: 700 !important;
  font-size: 13px !important; letter-spacing: 1.2px !important;
  color: #7B2FF2 !important; background: transparent !important;
  border: 1px solid rgba(74,108,247,0.3) !important;
  padding: 4px 12px !important; border-radius: 12px !important;
  transition: all 0.4s ease !important; position: relative !important; overflow: hidden !important;
}
.MuiButtonBase-root.MuiButton-root:hover {
  color: #4A6CF7 !important; background: rgba(74,108,247,0.08) !important;
  border-color: #4A6CF7 !important; transform: translateY(-2px);
}

/* 隐藏元素 */
think { display: none !important; }
.mb-2 .shrink-0 { display: none; }
[class*="bg-[#F1CBCB]"], [class*="bg-[#c9e1e9]"] { display: none; }

/* === END OF PART 1 === */
/* ========================================
   ⛩️ 咒術廻戦 · 明亮テーマ v1.0 — 补全部分
   JUJUTSU KAISEN × CURSED ENERGY UI (BRIGHT)
   
   本文件补全少女乐队主题中存在、但咒术回战第一部分未覆盖的所有模块。
   使用相同的 HTML 选择器/类名，仅替换配色为咒术回战风格。

   核心色彩映射 (JJK):
   - 背景: #F0F3FF          (咒雾白)
   - 面板: #F8FAFF          (结界白)
   - 主色调: #4A6CF7        (咒力蓝)
   - 强调色: #7B2FF2        (领域紫)
   - 装饰色: #B3C5FF        (浅咒边)
   - 文本: #1A1F36          (深靛紫)
   - 列表文本: #2D2B55      (暗紫罗兰)
   - 危险: #E53E3E          (赫)
   - 辅助青: #38B2AC        (反转术蓝)
   - 辅助绿: #48BB78        (术式绿)
   ======================================== */


/* =============================================
 * 4.5. 背包 — details[inv] 网格系统
 * ============================================= */
details[inv] {
  --grid-size: 56px; --gap: 6px; --panel-h: 1120px;
  --bg-panel: rgba(248,250,255,0.98); --bg-item: rgba(255,255,255,0.9);
  --text-main: #1A1F36; --text-sub: #7B2FF2;
  --border: rgba(74,108,247,0.2); --accent: #4A6CF7;
  --q-yiban: #2D2B55; --q-youzhi: #48BB78; --q-jingliang: #4A6CF7;
  --q-shishi: #7B2FF2; --q-chuanshuo: #E53E3E; --q-yuangu: #C53030;
  display: block !important; margin: 12px 0 !important;
  font-family: 'Georgia', 'Noto Serif SC', serif !important;
  position: relative !important;
}
details[inv] > summary {
  cursor: pointer !important; list-style: none !important; user-select: none !important;
  display: flex !important; align-items: center !important; gap: 10px !important;
  font-weight: 700 !important; font-size: 14px !important; color: var(--accent) !important;
  padding: 10px 14px 10px 36px !important;
  background: linear-gradient(90deg, rgba(74,108,247,0.06), rgba(179,197,255,0.04), rgba(74,108,247,0.06)) !important;
  border: 1px solid var(--border) !important; border-left: 3px solid var(--accent) !important;
  border-radius: 8px !important; transition: all 0.3s ease !important;
  letter-spacing: 1.5px !important; position: relative !important; z-index: 10 !important;
}
details[inv][open] > summary {
  border-radius: 0 0 8px 8px !important; border-top: none !important;
  background: linear-gradient(90deg, rgba(74,108,247,0.1), rgba(179,197,255,0.06), rgba(74,108,247,0.1)) !important;
}
details[inv] > summary::-webkit-details-marker, details[inv] > summary::marker { display: none !important; content: '' !important; }
details[inv] > summary::before {
  content: '⛩' !important; position: absolute !important; left: 10px !important;
  top: 50% !important; transform: translateY(-50%) !important;
  font-size: 16px !important; transition: all 0.3s ease !important;
}
details[inv] > summary::after {
  content: '' !important; position: absolute !important; right: 14px !important; top: 50% !important;
  width: 8px !important; height: 8px !important;
  border-right: 2px solid var(--accent) !important; border-top: 2px solid var(--accent) !important;
  transform: translateY(-50%) rotate(-45deg) !important; transition: all 0.3s ease !important;
}
details[inv][open] > summary::after { transform: translateY(-50%) rotate(135deg) !important; border-color: #7B2FF2 !important; }
details[inv] > summary:hover {
  background: linear-gradient(90deg, rgba(74,108,247,0.12), rgba(179,197,255,0.08), rgba(74,108,247,0.12)) !important;
  border-color: var(--accent) !important;
}
details[inv] > summary > i {
  font-style: normal !important; background: rgba(74,108,247,0.08) !important;
  padding: 3px 10px !important; border-radius: 8px !important; font-size: 12px !important;
  color: var(--text-sub) !important; border: 1px solid rgba(74,108,247,0.15) !important;
  margin-left: auto !important; margin-right: 20px !important;
}
details[inv] > panel {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-size), 1fr)) !important;
  gap: var(--gap) !important; padding: 36px 12px 12px 12px !important;
  background: var(--bg-panel) !important; border: 1px solid var(--border) !important;
  border-bottom: none !important; border-left: 3px solid var(--accent) !important;
  border-radius: 12px 12px 0 0 !important; max-height: var(--panel-h) !important;
  overflow: visible !important;
  box-shadow: 0 -4px 20px rgba(26,31,54,0.12), inset 0 0 20px rgba(240,243,255,0.5) !important;
  box-sizing: border-box !important; position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: calc(100% - 1px) !important; z-index: 100 !important;
}
details[inv] > panel::before {
  content: '⛩ 随身物品' !important; position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; height: 28px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: linear-gradient(90deg, rgba(74,108,247,0.1), rgba(179,197,255,0.08), rgba(74,108,247,0.1)) !important;
  border-bottom: 1px solid rgba(74,108,247,0.15) !important;
  border-radius: 12px 12px 0 0 !important; font-size: 11px !important;
  font-weight: 700 !important; color: var(--accent) !important; letter-spacing: 3px !important;
}
details[inv] > panel::after {
  content: '' !important; position: absolute !important; bottom: 0 !important;
  left: 10% !important; right: 10% !important; height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(179,197,255,0.5), transparent) !important;
}
details[inv] > panel > b {
  display: flex !important; align-items: center !important; justify-content: center !important;
  aspect-ratio: 1 / 1 !important; background: var(--bg-item) !important;
  border: 1px solid var(--border) !important; color: var(--text-main) !important;
  font-weight: 600 !important; font-size: 11px !important; text-align: center !important;
  cursor: help !important; position: static !important; transition: all 0.25s ease !important;
  overflow: visible !important; border-radius: 8px !important; padding: 4px !important;
  word-break: break-all !important; line-height: 1.3 !important;
  box-shadow: 0 1px 3px rgba(26,31,54,0.06) !important;
}
details[inv] > panel > b:hover {
  z-index: 10 !important; transform: scale(1.08) !important;
  box-shadow: 0 4px 15px rgba(74,108,247,0.2) !important; background: #FFFFFF !important;
}
details[inv] > panel > b > i {
  position: fixed !important; top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 135px !important; max-width: 45vw !important; max-height: 65vh !important;
  overflow-y: auto !important; background: rgba(255,255,255,0.99) !important;
  border: 1px solid rgba(74,108,247,0.35) !important;
  border-left: 3px solid var(--accent) !important;
  padding: 12px 10px !important; border-radius: 12px !important;
  box-shadow: 0 8px 30px rgba(26,31,54,0.3) !important;
  opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
  transition: opacity 0.15s ease, visibility 0.15s ease !important;
  font-style: normal !important; text-align: left !important;
  white-space: normal !important; font-size: 11px !important;
  line-height: 1.7 !important; color: var(--text-main) !important;
  z-index: 2147483647 !important;
  backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;
}
details[inv] > panel > b > i::before {
  content: '⛩ 呪具档案' !important; display: block !important;
  font-size: 10px !important; font-weight: 700 !important; color: #7B2FF2 !important;
  letter-spacing: 1px !important; margin-bottom: 6px !important;
  padding-bottom: 6px !important; border-bottom: 1px solid rgba(74,108,247,0.2) !important;
}
details[inv] > panel > b:hover > i { opacity: 1 !important; visibility: visible !important; }
details[inv] > panel > b > i > b {
  display: block !important; margin-top: 8px !important; padding-top: 6px !important;
  border-top: 1px dashed rgba(74,108,247,0.2) !important;
  text-align: right !important; color: #7B2FF2 !important;
  font-weight: 700 !important; font-size: 10px !important;
}
details[inv] > panel > b[e] {
  border-color: #B3C5FF !important;
  box-shadow: inset 0 0 0 1px #B3C5FF, 0 0 8px rgba(179,197,255,0.3) !important;
  background: linear-gradient(135deg, rgba(179,197,255,0.1), rgba(255,255,255,0.9)) !important;
  position: relative !important;
}
details[inv] > panel > b[e]::after {
  content: '◈' !important; position: absolute !important; top: 0 !important; left: 0 !important;
  background: linear-gradient(135deg, #B3C5FF, #4A6CF7) !important;
  color: #fff !important; font-size: 8px !important; font-weight: 700 !important;
  padding: 1px 3px !important; line-height: 1.2 !important; border-radius: 0 0 6px 0 !important;
}
details[inv] > panel > b[q="yiban"] { color: var(--q-yiban) !important; border-color: var(--q-yiban) !important; }
details[inv] > panel > b[q="youzhi"] { color: var(--q-youzhi) !important; border-color: var(--q-youzhi) !important; }
details[inv] > panel > b[q="jingliang"] { color: var(--q-jingliang) !important; border-color: var(--q-jingliang) !important; }
details[inv] > panel > b[q="shishi"] { color: var(--q-shishi) !important; border-color: var(--q-shishi) !important; }
details[inv] > panel > b[q="chuanshuo"] { color: var(--q-chuanshuo) !important; border-color: var(--q-chuanshuo) !important; box-shadow: 0 0 6px rgba(229,62,62,0.3) !important; }
details[inv] > panel > b[q="yuangu"] { color: var(--q-yuangu) !important; border-color: var(--q-yuangu) !important; box-shadow: 0 0 8px rgba(197,48,48,0.3) !important; animation: inv-item-glow 2.5s ease-in-out infinite !important; }
details[inv] > panel > b[q="yiban"] > i { border-left-color: var(--q-yiban) !important; }
details[inv] > panel > b[q="youzhi"] > i { border-left-color: var(--q-youzhi) !important; }
details[inv] > panel > b[q="jingliang"] > i { border-left-color: var(--q-jingliang) !important; }
details[inv] > panel > b[q="shishi"] > i { border-left-color: var(--q-shishi) !important; }
details[inv] > panel > b[q="chuanshuo"] > i { border-left-color: var(--q-chuanshuo) !important; }
details[inv] > panel > b[q="yuangu"] > i { border-left-color: var(--q-yuangu) !important; }
.styled-prose-container wealth_info, .styled-prose-container wealth_info *,
.styled-prose-container details:has(wealth_info),
.styled-prose-container details:has(wealth_info) > *,
details[inv], details[inv] > panel { overflow: visible !important; }


/* =============================================
 * 4.6. 因果命盘 / 追踪器 — .k-track 系统
 * ============================================= */
.k-track {
  border: 1px solid rgba(74,108,247,0.2) !important;
  background: linear-gradient(180deg, rgba(248,250,255,0.98) 0%, rgba(240,243,255,0.95) 100%) !important;
  margin: 14px 0 !important; border-radius: 16px !important;
  font-family: 'Georgia', 'Noto Serif SC', serif !important;
  overflow: hidden !important; position: relative !important;
}
.k-track::before {
  content: '' !important; position: absolute !important; top: 0 !important;
  left: 0 !important; right: 0 !important; height: 2px !important;
  background: linear-gradient(90deg, transparent, #B3C5FF, #4A6CF7, #E53E3E, transparent) !important;
  opacity: 0.5 !important;
}
.k-head {
  background: linear-gradient(90deg, rgba(74,108,247,0.06) 0%, rgba(179,197,255,0.08) 25%, rgba(255,255,255,0.9) 50%, rgba(229,62,62,0.04) 75%, rgba(74,108,247,0.06) 100%) !important;
  padding: 12px 16px 12px 42px !important; font-size: 14px !important;
  color: #1A1F36 !important; font-weight: 700 !important;
  border-bottom: 1px solid rgba(74,108,247,0.12) !important;
  display: flex !important; justify-content: space-between !important;
  align-items: center !important; cursor: pointer !important;
  letter-spacing: 2px !important; list-style: none !important;
  position: relative !important; transition: all 0.3s ease !important;
}
.k-head::-webkit-details-marker { display: none !important; }
.k-head::before {
  content: '⛩' !important; position: absolute !important; left: 14px !important;
  top: 50% !important; transform: translateY(-50%) !important; font-size: 16px !important;
  animation: k-petal-spin 12s linear infinite !important;
}
.k-head::after {
  content: '' !important; position: absolute !important; right: 16px !important;
  top: 50% !important; width: 7px !important; height: 7px !important;
  border-right: 2px solid #4A6CF7 !important; border-bottom: 2px solid #4A6CF7 !important;
  transform: translateY(-70%) rotate(45deg) !important; transition: all 0.3s ease !important;
}
.k-track[open] > .k-head::after { transform: translateY(-30%) rotate(-135deg) !important; }
.k-sum {
  font-weight: 700 !important; font-size: 11px !important; letter-spacing: 1px !important;
  padding: 4px 10px !important; border-radius: 10px !important;
  background: rgba(255,255,255,0.7) !important;
  border: 1px solid rgba(74,108,247,0.15) !important;
  margin-right: 20px !important; color: #1A1F36 !important;
}
.k-body { padding: 14px !important; background: rgba(255,255,255,0.5) !important; position: relative !important; }
.k-quote {
  position: relative !important; z-index: 1 !important; text-align: center !important;
  font-size: 11px !important; color: #7B2FF2 !important; letter-spacing: 2px !important;
  padding: 10px 12px !important; margin-bottom: 14px !important;
  background: linear-gradient(90deg, transparent, rgba(74,108,247,0.04), transparent) !important;
  border-top: 1px dashed rgba(74,108,247,0.15) !important;
  border-bottom: 1px dashed rgba(74,108,247,0.15) !important;
  font-weight: 600 !important;
}
.k-row {
  position: relative !important; z-index: 1 !important; margin-bottom: 12px !important;
  padding: 10px 12px 10px 48px !important; border-left: 3px solid var(--k-color) !important;
  background: var(--k-bg) !important; border-radius: 0 12px 12px 0 !important;
  transition: all 0.35s ease !important; overflow: hidden !important;
  display: flex !important; align-items: flex-start !important;
}
.k-row:last-child { margin-bottom: 0 !important; }
.k-row::before {
  content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important;
  background: linear-gradient(90deg, var(--k-glow) 0%, transparent 60%) !important;
  opacity: 0 !important; transition: opacity 0.35s ease !important; pointer-events: none !important;
}
.k-row:hover { transform: translateX(4px) !important; }
.k-row:hover::before { opacity: 1 !important; }
.k-tag {
  position: absolute !important; left: 10px !important; top: 50% !important;
  transform: translateY(-50%) !important; width: 28px !important; height: 28px !important;
  border-radius: 50% !important; display: flex !important; align-items: center !important;
  justify-content: center !important; font-size: 13px !important; font-weight: 900 !important;
  color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
  z-index: 2 !important; box-shadow: 0 2px 6px var(--k-tag-shadow) !important;
  background: var(--k-tag-bg) !important; border: 2px solid rgba(255,255,255,0.5) !important;
}
.k-main { flex: 1 !important; min-width: 0 !important; }
.k-row.g {
  --k-color: #4A6CF7 !important;
  --k-bg: linear-gradient(90deg, rgba(240,243,255,0.9) 0%, rgba(255,255,255,0.85) 100%) !important;
  --k-glow: rgba(74,108,247,0.2) !important;
  --k-bar-color: linear-gradient(90deg, #4A6CF7, #7B2FF2) !important;
  --k-tag-bg: linear-gradient(135deg, #4A6CF7, #7B2FF2) !important;
  --k-tag-shadow: rgba(123,47,242,0.4) !important;
  border: 1px solid rgba(74,108,247,0.25) !important;
  border-left: 3px solid #4A6CF7 !important;
}
.k-row.e {
  --k-color: #E53E3E !important;
  --k-bg: linear-gradient(90deg, rgba(255,235,238,0.9) 0%, rgba(255,255,255,0.85) 100%) !important;
  --k-glow: rgba(229,62,62,0.15) !important;
  --k-bar-color: linear-gradient(90deg, #E53E3E, #C53030) !important;
  --k-tag-bg: linear-gradient(135deg, #E53E3E, #9B2C2C) !important;
  --k-tag-shadow: rgba(155,44,44,0.4) !important;
  border: 1px solid rgba(229,62,62,0.2) !important;
  border-left: 3px solid #E53E3E !important;
}
.k-txt { display: flex !important; flex-direction: column !important; margin-bottom: 8px !important; position: relative !important; z-index: 1 !important; }
.k-txt b { font-size: 13px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; margin-bottom: 3px !important; }
.k-row.g .k-txt b { color: #7B2FF2 !important; }
.k-row.e .k-txt b { color: #9B2C2C !important; }
.k-txt i { color: #4A5568 !important; font-size: 11px !important; font-style: normal !important; opacity: 0.9 !important; line-height: 1.5 !important; }
.k-bar {
  height: 12px !important; background: rgba(74,108,247,0.06) !important;
  border-radius: 6px !important; position: relative !important;
  overflow: hidden !important; border: 1px solid rgba(74,108,247,0.1) !important; z-index: 1 !important;
}
.k-bar::after {
  content: '' !important; position: absolute !important; top: 1px !important;
  left: 1px !important; bottom: 1px !important;
  width: calc(var(--p) - 2px) !important; background: var(--k-bar-color) !important;
  border-radius: 5px !important; transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.k-bar::before {
  content: '' !important; position: absolute !important; top: 0 !important; left: -100% !important;
  width: 100% !important; height: 100% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent) !important;
  animation: k-bar-shimmer 2.5s ease-in-out infinite !important; z-index: 2 !important;
}
.k-bar span {
  position: absolute !important; width: 100% !important; text-align: center !important;
  font-size: 9px !important; line-height: 12px !important; color: #1A1F36 !important;
  font-weight: 700 !important; z-index: 3 !important; letter-spacing: 1px !important;
  text-shadow: 0 0 3px rgba(255,255,255,0.8) !important;
}
.k-row.e.pulse { animation: k-danger-pulse 1.2s ease-in-out infinite !important; }
.k-row.g.pulse { animation: k-fortune-pulse 2s ease-in-out infinite !important; }
.k-foot {
  text-align: center !important; padding: 10px 12px !important;
  border-top: 1px solid rgba(74,108,247,0.08) !important;
  background: linear-gradient(90deg, rgba(179,197,255,0.04), rgba(240,243,255,0.5), rgba(229,62,62,0.02)) !important;
  font-size: 10px !important; color: #7B2FF2 !important;
  font-weight: 600 !important; letter-spacing: 3px !important;
}
.k-foot::before { content: '⛩' !important; margin-right: 8px !important; font-size: 8px !important; }
.k-foot::after { content: '◈' !important; margin-left: 8px !important; color: #4A6CF7 !important; font-size: 8px !important; }
.k-none {
  text-align: center !important; color: #7B2FF2 !important; font-size: 13px !important;
  padding: 24px 14px !important; font-weight: 600 !important;
  letter-spacing: 2px !important; opacity: 0.8 !important;
}
.k-none::before {
  content: '⛩' !important; display: block !important; font-size: 28px !important;
  margin-bottom: 10px !important; animation: k-petal-spin 10s linear infinite !important;
}


/* =============================================
 * 4.9. 选项按钮 — pre 系统
 * ============================================= */
.markdown-body { counter-reset: option-counter; }
pre {
  position: relative !important; margin: 8px 0 !important; overflow: hidden !important;
  border-radius: 12px !important; background: transparent !important;
  border: none !important; box-shadow: none !important; padding: 0 !important;
  min-height: 55px;
}
pre div[class*="border-b"] {
  position: absolute !important; top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100% !important; border: none !important;
  background: transparent !important; padding: 0 !important; margin: 0 !important;
  z-index: 2; pointer-events: none;
}
pre div[class*="border-b"] > div:first-child { display: none !important; }
pre div[data-tooltip-id] {
  position: absolute !important; top: 0; left: 0; width: 100% !important;
  height: 100% !important; margin: 0 !important; padding: 0 !important;
  display: block !important; cursor: pointer !important; background: transparent !important;
  border: none !important; pointer-events: auto; z-index: 3;
}
pre div[data-tooltip-id] .style_copyIcon__GJL9e { display: none !important; }
pre div[node="[object Object]"] {
  position: relative; z-index: 1; display: block !important; pointer-events: none;
  background: rgba(248,250,255,0.95) !important;
  border: 1px solid rgba(74,108,247,0.2) !important;
  border-left: 3px solid #4A6CF7 !important;
  box-shadow: 0 4px 15px rgba(26,31,54,0.06) !important;
  color: #1A1F36 !important;
  font-family: 'Georgia', 'Noto Serif SC', serif !important;
  font-size: 1.05em !important; padding: 14px 20px 14px 60px !important;
  margin: 0 !important; border-radius: 12px !important; min-height: 55px;
  white-space: pre-wrap; word-break: break-word; transition: all 0.3s ease;
  counter-increment: option-counter;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
pre div[node="[object Object]"]::before {
  content: counter(option-counter); display: flex; align-items: center;
  justify-content: center; position: absolute; left: 16px; top: 50%;
  transform: translateY(-50%); width: 28px; height: 28px;
  background: linear-gradient(135deg, #4A6CF7, #7B2FF2) !important;
  color: #fff; border-radius: 50%; font-size: 0.95em; font-weight: 700;
  border: 2px solid rgba(179,197,255,0.4);
  box-shadow: 0 2px 8px rgba(74,108,247,0.35); z-index: 2;
}
pre div[node="[object Object]"] code {
  display: block; color: inherit !important; background: transparent !important;
  padding: 0 !important; margin: 0 !important;
  font-family: inherit !important; font-size: inherit !important; white-space: pre-wrap;
}
pre div[data-tooltip-id]::before {
  content: '選択'; position: absolute; top: 50%; right: 18px;
  transform: translateY(-50%) scale(0.9);
  background: linear-gradient(135deg, #4A6CF7, #7B2FF2);
  color: #ffffff; font-size: 0.85em; font-weight: 700;
  font-family: 'Georgia', serif; padding: 6px 14px; border-radius: 10px;
  letter-spacing: 2px; opacity: 0; visibility: hidden;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none; z-index: 5;
  box-shadow: 0 4px 12px rgba(74,108,247,0.3);
  border: 1px solid rgba(179,197,255,0.3);
}
pre:hover div[data-tooltip-id]::before { opacity: 1; visibility: visible; transform: translateY(-50%) scale(1); }
pre:hover div[node="[object Object]"] {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(26,31,54,0.12) !important;
  background: rgba(255,255,255,0.98) !important; border-color: #4A6CF7 !important;
}
pre:active div[node="[object Object]"] {
  transform: translateY(1px) !important;
  background: rgba(240,243,255,0.95) !important; border-color: #7B2FF2 !important;
}
pre:active div[data-tooltip-id]::before {
  content: '選択完了 ✓'; background: linear-gradient(135deg, #7B2FF2, #5A1FC2);
}


/* =============================================
 * 4.10. 其他 UI 组件
 * ============================================= */

/* --- .doc 文档卡片 --- */
.doc {
  background: #F8FAFF; border: 1px solid rgba(74,108,247,0.15);
  border-left: 3px solid #4A6CF7; border-radius: 12px;
  padding: 16px 20px; margin: 16px 0; position: relative;
  font-family: 'Georgia', serif; box-shadow: 0 3px 12px rgba(26,31,54,0.04);
  overflow: hidden;
}
.doc::before {
  content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: repeating-linear-gradient(0deg, transparent, transparent 1px, rgba(74,108,247,0.02) 1px, rgba(74,108,247,0.02) 2px);
  pointer-events: none; z-index: 0;
}
.doc::after {
  content: '⛩ 通信 //'; position: absolute; top: 10px; right: 15px;
  font-size: 0.65em; color: #7B2FF2; letter-spacing: 3px; font-weight: 700;
  animation: bloom-glow 4s ease-in-out infinite; z-index: 2;
}
.doc > * { position: relative; z-index: 1; }
.doc .title {
  color: #7B2FF2; font-size: 1.3em; font-weight: 700; margin: 0 0 14px 0;
  padding-bottom: 10px; border-bottom: 1px solid rgba(74,108,247,0.15);
  letter-spacing: 2px; font-family: 'Georgia', serif;
}
.doc .title::before { content: '◈'; margin-right: 12px; color: #4A6CF7; display: inline-block; }
.doc .content { color: #1A1F36; font-size: 0.95em; line-height: 1.7; }
.doc .content p { margin: 0 0 0.8em 0; text-align: justify; }
.doc .content p:last-child { margin-bottom: 0; }

/* --- 进度条 --- */
.progress-bar-container {
  position: relative; width: 100%; height: 20px;
  background: rgba(179,197,255,0.15);
  border: 1px solid rgba(74,108,247,0.15);
  border-radius: 10px; margin: 8px 0; overflow: hidden;
  box-shadow: inset 0 1px 4px rgba(26,31,54,0.04);
}
.progress-bar-container.hp { border-color: rgba(74,108,247,0.25); }
.progress-bar-container.sp { border-color: rgba(56,178,172,0.25); }
.progress-bar-container.armor { border-color: rgba(123,47,242,0.25); }
.progress-bar-fill {
  position: absolute; left: 0; top: 0; height: 100%;
  transition: width 0.7s ease-out;
  box-shadow: inset 0 0 8px rgba(255,255,255,0.4);
}
.progress-bar-container.hp .progress-bar-fill { background: linear-gradient(90deg, #4A6CF7 0%, #6B8AF8 100%); }
.progress-bar-container.sp .progress-bar-fill { background: linear-gradient(90deg, #38B2AC 0%, #5CC7C2 100%); }
.progress-bar-container.armor .progress-bar-fill { background: linear-gradient(90deg, #7B2FF2 0%, #9B59B6 100%); }
.progress-bar-label {
  position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
  font-weight: 700; font-size: 0.75em; color: #fff;
  text-shadow: 0 0 3px rgba(26,31,54,0.5); z-index: 2; font-family: 'Georgia', serif;
}
.progress-bar-value {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-weight: 700; font-size: 0.75em; color: #1A1F36;
  text-shadow: 0 1px 2px rgba(255,255,255,0.8); z-index: 2; font-family: 'Consolas', monospace;
}

/* --- classUI 组件 --- */
.classUI-story {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(74,108,247,0.12);
  border-radius: 12px; padding: 16px 20px; margin: 16px 0;
  color: #1A1F36; font-size: 16px; line-height: 1.8;
  box-shadow: 0 4px 12px rgba(26,31,54,0.04);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  position: relative; letter-spacing: 0.5px;
}
.classUI-story::before, .classUI-story::after {
  content: ''; position: absolute; width: 14px; height: 14px;
  border-color: rgba(74,108,247,0.25); border-style: solid; transition: all 0.4s ease;
}
.classUI-story::before { top: 8px; left: 8px; border-width: 2px 0 0 2px; border-radius: 4px 0 0 0; }
.classUI-story::after { bottom: 8px; right: 8px; border-width: 0 2px 2px 0; border-radius: 0 0 4px 0; }
.classUI-story:hover::before, .classUI-story:hover::after { border-color: #4A6CF7; }

.classUI-subsection {
  font-weight: 700; color: #7B2FF2; margin: 16px 0 10px 0;
  padding-bottom: 8px; border-bottom: 1px solid rgba(74,108,247,0.15);
  font-size: 15px; letter-spacing: 1.2px; font-family: 'Georgia', serif;
}
.classUI-npc-card {
  background: rgba(255,255,255,0.8); border: 1px solid rgba(74,108,247,0.08);
  border-radius: 12px; padding: 14px; margin: 12px 0;
  box-shadow: 0 2px 8px rgba(26,31,54,0.04);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  transition: all 0.4s ease;
}
.classUI-npc-card:hover { background: rgba(255,255,255,0.95); border-color: rgba(74,108,247,0.2); }
.classUI-npc-name {
  font-size: 17px; font-weight: 700; color: #1A1F36;
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(74,108,247,0.15);
  letter-spacing: 1.2px; font-family: 'Georgia', serif;
}
.classUI-memory { background: transparent; border-color: rgba(74,108,247,0.08); padding-bottom: 0; }
.classUI-memory-section { margin: 0 0 16px 0; padding: 0; background: transparent; border: none; }

.classUI-table {
  width: 100%; border-collapse: collapse; margin-top: 10px;
  border-radius: 12px; overflow: hidden; border: 1px solid rgba(74,108,247,0.15);
}
.classUI-table thead th {
  background: #E4EBFF; color: #1A1F36; padding: 10px; font-weight: 700;
  font-size: 14px; text-align: center; border-bottom: 2px solid #4A6CF7;
  font-family: 'Georgia', serif;
}
.classUI-table tbody td {
  padding: 10px; border-bottom: 1px solid rgba(74,108,247,0.08);
  background: #F8FAFF; font-size: 14px; color: #1A1F36;
  vertical-align: middle; transition: background-color 0.4s ease;
  font-family: 'Consolas', monospace;
}
.classUI-table tbody tr:last-child td { border-bottom: none; }
.classUI-table tbody tr:hover td { background: #F0F3FF; }

.classUI-actions {
  background: rgba(255,255,255,0.85); border: 1px solid rgba(74,108,247,0.15);
  border-radius: 12px; padding: 16px 20px; margin-top: 16px;
  color: #1A1F36; font-weight: 600; font-size: 16px; line-height: 1.8;
  box-shadow: 0 4px 12px rgba(26,31,54,0.04);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); letter-spacing: 0.5px;
}
.styled-prose-container wealth_info,
.styled-prose-container item_list,
.styled-prose-container spell_card_list {
  display: block; margin: 12px 0; padding: 12px 16px;
  background: #F8FAFF; border: 1px solid rgba(74,108,247,0.12);
  border-left: 3px solid #4A6CF7; border-radius: 12px;
  font-family: 'Georgia', serif; line-height: 1.8;
  box-shadow: inset 0 0 10px rgba(240,243,255,0.8);
  transition: all 0.4s ease; position: relative; overflow: visible;
}
.styled-prose-container wealth_info:hover,
.styled-prose-container item_list:hover,
.styled-prose-container spell_card_list:hover { background: #FFFFFF; border-color: rgba(74,108,247,0.25); }
.styled-prose-container wealth_info > span,
.styled-prose-container item_list > span,
.styled-prose-container spell_card_list > span {
  display: block; color: #7B2FF2; font-weight: 700; margin-bottom: 8px;
  font-size: 14px; font-family: 'Georgia', serif; letter-spacing: 1.2px;
}
.styled-prose-container spell_card_list info {
  display: inline-block; color: #E53E3E; font-weight: 600;
  font-size: 14px; margin-right: 6px; font-family: 'Georgia', serif;
}
.tip-r {
  display: block; color: #E53E3E !important;
  background: rgba(229,62,62,0.06); border: 1px solid rgba(229,62,62,0.25);
  border-radius: 8px; padding: 8px 12px; margin-bottom: 12px;
  font-weight: 700; font-size: 14px; text-align: center;
  animation: ribbon-breathe 3.5s infinite ease-in-out; font-family: 'Georgia', serif;
}


/* =============================================
 * news: 社交媒体 Timeline — 仿 Twitter/X 咒术版
 * ============================================= */
.styled-prose-container news {
  display: block !important; margin: 20px 0 !important; padding: 0 !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(207,217,222,0.7) !important;
  border-radius: 16px !important;
  position: relative !important; overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
  font-family: -apple-system, 'Helvetica Neue', 'Segoe UI', 'Hiragino Sans', 'Noto Sans JP', sans-serif !important;
}
.styled-prose-container news h3 {
  font-size: 16px !important; font-weight: 800 !important;
  margin: 0 !important; padding: 14px 16px !important;
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important;
  color: #0F1419 !important; letter-spacing: 0 !important;
  font-family: -apple-system, 'Helvetica Neue', 'Segoe UI', sans-serif !important;
  border-bottom: 1px solid rgba(207,217,222,0.6) !important;
  position: sticky !important; top: 0 !important; z-index: 10 !important;
  line-height: 1.3 !important;
}
.styled-prose-container news h3::before { content: none !important; }

.styled-prose-container news item {
  display: grid !important;
  grid-template-columns: 40px 1fr !important;
  grid-template-rows: auto auto auto !important;
  gap: 0 12px !important; margin: 0 !important; padding: 14px 16px !important;
  background: #FFFFFF !important; border-radius: 0 !important; border-left: none !important;
  border-bottom: 1px solid rgba(207,217,222,0.5) !important;
  position: relative !important; line-height: 1.5 !important; font-size: 15px !important;
  color: #0F1419 !important; transition: background 0.15s ease !important;
}
.styled-prose-container news item:last-child { border-bottom: none !important; }
.styled-prose-container news item:hover { background: rgba(0,0,0,0.015) !important; transform: none !important; }

.styled-prose-container news item label {
  grid-column: 1 !important; grid-row: 1 / -1 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 40px !important; height: 40px !important; min-width: 40px !important;
  border-radius: 50% !important; margin: 0 !important; padding: 0 !important;
  font-size: 10.5px !important; font-weight: 700 !important;
  letter-spacing: 0 !important; line-height: 1.15 !important;
  text-align: center !important; overflow: hidden !important;
  color: #fff !important; box-shadow: none !important;
  position: relative !important; flex-shrink: 0 !important;
  border: none !important; transition: transform 0.2s ease !important;
}
.styled-prose-container news item label:hover { transform: scale(1.05) !important; }

/* .h 帖子 — 咒力蓝头像 */
.styled-prose-container news item.h { border-left: none !important; }
.styled-prose-container news item.h label { background: linear-gradient(135deg, #4A6CF7 0%, #3B5DE7 100%) !important; }
.styled-prose-container news item.h::after {
  content: '♡ · 💬 · ↻' !important; grid-column: 2 !important;
  display: flex !important; gap: 0 !important; margin-top: 10px !important;
  font-size: 13px !important; color: #536471 !important; letter-spacing: 8px !important;
  position: static !important; transform: none !important;
  width: auto !important; height: auto !important;
  background: none !important; border-radius: 0 !important; box-shadow: none !important;
}
.styled-prose-container news item.h label::after {
  content: '✓' !important; position: absolute !important;
  bottom: -2px !important; right: -2px !important;
  width: 16px !important; height: 16px !important;
  background: #1D9BF0 !important; border-radius: 50% !important;
  border: 2px solid #fff !important;
  font-size: 8px !important; color: #fff !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}

/* .e 帖子 — 领域紫头像 */
.styled-prose-container news item.e { border-left: none !important; }
.styled-prose-container news item.e label { background: linear-gradient(135deg, #7B2FF2 0%, #6A1FD2 100%) !important; }
.styled-prose-container news item.e::after {
  content: '♡ · 💬 · ↻' !important; grid-column: 2 !important;
  display: flex !important; margin-top: 10px !important;
  font-size: 13px !important; color: #536471 !important; letter-spacing: 8px !important;
  position: static !important; transform: none !important;
  width: auto !important; height: auto !important;
  background: none !important; border-radius: 0 !important; box-shadow: none !important;
}

/* .t 帖子 — 反转术青头像 */
.styled-prose-container news item.t { border-left: none !important; }
.styled-prose-container news item.t label { background: linear-gradient(135deg, #38B2AC 0%, #2C8F8A 100%) !important; }
.styled-prose-container news item.t::after {
  content: '♡ · 💬 · ↻' !important; grid-column: 2 !important;
  display: flex !important; margin-top: 10px !important;
  font-size: 13px !important; color: #536471 !important; letter-spacing: 8px !important;
  position: static !important; transform: none !important;
  width: auto !important; height: auto !important;
  background: none !important; border-radius: 0 !important; box-shadow: none !important;
}

/* .m 帖子 — 术式绿头像 */
.styled-prose-container news item.m { border-left: none !important; }
.styled-prose-container news item.m label { background: linear-gradient(135deg, #48BB78 0%, #2F855A 100%) !important; }
.styled-prose-container news item.m::after {
  content: '♡ · 💬 · ↻' !important; grid-column: 2 !important;
  display: flex !important; margin-top: 10px !important;
  font-size: 13px !important; color: #536471 !important; letter-spacing: 8px !important;
  position: static !important; transform: none !important;
  width: auto !important; height: auto !important;
  background: none !important; border-radius: 0 !important; box-shadow: none !important;
}


/* =============================================
 * board: 私信通讯 — 咒术风格版
 * ============================================= */
.styled-prose-container board {
  display: block !important; margin: 20px 0 !important; padding: 0 !important;
  background: linear-gradient(180deg, #F0F3FF 0%, #E4EBFF 50%, #F0F3FF 100%) !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cdefs%3E%3CradialGradient id='sb1'%3E%3Cstop offset='0%25' stop-color='%234A6CF7' stop-opacity='0.06'/%3E%3Cstop offset='100%25' stop-color='%234A6CF7' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='sb2'%3E%3Cstop offset='0%25' stop-color='%23B3C5FF' stop-opacity='0.08'/%3E%3Cstop offset='100%25' stop-color='%23B3C5FF' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='80' cy='120' r='60' fill='url(%23sb1)'/%3E%3Ccircle cx='320' cy='80' r='45' fill='url(%23sb2)'/%3E%3Ccircle cx='200' cy='300' r='70' fill='url(%23sb1)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #F0F3FF 0%, #E4EBFF 50%, #F0F3FF 100%) !important;
  border: 1px solid rgba(74,108,247,0.2) !important; border-radius: 16px !important;
  position: relative !important; overflow: hidden !important;
  box-shadow: 0 4px 20px rgba(26,31,54,0.06) !important;
  font-family: -apple-system, 'Helvetica Neue', 'Hiragino Sans', 'Noto Sans JP', sans-serif !important;
}
.styled-prose-container board h3 {
  font-size: 16px !important; font-weight: 700 !important;
  margin: 0 !important; padding: 14px 50px !important;
  background: linear-gradient(135deg, rgba(74,108,247,0.95) 0%, rgba(123,47,242,0.9) 100%) !important;
  backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important;
  color: #fff !important; letter-spacing: 1.5px !important;
  font-family: 'Georgia', 'Noto Serif SC', serif !important;
  border-bottom: 1px solid rgba(123,47,242,0.3) !important;
  text-align: center !important; position: relative !important;
  text-shadow: 0 1px 3px rgba(30,20,80,0.3) !important;
}
.styled-prose-container board h3::before {
  content: '⛩' !important; margin-right: 0 !important; font-size: 16px !important;
  position: absolute !important; left: 16px !important; top: 50% !important;
  transform: translateY(-50%) !important; opacity: 0.85 !important;
}
.styled-prose-container board h3::after {
  content: '◈' !important; position: absolute !important;
  right: 16px !important; top: 50% !important; transform: translateY(-50%) !important;
  font-size: 16px !important; color: rgba(255,255,255,0.6) !important;
  font-family: 'Georgia', serif !important;
  width: auto !important; height: auto !important; background-image: none !important;
}
.styled-prose-container board item {
  display: grid !important;
  grid-template-columns: 40px 1fr !important;
  gap: 0 10px !important; margin: 0 !important; padding: 8px 14px !important;
  background: transparent !important; border-radius: 0 !important; border-left: none !important;
  position: relative !important; line-height: 1.55 !important;
  font-size: 14px !important; color: #1A1F36 !important;
  transition: none !important; align-items: start !important;
}
.styled-prose-container board item:first-of-type { padding-top: 14px !important; }
.styled-prose-container board item:last-of-type { padding-bottom: 16px !important; }
.styled-prose-container board item:hover { background: transparent !important; transform: none !important; }

.styled-prose-container board item label {
  grid-column: 1 !important; grid-row: 1 / -1 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  width: 40px !important; height: 40px !important; min-width: 40px !important;
  border-radius: 50% !important; margin: 0 !important; padding: 0 !important;
  font-size: 10px !important; font-weight: 700 !important;
  color: #fff !important; box-shadow: 0 2px 8px rgba(26,31,54,0.1) !important;
  position: relative !important; flex-shrink: 0 !important;
  border: 2px solid rgba(255,255,255,0.8) !important;
  align-self: start !important; margin-top: 2px !important;
}
.styled-prose-container board item.c label { background: linear-gradient(135deg, #4A6CF7 0%, #7B2FF2 100%) !important; }
.styled-prose-container board item.r label { background: linear-gradient(135deg, #7B2FF2 0%, #6A1FD2 100%) !important; }
.styled-prose-container board item.w label { background: linear-gradient(135deg, #38B2AC 0%, #2C8F8A 100%) !important; }
.styled-prose-container board item.m label { background: linear-gradient(135deg, #48BB78 0%, #2F855A 100%) !important; }

.styled-prose-container board item:not(.w)::before {
  content: '' !important; position: absolute !important;
  top: 6px !important; left: 58px !important; right: 14px !important; bottom: 6px !important;
  background: rgba(255,255,255,0.92) !important;
  border-radius: 4px 16px 16px 16px !important;
  border: 1px solid rgba(74,108,247,0.1) !important;
  box-shadow: 0 1px 4px rgba(26,31,54,0.05) !important;
  z-index: 0 !important; pointer-events: none !important;
}
.styled-prose-container board item > *:not(label) { position: relative !important; z-index: 1 !important; }
.styled-prose-container board item::after {
  content: '' !important; position: absolute !important;
  left: 53px !important; top: 18px !important;
  width: 0 !important; height: 0 !important;
  border-top: 6px solid transparent !important;
  border-bottom: 6px solid transparent !important;
  border-right: 7px solid rgba(255,255,255,0.92) !important;
  background: none !important; transform: none !important;
  box-shadow: none !important; border-radius: 0 !important;
  z-index: 1 !important; pointer-events: none !important;
}

.styled-prose-container board item.w {
  display: flex !important; justify-content: center !important;
  text-align: center !important; padding: 4px 14px !important;
}
.styled-prose-container board item.w::before { display: none !important; }
.styled-prose-container board item.w label {
  width: auto !important; height: auto !important; min-width: 0 !important;
  border-radius: 14px !important; padding: 4px 14px !important;
  font-size: 11px !important; font-weight: 500 !important;
  background: rgba(123,47,242,0.12) !important;
  color: #7B2FF2 !important; border: 1px solid rgba(74,108,247,0.2) !important;
  box-shadow: none !important; grid-column: auto !important; grid-row: auto !important;
}
.styled-prose-container board item.w::after { display: none !important; }

.styled-prose-container board item.c label::after,
.styled-prose-container board item.r label::after {
  content: '⛩' !important; position: absolute !important;
  top: -4px !important; right: -4px !important;
  width: auto !important; height: auto !important; font-size: 10px !important;
  background: none !important; border-radius: 0 !important; border: none !important;
}

.styled-prose-container board item msg {
  display: inline-block !important; position: relative !important;
  z-index: 2 !important; color: #1A1F36 !important;
  font-size: 14px !important; font-weight: 500 !important;
  word-break: break-word !important; align-self: center !important; margin-top: 1px !important;
}

.styled-prose-container board::after {
  content: '' !important; display: block !important; height: 44px !important;
  background: linear-gradient(180deg, rgba(240,243,255,0.95) 0%, rgba(228,235,255,0.98) 100%) !important;
  border-top: 1px solid rgba(74,108,247,0.15) !important;
  position: relative !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 44'%3E%3Crect x='12' y='8' width='240' height='28' rx='14' fill='%23fff' stroke='%23B3C5FF' stroke-width='1'/%3E%3Ctext x='26' y='27' font-size='13' fill='%234A6CF7' font-family='Georgia'%3EAa%3C/text%3E%3Ccircle cx='280' cy='22' r='14' fill='%234A6CF7'/%3E%3Cpath d='M274,22 L278,26 L286,18' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ctext x='300' y='27' font-size='12' fill='%23B3C5FF' font-family='Georgia'%3E%E2%97%88%3C/text%3E%3C/svg%3E") !important;
  background-size: 100% 100% !important; background-repeat: no-repeat !important;
}


/* =============================================
 * details.e — 第四侧边栏 (赫色系)
 * ============================================= */
@keyframes sidebar-tab-glow-red {
  0%, 100% { box-shadow: -2px 2px 12px rgba(229,62,62,0.25); }
  50%  { box-shadow: -2px 2px 20px rgba(229,62,62,0.5), inset 0 0 20px rgba(255,255,255,0.08); }
}

.styled-prose-container details.e {
  position: relative !important; width: 100% !important;
  margin: 16px 0 !important; padding: 0 !important;
  font-family: 'Georgia', 'Noto Serif SC', serif !important;
  background: radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(255,240,240,0.9) 100%) !important;
  border: 2px solid rgba(229,62,62,0.25) !important;
  border-left: 3px solid #E53E3E !important;
  border-radius: 12px !important; overflow: hidden !important;
  transition: all 0.35s ease !important; box-shadow: none !important;
}
.styled-prose-container details.e > summary {
  padding: 12px 16px !important;
  background: linear-gradient(90deg, rgba(229,62,62,0.08), rgba(252,180,180,0.12), rgba(229,62,62,0.08)) !important;
  color: #5A2020 !important; font-weight: 700 !important; font-size: 14px !important;
  cursor: pointer !important; list-style: none !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin: 0 !important; border-bottom: 1px solid rgba(229,62,62,0.15) !important;
  letter-spacing: 2px !important;
}
.styled-prose-container details.e > summary::-webkit-details-marker { display: none !important; }

#ai-chat-answer:last-of-type:has(details.e) .chat,
#ai-chat-answer:last-of-type:has(details.e) .bubble,
#ai-chat-answer:last-of-type:has(details.e) div.group.relative > div.relative.inline-block.bg-gray-100\/90 {
  transform: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
#ai-chat-answer:last-of-type details.e {
  position: fixed !important; right: 0 !important; z-index: 9998 !important;
  width: auto !important; background: transparent !important; border: none !important;
  box-shadow: none !important; margin: 0 !important; padding: 0 !important;
  overflow: visible !important; top: 510px !important;
  transform: none !important; backdrop-filter: none !important;
}
#ai-chat-answer:last-of-type details.e:not([open]) > summary {
  width: 38px !important; padding: 0 !important; margin: 0 !important;
  background: linear-gradient(180deg, #FC8181, #E53E3E, #C53030) !important;
  color: #fff !important; border-radius: 14px 0 0 14px !important;
  border: 1px solid rgba(252,180,180,0.5) !important; border-right: none !important;
  writing-mode: vertical-rl !important; text-orientation: upright !important;
  letter-spacing: 3px !important; text-align: center !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  height: auto !important; font-size: 13px !important;
  text-shadow: 0 1px 3px rgba(100,20,20,0.4) !important;
  animation: sidebar-tab-glow-red 4s ease-in-out infinite !important;
  min-height: 80px !important; position: relative !important; overflow: hidden !important;
}
#ai-chat-answer:last-of-type details.e:not([open]) > summary::before {
  content: '' !important; position: absolute !important;
  top: 8px !important; left: 50% !important; transform: translateX(-50%) !important;
  width: 16px !important; height: 16px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8,2 L10,6 L14,6.5 L11,9.5 L12,14 L8,11.5 L4,14 L5,9.5 L2,6.5 L6,6 Z' fill='none' stroke='rgba(255,255,255,0.55)' stroke-width='1'/%3E%3C/svg%3E") !important;
  background-size: contain !important; background-repeat: no-repeat !important;
  border: none !important; border-radius: 0 !important;
}
#ai-chat-answer:last-of-type details.e[open] {
  top: 60px !important; width: 350px !important; max-height: 70vh !important;
  right: 35px !important; background: rgba(255,255,255,0.98) !important;
  border: 2px solid #E53E3E !important; border-right: none !important;
  border-radius: 14px 0 0 14px !important;
  box-shadow: -4px 4px 30px rgba(197,48,48,0.2), 0 0 60px rgba(252,180,180,0.12) !important;
  overflow-y: auto !important; overflow-x: hidden !important;
}
#ai-chat-answer:last-of-type details.e[open] > summary {
  writing-mode: horizontal-tb !important; padding: 14px 50px 14px 18px !important;
  background: linear-gradient(135deg, #FC8181, #E53E3E, #C53030) !important;
  color: #fff !important; border-bottom: 2px solid rgba(255,255,255,0.2) !important;
  border-radius: 12px 0 0 0 !important; margin-bottom: 0 !important;
  position: sticky !important; top: 0 !important; z-index: 100 !important;
  text-align: left !important; display: flex !important; justify-content: flex-start !important;
  font-size: 15px !important; letter-spacing: 2.5px !important;
  text-shadow: 0 1px 4px rgba(80,20,20,0.3) !important;
  animation: none !important; min-height: 0 !important; box-shadow: none !important;
}
#ai-chat-answer:last-of-type details.e[open] > summary::before {
  content: '⚡' !important; margin-right: 8px !important; font-size: 14px !important;
  position: static !important; transform: none !important;
  border: none !important; width: auto !important; height: auto !important; background: none !important;
}
#ai-chat-answer:last-of-type details.e[open] > summary::after {
  content: '×' !important; position: absolute !important; right: 14px; top: 50%;
  transform: translateY(-50%); font-size: 22px !important;
  color: rgba(255,255,255,0.7) !important; font-weight: 300 !important;
}
#ai-chat-answer:last-of-type details.e[open]::-webkit-scrollbar { width: 5px; }
#ai-chat-answer:last-of-type details.e[open]::-webkit-scrollbar-track { background: rgba(229,62,62,0.06); }
#ai-chat-answer:last-of-type details.e[open]::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(229,62,62,0.35), rgba(197,48,48,0.25)); border-radius: 3px;
}

/* --- .ei 事件条目 --- */
.ei-h {
  display: flex !important; justify-content: space-between !important;
  align-items: center !important; padding: 10px 14px !important;
  margin: 14px 0 10px 0 !important;
  background: linear-gradient(90deg, rgba(229,62,62,0.04), rgba(255,255,255,0.8), rgba(229,62,62,0.04)) !important;
  border: 1px solid rgba(229,62,62,0.12) !important; border-radius: 8px !important;
  font-size: 12px !important; color: #4A5568 !important; letter-spacing: 1px !important;
}
.ei-h > span:first-child::before { content: '⛩ ' !important; }
.ei-h > span:last-child {
  padding: 2px 10px !important; border-radius: 8px !important;
  font-weight: 700 !important; font-size: 11px !important;
  background: rgba(229,62,62,0.06) !important;
  border: 1px solid rgba(229,62,62,0.15) !important; color: #E53E3E !important;
}
.ei {
  position: relative !important; margin: 10px 0 !important; padding: 12px 14px !important;
  background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,250,255,0.85) 100%) !important;
  border: 1px solid rgba(229,62,62,0.12) !important;
  border-left: 3px solid #E53E3E !important; border-radius: 0 12px 12px 0 !important;
  transition: all 0.3s ease !important;
}
.ei:hover { background: rgba(255,255,255,0.98) !important; transform: translateX(3px) !important; }
.ei-n {
  display: flex !important; justify-content: space-between !important;
  font-size: 14px !important; font-weight: 700 !important; color: #1A1F36 !important;
  margin-bottom: 8px !important; padding-bottom: 8px !important;
  border-bottom: 1px dashed rgba(229,62,62,0.15) !important;
}
.ei-t {
  font-size: 11px !important; font-weight: 700 !important; padding: 3px 10px !important;
  border-radius: 8px !important; background: rgba(229,62,62,0.06) !important;
  border: 1px solid rgba(229,62,62,0.2) !important; color: #E53E3E !important;
}
.ei > p { font-size: 13px !important; line-height: 1.7 !important; color: #4A5568 !important; margin: 0 !important; }
.ei-s {
  margin: 14px 0 8px 0 !important; padding: 12px 14px !important;
  background: linear-gradient(135deg, rgba(74,108,247,0.03), rgba(229,62,62,0.03)) !important;
  border: 1px solid rgba(74,108,247,0.15) !important; border-radius: 12px !important;
}
.ei-s .classUI-subsection { color: #E53E3E !important; border-bottom-color: rgba(229,62,62,0.15) !important; margin-top: 0 !important; }
.ei-s > p { font-size: 13px !important; line-height: 1.7 !important; color: #1A1F36 !important; margin: 0 !important; }


/* =============================================
 * 据点仓库 details[depot] — 咒术版
 * ============================================= */
details[depot] {
  --grid-size: 56px; --gap: 6px; --panel-h: 1120px;
  --bg-panel: rgba(248,250,255,0.98); --bg-item: rgba(255,255,255,0.9);
  --text-main: #1A1F36; --text-sub: #7B2FF2;
  --border: rgba(74,108,247,0.2); --accent: #4A6CF7;
  --q-yiban: #2D2B55; --q-youzhi: #48BB78; --q-jingliang: #4A6CF7;
  --q-shishi: #7B2FF2; --q-chuanshuo: #E53E3E; --q-yuangu: #C53030;
  display: block !important; margin: 12px 0 !important;
  font-family: 'Georgia', 'Noto Serif SC', serif !important; position: relative !important;
}
details[depot] > summary {
  cursor: pointer !important; list-style: none !important; display: flex !important;
  align-items: center !important; gap: 10px !important; font-weight: 700 !important;
  font-size: 14px !important; color: var(--accent) !important;
  padding: 10px 14px 10px 36px !important;
  background: linear-gradient(90deg, rgba(74,108,247,0.06), rgba(179,197,255,0.04), rgba(74,108,247,0.06)) !important;
  border: 1px solid var(--border) !important; border-left: 3px solid var(--accent) !important;
  border-radius: 8px !important; position: relative !important; z-index: 10 !important;
}
details[depot] > summary::before {
  content: '🏠' !important; position: absolute !important; left: 10px !important;
  top: 50% !important; transform: translateY(-50%) !important; font-size: 16px !important;
}
details[depot] > summary::after {
  content: '' !important; position: absolute !important; right: 14px !important; top: 50% !important;
  width: 8px !important; height: 8px !important;
  border-right: 2px solid var(--accent) !important; border-top: 2px solid var(--accent) !important;
  transform: translateY(-50%) rotate(-45deg) !important;
}
details[depot][open] > summary::after { transform: translateY(-50%) rotate(135deg) !important; border-color: #7B2FF2 !important; }
details[depot] > panel {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-size), 1fr)) !important;
  gap: var(--gap) !important; padding: 36px 12px 12px 12px !important;
  background: var(--bg-panel) !important; border: 1px solid var(--border) !important;
  border-bottom: none !important; border-left: 3px solid var(--accent) !important;
  border-radius: 12px 12px 0 0 !important; max-height: var(--panel-h) !important;
  overflow: visible !important;
  box-shadow: 0 -4px 20px rgba(26,31,54,0.12) !important;
  position: absolute !important; left: 0 !important; right: 0 !important;
  bottom: calc(100% - 1px) !important; z-index: 100 !important;
}
details[depot] > panel::before {
  content: '🏠 据点仓库' !important; position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; height: 28px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: linear-gradient(90deg, rgba(74,108,247,0.08), rgba(179,197,255,0.06), rgba(74,108,247,0.08)) !important;
  border-bottom: 1px solid rgba(74,108,247,0.15) !important;
  font-size: 11px !important; font-weight: 700 !important; color: #7B2FF2 !important; letter-spacing: 3px !important;
}
details[depot] > panel > b {
  display: flex !important; align-items: center !important; justify-content: center !important;
  aspect-ratio: 1/1 !important; background: var(--bg-item) !important;
  border: 1px solid var(--border) !important; color: var(--text-main) !important;
  font-weight: 600 !important; font-size: 11px !important; cursor: help !important;
  position: static !important; border-radius: 8px !important; padding: 4px !important;
  word-break: break-all !important; line-height: 1.3 !important; overflow: visible !important;
}
details[depot] > panel > b:hover { z-index: 10 !important; transform: scale(1.08) !important; background: #FFFFFF !important; }
details[depot] > panel > b > i {
  position: fixed !important; top: 50% !important; left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 90px !important; max-width: 45vw !important; max-height: 85vh !important;
  overflow-y: auto !important; background: rgba(255,255,255,0.99) !important;
  border: 1px solid rgba(74,108,247,0.35) !important;
  border-left: 3px solid #7B2FF2 !important;
  padding: 12px 10px !important; border-radius: 12px !important;
  box-shadow: 0 8px 30px rgba(26,31,54,0.3) !important;
  opacity: 0 !important; visibility: hidden !important; pointer-events: none !important;
  font-style: normal !important; font-size: 11px !important; line-height: 1.7 !important;
  color: var(--text-main) !important; z-index: 2147483647 !important;
}
details[depot] > panel > b > i::before {
  content: '🏠 据点存档' !important; display: block !important;
  font-size: 10px !important; font-weight: 700 !important; color: #7B2FF2 !important;
  margin-bottom: 6px !important; padding-bottom: 6px !important;
  border-bottom: 1px solid rgba(123,47,242,0.2) !important;
}
details[depot] > panel > b:hover > i { opacity: 1 !important; visibility: visible !important; }
details[depot] > panel > b[q="yiban"] { color: var(--q-yiban) !important; border-color: var(--q-yiban) !important; }
details[depot] > panel > b[q="youzhi"] { color: var(--q-youzhi) !important; border-color: var(--q-youzhi) !important; }
details[depot] > panel > b[q="jingliang"] { color: var(--q-jingliang) !important; border-color: var(--q-jingliang) !important; }
details[depot] > panel > b[q="shishi"] { color: var(--q-shishi) !important; border-color: var(--q-shishi) !important; }
details[depot] > panel > b[q="chuanshuo"] { color: var(--q-chuanshuo) !important; border-color: var(--q-chuanshuo) !important; }
details[depot] > panel > b[q="yuangu"] { color: var(--q-yuangu) !important; border-color: var(--q-yuangu) !important; animation: inv-item-glow 2.5s ease-in-out infinite !important; }
details[depot], details[depot] > panel { overflow: visible !important; }


/* =============================================
 * 交易终端 — 咒术版
 * ============================================= */
@keyframes sp-blink-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@keyframes sp-cmd-cursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes sp-header-pipe { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }
@keyframes sp-yuangu-pulse { 0%, 100% { box-shadow: inset 3px 0 0 var(--color-yuangu), 0 0 6px rgba(197,48,48,0.2); } 50% { box-shadow: inset 3px 0 0 var(--color-yuangu), 0 0 14px rgba(197,48,48,0.4); } }
@keyframes sp-balance-shimmer { 0%, 100% { text-shadow: 0 0 4px rgba(74,108,247,0.3); } 50% { text-shadow: 0 0 10px rgba(74,108,247,0.6); } }

.sp-vendor-ui {
  position: relative; width: 100%; margin: 20px 0;
  font-family: 'Georgia', 'Noto Serif SC', serif; color: #1A1F36;
  background: linear-gradient(180deg, rgba(248,250,255,0.98) 0%, rgba(244,246,255,0.96) 30%, rgba(240,243,255,0.94) 100%);
  border: 2px solid rgba(74,108,247,0.3); border-radius: 16px;
  box-shadow: 0 6px 24px rgba(26,31,54,0.08); overflow: hidden;
}
.sp-vendor-ui::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent 0%, #B3C5FF 15%, #4A6CF7 35%, #7B2FF2 50%, #4A6CF7 65%, #B3C5FF 85%, transparent 100%);
  background-size: 200% 100%; animation: sp-header-pipe 5s linear infinite; z-index: 5;
}
.sp-vendor-ui::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent 0%, rgba(74,108,247,0.4) 20%, rgba(179,197,255,0.6) 50%, rgba(74,108,247,0.4) 80%, transparent 100%);
  z-index: 5;
}
.sp-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; padding: 14px 18px 12px;
  background: linear-gradient(135deg, rgba(74,108,247,0.08) 0%, rgba(179,197,255,0.1) 40%, rgba(255,255,255,0.85) 70%, rgba(74,108,247,0.06) 100%);
  border-bottom: 1px solid rgba(74,108,247,0.2); position: relative;
}
.sp-header > * { position: relative; z-index: 1; }
.sp-title-box { display: flex; align-items: center; gap: 10px; }
.sp-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; background: linear-gradient(135deg, #4A6CF7, #7B2FF2);
  color: #fff; border-radius: 50%; font-size: 16px;
  border: 2px solid rgba(179,197,255,0.5); box-shadow: 0 2px 8px rgba(74,108,247,0.3);
}
.sp-vendor-name { margin: 0; font-size: 16px; font-weight: 700; color: #1A1F36; letter-spacing: 1.5px; }
.sp-sub { font-size: 13px; font-weight: 600; color: #7B2FF2; letter-spacing: 1px; }
.sp-connection {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; color: #7B2FF2;
  padding: 4px 12px; background: rgba(255,255,255,0.7);
  border: 1px solid rgba(74,108,247,0.15); border-radius: 8px;
}
.sp-blink { color: #48BB78; font-size: 10px; animation: sp-blink-dot 1.6s ease-in-out infinite; }
.sp-balance-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px; padding: 10px 18px;
  background: linear-gradient(90deg, rgba(179,197,255,0.1) 0%, rgba(255,255,255,0.9) 50%, rgba(179,197,255,0.1) 100%);
  border-bottom: 1px solid rgba(74,108,247,0.1);
}
.sp-bal-label { font-size: 12px; font-weight: 600; color: #7B2FF2; letter-spacing: 2px; }
.sp-bal-value { font-size: 15px; font-weight: 700; color: #4A6CF7; animation: sp-balance-shimmer 3.5s ease-in-out infinite; }
.sp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; }
.sp-col { padding: 14px 16px; border-right: 1px dashed rgba(74,108,247,0.1); border-bottom: 1px dashed rgba(74,108,247,0.1); }
.sp-col:nth-child(2n) { border-right: none; }
.sp-col.sp-full-width { grid-column: 1 / -1; border-right: none; border-bottom: none; }
.sp-cat-title {
  margin: 0 0 12px; padding: 8px 12px; font-size: 13px; font-weight: 700;
  letter-spacing: 2px; color: #1A1F36; border-bottom: 2px solid rgba(74,108,247,0.2);
  position: relative;
}
.sp-cat-title::before { content: ''; position: absolute; bottom: -2px; left: 0; width: 40px; height: 2px; }
.sp-cat-title[data-type="core"]::before { background: #4A6CF7; }
.sp-cat-title[data-type="consumable"]::before { background: #48BB78; }
.sp-cat-title[data-type="special"]::before { background: #7B2FF2; }
.sp-item-list { list-style: none; margin: 0; padding: 0; }
.sp-item-list.sp-horizontal { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.sp-item {
  position: relative; margin: 0 0 10px; padding: 10px 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(248,250,255,0.88) 100%);
  border: 1px solid rgba(74,108,247,0.12); border-left: 3px solid #4A6CF7;
  border-radius: 0 12px 12px 0; transition: all 0.3s ease; overflow: hidden;
}
.sp-item:last-child { margin-bottom: 0; }
.sp-item:hover { transform: translateX(4px); background: rgba(255,255,255,0.98); box-shadow: 0 3px 12px rgba(26,31,54,0.08); }
.sp-item::after {
  content: ''; position: absolute; top: 0; left: -100%; bottom: 0; width: 60%;
  background: linear-gradient(90deg, transparent, rgba(179,197,255,0.12), transparent);
  transition: left 0.6s ease; pointer-events: none;
}
.sp-item:hover::after { left: 120%; }
.sp-item.tier-yiban { border-left-color: var(--color-rumen); }
.sp-item.tier-youzhi { border-left-color: var(--color-zhongduan); }
.sp-item.tier-jingliang { border-left-color: var(--color-gaoduan); }
.sp-item.tier-shishi { border-left-color: var(--color-zhuanye); }
.sp-item.tier-chuanshuo { border-left-color: var(--color-chuanqi); }
.sp-item.tier-yuangu { border-left-color: #C53030; animation: sp-yuangu-pulse 2.5s ease-in-out infinite; }
.sp-item.tier-yiban .sp-i-name { color: var(--color-rumen); }
.sp-item.tier-youzhi .sp-i-name { color: var(--color-zhongduan); }
.sp-item.tier-jingliang .sp-i-name { color: var(--color-gaoduan); }
.sp-item.tier-shishi .sp-i-name { color: var(--color-zhuanye); }
.sp-item.tier-chuanshuo .sp-i-name { color: var(--color-chuanqi); }
.sp-item.tier-yuangu .sp-i-name { color: #C53030; }
.sp-i-name::before { display: inline-block; margin-right: 6px; font-size: 0.85em; }
.sp-item.tier-yiban .sp-i-name::before { content: '·'; }
.sp-item.tier-youzhi .sp-i-name::before { content: '◆'; color: var(--color-zhongduan); }
.sp-item.tier-jingliang .sp-i-name::before { content: '◆'; color: var(--color-gaoduan); }
.sp-item.tier-shishi .sp-i-name::before { content: '◈'; color: var(--color-zhuanye); }
.sp-item.tier-chuanshuo .sp-i-name::before { content: '✦'; color: var(--color-chuanqi); }
.sp-item.tier-yuangu .sp-i-name::before { content: '⛩'; color: #C53030; }
.sp-i-top { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.sp-i-name { font-size: 14px; font-weight: 700; letter-spacing: 0.8px; }
.sp-i-price {
  font-size: 13px; font-weight: 700; color: #7B2FF2; white-space: nowrap;
  padding: 2px 10px; background: rgba(74,108,247,0.05);
  border: 1px solid rgba(74,108,247,0.15); border-radius: 8px;
}
.sp-i-desc { font-size: 12px; line-height: 1.65; color: #4A5568; text-align: justify; }
.sp-footer {
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(240,243,255,0.6) 0%, rgba(248,250,255,0.95) 100%);
  border-top: 1px solid rgba(74,108,247,0.15); position: relative;
}
.sp-footer::before {
  content: ''; position: absolute; top: -1px; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(179,197,255,0.5), transparent);
}
.sp-cmd { margin: 0 0 10px; font-size: 12px; font-weight: 700; color: #7B2FF2; letter-spacing: 1.5px; }
.sp-cmd::after { content: '▮'; display: inline-block; margin-left: 2px; color: #4A6CF7; animation: sp-cmd-cursor 1s steps(1) infinite; }
.sp-quote {
  margin: 0; font-size: 13px; line-height: 1.7; color: #4A5568; font-style: normal;
  padding: 10px 14px; background: rgba(255,255,255,0.6);
  border-left: 3px solid #B3C5FF; border-radius: 0 12px 12px 0;
}
.sp-npc-tag { font-style: normal; font-weight: 700; color: #7B2FF2; }


/* =============================================
 * 歌词 · lyrics — 咒术版
 * ============================================= */
@keyframes lyr-glow {
  0%,100% { text-shadow: 0 0 6px rgba(123,47,242,0.3); }
  50% { text-shadow: 0 0 14px rgba(123,47,242,0.6), 0 0 28px rgba(74,108,247,0.25); }
}
@keyframes lyr-border {
  0%,100% { border-color: rgba(74,108,247,0.25); }
  50% { border-color: rgba(74,108,247,0.5); }
}
.styled-prose-container lyrics {
  display: block; position: relative; margin: 20px 0; padding: 28px 24px;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(74,108,247,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(179,197,255,0.1) 0%, transparent 50%),
    linear-gradient(160deg, #F0F3FF 0%, #E4EBFF 40%, #F8FAFF 100%);
  border: 2px solid rgba(74,108,247,0.25); border-radius: 16px;
  text-align: center; font-family: 'Georgia', 'Noto Serif SC', serif;
  line-height: 2.4; color: #7B2FF2; font-size: 15px;
  letter-spacing: 2px; overflow: hidden;
  animation: lyr-border 4s ease-in-out infinite;
  box-shadow: 0 4px 20px rgba(74,108,247,0.1), inset 0 0 30px rgba(255,255,255,0.6);
}
.styled-prose-container lyrics em {
  display: block; font-style: normal; font-size: 19px; font-weight: 900;
  color: #4A6CF7; letter-spacing: 4px; padding: 10px 0;
  animation: lyr-glow 2.5s ease-in-out infinite;
}


/* =============================================
 * BGM播放器 — 咒术版
 * ============================================= */
@keyframes bgm-glow-pulse {
  0%, 100% { box-shadow: 0 3px 16px rgba(74,108,247,0.18); }
  50%       { box-shadow: 0 5px 24px rgba(74,108,247,0.38), 0 0 0 3px rgba(74,108,247,0.07); }
}
@keyframes bgm-border-flow {
  0%   { border-color: rgba(74,108,247,0.30); }
  50%  { border-color: rgba(123,47,242,0.55); }
  100% { border-color: rgba(74,108,247,0.30); }
}

audio.classUI-audio-player {
  display: block !important; width: 100% !important; height: 44px !important;
  margin: 8px 0 !important; border-radius: 22px !important;
  outline: none !important; cursor: pointer !important;
  background: linear-gradient(135deg,
    rgba(248,250,255,0.98) 0%, rgba(240,243,255,0.95) 50%, rgba(248,250,255,0.98) 100%) !important;
  border: 1.5px solid rgba(74,108,247,0.30) !important;
  box-shadow: 0 3px 16px rgba(74,108,247,0.18) !important;
  animation: bgm-glow-pulse 4s ease-in-out infinite, bgm-border-flow 4s ease-in-out infinite !important;
  accent-color: #4A6CF7 !important; color-scheme: light !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}
audio.classUI-audio-player:hover {
  box-shadow: 0 5px 24px rgba(74,108,247,0.30), 0 0 0 3px rgba(74,108,247,0.08) !important;
  border-color: rgba(123,47,242,0.50) !important;
}


/* =============================================
 * 全局防斜体
 * ============================================= */
.styled-prose-container em,
.styled-prose-container i:not([class]) {
  font-style: normal !important;
}


/* =============================================
 * 响应式补全 — 768px / 480px
 * ============================================= */
@media (max-width: 768px) {
  details[inv] { --grid-size: 50px !important; --gap: 5px !important; --panel-h: 960px !important; }
  details[inv] > summary { font-size: 13px !important; padding: 8px 12px 8px 32px !important; }
  details[inv] > panel { padding: 32px 10px 10px 10px !important; }
  details[inv] > panel > b { font-size: 10px !important; }
  details[inv] > panel > b > i { width: 125px !important; max-width: 50vw !important; font-size: 10px !important; }

  .k-track { margin: 10px 0 !important; }
  .k-head { padding: 10px 14px 10px 38px !important; font-size: 13px !important; }
  .k-row { padding: 8px 10px 8px 44px !important; }
  .k-tag { width: 24px !important; height: 24px !important; font-size: 11px !important; }

  pre div[node="[object Object]"] {
    padding: 12px 16px 12px 52px !important; font-size: 1em !important;
    background: #F8FAFF !important;
  }
  pre div[node="[object Object]"]::before { width: 24px; height: 24px; font-size: 0.85em; left: 14px; }
  pre div[data-tooltip-id]::before { display: none !important; }

  .styled-prose-container news { border-radius: 12px !important; }
  .styled-prose-container news h3 {
    font-size: 15px !important; padding: 12px 14px !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  .styled-prose-container news item {
    padding: 12px 14px !important; font-size: 14px !important;
    grid-template-columns: 34px 1fr !important;
  }
  .styled-prose-container news item label {
    width: 34px !important; height: 34px !important; min-width: 34px !important; font-size: 9px !important;
  }
  .styled-prose-container news item label:hover { transform: none !important; }
  .styled-prose-container news item:hover { background: #fff !important; }

  .styled-prose-container board { border-radius: 12px !important; }
  .styled-prose-container board h3 {
    font-size: 15px !important; padding: 12px 44px !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  .styled-prose-container board item {
    grid-template-columns: 36px 1fr !important; padding: 7px 12px !important;
  }
  .styled-prose-container board item label {
    width: 36px !important; height: 36px !important; min-width: 36px !important; font-size: 9px !important;
  }
  .styled-prose-container board item label:hover { transform: none !important; }
  .styled-prose-container board item:not(.w)::before { left: 52px !important; }
  .styled-prose-container board item::after { left: 47px !important; }
  .styled-prose-container board::after { height: 38px !important; }

  .styled-prose-container details.e { transition: none !important; }
  #ai-chat-answer:last-of-type details.e[open] { width: 300px !important; box-shadow: none !important; }
  #ai-chat-answer:last-of-type details.e:not([open]) > summary {
    width: 32px !important; min-height: 65px !important; font-size: 11px !important; letter-spacing: 2px !important;
  }
  #ai-chat-answer:last-of-type details.e { top: 410px !important; }
  .ei:hover { transform: none !important; }

  details[depot] { --grid-size: 50px !important; --gap: 5px !important; }
  details[depot] > summary { font-size: 13px !important; }
  details[depot] > panel > b { font-size: 10px !important; }

  .sp-vendor-ui { margin: 14px 0; }
  .sp-grid { grid-template-columns: 1fr; }
  .sp-col { border-right: none; }
  .sp-header { flex-direction: column; align-items: flex-start; padding: 12px 14px; }
  .sp-item:hover { transform: none; }
  .sp-item::after { display: none; }
  .sp-item-list.sp-horizontal { grid-template-columns: 1fr; }

  .styled-prose-container lyrics { padding: 20px 16px; font-size: 13px; }
  .styled-prose-container lyrics em { font-size: 16px; }

  audio.classUI-audio-player {
    height: 40px !important; border-radius: 20px !important;
    animation: none !important; box-shadow: 0 2px 8px rgba(74,108,247,0.12) !important;
  }
}

@media (max-width: 480px) {
  #ai-chat-answer:last-of-type details.e[open] { width: 270px !important; }
  #ai-chat-answer:last-of-type details.e:not([open]) > summary {
    width: 28px !important; min-height: 55px !important; font-size: 10px !important; letter-spacing: 1.5px !important;
  }
  #ai-chat-answer:last-of-type details.e { top: 340px !important; }

  details[inv] { --grid-size: 44px !important; --gap: 4px !important; }
  details[inv] > summary { font-size: 12px !important; padding: 6px 10px 6px 28px !important; }
  details[inv] > panel > b { font-size: 9px !important; }
  details[inv] > panel > b > i { width: 115px !important; font-size: 9px !important; }

  details[depot] { --grid-size: 44px !important; --gap: 4px !important; }

  .styled-prose-container news item { grid-template-columns: 30px 1fr !important; gap: 0 8px !important; }
  .styled-prose-container news item label { width: 30px !important; height: 30px !important; min-width: 30px !important; }
  .styled-prose-container news item:hover { transform: none !important; }

  .styled-prose-container board item { grid-template-columns: 34px 1fr !important; gap: 0 8px !important; padding: 6px 10px !important; }
  .styled-prose-container board item label { width: 34px !important; height: 34px !important; min-width: 34px !important; font-size: 9px !important; }
  .styled-prose-container board item:not(.w)::before { left: 48px !important; right: 10px !important; }
  .styled-prose-container board item::after { left: 43px !important; }
  .styled-prose-container board::after { height: 34px !important; }
  .styled-prose-container board item:hover { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-vendor-ui::before, .sp-item.tier-yuangu, .sp-blink, .sp-cmd::after, .sp-bal-value { animation: none !important; }
  .sp-item:hover { transform: none !important; }
  .ei:hover { transform: none !important; }
  details[depot] > panel > b[q="yuangu"] { animation: none !important; }
  #ai-chat-answer:last-of-type details.e:not([open]) > summary { animation: none !important; }
  .styled-prose-container [class*=card-body-chuanqi] { animation: none; }
  .k-row.e.pulse, .k-row.g.pulse, .k-bar::before, .k-head::before,
  .k-none::before, details[inv] > panel > b[q="yuangu"] { animation: none !important; }
  .k-bar::after { transition: none !important; }
  .k-row:hover, details[inv] > panel > b:hover { transform: none !important; }
  .styled-prose-container lyrics, .styled-prose-container lyrics em { animation: none; }
  audio.classUI-audio-player { animation: none !important; box-shadow: 0 2px 8px rgba(74,108,247,0.15) !important; }
}

/* === END OF JJK BRIGHT THEME — 补全部分 === */
/* =============================================
 * 咒術廻戦 · 明亮テーマ — 任務追踪模块补丁
 * quest > q.main / q.side / q > s
 * 参照斗罗大陆 top-info > quest 结构，JJK 蓝紫红配色
 * ============================================= */

/* --- 任务容器：hover 展开 --- */
.top-info > quest {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    flex-basis: 100% !important;
    padding: 0 14px !important;
    line-height: 1.7 !important;
    background: linear-gradient(180deg, rgba(74,108,247,0.03), rgba(123,47,242,0.02)) !important;
    border-top: 1px solid rgba(74,108,247,0.2) !important;
    z-index: 1 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s ease,
                padding 0.35s ease !important;
}

/* --- "任務" 标签徽章 — 赫 #E53E3E --- */
.top-info > quest::before {
    content: '任務' !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    left: 14px !important;
    top: 14px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #fff !important;
    letter-spacing: 1px !important;
    font-family: 'Georgia', 'Noto Serif SC', serif !important;
    padding: 5px 10px !important;
    clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
    background: linear-gradient(135deg, #E53E3E 0%, #C53030 100%) !important;
    box-shadow: 0 2px 8px rgba(229,62,62,0.4), inset 0 1px 0 rgba(255,255,255,0.3) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

/* --- hover 展开动画 --- */
.top-info:hover > quest {
    max-height: 300px !important;
    opacity: 1 !important;
    padding-top: 14px !important;
    padding-bottom: 16px !important;
    padding-left: 80px !important;
}

.top-info:hover > quest::before {
    opacity: 1 !important;
}

/* --- 任务条目 q 通用 --- */
.top-info > quest > q {
    display: block !important;
    padding: 10px 14px !important;
    margin: 6px 0 !important;
    font-size: 14px !important;
    color: #1A1F36 !important;
    line-height: 1.6 !important;
    letter-spacing: 0.5px !important;
    quotes: none !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    background: rgba(255,255,255,0.75) !important;
    border-radius: 8px !important;
    border-left: 3px solid transparent !important;
    box-shadow: 0 2px 8px rgba(74,108,247,0.06) !important;
    position: relative !important;
    transition: all 0.25s ease !important;
}

.top-info > quest > q:hover {
    background: rgba(240,243,255,0.95) !important;
    box-shadow: 0 4px 15px rgba(74,108,247,0.12) !important;
}

/* --- 主线 q.main — 咒力蓝 #4A6CF7 --- */
.top-info > quest > q.main {
    border-left-color: #4A6CF7 !important;
}

.top-info > quest > q.main::before {
    content: '◆' !important;
    color: #4A6CF7 !important;
    margin-right: 8px !important;
    font-size: 11px !important;
    text-shadow: 0 0 8px rgba(74,108,247,0.6) !important;
}

/* --- 支线 q.side — 领域紫 #7B2FF2 --- */
.top-info > quest > q.side {
    border-left-color: #7B2FF2 !important;
}

.top-info > quest > q.side::before {
    content: '◇' !important;
    color: #7B2FF2 !important;
    margin-right: 8px !important;
    font-size: 11px !important;
    text-shadow: 0 0 8px rgba(123,47,242,0.6) !important;
}

/* --- 状态标签 <s> — 蓝紫渐变底 --- */
.top-info > quest > q > s {
    text-decoration: none !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    margin-left: 10px !important;
    letter-spacing: 0.5px !important;
    white-space: nowrap !important;
    display: inline-block !important;
    background: linear-gradient(135deg, rgba(74,108,247,0.12), rgba(123,47,242,0.08)) !important;
    color: #4A6CF7 !important;
    border: 1px solid rgba(74,108,247,0.25) !important;
    box-shadow: 0 1px 4px rgba(74,108,247,0.12) !important;
}

/* --- 响应式 --- */
@media (max-width: 768px) {
    .top-info > quest {
        padding: 10px 12px !important;
        padding-left: 100px !important;
    }
    .top-info:hover > quest {
        padding-left: 12px !important;
    }
    .top-info > quest::before {
        display: none !important;
    }
    .top-info > quest > q {
        margin-left: 0 !important;
        font-size: 12px !important;
        padding: 8px 12px !important;
        box-shadow: none !important;
    }
    .top-info > quest > q > s {
        font-size: 10px !important;
        padding: 2px 6px !important;
    }
}
/* =============================================
 * 咒術廻戦 · 明亮テーマ — area-map 补丁
 * 可移动区域模块 — .top-info > area-map > region
 * 结构与 quest 模块一致: 默认折叠, hover 展开
 * ============================================= */

/* --- 容器: 默认折叠 --- */
.top-info > area-map {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    flex-basis: 100% !important;
    padding: 0 14px !important;
    line-height: 1.7 !important;
    background: linear-gradient(180deg, rgba(229,62,62,0.03), rgba(56,178,172,0.02)) !important;
    border-top: 1px solid rgba(229,62,62,0.15) !important;
    z-index: 1 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.35s ease,
                padding 0.35s ease !important;
}

/* --- "可移動区域" 徽章: 默认隐藏 --- */
.top-info > area-map::before {
    content: '探索' !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    left: 14px !important;
    top: 14px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #fff !important;
    letter-spacing: 1px !important;
    font-family: 'Georgia', 'Noto Serif SC', serif !important;
    padding: 5px 10px !important;
    clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
    background: linear-gradient(135deg, #38B2AC 0%, #2C7A7B 100%) !important;
    box-shadow: 0 2px 8px rgba(56,178,172,0.4), inset 0 1px 0 rgba(255,255,255,0.3) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

/* --- hover 展开 --- */
.top-info:hover > area-map {
    max-height: 350px !important;
    opacity: 1 !important;
    padding-top: 14px !important;
    padding-bottom: 16px !important;
    padding-left: 80px !important;
}

.top-info:hover > area-map::before {
    opacity: 1 !important;
}

/* --- region 条目 --- */
.top-info > area-map > region {
    display: block !important;
    position: relative !important;
    padding: 9px 14px 9px 22px !important;
    margin: 5px 0 !important;
    font-size: 13.5px !important;
    color: #1A1F36 !important;
    line-height: 1.6 !important;
    letter-spacing: 0.3px !important;
    quotes: none !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    background: rgba(255,255,255,0.7) !important;
    border-radius: 6px !important;
    border-left: 3px solid #38B2AC !important;
    box-shadow: 0 1px 6px rgba(56,178,172,0.08) !important;
    transition: all 0.25s ease !important;
}

/* 条目前导图标 ◈ */
.top-info > area-map > region::before {
    content: '◈' !important;
    position: absolute !important;
    left: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #38B2AC !important;
    font-size: 10px !important;
    text-shadow: 0 0 6px rgba(56,178,172,0.5) !important;
}

.top-info > area-map > region:hover {
    background: rgba(240,255,254,0.9) !important;
    border-left-color: #2C7A7B !important;
    box-shadow: 0 3px 12px rgba(56,178,172,0.15) !important;
}

/* region 之间分隔线 */
.top-info > area-map > region + region {
    margin-top: 4px !important;
    border-top: 1px dashed rgba(56,178,172,0.12) !important;
    padding-top: 10px !important;
}

/* --- 响应式 --- */
@media (max-width: 768px) {
    .top-info > area-map::before {
        display: none !important;
    }
    .top-info:hover > area-map {
        padding-left: 12px !important;
        padding-right: 12px !important;
        max-height: 280px !important;
    }
    .top-info > area-map > region {
        font-size: 12px !important;
        padding: 7px 10px 7px 18px !important;
        margin: 3px 0 !important;
    }
    .top-info > area-map > region::before {
        left: 4px !important;
        font-size: 8px !important;
    }
}
/* =============================================
 * 领域展开 — .in-domain 持续状态补丁
 * ============================================= */
.classUI-story p.in-domain {
  position: relative;
  background: linear-gradient(90deg,
    rgba(123,47,242,0.04) 0%,
    rgba(74,108,247,0.06) 50%,
    rgba(123,47,242,0.04) 100%);
  border-left: 2px solid rgba(123,47,242,0.35);
  padding-left: 16px;
  margin-left: -4px;
  animation: domain-expand-pulse 3s ease-in-out infinite;
}
/* =============================================
 * <calc> 记忆配置自检面板 — 咒术版
 * ============================================= */
.styled-prose-container calc {
  display: block;
  margin: 14px 0;
  padding: 14px 16px;
  font-family: 'Consolas', 'Source Code Pro', monospace;
  font-size: 12px;
  line-height: 1.8;
  color: #4A5568;
  background:
    linear-gradient(135deg, rgba(248,250,255,0.95) 0%, rgba(240,243,255,0.9) 100%);
  border: 1px solid rgba(74,108,247,0.18);
  border-left: 3px solid #38B2AC;
  border-radius: 0 10px 10px 0;
  position: relative;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: 0 2px 10px rgba(26,31,54,0.04);
  overflow: hidden;
}

/* 顶部标识条 */
calc::before {
  content: '⛩ 記憶自檢 // MEMORY DIAGNOSTICS';
  display: block;
  font-size: 10px;
  font-weight: 700;
  font-family: 'Georgia', 'Noto Serif SC', serif;
  color: #38B2AC;
  letter-spacing: 2px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(56,178,172,0.25);
}

/* 底部状态线 */
calc::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
 background: linear-gradient(90deg, transparent, rgba(56,178,172,0.4), rgba(74,108,247,0.3), transparent);
}
/* 术式发动 — .jutsu 短促爆发 */
.classUI-story p.jutsu {
  position: relative;
  background: linear-gradient(90deg,
    rgba(74,108,247,0.06) 0%,
    rgba(123,47,242,0.08) 50%,
    rgba(74,108,247,0.06) 100%);
  border-left: 3px solid #4A6CF7;
  padding: 10px 16px;
  margin: 8px 0;
  border-radius: 0 8px 8px 0;
  animation: chuanqi-song-glow 2.5s ease-in-out infinite;
}
.classUI-story p.jutsu em {
  font-style: normal !important;
  font-weight: 900;
  color: #4A6CF7;
  letter-spacing: 3px;
  text-shadow: 0 0 8px rgba(74,108,247,0.4);
}
/* =============================================
 * 侧边栏展开宽度 — 移动端补丁 v1.4 (对齐樱花主题)
 * ============================================= */

@media (max-width: 768px) {
  #ai-chat-answer:last-of-type .env-sidebar[open],
  #ai-chat-answer:last-of-type .u[open],
  #ai-chat-answer:last-of-type .n[open],
  #ai-chat-answer:last-of-type details.p[open],
  #ai-chat-answer:last-of-type details.n[open],
  #ai-chat-answer:last-of-type details.ship[open],
  #ai-chat-answer:last-of-type details.m[open],
  #ai-chat-answer:last-of-type details.e[open] {
    width: 310px !important;
    right: 0 !important;
  }
}

@media (max-width: 480px) {
  #ai-chat-answer:last-of-type .env-sidebar[open],
  #ai-chat-answer:last-of-type .u[open],
  #ai-chat-answer:last-of-type .n[open],
  #ai-chat-answer:last-of-type details.p[open],
  #ai-chat-answer:last-of-type details.n[open],
  #ai-chat-answer:last-of-type details.ship[open],
  #ai-chat-answer:last-of-type details.m[open],
  #ai-chat-answer:last-of-type details.e[open] {
    width: 280px !important;
    right: 0 !important;
  }
}
calc { display: none !important; }
/* =============================================
 * 侧边栏折叠标签 — 安卓字体溢出修复补丁
 * ============================================= */

/* 所有折叠标签统一加溢出裁切 + 字号安全值 */
#ai-chat-answer:last-of-type .env-sidebar:not([open]) > summary,
#ai-chat-answer:last-of-type .u:not([open]) > summary,
#ai-chat-answer:last-of-type .n:not([open]) > summary,
#ai-chat-answer:last-of-type details.p:not([open]) > summary,
#ai-chat-answer:last-of-type details.ship:not([open]) > summary,
#ai-chat-answer:last-of-type details.m:not([open]) > summary,
#ai-chat-answer:last-of-type details.e:not([open]) > summary {
  overflow: hidden !important;
  text-overflow: clip !important;
  /* 强制用系统安全字体，避免第三方字体度量异常 */
  font-family: 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB',
               'Microsoft YaHei', system-ui, sans-serif !important;
  /* 竖排下用 mixed 比 upright 兼容性更好，
     CJK 依然竖排，拉丁/符号自动旋转 */
  text-orientation: mixed !important;
  -webkit-text-orientation: mixed !important;
  /* 防止行高把容器撑歪 */
  line-height: 1.1 !important;
}

@media (max-width: 768px) {
  #ai-chat-answer:last-of-type .env-sidebar:not([open]) > summary,
  #ai-chat-answer:last-of-type .u:not([open]) > summary,
  #ai-chat-answer:last-of-type .n:not([open]) > summary,
  #ai-chat-answer:last-of-type details.p:not([open]) > summary,
  #ai-chat-answer:last-of-type details.ship:not([open]) > summary,
  #ai-chat-answer:last-of-type details.m:not([open]) > summary,
  #ai-chat-answer:last-of-type details.e:not([open]) > summary {
    font-size: 11px !important;
    letter-spacing: 2px !important;
    /* 32px 宽度下给足内边距防字符贴边 */
    padding: 10px 2px !important;
  }
}

@media (max-width: 480px) {
  #ai-chat-answer:last-of-type .env-sidebar:not([open]) > summary,
  #ai-chat-answer:last-of-type .u:not([open]) > summary,
  #ai-chat-answer:last-of-type .n:not([open]) > summary,
  #ai-chat-answer:last-of-type details.p:not([open]) > summary,
  #ai-chat-answer:last-of-type details.ship:not([open]) > summary,
  #ai-chat-answer:last-of-type details.m:not([open]) > summary,
  #ai-chat-answer:last-of-type details.e:not([open]) > summary {
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
    padding: 8px 1px !important;
  }
}

/* .m 标签的 ::after 伪文字同步修复 */
#ai-chat-answer:last-of-type details.m:not([open]) > summary::after {
  font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif !important;
  text-orientation: mixed !important;
  -webkit-text-orientation: mixed !important;
  line-height: 1.1 !important;
}
/* --- 功能状态栏 (Function Bar) — 咒术版 --- */
.styled-prose-container fbar {
  display: block !important;
  text-align: center !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #7B2FF2 !important;
  letter-spacing: 1.5px !important;
  padding: 8px 14px !important;
  margin: 8px 0 0 0 !important;
  border-top: 1px dashed rgba(74,108,247,0.2) !important;
  font-family: 'Georgia', 'Noto Serif SC', serif !important;
  line-height: 1.8 !important;
}

/* =============================================
 * MOBILE PERFORMANCE OPTIMIZATION
 * P0: backdrop-filter removal
 * P0: infinite animation disable
 * P1: multi-layer box-shadow simplification
 * ============================================= */
@media (max-width: 768px) {

  /* === P0-1: 移除所有 backdrop-filter (移动端 GPU 杀手) === */
  *,
  *::before,
  *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* 为原本依赖 blur 的面板补偿半透明背景 */
  .sticky.w-full.top-0.flex.items-center {
    background: rgba(240, 243, 255, 0.97) !important;
  }
  .chat {
    background: rgba(248, 250, 255, 0.98) !important;
  }
  .bubble.npc {
    background: rgba(248, 250, 255, 0.96) !important;
  }
  .bubble.user {
    background: rgba(240, 243, 255, 0.96) !important;
  }
  #ai-chat-input {
    background: rgba(248, 250, 255, 0.97) !important;
  }
  .p-\[5\.5px\].max-h-\[150px\] {
    background: rgba(248, 250, 255, 0.97) !important;
  }
  div[class*="absolute"][class*="bottom-0"] {
    background: rgba(240, 243, 255, 0.97) !important;
  }

  /* === P0-2: 禁用所有 infinite 装饰动画 === */
  cot::before,
  div:has(> .style_dot-flashing__8L91Q.style_text__zGhNq)::after,
  .sticky.w-full.top-0.flex.items-center::after,
  #ai-send-button:hover,
  div[class*="absolute"][class*="bottom-0"]::before,
  div[class*="absolute"][class*="bottom-0"]::after,
  .chat::before,
  .bubble.npc::after,
  .bubble.npc .name::before,
  .bubble.user::after,
  .bubble.user .name::before,
  .bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90)::before,
  .bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90)::after,
  #ai-chat-answer:last-of-type details.p:not([open]) > summary,
  #ai-chat-answer:last-of-type details.n:not([open]) > summary,
  #ai-chat-answer:last-of-type details.ship:not([open]) > summary,
  #ai-chat-answer:last-of-type details.m:not([open]) > summary,
  #ai-chat-answer:last-of-type details.e:not([open]) > summary,
  .k-head::before,
  .k-bar::before,
  .k-none::before,
  .k-row.e.pulse,
  .k-row.g.pulse,
  .doc::after,
  .tip-r,
  .sp-vendor-ui::before,
  .sp-item.tier-yuangu,
  .sp-blink,
  .sp-cmd::after,
  .sp-bal-value,
  .styled-prose-container lyrics,
  .styled-prose-container lyrics em,
  audio.classUI-audio-player,
  .classUI-story p.in-domain,
  .classUI-story p.jutsu {
    animation: none !important;
  }

  /* 移除纯装饰性伪元素（粒子、光效扫描） */
  .chat::before,
  div[class*="absolute"][class*="bottom-0"]::before,
  div[class*="absolute"][class*="bottom-0"]::after,
  .sticky.w-full.top-0.flex.items-center::after {
    display: none !important;
  }

  /* === P1: 简化多层 box-shadow 为单层 === */
  .bubble,
  .bubble.npc,
  .bubble.user {
    box-shadow: 0 2px 8px rgba(74, 108, 247, 0.12) !important;
  }
  .chat {
    box-shadow: 0 2px 12px rgba(74, 108, 247, 0.1) !important;
  }
  .sticky.w-full.top-0.flex.items-center,
  .sticky.w-full.top-0.flex.items-center .inline-flex.items-center {
    box-shadow: 0 1px 6px rgba(74, 108, 247, 0.12) !important;
  }
  #ai-chat-input,
  #ai-chat-input:focus {
    box-shadow: 0 2px 8px rgba(74, 108, 247, 0.15) !important;
  }
  #ai-send-button,
  #ai-send-button:hover {
    box-shadow: 0 2px 10px rgba(74, 108, 247, 0.3) !important;
  }
  .doc {
    box-shadow: 0 2px 10px rgba(74, 108, 247, 0.1) !important;
  }
  .top-info,
  .top-info > area-map::before,
  .top-info > env::before,
  .top-info > position::before,
  .top-info > area-map > region,
  .top-info > area-map > region:hover {
    box-shadow: 0 1px 6px rgba(74, 108, 247, 0.1) !important;
  }
  .styled-prose-container details,
  .styled-prose-container details:hover,
  .styled-prose-container board,
  .styled-prose-container calc,
  .styled-prose-container news,
  .styled-prose-container spell_card_list,
  .styled-prose-container lyrics,
  .styled-prose-container [class*=card-body-] {
    box-shadow: 0 2px 8px rgba(74, 108, 247, 0.1) !important;
  }
  #ai-chat-answer:last-of-type details.n[open],
  #ai-chat-answer:last-of-type details.ship[open],
  #ai-chat-answer:last-of-type details.m[open],
  #ai-chat-answer:last-of-type details.e[open],
  #ai-chat-answer:last-of-type .u:not([open]) > summary {
    box-shadow: 0 2px 8px rgba(74, 108, 247, 0.12) !important;
  }
  .sp-vendor-ui,
  .sp-item,
  .sp-icon {
    box-shadow: 0 1px 6px rgba(74, 108, 247, 0.1) !important;
  }
  .classUI-actions,
  .classUI-npc-card,
  .classUI-story {
    box-shadow: 0 2px 8px rgba(74, 108, 247, 0.1) !important;
  }
  .progress-bar-container,
  .progress-bar-fill {
    box-shadow: none !important;
  }
  .bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90),
  .chat-answer-container .bg-gray-100\/90.relative.inline-block {
    box-shadow: 0 2px 8px rgba(74, 108, 247, 0.1) !important;
  }
  .group.ml-0 > .flex.items-start.gap-2,
  .group.ml-0 > .flex.items-start.gap-2:hover,
  #ai-model-selector .group,
  #ai-model-selector .group:hover,
  #header-setting-button:hover {
    box-shadow: 0 1px 6px rgba(74, 108, 247, 0.1) !important;
  }
  .styled-prose-container board item:not(.w)::before,
  .styled-prose-container board item label,
  .styled-prose-container T Ti {
    box-shadow: none !important;
  }

}

/* 增强 prefers-reduced-motion 覆盖 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}