/* 全局样式 */
/* ===== Base / Reset ===== */
body {
  font-family: Arial, sans-serif;
  background-color: #f8f9fa;
  color: #333333;
  margin: 0;
  padding: 0;
}
ul {
  padding: 0;
  margin: 0;
}
li {
  list-style: none;
}
/* 数量输入框样式 */
input[type="number"] {
  width: 10px;
  padding: 5px;
  margin: 5px 0;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
}

input[type="number"]:disabled {
  background-color: #f5f7fa;
  cursor: not-allowed;
}

input[type="number"]:focus {
  border-color: #4a90e2;
  outline: none;
}
img{
  max-width:100%;
  height:auto;
  display:block;
}

/* 导航栏样式 */
.navbar {
  background-color: #3b7ddd;
  color: #ffffff;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

/* 主内容区域样式 */
main {
  padding: 1px;
  min-height: 80vh;
}

/* 底部样式 */
.footer {
  background-color: #f8f9fa;
  color: #666666;
  padding: 10px 20px;
  text-align: center;
  margin-top: 20px;
}

.footer-content p {
  margin: 0;
}
/* 输入框select样式 */
.custom-select {
  /* 基本样式 */
  padding: 5px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  color: #333;
  appearance: none; /* 去掉默认的下拉箭头 */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" stroke="#999" stroke-width="2" d="M6 9l6 6 6-6"/></svg>'); /* 自定义下拉箭头 */
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 24px 24px;
  width:35px; /* 或者根据需要调整宽度 */
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

.custom-select:focus {
  /* 聚焦时的样式 */
  border-color: #409eff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}
/* 输入框样式 */
.custom-input {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

.custom-input:focus {
  border-color: #4a90e2;
  outline: none;
}

/* 按钮样式 */
.custom-button {
  background-color: #4a90e2;
  color: #ffffff;
  border: none;
  border-radius: 4px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  outline: none;
  transition: background-color 0.3s ease;
}

.custom-button:hover {
  background-color: #3b7ddd;
}

.custom-button:active {
  background-color: #3068b8;
  transform: translateY(2px);
}

.custom-button:disabled {
  background-color: #cccccc;
  color: #ffffff;
  cursor: not-allowed;
}
.lv-button {
  background-color: #67c23a;
}

/* 链接样式 */
.alink {
  color: #3b7ddd;
  text-decoration: underline;
}
.alink:hover {
  color: #67c23a;
  text-decoration: underline;
}

/* 验证码图片样式 */
.captcha-img {
  cursor: pointer;
  width: 100px;
  height: 40px;
  margin-left: 10px;
}

/* 登录页面容器样式 */
.login-container {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 350px;
}

/* 费用设置页面容器样式 */
.set-container {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 350px;
}

.mydiv{
	border-radius: 10px;
	padding: 20px;
	margin: 30px;
	border:solid 1px #e7e7e7;
}
.w {
		width: 100%;
		height: auto;
	}
	.w98{
		width: 98%;
		height: auto;
	}
	.w95{
		width: 95%;
		height: auto;
	}
	.w90{
		width: 90%;
		height: auto;
	}
	.w25{
		width: 25%;
		height: auto;
		}
	.w20{
		width: 20%;
		height: auto;
		}
	.w22{
		width: 22%;
		height: auto;
		}
	.w44{
		width: 44%;
		height: auto;
		}
	.w50{
		width: 50%;
		height: auto;
		}
	.w56{
		width: 56%;
		height: auto;
		}
	.w60{
		width: 60%;
		height: auto;
		}
	.w70{
		width: 70%;
		height: auto;
		}
	.w750{
		width: 750rpx;
		height: auto;
		}
	.w700{
		width: 700rpx;
		height: auto;
		}
	.h50{
		height: 50px;
		line-height: 50px;
	}
	.wpx30{
		width: 30px;
	}
.bg{
	background-color: #fff;
}
.bglan{
	background-color:#c6dcfc;
	color: #409eff;
	padding: 10px;
}
/* 文字样式 */
.r {
  color: #ff0000;
}

.grey {
  color: rgba(0, 0, 0, 0.1);
}
.grey1 {
  color: #ccc;
}
.grey2 {
  color: #c1c1c1;
}
.fs12 {
  font-size: 12px;
}
.fs14 {
  font-size: 14px;
}
.fs16 {
  font-size: 16px;
}
.fs18 {
  font-size: 18px;
}
.fs24 {
  font-size: 24px;
}
.fw500 {
  font-weight: 500;
}
.fw600 {
  font-weight: 600;
}
.fw800 {
  font-weight: 800;
}

/*文字位置*/
.tal {
	 text-align: left;
	}
.tac {
		text-align: center;
	}
.tar {
		text-align: right;
	}
/*位置样式*/

/*边距*/
	.pt5{
		padding-top:5px ;
	   }
	.p5 {
		padding: 5px;
	}
	.p10 {
		padding: 10px;
	}
	.p20 {
		padding: 20px;
	}
	.pt8{
		padding-top:8px ;
	   }
	.pt10{
		padding-top:10px ;
	   }
	.pt12{
		padding-top:12px ;
	   }
	.pt15{
		padding-top:15px ;
	   }
	.pt20{
		padding-top:20px ;
	   }
	.pt30{
		padding-top:40px ;
	   }
	.pt50{
		padding-top:50px ;
	   }
	.pt100{
		padding-top:100px ;
	   }
	.pt150{
		padding-top:150px ;
	   }
	.pt170{
		padding-top:170px ;
	   }
	.pt190{
		padding-top:190px ;
	   }
	.pt200{
		padding-top:200px ;
	   }
	.pt220{
		padding-top:220px ;
	   }
	.pl5{
	   	padding-left:5px ;
	      }
	.pl10{
	   	padding-left:10px ;
	      }
	.pl15{
	   	padding-left:15px ;
	      }
	.pl20{
		padding-left:20px ;
	   }
	.pl25{
		padding-left:25px ;
	   }
	.pl30{
		padding-left:30px ;
	   }
	.pl100{
		padding-left:100px ;
	   }
	.pr5{
	   	padding-right:5px ;
	    }
	.pr10{
	   	padding-right:10px ;
	    }
	.pr20{
	   	padding-right:20px ;
	    }
	.pr30{
	   	padding-right:30px ;
	    }
	.pl40{
	   	padding-left:40px ;
	    }
	.pr50{
	   	padding-right:50px ;
	    }
	.pb5{
	   	padding-bottom:5px ;
	    }
	.pb10{
	   	padding-bottom:10px ;
	    }
	.pb20{
	   	padding-bottom:20px ;
	    }
	.pb30{
	   	padding-bottom:30px ;
	    }
	.pb50{
	   	padding-bottom:50px ;
	    }
	.pb60{
	   	padding-bottom:60px ;
	    }
	.pb70{
	   	padding-bottom:70px ;
	    }
/* 容器样式 */
/*位置上下居中*/
.jc {
	display:flex;
	justify-content: center;
    align-items: center;
}
.je {
  justify-content: flex-end;
}

/*布局横排放*/
	.fr{
		display:flex;
		flex-direction: row;
	   }
	/*布局竖排放*/
	.fc{
		display:flex;
		flex-direction: column;
	   }
	 .frb{
		 /*横向布局-两端对齐*/
	 	display:flex;
	 	flex-direction: row;
		-webkit-justify-content: space-between;
		justify-content: space-between;
	    }
	.fw{
		/*自动换行*/
		flex-wrap: wrap;
	}

/*边框修饰*/
	.x{
			/*边框*/
		border:solid 1px #e7e7e7;
	}
	.xl{border-left: solid 1px #000;}
	.xb{
		/*底线*/
		border-bottom-style: solid;
		border-bottom-width: 1px;
		border-bottom-color: #e7e7e7;
	}
	.xb1{
		/*底线虚线*/
		border-bottom-style:dashed;
		border-bottom-width: 1px;
		border-bottom-color: #e7e7e7;
		}
	.bor{
		/*默认圆角10*/
		border-radius:10px;
			}
	.bor10{
		/*默认圆角10*/
		border-radius:10px 10px 0px 0px;
		}
	.bor5{
		/*圆角5*/
		border-radius:5px;
		}
.user-card {
  background: #fff;               /* 白色卡片 */
  border-radius: 12px;            /* 圆角 */
  padding: 16px;                  /* 内边距 */
  margin-bottom: 16px;            /* 块间距 */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* 阴影增加立体感 */
  transition: transform 0.2s, box-shadow 0.2s;
}