/* FiveAPK dark minimal DLE theme */

@font-face {
	font-family: "FontAwesome";
	src: url("../fonts/fontawesome-webfont.woff2") format("woff2"),
		url("../fonts/fontawesome-webfont.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

:root {
	--bg: #090b10;
	--bg-soft: #0e121a;
	--panel: #141925;
	--panel-2: #191f2d;
	--line: rgba(255,255,255,.08);
	--line-strong: rgba(255,255,255,.14);
	--text: #f4f7fb;
	--muted: #98a3b4;
	--muted-2: #687386;
	--accent: #58d68d;
	--accent-2: #4aa3ff;
	--danger: #ff5b6e;
	--warning: #ffd166;
	--shadow: 0 18px 50px rgba(0,0,0,.28);
	--radius: 8px;
}

* {box-sizing: border-box; margin: 0; padding: 0;}
html {min-width: 320px; scroll-behavior: smooth;}
body {
	min-height: 100%;
	color: var(--text);
	background:
		radial-gradient(circle at 15% 0%, rgba(88,214,141,.08), transparent 32rem),
		radial-gradient(circle at 85% 6%, rgba(74,163,255,.08), transparent 34rem),
		var(--bg);
	font: 14px/1.55 Inter, "Segoe UI", Roboto, Arial, sans-serif;
}
article, aside, footer, header, main, nav, section {display: block;}
ol, ul {list-style: none;}
img {display: block; max-width: 100%;}
a {color: inherit; text-decoration: none;}
a:hover {color: var(--accent);}
button, input, select, textarea {font: inherit;}
button {cursor: pointer;}
h1, h2, h3, h4, h5 {font-weight: 800; line-height: 1.15;}
b, strong {font-weight: 800;}
code {
	padding: 2px 6px;
	border-radius: 6px;
	background: rgba(255,255,255,.07);
	color: #dbe8ff;
}

.clearfix:after {content: ""; display: table; clear: both;}
.hidden, #dofullsearch {display: none !important;}
.nowrap {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.img-fit, .img-box {overflow: hidden; position: relative;}
.img-fit img {width: 100%; height: 100%; object-fit: cover;}
.img-box img {width: 100%; min-height: 100%; object-fit: cover;}
.fx-row {display: flex; flex-wrap: wrap; justify-content: space-between;}
.fx-col {display: flex; flex-direction: column;}
.fx-center {justify-content: center;}
.fx-middle {align-items: center;}
.fx-start {justify-content: flex-start;}
.fx-first {order: -1;}
.fx-last {order: 10;}
.fx-1 {flex: 1 1 0; min-width: 0; max-width: 100%;}
.anim-all {transition: all .2s ease;}
.fa {font-family: "FontAwesome"; font-style: normal;}

.wrap-center {
	width: min(1360px, calc(100% - 40px));
	margin: 0 auto;
	position: relative;
	z-index: 2;
}
.site-shell {min-height: 100vh; overflow: hidden;}

input[type="text"],
input[type="password"],
select,
textarea {
	width: 100%;
	min-height: 42px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(255,255,255,.05);
	color: var(--text);
	box-shadow: none;
	padding: 0 14px;
	outline: none;
}
textarea {min-height: 120px; padding: 14px; resize: vertical;}
input::placeholder, textarea::placeholder {color: var(--muted-2);}
input:focus, select:focus, textarea:focus {border-color: rgba(88,214,141,.55); background: rgba(255,255,255,.07);}
.button, .btn, button:not(.color-btn):not([class*=fr]),
html input[type="button"], input[type="reset"], input[type="submit"], .usp-btn a, .usp-edit a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0 18px;
	border-radius: var(--radius);
	border: 1px solid rgba(88,214,141,.45);
	background: var(--accent);
	color: #05110a;
	font-weight: 800;
}

/* Header */
.header {
	position: sticky;
	top: 0;
	z-index: 999;
	background: rgba(9,11,16,.82);
	border-bottom: 1px solid var(--line);
	backdrop-filter: blur(18px);
}
.header-in {min-height: 72px; gap: 18px;}
.logo {
	width: 178px;
	min-height: 48px;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
.logo img {max-height: 44px; object-fit: contain;}
.header button.btn-menu,
.header button.btn-search {
	display: none;
	width: 42px;
	height: 42px;
	min-height: 42px;
	padding: 0;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: var(--panel);
	color: var(--text);
	box-shadow: none;
}
.search-wrap {max-width: 620px;}
.search-box {position: relative;}
.search-box input {
	height: 42px;
	padding: 0 58px 0 16px;
	border-radius: 999px;
	background: rgba(255,255,255,.06);
}
.search-box button {
	position: absolute;
	right: 0;
	top: 50%;
	width: 48px;
	height: 42px;
	min-height: 0;
	padding: 0;
	transform: translateY(-50%);
	border-radius: 0 999px 999px 0;
	border: 0;
	background: rgba(88,214,141,.95);
	color: #04120a;
	box-shadow: inset 1px 0 0 rgba(255,255,255,.12);
	transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.search-box button:hover {
	transform: translateY(-50%);
	background: var(--accent);
	box-shadow: inset 1px 0 0 rgba(255,255,255,.12), 0 8px 20px rgba(88,214,141,.16);
}
#searchsuggestions {
	overflow: hidden !important;
	width: min(520px, calc(100vw - 24px)) !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--radius) !important;
	background: #111722 !important;
	box-shadow: var(--shadow) !important;
	color: var(--text) !important;
}
#searchsuggestions a,
#searchsuggestions span,
#searchsuggestions div {
	color: inherit;
}
.fast-search-item {
	display: grid !important;
	grid-template-columns: 46px minmax(0, 1fr);
	gap: 10px;
	padding: 10px;
	border-bottom: 1px solid var(--line);
	background: rgba(255,255,255,.02);
}
.fast-search-item:hover {
	background: rgba(88,214,141,.08);
	color: var(--text);
}
.fast-search-img {
	width: 46px;
	height: 46px;
	border-radius: 11px;
	background: var(--panel-2);
}
.fast-search-title {
	overflow: hidden;
	color: var(--text);
	font-size: 13px;
	font-weight: 900;
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fast-search-text {
	display: -webkit-box;
	overflow: hidden;
	margin-top: 4px;
	color: var(--muted);
	font-size: 11px;
	line-height: 1.35;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
#searchsuggestions .seperator,
#searchsuggestions center,
#searchsuggestions .notfound {
	display: block;
	padding: 10px;
	background: rgba(255,255,255,.035);
	color: var(--muted) !important;
	font-size: 12px;
	text-align: center;
}
.login-btns > * {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin-left: 8px;
	background: var(--panel);
	border: 1px solid var(--line);
	color: var(--text);
}

/* Top navigation */
.topbar {
	margin-top: 18px;
	z-index: 800;
	overflow: visible;
}
.tmenu {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	min-height: 58px;
	padding: 8px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(20,25,37,.72);
	box-shadow: var(--shadow);
	overflow: visible;
}
.tmenu > li {position: relative;}
.tmenu > li > a {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 42px;
	padding: 0 14px;
	border-radius: var(--radius);
	color: var(--muted);
	font-weight: 750;
}
.tmenu > li > a:hover, .tmenu .menuactive > a {
	background: rgba(255,255,255,.06);
	color: var(--text);
}
.tmenu .fa {color: var(--accent);}
.hidden-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	width: 230px;
	padding: 8px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #121722;
	box-shadow: var(--shadow);
}
.hidden-menu a {
	display: block;
	padding: 10px 12px;
	border-radius: 6px;
	color: var(--muted);
}
.hidden-menu a:hover {background: rgba(255,255,255,.06); color: var(--text);}
.topbar .share-box {display: none;}

/* Layout */
.wrap-main {padding: 28px 0 44px;}
.cols {gap: 24px; align-items: flex-start;}
.col-left, .col-right {width: 200px; flex: 0 0 200px;}
.content {min-width: 0;}
.side-box, .sect, .pages {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(20,25,37,.82);
	box-shadow: var(--shadow);
}
.side-box {padding: 16px;}
.side-box + .side-box {margin-top: 18px;}
.side-bt {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	color: var(--text);
	font-size: 16px;
	font-weight: 850;
}
.side-bt .fa {color: var(--accent);}
.smenu {
	display: grid;
	gap: 5px;
}
.smenu a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 36px;
	padding: 0 30px 0 12px;
	border: 1px solid transparent;
	border-radius: var(--radius);
	background: transparent;
	color: var(--muted);
	font-size: 13px;
	font-weight: 700;
	transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}
