/* Responsive Design */
@media (max-width: 968px) {
	.image-comparison {
		grid-template-columns: 1fr;
	}

	.hero h1 {
		font-size: 2rem;
	}

	.metric-selector {
		flex-wrap: wrap;
	}

	.chart-bars {
		gap: 0.2rem;
	}

	.chart-bar {
		width: 25px;
	}

	.statistics-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.dashboard-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.control-center {
		flex-direction: column;
		gap: 1rem;
	}

	.upload-button,
	.run-test-button {
		width: 100%;
	}
}

@media (max-width: 968px) {
	.image-comparison {
		grid-template-columns: 1fr;
	}

	.hero h1 {
		font-size: 2rem;
	}

	.metric-selector {
		flex-wrap: wrap;
	}

	.chart-bars {
		gap: 0.3rem;
	}

	.chart-bar {
		width: 30px;
	}
}

/* Mobile responsive */
@media (max-width: 968px) {
	.test-layout {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.test-sidebar {
		position: relative;
		top: 0;
		padding: 1.5rem;
	}

	.test-sidebar .test-title {
		font-size: 1.2rem;
	}
}

/* Mobile */
@media (max-width: 768px) {
	.test-title {
		font-size: 1.5rem;
	}

	.test-header-sticky::before {
		font-size: 1rem;
	}
}

/* Mobile */
@media (max-width: 768px) {
	.test-title {
		font-size: 1.5rem;
	}

	.test-title.is-stuck {
		font-size: 1rem;
	}
}

/* Mobile */
@media (max-width: 768px) {
	.test-title {
		font-size: 1.5rem;
	}

	.test-header-sticky.is-stuck .test-title {
		font-size: 0.95rem;
	}

	.test-header-sticky.is-stuck .test-number {
		margin-right: 0.5rem;
	}
}

/* Mobile Responsive */
@media (max-width: 968px) {
	.container {
		padding: 1rem;
	}

	.hero h1 {
		font-size: 2rem;
	}

	.hero h1 .vs {
		font-size: 1.5rem;
		margin: 0 0.5rem;
	}

	.hero p {
		font-size: 1rem;
		padding: 0 1rem;
	}

	.image-comparison {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.image-container {
		min-height: 250px;
	}

	.image-container[data-side="original"] {
		max-width: 100%;
	}

	.metric-selector {
		justify-content: center;
	}

	.metric-tab {
		font-size: 0.65rem;
		padding: 0.5rem 0.8rem;
	}

	.chart-container {
		padding: 1rem;
		overflow-x: auto;
	}

	.line-chart {
		min-width: 600px;
	}

	.statistics-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.dashboard-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	.control-center {
		flex-direction: column;
		gap: 1rem;
		width: 100%;
	}

	.upload-button,
	.run-test-button {
		width: 100%;
		padding: 1rem;
	}

	.color-selector-wrapper {
		width: 100%;
		justify-content: center;
	}

	.test-title {
		font-size: 1.5rem;
	}

	.test-description {
		font-size: 0.85rem;
	}

	.info-box {
		padding: 1.5rem;
	}

	.benchmark-title {
		font-size: 1.5rem;
		margin-bottom: 3rem;
	}

	.dimension-width .dimension-label {
		font-size: 0.7rem;
		padding: 0.2rem 0.4rem;
	}

	.dimension-height .dimension-label {
		font-size: 0.7rem;
		padding: 0.2rem 0.4rem;
	}
}

@media (max-width: 768px) {
	.hidden-sticky-header {
		font-size: 0.75rem;
		padding: 0.75rem 1rem;
		flex-wrap: wrap;
		justify-content: center;
	}

	.hidden-sticky-header .test-number-badge {
		font-size: 0.6rem;
		padding: 0.2rem 0.5rem;
		margin-right: 0.5rem;
	}

	.hidden-sticky-header .test-title-text {
		font-size: 0.85rem;
	}

	.sticky-settings-btn {
		margin-left: 0.5rem;
		padding: 0.3rem 0.6rem;
		font-size: 0.65rem;
	}

	.chart-header {
		padding-bottom: 3rem;
	}

	.clear-stats-btn,
	.export-stats-btn {
		position: relative;
		top: auto;
		right: auto;
		margin-top: 0.5rem;
		width: 100%;
	}

	.export-stats-btn {
		margin-bottom: 0.5rem;
	}

	.speedup-summary .summary-card {
		padding: 1rem 1.5rem;
	}

	.summary-winner {
		font-size: 1rem;
	}

	.summary-speedup {
		font-size: 1.5rem;
	}
}