@charset "UTF-8";
@import url(bootstrap.min.css);
@import url(font-awesome.min.css);
@import url(toastr.min.css);
@import url(aos.css);
@import url(app.css);
@import url(highlight.min.css);

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

@font-face {
    font-family: 'Moderustic';
    src: url('fonts/Moderustic-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Moderustic';
    src: url('fonts/Moderustic-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Moderustic';
    src: url('fonts/Moderustic-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Moderustic';
    src: url('fonts/Moderustic-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Moderustic';
    src: url('fonts/Moderustic-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Moderustic';
    src: url('fonts/Moderustic-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Moderustic';
    src: url('fonts/Moderustic-VariableFont_wght.ttf') format('truetype');
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --bg-color: #141526;
    --ip-bg-color: #121320;
    --text-color: #535968;
    --text-color-a: #7c859b;
    --text-color-a-hover: #b3e9ff;
    --scrollbar-color: #2b2e54;
    --bg-color-w: #d5d5d8;
    --bg-color-f: #ffffff;
    --bg-color-newlink: #1cbfff;
    --color1: rgba(28, 191, 255, 0.4);
    --color2: rgba(172, 129, 185, 0.4);
    --color3: #4c38ff7c;
    --color4: #8c00ff8c;
}

html, body {
    height: 100%;
    margin: 0;
    font-size: 15px;
}

body {
    background: 
        repeating-linear-gradient(45deg, #181a2d, #181a2d 10px, var(--bg-color) 10px, var(--bg-color) 20px) 0 0 / 100% 1rem no-repeat,
        var(--bg-color); /* Фоновый градиент и основной цвет */
    color: var(--text-color);
    font-family: Verdana, Geneva, Arial, sans-serif;
    text-rendering: optimizeLegibility; /* Улучшает читабельность */
    -webkit-font-smoothing: antialiased; /* Сглаживание для Chrome, Safari */
    -moz-osx-font-smoothing: grayscale; /* Сглаживание для macOS */
    overflow-x: hidden;
    display: flex;
    flex-direction: column; /* Страница строится по вертикали */
    border-top: 3px solid var(--scrollbar-color);
}

strong {
    font-weight: bold !important;
    color: var(--bg-color-w) !important;
}

.text-muted {
    color: var(--text-color-a) !important;
}

body::-webkit-scrollbar {
    width: 12px;
}

body::-webkit-scrollbar-track {
    background: var(--bg-color);
}

body::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-color);
    border: 4px solid var(--bg-color);
}

.offcanvas-body::-webkit-scrollbar {
    width: 12px;
}

.offcanvas-body::-webkit-scrollbar-track {
    background: var(--bg-color);
}

.offcanvas-body::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-color);
    border: 4px solid var(--bg-color);
}


#progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background-color: var(--bg-color-newlink);
    width: 0%;
    z-index: 9999;
    transition: width 0.2s ease-in-out, opacity 0.2s ease-in-out;
    opacity: 0.8; /* Изначально полностью видимая */
}


main {
    flex: 1; /* Занимает всё свободное пространство */
    padding-bottom: 40px;
}

/* Контейнер для фонов */
.backgrounds {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Отключаем взаимодействие с фоном */
    overflow: hidden; /* Скрываем выходящие части */
    z-index: -1;
}

/* Верхний эффект - диагональная полоса */
.bg-diagonal-header {
    position: absolute;
    top: -20rem;
    left: -50rem; /* Выносим за границы */
    width: 50%;
    height: 100%;
    background: linear-gradient(
        135deg, /* Направление по диагонали */
        var(--color3) 0%, 
        transparent 70%
    );
    filter: blur(100px); /* Размытие для мягкого эффекта */
    transform: scaleX(1.5) rotate(-10deg); /* Растягиваем и поворачиваем */
}

/* Нижний эффект - диагональная полоса */
.bg-diagonal-footer {
    position: absolute;
    bottom: -20rem;
    right: -50rem; /* Выносим за границы */
    width: 50%;
    height: 50%;
    background: linear-gradient(
        225deg, /* Направление в противоположную диагональ */
        var(--color4) 0%, 
        transparent 70%
    );
    filter: blur(100px);
    transform: scaleX(1.5) rotate(10deg);
}

header .navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    top: 0.4rem;
    padding: 0 12px;
}

.navbar-toggler {
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box; /* Предотвращает изменение размеров */
}

.navbar-toggler:focus,
.navbar-toggler:active {
    outline: none; /* Убирает фокус */
    border: none; /* Убирает изменения при активации */
}


.terminal pre {
    color: rgb(143, 143, 143);
    font-size: 0.80rem;
    z-index: 2;
}

#curl {
    position: absolute;
    white-space: pre; /* Сохранение форматирования текста */
    overflow: hidden; /* Убираем прокрутку */
    border: none; /* Убираем границы */
    outline: none; /* Убираем фокусное обрамление */
    display: inline-block; /* Выводим в одной строке */
    letter-spacing: 1px;
}

.cursor {
    display: inline-block;
    font-weight: bold;
    animation: none; /* По умолчанию анимации нет */
}

@keyframes blinkCursor {
    0%, 100% {
        opacity: 1; /* Курсор видим */
    }
    50% {
        opacity: 0; /* Курсор исчезает */
    }
}

.animated-gradient {
    position: absolute; /* Используем fixed для привязки к окну */
    top: -2rem;
    left: 0;
    width: 99vw;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Скрываем только лишнее внутри контейнера */
    pointer-events: none;
    z-index: -1;
    opacity: 33%;
    animation: fadeIn 1s ease-out forwards; /* Анимация появления */
    will-change: transform;
}

.cloud {
    position: absolute;
    background: radial-gradient(circle, var(--color1), transparent 100%);
    filter: blur(40px);
    mix-blend-mode: screen;
    animation: moveCloud 10s infinite ease-in-out, changeShape 20s infinite ease-in-out;
    border-radius: 35%;
    transform-origin: center;
    transition: background 100s ease-in-out;
}

.cloud1 {
    width: 250px;
    height: 150px;
    background: radial-gradient(circle, var(--color1), transparent 100%);
    animation-duration: 12s, 20s;
    animation-name: moveCloud1, changeShape;
}

.cloud2 {
    width: 300px;
    height: 200px;
    background: radial-gradient(circle, var(--color2), transparent 100%);
    animation-duration: 15s, 20s;
    animation-name: moveCloud2, changeShape;
}

@keyframes moveCloud1 {
    0% {
        transform: translate(-40%, -40%) scale(1.1) rotate(0deg);
    }
    25% {
        transform: translate(30%, -50%) scale(1.3) rotate(15deg);
    }
    50% {
        transform: translate(20%, 30%) scale(0.9) rotate(30deg);
    }
    75% {
        transform: translate(-30%, 40%) scale(1.2) rotate(45deg);
    }
    100% {
        transform: translate(-40%, -40%) scale(1.1) rotate(360deg);
    }
}

@keyframes moveCloud2 {
    0% {
        transform: translate(30%, 30%) scale(1) rotate(0deg);
    }
    25% {
        transform: translate(-20%, -30%) scale(1.4) rotate(-15deg);
    }
    50% {
        transform: translate(-50%, 20%) scale(0.8) rotate(-30deg);
    }
    75% {
        transform: translate(40%, -20%) scale(1.2) rotate(-45deg);
    }
    100% {
        transform: translate(30%, 30%) scale(1) rotate(-360deg);
    }
}

@keyframes changeShape {
    0% {
        border-radius: 30%;
    }
    25% {
        border-radius: 40% 60% 30% 50%;
    }
    50% {
        border-radius: 50% 30% 60% 40%;
    }
    75% {
        border-radius: 60% 50% 40% 30%;
    }
    100% {
        border-radius: 30%;
    }
}

.terminal i {
    font-size: 20px;
    color: var(--bg-color-newlink);
    position: relative;
    top: 3px;
}

a {
    color: var(--text-color-a);
    text-decoration: none;
    text-transform: lowercase;
}

a:hover {
    color: var(--text-color-a-hover);
}


.navlogo {
    display: flex;
    align-items: center; /* Центрирует элементы по вертикали */
    justify-content: flex-start; /* Элементы располагаются слева */
    gap: 0px; /* Расстояние между иконкой и логотипом */
    position: relative;
}

.navlogo .speedtest {
    position: absolute;
    top: 5px;
    left: 75%;
    display: flex;
    color: var(--bg-color-w);
    align-items: center; /* Центрирует иконку внутри ссылки */
}

.navlogo .speedtest:hover {
    color: var(--bg-color-newlink);
}


.navlogo .speedtest svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    display: inline-block;
    /* Сглаживание для рендеринга */
    shape-rendering: geometricPrecision;
    text-rendering: optimizeLegibility;
    image-rendering: auto;
}

.navlogo #logo {
    display: inline-block; /* Убедитесь, что логотип отображается корректно */
}

#logo {
    display: inline-block;
    margin-top: 0.2rem;
    font-family: 'Moderustic', sans-serif;
    font-weight: 600;
    color: #fff;
    font-size: 24px;
    display: block;
    text-transform: uppercase;
    transition: all 0.1s ease-in-out;
}

#ytWidget {
    display: none !important;
}

.ls-tips {
    position: absolute;
    top: 0%;   /* отступаем вниз относительно родительского контейнера */
    right: 0;    /* выравниваем по правому краю */
    z-index: 999; /* чтобы меню находилось выше остальных элементов */
}
    
.parallax-blur {
    transform: translateY(-10px);
    filter: blur(5px);
    opacity: 0;
}

#logo:not(.parallax-blur) {
    transform: translateY(0);
    filter: blur(0);
    opacity: 1;
}

#logo::before {
    content: "";
    position: absolute;
    top: -5px; /* Измените отступ вверх в зависимости от размеров шапки */
    left: 16px;
    width: 38px; /* Измените ширину в зависимости от размеров шапки */
    height: 28px; /* Измените высоту в зависимости от размеров шапки */
}

#logo zone {
	opacity: 0;
    margin-left: 0.2rem;
    text-transform: lowercase;
	transition: 0.5s;
    color: rgb(143, 143, 143);
    font-size: 12px;
    animation: fadeInLeft 0.3s both 0.3s;
}

#logo:hover {
    color: color-mix(in srgb, #ffffff 80%, black 20%);
    transition: color 0.3s ease-in-out;
}

#logo:hover zone {
	opacity: 1;
	transition: 0.3s;
}

/* IPMenu */
.ipmenmenu-select-wrapper {
    left: 2px;
    top: 0.5px;
    position: relative;
}

.ipmenmenu-select {
    color: var(--bg-color-w);
    font-weight: lighter;
    width: auto;
    display: inline-flex; /* Изменим на inline-flex для лучшего контроля над содержимым */
    align-items: center;  /* Выравниваем элементы по центру */
    cursor: pointer;
    position: relative;
    padding-right: 30px; /* Достаточный отступ для стрелочки */
    transition: color 0.2s ease-in-out;
}

.ipmenmenu-select:hover {
    color: var(--bg-color-newlink);
}

.ipmenmenu-link {
    text-decoration: none; /* Убираем подчеркивание ссылок */
    text-transform: none;
    color: inherit; /* Используем текущий цвет текста */
    display: block; /* Делаем ссылку блочным элементом */
    width: 100%; /* Расширяем на всю ширину */
}

.ipmenmenu-link:hover {
    text-decoration: none; /* Убираем подчеркивание при наведении */
    color: inherit; /* Цвет остаётся прежним */
}