.smenu a:before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(74,163,255,.86);
	flex: 0 0 auto;
	box-shadow: 0 0 0 3px rgba(74,163,255,.08);
}
.smenu a:after {
	content: "\f105";
	font-family: "FontAwesome";
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--muted-2);
	font-size: 12px;
	opacity: 0;
	transition: opacity .16s ease, right .16s ease;
}
.smenu a:hover,
.smenu .active a,
.smenu a.is-active {
	border-color: rgba(88,214,141,.22);
	background: rgba(88,214,141,.08);
	color: var(--text);
	transform: translateX(2px);
}
.smenu a:hover:before,
.smenu .active a:before,
.smenu a.is-active:before {
	background: var(--accent);
	box-shadow: 0 0 0 3px rgba(88,214,141,.12);
}
.smenu a:hover:after,
.smenu .active a:after,
.smenu a.is-active:after {
	right: 10px;
	opacity: 1;
}

.sect {padding: 22px;}
.sect + .sect, .sect + #dle-content {margin-top: 24px;}
.sect-header {gap: 14px; margin-bottom: 18px;}
.sect-title {
	font-size: 22px;
	color: var(--text);
	letter-spacing: 0;
}
.sect-link, .download-anchor {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 38px;
	padding: 0 14px;
	border-radius: var(--radius);
	background: rgba(88,214,141,.12);
	border: 1px solid rgba(88,214,141,.28);
	color: var(--accent);
	font-size: 13px;
	font-weight: 850;
}
.sect-link:hover, .download-anchor:hover {background: var(--accent); color: #06120b;}
.pages {padding: 24px;}

/* Home page */
.home-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 24px;
	align-items: center;
	padding: 28px;
	background:
		linear-gradient(135deg, rgba(88,214,141,.12), transparent 44%),
		linear-gradient(225deg, rgba(74,163,255,.1), transparent 42%),
		rgba(20,25,37,.86);
}
.home-eyebrow {
	margin-bottom: 10px;
	color: var(--accent);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.home-hero h1 {
	max-width: 640px;
	margin: 0;
	font-size: clamp(32px, 5vw, 54px);
	line-height: 1.05;
	letter-spacing: 0;
}
.home-hero p {
	max-width: 650px;
	margin-top: 14px;
	color: var(--muted);
	font-size: 15px;
	line-height: 1.75;
}
.home-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 20px;
}
.sect-link.ghost {
	background: rgba(255,255,255,.045);
	border-color: var(--line);
	color: var(--muted);
}
.sect-link.ghost:hover {
	background: rgba(255,255,255,.075);
	color: var(--text);
}
.home-hero-stats {
	display: grid;
	gap: 10px;
}
.home-hero-stats div {
	padding: 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(255,255,255,.045);
}
.home-hero-stats span {
	display: block;
	margin-bottom: 4px;
	color: var(--accent);
	font-size: 12px;
	font-weight: 900;
}
.home-hero-stats b {
	color: var(--text);
	font-size: 18px;
}
.home-cat-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}
.home-cat-grid a {
	min-height: 54px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(255,255,255,.035);
	color: var(--muted);
	font-weight: 850;
	transition: transform .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}
.home-cat-grid a:hover {
	transform: translateY(-2px);
	border-color: rgba(88,214,141,.3);
	background: rgba(88,214,141,.09);
	color: var(--text);
}
.home-cat-grid .fa {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: rgba(88,214,141,.1);
	color: var(--accent);
}

/* Pagination */
.navigation,
.bottom-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 22px;
	color: var(--muted);
	font-size: 13px;
}
.pagi-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
.navigation a,
.navigation span,
.pagi-nav a,
.pagi-nav span,
.pprev a,
.pnext a,
.pprev > span,
.pnext > span {
	min-width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(255,255,255,.045);
	color: var(--muted);
	font-weight: 850;
}
.navigation a:hover,
.pagi-nav a:hover,
.pprev a:hover,
.pnext a:hover {
	border-color: rgba(88,214,141,.38);
	background: rgba(88,214,141,.12);
	color: var(--text);
}
.navigation span,
.pagi-nav > span:not(.nav_ext) {
	border-color: rgba(88,214,141,.42);
	background: var(--accent);
	color: #06120b;
}
.navigation span.nav_ext,
.pagi-nav span.nav_ext {
	border-color: transparent;
	background: transparent;
	color: var(--muted-2);
}

