/**
 * ayuBha App OS
 * Loaded only on /app. Mobile-first, self-contained and intentionally separate
 * from the public marketing-page visual language.
 */

body.abx-app-os-page {
	--abx-os-bg: #f3f6f8;
	--abx-os-surface: #ffffff;
	--abx-os-ink: #102a2a;
	--abx-os-muted: #6d7b82;
	--abx-os-teal: #07999a;
	--abx-os-teal-dark: #075d55;
	--abx-os-cyan: #19bfc1;
	--abx-os-orange: #ff9d3f;
	--abx-os-lilac: #7167e8;
	--abx-os-blue: #3977e8;
	--abx-os-line: rgba(16, 42, 42, .09);
	--abx-os-shadow: 0 18px 45px rgba(30, 52, 63, .10);
	--abx-os-shadow-small: 0 10px 25px rgba(30, 52, 63, .075);
	background: var(--abx-os-bg) !important;
	color: var(--abx-os-ink);
	font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.abx-app-os-page #masthead,
body.abx-app-os-page .site-header,
body.abx-app-os-page #colophon,
body.abx-app-os-page .site-footer,
body.abx-app-os-page #abx-site-footer,
body.abx-app-os-page .entry-header,
body.abx-app-os-page .ast-breadcrumbs-wrapper,
body.abx-app-os-page .abx-mobile-back,
body.abx-app-os-page .abx-mobile-hub-trigger,
body.abx-app-mode .abx-mobile-hub-trigger {
	display: none !important;
}

body.abx-app-os-page #page,
body.abx-app-os-page #content,
body.abx-app-os-page #content > .ast-container,
body.abx-app-os-page #primary,
body.abx-app-os-page #main,
body.abx-app-os-page article.page,
body.abx-app-os-page .entry-content {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
}

body.abx-app-os-page .entry-content > * {
	max-width: none;
}

.abx-app-os {
	position: relative;
	min-height: 100vh;
	padding: 0 0 116px;
	background:
		radial-gradient(circle at 4% 0%, rgba(25, 191, 193, .12), transparent 24rem),
		radial-gradient(circle at 96% 9%, rgba(255, 157, 63, .12), transparent 22rem),
		var(--abx-os-bg);
	overflow: hidden;
}

.abx-app-os,
.abx-app-os * {
	box-sizing: border-box;
}

.abx-app-os a {
	text-decoration: none;
}

.abx-os-shell {
	width: min(1120px, calc(100% - 32px));
	margin-inline: auto;
}

/* Top identity bar */
.abx-os-top {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 40;
	padding: 14px 0 10px;
	background: linear-gradient(180deg, rgba(243, 246, 248, .96), rgba(243, 246, 248, .82), transparent);
	backdrop-filter: blur(18px);
}

.abx-os-identity {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
}

.abx-os-brand {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 1px solid rgba(255, 255, 255, .75);
	border-radius: 17px;
	background: rgba(255, 255, 255, .90);
	box-shadow: var(--abx-os-shadow-small);
	overflow: hidden;
}

.abx-os-logo {
	display: block;
	width: 43px;
	height: 43px;
	object-fit: contain;
}

.abx-os-logo-fallback {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(145deg, var(--abx-os-orange), #ffd178);
	color: #173f39;
	font-size: 27px;
	font-weight: 900;
}

.abx-os-greeting {
	display: grid;
	gap: 1px;
	min-width: 0;
}

.abx-os-greeting span {
	color: var(--abx-os-muted);
	font-size: 12px;
	font-weight: 650;
}

.abx-os-greeting strong {
	overflow: hidden;
	color: var(--abx-os-ink);
	font-size: 18px;
	font-weight: 850;
	letter-spacing: -.02em;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.abx-os-identity-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.abx-os-icon-button,
.abx-os-avatar {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--abx-os-line);
	border-radius: 15px;
	background: rgba(255, 255, 255, .92);
	color: var(--abx-os-ink);
	box-shadow: 0 7px 20px rgba(30, 52, 63, .06);
}

.abx-os-icon-button .abx-icon {
	width: 21px;
	height: 21px;
}

.abx-os-avatar {
	overflow: hidden;
}

.abx-os-avatar-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.abx-os-avatar-guest,
.abx-os-avatar-guest .abx-icon {
	width: 22px;
	height: 22px;
}

/* Hero command card */
.abx-os-hero {
	position: relative;
	margin-top: 8px;
	padding: clamp(24px, 5vw, 52px);
	border-radius: 32px;
	background:
		linear-gradient(135deg, rgba(113, 103, 232, .98), rgba(57, 119, 232, .97) 52%, rgba(25, 191, 193, .94));
	box-shadow: 0 26px 65px rgba(63, 82, 176, .25);
	color: #fff;
	overflow: hidden;
}

.abx-os-hero::before,
.abx-os-hero::after {
	content: "";
	position: absolute;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 999px;
	pointer-events: none;
}

.abx-os-hero::before {
	width: 330px;
	height: 330px;
	top: -215px;
	right: -70px;
	box-shadow: 0 0 0 42px rgba(255, 255, 255, .025), 0 0 0 88px rgba(255, 255, 255, .018);
}

.abx-os-hero::after {
	width: 180px;
	height: 180px;
	bottom: -125px;
	left: 24%;
	box-shadow: 0 0 0 34px rgba(255, 255, 255, .02);
}

.abx-os-hero-grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(250px, .7fr);
	gap: 28px;
	align-items: end;
}

.abx-os-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	padding: 8px 12px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 999px;
	background: rgba(255, 255, 255, .10);
	color: rgba(255, 255, 255, .90);
	font-size: 11px;
	font-weight: 850;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.abx-os-hero h1 {
	max-width: 700px;
	margin: 0;
	color: #fff;
	font-size: clamp(38px, 6vw, 72px);
	font-weight: 900;
	line-height: .98;
	letter-spacing: -.055em;
}

.abx-os-hero-copy {
	max-width: 620px;
	margin: 18px 0 0;
	color: rgba(255, 255, 255, .76);
	font-size: clamp(14px, 2vw, 17px);
	line-height: 1.55;
}

.abx-os-search-launch {
	display: flex;
	align-items: center;
	gap: 11px;
	width: 100%;
	margin-top: 24px;
	padding: 8px 9px 8px 16px;
	border: 1px solid rgba(255, 255, 255, .19);
	border-radius: 18px;
	background: rgba(255, 255, 255, .95);
	box-shadow: 0 12px 32px rgba(24, 32, 92, .15);
	color: #738087;
	text-align: left;
}

.abx-os-search-launch > span {
	flex: 1;
	font-size: 14px;
}

.abx-os-search-launch > i {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: #111f49;
	color: #fff;
	font-style: normal;
}

.abx-os-search-launch .abx-icon {
	width: 20px;
	height: 20px;
}

.abx-os-hero-shortcuts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	padding: 16px;
	border: 1px solid rgba(255, 255, 255, .15);
	border-radius: 24px;
	background: rgba(255, 255, 255, .10);
	backdrop-filter: blur(16px);
}

