GUI

gui/wails/frontend/dist/assets/index.448f6f10.css

@@ -1 +0,0 @@
-*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:#f0f0f0;font-family:Arial,sans-serif}#app{width:400px;background:white;border-radius:8px;box-shadow:0 2px 10px #0000001a;overflow:hidden}.tabs{display:flex;background:#e9e9e9}.tab-button{flex:1;padding:12px;background:transparent;border:none;cursor:pointer;font-size:16px;transition:background .2s}.tab-button:hover{background:#dcdcdc}.tab-button.active{background:white;border-bottom:3px solid #3498db;font-weight:700}.tab-content{display:none;padding:20px}.tab-content.active{display:block}.buttons-vertical{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}.action-button{padding:12px;font-size:16px;cursor:pointer;border:1px solid #bbb;border-radius:6px;background-color:#f8f8f8;transition:background-color .2s,border-color .2s}.action-button:hover{background-color:#e2e6ea;border-color:#999}.close-button{background-color:#e74c3c;color:#fff;border-color:#c0392b}.close-button:hover{background-color:#c0392b}#frequency-panel{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background-color:#f9f9f9;border:1px solid #ddd;border-radius:6px;margin-bottom:10px}#frequency-label{font-weight:700;color:#555}#frequency-value{font-size:18px;color:#2c3e50}#status-panel{display:flex;align-items:center;gap:10px;padding:10px 14px;background-color:#f9f9f9;border:1px solid #ddd;border-radius:6px}.indicator{width:16px;height:16px;border-radius:50%;display:inline-block}.indicator-red{background-color:#e74c3c}.indicator-green{background-color:#2ecc71}#status-text{font-size:16px;color:#333}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);display:flex;justify-content:center;align-items:center;z-index:100}.modal.hidden{display:none}.modal-content{background:white;padding:20px;border-radius:8px;width:300px;box-shadow:0 5px 15px #0000004d;position:relative}.close-modal{position:absolute;top:10px;right:15px;font-size:22px;cursor:pointer;color:#777}.close-modal:hover{color:#333}.modal-content h3{margin-bottom:15px;text-align:center}.freq-input-group{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:15px}.freq-btn{width:40px;height:40px;font-size:20px;background:#3498db;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background .2s}.freq-btn:hover{background:#2980b9}#freq-input{width:100px;padding:8px;font-size:18px;text-align:center;border:1px solid #ccc;border-radius:4px}#btn-set-freq{display:block;width:100%;margin-top:10px}.error-msg{color:#e74c3c;margin-top:8px;text-align:center;font-size:14px}.error-msg.hidden{display:none}

gui/wails/frontend/dist/assets/index.cb23cfd6.js

