/* ═══════════════════════════════════════════════════════════════
   🌊 简约·清风境 — 极简游戏面板主题
   配色：纯白 · 深灰 · 淡蓝 · 柔绿
   特性：扁平设计 · 微动效 · 清晰层级 · 游戏化面板
   ═══════════════════════════════════════════════════════════════ */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 0  基础清理
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

[class*="bg-[#F1CBCB]"],
[class*="bg-[#c9e1e9]"] {
    display: none !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 1  聊天框主体 — 简洁卡片
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.bg-gray-100\/90.relative.inline-block {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.05),
        0 1px 2px rgba(0, 0, 0, 0.03) !important;
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.bg-gray-100\/90.relative.inline-block:hover {
    border-color: #d1d5db !important;
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.07),
        0 2px 4px rgba(0, 0, 0, 0.04) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 2  正文文字 — 清晰易读
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.markdown-body {
    color: #1f2937 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    letter-spacing: 0.01em !important;
    position: relative !important;
    z-index: 1 !important;
    background: transparent !important;
}

.markdown-body strong {
    color: #111827 !important;
    font-weight: 600 !important;
}

.markdown-body em {
    color: #4b5563 !important;
    font-style: italic !important;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
    color: #111827 !important;
    font-weight: 600 !important;
    margin-top: 1.5em !important;
    padding-bottom: 0.3em !important;
    border-bottom: none !important;
}

.markdown-body h1 {
    font-size: 1.5em !important;
    border-bottom: 2px solid #e5e7eb !important;
}

.markdown-body h2 {
    font-size: 1.3em !important;
    border-bottom: 1px solid #f3f4f6 !important;
}

.markdown-body h3 {
    font-size: 1.15em !important;
}

.markdown-body hr {
    border: none !important;
    height: 1px !important;
    background: #e5e7eb !important;
    margin: 1.5em 0 !important;
}

.markdown-body blockquote {
    border-left: 3px solid #3b82f6 !important;
    background: #f9fafb !important;
    color: #374151 !important;
    padding: 12px 16px !important;
    border-radius: 0 4px 4px 0 !important;
    margin: 1em 0 !important;
}

.markdown-body code {
    background: #f3f4f6 !important;
    color: #1f2937 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 3px !important;
    padding: 2px 6px !important;
    font-size: 0.9em !important;
    font-family: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace !important;
}

.markdown-body pre {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    padding: 16px !important;
    overflow-x: auto !important;
}

.markdown-body pre code {
    background: transparent !important;
    border: none !important;
    color: #1f2937 !important;
    padding: 0 !important;
}

.markdown-body a {
    color: #3b82f6 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.markdown-body a:hover {
    color: #2563eb !important;
    text-decoration: underline !important;
}

.markdown-body ul,
.markdown-body ol {
    color: #1f2937 !important;
}

.markdown-body li {
    margin: 4px 0 !important;
}

.markdown-body li::marker {
    color: #9ca3af !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 3  游戏面板系统 — details/summary
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@keyframes simple-glow {
    0%, 100% {
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
    }
    50% {
        box-shadow: 0 2px 12px rgba(59, 130, 246, 0.15);
    }
}

.markdown-body details {
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    margin: 16px 0 !important;
    background: #ffffff !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
}

.markdown-body details:hover {
    border-color: #d1d5db !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07) !important;
    transform: translateY(-2px) !important;
}

.markdown-body details[open] {
    border-color: #3b82f6 !important;
    background: #fafbfc !important;
    animation: simple-glow 2s ease-in-out infinite !important;
}

.markdown-body summary {
    background: linear-gradient(to right, #f9fafb, #ffffff) !important;
    padding: 14px 48px 14px 20px !important;
    color: #111827 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    list-style: none !important;
    border-bottom: 1px solid transparent !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    user-select: none !important;
}

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

.markdown-body summary::after {
    content: '›' !important;
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(0deg) !important;
    color: #9ca3af !important;
    font-size: 20px !important;
    font-weight: 300 !important;
    transition: transform 0.3s ease, color 0.3s ease !important;
}

.markdown-body summary:hover {
    background: linear-gradient(to right, #f3f4f6, #f9fafb) !important;
    color: #000000 !important;
}

.markdown-body summary:hover::after {
    color: #3b82f6 !important;
}

.markdown-body details[open] > summary {
    background: #f9fafb !important;
    border-bottom-color: #e5e7eb !important;
    color: #3b82f6 !important;
}

.markdown-body details[open] > summary::after {
    transform: translateY(-50%) rotate(90deg) !important;
    color: #3b82f6 !important;
}

.markdown-body details > :not(summary) {
    padding: 0 20px !important;
}

.markdown-body details > summary + * {
    margin-top: 16px !important;
}

.markdown-body details > :last-child {
    margin-bottom: 16px !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 4  数据表格 — 清晰格位
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.markdown-body table {
    border-collapse: collapse !important;
    width: 100% !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    font-size: 14px !important;
    margin: 12px 0 !important;
}

.markdown-body table th {
    background: #f9fafb !important;
    color: #111827 !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 10px 12px !important;
    border: 1px solid #e5e7eb !important;
    text-align: left !important;
}

.markdown-body table td {
    padding: 10px 12px !important;
    border: 1px solid #f3f4f6 !important;
    color: #374151 !important;
}

.markdown-body table tr:nth-child(even) td {
    background: #fafbfc !important;
}

.markdown-body table tr:hover td {
    background: #f3f4f6 !important;
    transition: background 0.2s ease !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 5  底部附加元素
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
    color: #3b82f6 !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
    color: #2563eb !important;
    background: #eff6ff !important;
}

.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
    color: #9ca3af !important;
    font-size: 12px !important;
}

.text-orange-500 {
    color: #f59e0b !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 6  加载动画 — 简约旋转
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@keyframes spin {
    to { 
        transform: translate(-50%, -50%) rotate(360deg); 
    }
}

.style_dot-flashing__8L91Q.style_text__zGhNq {
    display: none !important;
}

.flex.items-center.justify-center.w-6.h-5 {
    position: relative !important;
    width: 32px !important;
    height: 32px !important;
}

.flex.items-center.justify-center.w-6.h-5::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 24px !important;
    height: 24px !important;
    border: 2px solid #e5e7eb !important;
    border-top-color: #3b82f6 !important;
    border-radius: 50% !important;
    animation: spin 0.8s linear infinite !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 7  顶部栏 — 简洁导航
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.sticky.w-full.top-0.flex.items-center {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid #e5e7eb !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    backdrop-filter: blur(8px) !important;
}

#ai-model-selector .group.flex.items-center {
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    background: #ffffff !important;
    transition: all 0.2s ease !important;
}

#ai-model-selector .group.flex.items-center:hover {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

#ai-model-selector .truncate.text-\[13px\] {
    color: #111827 !important;
    font-weight: 600 !important;
}

#header-setting-button {
    color: #6b7280 !important;
    transition: all 0.2s ease !important;
}

#header-setting-button:hover {
    color: #111827 !important;
}

#header-setting-button svg {
    transition: transform 0.3s ease !important;
}

