@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Archivo:wght@600;700;800;900&display=swap');

/* ПЕРЕМЕННЫЕ — белая тема, акцент #ff4a34, шрифты как на странице курса */
:root {
    --bg-menu: #ffffff;
    --bg-submenu: #ffffff;
    --bg--menu-hover: rgba(10, 10, 10, 0.05);
    --font-menu: "Archivo", sans-serif;               /* основной текст меню */
    --menu-font-title: "Space Mono", monospace;        /* заголовок раздела подменю */
    --color-menu: #141312;
    --color-text-2: #7a7873;
    --link-submenu-hover: rgba(255, 74, 52, 0.08);
    --menu-submenu-link-hover: rgba(255, 74, 52, 0.08);
    --menu-course-accent: #ff4a34;
    --color-fon-accent: #ff4a34;
    --menu-color-accent: #ff4a34;
}

/* Фон самой панели и подменю — явно, для всех разрешений
   (в исходнике фон был задан только внутри мобильного медиа-запроса) */
.gc-account-leftbar{
    background: var(--bg-menu) !important;
    border-right: 1px solid rgba(10, 10, 10, 0.08);
}
.gc-account-leftbar .gc-account-user-menu{
    background: var(--bg-menu) !important;
}
.gc-account-leftbar .gc-account-user-submenu-bar{
    background: var(--bg-submenu) !important;
    border-right: 1px solid rgba(10, 10, 10, 0.08);
}

/*левое меню*/
.custom-menu .gc-account-leftbar .gc-account-user-menu li {
    display: flex;
    justify-content: center;
    align-items: center;
}
.custom-menu .gc-account-leftbar .gc-account-user-menu li a {
    display: flex;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    transition: all 0.3s ease-in-out;
}
/* Активный пункт — оранжевый фон (как на референсе), без обводки */
.custom-menu .gc-account-leftbar .gc-account-user-menu li.active a,
.gc-account-leftbar .gc-account-user-menu li.selected a {
    background: var(--color-fon-accent) !important;
    outline: none !important;
}
/* Иконка активного пункта — делаем белой поверх оранжевого фона
   (работает, если иконка — однотонное чёрное/тёмное изображение) */
.custom-menu .gc-account-leftbar .gc-account-user-menu li.active a img,
.gc-account-leftbar .gc-account-user-menu li.selected a img {
    filter: brightness(0) invert(1);
}
.custom-menu .gc-account-leftbar .gc-account-user-menu li a:hover {
    background-color: var(--bg--menu-hover) !important;
}
.custom-menu .gc-account-leftbar .gc-account-user-menu li.menu-item-profile a {
    padding: 0;
    background: var(--menu-color-accent) !important;
}
.custom-menu .gc-account-leftbar .gc-account-user-menu {
    margin-top: 8px;
}
.custom-menu .gc-account-leftbar a img {
    max-width: 22px !important;
}
.custom-menu .gc-account-leftbar .menu-item-profile a img {
    max-width: 100% !important;
    border-radius: 12px;
    margin-top: 5px;
    margin-bottom: 5px;
}
.custom-menu .gc-account-user-submenu-bar .gc-account-user-submenu li a {
    font-family: var(--font-menu);
    font-weight: 700;
    text-transform: none !important;
    color: var(--color-menu) !important;
    border-radius: 8px;
    border: none;
    margin-left: 8px;
    margin-right: 8px;
    transition: all 0.2s ease-in-out;
}
.custom-menu .gc-account-user-submenu-bar .gc-account-user-submenu li a:hover {
    background: var(--link-submenu-hover) !important;
}
.custom-menu .gc-account-user-submenu-bar h3 {
    font-family: var(--menu-font-title);
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-text-2);
}
.custom-menu .gc-account-leftbar a img {
    max-width: 22px !important;
    transition: all 0.35s;
}
.gc-account-leftbar .gc-account-user-submenu-bar div.user-balance {
    color: var(--color-text-2);
}
@media (max-width: 768px) {
    .gc-main-content.gc-user-logined.gc-user-user .page-header {
        margin: 0 !important;
    }
    .gc-account-leftbar .gc-account-user-menu {
        background: var(--bg-menu);
    }
    .gc-page-nav-items-menu a {
        background: var(--bg-menu);
    }
    .gc-account-leftbar .toggle-link {
        background: var(--menu-submenu-link-hover);
    }
}
/*левое меню конец*/