blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5,
	h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul {
	margin: 0;
	padding: 0
}

a ,a:visited{
	text-decoration: none;
	outline: none;
	text-shadow: none;	
	color: #2c3e50;
}
a:hover, a.hover {
	text-decoration: none;
	color: #3eaf7c;
}
.clear{
	clear: both;
	display: block;
}
h2{
	font-size: inherit;
}
/* #283155 */
html {
	height: 100%;
	font-family: "Inter", sans-serif;
	line-height: 1.6;
	color: #1a202c;
	background: linear-gradient(to bottom right, #f8fafc, #f1f5f9); /* from-slate-50 to-slate-100 */
	}
html textarea,html input{
	font-family: "Inter", sans-serif;

}
@media (min-width: 1200px) {
	.container{
		width: 1200px;
	}
}
@media (max-width: 1200px) {
	.container{
		width: 100%;
	}
}
h1{
	font-size: 18px;
	line-height: 24px;
}
.indexicon{
	width: 68%;

}
.height30{height: 30px;}
.height20{height: 20px;}

.normalgraybg{
	/* background-color: #FFFFFF; */
	/* #f7f6f2 */
}
/*解决密码框黄色背景*/
input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0px 1000px white inset;
}
input{outline: 0px;}
img, fieldset {
	border: 0;
}
body, button, input, select, textarea { /* for ie */
	font-size: 16px  ;
}

ul, ol, li {
	list-style: none;
}
.bookneirong pre {
	background: #2d2d2d;
	border-radius: 8px;
	border: 1px solid #dee0e3;
	color: #7ec699;
	line-height: 22px;
	padding: 8px 16px;
	overflow-x: auto;

}
/*文本溢出显示...*/
 .elips1{
	 overflow: hidden;
	 text-overflow: ellipsis;
	 display: -webkit-box ;
	 -webkit-box-orient: vertical;
	 -webkit-line-clamp:1;
 }
.elips2{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2; // 限制显示的行数
}
 .elips3{
 	overflow: hidden;
 	text-overflow: ellipsis;
 	display: -webkit-box;
 	-webkit-box-orient: vertical;
 	-webkit-line-clamp: 3; // 限制显示的行数
 }
.elips4{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4; // 限制显示的行数
}
/* Basic Reset & Global Styles */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-style: normal;
}

body {

	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 16px;
	box-sizing: border-box;
}


.category-section {
	padding: 0px 0 15px;
}



.category-buttons {
	display: block;
}

.category-btn {
	float: left;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 10px 10px;
	background-color: var(--white);
	border-radius: 8px;
	text-decoration: none;
	color: var(--text-color);
	transition: all 0.3s ease;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	border: 1px solid #e0e0e0;
	text-align: center;
	margin-right: 10px;
	margin-top: 10px;
}

.category-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 5px 15px rgba(62, 175, 124, 0.2);
	border-color: var(--primary-color);
	color: var(--primary-color);
}



.category-btn span {
	font-size: 16px;
	font-weight: 500;
}
body .iconbtncls{
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	line-height: 28px;
}

.btnimgicon{
	float: left;
	width: 28px;
	height: 28px;
	margin-right: 8px;
}

/* 手机设备样式 */
@media (max-width: 480px) {
	body .headerh1warp{
		padding-bottom: 10px;
	}
	body .tooltith1 {
		padding-top: 15px;
		padding-bottom: 3px;
	}
	.category-btn span {
		font-size: 14px;
	}
	body .tool-card{
		width: 100% ;
		margin-right: 0;
	}
}
/* Responsive for tool pages */
@media (min-width: 480px) and (max-width: 768px) {
	body .tool-card{
		width: calc( 48% - 10px ) ;

	}
}
/* Header */
.header {
	background-color: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	border-bottom: 1px solid #e2e8f0;
	padding: 7px 0 10px;
}

.header .container {
	display: flex;

	justify-content: space-between;
	align-items: center;
}

.logo {
	display: flex;
	align-items: center;
	gap: 8px;
}

.tooltith1{
	padding-top: 20px;
	padding-bottom: 10px;

}

.logo span a{
	font-size: 24px;
	font-weight: 700;
	color: #3EAF7C;
}



.nav a {
	font-weight: 600;
	color: #4a5568;
	transition: color 0.2s ease-in-out;

	padding: 0 10px;
}

.nav a:hover,
.nav a.active {
	color: #3EAF7C; /* blue-600 */
}





/* Tools Grid */
.tools-grid {
	padding-bottom: 64px;
}



.category-header {
	display: flex;
	align-items: center;

}

.category-icon {
	width: 32px;
	height: 32px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 12px;
	color: #fff;
	font-size: 14px;
}

.category-icon.bg-blue-500 {
	background-color: #3EAF7C;
}
.category-icon.bg-green-500 {
	background-color: #10b981;
}
/* Add more colors as needed */

.category-header h3 {
	font-size: 16px;
	font-weight: 700;
	color: #1a202c; /* gray-900 */
}



.tool-list {
	display:block;
}

.tool-card {
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	padding:10px 12px;
	height: 100%;
	transition: box-shadow 0.2s ease-in-out, color 0.2s ease-in-out;
	display: block;
	margin-right: 10px;
	margin-top: 10px;
	width: 280px;
	float: left;
}

.tool-card:hover {
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.tool-card h4 {
	font-size: 16px;
	font-weight: 600;
	height: 52px;

	color: #1a202c;
	transition: color 0.2s ease-in-out;
}

.tool-card:hover h4 {
	color: #3EAF7C; /* blue-600 */
}
.headerh1warp{
	text-align: center;
	padding-bottom: 20px;
}
.tool-card p {
	font-size: 14px;
	color: #4a5568;
	height: 66px;
}

.tool-card.disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.tool-card.disabled:hover {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* No hover shadow for disabled */
}

.tool-card.disabled h4 {
	color: #4a5568; /* gray-700 */
}



/* Footer */
.footer {
	background-color: #fff;
	border-top: 1px solid #e2e8f0;
	padding: 10px 0;
	margin-top: auto; /* Pushes footer to the bottom */
}

.footer .container {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.footer-logo {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
}


.footer-logo span {
	font-weight: 600;
	color: #1a202c; /* gray-900 */
}

.footer p {
	color: #718096; /* gray-500 */
	font-size: 14px;
}







.card {
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	padding: 24px;
}

.card-header {
	margin-bottom: 16px;
}

.card-header h2 {
	font-size: 18px;
	font-weight: 600;
	color: #1a202c;
	margin-bottom: 4px;
}

.card-header p {
	font-size: 14px;
	color: #4a5568;
}

.card-content {
	display: flex;
	flex-direction: column;
	gap: 16px;
}


.button {
	background-color: #3EAF7C; /* blue-600 */
	color: #fff;
	padding: 12px 24px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	font-weight: 600;
	transition: background-color 0.2s ease-in-out;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.button:hover {
	background-color: #2563eb; /* blue-700 */
}

.button.outline {
	background-color: #fff;
	color: #4a5568;
	border: 1px solid #cbd5e0;
}

.button.outline:hover {
	background-color: #f7fafc;
	border-color: #a0aec0;
}

.button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}



.text-center {
	text-align: center;
}


.text-green-600 {
	color: #059669;
}
.text-red-600 {
	color: #dc2626;
}




@media (min-width: 768px){



	.footer .container {
		flex-direction: row;
		justify-content: space-between;
	}
	.footer-logo {
		margin-bottom: 0;
	}

}