/* © 2025 Mark Kats. Все права защищены. Копирование и переработка запрещены. */

:where(.topbar-wrapper, .back, .topbar-avatar-submenu-portal) {
	--glass-bg: rgba(255, 255, 255, 0.08);
	--glass-bg-hover: rgba(255, 255, 255, 0.12);
	--glass-brd: rgba(255, 255, 255, 0.18);
	--glass-brd-hover: rgba(255, 255, 255, 0.28);
	--glass-bg-active: rgba(255, 255, 255, 0.16);
	--glass-brd-active: rgba(255, 255, 255, 0.34);
	--glass-glow: rgba(255, 255, 255, 0.08);
	--glass-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 0 0 1px rgba(255, 255, 255, 0.025), 0 8px 18px rgba(0, 0, 0, 0.2);
	--glass-shadow-hover:
		inset 0 1px 0 rgba(255, 255, 255, 0.075), 0 0 0 1px rgba(255, 255, 255, 0.04), 0 12px 28px rgba(0, 0, 0, 0.28);
	--glass-shadow-active:
		inset 0 1px 0 rgba(255, 255, 255, 0.085), inset 0 -1px 0 rgba(255, 255, 255, 0.045),
		0 0 0 1px rgba(255, 255, 255, 0.045), 0 12px 28px rgba(0, 0, 0, 0.3);
	--topbar-panel-bg: linear-gradient(180deg, rgba(18, 21, 27, 0.82), rgba(11, 13, 17, 0.62));
	--topbar-panel-border: var(--topbar-border-strong);
	--topbar-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 26px rgba(0, 0, 0, 0.24);
	--topbar-overlay-bg: linear-gradient(
		180deg,
		rgba(8, 10, 14, 0.84),
		rgba(8, 10, 14, 0.52) 56%,
		rgba(8, 10, 14, 0.18)
	);
	--topbar-overlay-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(255, 255, 255, 0.14),
		0 10px 24px rgba(0, 0, 0, 0.12);
	--topbar-overlay-border: rgba(255, 255, 255, 0.14);
	--avatar-menu-item-active-bg: var(--glass-bg-active);
	--avatar-menu-item-active-border: var(--glass-brd-active);
	--danger-bg: var(--ui-danger-icon-bg);
	--danger-bg-hover: var(--ui-danger-icon-bg-hover);
	--danger-brd: var(--ui-danger-icon-border);
	--danger-brd-hover: var(--ui-danger-icon-border-hover);
	--danger-text: var(--ui-danger-icon-text);
	--danger-text-hover: var(--ui-danger-icon-text-hover);
	--topbar-border: rgba(255, 255, 255, 0.14);
	--topbar-border-strong: rgba(255, 255, 255, 0.24);
	--topbar-surface: rgba(255, 255, 255, 0.07);
	--topbar-surface-soft: rgba(255, 255, 255, 0.04);
	--topbar-surface-hover: rgba(255, 255, 255, 0.1);
	--topbar-text: #f1f1f1;
	--topbar-text-dim: rgba(255, 255, 255, 0.75);
	--topbar-notifications-panel-bg: var(--topbar-panel-bg);
	--topbar-notification-divider: rgba(255, 255, 255, 0.14);
	--topbar-notification-read-title: rgba(234, 236, 240, 0.66);
	--topbar-notification-body: rgba(234, 236, 240, 0.72);
	--topbar-notification-context: rgba(234, 236, 240, 0.58);
	--topbar-notification-read-muted: rgba(150, 153, 157, 0.72);
	--topbar-notification-time: rgba(255, 255, 255, 0.62);
	--topbar-notification-empty: rgba(255, 255, 255, 0.62);
	--topbar-notification-link: #dcc796;
	--topbar-notification-link-hover: #fff;
	--btn-h: 32px;
	--btn-r: 10px;
	--btn-fz: 0.8em;
	--blur: 8px;
	--page-topbar-offset: 58px;
}

.shd-offline-banner {
	position: fixed;
	z-index: 10040;
	top: calc(env(safe-area-inset-top, 0px) + var(--page-topbar-offset, 58px) + 4px);
	left: 50%;
	transform: translateX(-50%);
	max-width: calc(100vw - 24px);
	min-height: 30px;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	border-radius: 8px;
	border: 1px solid rgba(248, 113, 113, 0.38);
	background: rgba(127, 29, 29, 0.92);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	pointer-events: none;
}

