html, body {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	height: 100%;
}

.btn-discord {
	background-color: #7289DA;
	border: none;
	color: white;
	border-radius: 4px;
}

.btn-discord:hover {
	background-color: #677bc4;
	color: white;
}

/* FocusOnNavigate focuses the page <h1> after routing so screen readers announce
   it. The heading isn't tab-reachable, so hiding its ring costs no keyboard cue. */
h1[tabindex="-1"]:focus {
	outline: none;
}

.valid.modified:not([type=checkbox]) {
	outline: 1px solid #26b050;
}

.invalid {
	outline: 1px solid #e50000;
}

.validation-message {
	color: #e50000;
}

.blazor-error-boundary {
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
	padding: 1rem 1rem 1rem 3.7rem;
	color: white;
}

	.blazor-error-boundary::after {
		content: "An error has occurred."
	}

.darker-border-checkbox.form-check-input {
	border-color: #929292;
}

/* ===== GLOBAL PREMIUM TIER BADGES ===== */
.premium-badge,
.tier-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.15rem 0.5rem;
	background: linear-gradient(135deg, #ffd700, #ffed4e);
	color: #1e2124;
	border-radius: 4px;
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	white-space: nowrap;
	vertical-align: middle;
	line-height: 1.4;
}

.premium-badge i,
.tier-badge i {
	font-size: 0.55rem;
}

