@charset "UTF-8";

/*!
 * Katarina Templates base v2.0
 * Copyright 2021
 * Dark Cyberpunk Theme
 */

:root {
	--dark-bg: #0a0a14;
	--dark-bg-block: #151522;
	--dark-bg-hover: rgba(0, 255, 255, 0.15);
	--dark-color: #c0c0ff;
	--dark-a-hover: #00ffff;
	--dark-transition: 0.3s;
	--cyber-neon: #00ffff;
	--cyber-pink: #ff00ff;
	--cyber-green: #00ff00;
	--cyber-grid: rgba(0, 255, 255, 0.1);
	--cyber-glow: 0 0 10px var(--cyber-neon), 0 0 20px var(--cyber-neon);
}


/* Cyberpunk styles */

body.dark {
	background: var(--dark-bg);
	color: var(--dark-color) !important;
	background-image: 
		linear-gradient(var(--cyber-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--cyber-grid) 1px, transparent 1px);
	background-size: 30px 30px;
}

.dark .card {
	background: var(--dark-bg-block);
	border: 1px solid rgba(0, 255, 255, 0.3);
	border-radius: 10px;
	box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
}

.dark a {
	color: var(--dark-color);
	text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}

.dark a:hover {
	color: var(--cyber-neon) !important;
	text-shadow: var(--cyber-glow);
}


/* Cyberpunk header */

.dark .bg-header {
	background-color: rgba(10, 10, 20, 0.9) !important;
	backdrop-filter: blur(10px) !important;
	border-bottom: 2px solid var(--cyber-neon);
	box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
}

.dark .search-wrapper {
	background: var(--dark-bg-block);
	box-shadow: 0 0 15px rgba(0, 255, 255, 0.2) !important;
	border: 1px solid var(--cyber-neon);
}

.dark #searchsuggestions {
	background: var(--dark-bg-block);
	border: 1px solid var(--cyber-neon);
}

.dark #searchsuggestions a:hover {
	background: var(--dark-bg-hover);
	border-radius: 10px;
	color: var(--cyber-neon);
}

.dark .add-btn {
	background: var(--dark-bg-hover);
	border: 1px solid var(--cyber-pink);
	color: var(--cyber-pink);
}

.dark .add-btn:hover {
	background: rgba(255, 0, 255, 0.3);
	box-shadow: 0 0 10px var(--cyber-pink);
}

.dark .link-dark {
	color: var(--dark-color) !important;
}

.dark .profile-btn {
	color: var(--dark-color) !important;
	border-left: 2px solid var(--cyber-neon);
}

.dark .dropdown-menu {
	background: var(--dark-bg-block);
	border: 1px solid var(--cyber-neon);
	box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
}

.dark .dropdown-item {
	color: var(--dark-color) !important;
}

.dark .dropdown-item:hover {
	background: var(--dark-bg-hover) !important;
	color: var(--cyber-neon) !important;
}

.dark .dropdown-item:focus {
	background: var(--dark-bg-hover) !important;
}

.dark .dropdown-item:hover,
.dropdown-item:focus {
	color: var(--cyber-neon);
	background-color: var(--dark-bg-hover) !important;
}

.dark .bg-dark {
	background: var(--dark-bg-block) !important;
}

.dark .app-name:hover {
	color: var(--cyber-neon) !important;
	text-shadow: var(--cyber-glow);
}

.dark .popover-header {
	background: var(--dark-bg-hover);
	border-bottom: 1px solid var(--cyber-neon);
}

.dark .popover {
	background: var(--dark-bg-block);
	border: 1px solid var(--cyber-neon);
}

.dark .popover-body {
	color: var(--dark-color) !important;
}

.dark .popover-arrow::after {
	border-bottom-color: var(--dark-bg-hover) !important;
}

.dark .logo-dark {
	fill: var(--cyber-neon) !important;
	filter: drop-shadow(0 0 5px var(--cyber-neon));
}


/* Cyberpunk panel */

