@font-face {
	font-family: 'Nunito Sans';
	font-style: normal;
	font-weight: 200 1000;
	font-stretch: 100%;
	font-display: swap;
	src: url('/assets/fonts/nunito-sans-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: 'Nunito Sans';
	font-style: normal;
	font-weight: 200 1000;
	font-stretch: 100%;
	font-display: swap;
	src: url('/assets/fonts/nunito-sans-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	color-scheme: dark;
	--wrap-bg: rgba(0, 0, 0, 0.4);
	--panel: rgba(0, 0, 0, 0.45);
	--button-color: rgb(0, 0, 0);
	--button-bg: linear-gradient(rgb(251, 241, 188), rgb(140, 112, 77));
	--button-bg-hover: linear-gradient(rgb(255, 246, 229), rgb(140, 112, 77));
	--button-bg-tool: linear-gradient(rgb(140, 128, 109), rgb(93, 79, 62));
	--border: rgba(149, 109, 62, 0.4);
	--pinned-topic-bg: rgba(95, 54, 27, 0.26);
	--text: rgb(255, 238, 219);
	--muted: rgb(255, 238, 219);
	--accent: rgb(242, 191, 128);
	--link: rgb(251, 241, 188);
	--link-hover: rgb(255, 229, 152);
	--hover-light: linear-gradient(rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.02));
}

* {
	box-sizing: border-box;
}

html, body {
	height: 100%;
	margin: 0;
	scrollbar-color: rgb(192, 142, 89) rgb(30, 29, 21);
	scrollbar-width: thin;
}

body {
	background-image: url("/assets/images/autumn.webp?v=3");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed; 
	color: var(--text);
	font: 14px/1.5 "Nunito Sans", sans-serif;
	isolation: isolate;
}

input:autofill {
	background-image: none !important;
}

a {
	color: var(--link);
	transition: 0.1s ease;
	text-decoration: none;
}

a:hover {
	color: var(--link-hover);
	text-decoration: none;
}

header {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgb(0, 0, 0));
}

.wrap {
	max-width: 1000px;
	margin: auto;
	margin-top: 10px;
	padding: 0 20px;
	background: var(--wrap-bg);
	border: 0;
	border-radius: 10px;
	overflow: hidden;
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

.brand {
	font-size: 21px;
	font-weight: 750;
	color: #fff;
}

nav {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

main {
	min-height: 75vh;
	padding-top: 26px;
	padding-bottom: 55px;
}

h1 {
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
	font-size: 20px;
	line-height: 1.3;
	margin: 10px 0 10px;
	border: 0;
	border-radius: 10px;
	padding: 5px 10px;
}

h2 {
	font-size: 20px;
}

small {
	font-size: 13px;
}

.panel, .post {
	background: var(--panel);
	border-radius: 10px;
	border: 1px solid var(--border);
	margin: 20px 0;
	overflow: hidden;
}

.item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 15px;
	padding: 10px 22px;
	border-bottom: 1px solid var(--border);
	color: var(--text);
}

.item:last-child {
	border-bottom: 0;
}

.item:hover {
	background-image: var(--hover-light);
	/*background: rgba(0, 124, 255, 0.07);*/
	text-decoration: none;
}

.item strong {
	display: block;
	font-size: 16px;
}

.read-topic-item .activity-topic-text > strong,
.read-topic-item .topic-list-text > strong {
	font-weight: 400;
}

.unread-topic-item .activity-topic-text > strong,
.unread-topic-item .topic-list-text > strong {
	font-weight: 700;
}
.item small {
	display: block;
	color: var(--muted);
	margin-top: 3px;
	font-size: 11px;
}

.count, .muted {
	color: var(--muted);
	white-space: normal;
}

.count {
	min-width: 60px;
	font-size: 11px;
}

.form {
	padding: 24px;
}

.form label {
	display: block;
	margin-bottom: 18px;
	font-weight: 600;
}

.form input, .form textarea {
	display: block;
	width: 100%;
	padding: 11px;
	margin-top: 7px;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--panel);
	color: #fff;
	font: inherit;
}