html[data-ui-theme='light'] :where(.topbar-wrapper, .back, .topbar-avatar-submenu-portal) {
	--glass-bg: rgb(248 250 252);
	--glass-bg-hover: rgb(231 237 243);
	--glass-brd: var(--ui-icon-btn-border);
	--glass-brd-hover: var(--ui-icon-btn-border-hover);
	--glass-bg-active: rgb(224 231 239);
	--glass-brd-active: var(--ui-icon-btn-border-hover);
	--glass-glow: transparent;
	--glass-shadow: 0 1px 3px rgba(15, 23, 42, 0.09);
	--glass-shadow-hover: 0 3px 10px rgba(15, 23, 42, 0.13);
	--glass-shadow-active: 0 1px 3px rgba(15, 23, 42, 0.09);
	--topbar-panel-bg: linear-gradient(180deg, rgba(226, 232, 240, 0.98), rgba(216, 224, 233, 0.94));
	--topbar-panel-border: rgba(31, 41, 55, 0.16);
	--topbar-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 26px rgba(0, 0, 0, 0.24);
	--topbar-overlay-bg: linear-gradient(180deg, rgba(226, 232, 240, 0.98), rgba(216, 224, 233, 0.94));
	--topbar-overlay-shadow: 0 2px 8px rgba(15, 23, 42, 0.11);
	--topbar-overlay-border: rgba(31, 41, 55, 0.16);
	--avatar-menu-item-active-bg: rgb(224, 231, 239);
	--avatar-menu-item-active-border: rgba(31, 41, 55, 0.16);
	--danger-bg: var(--ui-danger-icon-bg);
	--danger-bg-hover: var(--ui-danger-icon-bg-hover);
	--danger-brd: var(--ui-danger-icon-border);
	--danger-brd-hover: var(--ui-danger-icon-border-hover);
	--danger-text: var(--ui-danger-icon-text);
	--danger-text-hover: var(--ui-danger-icon-text-hover);
	--topbar-border: rgba(31, 41, 55, 0.14);
	--topbar-border-strong: rgba(31, 41, 55, 0.22);
	--topbar-surface: #f8fafc;
	--topbar-surface-soft: #eef2f6;
	--topbar-surface-hover: #e7edf3;
	--topbar-text: rgb(29, 31, 37);
	--topbar-text-dim: rgba(29, 31, 37, 0.68);
	--topbar-notifications-panel-bg: var(--topbar-panel-bg);
	--topbar-notification-divider: rgba(0, 0, 0, 0.1);
	--topbar-notification-read-title: rgba(29, 31, 37, 0.74);
	--topbar-notification-body: rgba(29, 31, 37, 0.76);
	--topbar-notification-context: rgba(83, 89, 101, 0.82);
	--topbar-notification-read-muted: rgba(83, 89, 101, 0.72);
	--topbar-notification-time: rgba(83, 89, 101, 0.7);
	--topbar-notification-empty: rgba(29, 31, 37, 0.72);
	--topbar-notification-link: rgb(29, 31, 37);
	--topbar-notification-link-hover: rgb(29, 31, 37);
}