/* Cards */
.short-items {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}
.short-item {min-width: 0;}
.short-in {
	position: relative;
	height: 100%;
	min-height: 230px;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
	padding: 16px 14px;
	transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.short-in:hover {
	transform: translateY(-3px);
	border-color: rgba(88,214,141,.35);
	background: linear-gradient(180deg, rgba(88,214,141,.095), rgba(255,255,255,.03));
}
.short-link {display: block; text-align: center;}
.short-img-holder {position: relative; padding: 8px 0 14px;}
.short-img {
	width: 86px;
	height: 86px;
	margin: 0 auto;
	overflow: hidden;
	border-radius: 22px;
	background: var(--panel-2);
	box-shadow: 0 14px 34px rgba(0,0,0,.32);
}
.short-title {
	height: 38px;
	margin-bottom: 8px;
	color: var(--text);
	font-size: 14px;
	font-weight: 850;
	line-height: 1.35;
	white-space: normal;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.short-desc {
	max-height: 48px;
	overflow: hidden;
	color: var(--muted);
	font-size: 12px;
	line-height: 1.55;
	text-align: center;
}
.short-bottom {margin-top: 10px; text-align: center;}
.short-label {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	min-width: 42px;
	height: 22px;
	line-height: 22px;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--accent);
	color: #06120b;
	font-size: 10px;
	font-weight: 900;
	text-transform: uppercase;
	text-align: center;
}
.short-upd {background: var(--accent-2); color: #06101f;}
.short-new {background: var(--warning); color: #171101;}

/* Full story */
.full-hero {
	padding: 24px;
	background:
		linear-gradient(135deg, rgba(88,214,141,.11), transparent 42%),
		rgba(20,25,37,.86);
}
.full-head {gap: 20px;}
.full-icon {
	position: relative;
	width: 132px;
	height: 132px;
	overflow: hidden;
	border-radius: 28px;
	background: var(--panel-2);
	box-shadow: 0 20px 45px rgba(0,0,0,.38);
	flex: 0 0 auto;
}
.article-cover {width: 180px; border-radius: var(--radius);}
.full-title h1 {
	font-size: clamp(26px, 4vw, 42px);
	letter-spacing: 0;
}
.full-title h1 b {color: var(--accent); font-size: .72em;}
.full-subtitle {
	margin-top: 10px;
	color: var(--muted);
	font-size: 15px;
}
.frate {
	width: 160px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: stretch;
}
.mrating, .srate-bar {
	min-height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: rgba(255,255,255,.07);
	color: var(--warning);
	font-weight: 900;
}
.short-bottom .mrating {
	position: relative;
	gap: 8px;
	min-height: 28px;
	padding: 0 10px;
	background: rgba(255,255,255,.055);
	color: var(--muted);
	font-size: 0;
}
.short-bottom .mrating img,
.short-bottom .mrating svg {
	display: none !important;
}
.short-bottom .mrating:before {
	content: "Рейтинг";
	color: var(--muted);
	font-size: 11px;
	font-weight: 850;
}
.short-bottom .mrating:after {
	content: "";
	width: 48px;
	height: 6px;
	border-radius: 999px;
	background:
		linear-gradient(90deg, var(--accent) 0 72%, rgba(255,255,255,.12) 72% 100%);
	box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset;
}
.frate .mrating img {
	display: inline-block;
	width: 16px;
	height: 16px;
	object-fit: contain;
	vertical-align: middle;
}
.mrating-count {
	color: var(--muted);
	font-size: 12px;
	text-align: center;
}
.rate3-short {display: grid; gap: 8px;}
.sr-plus1, .sr-minus1 {
	min-height: 38px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(255,255,255,.05);
	color: var(--muted);
}
.sr-plus1:hover {border-color: rgba(88,214,141,.4); color: var(--accent);}
.sr-minus1:hover {border-color: rgba(255,91,110,.4); color: var(--danger);}
.r3-hide {display: none;}

.finfo {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}
.finfo li {
	position: relative;
	min-width: 0;
	min-height: 80px;
	padding: 14px 14px 14px 46px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background:
		linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.025)),
		rgba(255,255,255,.025);
	transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.finfo li:hover {
	transform: translateY(-2px);
	border-color: rgba(88,214,141,.26);
	background:
		linear-gradient(135deg, rgba(88,214,141,.09), rgba(255,255,255,.026)),
		rgba(255,255,255,.03);
}
.finfo li > i {
	position: absolute;
	left: 14px;
	top: 15px;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 7px;
	background: rgba(88,214,141,.1);
	color: var(--accent);
	font-size: 12px;
}
.finfo div {
	margin-bottom: 4px;
	color: var(--muted-2);
	font-size: 11px;
	font-weight: 850;
	text-transform: uppercase;
}
.finfo span {
	display: block;
	max-width: 100%;
	overflow: hidden;
	color: var(--text);
	font-size: 14px;
	font-weight: 850;
	line-height: 1.35;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.finfo a {color: var(--accent);}
.finfo span a {
	display: inline;
	white-space: nowrap;
}

.full-text {
	color: #d7deea;
	font-size: 15px;
	line-height: 1.8;
}
.full-text p {margin: 0 0 16px;}
.full-text h2, .full-text h3 {
	margin: 24px 0 12px;
	color: var(--text);
}
.full-text ul, .full-text ol {
	margin: 12px 0 16px 22px;
	list-style: disc;
}
.full-text ol {list-style: decimal;}
.full-text li {margin-bottom: 8px;}
.full-text img {
	display: inline-block;
	border-radius: var(--radius);
	margin: 12px 0;
}
.fmessage {
	padding: 16px;
	border: 1px solid rgba(88,214,141,.18);
	border-radius: var(--radius);
	background: rgba(88,214,141,.06);
}
.download-buttons {
	gap: 12px;
	margin-bottom: 16px;
	justify-content: flex-start;
}
.download-layout {
	display: grid;
	grid-template-columns: minmax(280px, 1fr) 260px;
	gap: 18px;
	align-items: start;
}
.download-primary {
	min-width: 0;
}
.download-buttons a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 64px;
	width: min(460px, 100%);
	max-width: 100%;
	padding: 10px 16px 10px 10px;
	border-radius: var(--radius);
	border: 1px solid rgba(88,214,141,.36);
	background:
		linear-gradient(135deg, rgba(88,214,141,.22), rgba(74,163,255,.08)),
		rgba(255,255,255,.045);
	color: var(--text);
	font-weight: 850;
	box-shadow: 0 14px 32px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
	transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.download-icon {
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--accent);
	color: #06120b;
	font-size: 16px;
	box-shadow: 0 8px 20px rgba(88,214,141,.22);
}
.download-buttons a:hover {
	transform: translateY(-2px);
	border-color: rgba(88,214,141,.62);
	background:
		linear-gradient(135deg, rgba(88,214,141,.28), rgba(74,163,255,.12)),
		rgba(255,255,255,.06);
	color: var(--text);
}
.download-buttons a.download-waiting {
	pointer-events: auto;
	cursor: wait;
	border-color: rgba(255,209,102,.45);
	background:
		linear-gradient(135deg, rgba(255,209,102,.17), rgba(88,214,141,.12)),
		rgba(255,255,255,.045);
}
.download-buttons a.download-waiting .download-icon {
	background: var(--warning);
	color: #171101;
}
.download-buttons a.download-waiting .download-action {
	background: rgba(255,209,102,.15);
	color: var(--warning);
}
.download-buttons a.download-armed {
	border-color: rgba(74,163,255,.42);
	background:
		linear-gradient(135deg, rgba(74,163,255,.16), rgba(88,214,141,.1)),
		rgba(255,255,255,.045);
}
.download-buttons a.download-armed .download-icon {
	background: var(--accent-2);
	color: #07111f;
}
.download-buttons a.download-armed .download-action {
	background: rgba(74,163,255,.15);
	color: var(--accent-2);
}
.download-main {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	flex: 1 1 auto;
	text-align: left;
}
.download-name {
	overflow: hidden;
	color: var(--text);
	font-size: 14px;
	font-weight: 900;
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.download-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 800;
}
.download-meta span {
	display: inline-flex;
	align-items: center;
	min-height: 22px;
	padding: 0 8px;
	border-radius: 999px;
	background: rgba(255,255,255,.06);
}
.download-action {
	flex: 0 0 auto;
	min-height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	border-radius: 999px;
	background: rgba(88,214,141,.14);
	color: var(--accent);
	font-size: 12px;
	font-weight: 900;
}
.fdl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 18px;
	border-radius: var(--radius);
	border: 1px solid rgba(88,214,141,.35);
	background: var(--accent);
	color: #06120b;
	font-weight: 900;
}
.fdl-btn:hover {filter: brightness(1.05); color: #06120b;}
.fdl-btn-gp {
	width: min(460px, 100%);
	min-height: 58px;
	justify-content: flex-start;
	padding: 10px 16px 10px 10px;
	background:
		linear-gradient(135deg, rgba(74,163,255,.12), rgba(255,255,255,.04)),
		rgba(255,255,255,.045);
	border-color: rgba(74,163,255,.28);
	color: var(--text);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
	transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.fdl-btn-gp:hover {
	transform: translateY(-2px);
	border-color: rgba(74,163,255,.5);
	background:
		linear-gradient(135deg, rgba(74,163,255,.18), rgba(255,255,255,.055)),
		rgba(255,255,255,.055);
	color: var(--text);
}
.fdl-btn-icon {
	width: 42px;
	height: 42px;
	margin-right: 12px;
	padding: 8px;
	border-radius: 50%;
	background: rgba(255,255,255,.08);
	flex: 0 0 auto;
}
.fdl-btn-title {
	min-width: 0;
	text-align: left;
	font-size: 14px;
	line-height: 1.35;
}
.fdl-btn-title b {
	color: var(--accent-2);
	font-size: 12px;
}
.download-note {
	padding: 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(255,255,255,.035);
	color: var(--muted);
}
.download-note-title {
	margin-bottom: 10px;
	color: var(--text);
	font-size: 14px;
	font-weight: 900;
}
.download-note ul {
	display: grid;
	gap: 8px;
}
.download-note li {
	position: relative;
	padding-left: 16px;
	font-size: 12px;
	line-height: 1.45;
}
.download-note li:before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
}
.faq-list {display: grid; gap: 12px;}
.faq-item {
	padding: 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(255,255,255,.035);
}
.faq-item h3 {margin: 0 0 8px; font-size: 16px;}
.faq-item p {margin: 0; color: var(--muted);}

/* Category and SEO */
.category-header h1 {font-size: 28px;}
.category-description, .site-desc {
	margin-top: 12px;
	color: var(--muted);
	line-height: 1.8;
}
.category-description {
	padding: 14px;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: rgba(255,255,255,.035);
}
.genres-grid {margin: 18px 0;}
.genres-title {
	margin-bottom: 12px;
	color: var(--text);
	font-size: 16px;
	font-weight: 850;
}
.genres-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 10px;
}
.genre-button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(255,255,255,.04);
	color: var(--muted);
	font-weight: 800;
	text-align: center;
}
.genre-button:hover {
	border-color: rgba(88,214,141,.35);
	background: rgba(88,214,141,.1);
	color: var(--text);
}
.genre-button.is-active {
	border-color: rgba(88,214,141,.5);
	background: rgba(88,214,141,.16);
	color: var(--accent);
}
.site-desc-wr {margin-top: 24px;}
.site-desc {
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(20,25,37,.72);
}
.site-desc h1, .site-desc h2 {margin-bottom: 12px; color: var(--text); font-size: 20px;}
.site-desc ul {list-style: disc; margin: 12px 0 12px 22px;}
.slice {overflow: hidden; position: relative; transition: height .2s;}
.slice-masked:before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 80px;
	background: linear-gradient(to bottom, transparent, var(--panel));
}
.slice-btn {margin-top: 10px;}
.slice-btn span {color: var(--accent); font-weight: 850; cursor: pointer;}

