/* 教程系统样式
 * 设计令牌（D-token，2026-06-11）：克制文档风
 * - accent 文字 #0066CC / 装饰渐变 #0095FF→#00D4FF，废弃 #4361ee 体系
 * - 边框驱动、阴影仅 hover 出现；圆角三档 8/12/16
 * - clamp() 流式字阶；正文 16px/1.75；间距分档 */
:root {
    /* accent 体系 */
    --accent: #0066CC;
    --accent-hover: #0052A3;
    --accent-tint: rgba(0, 102, 204, 0.08);
    --accent-tint-strong: rgba(0, 102, 204, 0.14);
    --accent-deco: #0095FF;
    --accent-deco-2: #00D4FF;

    /* 兼容旧用法的别名（A/B/C/F 步逐步替换为 --accent） */
    --primary-color: var(--accent);
    --primary-hover: var(--accent-hover);
    --secondary-color: #7209b7;
    --success-color: #06d6a0;
    --danger-color: #e63946;
    --warning-color: #f9c74f;
    --info-color: #4895ef;

    /* 文本颜色（亮色：近黑标题，灰阶递减，辅助文字 #9fa0a0 档） */
    --text-title: #1a1a1a;
    --text-subtitle: #2d2d30;
    --text-content: #3f3f46;
    --text-nav: #55555c;
    --text-nav-title: #9fa0a0;
    --text-light: #9fa0a0;
    --text-input: #3f3f46;
    --text-code: #333333;
    --text-quote: #71717a;
    --text-color: #1a1a1a;

    /* 链接颜色 */
    --link-color: var(--accent);
    --link-visited: #6a4fb0; /* 已访问：低饱和蓝紫，区分已读但不刺眼 */

    /* 背景颜色（亮色：纯白底） */
    --bg-body: #ffffff;
    --bg-sidebar: #ffffff;
    --bg-header: #ffffff;
    --bg-card: #ffffff;
    --bg-nav-hover: var(--accent-tint);
    --bg-input: #f5f6f7;
    --bg-btn-hover: rgba(0, 0, 0, 0.05);
    --bg-code: #f5f7fa;

    /* 边框颜色（灰阶细边框，gray-200 档） */
    --border-color: #e5e7eb;
    --border-sidebar: #e5e7eb;
    --border-header: #e5e7eb;
    --border-content: #e5e7eb;
    --border-input: #e5e7eb;

    /* 圆角三档：sm 8 / md 12 / lg 16 */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 9999px;
    --radius-input: var(--radius-sm);
    --radius-img: var(--radius-sm);
    --radius-code: var(--radius-md);
    --radius-card: var(--radius-md);
    --radius-btn: var(--radius-sm);

    /* 阴影：默认无，仅 hover 一层低阴影 */
    --shadow-card: none;
    --shadow-header: none;
    --shadow-sm: none;
    --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.06);

    /* 字阶（clamp 流式）与行高 */
    --fs-h1: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);    /* 28→40px */
    --fs-h2: clamp(1.375rem, 1.25rem + 0.5vw, 1.625rem); /* 22→26px */
    --fs-h3: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);  /* 18→20px */
    --fs-body: 1rem;                                      /* 16px */
    --lh-body: 1.75;

    /* 间距分档 */
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    /* 过渡效果 */
    --transition-normal: all 0.3s ease;

    /* 布局尺寸 */
    --sidebar-width: 280px;
    --header-height: 60px;
    --content-max-width: 900px;
}

/* 深色主题变量（近黑底 #0d0d0f，灰阶 surface 分层，accent 提亮一档） */
.dark-theme {
    /* accent 提亮一档 */
    --accent: #4d9fff;
    --accent-hover: #6cb2ff;
    --accent-tint: rgba(77, 159, 255, 0.12);
    --accent-tint-strong: rgba(77, 159, 255, 0.18);

    /* 已访问链接：提亮的柔和蓝紫，暗底下清晰可辨 */
    --link-visited: #b39ddb;

    /* 文本颜色 */
    --text-title: #f5f5f7;
    --text-subtitle: #d6d6db;
    --text-content: #c2c2c9;
    --text-nav: #a0a0a8;
    --text-nav-title: #80808a;
    --text-light: #8a8a93;
    --text-input: #c2c2c9;
    --text-code: #d0d0d0;
    --text-quote: #8a8a93;
    --text-color: #f5f5f7;

    /* 背景颜色（surface 分层：body < sidebar/header < card/input） */
    --bg-body: #0d0d0f;
    --bg-sidebar: #131316;
    --bg-header: #131316;
    --bg-card: #16161a;
    --bg-nav-hover: var(--accent-tint);
    --bg-input: #1c1c21;
    --bg-btn-hover: rgba(255, 255, 255, 0.06);
    --bg-code: #1c1c21;

    /* 边框颜色 */
    --border-color: #26262c;
    --border-sidebar: #26262c;
    --border-header: #26262c;
    --border-content: #26262c;
    --border-input: #2e2e35;

    /* 阴影 */
    --shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.45);
}

/* 全局重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* 系统字体栈：Mac 用 San Francisco（观感接近 Inter）、Win 用 Segoe UI，
       中文回落苹方/雅黑；相比旧栈淘汰了 Helvetica Neue/Arial */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
    background-color: var(--bg-body);
    color: var(--text-content);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