.top-buttons a,
.topbar-menu-button,
.menu-toggle,
.back,
.floating-gitea-button {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.top-buttons a,
.topbar-menu-button,
.theme-toggle-btn,
.menu-toggle,
.back,
.maintenance-toggle,
.dev-browser-logs-toggle,
.topbar-float-buttons .floating-gitea-button,
.avatar-button,
.avatar-menu .avatar-menu-item,
.avatar-lang-btn,
.mobile-lang-btn,
.avatar-lang-item,
.mobile-lang-item {
	height: var(--btn-h);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 10px;
	background: var(--glass-bg);
	color: var(--topbar-text);
	font-family: 'Artifakt Element', monospace;
	font-size: var(--btn-fz);
	border: 1px solid var(--ui-icon-btn-border);
	border-radius: var(--btn-r);
	text-decoration: none;
	box-sizing: border-box;
	margin: 0;
	text-shadow: none;
	cursor: pointer;
	box-shadow: var(--glass-shadow);
	transition:
		background 0.16s ease,
		border-color 0.16s ease,
		box-shadow 0.16s ease,
		transform 0.08s ease;
}
.top-buttons a:hover,
.topbar-menu-button:hover,
.theme-toggle-btn:hover,
.menu-toggle:hover,
.back:hover,
.maintenance-toggle:hover,
.dev-browser-logs-toggle:hover,
.topbar-float-buttons .floating-gitea-button:hover,
.avatar-button:hover,
.avatar-menu .avatar-menu-item:hover,
.avatar-lang-btn:hover,
.mobile-lang-btn:hover,
.avatar-lang-item:hover,
.mobile-lang-item:hover {
	background: var(--glass-bg-hover);
	border-color: var(--ui-icon-btn-border-hover);
	box-shadow: var(--glass-shadow-hover);
	text-decoration: none;
}
.top-buttons a.active,
.top-buttons a[aria-current='page'],
.topbar-menu-button.active,
.topbar-menu-button[aria-current='page'],
.theme-toggle-btn.active,
.theme-toggle-btn[aria-current='page'],
.menu-toggle.active,
.menu-toggle[aria-expanded='true'],
.back.active,
.back[aria-current='page'],
.avatar-button[aria-expanded='true'],
.avatar-lang-btn.active,
.avatar-lang-btn[aria-expanded='true'],
.mobile-lang-btn.active,
.mobile-lang-btn[aria-expanded='true'] {
	background: var(--glass-bg-active);
	border-color: var(--ui-icon-btn-border-hover);
	box-shadow: var(--glass-shadow-active);
}
.theme-toggle-btn:active,
.menu-toggle:active,
.top-buttons a:active,
.topbar-menu-button:active,
.back:active,
.maintenance-toggle:active,
.dev-browser-logs-toggle:active,
.topbar-float-buttons .floating-gitea-button:active,
.avatar-button:active,
.avatar-menu .avatar-menu-item:active,
.avatar-lang-btn:active,
.mobile-lang-btn:active,
.avatar-lang-item:active,
.mobile-lang-item:active {
	transform: translateY(1px);
}
.theme-toggle-btn[disabled] {
	opacity: 0.75;
	cursor: not-allowed;
}

.theme-mode-single {
	width: 40px;
	min-width: 40px;
	padding: 0;
	line-height: 0;
}

.theme-mode-single.theme-mode-toggle--menu {
	width: 100%;
}

.avatar-menu-controls-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 6px;
	width: 100%;
}

.avatar-menu-controls-row .avatar-lang-wrap {
	width: 100%;
	min-width: 0;
}

.avatar-menu-controls-row .avatar-lang-btn {
	width: 100%;
	min-width: 0;
}

.avatar-menu-controls-row .theme-mode-single.theme-mode-toggle--menu {
	width: 100%;
	min-width: 0;
}

.avatar-menu-controls-row .theme-mode-single.theme-mode-toggle--menu.active {
	background: var(--glass-bg);
	border-color: var(--ui-icon-btn-border);
	box-shadow: var(--glass-shadow);
}

.theme-mode-single .shd-svg-icon,
.theme-mode-single .shd-svg-holder {
	--shd-icon-size: 16px;
}

.theme-mode-single [data-theme-mode-icon][hidden] {
	display: none !important;
}

.topbar-float-buttons .floating-gitea-button,
.topbar-float-buttons .topbar-notifications-btn {
	position: relative;
	min-width: 40px;
	height: 33px;
	font-size: 0.8em;
	line-height: 1;
}
.maintenance-toggle,
.dev-browser-logs-toggle {
	position: relative;
	min-width: 40px;
}
.maintenance-toggle[aria-pressed='true'],
.maintenance-toggle.maintenance-on,
.dev-browser-logs-toggle[aria-pressed='true'],
.dev-browser-logs-toggle.dev-browser-logs-on {
	background: var(--danger-bg);
	border-color: var(--danger-brd);
	color: var(--topbar-text);
}

