.splitbutton-wrapper {
    display: inline-flex;
    overflow: hidden;
    border-radius: var(--mantine-radius-md);
    transition: box-shadow 0.2s ease-in-out;
}

.splitbutton-wrapper:hover {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.splitbutton-main {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    transition: background-color 0.2s ease-in-out;
}

.splitbutton-menu {
    border-left: none !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    transition: background-color 0.2s ease-in-out;
}

.splitbutton-menu:hover {
    filter: brightness(1.05);
}


:root {
    --main-navigation-menu-height: 3.5rem;
    --desktop-header-height: 3.5rem;
    --bottom-menu-height: 3.5rem;
    --main-footer-height: 8rem;
    --navigation-menu-background: var(--main-background);
    --desktop-header-background: var(--main-background);
    --main-footer-background: var(--main-background);
}

/* Главное меню */
.main-navigation-menu {
    position: sticky;
    top: 0;
    z-index: 201;
    background: var(--navigation-menu-background);
    box-shadow: 0 10px 20px -5px black;
}

.main-navigation-menu > nav {
    height: var(--main-navigation-menu-height);
    display: flex;
    gap: 0.75rem;
    padding: 0 0.5rem;
}

/* Десктопная шапка */
.desktop-header {
    min-height: var(--desktop-header-height);
    padding: 0.5rem 0.5rem;
}

/* Мобильное меню */
.navigation-menu-bottom {
    position: fixed;
    display: flex;
    flex-shrink: 0;
    z-index: 201;
    width: 100%;
    bottom: 0;
    height: var(--bottom-menu-height);
    justify-content: space-around;
    padding: 0.5rem;
    background-color: var(--navigation-menu-background);
    border-top: 2px solid var(--main-border);
}

/* Футер */
.main-footer {
    margin-top: 4rem;
    padding: 0.5rem;
    height: var(--main-footer-height);
    background-color: var(--main-footer-background);
}

/* Menu item */
.navigation-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    height: 100%;
}

.navigation-item.active {
    background: #333;
}

.navigation-item i {
    font-size: 1.25rem !important;
    padding: 0.75rem;
}

.navigation-item i::before {
    opacity: 0.5;
}

.navigation-item svg {
    opacity: 0.5;
}

.navigation-item label {
    opacity: 0.5;
}

.navigation-item.active i::before {
    opacity: 0.8;
}

.navigation-item.active svg {
    opacity: 0.8;
}

.navigation-item.active label {
    opacity: 0.8;
}

.navigation-menu-link {
    display: flex;
    align-items: center;
}

.navigation-menu-link i {
    font-size: 1.25rem !important;
}

.navigation-menu-link label {
    font-size: 0.875rem;
    cursor: pointer;
}

.navigation-profile-avatar {
    width: 2.5rem;
    height: 2.5rem;
}

/* Мобильные устройства + Планшет */
@media (max-width: 768px) {

    .main-footer {
        height: 100%;
		margin-bottom: var(--bottom-menu-height);
	}

    .navigation-item.active {
        background: #333;
        border-radius: 50%;
    }

}

/* ПК */
@media (min-width: 768px) {

    :root {
        --bottom-menu-height: 0;
    }

    .main-navigation-menu {
        border-radius: 0 0 10px 10px;
    }

    /* Главное меню */
    .main-navigation-menu.not-scrolled {
        box-shadow: none;
    }

    .navigation-item {
        cursor: pointer;
        padding: 0.75rem;
    }

    .navigation-item:hover {
        background: #333;
    }

    .navigation-item:hover i::before {
        opacity: 1;
    }

    .navigation-item:hover svg {
        opacity: 1;
    }

    .navigation-item:hover label {
        opacity: 1;
    }

    .navigation-menu-link {
        padding-right: 0.75rem;
    }

}


/* Group */
.notification-group {
	padding: 0.5rem !important;
}

.notification-group.error {
	border: 1px solid color-mix(in srgb, var(--error-border), black 35%);
}

.notification-group.success {
	border: 1px solid color-mix(in srgb, var(--success-border), black 35%);
}

.notification-group.warning {
	border: 1px solid color-mix(in srgb, var(--warning-border), black 35%);
}

.notification-group.info {
	border: 1px solid color-mix(in srgb, var(--info-border), black 35%);
}

.notification-group.active {
	background: #666;
}

.notification-group span {
	font-size: 0.825rem;
}

/* Card */
.notification-card-title {
	font-family: 'Inter var', sans-serif;
}

/* Card:error */
.notification-card.error {
	border: 1px solid color-mix(in srgb, var(--error-border), black 55%);
	background: rgba(248, 113, 113, 0.1);
}

.notification-card-title.error .title {
	color: rgba(255, 200, 200, 0.9);
}

/* Card:success */
.notification-card.success {
	border: 1px solid color-mix(in srgb, var(--success-border), black 55%);
	background: rgba(74, 222, 128, 0.1);
}

.notification-card-title.success .title {
	color: rgba(200, 255, 200, 0.9);
}

/* Card:warning */
.notification-card.warning {
	border: 1px solid color-mix(in srgb, var(--warning-border), black 55%);
	background: rgba(251, 146, 60, 0.1);
}

.notification-card-title.warning .title {
	color: rgba(255, 255, 200, 0.9);
}

/* Card:info */
.notification-card.info {
	border: 1px solid color-mix(in srgb, var(--info-border), black 55%);
	background: rgba(56, 189, 248, 0.1);
}

.notification-card-title.info .title {
	color: rgba(150, 180, 255, 0.9);
}

.video-container {
	position: relative;
	width: 100%;
	height: 100%;
}

/* YouTube player wrapper */
.youtube-player-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	background: #000;
}

.youtube-player {
	width: 100% !important;
	height: 100% !important;
}

.youtube-player iframe {
	width: 100% !important;
	height: 100% !important;
	border: none;
	border-radius: 8px;
}

.video-quality-menu {
	position: absolute;
	bottom: 40px;
	right: 20px;
	background-color: rgba(28, 28, 28, 0.95);
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
	z-index: 2;
	min-width: 200px;
	color: #fff;
	overflow: hidden;
}

.video-quality-menu-content {
	padding: 8px 0;
}

.video-quality-header {
	font-size: 14px;
	padding: 8px 16px;
	font-weight: 600;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	margin-bottom: 4px;
}

.video-quality-options {
	max-height: 300px;
	overflow-y: auto;
}

.video-quality-option {
	font-size: 14px;
	padding: 8px 16px;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: background-color 0.2s;
}

.video-quality-option:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

.video-quality-option.active {
	background-color: rgba(0, 120, 255, 0.3);
}

.video-quality-active-indicator {
	color: #00a3ff;
	font-weight: bold;
}

.vjs-quality-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	margin-right: 5px;
	height: 100%;
}

.vjs-quality-selector {
	background: transparent;
	border: none;
	color: white;
	display: flex;
	align-items: center;
	cursor: pointer;
	padding: 0 10px;
	height: 100%;
}

.vjs-quality-value {
	margin-right: 4px;
	font-size: 12px;
}

.vjs-quality-arrow-down,
.vjs-quality-arrow-up {
	font-size: 12px;
	margin-left: 3px;
	transition: transform 0.2s;
}

.vjs-quality-arrow-down {
	display: inline-block;
}

.vjs-quality-arrow-up {
	display: none;
}

.vjs-quality-button.menu-open .vjs-quality-arrow-down {
	display: none;
}

.vjs-quality-button.menu-open .vjs-quality-arrow-up {
	display: inline-block;
}

/* Адаптивность для YouTube плеера */
@media (max-width: 768px) {
	.vjs-quality-arrow-down {
		display: none;
	}

	.youtube-player-wrapper {
		min-height: 200px;
	}

	.youtube-player iframe {
		border-radius: 4px;
	}

	.vk-player-wrapper {
		min-height: 200px;
	}

	.vk-player {
		min-height: 200px !important;
		border-radius: 4px !important;
	}
}

/* Fullscreen поддержка для YouTube */
.youtube-player-wrapper:fullscreen {
	background: #000;
}

.youtube-player-wrapper:fullscreen .youtube-player iframe {
	border-radius: 0;
}

/* Fullscreen поддержка для VK */
.vk-player-wrapper:fullscreen {
	background: #000;
}

.vk-player-wrapper:fullscreen .vk-player {
	border-radius: 0 !important;
}

/* Sticky режим для YouTube плеера */
.video-container.sticky-mode {
	z-index: 99999 !important;
	position: relative;
}

.video-container.sticky-mode .youtube-player-wrapper {
	z-index: 99999 !important;
	position: relative;
}

.video-container.sticky-mode .youtube-player {
	z-index: 99999 !important;
	position: relative;
}

.video-container.sticky-mode .youtube-player iframe {
	z-index: 99999 !important;
	position: relative;
}

/* Sticky режим для VK плеера */
.video-container.sticky-mode .vk-player-wrapper {
	z-index: 99999 !important;
	position: relative;
}

.video-container.sticky-mode .vk-player {
	z-index: 99999 !important;
	position: relative;
}

/* Настройки для внешних видео источников */
.video-js .vjs-tech {
	object-fit: contain;
}

.video-js video {
	object-fit: contain;
	max-width: 100%;
	max-height: 100%;
}

/* Настройки для загрузки внешних источников */
.video-js.vjs-loading-spinner .vjs-loading-spinner {
	border-color: #007acc transparent transparent transparent;
}