/* Wiki容器布局 */
.wiki-container {
    display: flex;
    min-height: 100vh;
}

/* 侧边栏样式 */
.wiki-sidebar {
    width: var(--sidebar-width);
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-sidebar);
    overflow-y: auto;
    position: sticky;
    top: 0;
    height: 100vh;
    flex-shrink: 0;
    z-index: 10;
}

.wiki-logo {
    padding: 13.5px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--border-sidebar);
}

.wiki-logo img {
    height: 32px;
    margin-right: 10px;
}

.wiki-logo h1 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-title);
    margin: 0;
}

.wiki-logo .wiki-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.wiki-navigation {
    padding: 15px 0;
}

.wiki-nav-section {
    margin-bottom: 20px;
}

.wiki-nav-title {
    padding: 6px 20px;
    font-weight: 600;
    color: var(--text-light);
    font-size: 12px;
    letter-spacing: 0.3px;
}

.wiki-nav-list {
    list-style: none;
}

.wiki-nav-item {
    margin: 2px 0;
}

.wiki-nav-item a {
    display: block;
    padding: 8px 12px;
    color: var(--text-nav);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-radius: var(--radius-sm);
    font-size: 15px;
}

.wiki-nav-item a:hover {
    background-color: var(--bg-nav-hover);
    color: var(--accent);
}

.wiki-nav-item a.active {
    background-color: var(--accent-tint);
    color: var(--accent);
    font-weight: 600;
}

.wiki-nav-subitem a {
    padding-left: 40px;
    font-size: 14px;
}

.no-toc,
.no-related {
    display: block;
    padding: 10px 20px;
    color: var(--text-light);
    font-style: italic;
    font-size: 14px;
}

/* 主要内容区域 */
.wiki-main {
    flex: 1;
    max-width: calc(100% - var(--sidebar-width));
}

/* 头部样式 */
.wiki-header {
    height: var(--header-height);
    border-bottom: 1px solid var(--border-header);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px;
    background-color: var(--bg-header);
    position: sticky;
    top: 0;
    z-index: 5;
    box-shadow: var(--shadow-header);
}

.wiki-search {
    position: relative;
    width: 300px;
}

.wiki-search input {
    width: 100%;
    padding: 8px 15px 8px 35px;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-input);
    background-color: var(--bg-input);
    color: var(--text-input);
    font-size: 14px;
    transition: var(--transition-normal);
}

.wiki-search input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--accent-tint-strong);
}

.wiki-search i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
}

.wiki-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}

.theme-toggle-btn {
    background: transparent;
    border: none;
    color: var(--text-title);
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    transition: var(--transition-normal);
}

.theme-toggle-btn:hover {
    background-color: var(--bg-btn-hover);
}

.theme-toggle-btn i {
    transform: none !important;
    transition: transform 0.3s ease !important;
}

.theme-toggle-btn:hover i {
    transform: none !important;
}

.theme-toggle-btn .fa-sun,
.theme-toggle-btn .fa-moon {
    transform: none !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
}

/* 主内容样式 */
.wiki-content {
    padding: var(--space-7) var(--space-6);
    max-width: var(--content-max-width);
    margin: 0 auto;
}

.wiki-content h1 {
    font-size: var(--fs-h1);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-5);
    color: var(--text-title);
    line-height: 1.2;
}

/* 筛选结果标题 */
#filtered-title {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#filtered-title h2 {
    font-size: 20px;
    color: var(--text-subtitle);
    font-weight: 600;
}

.clear-filter-btn {
    background: transparent;
    border: 1px solid var(--border-content);
    color: var(--text-light);
    padding: 6px 12px;
    border-radius: var(--radius-btn);
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: var(--transition-normal);
}

.clear-filter-btn:hover {
    background-color: var(--bg-btn-hover);
    color: var(--danger-color);
    border-color: var(--danger-color);
}

/* 教程卡片列表 */
.tutorial-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-4);
    margin-top: 0;
}

/*
 * 卡片视觉（背景/边框/阴影/圆角）放到内层 .tutorial-card-content；
 * 外层 .tutorial-card 仅作网格单元与 hover 触发区，保持不动。
 * hover 时上浮的是内层，光标始终落在静止的外层上，避免卡片移动后
 * 掉进网格间隙导致的无限闪烁。
 */
.tutorial-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.tutorial-card-content {
    background-color: var(--bg-header);
    border: 1px solid var(--border-content);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    transition: var(--transition-normal);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.tutorial-card:hover .tutorial-card-content {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: var(--shadow-hover);
}

.tutorial-card-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.4;
}

.tutorial-card-title a {
    color: var(--text-title);
    text-decoration: none;
    transition: var(--transition-normal);
}

.tutorial-card-title a:hover {
    color: var(--primary-color);
}

.tutorial-card-summary {
    font-size: 13px;
    color: var(--text-content);
    margin-bottom: 12px;
    line-height: 1.5;
    flex: 1;
    /* 多浏览器兼容的文本截断设置 */
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-line-clamp: 2;
    -moz-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 3em;
    /* fallback for non-supporting browsers: line-height * number of lines */
}