.menu-toggle,
.top-buttons,
.top-buttons a,
.back {
	z-index: 1052;
	position: relative;
}
.topbar-wrapper {
	position: fixed;
	top: calc(env(safe-area-inset-top) + 6px);
	right: 7px;
	z-index: 1050;
	isolation: isolate;
}
.topbar-float-buttons {
	position: relative;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 7px;
	z-index: 1050;
}
.top-buttons {
	display: flex;
	gap: 7px;
	flex-wrap: nowrap;
	z-index: 1050;
	align-items: center;
}

/* ── Центр уведомлений в topbar ── */
.topbar-notifications-wrap {
	position: relative;
	display: inline-flex;
}

.topbar-notifications-btn {
	position: relative;
	gap: 6px;
	min-width: 40px;
}

.topbar-notifications-btn .shd-svg-icon {
	--shd-icon-size: 18px;
}

.topbar-notifications-btn svg {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
}

.topbar-notifications-btn.has-unread {
	background: rgba(224, 85, 85, 0.16);
	border-color: rgba(224, 85, 85, 0.48);
	color: var(--topbar-text);
}

.topbar-notifications-badge {
	position: absolute;
	top: -5px;
	right: -5px;
	min-width: 16px;
	height: 16px;
	padding: 0 3px;
	border-radius: 999px;
	background: #e05555;
	color: #fff;
	font:
		600 9px/16px 'Artifakt Element',
		system-ui,
		sans-serif;
	text-align: center;
	pointer-events: none;
}

.topbar-notifications-dropdown {
	position: absolute;
	top: 36px;
	right: 0;
	z-index: 2000;
	width: 380px;
	max-width: calc(100vw - 24px);
	border: 1px solid var(--topbar-panel-border);
	border-radius: 10px;
	background: var(--topbar-notifications-panel-bg);
	-webkit-backdrop-filter: blur(var(--blur));
	backdrop-filter: blur(var(--blur));
	box-shadow: var(--topbar-panel-shadow);
	overflow: hidden;
	overscroll-behavior: contain;
	display: none;
	font-family: 'Artifakt Element', system-ui, sans-serif;
}

.topbar-notifications-dropdown[aria-hidden='false'] {
	display: block;
}

.topbar-notifications-head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px;
	border-bottom: 1px solid var(--topbar-border);
	background: var(--topbar-surface-soft);
}

.topbar-notifications-head strong {
	color: var(--topbar-text);
	font:
		600 13px/1.2 'Artifakt Element',
		system-ui,
		sans-serif;
}

.topbar-notifications-mark-read {
	padding: 2px 7px;
	border: 1px solid var(--ui-icon-btn-border);
	border-radius: 6px;
	background: var(--glass-bg);
	color: var(--topbar-text-dim);
	font-family: 'Artifakt Element', system-ui, sans-serif;
	font-size: 11px;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-user-select: none;
	user-select: none;
}

.topbar-notifications-mark-read:hover {
	background: var(--glass-bg-hover);
	border-color: var(--ui-icon-btn-border-hover);
	color: var(--topbar-text);
}

.topbar-notifications-wrap > .topbar-notifications-module-menu {
	top: calc(36px + 32px + 6px);
	z-index: 2100;
	min-width: 220px;
	max-width: min(520px, calc(100vw - 24px));
	width: max-content;
}

.topbar-notifications-module-menu .avatar-menu-item {
	height: auto;
	min-height: var(--btn-h);
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	line-height: 1.25;
}

.topbar-notifications-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	max-height: 280px;
	overflow: auto;
	overscroll-behavior: contain;
	padding: 6px;
}

.topbar-notifications-item {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	width: 100%;
	box-sizing: border-box;
	gap: 3px;
	min-height: 0;
	padding: 8px 10px 8px 12px;
	border: 1px solid transparent;
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
	transition: background 0.1s ease;
}

.top-buttons .topbar-notifications-dropdown :where(.topbar-notifications-item) {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	align-items: stretch;
	justify-content: flex-start;
	height: auto;
	min-height: 0;
	padding: 6px 6px 6px 12px;
	margin: 0;
	background: transparent;
	border-radius: 8px;
	font-family: 'Artifakt Element', system-ui, sans-serif;
	line-height: 1.2;
}

