Админка: страница переделана — понятнее и в стиле сайта

- шапка как на сайте (логотип факультета, «на сайт», переключатель светлой/тёмной
  темы — тема общая с сайтом и не мигает при загрузке);
- крупная шапка состояния: «Работает / Ожу данные / Ошибка загрузки», сколько
  обновлено назад, число групп и текущий интервал; рядом главная кнопка
  «Обновить сейчас»;
- вместо россыпи чипов — карточки: «Ссылка на расписание» (с кнопкой
  «открыть таблицу»), «Обновление» (интервал + факты: изменился ли файл, дата,
  отпечаток), «Входы в админку» (последняя попытка, последний успешный вход,
  остаток попыток или блокировка), «Данные расписания»;
- предупреждения (ошибка загрузки, невозможность сохранить настройки) вынесены
  отдельной плашкой под шапкой, а не спрятаны среди полей;
- верстка адаптивная: сетка карточек, на телефоне одна колонка и подписи
  под значениями; формы с подписями и подсказками, кнопки с ясной иерархией;
- уведомления и вся логика прежние; тесты 160.

src/frontend/admin.html

@@ -7,46 +7,113 @@
   <title>Админка расписания</title>
   <link rel="icon" type="image/svg+xml" href="/img/app-icon.svg">
   <link rel="stylesheet" href="/style.css">
+  <script>
+    // тему применяем до отрисовки, чтобы не мигало
+    try {
+      const saved = localStorage.getItem("theme");
+      document.documentElement.setAttribute("data-theme", saved === "dark" ? "dark" : "light");
+    } catch (_) {}
+  </script>
   <style>
-    .admin-wrap { max-width: 760px; margin: 0 auto; padding: 26px 18px 60px; }
-    .admin-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
-    .admin-head img { width: 40px; height: 40px; }
-    .admin-title { font-size: 22px; font-weight: 700; color: var(--text); }
-    .admin-sub { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
-    .admin-card {
-      background: var(--surface); border: 1px solid var(--border);
-      padding: 16px 18px; margin-bottom: 14px;
+    body { background: var(--bg); }
+
+    .admin-main { max-width: 1080px; margin: 0 auto; padding: 22px 18px 70px; }
+    .admin-actions { display: flex; align-items: center; gap: 8px; }
+    .admin-ghost {
+      display: inline-flex; align-items: center; height: 36px; padding: 0 12px;
+      border: 1px solid var(--border-2); background: var(--surface); color: var(--muted);
+      font-size: 13px; font-weight: 600; text-decoration: none;
     }
-    .admin-card h2 { font-size: 15px; margin-bottom: 10px; color: var(--text); }
-    .admin-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
-    .admin-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 260px; min-width: 0; }
-    .admin-field label { font-size: 13px; color: var(--muted); }
+    .admin-ghost:hover { color: var(--accent); border-color: var(--accent); }
+
+    /* ---- вход ---- */
+    .admin-login {
+      max-width: 420px; margin: 6vh auto 0; padding: 30px 28px 26px;
+      background: var(--surface); border: 1px solid var(--border);
+      box-shadow: 0 14px 40px var(--shadow); text-align: center;
+    }
+    .admin-login-logo {
+      width: 58px; height: 58px; padding: 10px; margin: 0 auto 14px;
+      background: linear-gradient(160deg, var(--nav-1), var(--nav-2));
+      border-radius: 14px; display: block;
+    }
+    .admin-login h1 { font-size: 20px; color: var(--text); margin-bottom: 6px; }
+    .admin-login-hint { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
+    .admin-login form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
+    .admin-login .admin-btn { margin-top: 4px; width: 100%; }
+
+    /* ---- шапка состояния ---- */
+    .admin-hero {
+      display: flex; align-items: center; justify-content: space-between; gap: 16px;
+      flex-wrap: wrap;
+      background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent);
+      padding: 16px 18px; margin-bottom: 16px;
+    }
+    .admin-hero.is-ok { border-left-color: #2f9e5f; }
+    .admin-hero.is-error { border-left-color: var(--accent-red-bright); }
+    .admin-hero-state { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 700; color: var(--text); }
+    .admin-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted-2); }
+    .admin-hero.is-ok .admin-dot { background: #2f9e5f; }
+    .admin-hero.is-error .admin-dot { background: var(--accent-red-bright); }
+    .admin-hero-sub { color: var(--muted); font-size: 13px; margin-top: 5px; }
+
+    /* ---- карточки ---- */
+    .admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; }
+    .admin-card {
+      background: var(--surface); border: 1px solid var(--border); padding: 16px 18px 14px;
+      display: flex; flex-direction: column; gap: 10px; min-width: 0;
+    }
+    .admin-card h2 {
+      font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px;
+      color: var(--muted); font-weight: 700;
+    }
+    .admin-card-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+    .admin-inline { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
+
+    .admin-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
+    .admin-field > span { font-size: 12px; color: var(--muted); }
+    .admin-field-narrow { flex: 0 1 160px; }
     .admin-field input {
-      font-size: 14px; padding: 8px 10px; border: 1px solid var(--border-2);
-      background: var(--surface-2); color: var(--text); width: 100%; min-width: 0;
+      font-size: 14px; padding: 9px 11px; width: 100%; min-width: 0;
+      border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text);
     }
     .admin-field input:focus { outline: 2px solid var(--accent-blue); outline-offset: -1px; }
