/*=====================================变量*/

:root {
	--background_1: #0E0E0E;
	--background_2: #1C1C1C;
	--background_3: #2A2A2A;
	--background_4: #393939;
	--background_5: #474747;
	--background_6: #555555;
	--background_7: #636363;
	--background_8: #717171;
	--background_9: #808080;
	--color: #FF881B;
	--background: #C75F00;
}

/*=====================================图标(IconLogin)*/

.IconClose, .IconUsername, .IconPassword, .IconAssets, .IconOrders, .IconHistory, .IconSettings {
	background: url('../images/icon.webp') var(--background_2) no-repeat padding-box;
	font-size: 0px;
}
.IconClose {
	padding: 8px;
	border: 2px solid var(--background_2);
	border-radius: 5px;
	/*圆角*/
}
.IconUsername, .IconPassword {
	padding: 12px;
	border: 8px solid var(--background_2);
}
.IconUsername {
	background-position: 0px -16px;
}
.IconPassword {
	background-position: -24px -16px;
}
.IconAssets, .IconOrders, .IconHistory, .IconSettings {
	display: block;
	width: 24px;
	height: 24px;
	margin: 0 auto;
}
.IconAssets {
	background-position: 0px -40px;
}
.IconOrders {
	background-position: -24px -40px;
}
.IconHistory {
	background-position: -48px -40px;
}
.IconSettings {
	background-position: -72px -40px;
}

/*=====================================基础*/

/*---------------------------关闭所有的默认样式*/
* {
	padding: 0;
	margin: 0;
}
/*---------------------------根元素字体*/
body {
	font-size: 16px;
	font-family: 'Noto Sans SC', 'sans-serif';
	color: #FFF;
	height: 100dvh;
	overflow: auto;
}
/*---------------------------提示浏览器禁用JavaScript*/
noscript {
	font-size: 2rem;
	color: #ff5a5a;
	display: block;
	text-align: center;
}
/*---------------------------编辑框*/
input, textarea, select, button {
	font-family: 'Noto Sans SC', 'sans-serif';
	font-size: 0.8rem;
	color: #FFF;
	border-width: 0;
	background-color: var(--background_2);
	height: 20px;
	outline: none;
	/*解决chrome文本输入时的白色边框*/
}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
	/*解决chrome表单自动填充样式*/
	-webkit-transition-delay: 99999s;
}

/*=====================================界面*/

/*---------------------------进度条*/
#progress {
	position: fixed;
	top: 0;
	width: 100%;
	height: 5px;
	z-index: 9;
	background-color: #1FE0FC;
	transform-origin: left center;
	transform: scaleX(0);
}
@keyframes progress {
	from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}
/*---------------------------提示框*/
#message {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 7;
	font-size: 0.9rem;
	color: #FFF;
}
#message.active {
	display: block;
}
#message p {
	max-height: 200px;
	overflow: auto;
}
#message i {
	position: absolute;
	right: 20px;
	top: 10px;
	z-index: 8;
}
#message div {
	height: 40px;
	line-height: 40px;
	overflow: hidden;
	box-sizing: border-box;
	border-bottom: 1px solid #ffffff;
	padding: 0 10px;
	word-break: break-all;
	/*长单词换行*/
}
.messageError {
	background-color: #EB2E2E;
}
.messagePrompt {
	background-color: #D38314;
}
.messageOk {
	background-color: #17C013;
}
/*---------------------------登录*/
#login {
	text-align: center;
	user-select: none;
	/*禁止选中文字*/
}
#login.active {
	display: block;
}
#login header {
	padding: 15px 0 30px 0;
	background-color: var(--background_2);
	font-size: 3rem;
	font-weight: bold;
	font-style: italic;
	/* 字体阴影 */
	text-shadow: 3px 3px 3px var(--background_6);
}
#login header b {
	color: var(--color);
}
#login header i {
	font-size: 1.5rem;
	display: block;
}
#login form {
	/*登录表单*/
	padding: 10px 30px 30px 30px;
	background-color: var(--background_6);
}
#login form input {
	height: 40px;
	line-height: 40px;
	font-size: 1rem;
	font-weight: bold;
	width: 260px;
	vertical-align: -webkit-baseline-middle;
	/* 下对齐 */
}
#login form div {
	margin-top: 30px;
}
#login .h-captcha {
	width: 298px;
	overflow: hidden;
	position: relative;
	/* 设置圆角半径为5像素 */
	border-radius: 5px;
	margin: 30px auto;
}
#login .h-captcha iframe {
	position: absolute;
	top: -2px;
	left: -2px;
}
#login form button {
	padding: 7px;
	font-size: 1.2rem;
	width: 80px;
	height: 40px;
	font-weight: bold;
	background-color: var(--background);
	/* 设置圆角半径为10像素 */
	border-radius: 10px;
}
#login form button:nth-of-type(n+2) {
	margin-left: 10px;
}
#login footer {
	text-align: center;
	padding: 20px 0;
	font-size: 0.9rem;
}
/*---------------------------布局*/
#layout {
	height: 100dvh;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 1fr auto;
}
#layout.active {
	display: grid;
}
.layoutPanel {
	display: none;
	grid-column: 1 / -1;
	grid-row: 1;
	min-width: 0;
	min-height: 0;
	overflow: auto;
}
.layoutTab {
	user-select: none;
	/*禁止选中文字*/
	grid-row: 2;
	text-align: center;
	background-color: var(--background_1);
	font-size: 12px;
	padding: 9.5px 0;
	font-weight: bold;
}