.ipmenmenu-select::after {
    content: "\f107"; /* Юникод символ стрелочки вниз */
    position: absolute;
    right: 14px; /* Стрелочка будет находиться справа от текста */
    top: 50%;
    transform: translateY(-50%);
    color: var(--bg-color-w); /* Цвет стрелочки */
    font-family: "FontAwesome";
    font-size: 15px;
    pointer-events: none; /* Чтобы стрелочка не мешала клику на элемент */
    transition: color 0.2s ease-in-out; /* Плавная анимация для поворота стрелки */
}

.ipmenmenu-select:hover::after {
    color: var(--bg-color-newlink);
    transition: color 0.2s ease-in-out;
}

.ipmenmenu-select.open::after {
    content: "\f106"; /* Юникод символ стрелочки вверх */
}

.selected-option {
    display: flex;
    align-items: center;
}

.ipmenmenu-select .flag-icon {
    width: 18px;
    margin-right: 8px;
}

.selected-option i {
    position: relative;
    top: 0;
    transform: translateY(0.5px);
}

.ipmenmenu-options {
    margin-top: 0.3rem;
    position: absolute;
    top: calc(100% + 10px); /* Располагаем ниже основной кнопки выбора */
    left: 0;
    width: max-content;
    background-color: rgba(38, 39, 59, 0.5); /* Полупрозрачный фон */
    backdrop-filter: blur(5px); /* Размытие фона за элементом */
    overflow: visible;
    display: none;
    transition: all 0.3s ease-in-out;
    font-size: 14px;
    z-index: 10;
    white-space: nowrap;
    border-radius: 0 7px 7px 7px;
}

.ipmenmenu-options::before {
    content: "";
    position: absolute;
    top: -8px; /* Высота треугольника */
    left: 0px; /* Положение треугольника, отрегулируйте при необходимости */
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid rgba(38, 39, 59, 0.5); /* Треугольник также с полупрозрачным фоном */
    z-index: 11; /* Чтобы треугольник был поверх списка */
}

.ipmenmenu-option {
    padding: 10px;
    display: flex;
    flex-direction: column; /* Элементы располагаются вертикально */
    align-items: flex-start; /* Выравнивание по левому краю */
    cursor: pointer;
    color: white;
    transition: background-color 0.2s ease-in-out;
    border-radius: 0 7px 7px 7px;
}

/* Убираем нижнее закругление на первом элементе */
.ipmenmenu-option:first-child {
    border-radius: 0 7px 0 0;
}

/* Убираем верхнее закругление на последнем элементе */
.ipmenmenu-option:last-child {
    border-radius: 0 0 7px 7px;
}

.ipmenmenu-option:not(:first-child):not(:last-child) {
    border-radius: 0; /* Оставляем без закруглений */
}

.ipmenmenu-option:hover {
    background-color: rgba(53, 54, 80, 0.4); /* Полупрозрачный фон */
    backdrop-filter: blur(5px); /* Размытие фона за элементом */
}

.ipmenmenu-title {
    display: flex;
    align-items: center; /* Значок и текст выравниваются по вертикали */
    font-size: 0.85rem; /* Основной текст нормального размера */
    font-weight: bold;
    color: white; /* Цвет основного текста */
}

.ipmenmenu-title i {
    font-size: 18px;
    top: -1px;
    position: relative;
}

.ipmenmenu-description {
    font-size: 0.80rem; /* Меньший шрифт для описания */
    color: #d1d1d1; /* Более светлый цвет для описания */
    margin-top: 0.25rem; /* Отступ сверху для разделения */
    line-height: 1.2;
    display: block; /* Явно указываем, что это блочный элемент */
}


/* Lang flag */
.language-select-container {
    margin: 0.45rem 0 0 0;
    position: relative;
    font-size: 14px;
}

.language-select-wrapper {
    position: relative;
}

.language-select {
    color: white;
    width: auto;
    border-radius: 5px;
    display: inline-flex; /* Изменим на inline-flex для лучшего контроля над содержимым */
    align-items: center;  /* Выравниваем элементы по центру */
    cursor: pointer;
    position: relative;
    padding-right: 30px; /* Достаточный отступ для стрелочки */
    transition: color 0.3s ease-in-out;
}

.language-select::after {
    content: "\f107"; /* Юникод символ стрелочки вниз */
    position: absolute;
    right: 14px; /* Стрелочка будет находиться справа от текста */
    top: 50%;
    font-family: "FontAwesome";
    transform: translateY(-50%);
    color: var(--bg-color-w); /* Цвет стрелочки */
    font-size: 15px;
    pointer-events: none; /* Чтобы стрелочка не мешала клику на элемент */
    transition: transform 0.3s ease-in-out; /* Плавная анимация для поворота стрелки */
}

.language-select.open::after {
    content: "\f106"; /* Юникод символ стрелочки вверх */
}

.selected-option {
    display: flex;
    align-items: center;
}

.language-select .flag-icon {
    width: 18px;
    margin-right: 8px;
    position: relative;
}

.language-options {
    margin-top: 0.3rem;
    position: absolute;
    top: calc(100% + 10px); /* Располагаем ниже основной кнопки выбора */
    left: 0;
    width: max-content;
    background-color: rgba(38, 39, 59, 0.5); /* Полупрозрачный фон */
    backdrop-filter: blur(5px); /* Размытие фона за элементом */
    overflow: visible;
    display: none;
    transition: all 0.3s ease-in-out;
    font-size: 14px;
    z-index: 10;
    white-space: nowrap;
    border-radius: 0 7px 7px 7px;
}

.language-options::before {
    content: "";
    position: absolute;
    top: -8px; /* Высота треугольника */
    left: 0px; /* Положение треугольника, отрегулируйте при необходимости */
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid rgba(38, 39, 59, 0.5); /* Треугольник также с полупрозрачным фоном */
    z-index: 11; /* Чтобы треугольник был поверх списка */
}

.language-option {
    padding: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: white;
    transition: background-color 0.2s ease-in-out;
    border-radius: 0 7px 7px 7px;
}

/* Убираем нижнее закругление на первом элементе */
.language-option:first-child {
    border-radius: 0 7px 0 0;
}

/* Убираем верхнее закругление на последнем элементе */
.language-option:last-child {
    border-radius: 0 0 7px 7px;
}

.language-option:not(:first-child):not(:last-child) {
    border-radius: 0; /* Оставляем без закруглений */
}

.language-option:hover {
    background-color: rgba(53, 54, 80, 0.4); /* Полупрозрачный фон */
    backdrop-filter: blur(5px); /* Размытие фона за элементом */
}

.help {
    position: relative;
    margin-top: 4px;
    font-size: 24px;
}

.help a {
    color: var(--bg-color-w);
    font-weight: lighter;
    transition: color 0.2s ease-in-out;
}

.help a:hover {
    color: var(--bg-color-newlink);
}

.th {
    margin-top: 0.30rem;
    font-size: 18px;
}

.menuipip {
    background-color: #2b2e54;
}

.menuipip a {
    color: white;
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
}

.menuipip a:hover {
    background-color: #3c3f6e;
}

.menuipip img {
    width: 20px;
    height: 14px;
    margin-right: 10px;
}


/* tooltip */
.all-tooltip {
    position: absolute;
    background-color: rgba(53, 54, 80, 0.4); /* Полупрозрачный фон */
    backdrop-filter: blur(5px); /* Размытие фона за элементом */
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.85rem;
    text-transform: lowercase;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1000;
}

/* Добавляем треугольник под tooltip */
.cusalltom-tooltip::after {
    content: '';
    position: absolute;
    top: 100%; /* Располагаем под tooltip */
    left: 50%;
    transform: translateX(-50%);
    border-width: 10px; /* Размер треугольника */
    border-style: solid;
    border-color: rgba(53, 54, 80, 0.4) transparent transparent transparent; /* Цвет совпадает с фоном tooltip */
}

/* Показываем tooltip */
.show-tooltip {
    opacity: 1;
    visibility: visible;
}




/* horizontal-menu */

.navbar-nav {
    margin: 0;
    padding: 0;
    list-style: none; /* Убираем маркеры списка */
    display: flex; /* Возвращаем в нужный вид */
    gap: 0 30px; /* Если нужно, добавляем промежутки */
}

.navbar-nav .nav-item {
    margin: 0;
}

.navbar-nav .nav-link {
    padding: 0; /* Убираем лишние отступы */
    color: inherit; /* Наследуем цвет текста */
    text-decoration: none; /* Убираем подчеркивание */
}

.horizontal-menu {
    display: flex;
    flex-direction: row;
    list-style-type: none;
    padding: 0;
    margin: 0.1rem 0 0 0;
}

.horizontal-menu li:last-child {
    margin-right: 0; /* Убираем отступ у последнего элемента списка */
}

.horizontal-menu li > a {
    font-size: 12px;
    letter-spacing: 1px;
    color: var(--bg-color-f);
    font-weight: 400;
    position: relative;
    z-index: 1;
    text-transform: uppercase;
}

.horizontal-menu li > a::before {
    position: absolute;
    content: "";
    width: calc(100% - 1px);
    height: 1px;
    background: var(--bg-color-newlink);;
    bottom: -6px;
    left: 0;

    -webkit-transform: scale(0, 1);
    -ms-transform: scale(0, 1);
    transform: scale(0, 1);
    -webkit-transform-origin: right center;
    -ms-transform-origin: right center;
    transform-origin: right center;
    z-index: -1;

    -webkit-transition: transform 0.5s ease;
    transition: transform 0.5s ease;
}

.horizontal-menu li > a:hover::before,
.horizontal-menu li > a.active::before {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
    -webkit-transform-origin: left center;
    -ms-transform-origin: left center;
    transform-origin: left center;
}

.navbar-toggler-icon {
    color: var(--bg-color-w);
}

.search-icon {
    margin: 0.6rem 0 0 2rem;
    width: 32px;
    height: 32px;
}

.search-container {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    background: var(--bg-color-w);
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    transition: all 0.3s ease;
    /* Скрываем по умолчанию */
    opacity: 0;
    visibility: hidden;
    width: 0;
    overflow: hidden;
    z-index: 999;
}

.search-container.active {
    opacity: 1;
    visibility: visible;
    width: 100%;
}

.search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    margin-right: 10px;
}

input:-webkit-autofill {
    background-color: transparent !important; /* Убираем белый фон */
    color: inherit !important; /* Наследуем цвет текста */
    -webkit-box-shadow: 0 0 0px 1000px transparent inset !important; /* Убираем обводку */
}

