@charset "utf-8";
.items_txt .author a, .updateTable .author a {
    cursor: text
}

.friend_link {
    padding: 12px 0 0;
    line-height: 2.4;
    text-align: center
}

.friend_link a {
    margin: 0 10px;
    display: inline-block
}

/*.leftBox, .rightBox, .rightBox2 { margin-bottom: 14px }
.channelBanner .leftBox, .channelBanner .rightBox { height: 334px; overflow: hidden }*/
.channelPic .leftBox, .channelPic .rightBox { /*height: 515px; */
    overflow: hidden
}

.channelTable .leftBox { /*height: 1046px;*/
    overflow: hidden
}

.scBigImg img, .rightList li.on .cover img, .itemsList .items_img img {
    box-shadow: 0 0 1px rgba(0, 0, 0, .05)
}

.scBigImg:hover img, .rightList li.on .cover a:hover img, .itemsList .items_img:hover img {
    box-shadow: 0 0 1px rgb(0, 0, 0, .25)
}

.leftBox {
    width: 720px;
    float: left; /*border: 1px solid #EAEAEA*/
}

.sliderContent {
    width: 306px;
    float: left; /*margin: 16px 0 16px 14px;*/
    position: relative
}

.scSmallImg {
    position: absolute;
    top: 0px;
    right: 0px; /*height: 335px*/
}

.scSmallImg li {
    height: 65px;
    margin-bottom: 8px;
    border: 2px solid #fff
}

.scSmallImg li.on {
    border: 2px solid #d43c33
}

.scSmallImg img {
    width: auto;
    height: 65px;
    cursor: pointer;
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.6
}

.scSmallImg li.on img {
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1
}

.scBigImg dd {
    display: none
}

.scBigImg dd.on {
    display: block
}

.scBigImg img {
    width: 240px;
    height: 300px;
    background: #f6f6f6
}

.hot_articles {
    width: 396px;
    float: right;
    padding: 0 2px
}

.hot_articles dl {
    padding: 0 4px 8px;
    border-bottom: 1px dotted #eae6e2
}

.hot_articles .hot_recommend {
    margin-bottom: 12px;
}

.hot_articles dt { /*height: 40px; line-height: 40px;*/
    padding-bottom: 7px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.8
}

.hot_articles dt a {
    color: #d43c33
}

.hot_articles dd {
    line-height: 30px;
    font-size: 14px;
    overflow: hidden
}

