/* Estilos base */
	:root {
		--primary-color: #3E79FF;
		--secondary-color: #4CAF50;
		--text-color: #333;
		--light-bg: #f8f9fa;
		--border-color: #e0e0e0;
		--success-color: #28a745;
		--warning-color: #ffc107;
		--danger-color: #dc3545;
		--info-color: #17a2b8;
	}

	body {
		font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
		line-height: 1.6;
		color: var(--text-color);
		background-color: var(--light-bg);
	}

	/* Container principal */
	.container {
		max-width: 1200px;
		margin: 0 auto;
		padding: 0 15px;
	}

	/* Cards */
	.card {
		background: white;
		border-radius: 15px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
		margin-bottom: 20px;
		border: none;
		overflow: hidden;
	}

	.card:hover {
		transform: translateY(-5px);
		box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
	}

	.card-header {
		background: white;
		border-bottom: 1px solid var(--border-color);
		padding: 20px;
		border-radius: 15px 15px 0 0;
	}

	.card-body {
		padding: 20px;
	}

	.card-title {
		color: var(--primary-color);
		font-weight: 600;
		margin-bottom: 15px;
		display: flex;
		align-items: center;
	}

	.card-title i {
		margin-right: 10px;
		font-size: 1.2em;
	}

	/* Formulário */
	.form-control {
		height: auto;
		padding: 12px 15px;
		border: 1px solid var(--border-color);
		border-radius: 8px;
		transition: all 0.3s ease;
		font-size: 1rem;
		background-color: white;
	}

	.form-control:focus {
		border-color: var(--primary-color);
		box-shadow: 0 0 0 0.2rem rgba(62, 121, 255, 0.25);
	}

	.form-control:disabled {
		background-color: #f8f9fa;
		cursor: not-allowed;
	}

	label {
		font-weight: 500;
		color: var(--text-color);
		display: block;
	}

	.text-danger {
		color: var(--danger-color) !important;
	}

	/* Botões */
	.btn {
		padding: 12px 25px;
		border-radius: 8px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.5px;
		transition: all 0.3s ease;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	.btn i {
		margin-right: 8px;
	}

	.btn-primary {
		border: none;
		color: white;
	}

	.btn-primary:hover {
		transform: translateY(-2px);
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	}

	.btn-primary:disabled {
		background: #ccc;
		cursor: not-allowed;
		transform: none;
		box-shadow: none;
	}

	/* Responsividade */
	@media (max-width: 768px) {
		.container {
			padding: 0 10px;
		}

		.card {
			margin-bottom: 15px;
		}

		.form-control {
			padding: 10px;
		}

		.btn {
			width: 100%;
			margin-bottom: 10px;
		}

		.card-title {
			font-size: 1.1rem;
		}

		.form-group {
			margin-bottom: 1rem;
		}
	}

	/* Animações */
	@keyframes fadeIn {
		from { opacity: 0; transform: translateY(20px); }
		to { opacity: 1; transform: translateY(0); }
	}

	.card {
		animation: fadeIn 0.5s ease-out;
	}

	/* Melhorias de acessibilidade */
	.form-control:focus,
	.btn:focus {
		outline: none;
		box-shadow: 0 0 0 3px rgba(62, 121, 255, 0.25);
	}

	/* Mensagens de erro/sucesso */
	.alert {
		border-radius: 8px;
		padding: 15px;
		margin-bottom: 20px;
		border: none;
	}

	.alert-success {
		background-color: #d4edda;
		color: #155724;
	}

	.alert-danger {
		background-color: #f8d7da;
		color: #721c24;
	}

	/* Tooltips e ajuda */
	.help-text {
		font-size: 0.875rem;
		color: #666;
		margin-top: 0.25rem;
	}

	.help-text ul {
		margin-top: 0.5rem;
	}

	.help-text li {
		margin-bottom: 0.25rem;
	}

	.help-text i {
		margin-right: 5px;
	}

	/* Validação de formulário */
	.form-control.is-invalid {
		border-color: var(--danger-color);
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
		background-repeat: no-repeat;
		background-position: right calc(0.375em + 0.1875rem) center;
		background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
	}

	.invalid-feedback {
		display: none;
		color: var(--danger-color);
		font-size: 0.875rem;
		margin-top: 0.25rem;
	}

	.form-control.is-invalid ~ .invalid-feedback {
		display: block;
	}

	/* Slider de verificação */
	.challenge-container {
		background: var(--light-bg);
		padding: 20px;
		border-radius: 8px;
		margin: 20px 0;
		border: 1px solid var(--border-color);
	}

	.slider-container {
		position: relative;
		width: 100%;
		height: 40px;
		background: #e0e0e0;
		border-radius: 20px;
		margin: 20px 0;
		overflow: hidden;
	}

	.slider-handle {
		position: absolute;
		width: 40px;
		height: 40px;
		background: var(--primary-color);
		border-radius: 50%;
		left: 0;
		top: 0;
		cursor: pointer;
		transition: all 0.3s ease;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 20px;
		user-select: none;
		z-index: 2;
	}

	.slider-track {
		position: absolute;
		width: 0;
		height: 100%;
		background: var(--success-color);
		border-radius: 20px;
		transition: width 0.3s ease;
		z-index: 1;
	}

	.slider-text {
		position: absolute;
		width: 100%;
		text-align: center;
		line-height: 40px;
		color: #666;
		user-select: none;
		z-index: 1;
	}

	.slider-success {
		background: var(--success-color) !important;
	}

	.slider-success:hover {
		background: #218838 !important;
	}

	/* Ícones e cores */
	.text-warning { color: var(--warning-color) !important; }
	.text-info { color: var(--info-color) !important; }
	.text-success { color: var(--success-color) !important; }
	.text-primary { color: var(--primary-color) !important; }

	/* Espaçamento e margens */
	.mt-4 { margin-top: 1.5rem; }
	.mb-4 { margin-bottom: 1.5rem; }
	.mr-2 { margin-right: 0.5rem; }
	.ml-3 { margin-left: 1rem; }
	.pt-2 { padding-top: 0.5rem; }

	.div_body {
		background-color: #f2f1f1;
	}