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

:root {
	--glass-bg: rgba(255,255,255,.08);
	--glass-bg-hover: rgba(255,255,255,.12);
	--glass-brd: rgba(255,255,255,.18);
	--glass-brd-hover: rgba(255,255,255,.28);
	--danger-bg: rgba(255,77,79,.18);
	--danger-bg-hover: rgba(255,77,79,.25);
	--danger-brd: rgba(255,77,79,.55);
	--btn-h: 32px;
	--btn-r: 10px;
	--btn-fz: .8em;
	--blur: 8px;
}

@font-face {
	font-family: "Fira Mono";
	src: url("/fonts/FiraMono-Regular.woff2") format('woff2');
}
@font-face {
	font-family: 'Artifakt Element';
	src: url('/fonts/artifaktelement-regular.woff2') format('woff2');
}

.top-buttons a,
.menu-toggle,
.back,
#gitea-modal button,
#gitea-modal input[type=submit],
.modal-button,
.floating-gitea-button {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

.top-buttons a,
.theme-toggle-btn,
.menu-toggle,
.back,
a.main-mobile-link,
.maintenance-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,
.gitea-tabs .tab-button {
	height: var(--btn-h);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 10px;
	background: var(--glass-bg);
	color: #fff;
	font-family: 'Artifakt Element', monospace;
	font-size: var(--btn-fz);
	border: 1px solid var(--glass-brd);
	border-radius: var(--btn-r);
	text-decoration: none;
	box-sizing: border-box;
	margin: 0 !important;
	text-shadow: none;
	cursor: pointer;
	transition: background .16s ease, border-color .16s ease, transform .08s ease;
}
.top-buttons a:hover,
.theme-toggle-btn:hover,
.menu-toggle:hover,
.back:hover,
a.main-mobile-link:hover,
.maintenance-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,
.gitea-tabs .tab-button:hover {
	background: var(--glass-bg-hover);
	border-color: var(--glass-brd-hover);
	text-decoration: none;
}
.theme-toggle-btn:active,
.menu-toggle:active,
.top-buttons a:active,
.back:active,
a.main-mobile-link:active,
.maintenance-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,
.gitea-tabs .tab-button:active {
	transform: translateY(1px);
}
.theme-toggle-btn[disabled] {
	opacity: .75;
	cursor: not-allowed;
}

.topbar-float-buttons .floating-gitea-button {
	position: relative !important;
	min-width: 40px;
	height: 33px;
	font-size: .8em;
	line-height: 1;
	box-shadow: 0 10px 34px rgba(0,0,0,.40);
}
.gitea-tabs .tab-button {
	flex: 1 1 0;
	min-width: 0;
	height: 36px;
	border-radius: 8px;
	border: 1px solid rgba(255,255,255,.22);
	font-size: .95em;
	transition: background .2s, border-color .2s;
}
.gitea-tabs .tab-button.active {
	background: rgba(120,120,255,.4);
	border-color: rgba(180,180,255,.35);
}
.maintenance-toggle {
	position: relative;
	min-width: 40px;
}
.maintenance-toggle[aria-pressed="true"],
.maintenance-toggle.maintenance-on {
	background: var(--danger-bg) !important;
	border-color: var(--danger-brd) !important;
	color: #fff;
}

a {
	margin-top: 0;
}

.main-mobile-link,
.menu-toggle,
.top-buttons,
.top-buttons a,
#gitea-report-button,
.back {
	z-index: 1052;
	position: relative;
}
.topbar-wrapper {
	position: fixed;
	top: calc(env(safe-area-inset-top) + 7px);
	right: 7px;
	z-index: 1050;
}
.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: wrap;
	position: relative;
	z-index: 1050;
	align-items: center;
}
.menu-toggle {
	display: none;
}
.back {
	position: fixed;
	top: calc(env(safe-area-inset-top) + 7px);
	left: 7px;
	gap: 10px;
}
.topbar-wrapper a {
	margin-top: 0 !important;
}