.hot_articles dd a {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.hot_articles .hot_recommend dd a {
    width: 49%;
    padding-right: 1%;
    float: left;
}

.hot_articles .hot_notice dd a {
    padding-right: 1%;
}

.hot_articles span.tit {
    color: #d43c33;
    margin-right: 6px
}

.hot_articles .hot_notice {
    border: none
}

.hot_articles .line {
    padding: 0 14px;
    color: #eee
}

.rightBox {
    width: 240px;
    float: right; /*border: 1px solid #EAEAEA;*/
    position: relative
}

.rightBox .title, .wrap_right_cont .title { /*height: 48px; margin: 0 14px;*/
    border-bottom: 1px solid #e0e0e0
}

.rightBox .title h3, .wrap_right_cont .title h3 {
    line-height: 1;
    padding-bottom: 14px;
    display: inline-block;
    font-size: 20px;
    font-weight: 600; /*border-bottom: 4px solid transparent*/
}

/*.rightBox .title h3.on { border-color: #d43c33 }*/
.rightList ul {
    padding: 0
}

.rightList li { /*border-bottom: 1px dotted #e0e0e0; height: 37px; line-height: 37px;*/
    overflow: hidden;
    position: relative;
    vertical-align: middle
}

.rightList li:last-child {
    border: none
}

.rightList .book_name {
    font-size: 14px;
    height: 34px;
    line-height: 34px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.rightList .book_intro {
    background: #f7f7f7;
    border: 1px solid #eee;
    clear: both;
    padding: 8px;
    word-break: break-all;
    zoom: 1;
    overflow: hidden;
    display: none
}

.rightList .cover, .rightList .book_intro .txt {
    display: none
}

.rightList li.on {
    height: auto;
    padding: 4px 0;
    border: none
}

.rightList li.on .book_intro {
    display: block
}

.rightList li.on .cover {
    float: left;
    display: block
}

.rightList li.on .cover img {
    width: 60px;
    height: auto;
    background: #f6f6f6;
    margin-right: 9px
}

.rightList li.on .book_intro .name {
    line-height: 26px;
    height: 26px;
    display: block;
    overflow: hidden
}

.rightList_nobor ul {
    padding: 4px 14px 10px
}

.rightList_nobor li {
    height: auto;
    padding: 10px 0 !important;
    border: none
}

.book_intro .author {
    color: #999;
    display: block;
    line-height: 30px
}

.book_intro .class {
    color: #999;
    display: block;
    line-height: 1
}

.rightList .on .book_intro .txt {
    height: 72px;
    line-height: 1.5;
    color: #808080;
    overflow: hidden;
    display: block
}

.rightList li i, .rankTable .rank i {
    width: 17px;
    height: 17px;
    line-height: 17px;
    text-align: center;
    background-color: #999;
    color: #fff;
    vertical-align: middle;
    display: inline-block;
    font-size: 12px;
}

.rightList li i {
    float: left;
    margin: 8px 7px 0 0;
}

.rankTable .rank i {
    margin: 1px 1px 0
}

/*.rightList li.on i { position: absolute; top: 12px; left: 0; margin: 0; display:none }*/
.rightList li.num1 i, .rankTable .rank .num1 {
    background-color: #d43c33
}

.rightList li.num2 i, .rankTable .rank .num2 {
    background-color: #65bf96
}

.rightList li.num3 i, .rankTable .rank .num3 {
    background-color: #78c7a3
}

.rightList li.num1 i, .rightList li.num2 i, .rightList li.num3 i {
    display: block
}

/*.rightList .more{ margin: 1px 0; height: 34px; line-height: 34px; border-radius: 1px; background-color: #f7f7f7; text-align: center }
.rightList .more a{ display: block; color: #666 }*/
.leftBox .title {
    border-bottom: 1px solid #e9e9e9
}

.leftBox .title h2 {
    line-height: 1;
    padding-bottom: 14px;
    display: inline-block;
    font-size: 20px;
    font-weight: 600; /*border-bottom: 4px solid transparent*/
}

.picRecommend {
    width: 720px;
    padding: 12px 0 0
}

.itemsList {
    width: 50%;
    float: left;
    padding: 17px 0
}

.itemsList .items_img {
    float: left;
    margin-right: 14px
}

.itemsList .items_img img {
    width: 96px;
    height: 120px;
    background: #f6f6f6
}

.items_txt {
    width: 230px;
    float: left; /*padding-right: 20px;*/
}

.items_txt h4 {
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: keep-all;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: normal
}

.items_txt .author {
    margin: 8px 0
}

.items_txt .author a {
    color: #a6a6a6
}

.items_txt .intro {
    margin-top: 8px;
    line-height: 1.5;
    height: 54px;
    overflow: hidden
}

.searchTipBar {
    color: #333;
    font-size: 14px;
    padding: 1px 7px 16px 7px
}

.leftBox .updateTable {
    width: 718px;
}

.updateTable {
    color: #999
}

.updateTable table {
    width: 100%;
    margin-bottom: 14px;
}

.updateTable th, .updateTable td {
    height: 41px;
    line-height: 41px;
    vertical-align: middle;
    padding-left: 1px;
    text-align: left
}

.updateTable th {
    font-weight: normal;
    font-size: 14px;
}

.updateTable td {
    border-top: 1px solid #eee
}

.updateTable .style {
    width: 74px;
    font-size: 14px;
}

.updateTable .name {
    width: 192px;
    padding-right: 10px;
    font-size: 14px;
}

.updateTable .name a, .updateTable .chapter a {
    max-width: 168px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: keep-all
}

.updateTable .chapter {
    padding-right: 5px
}

.updateTable .chapter a {
    max-width: 200px;
    float: left;
    color: #666
}

.updateTable .author {
    width: 82px;
    text-align: left
}

.updateTable .time {
    width: 82px;
    text-align: center
}

.updateTable .word {
    width: 60px;
    padding-right: 10px;
    text-align: right
}

.updateTable .rank {
    width: 2.5em;
    padding-right: 10px;
    text-align: center
}

.updateTable .name a, .updateTable .chapter a, .updateTable .author a {
    height: 41px;
    line-height: 41px;
    display: inline-block;
    overflow: hidden
}

.rankBox {
    padding-bottom: 14px;
    height: auto !important
}

.rankTable th {
    background: #f9f9f9;
    color: #333
}

.rankTable td {
    border: none;
    height: 40px;
    line-height: 40px
}

.rankTable tr:nth-child(2n) td {
    background: #fafafa
}

.rankTable .chapter a {
    max-width: 176px
}

.classTable {
    font-size: 14px
}

.classTable .rank {
    width: 60px;
}

.classTable .rank i {
    float: inherit;
    margin: 0;
    color: #fff
}

.classTable .style {
    width: 100px;
}

.classTable .name {
    width: 250px;
}

.classTable .name a, .classTable .chapter a {
    max-width: 90%
}

.classTable .author {
    width: 120px
}

.classTable .word {
    width: 80px;
    padding-right: 15px
}

.rightBox2 {
    width: 266px;
    float: right;
    border: 1px solid #EAEAEA;
    position: relative;
    overflow: hidden
}

.rightBox2 .title h3 {
    height: 45px;
    line-height: 48px;
    padding: 0 30px;
    font-size: 18px;
    font-weight: normal;
    color: #ff758f;
    border-bottom: 4px solid #ff758f
}

.rightList2 li {
    vertical-align: middle
}

.rightList2 li a {
    display: block; /*padding: 0 30px;*/
    height: 47px;
    line-height: 47px;
    font-size: 16px;
    overflow: hidden;
    border-top: 1px dotted #eee;
}

.rightList2 li:first-child a {
    border: none
}

.rightList2 li a.on, .rightList2 li a:hover {
    color: #d43c33
}

.so_tag { /*padding: 4px 14px 0;*/
    font-size: 14px;
    padding: 5px 0
}

.so_tag li {
    padding: 0 0 24px; /*border-bottom: 1px solid #eee*/
}

.so_tag li:last-child {
    padding: 0 0 4px
}

.so_tag li .tit, .so_tag li a {
    line-height: 1;
    padding: 3px 7px;
    margin-right: 12px
}

.so_tag li .tit {
    color: #999
}

.so_tag li a.on, .so_tag li a:hover {
    color: #d43c33
}

.so_tag li .so_girl {
    display: inline-block
}

.so_tag li .so_boy {
    display: inline-block /*; margin: 8px 0 0 140px;*/
}

/*.payBox { width: 998px; border: 1px solid #eaeaea }*/
.payHead {
    height: 36px;
    line-height: 36px;
    padding: 20px 0 30px;
    margin: 0 24px;
    font-size: 16px;
    border-bottom: 1px solid #eaeaea
}

.payHead .user_name {
    margin-right: 25px
}

.payHead .btn_gray {
    font-size: 14px;
    padding: 10px 20px;
    margin-left: 20px
}

.payFoot {
    line-height: 2.4;
    padding: 30px 0 40px;
    margin: 0 24px;
    font-size: 13px;
    color: #999;
    border-top: 1px solid #eee;
}

.payCon {
    margin: 0 24px
}

.payCon h5 {
    font-size: 16px;
    font-weight: normal;
    padding: 28px 0 2px
}

.pay_way {
    padding-bottom: 5px
}

.pay_way li {
    width: 196px;
    text-align: center;
    border: 2px solid #eee;
    border-radius: 4px;
    margin: 20px 26px 3px 0;
    float: left;
    cursor: pointer;
    line-height: 1
}

.pay_way li.on {
    border-color: #d43c33
}

.pay_way li .pay_pic {
    width: 180px;
    margin: 12px auto;
}

.pay_way li strong {
    font-size: 24px;
    display: block;
    line-height: 1;
    padding: 20px 0 5px
}

.pay_way li .pay_mn {
    display: table-cell;
    width: 196px;
    height: 40px;
    vertical-align: middle;
    line-height: 1.2;
    padding-bottom: 12px;
    font-size: 14px;
    text-align: center
}

.pay_way li .pay_mn em.red {
    display: block
}

.pay_Checkout {
    padding: 20px 0;
    font-size: 14px;
    line-height: 1.8;
}

.pay_Checkout .btn_red {
    margin: 20px 0;
}

.payResultBox {
    padding: 90px 40px 160px;
    text-align: center
}

.payResultBox h3 {
    font-size: 38px;
    line-height: 1;
    padding-bottom: 30px;
}

.payResultBox .list {
    display: inline-block;
    padding-bottom: 15px;
}

.payResultBox .list li {
    font-size: 16px;
    line-height: 36px
}

.payResultImg {
    width: 60px;
    margin-right: 12px;
    vertical-align: middle;
}

/*.bookCover, .reply_bar { padding: 14px }*/
.bookCover .book_cover {
    width: 200px;
    display: block;
    height: auto;
    margin-right: 25px;
    float: left;
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .3), 0 0 5px #f9f2e9 inset;
    transition: color .3s, background-color .3s, border .3s;
}

.bookCover .cover {
    width: 100%;
    height: 100%;
    background: #f6f6f6;
    -webkit-transition: -webkit-transform .3s ease-out;
    -moz-transition: -moz-transform .3s ease-out;
    -ms-transition: -ms-transform .3s ease-out;
    transition: transform .3s ease-out;
}

.bookCover .cover:hover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05)
}

