/* --- Ваши существующие стили --- */
    .server-detail-container {
        max-width: 1000px;
        margin: 20px auto;
        padding: 0 15px;
        font-family: sans-serif;
        color: #333;
    }

    .server-header {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        border-bottom: 2px solid #eee;
        padding-bottom: 10px;
        min-width: 0;
    }

    .server-title {
        margin: 0;
        font-size: 2em;
        color: #333;
        /* --- Добавлены стили для обрезки текста с многоточием --- */
        white-space: nowrap; /* Запрещаем перенос строки */
        overflow: hidden; /* Скрываем текст, который не помещается */
        text-overflow: ellipsis; /* Добавляем многоточие */
        /* --- Конец добавленных стилей --- */
        /* Добавляем min-width: 0; чтобы название могло сжиматься внутри flex-контейнера */
        min-width: 0;
    }

    .status-badge {
        font-size: 0.9em;
        padding: 4px 8px;
        border-radius: 5px;
        margin-left: 15px;
        color: white;
        font-weight: bold;
        flex-shrink: 0; /* Предотвращаем сжатие бейджа статуса */
    }

    .status-online {
        background-color: #28a745;
    }

    .status-offline {
        background-color: #dc3545;
    }

    .server-main-sections {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-bottom: 20px;
    }

    .server-left-column {
        flex: 2;
        min-width: 300px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .server-right-column {
        flex: 1;
        min-width: 250px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .server-graph-section {
        width: 100%;
    }

    .info-box {
        border: 1px solid #ddd;
        border-radius: 5px;
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .info-box-header {
        background-color: #f8f9fa;
        padding: 10px 15px;
        border-bottom: 1px solid #ddd;
        font-weight: bold;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        flex-shrink: 0;
    }

    .info-box-body {
        padding: 15px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .info-box-body p {
        margin-bottom: 10px;
    }

    .info-box-body p:last-child {
        margin-bottom: 0;
    }

     /* Стили для элементов ссылок */
    .server-link-item {
        display: flex; /* Используем flexbox для выравнивания */
        align-items: center; /* Выравниваем элементы по центру по вертикали */
        margin-bottom: 10px; /* Отступ между ссылками */
        font-size: 0.95em; /* Размер текста */
        color: #555; /* Цвет текста по умолчанию для меток */
    }

    .server-link-item i {
        margin-right: 8px; /* Отступ справа от иконки */
        font-size: 1.1em; /* Размер иконки */
    }

    .server-link-item .fa-vk {
    color: #007bff;
    }

    .server-link-item .fa-discord {
    color: #5265F2;
    }


    .server-link-item span {
        font-weight: bold; /* Метка (Сайт:, VK:, Discord:) жирным */
        margin-right: 5px; /* Отступ справа от метки */
    }

    .server-link-item a {
        color: #007bff; /* Цвет ссылки */
        text-decoration: none; /* Убираем подчеркивание */
        word-break: break-all; /* Перенос длинных ссылок */
    }

    .server-link-item a:hover {
        text-decoration: underline; /* Подчеркивание при наведении */
    }

    .message-box {
        padding: 10px 15px;
        border-radius: 4px;
        margin-bottom: 20px;
        border: 1px solid transparent;
    }

    .message-warning {
        color: #856404;
        background-color: #fff3cd;
        border-color: #ffeeba;
    }

    .server-icon {
        width: 64px;
        height: 64px;
        border-radius: 5px;
        margin-right: 15px;
    }

    .motd-content-wrapper {
        display: flex;
        align-items: center;
        flex-grow: 1;
    }

    .motd-content-wrapper .server-icon {
        flex-shrink: 0;
        margin-right: 15px;
        margin-bottom: 0;
    }


    .motd-content {
        flex-grow: 1;
        font-weight: bold;
        word-wrap: break-word;
        overflow: hidden;
        color: #db001c;
    }

    /* CSS для форматирования Minecraft */
    .minecraft-color-black { color: #000000; }
    .minecraft-color-dark_blue { color: #0000AA; }
    .minecraft-color-dark_green { color: #00AA00; }
    .minecraft-color-dark_aqua { color: #00AAAA; }
    .minecraft-color-dark_red { color: #AA0000; }
    .minecraft-color-dark_purple { color: #AA00AA; }
    .minecraft-color-gold { color: #FFAA00; }
    .minecraft-color-gray { color: #AAAAAA; }
    .minecraft-color-dark_gray { color: #555555; }
    .minecraft-color-blue { color: #5555FF; }
    .minecraft-color-green { color: #55FF55; }
    .minecraft-color-aqua { color: #55FFFF; }
    .minecraft-color-red { color: #FF5555; }
    .minecraft-color-light_purple { color: #FF55FF; }
    .minecraft-color-yellow { color: #FFFF55; }
    .minecraft-color-white { color: #FFFFFF; }

    .minecraft-bold { font-weight: bold; }
    .minecraft-italic { font-style: italic; }
    .minecraft-underline { text-decoration: underline; }
    .minecraft-strikethrough { text-decoration: line-through; }
    /* Обфускация (§k) требует JavaScript для динамического изменения текста */
    /* .minecraft-obfuscated {} */


    /* Этот стиль больше не используется для списка игроков, который загружается AJAX'ом */
    /*
    .player-list {
        list-style: none;
        padding: 0;
        margin: 0;
        flex-grow: 1;
        overflow-y: auto;
    }

    .player-list-item {
        padding: 8px 0;
        border-bottom: 1px solid #eee;
    }

    .player-list-item:last-child {
        border-bottom: none;
    }
    */

    .text-muted-small {
        font-size: 0.8em;
        color: #666;
        margin-top: 15px;
        display: block;
    }

    .button-link {
        display: inline-block;
        background-color: #6c757d;
        color: white;
        padding: 10px 15px;
        border-radius: 5px;
        text-decoration: none;
        text-align: center;
        border: none;
        cursor: pointer;
        transition: background-color 0.3s ease;
        width: 100%;
        box-sizing: border-box;
        margin-top: auto;
    }

    .button-link:hover {
        background-color: #5a6268;
    }

    @media (max-width: 768px) {
        .server-main-sections {
            flex-direction: column;
            gap: 0;
        }

        .server-left-column,
        .server-right-column {
            flex: auto;
            min-width: auto;
            gap: 20px;
        }

        .server-header {
            flex-direction: column;
            align-items: flex-start;
            min-width: auto; /* Сбрасываем min-width */
         }

         .server-title {
            margin-bottom: 10px;
            /* --- Адаптивные стили: разрешаем перенос строки на маленьких экранах --- */
            white-space: normal; /* Разрешаем перенос строки */
            overflow: visible; /* Отключаем скрытие */
            text-overflow: clip; /* Отключаем многоточие */
            /* --- Конец адаптивных стилей --- */
            min-width: auto; /* Сбрасываем min-width */
         }

         .status-badge {
            margin-left: 0;
         }

         .info-box {
             margin-bottom: 20px;
         }

         .server-graph-section {
             margin-top: 0;
         }
         /* Адаптивность для ссылок */
         .server-link-item {
             flex-direction: column; /* На маленьких экранах располагаем элементы по вертикали */
             align-items: flex-start; /* Выравниваем по левому краю */
         }
         .server-link-item i,
         .server-link-item span {
             margin-right: 0; /* Убираем правый отступ */
             margin-bottom: 5px; /* Добавляем нижний отступ */
         }
    }
    .time-range-selector {
        text-align: center;
        margin-top: 15px;
    }

    .time-range-selector button {
        padding: 5px 10px;
        margin: 0 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-color: #f8f9fa;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .time-range-selector button:hover {
        background-color: #e9ecef;
    }

    .time-range-selector button.active {
        background-color: #4f9900;
        color: white;
        border-color: #4f9900;
    }

    #player-list-container {
        margin-top: 20px;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        align-items: center;
        border: 1px solid #ddd;
        border-radius: 5px;
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        padding: 15px;
    }

    .player-item {
        display: inline-block;
        position: relative;
    }


    .player-head {
        width: 24px;
        height: 24px;
        image-rendering: pixelated;
        border: 1px solid #ccc;
        border-radius: 4px;
        display: block;
    }

    .pretty-nickname-tooltip {
        display: none;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%) translateY(5px);
        z-index: 10;
        background-color: #333;
        color: #fff;
        padding: 5px 8px;
        border-radius: 4px;
        white-space: nowrap;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        pointer-events: none;
        transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
        opacity: 0;
    }

    .player-item:hover .pretty-nickname-tooltip {
        display: block;
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

    #player-list-container p {
        font-style: italic;
        color: #666;
        margin: 0;
        width: 100%;
        text-align: center;
    }

    .server-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }

    .tag-badge {
			display: inline-block; /* Отображаем как строчно-блочный элемент */
            padding: 4px 8px; /* Внутренние отступы */
            border-radius: 4px; /* Скругленные углы */
            font-size: 0.7em; /* Размер шрифта (немного меньше основного текста) */
            font-weight: bold; /* Жирный шрифт */
            text-transform: uppercase; /* Текст тега в верхнем регистре (опционально) */
            box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* Тень для эффекта объема/поднятия */
            /* Цвет фона и текста задаются инлайн в HTML */
            white-space: nowrap; /* Запрещаем перенос текста внутри тега */
            line-height: 1; /* Убираем лишний межстрочный интервал */
    }

    .comments-section {
        margin-top: 20px;
    }
.button-link_edit-button {
    font-size: 0.9em;
    padding: 8px 12px;
    border-radius: 5px;
    margin-left: 15px;
    color: white;
    font-weight: bold;
    flex-shrink: 0;
    display: inline-block;
    background-color: #ab200d;
    text-decoration: none;
    text-align: center;
    border: none;
    transition: transform 0.3s ease, background-color 0.3s ease;
}
.button-link_edit-button:hover{
    transform: scale(1.05);
    background-color: #bc2610;
}