.form textarea {
	resize: vertical;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	color: var(--button-color);
	background: var(--button-bg);
	border: 0;
	border-radius: 6px;
	padding: 0px 17px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0px 1px 4px rgb(0, 0, 0, 0.5);
}

.btn:hover {
	color: black;
	background: var(--button-bg-hover);
	text-decoration: none;
}

.back-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 20px;
	background: var(--panel);
	border: 0;
	border-radius: 6px;
	padding: 0px 10px;
	font-weight: 600;
}

.back-link:hover {
	text-decoration: none;
}

.back-link-arrow {
	display: inline-flex;
	align-items: center;
}
.back-link-arrow svg {
	height: 12px;
	width: 10px;
	fill: var(--accent);
	opacity: 0.8;
	display: block;
}

.post {
	padding: 15px 20px 20px 20px;
	border: 1px solid var(--border);
}

.topic-live {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 14px;
	padding: 12px 16px;
	margin: 14px 0;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: rgb(35, 26, 15);
	color: var(--text);
	font-size: 13px;
}

.topic-live[hidden], .topic-live [hidden] {
	display: none;
}

.topic-live .link, .topic-live a {
	font-size: inherit;
}

.topic-live button:focus-visible, .topic-live a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

.topic-live button:disabled {
	opacity: .65;
	cursor: wait;
}

.post-meta {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	color: var(--muted);
	border-bottom: 1px solid var(--border);
	padding-bottom: 10px;
}

.post-meta strong {
	color: rgb(205, 179, 150);
}

.post-body {
	padding-top: 15px;
	overflow-wrap: anywhere;
	white-space: normal;
}

.created-at {
	font-size: 11px;
	color: var(--accent);
}

.pager, .toolbar {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
	margin: 18px 0;
}

.pager a, .toolbar button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 25px;
	border: 0;
	padding: 0px 12px;
	border-radius: 6px;
	background: var(--panel);
	color: rgb(210, 191, 171);
	cursor: pointer;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	box-shadow: 0px 1px 4px rgb(0, 0, 0, 0.5);
}

.pager a {
	background: var(--button-bg);
	color: var(--button-color);
}
.pager a:hover {
	background: var(--button-bg-hover);
	text-decoration: none;
}
.toolbar button:hover {
	text-decoration: none;
}

footer {
	border-top: 1px solid var(--border);
	padding-top: 20px!important;
	padding-bottom: 25px!important;
	color: var(--muted);
	text-align: center;
}

.inline {
	display: inline;
}

.link {
	border: 0;
	background: none;
	padding: 0;
	color: var(--link);
	font: inherit;
	cursor: pointer;
}

.error {
	color: #ff9b9b;
}

.form textarea + .btn {
	margin-top: 14px;
}

.nav {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 72px;
	max-width: 1000px;
	margin: auto;
	padding: 0px 13px 0px 13px;
}

.nav .brand {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.primary-nav {
	gap: 18px;
}

.language-switcher {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	max-width: 100%;
}

.language-switcher button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: 44px;
	min-width: 44px;
	padding: 7px 10px;
	border: 0 !important;
	border-radius: 6px;
	background: none !important;
	color: var(--text);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}

.language-switcher button:hover {
	background: var(--button-bg-hover, #232c38);
}

.language-switcher img {
	display: block;
	width: 24px;
	height: 24px;
	object-fit: contain;
	flex-shrink: 0;
}

.language-switcher span {
	min-width: 2ch;
	font-weight: 600;
}

.language-switcher :focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.primary-nav > a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	white-space: nowrap;
	border: 0;
	padding: 0px 15px;
	border-radius: 6px;
	background: var(--button-bg);
	color: var(--button-color);
	font-weight: 600;
	box-shadow: 0px 1px 4px rgb(0, 0, 0, 0.5);
}

.primary-nav > a:hover {
	background: var(--button-bg-hover);
	text-decoration: none;
}

