/*
    tabs
*/
.tabs {
	display: flex;
	border-bottom: 1px solid #1a1a1a;
	margin-bottom: 1.5rem;
	flex-shrink: 0;
}

.tab {
	background: transparent;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	color: #444444;
	padding: 0.7rem 1.4rem;
	font-family: 'Oswald', sans-serif;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: all 0.15s ease;
}

.tab:hover {
	color: #888888;
}

.tabActive {
	color: #ffffff;
	border-bottom-color: #a30000;
}

/*
    range ctl
*/

.rangeGroup {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.85rem;
	background: #0d0d0d;
	border: 1px solid #1a1a1a;
}

.rangeLabel {
	font-family: 'Oswald', sans-serif;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #444444;
	white-space: nowrap;
}

.rangeInput {
	background: transparent;
	border: none;
	border-bottom: 1px solid #2a2a2a;
	color: #5599ff;
	font-family: 'Oswald', sans-serif;
	font-size: 0.8rem;
	width: 48px;
	text-align: center;
	padding: 0.1rem 0;
}

.rangeInput::-webkit-outer-spin-button,
.rangeInput::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

.rangeInput:focus {
	outline: none;
	border-bottom-color: #5599ff;
}

.rangeSep {
	color: #333333;
	font-size: 0.75rem;
}

/*
    randomization btn
*/
.randBtn {
	background: transparent;
	border: 1px solid #1a3a88;
	color: #3366cc;
	padding: 0.6rem 1.25rem;
	font-family: 'Oswald', sans-serif;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: all 0.2s ease;
}

.randBtn:hover {
	background: #0a1a44;
	color: #88aaff;
	border-color: #4466cc;
	box-shadow: 0 0 12px rgba(50, 80, 200, 0.3);
}

/*
    grid
*/
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 0.75rem;
	overflow-y: auto;
	flex: 1;
	align-content: start;
	padding-right: 0.5rem;
}