@@ -1 +0,0 @@
-(function(){const i=document.createElement("link").relList;if(i&&i.supports&&i.supports("modulepreload"))return;for(const t of document.querySelectorAll('link[rel="modulepreload"]'))a(t);new MutationObserver(t=>{for(const n of t)if(n.type==="childList")for(const s of n.addedNodes)s.tagName==="LINK"&&s.rel==="modulepreload"&&a(s)}).observe(document,{childList:!0,subtree:!0});function m(t){const n={};return t.integrity&&(n.integrity=t.integrity),t.referrerpolicy&&(n.referrerPolicy=t.referrerpolicy),t.crossorigin==="use-credentials"?n.credentials="include":t.crossorigin==="anonymous"?n.credentials="omit":n.credentials="same-origin",n}function a(t){if(t.ep)return;t.ep=!0;const n=m(t);fetch(t.href,n)}})();function h(){return window.go.main.App.CheckConnection()}function b(){return window.go.main.App.Quit()}function p(d){return window.go.main.App.SetFrequency(d)}(function(){const d=document.querySelectorAll(".tab-button"),i=document.querySelectorAll(".tab-content");d.forEach(e=>{e.addEventListener("click",()=>{d.forEach(c=>c.classList.remove("active")),i.forEach(c=>c.classList.remove("active")),e.classList.add("active");const y=e.getAttribute("data-tab");document.getElementById(`tab-${y}`).classList.add("active")})});const m=document.getElementById("btn-check"),a=document.getElementById("btn-freq"),t=document.getElementById("btn-quit"),n=document.getElementById("status-indicator"),s=document.getElementById("status-text"),f=document.getElementById("frequency-label"),u=document.getElementById("frequency-value"),l=document.getElementById("freq-modal"),g=document.getElementById("close-modal"),r=document.getElementById("freq-input"),v=document.getElementById("btn-minus"),E=document.getElementById("btn-plus"),L=document.getElementById("btn-set-freq"),o=document.getElementById("modal-error");m.addEventListener("click",()=>{h().then(e=>{n.classList.remove("indicator-red"),n.classList.add("indicator-green"),s.textContent=`\u0421\u043E\u0435\u0434\u0438\u043D\u0435\u043D\u0438\u0435 \u0443\u0441\u0442\u0430\u043D\u043E\u0432\u043B\u0435\u043D\u043E! ${e.status}`,f.textContent="\u0422\u0435\u043A\u0443\u0449\u0430\u044F \u0447\u0430\u0441\u0442\u043E\u0442\u0430:",u.textContent=e.frequency}).catch(e=>{console.error("\u041E\u0448\u0438\u0431\u043A\u0430 CheckConnection:",e),s.textContent="\u041E\u0448\u0438\u0431\u043A\u0430: \u043D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u0432\u044B\u043F\u043E\u043B\u043D\u0438\u0442\u044C \u043F\u0440\u043E\u0432\u0435\u0440\u043A\u0443"})}),a.addEventListener("click",()=>{l.classList.remove("hidden");const e=u.textContent!=="---"?u.textContent:"145";r.value=e,o.classList.add("hidden")}),g.addEventListener("click",()=>{l.classList.add("hidden")}),window.addEventListener("click",e=>{e.target===l&&l.classList.add("hidden")}),v.addEventListener("click",()=>{let e=parseInt(r.value,10)||1;e=Math.max(1,e-1),r.value=e.toString()}),E.addEventListener("click",()=>{let e=parseInt(r.value,10)||1;e+=1,r.value=e.toString()}),L.addEventListener("click",()=>{const e=r.value.trim();if(!/^\d+$/.test(e)){o.textContent="\u0412\u0432\u043E\u0434\u0438\u043C\u043E\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u0434\u043E\u043B\u0436\u043D\u043E \u0431\u044B\u0442\u044C \u0446\u0435\u043B\u044B\u043C \u043F\u043E\u043B\u043E\u0436\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u043C \u0447\u0438\u0441\u043B\u043E\u043C",o.classList.remove("hidden");return}if(parseInt(e,10)<=0){o.textContent="\u0412\u0432\u043E\u0434\u0438\u043C\u043E\u0435 \u0437\u043D\u0430\u0447\u0435\u043D\u0438\u0435 \u0434\u043E\u043B\u0436\u043D\u043E \u0431\u044B\u0442\u044C \u0446\u0435\u043B\u044B\u043C \u043F\u043E\u043B\u043E\u0436\u0438\u0442\u0435\u043B\u044C\u043D\u044B\u043C \u0447\u0438\u0441\u043B\u043E\u043C",o.classList.remove("hidden");return}p(e).then(c=>{f.textContent="\u0423\u0441\u0442\u0430\u043D\u043E\u0432\u043B\u0435\u043D\u043D\u0430\u044F \u0447\u0430\u0441\u0442\u043E\u0442\u0430:",u.textContent=c,l.classList.add("hidden")}).catch(c=>{o.textContent=c,o.classList.remove("hidden")})}),t.addEventListener("click",()=>{b()})})();

gui/wails/frontend/dist/index.html

@@ -4,14 +4,35 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   
-  <title>Тест (Спектр)</title>
-  <script type="module" crossorigin src="/assets/index.cb23cfd6.js"></script>
-  <link rel="stylesheet" href="/assets/index.448f6f10.css">
+  <title>Спектр</title>
+  <script type="module" crossorigin src="/assets/index.02c817da.js"></script>
+  <link rel="stylesheet" href="/assets/index.41fde905.css">
 </head>
-<body>
+<body data-theme="dark">
+
+  <!-- Переключатель темы -->
+  <button id="theme-toggle" title="Сменить тему">☀</button>
+
+  <!-- Интро при запуске: закрывает всё окно приложения, потом "двери" разъезжаются -->
+  <div id="intro-overlay">
+    <div class="door door-left"></div>
+    <div class="door door-right"></div>
+  </div>
+
   <div id="app">
