/* ============================================================
   更新日志管理系统 自定义补充样式
   配合 Tailwind 与 Markdown 渲染使用
   字体：英文 BeaufortforLOL-Bold (700)，中文 方正兰亭特黑_GBK (100)
   主题：日间 / 夜间 / 自动（data-theme 属性切换）
   ============================================================ */

/* 英文字体：Beaufort for LOL (Bold) - 声明为 weight 700 */
@font-face {
    font-family: 'BeaufortLOL';
    src: url('../fonts/BeaufortforLOL-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* 中文字体：方正兰亭特黑_GBK - 声明为 weight 100 */
@font-face {
    font-family: 'FZLanTingHeiGBK';
    src: url('../fonts/方正兰亭特黑_GBK.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* 字体栈变量 */
:root {
    --app-font: 'BeaufortLOL', 'FZLanTingHeiGBK', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* 全站统一字体 + 中文字重 100 */
html, body {
    font-family: var(--app-font);
    font-weight: 100;
}

input, textarea, select, button {
    font-family: var(--app-font);
    font-weight: 100;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--app-font);
    font-weight: 100;
}

table, th, td {
    font-family: var(--app-font);
    font-weight: 100;
}

/* font-bold / font-semibold 兜底：强制 100，确保中文不受 Tailwind 类影响 */
.font-bold, .font-semibold {
    font-weight: 100 !important;
}

/* b/strong 标签：不改字重，仅改颜色为橙色 */
b, strong {
    font-weight: inherit;
    color: #ff8700;
}

/* ============================================================
   Markdown 正文排版
   ============================================================ */

.markdown-body {
    color: #1e293b;
    line-height: 1.75;
    font-size: 15px;
    font-family: var(--app-font);
    font-weight: 100;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4 {
    color: #0f172a;
    font-weight: 100;
    margin-top: 1.6em;
    margin-bottom: 0.6em;
    font-family: var(--app-font);
}

.markdown-body h1 { font-size: 1.9em; }
.markdown-body h2 {
    font-size: 1.5em;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.3em;
}
.markdown-body h3 { font-size: 1.25em; }
.markdown-body h4 { font-size: 1.05em; }

.markdown-body p {
    margin: 0.8em 0;
    font-family: var(--app-font);
    font-weight: 100;
}

.markdown-body a {
    color: #2563eb;
    text-decoration: none;
    font-family: var(--app-font);
}
.markdown-body a:hover {
    text-decoration: underline;
}

.markdown-body ul,
.markdown-body ol {
    padding-left: 1.8em;
    margin: 0.8em 0;
}
.markdown-body li {
    margin: 0.3em 0;
    font-family: var(--app-font);
    font-weight: 100;
}

.markdown-body blockquote {
    border-left: 4px solid #cbd5e1;
    padding: 0.4em 1em;
    color: #64748b;
    background: #f8fafc;
    margin: 1em 0;
    border-radius: 0 4px 4px 0;
    font-family: var(--app-font);
    font-weight: 100;
}

/* 行内代码 */
.markdown-body code {
    background: #f1f5f9;
    color: #db2777;
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

/* 代码块：无背景色，仅保留边框和圆角 */
.markdown-body pre {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 1em 1.2em;
    overflow-x: auto;
    max-width: 100%;
    margin: 1em 0;
    position: relative;
    background: transparent !important;
}

.markdown-body pre code,
.markdown-body .hljs {
    background: transparent !important;
    color: inherit;
    padding: 0;
    border-radius: 0;
    font-size: 0.875em;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

/* highlight.js token 颜色（无背景，仅着色） */
.markdown-body .hljs-keyword,
.markdown-body .hljs-selector-tag,
.markdown-body .hljs-built_in,
.markdown-body .hljs-name,
.markdown-body .hljs-tag { color: #c678dd; }

.markdown-body .hljs-string,
.markdown-body .hljs-title,
.markdown-body .hljs-section,
.markdown-body .hljs-attribute,
.markdown-body .hljs-literal,
.markdown-body .hljs-template-tag,
.markdown-body .hljs-template-variable,
.markdown-body .hljs-addition { color: #98c379; }

.markdown-body .hljs-comment,
.markdown-body .hljs-quote,
.markdown-body .hljs-deletion { color: #7c7c7c; font-style: italic; }

.markdown-body .hljs-number,
.markdown-body .hljs-meta,
.markdown-body .hljs-link,
.markdown-body .hljs-regexp { color: #d19a66; }

.markdown-body .hljs-function .hljs-title,
.markdown-body .hljs-attr,
.markdown-body .hljs-variable,
.markdown-body .hljs-type,
.markdown-body .hljs-symbol,
.markdown-body .hljs-bullet,
.markdown-body .hljs-params { color: #e06c75; }

.markdown-body .hljs-class .hljs-title,
.markdown-body .hljs-title.class_ { color: #61afef; }

/* 代码块复制按钮 */
.markdown-body pre .copy-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 4px 10px;
    font-size: 12px;
    color: #64748b;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 10;
    font-family: var(--app-font);
}

.markdown-body pre:hover .copy-btn {
    opacity: 1;
}

.markdown-body pre .copy-btn:hover {
    background: #f1f5f9;
    color: #334155;
}

.markdown-body pre .copy-btn.copied {
    color: #16a34a;
    border-color: #16a34a;
}

/* 表格 */
.markdown-body table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
    font-size: 0.9em;
    font-family: var(--app-font);
    font-weight: 100;
    display: block;
    overflow-x: auto;
}

.markdown-body th,
.markdown-body td {
    border: 1px solid #e2e8f0;
    padding: 0.5em 0.8em;
    text-align: left;
    font-family: var(--app-font);
    font-weight: 100;
}

.markdown-body th {
    background: #f8fafc;
    font-weight: 100;
    color: #334155;
}

.markdown-body tr:nth-child(even) {
    background: #f8fafc;
}

.markdown-body hr {
    border: none;
    border-top: 1px solid #e2e8f0;
    margin: 2em 0;
}

.markdown-body img {
    max-width: 100%;
    border-radius: 8px;
}

/* KaTeX 公式：保持数学字体不变 */
.markdown-body .katex {
    font-size: 1.05em;
    font-family: KaTeX_Main, 'Times New Roman', serif;
}

/* ============================================================
   夜间模式样式（通过 <html data-theme="dark"> 触发）
   ============================================================ */

[data-theme="dark"] body {
    background-color: #1a1a2e !important;
    color: #e2e8f0;
}

/* 前台布局背景 */
[data-theme="dark"] .bg-slate-50 { background-color: #1a1a2e !important; }
[data-theme="dark"] .bg-white { background-color: #16213e !important; }

/* 前台侧边栏 */
[data-theme="dark"] .border-slate-200 { border-color: #334155 !important; }

/* 文字颜色 */
[data-theme="dark"] .text-slate-800 { color: #e2e8f0 !important; }
[data-theme="dark"] .text-slate-900 { color: #f1f5f9 !important; }
[data-theme="dark"] .text-slate-600 { color: #94a3b8 !important; }
[data-theme="dark"] .text-slate-400 { color: #64748b !important; }
[data-theme="dark"] .text-slate-500 { color: #94a3b8 !important; }
[data-theme="dark"] .text-slate-700 { color: #cbd5e1 !important; }

/* 悬停状态 */
[data-theme="dark"] .hover\:bg-slate-50:hover { background-color: #1e293b !important; }
[data-theme="dark"] .hover\:bg-slate-100:hover { background-color: #334155 !important; }
[data-theme="dark"] .hover\:bg-slate-200:hover { background-color: #334155 !important; }
[data-theme="dark"] .hover\:text-slate-900:hover { color: #f1f5f9 !important; }
[data-theme="dark"] .hover\:text-slate-700:hover { color: #e2e8f0 !important; }
[data-theme="dark"] .hover\:text-slate-800:hover { color: #f1f5f9 !important; }

/* 选中版本项 */
[data-theme="dark"] .bg-slate-50 { background-color: #1e293b !important; }

/* 边框高亮色（选中态） */
[data-theme="dark"] .border-slate-800 { border-color: #ff8700 !important; }

/* Markdown 正文夜间配色 */
[data-theme="dark"] .markdown-body { color: #cbd5e1; }

[data-theme="dark"] .markdown-body h1,
[data-theme="dark"] .markdown-body h2,
[data-theme="dark"] .markdown-body h3,
[data-theme="dark"] .markdown-body h4 {
    color: #f1f5f9;
}

[data-theme="dark"] .markdown-body h2 {
    border-bottom-color: #334155;
}

[data-theme="dark"] .markdown-body a {
    color: #60a5fa;
}

[data-theme="dark"] .markdown-body blockquote {
    background: #1e293b;
    border-left-color: #475569;
    color: #94a3b8;
}

[data-theme="dark"] .markdown-body code {
    background: #334155;
    color: #fb7185;
}

[data-theme="dark"] .markdown-body pre {
    background: transparent !important;
    border-color: #334155;
}

[data-theme="dark"] .markdown-body pre code,
[data-theme="dark"] .markdown-body .hljs {
    background: transparent !important;
}

[data-theme="dark"] .markdown-body pre .copy-btn {
    background: rgba(30, 41, 59, 0.9);
    color: #94a3b8;
    border-color: #475569;
}

[data-theme="dark"] .markdown-body pre .copy-btn:hover {
    background: #334155;
    color: #e2e8f0;
}

[data-theme="dark"] .markdown-body th {
    background: #1e293b;
    color: #e2e8f0;
}

[data-theme="dark"] .markdown-body tr:nth-child(even) {
    background: #1e293b;
}

[data-theme="dark"] .markdown-body th,
[data-theme="dark"] .markdown-body td {
    border-color: #334155;
}

[data-theme="dark"] .markdown-body hr {
    border-top-color: #334155;
}

/* b/strong 夜间 */
[data-theme="dark"] b,
[data-theme="dark"] strong {
    color: #ffa726;
}

/* ============================================================
   后台夜间模式样式
   ============================================================ */

/* 后台主内容区 */
[data-theme="dark"] .bg-slate-100 { background-color: #1a1a2e !important; }

/* 后台卡片/表单容器 */
[data-theme="dark"] .bg-white.rounded-xl,
[data-theme="dark"] .bg-white.shadow-sm,
[data-theme="dark"] form.bg-white {
    background-color: #16213e !important;
}

/* 后台输入框/文本域/选择框 */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #64748b !important;
}

/* 后台输入框聚焦 */
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: #ff8700 !important;
}

/* 后台表格 */
[data-theme="dark"] table thead tr {
    background-color: #1e293b !important;
}

[data-theme="dark"] table tbody tr {
    background-color: #16213e !important;
}

[data-theme="dark"] table tbody tr:hover {
    background-color: #1e293b !important;
}

[data-theme="dark"] .divide-slate-100 > * {
    border-color: #334155 !important;
}

/* 后台边框 */
[data-theme="dark"] .border-slate-300 { border-color: #334155 !important; }
[data-theme="dark"] .border-slate-100 { border-color: #334155 !important; }

/* 后台侧边栏（深色，不使用橙色） */
[data-theme="dark"] .admin-sidebar {
    background-color: #16213e !important;
    border-color: #1e293b !important;
}
[data-theme="dark"] .admin-sidebar .hover\:bg-slate-700:hover {
    background-color: #1e293b !important;
}
[data-theme="dark"] .admin-sidebar .border-slate-700 { border-color: #1e293b !important; }

/* 后台按钮（橙色保留，仅针对按钮元素，不影响侧边栏） */
[data-theme="dark"] button.bg-slate-800,
[data-theme="dark"] a.bg-slate-800:not(.admin-sidebar) {
    background-color: #ff8700 !important;
    color: #fff !important;
}
[data-theme="dark"] button.hover\:bg-slate-700:hover,
[data-theme="dark"] a.hover\:bg-slate-700:hover:not(.admin-sidebar) {
    background-color: #e67600 !important;
}

/* 后台卡片标题 */
[data-theme="dark"] .text-slate-300 { color: #94a3b8 !important; }

/* 后台删除弹窗 */
[data-theme="dark"] .bg-black\/40 { background-color: rgba(0, 0, 0, 0.6) !important; }

/* 后台蓝色标签（Markdown 类型） */
[data-theme="dark"] .bg-blue-50 { background-color: rgba(59, 130, 246, 0.15) !important; }
[data-theme="dark"] .text-blue-600 { color: #60a5fa !important; }
[data-theme="dark"] .hover\:text-blue-600:hover { color: #60a5fa !important; }
[data-theme="dark"] .hover\:bg-blue-50:hover { background-color: rgba(59, 130, 246, 0.15) !important; }

/* 后台红色（删除） */
[data-theme="dark"] .hover\:text-red-600:hover { color: #f87171 !important; }
[data-theme="dark"] .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.15) !important; }
[data-theme="dark"] .bg-red-100 { background-color: rgba(239, 68, 68, 0.2) !important; }
[data-theme="dark"] .text-red-600 { color: #f87171 !important; }

/* 后台内容类型选中卡片 */
[data-theme="dark"] .border-slate-800 { border-color: #ff8700 !important; }
[data-theme="dark"] .bg-slate-50 { background-color: #1e293b !important; }

/* ============================================================
   主题切换按钮组（固定在右下角）
   ============================================================ */

.theme-toggle {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 50;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    padding: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.theme-toggle button {
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s;
    padding: 0;
}

.theme-toggle button:hover {
    color: #334155;
}

.theme-toggle button.active {
    background: #ff8700;
    color: #fff;
}

/* 夜间模式下切换按钮组样式 */
[data-theme="dark"] .theme-toggle {
    background: rgba(30, 41, 59, 0.9);
    border-color: #334155;
}

[data-theme="dark"] .theme-toggle button {
    color: #94a3b8;
}

[data-theme="dark"] .theme-toggle button:hover {
    color: #e2e8f0;
}

[data-theme="dark"] .theme-toggle button.active {
    background: #ff8700;
    color: #fff;
}

/* ============================================================
   全局滚动条美化（webkit 内核浏览器）
   ============================================================ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
    background-clip: padding-box;
    border: 2px solid transparent;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* Firefox 滚动条美化 */
* {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

/* 夜间模式滚动条 */
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #475569;
    background-clip: padding-box;
    border: 2px solid transparent;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #64748b;
    background-clip: padding-box;
    border: 2px solid transparent;
}

[data-theme="dark"] * {
    scrollbar-color: #475569 transparent;
}

/* ============================================================
   全局圆角统一为 5px（保留 rounded-full 圆形）
   ============================================================ */

.rounded,
.rounded-md,
.rounded-lg,
.rounded-xl,
.rounded-2xl {
    border-radius: 5px !important;
}

/* ============================================================
   后台侧边栏导航项样式（类似前台左侧：左边框 + 灰色悬浮 + 选中高亮）
   ============================================================ */

.admin-sidebar .nav-item {
    border-left: 4px solid transparent;
    transition: all 0.2s;
}

.admin-sidebar .nav-item:hover {
    background-color: #334155;
    color: #fff;
}

.admin-sidebar .nav-item.active {
    border-left-color: #ff8700;
    background-color: rgba(255, 135, 0, 0.12);
    color: #fff;
}

/* 夜间模式下侧边栏导航项悬浮（更深灰） */
[data-theme="dark"] .admin-sidebar .nav-item:hover {
    background-color: #1e293b;
    color: #fff;
}

[data-theme="dark"] .admin-sidebar .nav-item.active {
    border-left-color: #ff8700;
    background-color: rgba(255, 135, 0, 0.15);
    color: #fff;
}

/* ============================================================
   前台侧边栏样式
   日间：左侧 #f1f5f9，右侧白色 #ffffff
   夜间：左侧 #353637，右侧 #222222
   选中项：与右侧颜色一致，无右侧 border
   非选中项：与侧栏本体颜色有区分
   左右之间 1px 分隔线
   ============================================================ */

/* 全局取消点击外框 */
*:focus {
    outline: none;
}

/* 侧边栏背景 + 右侧分隔线 */
.sidebar-panel {
    background-color: #e8ecf1;
    border-right: 1px solid #d1d5db;
}

.sidebar-title {
    color: #1e293b;
}

.sidebar-muted {
    color: #94a3b8;
}

.sidebar-date {
    color: #94a3b8;
}

/* 分类组标题（sticky 定位，滚动时固定在顶部） */
.category-header {
    color: #475569;
    border: none;
    background-color: #e8ecf1;
    cursor: pointer;
    font-family: var(--app-font);
    font-weight: 100;
    position: sticky;
    top: 0;
    z-index: 2;
}

.category-header:hover {
    background-color: #e2e8f0 !important;
}

.category-header-text {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* 分类项：非选中项有轻微区分 */
.category-items .version-item {
    color: #475569;
    padding-left: 20px;
    border-left: 3px solid transparent;
    border-radius: 0;
}

.category-items .version-item:hover {
    color: #1e293b;
    background-color: #e2e8f0;
}

/* 选中项：与右侧内容区颜色一致，无右边框 */
.version-item.version-active {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border-left-color: transparent;
    border-right: none;
    /* 右侧与内容区融合，覆盖分隔线 */
    box-shadow: 1px 0 0 #ffffff;
    position: relative;
    z-index: 1;
}

/* 右侧内容区 */
.content-area,
#title-bar,
.content-header {
    background-color: #ffffff;
    border-bottom: 1px solid #cecece;
}

/* ========== 夜间模式：前台侧边栏 ========== */
[data-theme="dark"] .sidebar-panel {
    background-color: #353637;
    border-right-color: #4a4b4c;
}

[data-theme="dark"] .sidebar-title {
    color: #e2e8f0;
}

[data-theme="dark"] .sidebar-muted {
    color: #6b7280;
}

[data-theme="dark"] .sidebar-date {
    color: #6b7280;
}

[data-theme="dark"] .category-header {
    color: #9ca3af;
    background-color: #353637;
}

[data-theme="dark"] .category-header:hover {
    background-color: #404142 !important;
}

[data-theme="dark"] .category-items .version-item {
    color: #9ca3af;
    border-left-color: transparent;
}

[data-theme="dark"] .category-items .version-item:hover {
    color: #e2e8f0;
    background-color: #404142;
}

/* 夜间选中项：与右侧内容区一致 #222222 */
[data-theme="dark"] .version-item.version-active {
    background-color: #16213e !important;
    color: #e2e8f0 !important;
    box-shadow: 1px 0 0 #222222;
}

/* 夜间右侧内容区 */
[data-theme="dark"] .content-area {
    background-color: #222222;
}

/* 夜间标题栏与内容区一致 */
[data-theme="dark"] #title-bar,
[data-theme="dark"] .content-header {
    background-color: #16213e;
    border-bottom: 1px solid #494949;
}

/* 夜间移动端顶栏 */
[data-theme="dark"] .content-header .text-slate-600 {
    color: #9ca3af !important;
}

[data-theme="dark"] .content-header .hover\:text-slate-900:hover {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .content-header .border-slate-200 {
    border-color: #3a3b3c !important;
}

/* ========== 前台夜间模式文字颜色覆盖 ========== */
[data-theme="dark"] .content-area .text-slate-900 {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .content-area .text-slate-400 {
    color: #6b7280 !important;
}

[data-theme="dark"] .markdown-body {
    color: #d1d5db;
}

[data-theme="dark"] .markdown-body h1,
[data-theme="dark"] .markdown-body h2,
[data-theme="dark"] .markdown-body h3,
[data-theme="dark"] .markdown-body h4 {
    color: #f3f4f6;
}

[data-theme="dark"] .markdown-body a {
    color: #60a5fa;
}

[data-theme="dark"] .markdown-body blockquote {
    border-left-color: #4b5563;
    color: #9ca3af;
    background-color: #2a2b2c;
}

[data-theme="dark"] .markdown-body code {
    background-color: #2a2b2c;
    color: #f3f4f6;
}

[data-theme="dark"] .markdown-body pre {
    background: transparent !important;
    border-color: #3a3b3c;
}

[data-theme="dark"] .markdown-body pre code {
    background: transparent;
    color: #d1d5db;
}

[data-theme="dark"] .markdown-body table th {
    background-color: #2a2b2c;
    border-color: #3a3b3c;
    color: #d1d5db;
}

[data-theme="dark"] .markdown-body table td {
    border-color: #3a3b3c;
}

[data-theme="dark"] .markdown-body hr {
    border-color: #3a3b3c;
}

[data-theme="dark"] .markdown-body h2 {
    border-bottom-color: #3a3b3c;
}

/* ========== 代码高亮夜间模式 token 颜色 ========== */
[data-theme="dark"] .hljs-keyword,
[data-theme="dark"] .hljs-selector-tag { color: #c792ea; }
[data-theme="dark"] .hljs-string,
[data-theme="dark"] .hljs-addition { color: #c3e88d; }
[data-theme="dark"] .hljs-comment,
[data-theme="dark"] .hljs-quote { color: #546e7a; }
[data-theme="dark"] .hljs-number,
[data-theme="dark"] .hljs-literal { color: #f78c6c; }
[data-theme="dark"] .hljs-title,
[data-theme="dark"] .hljs-function { color: #82aaff; }
[data-theme="dark"] .hljs-built_in { color: #ffcb6b; }
[data-theme="dark"] .hljs-type,
[data-theme="dark"] .hljs-attr { color: #ffcb6b; }
[data-theme="dark"] .hljs-variable,
[data-theme="dark"] .hljs-template-variable { color: #f3f4f6; }
[data-theme="dark"] .hljs-deletion { color: #f07178; }
[data-theme="dark"] .hljs-symbol { color: #c792ea; }
[data-theme="dark"] .hljs-meta { color: #89ddff; }

/* ============================================================
   响应式：移动端和平板端适配
   ============================================================ */

/* 平板端 (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .sidebar-panel {
        width: 14rem !important;
    }
}

/* 移动端 (< 1024px) 侧栏抽屉 */
@media (max-width: 1023px) {
    .sidebar-panel {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 40;
        height: 100%;
        box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
    }

    .sidebar-panel.-translate-x-full {
        box-shadow: none;
    }
}

/* 小屏幕 (< 640px) 内容区 padding 缩小 */
@media (max-width: 639px) {
    .content-area article {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    #title-bar {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* ============================================================
   自定义下拉框样式（后台分类选择）
   ============================================================ */
.custom-select {
    position: relative;
}

.custom-select-trigger {
    background-color: #ffffff;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-height: 34px;
}

.custom-select-trigger:hover {
    border-color: #94a3b8;
}

.custom-select-trigger:focus {
    outline: none;
    border-color: #64748b;
    box-shadow: 0 0 0 2px rgba(100, 116, 139, 0.2);
}

.custom-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    margin-top: 4px;
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 200px;
    overflow-y: auto;
}

.custom-select-option {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    color: #334155;
    transition: background-color 0.1s;
}

.custom-select-option:hover {
    background-color: #f1f5f9;
}

.custom-select-option.selected {
    background-color: #f1f5f9;
    color: #1e293b;
}

.custom-select-empty {
    padding: 8px 12px;
    font-size: 12px;
    color: #94a3b8;
}

/* 夜间模式下拉框 */
[data-theme="dark"] .custom-select-trigger {
    background-color: #1e293b;
    border-color: #475569;
    color: #e2e8f0;
}

[data-theme="dark"] .custom-select-trigger:hover {
    border-color: #64748b;
}

[data-theme="dark"] .custom-select-trigger:focus {
    border-color: #94a3b8;
    box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.2);
}

[data-theme="dark"] .custom-select-dropdown {
    background-color: #1e293b;
    border-color: #475569;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .custom-select-option {
    color: #cbd5e1;
}

[data-theme="dark"] .custom-select-option:hover {
    background-color: #334155;
}

/* ===== 复制公告按钮 ===== */
.copy-announce-btn {
    position: relative;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    color: #94a3b8;
}
.copy-announce-btn:hover {
    color: #16a34a;
    background-color: #f0fdf4;
}
[data-theme="dark"] .copy-announce-btn:hover {
    color: #4ade80;
    background-color: rgba(22, 163, 74, 0.15);
}
/* 图标叠放 + 淡化切换动画 */
.copy-announce-btn .copy-icon,
.copy-announce-btn .check-icon {
    position: absolute;
    top: 6px;
    left: 6px;
    pointer-events: none;
}
.copy-announce-btn .copy-icon {
    opacity: 1;
    transition: opacity 0.3s ease 0s;
}
.copy-announce-btn .check-icon {
    opacity: 0;
    transition: opacity 0.3s ease 0s;
}
/* 复制成功状态：复制图标淡出，对号图标淡入 */
.copy-announce-btn.copied .copy-icon {
    opacity: 0;
}
.copy-announce-btn.copied .check-icon {
    opacity: 1;
}

[data-theme="dark"] .custom-select-option.selected {
    background-color: #334155;
    color: #f1f5f9;
}