/* 隐藏浅蓝色条 */
div[class*="bg-[#c9e1e9]"][class*="top-0"][class*="h-0.5"] {
display: none !important;
}

/* 隐藏浅粉色条 */
div[class*="bg-[#F1CBCB]"][class*="top-0"][class*="h-0.5"] {
display: none !important;
}


/* 
 * ================================================================
 *   模块一：对话气泡美化 (AI侧) —— 水色卡牌风格
 * ================================================================
 */
.group .bg-gray-100\/90 {
    background: #ffffff !important;
    border: 3px double #b8dce8 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(90, 170, 200, 0.10), inset 0 0 0 1px #e8f4f8 !important;
    color: #1a4a5a !important;
    padding: 12px 16px !important;
    position: relative !important;
    transition: box-shadow 0.2s ease !important;
}

/* 对话气泡——装饰小花边（左上角小装饰）—— 纯图标，无背景 */
.group .bg-gray-100\/90::before {
    content: "✦" !important;
    position: absolute !important;
    top: -8px !important;
    left: 12px !important;
    font-size: 12px !important;
    color: #6ab0c8 !important;
    /* 已去除白色背景和填充，纯图标 */
}

/* 
 * ================================================================
 *   模块二：平台按钮美化 —— 水色系卡牌按钮
 * ================================================================
 */
.flex.items-center.gap-2.pb-2 > button {
    background: #ffffff !important;
    color: #1a4a5a !important;
    border: 2px solid #b8dce8 !important;
    border-radius: 24px !important;
    box-shadow: 0 2px 8px rgba(90, 170, 200, 0.06) !important;
    font-weight: 500 !important;
    text-transform: none !important;
    transition: all 0.2s ease !important;
    padding: 6px 18px !important;
    font-size: 13px !important;
    letter-spacing: 0.3px !important;
}
.flex.items-center.gap-2.pb-2 > button:hover {
    background: #e8f4f8 !important;
    color: #1a4a5a !important;
    border-color: #6ab0c8 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(90, 170, 200, 0.12) !important;
}
.flex.items-center.gap-2.pb-2 > button:active {
    transform: scale(0.97) !important;
    box-shadow: 0 1px 4px rgba(90, 170, 200, 0.06) !important;
}

/* 
 * ================================================================
 *   模块三：多余元素隐藏（保持原样，不做强制隐藏）
 * ================================================================
 */
.MuiButtonBase-root.MuiButton-root.MuiButton-default.css-w13mdt,
.absolute.z-40 .px-4.py-2.hover\:bg-indigo-100:nth-child(5),
.css-nkqe49 {
    /* display: none !important; */ /* 保持注释状态 */
}

/* 
 * ================================================================
 *   模块四：输入栏美化 —— 水色卡牌输入框
 * ================================================================
 */
#ai-chat-input {
    background-color: #ffffff !important;
    border: 3px double #b8dce8 !important;
    border-radius: 16px !important;
    color: #1a4a5a !important;
    box-shadow: inset 0 2px 6px rgba(90, 170, 200, 0.04), 0 2px 8px rgba(90, 170, 200, 0.06) !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
#ai-chat-input:focus {
    border-color: #6ab0c8 !important;
    box-shadow: inset 0 2px 6px rgba(90, 170, 200, 0.04), 0 0 0 3px rgba(106, 176, 200, 0.12) !important;
    outline: none !important;
}
#ai-chat-input::placeholder {
    color: #8ab8c8 !important;
    font-weight: 300 !important;
}

/* 输入框容器 —— 实色背景，无透明度 */
#ai-chat-bottom-input {
    background: #d6edf5 !important;
    backdrop-filter: none !important;
    border-top: 2px solid #b8dce8 !important;
}

/* 
 * ================================================================
 *   模块五：顶部栏 —— 实色水色背景，卡牌风格
 * ================================================================
 */
.sticky.w-full.top-0.flex.items-center {
    background: #d6edf5 !important;
    border-bottom: 3px double #b8dce8 !important;
    box-shadow: 0 2px 12px rgba(90, 170, 200, 0.08) !important;
    padding: 8px 16px !important;
}