/* Articles */
.short-article {
	grid-column: 1 / -1;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(20,25,37,.82);
	overflow: hidden;
}
.short-article + .short-article {margin-top: 14px;}
.short-article .short-content {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: 18px;
	padding: 14px;
	align-items: center;
}
.short-article .short-img {
	width: 180px;
	height: 118px;
	margin: 0;
	border-radius: var(--radius);
}
.short-article .short-title {
	display: block;
	height: auto;
	margin-bottom: 10px;
	color: var(--text);
	font-size: 20px;
	line-height: 1.25;
	white-space: normal;
}
.short-article .short-text {
	display: -webkit-box;
	overflow: hidden;
	color: var(--muted);
	font-size: 14px;
	line-height: 1.65;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}
.short-more {margin-top: 12px; color: var(--accent); font-weight: 850;}
.article-tags {margin-top: 18px; color: var(--muted);}
.article-page .sect {
	overflow: hidden;
}
.article-hero {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	min-height: 360px;
	padding: 0;
	background: #101722;
}
.article-cover-wide {
	position: absolute;
	inset: 0;
	opacity: .42;
	filter: saturate(.9);
}
.article-cover-wide:after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(16,23,34,.98) 0%, rgba(16,23,34,.78) 48%, rgba(16,23,34,.92) 100%),
		linear-gradient(0deg, rgba(16,23,34,.98) 0%, transparent 58%);
}
.article-hero-content {
	position: relative;
	z-index: 2;
	width: min(760px, calc(100% - 44px));
	align-self: end;
	padding: 42px 0 38px 22px;
}
.article-kicker {
	margin-bottom: 14px;
	color: var(--accent);
	font-size: 13px;
	font-weight: 850;
}
.article-kicker a {
	color: inherit;
}
.article-hero h1 {
	max-width: 760px;
	margin: 0;
	color: var(--text);
	font-size: clamp(34px, 5vw, 56px);
	line-height: 1.08;
	letter-spacing: 0;
	text-wrap: balance;
}
.article-meta {
	justify-content: flex-start;
	gap: 12px;
	margin-top: 20px;
	color: var(--muted);
	font-size: 13px;
}
.article-meta span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.article-meta .fa {
	color: var(--accent-2);
}
.article-body {
	padding: 34px;
}
.article-content {
	max-width: 780px;
	margin: 0 auto;
	color: #e4eaf4;
	font-size: 17px;
	line-height: 1.85;
}
.article-content h2 {
	margin-top: 34px;
	font-size: 28px;
	line-height: 1.25;
}
.article-content h3 {
	margin-top: 28px;
	font-size: 22px;
	line-height: 1.3;
}
.article-content p {
	margin-bottom: 18px;
}
.article-content ul,
.article-content ol {
	margin: 18px 0 22px 26px;
}
.article-content li {
	margin-bottom: 12px;
	padding-left: 4px;
}
.article-content blockquote {
	margin: 24px 0;
	padding: 18px 20px;
	border-left: 3px solid var(--accent);
	border-radius: 0 var(--radius) var(--radius) 0;
	background: rgba(88,214,141,.07);
	color: #dce8f3;
}
.article-content img {
	display: block;
	max-width: 100%;
	margin: 24px auto;
	border-radius: var(--radius);
}
.article-body .article-tags {
	max-width: 780px;
	margin: 26px auto 0;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}