-    <!-- Заголовки вкладок -->
-    <div class="tabs">
+
+    <!-- Бренд-блок -->
+    <div id="brand">
+      <div class="logo-icon">
+        <img class="logo-dark" src="/assets/logo-dark.ff9a8bc7.jpg" alt="ТЭЧ ДМ" />
+        <img class="logo-light" src="/assets/logo-light.d5e577a8.png" alt="ТЭЧ ДМ" />
+      </div>
+      <h1>СПЕКТР</h1>
+      <div class="tag">видеоприёмник · панель управления</div>
+    </div>
+
+    <!-- Заголовки вкладок (пока скрыты — активен только режим приёмника) -->
+    <div class="tabs" hidden>
       <button class="tab-button active" data-tab="receiver">Режим приемника</button>
       <button class="tab-button" data-tab="detector">Режим детектора</button>
       <button class="tab-button" data-tab="info">Информация</button>
@@ -64,4 +85,4 @@
 
   
 </body>
-</html>
+</html>

gui/wails/frontend/index.html

@@ -4,12 +4,33 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="stylesheet" href="./src/style.css" />
-  <title>Тест (Спектр)</title>
+  <title>Спектр</title>
 </head>
-<body>
+<body data-theme="dark">
+
+  <!-- Переключатель темы -->
+  <button id="theme-toggle" title="Сменить тему">☀</button>
+
+  <!-- Интро при запуске: закрывает всё окно приложения, потом "двери" разъезжаются -->
+  <div id="intro-overlay">
+    <div class="door door-left"></div>
+    <div class="door door-right"></div>
+  </div>
+
   <div id="app">
-    <!-- Заголовки вкладок -->
-    <div class="tabs">
+
+    <!-- Бренд-блок -->
+    <div id="brand">
+      <div class="logo-icon">
+        <img class="logo-dark" src="/src/assets/images/logo-dark.jpg" alt="ТЭЧ ДМ" />
+        <img class="logo-light" src="/src/assets/images/logo-light.png" alt="ТЭЧ ДМ" />
+      </div>
+      <h1>СПЕКТР</h1>
+      <div class="tag">видеоприёмник · панель управления</div>
+    </div>
+
+    <!-- Заголовки вкладок (пока скрыты — активен только режим приёмника) -->
+    <div class="tabs" hidden>
       <button class="tab-button active" data-tab="receiver">Режим приемника</button>
       <button class="tab-button" data-tab="detector">Режим детектора</button>
       <button class="tab-button" data-tab="info">Информация</button>
@@ -62,4 +83,4 @@
 
   <script type="module" src="/src/main.js"></script>
 </body>
-</html>
+</html>

gui/wails/frontend/src/main.js

@@ -4,7 +4,73 @@ import {
   Quit,
 } from "../wailsjs/go/main/App";
 
