@import "fonts.css";
@import "carousel.css";
@import "custom-select.css";

/* ===== CSS VARIABLES ===== */
:root {
	--background-color: #fff;
	--text-color: #333;
	--text-secondary: #000;
	--header-background-color: #e7e7e7;
	--border-color: #eee;
	--anime-block-background-color: #fff;
	--secondary-text-color: #777;
	--loading-indicator-color: #FF5353;
	--main-btn-color: #828282;
	--main-btn-hover-background: #79797938;
	--search-box-background: #f9f9f9d1;
	--search-input-background: #79797938;
	--search-input-color: #000;
	--search-btn-background: #79797938;
	--search-btn-color: #00000073;
	--bookmark-button-background: #ffc283;
	--bookmark-button-color: #57412b;
	--error-background: #ff4c4c42;
	--error-color: #974545;
	--anime-block-item-background: #2e2e2e;
	--anime-block-item-text-color: #ccc;
	--success-color: #42b983;
	--danger-color: #ffbfc5;
	--background-secondary: #fff;
	--background-primary: #fff;
	--background-tertiary: #d6d6d6;
}

:root[data-theme="dark"] {
	--background-color: #0b0b0b;
	--text-color: #ddd;
	--text-secondary: #ddd;
	--header-background-color: #2b2b2b;
	--border-color: #2e2e2e;
	--anime-block-background-color: #2e2e2e;
	--secondary-text-color: #999;
	--loading-indicator-color: #ed4856;
	--main-btn-color: #828282;
	--main-btn-hover-background: #79797938;
	--search-box-background: #000000de;
	--search-input-background: #79797938;
	--search-input-color: #fff;
	--search-btn-background: #79797938;
	--search-btn-color: #ffffff73;
	--bookmark-button-background: #ffc283;
	--bookmark-button-color: #57412b;
	--error-background: #ff838342;
	--error-color: #ffc3c3;
	--anime-block-item-background: #2e2e2e;
	--anime-block-item-text-color: #ccc;
	--success-color: #42b983;
	--danger-color: #cd4f4f;
	--background-secondary: #111;
	--background-primary: #111;
	--background-tertiary: #444;
}

/* ===== BASE STYLES ===== */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0
}

body {
	font-family: 'Roboto', sans-serif;
	margin: 0 auto;
	background-color: var(--background-color);
	color: var(--text-color);
	line-height: 1.5;
}

main {
	margin: auto;
	background-color: var(--background-color);
	padding-bottom: 15vh;
	min-height: 100vh;
}

a {
	text-decoration: none;
}

i {
	font-size: 20px;
}

::-webkit-scrollbar {
	width: 0;
	height: 0;
}

/* ===== LAYOUT & SPACING ===== */
.pw20 {
	padding: 0 15px;
}

.ph20 {
	padding: 20px 0;
}

.pt10 {
	padding-top: 10px;
}

.pt75 {
	padding-top: 20px;
}

.pt55 {
	padding-top: 25px;
}

@media (width <=768px) {
	.pt55 {
		padding-top: 30px;
	}
}

@media (width <=810px) {
	.pt75 {
		padding-top: 25px !important;
	}
}

/* ===== HEADER COMPONENT ===== */
header {
	display: flex;
	position: fixed;
	bottom: 50%;
	z-index: 3;
	grid-gap: 10px;
	justify-content: center;
	left: 0;
	align-content: revert;
	width: auto;
	backdrop-filter: blur(10px);
	border-radius: 0;
	border-right: 1px solid var(--main-btn-hover-background);
	transform: translate(0, 50%);
	height: 100vh;
}

.h__menu {
	display: grid;
	grid-gap: 5px;
	height: 100%;
	align-content: center;
	padding: 7px;
}

.h__menu .sub {
	gap: 10px;
	display: grid;
}

@media (width <=768px) {
	.h__menu .sub {
		display: flex;
	}
}

.toggle-theme {
	display: flex !important;
	border: 0;
	background-color: transparent;
	margin-top: 10px;
	padding: 5px 10px;
	gap: 10px;
	align-items: center;
	color: var(--text-color);
	font-size: 14px;
	font-family: 'Roboto', sans-serif;
	cursor: pointer;
}

@media (width <=810px) {
	header {
		display: flex;
		width: 100%;
		bottom: 0;
		transform: none;
		border: 0;
		border-radius: 0;
		left: 0;
		border-top: 1px solid var(--main-btn-hover-background);
		height: auto;
		background-color: var(--background-color);
	}

	.h__menu {
		display: flex;
	}
}

.main__btn {
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
	border: 0;
	color: var(--text-color);
	display: grid;
	align-items: center;
	justify-items: center;
	width: 55px;
	height: 55px;
	cursor: pointer;
	background-color: transparent;
	padding: 0;
	border-radius: 7px;
}

.main__btn:hover {
	opacity: .7;
}

.main__btn div {
	font-size: 12px !important;
	line-height: 20px;
}

.main__btn i {
	font-size: 20px;
	color: #ed4856;
	line-height: 20px;
}

/* ===== TYPOGRAPHY COMPONENT ===== */
.main__title {
	display: block;
	font-weight: 500;
	font-size: 24px;
	color: var(--text-color);
	animation: SectionShow 0.5s ease-in-out;
}

.main__subtitle {
	color: var(--secondary-text-color);
	margin-top: 10px;
	animation: SectionShow 0.5s ease-in-out;
}

/* ===== ANIME LIST COMPONENT ===== */
.anime-list {
	display: grid;
	grid-gap: 20px;
	margin-top: 20px;
	margin-bottom: 30px;
}

@media (width > 960px) {
	main {
		max-width: 800px;
	}

	.anime-list {
		grid-template-columns: repeat(5, 1fr)
	}
}

@media (width > 1100px) {
	main {
		max-width: 980px;
	}

	.anime-list {
		grid-template-columns: repeat(6, 1fr)
	}
}

@media (width > 1200px) {
	main {
		max-width: 100%;
		padding-left: 70px;
	}

	.anime-list {
		grid-template-columns: repeat(9, 1fr);
	}
}

@media (width <=810px) {
	main {
		max-width: 630px;
	}

	.anime-list {
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 15px;
	}
}

/* ===== ANIME CARD COMPONENT ===== */
.anime-card {
	display: grid;
	position: relative;
	animation: SectionShow 0.5s ease-in-out;
}

.anime-card:hover {
	opacity: .6;
}

.anime-card .item__title {
	display: block;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	color: var(--text-color);
	margin-top: 10px;
}

.anime-card .item__info {
	color: var(--secondary-text-color);
	font-size: 12px;
	display: flex;
	justify-content: space-between;
}

.poster {
	position: relative;
	overflow: hidden;
	height: 0;
	padding: 70% 0;
	border-radius: 7px;
	animation: SectionShow 0.5s ease-in-out;
}

.poster img {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	object-fit: cover;
}

/* Стили для плавной загрузки изображений */
.image_tr[data-src]:not(.loaded) {
	opacity: 0;
}

.image_tr.loaded {
	opacity: 1;
}

/* Плейсхолдер для загружающихся изображений */
.poster:has(.image_tr[data-src]:not(.loaded))::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: var(--header-background-color);
	background-size: 20px 20px;
	background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
	z-index: 1;
}

.poster:has(.image_tr.loaded)::before {
	display: none;
}

/* ===== ANIME BLOCKS COMPONENT (Bookmarks/History) ===== */
.anime-blocks {
	display: grid;
	grid-gap: 10px;
	margin-top: 20px;
	margin-bottom: 30px;
}

