@font-face {
    font-family: 'Archivo';
    src: url("../font/Archivo.woff2");
}

*,
*::before,
*::after {
    box-sizing: border-box
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
pre,
ul,
li {
    margin: 0;
    padding: 0
}

ul,
ol,
li {
    list-style: none
}

a:not([class]) {
    text-decoration-skip-ink: auto
}

em,
i {
    font-style: normal;
}

img {
    display: block;
    height: auto;
    max-width: 100%
}

li img,
p img {
    display: inline-block;
    vertical-align: sub
}

input,
button,
textarea,
select {
    font: inherit;
    letter-spacing: inherit;
    word-spacing: inherit
}

.overflow-hidden {
    overflow: hidden;
}

:root {
    --color-core: #cc0000;
    --color-core-bg: #f2f2f2;
    --color-core-header: #3b3b3b;
    --color-header-text: #fff;
    --color-core-text: #191919;
    --color-stroke: #d2d3d7;
    --color-core-a: #333;
    --color-bg: #fff;
    --color-border-tb: #e4e4df;
    --color-lz: #757575;
    --color-wj: #699f00;
    --color-btn-solid-bg: #1bb76e;
    --color-new-chapter: #117864;
    --color-author: #777;
    --color-ac: #699f00;
    --color-app-icon: #a4c639;
    --color-app-a: #929292;


    --width-core-division: .5em;
    --width-core-division-double: 1em;
    --width-core-division-trip: 1.5em;
    --width-core-padding: 0 .5em;

    --line-division-border: 1px solid #f7f7f7
}

@font-face {
    font-family: "icon";
    /* Project id 3545497 */
    src:
        url('data:font/ttf;charset=utf-8;base64,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') format('truetype');
}

.icon {
    font-family: "icon" !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-end:before {
    content: "\e742";
}

.icon-category:before {
    content: "\e67c";
}

.icon-home::before {
    content: "\e6b8";
}

.icon-rank::before {
    content: "\e722";
}

.icon-my::before {
    content: "\e78b";
}

.icon-menu::before {
    content: "\e602";
}

.icon-search::before {
    content: "\e620";
}

.icon-close::before {
    content: "\e60e";
}

.icon-arrow-d::before {
    content: "\e606";
}

.icon-arrow-r::before {
    content: "\e60c";
}

.icon-android::before {
    content: "\e61d";
}

.icon-ios::before {
    content: "\e6d9";
}



@font-face {
    font-family: "readicon";
    /* Project id 3560620 */
    src: url('data:font/ttf;charset=utf-8;base64,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') format('truetype');
}

.readicon {
    font-family: "readicon" !important;
    font-size: 1.125rem;
    font-style: normal;
}

.icon-arrow-r::before {
    content: "\e60c";
}

.icon-return::before,
icon-arrow-l::before {
    content: "\e60d";
}

.icon-readset::before {
    content: "\e62a";
}

.icon-catalog::before {
    content: "\e628";
}

.icon-check:before {
    content: "\e62c";
}

.icon-day::before {
    content: "\e629";
}

.icon-night::before {
    content: "\e684";
}

.icon-progress::before {
    content: "\e61e";
}

.icon-up::before {
    content: "\e610";
}

.icon-down::before {
    content: "\e60e";
}

body {
    font-family: 'Archivo', "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
    line-height: 1.5;
    font-size: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
    overflow-x: hidden;
    /* background-color: #32302a; */
    outline: 0;
}

a {
    color: #aaa;
    outline: none;
    text-decoration: none;
}

em {
    color: var(--color-ac);
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 3em;
    padding: 0 clamp(1.375rem, 1.2rem + 0.89vw, 2rem);
    line-height: 1;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    border-bottom: 1px solid rgba(244, 81, 30, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    color: var(--color-header-text);
}

.header_box_contaienr {
    position: sticky;
    top: 0;
    z-index: 9;
}

.logo {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.logo svg {
    width: 1.8em;
    height: 1.8em;
}

.logo-n {
    flex: 1;
}

.logo-n a {
    margin-left: var(--width-core-division);
    color: var(--color-header-text);
}

.search {
    flex: 2;
}

.s-inp {
    border-radius: 3px;
    position: relative;
    display: flex;
    max-width: 20em;
}

.s-inptext {
    width: 14em;
    border: 0;
    background: #fff;
    color: hsl(0, 0%, 24%);
    height: 2em;
    padding: var(--width-core-padding);
    outline: 0;
    background-clip: padding-box;
}

.s-button {
    width: 100%;
    color: #fff;
    border: 0;
    background: #1d1b16;
    font-size: 1em;
    height: 2em;
    margin: 0;
    text-align: center;
    cursor: pointer;
}

.user {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.user a {
    color: var(--color-header-text);
}



.search .icon-close {
    display: none;
}

header .s-show {
    display: flex;
    width: 100%;
    max-width: 750px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    line-height: 1;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    border-bottom: 1px solid rgba(244, 81, 30, 0.2);
    min-height: 3em;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.s-show .icon-close {
    display: block;
    margin: 0 var(--width-core-division-double);
    color: var(--color-header-text);
}

.n-nav .n-close {
    display: none
}

.n-show .n-nav .n-close {
    display: block;
}


.n-show .icon-close {
    position: absolute;
    top: 0.2em;
    right: 0.2em;
    font-size: 2em;
}

.n-show:before {
    opacity: 1;
}

.n-show {
    display: block;
}

.n-show .n-nav {
    opacity: 1;
    left: 0;
    transform: translateX(0);
    transition: transform 200ms linear;
}

main {
    margin: 0 auto;
    width: 100%;
    z-index: -1;
}

.panel {
    width: 100%;
    color: #fff;
    padding: 1em 0.5em 1em 1em;
}

.panel-g {
    margin-top: var(--width-core-division-double);
}

.panel h2,
.panel h1 {
    font-size: 20px;
    /* min-height: 2em; */
}

.u-img {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
}

.u-img li,
.u-list li {
    margin-top: var(--width-core-division-double);
}

.u-img img,
.u-list img {
    box-shadow: 1px 2px 2px rgb(0 0 0 / 30%);
    display: block;
    margin: 0 auto 1em;
    width: 7.5em;
    height: 10em;
}

.bname {
    font-size: 1em;
    overflow: hidden;
    /* height: 1.4em; */
}

.bname a {
    color: var(--color-core);
}

.u-img .bauthor {
    font-size: .8rem;
}

.u-list li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: var(--line-division-border);
}

.u-list li:last-child {
    border-bottom: 0;
}

.u-list .bookshelf-del,
.u-list .record-del {
    color: var(--color-core);
    padding-right: var(--width-core-division);
}

.l-text {
    margin-left: var(--width-core-division-double);
    display: flex;
    justify-content: flex-start;

    width: calc(100vw - 8em);
}

.l-p1 {
    font-size: .8em;
    color: var(--color-core-a);
}

.l-p1 span {
    padding-right: var(--width-core-division-double);
}

.l-p1 .bauthor:after,
.l-p1 .size:after {
    content: "";
    border-right: 1px solid var(--color-border-tb);
    padding-left: var(--width-core-division-double);
}

.bauthor a {
    color: var(--color-author);
}

.l-p2 {
    height: 8em;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    overflow: hidden;
    font-size: .8em;
    padding: var(--width-core-division-double) 0;
}

.l-last {
    font-size: .8em;
    color: var(--color-core-a);
}

.l-last .l-time {
    padding-left: var(--width-core-division);
}

.lz {
    color: var(--color-lz);
}

.end {
    color: var(--color-wj);
}

.l-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.l-btn span {
    width: 8em;
    margin-bottom: var(--width-core-division-double);
}

.btn-solid {
    /* background-color: var(--color-btn-solid-bg); */
    color: #fff;
    font-size: .7em;
    background-clip: padding-box;
    text-align: center;
    border-radius: 3px;
    padding: var(--width-core-division-double);
}

.btn-solid a {
    color: var(--color-header-text);
}

.btn-normal {
    border: 1px solid var(--color-btn-solid-bg);
    color: var(--color-btn-solid-bg);
    font-size: .6em;
    text-shadow: 0px 0px 0px #f2f2f2;
    background-clip: padding-box;
    text-align: center;
    border-radius: 3px;
    padding: .9em .4em;
}

.btn-normal a {
    color: var(--color-btn-solid-bg);
}



.u-line li {
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    justify-content: space-between;
    padding-top: var(--width-core-division);
}

.l-nchapter a {
    color: var(--color-new-chapter);
}

.l-ntime {
    color: var(--color-core-a);
}

.l-author {
    height: 1.4em;
    overflow: hidden;
}

footer {
    padding: var(--width-core-division-double);
    position: relative;
    width: 100%;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    border-top: 1px solid rgba(244, 81, 30, 0.2);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: #fff;
    font-size: 13px;
}

.f-nav {
    display: flex;
    justify-content: center;
}

.f-nav a {
    margin-right: var(--width-core-division-double);
}




.breadcrumbs {
    font-size: 0.875rem;
    min-height: 2em;
    margin-bottom: 1.5rem;
    padding: 0.5rem 0.2rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.breadcrumbs ul {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    /* gap: 0.5rem; */
}

.breadcrumbs li {
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.breadcrumbs li a {
    color: #b8b8b8;
    text-decoration: none;
    transition: color 0.3s ease;
    padding: 0 0.5rem;
    border-radius: 6px;
}
.breadcrumbs li:last-child {
    overflow: hidden;
}

.breadcrumbs li:last-child a {
    color: #ffffff;
    font-weight: 500;
}

.breadcrumbs li+li::before {
    content: "";
    display: block;
    width: 8px;
    min-width: 8px;
    height: 8px;
    border-top: 2px solid rgba(255, 255, 255, 0.3);
    border-right: 2px solid rgba(255, 255, 255, 0.3);
    transform: rotate(45deg);
    opacity: 0.6;
    margin: 0 4px 0 3px;
}

.novel {
    display: grid;
    margin-top: var(--width-core-division-double);
}

.n-img {
    position: relative;
}

.n-img img {
    width: 7.5em;
    height: 10em;
}

.n-text {
    margin-left: var(--width-core-division);
    color: var(--color-core-a);
}

.n-text h1 {
    font-size: 1.2em;
    color: var(--color-core);
    overflow: hidden;
}

.n-text p {
    margin-top: var(--width-core-division);
    overflow: hidden;
    height: 1.4em;
    font-size: .8em;
}

.nsort::after {
    content: "";
    border-right: 1px solid var(--color-border-tb);
    padding-left: var(--width-core-division);
    font-size: .8em;
}

.trend::before {
    content: "";
    border-left: 1px solid var(--color-border-tb);
    padding-right: var(--width-core-division);
    font-size: .8em;
}

.novel .trend,
.novel .lz,
.novel .end {
    padding-left: var(--width-core-division);
}

.n-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.n-btn span {
    margin-top: var(--width-core-division-double);
}

.n-btn span a {
    display: block
}

.pintro {
    font-size: 0.95rem;
    line-height: 1.8;
    padding: 1.5rem;
    text-align: justify;
    position: relative;
    color: #cccccc;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.c-more {
    position: absolute;
    bottom: 0.01rem;
    right: 0.04rem;
    color: var(--color-core);
}

#intro.showmore {
    height: auto;
    max-height: none;
}

/* Catalog Styles */
.catalog {
    position: relative;
    margin-bottom: 1.5rem;
}

.catalog .c-text {
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    display: inline-block;
}

.catalog .sub-text {
    margin-left: var(--width-core-division);
    overflow: hidden;
    max-width: 12em;
    height: 1.2em;
    position: absolute;
    top: 1px;
    font-weight: 400;
    color: #ffffff;
}

.catalog .sub-text-r {
    font-size: 0.875rem;
    color: #b8b8b8;
    position: absolute;
    right: 18px;
    top: 3px;
    font-weight: 500;
}

.catalog .icon-arrow-r {
    position: absolute;
    top: 1px;
    right: 4px;
    color: #b8b8b8;
    font-weight: 400;
}

/* Chapter List Styles */
.u-chapter {
    display: grid;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0.5rem 0;
    overflow: hidden;
}

.u-chapter li {
    padding: 0.875rem 1.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
    position: relative;
}

.u-chapter li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #f4511e, #ff6b3d);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.u-chapter li:last-child {
    border-bottom: none;
}

.u-chapter li a {
    color: #ffffff;
    text-decoration: none;
    display: block;
    font-size: 0.95rem;
    line-height: 1.5;
    transition: all 0.3s ease;
}

.u-chapter li:hover::before {
    opacity: 1;
}

/* Catalog All Link */
.catalog-all {
    margin-top: 0.5rem;
    padding: 1rem !important;
    border-radius: 12px;
}

.catalog-all a {
    color: #f4511e !important;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    display: inline-block;
    padding: 0.5rem 1.5rem;
    background: rgba(244, 81, 30, 0.1);
    border-radius: 15px;
    border: 1px solid rgba(244, 81, 30, 0.3);
    transition: all 0.3s ease;
}

.clist {
    display: none;
}

/* Catalog Top Bar Styles */
.s-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.s-title {
    font-size: 0.875rem;
    color: #b8b8b8;
}

.s-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 1rem;
    background: rgba(244, 81, 30, 0.1);
    border-radius: 10px;
    border: 1px solid rgba(244, 81, 30, 0.2);
    text-decoration: none;
    transition: all 0.3s ease;
}

#s-icon {
    width: 14px;
    height: 14px;
    margin-right: 0.5rem;
    position: relative;
    top: 1px;
}

.s-no-reverse {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABFUExURUdwTLi4uB8fHy0tLb+/v9vb2x8fH7m5uSEhIR8fH7m5ub+/vx8fH7i4uLi4uLi4uCAgILm5ubi4uB8fHx8fHx8fH7i4uPboej8AAAAVdFJOUwCnvwogA3LbLs6rCpLEkI6vZ/DqKMsPV9AAAABySURBVHja7c45EoAgFARRcFfclX//o0oZGNAUWGVAYkcTvGBUtppjfXYrUgWNtfYEorEdEAwRDRFN0QPRlEQ0Ko7G2xB5ypkkUs6kkfrRN2ReoHkySTSLeIpoERFdxxENkaYhggmjAQYIhoiGaNvdn1xdHlQRVjqEnzMAAAAASUVORK5CYII=) 100%/100% no-repeat;
}

.s-reverse {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABIUExURUdwTLi4uB8fHy0tLR8fH8nJyR8fH7m5uSEhIb+/vx8fH7i4uLm5ubi4uLi4uB8fH7i4uLm5uR8fHyAgILi4uCAgIB8fH7i4uCb0D+YAAAAWdFJOUwCpvwrNBXHbLiCSxJCO8OqiZiiv1dantLmvAAAAcUlEQVR42u3KNw6AQBDAwD1yzuz+/6egk2gw4pAoaHDlYuSz0qEbjy9Uk0vjzBYgGsuBaIhoiGgcEE1bAtFIANVmjRCdVSNhlEoA+X70DsUPUBxVIbQb1eoeeaPZPaIhWmmIFIaIhoiGaKIhkrnP5Ks27KUR2ehySvkAAAAASUVORK5CYII=) 100%/100% no-repeat;
}

.s-text {
    font-size: 0.875rem;
    color: #f4511e;
    font-weight: 500;
}

.s-topbar .sub-text-r {
    font-size: 0.875rem;
    color: #b8b8b8;
    font-weight: 500;
}

#goBack {
    position: fixed;
    z-index: 999;
    right: 24px;
    bottom: 24px;
    text-align: center;
    background: #fbfbfb;
    cursor: pointer;
    width: 44px;
    height: 44px;
    line-height: 44px;
    border-radius: 50%;
    display: none;
}

#goBack::before {
    font-family: "icon" !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: initial;
    display: inline-block;
    content: "\e713";
    font-size: 24px;
    color: #515151;
}