+// импорт через ES-модуль, а не строкой-путём — иначе vite не подставит
+// правильный хэшированный путь в собранном билде (сломается в проде)
+import logoDarkUrl from "./assets/images/logo-dark.jpg";
+
 (function() {
+  // === Тема (тёмная/светлая) ===
+  const themeToggle = document.getElementById('theme-toggle');
+  themeToggle.addEventListener('click', () => {
+    const cur = document.body.getAttribute('data-theme');
+    const next = cur === 'light' ? 'dark' : 'light';
+    document.body.setAttribute('data-theme', next);
+    themeToggle.textContent = next === 'light' ? '☾' : '☀';
+  });
+
+  // === Интро при запуске (лого "двери" разъезжаются) ===
+  const NATURAL_W = 640, NATURAL_H = 480;
+  const AXIS_X = 312; // ось раздела — середина носа черепа / верхнего зубца шестерни
+  const LOGO_DARK_URL = logoDarkUrl;
+
+  const introOverlay = document.getElementById('intro-overlay');
+  const doorLeft = document.querySelector('#intro-overlay .door-left');
+  const doorRight = document.querySelector('#intro-overlay .door-right');
+
+  function layoutDoors() {
+    const W = window.innerWidth;
+    const H = window.innerHeight;
+    const scale = Math.max(W / NATURAL_W, H / NATURAL_H); // object-fit: cover на весь размер окна
+    const renderW = NATURAL_W * scale;
+    const renderH = NATURAL_H * scale;
+    const offsetX = (W - renderW) / 2;
+    const offsetY = (H - renderH) / 2;
+    const axisDisplayX = offsetX + AXIS_X * scale;
+
+    const leftW = Math.max(0, Math.min(W, axisDisplayX));
+    const rightW = W - leftW;
+
+    doorLeft.style.width = leftW + 'px';
+    doorLeft.style.backgroundImage = `url(${LOGO_DARK_URL})`;
+    doorLeft.style.backgroundSize = renderW + 'px ' + renderH + 'px';
+    doorLeft.style.backgroundPosition = offsetX + 'px ' + offsetY + 'px';
+
+    doorRight.style.left = leftW + 'px';
+    doorRight.style.width = rightW + 'px';
+    doorRight.style.backgroundImage = `url(${LOGO_DARK_URL})`;
+    doorRight.style.backgroundSize = renderW + 'px ' + renderH + 'px';
+    doorRight.style.backgroundPosition = (offsetX - leftW) + 'px ' + offsetY + 'px';
+  }
+
+  const OPEN_AT = 2100;       // момент начала разъезда дверей от старта интро, мс
+  const APPEAR_START = 100;
+  const APPEAR_DUR = 450;
+
+  function playIntro() {
+    introOverlay.style.display = '';
+    introOverlay.classList.remove('appear', 'open');
+    void introOverlay.offsetWidth; // reflow reset
+    layoutDoors();
+
+    setTimeout(() => introOverlay.classList.add('appear'), APPEAR_START);
+    setTimeout(() => introOverlay.classList.add('open'), OPEN_AT);
+    // прячем оверлей из потока/кликов после того как двери разъехались и погасли
+    setTimeout(() => { introOverlay.style.display = 'none'; }, OPEN_AT + 1170);
+  }
+
+  window.addEventListener('resize', layoutDoors);
+  playIntro(); // main.js подключён как type="module" — DOM уже готов на этот момент
+
   // === Переключение вкладок ===
   const tabButtons = document.querySelectorAll('.tab-button');
   const tabContents = document.querySelectorAll('.tab-content');

gui/wails/frontend/src/style.css

@@ -10,138 +10,233 @@ html, body {
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: #f0f0f0;
   font-family: Arial, sans-serif;
-}
-
-#app {
-  width: 400px;
-  background: white;
-  border-radius: 8px;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
   overflow: hidden;
 }
 
-/* Панель вкладок */
-.tabs {
-  display: flex;
-  background: #e9e9e9;
+/* ===================== ТЕМА (тёмная/светлая) ===================== */
+body {
+  background: radial-gradient(circle at 50% 18%, #1a1d24 0%, #0d0f13 70%);
+  transition: background 0.3s ease;
+}
+body[data-theme="light"] {
+  background: radial-gradient(circle at 50% 18%, #ffffff 0%, #dde1e7 70%);
 }
 
+#theme-toggle {
+  position: fixed;
+  top: 16px; right: 18px;
+  z-index: 500;
+  width: 34px; height: 34px;
+  border-radius: 50%;
+  border: 1px solid #333a46;
+  background: #222a37;
+  color: #ccc;
+  cursor: pointer;
+  font-size: 14px;
+  display: flex; align-items: center; justify-content: center;
+}
+body[data-theme="light"] #theme-toggle {
+  border-color: #c7cbd1;
+  background: #ffffff;
+  color: #555;
+}
+
+/* ===================== КАРТОЧКА ПРИЛОЖЕНИЯ ===================== */
+#app {
+  width: 360px;
+  border-radius: 14px;
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+  background: #1b1e24;
+  transition: background 0.3s ease;
+}
+body[data-theme="light"] #app {
+  background: #ffffff;
+}
+
+/* ---- бренд-блок ---- */
+#brand {
+  display: flex; flex-direction: column; align-items: center;
+  padding: 26px 24px 16px;
+  gap: 6px;
+}
+.logo-icon {
+  position: relative;
+  width: 64px; height: 48px; /* пропорции 640:480 исходного лого */
+  margin-bottom: 6px;
+}
+.logo-icon img {
+  position: absolute; inset: 0;
+  width: 100%; height: 100%;
+  object-fit: contain;
+}
+.logo-icon .logo-dark { mix-blend-mode: screen; display: block; }
+.logo-icon .logo-light { mix-blend-mode: multiply; display: none; }
+body[data-theme="light"] .logo-icon .logo-dark { display: none; }
+body[data-theme="light"] .logo-icon .logo-light { display: block; }
+
+#brand h1 {
+  color: #eeeeee;
+  font-size: 21px;
+  letter-spacing: 3.5px;
+  font-weight: 700;
+}
+#brand .tag {
+  color: #7a7f89;
+  font-size: 11px;
+  letter-spacing: 1.2px;
+}
+body[data-theme="light"] #brand h1 { color: #1b1d22; }
+body[data-theme="light"] #brand .tag { color: #888d97; }
+
+/* Панель вкладок (пока скрыта атрибутом hidden в HTML) */
+.tabs {
+  display: flex;
+  background: transparent;
+}
+.tabs[hidden] {
+  display: none; /* без этого .tabs{display:flex} выше перебивает атрибут hidden */
+}
 .tab-button {
   flex: 1;
   padding: 12px;
   background: transparent;
   border: none;
   cursor: pointer;
-  font-size: 16px;
+  font-size: 14px;
+  color: #9aa0aa;
   transition: background 0.2s;
 }
