html {
	--theme: #306fff;
	--top: #fcfdfe;
	--Toolbox: #e4e7ed;
	--Xc-bj: #fff;
	--Xc-mment: #ebeef5;
	--Layer-bj: hsla(0, 0%, 0%, 0.6);
	--background: hsla(0, 0%, 100%, 0.85);
	--main: #404244;
	--routine: #606266;
	--minor: #808388;
	--seat: #c0c4cc;
	--classA: #dcdfe6;
	--classB: #e4e7ed;
	--classC: #ebeef5;
	--classD: #f2f6fc;
	--classE: #808388;
	--classF: #808388;
	--radius-wrap: 6px;
	--radius-inner: 4px;
	--text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	--text-xc: 0 1px 8px rgba(0, 0, 0, 0.25);
	--text-bt: 0 1px 5px rgba(0, 0, 0, 0.25);
	--box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1)
}

html[data-night=night] body {
	--theme: #3fb7bf;
	--top: #252525;
	--Toolbox: #303030;
	--Xc-bj: #303030;
	--Xc-mment: #353535;
	--Layer-bj: hsla(0, 0%, 50%, 0.6);
	--background: rgba(35, 35, 35, 0.85);
	--main: #ccc;
	--routine: #bbb;
	--minor: #aaa;
	--seat: #888;
	--classA: #777;
	--classB: #666;
	--classC: #555;
	--classD: #303030;
	--classE: #808388;
	--classF: #888;
	--text-shadow: none;
	--box-shadow: none
}

html[data-night=night] body:before {
	background: #121212;
	z-index: -500
}

html[data-night=night] .Miss_aside_item.author:before {
	background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #212121)
}

* {
	font-family: PingFang SC, Miss Font, Noto Sans SC, "Source Han Serif", MiSans, Open Sans, sans-serif;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	outline: 0;
	-webkit-tap-highlight-color: transparent
}

::-webkit-scrollbar {
	width: 8px;
	height: 8px
}

::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background: var(--seat)
}

::-webkit-scrollbar-track {
	background: 0 0
}

::-moz-selection {
	color: #fff;
	background: var(--theme)
}

::selection {
	color: #fff;
	background: var(--theme)
}

body {
	font-size: 14px;
	color: var(--main);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	padding-bottom: env(safe-area-inset-bottom)
}

body:before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -520;
	pointer-events: none;
	background: #f0f0f0;
	background-position: center 0;
	background-repeat: no-repeat;
	background-size: cover
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 10px 0;
	text-shadow: var(--text-bt);
	font-weight: 400
}

h1 {
	font-size: 20px
}

h2 {
	font-size: 18px
}

h3 {
	font-size: 16px
}

h4 {
	font-size: 14px
}

a {
	cursor: pointer;
	outline: 0;
	text-decoration: none
}

a,
a:hover {
	color: var(--theme)
}

p {
	margin: 8px 0
}

svg {
	user-select: none
}

input#song-id::placeholder {
	color: var(--classE)
}

form {
	max-width: 100vw;
	box-sizing: border-box
}

form p {
	white-space: normal;
	word-break: break-word;
	overflow-wrap: anywhere
}

.container {
	width: 95%;
	max-width: 900px;
	margin: 20px auto
}

.app-all {
	position: relative
}

.app-main .main-box {
	background: var(--background);
	box-shadow: var(--box-shadow);
	border-radius: var(--radius-inner);
	margin-bottom: 20px
}

.app-all .title_top {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px
}

.app-all .title_top h3 {
	font-size: 1.2rem
}

.app-all .title_top p {
	font-size: 14px
}

.title_bj {
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--classC);
	font-size: 15px;
	color: var(--main);
	padding: 5px 20px
}

form {
	white-space: nowrap;
	padding: 20px
}

form .list {
	position: relative;
	display: flex;
	flex: 1;
	width: auto;
	align-items: center;
	padding-bottom: 20px
}

.music-information form .list .title {
	display: flex;
	align-items: center;
	white-space: nowrap;
	padding-right: 15px;
	min-width: 100px
}

.list input {
	width: 100%;
	border: none;
	background: 0;
	padding: 8px 12px;
	border-radius: 2px;
	border: 1px solid var(--classF);
	color: var(--main);
	font-size: 13px
}

input[type=text],
input[type=password] {
	-webkit-appearance: none;
	border-radius: 2px;
	font-size: 13px;
	color: var(--main);
	font-weight: 400;
	padding: 8px 12px
}

input:focus {
	border-color: var(--theme)
}

input.nobj {
	background: var(--classD);
	border-radius: 2px;
	border: 0px solid var(--minor)
}

select {
	width: 100%;
	padding: 0 8px;
	border: 1px solid var(--classF);
	border-radius: 2px;
	height: 38px;
	line-height: 38px;
	font-size: 14px;
	color: var(--routine);
	background: 0
}