/* Улучшенные настройки для внешних доменов */
.video-js .vjs-poster {
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.video-js .vjs-big-play-button {
	background: rgba(0, 0, 0, 0.8);
	border: 2px solid #007acc;
}

.video-js .vjs-big-play-button:hover {
	background: rgba(0, 122, 204, 0.8);
}

/* Настройки для внешних видео с редиректами */
.video-js.external-source {
	background: #000;
}

.video-js.external-source .vjs-loading-spinner {
	display: block !important;
}

.video-js.external-source video {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Общие стили для VK плеера */
.vk-player-wrapper {
	position: relative;
	width: 100%;
	min-height: 300px;
	background: #000;
	border-radius: 8px;
	overflow: hidden;
}

.vk-player {
	border: none;
	background: #000;
	display: block;
}

/* Адаптивный дизайн для VK */
.vk-player-wrapper iframe {
	border-radius: 8px;
}

@media (max-width: 480px) {
	.vk-player-wrapper {
		min-height: 180px;
	}

	.vk-player {
		min-height: 180px !important;
	}
}

.meter-group {
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	font-family: Arial, sans-serif;
	color: white;
}

.meter-bar {
	display: flex;
	height: 20px;
	border-radius: 5px;
	overflow: hidden;
	margin-bottom: 15px;
}

.meter-segment {
	height: 100%;
}

.meter-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.legend-item {
	flex: 1 1 calc(50% - 8px);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 8px;
}

.legend-color {
	width: 16px;
	height: 16px;
	border-radius: 4px;
}

.legend-text {
	font-size: 14px;
}


.player-content {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.control-panel {
	overflow: hidden;
}

.panel-header {
	padding: 10px 15px;
	border-bottom: 1px solid #444;
	margin-bottom: 10px;
}

.selection-row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.selection-item {
	flex: 1;
	min-width: 200px;
}

.video-wrapper {
	overflow: hidden;
	border-radius: 8px;
}

.video-header {
	padding: 10px 15px;
	border-bottom: 1px solid #444;
	margin-bottom: 10px;
}

.video-player-container {
	width: 100%;
}

.kodik-player {
	border: none;
	display: flex;
	width: 100%;
	aspect-ratio: 16/9;
}

.player-tabs {
	margin-bottom: 20px;
}

/* Стили уведомления */
.alert-wrapper {
	display: flex;
	align-items: center;
}

.alert-body {
	margin-left: 10px;
}

/* Стили для выбора качества */
.quality-panel {
	border-radius: 8px;
	margin-bottom: 10px;
}

.quality-selector {
	display: flex;
	align-items: center;
	gap: 10px;
}

.quality-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.quality-badge {
	transition: all 0.2s ease-in-out;
	cursor: pointer;
}

.quality-badge:hover {
	transform: translateY(-2px);
}

/* Стили для списка эпизодов */
.episode-selector-panel {
	border-radius: 8px;
}

.episode-controls {
	width: 100%;
}

.episode-selector-header {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.episodes-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 10px;
	padding: 5px;
}

.episode-item {
	cursor: pointer;
	transition: all 0.2s ease;
	border-radius: 6px;
	min-height: 40px;
}

.episode-item:hover {
	background-color: rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.episode-selected {
	border-color: #228be6 !important;
	background-color: rgba(34, 139, 230, 0.1);
}

.episode-watched {
	border-color: #2ea44f !important;
	background-color: rgba(46, 164, 79, 0.05);
}

.episode-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: 100%;
}

.episode-info {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	flex: 1;
}

.episode-info .mantine-Text-root {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.watched-icon {
	color: #2ea44f;
	flex-shrink: 0;
	margin-right: 2px;
}

@media (max-width: 768px) {
	.episodes-grid {
		grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	}
	
	.quality-selector {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
} 

.torrents-search-header {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	border-radius: 16px;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	color: white;
	box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

@media (min-width: 768px) {
	.search-header {
		border-radius: 20px;
		padding: 2rem;
		margin-bottom: 2rem;
		box-shadow: 0 20px 40px rgba(102, 126, 234, 0.3);
	}
}

.search-title {
	font-size: 1.8rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	text-shadow: 0 2px 4px rgba(0,0,0,0.1);
	line-height: 1.2;
}

@media (min-width: 768px) {
	.search-title {
		font-size: 2.5rem;
	}
}

.search-subtitle {
	opacity: 0.9;
	font-size: 0.95rem;
	margin-bottom: 1.5rem;
	line-height: 1.4;
}

@media (min-width: 768px) {
	.search-subtitle {
		font-size: 1.1rem;
	}
}

.search-controls {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	flex-wrap: wrap;
}

@media (min-width: 768px) {
	.search-controls {
		gap: 1rem;
	}
}

.search-button {
	background: rgba(255, 255, 255, 0.2);
	border: 2px solid rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(10px);
	transition: all 0.3s ease;
}

.search-button:hover {
	background: rgba(255, 255, 255, 0.3);
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Фильтры трекеров */
.trackers-filter {
	background: white;
	border-radius: 12px;
	padding: 1rem;
	margin-bottom: 1.5rem;
	box-shadow: 0 4px 20px rgba(0,0,0,0.1);
	border: 1px solid rgba(0,0,0,0.05);
}

[data-mantine-color-scheme="dark"] .trackers-filter {
	background: var(--mantine-color-dark-6);
	box-shadow: 0 4px 20px rgba(0,0,0,0.3);
	border: 1px solid var(--mantine-color-dark-4);
}

@media (min-width: 768px) {
	.trackers-filter {
		border-radius: 16px;
		padding: 1.5rem;
		margin-bottom: 2rem;
		box-shadow: 0 8px 32px rgba(0,0,0,0.1);
	}
	
	[data-mantine-color-scheme="dark"] .trackers-filter {
		box-shadow: 0 8px 32px rgba(0,0,0,0.3);
	}
}

.trackers-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 0.75rem;
	margin-top: 1rem;
}

@media (min-width: 480px) {
	.trackers-grid {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	}
}

@media (min-width: 768px) {
	.trackers-grid {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 1rem;
	}
}

.tracker-card {
	background: linear-gradient(145deg, #f8fafc, #e2e8f0);
	border: 2px solid transparent;
	border-radius: 8px;
	padding: 0.75rem;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

[data-mantine-color-scheme="dark"] .tracker-card {
	background: linear-gradient(145deg, var(--mantine-color-dark-5), var(--mantine-color-dark-4));
}

@media (min-width: 768px) {
	.tracker-card {
		border-radius: 12px;
		padding: 1rem;
	}
}

.tracker-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #667eea, #764ba2);
	transform: scaleX(0);
	transition: transform 0.3s ease;
}

.tracker-card.active {
	border-color: #667eea;
	background: linear-gradient(145deg, #f0f4ff, #e6efff);
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(102, 126, 234, 0.15);
}

[data-mantine-color-scheme="dark"] .tracker-card.active {
	background: linear-gradient(145deg, var(--mantine-color-dark-3), var(--mantine-color-dark-2));
	box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

@media (min-width: 768px) {
	.tracker-card.active {
		box-shadow: 0 12px 24px rgba(102, 126, 234, 0.15);
	}
	
	[data-mantine-color-scheme="dark"] .tracker-card.active {
		box-shadow: 0 12px 24px rgba(102, 126, 234, 0.3);
	}
}

.tracker-card.active::before {
	transform: scaleX(1);
}

.tracker-content {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

@media (min-width: 768px) {
	.tracker-content {
		gap: 0.75rem;
	}
}

.tracker-icon {
	width: 32px;
	height: 32px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: white;
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	flex-shrink: 0;
}

[data-mantine-color-scheme="dark"] .tracker-icon {
	background: var(--mantine-color-dark-7);
	box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

@media (min-width: 768px) {
	.tracker-icon {
		width: 40px;
		height: 40px;
		border-radius: 8px;
		box-shadow: 0 4px 8px rgba(0,0,0,0.1);
	}
	
	[data-mantine-color-scheme="dark"] .tracker-icon {
		box-shadow: 0 4px 8px rgba(0,0,0,0.3);
	}
}

.tracker-info {
	flex: 1;
	min-width: 0;
}

.tracker-name {
	font-weight: 600;
	font-size: 0.8rem;
	margin-bottom: 0.1rem;
	color: var(--mantine-color-gray-8);
	line-height: 1.2;
}

[data-mantine-color-scheme="dark"] .tracker-name {
	color: var(--mantine-color-gray-1);
}

@media (min-width: 768px) {
	.tracker-name {
		font-size: 0.9rem;
		margin-bottom: 0.25rem;
	}
}

.tracker-status {
	font-size: 0.7rem;
	opacity: 0.7;
	color: var(--mantine-color-gray-6);
}

[data-mantine-color-scheme="dark"] .tracker-status {
	color: var(--mantine-color-gray-4);
}

@media (min-width: 768px) {
	.tracker-status {
		font-size: 0.75rem;
	}
}

/* Прогресс поиска */
.search-progress {
	background: linear-gradient(135deg, #667eea, #764ba2);
	border-radius: 12px;
	padding: 1rem;
	margin-bottom: 1.5rem;
	color: white;
}

@media (min-width: 768px) {
	.search-progress {
		border-radius: 16px;
		padding: 1.5rem;
		margin-bottom: 2rem;
	}
}

.progress-item {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 6px;
	padding: 0.5rem;
	margin-bottom: 0.4rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	backdrop-filter: blur(10px);
}

@media (min-width: 768px) {
	.progress-item {
		border-radius: 8px;
		padding: 0.75rem;
		margin-bottom: 0.5rem;
		gap: 0.75rem;
	}
}

.progress-spinner {
	width: 14px;
	height: 14px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: white;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@media (min-width: 768px) {
	.progress-spinner {
		width: 16px;
		height: 16px;
	}
}

/* Карточки торрентов */
.torrents-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 768px) {
	.torrents-grid {
		grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
		gap: 1.5rem;
	}
}

@media (min-width: 1200px) {
	.torrents-grid {
		grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
	}
}

.torrent-card {
	background: white;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 20px rgba(0,0,0,0.1);
	border: 1px solid rgba(0,0,0,0.05);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	animation: fadeIn 0.5s ease-out;
}

[data-mantine-color-scheme="dark"] .torrent-card {
	background: var(--mantine-color-dark-6);
	box-shadow: 0 4px 20px rgba(0,0,0,0.3);
	border: 1px solid var(--mantine-color-dark-4);
}

@media (min-width: 768px) {
	.torrent-card {
		border-radius: 16px;
		box-shadow: 0 8px 32px rgba(0,0,0,0.1);
	}
	
	[data-mantine-color-scheme="dark"] .torrent-card {
		box-shadow: 0 8px 32px rgba(0,0,0,0.3);
	}
}

.torrent-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

[data-mantine-color-scheme="dark"] .torrent-card:hover {
	box-shadow: 0 12px 30px rgba(0,0,0,0.4);
}

@media (min-width: 768px) {
	.torrent-card:hover {
		transform: translateY(-8px);
		box-shadow: 0 20px 40px rgba(0,0,0,0.15);
	}
	
	[data-mantine-color-scheme="dark"] .torrent-card:hover {
		box-shadow: 0 20px 40px rgba(0,0,0,0.4);
	}
}

.torrent-header {
	padding: 1rem;
	border-bottom: 1px solid rgba(0,0,0,0.05);
	position: relative;
}

[data-mantine-color-scheme="dark"] .torrent-header {
	border-bottom: 1px solid var(--mantine-color-dark-4);
}

@media (min-width: 768px) {
	.torrent-header {
		padding: 1.5rem;
	}
}

.torrent-source {
	display: flex;
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	background: rgba(102, 126, 234, 0.1);
	border-radius: 6px;
	padding: 0.4rem;
}

[data-mantine-color-scheme="dark"] .torrent-source {
	background: rgba(102, 126, 234, 0.2);
}

@media (min-width: 768px) {
	.torrent-source {
		top: 1rem;
		right: 1rem;
		border-radius: 8px;
		padding: 0.5rem;
	}
}

.torrent-title {
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: 0.75rem;
	color: #1a202c;
	padding-right: 3rem;
}

[data-mantine-color-scheme="dark"] .torrent-title {
	color: var(--mantine-color-gray-1);
}

@media (min-width: 768px) {
	.torrent-title {
		font-size: 1.1rem;
		margin-bottom: 1rem;
		padding-right: 4rem;
	}
}

.torrent-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

@media (min-width: 768px) {
	.torrent-badges {
		gap: 0.5rem;
	}
}

.torrent-badge {
	background: linear-gradient(135deg, #667eea, #764ba2);
	color: white;
	padding: 0.2rem 0.6rem;
	border-radius: 16px;
	font-size: 0.7rem;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 0.2rem;
}

@media (min-width: 768px) {
	.torrent-badge {
		padding: 0.25rem 0.75rem;
		border-radius: 20px;
		font-size: 0.75rem;
		gap: 0.25rem;
	}
}

.torrent-badge.quality {
	background: linear-gradient(135deg, #06b6d4, #3b82f6);
}

.torrent-badge.size {
	background: linear-gradient(135deg, #10b981, #059669);
}

.torrent-badge.date {
	background: linear-gradient(135deg, #f59e0b, #d97706);
}

/* Детали торрента */
.torrent-details {
	padding: 1rem;
	background: #f8fafc;
}

[data-mantine-color-scheme="dark"] .torrent-details {
	background: var(--mantine-color-dark-7);
}

@media (min-width: 768px) {
	.torrent-details {
		padding: 1.5rem;
	}
}

.detail-section {
	background: white;
	border-radius: 8px;
	padding: 0.75rem;
	margin-bottom: 0.75rem;
	border-left: 3px solid transparent;
}

[data-mantine-color-scheme="dark"] .detail-section {
	background: var(--mantine-color-dark-6);
}

@media (min-width: 768px) {
	.detail-section {
		border-radius: 12px;
		padding: 1rem;
		margin-bottom: 1rem;
		border-left: 4px solid transparent;
	}
}

.detail-section.video {
	border-left-color: #06b6d4;
}

.detail-section.audio {
	border-left-color: #8b5cf6;
}

.detail-section.subtitles {
	border-left-color: #f59e0b;
}

.detail-header {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin-bottom: 0.5rem;
	font-weight: 600;
	color: #374151;
}

[data-mantine-color-scheme="dark"] .detail-header {
	color: var(--mantine-color-gray-2);
}

@media (min-width: 768px) {
	.detail-header {
		gap: 0.5rem;
		margin-bottom: 0.75rem;
	}
}

.detail-content {
	font-size: 0.85rem;
	color: #6b7280;
	line-height: 1.5;
}

[data-mantine-color-scheme="dark"] .detail-content {
	color: var(--mantine-color-gray-4);
}

@media (min-width: 768px) {
	.detail-content {
		font-size: 0.9rem;
	}
}

.audio-tracks {
	display: grid;
	gap: 0.4rem;
}

@media (min-width: 768px) {
	.audio-tracks {
		gap: 0.5rem;
	}
}

.audio-track {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem;
	background: #f3f4f6;
	border-radius: 6px;
}

[data-mantine-color-scheme="dark"] .audio-track {
	background: var(--mantine-color-dark-5);
}

@media (min-width: 768px) {
	.audio-track {
		gap: 0.75rem;
		padding: 0.5rem;
		border-radius: 8px;
	}
}

.flag-icon {
	width: 20px;
	height: 14px;
	border-radius: 3px;
	object-fit: cover;
	flex-shrink: 0;
}

@media (min-width: 768px) {
	.flag-icon {
		width: 24px;
		height: 16px;
		border-radius: 4px;
	}
}

/* Действия с торрентом */
.torrent-actions {
	padding: 0.75rem 1rem;
	background: #f8fafc;
	border-top: 1px solid rgba(0,0,0,0.05);
	display: flex;
	gap: 0.5rem;
}

[data-mantine-color-scheme="dark"] .torrent-actions {
	background: var(--mantine-color-dark-7);
	border-top: 1px solid var(--mantine-color-dark-4);
}

@media (min-width: 768px) {
	.torrent-actions {
		padding: 1rem 1.5rem;
		gap: 0.75rem;
	}
}

.action-button {
	flex: 1;
	padding: 0.6rem;
	border-radius: 6px;
	font-weight: 500;
	font-size: 0.8rem;
	transition: all 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	text-decoration: none;
	border: none;
	cursor: pointer;
	min-height: 40px;
}

@media (min-width: 768px) {
	.action-button {
		padding: 0.75rem;
		border-radius: 8px;
		font-size: 0.85rem;
		gap: 0.5rem;
		min-height: 44px;
	}
}

.action-button.magnet {
	background: linear-gradient(135deg, #3b82f6, #1d4ed8);
	color: white;
}

.action-button.download {
	background: linear-gradient(135deg, #10b981, #059669);
	color: white;
}

.action-button.source {
	background: #e5e7eb;
	color: #374151;
}

[data-mantine-color-scheme="dark"] .action-button.source {
	background: var(--mantine-color-dark-4);
	color: var(--mantine-color-gray-2);
}

.action-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

[data-mantine-color-scheme="dark"] .action-button:hover {
	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

@media (min-width: 768px) {
	.action-button:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 16px rgba(0,0,0,0.15);
	}
	
	[data-mantine-color-scheme="dark"] .action-button:hover {
		box-shadow: 0 8px 16px rgba(0,0,0,0.3);
	}
}

/* Состояния и анимации */
.empty-state {
	text-align: center;
	padding: 2rem 1rem;
	background: white;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

[data-mantine-color-scheme="dark"] .empty-state {
	background: var(--mantine-color-dark-6);
	box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

@media (min-width: 768px) {
	.empty-state {
		padding: 4rem 2rem;
		border-radius: 16px;
		box-shadow: 0 8px 32px rgba(0,0,0,0.1);
	}
	
	[data-mantine-color-scheme="dark"] .empty-state {
		box-shadow: 0 8px 32px rgba(0,0,0,0.3);
	}
}

.empty-icon {
	width: 60px;
	height: 60px;
	margin: 0 auto 1rem;
	opacity: 0.3;
	color: var(--mantine-color-gray-5);
}

[data-mantine-color-scheme="dark"] .empty-icon {
	color: var(--mantine-color-gray-6);
}

@media (min-width: 768px) {
	.empty-icon {
		width: 80px;
		height: 80px;
		margin: 0 auto 1.5rem;
	}
}

.errors-section {
	background: linear-gradient(135deg, #fee2e2, #fecaca);
	border-radius: 12px;
	padding: 1rem;
	margin-top: 1.5rem;
	border: 1px solid #fca5a5;
}

[data-mantine-color-scheme="dark"] .errors-section {
	background: linear-gradient(135deg, var(--mantine-color-dark-5), var(--mantine-color-dark-4));
	border: 1px solid var(--mantine-color-red-8);
}

@media (min-width: 768px) {
	.errors-section {
		border-radius: 16px;
		padding: 1.5rem;
		margin-top: 2rem;
	}
}

.error-item {
	background: white;
	border-radius: 6px;
	padding: 0.75rem;
	margin-bottom: 0.4rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

[data-mantine-color-scheme="dark"] .error-item {
	background: var(--mantine-color-dark-6);
}

@media (min-width: 768px) {
	.error-item {
		border-radius: 8px;
		padding: 1rem;
		margin-bottom: 0.5rem;
	}
}

@keyframes spin {
	to { transform: rotate(360deg); }
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Дополнительные мобильные стили */
@media (max-width: 767px) {
	.search-controls {
		width: 100%;
	}
	
	.search-controls .mantine-Button-root {
		flex: 1;
		min-width: 0;
	}
	
	.torrent-badges {
		margin-bottom: 0.75rem;
	}
	
	.torrent-title {
		font-size: 0.95rem;
		line-height: 1.3;
	}
	
	.detail-content ul {
		padding-left: 1rem !important;
	}
	
	.detail-content li {
		margin-bottom: 0.3rem !important;
		font-size: 0.8rem;
	}
}
.favorites-page-anime-card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.favorites-page-anime-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--mantine-shadow-md);
}

.favorites-page-anime-card-image {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.favorites-page-anime-card:hover .favorites-page-anime-card-image {
    transform: scale(1.05);
}

.favorites-page-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(0deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.7) 40%, rgba(0,0,0,0) 100%);
    z-index: 1;
    padding: var(--mantine-spacing-md);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: white;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.favorites-page-anime-card:hover .favorites-page-overlay {
    opacity: 1;
}

.favorites-page-title {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: var(--mantine-spacing-xs);
    transform: translateY(10px);
    transition: transform 0.3s ease;
}

.favorites-page-anime-card:hover .favorites-page-title {
    transform: translateY(0);
}

.favorites-page-details {
    font-size: var(--mantine-font-size-xs);
    color: var(--mantine-color-gray-4);
    transform: translateY(10px);
    transition: transform 0.3s ease 0.05s;
}

.favorites-page-anime-card:hover .favorites-page-details {
    transform: translateY(0);
}

[data-mantine-color-scheme="dark"] .favorites-page-anime-card {
    background-color: var(--mantine-color-dark-7);
    border-color: var(--mantine-color-dark-5);
}

[data-mantine-color-scheme="dark"] .favorites-page-anime-card:hover {
    border-color: var(--mantine-color-blue-7);
    background-color: var(--mantine-color-dark-6);
} 
/* Header Styles */
.notes-page-header {
	background: linear-gradient(135deg, 
		rgba(59, 130, 246, 0.05) 0%, 
		rgba(139, 92, 246, 0.05) 50%, 
		rgba(236, 72, 153, 0.05) 100%);
	border: 1px solid rgba(59, 130, 246, 0.1);
	backdrop-filter: blur(20px);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.notes-page-header:hover {
	transform: translateY(-2px);
	box-shadow: 0 20px 40px rgba(59, 130, 246, 0.1);
}

/* Compact Header Styles */
.notes-page-header-compact {
	background-color: var(--mantine-color-dark-6);
	border: 1px solid var(--mantine-color-dark-4);
	transition: all 0.2s ease;
}

.notes-page-header-compact:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 25px rgba(59, 130, 246, 0.08);
}

.notes-page-title,
.notes-page-empty-title {
	font-weight: 700;
}

.notes-page-counter {
	animation: notes-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3);
}

@keyframes notes-pulse {
	0%, 100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.9;
		transform: scale(1.05);
	}
}

/* Tabs Styles */
.notes-page-tabs {
	border-bottom: 1px solid var(--mantine-color-dark-5);
	padding-bottom: 0;
}

.notes-page-tab {
	transition: background-color 0.2s ease, color 0.2s ease;
	border-radius: var(--mantine-radius-md) var(--mantine-radius-md) 0 0 !important;
	border-color: transparent !important;
}

.notes-page-tab[data-active] {
	background-color: var(--mantine-color-dark-6);
	border-color: var(--mantine-color-dark-5) !important;
	border-bottom-color: transparent !important;
}

.notes-page-tab:hover {
	background: rgba(59, 130, 246, 0.05);
}

/* Empty State */
.notes-page-empty-state {
	background-color: var(--mantine-color-dark-7);
	border: 1px dashed var(--mantine-color-dark-5);
	min-height: 400px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.notes-page-empty-tab {
	background-color: var(--mantine-color-dark-7);
	border: 1px dashed var(--mantine-color-dark-5);
	min-height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: var(--mantine-spacing-lg);
}

.notes-page-empty-icon {
	transform: rotate(-5deg);
	transition: transform 0.3s ease;
}

.notes-page-empty-state:hover .notes-page-empty-icon {
	transform: rotate(5deg) scale(1.05);
}

.notes-page-empty-title {
	font-weight: 700;
}

/* Notes Grid */
.notes-page-grid {
	margin-top: 2rem;
}

.notes-page-grid-v2 {
	margin-top: 1rem;
}

.notes-grid-redesign {
	padding-top: var(--mantine-spacing-xs);
}

/* Modern Note Card - Clean & Readable Design */
.notes-card-modern {
	background: #ffffff;
	border: 1px solid #cbd5e0;
	transition: all 0.2s ease;
	overflow: hidden;
	position: relative;
	height: fit-content;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.notes-card-modern:hover {
	border-color: #9ca3af;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Info Section - под постером */
.notes-card-info-section {
	background: #f1f5f9;
	border-bottom: 1px solid #cbd5e0;
}

.notes-card-type-modern {
	font-weight: 600 !important;
	font-size: 0.7rem !important;
}

/* Poster Section */
.notes-card-poster-modern {
	position: relative;
	overflow: hidden;
}

.notes-card-poster-img {
	transition: none;
	width: 100%;
	height: 180px;
	object-fit: cover;
}

/* Body Section */
.notes-card-body {
	background: #ffffff;
	padding: 0.5rem !important;
}

.notes-card-main-title {
	color: #111827;
	line-height: 1.3;
	font-weight: 600;
}

.notes-card-sub-title {
	color: #6b7280;
	font-style: italic;
}

/* Note Paper - улучшенное выделение */
.notes-card-note-paper {
	background: #f8fafc;
	border: 2px solid #e2e8f0;
	padding: 0.75rem !important;
	position: relative;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.notes-card-note-paper::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 100%;
	background: linear-gradient(135deg, #3b82f6, #8b5cf6);
	border-radius: 2px 0 0 2px;
}

.notes-card-note-content {
	color: #1f2937;
	line-height: 1.6;
	font-weight: 500;
	padding-left: 0.75rem;
	font-size: 0.875rem;
}

/* Footer Section */
.notes-card-footer {
	margin-top: 0.75rem;
	padding-top: 0.25rem;
	border-top: 1px solid #e5e7eb;
}

.notes-card-date-info {
	padding: 0.375rem 0.5rem;
	background: #e5e7eb;
	border-radius: 6px;
	border: 1px solid #d1d5db;
}

.notes-card-calendar-icon {
	color: #4b5563;
}

/* Action Buttons */
.notes-card-edit-action,
.notes-card-delete-action {
	transition: all 0.2s ease;
	border: 1px solid transparent;
}

.notes-card-edit-action:hover {
	background: #374151 !important;
	color: white !important;
	border-color: #374151;
	transform: scale(1.05);
}

.notes-card-delete-action:hover {
	background: #dc2626 !important;
	color: white !important;
	border-color: #dc2626;
	transform: scale(1.05);
}

/* Dark Theme Support */
[data-mantine-color-scheme="dark"] .notes-card-modern {
	background: #1f2937;
	border-color: #4b5563;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-mantine-color-scheme="dark"] .notes-card-modern:hover {
	border-color: #6b7280;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-mantine-color-scheme="dark"] .notes-card-info-section {
	background: #111827;
	border-color: #4b5563;
}

[data-mantine-color-scheme="dark"] .notes-card-body {
	background: #1f2937;
}

[data-mantine-color-scheme="dark"] .notes-card-main-title {
	color: #f9fafb;
}

[data-mantine-color-scheme="dark"] .notes-card-sub-title {
	color: #d1d5db;
}

[data-mantine-color-scheme="dark"] .notes-card-note-paper {
	background: #0f172a;
	border-color: #374151;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-mantine-color-scheme="dark"] .notes-card-note-paper::before {
	background: linear-gradient(135deg, #60a5fa, #a78bfa);
}

[data-mantine-color-scheme="dark"] .notes-card-note-content {
	color: #f1f5f9;
}

[data-mantine-color-scheme="dark"] .notes-card-footer {
	border-color: #4b5563;
}

[data-mantine-color-scheme="dark"] .notes-card-date-info {
	background: #374151;
	border-color: #4b5563;
}

[data-mantine-color-scheme="dark"] .notes-card-calendar-icon {
	color: #d1d5db;
}

/* Responsive Design */
@media (max-width: 768px) {
	.notes-card-modern {
		margin-bottom: 1rem;
	}

	.notes-card-poster-img {
		height: 160px;
	}

	.notes-card-body {
		padding: 0.375rem !important;
	}

	.notes-card-main-title {
		font-size: 0.8rem !important;
	}

	.notes-card-note-content {
		font-size: 0.8rem !important;
	}

	.notes-card-note-paper {
		padding: 0.5rem !important;
	}
}

@media (max-width: 480px) {
	.notes-card-poster-img {
		height: 140px;
	}

	.notes-card-body {
		padding: 0.25rem !important;
	}

	.notes-card-main-title {
		font-size: 0.75rem !important;
	}

	.notes-card-note-content {
		font-size: 0.75rem !important;
	}

	.notes-card-note-paper {
		padding: 0.375rem !important;
	}
}

/* Original Note Card - Keep for compatibility */
.notes-page-card {
	background: linear-gradient(135deg, 
		rgba(255, 255, 255, 0.9) 0%, 
		rgba(255, 255, 255, 0.7) 100%);
	border: 1px solid rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(20px);
	cursor: pointer;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	overflow: hidden;
	position: relative;
	height: fit-content;
}

.notes-page-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, 
		rgba(59, 130, 246, 0.05) 0%, 
		rgba(139, 92, 246, 0.05) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
	z-index: 1;
}

.notes-page-card:hover::before {
	opacity: 1;
}

.notes-page-card:hover {
	transform: translateY(-8px) scale(1.02);
	box-shadow: 
		0 25px 50px rgba(0, 0, 0, 0.15),
		0 0 0 1px rgba(59, 130, 246, 0.1);
}

.notes-page-card:active {
	transform: translateY(-4px) scale(1.01);
}

/* Poster Section */
.notes-page-poster-section {
	position: relative;
	overflow: hidden;
}

.notes-page-poster-container {
	position: relative;
	overflow: hidden;
}

.notes-page-poster-image {
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	width: 100%;
	height: 240px;
	object-fit: cover;
}

.notes-page-card:hover .notes-page-poster-image {
	transform: scale(1.05);
	filter: brightness(1.1) saturate(1.2);
}

.notes-page-poster-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0.1) 50%,
		rgba(0, 0, 0, 0.3) 100%
	);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.notes-page-card:hover .notes-page-poster-overlay {
	opacity: 1;
}

.notes-page-view-button {
	transform: translateY(20px);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
}

.notes-page-card:hover .notes-page-view-button {
	transform: translateY(0);
}

.notes-page-rating-badge {
	position: absolute;
	top: 6px;
	right: 6px;
	backdrop-filter: blur(10px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	z-index: 2;
	font-size: 0.7rem !important;
	height: 1.4rem !important;
	padding: 0 0.4rem !important;
}

/* Card Content */
.notes-page-card-content {
	position: relative;
	z-index: 2;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	padding: 1rem !important;
}

.notes-page-anime-title {
	color: #1f2937;
	line-height: 1.4;
	transition: color 0.3s ease;
}

.notes-page-card:hover .notes-page-anime-title {
	color: #3b82f6;
}

.notes-page-original-title {
	opacity: 0.8;
}

.notes-page-meta-info {
	margin: 0.5rem 0;
}

.notes-page-meta-info .mantine-Badge-root {
	font-size: 0.75rem !important;
	height: 1.5rem !important;
	padding: 0 0.5rem !important;
}

/* Note Section */
.notes-page-note-section {
	margin-top: 1rem;
}

.notes-page-note-date {
	margin-bottom: 0.5rem;
}

.notes-page-note-content {
	background: rgba(248, 250, 252, 0.9);
	border: 1px solid rgba(226, 232, 240, 0.6);
	transition: all 0.3s ease;
}

.notes-page-card:hover .notes-page-note-content {
	background: rgba(248, 250, 252, 1);
	border-color: rgba(59, 130, 246, 0.3);
	box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.notes-page-note-text {
	color: #4b5563;
	line-height: 1.5;
	font-weight: 400;
}

/* Delete Button */
.notes-page-delete-button {
	position: absolute;
	top: 6px;
	right: 40px;
	opacity: 0;
	transform: scale(0.9);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	backdrop-filter: blur(10px);
	z-index: 3;
	box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.notes-page-card:hover .notes-page-delete-button {
	opacity: 1;
	transform: scale(1);
}

.notes-page-delete-button:hover {
	transform: scale(1.1);
	box-shadow: 0 6px 16px rgba(239, 68, 68, 0.5);
}

/* Dark Theme */
[data-mantine-color-scheme="dark"] .notes-page-card,
[data-mantine-color-scheme="dark"] .notes-page-card-v2 {
	background: rgba(30, 41, 59, 0.8);
	border-color: rgba(71, 85, 105, 0.3);
}

[data-mantine-color-scheme="dark"] .notes-page-card-content,
[data-mantine-color-scheme="dark"] .notes-page-card-content-v2 {
	background: rgba(30, 41, 59, 0.95);
}

[data-mantine-color-scheme="dark"] .notes-page-anime-title,
[data-mantine-color-scheme="dark"] .notes-page-title-v2 {
	color: #f1f5f9;
}

[data-mantine-color-scheme="dark"] .notes-page-card:hover .notes-page-anime-title,
[data-mantine-color-scheme="dark"] .notes-page-card-v2:hover .notes-page-title-v2 {
	color: #60a5fa;
}

[data-mantine-color-scheme="dark"] .notes-page-note-text,
[data-mantine-color-scheme="dark"] .notes-page-note-text-v2 {
	color: #cbd5e1;
}

[data-mantine-color-scheme="dark"] .notes-page-note-content,
[data-mantine-color-scheme="dark"] .notes-page-note-content-v2 {
	background: rgba(15, 23, 42, 0.6);
	border-color: rgba(71, 85, 105, 0.4);
}

[data-mantine-color-scheme="dark"] .notes-page-card:hover .notes-page-note-content,
[data-mantine-color-scheme="dark"] .notes-page-card-v2:hover .notes-page-note-content-v2 {
	background: rgba(15, 23, 42, 0.8);
	border-color: rgba(59, 130, 246, 0.3);
}

[data-mantine-color-scheme="dark"] .notes-page-header,
[data-mantine-color-scheme="dark"] .notes-page-header-compact {
	background: linear-gradient(135deg, 
		rgba(59, 130, 246, 0.08) 0%, 
		rgba(139, 92, 246, 0.08) 100%);
	border-color: rgba(59, 130, 246, 0.2);
}

[data-mantine-color-scheme="dark"] .notes-page-empty-state,
[data-mantine-color-scheme="dark"] .notes-page-empty-tab {
	background: linear-gradient(135deg, 
		rgba(59, 130, 246, 0.05) 0%, 
		rgba(139, 92, 246, 0.05) 100%);
	border-color: rgba(59, 130, 246, 0.15);
}

/* Responsive Design */
@media (max-width: 768px) {
	.notes-page-header,
	.notes-page-header-compact {
		padding: 1rem !important;
	}

	.notes-page-card,
	.notes-page-card-v2 {
		margin-bottom: 1rem;
	}

	.notes-page-poster-image,
	.notes-page-poster-image-v2 {
		height: 180px;
	}

	.notes-page-title {
		font-size: 1.5rem !important;
	}

	.notes-page-counter {
		font-size: 0.8rem !important;
	}
}

@media (max-width: 480px) {
	.notes-page-poster-image,
	.notes-page-poster-image-v2 {
		height: 160px;
	}

	.notes-page-card-content,
	.notes-page-card-content-v2 {
		padding: 0.75rem !important;
	}

	.notes-page-anime-title,
	.notes-page-title-v2 {
		font-size: 0.9rem !important;
	}
}

/* Loading Animation */
@keyframes notes-shimmer {
	0% {
		background-position: -200px 0;
	}
	100% {
		background-position: calc(200px + 100%) 0;
	}
}

.notes-page-loading {
	background: linear-gradient(90deg, #f0f0f0 25%, transparent 37%, #f0f0f0 63%);
	background-size: 400px 100%;
	animation: notes-shimmer 1.5s ease-in-out infinite;
}

/* ------------------ */
/* New Note Card V2   */
/* ------------------ */

.note-card {
	transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
				box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
				background-color 0.2s ease,
				border-color 0.2s ease;
	background-color: var(--mantine-color-dark-7);
	border: 1px solid var(--mantine-color-dark-5);
	overflow: hidden;
}

.note-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--mantine-shadow-lg);
	border-color: var(--mantine-color-blue-7);
	background-color: var(--mantine-color-dark-6);
}

.note-card-header {
	position: relative;
	cursor: pointer;
	overflow: hidden;
}

.note-card-header .mantine-Image-root {
	transition: transform 0.3s ease;
}

.note-card:hover .note-card-header .mantine-Image-root {
	transform: scale(1.05);
}

.note-card-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: var(--mantine-spacing-sm);
	padding-top: var(--mantine-spacing-xl);
	background: linear-gradient(0deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0) 100%);
	z-index: 1;
}

.note-card-type-badge {
	position: absolute;
	top: var(--mantine-spacing-sm);
	left: var(--mantine-spacing-sm);
	z-index: 2;
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.note-card-body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.note-card-quote {
	background-color: var(--mantine-color-dark-8);
	border-color: var(--mantine-color-dark-5);
	transition: background-color 0.2s ease, border-color 0.2s ease;
	min-height: 80px;
	position: relative;
}

.note-card:hover .note-card-quote {
	background-color: var(--mantine-color-dark-7);
	border-color: var(--mantine-color-dark-4);
}

.note-content-wrapper {
	flex-grow: 1;
}

.note-card-text {
	font-style: italic;
	color: var(--mantine-color-gray-4);
}

.note-read-more-button {
	margin-top: var(--mantine-spacing-xs); 
}

.note-card-footer {
	padding-top: 0.125rem;
}

.note-card-actions {
	opacity: 0;
	transition: opacity 0.2s ease-in-out;
}

.note-card:hover .note-card-actions {
	opacity: 1;
}

/* Mobile overrides */
@media (max-width: 48em) { /* Mantine 'sm' breakpoint */

	.note-card-footer {
		flex-direction: column;
		align-items: stretch;
		gap: var(--mantine-spacing-xs);
	}

	.note-card-actions {
		opacity: 1; /* Make actions always visible */
		align-self: center;
	}

	.note-card:hover .note-card-header .mantine-Image-root {
		transform: none;
	}
} 
.mini-player {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-player {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mini-player-avatar {
	transition: transform 0.3s ease;
	border: 2px solid var(--mantine-color-blue-3);
}

.mini-player-avatar.playing {
	animation: playlist-rotate 6s linear infinite;
	border-color: var(--mantine-color-blue-5);
	box-shadow: 0 0 20px rgba(0, 120, 255, 0.3);
}

/* Компактные карточки для мобильных устройств */
.video-card-mobile {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border: 1px solid var(--mantine-color-gray-3);
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.9));
}

.video-card-mobile:hover {
	background: linear-gradient(135deg, var(--mantine-color-gray-0), var(--mantine-color-blue-0));
	border-color: var(--mantine-color-blue-3);
	transform: translateX(4px);
	box-shadow: 0 4px 12px rgba(0, 120, 255, 0.1);
}

.video-card-mobile.is-active {
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.9));
	border-color: var(--mantine-color-blue-4);
	transform: translateX(6px);
	box-shadow: 0 6px 20px rgba(0, 120, 255, 0.2);
	position: relative;
}

.video-card-mobile.is-active::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(180deg, var(--mantine-color-blue-5), var(--mantine-color-violet-5));
	border-radius: 0 2px 2px 0;
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {

	/* Принудительное задание flex-свойств для правильного размещения */
	.mini-player > .mantine-Group-root:first-child {
		flex: 1 !important;
		min-width: 0 !important;
	}

	.mini-player > .mantine-Group-root:last-child {
		flex-shrink: 0 !important;
	}

	/* Стили для основного плеера на мобильных */
	.main-player {
		margin: 0 -16px;
		border-radius: 0;
		border-left: none;
		border-right: none;
	}

	.main-player .mantine-Card-section {
		margin: 0 !important;
	}

	.player-controls {
		padding: 1rem 0;
		gap: 1rem !important;
	}

	.player-controls .control-button {
		min-width: 44px;
		height: 44px;
	}

	.player-controls .main-play-button {
		min-width: 52px;
		height: 52px;
		margin: 0 8px;
	}

	.player-info {
		padding: 0 0.5rem;
	}

	/* Компактные отступы */
	.main-player .mantine-Stack-root {
		gap: 0.75rem;
	}

	.main-player .mantine-Title-root {
		font-size: 1.1rem !important;
		font-weight: 600;
		margin-bottom: 0.5rem;
	}

	.main-player .mantine-Badge-root {
		font-size: 0.75rem !important;
		padding: 4px 8px;
		height: auto;
		min-height: 20px;
	}

	.main-player .mantine-Button-root {
		padding: 4px 8px;
		height: 28px;
		font-size: 0.75rem !important;
	}
}

/* Стили для планшетов */
@media (max-width: 1024px) and (min-width: 769px) {

	.main-player {
		margin: 0 -8px;
	}

	.player-controls {
		padding: 1.25rem 0;
		gap: 1.25rem !important;
	}

	.player-controls .control-button {
		min-width: 48px;
		height: 48px;
	}

	.player-controls .main-play-button {
		min-width: 60px;
		height: 60px;
	}
}

@keyframes playlist-rotate {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* Стили для карточек видео */
.video-card {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
	background: linear-gradient(145deg, var(--mantine-color-gray-0), rgba(255, 255, 255, 0.8));
	border: 1px solid var(--mantine-color-gray-2);
}

.video-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	transition: left 0.5s ease;
	z-index: 1;
}

.video-card:hover::before {
	left: 100%;
}

.video-card:hover {
	transform: translateY(-8px) scale(1.02);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
	border-color: var(--mantine-color-blue-3);
}

.video-card .mantine-Image-root {
	transition: transform 0.3s ease;
}

.video-card:hover .mantine-Image-root {
	transform: scale(1.05);
}

/* Стили для кнопок управления плеером */
.player-controls {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.5rem;
	padding: 1.5rem 0;
}

.player-controls .control-button {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border-radius: 50%;
	position: relative;
	overflow: hidden;
}

.player-controls .control-button::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0;
	height: 0;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	transition: all 0.3s ease;
	transform: translate(-50%, -50%);
	z-index: 0;
}

.player-controls .control-button:hover:not(:disabled)::before {
	width: 100%;
	height: 100%;
}

.player-controls .control-button:hover:not(:disabled) {
	transform: scale(1.15);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.player-controls .control-button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
	filter: grayscale(50%);
}

.player-controls .main-play-button {
	background: linear-gradient(135deg, var(--mantine-color-blue-6), var(--mantine-color-violet-6));
	box-shadow: 0 8px 25px rgba(0, 120, 255, 0.4);
	position: relative;
	overflow: hidden;
}

.player-controls .main-play-button::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	transition: left 0.5s ease;
}

.player-controls .main-play-button:hover:not(:disabled) {
	transform: scale(1.2);
	box-shadow: 0 12px 35px rgba(0, 120, 255, 0.5);
}

.player-controls .main-play-button:hover:not(:disabled)::after {
	left: 100%;
}

/* Новые стили для активной карточки */
.video-card.is-active {
	position: relative;
	transform: scale(1.05);
	box-shadow: 0 16px 48px rgba(0, 120, 255, 0.25);
	border: 2px solid var(--mantine-color-blue-4);
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.9));
	animation: active-glow 3s ease-in-out infinite;
}

.video-card.is-active::before {
	content: '';
	position: absolute;
	top: -3px;
	left: -3px;
	right: -3px;
	bottom: -3px;
	background: linear-gradient(45deg, var(--mantine-color-blue-5), var(--mantine-color-violet-5), var(--mantine-color-blue-5));
	border-radius: inherit;
	z-index: -1;
	animation: gradient-border 3s linear infinite;
}

.video-card.is-active::after {
	content: '▶';
	position: absolute;
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	background: linear-gradient(135deg, var(--mantine-color-blue-6), var(--mantine-color-violet-6));
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	z-index: 2;
	box-shadow: 0 2px 8px rgba(0, 120, 255, 0.4);
	animation: play-pulse 2s ease-in-out infinite;
}

@keyframes active-glow {
	0%, 100% { box-shadow: 0 16px 48px rgba(0, 120, 255, 0.25); }
	50% { box-shadow: 0 20px 60px rgba(0, 120, 255, 0.4); }
}

@keyframes gradient-border {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

@keyframes play-pulse {
	0%, 100% { 
		transform: scale(1);
		opacity: 0.9;
	}
	50% { 
		transform: scale(1.1);
		opacity: 1;
	}
}

/* Адаптация для очень маленьких экранов */
@media (max-width: 480px) {

	.video-card.is-active::after {
		font-size: 2rem;
		width: 40px;
		height: 40px;
	}

	.player-controls .control-button {
		min-width: 36px;
		height: 36px;
	}

	.player-controls .main-play-button {
		min-width: 44px;
		height: 44px;
	}
}

/* Стили для пагинации */
.pagination-section {
	margin: 2rem 0;
}

.pagination-section .mantine-Pagination-control {
	transition: all 0.3s ease;
}

.pagination-section .mantine-Pagination-control:hover {
	transform: scale(1.1);
}

/* Темная тема для мобильных карточек */
.video-card-mobile {
	background: linear-gradient(135deg, var(--mantine-color-dark-8), var(--mantine-color-dark-7));
	border-color: var(--mantine-color-dark-5);
}

.video-card-mobile:hover {
	background: linear-gradient(135deg, var(--mantine-color-dark-7), var(--mantine-color-dark-6));
	border-color: var(--mantine-color-blue-4);
}

.video-card-mobile.is-active {
	background: linear-gradient(135deg, var(--mantine-color-dark-6), var(--mantine-color-dark-5));
	border-color: var(--mantine-color-blue-5);
}

.video-card.is-active {
	background: linear-gradient(145deg, var(--mantine-color-dark-6), var(--mantine-color-dark-5));
	border-color: var(--mantine-color-blue-5);
}

/* ===== АККОРДЕОН ===== */
.playlist-accordion .mantine-Accordion-item {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	background: linear-gradient(145deg, var(--mantine-color-gray-0), rgba(255, 255, 255, 0.8));
	border: 1px solid var(--mantine-color-gray-2);
	overflow: hidden;
}

.playlist-accordion .mantine-Accordion-item:hover {
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.playlist-accordion .mantine-Accordion-control {
	transition: all 0.3s ease;
}

.playlist-accordion .mantine-Accordion-control[data-active="true"] {
	background: linear-gradient(135deg, var(--mantine-color-blue-0), var(--mantine-color-violet-0));
}

.playlist-accordion .mantine-Accordion-panel {
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(248, 250, 252, 0.5));
}

/* ===== ЗАГОЛОВКИ С ГРАДИЕНТОМ ===== */
.page-title {
	background: linear-gradient(135deg, var(--mantine-color-blue-7), var(--mantine-color-violet-7));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-weight: 700;
}

/* ===== ФИЛЬТРЫ ===== */
.playlist-filters .mantine-SegmentedControl-root {
	background: linear-gradient(135deg, var(--mantine-color-gray-0), var(--mantine-color-gray-1));
	border: 1px solid var(--mantine-color-gray-3);
	padding: 4px;
	border-radius: 12px;
}

.playlist-filters .mantine-SegmentedControl-control[data-active="true"] {
	background: linear-gradient(135deg, var(--mantine-color-blue-5), var(--mantine-color-violet-5));
	box-shadow: 0 4px 15px rgba(0, 120, 255, 0.3);
	transform: scale(1.02);
}

/* ===== ТЕМНАЯ ТЕМА ===== */

.video-card {
	background: linear-gradient(145deg, var(--mantine-color-dark-8), var(--mantine-color-dark-7));
	border-color: var(--mantine-color-dark-5);
}

.video-card:hover {
	border-color: var(--mantine-color-blue-4);
	background: linear-gradient(145deg, var(--mantine-color-dark-7), var(--mantine-color-dark-6));
}

.playlist-accordion .mantine-Accordion-item {
	background: linear-gradient(145deg, var(--mantine-color-dark-8), var(--mantine-color-dark-7));
	border-color: var(--mantine-color-dark-5);
}

.playlist-accordion .mantine-Accordion-control[data-active="true"] {
	background: linear-gradient(135deg, var(--mantine-color-dark-6), var(--mantine-color-blue-9));
}

.playlist-accordion .mantine-Accordion-panel {
	background: linear-gradient(145deg, var(--mantine-color-dark-8), var(--mantine-color-dark-7));
}

.playlist-filters .mantine-SegmentedControl-root {
	background: linear-gradient(135deg, var(--mantine-color-dark-7), var(--mantine-color-dark-6));
	border-color: var(--mantine-color-dark-4);
}

/* ===== АНИМИРОВАННЫЕ КНОПКИ УПРАВЛЕНИЯ ===== */
.control-button[data-active="true"] {
	background: linear-gradient(135deg, var(--mantine-color-orange-5), var(--mantine-color-red-5)) !important;
	animation: button-glow 2s ease-in-out infinite;
}

.control-button[data-shuffle="true"] {
	background: linear-gradient(135deg, var(--mantine-color-green-5), var(--mantine-color-teal-5)) !important;
	animation: button-glow 2s ease-in-out infinite;
}

@keyframes button-glow {
	0%, 100% { 
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
		transform: scale(1);
	}
	50% { 
		box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
		transform: scale(1.02);
	}
}

/* ===== КНОПКИ БЫСТРОГО ДОСТУПА ===== */
.playlist-buttons .mantine-Button-root[data-variant="gradient"] {
	position: relative;
	overflow: hidden;
	transition: all 0.3s ease;
}

.playlist-buttons .mantine-Button-root[data-variant="gradient"]::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
	transition: left 0.5s ease;
}

.playlist-buttons .mantine-Button-root[data-variant="gradient"]:hover::before {
	left: 100%;
}

.playlist-buttons .mantine-Button-root[data-variant="gradient"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(0, 120, 255, 0.3);
}

.playlist-buttons .mantine-Button-root[data-variant="light"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(0, 120, 255, 0.2);
}

/* ===== МОБИЛЬНАЯ АДАПТАЦИЯ ДЛЯ НОВЫХ ЭЛЕМЕНТОВ ===== */
@media (max-width: 768px) {

	.playlist-buttons .mantine-Button-root {
		padding: 6px 12px !important;
		font-size: 0.8rem !important;
		height: 32px !important;
	}
}

/* ===== УЛУЧШЕННАЯ АНИМАЦИЯ ЗАГРУЗКИ ===== */
.video-card:hover .mantine-Image-root {
	transform: scale(1.05) rotate(1deg);
}

.playlist-accordion .mantine-Accordion-item[data-active="true"] {
	box-shadow: 0 12px 35px rgba(0, 120, 255, 0.15);
	border-color: var(--mantine-color-blue-3);
}

/* ===== УЛУЧШЕННАЯ ЧИТАЕМОСТЬ ТЕКСТА В АКТИВНЫХ КАРТОЧКАХ ===== */
.video-card.is-active .mantine-Text-root {
	color: var(--mantine-color-dark-9) !important;
	font-weight: 600;
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

.video-card-mobile.is-active .mantine-Text-root {
	color: var(--mantine-color-dark-9) !important;
	font-weight: 600;
}

.video-card.is-active .mantine-Text-root,
.video-card-mobile.is-active .mantine-Text-root {
	color: var(--mantine-color-gray-0) !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* ===== УЛУЧШЕННЫЕ СТИЛИ ДЛЯ БЕЙДЖЕЙ ТОЛЬКО В АКТИВНЫХ КАРТОЧКАХ ===== */
.video-card.is-active .mantine-Badge-root,
.video-card-mobile.is-active .mantine-Badge-root {
	background: rgba(0, 0, 0, 0.8) !important;
	color: white !important;
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
	font-weight: 700;
	text-shadow: none;
	backdrop-filter: blur(4px);
}

.video-card.is-active .mantine-Badge-root[data-variant="light"][data-color="blue"],
.video-card-mobile.is-active .mantine-Badge-root[data-variant="light"][data-color="blue"] {
	background: linear-gradient(135deg, var(--mantine-color-blue-7), var(--mantine-color-blue-8)) !important;
	color: white !important;
	border: none;
}

.video-card.is-active .mantine-Badge-root[data-variant="light"][data-color="grape"],
.video-card-mobile.is-active .mantine-Badge-root[data-variant="light"][data-color="grape"] {
	background: linear-gradient(135deg, var(--mantine-color-grape-7), var(--mantine-color-grape-8)) !important;
	color: white !important;
	border: none;
}

/* Темная тема для активных бейджей */
.video-card.is-active .mantine-Badge-root,
.video-card-mobile.is-active .mantine-Badge-root {
	background: rgba(255, 255, 255, 0.9) !important;
	color: var(--mantine-color-dark-8) !important;
	border: 1px solid rgba(0, 0, 0, 0.1);
	font-weight: 700;
}

.video-card.is-active .mantine-Badge-root[data-variant="light"][data-color="blue"],
.video-card-mobile.is-active .mantine-Badge-root[data-variant="light"][data-color="blue"] {
	background: linear-gradient(135deg, var(--mantine-color-blue-6), var(--mantine-color-blue-7)) !important;
	color: white !important;
}

.video-card.is-active .mantine-Badge-root[data-variant="light"][data-color="grape"],
.video-card-mobile.is-active .mantine-Badge-root[data-variant="light"][data-color="grape"] {
	background: linear-gradient(135deg, var(--mantine-color-grape-6), var(--mantine-color-grape-7)) !important;
	color: white !important;
}

/* ===== СТИЛИ ДЛЯ ПАНЕЛИ ПЛЕЙЛИСТА ===== */
.playlist-panel {
	background: linear-gradient(145deg, var(--mantine-color-gray-0), rgba(255, 255, 255, 0.9));
	border: 1px solid var(--mantine-color-gray-2);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	overflow: hidden;
	width: 100%;
	max-width: 100%;
	height: auto;
}

.playlist-panel .mantine-Stack-root:last-child {
	padding-right: 8px;
	overflow-x: visible;
	overflow-y: auto;
}

.playlist-panel .mantine-Stack-root {
	height: 100%;
}

.playlist-panel .mantine-Card-root {
	height: 100%;
}

/* ===== СТИЛИ ДЛЯ ДВУХКОЛОНОЧНОГО ЛЕЙАУТА ===== */
.playlist-player-layout .mantine-SimpleGrid-root > div {
	display: flex;
	flex-direction: column;
}

.playlist-player-layout .mantine-SimpleGrid-root > div > .mantine-Card-root {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.playlist-panel:hover {
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

/* ===== СТИЛИ ДЛЯ ЭЛЕМЕНТОВ ПЛЕЙЛИСТА ===== */
.playlist-item {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border: 1px solid var(--mantine-color-gray-2);
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.9));
	position: relative;
	width: calc(100% - 8px);
	max-width: calc(100% - 8px);
	margin-left: 0;
	overflow: hidden;
	flex-shrink: 0;
	min-height: 60px;
}

.playlist-item:hover {
	background: linear-gradient(135deg, var(--mantine-color-blue-0), var(--mantine-color-gray-0));
	border-color: var(--mantine-color-blue-3);
	transform: translateX(8px);
	box-shadow: 0 4px 12px rgba(0, 120, 255, 0.1);
	width: calc(100% - 8px);
}

.playlist-item.is-current {
	background: linear-gradient(135deg, var(--mantine-color-blue-6), var(--mantine-color-blue-7));
	border-color: var(--mantine-color-blue-4);
	color: white;
	transform: translateX(8px);
	box-shadow: 0 6px 20px rgba(0, 120, 255, 0.4), 0 0 0 2px var(--mantine-color-blue-4);
	width: calc(100% - 8px);
}

.playlist-item.is-current .mantine-Text-root {
	color: white !important;
}

.playlist-item.is-current .mantine-Text-root[data-variant="dimmed"] {
	color: rgba(255, 255, 255, 0.8) !important;
}

.playlist-item.is-current::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: linear-gradient(180deg, var(--mantine-color-blue-5), var(--mantine-color-violet-5));
	border-radius: 0 2px 2px 0;
}

.playlist-item.is-active {
	animation: playlist-pulse 2s ease-in-out infinite;
}

@keyframes playlist-pulse {
	0%, 100% { box-shadow: 0 6px 20px rgba(0, 120, 255, 0.2); }
	50% { box-shadow: 0 8px 25px rgba(0, 120, 255, 0.3); }
}

/* ===== ТЕМНАЯ ТЕМА ДЛЯ ПЛЕЙЛИСТА ===== */
.playlist-panel {
	background: linear-gradient(145deg, var(--mantine-color-dark-7), var(--mantine-color-dark-6));
	border-color: var(--mantine-color-dark-4);
}

.playlist-item {
	background: linear-gradient(135deg, var(--mantine-color-dark-6), var(--mantine-color-dark-7));
	border-color: var(--mantine-color-dark-4);
}

.playlist-item:hover {
	background: linear-gradient(135deg, var(--mantine-color-dark-5), var(--mantine-color-blue-8));
	border-color: var(--mantine-color-blue-4);
}

.playlist-item.is-current {
	background: linear-gradient(135deg, var(--mantine-color-blue-6), var(--mantine-color-blue-7));
	border-color: var(--mantine-color-blue-4);
	color: white;
	box-shadow: 0 6px 20px rgba(0, 120, 255, 0.6), 0 0 0 2px var(--mantine-color-blue-4);
}

.playlist-item.is-current .mantine-Text-root {
	color: white !important;
}

.playlist-item.is-current .mantine-Text-root[data-variant="dimmed"] {
	color: rgba(255, 255, 255, 0.8) !important;
}

/* Стили для badge в текущем элементе плейлиста */
.playlist-item.is-current .mantine-Badge-root {
	background: rgba(255, 255, 255, 0.95) !important;
	color: var(--mantine-color-dark-8) !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
	font-weight: 700 !important;
	text-shadow: none !important;
}

.playlist-item.is-current .mantine-Badge-root[data-color="blue"] {
	background: var(--mantine-color-blue-1) !important;
	color: var(--mantine-color-blue-9) !important;
	border: 1px solid var(--mantine-color-blue-3) !important;
}

.playlist-item.is-current .mantine-Badge-root[data-color="grape"] {
	background: var(--mantine-color-grape-1) !important;
	color: var(--mantine-color-grape-9) !important;
	border: 1px solid var(--mantine-color-grape-3) !important;
}

/* Стили для иконки воспроизведения */
.playlist-item.is-current .tabler-icon {
	color: #FFD700 !important; /* Золотой цвет для лучшего контраста */
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}

/* Темная тема для badge в текущем элементе */
.playlist-item.is-current .mantine-Badge-root {
	background: rgba(255, 255, 255, 0.95) !important;
	color: var(--mantine-color-dark-8) !important;
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
	font-weight: 700 !important;
}

.playlist-item.is-current .mantine-Badge-root[data-color="blue"] {
	background: var(--mantine-color-blue-2) !important;
	color: var(--mantine-color-blue-9) !important;
	border: 1px solid var(--mantine-color-blue-4) !important;
}

.playlist-item.is-current .mantine-Badge-root[data-color="grape"] {
	background: var(--mantine-color-grape-2) !important;
	color: var(--mantine-color-grape-9) !important;
	border: 1px solid var(--mantine-color-grape-4) !important;
}

.playlist-item.is-current .tabler-icon {
	color: #FFD700 !important; /* Золотой цвет для темной темы */
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7));
}

/* ===== СТИЛИ ДЛЯ КАРТОЧКИ ИНФОРМАЦИИ ОБ АНИМЕ ===== */
.anime-info-card {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	background: linear-gradient(145deg, var(--mantine-color-gray-0), rgba(248, 250, 252, 0.9));
	border: 1px solid var(--mantine-color-gray-2);
	text-decoration: none !important;
	color: inherit !important;
}

.anime-info-card:hover {
	background: linear-gradient(145deg, var(--mantine-color-blue-0), var(--mantine-color-gray-0));
	border-color: var(--mantine-color-blue-3);
	box-shadow: 0 8px 25px rgba(0, 120, 255, 0.1);
	transform: translateY(-2px);
	text-decoration: none !important;
	color: inherit !important;
}

/* Темная тема для карточки информации об аниме */
.anime-info-card {
	background: linear-gradient(145deg, var(--mantine-color-dark-7), var(--mantine-color-dark-6));
	border-color: var(--mantine-color-dark-4);
	text-decoration: none !important;
	color: inherit !important;
}

.anime-info-card:hover {
	background: linear-gradient(145deg, var(--mantine-color-dark-6), var(--mantine-color-blue-9));
	border-color: var(--mantine-color-blue-4);
	text-decoration: none !important;
	color: inherit !important;
}


.profile-watched-episodes {
    color: white;
}

.profile-watched-movies {
    color: var(--planned-status);
}

.profile-total-hours {
    color: var(--finished-status);
}

.profile-watched-days {
    color: var(--watching-status);
}


.highlighted-section {
    background: #228be6;
    animation: blink 1s ease-in-out infinite;
}

@keyframes blink {
    0% { background: #228be6; }
    50% { background: transparent; }
    100% { background: #228be6; }
} 
.search-page-container {
	min-height: calc(100vh - 200px);
	background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
	padding: 2rem 0;
}

.search-form-card {
	backdrop-filter: blur(10px);
	background: rgba(30, 41, 59, 0.8);
	border: 1px solid rgba(100, 116, 139, 0.3);
}

.search-form-card:hover {
	border-color: rgba(100, 116, 139, 0.5);
	transition: border-color 0.2s ease;
}

.search-input-group {
	display: flex;
	gap: 1rem;
	align-items: end;
}

@media (max-width: 768px) {
	.search-input-group {
		flex-direction: column;
		align-items: stretch;
	}
	
	.search-page-container {
		padding: 1rem 0;
	}
}

.search-buttons-group {
	display: flex;
	gap: 1rem;
	justify-content: center;
}

@media (max-width: 768px) {
	.search-buttons-group {
		flex-direction: column;
	}
}

.category-select {
	min-width: 150px;
}

.search-title {
	text-align: center;
	margin-bottom: 2rem;
}

.search-subtitle {
	color: var(--mantine-color-dimmed);
	text-align: center;
	margin-bottom: 1rem;
} 

:root {
	--body-background: #111111;
	--dialog-content: var(--body-background);
	--main-background: #1B1B1B;
	--main-card: #1A1A1A;
	--main-border: #222;
	--main-button: #3A3A3A;
	--gray-text: #8C8C8C;
	--favorites-color: var(--red-500);
	--watching-status: rgba(100, 156, 104, 0.9);
	--planned-status: rgba(158, 104, 163, 0.9);
	--finished-status: rgba(93, 104, 161, 0.9);
	--dropped-status: rgba(179, 68, 68, 0.9);
	--success-border: #4ADE80;
	--error-border: #F87171;
	--warning-border: #FB923C;
	--info-border: #38BDF8;

	--error-color: #F87171;
}

:root {
	--font-family: 'Roboto', sans-serif;
}

body {
	font-family: var(--font-family);
	background-color: var(--body-background);
	margin: 0;
	padding: 0;
}

/* Отключение синего свечения при тапе на мобильное версии */
* {
	-webkit-tap-highlight-color: transparent;
}

a {
	text-decoration: none; /* Отключение подчеркивания */
	color: white; /* Отключение другого цвета для посещенных ссылок и т.д. */
}

img {
	border-radius: 6px;
	object-fit: cover;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Inter var', sans-serif;
	margin: 0;
}

/**/

.text-gray {
	color: var(--gray-text);
}

.text-xxs {
	font-size: 0.625rem;
}

/* image-overlay */
.image-overlay.left-top {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
}

.image-overlay.right-top {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
}

.image-overlay.left-bottom {
	position: absolute;
	bottom: 0.5rem;
	left: 0.5rem;
}

.image-overlay.right-bottom {
	position: absolute;
	bottom: 0.5rem;
	right: 0.5rem;
}

.image-overlay.bottom {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	bottom: 0;
	height: 1.5rem;
	border-radius: 0 0 6px 6px;
}

/* aspect-ratio */
.aspect-ratio-169 {
	aspect-ratio: 16 / 9;
}

.aspect-ratio-916 {
	aspect-ratio: 9 / 16;
}

.aspect-ratio-43 {
	aspect-ratio: 4 / 3;
}

.aspect-ratio-34 {
	aspect-ratio: 3 / 4;
}

.site-image {
	width: 24px;
	height: 24px;
	object-fit: cover;
}

/* Containers  */

/* Контейнер всего сайта */
.main-container {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
}

/* Контейнер страницы  */
.page-container {
	flex: 1 0 auto;
	min-height: 80vh;
}

/* Контейнер заголовка страницы */
.page-header-container {}

/* Контейнер содержимого страницы */
.page-content-container {
	padding: 0.75rem 0.5rem;
}

/* Контейнеры просмотрщиков списков */
.list-viewer .p-dataview-content .p-grid {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: 1.25rem;
}

.horizontal-viewer .p-dataview-content .p-grid {
	grid-template-columns: none;
	grid-auto-flow: column;
	grid-auto-columns: calc(100% / 1.9);
	overflow-x: auto;
	gap: 0.5rem;
}

.horizontal-fixed-viewer .p-dataview-content .p-grid {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	overflow-x: auto;
	gap: 0.5rem;
}

.horizontal-fixed-viewer .p-dataview-content .p-grid > * {
	flex-shrink: 0;
}

/* Messages */

.error-message {
	color: var(--error-color);
}

/* Media */

/* Мобильные устройства */
@media (max-width: 576px) {

}

/* Мобильные устройства + Планшет */
@media (max-width: 768px) {

	.page-header-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: sticky;
		width: 100%;
		min-height: 3.5rem;
		top: 0;
		background: var(--main-background);
		box-shadow: 0 0 20px 5px black;
		z-index: 5;
	}

	.page-content-container {
		position: relative;
		min-height: 100%;
	}

	.horizontal-viewer .p-dataview-content .p-grid::-webkit-scrollbar {
		display: none;
	}

	.horizontal-fixed-viewer .p-dataview-content .p-grid::-webkit-scrollbar {
		display: none;
	}

}

/* Планшет */
@media (min-width: 576px) and (max-width: 768px) {

	.horizontal-viewer .p-dataview-content .p-grid {
		grid-auto-columns: calc(100% / 4);
	}

}

/* ПК */
@media (min-width: 768px) {

	.main-container {
		max-width: 1200px;
	}

	.list-viewer .p-dataview-content .p-grid {
		gap: 2rem;
	}

	.horizontal-viewer .p-dataview-content .p-grid {
		gap: 1rem;
		grid-auto-columns: calc(100% / 6);
	}

}

@media (min-width: 768px) and (max-width: 1200px) {

	.page-content-container {
		padding: 1rem 0.5rem 0 0.5rem;
	}

}


.mantine-Grid-inner {
	max-width: 100vw;
}

/* DataView */
.p-dataview .p-dataview-header {
	background: inherit;
	border: none;
	padding: 8px 0 8px 0;
}

.p-dataview .p-dataview-footer {
	background: inherit;
	border: none;
	padding: 8px 0 8px 0;
}

.p-dataview-content {
	background: none;
}

.p-dataview-content .p-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 1.25rem 0.5rem;
}

.p-dataview-emptymessage {
	display: flex;
	justify-content: center;
	width: 100%;
	font-size: 1.5rem;
	font-weight: bold;
}

/* InputGroup */
.p-inputgroup.p-invalid:not(:has(.p-component:focus)) .p-inputgroup-addon {
	border-color: var(--error-border);
}

.p-inputgroup.p-invalid .p-component:not(:focus) {
	border-color: var(--error-border);
}

/* Toast */
.p-toast {
	z-index: calc(Infinity) !important; /* Уведомления поверх всех компонентов */
}

.p-toast-message-content {
	padding: 0.5rem;
}

/* Мобильные устройства */
@media (max-width: 576px) {

}

/* Мобильные устройства + Планшет */
@media (max-width: 768px) {

}

/* Планшет */
@media (min-width: 576px) and (max-width: 768px) {

	/* DataView */
	.p-dataview-content .p-grid {
		grid-template-columns: repeat(4, 1fr);
	}

}

/* ПК */
@media (min-width: 768px) {

	/* DataView */
	.p-dataview-content .p-grid {
		grid-template-columns: repeat(6, 1fr);
		grid-gap: 2rem 1rem;
	}

}


.icon.xxxs {
	font-size: 0.5rem;
}

.icon.xxs {
	font-size: 0.625rem;
}

.icon.xs {
	font-size: 0.75rem;
}

.icon.sm {
	font-size: 0.875rem;
}

.icon.md {
	font-size: 1rem;
}

.icon.lg {
	font-size: 1.125rem;
}

.icon.xl {
	font-size: 1.25rem;
}

/* ScrollTop */
.scroll-top {
	transform: translate(-1rem, -1rem);
}

/* Accordion с синим градиентом */

.accordion-blue-gradient .mantine-Accordion-control[data-active="true"] {
	background: linear-gradient(135deg, var(--mantine-color-dark-6), var(--mantine-color-blue-9));
}

.accordion-blue-gradient .mantine-Accordion-item {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	overflow: hidden;
}

.accordion-blue-gradient .mantine-Accordion-item[data-active="true"] {
	box-shadow: 0 12px 35px rgba(0, 120, 255, 0.15);
	border-color: var(--mantine-color-blue-3);
}

/* Мобильные устройства */
@media (max-width: 576px) {

}

/* Планшет */
@media (min-width: 576px) and (max-width: 768px) {

}

/* Мобильные устройства + Планшет */
@media (max-width: 768px) {

	/* Scroll-Top */
	.scroll-top {
		transform: translate(-0.5rem, calc(var(--bottom-menu-height) * -1));
	}

}

/* ПК */
@media (min-width: 768px) {

	.icon.xxxs {
		font-size: 0.625rem;
	}

	.icon.xxs {
		font-size: 0.75rem;
	}

	.icon.xs {
		font-size: 0.875rem;
	}

	.icon.sm {
		font-size: 1.125rem;
	}

	.icon.md {
		font-size: 1.25rem;
	}

	.icon.lg {
		font-size: 1.375rem;
	}

	.icon.xl {
		font-size: 1.5rem;
	}

}


.tiptap:first-child {
    margin-top: 0;
}

.tiptap table {
	border-collapse: collapse;
	margin: 0;
	overflow: hidden;
	table-layout: fixed;
	width: 100%;
}

.tiptap table td,
.tiptap table th {
	border: 1px solid var(--mantine-color-gray-3);
	box-sizing: border-box;
	min-width: 1em;
	padding: 6px 8px;
	position: relative;
}

.tiptap table th > * {
	margin-bottom: 0;
}

.tiptap table th {
	background-color: var(--mantine-color-gray-1);
	font-weight: bold;
	text-align: left;
}

.tiptap table .selectedCell:after {
	background: var(--mantine-color-gray-2);
	content: '';
	left: 0; right: 0; top: 0; bottom: 0;
	pointer-events: none;
	position: absolute;
	z-index: 2;
}
	
.tiptap table .column-resize-handle {
	background-color: var(--mantine-color-purple);
	bottom: -2px;
	pointer-events: none;
	position: absolute;
	right: -2px;
	top: 0;
	width: 4px;
}

.tiptap .tableWrapper {
	margin: 1.5rem 0;
	overflow-x: auto;
}

.tiptap.resize-cursor {
	cursor: ew-resize;
	cursor: col-resize;
}

/* Выделение выбранного элемента */
.ProseMirror .ProseMirror-selectednode {
	outline: 2px solid #228be6 !important;
	outline-offset: 2px;
	box-shadow: 0 0 0 2px rgba(34, 139, 230, 0.2);
}

/* Выделение для изображений */
.ProseMirror img.ProseMirror-selectednode {
	outline: 2px solid #228be6;
	outline-offset: 2px;
	transform: scale(1.02);
	box-shadow: 0 8px 24px rgba(34, 139, 230, 0.3);
}

/* Выделение для iframe */
.ProseMirror iframe.ProseMirror-selectednode {
	outline: 2px solid #228be6;
	outline-offset: 2px;
	transform: scale(1.02);
	box-shadow: 0 8px 24px rgba(34, 139, 230, 0.3);
}

.ProseMirror img {
	max-width: 100%;
	max-height: 400px;
	object-fit: scale-down;
}

/* Youtube container */
.ProseMirror [data-youtube-video] {
	display: flex;
	justify-content: center;
	align-items: center;
}

.anime-card__container {
	position: relative;
	margin-top: 10px;
	overflow: visible;
}

.anime-card__indicator {
	position: absolute;
	top: -10px;
	right: -4px;
	z-index: 1;
}

.anime-card__indicator .mantine-Badge-root {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.anime-card {
	cursor: pointer;
	height: 100%;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	transform: translateY(0);
	background: rgba(40, 51, 70, 0.8);
	border: 1px solid rgba(156, 163, 175, 0.3);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.anime-card:hover {
	transform: translateY(-4px);
	background: rgba(59, 130, 246, 0.15);
	border-color: rgba(59, 130, 246, 0.4);
	box-shadow: 0 4px 8px rgba(59, 130, 246, 0.2);
}

.anime-card-title {
	transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.anime-card:hover .anime-card-title {
	color: #60a5fa;
}

.anime-card__poster__main-container {
	position: relative;
	padding-top: 140%;
	overflow: hidden;
}

.anime-card__poster__transition-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: transform 0.3s ease;
}

.anime-card__poster__image-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.anime-card__poster {
	position: relative;
}

.anime-card__poster img {
	width: 100%;
	height: 100%;
}

.anime-card__poster .rating {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.anime-card__poster .watch-status {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	bottom: 0;
	height: 1.5rem;
	color: white;
}

.horizontal-anime-card {
    cursor: pointer;
	height: 100%;
    transition: transform 0.2s ease;
    transform: translateY(0);
}

.horizontal-anime-card__poster__main-container {
	display: flex;
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
}

.horizontal-anime-card__poster__transition-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: transform 0.3s ease;
}

.horizontal-anime-card__poster__image-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.horizontal-anime-card__poster img {
	width: 140px;
	height: 140px;
	object-fit: scale-down;
}

.horizontal-anime-card__poster-transition {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
}

/* Header Banner */
.header-banner {
    position: relative;
    height: 360px;
    width: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    overflow: hidden;
}

.header-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5));
    backdrop-filter: blur(1px);
    z-index: 1;
}

.header-banner .poster-container {
    position: absolute;
    top: 30px;
    left: 30px;
    bottom: 30px;
    z-index: 2;
    display: flex;
    align-items: center;
}

.header-banner .poster-container .anime-poster {
    width: 200px;
    height: 300px;
    box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.5);
}

.header-banner .info-container {
	position: absolute;
	top: 30px;
	right: 30px;
	left: 260px;
	bottom: 30px;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(10px);
	border-radius: 8px;
	padding: 20px 30px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* Animations */
@keyframes shake {
	0%, 100% 	{ transform: rotate(0deg) }
	25%       	{ transform: rotate(5deg) }
	75%       	{ transform: rotate(-5deg) }
}

.shake-icon {
	animation: shake 2s infinite ease-in-out;
	will-change: transform;
}

@keyframes pulse {
	0%,100% 	{ transform: scale(1) }
	50%     	{ transform: scale(1.1) }
}

.pulse-icon {
	animation: pulse 2s infinite ease-in-out;
	will-change: transform;
}

@keyframes bounce {
	0%, 100% 	{ transform: translateY(0); }
	50%       	{ transform: translateY(-5px); }
}

.bounce-icon {
	animation: bounce 2s infinite ease-in-out;
	will-change: transform;
}

@keyframes fade-opacity {
	0%, 100% 	{ opacity: 1; }
	50%       	{ opacity: 0.6; }
}

.fade-icon {
	animation: fade-opacity 2s infinite ease-in-out;
	will-change: opacity;
}

/* Мобильные устройства + Планшет */
@media (max-width: 768px) {

	.anime-card:hover {
		transform: translateY(0);
	}

	.anime-card__poster__main-container {
		padding-top: 120%;
	}

}

/* ПК */
@media (min-width: 768px) {

}



.movie-card {
	cursor: pointer;
	transition: transform 0.2s ease;
	height: 100%;
	transform: translateY(0);
}

.movie-card__poster__main-container {
	position: relative;
	padding-top: 140%;
	overflow: hidden;
}

.movie-card__poster__transition-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: transform 0.3s ease;
}

.movie-card__poster__image-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.movie-card__poster {
	position: relative;
}

.movie-card__poster img {
	width: 100%;
	height: 100%;
}

.movie-card__poster .rating {
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.movie-card__poster .watch-status {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	bottom: 0;
	height: 1.5rem;
	color: white;
	border-radius: 0 0 6px 6px;
}

/* Grid */
.movies-grid .p-dataview-content .p-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 0.75rem 0.5rem;
}

/* Мобильные устройства + Планшет */
@media (max-width: 768px) {

	.movie-card__poster__main-container {
		padding-top: 120%;
	}

}

/* ПК */
@media (min-width: 768px) {

	/* Grid */
	.movies-grid .p-dataview-content .p-grid {
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 1.25rem;
	}

}