.header-account {
	justify-self: end;
}

.header-login {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 12px;
	border-radius: 8px;
}

.account-menu {
	position: relative;
	z-index: 20;
	min-width: 0;
}

.account-menu > summary {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 44px;
	padding: 5px 9px;
	border: 0;
	border-radius: 10px;
	color: var(--text);
	list-style: none;
	cursor: pointer;
}

.account-menu > summary::-webkit-details-marker {
	display: none;
}

.account-menu > summary:hover, .account-menu[open] > summary {
	background: rgba(0, 0, 0, 0.6);
	border: 0;
}

.account-menu > summary:focus-visible, .account-menu-item:focus-visible, .header-login:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.account-menu > summary .user-avatar {
	/*width: 32px;
	height: 32px;
	padding: 3px;*/
}

.account-name {
	display: block;
	min-width: 0;
	max-width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.account-chevron {
	flex-shrink: 0;
	color: var(--muted);
}

.account-menu[open] .account-chevron {
	transform: rotate(180deg);
}

.account-dropdown {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: 240px;
	max-width: calc(100vw - 26px);
	padding: 6px;
	border: 1px solid var(--border);
	border-radius: 12px;
	background: rgb(35, 26, 15);
	box-shadow: 0 14px 36px rgba(0, 0, 0, .35);
}

.account-dropdown-heading {
	padding: 8px 10px 12px;
	margin-bottom: 5px;
	border-bottom: 1px solid var(--border);
	overflow-wrap: anywhere;
}

.account-dropdown-heading strong, .account-dropdown-heading small {
	display: block;
}

.account-dropdown-heading small {
	color: var(--muted);
	font-size: 12px;
	margin-top: 2px;
}

.account-menu-item {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 44px;
	padding: 9px 10px;
	border: 0;
	border-radius: 7px;
	background: none;
	color: var(--link);
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.account-menu-item:hover {
	background: rgb(58, 41, 21);
	text-decoration: none;
}

.account-logout {
	margin: 5px 0 0;
	padding-top: 5px;
	border-top: 1px solid var(--border);
}

.account-logout .account-menu-item {
	color: #ffb4a8;
}

@media (max-width: 600px) {
	.nav {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		gap: 4px 10px;
		padding-top: 10px;
		padding-bottom: 6px;
	}

	.nav .brand {
		font-size: clamp(16px, 4.5vw, 21px);
	}

	.header-account {
		grid-column: 2;
		grid-row: 1;
	}

	.primary-nav {
		grid-column: 1 / -1;
		grid-row: 2;
		gap: 20px;
	}

	.account-name {
		display: none;
	}

	.account-menu > summary {
		gap: 6px;
		padding: 5px 7px;
	}
}

.form textarea:is(:focus, :focus-visible),
.form input:not([type="hidden"]):not([type="radio"]):not([type="checkbox"]):is(:focus, :focus-visible) {
	border-color: var(--accent);
	outline: 2px solid transparent;
	outline-offset: 1px;
	box-shadow: 0 0 0 3px rgba(130, 170, 255, 0.18);
}

.form .btn + a {
	display: inline-block;
	margin-left: 12px;
}

.form > h2:first-child {
	margin-top: 0;
	margin-bottom: 14px;
}

.form > p:first-child {
	margin-top: 0;
}

.role-name {
	font-weight: 600;
}

.role-name.role-admin {
	color: rgb(255, 86, 86);
}

.role-name.role-moderator {
	color: rgb(115, 225, 106);
}

.activity-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 14px;
}

.activity-toolbar p,
.activity-toolbar form {
	margin: 0;
	min-width: 0;
}

.activity-toolbar .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0px 12px;
	font-size: 13px;
	min-height: 36px;
}

.item.activity-item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(200px, 28%);
	align-items: stretch;
	gap: 0;
	padding: 0;
}

.activity-topic-link, .last-post-link {
	display: flex;
	align-items: center;
	gap: 20px;
	min-width: 0;
	padding: 10px 22px;
	color: var(--text);
}

