+

+    /* ── Login screen ── */

+    #login-screen {

+      display: flex;

+      align-items: center;

+      justify-content: center;

+      min-height: 100dvh;

+      padding: 24px;

+      background: #13182a;

+    }

+    .login-card {

+      background: #fff;

+      border-radius: 16px;

+      padding: 44px 36px 36px;

+      width: 100%;

+      max-width: 380px;

+      display: grid;

+      gap: 24px;

+      box-shadow: 0 8px 40px rgba(0,0,0,.28);

+    }

+    .login-card .brand { text-align: center; display: grid; gap: 6px; }

+    .login-card .brand .icon {

+      margin: 0 auto 4px;

+      width: 52px; height: 52px; border-radius: 14px;

+      background: #e8f0fe; display: flex; align-items: center; justify-content: center;

+    }

+    .login-card .brand .icon svg { width: 26px; height: 26px; fill: var(--accent); }

+    .login-card .brand h1 { margin: 0; font-size: 22px; font-weight: 700; color: var(--ink); }

+    .login-card .brand p { margin: 0; color: var(--muted); font-size: 13px; }

+    .login-card form { display: grid; gap: 16px; }

+    .login-card .field-label { font-size: 13px; font-weight: 600; color: var(--ink); }

+    /* 6 separate OTP digit boxes */

+    .otp-row { display: flex; gap: 8px; justify-content: center; }

+    .otp-row input {

+      width: 48px; height: 56px; border: 1.5px solid #dde2ec; border-radius: 10px;

+      font-size: 22px; font-weight: 600; text-align: center; color: var(--ink);

+      background: #f8fafc; caret-color: transparent; outline: none;

+      transition: border-color .15s, background .15s;

+    }