.premium-badge.tier-basic,
.tier-badge.tier-basic {
	background: linear-gradient(135deg, #43b581, #3ca374);
	color: white;
}

.premium-badge.tier-super,
.tier-badge.tier-super {
	background: linear-gradient(135deg, #5865f2, #4752c4);
	color: white;
}

.premium-badge.tier-ultra,
.tier-badge.tier-ultra {
	background: linear-gradient(135deg, #ffd700, #ffed4e);
	color: #1e2124;
}

/* Premium highlight tags — used on feature highlight pills */
.highlight-tag.premium-tag {
	border: none;
}

.highlight-tag.premium-tag.tier-basic {
	background: linear-gradient(135deg, rgba(67, 181, 129, 0.2), rgba(60, 163, 116, 0.15));
	color: #43b581;
	border: 1px solid rgba(67, 181, 129, 0.3);
}

.highlight-tag.premium-tag.tier-super {
	background: linear-gradient(135deg, rgba(88, 101, 242, 0.2), rgba(71, 82, 196, 0.15));
	color: #7289da;
	border: 1px solid rgba(88, 101, 242, 0.3);
}

.highlight-tag.premium-tag.tier-ultra {
	background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 237, 78, 0.15));
	color: #ffd700;
	border: 1px solid rgba(255, 215, 0, 0.3);
}

.highlight-tag.premium-tag i {
	font-size: 0.65rem;
	margin-right: 0.125rem;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
	color: var(--bs-secondary-color);
	text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
	text-align: start;
}

/* ===== RANK CARD STYLE THEMES (leaderboard) =====
   Global (unscoped) so premium style classes always match
   without depending on Blazor CSS isolation attributes. */
.leaderboard-entry.style-neon,
.podium-card.style-neon {
	--entry-accent: #00ff88;
	--entry-ring: #00ffcc;
	--entry-progress: linear-gradient(90deg, #00cc6a, #00ff88, #00ffcc);
	--entry-glow: rgba(0, 255, 136, 0.5);
	--entry-track: rgba(0, 255, 136, 0.12);
	--entry-track-border: rgba(0, 255, 204, 0.28);
	--entry-badge-bg: linear-gradient(135deg, #0a1f18, #102820);
	--entry-badge-text: #00ffcc;
}

.leaderboard-entry.style-cosmic,
.podium-card.style-cosmic {
	--entry-accent: #9b59b6;
	--entry-ring: #c39bd3;
	--entry-progress: linear-gradient(90deg, #6c3483, #9b59b6, #63cbff);
	--entry-glow: rgba(155, 89, 182, 0.5);
	--entry-track: rgba(155, 89, 182, 0.14);
	--entry-track-border: rgba(99, 203, 255, 0.22);
	--entry-badge-bg: linear-gradient(135deg, #2f365f, #171d38);
	--entry-badge-text: #c9d7ff;
}

.leaderboard-entry.style-regal,
.podium-card.style-regal {
	--entry-accent: #d4ac0d;
	--entry-ring: #f0d89b;
	--entry-progress: linear-gradient(90deg, #8f692e, #d4ac0d, #f0d89b);
	--entry-glow: rgba(212, 172, 13, 0.45);
	--entry-track: rgba(212, 172, 13, 0.12);
	--entry-track-border: rgba(240, 216, 155, 0.28);
	--entry-badge-bg: linear-gradient(135deg, #141b2b, #0b1120);
	--entry-badge-text: #e7dbc0;
}

.leaderboard-entry.style-blossom,
.podium-card.style-blossom {
	--entry-accent: #de6fc0;
	--entry-ring: #d68d88;
	--entry-progress: linear-gradient(90deg, #de6fc0, #ef9fd5, #b47ad1);
	--entry-glow: rgba(222, 111, 192, 0.42);
	--entry-track: rgba(239, 159, 213, 0.16);
	--entry-track-border: rgba(214, 141, 136, 0.3);
	--entry-badge-bg: linear-gradient(135deg, #fff9fc, #ead5eb);
	--entry-badge-text: #823b5c;
}

.leaderboard-entry.style-velvet,
.podium-card.style-velvet {
	--entry-accent: #e68ad7;
	--entry-ring: #f7c0ed;
	--entry-progress: linear-gradient(90deg, #b960bd, #e68ad7, #ffc7f0);
	--entry-glow: rgba(230, 138, 215, 0.48);
	--entry-track: rgba(230, 138, 215, 0.14);
	--entry-track-border: rgba(247, 192, 237, 0.28);
	--entry-badge-bg: linear-gradient(135deg, #3a3042, #252130);
	--entry-badge-text: #f7c0ed;
}

.leaderboard-entry.style-mint,
.podium-card.style-mint {
	--entry-accent: #9fc5b2;
	--entry-ring: #d8b56f;
	--entry-progress: linear-gradient(90deg, #9fc5b2, #b7d8c7, #d8b56f);
	--entry-glow: rgba(159, 197, 178, 0.45);
	--entry-track: rgba(159, 197, 178, 0.16);
	--entry-track-border: rgba(216, 181, 111, 0.3);
	--entry-badge-bg: linear-gradient(135deg, #c3d9cb, #aac7b7);
	--entry-badge-text: #2f6657;
}

.leaderboard-entry.style-onyx,
.podium-card.style-onyx {
	--entry-accent: #8e8983;
	--entry-ring: #d8d5d1;
	--entry-progress: linear-gradient(90deg, #4f4944, #77726d, #bdb8b2);
	--entry-glow: rgba(142, 137, 131, 0.42);
	--entry-track: rgba(142, 137, 131, 0.14);
	--entry-track-border: rgba(216, 213, 209, 0.24);
	--entry-badge-bg: linear-gradient(135deg, #181818, #0a0a0a);
	--entry-badge-text: #d8d5d1;
}

.leaderboard-entry.style-neon {
	background: linear-gradient(135deg, #12181f 0%, #0a0e14 100%) !important;
	border-color: rgba(0, 255, 136, 0.22) !important;
}

.leaderboard-entry.style-cosmic {
	background: linear-gradient(135deg, rgba(47, 54, 95, 0.55) 0%, #0c1125 55%, #171a3b 100%) !important;
	border-color: rgba(155, 89, 182, 0.28) !important;
	border-radius: 14px;
}

.leaderboard-entry.style-regal {
	background: linear-gradient(135deg, rgba(20, 27, 43, 0.95) 0%, #0b1120 100%) !important;
	border-color: rgba(212, 172, 13, 0.32) !important;
}

.leaderboard-entry.style-blossom {
	background: linear-gradient(135deg, #fff9fa 0%, #f8e9f1 62%, #edcde4 100%) !important;
	border-color: rgba(214, 141, 136, 0.48) !important;
}

.leaderboard-entry.style-velvet {
	background: linear-gradient(135deg, #232234 0%, #202133 55%, #2c2638 100%) !important;
	border-color: rgba(230, 138, 215, 0.38) !important;
}

.leaderboard-entry.style-mint {
	background: linear-gradient(135deg, #f3f6f3 0%, #edf1ee 55%, #e8eeea 100%) !important;
	border-color: rgba(159, 197, 178, 0.5) !important;
}

.leaderboard-entry.style-onyx {
	background: linear-gradient(135deg, #171717 0%, #121212 50%, #0b0b0b 100%) !important;
	border-color: rgba(142, 137, 131, 0.42) !important;
}

.leaderboard-entry.style-neon .rank-badge,
.leaderboard-entry.style-cosmic .rank-badge,
.leaderboard-entry.style-regal .rank-badge,
.leaderboard-entry.style-blossom .rank-badge,
.leaderboard-entry.style-velvet .rank-badge,
.leaderboard-entry.style-mint .rank-badge,
.leaderboard-entry.style-onyx .rank-badge {
	background: var(--entry-badge-bg) !important;
	border-color: var(--entry-accent) !important;
	color: var(--entry-badge-text);
	box-shadow: 0 0 12px var(--entry-glow);
}

.leaderboard-entry.style-neon .rank-badge .rank-number,
.leaderboard-entry.style-cosmic .rank-badge .rank-number,
.leaderboard-entry.style-regal .rank-badge .rank-number,
.leaderboard-entry.style-blossom .rank-badge .rank-number,
.leaderboard-entry.style-velvet .rank-badge .rank-number,
.leaderboard-entry.style-mint .rank-badge .rank-number,
.leaderboard-entry.style-onyx .rank-badge .rank-number {
	color: var(--entry-badge-text) !important;
}

.leaderboard-entry.style-neon .avatar-ring,
.leaderboard-entry.style-cosmic .avatar-ring,
.leaderboard-entry.style-regal .avatar-ring,
.leaderboard-entry.style-blossom .avatar-ring,
.leaderboard-entry.style-velvet .avatar-ring,
.leaderboard-entry.style-mint .avatar-ring,
.leaderboard-entry.style-onyx .avatar-ring {
	border-color: var(--entry-ring) !important;
	box-shadow: 0 0 12px var(--entry-glow) !important;
}

.leaderboard-entry.style-neon .user-level,
.leaderboard-entry.style-cosmic .user-level,
.leaderboard-entry.style-regal .user-level,
.leaderboard-entry.style-blossom .user-level,
.leaderboard-entry.style-velvet .user-level,
.leaderboard-entry.style-mint .user-level,
.leaderboard-entry.style-onyx .user-level {
	color: var(--entry-accent) !important;
	text-shadow: 0 0 8px var(--entry-glow);
}

.leaderboard-entry.style-neon .progress-bar-fill,
.leaderboard-entry.style-cosmic .progress-bar-fill,
.leaderboard-entry.style-regal .progress-bar-fill,
.leaderboard-entry.style-blossom .progress-bar-fill,
.leaderboard-entry.style-velvet .progress-bar-fill,
.leaderboard-entry.style-mint .progress-bar-fill,
.leaderboard-entry.style-onyx .progress-bar-fill,
.podium-card.style-neon .podium-progress-fill,
.podium-card.style-cosmic .podium-progress-fill,
.podium-card.style-regal .podium-progress-fill,
.podium-card.style-blossom .podium-progress-fill,
.podium-card.style-velvet .podium-progress-fill,
.podium-card.style-mint .podium-progress-fill,
.podium-card.style-onyx .podium-progress-fill {
	background: var(--entry-progress) !important;
	box-shadow: 0 0 15px var(--entry-glow) !important;
}

.podium-card.style-neon .podium-level,
.podium-card.style-cosmic .podium-level,
.podium-card.style-regal .podium-level,
.podium-card.style-blossom .podium-level,
.podium-card.style-velvet .podium-level,
.podium-card.style-mint .podium-level,
.podium-card.style-onyx .podium-level {
	color: var(--entry-accent) !important;
	text-shadow: 0 0 10px var(--entry-glow);
}

.podium-card.style-neon .podium-avatar,
.podium-card.style-cosmic .podium-avatar,
.podium-card.style-regal .podium-avatar,
.podium-card.style-blossom .podium-avatar,
.podium-card.style-velvet .podium-avatar,
.podium-card.style-mint .podium-avatar,
.podium-card.style-onyx .podium-avatar {
	border-color: var(--entry-ring) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 18px var(--entry-glow) !important;
}