.header-icon i,
.navItems i {
	font-size: var(--cf-icon);
	line-height: 1;
}

.appShell {
	display: grid;
	grid-template-rows: auto 1fr auto;
	height: 100%;
	min-height: 0;
}

.appHeader {
	position:fixed;
	top: 0;
	z-index: var(--cf-z-header);
	height: var(--cf-header-h);
	display: grid;
	grid-template-columns: 56px 1fr 56px;
	align-items: center;
	background: linear-gradient(180deg,var(--cf-surface),var(--cf-surface-2));
	border-bottom: 1px solid var(--cf-border);
	border-radius: 0 0 var(--cf-radius-lg) var(--cf-radius-lg);
	width:100%;
}

	.appHeader .header-center {
		justify-self: center
	}

.header-icon {
	width: var(--cf-header-icon-size);
	height: var(--cf-header-icon-size);
	display: inline-grid;
	place-items: center;
	border-radius: var(--cf-header-icon-radius);
	transition: transform var(--cf-speed-fast), background var(--cf-speed-fast);
	text-decoration: none;
}

	.header-icon:hover {
		background: #0094ff;
	}

.icon-logo-wordmark {
	font-size: 22px;
}

.icon-learning-hub {
font-size:20px;
}

#hamburgerBtn {
	margin-left: 12px;
}

a.header-icon,
a.header-icon:link,
a.header-icon:visited,
a.header-icon:hover,
a.header-icon:active {
	color: inherit;
	text-decoration: none;
}


page-title.pageTitle {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	margin-top: 56px;
	height: 30px; /* taller than header’s 50px */
	width: 200px;
	z-index: 900;
	background: linear-gradient(180deg,var(--cf-surface),var(--cf-surface-2));
	border-bottom: 1px solid var(--cf-border);
	border-radius: 0 0 var(--cf-radius-sm) var(--cf-radius-sm);
	left: 50%;
	transform: translateX(-50%);
}

.pageTitle h1 {
	font-size: var(--h1-size, 16px);
	font-weight: var(--h1-weight, 600);
	margin: 0;
	text-align: center;
	color: var(--text-dark, #E5E7EB);
}

page-title i {margin-right:6px;

}
/* Drawer */
.appDrawer {
	position: fixed;
	inset: 0 auto 0 0;
	width: 260px;
	transform: translateX(-100%);
	background: var(--cf-surface);
	border-right: 1px solid var(--cf-border);
	z-index: var(--cf-z-modal);
	transition: transform var(--cf-speed);
}

	.appDrawer.open {
		transform: translateX(0)
	}

.navHeader {
	height: var(--cf-header-h);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 10px;
}

.navItems {
	padding: 8px
}

	.navItems div {
		width: 100%;
		height: var(--cf-header-icon-size);
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 0 12px;
		border-radius: var(--cf-header-icon-radius);
		font-size: 8px;
	}

		.navItems div:hover {
			background: #0094ff;
		}

	.navItems span {
		font-size: 18px;
margin-left:10px;
	}

/* Scrim */
#scrim {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.45);
	backdrop-filter: blur(4px);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--cf-speed);
	z-index: var(--cf-z-scrim);
}

	#scrim.open {
		opacity: 1;
		pointer-events: auto
	}

/* Main */
.appMain, app-main {
	min-height: 0; /* <— lets this grid child actually scroll */
	overflow-y: auto; /* vertical scrolling here only */
	overflow-x: hidden; /* no horizontal scroll on the page */
	-webkit-overflow-scrolling: touch;
	padding: 10px;
	margin-top: var(--header-height, 90px);
	margin-bottom: 80px;
}

	.appMain::-webkit-scrollbar {
		width: 8px;
	}

	.appMain::-webkit-scrollbar-thumb {
		background: var(--cf-border);
		border-radius: 4px;
	}

	.appMain::-webkit-scrollbar-track {
		background: var(--cf-surface-2);
	}

.page[hidden] {
	display: none !important
}

/* Footer */
.appFooter {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: var(--cf-z-footer);
	height: var(--cf-footer-h);
	display: grid;
	place-items: center;
	background: linear-gradient(180deg,var(--cf-surface-2),var(--cf-surface));
	border-top: 1px solid var(--cf-border);
	border-radius: var(--cf-radius-lg) var(--cf-radius-lg) 0 0;
}

	.appFooter .items {
		display: flex;
		gap: 12px;
		align-items: center;
		justify-content: center
	}

.footer-icon {
	width: var(--cf-footer-icon-size);
	height: var(--cf-footer-icon-size);
	display: grid;
	place-items: center;
	border-radius: var(--cf-footer-icon-radius);
	transition: transform var(--cf-speed-fast), background var(--cf-speed-fast);
}

	.footer-icon i {
		font-size: var(--cf-icon-footer);
		line-height: 1;
	}

	.footer-icon:hover {
		background: #0094ff;
	}

	.footer-icon.active {
		background: rgba(30,144,255,0.12);
		outline: 2px solid var(--cf-primary)
	}

	.footer-icon.generate {
		width: 80px;
		height: 80px;
		border-radius: 22px
	}

.generate {
	background-color: #0094ff;
}
.generate:hover {
	background-color:#ff6a00;
}

	.footer-icon .cta {
		
		position: absolute;
		margin-top: -36px;
		margin-left: 30px;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: var(--cf-accent);
		box-shadow: 0 0 0 0 rgba(255,102,0,0.7);
		animation: pulse 2s infinite;
	}