.topbar-notifications-item:hover {
	background: var(--glass-bg-hover);
	border-color: var(--glass-brd-hover);
}

.topbar-notifications-item:not(.is-unread) {
	background: var(--topbar-surface-soft);
}

.topbar-notifications-item:not(.is-unread):hover {
	opacity: 0.82;
}

.topbar-notifications-item.is-unread {
	background: var(--topbar-surface);
	border-color: var(--glass-brd-hover);
}

.topbar-notifications-item.is-unread::before {
	content: '';
	position: absolute;
	top: 10px;
	bottom: 10px;
	left: 5px;
	width: 3px;
	border-radius: 999px;
	background: #c7b07a;
}

.topbar-notifications-item-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 10px;
	width: 100%;
	min-width: 0;
	flex: 0 0 auto;
}

.topbar-notifications-item-title {
	color: var(--topbar-text);
	font:
		500 12px/1.3 'Artifakt Element',
		system-ui,
		sans-serif;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
	flex: 1 1 auto;
}

.topbar-notifications-item:not(.is-unread) .topbar-notifications-item-title {
	color: var(--topbar-notification-read-title);
}

.topbar-notifications-item-body {
	display: block;
	flex: 0 0 auto;
	height: auto;
	min-height: 15px;
	width: 100%;
	color: var(--topbar-notification-body);
	font:
		400 11px/1.35 'Artifakt Element',
		system-ui,
		sans-serif;
	text-align: left;
	overflow-wrap: anywhere;
	white-space: normal;
	overflow: visible;
}

.topbar-notifications-item-context {
	display: block;
	flex: 0 0 auto;
	width: 100%;
	color: var(--topbar-notification-context);
	font:
		400 11px/1.25 'Artifakt Element',
		system-ui,
		sans-serif;
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.topbar-notifications-item:not(.is-unread) .topbar-notifications-item-body,
.topbar-notifications-item:not(.is-unread) .topbar-notifications-item-context,
.topbar-notifications-item:not(.is-unread) .topbar-notifications-item-time {
	color: var(--topbar-notification-read-muted);
}

.topbar-notifications-item-body:empty {
	display: none;
	min-height: 0;
}

.topbar-notifications-item-time {
	color: var(--topbar-notification-time);
	font:
		400 10px/1.3 'Artifakt Element',
		system-ui,
		sans-serif;
	white-space: nowrap;
	text-align: right;
	flex: 0 0 auto;
	min-width: max-content;
	margin-left: auto;
}

.topbar-notifications-empty {
	padding: 14px 12px;
	color: var(--topbar-notification-empty);
	font-family: 'Artifakt Element', system-ui, sans-serif;
	font-size: 12px;
	text-align: center;
}

.topbar-notifications-all {
	display: block;
	padding: 8px 12px;
	border-top: 1px solid var(--topbar-notification-divider);
	color: var(--topbar-notification-link);
	font-family: 'Artifakt Element', system-ui, sans-serif;
	font-size: 12px;
	text-decoration: none;
	text-align: center;
}

.top-buttons .topbar-notifications-dropdown :where(.topbar-notifications-all) {
	display: block;
	height: auto;
	padding: 8px 12px;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--topbar-notification-divider);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font-family: 'Artifakt Element', system-ui, sans-serif;
	font-size: 12px;
	line-height: 1.2;
	text-align: center;
}

.topbar-notifications-all:hover {
	color: var(--topbar-notification-link-hover);
}

.menu-toggle {
	display: none;
}
.topbar-mobile-actions {
	display: none;
}
.back {
	position: fixed;
	top: calc(env(safe-area-inset-top) + 6px);
	left: 7px;
	gap: 10px;
	min-width: 40px;
}
body.topbar-autohide .topbar-wrapper,
body.topbar-autohide .back {
	/* wrapper не трансформируем, иначе fixed-overlay внутри него начинает "жить" в его координатах */
	position: fixed;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity 0.18s ease,
		visibility 0s linear 0.18s;
	pointer-events: none;
}

body.topbar-autohide .topbar-float-buttons,
body.topbar-autohide .back {
	transform: translateY(-14px);
	transition:
		opacity 0.18s ease,
		transform 0.18s ease,
		visibility 0s linear 0.18s;
}