@media (width > 960px) {
	.anime-blocks {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (width > 1100px) {
	.anime-blocks {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (width > 1200px) {
	.anime-blocks {
		grid-template-columns: repeat(1, 1fr);
	}
}

@media (width <=810px) {
	.anime-blocks {
		grid-template-columns: repeat(1, 1fr);
	}

	.anime-card .item__title {
		font-size: 14px;
	}
}

.anime-block {
	display: grid;
	grid-template-columns: 55px 1fr;
	grid-gap: 10px;
	background-color: #8686861c;
	padding: 15px;
	border-radius: 7px;
}

.anime-block:hover {
	opacity: .7;
}

.anime-block .item {
	display: grid;
	align-content: baseline;
}

.anime-block .item__title {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--text-color);
	width: 90%;
}

.anime-block .item__info {
	display: flex;
	grid-gap: 10px;
	font-size: 14px;
	color: var(--secondary-text-color);
}

.anime-block .poster {
	border-radius: 5px;
}

/* ===== FILM DETAILS COMPONENT ===== */

.full__grid {
	display: grid;
	grid-template-columns: 270px 1fr;
	gap: 20px;
}

@media (width <=800px) {
	.full__grid {
		grid-template-columns: 1fr;
	}
}

.full__title {
	display: block;
	font-size: 24px;
	font-weight: 500;
	color: var(--text-color);
	line-height: 1.4;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.full__subtitle {
	color: var(--secondary-text-color);
	display: block;
	margin-top: 7px;
	line-height: 1.4;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.full__details {
	padding: 20px;
	background-color: #86868621;
	border-radius: 10px;
	margin-top: 15px;
}

.section__genres {
	display: flex;
	gap: 7px;
	margin: 20px 0;
	flex-wrap: wrap;
}

.section__genres .section__genre {
	background-color: var(--border-color);
	padding: 2px 7px;
	color: var(--text-color);
	border-radius: 5px;
	font-size: 14px;
}

.section__genres .section__genre:hover {
	opacity: .7;
}

.full__d {
	display: flex;
	gap: 15px;
	padding: 10px;
	margin-top: 10px;
	border-radius: 7px;
	border: 1px solid var(--border-color);
	margin-bottom: 10px;
	background-color: #8888881a;
}

.full__d .flx {
	display: grid;
}

.full__d .flx a:hover {
	opacity: .7;
}

.full__d .txt {
	font-size: 14px;
	color: var(--secondary-text-color);
}

.full__d .primary {
	color: var(--text-color);
}

.full__d .danger {
	color: #ff4040;
}

.full__item {
	display: grid;
	grid-template-columns: 200px 1fr;
	margin-bottom: 10px;
}

.full__flex {
	display: grid;
	justify-content: space-between;
	align-items: flex-start;
	grid-template-columns: 1fr auto;
	gap: 0 15px;
}

.full__section {
	animation: SectionShow 0.5s ease-in-out;
}

@media (width <=800px) {
	.full__flex {
		grid-template-columns: 1fr;
	}

	.full__d {
		justify-content: center;
	}

	.full__item {
		grid-template-columns: 1fr;
		margin-bottom: 15px;
		grid-gap: 5px;
	}

	.full__flex {
		justify-content: center;
	}

	.full__title,
	.full__subtitle {
		text-align: center;
	}
}

.full__item span {
	color: var(--secondary-text-color);
}

.full__desc {
	display: block;
	margin-bottom: 20px;
}

.full__desc__text {
	color: var(--text-color);
	display: grid;
	grid-gap: 10px;
}

.full__head {
	display: grid;
	grid-template-columns: 1fr;
}

.full__head:first-child div {
	position: relative;
	overflow: hidden;
}

@media (width < 1200px) {
	.full__head {
		grid-template-columns: 1fr;
	}

	.full__item {
		grid-template-columns: 1fr;
	}
}

/* ===== RATINGS COMPONENT ===== */
.ratings {
	display: flex;
	grid-gap: 20px;
	border-radius: 7px;
	margin: 20px 0;
	align-items: baseline;
}

.ratings div {
	display: grid;
}

.ratings div div {
	display: flex;
	grid-gap: 7px;
	align-items: center;
}

.ratings b {
	font-weight: 500;
	color: var(--secondary-text-color);
	font-size: 12px;
	text-transform: uppercase;
}

.ratings span {
	font-size: 18px;
	font-weight: 500;
	color: var(--text-color);
	display: grid;
	justify-items: center;
}

/* Rating Icons */
.imdb {
	mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 1854 761' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;'%3E%3Cg%3E%3Crect id='g5jjnq26yS' x='8.59' y='19.756' width='190.125' height='731.875' style='fill-rule:nonzero;'/%3E%3Cg%3E%3Crect id='g5jjnq26yS1' serif:id='g5jjnq26yS' x='8.59' y='19.756' width='190.125' height='731.875' style='fill-opacity:0;fill-rule:nonzero;stroke:%23000;stroke-opacity:0;stroke-width:4.17px;'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cpath id='i3Prh1JpXt' d='M557.965,356.881c-16.334,-111.541 -25.417,-173.541 -27.209,-185.916c-7.958,-59.709 -15.541,-111.667 -22.791,-156l-246.5,-0l-0,731.875l166.541,-0l0.584,-483.25l70.083,483.25l118.625,-0l66.458,-494l0.625,494l166,-0l0,-731.875l-248.375,-0l-44.041,341.916Z' style='fill-rule:nonzero;'/%3E%3Cg%3E%3Cpath id='i3Prh1JpXt1' serif:id='i3Prh1JpXt' d='M557.965,356.881c-16.334,-111.541 -25.417,-173.541 -27.209,-185.916c-7.958,-59.709 -15.541,-111.667 -22.791,-156l-246.5,-0l-0,731.875l166.541,-0l0.584,-483.25l70.083,483.25l118.625,-0l66.458,-494l0.625,494l166,-0l0,-731.875l-248.375,-0l-44.041,341.916Z' style='fill-opacity:0;fill-rule:nonzero;stroke:%23000;stroke-opacity:0;stroke-width:4.17px;'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cpath id='a4ov9rRGQm' d='M1164.26,167.215c2.084,9.333 3.167,30.5 3.167,63.583l0,283.75c0,48.708 -3.167,78.542 -9.458,89.542c-6.334,11 -23.167,16.458 -50.459,16.458l0,-480.417c20.709,0 34.834,2.209 42.334,6.542c7.5,4.375 12.333,11.208 14.416,20.542Zm85.875,572.166c22.625,-4.958 41.625,-13.708 57.042,-26.166c15.375,-12.5 26.167,-29.792 32.333,-51.917c6.209,-22.083 9.875,-65.958 9.875,-131.583l0,-257c0,-69.25 -2.708,-115.667 -6.916,-139.25c-4.25,-23.625 -14.792,-45.084 -31.667,-64.334c-16.917,-19.25 -41.583,-33.083 -74,-41.5c-32.458,-8.416 -85.375,-12.666 -177.417,-12.666l-141.833,-0l0,731.875l230.333,-0c53.084,-1.667 87.167,-4.125 102.25,-7.459Z' style='fill-rule:nonzero;'/%3E%3Cg%3E%3Cpath id='a4ov9rRGQm1' serif:id='a4ov9rRGQm' d='M1164.26,167.215c2.084,9.333 3.167,30.5 3.167,63.583l0,283.75c0,48.708 -3.167,78.542 -9.458,89.542c-6.334,11 -23.167,16.458 -50.459,16.458l0,-480.417c20.709,0 34.834,2.209 42.334,6.542c7.5,4.375 12.333,11.208 14.416,20.542Zm85.875,572.166c22.625,-4.958 41.625,-13.708 57.042,-26.166c15.375,-12.5 26.167,-29.792 32.333,-51.917c6.209,-22.083 9.875,-65.958 9.875,-131.583l0,-257c0,-69.25 -2.708,-115.667 -6.916,-139.25c-4.25,-23.625 -14.792,-45.084 -31.667,-64.334c-16.917,-19.25 -41.583,-33.083 -74,-41.5c-32.458,-8.416 -85.375,-12.666 -177.417,-12.666l-141.833,-0l0,731.875l230.333,-0c53.084,-1.667 87.167,-4.125 102.25,-7.459Z' style='fill-opacity:0;fill-rule:nonzero;stroke:%23000;stroke-opacity:0;stroke-width:4.17px;'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cpath id='fk968BpsX' d='M1656.13,630.006c-3.5,9.292 -18.833,14 -30.416,14c-11.334,0 -18.875,-4.5 -22.709,-13.541c-3.833,-9 -5.708,-29.542 -5.708,-61.709l0,-193.416c0,-33.334 1.667,-54.125 5.042,-62.417c3.333,-8.208 10.666,-12.375 22,-12.375c11.583,0 27.125,4.708 31.125,14.167c3.958,9.458 5.958,29.666 5.958,60.625l0,187.541c-1.208,38.542 -2.958,60.917 -5.292,67.125Zm-242,110.459l171.167,-0c7.125,-27.959 11.042,-43.5 11.833,-46.625c15.5,18.75 32.542,32.833 51.25,42.166c18.625,9.375 46.5,14.042 68.084,14.042c30.041,0 55.958,-7.875 77.833,-23.667c21.833,-15.75 35.75,-34.416 41.667,-55.875c5.916,-21.5 8.875,-54.166 8.875,-98.083l-0,-205.333c-0,-44.167 -1,-73 -2.959,-86.542c-1.958,-13.542 -7.791,-27.333 -17.5,-41.458c-9.708,-14.125 -23.833,-25.084 -42.333,-32.917c-18.5,-7.833 -40.333,-11.75 -65.5,-11.75c-21.875,0 -49.875,4.375 -68.542,13c-18.625,8.625 -35.541,21.708 -50.708,39.25l0,-238.083l-183.167,-0l0,731.875Z' style='fill-rule:nonzero;'/%3E%3Cg%3E%3Cpath id='fk968BpsX1' serif:id='fk968BpsX' d='M1656.13,630.006c-3.5,9.292 -18.833,14 -30.416,14c-11.334,0 -18.875,-4.5 -22.709,-13.541c-3.833,-9 -5.708,-29.542 -5.708,-61.709l0,-193.416c0,-33.334 1.667,-54.125 5.042,-62.417c3.333,-8.208 10.666,-12.375 22,-12.375c11.583,0 27.125,4.708 31.125,14.167c3.958,9.458 5.958,29.666 5.958,60.625l0,187.541c-1.208,38.542 -2.958,60.917 -5.292,67.125Zm-242,110.459l171.167,-0c7.125,-27.959 11.042,-43.5 11.833,-46.625c15.5,18.75 32.542,32.833 51.25,42.166c18.625,9.375 46.5,14.042 68.084,14.042c30.041,0 55.958,-7.875 77.833,-23.667c21.833,-15.75 35.75,-34.416 41.667,-55.875c5.916,-21.5 8.875,-54.166 8.875,-98.083l-0,-205.333c-0,-44.167 -1,-73 -2.959,-86.542c-1.958,-13.542 -7.791,-27.333 -17.5,-41.458c-9.708,-14.125 -23.833,-25.084 -42.333,-32.917c-18.5,-7.833 -40.333,-11.75 -65.5,-11.75c-21.875,0 -49.875,4.375 -68.542,13c-18.625,8.625 -35.541,21.708 -50.708,39.25l0,-238.083l-183.167,-0l0,731.875Z' style='fill-opacity:0;fill-rule:nonzero;stroke:%23000;stroke-opacity:0;stroke-width:4.17px;'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	background-color: var(--text-color);
	width: 30px;
	height: 12px;
	background-repeat: no-repeat;
	background-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 1854 761' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='fill-rule:evenodd;clip-rule:evenodd;'%3E%3Cg%3E%3Crect id='g5jjnq26yS' x='8.59' y='19.756' width='190.125' height='731.875' style='fill-rule:nonzero;'/%3E%3Cg%3E%3Crect id='g5jjnq26yS1' serif:id='g5jjnq26yS' x='8.59' y='19.756' width='190.125' height='731.875' style='fill-opacity:0;fill-rule:nonzero;stroke:%23000;stroke-opacity:0;stroke-width:4.17px;'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cpath id='i3Prh1JpXt' d='M557.965,356.881c-16.334,-111.541 -25.417,-173.541 -27.209,-185.916c-7.958,-59.709 -15.541,-111.667 -22.791,-156l-246.5,-0l-0,731.875l166.541,-0l0.584,-483.25l70.083,483.25l118.625,-0l66.458,-494l0.625,494l166,-0l0,-731.875l-248.375,-0l-44.041,341.916Z' style='fill-rule:nonzero;'/%3E%3Cg%3E%3Cpath id='i3Prh1JpXt1' serif:id='i3Prh1JpXt' d='M557.965,356.881c-16.334,-111.541 -25.417,-173.541 -27.209,-185.916c-7.958,-59.709 -15.541,-111.667 -22.791,-156l-246.5,-0l-0,731.875l166.541,-0l0.584,-483.25l70.083,483.25l118.625,-0l66.458,-494l0.625,494l166,-0l0,-731.875l-248.375,-0l-44.041,341.916Z' style='fill-opacity:0;fill-rule:nonzero;stroke:%23000;stroke-opacity:0;stroke-width:4.17px;'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cpath id='a4ov9rRGQm' d='M1164.26,167.215c2.084,9.333 3.167,30.5 3.167,63.583l0,283.75c0,48.708 -3.167,78.542 -9.458,89.542c-6.334,11 -23.167,16.458 -50.459,16.458l0,-480.417c20.709,0 34.834,2.209 42.334,6.542c7.5,4.375 12.333,11.208 14.416,20.542Zm85.875,572.166c22.625,-4.958 41.625,-13.708 57.042,-26.166c15.375,-12.5 26.167,-29.792 32.333,-51.917c6.209,-22.083 9.875,-65.958 9.875,-131.583l0,-257c0,-69.25 -2.708,-115.667 -6.916,-139.25c-4.25,-23.625 -14.792,-45.084 -31.667,-64.334c-16.917,-19.25 -41.583,-33.083 -74,-41.5c-32.458,-8.416 -85.375,-12.666 -177.417,-12.666l-141.833,-0l0,731.875l230.333,-0c53.084,-1.667 87.167,-4.125 102.25,-7.459Z' style='fill-rule:nonzero;'/%3E%3Cg%3E%3Cpath id='a4ov9rRGQm1' serif:id='a4ov9rRGQm' d='M1164.26,167.215c2.084,9.333 3.167,30.5 3.167,63.583l0,283.75c0,48.708 -3.167,78.542 -9.458,89.542c-6.334,11 -23.167,16.458 -50.459,16.458l0,-480.417c20.709,0 34.834,2.209 42.334,6.542c7.5,4.375 12.333,11.208 14.416,20.542Zm85.875,572.166c22.625,-4.958 41.625,-13.708 57.042,-26.166c15.375,-12.5 26.167,-29.792 32.333,-51.917c6.209,-22.083 9.875,-65.958 9.875,-131.583l0,-257c0,-69.25 -2.708,-115.667 -6.916,-139.25c-4.25,-23.625 -14.792,-45.084 -31.667,-64.334c-16.917,-19.25 -41.583,-33.083 -74,-41.5c-32.458,-8.416 -85.375,-12.666 -177.417,-12.666l-141.833,-0l0,731.875l230.333,-0c53.084,-1.667 87.167,-4.125 102.25,-7.459Z' style='fill-opacity:0;fill-rule:nonzero;stroke:%23000;stroke-opacity:0;stroke-width:4.17px;'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cpath id='fk968BpsX' d='M1656.13,630.006c-3.5,9.292 -18.833,14 -30.416,14c-11.334,0 -18.875,-4.5 -22.709,-13.541c-3.833,-9 -5.708,-29.542 -5.708,-61.709l0,-193.416c0,-33.334 1.667,-54.125 5.042,-62.417c3.333,-8.208 10.666,-12.375 22,-12.375c11.583,0 27.125,4.708 31.125,14.167c3.958,9.458 5.958,29.666 5.958,60.625l0,187.541c-1.208,38.542 -2.958,60.917 -5.292,67.125Zm-242,110.459l171.167,-0c7.125,-27.959 11.042,-43.5 11.833,-46.625c15.5,18.75 32.542,32.833 51.25,42.166c18.625,9.375 46.5,14.042 68.084,14.042c30.041,0 55.958,-7.875 77.833,-23.667c21.833,-15.75 35.75,-34.416 41.667,-55.875c5.916,-21.5 8.875,-54.166 8.875,-98.083l-0,-205.333c-0,-44.167 -1,-73 -2.959,-86.542c-1.958,-13.542 -7.791,-27.333 -17.5,-41.458c-9.708,-14.125 -23.833,-25.084 -42.333,-32.917c-18.5,-7.833 -40.333,-11.75 -65.5,-11.75c-21.875,0 -49.875,4.375 -68.542,13c-18.625,8.625 -35.541,21.708 -50.708,39.25l0,-238.083l-183.167,-0l0,731.875Z' style='fill-rule:nonzero;'/%3E%3Cg%3E%3Cpath id='fk968BpsX1' serif:id='fk968BpsX' d='M1656.13,630.006c-3.5,9.292 -18.833,14 -30.416,14c-11.334,0 -18.875,-4.5 -22.709,-13.541c-3.833,-9 -5.708,-29.542 -5.708,-61.709l0,-193.416c0,-33.334 1.667,-54.125 5.042,-62.417c3.333,-8.208 10.666,-12.375 22,-12.375c11.583,0 27.125,4.708 31.125,14.167c3.958,9.458 5.958,29.666 5.958,60.625l0,187.541c-1.208,38.542 -2.958,60.917 -5.292,67.125Zm-242,110.459l171.167,-0c7.125,-27.959 11.042,-43.5 11.833,-46.625c15.5,18.75 32.542,32.833 51.25,42.166c18.625,9.375 46.5,14.042 68.084,14.042c30.041,0 55.958,-7.875 77.833,-23.667c21.833,-15.75 35.75,-34.416 41.667,-55.875c5.916,-21.5 8.875,-54.166 8.875,-98.083l-0,-205.333c-0,-44.167 -1,-73 -2.959,-86.542c-1.958,-13.542 -7.791,-27.333 -17.5,-41.458c-9.708,-14.125 -23.833,-25.084 -42.333,-32.917c-18.5,-7.833 -40.333,-11.75 -65.5,-11.75c-21.875,0 -49.875,4.375 -68.542,13c-18.625,8.625 -35.541,21.708 -50.708,39.25l0,-238.083l-183.167,-0l0,731.875Z' style='fill-opacity:0;fill-rule:nonzero;stroke:%23000;stroke-opacity:0;stroke-width:4.17px;'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
}

.shiki {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20'%3E%3Cpath d='M2.8 2.6s1.5 0 1.5.3c.1.2-.9 0-1.4.2-.2.1-.4.3-.4.5.1.3 1.7.7 2.7 1 1.3.2 4.3.2 7 .7 2 .4 4.1.5 5.1 1.2s.8 1 .8 1.7c0 0 1 .3 1.2 1 .6.7-.3 2-.8 2.4-.8.5-3.8-1-3.8-1 .3.7.5 1.3.6 2l.3 1.8c.1.4.4.8 1 1.6 0 0 1 1 1.4 2 .3.5.8.9.6 1.5-.3.7-1.3.5-2 .2-.6-.2-2-1.1-2.6-2.3-.3-.6-.4-1.1-.4-1.6v-2l-.2-1.8-.5-1.6h-1.7l.4 1.6c.4 1.2.4 1.3.4 3.8-.1 2.7-1.3 3-1.7 3-.4 0-3.4-2.6-3.4-2.7v-.3c0-.3-.5-.6-.5-.6l2 .9c.3.2.8 0 .8-1 0-.8 0-1.5.2-2.2v-2.2l-1.4.2-2 .4c-.3 0-.6.4-.6.6-.1.8 0 1.6.5 2.3.2.4.4.8.4 1.4 0 .5-.7 1.6-1.8 3S1.4 20 1.4 20c1-1.1 2.1-2.6 2.8-4 .7-1.3.5-2.4.4-3.1l-.2-1.2s-1.8 1-2.3.9c-.5-.2-1.6-1-1.6-1.4 0-.6 0-1.5.2-1.7.1-.2.5-.2.6-.3l.4-.4c.3.1.2.5.3 1 0 0 7.4-1.6 11.7-1.4H17c.2 0 .2 0 0-.4l-1.4-.9c-.7-.3-1.2-.3-2-.5h-2.7l-2.5.3c-.8.1-1.1.4-1.9.6-1.1.2-1.2.3-3 .1-.7 0-1.3-.3-1.7-.9-.3-.3-.3-.6-.4-1a4 4 0 01.2-2c.2-.6.7-1 1.2-1ZM2.4 0c.2 0 .6.4.7.5l1.5.3c.8.2 1.3.2 2 .2l4.2-.6c.5-.1 2.3-.3 3.7.1.8.3 1.8.7 2 1l.5 1 .2 1c0 .6 0 .7-.2 1-.1.2-.4.3-.4.3s0-.8-.9-1-2.5-.5-5-.5l-2.4-.2-2.2-.4c-.4 0-1.2-.2-2-.6-.6-.3-1-.4-1.5-1L2.3.7C2.2.5 2 0 2.4 0Z' transform='translate(0, 0)'/%3E%3C/svg%3E");
	background-color: var(--text-color);
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 20 20'%3E%3Cpath d='M2.8 2.6s1.5 0 1.5.3c.1.2-.9 0-1.4.2-.2.1-.4.3-.4.5.1.3 1.7.7 2.7 1 1.3.2 4.3.2 7 .7 2 .4 4.1.5 5.1 1.2s.8 1 .8 1.7c0 0 1 .3 1.2 1 .6.7-.3 2-.8 2.4-.8.5-3.8-1-3.8-1 .3.7.5 1.3.6 2l.3 1.8c.1.4.4.8 1 1.6 0 0 1 1 1.4 2 .3.5.8.9.6 1.5-.3.7-1.3.5-2 .2-.6-.2-2-1.1-2.6-2.3-.3-.6-.4-1.1-.4-1.6v-2l-.2-1.8-.5-1.6h-1.7l.4 1.6c.4 1.2.4 1.3.4 3.8-.1 2.7-1.3 3-1.7 3-.4 0-3.4-2.6-3.4-2.7v-.3c0-.3-.5-.6-.5-.6l2 .9c.3.2.8 0 .8-1 0-.8 0-1.5.2-2.2v-2.2l-1.4.2-2 .4c-.3 0-.6.4-.6.6-.1.8 0 1.6.5 2.3.2.4.4.8.4 1.4 0 .5-.7 1.6-1.8 3S1.4 20 1.4 20c1-1.1 2.1-2.6 2.8-4 .7-1.3.5-2.4.4-3.1l-.2-1.2s-1.8 1-2.3.9c-.5-.2-1.6-1-1.6-1.4 0-.6 0-1.5.2-1.7.1-.2.5-.2.6-.3l.4-.4c.3.1.2.5.3 1 0 0 7.4-1.6 11.7-1.4H17c.2 0 .2 0 0-.4l-1.4-.9c-.7-.3-1.2-.3-2-.5h-2.7l-2.5.3c-.8.1-1.1.4-1.9.6-1.1.2-1.2.3-3 .1-.7 0-1.3-.3-1.7-.9-.3-.3-.3-.6-.4-1a4 4 0 01.2-2c.2-.6.7-1 1.2-1ZM2.4 0c.2 0 .6.4.7.5l1.5.3c.8.2 1.3.2 2 .2l4.2-.6c.5-.1 2.3-.3 3.7.1.8.3 1.8.7 2 1l.5 1 .2 1c0 .6 0 .7-.2 1-.1.2-.4.3-.4.3s0-.8-.9-1-2.5-.5-5-.5l-2.4-.2-2.2-.4c-.4 0-1.2-.2-2-.6-.6-.3-1-.4-1.5-1L2.3.7C2.2.5 2 0 2.4 0Z' transform='translate(0, 0)'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
}

.kp {
	mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 120 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M120 0L31.5771 47.3297L77.6571 0H52.1143L20.7429 43.5446V0H0V120H20.7429V76.5257L52.1143 120H77.6571L32.7737 74.1583L120 120V97.7143L40.4434 65.7977L120 71.1429V48.8571L40.9474 53.9966L120 22.2857V0Z' fill='%23FF5500'/%3E%3Cdefs%3E%3C/defs%3E%3C/svg%3E");
	background-color: var(--text-color);
	width: 18px;
	height: 22px;
	background-repeat: no-repeat;
	background-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 120 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M120 0L31.5771 47.3297L77.6571 0H52.1143L20.7429 43.5446V0H0V120H20.7429V76.5257L52.1143 120H77.6571L32.7737 74.1583L120 120V97.7143L40.4434 65.7977L120 71.1429V48.8571L40.9474 53.9966L120 22.2857V0Z' fill='%23FF5500'/%3E%3Cdefs%3E%3C/defs%3E%3C/svg%3E");
	-webkit-mask-size: contain;
}

.mdl {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:v='https://svgstorm.com' viewBox='0 0 540 196' width='100' height='37'%3E%3Cg fill='None' fill-opacity='0.0' stroke='%23000000' stroke-opacity='0.01' stroke-width='0.3'%3E%3Cpath d=' M 0.00 196.00 L 2.00 196.00 C 2.00 131.33 2.00 66.67 2.00 2.00 C 17.00 2.00 32.00 2.00 47.00 2.00 C 62.53 31.90 83.25 59.18 98.00 89.00 C 107.80 75.70 116.71 60.98 125.70 46.70 C 134.69 32.42 142.77 17.07 151.00 2.00 C 166.33 2.00 181.67 2.00 197.00 2.00 C 197.00 66.67 197.00 131.33 197.00 196.00 L 231.00 196.00 C 246.04 180.83 260.97 164.13 275.75 149.75 C 290.52 135.36 302.82 117.94 317.25 103.25 C 331.68 88.56 347.73 71.02 362.70 56.70 C 377.66 42.38 387.73 23.33 405.00 11.00 C 406.70 8.80 407.73 5.08 411.00 5.00 C 409.69 6.73 408.38 8.61 407.00 10.00 C 399.15 21.92 393.02 31.51 385.00 41.00 C 393.73 57.94 405.02 79.98 401.67 106.67 C 398.32 133.36 394.69 145.82 379.20 165.25 C 363.71 184.68 343.91 190.14 323.00 196.00 L 462.00 196.00 C 462.00 195.50 462.00 195.00 462.00 195.00 C 449.33 195.00 436.67 195.00 424.00 195.00 C 424.00 130.67 424.00 66.33 424.00 2.00 C 438.20 4.05 453.76 3.11 468.00 2.00 C 468.00 52.33 468.00 102.67 468.00 153.00 C 491.24 152.34 515.20 154.33 538.00 152.00 C 538.00 166.33 538.00 180.67 538.00 195.00 C 522.67 195.00 507.33 195.00 492.00 195.00 C 492.04 195.00 492.00 196.00 492.00 196.00 L 540.00 196.00 L 540.00 0.00 L 0.00 0.00 L 0.00 196.00 M 375.00 31.00 C 364.48 40.11 353.06 46.08 343.00 57.00 C 327.58 41.60 302.74 46.25 274.00 44.00 C 274.66 65.25 272.68 87.20 275.00 108.00 C 258.78 118.48 245.03 131.21 229.00 141.00 C 221.03 131.66 209.31 126.46 200.00 116.00 C 210.14 118.93 212.90 120.40 223.90 123.12 C 234.90 125.84 229.58 105.73 230.00 93.00 C 230.42 80.27 229.78 61.94 230.00 48.00 C 230.22 34.06 229.84 16.29 230.00 2.00 C 287.19 4.88 343.37 -8.25 375.00 31.00 Z'/%3E%3C/g%3E%3Cg fill='None' fill-opacity='0.0' stroke='%23000000' stroke-opacity='0.99' stroke-width='0.3'%3E%3Cpath d=' M 2.00 196.00 L 47.00 196.00 C 47.14 186.64 46.82 177.36 47.00 168.00 C 47.18 158.64 46.66 148.28 47.00 139.00 C 47.34 129.72 46.25 120.02 47.00 111.00 C 47.75 101.98 44.57 91.24 48.00 85.00 C 51.70 92.83 56.13 98.90 60.13 105.92 C 64.13 112.94 69.02 120.10 73.13 126.92 C 77.24 133.73 80.83 140.84 85.71 147.30 C 90.59 153.76 91.69 164.90 102.00 167.00 C 116.88 138.18 135.32 112.83 151.00 84.00 C 155.05 93.59 152.46 107.82 153.00 120.00 C 153.54 132.18 152.72 145.58 153.00 158.00 C 153.28 170.42 152.79 183.52 153.00 196.00 L 197.00 196.00 C 197.00 131.33 197.00 66.67 197.00 2.00 C 181.67 2.00 166.33 2.00 151.00 2.00 C 142.77 17.07 134.69 32.42 125.70 46.70 C 116.71 60.98 107.80 75.70 98.00 89.00 C 83.25 59.18 62.53 31.90 47.00 2.00 C 32.00 2.00 17.00 2.00 2.00 2.00 C 2.00 66.67 2.00 131.33 2.00 196.00 Z'/%3E%3C/g%3E%3Cg fill='None' fill-opacity='0.0' stroke='%23000000' stroke-opacity='0.98' stroke-width='0.3'%3E%3Cpath d=' M 375.00 31.00 C 343.37 -8.25 287.19 4.88 230.00 2.00 C 229.84 16.29 230.22 34.06 230.00 48.00 C 229.78 61.94 230.42 80.27 230.00 93.00 C 229.58 105.73 234.90 125.84 223.90 123.12 C 212.90 120.40 210.14 118.93 200.00 116.00 C 209.31 126.46 221.03 131.66 229.00 141.00 C 245.03 131.21 258.78 118.48 275.00 108.00 C 272.68 87.20 274.66 65.25 274.00 44.00 C 302.74 46.25 327.58 41.60 343.00 57.00 C 353.06 46.08 364.48 40.11 375.00 31.00 Z'/%3E%3C/g%3E%3Cg fill='None' fill-opacity='0.0' stroke='%23000000' stroke-opacity='1.00' stroke-width='0.3'%3E%3Cpath d=' M 462.00 195.00 C 472.00 195.00 482.00 195.00 492.00 195.00 C 507.33 195.00 522.67 195.00 538.00 195.00 C 538.00 180.67 538.00 166.33 538.00 152.00 C 515.20 154.33 491.24 152.34 468.00 153.00 C 468.00 102.67 468.00 52.33 468.00 2.00 C 453.76 3.11 438.20 4.05 424.00 2.00 C 424.00 66.33 424.00 130.67 424.00 195.00 C 436.67 195.00 449.33 195.00 462.00 195.00 Z'/%3E%3C/g%3E%3Cg fill='None' fill-opacity='0.0' stroke='%23000000' stroke-opacity='0.41' stroke-width='0.3'%3E%3Cpath d=' M 405.00 11.00 C 405.53 10.62 406.56 10.38 407.00 10.00 C 408.38 8.61 409.69 6.73 411.00 5.00 C 407.73 5.08 406.70 8.80 405.00 11.00 Z'/%3E%3C/g%3E%3Cg fill='None' fill-opacity='0.0' stroke='%23000000' stroke-opacity='0.98' stroke-width='0.3'%3E%3Cpath d=' M 405.00 11.00 C 387.73 23.33 377.66 42.38 362.70 56.70 C 347.73 71.02 331.68 88.56 317.25 103.25 C 302.82 117.94 290.52 135.36 275.75 149.75 C 260.97 164.13 246.04 180.83 231.00 196.00 L 323.00 196.00 C 343.91 190.14 363.71 184.68 379.20 165.25 C 394.69 145.82 398.32 133.36 401.67 106.67 C 405.02 79.98 393.73 57.94 385.00 41.00 C 393.02 31.51 399.15 21.92 407.00 10.00 C 406.56 10.38 405.53 10.62 405.00 11.00 M 358.00 83.00 C 360.36 102.45 360.42 119.18 350.81 133.25 C 341.20 147.33 324.27 153.64 309.00 155.00 C 325.22 129.61 340.45 107.09 358.00 83.00 Z'/%3E%3C/g%3E%3Cg fill='None' fill-opacity='0.0' stroke='%23000000' stroke-opacity='0.04' stroke-width='0.3'%3E%3Cpath d=' M 358.00 83.00 C 340.45 107.09 325.22 129.61 309.00 155.00 C 324.27 153.64 341.20 147.33 350.81 133.25 C 360.42 119.18 360.36 102.45 358.00 83.00 Z'/%3E%3C/g%3E%3Cg fill='None' fill-opacity='0.0' stroke='%23000000' stroke-opacity='0.02' stroke-width='0.3'%3E%3Cpath d=' M 47.00 196.00 L 153.00 196.00 C 152.79 183.52 153.28 170.42 153.00 158.00 C 152.72 145.58 153.54 132.18 153.00 120.00 C 152.46 107.82 155.05 93.59 151.00 84.00 C 135.32 112.83 116.88 138.18 102.00 167.00 C 91.69 164.90 90.59 153.76 85.71 147.30 C 80.83 140.84 77.24 133.73 73.13 126.92 C 69.02 120.10 64.13 112.94 60.13 105.92 C 56.13 98.90 51.70 92.83 48.00 85.00 C 44.57 91.24 47.75 101.98 47.00 111.00 C 46.25 120.02 47.34 129.72 47.00 139.00 C 46.66 148.28 47.18 158.64 47.00 168.00 C 46.82 177.36 47.14 186.64 47.00 196.00 Z'/%3E%3C/g%3E%3Cg fill='None' fill-opacity='0.0' stroke='%23000000' stroke-opacity='0.18' stroke-width='0.3'%3E%3Cpath d=' M 462.00 196.00 L 492.00 196.00 C 492.00 196.00 492.04 195.00 492.00 195.00 C 482.00 195.00 472.00 195.00 462.00 195.00 C 462.00 195.00 462.00 195.50 462.00 196.00 Z'/%3E%3C/g%3E%3Cg fill='%23000000' fill-opacity='0.01' stroke='None'%3E%3Cpath d=' M 0.00 196.00 L 2.00 196.00 C 2.00 131.33 2.00 66.67 2.00 2.00 C 17.00 2.00 32.00 2.00 47.00 2.00 C 62.53 31.90 83.25 59.18 98.00 89.00 C 107.80 75.70 116.71 60.98 125.70 46.70 C 134.69 32.42 142.77 17.07 151.00 2.00 C 166.33 2.00 181.67 2.00 197.00 2.00 C 197.00 66.67 197.00 131.33 197.00 196.00 L 231.00 196.00 C 246.04 180.83 260.97 164.13 275.75 149.75 C 290.52 135.36 302.82 117.94 317.25 103.25 C 331.68 88.56 347.73 71.02 362.70 56.70 C 377.66 42.38 387.73 23.33 405.00 11.00 C 406.70 8.80 407.73 5.08 411.00 5.00 C 409.69 6.73 408.38 8.61 407.00 10.00 C 399.15 21.92 393.02 31.51 385.00 41.00 C 393.73 57.94 405.02 79.98 401.67 106.67 C 398.32 133.36 394.69 145.82 379.20 165.25 C 363.71 184.68 343.91 190.14 323.00 196.00 L 462.00 196.00 C 462.00 195.50 462.00 195.00 462.00 195.00 C 449.33 195.00 436.67 195.00 424.00 195.00 C 424.00 130.67 424.00 66.33 424.00 2.00 C 438.20 4.05 453.76 3.11 468.00 2.00 C 468.00 52.33 468.00 102.67 468.00 153.00 C 491.24 152.34 515.20 154.33 538.00 152.00 C 538.00 166.33 538.00 180.67 538.00 195.00 C 522.67 195.00 507.33 195.00 492.00 195.00 C 492.04 195.00 492.00 196.00 492.00 196.00 L 540.00 196.00 L 540.00 0.00 L 0.00 0.00 L 0.00 196.00 M 375.00 31.00 C 364.48 40.11 353.06 46.08 343.00 57.00 C 327.58 41.60 302.74 46.25 274.00 44.00 C 274.66 65.25 272.68 87.20 275.00 108.00 C 258.78 118.48 245.03 131.21 229.00 141.00 C 221.03 131.66 209.31 126.46 200.00 116.00 C 210.14 118.93 212.90 120.40 223.90 123.12 C 234.90 125.84 229.58 105.73 230.00 93.00 C 230.42 80.27 229.78 61.94 230.00 48.00 C 230.22 34.06 229.84 16.29 230.00 2.00 C 287.19 4.88 343.37 -8.25 375.00 31.00 Z'/%3E%3C/g%3E%3Cg fill='%23000000' fill-opacity='0.99' stroke='None'%3E%3Cpath d=' M 2.00 196.00 L 47.00 196.00 C 47.14 186.64 46.82 177.36 47.00 168.00 C 47.18 158.64 46.66 148.28 47.00 139.00 C 47.34 129.72 46.25 120.02 47.00 111.00 C 47.75 101.98 44.57 91.24 48.00 85.00 C 51.70 92.83 56.13 98.90 60.13 105.92 C 64.13 112.94 69.02 120.10 73.13 126.92 C 77.24 133.73 80.83 140.84 85.71 147.30 C 90.59 153.76 91.69 164.90 102.00 167.00 C 116.88 138.18 135.32 112.83 151.00 84.00 C 155.05 93.59 152.46 107.82 153.00 120.00 C 153.54 132.18 152.72 145.58 153.00 158.00 C 153.28 170.42 152.79 183.52 153.00 196.00 L 197.00 196.00 C 197.00 131.33 197.00 66.67 197.00 2.00 C 181.67 2.00 166.33 2.00 151.00 2.00 C 142.77 17.07 134.69 32.42 125.70 46.70 C 116.71 60.98 107.80 75.70 98.00 89.00 C 83.25 59.18 62.53 31.90 47.00 2.00 C 32.00 2.00 17.00 2.00 2.00 2.00 C 2.00 66.67 2.00 131.33 2.00 196.00 Z'/%3E%3C/g%3E%3Cg fill='%23000000' fill-opacity='0.98' stroke='None'%3E%3Cpath d=' M 375.00 31.00 C 343.37 -8.25 287.19 4.88 230.00 2.00 C 229.84 16.29 230.22 34.06 230.00 48.00 C 229.78 61.94 230.42 80.27 230.00 93.00 C 229.58 105.73 234.90 125.84 223.90 123.12 C 212.90 120.40 210.14 118.93 200.00 116.00 C 209.31 126.46 221.03 131.66 229.00 141.00 C 245.03 131.21 258.78 118.48 275.00 108.00 C 272.68 87.20 274.66 65.25 274.00 44.00 C 302.74 46.25 327.58 41.60 343.00 57.00 C 353.06 46.08 364.48 40.11 375.00 31.00 Z'/%3E%3C/g%3E%3Cg fill='%23000000' fill-opacity='1.00' stroke='None'%3E%3Cpath d=' M 462.00 195.00 C 472.00 195.00 482.00 195.00 492.00 195.00 C 507.33 195.00 522.67 195.00 538.00 195.00 C 538.00 180.67 538.00 166.33 538.00 152.00 C 515.20 154.33 491.24 152.34 468.00 153.00 C 468.00 102.67 468.00 52.33 468.00 2.00 C 453.76 3.11 438.20 4.05 424.00 2.00 C 424.00 66.33 424.00 130.67 424.00 195.00 C 436.67 195.00 449.33 195.00 462.00 195.00 Z'/%3E%3C/g%3E%3Cg fill='%23000000' fill-opacity='0.41' stroke='None'%3E%3Cpath d=' M 405.00 11.00 C 405.53 10.62 406.56 10.38 407.00 10.00 C 408.38 8.61 409.69 6.73 411.00 5.00 C 407.73 5.08 406.70 8.80 405.00 11.00 Z'/%3E%3C/g%3E%3Cg fill='%23000000' fill-opacity='0.98' stroke='None'%3E%3Cpath d=' M 405.00 11.00 C 387.73 23.33 377.66 42.38 362.70 56.70 C 347.73 71.02 331.68 88.56 317.25 103.25 C 302.82 117.94 290.52 135.36 275.75 149.75 C 260.97 164.13 246.04 180.83 231.00 196.00 L 323.00 196.00 C 343.91 190.14 363.71 184.68 379.20 165.25 C 394.69 145.82 398.32 133.36 401.67 106.67 C 405.02 79.98 393.73 57.94 385.00 41.00 C 393.02 31.51 399.15 21.92 407.00 10.00 C 406.56 10.38 405.53 10.62 405.00 11.00 M 358.00 83.00 C 360.36 102.45 360.42 119.18 350.81 133.25 C 341.20 147.33 324.27 153.64 309.00 155.00 C 325.22 129.61 340.45 107.09 358.00 83.00 Z'/%3E%3C/g%3E%3Cg fill='%23000000' fill-opacity='0.04' stroke='None'%3E%3Cpath d=' M 358.00 83.00 C 340.45 107.09 325.22 129.61 309.00 155.00 C 324.27 153.64 341.20 147.33 350.81 133.25 C 360.42 119.18 360.36 102.45 358.00 83.00 Z'/%3E%3C/g%3E%3Cg fill='%23000000' fill-opacity='0.02' stroke='None'%3E%3Cpath d=' M 47.00 196.00 L 153.00 196.00 C 152.79 183.52 153.28 170.42 153.00 158.00 C 152.72 145.58 153.54 132.18 153.00 120.00 C 152.46 107.82 155.05 93.59 151.00 84.00 C 135.32 112.83 116.88 138.18 102.00 167.00 C 91.69 164.90 90.59 153.76 85.71 147.30 C 80.83 140.84 77.24 133.73 73.13 126.92 C 69.02 120.10 64.13 112.94 60.13 105.92 C 56.13 98.90 51.70 92.83 48.00 85.00 C 44.57 91.24 47.75 101.98 47.00 111.00 C 46.25 120.02 47.34 129.72 47.00 139.00 C 46.66 148.28 47.18 158.64 47.00 168.00 C 46.82 177.36 47.14 186.64 47.00 196.00 Z'/%3E%3C/g%3E%3Cg fill='%23000000' fill-opacity='0.18' stroke='None'%3E%3Cpath d=' M 462.00 196.00 L 492.00 196.00 C 492.00 196.00 492.04 195.00 492.00 195.00 C 482.00 195.00 472.00 195.00 462.00 195.00 C 462.00 195.00 462.00 195.50 462.00 196.00 Z'/%3E%3C/g%3E%3C/svg%3E");
	background-color: var(--text-color);
	width: 30px;
	height: 11px;
	background-repeat: no-repeat;
	background-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:v='https://svgstorm.com' viewBox='0 0 540 196' width='100' height='37'%3E%3Cg fill='None' fill-opacity='0.0' stroke='%23000000' stroke-opacity='0.01' stroke-width='0.3'%3E%3Cpath d=' M 0.00 196.00 L 2.00 196.00 C 2.00 131.33 2.00 66.67 2.00 2.00 C 17.00 2.00 32.00 2.00 47.00 2.00 C 62.53 31.90 83.25 59.18 98.00 89.00 C 107.80 75.70 116.71 60.98 125.70 46.70 C 134.69 32.42 142.77 17.07 151.00 2.00 C 166.33 2.00 181.67 2.00 197.00 2.00 C 197.00 66.67 197.00 131.33 197.00 196.00 L 231.00 196.00 C 246.04 180.83 260.97 164.13 275.75 149.75 C 290.52 135.36 302.82 117.94 317.25 103.25 C 331.68 88.56 347.73 71.02 362.70 56.70 C 377.66 42.38 387.73 23.33 405.00 11.00 C 406.70 8.80 407.73 5.08 411.00 5.00 C 409.69 6.73 408.38 8.61 407.00 10.00 C 399.15 21.92 393.02 31.51 385.00 41.00 C 393.73 57.94 405.02 79.98 401.67 106.67 C 398.32 133.36 394.69 145.82 379.20 165.25 C 363.71 184.68 343.91 190.14 323.00 196.00 L 462.00 196.00 C 462.00 195.50 462.00 195.00 462.00 195.00 C 449.33 195.00 436.67 195.00 424.00 195.00 C 424.00 130.67 424.00 66.33 424.00 2.00 C 438.20 4.05 453.76 3.11 468.00 2.00 C 468.00 52.33 468.00 102.67 468.00 153.00 C 491.24 152.34 515.20 154.33 538.00 152.00 C 538.00 166.33 538.00 180.67 538.00 195.00 C 522.67 195.00 507.33 195.00 492.00 195.00 C 492.04 195.00 492.00 196.00 492.00 196.00 L 540.00 196.00 L 540.00 0.00 L 0.00 0.00 L 0.00 196.00 M 375.00 31.00 C 364.48 40.11 353.06 46.08 343.00 57.00 C 327.58 41.60 302.74 46.25 274.00 44.00 C 274.66 65.25 272.68 87.20 275.00 108.00 C 258.78 118.48 245.03 131.21 229.00 141.00 C 221.03 131.66 209.31 126.46 200.00 116.00 C 210.14 118.93 212.90 120.40 223.90 123.12 C 234.90 125.84 229.58 105.73 230.00 93.00 C 230.42 80.27 229.78 61.94 230.00 48.00 C 230.22 34.06 229.84 16.29 230.00 2.00 C 287.19 4.88 343.37 -8.25 375.00 31.00 Z'/%3E%3C/g%3E%3Cg fill='None' fill-opacity='0.0' stroke='%23000000' stroke-opacity='0.99' stroke-width='0.3'%3E%3Cpath d=' M 2.00 196.00 L 47.00 196.00 C 47.14 186.64 46.82 177.36 47.00 168.00 C 47.18 158.64 46.66 148.28 47.00 139.00 C 47.34 129.72 46.25 120.02 47.00 111.00 C 47.75 101.98 44.57 91.24 48.00 85.00 C 51.70 92.83 56.13 98.90 60.13 105.92 C 64.13 112.94 69.02 120.10 73.13 126.92 C 77.24 133.73 80.83 140.84 85.71 147.30 C 90.59 153.76 91.69 164.90 102.00 167.00 C 116.88 138.18 135.32 112.83 151.00 84.00 C 155.05 93.59 152.46 107.82 153.00 120.00 C 153.54 132.18 152.72 145.58 153.00 158.00 C 153.28 170.42 152.79 183.52 153.00 196.00 L 197.00 196.00 C 197.00 131.33 197.00 66.67 197.00 2.00 C 181.67 2.00 166.33 2.00 151.00 2.00 C 142.77 17.07 134.69 32.42 125.70 46.70 C 116.71 60.98 107.80 75.70 98.00 89.00 C 83.25 59.18 62.53 31.90 47.00 2.00 C 32.00 2.00 17.00 2.00 2.00 2.00 C 2.00 66.67 2.00 131.33 2.00 196.00 Z'/%3E%3C/g%3E%3Cg fill='None' fill-opacity='0.0' stroke='%23000000' stroke-opacity='0.98' stroke-width='0.3'%3E%3Cpath d=' M 375.00 31.00 C 343.37 -8.25 287.19 4.88 230.00 2.00 C 229.84 16.29 230.22 34.06 230.00 48.00 C 229.78 61.94 230.42 80.27 230.00 93.00 C 229.58 105.73 234.90 125.84 223.90 123.12 C 212.90 120.40 210.14 118.93 200.00 116.00 C 209.31 126.46 221.03 131.66 229.00 141.00 C 245.03 131.21 258.78 118.48 275.00 108.00 C 272.68 87.20 274.66 65.25 274.00 44.00 C 302.74 46.25 327.58 41.60 343.00 57.00 C 353.06 46.08 364.48 40.11 375.00 31.00 Z'/%3E%3C/g%3E%3Cg fill='None' fill-opacity='0.0' stroke='%23000000' stroke-opacity='1.00' stroke-width='0.3'%3E%3Cpath d=' M 462.00 195.00 C 472.00 195.00 482.00 195.00 492.00 195.00 C 507.33 195.00 522.67 195.00 538.00 195.00 C 538.00 180.67 538.00 166.33 538.00 152.00 C 515.20 154.33 491.24 152.34 468.00 153.00 C 468.00 102.67 468.00 52.33 468.00 2.00 C 453.76 3.11 438.20 4.05 424.00 2.00 C 424.00 66.33 424.00 130.67 424.00 195.00 C 436.67 195.00 449.33 195.00 462.00 195.00 Z'/%3E%3C/g%3E%3Cg fill='None' fill-opacity='0.0' stroke='%23000000' stroke-opacity='0.41' stroke-width='0.3'%3E%3Cpath d=' M 405.00 11.00 C 405.53 10.62 406.56 10.38 407.00 10.00 C 408.38 8.61 409.69 6.73 411.00 5.00 C 407.73 5.08 406.70 8.80 405.00 11.00 Z'/%3E%3C/g%3E%3Cg fill='None' fill-opacity='0.0' stroke='%23000000' stroke-opacity='0.98' stroke-width='0.3'%3E%3Cpath d=' M 405.00 11.00 C 387.73 23.33 377.66 42.38 362.70 56.70 C 347.73 71.02 331.68 88.56 317.25 103.25 C 302.82 117.94 290.52 135.36 275.75 149.75 C 260.97 164.13 246.04 180.83 231.00 196.00 L 323.00 196.00 C 343.91 190.14 363.71 184.68 379.20 165.25 C 394.69 145.82 398.32 133.36 401.67 106.67 C 405.02 79.98 393.73 57.94 385.00 41.00 C 393.02 31.51 399.15 21.92 407.00 10.00 C 406.56 10.38 405.53 10.62 405.00 11.00 M 358.00 83.00 C 360.36 102.45 360.42 119.18 350.81 133.25 C 341.20 147.33 324.27 153.64 309.00 155.00 C 325.22 129.61 340.45 107.09 358.00 83.00 Z'/%3E%3C/g%3E%3Cg fill='None' fill-opacity='0.0' stroke='%23000000' stroke-opacity='0.04' stroke-width='0.3'%3E%3Cpath d=' M 358.00 83.00 C 340.45 107.09 325.22 129.61 309.00 155.00 C 324.27 153.64 341.20 147.33 350.81 133.25 C 360.42 119.18 360.36 102.45 358.00 83.00 Z'/%3E%3C/g%3E%3Cg fill='None' fill-opacity='0.0' stroke='%23000000' stroke-opacity='0.02' stroke-width='0.3'%3E%3Cpath d=' M 47.00 196.00 L 153.00 196.00 C 152.79 183.52 153.28 170.42 153.00 158.00 C 152.72 145.58 153.54 132.18 153.00 120.00 C 152.46 107.82 155.05 93.59 151.00 84.00 C 135.32 112.83 116.88 138.18 102.00 167.00 C 91.69 164.90 90.59 153.76 85.71 147.30 C 80.83 140.84 77.24 133.73 73.13 126.92 C 69.02 120.10 64.13 112.94 60.13 105.92 C 56.13 98.90 51.70 92.83 48.00 85.00 C 44.57 91.24 47.75 101.98 47.00 111.00 C 46.25 120.02 47.34 129.72 47.00 139.00 C 46.66 148.28 47.18 158.64 47.00 168.00 C 46.82 177.36 47.14 186.64 47.00 196.00 Z'/%3E%3C/g%3E%3Cg fill='None' fill-opacity='0.0' stroke='%23000000' stroke-opacity='0.18' stroke-width='0.3'%3E%3Cpath d=' M 462.00 196.00 L 492.00 196.00 C 492.00 196.00 492.04 195.00 492.00 195.00 C 482.00 195.00 472.00 195.00 462.00 195.00 C 462.00 195.00 462.00 195.50 462.00 196.00 Z'/%3E%3C/g%3E%3Cg fill='%23000000' fill-opacity='0.01' stroke='None'%3E%3Cpath d=' M 0.00 196.00 L 2.00 196.00 C 2.00 131.33 2.00 66.67 2.00 2.00 C 17.00 2.00 32.00 2.00 47.00 2.00 C 62.53 31.90 83.25 59.18 98.00 89.00 C 107.80 75.70 116.71 60.98 125.70 46.70 C 134.69 32.42 142.77 17.07 151.00 2.00 C 166.33 2.00 181.67 2.00 197.00 2.00 C 197.00 66.67 197.00 131.33 197.00 196.00 L 231.00 196.00 C 246.04 180.83 260.97 164.13 275.75 149.75 C 290.52 135.36 302.82 117.94 317.25 103.25 C 331.68 88.56 347.73 71.02 362.70 56.70 C 377.66 42.38 387.73 23.33 405.00 11.00 C 406.70 8.80 407.73 5.08 411.00 5.00 C 409.69 6.73 408.38 8.61 407.00 10.00 C 399.15 21.92 393.02 31.51 385.00 41.00 C 393.73 57.94 405.02 79.98 401.67 106.67 C 398.32 133.36 394.69 145.82 379.20 165.25 C 363.71 184.68 343.91 190.14 323.00 196.00 L 462.00 196.00 C 462.00 195.50 462.00 195.00 462.00 195.00 C 449.33 195.00 436.67 195.00 424.00 195.00 C 424.00 130.67 424.00 66.33 424.00 2.00 C 438.20 4.05 453.76 3.11 468.00 2.00 C 468.00 52.33 468.00 102.67 468.00 153.00 C 491.24 152.34 515.20 154.33 538.00 152.00 C 538.00 166.33 538.00 180.67 538.00 195.00 C 522.67 195.00 507.33 195.00 492.00 195.00 C 492.04 195.00 492.00 196.00 492.00 196.00 L 540.00 196.00 L 540.00 0.00 L 0.00 0.00 L 0.00 196.00 M 375.00 31.00 C 364.48 40.11 353.06 46.08 343.00 57.00 C 327.58 41.60 302.74 46.25 274.00 44.00 C 274.66 65.25 272.68 87.20 275.00 108.00 C 258.78 118.48 245.03 131.21 229.00 141.00 C 221.03 131.66 209.31 126.46 200.00 116.00 C 210.14 118.93 212.90 120.40 223.90 123.12 C 234.90 125.84 229.58 105.73 230.00 93.00 C 230.42 80.27 229.78 61.94 230.00 48.00 C 230.22 34.06 229.84 16.29 230.00 2.00 C 287.19 4.88 343.37 -8.25 375.00 31.00 Z'/%3E%3C/g%3E%3Cg fill='%23000000' fill-opacity='0.99' stroke='None'%3E%3Cpath d=' M 2.00 196.00 L 47.00 196.00 C 47.14 186.64 46.82 177.36 47.00 168.00 C 47.18 158.64 46.66 148.28 47.00 139.00 C 47.34 129.72 46.25 120.02 47.00 111.00 C 47.75 101.98 44.57 91.24 48.00 85.00 C 51.70 92.83 56.13 98.90 60.13 105.92 C 64.13 112.94 69.02 120.10 73.13 126.92 C 77.24 133.73 80.83 140.84 85.71 147.30 C 90.59 153.76 91.69 164.90 102.00 167.00 C 116.88 138.18 135.32 112.83 151.00 84.00 C 155.05 93.59 152.46 107.82 153.00 120.00 C 153.54 132.18 152.72 145.58 153.00 158.00 C 153.28 170.42 152.79 183.52 153.00 196.00 L 197.00 196.00 C 197.00 131.33 197.00 66.67 197.00 2.00 C 181.67 2.00 166.33 2.00 151.00 2.00 C 142.77 17.07 134.69 32.42 125.70 46.70 C 116.71 60.98 107.80 75.70 98.00 89.00 C 83.25 59.18 62.53 31.90 47.00 2.00 C 32.00 2.00 17.00 2.00 2.00 2.00 C 2.00 66.67 2.00 131.33 2.00 196.00 Z'/%3E%3C/g%3E%3Cg fill='%23000000' fill-opacity='0.98' stroke='None'%3E%3Cpath d=' M 375.00 31.00 C 343.37 -8.25 287.19 4.88 230.00 2.00 C 229.84 16.29 230.22 34.06 230.00 48.00 C 229.78 61.94 230.42 80.27 230.00 93.00 C 229.58 105.73 234.90 125.84 223.90 123.12 C 212.90 120.40 210.14 118.93 200.00 116.00 C 209.31 126.46 221.03 131.66 229.00 141.00 C 245.03 131.21 258.78 118.48 275.00 108.00 C 272.68 87.20 274.66 65.25 274.00 44.00 C 302.74 46.25 327.58 41.60 343.00 57.00 C 353.06 46.08 364.48 40.11 375.00 31.00 Z'/%3E%3C/g%3E%3Cg fill='%23000000' fill-opacity='1.00' stroke='None'%3E%3Cpath d=' M 462.00 195.00 C 472.00 195.00 482.00 195.00 492.00 195.00 C 507.33 195.00 522.67 195.00 538.00 195.00 C 538.00 180.67 538.00 166.33 538.00 152.00 C 515.20 154.33 491.24 152.34 468.00 153.00 C 468.00 102.67 468.00 52.33 468.00 2.00 C 453.76 3.11 438.20 4.05 424.00 2.00 C 424.00 66.33 424.00 130.67 424.00 195.00 C 436.67 195.00 449.33 195.00 462.00 195.00 Z'/%3E%3C/g%3E%3Cg fill='%23000000' fill-opacity='0.41' stroke='None'%3E%3Cpath d=' M 405.00 11.00 C 405.53 10.62 406.56 10.38 407.00 10.00 C 408.38 8.61 409.69 6.73 411.00 5.00 C 407.73 5.08 406.70 8.80 405.00 11.00 Z'/%3E%3C/g%3E%3Cg fill='%23000000' fill-opacity='0.98' stroke='None'%3E%3Cpath d=' M 405.00 11.00 C 387.73 23.33 377.66 42.38 362.70 56.70 C 347.73 71.02 331.68 88.56 317.25 103.25 C 302.82 117.94 290.52 135.36 275.75 149.75 C 260.97 164.13 246.04 180.83 231.00 196.00 L 323.00 196.00 C 343.91 190.14 363.71 184.68 379.20 165.25 C 394.69 145.82 398.32 133.36 401.67 106.67 C 405.02 79.98 393.73 57.94 385.00 41.00 C 393.02 31.51 399.15 21.92 407.00 10.00 C 406.56 10.38 405.53 10.62 405.00 11.00 M 358.00 83.00 C 360.36 102.45 360.42 119.18 350.81 133.25 C 341.20 147.33 324.27 153.64 309.00 155.00 C 325.22 129.61 340.45 107.09 358.00 83.00 Z'/%3E%3C/g%3E%3Cg fill='%23000000' fill-opacity='0.04' stroke='None'%3E%3Cpath d=' M 358.00 83.00 C 340.45 107.09 325.22 129.61 309.00 155.00 C 324.27 153.64 341.20 147.33 350.81 133.25 C 360.42 119.18 360.36 102.45 358.00 83.00 Z'/%3E%3C/g%3E%3Cg fill='%23000000' fill-opacity='0.02' stroke='None'%3E%3Cpath d=' M 47.00 196.00 L 153.00 196.00 C 152.79 183.52 153.28 170.42 153.00 158.00 C 152.72 145.58 153.54 132.18 153.00 120.00 C 152.46 107.82 155.05 93.59 151.00 84.00 C 135.32 112.83 116.88 138.18 102.00 167.00 C 91.69 164.90 90.59 153.76 85.71 147.30 C 80.83 140.84 77.24 133.73 73.13 126.92 C 69.02 120.10 64.13 112.94 60.13 105.92 C 56.13 98.90 51.70 92.83 48.00 85.00 C 44.57 91.24 47.75 101.98 47.00 111.00 C 46.25 120.02 47.34 129.72 47.00 139.00 C 46.66 148.28 47.18 158.64 47.00 168.00 C 46.82 177.36 47.14 186.64 47.00 196.00 Z'/%3E%3C/g%3E%3Cg fill='%23000000' fill-opacity='0.18' stroke='None'%3E%3Cpath d=' M 462.00 196.00 L 492.00 196.00 C 492.00 196.00 492.04 195.00 492.00 195.00 C 482.00 195.00 472.00 195.00 462.00 195.00 C 462.00 195.00 462.00 195.50 462.00 196.00 Z'/%3E%3C/g%3E%3C/svg%3E");
	-webkit-mask-size: contain;
}

/* ===== SCREENSHOTS COMPONENT ===== */
.screenshots {
	margin: 20px 0;
}

.screenshots-container {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-top: 20px;
}

.screenshots-container img {
	width: calc(25% - 12px);
	max-width: 100%;
	height: 150px;
	border-radius: 5px;
	object-fit: cover;
}

@media (max-width: 600px) {
	.screenshots-container img {
		width: calc(50% - 8px);
		max-width: none;
	}
}

/* ===== PLAYER COMPONENT ===== */


.player {
	height: 60vh;
	display: block;
	padding: 20px;
	margin-bottom: 80px;
}

.player iframe {
	width: 100%;
	height: 60vh;
	border-radius: 10px;
}

.player-tab {
	display: inline-flex;
	padding: 10px 12px;
	border: 0;
	border-radius: 7px;
	font-size: 16px;
	cursor: pointer;
	background-color: #8a8a8a52;
	color: var(--text-color);
}

.player-tab:hover {
	background: #0000009c;
}

.player-tab-active {
	background-color: #ff5454;
	color: #fff;
}

@media (width <=768px) {

	.player,
	.player iframe {
		height: 30vh;
	}

	.player {
		padding: 15px;
	}
}

/* Кнопка открытия полноэкранного плеера */
.open-player-btn {
	width: 100%;
	padding: 12px;
	background-color: #ed4856;
	color: #ffe0e0;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	cursor: pointer;
	margin-top: 10px;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	animation: SectionShow 0.5s ease-in-out;
}

.open-player-btn:hover {
	opacity: .7;
}

.open-player-btn i {
	font-size: 20px;
}


/* ===== BOOKMARK DROPDOWN COMPONENT ===== */
.btns-flex {
	display: flex;
	gap: 7px;
}

.bookmark-dropdown {
	position: relative;
	margin-top: 10px;
}

.bookmark-dropdown-btn {
	width: 100%;
	padding: 12px;
	background: var(--bookmark-button-background);
	border: 0;
	border-radius: 8px;
	color: var(--bookmark-button-color);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	transition: all 0.3s ease;
	font-size: 16px;
	animation: SectionShow 0.5s ease-in-out;
}

.bookmark-dropdown-btn:hover {
	opacity: .7;
}

.bookmark-menu-item {
	width: 100%;
	padding: 7px 10px;
	background: none;
	border: none;
	color: var(--text-color);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	text-align: left;
	font-size: 14px;
	border-radius: 5px;
}

.bookmark-menu-item:hover {
	background: var(--main-btn-hover-background);
}

.bookmark-menu-item.active {
	background: #ED4856;
	color: white;
}

.bookmark-menu-item.danger {
	color: var(--error-color);
}

.bookmark-menu-item.danger:hover {
	background: var(--error-background);
	color: var(--error-color);
}

/* ===== SEARCH COMPONENT ===== */
.search__box {
	display: none;
	position: fixed;
	top: 40%;
	width: 100%;
	padding: 20px;
	z-index: 100;
	align-content: center;
	left: 50%;
	max-width: 1000px;
	transform: translate(-50%);
}

.search__box.active {
	display: flex;
}

.search__input,
.search__btn {
	border: 0;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	outline: none;
}

.search__input {
	padding: 15px;
	background-color: var(--search-input-background);
	color: var(--search-input-color);
	width: 100%;
	border-radius: 7px 0 0 7px;
}

.search__btn {
	cursor: pointer;
	background-color: var(--search-btn-background);
	color: var(--search-btn-color);
	width: 45px;
	font-size: 20px;
	border-radius: 0 7px 7px 0;
	padding: 12.5px;
}

/* ===== FILTERS COMPONENT ===== */
.filters-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 15px;
	align-items: flex-end;
	margin: 25px 0;
	animation: SectionShow 0.5s ease-in-out;
}

.filter-group {
	min-width: 180px;
}

.filter-group label {
	font-size: 12px;
	font-weight: 500;
	color: var(--secondary-text-color);
	text-transform: uppercase;
}

.filter-group select {
	padding: 10px 12px;
	border: 0;
	border-radius: 8px;
	background: var(--header-background-color);
	color: var(--text-color);
	font-size: 16px;
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
	padding-right: 40px;
}

/* Адаптивные стили */
@media (max-width: 768px) {
	.filters-container {
		align-items: end;
		gap: 15px;
		grid-template-columns: 1fr 1fr;
	}

	.filter-group {
		min-width: 158px;
	}

	.filter-group select {
		width: 100%;
	}
}

@media (max-width: 480px) {
	.filters-container {
		gap: 12px;
		grid-template-columns: 1fr 1fr;
	}

	.filter-group select {
		padding: 12px;
		font-size: 16px;
		text-overflow: ellipsis;
	}
}

/* ===== BOOKMARKS COMPONENT ===== */
.bookmarks-tabs {
	display: flex;
	gap: 7px;
	margin: 20px 0;
	flex-wrap: wrap;
	animation: SectionShow 0.5s ease-in-out;
}

.bookmark-tab {
	padding: 7px 10px;
	background: var(--header-background-color);
	border: 1px solid var(--border-color);
	border-radius: 8px;
	color: var(--text-color);
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}

.bookmark-tab:hover {
	opacity: .7;
}

.bookmark-tab.active {
	background: #ed4856;
	color: white;
	border-color: #ed4856;
	pointer-events: none;
}

.bookmark-tab.active:hover {
	opacity: 1;
}

.bookmarks-info {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.bookmarks-count {
	color: var(--text-color);
	font-size: 16px;
}

.bookmark-item {
	position: relative;
}

.anime-block-wrapper {
	position: relative;
	display: block;
	animation: SectionShow .5s ease-in-out;
}

.bookmark-menu {
	position: absolute;
	top: 50%;
	right: 7px;
	z-index: 1;
	transform: translate(0, -50%);
}

.search-field-container {
	margin: 20px 0;
	width: 100%;
}

.search-field {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--card-bg);
	border-radius: 8px;
	padding: 8px 12px;
	border: 1px solid var(--border-color);
}

.search-field i {
	color: var(--text-secondary);
	margin-right: 8px;
	font-size: 18px;
}

.search-input {
	flex: 1;
	border: none;
	background: transparent;
	color: var(--text-primary);
	font-size: 14px;
	outline: none;
}

.search-input::placeholder {
	color: var(--text-secondary);
}

.clear-search-btn {
	background: none;
	border: none;
	color: var(--text-secondary);
	cursor: pointer;
	padding: 4px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	right: 0;
}

.clear-search-btn:hover {
	background: var(--hover-bg);
	color: var(--text-primary);
}

.menu-btn {
	background: transparent;
	border: none;
	height: 32px;
	width: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--text-color);
	cursor: pointer;
}

.context-menu {
	position: absolute;
	top: -100%;
	right: 28px;
	background: var(--anime-block-background-color);
	border-radius: 7px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	min-width: 200px;
	z-index: 1000;
	margin-top: 5px;
	padding: 7px;
}

.menu-section {
	margin-bottom: 5px;
	padding-bottom: 5px;
	display: grid;
	gap: 5px;
}

.menu-section-title {
	font-size: 11px;
	color: var(--secondary-text-color);
	padding: 5px 15px;
	text-transform: uppercase;
	font-weight: 600;
}

.menu-item {
	width: 100%;
	padding: 7px 10px;
	border: none;
	background: none;
	text-align: left;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--text-color);
	font-size: 14px;
	border-radius: 5px;
}

.menu-item:hover {
	background: var(--main-btn-hover-background);
}

.menu-item.active {
	background: var(--loading-indicator-color);
	color: #fff;
}

.menu-item.danger {
	color: var(--danger-color);
}

.menu-item.danger:hover {
	background: var(--danger-color);
	color: white;
}

.bookmark-category {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	color: var(--secondary-text-color);
	margin-top: 5px;
}

.viewed-date {
	color: var(--secondary-text-color);
	font-size: 14px;
}

/* Адаптивные стили */
@media (max-width: 768px) {
	.bookmarks-tabs {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

	.bookmarks-info {
		flex-direction: row;
	}
}

/* ===== HISTORY COMPONENT ===== */
.sort-options {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;
	animation: SectionShow .5s ease-in-out;
}

.sort-options .filter-group {
	min-width: 160px;
}

.sort-options .btn {
	padding: 10px 12px;
	font-size: 16px;
	border: 0;
	border-radius: 5px;
	background-color: #86868633;
	color: var(--text-color);
	cursor: pointer;
}

.sort-options .btn:hover {
	opacity: .7;
}

.sort-options span {
	margin-right: 5px;
	color: var(--text-color);
}

/* ===== AUTH COMPONENTS ===== */
.auth {
	display: grid;
	width: max-content;
	margin: auto;
	justify-items: center;
	grid-gap: 15px;
}

.auth .main__title,
.auth .main__subtitle {
	text-align: center;
}

.auth-form {
	display: grid;
	grid-gap: 5px;
}

.auth-form input {
	display: block;
	padding: 10px;
	font-size: 16px;
	border: 0;
	border-radius: 7px;
	font-family: 'Roboto', sans-serif;
	background-color: #86868621;
	color: var(--text-color);
	outline: none;
}

.auth-form button {
	display: block;
	padding: 10px;
	border: 0;
	border-radius: 7px;
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
	background-color: #ff5454;
	color: #fff;
	cursor: pointer;
}

.auth-form button:hover {
	opacity: .7;
}

.auth-form .link-btn {
	display: flex;
	width: max-content;
	color: var(--text-color);
	justify-self: center;
}

.profile-details {
	display: grid;
	margin-top: 20px;
	grid-gap: 5px;
	animation: SectionShow 0.5s ease-in-out;
}

.profile-details .btn {
	display: flex;
	border: 0;
	border-radius: 7px;
	padding: 10px;
	font-size: 16px;
	margin-top: 20px;
	width: max-content;
	cursor: pointer;
}

.profile-details .btn:hover {
	opacity: .7;
}

/* ===== UTILITY STYLES ===== */
/* Loading Indicator */
.loading-indicator {
	width: 0%;
	height: 3px;
	border-radius: 2px;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	background: currentColor;
	color: var(--loading-indicator-color);
	box-sizing: border-box;
	animation: progress-simple 1s ease-in-out infinite;
	z-index: 9999;
	transform: none;
	margin: 0;
}

/* Убираем псевдоэлементы */
.loading-indicator::after,
.loading-indicator::before {
	content: none;
}

@keyframes progress-simple {
	0% {
		width: 0%;
	}

	50% {
		width: 60%;
	}

	100% {
		width: 100%;
	}
}

/* Error States */
.error {
	display: block;
	padding: 10px;
	background-color: var(--error-background);
	margin: 20px 0;
	text-align: center;
	border-radius: 7px;
	color: var(--error-color);
}

.error-message {
	color: var(--danger-color);
	text-align: center;
	padding: 10px;
	background-color: rgba(255, 71, 87, 0.1);
	border-radius: 5px;
}

.success-message {
	color: var(--success-color);
	text-align: center;
	padding: 10px;
	background-color: rgba(66, 185, 131, 0.1);
	border-radius: 5px;
}

/* Buttons */
.btn {
	padding: 10px 12px;
	font-size: 16px;
	border: 0;
	border-radius: 5px;
	background-color: #86868633;
	color: var(--text-color);
	cursor: pointer;
}

.btn:hover {
	opacity: .7;
}

.btn.small {
	padding: 10px 20px;
	background: var(--error-background);
	color: var(--error-color);
	border: none;
	border-radius: 8px;
	font-size: 16px;
	cursor: pointer;
	height: fit-content;
	white-space: nowrap;
}

.btn.small:hover {
	opacity: .7;
}

.btn.danger {
	background-color: #ff555575 !important;
	color: #e66969 !important;
}

/* Bookmark Button */
.bookmark-button {
	background-color: var(--bookmark-button-background);
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 16px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--bookmark-button-color);
	justify-content: center;
	padding: 10px;
	margin-top: 10px;
	width: 100%;
}

.bookmark-button:hover {
	background-color: #ffdcb8;
}

/* Loading States */
.bookmark-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* Vue Transitions */
.fade-enter-active {
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.fade-enter-from {
	opacity: 0;
	transform: translateY(-10px);
}

.fade-enter-to {
	opacity: 1;
	transform: translateY(0);
}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--search-box-background);
	z-index: 99;
	backdrop-filter: blur(10px);
}

.remember-me {
	margin: 15px 0;
	text-align: left;
}

.checkbox-label {
	display: flex;
	align-items: center;
	cursor: pointer;
	font-size: 14px;
	color: var(--text-color);
	user-select: none;
}

.checkbox-label input[type="checkbox"] {
	display: none;
}

.checkmark {
	width: 18px;
	height: 18px;
	border: 0;
	border-radius: 3px;
	margin-right: 8px;
	position: relative;
	transition: all 0.3s ease;
	background: #86868621;
}

.checkbox-label input[type="checkbox"]:checked+.checkmark {
	background-color: #ff5454;
	border-color: #ff5454;
}

.checkbox-label input[type="checkbox"]:checked+.checkmark::after {
	content: '';
	position: absolute;
	left: 6px;
	top: 3px;
	width: 4px;
	height: 8px;
	border: solid white;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.checkbox-label:hover .checkmark {
	border-color: #ff5454;
}

.btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.auth-form {
	max-width: 330px;
	margin: 0 auto;
	width: 100vw;
}

.auth-form input {
	width: 100%;
	padding: 12px;
	border: 0;
	border-radius: 7px;
	box-sizing: border-box;
}

.auth-form .btn {
	width: 100%;
	padding: 12px;
	margin: 16px 0;
}

.success-message {
	color: #28a745;
	text-align: center;
	margin: 10px 0;
}

.error-message {
	color: #dc3545;
	text-align: center;
	margin: 10px 0;
}

.link-btn {
	display: block;
	text-align: center;
	color: #007bff;
	text-decoration: none;
	margin-top: 15px;
}

.link-btn:hover {
	text-decoration: underline;
}

.pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 30px;
	flex-wrap: wrap;
}

.pagination-numbers {
	display: flex;
	gap: 8px;
}

.pagination-btn,
.pagination-page {
	border: 0;
	background: var(--header-background-color);
	border-radius: 5px;
	cursor: pointer;
	transition: all 0.3s ease;
	font-size: 14px;
	text-align: center;
	height: 40px;
	width: 40px;
	color: var(--text-color);
	font-family: 'Roboto', sans-serif;
	line-height: 41px;
}

.pagination-btn:hover:not(:disabled),
.pagination-page:hover:not(:disabled) {
	background: #ed4856;
	color: #fff;
}

.pagination-btn:disabled,
.pagination-page:disabled {
	cursor: not-allowed;
	opacity: .5;
}

.pagination-page.active,
.pagination-page.active:hover {
	background: #ed4856;
	color: #fff;
	cursor: not-allowed;
}

.pagination-info {
	margin-left: 15px;
	font-size: 14px;
	color: #6c757d;
}

/* Адаптивность */
@media (max-width: 768px) {
	.pagination {
		gap: 8px;
	}

	.pagination-info {
		margin-left: 10px;
		font-size: 12px;
	}

	.pagination-numbers {
		order: -1;
		width: 100%;
		justify-content: center;
	}
}

.franchise-section {
	margin: 30px 15px;
	background: #8888881a;
	border-radius: 7px;
	overflow: hidden;
	padding-bottom: 10px;
}

.franchise-section .main__title {
	font-size: 20px;
	font-weight: 700;
	color: var(--text-color);
	display: flex;
	align-items: center;
	gap: 10px;
	animation: SectionShow 0.5s ease-in-out;
}

.franchise-section .main__subtitle {
	color: var(--secondary-text-color);
	animation: SectionShow 0.5s ease-in-out;
	margin-top: 0;
	margin-bottom: 15px;
}

.franchise-position {
	font-size: 0.9rem;
	color: var(--text-secondary);
	font-weight: normal;
	opacity: 0.8;
}

.franchise-header {
	padding: 15px;
	border-bottom: 1px solid #86868638;
	margin-bottom: 10px;
	animation: SectionShow 0.5s ease-in-out;
}

.franchise-header .f-title {
	font-size: 20px;
	font-weight: 500;
	color: var(--text-color);
}

.franchise-header .f-subtitle {
	color: var(--secondary-text-color);
}

.franchise-movies {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
}

.franchise-movie {
	position: relative;
	cursor: pointer;
	transition: all 0.3s ease;
	overflow: hidden;
	display: grid;
	grid-template-columns: 40px 1fr;
	align-items: flex-start;
	gap: 10px;
	padding: 15px;
	animation: SectionShow 0.5s ease-in-out;
	/*! border-bottom: 1px solid #86868638; */
}

.franchise-movie:hover {
	opacity: .7;
}

.franchise-movie.current {
	box-shadow: inset 4px 0 0 #86868638;
	background-color: #79797926;
}

.franchise-poster {
	position: relative;
	width: 100%;
	height: 0;
	overflow: hidden;
	padding: 65% 0;
	border-radius: 5px;
}

.franchise-poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
	position: absolute;
	top: 0;
}