.s-box {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.s-box span {
    font-weight: 700;
    margin-right: var(--width-core-division);
}

.s-box a {
    margin-top: var(--width-core-division);
    margin-right: var(--width-core-division);
}

.ac {
    background: var(--color-ac);
    color: var(--color-header-text);
    padding: 0 var(--width-core-division);
}


.page {
    text-align: center;
    margin: var(--width-core-division-double) auto;
}

.pagei {}

.pagei li {
    margin: 0 3px;
    padding: 0 var(--width-core-division);
    line-height: 27px;
    height: 27px;
    background: #1d1b16;
    border-radius: 10px;
    display: inline-block;
}

.pagei .active {
    background: rgba(244, 81, 30, 0.1);
    color: #f4511e;
    border: 1px solid rgba(244, 81, 30, 0.3);
}

.pagei .active a {
    color: inherit;
}


.form-group {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form-group p {
    margin-top: var(--width-core-division-double);
}

.form-group input {
    min-width: 16em;
    border: 1px solid #ccc;
    padding: var(--width-core-division);
    border-radius: 3px;
}

.btn {
    border: 0;
    background-color: var(--color-btn-solid-bg);
    color: var(--color-bg);
    text-shadow: 0px 0px 0px #f2f2f2;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    height: 2em;
    line-height: 2em;
    min-width: 16em;
    text-align: center;
    border-radius: 3px;
}

.whitespace a {
    color: var(--color-stroke);
}

.loading-wrap {
    margin-top: var(--width-core-division-double);
    display: flex;
    justify-content: space-around;
    align-items: center;
}

a.reg {
    color: var(--color-btn-solid-bg);
}

.input-ab {
    position: relative;
}

.vercode {
    position: absolute;
    right: 0;
    height: 2.6em;
    width: 4em;
}

.tags em:first-child {
    margin-left: 0.3em;
}

.tags em {
    margin-right: 0.3em;
}

.tags a {
    color: var(--color-ac);
}





.loading-block {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    background: rgba(0, 0, 0, 0.4);
    background: transparent;
}

.loading-block .loading-msg {
    top: 10em;
    padding: 0.5em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-align: center;
    text-align: center;
    background: rgba(0, 0, 0, 0.65);
    border-radius: 3px;
    color: #fff;
    position: absolute;
}

.form-group .disabled {
    border: 0;
    color: #bbb;
    background: #e9ebec;
}


.disabled {
    pointer-events: none;
}

.s-line li {
    padding: var(--width-core-division) 0;
    border-bottom: 1px solid var(--color-border-tb);
}



.islogin::before {
    content: "";
    border: 1px solid #e9e9e9;
    border-radius: 50%;
    width: 1.5em;
    height: 1.5em;
    position: absolute;

}


.readend {
    margin-top: var(--width-core-division-double);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.readend .btn {
    padding: 0 var(--width-core-division);
}



.app {
    margin-top: var(--width-core-division-double);
}

.app .icon {
    color: var(--color-app-icon);
    margin-right: var(--width-core-division-double);
}

.app a {
    color: var(--color-app-a);
}

@media (max-width: 360px) {

    .n-btn .btn-solid {
        min-width: 11em;
    }
}

.wide-text,
.search {
    display: none;
}

.logo-n {
    display: none;
}

.page-n {
    display: block;
    font-weight: 800;
    font-size: 18px;
}

.menu,
.i-search {
    display: block;
    color: var(--color-header-text);
}

.menu {
    margin-right: var(--width-core-division-double);
}

.i-search {
    margin-left: var(--width-core-division-double);
}

nav {
    display: none;
}

nav::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, .4);
    backdrop-filter: blur(5px);
    z-index: 1;
}

.n-nav {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    box-shadow: 2px 0 12px rgb(0 0 0 / 40%);
    /* background: var(--color-core-bg); */
    position: absolute;
    height: 100vh;
    width: 15em;
    left: 0;
    transform: translateX(-100%);
    transition: transform 200ms linear;
    top: 0;
    opacity: 0;
    z-index: 9;
}

.n-nav span {
    padding: var(--width-core-division-double) 0;
    color: #fff;
}

.n-nav a {
    color: #fff;
    padding-left: var(--width-core-division);
}

.n-nav .n-close {
    /* color: var(--color-core-header); */
}

.u-img img {
    width: 6.2em;
    height: 8.2667em;
}

.u-list img {
    width: 4.8em;
    height: 6.4em;
}

.u-img .bname {
    max-width: 5em;
}

.l-text {
    flex-direction: column;
}

.l-p1,
.l-last {
    padding: 4px 0;
}

.l-p2 {
    height: 1.6em;
    padding: 0;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

.l-nt {
    display: none;
}

.l-btn,
.n-btn {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}

.l-btn span {
    width: 11em;
    padding: 0.3em;
    margin-right: var(--width-core-division-double);
}

.n-btn .btn-share {
    min-width: 3em;
}

.l-name {
    max-width: 10em;
}

.l-chapter,
.l-time {
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.u-line li {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
}

.l-nchapter,
.l-ntime {
    display: none;
}

.novel {
    grid-template-columns: 7.5em 2fr;
}


.n-btn span {
    min-width: 10em;
    margin-right: var(--width-core-division);
}

.u-chapter {
    grid-template-columns: 1fr;
}

.u-chapter li {
    font-size: 1em;
}

.page .p-m {
    display: none;
}

.islogin::before {
    top: 0.8em;
    right: 2.9em;
}

.dropload-up,
.dropload-down {
    position: relative;
    height: 0;
    overflow: hidden;
    font-size: 12px;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.dropload-down {
    height: 50px;
}

.dropload-refresh,
.dropload-update,
.dropload-load,
.dropload-noData {
    height: 50px;
    line-height: 50px;
    text-align: center;
}

.dropload-load .loading {
    display: inline-block;
    height: 15px;
    width: 15px;
    border-radius: 100%;
    margin: 6px;
    border: 2px solid #666;
    border-bottom-color: transparent;
    vertical-align: middle;
    -webkit-animation: rotate 0.75s linear infinite;
    animation: rotate 0.75s linear infinite;
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }

    50% {
        -webkit-transform: rotate(180deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.dialog.show {
    display: -webkit-box;
}

.dialog {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    background: rgba(0, 0, 0, 0.4);
    display: none;
}

.dialog-cnt {
    border-radius: 3px;
    width: 296px;
    -webkit-background-clip: padding-box;
    pointer-events: auto;
    background-color: #fff;
    position: relative;
    border-top: 4px solid #1bb761;
    -webkit-box-sizing: border-box;
    color: #000;
}

.dialog-bd {
    min-height: 46px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    padding: 18px 28px 18px 28px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    -webkit-box-orient: vertical;
}

.dialog-ft {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    display: -webkit-box;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-align: center;
    border-top: 1px solid #e9e9e9;
    height: 45px;
    line-height: 45px
}

.dialog-ft button {
    font-size: .5em;
    text-align: center;
    width: 100%;
    line-height: 45px;
    display: block;
    margin: 0;
    -webkit-box-flex: 1;
    border: 0;
    background: none;
}

.dialog-ft button:active {
    background-color: rgba(0, 0, 0, 0.1)
}

.dialog-ft button:first-child {
    border-bottom-left-radius: 3px
}

.dialog-ft button:last-child {
    border-bottom-right-radius: 3px
}

.dialog-ft button:first-child:nth-last-child(2) {
    position: relative
}

.dialog-ft button:first-child:nth-last-child(2):after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    display: block;
    width: 1px;
    height: 100%;
    border-right: 1px #e9e9e9 solid
}

@media screen and (-webkit-min-device-pixel-ratio:2) {
    .dialog-ft {
        position: relative;
        border: 0;
        background-position: left top;
        background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, transparent), color-stop(0.5, #e9e9e9));
        background-repeat: repeat-x;
        -webkit-background-size: 100% 1px
    }

    .dialog-ft button:first-child:nth-last-child(2):after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        display: block;
        width: 1px;
        height: 100%;
        border-right: 0;
        background-position: right top;
        background-image: -webkit-gradient(linear, left top, right top, color-stop(0.5, transparent), color-stop(0.5, #e9e9e9));
        background-repeat: repeat-y;
        -webkit-background-size: 1px 100%
    }
}

.NovelDetailsCard_share_cGz5b {
    display: flex;
    gap: .5em;
}

.NovelDetailsCard_share_cGz5b svg {
    display: block;
    width: 1.2em;
}

.read-night {
    background-color: #1a1a1a;
}

.read-night .page-d,
.read-night .page-d-top {
    background: #1a1a1a !important;
    color: rgba(255, 255, 255, .5) !important;
}

.read-night .chapter-act a {
    background: #2a2a2a !important;
    color: rgba(255, 255, 255, .4);
}

.read-night .page-d-name {
    color: rgba(255, 255, 255, .4);
}

/* Read Page Styles */
.page-d {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    position: relative;
    border-radius: 15px;
    padding: 1rem;
    /* margin: 1rem auto; */
    max-width: 100%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.skin-default .page-d {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    color: #fff;
}

.skin-blue .page-d,
.skin-blue .page-d-top {
    background: #c3d4e6;
}

.skin-green .page-d,
.skin-green .page-d-top {
    background: #d1edd1;
}

.skin-light .page-d,
.skin-light .page-d-top {
    background: #e6e6e6;
}

.page-content {
    min-height: calc(100vh - 44px);
    line-height: 2;
    margin: 0;
    font-size: 1.125rem;
    text-align: justify;
    overflow: hidden;
    color: #e0e0e0;
}

.page-content h1 {
    line-height: 1.6;
    font-size: 1.5rem;
    margin: 1rem 0 1.5rem;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(244, 81, 30, 0.3);
}

.page-content section {
    padding-top: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.page-content p {
    padding: 0.5rem 0;
    text-indent: 2em;
    color: #e0e0e0;
    line-height: 2;
}

.chapter-act {
    display: flex;
    /* padding: 1.5rem 1rem; */
    flex-direction: row;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    /* margin: 2rem 0; */
}

.chapter-act a {
    flex: 1;
    margin: 0;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(244, 81, 30, 0.1) 0%, rgba(26, 27, 22, 0.3) 100%);
    border-radius: 15px;
    display: block;
    padding: 0.875rem 1.5rem;
    text-decoration: none;
    color: #f4511e;
    transition: all 0.3s ease;
    border: 1px solid rgba(244, 81, 30, 0.15);
}

/* dasdasdasd */

.page-opt {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .15s, visibility .15s;
    transition: opacity .15s, visibility .15s;
}

.page-opt {
    z-index: 2;
}

.page-opt {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 750px;
    height: 100%;
    z-index: 9;
}

.page-opt .icon-return {
    position: absolute;
    padding: 0 1.25rem;
    left: -0.625rem;
    top: .625rem;
}

.page-opt-header,
.read-opt-more,
.read-opt-footer {
    background-color: rgba(0, 0, 0, .8);
    color: #fff;
    border-bottom: 0;
    -webkit-transition: opacity .15s, -webkit-transform .15s, visibility .15s;
    transition: opacity .15s, transform .15s, visibility .15s;
}

.active>.page-opt-header,
.active>.read-opt-footer {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.read-opt-footer {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}

.page-opt-header {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    background-image: none;
}

.page-opt-header {
    height: 2.75rem;
    box-sizing: border-box;
    position: relative;
}

.page-opt-header h2 {
    line-height: 1.25rem;
    text-align: center;
    margin: 0 auto;
    display: block;
    width: 50%;
    font-size: .75rem;
    overflow: hidden;
    padding-top: .75rem;
}

#btn-more {
    right: .625rem;
    top: .5rem;
}

.read-opt-more.active {
    -webkit-transition: none;
    transition: none;
    visibility: visible;
    opacity: 1;
}

.read-opt-more {
    position: absolute;
    right: 0;
    top: 2.75rem;
    padding-top: .625rem;
    visibility: hidden;
    opacity: 0;
}

.read-opt-more a {
    display: block;
    height: 1.5rem;
    padding: .0625rem .625rem;
    font-size: .75rem;
    color: #fff;
}

.read-addbookshelf,
.read-next,
.read-pre {
    position: absolute;
    line-height: 2.0625rem;
    font-size: .75rem;
    text-shadow: 0 0 0 #f2f2f2;
    background: rgba(0, 0, 0, .8);
    color: rgba(255, 255, 255, .7);
    padding: 0 .625rem 0 .9375rem;
}

.read-addbookshelf {
    border-radius: 1.25rem 0 0 1.25rem;
    top: 5.3125rem;
    right: 0;
}

.read-next {
    border-radius: 1.25rem 0 0 1.25rem;
    top: 50%;
    right: 0;

}

.read-pre {
    border-radius: 0 1.25rem 1.25rem 0;
    top: 50%;
    left: 0;
}

.read-opt-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.75rem;
    text-align: center;
}

.btn-group {
    display: table;
    width: 100%;
    table-layout: fixed;
    margin-left: auto;
    margin-right: auto;
}


.read-opt-footer i {
    color: #fff;
    font-size: 1rem;
}

.btn-group-cell {
    display: table-cell;
    font-size: 100%;
    font-weight: 400;
}

.read-opt-footer-h {
    font-size: .75rem;
    font-weight: 400;
    line-height: 1;
    position: relative;
    color: #fff;
    text-shadow: 0px 0px 0px #f2f2f2;
}

.read-opt.active {
    -webkit-transition: none;
    transition: none;
    visibility: visible;
    opacity: 1;
}

#page-opt-prog {
    z-index: 20;
}

.read-opt {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2.75rem;
    background-clip: padding-box;
    -webkit-transform: translateY(.5px);
    transform: translateY(.5px);
    visibility: hidden;
    opacity: 0;
}

.read-opt {
    background-color: rgba(0, 0, 0, .9);
    color: #fff;
    border-bottom: 0;
    -webkit-transition: opacity .15s, -webkit-transform .15s, visibility .15s;
    transition: opacity .15s, transform .15s, visibility .15s;
}

.read-prog-info {
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.read-prog-prev {
    left: .625rem;
}

.read-prog-next {
    right: .625rem;
}

.read-prog-next,
.read-prog-prev {
    position: absolute;
    height: 1.5rem;
    padding: .625rem 0;
    font-size: .75rem;
    top: 0;
}

.read-prog-next i,
.read-prog-prev i {
    font-size: .75rem
}

.read-prog-info a {
    color: #fff;
}

.read-prog-val {
    margin: 0 .625rem;
    font-size: .75rem;
    padding: .625rem 0 .3125rem;
    text-align: center;
}

.ell {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.read-prog-val output {
    font-size: .6875rem;
    opacity: .8;
}

output {
    speak: digits;
}

#pager .icon-arrow-l,
#pager .icon-arrow-r {
    font-size: 20px;
}

.read-set-font {
    padding: .625rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}


.read-font-down,
.read-font-up {
    width: .625rem;
    text-align: center;
    position: absolute;
    height: 1.5rem;
    padding: .3125rem 0;
    top: .25rem;
    color: #fff;
}

.read-font-down .icon,
.read-font-up .icon {
    font-size: 1.375rem;
}

.read-font-down {
    left: .3125rem;
}

.read-font-up {
    right: .9375rem;
}

.read-font-bar {

    padding: .625rem 0;
    margin: 0 1.875rem;
}

.range {
    height: .875rem;
    display: inline;
    position: absolute;
}

.range-track {
    height: .125rem;
    margin-top: .375rem;
    border-radius: .625rem;
    background-color: rgba(255, 255, 255, .2);
    border-left: 0 solid #f01742;
    text-align: left;
}

.range-thumb {
    position: absolute;
    width: .75rem;
    height: .75rem;
    border: .375rem solid transparent;
    margin: -0.6875rem 0 0 -0.75rem;
    border-radius: .2rem;
    background-color: #f01742;
    background-clip: content-box;
    -webkit-transition: border-color .15s, background-color .15s;
    transition: border-color .15s, background-color .15s;
}

.read-font-bar>input {
    display: block;
    height: .14rem;
}

.read-font-bar>input {
    width: 100%;
    margin: 0;
}

#readFontRange {
    color: #fff;
    margin-top: .25rem;
    border-radius: .9375rem;
    -webkit-appearance: none;
    height: .125rem;
    background: -webkit-linear-gradient(#f01742, #f01742) no-repeat, #ddd;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 1.375rem;
    width: 1.375rem;
    background: #fff;
    border-radius: 50%;
    border: solid 1px #ddd;
}

.read-set-skin {
    padding: 0 10px;
    padding-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.read-set-cell>input {
    opacity: 0;
    width: 100%;
    height: 100%;
    width: calc(100% - 1.25rem);
    position: absolute;
    margin: 0;
    z-index: 1;
}

:checked+.read-skin-blue,
:checked+.read-skin-default,
:checked+.read-skin-green,
:checked+.read-skin-light {
    color: #f01742;
}

.read-set-cell>label {
    display: block;
    margin-right: .625rem;
}

.read-skin-default {
    background: #f5efda;
    background-size: 100%;
}

.read-skin-blue,
.read-skin-default,
.read-skin-green,
.read-skin-light {
    height: 1.875rem;
    margin: .625rem .625rem .625rem 0;
    border-radius: 3px;
    box-shadow: inset 0 0.5px, inset 0.5px 0, inset -0.5px 0, inset 0 -0.5px;
    color: transparent;
    -webkit-transition: color .15s;
    transition: color .15s;
    position: relative;
}

.read-set-skin .icon-check {
    text-align: center;
    line-height: 1.875rem;
    display: block;
    visibility: hidden;
}

.checking .icon-check {
    visibility: visible;
}

.checking {
    color: #f01742;
}

.read-set-skin .icon-check:before {
    color: #f01742;
}

.read-skin-blue {
    background: #cad9e8;
}

.read-skin-green {
    background: #d1edd1;
}

.read-skin-light {
    background: #e6e6e6;
}

.hover a {
    color: #B8001D;
    font-weight: bold;

}

/* Duplicate removed - using the main .chapter-act styles above */

.icon-ellipsis {
    position: absolute;
    color: #fff;
    font-size: 1.75rem;
    line-height: 1.75rem;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    display: block;
}

.chapters.show {
    pointer-events: inherit;
    opacity: 1;
}

.chapters {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    display: -webkit-box;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-color: rgba(0, 0, 0, .6);
    opacity: 0;
    transition: opacity .3s ease-in, visibility .3s ease-in;
}

.chapterlist {
    position: absolute;
    bottom: 0;
    left: 0;
    top: 4.375rem;
    width: 100vw;
    height: calc(100vh - 4.375rem);
    border-top-left-radius: 1.3125rem;
    border-top-right-radius: 1.3125rem;
    overflow: hidden;
    background-color: #fff;
    z-index: 10001;
}

.chapter-topbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.125rem 1.0625rem .75rem;
}

.chapter-title {
    position: relative;
    display: inline-block;
    font-size: 1rem;
    line-height: 1.375rem;
    color: #1f1f1f;
    font-weight: 700;
}

.chapter-close {
    width: 1.375rem;
    height: 1.375rem;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAA2BAMAAAB+a3fuAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAnUExURUdwTB8fHx8fHyAgIB8fHyAgICAgIB8fHx8fHyIiIiYmJiAgIB8fHz8iMv0AAAAMdFJOUwD9WT71dVeC8ysUpeWbKmoAAAC1SURBVHja7dIhDsJQEEXRCQkQkBUYKqhDdg8INL4CHBKW0h2wEAwJAjGL4ueLufl9YEhwveqJnqTp1Mb+0kI2XTfsQ97R3KvY07yp90c83PnrZkaT2qtgvrOiJmDnz9YICFMIUwhTCFMIUwgTuIYJdJhAmHR3v9ggviQnGNS5cw5h+1ogB2gEcoD0qqsvLH+c42dmQGVAYamZQg5wApYMSH2wBOX/TCxg3rRt2ee8aVnssV97AzFSWbNEeSJbAAAAAElFTkSuQmCC) 100%/100% no-repeat;
}

.chapter-title:after {
    content: "";
    position: absolute;
    bottom: -0.8125rem;
    left: .4375rem;
    width: 1.125rem;
    height: .1875rem;
    border-radius: 2.0625rem;
    background-color: #37c26e;
    z-index: 8;
}

.chapter-topbar:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 300%;
    height: 300%;
    border-bottom: 1px solid #e6e6e6;
    transform: scale(.33333);
    transform-origin: left top;
    pointer-events: none;
    z-index: 9;
}

.s-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* padding: .625rem 0; */
}

.s-title {
    font-size: 16px;
    line-height: 1.5;
    color: #858585;
}

.s-right {
    display: flex;
    align-items: center;
}

#s-icon {
    width: .75rem;
    height: .75rem;
    margin-right: .4375rem;
    position: relative;
    top: .0625rem;
}

.s-reverse {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABIUExURUdwTLi4uB8fHy0tLR8fH8nJyR8fH7m5uSEhIb+/vx8fH7i4uLm5ubi4uLi4uB8fH7i4uLm5uR8fHyAgILi4uCAgIB8fH7i4uCb0D+YAAAAWdFJOUwCpvwrNBXHbLiCSxJCO8OqiZiiv1dantLmvAAAAcUlEQVR42u3KNw6AQBDAwD1yzuz+/6egk2gw4pAoaHDlYuSz0qEbjy9Uk0vjzBYgGsuBaIhoiGgcEE1bAtFIANVmjRCdVSNhlEoA+X70DsUPUBxVIbQb1eoeeaPZPaIhWmmIFIaIhoiGaKIhkrnP5Ks27KUR2ehySvkAAAAASUVORK5CYII=) 100%/100% no-repeat;
}

.s-no-reverse {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAABFUExURUdwTLi4uB8fHy0tLb+/v9vb2x8fH7m5uSEhIR8fH7m5ub+/vx8fH7i4uLi4uLi4uCAgILm5ubi4uB8fHx8fHx8fH7i4uPboej8AAAAVdFJOUwCnvwogA3LbLs6rCpLEkI6vZ/DqKMsPV9AAAABySURBVHja7c45EoAgFARRcFfclX//o0oZGNAUWGVAYkcTvGBUtppjfXYrUgWNtfYEorEdEAwRDRFN0QPRlEQ0Ko7G2xB5ypkkUs6kkfrRN2ReoHkySTSLeIpoERFdxxENkaYhggmjAQYIhoiGaNvdn1xdHlQRVjqEnzMAAAAASUVORK5CYII=) 100%/100% no-repeat;
}

/* .s-text {
  font-size: 1rem;
  line-height: 1.5;
  color: #1f1f1f;
} */


.chapter {
    height: calc(100vh - 10.625rem);
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.chapter li,
.chapter-l li {
    padding: .625rem 1rem;
    font-size: .875rem;
    line-height: 1.5;
    color: #1f1f1f;
    max-width: 18.0625rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid #494740;
}

.chapter li:last-child,
.chapter-l li:last-child {
    border-bottom: none;
}

.chapter li a {
    color: #1f1f1f;
}

.chapter .hov a {
    color: #37c26e;
}

.read-night .panel {
    background: #353535;
    color: #ccc;
}

.read-night .l-p1 .bauthor:after,
.read-night .l-p1 .size:after {
    content: "";
    border-right: 1px solid #ccc;
}

.read-night .u-list li {
    border-bottom: 1px solid #777;
}

.page-opt.active {
    -webkit-transition: none;
    transition: none;
    visibility: visible;
    opacity: 1;
}

#page_box {
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
}

.read_btn {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9;
    background-color: var(--color-btn-solid-bg);
    color: #fff;
    font-size: 1em;
    text-shadow: 0px 0px 0px #f2f2f2;
    background-clip: padding-box;
    text-align: center;
    border-radius: 3px;
    padding: .8em;
}

@media (min-width: 750px) {
    .u-img img {
        width: 12.2em;
        height: 16.267em;
    }

    .u-img .bname {
        max-width: 12em;
    }

    .l-text {
        flex: 1;
    }

    .read_btn {
        display: none;
    }
}

.positionFixed {
    bottom: 0px;
    left: 50%;
    position: fixed;
    transform: translate(-50%, 0%);
    z-index: 999;
    width: 100%;
    background-color: #e4e4e4;
    display: flex;
    justify-content: center;
    /* height: 50px; */
}

/* Advertisement Styles */
.ad-div {
    clear: both;
    min-width: 250px;
    margin: 1.5rem 0;
    width: 100%;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

/* Removed hover effect */

.t_de {
    max-width: 100%;
    line-height: 2;
    font-size: 0.75rem;
    box-sizing: border-box;
    color: #888;
    text-align: center;
    margin-bottom: 0.5rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.grecaptcha-badge {
    visibility: hidden;
}

/* ============================================
   INDEX PAGE - MODERN THEME REDESIGN
   ============================================ */

/* Main Container - Index Page Specific */
main:has(.day-recommend-panel) {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    min-height: 100vh;
    padding: 1.5rem 0;
}

/* Panel Base Styles */
.panel {
    background: linear-gradient(145deg, #252525 0%, #1e1e1e 100%);
    border-radius: 20px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
                0 2px 8px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    opacity: 0.8;
}

.panel h2 {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid rgba(244, 81, 30, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.panel h2::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #f4511e, transparent);
}

.panel h2 a {
    font-size: 0.875rem;
    font-weight: 500;
    color: #aaa;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    /* background: rgba(244, 81, 30, 0.1); */
}

/* Removed hover effect */

/* Day Recommend Panel Styles */
.day-recommend-panel {
    background: linear-gradient(145deg, #2a1f1a 0%, #1e1a17 100%);
}

.day-recommend-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.day-recommend-item {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(244, 81, 30, 0.1) 0%, rgba(26, 27, 22, 0.8) 100%);
    border-radius: 16px;
    padding: 1rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(244, 81, 30, 0.15);
    backdrop-filter: blur(10px);
}

.day-recommend-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #f4511e, #ff6b3d);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Removed hover effects */

/* Book Cover Styles */
.book-cover {
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    margin-right: 0.75rem;
}

.book-cover img {
    width: 100px;
    height: 150px;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5),
                0 2px 8px rgba(244, 81, 30, 0.3);
    object-fit: cover;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(244, 81, 30, 0.2);
}

/* Removed hover effects */

/* Book Info Styles */
.book-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* gap: 0.5rem; */
    z-index: 1;
    position: relative;
}

.book-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
}

.book-title a {
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    background-size: 200% 100%;
    background-position: 100% 0;
    /* padding: 0.125rem 0.25rem; */
    border-radius: 4px;
}

/* Removed hover effect */

.book-author {
    margin: 0;
    font-size: 0.9rem;
    color: #b8b8b8;
}

.book-author a {
    color: #b8b8b8;
    text-decoration: none;
    transition: all 0.3s ease;
    /* padding: 0.125rem 0.25rem; */
    border-radius: 4px;
}

/* Removed hover effect */

.book-description {
    font-size: 0.85rem;
    color: #999;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.25rem;
}

.book-description a {
    color: #999;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Removed hover effect */

.book-meta {
    display: none;
}

.word-count,
.book-status {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8rem;
    color: #888;
    padding: 0.25rem 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: all 0.3s ease;
}

/* Removed hover effects */

.word-count i,
.book-status i {
    font-size: 0.9rem;
    color: #888888;
}

.icon-document::before {
    content: "📄";
    font-style: normal;
}

.icon-play::before {
    content: "▶";
    font-style: normal;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    main:has(.day-recommend-panel) {
        padding: 0;
    }

    .panel {
        padding: 1rem;
        margin-bottom: 0;
        border-radius: 16px;
    }

    .panel h2 {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }

    .day-recommend-item,
    .popularity-item,
    .month-rank-item,
    .completed-item,
    .category-item {
        padding: 0.75rem;
        gap: 0.75rem;
    }

    .book-cover img {
        width: 80px;
        height: 120px;
    }

    .book-title {
        font-size: 1rem;
    }

    .book-author {
        font-size: 0.85rem;
    }

    .book-description {
        font-size: 0.8rem;
        -webkit-line-clamp: 1;
    }

    .book-meta {
        display: none;
    }

    .word-count,
    .book-status {
        font-size: 0.75rem;
        padding: 0.2rem 0.4rem;
    }
}

@media (max-width: 480px) {
    .panel {
        padding: 0.75rem;
        border-radius: 12px;
    }

    .panel h2 {
        font-size: 1.1rem;
        /* flex-direction: column;
        align-items: flex-start; */
        gap: 0.5rem;
    }

    .panel h2 a {
        align-self: flex-end;
        font-size: 0.8rem;
    }

    .day-recommend-item,
    .popularity-item,
    .month-rank-item,
    .completed-item,
    .category-item {
        padding: 0.625rem;
        gap: 0.625rem;
    }

    .book-cover img {
        width: 80px;
        height: 120px;
    }

    .book-title {
        font-size: 0.95rem;
    }

    .book-author {
        font-size: 0.8rem;
    }

    .book-meta {
        display: none;
    }

    .word-count,
    .book-status {
        font-size: 0.7rem;
        padding: 0.15rem 0.3rem;
    }
}

/* Popularity Panel Styles */
.popularity-panel {
    background: linear-gradient(145deg, #1a1f2a 0%, #1a1a1e 100%);
}

.popularity-panel h2 {
    color: #ffffff;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

.popularity-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
}

.popularity-item {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(30, 144, 255, 0.1) 0%, rgba(26, 27, 22, 0.8) 100%);
    border-radius: 16px;
    padding: 1rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(30, 144, 255, 0.15);
    backdrop-filter: blur(10px);
}

.popularity-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #1e90ff, #4da6ff);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Removed hover effects */

.popularity-item .book-cover {
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.popularity-item .book-cover img {
    width: 100px;
    height: 150px;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5),
                0 2px 8px rgba(30, 144, 255, 0.3);
    object-fit: cover;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(30, 144, 255, 0.2);
}

.popularity-item .book-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-left: -4px;
    z-index: 1;
    position: relative;
}

.popularity-item .book-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.popularity-item .book-title a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.popularity-item .book-author {
    margin: 0;
    font-size: 0.85rem;
    color: #cccccc;
}

.popularity-item .book-author a {
    color: #aaa;
    text-decoration: none;
    transition: color 0.3s ease;
}

.popularity-item .book-meta {
    display: none;
}

.popularity-item .word-count,
.popularity-item .book-status {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: #aaaaaa;
}

.popularity-item .word-count i,
.popularity-item .book-status i {
    font-size: 0.9rem;
    color: #888888;
}

.book-description {
    width: 250px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.8rem;
    color: #aaaaaa;
    line-height: 1.3;
    margin: 0.25rem 0;
}

/* Responsive adjustments for popularity */
@media (max-width: 768px) {
    .popularity-item {
        padding: 0.5rem;
    }

    .popularity-item .book-cover img {
        width: 80px;
        height: 120px;
    }

    .popularity-item .book-title {
        font-size: 0.9rem;
    }

    .popularity-item .book-author {
        font-size: 0.8rem;
    }

    .popularity-item .book-meta {
        display: none;
    }

    .popularity-item .word-count,
    .popularity-item .book-status {
        font-size: 0.75rem;
    }
}

/* Month Rank Panel Styles */
.month-rank-panel {
    background: linear-gradient(145deg, #2a1f2a 0%, #1e1a1e 100%);
}

.month-rank-panel h2 {
    color: #ffffff;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

.month-rank-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
}

.month-rank-item {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.1) 0%, rgba(26, 27, 22, 0.8) 100%);
    border-radius: 16px;
    padding: 1rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(147, 51, 234, 0.15);
    backdrop-filter: blur(10px);
}

.month-rank-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #9333ea, #a855f7);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Removed hover effects */

.month-rank-item .book-cover {
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.month-rank-item .book-cover img {
    width: 100px;
    height: 150px;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5),
                0 2px 8px rgba(147, 51, 234, 0.3);
    object-fit: cover;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(147, 51, 234, 0.2);
}

.month-rank-item .book-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-left: -4px;
    z-index: 1;
    position: relative;
}