.dark .offcanvas {
	background: var(--dark-bg-block) !important;
	border-left: 2px solid var(--cyber-pink);
}

.dark .main-bg {
	background: var(--dark-bg) !important;
}

.dark .list-e:hover {
	background: var(--dark-bg-hover);
	border-left: 3px solid var(--cyber-green);
}

.dark .list-e a {
	color: var(--dark-color) !important;
}


/* Cyberpunk sidebar */

.dark .bg-white {
	background: var(--dark-bg-block) !important;
	border: 1px solid rgba(0, 255, 255, 0.2);
}

.dark .color-fix a {
	color: var(--dark-color) !important;
}

.dark .com:hover {
	background: var(--dark-bg-hover);
	border-left: 3px solid var(--cyber-pink);
}

.dark .title_quote {
	background: var(--dark-bg-hover) !important;
	border: 1px solid var(--cyber-neon);
	border-left: 5px solid var(--cyber-pink);
}

.dark .quote {
	background: var(--dark-bg-hover) !important;
	border: 1px solid var(--cyber-neon);
}


/* Cyberpunk nav */

.dark .app-sidebar-link {
	color: var(--dark-color) !important;
}

.dark .app-sidebar-link:hover {
	color: var(--cyber-neon) !important;
	background: var(--dark-bg-hover) !important;
	border-left: 3px solid var(--cyber-neon);
}

.dark .active {
	background: var(--dark-bg-block) !important;
	border-left: 3px solid var(--cyber-green);
}

.dark .active-nav {
	background: var(--dark-bg-hover) !important;
}


/* Cyberpunk shortstory */

.dark .card-title {
	color: var(--dark-color) !important;
}

.dark .nav-link {
	color: var(--dark-color) !important;
}

.dark .link-log a {
	color: var(--dark-color) !important;
}

.dark .fix-btn {
	color: var(--dark-color) !important;
}

.dark #dropmenudiv {
	background: var(--dark-bg-block) !important;
	border: 1px solid var(--cyber-neon);
	border-color: var(--cyber-neon);
	box-shadow: var(--cyber-glow);
}

.dark #dropmenudiv a:hover {
	background: var(--dark-bg-hover);
	color: var(--cyber-neon);
}

.dark .like a:hover {
	color: var(--cyber-pink) !important;
	text-shadow: 0 0 10px var(--cyber-pink);
}

.dark .card-title:hover {
	color: var(--cyber-neon) !important;
	text-shadow: var(--cyber-glow);
	transition: var(--dark-transition);
}

.dark .card-title {
	transition: var(--dark-transition);
}


/* Cyberpunk fullstory */

.dark .ya-share2 {
	color: var(--dark-color) !important;
}

.dark .btn-dark {
	background: var(--dark-bg-hover) !important;
	border: 1px solid var(--cyber-neon);
	color: var(--cyber-neon);
}

.dark .btn-dark:hover {
	background: rgba(0, 255, 255, 0.3) !important;
	box-shadow: var(--cyber-glow);
}

.dark .bg-general {
	background: var(--dark-bg-hover) !important;
}

.dark .mass_comments_action {
	border-top: 2px solid var(--cyber-neon) !important;
}

.dark .bbcodes {
	background-color: var(--dark-bg-hover);
	border: 1px solid var(--cyber-neon);
}


/* Cyberpunk userinfo */

.dark .link-rss a {
	color: var(--dark-color) !important;
}

.dark .link-soc {
	color: var(--dark-color) !important;
}

.dark .btn-outline-dark {
	color: var(--dark-color) !important;
	border-color: var(--cyber-neon) !important;
}

.dark .btn-outline-dark:hover {
	background: var(--dark-bg-hover);
	color: var(--cyber-neon);
	box-shadow: var(--cyber-glow);
}

.dark .border-start {
	border-left: 1px solid var(--cyber-neon) !important;
}

.dark .list-group-item {
	background: var(--dark-bg-block);
	color: var(--dark-color);
	border: 1px solid rgba(0, 255, 255, 0.2);
}