.franchise-movie:hover .franchise-poster img {
	transform: scale(1.05);
}

.current-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
	color: white;
	padding: 6px 12px;
	border-radius: 20px;
	font-size: 0.75rem;
	font-weight: 600;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	z-index: 2;
}

.franchise-info {
	padding: 0;
}

.franchise-title {
	color: var(--text-color);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.franchise-subtitle {
	font-size: 0.8rem;
	color: var(--text-secondary);
	margin-bottom: 8px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	opacity: 0.8;
}

.franchise-item {
	display: flex;
	gap: 10px;
	margin-top: 3px;
}

.franchise-item span {
	padding: 2px 5px;
	display: inline-flex;
	border-radius: 4px;
	font-size: 12px;
}

.franchise-item .franchise-status.released {
	background-color: #3cb13c59;
	color: var(--text-color);
}

.franchise-item .franchise-status.ongoing {
	background-color: #ff843a6b;
	color: var(--text-color);
}

.franchise-item .franchise-status.anonce {
	background-color: #6f93ff78;
	color: var(--text-color);
}

.franchise-year {
	color: var(--secondary-text-color);
	background-color: #8888884d;
}

.franchise-type {
	color: var(--secondary-text-color);
	background-color: #8888884d;
}

.franchise-loading {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 40px;
	color: var(--text-secondary);
}

.franchise-loading .loading-spinner {
	width: 24px;
	height: 24px;
	border: 2px solid var(--border-color);
	border-top: 2px solid var(--primary-color);
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-right: 10px;
}

.franchise-empty {
	text-align: center;
	padding: 30px;
	color: var(--text-secondary);
	opacity: 0.7;
}

.franchise-empty i {
	font-size: 2rem;
	margin-bottom: 10px;
	opacity: 0.5;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.franchise-movies.horizontal {
	display: flex;
	overflow-x: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--primary-color) var(--border-color);
	padding-bottom: 10px;
}

.franchise-movies.horizontal::-webkit-scrollbar {
	height: 6px;
}

.franchise-movies.horizontal::-webkit-scrollbar-track {
	background: var(--border-color);
	border-radius: 3px;
}

.franchise-movies.horizontal::-webkit-scrollbar-thumb {
	background: var(--primary-color);
	border-radius: 3px;
}

.franchise-movies.horizontal .franchise-movie {
	flex: 0 0 auto;
	width: 160px;
	margin-right: 15px;
}

.franchise-movie.unavailable {
	opacity: 0.6;
	cursor: not-allowed;
}

.franchise-movie.unavailable:hover {
	transform: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.franchise-movie.unavailable .franchise-poster::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1;
}

.clickable-links {
	display: inline;
}

.clickable-link {
	color: var(--text-color);
	text-decoration: none;
	transition: all 0.2s ease;
	cursor: pointer;
	border-bottom: 1px dashed;
}

.clickable-link:hover {
	opacity: .7;
}

/* Стили для страниц студии и озвучки (как у других страниц) */
.studio-page .main__title,
.dubbing-page .main__title {
	margin-bottom: 10px;
}

/* ===== МОБИЛЬНОЕ МЕНЮ ЗАКЛАДОК ===== */

.bookmark-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(5px);
	z-index: 999;
	animation: fadeIn 0.3s ease;
}

