/* 帮助中心列表页（index.html）专属样式
 * 从 index.html 内嵌 <style> 迁出，加载顺序须保持在所有公共样式之后 */

/* 确保内容区域铺满屏幕 */
.wiki-main {
    flex: 1;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    overflow-x: hidden;
}

.wiki-content {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden;
    padding: 20px;
}

/* 教程列表铺满（密度收紧：与精选大卡形成对比） */
.tutorial-list {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
}

/* 分类教程列表样式（不缩进，与分类行对齐） */
.category-articles {
    padding-left: 0;
    display: none;
    margin-top: 5px;
}

.category-articles.expanded {
    display: block;
}

.category-articles li {
    margin: 5px 0;
    list-style: none;
}

.wiki-nav-item .category-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--text-nav);
    transition: background-color 0.2s ease, color 0.2s ease;
}

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

.wiki-nav-item .category-toggle i {
    margin-right: 8px;
    transition: transform 0.3s ease;
    width: 10px;
    font-size: 12px;
    color: var(--text-light);
}

/* 整行点击展开；分类名占据剩余空间，把图标按钮挤到最右 */
.wiki-nav-item .category-toggle .category-name {
    flex: 1;
}

/* 名称右侧：打开分类页的图标按钮 */
.wiki-nav-item .category-toggle .category-page-link {
    display: inline-flex;
    align-items: center;
    color: inherit;
    opacity: 0.5;
    padding: 2px 4px;
    border-radius: 4px;
    border-left: 0;
    /* 抵消基础 .wiki-nav-list li a 的左指示条，避免 hover 时图标左侧露出竖条 */
    text-decoration: none;
    transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.wiki-nav-item .category-toggle .category-page-link:hover {
    opacity: 1;
    color: var(--accent);
    background: var(--accent-tint-strong);
}

/* 分类页面包屑 */
.category-breadcrumb {
    display: flex;
    align-items: center;
    gap: 2px;
    width: 100%;
    margin-bottom: 8px;
    font-size: 14px;
    color: var(--text-light);
}

.category-breadcrumb a {
    color: var(--text-light);
    text-decoration: none;
    padding: 3px 8px;
    border-radius: 6px;
    line-height: 1.6;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.category-breadcrumb a:hover {
    color: var(--primary-color);
    background-color: var(--accent-tint);
}

.category-breadcrumb a.current {
    color: var(--text-title);
    font-weight: 600;
}

.category-breadcrumb a.current:hover {
    color: var(--primary-color);
}

.category-breadcrumb .sep {
    color: var(--text-light);
    opacity: 0.5;
    user-select: none;
}

.wiki-nav-item.expanded .category-toggle i {
    transform: rotate(90deg);
}

.wiki-nav-item.active>a,
.category-articles li.active>a {
    color: var(--accent);
    font-weight: bold;
}

/* 确保顶部搜索框和主题切换按钮在一行 - 强化样式 */
.wiki-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    min-height: 60px !important;
    width: 100% !important;
    padding: 0 15px;
    border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
}

/* 顶栏品牌区：桌面端侧栏已有 logo，仅在侧栏隐藏的窄屏显示 */
.wiki-header-brand {
    display: none;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.wiki-header-brand img {
    height: 28px;
}

.wiki-header-brand span {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-title);
}

@media (max-width: 996px) {
    .wiki-header-brand {
        display: flex;
    }
}

.wiki-controls {
    flex: 0 0 auto !important;
    /* 固定大小 */
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    min-width: 40px !important;
    /* 桌面端 brand 隐藏后保证按钮始终靠右 */
    margin-left: auto !important;
}

/* 移动端适配 */
@media (max-width: 768px) {
    /* 重新设置小屏幕上的头部，确保在一行显示 */
    .wiki-header {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: auto !important;
        min-height: 50px !important;
        padding: 10px 15px !important;
    }
}

@media (max-width: 576px) {
    .wiki-header {
        padding: 8px 12px !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    .wiki-controls {
        flex: 0 0 auto !important;
    }

    .theme-toggle-btn {
        width: 36px !important;
        height: 36px !important;
    }
}

@media (max-width: 480px) {
    .theme-toggle-btn {
        width: 32px !important;
        height: 32px !important;
    }
}

/* ================== Hero 搜索区 ================== */
.tutorial-hero {
    width: 100%;
    position: relative;
    text-align: center;
    padding: var(--space-6) 0 var(--space-5);
    margin-bottom: var(--space-5);
}

/* 氛围装饰：品牌渐变的克制径向光晕，双主题分别定调 */
.tutorial-hero::before {
    content: '';
    position: absolute;
    inset: -20px -20px 0;
    background: radial-gradient(ellipse 70% 90% at 50% 0%, rgba(0, 149, 255, 0.07), transparent 70%);
    pointer-events: none;
}

.dark-theme .tutorial-hero::before {
    background:
        radial-gradient(ellipse 70% 90% at 50% 0%, rgba(0, 149, 255, 0.12), transparent 70%),
        radial-gradient(ellipse 30% 40% at 50% 0%, rgba(0, 212, 255, 0.06), transparent 70%);
}

.tutorial-hero h1 {
    margin-bottom: var(--space-3);
}

.tutorial-hero .category-breadcrumb {
    justify-content: center;
}

.hero-subtitle {
    color: var(--text-light);
    font-size: 15px;
    margin-bottom: var(--space-5);
}

.hero-search {
    position: relative;
    max-width: 560px;
    margin: 0 auto;
}

.hero-search i {
    position: absolute;
    left: 18px;
    top: 50%;
    /* 主样式有全局 i.fas { transform: none !important } 防倾斜规则，
       会吃掉垂直居中位移，此处须同样加 !important（同 .wiki-search i 的既有修复） */
    transform: translateY(-50%) !important;
    color: var(--text-light);
    font-size: 16px;
}

.hero-search input {
    width: 100%;
    height: 52px;
    padding: 0 20px 0 46px;
    font-size: 15px;
    color: var(--text-input);
    background: var(--bg-card);
    border: 1px solid var(--border-input);
    border-radius: var(--radius-md);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.hero-search input::placeholder {
    color: var(--text-light);
}

.hero-search input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-tint);
}

.dark-theme .hero-search input {
    background: var(--bg-input);
}

/* 分类快捷入口 chips（淡底深字 tinted pill） */
.hero-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.hero-chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 14px;
    font-size: 13px;
    color: var(--accent);
    background: var(--accent-tint);
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.hero-chip:hover {
    background: var(--accent-tint-strong);
    border-color: var(--accent);
}

.hero-chip.active {
    background: var(--accent);
    color: #ffffff;
}

@media (max-width: 768px) {
    .tutorial-hero {
        padding: var(--space-5) 0 var(--space-4);
    }

    .hero-search input {
        height: 46px;
    }
}

/* ================== 精选/热门区（默认视图前 3 条大卡） ================== */
.featured-section {
    /* .wiki-content 大屏是 align-items:center 的 flex，需显式撑满 */
    width: 100%;
    margin-bottom: var(--space-6);
}

.section-label {
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-light);
    margin-bottom: var(--space-3);
}

