/* 基础样式设置 */
 * {
 	margin: 0;
 	padding: 0;
 	box-sizing: border-box;
 	font-family: 'Inter', system-ui, -apple-system, sans-serif;
 }
html{
	font-size:10px;
}
 body {
 	background: linear-gradient(135deg, #F8FAFC, #F1F5F9);
 	min-height: 100vh;
 	color: #1E293B;
	font-size:14px;
	

 }
 .cl1{color: #323232!important;}
 .cl2{color: #646464!important;}
 .cl3{color: #969696!important;}
 .cl-f30{color: #f30 !important;}
 .cl-red{color: #c12725 !important;}
 .cl-primary { color: #007bff!important;}
 .cl-secondary {color: #6c757d!important;}
 .cl-success{color: #28a745!important;}
 .cl-danger{color: #dc3545!important}
 .cl-warning{color: #ffc107!important}
 .cl-info { color: #17a2b8!important;}
 .cl-light { color: #f8f9fa!important;}
 .cl-dark{color:#343a40!important;}
 .cl-muted {color: #6c757d!important;}
 .cl-white{color: #fff !important;}
 .mgb-10{
	 margin-bottom: 10px;
 }
.input-flex {
	display: flex;
	flex-direction: row;
	margin-bottom: 1px;
	padding: 1rem;
	background-color: #fff;
}

.input-flex-label {
	width: 8rem;
	line-height: 3.6rem;
	font-size: 1.4rem;
	color: #333;
	display: block;
}

.input-flex-require {
	display: flex;
	flex-direction: row;
	position: relative;
	align-items: center;
	font-family: iconfont;

}

.input-flex-require:after{
	content:"\e60d";
	color:red;
	position: absolute;
	left: -1rem;
	font-size:1.2rem;
	transform: scale(0.5);
}

.input-flex-txt {
	flex: 1;
	line-height: 3.6rem;
	color: #646464;
}

.input-flex-text,
.input-flex-select {
	flex: 1;
	height: 3.6rem;
	box-sizing: border-box;
	display: block;
	border: 1px solid #eee !important;
	padding: 0 0.5rem;
	font-size: 1.4rem;
	margin: 0;
	width: 10rem;
}

.input-flex-select {
	-webkit-appearance: menulist-button;
	background-color: #fff;
	color: #323232;
}

.input-flex-note {
	margin-left: 0.3rem;
	color: #666;
	justify-content: center;
}

.input-flex-btn {
	width: 10rem;
	height: 3.6rem;
	line-height: 3.6rem;
	background-color: #007bff;
	box-sizing: border-box;
	border-top-right-radius: 1rem;
	border-bottom-right-radius: 1rem;
	margin-left: -0.5rem;
	color: #fff;
	font-size: 1.4rem;
	text-align: center;
	cursor: pointer;
}

/**textarea**/
.textarea-flex {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	background-color: #fff;
	margin-bottom: 0.5rem;
}

.textarea-flex-label {
	margin-bottom: 1rem;
	color: #323232;
}

.textarea-flex-text {
	height: 20rem;
	border: 1px solid #eee;
	border-radius: 0.5rem;
	padding: 0.5rem;
	box-sizing: border-box;
	width:100%;
}
 .btn-row-submit {
 	margin: 2rem auto;
 	background-color: #007bff;
 	text-align: center;
 	padding: 1.2rem 0rem;
	line-height: 1;
 	color: #fff !important;
 	font-size: 1.6rem;
 	border-radius: 0.6rem;
 	cursor: pointer;
 	display: block;
 	box-sizing: border-box;
 	width: 96%;
 }
 
 .toast {
	 display: flex;
	 flex-direction: row;
 	position: fixed;
 	bottom: 10rem;
 	left: 0rem;
 	right: 0rem;
 	z-index: 9999;
 	padding:0.8rem;
 	font-size: 1.4rem;
 	line-height: 1.5;
 	width: 20rem;
 	text-align: center;
 	color: #fff;
 	background-color: #1E1E1E;
 	margin: 0 auto;
 }
 
 .toast-active {
 	
	
 }
 
 .toast-success {
 	background-color: #27AE60 !important;
 }
 
 .toast-error {
 	background-color: #C0392B !important;
 }
 
 .toast-info {
 	background-color: #F1C40F !important;
 }
 
 .page {
 	padding: 20px;
 }

 .tabs-border {
 	display: flex;
 	flex-direction: row;
 	border-bottom: 1px solid #eee;
 	line-height: 36px;
 	padding: 0px 5px;
 	background-color: #fff;

 }

 .tabs-border-item {
 	flex: 1;
 	text-align: center;
 	cursor: pointer;
	font-size: 1.4rem;
 }

 .tabs-border-item-inner {
 	padding: 0px 20px;
 }

 .tabs-border-active {
 	border-bottom: 1px solid #f60;
 }

 .tabs-border-box {
 	display: none;
 	flex-direction: column;
 }

 .tabs-border-box-active {
 	display: flex;
 }

 .container {
 	max-width: 680px;
 	margin: 0 auto;

 }

 /* 标题样式 */
 .header {
 	position: fixed;
 	top: 0;
 	left: 0;
 	right: 0;
 	height: 44px;
 	background-color: #456baa;
 	z-index: 999;
 }



 .header-title {
 	color: #fff;
 	line-height: 44px;
 	text-align: center;
	font-size: 1.6rem;
 }

 .header-row {
 	height: 44px;
 }

 /* 乐器选择器 */
 .instrument-selector {
 	background-color: white;
 	border-radius: 12px;
 	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 	padding: 16px;
 	margin-bottom: 30px;
 	overflow-x: auto;
 }

 .instrument-buttons {
 	display: flex;
 	gap: 12px;
 	min-width: max-content;
 	padding-bottom: 8px;
 }

 .instrument-btn {
 	padding: 8px 16px;
 	border-radius: 8px;
 	font-weight: 500;
 	transition: all 0.2s ease;
 	border: none;
 	cursor: pointer;
 	background-color: #E2E8F0;
 	color: #334155;
 }

 .instrument-btn.active {
 	background-color: #3B82F6;
 	color: white;
 }

 .instrument-btn:hover {
 	opacity: 0.9;
 	transform: translateY(-1px);
 }

 /* 调音显示区域 */
 .tuning-display {
 	background-color: white;
 	border-radius: 12px;
 	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 	padding: 24px;
 	margin-bottom: 30px;
 }

 /* 当前音高显示 */
 .pitch-info {
 	text-align: center;
 	margin-bottom: 24px;
 }

 #current-note {
 	font-size: clamp(1.5rem, 4vw, 2rem);
 	color: #64748B;
 	margin-bottom: 4px;
 }

 #pitch-display {
 	font-size: clamp(2.5rem, 8vw, 4rem);
 	font-weight: bold;
 	color: #3B82F6;
 }

 #difference {
 	color: #64748B;
 }

 /* 音高指示器 */
 .pitch-indicator {
 	margin-bottom: 32px;
 }

 .pitch-gradient {
 	height: 12px;
 	border-radius: 6px;
 	background: linear-gradient(90deg, #EF4444, #F59E0B, #10B981, #F59E0B, #EF4444);
 	margin-bottom: 8px;
 	position: relative;
 	overflow: hidden;
 }

 .pitch-gradient::after {
 	content: '';
 	position: absolute;
 	left: 50%;
 	top: 0;
 	bottom: 0;
 	width: 4px;
 	background-color: white;
 	transform: translateX(-50%);
 }

 .pitch-labels {
 	display: flex;
 	justify-content: space-between;
 	font-size: 12px;
 	color: #64748B;
 }

 /* 调音仪表 */
 .tuning-gauge {
 	position: relative;
 	height: 160px;
 	margin-bottom: 16px;
 }

 .gauge-container {
 	position: absolute;
 	inset: 0;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }

 .gauge-scale {
 	width: 100%;
 	height: 4px;
 	display: flex;
 	justify-content: space-between;
 	padding: 0 32px;
 }

 .scale-mark {
 	width: 2px;
 	background-color: #CBD5E1;
 }

 .scale-mark.full {
 	height: 100%;
 }

 .scale-mark.half {
 	height: 50%;
 }

 #gauge-needle {
 	position: absolute;
 	height: 64px;
 	width: 4px;
 	background-color: #EF4444;
 	border-radius: 4px 4px 0 0;
 	transform-origin: bottom center;
 	transition: transform 0.1s ease-out;
 }

 /* 状态指示 */
 .status-indicator {
 	text-align: center;
 }

 #tuning-status {
 	display: inline-block;
 	padding: 8px 16px;
 	border-radius: 999px;
 	background-color: #F1F5F9;
 	color: #64748B;
 }

 /* 音符区域 */
 .notes-container {
 	background-color: white;
 	border-radius: 12px;
 	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 	padding: 16px;
 	margin-bottom: 30px;
 }

 #notes-grid {
 	display: grid;
 	grid-template-columns: repeat(6, 1fr);
 	gap: 8px;
 }

 .note-btn {
 	padding: 8px 4px;
 	border-radius: 8px;
 	background-color: #F1F5F9;
 	color: #334155;
 	text-align: center;
 	font-size: 14px;
 	border: none;
 	cursor: pointer;
 	transition: all 0.2s ease;
 }

 .note-btn .frequency {
 	font-size: 12px;
 	opacity: 0.7;
 }

 .note-btn.note-active {
 	background-color: #3B82F6;
 	color: white;
 }

 .note-btn:hover {
 	opacity: 0.9;
 	transform: translateY(-1px);
 }

 /* 控制按钮 */
 .control-buttons {
 	display: flex;
 	justify-content: center;
 	margin-bottom: 30px;
 }

 #start-btn,
 #stop-btn {
 	padding: 12px 32px;
 	border-radius: 999px;
 	font-weight: 500;
 	transition: all 0.2s ease;
 	border: none;
 	cursor: pointer;
 	display: flex;
 	align-items: center;
 	gap: 8px;
 }

 #start-btn {
 	background-color: #3B82F6;
 	color: white;
 }

 #stop-btn {
 	background-color: #94A3B8;
 	color: white;
 	display: none;
 }

 #start-btn:hover,
 #stop-btn:hover {
 	opacity: 0.9;
 	transform: translateY(-2px);
 	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }

 /* 信息区域 */
 .info-text {
 	text-align: center;
 	color: #64748B;
 	font-size: 14px;
 }

 /* 响应式调整 */
 @media (max-width: 360px) {
 	.container {
 		padding: 10px 0;
 	}

 	#notes-grid {
 		grid-template-columns: repeat(3, 1fr);
 	}

 	.tuning-gauge {
 		height: 120px;
 	}

 	#gauge-needle {
 		height: 48px;
 	}
 }

 /* 加载状态 */
 .loading-overlay {
 	position: fixed;
 	top: 0;
 	left: 0;
 	right: 0;
 	bottom: 0;
 	background: rgba(255, 255, 255, 0.8);
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	z-index: 1000;
 	backdrop-filter: blur(3px);
 }

 .spinner {
 	width: 50px;
 	height: 50px;
 	border: 5px solid #f3f3f3;
 	border-top: 5px solid #3B82F6;
 	border-radius: 50%;
 	animation: spin 1s linear infinite;
 }

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

 	100% {
 		transform: rotate(360deg);
 	}
 }