.book_info {
    width: 755px;
    float: left
}

.book_info h1 {
    font-size: 25px;
    display: inline-block;
    line-height: 1;
}

.book_info .author {
    font-size: 14px;
    margin-left: 20px;
    color: #444
}

.book_info .list {
    padding: 15px 0 20px
}

.book_info .list li {
    line-height: 26px;
    color: #666
}

.book_info .list li .item {
    width: 20%;
    display: inline-block
}

/*目录页*/
.book_info1 {
    text-align: center;
    padding: 10px 0 15px
}

.book_info1 .tit {
    padding: 10px 0 20px
}

.book_info1 h1 {
    font-size: 28px;
    display: inline-block
}

.book_info1 .list {
    padding: 5px 0;
    font-size: 14px
}

.book_info1 .list li {
    line-height: 26px;
    color: #999
}

.book_info1 .list li span {
    display: inline-block;
    margin: 0 15px
}

.dirWrap {
    padding-bottom: 30px
}

.dirWrap h3 {
    padding-left: 6px;
    font-size: 14px;
    background: #f9f9f9;
    height: 40px;
    line-height: 40px;
    font-weight: normal;
    position: relative;
    cursor: pointer;
    margin: 0 0 5px;
    border-radius: 3px
}

.dirList {
    overflow: hidden;
    padding-bottom: 20px
}

.dirList li {
    float: left;
    width: 265px;
    padding-left: 5px;
    padding-right: 30px;
    height: 40px;
    line-height: 40px;
    overflow: hidden;
    border-bottom: 1px dotted #ddd;
    *zoom: 1;
    font-size: 14px
}

