:root {
            --bg-main: #0a0d14;
            --bg-panel: #161b26;
            --bg-input: #0d1117;
            --text-main: #d1d5db;
            --text-muted: #858b97;
            --border-color: #262e3d;
            --neon-blue: #00d2ff;
            --neon-green: #39ff14;
            --neon-amber: #ffaa00;
            --danger: #f43f5e;
        }

        body {
            background-color: var(--bg-main);
            color: var(--text-main);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            font-size: 11px;
            margin: 0;
            padding: 10px 0;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .container {
            width: 1024px;
            box-sizing: border-box;
        }

        header {
            background: linear-gradient(180deg, #1f2636 0%, #131822 100%);
            border: 1px solid var(--border-color);
            border-radius: 4px;
            padding: 6px 12px;
            margin-bottom: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
        }

        header h2 { margin: 0; font-size: 13px; font-weight: 600; color: #fff; }

        .panel {
            background: linear-gradient(180deg, #1b2230 0%, #121721 100%);
            border: 1px solid var(--border-color);
            border-radius: 4px;
            padding: 8px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
            margin-bottom: 8px;
        }

        .panel-title {
            font-size: 10px;
            font-weight: bold;
            text-transform: uppercase;
            color: var(--text-muted);
            margin-bottom: 6px;
            letter-spacing: 0.5px;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            padding-bottom: 3px;
        }

        /* Абсолютное позиционирование оверлея настройки (carrier/edgelower/
           edgeupper/yellowbar). */
        .scaleabs { position: absolute; }

        /* Кнопки диапазонов — по центру, одинаковой ширины (по «160m») */
        #bandbuttons {
            display: block;
            text-align: center;
        }
        #bandbuttons .btnBand {
            min-width: 46px;
        }
        /* Цифровой шрифт частоты */
        @font-face {
            font-family: 'digital-font';
            src: url('DS-DIGII.ttf');
        }

        /* --- Loader  --- */
        .loader {
            display: flex;
            flex-direction: column;
            font-size: 2em;
            justify-content: center;
            align-items: center;
            background: rgb(245,245,245);
            color: #000;
            z-index: 1001;
            position: fixed;
            left: 0; top: 0; right: 0; bottom: 0;
            overflow: hidden;
        }
        body .loader .dots {
            display: flex;
            position: relative;
            top: 13px;
            left: -10px;
            width: 100px;
            animation: dots 4s ease infinite 1s;
        }
        body .loader .dots div {
            position: relative;
            width: 10px;
            height: 10px;
            margin-right: 10px;
            border-radius: 100%;
            background-color: black;
        }
        body .loader .dots div:nth-child(1) {
            width: 0px; height: 0px; margin: 5px; margin-right: 15px;
            animation: show-dot 4s ease-out infinite 1s;
        }
        body .loader .dots div:nth-child(4) {
            background-color: transparent;
            animation: dot-fall-left 4s linear infinite 1s;
        }
        body .loader .dots div:nth-child(4):before {
            position: absolute; width: 10px; height: 10px; margin-right: 10px;
            border-radius: 100%; background-color: black; content: '';
            animation: dot-fall-top 4s cubic-bezier(0.46,0.02,0.94,0.54) infinite 1s;
        }
        @keyframes dots {
            0% { left: -10px; }
            20%, 100% { left: 10px; }
        }
        @keyframes show-dot {
            0%, 20% { width: 0px; height: 0px; margin: 5px; margin-right: 15px; }
            30%, 100% { width: 10px; height: 10px; margin: 0px; margin-right: 10px; }
        }
        @keyframes dot-fall-left {
            0%, 5% { left: 0px; }
            100% { left: 200px; }
        }
        @keyframes dot-fall-top {
            0%, 5% { top: 0px; }
            30%, 100% { top: 50vh; }
        }
        .loaded_hiding { transition: 0.7s opacity; opacity: 0; }
        .loaded { display: none !important; }
        .notify {
            position: fixed; z-index: 1000; top: 0px; width: 100%; height: 0;
            box-sizing: border-box; color: #fff; text-align: center;
            background: #bdbdbdf2; overflow: hidden; transition: height .7s;
        }
        .active { height: 50px; }
        .success:before { content: "На этом диапазоне пока нет приёмника. Для его появления Вы можете помочь проекту! Кнопка  внизу страницы"; }


        /* Горизонтальная жёлтая полоска на указателе настройки */
        #yellowbarr { background-color:yellow; top:1px; height:1px; }
        #yellowbara:hover #yellowbarr { top:2px; height:2px; }
        /* Полоса фильтра — затенение по водопаду, зависит от ширины полосы
           (width:100% от #yellowbar) */
        .vl {
            position:absolute;
            width:100%;
            height:170px;
            top:-167px;
            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%);
        }

        /* Magic Eye: плавное движение + сектор снизу */
        .progress-ring__circle {
            transition: 0.35s stroke-dashoffset;
            transform: rotate(-90deg);
            transform-origin: 50% 50%;
            /* Дуги-сектора рисуются ПОВЕРХ внутренней тени SVG, поэтому без
             * собственной тени выглядят плоской наклейкой. drop-shadow по
             * контуру дуги даёт «глубину лампы» (плавный край, полутона). */
            filter: drop-shadow(0 0 6px rgba(0,0,0,0.55))
                    drop-shadow(0 0 14px rgba(13,224,12,0.25));
        }

        /* Выпадающая панель «О приёмнике» в шапке */
        .info-drop {
            position: relative;
            display: inline-block;
        }
        .info-drop-btn {
            background: linear-gradient(180deg, #283143 0%, #1a212d 100%);
            color: #e5e7eb;
            border: 1px solid #374357;
            border-radius: 3px;
            padding: 3px 8px;
            cursor: pointer;
            font-size: 11px;
        }
        .info-drop-panel {
            position: absolute;
            top: 26px;
            right: 0;
            width: 430px;
            max-height: 520px;
            overflow-y: auto;
            background: var(--bg-panel);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            box-shadow: 0 8px 18px rgba(0,0,0,0.6);
            padding: 12px;
            display: none;
            z-index: 100;
            color: var(--text-main);
            font-size: 11px;
            line-height: 1.45;
        }
        .info-drop-panel h3 {
            font-size: 12px;
            font-weight: bold;
            color: var(--neon-blue);
            margin: 4px 0 6px;
            letter-spacing: 0.4px;
        }
        .info-drop-panel a {
            color: var(--neon-blue);
        }
        .info-drop-panel ul, .info-drop-panel ol { padding-left: 16px; margin: 5px 0; }
        .info-drop-panel li { margin-bottom: 4px; color: var(--text-muted); }
        .info-drop-panel .monitor-btn {
            display: block;
            text-align: center;
            margin-top: 8px;
            padding: 5px 10px;
            background: linear-gradient(180deg, #1e3a8a 0%, #1d4ed8 100%);
            color: #fff;
            border-radius: 4px;
            text-decoration: none;
        }
        .info-drop-panel details > summary {
            cursor: pointer;
            color: var(--neon-blue);
            text-decoration: underline;
            margin: 6px 0;
        }
        /* Переключатели (колонка) — собственный компактный toggle */
        .sw-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 3px 0;
        }
        .sw-label {
            font-size: 11px;
            color: var(--text-main);
        }
        .sw-toggle {
            appearance: none;
            -webkit-appearance: none;
            width: 32px;
            height: 16px;
            border-radius: 10px;
            background: var(--bg-input);
            border: 1px solid var(--border-color);
            position: relative;
            cursor: pointer;
            transition: 0.2s;
            margin: 0;
        }
        .sw-toggle::after {
            content: "";
            position: absolute;
            top: 1px; left: 1px;
            width: 12px; height: 12px;
            border-radius: 50%;
            background: #666;
            transition: 0.2s;
        }
        .sw-toggle:checked {
            background: var(--neon-blue);
            border-color: var(--neon-blue);
        }
        .sw-toggle:checked::after {
            left: 17px;
            background: #fff;
        }

        /* Контейнер оригинального водопада */
        #wfccontainer {
            width: 1024px;
            margin-bottom: 8px;
            background: #000;
        }
        #wfcontainer {
            width: 1024px;
        }

        .main-grid {
            display: grid;
            grid-template-columns: 280px 448px 280px;
            gap: 8px;
            margin-bottom: 8px;
        }

        .flex-col {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        button, .btn, .btnBand, .btnBandW {
            background: linear-gradient(180deg, #283143 0%, #1a212d 100%);
            color: #e5e7eb;
            border: 1px solid #374357;
            border-top: 1px solid #4b5b75;
            padding: 3px 6px;
            border-radius: 3px;
            cursor: pointer;
            font-size: 11px;
            font-weight: 500;
            text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
            box-shadow: 0 1px 2px rgba(0,0,0,0.3);
            transition: all 0.1s;
            white-space: nowrap;
        }

        button:active, .btnBand:active, .btnBandW:active {
            background: #151a24;
            box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);
            transform: translateY(0.5px);
        }

        /* Класс подсветки активных элементов из rx-base.js */
        .btn-selected, button.active-blue {
            background: linear-gradient(180deg, #1e3a8a 0%, #1d4ed8 100%) !important;
            border-color: var(--neon-blue) !important;
            color: #fff !important;
            box-shadow: 0 0 6px rgba(0, 210, 255, 0.6) !important;
            text-shadow: 0 0 4px #fff !important;
        }

        button.active-green {
            background: linear-gradient(180deg, #064e3b 0%, #047857 100%);
            border-color: var(--neon-green);
            color: #fff;
            box-shadow: 0 0 6px rgba(57, 255, 20, 0.6);
            text-shadow: 0 0 4px #fff;
        }

        .btn-group {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            align-items: center;
        }

        .digital-display {
            background-color: #05070a;
            border: 1px solid #1f2733;
            border-radius: 8px;   /* стало 8px (было 4px) — заметное скругление */
            padding: 6px;
            font-family: 'Courier New', Courier, monospace;
            font-weight: bold;
            text-align: center;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.9);
            position: relative;
        }

        #freq-digits {
            background: transparent;
            border: none;
            font-size: 40px;
            font-family: digital-font, 'Courier New', monospace;
            color: var(--neon-blue);
            text-shadow: 0 0 6px rgba(0,210,255,0.5);
            letter-spacing: 1px;
            flex: 1 1 auto;
            width: 100%;
            text-align: center;
            padding-left: 0;
            font-weight: bold;
        }
        #freq-digits:focus {
            outline: none;
            color: #fff;
            text-shadow: 0 0 8px #fff;
        }

        /* --- S-метр со шкалой --- */
        .smeter-container {
            height: 34px;
            background: #05070a;
            border: 1px solid #1f2733;
            border-radius: 3px;
            margin-top: 6px;
            position: relative;
            box-shadow: inset 0 2px 4px rgba(0,0,0,0.9);
        }
        /* Шкала S-метра (фон-деления) */
        .smeter-scale {
            position: absolute;
            left: 8px; right: 8px; top: 0; bottom: 0;
            background:
                repeating-linear-gradient(90deg,
                    rgba(255,255,255,0.12) 0 1px,
                    transparent 1px 12.5%),
                linear-gradient(90deg, #0b3d2e 0%, #3d2b0b 100%);
            border-radius: 2px;
        }
        /* подписи шкалы */
        .smeter-scale-labels {
            position: absolute;
            left: 8px; right: 8px; top: 20px;
            display: flex;
            justify-content: space-between;
            font-size: 8px;
            color: #667;
            pointer-events: none;
        }
        /* --- S-метр: классы из оригинала --- */
        .smeterpeak {
            height: 11.17px;
            margin: 0 0 -12px 7px;
            background-color: transparent;
            border-right: 2px solid rgb(255,0,0);
            position: relative;
        }
        .smetermin {
            display: none;   /* метка шумового пола скрыта 30.09 (см. HTML) */
            margin: 7px 0 -12px 7px;
            z-index: 1;
            width: 0;
            height: 4.17px;
            background-color: transparent;
            position: absolute;
            border-right: 2px solid #98ffee;
        }
        .smeterbar {
            width: 252px;
            height: 10px;
            background: linear-gradient(to right, #98ffee 113px, red 5px);
            box-shadow: 0 0 10px rgba(251,244,135,0.8);
            position: relative;
            margin: 9px 0 0 7px;
        }
        .EQ {
            width: 300px;
            margin-left: 0px;
            margin-top: 0;
            max-width: 241px;
            height: 8px;
            font-size: 0;
            position: relative;
            background-color: #000;
        }
        .EQ * { box-sizing: border-box; }
        .EQ-column {
            display: inline-block;
            width: 100%;
            height: 100%;
            position: relative;
            background-image: linear-gradient(to right, #98ffee 115px, red 5px);
        }
        .EQ-column[data-volume="0"]::after { height: 0; }
        .EQ-column[data-volume="1"]::after { height: 3%; }
        .EQ-column[data-volume="2"]::after { height: 13%; }
        .EQ-column[data-volume="3"]::after { height: 23%; }
        .EQ-column[data-volume="4"]::after { height: 33%; }
        .EQ-column[data-volume="5"]::after { height: 43%; }
        .EQ-column[data-volume="6"]::after { height: 53%; }
        .EQ-column[data-volume="7"]::after { height: 63%; }
        .EQ-column[data-volume="8"]::after { height: 73%; }
        .EQ-column[data-volume="9"]::after { height: 83%; }
        .EQ-column[data-volume="10"]::after { height: 93%; }
        table.smetertable td { border: 1px solid #000; background-color: rgba(226,226,226,0.11); }

        #smeterbar {
            position: absolute;
            left: 8px; top: 4px;
            height: 12px;
            width: 0px;
            background: linear-gradient(90deg, #39ff14 0%, #ffaa00 70%, #f43f5e 100%);
            border-radius: 2px;
            box-shadow: 0 0 6px rgba(57,255,20,0.4);
            transition: 0.1s width;
        }
        #smeterpeak {
            position: absolute;
            left: 8px; top: 4px;
            height: 12px;
            width: 0px;
            border-right: 2px solid #ff0000;
            background: transparent;
        }
        #smetermin {
            position: absolute;
            left: 8px; top: 20px;
            height: 3px;
            width: 0px;
            border-right: 2px solid #98ffee;
            background: transparent;
            z-index: 1;
        }
        /* EQ-полоса (smeterbarnew) — скрытый блок из JS */
        #smeterbarnew {
            position: absolute;
            left: 8px; top: 4px;
            height: 12px;
            background: rgba(57,255,20,0.25);
        }
        #numericalsmeter, #numericalsmeterpeak {
            position: absolute;
            right: 8px; top: 20px;
            font-size: 8px;
            color: #889;
        }

        select, input[type="text"] {
            background-color: var(--bg-input);
            color: #fff;
            border: 1px solid var(--border-color);
            border-radius: 3px;
            padding: 2px 4px;
            font-size: 11px;
            box-sizing: border-box;
        }

        select:focus, input[type="text"]:focus {
            border-color: var(--neon-blue);
            outline: none;
        }

        label {
            font-size: 11px;
            display: inline-flex;
            align-items: center;
            gap: 3px;
            cursor: pointer;
        }

        input[type="radio"], input[type="checkbox"] {
            margin: 0;
            accent-color: var(--neon-blue);
        }

        .row-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 2px 0;
        }

        #chatboxnew {
            height: 100px;
            overflow-y: auto;
            background: var(--bg-input);
            border: 1px solid var(--border-color);
            border-radius: 3px;
            padding: 4px;
            font-family: monospace;
            font-size: 11px;
            margin-bottom: 4px;
        }

        #users {
            font-size: 11px;
            /* js (douu) рисует блоки шириной 1024px — не даём им вылезать
               за границы панели: обрезаем и ограничиваем по ширине */
            overflow: hidden;
            max-width: 100%;
        }
        
        /* Скрываем служебные оригинальные формы, которые ломали верстку, 
           но сохраняем невидимыми в DOM, если скрипты их ищут напрямую */
        .hidden-form-system {
            display: none !important;
        }
    
        /* ============================================================
           ОКНО FT8-декодера (дизайн в духе sv1btl/decoders.js,
           но в тёмной теме сайта). Открывается кнопкой FT8.
           Бэкенд: серверный /~~ft8 (ka9q-radio decode_ft8).
           ============================================================ */
        .ft8win {
            box-sizing: border-box;
            width: 100%;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            background: linear-gradient(180deg, var(--bg-panel) 0%, #0d1117 100%);
            font: 11px/1.35 Arial, sans-serif;
            color: var(--text-main);
            text-align: left;
            box-shadow: 0 4px 10px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
        }

        .ft8-head {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 4px 8px;
            padding: 3px 8px;
            background: linear-gradient(180deg, #1c2536 0%, #141c29 100%);
            border-bottom: 1px solid var(--border-color);
            border-radius: 6px 6px 0 0;
        }

        .ft8-title {
            font-weight: bold;
            flex: 1;
            white-space: nowrap;
            color: var(--neon-amber);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-size: 10px;
        }

        .ft8-head span { color: var(--text-muted); }
        .ft8-head b.ft8-count { color: var(--neon-blue); }
        .ft8-head .ft8-count-label { white-space: nowrap; }

        .ft8-clear {
            background: linear-gradient(180deg, #283143 0%, #1a212d 100%);
            color: var(--text-main);
            border: 1px solid #374357;
            border-radius: 3px;
            padding: 1px 8px;
            font-size: 10px;
            font-weight: 500;
            cursor: pointer;
            box-shadow: 0 1px 2px rgba(0,0,0,0.3);
        }
        .ft8-clear:hover { border-color: var(--danger); color: #fff; }

        .ft8-list {
            height: 140px;
            overflow-y: auto;
            background: var(--bg-input);
            color: var(--text-main);
            font: bold 11px/14px "Courier New", monospace;
        }

        .ft8-table {
            border-collapse: collapse;
            width: 100%;
        }

        .ft8-table th {
            position: sticky;
            top: 0;
            background: #1a2130;
            color: var(--text-muted);
            font: bold 10px Arial, sans-serif;
            text-align: left;
            padding: 2px 6px;
            border-bottom: 1px solid var(--border-color);
            z-index: 1;
        }

        /* Числовые колонки (dB, DT, Hz, Distance): и заголовок, и значения —
           по центру, чтобы цифры стояли ровно под названием колонки */
        .ft8-table th:nth-child(2),
        .ft8-table th:nth-child(3),
        .ft8-table th:nth-child(4),
        .ft8-table th:nth-child(7) {
            text-align: center;
        }

        .ft8-table th + th { border-left: 1px solid transparent; }

        .ft8-table td {
            padding: 2px 6px;
            white-space: nowrap;
            border-bottom: 1px solid #242c3a;
            color: var(--text-main);
        }

        /* значения dB/DT/Hz/Distance — по центру колонки (под заголовком) */
        .ft8-table td.ft8-n { text-align: center; color: var(--neon-blue); }
        .ft8-table td.ft8-n.ft8-warn { color: var(--neon-amber); }
        .ft8-table td.ft8-m { color: var(--neon-green); white-space: normal; }
        .ft8-table td.ft8-c { color: #7dd3fc; }

        .ft8-table tr.ft8-sep td { border-top: 1px solid #3a4556; }
        .ft8-table tr:hover td { background: rgba(0,210,255,0.06); }
        .ft8-table tr { cursor: pointer; }

        .ft8-status {
            padding: 1px 8px 2px;
            color: var(--text-muted);
            font-style: italic;
            border-top: 1px solid var(--border-color);
            min-height: 13px;
        }

        .ft8-empty {
            color: var(--text-muted);
            font-style: italic;
        }