.bookmark-dropdown-menu.mobile-menu {
	position: fixed !important;
	bottom: 0;
	left: 0;
	right: 0;
	top: auto;
	width: 100%;
	max-width: 100%;
	margin: 0;
	border-radius: 10px 10px 0 0;
	animation: slideUp 0.3s ease;
	z-index: 1000;
	background: var(--background-color);
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
	padding: 0;
	overflow: hidden;
}

.menu-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--border-color);
}

.menu-title {
	font-size: 16px;
	font-weight: 500;
	color: var(--text-color);
}

.menu-close-btn {
	background: none;
	border: none;
	color: var(--text-color);
	font-size: 20px;
	cursor: pointer;
	padding: 4px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
}

.menu-close-btn:hover {
	background: var(--main-btn-hover-background);
}

.menu-content {
	padding: 0;
	max-height: 70vh;
	overflow-y: auto;
	display: grid;
	gap: 8px;
}

@media (width <=768px) {
	.menu-content {
		padding: 12px;
	}
}

.menu-content .bookmark-menu-item {
	width: 100%;
}

.menu-content .bookmark-menu-item.danger {
	margin-top: 8px;
}

/* Анимации */
@keyframes slideUp {
	from {
		transform: translateY(100%);
	}

	to {
		transform: translateY(0);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* Десктопная версия меню */
@media (min-width: 769px) {
	.bookmark-dropdown-menu {
		position: absolute;
		top: 100%;
		right: 0;
		background: var(--anime-block-background-color);
		border-radius: 8px;
		margin-top: 5px;
		z-index: 1000;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		overflow: hidden;
		padding: 7px;
		display: grid;
		gap: 5px;
		width: 200px;
		border: 1px solid var(--main-btn-hover-background);
	}

	.bookmark-overlay {
		display: none;
	}

	.menu-header {
		display: none;
	}
}

/* ===== СИСТЕМА РЕЙТИНГА ===== */

/* Основной контейнер рейтинга */
.rating-system {
	border-radius: 10px;
	max-width: 375px;
	padding: 10px;
	border: 1px solid var(--border-color);
	position: relative;
	margin-bottom: 20px;
}

/* Контейнер рейтинга */
.rating-system .rating-container {
	position: relative;
	display: grid;
	align-items: center;
	gap: 0;
	transition: all 0.2s ease;
	max-width: 100%;
	box-sizing: border-box;
	z-index: 10;
}

/* Кружки рейтинга */
.rating-system .rating-circles {
	display: flex;
	gap: 3px;
	cursor: pointer;
	position: relative;
	padding: 2px 0;
	flex-wrap: nowrap;
	overflow: visible;
}

.rating-system .circle-wrapper {
	position: relative;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	overflow: visible;
	flex-shrink: 0;
}

.rating-system .circle {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #86868673;
	transition: all 0.2s ease;
	position: relative;
	overflow: hidden;
	box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.rating-system .circle-fill {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
	background: #ed4856;
	transition: height 0.15s cubic-bezier(0.4, 0, 0.2, 1);
	border-radius: 50% 50% 0 0;
}

/* Состояния кружков */
.rating-system .circle-wrapper.filled .circle-fill {
	height: 100% !important;
	border-radius: 50%;
}

.rating-system .circle-wrapper.half-filled .circle-fill {
	height: 50% !important;
	border-radius: 50% 50% 0 0;
}

/* Эффекты при наведении */
.rating-system .circle-wrapper.hovered .circle {
	transform: scale(1.15);
	box-shadow: 0 4px 12px #ed485666;
	background: rgba(255, 193, 7, 0.25);
}

.rating-system .circle-wrapper.hovered .circle-fill {
	background: #ed4856;
}

.rating-system .circle-wrapper:active .circle {
	transform: scale(0.95);
}

/* Тултипы */
.rating-system .circle-tooltip {
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	background: #ed4856;
	color: #fff;
	padding: 4px 8px;
	border-radius: 5px;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
	z-index: 1000;
	pointer-events: none;
	animation: ratingFadeInUp 0.2s ease;
	margin-bottom: 8px;
	line-height: 1;
}

.rating-system .circle-tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-width: 4px;
	border-style: solid;
	border-color: #ed4856 transparent transparent transparent;
}

/* Размеры */
.rating-system .size-small .circle-wrapper {
	width: 16px;
	height: 16px;
}

.rating-system .size-small .circle {
	width: 12px;
	height: 12px;
}

.rating-system .size-small .circle-tooltip {
	font-size: 10px;
	padding: 2px 6px;
	margin-bottom: 6px;
}

.rating-system .size-large .circle-wrapper {
	width: 24px;
	height: 24px;
}

.rating-system .size-large .circle {
	width: 20px;
	height: 20px;
}

.rating-system .size-large .rating-container {
	padding: 8px 16px;
	gap: 10px;
}

.rating-system .size-large .rating-value {
	font-size: 18px;
}

.rating-system .size-large .rating-votes {
	font-size: 14px;
}

/* Информация о рейтинге */
.rating-system .rating-info {
	display: flex;
	align-items: baseline;
	gap: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
	overflow: hidden;
	width: 80px;
}

.rating-system .rating-info:hover {
	opacity: .7;
}

.rating-system .rating-value {
	font-size: 16px;
	font-weight: 700;
	color: var(--text-color);
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	line-height: 1;
}

.rating-system .rating-value.clickable {
	cursor: pointer;
}

.rating-system .rating-max {
	font-size: 12px;
	font-weight: 400;
	color: var(--text-secondary);
}

.rating-system .rating-votes {
	font-size: 13px;
	color: var(--text-secondary);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100px;
}

.rating-system .info-icon {
	font-size: 14px;
	color: var(--text-secondary);
	opacity: 0.7;
	transition: all 0.2s ease;
	flex-shrink: 0;
}

.rating-system .rating-info:hover .info-icon {
	opacity: 1;
	color: #ffc107;
	transform: scale(1.1);
}

/* Блок рейтинга на странице фильма */
.rating-system .rating-section {
	width: 100%;
	box-sizing: border-box;
	position: relative;
}

.rating-system .rating-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	position: relative;
	z-index: 2;
}

.rating-system .rating-header-left {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	flex: 1;
	min-width: 0;
}

.rating-system .rating-big {
	width: 60px;
	flex-shrink: 0;
	background: #ed4856;
	border-radius: 10px;
	height: 60px;
	padding: 18px 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rating-system .rating-big-number {
	font-size: 28px;
	font-weight: 800;
	color: #ffd7da;
}

.rating-system .rating-big-label {
	font-size: 12px;
	color: var(--text-secondary);
	margin-top: 4px;
	white-space: nowrap;
}

.rating-system .remove-rating-btn {
	padding: 6px;
	background: rgba(244, 67, 54, 0.1);
	border: 1px solid rgba(244, 67, 54, 0.2);
	border-radius: 7px;
	color: #f44336;
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
	white-space: nowrap;
	margin-top: 10px;
}

.rating-system .remove-rating-btn:hover {
	background: #f44336;
	color: white;
	border-color: #f44336;
}

.rating-system .remove-rating-btn i {
	font-size: 14px;
}

/* Рейтинг в карточках */
.rating-system .anime-card .rating-container {
	margin-top: 8px;
	background: transparent;
	padding: 4px 8px;
	justify-content: center;
	width: 100%;
	border: none;
}

.rating-system .anime-card .rating-container:hover {
	background: var(--background-secondary);
	transform: none;
	box-shadow: none;
}

.rating-system .anime-card .circle-wrapper {
	width: 14px;
	height: 14px;
}

.rating-system .anime-card .circle {
	width: 10px;
	height: 10px;
}

.rating-system .anime-card .rating-info {
	padding: 2px 4px;
	background: transparent;
	border: none;
}

.rating-system .anime-card .rating-info:hover {
	background: var(--background-secondary);
}

.rating-system .anime-card .rating-value {
	font-size: 13px;
}

.rating-system .anime-card .rating-votes {
	font-size: 11px;
	max-width: 70px;
}

/* Анимации */
@keyframes ratingFadeInUp {
	from {
		opacity: 0;
		transform: translate(-50%, 10px);
	}

	to {
		opacity: 1;
		transform: translate(-50%, 0);
	}
}

/* ===== МОДАЛЬНОЕ ОКНО РЕЙТИНГА (ГЛОБАЛЬНОЕ) ===== */

/* Затемнение фона */
.rating-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 10000;
	padding: 16px;
	box-sizing: border-box;
	animation: modalFadeIn 0.2s ease;
}

/* Контейнер модального окна */
.rating-modal {
	background: var(--background-primary);
	border-radius: 10px;
	width: 100%;
	max-width: 400px;
	max-height: calc(100vh - 40px);
	overflow: hidden;
	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
	border: 1px solid var(--border-color);
	display: flex;
	flex-direction: column;
	animation: modalSlideUp 0.3s ease;
	position: relative;
	margin: auto;
}

/* Заголовок модального окна */
.rating-modal-header {
	padding: 10px 20px;
	border-bottom: 1px solid var(--border-color);
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: var(--background-secondary);
	flex-shrink: 0;
}

.rating-modal-header h3 {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	color: var(--text-color);
}

/* Кнопка закрытия */
.modal-close-btn {
	width: 36px;
	height: 36px;
	border: none;
	color: var(--text-color);
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s ease;
	padding: 0;
	flex-shrink: 0;
	background: transparent;
}

.modal-close-btn:hover {
	opacity: .7;
}

/* Контент модального окна */
.rating-modal-content {
	overflow-y: auto;
	flex: 1;
	padding: 20px;
}

/* Сводка рейтинга */
.rating-summary {
	display: flex;
	gap: 24px;
	margin-bottom: 15px;
	padding: 15px;
	background: var(--border-color);
	border-radius: 10px;
}

.summary-average,
.summary-total {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	justify-content: center;
	line-height: 15px;
}

.average-value {
	font-size: 30px;
	font-weight: 500;
	color: #ff8300;
	line-height: 1;
}

.average-label,
.total-label {
	font-size: 14px;
	color: var(--text-secondary);
	text-align: center;
}

.total-value {
	font-size: 30px;
	font-weight: 500;
	color: var(--text-color);
	line-height: 1;
}

/* Распределение оценок */
.rating-distribution {
	max-height: 360px;
	overflow-y: auto;
	padding-right: 8px;
}

.distribution-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 5px;
	font-size: 14px;
}