.close-search {
    background: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

/* Отменяем стандартные стили Bootstrap */
.custom-toggler {
    all: unset; /* Убираем все базовые стили */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    cursor: pointer;
    margin: 0.30rem 0 0 0;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.custom-toggler-icon {
    display: inline-block;
    width: 24px;
    height: 2px;
    background-color: var(--bg-color-w); /* Белый цвет полосок */
    position: relative;
    transition: all 0.3s ease-in-out;
}

.custom-toggler-icon::before,
.custom-toggler-icon::after {
    content: '';
    width: 24px;
    height: 2px;
    background-color: var(--bg-color-w); /* Белый цвет полосок */
    position: absolute;
    left: 0;
    transition: all 0.3s ease-in-out;
}

.custom-toggler-icon::before {
    top: -7px; /* Расстояние между верхней полоской и основной */
}

.custom-toggler-icon::after {
    top: 7px; /* Расстояние между нижней полоской и основной */
}

/* Анимация при открытии */
.navbar-toggler[aria-expanded="true"] .custom-toggler-icon {
    background-color: transparent; /* Прячем среднюю полоску */
}

.navbar-toggler[aria-expanded="true"] .custom-toggler-icon::before {
    transform: rotate(45deg);
    top: 0;
}

.navbar-toggler[aria-expanded="true"] .custom-toggler-icon::after {
    transform: rotate(-45deg);
    top: 0;
}

/* IP Blok */
.ip-info-container {
    margin: 0 auto; /* Центрирует блок по горизонтали */
    position: absolute; /* Для выравнивания по вертикали */
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%); /* Центрирует блок по вертикали и горизонтали */
}

.ip-info-header {
    background-color: #fcf5c6;
    -webkit-clip-path: polygon(0 0, 100% 13%, 100% 84%, 3% 100%);
    clip-path: polygon(0 0, 100% 13%, 100% 84%, 3% 100%);
    font-weight: 700;
    font-size: 12px;
    padding: 5px 10px;
    font-family: 'Moderustic', sans-serif;
    margin-top: -25px;
    letter-spacing: 0.5px;
    margin-left: 0;
    color: #141526;
    text-rendering: geometricPrecision;
    text-transform: uppercase;
    display: inline-block; /* Адаптируем ширину к содержимому */
    white-space: nowrap; /* Предотвращаем перенос текста */
    text-rendering: optimizeLegibility; /* Улучшает читабельность */
    -webkit-font-smoothing: antialiased; /* Сглаживание для Chrome, Safari */
    -moz-osx-font-smoothing: grayscale; /* Сглаживание для macOS */
}

.ip-info {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(24px, 8vw, 45px);
    font-weight: bold;
    gap: 10px;
}

.hostname {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    font-size: 18px;
    color: var(--text-color-a-hover);
    margin-bottom: 1.5rem;
}

.ip-address {
    color: #fff;
    font-size: inherit;
}

.ip-address a {
    color: #fff;
}

.copy-btn {
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease-in-out;
    font-size: clamp(14px, 2vw, 18px);
    left: 100%;
    margin-top: -14px;
    position: absolute;
    color: #fcf5c6;
}

.copy-btn:hover {
    color: var(--bg-color-newlink);
}

.ip-details {
    text-align: center;
    margin-top: 15px;
    font-size: 14px;
}

.provider {
    font-family: 'Moderustic', sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: var(--bg-color-w);
    letter-spacing: 1px;
}

.provider i {
    font-size: 20px;
    position: relative;
    top: 1px;
    right: 1px;
}

.provider a {
    font-family: 'Moderustic', sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: var(--bg-color-w);
    text-transform: none;
    transition: color 0.2s ease-in-out;
}

.provider a:hover {
    color: var(--bg-color-newlink);
}

.provider .tasix {
    background: linear-gradient(to bottom right, #4a8a43, #2f5a2f);
    clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 10% 100%);
    -webkit-clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 10% 100%);
    font-family: 'Moderustic', sans-serif;
    font-weight: 700;
    font-size: 10px;
    padding: 2px 6px;
    margin-top: -0.2rem;
    letter-spacing: 0;
    margin-left: 5px;
    border-radius: 5px;
    
    position: absolute;
    display: inline-block; /* Адаптируем ширину к содержимому */
    white-space: nowrap; /* Предотвращаем перенос текста */
}

.provider .uzix {
    background: linear-gradient(to bottom right, #68438a, #4e2f5a);
    clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 10% 100%);
    -webkit-clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 10% 100%);
    font-family: 'Moderustic', sans-serif;
    font-weight: 700;
    font-size: 10px;
    padding: 2px 6px;
    margin-top: -0.2rem;
    letter-spacing: 0;
    margin-left: 50px;
    border-radius: 5px;
    
    position: absolute;
    display: inline-block; /* Адаптируем ширину к содержимому */
    white-space: nowrap; /* Предотвращаем перенос текста */
}

.location {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin-top: 0.3rem;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: lighter;
    color: var(--bg-color-w);
    letter-spacing: 0.5px;
    gap: 5px;
}

.location img {
    position: relative;
    top: 1px;
    right: 3px;
}

.flag-icon {
    width: 22px;
}




/* breadcrumb */

.breadcrumb-container {
    display: flex;
    justify-content: start;
    align-items: center;
    font-size: 14px;
    margin: 20px 0;
}

.breadcrumb {
    list-style: none;
    display: flex;
    gap: 5px;
    padding: 0;
    margin: 0;
}

.breadcrumb-item {
    display: inline;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    color: var(--text-color-a); /* Задаём цвет для чёточки */
    font-size: 14px; /* Размер чёточки */
}

.breadcrumb-item a {
    text-decoration: none;
    text-transform: none;
    transition: color 0.3s;
    color: var(--bg-color-w);
}

.breadcrumb-item a:hover {
    color: var(--bg-color-newlink);
}

.breadcrumb-item.active {
    color: var(--text-color-a);
    pointer-events: none;
    text-decoration: none;
}









/* IP Set */
.ip-set-container {
    margin: 0 auto; /* Центрирует блок по горизонтали */
    position: absolute; /* Для выравнивания по вертикали */
    top: 85%;
    left: 50%;
    transform: translate(-50%, -50%); /* Центрирует блок по вертикали и горизонтали */
}

.ip-set-container p {
    font-size: 12px;
    text-transform: lowercase;
    color: var(--bg-color-w);
}

[data-aos="fade-up"] {
    transform: translateY(30px); /* Уменьши смещение */
    margin: 0;
    left: 42%;
}


.keyboard-button {
    display: inline-block;
    padding: 2px 7px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px !important;
    font-weight: bold;
    color: var(--bg-color-w) !important;
    background-color: var(--bg-color);
    border: 1px solid var(--bg-color-newlink);
    border-radius: 3px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    text-align: center;
    text-transform: uppercase;
    margin: 0 2px;
    user-select: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.keyboard-button.download {
    padding: 4px 14px;
    font-size: 12px !important;;
}

.keyboard-button:hover {
    background-color: var(--bg-color-newlink);
    color: var(--bg-color) !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.keyboard-button.hover {
    background-color: var(--bg-color-newlink);
    color: var(--bg-color) !important;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.keyboard-button-green {
    display: inline-block;
    padding: 2px 7px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: var(--bg-color-w);
    background-color: var(--bg-color);
    border: 1px solid #72cf4d;
    border-radius: 3px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    text-align: center;
    text-transform: uppercase;
    margin: 0 2px;
    user-select: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.keyboard-button-green:hover {
    background-color: #72cf4d;
    color: var(--bg-color);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.keyboard-button-green.hover {
    background-color: #72cf4d;
    color: var(--bg-color);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.keyboard-button-green.download {
    padding: 4px 14px;
    font-size: 12px;
}

/* Базовый вид чекбокса */
.form-check-input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    width: 16px;
    height: 16px;
    border: 2px solid #2b2e54;
    border-radius: 3px;
    background-color: #181a2d;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

/* Галочка (checked) */
.form-check-input[type="checkbox"]::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 4px;
    width: 4px;
    height: 8px;
    border-right: 2px solid var(--text-color-a-hover);
    border-bottom: 2px solid var(--text-color-a-hover);
    transform: rotate(45deg) scale(0);
    transition: transform 0.2s ease-in-out;
}

/* При выборе */
.form-check-input[type="checkbox"]:checked {
    border-color: var(--bg-color-newlink);
}

/* Отображение галочки */
.form-check-input[type="checkbox"]:checked::before {
    transform: rotate(45deg) scale(1);
}

/* При фокусе */
.form-check-input[type="checkbox"]:focus {
    box-shadow: 0 0 0 0.15rem rgba(var(--bg-color-newlink), 0.5);
}


.keyboard-button-red {
    display: inline-block;
    padding: 2px 7px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
    color: var(--bg-color-w);
    background-color: var(--bg-color);
    border: 1px solid #cf4d4d;
    border-radius: 3px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    text-align: center;
    text-transform: uppercase;
    margin: 0 2px;
    user-select: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.keyboard-button-red:hover {
    background-color: #cf4d4d;
    color: var(--bg-color);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.keyboard-button-red.hover {
    background-color: #cf4d4d;
    color: var(--bg-color);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

/* Настройка контейнера уведомлений */
#toast-container > .toast {
    background-color: var(--bg-color-newlink);
    backdrop-filter: blur(5px); /* Размытие фона */
    color: var(--bg-color);
    font-weight: 300;
    border: none;
    box-shadow: 0;
    box-shadow: none;
}

#toast-container>.toast-info {
    background-image: none !important;
    background-color: var(--bg-color-newlink);
    position: relative;
}

/* Добавление иконки FontAwesome */
#toast-container>.toast-info::before {
    content: "\f129"; /* Юникод символ стрелочки вниз */
    font-family: "FontAwesome"; /* Подключаем FontAwesome */
    position: absolute;
    top: 50%;
    left: 20px; /* Расстояние от левого края */
    transform: translateY(-50%); /* Центрируем по вертикали */
    font-size: 20px; /* Размер иконки */
    color: var(--bg-color);
}
/* Текст заголовка уведомления */
#toast-container > .toast .toast-title {
    font-weight: bold;
    font-size: 18px;
}

#toast-container > .toast .toast-message {
    margin-left: -0.7rem;
}

/* Footer базовые стили */
.footer {
    background-color: #181a2d;
    /*background-image: url('../images/network.png'); /* Путь к изображению */
    background-repeat: no-repeat; /* Отключить повтор фона */
    background-position: center; /* Центровка изображения */
    background-size: 40px; /* Размер изображения фона */
    color: var(--text-color-a);
    text-align: center;
    font-size: 14px;
    border-top: 1px solid var(--scrollbar-color);
    letter-spacing: 0.3px;
    width: 100%;
}


.text-transform-none {
    text-transform: none;
}

.footer i {
    position: relative;
    color: var(--text-color-a);
    top: 1px;
    font-size: 17px;
}

/* Текстовые ссылки футера */
.footer a {
    color: var(--text-color-a);
    font-weight: 400;
    transition: color 0.3s ease;
    text-decoration: underline;
    text-underline-offset: 5px;
}

.footer a:hover {
    color: var(--bg-color-newlink); /* Подсветка ссылки при наведении */
}

.footer .moderustic {
    font-family: 'Moderustic', sans-serif;
    color: var(--bg-color-w);
    
}


/* Плавное превращение иконки */
.icon-fade {
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

.search-icon {
    transition: opacity 0.15s ease-in-out;
}


#searchContainer_static {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    transition: opacity 0.3s ease-in-out;
}

#searchContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    transition: opacity 0.3s ease-in-out;
}

.search-bar {
    margin-top: -2rem;
    display: flex;
    flex-direction: column; /* Элементы располагаются вертикально */
    gap: 10px; /* Отступ между элементами */
    align-items: center;
    width: 100%;
    max-width: 900px;
    padding: 25px;
}

/* Общий контейнер */
.search-input-wrapper {
    position: relative;
    width: 100%;
}

/* Поле ввода */
#searchInput {
    background-color: #181a2d; /* Фон инпута */
    color: var(--bg-color-w); /* Цвет текста */
    width: 100%;
    padding: 15px;
    padding-right: 90px; /* Дополнительное место для кнопок */
    border: 2px solid var(--scrollbar-color);
    border-radius: 8px;
    opacity: 0.7;
    font-size: 16px;
    box-sizing: border-box;
}

#searchInput:focus {
    outline: none;
    box-shadow: 0 0 0 0.1rem var(--scrollbar-color);
    opacity: 0.7;
    transition: opacity 0.2s ease-in-out;
}

/* Кнопка стереть */
.clear-button {
    position: absolute;
    top: 50%;
    right: 53px; /* Расположение перед лупой */
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.2s ease-in-out;
}

