* {
    box-sizing: border-box;
}

.help-container {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto;
    padding: 40px;
    color: #e5e7eb;
}
body {
    background: #0b0f19;
    font-family: "Microsoft YaHei";
}
.back a {
    color: #94a3b8;
    text-decoration: none;
}

h1 {
    font-size: 32px;
}

.desc {
    color: #94a3b8;
    margin-bottom: 30px;
}

.article {
    width: 100%;
    background: #111827;
    padding: 35px;
    border-radius: 15px;
    box-sizing: border-box;
}

.help-image {
    display: block;
    max-width: 800px;
    max-height: 600px;
    width: auto;
    height: auto;
    margin: 20px auto;
    border-radius: 8px;
    cursor: zoom-in;
}
.help-link {
    color: #38bdf8;
    text-decoration: none;
    transition: color 0.2s;
}

.help-link:hover {
    color: #7dd3fc;
    text-decoration: underline;
}
.video iframe {

    width: 700px;

    height: 400px;

}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 25px;

    font-size: 14px;
    color: #64748b;
}


.breadcrumb a {

    color: #94a3b8;

    text-decoration: none;

    transition: .2s;

}


.breadcrumb a:hover {

    color: #60a5fa;

}


.breadcrumb span {

    color: #e5e7eb;

}

.back {
    margin-bottom: 20px;
}


.back a {

    display: inline-flex;

    align-items: center;

    padding: 8px 14px;

    border-radius: 8px;

    background: #111827;

    border: 1px solid #1f2937;

    color: #cbd5e1;

    text-decoration: none;

    font-size: 14px;

}


.back a:hover {

    border-color: #2563eb;

    color: #60a5fa;

}

.notice {

    margin-top: 30px;

    padding: 20px;

    background: #1e293b;

    border-radius: 10px;

}

.viewer-btn {

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, .2);

    background: rgba(0, 0, 0, .45);

    cursor: pointer;

    padding: 0;

}


.viewer-btn svg {

    width: 24px;

    height: 24px;

    fill: none;

    stroke: white;

    stroke-width: 2.5;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.viewer-btn:hover {

    background: rgba(255, 255, 255, .2);

}

.image-viewer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .88);
    padding: 40px;
    box-sizing: border-box;
}

.image-viewer .image-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.image-viewer img {
    display: block;
    width: auto;
    height: auto;
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 6px;
    cursor: zoom-out;
}


.image-box button {

    flex-shrink: 0;

    width: 45px;

    height: 45px;

    border-radius: 50%;

    border: 0;

    background: rgba(255, 255, 255, .15);

    color: white;

    font-size: 35px;

    cursor: pointer;

}


.image-box button:hover {

    background: rgba(255, 255, 255, .3);

}


.prev {

    left: 50px;

}


.next {

    right: 50px;

}

.help-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

@media (max-width: 768px) {
    html,
    body {
        width: 100%;
        overflow-x: hidden;
    }

    /* 页面主体 */
    .help-container {
        width: auto;
        max-width: none;
        margin-left: 16px;
        margin-right: 16px;
        padding: 0;
        box-sizing: border-box;
    }

    /* 面包屑 */
    .breadcrumb {
        width: 100%;
        margin-bottom: 10px;
        font-size: 15px;
        line-height: 1.8;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .breadcrumb a,
    .breadcrumb span {
        font-size: 15px;
    }

    /* 返回 */
    .back {
        margin: 12px 0;
        font-size: 15px;
        line-height: 1.8;
    }

    .back a {
        font-size: 15px;
    }

    /* 页面标题 */
    .help-container > h1 {
        max-width: 100%;
        margin: 20px 0 12px;
        font-size: 28px;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    /* 页面描述 */
    .desc {
        max-width: 100%;
        font-size: 16px;
        line-height: 1.8;
        overflow-wrap: break-word;
    }

    /* 正文 */
    .article {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding: 20px 16px;
        box-sizing: border-box;
        overflow: hidden;
    }

    .article h2 {
        margin: 30px 0 14px;
        font-size: 21px;
        line-height: 1.5;
    }

    .article p {
        margin: 10px 0;
        font-size: 16px;
        line-height: 1.8;
    }

    .article ul {
        padding-left: 24px;
    }

    .article li {
        margin: 4px 0;
        font-size: 16px;
        line-height: 1.8;
    }

    /* 图片 */
    .help-image {
        display: block;
        width: auto;
        max-width: 100%;
        height: auto;
        margin: 16px auto;
    }

    /* 参数表 */
    .param-table {
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
        font-size: 14px;
    }

    .param-table th,
    .param-table td {
        padding: 9px 6px;
        line-height: 1.6;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* 提示 */
    .notice {
        max-width: 100%;
        padding: 14px;
        font-size: 16px;
        line-height: 1.8;
        overflow-wrap: break-word;
    }

    /* FAQ */
    .faq {
        max-width: 100%;
        font-size: 16px;
        line-height: 1.8;
        overflow-wrap: break-word;
    }

    .faq p {
        margin: 10px 0;
        font-size: 16px;
        line-height: 1.8;
    }

    /* 分割线 */
    .faq hr {
        margin: 18px 0;
        border: 0;
        border-top: 1px solid #1f2937;
    }
}