:root,
[data-md-color-scheme="default"],
[data-md-color-scheme="slate"] {
	/* Main colors from main website */
	--main-bg-color: #0f0c29;
	--main-background-color: #0f0c29;
	--main-nav-color: #1a1a2e;
	--main-border-color: #2c3761;
	--main-font-color: #e6e0ff;
	--main-hover-color: rgba(59, 130, 246, 0.15);
	--btn-blue-color: #667eea;
	--btn-blue-hover: #4338ca;
	--btn-red-color: #f41f1f;
	--btn-red-hover: #a90d24;
	--scroll-color: #5a5a9e;
	--scroll-hover: #7c56c1;
	--white-color: #ffffff;
	--sidebar-font-color: #c7d2fe;
	--grey-font: #d4cee5;

	/* Gradient variables */
	--main-bg-gradient: linear-gradient(
		135deg,
		#0f0c29 0%,
		#24243e 50%,
		#302b63 100%
	);
	--main-nav-gradient: linear-gradient(
		135deg,
		#1a1a2e 0%,
		#16213e 50%,
		#0f3460 100%
	);
	--main-hover-gradient: linear-gradient(
		135deg,
		rgba(26, 26, 46, 1) 0%,
		rgba(26, 34, 77, 1) 50%,
		rgba(47, 15, 96, 1) 100%
	);
	--btn-blue-gradient: linear-gradient(135deg, #4338ca, #1d4ed8);
	--btn-blue-hover-gradient: linear-gradient(135deg, #4338ca, #1e40af);
	--btn-red-gradient: linear-gradient(
		135deg,
		rgba(247, 64, 64, 1) 0%,
		rgba(163, 2, 2, 1) 100%
	);
	--btn-red-hover-gradient: linear-gradient(
		135deg,
		rgba(181, 29, 29, 1) 0%,
		rgba(117, 0, 0, 1) 100%
	);

	/* Override MkDocs Material theme colors */
	--md-primary-fg-color: #4338ca;
	--md-primary-fg-color--light: #667eea;
	--md-primary-fg-color--dark: #302b63;
	--md-accent-fg-color: #667eea;
	--md-accent-fg-color--transparent: rgba(102, 126, 234, 0.1);
	--md-default-bg-color: #0f0c29 !important;
	--md-default-fg-color: #e6e0ff;
	--md-default-fg-color--light: #c7d2fe;
	--md-default-fg-color--lighter: #9ca3af;
	--md-default-fg-color--lightest: #6b7280;
	--md-code-bg-color: #1a1a2e;
	--md-code-fg-color: #e6e0ff;
	--md-typeset-a-color: #667eea;

	/* Legacy colors for compatibility */
	--green: #1aad18;
	--pink: #c961eb;
}

/* Apply gradient backgrounds */
html {
	background: var(--main-bg-gradient) fixed !important;
	min-height: 100%;
}

body {
	background: transparent !important;
	min-height: 100vh;
}

.md-header {
	background: var(--main-nav-gradient) !important;
	border-bottom: 1px solid var(--main-border-color);
}

.md-tabs {
	background: var(--main-nav-gradient) !important;
	border-bottom: 1px solid var(--main-border-color);
}

.md-sidebar {
	background-color: transparent !important;
}

.md-sidebar--primary {
	background: none !important;
}

.md-sidebar--secondary {
	background: none !important;
}

.md-nav {
	color: var(--sidebar-font-color);
}

.md-nav__link {
	color: var(--sidebar-font-color);
	background: none !important;
	box-shadow: none !important;
	display: flex;
	align-items: center;
}

/* SVG page icons are injected directly inside .md-nav__link (no wrapper span).
   Force a uniform square so all icons take the same width regardless of viewBox ratio. */
.md-nav__link > svg:first-child {
	flex: 0 0 0.85rem;
	width: 0.85rem !important;
	height: 0.85rem !important;
	min-width: 0.85rem !important;
	max-width: 0.85rem !important;
	margin-right: 0.4rem;
	overflow: hidden;
}

/* .md-nav__icon is used only for chevron/expand arrows — keep it minimal */
.md-nav__link .md-nav__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.md-nav__link:hover {
	color: var(--main-font-color);
}

.md-nav__link--active {
	color: var(--btn-blue-color);
	font-weight: 600;
}

.md-nav--secondary .md-nav__title {
	background: none !important;
	box-shadow: none !important;
	display: none;
}

.md-copyright__highlight {
	color: var(--sidebar-font-color) !important;
}

.md-nav--primary .md-nav__title {
	background-color: transparent !important;
}

.md-footer {
	background: var(--main-nav-color) !important;
	border-top: 1px solid var(--main-border-color);
	color: var(--sidebar-font-color) !important;
}

.md-footer__inner {
	background: var(--main-nav-color) !important;
	color: var(--sidebar-font-color) !important;
}

.md-footer__link {
	color: var(--sidebar-font-color) !important;
	transition: color 0.2s;
}

.md-footer__link:hover {
	color: var(--white-color) !important;
}

.md-footer a {
	color: var(--sidebar-font-color) !important;
	text-decoration: none;
	transition: color 0.2s;
}

.md-footer a:hover {
	color: var(--white-color) !important;
}

.md-footer-meta {
	background: var(--main-nav-color) !important;
}

.md-copyright {
	color: var(--sidebar-font-color) !important;
	opacity: 0.7;
}

.md-social__link {
	color: var(--sidebar-font-color) !important;
	font-size: 20px;
	transition: color 0.2s;
}

.md-social__link:hover {
	color: var(--white-color) !important;
}

.md-footer-meta__inner {
	color: var(--sidebar-font-color) !important;
}

.md-footer__title {
	color: var(--sidebar-font-color) !important;
}

.md-footer__direction {
	color: var(--sidebar-font-color) !important;
}

/* Buttons */
.md-button {
	background: var(--btn-blue-gradient);
	color: var(--white-color);
	border: none;
}

.md-button:hover {
	background: var(--btn-blue-hover-gradient);
}

.md-button--primary {
	background: var(--btn-blue-gradient);
	color: var(--white-color);
}

.md-button--primary:hover {
	background: var(--btn-blue-hover-gradient);
}

.md-grid {
	max-width: 1600px;
}

[dir="ltr"] .md-header__title {
	margin-left: 0.1rem;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
	height: 2.5rem;
}

.md-typeset h1 {
	font-weight: bold !important;
	color: #667eea;
	text-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
}

.md-typeset h2 {
	color: #c961eb;
	font-weight: bold !important;
	border-top: 1px solid var(--main-border-color);
	padding-top: 24px;
}

.md-typeset h3 {
	color: #7c56c1;
	font-weight: 600 !important;
}

.md-typeset h4 {
	color: #fe4eff;
}

.md-typeset p,
.md-typeset li {
	color: var(--main-font-color);
}

.md-typeset a {
	color: var(--btn-blue-color);
}

.md-typeset a:hover {
	color: var(--btn-blue-hover);
	text-decoration: underline;
}

.md-typeset code {
	background-color: var(--md-code-bg-color);
	color: var(--md-code-fg-color);
}

.md-typeset table:not([class]) {
	border: 1px solid var(--main-border-color);
	background-color: rgba(26, 26, 46, 0.3);
}

.md-typeset table:not([class]) th {
	background: var(--main-nav-gradient);
	color: var(--white-color);
	border-bottom: 2px solid var(--main-border-color);
}

.md-typeset table:not([class]) td {
	border-top: 1px solid var(--main-border-color);
	color: var(--main-font-color);
}

/* Search */
.md-search__input {
	background-color: rgba(26, 26, 46, 0.8);
	color: var(--main-font-color);
	border: 1px solid var(--main-border-color);
}

.md-search__input::placeholder {
	color: var(--sidebar-font-color);
}

.md-search__input:hover {
	background-color: rgba(26, 26, 46, 0.9);
}

/* Scrollbar */
::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

::-webkit-scrollbar-track {
	background: var(--main-bg-color);
}

::-webkit-scrollbar-thumb {
	background: var(--scroll-color);
	border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--scroll-hover);
}

/* Admonitions */
.md-typeset .admonition,
.md-typeset details {
	background-color: rgba(26, 26, 46, 0.5);
	border-left: 4px solid var(--btn-blue-color);
	color: var(--main-font-color);
}

.md-typeset .admonition-title,
.md-typeset summary {
	background-color: rgba(102, 126, 234, 0.15);
	color: var(--main-font-color);
}

p {
	margin-left: 1rem;
}

[dir="ltr"] .md-typeset ol li,
[dir="ltr"] .md-typeset ul li {
	margin-left: 2.25em;
}

.md-typeset ol li,
.md-typeset ul li {
	margin-bottom: initial;
}

.table-center-rows,
.table-center-long-rows {
	text-align: center !important;
	background: transparent !important;
}

.md-typeset__scrollwrap {
	display: flex;
	align-items: center;
	justify-content: center;
}

.video-wrapper {
	position: relative;
	display: block;
	height: 0;
	padding: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
}
.video-wrapper > iframe {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}