.distribution-label {
	font-weight: 600;
	color: var(--text-color);
	text-align: right;
	flex-shrink: 0;
	width: 16px;
}

.distribution-progress {
	flex: 1;
	height: 10px;
	background: var(--background-tertiary);
	border-radius: 20px;
	overflow: hidden;
	min-width: 150px;
}

.distribution-fill {
	height: 100%;
	border-radius: 20px;
	transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.distribution-fill.rating-high {
	background: linear-gradient(90deg, #4caf50, #8bc34a);
}

.distribution-fill.rating-medium {
	background: linear-gradient(90deg, #ffc107, #ff9800);
}

.distribution-fill.rating-low {
	background: linear-gradient(90deg, #ff9800, #ff5722);
}

.distribution-fill.rating-very-low {
	background: linear-gradient(90deg, #f44336, #d32f2f);
}

.distribution-count {
	width: 50px;
	text-align: right;
	color: var(--text-secondary);
	font-size: 13px;
	flex-shrink: 0;
}

/* Подвал с оценкой пользователя */
.rating-footer {
	margin-top: 24px;
}

.user-rating {
	display: flex;
	align-items: center;
	gap: 12px;
	background: var(--background-secondary);
	border-radius: 40px;
	font-size: 15px;
}

.user-rating i {
	font-size: 20px;
	color: #ffc107;
	flex-shrink: 0;
}

.user-rating strong {
	font-size: 18px;
	color: #ffc107;
	margin-left: 4px;
}

/* Анимации модального окна */
@keyframes modalFadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes modalSlideUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Адаптивность модального окна */
@media (max-width: 768px) {
	.rating-modal {
		width: 95%;
		max-width: none;
		border-radius: 24px;
	}

	.rating-modal-header {
		padding: 16px 20px;
	}

	.rating-modal-header h3 {
		font-size: 18px;
	}

	.rating-modal-content {
		padding: 20px;
	}

	.rating-summary {
		padding: 16px;
		gap: 16px;
	}

	.distribution-bar {
		gap: 8px;
	}

	.distribution-label {
		width: 30px;
		font-size: 13px;
	}

	.distribution-progress {
		min-width: 120px;
	}

	.distribution-count {
		width: 45px;
		font-size: 12px;
	}
}

@media (max-width: 480px) {
	.rating-modal {
		width: 100%;
		height: 100%;
		max-height: 75vh;
		border-radius: 10px;
	}

	.rating-modal-content {
		padding: 16px;
	}

	.rating-summary {
		flex-direction: row;
		gap: 12px;
	}

	.distribution-bar {
		gap: 6px;
	}

	.distribution-label {
		width: 28px;
		font-size: 12px;
	}

	.distribution-progress {
		min-width: 100px;
		height: 8px;
	}

	.distribution-count {
		width: 40px;
		font-size: 11px;
	}

	.user-rating {
		padding: 10px 12px;
	}
}

.rating-label {
	display: inline-flex;
	position: absolute;
	top: 10px;
	right: 10px;
	background-color: #ed4856;
	color: #fff;
	padding: 0 7px;
	border-radius: 5px;
	font-size: 16px;
	line-height: 26px;
	box-shadow: 1px 1px 1px 1px #0000005c;
}

.status-badge {
	display: inline-flex;
	position: absolute;
	bottom: 10px;
	left: 10px;
	color: #fff;
	padding: 0 7px;
	border-radius: 5px;
	font-size: 13px;
	line-height: 26px;
	font-weight: 500;
	box-shadow: 1px 1px 1px 1px #0000005c;
}

/* Цвета для разных статусов */
.status-released {
	background: #4ea227;
}

.status-ongoing {
	background: #ff5400;
}

.status-anonce {
	background: #0071c3;
}

/* ===== HERO BANNER ===== */
.hero-banner {
	text-align: center;
	padding: 35px 20px;
	margin-bottom: 50px;
	background: linear-gradient(45deg, #b8575f, #b33260, #932644);
	border-radius: 10px;
	position: relative;
	overflow: hidden;
	margin: 15px;
	margin-top: 0;
	margin-bottom: 30px;
	animation: SectionShow 0.5s ease-in-out;
}

.hero-banner::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(255, 83, 83, 0.1) 0%, transparent 70%);
	pointer-events: none;
}

.hero-title {
	font-size: 52px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 15px;
	position: relative;
	z-index: 1;
	line-height: 1.2;
}

.hero-subtitle {
	font-size: 20px;
	color: #fff;
	margin-bottom: 35px;
	position: relative;
	z-index: 1;
}

.hero-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 40px;
	background: var(--primary-color);
	color: #ffffff9c;
	border-radius: 50px;
	font-size: 18px;
	font-weight: 500;
	text-decoration: none;
	position: relative;
	z-index: 1;
	border: 2px solid #ffffff38;
	transition: all .3s ease-in-out;
}

.hero-btn:hover {
	background: var(--primary-dark);
	border-color: #ffffffc9;
	color: #ffffffc9;
}

.hero-btn i {
	font-size: 20px;
}

@keyframes SectionShow {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* ===== АДАПТИВНОСТЬ ===== */
@media (max-width: 768px) {
	.hero-title {
		font-size: 42px;
	}

	.hero-subtitle {
		font-size: 18px;
	}

	.hero-btn {
		padding: 12px 30px;
		font-size: 16px;
	}
}

@media (max-width: 480px) {
	.hero-title {
		font-size: 32px;
	}

	.hero-subtitle {
		font-size: 16px;
	}

	.hero-btn {
		padding: 10px 25px;
		font-size: 15px;
	}

	.hero-btn i {
		font-size: 18px;
	}
}

/* Стили для выпадающего меню */
.user-menu {
	position: relative;
	display: inline-block;
}

.dropdown-menu {
	position: absolute;
	bottom: 0;
	left: 70px;
	min-width: 220px;
	background: var(--background-color);
	border: 1px solid var(--main-btn-hover-background);
	border-radius: 10px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	z-index: 1000;
	overflow: hidden;
	padding: 7px;
	display: grid !important;
}

@media (width <=800px) {
	.dropdown-menu {
		right: 0;
		left: auto;
		bottom: 70px;
	}
}

.dropdown-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 10px;
	color: var(--text-color, #333);
	text-decoration: none;
	cursor: pointer;
	border: none;
	background: none;
	width: 100%;
	text-align: left;
	font-size: 14px;
	border-radius: 7px;
}

.dropdown-item:hover {
	background-color: #86868633;
}

.dropdown-item i {
	font-size: 18px;
	width: 20px;
	text-align: center;
}