/* 模型选择器 —— 水色卡牌 */
#ai-model-selector .group.flex.items-center {
    background: #ffffff !important;
    border: 2px solid #b8dce8 !important;
    border-radius: 20px !important;
    padding: 4px 14px !important;
    box-shadow: 0 2px 8px rgba(90, 170, 200, 0.04) !important;
    transition: all 0.2s ease !important;
}
#ai-model-selector .group.flex.items-center:hover {
    border-color: #6ab0c8 !important;
    box-shadow: 0 4px 16px rgba(90, 170, 200, 0.08) !important;
    transform: translateY(-1px) !important;
}
#ai-model-selector .truncate.text-\[13px\] {
    color: #1a4a5a !important;
    font-weight: 600 !important;
}

/* 
 * ================================================================
 *   模块六：开场白部分 —— 水色卡牌
 * ================================================================
 */
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"] {
    background: #ffffff !important;
    border: 2px solid #b8dce8 !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(90, 170, 200, 0.04) !important;
    transition: all 0.2s ease !important;
    padding: 0 12px !important;
}
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]:hover {
    border-color: #6ab0c8 !important;
    box-shadow: 0 4px 16px rgba(90, 170, 200, 0.08) !important;
    transform: translateY(-1px) !important;
}
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"] svg {
    color: #6ab0c8 !important;
}

/* 
 * ================================================================
 *   模块七：底部栏 —— 实色水色背景，卡牌风格
 * ================================================================
 */
.bg-gradient-to-t {
    background: #d6edf5 !important;
    border-top: 3px double #b8dce8 !important;
    box-shadow: 0 -4px 20px rgba(90, 170, 200, 0.06) !important;
}



/* 
 * ================================================================
 *   模块九：响应式适配（手机 & 电脑）
 * ================================================================
 */
@media (max-width: 640px) {
    .flex.items-center.gap-2.pb-2 > button {
        padding: 4px 14px !important;
        font-size: 12px !important;
        border-radius: 20px !important;
    }
    #ai-chat-input {
        padding: 8px 14px !important;
        font-size: 13px !important;
        border-radius: 14px !important;
    }
    #ai-model-selector .group.flex.items-center {
        padding: 2px 10px !important;
    }
    .sticky.w-full.top-0.flex.items-center {
        padding: 6px 12px !important;
    }
    div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"] {
        padding: 0 8px !important;
        height: 32px !important;
    }
    #ai-chat-bottom-input {
        padding: 6px 10px !important;
    }
    .group .bg-gray-100\/90 {
        padding: 10px 14px !important;
        border-radius: 14px !important;
    }
    .group .bg-gray-100\/90::before {
        font-size: 10px !important;
        top: -6px !important;
        left: 10px !important;
    }
    div[class*="rounded-"]:not(.bg-transparent):not(.bg-gray-100\/90):not(#ai-chat-input):not(.flex.items-center.h-9)::before {
        font-size: 8px !important;
        top: -4px !important;
        right: 8px !important;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    .flex.items-center.gap-2.pb-2 > button {
        padding: 6px 16px !important;
        font-size: 13px !important;
    }
    #ai-chat-input {
        padding: 10px 16px !important;
        font-size: 14px !important;
    }
}

/* 
 * ================================================================
 *   模块十：深色背景文字保护（若背景变深，文字强制变白）
 * ================================================================
 */
/* 如果任何容器背景色为深色（rgb < 128），其内部文本自动变为白色 */
div[style*="background: rgb"]:not([style*="background: rgb(255"]):not([style*="background: rgb(24"]):not([style*="background: rgb(10"]) {
    color: #ffffff !important;
}
div[style*="background-color: rgb"]:not([style*="background-color: rgb(255"]):not([style*="background-color: rgb(24"]):not([style*="background-color: rgb(10"]) {
    color: #ffffff !important;
}

/* 强制保护：深色背景下的输入框文字变白 */
div[style*="background: #"]:not([style*="background: #fff"]):not([style*="background: #f"]):not([style*="background: #e"]) {
    color: #ffffff !important;
}
div[style*="background-color: #"]:not([style*="background-color: #fff"]):not([style*="background-color: #f"]):not([style*="background-color: #e"]) {
    color: #ffffff !important;
}

