.navbar {
	background: var(--navbar-background);
}

.brand-title {
	font-weight: 800;
	letter-spacing: 0.2px;
}

.hero {
	background: radial-gradient(
			1200px 300px at 10% 10%,
			rgba(10, 138, 58, 0.22) 0%,
			transparent 60%
		),
		radial-gradient(
			800px 250px at 90% 0%,
			rgba(10, 107, 48, 0.18) 0%,
			transparent 60%
		),
		linear-gradient(
			180deg,
			rgba(10, 138, 58, 0.05),
			rgba(255, 255, 255, 0)
		);
	padding: clamp(1rem, 2vw, 2rem) 0 1rem;
}

.hero-badge {
	background: var(--accent-soft-bg);
	border: 1px solid var(--accent-soft-border);
	color: var(--accent-soft-text);
	backdrop-filter: blur(6px);
}

.period-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.75rem;
	border-radius: 999px;
	background: var(--accent-soft-bg);
	border: 1px solid var(--accent-soft-border);
	color: var(--accent-soft-text);
	font-weight: 700;
}

.glass {
	background: var(--card-glass-bg);
	border: 1px solid var(--card-glass-border);
	backdrop-filter: blur(8px);
	box-shadow: var(--card-shadow);
}

.item-pill {
	border-radius: 14px;
	border: 1px dashed var(--item-pill-border);
	background: var(--item-pill-bg);
	padding: 0.65rem 0.9rem;
	transition: transform 0.12s ease, background 0.12s ease;
	font-weight: 600;
	color: var(--item-pill-text);
}

.item-pill:hover {
	transform: translateY(-1px);
	background: var(--item-pill-hover-bg);
}

[data-bs-theme="dark"] .item-pill {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.skeleton {
	position: relative;
	overflow: hidden;
	background: var(--skeleton-base);
	border-radius: 0.75rem;
	min-height: 110px;
}

.skeleton::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		transparent,
		var(--skeleton-highlight),
		transparent
	);
	transform: translateX(-100%);
	animation: shimmer 1.2s infinite;
}

@keyframes shimmer {
	to {
		transform: translateX(100%);
	}
}

footer {
	border-top-color: var(--footer-border-color) !important;
}

.alert-info {
	background: var(--alert-info-bg);
	color: var(--alert-info-text);
}

.alert-danger {
	background: var(--alert-danger-bg);
	color: var(--alert-danger-text);
}

[data-bs-theme="dark"] .btn-outline-light {
	color: var(--theme-toggle-text);
	border-color: var(--theme-toggle-border);
	background: var(--theme-toggle-bg);
}

[data-bs-theme="dark"] .btn-outline-light:hover,
[data-bs-theme="dark"] .btn-outline-light:focus-visible {
	color: var(--theme-toggle-active-text);
	background: var(--theme-toggle-active-bg);
	border-color: var(--theme-toggle-active-bg);
}

.blindness-overlay {
	position: fixed;
	inset: 0;
	display: none;
	background: #000;
	z-index: var(--overlay-z-index);
	pointer-events: all;
}

.blindness-overlay.is-visible {
	display: block;
}

@media (max-width: 576px) {
	.brand-title {
		font-size: 1rem;
	}
}

@media (min-width: 768px) {
	#itemsArea {
		display: flex;
		flex-wrap: wrap;
		gap: 0.75rem;
	}

	#itemsArea .item-pill {
		flex: 1 1 calc(50% - 0.75rem);
		max-width: calc(50% - 0.75rem);
	}
}