/* ═══ B平台加载动画适配（自动注入）═══ */
.flex.items-center.justify-center.size-6 { opacity: 1 !important; }
.flex.items-center.justify-center.size-6 > .flex.gap-2 { display: none !important; }

/* ═══ B平台表格修正（自动注入）═══ */
.rili-markdown-renderer table { display:table!important; table-layout:auto!important; width:100%!important; border-collapse:collapse!important; }
.rili-markdown-renderer table caption { display:table-caption!important; caption-side:top!important; text-align:center!important; padding:8px!important; }
.rili-markdown-renderer thead { display:table-header-group!important; }
.rili-markdown-renderer tbody { display:table-row-group!important; }
.rili-markdown-renderer tr { display:table-row!important; }
.rili-markdown-renderer th, .rili-markdown-renderer td { display:table-cell!important; }

/* ═══ B平台按钮组保护（自动注入 — 防止按钮消失）═══
   原理：B平台消息操作按钮结构为：
   .flex.items-center.gap-1.ml-auto (hover显隐包装)
     └── .bg-muted.rounded.flex.p-0.5 (按钮组容器)
           └── button.rounded-full.size-7 (单个按钮)

   以下规则使用高specificity + !important确保按钮
   不被任何转换后/透传的CSS规则意外隐藏
   ═══════════════════════════════════════════════ */

/* 按钮组容器保护 */
.w-full.h-full.flex.group .bg-muted.rounded.flex.p-0\.5,
.is-user .bg-muted.rounded.flex.p-0\.5,
.is-assistant .bg-muted.rounded.flex.p-0\.5 {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  position: relative !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  pointer-events: auto !important;
  clip: auto !important;
  clip-path: none !important;
}

/* 单个按钮保护 */
.w-full.h-full.flex.group .bg-muted.rounded.flex.p-0\.5 > button,
.is-user .bg-muted.rounded.flex.p-0\.5 > button,
.is-assistant .bg-muted.rounded.flex.p-0\.5 > button {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: relative !important;
  clip: auto !important;
  clip-path: none !important;
}

/* hover显隐包装层保护 — 仅保留B平台原生的opacity过渡 */
.flex.items-center.gap-1.ml-auto.md\:opacity-0.group-hover\:opacity-100 {
  visibility: visible !important;
  display: flex !important;
  pointer-events: auto !important;
  overflow: visible !important;
}

/* 操作行保护 */
.flex.w-full.items-center.justify-between.gap-2.px-2 {
  display: flex !important;
  visibility: visible !important;
  overflow: visible !important;
}

/* ═══ B平台顶部栏适配说明（自动注入）═══
   A: div.sticky > div.flex.justify-between
      ├── 左侧空区
      ├── #ai-model-selector (居中)
      └── 右侧工具(设置按钮等)
   B: <header.flex.justify-between>
      ├── #nav-left (侧边栏开关)
      ├── #nav-middle (可能为空)
      └── #nav-right (通知/主题/语言)
   B平台模型按钮不在header内，选择器:
   button:has(> .flex-1.truncate.text-left)
   ═══════════════════════════════════════ */
header.flex.justify-between { position: relative; overflow: visible; }

header.flex.justify-between {
  border-bottom: 2px solid #d97706;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 15px -3px rgba(217, 119, 6, 0.35),
    0 2px 8px -1px rgba(245, 158, 11, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cdefs%3E%3Cfilter id='glow'%3E%3CfeGaussianBlur stdDeviation='2' result='coloredBlur'/%3E%3CfeMerge%3E%3CfeMergeNode in='coloredBlur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg transform='translate(60,60)'%3E%3C!-- 外圈 --%3E%3Ccircle r='45' fill='none' stroke='%23d97706' stroke-width='1.5' opacity='0.5' filter='url(%23glow)'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0' to='360' dur='60s' repeatCount='indefinite'/%3E%3C/circle%3E%3C!-- 内圈 --%3E%3Ccircle r='35' fill='none' stroke='%23f59e0b' stroke-width='1.2' opacity='0.4'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0' to='-360' dur='45s' repeatCount='indefinite'/%3E%3C/circle%3E%3C!-- 三角符文 --%3E%3Cpath d='M0,-30 L26,15 L-26,15 Z' fill='none' stroke='%2392400e' stroke-width='1.5' opacity='0.4'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0' to='360' dur='30s' repeatCount='indefinite'/%3E%3C/path%3E%3C!-- 中心星 --%3E%3Cpath d='M0,-15 L5,-5 L15,-3 L7,5 L9,15 L0,8 L-9,15 L-7,5 L-15,-3 L-5,-5 Z' fill='%23d97706' opacity='0.5' filter='url(%23glow)'%3E%3Canimate attributeName='opacity' values='0.4;0.8;0.4' dur='4s' repeatCount='indefinite'/%3E%3C/path%3E%3C!-- 额外的符文点 --%3E%3Ccircle cx='0' cy='-40' r='2' fill='%23f59e0b' opacity='0.8'%3E%3Canimate attributeName='opacity' values='0.4;1;0.4' dur='2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='35' cy='20' r='2' fill='%23d97706' opacity='0.7'%3E%3Canimate attributeName='opacity' values='0.3;0.9;0.3' dur='2.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='-35' cy='20' r='2' fill='%23f59e0b' opacity='0.7'%3E%3Canimate attributeName='opacity' values='0.3;0.9;0.3' dur='3s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E"),
    /* 0.3 透明的背景渐变 */
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.3) 0%,
      rgba(255, 254, 251, 0.3) 50%,
      rgba(255, 253, 247, 0.3) 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: left -20px center, center; /* 魔法阵移至左侧 */
  background-size: 100px 100px, 100% 100%;
}
header.flex.justify-between::before {
  content: "";
  position: absolute;
  top: 0;
  right: -100px;
  width: 500px;
  height: 100%;
  opacity: 0.6;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='60' viewBox='0 0 200 60'%3E%3Cdefs%3E%3Cfilter id='glow'%3E%3CfeGaussianBlur stdDeviation='3' result='coloredBlur'/%3E%3CfeMerge%3E%3CfeMergeNode in='coloredBlur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='50' cy='30' r='20' fill='none' stroke='%23d97706' stroke-width='2' opacity='0.8' filter='url(%23glow)'/%3E%3Ccircle cx='50' cy='30' r='15' fill='none' stroke='%23f59e0b' stroke-width='1.5' opacity='0.7'/%3E%3Cpath d='M150 10 L155 20 L165 20 L157.5 27 L162.5 37 L150 30 L137.5 37 L142.5 27 L135 20 L145 20 Z' fill='%23d97706' opacity='0.8' filter='url(%23glow)'/%3E%3Cpath d='M100 15 L100 45 M90 25 L110 25 M95 20 L105 30 M105 20 L95 30' stroke='%2392400e' stroke-width='2' fill='none' opacity='0.7'/%3E%3Ccircle cx='30' cy='15' r='3' fill='%23f59e0b' opacity='1'/%3E%3Ccircle cx='170' cy='40' r='2.5' fill='%23d97706' opacity='0.9'/%3E%3Ccircle cx='80' cy='45' r='2' fill='%23f59e0b' opacity='0.9'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: 0 center;
  animation: floatBackground 20s linear infinite;
}

/* 第二层动态背景 - 漂浮光点 */
header.flex.justify-between::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.7;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='60' viewBox='0 0 100 60'%3E%3Cdefs%3E%3Cfilter id='blur'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='1.5'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='20' cy='30' r='4' fill='%23f59e0b' opacity='0.8' filter='url(%23blur)'%3E%3Canimate attributeName='opacity' values='0.5;1;0.5' dur='3s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='50' cy='15' r='3' fill='%23d97706' opacity='0.7'%3E%3Canimate attributeName='opacity' values='0.4;0.9;0.4' dur='4s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='80' cy='45' r='3.5' fill='%23f59e0b' opacity='0.6'%3E%3Canimate attributeName='opacity' values='0.3;0.8;0.3' dur='3.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 60px;
  animation: driftBackground 30s linear infinite reverse;
}

/* 动画 */
@keyframes floatBackground {
  from { background-position: 0 center; }
  to   { background-position: 200px center; }
}

@keyframes driftBackground {
  from { background-position: 0 0; }
  to   { background-position: 200px 60px; }
}
.py-3 {
    padding-top: 0rem;
    padding-bottom: 0rem;
}
.px-4 {
    padding-left: 0rem;
    padding-right: 0rem;
}

