/* <!-- THE WOW FACTOR CSS (Перехват управления стилями) -->*/

:root {
    --rig-bg: #252930;
    --oled-bg: #0d121a;
    --led-yellow: #ffb703;
    --led-green: #00ff41;
    --led-red: #ff003c;
    --btn-top: #363b42;
    --btn-bottom: #292e36;
}

body {
    background-color: #283240;
    background-image: linear-gradient(rgba(0, 240, 255, 0.04) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(0, 240, 255, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    font-family: 'Rajdhani', 'Exo 2', sans-serif, monospace;
    color: #b0b5ba;
    margin: 0;
    padding-bottom: 50px;
}

.text-red{color:red!important}
.text-darkred{color:#c00!important}
.text-lightgreen{color:#8fffad!important}
.text-darkgreen{color:#007f00!important}
.text-blue{color:#aab2d8!important}
.text-lightblue{color:#dde3ff!important}
.text-darkblue{color:#60678b!important}
.text-yellow{color:#ffb703!important}
.text-darkorange{color:#c19d38}
.text-maroon{color:#a2071a}
.text-purple{color:#cc09ad}
.text-navy{color:navy}
.text-black{color:#000!important}
.text-grey{color:#ccc!important}
.text-darkgrey{color:#999!important}
.text-white{color:#fff!important}
.text-green  { color: #00ff41 !important; text-shadow: 0 0 4px rgba(0,255,65,0.2); }
.text-lime   { color: #a3e635 !important;}
/*.text-yellow { color: #fde047 !important; }*/
.text-orange { color: #fb923c !important; }
.text-cyan { color: #58a6ff !important; }

/* Основной корпус приёмника (подложка для всего контента) */
#wrapper {
    max-width: 1080px;
    margin: 10px auto;
    padding: 10px 4px;
    background: rgba(38, 45, 56, 1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8), inset 0 1px 2px rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
    overflow: hidden;
}

#wrapper .container {
    max-width: 100%;
    padding-left: 6px;
    padding-right: 6px;
}

a {
    color: #58a6ff;
    text-decoration: none;
}

a:hover {
    color: #fff;
}

/* НАВБАР — стилизация родных классов Bootstrap */
/* Ограничиваем ширину контента навбара, чтобы он не разбегался */
.navbar.navbar-dark .container {
    max-width: 1080px;
}
.navbar.navbar-dark {
    background: #0a0d13 !important;
    border-bottom: 2px solid #2a2e35 !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.9) !important;
    position: relative;
    z-index: 10;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-radius: 0 !important;
}

.navbar-dark .navbar-brand {
    font-family: 'Rajdhani', 'Exo 2', sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: 1px;
    color: #ffffff !important;
    text-transform: uppercase;
    transition: color 0.2s;
}

.navbar-dark .navbar-brand:hover {
    color: #ffb703 !important;
}

.navbar-dark .navbar-nav .nav-link {
    font-family: 'Rajdhani', 'Exo 2', 'Share Tech Mono', sans-serif, monospace;
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #b0b5ba !important;
    padding: 0.5rem 0.9rem !important;
    transition: all 0.15s ease;
    /* Плавная анимация */
    border-radius: 2px;
    /* Родное скругление из твоих стилей */
    border-bottom: 2px solid transparent;
    /* Резервируем место для жёлтой линии */
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: #ffb703 !important;
    background: transparent;
    /* Убираем серый фон */
    border-bottom: 2px solid #ffb703;
    /* Жёлтое подчёркивание снизу */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    /* Лёгкая тень для объёма */
}

.navbar-dark .navbar-nav .nav-link i {
    margin-right: 5px;
}

/* --- СТИЛИЗАЦИЯ ИНПУТА ВВОДА НИКНЕЙМА (USERNAME) В NAVBAR --- */
#please input[name="username"],
#please #visited,
#please #time {
    background-color: #181f2a !important; /* Тот же оттенок темного графита */
    border: 1px solid #3c4858 !important; /* Четкая рамка прибора */
    border-radius: 4px !important;
    color: #ffb703 !important; /* Светящийся янтарный цвет вашего позывного */
    font-family: 'Rajdhani', 'Exo 2', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 4px 10px !important;
    height: 28px !important; /* Аккуратная высота для навбара */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.8) !important;
    transition: all 0.2s ease-in-out;
}

/* Состояние фокуса (ввода текста) для никнейма */
#please input[name="username"]:focus,
#please #visited:focus,
#please #time:focus {
    outline: none !important;
    border-color: #58a6ff !important; /* Голубая подсветка при вводе */
    color: #fff !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.8), 0 0 5px rgba(88, 166, 255, 0.3) !important;
}

/* =====================================================
   АККОРДЕОНЫ — АППАРАТНЫЙ СТИЛЬ (СИММЕТРИЧНЫЕ СТРЕЛКИ)
   ===================================================== */

/* 1. ГЛОБАЛЬНЫЙ ФИКС ПОДЛОЖКИ (Убиваем рамки Bootstrap) */
.accordion .card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}
.accordion .card-body {
    background: transparent !important;
    border: none !important;
    /* Если внутри есть отступы, которые ломают дизайн, можно добавить padding: 0 !important; */
}

/* 2. КНОПКА АККОРДЕОНА (Панель-заглушка) */
.accordion-button-custom {
    font-family: 'Rajdhani', 'Exo 2', 'Share Tech Mono', sans-serif, monospace;
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    background: linear-gradient(180deg, #2b333e 0%, #1f252e 100%); /* Эффект выпуклого металла */
    border: 1px solid #30363d;
    border-radius: 6px; /* Закругляем как отдельный модуль */
    color: #8b949e;
    transition: all 0.2s ease;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 4px 6px rgba(0,0,0,0.3); /* Тень от плашки */
    padding: 10px 30px;
    margin-bottom: 4px; /* Отступ от контента, если он закрыт */
    width: 100%;
}

/* Наведение на кнопку */
.accordion-button-custom:hover {
    background: linear-gradient(180deg, #2a313c 0%, #1c212a 100%);
    color: #c9d1d9;
    border-color: #484f58;
}

/* 3. ОТКРЫТОЕ СОСТОЯНИЕ (Бесшовное слияние с контентом) */
.accordion-button-custom:not(.collapsed) {
    background: #1a1d22; /* Кнопка визуально "вдавливается" */
    color: #ffb703;
    border-color: #30363d;
    border-bottom-color: transparent; /* Убираем нижнюю грань, чтобы слиться с блоком */
    border-radius: 6px 6px 0 0; /* Убираем нижние закругления */
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.8); /* Внутренняя тень нажатия */
    margin-bottom: 0; /* Прилипает вплотную к открывшемуся контенту */
}

/* =====================================================
   СТРЕЛКИ (Симметричные)
   ===================================================== */
.accordion-button-custom .accordion-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 14px;
    color: #484f58; /* Темные стрелки в спокойном состоянии */
}

.accordion-button-custom .accordion-arrow-left { left: 15px; }
.accordion-button-custom .accordion-arrow-right { right: 15px; }

/* Поворот и свечение при открытии */
.accordion-button-custom:not(.collapsed) .accordion-arrow-left,
.accordion-button-custom:not(.collapsed) .accordion-arrow-right {
    transform: translateY(-50%) rotate(180deg);
    color: #ffb703;
    text-shadow: 0 0 8px rgba(255, 183, 3, 0.5); /* Легкое свечение */
}

/* Наведение на закрытую кнопку (подсветка стрелок) */
.accordion-button-custom:hover .accordion-arrow-left,
.accordion-button-custom:hover .accordion-arrow-right {
    color: #8b949e;
}

html {
    scroll-behavior: smooth; /* Включает мягкую и плавную прокрутку по якорям */
}

/* ============================================================
   WebSDR Pro Info Panel (Hardware Dashboard Style) Info msg 
   ============================================================ */
/* Главная обертка аккордеона */
.wsdr-hw-card {
    background: #1a1e24;
    border: 1px solid #30363d;
    border-radius: 6px;
    overflow: hidden;
}

/* Кнопка открытия/закрытия аккордеона */
.wsdr-hw-accordion-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: #1e242c;
    color: #c9d1d9;
    font-family: 'Rajdhani', 'Exo 2', sans-serif, 'Share Tech Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 10px;
    border: none;
    border-bottom: 1px solid #101216;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    transition: 0.2s ease;
}
.wsdr-hw-accordion-btn:hover { background: #262d36; color: #fff; }
.wsdr-hw-accordion-btn:not(.collapsed) {
    background: #202630;
    color: #58a6ff;
    border-bottom: 1px solid #30363d;
}
.wsdr-hw-accordion-btn i { font-size: 14px; }
.wsdr-hw-accordion-btn .accordion-arrow { transition: transform 0.3s; }
.wsdr-hw-accordion-btn:not(.collapsed) .accordion-arrow { transform: rotate(180deg); }

/* Внутреннее тело аккордеона */
.wsdr-hw-body {
    padding: 15px;
    background: #151921;
}

/* =====================================
   1. LCD Панель (Табло сверху)
   ===================================== */
.wsdr-lcd-panel {
    background: #12161f;
    border: 1px solid #21262d;
    border-radius: 4px;
    padding: 8px 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.05);
}
.wsdr-lcd-panel > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.lcd-icon { color: #484f58; font-size: 12px; }
.lcd-label { font-family: 'Rajdhani', 'Exo 2', sans-serif, 'Share Tech Mono', monospace; font-size: 13px; color: #6e7681; text-transform: uppercase; }
.lcd-value { font-family: 'Rajdhani', 'Exo 2', sans-serif, 'Share Tech Mono', monospace; font-size: 13px; font-weight: bold; color: #c9d1d9; }
.lcd-divider { display: inline-block; width: 1px; height: 13px; background: #21262d; margin: 0 5px; }

/* Жесткая фиксация ширины для часов, чтобы не толкали соседние элементы */
#clock24_2 {
    display: inline-block;
    min-width: 52px; /* Фиксируем ширину под формат 00:00:00 */
    text-align: justify-all;
}

#clock24_1 {
    display: inline-block;
    min-width: 34px; /* Фиксируем ширину под формат 00:00 */
    text-align: center;
}

/* Фиксируем ширину для дистанции, так как она тоже может меняться */
#dist1 {
    display: inline-block;
    min-width: 32px;
    text-align: right;
}

/* =====================================
   2. Аппаратные модули (Блоки)
   ===================================== */
.wsdr-module {
    background: #202630;
    border: 1px solid #30363d;
    border-radius: 6px;
    padding: 6px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
}
.module-title {
    font-family: 'Rajdhani', 'Exo 2', sans-serif, 'Share Tech Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    color: #6e7681;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1px;
    border-bottom: 1px solid #21262d;
    padding-bottom: 10px;
}
.hardware-text {font-family: 'Rajdhani', 'Exo 2', sans-serif, 'Share Tech Mono', monospace; font-size: 16px; text-align: center;}

/* Статистика (цифры) */
.stats-grid { display: flex; justify-content: space-around; align-items: center; }
.stat-box { display: row; gap: 8px; flex-direction: column; align-items: center; justify-content: center; background: #12171f; padding: 6px 12px; border-radius: 4px; border: 1px solid #21262d; box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); min-width: 60px; }
.stat-box i { font-size: 14px; margin-bottom: 0px; }
.stat-num { font-family: 'Rajdhani', 'Exo 2', sans-serif, 'Share Tech Mono', monospace; font-size: 16px; font-weight: bold; color: #fff; }

/* Системные логи (строки обновы и аптайма) */
.sys-log-text { font-family: 'Rajdhani', 'Exo 2', sans-serif, 'Share Tech Mono', monospace; font-size: 11px; color: #6e7681; }

/* =====================================
   4. Картинка прогноза (Жесткая фиксация)
   ===================================== */
.forecast-card { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.forecast-link { display: block; width: 100%; text-align: center; }
.forecast-img {
    max-width: 100%; /* Никогда не вылезет за рамки */
    height: auto;
    border-radius: 4px;
    border: 1px solid #30363d;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    filter: brightness(0.85) contrast(1.1); /* Слегка приглушаем яркость картинки, чтобы не била по глазам на темном фоне */
    transition: filter 0.2s;
}
.forecast-img:hover { filter: brightness(1) contrast(1.1); }

/* =====================================
   5. Экшен кнопки (Журнал, Мобильная)
   ===================================== */
.wsdr-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #232830;
    color: #c9d1d9;
    text-decoration: none;
    font-family: 'Rajdhani', 'Exo 2', sans-serif, 'Share Tech Mono', monospace;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #3b424a;
    border-bottom: 2px solid #101216;
    transition: 0.1s;
}
.wsdr-action-btn:hover { background: #2d333b; color: #fff; border-color: #58a6ff; text-decoration: none; }

/* Блок Доната */
.wsdr-donate-panel {
    background: #202630;
    border: 1px dashed #30363d;
    border-radius: 4px;
}
.donate-iframe-wrapper iframe {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

/* ============================================================
   WebSDR Pro Interface Controls (Custom Isolated Styles) HTML5 Settings 
   ============================================================ */

/* Главная панель: держит всё в одной строке, разрешает скролл на мобилках */
/* 1. Убираем скролл, разрешаем мягкий перенос целых групп и центрируем */
.wsdr-panel {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: hidden;         /* Убираем скролл */
    justify-content: center;    /* Центрируем для красоты */
    gap: 12px;                   /* Уменьшили расстояние между группами с 12px до 6px */
    padding: 2px 0;
    margin: 0;
}

/* Скрываем стандартные инпуты браузера навсегда */
.wsdr-hidden-input {
    display: none !important;
}

/* Динамические области JS — чтобы они работали как Flex-контейнеры тоже */
/* 2. Уменьшаем дыры между секциями, которые грузит JS */
.wsdr-dynamic-area {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap; 
    justify-content: center;
    gap: 10px; /* Было 12px */
}
/* Группа кнопок (Темная подложка, как рамка на панели аппарата) */
.wsdr-group {
    display: inline-flex;
    align-items: center;
/*    background: #171b21;*/
/*    border: 1px solid #232830;*/
    border-radius: 6px;
    padding: 3px 4px;
/*    box-shadow: inset 0 2px 4px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.05);*/
}

/* Заголовок группы (Водопад, Звук, Вид) */
/* 4. Сужаем текст заголовков (Водопад, Звук, Вид) */
.wsdr-group-title {
    font-family: 'Rajdhani', 'Exo 2', sans-serif, 'Share Tech Mono', monospace;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    color: #6a7c92;
    padding: 0 8px;        /* Сузили с 8px до 4px */
    letter-spacing: 1px;/* Слегка уплотнили буквы */
    user-select: none;
}

/* === БАЗОВЫЙ СТИЛЬ КНОПОК === */
/* 3. Делаем кнопки более компактными */
.wsdr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #252b34;
    color: #9cb1c6;
    font-family: 'Rajdhani', 'Exo 2', sans-serif, 'Share Tech Mono', monospace;
    font-size: 11px;       /* Уменьшили шрифт на 1px */
    font-weight: 600;
    text-transform: uppercase;
    padding: 5px 12px;      /* Сузили отступы внутри кнопки (было 5px 12px) */
    margin: 0 5px;         /* Прижали кнопки плотнее друг к другу */
    border-radius: 4px;
    border: 1px solid #323945;
    border-bottom: 2px solid #1a1e24;
    cursor: pointer;
    transition: all 0.1s ease;
    user-select: none;
    white-space: nowrap;
}

/* Ховер (наведение) */
.wsdr-btn:hover {
    background: #2c333e;
    color: #ffffff;
    border-color: #454f5f;
}

/* === НАЖАТОЕ / АКТИВНОЕ СОСТОЯНИЕ === */
/* Кнопка "вдавливается" и меняет цвет */
.wsdr-hidden-input:checked + .wsdr-btn {
    background: #1e334a;          /* Приятный приглушенный синий */
    color: #8ab4f8;               /* Светло-голубой текст */
    border: 1px solid #284b72;
    border-bottom: 1px solid #1a2533;
    border-top: 2px solid #0f1824; /* Имитация тени от вдавливания */
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.4);
}

/* === КНОПКА ДЕЙСТВИЯ (Start Audio) === */
.wsdr-btn-action {
    background: #263c30; /* Матовый зеленый оттенок */
    color: #a4ceb5;
    border-color: #315240;
    border-bottom: 2px solid #16241c;
    margin-left: 6px;
}
.wsdr-btn-action:hover {
    background: #314d3e;
    color: #ffffff;
}
.wsdr-btn-action:active {
    border-bottom: 1px solid #16241c;
    border-top: 2px solid #0c1510;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.4);
}

/* === ОСОБЫЙ СТИЛЬ ДЛЯ ЧЕКБОКСА HIDE LABELS === */
/* Создаем кастомный светодиодный индикатор вместо галочки */
.wsdr-led {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1b1e24;
    margin-right: 8px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.8);
    transition: all 0.2s;
}

/* Когда HIDE LABELS включен - зажигаем желтый "светодиод" */
.wsdr-hidden-input:checked + .wsdr-btn-checkbox .wsdr-led {
    background: #ffb700;
    box-shadow: 0 0 6px #ffb700, inset 0 1px 2px #fff;
}

/* Сохраняем фон самой кнопки HIDE LABELS базовым даже при включении */
.wsdr-hidden-input:checked + .wsdr-btn-checkbox {
    background: #252b34;
    color: #ffffff;
    border: 1px solid #323945;
    border-bottom: 2px solid #1a1e24;
    border-top: 1px solid #323945;
    box-shadow: none;
}

/* Скрываем скроллбар (опционально, для красоты), но оставляем возможность скроллить пальцем/мышью */
.wsdr-panel::-webkit-scrollbar {
    height: 6px;
}
.wsdr-panel::-webkit-scrollbar-thumb {
    background-color: #323945;
    border-radius: 4px;
}

/* ГЛАВНАЯ ПАНЕЛЬ ТРАНСИВЕРА */
.rig-container {
    background: var(--rig-bg);
    /* Чёткая внутренняя обводка */
    border-radius: 6px !important;
    /* Фаски: тёмные - тень, светлые - освещённая грань ниши */
    border-top: 3px solid #0c0f14;
    border-left: 3px solid #0c0f14;
    border-bottom: 3px solid #2c313a;
    border-right: 3px solid #2c313a;
    /* Только внутренние тени – глубина + лёгкий блик на нижней грани */
    box-shadow: 
        inset 0 0 0 1px #00000066,            /* стык с корпусом */
        inset 0 4px 12px rgba(0, 0, 0, 0.8), /* основная глубина сверху */
        inset 0 -1px 4px rgba(255, 255, 255, 0.05); /* блик снизу */
    padding: 10px;
    margin-bottom: 6px;
}

/* ==========================================================================
   ULTIMATE PRO SDR COCKPIT (V-FINAL: EXACT LAYOUT)
   ========================================================================== */

/* Основной монитор */
.pro-sdr-monitor {
    background: rgba(15, 23, 36, 0.5);
    /* Фаски без изменений — они правильные */
    border-top: 3px solid #0c0f14;    /* тень */
    border-left: 3px solid #0c0f14;
    border-bottom: 3px solid #2c313a; /* свет */
    border-right: 3px solid #2c313a;
    border-radius: 6px;
    /*
     * ПАТЧ: Внешняя тень удалена, вместо неё добавлена внутренняя
     * светлая подсветка снизу, имитирующая отражение от нижней грани ниши.
     * Это сохраняет эффект вдавленности по всему периметру.
     */
    box-shadow:
        inset 0 0 0 1px #00000066,            /* стык с корпусом */
        inset 0 2px 10px rgba(0, 0, 0, 0.8), /* глубина сверху */
        inset 0 -1px 4px rgba(255, 255, 255, 0.05), /* лёгкий отсвет снизу */
        0 0 0 1px #1e232b;                     /* внешняя обводка (без тени) */
    padding: 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

/* Свечение внутри дисплея – имитация свечения экрана */
.pro-sdr-monitor::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    border-radius: 8px;
    background: radial-gradient(circle at 50% 10%, rgba(0, 255, 255, 0.05), transparent 90%);
    z-index: 3;
}

/* Строки развёртки */
.pro-sdr-monitor::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(0deg, rgba(0,0,0,0.2) 0px, rgba(0,0,0,0.2) 1px, transparent 1px, transparent 2px);
    pointer-events: none;
    z-index: 2;
}

/* Защита контента от блика */
.pro-content-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* ==========================================================================
   PRO COCKPIT (V-MODULAR HARDWARE EDITION) - CSS ARCHITECTURE
   ========================================================================== */

/* Общий стиль для физических модулей панели (Вдавленные рамки) */
.pro-module-box {
    background: rgba(15, 23, 36, 0.5);
    border: 1px solid #1a2433;
    border-radius: 4px;
    padding: 6px 8px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Анти-прыжок для обычных цифр (Бейджи, телеметрия) */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* === СЕТКА ВЕРХНЕГО ЭТАЖА === */
.pro-top-modules {
    display: grid;
    grid-template-columns: min-content 1fr 330px; /* Лево под контент, Центр тянется, Право фиксировано */
    gap: 6px;
    margin-bottom: 2px;
    align-items: stretch;
}

/* 1. Блок радио данных (Лево) */
.pro-info-module {
    min-width: 160px;
}
.pro-badges-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 2. Блок Ядра (Центр - Частота) */
.pro-core-module {
    padding: 8px 8px;
}

.pro-sys-leds {
    display: flex;
    gap: 6px;
}
#points.sdr-digits { min-width: 75px; } /* Фиксация ширины бейджа S-метра */

/* === МАГИЯ АНТИ-ДЖИТТЕРА ЧАСТОТЫ === */
.pro-giant-freq {
    display: flex;
    align-items: baseline;
    justify-content: center;
    /* ИСПОЛЬЗУЕМ МОНОШИРИННЫЙ ШРИФТ ДЛЯ АБСОЛЮТНОЙ СТАБИЛЬНОСТИ */
    font-family: 'Rajdhani', 'Share Tech Mono', 'Exo 2', monospace, sans-serif; 
    color: #ffb703;
    text-shadow: 0 0 15px rgba(255, 183, 3, 0.5);
    line-height: 1;
    border-bottom: 1px dashed #283240;
}

/* Жестко фиксируем ширину каждого блока цифр */
.freq-part { text-align: right; }
.freq-part span { font-weight: 700; letter-spacing: -1px; }

.w-large { width: 150px; font-size: 4.7rem; }  /* Под МГц (например, 28 или 145) */
.w-med   { width: 100px; font-size: 4.1rem; }   /* Под кГц (например, 500) */
.w-sml   { width: 70px; font-size: 2.9rem; color: #8a8f9a; text-shadow: none; } /* Под Гц */

.freq-dot { font-size: 3rem; color: #cc9100; margin: 0 5px; }
.freq-unit { font-family: 'Rajdhani', 'Share Tech Mono', sans-serif; text-shadow: none; font-size: 2rem; color: #666; font-weight: bold; margin-left: 18px; }

/* 3. Блок RF Metering (Право) */
/* (Стили кубиков и подписей остались твои старые, они не требуют изменений) */
/* === БЛОК ЧАСТОТЫ И VFO A === */

/* === РЯД MODE И DSP (Без рамок, под частотой) === */
.pro-modes-dsp-row {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 14px; /* Воздух между частотой и лампами */
}
.pro-lamp-group {
    display: flex;
    gap: 13px;
}
/* Тонкая разделительная полоска между MODE и DSP */
.pro-lamp-divider {
    width: 2px;
    height: 18px;
    background: #2a3441;
    margin: 0 16px;
}

/* === ТЕЛЕМЕТРИЯ (Над и под S-метром) === */
/* === БЛОК ЧАСТОТЫ И VFO A (Исправленный) === */
.pro-core-status {
    display: flex;
    justify-content: space-between; /* Лампы налево, VFO A направо! */
    align-items: center;
    border-bottom: 1px dashed #283240;
    padding-bottom: 10px;
    margin-bottom: 6px;
}

.pro-status-badges-group {
    display: flex;
    align-items: center;
    gap: 6px; /* Расстояние между бейджами ANT 1, ANT 2 и VFO A */
}

/* ================= ИНДИВИДУАЛЬНЫЕ СТИЛИ ПОЛОСКИ S-МЕТРА ================= */
#smeterbar, #smeterpeak {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    transition: width 0.05s linear;
}

/* Основная быстрая полоса (Белая, слой ВЫШЕ) */
#smeterbar {
    background: #6a7382;
    box-shadow: 0 0 4px rgba(255,255,255,0.8);
    z-index: 2;
}

/* Медленный пик (Красный, прячется ЗА белой полосой) */
#smeterpeak {
    background: #ff003c;
    box-shadow: 0 0 6px #ff003c;
    z-index: 1;
    transition: width 0.2s linear;
}

/* ==========================================================================
   PRO SPLIT BADGES (МОДУЛЬ РАДИО ДАННЫХ)
   ========================================================================== */

/* Главный контейнер разделенного бейджа */
.pro-split-badge {
    display: flex;
    align-items: stretch; /* Растягиваем половинки на одинаковую высоту */
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid #1d2633; /* Общая голубая рамка */
    border-radius: 3px;
    overflow: hidden; /* Чтобы углы не торчали */
    height: 30px; /* Фиксированная высота для строгости */
    padding: 2px;
}

/* Левая часть: Заголовок (Залитая цветом) */
.badge-lbl {
    background: #1d2633;
    color: #4a5c58; /* Чёрный текст для максимального контраста */
    font-family: 'Rajdhani', 'Exo 2', sans-serif;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    padding: 0 6px;
    min-width: 48px; /* Одинаковая ширина для всех заголовков (выравнивает правый блок) */
    justify-content: center;
}

/* Правая часть: Данные (Прижаты вправо) */
.badge-data {
    display: flex;
    flex: 1; /* Занимает всё оставшееся место */
    justify-content: flex-end; /* Прижимаем контент к правому краю */
    align-items: center;
    padding: 0 6px;
}

/* Настройка самих цифр (Анти-джиттер) */
.badge-data .data-val {
    font-family: 'Share Tech Mono', monospace; /* Моноширинный шрифт */
    font-size: 13px;
    text-align: right;
    /* Задаем мин. ширину, чтобы цифры не двигали юниты */
    min-width: 40px; 
}

/* Настройка новых изолированных юнитов (kHz, k) */
.badge-data .badge-unit {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    color: #6a7382;
    margin-left: 2px;
    text-align: right;
    width: 22px; /* Фиксируем ширину юнита, чтобы он не схлопывался */
    display: inline-block;
}

/* ==========================================================================
   PRO RF METERING (Шкала, Рисочки, Трехцветные кубики)
   ========================================================================== */
/* === БЛОК RF METERING И ТЕЛЕМЕТРИЯ (Новый элегантный вид) === */
.pro-meter-top-title {
    font-family: 'Rajdhani', 'Exo 2', sans-serif;
    font-size: 11px;
    color: #58a6ff;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: left; /* Строго влево */
    margin-bottom: 10px;
}

.pro-tel-row {
    display: flex;
    justify-content: center; /* Центрируем параметры, не размазываем по краям */
    gap: 55px; /* Красивый зазор между параметрами (например LEVEL и PEAK) */
    align-items: baseline;
    margin: 6px 0; /* Просто воздух сверху и снизу, без заливки фоном! */
}

.pro-meter-overload-row {
    display: flex;
    justify-content: flex-end; /* OVERLOAD прижимаем вправо над кубиками */
    margin-bottom: 6px;
}

.pro-tel-inline {
    display: flex;
    align-items: baseline;
}
/* Жёсткая фиксация ширин (Анти-джиттер) */
.pro-tel-lbl {
    font-family: 'Rajdhani', sans-serif, 'Share Tech Mono', monospace; font-size: 13px; color: #6a7382; font-weight: 700;
    width: 10px; /* Фикс ширина для подписи */
}
.pro-tel-val {
    font-family: 'Rajdhani', sans-serif, 'Share Tech Mono', monospace; font-size: 13px; text-align: right;
    min-width: 65px; /* Фикс ширина для значений (-100.0) */
    display: inline-block;
}
.pro-tel-unit {
    font-family: 'Rajdhani', sans-serif, 'Share Tech Mono', monospace; font-size: 11px; color: #6a7382; margin-left: 4px;
    width: 35px; /* Фикс ширина для dBm */
}

.overload-badge {
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 2px;
}

/* Контейнер дисплея S-метра (выравнивает подписи, риски и кубики по сетке) */
.pro-meter-display {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
}

/* Общие настройки для строк S-метра */
.pro-meter-labels, .pro-meter-ticks, .pro-meter-cubes {
    display: flex;
    justify-content: space-between;
    gap: 5px;
}

/* 1. ПОДПИСИ (1, 3, 5, 7, 9, +10...) */
.pro-meter-labels span {
    flex: 1;
    text-align: center;
    font-family: 'Rajdhani', 'Exo 2', sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: #6a7382;
}
.pro-meter-labels span.red { color: #ff003c; }
.pro-meter-labels span.text-yellow { color: #ffb703; }

/* 2. РИСОЧКИ (Засечки шкалы как в трансиверах) */
.pro-meter-ticks i {
    flex: 1;
    height: 6px;
    background: #6a7382;
    position: relative;
    /* Делаем рисочки тоненькими по центру */
    clip-path: polygon(45% 0, 55% 0, 55% 100%, 45% 100%);
}
.pro-meter-ticks i.short { height: 3px; margin-top: 2px; } /* Промежуточные деления короче */
.pro-meter-ticks i.yellow { background: #ffb703; }
.pro-meter-ticks i.red { background: #ff003c; }

/* 3. КУБИКИ */
.sm-cube {
    flex: 1;
    height: 12px;
    border-radius: 2px;
    border: 1px solid rgba(0,0,0,0.8);
    transition: background 0.05s, box-shadow 0.05s;
}

/* Выключенный кубик */
.sm-cube.is-off {
    background: #121a12;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.8);
}

/* Включенный ЗЕЛЕНЫЙ (S1 - S7) */
.sm-cube.is-on-green {
    background: #00ff41 !important; 
    box-shadow: 0 0 8px #00ff41, inset 0 0 2px #fff !important; 
    border-color: #00ff41 !important; 
}

/* Включенный ЖЕЛТЫЙ (S8 - S9) */
.sm-cube.is-on-yellow {
    background: #ffb703 !important; 
    box-shadow: 0 0 8px #ffb703, inset 0 0 2px #fff !important; 
    border-color: #ffb703 !important; 
}

/* Включенный КРАСНЫЙ (+10 и выше) */
.sm-cube.is-on-red {
    background: #ff003c !important; 
    box-shadow: 0 0 8px #ff003c, inset 0 0 2px #fff !important; 
    border-color: #ff003c !important; 
}

/* ==========================================================================
   PRO COCKPIT LAYOUT (Hardware Style)
   ========================================================================== */

.pro-vfo-badge {
    background: #ffb703;
    color: #000;
    font-family: 'Rajdhani', 'Exo 2', sans-serif;
    font-size: 12px;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 3px;
    letter-spacing: 1px;
    box-shadow: 0 0 10px rgba(255, 183, 3, 0.4);
}
.pro-ant-badge {
    background: #58a6ff;
    color: #000;
    font-family: 'Rajdhani', 'Exo 2', sans-serif;
    font-size: 12px;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 3px;
    letter-spacing: 1px;
    box-shadow: 0 0 10px rgba(255, 183, 3, 0.4);
}

.pro-ant-badge.off {
    background: #05080b;
    color: #4a5c58;
    border: 1px solid #1d2633;
    box-shadow: none; /* убираем жёлтое свечение */
}

/* ================= СТИЛИ ДЛЯ ЛАМПОЧЕК (ДЛЯ JS) ================= */
.sdr-digits {
    font-family: 'Rajdhani', 'Exo 2', sans-serif;
    font-weight: 600;
    font-size: 11px;
    text-align: center;
    padding: 3px 8px;
    border: 1px solid transparent;
    border-radius: 2px;
    transition: all 0.1s ease;
}
.digit_off, .digit-off, .digit-off-o, .digit-off-rx, .is-off {
    color: #4a5c58 !important; background: #05080b !important; border-color: #1d2633 !important;
}
.digit_on, .digit_on_sql, .digit-on-o, .digit-on-rx, .is-on {
    color: #00ff41 !important; background: rgba(0, 255, 65, 0.1) !important;
    border-color: #00ff41 !important; text-shadow: 0 0 6px #00ff41 !important;
    box-shadow: inset 0 0 5px rgba(0,255,65,0.3);
}
.digit_on_red, #rec_info[class*="on"], #rec_info[class*="active"], .digit-plus-rx {
    color: #ff003c !important; background: rgba(255, 0, 60, 0.1) !important;
    border-color: #ff003c !important; text-shadow: 0 0 6px #ff003c !important;
    box-shadow: inset 0 0 5px rgba(255,0,60,0.3);
}
.digit_on_mute {
    color: #ff4444 !important; background: rgba(255, 0, 0, 0.15) !important;
    border-color: #ff4444 !important; text-shadow: 0 0 6px #ff0000 !important;
    animation: muteBlink 1.5s infinite;
}
@keyframes muteBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

/* КНОПКИ УПРАВЛЕНИЯ (Перехват) */
.btn-set,
.btn-mods,
.btn-step,
.checkbox-button {
    background: linear-gradient(180deg, var(--btn-top) 0%, var(--btn-bottom) 100%);
    border: 1px solid #1b1e24 !important;
    border-top-color: #444 !important;
    border-radius: 3px !important;
    color: #aaa;
    cursor: pointer;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.4);
    text-shadow: 0 -1px 0 #000;
    padding: 6px 10px;
    width: 100%;
}

.btn-set:hover,
.btn-mods:hover,
.btn-step:hover,
.checkbox-button:hover {
    color: #fff;
    background: linear-gradient(180deg, #424852 0%, #262a30 100%);
}

/* Нажатая кнопка */
.btn-set:active,
.btn-mods:active,
.btn-step:active,
.btn-set.active,
.btn-mods.active {
    background: #1b1e24 !important;
    border-top-color: #000 !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.9) !important;
    color: var(--led-yellow) !important;
}

/* ЧЕКБОКСЫ В ВИДЕ КНОПОК */
.custom-checkbox {
    display: none;
}

.custom-checkbox:checked + .checkbox-button {
    background: #1b1e24 !important;
    border-top-color: #000 !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.9) !important;
    color: var(--led-yellow) !important;
}

/* ВОДОПАД (Сохраняем механику websdr-base) */

/* deff css */
 /* =====================================================
   УТОПЛЕННОСТЬ ВОДОПАДА (EFFECT: RECESSED DISPLAY)
   ===================================================== */

.users-bg {
    position: relative;
}

/* --------------------------------------------------
   ВЫЕМКА ЭКРАНА – весь визуальный объём здесь
   -------------------------------------------------- */
.waterfall-screen {
    position: relative;
    border-top: 4px solid #0f1217;
    border-left: 4px solid #0f1217;
    border-bottom: 4px solid #2a2e35;
    border-right: 4px solid #2a2e35;
    background: #030609;
    border-radius: 8px;
    box-shadow: 
        inset 0 0 15px rgba(0, 0, 0, 0.8), 
        inset 0 -1px 3px rgba(255, 255, 255, 0.03), 
        0 0 0 1px rgba(0,0,0,0.5);
}

/* Стилизация текста частоты в выемке водопада */
.font-share {
/*    background: #0a0e12;*/
    font-size: 12px;
    border-radius: 4px;
    padding: 4px 8px;
/*    display: inline-block;*/
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.05);
}

.vl {
    position: absolute;
    width: 100%;
    z-index: 2;
    background-image: linear-gradient(to right, rgb(255, 255, 0) -20%, rgba(255, 255, 154, 0.2) 5%, rgba(255, 255, 154, 0.2) 95%, rgb(255, 255, 0) 120%);
/*    background-image: linear-gradient(to right, #ff8c00 -20%, rgba(255, 140, 0, 0.15) 5%, rgba(255, 140, 0, 0.15) 95%, #ff8c00 120%);*/
}
.vl::before,
.vl::after {
    content: '';
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: repeating-linear-gradient(to bottom, #ffaa00, #ffaa00 4px, transparent 4px, transparent 8px);
    opacity: 0.6;
    pointer-events: none; /* чтобы пунктир не мешал кликам */
}

.vl::before {
    left: 0;
}

.vl::after {
    right: 0;
}
.clear { clear: both}
/*.others { font-size: 60%; font-family: sans-serif}*/
.others {font-weight: 700; background-color: #000; text-shadow: 0 0 16px rgba(0, 0, 0, 0.8);}
.memories { font-size: 80%; font-family: sans-serif}
.scale{position:relative;}
.scaleabs{position:absolute;}
.hideblind { display:inline; }
.showblind { display:none; }
.showblinding { display:inline-block; float:left; margin-top: 10px; }
/*
.statinfo0 {padding: 1px 2px 1px 2px;font-weight: normal;font-size:11px;background-color: rgba(96,103,139,.95);color: rgba(230, 205, 60, 1);color: rgba(240, 240, 240, 0.70);border: 1px solid #ffc080;border-radius: 4px;white-space: nowrap;position: relative;cursor: pointer;float: left;}
.statinfo0:hover {color: rgba(255, 255, 255, 1);background-color: rgb(50, 52, 77);}
.statinfo1 { float:left; position:relative; border-left-width:0px;border-right-width:2px;border-top-width:0px;border-bottom-width:2px;border-style:solid;border-color:black; }
.statinfo1:hover { z-index:98; }
.statinfo2 { overflow:hidden; border-width:0px; border-left-width:2px; border-style:solid; border-color:black;position:absolute; }
.statinfo2:hover { overflow:visible; }
.statinfol { background-color:#ffc080; }
.statinfo0l { float:left; white-space:nowrap; position:relative; border-width:1px;border-style:solid;border-color:#80ffc0; background-color:#40cc80;color:black;font-size:11px; }
.statinfo1l { float:left; position:relative; border-left-width:0px;border-right-width:2px;border-top-width:0px;border-bottom-width:2px;border-style:solid;border-color:black; }
.statinfo1l:hover { z-index:98; }
.statinfo2l { overflow:hidden; border-width:0px; border-left-width:2px; border-style:solid; border-color:black;position:absolute; }
.statinfo2l:hover { overflow:visible; }
.statinfoll { background-color:#80ffc0; }
*/
/*   rgba(50, 52, 77, 0.85)
input:not(:checked) + .keylist { display: none; }
input:checked + .keylist { display: block; }
*/

/* Базовые стили ярлыков */
.statinfo0, .statinfo0l, .statinfoLb {
    padding: 1px 4px 2px;
    font-size: 11px;
    color: rgba(200, 200, 200, 0.9); /* Приглушенный серо-белый цвет */
    border: 1px solid;
    border-radius: 0 3px;
    white-space: nowrap;
    position: relative;
    cursor: pointer;
    float: left;
    margin: 0 2px 2px 0;
    line-height: 14px;
    vertical-align: middle;
    background-color: #32344d;
    transition: all 0.15s ease-in-out;
}

/* Основной стиль */
.statinfo0 {
    border-color: rgba(255, 165, 0, 0.7); /* Полупрозрачный orange */
    background-color: #32344d;
}

/* Стиль с подсветкой */
.statinfo0l {
    border-color: #8a9f45;
    background-color: #2f4d2b;
    color: rgba(245, 255, 117, 0.9); /* Приглушенный желтый */
}

/* Специальный стиль */
.statinfoLb {
    border-color: rgba(255, 165, 0, 0.7);
    background-color: #404060;
}

/* Ховер-эффекты */
.statinfo0:hover, 
.statinfo0l:hover, 
.statinfoLb:hover {
    z-index: 100;
    color: #fff; /* Белый текст при наведении */
    border-color: rgba(255, 165, 0, 0.9); /* Ярче граница */
    background-color: 
        rgba(50, 52, 77, 0.8) /* Для .statinfo0 */, 
        rgba(47, 77, 43, 0.8) /* Для .statinfo0l */, 
        rgba(64, 64, 96, 0.8) /* Для .statinfoLb */;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.statinfo0:hover { background-color: rgba(50, 52, 77, 0.8); }
.statinfo0l:hover { background-color: rgba(47, 77, 43, 0.8); }
.statinfoLb:hover { background-color: rgba(64, 64, 96, 0.8); }

/* Состояния */
.statinfol {
    background-color: rgba(255, 165, 0, 0.8) !important;
    border-color: rgba(255, 140, 0, 0.9) !important;
    color: rgba(0,0,0,0.8) !important;
}

.statinfoll {
    background-color: rgba(245, 255, 117, 0.3) !important;
    border-color: rgba(208, 224, 0, 0.7) !important;
    color: rgba(245, 255, 117, 0.95) !important;
}

/* Элементы структуры (остаются без изменений) */
.statinfo1, .statinfo1l {
    float: left;
    position: relative;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    margin: 0 1px 1px 0;
}

.statinfo2, .statinfo2l {
    overflow: hidden;
    position: absolute;
    border-left: 1px solid #000;
}

.statinfo2:hover, 
.statinfo2l:hover {
    overflow: visible;
    z-index: 99;
}

.st {
    padding: 0 4px 2px;
    font-weight: 400;
    font-size: 11px;
    border: 1px solid grey;
    border-radius: 0 3px;
    white-space: nowrap;
    position: relative;
    cursor: pointer;
    float: left
}

.st.black {
    background-color: #202020;
    color: rgba(255, 255, 255, .8)
}

.st.light {
    background-color: #495973;
    color: rgba(255, 255, 255, .8)
}

.st.ham {
    background-color: #603;
    color: rgba(255, 255, 255, .7)
}

.st.red {
    background-color: #8b0000;
    color: rgba(255, 255, 255, .8)
}

.st.green {
    background-color: #060;
    color: rgba(255, 255, 255, .7)
}

.st.blue {
    background-color: #003;
    color: rgba(255, 255, 255, .8)
}

.st.yellow {
    background-color: #969600;
    color: rgba(0, 0, 0, .8);
    font-weight: 700
}

.warning {
    font-size: 14px;
    font-family: 'Rajdhani', 'Exo 2', sans-serif;
    color: white;
    border: 1px;
    border-style: 1px solid;
    border-color: red;
    background-color: red;
    margin: 8px;
    padding: 4px;
    display: none; /* none*/
}
.fullcenter {margin: auto; padding: 6.8% 6%; text-align: center;}
.waterfall {color: #777 !important;font-size: 2.065rem !important;}
#yellowbarr {background-color:yellow; top:1px; height:1px}
#yellowbara:hover #yellowbarr {top:2px; height:2px}

#wfccontainer {
    position: relative;
    overflow: hidden;
    width: 100%;
    background: #000;
}

/* Убираем рамки Bootstrap 4 */
.card {
    border-radius: 4px !important;
    border: 1px solid #333;
    background: #202630;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.card-header,
.bg-grey,
.bg-light {
    background: #1a1c20 !important;
    border-bottom: 1px solid #222;
}

.font-share {
    font-family: 'Rajdhani', 'Exo 2', sans-serif;
}

input[type="text"],
select {
    background: #1b1e24;
    color: var(--led-yellow);
    border: 1px solid #333;
    font-family: 'Rajdhani', 'Exo 2', sans-serif;
}

input[type="range"] {
    cursor: pointer;
}

/* ==========================================================================
   ISOLATED FLAT SDR CONSOLE (PRO EDITION)
   ========================================================================== */

/* 1. Гравировка надписей панели (Transceiver Silkscreen) */
.section-fieldset {
    border: 1px solid rgba(88, 166, 255, 0.15) !important; /* плоская неброская линия */
    border-radius: 4px;
    padding: 12px 10px 10px 10px;
    margin: 6px 0 0 0;
    position: relative;
    background: transparent;
}

.section-legend {
    font-family: 'Rajdhani', 'Exo 2', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #ffb703 !important; /* матовый янтарный цвет */
    background: #252930; /* маскирует бордюр */
    padding: 0 8px;
    width: auto;
    float: none;
    display: inline-block;
    border: none;
    position: absolute;
    top: -10px;
    left: 12px;
    user-select: none;
}

/* 2. Изолированная кнопка консоли (Flat console keycap) */
.pro-btn {
    background: linear-gradient(180deg, var(--btn-top) 0%, var(--btn-bottom) 100%);
    border: 1px solid #0f1217 !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important; /* деликатный верхний блик */
    border-radius: 4px !important;
    color: #8da0b3 !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    padding: 5px 0 !important;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
    transition: all 0.1s ease-in-out;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.pro-btn:hover {
    background: linear-gradient(180deg, #2c333e 0%, #1f242b 100%) !important;
    color: #fff !important;
    border-top-color: rgba(255,255,255,0.12) !important;
}

/* Механический клик при нажатии */
.pro-btn:active, .pro-btn.active {
    background: #0f1217 !important;
    border-color: #000 !important;
    border-top-color: #0f1217 !important;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.8) !important;
    transform: translateY(1px);
}

/* Неактивный индикатор (световой слот в кнопке) */
/* Рисуем темный световой слот ТОЛЬКО на кнопках с индикацией (Режимы, Пресеты и Чекбоксы) */
.pro-btn-amber::after, 
.pro-btn-cyan::after, 
.pro-check-btn::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 35%;
    width: 30%;
    height: 2px;
    background: #10141a; /* темное стекло */
    border-radius: 1px;
    transition: all 0.1s ease-in-out;
}
/* 3. Изолированная кнопка-чекбокс (Flat DSP Switch) */
.pro-check-btn {
    background: linear-gradient(180deg, var(--btn-top) 0%, var(--btn-bottom) 100%);
    border: 1px solid #0f1217 !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    border-radius: 4px !important;
    color: #8da0b3;
    cursor: pointer;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    padding: 6px 4px;
    position: relative;
    overflow: hidden;
    transition: all 0.1s ease-in-out;
}

.pro-check-btn:hover {
    color: #fff;
    background: linear-gradient(180deg, #2c333e 0%, #1f242b 100%);
}

.custom-checkbox:checked + .pro-check-btn {
    background: #0f1217 !important;
    border-top-color: #0f1217 !important;
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.8) !important;
    color: #fff !important;
}

/* --- ИНДИВИДУАЛЬНЫЕ ЛАЗЕРНЫЕ ИНДИКАТОРЫ (LAZER STRIPES) --- */

/* Янтарная полоса (Режимы, Memories) */
.pro-btn-amber.active::after {
    background: linear-gradient(to right, #ffcc00 0%, #ff9900 100%) !important;
    box-shadow: inset 0 0 3px rgba(255,255,255,0.8), 0 0 6px 1.5px rgba(255, 153, 0, 0.3) !important;
}
.pro-btn-amber.active {
    color: #ffb703 !important;
}

/* Голубая полоса (Пресеты фильтров) */
.pro-btn-cyan.active::after {
    background: linear-gradient(to right, #00f0ff 0%, #0072ff 100%) !important;
    box-shadow: inset 0 0 3px rgba(255,255,255,0.8), 0 0 6px 1.5px rgba(0, 114, 255, 0.3) !important;
}
.pro-btn-cyan.active {
    color: #00e5ff !important;
}

/* Изумрудно-зеленая полоса (DSP функции) */
.custom-checkbox:checked + .pro-check-green::after {
    background: linear-gradient(to right, #80ff30 0%, #60d020 30%, #208000 100%) !important;
    box-shadow: inset 0 0 3px rgba(255,255,255,0.8), 0 0 6px 1.5px rgba(0, 255, 0, 0.25) !important;
}
.custom-checkbox:checked + .pro-check-green {
    color: #00ff41 !important;
}

/* Рубиново-красная полоса (REC) */
/* Специальная красная кнопка REC (Светится вся целиком, без полоски снизу) */
.pro-btn-rec.active {
    color: #ff003c !important;
    background: rgba(255, 0, 60, 0.12) !important;
    border-color: #ff003c !important;
    text-shadow: 0 0 8px #ff003c !important;
    box-shadow: inset 0 0 5px rgba(255, 0, 60, 0.3) !important;
}
.pro-btn-red.active {
    color: #ff003c !important;
}

/* 4. Сексуальная шина громкости */
.pro-slider-tray {
    background: #111 !important;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid #222;
    height: 32px;
}

.volume-slider {
    -webkit-appearance: none;
    appearance: none;
    background: #1e2430 !important;
    height: 4px !important;
    border-radius: 2px !important;
    outline: none;
    cursor: pointer;
    border: 1px solid #10141b;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px !important;
    height: 16px !important;
    background: #ffb703 !important; /* Тот самый янтарный ползунок */
    border-radius: 2px !important;
    cursor: pointer;
    box-shadow: 0 0 6px #ffb703, 0 1px 3px rgba(0,0,0,0.5) !important;
    border: none !important;
}

/* ==========================================================================
   PRO RACK MEMORIES MODULE (Записная книжка закладок)
   ========================================================================== */

/* 1. Главный плавающий корпус меню закладок */
.memories-menu {
    display: none; /* Скрыто по умолчанию, управляется JS */
    position: absolute;
    top: 60px; /* Выравнивание строго под шапкой */
    right: 25px;
    background-color: #151921; /* Темный приборный фон */
    border: 1px solid rgba(88, 166, 255, 0.25); /* Тонкая рамка с голубым свечением */
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    padding: 15px;
    z-index: 1050; /* Поверх остальных слоев */
    min-width: 450px;
    max-width: 95vw;
    max-height: 80vh;
    overflow-y: auto;
}

/* 2. Контейнер таблицы закладок (Полное соответствие spots-table-container) */
#memories-table-container {
    background: rgba(15, 23, 36, 0.5) !important;
    border-top: 3px solid #0c0f14 !important;
    border-left: 3px solid #0c0f14 !important;
    border-bottom: 3px solid #2c313a !important;
    border-right: 3px solid #2c313a !important;
    border-radius: 4px !important;
    box-shadow:
        inset 0 6px 12px rgba(0, 0, 0, 0.9),
        inset 0 -2px 6px rgba(0, 0, 0, 0.7),
        inset 2px 0 6px rgba(0, 0, 0, 0.7),
        inset -2px 0 6px rgba(0, 0, 0, 0.7),
        inset 0 -1px 3px rgba(255, 255, 255, 0.03) !important;
    padding: 10px !important;
    overflow-x: auto !important;
}

/* Кастомный темный скроллбар контейнера закладок */
#memories-table-container::-webkit-scrollbar {
    height: 8px;
}
#memories-table-container::-webkit-scrollbar-track {
    background: #0a0d13;
}
#memories-table-container::-webkit-scrollbar-thumb {
    background: #222831;
    border-radius: 4px;
    border: 1px solid #000;
}
#memories-table-container::-webkit-scrollbar-thumb:hover {
    background: #484f58;
}

/* 3. Таблица сырых данных закладок (Полное соответствие spots-table) */
#memories-table-container table {
    width: 100% !important;
    border-collapse: collapse !important;
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 13px !important;
    color: #c9d1d9 !important;
    background: transparent !important;
    margin: 0 !important;
}

/* Шапка таблицы (Соответствие spots th) */
#memories-table-container th {
    background: rgba(15, 23, 36, 0.5) !important;
    color: #5c6773 !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 8px 10px !important;
    border-bottom: 2px solid #21262d !important;
    white-space: nowrap !important;
    text-align: center !important;
}

/* Строки и ячейки (Защита от перебивания фонов из Bootstrap 5) */
#memories-table-container td {
    padding: 4px 10px !important;
    background: transparent !important; /* Убирает белый фон Bootstrap */
    color: #c9d1d9 !important;
    border-bottom: 1px solid #151921 !important;
    border-top: none !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    text-align: center !important;
}

/* Эффект сканера при наведении на строку закладок (Копия spots hover) */
#memories-table-container tbody tr:hover td {
    background: #151921 !important; /* Ровный темный фон */
    color: #fff !important;
}

#memories-table-container tbody tr:hover td:first-child {
    box-shadow: inset 2px 0 0 #58a6ff !important; /* Неоновая риска слева */
}

/* 4. Оформление кнопок управления внутри таблицы (LED-индикаторы) */
#memories-table-container td .btn {
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 700 !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    padding: 2px 6px !important;
    margin: 0 2px !important;
    border-radius: 2px !important;
}

/* Перейти (Неоновый зеленый LED) */
#memories-table-container .btn-outline-dark {
    color: #00ff41 !important;
    border: 1px solid rgba(0, 255, 65, 0.3) !important;
    background: rgba(0, 255, 65, 0.05) !important;
    box-shadow: none;
}
#memories-table-container .btn-outline-dark:hover {
    color: #fff !important;
    background: #00ff41 !important;
    box-shadow: 0 0 8px #00ff41 !important;
}

/* Редактировать (Янтарный желтый LED) */
#memories-table-container .btn-outline-primary {
    color: #ffb703 !important;
    border: 1px solid rgba(255, 183, 3, 0.3) !important;
    background: rgba(255, 183, 3, 0.05) !important;
}
#memories-table-container .btn-outline-primary:hover {
    color: #fff !important;
    background: #ffb703 !important;
    box-shadow: 0 0 8px #ffb703 !important;
}

/* Удалить (Аварийный красный LED) */
#memories-table-container .btn-outline-danger {
    color: #ff003c !important;
    border: 1px solid rgba(255, 0, 60, 0.3) !important;
    background: rgba(255, 0, 60, 0.05) !important;
}
#memories-table-container .btn-outline-danger:hover {
    color: #fff !important;
    background: #ff003c !important;
    box-shadow: 0 0 8px #ff003c !important;
}

/* 5. Стилизация пагинации списка под терминальные селекторы */
.memories-menu .btn-outline-secondary {
    color: #8b949e !important;
    border-color: #21262d !important;
    background: #161b22 !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    padding: 3px 8px !important;
    border-radius: 3px !important;
}
.memories-menu .btn-outline-secondary:hover:not(:disabled) {
    color: #ffb703 !important;
    border-color: #ffb703 !important;
    background: #1c222b !important;
}
.memories-menu .btn-outline-secondary.active {
    color: #12161f !important;
    background-color: #ffb703 !important;
    border-color: #ffb703 !important;
    box-shadow: 0 0 6px rgba(255, 183, 3, 0.4) !important;
}

/* Уменьшаем кнопки Экспорт, Импорт, Очистить внизу меню закладок */
.memories-menu .btn-xs {
    padding: 3px 8px !important;
    font-size: 11px !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

/* =============================================
   ГОРИЗОНТАЛЬНЫЕ КНОПКИ ДИАПАЗОНОВ
   Активность только по зелёному светодиоду
   ============================================= */

/* Контейнер – горизонтальный flex с переносом */
.band-buttons-horizontal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    margin-bottom: 12px;
}

/* Каждая кнопка – горизонтальный блок, как остальные кнопки */
.band-buttons-horizontal .wsdr-band-group {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #1a1c20;
    border: 1px solid #2a2e35;
    border-radius: 4px;
    padding: 6px 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: 'Rajdhani', 'Exo 2', 'Share Tech Mono', sans-serif, monospace;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    color: #b0b5ba;
}

/* Скрываем радио-кнопку */
.band-buttons-horizontal .wsdr-band-radio {
    display: none;
}

/* Текст диапазона */
.band-buttons-horizontal .wsdr-band-btn {
    line-height: 1;
}

/* Светодиод – слева от текста, всегда виден, но тусклый */
.band-buttons-horizontal .wsdr-band-led {
    display: inline-block;
    width: 14px;
    height: 6px;20%;
    background: #1a3a1a;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
    transition: all 0.1s ease;
}

/* Активное состояние – только светодиод загорается зелёным, текст и фон не меняются */
.band-buttons-horizontal .wsdr-band-radio:checked + .wsdr-band-led {
    background: #00ff41;
    box-shadow: 0 0 6px #00ff41;
}

/* Без жёлтой рамки, без изменения цвета текста при активации */
.band-buttons-horizontal .wsdr-band-radio:checked + .wsdr-band-led + .wsdr-band-btn {
    color: #b0b5ba;   /* оставляем стандартный цвет */
}

/* Эффект при наведении (как у других кнопок) */
.band-buttons-horizontal .wsdr-band-group:hover {
    background: #262a30;
    border-color: #ffb703;
    color: #ffb703;
}
.band-buttons-horizontal .wsdr-band-group:hover .wsdr-band-btn {
    color: #ffb703;
}

/* =====================================================
   ТАБЛИЦЫ ДИАПАЗОНОВ – СТРОГИЙ ПРИБОРНЫЙ СТИЛЬ
   ===================================================== */

/* Основной контейнер таблицы */
.table-dark-custom {
    width: 100%;
    background: #151921;
    color: #c0c7cf;                     /* мягкий, но яркий серый */
    border: 1px solid #2a2e35;
    border-radius: 4px;                 /* как у всех панелей */
    overflow: hidden;
    font-family: 'Rajdhani', 'Exo 2', sans-serif;
    font-size: 0.65rem;                 /* компактный размер по умолчанию */
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    margin-bottom: 0;
}

/* Заголовки столбцов (вторая строка thead) */
.table-dark-custom thead th {
    background: #202630;
    color: #b0b5ba;
    font-family: 'Rajdhani', 'Exo 2', sans-serif, 'Share Tech Mono', monospace;
    font-weight: 400;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1px;
    border-bottom: 2px solid #2a2e35;
    padding: 4px 6px;
    vertical-align: middle;
    white-space: nowrap;
}

/* Объединяющая строка с названием (первая строка thead) */
.table-dark-custom .table-active {
    background: #151921;
    color: #ffb703;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border-bottom: 1px solid #2a2e35;
    padding: 5px 6px;
}

/* Ячейки тела */
.table-dark-custom tbody td {
    background: #151921;
    color: #c0c7cf;
    border-bottom: 1px solid #1f2328;
    padding: 3px 6px;
    font-size: 0.75rem;
    vertical-align: middle;
    transition: all 0.15s ease;
}

/* Подсветка строки при наведении – технологичное свечение */
.table-dark-custom.table-hover tbody tr:hover td {
    background: #1e242b;
    color: #ffffff;
    box-shadow: inset 0 0 10px rgba(0, 240, 255, 0.08);
    cursor: default;
}

/* Ссылки внутри таблицы */
.table-dark-custom a {
    color: #58a6ff;
    text-decoration: none;
    transition: color 0.15s;
}
.table-dark-custom a:hover {
    color: #ffb703;
}

/* ================= КНОПКИ ДИАПАЗОНОВ ================= */
.btn-band {
    display: block;
    width: 100%;
    background: #1a1c20;
    border: 1px solid #2a2e35;
    color: #b0b5ba;
    font-family: 'Rajdhani', 'Exo 2', sans-serif;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 2px 6px;
    border-radius: 2px;                 /* едва заметное скругление */
    transition: all 0.2s ease;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.btn-band:hover {
    background: #262a30;
    color: #ffb703;
    border-color: #ffb703;
    box-shadow: 0 0 6px rgba(255, 183, 3, 0.3), 0 2px 4px rgba(0,0,0,0.4);
    transform: translateY(-1px);
}
.btn-band:active {
    background: #151921;
    color: #ffb703;
    transform: translateY(0);
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.6);
}
.btn-band:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 183, 3, 0.5);
}

/* =====================================================
   РАСТЯНУТЫЕ ГРУППЫ КНОПОК (аналог btn-group-justified)
   ===================================================== */
.btn-group-justified {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 2px; /* небольшой зазор между группами */
}
.btn-group-justified > .btn-group {
    flex: 1 1 auto;
}
.btn-group-justified > .btn-group > .btn {
    width: 100%;
}

/* =====================================================
   АКТИВНЫЕ СОСТОЯНИЯ И ИНДИКАТОРЫ ДЛЯ .btn-set
   ===================================================== */
.btn-set {
    position: relative;
    /* Остальные стили у тебя уже есть, добавляем только то, чего не хватает */
    transition: all 0.15s ease-out;
}

/* Полоска-индикатор (горизонтальная версия) */
.btn-set.striped::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 40%;
    width: 20%;
    height: 2.5px;
    background: #606060;
    border-radius: 1px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 1px 1px rgba(255,255,255,0.1);
}

/* Активное состояние кнопки */
.btn-set.active,
.btn-set:active {
    background: #1b1e24 !important;
    color: #ffb703 !important;
    border-top-color: #000 !important;
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.9) !important;
    transform: translateY(1px);
}

/* Полоска-индикатор в активном состоянии – зелёное свечение */
.btn-set.active.striped::after,
.btn-set:active.striped::after {
    background: linear-gradient(to right, #80ff30 0%, #60d020 30%, #208000 100%);
    box-shadow: inset 0 0 4px rgba(255,255,255,0.8), 0 0 8px 2px rgba(0, 255, 0, 0.2);
    transform: scaleY(1.3);
    transform-origin: center bottom;
}

/* Дополнительный ховер для неактивных кнопок (поверх существующего) */
.btn-set:hover:not(.active) {
    background: linear-gradient(180deg, #4a5058 0%, #2e333a 100%);
    color: #fff;
}

/* ============================================================
   LOGBOOK TERMINAL UNIT (Hardware Style)
   ============================================================ */

/* 1. Главный корпус (Шасси) */
.log-rack-chassis {
    background: #222831;
    /* Фаски: тёмные сверху и слева, светлые снизу и справа */
    border-top: 3px solid #0c0f14;
    border-left: 3px solid #0c0f14;
    border-bottom: 3px solid #2c313a;
    border-right: 3px solid #2c313a;
    border-radius: 0 0 6px 6px;
    /* Только внутренние тени – глубина + блик на нижней грани */
    box-shadow:
        inset 0 4px 12px rgba(0, 0, 0, 0.8),   /* основная тень сверху */
        inset 0 -1px 4px rgba(255, 255, 255, 0.05); /* отражение света снизу */
    overflow: hidden;
    font-family: 'Rajdhani', sans-serif;
    margin-bottom: 15px;
}

/* 2. Верхний безель (Панель управления) */
.log-rack-top-bezel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(180deg, #272f3a 0%, #1d232c 100%);
    border-bottom: 2px solid #090a0d;
    padding: 10px 15px;
}

.log-hw-label {
    font-size: 11px;
    font-weight: 700;
    color: #6a7382;
    letter-spacing: 0.5px;
}

.log-hw-info {
    font-size: 11px;
    font-weight: 600;
    color: #5c6773;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.log-hw-info .text-cyan { color: #58a6ff; }

/* 3. Экран Терминала (Глубоко утоплен) */
.log-rack-screen-recess {
    background: #0c0f14;
    box-shadow: 
        inset 0 8px 15px rgba(0,0,0,1), 
        inset 0 -4px 10px rgba(0,0,0,0.8),
        inset 4px 0 10px rgba(0,0,0,0.8),
        inset -4px 0 10px rgba(0,0,0,0.8);
    border-top: 1px solid #000;
    border-bottom: 1px solid #2a313a;
    padding: 5px; /* Небольшой зазор между рамкой и iframe */
}

/* 4. Нижний безель (Панель отправки) */
.log-rack-tx-panel {
    background: linear-gradient(0deg, #1c222b 0%, #242a36 100%);
    border-top: 2px solid #090a0d;
    padding: 12px 15px;
}

/* 5. АППАРАТНЫЕ ЭЛЕМЕНТЫ ВВОДА (Inputs & Selects) */
/* Делаем их похожими на ЖК-дисплеи или терминальные строки */
.log-hw-input, 
.log-hw-select {
    width: 100%;
    background: #181f2a; /* На один оттенок светлее для объема */
    border: 1px solid #3c4858;
    border-radius: 4px;
    color: #58a6ff !important;
    font-family: 'Rajdhani', 'Exo 2', sans-serif, 'Share Tech Mono', monospace;
    font-size: 13px;
    padding: 7px 12px; /* Поля стали просторнее и солиднее */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
    transition: all 0.2s;
}
.log-hw-input:focus, 
.log-hw-select:focus {
    outline: none;
    border-color: #58a6ff;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.8), 0 0 5px rgba(88, 166, 255, 0.3);
    color: #fff;
}
.log-hw-input::placeholder { color: #52637a; }

/* Особая стилизация для селектора */
.log-hw-select {
    width: 65px;
    padding: 4px 6px;
    color: #ffab00; /* Оранжевый акцент для цифр */
    cursor: pointer;
}

/* 6. ТАКТИЧЕСКИЕ КНОПКИ (Физические клавиши) */
.log-hw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #232830;
    color: #c9d1d9;
    font-family: 'Rajdhani', 'Exo 2', sans-serif, 'Share Tech Mono', monospace;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 4px;
    border: 1px solid #3b424a;
    border-bottom: 2px solid #101216; /* Толстый низ для объема */
    cursor: pointer;
    transition: 0.1s;
}
.log-hw-btn:active {
    border-bottom: 1px solid #101216;
    border-top: 1px solid #000;
    transform: translateY(1px); /* Эффект вдавливания */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

/* Кнопка Sync */
.log-btn-sync i { color: #00e676; }
.log-btn-sync:hover { background: #2d333b; color: #fff; border-color: #00e676; }

/* Кнопка SEND */
.log-btn-send { background: #261f15; border-color: #4a3618; color: #ffab00; }
.log-btn-send i { color: #ffab00; }
.log-btn-send:hover { background: #3a2b16; color: #ffd600; border-color: #ffab00; }

/* 7. ГРАВИРОВКА НА КОРПУСЕ */
.log-rack-engraving {
    text-align: right;
    font-family: 'Rajdhani', 'Exo 2', sans-serif, 'Share Tech Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: #5d6878;
    letter-spacing: 1px;
    padding: 4px 15px 8px 15px;
    user-select: none;
    /* Эффект выбитого в металле текста */
    text-shadow: -1px -1px 0 #1b1e2441a, 1px 1px 0 #2b333d;
}

/* ==========================================================================
   CHAT SYSTEM (Communication Unit - Isolated Namespace)
   ========================================================================== */

/* 1. Главный корпус чата */
.chat-rack-chassis {
    background: #222831;
    /* Фаски: тёмные сверху/слева, светлые снизу/справа */
    border-top: 3px solid #0c0f14;
    border-left: 3px solid #0c0f14;
    border-bottom: 3px solid #2c313a;
    border-right: 3px solid #2c313a;
    border-radius: 0 0 6px 6px;
    padding: 15px;
    /* Внутренние тени: глубина + блик на нижней грани */
    box-shadow:
        inset 0 4px 12px rgba(0, 0, 0, 0.8),
        inset 0 -1px 4px rgba(255, 255, 255, 0.05);
}

/* 2. Предупреждающая табличка (PLACARD style) */
.chat-rack-disclaimer {
    background: #1e160a; /* Янтарно-черный фон */
    border: 1px solid #3d2b10;
    border-left: 4px solid #ffb703; /* Толстая сигнальная полоса */
    border-radius: 4px;
    padding: 10px 12px;
    font-family: 'Rajdhani', 'Exo 2', sans-serif, 'Share Tech Mono', monospace;
    font-size: 11px;
    line-height: 1.5;
    color: #c9d1d9;
    margin-bottom: 12px;
}
.disclaimer-alert {
    color: #ffb703;
    font-weight: bold;
    letter-spacing: 1px;
    margin-right: 4px;
}

/* 3. Экран ЧАТА (Вдавленный глубокий монитор) */
.chat-rack-screen-recess {
    background: rgba(15, 23, 36, 0.5);
    box-shadow: 
        inset 0 8px 15px rgba(0,0,0,1), 
        inset 0 -4px 10px rgba(0,0,0,0.8),
        inset 4px 0 10px rgba(0,0,0,0.8),
        inset -4px 0 10px rgba(0,0,0,0.8);
    border-top: 1px solid #000;
    border-bottom: 1px solid #2a313a;
    border-radius: 4px;
    padding: 2px;
    margin-bottom: 12px;
}

/* Само поле скролла чата */
.chat-rack-screen {
    height: 250px;
    overflow-y: auto;
    padding: 8px 10px;
    font-family: 'Rajdhani', 'Exo 2', sans-serif, 'Share Tech Mono', monospace;
    font-size: 13px;
    color: #cce5ff;
    line-height: 1.6;
}

/* Кастомный скроллбар чата */
.chat-rack-screen::-webkit-scrollbar { width: 8px; }
.chat-rack-screen::-webkit-scrollbar-track { background: #0a0d13; }
.chat-rack-screen::-webkit-scrollbar-thumb { background: #222831; border-radius: 4px; border: 1px solid #000; }
.chat-rack-screen::-webkit-scrollbar-thumb:hover { background: #3c4452; }

/* 4. Панель отправки (Трансмиттер) */
.chat-rack-tx-panel {
    background: transparent;
    border: none;
    padding: 6px 0;
    border-radius: 0;
}

/* 5. ЭЛЕМЕНТЫ ВВОДА (Дисплейные строки) */
.chat-hw-input {
    width: 100%;
    background: #181f2a !important; /* На один оттенок светлее как в логбуке */
    border: 1px solid #3c4858 !important; /* Четкая рамка как в логбуке */
    border-radius: 4px !important;
    color: #cce5ff !important;
    font-family: 'Rajdhani', 'Exo 2', sans-serif, 'Share Tech Mono', monospace;
    font-size: 13px !important; /* Идентичный шрифт */
    padding: 7px 12px !important; /* Свободный просторный паддинг */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.8) !important;
    transition: all 0.2s;
    outline: none !important;
}

/* Полное перекрытие синего свечения Bootstrap 5 при фокусе */
.chat-hw-input:focus {
    border-color: #58a6ff !important; /* Наша приборная голубая подсветка при вводе */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.8), 0 0 8px rgba(88, 166, 255, 0.4) !important; /* Мягкое неоновое свечение */
    outline: 0 !important;
}

/* Отлично видимый стальной плейсхолдер */
.chat-hw-input::placeholder { 
    color: #52637a !important; 
}

/* Инпут ответа задачи */
.chat-input-sum {
    color: #f85149 !important; /* Ответ пишем аварийным красным */
    font-weight: bold;
}

/* 6. АВАРИЙНЫЙ ДИСПЛЕЙ АНТИСПАМА */
.chat-hw-challenge {
    width: 100%;
    background: #140b0b !important;
    border: 1px solid #3c4858 !important; /* Единая рамка по контуру */
    border-radius: 4px !important;
    color: #8b949e !important;
    font-family: 'Rajdhani', 'Exo 2', sans-serif, 'Share Tech Mono', monospace;
    font-weight: 700;
    font-size: 11px !important;
    padding: 7px 12px !important; /* Высота выровнена под инпуты */
    letter-spacing: 0.5px;
    user-select: none;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
}
.chat-challenge-val {
    font-family: 'Rajdhani', 'Exo 2', sans-serif, 'Share Tech Mono', monospace;
    font-size: 13px;
    font-weight: bold;
    color: #f85149; /* Яркий красный цвет задачи */
    text-shadow: 0 0 4px rgba(248, 81, 73, 0.4);
}

/* 7. КНОПКИ (Тактильные клавиши чата) */
.chat-hw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #232830 !important;
    color: #c9d1d9 !important;
    border: 1px solid #3b424a !important;
    border-bottom: 2px solid #101216 !important; /* Плотный низ для эффекта нажатия */
    border-radius: 4px !important; /* Идентичное логбуку скругление углов */
    font-family: 'Rajdhani', 'Exo 2', sans-serif, 'Share Tech Mono', monospace;
    font-size: 12px !important;
    font-weight: bold;
    text-transform: uppercase;
    padding: 7px 12px !important; /* Идентичные отступы по высоте */
    cursor: pointer;
    transition: 0.1s;
}
.chat-hw-btn:active {
    border-bottom: 1px solid #101216 !important;
    border-top: 1px solid #000 !important;
    transform: translateY(1px);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5) !important;
}

/* Кнопка "Вставить частоту" */
.chat-btn-freq {
    background: #232830 !important;
    border-color: #3b424a !important;
    color: #58a6ff !important;
}
.chat-btn-freq:hover { background: #2d333b !important; color: #79c0ff !important; }

/* Кнопка SEND */
.chat-btn-send {
    background: #261f15 !important;
    border-color: #4a3618 !important;
    color: #ffb703 !important;
}
.chat-btn-send:hover { background: #3a2b16 !important; color: #ffd600 !important; border-color: #ffb703 !important; }

/* 8. ОШИБКИ И АЛЕРТЫ СИСТЕМЫ */
.chat-system-error {
    font-family: 'Rajdhani', 'Exo 2', sans-serif, 'Share Tech Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #f85149;
    text-align: center;
    margin-top: 6px;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   PRO SYSTEM ALERTS (Аппаратные уведомления для Чата и Логбука)
   ========================================================================== */

#chat-alert .alert,
#alerts-container .alert {
    background: #0a0d14 !important;
    border: 1px solid #2a3441;
    border-left-width: 3px; /* Акцент слева, как маркировка на панели */
    border-radius: 2px;
    font-family: 'Rajdhani', 'Exo 2', sans-serif, 'Share Tech Mono', monospace;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 10px 35px 10px 12px;
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.6);
    position: relative;
    margin-top: 10px;
    margin-bottom: 0;
}

/* Зеленый - Успех */
#chat-alert .alert-success, #alerts-container .alert-success {
    color: #4ade80 !important;
    border-color: #14532d;
    border-left-color: #22c55e !important;
}

/* Желтый - Предупреждение */
#chat-alert .alert-warning, #alerts-container .alert-warning {
    color: #fbbf24 !important;
    border-color: #451a03;
    border-left-color: #f59e0b !important;
}

/* Красный - Ошибка */
#chat-alert .alert-danger, #alerts-container .alert-danger {
    color: #f87171 !important;
    border-color: #450a0a;
    border-left-color: #ef4444 !important;
}

/* Синий - Инфо */
#chat-alert .alert-info, #alerts-container .alert-info {
    color: #60a5fa !important;
    border-color: #172554;
    border-left-color: #3b82f6 !important;
}

/* Крестик закрытия */
#chat-alert .alert .close,
#alerts-container .alert .close {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    padding: 4px 8px;
    color: inherit;
    background: transparent;
    border: none;
    font-size: 16px;
    line-height: 1;
    opacity: 0.5;
    transition: opacity 0.2s ease, color 0.2s ease;
    cursor: pointer;
}
#chat-alert .alert .close:hover,
#alerts-container .alert .close:hover {
    opacity: 1;
    color: #fff;
}
/* =====================================================
   УВЕДОМЛЕНИЕ О ЗАВЕРШЕНИИ ЗАПИСИ (Аппаратный стиль)
   ===================================================== */
.rec-finish-panel {
    background: #12161f;
    border: 1px solid #21262d;
    border-radius: 4px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.8);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    font-family: 'Rajdhani', 'Exo 2', sans-serif, monospace;
    position: relative;  /* для абсолютного позиционирования крестика, если понадобится */
    
}

.rec-finish-icon {
    color: #ffb703;         /* янтарный акцент */
    font-size: 1.4rem;
    flex-shrink: 0;
}

.rec-finish-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
    
    
}

.rec-finish-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #c9d1d9;
    line-height: 1.2;
}

.rec-finish-filename {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px;
    color: #6e7681;
    line-height: 1.3;
    word-break: break-all;
}

.rec-finish-close {
    /* Bootstrap btn-close уже стилизован, просто немного поправим цвет */
    filter: invert(0.6);
    opacity: 0.7;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.rec-finish-close:hover {
    opacity: 1;
    filter: invert(0.9);
}

/* =====================================================
   ПАНЕЛЬ ИНДИКАЦИИ ЗАПИСИ (аппаратный стиль)
   ===================================================== */
.rec-active-panel {
    background: #0f131a;
    border: 1px solid #21262d;
    border-radius: 4px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.8);
    padding: 6px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Rajdhani', 'Exo 2', sans-serif, monospace;
    margin-top: 6px;
    justify-content: center;
    /* никаких лишних теней снаружи */
}

/* Красная мигающая точка */
.rec-dot {
    color: #ff003c;
    font-size: 12px;
    text-shadow: 0 0 6px #ff003c;
    animation: rec-blink 1s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes rec-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }


/* Текст "REC" жирный, капсом, красный */
.rec-active-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #ff003c;
    letter-spacing: 0.8px;
    text-shadow: 0 0 4px rgba(255,0,60,0.4);
    flex-shrink: 0;
}

/* Частота */
.rec-active-freq {
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    font-weight: 500;
    color: #ffb703;          /* янтарный, как везде частота */
    text-shadow: 0 0 5px rgba(255,183,3,0.4);
}

/* Разделители (вертикальная черта) */
.rec-active-sep {
    color: #2d3540;
    font-weight: 300;
    margin: 0 4px;
    flex-shrink: 0;
}

/* Время записи */
.rec-active-time {
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    color: #c9d1d9;
    font-weight: 500;
    tabular-nums: true;      /* чтобы цифры не дёргались */
}

/* Размер файла */
.rec-active-size {
    font-family: 'Share Tech Mono', monospace;
    font-size: 13px;
    color: #8b949e;
    font-weight: 500;
}

/* ============================================================
   R22 HARDWARE UNIT (Pro-Spec Monitor) USERS ONLINE
   ============================================================ */
/* Главный корпус (Аппаратный блок) */
.r22-hardware-unit {
    background: #222831;
    /* Фаски: тёмные сверху и слева, светлые снизу и справа – создают иллюзию углубления */
    border-top: 3px solid #0c0f14;
    border-left: 3px solid #0c0f14;
    border-bottom: 3px solid #2c313a;
    border-right: 3px solid #2c313a;
    border-radius: 0 0 6px 6px; /* можно заменить на 6px, если нужна полная рамка */
    box-shadow:
        inset 0 4px 12px rgba(0, 0, 0, 0.8),  /* глубокая тень сверху */
        inset 0 -1px 4px rgba(255, 255, 255, 0.05); /* блик на нижней грани */
    overflow: hidden;
    font-family: 'Rajdhani', 'Exo 2', sans-serif, 'Share Tech Mono', monospace;
}

/* --- ВЕРХНИЙ БЕЗЕЛЬ --- */
.r22-top-bezel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(180deg, #272f3a 0%, #1d232c 100%);
    border-bottom: 2px solid #090a0d;
    padding: 8px 15px;
}

/* Тумблер Compact */
.r22-toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin: 0;
}
.r22-toggle-switch input { display: none; }
.r22-led {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #1b1e24;
    border: 1px solid #000;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.8), 0 1px 0 rgba(255,255,255,0.1);
    transition: 0.2s;
}
.r22-toggle-switch input:checked + .r22-led {
    background: #ffab00;
    border-color: #ffd600;
    box-shadow: 0 0 8px #ffab00, inset 0 1px 2px #fff;
}
.r22-toggle-lbl {
    font-size: 11px;
    font-weight: 700;
    color: #7a8a9e;
    letter-spacing: 0.5px;
}

/* Инфо оператора по центру */
.r22-bezel-center {
    display: flex;
    align-items: center;
    gap: 18px;
    background: #161b22;
    padding: 4px 26px;
    border-radius: 8px;
    border: 1px solid #222831;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}
.r22-op-text { font-family: 'Rajdhani', 'Exo 2', sans-serif, 'Share Tech Mono', monospace; font-size: 14px; }
.r22-separator { width: 1px; height: 14px; background: #2d3540; margin: 0 4px; }

/* LCD панели справа */
.r22-bezel-right { display: flex; gap: 10px; }
.r22-lcd-panel {
    display: flex;
    align-items: center;
    background: #0f131a;
    border: 1px solid #21262d;
    padding: 2px 10px;
    border-radius: 4px;
    box-shadow: inset 0 2px 5px rgba(0,0,0,1);
}
.lcd-title { font-size: 10px; font-weight: 700; color: #5c6773; margin-right: 8px; }
.lcd-value {
    font-family: 'Rajdhani', 'Exo 2', sans-serif, 'Share Tech Mono', monospace;
    font-size: 16px;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
    min-width: 24px;
    text-align: right;
}

/* --- УТОПЛЕННЫЙ ЭКРАН (The "Wow" Factor) --- */
.r22-recessed-screen {
    background: #0a0d13; /* Глубокая тьма */
    /* Тройная тень для создания эффекта глубокого колодца: */
    box-shadow: 
        inset 0 8px 15px rgba(0,0,0,1), 
        inset 0 -4px 10px rgba(0,0,0,0.8),
        inset 4px 0 10px rgba(0,0,0,0.8),
        inset -4px 0 10px rgba(0,0,0,0.8);
    border-top: 2px solid #000;
    border-bottom: 2px solid #2a313a; /* Блик от нижнего безеля */
    padding: 10px 0; /* Отступы от краев рамки */
    overflow: hidden; /* Обрезаем всё, что вылазит, без скроллов */
    display: flex;
    justify-content: center; /* Центрируем картинку 1024px, если монитор шире */
}
.r22-screen-content {
    /* Оставляем ядру WebSDR полный контроль внутри этого блока */
    position: relative;
}

/* --- НИЖНИЙ БЕЗЕЛЬ (Бронированный статус-бар) --- */
.r22-bottom-bezel {
    /* ИСПОЛЬЗУЕМ GRID: Ровно 5 колонок одинаковой ширины. НИЧЕГО НЕ ПРЫГНЕТ! */
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    background: linear-gradient(0deg, #1c222b 0%, #242a36 100%);
    border-top: 2px solid #090a0d;
}

.r22-grid-stat {
    display: flex;
    flex-direction: column; /* Заголовок сверху, цифра снизу (как на осциллографах) */
    align-items: center;
    justify-content: center;
    padding: 6px 0;
    border-right: 1px solid #28303b;
    box-shadow: 1px 0 0 #1b1e24418; /* Эффект вдавленной линии между колонками */
}
.r22-grid-stat:last-child {
    border-right: none;
    box-shadow: none;
}
.stat-hdr {
    font-size: 10px;
    font-weight: 700;
    color: #657486;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
.stat-val {
    font-family: 'Rajdhani', 'Exo 2', sans-serif, 'Share Tech Mono', monospace;
    font-size: 13px;
    font-weight: bold;
    /* font-variant-numeric: tabular-nums; - здесь даже не обязательно, т.к. колонка держит ширину! */
}

/* ==========================================================================
   FLOATING USER BADGES (Стилизация маркеров пользователей на шкале)
   ========================================================================== */

/* Базовый стиль для парящих кнопок-маркеров */
.userfreqbtn {
    background: rgba(5, 7, 10, 0.85) !important; /* Темная полупрозрачная подложка */
    border: 1px solid currentColor !important;     /* Рамка под цвет пользователя */
    border-radius: 3px !important;
    font-family: 'Rajdhani', 'Exo 2', sans-serif;
    font-size: 11px !important;
    font-weight: bold;
    padding: 2px 6px !important;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    box-shadow: 0 2px 6px rgba(0,0,0,0.6);
    text-transform: uppercase;
}

/* Эффект наведения */
.userfreqbtn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 0 8px currentColor;
    transform: translateY(-1px);
}

/* ВАУ-ЭФФЕКТ: Выделение СЕБЯ любимого на шкале (Золотой неон) */
.userfreqbtn.me-user {
    border: 1.5px solid #ffb703 !important;       /* Яркая золотая рамка */
    color: #ffb703 !important;                    /* Золотой текст */
    background: rgba(255, 183, 3, 0.15) !important;
    box-shadow: 0 0 10px rgba(255, 183, 3, 0.5) !important;
    z-index: 9999 !important;                      /* Всегда поверх остальных */
}
/* ==========================================================================
   PRO TOOLTIPS (Стилизация всплывающих подсказок Bootstrap 5)
   ========================================================================== */

.tooltip .tooltip-inner {
    background-color: #151921 !important;       /* Темный фон в тон сайта */
    border: 1px solid #1a2433 !important;        /* Тонкая рамка прибора */
    color: #cce5ff !important;                   /* Стальной синий читаемый текст */
    font-family: 'Rajdhani', 'Exo 2', sans-serif;
    font-size: 12px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.8);
    padding: 8px 12px !important;
    border-radius: 4px !important;
    text-align: left;
    line-height: 1.4;
}

/* Красим стрелочку тултипа */
.tooltip .tooltip-arrow::before {
    border-bottom-color: #1a2433 !important;
    border-top-color: #1a2433 !important;
}

/* ==========================================================================
   PRO-SPEC SYSTEM FOOTER (V3 - THREE-SECTION HARDWARE CHASSIS)
   ========================================================================== */

/* Карточка футера */
.pro-footer-card {
    background: #0f1217 !important;
    border: 1px solid #1a2433 !important;
    border-radius: 4px !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
    margin-top: 15px;
}

/* Общий шрифт */
.pro-footer-body {
    font-family: 'Rajdhani', 'Exo 2', sans-serif, monospace;
    font-size: 11px !important;
    color: #5a6e7f !important;  /* Приглушенный стальной цвет */
    letter-spacing: 0.5px;
    line-height: 1.5;
}

/* Приглушенные ссылки */
.pro-footer-body a {
    color: #8892b0 !important;
    text-decoration: none;
    transition: all 0.15s ease-in-out;
    font-weight: 500;
}
.pro-footer-body a:hover {
    color: #ffb703 !important;   
}

/* СЕТКА ТРЕХСЕКЦИОННОГО ФУТЕРА */
.pro-footer-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* Три секции */
    align-items: center;
    gap: 25px;
    width: 100%;
}

/* Стилизация секций */
.pro-footer-col {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.pro-footer-col.left { text-align: left; }
.pro-footer-col.center { align-items: center; gap: 8px; }
.pro-footer-col.right { text-align: right; }

/* Технические заголовки секций */
.pro-footer-title {
    font-family: 'Rajdhani', 'Exo 2', sans-serif, monospace;
    font-size: 9px;
    font-weight: 700;
    color: #58a6ff; /* SDR Cyan */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

/* Панель счетчиков */
.pro-footer-counters {
    display: flex;
    gap: 8px;
    align-items: center;
    background: #0b0d11;
    padding: 4px 8px;
    border: 1px solid #1d2633;
    border-radius: 3px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.8);
}
.pro-footer-counters img {
    opacity: 0.5;
    filter: grayscale(30%);
    transition: all 0.2s ease-in-out;
}
.pro-footer-counters img:hover {
    opacity: 0.9;
    filter: none;
}

/* Виджет управления куками */
.pro-cookie-widget {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Rajdhani', 'Exo 2', sans-serif, monospace;
    font-size: 10px;
    background: #0b0d11;
    border: 1px solid #1d2633;
    padding: 2px 8px;
    border-radius: 2px;
    color: #5a6e7f !important;
    transition: all 0.15s ease-in-out;
    text-transform: uppercase;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
}
.pro-cookie-widget:hover {
    color: #ffb703 !important;
    border-color: #ffb703;
    box-shadow: 0 0 5px rgba(255, 183, 3, 0.3);
}

/* ==========================================================================
   VHF SPOTS TELEMETRY TERMINAL (Hardware Rack Style)
   ========================================================================== */

/* 1. ЭКРАН ТЕРМИНАЛА (Контейнер) */
#spots-table-container {
    background: rgba(15, 23, 36, 0.5);
    /* Фаски: тёмные сверху и слева, светлые снизу и справа */
    border-top: 3px solid #0c0f14;
    border-left: 3px solid #0c0f14;
    border-bottom: 3px solid #2c313a;
    border-right: 3px solid #2c313a;
    border-radius: 0 0 6px 6px;
    /* Внутренние тени для глубины + тонкая внешняя обводка */
    box-shadow:
        inset 0 6px 12px rgba(0, 0, 0, 0.9),    /* глубина сверху */
        inset 0 -2px 6px rgba(0, 0, 0, 0.7),     /* низ */
        inset 2px 0 6px rgba(0, 0, 0, 0.7),      /* слева */
        inset -2px 0 6px rgba(0, 0, 0, 0.7),     /* справа */
        inset 0 -1px 3px rgba(255, 255, 255, 0.03); /* блик на нижней грани */
    padding: 10px;
    overflow-x: auto;
}

/* Кастомный темный скроллбар для таблицы */
#spots-table-container::-webkit-scrollbar { height: 8px; }
#spots-table-container::-webkit-scrollbar-track { background: #0a0d13; }
#spots-table-container::-webkit-scrollbar-thumb { background: #222831; border-radius: 4px; border: 1px solid #000; }
#spots-table-container::-webkit-scrollbar-thumb:hover { background: #484f58; }

/* 2. ТАБЛИЦА СЫРЫХ ДАННЫХ */
#spots-table-container table {
    width: 100%;
    border-collapse: collapse; /* Никаких разрывов, монолитный терминал */
    font-family: 'Share Tech Mono', monospace; /* Только моноширинный шрифт для данных! */
    font-size: 13px;
    color: #c9d1d9;
}

/* Шапка таблицы */
#spots-table-container th {
    background: rgba(15, 23, 36, 0.5);
    color: #5c6773;
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 10px;
    border-bottom: 2px solid #21262d;
    white-space: nowrap;
    text-align: left;
}

/* Строки и ячейки */
#spots-table-container td {
    padding: 4px 10px; /* Узкие строки, как в логах сервера */
    border-bottom: 1px solid #151921;
    vertical-align: middle;
    white-space: nowrap;
}

/* Легкая подсветка строки (эффект сканера) */
#spots-table-container tbody tr:hover {
    background: #151921;
}
#spots-table-container tbody tr:hover td:first-child {
    box-shadow: inset 2px 0 0 #58a6ff; /* Тонкая полоска слева при наведении */
}

/* 3. ТИПОГРАФИКА ДАННЫХ */
/* Тусклый системный текст (даты, ID) */
.sys-dim { color: #6e7681; }

/* Цифры, которые не должны прыгать (SNR, dT) */
.sys-num { font-variant-numeric: tabular-nums; font-weight: bold; }

/* Красивое отображение Частоты (Янтарное свечение) */
.freq-val {
    font-weight: bold;
    color: #ffb703; 
    text-shadow: 0 0 5px rgba(255, 183, 3, 0.4);
}
.freq-unit-spots {
    font-family: 'Rajdhani', sans-serif;
    font-size: 10px;
    color: #5c6773;
    margin-left: 4px;
}

/* Сообщение декодера */
.msg-cell {
    color: #8b949e;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}
#spots-table-container tbody tr:hover .msg-cell {
    color: #c9d1d9; /* Сообщение "загорается" при наведении */
}

/* 4. АППАРАТНЫЕ LED ИНДИКАТОРЫ (Моды) */
.spot-badge {
    display: inline-block;
    padding: 1px 6px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 2px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.8); /* Вдавленный дисплейчик */
}

/* Цвета индикаторов в стиле приборной панели */
.badge-ft8   { background: #002233; color: #00e5ff; border: 1px solid #005580; }
.badge-ft4   { background: #003311; color: #00e676; border: 1px solid #006622; }
.badge-jt    { background: #1a0033; color: #b366ff; border: 1px solid #4d0099; }
.badge-qra64 { background: #330033; color: #ff66ff; border: 1px solid #990099; }
.badge-cw    { background: #332200; color: #ffb703; border: 1px solid #996600; }
.badge-default { background: #202630; color: #8b949e; border: 1px solid #30363d; }

/* ==========================================================================
   PRO LOGBOOK SMART TABLE (NATIVE PARSER)
   ========================================================================== */
#logbook-table-container table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}
#logbook-table-container th {
    position: sticky;
    top: 0;
    background: #06080b; /* Темный фон шапки перекрывает текст при скролле */
    z-index: 10;
    border-bottom: 2px solid #1a2433;
    padding: 6px 10px;
    color: #58a6ff;
    font-family: 'Rajdhani', 'Exo 2','Share Tech Mono', sans-serif, monospace;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: left;
}
#logbook-table-container td {
    padding: 4px 10px;
    border-bottom: 1px solid #0f141a;
    font-family: 'Rajdhani', 'Exo 2','Share Tech Mono', sans-serif, monospace;
    font-size: 13px;
    white-space: nowrap;
    vertical-align: middle;
}
/* Ховер эффект для строк */
#logbook-table-container tr:hover td {
    background: #0a0d14;
}
/* Ограничитель длинных комментариев */
.log-comment-cell {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #cce5ff;
}


/* =====================================================
   FIX JUMPING VALUES (Анти-джиттер для всех бейджей)
   ===================================================== */

/* 1. Все цифровые значения в раздельных бейджах (SHIFT, FILTER, USERS) */
.pro-split-badge .data-val {
    display: inline-block;
    min-width: 45px;          /* достаточно для "-123.45" */
    text-align: right;
    font-family: 'Rajdhani', 'Exo 2','Share Tech Mono', sans-serif, monospace;
}

/* 2. Узкие поля (USERS) можно чуть уже */
#numusers1.data-val {
    min-width: 40px;
}

/* 3. Поля телеметрии (LEVEL, PEAK, SNR, NOISE) */
.pro-tel-val {
    display: inline-block;
    min-width: 65px;
    text-align: right;
    font-family: 'Rajdhani', 'Exo 2','Share Tech Mono', sans-serif, monospace;
}
/* Убедимся, что внутренний спан не ломает */
.pro-tel-val span {
    display: inline-block;
    width: 100%;
}

/* 4. Бейдж S-метра (points) – фиксируем ширину, чтобы при переключении на OVERLOAD не дёргался */
/* Фиксация ширины бейджа S-метра (points), чтобы не прыгал при смене S0 +10dB → S9 +40dB → OVERLOAD */
#points.sdr-digits {
    display: inline-block;
    width: 50px;              /* достаточно для "S9 OVERLOAD" (11 символов в моноширине) */
    text-align: center;
    font-family: 'Rajdhani', 'Exo 2','Share Tech Mono', sans-serif, monospace;
    white-space: nowrap;
    overflow: hidden;
}

/* 5. Дополнительная страховка для всех .tabular-nums – добавим моноширинный шрифт */
.tabular-nums {
    font-family: 'Rajdhani', 'Exo 2','Share Tech Mono', sans-serif, monospace;
    font-variant-numeric: tabular-nums;
}


/* ==========================================================================
MOBILE WARNING MODAL (Аппаратное предупреждение для смартфонов)
========================================================================== */
.mobi-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(5px); /* Легкое размытие фона за модалкой */
}
.mobi-modal-box {
    background: #1a1f26; 
    border: 2px solid #ffb703; 
    border-radius: 8px;
    width: 90%; max-width: 420px; 
    box-shadow: 0 0 40px rgba(255, 183, 3, 0.3), inset 0 0 20px rgba(0,0,0,0.5);
    font-family: 'Rajdhani', sans-serif; color: #c9d1d9;
    overflow: hidden;
    animation: modalAppear 0.3s ease-out;
}
@keyframes modalAppear {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.mobi-modal-header {
    background: linear-gradient(90deg, #ffb703, #ff9900); 
    color: #000;
    padding: 12px 16px; font-size: 15px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1px; display: flex; align-items: center; gap: 10px;
    border-bottom: 2px solid #cc7a00;
}
.mobi-modal-body { 
    padding: 20px; font-size: 14px; line-height: 1.6; 
    background: #151921;
}
.mobi-modal-body p { margin: 0 0 12px 0; color: #b0b5ba; }
.mobi-modal-body p:last-child { margin-bottom: 0; color: #8b949e; font-size: 13px; }
.mobi-modal-footer {
    display: flex; gap: 10px; padding: 16px; background: #11141a;
    border-top: 1px solid #2a313d;
}
.mobi-modal-btn {
    flex: 1; padding: 12px; text-align: center; text-decoration: none;
    font-family: 'Rajdhani', sans-serif; font-size: 14px; font-weight: 700;
    text-transform: uppercase; border-radius: 4px; cursor: pointer; border: none;
    transition: all 0.2s; letter-spacing: 0.5px;
}
.mobi-modal-btn.primary {
    background: linear-gradient(180deg, #00e676, #00c853); 
    color: #000; 
    box-shadow: 0 0 15px rgba(0, 230, 118, 0.4);
}
.mobi-modal-btn.primary:hover { background: #00ff41; box-shadow: 0 0 20px rgba(0, 255, 65, 0.6); }
.mobi-modal-btn.secondary {
    background: #2a313d; color: #8b949e; border: 1px solid #30363d;
}
.mobi-modal-btn.secondary:hover { background: #30363d; color: #fff; }