.month-rank-item .book-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.month-rank-item .book-title a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Removed hover effect */

.month-rank-item .book-author {
    margin: 0;
    font-size: 0.85rem;
    color: #aaa;
}

.month-rank-item .book-author a {
    color: #aaa;
    text-decoration: none;
    transition: color 0.3s ease;
}

.month-rank-item .book-meta {
    display: none;
}

.month-rank-item .word-count,
.month-rank-item .book-status {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: #aaaaaa;
}

.month-rank-item .word-count i,
.month-rank-item .book-status i {
    font-size: 0.9rem;
    color: #888888;
}

/* Responsive adjustments for month rank */
@media (max-width: 768px) {
    .month-rank-item {
        padding: 0.5rem;
    }

    .month-rank-item .book-cover img {
        width: 80px;
        height: 120px;
    }

    .month-rank-item .book-title {
        font-size: 0.9rem;
    }

    .month-rank-item .book-author {
        font-size: 0.8rem;
    }

    .month-rank-item .book-meta {
        display: none;
    }

    .month-rank-item .word-count,
    .month-rank-item .book-status {
        font-size: 0.75rem;
    }
}

/* Completed Panel Styles */
.completed-panel {
    background: linear-gradient(145deg, #1f2a1f 0%, #1a1e1a 100%);
}

.completed-panel h2 {
    color: #ffffff;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

.completed-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
}

.completed-item {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(26, 27, 22, 0.8) 100%);
    border-radius: 16px;
    padding: 1rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(34, 197, 94, 0.15);
    backdrop-filter: blur(10px);
}