/* 如果输入框背景变深，文字强制变白 */
#ai-chat-input[style*="background: rgb(0"]:not([style*="background: rgb(255"]),
#ai-chat-input[style*="background-color: rgb(0"]:not([style*="background-color: rgb(255"]),
#ai-chat-input[style*="background: #"]:not([style*="background: #fff"]):not([style*="background: #f"]):not([style*="background: #e"]) {
    color: #ffffff !important;
}
#ai-chat-input[style*="background-color: #"]:not([style*="background-color: #fff"]):not([style*="background-color: #f"]):not([style*="background-color: #e"]) {
    color: #ffffff !important;
}




/* ================================================================
 *  折叠状态栏（details）美化 —— 水色卡牌风格（紧凑版）
 *  适配手机 & 电脑，Markdown表格特殊优化
 * ================================================================ */

/* --- 1. details 整体容器：圆角花边框（尺寸缩小） --- */
details {
    background: #ffffff;
    border: 2px double #b8dce8;          /* 双线花边，比之前更细 */
    border-radius: 12px;                 /* 圆角略收 */
    padding: 8px 12px 10px;              /* 内边距整体缩减 */
    margin: 10px 0;
    box-shadow: 0 2px 8px rgba(90, 170, 200, 0.06);
    font-size: 1.0em;                    /* 基础字体缩小至 1em */
    color: #1a4a5a;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    position: relative;
}

/* 悬停时边框微微提亮 */
details:hover {
    border-color: #6ab0c8;
    box-shadow: 0 4px 12px rgba(90, 170, 200, 0.08);
}

/* --- 2. summary（点击标题区域） --- */
details summary {
    cursor: pointer;
    list-style: none;
    position: relative;
    padding: 2px 4px 2px 28px;           /* 左侧留出星星位置，间距缩小 */
    font-weight: 600;
    font-size: 0.95em;                   /* 标题字体略小 */
    color: #1a4a5a;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    user-select: none;
}

/* 隐藏浏览器默认三角（兼容） */
details summary::-webkit-details-marker {
    display: none;
}
details summary::marker {
    display: none;
}

/* --- 3. 用 ⭐️ 替换默认三角（尺寸同步缩小） --- */
details summary::before {
    content: "⭐️";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-size: 0.85em;                   /* 星星图标缩小 */
    line-height: 1;
    display: inline-block;
}

/* --- 4. 展开时 ⭐️ 旋转 180° --- */
details[open] summary::before {
    transform: translateY(-50%) rotate(180deg);
}

/* summary 悬停效果 */
details summary:hover {
    color: #6ab0c8;
}

/* --- 5. 展开后的内容区域：顶部加分隔线（间距缩小） --- */
details > *:not(summary) {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 2px dashed #b8dce8;
    color: #1a4a5a;
}

/* ================================================================
 *   Markdown 表格特殊美化（尺寸同步缩小）
 *   黑色 / 白色背景下均清晰可读，自适应尺寸
 * ================================================================ */

details table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 10px;
    overflow: hidden;
    margin: 8px 0 4px;
    font-size: 0.85em;                   /* 表格字体缩小 */
    border: 2px solid #b8dce8;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(90, 170, 200, 0.04);
    table-layout: auto;
}

/* 表头 - 水色渐变 */
details table thead {
    background: #d6edf5;
    color: #1a4a5a;
    font-weight: 600;
}

/* 单元格 */
details table th,
details table td {
    padding: 6px 10px;                   /* 单元格内边距缩小 */
    border: 1px solid #b8dce8;
    text-align: left;
    vertical-align: middle;
    color: #1a4a5a;
    transition: background 0.15s ease;
}

/* 斑马纹 (偶数行) */
details table tbody tr:nth-child(even) {
    background: #f0f8fa;
}

/* 行悬停效果 */
details table tbody tr:hover {
    background: #e8f4f8;
}

/* ================================================================
 *   深色背景保护（若父容器带有 dark 类或 data-theme="dark"）
 *   表格文字强制变白，确保可读性
 * ================================================================ */

/* 深色模式下的 details 容器 */
[data-theme="dark"] details,
.dark details,
.dark-theme details {
    background: #1a2a3a;
    border-color: #3a6a7a;
    color: #e8f4f8;
}

[data-theme="dark"] details summary,
.dark details summary,
.dark-theme details summary {
    color: #e8f4f8;
}