.activity-topic-link:hover, .last-post-link:hover {
	background: var(--hover-light);
	text-decoration: none;
}

.activity-topic-link:focus-visible, .last-post-link:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}

.activity-topic-text, .activity-last-text {
	min-width: 0;
	overflow-wrap: anywhere;
}

.last-post-link {
	justify-content: flex-end;
	border-left: 1px solid var(--border);
}

.activity-last-text {
	text-align: right;
	font-size: 13px;
}

.activity-last-text time {
	display: block;
	color: var(--muted);
	font-size: 11px;
}

.activity-item .user-avatar {
	width: 36px;
	height: 36px;
}

.category-home-item .activity-last-text {
	flex: 1;
}

.category-last-title {
	display: block;
	color: var(--accent);
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.category-no-posts {
	display: flex;
	align-items: center;
	justify-content: right;
	padding: 18px 22px;
	border-left: 1px solid var(--border);
	color: var(--muted);
	font-size: 13px;
	text-align: right;
}

.category-description {
	margin: -5px 10px 0px;
	color: var(--muted);
	font-size: 12px;
}

.profile-name-hint {
	color: var(--muted);
	font-size: 13px;
}

.topic-count {
	color: rgb(242, 187, 81) !important;
}

@media (max-width: 600px) {
	.item.activity-item {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}

	.activity-topic-link, .last-post-link {
		padding: 10px 10px;
		gap: 8px;
	}

	.activity-item .user-avatar {
		display: none;
		width: 28px;
		height: 28px;
	}

	.activity-last-text time {
		font-size: 12px;
	}

	.category-no-posts {
		padding: 14px 10px;
	}
}

.form input[type="checkbox"] {
	display: inline-block;
	width: auto;
	margin: 0 8px 0 0;
	padding: 0;
}

.user-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	padding: 12px 18px;
	border-bottom: 1px solid var(--border);
}

.user-row:last-child {
	border-bottom: 0;
}

.user-info {
	min-width: 0;
}

.user-info > strong {
	display: block;
	overflow-wrap: anywhere;
}

.user-details {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 12px;
	margin-top: 2px;
	color: var(--muted);
	font-size: 12px;
}

.user-status {
	color: rgb(98, 207, 152);
}

.user-status.is-blocked {
	color: rgb(227, 89, 89);
}

.user-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 8px 16px;
	flex-shrink: 0;
}

.user-actions form {
	margin: 0;
}

.user-actions .btn {
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 600;
}

.user-spam-link {
	color: rgb(255, 86, 86);
	font-size: 13px;
}

.user-role-link {
	font-size: 13px;
}

.users-empty {
	margin: 0;
	padding: 16px 18px;
}

.user-search {
	margin: 18px 0;
}

.user-search > label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
}

.user-search-controls {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.user-search-controls input {
	flex: 1 1 200px;
	min-width: 0;
	min-height: 42px;
	padding: 9px 12px;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--panel);
	color: var(--text);
	font: inherit;
}

.user-search-controls input:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.user-search > p {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--muted);
}

.user-identity {
	display: flex;
	align-items: center;
	gap: 10px;
}

.user-text {
	min-width: 0;
}

.users-list .user-avatar {
	width: 34px;
	height: 34px;
}

.panel-empty {
	margin: 0;
	padding: 18px 22px;
}

.audit-row {
	padding: 12px 18px;
	border-bottom: 1px solid var(--border);
}

.audit-row:last-child {
	border-bottom: 0;
}

.audit-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
}

.audit-info {
	min-width: 0;
	overflow-wrap: anywhere;
}

.audit-info > strong {
	display: block;
}

.audit-meta {
	margin-top: 2px;
	color: var(--muted);
	font-size: 12px;
}

.audit-target {
	flex-shrink: 0;
	font-size: 13px;
}

.audit-details {
	margin: 6px 0 0;
	color: var(--muted);
	font-size: 13px;
	overflow-wrap: anywhere;
}

