.flipbook{overflow: hidden;}
.flipbook-container { position: relative; }
.flipbook-toolbar { position: sticky; top: 0; z-index: 5; background: #fff; border-bottom: 1px solid #eee; }
.flipbook-toolbar .btn { min-width: 40px; }
.flipbook { width: 100%; height: 75vh; background: #f8f9fa; overflow: hidden; border: 1px solid #eef0f2; border-radius: 6px; }
#pageFlip { width: 100%; height: 100%; }
.flipbook .page { max-width: 100%; max-height: 100%; }
.thumbs { height: 96px; box-shadow: inset 0 1px 0 rgba(0,0,0,.05); }
.thumbs .swiper-slide { width: auto; opacity: .7; padding: 6px 8px; cursor: pointer; transition: all 0.2s; }
.thumbs .swiper-slide-thumb-active { opacity: 1; background:  #ccc; border-radius: 4px; }
.thumbs .swiper-slide:hover { opacity: 0.9; }
.thumbs .thumb { height: 88px; width: auto; border: 1px solid #e9ecef; background: #fff; }
.flipbook-toolbar .btn { display: inline-flex; align-items: center; justify-content: center; }
.flipbook-toolbar input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.flipbook-toolbar input[type="number"]::-webkit-outer-spin-button,
.flipbook-toolbar input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media (max-width: 992px) {
    .flipbook { height: 70vh; }
}
@media (max-width: 768px) {
    .flipbook { height: 65vh; }
    .thumbs { height: 84px; }
    .thumbs .thumb { height: 72px; }
}
@media (max-width: 576px) {
    .flipbook { height: 62vh; }
    .thumbs { height: 74px; }
    .thumbs .thumb { height: 62px; }
    .flipbook-toolbar { position: static; }
    .flipbook-toolbar .btn { padding: .25rem .5rem; }
    .flipbook-toolbar .zoom-group { display: none; }
    .flipbook-toolbar .download-group { display: none; }
    .flipbook-toolbar .vr { display: none; }
    /* 移动端强制单页显示 */
    #pageFlip .stf__parent { display: flex; justify-content: center; }
    #pageFlip .stf__wrapper { width: 100% !important; }
    #pageFlip .stf__block { width: 100% !important; max-width: 100% !important; }
    #pageFlip .stf__item { width: 100% !important; max-width: 100% !important; }
    #pageFlip .stf__shadow { display: none !important; }
    #pageFlip .stf__hardShadow { display: none !important; }
}
.page-hint { position: fixed; left: 50%; transform: translateX(-50%); bottom: 16px; background: rgba(0,0,0,.75); color: #fff; padding: 6px 10px; border-radius: 12px; font-size: 12px; z-index: 1050; opacity: 0; transition: opacity .2s; pointer-events: none; }

/* PC端优化：减少上下空白 */
@media (min-width: 768px) {
    .flipbook {
        height: 65vh; /* PC端减少高度，让内容更紧凑 */
        min-height: 500px; /* 减少最小高度 */
    }

    /* PC端减少上下边距 */
    .flipbook.my-2 {
        margin-top: 0.25rem !important;
        margin-bottom: 0.25rem !important;
    }
}