@import url('https://fonts.googleapis.com/css2?family=Delius&family=Delius+Swash+Caps&family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html *
{
    font-family: "Montserrat Alternates", sans-serif;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
}

html,
body {
    height: 100dvh;              /* «реальная» высота окна */
    overflow-x: hidden;          /* запрещаем горизонтальный скролл */
    overflow-y: hidden;          /* запрещаем горизонтальный скролл */
}

#registerButton {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 100px;
    height: 20px;
    font-size: 12px;
    cursor: pointer;
}

/*логотип меню*/
.nav {
    background: #e0dfff;
    box-shadow: 0 5px 10px rgb(23, 23, 23, .2);
    height: 65px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    font-size: 20px;
    border: 1px solid rgba(23, 23, 23, 0.16);
    border-radius: 0 0 .75rem .75rem;
    position: relative; /* создаём позиционируемый слой для account-panel */
    /*z-index: 50; /* вся шапка выше dropdown__menu и dropdown__task */
}

/*логотип посередине*/
.nav__center__logo {
    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    background: transparent; /* у контейнера логотипа прозрачный фон */
}

.nav__center__logo img {
    display: block; /* убираем строчное поведение картинки */
    background: transparent; /* у самой картинки прозрачный фон */
}

.nav__center__logo img {
    display: block; /* убираем строчное поведение картинки */
    background: transparent; /* у самой картинки прозрачный фон */
}

/*разрыв между верхней строкой и нижней областью*/
.between_nav {
    height: 5px;
}

/*логотип меню*/
.nav__logo {
    text-decoration: none;
    color: #171717;
    font-weight: bold;
}

/* фикс-ширина на крупных экранах */
@media (min-width: 1280px) {
    .dropdown__menu { width: 320px; }
}

/*нижняя полоска, где подпись о правах*/
.nav_down {
    background-color: #e0dfff;
    box-shadow: 0 5px 10px rgb(23, 23, 23, .2);
    height: 15px;
    border: 1px solid rgba(23, 23, 23, 0.16);
    border-radius: .75rem .75rem 0 0;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}
/*подпись о правах*/
.nav__myRight {
    font-size: 10px;
    text-align: center;
}

/* //новый: дополнительная панель основного меню */
/*.main-navigation { !* //новый: внешний контейнер навигационной панели *!*/
/*    box-sizing: border-box; !* //новый: учитываем рамку внутри размеров панели *!*/
/*    width: calc(100% - 4px); !* //изменено: панель изменяет ширину вместе с окном *!*/
/*    height: 55px; !* //новый: фиксированная высота панели *!*/
/*    display: flex; !* //новый: включаем flex-размещение содержимого *!*/
/*    align-items: center; !* //новый: центрируем кнопки по высоте *!*/
/*    justify-content: center; !* //новый: центрируем контейнер кнопок *!*/
/*    margin: 5px 2px 0; !* //изменено: сохраняем отступ и видимый контур панели *!*/
/*    padding: 0 clamp(6px, 1.3vw, 22px); !* //изменено: внутренние отступы уменьшаются вместе с окном *!*/
/*    background: #e0dfff; !* //изменено: сохраняем установленный цвет панели *!*/
/*    border: 1px solid rgba(23, 23, 23, 0.16); !* //изменено: сохраняем нейтральный контур *!*/
/*    border-radius: .75rem; !* //изменено: скругляем все четыре угла *!*/
/*    box-shadow: 0 5px 10px rgb(23 23 23 / 20%); !* //изменено: сохраняем тень как у .nav *!*/
/*    position: relative; !* //новый: создаём собственный позиционируемый слой *!*/
/*    !*z-index: 51; !* //новый: сохраняем текущий уровень панели *!*/
/*    overflow: hidden; !* //изменено: исключаем появление горизонтальной прокрутки *!*/
/*}*/
/* //новый: дополнительная панель основного меню */
.main-navigation { /* //новый: внешний контейнер навигационной панели */
    box-sizing: border-box; /* //новый: учитываем рамку внутри размеров панели */
    width: calc(100% - 4px); /* //изменено: панель изменяет ширину вместе с окном */
    height: 55px; /* //новый: фиксированная высота панели */
    display: flex; /* //новый: включаем flex-размещение содержимого */
    align-items: center; /* //новый: центрируем контейнер по высоте */
    justify-content: center; /* //новый: центрируем контейнер кнопок */
    margin: 5px 2px 0; /* //изменено: сохраняем отступ и видимый контур панели */
    padding: 0 clamp(6px, 1.3vw, 22px); /* //изменено: внутренние отступы уменьшаются вместе с окном */
    background: #e0dfff; /* //изменено: сохраняем установленный цвет панели */
    border: 1px solid rgba(23, 23, 23, 0.16); /* //изменено: сохраняем нейтральный контур */
    border-radius: .75rem; /* //изменено: скругляем все четыре угла */
    box-shadow: 0 5px 10px rgb(23 23 23 / 20%); /* //изменено: сохраняем тень как у .nav */
    position: relative; /* //новый: создаём собственный позиционируемый слой */
    /*z-index: 51; /* //изменено: размещаем панель и окно выбора над основной областью */
    overflow: visible; /* //изменено: разрешаем отображение окна выбора за пределами панели */
}

