/* =============================================
   蜜语阁 · 女大私密论坛 CSS v4
   base-hue:330  base-sat:30%  is-dark:0
   accent-hue:300  accent-sat:60%
   风格：浅色粉紫 · 豆瓣小组式论坛UI · v4.0.0合规
   ============================================= */

/* ===== 1. 危险区域 ===== */

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

/* 1.2 代码块 */
.markdown-body pre {
    background: hsl(300, 21%, 90%) !important;
    border: 1px solid hsl(330, 30%, 80%) !important;
    border-left: 3px solid hsl(300, 60%, 42%) !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    overflow-x: auto !important;
}
.markdown-body pre code {
    background: transparent !important;
    color: hsl(300, 48%, 30%) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
    font-size: 14px !important;
    white-space: normal !important;
}
.markdown-body :not(pre)>code {
    background: hsl(300, 21%, 90%) !important;
    color: hsl(300, 48%, 30%) !important;
    padding: 0.15em 0.45em !important;
    border-radius: 4px !important;
}

/* 1.3 details折叠块（平台默认） */
details {
    background: hsl(330, 30%, 100%) !important;
    border: 1px solid hsl(330, 30%, 80%) !important;
    border-radius: 8px !important;
    margin: 8px 0 !important;
    overflow: hidden !important;
    transition: border-color 0.15s !important;
}
details[open] { border-color: hsl(300, 60%, 42%) !important; }
details summary {
    background: hsl(330, 30%, 88%) !important;
    color: hsl(330, 8%, 7%) !important;
    padding: 8px 12px 8px 32px !important;
    display: block !important;
    position: relative !important;
    border-bottom: 1px solid hsl(330, 30%, 80%) !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    list-style: none !important;
    user-select: none !important;
}
details summary::before {
    content: '▶' !important;
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: hsl(300, 60%, 42%) !important;
    font-size: 11px !important;
    transition: transform 0.2s ease !important;
}
details[open] summary::before { transform: translateY(-50%) rotate(90deg) !important; }
details summary::-webkit-details-marker { display: none !important; }

/* 1.4 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: hsl(330, 30%, 96%) !important; }
::-webkit-scrollbar-thumb { background: hsl(300, 21%, 90%) !important; border-radius: 3px !important; }
::-webkit-scrollbar-thumb:hover { background: hsl(300, 60%, 42%) !important; }

/* 1.5 选区 & 占位符 */
::placeholder { color: hsl(330, 5%, 50%) !important; opacity: 1 !important; }
::selection { background: hsl(300, 21%, 90%) !important; color: hsl(300, 48%, 30%) !important; }

/* 1.6 输入框强制可见 */
#ai-chat-input {
    background: hsl(330, 30%, 100%) !important;
    color: hsl(330, 8%, 7%) !important;
    caret-color: hsl(300, 60%, 42%) !important;
}
textarea.rc-textarea {
    background: hsl(330, 30%, 100%) !important;
    color: hsl(330, 8%, 7%) !important;
    border: 1px solid hsl(330, 30%, 80%) !important;
}

/* ===== 2. 全局与布局 ===== */
body, #root, .h-screen {
    background-color: hsl(330, 30%, 93%) !important;
    color: hsl(330, 8%, 7%) !important;
}
.sticky.w-full.top-0.flex.items-center {
    background-color: hsl(330, 30%, 100%) !important;
    border-bottom: 1px solid hsl(330, 30%, 80%) !important;
}

/* ===== 3. 顶部导航与模型选择器 ===== */
#ai-model-selector .group.flex.items-center { color: hsl(330, 8%, 7%) !important; }
#ai-model-selector .group.flex.items-center:hover { color: hsl(300, 60%, 42%) !important; }
#ai-model-selector .truncate.text-$$13px$$ { color: hsl(330, 6%, 35%) !important; }
#ai-model-selector .shrink-0.flex.items-center svg { fill: hsl(330, 5%, 50%) !important; }
#header-setting-button { color: hsl(330, 5%, 50%) !important; }
#header-setting-button:hover { color: hsl(300, 60%, 42%) !important; }