.clear-button img {
    width: 24px;
    height: 24px;
    opacity: 0.8;
}

.clear-button:hover img {
    opacity: 1;
}

/* Кнопка поиска */
.search-button {
    position: absolute;
    top: 50%;
    right: 15px; /* Расположение справа */
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.search-button img {
    width: 37px;
    height: 37px;
    opacity: 0.8;
}

.search-button:hover img {
    opacity: 1;
}

#searchInput::placeholder {
    color: var(--bg-color-w); /* Цвет плейсхолдера */
}

.bottom-blocks {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}

.bottom-blocks a {
    text-decoration: none;
    text-transform: none;
}

.bottom-blocks a {
    font-family: 'Moderustic', sans-serif;
    font-weight: 400;
    font-size: 18px;
    color: var(--bg-color-w);
    text-transform: none;
    transition: color 0.2s ease-in-out;
    letter-spacing: 1px;
}

.bottom-blocks a:hover {
    color: var(--bg-color-newlink);
}

.bottom-blocks .tasix {
    background: linear-gradient(to bottom right, #4a8a43, #2f5a2f);
    /*-webkit-clip-path: polygon(0 0, 100% 13%, 100% 84%, 13% 100%);
    clip-path: polygon(0 0, 100% 13%, 100% 84%, 13% 100%);*/
    clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 10% 100%);
    -webkit-clip-path: polygon(0% 0%, 90% 0%, 100% 100%, 10% 100%);
    font-family: 'Moderustic', sans-serif;
    font-weight: 700;
    font-size: 10px;
    padding: 2px 6px;
    margin-top: -0.2rem;
    letter-spacing: 0;
    margin-left: 5px;
    border-radius: 5px;
    
    position: absolute;
    display: inline-block; /* Адаптируем ширину к содержимому */
    white-space: nowrap; /* Предотвращаем перенос текста */
}

.left-block, .right-block {
    color: var(--bg-color-w);
    padding: 15px;
    flex: 1; /* Равномерное распределение */
}

.click {
    cursor:pointer;
}

.click:hover {
    cursor: pointer;
    color: var(--bg-color-newlink); /* Цвет для всех дочерних элементов */
    transition: color 0.2s ease-in-out;
}

/* Явное переопределение для .tasix */
.click .tasix {
    color: var(--bg-color-w); /* Исходный цвет */
}

.click:hover .tasix {
    color: var(--bg-color-w) !important; /* Принудительное переопределение */
}

.right-block {
    text-align: right;
    font-size: 14px;
}

.left-block p, .right-block p {
    margin: 0; /* Убрать отступы параграфов */
}

.right-block {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    letter-spacing: 0.3px;
}

.right-block .flag-icon {
    position: relative;
    top: -1px;
    right: 3px;
    width: 22px;
}

.left-block i {
    position: relative;
    top: 1px;
    margin-right: 0px;
    font-size: 20px;
}


/* Плавное исчезновение */
.fade-out {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Плавное появление */
.fade-in {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

main, #searchContainer {
    transition: opacity 0.3s ease-in-out;
}


/* Стили для адаптивности */
@media (max-width: 767px) {
    .padding-xs { padding: .25em; }
    .padding-sm { padding: .5em; }
    .padding-md { padding: 1em; }
    .padding-lg { padding: 1.5em; }
    .padding-xl { padding: 3em; }
    .padding-x-xs { padding: .25em 0; }
    .padding-x-sm { padding: .5em 0; }
    .padding-x-md { padding: 1em 0; }
    .padding-x-lg { padding: 1.5em 0; }
    .padding-x-xl { padding: 3em 0; }
    .padding-y-xs { padding: 0 .25em; }
    .padding-y-sm { padding: 0 .5em; }
    .padding-y-md { padding: 0 1em; }
    .padding-y-lg { padding: 0 1.5em; }
    .padding-y-xl { padding: 0 3em; }
    .padding-top-xs { padding-top: .25em; }
    .padding-top-sm { padding-top: .5em; }
    .padding-top-md { padding-top: 1em; }
    .padding-top-lg { padding-top: 1.5em; }
    .padding-top-xl { padding-top: 3em; }
    .padding-right-xs { padding-right: .25em; }
    .padding-right-sm { padding-right: .5em; }
    .padding-right-md { padding-right: 1em; }
    .padding-right-lg { padding-right: 1.5em; }
    .padding-right-xl { padding-right: 3em; }
    .padding-bottom-xs { padding-bottom: .25em; }
    .padding-bottom-sm { padding-bottom: .5em; }
    .padding-bottom-md { padding-bottom: 1em; }
    .padding-bottom-lg { padding-bottom: 1.5em; }
    .padding-bottom-xl { padding-bottom: 3em; }
    .padding-left-xs { padding-left: .25em; }
    .padding-left-sm { padding-left: .5em; }
    .padding-left-md { padding-left: 1em; }
    .padding-left-lg { padding-left: 1.5em; }
    .padding-left-xl { padding-left: 3em; }
    .margin-xs { margin: .25em; }
    .margin-sm { margin: .5em; }
    .margin-md { margin: 1em; }
    .margin-lg { margin: 1.5em; }
    .margin-xl { margin: 3em; }
    .margin-x-xs { margin: .25em 0; }
    .margin-x-sm { margin: .5em 0; }
    .margin-x-md { margin: 1em 0; }
    .margin-x-lg { margin: 1.5em 0; }
    .margin-x-xl { margin: 3em 0; }
    .margin-y-xs { margin: 0 .25em; }
    .margin-y-sm { margin: 0 .5em; }
    .margin-y-md { margin: 0 1em; }
    .margin-y-lg { margin: 0 1.5em; }
    .margin-y-xl { margin: 0 3em; }
    .margin-top-xs { margin-top: .25em; }
    .margin-top-sm { margin-top: .5em; }
    .margin-top-md { margin-top: 1em; }
    .margin-top-lg { margin-top: 1.5em; }
    .margin-top-xl { margin-top: 3em; }
    .margin-right-xs { margin-right: .25em; }
    .margin-right-sm { margin-right: .5em; }
    .margin-right-md { margin-right: 1em; }
    .margin-right-lg { margin-right: 1.5em; }
    .margin-right-xl { margin-right: 3em; }
    .margin-bottom-xs { margin-bottom: .25em; }
    .margin-bottom-sm { margin-bottom: .5em; }
    .margin-bottom-md { margin-bottom: 1em; }
    .margin-bottom-lg { margin-bottom: 1.5em; }
    .margin-bottom-xl { margin-bottom: 3em; }
    .margin-left-xs { margin-left: .25em; }
    .margin-left-sm { margin-left: .5em; }
    .margin-left-md { margin-left: 1em; }
    .margin-left-lg { margin-left: 1.5em; }
    .margin-left-xl { margin-left: 3em; }

    .footer {
        background-image: none;
        text-align: center;
    }

    .footer .col-md-6 {
        margin-bottom: 10px; /* Дополнительный отступ на мобильных */
    }

    .right-block {
        text-align: right;
        font-size: 14px;
    }

    .right-block .flag-icon {
        position: relative;
        top: -1px;
        height: 18px;
    }
    
    .left-block i {
        position: relative;
        top: 0;
        margin-right: 3px;
        font-size: 17px;
    }
}



@media (max-width: 767px) {
    .language-select-container {
        margin-left: -0.5rem;
    }
    .help {
        position: absolute;
        top: 2.5rem;
        right: 1.4rem;
        font-size: 22px;
        z-index: 999;
    }
    .th {
        margin-right: -1rem;
        font-size: 20px;
        z-index: 999;
    }
    .search-icon {
        position: relative;
        top: -2px;
        right: -10px;
        width: 30px;
        height: 30px;
    }

    .horizontal-menu {
        flex-direction: column !important;
        align-items: flex-start;
    }
    .horizontal-menu li {
        margin-right: 0;
        margin-bottom: 10px;
    }
    .horizontal-menu li:last-child {
        margin-bottom: 0;
    }
}

/* 404 */
.error-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.error-code {
    font-size: 24px;
    font-weight: 500; /* Жирный шрифт для числа 404 */
    line-height: 49px;
    padding-right: 15px;
    position: relative;
}

.error-code:before {
    content: '';
    position: absolute;
    top: -5px; /* Увеличенная высота вертикальной полосы */
    right: 0;
    bottom: -5px; /* Увеличенная высота вертикальной полосы */
    width: 2px;
    background-color: var(--scrollbar-color); /* Цвет вертикальной полосы */
}

.error-text {
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    position: relative;
    padding-left: 10px;
    text-transform: uppercase;
    top: -3px;
}

.ulname-list {
    list-style-type: none; /* Убирает стандартные маркеры списка */
    padding: 0;
    margin: 1% auto;
}

.ulname-list-item {
    position: relative; /* Относительное позиционирование для использования псевдоэлемента */
}

.ulname-list-item::before {
    content: '\02D7'; /* Unicode символ стрелки (→) */
    position: absolute;
    left: -13px; /* Позиция стрелки слева от текста */
    top: 50%;
    transform: translateY(-60%); /* Центрирует стрелку по вертикали */
    font-size: 1.2rem;
    color: var(--scrollbar-color); /* Цвет стрелки */
}

.logo-speedtest-text {
    color: var(--bg-color-w);
    font-family: 'Moderustic', sans-serif;
}



.show-calculator .how {
    position: relative;
    top: 2rem;
    background: repeating-linear-gradient(45deg, var(--ip-bg-color), var(--ip-bg-color) 6px, var(--scrollbar-color) 6px, var(--scrollbar-color) 12px);
    padding: 3px;
    border-radius: 10px;
}

.show-calculator .how .now {
    background: var(--ip-bg-color);
    padding: 8px;
}

.show-calculator .how .settings {
    background-color: #fcf5c6;
    position: absolute;
    -webkit-clip-path: polygon(0 13%, 100% 0, 97% 100%, 0 84%);
    clip-path: polygon(0 13%, 100% 0, 97% 100%, 4% 84%);
    font-weight: 700;
    font-size: 12px;
    padding: 5px 10px;
    font-family: 'Moderustic', sans-serif;
    margin-top: -2rem;
    letter-spacing: 0.5px;
    margin-left: 0;
    color: #141526;
    text-rendering: geometricPrecision;
    text-transform: uppercase;
    display: inline-block; /* Адаптируем ширину к содержимому */
    white-space: nowrap; /* Предотвращаем перенос текста */
    text-rendering: optimizeLegibility; /* Улучшает читабельность */
    -webkit-font-smoothing: antialiased; /* Сглаживание для Chrome, Safari */
    -moz-osx-font-smoothing: grayscale; /* Сглаживание для macOS */
}


.show-calculator .ip_block {
    position: relative;
    top: 2rem;
    border-radius: 8px;
    border: var(--scrollbar-color) 2px solid  ;
}

.show-calculator .ip_block .ip_container {
    background: var(--ip-bg-color);
    padding: 16px;
    border-radius: 8px;
}

.show-calculator .ip_block .settings {
    background-color: #fcf5c6;
    position: absolute;
    -webkit-clip-path: polygon(0 13%, 100% 0, 97% 100%, 0 84%);
    clip-path: polygon(0 13%, 100% 0, 97% 100%, 4% 84%);
    font-weight: 700;
    font-size: 12px;
    padding: 5px 10px;
    font-family: 'Moderustic', sans-serif;
    margin-top: -1.6rem;
    letter-spacing: 0.5px;
    margin-left: 0.3rem;
    color: #141526;
    text-rendering: geometricPrecision;
    text-transform: uppercase;
    display: inline-block; /* Адаптируем ширину к содержимому */
    white-space: nowrap; /* Предотвращаем перенос текста */
    text-rendering: optimizeLegibility; /* Улучшает читабельность */
    -webkit-font-smoothing: antialiased; /* Сглаживание для Chrome, Safari */
    -moz-osx-font-smoothing: grayscale; /* Сглаживание для macOS */
}

.show-calculator .ip_block .ip_container .ip_main {
    margin: 10px 0 10px 0;
}

.show-calculator .ip_block .ip_container .ip_main label {
    font-size: 14px;
    margin-bottom: 5px;
    color: var(--text-color-a);
}

.show-calculator .ip_block .ip_container .ip_main input {
    background-color: #181a2d; /* Фон инпута */
    color: var(--bg-color-w); /* Цвет текста */
    width: 100%;
    padding-right: 90px; /* Дополнительное место для кнопок */
    border: 1px solid var(--scrollbar-color);
    border-radius: 4px;
    font-size: 15px;
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
}

.show-calculator .ip_block .ip_container .ip_main input:focus {
    outline: none;
    box-shadow: none;
    color: var(--bg-color-f); /* Цвет текста */
    border: var(--bg-color-newlink) 1px solid;
}

.show-calculator .ip_block .ip_container .ip_main select {
    background-color: #181a2d; /* Фон инпута */
    color: var(--bg-color-w); /* Цвет текста */
    width: 100%;
    border: 1px solid var(--scrollbar-color);
    border-radius: 4px;
    font-size: 15px;
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
    appearance: none; /* Убираем стандартную стрелку */
    -webkit-appearance: none;
    -moz-appearance: none;
    scrollbar-color: #1cbfff #181a2d; /* Для Firefox */
    scrollbar-width: thin; /* Для Firefox */
}

.show-calculator .ip_block .ip_container .ip_main select option {
    background-color: var(--ip-bg-color); /* Фон для опций */
    color: var(--bg-color-w); /* Цвет текста опций */
    border: none; /* Убираем границу */
    outline: none; /* Убираем стандартный фокус */
}

.form-floating .fa-chevron-down {
    position: absolute;
    right: 14px; /* Расположение стрелки */
    top: 50%; /* Центровка по вертикали */
    font-size: 12px;
    transform: translateY(-50%);
    color: var(--scrollbar-color); /* Цвет стрелки */
    pointer-events: none; /* Чтобы клики не срабатывали на иконке */
}

.form-floating select:focus + .fa-chevron-down {
    color: var(--bg-color-newlink); /* Цвет стрелки при фокусе */
}

.form-floating select:disabled + .fa-chevron-down {
    display: none;
}

.show-calculator .ip_block .ip_container .ip_main select:focus {
    outline: none;
    box-shadow: none;
    color: var(--bg-color-f); /* Цвет текста */
    border: var(--bg-color-newlink) 1px solid;
}

.show-calculator .ip_block .ip_container .ip_main select::-webkit-scrollbar {
    width: 12px;
}

.show-calculator .ip_block .ip_container .ip_main select::-webkit-scrollbar-track {
    background: var(--bg-color);
}

.show-calculator .ip_block .ip_container .ip_main select::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-color) !important;
    border: 2px solid var(--bg-color) !important;
}