.audit-empty {
	margin: 0;
	padding: 16px 18px;
}

.hidden-topic-notice {
	background: rgb(71, 68, 20);
	border-left: 4px solid rgb(213, 173, 78);
	color: #f2d6a3;
}

.item.pinned-topic-item:not(.hidden-topic-item) {
	background: var(--pinned-topic-bg);
	box-shadow: inset 3px 0 rgb(158, 115, 59);
}

.item.pinned-topic-item:not(.hidden-topic-item):hover {
	background-image: var(--hover-light);
}

.item.hidden-topic-item {
	background: #29241d;
	box-shadow: inset 3px 0 #d5a34e;
}

.item.hidden-topic-item:hover {
	background: #352c20;
}

.hidden-topic-label {
	display: inline-block;
	padding: 1px 6px;
	border: 1px solid #806237;
	border-radius: 5px;
	color: #f2d6a3;
	font-size: 11px;
	font-weight: 600;
	vertical-align: middle;
	white-space: nowrap;
}

.topic-tools {
	gap: 10px 16px;
}

.topic-moderation,
.topic-extra {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.topic-extra {
	margin-left: auto;
}

.topic-extra a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 25px;
	padding: 0px 12px;
	border: 0;
	border-radius: 6px;
	background: var(--panel);
	color: rgb(210, 191, 171);
	font-size: 13px;
	font-weight: 600;
	box-shadow: 0px 1px 4px rgb(0, 0, 0, 0.5);
}

.topic-extra a:hover {
	text-decoration: none;
}

.post-edited {
	margin: 10px 0 0;
	color: var(--muted);
	font-size: 12px;
}

.post > .post-edited {
	text-align: right;
}

.post-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin-top: 20px;
	font-size: 12px;
	font-weight: 600;
	opacity: 0.5;
	transition: opacity 0.1s ease;
}

.post-actions:hover {
	opacity: 1.0;
}

.post-actions form {
	display: inline-flex;
	margin: 0;
}

.post-actions .link:hover {
	color: var(--link-hover);
	text-decoration: none;
}

.post-secondary {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin-left: auto;
}

.post-secondary .post-edited {
	margin: 0;
}

.post-actions .action-danger, .topic-extra .action-danger {
	color: rgb(255, 86, 86);
}

.user-avatar {
	display: block;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	padding: 1px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.26);
	object-fit: contain;
}

.category-icon {
	display: block;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.category-icon-picker .avatar-grid {
	max-height: none;
	overflow: visible;
}

.category-icon-picker .category-icon {
	width: 42px;
	height: 42px;
}

.category-edit-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.category-toolbar {
	display: flex;
	align-items: center;
	justify-content: left;
	flex-wrap: wrap;
	margin: 5px 0;
}

.category-toolbar > a {
}

.category-toolbar .btn {
	margin-left: auto;
	padding: 6px 12px;
	font-size: 13px;
	font-weight: 600;
	box-shadow: 0px 1px 4px rgb(0, 0, 0, 0.5);
}

.message-editor {
	min-width: 0;
	margin: 14px 0;
}

.editor-toolbar {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	padding: 9px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--panel);
}

/* Visual editing follows the forum palette, including custom themes. */
.editor-visual {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 12px;
	margin-top: 7px;
	border: 1px solid var(--border);
	border-radius: 6px;
	background: var(--panel);
	color: var(--text);
	font: inherit;
	font-weight: normal;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	resize: vertical;
	overflow: auto;
}

.editor-visual:focus {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}

.editor-visual img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

.editor-visual img[data-youtube-url] {
	display: block;
	width: 420px;
	max-height: 260px;
	object-fit: contain;
	border: 1px solid var(--border);
	border-radius: 6px;
}

.editor-visual blockquote {
	margin: 10px 0;
	padding: 10px 14px;
	border-left: 3px solid var(--accent);
	background: var(--panel);
}