.featured-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
}

.featured-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
    background: var(--bg-card);
    border: 1px solid var(--border-content);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

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

/* 编号水印：克制的编辑感层次 */
.featured-rank {
    position: absolute;
    top: 14px;
    right: 18px;
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    color: var(--border-content);
    font-variant-numeric: tabular-nums;
    user-select: none;
}

.featured-card-title {
    font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-title);
    margin: 0 44px var(--space-2) 0;
}

.featured-card-summary {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-content);
    margin-bottom: var(--space-4);
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.featured-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 阅读量徽标：热度语义用暖色 */
.featured-views {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    font-size: 12px;
    border-radius: var(--radius-full);
    color: #ea580c;
    background: rgba(234, 88, 12, 0.1);
}

.dark-theme .featured-views {
    color: #fb923c;
    background: rgba(251, 146, 60, 0.12);
}

/* 分页样式 */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    gap: 10px;
}

.pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-card, #fff);
    padding: 8px 16px;
    border-radius: var(--radius-md, 12px);
    border: 1px solid var(--border-content, #e5e7eb);
}

.pagination button {
    background: var(--bg-button, #f0f2f5);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-primary, #333);
}

.pagination button:hover:not(:disabled) {
    background: var(--accent);
    color: white;
}

.pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination .page-info {
    font-size: 14px;
    color: var(--text-secondary, #666);
    margin: 0 12px;
}

.pagination .page-numbers {
    display: flex;
    gap: 4px;
}

.pagination .page-number {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-primary, #333);
}

.pagination .page-number:hover {
    background: var(--bg-button, #f0f2f5);
}

.pagination .page-number.active {
    background: var(--accent);
    color: white;
}

.pagination .page-ellipsis {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #666);
}

/* 暗黑模式分页样式 */
.dark-theme .pagination {
    background: var(--bg-sidebar, #131316);
}

.dark-theme .pagination button {
    background: var(--bg-input, #2a2a2a);
    color: var(--text-content, #c0c0c0);
}

.dark-theme .pagination button:hover:not(:disabled) {
    background: var(--primary-color, #738aec);
    color: white;
}

.dark-theme .pagination .page-number {
    color: var(--text-content, #c0c0c0);
}

.dark-theme .pagination .page-number:hover {
    background: var(--bg-input, #2a2a2a);
}

.dark-theme .pagination .page-number.active {
    background: var(--primary-color, #738aec);
    color: white;
}

.dark-theme .pagination .page-ellipsis {
    color: var(--text-nav, #a0a0a0);
}

@media (max-width: 768px) {
    .pagination {
        padding: 6px 12px;
    }

    .pagination button,
    .pagination .page-number {
        width: 32px;
        height: 32px;
    }

    .pagination .page-info {
        margin: 0 8px;
    }
}

/* 侧栏骨架屏（导航数据加载前的占位） */
.nav-skeleton {
    list-style: none;
    padding: 8px 4px;
}

.skeleton-bar {
    display: block;
    height: 16px;
    border-radius: 4px;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(255, 255, 255, 0.12) 50%,
            rgba(255, 255, 255, 0.04) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

.light-theme .skeleton-bar {
    background: linear-gradient(90deg,
            rgba(0, 0, 0, 0.05) 0%,
            rgba(0, 0, 0, 0.10) 50%,
            rgba(0, 0, 0, 0.05) 100%);
    background-size: 200% 100%;
}

.skeleton-bar.w-80 {
    width: 80%;
}

.skeleton-bar.w-60 {
    width: 60%;
}

.skeleton-bar.w-70 {
    width: 70%;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}