.form-floating>.form-control-plaintext~label::after,.form-floating>.form-control:focus~label::after,.form-floating>.form-control:not(:placeholder-shown)~label::after,.form-floating>.form-select~label::after {
    background: none;
    border: none;
    border-radius: 0px;
}

.form-control::placeholder {
    color: var(--text-color);
    opacity: 1
}

.result-calculator {
    margin-bottom: 2rem;
}

.table-responsive table {
    --bs-table-color-type: initial;
    --bs-table-bg-type: initial;
    --bs-table-color-state: initial;
    --bs-table-bg-state: initial;
    --bs-table-color: var(--bg-color-w);
    --bs-table-bg: var(--ip-bg-color);
    --bs-table-border-color: var(--bg-color-newlink);
    --bs-table-accent-bg: transparent;
    --bs-table-striped-color: var(--bg-color-w);
    --bs-table-striped-bg: rgba(var(--bg-color-newlink), 0.05);
    --bs-table-active-color: var(--bg-color-newlink);
    --bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.1);
    --bs-table-hover-color: var(--bg-color-newlink);
    --bs-table-hover-bg: rgba(var(--bg-color-newlink), 0.075);
    width: 100%;
    vertical-align: top;
    border-color: var(--bg-color-newlink);
}

.table-responsive table thead td {
    background-color: #181a2d;
    color: var(--text-color-a-hover);
    padding: 15px 10px;
    border: 1px solid #2b2e54;
}

.table-responsive table td {
    border: 1px solid #2b2e54;
    padding: 10px;
}

.table-responsive table thead.subtitle tr td {
    position: relative;
    top: 10px;
    left: -10px;
    padding: none;
    border: none;
    background: none;
    color: var(--bg-color-f);
    font-size: 17px;
}

/* NAV */
nav {
    margin-bottom: 3rem;
}

.pagination {
    display: flex; /* Устанавливаем flex-контейнер для ul */
    justify-content: center; /* Центрируем элементы */
    gap: 2px; /* Добавляем расстояние между элементами */
}

.pagination li.page-item {
    list-style: none; /* Убираем маркеры списка */
    border-radius: 0px;
}

.pagination li .page-link {
    display: inline-block;
    padding: 2px 7px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: var(--bg-color-w);
    background-color: var(--bg-color);
    border: 1px solid var(--bg-color-newlink);
    border-radius: 0px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    text-align: center;
    text-transform: uppercase;
    margin: 0 2px;
    user-select: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.pagination li .page-link:hover {
    background-color: var(--bg-color-newlink);
    color: var(--bg-color);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.pagination li.active .page-link {
    background-color: var(--bg-color-newlink);
    color: var(--bg-color);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.class-sub {
    position: relative;
    top: -0.1rem;
    font-size: 10px;
    color: white;
    padding: 3px 6px;
    border-radius: 4px;
    margin-left: 0.2rem;
}

.class-a {
    background-color: green;
}

.class-b {
    background-color: rgba(255, 255, 0, 0.479);
}

.class-c {
    background-color: orange;
}

.class-d {
    background-color: red;
}

.class-e {
    background-color: gray;
}

.input-group {
    position: relative;
    width: 100%;
}

.with-btn {
    width: 100%;
    padding-right: 90px; /* Оставляем место для кнопки */
}

.input-btn {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    text-transform: uppercase;
    padding: 4px 6px;
    background-color: #181a2d;
    border: 1px var(--scrollbar-color) solid;
    color: var(--bg-color-w);
    font-weight: 600;
    text-decoration: none;
    border-radius: 0px;
    cursor: pointer;
    font-size: 10px;
    transition: background-color 0.3s ease;
}

.input-btn:hover {
    background-color: var(--bg-color-newlink);
    color: var(--ip-bg-color);
    border: 1px var(--bg-color-newlink) solid;
}

.mumask {
    margin-top: 4rem;
    color: var(--bg-color-w);
    font-size: 12px;
}

.mumask .class-sub {
    font-weight: bold;
    font-size: 12px;
    position: relative;
    top: 1px;
    right: 3px;
}


/* Page */
.pageStatic_kx {
    background: var(--ip-bg-color);
    border-radius: 8px;
    border: var(--scrollbar-color) 2px solid;
    padding: 30px;
    color: var(--bg-color-w);
    margin-bottom: 2rem;
}

.top-30 {
    top: 30%;
}

.pageTitle_kx {
    text-transform: uppercase;
    font-size: 1.5rem;
    color: var(--bg-color-newlink);
    position: relative;
    margin-bottom: 2rem;
}

.pageTitle_kx::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 1px;
    background-color: var(--bg-color-newlink);
}


.pageContent_kx {
    font-weight: 300;
    line-height: 1.8;
}

.pageContent_kx b {
    color: var(--bg-color-f);
    font-weight: 600;
    display: inline-block;
    margin-bottom: 0.2rem;
    position: relative;
}

.pageContent_kx b::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: var(--scrollbar-color);
}

.pageContent_kx p {
    margin-bottom: 0.85rem;
}

.pageContent_kx ol {
    margin-left: 1.5rem;
    padding-left: 2rem;
    list-style: decimal;
    color: var(--bg-color-w);
}

.pageContent_kx ol li {
    margin-bottom: 0.4rem;
    font-weight: 400;
    line-height: 1.5;
}

.pageContent_kx ul {
    margin-left: 1.5rem;
    padding-left: 2rem;
    list-style: outside;
    color: var(--bg-color-w);
}

.pageContent_kx ul li {
    margin-bottom: 0.4rem;
    font-weight: 400;
    line-height: 1.5;
}

.pageContent_kx a {
    color: var(--text-color-a-hover);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease, border-bottom 0.2s ease;
}

.pageContent_kx a:hover {
    color: var(--bg-color-newlink);
}

.offcanvas {
    background-color: var(--ip-bg-color) !important;
    border-left: var(--scrollbar-color) 2px solid !important;
    color: var(--bg-color-w) !important;
}

.offcanvas-body hr {
    border: var(--scrollbar-color) 1px solid !important;
}

.btn-close {
    filter: brightness(0) invert(1); /* Делает кнопку белой */
}


/* Стили для модального окна */
.modal-content {
    background-color: var(--ip-bg-color); /* Используем переменную для фона */
    color: #ffffff; /* Белый текст для контраста */
    border: none; /* Убираем рамку */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Добавляем тень */
  }
  
  .modal-header,
  .modal-footer {
    background-color: var(--ip-bg-color); /* Используем тот же фон */
  }

  .modal-header {
    border-bottom: var(--scrollbar-color) 1px solid;
  }

  .modal-footer {
    border-top: var(--scrollbar-color) 1px solid;
  }
  
  .modal-title {
    color: var(--bg-color-newlink); /* Цвет текста заголовка */
  }
  
  .modal-body {
    color: #e0e0e0; /* Светлый цвет текста для лучшей читаемости */
  }
  
  /* Кнопки в модальном окне */
  .modal-footer .btn {
    background-color: #444; /* Темная кнопка */
    color: #ffffff; /* Белый текст */
    border: none;
  }
  
  .modal-footer .btn:hover {
    background-color: #555; /* Темнее при наведении */
  }
  
  .info-dns {
    position: relative;
    top: -3px;
  }

.info-dns i {
    position: relative;
    font-size: 15px;
    right: 2px;
    top: 1px;
}

.info-dns a {
    font-size: 11px;
}

.img-icon-center {
    position: relative;
    top: -1px;
    width: 18px;
}

.color-i-g i {
    position: relative;
    top: 1px;
    width: 18px;
    height: 18px;
    color: var(--text-color);
    fill: var(--text-color);
}

/* user info */

.userblock .usertitle {
    font-weight: bold;
    color: var(--bg-color-newlink);
    font-size: 12px;
    margin-bottom: 4px;
}

.userblock .userinfo {
    background-color: var(--ip-bg-color);
    border: var(--scrollbar-color) 1px solid;
    padding: 10px;
    border-radius: 4px;
}

.userblock .userinfo .flag-icon {
    position: relative;
    top: -1px;
    right: 3px;
    width: 20px;
}

.userblock .userinfo i {
    position: relative;
    top: 0px;
    margin-right: 0px;
    font-size: 16px;
}

.font-size-10 {
    font-size: 10px;
}

.font-size-11 {
    font-size: 11px;
}

.font-size-12 {
    font-size: 12px;
}

.font-size-14 {
    font-size: 14px;
}

.offcanvas-body a {
    color: var(--bg-color-w);
    text-transform: none;
}

.offcanvas-body a:hover {
    color: var(--bg-color-newlink);
}

.rs_block .console {
    position: relative;
}

.rs_block .console pre {
    background-color: var(--bg-color);
    padding: 12px;
}

.rs_block .copy-rs-block {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

#copy-rs-block {
    visibility: visible !important;
    display: block !important; /* ← добавь эту строку */
}

.rs_nav .d-none {
    display: none !important;
}

.rs_nav .d-block {
    display: block !important;
}

.modal-body .title_name {
    background-color: #fcf5c6;
    position: relative;
    -webkit-clip-path: polygon(0 13%, 100% 0, 97% 100%, 0 84%);
    clip-path: polygon(0 13%, 100% 0, 97% 100%, 4% 84%);
    font-weight: 700;
    font-size: 12px;
    margin-bottom: 0.8rem;
    padding: 5px 10px;
    font-family: 'Moderustic', sans-serif;
    letter-spacing: 0.5px;
    color: #141526;
    text-rendering: geometricPrecision;
    text-transform: uppercase;
    display: inline-block; /* Адаптируем ширину к содержимому */
    white-space: nowrap; /* Предотвращаем перенос текста */
    text-rendering: optimizeLegibility; /* Улучшает читабельность */
    -webkit-font-smoothing: antialiased; /* Сглаживание для Chrome, Safari */
    -moz-osx-font-smoothing: grayscale; /* Сглаживание для macOS */
}

.modal-body .text-muted {
    color: var(--bg-color-w) !important;
}

/* Основной стиль списка */
.list-group {
    background-color: var(--ip-bg-color);
    border: 1px solid #2b2e54;
    color: var(--bg-color-w);
    border-radius: 0 !important;
    font-size: 14px;
    overflow-y: auto;
}

/* Элемент списка */
.list-group-item {
    background-color: var(--ip-bg-color);
    border: none;
    font-weight: 500;
    border-bottom: 1px solid #2b2e54;
    padding: 8px;
    color: #7f8099;
    transition: background-color 0.2s, color 0.2s;
}

.list-group-item:last-child {
    border-bottom: none;
}

/* При наведении */
.list-group-item:hover {
    background-color: #181a2d !important;
    color: var(--text-color-a-hover) !important;
    cursor: pointer;
}

/* Активный (выделенный) элемент, стилизация как thead */
.list-selected {
    background-color: #181a2d !important;
    color: var(--text-color-a-hover) !important;
    border-color: #2b2e54 !important;
}

/* Скроллбар для списка */
.list-group::-webkit-scrollbar {
    width: 12px;
}

.list-group::-webkit-scrollbar-track {
    background: var(--bg-color);
}

.list-group::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-color);
    border: 4px solid var(--bg-color);
}