.tutorial-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-light);
    margin-top: auto;
}

/* 分类标签：全站统一「淡底 accent 字」tinted pill */
.tutorial-category-tag,
.wiki-category {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 500;
    color: var(--accent);
    background-color: var(--accent-tint);
}

a.wiki-category {
    text-decoration: none;
}

/* 分类标签按分类色相上色（与侧栏图标同配方；无映射时回退 accent） */
.tutorial-category-tag.cat-hue,
.wiki-category.cat-hue {
    color: hsl(var(--cat-h, 215) 60% 38%);
    background-color: hsl(var(--cat-h, 215) 85% 94%);
}

.dark-theme .tutorial-category-tag.cat-hue,
.dark-theme .wiki-category.cat-hue {
    color: hsl(var(--cat-h, 215) 80% 72%);
    background-color: hsl(var(--cat-h, 215) 45% 17%);
}

.tutorial-views {
    display: flex;
    align-items: center;
    gap: 5px;
}

.no-tutorials {
    grid-column: 1 / -1;
    padding: 40px;
    text-align: center;
    color: var(--text-light);
    font-size: 16px;
    border: 1px dashed var(--border-content);
    border-radius: var(--radius-card);
}

/* 教程详情页样式 */
.wiki-article {
    padding: 20px;
    background-color: var(--bg-card);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-sm);
    margin-bottom: 30px;
}

.wiki-article h1 {
    font-size: var(--fs-h1);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    color: var(--text-color);
}

.wiki-article h2 {
    font-size: var(--fs-h2);
    margin: 25px 0 15px;
    color: var(--text-color);
}

.wiki-article h3 {
    font-size: var(--fs-h3);
    margin: 20px 0 10px;
    color: var(--text-color);
}

.wiki-metadata {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
    color: var(--text-secondary);
    font-size: 14px;
}

.wiki-metadata span {
    margin-right: 20px;
    display: flex;
    align-items: center;
}

.wiki-metadata i {
    margin-right: 5px;
}

.markdown-content {
    color: var(--text-content);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.markdown-content h2 {
    font-size: var(--fs-h2);
    font-weight: 600;
    margin-top: 40px;
    margin-bottom: 20px;
    color: var(--text-subtitle);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-content);
}

.markdown-content h3 {
    font-size: var(--fs-h3);
    font-weight: 600;
    margin-top: 30px;
    margin-bottom: 15px;
    color: var(--text-subtitle);
}

.markdown-content p {
    margin-bottom: 1.2em;
    line-height: 1.7;
}

.markdown-content a {
    color: var(--link-color);
    text-decoration: none;
}

.markdown-content a:hover {
    text-decoration: underline;
}

.markdown-content img {
    max-width: 100%;
    border-radius: var(--radius-img);
    margin: 20px 0;
}

.markdown-content pre {
    background-color: var(--bg-code);
    padding: 20px;
    border-radius: var(--radius-code);
    overflow-x: auto;
    margin: 20px 0;
}

.markdown-content code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    color: var(--text-code);
    font-size: 13px;
    padding: 2px 6px;
    background-color: var(--bg-code);
    border-radius: 4px;
}

.markdown-content ul,
.markdown-content ol {
    margin-left: 20px;
    margin-bottom: 20px;
}

.markdown-content li {
    margin-bottom: 0.6em;
    line-height: 1.7;
}

.markdown-content blockquote {
    border-left: 3px solid var(--primary-color);
    padding-left: 20px;
    margin: 20px 0;
    color: var(--text-quote);
}

.markdown-content video {
    max-width: 100%;
    border-radius: var(--radius-img);
    margin: 20px 0;
}

.wiki-footer {
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid var(--border-content);
    display: flex;
    justify-content: space-between;
}

.wiki-footer-nav a {
    color: var(--link-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.wiki-footer-nav a:hover {
    text-decoration: underline;
}

.wiki-prev a {
    padding-left: 5px;
}

.wiki-next a {
    padding-right: 5px;
    justify-content: flex-end;
}

/* 加载和错误状态 */
.tutorial-loading,
.tutorial-error {
    text-align: center;
    padding: 50px 0;
    color: var(--text-light);
}

.tutorial-loading i,
.tutorial-error i {
    font-size: 40px;
    margin-bottom: 15px;
    display: block;
}

.tutorial-error i {
    color: var(--danger-color);
}

#retry-button {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: var(--radius-btn);
    font-size: 14px;
    cursor: pointer;
    margin-top: 15px;
    transition: var(--transition-normal);
}

#retry-button:hover {
    background-color: var(--primary-hover);
}