-
-.tab-button:hover {
-  background: #dcdcdc;
-}
-
+.tab-button:hover { background: rgba(255,255,255,0.05); }
 .tab-button.active {
-  background: white;
-  border-bottom: 3px solid #3498db;
+  color: #eee;
+  border-bottom: 2px solid #b8362a;
   font-weight: bold;
 }
+body[data-theme="light"] .tab-button { color: #7a7f89; }
+body[data-theme="light"] .tab-button.active { color: #1b1d22; }
 
 /* Содержимое вкладок */
-.tab-content {
-  display: none;
-  padding: 20px;
-}
-
-.tab-content.active {
-  display: block;
-}
+.tab-content { display: none; padding: 4px 22px 24px; }
+.tab-content.active { display: block; }
 
 /* Вертикально расположенные кнопки */
 .buttons-vertical {
   display: flex;
   flex-direction: column;
-  gap: 12px;
-  margin-bottom: 20px;
+  gap: 10px;
+  margin-bottom: 12px;
 }
 
 .action-button {
-  padding: 12px;
-  font-size: 16px;
+  padding: 11px;
+  font-size: 14px;
   cursor: pointer;
-  border: 1px solid #bbb;
-  border-radius: 6px;
-  background-color: #f8f8f8;
+  border: 1px solid #2a2d34;
+  border-radius: 8px;
+  background-color: #15171c;
+  color: #e8e8e8;
   transition: background-color 0.2s, border-color 0.2s;
 }
-
 .action-button:hover {
-  background-color: #e2e6ea;
-  border-color: #999;
+  background-color: #1d2027;
+  border-color: #3a3e46;
+}
+body[data-theme="light"] .action-button {
+  background-color: #ffffff;
+  border-color: #ccd1d9;
+  color: #22242a;
+}
+body[data-theme="light"] .action-button:hover {
+  background-color: #f0f2f5;
+  border-color: #aeb4bd;
 }
 
 .close-button {
-  background-color: #e74c3c;
+  background-color: #b8362a;
   color: white;
+  border-color: #8f2a20;
+}
+.close-button:hover { background-color: #c73f31; }
+body[data-theme="light"] .close-button {
+  background-color: #e74c3c;
   border-color: #c0392b;
+  color: #fff;
 }
-
-.close-button:hover {
-  background-color: #c0392b;
-}
+body[data-theme="light"] .close-button:hover { background-color: #d8432f; }
 
 /* Панель частоты */
 #frequency-panel {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 10px 14px;
-  background-color: #f9f9f9;
-  border: 1px solid #ddd;
-  border-radius: 6px;
-  margin-bottom: 10px;
-}
-
-#frequency-label {
-  font-weight: bold;
-  color: #555;
-}
-
-#frequency-value {
-  font-size: 18px;
-  color: #2c3e50;
+  padding: 9px 13px;
+  background-color: #15171c;
+  border: 1px solid #2a2d34;
+  border-radius: 8px;
+  margin-bottom: 9px;
 }
+#frequency-label { font-weight: bold; color: #9aa0aa; font-size: 13px; }
+#frequency-value { font-size: 17px; color: #f2f2f2; }
+body[data-theme="light"] #frequency-panel { background-color: #ffffff; border-color: #ccd1d9; }
+body[data-theme="light"] #frequency-label { color: #7a7f89; }
+body[data-theme="light"] #frequency-value { color: #1b1d22; }
 
 /* Панель статуса */
 #status-panel {
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 10px 14px;
-  background-color: #f9f9f9;
-  border: 1px solid #ddd;
-  border-radius: 6px;
+  gap: 9px;
+  padding: 9px 13px;
+  background-color: #15171c;
+  border: 1px solid #2a2d34;
+  border-radius: 8px;
 }
