:root{
	--ea-navy:#0c2a4a;
	--ea-navy-2:#0a223d;
	--ea-accent:#ff641c;
	--ea-surface:#0f2f53;
	--ea-border:rgba(255,255,255,.12);
	--ea-text:rgba(255,255,255,.92);
	--ea-muted:rgba(255,255,255,.68);
}

body{
	background: radial-gradient(1200px 500px at 20% 0%, rgba(255,100,28,.12), transparent 60%),
	radial-gradient(900px 450px at 85% 10%, rgba(255,255,255,.08), transparent 55%),
	linear-gradient(180deg, var(--ea-navy), #071a2f 70%);
	color: var(--ea-text);
	min-height: 100vh;
}

.topbar{
	background: linear-gradient(180deg, rgba(10,34,61,.85), rgba(10,34,61,.65));
	border-bottom: 1px solid var(--ea-border);
	backdrop-filter: blur(10px);
}

.brand-mark{
	width: 12px;
	height: 12px;
	border-radius: 2px;
	background: var(--ea-accent);
	display: inline-block;
	margin-right: 10px;
	transform: translateY(1px);
}

.hero{
	padding: 2.5rem 0 1.25rem;
}

.hero h1{
	letter-spacing: .2px;
	font-weight: 700;
}

.hero p{
	color: var(--ea-muted);
	max-width: 64rem;
}

.filterbar{
	background: rgba(255,255,255,.06);
	border: 1px solid var(--ea-border);
	border-radius: 16px;
	padding: 12px;
}

.btn-ea{
	--bs-btn-color: #fff;
	--bs-btn-bg: rgba(255,255,255,.08);
	--bs-btn-border-color: rgba(255,255,255,.14);
	--bs-btn-hover-bg: rgba(255,255,255,.12);
	--bs-btn-hover-border-color: rgba(255,255,255,.18);
	--bs-btn-active-bg: rgba(255,255,255,.14);
	--bs-btn-active-border-color: rgba(255,255,255,.2);
	border-radius: 12px;
}

.btn-ea.active{
	background: rgba(255,100,28,.16);
	border-color: rgba(255,100,28,.45);
}

.form-select,
.form-control{
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.16);
	color: var(--ea-text);
	border-radius: 12px;
}

.form-select:focus,
.form-control:focus{
	border-color: rgba(255,100,28,.55);
	box-shadow: 0 0 0 .2rem rgba(255,100,28,.18);
}

.form-select option{
	color: #0b1f36;
}

.card-ea{
	height: 100%;
	border-radius: 18px;
	border: 1px solid var(--ea-border);
	background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
	overflow: hidden;
	transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.card-ea:hover{
	transform: translateY(-2px);
	border-color: rgba(255,100,28,.35);
	background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.05));
}

.card-ea .card-title{
	font-weight: 700;
	margin-bottom: .35rem;
	color:#ffffff;
}

.card-ea .card-text{
	color: var(--ea-muted);
}

.chip{
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	padding: .2rem .6rem;
	font-size: .78rem;
	border: 1px solid rgba(255,255,255,.14);
	background: rgba(255,255,255,.06);
	color: rgba(255,255,255,.82);
	margin-right: .4rem;
	margin-bottom: .4rem;
}

.chip.accent{
	border-color: rgba(255,100,28,.45);
	background: rgba(255,100,28,.14);
	color: rgba(255,255,255,.92);
}

.card-link{
	text-decoration: none;
	color: inherit;
}

.empty-state{
	display:none;
	border: 1px dashed rgba(255,255,255,.22);
	border-radius: 18px;
	padding: 28px;
	color: var(--ea-muted);
	background: rgba(255,255,255,.04);
}

.footer{
	color: rgba(255,255,255,.55);
	border-top: 1px solid rgba(255,255,255,.10);
	margin-top: 40px;
	padding: 18px 0;
}