.article-detail-page[data-v-b687524b] {
    min-height: 100vh;
    background: linear-gradient(135deg, #e6f2ff 0%, #cce5ff 50%, #b3d9ff 100%);
    padding: 20px 0 80px 0
}

.article-detail-page .zyzzd-crumbs-bar[data-v-b687524b] {
    padding: 20px 0 0
}

.article-detail-page .zyzzd-crumbs-bar .zyzzd-crumbs[data-v-b687524b] {
    max-width: 1200px;
    margin: 0 auto
}

.article-detail-page .container[data-v-b687524b] {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px
}

.article-detail-page .loading-state[data-v-b687524b] {
    text-align: center;
    padding: 100px 20px
}

.article-detail-page .loading-state .loading-spinner[data-v-b687524b] {
    width: 50px;
    height: 50px;
    margin: 0 auto 20px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin-b687524b 1s linear infinite
}

@keyframes spin-b687524b {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

.article-detail-page .loading-state p[data-v-b687524b] {
    font-size: 16px;
    color: #95a5a6
}

.article-detail-page .empty-state[data-v-b687524b] {
    text-align: center;
    padding: 100px 20px
}

.article-detail-page .empty-state .empty-icon[data-v-b687524b] {
    font-size: 80px;
    margin-bottom: 20px
}

.article-detail-page .empty-state .empty-text[data-v-b687524b] {
    font-size: 18px;
    color: #7f8c8d;
    margin-bottom: 30px
}

.article-detail-page .empty-state .back-home-btn[data-v-b687524b] {
    padding: 12px 30px;
    background: #3498db;
    color: #fff;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease
}

.article-detail-page .empty-state .back-home-btn[data-v-b687524b]:hover {
    background: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px #3498db4d
}

.article-detail-page .article-detail[data-v-b687524b] {
    background: white;
    border-radius: 20px;
    padding: 50px;
    box-shadow: 0 10px 40px #00000014
}

.article-detail-page .back-button-wrapper[data-v-b687524b] {
    text-align: center;
    margin-top: 40px
}

.article-detail-page .back-button[data-v-b687524b] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 40px;
    background: #3498db;
    color: #fff;
    border: 1px solid #3498db;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
    font-size: 16px
}

.article-detail-page .back-button[data-v-b687524b]:hover {
    background: #fff;
    color: #3498db;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px #3498db4d
}

.article-detail-page .article-header[data-v-b687524b] {
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 2px solid #f0f0f0
}

.article-detail-page .article-header .article-title[data-v-b687524b] {
    font-size: 32px;
    font-weight: 800;
    color: #2c3e50;
    line-height: 1.4;
    margin-bottom: 20px
}

.article-detail-page .article-header .article-meta[data-v-b687524b] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    font-size: 14px;
    color: #7f8c8d
}

.article-detail-page .article-header .article-meta .icon-rili {
    width: 14px;
}

.article-detail-page .article-header .article-meta .meta-item[data-v-b687524b] {
    display: flex;
    align-items: center;
    gap: 6px
}

.article-detail-page .article-header .article-meta .meta-item .icon[data-v-b687524b] {
    font-size: 16px
}

.article-detail-page .article-content[data-v-b687524b] {
    font-size: 16px;
    line-height: 1.8;
    color: #34495e
}

.article-detail-page .article-content[data-v-b687524b] p {
    margin-bottom: 10px;
    text-align: justify;
    text-indent: 2em
}

.article-detail-page .article-content[data-v-b687524b] p img, .article-detail-page .article-content[data-v-b687524b] p video {
    margin-left: -2em
}

.article-detail-page .article-content[data-v-b687524b] img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 5px 20px #00000014
}

.article-detail-page .article-content[data-v-b687524b] h1, .article-detail-page .article-content[data-v-b687524b] h2, .article-detail-page .article-content[data-v-b687524b] h3, .article-detail-page .article-content[data-v-b687524b] h4, .article-detail-page .article-content[data-v-b687524b] h5, .article-detail-page .article-content[data-v-b687524b] h6 {
    margin: 30px 0 20px;
    color: #2c3e50;
    font-weight: 700
}

.article-detail-page .article-content[data-v-b687524b] h1 {
    font-size: 28px
}

.article-detail-page .article-content[data-v-b687524b] h2 {
    font-size: 24px
}

.article-detail-page .article-content[data-v-b687524b] h3 {
    font-size: 20px
}

.article-detail-page .article-content[data-v-b687524b] ul, .article-detail-page .article-content[data-v-b687524b] ol {
    margin: 20px 0;
    padding-left: 30px
}

.article-detail-page .article-content[data-v-b687524b] li {
    margin: 10px 0
}

.article-detail-page .article-content[data-v-b687524b] blockquote {
    margin: 25px 0;
    padding: 20px 25px;
    background: #f8f9fa;
    border-left: 4px solid #3498db;
    color: #555;
    font-style: italic
}

.article-detail-page .article-content[data-v-b687524b] code {
    padding: 2px 6px;
    background: #f8f9fa;
    border-radius: 4px;
    font-family: Courier New, monospace;
    font-size: 14px;
    color: #e74c3c
}

.article-detail-page .article-content[data-v-b687524b] pre {
    margin: 25px 0;
    padding: 20px;
    background: #2c3e50;
    border-radius: 8px;
    overflow-x: auto
}

.article-detail-page .article-content[data-v-b687524b] pre code {
    background: none;
    color: #ecf0f1;
    padding: 0
}