.article-rating-panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
	gap: 18px;
	align-items: center;
	max-width: 780px;
	margin: 28px auto 0;
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(255,255,255,.035);
}
.article-rating-title {
	margin-bottom: 4px;
	color: var(--text);
	font-size: 16px;
	font-weight: 900;
}
.article-rating-actions {
	display: grid;
	gap: 10px;
}

/* Screenshot gallery */
.gallery-shown {
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background:
		linear-gradient(135deg, rgba(74,163,255,.08), transparent 45%),
		rgba(8,11,17,.86);
}
.gallery-shown .fotorama__wrap {
	width: 100% !important;
	margin: 0 auto;
}
.gallery-shown .fotorama__stage {
	background: #070a0f;
	border-radius: var(--radius) var(--radius) 0 0;
}
.gallery-shown .fotorama__stage__frame {
	background: #070a0f;
}
.gallery-shown .fotorama__img {
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: contain;
}
.gallery-shown .fotorama__nav-wrap {
	padding: 12px;
	background: rgba(13,17,26,.96);
	border-top: 1px solid var(--line);
}
.gallery-shown .fotorama__thumb-border {
	border-color: var(--accent) !important;
	border-radius: 7px !important;
	box-shadow: 0 0 0 2px rgba(88,214,141,.16);
}
.gallery-shown .fotorama__thumb {
	overflow: hidden;
	border-radius: 7px;
	background: var(--panel-2);
}
.gallery-shown .fotorama__thumb img {
	border-radius: 7px;
}
.gallery-shown .fotorama__arr,
.gallery-shown .fotorama__fullscreen-icon {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: rgba(20,25,37,.78) !important;
	border: 1px solid var(--line);
	backdrop-filter: blur(10px);
	opacity: 1;
	transform: translate3d(0, -50%, 0) !important;
	margin-top: 0 !important;
	overflow: hidden;
}
.gallery-shown .fotorama__arr:hover,
.gallery-shown .fotorama__fullscreen-icon:hover {
	background: rgba(88,214,141,.16) !important;
	border-color: rgba(88,214,141,.35);
}
.gallery-shown .fotorama__arr--prev {
	left: 14px;
	background-position: 0 0 !important;
}
.gallery-shown .fotorama__arr--next {
	right: 14px;
	background-position: 0 0 !important;
}
.gallery-shown .fotorama__fullscreen-icon {
	top: 14px;
	right: 14px;
	transform: none !important;
	background-position: 0 0 !important;
}
.gallery-shown .fotorama__arr--prev:before,
.gallery-shown .fotorama__arr--next:before,
.gallery-shown .fotorama__fullscreen-icon:before {
	font-family: "FontAwesome";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text);
	font-size: 18px;
}
.gallery-shown .fotorama__arr--prev:before {content: "\f104";}
.gallery-shown .fotorama__arr--next:before {content: "\f105";}
.gallery-shown .fotorama__fullscreen-icon:before {content: "\f065"; font-size: 15px;}
.gallery-shown .fotorama__arr:after,
.gallery-shown .fotorama__fullscreen-icon:after {
	display: none !important;
}
.gallery-shown .fotorama__nav__frame:empty,
.gallery-shown .fotorama__nav__frame .fotorama__thumb:empty {
	display: none !important;
}

