* {
            box-sizing: border-box;
        }
        /* Обнуляем отступы, чтобы линия прилипла к краям */
        * {
            box-sizing: border-box;
        }
        
        body {
            margin: 0;
            padding: 0;
            background-color: #1a1a1a; /* Темно-серый фон страницы */
            font-family: "Segoe UI", Tahoma, sans-serif;
        }

        .top-nav-line {
            display: flex;
            align-items: center;
            background-color: #000;
            height: 70px;
            padding: 0 20px;
            color: #fff;

            position: fixed;
            top: 0;
            left: 0;

            width: 100%;
            z-index: 9999;

            border-bottom: 1px solid rgba(255,255,255,0.4);
        }

        /* Группа кнопок слева */
        .btn-group {
            display: flex;
            gap: 10px;
            margin-right: 15px;
        }

        /* Квадратные кнопки с белой рамкой */
        .square-btn {
            width: 45px;
            height: 45px;
            border: 2px solid #ffffff;
            border-radius: 10px;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        /* Иконка с рабочего стола */
        /* Обновленный стиль для круглой иконки */
        .app-icon {
            width: 45px;
            height: 45px;
            /* Вот магическая строчка, которая делает иконку круглой */
            border-radius: 50%; 
            margin-right: 15px;
            object-fit: cover; /* Чтобы картинка не растягивалась внутри круга */
            
            /* Опционально: добавляем тонкий белый контур, чтобы иконка выделялась */
            border: 2px solid #ffffff; 
            box-sizing: border-box; /* Чтобы контур не увеличивал размер иконки */
        }

        /* Текст заголовка */
        .brand-name {
            font-size: 32px;
            font-weight: 900;
            margin: 0;
            padding: 0;
            letter-spacing: -1px;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .server-label {
            font-size: 20px;
            font-weight: normal;
            color: #cccccc;
        }

        /* Зеленая точка */
        .status-dot {
            width: 14px;
            height: 14px;
            background-color: #2ecc71;
            border-radius: 50%;
            margin-left: 5px;

            animation: pulse 1.5s infinite;
            
        }
        /* анимация мигания */
        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.9);
                transform: scale(1);
            }

            50% {
                box-shadow: 0 0 10px 6px rgba(46, 204, 113, 0.4);
                transform: scale(1.2);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
                transform: scale(1);
            }
        }

        /* Дата и время (в правой части) */
        .info-right {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 25px;
            font-family: 'Courier New', Courier, monospace;
            font-size: 22px;
            font-weight: bold;
        }

        .time-now {
            color: #f1c40f; /* Желтый/Оранжевый как на скрине */
        }

        .date-now {
            color: #95a5a6;
        }

        /* Группа кнопок справа (поиск и солнце) */
        .actions-right {
            display: flex;
            gap: 10px;
            margin-left: 25px;
        }

        svg {
            fill: white;
            width: 24px;
            height: 24px;
        }

        .divider {
            width: 1px;
            height: 26px;
            background: linear-gradient(
                to bottom,
                transparent,
                rgba(255,255,255,0.4),
                transparent
            );
        }

    .country-absolute {
        position: absolute;

        top: 46px; /* под датой (подгони 50–60px если надо) */

        left: calc(100% - 215px); 
        transform: translateX(-50%);

        font-size: 13px;
        font-weight: 700;
        letter-spacing: 1px;
        text-align: center;
    }

    .ro-blue {
        color: #002B7F;
        text-shadow: 0 0 6px rgba(0, 43, 127, 0.8),
                    0 0 10px rgba(0, 43, 127, 0.6);
    }

    .ro-yellow {
        color: #FCD116;
        text-shadow: 0 0 6px rgba(252, 209, 22, 0.8),
                    0 0 10px rgba(252, 209, 22, 0.6);
    }

    .ro-red {
        color: #CE1126;
        text-shadow: 0 0 6px rgba(206, 17, 38, 0.8),
                    0 0 10px rgba(206, 17, 38, 0.6);
    }

    /* убираем верх */
    .leaflet-top.leaflet-left {
        top: auto !important;
        bottom: 20px !important;
    }

    /* фикс отступа */
    .leaflet-control-zoom {
        margin: 0 0 0 20px !important;
    }

    .colon {
        animation: blink 1s infinite;
    }

    @keyframes blink {
        0%   { opacity: 1; }
        50%  { opacity: 0; }
        100% { opacity: 1; }
    }
    .time-now {
        display: flex;
        align-items: center;
        gap: 0;
        }
        .clickable-logo:hover {
        transform: scale(1.05);
    }

    .clickable-logo:active {
        transform: scale(0.9);
        filter: brightness(0.8);
    }

    .square-btn svg {
        transition: transform 0.15s ease;
    }

    .square-btn:hover svg {
        transform: scale(1.25);
    }

    .square-btn:active svg {
        transform: scale(0.85);
    }