.swap-candidate {
	background: #1e3a2e !important;
	color: #b6ffe0 !important;
	font-weight: bold;
	border-left: 4px solid #3ae87a;
}
.swap-icon {
	color: #3ae87a;
	font-size: 1.1em;
	margin-right: 2px;
	vertical-align: middle;
}
.tier-worse {
	background: #3a1e1e !important;
	color: #ffb6b6 !important;
	font-weight: bold;
	border-left: 4px solid #e83a3a;
}
.tier1 {
	background: #1e3a1e !important;
	color: #b6ffb6 !important;
}
.tier1-star {
	color: #ffe066;
	font-size: 1.1em;
	margin-right: 2px;
	vertical-align: middle;
}
# Win Probability Bar
.winprob-row {
	display: flex;
	align-items: center;
	gap: 12px;
	justify-content: center;
	margin: 8px 0 2px 0;
}
.winprob-label {
	font-weight: 500;
	color: #7bb0ff;
	margin-right: 2px;
}
.winprob-bar-wrap {
	flex: 1 1 120px;
	max-width: 180px;
	min-width: 80px;
}
.winprob-bar-bg {
	background: #232c41;
	border-radius: 8px;
	width: 100%;
	height: 18px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(30,38,54,0.10);
}
.winprob-bar {
	display: block;
	height: 100%;
	border-radius: 8px;
	transition: width 0.4s cubic-bezier(.4,2,.6,1), background 0.3s;
}
.winprob-badge {
	display: inline-block;
	min-width: 44px;
	text-align: center;
	font-weight: bold;
	color: #fff;
	border-radius: 6px;
	padding: 3px 10px 3px 10px;
	font-size: 1.08em;
	margin-left: 6px;
	box-shadow: 0 1px 4px rgba(30,38,54,0.10);
}
.winprob-emoji {
	font-size: 1.3em;
	margin-left: 6px;
}
# League tabs and pretty tables
.league-tabs {
	display: flex;
	gap: 8px;
	margin-bottom: 18px;
	flex-wrap: wrap;
	justify-content: center;
}
.league-tab {
	background: #232c41;
	color: #eaf0fa;
	border: 1px solid #3a4a6e;
	border-radius: 6px 6px 0 0;
	padding: 8px 18px;
	font-size: 1em;
	cursor: pointer;
	margin-bottom: -2px;
	transition: background 0.2s, color 0.2s;
}
.league-tab.active, .league-tab:focus {
	background: #3a6ee8;
	color: #fff;
	outline: none;
}
.league-content { animation: fadein 0.3s; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

.pretty-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: #232c41;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 24px;
	box-shadow: 0 2px 12px rgba(30,38,54,0.10);
}
.pretty-table th, .pretty-table td {
	padding: 12px 10px;
	text-align: left;
}
.pretty-table th {
	background: #1e2636;
	color: #7bb0ff;
	font-weight: 600;
	user-select: none;
}
.pretty-table tr:nth-child(even) td { background: #232c41; }
.pretty-table tr:nth-child(odd) td { background: #28304a; }
.pretty-table tr:hover td { background: #2d3a5a; }
.pretty-table .summary { background: #1e2636; color: #eaf0fa; text-align: center; font-size: 1.08em; }
.pretty-table .bench-header { background: #3a4a6e; color: #fff; text-align: center; font-size: 1.05em; }

/* Sortable column indicator */
.pretty-table th.asc:after { content: ' \25B2'; }
.pretty-table th:not(.asc):after { content: ' \25BC'; opacity: 0.3; }
html, body {
	background: #1e2636 !important;
	color: #eaf0fa;
	font-family: 'Raleway', Arial, sans-serif;
	min-height: 100vh;
}
.container { max-width: 700px; margin: 0 auto; padding: 30px 10px 10px 10px; }
h1 { text-align: center; color: #eaf0fa; }
#userform { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 20px; }
#inputButton { font-size: 1.1em; padding: 12px 16px; border-radius: 6px; border: 1px solid #3a4a6e; background: #232c41; color: #eaf0fa; width: 260px; margin-bottom: 0.5em; box-shadow: 0 1px 4px rgba(30,38,54,0.08); }
#generateTiers { font-size: 1.1em; padding: 12px 32px 16px 32px; border-radius: 6px; border: none; background: #3a6ee8; color: #fff; font-weight: bold; cursor: pointer; transition: background 0.2s, box-shadow 0.2s; margin-bottom: 0.5em; box-shadow: 0 2px 8px rgba(58,110,232,0.10); letter-spacing: 0.5px; }
#generateTiers:hover { background: #254a99; box-shadow: 0 4px 16px rgba(58,110,232,0.18); }
#output { margin-top: 24px; margin-bottom: 24px; color: #eaf0fa; }