@charset "utf-8";
:root {
	--mb: .5rem;
	--base: #333;
	--bdbg: #eee;
	--tint: #f7f7f7;
	--line: #f1f2f4;
	--gray: #999;
	--main: #282828;
	--white: #fff;
	--shadow: 0 0 4px 4px rgba(146,146,146,.05);
	--body-bg: #eaeaea;
	--header-bg: #26272b;
	--header-color:rgba(255,255,255,.7);
	--header-color-hover: rgba(255,255,255,.9);
	--footer-bg: #33363b;
	--footer-color: #777;
	--card-bg: #fff;
	--link: #444;
	--link-hover: #3b8dbd;
}
* {margin: 0px;padding: 0px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;box-sizing: border-box;}
html,body {color: var(--base);background: var(--body-bg);font-size: 16px;line-height: 1.5;height: 100%;display: flex;flex-direction: column;}
ul,li {list-style: none;}
img {border: 0px;max-width: 100%;max-height: 100%;}
em,i,u,s,b,strong {font-style: normal;font-weight: normal;text-decoration: none;}
a {cursor: pointer;color: var(--link);text-decoration: none;display: inline-block;transition: color .3s ease;}
a:hover {color: var(--link-hover);}
button {cursor: pointer;border: none;background-color: inherit;}
h1,h2,h3,h4,h5,h6 {font-weight: 400;}
h1 {font-size: 1.25rem;}
h2 {font-size: 1.125rem;}
h3 {font-size: 1rem;}
h4 {font-size: 0.875rem;}

.container {width: 100%;max-width: 100%;margin: auto;padding: 0;position: relative;}
.text-muted {color: var(--gray);font-size: 0.75rem;}

/* section */
section {margin-bottom: var(--mb);background-color: var(--card-bg);}
section .head {display: flex;align-items: center;justify-content: space-between;padding: .75rem 1rem;border-bottom: 2px solid var(--line);}
section .head .left {margin-right: 0.75rem;}
section .head .right {overflow: hidden;display: inline-flex;color: var(--gray);font-size: 0.75rem;display: inline-flex;align-items: center;}
section .head .right a,
section .head .right span {display: inline-flex;align-items: center;color: var(--gray);}
section .head .right .feather {width: .875rem;height: .875rem;margin-right: .25rem;} 
section .head .right a.more .feather {margin: 0 0 0 .25rem;}