body:not(.topbar-autohide) .topbar-wrapper,
body:not(.topbar-autohide) .back {
	visibility: visible;
	transition:
		opacity 0.18s ease,
		visibility 0s linear 0s;
}

body:not(.topbar-autohide) .topbar-float-buttons,
body:not(.topbar-autohide) .back {
	transform: translateY(0);
	transition:
		opacity 0.18s ease,
		transform 0.18s ease,
		visibility 0s linear 0s;
}

body.topbar-autohide .topbar-blur-overlay {
	position: fixed;
	left: 0;
	right: 0;
	width: 100vw;
	opacity: 0;
}

.topbar-blur-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: calc(env(safe-area-inset-top) + 45px);
	box-sizing: border-box;
	background: var(--topbar-overlay-bg);
	-webkit-backdrop-filter: blur(var(--blur));
	backdrop-filter: blur(var(--blur));
	z-index: 1049;
	pointer-events: none;
	transition: opacity 0.18s ease;
	box-shadow: none;
	border-bottom: 1px solid var(--topbar-overlay-border);
	border-radius: 0 0 8px 8px;
}
.desktop-only {
	display: none;
}
.mobile-only {
	display: inline-flex;
}
@media (min-width: 901px) {
	.desktop-only {
		display: inline-flex;
	}
	.mobile-only,
	.top-buttons .mobile-only,
	.top-buttons .lang-gitea-pair .lang-switch {
		display: none;
	}
}

.avatar-menu-wrap {
	position: relative;
	display: none;
}
@media (min-width: 901px) {
	.avatar-menu-wrap {
		display: inline-flex;
	}
}
.avatar-button {
	width: 32px;
	height: 32px;
	padding: 0;
}
.avatar-button img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
	display: block;
}

html[data-ui-theme='light'] .avatar-button {
	background: var(--ui-icon-btn-bg);
	border-color: var(--ui-icon-btn-border);
	box-shadow: var(--glass-shadow);
}

html[data-ui-theme='light'] .avatar-button:hover,
html[data-ui-theme='light'] .avatar-button[aria-expanded='true'] {
	background: var(--ui-icon-btn-bg-hover);
	border-color: var(--ui-icon-btn-border-hover);
	box-shadow: var(--glass-shadow-hover);
}
.avatar-menu {
	position: absolute;
	top: 36px;
	right: 0;
	min-width: 80px;
	padding: 8px;
	display: none;
	flex-direction: column;
	gap: 6px;
	border-radius: 10px;
	z-index: 2000;
	background: var(--topbar-panel-bg);
	border: 1px solid var(--topbar-panel-border);
	-webkit-backdrop-filter: blur(var(--blur));
	backdrop-filter: blur(var(--blur));
	box-shadow: var(--topbar-panel-shadow);
}

.avatar-menu .avatar-menu-item.active {
	background: var(--avatar-menu-item-active-bg);
	border-color: var(--avatar-menu-item-active-border);
}
.top-buttons a.danger,
.avatar-menu .avatar-menu-item.danger {
	border-color: var(--danger-brd);
	background: var(--danger-bg);
	color: var(--danger-text);
}
.top-buttons a.danger:hover,
.avatar-menu .avatar-menu-item.danger:hover {
	background: var(--danger-bg-hover);
	border-color: var(--danger-brd-hover);
	color: var(--danger-text-hover);
}