.completed-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #22c55e, #4ade80);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Removed hover effects */

.completed-item .book-cover {
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.completed-item .book-cover img {
    width: 100px;
    height: 150px;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5),
                0 2px 8px rgba(34, 197, 94, 0.3);
    object-fit: cover;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(34, 197, 94, 0.2);
}

.completed-item .book-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-left: -4px;
    z-index: 1;
    position: relative;
}

.completed-item .book-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.completed-item .book-title a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Removed hover effect */

.completed-item .book-author {
    margin: 0;
    font-size: 0.85rem;
    color: #aaa;
}

.completed-item .book-author a {
    color: #aaa;
    text-decoration: none;
    transition: color 0.3s ease;
}

.completed-item .book-meta {
    display: none;
}

.completed-item .word-count,
.completed-item .book-status {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: #aaaaaa;
}

.completed-item .word-count i,
.completed-item .book-status i {
    font-size: 0.9rem;
    color: #888888;
}

/* Responsive adjustments for completed */
@media (max-width: 768px) {
    .completed-item {
        padding: 0.5rem;
    }

    .completed-item .book-cover img {
        width: 80px;
        height: 120px;
    }

    .completed-item .book-title {
        font-size: 0.9rem;
    }

    .completed-item .book-author {
        font-size: 0.8rem;
    }

    .completed-item .book-meta {
        display: none;
    }

    .completed-item .word-count,
    .completed-item .book-status {
        font-size: 0.75rem;
    }
}