/* ===== 4. 开场白区域 ===== */
div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"] {
    background-color: hsl(330, 30%, 88%) !important;
    border-color: hsl(330, 30%, 80%) !important;
    color: hsl(330, 8%, 7%) !important;
}
div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="SlidersH"] { fill: hsl(330, 5%, 50%) !important; }
div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="ChevronDown"] { fill: hsl(330, 5%, 50%) !important; }

/* ===== 5. 侧边栏 ===== */
.shadow-lg.border-r.border-gray-200 {
    background-color: hsl(330, 30%, 100%) !important;
    border-color: hsl(330, 30%, 80%) !important;
}
.MuiList-root { background-color: transparent !important; color: hsl(330, 8%, 7%) !important; }
.conversation-text { color: hsl(330, 6%, 35%) !important; }

/* ===== 6. 功能按钮 ===== */
#ai-mod-button2 button.MuiButton-root {
    background-color: hsl(330, 30%, 88%) !important;
    color: hsl(330, 8%, 7%) !important;
}
#ai-mod-button2 button.MuiButton-root:hover { background-color: hsl(330, 30%, 82%) !important; }
#ai-mod-button2 button.MuiButton-root svg { fill: hsl(330, 5%, 50%) !important; }

/* ===== 7. 聊天气泡与Markdown ===== */
.bg-gray-100\/90.relative.inline-block {
    background-color: hsl(330, 30%, 100%) !important;
    border: 1px solid hsl(330, 30%, 80%) !important;
    border-radius: 16px !important;
    padding: 12px !important;
}
.bg-gray-100\/90.relative.inline-block:hover {
    box-shadow: 0 0 6px hsla(300, 60%, 55%, 0.2) !important;
}
.markdown-body {
    color: hsl(330, 8%, 7%) !important;
    line-height: 1.6 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
}
.markdown-body h1, .markdown-body h2, .markdown-body h3 {
    color: hsl(330, 8%, 7%) !important;
    border-bottom: 1px solid hsl(330, 30%, 80%) !important;
}
.markdown-body ul, .markdown-body ol, .markdown-body li { color: inherit !important; }
.markdown-body blockquote {
    border-left: 4px solid hsl(300, 60%, 42%) !important;
    background: hsl(300, 21%, 90%) !important;
    color: hsl(300, 48%, 30%) !important;
    font-style: italic !important;
    padding: 8px 16px !important;
    margin: 16px 0 !important;
}
.markdown-body table, .markdown-body th, .markdown-body td {
    border: 1px solid hsl(330, 30%, 80%) !important;
}
.markdown-body th { background-color: hsl(330, 30%, 88%) !important; }
.markdown-body strong { color: hsl(300, 60%, 42%) !important; font-weight: 600 !important; }
.markdown-body em, .markdown-body a { color: hsl(300, 48%, 30%) !important; }

/* ===== 8. 加载动画 ===== */
.style-module__AtdJSq__dot-flashing.style-module__AtdJSq__text,
#customized-answer-content-loading-anim-container .style-module__AtdJSq__text,
#loading-anim .style-module__AtdJSq__text { display: none !important; }
#ai-chat-answer .chat-answer-container .style-module__AtdJSq__dot-flashing,
#customized-answer-content-loading-anim-container .style-module__AtdJSq__dot-flashing,
#loading-anim .style-module__AtdJSq__dot-flashing {
    background: transparent !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid hsla(300, 60%, 42%, 0.15) !important;
    border-left-color: hsl(300, 60%, 42%) !important;
    border-radius: 50% !important;
    animation: forum-spinner-rotation 0.8s linear infinite !important;
}
@keyframes forum-spinner-rotation { to { transform: rotate(360deg); } }

/* ===== 9. 底部输入区 ===== */
.bg-gradient-to-t { background: hsl(330, 30%, 93%) !important; }
#ai-chat-bottom-input {
    background: hsl(330, 30%, 100%) !important;
    color: hsl(330, 8%, 7%) !important;
    caret-color: hsl(300, 60%, 42%) !important;
}
#ai-chat-input::placeholder { color: hsl(330, 5%, 50%) !important; }
#ai-chat-input::selection { background: hsl(300, 21%, 90%) !important; color: hsl(300, 48%, 30%) !important; }
#ai-send-button {
    background-color: hsl(300, 60%, 42%) !important;
    color: hsl(330, 30%, 100%) !important;
    border-radius: 8px !important;
}
#ai-send-button:hover { background-color: hsl(300, 60%, 35%) !important; }

