/* ============================================================
   base.css — 二级页样式
   包含：
     1. Header（渐变紫）
     2. 三栏布局（左目录 / 中文章 / 右文章内导航）
     3. 文章内容元素（标题、列表、图片、色卡、禁止示例）
     4. 模版下载页（左侧文字导航 + 右侧网格 + 分页）
     5. 模版下载详情页
     6. Lightbox 图片放大
   ============================================================ */

/* ============================================================
   1. Header
   ============================================================ */
.page-header {
    position: sticky;
    top: 0;
    z-index: 90;
    background: linear-gradient(120deg, #4a0d64 0%, #671482 45%, #8a1ea8 100%);
    box-shadow: 0 .04rem .2rem rgba(74, 13, 100, .25);
}
.page-header::before,
.page-header::after { display: none; }
.page-header-in { padding: .18rem 0; }
.page-logo { display: flex; align-items: center; }
.page-logo img { height: .5rem; }

.page-nav ul li { margin-left: .36rem; }
.page-nav a {
    position: relative;
    display: block;
    padding: .12rem 0;
    font-size: .16rem;
    color: rgba(255, 255, 255, .82);
    transition: color .3s;
}
.page-nav a::after {
    content: '';
    position: absolute;
    left: 50%; bottom: 0;
    width: 0; height: .03rem;
    border-radius: .02rem;
    background: #fff;
    transform: translateX(-50%);
    transition: width .3s;
}
.page-nav a:hover,
.page-nav a.on { color: #fff; }
.page-nav a:hover::after,
.page-nav a.on::after { width: 100%; }

/* ============================================================
   2. 三栏布局
   ============================================================ */
.doc-wrap {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .5rem 0 .8rem;
}

/* ---------- 左侧目录 ---------- */
.doc-sidebar {
    width: 1.8rem;
    flex-shrink: 0;
    position: sticky;
    top: .9rem;
    align-self: flex-start;
}
.doc-sidebar-in { padding: .1rem 0; }
.doc-sidebar-tit {
    font-size: .18rem;
    color: #303133;
    font-weight: 700;
    margin-bottom: .16rem;
    padding: 0 .16rem .12rem;
    border-bottom: 1px solid #ebeef5;
    letter-spacing: .04rem;
}
.doc-menu > li { margin-bottom: .04rem; }
.doc-menu > li > a {
    display: block;
    padding: .12rem .16rem;
    font-size: .15rem;
    color: #606266;
    border-left: .03rem solid transparent;
    transition: all .25s;
}
.doc-menu > li > a:hover {
    color: var(--primary-color);
    background: #faf7fc;
}
.doc-menu > li.current > a {
    color: var(--primary-color);
    border-left-color: var(--primary-color);
    background: #faf7fc;
    font-weight: 600;
}

/* ---------- 中间文章 ---------- */
.doc-main { flex: 1; min-width: 0; }

.doc-hd {
    margin-bottom: .4rem;
    padding-bottom: .3rem;
    border-bottom: 1px solid #ebeef5;
}
.doc-tit {
    font-size: .38rem;
    color: #303133;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .04rem;
}
.doc-lead {
    margin-top: .2rem;
    font-size: .16rem;
    color: #606266;
    line-height: 1.9;
    text-align: justify;
}

.doc-sec {
    margin-bottom: .5rem;
    scroll-margin-top: 1rem;
}
.doc-sec-subtit {
    position: relative;
    font-size: .2rem;
    color: #303133;
    font-weight: 700;
    margin: .2rem 0 .16rem;
    padding-left: .18rem;
}
.doc-sec-subtit::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: .06rem; height: .16rem;
    background: linear-gradient(to bottom, var(--primary-color), #a83ec7);
    border-radius: .03rem;
    transform: translateY(-50%);
}
.doc-sec-bd {
    font-size: .16rem;
    color: #606266;
    line-height: 1.9;
}

/* ---------- 右侧文章内导航 ---------- */
.doc-toc {
    width: 2.4rem;
    flex-shrink: 0;
    position: sticky;
    top: .9rem;
    align-self: flex-start;
}
.doc-toc-in {
    padding: .16rem 0;
    border-left: 1px solid #ebeef5;
    max-height: calc(100vh - 1.4rem);
    overflow-y: auto;
}
.doc-toc-in::-webkit-scrollbar { width: 3px; }
.doc-toc-in::-webkit-scrollbar-thumb {
    background: rgba(103, 20, 130, .2);
    border-radius: 2px;
}
.doc-toc-tit {
    font-size: .15rem;
    color: #303133;
    margin-bottom: .12rem;
    padding-left: .16rem;
    font-weight: 700;
    letter-spacing: .04rem;
}
.doc-toc-list li { margin-bottom: .02rem; }
.doc-toc-list a {
    display: block;
    padding: .08rem .16rem;
    font-size: .14rem;
    color: #909399;
    border-left: .03rem solid transparent;
    margin-left: -1px;
    line-height: 1.5;
    transition: all .25s;
}
.doc-toc-list a:hover { color: var(--primary-color); }
.doc-toc-list a.on {
    color: var(--primary-color);
    border-left-color: var(--primary-color);
    font-weight: 600;
}

/* ---------- 移动端抽屉按钮 ---------- */
.doc-drawer-btn {
    display: none;
    position: fixed;
    z-index: 95;
    height: .4rem;
    padding: 0 .18rem;
    border: none;
    border-radius: 2rem;
    background: #fff;
    color: var(--primary-color);
    font-size: .14rem;
    cursor: pointer;
    box-shadow: 0 .06rem .16rem rgba(103, 20, 130, .25);
}
.doc-drawer-btn { left: .2rem; bottom: 1rem; }
.doc-drawer-btn-toc { left: auto; right: .2rem; bottom: 1rem; }

/* ============================================================
   3. 文章内容元素
   ============================================================ */

/* 列表 */
.doc-list { margin: .16rem 0; padding-left: .2rem; }
.doc-list li {
    position: relative;
    padding-left: .16rem;
    line-height: 2;
}
.doc-list li::before {
    content: '';
    position: absolute;
    left: 0; top: .14rem;
    width: .06rem; height: .06rem;
    background: var(--primary-color);
    border-radius: 50%;
    opacity: .6;
}

/* 禁止示例 */
.doc-ban {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .2rem;
    margin-top: .16rem;
}
.ban-item {
    text-align: center;
    position: relative;
    padding: .2rem .1rem .12rem;
    background: #faf7fc;
    border-radius: .08rem;
}
.ban-item img {
    height: .8rem;
    object-fit: contain;
    margin: 0 auto .1rem;
}
.ban-item i {
    position: absolute;
    right: .08rem; top: .08rem;
    width: .24rem; height: .24rem;
    line-height: .24rem;
    text-align: center;
    border-radius: 50%;
    background: #e6432d;
    color: #fff;
    font-size: .14rem;
    font-weight: 700;
}
.ban-item p { font-size: .13rem; color: #909399; }

/* 标准色卡 */
.doc-color-card {
    display: flex;
    margin: .2rem 0 .24rem;
    border-radius: .08rem;
    overflow: hidden;
    box-shadow: 0 .06rem .24rem rgba(103, 20, 130, .12);
}
.doc-color-main {
    flex: 1;
    min-height: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: .3rem;
    color: #fff;
}
.doc-color-main span { font-size: .3rem; letter-spacing: .16rem; }
.doc-color-main em {
    margin-top: .06rem;
    font-size: .13rem;
    letter-spacing: .12rem;
    opacity: .8;
    font-style: normal;
}
.doc-color-info {
    width: 3rem;
    background: #fff;
    padding: .24rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .1rem;
}
.doc-color-info li {
    display: flex;
    justify-content: space-between;
    font-size: .14rem;
    padding: .08rem 0;
    border-bottom: 1px dashed #ebeef5;
}
.doc-color-info li:last-child { border-bottom: none; }
.doc-color-info em { color: #909399; font-style: normal; }
.doc-color-info strong { color: #303133; font-weight: 500; }

.doc-color-aux {
    display: flex;
    gap: .16rem;
    margin: .16rem 0;
}
.doc-color-aux li {
    flex: 1;
    padding: .2rem;
    border-radius: .08rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: .06rem;
}
.doc-color-aux strong { font-size: .16rem; letter-spacing: .04rem; }
.doc-color-aux em { font-size: .13rem; opacity: .85; font-style: normal; }

/* 文档图片 */
.doc-figure {
    margin: .24rem 0;
    text-align: center;
}
.doc-figure-img {
    display: inline-block;
    padding: .3rem;
    background: #faf7fc;
    border-radius: .08rem;
    border: 1px solid #f0ebf5;
    cursor: zoom-in;
    transition: all .3s;
    max-width: 100%;
}
.doc-figure-img:hover {
    border-color: rgba(103, 20, 130, .35);
    box-shadow: 0 .08rem .24rem rgba(103, 20, 130, .12);
}
.doc-figure-img img {
    max-width: 100%;
    display: block;
}
.doc-figure-cap {
    margin-top: .12rem;
    font-size: .13rem;
    color: #909399;
}

/* ============================================================
   4. 模版下载页（download.html）
   ============================================================ */
.dl-content { flex: 1; min-width: 0; }
.dl-content-hd {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: .24rem;
    padding-bottom: .16rem;
    border-bottom: 1px solid #ebeef5;
}
.dl-content-tit {
    font-size: .24rem;
    color: #303133;
    font-weight: 700;
    letter-spacing: .04rem;
}
.dl-content-count {
    font-size: .13rem;
    color: #909399;
}

/* 网格：4 列 */
.dl-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .24rem;
}
.dl-grid-item a {
    display: block;
    background: #fff;
    border: 1px solid #ebeef5;
    border-radius: .08rem;
    overflow: hidden;
    transition: all .3s;
}
.dl-grid-item a:hover {
    border-color: rgba(103, 20, 130, .35);
    box-shadow: 0 .08rem .24rem rgba(103, 20, 130, .12);
    transform: translateY(-.03rem);
}
.dl-grid-thumb {
    position: relative;
    overflow: hidden;
    background: #faf7fc;
}
.dl-grid-thumb::before { content: ''; display: block; padding-bottom: 70%; }
.dl-grid-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s;
}
.dl-grid-item a:hover .dl-grid-thumb img { transform: scale(1.06); }
.dl-grid-info {
    padding: .14rem .16rem .16rem;
}
.dl-grid-info h3 {
    font-size: .15rem;
    color: #303133;
    line-height: 1.4;
    min-height: .42rem;
    transition: color .3s;
}
.dl-grid-item a:hover .dl-grid-info h3 { color: var(--primary-color); }
.dl-grid-info p {
    margin-top: .06rem;
    font-size: .12rem;
    color: #909399;
}

/* 分页 */
.pages {
    text-align: center;
    margin-top:.5rem;
    font-size: .16rem;
    line-height:.16rem;
    color:#303133;
}


.pages .p_fun_d, .pages .p_no_d, .pages .p_no_o,.pages .p_fun a, .pages .p_no a{
    border: 1px solid #e4e7ed;
    padding: .08rem .15rem;
    margin-left:.05rem;
    display:inline-block;
    vertical-align:middle;
}

.pages .p_t{
    line-height:.16rem;
    margin:0;
    padding:0;
    display:inline-block;
    vertical-align:middle;
}

.pages .p_fun_d, .pages .p_no_d, .pages .p_no_o{
    color: #ccc;
}

.pages .p_fun a, .pages .p_no a{
    color: #303133;
}

.pages .p_dot {
    margin-left: .04rem;
    margin-right:-.04rem;
    color:#303133;
}

.pages .p_dosize_d, .pages .p_dosize a{
    border-right:1px solid #e4e7ed;
    padding: 1px 5px;
    color: #888888;
}

.pages .p_dosize_d{
    color: #303133;
}

.pages .p_dosize a:hover{
    color: #303133;
}

.pages .p_dosize_last_d, .pages .p_dosize_last a{
    border-right-width:0;
}


/*按钮控制*/
.pages .p_first,.pages .p_first_d,.pages .p_last,.pages .p_last_d{
    display:none;
}

/*样式1-4*/
.pages .p_no a:hover,.pages .p_fun a:hover, .pages .p_goto a:hover, .pages .p_search a:hover {
    background-color: #f5f5f5;
}
/*样式1 蓝*/
.pages .p_no_d {
    border: 1px solid var(--primary-color);
    color: #fff;
    background-color: var(--primary-color);
}


/* ============================================================
   5. 模版下载详情页（download-detail.html）
   ============================================================ */
.dt-wrap {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .5rem 0 .8rem;
}
.dt-main { flex: 1; min-width: 0; }

.dt-hd {
    padding-bottom: .24rem;
    margin-bottom: .3rem;
    border-bottom: 1px solid #ebeef5;
}
.dt-tit {
    font-size: .32rem;
    color: #303133;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .02rem;
}
.dt-hd-meta {
    margin-top: .14rem;
    display: flex;
    align-items: center;
    gap: .2rem;
    font-size: .14rem;
    color: #909399;
}
.dt-hd-date::before {
    content: '';
    display: inline-block;
    width: .03rem;
    height: .14rem;
    margin-right: .1rem;
    background: var(--primary-color);
    border-radius: .02rem;
    vertical-align: -.01rem;
}
.dt-hd-cate {
    padding: .02rem .12rem;
    background: #f4eff8;
    color: var(--primary-color);
    font-size: .13rem;
    border-radius: 2rem;
}

/* 下载按钮 */
.dt-download {
    display: inline-flex;
    align-items: center;
    gap: .08rem;
    margin-top: .2rem;
    padding: .12rem .32rem;
    background: var(--primary-color);
    color: #fff;
    font-size: .16rem;
    border-radius: .04rem;
    transition: all .3s;
    box-shadow: 0 .06rem .16rem rgba(103, 20, 130, .25);
}
.dt-download:hover {
    background: #7c22a0;
    color: #fff;
    transform: translateY(-.02rem);
    box-shadow: 0 .1rem .24rem rgba(103, 20, 130, .35);
}
.dt-download-ico {
    display: inline-block;
    width: .16rem;
    height: .16rem;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    position: relative;
    transform: translateY(-2px) rotate(45deg);
}
.dt-download-ico::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -6px;
    width: 2px;
    height: 12px;
    background: #fff;
    transform: translateX(-50%);
}

/* 大图预览 */
.dt-preview {
    display: grid;
    grid-template-columns: 1fr;
    gap: .2rem;
    margin-bottom: .3rem;
}
.dt-preview-item { text-align: center; }
.dt-preview-item .doc-figure-img {
    display: inline-block;
    padding: .24rem;
    max-width: 100%;
}
.dt-preview-item .doc-figure-img img { max-height: 6rem; }

/* 简介 */
.dt-desc {
    padding: .2rem .24rem;
    background: #faf7fc;
    border-left: .04rem solid var(--primary-color);
    border-radius: 0 .06rem .06rem 0;
    font-size: .15rem;
    color: #606266;
    line-height: 1.9;
    text-align: justify;
}

/* 相关资源 */
.dt-side {
    width: 3rem;
    flex-shrink: 0;
    position: sticky;
    top: .9rem;
    align-self: flex-start;
}
.dt-side-tit {
    font-size: .18rem;
    color: #303133;
    font-weight: 700;
    padding-bottom: .12rem;
    margin-bottom: .16rem;
    border-bottom: 2px solid var(--primary-color);
    letter-spacing: .04rem;
}
.dt-related { margin: 0; padding: 0; }
.dt-related li {
    margin-bottom: .16rem;
    padding-bottom: .16rem;
    border-bottom: 1px solid #f0ebf5;
}
.dt-related li:last-child { border-bottom: none; }
.dt-related li a {
    display: flex;
    gap: .12rem;
    align-items: center;
    transition: all .25s;
}
.dt-related li a:hover { transform: translateX(.02rem); }

.dt-related-thumb {
    width: 1rem;
    height: .72rem;
    flex-shrink: 0;
    position: relative;
    border-radius: .04rem;
    overflow: hidden;
    background: #faf7fc;
    border: 1px solid #f0ebf5;
}
.dt-related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s;
}
.dt-related li a:hover .dt-related-thumb img { transform: scale(1.06); }

.dt-related-info {
    flex: 1;
    min-width: 0;
}
.dt-related-info h4 {
    font-size: .14rem;
    color: #303133;
    line-height: 1.5;
    transition: color .25s;
}
.dt-related li a:hover .dt-related-info h4 { color: var(--primary-color); }
.dt-related-info span {
    display: block;
    margin-top: .04rem;
    font-size: .12rem;
    color: #909399;
}

/* ============================================================
   6. Lightbox 图片放大
   ============================================================ */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, .9);
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    opacity: 0;
    transition: opacity .3s;
}
.lightbox.show {
    display: flex;
    opacity: 1;
}

.lightbox-img-wrap {
    max-width: 90vw;
    max-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox-img-wrap img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .5);
    animation: lbFade .3s;
}
@keyframes lbFade {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

.lightbox-cap {
    margin-top: .24rem;
    font-size: .15rem;
    color: rgba(255, 255, 255, .85);
    letter-spacing: .04rem;
    text-align: center;
    padding: 0 .4rem;
}
.lightbox-counter {
    position: absolute;
    bottom: .3rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: .14rem;
    color: rgba(255, 255, 255, .6);
    letter-spacing: .06rem;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute;
    border: none;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    cursor: pointer;
    transition: all .25s;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.lightbox-close {
    top: .3rem;
    right: .3rem;
    width: .48rem;
    height: .48rem;
    font-size: .3rem;
    line-height: 1;
}
.lightbox-prev,
.lightbox-next {
    top: 50%;
    transform: translateY(-50%);
    width: .56rem;
    height: .56rem;
    font-size: .36rem;
    line-height: 1;
}
.lightbox-prev { left: .3rem; }
.lightbox-next { right: .3rem; }

.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
    background: var(--primary-color);
    color: #fff;
}