a {
    text-decoration: none;
  }

.ramka {
  text-align: center;
  border: 1px solid black;
  padding: 1px 6px;
  background: #aaa;
  border-radius: 5px;
  color: black; 
  font-size: 16px;
  font-family: 'Courier New', sans-serif;
  font-style: italic;
  font-weight: bold;      
}

/* === СТИЛИ ДЛЯ ТУМБЛЕРОВ === */
/* Контейнер для каждого тумблера с элементами (изображение, подпись) */
.tog_container {
  border: 1px solid white; /* Рамка вокруг контейнера: толщина 1 px, сплошная линия, белого цвета */
  padding: 10px; /* Внутренние отступы внутри контейнера со всех сторон — 10 px */
  border-radius: 10px; /* Закругление углов контейнера — радиус 10 px */
  width: 95%; /* Ширина контейнера составляет 95 % от ширины родительского элемента */
  max-width: 360px; /* Максимальная ширина контейнера — не более 360 px (ограничение для адаптивности) */
  margin: 10px auto; /* Внешние отступы: сверху и снизу по 10 px, по бокам — автоматическое выравнивание (центрирование) */
  background-color: MidnightBlue; /* Цвет фона контейнера — тёмно‑синий (MidnightBlue) */
  display: flex; /* Включаем Flexbox‑модель для гибкого расположения дочерних элементов */
  color: #aaa;  /* Цвет текста внутри контейнера — белый */
  font-family: 'Courier New', sans-serif; /* Семейство шрифтов для текста внутри контейнера */
  font-style: italic;
  font-size: 11px;
  //margin-left: 8px;
  align-items: center; /* Выравниваем дочерние элементы по вертикали по центру контейнера */
  gap: 10px; /* Расстояние между соседними дочерними элементами внутри Flex‑контейнера — 10 px */
  flex-wrap: nowrap; /* Запрещаем перенос дочерних элементов на новую строку (остаются в одной линии) */
  //flex-wrap: wrap; /* Разрешаем перенос дочерних элементов на новые строки */
}
.tog_container > * + * {
  margin-left: 8px; /* отступы внутри */
}

/* Основной контейнер тумблера (большой размер по умолчанию) */
.toggle-container {
  position: relative; /* Относительное позиционирование для корректной работы абсолютного позиционирования дочерних элементов */
  display: inline-block; /* Строчно‑блочный элемент */
  width: 60px; /* Ширина большого тумблера */
  height: 34px; /* Высота большого тумблера */
  margin-left: 10px; /* Отступ слева от других элементов */
}
/* Скрытый чекбокс — не отображается, но обрабатывает состояние */
.toggle-input {
  opacity: 0; /* Полностью прозрачный */
  width: 0; /* Нулевая ширина */
  height: 0; /* Нулевая высота */
}
/* Видимая часть тумблера — фон переключателя */
.toggle-label {
  position: absolute; /* Абсолютное позиционирование внутри .toggle-container */
  cursor: pointer; /* Курсор в виде указателя при наведении */
  top: 0; /* Занимает всю высоту контейнера */
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #aaa; /* Серый цвет фона в выключенном состоянии */
  transition: background-color 0.3s; /* Плавная смена цвета фона */
  border-radius: 16px; /* Закруглённые углы (половина высоты для полного скругления) */
  border: 1px solid black; /* Чёрная рамка */
}
/* Кружок внутри тумблера (бегунок) */
.toggle-label::before {
  position: absolute; /* Абсолютное позиционирование */
  content: ""; /* Псевдоэлемент должен иметь content */
  height: 26px; /* Высота бегунка для большого тумблера */
  width: 26px; /* Ширина бегунка для большого тумблера */
  left: 2px; /* Позиция слева внутри контейнера */
  bottom: 2px; /* Позиция снизу внутри контейнера */
  background-color: white; /* Белый цвет бегунка */
  transition: transform 0.3s; /* Плавное перемещение бегунка */
  border-radius: 50%; /* Круглый бегунок */
  border: 1px solid black; /* Чёрная рамка */
}
/* Стиль для включённого состояния всех тумблеров (фон становится зелёным) */
.toggle-input:checked + .toggle-label {
  background-color: #aaa; /* серый цвет фона во включённом состоянии */
}
/* Перемещение бегунка вправо при включённом состоянии для больших тумблеров */
.toggle-input:checked + .toggle-label::before {
  transform: translateX(26px); /* Сдвиг на ширину бегунка */
}