#header-setting-button:hover svg {
    transform: rotate(90deg) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 8  底部输入栏 — 清爽输入
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.bg-gradient-to-t {
    background: linear-gradient(to top,
        rgba(255, 255, 255, 0.95) 0%,
        transparent 100%) !important;
}

#ai-chat-bottom-input {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
}

#ai-chat-bottom-input:focus-within {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

#ai-chat-input {
    color: #1f2937 !important;
    font-size: 15px !important;
    caret-color: #3b82f6 !important;
}

#ai-chat-input::placeholder {
    color: #9ca3af !important;
}

#ai-chat-input::selection {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #111827 !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 9  按钮栏 — 简洁按钮
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

#ai-mod-button2 button.MuiButton-root {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    color: #374151 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.2s ease !important;
}

#ai-mod-button2 button.MuiButton-root:hover {
    border-color: #3b82f6 !important;
    color: #3b82f6 !important;
    background: #eff6ff !important;
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1) !important;
    transform: translateY(-1px) !important;
}

#ai-mod-button2 button.MuiButton-root svg {
    transition: transform 0.2s ease !important;
}

#ai-mod-button2 button.MuiButton-root:hover svg {
    transform: scale(1.1) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 10  开场白选择器
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"] {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.2s ease !important;
}

div.flex.items-center.h-9.bg-white.rounded-md.cursor-pointer.group[class*="border-gray"]:hover {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="SlidersH"],
div.flex.items-center.h-9.cursor-pointer.group svg[data-icon="ChevronDown"] {
    color: #6b7280 !important;
    transition: color 0.2s ease !important;
}