section .head .btns {color: #777;font-size: 0.75rem;display: inline-flex;align-items: center;gap: 0.5rem;}
section .head .btns a {background: var(--tint);padding: 3px 6px;}
section .head .btns a:hover {background: var(--bdbg);}

section .head h3 {position: relative;display: flex;align-items: center;color: var(--main);}
section .head h3::before {content: "";height: 2px;width: 100%;background-color: #454e5c;display: inline-block;margin-right: 13px;position: absolute;bottom: -14px;}
section .head nav {display: flex;align-items: center;}
section .head nav a {padding: 0.375rem 0.875rem;border-radius: 1rem;font-size: 0.875rem;color: #1E232D;transition: all .2s ease-in-out;position: relative;margin-left: 0.75rem;}
section .head nav a.active,
section .head nav a:hover {color: #fff;background-color: #c99a05;}
section .head small {margin-top: 6px;color: #666;font-size: 0.75rem;line-height: 1.125rem;display: flex;align-items: center;}
section .head small span {color: #c99a05;margin: 0 0.375rem;}

/* header */
header {display: flex;flex-direction: column;position: relative;background-color: var(--header-bg);}
header a {display: inline-flex;align-items: center;justify-content: center;color: var(--header-color);}
header a:hover {display: inline-flex;align-items: center;justify-content: center;color: var(--header-color-hover);}

.headbar {display: flex;align-items: center;justify-content: space-between;padding: 0.5rem 1rem;}

.headbar .left {display: flex;align-items: center;gap: .75rem;}
.headbar .btn-menu {height: 32px;font-size: .875rem;}
.headbar .btn-menu .feather {width: .75rem;height: .75rem;margin-left: .25rem;}

.menu-box {display: flex;align-items: center;}
.menu-box .dropdown-menu {min-width: 120px;}
.menu-box .dropdown-menu ul {width: 100%;}
.menu-box .dropdown-menu ul a {display: block;font-size: 14px;padding: .5rem 1rem;color: #454e5c;}
.menu-box .dropdown-menu ul a:hover {background-color: #f9f9f9;}

.headbar .logo {position: absolute;left: 50%;transform: translateX(-50%);}

.headbar .btns {display: inline-flex;}
.headbar .btns .feather {width: 1rem;height: 1rem;}
.headbar .btns .btns-item {display: inline-flex;align-items: center;margin-left: 1rem;justify-content: center;}
.headbar .btns .btns-item .btns-btn {width: 32px;height: 32px;border-radius: 50%;transition: background-color .2s ease-in-out;}
.headbar .btns .btns-item .btns-btn:hover {background-color: var(--bdbg);color: var(--header-bg);}
.headbar .btns .btn-user {width: 32px;height: 32px;border-radius: 50%;}
.headbar .btns span {display: none;font-size: 14px;margin-left: .375rem;}

.dropdown {position: relative;}
.dropdown-menu {position: absolute;top: 100%;left: 50%;transform: translateX(-50%);padding: 0;margin: 0;background-color: var(--white);color: rgb(46 52 64);z-index: 1000;height: auto;transition: all .2s ease-in-out;visibility: hidden;opacity: 0;box-shadow: var(--shadow);overflow: hidden;}
.dropdown-menu.visible {visibility: visible;opacity: 1;top: 135%;}
.dropdown-menu.left {left: 0;transform: none;}
.dropdown-menu.right {left: auto;right: 0;transform: none;}

/* search */
.search-form {display: flex;align-items: center;justify-content: flex-start;overflow: hidden;}
.search-form .input {display: flex;width: 120px;height: 32px;font-size: 13px;flex: 1 1 0%;padding: .5rem;border: medium;background-color: var(--white);color: var(--gray);outline: none;}
.search-form .button {display: inline-flex;align-items: center;height: 32px;padding: .5rem;background-color: var(--white);}

/* main */
main {flex: 1;}

/* main grid */
.main-grid {flex: 1;display: grid;}

/* chapter */
.chapter {display: flex;flex-direction: column;position: relative;}
.chapter .title {text-align: center;padding: 1rem;}
.chapter .tool {display: flex;align-items: center;justify-content: center;border-top: 1px solid var(--line);border-bottom: 1px solid var(--line);padding: 10px 1rem;}
.chapter .tool span {margin: 0 .5rem;font-size: 0.75rem;display: inline-flex;align-items: center;color: var(--gray);}
.chapter .tool span .feather {margin-right: .25rem;width: 1rem;height: 1rem;}
.chapter .tips {text-align: center;font-size: 0.875rem;color: #999;padding: 20px;}

/* chapter owner */
.owner {display: grid;grid-template-columns: 60px 1fr;gap: .75rem;padding: .75rem 1rem;background-color: rgba(64, 158, 255, 0.1);margin: 0 1rem;border-radius: 4px;border-left: 3px solid #409eff;}
.owner .cover {position: relative;display: block;background: #161a26;height: 78px;}
.owner .cover img {max-width: 100%;width: 100%;height: 100%;position: absolute;object-fit: cover;}
.owner > div {display: grid;align-content: space-between;}
.owner .title {font-size: 1rem;color: #333;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.owner .meta {font-size: .75rem;color: var(--gray);}
.owner .meta span {border: 1px solid #dcdddf;border-radius: 4px;display: inline-block;margin-right: 6px;padding: 1px 6px;}
.owner .meta span.status {border-color: #2687d9;color: #2687d9;}
.owner .meta span.author {border-color: #f36c06;color: #f36c06;}
.owner .tag {font-size: .75rem;color: var(--gray);}
.owner .tag a {border: 1px solid #dcdddf;border-radius: 4px;display: inline-block;margin-right: 6px;padding: 1px 6px;}
.owner .tag a::before {content: "#";margin-right: 0.125rem;}

/* content */
.content {padding: 0 1rem;word-wrap: break-word;overflow-wrap: break-word;word-break: break-all;position: relative;}
.content p {margin: 1rem 0;}
.content a {color: var(--link-hover);}
.content a:hover {text-decoration: underline;}

.content_images {padding: 1rem;display: flex;flex-direction: column;}

/* chapter-page */
.chapter-page {display: flex;}
.chapter-page a {flex: 1;padding: 1rem 0;position: relative;text-align: center;}
.chapter-page a:first-child::before {content: none;}
.chapter-page a::before {content: "";width: 1px;height: 50%;position: absolute;left: 0;top: 50%;transform: translateY(-50%);background-color: var(--line);}

/* lock */
.lock {position: absolute;left: 0;right: 0;bottom: 5px;width: 100%;height: 100%;overflow: hidden;z-index: 1;background-image: linear-gradient(rgba(20,20,20,0), rgba(255,255,255,1));display: flex;align-items: center;justify-content: end;flex-direction: column;}

/* chapter-list */
.chapter-list {display: flex;flex-wrap: wrap;flex-direction: column;}
.chapter-list a {flex: 1 1 100%;display: inline-grid;grid-template-columns: 1fr auto;font-size: 0.875rem;line-height: 40px;padding: 0 1rem;}
.chapter-list a + a {border-top: 1px solid var(--line);}
.chapter-list a:hover {background-color: #f6f6f6;}
.chapter-list h4 {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.chapter-list small {overflow: hidden;height: 40px;margin-left: 1rem;text-align: end;}
.chapter-list a.readed {color: #ff6666;background-color: #eff5ff;}

/* novel-list */
.novel-list {display: grid;grid-template-columns: repeat(4,1fr);padding: 0.5rem;}
.novel-list a {display: grid;justify-content: center;align-items: center;font-size: 0.75rem;padding: 0.5rem;position: relative;}
.novel-list a:hover {background-color: #f6f6f6;}
.novel-list img {width: 100%;aspect-ratio: 100 / 130;}
.novel-list h4 {width: 100%;overflow: hidden;height: 24px;line-height: 24px;text-align: center;}
.novel-list span {color: var(--gray);height: 18px;text-align: center;overflow: hidden;}
.novel-list a.readed {color: #999;background-color: #eff5ff;}
.novel-list .readed-mark {font-size: 12px;color: #fe628e;display: inline-flex;align-items: center;}
.novel-list .readed-mark .feather {width: 1rem;height: 1rem;}

/* links */
.links {display: flex;flex-wrap: wrap;font-size: 0.875rem;padding: 1rem;}
.links a {margin-right: 1rem;}

/* page */
.page {display: flex;font-size: .875rem;}
.page span {color: var(--gray);}
.page span,
.page a {flex: 1;padding: 1rem 0;text-align: center;position: relative;}
.page a:first-child::before {content: none;}
.page span::before,
.page a::before {content: "";width: 1px;height: 50%;position: absolute;left: 0;top: 50%;transform: translateY(-50%);background-color: var(--line);}

/* category list */
.category-list {display: grid;grid-template-columns: repeat(4,1fr);padding: .5rem;}
.category-list a {display: block;text-align: center;padding: .5rem 0;font-size: .875rem;}
.category-list a:hover {background-color: #f6f6f6;}

/* tag list */
.tag-list {display: grid;grid-template-columns: repeat(4,1fr);padding: .5rem;}
.tag-list a {display: block;text-align: center;padding: .5rem 0;font-size: .875rem;}
.tag-list a:hover {background-color: #f6f6f6;}

/* novel */
.novel {}
.novel .detail {padding: 1rem;position: relative;display: flex;background-color: #454e5c;}
.novel .cover {position: relative;border: 2px solid #fff;width: 120px;height: 160px;display: flex;}
.novel .cover img {width: 100%;height: 100%;}

.novel .info {position: relative;left: 1rem;padding-right: 1rem;flex: 1;}
.novel .info p {font-size: 12px;line-height: 17px;margin-top: 4px;display: flex;flex-wrap: wrap;}
.novel .info p a {color: #fff;text-decoration: underline;margin-right: 0.5rem;}
.novel .info h1 {font-size: 20px;letter-spacing: 0;font-weight: bold;}
.novel .info h1,
.novel .info p {color: #fff;text-shadow: 0px 1px 2px #595959;}

.novel .desc {padding: .75rem 1rem;font-size: 0.875rem;background-color: #fff;}

.novel .btns {margin-top: 12px;display: flex;gap: 1rem;position: relative;z-index: 1;font-size: 0.875rem;}
.novel .btns .feather {width: 1.125rem;height: 1.125rem;margin-right: .25rem;}
.novel .btns a {flex: 1;display: inline-flex;align-items: center;justify-content: center;background: linear-gradient(324deg,#454e5c,#b4c1d5);color: #fff;height: 34px;}

/* home-swiper */
.home-swiper {margin-bottom: 0;}

/* home-nav */
.home-nav {}
.home-nav ul {display: flex;}
.home-nav li {flex: 1;}
.home-nav a {display: block;text-align: center;padding: 1rem 0;}
.home-nav img {width: 49px;height: 49px;}
.home-nav p {font-size: 14px;margin-top: .25rem;}

/* pick */
.pick {padding: 1rem;}
.pick h1 {text-align: center;font-size: 18px;}
.pick p {margin-top: .5rem;font-size: 0.875rem;color: var(--gray);}

.pick-more {padding: 1rem;text-align: center;display: block;font-size: .875rem;}

/* novel-item */
.novel-item {display: grid;grid-template-columns: 90px 1fr;gap: .75rem;padding: 1rem;}
.novel-item .cover {position: relative;display: block;background: #161a26;height: 117px;}
.novel-item .cover img {max-width: 100%;width: 100%;height: 100%;position: absolute;object-fit: cover;}
.novel-item .info {display: grid;align-content: space-between;}
.novel-item .info .title {font-size: 1rem;color: #333;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
.novel-item .info .meta {font-size: .75rem;color: var(--gray);}
.novel-item .info .meta span {border: 1px solid #dcdddf;border-radius: 4px;display: inline-block;margin-right: 6px;padding: 1px 6px;}
.novel-item .info .meta span.status {border-color: #2687d9;color: #2687d9;}
.novel-item .info .meta span.author {border-color: #f36c06;color: #f36c06;}
.novel-item .info .desc {font-size: .75rem;color: var(--gray);display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}

/* footer */
footer {position: relative;text-align: center;padding: 1rem 0;font-size: 0.75rem;background-color: var(--footer-bg);color: var(--footer-color);}
footer a {color: var(--footer-color);}

/* swiper */
.swiper {--swiper-theme-color: #fff;}

/* lazysizes */
.lazyloading {opacity: 0;transition: opacity 400ms;}
img.lazyloaded {opacity: 1;}

/* layui */
.layui-btn, .layui-input, .layui-select, .layui-textarea, .layui-upload-button {font-size: 14px;}
.layui-form-container {padding: 15px;}
.layui-form-other {display: flex;justify-content: space-between;font-size: 14px;}
.layui-form-other span {color: #8e9194;}

@media (min-width: 640px) {
	:root {--mb: 1rem;}
	.container {max-width: 640px;padding: 0 1rem;}
	/* main grid */
    .main-grid {display: grid;grid-template-columns: 1fr 300px;grid-gap: 1rem;}
	/* headbar */
	header {margin-bottom: var(--mb);}
	.headbar {padding: 0.5rem 0;}
	.headbar .btns span {display: inline-flex;}
	/* home-nav */
	.home-nav {margin-top: var(--mb);}

}