/* === СТИЛИ ДЛЯ МАЛЕНЬКИХ ТУМБЛЕРОВ (модификатор) === */
/* Размеры маленького тумблера */
.toggle-container.small {
  width: 42px; /* Уменьшенная ширина */
  height: 22px; /* Уменьшенная высота */
}
/* Закругление углов для маленького тумблера (менее закруглённый) */
.toggle-container.small .toggle-label {
  border-radius: 10px; /* Половина высоты маленького тумблера */
}
/* Параметры бегунка для маленького тумблера */
.toggle-container.small .toggle-label::before {
  width: 16px; /* Меньшая ширина бегунка */
  height: 16px; /* Меньшая высота бегунка */
  left: 1px; /* Смещение слева для маленького тумблера */
  bottom: 1px; /* Смещение снизу для маленького тумблера */
  transition: transform 0.3s; /* Плавное перемещение бегунка */
  border-radius: 50%; /* Круглый бегунок */
  border: 1px solid black; /* Чёрная рамка */
}
/* Сдвиг бегунка для маленького тумблера при включении */
.toggle-container.small .toggle-input:checked + .toggle-label::before {
  transform: translateX(20px); /* Сдвиг на ширину контейнера минус ширина бегунка */
}

/* === ДОПОЛНИТЕЛЬНЫЕ СТИЛИ ДЛЯ СОСТОЯНИЙ === */
/* Цвет бегунка в выключенном состоянии (тёмно‑красный) для всех тумблеров с ID, оканчивающимся на "Toggle" */
/* Цвет бегунка во включённом состоянии (зелёный) */
.status-on + .toggle-label::before,
.toggle-input:checked + .toggle-label.status-on::before {
  background-color: #228B22; /* Зелёный цвет */
}

/* Явное переопределение для выключенного состояния */
.status-off + .toggle-label::before,
.toggle-input:checked + .toggle-label.status-off::before {
  background-color: #8B2222; /* Тёмно‑красный цвет */
}

.pic-image {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

.wifi-container {
    border: 1px solid white;
    padding: 10px;
    border-radius: 10px;
    width: 95%;
    max-width: 360px;
    margin: 10px auto;
    background-color: MidnightBlue;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
}

.cpu-label {
    color: black;
    font-family: 'Courier New', sans-serif;
    font-size: 14px;
    font-style: italic;
    font-weight: bold;
}

.cpu-value {
    color: black;
    font-family: 'Courier New', sans-serif;
    font-size: 14px;
  	font-style: italic;
  	font-weight: bold;
}

/* Стили для блока лога */
.log {
  background-color: #1e1e1e;
  color: #00ff9d;
  font-family: 'Courier New', sans-serif;
  font-size: 12px;
  padding: 10px;
  border-radius: 5px;
  overflow-y: auto;
  max-height: 200px;
  margin: 0; /* Убираем внешние отступы */
  width: 100%; /* Занимаем всю ширину контейнера */
  max-width: 100%;
  box-sizing: border-box;
}

.butt {
  border: 1px solid white;
  font-family: 'Courier New', sans-serif;
  font-size: 15px;
  font-weight: bold;  
  color: black;  
  padding: 3px 6px;
  border-radius: 4px;
  background: #bfbfbf;
  box-shadow: 0 0 2px 2px white;
  border: 1px solid black;  

}

.log div {
    margin: 2px 0;
    line-height: 1.4;
}

.websocket-accordion {
  margin: 10px auto;
  width: 100%;
  max-width: 380px;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
  border: 2px solid black;
  border-radius: 10px;
}

.websocket-summary {
  background-color: #b35466;
  color: black;
  padding: 10px;
  font-family: 'Courier New', sans-serif;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  text-align: center;
  font-style: italic;
  border: 1px solid white;  
  border-radius: 10px;
}

.websocket-summary::marker {
  color: #00ff9d;
  font-size: 16px;
}

.websocket-accordion[open] .websocket-summary {
  border-bottom: 1px solid #444;
  border: 1px solid white;  
  border-radius: 10px;  
}

.websocket-summary {
  list-style: none;
  display: block;
}

.binar-accordion {
  margin: 10px auto;
  width: 100%;
  max-width: 380px;
  overflow: hidden;
  padding: 0;
  box-sizing: border-box;
  border: 2px solid black;
  border-radius: 10px;
  background-color: #1e1e1e;
}

.binar-summary {
  background-color: MidnightBlue;
  color: white;
  padding: 10px;
  font-family:  'Courier New', sans-serif;
  font-size: 14px;
  //font-weight: bold;
  cursor: pointer;
  user-select: none;
  text-align: center;
  font-style: italic;
  border: 1px solid white;
  border-radius: 10px;
}

.binar-summary::marker {
  color: #00ff9d;
  font-size: 16px;
}

.binar-accordion[open] .binar-summary {
  border-bottom: 1px solid #444;
  border: 1px solid white;
  border-radius: 10px;
}

.binar-summary {
  list-style: none;
  display: block;
}

.binar-container {
  border: 1px solid white;
  padding: 10px;
  border-radius: 10px;
  width: 95%;
  max-width: 360px;
  margin: 10px auto;
  background-color: MidnightBlue;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-family: Verdana;
}

#login-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.login-box {
  background: MidnightBlue;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

.login-box h3 {
  color: white;
  font-style: italic;
  font-family: 'Courier New', sans-serif;
}

#password-input {
  padding: 10px;
  margin: 10px 0;
  width: 200px;
  font-style: italic;
  font-family: 'Courier New', sans-serif;
}