[data-theme="dark"] details summary:hover,
.dark details summary:hover,
.dark-theme details summary:hover {
    color: #8ac8d8;
}

[data-theme="dark"] details > *:not(summary),
.dark details > *:not(summary),
.dark-theme details > *:not(summary) {
    color: #e8f4f8;
}

/* 深色模式下的表格 */
[data-theme="dark"] details table,
.dark details table,
.dark-theme details table {
    background: #1a2a3a;
    border-color: #3a6a7a;
}

[data-theme="dark"] details table thead,
.dark details table thead,
.dark-theme details table thead {
    background: #2a4a5a;
    color: #e8f4f8;
}

[data-theme="dark"] details table th,
[data-theme="dark"] details table td,
.dark details table th,
.dark details table td,
.dark-theme details table th,
.dark-theme details table td {
    color: #e8f4f8;
    border-color: #3a6a7a;
}

[data-theme="dark"] details table tbody tr:nth-child(even),
.dark details table tbody tr:nth-child(even),
.dark-theme details table tbody tr:nth-child(even) {
    background: #1f3a4a;
}

[data-theme="dark"] details table tbody tr:hover,
.dark details table tbody tr:hover,
.dark-theme details table tbody tr:hover {
    background: #2a4a5a;
}

/* ================================================================
 *   响应式适配（手机 & 平板 & 电脑）—— 尺寸同步缩小
 * ================================================================ */

/* 手机 (≤ 640px) */
@media (max-width: 640px) {
    details {
        padding: 6px 8px 8px;
        border-radius: 10px;
        font-size: 0.9em;
        margin: 8px 0;
        border-width: 2px;
    }
    details summary {
        padding: 2px 2px 2px 22px;
        font-size: 0.9em;
    }
    details summary::before {
        font-size: 0.8em;
    }
    details table {
        font-size: 0.78em;
        border-width: 1px;
    }
    details table th,
    details table td {
        padding: 4px 6px;
        border-width: 1px;
    }
    details > *:not(summary) {
        margin-top: 6px;
        padding-top: 8px;
    }
}

/* 平板 (641px ~ 1024px) */
@media (min-width: 641px) and (max-width: 1024px) {
    details {
        padding: 10px 14px 12px;
        font-size: 0.95em;
    }
    details table {
        font-size: 0.82em;
    }
    details table th,
    details table td {
        padding: 6px 8px;
    }
}

/* 电脑 (≥ 1025px) 保持默认 */

/* ================================================================
 *   额外：若表格放在暗色背景中但父容器未标记 dark 类，
 *   可通过此 fallback 保障可读性（但不强制覆盖）
 * ================================================================ */

/* 当表格背景为深色时，文字自动变白（仅当背景色被外部设置为深色时生效） */
details table[style*="background: rgb(0"]:not([style*="background: rgb(255"]),
details table[style*="background-color: rgb(0"]:not([style*="background-color: rgb(255"]) {
    color: #ffffff !important;
}
details table[style*="background: #"]:not([style*="background: #fff"]):not([style*="background: #f"]):not([style*="background: #e"]) {
    color: #ffffff !important;
}
details table[style*="background-color: #"]:not([style*="background-color: #fff"]):not([style*="background-color: #f"]):not([style*="background-color: #e"]) {
    color: #ffffff !important;
}

/* 表格内的 th/td 在深色背景中同样变白 */
details table th[style*="background: rgb(0"]:not([style*="background: rgb(255"]),
details table td[style*="background: rgb(0"]:not([style*="background: rgb(255"]) {
    color: #ffffff !important;
}
details table th[style*="background: #"]:not([style*="background: #fff"]):not([style*="background: #f"]):not([style*="background: #e"]),
details table td[style*="background: #"]:not([style*="background: #fff"]):not([style*="background: #f"]):not([style*="background: #e"]) {
    color: #ffffff !important;
}


















/* ================================================================
 *  评论区单条评论卡片美化 —— 水色卡牌风格
 *  适配手机 & 电脑，精致花边边框
 * ================================================================ */

/* --- 1. 评论卡片容器：水色卡牌质感 --- */
div[role="presentation"].group.ml-0 {
    background: #ffffff !important;
    border: 3px double #b8dce8 !important;
    border-radius: 16px !important;
    padding: 18px 20px !important;
    margin-bottom: 14px !important;
    box-shadow: 0 4px 16px rgba(90, 170, 200, 0.08) !important;
    transition: all 0.25s ease !important;
    position: relative !important;
}