.editor-visual blockquote::before {
	content: attr(data-quote-label);
	display: block;
	margin-bottom: 7px;
	font-size: 12px;
	color: var(--link);
	user-select: none;
}

.editor-tool[aria-pressed="true"] {
	outline: 1px solid var(--accent);
	background: var(--button-bg-tool);
}

.message-editor [hidden] {
	display: none !important;
}

@media (max-width: 600px) {
	.editor-visual { font-size: 16px; }
	.editor-toolbar .editor-tool, .editor-toolbar .editor-size { min-height: 36px; }
}

.editor-tool, .editor-size {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 30px;
	padding: 0px 12px;
	border: 0;
	border-radius: 5px;
	background: rgba(91, 56, 35, 0.6);
	color: var(--text);
	font: inherit;
	font-size: 13px;
	cursor: pointer;
	box-shadow: 0px 1px 4px rgb(0, 0, 0, 0.5);
}

.editor-tool:hover {
	background: rgba(160, 107, 76, 0.6);
}

.editor-tool:focus-visible, .editor-size:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.editor-tool:disabled {
	opacity: .6;
	cursor: wait;
}

.editor-tool-b {
	font-weight: 750;
}

.editor-tool-i {
	font-style: italic;
}

.editor-tool-u {
	text-decoration: underline;
}

.editor-emoji-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 21px;
	line-height: 1;
}

.editor-emoji-toggle[aria-expanded="true"] {
	border-color: var(--accent);
}

.editor-emojis {
	width: 100%;
	max-width: 440px;
	max-height: min(360px, 55vh);
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 10px 0;
	padding: 10px;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--panel);
}

.editor-emojis[hidden], .editor-emoji-grid[hidden] {
	display: none;
}

.editor-emoji-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
	font-size: 13px;
}

.editor-emoji-close {
	min-width: 30px;
	min-height: 30px;
	padding: 0px 12px;
	border: 0;
	border-radius: 5px;
	background: rgba(91, 56, 35, 0.6);
	color: var(--text);
	font: inherit;
	font-weight: inherit;
	font-size: 14px;
	cursor: pointer;
}

.editor-emoji-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 8px;
}

.editor-emoji-tab {
	padding: 5px 8px;
	font-size: 12px;
}

.editor-emoji-tab[aria-selected="true"] {
	border-color: var(--accent);
	background: rgb(142, 114, 79);
}

.editor-emoji-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
	gap: 4px;
}

.editor-emoji-choice {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 44px;
	padding: 4px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--text);
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.editor-emoji-choice:hover {
	background: rgb(54, 44, 31);
}

.editor-emoji-choice:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}

.form .editor-color-label {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	font-size: 13px;
	font-weight: 400;
}

.form .editor-color {
	display: inline-block;
	width: 36px;
	height: 36px;
	padding: 3px;
	margin: 0;
	cursor: pointer;
}

.form .editor-body-label {
	margin: 12px 0 0;
}

.form .editor-body-label textarea {
	font-weight: 400;
}

.editor-help, .editor-status {
	font-size: 12px;
	color: var(--muted);
	margin: 8px 0;
	overflow-wrap: anywhere;
}

.editor-status:empty {
	display: none;
}

.editor-insert {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	padding: 12px 0 0;
	flex-wrap: wrap;
}

.editor-insert[hidden], .editor-preview[hidden] {
	display: none;
}

.form .editor-insert label {
	flex: 1 1 200px;
	min-width: 0;
	margin: 0;
	font-size: 13px;
}

.editor-preview {
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 16px;
	margin-top: 12px;
	background: var(--panel);
}

.bb-size-12 {
	font-size: 12px;
}

.bb-size-14 {
	font-size: 14px;
}

.bb-size-16 {
	font-size: 16px;
}

.bb-size-18 {
	font-size: 18px;
}

.bb-size-24 {
	font-size: 24px;
	line-height: 30px;
}

.bb-size-32 {
	font-size: 32px;
	line-height: 34px;
}