[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
            display: none !important;
}
svg[class*="text-grey-600"]:not(.MuiRating-root svg) {
    color: gold;
    filter: drop-shadow(0 0 2px gold) 
            drop-shadow(0 0 4px rgba(255, 215, 0, 0.7));
    transition: all 0.3s ease;
}
chatting,actor_age,judge,random,PlotClips,guide,locked {display:none;}
div[class="shrink-0 relative w-10 h-10 bg-gray-100/90 rounded-full block md:block"] {
  display: none;
}
.relative.w-10.h-10.bg-white.rounded-full {
  display: none !important;
}
/* 完全隐藏三角形 */
/* [B平台无三角箭头]
.bg-gray-100\/90.w-2.h-3.clip-path-triangle-right {
    display: none !important;
}
*/
/* 隐藏原始的点状加载动画 */
.flex.items-center.justify-center.size-6 > .flex.gap-2 {
  display: none !important;
}
.flex.items-center.justify-center.size-6 {
  position: relative;
  box-sizing: border-box;
  isolation: isolate;
  z-index: 0;
  min-width: 320px !important;
  width: auto !important;
  height: 36px !important;
  padding: 8px 16px 8px 50px;
  border-radius: 25px;
  border: 1px solid rgba(255, 193, 7, 0.5) !important;
  background: linear-gradient(135deg, #fff7d6 0%, #ffe8a1 50%, #ffd24d 100%) !important;
  background-color: #ffe8a1 !important;
  background-clip: padding-box;
  background-blend-mode: normal !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  opacity: 1 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow:
    0 8px 25px rgba(255, 193, 7, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 20px rgba(255, 215, 0, 0.15),
    0 0 40px rgba(138, 43, 226, 0.08);
  animation: packageGlow 4s ease-in-out infinite;
}

.flex.items-center.justify-center.size-6::after {
  content: "推荐记忆为2来减少消耗~";
  position: absolute;
  left: 55px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 20px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  color: #d81b60;
  background-image: linear-gradient(45deg, #ff1744, #ff6ec7, #ff1744);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  forced-color-adjust: none;
  text-shadow:
    0 0 5px rgba(216, 27, 96, 0.5),
    0 2px 4px rgba(216, 27, 96, 0.3);
  animation:
    seductiveTyping 36s steps(20, end) infinite,
    textGlow 3s ease-in-out infinite alternate,
    gradientShift 4s linear infinite;
}

.flex.items-center.justify-center.size-6::after {
  color: #c2185b !important;
  -webkit-text-fill-color: currentColor !important;
  background-image: none !important;
  -webkit-text-stroke: 0.4px rgba(255, 255, 255, 0.45);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.75),
    0 0 2px rgba(194, 24, 91, 0.18);
  animation:
    seductiveTyping 36s steps(20, end) infinite,
    textGlowSoft 3s ease-in-out infinite alternate,
    gradientShift 4s linear infinite;
  forced-color-adjust: none;
}

/* 光效动画（容器阴影） */
@keyframes packageGlow {
  0%, 100% {
    box-shadow:
      0 8px 25px rgba(255, 193, 7, 0.25),
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      0 0 20px rgba(255, 215, 0, 0.15),
      0 0 40px rgba(138, 43, 226, 0.08);
  }
  50% {
    box-shadow:
      0 12px 35px rgba(255, 193, 7, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.6),
      0 0 30px rgba(255, 215, 0, 0.25),
      0 0 50px rgba(138, 43, 226, 0.12),
      0 0 60px rgba(255, 140, 0, 0.08);
  }
}

/* 柔和发光动画（保留原 textGlow） */
@keyframes textGlowSoft {
  0% {
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.65),
      0 0 1px rgba(194, 24, 91, 0.18);
  }
  100% {
    text-shadow:
      0 1px 0 rgba(255, 255, 255, 0.65),
      0 0 4px rgba(194, 24, 91, 0.32);
  }
}

@keyframes seductiveTyping {
  0%, 15% { content: "推荐记忆为2来减少消耗~"; width: 0; }
  5%, 12% { content: "推荐记忆为2来减少消耗~"; width: 210px; }
  17%, 32% { content: "如遇截断可尝试刷新页面或非流"; width: 0; }
  22%, 29% { content: "如遇截断可尝试刷新页面或非流"; width: 250px; }
  34%, 48% { content: "加载可能较长请耐心等待❥(^_-)"; width: 0; }
  38%, 45% { content: "加载可能较长请耐心等待❥(^_-)"; width: 240px; }
  50%, 65% { content: "移动端下方左右滑动有神秘小按钮"; width: 0; }
  55%, 62% { content: "移动端下方左右滑动有神秘小按钮"; width: 250px; }
  67%, 82% { content: "遇到问题及时留言QAQ"; width: 0; }
  72%, 79% { content: "遇到问题及时留言QAQ"; width: 180px; }
  84%, 100% { content: "等待太久可能是渠道出问题了！"; width: 0; }
  89%, 97% { content: "等待太久可能是渠道出问题了！"; width: 230px; }
}

/* 原发光动画 */
@keyframes textGlow {
  0% {
    text-shadow:
      0 0 5px rgba(216, 27, 96, 0.4),
      0 2px 4px rgba(216, 27, 96, 0.2);
  }
  100% {
    text-shadow:
      0 0 10px rgba(216, 27, 96, 0.7),
      0 0 20px rgba(255, 105, 180, 0.3),
      0 2px 4px rgba(216, 27, 96, 0.4);
  }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes battleTyping {
  0%, 15% { content: "战斗时注意区域规则的影响"; width: 0; }
  5%, 12% { content: "战斗时注意区域规则的影响"; width: 200px; }

  17%, 32% { content: "与NPC成为队友能够提升战斗策略性"; width: 0; }
  22%, 29% { content: "与NPC成为队友能够提升战斗策略性"; width: 260px; }

  34%, 48% { content: "如您的实力强大可用跳过战斗来得到结果"; width: 0; }
  38%, 45% { content: "如您的实力强大可用跳过战斗来得到结果"; width: 270px; }

  50%, 65% { content: "打不过就跑也不失为一种战斗手段"; width: 0; }
  55%, 62% { content: "打不过就跑也不失为一种战斗手段"; width: 230px; }

  67%, 82% { content: "抓住敌人弱点能更好解决麻烦"; width: 0; }
  72%, 79% { content: "抓住敌人弱点能更好解决麻烦"; width: 210px; }

  84%, 100% { content: "战败后可求救魅魔或作弊,小开不算开"; width: 0; }
  89%, 97% { content: "战败后可求救魅魔或作弊,小开不算开"; width: 260px; }
}


div[style*="position: absolute"]:has(.game_ui#battle)
  + div[style*="position: absolute"]
  .flex.items-center.justify-center.size-6::after {
  animation:
    battleTyping 36s steps(20, end) infinite,
    textGlowSoft 3s ease-in-out infinite alternate,
    gradientShift 4s linear infinite;
}
div[style*="position: absolute"]:has(.game_ui#battle)
  + div[style*="position: absolute"]
  + div[style*="position: absolute"]
  .flex.items-center.justify-center.size-6::after {
  animation:
    battleTyping 36s steps(20, end) infinite,
    textGlowSoft 3s ease-in-out infinite alternate,
    gradientShift 4s linear infinite;
}

div[style*="position: absolute"]:has(.game_ui#battle)
  + div[style*="position: absolute"]
  + div[style*="position: absolute"]
  + div[style*="position: absolute"]
  .flex.items-center.justify-center.size-6::after {
  animation:
    battleTyping 36s steps(20, end) infinite,
    textGlowSoft 3s ease-in-out infinite alternate,
    gradientShift 4s linear infinite;
}
@media (max-width: 768px) {
  .flex.items-center.justify-center.size-6 {
    min-width: 280px !important;
    padding: 6px 12px 6px 42px;
    height: 32px !important;
  }
  .flex.items-center.justify-center.size-6::after {
    left: 40px;
    font-size: 12px;
  }
}


.flex.items-center.justify-center.size-6::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0icGlua0ZpbGwiIHgxPSIwJSIgeTE9IjEwMCUiIHgyPSIwJSIgeTI9IjAlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMTQ5MyIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmNjliNCIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmI3ZDEiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8Y2xpcFBhdGggaWQ9ImZpbGxDbGlwIj4KICAgICAgPHJlY3QgeD0iMCIgeT0iMjgiIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOCI+CiAgICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ieSIgdmFsdWVzPSIyODsxNDswOzE0OzI4IiBkdXI9IjRzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogICAgICA8L3JlY3Q+CiAgICA8L2NsaXBQYXRoPgogIDwvZGVmcz4KICA8IS0tIE91dGVyIGdsb3cgY2lyY2xlIC0tPgogIDxjaXJjbGUgY3g9IjE0IiBjeT0iMTQiIHI9IjEzIiBmaWxsPSJyZ2JhKDI1NSwgMTgyLCAxOTMsIDAuMikiLz4KICA8IS0tIE9yYml0aW5nIGRlY29yYXRpdmUgZWxlbWVudHMgLS0+CiAgPGNpcmNsZSBjeD0iMjMiIGN5PSIxNCIgcj0iMSIgZmlsbD0iI2ZmZjc5NCI+CiAgICA8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgdmFsdWVzPSIwIDE0IDE0OzM2MCAxNCAxNCIgZHVyPSI2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L2NpcmNsZT4KICA8cGF0aCBkPSJNNSAxNEw3IDEyTDUgMTBMMyAxMkw1IDE0WiIgZmlsbD0iI2ZmODBjNyI+CiAgICA8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgdmFsdWVzPSIxODAgMTQgMTQ7NTQwIDE0IDE0IiBkdXI9IjZzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogIDwvcGF0aD4KICA8Y2lyY2xlIGN4PSIxNCIgY3k9IjUiIHI9IjEuNSIgZmlsbD0iI2ZmYjdkMSI+CiAgICA8YW5pbWF0ZVRyYW5zZm9ybSBhdHRyaWJ1dGVOYW1lPSJ0cmFuc2Zvcm0iIHR5cGU9InJvdGF0ZSIgdmFsdWVzPSI5MCAxNCAxNDs0NTAgMTQgMTQiIGR1cj0iNnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgPC9jaXJjbGU+CiAgPHBhdGggZD0iTTIzIDZMMjUgNEwyMyAyTDIxIDRMMjMgNloiIGZpbGw9IiNmZmY3OTQiPgogICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHZhbHVlcz0iMjcwIDE0IDE0OzYzMCAxNCAxNCIgZHVyPSI2cyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICA8L3BhdGg+CiAgPCEtLSBTcGFya2xpbmcgZG90cyAtLT4KICA8Y2lyY2xlIGN4PSI3IiBjeT0iNyIgcj0iMC43IiBmaWxsPSIjZmZmNzk0Ij4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMDsxOzAiIGR1cj0iMnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBiZWdpbj0iMHMiLz4KICA8L2NpcmNsZT4KICA8Y2lyY2xlIGN4PSIyMSIgY3k9IjIxIiByPSIwLjUiIGZpbGw9IiNmZmY3OTQiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIwOzE7MCIgZHVyPSIycyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGJlZ2luPSIwLjVzIi8+CiAgPC9jaXJjbGU+CiAgPGNpcmNsZSBjeD0iNiIgY3k9IjIxIiByPSIwLjYiIGZpbGw9IiNmZmY3OTQiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIwOzE7MCIgZHVyPSIycyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGJlZ2luPSIxcyIvPgogIDwvY2lyY2xlPgogIDxjaXJjbGUgY3g9IjIyIiBjeT0iNyIgcj0iMC44IiBmaWxsPSIjZmZmNzk0Ij4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMDsxOzAiIGR1cj0iMnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBiZWdpbj0iMS41cyIvPgogIDwvY2lyY2xlPgogIDwhLS0gSGVhcnQgb3V0bGluZSAoYWx3YXlzIHZpc2libGUpIC0tPgogIDxwYXRoIGQ9Ik0xNCAyMkwxOS41IDE2QzIxIDE0LjUgMjEuNSAxMy41IDIxLjUgMTJDMjEuNSAxMCAyMC41IDguNSAxOC41IDguNUMxNy4yIDguNSAxNS44IDkuMiAxNiAxMS44QzEyLjIgOS4yIDEwLjggOC41IDkuNSA4LjVDNy41IDguNSA2LjUgMTAgNi41IDEyQzYuNSAxMy41IDcgMTQuNSA4LjUgMTZMMTQgMjJaIiBmaWxsPSJub25lIiBzdHJva2U9IiNmZjE0OTMiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogIDwhLS0gSGVhcnQgZmlsbCAod2l0aCBhbmltYXRlZCBjbGlwcGluZykgLS0+CiAgPHBhdGggZD0iTTE0IDIyTDE5LjUgMTZDMjEgMTQuNSAyMS41IDEzLjUgMjEuNSAxMkMyMS41IDEwIDIwLjUgOC41IDE4LjUgOC41QzE3LjIgOC41IDE1LjggOS4yIDE0IDExLjhDMTIuMiA5LjIgMTAuOCA4LjUgOS41IDguNUM3LjUgOC41IDYuNSAxMCA2LjUgMTJDNi41IDEzLjUgNyAxNC41IDguNSAxNkwxNCAyMloiIGZpbGw9InVybCgjcGlua0ZpbGwpIiBjbGlwLXBhdGg9InVybCgjZmlsbENsaXApIi8+Cjwvc3ZnPg==");
  background-size: contain;
  background-repeat: no-repeat;
  animation: 
    seductiveFloat 4s ease-in-out infinite,
    heartPulse 2s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(255, 20, 147, 0.4));
}

/* 暧昧浮动动画 */
@keyframes seductiveFloat {
  0%, 100% { 
    transform: translateY(-50%) rotate(0deg) scale(1);
  }
  25% { 
    transform: translateY(-55%) rotate(-5deg) scale(1.05);
  }
  50% { 
    transform: translateY(-50%) rotate(0deg) scale(1.1);
  }
  75% { 
    transform: translateY(-45%) rotate(5deg) scale(1.05);
  }
}

/* 心跳脉冲动画 */
@keyframes heartPulse {
  0%, 100% { 
    filter: drop-shadow(0 4px 8px rgba(255, 20, 147, 0.4)) brightness(1);
  }
  50% { 
    filter: drop-shadow(0 6px 15px rgba(255, 20, 147, 0.7)) brightness(1.2);
  }
}


.is-user > .border.border-muted,
.is-assistant > .border.border-muted {
     background-color: transparent !important;
}
.is-user > .border.border-muted {
  font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  min-width: 230px;
  border-radius: 16px;
  padding: 20px;
  margin: 2px;
  position: relative;
  background: linear-gradient(135deg, 
    #fffef5 0%, 
    #fff9e6 50%, 
    #fff5dc 100%);
  color: #92400e;
  border: 2px solid #d97706;
  box-shadow: 
    0 8px 20px -6px rgba(217, 119, 6, 0.45),
    0 4px 12px -2px rgba(245, 158, 11, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* 右下角动态SVG图标 - 魔法星星（位置修正） */
.is-user > .border.border-muted::after {
  content: '';
  position: absolute;
  right: 10px;
  bottom: 8px;
  width: 32px;
  height: 32px;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcz4KICAgIDxyYWRpYWxHcmFkaWVudCBpZD0ic3RhckdyYWQiIGN4PSI1MCUiIGN5PSI1MCUiIHI9IjUwJSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNmZjZlYzciIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmNDA4MSIgc3RvcC1vcGFjaXR5PSIwLjkiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYzgxZTdmIiBzdG9wLW9wYWNpdHk9IjAuOCIvPgogICAgPC9yYWRpYWxHcmFkaWVudD4KICAgIDxmaWx0ZXIgaWQ9Imdsb3ciPgogICAgICA8ZmVHYXVzc2lhbkJsdXIgc3RkRGV2aWF0aW9uPSIyIiByZXN1bHQ9ImNvbG9yZWRCbHVyIi8+CiAgICAgIDxmZU1lcmdlPgogICAgICAgIDxmZU1lcmdlTm9kZSBpbj0iY29sb3JlZEJsdXIiLz4KICAgICAgICA8ZmVNZXJnZU5vZGUgaW49IlNvdXJjZUdyYXBoaWMiLz4KICAgICAgPC9mZU1lcmdlPgogICAgPC9maWx0ZXI+CiAgPC9kZWZzPgogIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE2LCAxNikiPgogICAgPGFuaW1hdGVUcmFuc2Zvcm0KICAgICAgYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIgogICAgICBhdHRyaWJ1dGVUeXBlPSJYTUwiCiAgICAgIHR5cGU9InJvdGF0ZSIKICAgICAgZnJvbT0iMCAxNiAxNiIKICAgICAgdG89IjM2MCAxNiAxNiIKICAgICAgZHVyPSI4cyIKICAgICAgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICAgIDxwYXRoIGQ9Ik0gMTYsNiBMIDE4LjUsMTIgTCAyNSwxNCBMIDIwLjUsMTggTCAyMiwyNSBMIDE2LDIxLjUgTCAxMCwyNSBMIDExLjUsMTggTCA3LDE0IEwgMTMuNSwxMiBaIiBmaWxsPSJ1cmwoI3N0YXJHcmFkKSIgZmlsdGVyPSJ1cmwoI2dsb3cpIiBvcGFjaXR5PSIwLjkiPgogICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJvcGFjaXR5IiB2YWx1ZXM9IjAuNjswLjk7MS4wOzAuOTswLjYiIGR1cj0iMnMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgICA8L3BhdGg+CiAgICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSIzIiBmaWxsPSIjZmZlNGU2IiBvcGFjaXR5PSIwLjkiPgogICAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiB2YWx1ZXM9IjI7MzsyIiBkdXI9IjEuNXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+CiAgICA8L2NpcmNsZT4KICA8L2c+CiAgPGc+CiAgICA8Y2lyY2xlIGN4PSI4IiBjeT0iOCIgcj0iMS4yIiBmaWxsPSIjZmZiM2JhIiBvcGFjaXR5PSIwIj4KICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIwOzE7MCIgZHVyPSIzcyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogICAgPC9jaXJjbGU+CiAgICA8Y2lyY2xlIGN4PSIyNCIgY3k9IjgiIHI9IjEuMiIgZmlsbD0iI2ZmYjNiYSIgb3BhY2l0eT0iMCI+CiAgICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9Im9wYWNpdHkiIHZhbHVlcz0iMDsxOzAiIGR1cj0iM3MiIGJlZ2luPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz4KICAgIDwvY2lyY2xlPgogICAgPGNpcmNsZSBjeD0iMjQiIGN5PSIyNCIgcj0iMS4yIiBmaWxsPSIjZmZiM2JhIiBvcGFjaXR5PSIwIj4KICAgICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0ib3BhY2l0eSIgdmFsdWVzPSIwOzE7MCIgZHVyPSIzcyIgYmVnaW49IjJzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPgogICAgPC9jaXJjbGU+CiAgPC9nPgo8L3N2Zz4=');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 1;
  animation: floatIcon 3s ease-in-out infinite;
}

/* 图标浮动动画 */
@keyframes floatIcon {
  0%, 100% { 
    transform: translateY(0) scale(1) rotate(0deg);
    filter: drop-shadow(0 4px 8px rgba(199, 30, 127, 0.3));
  }
  50% { 
    transform: translateY(-3px) scale(1.05) rotate(5deg);
    filter: drop-shadow(0 6px 12px rgba(199, 30, 127, 0.4));
  }
}


@media (max-width: 768px) {
  .is-user > .border.border-muted {
    min-width: 130px;
  }
  .is-user > .border.border-muted::after {
    width: 24px;
    height: 24px;
    right: 8px;
    bottom: 6px;
  }
}
@keyframes spinner-rotate {
  100% {
    transform: rotate(360deg);
  }
}
div[style*="position: absolute"]:has(+ div[style*="position: absolute"] .flex.items-center.justify-center.size-6)
  .is-user > .border.border-muted::after {
  content: "";
  position: absolute;
  right: 13px;
  bottom: 13px;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23fb7185'/%3E%3Cstop offset='100%25' stop-color='%23ec4899'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23fecdd3' stroke-width='3.5'/%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='url(%23g)' stroke-width='3.5' stroke-linecap='round' stroke-dasharray='50 63'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  animation: spinner-rotate 1.2s linear infinite;
  pointer-events: none;
}


/* 三个按钮：用 float 并排，宽度三等分；使用 flex 居中内容 */
.rili-markdown-renderer .game_ui label[id="STB"] {
    display: flex; /* 用 flex 保持内部文字水平/垂直居中 */
    align-items: center;
    justify-content: center;
    float: left;
    box-sizing: border-box;
    width: calc((100% - 2 * var(--tab-gap)) / 3); /* 三列宽度，减去两处列间距 */
    margin: 0.5rem var(--tab-gap) 0.5rem 0; /* 右侧作为列间距 */
    padding: 0.65rem 0.8rem;
    border: 2px solid #d9770680;
    border-radius: 10px;
    background: linear-gradient(145deg, #fffbf0, #fff9e8);
    color: #92400e;
    font-weight: 500;
    font-size: 0.95rem;
    box-shadow: 
        0 2px 8px rgba(217, 119, 6, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible;
    white-space: nowrap;
    text-align: center; /* 兜底，确保文本居中 */
}

/* 最右侧按钮不需要右间距 */
.rili-markdown-renderer .game_ui label[id="STB"]:last-of-type {
    margin-right: 0;
}

/* 清除浮动，避免影响后续 PANEL 的布局 */
.rili-markdown-renderer .game_ui::after {
    content: "";
    display: table;
    clear: both;
}

/* 响应式：小屏仅调字号/内边距，宽度保持三等分不变 */
@media (max-width: 768px) {
    .rili-markdown-renderer .game_ui label[id="STB"] {
        font-size: 0.8rem;
        padding: 0.55rem 0.25rem;
    }
}

@media (max-width: 480px) {
    .rili-markdown-renderer .game_ui label[id="STB"] {
        font-size: 0.75rem;
        padding: 0.5rem 0.15rem;
    }
}
/* ========== 4. 按钮前SVG图标 ========== */
/* 信息按钮图标 - 卷轴 */
.rili-markdown-renderer label[for^="info-count"]::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9InNjcm9sbCIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3R5bGU9InN0b3AtY29sb3I6I2Y1OWUwYjtzdG9wLW9wYWNpdHk6MSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I2Q5NzcwNjtzdG9wLW9wYWNpdHk6MSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjMiIHk9IjIiIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNCIgcng9IjEuNSIgZmlsbD0idXJsKCNzY3JvbGwpIiBzdHJva2U9IiM5MjQwMGUiIHN0cm9rZS13aWR0aD0iMC44Ii8+PGxpbmUgeDE9IjUiIHkxPSI2IiB4Mj0iMTMiIHkyPSI2IiBzdHJva2U9IiNmZmZiZjAiIHN0cm9rZS13aWR0aD0iMC42Ii8+PGxpbmUgeDE9IjUiIHkxPSI5IiB4Mj0iMTMiIHkyPSI5IiBzdHJva2U9IiNmZmZiZjAiIHN0cm9rZS13aWR0aD0iMC42Ii8+PGxpbmUgeDE9IjUiIHkxPSIxMiIgeDI9IjEwIiB5Mj0iMTIiIHN0cm9rZT0iI2ZmZmJmMCIgc3Ryb2tlLXdpZHRoPSIwLjYiLz48L3N2Zz4=');
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

/* 回忆按钮图标 - 时钟 */
.rili-markdown-renderer label[for^="past-count"]::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImNsb2NrIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojYTg1ZjJhO3N0b3Atb3BhY2l0eToxIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdHlsZT0ic3RvcC1jb2xvcjojOGI0NTEzO3N0b3Atb3BhY2l0eToxIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PGNpcmNsZSBjeD0iOSIgY3k9IjkiIHI9IjYuNSIgZmlsbD0idXJsKCNjbG9jaykiIHN0cm9rZT0iIzkyNDAwZSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz48cGF0aCBkPSJNOSA1TDkgOUwxMiAxMSIgc3Ryb2tlPSIjZmZmYmYwIiBzdHJva2Utd2lkdGg9IjEuMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+PGNpcmNsZSBjeD0iOSIgY3k9IjkiIHI9IjEiIGZpbGw9IiNmZmZiZjAiLz48L3N2Zz4=');
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

/* 交互按钮图标 - 魔法剑 */
.rili-markdown-renderer label[for^="interact-count"]::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48bGluZWFyR3JhZGllbnQgaWQ9ImludGVyYWN0IiB4MT0iMCUiIHkxPSIwJSIgeDI9IjEwMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojZjU5ZTBiO3N0b3Atb3BhY2l0eToxIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdHlsZT0ic3RvcC1jb2xvcjojZDk3NzA2O3N0b3Atb3BhY2l0eToxIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHBhdGggZmlsbD0idXJsKCNpbnRlcmFjdCkiIHN0cm9rZT0iIzkyNDAwZSIgc3Ryb2tlLXdpZHRoPSIwLjMiIGQ9Ik0xNS44IDAuNWwtMC4xLTAuMi0wLjItMC4xYy0wLjEgMC0yLjUtMC44LTQuMiAwLjlsLTYuNyA2LjZjLTAuOS0wLjYtMS43LTEuMi0xLjgtMWwtMC40IDAuM2MtMC4yIDAuMiAwLjkgMS43IDEuOCAyLjdsLTIuNSAzLjRjLTAuMy0wLjMtMC44LTAuMy0xLjEgMGwtMC4zIDAuM2MtMC4zIDAuMy0wLjMgMC44IDAgMS4xbDEgMWMwLjMgMC4zIDAuOCAwLjMgMS4xIDBsMC4zLTAuM2MwLjMtMC4zIDAuMy0wLjggMC0xLjF2MGwzLjUtMi41YzEgMC45IDIuNSAyIDIuNyAxLjhsMC40LTAuNGMwLjEtMC4xLTAuNC0xLTEuMS0xLjhsNi43LTYuN2MxLjctMS41IDAuOS0zLjkgMC45LTR6TTcuNyAxMC41bC0wLjgtMC44IDYuMi02LjktNi45IDYuMi0wLjctMC43IDYuNS02LjVjMS0xIDIuMy0wLjggMi45LTAuNyAwLjEgMC42IDAuMyAxLjktMC43IDIuOGwtNi41IDYuNnoiLz48L3N2Zz4=');
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .rili-markdown-renderer label[for^="info-count"]::before,
    .rili-markdown-renderer label[for^="past-count"]::before,
    .rili-markdown-renderer label[for^="interact-count"]::before {
        width: 16px;
        height: 16px;
        margin-right: 4px;
    }
}

/* ========== 5. 按钮Hover效果 - 四角边框 ========== */
.rili-markdown-renderer label[id="STB"]::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: 
        linear-gradient(to right, #d97706 0%, #d97706 12px, transparent 12px, transparent calc(100% - 12px), #d97706 calc(100% - 12px)) top / 100% 3px,
        linear-gradient(to right, #d97706 0%, #d97706 12px, transparent 12px, transparent calc(100% - 12px), #d97706 calc(100% - 12px)) bottom / 100% 3px,
        linear-gradient(to bottom, #d97706 0%, #d97706 12px, transparent 12px, transparent calc(100% - 12px), #d97706 calc(100% - 12px)) left / 3px 100%,
        linear-gradient(to bottom, #d97706 0%, #d97706 12px, transparent 12px, transparent calc(100% - 12px), #d97706 calc(100% - 12px)) right / 3px 100%;
    background-repeat: no-repeat;
    pointer-events: none;
}

.rili-markdown-renderer label[id="STB"]:hover::after {
    opacity: 1;
}

.rili-markdown-renderer label[id="STB"]:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 4px 12px rgba(217, 119, 6, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    background: linear-gradient(145deg, #fff9e8, #fff5dc);
}

/* ========== 6. 选中状态的按钮样式 ========== */
.rili-markdown-renderer input[id^="info-count"]:checked ~ label[for^="info-count"],
.rili-markdown-renderer input[id^="past-count"]:checked ~ label[for^="past-count"],
.rili-markdown-renderer input[id^="interact-count"]:checked ~ label[for^="interact-count"] {
    background: linear-gradient(145deg, #fbbf24, #f59e0b);
    border-color: #92400e;
    color: #451a03;
    font-weight: 700;
    box-shadow: 
        0 4px 16px rgba(217, 119, 6, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.3),
        inset 0 -2px 4px rgba(146, 64, 14, 0.2);
    transform: translateY(-1px);
}


/* 显示Panel */
.rili-markdown-renderer input[id^="info-count"]:checked ~ PANEL[id^="info-count"],
.rili-markdown-renderer input[id^="past-count"]:checked ~ PANEL[id^="past-count"],
.rili-markdown-renderer input[id^="interact-count"]:checked ~ PANEL[id^="interact-count"] {
    display: block;
}

/* ========== 8. 保持原有隐藏radio的样式 ========== */
.rili-markdown-renderer input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* ========== 9. 原有label样式（被上面的覆盖） ========== */
.rili-markdown-renderer label[for^="info-count"], 
.rili-markdown-renderer label[for^="past-count"], 
.rili-markdown-renderer label[for^="interact-count"] {
    /* 保持原有选择器，实际样式由label[id="STB"]定义 */
}

.rili-markdown-renderer .game_ui current_quest,
.rili-markdown-renderer .game_ui acceptable_quest,
.rili-markdown-renderer .game_ui recommend_choice {
    display: block;
    position: relative;
}

/* --- 华丽的模块分割线 --- */
.rili-markdown-renderer .game_ui acceptable_quest,
.rili-markdown-renderer .game_ui recommend_choice {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(217, 119, 6, 0.3);
}

/* --- 任务通用标题样式 (h2) --- */
.rili-markdown-renderer .game_ui h2 {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 22px;
    font-weight: bold;
    color: #451a03;
    text-shadow: 1px 1px 2px rgba(255, 220, 150, 0.8);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 3px double rgba(217, 119, 6, 0.5);
    text-align: center;
    letter-spacing: 0.1em;
    position: relative; /* --- FIX #2: 为h2添加相对定位，使其装饰物正确定位 --- */
}

.rili-markdown-renderer .game_ui h2::before,
.rili-markdown-renderer .game_ui h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    width: 18px;
    height: 18px;
    background: radial-gradient(circle, #fef08a 20%, #d97706 80%);
    border-radius: 50%;
    border: 2px solid #451a03;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.8);
}

.rili-markdown-renderer .game_ui h2::before {
    left: 10%;
}

.rili-markdown-renderer .game_ui h2::after {
    right: 10%;
}

/* --- "行动推荐" 的独特 h2 样式 --- */
.rili-markdown-renderer .game_ui recommend_choice h2 {
    background: linear-gradient(120deg, #b45309, #d97706, #b45309);
    color: white;
    font-size: 20px;
    padding: 0.5rem 2rem;
    margin: 0 auto 1.5rem auto;
    border-radius: 4px;
    text-shadow: 1px 1px 2px #451a03;
    clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%);
    width: 80%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    border-bottom: none; /* 覆盖通用h2样式 */
}

.rili-markdown-renderer .game_ui recommend_choice h2::before,
.rili-markdown-renderer .game_ui recommend_choice h2::after {
    display: none;
}

/* --- 次级标题样式 (h3) --- */
.rili-markdown-renderer .game_ui h3 {
    font-family: 'Georgia', serif;
    font-size: 15px;
    color: #78350f;
    margin-top: 1.5rem;
    margin-bottom: 0.8rem;
    border-left: 5px solid #f59e0b;
    padding-left: 10px;
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.15), transparent);
    border-radius: 0 4px 4px 0;
}

/* --- 任务名称 (quest_name) --- */
.rili-markdown-renderer .game_ui quest_name {
    display: block;
    font-size: 15px;
    font-weight: bold;
    color: #b45309;
    margin-bottom: 1rem;
    padding-left: 20px;
    text-align: left;
    animation: textGlow 2.5s infinite alternate;
    position: relative;
}

.rili-markdown-renderer .game_ui quest_name::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5%;
    width: 6px;
    height: 90%;
    background: linear-gradient(#fde047, #f59e0b, #fde047);
    border-radius: 3px;
    box-shadow: 0 0 8px #facc15;
}

@keyframes textGlow {
    from { text-shadow: 0 0 4px #fef3c7, 0 0 8px #fef3c7, 0 0 12px #fde68a; }
    to { text-shadow: 0 0 8px #fef3c7, 0 0 16px #fde68a, 0 0 24px #facc15; }
}

/* --- 任务目标列表 (current_quest ul, li) --- */
.rili-markdown-renderer .game_ui current_quest ul {
    list-style: none;
    padding-left: 20px;
}

.rili-markdown-renderer .game_ui current_quest ul li {
    margin-bottom: 0.7rem;
    position: relative;
    padding-left: 30px;
    transition: all 0.3s ease-in-out;
}

.rili-markdown-renderer .game_ui current_quest ul li::before {
    content: '◇';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 19px;
    color: #0ea5e9;
    text-shadow: 0 0 6px #7dd3fc, 0 0 10px #0ea5e9;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.rili-markdown-renderer .game_ui current_quest ul li:hover::before {
    transform: translateY(-50%) rotate(360deg) scale(1.2);
    color: #818cf8;
}

.rili-markdown-renderer .game_ui current_quest ul li:hover {
    color: #451a03;
    transform: translateX(5px);
}

/* --- 行动推荐列表 (recommend_choice ol, li) --- */
.rili-markdown-renderer .game_ui recommend_choice ol {
    list-style: none;
    padding: 0;
    counter-reset: choice-counter;
}

.rili-markdown-renderer .game_ui recommend_choice ol li {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(254, 243, 199, 0.5));
    margin-bottom: 0.8rem;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0.7rem 1.1rem 0.7rem 3.2rem;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    overflow: hidden;
}

.rili-markdown-renderer .game_ui recommend_choice ol li::before {
    content: counter(choice-counter);
    counter-increment: choice-counter;
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    font-size: 13px;
    background: linear-gradient(135deg, #d97706, #b45309);
    color: white;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 1px 1px 1px #451a03;
    transition: all 0.3s ease-out;
    z-index: 2;
}

.rili-markdown-renderer .game_ui recommend_choice ol li::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -75%;
    width: 50%;
    height: 200%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(25deg);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 1;
}

.rili-markdown-renderer .game_ui recommend_choice ol li:hover::after {
    left: 125%;
    opacity: 1;
}

.rili-markdown-renderer .game_ui recommend_choice ol li:hover {
    border-color: #f59e0b;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(253, 230, 138, 0.8));
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 15px rgba(217, 119, 6, 0.3);
}
.rili-markdown-renderer .game_ui recommend_choice ol li:hover::before {
    background: linear-gradient(135deg, #facc15, #f59e0b);
    transform: translateY(-50%) rotate(10deg) scale(1.1);
    box-shadow: 0 0 12px #fde047;
}

.rili-markdown-renderer .game_ui recommend_choice ol li:active {
    transform: translateY(0px) scale(1);
    box-shadow: 0 2px 5px rgba(217, 119, 6, 0.2);
    transition-duration: 0.1s;
}

.rili-markdown-renderer PANEL {
display: none;
margin-top: 1.2rem;
padding: 1.2rem 1.4rem;
border: 2px solid #f59e0b;
border-radius: 12px;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 251, 240, 0.95) 100%),
repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(217, 119, 6, 0.02) 10px, rgba(217, 119, 6, 0.02) 20px);
color: #451a03;
box-shadow:
0 10px 25px -5px rgba(217, 119, 6, 0.25),
0 4px 10px -3px rgba(245, 158, 11, 0.2),
inset 0 2px 4px rgba(255, 255, 255, 0.8),
inset 0 0 0 1px rgba(255, 255, 255, 0.5);
position: relative;
overflow: hidden;
animation: panelFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
font-size: 1rem;
line-height: 1.7;
letter-spacing: 0.01em;
}

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

/* Panel顶部装饰条 */
.rili-markdown-renderer PANEL::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        #fbbf24 20%, 
        #f59e0b 50%, 
        #fbbf24 80%, 
        transparent 100%);
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.rili-markdown-renderer .game_ui {
    font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
    min-width: 230px;
    border-radius: 16px;
    padding: 19px;
    margin: 1px;
    position: relative;
    background: linear-gradient(135deg,
        #ffffff 0%,
        #fffefb 50%,
        #fffdf7 100%);
    color: #7c2d12;
    border: 2px solid #d97706;
    box-shadow:
        0 8px 20px -6px rgba(217, 119, 6, 0.45),
        0 4px 12px -2px rgba(245, 158, 11, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    /* 统一的列间距变量 */
    --tab-gap: 0.25rem;
    /* 行间距 */
    line-height: 1.7;
}
/* Panel角落装饰 */
.rili-markdown-renderer PANEL::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAgMTBMMjIgMThMMjAgMjZMMTggMThaIiBmaWxsPSIjZmJiZjI0IiBvcGFjaXR5PSIwLjMiLz48Y2lyY2xlIGN4PSIyMCIgY3k9IjIwIiByPSI4IiBzdHJva2U9IiNmNTllMGIiIHN0cm9rZS13aWR0aD0iMC41IiBvcGFjaXR5PSIwLjQiLz48Y2lyY2xlIGN4PSIyMCIgY3k9IjIwIiByPSI0IiBzdHJva2U9IiNkOTc3MDYiIHN0cm9rZS13aWR0aD0iMC41IiBvcGFjaXR5PSIwLjMiLz48L3N2Zz4=');
    background-size: contain;
    opacity: 0.6;
    pointer-events: none;
}

@media (max-width: 480px) {
    .rili-markdown-renderer PANEL {
        padding: 1rem;
        font-size: 0.95rem;
        margin-top: 1rem;
    }
}


/* 基础：在 PANEL 内统一默认字号为 14px（未被标签包裹的文字） */
.rili-markdown-renderer PANEL * {
  font-size: 14px;
  box-sizing: border-box;
}

/* 交互动效（非强制） */
@keyframes softGlow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(245, 158, 11, 0)); }
  50% { filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.25)); }
}
@keyframes glint {
  0% { opacity: 0; transform: translateX(-40%) skewX(-20deg); }
  50% { opacity: 0.7; }
  100% { opacity: 0; transform: translateX(120%) skewX(-20deg); }
}
@keyframes rowRise {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 技能列表专用动画 */
@keyframes skillPulse {
  0%, 100% { 
    box-shadow: 
      0 0 15px rgba(245, 158, 11, 0.15),
      inset 0 0 20px rgba(255, 255, 255, 0.6);
  }
  50% { 
    box-shadow: 
      0 0 25px rgba(245, 158, 11, 0.35),
      inset 0 0 30px rgba(255, 255, 255, 0.8);
  }
}
@keyframes skillShine {
  0% { 
    left: -100%;
    opacity: 0;
  }
  20% {
    opacity: 0.8;
  }
  100% { 
    left: 200%;
    opacity: 0;
  }
}
@keyframes skillFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

/* NPC列表标题：丝带式装饰，左对齐，Georgia 字体 */
.rili-markdown-renderer PANEL list_title {
  display: block;
  text-align: left;
  font-family: 'Georgia', serif;
  font-size: 17px;
  color: #7c2d12;
  letter-spacing: 0.02em;
  margin: 2px 0 10px;
  position: relative;
  padding-left: 28px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
}
.rili-markdown-renderer PANEL list_title::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%) rotate(45deg);
  background: radial-gradient(circle at 30% 30%, #fff 10%, #fcd34d 35%, #d97706 100%);
  box-shadow: 0 0 8px rgba(217,119,6,0.35);
  border: 1px solid rgba(217,119,6,0.6);
  border-radius: 2px;
}
.rili-markdown-renderer PANEL list_title::after {
  content: '';
  position: absolute;
  left: 28px;
  right: 0;
  top: 100%;
  height: 2px;
  background: linear-gradient(to right, rgba(217,119,6,0.4), rgba(217,119,6,0.1), transparent);
}

/* NPC 面板：无方框，使用柔和圆形光晕与装饰线 */
.rili-markdown-renderer PANEL npc_panel {
  display: block;
  position: relative;
  padding: 8px 4px 12px;
  margin: 6px 0 14px;
  color: #6b3a19;
  line-height: 1.8;
  word-break: break-word;
}
.rili-markdown-renderer PANEL npc_panel::before,
.rili-markdown-renderer PANEL npc_panel::after {
  content: '';
  position: absolute;
  pointer-events: none;
  opacity: 0.55;
}
.rili-markdown-renderer PANEL npc_panel::before {
  top: -2px;
  left: -4px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253, 230, 138, 0.35), rgba(217, 119, 6, 0.12) 60%, transparent 70%);
  filter: blur(0.6px);
}
.rili-markdown-renderer PANEL npc_panel::after {
  bottom: -8px;
  right: -8px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.35), rgba(217, 119, 6, 0.1) 50%, transparent 72%);
  filter: blur(1px);
}