/* --- 2. 装饰小角标（花边点缀） --- */
div[role="presentation"].group.ml-0::before {
    content: "✦" !important;
    position: absolute !important;
    top: -6px !important;
    left: 14px !important;
    font-size: 11px !important;
    color: #6ab0c8 !important;
    background: #ffffff !important;
    padding: 0 4px !important;
    border-radius: 4px !important;
    opacity: 0.7 !important;
}

/* --- 3. 悬停微动：上浮 + 边框提亮 --- */
div[role="presentation"].group.ml-0:hover {
    transform: translateY(-3px) !important;
    border-color: #6ab0c8 !important;
    box-shadow: 0 8px 28px rgba(90, 170, 200, 0.12) !important;
    background: #f8fcfd !important;
}

/* --- 4. 评论正文文字 --- */
div[role="presentation"].group.ml-0 .break-all {
    font-size: 15px !important;
    color: #1a4a5a !important;
    line-height: 1.7 !important;
    margin-top: 4px !important;
    margin-bottom: 8px !important;
    font-weight: 400 !important;
}

/* --- 5. 评论中的链接、引用等内部元素 --- */
div[role="presentation"].group.ml-0 .break-all a {
    color: #6ab0c8 !important;
    text-decoration: none !important;
    border-bottom: 1px dashed #b8dce8 !important;
    transition: color 0.2s ease !important;
}
div[role="presentation"].group.ml-0 .break-all a:hover {
    color: #4a8a9e !important;
    border-bottom-color: #6ab0c8 !important;
}

/* --- 6. 评论头部（用户名、时间等） --- */
div[role="presentation"].group.ml-0 .flex.items-center.gap-1 {
    font-size: 13px !important;
    color: #4a7a8a !important;
    font-weight: 500 !important;
}

/* --- 7. 评论底部操作按钮（回复、点赞等） --- */
div[role="presentation"].group.ml-0 .flex.items-center.gap-2 {
    margin-top: 6px !important;
    padding-top: 8px !important;
    border-top: 1px solid #e8f4f8 !important;
}
div[role="presentation"].group.ml-0 .flex.items-center.gap-2 button {
    background: transparent !important;
    border: none !important;
    color: #6a8a9a !important;
    font-size: 12px !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}
div[role="presentation"].group.ml-0 .flex.items-center.gap-2 button:hover {
    background: #e8f4f8 !important;
    color: #1a4a5a !important;
}

/* ================================================================
 *  深色模式适配（若父容器带有 dark 类或 data-theme="dark"）
 * ================================================================ */

