.video-library,
.video-watch {
	max-width: 1040px;
	margin: 24px auto 56px;
	color: var(--color-primary);
}
.video-tabs {
	display: flex;
	gap: 7px;
	overflow-x: auto;
	margin: 0 0 25px;
	padding: 0 0 5px;
	border-bottom: 1px solid var(--color-border, rgba(128, 128, 128, .15));
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.video-tabs::-webkit-scrollbar {
	display: none;
}
.video-tab {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 8px;
	padding: 11px 15px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	color: var(--color-secondary, #9299a5);
	font: inherit;
	font-size: 13px;
	font-weight: 720;
	cursor: pointer;
	transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.video-tab:hover,
.video-tab.active {
	color: #7052d7;
}
.video-tab.active {
	border-bottom-color: #7655ed;
}
.video-tab-panel[hidden] {
	display: none !important;
}
.video-tab:focus-visible {
	border-radius: 8px;
	outline: 3px solid rgba(105, 82, 220, .28);
	outline-offset: 2px;
}
.video-search-box:focus-within {
	border-radius: 10px;
	color: #6247c4;
}
.video-search-box:focus-within input::placeholder {
	color: #77718d;
}
.video-my-library:hover {
	background: rgba(112, 82, 215, .16);
	color: #5940b8;
}
.video-header,
.video-admin-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 24px;
}
.video-header > div > span,
.video-admin-header > div > span {
	color: var(--color-brand);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .16em;
}
.video-header h1,
.video-watch h1,
.video-upload-form h2 {
	margin: 5px 0;
	font-weight: 750;
}
.video-header p,
.video-admin-header p,
.video-watch-meta {
	color: var(--color-secondary, #9299a5);
	margin: 0;
}
.video-upload-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 12px;
	padding: 12px 16px;
	background: var(--color-brand, #7655ed);
	color: #fff;
	text-decoration: none;
	font-weight: 700;
}
.video-tools,
.video-upload-form {
	padding: 18px;
	margin: 18px 0;
	border: 1px solid var(--color-border, rgba(128, 128, 128, .18));
	border-radius: 18px;
	background: var(--color-block, rgba(128, 128, 128, .06));
}
.video-album-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 14px 0;
}
.video-album {
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 9px 13px;
	border: 1px solid var(--color-border, rgba(128, 128, 128, .18));
	border-radius: 12px;
	color: inherit;
	text-decoration: none;
}
.video-album a {
	display: flex;
	align-items: center;
	gap: 10px;
	color: inherit;
	text-decoration: none;
}
.video-album > button {
	border: 0;
	background: transparent;
	color: var(--color-secondary, #9299a5);
	font-size: 18px;
}
.video-album span,
.video-card > span {
	color: var(--color-secondary, #9299a5);
	font-size: 12px;
}
.video-album-form,
.video-upload-fields {
	display: grid;
	grid-template-columns: minmax(180px, 1fr) auto;
	gap: 10px;
}
.video-upload-fields {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.video-upload-fields textarea,
.video-upload-fields button {
	grid-column: 1 / -1;
}
.video-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.video-card {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 7px;
	color: inherit;
	text-decoration: none;
}
.video-card > a {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 7px;
	color: inherit;
	text-decoration: none;
}
.video-card video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 14px;
	background: #101116;
}
.video-empty {
	display: flex;
	grid-column: 1 / -1;
	width: 100%;
	min-height: 140px;
	align-items: center;
	justify-content: center;
	padding: 26px;
	border: 1px dashed var(--color-border, rgba(128, 128, 128, .2));
	border-radius: 17px;
	background: var(--color-block, rgba(128, 128, 128, .04));
	color: var(--color-secondary, #9299a5);
	text-align: center;
}
.video-watch {
	max-width: 920px;
}
.video-watch > video {
	display: block;
	width: 100%;
	max-height: 72vh;
	margin: 16px 0;
	border-radius: 16px;
	background: #090a0c;
}
.video-watch-meta {
	margin-bottom: 16px;
}
.video-back {
	color: inherit;
	text-decoration: none;
}
.post-media-attachments {
	display: grid;
	gap: 12px;
	margin: 14px 0;
	padding: 10px;
	background: rgba(128, 128, 128, .045);
}
.post-video-attachment {
	display: grid;
	gap: 8px;
	padding: 12px;
	border-radius: 14px;
	background: rgba(128, 128, 128, .08);
}
.post-media-title {
	width: fit-content;
	max-width: 100%;
	color: var(--color-primary, #282638);
	font-size: 14px;
	font-weight: 750;
	line-height: 1.45;
	text-decoration: none;
}
.post-media-title:hover {
	color: #6658db;
}
.post-video-frame {
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 14px;
	background: #101014;
}
.post-video-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.post-music-attachment {
	position: relative;
	display: grid;
	gap: 15px;
	overflow: hidden;
	padding: 17px;
	border: 1px solid rgba(112, 82, 215, .14);
	border-radius: 18px;
	background:
		radial-gradient(ellipse at 100% 0, rgba(91, 199, 177, .14), transparent 42%),
		linear-gradient(125deg, rgba(112, 82, 215, .09), rgba(112, 82, 215, .025) 65%),
		var(--color-block, #fff);
	box-shadow: 0 8px 22px rgba(49, 38, 105, .06);
}
.post-music-attachment::after {
	position: absolute;
	top: -33px;
	right: 35px;
	width: 100px;
	height: 100px;
	border: 1px solid rgba(112, 82, 215, .1);
	border-radius: 50%;
	box-shadow: 0 0 0 12px rgba(112, 82, 215, .035), 0 0 0 25px rgba(112, 82, 215, .025);
	content: "";
	pointer-events: none;
}
.post-music-attachment-info {
	position: relative;
	z-index: 1;
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 13px;
}
.post-music-attachment-icon {
	display: grid;
	width: 48px;
	height: 48px;
	flex: 0 0 48px;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .24);
	border-radius: 15px;
	background: linear-gradient(145deg, #8065e9, #5e48c7);
	box-shadow: 0 7px 16px rgba(91, 68, 185, .24);
	color: #fff;
	font-size: 20px;
}
.post-music-attachment-copy {
	display: grid;
	min-width: 0;
	gap: 4px;
}
.post-music-attachment-copy > span {
	color: #7862c4;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .14em;
}
.post-music-attachment-copy > strong {
	overflow: hidden;
	color: var(--color-primary, #292638);
	font-size: 14px;
	font-weight: 750;
	line-height: 1.4;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.post-inline-player {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 9px;
	overflow: hidden;
	padding: 9px 11px;
	border: 1px solid rgba(112, 82, 215, .13);
	border-radius: 13px;
	background: linear-gradient(120deg, rgba(112, 82, 215, .09), rgba(59, 197, 172, .045));
}
.post-inline-player > audio,
.post-inline-player > video {
	display: block;
	width: 100%;
}
.post-inline-video > video {
	max-height: 440px;
	border-radius: 9px;
	background: #090a0c;
}
.post-player-controls {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 9px;
}
.post-player-toggle,
.post-player-open {
	display: inline-grid;
	width: 34px;
	height: 34px;
	flex: 0 0 34px;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: linear-gradient(145deg, #8065e9, #5e48c7);
	box-shadow: 0 4px 10px rgba(91, 68, 185, .2);
	color: #fff;
	font-size: 18px;
	text-decoration: none;
	cursor: pointer;
}
.post-player-toggle:hover,
.post-player-open:hover {
	background: #5a3fc1;
	color: #fff;
}
.post-player-controls > input[type="range"] {
	width: 100%;
	min-width: 35px;
	height: 5px;
	flex: 1;
	margin: 0;
	border: 0;
	border-radius: 99px;
	outline: 0;
	background: linear-gradient(to right, #7655ed 0 var(--post-player-progress, 0%), rgba(112, 82, 215, .18) var(--post-player-progress, 0%) 100%);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}
.post-player-controls > input[type="range"]::-webkit-slider-thumb {
	width: 12px;
	height: 12px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #7052d7;
	box-shadow: 0 1px 4px rgba(37, 28, 75, .25);
	-webkit-appearance: none;
}
.post-player-controls > input[type="range"]::-moz-range-thumb {
	width: 9px;
	height: 9px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: #7052d7;
	box-shadow: 0 1px 4px rgba(37, 28, 75, .25);
}
.post-player-time {
	flex: 0 0 auto;
	color: var(--color-secondary, #777687);
	font-size: 10px;
	font-variant-numeric: tabular-nums;
}
.post-player-open {
	width: 30px;
	height: 30px;
	flex-basis: 30px;
	font-size: 13px;
}
.post-inline-audio > audio {
	display: none;
}
.post-music-attachment audio {
	display: none;
}
html[data-bs-theme="dark"] .post-music-attachment {
	border-color: rgba(174, 154, 255, .2);
	background:
		radial-gradient(ellipse at 100% 0, rgba(65, 186, 160, .12), transparent 42%),
		linear-gradient(125deg, rgba(112, 82, 215, .17), rgba(112, 82, 215, .055) 65%),
		var(--color-block, #20212a);
	box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
}
html[data-bs-theme="dark"] .post-music-attachment-copy > span {
	color: #b5a4ff;
}
html[data-bs-theme="dark"] .post-music-attachment-copy > strong {
	color: #f2f0f8;
}
html[data-bs-theme="dark"] .post-inline-player {
	border-color: rgba(174, 154, 255, .18);
	background: linear-gradient(120deg, rgba(112, 82, 215, .16), rgba(59, 197, 172, .07));
}
.post-music-attachment-actions {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.post-music-add,
.post-music-more {
	display: inline-flex;
	min-height: 36px;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 7px 12px;
	border: 1px solid transparent;
	border-radius: 10px;
	font: inherit;
	font-size: 11px;
	font-weight: 750;
	line-height: 1;
	text-decoration: none;
	transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.post-music-add {
	background: #7052d7;
	box-shadow: 0 4px 10px rgba(91, 68, 185, .17);
	color: #fff;
	cursor: pointer;
}
.post-music-add:hover:not(:disabled) {
	transform: translateY(-1px);
	background: #5a3fc1;
	box-shadow: 0 6px 14px rgba(91, 68, 185, .24);
	color: #fff;
}
.post-music-add:disabled {
	cursor: wait;
	opacity: .78;
}
.post-music-add.is-added,
.post-music-add.is-added:disabled {
	border-color: rgba(37, 130, 100, .17);
	background: rgba(53, 173, 133, .11);
	box-shadow: none;
	color: #258264;
	cursor: default;
	opacity: 1;
}
.post-music-more {
	border-color: rgba(112, 82, 215, .16);
	background: rgba(255, 255, 255, .62);
	color: #6655b5;
}
.post-music-more:hover {
	transform: translateY(-1px);
	border-color: rgba(112, 82, 215, .32);
	background: rgba(112, 82, 215, .09);
	color: #5139ae;
}
.post-music-add:focus-visible,
.post-music-more:focus-visible {
	outline: 3px solid rgba(105, 82, 220, .3);
	outline-offset: 3px;
}
html[data-bs-theme="dark"] .post-media-attachments {
	background: rgba(255, 255, 255, .035);
}
html[data-bs-theme="dark"] .post-music-add.is-added,
html[data-bs-theme="dark"] .post-music-add.is-added:disabled {
	border-color: rgba(90, 204, 164, .2);
	background: rgba(53, 173, 133, .14);
	color: #8de0bd;
}
html[data-bs-theme="dark"] .post-music-more {
	border-color: rgba(174, 154, 255, .22);
	background: rgba(31, 28, 47, .48);
	color: #c5b8ff;
}
html[data-bs-theme="dark"] .post-music-more:hover {
	border-color: rgba(174, 154, 255, .4);
	background: rgba(112, 82, 215, .2);
	color: #e1d9ff;
}
.post-media-picker-item {
	display: grid;
	width: 100%;
	gap: 12px;
	padding: 14px;
	border: 1px solid var(--color-border, rgba(128, 128, 128, .14));
	border-radius: 14px;
	background: var(--color-block, #fff);
	color: inherit;
	text-align: left;
}
.post-media-picker-list {
	display: grid;
	gap: 11px;
}
.post-media-picker-item.selected {
	border-color: rgba(112, 82, 215, .38);
	box-shadow: 0 0 0 2px rgba(112, 82, 215, .08);
}
.post-media-picker-card-heading {
	display: grid;
	grid-template-columns: 25px minmax(0, 1fr);
	align-items: center;
	gap: 3px 9px;
}
.post-media-picker-card-heading > i {
	grid-row: span 2;
	color: #7052d7;
	font-size: 19px;
}
.post-media-picker-card-heading > strong {
	overflow: hidden;
	color: var(--color-primary, #282638);
	font-size: 13px;
	font-weight: 740;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.post-media-picker-kind {
	color: var(--color-secondary, #858393);
	font-size: 10px;
}
.post-media-picker-preview-toggle,
.post-media-picker-add {
	display: inline-flex;
	min-height: 36px;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 7px 11px;
	border: 1px solid rgba(112, 82, 215, .18);
	border-radius: 10px;
	background: rgba(112, 82, 215, .06);
	color: #6247c4;
	font: inherit;
	font-size: 11px;
	font-weight: 720;
	cursor: pointer;
}
.post-media-picker-preview-toggle {
	justify-self: start;
}
.post-media-picker-preview-toggle.active {
	background: rgba(112, 82, 215, .13);
}
.post-media-picker-add {
	background: #7052d7;
	color: #fff;
}
.post-media-picker-add:hover {
	background: #5a3fc1;
	color: #fff;
}
.post-media-picker-add.selected {
	border-color: rgba(37, 130, 100, .2);
	background: rgba(53, 173, 133, .12);
	color: #258264;
}
.post-picker-preview[hidden] {
	display: none !important;
}
.post-media-picker-loading,
.post-media-picker-message,
.post-media-picker-empty {
	display: flex;
	min-height: 90px;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 18px;
	border: 1px dashed var(--color-border, rgba(128, 128, 128, .18));
	border-radius: 13px;
	color: var(--color-secondary, #858393);
	font-size: 12px;
	text-align: center;
}
.post-media-picker-error {
	color: #ad3f4b;
}
.post-media-picker-empty {
	flex-direction: column;
}
.post-media-picker-empty > i {
	color: #7052d7;
	font-size: 22px;
}
.post-media-picker-empty > strong {
	color: var(--color-primary, #282638);
	font-size: 13px;
}
.post-media-picker-empty > span {
	font-size: 11px;
}
.post-media-picker-footer {
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	color: var(--color-secondary, #858393);
	font-size: 11px;
}
html[data-bs-theme="dark"] .post-media-picker-item {
	border-color: rgba(255, 255, 255, .13);
	background: var(--color-block, #20212a);
}
html[data-bs-theme="dark"] .post-media-picker-item.selected {
	border-color: rgba(174, 154, 255, .4);
}
html[data-bs-theme="dark"] .post-media-picker-add.selected {
	border-color: rgba(90, 204, 164, .2);
	background: rgba(53, 173, 133, .14);
	color: #8de0bd;
}
html[data-bs-theme="dark"] .post-media-picker-preview-toggle {
	border-color: rgba(174, 154, 255, .22);
	background: rgba(112, 82, 215, .14);
	color: #c5b8ff;
}
html[data-bs-theme="dark"] .post-media-picker-card-heading > strong,
html[data-bs-theme="dark"] .post-media-picker-empty > strong {
	color: #f2f0f8;
}
.post-attachment-dropdown {
	position: relative;
}
.composer-attach-trigger {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 12px !important;
	border: 1px solid var(--social-border, rgba(128, 128, 128, .2)) !important;
	border-radius: 9px !important;
	background: var(--social-surface, #fff) !important;
	color: var(--social-muted, #777) !important;
	font-size: 13px;
	font-weight: 700;
}
.composer-attach-trigger::after {
	margin-left: 2px;
}
.composer-attach-trigger:hover,
.composer-attach-trigger:focus-visible {
	border-color: rgba(102, 88, 219, .38) !important;
	color: var(--social-accent, #6658db) !important;
}
.post-attachment-menu {
	min-width: 185px;
	padding: 6px;
	border: 1px solid var(--color-border, rgba(128, 128, 128, .16));
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(31, 28, 60, .16);
}
.post-attachment-menu .dropdown-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	border-radius: 8px;
	color: var(--color-primary, #292638);
	font-size: 13px;
}
.post-attachment-menu .dropdown-item i {
	width: 18px;
	color: var(--social-accent, #6658db);
	font-size: 16px;
}
.post-attachment-menu .dropdown-item:hover {
	background: rgba(102, 88, 219, .08);
	color: var(--social-accent, #6658db);
}
.post-selected-media {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.post-media-chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	border-radius: 99px;
	background: rgba(124, 92, 255, .14);
	font-size: 12px;
}
.post-media-chip button {
	border: 0;
	background: none;
	color: inherit;
}
@media (max-width: 767px) {
	.video-header,
	.video-admin-header {
		align-items: flex-start;
		flex-direction: column;
	}
	.video-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
	.video-tools,
	.video-upload-form {
		padding: 13px;
	}
}
@media (max-width: 480px) {
	.video-grid,
	.video-upload-fields {
		grid-template-columns: 1fr;
	}
	.video-upload-fields textarea,
	.video-upload-fields button {
		grid-column: auto;
	}
	.video-album-form {
		grid-template-columns: 1fr;
	}
}

.video-upload-details {
	border-color: rgba(111, 87, 218, .16);
	box-shadow: 0 12px 34px rgba(45, 36, 90, .06);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.video-upload-details[open] {
	border-color: rgba(111, 87, 218, .3);
	box-shadow: 0 18px 44px rgba(45, 36, 90, .1);
}
.video-upload-details > summary {
	min-height: 82px;
	padding: 17px 22px;
	transition: background .18s ease;
}
.video-upload-details > summary:hover {
	background: rgba(112, 82, 215, .045);
}
.video-upload-details > summary:focus-visible,
.video-library button:focus-visible,
.video-upload-details button:focus-visible {
	outline: 3px solid rgba(105, 82, 220, .38);
	outline-offset: 3px;
}
.video-upload-details .video-upload-form {
	padding: 0 24px 24px;
}
.video-upload-wizard {
	max-width: 760px;
	margin: 0 auto;
}
.video-upload-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin: 0;
	padding: 23px 0 26px;
	list-style: none;
}
.video-upload-steps::before {
	position: absolute;
	top: 39px;
	right: 17%;
	left: 17%;
	height: 2px;
	background: var(--color-border, #e9e7f0);
	content: "";
}
.video-upload-steps li {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: 7px;
	color: #9290a0;
	font-size: 11px;
	font-weight: 650;
}
.video-upload-steps li > span {
	display: grid;
	width: 34px;
	height: 34px;
	place-items: center;
	border: 2px solid var(--color-border, #e5e3ed);
	border-radius: 50%;
	background: var(--color-block, #fff);
	color: #858294;
	font-size: 13px;
	font-weight: 800;
	transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.video-upload-steps li.active {
	color: #6247c4;
}
.video-upload-steps li.active > span {
	border-color: #7052d7;
	background: #7052d7;
	box-shadow: 0 0 0 5px rgba(112, 82, 215, .12);
	color: #fff;
}
.video-upload-steps li.complete > span {
	border-color: #35ad85;
	background: #35ad85;
	color: #fff;
}
.video-upload-stage {
	padding: 6px 0 0;
	animation: video-stage-enter .24s ease both;
}
.video-upload-stage[hidden] {
	display: none !important;
}
@keyframes video-stage-enter {
	from { opacity: 0; transform: translateY(7px); }
	to { opacity: 1; transform: translateY(0); }
}
.video-upload-stage-heading {
	margin: 0 0 20px;
}
.video-upload-stage-heading > span {
	color: #7860ca;
	font-size: 10px;
	font-weight: 850;
	letter-spacing: .16em;
}
.video-upload-stage-heading h3 {
	margin: 6px 0 5px;
	color: var(--color-primary, #282638);
	font-size: 22px;
	font-weight: 790;
	letter-spacing: -.025em;
}
.video-upload-stage-heading p {
	margin: 0;
	color: var(--color-secondary, #858393);
	font-size: 13px;
	line-height: 1.55;
}
.video-dropzone {
	position: relative;
	display: flex;
	min-height: 205px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	overflow: hidden;
	padding: 24px;
	border: 1px dashed rgba(112, 82, 215, .38);
	border-radius: 18px;
	background:
		radial-gradient(circle at 50% 0, rgba(126, 100, 229, .1), transparent 56%),
		linear-gradient(145deg, rgba(124, 92, 255, .035), rgba(59, 197, 172, .035));
	color: var(--color-primary, #282638);
	text-align: center;
	cursor: pointer;
	transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.video-dropzone:hover,
.video-dropzone.drag-over {
	transform: translateY(-2px);
	border-color: #7052d7;
	background:
		radial-gradient(circle at 50% 0, rgba(126, 100, 229, .15), transparent 56%),
		linear-gradient(145deg, rgba(124, 92, 255, .06), rgba(59, 197, 172, .05));
	box-shadow: 0 10px 26px rgba(75, 58, 150, .09);
}
.video-dropzone:focus-within {
	outline: 3px solid rgba(105, 82, 220, .28);
	outline-offset: 3px;
}
.video-dropzone > input {
	position: absolute;
	z-index: 2;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}
.video-dropzone-icon {
	display: grid;
	width: 48px;
	height: 48px;
	margin-bottom: 3px;
	place-items: center;
	border: 1px solid rgba(112, 82, 215, .12);
	border-radius: 15px;
	background: rgba(112, 82, 215, .1);
	color: #7052d7;
	font-size: 23px;
}
.video-dropzone > strong {
	font-size: 14px;
	font-weight: 780;
}
.video-dropzone > span:not(.video-dropzone-icon) {
	color: var(--color-secondary, #858393);
	font-size: 12px;
}
.video-dropzone em {
	color: #7052d7;
	font-style: normal;
	font-weight: 750;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.video-dropzone > small {
	margin-top: 3px;
	color: #9694a3;
	font-size: 10px;
}
.video-file-selected {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr) 34px;
	align-items: center;
	gap: 14px;
	margin-top: 13px;
	padding: 10px;
	border: 1px solid var(--color-border, rgba(128, 128, 128, .16));
	border-radius: 14px;
	background: var(--color-block, #fff);
}
.video-file-selected[hidden] {
	display: none !important;
}
.video-file-selected > video {
	display: block;
	width: 132px;
	aspect-ratio: 16 / 9;
	border-radius: 9px;
	background: #19172c;
	object-fit: cover;
}
.video-file-selected-info {
	display: grid;
	min-width: 0;
	gap: 5px;
}
.video-file-selected-info strong {
	overflow: hidden;
	color: var(--color-primary, #282638);
	font-size: 12px;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.video-file-selected-info small {
	color: var(--color-secondary, #858393);
	font-size: 11px;
}
.video-file-remove {
	display: grid;
	width: 32px;
	height: 32px;
	place-items: center;
	border: 0;
	border-radius: 9px;
	background: #fff1f1;
	color: #bf454e;
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}
.video-file-remove:hover {
	background: #bf454e;
	color: #fff;
}
.video-required {
	color: #d04e62;
}
.video-field-optional {
	color: #9997a6;
	font-size: 10px;
	font-weight: 500;
}
.video-upload-fields > label {
	color: var(--color-primary, #504e60);
	font-size: 12px;
	font-weight: 720;
}
.video-upload-fields input,
.video-upload-fields select,
.video-upload-fields textarea {
	border-color: var(--color-border, #e5e3ed);
	background: var(--color-input, #fff);
	transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.video-upload-fields input:hover,
.video-upload-fields select:hover,
.video-upload-fields textarea:hover {
	border-color: #bdb4e6;
}
.video-upload-fields input:focus,
.video-upload-fields select:focus,
.video-upload-fields textarea:focus {
	border-color: #7860d4;
	background: var(--color-block, #fff);
	box-shadow: 0 0 0 3px rgba(112, 82, 215, .13);
	outline: 0;
}
.video-upload-actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 21px;
	padding-top: 17px;
	border-top: 1px solid var(--color-border, rgba(128, 128, 128, .12));
}
.video-action-primary,
.video-action-secondary,
.video-action-publish {
	display: inline-flex;
	min-height: 43px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 17px;
	border: 1px solid transparent;
	border-radius: 11px;
	font: inherit;
	font-size: 12px;
	font-weight: 760;
	cursor: pointer;
	transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.video-action-primary,
.video-action-publish {
	background: #7052d7;
	box-shadow: 0 4px 11px rgba(91, 68, 185, .18);
	color: #fff;
}
.video-action-primary:hover,
.video-action-publish:hover:not(:disabled) {
	transform: translateY(-1px);
	background: #5a3fc1;
	box-shadow: 0 7px 16px rgba(91, 68, 185, .25);
	color: #fff;
}
.video-action-secondary {
	border-color: var(--color-border, #e4e1ec);
	background: var(--color-block, #fff);
	color: #676477;
}
.video-action-secondary:hover {
	border-color: #bcb3e4;
	background: #f5f2ff;
	color: #5f45be;
}
.video-action-primary:active,
.video-action-secondary:active,
.video-action-publish:active:not(:disabled) {
	transform: translateY(0);
	box-shadow: none;
}
.video-action-publish:disabled {
	opacity: .75;
	cursor: wait;
}
.video-upload-error {
	margin: 7px 0 13px;
	padding: 11px 13px;
	border: 1px solid rgba(194, 64, 79, .19);
	border-radius: 10px;
	background: #fff3f3;
	color: #a53340;
	font-size: 12px;
	line-height: 1.5;
}
.video-upload-error[hidden] {
	display: none !important;
}
.video-upload-review {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: 20px;
	padding: 13px;
	border: 1px solid var(--color-border, rgba(128, 128, 128, .16));
	border-radius: 16px;
	background: var(--color-block, #fff);
}
.video-upload-review > video {
	width: 100%;
	max-height: 220px;
	aspect-ratio: 16 / 10;
	border-radius: 11px;
	background: #19172c;
	object-fit: cover;
}
.video-upload-review > div {
	display: flex;
	min-width: 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
}
.video-review-label {
	margin-top: 5px;
	color: #89869b;
	font-size: 9px;
	font-weight: 830;
	letter-spacing: .13em;
}
.video-upload-review strong {
	overflow-wrap: anywhere;
	color: var(--color-primary, #282638);
	font-size: 14px;
}
.video-upload-review > div > span:not(.video-review-label) {
	color: var(--color-secondary, #777687);
	font-size: 11px;
}
.video-upload-review p {
	margin: 5px 0 0;
	color: var(--color-secondary, #858393);
	font-size: 11px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}
.video-upload-progress {
	height: 7px;
	overflow: hidden;
	margin: 16px 0 0;
	border-radius: 99px;
	background: #ebe8f4;
}
.video-upload-progress[hidden] {
	display: none !important;
}
.video-upload-progress > span {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #7052d7, #46c7ac);
	transition: width .16s ease;
}
.video-button-spinner {
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, .42);
	border-top-color: #fff;
	border-radius: 50%;
	animation: video-spinner .7s linear infinite;
}
@keyframes video-spinner {
	to { transform: rotate(360deg); }
}
.video-upload-success {
	display: grid;
	justify-items: center;
	gap: 7px;
	padding: 27px 12px 8px;
	color: #258264;
	text-align: center;
}
.video-upload-success > i {
	font-size: 36px;
}
.video-upload-success > strong {
	color: var(--color-primary, #282638);
	font-size: 17px;
}
.video-upload-success > span {
	color: var(--color-secondary, #858393);
	font-size: 12px;
}
.video-library button:not(:disabled) {
	-webkit-tap-highlight-color: transparent;
}
.video-library button:disabled {
	cursor: not-allowed;
}
.video-album-form button {
	border: 1px solid transparent;
	background: #7052d7;
	box-shadow: 0 3px 9px rgba(91, 68, 185, .14);
	color: #fff;
	transition: background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.video-album-form button:hover {
	transform: translateY(-1px);
	background: #5a3fc1;
	box-shadow: 0 6px 14px rgba(91, 68, 185, .22);
}
.video-album-form button:active {
	transform: none;
	box-shadow: none;
}
.video-card > [data-video-delete] {
	border-color: #efd0d2;
	background: #fff;
	color: #a73c47;
	transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.video-card > [data-video-delete]:hover {
	border-color: #b83c49;
	background: #b83c49;
	color: #fff;
}
.video-album > button:hover {
	border-radius: 8px;
	background: #fff0f0;
	color: #ad3947;
}
.video-library a:focus-visible {
	border-radius: 8px;
	outline: 3px solid rgba(105, 82, 220, .34);
	outline-offset: 3px;
}
.video-upload-details summary:active {
	background: rgba(112, 82, 215, .09);
}
html[data-bs-theme="dark"] .video-album-form button:hover,
html[data-bs-theme="dark"] .video-action-primary:hover,
html[data-bs-theme="dark"] .video-action-publish:hover:not(:disabled) {
	background: #8166e6;
	color: #fff;
}
html[data-bs-theme="dark"] .video-action-secondary {
	border-color: rgba(255, 255, 255, .16);
	color: #d2d0df;
}
html[data-bs-theme="dark"] .video-upload-fields input,
html[data-bs-theme="dark"] .video-upload-fields select,
html[data-bs-theme="dark"] .video-upload-fields textarea {
	border-color: rgba(255, 255, 255, .16);
	background: var(--color-block, #20212a);
	color: var(--color-primary, #f2f0f8);
}
html[data-bs-theme="dark"] .video-upload-fields input:hover,
html[data-bs-theme="dark"] .video-upload-fields select:hover,
html[data-bs-theme="dark"] .video-upload-fields textarea:hover {
	border-color: rgba(174, 154, 255, .55);
}
html[data-bs-theme="dark"] .video-upload-details > summary:hover {
	background: rgba(153, 130, 255, .08);
}
@media (prefers-reduced-motion: reduce) {
	.video-upload-stage,
	.video-button-spinner {
		animation-duration: .01ms;
		animation-iteration-count: 1;
	}
	.video-dropzone,
	.video-upload-details,
	.video-upload-details > summary,
	.video-action-primary,
	.video-action-secondary,
	.video-action-publish,
	.video-tab {
		transition-duration: .01ms;
	}
}
.post-attachment-menu .dropdown-item:focus-visible {
	background: rgba(102, 88, 219, .1);
	color: #5542b8;
	outline: 2px solid rgba(102, 88, 219, .35);
	outline-offset: -2px;
}
html[data-bs-theme="dark"] .video-upload-steps li > span,
html[data-bs-theme="dark"] .video-file-selected,
html[data-bs-theme="dark"] .video-action-secondary,
html[data-bs-theme="dark"] .video-upload-review {
	background: var(--color-block, #20212a);
}
html[data-bs-theme="dark"] .video-dropzone {
	background:
		radial-gradient(circle at 50% 0, rgba(126, 100, 229, .17), transparent 56%),
		linear-gradient(145deg, rgba(124, 92, 255, .08), rgba(59, 197, 172, .05));
}
html[data-bs-theme="dark"] .video-file-remove {
	background: rgba(191, 69, 78, .18);
	color: #ff9ca3;
}
html[data-bs-theme="dark"] .video-file-remove:hover {
	background: #bf454e;
	color: #fff;
}
html[data-bs-theme="dark"] .video-action-secondary:hover {
	border-color: #7663b9;
	background: rgba(112, 82, 215, .16);
	color: #c5b8ff;
}
html[data-bs-theme="dark"] .video-card > [data-video-delete] {
	border-color: rgba(226, 107, 115, .38);
	background: transparent;
	color: #ff9ca3;
}
html[data-bs-theme="dark"] .video-card > [data-video-delete]:hover {
	border-color: #b83c49;
	background: #b83c49;
	color: #fff;
}
html[data-bs-theme="dark"] .video-upload-error {
	border-color: rgba(255, 140, 150, .24);
	background: rgba(181, 52, 67, .17);
	color: #ffb7bd;
}
@media (max-width: 600px) {
	.video-upload-details > summary {
		padding: 14px;
	}
	.video-upload-details .video-upload-form {
		padding: 0 14px 16px;
	}
	.video-upload-steps {
		padding: 20px 0 22px;
	}
	.video-upload-steps li {
		font-size: 10px;
	}
	.video-upload-steps li > span {
		width: 31px;
		height: 31px;
	}
	.video-upload-steps::before {
		top: 35px;
	}
	.video-upload-stage-heading h3 {
		font-size: 19px;
	}
	.video-dropzone {
		min-height: 180px;
		padding: 18px 12px;
	}
	.video-file-selected {
		grid-template-columns: 92px minmax(0, 1fr) 30px;
		gap: 9px;
	}
	.video-file-selected > video {
		width: 92px;
	}
	.video-upload-review {
		grid-template-columns: 1fr;
		gap: 12px;
	}
	.video-upload-review > video {
		max-height: 190px;
	}
	.video-upload-actions {
		margin-top: 17px;
	}
	.video-action-primary,
	.video-action-secondary,
	.video-action-publish {
		min-height: 42px;
		padding: 9px 12px;
		font-size: 11px;
	}
}

.video-library {
	position: relative;
	z-index: 1;
	max-width: 1160px;
	margin: 30px auto 72px;
	padding: 0 18px;
}
.video-header {
	position: relative;
	min-height: 300px;
	align-items: stretch;
	overflow: hidden;
	margin: 0 0 24px;
	padding: 38px 44px;
	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 28px;
	background:
		radial-gradient(ellipse at 80% 10%, rgba(57, 224, 199, .27), transparent 37%),
		radial-gradient(ellipse at 60% 120%, rgba(172, 70, 255, .43), transparent 48%),
		linear-gradient(118deg, #17162d 0%, #292054 52%, #34256a 100%);
	color: #fff;
	box-shadow: 0 22px 54px rgba(40, 29, 92, .2);
}
.video-hero-copy {
	position: relative;
	z-index: 2;
	display: flex;
	max-width: 560px;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
}
.video-hero-kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #9bf4e4;
	font-size: 11px;
	font-weight: 850;
	letter-spacing: .18em;
}
.video-hero-copy h1 {
	margin: 16px 0 12px;
	color: #fff;
	font-size: clamp(34px, 4vw, 52px);
	font-weight: 820;
	letter-spacing: -.045em;
	line-height: 1.02;
}
.video-hero-copy p {
	max-width: 420px;
	margin: 0 0 22px;
	color: rgba(255, 255, 255, .72);
	font-size: 15px;
	line-height: 1.65;
}
.video-header .video-upload-link {
	padding: 12px 17px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 13px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(12, 9, 41, .18);
	color: #33245f;
	transition: transform .2s ease, box-shadow .2s ease;
}
.video-header .video-upload-link:hover {
	transform: translateY(-2px);
	box-shadow: 0 13px 28px rgba(12, 9, 41, .28);
	background: #f1edff;
	color: #26184f;
}
.video-hero-art {
	position: absolute;
	top: 0;
	right: 0;
	width: 48%;
	height: 100%;
	overflow: hidden;
	background: linear-gradient(135deg, transparent 8%, rgba(255, 255, 255, .045) 8.2%, transparent 8.7%);
	background-size: 34px 34px;
}
.video-hero-orbit {
	position: absolute;
	top: 50%;
	left: 54%;
	width: 300px;
	height: 300px;
	transform: translate(-50%, -50%);
	border: 1px solid rgba(255, 255, 255, .19);
	border-radius: 50%;
	box-shadow: 0 0 0 28px rgba(255, 255, 255, .035), 0 0 0 58px rgba(255, 255, 255, .025), inset 0 0 70px rgba(113, 223, 227, .14);
}
.video-hero-play {
	position: absolute;
	top: 50%;
	left: 54%;
	display: grid;
	width: 92px;
	height: 92px;
	transform: translate(-50%, -50%);
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 28px;
	background: linear-gradient(145deg, rgba(255, 255, 255, .25), rgba(255, 255, 255, .08));
	box-shadow: 0 20px 55px rgba(7, 6, 28, .3), inset 0 1px rgba(255, 255, 255, .2);
	color: #fff;
	font-size: 54px;
	backdrop-filter: blur(10px);
}
.video-hero-caption {
	position: absolute;
	right: 8%;
	bottom: 16%;
	color: rgba(255, 255, 255, .62);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .2em;
	line-height: 1.7;
}
.video-discover-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 36px;
	padding: 10px;
	border: 1px solid var(--color-border, rgba(128, 128, 128, .16));
	border-radius: 17px;
	background: var(--color-block, #fff);
	box-shadow: 0 8px 26px rgba(35, 34, 60, .045);
}
.video-search-box {
	display: flex;
	min-width: 0;
	flex: 1;
	align-items: center;
	gap: 11px;
	padding: 0 12px;
	color: #8986a1;
}
.video-search-box i {
	font-size: 17px;
}
.video-search-box input {
	width: 100%;
	height: 44px;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--color-primary, #282638);
	font: inherit;
}
.video-search-box input::placeholder {
	color: #9b9aaa;
}
.video-my-library {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border-radius: 11px;
	background: rgba(124, 92, 255, .1);
	color: #7052d7;
	font-size: 13px;
	font-weight: 750;
	text-decoration: none;
	white-space: nowrap;
}
.video-section {
	margin: 0 0 44px;
}
.video-section-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 18px;
}
.video-section-eyebrow {
	color: #8d82c8;
	font-size: 10px;
	font-weight: 850;
	letter-spacing: .17em;
}
.video-section-heading h2 {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 5px 0 4px;
	color: var(--color-primary, #282638);
	font-size: 24px;
	font-weight: 790;
	letter-spacing: -.025em;
}
.video-popular-section .video-section-heading h2 i {
	color: #ff8b55;
}
.video-section-heading p {
	margin: 0;
	color: var(--color-secondary, #9299a5);
	font-size: 13px;
}
.video-section-badge,
.video-live-indicator {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 11px;
	border: 1px solid var(--color-border, rgba(128, 128, 128, .16));
	border-radius: 99px;
	color: var(--color-secondary, #9299a5);
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}
.video-section-badge i {
	color: #7655e9;
}
.video-live-indicator i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #41c99a;
	box-shadow: 0 0 0 4px rgba(65, 201, 154, .14);
}
.video-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
.video-card {
	position: relative;
	isolation: isolate;
	gap: 10px;
	padding: 9px 9px 12px;
	overflow: hidden;
	border: 1px solid var(--color-border, rgba(128, 128, 128, .14));
	border-radius: 17px;
	background: var(--color-block, #fff);
	box-shadow: 0 7px 24px rgba(29, 27, 56, .045);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.bottom-panel {
	z-index: 1030;
}
.video-card:hover {
	transform: translateY(-4px);
	border-color: rgba(124, 92, 255, .3);
	box-shadow: 0 16px 34px rgba(42, 34, 85, .12);
}
.video-card > a {
	gap: 9px;
}
.video-card-preview {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 11px;
	background: linear-gradient(135deg, #222039, #4c3f83);
}
.video-card video {
	aspect-ratio: 16 / 9;
	border-radius: 11px;
	background: linear-gradient(135deg, #222039, #4c3f83);
}
.video-card > a > .video-card-preview {
	padding: 0;
}
.video-card-preview > video,
.video-card-preview > .video-card-poster,
.video-card-preview > iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: inherit;
	object-fit: cover;
}
.video-card-preview > .video-card-poster {
	z-index: 1;
}
.video-external-card-preview {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background:
		radial-gradient(circle at 50% 45%, rgba(124, 92, 255, .32), transparent 38%),
		linear-gradient(135deg, #201b39, #443a73 58%, #285c68);
	color: #fff;
}
.video-card-play {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	display: grid;
	width: 48px;
	height: 48px;
	place-items: center;
	transform: translate(-50%, -50%);
	border: 1px solid rgba(255, 255, 255, .48);
	border-radius: 50%;
	background: rgba(20, 17, 36, .52);
	box-shadow: 0 4px 18px rgba(0, 0, 0, .24);
	color: #fff;
	font-size: 25px;
	backdrop-filter: blur(8px);
	transition: opacity .18s ease, transform .18s ease;
	pointer-events: none;
}
.video-card > a:hover .video-card-play,
.video-card > a:focus-visible .video-card-play {
	transform: translate(-50%, -50%) scale(.88);
	opacity: 0;
}
.video-external-card-preview > small {
	position: absolute;
	z-index: 2;
	right: 9px;
	bottom: 8px;
	padding: 5px 7px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 6px;
	background: rgba(17, 16, 26, .62);
	color: #fff;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	backdrop-filter: blur(8px);
}
.video-card-preview > iframe {
	z-index: 3;
	background: #101116;
}
.video-external-card-preview > i {
	font-size: 38px;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .3));
}
.video-watch > iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 72vh;
	margin: 16px 0;
	border: 0;
	border-radius: 16px;
	background: #090a0c;
}
.post-external-video-attachment {
	padding: 15px;
	border: 1px solid rgba(112, 82, 215, .13);
	border-radius: 15px;
	background: linear-gradient(130deg, rgba(112, 82, 215, .08), rgba(59, 197, 172, .05));
}
.post-external-video-attachment > a:first-child {
	color: var(--color-primary, #282638);
	font-weight: 750;
	text-decoration: none;
}
.post-external-video-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	align-self: flex-start;
	padding: 7px 11px;
	border-radius: 9px;
	background: #7052d7;
	color: #fff;
	font-size: 11px;
	font-weight: 750;
	text-decoration: none;
}
.post-external-video-link:hover {
	background: #5a3fc1;
	color: #fff;
}
.video-source-switch {
	display: flex;
	gap: 7px;
	margin: 0 0 14px;
	padding: 5px;
	border: 1px solid var(--color-border, rgba(128, 128, 128, .14));
	border-radius: 13px;
	background: rgba(128, 128, 128, .045);
}
.video-source-switch > button {
	display: inline-flex;
	min-height: 39px;
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 12px;
	border: 1px solid transparent;
	border-radius: 9px;
	background: transparent;
	color: var(--color-secondary, #777687);
	font: inherit;
	font-size: 12px;
	font-weight: 720;
	cursor: pointer;
	transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}
.video-source-switch > button:hover {
	color: #6247c4;
}
.video-source-switch > button.active {
	border-color: rgba(112, 82, 215, .15);
	background: var(--color-block, #fff);
	box-shadow: 0 3px 10px rgba(42, 34, 85, .07);
	color: #6247c4;
}
.video-source-switch > button:focus-visible {
	outline: 3px solid rgba(105, 82, 220, .28);
	outline-offset: 2px;
}
.video-link-field {
	display: grid;
	gap: 8px;
	color: var(--color-primary, #282638);
	font-size: 12px;
	font-weight: 720;
}
.video-dropzone[hidden],
.video-link-field[hidden],
.video-link-hint[hidden] {
	display: none !important;
}
.video-link-field > span {
	color: var(--color-secondary, #858393);
	font-size: 11px;
	font-weight: 500;
}
.video-link-field > input {
	width: 100%;
	min-height: 46px;
	padding: 11px 13px;
	border: 1px solid var(--color-border, #e5e3ed);
	border-radius: 11px;
	background: var(--color-input, #fff);
	color: var(--color-primary, #282638);
	font: inherit;
	font-size: 13px;
}
.video-link-field > input:focus {
	border-color: #7860d4;
	box-shadow: 0 0 0 3px rgba(112, 82, 215, .13);
	outline: 0;
}
.video-link-hint {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin-top: 11px;
	padding: 11px 12px;
	border: 1px solid rgba(112, 82, 215, .12);
	border-radius: 11px;
	background: rgba(112, 82, 215, .055);
	color: var(--color-secondary, #777687);
	font-size: 11px;
	line-height: 1.5;
}
.video-link-hint > i {
	flex: 0 0 auto;
	color: #7052d7;
	font-size: 14px;
}
.video-upload-review > video[hidden],
.video-link-review[hidden] {
	display: none !important;
}
.video-link-review {
	display: flex;
	min-height: 145px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 18px;
	border: 1px solid rgba(112, 82, 215, .14);
	border-radius: 12px;
	background: linear-gradient(145deg, rgba(112, 82, 215, .12), rgba(59, 197, 172, .08));
	color: #7052d7;
	text-align: center;
}
.video-link-review > i {
	font-size: 32px;
}
.video-link-review > strong {
	color: var(--color-primary, #282638);
	font-size: 13px;
}
.video-link-review > span {
	overflow: hidden;
	max-width: 100%;
	color: var(--color-secondary, #858393);
	font-size: 10px;
	text-overflow: ellipsis;
	white-space: nowrap;
}
html[data-bs-theme="dark"] .video-source-switch {
	background: rgba(255, 255, 255, .035);
}
html[data-bs-theme="dark"] .video-source-switch > button.active {
	border-color: rgba(174, 154, 255, .2);
	background: var(--color-block, #20212a);
	color: #c5b8ff;
}
html[data-bs-theme="dark"] .video-link-field > input {
	border-color: rgba(255, 255, 255, .16);
	background: var(--color-block, #20212a);
	color: var(--color-primary, #f2f0f8);
}
html[data-bs-theme="dark"] .video-link-hint,
html[data-bs-theme="dark"] .video-link-review {
	border-color: rgba(174, 154, 255, .18);
	background: rgba(112, 82, 215, .12);
}
html[data-bs-theme="dark"] .video-link-review > strong {
	color: #f2f0f8;
}
@media (max-width: 600px) {
	.video-source-switch > button {
		gap: 6px;
		padding: 8px 7px;
		font-size: 10px;
	}
}
.video-card > a > strong {
	overflow: hidden;
	padding: 0 3px;
	color: var(--color-primary, #282638);
	font-size: 14px;
	font-weight: 750;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.video-card > a > span {
	padding: 0 3px;
}
.video-rank {
	position: absolute;
	z-index: 1;
	top: 17px;
	left: 17px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 9px;
	border: 1px solid rgba(207, 191, 255, .65);
	border-radius: 99px;
	background: linear-gradient(115deg, rgba(47, 36, 88, .96), rgba(91, 67, 155, .94));
	color: #fff;
	font-size: 9px;
	font-weight: 850;
	letter-spacing: .08em;
	box-shadow: 0 4px 14px rgba(31, 22, 62, .24);
	backdrop-filter: blur(8px);
}
.video-popular-card:first-child {
	border-color: rgba(224, 174, 73, .45);
}
.video-popular-card:first-child .video-rank {
	border-color: rgba(255, 255, 255, .72);
	background: linear-gradient(115deg, #ffe08a, #f4b94e);
	color: #53380b;
	box-shadow: 0 4px 16px rgba(190, 128, 26, .3);
}
.video-card > .btn {
	align-self: flex-start;
	margin: 0 3px;
}
.video-empty {
	display: flex;
	min-height: 126px;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 22px;
	border: 1px dashed var(--color-border, rgba(128, 128, 128, .22));
	border-radius: 17px;
	background: var(--color-block, #fff);
	text-align: center;
}
.video-albums-section {
	padding: 23px;
	border: 1px solid var(--color-border, rgba(128, 128, 128, .16));
	border-radius: 21px;
	background: var(--color-block, #fff);
}
.video-album-list {
	margin: 18px 0;
}
.video-album-empty {
	margin: 18px 0;
	color: var(--color-secondary, #9299a5);
	font-size: 13px;
}
.video-album {
	padding: 11px 13px;
	border-color: var(--color-border, rgba(128, 128, 128, .16));
	background: rgba(124, 92, 255, .035);
}
.video-album a {
	gap: 12px;
}
.video-album a::before {
	display: grid;
	width: 34px;
	height: 34px;
	place-items: center;
	border-radius: 10px;
	background: rgba(124, 92, 255, .13);
	color: #7253df;
	content: "\F2D3";
	font-family: bootstrap-icons;
	font-size: 16px;
}
.video-album-form {
	grid-template-columns: auto minmax(120px, 1fr) auto;
	align-items: center;
	padding-top: 16px;
	border-top: 1px solid var(--color-border, rgba(128, 128, 128, .12));
}
.video-album-form label {
	font-size: 13px;
	font-weight: 750;
}
.video-album-form input,
.video-upload-fields input,
.video-upload-fields select,
.video-upload-fields textarea {
	width: 100%;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--color-border, rgba(128, 128, 128, .18));
	border-radius: 11px;
	background: var(--color-input, transparent);
	color: var(--color-primary, inherit);
	font: inherit;
}
.video-album-form button,
.video-upload-fields > button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 44px;
	padding: 10px 15px;
	border: 0;
	border-radius: 11px;
	background: linear-gradient(120deg, #7655ed, #5b48c9);
	color: #fff;
	font: inherit;
	font-size: 13px;
	font-weight: 750;
	cursor: pointer;
}
.video-upload-details {
	overflow: hidden;
	border: 1px solid var(--color-border, rgba(128, 128, 128, .16));
	border-radius: 20px;
	background: var(--color-block, #fff);
}
.video-upload-details > summary {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 20px;
	cursor: pointer;
	list-style: none;
}
.video-upload-details > summary::-webkit-details-marker {
	display: none;
}
.video-upload-summary-icon {
	display: grid;
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	place-items: center;
	border-radius: 13px;
	background: linear-gradient(135deg, rgba(124, 92, 255, .18), rgba(63, 212, 186, .14));
	color: #7052d7;
	font-size: 21px;
}
.video-upload-details summary strong,
.video-upload-details summary small {
	display: block;
}
.video-upload-details summary strong {
	color: var(--color-primary, #282638);
	font-size: 14px;
}
.video-upload-details summary small {
	margin-top: 3px;
	color: var(--color-secondary, #9299a5);
	font-size: 12px;
}
.video-upload-chevron {
	margin-left: auto;
	color: var(--color-secondary, #9299a5);
	transition: transform .2s ease;
}
.video-upload-details[open] .video-upload-chevron {
	transform: rotate(180deg);
}
.video-upload-form {
	margin: 0;
	padding: 0 20px 20px;
	border: 0;
	border-top: 1px solid var(--color-border, rgba(128, 128, 128, .12));
	border-radius: 0;
	background: transparent;
}
.video-upload-fields {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding-top: 18px;
}
.video-upload-fields > label {
	display: grid;
	gap: 7px;
	color: var(--color-secondary, #777687);
	font-size: 12px;
	font-weight: 700;
}
.video-upload-fields .video-file-field,
.video-upload-fields .video-description-field,
.video-upload-fields > button {
	grid-column: 1 / -1;
}
.video-upload-fields textarea {
	min-height: 92px;
	resize: vertical;
}
.video-watch {
	max-width: 1000px;
	margin: 36px auto 70px;
	padding: 28px;
	border: 1px solid var(--color-border, rgba(128, 128, 128, .15));
	border-radius: 24px;
	background: var(--color-block, #fff);
	box-shadow: 0 14px 42px rgba(29, 27, 56, .07);
}
.video-watch > video {
	max-height: 72vh;
	border-radius: 17px;
}
.video-watch h1 {
	margin-top: 22px;
	font-size: 28px;
}
.video-watch p {
	margin-top: 16px;
	line-height: 1.7;
}
.video-watch-meta a {
	color: #7052d7;
	font-weight: 700;
	text-decoration: none;
}
.video-watch-meta a:hover {
	text-decoration: underline;
}
.video-comments {
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid var(--color-border, rgba(128, 128, 128, .15));
}
.video-comments h2 {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 18px;
	font-size: 19px;
	font-weight: 760;
}
.video-comments h2 span {
	display: inline-grid;
	min-width: 26px;
	height: 26px;
	place-items: center;
	padding: 0 7px;
	border-radius: 99px;
	background: rgba(112, 82, 215, .1);
	color: #7052d7;
	font-size: 12px;
}
.video-comment-form {
	display: grid;
	gap: 9px;
	margin-bottom: 20px;
}
.video-comment-form label {
	color: var(--color-primary, #282638);
	font-size: 12px;
	font-weight: 700;
}
.video-comment-form textarea {
	width: 100%;
	min-height: 78px;
	padding: 11px 13px;
	border: 1px solid var(--color-border, #e5e3ed);
	border-radius: 12px;
	background: var(--color-input, #fff);
	color: var(--color-primary, #282638);
	font: inherit;
	font-size: 13px;
	resize: vertical;
}
.video-comment-form textarea:focus {
	border-color: #7860d4;
	box-shadow: 0 0 0 3px rgba(112, 82, 215, .13);
	outline: 0;
}
.video-comment-form-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.video-comment-form-footer > span {
	color: var(--color-secondary, #858393);
	font-size: 12px;
}
.video-comment-form button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 38px;
	padding: 8px 14px;
	border: 0;
	border-radius: 10px;
	background: linear-gradient(115deg, #7655ed, #5a3fc1);
	color: #fff;
	font: inherit;
	font-size: 12px;
	font-weight: 720;
	cursor: pointer;
}
.video-comment-form button:disabled {
	opacity: .65;
	cursor: wait;
}
.video-comment-list {
	display: grid;
	gap: 14px;
}
.video-comment {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px;
	border: 1px solid var(--color-border, rgba(128, 128, 128, .12));
	border-radius: 14px;
	background: var(--color-block, rgba(128, 128, 128, .035));
}
.video-comment-avatar {
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	overflow: hidden;
	border-radius: 50%;
}
.video-comment-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.video-comment-body {
	min-width: 0;
	flex: 1;
}
.video-comment-body > header,
.video-comment-body > .video-comment-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px 12px;
}
.video-comment-body > header a,
.video-comment-body > .video-comment-head a {
	color: var(--color-primary, #282638);
	font-size: 13px;
	font-weight: 740;
	text-decoration: none;
}
.video-comment-body > header a:hover,
.video-comment-body > .video-comment-head a:hover {
	color: #7052d7;
}
.video-comment-body time {
	color: var(--color-secondary, #858393);
	font-size: 11px;
}
.video-comment-body p {
	margin: 6px 0 0;
	color: var(--color-primary, #282638);
	font-size: 13px;
	line-height: 1.6;
	overflow-wrap: anywhere;
}
.video-comments-empty {
	margin: 0 !important;
	padding: 18px;
	border: 1px dashed var(--color-border, rgba(128, 128, 128, .2));
	border-radius: 12px;
	color: var(--color-secondary, #858393);
	font-size: 13px;
	text-align: center;
}
html[data-bs-theme="dark"] .video-watch-meta a {
	color: #c5b8ff;
}
html[data-bs-theme="dark"] .video-comments h2 span {
	background: rgba(174, 154, 255, .16);
	color: #c5b8ff;
}
html[data-bs-theme="dark"] .video-comment-form textarea {
	border-color: rgba(255, 255, 255, .16);
	background: var(--color-block, #20212a);
	color: var(--color-primary, #f2f0f8);
}
@media (max-width: 767px) {
	.video-library {
		margin-top: 15px;
		padding: 0 12px;
	}
	.video-header {
		min-height: 0;
		padding: 30px 24px;
		border-radius: 22px;
	}
	.video-hero-copy {
		max-width: 74%;
	}
	.video-hero-copy h1 {
		font-size: clamp(32px, 8vw, 42px);
	}
	.video-hero-copy p {
		max-width: 300px;
		font-size: 13px;
	}
	.video-hero-art {
		width: 43%;
		opacity: .8;
	}
	.video-hero-orbit {
		left: 80%;
		width: 220px;
		height: 220px;
	}
	.video-hero-play {
		left: 80%;
		width: 66px;
		height: 66px;
		border-radius: 20px;
		font-size: 42px;
	}
	.video-hero-caption {
		display: none;
	}
	.video-discover-bar {
		margin-bottom: 29px;
	}
	.video-my-library {
		padding: 11px;
		font-size: 0;
	}
	.video-my-library i {
		font-size: 17px;
	}
	.video-grid {
		gap: 12px;
	}
	.video-section {
		margin-bottom: 34px;
	}
	.video-section-heading h2 {
		font-size: 21px;
	}
	.video-tab {
		padding: 10px 12px;
		font-size: 12px;
	}
	.video-albums-section {
		padding: 16px;
	}
	.video-album-form {
		grid-template-columns: 1fr auto;
	}
	.video-album-form label {
		grid-column: 1 / -1;
	}
	.video-watch {
		margin: 16px 12px 50px;
		padding: 14px;
		border-radius: 18px;
	}
	.video-watch h1 {
		font-size: 22px;
	}
}
@media (max-width: 480px) {
	.video-header {
		padding: 26px 19px;
	}
	.video-hero-copy {
		max-width: 84%;
	}
	.video-hero-copy h1 {
		font-size: 34px;
	}
	.video-hero-copy p {
		max-width: 250px;
	}
	.video-hero-art {
		width: 37%;
		opacity: .46;
	}
	.video-hero-orbit {
		left: 96%;
		width: 180px;
		height: 180px;
	}
	.video-hero-play {
		left: 96%;
		width: 56px;
		height: 56px;
	}
	.video-grid {
		grid-template-columns: 1fr;
	}
	.video-card {
		padding: 8px 8px 11px;
	}
	.video-card > a > strong {
		font-size: 14px;
	}
	.video-section-heading {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
	.video-section-heading > div {
		width: 100%;
		text-align: center;
	}
	.video-section-heading h2 {
		justify-content: center;
	}
	.video-tabs {
		margin-right: -12px;
	}
	.video-section-badge {
		align-self: center;
		padding: 7px 9px;
		font-size: 11px;
	}
	.video-section-badge i {
		font-size: 14px;
	}
	.video-live-indicator {
		align-self: center;
		justify-content: center;
		font-size: 11px;
	}
	.video-upload-fields {
		grid-template-columns: 1fr;
	}
	.video-upload-fields .video-file-field,
	.video-upload-fields .video-description-field,
	.video-upload-fields > button {
		grid-column: auto;
	}
	.video-album-form {
		grid-template-columns: 1fr;
	}
	.video-album-form label {
		grid-column: auto;
	}
}