/* * ===================================================================
 * White Album 2: System Reconstructed (WA2:SR) - 统合样式表
 * Theme: Winter Snow / Melancholic School Life
 * Version: 1.0 Final
 * ===================================================================
 */

/* ===================================================================
   ❄️ 模块零：冬日绘卷 (Global Canvas & Background)
   区域：您圈出的空白背景、页面边缘、模块间隙
   设计：冰蓝格纹、纸张颗粒、边缘光晕
   =================================================================== */

/* 1. 全局背景重构：覆盖 body 和根容器 */
body, #root, main, .MuiBox-root {
    /* [底色] 并非死白，而是带有一点点冷灰的白 */
    background-color: #F5F7FA !important;
}

/* 2. 核心纹理层：应用到 body 上，确保填满所有缝隙 */
body::before {
    content: "" !important;
    position: fixed !important; /* 关键：固定背景，不随滚动条移动 */
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -9999 !important; /* 放在世界的最底层 */
    pointer-events: none !important;

    /* [纹理堆叠] */
    background-image: 
        /* 层1：边缘暗角 (Vignette) - 模拟冬日窗边的光照 */
        radial-gradient(circle at 50% 50%, transparent 60%, rgba(176, 190, 197, 0.2) 100%),
        
        /* 层2：经典的 WA2 菱形格纹 (放大版，作为背景底纹) */
        repeating-linear-gradient(45deg, 
            rgba(144, 202, 249, 0.05) 0px, 
            rgba(144, 202, 249, 0.05) 1px, 
            transparent 1px, 
            transparent 40px
        ),
        repeating-linear-gradient(-45deg, 
            rgba(144, 202, 249, 0.05) 0px, 
            rgba(144, 202, 249, 0.05) 1px, 
            transparent 1px, 
            transparent 40px
        ),
        
        /* 层3：纸张噪点 (Noise) - 增加实物质感 */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E")
        !important;

    background-attachment: fixed !important;
    background-size: 100% 100%, 60px 60px, 60px 60px, 200px 200px !important;
}

/* 3. [夜间模式适配] 深夜雪原 */
.dark body, .dark #root, .dark main {
    background-color: #121212 !important;
}

.dark body::before {
    /* 夜间纹理 */
    background-image: 
        /* 层1：深夜暗角 */
        radial-gradient(circle at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.6) 100%),
        
        /* 层2：微弱的星光格纹 */
        repeating-linear-gradient(45deg, 
            rgba(255, 255, 255, 0.02) 0px, 
            rgba(255, 255, 255, 0.02) 1px, 
            transparent 1px, 
            transparent 40px
        ),
        repeating-linear-gradient(-45deg, 
            rgba(255, 255, 255, 0.02) 0px, 
            rgba(255, 255, 255, 0.02) 1px, 
            transparent 1px, 
            transparent 40px
        ) !important;
}

/* 4. 特殊修补：针对某些特定容器可能有的白色背景进行透明化 */
/* 这一步是为了防止某些模块自带背景色遮挡了我们的全局纹理 */
.w-full.text-token-text-primary,
[class*="react-scroll-to-bottom"] {
    background-color: transparent !important;
}

/* * -------------------------------------------------------------------
 * 模块一：全局字体与基础设定 (Winter Ink Typography)
 * 核心：宋体/衬线体优先 + 字体平滑处理 + 英文优化
 * -------------------------------------------------------------------
 */

/* 1. 字体资源导入 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap'); /* 代码字体 */

/* 2. 全局字体策略：书卷气 */
/* [慎重修改] 使用 body 和 #root 控制全局，避免使用 * 导致图标损坏 */
body, #root, .prose {
    /* 字体栈逻辑：
       1. Georgia/Times: 确保英文和数字有经典的衬线质感 (2007 Web Vibe)
       2. Noto Serif SC: 现代高清屏幕下的最佳宋体阅读体验
       3. SimSun/Songti: 老式屏幕/系统原生宋体兜底
    */
    font-family: 'Georgia', 'Times New Roman', 'Noto Serif SC', 'Source Han Serif SC', 'SimSun', 'Songti SC', serif !important;
    
    /* [阅读体验] 稍微增加字间距，提升文学感 */
    letter-spacing: 0.03em !important;
    
    /* [渲染优化] 让字体看起来更"冷"、更细致 (Mac/iOS/部分高分屏生效) */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    
    /* 基础字重 */
    font-weight: 400 !important;
}

/* 3. 交互组件字体修正：统一为衬线体 */
/* 为了配合【模块五】的手账/短信草稿风格，输入框和按钮也回归宋体 */
input, textarea, select, button, .MuiButtonBase-root {
    font-family: 'Georgia', 'Noto Serif SC', 'SimSun', serif !important;
}

/* 4. 代码块：打字机风格 */
/* 2007年的代码通常是 Courier New，这里用 Fira Code 提升可读性但保持等宽 */
code, pre, .hljs, .language-* {
    font-family: 'Fira Code', 'Consolas', 'Courier New', monospace !important;
    font-size: 0.9em !important; /* 代码通常比正文小一点 */
    font-variant-ligatures: none !important; /* 禁用连字，保持复古感 */
}

/* 5. 特殊修补：防止图标字体被覆盖 */
/* 排除常见的图标类名，防止变成方块 */
[class*="icon"], [class*="fa-"], .material-icons, i {
    font-family: initial !important; /* 恢复默认或由类名控制 */
    letter-spacing: normal !important;
}

/* * -------------------------------------------------------------------
 * 模块二：主界面背景与纹理 (Day & Night) - WA2 经典重构版
 * 风格：左侧装饰条 / 菱形纹理 / 沉浸式文本框
 * -------------------------------------------------------------------
 */

/* 1. 聊天气泡基础结构：重置所有默认样式 */
.group .bg-gray-100\/90 {
    position: relative !important;
    background: transparent !important; /* 核心：让伪元素接管背景 */
    border: none !important;
    box-shadow: none !important;
    padding: 35px 45px 35px 50px !important; /* 左侧留宽给装饰条 */
    overflow: hidden !important;
    margin: 1.5em auto !important;
    max-width: 960px !important; /* 稍微收窄，更有文本框感 */
}

/* 2. [背景层] 雪原网格与左侧装饰条 */
.group .bg-gray-100\/90::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 0 !important; /* 放在最底层 */
    pointer-events: none;
    
    /* [日间背景] 纯净雪白 */
    background-color: #FAFAFA !important;
    
    /* [核心纹理] 经典的菱形交叉网格 (Diamond Grid) */
    background-image: 
        /* 左侧装饰条：日间为温暖的夕阳橙 (FFB74D) */
        linear-gradient(to right, #FFB74D 6px, transparent 6px),
        /* 网格纹理 */
        repeating-linear-gradient(45deg, 
            rgba(176, 190, 197, 0.15) 0px, 
            rgba(176, 190, 197, 0.15) 1px, 
            transparent 1px, 
            transparent 15px
        ), 
        repeating-linear-gradient(-45deg, 
            rgba(176, 190, 197, 0.15) 0px, 
            rgba(176, 190, 197, 0.15) 1px, 
            transparent 1px, 
            transparent 15px
        ) !important;
        
    background-size: 100% 100%, 30px 30px, 30px 30px !important;
    background-repeat: no-repeat, repeat, repeat !important;
    
    /* [边框] 细致的冷灰边框 */
    border: 1px solid #CFD8DC !important;
    border-radius: 2px !important; /* 锐利的直角感 */
    
    /* [阴影] 浮起感 */
    box-shadow: 
        0 4px 15px rgba(0,0,0,0.05), /* 外部柔和阴影 */
        inset 0 0 20px rgba(255,255,255,0.8) !important; /* 内部高光，增加通透感 */
        
    transition: all 0.3s ease;
}

/* 3. [夜间模式] 深夜独白 (Midnight Monologue) */
.dark .group .bg-gray-100\/90::before {
    /* [夜间背景] 深邃的蓝灰 */
    background-color: #1c2226 !important; /* 使用更高级的深色，非纯黑 */
    
    background-image: 
        /* 左侧装饰条：夜间为冷艳的深紫 (Deep Violet) */
        linear-gradient(to right, #5E35B1 6px, transparent 6px),
        /* 网格纹理：极淡的白线 */
        repeating-linear-gradient(45deg, 
            rgba(255, 255, 255, 0.03) 0px, 
            rgba(255, 255, 255, 0.03) 1px, 
            transparent 1px, 
            transparent 15px
        ), 
        repeating-linear-gradient(-45deg, 
            rgba(255, 255, 255, 0.03) 0px, 
            rgba(255, 255, 255, 0.03) 1px, 
            transparent 1px, 
            transparent 15px
        ) !important;
        
    border-color: #37474F !important;
    box-shadow: 
        0 4px 20px rgba(0,0,0,0.3), 
        inset 0 0 30px rgba(0,0,0,0.2) !important; /* 内部压暗 */
}

/* 4. [装饰水印] 右下角的巨大雪花 (Watermark) */
.group .bg-gray-100\/90::after {
    content: '❄' !important; 
    position: absolute !important;
    bottom: -30px !important;
    right: -20px !important;
    
    font-size: 160px !important; /* 巨大化 */
    line-height: 1 !important;
    font-family: serif !important; /* 确保雪花形状优雅 */
    
    z-index: 0 !important;
    pointer-events: none !important;
    
    /* 颜色：极淡的冰蓝 */
    color: #E1F5FE !important;
    opacity: 0.4 !important; /* 若隐若现 */
    
    transform: rotate(15deg) !important;
    filter: blur(1px); /* 轻微模糊，增加景深感 */
}

.dark .group .bg-gray-100\/90::after {
    color: #37474F !important;
    opacity: 0.2 !important;
}

/* 5. [内容层级修正] 确保文字在背景之上 */
.group .bg-gray-100\/90 > * {
    position: relative !important;
    z-index: 2 !important;
}

/* * -------------------------------------------------------------------
 * 模块三：排版与文字 (Digital Novel Reader 2007)
 * 风格：宋体阅读器 / 邮件引用 / 像素风列表
 * -------------------------------------------------------------------
 */

/* 1. 全局文字基调：电子宋体 */
.group .bg-gray-100\/90 {
    /* [字体] 强制使用宋体，还原 Galgame/早期手机阅读质感 */
    font-family: 'SimSun', 'Songti SC', 'Noto Serif SC', serif !important;
    
    /* [颜色] 并不是纯黑，而是像墨水一样的深灰蓝 */
    color: #263238 !important; 
    
    /* [排版] 增加行高，模拟小说排版 */
    line-height: 2.0 !important; 
    font-size: 16px !important;
    letter-spacing: 0.5px !important;
    text-align: justify !important; /* 两端对齐 */
}

/* 夜间模式：银色文字 */
.dark .group .bg-gray-100\/90 {
    color: #CFD8DC !important;
    text-shadow: 0 0 1px rgba(0,0,0,0.5) !important; /* 增加一点锐度 */
}

/* 2. 标题样式 (H1-H3)：章节分割线 */
.group .bg-gray-100\/90 h1, 
.group .bg-gray-100\/90 h2, 
.group .bg-gray-100\/90 h3 {
    font-family: 'Microsoft YaHei', sans-serif !important; /* 标题用黑体，区分正文 */
    color: #37474F !important;
    font-weight: 800 !important;
    margin-top: 25px !important;
    margin-bottom: 15px !important;
    padding-left: 12px !important;
    
    /* 左侧装饰：像手机UI的分类标签 */
    border-left: 4px solid #90CAF9 !important; 
    position: relative !important;
}

/* 标题下的虚线分割 */
.group .bg-gray-100\/90 h1::after,
.group .bg-gray-100\/90 h2::after,
.group .bg-gray-100\/90 h3::after {
    content: '';
    display: block;
    width: 100%;
    height: 1px;
    background-image: linear-gradient(to right, #CFD8DC 50%, transparent 50%); /* 虚线 */
    background-size: 8px 1px;
    margin-top: 8px;
}

/* 夜间标题 */
.dark .group .bg-gray-100\/90 h1, 
.dark .group .bg-gray-100\/90 h2, 
.dark .group .bg-gray-100\/90 h3 {
    color: #B0BEC5 !important;
    border-left-color: #5C6BC0 !important; /* 夜间变紫 */
}

/* 3. 强调文本 (Bold/Strong)：改为“关键词高亮” */
/* 不仅仅是加粗，而是给字加一点颜色，像游戏中提到的关键线索 */
.group .bg-gray-100\/90 strong,
.group .bg-gray-100\/90 b {
    color: #01579B !important; /* 深蓝 */
    font-weight: 900 !important;
    background: linear-gradient(to top, rgba(179, 229, 252, 0.3) 0%, rgba(179, 229, 252, 0.3) 40%, transparent 40%) !important; /* 底部高光笔 */
}
.dark .group .bg-gray-100\/90 strong,
.dark .group .bg-gray-100\/90 b {
    color: #81D4FA !important;
    background: none !important; /* 夜间去掉高光笔，防止刺眼 */
}

/* 4. 引用块 (Blockquote)：转发邮件 (Fwd: Mail) */
.group .bg-gray-100\/90 blockquote {
    margin: 15px 0 !important;
    padding: 10px 15px !important;
    
    /* 样式：模拟旧手机的灰色引用框 */
    background: #F5F5F5 !important;
    border-left: 3px solid #B0BEC5 !important;
    border-radius: 0 4px 4px 0 !important;
    
    color: #607D8B !important;
    font-family: 'SimSun', serif !important;
    font-style: italic !important;
    font-size: 0.95em !important;
}
/* 引用块前的图标 */
.group .bg-gray-100\/90 blockquote::before {
    content: "📩 Re:";
    display: block;
    font-size: 0.8em;
    font-weight: bold;
    color: #90A4AE;
    margin-bottom: 5px;
}

.dark .group .bg-gray-100\/90 blockquote {
    background: #263238 !important;
    border-left-color: #546E7A !important;
    color: #90A4AE !important;
}

/* 5. 列表 (List)：像素点风格 */
.group .bg-gray-100\/90 ul,
.group .bg-gray-100\/90 ol {
    padding-left: 20px !important;
    margin: 10px 0 !important;
}
.group .bg-gray-100\/90 li {
    margin-bottom: 5px !important;
    list-style-type: square !important; /* 方块点，更有像素感 */
    color: #455A64 !important;
}
.dark .group .bg-gray-100\/90 li {
    color: #B0BEC5 !important;
}

/* 6. 链接 (Link)：经典蓝链 */
.group .bg-gray-100\/90 a {
    color: #1976D2 !important;
    text-decoration: none !important;
    border-bottom: 1px dotted #1976D2 !important;
    transition: all 0.2s;
}
.group .bg-gray-100\/90 a:hover {
    background-color: #E3F2FD !important;
    color: #0D47A1 !important;
    border-bottom-style: solid !important;
}

/* 7. 文本选中 (Selection)：功能机反色效果 */
.group .bg-gray-100\/90 ::selection {
    background: #37474F !important; /* 深色背景 */
    color: #FFFFFF !important;      /* 白色文字 */
}

/* * -------------------------------------------------------------------
 * 模块四：状态栏与折叠区 (Flip Phone 2007 Edition)
 * 风格：翻盖手机UI / 液晶屏质感 / 拟物化按钮
 * -------------------------------------------------------------------
 */

/* 1. 外层容器：模拟手机屏幕的内嵌感 */
.group .bg-gray-100\/90 details {
    /* 液晶屏底色：极淡的冷灰/青色 */
    background: #F2F4F6 !important; 
    /* 内嵌边框：模拟屏幕边缘的凹陷感 */
    border: 1px solid #B0BEC5 !important;
    border-radius: 2px !important; /* 手机UI通常圆角很小 */
    margin: 15px auto !important;
    padding: 2px !important; /* 留出一点边距给外框 */
    width: 100% !important;
    position: relative !important;
    z-index: 3 !important;
    /* 移除磨砂，改为实体质感 */
    backdrop-filter: none !important;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.05) !important;
}

/* 夜间模式：深色液晶屏 */
.dark .group .bg-gray-100\/90 details {
    background: #18191A !important;
    border-color: #37474F !important;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5) !important;
}

/* 2. 标题栏 Summary：高光水晶按钮 */
.group .bg-gray-100\/90 summary {
    font-family: 'SimSun', 'MS Song', serif !important; /* 回归宋体/像素感 */
    font-size: 1.1em !important;
    font-weight: bold !important;
    color: #FFFFFF !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
    outline: none !important;
    list-style: none;
    
    /* [核心质感] 2007年经典的水晶按钮渐变 */
    background: linear-gradient(to bottom, #546E7A 0%, #37474F 50%, #263238 51%, #37474F 100%) !important;
    
    /* 边框：模拟凸起按钮 */
    border: 1px solid #263238 !important;
    border-top: 1px solid #78909C !important; /* 顶部高光边 */
    border-radius: 2px !important;
    
    /* 文字阴影：刻蚀感 */
    text-shadow: 1px 1px 0 #000000 !important;
    transition: all 0.2s;
}

/* 悬停效果：按钮发光 */
.group .bg-gray-100\/90 summary:hover {
    background: linear-gradient(to bottom, #78909C 0%, #546E7A 50%, #455A64 51%, #546E7A 100%) !important;
}

/* 夜间模式标题栏：深蓝水晶 */
.dark .group .bg-gray-100\/90 summary {
    background: linear-gradient(to bottom, #424242 0%, #212121 50%, #000000 51%, #212121 100%) !important;
    border-color: #000 !important;
    border-top-color: #616161 !important;
}

/* 去掉默认三角 */
.group .bg-gray-100\/90 summary::-webkit-details-marker { display: none; }

/* 3. 图标替换：替换掉不协调的DVD，改为手机UI风格 */
/* 选用 '✉' (邮件) 或 '✦' (星/重点) 或 '📂' (文件夹) */
/* 这里推荐使用 '✦' 或 '❖'，更有WA2那种冬日唯美且像UI列表符的感觉 */
.group .bg-gray-100\/90 summary::before {
    content: '❖' !important; /* 菱形花纹，既像雪花又像UI列表头 */
    font-size: 1.1em;
    margin-right: 8px;
    display: inline-block;
    color: #FFB74D !important; /* 橙色高亮，呼应黄昏 */
    text-shadow: 0 0 5px rgba(255, 183, 77, 0.8); /* 霓虹光晕 */
    transition: transform 0.3s ease;
}

/* 展开时图标变化 */
.group .bg-gray-100\/90 details[open] > summary::before {
    transform: rotate(90deg) !important;
    color: #4FC3F7 !important; /* 展开变蓝，呼应冬日/已读 */
    text-shadow: 0 0 5px rgba(79, 195, 247, 0.8);
}

/* 4. 内容区域：电子扫描线纹理 */
.group .bg-gray-100\/90 details > div {
    padding: 15px !important;
    
    /* 背景：极淡的横线纹理，模拟低分辨率屏幕或信纸 */
    background-color: #F8F9FA !important;
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 19px,
        #E0E0E0 20px
    ) !important;
    background-size: 100% 20px !important;
    
    color: #37474F !important;
    border: 1px solid #CFD8DC !important;
    border-top: none !important;
    
    font-family: 'SimSun', 'Microsoft YaHei', sans-serif !important;
    font-size: 0.95em !important;
    line-height: 20px !important; /* 对齐背景横线 */
}

/* 夜间模式内容区 */
.dark .group .bg-gray-100\/90 details > div {
    background-color: #121212 !important;
    /* 夜间横线更暗 */
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 19px,
        #333333 20px
    ) !important;
    color: #B0BEC5 !important;
    border-color: #37474F !important;
}

/* 5. 表格优化：像素边框感 */
.group .bg-gray-100\/90 table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.group .bg-gray-100\/90 th, .group .bg-gray-100\/90 td {
    border: 1px dotted #90A4AE !important; /* 点状边框，更有电子感 */
    padding: 6px 8px !important;
    font-family: 'SimSun', monospace !important; /* 表格强制宋体/等宽 */
    font-size: 0.9em !important;
}

.group .bg-gray-100\/90 th {
    background-color: rgba(0,0,0,0.05) !important;
    color: #263238 !important;
}
.dark .group .bg-gray-100\/90 th {
    background-color: rgba(255,255,255,0.1) !important;
    color: #ECEFF1 !important;
    border-color: #546E7A !important;
}
.dark .group .bg-gray-100\/90 td {
    border-color: #546E7A !important;
}

/* * -------------------------------------------------------------------
 * 模块五：UI 组件 (Input, Buttons, Scrollbar)
 * 风格：短信草稿箱 / 水晶实体按键 / 冰棱滚动条
 * -------------------------------------------------------------------
 */

/* 1. 输入框：未发送的短信 (Draft Box) */
#ai-chat-input, 
textarea {
    /* [背景] 模拟信纸或低分屏的横线纹理 */
    background-color: #FAFAFA !important;
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 23px,
        #ECEFF1 24px
    ) !important;
    background-size: 100% 24px !important;
    
    /* [边框] 模拟屏幕内嵌的凹陷感 */
    border: 1px solid #CFD8DC !important;
    border-top: 2px solid #B0BEC5 !important; /* 顶部加深，制造阴影 */
    border-left: 4px solid #90CAF9 !important; /* 左侧改为冰蓝色，象征冬日 */
    border-radius: 2px !important;
    
    color: #37474F !important;
    font-family: 'SimSun', 'Microsoft YaHei', sans-serif !important;
    line-height: 24px !important; /* 对齐背景横线 */
    
    /* [内阴影] 屏幕的厚度 */
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.06) !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 夜间模式：深夜的手机背光 */
.dark #ai-chat-input, 
.dark textarea {
    background-color: #1c2226 !important; /* 极深的蓝黑 */
    /* 夜间横线更隐晦 */
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 23px,
        #263238 24px
    ) !important;
    
    border-color: #37474F !important;
    border-top-color: #212121 !important;
    border-left-color: #5C6BC0 !important; /* 夜间左侧变深紫蓝 */
    
    color: #ECEFF1 !important;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.5) !important;
}

