.bjjv-library {
	--bjjv-bg: #050a12;
	--bjjv-panel: #0b1523;
	--bjjv-panel-2: #101f33;
	--bjjv-blue: #168cff;
	--bjjv-blue-soft: #65bcff;
	--bjjv-white: #fff;
	--bjjv-text: #d9e7f5;
	--bjjv-muted: #91a7bd;
	--bjjv-line: rgba(255, 255, 255, .11);
	width: 100%;
	color: var(--bjjv-text);
	background:
		radial-gradient(circle at 5% 0%, rgba(22, 140, 255, .2), transparent 30%),
		radial-gradient(circle at 95% 42%, rgba(22, 140, 255, .1), transparent 24%),
		var(--bjjv-bg);
	font-family: Arial, Helvetica, sans-serif;
}

.bjjv-library,
.bjjv-library * { box-sizing: border-box; }

.bjjv-library__inner {
	width: min(1180px, calc(100% - 40px));
	margin: 0 auto;
	padding: 84px 0 70px;
}

.bjjv-library__header { max-width: 850px; }

.bjjv-library__eyebrow {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0 0 17px;
	color: var(--bjjv-blue-soft);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 2.2px;
	text-transform: uppercase;
}

.bjjv-library__eyebrow::before {
	width: 32px;
	height: 2px;
	content: "";
	background: var(--bjjv-blue);
}

.bjjv-library__header h1 {
	margin: 0 0 24px;
	color: var(--bjjv-white);
	font-size: clamp(48px, 7vw, 82px);
	font-weight: 900;
	line-height: .96;
	letter-spacing: -4px;
}

.bjjv-library__header h1 span { color: var(--bjjv-blue-soft); }

.bjjv-library__lead {
	max-width: 790px;
	margin: 0;
	color: var(--bjjv-text);
	font-size: clamp(17px, 2vw, 20px);
	line-height: 1.75;
}

.bjjv-library__notice {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 23px;
	align-items: center;
	margin: 46px 0 64px;
	padding: 27px 30px;
	border: 1px solid rgba(101, 188, 255, .28);
	border-radius: 22px;
	background: linear-gradient(110deg, rgba(22, 140, 255, .15), rgba(255, 255, 255, .025));
}

.bjjv-library__notice-icon {
	display: grid;
	width: 54px;
	height: 54px;
	place-items: center;
	padding-left: 3px;
	border-radius: 50%;
	color: var(--bjjv-white);
	background: var(--bjjv-blue);
	box-shadow: 0 10px 30px rgba(22, 140, 255, .28);
}

.bjjv-library__notice h2 {
	margin: 0 0 7px;
	color: var(--bjjv-white);
	font-size: 20px;
}

.bjjv-library__notice p {
	margin: 0;
	color: #b9cce0;
	font-size: 15px;
	line-height: 1.65;
}

.bjjv-library__section-heading {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	align-items: flex-end;
	margin-bottom: 25px;
}

.bjjv-library__section-heading h2 {
	margin: 0;
	color: var(--bjjv-white);
	font-size: clamp(27px, 4vw, 38px);
	letter-spacing: -1px;
}

.bjjv-library__section-heading p { margin: 0; color: var(--bjjv-muted); }

.bjjv-library__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.bjjv-course-card {
	display: flex;
	min-width: 0;
	overflow: hidden;
	flex-direction: column;
	border: 1px solid var(--bjjv-line);
	border-radius: 24px;
	background: linear-gradient(150deg, var(--bjjv-panel-2), var(--bjjv-panel));
	box-shadow: 0 22px 50px rgba(0, 0, 0, .25);
}

.bjjv-course-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #07101c;
}