.abx-os-hero-shortcuts > span {
	grid-column: 1 / -1;
	color: rgba(255, 255, 255, .72);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .11em;
	text-transform: uppercase;
}

.abx-os-hero-shortcuts a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 76px;
	padding: 15px;
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 18px;
	background: rgba(255, 255, 255, .10);
	color: #fff;
	font-size: 14px;
	font-weight: 800;
}

.abx-os-hero-shortcuts a:first-of-type {
	background: #fff;
	color: #27326f;
}

.abx-os-hero-shortcuts small {
	display: block;
	margin-top: 3px;
	color: inherit;
	opacity: .66;
	font-size: 10px;
	font-weight: 650;
}

.abx-os-hero-shortcuts b {
	font-size: 18px;
}

/* Shared section system */
.abx-os-section {
	padding-top: 28px;
}

.abx-os-section-head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 16px;
}

.abx-os-section-head small {
	display: block;
	margin-bottom: 5px;
	color: var(--abx-os-teal);
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.abx-os-section-head h2 {
	margin: 0;
	color: var(--abx-os-ink);
	font-size: clamp(25px, 4vw, 38px);
	font-weight: 900;
	letter-spacing: -.04em;
}

.abx-os-section-head > a {
	flex: 0 0 auto;
	color: var(--abx-os-teal-dark);
	font-size: 13px;
	font-weight: 800;
}

/* Continue learning: transform LMS block into an app card */
.abx-app-os .ayubhaedu-app-continue {
	width: 100%;
	margin: 0;
	padding: 0;
}

.abx-app-os .ayubhaedu-app-continue > header {
	display: none;
}

.abx-app-os .ayubhaedu-app-resume,
.abx-app-os .ayubhaedu-app-resume.is-guest,
.abx-app-os .ayubhaedu-app-resume.is-empty {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr) auto;
	gap: 20px;
	align-items: center;
	padding: 18px;
	border: 0;
	border-radius: 26px;
	background: var(--abx-os-surface);
	box-shadow: var(--abx-os-shadow);
}

.abx-app-os .ayubhaedu-app-resume-media,
.abx-app-os .ayubhaedu-app-resume-icon,
.abx-app-os .ayubhaedu-app-resume.is-guest .ayubhaedu-app-resume-icon,
.abx-app-os .ayubhaedu-app-resume.is-empty .ayubhaedu-app-resume-icon {
	width: 150px;
	height: 112px;
	border-radius: 20px;
	background: linear-gradient(135deg, #101d46, #5667df);
}

.abx-app-os .ayubhaedu-app-resume-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.abx-app-os .ayubhaedu-app-resume-copy > span,
.abx-app-os .ayubhaedu-app-resume > div:nth-child(2) > span {
	margin-bottom: 5px;
	color: var(--abx-os-lilac);
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .11em;
}

.abx-app-os .ayubhaedu-app-resume h3 {
	margin: 0;
	font-size: clamp(19px, 3vw, 27px);
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: -.03em;
}

.abx-app-os .ayubhaedu-app-resume h3 a {
	color: var(--abx-os-ink);
}

.abx-app-os .ayubhaedu-app-resume p {
	margin: 7px 0 0;
	color: var(--abx-os-muted);
	font-size: 13px;
}

.abx-app-os .ayubhaedu-app-resume-progress {
	margin-top: 14px;
}

.abx-app-os .ayubhaedu-app-resume-progress i {
	height: 7px;
	background: #e7ebf0;
}

.abx-app-os .ayubhaedu-app-resume-progress i b {
	background: linear-gradient(90deg, var(--abx-os-lilac), var(--abx-os-cyan));
}

.abx-app-os .ayubhaedu-app-resume > .ayubhaedu-button {
	min-height: 48px;
	padding: 12px 19px;
	border: 0;
	border-radius: 15px;
	background: #111f49;
	box-shadow: none;
	color: #fff;
	font-weight: 850;
}

.abx-app-os .ayubhaedu-app-learning-stats {
	display: none;
}

/* App launcher tiles */
.abx-os-launch-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 13px;
}

.abx-os-launch-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 164px;
	padding: 18px;
	border: 1px solid rgba(255, 255, 255, .8);
	border-radius: 24px;
	box-shadow: var(--abx-os-shadow-small);
	color: var(--abx-os-ink);
	overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}

.abx-os-launch-card:hover,
.abx-os-launch-card:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 17px 36px rgba(30, 52, 63, .12);
}

.abx-os-launch-card::after {
	content: "";
	position: absolute;
	width: 96px;
	height: 96px;
	right: -38px;
	bottom: -45px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
}