/* 输入框聚焦：屏幕唤醒高亮 */
#ai-chat-input:focus, 
textarea:focus {
    background-color: #FFFFFF !important;
    /* 聚焦时边框发光，像手机背光亮起 */
    border-color: #4FC3F7 !important;
    box-shadow: 
        inset 0 2px 4px rgba(0,0,0,0.05), 
        0 0 8px rgba(79, 195, 247, 0.4) !important; /* 外部辉光 */
    outline: none !important;
}

/* 2. 按钮：2007水晶键盘 (Crystal Keypad) */
/* 覆盖所有通用按钮及功能按钮 */
.flex.items-center.gap-2.pb-2 > button,
.MuiButtonBase-root.MuiButton-root,
button.btn {
    /* [核心] 拟物化水晶质感渐变 */
    background: linear-gradient(to bottom, #FFFFFF 0%, #E3F2FD 50%, #BBDEFB 51%, #E3F2FD 100%) !important;
    
    color: #263238 !important;
    /* 模拟实体按键边缘 */
    border: 1px solid #90CAF9 !important;
    border-bottom: 2px solid #64B5F6 !important; /* 底部加厚，增加立体感 */
    border-radius: 4px !important;
    
    /* 文字刻蚀感 */
    font-weight: 700 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.8) !important;
    text-transform: none !important;
    letter-spacing: 0.5px;
    
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    transition: all 0.1s ease-out; /* 快速响应，像物理按键 */
    position: relative;
    overflow: hidden;
}

/* 夜间模式按钮：深海黑曜石 */
.dark .flex.items-center.gap-2.pb-2 > button,
.dark .MuiButtonBase-root.MuiButton-root,
.dark button.btn {
    background: linear-gradient(to bottom, #546E7A 0%, #37474F 50%, #263238 51%, #37474F 100%) !important;
    color: #E1F5FE !important;
    border-color: #263238 !important;
    border-bottom-color: #102027 !important;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.5) !important;
}

/* [交互] 按钮悬停：高光流转 */
.flex.items-center.gap-2.pb-2 > button:hover,
.MuiButtonBase-root.MuiButton-root:hover,
button.btn:hover {
    /* 变亮 */
    background: linear-gradient(to bottom, #FFFFFF 0%, #E1F5FE 50%, #90CAF9 51%, #E1F5FE 100%) !important;
    color: #01579B !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(3, 169, 244, 0.3) !important;
    border-color: #4FC3F7 !important;
}

/* [交互] 按钮按下：物理阻尼感 (Click) */
.flex.items-center.gap-2.pb-2 > button:active,
.MuiButtonBase-root.MuiButton-root:active,
button.btn:active {
    transform: translateY(2px) !important; /* 真实下沉 */
    border-bottom-width: 1px !important; /* 底部厚度消失 */
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.2) !important; /* 变为内阴影 */
    background: #E1F5FE !important; /* 去掉高光，变平 */
}

/* 3. 滚动条：冻结的冰棱 (Frozen Scrollbar) */
::-webkit-scrollbar { 
    width: 10px !important; 
    height: 10px !important;
}

/* 滑块：冰蓝渐变 */
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #CFD8DC 0%, #90A4AE 100%) !important;
    border: 2px solid #F5F5F5 !important; /* 与背景隔开 */
    border-radius: 5px !important;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.5);
}

/* 悬停滑块 */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #90CAF9 0%, #42A5F5 100%) !important; /* 激活变为冰蓝色 */
    border-color: #FAFAFA !important;
}

/* 夜间模式滚动条 */
.dark ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #546E7A 0%, #37474F 100%) !important;
    border-color: #121212 !important;
}
.dark ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #5C6BC0 0%, #3949AB 100%) !important;
}

/* 轨道：完全透明 */
::-webkit-scrollbar-track { 
    background: transparent !important; 
}

/* 4. 特殊补丁：发送按钮 (Send Button) 的强化 */
/* 通常发送按钮会有特殊的颜色，这里给它一个“通话键”的绿色或“确认键”的橙色质感 */
#ai-send-button,
button[aria-label="Send"] {
    background: linear-gradient(to bottom, #FFF3E0 0%, #FFE0B2 50%, #FFB74D 51%, #FFE0B2 100%) !important;
    border-color: #FFB74D !important;
    border-bottom-color: #F57C00 !important;
    color: #E65100 !important;
}
#ai-send-button:hover,
button[aria-label="Send"]:hover {
    box-shadow: 0 0 10px rgba(255, 167, 38, 0.5) !important;
}

/* * -------------------------------------------------------------------
 * 模块六：选项卡美化 - 决意之刻 (Winter Decision / Phone Menu)
 * 风格：LCD菜单条 / 选中高亮 / 动态图标
 * -------------------------------------------------------------------
 */

.wa2-opt {
    /* [背景] 模拟未选中的手机菜单：灰白 + 扫描线 */
    background-color: #F5F7FA !important;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(0,0,0,0.02) 11px
    ) !important;
    
    /* [边框] 水晶凸起感 */
    border: 1px solid #CFD8DC !important;
    border-top: 1px solid #FFFFFF !important; /* 顶部高光 */
    border-bottom: 2px solid #B0BEC5 !important; /* 底部阴影，增加厚度 */
    border-radius: 4px !important;
    
    /* 排版 */
    padding: 12px 15px 12px 40px !important; /* 左侧留出空间给图标 */
    margin: 10px 0 !important;
    position: relative !important;
    overflow: hidden !important; /* 限制流光 */
    
    /* 字体：宋体，加粗，深色 */
    color: #455A64 !important;
    font-family: 'SimSun', 'Microsoft YaHei', serif !important;
    font-size: 1.05em !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 0 #FFFFFF !important; /* 刻蚀感 */
    
    /* 交互 */
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
}

/* [装饰] 左侧的隐形图标 (未悬停时是灰色的点) */
.wa2-opt::before {
    content: '♪' !important; /* 音符，或者是 '❄' */
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) scale(0.8) !important;
    color: #B0BEC5 !important; /* 默认灰色 */
    font-size: 1.2em !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; /* 弹性动画 */
    opacity: 0.5 !important;
}

/* -----------------------------------------------------------
   🖱️ 悬停状态 (Hover)：高亮菜单条
   ----------------------------------------------------------- */
.wa2-opt:hover {
    /* [背景] 激活为冬日蓝渐变 (Galgame 经典选色) */
    background: linear-gradient(90deg, #E1F5FE 0%, #B3E5FC 100%) !important;
    border-color: #4FC3F7 !important;
    border-bottom-color: #039BE5 !important; /* 底部变深蓝 */
    
    color: #01579B !important; /* 文字变深蓝 */
    text-shadow: 0 0 5px rgba(255,255,255,0.8) !important;
    
    /* 位移 */
    transform: translateX(4px) !important;
    box-shadow: 0 4px 12px rgba(3, 169, 244, 0.3) !important;
}

/* 悬停时图标动画：变成彩色并弹跳 */
.wa2-opt:hover::before {
    content: '♫' !important; /* 变成双音符 */
    color: #0288D1 !important;
    transform: translateY(-50%) scale(1.2) rotate(-10deg) !important; /* 放大且旋转 */
    opacity: 1 !important;
    left: 14px !important; /* 稍微右移 */
}

/* [特效] 悬停时光扫过 (Sweep Effect) */
.wa2-opt::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 50% !important;
    height: 100% !important;
    background: linear-gradient(
        to right,
        transparent,
        rgba(255,255,255,0.6),
        transparent
    ) !important;
    transform: skewX(-20deg) !important;
    transition: none !important;
}
.wa2-opt:hover::after {
    left: 200% !important;
    transition: left 0.5s ease-out !important;
}

/* -----------------------------------------------------------
   👇 点击状态 (Active)：物理反馈
   ----------------------------------------------------------- */
.wa2-opt:active {
    transform: translateX(4px) translateY(2px) !important; /* 下沉 */
    border-bottom-width: 1px !important; /* 厚度消失 */
    background: #81D4FA !important; /* 颜色更深 */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1) !important; /* 内阴影 */
}

/* -----------------------------------------------------------
   🌙 夜间模式适配
   ----------------------------------------------------------- */
.dark .wa2-opt {
    /* 深色菜单底 */
    background-color: #263238 !important;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255,255,255,0.03) 11px
    ) !important;
    
    border-color: #37474F !important;
    border-top-color: #546E7A !important;
    border-bottom-color: #102027 !important;
    
    color: #B0BEC5 !important;
    text-shadow: 0 -1px 0 #000000 !important;
}