+    .otp-row input:focus { border-color: var(--accent); background: #fff; }

+    .otp-row input.filled { border-color: #b3c6f0; background: #fff; }

+    .login-card button.primary {

+      width: 100%; border: none; background: var(--accent); color: #fff;

+      border-radius: 10px; padding: 13px; font: inherit; font-size: 15px;

+      font-weight: 600; cursor: pointer; min-height: 48px;

+      display: flex; align-items: center; justify-content: center; gap: 8px;

+    }

+    .login-card button.primary:hover { background: #0f52b8; }

+    .login-card button.primary:disabled { opacity: .55; cursor: not-allowed; }

+    #login-error {

+      color: var(--bad); font-size: 13px; text-align: center;

+      min-height: 18px; margin-top: -8px;

+    }

+

+    /* ── App shell (hidden until authenticated) ── */

+    #app { display: none; }

+    header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; }

+    h1 { margin: 0; font-size: 17px; font-weight: 700; }

+    .header-right { display: flex; align-items: center; gap: 10px; }

+  <!-- ── Login screen ── -->

+  <div id="login-screen">

+    <div class="login-card">

+      <div class="brand">

+        <div class="icon">

+          <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">

+            <path d="M20 3H4a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zm-1 5H5V5h14v3zm1 5H4a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1zm-1 5H5v-3h14v3z"/>

+            <circle cx="17" cy="7" r="1"/><circle cx="19.5" cy="7" r="1"/>

+            <circle cx="17" cy="15.5" r="1"/><circle cx="19.5" cy="15.5" r="1"/>

+          </svg>

+        </div>

+        <h1>Host Manager</h1>

+        <p>madagascar.xdev.ro</p>

+      <form id="login-form">

+        <div class="field-label">Cod Authenticator</div>

+        <div class="otp-row">

+          <input type="text" inputmode="numeric" maxlength="1" pattern="[0-9]" class="otp-digit" autocomplete="one-time-code">

+          <input type="text" inputmode="numeric" maxlength="1" pattern="[0-9]" class="otp-digit">

+          <input type="text" inputmode="numeric" maxlength="1" pattern="[0-9]" class="otp-digit">

+          <input type="text" inputmode="numeric" maxlength="1" pattern="[0-9]" class="otp-digit">

+          <input type="text" inputmode="numeric" maxlength="1" pattern="[0-9]" class="otp-digit">

+          <input type="text" inputmode="numeric" maxlength="1" pattern="[0-9]" class="otp-digit">

+        </div>

+        <button class="primary" type="submit" id="login-btn">Autentifică-te</button>

+      </form>

+      <div id="login-error"></div>

+    </div>

+  </div>

+

+  <!-- ── App (shown after login) ── -->

+  <div id="app">

+    <header>

+      <h1>Host Manager</h1>

+      <div class="header-right">

+        <span class="muted" id="app-updated"></span>

+        <button type="button" id="logout">Logout</button>

+    </header>

+    <main>

+      <section class="toolbar">

+        <button id="refresh">Refresh</button>

+        <a class="linkbtn" href="/download/hosts.yaml">hosts.yaml</a>

+        <a class="linkbtn" href="/download/local-hosts.tsv">local-hosts.tsv</a>

+        <a class="linkbtn" href="/download/monitoring.json">monitoring.json</a>

+        <button id="write-tsv">Write local-hosts.tsv</button>

+        <span id="message" class="muted"></span>

+      </section>

+

+      <section class="panel">

+        <div class="panel-head">

+          <h2>Overview</h2>

+          <div class="stats" id="stats"></div>

+        </div>

+        <div class="problems" id="problems"></div>

+      </section>

+      <section class="panel">

+        <div class="panel-head">

+          <h2>Hosts</h2>

+          <input id="filter" placeholder="filter" style="max-width: 240px">

+        <div class="table-wrap">

+          <table>

+            <thead>

+              <tr>

+                <th style="width: 120px">ID</th>

+                <th style="width: 130px">hosts_ip</th>

+                <th style="width: 130px">dns_ip</th>

+                <th>Names</th>

+                <th style="width: 150px">Roles</th>

+                <th style="width: 110px">Monitoring</th>

+                <th style="width: 90px">Status</th>

+              </tr>

+            </thead>

+            <tbody id="hosts"></tbody>

+          </table>

+        </div>

+      </section>

+

+      <section class="panel">

+        <div class="panel-head">

+          <h2>Edit host</h2>

+        </div>

+        <form id="host-form" class="grid">

+          <label>ID<input name="id" required></label>

+          <label>Status<select name="status"><option>active</option><option>planned</option><option>retired</option></select></label>

+          <label>hosts_ip<input name="hosts_ip" required></label>

+          <label>dns_ip<input name="dns_ip" required></label>

+          <label class="span2">Names<textarea name="names" required></textarea></label>

+          <label>Roles<input name="roles"></label>

+          <label>Sources<input name="sources"></label>

+          <label>Monitoring<select name="monitoring"><option>pending</option><option>enabled</option><option>disabled</option></select></label>

+          <label>Notes<input name="notes"></label>

+          <div class="span2">

+            <button class="primary" type="submit">Save host</button>

+            <button class="danger" type="button" id="delete-host">Delete host</button>

+          </div>

+        </form>

+      </section>

+    </main>

+  </div>

+

+    function showLogin(errorText) {

+      $('app').style.display = 'none';

+      $('login-screen').style.display = 'flex';

+      $('login-error').textContent = errorText || '';

+      document.querySelectorAll('.otp-digit').forEach(i => { i.value = ''; i.classList.remove('filled'); });

+      const first = document.querySelector('.otp-digit');

+      if (first) first.focus();

+    }

+

+    function showApp() {

+      $('login-screen').style.display = 'none';

+      $('app').style.display = 'block';

+    }

+

+      if (!state.authenticated) { showLogin(); return; }

+      showApp();

+      $('app-updated').textContent = data.updated_at ? 'updated ' + data.updated_at : '';

+

+      form.scrollIntoView({ behavior: 'smooth', block: 'start' });

+    // OTP digit boxes — auto-advance, backspace, paste

+    const otpDigits = Array.from(document.querySelectorAll('.otp-digit'));

+    otpDigits[0].focus();

+

+    otpDigits.forEach((input, idx) => {

+      input.addEventListener('keydown', (e) => {

+        if (e.key === 'Backspace') {

+          if (input.value) { input.value = ''; input.classList.remove('filled'); }

+          else if (idx > 0) { otpDigits[idx - 1].value = ''; otpDigits[idx - 1].classList.remove('filled'); otpDigits[idx - 1].focus(); }

+          e.preventDefault();

+        }

+      });

+      input.addEventListener('input', (e) => {

+        const val = input.value.replace(/\D/g, '').slice(-1);

+        input.value = val;

+        input.classList.toggle('filled', !!val);

+        if (val && idx < otpDigits.length - 1) otpDigits[idx + 1].focus();

+        if (val && idx === otpDigits.length - 1) $('login-form').requestSubmit();

+      });

+      input.addEventListener('paste', (e) => {

+        const text = (e.clipboardData || window.clipboardData).getData('text').replace(/\D/g, '');

+        e.preventDefault();

+        text.split('').slice(0, otpDigits.length).forEach((ch, i) => {

+          otpDigits[i].value = ch;

+          otpDigits[i].classList.add('filled');

+        });

+        const next = Math.min(text.length, otpDigits.length - 1);

+        otpDigits[next].focus();

+        if (text.length >= otpDigits.length) $('login-form').requestSubmit();

+      });

+    });

+

+    function getOtp() { return otpDigits.map(i => i.value).join(''); }

+    function clearOtp() { otpDigits.forEach(i => { i.value = ''; i.classList.remove('filled'); }); otpDigits[0].focus(); }

+      const btn = $('login-btn');

+      btn.disabled = true;

+      $('login-error').textContent = '';

+        await api('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ otp: getOtp() }) });

+      } catch (e) {

+        showLogin(e.message === 'invalid_otp' ? 'Cod incorect.' : e.message);

+      } finally {

+        btn.disabled = false;

+      }

+      clearOtp();

+      showLogin();

+    $('refresh').addEventListener('click', () => refresh().catch(e => msg(e.message)));

+    $('filter').addEventListener('input', renderHosts);

+

+    refresh().catch(() => showLogin());