/* Базовый вид (невыбранный radio) */
.form-check-input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    position: relative;
    width: 16px;
    height: 16px;
    min-width: 16px;
    border: 2px solid #2b2e54;
    border-radius: 50%;
    background-color: #181a2d;
    background-image: none;
    outline: none;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    margin: 0;
    float: none;
    flex-shrink: 0;
}

/* Внутренний кружок — disabled, using box-shadow instead */
.form-check-input[type="radio"]::before {
    display: none;
}

/* При выборе (checked) */
.form-check-input[type="radio"]:checked {
    border: 2px solid var(--bg-color-newlink);
    background-color: var(--bg-color-newlink);
    background-image: none;
    box-shadow: inset 0 0 0 3px #181a2d;
}

/* Отображение внутреннего круга — disabled */
.form-check-input[type="radio"]:checked::before {
    display: none;
}

/* Фокус */
.form-check-input[type="radio"]:focus {
    box-shadow: inset 0 0 0 3px #181a2d, 0 0 0 2px rgba(28,191,255,0.2);
}

.form-check-label {
    color: var(--bg-color-w);
    cursor: pointer;
    font-size: 13px;
    line-height: 16px;
    margin: 0;
    padding: 0;
}

.form-label {
    color: var(--bg-color-f);
    font-weight: 600;
}

.tasix-info-box {
  background: linear-gradient(135deg, #16192b, #1d2037, #202445);
  background-size: 400% 400%;
  animation: gradientFlow 20s ease infinite;
  border: 1px solid #2b2e54;
  border-radius: 6px;
  color: var(--bg-color-w);
}

.tasix-info-box strong {
    color: var(--bg-color-f) !important;
    text-transform: uppercase;
}

/* Градиентная анимация */
@keyframes gradientFlow {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

.alert-cidr {
    background-color: var(--ip-bg-color);
    color: var(--bg-color-w);
    border: 1px solid #2b2e54;
}

.alert-cidr i.fa,
.alert-cidr .text-info {
    color: var(--bg-color-f) !important;
    text-transform: uppercase;
}

.mrtg-card {
    border: 1px solid rgba(43,46,84,.35);
    border-radius: .5rem;
    padding: .45rem;
    background: rgba(255,255,255,.02);
    height: 100%;
}

.mrtg-card img {
    width: 100%;
    height: auto;
    display: block;
}

#mrtg-filter {
    background-color: #181a2d; /* Фон инпута */
    color: var(--bg-color-w); /* Цвет текста */
    width: 100%;
    padding-right: 90px; /* Дополнительное место для кнопок */
    border: 1px solid var(--scrollbar-color);
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
}

#mrtg-filter:focus {
    outline: none;
    box-shadow: none;
    color: var(--bg-color-f); /* Цвет текста */
    border: var(--bg-color-newlink) 1px solid;
}

/* ==========================================
   SKELETON LOADERS
   ========================================== */
@keyframes skeletonPulse {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(90deg, #1e2035 25%, #2a2d4a 50%, #1e2035 75%);
    background-size: 200% 100%;
    animation: skeletonPulse 1.5s ease-in-out infinite;
    border-radius: 4px;
    display: inline-block;
}

.skeleton-text {
    height: 14px;
    width: 80%;
    margin: 6px 0;
}

.skeleton-text-sm {
    height: 12px;
    width: 60%;
    margin: 4px 0;
}

.skeleton-text-lg {
    height: 20px;
    width: 90%;
    margin: 8px 0;
}

.skeleton-ip {
    height: 42px;
    width: 220px;
    margin: 10px auto;
    border-radius: 6px;
}

.skeleton-badge {
    height: 22px;
    width: 70px;
    border-radius: 12px;
}

.skeleton-block {
    height: 80px;
    width: 100%;
    border-radius: 6px;
    margin: 8px 0;
}

.skeleton-circle {
    height: 40px;
    width: 40px;
    border-radius: 50%;
}

/* ==========================================
   THROBBER / SPINNER
   ========================================== */
@keyframes throbberSpin {
    to { transform: rotate(360deg); }
}

.throbber {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(28, 191, 255, 0.2);
    border-top-color: var(--bg-color-newlink);
    border-radius: 50%;
    animation: throbberSpin 0.7s linear infinite;
}

.throbber-lg {
    width: 36px;
    height: 36px;
    border-width: 3px;
}

.throbber-sm {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

.throbber-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
    gap: 10px;
    color: var(--text-color);
    font-size: 13px;
}

/* ==========================================
   IMPROVED COPY BUTTON (offcanvas fix)
   ========================================== */
.offcanvas .userinfo a {
    color: var(--bg-color-newlink);
    text-decoration: none;
    cursor: pointer;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    position: relative;
    z-index: 10;
}

.offcanvas .userinfo a:hover {
    color: #fff;
    text-decoration: underline;
}

.offcanvas .userinfo a::after {
    content: ' \f0c5';
    font-family: 'FontAwesome';
    font-size: 10px;
    opacity: 0;
    transition: opacity 0.2s;
    margin-left: 4px;
    color: var(--bg-color-newlink);
}

.offcanvas .userinfo a:hover::after {
    opacity: 1;
}

/* Fix pointer-events issue in modals/offcanvas */
.offcanvas-body * {
    pointer-events: auto;
}

.modal-body a[onclick],
.offcanvas-body a[onclick] {
    pointer-events: auto !important;
    cursor: pointer !important;
    user-select: text !important;
    -webkit-user-select: text !important;
}

/* ==========================================
   SMART SEARCH SUGGESTIONS
   ========================================== */
.search-suggestions {
    background: var(--ip-bg-color);
    border: 1px solid var(--scrollbar-color);
    border-radius: 8px;
    margin-top: 8px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.search-suggestions.active {
    max-height: 320px;
    opacity: 1;
}

.search-suggestion-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: var(--bg-color-w);
    cursor: pointer;
    transition: background 0.15s;
    font-size: 14px;
    text-decoration: none;
}

.search-suggestion-item:hover {
    background: rgba(28, 191, 255, 0.08);
    color: #fff;
}

.search-suggestion-item i {
    width: 20px;
    text-align: center;
    color: var(--bg-color-newlink);
    font-size: 14px;
}

.search-suggestion-type {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-color);
    background: rgba(28, 191, 255, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

/* ==========================================
   PLESK LICENSE PAGE
   ========================================== */
.plesk-hero {
    background: linear-gradient(135deg, #0d1025 0%, #1a1d3a 50%, #0d1025 100%);
    border: 1px solid #2b2e54;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.plesk-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(28,191,255,0.06) 0%, transparent 70%);
    border-radius: 50%;
}

.plesk-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.plesk-badge-active {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.plesk-badge-expired {
    background: rgba(220, 53, 69, 0.15);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.3);
}

.plesk-badge-warning {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.plesk-card {
    background: var(--ip-bg-color);
    border: 1px solid #2b2e54;
    border-radius: 10px;
    padding: 20px;
    height: 100%;
    transition: border-color 0.2s, transform 0.2s;
}

.plesk-card:hover {
    border-color: rgba(28, 191, 255, 0.3);
    transform: translateY(-2px);
}

.plesk-card-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 20px;
    margin-bottom: 14px;
}

.plesk-key-display {
    background: var(--bg-color);
    border: 1px solid #2b2e54;
    border-radius: 8px;
    padding: 14px 18px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: var(--bg-color-newlink);
    word-break: break-all;
    position: relative;
    cursor: pointer;
    transition: border-color 0.2s;
}

.plesk-key-display:hover {
    border-color: var(--bg-color-newlink);
}

.plesk-key-display .copy-hint {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--text-color);
    font-family: Verdana, sans-serif;
}

.plesk-timeline {
    position: relative;
    padding-left: 24px;
}

.plesk-timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--bg-color-newlink), #2b2e54);
}

.plesk-timeline-item {
    position: relative;
    padding-bottom: 20px;
}

.plesk-timeline-item::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--bg-color-newlink);
    border: 2px solid var(--ip-bg-color);
}

.plesk-progress-bar {
    height: 6px;
    background: #1e2035;
    border-radius: 3px;
    overflow: hidden;
    margin: 12px 0;
}

.plesk-progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 1s ease;
    background: linear-gradient(90deg, var(--bg-color-newlink), #7c5cff);
}

/* ==========================================
   TEMP MAIL PAGE
   ========================================== */
.tempmail-address-box {
    background: var(--ip-bg-color);
    border: 1px solid #2b2e54;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    margin-bottom: 24px;
}

.tempmail-email {
    font-size: 20px;
    font-weight: 600;
    color: var(--bg-color-newlink);
    font-family: 'Moderustic', sans-serif;
    letter-spacing: 0.5px;
    word-break: break-all;
}

.tempmail-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 16px;
    flex-wrap: wrap;
}