.dark .wa2-opt:hover {
    /* 夜间高亮：深邃的星空蓝 */
    background: linear-gradient(90deg, #1E3A8A 0%, #1565C0 100%) !important;
    border-color: #64B5F6 !important;
    color: #E3F2FD !important;
}

.dark .wa2-opt:hover::before {
    color: #90CAF9 !important;
}

/* * -------------------------------------------------------------------
 * 模块七：移动端适配 (Mobile)
 * -------------------------------------------------------------------
 */
@media screen and (max-width: 768px) {
    .group .bg-gray-100\/90 { padding: 25px 20px !important; }
    
    /* 缩小右下角水印 */
    .group .bg-gray-100\/90::after {
        font-size: 80px !important;
        bottom: 0 !important;
    }
    
    .group .bg-gray-100\/90 h1 { font-size: 1.5em !important; }
    .group .bg-gray-100\/90 p { font-size: 1.1em !important; }
    
    /* 选项按钮在手机上更紧凑 */
    .wa2-opt { padding: 10px 12px !important; font-size: 1em !important; }
}

/* * -------------------------------------------------------------------
 * 模块七：加载动画 (Loading) - 图片外链版
 * -------------------------------------------------------------------
 */

/* 1. 隐藏原本的“三个点”动画 */
.style_dot-flashing__8L91Q { 
    display: none !important; 
}

/* 2. 重塑加载容器 */
.flex.items-center.justify-center.w-6.h-5 {
    width: 100% !important; 
    height: auto !important; 
    max-width: 600px !important; /*稍微限制一下宽度，太宽会糊*/
    aspect-ratio: 2 / 1 !important; /* 保持图片比例 */
    padding: 0 !important;
    
    /* 背景：深邃的黑，衬托动画 */
    background: radial-gradient(circle, #1A1A1A 0%, #000000 100%) !important;
    
    /* 边框：改为钢琴漆黑 */
    border: 4px solid #000000 !important; 
    border-radius: 4px !important;
    
    /* [关键修改] 发光效果：改为冰蓝色以匹配 WA2 主题 */
    /* 如果想要原来的金色，把 41, 182, 246 改回 255, 179, 71 即可 */
    box-shadow: 
        0 0 20px rgba(41, 182, 246, 0.6), 
        inset 0 0 40px rgba(41, 182, 246, 0.2) !important;
        
    position: relative !important; 
    overflow: hidden !important;
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important;
    margin: 10px auto !important;
}

/* 3. 注入你的外链动图 */
.flex.items-center.justify-center.w-6.h-5::before {
    content: '' !important; 
    width: 100% !important; 
    height: 100% !important;
    position: absolute !important; 
    top: 0 !important; left: 0 !important;
    
    /* 你的原版外链 */
    background-image: url('https://img.cdn1.vip/i/6911fc3e0fd53_1762786366.webp') !important;
    
    background-size: contain !important; /* 改为 contain 防止被裁切 */
    background-repeat: no-repeat !important;
    background-position: center !important; 
    z-index: 5 !important;
    
    /* [关键修改] 图片投影：改为冰蓝色 */
    filter: drop-shadow(0 0 10px rgba(41, 182, 246, 0.5)) !important;
}

/* * -------------------------------------------------------------------
 * 模块八：BBS 论坛美化 - 峰城大附属内网 (Aoi-Net Style)
 * -------------------------------------------------------------------
 */

/* 1. BBS 容器整体 */
.group .bg-gray-100\/90 .bbs-container {
    background: transparent !important;
    border: 1px solid #CFD8DC !important;
    border-radius: 4px !important;
    margin: 15px auto !important;
    padding: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
}
.dark .group .bg-gray-100\/90 .bbs-container {
    border-color: #37474F !important;
}

/* 2. BBS 标题栏 (Summary) - 模仿浏览器标题条 */
.group .bg-gray-100\/90 .bbs-container > summary {
    font-family: 'Microsoft YaHei', sans-serif !important;
    font-size: 1.1em !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
    outline: none !important;
    list-style: none;
    
    background: #0277BD !important; /* 论坛经典蓝 */
    border-left: 4px solid #B3E5FC !important; /* 浅蓝点缀 */
    transition: background 0.2s ease;
}
.dark .group .bg-gray-100\/90 .bbs-container > summary {
    background: #1565C0 !important; /* 夜间深蓝 */
    border-left-color: #546E7A !important;
}

.group .bg-gray-100\/90 .bbs-container > summary:hover {
    background: #0288D1 !important; /* 悬停变亮 */
}

/* 图标：改为地球仪 🌐 或 信号 📶 */
.group .bg-gray-100\/90 .bbs-container > summary::before {
    content: '🌐' !important;
    font-size: 1.1em;
    margin-right: 8px;
    transition: transform 0.3s;
    display: inline-block;
}
.group .bg-gray-100\/90 .bbs-container[open] > summary::before {
    transform: rotate(180deg);
}
.group .bg-gray-100\/90 .bbs-container > summary::-webkit-details-marker { display: none; }

/* 3. BBS 内容区域 */
.group .bg-gray-100\/90 .bbs-content {
    padding: 10px 15px !important;
    background: #FAFAFA !important; /* 纯白底 */
    border-top: 1px solid #E0E0E0 !important;
    color: #37474F !important;
    font-family: 'Microsoft YaHei', sans-serif !important;
    font-size: 0.95em !important;
}
.dark .group .bg-gray-100\/90 .bbs-content {
    background: #1A2332 !important; /* 夜间深蓝底 */
    color: #B0BEC5 !important;
    border-top-color: #37474F !important;
}

/* 4. 版块标题 (Section Header) */
.group .bg-gray-100\/90 .bbs-section {
    font-size: 1.05em !important;
    font-weight: 800 !important;
    color: #0277BD !important; /* 标题蓝 */
    border-bottom: 2px solid #E1F5FE !important;
    padding-bottom: 5px !important;
    margin: 15px 0 10px 0 !important;
}
.dark .group .bg-gray-100\/90 .bbs-section {
    color: #90CAF9 !important;
    border-bottom-color: #37474F !important;
}

/* 5. 帖子列表项 */
.group .bg-gray-100\/90 .bbs-thread-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.group .bg-gray-100\/90 .bbs-thread {
    padding: 6px 0 !important;
    border-bottom: 1px dashed #CFD8DC !important; /* 虚线分隔 */
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}
.dark .group .bg-gray-100\/90 .bbs-thread {
    border-bottom-color: #455A64 !important;
}

/* 6. [核心] 多彩标签 (Tags) - 找回丢失的颜色 */
.group .bg-gray-100\/90 .bbs-tag {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 700;
    font-size: 0.8em;
    margin-right: 8px;
    min-width: 32px;
    text-align: center;
    color: #FFFFFF !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1); /* 轻微立体感 */
}

/* 颜色定义 (Day Mode) */
.group .bg-gray-100\/90 .tag-pinned { background: #37474F !important; } /* 置顶：深黑 */
.group .bg-gray-100\/90 .tag-hot    { background: #E91E63 !important; } /* 热帖：玫红 */
.group .bg-gray-100\/90 .tag-new    { background: #43A047 !important; } /* 新帖：翠绿 */
.group .bg-gray-100\/90 .tag-academic { background: #5D4037 !important; } /* 学术：褐色 */
.group .bg-gray-100\/90 .tag-gossip { background: #7B1FA2 !important; } /* 八卦：紫色 */
.group .bg-gray-100\/90 .tag-chat   { background: #78909C !important; } /* 闲聊：蓝灰 */
.group .bg-gray-100\/90 .tag-recruit{ background: #0288D1 !important; } /* 招募：亮蓝 */

/* 颜色定义 (Night Mode) - 稍微降低亮度，避免刺眼 */
.dark .group .bg-gray-100\/90 .tag-pinned { background: #263238 !important; }
.dark .group .bg-gray-100\/90 .tag-hot    { background: #C2185B !important; }
.dark .group .bg-gray-100\/90 .tag-new    { background: #2E7D32 !important; }
.dark .group .bg-gray-100\/90 .tag-academic { background: #4E342E !important; }
.dark .group .bg-gray-100\/90 .tag-gossip { background: #6A1B9A !important; }
.dark .group .bg-gray-100\/90 .tag-chat   { background: #546E7A !important; }
.dark .group .bg-gray-100\/90 .tag-recruit{ background: #0277BD !important; }

/* 7. 帖子标题与作者 */
.group .bg-gray-100\/90 .bbs-title {
    font-weight: 700 !important;
    color: #263238 !important;
    margin-right: 5px;
}
.dark .group .bg-gray-100\/90 .bbs-title {
    color: #ECEFF1 !important;
}

.group .bg-gray-100\/90 .bbs-author {
    font-size: 0.85em !important;
    color: #90A4AE !important; /* 浅灰色 */
    margin-left: auto; /* 作者名右对齐 */
}
.dark .group .bg-gray-100\/90 .bbs-author {
    color: #607D8B !important;
}

/* * -------------------------------------------------------------------
 * 模块九：补丁 - 标题栏交互 (Summary Hover) - 内敛钢琴漆版
 * -------------------------------------------------------------------
 */

/* [日间模式] 悬停效果 */
.group .bg-gray-100\/90 summary:hover {
    /* 1. 背景：不再变色，而是增加一种“光泽感” (从左到右的微弱渐变) */
    background: linear-gradient(90deg, #455A64, #37474F) !important;
    
    /* 2. 边框：左侧装饰条变亮，这是主要的反馈 */
    border-left-color: #4FC3F7 !important; /* 冰蓝色变亮 */
    
    /* 3. 阴影：去掉发光，改为极淡的投影，让它轻轻浮起 */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15) !important;
    
    /* 4. 文字：去掉光晕，保持纯净的亮白，增加一点点字间距表示呼吸感 */
    text-shadow: none !important;
    color: #FFFFFF !important;
    letter-spacing: 1px !important; /* 微微舒展 */
    
    /* 5. 动效：不再放大(scale)，而是向右轻微移动，模拟被按下的琴键 */
    transform: translateX(4px) !important;
    z-index: 10 !important;
}

/* [夜间模式] 悬停效果 */
.dark .group .bg-gray-100\/90 summary:hover {
    /* 背景：提亮一点点 */
    background: linear-gradient(90deg, #37474F, #263238) !important;
    
    /* 左侧条：紫色变亮 */
    border-left-color: #CE93D8 !important; 
    
    /* 阴影：非常克制的微光，仅用于区分背景 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    
    /* 动效 */
    transform: translateX(4px) !important;
}

/* 保持丝滑过渡 */
.group .bg-gray-100\/90 summary {
    transition: all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1) !important;
}

/* * ===================================================================
 * Kyocera W51K Interface Style
 * Theme: 2007 Winter / Cold LCD
 * Class Constraint: Max 3 chars
 * ===================================================================
 */

/* 1. 手机外壳容器 (.ph = Phone) */
.ph {
    /* 外壳质感：磨砂黑 */
    background: #121212 !important;
    border: 1px solid #37474F !important;
    border-radius: 4px !important; /* 微圆角，硬朗风格 */
    border-left: 4px solid #00E5FF !important; /* 京瓷冰蓝侧边条 */
    margin: 1.5em auto !important;
    max-width: 450px !important; /* 限制宽度，模拟手持设备 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden !important;
    font-family: 'Courier New', 'Microsoft YaHei', monospace !important; /* 等宽字体模拟数码感 */
}

/* 2. 触发器/外屏 (.ph summary) */
.ph > summary {
    background: linear-gradient(90deg, #1c2529, #121212) !important;
    color: #00E5FF !important; /* 信号蓝 */
    padding: 10px 15px !important;
    font-size: 0.9em !important;
    font-weight: bold !important;
    cursor: pointer !important;
    list-style: none !important;
    border-bottom: 1px solid #263238 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-shadow: 0 0 5px rgba(0, 229, 255, 0.5) !important; /* 发光字 */
}
.ph > summary::-webkit-details-marker { display: none !important; }

/* 3. 内屏显示区 (.scr = Screen) */
.scr {
    background-color: #080f14 !important; /* 深邃的液晶黑 */
    color: #e0f7fa !important; /* 偏冷的白色文字 */
    position: relative !important;
    padding: 0 !important;
    min-height: 300px !important;
    
    /* [核心] LCD 扫描线效果 */
    background-image: linear-gradient(
        rgba(18, 16, 16, 0) 50%, 
        rgba(0, 0, 0, 0.25) 50%
    ), linear-gradient(
        90deg, 
        rgba(255, 0, 0, 0.06), 
        rgba(0, 255, 0, 0.02), 
        rgba(0, 0, 255, 0.06)
    ) !important;
    background-size: 100% 2px, 3px 100% !important; /* 模拟像素点 */
}

/* 4. 状态栏 (.bar = Status Bar) */
.bar {
    display: flex !important;
    justify-content: space-between !important;
    padding: 5px 10px !important;
    background: rgba(0, 229, 255, 0.1) !important; /* 淡淡的背光 */
    font-size: 0.75em !important;
    border-bottom: 1px solid rgba(0, 229, 255, 0.2) !important;
    color: #00E5FF !important;
}

/* 5. 待机主屏 (.ui = User Interface) */
.ui {
    padding: 20px 15px !important;
    text-align: center !important;
    border-bottom: 1px dashed #37474F !important;
}
/* 日期 (.dat) */
.dat {
    font-size: 0.9em !important;
    opacity: 0.8 !important;
    letter-spacing: 1px !important;
}
/* 天气/倒计时 (.wea) */
.wea {
    font-size: 1.1em !important;
    margin: 10px 0 !important;
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6) !important;
}
/* 地点 (.loc) - 模拟滚动条 */
.loc {
    background: #000000 !important;
    color: #FFB74D !important; /* 橙色高亮 */
    padding: 4px !important;
    font-size: 0.8em !important;
    border: 1px solid #37474F !important;
    margin-top: 10px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}
/* 调试信息 (.mod) */
.mod {
    font-size: 0.7em !important;
    color: #546E7A !important;
    margin-top: 5px !important;
}

/* 6. 收件箱 (.msg = Message) */
.msg {
    padding: 10px !important;
}
/* 标题 (.hdr) */
.hdr {
    font-size: 0.85em !important;
    color: #00E5FF !important;
    border-left: 3px solid #00E5FF !important;
    padding-left: 6px !important;
    margin-bottom: 8px !important;
    font-weight: bold !important;
}
/* 列表 (.lst) */
.lst {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.lst li {
    padding: 6px 0 !important;
    border-bottom: 1px solid #1c2529 !important;
    font-size: 0.85em !important;
    color: #B0BEC5 !important;
}
/* 小字/摘要 (.sub) */
.sub {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* 7. 浏览器/BBS (.net = Internet) */
.net {
    background: #e0e0e0 !important; /* 模拟白底网页 */
    margin: 10px !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    /* 默认折叠，不需要额外样式，由 details 控制 */
}
/* 地址栏 (.url) - BBS触发器 */
.url {
    background: #0277BD !important; /* i-mode 蓝 */
    color: white !important;
    padding: 5px 10px !important;
    font-size: 0.75em !important;
    cursor: pointer !important;
    list-style: none !important;
    font-weight: bold !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
.url::-webkit-details-marker { display: none !important; }

/* 网页内容 (.pg = Page) */
.pg {
    padding: 8px !important;
    color: #333 !important;
    font-family: 'SimSun', serif !important; /* 网页用宋体 */
}
/* 版块标题 (.sec) */
.sec {
    background: #B3E5FC !important;
    color: #01579B !important;
    font-size: 0.8em !important;
    padding: 2px 4px !important;
    margin-top: 5px !important;
    font-weight: bold !important;
}
/* 帖子行 (.row) */
.row {
    font-size: 0.8em !important;
    border-bottom: 1px dotted #999 !important;
    padding: 4px 0 !important;
    display: flex !important;
    align-items: center !important;
}
/* 标签 (.tag) */
.tag {
    background: #546E7A !important;
    color: #fff !important;
    font-size: 0.7em !important;
    padding: 1px 3px !important;
    border-radius: 2px !important;
    margin-right: 4px !important;
    flex-shrink: 0 !important;
}

/* ===================================================================
 * 峰城大附属 · 校园公告栏 (Low-Contrast Winter Theme)
 * =================================================================== */

/* 1. 公告栏容器 (.bb) - 避免纯白，使用米灰/冷灰 */
.bb {
    background: #f8f9fa !important; /* 冷灰底色，防过曝 */
    border: 1px solid #cfd8dc !important; /* 灰蓝边框 */
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important; /* 极淡的阴影 */
    font-family: 'Noto Serif SC', 'SimSun', serif !important;
    color: #37474f !important; /* 深灰蓝文字，非纯黑 */
    margin: 1.5em auto !important;
    overflow: hidden !important;
    max-width: 600px !important;
}

/* Summary 标题 - 极简处理 */
.bb > summary {
    background: #eceff1 !important;
    color: #455a64 !important;
    padding: 6px 12px !important;
    font-size: 0.85em !important;
    font-weight: bold !important;
    border-bottom: 1px solid #cfd8dc !important;
    cursor: pointer !important;
    list-style: none !important;
}
.bb > summary::-webkit-details-marker { display: none !important; }

/* 2. 顶部锚点区 (.hd) - 深色压顶，建立层级 */
.hd {
    background: #37474f !important; /* 深蓝灰背景 */
    color: #eceff1 !important; /* 灰白文字，降低对比度 */
    padding: 12px 15px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    font-family: sans-serif !important; /* 信息区用无衬线体 */
}

/* 左侧信息 (.l) */
.hd .l { display: flex !important; flex-direction: column !important; gap: 4px !important; }

/* 时间 (.tm) */
.tm { font-size: 1em !important; letter-spacing: 0.5px !important; }
.tm b { color: #ffffff !important; font-weight: 700 !important; }
.tm sep { color: #78909c !important; margin: 0 4px !important; }
.tm span { color: #cfd8dc !important; }

/* 地点 (.lc) */
.lc { font-size: 0.8em !important; color: #90a4ae !important; margin-top: 2px !important; }

/* 右侧标签 (.r / .mt) */
.mt { display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: 5px !important; }
.tg {
    font-size: 0.75em !important;
    background: rgba(0, 0, 0, 0.2) !important; /* 半透明深底 */
    color: #b0bec5 !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    white-space: nowrap !important;
}
.tg b { color: #81d4fa !important; } /* 开关状态微亮 */

/* 3. 环境描写 (.ds) - 纸张质感 */
.ds {
    background: #fff !important; /* 纯白区留给这里 */
    color: #546e7a !important;
    padding: 10px 15px !important;
    font-size: 0.9em !important;
    font-style: italic !important;
    border-bottom: 1px dashed #cfd8dc !important;
    line-height: 1.6 !important;
}
.ds .ico { color: #b0bec5 !important; margin-right: 6px !important; }

/* 4. 内容主体 (.bd) */
.bd { padding: 15px !important; background: #f8f9fa !important; }

/* 通用标题 (<tt>) */
.bd tt {
    display: block !important;
    font-size: 0.75em !important;
    font-weight: bold !important;
    color: #90a4ae !important;
    margin-bottom: 8px !important;
    letter-spacing: 1px !important;
    border-left: 3px solid #b0bec5 !important;
    padding-left: 6px !important;
    text-transform: uppercase !important;
}

/* 5. 心境盒子 (.bx) */
.bx { margin-bottom: 15px !important; }
.ln { font-size: 0.9em !important; margin-bottom: 5px !important; padding-left: 4px !important; }
/* 困局 (s = Stuck) - 哑光红 */
.ln.s b { color: #c62828 !important; margin-right: 4px !important; }
/* 破局 (k = Key) - 哑光绿 */
.ln.k b { color: #2e7d32 !important; margin-right: 4px !important; }

/* 6. 行事历列表 (.ls) */
.ls { margin-bottom: 15px !important; }

/* 单条事项 (.it) */
.it {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    font-size: 0.9em !important;
}
.it:last-child { border-bottom: none !important; }

/* 类型图标 (.ty) */
.ty {
    display: inline-block !important;
    font-size: 0.7em !important;
    padding: 1px 4px !important;
    border-radius: 2px !important;
    margin-right: 6px !important;
    color: #fff !important;
    min-width: 36px !important;
    text-align: center !important;
}
/* 配色方案：低饱和度 */
.ty[c="公"] { background: #546e7a !important; } /* 蓝灰 */
.ty[c="私"] { background: #8e24aa !important; } /* 暗紫 */
.ty[c="急"] { background: #d32f2f !important; } /* 暗红 */

/* 收益/右侧信息 (.rw) */
.rw {
    font-size: 0.85em !important;
    color: #f57f17 !important; /* 琥珀色 */
    background: rgba(245, 127, 23, 0.08) !important;
    padding: 1px 5px !important;
    border-radius: 2px !important;
}

/* 7. 校内放送 (.nw) */
.nw .rw {
    display: block !important;
    background: transparent !important;
    color: #455a64 !important;
    padding: 4px 0 !important;
    border-bottom: 1px dotted #cfd8dc !important;
    font-size: 0.85em !important;
}
.nw .rw b { color: #1565c0 !important; margin-right: 5px !important; } /* 暗蓝标题 */

/* ===================================================================
 * 修复补丁：去过曝 & 增强对比度 (Ink Fix)
 * 请放在所有CSS的最下方
 * =================================================================== */

/* 1. 全局去雾：强制加深文字与边框 */
.bb {
    /* 边框加深，更有轮廓感 */
    border: 1px solid #b0bec5 !important; 
    /* 文字不再用浅灰，改用深墨色 */
    color: #263238 !important; 
}

/* 2. 顶部锚点区 (.hd) - 抢救“隐形”的时间地点 */
.hd {
    /* 给头部加一个明显的银灰底色，不再让它和背景融为一体 */
    background: #e0e0e0 !important; 
    border-bottom: 1px solid #b0bec5 !important;
    color: #37474f !important;
}

/* 时间与地点文字加深 */
.tm b { color: #000000 !important; } /* 时间纯黑 */
.tm span { color: #455a64 !important; } /* 星期深灰 */
.lc { 
    color: #546e7a !important; /* 地点不再是浅灰，改为深蓝灰 */
    font-weight: 600 !important; /* 稍微加粗 */
}

/* 3. 右上角标签 (.tg) - 修复“看不清字” */
.tg {
    /* 底色加深，不再是透明 */
    background: #cfd8dc !important; 
    border: 1px solid #b0bec5 !important;
    /* 文字加深 */
    color: #37474f !important; 
    text-shadow: none !important; /* 去掉发光，防止模糊 */
    font-weight: bold !important;
}
.tg b { color: #0277bd !important; } /* ON/OFF 状态改用深蓝 */

/* 4. 环境描写 (.ds) - 增强阅读感 */
.ds {
    color: #37474f !important; /* 加深 */
    border-bottom-color: #b0bec5 !important; /* 分割线加深 */
    background: #fff !important; /* 确保这里是纯白底，突出文字 */
}

/* 5. 标题栏 (.bx tt, .ls tt) - 增强层级 */
.bd tt {
    color: #455a64 !important;
    background: rgba(0,0,0,0.04) !important; /* 给标题条加一点点灰底 */
    border-left: 4px solid #78909c !important; /* 左侧装饰条加深 */
}

/* 6. 列表项 (.it) - 修复分割线过淡 */
.it {
    border-bottom: 1px solid #cfd8dc !important;
}

/* 7. 右侧收益文字 (.rw) - 修复过曝的橙色 */
.rw {
    /* 改为深赭石色，白底上更清晰 */
    color: #e65100 !important; 
    background: rgba(255, 111, 0, 0.12) !important;
    font-weight: bold !important;
}

/* ===================================================================
 * 生徒手帐 · 样式表 (Student Handbook Theme)
 * =================================================================== */

/* 1. 容器 (.sh) - 仿真笔记本质感 */
.sh {
    background: #ffffff !important;
    border: 1px solid #b0bec5 !important;
    border-top: 4px solid #546e7a !important; /* 顶部加粗像笔记本脊 */
    border-radius: 4px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
    font-family: 'Noto Serif SC', serif !important;
    color: #37474f !important;
    margin: 1.5em auto !important;
    max-width: 600px !important;
    overflow: visible !important; /* 允许悬浮窗溢出 */
}

/* 标题栏 */
.sh > summary {
    background: #eceff1 !important;
    color: #263238 !important;
    padding: 8px 12px !important;
    font-weight: bold !important;
    border-bottom: 1px solid #cfd8dc !important;
    cursor: pointer !important;
    list-style: none !important;
}
.sh > summary::-webkit-details-marker { display: none !important; }

/* 2. 基础档案区 (.bio) */
.bio {
    padding: 12px 15px !important;
    background: #fafafa !important;
    border-bottom: 1px dashed #cfd8dc !important;
}

/* 顶部信息 (.top) */
.bio .top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    margin-bottom: 8px !important;
}
.nm { font-size: 1.2em !important; font-weight: bold !important; color: #000 !important; }
.inf { font-size: 0.85em !important; color: #78909c !important; }

/* 3. 资源条 (.res) */
.res { display: flex !important; gap: 10px !important; align-items: center !important; }

/* 进度条通用 (.bar) */
.bar {
    flex: 1 !important;
    height: 14px !important;
    background: #eceff1 !important;
    border: 1px solid #cfd8dc !important;
    border-radius: 7px !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: help !important; /* 提示可悬停 */
}
/* 进度值 */
.bar .val {
    height: 100% !important;
    transition: width 0.3s !important;
}
/* 体力条 (hp) - 灰绿 */
.hp .val { background: #81c784 !important; }
/* 灵感条 (mp) - 灰蓝 */
.mp .val { background: #64b5f6 !important; }

/* 条内文字 (.txt) */
.bar .txt {
    position: absolute !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 9px !important;
    line-height: 14px !important;
    color: rgba(0,0,0,0.5) !important;
    font-weight: bold !important;
    letter-spacing: 1px !important;
    z-index: 2 !important;
}

/* 状态徽章 (.bdg) */
.bdg {
    font-size: 0.8em !important;
    background: #546e7a !important;
    color: #fff !important;
    padding: 1px 6px !important;
    border-radius: 3px !important;
    cursor: help !important;
}

/* 4. 音律核心区 (.core) - 重点突出 */
.core { padding: 15px !important; background: #fff !important; }

/* 乐理主体 (.root) - 视觉核心 */
.root {
    border: 2px solid #90a4ae !important; /* 加粗边框 */
    background: rgba(144, 164, 174, 0.1) !important; /* 淡淡的底色 */
    padding: 8px 12px !important;
    border-radius: 4px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 12px !important;
    cursor: help !important;
    position: relative !important;
}
.root .lbl { font-size: 0.75em !important; font-weight: bold !important; color: #546e7a !important; letter-spacing: 1px !important; }
.root .grd { font-size: 1.1em !important; color: #263238 !important; } /* Lv等级加黑 */
.root .tit { font-size: 0.85em !important; color: #0277bd !important; font-style: italic !important; }

/* 四维技法 (.art) - 网格布局 */
.art {
    display: flex !important;
    gap: 8px !important;
}
.dim {
    flex: 1 !important;
    border: 1px solid #e0e0e0 !important;
    background: #fafafa !important;
    padding: 6px 4px !important;
    text-align: center !important;
    border-radius: 3px !important;
    cursor: help !important;
    position: relative !important;
    transition: all 0.2s !important;
}
.dim:hover { border-color: #90a4ae !important; background: #f5f5f5 !important; }

.dim tt { display: block !important; font-size: 0.75em !important; color: #78909c !important; margin-bottom: 2px !important; }
.dim b { font-size: 0.95em !important; color: #37474f !important; }

/* 5. 学业成绩区 (.aca) */
.aca {
    display: flex !important;
    border-top: 1px dashed #cfd8dc !important;
    padding: 10px 15px !important;
    background: #fcfcfc !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
}
.sub {
    flex: 1 !important;
    font-size: 0.75em !important;
    text-align: center !important;
    color: #607d8b !important;
    border-right: 1px solid #eee !important;
    cursor: help !important;
    position: relative !important;
    min-width: 40px !important;
}
.sub:last-child { border-right: none !important; }
.sub b { display: block !important; margin-top: 2px !important; color: #455a64 !important; }

/* ===================================================================
 * 悬浮窗系统 (Tooltip System) - 核心交互
 * 适用于所有带 d="..." 属性的元素
 * =================================================================== */

/* 悬浮窗主体 */
[d]:hover::after {
    content: attr(d) !important; /* 读取HTML中的d属性 */
    position: absolute !important;
    
    /* 位置调整：显示在上方 */
    bottom: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-8px) !important;
    
    /* 样式：深色半透明面板 */
    background: rgba(38, 50, 56, 0.95) !important;
    color: #eceff1 !important;
    font-size: 0.8em !important;
    line-height: 1.5 !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    width: max-content !important;
    max-width: 220px !important; /* 限制最大宽度防止太宽 */
    
    /* 文本处理 */
    white-space: pre-wrap !important; /* 识别换行符 */
    text-align: left !important;
    z-index: 999 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
    pointer-events: none !important; /* 鼠标不可点击悬浮窗 */
    
    /* 小三角装饰 */
    border-bottom: 2px solid #78909c !important; 
}

/* 适配：如果元素太靠左/右，可能被遮挡的微调逻辑 (可选) */
/* 这里默认居中，通常足够使用 */

/* ===================================================================
 * 修复补丁：弹窗逻辑修正 & 人设区域美化
 * =================================================================== */

/* 1. 核心定位修正：确保所有弹窗挂载点具备溢出显示能力 */
.sh, .bio, .aca, .res, .grp, .sub, .dim, .root {
    position: relative !important;
    overflow: visible !important; /* 强制允许弹窗溢出容器边界 */
}

/* 2. 人设详情区 (.des) 美化 - 低对比度文学感 */
.des {
    padding: 10px 0 !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid #eeeeee !important;
}
.des .row {
    font-size: 0.85em !important;
    line-height: 1.6 !important;
    color: #455a64 !important; /* 深蓝灰，防过曝 */
    margin-bottom: 4px !important;
    text-align: left !important;
}
.des .row b {
    color: #78909c !important; /* 标签色淡化 */
    margin-right: 4px !important;
    font-weight: bold !important;
}

/* 3. 资源条容器 (.grp) 布局修正 */
.res {
    display: flex !important;
    gap: 12px !important;
    margin-top: 10px !important;
}
.grp {
    flex: 1 !important;
    position: relative !important;
    cursor: help !important;
}

/* 4. 弹窗系统 (Tooltip) 深度修正 */
[d] {
    pointer-events: auto !important; /* 确保能触发 hover */
}

[d]:hover::after {
    content: attr(d) !important;
    position: absolute !important;
    
    /* 强制置顶显示 */
    bottom: 120% !important; 
    left: 50% !important;
    transform: translateX(-50%) !important;
    
    /* 视觉设计：深墨色背板，高对比度防模糊 */
    background: rgba(38, 50, 56, 0.98) !important;
    color: #ffffff !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    border-radius: 4px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
    
    /* 识别换行符并强制最高层级 */
    white-space: pre-wrap !important;
    z-index: 9999 !important; 
    width: max-content !important;
    max-width: 250px !important;
    pointer-events: none !important;
}

/* 5. 学业区 (.aca) 弹窗专用修正 */
.aca {
    display: flex !important;
    justify-content: space-between !important;
    background: #fcfcfc !important;
    padding: 12px 5px !important;
    z-index: 10 !important; /* 提升整个区域层级 */
}
.sub {
    flex: 1 !important;
    text-align: center !important;
    border-right: 1px solid #eeeeee !important;
}
.sub:last-child { border-right: none !important; }

/* 增加一个小三角指针 */
[d]:hover::before {
    content: '' !important;
    position: absolute !important;
    bottom: 120% !important;
    left: 50% !important;
    margin-bottom: -10px !important;
    transform: translateX(-50%) !important;
    border: 6px solid transparent !important;
    border-top-color: rgba(38, 50, 56, 0.98) !important;
    z-index: 9999 !important;
}

/* ===================================================================
 * 修复补丁：行事历 (To-Do) 悬浮窗逻辑
 * =================================================================== */

/* 1. 容器溢出修正：允许公告栏内部的弹窗向外飞出 */
.bb, .bd, .ls, .it {
    position: relative !important;
    overflow: visible !important; /* 关键：防止弹窗被截断 */
}

/* 2. 奖励/结果项 (.rw) 的交互状态 */
.it .rw {
    cursor: help !important; /* 提示玩家此处有悬浮窗 */
    position: relative !important;
    display: inline-block !important;
}

/* 3. 悬浮窗样式：复用深墨色风格，保持视觉统一 */
[d]:hover::after {
    content: attr(d) !important;
    position: absolute !important;
    
    /* 定位：显示在文字上方 */
    bottom: 125% !important;
    right: 0 !important; /* 靠右对齐，防止超出公告栏左侧 */
    
    /* 视觉设计 */
    background: rgba(38, 50, 56, 0.98) !important;
    color: #ffffff !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    font-weight: normal !important;
    line-height: 1.5 !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    
    /* 文本处理 */
    white-space: pre-wrap !important;
    z-index: 10000 !important;
    width: max-content !important;
    max-width: 200px !important;
    pointer-events: none !important;
    
    /* 强制重置字体，防止继承斜体 */
    font-style: normal !important;
    letter-spacing: 0px !important;
}

/* 4. 悬浮窗小三角 */
[d]:hover::before {
    content: '' !important;
    position: absolute !important;
    bottom: 125% !important;
    right: 15px !important;
    margin-bottom: -10px !important;
    border: 6px solid transparent !important;
    border-top-color: rgba(38, 50, 56, 0.98) !important;
    z-index: 10000 !important;
}

/* 5. 针对 [Deadline] 的特殊对比度优化 */
.it .ty[c="急"] + b + .r .rw {
    color: #b71c1c !important; /* 紧急任务的收益显示更深，以示警示 */
    background: rgba(211, 47, 47, 0.1) !important;
}

/* ===================================================================
 * 同学录 · 样式表 (Classmate Record Theme)
 * =================================================================== */

/* 1. 外壳容器 (.cr) */
.cr {
    background: #ffffff !important;
    border: 1px solid #cfd8dc !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    font-family: 'Noto Serif SC', serif !important;
    color: #37474f !important;
    margin: 1.5em auto !important;
    max-width: 620px !important;
    overflow: visible !important;
}

/* 2. 快速检索栏 (.qk) */
.qk {
    padding: 10px 15px !important;
    background: #f1f5f9 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}
.qk tt { font-size: 0.75em !important; font-weight: bold !important; color: #64748b !important; }
.qk i {
    font-size: 0.8em !important;
    font-style: normal !important;
    background: #fff !important;
    padding: 2px 8px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    color: #475569 !important;
}

/* 3. 人物卡片通用 (.cd) */
.cd { padding: 15px !important; background: #fff !important; }

/* 头部信息 (.tp) */
.cd .tp {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 12px !important;
    border-bottom: 2px solid #37474f !important;
    padding-bottom: 5px !important;
}
.cd name { font-size: 1.25em !important; font-weight: bold !important; color: #000 !important; }
.cd .st { font-size: 0.85em !important; color: #78909c !important; }

/* 羁绊等级 (.rel) */
.rel {
    font-size: 0.9em !important;
    font-weight: bold !important;
    color: #0277bd !important; /* 默认为理性蓝 */
    background: rgba(2, 119, 189, 0.05) !important;
    padding: 2px 8px !important;
    border: 1px solid #b3e5fc !important;
    border-radius: 2px !important;
    cursor: help !important;
}

/* 4. 信息详情区 (.inf-g) */
.inf-g { display: flex !important; flex-direction: column !important; gap: 15px !important; padding: 10px 0 !important; }

/* 模块块 (.blk) */
.blk { border-bottom: 1px dashed #eee !important; padding-bottom: 10px !important; }
.blk:last-child { border-bottom: none !important; }
.blk tt {
    display: block !important;
    font-size: 0.75em !important;
    color: #90a4ae !important;
    margin-bottom: 8px !important;
    font-weight: bold !important;
}

/* 标签组 (.tag-g) */
.tag-g { display: flex !important; gap: 5px !important; flex-wrap: wrap !important; margin-bottom: 8px !important; }
.tag {
    font-size: 0.75em !important;
    background: #eceff1 !important;
    color: #455a64 !important;
    padding: 1px 6px !important;
    border-radius: 2px !important;
}
.mn-st { font-size: 0.8em !important; color: #00838f !important; font-weight: bold !important; }

/* 5. 观人术/穿着描述 (.des) */
.des p { font-size: 0.85em !important; line-height: 1.8 !important; margin: 8px 0 !important; }
.des b { color: #546e7a !important; margin-right: 5px !important; }

/* 特殊：女性服饰分行描述 (.row-f) */
.row-f {
    font-size: 0.85em !important;
    line-height: 1.8 !important;
    color: #37474f !important;
    padding-left: 1em !important;
    border-left: 2px solid #cfd8dc !important;
    margin-top: 5px !important;
    white-space: pre-wrap !important; /* 保持分行显示 */
}

/* 6. 本音/内心独白 (.in-v) */
.in-v {
    background: #f5f5f5 !important;
    padding: 10px !important;
    border-radius: 4px !important;
    font-style: italic !important;
    font-size: 0.85em !important;
    color: #607d8b !important;
    margin: 10px 0 !important;
}
.in-v::before { content: "“" !important; font-size: 1.5em !important; color: #cfd8dc !important; line-height: 0 !important; vertical-align: middle !important; }

/* 7. 日志列表 (.log) */
.log { padding-left: 15px !important; margin: 5px 0 !important; }
.log li { font-size: 0.8em !important; color: #78909c !important; margin-bottom: 3px !important; list-style-type: circle !important; }

/* 8. 悬浮窗补丁：确保层级正确 */
[d]:hover::after {
    z-index: 10001 !important; /* 确保压住所有卡片 */
    background: #263238 !important;
}

/* ===================================================================
 * 子模块差异化补丁：减小体积 + 浅色化处理
 * =================================================================== */

/* 1. 子模块容器 (.bd) - 增加内缩感 */
.bd {
    margin: 8px 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 4px !important;
    background: #ffffff !important;
}

/* 2. 子模块页眉 (.bd > summary) - 核心缩小化 */
.bd > summary {
    background: #f8fafc !important; /* 换成极浅的蓝灰色 */
    color: #475569 !important;      /* 文字改深灰蓝，不再过亮 */
    padding: 6px 12px !important;   /* 减小内边距 */
    font-size: 0.85em !important;   /* 缩减字号 */
    font-weight: 600 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-left: 3px solid #94a3b8 !important; /* 细边框取代粗边框 */
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.5 !important;
}

/* 3. 区分“特别关注”与“详细档案”的视觉暗示 */

/* [特别关注] 蓝色暗示 */
.bd[open] > summary {
    background: #f1f5f9 !important;
    border-left-color: #3b82f6 !important; /* 展开时高亮 */
    color: #1e40af !important;
}

/* [人物详案] 灰色偏中性 */
.bd:nth-of-type(2) > summary {
    border-left-color: #64748b !important;
}

/* 4. 移除或缩小图标 - 如果您在 HTML 里用了图片/Emoji */
.bd > summary i, 
.bd > summary .icon {
    font-size: 0.8em !important;
    opacity: 0.7 !important;
    transform: scale(0.85) !important;
}

/* 5. 内部内容区 (.cd / .inf-g) 相应微调 */
.bd .cd, .bd .inf-g {
    padding: 10px 12px !important; /* 缩小内部边距 */
}

/* ===================================================================
 * 修复补丁：人物详案 (Profile Detail) 可读性深度优化
 * 目标：打破大面积纯白，建立卡片式层级，模拟剪贴簿质感
 * =================================================================== */

/* 1. 详案总容器 (.inf-g) - 增加基础底色，不再是纯白 */
/* 这会在详细信息周围创建一个浅灰色的背景框 */
.inf-g {
    background: #f8fafc !important; /* 使用一种极淡的冷灰底色 */
    padding: 15px !important;       /* 增加内边距，让内容与边界有呼吸感 */
    border-radius: 0 0 4px 4px !important; /* 底部圆角 */
    border-top: 1px solid #e2e8f0 !important; /* 顶部增加分割线 */
}

/* 2. 各个信息模块 (.blk) - 做成独立的白色卡片 */
.blk {
    background: #ffffff !important; /* 回归纯白，与底色形成对比 */
    padding: 15px !important;       /* 增加卡片内部空间 */
    border: 1px solid #e2e8f0 !important; /* 实线细边框取代原来的虚线 */
    border-radius: 4px !important;
    margin-bottom: 15px !important; /* 增加块与块之间的间距 */
    box-shadow: 0 2px 4px rgba(0,0,0,0.03) !important; /* 极微弱的立体感阴影 */
}
.blk:last-child {
    margin-bottom: 0 !important;
}

/* 3. 模块标题栏 (<tt>) - 增强指引性，像卡片的标签 */
.blk tt {
    color: #334155 !important; /* 加深标题颜色 */
    background: #f1f5f9 !important; /* 给标题加一个浅色背景条 */
    padding: 6px 10px !important;
    border-left: 4px solid #64748b !important; /* 左侧强调线加粗颜色加深 */
    margin: -15px -15px 12px -15px !important; /* 撑满卡片顶部，形成通栏标题 */
    border-bottom: 1px solid #e2e8f0 !important;
    border-radius: 4px 4px 0 0 !important; /* 顶部圆角贴合卡片 */
    font-size: 0.8em !important; /* 字号微调 */
    letter-spacing: 1px !important;
}

/* 4. 精神状态评价 (.mn-st) - 独立化显示 */
.mn-st {
    display: inline-block !important;
    background: #e0f2f1 !important; /* 极淡的青色背景 */
    color: #00695c !important;      /* 深青色文字 */
    padding: 4px 12px !important;
    border-radius: 4px !important;
    margin-top: 8px !important;
    font-size: 0.85em !important;
    border: 1px solid #b2dfdb !important;
}

/* 5. 观察笔记正文优化 (.des p, .row-f) - 提升阅读舒适度 */
.des p, .row-f {
    color: #334155 !important; /* 正文颜色微调加深，对比度更好 */
    line-height: 1.8 !important; /* 保持舒适的行高 */
    margin-bottom: 12px !important;
}
/* 强调关键词（如【容貌】） */
.des b {
    color: #0f172a !important; /* 几乎纯黑的强调色 */
    font-weight: 700 !important;
    margin-right: 8px !important;
}

/* 6. 本音区 (.in-v) - 更深的沉浸感笔触 */
.in-v {
    background: #eceff1 !important; /* 比之前更深一点的冷灰底色 */
    border: 1px solid #cfd8dc !important; /* 边框加深 */
    color: #455a64 !important; /* 字体颜色加深 */
    padding: 12px 15px !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05) !important; /* 内阴影，制造凹陷感 */
}
.in-v::before {
    color: #90a4ae !important; /* 引号颜色加深 */
}

/* ===================================================================
 * 进路指导 · 样式表 (Career Guidance Form Theme)
 * =================================================================== */

/* 1. 容器 (.jr) - 模拟办公用纸，略带一点点纸张泛黄感以示严肃 */
.jr {
    background: #fdfdfd !important;
    border: 1px solid #b0bec5 !important;
    border-radius: 2px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
    font-family: 'Noto Serif SC', serif !important;
    margin: 2em auto !important;
    max-width: 620px !important;
    overflow: hidden !important;
}

/* 标题栏 - 模拟表单页眉 */
.jr > summary {
    background: #455a64 !important; /* 深灰蓝，压住底盘 */
    color: #ffffff !important;
    padding: 10px 15px !important;
    font-size: 0.9em !important;
    font-weight: bold !important;
    letter-spacing: 2px !important;
    cursor: pointer !important;
    list-style: none !important;
}
.jr > summary::-webkit-details-marker { display: none !important; }

/* 2. 主体内容 (.bd) */
.jr .bd {
    padding: 20px 15px !important;
    background-image: 
        linear-gradient(rgba(176, 190, 197, 0.2) 1px, transparent 1px) !important;
    background-size: 100% 2.5em !important; /* 模拟横线纸效果 */
}

/* 3. 选项样式 (.op) */
.jr .op {
    background: #ffffff !important;
    border: 1px solid #cfd8dc !important;
    padding: 12px 18px !important;
    margin-bottom: 12px !important;
    font-size: 0.95em !important;
    color: #263238 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

/* 悬停效果：不再闪烁，而是像被圆珠笔勾选一样产生微妙的色变 */
.jr .op:hover {
    background: #f1f5f9 !important;
    border-color: #78909c !important;
    color: #01579b !important; /* 墨蓝色，模拟圆珠笔迹 */
    transform: translateX(5px) !important; /* 轻轻右移，增加交互感 */
}

/* 最后一个选项去掉下边距 */
.jr .op:last-child {
    margin-bottom: 0 !important;
}

/* 4. 去过曝处理：针对白底黑字的对比度优化 */
.jr .op {
    box-shadow: inset 0 0 0 0 rgba(0,0,0,0) !important;
}
.jr .op:active {
    background: #e1e8ed !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05) !important;
}

/* ===================================================================
 * 故事引擎 2.0 · 文本渲染补丁 (Campus Winter Narrative)
 * 适配标签: .nd, .nt, .ud, .wh, .sh, .aud, .act, .scn, .atm
 * =================================================================== */

/* 1. 对话系统：建立声音的层次感 */

/* NPC 对话 (.nd) - 标准墨色 */
.nd {
    color: #263238 !important;
    font-weight: 500 !important;
    line-height: 1.8 !important;
}

/* NPC 本音 (.nt) - 幽魂般的内心独白 */
.nt {
    color: #607d8b !important; /* 灰蓝色，代表冷淡与隐藏 */
    font-style: italic !important;
    font-family: "Noto Serif SC", serif !important;
    letter-spacing: 0.5px !important;
    opacity: 0.85 !important;
}

/* 玩家对话 (.ud) - 增强存在感 */
.ud {
    color: #000000 !important;
    font-weight: 700 !important; /* 稍微加粗，强调玩家意志 */
}

/* 2. 情绪压力调节：声音的大小 */

/* 微声耳语 (.wh) - 消失在风中的声音 */
.wh {
    font-size: 0.85em !important;
    color: #90a4ae !important;
    letter-spacing: -0.2px !important;
    display: inline-block !important;
    transform: translateY(-1px) !important;
}

/* 爆发呐喊 (.sh) - 情感的刺穿 */
.sh {
    color: #b71c1c !important; /* 暗红色，非亮红，防过曝 */
    font-weight: 900 !important;
    letter-spacing: 1px !important;
    text-shadow: 0 0 1px rgba(183, 28, 28, 0.2) !important;
}

/* 3. 环境与感知：视觉化氛围 */

/* 音景渲染 (.aud) - 乐章与环境音 */
.aud {
    display: block !important;
    font-size: 0.8em !important;
    color: #5c6bc0 !important; /* 琴键般的靛蓝色 */
    margin: 8px 0 !important;
    padding-left: 20px !important;
    position: relative !important;
    font-family: sans-serif !important;
}
.aud::before {
    content: "♪" !important;
    position: absolute !important;
    left: 0 !important;
    font-size: 1.2em !important;
}

/* 物理动态 (.act) - 动作特写 */
.act {
    color: #78909c !important;
    font-size: 0.9em !important;
    font-style: normal !important;
    border-bottom: 1px solid #cfd8dc !important; /* 给动作加一个极淡的下划线 */
}

/* 场景锚点 (.scn) - 视点标记 */
.scn {
    display: table !important;
    background: #37474f !important;
    color: #ffffff !important;
    padding: 2px 8px !important;
    font-size: 0.75em !important;
    font-weight: bold !important;
    margin: 15px 0 !important;
    border-radius: 2px !important;
    letter-spacing: 1px !important;
}

/* 氛围指数 (.atm) - 社交读空气 */
.atm {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0.7em !important;
    color: #455a64 !important;
    background: #eceff1 !important;
    padding: 1px 6px !important;
    border-radius: 10px !important;
    border: 1px solid #cfd8dc !important;
    margin-left: 5px !important;
    vertical-align: middle !important;
}
.atm::before {
    content: "●" !important;
    margin-right: 4px !important;
    font-size: 0.8em !important;
    color: #90a4ae !important;
}

/* ===================================================================
   📖 新·模块一：冬日学园 · 笔耕不辍 (WA2 Input & Controls)
   设计：手帐横线纸、学生证磁卡、校内公章
   =================================================================== */

/* --- 1. 输入框：手帐页 (Student Planner Page) --- */
#ai-chat-input, 
textarea, 
input[type="text"] {
    /* 🗒️ 材质：冷色手帐纸纹理 */
    background-color: #fcfdfd !important;
    background-image: linear-gradient(#e1e8ed 1px, transparent 1px) !important;
    background-size: 100% 1.8em !important; /* 模拟笔记本横线 */
    
    /* 🖼️ 边框：细边框，模拟笔记本装订边缘 */
    border: 1px solid #cfd8dc !important;
    border-left: 4px solid #455a64 !important; /* 左侧加厚，模拟装订轴 */
    border-radius: 2px !important;
    
    /* 🖋️ 字体：冬日墨水 */
    font-family: 'Noto Serif SC', 'SimSun', serif !important;
    color: #263238 !important; 
    font-size: 15px !important;
    line-height: 1.8 !important;
    
    padding: 12px 15px !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05) !important; 
    transition: all 0.2s ease !important;
}

/* 聚焦态：提笔落墨 */
#ai-chat-input:focus, 
textarea:focus, 
input[type="text"]:focus {
    outline: none !important;
    background-color: #ffffff !important;
    border-color: #78909c !important;
    border-left-color: #1976d2 !important; /* 聚焦时左轴变蓝，象征思考活跃 */
    box-shadow: 
        inset 0 1px 3px rgba(0, 0, 0, 0.05),
        0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* --- 2. 通用按钮：学生证磁卡 (Student ID Card) --- */
.MuiButtonBase-root, 
button, 
.btn,
[role="button"] {
    /* 💳 材质：学生证塑料感 */
    background: #f8f9fa !important;
    border: 1px solid #cfd8dc !important;
    color: #37474f !important;
    
    font-family: 'Noto Serif SC', serif !important;
    font-weight: 600 !important;
    border-radius: 3px !important;
    padding: 5px 12px !important;
    
    /* 微弱阴影，模拟卡片厚度 */
    box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    transform: translateY(0) !important;
    transition: all 0.15s ease !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
}

/* 交互态：指尖触碰 */
.MuiButtonBase-root:hover, 
button:hover, 
.btn:hover,
[role="button"]:hover {
    background: #eceff1 !important;
    color: #1a237e !important; /* 墨蓝色高亮 */
    border-color: #b0bec5 !important;
    transform: translateY(-1px) !important; /* 略微浮起 */
    box-shadow: 0 3px 6px rgba(0,0,0,0.12) !important;
}

.MuiButtonBase-root:active, 
button:active {
    transform: translateY(1px) !important; /* 点击下沉 */
    box-shadow: none !important;
    background: #cfd8dc !important;
}

/* --- 3. 功能区特化 (复制/编辑/删除 - 索引贴样式) --- */
.MuiStack-root button,
.MuiButton-sizeSmall {
    font-size: 11px !important;
    padding: 2px 8px !important;
    border-radius: 2px !important;
    background: rgba(236, 239, 241, 0.5) !important;
    border: 1px dashed #cfd8dc !important; /* 模拟剪切线 */
    box-shadow: none !important;
    color: #78909c !important;
}

.MuiStack-root button:hover,
.MuiButton-sizeSmall:hover {
    background: #ffffff !important;
    border-style: solid !important;
    color: #455a64 !important;
    border-color: #455a64 !important;
}

/* --- 4. 🌙 终章/夜间模式：深夜校舍 (Midnight Campus) --- */
@media (prefers-color-scheme: dark) {
    
    /* 输入框：深夜的课桌 */
    #ai-chat-input, textarea, input[type="text"] {
        background-color: #1c2529 !important;
        background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) !important;
        border-color: #37474f !important;
        border-left-color: #546e7a !important;
        color: #eceff1 !important;
        box-shadow: inset 0 2px 10px rgba(0,0,0,0.4) !important;
    }
    #ai-chat-input:focus, textarea:focus {
        background-color: #121212 !important;
        border-color: #90caf9 !important; /* 深夜微光 */
    }

    /* 按钮：夜色磁卡 */
    .MuiButtonBase-root, button, .btn {
        background: #263238 !important;
        border-color: #37474f !important;
        color: #b0bec5 !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
    }
    
    /* 按钮悬停：月光 */
    .MuiButtonBase-root:hover, button:hover {
        background: #37474f !important;
        color: #ffffff !important;
        border-color: #90caf9 !important;
    }
    
    /* 功能小按钮 */
    .MuiStack-root button, .MuiButton-sizeSmall {
        border-color: #455a64 !important;
        color: #546e7a !important;
    }
    .MuiStack-root button:hover {
        background: #1c2529 !important;
        border-color: #90caf9 !important;
        color: #90caf9 !important;
    }
}

/* ===================================================================
   ❄️ 新·模块二：冬日苍穹 · 序章顶栏 (WA2 Winter Header)
   设计：冰蓝色调、磨砂玻璃、旋转雪花、冬日歌词
   =================================================================== */

/* 1. 顶部总容器：冬日清冷天空 */
.sticky.w-full.top-0 {
    background-color: rgba(236, 239, 241, 0.95) !important; /* 浅灰蓝，带透明度 */
    background-image: 
        /* ❄️ 注入：动态雪花背景 */
        url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='10' y='20' font-size='15' fill='rgba(176, 190, 197, 0.4)'%3E❄%3C/text%3E%3Ctext x='100' y='50' font-size='10' fill='rgba(176, 190, 197, 0.3)'%3E❅%3C/text%3E%3Ctext x='150' y='120' font-size='12' fill='rgba(176, 190, 197, 0.4)'%3E❆%3C/text%3E%3C/svg%3E") !important;
    border-bottom: 2px solid #b0bec5 !important; /* 冰盐色细线 */
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05) !important;
    backdrop-filter: blur(8px) !important; /* 磨砂玻璃效果 */
    animation: snowdrift 20s linear infinite !important; /* 背景微移，模拟雪飘 */
}

/* 2. 模型选择器：学生证磁卡样式 */
#ai-model-selector .group.flex {
    background-color: #ffffff !important;
    border: 1px solid #cfd8dc !important;
    border-top: 3px solid #78909c !important; /* 顶部冷灰色压感 */
    border-radius: 2px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
}

/* 3. 模型文字：冬日墨水 */
#ai-model-selector .truncate {
    font-family: 'Noto Serif SC', serif !important;
    color: #37474f !important;
    font-weight: bold !important;
}

/* 4. 交互：旋转雪花与冷蓝高亮 */
#ai-model-selector .group:hover {
    border-color: #90caf9 !important; /* 冰蓝色 */
    background-color: #f8fbff !important;
    box-shadow: 0 0 12px rgba(144, 202, 249, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* 悬停时文字变为深蓝色 */
#ai-model-selector .group:hover .truncate {
    color: #1976d2 !important;
}

/* 5. 设置按钮：冷铁零件 */
#header-setting-button {
    background-color: rgba(176, 190, 197, 0.2) !important;
    border: 1px solid #b0bec5 !important;
    color: #455a64 !important;
    border-radius: 2px !important;
}

/* 6. 🔄 旋转雪花特效 (针对右侧箭头或特定图标) */
#ai-model-selector .group:hover svg {
    color: #1976d2 !important;
    animation: spin-snow 3s linear infinite !important; /* 箭头像雪花一样旋转 */
}

/* --- 🌙 终章模式 (暗色) --- */
@media (prefers-color-scheme: dark) {
    .sticky.w-full.top-0 {
        background-color: rgba(28, 37, 41, 0.95) !important;
        border-bottom-color: #37474f !important;
    }
    #ai-model-selector .group.flex {
        background-color: #263238 !important;
        border-color: #37474f !important;
        border-top-color: #546e7a !important;
    }
    #ai-model-selector .truncate { color: #cfd8dc !important; }
}

/* ===================================================================
   ❄️ 补丁：序章判词 (WA2 Quotes)
   效果：在顶栏显示《白色相簿2》经典歌词
   =================================================================== */

/* 左侧：White Album */
#ai-model-selector::before {
    content: "White Album... 那个积雪的季节" !important;
    position: absolute !important;
    right: 100% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-family: 'Noto Serif SC', serif !important;
    font-size: 12px !important;
    font-style: italic !important;
    color: rgba(120, 144, 156, 0.7) !important;
    white-space: nowrap !important;
    margin-right: 25px !important;
    pointer-events: none !important;
}

/* 右侧：届かない恋 */
#ai-model-selector::after {
    content: "无法传达的爱恋... 渐行渐远的冬日回响" !important;
    position: absolute !important;
    left: 100% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-family: 'Noto Serif SC', serif !important;
    font-size: 12px !important;
    font-style: italic !important;
    color: rgba(120, 144, 156, 0.7) !important;
    white-space: nowrap !important;
    margin-left: 25px !important;
    pointer-events: none !important;
}

/* 动画：雪花微动 */
@keyframes snowdrift {
    from { background-position: 0 0; }
    to { background-position: 200px 200px; }
}

/* 动画：旋转雪花 */
@keyframes spin-snow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 移动端隐藏判词 */
@media screen and (max-width: 1024px) {
    #ai-model-selector::before, #ai-model-selector::after { display: none !important; }
}

/* ===================================================================
   🎹 新·模块三：冬日物语 · 终章交互区 (WA2 Bottom Interface)
   包含：磁卡功能键、手札输入框、五线谱翻页器、批改红印
   =================================================================== */

/* 1. 底部整体渐变背景：冬日晨雾 (Winter Mist) */
.bg-gradient-to-t.from-white {
    background: linear-gradient(to top, 
        #eceff1 0%, 
        rgba(236, 239, 241, 0.9) 70%, 
        transparent 100%) !important;
}

/* 2. 功能按钮区 (Mod/流式/思维链)：学生证磁卡 */
#ai-mod-button2 button,
.MuiButton-outlinedSizeSmall {
    background-color: #f8f9fa !important;
    border: 1px solid #b0bec5 !important; /* 冰盐色边框 */
    color: #455a64 !important;
    font-family: 'Noto Serif SC', serif !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    margin-bottom: 4px !important;
    transition: all 0.25s ease !important;
    text-transform: none !important;
    border-radius: 3px !important;
}

#ai-mod-button2 button:hover {
    background-color: #455a64 !important; /* 深冬色底 */
    color: #ffffff !important;
    border-color: #37474f !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

/* 特殊：思维链开启状态 (高亮) - 类似 WA2 的重点标注 */
#ai-mod-button2 button:contains("开启") {
    border-color: #1976d2 !important; /* 忧郁蓝边 */
    background-color: rgba(25, 118, 210, 0.05) !important;
}

/* 3. 输入框容器：冬日手札 (Journal Cover) */
.border-gray-200.rounded-xl.border-grey-300 {
    background-color: #ffffff !important;
    /* ❄️ 注入：微弱的积雪质感纹理 */
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='1' fill='rgba(176,190,197,0.2)'/%3E%3Ccircle cx='40' cy='35' r='1.5' fill='rgba(176,190,197,0.1)'/%3E%3C/svg%3E") !important;
    border: 1px solid #cfd8dc !important;
    border-top: 3px solid #78909c !important; /* 模拟手札的装订压条 */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    border-radius: 4px !important;
}

/* 输入框本体：钢笔墨水感 */
#ai-chat-input {
    background: transparent !important;
    font-family: 'Noto Serif SC', serif !important;
    color: #263238 !important;
    line-height: 1.8 !important;
    caret-color: #1976d2 !important; /* 光标变为深蓝色 */
}

/* 4. 发送按钮与撤回按钮：录音机控制键 */
#ai-send-button, 
.group.flex.items-center.justify-center.w-8.h-8 {
    background: #eceff1 !important;
    border: 1px solid #b0bec5 !important;
    color: #546e7a !important;
    border-radius: 3px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#ai-send-button:hover {
    background: #1976d2 !important; /* 发送时变为深蓝，象征传达的思念 */
    color: #ffffff !important;
    border-color: #1565c0 !important;
    transform: scale(1.05) !important;
}

/* 5. 翻页器 (Pagination)：五线谱页码 */
.MuiPagination-ul li button {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    color: #78909c !important;
    font-family: 'Georgia', serif !important; /* 使用更具古典乐谱感的字体 */
    border-radius: 2px !important;
    transition: all 0.2s !important;
}

/* 当前页码：选中的琴键 */
.MuiPagination-ul li .Mui-selected {
    background: #455a64 !important;
    color: #ffffff !important;
    border-color: #37474f !important;
    font-weight: bold !important;
}

/* 翻页器右侧输入框 */
.MuiPagination-root + .MuiStack-root input {
    font-family: sans-serif !important;
    background: #fcfdfd !important;
    border: 1px solid #cfd8dc !important;
    color: #455a64 !important;
    border-radius: 2px !important;
}

/* 6. 字数统计：老师的批改红印 (Correction Mark) */
.flex.items-center.px-1.h-5.rounded-md.bg-gray-100 {
    background-color: rgba(183, 28, 28, 0.1) !important; /* 浅红底 */
    color: #b71c1c !important; /* 朱红色文字 */
    border: 1px solid rgba(183, 28, 28, 0.3) !important;
    font-family: 'Georgia', serif !important;
    font-size: 10px !important;
    font-style: italic !important;
    border-radius: 2px !important;
    font-weight: bold !important;
}

/* --- 🌙 终章模式 (Dark Mode) --- */
@media (prefers-color-scheme: dark) {
    .bg-gradient-to-t.from-white { 
        background: linear-gradient(to top, #1c2529 0%, transparent 100%) !important; 
    }
    
    #ai-mod-button2 button, .MuiButton-outlinedSizeSmall {
        background-color: #263238 !important;
        border-color: #37474f !important;
        color: #b0bec5 !important;
    }
    
    .border-gray-200.rounded-xl.border-grey-300 {
        background-color: #1c2529 !important;
        border-color: #37474f !important;
        border-top-color: #546e7a !important;
    }
    
    #ai-chat-input { color: #eceff1 !important; }
    
    #ai-send-button { 
        background: #37474f !important; 
        color: #cfd8dc !important; 
    }
    #ai-send-button:hover { 
        background: #90caf9 !important; 
        color: #0d47a1 !important; 
    }
}

/* ===================================================================
   🌸 新·模块四：冬日物语 · 传言板 (WA2 Commentary Section)
   设计：晴空纸笺、磨砂蓝框、柠檬暖阳、蓝色墨水
   =================================================================== */

/* 1. 评论容器：晴空纸笺 (Sky Blue Note) */
.flex.items-start.gap-2:has(.break-all) {
    padding: 12px 15px !important;
    margin: 8px 0 !important;
    border-radius: 4px !important;
    
    /* 🎨 底色：极其清淡的天蓝色，带一点透明度 */
    background-color: rgba(225, 245, 254, 0.4) !important;
    
    /* 🖼️ 边框：冷蓝色细线，左侧加厚模拟装订边 */
    border: 1px solid #e1f5fe !important;
    border-left: 3px solid #90caf9 !important;
    
    /* 动画：像翻动书页一样轻盈 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* 2. 🖱️ 悬停交互：阳光照入 (The Sunlight Effect) */
.flex.items-start.gap-2:has(.break-all):hover {
    /* 🍋 注入：柠檬黄的微妙高亮 */
    background-color: #fffde7 !important; /* 极浅柠檬黄 */
    border-color: #fff59d !important;
    border-left-color: #ffd600 !important; /* 柠檬黄重点标注 */
    
    /* ☁️ 阴影：冬日晨光的漫反射 */
    box-shadow: 0 4px 15px rgba(255, 245, 157, 0.4) !important;
    
    /* 移动：轻微右移 4px */
    transform: translateX(4px) !important;
}

/* 3. 头像美化：证件照边框 */
.flex.items-start.gap-2:has(.break-all) img.rounded-full {
    border: 1px solid #b0bec5 !important;
    padding: 2px !important;
    background: #fff !important;
    transition: all 0.3s ease !important;
}
.flex.items-start.gap-2:has(.break-all):hover img.rounded-full {
    border-color: #ffd600 !important; /* 悬停变为柠檬黄 */
    transform: scale(1.1) !important;
}

/* 4. 用户名与标识：蓝调字体 */
.flex.items-start.gap-2:has(.break-all) .text-sm.text-grey-600 {
    color: #0d47a1 !important; /* 深蓝色名字 */
    font-family: 'Noto Serif SC', serif !important;
    font-weight: bold !important;
}

/* 5. 评论正文：蓝色钢笔墨水 (Blue Ink) */
.flex.items-start.gap-2:has(.break-all) .break-all {
    color: #263238 !important; /* 深灰蓝字 */
    font-family: 'Noto Serif SC', serif !important;
    line-height: 1.7 !important;
    font-size: 14.5px !important;
}

/* 6. 底部操作栏：虚线分割线 */
.flex.items-start.gap-2:has(.break-all) .text-xs.text-grey-600 {
    margin-top: 10px !important;
    padding-top: 8px !important;
    border-top: 1px dashed rgba(144, 202, 249, 0.3) !important;
    color: #78909c !important;
}

/* ❤️ 点赞按钮：柠檬暖意 */
.flex.items-start.gap-2:has(.break-all) button:has(.text-red-500) {
    background: rgba(255, 241, 118, 0.2) !important; /* 浅柠檬黄底 */
    padding: 2px 10px !important;
    border-radius: 12px !important;
    color: #fbc02d !important; /* 柠檬黄图标 */
    transition: all 0.2s !important;
}
.flex.items-start.gap-2:has(.break-all) button:has(.text-red-500):hover {
    background: #fff9c4 !important;
    transform: scale(1.1) !important;
}

/* 7. ↩️ 回复按钮：显形的蓝色钢笔字 */
.flex.items-start.gap-2:has(.break-all) .text-xs button {
    opacity: 0 !important; /* 默认完全隐形 */
    transition: opacity 0.3s, color 0.3s !important;
    font-weight: bold !important;
}
/* 悬停卡片时，操作按钮以“传达”的方式显现 */
.flex.items-start.gap-2:has(.break-all):hover .text-xs button {
    opacity: 1 !important;
    color: #1976d2 !important; 
}

/* --- 🌙 终章/夜间模式：深夜传言板 (Midnight Blue) --- */
@media (prefers-color-scheme: dark) {
    .flex.items-start.gap-2:has(.break-all) {
        background-color: rgba(38, 50, 56, 0.4) !important;
        border-color: #37474f !important;
        border-left-color: #546e7a !important;
    }
    
    .flex.items-start.gap-2:has(.break-all):hover {
        background-color: #263238 !important;
        border-left-color: #90caf9 !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    }
    
    .flex.items-start.gap-2:has(.break-all) .break-all {
        color: #cfd8dc !important;
    }
    
    .flex.items-start.gap-2:has(.break-all) .text-sm.text-grey-600 {
        color: #90caf9 !important;
    }
}

/* ===================================================================
   🎹 模块：思维链 · 零度封印 (Static Thinking Logic)
   效果：禁止点击展开 + 纯CSS状态切换 + 旋转雪花指示器
   =================================================================== */

/* 1. 物理锁定：强制禁止展开与交互 */
.CoT-Box {
    pointer-events: none !important; /* 彻底锁定，禁止点击 */
    user-select: none !important;
    border: 1px dashed #b0bec5 !important;
    background: rgba(236, 239, 241, 0.4) !important;
    margin: 10px 0 !important;
    border-radius: 4px !important;
}

/* 移除浏览器默认的展开箭头 */
.CoT-Box summary {
    list-style: none !important;
    outline: none !important;
    cursor: default !important;
    padding: 8px 12px !important;
    font-family: 'Consolas', 'Courier New', monospace !important;
    font-size: 0.85em !important;
    color: #546e7a !important;
}
.CoT-Box summary::-webkit-details-marker { display: none !important; }

/* 2. 状态渲染：在 Summary 后方注入【雪融】逻辑 */
.CoT-Box summary::after {
    content: "" !important;
    margin-left: 10px !important;
    font-weight: bold !important;
    /* 核心：绑定两个阶段的动画 */
    animation: cot-phase-shift 8s forwards !important; 
}

/* 3. 视觉点缀：左侧旋转的小雪花 */
.CoT-Box summary::before {
    content: "❄" !important;
    display: inline-block !important;
    margin-right: 8px !important;
    animation: cot-spin 3s linear infinite !important;
    color: #90caf9 !important;
}

/* --- 核心动画：雪融雪降的双阶切换 --- */
@keyframes cot-phase-shift {
    /* 第一阶段：【雪融雪降中……】 (0% - 85%) */
    0% { 
        content: "【雪融雪降中...】"; 
        color: #1976d2; 
        opacity: 0.6;
    }
    20% { content: "【雪融雪降中......】"; opacity: 1; }
    40% { content: "【雪融雪降中...】"; opacity: 0.6; }
    60% { content: "【雪融雪降中......】"; opacity: 1; }
    80% { 
        content: "【雪融雪降中...】"; 
        color: #1976d2; 
        opacity: 0.6;
    }

    /* 临界点：雪融化的一瞬间 */
    85% {
        content: "【雪融雪降中...】";
        transform: scale(1);
    }

    /* 第二阶段：【雪融雪降完毕】 (90% - 100%) */
    95%, 100% { 
        content: "【雪融雪降完毕】"; 
        color: #455a64; 
        opacity: 1;
        transform: scale(1);
    }
}

/* 雪花旋转动画 */
@keyframes cot-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 4. 内部内容区 (.u-logic) 虚化处理 */
/* 既然不能打开，内部内容应该保持一种“待定”的朦胧感 */
.CoT-Box u-logic {
    display: block !important;
    opacity: 0.4 !important;
    filter: blur(1px) !important;
    padding: 10px !important;
    background: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.9em !important;
    line-height: 1.6 !important;
}

/* ===================================================================
   ❄️ 故事引擎 2.5 · 自定义标签内核 (Custom Tag Kernel)
   =================================================================== */

/* 初始化：确保自定义标签为行内显示 */
nd, nt, ud, wh, sh, aud, act, scn, atm {
    display: inline;
}

/* NPC对话 (nd) */
nd {
    color: #263238 !important;
    font-weight: 500 !important;
}
nd::before { content: "「"; }
nd::after { content: "」"; }

/* NPC本音 (nt) */
nt {
    color: #607d8b !important;
    font-style: italic !important;
    opacity: 0.85 !important;
}
nt::before { content: "『"; }
nt::after { content: "』"; }

/* 玩家对话 (ud) */
ud {
    color: #000000 !important;
    font-weight: 700 !important;
}
ud::before { content: "「"; }
ud::after { content: "」"; }

/* 音景渲染 (aud) - 保持块状感 */
aud {
    display: block !important;
    font-size: 0.8em !important;
    color: #5c6bc0 !important;
    margin: 6px 0 !important;
    padding-left: 18px !important;
    position: relative !important;
}
aud::before {
    content: "♪" !important;
    position: absolute !important;
    left: 0 !important;
}

/* 物理动态 (act) */
act {
    color: #78909c !important;
    font-size: 0.9em !important;
    border-bottom: 1px solid #cfd8dc !important;
}
act::before { content: "*["; }
act::after { content: "]*"; }

/* 氛围指数 (atm) */
atm {
    font-size: 0.7em !important;
    color: #455a64 !important;
    background: #eceff1 !important;
    padding: 1px 6px !important;
    border-radius: 10px !important;
    margin-left: 4px !important;
}

/* ===================================================================
   🎲 模块补丁：天与之才 (Talent Slots)
   设计：冰晶容器、低饱和度分级、纯净排版
   =================================================================== */

/* 1. 天赋条容器 */
.tlt-bar {
    display: flex !important;
    gap: 8px !important;
    padding: 10px 15px !important;
    background: #fdfdfd !important;
    border-bottom: 1px solid #eceff1 !important; /* 极淡的分隔线 */
    align-items: center !important;
}

/* 2. 单个槽位 (.slot) */
.slot {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important; /* 图标和文字横向排列，更紧凑 */
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    
    background: #ffffff !important;
    border: 1px solid #cfd8dc !important;
    border-radius: 3px !important;
    padding: 6px 4px !important;
    position: relative !important;
    cursor: help !important;
    
    /* 玻璃微光质感 */
    box-shadow: inset 0 0 5px rgba(255,255,255,0.8) !important;
    transition: all 0.2s ease !important;
}

/* 槽位悬停交互 */
.slot:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
    background: #fafafa !important;
}

/* 3. 内容样式 */
.slot .ico {
    font-style: normal !important;
    font-size: 1.1em !important;
    line-height: 1 !important;
    opacity: 0.8 !important;
}
.slot .nm {
    font-family: 'Noto Serif SC', serif !important;
    font-size: 0.8em !important;
    font-weight: 600 !important;
    color: #455a64 !important;
    letter-spacing: 0.5px !important;
}

/* 4. 稀有度配色 (极简边框色区分) */

/* ✨ Gold: 黯淡金 */
.slot.gold { border-color: #ffe082 !important; background: linear-gradient(to bottom, #fff, #fffde7) !important; }
.slot.gold .ico { color: #fbc02d !important; }

/* 🥈 Silver: 冰川银 */
.slot.silver { border-color: #b0bec5 !important; background: linear-gradient(to bottom, #fff, #eceff1) !important; }
.slot.silver .ico { color: #78909c !important; }

/* 🥉 Bronze: 沉稳铜 */
.slot.bronze { border-color: #d7ccc8 !important; background: linear-gradient(to bottom, #fff, #efebe9) !important; }
.slot.bronze .ico { color: #8d6e63 !important; }

/* 5. 重随按钮 (Reroll) */
.reroll-btn {
    width: 20px !important;
    height: 20px !important;
    border: none !important;
    background: transparent !important;
    color: #b0bec5 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s !important;
    margin-left: 2px !important;
}
.reroll-btn:hover {
    color: #546e7a !important;
    transform: rotate(180deg) !important;
}

/* 悬浮窗修复：确保 d 属性内容能显示 */
.slot[d]:hover::after {
    z-index: 10005 !important; /* 层级高于手帐本体 */
    width: max-content !important;
    min-width: 120px !important;
}

/* ===================================================================
   ❄️ 新·模块八：冰晶枢机 (The Crystal Monitor)
   设计：静止为旋转雪花，展开为磨砂玻璃卷轴
   =================================================================== */

/* 1. 核心容器：初始化为一颗冰晶 */
.MuiStack-root.text-purple-500.mt-1.css-1kz283j {
    /* 📦 布局控制 */
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    
    /* 📏 尺寸：默认 32px 圆形 */
    width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    
    /* 🎨 外观：完全透明，只靠伪元素绘制雪花 */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 16px !important;
    
    position: relative !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    cursor: help !important;
    z-index: 20 !important; /* 确保层级够高 */
}

/* 2. ❄️ 旋转雪花 (利用 ::before 绘制) */
.MuiStack-root.text-purple-500.mt-1.css-1kz283j::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 32px !important;
    height: 32px !important;
    
    /* 🎨 绘制雪花 SVG (六角冰晶) */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%2390caf9' stroke-width='1.5'%3E%3Cpath d='M12 2v20M2 12h20M4.93 4.93l14.14 14.14M4.93 19.07L19.07 4.93'/%3E%3Cpath d='M12 2l2 4-2-1-2 1 2-4zm0 20l2-4-2 1-2-1 2 4zM2 12l4-2-1 2 1 2-4-2zm20 0l-4-2 1 2-1 2 4-2z' fill='%2390caf9' stroke='none'/%3E%3C/svg%3E") !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    
    /* 🔄 旋转动画：缓慢飘落感 */
    animation: crystal-spin 6s linear infinite !important;
    z-index: 2 !important;
    filter: drop-shadow(0 0 2px rgba(144, 202, 249, 0.5)) !important; /* 冰蓝光晕 */
    transition: all 0.4s !important;
}

/* 旋转关键帧 */
@keyframes crystal-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 3. 🖱️ 交互状态：展开为磨砂面板 (Hover / Active) */
/* 适配：PC端悬停 OR 移动端点击聚焦 */
.MuiStack-root.text-purple-500.mt-1.css-1kz283j:hover,
.MuiStack-root.text-purple-500.mt-1.css-1kz283j:active,
.MuiStack-root.text-purple-500.mt-1.css-1kz283j:focus-within {
    /* 📏 展开尺寸 */
    width: auto !important;
    max-width: 400px !important; 
    padding: 0 15px 0 36px !important; /* 左侧留出雪花位置 */
    
    /* 🧊 材质：磨砂玻璃 (Frosted Glass) */
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid #b0bec5 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
    border-radius: 20px !important; /* 更圆润的胶囊形 */
}

/* 展开时：雪花停止旋转并定格 */
.MuiStack-root.text-purple-500.mt-1.css-1kz283j:hover::before,
.MuiStack-root.text-purple-500.mt-1.css-1kz283j:focus-within::before {
    animation-play-state: paused !important;
    transform: rotate(0deg) scale(0.9) !important; /* 稍微缩小 */
}

/* 4. 📝 文字内容美化 */
/* 默认：隐形 */
.MuiStack-root.text-purple-500.mt-1.css-1kz283j p {
    opacity: 0 !important;
    width: 0 !important; /* 物理占用为0，防止撑开 */
    transition: opacity 0.2s ease 0s !important;
    font-family: 'Noto Serif SC', sans-serif !important;
    font-size: 12px !important;
    color: #455a64 !important; /* 冷灰色字 */
}

/* 展开：显形 */
.MuiStack-root.text-purple-500.mt-1.css-1kz283j:hover p,
.MuiStack-root.text-purple-500.mt-1.css-1kz283j:focus-within p {
    opacity: 1 !important;
    width: auto !important;
    margin: 0 6px !important;
    transition: opacity 0.3s ease 0.2s !important;
}

/* 5. 📱 移动端特别适配 (Mobile Fixes) */
@media screen and (max-width: 768px) {
    .MuiStack-root.text-purple-500.mt-1.css-1kz283j {
        /* 移动端稍微放大触控区 */
        width: 36px !important;
        height: 36px !important;
    }
    
    /* 雪花也对应放大 */
    .MuiStack-root.text-purple-500.mt-1.css-1kz283j::before {
        width: 36px !important;
        height: 36px !important;
    }
    
    /* 展开时防止超出屏幕 */
    .MuiStack-root.text-purple-500.mt-1.css-1kz283j:active,
    .MuiStack-root.text-purple-500.mt-1.css-1kz283j:focus-within {
        max-width: 85vw !important; /* 限制最大宽度为屏幕宽度的85% */
        background-color: rgba(255, 255, 255, 0.95) !important; /* 移动端背景更实一些，防止字看不清 */
    }
}

/* --- 🌙 终章模式 (Dark Mode) --- */
@media (prefers-color-scheme: dark) {
    /* 雪花：换成银白色 */
    .MuiStack-root.text-purple-500.mt-1.css-1kz283j::before {
        background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23eceff1' stroke-width='1.5'%3E%3Cpath d='M12 2v20M2 12h20M4.93 4.93l14.14 14.14M4.93 19.07L19.07 4.93'/%3E%3Cpath d='M12 2l2 4-2-1-2 1 2-4zm0 20l2-4-2 1-2 1 2-4zM2 12l4-2-1 2 1 2-4-2zm20 0l-4-2 1 2-1 2 4-2z' fill='%23eceff1' stroke='none'/%3E%3C/svg%3E") !important;
        filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3)) !important;
    }

    /* 展开面板：深夜磨砂 */
    .MuiStack-root.text-purple-500.mt-1.css-1kz283j:hover,
    .MuiStack-root.text-purple-500.mt-1.css-1kz283j:focus-within {
        background-color: rgba(38, 50, 56, 0.85) !important;
        border-color: #546e7a !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
    }

    /* 文字 */
    .MuiStack-root.text-purple-500.mt-1.css-1kz283j p {
        color: #cfd8dc !important;
    }
}

/* ===================================================================
   🩹 补丁：冰晶枢机 · 显示适配修复 (Responsive Fix Patch)
   目标：解决手机端文字截断，优化多端显示布局
   =================================================================== */

/* 1. 全局放宽限制：允许在展开时自动调整高度和换行 */
/* 针对所有展开状态 (hover/active/focus-within) */
.MuiStack-root.text-purple-500.mt-1.css-1kz283j:hover,
.MuiStack-root.text-purple-500.mt-1.css-1kz283j:active,
.MuiStack-root.text-purple-500.mt-1.css-1kz283j:focus-within {
    white-space: normal !important; /* 关键：允许文字换行 */
    height: auto !important;        /* 关键：高度自动撑开 */
    min-height: 36px !important;    /* 保持基本的胶囊高度 */
    
    /* 稍微增加上下的呼吸感 */
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    
    /* 优化宽度表现：尽可能紧凑，但不要超过屏幕 */
    width: fit-content !important;
    max-width: 92vw !important; /* 留出一点点屏幕边距 */

    /* 确保内容垂直居中 */
    align-items: center !important;
}

/* 2. 内部文字优化 */
.MuiStack-root.text-purple-500.mt-1.css-1kz283j p {
    /* 确保文字本身允许换行 */
    white-space: normal !important;
    line-height: 1.5 !important; /* 增加行高，多行显示时不拥挤 */
    
    /* 在电脑端保持左对齐，看着更整齐 */
    text-align: left !important;
}

/* 3. 📱 移动端深度适配 (针对窄屏手机优化) */
@media screen and (max-width: 600px) {
    /* 在手机上展开时 */
    .MuiStack-root.text-purple-500.mt-1.css-1kz283j:active,
    .MuiStack-root.text-purple-500.mt-1.css-1kz283j:focus-within {
        /* 稍微缩小字号，让一行能塞下更多东西 */
        font-size: 11px !important;
        
        /* 如果实在太窄导致换行了，让文字居中对齐会更好看 */
        text-align: center !important;
        justify-content: center !important; 
        
        /* 调整内边距，确保左侧雪花不和文字打架 */
        padding-left: 40px !important; 
        padding-right: 10px !important;
    }

    /* 手机端文字强制居中 */
    .MuiStack-root.text-purple-500.mt-1.css-1kz283j:active p,
    .MuiStack-root.text-purple-500.mt-1.css-1kz283j:focus-within p {
        text-align: center !important;
        margin: 0 !important; /* 去除多余边距 */
    }
}

/* ===================================================================
   ⚡️ 交互补丁：触感反馈与电子脉冲 (Interaction FX)
   目标：模拟实体按键的阻尼感 & 屏幕点亮的瞬间
   =================================================================== */

/* 1. 🖱️ 按键物理反馈：按下时的下沉感 */
.group .bg-gray-100\/90 summary:active {
    /* 物理位移：模拟弹簧被压缩 */
    transform: translateY(2px) scale(0.99) !important;
    
    /* 阴影反转：从凸起变为内陷 */
    box-shadow: 
        inset 0 3px 5px rgba(0,0,0,0.3), /* 内部阴影，模拟凹陷 */
        0 0 0 transparent !important;    /* 外部阴影消失 */
    
    /* 颜色变暗：模拟受光面减少 */
    background: linear-gradient(to bottom, #263238 0%, #1e272c 100%) !important;
    border-top-color: #37474F !important; /* 顶部高光变暗 */
}

/* 2. ✨ 悬停流光：2000年代经典的水晶反光扫过效果 */
.group .bg-gray-100\/90 summary {
    position: relative !important;
    overflow: hidden !important; /* 限制流光不跑出去 */
}

/* 创建一道流光 */
.group .bg-gray-100\/90 summary::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important; /* 初始位置在左侧外面 */
    width: 50% !important;
    height: 100% !important;
    
    /* 流光渐变：透明 -> 亮白 -> 透明 */
    background: linear-gradient(
        to right, 
        transparent 0%, 
        rgba(255,255,255,0.2) 50%, 
        transparent 100%
    ) !important;
    
    transform: skewX(-25deg) !important; /* 倾斜流光 */
    transition: none !important; /* 默认无动画 */
    pointer-events: none !important;
}

/* 悬停时触发流光动画 */
.group .bg-gray-100\/90 summary:hover::after {
    left: 200% !important; /* 扫到右侧外面 */
    transition: left 0.6s ease-in-out !important; /* 0.6秒扫过 */
}

/* 3. 📺 屏幕点亮：内容展开时的 CRT 扫描线动画 */
@keyframes screenTurnOn {
    0% {
        opacity: 0;
        transform: scaleY(0.8) translateY(-10px);
        filter: brightness(1.5); /* 刚通电时过曝 */
    }
    50% {
        filter: brightness(1.2);
    }
    100% {
        opacity: 1;
        transform: scaleY(1) translateY(0);
        filter: brightness(1);
    }
}

/* 应用动画到内容区 */
.group .bg-gray-100\/90 details[open] > div {
    transform-origin: top center !important; /* 从顶部展开 */
    animation: screenTurnOn 0.3s cubic-bezier(0.2, 0.9, 0.4, 1) !important; /* 快速且有弹性的展开 */
    
    /* 增加一道顶部高光，模拟屏幕玻璃边缘 */
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5) !important;
}

/* 4. 🔄 图标增强：更带感的齿轮转动 */
.group .bg-gray-100\/90 summary:active::before {
    /* 按下时图标稍微缩小，增加点击实感 */
    transform: scale(0.9) rotate(15deg) !important;
    transition: transform 0.1s !important;
}

/* 展开状态的图标微调 */
.group .bg-gray-100\/90 details[open] > summary::before {
    /* 展开后有一个持续的微弱呼吸，表示“运行中” */
    animation: working-glow 2s infinite alternate !important;
}

@keyframes working-glow {
    from { text-shadow: 0 0 5px rgba(79, 195, 247, 0.6); }
    to { text-shadow: 0 0 12px rgba(79, 195, 247, 1); }
}

/* 5. 📱 移动端触摸优化 */
@media (hover: none) {
    /* 手机上禁用流光，因为手指遮挡看不见，且容易卡顿 */
    .group .bg-gray-100\/90 summary::after { display: none !important; }
    
    /* 强化点击变色反馈 */
    .group .bg-gray-100\/90 summary:active {
        background: #263238 !important; /* 直接变深色 */
    }
}

/* ===================================================================
   ❄️ 模块二补丁：冬日多重奏 (Texture Overlay Patch)
   目标：在保留网格的基础上，增加“纸张纹理”、“光晕”和“双重边框”
   =================================================================== */

/* 1. 背景层级堆叠：从单层纹理升级为复合纹理 */
.group .bg-gray-100\/90::before {
    /* [底色] 保持纯净 */
    background-color: #FAFAFA !important;

    /* [核心堆料] 多层背景叠加 (由上至下) */
    background-image: 
        /* 层1：左侧装饰条 (带微弱投影) */
        linear-gradient(to right, #FFB74D 5px, rgba(0,0,0,0.05) 5px, transparent 8px),
        
        /* 层2：环境光晕 (Vignette) - 让四周稍暗，突出中心文字 */
        radial-gradient(circle at 50% 50%, transparent 60%, rgba(176, 190, 197, 0.1) 100%),
        
        /* 层3：您要求的【保留网格】 - 经典的菱形交叉线 (Diamond Grid) */
        repeating-linear-gradient(45deg, 
            rgba(41, 182, 246, 0.08) 0px, 
            rgba(41, 182, 246, 0.08) 1px, 
            transparent 1px, 
            transparent 20px
        ), 
        repeating-linear-gradient(-45deg, 
            rgba(41, 182, 246, 0.08) 0px, 
            rgba(41, 182, 246, 0.08) 1px, 
            transparent 1px, 
            transparent 20px
        ),
        
        /* 层4：底层微噪点/方格 (Micro Grid) - 增加细腻度，防止大网格显得太空 */
        linear-gradient(0deg, rgba(0,0,0,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px)
        !important;

    /* [尺寸控制] 对应上述四层 */
    background-size: 
        100% 100%, /* 装饰条 */
        100% 100%, /* 光晕 */
        30px 30px, /* 菱形大网格 */
        30px 30px, /* 菱形大网格 */
        10px 10px, /* 微细方格 */
        10px 10px  /* 微细方格 */
        !important;

    /* [双重边框] 模拟高级信笺的压痕 */
    border: 1px solid #B0BEC5 !important; /* 外框 */
    box-shadow: 
        inset 0 0 0 2px #FFFFFF, /* 内层白边 (垫底) */
        inset 0 0 0 3px #ECEFF1, /* 内层灰线 (压痕) */
        0 8px 25px rgba(41, 182, 246, 0.15) !important; /* 外部柔光 */
}

/* 2. 夜间模式适配：深色堆料 */
.dark .group .bg-gray-100\/90::before {
    background-color: #1A2332 !important;

    background-image: 
        /* 层1：深紫装饰条 */
        linear-gradient(to right, #5E35B1 5px, rgba(0,0,0,0.3) 5px, transparent 8px),
        /* 层2：暗角 */
        radial-gradient(circle at 50% 50%, transparent 50%, rgba(0,0,0,0.4) 100%),
        /* 层3：菱形网格 (银色微光) */
        repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 20px), 
        repeating-linear-gradient(-45deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 20px),
        /* 层4：底层微网格 */
        linear-gradient(0deg, rgba(255,255,255,0.01) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.01) 1px, transparent 1px)
        !important;

    border-color: #37474F !important;
    box-shadow: 
        inset 0 0 0 1px #263238, 
        inset 0 0 0 2px #37474F,
        0 10px 30px rgba(0,0,0,0.5) !important;
}

/* 3. 右下角雪花微调：增加一点点模糊，使其融入背景 */
.group .bg-gray-100\/90::after {
    filter: blur(2px) !important; /* 景深感 */
    opacity: 0.15 !important;     /* 稍微调低，不要喧宾夺主 */
}

/* ===================================================================
   🌸 模块十三（修复版）：校庭留言板 (Commentary Section - High Legibility)
   设计：加固底色、深色墨水、清晰排版
   =================================================================== */

/* --- 1. 顶部排序按钮组 --- */
.MuiStack-root.css-1dmzxoz {
    background: transparent !important;
    padding: 10px 0 !important;
    gap: 12px !important;
}

.MuiStack-root.css-1dmzxoz button {
    font-family: 'Noto Serif SC', serif !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    padding: 5px 15px !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
}

/* 选中：更实心，保证文字清晰 */
.MuiStack-root.css-1dmzxoz button.MuiButton-contained {
    background: #4FC3F7 !important;
    color: #01579B !important;
    border: 1px solid #29B6F6 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* 未选中 */
.MuiStack-root.css-1dmzxoz button.MuiButton-outlined {
    background: rgba(255,255,255,0.5) !important; /* 加一点白底防止背景干扰 */
    color: #607D8B !important; /* 加深灰色 */
    border: 1px solid #CFD8DC !important;
}

/* --- 2. 评论卡片容器 (核心优化) --- */
.group .flex.items-start.gap-2 {
    padding: 18px 20px !important; /* 增加内边距 */
    margin: 12px 0 !important;
    border-radius: 6px !important;
    
    /* 🎨 [修复点1] 背景不再过度透明 */
    /* 使用 90% 不透明度的浅蓝白，遮挡底部网格，确保文字清晰 */
    background-color: rgba(236, 248, 255, 0.92) !important;
    
    /* 边框 */
    border: 1px solid #B3E5FC !important;
    border-left: 5px solid #29B6F6 !important; /* 加粗左侧条，增强视觉索引 */
    
    /* 阴影 */
    box-shadow: 0 2px 6px rgba(0,0,0,0.03) !important;
    
    transition: all 0.2s ease-out !important;
    position: relative !important;
}

/* --- 3. 悬停交互：柠檬暖阳 --- */
.group .flex.items-start.gap-2:hover {
    /* 悬停时背景变为极浅的米黄色，保持高对比度 */
    background-color: #FFFDE7 !important; 
    border-color: #FFF59D !important;
    border-left-color: #FDD835 !important; /* 明亮的柠檬黄 */
    
    transform: translateY(-2px) translateX(2px) !important;
    box-shadow: 0 6px 15px rgba(253, 216, 53, 0.15) !important;
}

/* --- 4. 用户信息与头像 --- */
.group img.rounded-full {
    border: 2px solid #FFFFFF !important;
    background: #FFF !important;
}

.group .text-sm.text-grey-600 {
    font-family: 'Noto Serif SC', sans-serif !important; /* 名字稍微用黑体增加辨识度，或保持宋体但加粗 */
    font-size: 14px !important;
    margin-bottom: 4px !important;
}

.group .text-sm.text-grey-600 .font-bold {
    color: #0277BD !important; /* 深海蓝，对比度高 */
    font-weight: 800 !important;
}

/* --- 5. [修复点2] 评论正文 (高可读性) --- */
.group .break-all {
    /* 🎨 字体颜色：使用极深的蓝灰色，甚至接近黑色 */
    color: #1a2327 !important; 
    
    font-family: 'Noto Serif SC', 'SimSun', serif !important;
    font-weight: 500 !important; /* 稍微加粗一点点，防止宋体发虚 */
    
    /* 📐 排版优化 */
    font-size: 15px !important; /* 稍微加大字号 */
    line-height: 1.8 !important; /* 增加行高，让视线更舒服 */
    letter-spacing: 0.02em !important;
    
    margin-top: 8px !important;
}

/* --- 6. 底部信息栏 --- */
.group .text-xs.text-grey-600.font-light {
    margin-top: 12px !important;
    padding-top: 10px !important;
    border-top: 1px dashed rgba(176, 190, 197, 0.4) !important; /* 分割线加深一点 */
    color: #78909c !important; /* 次要信息颜色 */
    font-family: 'Arial', sans-serif !important; /* 数字用无衬线体更清晰 */
}

/* --- 7. 交互按钮优化 --- */
/* 保持“悬停显示”逻辑，但增加显形后的对比度 */
.group .flex.items-center.gap-2 button,
.group .hover\:underline {
    opacity: 0 !important;
    transition: opacity 0.2s !important;
    color: #0288D1 !important;
    font-weight: bold !important;
    font-size: 12px !important;
}

/* 卡片悬停时显示 */
.group .flex.items-start.gap-2:hover .flex.items-center.gap-2 button,
.group .flex.items-start.gap-2:hover .hover\:underline {
    opacity: 1 !important;
}

/* 点赞按钮常驻显示，但颜色淡 */
.group button:has(svg) {
    opacity: 0.7 !important;
}
.group button:has(svg):hover {
    opacity: 1 !important;
    color: #E53935 !important;
}

/* --- 8. 隐藏多余分割线 --- */
.style_divider__mW0YX { display: none !important; }

/* --- 🌙 夜间模式适配 (高对比度版) --- */
@media (prefers-color-scheme: dark) {
    /* 排序按钮 */
    .MuiStack-root.css-1dmzxoz button.MuiButton-contained {
        background: #1565C0 !important;
        color: #FFFFFF !important;
    }
    .MuiStack-root.css-1dmzxoz button.MuiButton-outlined {
        background: rgba(255,255,255,0.05) !important;
        color: #B0BEC5 !important;
    }

    /* 评论卡片：深色背景，不再太透明 */
    .group .flex.items-start.gap-2 {
        background-color: #1e252b !important; /* 接近实色的深蓝灰 */
        border: 1px solid #37474F !important;
        border-left: 5px solid #5C6BC0 !important;
    }
    
    /* 悬停：稍亮 */
    .group .flex.items-start.gap-2:hover {
        background-color: #263238 !important;
        border-color: #64B5F6 !important;
        border-left-color: #42A5F5 !important;
    }

    /* 文字：银白色，确保夜间清晰 */
    .group .text-sm.text-grey-600 .font-bold { color: #82B1FF !important; }
    .group .break-all { color: #ECEFF1 !important; font-weight: 400 !important; }
    .group .text-xs.text-grey-600 { color: #90A4AE !important; }
}

/* ===================================================================
   📧 补丁：传达之键 (The Transmission Key)
   目标：将平面的发送图标升级为实体水晶按键，增加发射动效
   =================================================================== */

/* 1. 容器：实体水晶按键结构 */
#ai-send-button {
    /* 📏 尺寸微调：比普通按钮稍微宽一点，更有分量 */
    width: 42px !important;
    height: 38px !important;
    border-radius: 6px !important;
    
    /* 🎨 材质：冬日冰晶 (Ice Crystal) */
    /* 经典的 50% 硬切光泽，模拟早期拟物化 UI */
    background: linear-gradient(
        to bottom, 
        #FFFFFF 0%, 
        #E3F2FD 50%, 
        #BBDEFB 51%, 
        #E3F2FD 100%
    ) !important;
    
    /* 🖼️ 边框：具有物理厚度 */
    border: 1px solid #90CAF9 !important;
    border-bottom: 3px solid #64B5F6 !important; /* 底部加厚，模拟实体键高 */
    
    /* ✨ 阴影与光泽 */
    box-shadow: 
        0 2px 5px rgba(33, 150, 243, 0.15), /* 外部投影 */
        inset 0 1px 0 #FFFFFF !important;   /* 顶部高光 */
        
    /* ⚡ 状态过渡 */
    transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) !important; /* 弹性过渡 */
    margin-left: 8px !important; /* 与输入框拉开一点距离 */
}

/* 2. 图标 (SVG)：深蓝墨水 -> 橙色信号 */
#ai-send-button svg {
    font-size: 20px !important;
    color: #1976D2 !important; /* 默认：深冬蓝 */
    filter: drop-shadow(0 1px 0 rgba(255,255,255,0.8)) !important; /* 刻蚀感 */
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    transform-origin: center center !important;
}

/* 3. 🖱️ 悬停 (Hover)：蓄力状态 */
#ai-send-button:hover {
    /* 背景变暖：变成夕阳橙 (Setsuna Orange) */
    background: linear-gradient(
        to bottom, 
        #FFF3E0 0%, 
        #FFE0B2 50%, 
        #FFB74D 51%, 
        #FFE0B2 100%
    ) !important;
    
    border-color: #FFB74D !important;
    border-bottom-color: #F57C00 !important;
    transform: translateY(-1px) !important; /* 微微浮起 */
    box-shadow: 0 4px 10px rgba(255, 167, 38, 0.4) !important; /* 橙色辉光 */
}

/* 悬停时图标的变化：纸飞机起飞姿态 */
#ai-send-button:hover svg {
    color: #E65100 !important; /* 图标变深橙 */
    transform: translate(3px, -3px) scale(1.1) rotate(-10deg) !important; /* 向右上方起飞 */
}

/* 4. 👇 点击 (Active)：发射！ */
#ai-send-button:active {
    /* 物理下沉 */
    transform: translateY(2px) !important;
    border-bottom-width: 1px !important; /* 底部厚度消失 */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2) !important; /* 内阴影 */
    background: #FFCC80 !important; /* 高光消失，变平 */
}

#ai-send-button:active svg {
    transform: translate(5px, -5px) scale(0.9) !important; /* 飞得更远 */
    opacity: 0.8 !important;
}

/* --- 🌙 夜间模式适配 --- */
.dark #ai-send-button {
    /* 黑曜石材质 */
    background: linear-gradient(
        to bottom, 
        #546E7A 0%, 
        #37474F 50%, 
        #263238 51%, 
        #37474F 100%
    ) !important;
    border-color: #455A64 !important;
    border-bottom-color: #102027 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
}

.dark #ai-send-button svg {
    color: #90CAF9 !important; /* 夜间图标发光 */
    filter: drop-shadow(0 0 2px rgba(144, 202, 249, 0.5)) !important;
}

/* 夜间悬停：星光蓝 */
.dark #ai-send-button:hover {
    background: linear-gradient(
        to bottom, 
        #E3F2FD 0%, 
        #2196F3 50%, 
        #1565C0 51%, 
        #2196F3 100%
    ) !important;
    border-color: #42A5F5 !important;
    border-bottom-color: #0D47A1 !important;
}
.dark #ai-send-button:hover svg {
    color: #FFFFFF !important;
}

/* ===================================================================
   💰 模块补丁：资产管理 (Assets & Wallet)
   设计：存折数字、液晶屏风格、右侧对齐
   =================================================================== */

/* 1. 容器布局调整：左右撑开 */
.tlt-bar {
    justify-content: space-between !important; /* 关键：左右分离 */
    padding: 8px 15px !important;
}

/* 左侧天赋组 */
.tlt-group {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    flex: 1 !important; /* 占据剩余空间 */
}

/* 2. 中间分割线 (竖线) */
.divider-v {
    width: 1px !important;
    height: 20px !important;
    background: linear-gradient(to bottom, transparent, #CFD8DC, transparent) !important;
    margin: 0 15px !important;
}

/* 3. 右侧：持有金 (The Wallet) */
.yen-balance {
    display: flex !important;
    align-items: baseline !important; /* 基线对齐，让符号和数字协调 */
    gap: 4px !important;
    
    /* 材质：模拟账本的一角 */
    padding: 4px 12px !important;
    background: #FDFBF7 !important; /* 极淡的米色，像纸张 */
    border: 1px solid #D7CCC8 !important;
    border-radius: 4px !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05) !important;
    
    cursor: default !important;
    transition: all 0.2s !important;
}

/* 悬停效果：显示一点点财迷的金色光晕 */
.yen-balance:hover {
    border-color: #FFCA28 !important;
    box-shadow: 0 2px 8px rgba(255, 202, 40, 0.2) !important;
    transform: translateY(-1px) !important;
}

/* 4. 货币符号 (Yen) */
.yen-balance .currency {
    font-family: 'Georgia', serif !important;
    color: #8D6E63 !important; /* 铜币色 */
    font-size: 0.9em !important;
    font-weight: bold !important;
}

/* 5. 金额数字 (Digital Numbers) */
.yen-balance .amount {
    /* 使用等宽字体，像电子表或打印账单 */
    font-family: 'Fira Code', 'Courier New', monospace !important;
    font-weight: 600 !important;
    color: #3E2723 !important; /* 深褐墨色 */
    font-size: 1.1em !important;
    letter-spacing: -0.5px !important;
}

/* --- 🌙 夜间模式适配 --- */
.dark .yen-balance {
    background: #263238 !important;
    border-color: #455A64 !important;
}
.dark .yen-balance .currency { color: #BCAAA4 !important; }
.dark .yen-balance .amount { color: #ECEFF1 !important; }
.dark .yen-balance:hover {
    border-color: #FFD54F !important;
    box-shadow: 0 0 10px rgba(255, 213, 79, 0.1) !important;
}

/* --- 📱 移动端适配 --- */
@media screen and (max-width: 480px) {
    /* 手机上可能太挤，稍微缩小一点间距 */
    .tlt-bar { padding: 8px 10px !important; }
    .tlt-group { gap: 4px !important; }
    .divider-v { margin: 0 8px !important; }
    .yen-balance { padding: 2px 8px !important; }
    .yen-balance .amount { font-size: 1em !important; }
}

/* ===================================================================
   RILL WA2:SR 终极修复补丁 v2.0
   目标：精准匹配 RILL 实际 DOM 结构
   =================================================================== */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. 气泡容器精准定位
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 只对 AI 助手的输出气泡生效 */
.group.is-assistant .rili-markdown-renderer {
    position: relative !important;
    background: transparent !important;
    border: none !important;
    padding: 35px 45px 35px 50px !important;
    overflow: hidden !important;
    margin: 1.5em auto !important;
    max-width: 960px !important;
    box-sizing: border-box !important;
}

/* 气泡背景层 */
.group.is-assistant .rili-markdown-renderer::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    
    background-color: #FAFAFA !important;
    background-image: 
        linear-gradient(to right, #FFB74D 6px, transparent 6px),
        repeating-linear-gradient(45deg, 
            rgba(176, 190, 197, 0.15) 0px, 
            rgba(176, 190, 197, 0.15) 1px, 
            transparent 1px, 
            transparent 15px
        ), 
        repeating-linear-gradient(-45deg, 
            rgba(176, 190, 197, 0.15) 0px, 
            rgba(176, 190, 197, 0.15) 1px, 
            transparent 1px, 
            transparent 15px
        ) !important;
    background-size: 100% 100%, 30px 30px, 30px 30px !important;
    background-repeat: no-repeat, repeat, repeat !important;
    border: 1px solid #CFD8DC !important;
    border-radius: 2px !important;
    box-shadow: 
        0 4px 15px rgba(0,0,0,0.05), 
        inset 0 0 20px rgba(255,255,255,0.8) !important;
}

/* 雪花水印 */
.group.is-assistant .rili-markdown-renderer::after {
    content: '❄' !important;
    position: absolute !important;
    bottom: -30px !important;
    right: -20px !important;
    font-size: 160px !important;
    line-height: 1 !important;
    z-index: -1 !important;
    pointer-events: none !important;
    color: #E1F5FE !important;
    opacity: 0.4 !important;
    transform: rotate(15deg) !important;
    filter: blur(1px) !important;
}

/* 夜间模式 */
.dark .group.is-assistant .rili-markdown-renderer::before {
    background-color: #1c2226 !important;
    background-image: 
        linear-gradient(to right, #5E35B1 6px, transparent 6px),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 15px), 
        repeating-linear-gradient(-45deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 15px) !important;
    border-color: #37474F !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3), inset 0 0 30px rgba(0,0,0,0.2) !important;
}

.dark .group.is-assistant .rili-markdown-renderer::after {
    color: #37474F !important;
    opacity: 0.2 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. 折叠栏 <details> 修复
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 通用 details 重置（确保不受全局污染） */
.rili-markdown-renderer details {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    margin: 15px auto !important;
    position: relative !important;
    z-index: 3 !important;
}

/* 思维链 CoT-Box */
.rili-markdown-renderer .CoT-Box {
    background: #F2F4F6 !important;
    border: 1px solid #b0bec5 !important;
    border-radius: 2px !important;
    padding: 2px !important;
    backdrop-filter: none !important;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.05) !important;
}

.rili-markdown-renderer .CoT-Box > summary {
    background: linear-gradient(to bottom, #546E7A 0%, #37474F 50%, #263238 51%, #37474F 100%) !important;
    color: #FFFFFF !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
    border: 1px solid #263238 !important;
    border-top: 1px solid #78909C !important;
    border-radius: 2px !important;
    text-shadow: 1px 1px 0 #000000 !important;
    font-family: 'SimSun', 'MS Song', serif !important;
    font-size: 1.1em !important;
    font-weight: bold !important;
    list-style: none !important;
    transition: all 0.2s !important;
}

.rili-markdown-renderer .CoT-Box > summary::-webkit-details-marker {
    display: none !important;
}

.rili-markdown-renderer .CoT-Box > summary::before {
    content: '❖' !important;
    font-size: 1.1em !important;
    margin-right: 8px !important;
    display: inline-block !important;
    color: #FFB74D !important;
    text-shadow: 0 0 5px rgba(255, 183, 77, 0.8) !important;
    transition: transform 0.3s ease !important;
}

.rili-markdown-renderer .CoT-Box[open] > summary::before {
    transform: rotate(90deg) !important;
    color: #4FC3F7 !important;
    text-shadow: 0 0 5px rgba(79, 195, 247, 0.8) !important;
}

.rili-markdown-renderer .CoT-Box > summary:hover {
    background: linear-gradient(to bottom, #78909C 0%, #546E7A 50%, #455A64 51%, #546E7A 100%) !important;
}

/* 公告栏 .bb */
.rili-markdown-renderer details.bb,
.rili-markdown-renderer details.sh,
.rili-markdown-renderer details.cr,
.rili-markdown-renderer details.jr {
    background: #f8f9fa !important;
    border: 1px solid #cfd8dc !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    padding: 0 !important;
}

.rili-markdown-renderer details.bb > summary,
.rili-markdown-renderer details.sh > summary,
.rili-markdown-renderer details.cr > summary,
.rili-markdown-renderer details.jr > summary {
    background: #eceff1 !important;
    color: #455a64 !important;
    padding: 6px 12px !important;
    font-size: 0.85em !important;
    font-weight: bold !important;
    border-bottom: 1px solid #cfd8dc !important;
    cursor: pointer !important;
    list-style: none !important;
}

.rili-markdown-renderer details.bb > summary::-webkit-details-marker,
.rili-markdown-renderer details.sh > summary::-webkit-details-marker,
.rili-markdown-renderer details.cr > summary::-webkit-details-marker,
.rili-markdown-renderer details.jr > summary::-webkit-details-marker {
    display: none !important;
}

/* 夜间模式 */
.dark .rili-markdown-renderer .CoT-Box {
    background: #18191A !important;
    border-color: #37474F !important;
}

.dark .rili-markdown-renderer .CoT-Box > summary {
    background: linear-gradient(to bottom, #424242 0%, #212121 50%, #000000 51%, #212121 100%) !important;
    border-color: #000 !important;
    border-top-color: #616161 !important;
}

.dark .rili-markdown-renderer details.bb,
.dark .rili-markdown-renderer details.sh,
.dark .rili-markdown-renderer details.cr,
.dark .rili-markdown-renderer details.jr {
    background: #1c2529 !important;
    border-color: #37474f !important;
}

.dark .rili-markdown-renderer details.bb > summary,
.dark .rili-markdown-renderer details.sh > summary,
.dark .rili-markdown-renderer details.cr > summary,
.dark .rili-markdown-renderer details.jr > summary {
    background: #263238 !important;
    color: #cfd8dc !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. 功能按钮强制显示
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 按钮容器层级提升 */
.flex.items-center.gap-1.ml-auto {
    position: relative !important;
    z-index: 99999 !important;
}

.bg-muted.rounded.flex.p-0\.5 {
    position: relative !important;
    z-index: 100000 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(8px) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid #e5e7eb !important;
}

.bg-muted.rounded.flex.p-0\.5 button {
    position: relative !important;
    z-index: 100001 !important;
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-flex !important;
}

/* 强制按钮可见（覆盖 group-hover 逻辑） */
.flex.items-center.gap-1.ml-auto,
.flex.items-center.gap-1.ml-auto * {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 按钮交互 */
.bg-muted.rounded.flex.p-0\.5 button:hover {
    background: #f3f4f6 !important;
    transform: none !important;
}

/* 移动端按钮保护 */
@media screen and (max-width: 768px) {
    .flex.items-center.gap-1.ml-auto {
        opacity: 1 !important;
    }
    
    .bg-muted.rounded.flex.p-0\.5 {
        position: sticky !important;
        top: 0 !important;
        background: rgba(255, 255, 255, 1) !important;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. 顶部栏修复
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#nav-middle {
    background: rgba(236, 239, 241, 0.95) !important;
    backdrop-filter: blur(8px) !important;
    border-bottom: 1px solid #b0bec5 !important;
    padding: 0.5rem 1rem !important;
}

.dark #nav-middle {
    background: rgba(28, 37, 41, 0.95) !important;
    border-bottom-color: #37474f !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. 用户输入气泡排除
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.group.is-user {
    background: transparent !important;
}

.group.is-user::before,
.group.is-user::after {
    display: none !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. 编辑器隔离
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

textarea,
[contenteditable="true"],
textarea + div,
.w-full.rounded-md.border {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid #d1d5db !important;
    box-shadow: none !important;
}

textarea + div details,
[contenteditable="true"] details {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.375rem !important;
    padding: 0 !important;
    box-shadow: none !important;
}

textarea + div details::before,
textarea + div details::after,
[contenteditable="true"] details::before,
[contenteditable="true"] details::after {
    display: none !important;
}

textarea + div summary,
[contenteditable="true"] summary {
    background: #f9fafb !important;
    color: #374151 !important;
    padding: 0.5rem 1rem !important;
    border: none !important;
    border-radius: 0.375rem !important;
    font-size: 0.875rem !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. 响应式修复
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media screen and (max-width: 768px) {
    .group.is-assistant .rili-markdown-renderer {
        padding: 20px 16px 20px 20px !important;
    }
    
    .group.is-assistant .rili-markdown-renderer::after {
        font-size: 80px !important;
        bottom: 0 !important;
    }
}

/* ===================================================================
   补丁 3.0：恢复所有 details 的动态效果 + 星记忆回廊特殊美化
   =================================================================== */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. 恢复通用 details 的完整样式（之前被意外重置了）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.rili-markdown-renderer details {
    position: relative !important;
    background: #F2F4F6 !important;
    border: 1px solid #B0BEC5 !important;
    border-radius: 2px !important;
    margin: 15px auto !important;
    padding: 2px !important;
    width: 100% !important;
    z-index: 3 !important;
    backdrop-filter: none !important;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.05) !important;
    overflow: visible !important;
}

.dark .rili-markdown-renderer details {
    background: #18191A !important;
    border-color: #37474F !important;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. 通用 summary 样式（水晶按钮效果）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.rili-markdown-renderer summary {
    font-family: 'SimSun', 'MS Song', serif !important;
    font-size: 1.1em !important;
    font-weight: bold !important;
    color: #FFFFFF !important;
    padding: 8px 12px !important;
    cursor: pointer !important;
    outline: none !important;
    list-style: none !important;
    
    /* 2007年经典水晶按钮渐变 */
    background: linear-gradient(to bottom, #546E7A 0%, #37474F 50%, #263238 51%, #37474F 100%) !important;
    
    border: 1px solid #263238 !important;
    border-top: 1px solid #78909C !important;
    border-radius: 2px !important;
    
    text-shadow: 1px 1px 0 #000000 !important;
    transition: all 0.2s !important;
    position: relative !important;
}

.rili-markdown-renderer summary::-webkit-details-marker {
    display: none !important;
}

/* 图标 */
.rili-markdown-renderer summary::before {
    content: '❖' !important;
    font-size: 1.1em !important;
    margin-right: 8px !important;
    display: inline-block !important;
    color: #FFB74D !important;
    text-shadow: 0 0 5px rgba(255, 183, 77, 0.8) !important;
    transition: transform 0.3s ease !important;
}

/* 展开时图标旋转 */
.rili-markdown-renderer details[open] > summary::before {
    transform: rotate(90deg) !important;
    color: #4FC3F7 !important;
    text-shadow: 0 0 5px rgba(79, 195, 247, 0.8) !important;
}

/* 悬停效果 */
.rili-markdown-renderer summary:hover {
    background: linear-gradient(to bottom, #78909C 0%, #546E7A 50%, #455A64 51%, #546E7A 100%) !important;
    transform: translateX(4px) !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.15) !important;
}

/* 按下效果 */
.rili-markdown-renderer summary:active {
    transform: translateY(2px) scale(0.99) !important;
    box-shadow: inset 0 3px 5px rgba(0,0,0,0.3) !important;
    background: linear-gradient(to bottom, #263238 0%, #1e272c 100%) !important;
}

/* 流光效果 */
.rili-markdown-renderer summary::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 50% !important;
    height: 100% !important;
    background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%) !important;
    transform: skewX(-25deg) !important;
    transition: none !important;
    pointer-events: none !important;
}

.rili-markdown-renderer summary:hover::after {
    left: 200% !important;
    transition: left 0.6s ease-in-out !important;
}

/* 夜间模式 */
.dark .rili-markdown-renderer summary {
    background: linear-gradient(to bottom, #424242 0%, #212121 50%, #000000 51%, #212121 100%) !important;
    border-color: #000 !important;
    border-top-color: #616161 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. 内容区域（扫描线纹理）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.rili-markdown-renderer details > div,
.rili-markdown-renderer details > p,
.rili-markdown-renderer details > table,
.rili-markdown-renderer details > *:not(summary) {
    padding: 15px !important;
    background-color: #F8F9FA !important;
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 19px,
        #E0E0E0 20px
    ) !important;
    background-size: 100% 20px !important;
    color: #37474F !important;
    border: 1px solid #CFD8DC !important;
    border-top: none !important;
    font-family: 'SimSun', 'Microsoft YaHei', sans-serif !important;
    font-size: 0.95em !important;
    line-height: 20px !important;
}

.dark .rili-markdown-renderer details > div,
.dark .rili-markdown-renderer details > *:not(summary) {
    background-color: #121212 !important;
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 19px,
        #333333 20px
    ) !important;
    color: #B0BEC5 !important;
    border-color: #37474F !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. 特殊容器覆盖（优先级更高）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* CoT 思维链 */
.rili-markdown-renderer .CoT-Box > summary {
    /* 保持原有样式，不变 */
}

/* 公告栏、手帐等 */
.rili-markdown-renderer details.bb,
.rili-markdown-renderer details.sh,
.rili-markdown-renderer details.cr,
.rili-markdown-renderer details.jr {
    background: #f8f9fa !important;
    border: 1px solid #cfd8dc !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.rili-markdown-renderer details.bb > summary,
.rili-markdown-renderer details.sh > summary,
.rili-markdown-renderer details.cr > summary,
.rili-markdown-renderer details.jr > summary {
    background: #eceff1 !important;
    color: #455a64 !important;
    padding: 6px 12px !important;
    font-size: 0.85em !important;
    border-bottom: 1px solid #cfd8dc !important;
    text-shadow: none !important;
}

.rili-markdown-renderer details.bb > summary::before,
.rili-markdown-renderer details.sh > summary::before,
.rili-markdown-renderer details.cr > summary::before,
.rili-markdown-renderer details.jr > summary::before {
    content: '' !important;
    display: none !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. 🌟 星记忆回廊特殊美化（无类名 details 的兜底匹配）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* 识别规则：summary 内容包含"星记忆回廊"或"LTM"/"STM" */
.rili-markdown-renderer details:not([class]) {
    /* 深邃的宇宙黑背景 */
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    border: 2px solid #0f3460 !important;
    border-radius: 8px !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 0 20px rgba(15, 52, 96, 0.3) !important;
    overflow: visible !important;
}

.rili-markdown-renderer details:not([class]) > summary {
    /* 星空银河渐变 */
    background: linear-gradient(90deg, #0f3460 0%, #16213e 50%, #533483 100%) !important;
    color: #e8f1f5 !important;
    font-family: 'Georgia', 'Noto Serif SC', serif !important;
    font-size: 1.05em !important;
    letter-spacing: 2px !important;
    border: 1px solid #533483 !important;
    border-top: 1px solid #6a4c93 !important;
    padding: 10px 18px !important;
    text-shadow: 0 0 10px rgba(106, 76, 147, 0.8) !important;
}

.rili-markdown-renderer details:not([class]) > summary::before {
    content: '✦' !important;
    color: #e8f1f5 !important;
    font-size: 1.3em !important;
    text-shadow: 0 0 15px rgba(232, 241, 245, 1) !important;
    animation: star-pulse 2s ease-in-out infinite !important;
}

@keyframes star-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.15); }
}

.rili-markdown-renderer details:not([class])[open] > summary::before {
    animation: star-spin 1s linear infinite !important;
}

@keyframes star-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.rili-markdown-renderer details:not([class]) > summary:hover {
    background: linear-gradient(90deg, #16213e 0%, #0f3460 50%, #6a4c93 100%) !important;
    box-shadow: 0 0 20px rgba(106, 76, 147, 0.6) !important;
}

/* 内容区：深空记忆卷轴 */
.rili-markdown-renderer details:not([class]) > p,
.rili-markdown-renderer details:not([class]) table,
.rili-markdown-renderer details:not([class]) > *:not(summary) {
    background-color: #0f1419 !important;
    background-image: none !important;
    color: #b8c5d0 !important;
    border: 1px solid #1a2332 !important;
    padding: 18px !important;
    font-family: 'Consolas', 'Courier New', monospace !important;
    font-size: 0.9em !important;
    line-height: 1.8 !important;
}

/* 表格特殊美化 */
.rili-markdown-renderer details:not([class]) table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 10px !important;
}

.rili-markdown-renderer details:not([class]) table th,
.rili-markdown-renderer details:not([class]) table td {
    border: 1px solid #1a2332 !important;
    padding: 8px 12px !important;
    text-align: left !important;
    color: #b8c5d0 !important;
}

.rili-markdown-renderer details:not([class]) table th {
    background: rgba(15, 52, 96, 0.3) !important;
    font-weight: bold !important;
    color: #e8f1f5 !important;
}

.rili-markdown-renderer details:not([class]) table tbody tr:hover {
    background: rgba(106, 76, 147, 0.1) !important;
}

/* Emoji 图标特殊处理 */
.rili-markdown-renderer details:not([class]) p:first-of-type {
    font-size: 1.1em !important;
    color: #6a4c93 !important;
    margin-bottom: 12px !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. 移动端优化
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media screen and (max-width: 768px) {
    .rili-markdown-renderer summary {
        font-size: 1em !important;
        padding: 6px 10px !important;
    }
    
    .rili-markdown-renderer details:not([class]) > summary {
        font-size: 0.95em !important;
        letter-spacing: 1px !important;
    }
    
    /* 手机上禁用流光效果 */
    .rili-markdown-renderer summary::after {
        display: none !important;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. 确保编辑器内的 details 不受影响
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

textarea + div details,
[contenteditable="true"] details {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.375rem !important;
    padding: 0 !important;
    box-shadow: none !important;
}

textarea + div details::before,
textarea + div details::after,
[contenteditable="true"] details::before,
[contenteditable="true"] details::after {
    display: none !important;
}

textarea + div summary,
[contenteditable="true"] summary {
    background: #f9fafb !important;
    color: #374151 !important;
    padding: 0.5rem 1rem !important;
    border: none !important;
    border-radius: 0.375rem !important;
    font-size: 0.875rem !important;
    text-shadow: none !important;
}

textarea + div summary::before,
textarea + div summary::after,
[contenteditable="true"] summary::before,
[contenteditable="true"] summary::after {
    display: none !important;
}

/* ===================================================================
   WA2:SR 全装恢复补丁 - 2007 Vintage Full Spec
   目标：恢复每个容器的独特动态效果与质感差异化
   =================================================================== */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   0. 通用 details 基础（保留动态效果）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.rili-markdown-renderer details {
    position: relative !important;
    overflow: visible !important;
    margin: 15px auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.rili-markdown-renderer summary {
    cursor: pointer !important;
    outline: none !important;
    list-style: none !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.rili-markdown-renderer summary::-webkit-details-marker {
    display: none !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. 🏫 峰城大附属·公告栏 (Bulletin Board) - 官方文书质感
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.rili-markdown-renderer details.bb {
    background: #ffffff !important;
    border: 1px solid #b0bec5 !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
    font-family: 'Noto Serif SC', serif !important;
    margin: 2em auto !important;
    max-width: 620px !important;
}

.rili-markdown-renderer details.bb > summary {
    background: #455a64 !important;
    color: #ffffff !important;
    padding: 10px 15px !important;
    font-size: 0.9em !important;
    font-weight: bold !important;
    letter-spacing: 2px !important;
    border-bottom: 1px solid #37474f !important;
}

.rili-markdown-renderer details.bb > summary::before {
    content: '📋' !important;
    margin-right: 8px !important;
    font-size: 1.1em !important;
}

.rili-markdown-renderer details.bb > summary:hover {
    background: #546e7a !important;
    letter-spacing: 3px !important;
}

/* 公告栏内部结构保持原样 */
.rili-markdown-renderer details.bb .hd {
    background: #37474f !important;
    color: #eceff1 !important;
    padding: 12px 15px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    font-family: sans-serif !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

.rili-markdown-renderer details.bb .tm b {
    color: #ffffff !important;
}

.rili-markdown-renderer details.bb .tg {
    font-size: 0.75em !important;
    background: rgba(0, 0, 0, 0.2) !important;
    color: #b0bec5 !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.rili-markdown-renderer details.bb .ds {
    background: #fff !important;
    color: #546e7a !important;
    padding: 10px 15px !important;
    font-size: 0.9em !important;
    font-style: italic !important;
    border-bottom: 1px dashed #cfd8dc !important;
}

/* 夜间模式 */
.dark .rili-markdown-renderer details.bb {
    background: #1a2332 !important;
    border-color: #37474f !important;
}

.dark .rili-markdown-renderer details.bb .hd {
    background: #263238 !important;
}

.dark .rili-markdown-renderer details.bb .ds {
    background: #1c2529 !important;
    color: #cfd8dc !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. 📒 生徒手帐 (Student Handbook) - 笔记本质感
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.rili-markdown-renderer details.sh {
    background: #ffffff !important;
    border: 1px solid #b0bec5 !important;
    border-top: 4px solid #546e7a !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
    font-family: 'Noto Serif SC', serif !important;
    color: #37474f !important;
    margin: 1.5em auto !important;
    max-width: 600px !important;
}

.rili-markdown-renderer details.sh > summary {
    background: #eceff1 !important;
    color: #263238 !important;
    padding: 8px 12px !important;
    font-weight: bold !important;
    border-bottom: 1px solid #cfd8dc !important;
}

.rili-markdown-renderer details.sh > summary::before {
    content: '✎' !important;
    margin-right: 6px !important;
    color: #78909c !important;
}

.rili-markdown-renderer details.sh > summary:hover {
    background: #e3f2fd !important;
    color: #1976d2 !important;
}

/* 天赋条 */
.rili-markdown-renderer details.sh .tlt-bar {
    display: flex !important;
    gap: 8px !important;
    padding: 10px 15px !important;
    background: #fdfdfd !important;
    border-bottom: 1px solid #eceff1 !important;
    align-items: center !important;
}

.rili-markdown-renderer details.sh .slot {
    flex: 1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: #ffffff !important;
    border: 1px solid #cfd8dc !important;
    border-radius: 3px !important;
    padding: 6px 4px !important;
    cursor: help !important;
    box-shadow: inset 0 0 5px rgba(255,255,255,0.8) !important;
    transition: all 0.2s ease !important;
}

.rili-markdown-renderer details.sh .slot:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
}

.rili-markdown-renderer details.sh .slot.gold {
    border-color: #ffe082 !important;
    background: linear-gradient(to bottom, #fff, #fffde7) !important;
}

.rili-markdown-renderer details.sh .slot.silver {
    border-color: #b0bec5 !important;
    background: linear-gradient(to bottom, #fff, #eceff1) !important;
}

.rili-markdown-renderer details.sh .slot.bronze {
    border-color: #d7ccc8 !important;
    background: linear-gradient(to bottom, #fff, #efebe9) !important;
}

/* 资源条 */
.rili-markdown-renderer details.sh .bar {
    display: block !important;
    flex: 1 1 auto !important;
    height: 14px !important;
    min-height: 14px !important;
    background: #eceff1 !important;
    border: 1px solid #cfd8dc !important;
    border-radius: 7px !important;
    position: relative !important;
    overflow: hidden !important;
}

.rili-markdown-renderer details.sh .bar .val {
    height: 100% !important;
    transition: width 0.3s !important;
}

.rili-markdown-renderer details.sh .hp .val {
    background: #81c784 !important;
}

.rili-markdown-renderer details.sh .mp .val {
    background: #64b5f6 !important;
}

.rili-markdown-renderer details.sh .bar .txt {
    position: absolute !important;
    width: 100% !important;
    text-align: center !important;
    font-size: 9px !important;
    line-height: 14px !important;
    color: rgba(0,0,0,0.5) !important;
    font-weight: bold !important;
    z-index: 2 !important;
}

/* 夜间模式 */
.dark .rili-markdown-renderer details.sh {
    background: #1c2529 !important;
    border-color: #37474f !important;
}

.dark .rili-markdown-renderer details.sh > summary {
    background: #263238 !important;
    color: #cfd8dc !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. 🌸 同学录 (Classmate Record) - 剪贴簿质感
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.rili-markdown-renderer details.cr {
    background: #ffffff !important;
    border: 1px solid #cfd8dc !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    font-family: 'Noto Serif SC', serif !important;
    color: #37474f !important;
    margin: 1.5em auto !important;
    max-width: 620px !important;
}

.rili-markdown-renderer details.cr > summary {
    background: linear-gradient(135deg, #e3f2fd 0%, #f1f5f9 100%) !important;
    color: #0277bd !important;
    padding: 10px 15px !important;
    font-size: 1em !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #90caf9 !important;
    position: relative !important;
}

.rili-markdown-renderer details.cr > summary::before {
    content: '🌸' !important;
    margin-right: 8px !important;
    animation: sakura-float 3s ease-in-out infinite !important;
}

@keyframes sakura-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-5px) rotate(5deg); }
}

.rili-markdown-renderer details.cr > summary:hover {
    background: linear-gradient(135deg, #bbdefb 0%, #e3f2fd 100%) !important;
    border-bottom-color: #42a5f5 !important;
    transform: translateX(3px) !important;
    box-shadow: -2px 0 8px rgba(33, 150, 243, 0.2) !important;
}

/* 快速检索栏 */
.rili-markdown-renderer details.cr .qk {
    padding: 10px 15px !important;
    background: #f1f5f9 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.rili-markdown-renderer details.cr .qk i {
    font-size: 0.8em !important;
    font-style: normal !important;
    background: #fff !important;
    padding: 2px 8px !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    color: #475569 !important;
}

/* 嵌套 details（特别关注/人物详案） */
.rili-markdown-renderer details.cr details.bd {
    margin: 8px 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 4px !important;
    background: #ffffff !important;
}

.rili-markdown-renderer details.cr details.bd > summary {
    background: #f8fafc !important;
    color: #475569 !important;
    padding: 6px 12px !important;
    font-size: 0.85em !important;
    font-weight: 600 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-left: 3px solid #94a3b8 !important;
}

.rili-markdown-renderer details.cr details.bd[open] > summary {
    background: #f1f5f9 !important;
    border-left-color: #3b82f6 !important;
    color: #1e40af !important;
}

.rili-markdown-renderer details.cr details.bd > summary::before {
    content: '▸' !important;
    margin-right: 6px !important;
    transition: transform 0.2s !important;
}

.rili-markdown-renderer details.cr details.bd[open] > summary::before {
    transform: rotate(90deg) !important;
}

/* 羁绊等级 */
.rili-markdown-renderer details.cr .rel {
    font-size: 0.9em !important;
    font-weight: bold !important;
    color: #0277bd !important;
    background: rgba(2, 119, 189, 0.05) !important;
    padding: 2px 8px !important;
    border: 1px solid #b3e5fc !important;
    border-radius: 2px !important;
    cursor: help !important;
}

/* 标签组 */
.rili-markdown-renderer details.cr .tag-g {
    display: flex !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
    margin-bottom: 8px !important;
}

.rili-markdown-renderer details.cr .tag {
    font-size: 0.75em !important;
    background: #eceff1 !important;
    color: #455a64 !important;
    padding: 1px 6px !important;
    border-radius: 2px !important;
}

/* 夜间模式 */
.dark .rili-markdown-renderer details.cr {
    background: #1c2529 !important;
    border-color: #37474f !important;
}

.dark .rili-markdown-renderer details.cr > summary {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e293b 100%) !important;
    color: #e3f2fd !important;
    border-bottom-color: #5c6bc0 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. 📝 进路指导 (Career Guidance) - 办公用纸质感
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.rili-markdown-renderer details.jr {
    background: #fdfdfd !important;
    border: 1px solid #b0bec5 !important;
    border-radius: 2px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08) !important;
    font-family: 'Noto Serif SC', serif !important;
    margin: 2em auto !important;
    max-width: 620px !important;
}

.rili-markdown-renderer details.jr > summary {
    background: #455a64 !important;
    color: #ffffff !important;
    padding: 10px 15px !important;
    font-size: 0.9em !important;
    font-weight: bold !important;
    letter-spacing: 2px !important;
}

.rili-markdown-renderer details.jr > summary::before {
    content: '📋' !important;
    margin-right: 8px !important;
}

.rili-markdown-renderer details.jr > summary:hover {
    background: #546e7a !important;
}

/* 选项样式 */
.rili-markdown-renderer details.jr .op {
    background: #ffffff !important;
    border: 1px solid #cfd8dc !important;
    padding: 12px 18px !important;
    margin-bottom: 12px !important;
    font-size: 0.95em !important;
    color: #263238 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    position: relative !important;
}

.rili-markdown-renderer details.jr .op:hover {
    background: #f1f5f9 !important;
    border-color: #78909c !important;
    color: #01579b !important;
    transform: translateX(5px) !important;
}

.rili-markdown-renderer details.jr .op:active {
    background: #e1e8ed !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05) !important;
}

/* 夜间模式 */
.dark .rili-markdown-renderer details.jr {
    background: #1a2332 !important;
    border-color: #37474f !important;
}

.dark .rili-markdown-renderer details.jr .op {
    background: #263238 !important;
    color: #eceff1 !important;
    border-color: #455a64 !important;
}

.dark .rili-markdown-renderer details.jr .op:hover {
    background: #37474f !important;
    color: #90caf9 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. 🌟 星记忆回廊 (Memory Corridor) - 深空主题
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.rili-markdown-renderer details:not([class]) {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
    border: 2px solid #0f3460 !important;
    border-radius: 8px !important;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        inset 0 0 20px rgba(15, 52, 96, 0.3) !important;
}

.rili-markdown-renderer details:not([class]) > summary {
    background: linear-gradient(90deg, #0f3460 0%, #16213e 50%, #533483 100%) !important;
    color: #e8f1f5 !important;
    font-family: 'Georgia', 'Noto Serif SC', serif !important;
    font-size: 1.05em !important;
    letter-spacing: 2px !important;
    border: 1px solid #533483 !important;
    border-top: 1px solid #6a4c93 !important;
    padding: 10px 18px !important;
    text-shadow: 0 0 10px rgba(106, 76, 147, 0.8) !important;
}

.rili-markdown-renderer details:not([class]) > summary::before {
    content: '✦' !important;
    color: #e8f1f5 !important;
    font-size: 1.3em !important;
    margin-right: 10px !important;
    text-shadow: 0 0 15px rgba(232, 241, 245, 1) !important;
    animation: star-pulse 2s ease-in-out infinite !important;
}

@keyframes star-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.15); }
}

.rili-markdown-renderer details:not([class])[open] > summary::before {
    animation: star-spin 1s linear infinite !important;
}

@keyframes star-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.rili-markdown-renderer details:not([class]) > summary:hover {
    background: linear-gradient(90deg, #16213e 0%, #0f3460 50%, #6a4c93 100%) !important;
    box-shadow: 0 0 20px rgba(106, 76, 147, 0.6) !important;
    letter-spacing: 3px !important;
}

/* 内容区 */
.rili-markdown-renderer details:not([class]) table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 10px !important;
    background: #0f1419 !important;
}

.rili-markdown-renderer details:not([class]) table th,
.rili-markdown-renderer details:not([class]) table td {
    border: 1px solid #1a2332 !important;
    padding: 8px 12px !important;
    color: #b8c5d0 !important;
}

.rili-markdown-renderer details:not([class]) table th {
    background: rgba(15, 52, 96, 0.3) !important;
    color: #e8f1f5 !important;
    font-weight: bold !important;
}

.rili-markdown-renderer details:not([class]) table tbody tr:hover {
    background: rgba(106, 76, 147, 0.1) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. 📱 Kyocera 手机容器 (.ph) - 翻盖机质感
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.rili-markdown-renderer .ph {
    background: #121212 !important;
    border: 1px solid #37474F !important;
    border-radius: 4px !important;
    border-left: 4px solid #00E5FF !important;
    margin: 1.5em auto !important;
    max-width: 450px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;
    font-family: 'Courier New', 'Microsoft YaHei', monospace !important;
}

.rili-markdown-renderer .ph > summary {
    background: linear-gradient(90deg, #1c2529, #121212) !important;
    color: #00E5FF !important;
    padding: 10px 15px !important;
    font-size: 0.9em !important;
    font-weight: bold !important;
    border-bottom: 1px solid #263238 !important;
    text-shadow: 0 0 5px rgba(0, 229, 255, 0.5) !important;
}

/* 状态栏修正 */
.rili-markdown-renderer .ph .bar {
    display: flex !important;
    justify-content: space-between !important;
    padding: 5px 10px !important;
    background: rgba(0, 229, 255, 0.1) !important;
    font-size: 0.75em !important;
    border-bottom: 1px solid rgba(0, 229, 255, 0.2) !important;
    color: #00E5FF !important;
    height: auto !important;
    min-height: 24px !important;
    flex: none !important;
    width: 100% !important;
    border-radius: 0 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. 移动端优化
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media screen and (max-width: 768px) {
    .rili-markdown-renderer details.bb,
    .rili-markdown-renderer details.sh,
    .rili-markdown-renderer details.cr,
    .rili-markdown-renderer details.jr {
        margin: 12px auto !important;
    }
    
    .rili-markdown-renderer details.cr > summary::before {
        animation: none !important;
    }
    
    .rili-markdown-renderer details:not([class]) > summary {
        font-size: 0.95em !important;
        letter-spacing: 1px !important;
    }
}

/* ===================================================================
   ❄️ 顶部栏：White Album 判词 + 飘雪动画
   目标：在 #nav-middle 左右两侧显示经典歌词 + 背景飘雪
   =================================================================== */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. 顶部栏基础样式（冬日苍穹）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#nav-middle {
    position: relative !important;
    background-color: rgba(236, 239, 241, 0.95) !important;
    backdrop-filter: blur(8px) !important;
    border-bottom: 2px solid #b0bec5 !important;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05) !important;
    padding: 0.75rem 1rem !important;
    overflow: hidden !important;
}

.dark #nav-middle {
    background-color: rgba(28, 37, 41, 0.95) !important;
    border-bottom-color: #37474f !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. 飘雪背景动画
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#nav-middle::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 0 !important;
    
    /* 雪花 SVG 背景 */
    background-image: 
        url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='10' y='20' font-size='15' fill='rgba(176, 190, 197, 0.4)'%3E❄%3C/text%3E%3Ctext x='100' y='50' font-size='10' fill='rgba(176, 190, 197, 0.3)'%3E❅%3C/text%3E%3Ctext x='150' y='120' font-size='12' fill='rgba(176, 190, 197, 0.4)'%3E❆%3C/text%3E%3C/svg%3E") !important;
    
    animation: snowdrift 20s linear infinite !important;
}

@keyframes snowdrift {
    from { background-position: 0 0; }
    to { background-position: 200px 200px; }
}

.dark #nav-middle::before {
    background-image: 
        url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='10' y='20' font-size='15' fill='rgba(255, 255, 255, 0.15)'%3E❄%3C/text%3E%3Ctext x='100' y='50' font-size='10' fill='rgba(255, 255, 255, 0.1)'%3E❅%3C/text%3E%3Ctext x='150' y='120' font-size='12' fill='rgba(255, 255, 255, 0.12)'%3E❆%3C/text%3E%3C/svg%3E") !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. 左侧判词：White Album
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#nav-middle::after {
    content: "White Album... 那个积雪的季节" !important;
    position: absolute !important;
    left: 1rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    
    font-family: 'Noto Serif SC', serif !important;
    font-size: 12px !important;
    font-style: italic !important;
    color: rgba(120, 144, 156, 0.7) !important;
    white-space: nowrap !important;
    pointer-events: none !important;
    z-index: 1 !important;
    
    /* 轻微的发光效果 */
    text-shadow: 0 0 8px rgba(120, 144, 156, 0.3) !important;
}

.dark #nav-middle::after {
    color: rgba(176, 190, 197, 0.6) !important;
    text-shadow: 0 0 10px rgba(176, 190, 197, 0.2) !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. 内部容器（中间的选择器等）层级提升
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#nav-middle > div,
#nav-middle > * {
    position: relative !important;
    z-index: 2 !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. 模型选择器美化（延续顶部栏风格）
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#nav-middle .group.flex,
#nav-middle button,
#nav-middle [role="combobox"] {
    background-color: #ffffff !important;
    border: 1px solid #cfd8dc !important;
    border-top: 3px solid #78909c !important;
    border-radius: 2px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
    font-family: 'Noto Serif SC', serif !important;
    color: #37474f !important;
    font-weight: bold !important;
}

#nav-middle .group.flex:hover,
#nav-middle button:hover {
    border-color: #90caf9 !important;
    background-color: #f8fbff !important;
    box-shadow: 0 0 12px rgba(144, 202, 249, 0.3) !important;
    transform: translateY(-1px) !important;
}

.dark #nav-middle .group.flex,
.dark #nav-middle button {
    background-color: #263238 !important;
    border-color: #37474f !important;
    border-top-color: #546e7a !important;
    color: #cfd8dc !important;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. 移动端适配
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media screen and (max-width: 1024px) {
    /* 小屏幕隐藏左侧判词，避免遮挡内容 */
    #nav-middle::after {
        display: none !important;
    }
    
    #nav-middle {
        padding: 0.5rem !important;
    }
}

@media screen and (max-width: 768px) {
    /* 手机上减少飘雪密度 */
    #nav-middle::before {
        opacity: 0.5 !important;
    }
}