/* Category Panel Styles */
.category-panel {
    background: linear-gradient(145deg, #2a1f1f 0%, #1e1a1a 100%);
}

.category-panel h2 {
    color: #ffffff;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

.category-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
}

.category-item {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(251, 146, 60, 0.1) 0%, rgba(26, 27, 22, 0.8) 100%);
    border-radius: 16px;
    padding: 1rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(251, 146, 60, 0.15);
    backdrop-filter: blur(10px);
}

.category-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #fb923c, #fdba74);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Removed hover effects */

.category-item .book-cover {
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.category-item .book-cover img {
    width: 100px;
    height: 150px;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5),
                0 2px 8px rgba(251, 146, 60, 0.3);
    object-fit: cover;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(251, 146, 60, 0.2);
}

.category-item .book-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-left: -4px;
    z-index: 1;
    position: relative;
}

.category-item .book-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.category-item .book-title a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Removed hover effect */

.category-item .book-author {
    margin: 0;
    font-size: 0.85rem;
    color: #aaa;
}

.category-item .book-author a {
    color: #aaa;
    text-decoration: none;
    transition: color 0.3s ease;
}

.category-item .book-meta {
    display: none;
}

.category-item .word-count,
.category-item .book-status {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: #aaaaaa;
}

.category-item .word-count i,
.category-item .book-status i {
    font-size: 0.9rem;
    color: #888888;
}