.tempmail-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 8px;
    border: 1px solid #2b2e54;
    background: var(--bg-color);
    color: var(--bg-color-w);
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.tempmail-btn:hover {
    border-color: var(--bg-color-newlink);
    color: var(--bg-color-newlink);
    background: rgba(28, 191, 255, 0.05);
}

.tempmail-btn-primary {
    background: var(--bg-color-newlink);
    color: #fff;
    border-color: var(--bg-color-newlink);
}

.tempmail-btn-primary:hover {
    background: #0da8e6;
    border-color: #0da8e6;
    color: #fff;
}

.tempmail-inbox {
    background: var(--ip-bg-color);
    border: 1px solid #2b2e54;
    border-radius: 12px;
    overflow: hidden;
}

.tempmail-inbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #2b2e54;
    color: var(--bg-color-w);
    font-size: 14px;
    font-weight: 600;
}

.tempmail-message {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(43, 46, 84, 0.4);
    cursor: pointer;
    transition: background 0.15s;
}

.tempmail-message:hover {
    background: rgba(28, 191, 255, 0.04);
}

.tempmail-message:last-child {
    border-bottom: none;
}

.tempmail-message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--color3), var(--color4));
    color: #fff;
}

.tempmail-message-body {
    flex: 1;
    min-width: 0;
}

.tempmail-message-from {
    font-weight: 600;
    color: var(--bg-color-w);
    font-size: 13px;
    margin-bottom: 2px;
}

.tempmail-message-subject {
    color: var(--bg-color-f);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tempmail-message-preview {
    color: var(--text-color);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.tempmail-message-time {
    color: var(--text-color);
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
}

.tempmail-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--text-color);
}

.tempmail-empty i {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.3;
}

.tempmail-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-color-newlink);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    padding: 0 6px;
}

/* Auto-refresh indicator */
.tempmail-refresh-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-color);
}

@keyframes tempmail-dot-pulse {
    0%, 80%, 100% { opacity: 0.3; }
    40% { opacity: 1; }
}

.tempmail-refresh-indicator .dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--bg-color-newlink);
    display: inline-block;
}

.tempmail-refresh-indicator .dot:nth-child(1) { animation: tempmail-dot-pulse 1.4s infinite 0s; }
.tempmail-refresh-indicator .dot:nth-child(2) { animation: tempmail-dot-pulse 1.4s infinite 0.2s; }
.tempmail-refresh-indicator .dot:nth-child(3) { animation: tempmail-dot-pulse 1.4s infinite 0.4s; }

/* ==========================================
   HANDBOOK / REFERENCE PAGE
   ========================================== */
.handbook-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.handbook-card {
    background: var(--ip-bg-color);
    border: 1px solid #2b2e54;
    border-radius: 10px;
    padding: 20px;
    transition: border-color 0.2s, transform 0.15s;
    cursor: pointer;
    text-decoration: none;
    color: var(--bg-color-w);
    display: block;
}

.handbook-card:hover {
    border-color: rgba(28, 191, 255, 0.4);
    transform: translateY(-2px);
    color: var(--bg-color-w);
    text-decoration: none;
}

.handbook-card-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 18px;
    margin-bottom: 12px;
}

.handbook-card-title {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 6px;
    color: var(--bg-color-f);
}

.handbook-card-desc {
    font-size: 13px;
    color: var(--text-color-a);
    line-height: 1.5;
}

/* ==========================================
   IMPROVED TAS-IX TABLE
   ========================================== */
.tasix-provider-card {
    background: var(--ip-bg-color);
    border: 1px solid #2b2e54;
    border-radius: 8px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: border-color 0.2s;
}

.tasix-provider-card:hover {
    border-color: rgba(28, 191, 255, 0.3);
}

.tasix-provider-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(28, 191, 255, 0.1);
    color: var(--bg-color-newlink);
    font-size: 16px;
    flex-shrink: 0;
}

.tasix-provider-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--bg-color-f);
}

.tasix-provider-as {
    font-size: 12px;
    color: var(--text-color);
}

.tasix-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.tasix-stat-card {
    background: var(--ip-bg-color);
    border: 1px solid #2b2e54;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.tasix-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--bg-color-newlink);
    font-family: 'Moderustic', sans-serif;
}

.tasix-stat-label {
    font-size: 12px;
    color: var(--text-color);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================
   FADE TRANSITIONS
   ========================================== */
.fade-in {
    animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-slide-in {
    animation: fadeSlideIn 0.4s ease forwards;
}

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================
   IMPROVED 404 PAGE
   ========================================== */
.error-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    background: var(--bg-color);
    color: var(--bg-color-w);
    padding: 20px;
}

.error-code {
    font-size: clamp(80px, 20vw, 180px);
    font-weight: 800;
    font-family: 'Moderustic', sans-serif;
    background: linear-gradient(135deg, var(--bg-color-newlink), #7c5cff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.error-text {
    font-size: 18px;
    color: var(--text-color-a);
    margin-top: 8px;
}

/* ==========================================
   PROFESSIONAL UI OVERHAUL v2
   ========================================== */

/* ===================
   1. DROPDOWN MENUS — complete rework
   =================== */
.language-options,
.ipmenmenu-options {
    background: rgba(16, 18, 32, 0.95) !important;
    backdrop-filter: blur(24px) saturate(1.6) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.6) !important;
    border: 1px solid rgba(28, 191, 255, 0.12) !important;
    box-shadow:
        0 12px 48px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.02) inset,
        0 1px 0 rgba(255, 255, 255, 0.03) inset !important;
    border-radius: 10px !important;
    padding: 6px !important;
    min-width: 180px;
}

.language-options::before,
.ipmenmenu-options::before {
    border-bottom-color: rgba(16, 18, 32, 0.95) !important;
}

.language-option,
.ipmenmenu-option {
    border-radius: 6px !important;
    padding: 10px 12px !important;
    transition: all 0.15s ease !important;
    margin: 1px 0 !important;
}

.language-option:first-child,
.ipmenmenu-option:first-child { border-radius: 6px !important; }
.language-option:last-child,
.ipmenmenu-option:last-child { border-radius: 6px !important; }
.language-option:not(:first-child):not(:last-child),
.ipmenmenu-option:not(:first-child):not(:last-child) { border-radius: 6px !important; }

.language-option:hover,
.ipmenmenu-option:hover {
    background: rgba(28, 191, 255, 0.1) !important;
    backdrop-filter: none !important;
}

/* ipmenmenu cards inside dropdown */
.ipmenmenu-options {
    min-width: 280px;
    padding: 8px !important;
}

.ipmenmenu-option {
    padding: 12px 14px !important;
    position: relative;
}

.ipmenmenu-option::before {
    content: '';
    position: absolute;
    left: 14px;
    bottom: 0;
    right: 14px;
    height: 1px;
    background: rgba(43, 46, 84, 0.3);
}

.ipmenmenu-option:last-child::before {
    display: none;
}

.ipmenmenu-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #fff !important;
}

.ipmenmenu-title i {
    color: var(--bg-color-newlink) !important;
    width: 20px;
    text-align: center;
}

.ipmenmenu-description {
    font-size: 11px !important;
    color: rgba(124, 133, 155, 0.9) !important;
    margin-top: 3px !important;
    line-height: 1.4 !important;
}

/* ===================
   2. CALCULATOR — professional data display
   =================== */
.show-calculator .ip_block {
    border: 2px solid var(--scrollbar-color) !important;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: none;
}

.show-calculator .ip_block .ip_container {
    padding: 16px !important;
    border-radius: 0 !important;
    background: var(--ip-bg-color) !important;
}

.show-calculator .ip_block .settings {
    background: var(--ip-bg-color) !important;
    color: var(--bg-color-newlink) !important;
    -webkit-clip-path: none !important;
    clip-path: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 10px 16px !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
    font-size: 12px !important;
    letter-spacing: 2px;
    font-family: 'Moderustic', sans-serif;
    border-bottom: 1px solid rgba(43,46,84,0.3);
}

/* All selects & inputs in calc/tas-ix — match speedtest dark style */
.show-calculator .ip_block .ip_container .ip_main input,
.show-calculator .ip_block .ip_container .ip_main select,
.show-calculator select.form-control,
#mrtg-filter {
    background-color: #181a2d !important;
    border: 2px solid var(--scrollbar-color) !important;
    border-radius: 5px !important;
    color: var(--bg-color-w) !important;
    font-size: 14px !important;
    transition: border-color 0.2s ease-in-out !important;
}

/* form-floating inputs need extra top padding for label */
.show-calculator .form-floating .form-control {
    padding: 1.625rem 0.75rem 0.625rem !important;
    height: auto !important;
}

#mrtg-filter {
    padding: 8px 12px !important;
}

.show-calculator .ip_block .ip_container .ip_main input:focus,
.show-calculator .ip_block .ip_container .ip_main select:focus,
.show-calculator select.form-control:focus,
#mrtg-filter:focus {
    border-color: var(--bg-color-newlink) !important;
    box-shadow: none !important;
    outline: none !important;
    color: var(--bg-color-f) !important;
}

/* Chevron for all selects */
.form-floating .fa-chevron-down,
.select-arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--scrollbar-color);
    pointer-events: none;
    font-size: 11px;
    transition: color 0.2s;
}

select:focus ~ .fa-chevron-down,
select:focus ~ .select-arrow {
    color: var(--bg-color-newlink) !important;
}

.show-calculator .ip_block .ip_container .ip_main label {
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: var(--text-color) !important;
    font-weight: 600 !important;
}

/* External IP button */
.input-btn {
    border-radius: 6px !important;
    font-size: 10px !important;
    padding: 5px 10px !important;
    letter-spacing: 0.5px;
    border: 1px solid rgba(28, 191, 255, 0.3) !important;
    color: var(--bg-color-newlink) !important;
    background: rgba(28, 191, 255, 0.06) !important;
    transition: all 0.2s !important;
}

.input-btn:hover {
    background: var(--bg-color-newlink) !important;
    color: #fff !important;
    border-color: var(--bg-color-newlink) !important;
    box-shadow: 0 2px 12px rgba(28, 191, 255, 0.25);
}

/* Class badges - network class legend */
.mumask {
    margin-top: 2rem !important;
    padding: 16px 0 !important;
}

.mumask .row > div {
    padding: 8px 12px;
}

.class-sub {
    font-size: 10px !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px;
    display: inline-block;
    vertical-align: middle;
}

