:root {
	/* Cores Fixas (Projeto Universal) */
	--theme-color: #209869;
	--theme-light: #e8f5e9;

	/* UI Fixa (Mesmo Design System) */
	--color-dark: #1f2937;
	--color-gray-soft: #f3f4f6;
	--font-main: 'Inter', sans-serif;
	--border-radius-lg: 1rem;
	--shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--nav-height: 70px;
}

body {
	font-family: var(--font-main);
	background-color: var(--color-gray-soft);
	color: var(--color-dark);
	padding-top: var(--nav-height);
	transition: background-color 0.3s ease;
}

/* Skip link */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.sr-only-focusable:focus {
	position: static;
	width: auto;
	height: auto;
	padding: 0.5rem;
	margin: 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
	background: var(--theme-color);
	color: white;
	z-index: 1000;
}

/* Botões */
.btn-theme {
	background-color: var(--theme-color);
	color: white;
	border: none;
	transition: all 0.3s ease;
	font-weight: 600;
	letter-spacing: 0.5px;
}
.btn-theme:hover {
	background-color: color-mix(in srgb, var(--theme-color), black 10%);
	color: white;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--theme-color), transparent 60%);
}
.btn-theme:focus {
	outline: 2px solid var(--theme-color);
	outline-offset: 2px;
}

/* Navbar MestreLoto */
.navbar-custom {
	background-color: white;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
	height: var(--nav-height);
}

.navbar-brand {
	font-weight: 800;
	letter-spacing: -0.5px;
	color: var(--color-dark);
	display: flex;
	align-items: center;
	gap: 8px;
}

.brand-icon {
	color: var(--theme-color);
	transition: color 0.3s ease;
	font-size: 1.5rem;
}

.nav-link {
	font-weight: 600;
	color: #6b7280;
	padding: 0.5rem 1rem !important;
	border-radius: 0.5rem;
	transition: all 0.2s;
}

.nav-link:hover {
	color: var(--theme-color);
	background-color: var(--theme-light);
}

.nav-link.active {
	color: var(--theme-color);
	background-color: color-mix(in srgb, var(--theme-color), white 90%);
}

/* Card Principal */
.card-custom {
	border: none;
	border-radius: var(--border-radius-lg);
	background: white;
	box-shadow: var(--shadow-soft);
	border-top: 5px solid var(--theme-color);
	transition: border-color 0.3s ease;
}

/* Tabs Customizadas para o Tema */
.nav-pills .nav-link {
	color: #6b7280;
	background: transparent;
	border: 1px solid #e5e7eb;
	margin-right: 0.5rem;
	margin-bottom: 0.5rem;
	transition: all 0.3s ease;
}

.nav-pills .nav-link:hover {
	border-color: var(--theme-color);
	color: var(--theme-color);
}

.nav-pills .nav-link.active {
	background-color: var(--theme-color);
	border-color: var(--theme-color);
	color: white;
	box-shadow: 0 4px 6px color-mix(in srgb, var(--theme-color), transparent 60%);
}

/* Toggle Switch Custom */
.form-check-input:checked {
	background-color: var(--theme-color);
	border-color: var(--theme-color);
}


/* Inputs & Selects */
.form-control:focus, .form-select:focus {
	border-color: var(--theme-color);
	box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--theme-color), transparent 75%);
}

.form-select {
	transition: border-color 0.3s ease;
	border: 1px solid #e5e7eb;
}

.game-select-wrapper {
	position: relative;
}

/* Resultados */
.game-row {
	transition: all 0.2s;
	border-left: 4px solid transparent;
	margin-bottom: 0.5rem;
	border-radius: 0.5rem !important;
	border: 1px solid #e5e7eb;
}

.game-row:hover {
	background-color: #f9fafb;
	transform: translateX(4px);
}

/* Bolas */
.ball {
	width: 2rem;
	height: 2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-weight: 700;
	font-size: 0.85rem;
	margin: 0.15rem;
	background-color: #e5e7eb;
	color: #9ca3af;
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.ball.hit {
	background-color: var(--theme-color);
	color: white;
	transform: scale(1.15);
	box-shadow: 0 4px 6px rgba(0,0,0,0.15);
}

.hits-badge {
	background-color: #9ca3af;
	color: white;
	font-size: 0.75rem;
	padding: 0.35em 0.8em;
	border-radius: 50px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Bolas do Resultado */
.result-container {
	min-height: 120px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
	padding: 2rem 1rem;
	background-color: var(--theme-light);
	border-radius: var(--border-radius-lg);
	transition: background-color 0.3s ease;
}

.loto-ball {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	font-weight: 700;
	color: white;
	background-color: var(--theme-color);
	box-shadow: inset -3px -3px 5px rgba(0,0,0,0.2), 3px 3px 5px rgba(0,0,0,0.1);
	opacity: 0;
	transform: scale(0.5);
	animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
	transition: background-color 0.3s ease;
}

@keyframes popIn {
	to { opacity: 1; transform: scale(1); }
}

/* Badges de Estatística */
.stat-badge {
	background-color: white;
	color: var(--color-dark);
	border: 1px solid #e5e7eb;
	font-size: 0.85rem;
	padding: 0.5rem 1rem;
	border-radius: 50px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.stat-badge i { color: var(--theme-color); }

footer {
	margin-top: auto;
	padding: 2rem 0;
	border-top: 1px solid #e5e7eb;
	background: white;
}

/* Toast de Cópia */
.toast-container {
	z-index: 1060;
}

@media (max-width: 576px) {
	.loto-ball { width: 2.8rem; height: 2.8rem; font-size: 1rem; }
}

@media (max-width: 991px) {
	.navbar-collapse {
		background: white;
		padding: 1rem;
		border-radius: 0 0 1rem 1rem;
		box-shadow: 0 4px 6px rgba(0,0,0,0.05);
		margin-top: 10px;
	}
}