/* 标签徽章：圆形/胶囊风格，无方框 */
.rili-markdown-renderer PANEL level,
.rili-markdown-renderer PANEL game_age,
.rili-markdown-renderer PANEL info {
  display: inline-block;
  padding: 2px 10px;
  margin: 2px 2px;
  border-radius: 9999px;
  border: 1px solid rgba(217, 119, 6, 0.45);
  background: linear-gradient(135deg, rgba(255, 252, 240, 0.95), rgba(255, 248, 229, 0.9));
  color: #7c2d12;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    0 2px 8px rgba(217, 119, 6, 0.15);
  vertical-align: middle;
  transform: translateZ(0);
  transition: all 0.25s ease;
}
.rili-markdown-renderer PANEL level { font-weight: 600; font-size: 14px; }
.rili-markdown-renderer PANEL game_age { font-weight: 500; font-size: 14px; }
.rili-markdown-renderer PANEL info { font-weight: 500; font-size: 14px; opacity: 0.95; }

.rili-markdown-renderer PANEL level:hover,
.rili-markdown-renderer PANEL game_age:hover,
.rili-markdown-renderer PANEL info:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.85),
    0 3px 10px rgba(217, 119, 6, 0.26);
  transform: translateY(-1px);
}

/* 徽章左侧小宝石装饰：不同标签不同色相 */
.rili-markdown-renderer PANEL level::before,
.rili-markdown-renderer PANEL game_age::before,
.rili-markdown-renderer PANEL info::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  transform: rotate(45deg);
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(0,0,0,0.08);
}

.rili-markdown-renderer PANEL level::before {
  background: radial-gradient(circle at 30% 30%, #fff 8%, #fcd34d 40%, #d97706 100%);
  border: 1px solid rgba(217, 119, 6, 0.6);
}
.rili-markdown-renderer PANEL game_age::before {
  background: radial-gradient(circle at 30% 30%, #fff 8%, #fda4af 40%, #be185d 100%);
  border: 1px solid rgba(190, 24, 93, 0.6);
}
.rili-markdown-renderer PANEL info::before {
  background: radial-gradient(circle at 30% 30%, #fff 8%, #93c5fd 40%, #3b82f6 100%);
  border: 1px solid rgba(59, 130, 246, 0.6);
}

/* ========== 技能列表部分：华丽升级版 ========== */

/* 技能列表标题：华丽牌匾风格 + 双层光晕 + 闪光掠过 */
.rili-markdown-renderer PANEL npc_skill {
  display: block;
  margin-top: 16px;
  margin-bottom: 12px;
  font-family: 'Georgia', serif;
  font-size: 16px;
  font-weight: 700;
  color: #7c2d12;
  text-align: left;
  position: relative;
  padding: 10px 18px 10px 46px;
  letter-spacing: 0.04em;
  background: 
    linear-gradient(135deg, rgba(254, 243, 199, 0.85) 0%, rgba(253, 224, 71, 0.75) 50%, rgba(251, 191, 36, 0.85) 100%);
  border: 2px solid transparent;
  border-radius: 24px 8px 24px 8px;
  box-shadow:
    0 6px 20px -4px rgba(217, 119, 6, 0.35),
    0 2px 8px rgba(245, 158, 11, 0.25),
    inset 0 2px 12px rgba(255, 255, 255, 0.7),
    inset 0 -2px 8px rgba(217, 119, 6, 0.15);
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
  animation: skillPulse 3s ease-in-out infinite;
}

/* 左侧魔法宝石装饰 */
.rili-markdown-renderer PANEL npc_skill::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%) rotate(45deg);
  background: 
    radial-gradient(circle at 30% 30%, #fff 12%, #fef3c7 25%, #fcd34d 45%, #f59e0b 75%, #d97706 100%);
  border: 2px solid rgba(217, 119, 6, 0.7);
  border-radius: 3px;
  box-shadow: 
    0 0 15px rgba(245, 158, 11, 0.6),
    inset 0 0 8px rgba(255, 255, 255, 0.7);
  animation: softGlow 2s ease-in-out infinite;
}

/* 闪光掠过效果 */
.rili-markdown-renderer PANEL npc_skill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.6) 50%,
    transparent
  );
  transform: skewX(-20deg);
  animation: skillShine 4s ease-in-out infinite;
}

/* 技能列表主体：卡片式设计 */
.rili-markdown-renderer PANEL npc_skill + ul {
  list-style: none;
  padding-left: 0;
  margin: 0 0 16px;
  font-family: 'Georgia', serif;
}

.rili-markdown-renderer PANEL npc_skill + ul li {
  position: relative;
  padding: 12px 16px 12px 52px;
  margin: 8px 0;
  color: #6b3a19;
  background: 
    linear-gradient(135deg, 
      rgba(255, 255, 255, 0.9) 0%, 
      rgba(255, 251, 235, 0.85) 50%, 
      rgba(254, 243, 199, 0.8) 100%
    );
  border: 1.5px solid rgba(217, 119, 6, 0.3);
  border-radius: 12px;
  box-shadow:
    0 4px 12px -3px rgba(217, 119, 6, 0.25),
    0 2px 6px rgba(245, 158, 11, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(217, 119, 6, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* 技能项左侧装饰性能量球 */
.rili-markdown-renderer PANEL npc_skill + ul li::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: 
    radial-gradient(circle at 35% 35%, 
      #fff 0%, 
      #fef3c7 20%, 
      #fcd34d 40%, 
      #f59e0b 70%, 
      #d97706 100%
    );
  border: 2px solid rgba(217, 119, 6, 0.6);
  box-shadow: 
    0 0 12px rgba(245, 158, 11, 0.5),
    inset 0 0 8px rgba(255, 255, 255, 0.6),
    inset -3px -3px 6px rgba(217, 119, 6, 0.3);
}

/* 技能项内部闪光装饰 */
.rili-markdown-renderer PANEL npc_skill + ul li::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

/* 技能项悬浮效果 */
.rili-markdown-renderer PANEL npc_skill + ul li:hover {
  color: #7c2d12;
  background: 
    linear-gradient(135deg, 
      rgba(255, 255, 255, 0.95) 0%, 
      rgba(255, 251, 235, 0.92) 50%, 
      rgba(254, 243, 199, 0.9) 100%
    );
  border-color: rgba(217, 119, 6, 0.5);
  box-shadow:
    0 8px 20px -4px rgba(217, 119, 6, 0.35),
    0 4px 10px rgba(245, 158, 11, 0.25),
    inset 0 2px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 0 rgba(217, 119, 6, 0.12);
  transform: translateY(-2px);
  animation: skillFloat 1.5s ease-in-out infinite;
}

.rili-markdown-renderer PANEL npc_skill + ul li:hover::before {
  box-shadow: 
    0 0 20px rgba(245, 158, 11, 0.7),
    inset 0 0 12px rgba(255, 255, 255, 0.8),
    inset -3px -3px 8px rgba(217, 119, 6, 0.4);
  animation: softGlow 1s ease-in-out infinite;
}

.rili-markdown-renderer PANEL npc_skill + ul li:hover::after {
  opacity: 1;
}

/* 技能项顺序入场动画 */
.rili-markdown-renderer PANEL npc_skill + ul li:nth-child(1) {
  animation: rowRise 0.5s ease 0.1s backwards;
}
.rili-markdown-renderer PANEL npc_skill + ul li:nth-child(2) {
  animation: rowRise 0.5s ease 0.2s backwards;
}
.rili-markdown-renderer PANEL npc_skill + ul li:nth-child(3) {
  animation: rowRise 0.5s ease 0.3s backwards;
}

/* ========== 技能列表部分结束 ========== */

/* 记忆区表格：方框允许，三张表色调各异且统一风格 */
.rili-markdown-renderer PANEL table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 16px 0 18px;
  background: linear-gradient(135deg, rgba(255,253,245,0.92), rgba(255,249,235,0.96));
  border: 1.5px solid rgba(217, 119, 6, 0.35);
  border-radius: 12px;
  overflow: hidden;
  box-shadow:
    0 10px 20px -6px rgba(217,119,6,0.25),
    0 4px 8px -2px rgba(245,158,11,0.20),
    inset 0 1px 0 rgba(255,255,255,0.8);
  color: #78350f;
  font-size: 13px;
}

/* Caption：浮雕牌匾风格 */
.rili-markdown-renderer PANEL table caption {
  caption-side: top;
  display: block;
  font-family: 'Georgia', serif;
  font-size: 15px;
  font-weight: 600;
  color: #7c2d12;
  text-align: center;
  letter-spacing: 0.02em;
  padding: 10px 12px 8px;
  position: relative;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
}
.rili-markdown-renderer PANEL table caption::before,
.rili-markdown-renderer PANEL table caption::after {
  content: '';
  position: absolute;
  top: 100%;
  width: 22%;
  height: 2px;
  background: linear-gradient(to right, rgba(217,119,6,0.35), rgba(217,119,6,0.1), transparent);
}
.rili-markdown-renderer PANEL table caption::before { left: 0; }
.rili-markdown-renderer PANEL table caption::after { right: 0; }

/* 表头与单元格 */
.rili-markdown-renderer PANEL table thead th {
  padding: 10px 10px;
  text-align: left;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  position: relative;
}
.rili-markdown-renderer PANEL table tbody td {
  padding: 10px 10px;
  border-top: 1px solid rgba(217,119,6,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,250,237,0.75));
}
.rili-markdown-renderer PANEL table tbody tr:nth-child(odd) td {
  background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,250,237,0.85));
}
.rili-markdown-renderer PANEL table tbody tr:hover td {
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,250,237,0.95));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

/* 行入场动画与延迟 */
.rili-markdown-renderer PANEL table tbody tr {
  opacity: 0;
  transform: translateY(3px);
  animation: rowRise 0.4s ease forwards;
}
.rili-markdown-renderer PANEL table tbody tr:nth-child(1) { animation-delay: 0.02s; }
.rili-markdown-renderer PANEL table tbody tr:nth-child(2) { animation-delay: 0.06s; }
.rili-markdown-renderer PANEL table tbody tr:nth-child(3) { animation-delay: 0.1s; }
.rili-markdown-renderer PANEL table tbody tr:nth-child(4) { animation-delay: 0.14s; }

/* 三表主题色：LTM（琥珀）/ STM（湛蓝）/ 核心记忆（玫红） */
.rili-markdown-renderer PANEL table:nth-of-type(1) { border-color: rgba(217,119,6,0.45); }
.rili-markdown-renderer PANEL table:nth-of-type(1) thead th {
  background: linear-gradient(135deg, #f59e0b, #fcd34d);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.08);
}
.rili-markdown-renderer PANEL table:nth-of-type(1) caption {
  color: #7c2d12;
}

.rili-markdown-renderer PANEL table:nth-of-type(2) { border-color: rgba(14,165,233,0.45); }
.rili-markdown-renderer PANEL table:nth-of-type(2) thead th {
  background: linear-gradient(135deg, #0ea5e9, #93c5fd);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.08);
}
.rili-markdown-renderer PANEL table:nth-of-type(2) caption {
  color: #0c4a6e;
}

.rili-markdown-renderer PANEL table:nth-of-type(3) { border-color: rgba(190,24,93,0.45); }
.rili-markdown-renderer PANEL table:nth-of-type(3) thead th {
  background: linear-gradient(135deg, #be185d, #f472b6);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.08);
}
.rili-markdown-renderer PANEL table:nth-of-type(3) caption {
  color: #9d174d;
}

/* 可选：边缘柔光强调 */
.rili-markdown-renderer PANEL table::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6);
}

/* 移动端适配 */
@media (max-width: 560px) {
  .rili-markdown-renderer PANEL list_title { font-size: 16px; padding-left: 24px; }
  .rili-markdown-renderer PANEL npc_skill { 
    font-size: 15px; 
    padding: 8px 14px 8px 42px;
  }
  .rili-markdown-renderer PANEL npc_skill::before {
    left: 12px;
    width: 18px;
    height: 18px;
  }
  .rili-markdown-renderer PANEL npc_skill + ul li {
    padding: 10px 12px 10px 46px;
  }
  .rili-markdown-renderer PANEL npc_skill + ul li::before {
    left: 12px;
    width: 20px;
    height: 20px;
  }
  .rili-markdown-renderer PANEL table { font-size: 12.5px; }
  .rili-markdown-renderer PANEL table thead th,
  .rili-markdown-renderer PANEL table tbody td { padding: 8px 8px; }
}

/* 动效无障碍：用户偏好减少动效时禁用动画 */
@media (prefers-reduced-motion: reduce) {
  .rili-markdown-renderer PANEL *,
  .rili-markdown-renderer PANEL table tbody tr {
    animation: none !important;
    transition: none !important;
  }
}
/* ==============================
   整体布局与 <details>/<summary>
   ============================== */
details {
    border: 1px solid transparent;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
}
details + details {
    margin-top: 0.8rem;
}
details[open] {
    border-color: #fcd34d;
    background-color: rgba(255, 253, 250, 0.5);
}
summary {
    font-size: 1.15rem;
    font-weight: 600;
    color: #a16207;
    padding: 0.7rem 2.5rem 0.7rem 2.4rem; /* 左侧留图标空间，右侧留箭头空间 */
    cursor: pointer;
    list-style: none;
    border-radius: 9px;
    background: linear-gradient(to bottom, #fffefb, #fffbeb);
    border: 1px solid #fef3c7;
    position: relative;
    transition: all 0.3s ease;
    user-select: none;
}
summary:hover {
    border-color: #fde68a;
    color: #c2410c;
    box-shadow: 0 4px 10px -2px rgba(217, 119, 6, 0.15);
}
details[open] > summary {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
}
summary::-webkit-details-marker { display: none; }

/* 右侧箭头 */
summary::before {
    content: '';
    position: absolute;
    right: 1rem;
    top: 50%;
    width: 8px;
    height: 8px;
    border-bottom: 2px solid #b45309;
    border-right: 2px solid #b45309;
    transform: translateY(-60%) rotate(45deg);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
summary:hover::before { border-color: #c2410c; }
details[open] > summary::before {
    transform: translateY(-40%) rotate(225deg);
}

/* ====== 【修改4】左侧精致SVG图标 ====== */
summary::after {
    content: '';
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.4rem;
    height: 1.4rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: filter 0.3s ease, transform 0.3s ease;
}
details:nth-of-type(1) > summary::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 1024 1024'%3E%3Cpath d='M367.557449 0.02048c-243.358973 0-367.547209 140.162317-367.547209 401.850523l0 0 0 549.01686 238.382432-238.628187 0-278.891062c0-108.418952 28.732865-177.394212 125.109818-192.897262l0 0c33.668447-6.573949 103.749605-4.280234 148.313194-4.280234l0 0 0 165.597968c0 1.51549 0.204796 4.198316 0.593908 5.590928l0 0c1.863643 6.696826 7.925601 11.611928 15.113938 11.632407l0 0c4.054959 0 7.864163-2.109398 11.796244-5.98004l0 0 413.114298-412.970941-584.856143-0.061439zM785.607328 311.760805l0 278.891062c0 108.418952-28.732865 177.414692-125.109818 192.897262l0 0c-33.668447 6.573949-103.749605 4.280234-148.313194 4.280234l0 0 0-165.597968c0-1.49501-0.204796-4.198316-0.593908-5.590928l0 0c-1.863643-6.717306-7.925601-11.611928-15.113938-11.632407l0 0c-4.054959 0-7.864163 2.109398-11.796244 5.959561l0 0-413.114298 412.950461 584.856143 0.061439c243.358973 0 367.547209-140.162317 367.547209-401.850523l0 0 0-549.01686-238.382432 238.628187z' fill='%2392400e'/%3E%3C/svg%3E");
}

/* 战斗与物品 — 鹰爪战斗 */
details:nth-of-type(2) > summary::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='120 120 800 800'%3E%3Cpath d='M787.662979 214.250213c14.44766-10.158298 29.916596-19.186383 46.774468-24.701277-8.946383 25.654468-25.273191 47.86383-42.389787 68.629787-25.450213 30.978723-54.808511 58.920851-76.486809 92.854468-6.53617-1.211915-17.579574-0.245106-17.851915 8.388086 0.571915 12.881702 1.293617 26.090213-3.172766 38.468085-2.954894-7.897872-3.853617-16.531064-7.693617-24.088511-2.069787-4.003404-7.04-0.408511-8.061276 2.641702-6.045957 13.508085 2.219574 27.683404 1.429787 41.572766 0.27234 20.180426-13.017872 36.684255-25.368511 51.281702-0.585532-11.710638 1.211915-23.325957 2.859575-34.873191 0.354043-4.411915 1.443404-9.654468-1.593192-13.385532-3.554043-3.47234-9.028085-2.587234-13.494468-2.260426-6.154894 0.748936-12.173617 2.328511-18.178723 3.812766 0.081702 3.050213-0.258723 6.331915-2.750639 8.442553-5.909787 5.923404-11.710638 11.969362-17.82468 17.702128-3.649362 3.485957-6.971915-2.028936-9.518298-4.166808-8.265532 8.18383-16.462979 16.449362-24.701277 24.674042 3.921702 2.900426 5.89617 8.156596 2.274043 12.187234-2.328511-2.914043-4.520851-6.359149-8.306383-7.475744-8.660426-3.268085-17.348085-6.413617-26.008511-9.627234-0.326809-5.637447 4.248511-9.409362 8.224681-12.568511 3.213617-1.988085 6.685957 0.27234 9.028085 2.519149 8.156596-8.551489 16.408511-17.021277 24.565106-25.586383-1.64766-1.715745-3.268085-3.417872-4.88851-5.147234 3.921702-5.582979 9.314043-9.858723 13.943829-14.815319 3.485957-3.295319 6.549787-7.965957 11.860426-8.156596 2.042553-9.491064 4.942979-19.104681 4.180426-28.922553-0.13617-4.738723-5.174468-6.781277-9.300426-6.032341-13.453617 1.538723-26.866383 4.357447-40.483404 3.499575 13.984681-11.697021 29.371915-24.524255 48.490213-25.286809 13.603404-1.320851 26.798298 6.12766 40.347234 2.668936 3.526809-1.021277 8.102128-3.06383 8.374468-7.271489-1.157447-2.900426-4.411915-3.908085-7.053617-4.929362-6.154894-1.960851-12.500426-3.254468-18.737022-4.902127 9.722553-3.240851 20.044255-4.234894 30.243405-3.445107 4.425532-0.040851 9.763404 1.184681 13.331063-2.165106 3.880851-4.071489 2.92766-10.035745 2.995745-15.142128 41.218723-27.819574 74.321702-65.770213 114.941277-94.393191m-3.948936 8.497021c-21.147234 15.782128-40.551489 33.715745-60.350639 51.118298 10.37617-3.254468 21.215319-5.446809 31.251064-9.518298 23.734468-22.12766 47.210213-44.541277 70.835745-66.791489-14.965106 6.481702-28.772766 15.36-41.73617 25.191489m-68.221277 62.379575c-14.638298 5.310638-26.144681 16.231489-37.610213 26.362553 1.28 9.341277-4.929362 17.702128-3.526808 27.002553 24.415319-21.637447 48.476596-43.669787 72.687659-65.552341-10.308085 4.61617-20.970213 8.306383-31.550638 12.187235zM275.921702 491.220426c17.034894-17.742979 39.979574-29.766809 64.435745-32.925958 34.764255-4.84766 69.228936 4.221277 103.530213 8.633192 20.384681 2.587234 41.885957 3.799149 61.44-3.690213 4.330213-1.443404 8.59234-4.793191 13.371914-3.349787 5.691915 1.702128 10.648511 5.092766 15.931915 7.720851 8.633191 4.139574 17.742979 7.121702 26.757447 10.280851 5.991489 1.742979 8.156596 9.913191 4.752341 14.828936-14.801702 22.645106-33.293617 44.282553-58.253617 55.911489-21.909787 10.294468-46.978723 10.185532-70.468086 6.672341-34.451064-5.188085-68.711489-14.243404-103.829787-12.759149-9.695319 0.285957-19.322553 1.511489-28.881702 3.145532a104.962723 104.962723 0 0 1 39.611915-12.554894c31.332766-3.458723 62.679149 3.853617 94.039149 1.102979 14.556596-1.211915 29.004255-4.425532 42.444255-10.199149-18.05617 3.077447-36.425532 4.657021-54.740425 3.526808-28.29617-1.484255-55.884255-9.23234-84.248511-9.967659-10.716596-0.50383-21.419574 0.435745-32.108936 1.157447 13.957447-7.285106 29.290213-11.451915 43.65617-17.851915-9.177872-1.55234-17.947234 2.83234-27.070638 2.19234 5.25617-7.530213 14.025532-11.370213 21.051915-16.980425-17.797447-3.540426-33.429787 7.325957-48.803405 14.297872 8.551489-7.244255 16.953191-15.264681 27.724256-19.077447 17.429787-6.345532 36.275745-5.773617 54.549787-6.304681-22.931064-7.339574-47.836596-4.874894-70.359149 2.69617-11.805957 3.717447-22.931064 9.205106-34.532766 13.494469zM189.589787 818.587234c85.964255-85.678298 171.955745-171.342979 257.960851-256.966808 9.87234 0.91234 19.799149 0.898723 29.67149 0.027234-90.566809 90.948085-181.160851 181.868936-271.782128 272.77617-5.269787-5.297021-10.539574-10.580426-15.850213-15.836596z' fill='%2392400e' stroke='%2392400e' stroke-width='15' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* 展开时图标动画 */
details[open] > summary::after {
    animation: summary-icon-pulse 2.5s ease-in-out infinite;
}
@keyframes summary-icon-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 1px rgba(252, 211, 77, 0.2));
        transform: translateY(-50%) scale(1);
    }
    50% {
        filter: drop-shadow(0 0 5px rgba(252, 211, 77, 0.7)) drop-shadow(0 0 10px rgba(245, 158, 11, 0.3));
        transform: translateY(-50%) scale(1.1);
    }
}

