css
/* ========== 隐藏顶部颜色装饰条 ========== */
[class*="bg-[#F1CBCB]"], 
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}

/* ========== 统一聊天气泡基础：毛玻璃磨砂 + 大圆角 ========== */
.bg-gray-100\/90.relative.inline-block {
    border-radius: 26px !important;
    backdrop-filter: blur(22px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.5) !important;
    border: none !important;
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    isolation: isolate !important;
    overflow: visible !important;
}

/* ========== 用户气泡（输入侧）：淡蓝紫磨砂 ========== */
.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) {
    background: linear-gradient(135deg, 
        rgba(198, 208, 245, 0.55) 0%, 
        rgba(218, 208, 240, 0.48) 100%) !important;
    box-shadow: 
        0 10px 32px rgba(140, 130, 215, 0.22),
        0 2px 8px rgba(170, 160, 225, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}

/* ========== AI气泡（输出侧）：淡粉香槟 + 渐变发光边 ========== */
.chat-answer-container .bg-gray-100\/90.relative.inline-block {
    background: linear-gradient(135deg, 
        rgba(255, 224, 232, 0.58) 0%, 
        rgba(252, 230, 242, 0.52) 50%,
        rgba(245, 220, 238, 0.46) 100%) !important;
    box-shadow: 
        0 0 0 1.5px rgba(255, 200, 222, 0.45),
        0 0 22px rgba(230, 195, 240, 0.35),
        0 10px 32px rgba(225, 175, 210, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
}

/* ========== Hover极光呼吸效果 ========== */
.bg-gray-100\/90.relative.inline-block:hover {
    transform: translateY(-2px) !important;
    box-shadow: 
        0 14px 42px rgba(200, 180, 235, 0.32),
        0 0 32px rgba(255, 200, 232, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}

/* ========== 气泡正文：浅色底必须深色字保证可读性 ========== */
.markdown-body {
    color: #4a3a6b !important;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif !important;
    line-height: 1.78 !important;
    font-size: 15px !important;
    background: transparent !important;
    position: relative !important;
    z-index: 1 !important;
    letter-spacing: 0.2px !important;
}

.markdown-body strong, 
.markdown-body b {
    font-weight: bold !important;
    color: #6b4d9a !important;
}

.markdown-body code {
    background: rgba(230, 215, 245, 0.45) !important;
    color: #5d3d8a !important;
    padding: 2px 8px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
}

/* ========== 底部操作按钮：透明底 + 淡紫粉交替 + 果冻弹动 ========== */
.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
    background: transparent !important;
    color: #b89dd1 !important;
    border-radius: 50% !important;
    border: none !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    min-width: 32px !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:nth-child(even) {
    color: #e3a8c9 !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    background: radial-gradient(circle, 
        rgba(255, 200, 232, 0.35) 0%, 
        rgba(205, 185, 245, 0.18) 70%, 
        transparent 100%) !important;
    transform: scale(1.12) !important;
    box-shadow: 0 0 18px rgba(235, 195, 235, 0.5) !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:active {
    animation: jellyBounce 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes jellyBounce {
    0%   { transform: scale(1); }
    25%  { transform: scale(0.82); box-shadow: 0 0 26px rgba(255, 180, 222, 0.65); }
    55%  { transform: scale(1.18); }
    80%  { transform: scale(0.95); }
    100% { transform: scale(1); }
}

/* ========== 模型名称：粉紫渐变药丸胶囊 ========== */
.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
    background: linear-gradient(135deg, 
        rgba(225, 195, 245, 0.78), 
        rgba(255, 205, 228, 0.78)) !important;
    color: #ffffff !important;
    padding: 4px 14px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: bold !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 
        0 3px 10px rgba(220, 175, 235, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    letter-spacing: 0.3px !important;
}

/* ========== 积分消耗标签：粉紫渐变小云朵徽章 ========== */
.text-orange-500 {
    background: linear-gradient(135deg, 
        rgba(255, 178, 218, 0.8), 
        rgba(195, 168, 245, 0.8)) !important;
    color: #ffffff !important;
    padding: 3px 11px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: bold !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    box-shadow: 
        0 3px 10px rgba(255, 178, 222, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    display: inline-block !important;
}

/* ========== 隐藏默认加载点动画 ========== */
.style-module__AtdJSq__dot-flashing.style-module__AtdJSq__text {
    display: none !important;
}

/* ========== 自定义SVG SMIL加载：旋转闪烁的三颗星星 ========== */
.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    width: 56px !important;
    height: 32px !important;
}

.flex.items-center.justify-center.w-6.h-5::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 56px !important;
    height: 28px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 28'><g><path d='M10 14 L12 8 L18 14 L12 20 Z' fill='%23c8a8e8'><animateTransform attributeName='transform' type='rotate' from='0 14 14' to='360 14 14' dur='2.2s' repeatCount='indefinite'/><animate attributeName='opacity' values='0.3;1;0.3' dur='1.4s' repeatCount='indefinite'/></path><path d='M26 14 L28 8 L34 14 L28 20 Z' fill='%23ffb6d5'><animateTransform attributeName='transform' type='rotate' from='0 30 14' to='360 30 14' dur='2.2s' begin='0.4s' repeatCount='indefinite'/><animate attributeName='opacity' values='0.3;1;0.3' dur='1.4s' begin='0.4s' repeatCount='indefinite'/></path><path d='M42 14 L44 8 L50 14 L44 20 Z' fill='%23d9b8f0'><animateTransform attributeName='transform' type='rotate' from='0 46 14' to='360 46 14' dur='2.2s' begin='0.8s' repeatCount='indefinite'/><animate attributeName='opacity' values='0.3;1;0.3' dur='1.4s' begin='0.8s' repeatCount='indefinite'/></path></g></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    animation: loadFloat 2s ease-in-out infinite !important;
}

@keyframes loadFloat {
    0%, 100% { transform: translate(-50%, -50%); }
    50%      { transform: translate(-50%, -62%); }
}

/* ========== 移动端适配 ========== */
@media (max-width: 480px) {
    .bg-gray-100\/90.relative.inline-block {
        border-radius: 22px !important;
    }
    .markdown-body {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }
    .bg-gray-100\/90.relative.inline-block::before {
        width: 50px !important;
        height: 28px !important;
        top: -12px !important;
        left: -10px !important;
    }
    .bg-gray-100\/90.relative.inline-block::after {
        width: 58px !important;
        height: 24px !important;
        bottom: -10px !important;
        right: -10px !important;
    }
}

/* ========== 低动效偏好：减少幅度但保留动效 ========== */
@media (prefers-reduced-motion: reduce) {
    .bg-gray-100\/90.relative.inline-block {
        transition: none !important;
    }
    .MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
        transform: none !important;
    }
}
/* === 全局容器（奶油纸张质感） === */
ai {
  display: block;
  max-width: 820px;
  margin: 24px auto;
  padding: 28px 24px;
  background: #fdfbf7;
  border: 1px solid #e8dfd4;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03);
  font-family: "LXGW WenKai", "Georgia", "Songti SC", serif;
  color: #3e3631;
  line-height: 2;
}

/* === 隐藏思维链 === */
ai details.cot { display: none !important; }

/* === 顶部状态栏（楷体 + 宽屏居中） === */
ai hd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 20px;
  background: #f9f5f0;
  border-bottom: 2px solid #d4af37;
  padding: 12px 20px;
  margin-bottom: 28px;
  color: #6b5b4e;
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 15px;
  font-family: "KaiTi", "STKaiti", "KaiTi_GB2312", "楷体", serif;
}
@media (min-width: 1024px) { ai hd { padding: 14px 32px; font-size: 16px; } }

/* === 正文（纯黑楷体） === */
ai text { display: block; margin-bottom: 24px; }
ai text p {
  text-indent: 2em;
  margin: 0 0 18px 0;
  color: #000000;
  font-family: "KaiTi", "STKaiti", "KaiTi_GB2312", "楷体", serif;
  padding: 0 4px;
}

/* === 折叠面板（爱心折叠符号） === */
ai details {
  background: #ffffff;
  border: 1px solid #ede5db;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 14px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
ai details:hover { border-color: #d4af37; box-shadow: 0 4px 10px rgba(212, 175, 55, 0.05); }
ai details summary {
  font-weight: 600;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
ai details summary::-webkit-details-marker { display: none; }
ai details summary::after {
  content: "♡";
  color: #d4af37;
  font-size: 18px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-block;
}
ai details[open] summary::after { transform: rotate(180deg); }

/* === 嵌套折叠面板 === */
ai details details {
  background: #fcfaf8;
  border: 1px dashed #ede5db;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 8px 0;
}

/* =========================================================== */
/* 【核心替换】信息区块：完全不依赖 p/pt，直接用 [t="xxx"]  */
/* 无论你用 <div t="基础"> 还是 <block t="外貌">，都能生效    */
/* =========================================================== */
ai details > [t] {
  background: #fcfaf8;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0 0 12px 0;
  border: 1px solid #ede5db;
  display: block;
  box-sizing: border-box;
}

/* 如果你在 [t] 内部加了 <label> 或 <header> 做标题，自动美化 */
ai [t] > label,
ai [t] > header {
  font-weight: 700;
  color: #6b5b4e;
  display: block;
  border-bottom: 1px solid #ede5db;
  margin-bottom: 8px;
  padding-bottom: 4px;
  font-family: "KaiTi", serif;
  font-size: 15px;
}

/* 根据 t 属性值，为不同区块加上不同颜色的边 */
ai [t="基础"] { border-top: 1px solid #d4af37; }
ai [t="外貌"] { border-left: 2px solid #c4b09a; }
ai [t="性格"] { border-left: 2px solid #c4b09a; }
ai [t="装备"] { border-left: 2px solid #c4b09a; }
ai [t="生理周期"] { border-left: 2px solid #c4b09a; }
ai [t="微信"] { border-top: 1px solid #d4af37; background: #fdfbf7; } /* 微信独立强化 */
ai [t="动态"] { border-left: 2px solid #c4b09a; }
ai [t="日程"] { border-left: 2px solid #c4b09a; }
ai [t="观察"] { border-left: 2px solid #c4b09a; }
ai [t="状态"] { border-left: 2px solid #c4b09a; }

/* === 数据行 === */
ai d {
  display: flex;
  flex-wrap: wrap;
  padding: 4px 0;
  gap: 2px 8px;
  border-bottom: 1px solid #f0ebe5;
}
ai d:last-child { border-bottom: none; }
ai d f {
  color: #6b5b4e;
  font-weight: 500;
  display: inline-block;
  min-width: 80px;
}
ai d f::after { content: "："; color: #d4af37; }
ai d v { font-weight: 600; }
ai d m {
  display: block;
  padding-left: 14px;
  border-left: 2px solid #d4af37;
  margin: 6px 0;
  color: #4a3f38;
}

/* === 行动推荐（丰富交互触感） === */
ai act, ai details > d {
  display: block;
  padding: 10px 16px;
  margin: 8px 0;
  background: #fcfaf8;
  border: 1px solid #ede5db;
  border-left: 4px solid #d4af37;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  color: #4a3f38;
  font-weight: 500;
  position: relative;
}
/* 手机点击反馈 */
ai act:active, ai details > d:active { transform: scale(0.96); background: #f5f0ea; }
/* 鼠标悬停反馈 */
ai act:hover, ai details > d:hover {
  background: #fbf6ed;
  border-color: #c4b09a;
  border-left-color: #d4af37;
  transform: translateX(6px);
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.08);
}
/* 最后一个选项（自由行动）做成虚线 */
ai act:last-child, ai details > d:last-child {
  border-left-color: #c4b09a;
  border-style: dashed;
}

/* === 手机端适配 === */
@media (max-width: 600px) {
  ai { padding: 16px; margin: 12px; }
  ai hd { padding: 10px 14px; font-size: 13px; gap: 6px 12px; }
  ai details { padding: 12px; }
  ai act, ai details > d { padding: 8px 12px; }
}
css
/* ============ 顶部栏 ============ */
.sticky.w-full.top-0.flex.items-center {
    background: linear-gradient(135deg, rgba(253, 228, 237, 0.92) 0%, rgba(237, 222, 245, 0.92) 50%, rgba(225, 213, 245, 0.92) 100%) !important;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid rgba(244, 143, 177, 0.25) !important;
    box-shadow: 0 4px 18px -8px rgba(216, 145, 178, 0.35), inset 0 -1px 0 rgba(255, 255, 255, 0.5);
    font-family: "PingFang SC", "Microsoft YaHei", -apple-system, system-ui, sans-serif !important;
    position: relative;
}
.sticky.w-full.top-0.flex.items-center::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(244, 143, 177, 0.5), rgba(184, 166, 217, 0.5), transparent);
    pointer-events: none;
}

/* 模型选择器 */
#ai-model-selector .group.flex.items-center {
    background: linear-gradient(135deg, #fff5f9 0%, #f5ecfb 100%) !important;
    border: 1px solid rgba(244, 143, 177, 0.35) !important;
    border-radius: 14px !important;
    padding: 4px 12px !important;
    box-shadow: 0 2px 8px rgba(236, 127, 163, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
}
#ai-model-selector .group.flex.items-center:hover {
    background: linear-gradient(135deg, #ffe9f1 0%, #ece0fa 100%) !important;
    box-shadow: 0 4px 14px rgba(236, 127, 163, 0.28);
    transform: translateY(-1px);
}
#ai-model-selector .truncate.text-\[13px\] {
    color: #8a5a82 !important;
    font-weight: 600 !important;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
#ai-model-selector .shrink-0.flex.items-center svg {
    color: #d96b9e !important;
    transition: transform 0.3s ease;
}
#ai-model-selector .group.flex.items-center:hover svg {
    transform: rotate(180deg);
}

/* 历史记录图标 */
.sticky.w-full.top-0 svg.lucide-clock-8 {
    color: #b88bbf !important;
    filter: drop-shadow(0 1px 2px rgba(184, 139, 191, 0.4));
    transition: transform 0.3s ease;
}
.sticky.w-full.top-0 svg.lucide-clock-8:hover {
    transform: rotate(20deg) scale(1.1);
}

/* 历史记录小红点 */
.sticky.w-full.top-0 span.MuiBadge-dot.md\:hidden .MuiBadge-badge,
.sticky.w-full.top-0 span.MuiBadge-dot.md\:hidden {
    background: linear-gradient(135deg, #ff7eb6, #d96b9e) !important;
    box-shadow: 0 0 6px rgba(255, 126, 182, 0.7);
}

/* 音乐按钮 */
.sticky.w-full.top-0 button.MuiIconButton-root svg.lucide-music-2 {
    color: #c5a3d4 !important;
}

/* 移动端设置图标 */
.sticky.w-full.top-0 svg:has(use[href="#icon-icon-set"]) {
    color: #b88bbf !important;
    transition: transform 0.5s ease;
}
.sticky.w-full.top-0 svg:has(use[href="#icon-icon-set"]):hover {
    transform: rotate(90deg);
}

/* 设置按钮 */
#header-setting-button {
    background: linear-gradient(135deg, rgba(255, 245, 249, 0.9), rgba(245, 236, 251, 0.9)) !important;
    border: 1px solid rgba(244, 143, 177, 0.3) !important;
    border-radius: 12px !important;
    transition: all 0.3s ease;
}
#header-setting-button:hover {
    background: linear-gradient(135deg, #ffe9f1, #ece0fa) !important;
    box-shadow: 0 3px 10px rgba(236, 127, 163, 0.25);
}
#header-setting-button svg {
    color: #d96b9e !important;
    transition: transform 0.5s ease;
}
#header-setting-button:hover svg {
    transform: rotate(120deg);
}

/* ============ 开场白选择器 ============ */
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"] {
    background: linear-gradient(135deg, #fff5f9 0%, #f7eefb 100%) !important;
    border: 1px solid rgba(244, 143, 177, 0.35) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 10px rgba(236, 127, 163, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.7);
    color: #8a5a82 !important;
    font-weight: 600 !important;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]::before {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transition: left 0.6s ease;
}
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]:hover::before {
    left: 100%;
}
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]:hover {
    border-color: rgba(244, 143, 177, 0.6) !important;
    box-shadow: 0 4px 14px rgba(236, 127, 163, 0.25);
    transform: translateY(-1px);
}
div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="SlidersH"] {
    color: #d96b9e !important;
}
div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="ChevronDown"] {
    color: #b88bbf !important;
}

/* ============ 按钮栏 ============ */
#ai-mod-button2 button.MuiButton-root {
    background: linear-gradient(135deg, rgba(255, 245, 249, 0.85), rgba(245, 236, 251, 0.85)) !important;
    border: 1px solid rgba(244, 143, 177, 0.3) !important;
    border-radius: 14px !important;
    color: #8a5a82 !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(236, 127, 163, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease !important;
    backdrop-filter: blur(6px);
}
#ai-mod-button2 button.MuiButton-root:hover {
    background: linear-gradient(135deg, #ffe9f1, #ece0fa) !important;
    box-shadow: 0 5px 16px rgba(236, 127, 163, 0.28);
    transform: translateY(-2px);
}
#ai-mod-button2 button.MuiButton-root svg {
    color: #d96b9e !important;
    filter: drop-shadow(0 1px 2px rgba(236, 127, 163, 0.3));
}

/* ============ 底部栏 ============ */
.bg-gradient-to-t {
    background: linear-gradient(to top, rgba(253, 228, 237, 0.85) 0%, rgba(237, 222, 245, 0.5) 60%, rgba(237, 222, 245, 0) 100%) !important;
    backdrop-filter: blur(8px);
}

#ai-chat-bottom-input {
    background: linear-gradient(135deg, rgba(255, 250, 252, 0.95), rgba(250, 244, 254, 0.95)) !important;
    border: 1.5px solid rgba(244, 143, 177, 0.4) !important;
    border-radius: 22px !important;
    box-shadow: 0 6px 24px rgba(216, 145, 178, 0.25), 0 2px 8px rgba(184, 166, 217, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    transition: all 0.3s ease;
}
#ai-chat-bottom-input:focus-within {
    border-color: rgba(244, 143, 177, 0.7) !important;
    box-shadow: 0 8px 28px rgba(216, 145, 178, 0.4), 0 0 0 4px rgba(244, 143, 177, 0.12);
}
#ai-chat-input {
    color: #6b4763 !important;
    font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif !important;
    font-size: 14px !important;
    letter-spacing: 0.2px;
}
#ai-chat-input::placeholder {
    color: rgba(184, 139, 191, 0.65) !important;
    font-style: italic;
}
#ai-chat-input::selection {
    background: rgba(244, 143, 177, 0.35) !important;
    color: #6b4763 !important;
}