.bb-quote {
	margin: 10px 0;
	padding: 10px 14px;
	border-left: 3px solid var(--accent);
	border-radius: 6px;
	background: rgba(86, 72, 37, 0.4);
	overflow-wrap: anywhere;
}

.bb-quote-author {
	margin-bottom: 6px;
	font-size: 12px;
	color: var(--muted);
}

.bb-image {
	display: inline-block;
	max-width: 100%;
	max-height: 600px;
	width: auto;
	height: auto;
	object-fit: contain;
	margin: 12px 0;
	border-radius: 6px;
}

.bb-video {
	position: relative;
	width: 100%;
	max-width: 640px;
	min-height: 200px;
	aspect-ratio: 16 / 9;
	margin: 12px 0;
	background: #10141b;
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
}

.bb-video iframe {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 600px) {
	.editor-toolbar {
		padding: 7px;
		gap: 5px;
	}

	.editor-tool, .editor-size {
		min-height: 40px;
		padding: 6px 8px;
	}

	.bb-quote {
		padding: 8px 10px;
	}

	.editor-preview {
		padding: 12px;
	}
}

.category-delete-link {
	color: #ffb4a8;
}

.btn.btn-danger {
	background: #a63838;
}

.btn.btn-danger:hover {
	background: #bf4444;
}

.category-access-options {
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 14px;
	margin: 18px 0;
}

.category-access-options label {
	font-weight: 400;
}

.category-access-options label:last-child {
	margin-bottom: 0;
}

.post-meta {
	align-items: center;
}

.post-author {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.post-author strong {
	overflow-wrap: anywhere;
}

.topic-list-author {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}

.topic-list-text {
	min-width: 0;
	overflow-wrap: anywhere;
}

.avatar-picker {
	min-width: 0;
	margin: 20px 0;
	padding: 14px;
	border: 1px solid var(--border);
	border-radius: 8px;
}

.avatar-picker legend {
	padding: 0 6px;
	font-weight: 600;
}

.avatar-help {
	margin: 0 0 12px;
	color: var(--muted);
	font-size: 13px;
}

.avatar-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	gap: 8px;
	max-height: 440px;
	overflow-y: auto;
	padding: 4px;
	scrollbar-gutter: stable;
}

.form .avatar-option {
	position: relative;
	display: block;
	margin: 0;
	cursor: pointer;
}

.form .avatar-option > input {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: 0;
	opacity: 0;
	clip-path: inset(50%);
}

.avatar-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 100%;
	padding: 8px 4px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: var(--panel);
	text-align: center;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.avatar-card .user-avatar {
	width: 52px;
	height: 52px;
}

.avatar-option:hover .avatar-card {
	background: rgb(48, 39, 31);
}

.avatar-option input:checked + .avatar-card {
	border-color: var(--border);
	background: rgb(48, 39, 31);
}

.avatar-option input:focus-visible + .avatar-card {
	outline: 0;
}

#snowCanvas {
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none; /* Чтобы не блокировать клики */
}


@media (max-width: 600px) {
	.nav {
		align-items: flex-start;
		padding: 16px 13px 16px 13px;
		flex-direction: column;
	}

	.wrap {
		padding-left: 13px;
		padding-right: 13px;
	}

	.item {
		padding: 14px;
	}

	.count {
		font-size: 12px;
	}

	.category-icon {
		width: 23px;
		height: 23px;
	}

	.post-meta {
		align-items: center;
	}

	.topic-extra {
		margin-left: 0;
	}

	.post-secondary {
		margin-left: 0;
	}

	.panel-empty {
		padding: 14px;
	}

	.audit-row {
		padding: 12px 14px;
	}

	.audit-heading {
		align-items: flex-start;
		flex-direction: column;
		gap: 4px;
	}

	.user-row {
		align-items: flex-start;
		flex-direction: column;
		gap: 10px;
		padding: 12px 14px;
	}

	.user-actions {
		width: 100%;
		justify-content: flex-start;
	}

	.user-actions .btn {
		min-height: 40px;
	}
}