details > section { padding: 0 0.8rem; }
details > section:last-child { padding-bottom: 0.8rem; }

/* ==============================
   【修改1】角色头部与性别标识
   ============================== */
character {
    display: block;
    text-align: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed #fcd34d;
    position: relative; /* 为双星特效提供定位基准 */
}
/* 将双星转移至 character */
character::before {
    content: ""; position: absolute; left: 0; top: 0; width: 2.5rem; height: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg%3E%3Cpath d='M2 12 L2 2 L12 2' fill='none' stroke='%23d97706' stroke-width='2.5' stroke-linecap='round'/%3E%3Ccircle cx='2' cy='2' r='2' fill='%23fbbf24'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain; background-repeat: no-repeat; opacity: 0.9;
    animation: glow-pulse 3s ease-in-out infinite;
}
character::after {
    content: ""; position: absolute; right: 0; bottom: 1.5rem; width: 2.5rem; height: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg transform='rotate(180 20 20)'%3E%3Cpath d='M2 12 L2 2 L12 2' fill='none' stroke='%23d97706' stroke-width='2.5' stroke-linecap='round'/%3E%3Ccircle cx='2' cy='2' r='2' fill='%23fbbf24'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain; background-repeat: no-repeat; opacity: 0.9;
    animation: glow-pulse 3s ease-in-out infinite 0.5s;
}