/* 响应式调整 */
@media (max-width: 992px) {
    .wiki-container {
        flex-direction: column;
    }

    .wiki-sidebar {
        width: 100%;
        height: auto;
        position: relative;
        border-right: none;
        border-bottom: 1px solid var(--border-sidebar);
        max-height: 50vh;
    }

    .wiki-main {
        max-width: 100%;
    }

    .wiki-content {
        padding: 30px 20px;
    }

    .wiki-search {
        width: 200px;
    }

    .tutorial-list {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

@media (max-width: 576px) {
    .wiki-header {
        padding: 0 15px;
    }

    .wiki-search {
        width: 150px;
    }

    .tutorial-list {
        grid-template-columns: 1fr;
    }

    .wiki-metadata {
        flex-wrap: wrap;
    }

    .wiki-footer {
        flex-direction: column;
        gap: 15px;
    }

    .wiki-footer-nav {
        width: 100%;
    }

    .wiki-next a {
        justify-content: flex-start;
    }
}

/* Light主题下的颜色修复 */
body.light-theme .wiki-content {
    background-color: #fff;
    color: #333;
}

body.light-theme .wiki-container {
    background-color: #ffffff;
}

body.light-theme .wiki-article {
    background-color: #fff;
    color: #333;
    box-shadow: none;
}

body.light-theme .wiki-sidebar {
    background-color: #fff;
    border-right: 1px solid #e5e7eb;
}

body.light-theme .wiki-nav-item a {
    color: #444;
}

body.light-theme .wiki-nav-item a:hover {
    background-color: var(--accent-tint);
}

body.light-theme .wiki-nav-item a.active {
    background-color: var(--accent-tint);
    color: var(--accent);
}

body.light-theme .wiki-header {
    background-color: #fff;
    border-bottom: 1px solid #e5e7eb;
}

body.light-theme .wiki-search input {
    background-color: #f5f5f5;
    color: #333;
    border: 1px solid #e0e0e0;
}

body.light-theme .wiki-search input:focus {
    border-color: var(--accent);
    background-color: #fff;
}

body.light-theme .wiki-date,
body.light-theme .wiki-views {
    color: #777;
}

body.light-theme .markdown-content {
    color: #333;
}

body.light-theme .markdown-content h1,
body.light-theme .markdown-content h2,
body.light-theme .markdown-content h3,
body.light-theme .markdown-content h4,
body.light-theme .markdown-content h5,
body.light-theme .markdown-content h6 {
    color: #222;
}

body.light-theme .markdown-content pre {
    background-color: #f5f5f5;
    border: 1px solid #e0e0e0;
}

body.light-theme .markdown-content code {
    background-color: #f0f0f0;
    color: #333;
}

body.light-theme .markdown-content blockquote {
    border-left: 4px solid #ddd;
    background-color: #f8f8f8;
    color: #555;
}

/* 自适应高度设置 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body.light-theme {
    background-color: #ffffff;
}

#app,
.wiki-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.wiki-container {
    flex: 1;
    overflow: hidden;
}

.wiki-sidebar,
.wiki-main {
    height: 100%;
    overflow-y: auto;
}

.wiki-content {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 50px;
}

/* 修复段落格式和回车换行显示 */
.ql-editor p,
#tutorial-content p {
    margin-bottom: 1.2em !important;
    margin-top: 0 !important;
    line-height: 1.75 !important;
    white-space: pre-wrap !important;
    font-size: var(--fs-body);
}

/* 段内换行就是普通换行，不附加额外间距（旧 0.6em 造成行距忽大忽小） */
.ql-editor br,
#tutorial-content br {
    margin-top: 0 !important;
}

/* 确保图片和表格正确显示 */
.ql-editor img,
#tutorial-content img {
    max-width: 100%;
    height: auto;
    margin: 1.5em 0;
    border-radius: var(--radius-sm, 8px);
}

/* 表格：列宽随文字自适应，不再强制 100% + display:block 拉伸 */
.ql-editor table,
#tutorial-content table {
    width: auto;
    max-width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    display: table;
    table-layout: auto;
}

.ql-editor table td,
.ql-editor table th,
#tutorial-content table td,
#tutorial-content table th {
    border: 1px solid var(--border-color);
    padding: 8px 12px;
}


.ql-editor blockquote,
#tutorial-content blockquote {
    border-left: 4px solid var(--primary-color);
    padding-left: 1em;
    margin-left: 0;
    margin-right: 0;
    font-style: italic;
    margin-bottom: 1.5em !important;
}

/* 代码块样式 */
.ql-editor pre,
#tutorial-content pre {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    padding: 1em;
    white-space: pre-wrap;
    margin-bottom: 1.2em !important;
    font-size: 14px;
    line-height: 1.6;
}

/* 标题样式 */
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6,
#tutorial-content h1,
#tutorial-content h2,
#tutorial-content h3,
#tutorial-content h4,
#tutorial-content h5,
#tutorial-content h6 {
    margin-top: 1.5em !important;
    margin-bottom: 0.8em !important;
    line-height: 1.4 !important;
}

[data-theme="dark"] .ql-editor pre,
[data-theme="dark"] #tutorial-content pre {
    background: rgba(255, 255, 255, 0.1);
}

/* 在大屏幕上让内容居中且有适当的宽度 */
@media (min-width: 1200px) {
    .wiki-article {
        max-width: 90%;
        margin: 0 auto;
    }

    .wiki-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

/* 在移动端隐藏侧边栏 */
@media (max-width: 996px) {
    .wiki-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        height: var(--header-height);
        position: sticky;
        top: 0;
        z-index: 50;
    }

    .wiki-search {
        width: 200px !important;
        margin-right: 15px;
    }

    .wiki-controls {
        display: flex;
        align-items: center;
    }

    .wiki-sidebar {
        display: none !important;
        /* 强制隐藏 */
        width: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
    }

    .wiki-main {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }

    .wiki-container {
        flex-direction: column !important;
    }

    .wiki-article {
        padding: 15px;
        width: 100%;
    }
}