/* Comments */
.add-comms, .add-comm-form {
	padding: 16px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(255,255,255,.035);
}
.add-comms {display: none; margin-bottom: 18px;}
.ac-inputs input {width: 49%; margin-bottom: 12px;}
.ac-textarea textarea {margin-bottom: 12px;}
.comm-item {gap: 12px; margin-bottom: 14px;}
.comm-left {width: 46px; flex: 0 0 46px;}
.comm-img {
	width: 46px;
	height: 46px;
	overflow: hidden;
	border-radius: 50%;
	background: var(--panel-2);
}
.comm-right {
	padding: 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(255,255,255,.035);
}
.comm-one {margin-bottom: 8px; color: var(--muted); font-size: 12px;}
.comm-author, .comm-author a {color: var(--accent); font-weight: 850;}
.comm-two {color: #d7deea;}
.comm-three {margin-top: 10px; color: var(--muted); font-size: 12px;}
.reply {cursor: pointer; color: var(--accent);}
.comm-three-right li {display: inline-block; margin-left: 10px;}

/* Sidebar items, filters and login */
.top-item {gap: 10px; margin-bottom: 12px;}
.top-img {
	width: 42px;
	height: 42px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--panel-2);
	flex: 0 0 auto;
}
.top-title {color: var(--muted); font-size: 12px; font-weight: 800; line-height: 1.35;}
.top-item:hover .top-title {color: var(--text);}
.lcomm {margin-bottom: 14px;}
.lcomm-text {
	padding: 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(255,255,255,.035);
	color: var(--muted);
	font-size: 12px;
	line-height: 1.55;
}
.lcomm-meta {position: relative; min-height: 34px; margin-top: 8px; padding-left: 42px;}
.lcomm-av {
	position: absolute;
	left: 0;
	top: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--panel-2);
}
.lcomm-title {display: block; color: var(--text); font-size: 12px; font-weight: 800;}
.lcomm-name, .lcomm-date {color: var(--muted-2); font-size: 11px;}
.filter-sect {align-items: center;}
.filter-content {gap: 10px;}
.filt-col {flex: 1 1 150px;}
.filter-btn, .filter-reset {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0 14px;
	border-radius: var(--radius);
	font-weight: 850;
}
.filter-btn {width: 100%; border: 0; background: var(--accent); color: #06120b;}
.filter-reset {border: 1px solid var(--line); color: var(--muted);}
.filter-icon {display: none;}
.login-overlay {
	position: fixed;
	inset: 0;
	z-index: 999;
	display: none;
	background: rgba(0,0,0,.68);
	backdrop-filter: blur(8px);
}
.login-box {
	position: fixed;
	left: 50%;
	top: 50%;
	z-index: 1000;
	display: none;
	width: min(420px, calc(100% - 28px));
	max-height: calc(100vh - 40px);
	overflow: auto;
	transform: translate(-50%, -50%);
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: #111722;
	box-shadow: var(--shadow);
}
.login-close {
	position: absolute;
	right: 12px;
	top: 10px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255,255,255,.06);
	color: var(--muted);
	cursor: pointer;
}
.login-title {margin-bottom: 16px; font-size: 18px; font-weight: 900; text-align: center;}
.login-avatar {
	width: 64px;
	height: 64px;
	margin: 0 auto 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 50%;
	background: var(--panel-2);
	color: var(--muted);
}
.login-input {margin-bottom: 10px;}
.login-check {margin: 10px 0; color: var(--muted); font-size: 13px;}
.login-check input {margin-right: 8px;}
.login-btn button {width: 100%; margin: 8px 0 12px;}
.login-btm {gap: 10px; color: var(--muted); font-size: 13px;}
.login-btm a {color: var(--accent);}
.login-menu {gap: 8px;}
.login-menu li {width: calc(50% - 4px);}
.login-menu a {
	display: block;
	min-height: 46px;
	padding: 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(255,255,255,.035);
	color: var(--muted);
	font-size: 12px;
}
.login-menu .fa {margin-right: 7px; color: var(--accent);}
.login-soc-title {margin: 16px 0 10px; color: var(--muted); text-align: center; font-size: 12px;}
.login-soc-btns {display: flex; justify-content: center; gap: 8px;}
.login-soc-btns img {width: 32px; height: 32px; border-radius: 50%;}

/* User profile */
.profile-page,
.profile-edit {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(20,25,37,.82);
	box-shadow: var(--shadow);
}
.profile-card {
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr);
	min-height: 330px;
}
.profile-aside {
	position: relative;
	padding: 22px;
	border-right: 1px solid var(--line);
	background:
		linear-gradient(135deg, rgba(88,214,141,.09), transparent 42%),
		rgba(255,255,255,.025);
}
.profile-status {
	position: absolute;
	left: 16px;
	top: 16px;
}
.profile-status span {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 0 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 900;
}
.profile-status .online {background: rgba(88,214,141,.16); color: var(--accent);}
.profile-status .offline {background: rgba(255,255,255,.06); color: var(--muted);}
.profile-avatar {
	width: 112px;
	height: 112px;
	margin: 18px auto 18px;
	border-radius: 28px;
	background: var(--panel-2);
	box-shadow: 0 16px 36px rgba(0,0,0,.28);
}
.profile-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 14px;
}
.profile-stats div {
	padding: 12px 8px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(255,255,255,.04);
	text-align: center;
}
.profile-stats b {
	display: block;
	color: var(--text);
	font-size: 18px;
}
.profile-stats span {
	color: var(--muted);
	font-size: 11px;
	font-weight: 800;
}
.profile-actions {
	display: grid;
	gap: 8px;
}
.profile-actions a,
.profile-actions button,
.profile-actions input[type="button"] {
	width: 100%;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius);
	border: 1px solid rgba(88,214,141,.34);
	background: rgba(88,214,141,.13);
	color: var(--accent);
	font-weight: 900;
}
.profile-main {
	padding: 28px;
}
.profile-head {
	padding-bottom: 18px;
	border-bottom: 1px solid var(--line);
}
.profile-head h1 {
	margin: 0 0 8px;
	font-size: clamp(28px, 4vw, 44px);
}
.profile-group {
	color: var(--accent);
	font-weight: 850;
}
.profile-group span {
	margin-left: 8px;
	color: var(--muted);
	font-size: 12px;
}
.profile-meta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 20px;
}
.profile-meta li {
	min-width: 0;
	padding: 14px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(255,255,255,.035);
}
.profile-meta span {
	display: block;
	margin-bottom: 5px;
	color: var(--muted-2);
	font-size: 11px;
	font-weight: 900;
	text-transform: uppercase;
}
.profile-meta b {
	display: block;
	overflow-wrap: anywhere;
	color: var(--text);
	font-size: 14px;
	line-height: 1.45;
}
.profile-about {
	grid-column: 1 / -1;
}
.profile-edit {
	margin-top: 24px;
	padding: 24px;
}
.profile-edit h2 {
	margin: 0 0 18px;
	font-size: 24px;
}
.form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}
.form-item,
.form-textarea,
.form-checks,
.form-xfield {
	margin-bottom: 14px;
}
.form-item label,
.form-textarea label {
	display: block;
	margin-bottom: 7px;
	color: var(--muted);
	font-size: 12px;
	font-weight: 850;
}
.form-note {
	margin-top: 8px;
	color: var(--muted);
	font-size: 12px;
}
.form-submit button {
	min-height: 42px;
	padding: 0 18px;
	border-radius: var(--radius);
}

