@charset "utf-8";
/**
 * 在线图书馆 - 列表页
 */

/* 页面背景 */
body {
    background: #F4F6F9;
}

.lib-page {
    padding-top: 0.9rem;
    min-height: 8rem;
}

.lib-container {
    width: min(17.2rem, 96vw);
    margin: 0 auto;
    padding: 0.4rem 0 0.42rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

/* ========== 头部: 标题 + 搜索排序 ========== */
.lib-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.2rem;
}

.lib-heading {
    display: flex;
    align-items: flex-start;
    gap: 0.1rem;
}

.lib-title-bar {
    width: 0.04rem;
    height: 0.6rem;
    border-radius: 0.1rem;
    background: linear-gradient(180deg, #186DD3 0%, #0C9C68 100%);
    margin-top: 0.06rem;
}

.lib-title {
    font-size: 0.24rem;
    line-height: 0.36rem;
    font-weight: 700;
    color: #0F172A;
    letter-spacing: -0.025em;
}

.lib-subtitle {
    font-size: 0.13rem;
    line-height: 0.25rem;
    color: #64748B;
    margin-top: 0.03rem;
}

.lib-toolbar {
    display: flex;
    align-items: center;
    gap: 0.12rem;
    flex-shrink: 0;
}

/* 搜索框 */
.lib-search {
    position: relative;
    width: 2.2rem;
    height: 0.36rem;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 0.06rem;
}

.lib-search .search-icon {
    position: absolute;
    left: 0.05rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.24rem;
    height: 0.24rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lib-search input {
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.13rem;
    color: #1E293B;
    padding: 0 0.12rem 0 0.32rem;
    box-sizing: border-box;
    border-radius: 0.06rem;
}

.lib-search input::-webkit-input-placeholder {
    color: rgba(30, 41, 59, 0.5);
}

.lib-search input::-moz-placeholder {
    color: rgba(30, 41, 59, 0.5);
}

.lib-search:hover {
    border-color: #94A3B8;
}

/* 排序 */
.lib-sort {
    display: flex;
    height: 0.36rem;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 0.06rem;
    overflow: hidden;
}

.sort-btn {
    display: flex;
    align-items: center;
    gap: 0.03rem;
    padding: 0 0.14rem;
    font-size: 0.13rem;
    color: #64748B;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.sort-btn + .sort-btn {
    border-left: 1px solid #E2E8F0;
}

.sort-btn i {
    font-style: normal;
    font-size: 0.12rem;
}

.sort-btn.active {
    background: #F1F5F9;
    color: #186DD3;
    font-weight: 700;
}

/* ========== 书架区域 ========== */
.lib-shelves {
    position: relative;
    padding-top: 0.24rem;
}

.lib-loading,
.lib-empty {
    padding: 0.6rem 0;
    text-align: center;
    color: #94A3B8;
    font-size: 0.14rem;
}

.lib-shelf-row + .lib-shelf-row {
    margin-top: 0.54rem;
}

/* 一排书 */
.lib-books {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.48rem;
    padding: 0 0.2rem;
    position: relative;
    z-index: 2;
}

.book-item {
    position: relative;
    cursor: pointer;
    /* 入场: 依次浮现 */
    opacity: 0;
    animation: book-in 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes book-in {
    from {
        opacity: 0;
        transform: translateY(0.3rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 书本 */
.book {
    width: 100%;
    aspect-ratio: 198.67 / 280.91;
    background: #FFFFFF;
    border-radius: 0.04rem;
    box-shadow: 0 0.04rem 0.06rem -0.02rem rgba(15, 23, 42, 0.15),
        0 0.1rem 0.2rem -0.05rem rgba(15, 23, 42, 0.25);
    overflow: hidden;
    position: relative;
    transition: box-shadow 0.25s ease;
}

.book img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* 封面加载完成后渐显 */
.book img.loaded {
    opacity: 1;
}

/* 书脊高光 */
.book::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0.11rem;
    height: 100%;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.42) 0%,
            rgba(228, 228, 228, 0.35) 14%,
            rgba(188, 188, 188, 0.28) 29%,
            rgba(123, 123, 123, 0.22) 44%,
            rgba(73, 73, 73, 0.18) 51%,
            rgba(0, 0, 0, 0.15) 58%,
            rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

/* 无封面占位 */
.book-cover-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.15rem;
    box-sizing: border-box;
    background: linear-gradient(145deg, #10294E 0%, #186DD3 100%);
    text-align: center;
}

.book-cover-empty span {
    color: #FFFFFF;
    font-size: 0.14rem;
    line-height: 0.22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

/* 悬停/选中: 蓝色光晕(书本本体不动) */
.book-item.hover .book,
.book-item:hover .book {
    box-shadow: 0 0.04rem 0.06rem -0.02rem rgba(24, 109, 211, 0.25),
        0 0.1rem 0.2rem -0.05rem rgba(24, 109, 211, 0.4);
}

/* 书本底部接触阴影 */
.book-shadow {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -0.05rem;
    width: 85%;
    height: 0.11rem;
    background: radial-gradient(50% 50% at 50% 50%,
            rgba(15, 23, 42, 0.45) 0%,
            rgba(15, 23, 42, 0) 70%);
    z-index: -1;
}

/* 隔板 */
.shelf-board {
    height: 0.3rem;
    margin-top: -0.015rem;
    position: relative;
    filter: drop-shadow(0 0.15rem 0.15rem rgba(0, 0, 0, 0.13));
}

.shelf-board::before {
    content: '';
    display: block;
    height: 0.207rem;
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
    border-left: 1px solid #FFFFFF;
    border-right: 1px solid #FFFFFF;
    border-radius: 0.02rem 0.02rem 0 0;
    box-shadow: inset 0 -1px 3px 0 rgba(0, 0, 0, 0.04);
}

.shelf-board::after {
    content: '';
    display: block;
    height: 0.1rem;
    background: linear-gradient(180deg, #E2E8F0 0%, #CBD5E1 100%);
    border-top: 1px solid #D8DFE5;
}

/* ========== 图书详情卡片 ========== */
.lib-card {
    position: absolute;
    width: 2.8rem;
    padding: 0.16rem;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 0.1rem;
    box-shadow: 0 0.2rem 0.3rem -0.1rem rgba(15, 23, 42, 0.2);
    z-index: 10;
    display: none;
}

/* 出现在书下方时, 以顶缘为原点(对应 tooltip 的 zoom-in-top) */
.lib-card.below {
    transform-origin: center top;
}

/* 出现在书上方时, 以底缘为原点(对应 tooltip 的 zoom-in-bottom) */
.lib-card.above {
    transform-origin: center bottom;
}

/* 三角箭头: 指向书本(伪元素随卡片一起做缩放动画) */
.lib-card::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* 书下方: 顶缘箭头朝上 */
.lib-card.below::after {
    top: -0.14rem;
    margin-left: -0.075rem;
    border: 0.075rem solid transparent;
    border-bottom-color: rgba(255, 255, 255, 0.96);
    filter: drop-shadow(0 -0.02rem 0.02rem rgba(15, 23, 42, 0.12));
}

/* 书上方: 底缘箭头朝下 */
.lib-card.above::after {
    bottom: -0.14rem;
    margin-left: -0.075rem;
    border: 0.075rem solid transparent;
    border-top-color: rgba(255, 255, 255, 0.96);
    filter: drop-shadow(0 0.02rem 0.02rem rgba(15, 23, 42, 0.12));
}

/* 出现: scaleY 从0展开 + 渐显, element-ui tooltip 同款曲线(放慢) */
.lib-card.show {
    display: block;
    animation: lib-card-in 0.5s cubic-bezier(0.23, 1, 0.32, 1) both;
}

/* 消失: 反向收拢 + 渐隐 */
.lib-card.leaving {
    display: block;
    animation: lib-card-out 0.4s cubic-bezier(0.23, 1, 0.32, 1) both;
}

@keyframes lib-card-in {
    0% {
        opacity: 0;
        transform: scaleY(0.4);
    }

    40% {
        opacity: 0.35;
    }

    100% {
        opacity: 1;
        transform: scaleY(1);
    }
}

@keyframes lib-card-out {
    0% {
        opacity: 1;
        transform: scaleY(1);
    }

    60% {
        opacity: 0;
    }

    100% {
        opacity: 0;
        transform: scaleY(0.4);
    }
}

.lib-card-title {
    font-size: 0.14rem;
    line-height: 0.2rem;
    font-weight: 700;
    color: #0F172A;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.lib-card-date {
    font-size: 0.11rem;
    line-height: 0.17rem;
    color: #64748B;
    margin-top: 0.04rem;
}

.lib-card-qrcode {
    display: flex;
    align-items: center;
    gap: 0.12rem;
    padding: 0.1rem;
    background: #F8FAFC;
    border-radius: 0.06rem;
    margin: 0.12rem 0;
}

.lib-card-qrcode img {
    width: 0.72rem;
    height: 0.72rem;
    display: block;
    border: 0.04rem solid #FFFFFF;
    box-sizing: content-box;
    background: #FFFFFF;
}

.qr-text {
    flex: 1;
    min-width: 0;
}

.qr-tip {
    font-size: 0.12rem;
    line-height: 0.18rem;
    font-weight: 700;
    color: #186DD3;
}

.qr-intro {
    font-size: 0.11rem;
    line-height: 0.17rem;
    color: #64748B;
    margin-top: 0.03rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.lib-card-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.06rem;
    width: 100%;
    height: 0.32rem;
    border: none;
    outline: none;
    background: #186DD3;
    border-radius: 0.06rem;
    color: #FFFFFF;
    font-size: 0.13rem;
    font-weight: 600;
    cursor: pointer;
}

.lib-card-btn:hover {
    background: #2F7FE0;
}

.lib-card-btn svg {
    flex-shrink: 0;
}

/* ========== 底部: 统计 + 分页 ========== */
.lib-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #E2E8F0;
    padding-top: 0.2rem;
}

.lib-count {
    font-size: 0.13rem;
    color: #64748B;
}

.lib-count b {
    color: #186DD3;
    font-weight: 700;
    font-size: 0.15rem;
    padding: 0 0.02rem;
}

.lib-pager {
    display: flex;
    align-items: center;
    gap: 0.08rem;
}

.page-btn {
    min-width: 0.32rem;
    height: 0.32rem;
    padding: 0 0.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 0.06rem;
    color: #64748B;
    font-size: 0.13rem;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
}

.page-btn:hover:not(.active):not(.disabled) {
    border-color: #186DD3;
    color: #186DD3;
}

.page-btn.active {
    background: #186DD3;
    border-color: #186DD3;
    color: #FFFFFF;
    font-weight: 700;
}

.page-btn.disabled {
    opacity: 0.5;
    cursor: default;
}

.page-ellipsis {
    color: #94A3B8;
    font-size: 0.13rem;
    padding: 0 0.02rem;
}

/* ========== 小屏适配(800px以下, 移动端入口为h5阅读页, 此处仅做基本兼容) ========== */
@media (max-width: 800px) {
    .lib-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .lib-toolbar {
        width: 100%;
        justify-content: space-between;
    }

    .lib-search {
        flex: 1;
        width: auto;
    }

    .lib-books {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.24rem;
        padding: 0;
    }

    .lib-footer {
        flex-direction: column;
        gap: 0.2rem;
    }
}