.abx-os-launch-card.is-learning { background: linear-gradient(145deg, #e9e7ff, #f8f7ff); }
.abx-os-launch-card.is-courses  { background: linear-gradient(145deg, #dff8f7, #f7ffff); }
.abx-os-launch-card.is-free     { background: linear-gradient(145deg, #fff0df, #fffaf3); }
.abx-os-launch-card.is-library  { background: linear-gradient(145deg, #e4efff, #f7faff); }

.abx-os-launch-icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: auto;
	border-radius: 16px;
	background: rgba(255, 255, 255, .82);
	box-shadow: 0 8px 18px rgba(30, 52, 63, .06);
}

.abx-os-launch-card.is-learning .abx-os-launch-icon { color: var(--abx-os-lilac); }
.abx-os-launch-card.is-courses .abx-os-launch-icon  { color: var(--abx-os-teal); }
.abx-os-launch-card.is-free .abx-os-launch-icon     { color: #e67818; }
.abx-os-launch-card.is-library .abx-os-launch-icon  { color: var(--abx-os-blue); }

.abx-os-launch-icon svg {
	width: 23px;
	height: 23px;
}

.abx-os-launch-card strong {
	position: relative;
	z-index: 1;
	display: block;
	margin-top: 22px;
	font-size: 18px;
	font-weight: 900;
	letter-spacing: -.025em;
}

.abx-os-launch-card span:last-child {
	position: relative;
	z-index: 1;
	display: block;
	margin-top: 4px;
	color: var(--abx-os-muted);
	font-size: 12px;
	font-weight: 600;
}

/* Horizontally scrollable pathways */
.abx-os-paths {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding: 2px 1px 9px;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
}

.abx-os-paths::-webkit-scrollbar { display: none; }

.abx-os-path {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 46px;
	padding: 10px 16px;
	border: 1px solid var(--abx-os-line);
	border-radius: 15px;
	background: var(--abx-os-surface);
	box-shadow: 0 7px 20px rgba(30, 52, 63, .05);
	color: var(--abx-os-ink);
	font-size: 13px;
	font-weight: 800;
	scroll-snap-align: start;
}

.abx-os-path:first-child {
	border-color: transparent;
	background: #111f49;
	color: #fff;
}

.abx-os-path i {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--abx-os-orange);
}

/* Dynamic course rail */
.abx-app-os .ayubhaedu-page-section {
	width: 100%;
	margin: 0;
	padding: 0;
}

.abx-app-os .ayubhaedu-section-heading {
	align-items: end;
	margin: 0 0 16px;
}

.abx-app-os .ayubhaedu-section-heading h2 {
	margin: 0;
	color: var(--abx-os-ink);
	font-size: clamp(25px, 4vw, 38px);
	font-weight: 900;
	letter-spacing: -.04em;
}

.abx-app-os .ayubhaedu-section-heading p {
	display: none;
}

.abx-app-os .ayubhaedu-section-heading > a {
	color: var(--abx-os-teal-dark);
	font-size: 13px;
	font-weight: 800;
}

.abx-app-os .ayubhaedu-page-section.is-rail .ayubhaedu-section-card-grid {
	display: grid;
	grid-auto-columns: minmax(245px, 285px);
	grid-auto-flow: column;
	gap: 13px;
	overflow-x: auto;
	padding: 2px 1px 15px;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.abx-app-os .ayubhaedu-page-section.is-rail .ayubhaedu-section-card-grid::-webkit-scrollbar { display: none; }

.abx-app-os .ayubhaedu-section-card {
	display: block;
	min-width: 0;
	border: 0;
	border-radius: 23px;
	background: var(--abx-os-surface);
	box-shadow: var(--abx-os-shadow-small);
	overflow: hidden;
	scroll-snap-align: start;
}

.abx-app-os .ayubhaedu-section-card-media {
	display: block;
	width: 100%;
	height: 160px;
	aspect-ratio: auto;
	border-radius: 0;
	background: #e8edf2;
}

.abx-app-os .ayubhaedu-section-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.abx-app-os .ayubhaedu-section-card-media > span:not(.dashicons) {
	top: 12px;
	left: 12px;
	bottom: auto;
	padding: 6px 9px;
	border-radius: 999px;
	background: rgba(17, 31, 73, .83);
	font-size: 9px;
	font-weight: 850;
	backdrop-filter: blur(8px);
}

.abx-app-os .ayubhaedu-section-card-copy {
	padding: 15px;
}

.abx-app-os .ayubhaedu-section-card-state,
.abx-app-os .ayubhaedu-section-card-copy > p,
.abx-app-os .ayubhaedu-section-card-meta span,
.abx-app-os .ayubhaedu-section-text-link,
.abx-app-os .ayubhaedu-cart-action-message {
	display: none !important;
}

.abx-app-os .ayubhaedu-section-card h3 {
	margin: 0;
	font-size: 17px;
	font-weight: 900;
	line-height: 1.28;
	letter-spacing: -.025em;
}

.abx-app-os .ayubhaedu-section-card h3 a {
	color: var(--abx-os-ink);
}

.abx-app-os .ayubhaedu-section-card-meta {
	display: flex;
	margin-top: 12px;
}

.abx-app-os .ayubhaedu-section-card-meta strong {
	color: var(--abx-os-teal-dark);
	font-size: 13px;
}

.abx-app-os .ayubhaedu-section-card-actions {
	margin-top: 13px;
}

.abx-app-os .ayubhaedu-section-card-actions form {
	width: 100%;
}

.abx-app-os .ayubhaedu-section-card-actions .ayubhaedu-button {
	width: 100%;
	min-height: 42px;
	justify-content: center;
	padding: 10px 13px;
	border: 0;
	border-radius: 13px;
	background: #111f49;
	color: #fff;
	font-size: 12px;
	font-weight: 850;
}

/* More tools */
.abx-os-tools-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.abx-os-tool {
	display: flex;
	align-items: center;
	gap: 13px;
	min-height: 82px;
	padding: 14px;
	border: 1px solid var(--abx-os-line);
	border-radius: 20px;
	background: var(--abx-os-surface);
	box-shadow: 0 8px 22px rgba(30, 52, 63, .055);
	color: var(--abx-os-ink);
}

.abx-os-tool i {
	display: grid;
	place-items: center;
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	border-radius: 14px;
	background: #edf1ff;
	color: var(--abx-os-lilac);
	font-style: normal;
}

.abx-os-tool:nth-child(2) i { background: #e2f8f6; color: var(--abx-os-teal); }
.abx-os-tool:nth-child(3) i { background: #fff0df; color: #e67818; }
.abx-os-tool:nth-child(4) i { background: #e8f0ff; color: var(--abx-os-blue); }
.abx-os-tool:nth-child(5) i { background: #f0eaff; color: #7e55d6; }
.abx-os-tool:nth-child(6) i { background: #e8f7ee; color: #2b8c59; }

.abx-os-tool i svg {
	width: 20px;
	height: 20px;
}

.abx-os-tool strong {
	display: block;
	font-size: 14px;
	font-weight: 850;
}

.abx-os-tool span {
	display: block;
	margin-top: 2px;
	color: var(--abx-os-muted);
	font-size: 11px;
}

/* Friendly support strip */
.abx-os-help-strip {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	margin-top: 28px;
	padding: 17px;
	border-radius: 22px;
	background: linear-gradient(135deg, #0a514a, #087f78);
	box-shadow: 0 16px 36px rgba(8, 81, 74, .18);
	color: #fff;
}

.abx-os-help-strip > i {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .13);
	font-style: normal;
}

.abx-os-help-strip .abx-icon {
	width: 23px;
	height: 23px;
}

.abx-os-help-strip strong {
	display: block;
	font-size: 15px;
	font-weight: 850;
}

.abx-os-help-strip span {
	display: block;
	margin-top: 2px;
	color: rgba(255, 255, 255, .68);
	font-size: 11px;
}

.abx-os-help-strip > a {
	padding: 10px 14px;
	border-radius: 13px;
	background: #fff;
	color: #0a514a;
	font-size: 12px;
	font-weight: 850;
}

/* Persistent native bottom dock */
.abx-os-dock {
	position: fixed;
	z-index: 100005;
	left: 50%;
	bottom: max(13px, env(safe-area-inset-bottom));
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	width: min(520px, calc(100% - 24px));
	padding: 8px;
	border: 1px solid rgba(255, 255, 255, .82);
	border-radius: 24px;
	background: rgba(255, 255, 255, .93);
	box-shadow: 0 18px 50px rgba(29, 41, 60, .19);
	backdrop-filter: blur(20px);
	transform: translateX(-50%);
}

.abx-os-dock a,
.abx-os-dock button {
	display: grid;
	place-items: center;
	gap: 3px;
	min-height: 54px;
	padding: 5px 3px;
	border: 0;
	border-radius: 16px;
	background: transparent;
	box-shadow: none;
	color: #7b858d;
	font-size: 9px;
	font-weight: 750;
	line-height: 1;
}

.abx-os-dock .abx-icon {
	width: 21px;
	height: 21px;
}

.abx-os-dock a.is-active {
	background: #111f49;
	color: #fff;
}

/* Hub should open above the dock. */
body.abx-app-os-page .abx-mobile-hub-dialog,
body.abx-app-mode .abx-mobile-hub-dialog {
	padding-bottom: calc(104px + env(safe-area-inset-bottom));
}

@media (max-width: 900px) {
	.abx-os-hero-grid {
		grid-template-columns: 1fr;
	}
	.abx-os-hero-shortcuts {
		max-width: 520px;
	}
	.abx-os-launch-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.abx-os-tools-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.abx-app-os {
		padding-bottom: 105px;
	}
	.abx-os-shell {
		width: calc(100% - 20px);
	}
	.abx-os-top {
		padding-top: 9px;
	}
	.abx-os-brand {
		width: 46px;
		height: 46px;
		border-radius: 15px;
	}
	.abx-os-logo {
		width: 38px;
		height: 38px;
	}
	.abx-os-greeting span {
		font-size: 10px;
	}
	.abx-os-greeting strong {
		font-size: 16px;
	}
	.abx-os-icon-button,
	.abx-os-avatar {
		width: 40px;
		height: 40px;
		border-radius: 14px;
	}
	.abx-os-hero {
		margin-top: 3px;
		padding: 25px 20px 20px;
		border-radius: 27px;
	}
	.abx-os-hero h1 {
		font-size: clamp(37px, 12vw, 52px);
	}
	.abx-os-hero-copy {
		margin-top: 14px;
		font-size: 13px;
	}
	.abx-os-search-launch {
		margin-top: 19px;
	}
	.abx-os-hero-shortcuts {
		padding: 12px;
		border-radius: 19px;
	}
	.abx-os-hero-shortcuts a {
		min-height: 66px;
		padding: 12px;
		border-radius: 15px;
		font-size: 12px;
	}
	.abx-os-section {
		padding-top: 23px;
	}
	.abx-os-section-head {
		margin-bottom: 13px;
	}
	.abx-os-section-head h2,
	.abx-app-os .ayubhaedu-section-heading h2 {
		font-size: 25px;
	}
	.abx-app-os .ayubhaedu-app-resume,
	.abx-app-os .ayubhaedu-app-resume.is-guest,
	.abx-app-os .ayubhaedu-app-resume.is-empty {
		grid-template-columns: 86px minmax(0, 1fr);
		gap: 13px;
		padding: 13px;
		border-radius: 21px;
	}
	.abx-app-os .ayubhaedu-app-resume-media,
	.abx-app-os .ayubhaedu-app-resume-icon,
	.abx-app-os .ayubhaedu-app-resume.is-guest .ayubhaedu-app-resume-icon,
	.abx-app-os .ayubhaedu-app-resume.is-empty .ayubhaedu-app-resume-icon {
		width: 86px;
		height: 86px;
		border-radius: 17px;
	}
	.abx-app-os .ayubhaedu-app-resume h3 {
		font-size: 16px;
	}
	.abx-app-os .ayubhaedu-app-resume p {
		display: none;
	}
	.abx-app-os .ayubhaedu-app-resume > .ayubhaedu-button {
		grid-column: 1 / -1;
		width: 100%;
		min-height: 43px;
	}
	.abx-os-launch-grid {
		gap: 9px;
	}
	.abx-os-launch-card {
		min-height: 142px;
		padding: 15px;
		border-radius: 21px;
	}
	.abx-os-launch-icon {
		width: 43px;
		height: 43px;
		border-radius: 14px;
	}
	.abx-os-launch-card strong {
		font-size: 16px;
	}
	.abx-os-launch-card span:last-child {
		font-size: 10px;
	}
	.abx-app-os .ayubhaedu-page-section.is-rail .ayubhaedu-section-card-grid {
		grid-auto-columns: 72vw;
	}
	.abx-app-os .ayubhaedu-section-card-media {
		height: 145px;
	}
	.abx-os-tools-grid {
		grid-template-columns: 1fr 1fr;
		gap: 9px;
	}
	.abx-os-tool {
		align-items: flex-start;
		min-height: 105px;
		padding: 13px;
		border-radius: 18px;
	}
	.abx-os-tool span {
		font-size: 10px;
	}
	.abx-os-help-strip {
		grid-template-columns: auto minmax(0, 1fr);
		padding: 14px;
		border-radius: 19px;
	}
	.abx-os-help-strip > a {
		grid-column: 1 / -1;
		text-align: center;
	}
	.abx-os-dock {
		bottom: max(8px, env(safe-area-inset-bottom));
		width: calc(100% - 16px);
		padding: 6px;
		border-radius: 21px;
	}
	.abx-os-dock a,
	.abx-os-dock button {
		min-height: 50px;
		border-radius: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.abx-os-launch-card {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
 * 0.3.1 — Minimal App UI refinement
 * ----------------------------------------------------------------------- */
body.abx-app-os-page {
	--abx-os-bg: #f5f5f2;
	--abx-os-surface: #ffffff;
	--abx-os-ink: #111313;
	--abx-os-muted: #6e7374;
	--abx-os-teal: #0b9189;
	--abx-os-teal-dark: #086b65;
	--abx-os-orange: #f29b38;
	--abx-os-lilac: #111313;
	--abx-os-blue: #111313;
	--abx-os-line: rgba(17, 19, 19, .10);
	--abx-os-shadow: 0 18px 50px rgba(17, 19, 19, .08);
	--abx-os-shadow-small: 0 8px 24px rgba(17, 19, 19, .055);
	overflow-x: hidden;
}

/* Sticky positioning was blocked by the old overflow container. */
.abx-app-os {
	background: var(--abx-os-bg);
	overflow: visible;
}

.abx-os-top {
	padding: 10px 0;
	border-bottom: 1px solid var(--abx-os-line);
	background: rgba(255, 255, 255, .96);
	box-shadow: 0 4px 18px rgba(17, 19, 19, .035);
	backdrop-filter: blur(20px);
}

.abx-os-brand,
.abx-os-icon-button,
.abx-os-avatar {
	border-color: var(--abx-os-line);
	background: #fff;
	box-shadow: none;
}

/* Minimal dark command card inspired by native learning apps. */
.abx-os-hero {
	margin-top: 18px;
	padding: clamp(24px, 4vw, 44px);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 28px;
	background: #111313;
	box-shadow: 0 24px 60px rgba(17, 19, 19, .18);
}

.abx-os-hero::before,
.abx-os-hero::after {
	border-color: rgba(255,255,255,.07);
	box-shadow: none;
}

.abx-os-hero::before {
	width: 260px;
	height: 260px;
	top: -178px;
	right: -60px;
}

.abx-os-hero::after {
	width: 150px;
	height: 150px;
	left: auto;
	right: 8%;
	bottom: -110px;
}

.abx-os-kicker {
	padding: 0;
	border: 0;
	background: transparent;
	color: #8dd7d1;
}

.abx-os-hero h1 {
	max-width: 650px;
	font-size: clamp(36px, 5.5vw, 66px);
	line-height: 1.01;
	letter-spacing: -.05em;
}

.abx-os-hero-copy {
	max-width: 560px;
	color: rgba(255,255,255,.68);
}

.abx-os-search-launch {
	border-color: rgba(255,255,255,.12);
	border-radius: 16px;
	background: #fff;
	box-shadow: none;
}

.abx-os-search-launch > i {
	border-radius: 12px;
	background: #111313;
}

.abx-os-hero-shortcuts {
	padding: 12px;
	border-color: rgba(255,255,255,.10);
	border-radius: 20px;
	background: rgba(255,255,255,.06);
	backdrop-filter: none;
}

.abx-os-hero-shortcuts a,
.abx-os-hero-shortcuts a:first-of-type {
	min-height: 68px;
	border-color: rgba(255,255,255,.10);
	border-radius: 14px;
	background: #fff;
	color: #111313;
}

.abx-os-hero-shortcuts > span {
	color: rgba(255,255,255,.55);
}

/* Cleaner typography and spacing. */
.abx-os-section {
	padding-top: 24px;
}

.abx-os-section-head h2,
.abx-app-os .ayubhaedu-section-heading h2 {
	font-size: clamp(24px, 3.5vw, 34px);
	letter-spacing: -.035em;
}

/* Compact white launcher cards instead of colourful website tiles. */
.abx-os-launch-grid {
	gap: 11px;
}

.abx-os-launch-card,
.abx-os-launch-card.is-learning,
.abx-os-launch-card.is-courses,
.abx-os-launch-card.is-free,
.abx-os-launch-card.is-library {
	min-height: 146px;
	border: 1px solid var(--abx-os-line);
	border-radius: 20px;
	background: #fff;
	box-shadow: var(--abx-os-shadow-small);
}

.abx-os-launch-card::after {
	display: none;
}

.abx-os-launch-icon,
.abx-os-launch-card.is-learning .abx-os-launch-icon,
.abx-os-launch-card.is-courses .abx-os-launch-icon,
.abx-os-launch-card.is-free .abx-os-launch-icon,
.abx-os-launch-card.is-library .abx-os-launch-icon {
	background: #111313;
	color: #fff;
	box-shadow: none;
}

.abx-os-launch-card strong {
	margin-top: 20px;
	font-size: 17px;
}

/* Force all learning-path capsule labels to remain readable. */
.abx-os-path,
.abx-os-path:visited,
.abx-os-path:hover,
.abx-os-path:focus {
	border-color: var(--abx-os-line);
	background: #fff;
	color: #111313 !important;
}

.abx-os-path:first-child,
.abx-os-path:first-child:visited,
.abx-os-path:first-child:hover,
.abx-os-path:first-child:focus {
	border-color: #111313;
	background: #111313;
	color: #fff !important;
}

.abx-os-path i {
	background: var(--abx-os-teal);
}

/* Compact featured-course carousel. */
.abx-app-os .ayubhaedu-page-section.is-rail .ayubhaedu-section-card-grid {
	align-items: start !important;
	grid-auto-columns: minmax(238px, 276px);
}

.abx-app-os .ayubhaedu-section-card {
	align-self: start !important;
	height: auto !important;
	min-height: 0 !important;
	border: 1px solid var(--abx-os-line);
	border-radius: 20px;
	box-shadow: var(--abx-os-shadow-small);
}

.abx-app-os .ayubhaedu-section-card-media {
	height: 148px;
}

/* Badge/capsule text visibility. */
.abx-app-os .ayubhaedu-section-card-media > span:not(.dashicons),
.abx-app-os .ayubhaedu-section-card-media > a > span:not(.dashicons) {
	display: inline-flex !important;
	align-items: center;
	max-width: calc(100% - 24px);
	padding: 6px 9px !important;
	border-radius: 999px !important;
	background: rgba(17,19,19,.88) !important;
	color: #fff !important;
	font-size: 9px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.abx-app-os .ayubhaedu-section-card-copy {
	display: block !important;
	padding: 14px;
}

.abx-app-os .ayubhaedu-section-card-state {
	display: inline-flex !important;
	align-items: center;
	width: auto !important;
	margin: 0 0 8px !important;
	padding: 5px 8px !important;
	border-radius: 999px !important;
	background: #edf7f5 !important;
	color: #086b65 !important;
	font-size: 9px !important;
	font-weight: 800 !important;
	line-height: 1.1 !important;
}

/* Re-enable the excerpt and constrain it to two lines. */
.abx-app-os .ayubhaedu-section-card-copy > p {
	display: -webkit-box !important;
	margin: 8px 0 0 !important;
	overflow: hidden;
	color: var(--abx-os-muted) !important;
	font-size: 12px !important;
	line-height: 1.45 !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.abx-app-os .ayubhaedu-section-card h3 {
	font-size: 16px;
	line-height: 1.25;
}

.abx-app-os .ayubhaedu-section-card-meta {
	margin-top: 10px;
}

.abx-app-os .ayubhaedu-section-card-actions {
	margin-top: 11px;
}

.abx-app-os .ayubhaedu-section-card-actions .ayubhaedu-button {
	min-height: 40px;
	border-radius: 12px;
	background: #111313;
}

/* Professional utilities and support. */
.abx-os-tool {
	border-radius: 17px;
	box-shadow: none;
}

.abx-os-tool i {
	background: #f1f1ee !important;
	color: #111313 !important;
}

.abx-os-help-strip {
	border: 1px solid var(--abx-os-line);
	background: #fff;
	box-shadow: var(--abx-os-shadow-small);
	color: #111313;
}

.abx-os-help-strip > i {
	background: #111313;
	color: #fff;
}

.abx-os-help-strip span {
	color: var(--abx-os-muted);
}

.abx-os-help-strip > a {
	background: #111313;
	color: #fff;
}

/* Bottom navigation remains fixed; header now also stays sticky. */
.abx-os-dock {
	border-color: var(--abx-os-line);
	background: rgba(255,255,255,.96);
	box-shadow: 0 16px 45px rgba(17,19,19,.14);
}

.abx-os-dock a.is-active {
	background: #111313;
}

@media (max-width: 600px) {
	.abx-os-hero {
		margin-top: 10px;
		padding: 23px 18px 18px;
		border-radius: 23px;
	}

	.abx-os-hero h1 {
		font-size: clamp(34px, 10.5vw, 46px);
	}

	.abx-os-launch-card {
		min-height: 132px;
		padding: 14px;
		border-radius: 18px;
	}

	.abx-app-os .ayubhaedu-page-section.is-rail .ayubhaedu-section-card-grid {
		grid-auto-columns: minmax(236px, 74vw);
		align-items: start !important;
	}

	.abx-app-os .ayubhaedu-section-card-media {
		height: 136px;
	}

	.abx-os-tools-grid {
		grid-template-columns: 1fr;
	}

	.abx-os-tool {
		min-height: 76px;
	}
}


/* --------------------------------------------------------------------------
 * 0.3.2 — Unified app shell, raised hub and compact mobile rails
 * ----------------------------------------------------------------------- */

/* Native app mode now receives the same compact identity bar on all major
 * pages, while the public desktop website keeps its normal Astra header. */
body.abx-app-mode:not(.abx-app-os-page):not(.ayubhaedu-focus-mode) #masthead,
body.abx-app-mode:not(.abx-app-os-page):not(.ayubhaedu-focus-mode) .site-header,
body.abx-app-mode:not(.abx-app-os-page):not(.ayubhaedu-focus-mode) #colophon,
body.abx-app-mode:not(.abx-app-os-page):not(.ayubhaedu-focus-mode) .site-footer,
body.abx-app-mode:not(.abx-app-os-page):not(.ayubhaedu-focus-mode) #abx-site-footer {
	display: none !important;
}

body.abx-app-mode:not(.abx-app-os-page) {
	background: #f5f5f2 !important;
}

body.abx-app-mode:not(.abx-app-os-page) #content {
	padding-bottom: 112px !important;
}

.abx-os-global-top {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100000;
	padding: 10px 0;
	border-bottom: 1px solid rgba(17, 19, 19, .09);
	background: rgba(255, 255, 255, .96);
	box-shadow: 0 4px 18px rgba(17, 19, 19, .04);
	backdrop-filter: blur(20px);
}

.abx-os-global-top .abx-os-shell {
	width: min(1120px, calc(100% - 24px));
}

/* Rich teal command card with a restrained abstract texture. */
.abx-os-hero {
	border-color: rgba(255, 255, 255, .10);
	background:
		radial-gradient(circle at 86% 8%, rgba(255, 255, 255, .13), transparent 25%),
		radial-gradient(circle at 78% 84%, rgba(29, 198, 190, .18), transparent 30%),
		repeating-linear-gradient(135deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 22px),
		linear-gradient(135deg, #09555c 0%, #0b6870 56%, #087780 100%);
	box-shadow: 0 24px 60px rgba(9, 85, 92, .22);
}

.abx-os-hero::before,
.abx-os-hero::after {
	border-color: rgba(255, 255, 255, .12);
}

.abx-os-kicker {
	color: #9fe5e2;
}

.abx-os-search-launch > i,
.abx-os-launch-icon,
.abx-os-launch-card.is-learning .abx-os-launch-icon,
.abx-os-launch-card.is-courses .abx-os-launch-icon,
.abx-os-launch-card.is-free .abx-os-launch-icon,
.abx-os-launch-card.is-library .abx-os-launch-icon,
.abx-os-help-strip > i,
.abx-os-help-strip > a,
.abx-app-os .ayubhaedu-section-card-actions .ayubhaedu-button {
	background: #09555c;
	color: #fff;
}

.abx-os-path:first-child,
.abx-os-path:first-child:visited,
.abx-os-path:first-child:hover,
.abx-os-path:first-child:focus {
	border-color: #09555c;
	background: #09555c;
}

/* Prevent inherited LMS flex growth from creating the long blank course rail. */
.abx-app-os .ayubhaedu-page-section,
.abx-app-os .ayubhaedu-page-section.is-rail,
.abx-app-os .ayubhaedu-page-section.is-rail .ayubhaedu-section-card-grid {
	min-height: 0 !important;
}

.abx-app-os .ayubhaedu-page-section.is-rail .ayubhaedu-section-card-grid {
	display: flex !important;
	align-items: flex-start !important;
	gap: 13px !important;
}

.abx-app-os .ayubhaedu-page-section.is-rail .ayubhaedu-section-card {
	flex: 0 0 min(276px, 74vw) !important;
	align-self: flex-start !important;
	height: auto !important;
	min-height: 0 !important;
}

.abx-app-os .ayubhaedu-section-card-copy {
	flex: 0 0 auto !important;
	height: auto !important;
	min-height: 0 !important;
}

.abx-app-os .ayubhaedu-section-card-meta {
	margin-top: 10px !important;
}

.abx-app-os .ayubhaedu-section-card-actions {
	margin-top: 10px !important;
}

/* Keep the final support action fully above the persistent dock. */
.abx-app-os > .abx-os-shell > .abx-os-section:last-child {
	padding-bottom: 92px;
}

.abx-os-help-strip {
	margin-bottom: 0;
}

/* Raised centre hub: two destinations on each side, one memorable control. */
.abx-os-dock {
	overflow: visible;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	border-color: rgba(17, 19, 19, .10);
	background: rgba(255, 255, 255, .97);
}

.abx-os-dock a.is-active {
	background: #09555c;
}

.abx-os-dock .abx-os-dock-hub {
	position: relative;
	z-index: 2;
	align-self: start;
	justify-self: center;
	width: 66px;
	height: 66px;
	min-height: 66px;
	margin-top: -25px;
	padding: 0;
	border: 6px solid #f5f5f2;
	border-radius: 50%;
	background: linear-gradient(145deg, #0b6971, #09555c);
	color: #fff;
	box-shadow: 0 14px 30px rgba(9, 85, 92, .30);
	transform: none;
}

.abx-os-dock .abx-os-dock-hub .abx-icon {
	width: 27px;
	height: 27px;
}

.abx-os-dock .abx-os-dock-hub span {
	position: absolute;
	top: 68px;
	color: #687378;
	font-size: 9px;
	font-weight: 800;
	white-space: nowrap;
}

/* Bottom-sheet motion and drag affordance. Overlay tap and Escape remain active. */
.abx-mobile-hub-dialog {
	overscroll-behavior: contain;
	transition: transform .22s ease;
	will-change: transform;
}

.abx-mobile-hub-dialog.is-dragging {
	transition: none !important;
}

.abx-mobile-hub-handle {
	cursor: grab;
	touch-action: none;
}

body.abx-app-os-page .abx-mobile-hub-dialog,
body.abx-app-mode .abx-mobile-hub-dialog {
	padding-bottom: calc(116px + env(safe-area-inset-bottom));
}

@media (max-width: 600px) {
	.abx-app-os {
		padding-bottom: 126px;
	}

	.abx-os-hero {
		background:
			radial-gradient(circle at 91% 8%, rgba(255, 255, 255, .13), transparent 28%),
			radial-gradient(circle at 76% 88%, rgba(29, 198, 190, .18), transparent 32%),
			repeating-linear-gradient(135deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 19px),
			linear-gradient(145deg, #09555c 0%, #0b6870 62%, #087780 100%);
	}

	.abx-app-os .ayubhaedu-page-section.is-rail .ayubhaedu-section-card {
		flex-basis: min(258px, 76vw) !important;
	}

	.abx-app-os > .abx-os-shell > .abx-os-section:last-child {
		padding-bottom: 110px;
	}

	.abx-os-dock {
		min-height: 68px;
		padding: 7px 6px 6px;
	}

	.abx-os-dock .abx-os-dock-hub {
		width: 64px;
		height: 64px;
		min-height: 64px;
		margin-top: -23px;
		border-width: 5px;
	}

	.abx-os-dock .abx-os-dock-hub span {
		top: 65px;
	}
}

/* --------------------------------------------------------------------------
 * 0.3.3 — White app canvas, universal header hand-off and circular hub
 * ----------------------------------------------------------------------- */
body.abx-app-os-page,
body.abx-app-mode:not(.ayubhaedu-focus-mode) {
	--abx-os-bg: #ffffff;
	background: #fff !important;
}

.abx-app-os {
	background:
		radial-gradient(circle at 4% 0%, rgba(9, 85, 92, .045), transparent 22rem),
		radial-gradient(circle at 96% 7%, rgba(242, 161, 27, .04), transparent 20rem),
		#fff;
}

/* Keep the raised dock control unmistakably circular even when generic button
 * rules from WordPress, Astra or the LMS are loaded later. */
.abx-os-dock .abx-os-dock-hub,
.abx-os-dock button.abx-os-dock-hub {
	flex: 0 0 64px !important;
	width: 64px !important;
	height: 64px !important;
	min-width: 64px !important;
	min-height: 64px !important;
	max-width: 64px !important;
	max-height: 64px !important;
	aspect-ratio: 1 / 1;
	padding: 0 !important;
	border-radius: 999px !important;
	background: linear-gradient(145deg, #0b6971, #09555c) !important;
	color: #fff !important;
	overflow: visible;
}

.abx-os-dock .abx-os-dock-hub::before,
.abx-os-dock .abx-os-dock-hub::after {
	border-radius: 999px !important;
}

@media (max-width: 900px) {
	/* The universal compact header replaces both app-specific identity bars on
	 * small screens, so every destination feels like part of one product. */
	body.abx-app-os-page .abx-os-top,
	body.abx-app-mode .abx-os-global-top {
		display: none !important;
	}

	body.abx-app-mode:not(.abx-app-os-page) #content {
		background: #fff !important;
	}
}

@media (max-width: 600px) {
	.abx-os-dock .abx-os-dock-hub,
	.abx-os-dock button.abx-os-dock-hub {
		flex-basis: 62px !important;
		width: 62px !important;
		height: 62px !important;
		min-width: 62px !important;
		min-height: 62px !important;
		max-width: 62px !important;
		max-height: 62px !important;
		border-radius: 999px !important;
	}
}


/* --------------------------------------------------------------------------
 * 0.3.4 — Universal mobile dock and width-safe App/Home shells
 * ----------------------------------------------------------------------- */
.abx-os-dock {
	display: none;
}

@media (max-width: 900px) {
	.abx-os-dock {
		display: grid;
	}

	body:not(.ayubhaedu-focus-mode) #page {
		padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
	}

	body.abx-app-os-page .abx-app-os {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
		overflow-x: hidden !important;
	}

	body.abx-app-os-page .abx-os-shell {
		box-sizing: border-box !important;
		width: calc(100% - 20px) !important;
		min-width: 0 !important;
		max-width: calc(100% - 20px) !important;
		margin-inline: auto !important;
	}

	body.abx-app-os-page .abx-os-section,
	body.abx-app-os-page .ayubhaedu-page-section,
	body.abx-app-os-page .ayubhaedu-section-card-grid {
		min-width: 0 !important;
		max-width: 100% !important;
	}

	body.abx-app-os-page .ayubhaedu-section-card-grid {
		overflow-x: auto !important;
		overflow-y: hidden !important;
	}

	/* The dock replaces the older floating orange quick-hub trigger everywhere. */
	.abx-mobile-hub-trigger {
		display: none !important;
	}
}


/* --------------------------------------------------------------------------
 * 0.3.5 — Compact sober dock, reliable Library state and richer texture
 * ----------------------------------------------------------------------- */
.abx-os-hero {
	background:
		radial-gradient(circle at 12% 22%, rgba(255,255,255,.16) 0 2px, transparent 2.6px) 0 0 / 24px 24px,
		repeating-conic-gradient(from 45deg at 78% 28%, rgba(255,255,255,.045) 0 25%, transparent 0 50%) 0 0 / 34px 34px,
		radial-gradient(circle at 86% 8%, rgba(255,255,255,.15), transparent 28%),
		radial-gradient(circle at 74% 86%, rgba(37,210,201,.20), transparent 34%),
		linear-gradient(145deg, #0b6972 0%, #09555c 55%, #063f45 100%) !important;
}

.abx-os-search-launch > i,
.abx-os-launch-icon,
.abx-os-help-strip > i,
.abx-os-help-strip > a,
.abx-app-os .ayubhaedu-section-card-actions .ayubhaedu-button,
.abx-os-dock .abx-os-dock-hub,
.abx-os-dock button.abx-os-dock-hub {
	background: var(--abx-premium-gradient) !important;
}

@media (max-width: 900px) {
	.abx-os-dock {
		bottom: max(5px, env(safe-area-inset-bottom)) !important;
		width: min(480px, calc(100% - 12px)) !important;
		min-height: 54px !important;
		padding: 4px 5px !important;
		border-radius: 18px !important;
		border-color: rgba(9,85,92,.10) !important;
		background: rgba(255,255,255,.98) !important;
		box-shadow: 0 10px 28px rgba(28,50,48,.13) !important;
	}

	.abx-os-dock > a,
	.abx-os-dock > button:not(.abx-os-dock-hub) {
		gap: 2px !important;
		min-height: 44px !important;
		padding: 3px 2px !important;
		border-radius: 13px !important;
		color: #75827f !important;
		font-size: 7.5px !important;
		font-weight: 760 !important;
	}

	.abx-os-dock > a .abx-icon,
	.abx-os-dock > button:not(.abx-os-dock-hub) .abx-icon {
		width: 17px !important;
		height: 17px !important;
	}

	.abx-os-dock > a:hover,
	.abx-os-dock > a:focus-visible,
	.abx-os-dock > a.is-active {
		border: 1px solid rgba(9,85,92,.11) !important;
		background:
			radial-gradient(circle at 18% 18%, rgba(9,85,92,.08) 0 1.5px, transparent 2px) 0 0 / 16px 16px,
			linear-gradient(145deg, #eef9f8 0%, #f8fcfb 100%) !important;
		color: #09555c !important;
		box-shadow: inset 0 0 0 1px rgba(255,255,255,.70) !important;
	}

	.abx-os-dock > a.is-active .abx-icon,
	.abx-os-dock > a:hover .abx-icon,
	.abx-os-dock > a:focus-visible .abx-icon {
		color: #09555c !important;
	}

	.abx-os-dock .abx-os-dock-hub,
	.abx-os-dock button.abx-os-dock-hub {
		flex-basis: 50px !important;
		width: 50px !important;
		height: 50px !important;
		min-width: 50px !important;
		min-height: 50px !important;
		max-width: 50px !important;
		max-height: 50px !important;
		margin-top: -18px !important;
		border-width: 4px !important;
		border-color: #fff !important;
		box-shadow: 0 10px 23px rgba(9,85,92,.25) !important;
	}

	.abx-os-dock .abx-os-dock-hub .abx-icon {
		width: 21px !important;
		height: 21px !important;
	}

	.abx-os-dock .abx-os-dock-hub span {
		top: 49px !important;
		font-size: 7px !important;
		color: #697572 !important;
	}

	body:not(.ayubhaedu-focus-mode) #page {
		padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
	}

	.abx-app-os > .abx-os-shell > .abx-os-section:last-child {
		padding-bottom: 82px !important;
	}

	body.abx-app-os-page .abx-mobile-hub-dialog,
	body.abx-app-mode .abx-mobile-hub-dialog {
		padding-bottom: calc(82px + env(safe-area-inset-bottom)) !important;
	}
}

/* 0.3.6 — Solid app surfaces and universal shell width. */
.abx-app-os,
.abx-app-os-page,
.abx-app-mode {
	--abx-os-bg: #ffffff;
	--abx-os-surface: #ffffff;
}

.abx-os-shell,
.abx-app-os .abx-os-shell,
.abx-os-global-top .abx-os-shell {
	width: min(calc(100% - (2 * var(--abx-layout-gutter))), var(--abx-layout-max)) !important;
	max-width: var(--abx-layout-max) !important;
	margin-inline: auto !important;
}

.abx-os-hero {
	background-color: var(--abx-brand-solid) !important;
	background-image: var(--abx-brand-pattern) !important;
	background-size: 120px 120px !important;
	box-shadow: 0 22px 56px rgba(9, 85, 92, .18) !important;
}

.abx-os-search-launch > i,
.abx-os-launch-icon,
.abx-os-help-strip > i,
.abx-os-help-strip > a,
.abx-app-os .ayubhaedu-section-card-actions .ayubhaedu-button,
.abx-os-dock .abx-os-dock-hub,
.abx-os-dock button.abx-os-dock-hub {
	background-color: var(--abx-brand-solid) !important;
	background-image: var(--abx-brand-pattern) !important;
	background-size: 120px 120px !important;
}

.abx-os-launch-card,
.abx-os-tool,
.abx-os-help-strip,
.abx-app-os .ayubhaedu-section-card {
	background: #fff !important;
	border-color: rgba(20, 43, 42, .10) !important;
}

/* --------------------------------------------------------------------------
 * 0.3.7 — Icon-only centre hub and shell parity
 * ----------------------------------------------------------------------- */
.abx-os-dock .abx-os-dock-hub span {
	display: none !important;
}

.abx-os-dock .abx-os-dock-hub,
.abx-os-dock button.abx-os-dock-hub {
	line-height: 1 !important;
}

@media (max-width: 900px) {
	.abx-os-dock .abx-os-dock-hub,
	.abx-os-dock button.abx-os-dock-hub {
		margin-top: -18px !important;
	}
}