:root {
				--primary-color: #2c7da0;
				--secondary-color: #a9d6e5;
				--light-bg: #f8f9fa;
				--dark-text: #212529;
				--border-color: #dee2e6;
				--success-color: #198754;
				--warning-color: #ffc107;
				--error-color: #dc3545;
			}
		 
			.grade-input-group {
				margin-bottom: 1.5rem;
			}
			
			.grade-input {
				max-width: 120px;
				text-align: center;
			}
			
			.grade-slider {
				width: 100%;
				margin-top: 0.5rem;
			}
			
			.grade-visual {
				height: 20px;
				background: linear-gradient(to right, #dc3545 0%, #ffc107 50%, #198754 100%);
				border-radius: 10px;
				margin: 1rem 0;
				position: relative;
			}
			
			.grade-marker {
				position: absolute;
				top: -5px;
				width: 3px;
				height: 30px;
				background-color: #000;
			}
			
			.grade-label {
				position: absolute;
				top: 25px;
				font-size: 0.8rem;
				transform: translateX(-50%);
				white-space: nowrap;
			}
			
			.usage-step {
				display: flex;
				margin-bottom: 1.5rem;
				align-items: flex-start;
			}
			
			 
			.result-content{font-size:1.5rem}
			
			
		
			
			.grade-table {
				width: 100%;
				border-collapse: collapse;
				margin: 1.5rem 0;
			}
			
			.grade-table th, .grade-table td {
				border: 1px solid var(--border-color);
				padding: 0.75rem;
				text-align: center;
			}
			
			.grade-table th {
				background-color: rgba(44, 125, 160, 0.1);
			}
			
			.grade-table tr:nth-child(even) {
				background-color: rgba(0, 0, 0, 0.02);
			}
			
			.grade-table tr:hover {
				background-color: rgba(44, 125, 160, 0.05);
			}
			
			.grade-scale-selector {
				display: flex;
				gap: 1rem;
				margin-bottom: 1.5rem;
				flex-wrap: wrap;
			}
			
			.grade-scale-btn {
				flex: 1;
				min-width: 120px;
				text-align: center;
			}