.lang-gitea-pair,
.topbar-button-pair {
	display: inline-flex;
	gap: 7px;
	align-items: center;
	white-space: nowrap;
}
.topbar-db-menu-wrap {
	position: relative;
	display: inline-flex;
}
.avatar-menu .topbar-avatar-submenu-wrap {
	display: block;
	width: 100%;
}
.avatar-menu .topbar-avatar-submenu-wrap form {
	margin: 0;
}
.avatar-menu .topbar-avatar-submenu-button {
	display: flex;
	width: 100%;
	min-width: 100%;
	text-align: center;
	justify-content: center;
	box-sizing: border-box;
}
.topbar-db-menu {
	right: 0;
	left: auto;
	max-height: min(426px, calc(100vh - 24px));
	overflow-y: auto;
}
.avatar-menu .topbar-avatar-submenu-wrap > .topbar-db-menu,
.topbar-avatar-submenu-portal {
	background: var(--topbar-panel-bg);
	border-color: var(--topbar-panel-border);
	-webkit-backdrop-filter: blur(var(--blur)) saturate(115%);
	backdrop-filter: blur(var(--blur)) saturate(115%);
	box-shadow: var(--topbar-panel-shadow);
}
.topbar-avatar-submenu-portal {
	z-index: 2100;
}
#admin-menu.topbar-db-menu,
#system-menu.topbar-db-menu,
#modules-menu.topbar-db-menu {
	min-width: 130px;
}
#documents-menu.topbar-db-menu {
	min-width: min(320px, calc(100vw - 28px));
}
.topbar-db-menu .avatar-menu-item {
	display: block;
	width: 100%;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.topbar-db-menu form {
	margin: 0;
}
.topbar-db-menu .avatar-menu-item.topbar-db-menu-item-system {
	background: var(--topbar-surface-soft);
}
.topbar-db-menu .avatar-menu-item.topbar-db-menu-item-system:hover {
	background: var(--topbar-surface-hover);
	border-color: var(--topbar-border-strong);
}
.topbar-db-menu .avatar-menu-item.topbar-db-menu-item-master:hover {
	background: var(--topbar-surface-hover);
	border-color: var(--topbar-border-strong);
}
.lang-gitea-pair > a.topbar-gitea,
.lang-gitea-pair > a.lang-switch {
	display: grid;
	place-items: center;
	line-height: 1;
	-webkit-appearance: none;
}
.topbar-wrapper [data-svg-icon],
.topbar-wrapper .shd-svg-icon,
.back [data-svg-icon],
.back .shd-svg-icon {
	display: inline-grid;
	place-items: center;
	width: 18px;
	height: 18px;
	line-height: 0;
	flex: 0 0 18px;
	box-sizing: border-box;
}
.lang-gitea-pair > a.topbar-gitea .shd-svg-icon,
.back .shd-svg-icon,
.topbar-float-buttons .floating-gitea-button .shd-svg-icon,
.topbar-manuals-button .shd-svg-icon,
.topbar-search-button .shd-svg-icon,
.menu-toggle .shd-svg-icon,
.topbar-icon-link .shd-svg-icon {
	--shd-icon-size: 18px;
}

@media (max-width: 640px) {
	.top-buttons .lang-gitea-pair {
		display: inline-flex;
	}
}

.avatar-lang-wrap,
.mobile-lang-wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
}
.avatar-lang-item .flag,
.avatar-lang-btn .flag,
.mobile-lang-btn .flag {
	font-size: 16px;
	line-height: 1;
}
.avatar-lang-menu,
.mobile-lang-menu {
	position: absolute;
	top: calc(32px + 6px);
	right: 0;
	min-width: 165px;
	padding: 8px;
	display: none;
	flex-direction: column;
	gap: 6px;
	background: var(--topbar-panel-bg);
	-webkit-backdrop-filter: blur(var(--blur));
	backdrop-filter: blur(var(--blur));
	border: 1px solid var(--topbar-panel-border);
	border-radius: 10px;
	box-shadow: var(--topbar-panel-shadow);
	z-index: 2100;
}
#avatar-menu.open,
.topbar-db-menu.open,
.avatar-lang-menu.open,
.mobile-lang-menu.open {
	display: flex;
}
.avatar-lang-item,
.mobile-lang-item {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 8px;
	font-size: 0.85em;
	transition:
		background 0.16s ease,
		border-color 0.16s ease,
		transform 0.08s ease;
}
.avatar-lang-item.active {
	background: var(--avatar-menu-item-active-bg);
	border-color: var(--avatar-menu-item-active-border);
}
.mobile-lang-item.active {
	transform: translateY(1px);
}
@media (max-width: 900px) {
	.avatar-lang-menu {
		right: auto;
		left: 0;
	}
}
@media (max-width: 900px) {
	.top-buttons .lang-gitea-pair .lang-switch {
		display: none;
	}
}