/* ===== 10. 评论区与评分（精选） ===== */
div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    background-color: hsl(330, 30%, 100%) !important;
    border-top: 1px solid hsl(330, 30%, 80%) !important;
}
div.text-lg.font-bold { color: hsl(330, 8%, 7%) !important; }
p.MuiTypography-body1.text-grey-600 { color: hsl(330, 6%, 35%) !important; }
span.MuiRating-iconEmpty svg { color: hsl(330, 5%, 50%) !important; }
span.MuiRating-iconFilled svg { color: hsl(300, 60%, 42%) !important; }
span.text-orange-500 { color: hsl(300, 60%, 42%) !important; }
div.bg-gray-100.text-gray-500 { background-color: hsl(330, 30%, 88%) !important; color: hsl(330, 5%, 50%) !important; }
button.text-gray-400 { color: hsl(330, 5%, 50%) !important; }
button.text-gray-400:hover { color: hsl(300, 60%, 42%) !important; }

/* ===== 11. 分页 ===== */
.MuiPaginationItem-root {
    background-color: transparent !important;
    color: hsl(330, 6%, 35%) !important;
    border: 1px solid hsl(330, 30%, 80%) !important;
}
.MuiPaginationItem-root.Mui-selected {
    background-color: hsl(300, 60%, 42%) !important;
    color: hsl(330, 30%, 100%) !important;
}
.MuiPaginationItem-root.Mui-disabled { opacity: 0.5 !important; }
.MuiPaginationItem-icon { fill: hsl(330, 5%, 50%) !important; }

/* ===== 12. MUI全局组件 ===== */
.MuiButton-root { border-radius: 8px !important; transition: all 0.2s !important; }
.MuiIconButton-root { background-color: transparent !important; }
.MuiIconButton-root:hover { background-color: hsl(330, 30%, 82%) !important; }
.MuiDialog-paper, .MuiDrawer-paper { background-color: hsl(330, 30%, 100%) !important; }
.MuiBackdrop-root { background-color: hsla(330, 30%, 7%, 0.5) !important; }
.MuiDivider-root { background-color: hsl(330, 30%, 80%) !important; }
.MuiButton-containedPrimary {
    background-color: hsl(300, 60%, 42%) !important;
    color: hsl(330, 30%, 100%) !important;
}
.MuiButton-containedPrimary:hover { background-color: hsl(300, 60%, 35%) !important; }
.MuiButton-outlinedPrimary {
    border-color: hsl(300, 60%, 42%) !important;
    color: hsl(300, 60%, 42%) !important;
}
.MuiButton-outlinedPrimary:hover { background-color: hsl(300, 21%, 90%) !important; }
.MuiTouchRipple-root { color: hsl(300, 60%, 42%) !important; }