-    .admin-btn {
-      font-size: 14px; font-weight: 600; padding: 9px 14px; cursor: pointer;
-      border: 1px solid var(--accent); background: var(--accent); color: #fff;
-    }
-    .admin-btn.secondary { background: var(--surface-2); color: var(--text); border-color: var(--border-2); }
-    .admin-btn.danger { background: var(--accent-red-bright); border-color: var(--accent-red-bright); }
-    .admin-btn[disabled] { opacity: .55; cursor: default; }
-    .admin-status { display: flex; flex-wrap: wrap; gap: 10px; }
-    .admin-chip {
-      background: var(--surface-2); border: 1px solid var(--border); padding: 8px 12px; min-width: 0;
-    }
-    .admin-chip .k { font-size: 12px; color: var(--muted); }
-    .admin-chip .v { font-size: 14px; font-weight: 600; color: var(--text); word-break: break-word; overflow-wrap: anywhere; }
-    .admin-error { color: var(--accent-red-bright); font-size: 13px; margin-top: 10px; word-break: break-word; overflow-wrap: anywhere; }
-    .admin-warn { color: #b8860b; font-size: 13px; margin-top: 10px; word-break: break-word; }
-    .admin-hint { color: var(--muted-2); font-size: 12px; margin-top: 8px; }
-    .hidden { display: none !important; }
-    .bad { color: var(--accent-red-bright); }
-    .good { color: #2f9e5f; }
 
-    /* всплывающие уведомления вместо alert(): сами исчезают через 15 секунд */
+    .admin-btn {
+      font-size: 14px; font-weight: 600; padding: 9px 14px; cursor: pointer; white-space: nowrap;
+      border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent);
+    }
+    .admin-btn:hover { filter: brightness(1.06); }
+    .admin-btn.secondary { background: var(--surface-2); color: var(--text); border-color: var(--border-2); }
+    .admin-btn.danger { background: transparent; color: var(--accent-red-bright); border-color: var(--accent-red-bright); }
+    .admin-btn-lg { font-size: 15px; padding: 11px 18px; }
+    .admin-btn[disabled] { opacity: .55; cursor: default; filter: none; }
+
+    .admin-link { font-size: 13px; color: var(--accent-blue); text-decoration: none; }
+    .admin-link:hover { text-decoration: underline; }
+
+    /* ---- факты ---- */
+    .admin-facts { display: flex; flex-direction: column; gap: 6px; margin: 0; }
+    .admin-facts > div { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; }
+    .admin-facts dt { font-size: 13px; color: var(--muted); flex: 0 0 auto; }
+    .admin-facts dd {
+      margin: 0; font-size: 14px; color: var(--text); font-weight: 600; text-align: right;
+      min-width: 0; overflow-wrap: anywhere;
+    }
+    .admin-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 500; font-size: 13px; }
+    .good { color: #2f9e5f; }
+    .bad { color: var(--accent-red-bright); }
+
+    .admin-hint { font-size: 12px; color: var(--muted-2); line-height: 1.45; }
+    .admin-alert {
+      font-size: 13px; padding: 10px 12px; margin-bottom: 14px;
+      background: var(--error-bg); border: 1px solid var(--error-border); color: var(--error-text);
+      overflow-wrap: anywhere;
+    }
+    .admin-alert.warn { background: color-mix(in srgb, #b8860b 12%, var(--surface)); border-color: #b8860b; color: #8a6300; }
+    .hidden { display: none !important; }
+
+    /* ---- уведомления ---- */
     #toast-wrap {
       position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
       z-index: 9999; display: flex; flex-direction: column; gap: 8px;
@@ -54,9 +121,8 @@
     }
     .toast {
       display: flex; align-items: flex-start; gap: 10px;
-      background: var(--surface); border: 1px solid var(--border-2);
-      border-left: 4px solid var(--accent-blue);
-      box-shadow: 0 8px 24px var(--shadow);
+      background: var(--surface); border: 1px solid var(--border-2); border-left: 4px solid var(--accent-blue);
+      box-shadow: 0 10px 30px var(--shadow);
       padding: 12px 14px; font-size: 14px; color: var(--text);
       white-space: pre-line; animation: toast-in .18s ease-out;
     }
@@ -69,77 +135,115 @@
       font-size: 15px; line-height: 1; cursor: pointer; padding: 2px 4px;
     }
     .toast .toast-close:hover { color: var(--text); }
-    @keyframes toast-in {
-      from { opacity: 0; transform: translateY(6px); }
-      to { opacity: 1; transform: none; }
+    @keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+
+    @media (max-width: 640px) {
+      .admin-main { padding: 16px 12px 60px; }
+      .admin-hero { padding: 14px; }
+      .admin-hero .admin-btn { width: 100%; }
+      .admin-login { margin-top: 2vh; padding: 24px 18px; }
+      .admin-facts > div { flex-direction: column; gap: 2px; }
+      .admin-facts dd { text-align: left; }
     }
   </style>
 </head>
 <body>
-  <div class="admin-wrap">
-    <div class="admin-head">
-      <img src="/img/owl.svg" alt="">
-      <div class="admin-title">Админка расписания</div>
-    </div>
-    <div class="admin-sub">Управление источником данных и обновлением. Страница доступна только по секретной ссылке.</div>
 
-    <section id="login-card" class="admin-card hidden">
-      <h2>Вход</h2>
-      <form id="login-form" autocomplete="off">
-        <div class="admin-field"><label for="login">Логин</label><input id="login" required></div>
-        <div class="admin-field" style="margin-top:10px"><label for="password">Пароль</label><input id="password" type="password" required></div>
-        <div class="admin-row" style="margin-top:12px">
-          <button class="admin-btn" type="submit">Войти</button>
+  <div class="topbar">
+    <div class="topbar-brand">
+      <img class="topbar-logo" src="/img/owl.svg" alt="">
+      <div class="topbar-text">
+        <span class="topbar-university">Расписание — админка</span>
+        <span class="topbar-faculty">источник данных и обновление</span>
       </div>
+    </div>
+    <div class="admin-actions">
+      <a class="admin-ghost" href="/">← на сайт</a>
+      <button class="theme-toggle" id="theme-toggle" title="Переключить тему">
+        <svg class="icon icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
+        <svg class="icon icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+      </button>
+    </div>
+  </div>
+
+  <main class="admin-main">
+    <section id="login-card" class="admin-login hidden">
+      <img class="admin-login-logo" src="/img/owl-white.svg" alt="">
+      <h1>Вход в админку</h1>
+      <p class="admin-login-hint">Страница открывается только по секретной ссылке. После нескольких неудачных попыток вход временно блокируется.</p>
+      <form id="login-form" autocomplete="on">
+        <label class="admin-field"><span>Логин</span><input id="login" autocomplete="username" required></label>
+        <label class="admin-field"><span>Пароль</span><input id="password" type="password" autocomplete="current-password" required></label>
+        <button class="admin-btn" type="submit">Войти</button>
       </form>
-      <div id="login-error" class="admin-error hidden"></div>
+      <div id="login-error" class="admin-alert hidden" style="margin:14px 0 0"></div>
     </section>
 
     <section id="panel" class="hidden">
-      <div class="admin-card">
-        <h2>Состояние</h2>
-        <div class="admin-status" id="status-chips"></div>
-        <div id="state-error" class="admin-error hidden"></div>
-        <div id="state-warn" class="admin-warn hidden"></div>
+      <div class="admin-hero" id="hero">
+        <div>
+          <div class="admin-hero-state"><span class="admin-dot"></span><span id="hero-title">Загружаю…</span></div>
+          <div class="admin-hero-sub" id="hero-sub"></div>
         </div>
-
-      <div class="admin-card">
-        <h2>Входы в админку</h2>
-        <div class="admin-status" id="auth-chips"></div>
-        <div class="admin-hint">Каждая попытка входа запоминается: откуда, когда и чем закончилась. После нескольких неудач вход временно блокируется.</div>
+        <button class="admin-btn admin-btn-lg" id="refresh" type="button">Обновить сейчас</button>
       </div>
+      <div id="hero-alert" class="admin-alert hidden"></div>
 
-      <div class="admin-card">
+      <div class="admin-grid">
+        <article class="admin-card">
           <h2>Ссылка на расписание</h2>
-        <div class="admin-row">
-          <div class="admin-field">
-            <label for="link">Публичная ссылка Яндекс.Диска</label>
+          <label class="admin-field"><span>Публичная ссылка Яндекс.Диска</span>
             <input id="link" spellcheck="false" placeholder="https://disk.yandex.ru/i/...">
-          </div>
+          </label>
+          <div class="admin-card-actions">
             <button class="admin-btn" id="save-link" type="button">Сохранить ссылку</button>
+            <a class="admin-link" id="link-open" href="#" target="_blank" rel="noopener">открыть таблицу</a>
           </div>
-        <div class="admin-hint">Ссылка проверяется скачиванием: если не открывается — не сохранится, данные на сайте останутся прежними.
-          Значение хранится в файле настроек и <b>имеет приоритет над .env</b> — именно по нему сайт берёт расписание.</div>
-      </div>
+          <p class="admin-hint">Ссылка проверяется скачиванием: если не открывается — не сохранится, данные на сайте останутся прежними.
+            Значение хранится в файле настроек и <b>имеет приоритет над .env</b>.</p>
+        </article>
 
-      <div class="admin-card">
+        <article class="admin-card">
           <h2>Обновление</h2>
-        <div class="admin-row">
-          <div class="admin-field" style="flex:0 1 200px">
-            <label for="interval">Интервал, минут</label>
+          <div class="admin-inline">
+            <label class="admin-field admin-field-narrow"><span>Интервал, минут</span>
               <input id="interval" type="number" min="1" max="1440" step="1">
+            </label>
+            <button class="admin-btn secondary" id="save-interval" type="button">Сохранить</button>
           </div>
-          <button class="admin-btn secondary" id="save-interval" type="button">Сохранить интервал</button>
-          <button class="admin-btn" id="refresh" type="button">Обновить сейчас</button>
-        </div>
-        <div class="admin-hint">По интервалу расписание перечитывается, только если на Диске изменилась дата файла. Кнопка «Обновить сейчас» скачивает таблицу всегда — её и нажимайте сразу после правок.</div>
-      </div>
+          <dl class="admin-facts">
+            <div><dt>Файл при последнем обновлении</dt><dd id="fact-changed">—</dd></div>
+            <div><dt>Дата файла на Диске</dt><dd id="fact-modified">—</dd></div>
+            <div><dt>Отпечаток файла</dt><dd id="fact-hash" class="admin-mono">—</dd></div>
+          </dl>
+          <p class="admin-hint">По интервалу таблица перечитывается, только если на Диске изменилась дата файла.
+            Кнопка «Обновить сейчас» скачивает таблицу всегда — её и нажимайте сразу после правок.</p>
+        </article>
 
-      <div class="admin-card">
+        <article class="admin-card">
+          <h2>Входы в админку</h2>
+          <dl class="admin-facts">
+            <div><dt>Последняя попытка</dt><dd id="auth-attempt">—</dd></div>
+            <div><dt>Последний успешный вход</dt><dd id="auth-success">—</dd></div>
+            <div><dt>Осталось попыток</dt><dd id="auth-throttle">—</dd></div>
+          </dl>
+          <div class="admin-card-actions" style="margin-top:auto">
             <button class="admin-btn danger" id="logout" type="button">Выйти</button>
           </div>
-    </section>
+          <p class="admin-hint">Каждая попытка запоминается: откуда, когда и чем закончилась. Порог и время блокировки задаются в .env.</p>
+        </article>
+
+        <article class="admin-card">
+          <h2>Данные расписания</h2>
+          <dl class="admin-facts">
+            <div><dt>Групп</dt><dd id="fact-groups">—</dd></div>
+            <div><dt>Обновлено</dt><dd id="fact-updated">—</dd></div>
+            <div><dt>Файл настроек</dt><dd id="fact-settings" class="admin-mono">—</dd></div>
+          </dl>
+        </article>
       </div>
+    </section>
+  </main>
 
   <div id="toast-wrap"></div>
 
@@ -198,71 +302,87 @@
       return isNaN(d) ? String(value) : d.toLocaleString("ru-RU", { dateStyle: "short", timeStyle: "short" });
     }
 
-    function chip(key, value, cls) {
-      const div = document.createElement("div");
-      div.className = "admin-chip";
-      div.innerHTML = `<div class="k">${key}</div><div class="v"></div>`;
-      const v = div.querySelector(".v");
-      v.textContent = value;
-      if (cls) v.classList.add(cls);
-      return div;
+    /** «5 минут назад» для свежести данных. */
+    function ago(value) {
+      if (!value) return "";
+      const d = new Date(value);
+      if (isNaN(d)) return "";
+      const sec = Math.max(0, Math.round((Date.now() - d.getTime()) / 1000));
+      if (sec < 60) return "только что";
+      const min = Math.round(sec / 60);
+      if (min < 60) return `${min} мин назад`;
+      const hours = Math.round(min / 60);
+      if (hours < 24) return `${hours} ч назад`;
+      return `${Math.round(hours / 24)} дн назад`;
     }
 
     function loginText(info) {
       if (!info) return "нет данных";
-      // у успешного входа поля ok нет — там итог и так известен
       const status = info.ok === undefined ? "" : ` · ${info.ok ? "успешно" : "неудачно"}`;
       return `${fmt(info.at)} · ${info.ip}${status}`;
     }
 
-    function renderState(state) {
-      const chips = $("status-chips");
-      chips.innerHTML = "";
-      chips.appendChild(chip("Интервал обновления", `${state.interval_minutes} мин`));
-      chips.appendChild(chip("Обновлено", fmt(state.last_updated)));
-      chips.appendChild(chip(
-        "Файл при последнем обновлении",
-        state.changed ? "изменился" : "без изменений",
-        state.changed ? "good" : null,
-      ));
-      chips.appendChild(chip("Дата файла на Диске", fmt(state.table_modified)));
-      chips.appendChild(chip("Групп в расписании", String(state.groups)));
-      if (state.content_hash) chips.appendChild(chip("sha256 файла", state.content_hash));
-      chips.appendChild(chip("Текущая ссылка", state.link || "не задана"));
-      if (state.settings_file) chips.appendChild(chip("Файл настроек", state.settings_file));
-
-      const auth = $("auth-chips");
-      auth.innerHTML = "";
-      const attempt = state.last_attempt;
-      auth.appendChild(chip(
-        "Последняя попытка входа",
-        loginText(attempt),
-        attempt ? (attempt.ok ? "good" : "bad") : null,
-      ));
-      auth.appendChild(chip("Последний успешный вход", loginText(state.last_success)));
-      const throttle = state.throttle || {};
-      if (throttle.locked_until) {
-        auth.appendChild(chip("Вход заблокирован до", fmt(throttle.locked_until), "bad"));
-      } else if (throttle.max_attempts) {
-        auth.appendChild(chip(
-          "Осталось попыток",
-          `${throttle.attempts_left} из ${throttle.max_attempts}`,
-        ));
+    function setText(id, value, cls) {
+      const el = $(id);
+      if (!el) return;
+      el.textContent = value;
+      el.classList.remove("good", "bad");
+      if (cls) el.classList.add(cls);
     }
 
+    function renderState(state) {
+      // крупная строка состояния
+      const hero = $("hero");
+      const hasError = Boolean(state.error);
+      hero.classList.toggle("is-error", hasError);
+      hero.classList.toggle("is-ok", !hasError && state.has_data);
+      $("hero-title").textContent = hasError
+        ? "Ошибка загрузки расписания"
+        : (state.has_data ? "Работает" : "Жду данные");
+      const parts = [];
+      if (state.last_updated) parts.push(`обновлено ${fmt(state.last_updated)} (${ago(state.last_updated)})`);
+      parts.push(`групп: ${state.groups}`);
+      parts.push(`интервал ${state.interval_minutes} мин`);
+      $("hero-sub").textContent = parts.join(" · ");
+
+      const alert = $("hero-alert");
+      const warnings = [];
+      if (state.error) warnings.push("Ошибка загрузки: " + state.error);
+      if (state.settings_save_error) {
+        warnings.push("Настройки не сохраняются на диск: " + state.settings_save_error +
+          " — после перезапуска службы ссылка и интервал вернутся к значениям из .env");
+      }
+      alert.classList.toggle("warn", !state.error && Boolean(state.settings_save_error));
+      alert.textContent = warnings.join(" ");
+      alert.classList.toggle("hidden", !warnings.length);
+
+      // ссылка
       $("link").value = state.link || "";
+      const open = $("link-open");
+      open.href = state.link || "#";
+      open.classList.toggle("hidden", !state.link);
+
+      // обновление
       $("interval").value = state.interval_minutes;
+      setText("fact-changed", state.changed ? "изменился" : "без изменений", state.changed ? "good" : null);
+      setText("fact-modified", fmt(state.table_modified));
+      setText("fact-hash", state.content_hash || "—");
 
-      const err = $("state-error");
-      err.textContent = state.error ? "Ошибка загрузки: " + state.error : "";
-      err.classList.toggle("hidden", !state.error);
+      // входы
+      const attempt = state.last_attempt;
+      setText("auth-attempt", loginText(attempt), attempt ? (attempt.ok ? "good" : "bad") : null);
+      setText("auth-success", loginText(state.last_success));
+      const throttle = state.throttle || {};
+      if (throttle.locked_until) {
+        setText("auth-throttle", `заблокировано до ${fmt(throttle.locked_until)}`, "bad");
+      } else if (throttle.max_attempts) {
+        setText("auth-throttle", `${throttle.attempts_left} из ${throttle.max_attempts}`);
+      }
 
-      const warn = $("state-warn");
-      warn.textContent = state.settings_save_error
-        ? "Настройки не сохраняются на диск: " + state.settings_save_error +
-          " — после перезапуска службы ссылка и интервал вернутся к значениям из .env."
-        : "";
-      warn.classList.toggle("hidden", !state.settings_save_error);
+      // данные
+      setText("fact-groups", String(state.groups));
+      setText("fact-updated", state.last_updated ? `${fmt(state.last_updated)} (${ago(state.last_updated)})` : "—");
+      setText("fact-settings", state.settings_file || "—");
     }
 
     function showLogin(show) {
@@ -278,6 +398,11 @@
       return () => { button.disabled = false; button.textContent = original; };
     }
 
+    async function withButton(button, text, fn) {
+      const done = busy(button, text);
+      try { await fn(); } finally { done(); }
+    }
+
     async function loadState() {
       const r = await api("/state");
       if (r.status === 401) { showLogin(true); return; }
@@ -289,11 +414,6 @@
       renderState(r.data);
     }
 
-    async function withButton(button, text, fn) {
-      const done = busy(button, text);
-      try { await fn(); } finally { done(); }
-    }
-
     $("login-form").addEventListener("submit", async (e) => {
       e.preventDefault();
       const error = $("login-error");
@@ -350,6 +470,13 @@
       showLogin(true);
     });
 
+    $("theme-toggle").addEventListener("click", () => {
+      const current = document.documentElement.getAttribute("data-theme") === "dark" ? "dark" : "light";
+      const next = current === "dark" ? "light" : "dark";
+      document.documentElement.setAttribute("data-theme", next);
+      try { localStorage.setItem("theme", next); } catch (_) {}
+    });
+
     loadState();
   </script>
 </body>