#login-btn {
  padding: 10px 20px;
  background: #4CAF50;
  color: black;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-style: italic;
  font-family: 'Courier New', sans-serif;
  font-size: 14px;
  font-weight: bold;
}
/* Новые стили для кнопки выхода вверху страницы */
.logout-button-new {
  display: inline-block;
  background-color: #333;
  color: #00ff9d;
  padding: 5px 10px;
  font-family: 'Courier New', sans-serif;
  font-size: 14px;
  font-weight: bold;
  font-style: italic;
  cursor: pointer;
  user-select: none;
  text-align: center;
  border: 1px solid white;  
  border-radius: 10px;
}

.logout-button-new:hover {
  background-color: #e03d55; /* Темнее при наведении */
  transform: scale(1.05);
  border-color: #e03d55;
}

.logout-button-new:active {
  transform: scale(0.95);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.log-item {
  margin: 0px 0; /* Отступ между строками */
  font-family: 'Courier New', sans-serif;
  font-size: 14px;
  color: #00ff9d;
  white-space: nowrap; /* Запретить перенос внутри строки */
}

#modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #bfbfbf;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  /* Ширина — 100% от ширины окна браузера */
  width: 100vw;
  /* Высота — 70% от высоты окна браузера (на 30% меньше) */
  height: 70vh;
  /* Убираем ограничения max-width/max-height, чтобы не мешать новым размерам */
  max-width: none;
  max-height: none;
  /* Дополнительно: чтобы содержимое не вылезало за границы */
  box-sizing: border-box;
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  /* Размеры и форма кружка */
  width: 30px;
  height: 30px;
  border-radius: 50%; /* Делает элемент круглым */
  /* Голубой фон */
  background-color: #3498db; /* Можно заменить на любой голубой оттенок, например #007BFF */
  /* Центрирование крестика внутри кружка */
  display: flex;
  justify-content: center;
  align-items: center;
  /* Цвет крестика (белый для контраста с голубым) */
  color: white;
  font-size: 24px;
  /* Убираем рамку и подчёркивание */
  text-decoration: none;
  border: none;
  outline: none;
  }
  /* Эффект наведения (опционально) */
  .close-button:hover {
    background-color: #3e8e41; /* Темнее при наведении */
  }
#modal-iframe {
  width: 100%; /* Должен заполнять контейнер */
  height: 100%; /* Должен заполнять контейнер */
}
.hidden {
  display: none;
}

.temperature-scale-container {
  width: 100%;
  padding: 5px 0;
  box-sizing: border-box;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 1px;
}

.temperature-scale-label {
  color: #bfbfbf; /* Зелёный цвет как в интерфейсе */
  font-family: 'Courier New', sans-serif;
  font-size: 14px;
  //font-style: italic;
  margin-bottom: 1px; /* Небольшой отступ от шкалы */
  text-shadow: 0 0 2px rgba(0, 255, 157, 0.3);
}

.temperature-scale {
  position: relative;
  margin: 10px auto;
  width: 100%;
  max-width: 380px;
  height: 68px;
  background-color: #333;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  /* Белая рамка вокруг шкалы */
  border: 2px solid #fff;
  /* Дополнительно: лёгкая внутренняя тень для объёма */
  box-shadow: 
    0 2px 5px rgba(0, 0, 0, 0.3),
    inset 0 0 2px rgba(255, 255, 255, 0.2);
}