.class-a { background: rgba(40, 167, 69, 0.85) !important; }
.class-b { background: rgba(255, 193, 7, 0.7) !important; color: #1a1d2e !important; }
.class-c { background: rgba(255, 152, 0, 0.8) !important; }
.class-d { background: rgba(220, 53, 69, 0.8) !important; }
.class-e { background: rgba(108, 117, 125, 0.7) !important; }

/* Result table — the main output */
.result-calculator {
    border: 1px solid rgba(43, 46, 84, 0.4) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
}

.table-responsive table thead.subtitle tr td {
    position: static !important;
    left: auto !important;
    padding: 12px 16px !important;
    border: none !important;
    background: rgba(28, 191, 255, 0.06) !important;
    color: var(--bg-color-newlink) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-family: 'Moderustic', sans-serif !important;
}

.table-responsive table thead td {
    background: rgba(24, 26, 45, 0.9) !important;
    color: var(--text-color-a) !important;
    padding: 10px 12px !important;
    border: 1px solid rgba(43, 46, 84, 0.4) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-weight: 600 !important;
}

.table-responsive table td {
    border-color: rgba(43, 46, 84, 0.3) !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
    transition: background 0.15s !important;
    vertical-align: middle !important;
}

.table-responsive table tbody tr:hover td {
    background: rgba(28, 191, 255, 0.04) !important;
}

/* Pagination — compact, refined */
.pagination {
    gap: 3px !important;
    margin-top: 16px !important;
}

.pagination li .page-link {
    border-radius: 6px !important;
    font-size: 12px !important;
    padding: 5px 10px !important;
    border: 1px solid rgba(43, 46, 84, 0.5) !important;
    background: var(--ip-bg-color) !important;
    color: var(--bg-color-w) !important;
    transition: all 0.15s !important;
    font-weight: 600 !important;
}

.pagination li .page-link:hover {
    background: rgba(28, 191, 255, 0.1) !important;
    border-color: rgba(28, 191, 255, 0.3) !important;
    color: var(--bg-color-newlink) !important;
    box-shadow: 0 2px 8px rgba(28, 191, 255, 0.1) !important;
}

.pagination li.active .page-link {
    background: var(--bg-color-newlink) !important;
    border-color: var(--bg-color-newlink) !important;
    color: #0a1628 !important;
    box-shadow: 0 2px 12px rgba(28, 191, 255, 0.25) !important;
}

/* ===================
   3. TAS-IX PAGE — structured, clean
   =================== */
.tasix-info-box {
    border-radius: 12px !important;
    border: 1px solid rgba(43, 46, 84, 0.4) !important;
    padding: 24px !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

.tasix-info-box::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(135deg, transparent, rgba(28, 191, 255, 0.03));
    pointer-events: none;
}

.tasix-info-box p {
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: var(--bg-color-w) !important;
}

/* Buttons in TAS-IX */
.btn.keyboard-button.btn-sm,
.btn.keyboard-button-green.download,
.btn.keyboard-button.download {
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-size: 11px !important;
    letter-spacing: 0.8px !important;
    font-weight: 700 !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn.keyboard-button.btn-sm:hover,
.btn.keyboard-button-green.download:hover,
.btn.keyboard-button.download:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(28, 191, 255, 0.15);
}

/* List group — provider selector */
.list-group {
    border-radius: 10px !important;
    border: 1px solid rgba(43, 46, 84, 0.4) !important;
    background: rgba(18, 19, 32, 0.6) !important;
}

.list-group-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(43, 46, 84, 0.2) !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    color: var(--bg-color-w) !important;
    cursor: pointer;
    transition: all 0.15s !important;
}

.list-group-item:last-child {
    border-bottom: none !important;
}

.list-group-item:hover {
    background: rgba(28, 191, 255, 0.05) !important;
    color: #fff !important;
}

.list-selected {
    background: rgba(28, 191, 255, 0.1) !important;
    color: var(--bg-color-newlink) !important;
    border-left: 3px solid var(--bg-color-newlink) !important;
}

/* Transfer buttons between lists */
.btn.keyboard-button-green,
.btn.keyboard-button-red {
    border-radius: 8px !important;
    font-size: 11px !important;
    padding: 6px 12px !important;
    letter-spacing: 0.3px !important;
}

/* Config format radios — proper alignment, full bootstrap override */
.form-check {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: auto !important;
    padding-left: 0 !important;
    margin-bottom: 2px !important;
}

.form-check .form-check-input {
    float: none !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
}

.form-check .form-check-label {
    font-size: 13px !important;
    color: var(--bg-color-w) !important;
    cursor: pointer !important;
    line-height: 16px !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
}

.form-check-input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    border: 2px solid rgba(43, 46, 84, 0.6) !important;
    border-radius: 50% !important;
    background: rgba(24, 26, 45, 0.8) !important;
    background-image: none !important;
    cursor: pointer !important;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s !important;
    margin: 0 !important;
    position: relative !important;
    top: 0 !important;
    flex-shrink: 0 !important;
}

.form-check-input[type="radio"]:checked {
    border-color: var(--bg-color-newlink) !important;
    background: var(--bg-color-newlink) !important;
    background-image: none !important;
    box-shadow: inset 0 0 0 3px rgba(18, 19, 32, 0.9) !important;
}

.form-check-input[type="radio"]:hover {
    border-color: rgba(28, 191, 255, 0.4) !important;
}

.form-check-input[type="radio"]:focus {
    box-shadow: inset 0 0 0 3px rgba(18, 19, 32, 0.9), 0 0 0 2px rgba(28, 191, 255, 0.15) !important;
}

.form-check-input[type="radio"]::before,
.form-check-input[type="radio"]::after {
    display: none !important;
}

/* Alert in TAS-IX */
.alert-cidr {
    border-radius: 8px !important;
    border: 1px solid rgba(43, 46, 84, 0.4) !important;
    background: rgba(18, 19, 32, 0.6) !important;
    font-size: 13px !important;
}

/* Form labels */
.form-label {
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--text-color) !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

/* ===================
   4. OFFCANVAS & MODALS — refined
   =================== */
.offcanvas {
    border-left: 1px solid rgba(43, 46, 84, 0.4) !important;
    box-shadow: -12px 0 48px rgba(0, 0, 0, 0.45) !important;
    max-width: 420px;
}

.offcanvas-header {
    border-bottom: 1px solid rgba(43, 46, 84, 0.3) !important;
    padding: 18px 20px !important;
}

.offcanvas-title {
    font-family: 'Moderustic', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    letter-spacing: 0.5px !important;
    color: #fff !important;
}

/* Userinfo cards */
.userinfo {
    background: rgba(18, 19, 32, 0.6) !important;
    border: 1px solid rgba(43, 46, 84, 0.35) !important;
    border-radius: 8px !important;
    transition: border-color 0.2s !important;
    font-size: 13px;
}

.userinfo:hover {
    border-color: rgba(28, 191, 255, 0.15) !important;
}

.usertitle {
    font-family: 'Moderustic', sans-serif !important;
    font-weight: 600 !important;
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
    color: var(--text-color) !important;
    margin-bottom: 10px !important;
    text-transform: uppercase !important;
}

/* Modal */
.modal-content {
    border: 1px solid rgba(43, 46, 84, 0.4) !important;
    border-radius: 14px !important;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55) !important;
    overflow: hidden;
}

.modal-header {
    padding: 18px 24px !important;
    border-bottom: 1px solid rgba(43, 46, 84, 0.3) !important;
}

.modal-title {
    font-family: 'Moderustic', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    letter-spacing: 0.3px !important;
}

.modal-body .title_name {
    background: linear-gradient(135deg, #fcf5c6, #f0e088) !important;
    -webkit-clip-path: none !important;
    clip-path: none !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    font-size: 11px !important;
    letter-spacing: 1.2px !important;
    display: inline-block !important;
    box-shadow: 0 2px 8px rgba(252, 245, 198, 0.08);
}

/* DNS table inside modal */
.modal-body .table-responsive {
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(43, 46, 84, 0.3);
    margin-bottom: 8px;
}

.modal-body .table {
    margin-bottom: 0;
}

.modal-body .table thead td {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    color: var(--text-color);
    background: rgba(24, 26, 45, 0.6);
}

.modal-body .table td {
    font-size: 13px;
    padding: 8px 12px;
    border-color: rgba(43, 46, 84, 0.25);
}

.modal-body .table td a {
    color: var(--bg-color-newlink) !important;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    text-transform: none !important;
}

.modal-body .table td a:hover {
    color: #fff !important;
    text-decoration: underline !important;
}

/* ===================
   5. pageTitle_kx — section header
   =================== */
.pageTitle_kx {
    font-family: 'Moderustic', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: var(--bg-color-w) !important;
    margin-bottom: 16px !important;
    padding-bottom: 10px !important;
    border-bottom: none !important;
    position: relative;
    display: block !important;
}

.pageTitle_kx::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--bg-color-newlink);
    border-radius: 1px;
}

/* ===================
   6. BREADCRUMBS — subtle
   =================== */
.breadcrumb-container {
    padding: 0 !important;
    background: none !important;
    border: none !important;
    backdrop-filter: none !important;
    margin: 16px 0 20px !important;
}

.breadcrumb-item a {
    font-size: 13px !important;
    transition: color 0.15s !important;
}

.breadcrumb-item.active {
    font-size: 13px;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "/" !important;
    font-size: 13px !important;
    color: var(--text-color) !important;
    opacity: 0.5;
}

/* ===================
   7. FOOTER — clean border
   =================== */
.footer {
    border-top: 1px solid rgba(43, 46, 84, 0.35) !important;
}

/* ===================
   8. MRTG CARDS — traffic graphs
   =================== */
.mrtg-card {
    border: 1px solid rgba(43, 46, 84, 0.35) !important;
    border-radius: 10px !important;
    padding: 10px !important;
    background: rgba(18, 19, 32, 0.4) !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.mrtg-card:hover {
    border-color: rgba(28, 191, 255, 0.2) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

.mrtg-card img {
    border-radius: 6px;
}

/* ===================
   9. TOAST NOTIFICATIONS
   =================== */
#toast-container > .toast {
    border-radius: 10px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    font-size: 13px !important;
}

/* ===================
   10. SELECTION & FOCUS
   =================== */
::selection {
    background: rgba(28, 191, 255, 0.2);
    color: #fff;
}

::-moz-selection {
    background: rgba(28, 191, 255, 0.2);
    color: #fff;
}

*:focus-visible {
    outline: 2px solid rgba(28, 191, 255, 0.4);
    outline-offset: 2px;
}

/* ===================
   11. SUBTLE ANIMATIONS
   =================== */
main {
    animation: mainEnter 0.4s ease-out forwards;
}

@keyframes mainEnter {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Header glow line */
body {
    border-top: 2px solid transparent !important;
    border-image: linear-gradient(90deg, transparent 5%, var(--bg-color-newlink) 50%, transparent 95%) 1 !important;
}

/* IP Address hover */
.ip-info .ip-address a {
    transition: color 0.2s, text-shadow 0.3s;
}

.ip-info .ip-address a:hover {
    text-shadow: 0 0 24px rgba(28, 191, 255, 0.2);
    color: var(--bg-color-newlink) !important;
}

/* Copy button */
.copy-btn {
    transition: color 0.15s, transform 0.15s !important;
}

.copy-btn:hover {
    transform: scale(1.12);
}

.copy-btn:active {
    transform: scale(0.9);
}

/* Hostname fade */
.hostname {
    opacity: 0.65;
    transition: opacity 0.2s;
}

.hostname:hover {
    opacity: 1;
}

/* ===================
   12. UNIFIED SPACING & ALIGNMENT
   =================== */

/* Consistent section spacing */
.container > .pageTitle_kx { margin-top: 8px; }

/* Form labels unified — exclude radio labels inside form-check */
.form-label,
label[for]:not(.form-check-label) {
    font-size: 12px !important;
    color: var(--text-color) !important;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
}

/* Icon alignment in cells */
.info-cell-value i,
.form-check-label i,
.ipmenmenu-title i,
.btn i {
    vertical-align: middle;
}

/* Consistent card padding */
.plesk-card,
.handbook-card,
.dns-card,
.info-cell,
.tasix-stat-card {
    padding: 14px !important;
}

/* Consistent border radius — exclude #searchInput */
#mrtg-filter {
    border-radius: 5px !important;
}

/* List group items alignment */
.list-group-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Alert alignment */
.alert-cidr {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Margin top for mobile stacked elements */
@media (max-width: 768px) {
    .margin-top-sm { margin-top: 10px; }
    .net-ip-list { columns: 1 !important; }
    .dns-grid { grid-template-columns: 1fr !important; }
    .info-grid { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}