.dark .soc-vk {
	background-color: var(--dark-bg);
}

.dark .soc-tg {
	background-color: var(--dark-bg);
}

.dark .soc-mail {
	background-color: var(--dark-bg);
}


/* Cyberpunk PM */

.dark .pm_status {
	background: var(--dark-bg-hover);
	border-left: 3px solid var(--cyber-pink);
}


/* Cyberpunk login */

.dark .modal-content {
	background: var(--dark-bg-block) !important;
	border: 2px solid var(--cyber-neon);
	box-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
}

.dark .form-control {
	background-color: rgba(0, 255, 255, 0.1) !important;
	border: 1px solid var(--cyber-neon);
	color: var(--cyber-neon);
}

.dark .form-control:focus {
	box-shadow: 0 0 10px var(--cyber-neon);
}

.dark .p-list li:hover {
	background: var(--dark-bg-block) !important;
	border-radius: 15px;
	border-left: 3px solid var(--cyber-green);
}


/* Cyberpunk Popup */

.dark .ui-dialog {
	background: var(--dark-bg-block) !important;
	border: 2px solid var(--cyber-pink);
	box-shadow: 0 0 25px rgba(255, 0, 255, 0.4);
}

.dark button {
	color: var(--dark-color) !important;
}


/* Cyberpunk Сomments */

.dark .com-autor {
	background-color: var(--dark-bg-hover);
	border-left: 4px solid var(--cyber-green);
}


/* Cyberpunk Tosts */

.dark .toast {
	background-color: var(--dark-bg-block) !important;
	border: 1px solid var(--cyber-neon);
	box-shadow: var(--cyber-glow);
}

.dark .toast-header {
	background-color: var(--dark-bg-block) !important;
	color: var(--dark-color) !important;
	border-bottom: 1px solid var(--cyber-neon);
}


/* Cyberpunk engine styles */

.dark .ui-dialog button {
	background-color: var(--dark-bg-hover);
	border: 1px solid var(--cyber-neon);
}

.dark .ui-dialog button:hover {
	background-color: rgba(0, 255, 255, 0.3);
}

.dark .sort>li a {
	color: var(--dark-color);
}

.dark .page_next-prev {
	background-color: var(--dark-bg-block) !important;
	border: 1px solid var(--cyber-neon);
}

.dark .pages span {
	color: var(--dark-color);
	background-color: var(--dark-bg-block) !important;
	border: 1px solid var(--cyber-neon);
}

.dark .pages a:hover {
	background-color: var(--dark-bg-hover);
	color: var(--cyber-neon);
}

.dark .xfields input {
	background-color: var(--dark-bg-hover) !important;
	border: 1px solid var(--cyber-neon);
	color: var(--cyber-neon);
}

.dark .tox .tox-menubar {
	background-color: var(--dark-bg-hover) !important;
	border-bottom: 1px solid var(--cyber-neon);
}

.dark .quick-edit-text {
	background-color: var(--dark-bg-hover) !important;
	border: 1px solid var(--cyber-neon);
	color: var(--cyber-neon);
}


/* Additional Cyberpunk effects */

.dark .block {
	border-radius: 10px !important;
	border: 1px solid rgba(0, 255, 255, 0.3);
}

.dark .btn-primary {
	background: linear-gradient(45deg, #00ffff, #ff00ff);
	border: none;
	color: #000;
	font-weight: bold;
}

.dark .btn-primary:hover {
	box-shadow: 0 0 20px #ff00ff;
}

.dark ::selection {
	background: rgba(0, 255, 255, 0.5);
	color: #000;
}

.dark .scrollbar::-webkit-scrollbar {
	width: 10px;
	background: var(--dark-bg);
}

.dark .scrollbar::-webkit-scrollbar-thumb {
	background: var(--cyber-neon);
	border-radius: 5px;
}

.dark .pulse {
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.7); }
	70% { box-shadow: 0 0 0 10px rgba(0, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(0, 255, 255, 0); }
}