/* 小屏幕设备上的进一步优化 */
@media (max-width: 480px) {
    .wiki-article {
        padding: 10px;
    }

}

/* 富文本内容区域 */
.ql-editor {
    padding: 0;
    overflow-x: hidden;
}

/* 图片基础样式 */
.wiki-article img,
.ql-editor img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm, 4px);
}

/* 文章内对齐样式 */
.ql-align-center,
.text-center {
    text-align: center !important;
    display: block !important;
}

.ql-align-right,
.text-right {
    text-align: right !important;
    display: block !important;
}

.ql-align-justify,
.text-justify {
    text-align: justify !important;
    display: block !important;
}

/* 图片居中显示 */
.ql-editor p.ql-align-center img,
.ql-editor .ql-align-center img,
figure.image.center img,
.img-center {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 块级引用样式 */
.wiki-article blockquote,
.ql-editor blockquote {
    border-left: 4px solid var(--primary-color-light, #b7c4fc);
    padding: 10px 15px;
    margin: 15px 0;
    background-color: var(--bg-blockquote, rgba(0, 0, 0, 0.03));
    color: var(--text-muted);
    border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
}

/* 文字格式 */
.text-bold,
strong,
b {
    font-weight: bold !important;
}

.text-italic,
em,
i {
    font-style: italic !important;
}

.text-underline,
u {
    text-decoration: underline !important;
}

/* Figure样式 */
figure.image {
    margin: 20px 0;
    display: block;
}

figure.image.center {
    text-align: center;
}

figure.image figcaption {
    text-align: center;
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: 0.9em;
}

/* 暗色模式调整 */
.dark-theme .wiki-article blockquote,
.dark-theme .ql-editor blockquote,
body[data-theme="dark"] .wiki-article blockquote,
body[data-theme="dark"] .ql-editor blockquote {
    border-left-color: var(--primary-color-dark, #5b73fc);
    background-color: var(--bg-blockquote-dark, rgba(255, 255, 255, 0.05));
}

/* 代码样式 */
.ql-editor pre,
.wiki-article pre {
    background-color: var(--bg-code, #f5f5f5);
    padding: 16px;
    border-radius: var(--radius-md, 8px);
    overflow-x: auto;
    color: var(--text-code, #333);
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 14px;
    line-height: 1.6;
    margin: 1.2em 0;
}

.dark-theme .ql-editor pre,
.dark-theme .wiki-article pre,
body[data-theme="dark"] .ql-editor pre,
body[data-theme="dark"] .wiki-article pre {
    background-color: var(--bg-code-dark, #2d2d2d);
    color: var(--text-code-dark, #f0f0f0);
}

/* 行内代码 */
.ql-editor code,
.wiki-article code {
    background-color: var(--bg-code-inline, rgba(0, 0, 0, 0.05));
    padding: 2px 6px;
    border-radius: var(--radius-sm, 4px);
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 13px;
    color: var(--text-code-inline, #d14);
}

.dark-theme .ql-editor code,
.dark-theme .wiki-article code,
body[data-theme="dark"] .ql-editor code,
body[data-theme="dark"] .wiki-article code {
    background-color: var(--bg-code-inline-dark, rgba(255, 255, 255, 0.1));
    color: var(--text-code-inline-dark, #e83e8c);
}


/* ================== 列表和计数器修复 (核心修复) ================== */

/* 1. 重置有序列表的默认样式，禁用浏览器默认计数 */
/* 说明：每个 <ol> 各自重置 ql-ol-counter（这是 <li> 唯一会响应的作用域）。
   当有序列表被图片/视频打断而拆成多个 <ol> 时，view.html 的 fixOrderedListNumbering()
   会在渲染后给"续接"的 <ol> 加内联 counter-reset 起始值，使编号接续而非从 1 重来。 */
.ql-editor ol,
.wiki-article ol {
    list-style-type: none !important;
    counter-reset: ql-ol-counter;
    /* 初始化自定义计数器 */
    padding-left: 0 !important;
    /* 移除默认 padding，由 li 的 padding 处理 */
}

/* 2. 确保无序列表也没有默认样式 (以防万一) */
.ql-editor ul,
.wiki-article ul {
    list-style-type: none !important;
    padding-left: 0 !important;
}

/* 3. 列表项基础样式（行高与正文 1.75 统一，项间距 0.5em） */
.ql-editor li,
.wiki-article li {
    position: relative;
    padding-left: 1.5em;
    /* 默认缩进，为符号留位置 */
    margin-bottom: 0.5em;
    line-height: var(--lh-body, 1.75);
}

/* 4. 有序列表项 (data-list="ordered") */
.ql-editor li[data-list="ordered"],
.wiki-article li[data-list="ordered"] {
    counter-increment: ql-ol-counter;
    /* 只有 ordered 项才增加计数 */
}

.ql-editor li[data-list="ordered"]::before,
.wiki-article li[data-list="ordered"]::before {
    content: counter(ql-ol-counter) ".";
    /* 显示计数 */
    position: absolute;
    left: 0;
    width: 1.5em;
    /* 固定宽度确保对齐 */
    text-align: right;
    /* 数字右对齐 */
    padding-right: 0.3em;
    font-variant-numeric: tabular-nums;
    /* 等宽数字 */
    color: var(--text-title);
}

/* 5. 无序列表项 (data-list="bullet") */
.ql-editor li[data-list="bullet"],
.wiki-article li[data-list="bullet"] {
    counter-increment: none;
    /* 显式不增加计数器 */
}

.ql-editor li[data-list="bullet"]::before,
.wiki-article li[data-list="bullet"]::before {
    content: "•";
    /* 显示圆点 */
    position: absolute;
    left: 0;
    width: 1.5em;
    text-align: right;
    padding-right: 0.3em;
    font-weight: bold;
}

/* 6. 兼容没有 data-list 属性的标准 HTML 结构 (ol > li) */
/* 如果是标准的嵌套结构，这里可能会有冲突，但在扁平化 Quill 结构中是必要的兜底 */
.ql-editor ol>li:not([data-list]),
.wiki-article ol>li:not([data-list]) {
    counter-increment: ql-ol-counter;
}

.ql-editor ol>li:not([data-list])::before,
.wiki-article ol>li:not([data-list])::before {
    content: counter(ql-ol-counter) ".";
    position: absolute;
    left: 0;
    width: 1.5em;
    text-align: right;
    padding-right: 0.3em;
}

.ql-editor ul>li:not([data-list])::before,
.wiki-article ul>li:not([data-list])::before {
    content: "•";
    position: absolute;
    left: 0;
    width: 1.5em;
    text-align: right;
    padding-right: 0.3em;
    font-weight: bold;
}

/* 7. 处理 Quill 的缩进类 (ql-indent-1 到 ql-indent-8) */
/* 缩进是通过 padding-left 实现的，伪元素绝对定位 left:0 会自动跟随 padding box 的左侧 */
/* 需要调整伪元素的定位，使其出现在 padding 区域的右侧（紧贴文本） */

/* 重新定义缩进，确保伪元素位置正确 */
.ql-editor .ql-indent-1:not(.ql-direction-rtl),
.wiki-article .ql-indent-1:not(.ql-direction-rtl) {
    padding-left: 3em;
}

.ql-editor .ql-indent-2:not(.ql-direction-rtl),
.wiki-article .ql-indent-2:not(.ql-direction-rtl) {
    padding-left: 4.5em;
}

.ql-editor .ql-indent-3:not(.ql-direction-rtl),
.wiki-article .ql-indent-3:not(.ql-direction-rtl) {
    padding-left: 6em;
}

/* ...更多缩进等级可以按需添加，每级增加 1.5em */

/* 针对缩进后的伪元素位置调整：
   对于 absolute left:0，它位于 padding box 左边缘。
   我们需要它位于 content box 左边缘的左侧。
   所以 left 应该是 auto (默认)，然后使用 margin-left 或 transform。
   或者，我们可以利用 text-indent?
   
   Quill 的官方实现方式是：
   li::before { margin-left: -1.5em; margin-right: 0.3em; text-align: right; display: inline-block; width: 1.2em; }
   这种方式让伪元素成为流的一部分，处于 content box 内，然后负 margin 拉出去。
*/

/* 覆盖上面的 absolute 定位，改用 inline-block + 负 margin (Quill 原生方式) */
.ql-editor li::before,
.wiki-article li::before {
    position: static !important;
    /* 取消绝对定位 */
    display: inline-block !important;
    width: 1.5em !important;
    margin-left: -1.5em !important;
    /* 向左拉回 padding 区域 */
    margin-right: 0 !important;
    text-align: right !important;
    padding-right: 0.3em !important;
}

/* 8. 修复嵌套列表的符号样式 (如果是 bullet) */
/* 实心圆 -> 空心圆 -> 方块 */
.ql-editor li.ql-indent-1[data-list="bullet"]::before,
.wiki-article li.ql-indent-1[data-list="bullet"]::before {
    content: "◦" !important;
    /* 空心圆 */
    font-weight: bold;
}

.ql-editor li.ql-indent-2[data-list="bullet"]::before,
.wiki-article li.ql-indent-2[data-list="bullet"]::before {
    content: "▪" !important;
    /* 方块 */
}

/* 9. 待办事项列表样式修复 (data-list="checked" / "unchecked") */
.ql-editor li[data-list="checked"],
.wiki-article li[data-list="checked"],
.ql-editor li[data-list="unchecked"],
.wiki-article li[data-list="unchecked"] {
    list-style-type: none !important;
}

.ql-editor li[data-list="checked"]::before,
.wiki-article li[data-list="checked"]::before {
    content: "\2611" !important;
    /* 带框对勾 */
    font-size: 1.1em;
}

.ql-editor li[data-list="unchecked"]::before,
.wiki-article li[data-list="unchecked"]::before {
    content: "\2610" !important;
    /* 空框 */
    font-size: 1.1em;
}


/* 表格样式：列宽随文字自适应 */
.wiki-article table,
.ql-editor table {
    width: auto;
    max-width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    display: table;
    table-layout: auto;
}

.wiki-article table th,
.wiki-article table td,
.ql-editor table th,
.ql-editor table td {
    border: 1px solid var(--border-color, #e0e0e0);
    padding: 8px 12px;
    text-align: left;
}

.wiki-article table th,
.ql-editor table th {
    background-color: var(--bg-table-header, rgba(0, 0, 0, 0.03));
    font-weight: bold;
}

.dark-theme .wiki-article table th,
.dark-theme .ql-editor table th,
body[data-theme="dark"] .wiki-article table th,
body[data-theme="dark"] .ql-editor table th {
    background-color: var(--bg-table-header-dark, rgba(255, 255, 255, 0.05));
}

.dark-theme .wiki-article table td,
.dark-theme .wiki-article table th,
.dark-theme .ql-editor table td,
.dark-theme .ql-editor table th,
body[data-theme="dark"] .wiki-article table td,
body[data-theme="dark"] .wiki-article table th,
body[data-theme="dark"] .ql-editor table td,
body[data-theme="dark"] .ql-editor table th {
    border-color: var(--border-color-dark, #444);
}

/* 增强图片居中和文本对齐支持 */
/* 支持图片居中显示的多种类名组合 */
.wiki-article img.center,
.wiki-article .center img,
.wiki-article img[style*="margin-left: auto"][style*="margin-right: auto"],
.wiki-article p[style*="text-align: center"] img,
.wiki-article div[style*="text-align: center"] img,
.wiki-article center img,
.wiki-content img.center,
.wiki-content .center img,
.wiki-content img[style*="margin-left: auto"][style*="margin-right: auto"],
.wiki-content p[style*="text-align: center"] img,
.wiki-content div[style*="text-align: center"] img,
.wiki-content center img,
.ql-editor img.center,
.ql-editor .center img,
.ql-editor img[style*="margin-left: auto"][style*="margin-right: auto"],
.ql-editor p[style*="text-align: center"] img,
.ql-editor div[style*="text-align: center"] img,
.ql-editor center img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

/* 支持通过style属性的文本对齐 */
.wiki-article [style*="text-align: center"],
.wiki-content [style*="text-align: center"],
.ql-editor [style*="text-align: center"],
.wiki-article [align="center"],
.wiki-content [align="center"],
.ql-editor [align="center"],
.wiki-article .text-center,
.wiki-content .text-center,
.ql-editor .text-center,
.wiki-article center,
.wiki-content center,
.ql-editor center {
    text-align: center !important;
    display: block !important;
}

.wiki-article [style*="text-align: right"],
.wiki-content [style*="text-align: right"],
.ql-editor [style*="text-align: right"],
.wiki-article [align="right"],
.wiki-content [align="right"],
.ql-editor [align="right"],
.wiki-article .text-right,
.wiki-content .text-right,
.ql-editor .text-right {
    text-align: right !important;
    display: block !important;
}

.wiki-article [style*="text-align: left"],
.wiki-content [style*="text-align: left"],
.ql-editor [style*="text-align: left"],
.wiki-article [align="left"],
.wiki-content [align="left"],
.ql-editor [align="left"],
.wiki-article .text-left,
.wiki-content .text-left,
.ql-editor .text-left {
    text-align: left !important;
    display: block !important;
}

/* 支持HTML5和传统标签的居中显示 */
.wiki-article figure,
.wiki-content figure,
.ql-editor figure,
.wiki-article .image,
.wiki-content .image,
.ql-editor .image {
    max-width: 100% !important;
    margin-bottom: 1.5em !important;
}

.wiki-article figure.center,
.wiki-content figure.center,
.ql-editor figure.center,
.wiki-article .image.center,
.wiki-content .image.center,
.ql-editor .image.center,
.wiki-article figure[style*="text-align: center"],
.wiki-content figure[style*="text-align: center"],
.ql-editor figure[style*="text-align: center"] {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block !important;
}

.wiki-article figcaption,
.wiki-content figcaption,
.ql-editor figcaption {
    font-size: 0.9em !important;
    color: var(--text-light) !important;
    margin-top: 0.5em !important;
    text-align: center !important;
}

/* 处理HTML4/5混合文档中的对齐情况 */
.wiki-article div.center,
.wiki-content div.center,
.ql-editor div.center,
.wiki-article p.center,
.wiki-content p.center,
.ql-editor p.center,
.wiki-article div[align="center"],
.wiki-content div[align="center"],
.ql-editor div[align="center"],
.wiki-article p[align="center"],
.wiki-content p[align="center"],
.ql-editor p[align="center"] {
    text-align: center !important;
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 确保QuillJS编辑器生成的对齐类能够正确显示 */
.ql-align-center,
p.ql-align-center,
.ql-editor .ql-align-center {
    text-align: center !important;
    display: block !important;
}

.ql-align-right,
p.ql-align-right,
.ql-editor .ql-align-right {
    text-align: right !important;
    display: block !important;
}

.ql-align-justify,
p.ql-align-justify,
.ql-editor .ql-align-justify {
    text-align: justify !important;
    display: block !important;
}

/* 保证图像在各种环境下正常显示 */
.ql-editor img,
.wiki-article img,
.wiki-content img {
    max-width: 100% !important;
    height: auto !important;
    vertical-align: middle !important;
}

/* 明确处理行内元素的居中 */
span.center,
span.text-center,
span[style*="text-align:center"],
span[align="center"] {
    display: inline-block !important;
    width: 100% !important;
    text-align: center !important;
}

/* 处理内联框架和视频 */
.ql-editor iframe,
.wiki-article iframe,
.wiki-content iframe,
.ql-editor video,
.wiki-article video,
.wiki-content video {
    max-width: 100% !important;
    display: block !important;
    margin: 1.5em auto !important;
}

.ql-editor iframe.center,
.wiki-article iframe.center,
.wiki-content iframe.center,
.ql-editor video.center,
.wiki-article video.center,
.wiki-content video.center,
.ql-editor .center iframe,
.wiki-article .center iframe,
.wiki-content .center iframe,
.ql-editor .center video,
.wiki-article .center video,
.wiki-content .center video {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 兼容旧版HTML的居中标签 */
center {
    display: block !important;
    text-align: center !important;
}

center * {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 确保所有图标不倾斜 */
i.fas,
i.far,
i.fab,
i.fa,
.fas,
.far,
.fab,
.fa,
[class^="fa-"],
[class*=" fa-"],
.wiki-search i,
.wiki-controls i,
.wiki-metadata i,
.wiki-footer-nav i,
.wiki-nav-item i,
.category-toggle i,
button i,
a i {
    transform: none !important;
    font-style: normal !important;
}

/* 修复各种特定位置的图标样式 */
.wiki-search i {
    transform: translateY(-50%) !important;
    /* 保留垂直居中但不倾斜 */
}

.wiki-nav-item.expanded .category-toggle i {
    transform: rotate(90deg) !important;
    /* 只保留旋转效果，不倾斜 */
}

.wiki-metadata span i {
    margin-right: 5px !important;
    transform: none !important;
    vertical-align: middle !important;
}

/* 修复边栏图标样式 */
.wiki-sidebar i {
    transform: none !important;
    display: inline-block !important;
    vertical-align: middle !important;
    margin-right: 8px !important;
}

/* 修复加载指示器图标的旋转动画 */
.loading-indicator i.fa-spinner,
.loading-indicator i.fa-pulse,
i.fa-spinner,
i.fa-pulse {
    animation: fa-spin 2s infinite linear !important;
    transform-origin: center center !important;
}

@keyframes fa-spin {
    0% {
        transform: rotate(0deg) !important;
    }

    100% {
        transform: rotate(360deg) !important;
    }
}

/* ================== 侧栏导航菜单（pill 风格：accent 文字 + 淡底，无左竖条、无位移） ================== */
.wiki-nav-list {
    list-style: none;
    padding: 2px 8px;
    margin: 0;
}

.wiki-nav-list li {
    margin: 0;
}

.wiki-nav-list li a {
    display: block;
    padding: 7px 12px;
    margin: 1px 0;
    color: var(--text-nav);
    text-decoration: none;
    font-size: 13px;
    border-radius: var(--radius-sm);
    transition: background-color 0.2s ease, color 0.2s ease;
}

.wiki-nav-list li a:hover {
    background-color: var(--bg-nav-hover);
    color: var(--accent);
}

.wiki-nav-list li a.active,
.category-articles li.active > a {
    background-color: var(--accent-tint);
    color: var(--accent);
    font-weight: 600;
}

.wiki-nav-list ul {
    list-style: none;
    padding-left: 0;
    margin-top: 5px;
    margin-bottom: 5px;
}

/* 展开的文章列表不缩进，与分类行左侧对齐（层次由分类图标/字号区分） */
.wiki-nav-list ul li a {
    padding-left: 12px;
    font-size: 13px;
}

/* ================== 侧栏分类行：彩色图标 + 文章数（原首页入口卡信息上移） ================== */
.nav-cat-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: left;
    /*margin-right: 2px;*/
    border-radius: 6px;
    color: hsl(var(--cat-h, 215) 60% 42%);
    /* background: hsl(var(--cat-h, 215) 85% 94%);*/
}

.dark-theme .nav-cat-icon {
    color: hsl(var(--cat-h, 215) 80% 72%);
    background: hsl(var(--cat-h, 215) 45% 17%);
}

.nav-cat-icon-all {
    color: var(--accent);
    background: var(--accent-tint);
}

/* 中和通用 .category-toggle i 的间距/防倾斜规则对图标内 <i> 的影响 */
.wiki-nav-item .category-toggle .nav-cat-icon i,
.wiki-nav-list a .nav-cat-icon i {
    margin-right: 0 !important;
    width: auto !important;
    font-size: 11px !important;
    color: inherit !important;
    transform: none !important;
}

.nav-cat-count {
    font-size: 11px;
    color: var(--text-light);
    margin: 0 6px 0 8px;
    font-variant-numeric: tabular-nums;
}

.wiki-nav-item .category-toggle i.nav-caret {
    margin-right: 0;
    width: auto;
}

.category-toggle .category-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 含图标的纯链接行（全部教程 / 无子教程分类）按行内弹性排布 */
.wiki-nav-list > li > a {
    display: flex;
    align-items: center;
}