/* Responsive adjustments for category */
@media (max-width: 768px) {
    .category-item {
        padding: 0.5rem;
    }

    .category-item .book-cover img {
        width: 80px;
        height: 120px;
    }

    .category-item .book-title {
        font-size: 0.9rem;
    }

    .category-item .book-author {
        font-size: 0.8rem;
    }

    .category-item .book-meta {
        display: none;
    }

    .category-item .word-count,
    .category-item .book-status {
        font-size: 0.75rem;
    }
}

/* Filter Panel Styles */
.filter-panel {
    background: linear-gradient(145deg, #252525 0%, #1e1e1e 100%);
    /* border-radius: 20px; */
    padding: 1.5rem;
    /* margin-bottom: 2rem; */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
                0 2px 8px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.filter-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.filter-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    /* margin-bottom: 0.75rem; */
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.filter-label i {
    font-size: 1.1rem;
    color: #f4511e;
}

.filter-label span {
    color: #ffffff;
}

.filter-options {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.filter-option {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.25rem;
    background: rgba(255, 255, 255, 0.05);
    color: #b8b8b8;
    text-decoration: none;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
    flex-shrink: 0;
}

.filter-option.active {
    background: rgba(244, 81, 30, 0.1);
    color: #f4511e;
    border: 1px solid rgba(244, 81, 30, 0.2);
}

/* Responsive design for filter panel */
@media (max-width: 768px) {
    .filter-panel {
        padding: 1rem;
    }

    .filter-container {
        gap: 1rem;
    }

    .filter-options {
        gap: 0.375rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .filter-option {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
        min-width: fit-content;
    }
}

@media (max-width: 480px) {
    .filter-options {
        gap: 0.25rem;
        /* padding-bottom: 0.75rem; */
    }

    .filter-option {
        padding: 0.35rem 0.7rem;
        font-size: 0.8rem;
    }
}

/* Icon styles for filter labels */
.icon-tag::before {
    content: "🏷️";
    font-style: normal;
}

.icon-rank::before {
    content: "🏆";
    font-style: normal;
}

/* Rank Panel Styles */
main:has(.rank-panel) {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    min-height: 100vh;
    padding: 1.5rem 0;
}

.rank-panel {
    background: linear-gradient(145deg, #2a1f1a 0%, #1e1a17 100%);
}

.rank-panel h2 {
    color: #ffffff;
    /* font-size: 1.5rem; */
    font-weight: 700;
    padding-bottom: 0;
    margin-bottom: 0.5rem;
    border-bottom: 2px solid rgba(244, 81, 30, 0.3);
    position: relative;
}

.rank-panel h2::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #f4511e, transparent);
}

.rank-panel h2 a {
    float: right;
    font-size: 14px;
    line-height: 2em;
    color: #ffffff;
    /* padding: 0.5rem 1.5rem; */
    text-decoration: none;
    transition: all 0.3s ease;
}

.rank-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.rank-item {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(26, 27, 22, 0.8) 100%);
    border-radius: 16px;
    padding: 1rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 215, 0, 0.15);
    backdrop-filter: blur(10px);
}

.rank-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #ffd700 0%, #ffed4e 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.rank-item .book-cover {
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.rank-item .book-cover img {
    width: 100px;
    height: 150px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    object-fit: cover;
    position: relative;
}

.rank-item .book-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-left: 1rem;
    z-index: 1;
    position: relative;
}

.rank-item .book-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
}