div.flex.items-center.h-9.cursor-pointer.group:hover svg[data-icon="SlidersH"],
div.flex.items-center.h-9.cursor-pointer.group:hover svg[data-icon="ChevronDown"] {
    color: #3b82f6 !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 11  分页栏
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.MuiPaginationItem-root {
    color: #6b7280 !important;
    border-color: #e5e7eb !important;
    transition: all 0.2s ease !important;
}

.MuiPaginationItem-root:hover {
    background: #f9fafb !important;
    border-color: #3b82f6 !important;
    color: #3b82f6 !important;
}

.MuiPaginationItem-root.Mui-selected {
    background: #3b82f6 !important;
    color: #ffffff !important;
    border-color: #3b82f6 !important;
    font-weight: 600 !important;
}

.MuiPaginationItem-root.Mui-disabled {
    opacity: 0.4 !important;
}

.MuiPaginationItem-icon {
    color: #6b7280 !important;
}

.MuiStack-root.css-1uwir8f .MuiBox-root {
    color: #6b7280 !important;
}

.MuiInputBase-input {
    border-color: #e5e7eb !important;
    color: #374151 !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 12  评论区
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

div[class*="w-full"][class*="bg-white"][class*="bottom-0"] {
    background: #ffffff !important;
}

div.text-lg.font-bold {
    color: #111827 !important;
}

p.MuiTypography-body1.text-grey-600 {
    color: #6b7280 !important;
}

span.MuiRating-iconEmpty svg {
    color: #e5e7eb !important;
}

span.MuiRating-iconFilled svg {
    color: #f59e0b !important;
}

div.flex.flex-col.border-gray-200 {
    border-color: #e5e7eb !important;
}

textarea.rc-textarea {
    background: #ffffff !important;
    color: #1f2937 !important;
    border-color: #e5e7eb !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

textarea.rc-textarea:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

div.bg-gray-100.text-gray-500 {
    background: #f9fafb !important;
    color: #6b7280 !important;
}

div.cursor-pointer.group.flex.items-center.justify-center {
    transition: all 0.2s ease !important;
}

div.cursor-pointer.group.flex.items-center.justify-center:hover {
    transform: scale(1.05) !important;
}

div.style_divider__mW0YX {
    background: #e5e7eb !important;
}

button.MuiButton-containedPrimary,
button.MuiButton-outlinedPrimary {
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

button.MuiButton-containedPrimary {
    background: #3b82f6 !important;
    color: #ffffff !important;
}

button.MuiButton-outlinedPrimary {
    color: #3b82f6 !important;
    border-color: #3b82f6 !important;
}

button.MuiButton-outlinedPrimary:hover {
    background: #eff6ff !important;
}

div.p-3.overflow-y-auto {
    scrollbar-width: thin !important;
    scrollbar-color: #d1d5db transparent !important;
}

div.group.ml-0 {
    border-bottom: 1px solid #f3f4f6 !important;
    transition: background 0.2s ease !important;
}

div.group.ml-0:hover {
    background: #fafbfc !important;
}

div.group img.rounded-full {
    border: 2px solid #e5e7eb !important;
}

div.text-sm.text-grey-600 span.font-bold {
    color: #111827 !important;
    font-weight: 600 !important;
}

span.text-\[10px\] {
    color: #6b7280 !important;
    background: #f3f4f6 !important;
    border-radius: 3px !important;
    padding: 2px 6px !important;
}

div.break-all {
    color: #374151 !important;
    line-height: 1.6 !important;
}

div.text-xs.text-grey-600 {
    color: #9ca3af !important;
}

button.text-gray-400 {
    color: #9ca3af !important;
    transition: color 0.2s ease !important;
}

button.text-gray-400:hover {
    color: #6b7280 !important;
}

button.text-gray-400 svg {
    transition: transform 0.2s ease !important;
}

button.text-gray-400:hover svg {
    transform: scale(1.1) !important;
}

span.cursor-pointer {
    color: #3b82f6 !important;
    transition: color 0.2s ease !important;
}

span.cursor-pointer:hover {
    color: #2563eb !important;
}

div.ml-8.border-l {
    border-color: #e5e7eb !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 13  游戏面板增强样式
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.markdown-body details p {
    margin: 8px 0 !important;
    line-height: 1.7 !important;
    font-size: 14px !important;
    color: #374151 !important;
}

.markdown-body details strong {
    color: #111827 !important;
    font-weight: 600 !important;
}

.markdown-body details em {
    color: #6b7280 !important;
}

.markdown-body details a {
    color: #3b82f6 !important;
}

.markdown-body details h1,
.markdown-body details h2,
.markdown-body details h3,
.markdown-body details h4 {
    color: #111827 !important;
    font-size: 1.1em !important;
    margin: 16px 0 8px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #f3f4f6 !important;
}

.markdown-body details hr {
    border: none !important;
    height: 1px !important;
    background: #e5e7eb !important;
    margin: 16px 0 !important;
}

.markdown-body details table {
    border-collapse: collapse !important;
    width: 100% !important;
    margin: 12px 0 !important;
    border: 1px solid #e5e7eb !important;
    overflow: hidden !important;
    font-size: 13px !important;
    border-radius: 6px !important;
}

.markdown-body details table th {
    background: #f9fafb !important;
    color: #111827 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 8px 12px !important;
    border: 1px solid #e5e7eb !important;
    text-align: left !important;
}

.markdown-body details table td {
    padding: 8px 12px !important;
    border: 1px solid #f3f4f6 !important;
    color: #374151 !important;
    font-size: 13px !important;
    transition: background 0.2s ease !important;
}

.markdown-body details table tr:nth-child(even) td {
    background: #fafbfc !important;
}

.markdown-body details table tr:hover td {
    background: #f3f4f6 !important;
}

.markdown-body details table td:first-child {
    font-weight: 500 !important;
    color: #111827 !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 14  无序列表 — 清晰条目
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.markdown-body details ul {
    padding-left: 20px !important;
    margin: 8px 0 !important;
}

.markdown-body details ul li {
    margin: 6px 0 !important;
    padding: 4px 8px !important;
    font-size: 14px !important;
    color: #374151 !important;
    border-left: 2px solid transparent !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    list-style: disc !important;
}

.markdown-body details ul li::marker {
    color: #9ca3af !important;
}

.markdown-body details ul li:hover {
    background: #f9fafb !important;
    border-left-color: #3b82f6 !important;
    padding-left: 12px !important;
    color: #111827 !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 15  有序列表 — 游戏行动按钮
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.markdown-body details ol {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 12px 0 !important;
    counter-reset: action-counter !important;
}

.markdown-body details ol li {
    counter-increment: action-counter !important;
    padding: 12px 16px 12px 48px !important;
    margin: 8px 0 !important;
    position: relative !important;
    font-size: 14px !important;
    color: #374151 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
}

.markdown-body details ol li::before {
    content: counter(action-counter) !important;
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 24px !important;
    height: 24px !important;
    line-height: 24px !important;
    text-align: center !important;
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    transition: all 0.25s ease !important;
}

.markdown-body details ol li:hover {
    background: #f9fafb !important;
    border-color: #3b82f6 !important;
    padding-left: 52px !important;
    color: #111827 !important;
    transform: translateX(4px) !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1) !important;
}

.markdown-body details ol li:hover::before {
    background: #3b82f6 !important;
    border-color: #3b82f6 !important;
    color: #ffffff !important;
    transform: translateY(-50%) scale(1.1) !important;
}

.markdown-body details ol li:last-child {
    border-color: #d1fae5 !important;
}

.markdown-body details ol li:last-child::before {
    background: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #059669 !important;
}

.markdown-body details ol li:last-child:hover {
    border-color: #10b981 !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1) !important;
}

.markdown-body details ol li:last-child:hover::before {
    background: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 16  复选框 — 任务条件
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.markdown-body details input[type="checkbox"] {
    accent-color: #3b82f6 !important;
    width: 16px !important;
    height: 16px !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
    cursor: pointer !important;
}

.markdown-body details li:has(input[type="checkbox"]) {
    list-style: none !important;
    padding: 6px 12px !important;
    margin: 6px 0 !important;
    border-radius: 4px !important;
    border-left: 2px solid #e5e7eb !important;
    font-size: 14px !important;
    color: #374151 !important;
    transition: all 0.2s ease !important;
}

.markdown-body details li:has(input[type="checkbox"]):hover {
    background: #f9fafb !important;
    border-left-color: #3b82f6 !important;
}

.markdown-body details li:has(input[type="checkbox"]:checked) {
    border-left-color: #10b981 !important;
    color: #6b7280 !important;
    text-decoration: line-through !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 17  引用块 / 代码
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.markdown-body details blockquote {
    border-left: 3px solid #3b82f6 !important;
    background: #f9fafb !important;
    padding: 12px 16px !important;
    margin: 12px 0 !important;
    border-radius: 0 4px 4px 0 !important;
    color: #374151 !important;
    font-size: 14px !important;
}

.markdown-body details code {
    background: #f3f4f6 !important;
    color: #1f2937 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 3px !important;
    padding: 2px 6px !important;
    font-size: 0.9em !important;
}

.markdown-body details pre {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    margin: 12px 0 !important;
    padding: 16px !important;
}

.markdown-body details pre code {
    background: transparent !important;
    border: none !important;
    color: #1f2937 !important;
    font-size: 13px !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 18  移动端适配
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 480px) {
    .markdown-body {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    .markdown-body summary {
        font-size: 14px !important;
        padding: 12px 40px 12px 16px !important;
    }

    .markdown-body details > :not(summary) {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .markdown-body table {
        font-size: 12px !important;
    }

    .markdown-body table th,
    .markdown-body table td {
        padding: 6px 8px !important;
        font-size: 11px !important;
    }

    .markdown-body details ol li {
        padding: 10px 12px 10px 40px !important;
        font-size: 13px !important;
    }

    .markdown-body details ol li::before {
        width: 20px !important;
        height: 20px !important;
        line-height: 20px !important;
        font-size: 11px !important;
        left: 10px !important;
    }

    .markdown-body details ol li:hover {
        transform: translateX(2px) !important;
        padding-left: 42px !important;
    }

    .flex.items-center.justify-center.w-6.h-5 {
        width: 28px !important;
        height: 28px !important;
    }

    .flex.items-center.justify-center.w-6.h-5::before {
        width: 20px !important;
        height: 20px !important;
    }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   § 19  减弱动效
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (prefers-reduced-motion: reduce) {
    .markdown-body details[open] {
        animation: none !important;
    }

    .markdown-body details,
    .markdown-body details:hover,
    .markdown-body details ol li,
    .markdown-body details ol li:hover {
        transform: none !important;
        transition: box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease !important;
    }

    .flex.items-center.justify-center.w-6.h-5::before {
        animation: none !important;
    }
}