/* //новый: контейнер симметрично расположенных кнопок */
.main-navigation__buttons { /* //новый: внутренняя область кнопок меню */
    box-sizing: border-box; /* //новый: учитываем размеры элементов внутри контейнера */
    width: min(1400px, 100%); /* //изменено: контейнер занимает доступную ширину и ограничивается на больших экранах */
    height: 100%; /* //новый: занимаем всю высоту панели */
    display: grid; /* //изменено: используем сетку для одинаковой ширины кнопок */
    grid-template-columns: repeat(6, minmax(0, 1fr)); /* //новый: делим доступную ширину на шесть равных частей */
    align-items: center; /* //новый: центрируем кнопки по вертикали */
    gap: clamp(4px, 1vw, 18px); /* //изменено: расстояние между кнопками уменьшается вместе с окном */
    margin: 0 auto; /* //новый: центрируем контейнер кнопок */
}

/* //новый: кнопки основного меню в цветах логотипа */
.main-navigation__button { /* //новый: базовое оформление навигационной кнопки */
    box-sizing: border-box; /* //новый: учитываем рамку и отступы внутри ширины */
    width: 100%; /* //изменено: кнопка занимает всю ширину своей колонки */
    min-width: 0; /* //изменено: разрешаем кнопке уменьшаться вместе с колонкой */
    height: 34px; /* //изменено: сохраняем одинаковую высоту кнопок */
    padding: 0 clamp(3px, .6vw, 10px); /* //изменено: внутренние отступы адаптируются к ширине окна */
    display: flex; /* //новый: включаем центрирование содержимого кнопки */
    align-items: center; /* //новый: центрируем текст по вертикали */
    justify-content: center; /* //новый: центрируем текст по горизонтали */
    border: 1px solid rgba(23, 58, 94, 0.34); /* //новый: синяя рамка в стиле логотипа */
    border-radius: 9px; /* //новый: добавляем скругление кнопки */
    background: linear-gradient(180deg, #ffffff 0%, #f5f8fb 100%); /* //новый: светлый объёмный фон */
    color: #173a5e; /* //новый: используем тёмно-синий цвет логотипа */
    font-size: clamp(7px, .72vw, 11px); /* //изменено: размер текста уменьшается вместе с шириной окна */
    font-weight: 600; /* //новый: повышаем читаемость подписей */
    line-height: 1.15; /* //новый: сохраняем компактную высоту текста */
    text-align: center; /* //новый: центрируем текст */
    white-space: nowrap; /* //новый: сохраняем подписи кнопок в одну строку */
    overflow: hidden; /* //новый: не позволяем тексту выходить за границы кнопки */
    text-overflow: ellipsis; /* //новый: сокращаем слишком длинный текст на очень узком экране */
    cursor: pointer; /* //новый: показываем интерактивность кнопки */
    box-shadow: 0 3px 9px rgba(23, 58, 94, 0.12); /* //новый: добавляем мягкую тень */
    transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; /* //изменено: сохраняем плавную анимацию */
}

/* //новый: состояние кнопки при наведении */
.main-navigation__button:hover { /* //новый: оформление наведения только для кнопок меню */
    background: linear-gradient(135deg, #173a5e 0%, #24547f 72%, #d5a426 160%); /* //новый: сине-золотой фон в стиле логотипа */
    border-color: #d5a426; /* //новый: выделяем рамку золотистым цветом */
    color: #ffffff; /* //новый: обеспечиваем контраст текста */
    box-shadow: 0 7px 16px rgba(23, 58, 94, 0.24); /* //новый: усиливаем тень при наведении */
    transform: translateY(-1px); /* //новый: слегка приподнимаем кнопку */
} /* //новый: состояние наведения завершено */

/* //новый: состояние кнопки во время нажатия */
.main-navigation__button:active { /* //новый: оформление нажатой кнопки меню */
    background: #d5a426; /* //новый: используем золотистый цвет логотипа */
    border-color: #b98613; /* //новый: затемняем рамку при нажатии */
    color: #173a5e; /* //новый: возвращаем тёмно-синий текст */
    box-shadow: 0 3px 8px rgba(23, 58, 94, 0.18); /* //новый: уменьшаем тень нажатой кнопки */
    transform: translateY(0); /* //новый: возвращаем кнопку на исходную позицию */
} /* //новый: состояние нажатия завершено */

/* //новый: доступное выделение кнопки с клавиатуры */
.main-navigation__button:focus-visible { /* //новый: отдельный контур навигационной кнопки */
    outline: 3px solid rgba(213, 164, 38, 0.42); /* //новый: золотистое выделение фокуса */
    outline-offset: 2px; /* //новый: отделяем контур от рамки кнопки */
} /* //новый: состояние клавиатурного фокуса завершено */


/*Далее для кнопки Тарифы*/
/* //новый: окно выбора программы для просмотра тарифов */
.tariffs-program-modal { /* //новый: внешний контейнер окна выбора */
    box-sizing: border-box; /* //новый: учитываем рамку внутри размеров окна */
    position: fixed; /* //новый: позиционируем окно относительно браузера */
    width: clamp(190px, 15vw, 250px); /* //новый: масштабируем ширину окна */
    display: flex; /* //новый: располагаем кнопки внутри окна */
    flex-direction: column; /* //новый: размещаем кнопки друг под другом */
    gap: 8px; /* //новый: задаём расстояние между кнопками */
    padding: 10px; /* //новый: добавляем внутренние отступы */
    background: #e0dfff; /* //новый: используем цвет основных панелей */
    border: 1px solid rgba(23, 58, 94, 0.34); /* //новый: добавляем синий контур */
    border-radius: 10px; /* //новый: скругляем углы окна */
    box-shadow: 0 10px 24px rgba(23, 23, 23, 0.24); /* //новый: добавляем выраженную тень */
    z-index: 1000; /* //новый: располагаем окно выше основной панели */
}

/* //новый: скрытое состояние окна выбора */
.tariffs-program-modal[hidden] { /* //новый: правило для скрытого окна */
    display: none; /* //новый: полностью скрываем окно */
}

/* //новый: кнопки выбора программы */
.tariffs-program-modal__button { /* //новый: оформление кнопки программы */
    box-sizing: border-box; /* //новый: учитываем рамку внутри размеров кнопки */
    width: 100%; /* //новый: растягиваем кнопку на ширину окна */
    min-height: 38px; /* //новый: задаём удобную высоту кнопки */
    padding: 6px 10px; /* //новый: добавляем внутренние отступы */
    border: 1px solid rgba(23, 58, 94, 0.34); /* //новый: добавляем контур в стиле логотипа */
    background: linear-gradient(180deg, #ffffff 0%, #f5f8fb 100%); /* //новый: создаём светлый фон кнопки */
    color: #173a5e; /* //новый: используем синий текст */
    font-size: 12px; /* //новый: задаём размер текста */
    font-weight: 600; /* //новый: выделяем подпись кнопки */
    cursor: pointer; /* //новый: показываем интерактивность */
}

/* //новый: наведение на кнопку выбора программы */
.tariffs-program-modal__button:hover { /* //новый: оформление кнопки при наведении */
    background: linear-gradient(135deg, #173a5e 0%, #24547f 72%, #d5a426 160%); /* //новый: применяем фирменный градиент */
    border-color: #d5a426; /* //новый: выделяем рамку золотым цветом */
    color: #ffffff; /* //новый: делаем текст белым */
}

/*для таблицы тарифов*/
/* //новый: содержимое тарифов внутри основной панели */
#tariffs-modal { /* //новый: внешний контейнер информации о тарифах */
    box-sizing: border-box; /* //новый: учитываем внутренние размеры */
    width: 100%; /* //новый: занимаем всю доступную ширину */
    min-height: 0; /* //изменено: не заставляем блок искусственно занимать высоту больше содержимого */
}

/* //новый: карточка тарифов */
.tariffs-modal-content { /* //новый: контейнер таблицы тарифов */
    box-sizing: border-box; /* //новый: учитываем отступы в размерах карточки */
    position: relative; /* //новый: создаём основу для кнопки закрытия */
    width: min(1200px, 100%); /* //новый: ограничиваем ширину таблицы */
    max-height: 100%; /* //новый: ограничиваем карточку высотой основной панели */
    margin: 0 auto; /* //новый: центрируем таблицу */
    padding: clamp(10px, 1.2vh, 16px); /* //изменено: уменьшаем вертикальные отступы карточки */
    background: #ffffff; /* //новый: устанавливаем белый фон */
    border: 1px solid rgba(23, 58, 94, 0.2); /* //новый: добавляем мягкий контур */
    border-radius: 12px; /* //новый: скругляем углы карточки */
    box-shadow: 0 8px 20px rgba(23, 23, 23, 0.14); /* //новый: добавляем тень */
}

/* //новый: заголовок тарифов */
.tariffs-title { /* //новый: оформление заголовка */
    margin: 0 45px clamp(8px, 1.2vh, 14px); /* //изменено: уменьшаем расстояние между заголовком и таблицей */
    color: #173a5e; /* //новый: используем фирменный синий цвет */
    font-size: clamp(17px, 2.4vh, 26px); /* //изменено: размер заголовка учитывает высоту окна */
    line-height: 1.15; /* //новый: уменьшаем высоту строки заголовка */
    text-align: center; /* //новый: центрируем заголовок */
}

/* //новый: кнопка закрытия содержимого тарифов */
.tariffs-modal-content .registration-modal-close { /* //новый: оформление кнопки закрытия */
    position: absolute; /* //новый: размещаем кнопку в углу карточки */
    top: 10px; /* //новый: задаём отступ сверху */
    right: 10px; /* //новый: задаём отступ справа */
    width: 34px; /* //новый: задаём ширину кнопки */
    height: 34px; /* //новый: задаём высоту кнопки */
    display: flex; /* //новый: включаем центрирование символа */
    align-items: center; /* //новый: центрируем символ по вертикали */
    justify-content: center; /* //новый: центрируем символ по горизонтали */
    border: 1px solid rgba(23, 58, 94, 0.3); /* //новый: добавляем контур */
    background: #ffffff; /* //новый: задаём белый фон */
    color: #173a5e; /* //новый: используем синий цвет символа */
    font-size: 24px; /* //новый: задаём размер символа */
    line-height: 1; /* //новый: убираем лишнюю высоту строки */
    cursor: pointer; /* //новый: показываем интерактивность */
}

/* //новый: область прокрутки таблицы */
.tariffs-table-wrap { /* //новый: контейнер таблицы */
    width: 100%; /* //новый: занимаем всю ширину карточки */
    max-height: calc(100% - 44px); /* //новый: оставляем место для заголовка и ограничиваем таблицу высотой карточки */
    overflow-x: auto; /* //новый: разрешаем горизонтальную прокрутку на узком экране */
    overflow-y: auto; /* //новый: сохраняем вертикальную прокрутку при недостаточной высоте */
}

/* //новый: таблица тарифов */
.tariffs-table { /* //новый: оформление таблицы */
    width: 100%; /* //новый: занимаем доступную ширину */
    min-width: 760px; /* //новый: сохраняем читаемость столбцов */
    border-collapse: collapse; /* //новый: объединяем соседние рамки */
    color: #173a5e; /* //новый: используем фирменный цвет текста */
    background: #ffffff; /* //новый: устанавливаем белый фон */
    font-size: clamp(11px, 1.65vh, 15px); /* //новый: масштабируем текст таблицы относительно высоты окна */
}

/* //новый: ячейки таблицы тарифов */
.tariffs-table th,
.tariffs-table td { /* //новый: общие стили ячеек */
    padding: clamp(6px, 1.05vh, 12px); /* //изменено: уменьшаем вертикальные отступы ячеек */
    border: 1px solid rgba(23, 58, 94, 0.22); /* //новый: добавляем границы таблицы */
    vertical-align: top; /* //новый: выравниваем содержимое по верхнему краю */
    text-align: center; /* //новый: центрируем содержимое ячеек */
    line-height: 1.25; /* //изменено: уменьшаем межстрочное расстояние */
}

/* //новый: заголовки столбцов */
.tariffs-table th { /* //новый: оформление заголовков таблицы */
    background: #e0dfff; /* //новый: используем цвет основных панелей */
    font-weight: 700; /* //новый: выделяем названия тарифов */
}

/* //новый: первый столбец таблицы */
.tariffs-table th:first-child,
.tariffs-table td:first-child { /* //новый: оформление названий строк */
    width: 16%; /* //новый: задаём ширину первого столбца */
    background: #f5f5ff; /* //новый: визуально отделяем названия строк */
}

/* //новый: сообщение о разработке программы */
.tariffs-development-message { /* //новый: контейнер информационного сообщения */
    box-sizing: border-box; /* //новый: учитываем внутренние отступы */
    width: min(700px, 100%); /* //новый: ограничиваем ширину сообщения */
    margin: 0 auto; /* //новый: центрируем сообщение */
    padding: clamp(24px, 5vw, 60px); /* //новый: добавляем адаптивные отступы */
    background: #ffffff; /* //новый: устанавливаем белый фон */
    border: 1px solid rgba(23, 58, 94, 0.2); /* //новый: добавляем мягкий контур */
    border-radius: 12px; /* //новый: скругляем углы */
    box-shadow: 0 8px 20px rgba(23, 23, 23, 0.14); /* //новый: добавляем тень */
    color: #173a5e; /* //новый: используем фирменный цвет */
    font-size: clamp(15px, 1.5vw, 20px); /* //новый: масштабируем текст */
    text-align: center; /* //новый: центрируем сообщение */
}

/* //новый: компактное отображение тарифов при небольшой высоте окна */
@media (max-height: 850px) { /* //новый: уменьшаем элементы таблицы при недостаточной высоте */
    .main-content-panel__inner { /* //новый: внутренняя область основного содержимого */
        padding-top: 8px; /* //изменено: уменьшаем верхний отступ основной области */
        padding-bottom: 8px; /* //изменено: уменьшаем нижний отступ основной области */
    }

    .tariffs-modal-content { /* //новый: компактная карточка тарифов */
        padding: 8px 12px; /* //изменено: уменьшаем внутренние отступы карточки */
    }

    .tariffs-title { /* //новый: компактный заголовок тарифов */
        margin-bottom: 7px; /* //изменено: уменьшаем отступ после заголовка */
        font-size: 18px; /* //изменено: уменьшаем заголовок при небольшой высоте */
    }

    .tariffs-table { /* //новый: компактный текст таблицы */
        font-size: 11px; /* //изменено: уменьшаем текст таблицы */
    }

    .tariffs-table th,
    .tariffs-table td { /* //новый: компактные ячейки таблицы */
        padding: 5px 7px; /* //изменено: уменьшаем внутренние отступы ячеек */
        line-height: 1.18; /* //изменено: уменьшаем межстрочное расстояние */
    }

    .tariffs-modal-content .registration-modal-close { /* //новый: компактная кнопка закрытия */
        top: 6px; /* //изменено: уменьшаем отступ сверху */
        right: 6px; /* //изменено: уменьшаем отступ справа */
        width: 30px; /* //изменено: уменьшаем ширину кнопки */
        height: 30px; /* //изменено: уменьшаем высоту кнопки */
        font-size: 20px; /* //изменено: уменьшаем символ закрытия */
    }
}


/* Далее основная панель */
/* //новый: панель основного содержимого */
.main-content-panel { /* //новый: внешний контейнер основного содержимого */
    box-sizing: border-box; /* //новый: учитываем рамку внутри размеров панели */
    position: absolute; /* //новый: размещаем панель в свободной области страницы */
    top: 130px; /* //новый: располагаем панель ниже верхней шапки и основного меню */
    right: 2px; /* //новый: сохраняем боковой отступ как у панели меню */
    bottom: 20px; /* //новый: оставляем расстояние до нижней панели */
    left: 2px; /* //новый: сохраняем боковой отступ как у панели меню */
    display: flex; /* //новый: создаём растягиваемую внутреннюю область */
    flex-direction: column; /* //новый: располагаем будущее содержимое сверху вниз */
    min-height: 0; /* //новый: разрешаем корректное уменьшение панели по высоте */
    background: #e0dfff; /* //изменено: сохраняем установленный цвет панели */
    border: 1px solid rgba(23, 23, 23, 0.16); /* //изменено: сохраняем нейтральный контур */
    border-radius: .75rem; /* //новый: скругляем все четыре угла панели */
    box-shadow: 0 5px 10px rgb(23 23 23 / 20%); /* //новый: добавляем тень в стиле остальных панелей */
    overflow: hidden; /* //новый: скрываем содержимое за скруглёнными границами */
    /*z-index: 1; /* //новый: располагаем содержимое ниже навигационных панелей */
}

/* //новый: внутренняя область основного содержимого */
.main-content-panel__inner { /* //новый: контейнер для содержимого выбранного раздела */
    box-sizing: border-box; /* //новый: учитываем внутренние отступы в размерах области */
    width: 100%; /* //новый: занимаем всю ширину внешней панели */
    height: 100%; /* //новый: занимаем всю высоту внешней панели */
    min-height: 0; /* //новый: разрешаем внутренней области корректно уменьшаться */
    padding: clamp(12px, 1.5vw, 24px); /* //новый: масштабируем внутренние отступы вместе с окном */
    overflow-x: hidden; /* //новый: запрещаем горизонтальный выход содержимого */
    overflow-y: auto; /* //новый: включаем прокрутку при превышении доступной высоты */
}

/* //новый: адаптация меню для узких окон */
@media (max-width: 900px) { /* //изменено: корректируем размеры элементов на узких экранах */
    .main-navigation { /* //новый: адаптация внешней панели */
        padding: 0 4px; /* //изменено: уменьшаем боковые отступы панели */
    }

    .main-navigation__buttons { /* //новый: адаптация контейнера кнопок */
        gap: 4px; /* //изменено: уменьшаем расстояние между кнопками */
    }

    .main-navigation__button { /* //новый: адаптация кнопок */
        height: 34px; /* //изменено: сохраняем высоту кнопок */
        padding: 0 2px; /* //изменено: уменьшаем внутренние отступы */
        font-size: clamp(6px, 1.25vw, 10px); /* //изменено: масштабируем подписи относительно ширины окна */
        border-radius: 8px; /* //изменено: немного уменьшаем скругление на узком экране */
    }

    .main-content-panel { /* //новый: адаптация основной панели для узких окон */
        top: 130px; /* //новый: сохраняем положение ниже двух верхних панелей */
        right: 2px; /* //новый: сохраняем минимальный правый отступ */
        bottom: 20px; /* //новый: сохраняем расстояние до нижней панели */
        left: 2px; /* //новый: сохраняем минимальный левый отступ */
        border-radius: 10px; /* //новый: немного уменьшаем скругление на узком экране */
    }

    .main-content-panel__inner { /* //новый: адаптация внутренней области содержимого */
        padding: 10px; /* //новый: уменьшаем внутренние отступы на узком экране */
    }
}



/*современный стиль*/

/* --- ГЛОБАЛЬНЫЕ ПЕРЕМЕННЫЕ ДИЗАЙНА --- */
:root { /* переменные для единого modern-стиля*/
    /*--bg-url: url("/logo/background.png");*/
    --glass-bg: rgba(255, 255, 255, 0.78); /* стеклянный белый*/
    --glass-border: rgba(255, 255, 255, 0.55); /* мягкая рамка*/
    --glass-shadow: 0 10px 30px rgba(0,0,0,0.12); /* современная тень*/
    --radius-xl: 16px; /* единый радиус*/
    --radius-lg: 14px; /* единый радиус*/
}

/* --- ЕДИНЫЙ ФОН ВСЕХ СТРАНИЦ --- */
html, body { /* единый фон на уровне всей страницы*/
    background-image: var(--bg-url); /* единый фон*/
    background-size: cover; /* покрываем весь экран*/
    background-position: center; /* центр*/
    background-repeat: no-repeat; /* без тайлинга*/
    background-attachment: fixed; /* “дорого” выглядит при скролле*/
}

/* --- GLASS-КАРТОЧКИ ДЛЯ ШАПОК/ПАНЕЛЕЙ --- */
.nav {
    /*background-color: var(--glass-bg); /* стекло*/
    /*border: 1px solid var(--glass-border); /* мягкая граница*/
    box-shadow: var(--glass-shadow); /* современная тень*/
    backdrop-filter: blur(10px); /* glass*/
    -webkit-backdrop-filter: blur(10px); /* safari*/
    border-radius: 0 0 var(--radius-xl) var(--radius-xl); /* чуть более современно*/
    position: relative; /* сохраняем позиционирование и после переопределения */
    /*z-index: 50; /* шапка и account-panel выше остальных панелей */
}

/* --- НИЖНЯЯ ПОЛОСА --- */
.nav_down {
    /*background-color: var(--glass-bg);*/
    /*border: 1px solid var(--glass-border);*/
    box-shadow: 0 -10px 30px rgba(0,0,0,0.10); /* тень вверх*/
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* --- СОВРЕМЕННОЕ ПОВЕДЕНИЕ КНОПОК (ЦВЕТ НЕ МЕНЯЕМ) --- */
button,
input[type="button"],
input[type="submit"] { /* базовая “современность” для всех кнопок*/
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.10);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

button:hover,
input[type="button"]:hover,
input[type="submit"]:hover { /* hover-подъём*/
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.14);
}

button:active,
input[type="button"]:active,
input[type="submit"]:active { /* нажатие*/
    transform: translateY(0px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.10);
}

button:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible { /* аккуратный focus ring*/
    outline: 3px solid rgba(64,224,208,0.45); /* под ваш основной оттенок*/
    outline-offset: 2px;
}

/* --- ФОН ОВЕРЛЕЯ ЛОГИН-МОДАЛКИ --- */
#login-modal { /* добавили blur/мягкость*/
    background-color: rgba(0,0,0,0.28);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* --- САМ БЛОК МОДАЛКИ --- */
#login-modal .modal-content { /* чтобы не ломать остальные .modal-content на других страницах*/
    background-image: linear-gradient(rgba(255,255,255,0.78), rgba(255,255,255,0.78)), var(--bg-url);
    background-size: cover;
    background-position: center;
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-xl);
}

/* --- КНОПКИ В ЛОГИН-МОДАЛКЕ (цвет не меняем) --- */
#login-modal .modal-content button {
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.10);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

#login-modal .modal-content button:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.14);
}

#login-modal .modal-content button:focus-visible {
    outline: 3px solid rgba(64,224,208,0.45);
    outline-offset: 2px;
}