.rank-item .book-title a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.rank-item .book-author {
    margin: 0;
    font-size: 0.9rem;
    color: #cccccc;
}

.rank-item .book-author a {
    color: #cccccc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.rank-item .book-meta {
    display: none;
}

.rank-item .word-count,
.rank-item .book-status {
    display: none;
}

.rank-item .word-count i,
.rank-item .book-status i {
    display: none;
}

/* Responsive adjustments for rank */
@media (max-width: 768px) {
    main:has(.rank-panel) {
        padding: 0;
    }

    .rank-item {
        padding: 0.75rem;
    }

    .rank-item .book-cover img {
        width: 80px;
        height: 120px;
    }

    .rank-item .book-info {
        margin-left: 0.75rem;
        gap: 0.4rem;
    }

    .rank-item .book-title {
        font-size: 1rem;
    }

    .rank-item .book-author {
        font-size: 0.85rem;
    }

    .rank-item .book-meta {
        display: none;
    }

    .rank-item .word-count,
    .rank-item .book-status {
        display: none;
    }
}

@media (max-width: 480px) {
    .rank-item {
        padding: 0.5rem;
        /* flex-direction: column; */
        align-items: flex-start;
    }

    .rank-item .book-cover img {
        width: 70px;
        height: 105px;
    }

    .rank-item .book-info {
        margin-left: 0;
        margin-top: 0.5rem;
        width: 100%;
    }

    .rank-item .book-title {
        font-size: 0.95rem;
    }

    .rank-item .book-author {
        font-size: 0.8rem;
    }
}

/* List Panel Styles */
.list-panel {
    background: linear-gradient(145deg, #252525 0%, #1e1e1e 100%);
}

.list-panel h1 {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid rgba(244, 81, 30, 0.3);
    position: relative;
}

.list-panel h1::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #f4511e, transparent);
}

.list-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.list-item {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(100, 149, 237, 0.1) 0%, rgba(26, 27, 22, 0.8) 100%);
    border-radius: 16px;
    padding: 1rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(100, 149, 237, 0.15);
    backdrop-filter: blur(10px);
}

.list-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #6495ed, #87ceeb);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Removed hover effects */