/* Постоянная градиентная шкала */
.scale-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    /* 1. Синяя зона: холод (≤ −10 °C) → плавно в более светлый синий */
    #1E3D59 0%,      /* Тёмно‑синий */
    #4A90E2 20%,    /* Переход к среднему синему: 0–20% */
    /* 2. Синяя зона: −10…0 °C → плавно к тёплому оттенку */
    #4A90E2 25%,
    #66B2FF 40%,    /* Светло‑синий: переход 25–40% */
    /* 3. Переходная зона: 0…15 °C → от синего к оранжевому */
    #66B2FF 45%,
    #FFA500 60%,   /* Ярко‑оранжевый: переход 45–60% */
    /* 4. Тёплая зона: 15…25 °C → насыщеннее к жару */
    #FFA500 65%,
    #FF8C00 75%,  /* Тёмно‑оранжевый: переход 65–75% */
    /* 5. Жаркая зона: > 25 °C → кораллово‑красный */
    #FF8C00 80%,
    #FF6B6B 100%  /* Коралловый: переход 80–100% */
  );
  z-index: 0;
}

/* Треугольная стрелка вверху шкалы */
.temp-cursor {
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 0;
  /* Создаём треугольник через границы */
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 10px solid #000; /* Чёрная стрелка */
  z-index: 2;
  transform: translateX(-50%);
  transition: left 0.5s ease-in-out;
}

/* Текст температуры под стрелкой */
#tempValueDisplay {
  position: absolute;
  top: 12px; /* Отступ от стрелки */
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-family: 'Courier New', sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 2px 4px;
  border-radius: 4px;
}

/* Убираем прежние псевдоэлементы */
.temp-cursor::before,
.temp-cursor::after {
  display: none;
}

/* Насечки (вертикальные штрихи) вверху шкалы */
.tick {
  position: absolute;
  top: 0;
  left: 50%; /* Будет переопределено через style в HTML */
  width: 1px;
  height: 6px; /* Высота штриха */
  background-color: #fff; /* Теперь белые */
  z-index: 1;
  transform: translateX(-50%); /* Центрируем по оси X */
  /* Тонкая серая окантовка для контраста */
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}

/* Нижние насечки (вертикальные штрихи внизу шкалы) */
.tick-bottom {
  position: absolute;
  bottom: 0; /* Располагаем у нижней границы шкалы */
  left: 50%; /* Будет переопределено через style в HTML */
  width: 1px;
  height: 6px; /* Высота штриха */
  background-color: #fff; /* Белый цвет */
  z-index: 1;
  transform: translateX(-50%); /* Центрируем по оси X */
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.3); /* Лёгкая тень для контраста */
}

/* Вторая стрелка (вниз) для температуры в гараже */
.temp-cursor-garage {
  position: absolute;
  bottom: 0; /* Располагаем снизу */
  left: 50%;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid #000; /* Стрелка направлена вниз */
  z-index: 2;
  transform: translateX(-50%);
  transition: left 0.5s ease-in-out;
}

/* Текст температуры под второй стрелкой */
#tempValueDisplayGarage {
  position: absolute;
  bottom: 12px; /* Отступ от стрелки вниз */
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-family: 'Courier New', sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  white-space: nowrap;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 2px 4px;
  border-radius: 4px;
  z-index: 3;
}
 
/* Горизонтальная разделительная линия внутри шкалы */
.divider-line {
  position: absolute;
  top: 50%;
  left: 10px;
  right: 10px;
  height: 1px;
  border-top: 1px dotted #fff; /* Пунктир (точки) белого цвета */
  z-index: 1;
  box-shadow: 0 0 1px black;
  background: 
    linear-gradient(
      to right,
      #fff 50%,
      transparent 50%
    );
  background-size: 10px 4px; /* 4px — длина точки + промежуток */
  border: none; /* Убираем border-top */  
}

/* Чтобы линия не перекрывала тики и стрелки, задаём z-index ниже */
.tick,
.tick-bottom,
.temp-cursor,
.temp-cursor-garage {
  z-index: 2;
}
.dark-green-circle {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: #228B22; /* Лесной зелёный — тёмно‑зелёный */
  border-radius: 50%;
  margin-right: 8px;
  border: 2px solid black; /* Чёрная рамка толщиной 1 px */
  box-shadow: 0 0 2px 2px green;
}
.red-circle {
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: #8B2222; /* Бордовый; #DC143C - Малиновый — насыщенный красный */
  border-radius: 50%;
  margin-right: 8px;
  border: 2px solid black; /* Чёрная рамка толщиной 1 px */
  box-shadow: 0 0 2px 2px red;  
}