body { 
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
	margin: 20px; 
	background: #2b3e50; 
	color: #fff; 
}

h1, h2 { 
	text-align: center; 
	color: #f39c12; 
}

.tabs { 
	display: flex; 
	justify-content: center; 
	gap: 10px; 
	margin-bottom: 20px; 
}

.tabs button { 
	padding: 10px 20px; 
	font-size: 16px; 
	cursor: pointer; 
	border: none; 
	background: #34495e; 
	color: white; 
	border-radius: 4px; 
}

.tabs button:hover { 
	background: #1abc9c; 
}

.tab-content { 
	display: none; 
	background: #34495e; 
	padding: 20px; 
	border-radius: 8px; 
}

.tab-content.active { 
	display: block; 
}

.controls { 
	background: #1c2833; 
	padding: 15px; 
	border-radius: 5px; 
	margin-bottom: 15px; 
	display: flex; 
	align-items: center; 
	gap: 10px; 
	flex-wrap: wrap; 
}

.controls input { 
	width: 70px; 
	padding: 5px; 
}

.controls button { 
	padding: 6px 14px; 
	background: #e67e22; 
	color: white; 
	border: none; 
	cursor: pointer; 
	border-radius: 4px; 
}

.controls button:hover { 
	background: #d35400; 
}

.stats-panel { 
	background: #1c2833; 
	padding: 15px; 
	border-radius: 5px; 
	margin-bottom: 15px; 
}

.hands-container { 
	display: flex; 
	flex-direction: column; 
	gap: 15px; 
}

.hand-card { 
	background: #2c3e50; 
	padding: 10px; 
	border-radius: 5px; 
	border-left: 5px solid #1abc9c; 
} 

.card-img {
    width: 60px;
    height: 84px;
    margin: 3px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    vertical-align: middle;
    transition: transform 0.15s ease;
}

.card-img:hover {
    transform: translateY(-4px);
}

.config-grid { 
	display: grid; 
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 
	gap: 10px; 
	margin-bottom: 20px; 
}

.config-item { 
	display: flex; 
	flex-direction: column; 
	align-items: center; 
	background: #1c2833; 
	padding: 8px; 
	border-radius: 4px; 
}

.config-item input { 
	width: 50px; 
	text-align: center; 
}

.bonus-row { 
	display: flex; 	
	gap: 10px; 
	margin-bottom: 5px; 
}