/* DLE editor inside comments */
.add-comm-form .bb-editor,
.add-comm-form .wseditor,
.add-comm-form .fr-box,
.add-comm-form .fr-wrapper,
.add-comm-form .fr-toolbar {
	border-color: var(--line) !important;
	background: rgba(255,255,255,.035) !important;
	color: var(--text) !important;
}
.add-comm-form .bb-editor {
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(255,255,255,.035);
}
.add-comm-form .bb-pane,
.add-comm-form .fr-toolbar,
.add-comm-form .fr-btn-grp {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 8px !important;
	border: 0 !important;
	background: rgba(10,14,21,.72) !important;
}
.add-comm-form .bb-pane button,
.add-comm-form .bb-pane input[type="button"],
.add-comm-form .fr-toolbar button,
.add-comm-form .fr-command.fr-btn {
	width: 34px !important;
	height: 34px !important;
	min-width: 34px !important;
	min-height: 34px !important;
	line-height: 34px !important;
	padding: 0 !important;
	border: 1px solid var(--line) !important;
	border-radius: 8px !important;
	background: rgba(255,255,255,.06) !important;
	color: var(--muted) !important;
	box-shadow: none !important;
	font-size: 13px !important;
}
.add-comm-form .bb-pane button:hover,
.add-comm-form .bb-pane input[type="button"]:hover,
.add-comm-form .fr-toolbar button:hover,
.add-comm-form .fr-command.fr-btn:hover {
	border-color: rgba(88,214,141,.38) !important;
	background: rgba(88,214,141,.12) !important;
	color: var(--text) !important;
}
.add-comm-form .fr-command.fr-btn svg path {
	fill: currentColor !important;
}
.add-comm-form .fr-wrapper,
.add-comm-form .fr-element,
.add-comm-form iframe,
.add-comm-form textarea {
	min-height: 190px !important;
	border-radius: 0 0 var(--radius) var(--radius) !important;
	background: #f7f9fc !important;
	color: #111827 !important;
}
.add-comm-form .ac-submit {
	margin-top: 12px;
}
.add-comm-form .ac-submit button {
	min-height: 42px;
	padding: 0 18px;
	border-radius: var(--radius);
	border: 1px solid rgba(88,214,141,.45);
	background: rgba(88,214,141,.16);
	color: var(--accent);
	box-shadow: none;
}
.add-comm-form .ac-submit button:hover {
	background: var(--accent);
	color: #06120b;
}

/* Share and footer */
.share {display: flex; gap: 8px; min-height: 36px;}
.share a {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255,255,255,.06) url("../images/share.png") -3px -2px no-repeat;
	border: 1px solid var(--line);
}
.share a:nth-child(2) {background-position: -47px -2px;}
.share a:nth-child(3) {background-position: -90px -2px;}
.share a:nth-child(4) {background-position: -133px -2px;}
.share a:nth-child(5) {background-position: -221px -2px;}
.share a:nth-child(6) {background-position: -175px -1px;}
.footer {
	padding: 28px 0;
	border-top: 1px solid var(--line);
	background: rgba(7,9,13,.9);
	color: var(--muted);
	text-align: center;
}
.ft-menu {display: flex; justify-content: center; gap: 18px; margin-bottom: 10px;}
.ft-menu a {color: var(--text); font-weight: 800;}
.ft-copyr {font-size: 12px;}

/* Mobile panel */
.close-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9998;
	background: rgba(0,0,0,.62);
}
.side-panel {
	position: fixed;
	left: -320px;
	top: 0;
	z-index: 9999;
	width: 300px;
	height: 100%;
	overflow-y: auto;
	padding: 16px;
	background: #101520;
	border-right: 1px solid var(--line);
	transition: left .24s ease;
}
.side-panel.active {left: 0;}
.btn-close {
	position: fixed;
	left: 300px;
	top: -48px;
	z-index: 10000;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0 var(--radius) var(--radius) 0;
	background: var(--danger);
	color: #fff;
	transition: top .24s ease;
	cursor: pointer;
}
.btn-close.active {top: 0;}
body.opened-menu {overflow: hidden;}
.side-panel .tmenu {
	display: block;
	min-height: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
}
.side-panel .tmenu > li {width: 100%;}
.side-panel .tmenu > li > a {justify-content: flex-start;}
.side-panel .hidden-menu {
	position: static;
	display: block;
	width: 100%;
	margin: 4px 0 8px;
	box-shadow: none;
}
.side-panel .side-box {
	margin-top: 14px;
	box-shadow: none;
}

#gotop {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 9997;
	display: none;
	width: 42px;
	height: 42px;
	line-height: 42px;
	border-radius: 50%;
	background: var(--accent);
	color: #06120b;
	text-align: center;
	cursor: pointer;
	box-shadow: var(--shadow);
}

@media (max-width: 1180px) {
	.wrap-center {width: min(1000px, calc(100% - 24px));}
	.header button.btn-menu {display: inline-flex; align-items: center; justify-content: center;}
	.topbar, .col-left .side-nav, .col-right .side-nav {display: none;}
	.cols {gap: 18px;}
	.content {order: 1; flex-basis: 100%;}
	.col-left, .col-right {order: 2; width: calc(50% - 9px); flex: 0 0 calc(50% - 9px);}
	.short-items {grid-template-columns: repeat(4, minmax(0, 1fr));}
}

@media (max-width: 860px) {
	.header-in {min-height: 64px; gap: 10px;}
	.logo {width: 150px;}
	.search-wrap {
		display: none;
		order: 10;
		flex: 0 0 100%;
		max-width: none;
	}
	.header.is-active .search-wrap {display: block;}
	.header button.btn-search {display: inline-flex; align-items: center; justify-content: center;}
	.short-items {grid-template-columns: repeat(3, minmax(0, 1fr));}
	.full-head {align-items: flex-start;}
	.full-icon {width: 108px; height: 108px; border-radius: 24px;}
	.frate {width: 100%; flex-direction: row; flex-wrap: wrap;}
	.frate > * {flex: 1 1 140px;}
	.finfo {grid-template-columns: repeat(3, minmax(0, 1fr));}
	.home-hero {grid-template-columns: 1fr;}
	.home-hero-stats {grid-template-columns: repeat(3, minmax(0, 1fr));}
	.home-cat-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
	.profile-card {grid-template-columns: 1fr;}
	.profile-aside {border-right: 0; border-bottom: 1px solid var(--line);}
	.profile-meta {grid-template-columns: 1fr;}
}