.article-detail-page .article-content[data-v-b687524b] table {
    width: 100%;
    margin: 25px 0;
    border-collapse: collapse
}

.article-detail-page .article-content[data-v-b687524b] table th, .article-detail-page .article-content[data-v-b687524b] table td {
    padding: 12px;
    border: 1px solid #dfe6e9;
    text-align: left
}

.article-detail-page .article-content[data-v-b687524b] table th {
    background: #f8f9fa;
    font-weight: 700
}

.article-detail-page .article-content[data-v-b687524b] table tr:hover {
    background: #f8f9fa
}

.article-detail-page .article-content[data-v-b687524b] a {
    color: #3498db;
    text-decoration: none;
    transition: color .3s ease
}

.article-detail-page .article-content[data-v-b687524b] a:hover {
    color: #2980b9;
    text-decoration: underline
}

@media (max-width: 750px) {
    .article-detail-page[data-v-b687524b] {
        padding: 0 0 .8rem
    }

    .article-detail-page .zyzzd-crumbs-bar[data-v-b687524b], .article-detail-page .container[data-v-b687524b] {
        padding: 0 .27rem
    }

    .article-detail-page .loading-state[data-v-b687524b] {
        padding: 1.33rem .27rem
    }

    .article-detail-page .loading-state .loading-spinner[data-v-b687524b] {
        width: .67rem;
        height: .67rem;
        margin: 0 auto .27rem;
        border-width: .053rem
    }

    .article-detail-page .loading-state p[data-v-b687524b] {
        font-size: .27rem
    }

    .article-detail-page .empty-state[data-v-b687524b] {
        padding: 1.33rem .27rem
    }

    .article-detail-page .empty-state .empty-icon[data-v-b687524b] {
        font-size: 1.33rem;
        margin-bottom: .27rem
    }

    .article-detail-page .empty-state .empty-text[data-v-b687524b] {
        font-size: .32rem;
        margin-bottom: .4rem
    }

    .article-detail-page .empty-state .back-home-btn[data-v-b687524b] {
        padding: .21rem .53rem;
        font-size: .27rem;
        border-radius: .4rem
    }

    .article-detail-page .article-detail[data-v-b687524b] {
        padding: .53rem .32rem;
        border-radius: .21rem
    }

    .article-detail-page .back-button-wrapper[data-v-b687524b] {
        margin-top: .53rem
    }

    .article-detail-page .back-button[data-v-b687524b] {
        padding: .21rem .53rem;
        font-size: .3rem;
        border-radius: .4rem
    }

    .article-detail-page .article-header[data-v-b687524b] {
        margin-bottom: .4rem;
        padding-bottom: .33rem;
        border-bottom-width: .027rem
    }

    .article-detail-page .article-header .article-title[data-v-b687524b] {
        font-size: .43rem;
        line-height: 1.5;
        margin-bottom: .27rem
    }

    .article-detail-page .article-header .article-meta[data-v-b687524b] {
        font-size: .3rem;
        gap: .1rem
    }
    .article-detail-page .article-header .article-meta .icon-rili{
        width: .3rem;
    }

    .article-detail-page .article-header .article-meta .meta-item[data-v-b687524b] {
        gap: .08rem
    }

    .article-detail-page .article-header .article-meta .meta-item .icon[data-v-b687524b] {
        font-size: .27rem
    }

    .article-detail-page .article-content[data-v-b687524b] {
        font-size: .32rem;
        line-height: 1.8
    }

    .article-detail-page .article-content[data-v-b687524b] p {
        margin-bottom: .21rem
    }

    .article-detail-page .article-content[data-v-b687524b] img {
        border-radius: .16rem;
        box-shadow: 0 .067rem .27rem #00000014
    }

    .article-detail-page .article-content[data-v-b687524b] h1, .article-detail-page .article-content[data-v-b687524b] h2, .article-detail-page .article-content[data-v-b687524b] h3, .article-detail-page .article-content[data-v-b687524b] h4, .article-detail-page .article-content[data-v-b687524b] h5, .article-detail-page .article-content[data-v-b687524b] h6 {
        margin: .4rem 0 .27rem
    }

    .article-detail-page .article-content[data-v-b687524b] h1 {
        font-size: .4rem
    }

    .article-detail-page .article-content[data-v-b687524b] h2 {
        font-size: .37rem
    }

    .article-detail-page .article-content[data-v-b687524b] h3 {
        font-size: .32rem
    }

    .article-detail-page .article-content[data-v-b687524b] h4 {
        font-size: .29rem
    }

    .article-detail-page .article-content[data-v-b687524b] ul, .article-detail-page .article-content[data-v-b687524b] ol {
        margin: .27rem 0;
        padding-left: .53rem
    }

    .article-detail-page .article-content[data-v-b687524b] li {
        margin: .13rem 0
    }

    .article-detail-page .article-content[data-v-b687524b] blockquote {
        margin: .33rem 0;
        padding: .27rem .33rem;
        border-left-width: .053rem
    }

    .article-detail-page .article-content[data-v-b687524b] code {
        padding: .027rem .08rem;
        border-radius: .053rem;
        font-size: .25rem
    }

    .article-detail-page .article-content[data-v-b687524b] pre {
        margin: .33rem 0;
        padding: .27rem;
        border-radius: .11rem
    }

    .article-detail-page .article-content[data-v-b687524b] table {
        margin: .33rem 0
    }

    .article-detail-page .article-content[data-v-b687524b] table th, .article-detail-page .article-content[data-v-b687524b] table td {
        padding: .16rem;
        font-size: .27rem
    }
}