.topbar-blur-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: calc(env(safe-area-inset-top) + 46px);
	background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.25));
	-webkit-backdrop-filter: blur(var(--blur));
	backdrop-filter: blur(var(--blur));
	z-index: 1049;
	pointer-events: none;
	border-bottom: 1px solid var(--glass-brd);
	border-radius: 0 0 8px 8px;
}

#gitea-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.55);
	-webkit-backdrop-filter: blur(var(--blur));
	backdrop-filter: blur(var(--blur));
	z-index: 1400;
	display: none;
	justify-content: center;
	align-items: center;
	font-family: 'Fira Mono', monospace;
	padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) 10px;
	overscroll-behavior: contain;
	contain: layout paint;
	height: 100dvh;
}
#gitea-modal {
	max-width: min(560px, 96vw);
	width: min(560px, calc(96vw - 2px));
	max-height: 92svh;
	display: flex;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
#gitea-modal form {
	overflow-x: hidden;
	padding: 0 10px 10px 10px;
	box-sizing: border-box;
	font-family: 'Artifakt Element', monospace;
	font-size: .9em;
	color: #eee;
	width: 100%;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
	border: 1px solid var(--glass-brd);
	border-radius: 12px;
	box-shadow: 0 10px 34px rgba(0,0,0,.40);
	-webkit-backdrop-filter: blur(var(--blur));
	backdrop-filter: blur(var(--blur));
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	max-height: calc(100dvh - 20px);
}
.gitea-sticky-header {
	position: sticky;
	top: 0;
	z-index: 1;
	margin: 0 -1em 0 -1em;
	padding: 12px 1em 10px;
	background: linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.25));
	border-bottom: 1px solid rgba(255,255,255,.12);
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}
#gitea-modal h1 {
	font-family: 'IBM Plex Sans Condensed', sans-serif;
	font-size: 1.3em;
	margin: 0;
	color: #fff;
	text-align: center;
}
.gitea-tabs {
	display: flex;
	gap: 8px;
	margin: 12px 0 8px;
	flex-wrap: wrap;
	align-items: flex-start;
}
.gitea-tabs .gitea-hint {
	flex: 1 0 100%;
	order: 3;
	margin: 6px 0 0;
	font-size: .8em;
	color: #bdbdbd;
}
#gitea-modal label {
	display: block;
	margin-top: .7em;
	font-size: 1em;
	color: rgb(230,230,230);
}
#gitea-modal textarea,
#gitea-modal select,
#gitea-modal input {
	width: 100%;
	min-width: 0;
	padding: .3em;
	border-radius: 10px;
	border: 1px solid var(--glass-brd);
	background: rgba(255,255,255,.06);
	color: #ddd;
	margin-top: .3em;
	box-sizing: border-box;
	font-family: 'Fira Mono', monospace;
	height: 32px;
}
#gitea-modal textarea {
	min-height: 90px;
	resize: vertical;
	max-height: 60svh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.modal-button {
	display: block;
	width: 100%;
	background: rgba(255,255,255,.1);
	color: #fff;
	border: none;
	border-radius: 6px;
	font-family: 'Artifakt Element', monospace;
	font-size: 0.9em;
	text-align: center;
	margin-top: 1em;
	transition: background .3s;
	height: 32px;
}
.modal-button:hover {
	background: rgba(255,255,255,.2);
}
#gitea-modal .modal-buttons {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	position: static;
	background: transparent;
	font-family: 'Fira Mono', monospace !important;
}
#gitea-status {
	text-align: center;
	margin-top: 1.6em;
	font-size: .95em;
	font-family: 'Fira Mono', monospace;
}

@supports (-webkit-touch-callout: none) {
	#gitea-modal select,
	#gitea-modal textarea,
	#gitea-modal input[type="file"],
	#gitea-modal input[type="text"] {
		font-size: 14px;
	}
}
#gitea-modal select,
#gitea-modal textarea,
#gitea-modal input[type="file"],
#gitea-modal input[type="text"] {
	font-size: .9rem;
	line-height: 1.2;
}

@media (max-height: 560px) {
	#gitea-modal-overlay {
		padding: 0;
	}
	#gitea-modal {
		width: 100vw;
		max-width: 100vw;
		max-height: 100dvh;
		height: 100dvh;
	}
	#gitea-modal form {
		max-height: 100dvh;
		height: 100dvh;
		border-radius: 0 !important;
	}
}

