/* Changelog Page Styles */

.changelog-container {
	max-width: 900px;
	margin: 2rem auto;
	padding: 0 1rem;
}

.changelog-header {
	text-align: center;
	margin-bottom: 2rem;
}

.changelog-header h1 {
	font-size: 2rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.changelog-subtitle {
	color: var(--gray-600, #4b5563);
	margin-bottom: 1.5rem;
}

.changelog-stats {
	display: flex;
	justify-content: center;
	gap: 2rem;
}

.changelog-stats .stat {
	text-align: center;
}

.changelog-stats .stat-value {
	font-size: 1.25rem;
	font-weight: 600;
	display: block;
}

.changelog-entry {
	background: #fff;
	border-radius: 8px;
	padding: 1.25rem;
	margin-bottom: 1.5rem;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.changelog-entry.upcoming {
	border: 2px dashed var(--brand, #10b981);
	background: #f0fdf4;
}

.version-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.version-number {
	font-size: 1.25rem;
	font-weight: 600;
}

.version-badge {
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: capitalize;
}

.version-badge.upcoming {
	background: #ecfdf5;
	color: var(--brand, #10b981);
}

.version-badge.fixed {
	background: #fef2f2;
	color: #ef4444;
}

.version-badge.improved {
	background: #eff6ff;
	color: #3b82f6;
}

.version-meta {
	font-size: 0.85rem;
	color: var(--gray-500, #6b7280);
	margin-top: 0.25rem;
}

.change-section {
	margin-top: 1rem;
}

.change-type {
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
}

.change-type.improved {
	color: #3b82f6;
}

.change-type.fixed {
	color: #ef4444;
}

.change-type.planned {
	color: var(--brand, #10b981);
}

.change-list {
	list-style: disc;
	padding-left: 1.25rem;
	color: var(--gray-700, #374151);
}

.change-list li {
	margin-bottom: 0.5rem;
}

.changelog-feedback {
	margin-top: 2rem;
}

.feedback-card {
	background: #fff;
	border-radius: 8px;
	padding: 1.25rem;
	text-align: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.feedback-actions {
	margin-top: 1rem;
	display: flex;
	justify-content: center;
	gap: 1rem;
}