/* ============ 分页栏 ============ */
.MuiPaginationItem-root {
    color: #8a5a82 !important;
    background: linear-gradient(135deg, rgba(255, 245, 249, 0.7), rgba(245, 236, 251, 0.7)) !important;
    border: 1px solid rgba(244, 143, 177, 0.25) !important;
    font-weight: 600 !important;
    transition: all 0.25s ease !important;
}
.MuiPaginationItem-root:hover {
    background: linear-gradient(135deg, #ffe9f1, #ece0fa) !important;
    border-color: rgba(244, 143, 177, 0.5) !important;
    box-shadow: 0 2px 8px rgba(236, 127, 163, 0.2);
}
.MuiPaginationItem-root.Mui-selected {
    background: linear-gradient(135deg, #f48fb1, #c5a3d4) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 3px 10px rgba(236, 127, 163, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    text-shadow: 0 1px 1px rgba(138, 90, 130, 0.4);
}
.MuiPaginationItem-root.Mui-disabled {
    opacity: 0.4 !important;
    background: rgba(245, 236, 251, 0.4) !important;
}
.MuiPaginationItem-icon {
    color: #d96b9e !important;
}
.MuiStack-root.css-1uwir8f .MuiBox-root {
    color: #8a5a82 !important;
    font-weight: 500;
}
.MuiInputBase-input {
    color: #6b4763 !important;
    background: rgba(255, 245, 249, 0.8) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(244, 143, 177, 0.3) !important;
}

/* ============ 评论区 ============ */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    background: linear-gradient(160deg, rgba(255, 240, 246, 0.96) 0%, rgba(245, 232, 250, 0.96) 50%, rgba(232, 222, 248, 0.96) 100%) !important;
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(244, 143, 177, 0.3) !important;
    box-shadow: 0 8px 32px rgba(216, 145, 178, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.6);
    font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif !important;
}

/* 顶部标题 "评论(x)" */
div.text-lg.font-bold {
    color: #8a4b75 !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
    position: relative;
    padding-left: 18px;
}
div.text-lg.font-bold::before {
    content: "♡";
    position: absolute;
    left: 0;
    color: #ec7fa3;
    font-size: 16px;
    animation: heartBeat 1.8s ease-in-out infinite;
}
@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* 个人评分 */
p.MuiTypography-body1.text-grey-600 {
    color: #8a5a82 !important;
    font-weight: 500;
}
span.MuiRating-iconEmpty svg {
    color: rgba(244, 143, 177, 0.3) !important;
}
span.MuiRating-iconFilled svg {
    color: #f48fb1 !important;
    filter: drop-shadow(0 0 4px rgba(244, 143, 177, 0.5));
}
span.text-orange-500 {
    color: #ec7fa3 !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 2px rgba(236, 127, 163, 0.25);
}

/* 评论输入框 */
div.flex.flex-col.border-gray-200 {
    background: linear-gradient(135deg, rgba(255, 250, 252, 0.85), rgba(250, 244, 254, 0.85)) !important;
    border: 1.5px solid rgba(244, 143, 177, 0.35) !important;
    border-radius: 16px !important;
    box-shadow: inset 0 1px 4px rgba(216, 145, 178, 0.12);
    transition: all 0.3s ease;
}
div.flex.flex-col.border-gray-200:focus-within {
    border-color: rgba(244, 143, 177, 0.65) !important;
    box-shadow: 0 0 0 4px rgba(244, 143, 177, 0.12), inset 0 1px 4px rgba(216, 145, 178, 0.15);
}
textarea.rc-textarea {
    background: transparent !important;
    color: #6b4763 !important;
    font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif !important;
}
textarea.rc-textarea::placeholder {
    color: rgba(184, 139, 191, 0.6) !important;
}
div.bg-gray-100.text-gray-500 {
    background: rgba(244, 143, 177, 0.15) !important;
    color: #b88bbf !important;
    border-radius: 10px !important;
    padding: 2px 8px;
    font-weight: 500;
}

/* 发送评论按钮 */
div.cursor-pointer.group.flex.items-center.justify-center {
    background: linear-gradient(135deg, #f48fb1, #c5a3d4) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 12px rgba(236, 127, 163, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}
div.cursor-pointer.group.flex.items-center.justify-center:hover {
    transform: scale(1.1) rotate(15deg);
    box-shadow: 0 6px 18px rgba(236, 127, 163, 0.55);
}
div[data-state="closed"] svg[data-icon="Send03"] {
    color: #fff !important;
    filter: drop-shadow(0 1px 2px rgba(138, 90, 130, 0.5));
}

/* 分割线 */
div.style_divider__mW0YX {
    background: linear-gradient(90deg, transparent, rgba(244, 143, 177, 0.4), rgba(184, 166, 217, 0.4), transparent) !important;
    height: 1px !important;
    border: none !important;
}

/* 排序按钮 */
.MuiStack-root.css-1dmzxoz button.MuiButton-outlinedPrimary {
    background: linear-gradient(135deg, rgba(255, 245, 249, 0.7), rgba(245, 236, 251, 0.7)) !important;
    color: #8a5a82 !important;
    border: 1px solid rgba(244, 143, 177, 0.35) !important;
    border-radius: 14px !important;
    font-weight: 600 !important;
    transition: all 0.25s ease !important;
}
.MuiStack-root.css-1dmzxoz button.MuiButton-outlinedPrimary:hover {
    background: linear-gradient(135deg, #ffe9f1, #ece0fa) !important;
    border-color: rgba(244, 143, 177, 0.6) !important;
}
.MuiStack-root.css-1dmzxoz button.MuiButton-containedPrimary {
    background: linear-gradient(135deg, #f48fb1, #c5a3d4) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 14px !important;
    font-weight: 600 !important;
    box-shadow: 0 3px 10px rgba(236, 127, 163, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    text-shadow: 0 1px 1px rgba(138, 90, 130, 0.3);
}

/* 评论项 */
div.group.ml-0 {
    transition: all 0.3s ease;
    border-radius: 14px;
    padding: 4px;
}
div.group.ml-0:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* 用户头像 */
div.group img.rounded-full {
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 2px 8px rgba(236, 127, 163, 0.3), 0 0 0 2px rgba(244, 143, 177, 0.4);
    transition: transform 0.3s ease;
}
div.group img.rounded-full:hover {
    transform: scale(1.08) rotate(-5deg);
}

/* 用户名 */
div.text-sm.text-grey-600 span.font-bold {
    color: #8a4b75 !important;
    font-weight: 700 !important;
}

/* (你) 标签 */
span.text-\[10px\] {
    background: linear-gradient(135deg, #f48fb1, #c5a3d4) !important;
    color: #fff !important;
    padding: 1px 8px !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 4px rgba(236, 127, 163, 0.35);
    font-weight: 600 !important;
    text-shadow: 0 1px 1px rgba(138, 90, 130, 0.3);
}

/* 评论内容 */
div.break-all {
    color: #5e3f57 !important;
    line-height: 1.7 !important;
    letter-spacing: 0.3px;
}

/* 时间戳 */
div.text-xs.text-grey-600 {
    color: #b88bbf !important;
    font-weight: 500;
}

/* 点赞按钮 */
button.text-gray-400 {
    color: #c5a3d4 !important;
    transition: all 0.25s ease;
}
button.text-gray-400:hover {
    color: #ec7fa3 !important;
    transform: scale(1.15);
}
button.text-gray-400 svg {
    filter: drop-shadow(0 1px 2px rgba(184, 139, 191, 0.3));
}
button.text-gray-400:hover svg {
    filter: drop-shadow(0 2px 4px rgba(236, 127, 163, 0.5));
}

/* 回复按钮 */
span.cursor-pointer {
    color: #d96b9e !important;
    font-weight: 600 !important;
    transition: all 0.25s ease;
    position: relative;
}
span.cursor-pointer::after {
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    width: 0; height: 1.5px;
    background: linear-gradient(90deg, #f48fb1, #c5a3d4);
    transition: width 0.3s ease;
}
span.cursor-pointer:hover::after {
    width: 100%;
}

/* 回复区域边框 */
div.ml-8.border-l {
    border-left: 2px solid rgba(244, 143, 177, 0.35) !important;
    border-image: linear-gradient(to bottom, rgba(244, 143, 177, 0.5), rgba(184, 166, 217, 0.5), transparent) 1 !important;
}

/* 评论列表滚动条 */
div.p-3.overflow-y-auto::-webkit-scrollbar {
    width: 6px;
}
div.p-3.overflow-y-auto::-webkit-scrollbar-track {
    background: rgba(244, 143, 177, 0.08);
    border-radius: 3px;
}
div.p-3.overflow-y-auto::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #f48fb1, #c5a3d4);
    border-radius: 3px;
}
/* 顶部栏左侧星屑装饰 */
.sticky.w-full.top-0.flex.items-center::before {
    content: "✦ ✧ ✦";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 8px;
    color: rgba(244, 143, 177, 0.4);
    letter-spacing: 6px;
    pointer-events: none;
    animation: twinkle 3s ease-in-out infinite;
}
@keyframes twinkle {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.9; }
}

/* 评论区右下角樱花装饰 */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"]::after {
    content: "🌸";
    position: absolute;
    right: 14px;
    top: 14px;
    font-size: 16px;
    opacity: 0.5;
    pointer-events: none;
    animation: float 4s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-6px) rotate(15deg); }
}