html[data-theme="dark"] {
    --tabs-nav-bg: #222222;
    --tabs-menu-bg: #303030;
    --tabs-tab-bg: #444444;
    --tabs-tab-bg-hover: #555555;
    --tabs-tab-text: #ffffff;
    --tabs-content-border: #8e8c8c;
    --tabs-content-bg: #222222;
    --tabs-close-bg: #983f61;
    --tabs-close-text: #ffffff;
}

html[data-theme="light"] {
    --tabs-nav-bg: #f4f8fc;
    --tabs-menu-bg: #eef4fa;
    --tabs-tab-bg: #ffffff;
    --tabs-tab-bg-hover: #f6faff;
    --tabs-tab-text: #223248;
    --tabs-content-border: #d7e2ee;
    --tabs-content-bg: #ffffff;
    --tabs-close-bg: #d85a72;
    --tabs-close-text: #ffffff;
}

/* + добавить (ниже всех правил табов) */
#nav3_menu .tab:not(.active-tab):hover { background-color: var(--tabs-tab-bg-hover); transform: scale(1.05); }
#nav3_menu .tab.active-tab { background-color: #dd3434; border-color: #dd3434; color: #fff; transform: none; z-index: 2; }
#nav3_menu .tab .close1-btn { position: absolute; top: 5px; right: 5px; width: 15px; height: 15px; background-color: var(--tabs-close-bg); color: var(--tabs-close-text); border-radius: 50%; font-size: 12px; text-align: center; line-height: 15px; cursor: pointer; z-index: 10; visibility: visible; opacity: 1; }

/* наверно кнопка закрытия закладки */
.close1-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 15px;
    height: 15px;
    background-color: var(--tabs-close-bg);
    color: var(--tabs-close-text);
    border-radius: 50%;
    font-size: 12px;
    text-align: center;
    line-height: 15px;
    cursor: pointer;
    z-index: 10;
    visibility: visible; /* Гарантируем видимость */
    opacity: 1; /* Гарантируем полную видимость */
}
.text-tab {
    padding-right: 7px;
}
#nav3_menu div .close1-btn {
    visibility: visible; /* Крестик всегда виден */
    opacity: 1; /* Полная видимость крестика */
}
#nav3_menu div:hover .close1-btn {
    visibility: visible; /* Крестик остаётся видимым при наведении */
    opacity: 1;
}
.nav3 {
    background-color: var(--tabs-nav-bg);
    padding-bottom: 10px;
    padding-top: 10px;
    overflow-x: auto; /* горизонтально */
    overflow-y: hidden;
    white-space: nowrap;
}
#nav3_menu {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
#nav3_menu {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
    background-color: var(--tabs-menu-bg);
}
#nav3_menu div {
    overflow: visible; /* Убедитесь, что крестик не обрезается */
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--tabs-tab-bg);
    color: var(--tabs-tab-text);
    cursor: pointer;
    margin-right: 10px;
    /*border-radius: 4px;*/
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    transition: all 0.3s ease-in-out;
    z-index: 1;
    position: relative;
    border: 1px solid var(--tabs-content-border);
}
#nav3_menu div:hover {
    background-color: var(--tabs-tab-bg-hover);
    transform: scale(1.05);
}
.active-tab {
    background-color: #dd3434 !important;
}
@keyframes slideIn {
    from {opacity: 0;transform: translateX(100%);}
    to {opacity: 1;transform: translateX(0);}
}
#nav3_menu .tab {
    animation: slideIn 0.3s ease-out;
}
#mycanvas {
    width: 600px;
    height: 800px;
}
.tabs-container {
    display: flex;
    gap: 10px; border-bottom: 2px solid #ccc;
    padding-bottom: 4px; }
.tab {
    padding: 10px 15px;
    cursor: pointer; border: 1px solid #ccc; border-radius: 5px 5px 0 0; background: #f1f1f1; }
/*.close1-btn { margin-left: 10px; cursor: pointer; color: red; font-weight: bold; }*/
.tab-content {
    display: none;
    padding: 4px;
    border: 1px solid var(--tabs-content-border);
    background: var(--tabs-content-bg);
    border-radius: 0 0 5px 5px; }
.tab-content.active { display: block; }

/* оформление САМОГО <li>, чтобы был "объёмным" */
.tree li.active {
    position: relative;
    background: rgba(255,214,0,.16);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    margin: 2px 6px;
}

/* тонкий жёлтый акцент слева без сдвига контента */
.tree li.active::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: #ffd600;
    border-radius: 10px 0 0 10px;
}

/* на всякий случай убираем старую подсветку на .leaf-node-content */
.tree li.active > .leaf-node-content {
    background: transparent;
    border-left: 0;
}