option {
	font-size: 14px;
	color: var(--main);
	background: var(--background)
}

label {
	padding-right: 15px;
	min-width: 75px
}

.yemianan {
	display: flex;
	padding-bottom: 10px;
	flex-wrap: wrap
}

.yemianan .button {
	display: flex;
	align-items: center;
	padding: 6px 12px;
	margin: 1em 1em 0 0;
	border-radius: 2px;
	color: #fff;
	background-color: var(--theme);
	border: 0;
	cursor: pointer;
	font-size: 14px
}

.button:hover {
	opacity: .8
}

.music-information {
	animation: fadeIn .35s ease-out forwards
}

@keyframes fadeIn {
	from {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

.miss_action {
	position: fixed;
	right: 40px;
	bottom: 130px;
	z-index: 500
}

.miss_action_item {
	position: relative;
	z-index: 10;
	display: flex;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--background);
	box-shadow: 0 0 10px rgb(0 0 0 / 10%), 0 5px 20px rgb(0 0 0 / 20%);
	cursor: pointer;
	align-items: center;
	justify-content: center
}

.miss_action_item svg {
	position: absolute;
	color: var(--main);
	font-size: 20px
}

.miss_action_item.mode svg {
	opacity: 0;
	transition: .35s ease-out;
	-webkit-transform: scale(0);
	transform: scale(0)
}

.miss_action_item.mode svg.active {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1)
}

#loginSettingsForm svg {
	margin-right: 5px
}

#pager-box,
.playlist-pager {
	margin-top: 20px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center
}

#pager-box .Turnpage,
.playlist-pager .Turnpage {
	color: var(--main);
	padding: 6px 12px;
	background: var(--classD);
	border-radius: 2px;
	border: 0;
	cursor: pointer;
	font-size: 14px
}

#pager-box .Turnpage.active,
.playlist-pager .Turnpage.active {
	cursor: auto
}

#pager-box .Turnpage.active:hover,
.playlist-pager .Turnpage.active:hover {
	color: var(--main);
	background: var(--classD)
}

#pager-box .Turnpage:hover,
.playlist-pager .Turnpage:hover {
	color: #fff;
	background: var(--theme)
}

#pager-box span,
.playlist-pager span {
	color: var(--main);
	margin: 0 15px;
	font-size: 14px
}

.app-main .search-item {
	display: flex;
	align-items: center;
	background: var(--classD);
	box-shadow: var(--box-shadow);
	border-radius: var(--radius-inner);
	padding: 15px;
	margin-bottom: 20px
}

.app-main .Search_list {
	flex: 1;
	display: flex;
	align-items: center;
	min-width: 0
}

.app-main .Search_list img {
	margin-right: 15px;
	width: 70px;
	height: 70px;
	border-radius: 50%;
	border: 3px solid rgba(144, 147, 153, .23);
	object-fit: cover
}

.app-main .search-item.active .Search_list img {
	animation: spin 3s linear infinite
}

@keyframes spin {
	from {
		transform: rotate(0deg)
	}

	to {
		transform: rotate(360deg)
	}
}

.app-main button {
	display: flex;
	align-items: center;
	margin-left: 10px;
	border: 0;
	cursor: pointer;
	background: 0
}

.app-main .Search_combine {
	display: flex;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: auto;
	text-overflow: ellipsis;
	word-break: break-word;
	flex-direction: column
}

.app-main .Search_combine::-webkit-scrollbar {
	display: none
}

.app-main .search-item.active .Search_title {
	color: var(--theme)
}

.app-main .Search_title {
	font-size: 1rem;
	color: var(--main);
	font-weight: bold
}

.app-main .Search_text {
	margin-top: 10px;
	color: var(--minor);
	font-size: 14px
}

.app-main .Search_tool {
	display: flex;
	align-items: center
}

a:not([class]) {
	color: var(--theme);
	position: relative
}

a:not([class]):hover::after {
	opacity: 1;
	-webkit-transform: scaleX(1);
	transform: scaleX(1)
}

a:not([class])::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 1px;
	bottom: -1px;
	left: 0;
	background: var(--theme);
	-webkit-transform: scaleX(0.25);
	transform: scaleX(0.25);
	opacity: 0;
	transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: transform 0.35s, opacity 0.35s;
	transition: transform 0.35s, opacity 0.35s, -webkit-transform 0.35s
}

.footer a {
	color: var(--main)
}

.footer a:hover {
	color: var(--theme)
}

html .layui-layer-hui,
html .layui-layer-msg {
	background-color: var(--Layer-bj);
	color: #fff;
	border: 0
}

html .layui-layer-dialog .layui-layer-padding {
	color: #fff
}

#aplayer {
	margin-bottom: 20px
}

#lyrics-content {
	height: 400px;
	overflow: overlay
}