.bjjv-course-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bjjv-course-card__placeholder {
	display: grid;
	width: 100%;
	height: 100%;
	place-items: center;
	color: rgba(255, 255, 255, .88);
	background: radial-gradient(circle at 30% 15%, #168cff, #073d76 53%, #07101c);
	font-size: 27px;
	font-weight: 900;
	line-height: .9;
	text-align: center;
}

.bjjv-course-card__status {
	position: absolute;
	top: 16px;
	left: 16px;
	display: inline-flex;
	padding: 8px 11px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .45px;
}

.bjjv-course-card__status.is-active { color: #c7ffe4; background: rgba(4, 74, 42, .92); }
.bjjv-course-card__status.is-pending { color: #fff0bd; background: rgba(94, 63, 0, .94); }

.bjjv-course-card__body {
	display: flex;
	height: 100%;
	flex-direction: column;
	padding: 28px;
}

.bjjv-course-card__instructor {
	margin: 0 0 10px;
	color: var(--bjjv-blue-soft);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.bjjv-course-card h3 {
	margin: 0 0 13px;
	color: var(--bjjv-white);
	font-size: 24px;
	font-weight: 850;
	line-height: 1.17;
	letter-spacing: -.6px;
}

.bjjv-course-card__excerpt {
	margin: 0 0 22px;
	color: #b5c7d9;
	font-size: 14px;
	line-height: 1.65;
}

.bjjv-course-card__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin: auto 0 23px;
	padding: 0;
	color: var(--bjjv-muted);
	font-size: 12px;
	list-style: none;
}

.bjjv-course-card__facts li:not(:last-child)::after {
	margin-left: 14px;
	color: rgba(255, 255, 255, .3);
	content: "•";
}

.bjjv-course-card__progress { margin-bottom: 22px; }
.bjjv-course-card__progress > div:first-child { display: flex; justify-content: space-between; margin-bottom: 9px; font-size: 12px; }
.bjjv-course-card__progress strong { color: var(--bjjv-white); }

.bjjv-course-card__track {
	height: 7px;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
}

.bjjv-course-card__track span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--bjjv-blue), var(--bjjv-blue-soft));
}

.bjjv-course-card__link,
.bjjv-library__login {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 14px 17px;
	border: 1px solid rgba(101, 188, 255, .38);
	border-radius: 12px;
	color: var(--bjjv-white) !important;
	background: rgba(22, 140, 255, .14);
	font-size: 13px;
	font-weight: 800;
	text-decoration: none !important;
}

.bjjv-course-card__link:hover,
.bjjv-course-card__link:focus-visible,
.bjjv-library__login:hover,
.bjjv-library__login:focus-visible {
	border-color: var(--bjjv-blue-soft);
	background: rgba(22, 140, 255, .28);
	outline: 3px solid rgba(101, 188, 255, .25);
	outline-offset: 3px;
}

.bjjv-course-card__pending-copy {
	margin: 0;
	padding: 14px 16px;
	border-left: 3px solid #d9a925;
	color: #e6d5a6;
	background: rgba(217, 169, 37, .07);
	font-size: 13px;
	line-height: 1.6;
}

.bjjv-library__empty {
	max-width: 760px;
	margin: 0 auto;
	padding: 64px 35px;
	border: 1px solid var(--bjjv-line);
	border-radius: 26px;
	background: linear-gradient(145deg, rgba(16, 31, 51, .9), rgba(7, 16, 28, .9));
	text-align: center;
}

.bjjv-library__empty-mark {
	display: grid;
	width: 70px;
	height: 70px;
	margin: 0 auto 25px;
	place-items: center;
	border: 1px solid rgba(101, 188, 255, .45);
	border-radius: 22px;
	color: var(--bjjv-white);
	background: rgba(22, 140, 255, .13);
	font-weight: 900;
}

.bjjv-library__empty h2 { margin: 0 0 13px; color: var(--bjjv-white); font-size: clamp(25px, 4vw, 36px); }
.bjjv-library__empty p { max-width: 570px; margin: 0 auto; color: var(--bjjv-muted); font-size: 16px; line-height: 1.7; }
.bjjv-library__empty .bjjv-library__login { width: max-content; margin: 26px auto 0; }

.bjjv-library__footer {
	display: flex;
	gap: 12px 22px;
	align-items: center;
	margin-top: 55px;
	padding-top: 24px;
	border-top: 1px solid var(--bjjv-line);
	color: var(--bjjv-muted);
	font-size: 13px;
}

.bjjv-library__footer strong { color: var(--bjjv-blue-soft); text-transform: uppercase; letter-spacing: 1px; }

@media (max-width: 980px) {
	.bjjv-library__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
	.bjjv-library__inner { width: min(100% - 28px, 1180px); padding: 60px 0 50px; }
	.bjjv-library__header h1 { letter-spacing: -2.5px; }
	.bjjv-library__notice { grid-template-columns: 1fr; margin: 35px 0 50px; padding: 24px; }
	.bjjv-library__section-heading { display: block; }
	.bjjv-library__section-heading p { margin-top: 8px; }
	.bjjv-library__grid { grid-template-columns: 1fr; }
	.bjjv-library__footer { display: block; }
	.bjjv-library__footer span { display: block; margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
	.bjjv-library *,
	.bjjv-library *::before,
	.bjjv-library *::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
	}
}