.list-item .book-cover {
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    margin-right: 0.75rem;
}

.list-item .book-cover img {
    width: 100px;
    height: 150px;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5),
                0 2px 8px rgba(100, 149, 237, 0.3);
    object-fit: cover;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(100, 149, 237, 0.2);
}

.list-item .book-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 1;
    position: relative;
}

.list-item .book-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.4;
}

.list-item .book-title a {
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    background-size: 200% 100%;
    background-position: 100% 0;
    padding: 0.125rem 0.25rem;
    border-radius: 4px;
}

/* Removed hover effect */

.list-item .book-author {
    margin: 0;
    font-size: 0.9rem;
    color: #b8b8b8;
}

.list-item .book-author a {
    color: #b8b8b8;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 0.125rem 0.25rem;
    border-radius: 4px;
}

/* Removed hover effect */

.list-item .book-description {
    font-size: 0.85rem;
    color: #999;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0.25rem;
}

.list-item .book-meta {
    display: none;
}

.list-item .word-count,
.list-item .book-status {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: #aaaaaa;
}

.list-item .word-count i,
.list-item .book-status i {
    font-size: 0.9rem;
    color: #888888;
}

/* Responsive adjustments for list */
@media (max-width: 768px) {
    .list-item {
        padding: 0.5rem;
    }

    .list-item .book-cover img {
        width: 80px;
        height: 120px;
    }

    .list-item .book-title {
        font-size: 0.9rem;
    }

    .list-item .book-author {
        font-size: 0.8rem;
    }

    .list-item .book-meta {
        display: none;
    }

    .list-item .word-count,
    .list-item .book-status {
        font-size: 0.75rem;
    }
}

/* Same Kind Panel Styles */
.same-kind-panel {
    background: linear-gradient(145deg, #2a1f2a 0%, #1e1a1e 100%);
}

.same-kind-panel h2 {
    color: #ffffff;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
}

.same-kind-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.same-kind-item {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.1) 0%, rgba(26, 27, 22, 0.8) 100%);
    border-radius: 16px;
    padding: 1rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(147, 51, 234, 0.15);
    backdrop-filter: blur(10px);
}

.same-kind-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #9333ea, #a855f7);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Removed hover effects */

.same-kind-item .book-cover {
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    margin-right: 0.75rem;
}

.same-kind-item .book-cover img {
    width: 100px;
    height: 150px;
    border-radius: 10px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5),
                0 2px 8px rgba(147, 51, 234, 0.3);
    object-fit: cover;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(147, 51, 234, 0.2);
}

.same-kind-item .book-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 1;
    position: relative;
}

.same-kind-item .book-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.same-kind-item .book-title a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Removed hover effect */

.same-kind-item .book-author {
    margin: 0;
    font-size: 0.85rem;
    color: #aaa;
}

.same-kind-item .book-author a {
    color: #aaa;
    text-decoration: none;
    transition: color 0.3s ease;
}

.same-kind-item .book-meta {
    display: none;
}

.same-kind-item .word-count,
.same-kind-item .book-status {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: #aaaaaa;
}

.same-kind-item .word-count i,
.same-kind-item .book-status i {
    font-size: 0.9rem;
    color: #888888;
}

/* Responsive adjustments for same kind */
@media (max-width: 768px) {
    .same-kind-item {
        padding: 0.5rem;
    }

    .same-kind-item .book-cover img {
        width: 80px;
        height: 120px;
    }

    .same-kind-item .book-title {
        font-size: 0.9rem;
    }

    .same-kind-item .book-author {
        font-size: 0.8rem;
    }

    .same-kind-item .book-meta {
        display: none;
    }

    .same-kind-item .word-count,
    .same-kind-item .book-status {
        font-size: 0.75rem;
    }
}

/* Book Detail Layout Styles */
.book-detail-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 20px;
    padding: 2rem;
    position: relative;
    overflow: visible;
    background: linear-gradient(145deg, rgba(244, 81, 30, 0.05) 0%, rgba(26, 27, 22, 0.3) 100%);
}

.book-cover-container {
    margin-bottom: 1.5rem;
    position: relative;
    /* z-index: 10; */
}

.book-cover-image {
    height: 200px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5),
                0 4px 12px rgba(244, 81, 30, 0.3);
    object-fit: cover;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(244, 81, 30, 0.2);
}

.book-info-container {
    width: 100%;
    max-width: 400px;
    position: relative;
    z-index: 1;
}

.book-title {
    /* font-size: 1.5rem; */
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.75rem 0;
    line-height: 1.3;
}

.book-author {
    /* font-size: 1rem; */
    color: #aaa;
    /* margin: 0 0 1rem 0; */
}

.book-author a {
    color: #aaa;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Removed hover effect */

.book-metadata {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, rgba(244, 81, 30, 0.1) 0%, rgba(26, 27, 22, 0.8) 100%);
    border-radius: 16px;
    padding: 1rem 1.5rem;
    margin: 1rem 0;
    width: 100%;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid rgba(244, 81, 30, 0.15);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.metadata-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.metadata-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f4511e;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.metadata-label {
    font-size: 0.75rem;
    color: #fff;
    line-height: 1.2;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.book-update {
    color: #aaaaaa;
    margin: 0 0 1.5rem 0;
    font-size: 0.9rem;
}

.book-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.book-actions .btn-solid {
    background: rgba(244, 81, 30, 0.1);
    color: #fff;
    font-size: 1rem;
    background-clip: padding-box;
    text-align: center;
    border-radius: 15px;
    padding: 0.7rem 1.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(244, 81, 30, 0.2);
}

.book-actions .btn-solid a {
    color: #fff;
    text-decoration: none;
}

/* Responsive adjustments for book detail layout */
@media (max-width: 768px) {
    .book-detail-layout {
        padding: 1.5rem;
    }

    .book-metadata {
        flex-direction: row;
        gap: 0.5rem;
        /* padding: 0.75rem 1rem; */
        max-width: 100%;
    }

    .metadata-item {
        flex-direction: column;
        gap: 0.2rem;
        flex: 1;
        min-width: 0;
    }

    .metadata-value {
        font-size: 18px;
    }

    .metadata-label {
        font-size: 13px;
        text-transform: none;
    }

    .book-actions {
        flex-direction: column;
        align-items: center;
    }
}

/* Tag Panel Styles */
.tag-panel {
    background: transparent;
    padding: 0;
    margin: 1rem 0;
}

.tag-panel .tags {
    padding: 15px;
    color: #ffffff;
    font-size: 0.9rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.tag-panel .tags em {
    margin: 0;
    background: #1d1b16;
    border-radius: 10px;
    padding: 4px 15px;
    display: inline-block;
    transition: all 0.3s ease;
    background: rgba(244, 81, 30, 0.1);
    border: 1px solid rgba(244, 81, 30, 0.2);
}

.tag-panel .tags a {
    color: #f4511e;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 12px;
}

.book-actions .btn-solid {
    width: 100%;
    /* max-width: 200px; */
}

/* 字号控制按钮样式 */
/* Font Size Controls Styles */
.font-size-controls {
    user-select: none;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    padding: 1rem;
    margin: 1.5rem 0;
    border: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.font-size-controls span {
    color: #b8b8b8;
    font-size: 0.95rem;
    font-weight: 500;
    margin-right: 0.5rem;
}

.font-size-btn {
    transition: all 0.3s ease;
    font-size: 0.875rem;
    min-width: 50px;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    cursor: pointer;
    border-radius: 20px;
    font-weight: 500;
}

.font-size-btn:hover {
    background: rgba(244, 81, 30, 0.2) !important;
    color: #ffffff !important;
    border-color: rgba(244, 81, 30, 0.4) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(244, 81, 30, 0.2);
}

.font-size-btn.active {
    background: linear-gradient(135deg, rgba(244, 81, 30, 0.1) 0%, rgba(26, 27, 22, 0.3) 100%);
    color: #f4511e !important;
    border-color: rgba(244, 81, 30, 0.5) !important;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .font-size-controls {
        padding: 0.75rem;
        gap: 0.375rem;
    }

    .font-size-controls span {
        font-size: 0.85rem;
        width: 100%;
        text-align: center;
        margin-bottom: 0.5rem;
    }

    .font-size-btn {
        padding: 0.4rem 0.8rem !important;
        margin: 0 !important;
        font-size: 0.8rem;
        min-width: 45px;
    }
}