.dirList li a {
    float: left;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.dirList li i.red {
    padding-left: 5px
}

.book_info .intro_txt {
    height: 96px;
    min-height: 96px;
    line-height: 24px;
    font-size: 14px;
    position: relative;
    margin-bottom: 26px;
    overflow: hidden
}

.book_info .intro_txt em.black9 {
    font-weight: bold;
    color: #333;
    display: block;
}

/*.book_info .intro_txt p { text-indent:2em }*/
.icon_show, .icon_hide {
    display: inline-block;
    color: #2972cc;
    height: 24px;
    padding: 0 2px 0 10px;
    text-indent: 0;
    text-align: center;
    font-size: 12px;
    position: absolute;
    right: 0;
    bottom: 0;
    background: #fff
}

.icon_show i, .icon_hide i {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: url(../images/icon_dt.png) no-repeat 0 2px;
    margin-right: 4px;
    *vertical-align: middle
}

.icon_hide i {
    background-position: -12px 2px
}

.icon_hide {
    display: none
}

.btns .btn_red, .btns .btn_ora, .btns .btn_addsj {
    margin-right: 24px
}

.book_tit { /*height: 48px; line-height: 48px; margin: 0 14px;*/
    border-bottom: 1px solid #eee;
    overflow: hidden;
    padding-bottom: 14px;
    line-height: 1.2
}

.book_tit .fl {
    font-size: 14px;
    color: #666
}

.book_tit .fl h3 {
    font-size: 20px;
    color: #333;
    margin-right: 5px;
    display: inline
}

.book_tit .fr {
    font-size: 13px
}

.bookChapter .list {
    padding: 8px 0
}

.bookChapter .list li {
    line-height: 36px;
    overflow: hidden
}

.zj_yl {
    color: #999;
    font-size: 13px
}

/*.bookChapter .list li .zj { width: 50%; float: left }
.bookChapter .list li .zj_1 a { color: #f60 }*/


/*.commentBar { padding: 0 14px }*/
.comment_list {
    padding: 20px 0;
    border-bottom: 1px solid #eee
}

.comment_list:last-child {
    border: none
}

.comment_list .user_heads { /*width: 54px; height: 54px; float: left;*/
    position: relative;
    margin-right: 20px
}

.comment_list .user_head {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #f6f6f6
}

.comment_list .user_heads span {
    display: block;
    margin: 0;
    position: absolute;
    left: 12px;
    bottom: 0
}

.comment_list ul {
    width: 640px
}

.comment_list .li_0 {
    font-family: "宋体"
}

.comment_list .li_0 strong {
    font-size: 14px;
    color: #f00
}

.comment_list .li_1 {
    overflow: hidden
}

.comment_list .user_name {
    color: #ed4259
}

.comment_list .li_2 {
    padding: 6px 0
}

.comment_list .li_3 {
    color: #999
}

.comment_list .reply {
    padding-left: 12px
}

.comment_list .num {
    color: #ed4259;
    margin: 0 3px
}

.comment_list .li_4 {
    line-height: 34px;
    padding-top: 8px;
    margin-top: 15px;
    border-top: 1px solid #eaeaea
}

.no_comment {
    padding: 70px 14px 115px;
    color: #CCCCCC;
    text-align: center;
    font-size: 14px;
}

.pl_bar li {
    display: block
}

.pl_bar .name {
    color: #666;
    padding-top: 2px;
    font-size: 14px
}

.pl_bar .dec {
    font-size: 14px;
    line-height: 1.8;
    padding: 12px 0
}

.pl_bar .other {
    line-height: 24px;
    color: #999;
    font-size: 13px
}

.pl_bar .other a {
    display: inline-block;
    color: #999
}

.pl_bar .reply {
    padding-left: 22px;
    background: url(../images/icon_reply.png) no-repeat 0 2px
}

.reply_bar .tit {
    line-height: 52px;
    font-size: 13px
}

.replay_text {
    width: 100%;
    height: 110px;
    border: 1px solid #eaeaea;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
    font-size: 14px;
    box-shadow: 0 0 4px 2px hsla(0, 0%, 92%, .35);
}

.replay_text:hover {
    background: #fff
}

.reply_btn {
    padding: 17px 0 19px;
    overflow: hidden
}

.reply_bar .reply_btn {
    padding-bottom: 4px
}

.reply_btn .btn_red {
    padding: 10px 20px;
    font-size: 14px
}

.reply_btn .fr {
    margin-top: 8px
}

.write_bar {
    padding: 1rem 0;
    margin: 0 1rem
}

.write_comment {
    padding: 1rem;
    background: #f6f6f6;
    min-height: 16rem
}

.write_comment .text {
    width: 100%;
    min-height: 10rem;
    border: 1px solid #ddd;
    font-size: 0.875rem;
    line-height: 1.8;
    margin-bottom: 1rem
}

.book_comment_tit {
    font-size: 24px;
    padding: 20px 15px 10px 15px
}

.page_bar {
    padding: 1rem 0;
    margin: 0 1rem;
    border-top: 1px solid #eee
}

.page_bar li {
    width: 33.3%;
    float: left;
    text-align: center
}

.page_bar li a, .page_bar li .select_page {
    display: block;
    height: 2rem;
    line-height: 2rem;
    font-size: 0.875rem;
    border: 1px solid #eee;
    background: #fff;
    box-sizing: border-box
}

.page_bar .previous a {
    margin-right: 1rem
}

.page_bar .next a {
    margin-left: 1rem
}

.page_bar li .select_page {
    width: 100%
}

.icon_jh, .icon_zd {
    text-align: center;
    margin: 2px 5px 0 0;
    color: #fff;
    font-size: 12px;
    padding: 3px 3px;
    line-height: 1;
    display: inline-block;
    background: #ed4259;
    border-radius: 2px
}

.icon_zd {
    background: #4a90e2
}


.hot_notice span, .items_txt .intro a, .updateTable .author a, .updateTable .style a, .updateTable .time a, .updateTable th {
    color: #888
}

.items_txt .intro a:hover, .rightList .more a:hover, .updateTable .style a:hover, .rightList .on .book_intro .txt:hover {
    color: #d43c33
}

.icon_show:hover, .icon_hide:hover {
    color: #2972cc
}

.channelChapterlist {
    min-height: 600px
}

/* ===== miaowu bookclass-card begin ===== */
/* ================= 书城页（bookclass）书籍列表卡片化 v3 =================
   前版残留问题：
     1. 「最新：」「作者：」前缀被挤到独立成行
     2. 章节/作者字号未受控（被后端更高优先级规则覆盖）
     3. 行高 186px 过大，字段未对齐

   本版方案：
     - tr 用 padding-left 让出左侧区域（序号 44 + 色块 72 + 间距 20 = 136）
     - 右侧三行信息：书名行 / 章节行 / 作者+字数行，全部 display:block 且行高收紧
     - ::before 与内容强制同行：用 white-space:nowrap + display:inline 组合
     - 所有字号显式覆盖，阻断后端继承
   =================================================================== */

/* ---- 容器 ---- */
.channelWrap.channelClassContent .updateTable {
    background: #fff !important;
    border: 1px solid #ededed !important;
    border-radius: 2px !important;
    overflow: hidden !important;
}

.channelWrap.channelClassContent .updateTable table {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
    border-collapse: collapse !important;
}

.channelWrap.channelClassContent .updateTable thead { display: none !important; }

.channelWrap.channelClassContent .updateTable tbody {
    display: block !important;
    width: 100% !important;
}

/* ---- 卡片行 ---- */
.channelWrap.channelClassContent .updateTable tbody tr {
    display: block !important;
    width: 100% !important;
    padding: 18px 20px 18px 136px !important;
    border-bottom: 1px solid #f2f2f2 !important;
    background: #fff !important;
    box-sizing: border-box !important;
    position: relative !important;
    min-height: 132px !important;
    transition: background .15s ease !important;
    font-size: 13px !important;
    line-height: 20px !important;
}

.channelWrap.channelClassContent .updateTable tbody tr:last-child { border-bottom: 0 !important; }
.channelWrap.channelClassContent .updateTable tbody tr:hover { background: #fafafa !important; }

/* ---- 单元格基础：全部取消表格默认，显式定字号颜色 ---- */
.channelWrap.channelClassContent .updateTable tbody td {
    display: block !important;
    float: none !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    background: none !important;
    font-weight: 400 !important;
}

/* ---- 序号：绝对定位 ---- */
.channelWrap.channelClassContent .updateTable tbody td.rank {
    position: absolute !important;
    left: 0 !important;
    top: 22px !important;
    width: 44px !important;
    text-align: center !important;
    font-size: 12px !important;
    line-height: 22px !important;
}

.channelWrap.channelClassContent .updateTable tbody td.rank i {
    display: inline-block !important;
    min-width: 22px !important;
    height: 22px !important;
    line-height: 22px !important;
    font-style: normal !important;
    font-size: 12px !important;
    color: #999 !important;
    background: #f4f4f4 !important;
    border-radius: 2px !important;
    text-align: center !important;
}

.channelWrap.channelClassContent .updateTable tbody td.rank i.num1 { background: #ed4259 !important; color: #fff !important; font-weight: 700 !important; }
.channelWrap.channelClassContent .updateTable tbody td.rank i.num2 { background: #c45c6a !important; color: #fff !important; font-weight: 700 !important; }
.channelWrap.channelClassContent .updateTable tbody td.rank i.num3 { background: #d4a574 !important; color: #fff !important; font-weight: 700 !important; }

/* ---- 分类色块：绝对定位 ---- */
.channelWrap.channelClassContent .updateTable tbody td.style {
    position: absolute !important;
    left: 44px !important;
    top: 18px !important;
    width: 72px !important;
    height: 96px !important;
    margin: 0 !important;
    border-radius: 2px !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, #ff6b81, #ed4259) !important;
    box-sizing: border-box !important;
}

.channelWrap.channelClassContent .updateTable tbody td.style a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-align: center !important;
    line-height: 1.4 !important;
    padding: 0 8px !important;
    text-decoration: none !important;
    writing-mode: horizontal-tb !important;
    word-break: break-all !important;
    box-sizing: border-box !important;
    float: none !important;
}

.channelWrap.channelClassContent .updateTable tbody tr:nth-child(5n+1) td.style { background: linear-gradient(135deg,#ff6b81,#ed4259) !important; }
.channelWrap.channelClassContent .updateTable tbody tr:nth-child(5n+2) td.style { background: linear-gradient(135deg,#8b5cf6,#6d3fd6) !important; }
.channelWrap.channelClassContent .updateTable tbody tr:nth-child(5n+3) td.style { background: linear-gradient(135deg,#3b82f6,#2563eb) !important; }
.channelWrap.channelClassContent .updateTable tbody tr:nth-child(5n+4) td.style { background: linear-gradient(135deg,#10b981,#059669) !important; }
.channelWrap.channelClassContent .updateTable tbody tr:nth-child(5n)   td.style { background: linear-gradient(135deg,#f59e0b,#d97706) !important; }

/* ---- 第 1 行：书名 ---- */
.channelWrap.channelClassContent .updateTable tbody td.name {
    margin: 2px 0 8px !important;
    font-size: 16px !important;
    line-height: 24px !important;
}

.channelWrap.channelClassContent .updateTable tbody td.name a {
    font-size: 16px !important;
    line-height: 24px !important;
    color: #333 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline !important;
    float: none !important;      /* 清除后端 float 残留，避免脱离文档流 */
}

.channelWrap.channelClassContent .updateTable tbody td.name a:hover { color: #ed4259 !important; }

/* ---- 第 2 行：最新章节（前缀与内容强制同行） ---- */
.channelWrap.channelClassContent .updateTable tbody td.chapter {
    margin: 0 0 8px !important;
    font-size: 13px !important;
    line-height: 20px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #999 !important;
}

.channelWrap.channelClassContent .updateTable tbody td.chapter::before {
    content: "最新：";
    color: #bbb !important;
    font-size: 13px !important;
    line-height: 20px !important;
    display: inline !important;
}

.channelWrap.channelClassContent .updateTable tbody td.chapter a {
    color: #999 !important;
    font-size: 13px !important;
    line-height: 20px !important;
    text-decoration: none !important;
    display: inline !important;
    float: none !important;      /* 关键：后端原样式有 float:left，会让 a 脱离文档流，把 ::before 挤到后面 */
    font-weight: 400 !important;
}

.channelWrap.channelClassContent .updateTable tbody td.chapter a:hover { color: #ed4259 !important; }

/* ---- 第 3 行：作者 + 字数（同一行） ---- */
.channelWrap.channelClassContent .updateTable tbody td.author {
    display: inline-block !important;
    font-size: 13px !important;
    line-height: 20px !important;
    color: #666 !important;
    white-space: nowrap !important;
    vertical-align: top !important;
}

.channelWrap.channelClassContent .updateTable tbody td.author::before {
    content: "作者：";
    color: #bbb !important;
    font-size: 13px !important;
    display: inline !important;
}

.channelWrap.channelClassContent .updateTable tbody td.author a {
    color: #666 !important;
    font-size: 13px !important;
    line-height: 20px !important;
    text-decoration: none !important;
    display: inline !important;
    font-weight: 400 !important;
    float: none !important;      /* 清除后端 float 残留，避免脱离文档流 */
}

.channelWrap.channelClassContent .updateTable tbody td.word {
    display: inline-block !important;
    font-size: 13px !important;
    line-height: 20px !important;
    color: #ed4259 !important;
    margin-left: 18px !important;
    white-space: nowrap !important;
    vertical-align: top !important;
}

.channelWrap.channelClassContent .updateTable tbody td.word::before {
    content: "字数：";
    color: #bbb !important;
    font-size: 13px !important;
    display: inline !important;
}

/* ===== miaowu bookclass-card end ===== */

/* ===== miaowu so-tag-compact begin ===== */
/* ============================================================
   书城页筛选条（.so_tag）紧凑化
   ------------------------------------------------------------
   站点：喵呜中文网
   问题：原筛选条 6 组（作品频道/作品分类/是否完结/作品字数/
         更新时间/排序方式）每组独占一行，纵向堆叠近 300px，
         首屏被筛选条吃掉，看不到书。
   目标：压缩为紧凑的两三行「标签 + 选项」横排，
         行内选项改为胶囊（pill）样式，行高收紧。
   说明：仅调整布局密度与视觉，不改变任何筛选功能与 DOM 结构。
   ============================================================ */

/* 筛选区外壳：白卡 + 内边距收紧 */
.channelWrap.classTable {
    background: #fff !important;
    border: 1px solid #ededed !important;
    border-radius: 2px !important;
    padding: 10px 18px 6px !important;
    margin-bottom: 14px !important;
    box-sizing: border-box !important;
}

.channelWrap.classTable .so_tag {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
}

.channelWrap.classTable .so_tag .list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* 每组筛选：一行，标签定宽左对齐，选项横排换行 */
.channelWrap.classTable .so_tag .list li {
    display: block !important;
    width: 100% !important;
    float: none !important;
    height: auto !important;
    min-height: 28px !important;
    line-height: 28px !important;
    padding: 0 !important;
    margin: 0 0 2px !important;
    border: 0 !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
    white-space: normal !important;
}

/* 左侧标签：定宽，保证六行标签竖向对齐 */
.channelWrap.classTable .so_tag .list li .tit {
    display: inline-block !important;
    float: none !important;
    width: 72px !important;
    height: 28px !important;
    line-height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #bbb !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-align: left !important;
    vertical-align: top !important;
    background: none !important;
    border: 0 !important;
}

/* 选项：去掉原样式里的分隔线 / 浮动，改为紧凑胶囊 */
.channelWrap.classTable .so_tag .list li a {
    display: inline-block !important;
    float: none !important;
    height: 24px !important;
    line-height: 24px !important;
    margin: 2px 6px 2px 0 !important;
    padding: 0 11px !important;
    color: #666 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 12px !important;
    vertical-align: top !important;
    white-space: nowrap !important;
    transition: color .18s ease, background-color .18s ease !important;
    box-sizing: border-box !important;
}

.channelWrap.classTable .so_tag .list li a:hover {
    color: #ed4259 !important;
    background: #fff3f5 !important;
}

/* 当前选中项：红字实心胶囊 */
.channelWrap.classTable .so_tag .list li a.on,
.channelWrap.classTable .so_tag .list li a.active {
    color: #fff !important;
    font-weight: 700 !important;
    background: #ed4259 !important;
}

.channelWrap.classTable .so_tag .list li a.on:hover {
    color: #fff !important;
    background: #d93a50 !important;
}

/* 分类两个容器（男频/女频）改为行内铺开 */
.channelWrap.classTable .so_tag .list li#idGirl .so_boy,
.channelWrap.classTable .so_tag .list li#idGirl .so_girl {
    display: inline !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 兜底：清掉后端可能残留的任何 float / 固定宽 */
.channelWrap.classTable .so_tag .list li span,
.channelWrap.classTable .so_tag .list li em,
.channelWrap.classTable .so_tag .list li strong {
    float: none !important;
    vertical-align: top !important;
}

/* ===== miaowu so-tag-compact end ===== */

/* ===== miaowu ranking-layout begin ===== */
/* ============================================================
   榜单页（book_ranking）分栏宽度修复
   ------------------------------------------------------------
   站点：喵呜中文网
   问题（实测）：
     .wrap_left  = 750px   （榜单表格）
     .wrap_right = 250px   （右侧「排行榜」导航卡）
     合计 1000px，而 .box_center 容器宽 1200px
     -> 右侧空出 200px 死白，「排行榜」小卡孤立飘在右上角，
        视觉上像没做完的页面。

   修正：
     左栏 940px + 右栏 240px = 1180px（留 20px 列间距），撑满容器。
     右侧卡改为 sticky，滚动时跟随，符合商业榜单站的交互习惯。
   ============================================================ */

/* 容器：确保左右栏在同一行且撑满 */
.main.box_center .wrap_inner,
.main.box_center .wrap_main {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 左栏：榜单表格 */
.wrap_left {
    width: 940px !important;
    box-sizing: border-box !important;
}

/* 右栏：排行榜导航卡 */
.wrap_right {
    width: 240px !important;
    box-sizing: border-box !important;
}

/* 右侧卡吸顶跟随 */
.wrap_right .wrap_right_cont {
    position: sticky !important;
    top: 16px !important;
}

/* 右侧卡标题：与左栏标题同规格 */
.wrap_right_cont .title {
    padding: 0 16px !important;
}

.wrap_right_cont .title h3 {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #333 !important;
    line-height: 46px !important;
}

/* 排行榜导航项：紧凑列表，最后一项不要底边 */
.rightList2 li {
    border: 0 !important;
}

.rightList2 li a {
    display: block !important;
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 16px !important;
    color: #666 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    background: #fafafa !important;
    border-bottom: 1px solid #f2f2f2 !important;
    transition: color .18s ease, background-color .18s ease !important;
    box-sizing: border-box !important;
}

.rightList2 li a:hover {
    color: #ed4259 !important;
    background: #fff5f6 !important;
}

/* 当前项：左侧红条 + 红字加粗，起点式高亮 */
.rightList2 li a.on {
    color: #ed4259 !important;
    font-weight: 700 !important;
    background: #fff !important;
    box-shadow: inset 3px 0 0 #ed4259 !important;
}

/* 榜单表格：白卡圆角，与全站一致 */
.wrap_left .updateTable,
.wrap_left .rankTable {
    background: #fff !important;
    border-radius: 6px !important;
    padding: 16px 20px 20px !important;
    box-sizing: border-box !important;
}

/* 榜单表头 */
.updateTable thead th {
    color: #999 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    text-align: left !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #ededed !important;
}

/* 榜单行：hover 浅灰，分隔线轻 */
.updateTable tbody tr {
    border-bottom: 1px solid #f5f5f5 !important;
    transition: background-color .15s ease !important;
}

.updateTable tbody tr:hover {
    background: #fafafa !important;
}

/* 前三名序号：金 / 银 / 铜 */
.updateTable tbody td.rank i,
.updateTable tbody tr td:first-child i {
    display: inline-block !important;
    min-width: 22px !important;
    height: 22px !important;
    line-height: 22px !important;
    text-align: center !important;
    font-style: normal !important;
    font-size: 12px !important;
    color: #999 !important;
    background: #f4f4f4 !important;
    border-radius: 2px !important;
}

.updateTable tbody tr:nth-child(1) td.rank i,
.updateTable tbody tr:nth-child(1) td:first-child i {
    background: #e0a33a !important;
    color: #fff !important;
    font-weight: 700 !important;
}

.updateTable tbody tr:nth-child(2) td.rank i,
.updateTable tbody tr:nth-child(2) td:first-child i {
    background: #a8b0bd !important;
    color: #fff !important;
    font-weight: 700 !important;
}

.updateTable tbody tr:nth-child(3) td.rank i,
.updateTable tbody tr:nth-child(3) td:first-child i {
    background: #c08552 !important;
    color: #fff !important;
    font-weight: 700 !important;
}

/* 手机端：右栏下移 */
@media screen and (max-width: 1100px) {
    .wrap_left,
    .wrap_right {
        width: 100% !important;
        float: none !important;
    }

    .wrap_right {
        margin-top: 16px !important;
    }
}

/* ===== miaowu ranking-layout end ===== */

/* ===== miaowu mobile-fix begin ===== */
/* ============================================================
   全站移动端响应式补丁
   ------------------------------------------------------------
   站点：喵呜中文网
   背景：站点此前只在 PC 宽度（1440px）下打磨，移动端未适配。
        实测 iPhone 视口 390px 下的横向溢出元素数量：
          榜单页 223 个（.wrap_left 940px 硬宽）
          阅读页 2949 个（.readMain / .readWrap 900px 硬宽）
          首页/书城 3~7 个（导航项与少量链接）
        起点是完整响应式的，移动端不能横向溢出。

   断点策略（与主流中文小说站一致）：
     >= 1100px   PC 三栏：左栏 + 主内容 + 右侧栏
     <  1100px   平板：右栏下移，左栏全宽
     <   768px   手机：全部单列，导航横滑，字号与间距收紧

   说明：本补丁必须写在最后加载的样式表（book.css）末尾，
        以压过 .channelRankingContent .wrap_left 这类高优先级硬宽规则。
   ============================================================ */

/* ---------- 平板：右栏下移，主栏全宽 ---------- */
@media screen and (max-width: 1100px) {

    .channelRankingContent .wrap_left,
    .channelRankingContent .wrap_right,
    .wrap_left,
    .wrap_right {
        width: 100% !important;
        float: none !important;
        box-sizing: border-box !important;
    }

    .channelRankingContent .wrap_right {
        margin-top: 16px !important;
    }

    .box_center {
        width: 100% !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
    }
}

/* ---------- 手机：单列铺满，收紧留白 ---------- */
@media screen and (max-width: 768px) {

    /* ===== 1. 全局容器与根元素：杜绝横向溢出 ===== */
    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    .box_center,
    .main,
    .main.box_center,
    .wrap_inner,
    .wrap_bg,
    .channelWrap,
    .channelRankingContent,
    .channelClassContent {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        box-sizing: border-box !important;
    }

    /* ===== 2. 阅读页：正文满宽、字号适配拇指阅读 ===== */
    .readMain,
    .readWrap,
    .read_menu,
    .bookNav,
    #readcontent,
    #readcontent .textbox,
    #readcontent .textbox.cf {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        float: none !important;
    }

    #readcontent .textbox.cf {
        margin: 10px auto 24px !important;
        padding: 22px 16px 40px !important;
        border-radius: 0 !important;
    }

    /* 正文排版：手机字号略大、行距略紧，接近起点 App 观感 */
    #readcontent .textbox.cf p,
    #readcontent .textbox.cf div {
        font-size: 17px !important;
        line-height: 1.85 !important;
    }

    /* 阅读页工具条：横向可滑，不换行挤成多行 */
    .read_menu,
    .bookNav {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }

    .read_menu li,
    .bookNav a {
        flex: 0 0 auto !important;
    }

    /* ===== 3. 书城 / 榜单：表格转纵向卡片 ===== */
    .updateTable,
    .updateTable table,
    .updateTable tbody,
    .updateTable tr {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 表头在手机上无意义，隐藏后靠字段前缀说明语义 */
    .updateTable thead {
        display: none !important;
    }

    .updateTable tbody tr {
        display: block !important;
        padding: 12px !important;
        border-bottom: 1px solid #f2f2f2 !important;
    }

    .updateTable tbody td {
        display: block !important;
        float: none !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 0 4px !important;
        text-align: left !important;
        border: 0 !important;
        white-space: normal !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
    }

    /* 书城卡片的类别色块：手机上缩小，不再绝对定位 */
    .channelWrap.channelClassContent .updateTable tbody tr {
        padding: 12px !important;
        min-height: 0 !important;
    }

    .channelWrap.channelClassContent .updateTable tbody td.rank,
    .channelWrap.channelClassContent .updateTable tbody td.style {
        position: static !important;
        display: inline-block !important;
        vertical-align: middle !important;
        margin-right: 10px !important;
    }

    .channelWrap.channelClassContent .updateTable tbody td.rank {
        width: auto !important;
    }

    .channelWrap.channelClassContent .updateTable tbody td.style {
        width: 48px !important;
        height: 64px !important;
        top: auto !important;
        left: auto !important;
    }

    /* ===== 4. 顶栏：logo + 搜索框竖排，隐藏次要入口 ===== */
    .topMain,
    .header .topMain {
        height: auto !important;
        padding: 10px 0 !important;
    }

    .topMain .box_center {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
    }

    .topMain .logo,
    .header .topMain .logo {
        padding: 0 12px 0 0 !important;
        max-width: 140px !important;
    }

    .topMain .logo img {
        height: 34px !important;
    }

    .topMain .searchBar,
    .header .topMain .searchBar {
        display: block !important;
        width: 100% !important;
        margin: 8px 0 0 !important;
        order: 3 !important;
    }

    .topMain .searchBar .search,
    .topMain .searchBar .s_int {
        width: 100% !important;
    }

    /* 我的书架 / 登录注册：右上角保留但缩小 */
    .topMain .bookShelf,
    .header .topMain .bookShelf {
        margin: 0 !important;
        padding: 0 !important;
        height: 34px !important;
    }

    .topMain .bookShelf .sj_link,
    .topMain .bookShelf .user_link,
    .topMain .bookShelf .user_link a {
        height: 34px !important;
        line-height: 34px !important;
        font-size: 13px !important;
    }

    /* 顶部浅色工具条：手机上隐藏（起点 App 同样不展示） */
    .topBar,
    .header .topBar {
        display: none !important;
    }

    /* ===== 5. 主导航：横滑，单行不换行 ===== */
    .mainNav,
    .nav {
        height: auto !important;
        overflow: hidden !important;
    }

    .mainNav .box_center,
    .nav .wrap {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .mainNav .nav,
    .nav ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        width: max-content !important;
        min-width: 100% !important;
    }

    .mainNav .nav li,
    .nav li {
        flex: 0 0 auto !important;
        float: none !important;
    }

    .mainNav .nav li a,
    .nav a {
        padding: 0 14px !important;
        height: 42px !important;
        line-height: 42px !important;
        font-size: 14px !important;
        white-space: nowrap !important;
    }

    /* ===== 6. 书城筛选条：手机上折叠为两行内 ---------- */
    .channelWrap.classTable .so_tag .list li {
        min-height: 0 !important;
        margin-bottom: 0 !important;
    }

    .channelWrap.classTable .so_tag .list li .tit {
        width: 62px !important;
        font-size: 12px !important;
    }

    .channelWrap.classTable .so_tag .list li a {
        height: 22px !important;
        line-height: 22px !important;
        padding: 0 8px !important;
        font-size: 12px !important;
        margin: 2px 4px 2px 0 !important;
    }

    /* ===== 7. 详情页：封面与信息上下堆叠 ===== */
    .bookCover,
    .channelBookInfo {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .bookCover {
        padding: 12px !important;
    }

    .book_info {
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        overflow: hidden !important;
    }

    /* ===== 8. 页脚：横排链接改换行，字号收紧 ===== */
    .footer {
        padding: 16px 12px !important;
        font-size: 12px !important;
    }

    .footer .box_center {
        padding: 0 !important;
    }

    .copyright,
    .footer .copyright {
        line-height: 1.9 !important;
        word-break: break-all !important;
    }

    /* ===== 9. 通用兜底：任何残留硬宽一律解除 ===== */
    img,
    table {
        max-width: 100% !important;
        height: auto !important;
    }

    .fl,
    .fr {
        float: none !important;
    }
}

/* ---------- 超小屏（<=360px）：进一步收紧 ---------- */
@media screen and (max-width: 360px) {
    .mainNav .nav li a,
    .nav a {
        padding: 0 10px !important;
        font-size: 13px !important;
    }

    #readcontent .textbox.cf p,
    #readcontent .textbox.cf div {
        font-size: 16px !important;
    }
}

/* ============================================================
   移动端顶栏与导航 —— 精确修正
   ------------------------------------------------------------
   上一版补丁遗留的两个问题（实测 iPhone 390px）：

   1) 搜索框被隐藏
      成因：base.css 里早前为防顶栏溢出写过
            @media (max-width: 900px) { .searchBar { display:none } }
      但起点手机端是保留搜索框的（置于 logo 下方一行），
      隐藏后完全不像起点。改为显示并铺满一行。

   2) 主导航换行而非横滑
      成因：后端导航结构是 .mainNav > .box_center > ul.nav > li，
            而通用规则里的 .box_center 被赋了 padding 与 width:100%，
            与横滑容器的 padding 处理冲突，导致 ul.nav 的
            width:max-content 未按预期撑开，li 折行。
      改为针对 .mainNav 单独用更高优先级规则处理，
      并用内层滚动容器隔离 padding 问题。
   ============================================================ */

@media screen and (max-width: 900px) {

    /* ---------- 1. 恢复搜索框，铺满一行 ---------- */
    .topMain .searchBar,
    .header .topMain .searchBar,
    .topMain .searchBar.fl {
        display: block !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 0 0 !important;
        padding: 0 !important;
        order: 9 !important;
        box-sizing: border-box !important;
    }

    .topMain .searchBar .search,
    .topMain .searchBar .search.cf {
        width: 100% !important;
        height: 38px !important;
        box-sizing: border-box !important;
    }

    .topMain .searchBar .s_int,
    .header .topMain .searchBar .s_int {
        width: calc(100% - 64px) !important;
        height: 38px !important;
        line-height: 38px !important;
        padding: 0 12px !important;
        border-radius: 19px 0 0 19px !important;
        font-size: 13px !important;
        box-sizing: border-box !important;
    }

    .topMain .searchBar .search_btn,
    .header .topMain .searchBar .search_btn {
        width: 64px !important;
        height: 38px !important;
        line-height: 38px !important;
        border-radius: 0 19px 19px 0 !important;
    }

    .topMain .searchBar .search_btn .icon {
        margin-top: 10px !important;
    }
}

@media screen and (max-width: 768px) {

    /* ---------- 2. 主导航：单行横滑，绝不换行 ---------- */

    /* 外层：允许横向滚动，去掉左右内边距（滚动容器内 padding 会造成裁切） */
    .mainNav {
        height: 44px !important;
        overflow: hidden !important;
        background: #fff !important;
        border-bottom: 1px solid #ededed !important;
    }

    .mainNav > .box_center,
    .mainNav .box_center.cf {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 44px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .mainNav > .box_center::-webkit-scrollbar,
    .mainNav .box_center.cf::-webkit-scrollbar {
        display: none !important;
    }

    /* 内层 ul：按内容宽度撑开，强制不换行 */
    .mainNav ul.nav,
    .mainNav ul#navModule,
    .mainNav .nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        width: max-content !important;
        min-width: 100% !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    /* li 不收缩 */
    .mainNav ul.nav > li,
    .mainNav ul#navModule > li {
        display: block !important;
        flex: 0 0 auto !important;
        float: none !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 导航项：紧凑，单行不折 */
    .mainNav ul.nav > li > a,
    .mainNav ul#navModule > li > a {
        display: block !important;
        height: 44px !important;
        line-height: 44px !important;
        padding: 0 15px !important;
        font-size: 14px !important;
        color: #333 !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        background: transparent !important;
        border-bottom: 2px solid transparent !important;
        box-sizing: border-box !important;
    }

    .mainNav ul.nav > li.on > a,
    .mainNav ul#navModule > li.on > a {
        color: #ed4259 !important;
        font-weight: 700 !important;
        border-bottom: 2px solid #ed4259 !important;
    }

    /* ---------- 3. 书城筛选条：两个「不限」并排的冗余 ---------- */
    /* 「作品分类」行里，男频/女频切换组各带一个「不限」，
       导致同一行出现两个「不限」。手机上空间紧张，隐藏后者。 */
    .channelWrap.classTable .so_tag .list li#idGirl .so_girl,
    .channelWrap.classTable .so_tag .list li#idGirl .so_boy {
        display: inline !important;
    }

    .channelWrap.classTable .so_tag .list li.so_class a[href*="javascript"]:first-of-type {
        opacity: .55 !important;
    }

    /* ---------- 4. 书城卡片：作者与字数分行对齐 ---------- */
    .channelWrap.channelClassContent .updateTable tbody td.author,
    .channelWrap.channelClassContent .updateTable tbody td.word {
        display: block !important;
        margin-left: 0 !important;
        font-size: 13px !important;
        line-height: 20px !important;
    }

    .channelWrap.channelClassContent .updateTable tbody td.word {
        margin-left: 0 !important;
    }
}
/* ===== miaowu mobile-fix end ===== */

/* ===== miaowu mobile-class-card begin ===== */
/* ============================================================
   书城页移动端卡片 —— 细节收尾
   ------------------------------------------------------------
   实测 iPhone 390px 遗留两点：

   1) 类别色块 48x64 太窄，"[古典文学]" 竖排断成 "[古典 / 文学]"
      修正：色块放大到 56x74，字号 11px，并允许两字一行自然折行，
            同时把书名从绝对定位下方提到色块右侧，形成
            「色块 + 文字信息」的横向组合。

   2) 「字数：」前缀前的缩进与「作者：」不齐
      修正：两行都改为左侧对齐的块级元素，前缀自然对齐。

   注意：bookclass.html 只加载 base.css + main.css，
        本补丁必须落在 main.css（书城页不读 book.css）。
   ============================================================ */

@media screen and (max-width: 768px) {

    /* 卡片行：改为「色块 + 信息」两列组合 */
    .channelWrap.channelClassContent .updateTable tbody tr {
        position: relative !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        padding: 14px 12px 14px 76px !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
    }

    /* 序号：左上角小灰块 */
    .channelWrap.channelClassContent .updateTable tbody td.rank {
        position: absolute !important;
        left: 8px !important;
        top: 16px !important;
        width: 20px !important;
        margin: 0 !important;
    }

    /* 类别色块：适当放大，去掉绝对定位改由 padding-left 让位 */
    .channelWrap.channelClassContent .updateTable tbody td.style {
        position: absolute !important;
        left: 32px !important;
        top: 14px !important;
        width: 40px !important;
        height: 54px !important;
        margin: 0 !important;
        border-radius: 3px !important;
    }

    /* 色块内文字：11px，允许折行但不撑破 */
    .channelWrap.channelClassContent .updateTable tbody td.style a {
        font-size: 11px !important;
        line-height: 1.25 !important;
        padding: 0 3px !important;
        word-break: break-all !important;
        white-space: normal !important;
    }

    /* 书名：加粗 15px，紧贴色块右侧 */
    .channelWrap.channelClassContent .updateTable tbody td.name {
        margin: 0 0 6px !important;
        font-size: 15px !important;
        line-height: 22px !important;
    }

    .channelWrap.channelClassContent .updateTable tbody td.name a {
        font-size: 15px !important;
        line-height: 22px !important;
    }

    /* 章节行：单行省略 */
    .channelWrap.channelClassContent .updateTable tbody td.chapter {
        width: 100% !important;
        margin: 0 0 6px !important;
        font-size: 12px !important;
        line-height: 19px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .channelWrap.channelClassContent .updateTable tbody td.chapter::before,
    .channelWrap.channelClassContent .updateTable tbody td.chapter a {
        font-size: 12px !important;
        line-height: 19px !important;
    }

    /* 作者 / 字数：同为块级，左对齐，前缀自然对齐 */
    .channelWrap.channelClassContent .updateTable tbody td.author,
    .channelWrap.channelClassContent .updateTable tbody td.word {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 12px !important;
        line-height: 19px !important;
        text-align: left !important;
    }

    .channelWrap.channelClassContent .updateTable tbody td.author::before,
    .channelWrap.channelClassContent .updateTable tbody td.word::before,
    .channelWrap.channelClassContent .updateTable tbody td.author a {
        font-size: 12px !important;
        line-height: 19px !important;
    }

    .channelWrap.channelClassContent .updateTable tbody td.word {
        color: #ed4259 !important;
    }
}

/* ===== miaowu mobile-class-card end ===== */

/* ===== mobile class overflow fix begin ===== */
/* 移动端：卡片内的长章节标题必须截断，否则会把整行撑出视口。
   实测案例（iPhone 390）：书城卡片「第30回 似人似鬼孽满受诸刑 半是半非书终成一梦」
   宽 277px + 左侧偏移 133px = 右边界 410px，溢出 20px。 */
@media screen and (max-width: 768px) {
    .channelWrap.channelClassContent .updateTable tbody td.chapter,
    .channelWrap.channelClassContent .updateTable tbody td.chapter a,
    .channelWrap.channelRankingContent .updateTable tbody td.chapter,
    .channelWrap.channelRankingContent .updateTable tbody td.chapter a,
    .channelWrap .updateTable tbody td.chapter,
    .channelWrap .updateTable tbody td.chapter a {
        max-width: 100% !important;
        width: auto !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        display: block !important;
        box-sizing: border-box !important;
    }
    /* 兜底：任何卡片里的长文本链接都不许横穿视口 */
    .channelWrap a {
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }
}
/* ===== mobile class overflow fix end ===== */