@media (max-width: 640px) {
	.wrap-center {width: calc(100% - 20px);}
	.wrap-main {padding-top: 18px;}
	.sect, .pages, .full-hero {padding: 16px;}
	.article-hero {min-height: 300px; padding: 0;}
	.article-hero-content {width: calc(100% - 28px); padding: 32px 0 28px 14px;}
	.article-hero h1 {font-size: 32px;}
	.article-body {padding: 20px;}
	.article-content {font-size: 15px; line-height: 1.75;}
	.article-content h2 {font-size: 23px;}
	.article-rating-panel {grid-template-columns: 1fr;}
	.gallery-shown .fotorama__stage {height: 260px !important;}
	.gallery-shown .fotorama__arr {width: 36px; height: 36px;}
	.home-hero {padding: 20px;}
	.home-hero-stats {grid-template-columns: 1fr;}
	.home-cat-grid {grid-template-columns: 1fr;}
	.profile-main, .profile-aside, .profile-edit {padding: 18px;}
	.form-grid {grid-template-columns: 1fr;}
	.short-items {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;}
	.short-in {min-height: 226px; padding: 14px;}
	.col-left, .col-right {width: 100%; flex-basis: 100%;}
	.sect-title {font-size: 19px;}
	.full-title h1 {font-size: 24px;}
	.finfo {grid-template-columns: repeat(2, minmax(0, 1fr));}
	.download-buttons a, .fdl-btn {width: 100%;}
	.download-layout {grid-template-columns: 1fr;}
	.short-article .short-content {display: block;}
	.short-article .short-img {width: 100%; height: 160px; margin-bottom: 12px;}
	.ac-inputs input {width: 100%;}
	.ft-menu {display: block;}
	.ft-menu li + li {margin-top: 8px;}
}

@media (max-width: 420px) {
	.logo {width: 120px;}
	.short-img {width: 78px; height: 78px; border-radius: 18px;}
	.short-desc {font-size: 11px;}
	.finfo {grid-template-columns: 1fr;}
}

/* Final geometry fixes after DLE runtime markup is injected */
@media (min-width: 861px) {
	.header-in {
		display: grid;
		grid-template-columns: 220px minmax(360px, 620px) 220px;
		justify-content: space-between;
		align-items: center;
		min-height: 74px;
		gap: 24px;
	}
	.header .logo {
		width: 220px;
		min-height: 44px;
		justify-content: flex-start;
	}
	.header .search-wrap {
		width: 100%;
		max-width: 620px;
		margin: 0;
		justify-self: center;
	}
	.header .login-btns {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 10px;
		min-width: 0;
	}
	.header .login-btns > * {
		margin-left: 0;
		flex: 0 0 auto;
	}
	.header .btn-menu,
	.header .btn-search {
		display: none !important;
	}
}

.topbar {
	margin-top: 20px;
}
.tmenu {
	min-height: 60px;
	justify-content: flex-start !important;
}
.tmenu > li {
	flex: 0 0 auto;
}
.tmenu > li > a {
	white-space: nowrap;
}

.short-bottom .mrating {
	width: 124px;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	color: transparent !important;
	line-height: 0;
	margin: 0 auto;
}
.short-bottom .mrating * {
	display: none !important;
	visibility: hidden !important;
}
.short-bottom .mrating:before,
.short-bottom .mrating:after {
	display: block !important;
	visibility: visible !important;
}
.short-bottom .mrating:before {
	line-height: 1;
}
.short-bottom .mrating:after {
	flex: 0 0 48px;
}

/* Dynamic DLE rating meter */
.rating-meter {
	--rating-percent: 0%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	max-width: 100%;
	min-height: 30px;
	padding: 0 10px;
	border-radius: 999px;
	background: rgba(255,255,255,.055);
	color: var(--muted);
	font-size: 11px;
	font-weight: 850;
	white-space: nowrap;
}
.rating-label {
	flex: 0 0 auto;
}
.rating-track {
	position: relative;
	display: block;
	width: 48px;
	height: 6px;
	overflow: hidden;
	border-radius: 999px;
	background: rgba(255,255,255,.13);
	box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset;
}
.rating-fill {
	position: absolute;
	left: 0;
	top: 0;
	width: var(--rating-percent);
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--accent), #8df3b4);
	transition: width .25s ease;
}
.rating-value {
	min-width: 30px;
	color: var(--text);
	font-size: 11px;
	text-align: right;
}
.rating-source {
	display: none !important;
}
.rating-meter-full {
	width: 100%;
	min-height: 42px;
	justify-content: flex-start;
	padding: 0 14px;
	background: rgba(255,255,255,.065);
}
.frate .rating-meter-full {
	display: grid;
	grid-template-columns: auto minmax(28px, 1fr) auto;
	gap: 7px;
	padding: 0 10px;
	min-width: 0;
}
.rating-meter-full .rating-track {
	flex: 1 1 auto;
	width: auto;
	min-width: 72px;
	height: 8px;
}
.frate .rating-meter-full .rating-track {
	min-width: 28px;
}
.rating-meter-full .rating-value {
	color: var(--accent);
	font-weight: 900;
}
.frate .rating-meter-full .rating-value {
	min-width: 24px;
	font-size: 10px;
}
.short-bottom .rating-meter {
	width: 136px;
}
.rating-vote {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 42px;
	padding: 8px 10px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(255,255,255,.04);
}
.rating-vote-title {
	color: var(--muted);
	font-size: 12px;
	font-weight: 850;
}
.rating-vote-control {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 3px;
	min-width: 0;
}
.rating-vote-control img,
.rating-vote-control svg {
	display: inline-block;
	width: 18px;
	height: 18px;
	object-fit: contain;
	vertical-align: middle;
	filter: saturate(.9) brightness(1.08);
	transition: transform .14s ease, filter .14s ease;
}
.rating-vote-control a:hover img,
.rating-vote-control a:hover svg {
	transform: translateY(-1px);
	filter: saturate(1.2) brightness(1.22);
}
.rating-vote-control .ratingtypeplusminus,
.rating-vote-control span[id^="vote-num-id"] {
	display: none;
}
.rate3-short .rating-meter-full {
	order: -1;
}