.main-desktop-link {
	display: inline-flex;
}
@media (max-width: 900px) {
	.topbar-mobile-actions {
		display: inline-flex;
		align-items: center;
		gap: 7px;
		position: relative;
		z-index: 1700;
	}
	.topbar-mobile-actions .topbar-icon-link,
	.topbar-mobile-actions .menu-toggle {
		min-width: 40px;
		gap: 6px;
	}
	.topbar-mobile-actions .topbar-notifications-wrap {
		display: inline-flex;
	}
	.topbar-mobile-actions .topbar-notifications-dropdown {
		position: fixed;
		top: 42px;
		left: 50vw;
		right: auto;
		width: min(380px, calc(100vw - 22px));
		transform: translateX(-50%);
	}
	.top-buttons {
		display: none;
		flex-direction: column;
		gap: 6px;
		background: transparent;
		padding: 7px;
		border-radius: 8px;
		position: absolute;
		top: 47px;
		right: 0;
		border: none;
		z-index: 1600;
		pointer-events: none;
	}
	.top-buttons.visible {
		display: flex;
		pointer-events: auto;
	}
	.top-buttons::before {
		content: '';
		position: absolute;
		inset: 0;
		border-radius: 8px;
		background: var(--topbar-panel-bg);
		border: 1px solid var(--topbar-panel-border);
		box-shadow: var(--topbar-panel-shadow);
		z-index: 0;
		pointer-events: none;
		-webkit-backdrop-filter: blur(var(--blur));
		backdrop-filter: blur(var(--blur));
	}
	.menu-toggle {
		display: inline-flex;
		position: relative;
	}
	.top-buttons > .main-desktop-link,
	.top-buttons > .topbar-notifications-wrap {
		display: none;
	}
	.top-buttons > * {
		position: relative;
	}
	.top-buttons > .topbar-db-menu-wrap {
		align-self: stretch;
	}
	.top-buttons > .topbar-db-menu-wrap > .topbar-menu-button,
	.top-buttons > a:not(.topbar-icon-link) {
		width: 100%;
	}
	.top-buttons > .topbar-mobile-divider {
		align-self: stretch;
		height: 1px;
		flex: 0 0 1px;
		margin: 0 12px;
		background: var(--topbar-border);
		pointer-events: none;
	}
	.top-buttons .topbar-db-menu-wrap > .topbar-menu-button {
		position: relative;
	}
	.top-buttons .topbar-db-menu-wrap > .topbar-menu-button::after {
		content: '';
		position: absolute;
		top: 50%;
		right: 10px;
		width: 6px;
		height: 6px;
		border-right: 1px solid currentColor;
		border-bottom: 1px solid currentColor;
		transform: translateY(-70%) rotate(45deg);
		opacity: 0.58;
		pointer-events: none;
		transition: transform 0.16s ease, opacity 0.16s ease;
	}
	.top-buttons .topbar-db-menu-wrap > .topbar-menu-button[aria-expanded='true']::after {
		transform: translateY(-20%) rotate(225deg);
		opacity: 0.95;
	}
	.top-buttons .topbar-mobile-organizations-wrap,
	.top-buttons .topbar-mobile-documents-wrap {
		flex-direction: column;
		gap: 6px;
		width: 100%;
	}
	.top-buttons .topbar-mobile-organizations-wrap > .topbar-menu-button,
	.top-buttons .topbar-mobile-documents-wrap > .topbar-menu-button {
		width: 100%;
	}
}

.login-mobile-only {
	display: none;
}
.topbar-wrapper a,
.login-mobile-only a {
	margin-top: 0;
}
@media (max-width: 900px) {
	.login-mobile-only {
		display: block;
		z-index: 1049;
		position: relative;
	}
}
@supports selector(:has(*)) {
	.topbar-wrapper:has(.top-buttons.visible) .login-mobile-only {
		display: none;
	}
}

body.modal-open {
	overflow: hidden;
	touch-action: none;
}

/* чтобы клик по картинке не «мимо» кнопки */
#avatar-button img {
	pointer-events: none;
}

.avatar-menu > .topbar-avatar-submenu-wrap > .topbar-avatar-submenu-button {
	justify-content: center;
	text-align: center;
}