/* ===== 13. 论坛容器与导航 ===== */
.markdown-body fc {
    display: block !important;
    max-width: 520px !important;
    margin: 12px auto !important;
    background-color: hsl(330, 30%, 100%) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px hsla(300, 60%, 42%, 0.08) !important;
    border: 1px solid hsl(330, 30%, 80%) !important;
}
.markdown-body fnv {
    display: flex !important;
    align-items: center !important;
    padding: 8px 12px !important;
    background-color: hsl(330, 30%, 96%) !important;
    border-bottom: 1px solid hsl(330, 30%, 80%) !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
.markdown-body fnv > span:first-child {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: hsl(300, 60%, 42%) !important;
    margin-right: 4px !important;
    white-space: nowrap !important;
}
.markdown-body tb {
    display: flex !important;
    gap: 6px !important;
    flex: 1 !important;
    overflow-x: auto !important;
    min-width: 0 !important;
}
.markdown-body tb span {
    font-size: 12px !important;
    padding: 4px 10px !important;
    border-radius: 9999px !important;
    white-space: nowrap !important;
    background-color: transparent !important;
    color: hsl(330, 6%, 35%) !important;
    border: 1px solid transparent !important;
    transition: all 0.2s !important;
}
.markdown-body tb span.ta {
    background-color: hsl(300, 21%, 90%) !important;
    color: hsl(300, 60%, 42%) !important;
    border-color: hsl(300, 60%, 42%) !important;
    font-weight: 600 !important;
}
.markdown-body tb span:not(.ta):hover { background-color: hsl(300, 21%, 90%) !important; }
.markdown-body fnv > span:last-child {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 12px !important;
    color: hsl(330, 6%, 35%) !important;
    white-space: nowrap !important;
    margin-left: auto !important;
}

/* ===== 14. 论坛主体与帖子列表 ===== */
.markdown-body fm {
    display: block !important;
    padding: 10px !important;
    background-color: hsl(330, 30%, 100%) !important;
    min-height: 300px !important;
}
.markdown-body pl {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
/* 帖子折叠 */
.markdown-body pl details {
    border: 1px solid hsl(330, 30%, 80%) !important;
    border-radius: 12px !important;
    margin-bottom: 8px !important;
    background-color: hsl(330, 30%, 100%) !important;
    overflow: hidden !important;
    transition: box-shadow 0.2s !important;
}
.markdown-body pl details:hover { box-shadow: 0 2px 10px hsla(300, 60%, 42%, 0.08) !important; }
.markdown-body pl details > summary {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 12px 14px !important;
    cursor: pointer !important;
    list-style: none !important;
    border: none !important;
    background-color: hsl(330, 30%, 100%) !important;
    transition: background-color 0.2s !important;
    position: relative !important;
}
.markdown-body pl details > summary::-webkit-details-marker { display: none !important; }
.markdown-body pl details > summary::marker { display: none !important; content: '' !important; }
.markdown-body pl details > summary::before {
    content: '▶' !important;
    display: inline-block !important;
    font-size: 10px !important;
    color: hsl(300, 60%, 42%) !important;
    margin-right: 6px !important;
    transition: transform 0.25s ease !important;
    flex-shrink: 0 !important;
    position: absolute !important;
    left: 4px !important;
    top: 14px !important;
}
.markdown-body pl details[open] > summary::before { transform: rotate(90deg) !important; }
.markdown-body pl details > summary:hover { background-color: hsl(330, 30%, 96%) !important; }
.markdown-body pl details[open] > summary {
    background-color: hsl(330, 30%, 96%) !important;
    border-bottom: 1px solid hsl(330, 30%, 80%) !important;
}
/* 置顶帖（details.pp 虚线边框） */
.markdown-body pl details.pp { border-color: hsl(300, 60%, 42%) !important; border-style: dashed !important; }
.markdown-body pl details.pp > summary { background-color: hsl(300, 21%, 90%) !important; }
/* 当前帖高亮（details.pa 实线高亮） */
.markdown-body pl details.pa { border-color: hsl(300, 60%, 42%) !important; border-width: 1.5px !important; }
.markdown-body pl details.pa > summary { background-color: hsl(300, 21%, 90%) !important; }
/* summary标题行 */
.markdown-body summary.ps { display: flex !important; flex-direction: column !important; gap: 4px !important; }
/* 帖子标签 */
.markdown-body tg {
    display: inline-block !important;
    font-size: 11px !important;
    padding: 1px 8px !important;
    border-radius: 4px !important;
    margin-bottom: 4px !important;
    font-weight: 600 !important;
    width: fit-content !important;
}
.markdown-body tg.ga { background-color: hsl(120, 40%, 90%) !important; color: hsl(120, 60%, 30%) !important; }
.markdown-body tg.gh { background-color: hsl(30, 80%, 90%) !important; color: hsl(30, 80%, 40%) !important; }
.markdown-body tg.gs { background-color: hsl(330, 60%, 90%) !important; color: hsl(330, 60%, 40%) !important; }
.markdown-body tg.gr { background-color: hsl(210, 60%, 90%) !important; color: hsl(210, 60%, 35%) !important; }
.markdown-body tg.gc { background-color: hsl(280, 40%, 92%) !important; color: hsl(280, 40%, 40%) !important; }
.markdown-body tg.gu { background-color: hsl(180, 40%, 90%) !important; color: hsl(180, 50%, 30%) !important; }
.markdown-body tg.gt { background-color: hsl(0, 0%, 88%) !important; color: hsl(0, 0%, 35%) !important; }
/* 帖子标题与元信息 */
.markdown-body pt {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: hsl(330, 8%, 7%) !important;
    line-height: 1.5 !important;
}
.markdown-body pm {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 11px !important;
    color: hsl(330, 5%, 50%) !important;
    flex-wrap: wrap !important;
}

/* ===== 15. 楼层回复 ===== */
.markdown-body fl {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid hsl(330, 30%, 90%) !important;
}
.markdown-body fl:last-child { border-bottom: none !important; }
.markdown-body fl.fo { background-color: hsl(330, 30%, 96%) !important; }
.markdown-body ub {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    font-size: 12px !important;
}
.markdown-body av {
    display: inline-block !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    vertical-align: middle !important;
}
.markdown-body nm { font-weight: 600 !important; }
.markdown-body lv {
    display: inline !important;
    font-size: 10px !important;
    color: hsl(330, 6%, 35%) !important;
}
.markdown-body no {
    display: inline !important;
    font-size: 11px !important;
    color: hsl(300, 60%, 42%) !important;
    font-weight: 600 !important;
    background-color: hsl(300, 21%, 90%) !important;
    padding: 1px 6px !important;
    border-radius: 4px !important;
}
.markdown-body tm {
    display: inline !important;
    font-size: 11px !important;
    color: hsl(330, 5%, 50%) !important;
    margin-left: auto !important;
}
.markdown-body ct {
    display: block !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: hsl(330, 8%, 7%) !important;
    word-break: break-word !important;
}
.markdown-body ct p { margin: 4px 0 !important; }

/* ===== 16. NPC头像 ===== */
.markdown-body av.t { background: linear-gradient(135deg, hsl(330, 60%, 70%), hsl(300, 60%, 50%)) !important; }
.markdown-body av.t::after { content: '棠' !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; color: hsl(0, 0%, 100%) !important; font-size: 14px !important; font-weight: 700 !important; }
.markdown-body av.z { background: linear-gradient(135deg, hsl(0, 50%, 65%), hsl(0, 40%, 45%)) !important; }
.markdown-body av.z::after { content: '意' !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; color: hsl(0, 0%, 100%) !important; font-size: 14px !important; font-weight: 700 !important; }
.markdown-body av.j { background: linear-gradient(135deg, hsl(15, 70%, 60%), hsl(10, 60%, 45%)) !important; }
.markdown-body av.j::after { content: '曼' !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; color: hsl(0, 0%, 100%) !important; font-size: 14px !important; font-weight: 700 !important; }
.markdown-body av.l { background: linear-gradient(135deg, hsl(200, 60%, 70%), hsl(210, 60%, 50%)) !important; }
.markdown-body av.l::after { content: '鹿' !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; color: hsl(0, 0%, 100%) !important; font-size: 14px !important; font-weight: 700 !important; }
.markdown-body av.q { background: linear-gradient(135deg, hsl(140, 40%, 65%), hsl(140, 40%, 45%)) !important; }
.markdown-body av.q::after { content: '清' !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; color: hsl(0, 0%, 100%) !important; font-size: 14px !important; font-weight: 700 !important; }
.markdown-body av.x { background: linear-gradient(135deg, hsl(190, 40%, 60%), hsl(180, 40%, 40%)) !important; }
.markdown-body av.x::after { content: '雪' !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; color: hsl(0, 0%, 100%) !important; font-size: 14px !important; font-weight: 700 !important; }
.markdown-body av.n { background: linear-gradient(135deg, hsl(50, 70%, 75%), hsl(45, 60%, 50%)) !important; }
.markdown-body av.n::after { content: '念' !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; color: hsl(0, 0%, 100%) !important; font-size: 14px !important; font-weight: 700 !important; }
.markdown-body av.i { background: linear-gradient(135deg, hsl(35, 70%, 60%), hsl(25, 60%, 45%)) !important; }
.markdown-body av.i::after { content: '粒' !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; color: hsl(0, 0%, 100%) !important; font-size: 14px !important; font-weight: 700 !important; }
.markdown-body av.r { background: linear-gradient(135deg, hsl(0, 0%, 80%), hsl(0, 0%, 65%)) !important; }
.markdown-body av.r::after { content: '?' !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; color: hsl(0, 0%, 100%) !important; font-size: 14px !important; font-weight: 700 !important; }
.markdown-body av.p { background: linear-gradient(135deg, hsl(220, 50%, 60%), hsl(220, 50%, 45%)) !important; }
.markdown-body av.p::after { content: '你' !important; position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; color: hsl(0, 0%, 100%) !important; font-size: 14px !important; font-weight: 700 !important; }

/* ===== 17. 名字颜色 ===== */
.markdown-body nm.t { color: hsl(300, 60%, 42%) !important; }
.markdown-body nm.z { color: hsl(0, 45%, 50%) !important; }
.markdown-body nm.j { color: hsl(10, 60%, 45%) !important; }
.markdown-body nm.l { color: hsl(210, 55%, 45%) !important; }
.markdown-body nm.q { color: hsl(140, 40%, 35%) !important; }
.markdown-body nm.x { color: hsl(180, 45%, 35%) !important; }
.markdown-body nm.n { color: hsl(45, 55%, 40%) !important; }
.markdown-body nm.i { color: hsl(25, 60%, 45%) !important; }
.markdown-body nm.r { color: hsl(0, 0%, 45%) !important; }
.markdown-body nm.p { color: hsl(220, 50%, 45%) !important; }

/* ===== 18. 引用与私信 ===== */
.markdown-body bq.q {
    display: block !important;
    background-color: hsl(330, 30%, 96%) !important;
    border-left: 3px solid hsl(330, 30%, 70%) !important;
    padding: 6px 10px !important;
    margin: 6px 0 !important;
    font-size: 13px !important;
    color: hsl(330, 6%, 35%) !important;
    border-radius: 0 6px 6px 0 !important;
}
.markdown-body bq.mp {
    display: block !important;
    margin-top: 6px !important;
    padding: 8px 10px !important;
    border-top: 1px dashed hsl(330, 30%, 70%) !important;
    background-color: hsl(300, 21%, 95%) !important;
    border-radius: 6px !important;
}

/* ===== 19. 侧边栏面板 ===== */
.markdown-body details.sidebar-toggle {
    border: none !important;
    margin: 10px 0 !important;
    background: transparent !important;
}
.markdown-body details.sidebar-toggle > summary {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 18px 8px 32px !important;
    cursor: pointer !important;
    background-color: hsl(330, 30%, 100%) !important;
    color: hsl(300, 60%, 42%) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    border: 1px solid hsl(330, 30%, 80%) !important;
    border-radius: 9999px !important;
    box-shadow: 0 1px 3px hsla(300, 60%, 42%, 0.08) !important;
    list-style: none !important;
    transition: background-color 0.2s !important;
    position: relative !important;
}
.markdown-body details.sidebar-toggle > summary:hover { background-color: hsl(330, 30%, 96%) !important; }
.markdown-body details.sidebar-toggle > summary::before {
    content: '☰' !important;
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 14px !important;
    color: hsl(300, 60%, 42%) !important;
}
.markdown-body details.sidebar-toggle > summary::-webkit-details-marker { display: none !important; }
.markdown-body .sp {
    background-color: hsl(330, 30%, 100%) !important;
    border: 1px solid hsl(330, 30%, 80%) !important;
    border-radius: 12px !important;
    padding: 8px !important;
    margin-top: 8px !important;
    max-height: 400px !important;
    overflow-y: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    box-shadow: 0 2px 8px hsla(300, 60%, 42%, 0.06) !important;
}
.markdown-body .sp::-webkit-scrollbar { width: 4px !important; }
.markdown-body .sp::-webkit-scrollbar-thumb { background-color: hsl(300, 21%, 90%) !important; border-radius: 2px !important; }
.markdown-body .sp > details {
    border: none !important;
    margin: 0 !important;
    background-color: transparent !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.markdown-body .sp > details > summary {
    display: flex !important;
    align-items: center !important;
    padding: 8px 12px 8px 28px !important;
    cursor: pointer !important;
    background-color: hsl(330, 30%, 96%) !important;
    color: hsl(300, 60%, 42%) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    border: 1px solid hsl(330, 30%, 80%) !important;
    border-radius: 8px !important;
    list-style: none !important;
    transition: background-color 0.2s !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
}
.markdown-body .sp > details > summary:hover { background-color: hsl(330, 30%, 93%) !important; }
.markdown-body .sp > details > summary::before {
    content: '▶' !important;
    display: inline-block !important;
    font-size: 0.6em !important;
    color: hsl(300, 60%, 42%) !important;
    transition: transform 0.25s ease !important;
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
.markdown-body .sp > details[open] > summary::before { transform: translateY(-50%) rotate(90deg) !important; }
.markdown-body .sp > details > summary::-webkit-details-marker { display: none !important; }
.markdown-body .sp > details[open] {
    background-color: hsl(330, 30%, 100%) !important;
    border-radius: 8px !important;
    padding: 8px !important;
    margin-top: 4px !important;
    max-height: 200px !important;
    overflow-y: auto !important;
}
/* 成员卡 */
.markdown-body mc {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 8px !important;
    background-color: hsl(330, 30%, 100%) !important;
    border: 1px solid hsl(330, 30%, 90%) !important;
    border-radius: 8px !important;
}
.markdown-body mi {
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
    min-width: 0 !important;
}
.markdown-body mn { font-size: 12px !important; font-weight: 600 !important; }
.markdown-body mr { font-size: 10px !important; color: hsl(330, 5%, 50%) !important; }
.markdown-body ms { font-size: 10px !important; font-weight: 500 !important; }
.markdown-body ms.on { color: hsl(300, 60%, 42%) !important; }
.markdown-body ms.nw { color: hsl(30, 80%, 45%) !important; }
/* 表格 */
.markdown-body .sp table { table-layout: fixed !important; width: 100% !important; font-size: 11px !important; border-collapse: collapse !important; }
.markdown-body .sp table th, .markdown-body .sp table td {
    padding: 4px 6px !important;
    border: 1px solid hsl(330, 30%, 90%) !important;
    word-break: break-word !important;
}
.markdown-body .sp table th {
    background-color: hsl(330, 30%, 96%) !important;
    color: hsl(300, 60%, 42%) !important;
    font-weight: 600 !important;
}

/* ===== 20. 代码块美化隐藏 ===== */
/* 隐藏代码块顶部语言标签文字，但保留复制按钮 */
.markdown-body pre > div > div.flex.justify-between > span { display: none !important; }
.markdown-body pre > div > div.flex.justify-between { 
    background: transparent !important;
    border: none !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 2px 4px !important;
}
.markdown-body pre > div > div.flex.justify-between button,
.markdown-body pre > div > div.flex.justify-between svg { 
    display: inline-flex !important;
    color: hsl(300, 60%, 42%) !important;
}
.markdown-body pre > div > div[style*="overflow-x"] {
    background-color: transparent !important;
    color: hsl(300, 48%, 30%) !important;
}
.max-w-$$720px$$ code.language-markdown {
    display: block !important;
    padding: 10px 14px !important;
    background: hsl(300, 21%, 90%) !important;
    border-left: 3px solid hsl(300, 60%, 42%) !important;
    border-radius: 6px !important;
    margin: 6px 0 !important;
    color: hsl(300, 48%, 30%) !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    white-space: normal !important;
}

/* ===== 21. 强调与分隔 ===== */
.max-w-$$720px$$ strong { color: hsl(300, 60%, 42%) !important; font-weight: 600 !important; }
.max-w-$$720px$$ hr { border: none !important; height: 1px !important; background: linear-gradient(90deg, transparent, hsl(330, 30%, 80%), transparent) !important; margin: 20px 0 !important; }

/* ===== 22. 响应式与降速 ===== */
@media (max-width: 480px) {
    .markdown-body fc { margin: 4px auto !important; border-radius: 10px !important; }
    .markdown-body fnv { padding: 6px 8px !important; }
    .markdown-body tb span { font-size: 11px !important; padding: 3px 8px !important; }
    .markdown-body pt { font-size: 13px !important; }
    .markdown-body ct { font-size: 13px !important; }
    .markdown-body .sp { max-height: 300px !important; }
}
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}