/*重新优化后的mobile*/
@media (max-width: 1200px) {
    #library-items .col-6  {
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }
}
@media (max-width: 992px) {
    .container {
        max-width: 992px;
    }
    .btn-edit-library img {
        width: 40px;
        height: 18px;
    }

    .selection-circle {
        width: 20px;
        height: 20px;
    }

    .checkmark {
        width: 14px;
        height: 14px;
    }
    #library {
        margin-top: -30px;
    }
    #library-items {
        gap: 0; /* 移动端进一步减小间隔 */
        flex-wrap: wrap;
    }
    #library-items .item__cover-wrapper {
        border-radius: 8px;
        overflow: hidden;
        width: 134px;
        height: 186px;
        margin: 0;
    }
    #library-items .item__cover {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #library-items .col-6 {
        flex: 0 0 16.66%;
        max-width: 16.66%;
    }
    #library-items .item__title {
        -webkit-line-clamp: 2;
        width: 134px;
        height: 54px;
        font-family: Roboto, Roboto;
        font-weight: 400;
        font-size: 18px;
        color: #333333;
        line-height: 27px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        padding-left: 5px;
    }
    #library-items .item__content {
        height: auto;
        padding: 5px 0;
        min-height: 40px;
        margin: 0;
    }
    #library-paginator {
        margin-top: -25px;
        margin-bottom: -25px;
    }
    /*历史记录*/
    /*#history-items .col-12 {*/
    /*    padding: 0;*/
    /*    gap: 0;*/
    /*    height: 213px;*/
    /*    margin-bottom: 10px;*/
    /*}*/
    /*#history-items .item {*/
    /*    flex-direction: row;*/
    /*    position: relative;*/
    /*    padding: 0;*/
    /*    gap: 0;*/
    /*    height: 100%;*/
    /*    margin: 0;*/
    /*}*/
    /*#history-items .item__content {*/
    /*    width: auto;*/
    /*    flex: 1;*/
    /*    padding: 0;*/
    /*    gap: 8px;*/
    /*}*/
    /*#history-items .item__cover-wrapper {*/
    /*    width: 153px;*/
    /*    height: 100%;*/
    /*    margin-left: 10px;*/
    /*    margin-right: 10px;*/
    /*}*/
    /*#history-items .item__title {*/
    /*    white-space: normal; !* 允许换行 *!*/
    /*    overflow: hidden;*/
    /*    text-overflow: ellipsis;*/
    /*    display: -webkit-box;*/
    /*    -webkit-line-clamp: 2; !* 最多显示2行 *!*/
    /*    -webkit-box-orient: vertical;*/
    /*    width: 575px;*/
    /*    height: 20px;*/
    /*    font-family: Ubuntu, Ubuntu;*/
    /*    font-weight: 400;*/
    /*    font-size: 18px;*/
    /*    color: #333333;*/
    /*    line-height: 26px;*/
    /*    text-align: left;*/
    /*    font-style: normal;*/
    /*    text-transform: none;*/
    /*    margin: 0;*/
    /*}*/
    /*#history-items .item__author {*/
    /*    width: 575px;*/
    /*    height: 14px;*/
    /*    font-family: Ubuntu, Ubuntu;*/
    /*    font-weight: 400;*/
    /*    font-size: 14px;*/
    /*    color: #999999;*/
    /*    line-height: 14px;*/
    /*    text-align: left;*/
    /*    font-style: normal;*/
    /*    text-transform: none;*/
    /*    margin: 0;*/
    /*}*/
    /*#history-items .item__description {*/
    /*    width: 85%;*/
    /*    height: 76px;*/
    /*    font-family: Ubuntu, Ubuntu;*/
    /*    font-weight: 400;*/
    /*    font-size: 14px;*/
    /*    color: #666666;*/
    /*    line-height: 21px;*/
    /*    text-align: justify;*/
    /*    font-style: normal;*/
    /*    text-transform: none;*/
    /*    margin: 0;*/
    /*}*/
    /*#history-items .item__tags {*/
    /*    display: -webkit-box;*/
    /*    -webkit-line-clamp: 1;*/
    /*    -webkit-box-orient: vertical;*/
    /*    overflow: hidden;*/
    /*    height: 24px; !* 大约一行的高度 *!*/
    /*    margin: 0;*/
    /*}*/
    /*#history-items .item__tag {*/
    /*    display: inline-block;*/
    /*    max-width: 100%;*/
    /*    overflow: hidden;*/
    /*    text-overflow: ellipsis;*/
    /*    white-space: nowrap;*/
    /*    text-align: left;*/
    /*    font-style: normal;*/
    /*    text-transform: none;*/

    /*    width: 27px;*/
    /*    height: 11px;*/
    /*    font-family: Roboto, Roboto;*/
    /*    font-weight: 400;*/
    /*    font-size: 11px;*/
    /*    color: #999999;*/
    /*    line-height: 11px;*/

    /*}*/
    /*#history-items .item__status {*/
    /*    display: none;*/
    /*}*/
    /*#history-items .item__stats {*/
    /*    margin-top: -45px;*/
    /*    gap: 5px;*/
    /*    margin-right: -50px;*/
    /*}*/
    /*#history-items .item__stat {*/
    /*    font-family: Ubuntu, Ubuntu;*/
    /*    font-weight: 400;*/
    /*    font-size: 14px;*/
    /*    color: #999999;*/
    /*    line-height: 14px;*/
    /*    text-align: left;*/
    /*    font-style: normal;*/
    /*    text-transform: none;*/
    /*}*/
    /*!*按钮*!*/
    /*#history-items .item__actions {*/
    /*    position: relative;*/
    /*    z-index: 9;*/
    /*    margin-left: -35px;*/
    /*    gap: 5px;*/
    /*    margin-top: 35px;*/
    /*    height: 50px;*/
    /*    padding-right: 0;*/
    /*}*/
    /*#history-items .add-to-library-btn {*/
    /*    height: 16px;*/
    /*    width: 77px;*/
    /*    background-size : 77px 16px;*/
    /*}*/
    /*#history-items .in-library-btn {*/
    /*    height: 16px;*/
    /*    width: 77px;*/
    /*    background-size : 77px 16px;*/
    /*}*/
    /*#history-items .read-now-btn {*/
    /*    height: 20px;*/
    /*    width: 77px;*/
    /*    min-width : 0;*/
    /*    background-size : 77px 20px;*/
    /*    padding: 0;*/
    /*}*/
    /*#history-paginator {*/
    /*    margin-top: -25px;*/
    /*    margin-bottom: -25px;*/
    /*}*/
}
@media (max-width: 895px) {
    #library-items .col-6 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}
@media (max-width: 768px) {
    /*历史记录*/
    #history-items .col-12 {
        padding: 0;
        gap: 0;
        height: 137px;
        margin-bottom: 10px;
    }
    #history-items .item {
        flex-direction: row;
        position: relative;
        padding: 0;
        gap: 0;
        height: 100%;
        margin: 0;
    }
    #history-items .item__content {
        width: auto;
        flex: 1;
        padding: 0;
        gap: 8px;
    }
    #history-items .item__cover-wrapper {
        width: 97px;
        height: 100%;
        margin-left: 10px;
        margin-right: 10px;
    }
    #history-items .item__title {
        white-space: normal; /* 允许换行 */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 最多显示2行 */
        -webkit-box-orient: vertical;
        width: 221px;
        height: 12px;
        font-family: Roboto, Roboto;
        font-weight: 400;
        font-size: 12px;
        color: #333333;
        line-height: 14px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin: 0;
    }
    #history-items .item__author {
        width: 180px;
        height: 12px;
        font-family: Roboto, Roboto;
        font-weight: 400;
        font-size: 9px;
        color: #999999;
        line-height: 12px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin: 0;
    }
    #history-items .item__description {
        width: 85%;
        height: 60px;
        font-family: Roboto, Roboto;
        font-weight: 400;
        font-size: 9px;
        color: #999999;
        line-height: 12px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        margin: 0;
    }
    #history-items .item__tags {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        height: 24px; /* 大约一行的高度 */
        margin: 0;
    }
    #history-items .item__tag {
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 400;
        font-size: 9px;
        color: #999999;
        line-height: 12px;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }
    #history-items .item__status {
        display: none;
    }
    #history-items .item__stats {
        margin-top: -45px;
        gap: 5px;
        margin-right: -50px;
    }
    #history-items .item__stat {
        font-weight: 400;
        font-size: 9px;
        color: #999999;
        line-height: 12px;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }
    /*按钮*/
    #history-items .item__actions {
        position: relative;
        z-index: 9;
        margin-left: -35px;
        gap: 5px;
        margin-top: 35px;
        height: 50px;
        padding-right: 0;
    }
    #history-items .add-to-library-btn {
        height: 16px;
        width: 77px;
        background-size : 77px 16px;
    }
    #history-items .in-library-btn {
        height: 16px;
        width: 77px;
        background-size : 77px 16px;
    }
    #history-items .read-now-btn {
        height: 20px;
        width: 77px;
        min-width : 0;
        background-size : 77px 20px;
        padding: 0;
    }
    #history-paginator {
        margin-top: -25px;
        margin-bottom: -25px;
    }
}
@media (max-width: 720px) {
    #library-items .col-6 {
        flex: 0 0 25%;
        max-width: 25%;
    }
}
@media (max-width: 576px) {
    .btn-edit-library img {
        width: 40px;
        height: 18px;
    }

    .selection-circle {
        width: 20px;
        height: 20px;
    }

    .checkmark {
        width: 14px;
        height: 14px;
    }
    #library {
        margin-top: -30px;
    }
    #library-items {
        gap: 0; /* 移动端进一步减小间隔 */
        flex-wrap: wrap;
    }
    #library-items .item__cover-wrapper {
        border-radius: 8px;
        overflow: hidden;
        width: 106px;
        height: 148px;
        margin: 0;
    }
    #library-items .item__cover {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #library-items .col-6 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    #library-items .item__title {
        -webkit-line-clamp: 2;
        width: 106px;
        height: 32px;
        font-family: Roboto, Roboto;
        font-weight: 700;
        font-size: 12px;
        color: #333333;
        line-height: 16px;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }
    #library-items .item__content {
        height: auto;
        padding: 5px 0;
        min-height: 40px;
        margin: 0;
        width: 106px;
    }
    #library-paginator {
        margin-top: -25px;
        margin-bottom: -25px;
    }
}
@media (max-width: 480px) {
    #library-items .col-6 {
        flex: 0 0 33%;
        max-width: 33%;
    }
}