.floating-actions-row {
	position: fixed;
	right: 16px;
	bottom: 16px;
	display: flex;
	flex-direction: row-reverse;
	gap: 10px;
	z-index: 900;
}
a.main-mobile-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 0 !important;
	transition: none !important;
}

.left select {
	height: 36px;
	border-radius: 8px;
	border: 1px solid #2a2d35;
	background: #15171b;
	color: #fff;
	padding: 0 6px;
	width: 70px;
	font-family: var(--font-ui);
	box-sizing: border-box;
}

.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 !important;
	}
}

.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;
}
.avatar-menu {
	position: absolute;
	top: 40px;
	right: 0;
	min-width: 80px;
	padding: 8px;
	display: none;
	flex-direction: column;
	gap: 6px;
	border-radius: 10px;
	z-index: 2000;
	background: transparent;
	border: none;
	isolation: isolate;
}
.avatar-menu::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 10px;
	background: rgba(0,0,0,.30);
	border: 1px solid rgba(255,255,255,.2);
	-webkit-backdrop-filter: blur(var(--blur));
	backdrop-filter: blur(var(--blur));
	z-index: -1;
	pointer-events: none;
}
.avatar-menu.open {
	display: flex;
}
.top-buttons a.danger,
.avatar-menu .avatar-menu-item.danger {
	border-color: var(--danger-brd);
	background: var(--danger-bg);
}
.top-buttons a.danger:hover,
.avatar-menu .avatar-menu-item.danger:hover {
	background: var(--danger-bg-hover);
}

.lang-gitea-pair {
	display: inline-flex;
	gap: 7px;
	align-items: center;
	white-space: nowrap;
}
.lang-gitea-pair > a.topbar-gitea,
.lang-gitea-pair > a.lang-switch {
	display: grid;
	place-items: center;
	line-height: 1;
	-webkit-appearance: none;
}
@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: rgba(0,0,0,.30);
	-webkit-backdrop-filter: blur(var(--blur));
	backdrop-filter: blur(var(--blur));
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 10px;
	z-index: 2100;
}
.avatar-lang-menu.open,
.mobile-lang-menu.open {
	display: flex;
}
.avatar-lang-item,
.mobile-lang-item {
	height: var(--btn-h);
	display: grid;
	grid-template-columns: 22px 1fr;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	background: var(--glass-bg);
	color: #fff;
	font-family: 'Artifakt Element', monospace;
	border: 1px solid var(--glass-brd);
	border-radius: var(--btn-r);
	text-decoration: none;
	font-size: .85em;
	box-sizing: border-box;
	margin: 0 !important;
	transition: background .16s ease, border-color .16s ease, transform .08s ease;
}
.avatar-lang-item.active {
	background: rgba(120,120,255,.3);
	border-color: rgba(180,180,255,.35);
}
.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 !important;
	}
}

.main-desktop-link {
	display: inline-flex;
}
@media (max-width: 900px) {
	.main-desktop-link {
		display: none !important;
	}
}
.menu-toggle {
	display: none;
}
@media (max-width: 900px) {
	.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;
	}
	.top-buttons.visible {
		display: flex;
	}
	.top-buttons::before {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: 8px;
		background: rgba(0,0,0,.20);
		border: 1px solid rgba(255,255,255,.2);
		z-index: 0;
		pointer-events: none;
		-webkit-backdrop-filter: blur(var(--blur));
		backdrop-filter: blur(var(--blur));
	}
	.menu-toggle {
		display: inline-block;
		height: 33px;
		position: relative;
		z-index: 1700;
	}
	.top-buttons > * {
		position: relative;
	}
}

.login-mobile-only {
	display: none;
}
.topbar-wrapper a {
	margin-top: 0 !important;
}
.login-mobile-only a {
	margin-top: 0 !important;
}
@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 !important;
	}
}

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

/* добавить поддержку альтернативного класса открытия */
.avatar-menu.is-open { 
	display: flex;
}

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