[data-theme="dark"] div[role="presentation"].group.ml-0,
.dark div[role="presentation"].group.ml-0,
.dark-theme div[role="presentation"].group.ml-0 {
    background: #1a2a3a !important;
    border-color: #3a6a7a !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] div[role="presentation"].group.ml-0::before,
.dark div[role="presentation"].group.ml-0::before,
.dark-theme div[role="presentation"].group.ml-0::before {
    color: #8ac8d8 !important;
    background: #1a2a3a !important;
}

[data-theme="dark"] div[role="presentation"].group.ml-0 .break-all,
.dark div[role="presentation"].group.ml-0 .break-all,
.dark-theme div[role="presentation"].group.ml-0 .break-all {
    color: #e8f4f8 !important;
}

[data-theme="dark"] div[role="presentation"].group.ml-0 .flex.items-center.gap-1,
.dark div[role="presentation"].group.ml-0 .flex.items-center.gap-1,
.dark-theme div[role="presentation"].group.ml-0 .flex.items-center.gap-1 {
    color: #8ab8c8 !important;
}

[data-theme="dark"] div[role="presentation"].group.ml-0 .flex.items-center.gap-2 button,
.dark div[role="presentation"].group.ml-0 .flex.items-center.gap-2 button,
.dark-theme div[role="presentation"].group.ml-0 .flex.items-center.gap-2 button {
    color: #8ab8c8 !important;
}
[data-theme="dark"] div[role="presentation"].group.ml-0 .flex.items-center.gap-2 button:hover,
.dark div[role="presentation"].group.ml-0 .flex.items-center.gap-2 button:hover,
.dark-theme div[role="presentation"].group.ml-0 .flex.items-center.gap-2 button:hover {
    background: #2a4a5a !important;
    color: #e8f4f8 !important;
}

[data-theme="dark"] div[role="presentation"].group.ml-0 .break-all a,
.dark div[role="presentation"].group.ml-0 .break-all a,
.dark-theme div[role="presentation"].group.ml-0 .break-all a {
    color: #8ac8d8 !important;
    border-bottom-color: #3a6a7a !important;
}
[data-theme="dark"] div[role="presentation"].group.ml-0 .break-all a:hover,
.dark div[role="presentation"].group.ml-0 .break-all a:hover,
.dark-theme div[role="presentation"].group.ml-0 .break-all a:hover {
    color: #b8dce8 !important;
}

/* ================================================================
 *  响应式适配（手机端）
 * ================================================================ */

@media (max-width: 640px) {
    div[role="presentation"].group.ml-0 {
        padding: 14px 16px !important;
        border-radius: 14px !important;
        margin-bottom: 10px !important;
        border-width: 2px !important;
    }
    div[role="presentation"].group.ml-0::before {
        font-size: 9px !important;
        top: -4px !important;
        left: 10px !important;
    }
    div[role="presentation"].group.ml-0 .break-all {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    div[role="presentation"].group.ml-0 .flex.items-center.gap-1 {
        font-size: 12px !important;
    }
    div[role="presentation"].group.ml-0 .flex.items-center.gap-2 button {
        font-size: 11px !important;
        padding: 2px 6px !important;
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
    div[role="presentation"].group.ml-0 {
        padding: 16px 18px !important;
    }
    div[role="presentation"].group.ml-0 .break-all {
        font-size: 14.5px !important;
    }
}





/* V3 - 暴力兜底版 */

/* 用属性选择器 + class片段匹配，尽量通吃 */
[role="presentation"][class*="absolute"][class*="bottom"],
[role="presentation"][class*="z-2"] {
    background-image: url("https://i.ibb.co/27qqV68X/n6-S7-VEy8i9a-A423.jpg") !important;
    background-size: cover !important;
    background-position: center 20% !important;
    background-repeat: no-repeat !important;
    background-attachment: scroll !important;
}

/* 子元素透明化 - 用 class 片段通配 */
[role="presentation"][class*="absolute"][class*="bottom"] [class*="bg-"],
[role="presentation"][class*="z-2"] [class*="bg-"] {
    background-color: transparent !important;
    background-image: none !important;
}



/* 评论卡片 */
[role="presentation"][class*="bottom"] .group,
[role="presentation"][class*="z-2"] .group {
    background: rgba(0, 0, 0, 0.25) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    padding: 8px !important;
    margin-bottom: 6px !important;
}









/* 隐藏原始星星svg */
span.MuiRating-iconEmpty svg,
span.MuiRating-iconFilled svg {
  display: none !important;
}

/* 为每个评分图标容器设置鱼图案样式 */
span.MuiRating-iconEmpty,
span.MuiRating-iconFilled {
  position: relative;
  display: inline-flex !important;      /* 保证图标区域可被伪元素填充 */
  align-items: center;
  justify-content: center;
  width: 28px !important;              /* 固定宽度，防止塌陷 */
  height: 28px !important;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif !important;
  overflow: visible !important;        /* 防止伪元素被裁剪 */
}

/* 伪元素绘制鱼图案 */
span.MuiRating-iconEmpty::before,
span.MuiRating-iconFilled::before {
  content: "🐟";
  display: block;
  font-size: 22px;                     /* 可自行调整大小 */
  line-height: 1;
  transition: transform 0.2s ease;
}

/* 未选中的鱼：半透明+灰色调 */
span.MuiRating-iconEmpty::before {
  opacity: 0.35;
  filter: grayscale(1);
}

/* 选中的鱼：彩色并略微放大 */
span.MuiRating-iconFilled::before {
  opacity: 1;
  filter: none;
  transform: scale(1.15);
}

/* 悬停时弹跳效果 */
span.MuiRating-iconEmpty:hover::before,
span.MuiRating-iconFilled:hover::before {
  transform: scale(1.3) translateY(-2px);
}