/* =========== © 2026 Centroarts - https://m1r.ru =========== */

/* Header & User */
.m1r-side { user-select: none; }
.m1r-usertools, .m1r-header .side-cont { display: none; }
.m1r-header-line {
    display: flex; align-items: center; position: relative;
    height: var(--headbar-h); padding: 14px;
}

/* Logo */
.m1r-logo { color: hsl(var(--c-primary)); margin-right: auto; }
.m1r-logo svg { height: 32px; width: 113px; fill: currentColor; }

@media (max-width: 991.9px) { 
    .m1r-header .side-cont { display: none; }
    .m1r-logo { margin-left: auto; }

    .m1r-mobile-btns {
        position: fixed; inset: 0; bottom: auto; z-index: 102;
        display: flex; align-items: center; gap: 8px; pointer-events: none; user-select: none;
        height: var(--headbar-h); padding: 12px;
    }
    .m1r-mobile-btns .btn {
		--btn-h: 44px;
		--btn-pad: 10px;
		--btn-c-bg: hsla(var(--c-body),0.9);
		--btn-sw: 0 4px 20px -4px hsla(0, 0%, 0%, 0), inset 0 0 0 1px hsl(var(--c-body));
		pointer-events: all; border-radius: 24px;
		backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
		flex-shrink: 0;
		transition: box-shadow .2s ease, background-color .2s ease;
	}
	html.oscrl .m1r-mobile-btns .btn {
		--btn-c-bg: hsla(var(--c-body-light),0.9);
		--btn-sw: 0 4px 20px -4px hsla(0, 0%, 0%, .25), inset 0 0 0 1px hsl(var(--c-body-light));
	}
	.m1r-mobile-btns .btn > .mp-if, .m1r-mobile-btns .btn > .im-close { transition: opacity .2s ease, transform .2s ease; }
	.m1r-mobile-btns .btn > .im-close { position: absolute; top: calc(50% - var(--i-size) / 2); left: calc(50% - var(--i-size) / 2); z-index: 1; }
	.m1r-mobile-btns .btn:not(.active) > .im-close,
	.m1r-mobile-btns .btn.active > .mp-if { opacity: 0; transform: scale(0.8); }

    .mobile-btns-left { margin-right: auto; }
    .mobile-btns-right { margin-left: auto; }
    .mobile-btns-left, .mobile-btns-right { display: flex; gap: inherit; align-items: inherit; }

    .m1r-mobile-btns .btn.mm-avatar { --btn-pad: 4px; }
    .mm-avatar .avatar { --avatar-size: 40px; }

	.m1r-mobile-menu, .m1r-usertools {
		position: fixed; z-index: 1000; pointer-events: none;
		inset: 0; display: none; align-items: start; padding: 12px; padding-top: calc(var(--headbar-h) - 4px);
	}
	.m1r-mainmenu, .m1r-usermenu {
		width: 100%; max-width: var(--dropdown-w); max-height: 100%; pointer-events: none; padding: 20px;
		background-color: hsl(var(--dropdown-bg)); border-radius: var(--dropdown-rd); box-shadow: var(--dropdown-sw);

		scrollbar-color: var(--c-border) transparent;
		overflow: hidden; overflow-y: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
		opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease, transform .2s ease-out;
	}
	.m1r-mobile-menu { justify-content: start; }
	.m1r-usertools { justify-content: end; }

	.m1r-mainmenu { transform: translateX(-8px); }
	.m1r-usermenu { transform: translateX(8px); }

	.m1r-mobile-menu.open, .m1r-usertools.open { display: flex !important; }
	html:not(.modal-open).mp-open body, html.mp-open { overflow: hidden; }
	html:not(.modal-open).mp-open .m1r-mobile-menu.open, html.mp-open .m1r-usertools.open { opacity: 1; visibility: visible; }
	html:not(.modal-open).mp-open .m1r-mobile-menu.open .m1r-mainmenu,
	html:not(.modal-open).mp-open .m1r-usertools.open .m1r-usermenu { transform: translateX(0); opacity: 1; visibility: visible; pointer-events: all; }

	.mp-overlay {
		position: fixed; inset: 0; z-index: 100; opacity: 0; visibility: hidden; pointer-events: none;
		background-color: var(--modal-overlay); transition: opacity .2s ease, visibility .2s ease;
	}
	.mp-overlay.show { opacity: 1; visibility: visible; pointer-events: all; }
}
@media (max-height: 767.9px) and (max-width: 991.9px) { 
	.m1r-mainmenu { --dropdown-w: 360px; display: grid; grid-template-columns: repeat(2, 1fr); }
	.m1r-mainmenu hr, .m1r-mainmenu hr + .mainmenu-group {  grid-column: span 2; }
	.m1r-mainmenu .mainmenu-group + .mainmenu-group { margin-top: 0; }
	.mm-item { font-size: var(--fs-1); }
	.m1r-mainmenu hr + .mainmenu-group { display: grid; grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
    .m1r-mobile-btns { display: none; }
    .pcside {
        padding: 0;
        padding-left: var(--sidebar-lw);
        padding-right: var(--sidebar-rw);
    }
	.side-cont {
		padding: var(--side-pad); flex: 1 1 auto;
		scrollbar-color: var(--c-border) transparent;
		overflow-y: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
	}
    .m1r-side {
        --side-pad: 20px;
		display: flex; flex-direction: column;
	    position: fixed; z-index: 2; top: 0; height: 100%;
    }
    .m1r-side::after {
        content: ""; position: absolute; inset: 0; width: 1px;
		background-color: var(--c-border);
        /* background-image: var(--c-border-fade); */
    }
    .m1r-header { left: 0; width: var(--sidebar-lw); }
    .m1r-header .side-cont { display: block; }
    .m1r-usertools { right: 0; width: var(--sidebar-rw); }

    .m1r-header::after { left: auto; }
    .m1r-usertools::after { right: auto; }

    .m1r-header-line { flex: 0 0 var(--headbar-h); padding-right: var(--side-pad); padding-left: var(--side-pad); }
    .m1r-logo { overflow: hidden; }
    .m1r-header-line + .side-cont { margin-top: calc(var(--side-pad) / -2); }

	.m1r-usermenu { display: flex; flex-direction: column; height: 100%; }
}

/* Main Menu */
.m1r-mainmenu { --mm-group-gap: 16px; }
.m1r-mainmenu hr { height: 0; margin: var(--mm-group-gap) 0; }

.mainmenu-group + .mainmenu-group { margin-top: var(--mm-group-gap); }
.mainmenu-group > a { display: flex; align-items: center; }

.mm-label { display: flex; padding: 4px 0; gap: 4px; font-weight: bold; }
.mm-label > .im {
	--i-size: 20px;
	transform: translateX(-16px); opacity: 0;
	transition: transform .15s ease, opacity .15s ease;
}
.mm-label:hover > .im { opacity: .5; transform: translateX(0); }

.mm-item { margin-top: 4px; }
.mm-item-icon { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 33%; margin-right: 8px; }
.mm-item-icon::after {
	content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px hsla(var(--c-text),0.05);
	border-radius: inherit; transition: box-shadow .15s ease;
}
.mm-item:hover .mm-item-icon::after { box-shadow: inset 0 0 0 2px hsla(var(--c-text),1); }
.mm-item-cont { flex: 1 1 auto; }

/* UserTools */
.utools-head { position: relative; text-align: center; }
@media (max-width: 991.9px) {
	.utools-head { margin-bottom: 20px; }
}
@media (min-width: 992px) {
	.utools-head { padding: var(--side-pad); }
}

.ut-head-avatar { width: 80px; height: 80px; display: block; margin: 0 auto; }
.ut-head-avatar .avatar { --avatar-size: 80px; }
.ut-head-avatar .avatar::before {
	content: ""; position: absolute; inset: 0; background-color: #000; opacity: .05;
	transition: opacity .2s ease; border-radius: inherit;
}
.ut-head-avatar:hover .avatar::before { opacity: 0; }

.ut-head-cta { margin-top: 12px; display: flex; justify-content: center; }
.ut-head-name { font-weight: bold; }

/* Vmenu */
.utools-menu { --ut-group-gap: 16px; } 
.utools-menu hr { height: 0; margin: var(--ut-group-gap) 0; }
.el-nav:not(:first-child) { margin-top: 4px; }
.el-nav {
	display: flex; width: 100%; align-items: center; text-align: left;
	gap: 8px; padding: 6px 8px; line-height: 24px; height: 36px;
	border-radius: 12px;
}
.el-nav-cont { flex: 1 1 auto; white-space: nowrap; }
.el-nav-icon { width: 24px; height: 24px; }

.el-nav:hover {
	background-color: hsla(var(--c-text),0.05);
}

.el-nav.disabled { color: hsla(var(--c-text),0.5); cursor: default; }
.el-nav.disabled:hover .i-combo-a { opacity: 1; transform: scale(1); }
.el-nav.disabled:hover .i-combo-o { opacity: 0; transform: scale(0.8); }

html:not(.hs-right) .el-nav-loginnow { display: none; }

/* Dark Toggle Btn */
.dark-toggle:not(.dark) .dark-toggle-o,
.dark-toggle:not(.light) .dark-toggle-a,
.dark-toggle:not(.system) .dark-toggle-s { display: none; }

.dark-toggle.light .dark-toggle-sun, .dark-toggle.system .dark-toggle-sys { opacity: 1; transform: scale(1); }
.dark-toggle.dark .dark-toggle-sun, .dark-toggle.light .dark-toggle-moon, .dark-toggle.system .dark-toggle-moon { opacity: 0; transform: scale(0.8); }


/* Expand Sidebars */
@media (max-width: 1279.9px) {
    .m1r-side-expand { display: none; }
}
@media (min-width: 1280px) {
    .m1r-header-line .m1r-side-expand { margin-right: -4px; }
	.utools-head .m1r-side-expand { position: absolute; left: calc(var(--side-pad) - 4px); top: calc(var(--side-pad) - 4px); }

    .m1r-side-expand { opacity: .5; transition: opacity .15s ease; }
    .m1r-side-expand:hover { opacity: .75; }
    .m1r-side-expand:active { opacity: 1; }

    .m1r-side-expand .i-combo { width: 24px; height: 24px; }
    .m1r-side-expand .i-combo .ic { --i-size: 24px; }

    .m1r-side-expand.active .i-combo-a { opacity: 1; transform: scale(1); }
    .m1r-side-expand.active .i-combo-o { opacity: 0; transform: scale(0.8); }

	html.hs-right { --sidebar-rw: 76px; }
	html.hs-left { --sidebar-lw: 76px; }
	html.hs-left .m1r-header, html.hs-right .m1r-usertools { z-index: 102; }
	html.hs-left .side-cont, html.hs-right .side-cont { overflow: visible; }

	html.hs-left .m1r-logo { min-width: 40px; max-width: 40px; margin-left: -2px; }
	html.hs-left .m1r-header-line .m1r-side-expand { position: absolute; left: 100%; margin-left: 8px; }

	html.hs-left .mm-label, html.hs-left .m1r-mainmenu hr { display: none; }
	html.hs-left .mainmenu-group + .mainmenu-group { margin-top: 0; }
	html.hs-left .mm-item-icon { margin-right: 0; }

	html.hs-right .utools-head .m1r-side-expand { left: auto; right: 100%; margin-right: 8px; }

	html.hs-right .utools-head { height: 72px; padding: 16px var(--side-pad); }
	html.hs-right .ut-head-avatar { width: 40px; height: 40px; margin: 0 -2px; }
	html.hs-right .ut-head-avatar .avatar { --avatar-size: 40px; }
	html.hs-right .ut-head-cta, html.hs-right .utools-menu hr { display: none; }
	html.hs-right .el-nav { padding: 6px; }
	html.hs-right .utools-head + .side-cont { margin-top: calc(var(--side-pad) / -2); }

	html.hs-left .mm-item, html.hs-right .el-nav { position: relative; }
	html.hs-left .mm-item-cont, html.hs-right .el-nav-cont {
		position: absolute; transform: translateX(0); opacity: 0; visibility: hidden;
		background-color: var(--c-tooltip-bg); color: var(--c-tooltip-text);
		pointer-events: none; border-radius: 12px; padding: 4px 8px; font-size: var(--fs-1);
	}
	html.hs-left .mm-item:hover .mm-item-cont, html.hs-right .el-nav:hover .el-nav-cont {
		opacity: 1; visibility: visible;
		transition: transform .15s ease, opacity .15s ease, visibility .15s ease;
	}
	html.hs-left .mm-item-cont { left: 100%; }
	html.hs-left .mm-item:hover .mm-item-cont { transform: translateX(8px); }

	html.hs-right .el-nav-cont { right: 100%; }
	html.hs-right .el-nav:hover .el-nav-cont { transform: translateX(-8px); }
}
@media (min-width: 992px) and (max-width: 1279.9px) {
	:root {
		--sidebar-rw: 76px;
		--sidebar-lw: 76px;
	}

	.m1r-logo { min-width: 40px; max-width: 40px; margin-left: -2px; }
	.m1r-header .mm-label, .m1r-mainmenu hr { display: none; }
	.side-cont { overflow: visible; }
	.mainmenu-group + .mainmenu-group { margin-top: 0; }
	.mm-item-icon { margin-right: 0; }

	.utools-head { height: 72px; padding: 16px var(--side-pad); }
	.ut-head-avatar { width: 40px; height: 40px; margin: 0 -2px; }
	.ut-head-avatar .avatar { --avatar-size: 40px; }
	.ut-head-cta, .utools-menu hr { display: none; }
	.el-nav { padding: 6px; }
	.utools-head + .side-cont { margin-top: calc(var(--side-pad) / -2); }

    .mm-item, .el-nav { position: relative; }
    .mm-item .mm-item-cont, .el-nav .el-nav-cont {
		position: absolute; transform: translateX(0); opacity: 0; visibility: hidden;
		background-color: var(--c-tooltip-bg); color: var(--c-tooltip-text);
		pointer-events: none; border-radius: 12px; padding: 4px 8px; font-size: var(--fs-1);
	}
    .mm-item:hover .mm-item-cont, .el-nav:hover .el-nav-cont {
		opacity: 1; visibility: visible;
		transition: transform .15s ease, opacity .15s ease, visibility .15s ease;
	}
    .mm-item-cont { left: 100%; }
    .mm-item:hover .mm-item-cont { transform: translateX(8px); }
	.el-nav-cont { right: 100%; }
	.el-nav:hover .el-nav-cont { transform: translateX(-8px); }
}