/*
Theme Name: T-Dream
Theme URI: https://github.com/glen/T-Dream
Description: 三栏式、简洁美观、拓展性强的Typecho主题，基于Tailwind CSS。
Version: 1.0.0
Author: glen
Author URI: https://github.com/glen
*/



body {
    font-family: 'Inter', 'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    background: #f7f7fa;
    color: #222;
}

/* 预留顶部导航空间（桌面端），在JS修正前使用初始值，避免跳动 */
@media (min-width:1024px){
    .main-container { min-height: calc(100vh - var(--topnav-height,48px)); }
}

/* 暗色模式支持 - 优化字体辨识度，使用更高优先级选择器 */
/* 暗色统一调色：背景层次：body #0f172a, 块级 #1e293b, 浅分隔 #334155 */
html.dark body { background:#0f172a !important; color:#f8fafc !important; }
html.dark .bg-white { background-color:#1e293b !important; }
html.dark .prose pre, html.dark .prose code { background-color:#1e293b !important; }
html.dark .text-gray-900 { color:#f8fafc !important; }
html.dark .text-gray-800 { color:#f1f5f9 !important; }
html.dark .text-gray-700 { color:#e2e8f0 !important; }
html.dark .text-gray-600 { color:#cbd5e1 !important; }
html.dark .text-gray-500 { color:#94a3b8 !important; }
html.dark .text-gray-400 { color:#64748b !important; }
html.dark .border-gray-200 { border-color:#334155 !important; }
html.dark .border-gray-300 { border-color:#475569 !important; }
html.dark .hover\:bg-gray-100:hover { background:#334155 !important; color:#f1f5f9 !important; }
html.dark .hover\:bg-blue-50:hover { background:#1e40af55 !important; color:#f1f5f9 !important; }
html.dark .bg-gray-50 { background:#1e293b !important; }
html.dark .bg-gray-100 { background:#334155 !important; }
html.dark .prose { color:#f1f5f9; }
html.dark .prose a { color:#60a5fa; }
html.dark .prose blockquote { background:#1e293b; border-left-color:#3b82f6; color:#e2e8f0; }
html.dark .prose pre { color:#f1f5f9; }
html.dark .prose code { color:#93c5fd; }
html.dark .prose h1, html.dark .prose h2, html.dark .prose h3, html.dark .prose h4, html.dark .prose h5, html.dark .prose h6 { color:#f8fafc; }

/* 侧栏导航深色模式专项适配 - 使用更具体的选择器 */
html.dark nav#sidebar-nav { background-color:#1e293b !important; }
html.dark nav#sidebar-nav * { color:#e2e8f0 !important; }
html.dark nav#sidebar-nav h1 { color:#f8fafc !important; }
html.dark nav#sidebar-nav p { color:#cbd5e1 !important; }
html.dark nav#sidebar-nav .border-gray-200 { border-color:#334155 !important; }
html.dark nav#sidebar-nav a { color:#e2e8f0 !important; }
html.dark nav#sidebar-nav a:hover { background-color:#1e40af44 !important; color:#60a5fa !important; }
html.dark nav#sidebar-nav .text-gray-700 { color:#e2e8f0 !important; }
html.dark nav#sidebar-nav .text-gray-600 { color:#cbd5e1 !important; }
html.dark nav#sidebar-nav .hover\:bg-blue-50:hover { background-color:#1e40af44 !important; }
html.dark nav#sidebar-nav .hover\:text-blue-600:hover { color:#60a5fa !important; }

/* 强制覆盖所有可能的Tailwind类 - 侧栏专用 */
html.dark nav[id="sidebar-nav"] { background:#1e293b !important; }
html.dark nav[id="sidebar-nav"] span { color:#e2e8f0 !important; }
html.dark nav[id="sidebar-nav"] div { color:#e2e8f0 !important; }
html.dark nav[id="sidebar-nav"] .flex span { color:#e2e8f0 !important; }
html.dark .sidebar-nav { background:#1e293b !important; }
html.dark .sidebar-nav * { color:#e2e8f0 !important; }

/* 顶部导航深色模式适配 - 使用更具体的选择器 */
html.dark .top-nav-desktop { background-color:#1e293b !important; border-color:#334155 !important; }
html.dark .top-nav-desktop * { color:#e2e8f0 !important; }
html.dark .top-nav-desktop .border-gray-200 { border-color:#334155 !important; }
html.dark header.lg\:hidden { background-color:#1e293b !important; }
html.dark header.lg\:hidden .border-gray-200 { border-color:#334155 !important; }
html.dark header.lg\:hidden h1 { color:#f8fafc !important; }
html.dark header.lg\:hidden * { color:#e2e8f0 !important; }

/* 搜索组件深色模式适配 */
html.dark .search-input { background:#0f172a !important; border-color:#475569 !important; color:#f1f5f9 !important; }
html.dark .search-input:focus { background:#1e293b !important; border-color:#3b82f6 !important; }
html.dark .search-input::placeholder { color:#94a3b8 !important; }

/* 平滑过渡 */
/* 限定过渡，避免首帧图标缩放或布局抖动 */
body, body * { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
body svg { transition: fill .25s ease, stroke .25s ease; }

/* ================= 外观设置：主题色覆盖（复用现有 blue-* 类，无需改模板） ================= */
/* Default Blue - 保持原有配色 */
body.theme-default .color-swatch[data-color="default"], body:not([class*="theme-"]) .color-swatch[data-color="default"] {
    --accent-outline: #2563eb;
}

/* Emerald 翠绿主题 */
body.theme-emerald .text-blue-600{color:#059669!important}
body.theme-emerald .hover\:text-blue-600:hover{color:#047857!important}
body.theme-emerald .bg-blue-50{background:#ecfdf5!important}
body.theme-emerald .hover\:bg-blue-50:hover{background:#d1fae5!important}
body.theme-emerald .border-blue-200{border-color:#a7f3d0!important}
body.theme-emerald .focus\:ring-blue-500:focus{--tw-ring-color:#059669!important}
body.theme-emerald .bg-blue-600{background:#059669!important}
body.theme-emerald .hover\:bg-blue-500:hover{background:#047857!important}
body.theme-emerald .color-swatch[data-color="emerald"] { --accent-outline: #059669; }
/* Emerald 深色模式优化 */
html.dark body.theme-emerald .text-blue-600{color:#34d399!important}
html.dark body.theme-emerald .hover\:text-blue-600:hover{color:#10b981!important}
html.dark body.theme-emerald .bg-blue-50{background:#064e3b!important}
html.dark body.theme-emerald .hover\:bg-blue-50:hover{background:#065f46!important; color:#f1f5f9!important}
html.dark body.theme-emerald .bg-blue-600{background:#059669!important}
html.dark body.theme-emerald .hover\:bg-blue-500:hover{background:#047857!important}

/* Rose 玫瑰主题 */
body.theme-rose .text-blue-600{color:#e11d48!important}
body.theme-rose .hover\:text-blue-600:hover{color:#be123c!important}
body.theme-rose .bg-blue-50{background:#fff1f2!important}
body.theme-rose .hover\:bg-blue-50:hover{background:#ffe4e8!important}
body.theme-rose .border-blue-200{border-color:#fecdd3!important}
body.theme-rose .focus\:ring-blue-500:focus{--tw-ring-color:#e11d48!important}
body.theme-rose .bg-blue-600{background:#e11d48!important}
body.theme-rose .hover\:bg-blue-500:hover{background:#be123c!important}
body.theme-rose .color-swatch[data-color="rose"] { --accent-outline: #e11d48; }
/* Rose 深色模式优化 */
html.dark body.theme-rose .text-blue-600{color:#fb7185!important}
html.dark body.theme-rose .hover\:text-blue-600:hover{color:#f43f5e!important}
html.dark body.theme-rose .bg-blue-50{background:#4c0519!important}
html.dark body.theme-rose .hover\:bg-blue-50:hover{background:#881337!important; color:#f1f5f9!important}
html.dark body.theme-rose .bg-blue-600{background:#e11d48!important}
html.dark body.theme-rose .hover\:bg-blue-500:hover{background:#be123c!important}

/* Amber 琥珀主题 */
body.theme-amber .text-blue-600{color:#d97706!important}
body.theme-amber .hover\:text-blue-600:hover{color:#b45309!important}
body.theme-amber .bg-blue-50{background:#fffbeb!important}
body.theme-amber .hover\:bg-blue-50:hover{background:#fef3c7!important}
body.theme-amber .border-blue-200{border-color:#fde68a!important}
body.theme-amber .focus\:ring-blue-500:focus{--tw-ring-color:#d97706!important}
body.theme-amber .bg-blue-600{background:#d97706!important}
body.theme-amber .hover\:bg-blue-500:hover{background:#b45309!important}
body.theme-amber .color-swatch[data-color="amber"] { --accent-outline: #d97706; }
/* Amber 深色模式优化 */
html.dark body.theme-amber .text-blue-600{color:#fbbf24!important}
html.dark body.theme-amber .hover\:text-blue-600:hover{color:#f59e0b!important}
html.dark body.theme-amber .bg-blue-50{background:#451a03!important}
html.dark body.theme-amber .hover\:bg-blue-50:hover{background:#92400e!important; color:#f1f5f9!important}
html.dark body.theme-amber .bg-blue-600{background:#d97706!important}
html.dark body.theme-amber .hover\:bg-blue-500:hover{background:#b45309!important}

/* Violet 紫罗兰主题 */
body.theme-violet .text-blue-600{color:#7c3aed!important}
body.theme-violet .hover\:text-blue-600:hover{color:#6d28d9!important}
body.theme-violet .bg-blue-50{background:#f5f3ff!important}
body.theme-violet .hover\:bg-blue-50:hover{background:#ede9fe!important}
body.theme-violet .border-blue-200{border-color:#ddd6fe!important}
body.theme-violet .focus\:ring-blue-500:focus{--tw-ring-color:#7c3aed!important}
body.theme-violet .bg-blue-600{background:#7c3aed!important}
body.theme-violet .hover\:bg-blue-500:hover{background:#6d28d9!important}
body.theme-violet .color-swatch[data-color="violet"] { --accent-outline: #7c3aed; }
/* Violet 深色模式优化 */
html.dark body.theme-violet .text-blue-600{color:#a78bfa!important}
html.dark body.theme-violet .hover\:text-blue-600:hover{color:#8b5cf6!important}
html.dark body.theme-violet .bg-blue-50{background:#2e1065!important}
html.dark body.theme-violet .hover\:bg-blue-50:hover{background:#581c87!important; color:#f1f5f9!important}
html.dark body.theme-violet .bg-blue-600{background:#7c3aed!important}
html.dark body.theme-violet .hover\:bg-blue-500:hover{background:#6d28d9!important}

/* ================= 布局设置 ================= */
/* 盒子模型：正确的响应式实现 */
body.layout-boxed {
    background: #e5e7eb !important;
    padding: 20px !important;
}

/* 桌面端盒子模型 */
@media (min-width: 1024px) {
    /* 侧边栏偏移 */
    body.layout-boxed #sidebar-nav {
        top: 20px !important;
        left: 20px !important;
        bottom: 20px !important;
        height: calc(100vh - 40px) !important;
        background: white !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* 顶部导航适配 */
    body.layout-boxed .top-nav-desktop {
        top: 0px !important;
        left: calc(16rem + 40px) !important;
        right: 40px !important;
        background: white !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
        margin: 0 !important;
    }
    
    /* 主内容区域 - 使用margin保持响应式 */
    body.layout-boxed .main-container {
        margin-left: calc(16rem + 40px) !important;
        margin-right: 40px !important;
        margin-top: calc(var(--topnav-height) + 1px) !important;
        margin-bottom: 0px !important;
        background: white !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
        max-width: none !important;
        width: auto !important;
    }
}
/* 盒子模型移动端适配 */
@media (max-width: 1023px) {
    body.layout-boxed .main-container {
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 10px;
        margin-bottom: 10px;
    }
}
/* 盒子模型深色模式 */
html.dark body.layout-boxed {
    background: #020617 !important;
}
html.dark body.layout-boxed .main-container {
    background: #0f172a;
    border: 1px solid #334155;
}
html.dark body.layout-boxed .top-nav-desktop {
    background: #0f172a;
    border: 1px solid #334155;
    border-bottom: none;
}
/* 折叠导航 */
body.layout-collapsed-nav #sidebar-nav{width:4rem!important}
body.layout-collapsed-nav #sidebar-nav .menu-text{display:none}
body.layout-collapsed-nav .main-container{margin-left:4rem!important}
/* 允许取消固定头部：添加 layout-unfixed-header 将顶部导航变为相对流式 */
body.layout-unfixed-header .top-nav-desktop{position:static!important;left:auto!important;right:auto!important}
body.layout-unfixed-header .main-container{padding-top:0!important}
/* 允许取消固定侧栏 */
body.layout-unfixed-sidebar #sidebar-nav{position:static!important;height:auto!important}
body.layout-unfixed-sidebar .main-container{margin-left:0!important}

/* 外观设置面板样式 */
#appearance-panel{
    backdrop-filter:blur(12px);
    background:rgba(255,255,255,.92);
    border:1px solid rgba(0,0,0,.1);
}
html.dark #appearance-panel{
    background:rgba(30,41,59,.92);
    border-color:rgba(255,255,255,.1);
}

/* 主题色样本按钮 */
#appearance-panel button.color-swatch{
    width:32px;
    height:32px;
    border-radius:9999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:2px solid transparent;
    cursor:pointer;
    position:relative;
    transition:all 0.2s ease;
    box-shadow:0 2px 4px rgba(0,0,0,.1);
    margin:6px; /* 增加外边距为外圈留更多空间 */
}

#appearance-panel button.color-swatch:hover{
    transform:scale(1.1);
    box-shadow:0 4px 8px rgba(0,0,0,.15);
}

#appearance-panel button.color-swatch.active{
    box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent-outline,#2563eb);
    transform:scale(1.05);
} 

html.dark #appearance-panel button.color-swatch.active{
    box-shadow:0 0 0 2px #1e293b,0 0 0 4px var(--accent-outline,#2563eb);
} 

/* =========================== 深色模式强制修复 =========================== */
/* 最高优先级深色模式修复，确保所有文字在深色背景下可见 */
html.dark { color-scheme: dark; }

/* 侧栏强制深色 */
html.dark #sidebar-nav,
html.dark .sidebar-nav,
html.dark nav#sidebar-nav {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}

html.dark #sidebar-nav *,
html.dark .sidebar-nav *,
html.dark nav#sidebar-nav * {
    color: #e2e8f0 !important;
}

/* 修复悬停和选中状态的背景色冲突 */
html.dark #sidebar-nav a:hover,
html.dark .sidebar-nav a:hover,
html.dark nav#sidebar-nav a:hover,
html.dark #sidebar-nav .hover\:bg-blue-50:hover,
html.dark .sidebar-nav .hover\:bg-blue-50:hover {
    background: #334155 !important;  /* 深灰色背景，与白字形成对比 */
    color: #f1f5f9 !important;
}

/* 修复选中状态的背景色 */
html.dark #sidebar-nav .bg-blue-50,
html.dark .sidebar-nav .bg-blue-50,
html.dark #sidebar-nav .text-blue-600,
html.dark .sidebar-nav .text-blue-600 {
    background: #1e40af !important;  /* 深蓝色背景 */
    color: #ffffff !important;       /* 纯白文字 */
}

/* 顶部导航强制深色 */
html.dark .top-nav-desktop,
html.dark header {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}

html.dark .top-nav-desktop *,
html.dark header * {
    color: #e2e8f0 !important;
}

/* 修复顶部导航悬停状态 */
html.dark .top-nav-desktop .hover\:bg-gray-100:hover,
html.dark .top-nav-desktop .hover\:bg-blue-50:hover,
html.dark header .hover\:bg-gray-100:hover,
html.dark header .hover\:bg-blue-50:hover {
    background: #334155 !important;
    color: #f1f5f9 !important;
}

/* 强制覆盖所有白色背景 */
html.dark .bg-white {
    background: #1e293b !important;
}

/* 强制深色边框 */
html.dark .border-gray-200,
html.dark .border-gray-300 {
    border-color: #334155 !important;
}

/* 内容区域深色模式适配 - 无悬停效果 */
html.dark main,
html.dark article,
html.dark .prose {
    background: transparent;
    color: #e2e8f0;
}

html.dark .prose h1,
html.dark .prose h2,
html.dark .prose h3,
html.dark .prose h4,
html.dark .prose h5,
html.dark .prose h6 {
    color: #f8fafc !important;
}

html.dark .prose p,
html.dark .prose li {
    color: #e2e8f0 !important;
}

/* 确保内容区域不会有悬停背景色变化 */
html.dark main,
html.dark article,
html.dark .prose,
html.dark .main-container {
    transition: color 0.25s ease;
    /* 移除背景色过渡，避免不必要的悬停效果 */
}

/* 修复按钮悬停状态 - 只针对特定按钮 */
html.dark .top-nav-desktop button:hover,
html.dark header button:hover,
html.dark #sidebar-nav button:hover {
    background: #334155 !important;
    color: #f1f5f9 !important;
}

/* 搜索下拉框深色模式修复 */
html.dark .absolute.bg-white {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

html.dark #search-results {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}

html.dark #search-results * {
    color: #e2e8f0 !important;
}

html.dark #search-results a {
    color: #e2e8f0 !important;
}

html.dark #search-results a:hover {
    background: #334155 !important;
    color: #f1f5f9 !important;
}

html.dark #mobile-search-results {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}

html.dark #mobile-search-results * {
    color: #e2e8f0 !important;
}

/* 移动端搜索模态框深色模式修复 */
html.dark #mobile-search-modal .bg-white {
    background: #1e293b !important;
}

html.dark #mobile-search-modal .border-b {
    border-color: #334155 !important;
}

html.dark #mobile-search-modal h3 {
    color: #f8fafc !important;
}

html.dark #mobile-search-modal button {
    color: #e2e8f0 !important;
}

html.dark #mobile-search-modal button:hover {
    background: #334155 !important;
    color: #f1f5f9 !important;
}

html.dark #mobile-search-modal .text-gray-400 {
    color: #94a3b8 !important;
}

/* 搜索结果项悬停状态修复 */
html.dark #search-results .hover\:bg-gray-50:hover,
html.dark #mobile-search-results .hover\:bg-gray-50:hover {
    background: #334155 !important;
    color: #f1f5f9 !important;
}

/* 右侧栏深色模式修复 */
html.dark aside,
html.dark .sidebar,
html.dark .space-y-6 {
    color: #e2e8f0 !important;
}

html.dark .bg-white {
    background: #1e293b !important;
}

html.dark .bg-blue-50,
html.dark .bg-green-50,
html.dark .bg-indigo-50,
html.dark .from-blue-50,
html.dark .to-indigo-50 {
    background: #1e40af22 !important;
}

html.dark .border-gray-100,
html.dark .border-blue-100 {
    border-color: #334155 !important;
}

html.dark .text-gray-900,
html.dark .text-gray-800 {
    color: #f8fafc !important;
}

html.dark .text-gray-600 {
    color: #cbd5e1 !important;
}

html.dark .text-blue-600,
html.dark .text-green-600 {
    color: #60a5fa !important;
}

/* 图标主题色适配 - 完整版本 */

/* 默认主题 - 浅色模式 */
svg.text-blue-600,
.text-blue-600 svg,
.text-blue-600 {
    color: #2563eb !important; /* 保持原本的蓝色 */
}

svg.text-green-600,
.text-green-600 svg,
.text-green-600 {
    color: #2563eb !important; /* 统一为主题色 */
}

svg.text-purple-600,
.text-purple-600 svg,
.text-purple-600 {
    color: #2563eb !important; /* 统一为主题色 */
}

svg.text-orange-600,
.text-orange-600 svg,
.text-orange-600 {
    color: #2563eb !important; /* 统一为主题色 */
}

svg.text-pink-600,
.text-pink-600 svg,
.text-pink-600 {
    color: #2563eb !important; /* 统一为主题色 */
}

/* 默认主题 - 深色模式 */
html.dark svg.text-blue-600,
html.dark .text-blue-600 svg,
html.dark .text-blue-600 {
    color: #60a5fa !important; /* 浅蓝色 */
}

html.dark svg.text-green-600,
html.dark .text-green-600 svg,
html.dark .text-green-600 {
    color: #60a5fa !important; /* 统一为浅蓝色 */
}

html.dark svg.text-purple-600,
html.dark .text-purple-600 svg,
html.dark .text-purple-600 {
    color: #60a5fa !important; /* 统一为浅蓝色 */
}

html.dark svg.text-orange-600,
html.dark .text-orange-600 svg,
html.dark .text-orange-600 {
    color: #60a5fa !important; /* 统一为浅蓝色 */
}

html.dark svg.text-pink-600,
html.dark .text-pink-600 svg,
html.dark .text-pink-600 {
    color: #60a5fa !important; /* 统一为浅蓝色 */
}

html.dark svg.text-gray-400,
html.dark .text-gray-400 svg {
    color: #94a3b8 !important;
}

/* 默认主题（中性灰） - 浅色模式 */
svg.text-blue-600,
.text-blue-600 svg,
.text-blue-600,
svg.text-green-600,
.text-green-600 svg,
.text-green-600,
svg.text-purple-600,
.text-purple-600 svg,
.text-purple-600,
svg.text-orange-600,
.text-orange-600 svg,
.text-orange-600,
svg.text-pink-600,
.text-pink-600 svg,
.text-pink-600 {
    color: #6b7280 !important; /* 温和的灰色 */
}

/* 默认主题（中性灰） - 深色模式 */
html.dark svg.text-blue-600,
html.dark .text-blue-600 svg,
html.dark .text-blue-600,
html.dark svg.text-green-600,
html.dark .text-green-600 svg,
html.dark .text-green-600,
html.dark svg.text-purple-600,
html.dark .text-purple-600 svg,
html.dark .text-purple-600,
html.dark svg.text-orange-600,
html.dark .text-orange-600 svg,
html.dark .text-orange-600,
html.dark svg.text-pink-600,
html.dark .text-pink-600 svg,
html.dark .text-pink-600 {
    color: #9ca3af !important; /* 深色模式下的浅灰色 */
}

/* 蓝色主题 - 浅色模式 */
body.theme-blue svg.text-blue-600,
body.theme-blue .text-blue-600 svg,
body.theme-blue .text-blue-600,
body.theme-blue svg.text-green-600,
body.theme-blue .text-green-600 svg,
body.theme-blue .text-green-600,
body.theme-blue svg.text-purple-600,
body.theme-blue .text-purple-600 svg,
body.theme-blue .text-purple-600,
body.theme-blue svg.text-orange-600,
body.theme-blue .text-orange-600 svg,
body.theme-blue .text-orange-600,
body.theme-blue svg.text-pink-600,
body.theme-blue .text-pink-600 svg,
body.theme-blue .text-pink-600 {
    color: #3b82f6 !important; /* 蓝色 */
}

/* 蓝色主题 - 深色模式 */
body.theme-blue html.dark svg.text-blue-600,
body.theme-blue html.dark .text-blue-600 svg,
body.theme-blue html.dark .text-blue-600,
body.theme-blue html.dark svg.text-green-600,
body.theme-blue html.dark .text-green-600 svg,
body.theme-blue html.dark .text-green-600,
body.theme-blue html.dark svg.text-purple-600,
body.theme-blue html.dark .text-purple-600 svg,
body.theme-blue html.dark .text-purple-600,
body.theme-blue html.dark svg.text-orange-600,
body.theme-blue html.dark .text-orange-600 svg,
body.theme-blue html.dark .text-orange-600,
body.theme-blue html.dark svg.text-pink-600,
body.theme-blue html.dark .text-pink-600 svg,
body.theme-blue html.dark .text-pink-600 {
    color: #60a5fa !important; /* 深色模式下的浅蓝色 */
}

/* 背景色主题适配 - 分类标签等 */
.bg-gray-100 {
    background-color: #f3f4f6 !important;
}

.hover\:bg-gray-100:hover {
    background-color: #e5e7eb !important;
}

/* 默认主题（中性灰）背景色适配 */
.hover\:bg-gray-100:hover {
    background-color: #e5e7eb !important;
}

/* 蓝色主题背景色适配 */
body.theme-blue .hover\:bg-gray-100:hover {
    background-color: #dbeafe !important;
}

/* 翠绿主题背景色适配 */
body.theme-emerald .hover\:bg-gray-100:hover {
    background-color: #d1fae5 !important;
}

/* 玫瑰主题背景色适配 */
body.theme-rose .hover\:bg-gray-100:hover {
    background-color: #ffe4e6 !important;
}

/* 琥珀主题背景色适配 */
body.theme-amber .hover\:bg-gray-100:hover {
    background-color: #fef3c7 !important;
}

/* 紫罗兰主题背景色适配 */
body.theme-violet .hover\:bg-gray-100:hover {
    background-color: #ede9fe !important;
}

/* 翠绿主题 - 浅色模式 */
body.theme-emerald svg.text-blue-600,
body.theme-emerald .text-blue-600 svg,
body.theme-emerald .text-blue-600,
body.theme-emerald svg.text-green-600,
body.theme-emerald .text-green-600 svg,
body.theme-emerald .text-green-600,
body.theme-emerald svg.text-purple-600,
body.theme-emerald .text-purple-600 svg,
body.theme-emerald .text-purple-600,
body.theme-emerald svg.text-orange-600,
body.theme-emerald .text-orange-600 svg,
body.theme-emerald .text-orange-600,
body.theme-emerald svg.text-pink-600,
body.theme-emerald .text-pink-600 svg,
body.theme-emerald .text-pink-600 {
    color: #059669 !important; /* 深绿色 */
}

/* 翠绿主题 - 深色模式 */
body.theme-emerald html.dark svg.text-blue-600,
body.theme-emerald html.dark .text-blue-600 svg,
body.theme-emerald html.dark .text-blue-600,
body.theme-emerald html.dark svg.text-green-600,
body.theme-emerald html.dark .text-green-600 svg,
body.theme-emerald html.dark .text-green-600,
body.theme-emerald html.dark svg.text-purple-600,
body.theme-emerald html.dark .text-purple-600 svg,
body.theme-emerald html.dark .text-purple-600,
body.theme-emerald html.dark svg.text-orange-600,
body.theme-emerald html.dark .text-orange-600 svg,
body.theme-emerald html.dark .text-orange-600,
body.theme-emerald html.dark svg.text-pink-600,
body.theme-emerald html.dark .text-pink-600 svg,
body.theme-emerald html.dark .text-pink-600 {
    color: #34d399 !important; /* 浅绿色 */
}

/* 玫瑰主题 - 浅色模式 */
body.theme-rose svg.text-blue-600,
body.theme-rose .text-blue-600 svg,
body.theme-rose .text-blue-600,
body.theme-rose svg.text-green-600,
body.theme-rose .text-green-600 svg,
body.theme-rose .text-green-600,
body.theme-rose svg.text-purple-600,
body.theme-rose .text-purple-600 svg,
body.theme-rose .text-purple-600,
body.theme-rose svg.text-orange-600,
body.theme-rose .text-orange-600 svg,
body.theme-rose .text-orange-600,
body.theme-rose svg.text-pink-600,
body.theme-rose .text-pink-600 svg,
body.theme-rose .text-pink-600 {
    color: #e11d48 !important; /* 深玫瑰色 */
}

/* 玫瑰主题 - 深色模式 */
body.theme-rose html.dark svg.text-blue-600,
body.theme-rose html.dark .text-blue-600 svg,
body.theme-rose html.dark .text-blue-600,
body.theme-rose html.dark svg.text-green-600,
body.theme-rose html.dark .text-green-600 svg,
body.theme-rose html.dark .text-green-600,
body.theme-rose html.dark svg.text-purple-600,
body.theme-rose html.dark .text-purple-600 svg,
body.theme-rose html.dark .text-purple-600,
body.theme-rose html.dark svg.text-orange-600,
body.theme-rose html.dark .text-orange-600 svg,
body.theme-rose html.dark .text-orange-600,
body.theme-rose html.dark svg.text-pink-600,
body.theme-rose html.dark .text-pink-600 svg,
body.theme-rose html.dark .text-pink-600 {
    color: #fb7185 !important; /* 浅玫瑰色 */
}

/* 琥珀主题 - 浅色模式 */
body.theme-amber svg.text-blue-600,
body.theme-amber .text-blue-600 svg,
body.theme-amber .text-blue-600,
body.theme-amber svg.text-green-600,
body.theme-amber .text-green-600 svg,
body.theme-amber .text-green-600,
body.theme-amber svg.text-purple-600,
body.theme-amber .text-purple-600 svg,
body.theme-amber .text-purple-600,
body.theme-amber svg.text-orange-600,
body.theme-amber .text-orange-600 svg,
body.theme-amber .text-orange-600,
body.theme-amber svg.text-pink-600,
body.theme-amber .text-pink-600 svg,
body.theme-amber .text-pink-600 {
    color: #d97706 !important; /* 深琥珀色 */
}

/* 琥珀主题 - 深色模式 */
body.theme-amber html.dark svg.text-blue-600,
body.theme-amber html.dark .text-blue-600 svg,
body.theme-amber html.dark .text-blue-600,
body.theme-amber html.dark svg.text-green-600,
body.theme-amber html.dark .text-green-600 svg,
body.theme-amber html.dark .text-green-600,
body.theme-amber html.dark svg.text-purple-600,
body.theme-amber html.dark .text-purple-600 svg,
body.theme-amber html.dark .text-purple-600,
body.theme-amber html.dark svg.text-orange-600,
body.theme-amber html.dark .text-orange-600 svg,
body.theme-amber html.dark .text-orange-600,
body.theme-amber html.dark svg.text-pink-600,
body.theme-amber html.dark .text-pink-600 svg,
body.theme-amber html.dark .text-pink-600 {
    color: #fbbf24 !important; /* 浅琥珀色 */
}

/* 紫罗兰主题 - 浅色模式 */
body.theme-violet svg.text-blue-600,
body.theme-violet .text-blue-600 svg,
body.theme-violet .text-blue-600,
body.theme-violet svg.text-green-600,
body.theme-violet .text-green-600 svg,
body.theme-violet .text-green-600,
body.theme-violet svg.text-purple-600,
body.theme-violet .text-purple-600 svg,
body.theme-violet .text-purple-600,
body.theme-violet svg.text-orange-600,
body.theme-violet .text-orange-600 svg,
body.theme-violet .text-orange-600,
body.theme-violet svg.text-pink-600,
body.theme-violet .text-pink-600 svg,
body.theme-violet .text-pink-600 {
    color: #7c3aed !important; /* 深紫罗兰色 */
}

/* 紫罗兰主题 - 深色模式 */
body.theme-violet html.dark svg.text-blue-600,
body.theme-violet html.dark .text-blue-600 svg,
body.theme-violet html.dark .text-blue-600,
body.theme-violet html.dark svg.text-green-600,
body.theme-violet html.dark .text-green-600 svg,
body.theme-violet html.dark .text-green-600,
body.theme-violet html.dark svg.text-purple-600,
body.theme-violet html.dark .text-purple-600 svg,
body.theme-violet html.dark .text-purple-600,
body.theme-violet html.dark svg.text-orange-600,
body.theme-violet html.dark .text-orange-600 svg,
body.theme-violet html.dark .text-orange-600,
body.theme-violet html.dark svg.text-pink-600,
body.theme-violet html.dark .text-pink-600 svg,
body.theme-violet html.dark .text-pink-600 {
    color: #a78bfa !important; /* 浅紫罗兰色 */
}

/* 只有链接和按钮才需要悬停效果，移除整体section悬停 */
html.dark aside a:hover,
html.dark .sidebar a:hover {
    background: #334155 !important;
    color: #f1f5f9 !important;
    border-radius: 0.5rem;
} 

/* 在激活状态下显示对勾 */
#appearance-panel button.color-swatch.active::after{
    content:'✓';
    position:absolute;
    color:white;
    font-size:14px;
    font-weight:bold;
    text-shadow:0 1px 2px rgba(0,0,0,.5);
}

/* 面板标题和分组 */
#appearance-panel h3{
    color:#1f2937;
    font-weight:600;
}
html.dark #appearance-panel h3{
    color:#f9fafb;
}

#appearance-panel section > div:first-child{
    color:#374151;
    font-weight:500;
}
html.dark #appearance-panel section > div:first-child{
    color:#d1d5db;
}

/* 复选框和标签样式优化 */
#appearance-panel label{
    cursor:pointer;
    padding:4px 0;
    border-radius:4px;
    transition:background-color 0.15s ease;
}
#appearance-panel label:hover{
    background:rgba(59,130,246,.05);
}
html.dark #appearance-panel label:hover{
    background:rgba(59,130,246,.1);
}

/* 移除不必要的悬停效果 */
#appearance-panel section > div:first-child{
    color:#374151;
    font-weight:500;
}
html.dark #appearance-panel section > div:first-child{
    color:#d1d5db;
}

/* 移除标题和普通文字的悬停效果 */
#appearance-panel h3,
#appearance-panel .font-medium {
    transition: none;
}

/* 按钮样式 */
#appearance-panel button[data-ap-reset]{
    background:#f3f4f6;
    color:#1f2937;
    border:1px solid #d1d5db;
    font-weight:500;
}
#appearance-panel button[data-ap-reset]:hover{
    background:#e5e7eb;
    border-color:#9ca3af;
    color:#111827;
}
html.dark #appearance-panel button[data-ap-reset]{
    background:#4b5563;
    color:#f9fafb;
    border-color:#6b7280;
}
html.dark #appearance-panel button[data-ap-reset]:hover{
    background:#374151;
    border-color:#9ca3af;
    color:#ffffff;
}