+body[data-theme="light"] #status-panel { background-color: #ffffff; border-color: #ccd1d9; }
 
 .indicator {
-  width: 16px;
-  height: 16px;
+  width: 14px;
+  height: 14px;
   border-radius: 50%;
   display: inline-block;
 }
+.indicator-red { background-color: #e74c3c; }
+.indicator-green { background-color: #2ecc71; }
 
-.indicator-red {
-  background-color: #e74c3c;
+#status-text { font-size: 14px; color: #ddd; }
+body[data-theme="light"] #status-text { color: #333; }
+
+/* ===================== ИНТРО (двери) ===================== */
+#intro-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: #000; /* подстраховка: перекрывает всё, даже пока JS ещё не выставил размеры дверей */
+  transform: scale(1.04);
 }
-
-.indicator-green {
-  background-color: #2ecc71;
+#intro-overlay.appear {
+  animation: introPop 0.45s cubic-bezier(.2,.9,.3,1) forwards;
 }
+@keyframes introPop { to { transform: scale(1); } }
 
-#status-text {
-  font-size: 16px;
-  color: #333;
+.door {
+  position: absolute;
+  top: 0; bottom: 0;
+  overflow: hidden;
+  background-color: #000;
+  background-repeat: no-repeat;
+  transition: transform 1.17s cubic-bezier(.65,0,.35,1);
+}
+.door-left { left: 0; }
+.door-right { left: 0; } /* left/width выставляются из JS под реальный размер окна */
+
+#intro-overlay.open .door-left { transform: translateX(-100%); }
+#intro-overlay.open .door-right { transform: translateX(100%); }
+#intro-overlay.open {
+  transition: opacity 0.45s ease 0.65s;
+  opacity: 0;
+  pointer-events: none;
 }
 
 /* Модальное окно */
@@ -151,7 +246,7 @@ html, body {
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0,0,0,0.4);
+  background: rgba(0,0,0,0.5);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -163,12 +258,17 @@ html, body {
 }
 
 .modal-content {
-  background: white;
+  background: #1b1e24;
   padding: 20px;
   border-radius: 8px;
   width: 300px;
-  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+  box-shadow: 0 5px 15px rgba(0,0,0,0.4);
   position: relative;
+  color: #eee;
+}
+body[data-theme="light"] .modal-content {
+  background: #ffffff;
+  color: #222;
 }
 
 .close-modal {
@@ -177,12 +277,11 @@ html, body {
   right: 15px;
   font-size: 22px;
   cursor: pointer;
-  color: #777;
-}
-
-.close-modal:hover {
-  color: #333;
+  color: #999;
 }
+.close-modal:hover { color: #eee; }
+body[data-theme="light"] .close-modal { color: #777; }
+body[data-theme="light"] .close-modal:hover { color: #333; }
 
 .modal-content h3 {
   margin-bottom: 15px;
@@ -201,25 +300,29 @@ html, body {
   width: 40px;
   height: 40px;
   font-size: 20px;
-  background: #3498db;
+  background: #b8362a;
   color: white;
   border: none;
   border-radius: 4px;
   cursor: pointer;
   transition: background 0.2s;
 }
-
-.freq-btn:hover {
-  background: #2980b9;
-}
+.freq-btn:hover { background: #c73f31; }
 
 #freq-input {
   width: 100px;
   padding: 8px;
   font-size: 18px;
   text-align: center;
-  border: 1px solid #ccc;
+  border: 1px solid #444;
   border-radius: 4px;
+  background: #15171c;
+  color: #eee;
+}
+body[data-theme="light"] #freq-input {
+  border-color: #ccc;
+  background: #fff;
+  color: #222;
 }
 
 #btn-set-freq {
@@ -237,4 +340,4 @@ html, body {
 
 .error-msg.hidden {
   display: none;
-}
+}