char {
    display: block; text-align: center; 
    font-size: 3.4rem; /* 增大主角名字 */
    font-weight: bold; color: #92400e; letter-spacing: 0.1em; 
    text-shadow: 0 2px 8px rgba(146, 64, 14, 0.2);
    padding: 1.5rem 1rem 1.5rem; margin: 0 auto;
    background-image: linear-gradient(90deg, transparent 0%, #d97706 20%, #f59e0b 50%, #d97706 80%, transparent 100%);
    background-position: 0 100%; background-size: 200% 2px; background-repeat: no-repeat;
    animation: line-flow 3s linear infinite;
}
char::after {
    content: ''; display: inline-block;
    width: 1.25rem; height: 1.25rem; /* 缩小性别图标 */
    vertical-align: middle; margin-left: 0.4rem; margin-bottom: 0.8rem;
    background-size: contain; background-repeat: no-repeat; background-position: center;
}
char[gender="女"]::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M224 739.669333l109.824-109.824A361.109333 361.109333 0 0 1 256 405.333333c0-200.298667 162.368-362.666667 362.666667-362.666666s362.666667 162.368 362.666666 362.666666-162.368 362.666667-362.666666 362.666667a361.109333 361.109333 0 0 1-224.512-77.824L284.330667 800l87.168 87.168a42.666667 42.666667 0 0 1-60.330667 60.330667L224 860.330667l-108.501333 108.501333a42.666667 42.666667 0 0 1-60.330667-60.330667L163.669333 800l-87.168-87.168a42.666667 42.666667 0 0 1 60.330667-60.330667l87.168 87.168zM618.666667 682.666667c153.173333 0 277.333333-124.16 277.333333-277.333334S771.84 128 618.666667 128s-277.333333 124.16-277.333334 277.333333 124.16 277.333333 277.333334 277.333334z' fill='%23db2777'/%3E%3C/svg%3E");
    filter: drop-shadow(0 2px 4px rgba(219, 39, 119, 0.4));
}
char[gender="扶她"]::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M440 634c-4 0-7.8 0-11.8-0.2-4-0.2-7.8-0.4-11.8-0.8s-7.8-0.8-11.8-1.4c-3.8-0.6-7.8-1.2-11.6-2s-7.6-1.6-11.6-2.6c-3.8-1-7.6-2-11.4-3.2-3.8-1.2-7.6-2.4-11.2-3.8-3.8-1.4-7.4-2.8-11-4.2l-10.8-4.8c-3.6-1.6-7-3.4-10.6-5.4-3.4-1.8-6.8-3.8-10.2-5.8-3.4-2-6.6-4.2-10-6.4-3.2-2.2-6.4-4.4-9.6-6.8-3.2-2.4-6.2-4.8-9.4-7.2-3-2.4-6-5-9-7.8-3-2.6-5.8-5.4-8.6-8.2-2.8-2.8-5.4-5.6-8.2-8.6-2.6-3-5.2-5.8-7.8-9-2.4-3-5-6.2-7.2-9.4-2.4-3.2-4.6-6.4-6.8-9.6-2.2-3.2-4.2-6.6-6.4-10-2-3.4-4-6.8-5.8-10.2-1.8-3.4-3.6-7-5.4-10.6l-4.8-10.8c-1.6-3.6-3-7.4-4.2-11-1.4-3.8-2.6-7.4-3.8-11.2s-2.2-7.6-3.2-11.4c-1-3.8-1.8-7.6-2.6-11.6s-1.4-7.8-2-11.6c-0.6-3.8-1-7.8-1.4-11.8s-0.6-7.8-0.8-11.8c-0.2-4-0.2-7.8-0.2-11.8 0-4 0-7.8 0.2-11.8 0.2-4 0.4-7.8 0.8-11.8 0.4-4 0.8-7.8 1.4-11.8 0.6-3.8 1.2-7.8 2-11.6s1.6-7.6 2.6-11.6c1-3.8 2-7.6 3.2-11.4s2.4-7.6 3.8-11.2 2.8-7.4 4.2-11l4.8-10.8c1.6-3.6 3.4-7 5.4-10.6 1.8-3.4 3.8-6.8 5.8-10.2 2-3.4 4.2-6.6 6.4-10 2.2-3.2 4.4-6.4 6.8-9.6 2.4-3.2 4.8-6.2 7.2-9.4 2.4-3 5-6 7.8-9 2.6-3 5.4-5.8 8.2-8.6 2.8-2.8 5.6-5.4 8.6-8.2 3-2.6 5.8-5.2 9-7.8 3-2.4 6.2-5 9.4-7.2 3.2-2.4 6.4-4.6 9.6-6.8s6.6-4.2 10-6.4c3.4-2 6.8-4 10.2-5.8 3.4-1.8 7-3.6 10.6-5.4s7.2-3.2 10.8-4.8c3.6-1.6 7.4-3 11-4.2 3.8-1.4 7.4-2.6 11.2-3.8 3.8-1.2 7.6-2.2 11.4-3.2 3.8-1 7.6-1.8 11.6-2.6 3.8-0.8 7.8-1.4 11.6-2s7.8-1 11.8-1.4c4-0.4 7.8-0.6 11.8-0.8 4-0.2 7.8-0.2 11.8-0.2 4 0 7.8 0 11.8 0.2 4 0.2 7.8 0.4 11.8 0.8 4 0.4 7.8 0.8 11.8 1.4 3.8 0.6 7.8 1.2 11.6 2s7.6 1.6 11.6 2.6c3.8 1 7.6 2 11.4 3.2 3.8 1.2 7.6 2.4 11.2 3.8 3.8 1.4 7.4 2.8 11 4.2l10.8 4.8c3.6 1.6 7 3.4 10.6 5.4 3.4 1.8 6.8 3.8 10.2 5.8 3.4 2 6.6 4.2 10 6.4s6.4 4.4 9.6 6.8c3.2 2.4 6.2 4.8 9.4 7.2 3 2.4 6 5 9 7.8 3 2.6 5.8 5.4 8.6 8.2 2.8 2.8 5.4 5.6 8.2 8.6 2.6 3 5.2 5.8 7.8 9 2.4 3 5 6.2 7.2 9.4 2.4 3.2 4.6 6.4 6.8 9.6 2.2 3.2 4.2 6.6 6.4 10 2 3.4 4 6.8 5.8 10.2 1.8 3.4 3.6 7 5.4 10.6l4.8 10.8c1.6 3.6 3 7.4 4.2 11 1.4 3.8 2.6 7.4 3.8 11.2 1.2 3.8 2.2 7.6 3.2 11.4s1.8 7.6 2.6 11.6 1.4 7.8 2 11.6c0.6 3.8 1 7.8 1.4 11.8 0.4 4 0.6 7.8 0.8 11.8 0.2 4 0.2 7.8 0.2 11.8 0 4-0.2 7.8-0.4 11.8-0.2 4-0.4 7.8-0.8 11.8s-0.8 7.8-1.4 11.8c-0.6 3.8-1.2 7.8-2 11.6s-1.6 7.6-2.6 11.6c-1 3.8-2 7.6-3.2 11.4-1.2 3.8-2.4 7.4-3.8 11.2-1.4 3.8-2.8 7.4-4.2 11l-4.8 10.8c-1.6 3.6-3.4 7-5.4 10.6-1.8 3.4-3.8 6.8-5.8 10.2-2 3.4-4.2 6.6-6.4 10s-4.4 6.4-6.8 9.6c-2.4 3.2-4.8 6.2-7.2 9.4-2.4 3-5 6-7.8 9-2.6 3-5.4 5.8-8.2 8.6-2.8 2.8-5.6 5.4-8.6 8.2-3 2.6-5.8 5.2-9 7.8s-6.2 5-9.4 7.2c-3.2 2.4-6.4 4.6-9.6 6.8-3.2 2.2-6.6 4.2-10 6.4-3.4 2-6.8 4-10.2 5.8-3.4 1.8-7 3.6-10.6 5.4l-10.8 4.8c-3.6 1.6-7.4 3-11 4.2-3.8 1.4-7.4 2.6-11.2 3.8-3.8 1.2-7.6 2.2-11.4 3.2-3.8 1-7.6 1.8-11.6 2.6-3.8 0.8-7.8 1.4-11.6 2-3.8 0.6-7.8 1-11.8 1.4s-7.8 0.6-11.8 0.8c-3.8 0.2-7.8 0.2-11.6 0.2zM883 5.6h-156c-1.6 0-3 0-4.6 0.2-1.6 0.2-3 0.4-4.6 0.6s-3 0.6-4.4 1.2c-1.4 0.4-2.8 1-4.2 1.6s-2.8 1.2-4.2 2-2.6 1.4-4 2.4c-1.2 0.8-2.4 1.8-3.6 2.8-1.2 1-2.2 2-3.4 3-1 1-2 2.2-3 3.4-1 1.2-1.8 2.4-2.8 3.6-0.8 1.2-1.6 2.6-2.4 4-0.8 1.4-1.4 2.8-2 4.2s-1 2.8-1.6 4.2c-0.4 1.4-0.8 3-1.2 4.4-0.2 1.4-0.6 3-0.6 4.6-0.2 1.6-0.2 3-0.2 4.6 0 1.6 0 3 0.2 4.6 0.2 1.6 0.4 3 0.6 4.6 0.2 1.4 0.6 3 1.2 4.4 0.4 1.4 1 2.8 1.6 4.2s1.2 2.8 2 4.2c0.8 1.4 1.4 2.6 2.4 4 0.8 1.2 1.8 2.4 2.8 3.6 1 1.2 2 2.2 3 3.4 1 1 2.2 2 3.4 3 1.2 1 2.4 1.8 3.6 2.8 1.2 0.8 2.6 1.6 4 2.4s2.8 1.4 4.2 2c1.4 0.6 2.8 1 4.2 1.6 1.4 0.4 3 0.8 4.4 1.2s3 0.6 4.6 0.6c1.6 0.2 3 0.2 4.6 0.2h44l-78.2 78.2c-7.8-9-16-17.8-24.8-26s-17.8-16-27.4-23.2-19.4-13.8-29.8-20c-10.2-6.2-20.8-11.8-31.8-16.8-10.8-5-22-9.4-33.4-13.2-11.4-3.8-22.8-7-34.6-9.6-11.6-2.6-23.4-4.4-35.4-5.8-11.8-1.2-23.8-2-35.8-2C256 60.8 106.6 210.4 106.6 394c0 168 125 307.4 286.8 330v79.2h-59c-1.6 0-3 0-4.6 0.2-1.6 0.2-3 0.4-4.6 0.6s-3 0.6-4.4 1.2c-1.4 0.4-2.8 1-4.2 1.6-1.4 0.6-2.8 1.2-4.2 2-1.4 0.8-2.6 1.4-4 2.4-1.2 0.8-2.4 1.8-3.6 2.8-1.2 1-2.2 2-3.4 3s-2 2.2-3 3.4c-1 1.2-1.8 2.4-2.8 3.6-0.8 1.2-1.6 2.6-2.4 4-0.8 1.4-1.4 2.8-2 4.2-0.6 1.4-1 2.8-1.6 4.2-0.4 1.4-0.8 3-1.2 4.4s-0.6 3-0.6 4.6c-0.2 1.6-0.2 3-0.2 4.6 0 1.6 0 3 0.2 4.6 0.2 1.6 0.4 3 0.6 4.6s0.6 3 1.2 4.4c0.4 1.4 1 2.8 1.6 4.2 0.6 1.4 1.2 2.8 2 4.2 0.8 1.4 1.4 2.6 2.4 4 0.8 1.2 1.8 2.4 2.8 3.6 1 1.2 2 2.2 3 3.4s2.2 2 3.4 3 2.4 1.8 3.6 2.8c1.2 0.8 2.6 1.6 4 2.4 1.4 0.8 2.8 1.4 4.2 2 1.4 0.6 2.8 1 4.2 1.6 1.4 0.4 3 0.8 4.4 1.2 1.4 0.2 3 0.6 4.6 0.6 1.6 0.2 3 0.2 4.6 0.2h59v76c0 1.6 0 3 0.2 4.6 0.2 1.6 0.4 3 0.6 4.6 0.2 1.4 0.6 3 1.2 4.4 0.4 1.4 1 2.8 1.6 4.2 0.6 1.4 1.2 2.8 2 4.2 0.8 1.4 1.4 2.6 2.4 4 0.8 1.2 1.8 2.4 2.8 3.6 1 1.2 2 2.2 3 3.4 1 1 2.2 2 3.4 3 1.2 1 2.4 1.8 3.6 2.8 1.2 0.8 2.6 1.6 4 2.4 1.4 0.8 2.8 1.4 4.2 2 1.4 0.6 2.8 1 4.2 1.6s3 0.8 4.4 1.2 3 0.6 4.6 0.6c1.6 0.2 3 0.2 4.6 0.2 1.6 0 3 0 4.6-0.2 1.6-0.2 3-0.4 4.6-0.6 1.4-0.2 3-0.6 4.4-1.2s2.8-1 4.2-1.6c1.4-0.6 2.8-1.2 4.2-2 1.4-0.8 2.6-1.4 4-2.4 1.2-0.8 2.4-1.8 3.6-2.8 1.2-1 2.2-2 3.4-3 1-1 2-2.2 3-3.4 1-1.2 1.8-2.4 2.8-3.6 0.8-1.2 1.6-2.6 2.4-4 0.8-1.4 1.4-2.8 2-4.2 0.6-1.4 1-2.8 1.6-4.2 0.4-1.4 0.8-3 1.2-4.4 0.2-1.4 0.6-3 0.6-4.6 0.2-1.6 0.2-3 0.2-4.6v-76H546c1.6 0 3 0 4.6-0.2s3-0.4 4.6-0.6c1.4-0.2 3-0.6 4.4-1.2s2.8-1 4.2-1.6c1.4-0.6 2.8-1.2 4.2-2 1.4-0.8 2.6-1.4 4-2.4 1.2-0.8 2.4-1.8 3.6-2.8 1.2-1 2.2-2 3.4-3 1-1 2-2.2 3-3.4 1-1.2 1.8-2.4 2.8-3.6 0.8-1.2 1.6-2.6 2.4-4 0.8-1.4 1.4-2.8 2-4.2 0.6-1.4 1-2.8 1.6-4.2 0.4-1.4 0.8-3 1.2-4.4 0.2-1.4 0.6-3 0.6-4.6 0.2-1.6 0.2-3 0.2-4.6 0-1.6 0-3-0.2-4.6-0.2-1.6-0.4-3-0.6-4.6-0.2-1.4-0.6-3-1.2-4.4-0.4-1.4-1-2.8-1.6-4.2-0.6-1.4-1.2-2.8-2-4.2-0.8-1.4-1.4-2.6-2.4-4-0.8-1.2-1.8-2.4-2.8-3.6-1-1.2-2-2.2-3-3.4-1-1-2.2-2-3.4-3-1.2-1-2.4-1.8-3.6-2.8-1.2-0.8-2.6-1.6-4-2.4-1.4-0.8-2.8-1.4-4.2-2-1.4-0.6-2.8-1-4.2-1.6-1.4-0.4-3-0.8-4.4-1.2-1.4-0.2-3-0.6-4.6-0.6s-3-0.2-4.6-0.2h-59V724c161.8-22.6 286.8-162 286.8-330 0-23.6-2.4-47-7.4-70s-12.4-45.4-22-66.8l92.8-92.8V208c0 1.6 0 3 0.2 4.6s0.4 3 0.6 4.6c0.2 1.4 0.6 3 1.2 4.4 0.4 1.4 1 2.8 1.6 4.2 0.6 1.4 1.2 2.8 2 4.2 0.8 1.4 1.4 2.6 2.4 4 0.8 1.2 1.8 2.4 2.8 3.6 1 1.2 2 2.2 3 3.4 1 1 2.2 2 3.4 3 1.2 1 2.4 1.8 3.6 2.8 1.2 0.8 2.6 1.6 4 2.4 1.4 0.8 2.8 1.4 4.2 2 1.4 0.6 2.8 1 4.2 1.6 1.4 0.4 3 0.8 4.4 1.2 1.4 0.2 3 0.6 4.6 0.6 1.6 0.2 3 0.2 4.6 0.2s3 0 4.6-0.2c1.6-0.2 3-0.4 4.6-0.6s3-0.6 4.4-1.2c1.4-0.4 2.8-1 4.2-1.6 1.4-0.6 2.8-1.2 4.2-2 1.4-0.8 2.6-1.4 4-2.4 1.2-0.8 2.4-1.8 3.6-2.8 1.2-1 2.2-2 3.4-3s2-2.2 3-3.4c1-1.2 1.8-2.4 2.8-3.6 0.8-1.2 1.6-2.6 2.4-4 0.8-1.4 1.4-2.8 2-4.2 0.6-1.4 1-2.8 1.6-4.2 0.4-1.4 0.8-3 1.2-4.4 0.2-1.4 0.6-3 0.6-4.6 0.2-1.6 0.2-3 0.2-4.6V52c0-1.6 0-3-0.2-4.6-0.2-1.6-0.4-3-0.6-4.6-0.2-1.4-0.6-3-1.2-4.4-0.4-1.4-1-2.8-1.6-4.2s-1.2-2.8-2-4.2c-0.8-1.4-1.4-2.6-2.4-4-0.8-1.2-1.8-2.4-2.8-3.6-1-1.2-2-2.2-3-3.4s-2.2-2-3.4-3c-1.2-1-2.4-1.8-3.6-2.8-1.2-0.8-2.6-1.6-4-2.4-1.4-0.8-2.8-1.4-4.2-2-1.4-0.6-2.8-1-4.2-1.6-1.4-0.4-3-0.8-4.4-1.2-1.4-0.2-3-0.6-4.6-0.6-2.6 0.2-4.2 0.2-5.6 0.2z' fill='%239333ea'/%3E%3C/svg%3E");
    filter: drop-shadow(0 2px 4px rgba(147, 51, 234, 0.4));
}
.char_details { font-size: 0.9rem; color: #b45309; }

stat {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 1.2rem 0.5rem;
    margin-bottom: 1.2rem;
    background: linear-gradient(180deg, #fffbeb 0%, #fffefb 100%);
    border: 1px solid #fef3c7;
    border-radius: 12px;
    box-shadow: inset 0 2px 12px rgba(217, 119, 6, 0.06);
}

exp, deprave {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    font-size: 1.9rem;
    font-weight: 800;
    font-family: 'Segoe UI', monospace;
    cursor: pointer;
    padding-top: 12px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}
exp:hover, deprave:hover {
    transform: scale(1.08);
}

/* ---- 等级圆环 (琥珀金) ---- */
exp {
    color: #92400e;
    background:
        radial-gradient(circle, #fffefb 36px, transparent 37px),
        conic-gradient(
            from 0deg,
            #d97706 0,
            #f59e0b calc(var(--v) * 100%),
            #fef3c7 calc(var(--v) * 100%),
            #fef3c7 100%
        );
    box-shadow:
        0 0 0 3px #fef3c7,
        0 0 0 5px rgba(245, 158, 11, 0.15),
        0 4px 14px rgba(245, 158, 11, 0.2);
}
exp:hover {
    box-shadow:
        0 0 0 3px #fde68a,
        0 0 0 5px rgba(245, 158, 11, 0.3),
        0 4px 20px rgba(245, 158, 11, 0.35);
}

/* ---- 堕落圆环 (魅魔粉) ---- */
deprave {
    color: #9d174d;
    background:
        radial-gradient(circle, #fffefb 36px, transparent 37px),
        conic-gradient(
            from 0deg,
            #db2777 0,
            #ec4899 calc(var(--v) * 100%),
            #fce7f3 calc(var(--v) * 100%),
            #fce7f3 100%
        );
    box-shadow:
        0 0 0 3px #fce7f3,
        0 0 0 5px rgba(236, 72, 153, 0.15),
        0 4px 14px rgba(236, 72, 153, 0.2);
}
deprave:hover {
    box-shadow:
        0 0 0 3px #fbcfe8,
        0 0 0 5px rgba(236, 72, 153, 0.3),
        0 4px 20px rgba(236, 72, 153, 0.35);
}

/* ---- 圆环内标签 ---- */
exp::before {
    content: 'LV';
    position: absolute;
    top: 22px;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: sans-serif;
    color: #b45309;
    letter-spacing: 1.5px;
    line-height: 1;
}
deprave::before {
    content: 'CL';
    position: absolute;
    top: 22px;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: sans-serif;
    color: #be185d;
    letter-spacing: 1.5px;
    line-height: 1;
}

/* ---- Hover Tooltip ---- */
exp::after, deprave::after {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    padding: 0.55rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: sans-serif;
    white-space: nowrap;
    z-index: 20;
    color: #fff;
    background: rgba(20, 8, 14, 0.94);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
exp::after {
    content: "经验: " attr(current) " / " attr(max);
    border: 1px solid #f59e0b;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35), 0 0 12px rgba(245, 158, 11, 0.35);
}
deprave::after {
    content: "堕落度: " attr(current) " / " attr(max);
    border: 1px solid #ec4899;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35), 0 0 12px rgba(236, 72, 153, 0.35);
}
exp:hover::after, deprave:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* ==============================
   进度条 (progress 元素)
   ============================== */
.resource, lewd { display: block; }
progress {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 26px;
    border: none;
    border-radius: 13px;
    position: relative;
    background-color: rgba(0,0,0,0.1);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
    overflow: visible;
    margin-bottom: 0.8rem;
    color: white;
    font-weight: 600;
}
progress[type="lust"],
progress[type="expose"] {
    height: 20px;
    border-radius: 10px;
}
progress::-webkit-progress-bar {
    background-color: transparent;
    border-radius: 13px;
}
progress::-webkit-progress-value {
    border-radius: 13px;
    box-shadow: inset 0 -2px 5px rgba(0,0,0,0.3);
    transition: width 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
progress[type="hp"]::-webkit-progress-value    { background: linear-gradient(135deg, #4ade80, #16a34a); }
progress[type="mp"]::-webkit-progress-value    { background: linear-gradient(135deg, #818cf8, #4f46e5); }
progress[type="tp"]::-webkit-progress-value    { background: linear-gradient(135deg, #facc15, #f59e0b); }
progress[type="lust"]::-webkit-progress-value  { background: linear-gradient(135deg, #f9a8d4, #ec4899); }
progress[type="expose"]::-webkit-progress-value{ background: linear-gradient(135deg, #fca5a5, #ef4444); }
progress::-moz-progress-bar {
    border-radius: 13px;
    box-shadow: inset 0 -2px 5px rgba(0,0,0,0.3);
}
progress[type="hp"]::-moz-progress-bar    { background: linear-gradient(135deg, #4ade80, #16a34a); }
progress[type="mp"]::-moz-progress-bar    { background: linear-gradient(135deg, #818cf8, #4f46e5); }
progress[type="tp"]::-moz-progress-bar    { background: linear-gradient(135deg, #facc15, #f59e0b); }
progress[type="lust"]::-moz-progress-bar  { background: linear-gradient(135deg, #f9a8d4, #ec4899); }
progress[type="expose"]::-moz-progress-bar{ background: linear-gradient(135deg, #fca5a5, #ef4444); }
progress::before {
    position: absolute;
    left: 12px; top: 50%;
    transform: translateY(-50%);
    color: white; font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
    font-size: 0.9rem; z-index: 2; pointer-events: none;
}
progress[type="hp"]::before    { content: "HP"; }
progress[type="mp"]::before    { content: "MP"; }
progress[type="tp"]::before    { content: "TP"; }
progress[type="lust"]::before  { content: "发情值"; }
progress[type="expose"]::before{ content: "露出度"; }
progress::after {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    color: white; font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
    font-size: 0.95rem; z-index: 2; pointer-events: none;
    content: attr(value) " / " attr(max);
}
progress[type="lust"]::after,
progress[type="expose"]::after {
    font-size: 0.85rem; right: 10px;
    content: attr(value) "%";
}

/* ==============================
   属性图标 (原封不动)
   ============================== */
attributes { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; text-align: center; }
attr {
    background: rgba(255,255,255,0.4);
    padding: 0.3rem 0.8rem 0.3rem 2.8rem;
    border-radius: 12px;
    border: 1px solid rgba(245,158,11,0.3);
    font-size: 0.9rem;
    position: relative;
    display: inline-block;
}
attr::before {
    content: '';
    position: absolute;
    left: 0.5rem; top: 50%;
    transform: translateY(-50%);
    width: 1.5rem; height: 1.5rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
attr:nth-child(1)::before {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iYmxhZGUiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj4KICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3R5bGU9InN0b3AtY29sb3I6I0ZGRkZGRjtzdG9wLW9wYWNpdHk6MC45IiAvPgogICAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3R5bGU9InN0b3AtY29sb3I6I0U1RTdFQjtzdG9wLW9wYWNpdHk6MSIgLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdHlsZT0ic3RvcC1jb2xvcjojOUM5RDlGO3N0b3Atb3BhY2l0eToxIiAvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iaGlsdCIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojRkZCQjNCO3N0b3Atb3BhY2l0eToxIiAvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOiNEOTczMzE7c3RvcC1vcGFjaXR5OjEiIC8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPGZpbHRlciBpZD0iZ2xvdyI+CiAgICAgIDxmZUdhdXNzaWFuQmx1ciBzdGREZXZpYXRpb249IjEuNSIgcmVzdWx0PSJjb2xvcmVkQmx1ciIvPgogICAgICA8ZmVNZXJnZT4KICAgICAgICA8ZmVNZXJnZU5vZGUgaW49ImNvbG9yZWRCbHVyIi8+CiAgICAgICAgPGZlTWVyZ2VOb2RlIGluPSJTb3VyY2VHcmFwaGljIi8+CiAgICAgIDwvZmVNZXJnZT4KICAgIDwvZmlsdGVyPgogIDwvZGVmcz4KICA8IS0tIOeBq+eEsOaViOaenCAtLT4KICA8cGF0aCBkPSJNMjIgMzlMMTkgNDJMMjkgNDJMMjYgMzlIMjJaIiBmaWxsPSIjNEE0QTRBIi8+CiAgPHBhdGggZD0iTTIzIDM2TDIyIDM5SDI2TDI1IDM2SDIzWiIgZmlsbD0idXJsKCNoaWx0KSIgc3Ryb2tlPSIjRDk3MzMxIiBzdHJva2Utd2lkdGg9IjAuNSIvPgogIDxyZWN0IHg9IjIxIiB5PSIzNCIgd2lkdGg9IjYiIGhlaWdodD0iMyIgcng9IjAuNSIgZmlsbD0idXJsKCNoaWx0KSIgc3Ryb2tlPSIjRDk3MzMxIiBzdHJva2Utd2lkdGg9IjAuNSIvPgogIDwhLS0g5Zi254OfIC0tPgogIDxwYXRoIGQ9Ik0yNCA1TDIwIDEwTDIyIDM0SDI2TDI4IDEwTDI0IDVaIiBmaWxsPSJ1cmwoI2JsYWRlKSIgc3Ryb2tlPSIjNzA3Mjc1IiBzdHJva2Utd2lkdGg9IjEiLz4KICA8IS0tIOWJkee6v+S4ree6vyAtLT4KICA8bGluZSB4MT0iMjQiIHkxPSI4IiB4Mj0iMjQiIHkyPSIzMiIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjAuOCIgb3BhY2l0eT0iMC42Ii8+CiAgPCEtLSDngavogYnnibnmlYggLS0+CiAgPHBhdGggZD0iTTI0IDNDMjQgMyAyMCA1IDE4IDhDMjIgNyAyNCA1IDI0IDVDMjQgNSAyNiA3IDMwIDhDMjggNSAyNCAzIDI0IDNaIiBmaWxsPSIjRkZCQjNCIiBvcGFjaXR5PSIwLjQiIGZpbHRlcj0idXJsKCNnbG93KSIvPgogIDxwYXRoIGQ9Ik0xOSA5TDE3IDEyTDE5IDEwWiIgZmlsbD0iI0ZGQUIzQiIgb3BhY2l0eT0iMC41Ii8+CiAgPHBhdGggZD0iTTI5IDlMMzEgMTJMMjkgMTBaIiBmaWxsPSIjRkZBQjNCIiBvcGFjaXR5PSIwLjUiLz4KPC9zdmc+');
}
attr:nth-child(2)::before {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcz4KICAgIDxyYWRpYWxHcmFkaWVudCBpZD0ibWFnaWNHbG93Ij4KICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3R5bGU9InN0b3AtY29sb3I6I0ZGRkZGRjtzdG9wLW9wYWNpdHk6MC45IiAvPgogICAgICA8c3RvcCBvZmZzZXQ9IjMwJSIgc3R5bGU9InN0b3AtY29sb3I6I0MwODRGQztzdG9wLW9wYWNpdHk6MC43IiAvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOiM3QzNBRUQ7c3RvcC1vcGFjaXR5OjEiIC8+CiAgICA8L3JhZGlhbEdyYWRpZW50PgogICAgPGxpbmVhckdyYWRpZW50IGlkPSJzdGFyR29sZCI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0eWxlPSJzdG9wLWNvbG9yOiNGRkRDNkE7c3RvcC1vcGFjaXR5OjEiIC8+CiAgICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I0ZGQjAzQjtzdG9wLW9wYWNpdHk6MSIgLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgogIDwhLS0g5aSW5Zyw6a2U5rOV6Zi1IC0tPgogIDxjaXJjbGUgY3g9IjI0IiBjeT0iMjQiIHI9IjE2IiBmaWxsPSJub25lIiBzdHJva2U9InVybCgjbWFnaWNHbG93KSIgc3Ryb2tlLXdpZHRoPSIxLjUiIG9wYWNpdHk9IjAuNCIvPgogIDxjaXJjbGUgY3g9IjI0IiBjeT0iMjQiIHI9IjEyIiBmaWxsPSJub25lIiBzdHJva2U9IiNDMDg0RkMiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iMC42Ii8+CiAgPCEtLSDlha3op5LmmJ/pqaUgLS0+CiAgPHBhdGggZD0iTTI0IDEwTDI2LjUgMTlMMzYgMjBMMjguNSAyNi41TDMxIDM2TDI0IDMwTDE3IDM2TDE5LjUgMjYuNUwxMiAyMEwyMS41IDE5TDI0IDEwWiIgZmlsbD0idXJsKCNtYWdpY0dsb3cpIiBzdHJva2U9IiM3QzNBRUQiIHN0cm9rZS13aWR0aD0iMSIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgogIDwhLS0g5Lit5b+D5bCP5pif5pifIC0tPgogIDxjaXJjbGUgY3g9IjI0IiBjeT0iMjQiIHI9IjMiIGZpbGw9InVybCgjc3RhckdvbGQpIi8+CiAgPCEtLSDpq5Tms5XnrKblj7cgLS0+CiAgPGxpbmUgeDE9IjI0IiB5MT0iOCIgeDI9IjI0IiB5Mj0iMTUiIHN0cm9rZT0iI0MwODRGQyIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIwLjYiLz4KICA8bGluZSB4MT0iMjQiIHkxPSIzMyIgeDI9IjI0IiB5Mj0iNDAiIHN0cm9rZT0iI0MwODRGQyIgc3Ryb2tlLXdpZHRoPSIxIiBvcGFjaXR5PSIwLjYiLz4KICA8bGluZSB4MT0iOCIgeTE9IjI0IiB4Mj0iMTUiIHkyPSIyNCIgc3Ryb2tlPSIjQzA4NEZDIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9IjAuNiIvPgogIDxsaW5lIHgxPSIzMyIgeTE9IjI0IiB4Mj0iNDAiIHkyPSIyNCIgc3Ryb2tlPSIjQzA4NEZDIiBzdHJva2Utd2lkdGg9IjEiIG9wYWNpdHk9IjAuNiIvPgogIDwhLS0g6KOF6aWw5bCP5YWD57Sg5pif5pifIC0tPgogIDxjaXJjbGUgY3g9IjE0IiBjeT0iMTQiIHI9IjEuNSIgZmlsbD0idXJsKCNzdGFyR29sZCkiIG9wYWNpdHk9IjAuOCIvPgogIDxjaXJjbGUgY3g9IjM0IiBjeT0iMTQiIHI9IjIiIGZpbGw9InVybCgjc3RhckdvbGQpIiBvcGFjaXR5PSIwLjciLz4KICA8Y2lyY2xlIGN4PSIzNCIgY3k9IjM0IiByPSIxLjUiIGZpbGw9InVybCgjc3RhckdvbGQpIiBvcGFjaXR5PSIwLjgiLz4KICA8Y2lyY2xlIGN4PSIxNCIgY3k9IjM0IiByPSIxIiBmaWxsPSJ1cmwoI3N0YXJHb2xkKSIgb3BhY2l0eT0iMC45Ii8+CiAgPGNpcmNsZSBjeD0iOCIgY3k9IjI0IiByPSIxIiBmaWxsPSIjQzA4NEZDIiBvcGFjaXR5PSIwLjYiLz4KICA8Y2lyY2xlIGN4PSI0MCIgY3k9IjI0IiByPSIxIiBmaWxsPSIjQzA4NEZDIiBvcGFjaXR5PSIwLjYiLz4KPC9zdmc+');
}
attr:nth-child(3)::before {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ic2hpZWxkQmx1ZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojNjBBNUZBO3N0b3Atb3BhY2l0eToxIiAvPgogICAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3R5bGU9InN0b3AtY29sb3I6IzM5ODFEMjtzdG9wLW9wYWNpdHk6MSIgLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdHlsZT0ic3RvcC1jb2xvcjojMjU2M0FCO3N0b3Atb3BhY2l0eToxIiAvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iZ29sZEFjY2VudCIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojRkZEQzZBO3N0b3Atb3BhY2l0eToxIiAvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOiNGRjk4MkI7c3RvcC1vcGFjaXR5OjEiIC8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICA8IS0tIOebvueJjOS4u+S9kyAtLT4KICA8cGF0aCBkPSJNMjQgNkw4IDExQzggMTQuNSA4IDE5IDEwIDI0QzEyIDI5IDE2IDM0IDI0IDQyQzMyIDM0IDM2IDI5IDM4IDI0QzQwIDE5IDQwIDE0LjUgNDAgMTFMMjQgNloiIGZpbGw9InVybCgjc2hpZWxkQmx1ZSkiIHN0cm9rZT0iIzFENEVENyIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KICA8IS0tIOWGhemDqOmYtOW9sSAtLT4KICA8cGF0aCBkPSJNMjQgNkwxMSAxMC41QzExIDE0IDExIDE4IDEzIDIzQzE1IDI4IDE4LjUgMzMgMjQgNDBDMjkuNSAzMyAzMyAyOCAzNSAyM0MzNyAxOCAzNyAxNCAzNyAxMC41TDI0IDZaIiBmaWxsPSJub25lIiBzdHJva2U9IiM2MEE1RkEiIHN0cm9rZS13aWR0aD0iMC44IiBvcGFjaXR5PSIwLjQiLz4KICA8IS0tIOS4reaWreWIhuWJsuermSAtLT4KICA8bGluZSB4MT0iMjQiIHkxPSI2IiB4Mj0iMjQiIHkyPSI0MCIgc3Ryb2tlPSJ1cmwoI2dvbGRBY2NlbnQpIiBzdHJva2Utd2lkdGg9IjIiLz4KICA8bGluZSB4MT0iMTUiIHkxPSIyNCIgeDI9IjMzIiB5Mj0iMjQiIHN0cm9rZT0idXJsKCNnb2xkQWNjZW50KSIgc3Ryb2tlLXdpZHRoPSIyIi8+CiAgPCEtLSDkuK3lv4Pnuafnq6Xlm77moYggLS0+CiAgPHBhdGggZD0iTTI0IDEyTDI3IDE4TDMzIDE5TDI4LjUgMjMuNUwyOSAzMEwyNCAyN0wxOSAzMEwxOS41IDIzLjVMMTUgMTlMMjEgMThMMjQgMTJaIiBmaWxsPSJ1cmwoI2dvbGRBY2NlbnQpIiBzdHJva2U9IiNGRjk4MkIiIHN0cm9rZS13aWR0aD0iMC41Ii8+CiAgPCEtLSDpnaLpg6jnurnnspwgLS0+CiAgPHBhdGggZD0iTTE2IDEzTDE0IDE1IiBzdHJva2U9IiM2MEE1RkEiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIG9wYWNpdHk9IjAuNiIvPgogIDxwYXRoIGQ9Ik0zMiAxM0wzNCAxNSIgc3Ryb2tlPSIjNjBBNUZBIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBvcGFjaXR5PSIwLjYiLz4KICA8IS0tIOW6lemDqOi+ueW8uue6uiAtLT4KICA8cGF0aCBkPSJNMTIgMjBMMTAgMjMiIHN0cm9rZT0iIzFENEVENyIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8cGF0aCBkPSJNMzYgMjBMMzggMjMiIHN0cm9rZT0iIzFENEVENyIgc3Ryb2tlLXdpZHRoPSIxIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+');
}
attr:nth-child(4)::before {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iZGljZUdvbGQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPgogICAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojRkZEQzZBO3N0b3Atb3BhY2l0eToxIiAvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOiNGNTlFMEI7c3RvcC1vcGFjaXR5OjEiIC8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogICAgPHJhZGlhbEdyYWRpZW50IGlkPSJsdWNreUdsb3ciPgogICAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojRkZGRkZGO3N0b3Atb3BhY2l0eTowLjgiIC8+CiAgICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I0ZGQjAzQjtzdG9wLW9wYWNpdHk6MCIgLz4KICAgIDwvcmFkaWFsR3JhZGllbnQ+CiAgPC9kZWZzPgogIDwhLS0g6IOM5pmv5YWJ5YWJIC0tPgogIDxjaXJjbGUgY3g9IjI0IiBjeT0iMjQiIHI9IjE4IiBmaWxsPSJ1cmwoI2x1Y2t5R2xvdykiIG9wYWNpdHk9IjAuMyIvPgogIDwhLS0g6aqw5a2Q5Li76aaG5L2TIC0tPgogIDxwYXRoIGQ9Ik0xNSAxNUwyNSAxMEwzNSAxNUwzNSAyOEwyNSAzM0wxNSAyOFoiIGZpbGw9InVybCgjZGljZUdvbGQpIiBzdHJva2U9IiNEOTczMzEiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CiAgPCEtLSDpqqPlrZDkuIrpnaLkuKTkuKrpnaIgLS0+CiAgPHBhdGggZD0iTTE1IDE1TDI1IDEwTDM1IDE1TDI1IDIwWiIgZmlsbD0iI0ZGRURBMCIgb3BhY2l0eT0iMC42Ii8+CiAgPCEtLSDpqqPlrZDlj7PkvqcgLS0+CiAgPHBhdGggZD0iTTM1IDE1TDM1IDI4TDI1IDMzTDI1IDIwWiIgZmlsbD0iI0VBQjMwOCIgb3BhY2l0eT0iMC43Ii8+CiAgPCEtLSDpqqPlrZDlt6bkvqcgLS0+CiAgPHBhdGggZD0iTTE1IDE1TDE1IDI4TDI1IDMzTDI1IDIwWiIgZmlsbD0iI0Y1OUUwQiIgb3BhY2l0eT0iMC43Ii8+CiAgPCEtLSDpqqPlrZDngrnmlbAgLS0+CiAgPGNpcmNsZSBjeD0iMjUiIGN5PSIxNSIgcj0iMS41IiBmaWxsPSIjOEIzQzE0Ii8+CiAgPGNpcmNsZSBjeD0iMjkiIGN5PSIxOSIgcj0iMS41IiBmaWxsPSIjOEIzQzE0Ii8+CiAgPGNpcmNsZSBjeD0iMzEiIGN5PSIyMyIgcj0iMS41IiBmaWxsPSIjOEIzQzE0Ii8+CiAgPGNpcmNsZSBjeD0iMjEiIGN5PSIxOSIgcj0iMS41IiBmaWxsPSIjOEIzQzE0Ii8+CiAgPGNpcmNsZSBjeD0iMTkiIGN5PSIyMyIgcj0iMS41IiBmaWxsPSIjOEIzQzE0Ii8+CiAgPGNpcmNsZSBjeD0iMjUiIGN5PSIyOCIgcj0iMS41IiBmaWxsPSIjOEIzQzE0Ii8+CiAgPCEtLSDlkajlm7TplInpipzlhYnlhYnmmJ8gLS0+CiAgPHBhdGggZD0iTTEwIDEwTDExLjUgMTVMMTYgMTRMMTIuNSAxNy41TDE0IDIyTDEwIDE5TDYgMjJMNy41IDE3LjVMNCAxNEw4LjUgMTVMMTAgMTBaIiBmaWxsPSIjRkZEQzZBIiBzdHJva2U9IiNGRjk4MkIiIHN0cm9rZS13aWR0aD0iMC44IiBvcGFjaXR5PSIwLjkiLz4KICA8cGF0aCBkPSJNMzggMjdMMzkgMzAuNUw0MiAzMEw0MC4yIDMyTDQxIDM1LjVMMzggMzRMMzUgMzUuNUwzNS44IDMyTDM0IDMwTDM3IDMwLjVMMzggMjdaIiBmaWxsPSIjRkZEQzZBIiBzdHJva2U9IiNGRjk4MkIiIHN0cm9rZS13aWR0aD0iMC44IiBvcGFjaXR5PSIwLjkiLz4KICA8IS0tIOWwj+OFieaZtuOFiSAtLT4KICA8Y2lyY2xlIGN4PSI0MCIgY3k9IjEyIiByPSIxLjUiIGZpbGw9IiNGRkRDNkEiIG9wYWNpdHk9IjAuNyIvPgogIDxjaXJjbGUgY3g9IjEyIiBjeT0iMzYiIHI9IjEiIGZpbGw9IiNGRkRDNkEiIG9wYWNpdHk9IjAuNyIvPgogIDxjaXJjbGUgY3g9IjM2IiBjeT0iOCIgcj0iMSIgZmlsbD0iI0ZGREM2QSIgb3BhY2l0eT0iMC43Ii8+CiAgPGNpcmNsZSBjeD0iOCIgY3k9IjMxIiByPSIxIiBmaWxsPSIjRkZEQzZBIiBvcGFjaXR5PSIwLjciLz4KPC9zdmc+');
}
attr:nth-child(5)::before {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDgiIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgMCA0OCA0OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcz4KICAgIDxyYWRpYWxHcmFkaWVudCBpZD0iZ29sZENvaW4iPgogICAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjojRkZGRkZGO3N0b3Atb3BhY2l0eToxIiAvPgogICAgICA8c3RvcCBvZmZzZXQ9IjMwJSIgc3R5bGU9InN0b3AtY29sb3I6I0ZGRkZGRjtzdG9wLW9wYWNpdHk6MC44IiAvPgogICAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3R5bGU9InN0b3AtY29sb3I6I0ZGREM2QTtzdG9wLW9wYWNpdHk6MSIgLz4KICAgICAgPHN0b3Agb2Zmc2V0PSI4MCUiIHN0eWxlPSJzdG9wLWNvbG9yOiNGNUFFMEI7c3RvcC1vcGFjaXR5OjEiIC8+CiAgICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3R5bGU9InN0b3AtY29sb3I6I0Q5NzMzMTtzdG9wLW9wYWNpdHk6MSIgLz4KICAgIDwvcmFkaWFsR3JhZGllbnQ+CiAgPC9kZWZzPgogIDwhLS0g6Zi05Yeq5YWJIC0tPgogIDxjaXJjbGUgY3g9IjI2IiBjeT0iMjYiIHI9IjQiIGZpbGw9IiNEOTczMzEiIG9wYWNpdHk9IjAuMiIvPgogIDwhLS0g5Li75YWB5biBIC0tPgogIDxjaXJjbGUgY3g9IjI0IiBjeT0iMjQiIHI9IjE2IiBmaWxsPSJ1cmwoI2dvbGRDb2luKSIgc3Ryb2tlPSIjRDk3MzMxIiBzdHJva2Utd2lkdGg9IjIiLz4KICA8IS0tIOWkluWchua1ruadsCAtLT4KICA8Y2lyY2xlIGN4PSIyNCIgY3k9IjI0IiByPSIxMyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRDk3MzMxIiBzdHJva2Utd2lkdGg9IjEuNSIvPgogIDxjaXJjbGUgY3g9IjI0IiBjeT0iMjQiIHI9IjEwLjUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI0Q5NzMzMSIgc3Ryb2tlLXdpZHRoPSIwLjgiLz4KICA8IS0tIOWGhemDqOaomeiBsyAtLT4KICA8Y2lyY2xlIGN4PSIxNyIgY3k9IjE3IiByPSIzIiBmaWxsPSIjRkZGRkZGIiBvcGFjaXR5PSIwLjQiLz4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjE2IiByPSI0IiBmaWxsPSIjRkZGRkZGIiBvcGFjaXR5PSIwLjMiLz4KICA8IS0tIOiKseW9ouWbvuahiCAoR+Wtlykg5L2/55SocGF0aOe7mOWItiktLT4KICA8cGF0aCBkPSJNIDI1IDE0IEwgMjMgMTQgTCAyMyAxOCBMIDIwIDE4IEwgMjAgMjAgTCAyMyAyMCBMIDIzIDI2IEwgMjAgMjYgTCAyMCAyOCBMIDIzIDI4IEwgMjMgMzIgTCAyNSAzMiBMIDI1IDI4IEwgMjggMjggTCAyOCAyNiBMIDI2IDI2IEwgMjYgMjYgTCAyOCAyNiBMIDI4LjUgMjYgQyAyOS41IDI2IDMwIDI1LjUgMzAgMjQuNSBDIDMwIDIzLjUgMjkuNSAyMyAyOC41IDIzIEwgMjUgMjMgTCAyNSAyMCBMIDI4LjUgMjAgQyAyOS41IDIwIDMwIDE5LjUgMzAgMTguNSBDIDMwIDE3LjUgMjkuNSAxNyAyOC41IDE3IEwgMjUgMTcgTCAyNSAxNCBaIiBmaWxsPSIjRDk3MzMxIi8+CiAgPCEtLSDoo4Xpo7XngrnngrkgLS0+CiAgPGNpcmNsZSBjeD0iMTIiIGN5PSIyNCIgcj0iMSIgZmlsbD0iI0Q5NzMzMSIvPgogIDxjaXJjbGUgY3g9IjM2IiBjeT0iMjQiIHI9IjEiIGZpbGw9IiNEOTczMzEiLz4KICA8Y2lyY2xlIGN4PSIyNCIgY3k9IjEyIiByPSIxIiBmaWxsPSIjRDk3MzMxIi8+CiAgPGNpcmNsZSBjeD0iMjQiIGN5PSIzNiIgcj0iMSIgZmlsbD0iI0Q5NzMzMSIvPgogIDxjaXJjbGUgY3g9IjE1LjUiIGN5PSIxNS41IiByPSIwLjgiIGZpbGw9IiNEOTczMzEiLz4KICA8Y2lyY2xlIGN4PSIzMi41IiBjeT0iMTUuNSIgcj0iMC44IiBmaWxsPSIjRDk3MzMxIi8+CiAgPGNpcmNsZSBjeD0iMTUuNSIgY3k9IjMyLjUiIHI9IjAuOCIgZmlsbD0iI0Q5NzMzMSIvPgogIDxjaXJjbGUgY3g9IjMyLjUiIGN5PSIzMi41IiByPSIwLjgiIGZpbGw9IiNEOTczMzEiLz4KICA8IS0tIOmXqueZtuaYn+eCuSAtLT4KICA8cGF0aCBkPSJNIDM4IDE4IEwgMzguNSAyMCBMIDQwLjUgMjAgTCAzOSAyMS41IEwgMzkuNSAyMy41IEwgMzggMjIgTCAzNi41IDIzLjUgTCAzNyAyMS41IEwgMzUuNSAyMCBMIDM3LjUgMjAgTCAzOCAxOCBaIiBmaWxsPSIjRkZEQzZBIiBvcGFjaXR5PSIwLjgiLz4KICA8cGF0aCBkPSJNIDEwIDMwIEwgMTAuNSAzMS41IEwgMTIgMzEuNSBMIDExIDMyLjUgTCAxMS41IDM0IEwgMTAgMzMgTCA4LjUgMzQgTCA5IDMyLjUgTCA4IDMxLjUgTCA5LjUgMzEuNSBMIDEwIDMwIFoiIGZpbGw9IiNGRkRDNkEiIG9wYWNpdHk9IjAuOCIvPgogIDxjaXJjbGUgY3g9IjQwIiBjeT0iMzAiIHI9IjEiIGZpbGw9IiNGRkRDNkEiIG9wYWNpdHk9IjAuNiIvPgogIDxjaXJjbGUgY3g9IjgiIGN5PSIxOCIgcj0iMS4yIiBmaWxsPSIjRkZEQzZBIiBvcGFjaXR5PSIwLjYiLz4KPC9zdmc+');
}

/* ==============================
   【修改5】社交状态 + 冒险者等级圆环
   ============================== */
social {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.8rem;
    background: #fffbeb;
    padding: 0.8rem;
    border-radius: 8px;
    border: 1px solid #fef3c7;
    text-align: center;
}
social div[level] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
social div[level]::after {
    content: attr(level);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    font-weight: 800;
    font-size: 0.8rem;
    line-height: 1;
    flex-shrink: 0;
    border: 2px solid;
    background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.5), transparent 70%);
    text-shadow: 0 1px 2px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}
/* 各等级颜色 */
social div[level="F"]::after {
    color: #78716c;
    border-color: #a8a29e;
    background-color: rgba(168, 162, 158, 0.15);
    box-shadow: 0 0 0 1px rgba(168, 162, 158, 0.2);
}
social div[level="E"]::after {
    color: #92400e;
    border-color: #b45309;
    background-color: rgba(180, 83, 9, 0.1);
    box-shadow: 0 0 0 1px rgba(180, 83, 9, 0.2);
}
social div[level="D"]::after {
    color: #15803d;
    border-color: #22c55e;
    background-color: rgba(34, 197, 94, 0.1);
    box-shadow: 0 0 4px rgba(34, 197, 94, 0.25);
}
social div[level="C"]::after {
    color: #1d4ed8;
    border-color: #3b82f6;
    background-color: rgba(59, 130, 246, 0.1);
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.3);
}
social div[level="B"]::after {
    color: #7c3aed;
    border-color: #8b5cf6;
    background-color: rgba(139, 92, 246, 0.1);
    box-shadow: 0 0 6px rgba(139, 92, 246, 0.35);
}
social div[level="A"]::after {
    color: #b45309;
    border-color: #f59e0b;
    background-color: rgba(245, 158, 11, 0.12);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}
social div[level="S"]::after {
    color: #dc2626;
    border-color: #ef4444;
    background-color: rgba(239, 68, 68, 0.1);
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.45), inset 0 0 4px rgba(239, 68, 68, 0.15);
    animation: rank-s-glow 2s ease-in-out infinite;
}
@keyframes rank-s-glow {
    0%, 100% { box-shadow: 0 0 8px rgba(239, 68, 68, 0.4), inset 0 0 3px rgba(239, 68, 68, 0.1); }
    50%      { box-shadow: 0 0 14px rgba(239, 68, 68, 0.65), inset 0 0 5px rgba(239, 68, 68, 0.2); }
}

/* ==============================
   分隔线 (hr)
   ============================== */
hr {
    height: 2px;
    border: none;
    background: linear-gradient(to right, transparent, #ec4899, transparent);
    margin: 1.5rem auto;
    width: 95%;
    opacity: 1;
}

/* ==============================
   色情属性 (lewd)
   ============================== */
lewd { display: block; }
core {
    display: flex;
    justify-content: space-around;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}
core div[lv]::after {
    content: attr(lv);
    font-weight: bold;
    color: #db2777;
    margin-left: 0.3em;
}
core div[value]::after {
    content: attr(value);
    font-weight: bold;
    color: #db2777;
    margin-left: 0.3em;
}
.body_status {
    background: rgba(255, 241, 245, 0.7);
    padding: 0.8rem;
    border-radius: 8px;
    border: 1px solid #fbcfe8;
    font-size: 0.9rem;
}
.body_status p { margin: 0.3rem 0; }
.body_status span { font-weight: 600; color: #be185d; }

/* ==============================
   标题 (subtitle)
   ============================== */
subtitle {
    font-size: 1.05rem;
    font-weight: 600;
    color: #92400e;
    margin: 1.5rem 0 0.8rem 0;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #fcd34d;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
details > section:first-of-type subtitle:first-child {
    margin-top: 0.8rem;
}
details > subtitle::before {
    content: '';
    width: 1.3rem; height: 1.3rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    display: inline-block;
}
/* 装备图标 — 交叉双剑 */
details > subtitle::before {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNNiAxOEw0IDIwTTYgMThMOSAxNk0xOCA2TDIwIDRNMTggNkwxNiA5IiBzdHJva2U9IiM5MjQwMGUiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8cGF0aCBkPSJNNSAxOUwxNyA3TTkuNSAxNi41TDE2LjUgOS41IiBzdHJva2U9IiM5MjQwMGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPGNpcmNsZSBjeD0iMTYiIGN5PSI4IiByPSIxLjUiIGZpbGw9IiNmY2QzNGQiLz4KICA8cGF0aCBkPSJNMTggMThMMjAgMjBNMTggMThMMTYgMTVNNiA2TDQgNE02IDZMOSA4IiBzdHJva2U9IiM5MjQwMGUiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KICA8cGF0aCBkPSJNMTkgNUw3IDE3TTE2LjUgOS41TDkuNSAxNi41IiBzdHJva2U9IiM5MjQwMGUiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPGNpcmNsZSBjeD0iOCIgY3k9IjE2IiByPSIxLjUiIGZpbGw9IiNmY2QzNGQiLz4KICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIyIiBmaWxsPSIjZDk3NzA2IiBvcGFjaXR5PSIwLjMiLz4KPC9zdmc+');
}
/* 技能图标 — 魔法阵 */
.clothing + subtitle::before {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI5IiBzdHJva2U9IiM5MjQwMGUiIHN0cm9rZS13aWR0aD0iMS41Ii8+CiAgPGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iNiIgc3Ryb2tlPSIjZDk3NzA2IiBzdHJva2Utd2lkdGg9IjEiLz4KICA8cGF0aCBkPSJNMTIgM0wxMy41IDkuNUwxOSA4TDE0IDEyTDIwIDE1TDEzLjUgMTQuNUwxMiAyMUwxMC41IDE0LjVMNCAxNUwxMCAxMkw1IDhMMTAuNSA5LjVMMTIgM1oiIGZpbGw9IiNmY2QzNGQiIG9wYWNpdHk9IjAuNiIvPgogIDxwYXRoIGQ9Ik0xMiAzTDEzLjUgOS41TDE5IDhMMTQgMTJMMjAgMTVMMTMuNSAxNC41TDEyIDIxTDEwLjUgMTQuNUw0IDE1TDEwIDEyTDUgOEwxMC41IDkuNUwxMiAzWiIgc3Ryb2tlPSIjOTI0MDBlIiBzdHJva2Utd2lkdGg9IjEiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KICA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIyIiBmaWxsPSIjOTI0MDBlIi8+Cjwvc3ZnPg==');
}
/* 物品栏图标 — 宝箱 */
.package + subtitle::before {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB4PSI0IiB5PSI4IiB3aWR0aD0iMTYiIGhlaWdodD0iMTEiIHJ4PSIxIiBmaWxsPSIjZmNkMzRkIiBvcGFjaXR5PSIwLjMiLz4KICA8cmVjdCB4PSI0IiB5PSI4IiB3aWR0aD0iMTYiIGhlaWdodD0iMTEiIHJ4PSIxIiBzdHJva2U9IiM5MjQwMGUiIHN0cm9rZS13aWR0aD0iMS41Ii8+CiAgPHJlY3QgeD0iNCIgeT0iNSIgd2lkdGg9IjE2IiBoZWlnaHQ9IjQiIHJ4PSIwLjUiIGZpbGw9IiNkOTc3MDYiLz4KICA8cmVjdCB4PSI0IiB5PSI1IiB3aWR0aD0iMTYiIGhlaWdodD0iNCIgcng9IjAuNSIgc3Ryb2tlPSIjOTI0MDBlIiBzdHJva2Utd2lkdGg9IjEuNSIvPgogIDxjaXJjbGUgY3g9IjEyIiBjeT0iMTMiIHI9IjEuNSIgZmlsbD0iIzkyNDAwZSIvPgogIDxyZWN0IHg9IjExIiB5PSIxMyIgd2lkdGg9IjIiIGhlaWdodD0iMyIgZmlsbD0iIzkyNDAwZSIvPgogIDxsaW5lIHgxPSI2IiB5MT0iMTEiIHgyPSI2IiB5Mj0iMTYiIHN0cm9rZT0iI2Q5NzcwNiIgc3Ryb2tlLXdpZHRoPSIxIi8+CiAgPGxpbmUgeDE9IjE4IiB5MT0iMTEiIHgyPSIxOCIgeTI9IjE2IiBzdHJva2U9IiNkOTc3MDYiIHN0cm9rZS13aWR0aD0iMSIvPgo8L3N2Zz4=');
}
/* 状态与属性内的 subtitle 不带图标 */
.special_status subtitle::before { display: none; }

/* ==============================
   淫纹与状态效果
   ============================== */
.special_status { display: block; }
slot {
    display: block;
    padding: 0;
    position: relative;
}
tattoo {
    display: block;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    transition: background 0.3s;
    cursor: pointer;
}
tattoo:hover { background-color: rgba(236, 72, 153, 0.1); }

/* ★ 新增：爱心等级徽标 */
tattoo::before {
    content: attr(lv);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.4em;
    padding-bottom: 0.15em;          /* 视觉居中——把数字往爱心上半部推 */
    margin-right: 0.35em;
    font-size: 0.8em;
    font-weight: bold;
    color: #fff;
    vertical-align: middle;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ec4899'><path d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/></svg>")
        center / contain no-repeat;
}

tattoo::after {
    content: attr(desc);
    display: block;
    position: absolute;
    bottom: 100%; left: 50%;
    transform: translateX(-50%) translateY(10px);
    opacity: 0; visibility: hidden;
    width: 280px; z-index: 10;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 8px;
    background-color: rgba(29, 10, 25, 0.9);
    backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
    border: 1px solid #ec4899; border-radius: 10px;
    color: #fbcfe8; padding: 1rem;
    text-align: center; font-size: 0.9rem; line-height: 1.5;
    animation: pulse-glow 3s infinite ease-in-out;
}
slot:hover tattoo::after,
tattoo:hover::after {
    opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(0);
}
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 15px rgba(236, 72, 153, 0.6); }
    50%      { box-shadow: 0 0 25px rgba(236, 72, 153, 0.9); }
}
effects { display: flex; flex-wrap: wrap; gap: 0.6rem; }
buff {
    padding: 0.3rem 0.8rem; border-radius: 15px; font-size: 0.85rem;
    color: white; text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    background: linear-gradient(135deg, #34d399, #059669); border: 1px solid #6ee7b7;
}
debuff {
    padding: 0.3rem 0.8rem; border-radius: 15px; font-size: 0.85rem;
    color: white; text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    background: linear-gradient(135deg, #a855f7, #7e22ce); border: 1px solid #c084fc;
}

/* ==============================
   容器与插槽通用
   ============================== */
.package { display: flex; flex-direction: column; gap: 0.6rem; }
equip, skills, items {
    display: block;
    background: rgba(255,253,250,0.6);
    padding: 0.5rem 0.8rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
    border: 1.5px solid transparent;
}
equip:hover, skills:hover, items:hover {
    background: #fffbeb;
    transform: translateY(-2px);
}
/* ==============================
   装备类型图标 + 文字前缀
   ============================== */
equip > span[type] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.9rem;
}
equip > span[type]::before {
    content: attr(type) "：";
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding-left: 1.35rem;
    background-size: 1.1rem 1.1rem;
    background-repeat: no-repeat;
    background-position: left center;
}

/* 武器图标 — viewBox 裁切放大核心区域 */
equip > span[type="武器"]::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='260 280 520 440' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M760.919 648.715l-21.926 7.734v21.926l63.197 21.282zM525.549 613.896l-1.936-.644c-71.58 38.047-145.743 64.49-185.723 65.777-16.122.644-36.755 2.58-55.458 5.804l223.129-170.254-7.739-5.16-235.384 179.281c-5.16 1.288-9.676 2.58-13.543 3.867-16.123 5.804-23.217 14.188-27.084 19.99-1.288 2.58 1.287 5.16 3.222 3.867 34.181-14.829 66.42-14.185 101.888-15.477 11.607 0 43.207-5.161 54.814-7.096 54.814-9.028 107.697-30.951 155.411-57.393l.644-6.448c2.585-10.308-11.602-15.468-12.25-16.112zM533.923 492.65l191.524-146.383c-7.74 35.468 4.515 95.442-45.787 154.131 5.803 1.936 10.962 4.515 15.478 9.027 1.936 1.936 3.867 4.515 5.161 7.094 59.33-64.487 36.754-149.61 39.982-174.76 1.287-9.675 3.867-16.123 5.804-19.99 1.287-1.935-.644-3.866-2.58-3.222-5.16 2.58-9.027 6.446-12.25 11.606l-205.072 157.345z' fill='%2392400e'/%3E%3Cpath d='M567.462 582.291l-26.442 9.676c-5.16 2.58-12.25 8.383-12.25 14.186 0 0 21.282 7.739 19.346 26.442h.644c1.287 0 2.58.643 3.867.643 4.515 0 9.025-1.936 11.606-5.16 4.515-5.159 11.606-12.25 20.638-18.058 0 0 14.829-3.223 35.468-14.83l-38.047-26.442c-9.671 7.74-14.83 13.542-14.83 13.542zM667.411 507.493c-4.515 0-9.027 2.58-10.962 7.094l-1.932 3.867c-3.867 7.097-9.675 12.251-17.41 14.832-6.446 1.936-16.122 5.802-26.441 12.25l39.984 27.084c7.096-6.446 10.963-12.249 12.9-16.764 2.579-5.803 7.094-10.319 12.899-13.542 3.223-1.936 6.446-3.867 10.319-5.804 7.739-3.867 9.027-14.83 2.579-20.638-5.165-4.511-11.617-7.734-21.936-8.377zM354.002 369.484l-7.735-25.792-49.01-36.76 12.895 32.887zM287.591 363.043l-34.824-1.936 52.883 37.406 29.66-2.58zM286.938 334.666c-1.287-.644-2.58-1.287-3.867-1.287-1.936 0-3.867.643-5.803 2.58-2.58 3.222-1.288 7.739 1.287 9.675l450.764 313.41v-9.028l11.606-3.871z' fill='%2392400e'/%3E%3C/svg%3E");
}

/* 防具图标 */
equip > span[type="防具"]::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M512 805.12c21.581 0 39.65 18.069 39.65 39.65 0 21.585-18.069 39.147-39.65 39.147s-39.152-17.567-39.152-39.148c0-21.58 17.572-39.649 39.153-39.649zM229.663 162.401c21.837 0 39.65 17.818 39.65 39.153 0 21.832-17.813 39.27-39.65 39.27-21.58 0-38.901-17.438-38.901-39.27 0-21.335 17.32-39.153 38.902-39.153zM792.822 162.401c21.33 0 38.901 17.818 38.901 39.153 0 21.832-17.571 39.27-38.901 39.27-21.827 0-39.65-17.438-39.65-39.27 0-21.335 17.823-39.153 39.65-39.153zM512 742.625c60.733-48.932 109.921-111.672 147.072-180.69 40.151-74.537 65.751-157.86 75.786-241.428-7.526-7.276-14.31-13.926-21.58-22.339l-.257 0c-6.533-7.398-13.307-15.048-19.569-22.584H331.06c-6.021 8.161-12.8 15.683-20.076 22.83-7.28 8.412-14.561 15.063-21.596 22.339 10.301 83.568 36.142 166.39 76.288 241.183C402.325 630.953 452.014 693.197 512 742.625zM700.477 584.27c-43.171 79.559-100.884 151.086-173.67 206.545l-.512.507c-8.023 6.272-20.076 6.272-28.104 0-73.026-55.721-131.502-127.242-174.407-207.55-44.678-82.82-72.28-175.677-82.566-269.409-1.254-7.782 1.756-16.194 8.034-21.714 9.774-8.402 18.56-17.065 27.346-25.595l0 0c8.284-9.544 15.815-18.693 23.342-28.99 4.521-5.519 11.54-9.789 19.082-9.789h386.232c6.779 0 14.05 3.133 18.315 9.283 7.782 10.286 16.312 19.947 24.09 29.491l.245 0c8.034 8.53 17.582 17.188 27.116 25.595l-.261 0c5.775 4.767 9.047 12.303 8.289 20.582-9.788 95.538-37.646 188.39-82.569 271.69zM512 939.136c258.488-133.012 406.062-418.11 406.062-703.58V210.842c-60.232-18.95-106.404-69.141-119.711-130.376H226.401c-13.793 60.984-59.97 111.427-119.961 130.376l-.246 24.714C106.194 521.027 254.264 806.124 512 939.136zM529.823 1017.938c-10.547 5.514-23.347 6.026-34.642.502C200.561 876.897 27.648 556.672 27.648 235.556c0-7.276.246-16.435.993-29.23 0-10.296.512-19.451 1.255-28.365 0-18.944 15.052-35.384 34.38-37.391 49.44-6.021 87.588-48.435 87.834-98.509V41.185c0-21.453 18.069-39.526 39.153-39.526h640.45l1.004 0c21.842 0 39.655 18.069 39.655 39.526 0 49.818 37.396 93.107 87.828 99.385 18.58 2.007 33.638 16.814 34.391 36.265.512 8.909.993 18.324.993 29.491.753 12.8.753 21.96.753 29.23C996.352 556.165 823.946 876.396 529.823 1017.938z' fill='%2392400e'/%3E%3C/svg%3E");
}

/* 饰品图标 — viewBox 裁切放大核心区域 */
equip > span[type="饰品"]::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='140 20 750 880' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M819.2 580.267a307.2 307.2 0 1 1-614.4 0 307.063 307.063 0 0 1 185.003-281.6l12.015 9.353 52.838 41.028A238.797 238.797 0 0 0 273.067 580.267c0 131.754 107.178 238.933 238.933 238.933s238.933-107.179 238.933-238.933a238.797 238.797 0 0 0-181.589-231.22l64.853-50.38A307.063 307.063 0 0 1 819.2 580.267zM512 307.2l170.667-132.779L614.4 68.267H409.6l-68.267 106.154 102.4 79.667L512 307.2z' fill='%2392400e'/%3E%3C/svg%3E");
}

/* ====== 【修改2】品质悬停光环 ====== */
equip[quality="common"]:hover    { border-color: rgba(161,161,170,0.4); box-shadow: 0 0 8px rgba(161,161,170,0.2), inset 0 0 8px rgba(161,161,170,0.05); }
equip[quality="uncommon"]:hover  { border-color: rgba(34,197,94,0.45);  box-shadow: 0 0 10px rgba(34,197,94,0.25), inset 0 0 8px rgba(34,197,94,0.06); }
equip[quality="rare"]:hover      { border-color: rgba(59,130,246,0.5);  box-shadow: 0 0 12px rgba(59,130,246,0.3), inset 0 0 8px rgba(59,130,246,0.06); }
equip[quality="superior"]:hover  { border-color: rgba(99,102,241,0.5);  box-shadow: 0 0 12px rgba(99,102,241,0.3), inset 0 0 8px rgba(99,102,241,0.06); }
equip[quality="epic"]:hover      { border-color: rgba(168,85,247,0.5);  box-shadow: 0 0 14px rgba(168,85,247,0.35), inset 0 0 10px rgba(168,85,247,0.07); }
equip[quality="legendary"]:hover { border-color: rgba(245,158,11,0.55); box-shadow: 0 0 16px rgba(245,158,11,0.4), inset 0 0 10px rgba(245,158,11,0.08); }
equip[quality="artifact"]:hover  { border-color: rgba(239,68,68,0.55);  box-shadow: 0 0 16px rgba(239,68,68,0.4), inset 0 0 10px rgba(239,68,68,0.08); }
equip[quality="immortal"]:hover  { border-color: rgba(6,182,212,0.6);   box-shadow: 0 0 18px rgba(6,182,212,0.45), inset 0 0 12px rgba(6,182,212,0.08); }

skills[quality="common"]:hover    { border-color: rgba(161,161,170,0.4); box-shadow: 0 0 8px rgba(161,161,170,0.2); }
skills[quality="uncommon"]:hover  { border-color: rgba(34,197,94,0.45);  box-shadow: 0 0 10px rgba(34,197,94,0.25); }
skills[quality="rare"]:hover      { border-color: rgba(59,130,246,0.5);  box-shadow: 0 0 12px rgba(59,130,246,0.3); }
skills[quality="superior"]:hover  { border-color: rgba(99,102,241,0.5);  box-shadow: 0 0 12px rgba(99,102,241,0.3); }
skills[quality="epic"]:hover      { border-color: rgba(168,85,247,0.5);  box-shadow: 0 0 14px rgba(168,85,247,0.35); }
skills[quality="legendary"]:hover { border-color: rgba(245,158,11,0.55); box-shadow: 0 0 16px rgba(245,158,11,0.4); }
skills[quality="artifact"]:hover  { border-color: rgba(239,68,68,0.55);  box-shadow: 0 0 16px rgba(239,68,68,0.4); }
skills[quality="immortal"]:hover  { border-color: rgba(6,182,212,0.6);   box-shadow: 0 0 18px rgba(6,182,212,0.45); }

items[quality="common"]:hover    { border-color: rgba(161,161,170,0.4); box-shadow: 0 0 8px rgba(161,161,170,0.2); }
items[quality="uncommon"]:hover  { border-color: rgba(34,197,94,0.45);  box-shadow: 0 0 10px rgba(34,197,94,0.25); }
items[quality="rare"]:hover      { border-color: rgba(59,130,246,0.5);  box-shadow: 0 0 12px rgba(59,130,246,0.3); }
items[quality="superior"]:hover  { border-color: rgba(99,102,241,0.5);  box-shadow: 0 0 12px rgba(99,102,241,0.3); }
items[quality="epic"]:hover      { border-color: rgba(168,85,247,0.5);  box-shadow: 0 0 14px rgba(168,85,247,0.35); }
items[quality="legendary"]:hover { border-color: rgba(245,158,11,0.55); box-shadow: 0 0 16px rgba(245,158,11,0.4); }
items[quality="artifact"]:hover  { border-color: rgba(239,68,68,0.55);  box-shadow: 0 0 16px rgba(239,68,68,0.4); }
items[quality="immortal"]:hover  { border-color: rgba(6,182,212,0.6);   box-shadow: 0 0 18px rgba(6,182,212,0.45); }

/* ==============================
   服装详情
   ============================== */
.clothing {
    font-size: 0.9rem;
    background: #fffefb;
    padding: 0.8rem;
    margin-top: 1rem;
    border-radius: 8px;
    border: 1px solid #fef3c7;
}
.clothing p { margin: 0.3rem 0; }
.clothing span { font-weight: 600; color: #a16207; }

/* ==============================
   悬浮卡片 — <card>
   ============================== */
card {
    display: block;
    position: absolute;
    bottom: 100%; left: 50%;
    transform: translateX(-50%) translateY(10px);
    opacity: 0; visibility: hidden;
    width: 280px; z-index: 10;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-bottom: 8px;
}
equip:hover card,
skills:hover card,
items:hover card {
    opacity: 1; visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* --- 装备卡片 --- */
equip card {
    background-color: #fdf6e7;
    border: 2px solid #a16207;
    border-radius: 8px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
    font-family: 'Georgia', serif;
    color: #573a1e;
    border-top-width: 4px;
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
}
equip card p { margin: 0.3rem 0; }
equip card .enchance { color: #6d28d9; }
equip card .quality { font-weight: bold; }
equip card::after {
    content: attr(footer);
    display: block;
    padding: 0.5rem 0 0;
    margin-top: 0.5rem;
    font-style: italic;
    font-size: 0.8rem;
    border-top: 1px dashed #d4bda2;
    text-align: right;
    color: #785a3b;
}

/* ============================== 
   技能卡片 · 完整样式
   ============================== */

/* --- 卡片主体 --- */
skills card {
    background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.2), transparent 70%), #1e1b4b;
    border-radius: 12px;
    color: #e0e7ff;
    padding: 1rem;
    border: 1px solid #4f46e5;
    text-align: center;
    transition: background 0.3s, box-shadow 0.3s, border-color 0.3s;
}
skills card p {
    font-size: 0.9rem;
    margin: 0 0 0.8rem;
}
skills card::after {
    content: attr(footer);
    display: inline-block;
    font-size: 0.85rem;
    background: rgba(0,0,0,0.3);
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    color: #e0e7ff;
}

/* --- 技能类型 → 卡片边框色 --- */
skills span[type="物理"] ~ card { border-color: #dc2626; }
skills span[type="法术"] ~ card { border-color: #6366f1; }
skills span[type="色情"] ~ card { border-color: #ec4899; }


/* ==============================
   技能标题行 · 图标 + 品质标签 + 名称
   ============================== */
skills > span[type] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.2;
    /* ★ 不设 color，继承页面默认文字色 */
}

/* 无 type 属性的 span 同理 */
skills > span:not([type]) {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 400;
    font-size: 0.9rem;
    line-height: 1.2;
}

/* ── 类型图标（::before） ── */
skills > span[type]::before,
skills > span:not([type])::before {
    content: '';
    display: inline-block;
    width: 1.15rem;
    height: 1.15rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    order: -2;
}

/* ── 品质标签（::after） ── */
skills > span[type]::after,
skills > span:not([type])::after {
    content: attr(quality);
    display: inline-flex;
    align-items: center;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    letter-spacing: 0.04em;
    line-height: 1.3;
    order: -1;
    flex-shrink: 0;
    /* 默认 — 未匹配品质时的兜底色 */
    color: #9ca3af;
    border: 1px solid #9ca3af;
    background: rgba(156,163,175,0.1);
}


/* ==============================
   品质标签色彩
   ============================== */
skills > span[quality="common"]::after,
skills > span[quality="普通"]::after {
    color: #a1a1aa;
    border-color: #a1a1aa;
    background: rgba(161,161,170,0.1);
}
skills > span[quality="uncommon"]::after,
skills > span[quality="优秀"]::after {
    color: #22c55e;
    border-color: #22c55e;
    background: rgba(34,197,94,0.12);
}
skills > span[quality="rare"]::after,
skills > span[quality="精良"]::after {
    color: #3b82f6;
    border-color: #3b82f6;
    background: rgba(59,130,246,0.12);
}
skills > span[quality="superior"]::after,
skills > span[quality="极品"]::after {
    color: #6366f1;
    border-color: #6366f1;
    background: rgba(99,102,241,0.12);
}
skills > span[quality="epic"]::after,
skills > span[quality="史诗"]::after {
    color: #a855f7;
    border-color: #a855f7;
    background: rgba(168,85,247,0.12);
}
skills > span[quality="legendary"]::after,
skills > span[quality="传说"]::after {
    color: #f59e0b;
    border-color: #f59e0b;
    background: rgba(245,158,11,0.12);
}
skills > span[quality="artifact"]::after,
skills > span[quality="神器"]::after {
    color: #ef4444;
    border-color: #ef4444;
    background: rgba(239,68,68,0.12);
}
skills > span[quality="immortal"]::after,
skills > span[quality="不朽"]::after {
    color: #06b6d4;
    border-color: #06b6d4;
    background: rgba(6,182,212,0.12);
}


/* ==============================
   品质 → 卡片辉光
   ============================== */
skills[quality="common"] card,
skills[quality="普通"] card {
    box-shadow: 0 0 6px rgba(161,161,170,0.15);
}
skills[quality="uncommon"] card,
skills[quality="优秀"] card {
    box-shadow: 0 0 8px rgba(34,197,94,0.2), inset 0 1px 0 rgba(34,197,94,0.08);
}
skills[quality="rare"] card,
skills[quality="精良"] card {
    box-shadow: 0 0 8px rgba(59,130,246,0.2), inset 0 1px 0 rgba(59,130,246,0.08);
}
skills[quality="superior"] card,
skills[quality="极品"] card {
    box-shadow: 0 0 10px rgba(99,102,241,0.25), inset 0 1px 0 rgba(99,102,241,0.08);
}
skills[quality="epic"] card,
skills[quality="史诗"] card {
    box-shadow: 0 0 10px rgba(168,85,247,0.25), inset 0 1px 0 rgba(168,85,247,0.08);
}
skills[quality="legendary"] card,
skills[quality="传说"] card {
    box-shadow: 0 0 12px rgba(245,158,11,0.3), inset 0 1px 0 rgba(245,158,11,0.1);
}
skills[quality="artifact"] card,
skills[quality="神器"] card {
    box-shadow: 0 0 14px rgba(239,68,68,0.3), inset 0 1px 0 rgba(239,68,68,0.1);
}
skills[quality="immortal"] card,
skills[quality="不朽"] card {
    box-shadow: 0 0 16px rgba(6,182,212,0.3), inset 0 1px 0 rgba(6,182,212,0.1);
}


/* ==============================
   类型图标 SVG
   ============================== */

/* 物理 — 利剑 */
skills > span[type="物理"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 1L6.5 8' stroke='%23dc2626' stroke-width='1.8' stroke-linecap='round'/%3E%3Cpath d='M11 1h3v3' stroke='%23dc2626' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Cpath d='M6.5 8L5 12L1 15' stroke='%23dc2626' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.5 9.5L2.5 8M6.5 11.5L8 9.5' stroke='%23dc2626' stroke-width='1.2' stroke-linecap='round'/%3E%3Cpath d='M10.5 3.5L9 2' stroke='%23fca5a5' stroke-width='0.8' stroke-linecap='round' opacity='0.6'/%3E%3C/svg%3E");
}

/* 法术 — 星芒 */
skills > span[type="法术"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 1v3M8 12v3M1 8h3M12 8h3' stroke='%236366f1' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M3.5 3.5l2 2M10.5 10.5l2 2M12.5 3.5l-2 2M5.5 10.5l-2 2' stroke='%236366f1' stroke-width='1' stroke-linecap='round' opacity='0.7'/%3E%3Ccircle cx='8' cy='8' r='2' fill='%236366f1' opacity='0.3'/%3E%3Ccircle cx='8' cy='8' r='1' fill='%236366f1'/%3E%3C/svg%3E");
}

/* 色情 — 爱心 */
skills > span[type="色情"]::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 14S1.5 9.5 1.5 5.8C1.5 3.3 3.3 1.5 5.5 1.5 6.8 1.5 7.6 2.2 8 2.8 8.4 2.2 9.2 1.5 10.5 1.5c2.2 0 4 1.8 4 4.3C14.5 9.5 8 14 8 14z' fill='%23ec4899' stroke='%23be185d' stroke-width='0.6'/%3E%3Cpath d='M5 5.5c0-1 .8-1.5 1.5-1.5' stroke='%23fff' stroke-width='0.8' stroke-linecap='round' opacity='0.5'/%3E%3C/svg%3E");
}

/* 默认/其他类型 — 菱形宝石 */
skills > span:not([type])::before,
skills > span[type]:not([type="物理"]):not([type="法术"]):not([type="色情"])::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 1L15 8L8 15L1 8Z' fill='%239ca3af' opacity='0.2' stroke='%239ca3af' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M8 4L12 8L8 12L4 8Z' fill='none' stroke='%239ca3af' stroke-width='0.8' opacity='0.5'/%3E%3Ccircle cx='8' cy='8' r='1.2' fill='%239ca3af' opacity='0.6'/%3E%3C/svg%3E");
}

/* --- 物品卡片 --- */
items card {
    background: #fffefb;
    border: 1px solid #d6d3d1;
    border-radius: 6px;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
    padding: 0.8rem;
    color: #3f3f46;
}
items card p { font-size: 0.9rem; margin: 0.6rem 0 0; }
items card::after {
    content: attr(footer);
    display: inline-block;
    font-size: 0.8rem;
    color: #a16207;
    background: #fef3c7;
    padding: 2px 6px;
    border-radius: 10px;
    margin-top: 0.5rem;
}

/* 【修改1】物品名称行的品质+估价 — 修正字号 */
items > span[quality] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.9rem;
}
items > span[quality]::before {
    content: "[" attr(quality) "]";
    font-size: 0.75rem;
    font-weight: 700;
    opacity: 0.85;
    vertical-align: middle;
}
items > span[price]::after {
    content: " · " attr(price) "G";
    font-size: 0.75rem;
    color: #a16207;
    font-weight: 400;
    opacity: 0.7;
}

/* ==============================
   品质色彩系统
   ============================== */
/* 品质文字颜色 */
[quality="common"] .quality,
[quality="普通"] .quality          { color: #a1a1aa; }
[quality="uncommon"] .quality,
[quality="优秀"] .quality          { color: #22c55e; }
[quality="rare"] .quality,
[quality="精良"] .quality          { color: #3b82f6; }
[quality="superior"] .quality,
[quality="极品"] .quality          { color: #6366f1; }
[quality="epic"] .quality,
[quality="史诗"] .quality          { color: #a855f7; }
[quality="legendary"] .quality,
[quality="传说"] .quality          { color: #f59e0b; }
[quality="artifact"] .quality,
[quality="神器"] .quality          { color: #ef4444; }
[quality="immortal"] .quality,
[quality="不朽"] .quality          { color: #06b6d4; }

/* 物品名称行品质标签颜色 */
items > span[quality="common"]::before,
items > span[quality="普通"]::before     { color: #a1a1aa; }
items > span[quality="uncommon"]::before,
items > span[quality="优秀"]::before     { color: #22c55e; }
items > span[quality="rare"]::before,
items > span[quality="精良"]::before     { color: #3b82f6; }
items > span[quality="superior"]::before,
items > span[quality="极品"]::before     { color: #6366f1; }
items > span[quality="epic"]::before,
items > span[quality="史诗"]::before     { color: #a855f7; }
items > span[quality="legendary"]::before,
items > span[quality="传说"]::before     { color: #f59e0b; }
items > span[quality="artifact"]::before,
items > span[quality="神器"]::before     { color: #ef4444; }
items > span[quality="immortal"]::before,
items > span[quality="不朽"]::before     { color: #06b6d4; }

/* 装备卡片顶边颜色 */
equip[quality="common"] card    { border-top-color: #a1a1aa; }
equip[quality="uncommon"] card  { border-top-color: #22c55e; }
equip[quality="rare"] card      { border-top-color: #3b82f6; }
equip[quality="superior"] card  { border-top-color: #6366f1; }
equip[quality="epic"] card      { border-top-color: #a855f7; }
equip[quality="legendary"] card { border-top-color: #f59e0b; }
equip[quality="artifact"] card  { border-top-color: #ef4444; }
equip[quality="immortal"] card  { border-top-color: #06b6d4; }
equip[quality="普通"] card    { border-top-color: #a1a1aa; }
equip[quality="优秀"] card    { border-top-color: #22c55e; }
equip[quality="精良"] card    { border-top-color: #3b82f6; }
equip[quality="极品"] card    { border-top-color: #6366f1; }
equip[quality="史诗"] card    { border-top-color: #a855f7; }
equip[quality="传说"] card    { border-top-color: #f59e0b; }
equip[quality="神器"] card    { border-top-color: #ef4444; }
equip[quality="不朽"] card    { border-top-color: #06b6d4; }

/* 技能卡片品质光晕 */
skills[quality="uncommon"] card  { box-shadow: 0 0 15px rgba(34, 197, 94, 0.5); }
skills[quality="rare"] card      { box-shadow: 0 0 20px rgba(59, 130, 246, 0.6); }
skills[quality="superior"] card  { box-shadow: 0 0 20px rgba(99, 102, 241, 0.6); }
skills[quality="epic"] card      { box-shadow: 0 0 20px rgba(168, 85, 247, 0.6); }
skills[quality="legendary"] card { box-shadow: 0 0 25px rgba(245, 158, 11, 0.8); }
skills[quality="artifact"] card  { box-shadow: 0 0 25px rgba(239, 68, 68, 0.8); }
skills[quality="immortal"] card  { box-shadow: 0 0 25px rgba(6, 182, 212, 0.8); }
skills[quality="优秀"] card    { box-shadow: 0 0 15px rgba(34, 197, 94, 0.5); }
skills[quality="精良"] card    { box-shadow: 0 0 20px rgba(59, 130, 246, 0.6); }
skills[quality="极品"] card    { box-shadow: 0 0 20px rgba(99, 102, 241, 0.6); }
skills[quality="史诗"] card    { box-shadow: 0 0 20px rgba(168, 85, 247, 0.6); }
skills[quality="传说"] card    { box-shadow: 0 0 25px rgba(245, 158, 11, 0.8); }
skills[quality="神器"] card    { box-shadow: 0 0 25px rgba(239, 68, 68, 0.8); }
skills[quality="不朽"] card    { box-shadow: 0 0 25px rgba(6, 182, 212, 0.8); }

/* 品质悬停光环中文映射 */
equip[quality="普通"]:hover    { border-color: rgba(161,161,170,0.4); box-shadow: 0 0 8px rgba(161,161,170,0.2), inset 0 0 8px rgba(161,161,170,0.05); }
equip[quality="优秀"]:hover    { border-color: rgba(34,197,94,0.45);  box-shadow: 0 0 10px rgba(34,197,94,0.25), inset 0 0 8px rgba(34,197,94,0.06); }
equip[quality="精良"]:hover    { border-color: rgba(59,130,246,0.5);  box-shadow: 0 0 12px rgba(59,130,246,0.3), inset 0 0 8px rgba(59,130,246,0.06); }
equip[quality="极品"]:hover    { border-color: rgba(99,102,241,0.5);  box-shadow: 0 0 12px rgba(99,102,241,0.3), inset 0 0 8px rgba(99,102,241,0.06); }
equip[quality="史诗"]:hover    { border-color: rgba(168,85,247,0.5);  box-shadow: 0 0 14px rgba(168,85,247,0.35), inset 0 0 10px rgba(168,85,247,0.07); }
equip[quality="传说"]:hover    { border-color: rgba(245,158,11,0.55); box-shadow: 0 0 16px rgba(245,158,11,0.4), inset 0 0 10px rgba(245,158,11,0.08); }
equip[quality="神器"]:hover    { border-color: rgba(239,68,68,0.55);  box-shadow: 0 0 16px rgba(239,68,68,0.4), inset 0 0 10px rgba(239,68,68,0.08); }
equip[quality="不朽"]:hover    { border-color: rgba(6,182,212,0.6);   box-shadow: 0 0 18px rgba(6,182,212,0.45), inset 0 0 12px rgba(6,182,212,0.08); }

skills[quality="普通"]:hover   { border-color: rgba(161,161,170,0.4); box-shadow: 0 0 8px rgba(161,161,170,0.2); }
skills[quality="优秀"]:hover   { border-color: rgba(34,197,94,0.45);  box-shadow: 0 0 10px rgba(34,197,94,0.25); }
skills[quality="精良"]:hover   { border-color: rgba(59,130,246,0.5);  box-shadow: 0 0 12px rgba(59,130,246,0.3); }
skills[quality="极品"]:hover   { border-color: rgba(99,102,241,0.5);  box-shadow: 0 0 12px rgba(99,102,241,0.3); }
skills[quality="史诗"]:hover   { border-color: rgba(168,85,247,0.5);  box-shadow: 0 0 14px rgba(168,85,247,0.35); }
skills[quality="传说"]:hover   { border-color: rgba(245,158,11,0.55); box-shadow: 0 0 16px rgba(245,158,11,0.4); }
skills[quality="神器"]:hover   { border-color: rgba(239,68,68,0.55);  box-shadow: 0 0 16px rgba(239,68,68,0.4); }
skills[quality="不朽"]:hover   { border-color: rgba(6,182,212,0.6);   box-shadow: 0 0 18px rgba(6,182,212,0.45); }

items[quality="普通"]:hover    { border-color: rgba(161,161,170,0.4); box-shadow: 0 0 8px rgba(161,161,170,0.2); }
items[quality="优秀"]:hover    { border-color: rgba(34,197,94,0.45);  box-shadow: 0 0 10px rgba(34,197,94,0.25); }
items[quality="精良"]:hover    { border-color: rgba(59,130,246,0.5);  box-shadow: 0 0 12px rgba(59,130,246,0.3); }
items[quality="极品"]:hover    { border-color: rgba(99,102,241,0.5);  box-shadow: 0 0 12px rgba(99,102,241,0.3); }
items[quality="史诗"]:hover    { border-color: rgba(168,85,247,0.5);  box-shadow: 0 0 14px rgba(168,85,247,0.35); }
items[quality="传说"]:hover    { border-color: rgba(245,158,11,0.55); box-shadow: 0 0 16px rgba(245,158,11,0.4); }
items[quality="神器"]:hover    { border-color: rgba(239,68,68,0.55);  box-shadow: 0 0 16px rgba(239,68,68,0.4); }
items[quality="不朽"]:hover    { border-color: rgba(6,182,212,0.6);   box-shadow: 0 0 18px rgba(6,182,212,0.45); }

/* 顶部信息容器 */
.rili-markdown-renderer .game_ui top_info {
    display: block;
    background: linear-gradient(145deg, 
        rgba(254, 243, 199, 0.6) 0%, 
        rgba(253, 230, 138, 0.5) 100%);
    border: 1.5px solid rgba(217, 119, 6, 0.3);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 2px 8px -2px rgba(217, 119, 6, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    position: relative;
}

.rili-markdown-renderer .game_ui top_info:hover {
    padding: 16px 18px;
    background: linear-gradient(145deg, 
        rgba(254, 243, 199, 0.9) 0%, 
        rgba(253, 230, 138, 0.8) 100%);
    border-color: rgba(217, 119, 6, 0.5);
    box-shadow: 
        0 6px 20px -4px rgba(217, 119, 6, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

/* 时间和地点容器 */
.rili-markdown-renderer .game_ui top_info time,
.rili-markdown-renderer .game_ui top_info position {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #92400e;
    margin-right: 24px;
    position: relative;
    padding-left: 26px;
    line-height: 1.6;
    transition: all 0.3s ease;
}

.rili-markdown-renderer .game_ui top_info:hover time,
.rili-markdown-renderer .game_ui top_info:hover position {
    color: #78350f;
    transform: translateX(2px);
}

/* 时间图标 - 时钟 */
.rili-markdown-renderer .game_ui top_info time::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background: radial-gradient(circle, #f59e0b 0%, #d97706 100%);
    border-radius: 50%;
    border: 2px solid #92400e;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.3);
    animation: pulse-clock 2s ease-in-out infinite;
}

.rili-markdown-renderer .game_ui top_info time::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    width: 1.5px;
    height: 6px;
    background: #92400e;
    transform-origin: bottom center;
    transform: translateY(-6px) rotate(45deg);
}

/* 地点图标 - 定位针 */
.rili-markdown-renderer .game_ui top_info position::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: 50% 50% 50% 0;
    border: 2px solid #92400e;
    transform: translateY(-50%) rotate(-45deg);
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.3);
}

.rili-markdown-renderer .game_ui top_info position::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    width: 6px;
    height: 6px;
    background: #fff;
    border-radius: 50%;
    transform: translateY(-50%);
    box-shadow: 0 0 0 1px #92400e;
}

/* 游戏区域规则 - 未hover时完全不可见不占空间 */
.rili-markdown-renderer .game_ui top_info game_area_rule {
    display: block;
    font-size: 13px;
    line-height: 1.8;
    color: #78350f;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.rili-markdown-renderer .game_ui top_info:hover game_area_rule {
    max-height: 500px;
    opacity: 1;
    margin-top: 14px;
}

/* 区域规则标题 */
.rili-markdown-renderer .game_ui top_info game_area_rule::before {
    content: '📋 区域规则';
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #d97706;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(217, 119, 6, 0.3);
    letter-spacing: 0.5px;
}

/* 动画效果 */
@keyframes pulse-clock {
    0%, 100% {
        box-shadow: 0 2px 6px rgba(217, 119, 6, 0.3);
    }
    50% {
        box-shadow: 0 2px 12px rgba(217, 119, 6, 0.5);
    }
}
chatting {
    display: block;
    position: relative;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    text-shadow: none !important;
}

chatting * {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    text-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.rili-markdown-renderer .game_ui chatting:last-child::after {
    content: "✦ 正在润色故事中 ✦";
    display: block;
    text-align: center;
    padding-top: 170px;
    padding-bottom: 30px;
    margin-top: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='150' height='150' viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3CradialGradient id='glow'%3E%3Cstop offset='0%25' style='stop-color:%23f59e0b;stop-opacity:0.4'/%3E%3Cstop offset='70%25' style='stop-color:%23fbbf24;stop-opacity:0.1'/%3E%3Cstop offset='100%25' style='stop-color:%23d97706;stop-opacity:0'/%3E%3C/radialGradient%3E%3ClinearGradient id='shine' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23fef3c7;stop-opacity:0.8'/%3E%3Cstop offset='50%25' style='stop-color:%23fcd34d;stop-opacity:0.5'/%3E%3Cstop offset='100%25' style='stop-color:%23f59e0b;stop-opacity:0.3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='75' cy='75' r='65' fill='url(%23glow)'%3E%3Canimate attributeName='opacity' values='0.3;0.6;0.3' dur='4s' repeatCount='indefinite'/%3E%3C/circle%3E%3Cg opacity='0.15'%3E%3Cpath d='M 75,20 L 78,50 L 75,45 L 72,50 Z' fill='%23f59e0b'/%3E%3Cpath d='M 75,130 L 78,100 L 75,105 L 72,100 Z' fill='%23f59e0b'/%3E%3Cpath d='M 20,75 L 50,78 L 45,75 L 50,72 Z' fill='%23f59e0b'/%3E%3Cpath d='M 130,75 L 100,78 L 105,75 L 100,72 Z' fill='%23f59e0b'/%3E%3Cpath d='M 38,38 L 58,55 L 52,52 L 55,58 Z' fill='%23f59e0b'/%3E%3Cpath d='M 112,112 L 92,95 L 98,98 L 95,92 Z' fill='%23f59e0b'/%3E%3Cpath d='M 112,38 L 95,58 L 98,52 L 92,55 Z' fill='%23f59e0b'/%3E%3Cpath d='M 38,112 L 55,92 L 52,98 L 58,95 Z' fill='%23f59e0b'/%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 75 75' to='360 75 75' dur='50s' repeatCount='indefinite'/%3E%3C/g%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 75 75' to='360 75 75' dur='30s' repeatCount='indefinite'/%3E%3Ccircle cx='75' cy='75' r='55' fill='none' stroke='%23d97706' stroke-width='1.2' opacity='0.25' stroke-dasharray='8 8'/%3E%3Ccircle cx='75' cy='20' r='2.5' fill='%23fcd34d' opacity='0.7'%3E%3Canimate attributeName='opacity' values='0.7;1;0.7' dur='2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='75' cy='130' r='2.5' fill='%23fcd34d' opacity='0.7'%3E%3Canimate attributeName='opacity' values='0.7;1;0.7' dur='2s' begin='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='20' cy='75' r='2.5' fill='%23fcd34d' opacity='0.7'%3E%3Canimate attributeName='opacity' values='0.7;1;0.7' dur='2s' begin='0.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='130' cy='75' r='2.5' fill='%23fcd34d' opacity='0.7'%3E%3Canimate attributeName='opacity' values='0.7;1;0.7' dur='2s' begin='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3Cg%3E%3CanimateTransform attributeName='transform' type='rotate' from='360 75 75' to='0 75 75' dur='20s' repeatCount='indefinite'/%3E%3Cpath d='M 75,35 L 85,60 L 75,55 L 65,60 Z' fill='url(%23shine)' opacity='0.4'/%3E%3Cpath d='M 75,115 L 85,90 L 75,95 L 65,90 Z' fill='url(%23shine)' opacity='0.4'/%3E%3Cpath d='M 35,75 L 60,85 L 55,75 L 60,65 Z' fill='url(%23shine)' opacity='0.4'/%3E%3Cpath d='M 115,75 L 90,85 L 95,75 L 90,65 Z' fill='url(%23shine)' opacity='0.4'/%3E%3Cpath d='M 48,48 L 65,65 L 60,60 L 65,55 Z' fill='url(%23shine)' opacity='0.35'/%3E%3Cpath d='M 102,102 L 85,85 L 90,90 L 85,95 Z' fill='url(%23shine)' opacity='0.35'/%3E%3Cpath d='M 102,48 L 85,65 L 90,60 L 85,55 Z' fill='url(%23shine)' opacity='0.35'/%3E%3Cpath d='M 48,102 L 65,85 L 60,90 L 65,95 Z' fill='url(%23shine)' opacity='0.35'/%3E%3C/g%3E%3Ccircle cx='75' cy='75' r='38' fill='none' stroke='%23d97706' stroke-width='1.5' opacity='0.3'%3E%3Canimate attributeName='r' values='38;42;38' dur='3s' repeatCount='indefinite'/%3E%3Canimate attributeName='opacity' values='0.3;0.5;0.3' dur='3s' repeatCount='indefinite'/%3E%3C/circle%3E%3Cg opacity='0.6'%3E%3Cpolygon points='75,55 80,68 75,65 70,68' fill='%23d97706'/%3E%3Cpolygon points='75,95 80,82 75,85 70,82' fill='%23d97706'/%3E%3Cpolygon points='55,75 68,80 65,75 68,70' fill='%23d97706'/%3E%3Cpolygon points='95,75 82,80 85,75 82,70' fill='%23d97706'/%3E%3Ccircle cx='75' cy='75' r='18' fill='none' stroke='%2392400e' stroke-width='2' opacity='0.5'/%3E%3Ccircle cx='75' cy='75' r='8' fill='%23f59e0b' opacity='0.25'%3E%3Canimate attributeName='opacity' values='0.25;0.5;0.25' dur='2.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='r' values='8;10;8' dur='2.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3Cg%3E%3Ccircle cx='95' cy='40' r='1.5' fill='%23fef3c7' opacity='0'%3E%3Canimate attributeName='opacity' values='0;0.9;0' dur='3s' repeatCount='indefinite'/%3E%3C/circle%3E%3Cpath d='M 95,40 L 95.5,38 L 96,40 L 98,40.5 L 96,41 L 95.5,43 L 95,41 L 93,40.5 Z' fill='%23fef3c7' opacity='0'%3E%3Canimate attributeName='opacity' values='0;1;0' dur='3s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3Cg%3E%3Ccircle cx='55' cy='110' r='1.5' fill='%23fef3c7' opacity='0'%3E%3Canimate attributeName='opacity' values='0;0.9;0' dur='3s' begin='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3Cpath d='M 55,110 L 55.5,108 L 56,110 L 58,110.5 L 56,111 L 55.5,113 L 55,111 L 53,110.5 Z' fill='%23fef3c7' opacity='0'%3E%3Canimate attributeName='opacity' values='0;1;0' dur='3s' begin='1s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3Cg%3E%3Ccircle cx='110' cy='95' r='1.5' fill='%23fef3c7' opacity='0'%3E%3Canimate attributeName='opacity' values='0;0.9;0' dur='3s' begin='2s' repeatCount='indefinite'/%3E%3C/circle%3E%3Cpath d='M 110,95 L 110.5,93 L 111,95 L 113,95.5 L 111,96 L 110.5,98 L 110,96 L 108,95.5 Z' fill='%23fef3c7' opacity='0'%3E%3Canimate attributeName='opacity' values='0;1;0' dur='3s' begin='2s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3Cg%3E%3Ccircle cx='40' cy='60' r='1.5' fill='%23fef3c7' opacity='0'%3E%3Canimate attributeName='opacity' values='0;0.9;0' dur='3s' begin='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3Cpath d='M 40,60 L 40.5,58 L 41,60 L 43,60.5 L 41,61 L 40.5,63 L 40,61 L 38,60.5 Z' fill='%23fef3c7' opacity='0'%3E%3Canimate attributeName='opacity' values='0;1;0' dur='3s' begin='1.5s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-position: center 10px;
    background-repeat: no-repeat;
    background-size: 145px;
    font-size: 13px;
    line-height: normal;
    font-weight: 600;
    color: #92400e;
    letter-spacing: 2.5px;
    opacity: 0.88;
    animation: loading-fade-in 1s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}
/* 确保top_info在最上层 */
.rili-markdown-renderer .game_ui top_info {
    position: relative;
    z-index: 10;
}

/* 淡入动画 */
@keyframes loading-fade-in {
    0% {
        opacity: 0;
        transform: translateY(-8px);
    }
    100% {
        opacity: 0.88;
        transform: translateY(0);
    }
}

/* 
 * ---------------------------------
 *   模块一：通用按钮 (mod、流式等)
 * ---------------------------------
 */
.flex.items-center.gap-2.pb-2 > button:not(.rounded-full):not(.size-7) {
    background: linear-gradient(145deg, #fffef5, #fff9e6) !important; /* 米白到淡金的渐变，营造温暖质感 */
    color: #92400e !important; /* 深琥珀色文字，与UI协调 */
    border: 2px solid #d97706 !important; /* 核心的琥珀金边框 */
    border-radius: 8px !important; /* 稍微圆润的边角，更具亲和力 */
    box-shadow: 
        0 4px 10px -4px rgba(217, 119, 6, 0.5), /* 外发光效果，营造魔法光晕 */
        inset 0 1px 1px rgba(255, 255, 255, 0.8) !important; /* 内部高光，增加立体感 */
    font-weight: bold !important;
    text-transform: none !important;
    transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; /* 缓动函数，使动画更流畅 */
    padding: 6px 16px !important;
    position: relative; /* 为伪元素定位 */
    overflow: hidden; /* 隐藏溢出的光晕 */
}

/* 按钮悬停效果 - 魔法充能 (已移除上浮效果) */
.flex.items-center.gap-2.pb-2 > button:not(.rounded-full):not(.size-7):hover {
    background: linear-gradient(145deg, #ffffff, #fffef5) !important; /* 悬停时提亮 */
    color: #f59e0b !important; /* 文字变为亮金色 */
    border-color: #f59e0b !important; /* 边框也变为亮金色 */
    /* transform: translateY(-2px) !important; */ /* <- 已根据要求移除 */
    box-shadow: 
        0 6px 20px -3px rgba(245, 158, 11, 0.7), /* 增强了光晕效果以补偿移除的位移 */
        inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
}

/* 按钮点击效果 - 符文激活 */
.flex.items-center.gap-2.pb-2 > button:not(.rounded-full):not(.size-7):active {
    transform: translateY(1px) !important; /* 保留轻微的按下效果 */
    transition-duration: 0.1s !important;
    box-shadow: inset 0 2px 4px rgba(217, 119, 6, 0.3) !important; /* 增加内阴影，模拟按下质感 */
}

/* 为按钮添加一个闪光动画的伪元素 */
.flex.items-center.gap-2.pb-2 > button:not(.rounded-full):not(.size-7)::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 60%);
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* 悬停时触发闪光动画 */
.flex.items-center.gap-2.pb-2 > button:not(.rounded-full):not(.size-7):hover::after {
    opacity: 1;
    animation: magic-flash 1.5s ease-in-out infinite;
}

/* 定义闪光动画 */
@keyframes magic-flash {
    0% { transform: translate(-100%, 100%) rotate(45deg); }
    100% { transform: translate(100%, -100%) rotate(45deg); }
}

#ai-chat-input {
    background-color: #fffef5 !important; /* 使用温暖的米白色 */
    border: 2px solid #d97706 !important; /* 琥珀金边框 */
    border-radius: 12px !important; /* 更圆润的边角，与UI风格统一 */
    color: #92400e !important; /* 深琥珀色文字 */
    box-shadow: 
        inset 0 2px 4px rgba(217, 119, 6, 0.15), /* 更柔和的内阴影 */
        0 0 0 0 rgba(245, 158, 11, 0); /* 初始状态无外发光 */
    transition: all 0.3s ease-in-out !important;
    padding: 10px 15px !important; /* 增加内边距，使输入更舒适 */
}

/* 输入框聚焦 (Focus) 时的动态效果 - 注入魔力 */
#ai-chat-input:focus {
    outline: none !important; /* 移除默认的蓝色轮廓 */
    border-color: #f59e0b !important; /* 边框变为亮金色 */
    background-color: #ffffff !important; /* 背景变为纯白，突出输入内容 */
    box-shadow: 
        inset 0 2px 4px rgba(217, 119, 6, 0.1),
        0 0 15px 3px rgba(245, 158, 11, 0.5) !important; /* 添加明亮的金色外发光，仿佛魔力汇聚 */
}

/* 输入框容器透明化，突出输入框本身 */
#ai-chat-bottom-input { 
    background: transparent !important; 
    backdrop-filter: none !important; 
}

T {
    position: relative;
    display: inline; /* 设为 inline，让其与前后文字在同一文本流中 */
    cursor: help;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: #888;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    text-decoration-skip-ink: auto;
}

/* 在 T 开头插入零宽不换行字符（WORD JOINER），
   禁止“前一段文字”和 T 内容之间出现换行，但不影响整句的自然换行 */
T::before {
    content: "\2060";
}

/* --- Tooltip 提示框本体 --- */
T Ti {
    /* 默认隐藏 */
    visibility: hidden;
    opacity: 0;

    /* 避免提示框文本被下划线影响，并允许其内部正常换行 */
    text-decoration: none;
    white-space: normal;

    /* 外观样式 */
    width: max-content;
    max-width: 250px;
    background-color: #1a1a1e;
    color: #f0f0f0;
    text-align: center;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.9em;
    border: 1px solid #444;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);

    /* 定位 */
    position: absolute;
    z-index: 10;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);

    /* 渐变过渡效果 */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* --- Tooltip 小三角箭头 --- */
T Ti::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #1a1a1e transparent transparent transparent;
}

/* --- 悬浮时显示Tooltip --- */
T:hover Ti {
    visibility: visible;
    opacity: 1;
}

#prompt-input [data-slot="input-group"] {
  background: linear-gradient(145deg, #fffef5, #fff9e6) !important;
  border: 2px solid #d97706 !important;
  border-radius: 12px !important;
  box-shadow: 
    0 4px 15px -3px rgba(217, 119, 6, 0.35),
    0 2px 8px -1px rgba(245, 158, 11, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  position: relative;
  overflow: visible;
}

#prompt-input [data-slot="input-group"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.7;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='60' viewBox='0 0 100 60'%3E%3Cdefs%3E%3Cfilter id='blur2'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='1.5'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='20' cy='30' r='4' fill='%23f59e0b' opacity='0.8' filter='url(%23blur2)'%3E%3Canimate attributeName='opacity' values='0.5;1;0.5' dur='3s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='50' cy='15' r='3' fill='%23d97706' opacity='0.7'%3E%3Canimate attributeName='opacity' values='0.4;0.9;0.4' dur='4s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle cx='80' cy='45' r='3.5' fill='%23f59e0b' opacity='0.6'%3E%3Canimate attributeName='opacity' values='0.3;0.8;0.3' dur='3.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 60px;
  animation: driftBackground 30s linear infinite reverse;
  border-radius: 12px;
}

#prompt-input [data-slot="input-group"]::after {
  content: "";
  position: absolute;
  top: -10px;
  right: 10%;
  width: 80px;
  height: 80px;
  opacity: 0.4;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cdefs%3E%3Cfilter id='glow3'%3E%3CfeGaussianBlur stdDeviation='2' result='coloredBlur'/%3E%3CfeMerge%3E%3CfeMergeNode in='coloredBlur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg transform='translate(40,40)'%3E%3Ccircle r='30' fill='none' stroke='%23d97706' stroke-width='1.5' opacity='0.5' filter='url(%23glow3)'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0' to='360' dur='40s' repeatCount='indefinite'/%3E%3C/circle%3E%3Ccircle r='22' fill='none' stroke='%23f59e0b' stroke-width='1' opacity='0.4'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0' to='-360' dur='30s' repeatCount='indefinite'/%3E%3C/circle%3E%3Cpath d='M0,-20 L17,10 L-17,10 Z' fill='none' stroke='%2392400e' stroke-width='1.2' opacity='0.4'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0' to='360' dur='25s' repeatCount='indefinite'/%3E%3C/path%3E%3Cpath d='M0,-10 L3,-3 L10,-2 L5,3 L6,10 L0,5 L-6,10 L-5,3 L-10,-2 L-3,-3 Z' fill='%23d97706' opacity='0.5' filter='url(%23glow3)'%3E%3Canimate attributeName='opacity' values='0.4;0.8;0.4' dur='3s' repeatCount='indefinite'/%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 80px 80px;
  animation: floatInputIcon 8s ease-in-out infinite;
}

@keyframes floatInputIcon {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(10deg); }
}

#prompt-input textarea {
  background-color: transparent !important;
  color: #92400e !important;
  transition: all 0.3s ease-in-out !important;
}

#prompt-input textarea:focus {
  outline: none !important;
  color: #78350f !important;
}

#prompt-input-footer button:has(svg.lucide-corner-down-left) {
  background: linear-gradient(145deg, #d97706, #f59e0b) !important;
  color: #ffffff !important;
  border: 2px solid #f59e0b !important;
  border-radius: 8px !important;
  box-shadow: 
    0 4px 12px -3px rgba(245, 158, 11, 0.6),
    inset 0 1px 1px rgba(255, 255, 255, 0.4) !important;
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
  position: relative;
  overflow: hidden;
}

#prompt-input-footer button:has(svg.lucide-corner-down-left):hover {
  background: linear-gradient(145deg, #f59e0b, #fbbf24) !important;
  border-color: #fbbf24 !important;
  box-shadow: 
    0 6px 20px -3px rgba(251, 191, 36, 0.8),
    inset 0 1px 1px rgba(255, 255, 255, 0.5) !important;
}

#prompt-input-footer button:has(svg.lucide-corner-down-left):active {
  transform: translateY(1px) !important;
  transition-duration: 0.1s !important;
  box-shadow: inset 0 2px 4px rgba(217, 119, 6, 0.4) !important;
}

#prompt-input-footer button:has(svg.lucide-corner-down-left)::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 60%);
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.5s ease;
}

#prompt-input-footer button:has(svg.lucide-corner-down-left):hover::before {
  opacity: 1;
  animation: sendButtonFlash 1.5s ease-in-out infinite;
}

@keyframes sendButtonFlash {
  0% { transform: translate(-100%, 100%) rotate(45deg); }
  100% { transform: translate(100%, -100%) rotate(45deg); }
}

#prompt-input-header button {
    background: linear-gradient(145deg, #fffef5, #fff9e6) !important;
    color: #92400e !important;
    border: 2px solid #d97706 !important;
    border-radius: 8px !important;
    box-shadow: 
        0 4px 10px -4px rgba(217, 119, 6, 0.5),
        0 0 0 0 rgba(245, 158, 11, 0),
        inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
    font-weight: bold !important;
    text-transform: none !important;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    padding: 6px 16px !important;
    position: relative;
    overflow: hidden;
    animation: buttonBreathe 2.8s ease-in-out infinite;
}

#prompt-input-header button:hover {
    background: linear-gradient(145deg, #ffffff, #fffef5) !important;
    color: #f59e0b !important;
    border-color: #f59e0b !important;
    box-shadow: 
        0 8px 22px -3px rgba(245, 158, 11, 0.75),
        0 0 0 3px rgba(245, 158, 11, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
    transform: translateY(-2px) scale(1.03) !important;
    animation: none !important;
}

#prompt-input-header button:active {
    transform: translateY(1px) scale(0.98) !important;
    transition-duration: 0.1s !important;
    box-shadow: inset 0 2px 6px rgba(217, 119, 6, 0.4) !important;
    animation: none !important;
}

#prompt-input-header button::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 60%);
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.5s ease;
}

#prompt-input-header button:hover::after {
    opacity: 1;
    animation: magic-flash 1.5s ease-in-out infinite;
}

#prompt-input-footer button:not(:has(svg.lucide-corner-down-left)) {
    background: linear-gradient(145deg, #fffef5, #fff9e6) !important;
    color: #92400e !important;
    border: 2px solid #d97706 !important;
    border-radius: 8px !important;
    box-shadow: 
        0 4px 10px -4px rgba(217, 119, 6, 0.5),
        0 0 0 0 rgba(245, 158, 11, 0),
        inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
    font-weight: bold !important;
    text-transform: none !important;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    padding: 6px 16px !important;
    position: relative;
    overflow: hidden;
    animation: buttonBreathe 2.8s ease-in-out infinite;
}

#prompt-input-footer button:not(:has(svg.lucide-corner-down-left)):hover {
    background: linear-gradient(145deg, #ffffff, #fffef5) !important;
    color: #f59e0b !important;
    border-color: #f59e0b !important;
    box-shadow: 
        0 8px 22px -3px rgba(245, 158, 11, 0.75),
        0 0 0 3px rgba(245, 158, 11, 0.2),
        inset 0 1px 1px rgba(255, 255, 255, 0.9) !important;
    transform: translateY(-2px) scale(1.03) !important;
    animation: none !important;
}

#prompt-input-footer button:not(:has(svg.lucide-corner-down-left)):active {
    transform: translateY(1px) scale(0.98) !important;
    transition-duration: 0.1s !important;
    box-shadow: inset 0 2px 6px rgba(217, 119, 6, 0.4) !important;
    animation: none !important;
}

#prompt-input-footer button:not(:has(svg.lucide-corner-down-left))::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 60%);
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.5s ease;
}

#prompt-input-footer button:not(:has(svg.lucide-corner-down-left)):hover::after {
    opacity: 1;
    animation: magic-flash 1.5s ease-in-out infinite;
}

#prompt-input-header button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(255, 255, 255, 0.7) 50%,
        transparent 100%
    );
    transform: skewX(-20deg);
    pointer-events: none;
    transition: left 0.6s ease;
    z-index: 1;
}

#prompt-input-header button:hover::before {
    left: 160%;
    transition: left 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#prompt-input-footer button:not(:has(svg.lucide-corner-down-left))::before {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        110deg,
        transparent 0%,
        rgba(255, 255, 255, 0.7) 50%,
        transparent 100%
    );
    transform: skewX(-20deg);
    pointer-events: none;
    transition: left 0.6s ease;
    z-index: 1;
}

#prompt-input-footer button:not(:has(svg.lucide-corner-down-left)):hover::before {
    left: 160%;
    transition: left 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes buttonBreathe {
    0%, 100% {
        box-shadow: 
            0 4px 10px -4px rgba(217, 119, 6, 0.5),
            0 0 0 0 rgba(245, 158, 11, 0),
            inset 0 1px 1px rgba(255, 255, 255, 0.8);
    }
    50% {
        box-shadow: 
            0 5px 14px -4px rgba(217, 119, 6, 0.65),
            0 0 0 2px rgba(245, 158, 11, 0.18),
            inset 0 1px 1px rgba(255, 255, 255, 0.9);
    }
}
