@font-face {
    font-family: 'Noto Sans';
    src: url('../fonts/subset-NotoSans-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Sans';
    src: url('../fonts/subset-NotoSans-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/* 设置常用变量 */
/* CSS变量名常以“--”开始 */
:root {
	--fontColor: #DCDCDC;  			/* var(--fontColor) */
	--bgColor: black; 			/* var(--bgColor) */
	--bgInputColor: #333; 	/* var(--bgInputColor) */
	
	--cocoColor: mediumSeaGreen;			/* var(--cocoColor) */
	--idColor: Red;							/* var(--idColor) */
	
    --btnColor: seaGreen; 						/* var(--btnColor) */
	--btnHoverColor: darkGreen; 						/* var(--btnHoverColor) */

	--btnForSelectColor: var(--bgInputColor);				/* var(--btnForSelectColor) */
	--btnForSelectHoverColor: #555;						/* var(--btnForSelectHoverColor) */
	--btnSelectedColor: var(--bgInputColor); 				/* var(--btnSelectedColor) */
	--btnSelectedBorderColor: var(--fontColor) ; 			/* var(--btnSelectedBorderColor) */

	--btnExitColor: fireBrick ; 								/* var(--btnExitColor) */
	--btnExitHoverColor: darkRed ;							/* var(--btnExitHoverColor) */
	
    --red: fireBrick; 	/* var(--red) */
	--hoverRed: darkRed; 			/* var(--hoverRed) */
	--selectedRed: Red; 			/* var(--selectedRed) */

	--aColor:; 				/* var(--green) */
	--aHoverColor:; 		/* var(--green) */
	--aSelectedColor:; 	/* var(--green) */
}
/* 使用格式

 body {
    color: var(--main-color);
    font-size: var(--font-size);
}

 */

body {
    font-family: 'Noto Sans', Arial, sans-serif;
    margin: 20px;
	background-color: var(--bgColor); /* 设置网页背景颜色 */
	color: #DCDCDC;           /* 设置文本颜色 */
}

/* 通用链接样式 */
a {
	font-weight: bold;
	text-decoration: none;
}

/* 未访问的链接（未读链接） */
a:link {
    color: #DCDCDC; 
}

/* 已访问的链接（已读链接） */
a:visited {
    color: #DCDCDC; 
}

/* 鼠标悬停状态 */
a:hover {
    color: tan;
}


   /* 为输入框设置背景颜色 */
        input[type="text"],
        input[type="password"] {
            background-color: #DCDCDC; /* 设置背景颜色 */
            border: 1px solid #ccc; /* 设置边框 */
            padding: 8px; /* 添加内边距 */
            border-radius: 4px; /* 圆角边框 */
            font-size: 16px; /* 调整字体大小 */
        }

        /* 额外美化表单 */
        label {
            font-size: 16px;
            margin-bottom: 5px;
            display: inline-block;
        }

        form {
            margin: 0px;
        }

        button {
            background-color: var(--btnColor); /* 按钮背景 */
            color: white; /* 按钮文字颜色 */
            padding: 10px 25px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
		
	    button:hover {
            background-color: var(--btnHoverColor); /* 鼠标悬停时的背景颜色 */
        }
		
		button.red {
            background-color: var(--red); /* 按钮背景 */
            color: white; /* 按钮文字颜色 */
            padding: 10px 25px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
		
	    button.red:hover {
            background-color: var(--hoverRed); /* 鼠标悬停时的背景颜色 */
        }
		
		button.lowRed {
            background-color: fireBrick; /* 红色按钮背景 */
            color: white; /* 按钮文字颜色 */
            padding: 5px 25px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
			margin-left: 20px;
        }

        button.lowRed:hover {
            background-color: darkRed; /* 鼠标悬停时的背景颜色 */
        }
		
		button.lowGray {
            background-color: var(--bgInputColor);
            color: white; /* 按钮文字颜色 */
            padding: 5px 25px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        button.lowGray:hover {
            background-color: var(--btnForSelectHoverColor); /* 鼠标悬停时的背景颜色 */
        }
		
		button.squareRed {
            background-color: fireBrick; /* 红色按钮背景 */
            color: white; /* 按钮文字颜色 */
            padding: 5px 7px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
			margin-left: 7px;
        }

        button.squareRed:hover {
            background-color: darkRed; /* 鼠标悬停时的背景颜色 */
        }
		
		button.lowGreen {
            background-color: var(--btnColor);  /* 绿色按钮背景 */
            color: white; /* 按钮文字颜色 */
            padding: 5px 25px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        button.lowGreen:hover {
            background-color: var(--btnHoverColor); /* 鼠标悬停时的背景颜色 */
        }

		button.smallGreen {
            background-color: var(--bgInputColor); /* 绿色按钮背景 */
            color: white; /* 按钮文字颜色 */
            padding: 5px 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
			margin-left: 10px; /* 增加左间距 */
        }

        button.smallGreen:hover {
            background-color: var(--btnForSelectHoverColor) /* 鼠标悬停时的背景颜色 */
        }
		
		button.smallGreen.selected {
            background-color: var(--btnSelectedColor); /* 按钮选中状态背景色 */
		    border: 3px solid var(--btnSelectedBorderColor); /* 设置粗边框 */
        }
		
		/* 按钮与按钮紧挨时 */
		button + button {
            margin-left: 20px; /* 增加左右间距 */
        }
		
		/* 按钮与按钮紧挨时 */
		button.smallGreenMulti + button.smallGreenMulti {
            margin-left: 10px; /* 增加左右间距 */
        }

		.file-input {
			display: none;
		}

		.file-button {
			font-size: 16px;
			padding: 8px 15px;
			background-color: #4CAF50;
			color: white;
			border-radius: 5px;
			cursor: pointer;
			display: inline-block;
		}

pre {
	overflow-x: auto; 
	white-space: pre; 
	background-color: var(--bgInputColor) ; /* a kind of dark gray */
	padding: 20px; 
	border: 1px solid #ddd; 
	border-radius: 5px;
	tab-size: 2;
}

span.statusStress {
	font-weight: bold;
	color: yellow;
}

span.statusPass {
	font-weight: bold;
	color: lime;
}

span.statusUnpass {
	font-weight: bold;
	color: red;
}

span.coco {
	font-family: 'noto sans'; 
	font-weight: bold; 
	color: var(--cocoColor) ; 
}

span.id {
	font-family:  'noto sans';
	font-weight: bold; 
	color: var(--idColor) ;
}

img.logo {
	height: 1.5em; 
	vertical-align: bottom;
}


    .form-group {
        display: flex;
        align-items: center;
        margin-bottom: 1em;
    }
    .form-group label {
        flex: 0 0 60px; /* 控制 label 的宽度 */
        text-align: right; /* 让文字靠右对齐 */
        margin-right: 10px;
    }
    .form-group input,
    .form-group select {
		display: block; /* 让 textarea 和 input 独占一行 */
		font-size: 1em;
		color: #DCDCDC;           /* 设置文本颜色 */
        height: 25px; /* 设置高度为 */
		width: 160px;         /* 限制最大宽度为 */
        background-color: var(--bgInputColor); /* a kind of dark gray */
		padding: 0 0 0 10px;
        border: 1px solid #999; /* 添加边框 */
        border-radius: 5px; /* 可选：设置圆角 */
	}
	.form-group textarea {
		display: inline-block; /* 如果填 block 则是让 textarea 和 input 独占一行 */
		vertical-align: top; /* 顶部对齐，避免错位 */
		font-size: 1.3em;
		color: #DCDCDC;           /* 设置文本颜色 */
		flex: 1;
        height: 50px; /* 设置高度 */
		width: 215px;
        background-color: var(--bgInputColor); /* a kind of dark gray */
        padding:0; /* 移除默认内边距 */
		padding-left: 10px;
        border: 1px solid #999; /* 添加边框 */
        border-radius: 5px; /* 可选：设置圆角 */
	}
	
	.form-group button.multiGreen {
			font-size: 1em;
			display: flex;
			align-items: center;  /* 垂直居中 */
			justify-content: center;  /* 水平居中 */
            background-color: var(--bgInputColor); /* 绿色按钮背景 */
            color: white; /* 按钮文字颜色 */
			width: 80px;
			height: 30px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
			margin-left: 5px; /* 增加左间距 */
			padding: 0px;
        }

	.form-group button.multiGreen:hover {
            background-color: var(--btnForSelectHoverColor); /* 鼠标悬停时的背景颜色 */
        }
		
	.form-group button.multiGreen.selected {
            background-color: var(--btnSelectedColor); /* 按钮选中状态背景色 */
		    border: 3px solid var(--btnSelectedBorderColor); /* 设置粗边框 */
        }
		
	.form-group button.multiGreenLong {
			font-size: 1em;
			display: flex;
			align-items: center;  /* 垂直居中 */
			justify-content: center;  /* 水平居中 */
            background-color: var(--bgInputColor); /* 绿色按钮背景 */
            color: white; /* 按钮文字颜色 */
			width: 122px;
			height: 30px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
			margin-left: 5px; /* 增加左间距 */
			padding: 0px;
        }

	.form-group button.multiGreenLong:hover {
            background-color: var(--btnForSelectHoverColor); /* 鼠标悬停时的背景颜色 */
        }
		
	.form-group button.multiGreenLong.selected {
            background-color: var(--btnSelectedColor); /* 按钮选中状态背景色 */
		    border: 3px solid var(--btnSelectedBorderColor); /* 设置粗边框 */
        }	
		
    .form-actions {
        margin-left: 100px; /* 对齐按钮部分 */
    }
	
	        
.clock {
            font-size: 28px;
            font-weight: bold;
            color: #DCDCDC;
            margin: 20px;
        }
		
.priceDetail {
		font-size: 1.3em;
		color: #DCDCDC;           /* 设置文本颜色 */
		flex: 1;
        height: 200px; /* 设置高度 */
		width: 215px;
        background-color: #333; /* a kind of dark gray */
        padding: 10px;
        border: 1px solid #999; /* 添加边框 */
        border-radius: 5px; /* 可选：设置圆角 */
	}
	
.priceInput {
		font-size: 1.1em;
		color: #DCDCDC;           /* 设置文本颜色 */
		background-color: #333; /* a kind of dark gray */
		width: 90px;
        padding:5px; /* 移除默认内边距 */
		border: 1px solid #999; /* 添加边框 */
        border-radius: 5px; /* 可选：设置圆角 */
}

/* 对 Firefox 进行样式调整 */
input[type="number"] {
    -moz-appearance: textfield;
}

/* 对 Chrome, Safari, Edge, Opera 进行样式调整 */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}