@logboard/cli 1.0.0

package/views/settings.ejs

@@ -0,0 +1,1159 @@
+<%- include('partials/head', { title: 'Settings' }) %>
+
+<style>
+  /* ── Settings-specific styles ─────────────────────────────────────── */
+  .settings-layout   { display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: start; }
+  .settings-nav      { position: sticky; top: 0; display: flex; flex-direction: column; gap: 2px; }
+  .settings-nav-item {
+    display: flex; align-items: center; gap: 8px;
+    padding: 8px 12px; border-radius: var(--radius); font-size: 12px; font-weight: 500;
+    color: var(--text2); cursor: pointer; transition: all .15s; text-decoration: none; border: none;
+    background: none; width: 100%; text-align: left;
+  }
+  .settings-nav-item:hover       { background: var(--surface2); color: var(--text); text-decoration: none; }
+  .settings-nav-item.active      { background: var(--accent-dim); color: var(--accent-l); }
+  .settings-nav-item svg         { opacity: .7; flex-shrink: 0; }
+  .settings-nav-item.active svg  { opacity: 1; }
+  .settings-section              { scroll-margin-top: 8px; }
+  .section-header {
+    font-size: 11px; font-weight: 700; text-transform: uppercase;
+    letter-spacing: .8px; color: var(--text3); margin: 0 0 10px;
+    padding-bottom: 8px; border-bottom: 1px solid var(--border);
+    display: flex; align-items: center; gap: 8px;
+  }
+  .section-header svg { color: var(--accent); }
+
+  /* Password strength */
+  .strength-bar  { height: 3px; border-radius: 2px; background: var(--surface3); margin-top: 6px; overflow: hidden; }
+  .strength-fill { height: 100%; border-radius: 2px; transition: width .3s, background .3s; width: 0; }
+  .strength-label{ font-size: 11px; margin-top: 4px; }
+
+  /* Toggle switch */
+  .toggle-wrap   { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); }
+  .toggle-info   { display: flex; flex-direction: column; gap: 2px; }
+  .toggle-title  { font-size: 13px; font-weight: 500; color: var(--text); }
+  .toggle-desc   { font-size: 11px; color: var(--text3); }
+  .toggle        { position: relative; width: 38px; height: 22px; flex-shrink: 0; }
+  .toggle input  { opacity: 0; width: 0; height: 0; position: absolute; }
+  .toggle-slider {
+    position: absolute; inset: 0; background: var(--surface3); border-radius: 22px;
+    cursor: pointer; transition: background .2s;
+    border: 1px solid var(--border2);
+  }
+  .toggle-slider::before {
+    content: ''; position: absolute; width: 16px; height: 16px;
+    left: 2px; bottom: 2px; background: var(--text3);
+    border-radius: 50%; transition: transform .2s, background .2s;
+  }
+  .toggle input:checked + .toggle-slider                { background: var(--accent); border-color: var(--accent); }
+  .toggle input:checked + .toggle-slider::before        { transform: translateX(16px); background: #fff; }
+
+  /* Retention slider */
+  .range-row  { display: flex; align-items: center; gap: 12px; }
+  .range-val  {
+    min-width: 52px; text-align: center; font-family: 'JetBrains Mono', monospace;
+    font-size: 14px; font-weight: 700; color: var(--accent-l);
+    background: var(--surface2); border: 1px solid var(--border);
+    border-radius: var(--radius); padding: 4px 8px;
+  }
+  input[type=range] {
+    flex: 1; -webkit-appearance: none; height: 4px; border-radius: 2px;
+    background: var(--surface3); outline: none; cursor: pointer;
+  }
+  input[type=range]::-webkit-slider-thumb {
+    -webkit-appearance: none; width: 16px; height: 16px;
+    border-radius: 50%; background: var(--accent); cursor: pointer;
+    border: 2px solid var(--bg); box-shadow: 0 0 0 2px var(--accent);
+    transition: transform .15s;
+  }
+  input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); }
+
+  /* 2FA QR modal */
+  .modal-overlay {
+    display: none; position: fixed; inset: 0; z-index: 1000;
+    background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
+    align-items: center; justify-content: center;
+  }
+  .modal-overlay.open { display: flex; }
+  .modal-box {
+    background: var(--surface); border: 1px solid var(--border);
+    border-radius: var(--radius-lg); padding: 28px; width: 100%; max-width: 420px;
+    box-shadow: 0 24px 60px rgba(0,0,0,.5); animation: modalIn .2s ease;
+  }
+  @keyframes modalIn { from { transform: translateY(16px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
+  .modal-title { font-size: 15px; font-weight: 700; margin-bottom: 4px; color: var(--text); }
+  .modal-sub   { font-size: 12px; color: var(--text2); margin-bottom: 20px; }
+  .qr-wrap     { display: flex; justify-content: center; margin-bottom: 20px; }
+  .qr-wrap img { border-radius: 8px; border: 4px solid #fff; }
+
+  /* Input-copy row */
+  .copy-row    { display: flex; gap: 6px; }
+  .copy-row .form-input { font-family: 'JetBrains Mono', monospace; font-size: 12px; }
+
+  /* Section card with left accent */
+  .card.accent-left { border-left: 3px solid var(--accent); }
+
+  /* Admin badge */
+  .admin-only-tag {
+    display: inline-flex; align-items: center; gap: 4px;
+    font-size: 10px; font-weight: 600; color: var(--yellow);
+    background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.25);
+    padding: 1px 6px; border-radius: 4px; letter-spacing: .3px;
+  }
+</style>
+
+<div class="app-shell">
+  <%- include('partials/sidebar') %>
+  <div class="main-area">
+
+    <header class="top-header">
+      <div class="page-title">Settings</div>
+      <div class="header-actions">
+        <span style="font-size:12px;color:var(--text3);">
+          Signed in as <strong style="color:var(--text)"><%= user.username %></strong>
+          <span class="badge <%= user.role === 'admin' ? 'badge-purple' : 'badge-info' %>" style="margin-left:6px;"><%= user.role %></span>
+        </span>
+      </div>
+    </header>
+
+    <div class="page-content">
+
+      <% const __presets = typeof PRESETS !== 'undefined' ? PRESETS : {}; %>
+      <!-- ── Theme Picker (global admin) ──────────────────────────────────────────────── -->
+      
+
+
+      <div class="settings-layout">
+
+        <!-- ── Left sticky nav ──────────────────────────────────────── -->
+        <nav class="settings-nav" id="settings-nav">
+          <a class="settings-nav-item active" href="#account" onclick="navClick(this)">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+            Account
+          </a>
+          <a class="settings-nav-item" href="#password" onclick="navClick(this)">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+            Password
+          </a>
+          <a class="settings-nav-item" href="#twofa" onclick="navClick(this)">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
+            Two-Factor Auth
+          </a>
+          <a class="settings-nav-item" href="#retention" onclick="navClick(this)">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3,6 5,6 21,6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4h6v2"/></svg>
+            Log Retention
+          </a>
+          <a class="settings-nav-item" href="#integrations" onclick="navClick(this)">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
+            Integrations
+          </a>
+          <a class="settings-nav-item" href="#stream" onclick="navClick(this)">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22,12 18,12 15,21 9,3 6,12 2,12"/></svg>
+            Stream
+          </a>
+          <% if (isAdmin) { %>
+          <a class="settings-nav-item" href="#apikey" onclick="navClick(this)">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>
+            API Key
+          </a>
+          <% } %>
+          <a class="settings-nav-item" href="#ipwhitelist" onclick="navClick(this)">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+            IP Whitelist
+          </a>
+          <a class="settings-nav-item" href="#appearance" onclick="navClick(this)">
+            <svg width="14" height="14" 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>
+            Appearance
+          </a>
+        </nav>
+
+        <!-- ── Right: settings sections ──────────────────────────────── -->
+        <div style="display:flex;flex-direction:column;gap:16px;">
+
+          <!-- ═══════════════════════════════ ACCOUNT ═══════ -->
+          <div class="card settings-section" id="account">
+            <div class="section-header">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+              Account
+            </div>
+            <div style="display:flex;align-items:center;gap:16px;">
+              <div style="width:56px;height:56px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#fff;flex-shrink:0;">
+                <%= user.username[0].toUpperCase() %>
+              </div>
+              <div style="flex:1;">
+                <div style="font-size:18px;font-weight:700;color:var(--text);margin-bottom:4px;"><%= user.username %></div>
+                <div style="display:flex;align-items:center;gap:8px;">
+                  <span class="badge <%= user.role === 'admin' ? 'badge-purple' : 'badge-info' %>"><%= user.role %></span>
+                  <span style="font-size:11px;color:var(--text3);">Session expires in 24h from login</span>
+                </div>
+              </div>
+              <button class="btn btn-danger btn-sm" onclick="doLogout()">
+                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16,17 21,12 16,7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
+                Sign Out
+              </button>
+            </div>
+          </div>
+
+          <!-- ═══════════════════════════════ PASSWORD ══════ -->
+          <div class="card settings-section" id="password">
+            <div class="section-header">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+              Change Password
+            </div>
+            <div style="max-width:420px;display:flex;flex-direction:column;gap:14px;">
+              <div class="form-group" style="margin:0">
+                <label class="form-label">Current Password</label>
+                <input type="password" id="pw-current" class="form-input" placeholder="Enter current password" autocomplete="current-password"/>
+              </div>
+              <div class="form-group" style="margin:0">
+                <label class="form-label">New Password</label>
+                <input type="password" id="pw-new" class="form-input" placeholder="Min. 8 characters" autocomplete="new-password" oninput="updateStrength(this.value)"/>
+                <div class="strength-bar"><div id="strength-fill" class="strength-fill"></div></div>
+                <div id="strength-label" class="strength-label text-muted"></div>
+              </div>
+              <div class="form-group" style="margin:0">
+                <label class="form-label">Confirm New Password</label>
+                <input type="password" id="pw-confirm" class="form-input" placeholder="Repeat new password" autocomplete="new-password"/>
+              </div>
+              <div>
+                <button class="btn btn-primary" id="pw-btn" onclick="changePassword()">
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17,21 17,13 7,13 7,21"/><polyline points="7,3 7,8 15,8"/></svg>
+                  Update Password
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <!-- ═══════════════════════════════ 2FA ══════════ -->
+          <div class="card settings-section" id="twofa">
+            <div class="section-header">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="2" width="14" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>
+              Two-Factor Authentication
+            </div>
+
+            <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;">
+              <div style="flex:1;min-width:200px;">
+                <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;">
+                  <span id="totp-dot" class="dot <%= totpEnabled ? 'dot-green dot-pulse' : 'dot-gray' %>"></span>
+                  <span id="totp-status-text" style="font-size:14px;font-weight:600;color:var(--text)">
+                    <%= totpEnabled ? 'Enabled' : 'Disabled' %>
+                  </span>
+                  <span id="totp-badge" class="badge <%= totpEnabled ? 'badge-green' : 'badge-debug' %>">
+                    <%= totpEnabled ? 'active' : 'off' %>
+                  </span>
+                </div>
+                <p style="font-size:12px;color:var(--text2);max-width:360px;line-height:1.7;">
+                  Two-factor authentication adds a second layer of security to your account.
+                  When enabled, you'll need to enter a time-based code from your authenticator
+                  app (Google Authenticator, Authy, etc.) on every login.
+                </p>
+              </div>
+              <div id="totp-actions" style="display:flex;gap:8px;flex-shrink:0;">
+                <% if (totpEnabled) { %>
+                <button class="btn btn-danger btn-sm" id="totp-disable-btn" onclick="disable2fa()">
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+                  Disable 2FA
+                </button>
+                <% } else { %>
+                <button class="btn btn-primary btn-sm" id="totp-enable-btn" onclick="open2faModal()">
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+                  Enable 2FA
+                </button>
+                <% } %>
+              </div>
+            </div>
+          </div>
+
+          <!-- ═══════════════════════════════ RETENTION ═══ -->
+          <div class="card settings-section" id="retention">
+            <div class="section-header">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3,6 5,6 21,6"/><path d="M19 6l-1 14H6L5 6"/><path d="M9 6V4h6v2"/></svg>
+              Log Retention
+              <% if (isAdmin) { %><span class="admin-only-tag"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/></svg>Admin</span><% } %>
+            </div>
+            <% if (isAdmin) { %>
+            <div style="display:flex;flex-direction:column;gap:16px;">
+              <div>
+                <label class="form-label" style="margin-bottom:10px;">Retention Period</label>
+                <div class="range-row">
+                  <input type="range" id="retention-range" min="1" max="90" value="<%= settings.retentionDays %>"
+                    oninput="document.getElementById('retention-val').textContent=this.value+' days';document.getElementById('retention-num').value=this.value"/>
+                  <span id="retention-val" class="range-val"><%= settings.retentionDays %> days</span>
+                </div>
+                <div style="display:flex;justify-content:space-between;font-size:11px;color:var(--text3);margin-top:4px;padding:0 2px;">
+                  <span>1 day</span><span>30 days</span><span>60 days</span><span>90 days</span>
+                </div>
+              </div>
+              <div style="display:flex;align-items:center;gap:10px;">
+                <div style="flex:1;">
+                  <label class="form-label">Or enter exact days</label>
+                  <input type="number" id="retention-num" class="form-input" min="1" max="365" value="<%= settings.retentionDays %>"
+                    oninput="syncRetentionSlider(this.value)" style="max-width:120px;"/>
+                </div>
+                <button class="btn btn-primary" style="align-self:flex-end;" onclick="saveRetention()">
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17,21 17,13 7,13 7,21"/><polyline points="7,3 7,8 15,8"/></svg>
+                  Save
+                </button>
+              </div>
+              <hr class="divider">
+              <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;">
+                <div>
+                  <div style="font-size:13px;font-weight:500;color:var(--text);margin-bottom:2px;">Manual Cleanup</div>
+                  <div style="font-size:12px;color:var(--text2);">Delete all log files older than the current retention period right now.</div>
+                </div>
+                <button class="btn btn-danger btn-sm" id="cleanup-btn" onclick="runCleanup()">
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3,6 5,6 21,6"/><path d="M19 6l-1 14H6L5 6"/></svg>
+                  Run Cleanup Now
+                </button>
+              </div>
+            </div>
+            <% } else { %>
+            <div style="display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface2);border-radius:var(--radius);border:1px solid var(--border);">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--text3)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
+              <div>
+                <div style="font-size:13px;font-weight:500;color:var(--text);">Current Retention: <strong style="color:var(--accent-l)"><%= settings.retentionDays %> days</strong></div>
+                <div style="font-size:11px;color:var(--text3);margin-top:2px;">Only admins can change retention settings.</div>
+              </div>
+            </div>
+            <% } %>
+          </div>
+
+          <!-- ═══════════════════════════════ INTEGRATIONS ═ -->
+          <div class="card settings-section" id="integrations">
+            <div class="section-header">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
+              Integrations
+              <% if (isAdmin) { %><span class="admin-only-tag"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/></svg>Admin</span><% } %>
+            </div>
+            <% if (isAdmin) { %>
+            <div style="display:flex;flex-direction:column;gap:14px;max-width:500px;">
+              <div>
+                <label class="form-label">
+                  Webhook URL
+                  <span style="font-size:11px;color:var(--text3);font-weight:400;margin-left:6px;">— triggered on every <span class="badge badge-error" style="font-size:9px;">error</span> log</span>
+                </label>
+                <div class="copy-row">
+                  <input type="url" id="webhook-url" class="form-input" placeholder="https://hooks.slack.com/… or leave empty to disable"
+                    value="<%= settings.webhookUrl %>"/>
+                  <button class="btn btn-primary btn-sm" style="white-space:nowrap" onclick="saveWebhook()">Save</button>
+                </div>
+                <div style="font-size:11px;color:var(--text3);margin-top:6px;">
+                  Payload: <code style="background:var(--surface3);padding:1px 5px;border-radius:3px;font-family:'JetBrains Mono',monospace;">{ "alert": "error_log", "log": { … } }</code>
+                </div>
+              </div>
+              <div style="padding:10px 12px;background:var(--surface2);border-radius:var(--radius);border:1px solid var(--border);display:flex;align-items:center;gap:10px;">
+                <span class="dot <%= settings.webhookUrl ? 'dot-green' : 'dot-gray' %>" id="webhook-dot"></span>
+                <span id="webhook-status-text" style="font-size:12px;color:var(--text2);">
+                  <%= settings.webhookUrl ? 'Webhook active — alerts are firing' : 'No webhook configured — alerts are off' %>
+                </span>
+              </div>
+            </div>
+            <% } else { %>
+            <div style="padding:12px 14px;background:var(--surface2);border-radius:var(--radius);border:1px solid var(--border);">
+              <div style="font-size:13px;color:var(--text);">Webhook: <strong style="color:<%= settings.webhookUrl ? 'var(--green)' : 'var(--text3)' %>"><%= settings.webhookUrl ? 'Configured' : 'Not set' %></strong></div>
+              <div style="font-size:11px;color:var(--text3);margin-top:2px;">Only admins can configure integrations.</div>
+            </div>
+            <% } %>
+          </div>
+
+          <!-- ═══════════════════════════════ STREAM ═══════ -->
+          <div class="card settings-section" id="stream">
+            <div class="section-header">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22,12 18,12 15,21 9,3 6,12 2,12"/></svg>
+              Real-time Stream
+              <% if (isAdmin) { %><span class="admin-only-tag"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/></svg>Admin</span><% } %>
+            </div>
+            <div style="display:flex;flex-direction:column;gap:10px;">
+              <div class="toggle-wrap">
+                <div class="toggle-info">
+                  <div class="toggle-title">Server-Sent Events (SSE)</div>
+                  <div class="toggle-desc">Enables the <code style="font-family:'JetBrains Mono',monospace;font-size:11px;">/api/logs/stream</code> endpoint and the Live page real-time feed</div>
+                </div>
+                <label class="toggle">
+                  <input type="checkbox" id="stream-toggle" <%= settings.enableStream ? 'checked' : '' %>
+                    <% if (!isAdmin) { %>disabled<% } %>
+                    onchange="<% if (isAdmin) { %>saveStream(this.checked)<% } %>"/>
+                  <span class="toggle-slider"></span>
+                </label>
+              </div>
+              <% if (!isAdmin) { %>
+              <div style="font-size:11px;color:var(--text3);padding:0 2px;">Stream is currently <strong style="color:<%= settings.enableStream ? 'var(--green)' : 'var(--red)' %>"><%= settings.enableStream ? 'enabled' : 'disabled' %></strong>. Only admins can change this setting.</div>
+              <% } else { %>
+              <div style="font-size:11px;color:var(--text3);padding:0 2px;">Changes take effect immediately — connected clients will be dropped if you disable the stream.</div>
+              <% } %>
+            </div>
+          </div>
+
+          <!-- ═══════════════════════════════ API KEY ══════ -->
+          <% if (isAdmin) { %>
+          <div class="card settings-section" id="apikey">
+            <div class="section-header">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></svg>
+              API Key
+              <span class="admin-only-tag"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26"/></svg>Admin</span>
+            </div>
+            <div style="display:flex;flex-direction:column;gap:12px;max-width:500px;">
+              <p style="font-size:12px;color:var(--text2);line-height:1.7;">
+                The API key is used to authenticate log ingest requests via the
+                <code style="background:var(--surface3);padding:1px 5px;border-radius:3px;font-family:'JetBrains Mono',monospace;font-size:11px;">X-Api-Key</code> header.
+                Keep it secret — treat it like a password.
+              </p>
+              <div>
+                <label class="form-label">Current API Key</label>
+                <div class="copy-row">
+                  <input type="password" id="apikey-input" class="form-input" value="api-key-stored-in-env" readonly
+                    style="font-family:'JetBrains Mono',monospace;letter-spacing:2px;"/>
+                  <button class="btn btn-secondary btn-sm" onclick="toggleApiKey()" title="Show/hide">
+                    <svg id="apikey-eye" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
+                  </button>
+                  <button class="btn btn-secondary btn-sm" onclick="copyApiKey()">
+                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+                  </button>
+                </div>
+              </div>
+              <div style="padding:10px 14px;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);border-radius:var(--radius);display:flex;gap:10px;">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--yellow)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0;margin-top:1px;"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
+                <div style="font-size:12px;color:var(--text2);line-height:1.6;">
+                  The API key is stored in your <code style="font-family:'JetBrains Mono',monospace;font-size:11px;">.env</code> file as <code style="font-family:'JetBrains Mono',monospace;font-size:11px;">API_KEY</code>.
+                  To rotate it, update the <code style="font-family:'JetBrains Mono',monospace;font-size:11px;">.env</code> file and restart the server.
+                </div>
+              </div>
+              <div>
+                <label class="form-label" style="margin-bottom:6px;">Usage Example</label>
+                <pre style="font-family:'JetBrains Mono',monospace;font-size:11px;background:var(--surface3);padding:12px;border-radius:6px;color:var(--text2);overflow-x:auto;line-height:1.8;border:1px solid var(--border);">curl -X POST http://localhost:9900/api/logs \
+  -H "X-Api-Key: &lt;your-key&gt;" \
+  -H "Content-Type: application/json" \
+  -d '{"appName":"myapp","logs":["..."]}'</pre>
+              </div>
+            </div>
+          </div>
+          <% } %>
+
+
+          <!-- ═══════════════════════════════ IP WHITELIST ══ -->
+          <% if (isAdmin) { %>
+          <div class="card settings-section" id="ipwhitelist">
+            <div class="section-header">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+              IP Whitelist
+              <span style="font-size:10px;font-weight:600;background:rgba(245,158,11,.12);color:var(--yellow);border:1px solid rgba(245,158,11,.25);padding:1px 6px;border-radius:4px;">Admin</span>
+            </div>
+            <div style="max-width:500px;display:flex;flex-direction:column;gap:12px;">
+              <div style="font-size:12px;color:var(--text2);line-height:1.7;">
+                Restrict log ingest (<code style="font-family:'JetBrains Mono',monospace;background:var(--surface3);padding:1px 5px;border-radius:3px;">POST /api/logs</code>) to specific IPs.
+                Leave empty to allow all. Supports exact IPs and <code style="font-family:'JetBrains Mono',monospace;background:var(--surface3);padding:1px 5px;border-radius:3px;">/24</code> prefixes (e.g. <code style="font-family:'JetBrains Mono',monospace;background:var(--surface3);padding:1px 5px;border-radius:3px;">192.168.1.0/24</code>).
+              </div>
+              <div>
+                <label class="form-label">Allowed IPs (one per line)</label>
+                <textarea id="ip-whitelist" class="form-input" rows="5"
+                  placeholder="192.168.1.100&#10;10.0.0.0/24&#10;(empty = allow all)"
+                  style="font-family:'JetBrains Mono',monospace;font-size:12px;resize:vertical;"><%= (settings.ipWhitelist||[]).join('\n') %></textarea>
+              </div>
+              <div>
+                <button class="btn btn-primary btn-sm" onclick="saveIPWhitelist()">Save Whitelist</button>
+              </div>
+            </div>
+          </div>
+          <% } %>
+
+          <!-- ═══════════════════════════════ BRANDING ═══ -->
+          <% if (isAdmin) { %>
+          <div class="card settings-section" id="branding">
+            <div class="section-header">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/></svg>
+              Branding &amp; App Name
+            </div>
+            <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px;">
+              <div class="form-group" style="margin:0">
+                <label class="form-label">App Name</label>
+                <input type="text" id="brand-name" class="form-input" value="<%= settings.appName || 'LogBoard' %>" maxlength="64" placeholder="LogBoard"/>
+              </div>
+              <div class="form-group" style="margin:0">
+                <label class="form-label">Logo URL <span style="color:var(--text3);font-weight:400">(PNG/SVG)</span></label>
+                <input type="text" id="brand-logo" class="form-input" value="<%= settings.appLogoUrl !== '/public/logo.png' ? settings.appLogoUrl : '' %>" placeholder="/public/logo.png or https://…"/>
+              </div>
+            </div>
+            <!-- Favicon URL -->
+            <div class="form-group" style="margin:8px 0 0;">
+              <label class="form-label">Favicon URL <span style="color:var(--text3);font-weight:400">(leave blank for default)</span></label>
+              <div style="display:flex;gap:8px;align-items:center;">
+                <input type="text" id="brand-favicon" class="form-input" style="flex:1"
+                  value="<%= settings.faviconUrl || '' %>"
+                  placeholder="https://yoursite.com/favicon.ico"
+                  oninput="previewFavicon(this.value)"/>
+                <img id="favicon-preview" src="<%= settings.faviconUrl || '' %>"
+                  style="width:28px;height:28px;border-radius:4px;object-fit:contain;background:var(--surface2);padding:3px;<%=settings.faviconUrl?'':'display:none;'%>"
+                  onerror="this.style.display='none'"/>
+              </div>
+            </div>
+            <div style="display:flex;gap:8px;align-items:center;margin-top:12px;">
+              <button class="btn btn-primary btn-sm" onclick="saveBranding()">Save Branding</button>
+              <span style="font-size:11px;color:var(--text3);">Changes apply on next page load</span>
+            </div>
+          </div>
+          <% } %>
+
+          <!-- ═══════════════════════════════ THEME & APPEARANCE (additional settings) ═══ -->
+          <div class="card settings-section" id="appearance">
+            <div class="section-header">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="13.5" cy="6.5" r="2.5"/><circle cx="6.5" cy="20" r="2.5"/><circle cx="20" cy="20" r="2.5"/><path d="M13.5 9v10.5"/></svg>
+              Theme &amp; Appearance
+              <span style="font-size:11px;color:var(--text3);font-weight:400;margin-left:4px;">— admin sets the global accent; all users see it</span>
+            </div>
+
+            <!-- Preset circles -->
+            <div style="margin-bottom:16px;">
+              <div style="font-size:11px;font-weight:500;color:var(--text3);margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px;">Presets</div>
+              <div style="display:flex;gap:10px;flex-wrap:wrap;" id="preset-grid2">
+                <% Object.entries(__presets).forEach(function(kv){ var pid=kv[0], p=kv[1]; %>
+                <div
+                  onclick="applyPreset('<%= pid %>',<%= p.r %>,<%= p.g %>,<%= p.b %>,'<%= p.mode %>')"
+                  title="<%= p.label %>"
+                  id="preset-<%= pid %>"
+                  style="width:40px;height:40px;border-radius:50%;background:rgb(<%= p.r %>,<%= p.g %>,<%= p.b %>);cursor:pointer;transition:all .15s;border:3px solid <%= settings.themeId===pid ? '#fff' : 'transparent' %>;box-shadow:<%= settings.themeId===pid ? '0 0 0 3px rgb('+p.r+','+p.g+','+p.b+')' : 'none' %>;"
+                ></div>
+                <% }) %>
+              </div>
+            </div>
+
+            <!-- Custom RGB -->
+            <div style="margin-bottom:16px;">
+              <div style="font-size:11px;font-weight:500;color:var(--text3);margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px;">Custom Accent Color</div>
+              <div style="display:flex;align-items:center;gap:16px;flex-wrap:wrap;">
+                <input type="color" id="accent-hex"
+                  value="<%= '#' + [settings.accentR||99, settings.accentG||102, settings.accentB||241].map(v=>Number(v).toString(16).padStart(2,'0')).join('') %>"
+                  style="width:48px;height:48px;border:none;background:none;cursor:pointer;border-radius:10px;padding:2px;"
+                  oninput="hexToSliders(this.value)"/>
+                <div style="flex:1;min-width:220px;display:flex;flex-direction:column;gap:8px;">
+                  <div style="display:flex;align-items:center;gap:8px;">
+                    <span style="font-size:10px;color:var(--text3);width:12px;">R</span>
+                    <input type="range" id="slider-r" min="0" max="255" value="<%= settings.accentR||99 %>" style="flex:1;" oninput="updatePreview()"/>
+                    <span id="r-val" style="font-size:11px;font-family:monospace;width:26px;text-align:right;"><%= settings.accentR||99 %></span>
+                  </div>
+                  <div style="display:flex;align-items:center;gap:8px;">
+                    <span style="font-size:10px;color:var(--text3);width:12px;">G</span>
+                    <input type="range" id="slider-g" min="0" max="255" value="<%= settings.accentG||102 %>" style="flex:1;" oninput="updatePreview()"/>
+                    <span id="g-val" style="font-size:11px;font-family:monospace;width:26px;text-align:right;"><%= settings.accentG||102 %></span>
+                  </div>
+                  <div style="display:flex;align-items:center;gap:8px;">
+                    <span style="font-size:10px;color:var(--text3);width:12px;">B</span>
+                    <input type="range" id="slider-b" min="0" max="255" value="<%= settings.accentB||241 %>" style="flex:1;" oninput="updatePreview()"/>
+                    <span id="b-val" style="font-size:11px;font-family:monospace;width:26px;text-align:right;"><%= settings.accentB||241 %></span>
+                  </div>
+                </div>
+                <!-- Live preview swatch -->
+                <div id="theme-preview2"
+                  style="width:100px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#fff;background:rgb(<%= settings.accentR||99 %>,<%= settings.accentG||102 %>,<%= settings.accentB||241 %>);flex-shrink:0;">
+                  Preview
+                </div>
+              </div>
+            </div>
+
+            <!-- Light / Dark mode -->
+            <div style="display:flex;align-items:center;gap:20px;margin-bottom:16px;">
+              <span style="font-size:12px;font-weight:500;color:var(--text2);">Default Mode:</span>
+              <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;">
+                <input type="radio" name="themeMode2" value="dark"  <%= (settings.themeMode||'dark')==='dark' ?'checked':'' %> onchange="document.getElementById('theme-mode-val').value='dark'"/> Dark
+              </label>
+              <label style="display:flex;align-items:center;gap:6px;cursor:pointer;font-size:12px;">
+                <input type="radio" name="themeMode2" value="light" <%= settings.themeMode==='light'?'checked':'' %>  onchange="document.getElementById('theme-mode-val').value='light'"/> Light
+              </label>
+              <input type="hidden" id="theme-mode-val" value="<%= settings.themeMode||'dark' %>"/>
+            </div>
+
+            <div style="display:flex;gap:8px;align-items:center;">
+              <button class="btn btn-primary btn-sm" onclick="saveTheme()">Apply Theme for All Users</button>
+              <span style="font-size:11px;color:var(--text3);">Saved to settings.json — takes effect on next page load</span>
+            </div>
+          </div>
+
+          <!-- ═══════════════════════════════ HEALTH ALERTS ══ -->
+          <% if (isAdmin) { %>
+          <div class="card settings-section" id="health-alerts">
+            <div class="section-header">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
+              Server Health Alerts
+              <span style="font-size:11px;color:var(--text3);font-weight:400;">— fires Slack/Discord/email when thresholds exceeded</span>
+            </div>
+            <div style="font-size:12px;color:var(--text2);margin-bottom:14px;line-height:1.7;">
+              Alerts fire when the <strong>LogBoard server's own</strong> RAM, CPU, or disk exceeds the threshold. Uses a 15-minute cooldown to avoid spam.
+              Per-service alerts are configured in <a href="/alerts" style="color:var(--accent-l);">Alert Rules</a>.
+            </div>
+            <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:14px;">
+              <div class="form-group" style="margin:0">
+                <label class="form-label">RAM Threshold (%)</label>
+                <input type="number" id="alert-ram"  class="form-input" value="<%= settings.alertRamPct  || 85 %>" min="10" max="99"/>
+              </div>
+              <div class="form-group" style="margin:0">
+                <label class="form-label">CPU Threshold (%)</label>
+                <input type="number" id="alert-cpu"  class="form-input" value="<%= settings.alertCpuPct  || 90 %>" min="10" max="99"/>
+              </div>
+              <div class="form-group" style="margin:0">
+                <label class="form-label">Disk Threshold (%)</label>
+                <input type="number" id="alert-disk" class="form-input" value="<%= settings.alertDiskPct || 90 %>" min="10" max="99"/>
+              </div>
+            </div>
+            <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
+              <label class="toggle"><input type="checkbox" id="alerts-enabled" <%= settings.alertsEnabled!==false?'checked':'' %>/><span class="toggle-slider"></span></label>
+              <span style="font-size:12px;color:var(--text2);">Enable health alerts</span>
+              <button class="btn btn-primary btn-sm" style="margin-left:auto;" onclick="saveHealthAlerts()">Save Thresholds</button>
+              <button class="btn btn-secondary btn-sm" onclick="testWebhook()">Test Slack</button>
+            </div>
+          </div>
+          <% } %>
+
+          <!-- ═══════════════════════════════ EMAIL & REPORTS ══ -->
+          <% if (isAdmin) { %>
+          <div class="card settings-section" id="email-settings">
+            <div class="section-header">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
+              Email Alerts &amp; Scheduled Reports
+            </div>
+            <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;">
+              <div class="form-group" style="margin:0"><label class="form-label">SMTP Host</label><input type="text"  id="smtp-host"    class="form-input" value="<%= settings.smtpHost||'' %>"     placeholder="smtp.gmail.com"/></div>
+              <div class="form-group" style="margin:0"><label class="form-label">SMTP Port</label><input type="number" id="smtp-port"   class="form-input" value="<%= settings.smtpPort||587 %>"   placeholder="587"/></div>
+              <div class="form-group" style="margin:0"><label class="form-label">SMTP Username</label><input type="text" id="smtp-user" class="form-input" value="<%= settings.smtpUser||'' %>"   placeholder="user@gmail.com"/></div>
+              <div class="form-group" style="margin:0"><label class="form-label">SMTP Password</label><input type="password" id="smtp-pass" class="form-input" placeholder="App password"/></div>
+              <div class="form-group" style="margin:0"><label class="form-label">From Address</label><input type="email" id="smtp-from"   class="form-input" value="<%= settings.smtpFrom||'' %>"   placeholder="logboard@example.com"/></div>
+              <div class="form-group" style="margin:0"><label class="form-label">Report Recipient</label><input type="email" id="report-email" class="form-input" value="<%= settings.reportEmail||'' %>" placeholder="team@company.com"/></div>
+            </div>
+            <div style="display:flex;align-items:center;gap:16px;margin-bottom:12px;flex-wrap:wrap;">
+              <label style="display:flex;align-items:center;gap:8px;font-size:12px;cursor:pointer;"><input type="checkbox" id="email-enabled" <%= settings.emailEnabled?'checked':'' %>/> Enable email alerts on rules</label>
+              <label style="display:flex;align-items:center;gap:8px;font-size:12px;cursor:pointer;"><input type="checkbox" id="report-enabled" <%= settings.reportEnabled?'checked':'' %>/> Enable scheduled reports</label>
+              <select id="report-schedule" class="form-select" style="width:110px;">
+                <option value="daily"  <%= settings.reportSchedule==='daily' ?'selected':'' %>>Daily</option>
+                <option value="weekly" <%= settings.reportSchedule==='weekly'?'selected':'' %>>Weekly (Mon)</option>
+              </select>
+            </div>
+            <div style="display:flex;gap:8px;">
+              <button class="btn btn-primary btn-sm" onclick="saveEmailSettings()">Save Email Settings</button>
+              <button class="btn btn-secondary btn-sm" onclick="testEmailNow()">Send Test Report Now</button>
+            <% if(settings.lastReportAt){ %>
+            <span style="font-size:11px;color:var(--green);margin-left:8px;">✓ Last sent: <%=new Date(settings.lastReportAt).toLocaleString()%></span>
+            <% } else { %>
+            <span style="font-size:11px;color:var(--text3);margin-left:8px;">Not sent yet</span>
+            <% } %>
+            </div>
+          </div>
+          <% } %>
+
+          <!-- ═══════════════════════════════ INTEGRATIONS (Discord & PagerDuty) ══ -->
+          <% if (isAdmin) { %>
+          <div class="card settings-section" id="integrations-section">
+            <div class="section-header">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
+              Integrations — Discord &amp; PagerDuty
+            </div>
+            <div style="display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:12px;">
+              <div class="form-group" style="margin:0">
+                <label class="form-label">Discord Webhook URL <span style="color:var(--text3);font-weight:400">(global — override per alert rule)</span></label>
+                <input type="url" id="discord-url" class="form-input" value="<%= settings.discordUrl||'' %>" placeholder="https://discord.com/api/webhooks/…"/>
+              </div>
+              <div class="form-group" style="margin:0">
+                <label class="form-label">PagerDuty Routing Key <span style="color:var(--text3);font-weight:400">(Events API v2)</span></label>
+                <input type="text" id="pd-key" class="form-input" value="<%= settings.pagerdutyKey||'' %>" placeholder="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"/>
+              </div>
+            </div>
+            <div style="display:flex;align-items:center;gap:16px;margin-bottom:12px;">
+              <label style="display:flex;align-items:center;gap:8px;font-size:12px;cursor:pointer;"><input type="checkbox" id="pd-enabled" <%= settings.pagerdutyEnabled?'checked':'' %>/> Enable PagerDuty alerts</label>
+            </div>
+            <div style="display:flex;gap:8px;">
+              <button class="btn btn-primary btn-sm" onclick="saveIntegrations()">Save</button>
+              <button class="btn btn-secondary btn-sm" onclick="testWebhook()">Test Slack Webhook</button>
+              <button class="btn btn-secondary btn-sm" onclick="testDiscord()">Test Discord</button>
+            </div>
+          </div>
+          <% } %>
+
+        </div><!-- end settings-content -->
+      </div><!-- end settings-layout -->
+    </div><!-- end page-content -->
+  </div><!-- end main-area -->
+</div><!-- end app-shell -->
+
+<!-- 2FA Modal -->
+<div id="twofa-modal" class="modal-overlay">
+  <div class="modal-box">
+    <div class="modal-title">Enable Two-Factor Authentication</div>
+    <div class="modal-sub">Scan the QR code with Google Authenticator or similar app.</div>
+    <div id="modal-loading" style="text-align:center;padding:20px;">Loading QR…</div>
+    <div id="modal-content" style="display:none;">
+      <div class="qr-wrap"><img id="qr-img" alt="QR code" style="width:180px;height:180px;"></div>
+      <div>Secret (backup):</div>
+      <div class="copy-row" style="margin:8px 0 12px;">
+        <input type="text" id="totp-secret-display" class="form-input" readonly>
+        <button class="btn btn-secondary btn-sm" onclick="copySecret()">Copy</button>
+      </div>
+      <div>Enter code:</div>
+      <input type="text" id="totp-verify-input" class="form-input" placeholder="6-digit code" maxlength="6" style="margin:6px 0 12px;">
+      <div id="modal-error" style="color:var(--red);font-size:12px;margin-bottom:12px;display:none;"></div>
+      <div style="display:flex;gap:8px;justify-content:flex-end;">
+        <button class="btn btn-secondary btn-sm" onclick="close2faModal()">Cancel</button>
+        <button class="btn btn-primary btn-sm" id="modal-confirm-btn" onclick="verifyAndEnable2fa()">Enable</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+// Duplicate theme preview functions for second appearance (to avoid conflicts)
+
+
+function applyPreset(id,r,g,b,mode){
+  document.getElementById('slider-r').value=r;
+  document.getElementById('slider-g').value=g;
+  document.getElementById('slider-b').value=b;
+  document.getElementById('theme-mode-val').value=mode;
+  document.querySelectorAll('input[name="themeMode"]').forEach(el => { el.checked=(el.value===mode); });
+  document.querySelectorAll('[id^="preset-"]').forEach(el => { el.style.border='2px solid transparent';el.style.boxShadow='none';el.dataset.selected='0'; });
+  const el=document.getElementById('preset-'+id);
+  if(el){el.style.border='2px solid #fff';el.style.boxShadow='0 0 0 2px var(--accent)';el.dataset.selected='1';}
+  updatePreview();
+  // Also update second section
+  document.getElementById('slider-r').value=r;
+  document.getElementById('slider-g').value=g;
+  document.getElementById('slider-b').value=b;
+  document.getElementById('theme-mode-val').value=mode;
+  document.querySelectorAll('input[name="themeMode2"]').forEach(el => { el.checked=(el.value===mode); });
+  document.querySelectorAll('[id^="preset-"]').forEach(el => { el.style.border='3px solid transparent';el.style.boxShadow='none';el.dataset.selected2='0'; });
+  const el2=document.getElementById('preset-'+id);
+  if(el2){el2.style.border='3px solid #fff';el2.style.boxShadow='0 0 0 3px rgb('+r+','+g+','+b+')';el2.dataset.selected2='1';}
+  updatePreview();
+}
+
+
+// ── Theme Picker (first) ──────────────────────────────────────────────────────────────
+function updatePreview() {
+  const r=+document.getElementById('slider-r').value;
+  const g=+document.getElementById('slider-g').value;
+  const b=+document.getElementById('slider-b').value;
+  document.getElementById('r-val').textContent=r;
+  document.getElementById('g-val').textContent=g;
+  document.getElementById('b-val').textContent=b;
+  const hex='#'+[r,g,b].map(v=>v.toString(16).padStart(2,'0')).join('');
+  document.getElementById('accent-hex').value=hex;
+  document.getElementById('theme-preview').style.background='rgb('+r+','+g+','+b+')';
+  // Live CSS preview — immediate apply
+  const lr=Math.min(255,r+55),lg=Math.min(255,g+55),lb=Math.min(255,b+55);
+  const root=document.documentElement;
+  root.style.setProperty('--accent',     'rgb('+r+','+g+','+b+')');
+  root.style.setProperty('--accent-l',   'rgb('+lr+','+lg+','+lb+')');
+  root.style.setProperty('--accent-dim', 'rgba('+r+','+g+','+b+',.15)');
+}
+function hexToSliders(hex){
+  if(!/^#[0-9a-f]{6}$/i.test(hex)) return;
+  const r=parseInt(hex.slice(1,3),16),g=parseInt(hex.slice(3,5),16),b=parseInt(hex.slice(5,7),16);
+  document.getElementById('slider-r').value=r;
+  document.getElementById('slider-g').value=g;
+  document.getElementById('slider-b').value=b;
+  updatePreview();
+}
+async function saveTheme(){
+  const r = +document.getElementById('slider-r').value;
+  const g = +document.getElementById('slider-g').value;
+  const b = +document.getElementById('slider-b').value;
+  const mode = document.getElementById('theme-mode-val').value;
+  // Get current themeId from selected preset (or 'custom')
+  const selectedPreset = document.querySelector('[id^="preset-"][data-selected="1"]');
+  const themeId = selectedPreset ? selectedPreset.id.replace('preset-','') : 'custom';
+  try {
+    const res = await fetch('/api/settings', {
+      method: 'POST',
+      headers: {'Content-Type':'application/json'},
+      body: JSON.stringify({ accentR:r, accentG:g, accentB:b, themeMode:mode, themeId })
+    });
+    const d = await res.json();
+    if (!res.ok) { toast(d.error||'Save failed','error'); return; }
+    toast('Theme saved! Reloading…','success');
+    // Apply locally immediately before reload
+    document.documentElement.setAttribute('data-theme', mode);
+    localStorage.setItem('theme', mode);
+    // Apply CSS vars immediately
+    const lr=Math.min(255,r+55), lg=Math.min(255,g+55), lb=Math.min(255,b+55);
+    document.documentElement.style.setProperty('--accent',    `rgb(${r},${g},${b})`);
+    document.documentElement.style.setProperty('--accent-l',  `rgb(${lr},${lg},${lb})`);
+    document.documentElement.style.setProperty('--accent-dim',`rgba(${r},${g},${b},.15)`);
+    setTimeout(() => location.reload(), 800);
+  } catch(e) { toast('Network error','error'); }
+}
+
+// ── Nav highlight on scroll ────────────────────────────────────────────
+function navClick(el) {
+  document.querySelectorAll('.settings-nav-item').forEach(i => i.classList.remove('active'));
+  el.classList.add('active');
+}
+
+const sections = document.querySelectorAll('.settings-section');
+const navItems  = document.querySelectorAll('.settings-nav-item');
+window.addEventListener('scroll', () => {
+  let current = '';
+  sections.forEach(s => { if (window.scrollY >= s.offsetTop - 80) current = s.id; });
+  navItems.forEach(n => {
+    n.classList.toggle('active', n.getAttribute('href') === '#' + current);
+  });
+}, { passive: true });
+
+// ── Password strength ──────────────────────────────────────────────────
+function updateStrength(v) {
+  const fill  = document.getElementById('strength-fill');
+  const label = document.getElementById('strength-label');
+  if (!v) { fill.style.width='0'; label.textContent=''; return; }
+  let score = 0;
+  if (v.length >= 8)  score++;
+  if (v.length >= 12) score++;
+  if (/[A-Z]/.test(v) && /[a-z]/.test(v)) score++;
+  if (/[0-9]/.test(v)) score++;
+  if (/[^A-Za-z0-9]/.test(v)) score++;
+  const levels = [
+    { w:'20%', c:'var(--red)',    t:'Very weak'  },
+    { w:'40%', c:'#f97316',      t:'Weak'        },
+    { w:'60%', c:'var(--yellow)',t:'Fair'        },
+    { w:'80%', c:'#84cc16',      t:'Strong'      },
+    { w:'100%',c:'var(--green)', t:'Very strong' },
+  ];
+  const l = levels[Math.min(score, 4)];
+  fill.style.width = l.w;
+  fill.style.background = l.c;
+  label.textContent = l.t;
+  label.style.color = l.c;
+}
+
+// ── Change password ────────────────────────────────────────────────────
+async function changePassword() {
+  const current = document.getElementById('pw-current').value.trim();
+  const next    = document.getElementById('pw-new').value;
+  const confirm = document.getElementById('pw-confirm').value;
+  if (!current || !next) return toast('All fields required', 'error');
+  if (next.length < 8)   return toast('New password must be ≥8 characters', 'error');
+  if (next !== confirm)  return toast('Passwords do not match', 'error');
+  const btn = document.getElementById('pw-btn');
+  btn.disabled = true; btn.textContent = 'Saving…';
+  try {
+    const r = await fetch('/api/auth/change-password', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ currentPassword: current, newPassword: next }),
+    });
+    const d = await r.json();
+    if (!r.ok) throw new Error(d.error);
+    toast('Password updated successfully', 'success');
+    document.getElementById('pw-current').value = '';
+    document.getElementById('pw-new').value = '';
+    document.getElementById('pw-confirm').value = '';
+    document.getElementById('strength-fill').style.width = '0';
+    document.getElementById('strength-label').textContent = '';
+  } catch (e) { toast(e.message, 'error'); }
+  finally { btn.disabled = false; btn.innerHTML = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17,21 17,13 7,13 7,21"/><polyline points="7,3 7,8 15,8"/></svg> Update Password'; }
+}
+
+// ── 2FA ────────────────────────────────────────────────────────────────
+let _totpSecret = '';
+
+async function open2faModal() {
+  document.getElementById('twofa-modal').classList.add('open');
+  document.getElementById('modal-loading').style.display = '';
+  document.getElementById('modal-content').style.display = 'none';
+  document.getElementById('modal-error').style.display = 'none';
+  document.getElementById('totp-verify-input').value = '';
+  try {
+    const r = await fetch('/api/auth/2fa/setup');
+    const d = await r.json();
+    if (!r.ok) throw new Error(d.error);
+    _totpSecret = d.secret;
+    document.getElementById('qr-img').src = d.qr;
+    document.getElementById('totp-secret-display').value = d.secret;
+    document.getElementById('modal-loading').style.display = 'none';
+    document.getElementById('modal-content').style.display = '';
+  } catch (e) {
+    document.getElementById('modal-loading').textContent = 'Error: ' + e.message;
+  }
+}
+
+function close2faModal() {
+  document.getElementById('twofa-modal').classList.remove('open');
+}
+
+function copySecret() {
+  navigator.clipboard.writeText(_totpSecret).then(() => toast('Secret copied!', 'success'));
+}
+
+async function verifyAndEnable2fa() {
+  const token = document.getElementById('totp-verify-input').value.trim();
+  if (token.length !== 6) return;
+  const btn = document.getElementById('modal-confirm-btn');
+  btn.disabled = true;
+  const errEl = document.getElementById('modal-error');
+  errEl.style.display = 'none';
+  try {
+    const r = await fetch('/api/auth/2fa/enable', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ secret: _totpSecret, token }),
+    });
+    const d = await r.json();
+    if (!r.ok) throw new Error(d.error);
+    close2faModal();
+    toast('Two-factor authentication enabled!', 'success');
+    // Update UI
+    document.getElementById('totp-dot').className = 'dot dot-green dot-pulse';
+    document.getElementById('totp-status-text').textContent = 'Enabled';
+    document.getElementById('totp-badge').className = 'badge badge-green';
+    document.getElementById('totp-badge').textContent = 'active';
+    document.getElementById('totp-actions').innerHTML = `
+      <button class="btn btn-danger btn-sm" onclick="disable2fa()">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
+        Disable 2FA
+      </button>`;
+  } catch (e) {
+    errEl.textContent = e.message;
+    errEl.style.display = '';
+  }
+  finally { btn.disabled = false; }
+}
+
+async function disable2fa() {
+  if (!confirm('Disable two-factor authentication? Your account will be less secure.')) return;
+  try {
+    const r = await fetch('/api/auth/2fa/disable', { method: 'POST' });
+    const d = await r.json();
+    if (!r.ok) throw new Error(d.error);
+    toast('Two-factor authentication disabled', 'info');
+    document.getElementById('totp-dot').className = 'dot dot-gray';
+    document.getElementById('totp-status-text').textContent = 'Disabled';
+    document.getElementById('totp-badge').className = 'badge badge-debug';
+    document.getElementById('totp-badge').textContent = 'off';
+    document.getElementById('totp-actions').innerHTML = `
+      <button class="btn btn-primary btn-sm" onclick="open2faModal()">
+        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+        Enable 2FA
+      </button>`;
+  } catch (e) { toast(e.message, 'error'); }
+}
+
+// ── Retention ──────────────────────────────────────────────────────────
+function syncRetentionSlider(v) {
+  const n = parseInt(v, 10);
+  if (!isNaN(n) && n >= 1 && n <= 90) {
+    document.getElementById('retention-range').value = n;
+    document.getElementById('retention-val').textContent = n + ' days';
+  }
+}
+
+async function saveRetention() {
+  const val = parseInt(document.getElementById('retention-num').value, 10);
+  if (isNaN(val) || val < 1 || val > 365) return toast('Enter 1–365 days', 'error');
+  try {
+    const r = await fetch('/api/settings', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ retentionDays: val }),
+    });
+    const d = await r.json();
+    if (!r.ok) throw new Error(d.error);
+    toast(`Retention set to ${val} days`, 'success');
+  } catch (e) { toast(e.message, 'error'); }
+}
+
+async function runCleanup() {
+  const btn = document.getElementById('cleanup-btn');
+  btn.disabled = true; btn.textContent = 'Running…';
+  try {
+    const r = await fetch('/api/settings/cleanup', { method: 'POST' });
+    const d = await r.json();
+    if (!r.ok) throw new Error(d.error);
+    toast('Cleanup complete — old log files deleted', 'success');
+  } catch (e) { toast(e.message, 'error'); }
+  finally { btn.disabled = false; btn.innerHTML = '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3,6 5,6 21,6"/><path d="M19 6l-1 14H6L5 6"/></svg> Run Cleanup Now'; }
+}
+
+// ── Webhook ────────────────────────────────────────────────────────────
+async function saveWebhook() {
+  const url = document.getElementById('webhook-url').value.trim();
+  try {
+    const r = await fetch('/api/settings', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ webhookUrl: url }),
+    });
+    const d = await r.json();
+    if (!r.ok) throw new Error(d.error);
+    const dot  = document.getElementById('webhook-dot');
+    const text = document.getElementById('webhook-status-text');
+    if (url) {
+      dot.className = 'dot dot-green';
+      text.textContent = 'Webhook active — alerts are firing';
+    } else {
+      dot.className = 'dot dot-gray';
+      text.textContent = 'No webhook configured — alerts are off';
+    }
+    toast('Webhook ' + (url ? 'saved' : 'cleared'), 'success');
+  } catch (e) { toast(e.message, 'error'); }
+}
+
+// ── Stream toggle ──────────────────────────────────────────────────────
+async function saveStream(enabled) {
+  try {
+    const r = await fetch('/api/settings', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ enableStream: enabled }),
+    });
+    const d = await r.json();
+    if (!r.ok) throw new Error(d.error);
+    toast('Stream ' + (enabled ? 'enabled' : 'disabled'), 'success');
+  } catch (e) {
+    toast(e.message, 'error');
+    document.getElementById('stream-toggle').checked = !enabled;
+  }
+}
+
+// ── API Key ────────────────────────────────────────────────────────────
+function toggleApiKey() {
+  const inp = document.getElementById('apikey-input');
+  if (inp.type === 'password') {
+    inp.type = 'text';
+    inp.value = '(stored in .env — not exposed via API)';
+  } else {
+    inp.type = 'password';
+    inp.value = 'api-key-stored-in-env';
+  }
+}
+
+function copyApiKey() {
+  navigator.clipboard.writeText(document.getElementById('apikey-input').value)
+    .then(() => toast('API key copied', 'success'));
+}
+
+// ── Close modal on overlay click ───────────────────────────────────────
+document.getElementById('twofa-modal').addEventListener('click', function(e) {
+  if (e.target === this) close2faModal();
+});
+
+// ── Keyboard shortcut ESC for modal ───────────────────────────────────
+document.addEventListener('keydown', e => {
+  if (e.key === 'Escape') close2faModal();
+});
+
+// Additional admin functions (IP whitelist, branding, health alerts, etc.)
+async function saveIPWhitelist() {
+  const raw = document.getElementById('ip-whitelist')?.value || '';
+  const ipWhitelist = raw.split('\n').map(s=>s.trim()).filter(Boolean);
+  try {
+    const r = await fetch('/api/settings', { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({ipWhitelist}) });
+    const d = await r.json();
+    if (!r.ok) throw new Error(d.error);
+    toast('IP whitelist saved', 'success');
+  } catch(e) { toast(e.message, 'error'); }
+}
+
+async function saveBranding() {
+  const appName    = document.getElementById('brand-name').value.trim();
+  const appLogoUrl = document.getElementById('brand-logo').value.trim() || '/public/logo.png';
+  const faviconUrl = document.getElementById('brand-favicon').value.trim();
+  try {
+    const r = await fetch('/api/settings', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ appName, appLogoUrl, faviconUrl })
+    });
+    const d = await r.json();
+    if (!r.ok) { toast(d.error || 'Save failed', 'error'); return; }
+    toast('Branding saved! Reloading…', 'success');
+    setTimeout(() => location.reload(), 800);
+  } catch(e) { toast('Network error', 'error'); }
+}
+
+function previewFavicon(url) {
+  const img = document.getElementById('favicon-preview');
+  if (!img) return;
+  if (!url) { img.style.display = 'none'; return; }
+  img.src = url;
+  img.style.display = '';
+  img.onerror = function() { this.style.display = 'none'; };
+}
+
+async function saveHealthAlerts() {
+  const alertRamPct  = Number(document.getElementById('alert-ram').value);
+  const alertCpuPct  = Number(document.getElementById('alert-cpu').value);
+  const alertDiskPct = Number(document.getElementById('alert-disk').value);
+  const alertsEnabled = document.getElementById('alerts-enabled').checked;
+  try {
+    const r = await fetch('/api/settings', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ alertRamPct, alertCpuPct, alertDiskPct, alertsEnabled }) });
+    const d = await r.json();
+    if (!r.ok) { toast(d.error || 'Save failed', 'error'); return; }
+    toast('Health alert thresholds saved', 'success');
+  } catch(e) { toast('Network error', 'error'); }
+}
+
+async function testWebhook() {
+  const url = document.getElementById('webhook-url')?.value?.trim();
+  if (!url) { toast('Enter a webhook URL first', 'error'); return; }
+  try {
+    const r = await fetch('/api/settings/test-webhook', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ webhookUrl: url }) });
+    const d = await r.json();
+    if (!r.ok) { toast(d.error || 'Test failed', 'error'); return; }
+    toast('Test message sent to webhook!', 'success');
+  } catch(e) { toast('Network error', 'error'); }
+}
+
+async function saveEmailSettings(){
+  const body={
+    smtpHost:    document.getElementById('smtp-host').value.trim(),
+    smtpPort:    Number(document.getElementById('smtp-port').value)||587,
+    smtpUser:    document.getElementById('smtp-user').value.trim(),
+    smtpFrom:    document.getElementById('smtp-from').value.trim(),
+    reportEmail: document.getElementById('report-email').value.trim(),
+    emailEnabled:  document.getElementById('email-enabled').checked,
+    reportEnabled: document.getElementById('report-enabled').checked,
+    reportSchedule:document.getElementById('report-schedule').value,
+  };
+  const smtpPass=document.getElementById('smtp-pass').value;
+  if(smtpPass) body.smtpPass=smtpPass;
+  try{const r=await fetch('/api/settings',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});const d=await r.json();if(!r.ok){toast(d.error||'Save failed','error');return;}toast('Email settings saved','success');}catch(e){toast('Network error','error');}
+}
+async function testEmailNow(){
+  try{const r=await fetch('/api/settings/send-report',{method:'POST'});const d=await r.json();if(!r.ok){toast(d.error||'Failed','error');return;}toast('Test report queued','success');}catch(e){toast('Network error','error');}
+}
+async function saveIntegrations(){
+  const body={
+    discordUrl:       document.getElementById('discord-url').value.trim(),
+    pagerdutyKey:     document.getElementById('pd-key').value.trim(),
+    pagerdutyEnabled: document.getElementById('pd-enabled').checked,
+  };
+  try{const r=await fetch('/api/settings',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});const d=await r.json();if(!r.ok){toast(d.error||'Save failed','error');return;}toast('Integrations saved','success');}catch(e){toast('Network error','error');}
+}
+async function testDiscord(){
+  const url=document.getElementById('discord-url').value.trim();
+  if(!url){toast('Enter a Discord webhook URL first','error');return;}
+  try{
+    const r=await fetch(url,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({username:'LogBoard',embeds:[{title:'✅ LogBoard Test',description:'Discord webhook is working!',color:0x22c55e}]})});
+    toast(r.ok?'Test message sent to Discord!':'Discord returned '+r.status,r.ok?'success':'error');
+  }catch(e){toast('Request failed: '+e.message,'error');}
+}
+
+// Toast helper (simple)
+function toast(msg, type = 'info') {
+  const toastDiv = document.createElement('div');
+  toastDiv.className = `toast toast-${type}`;
+  toastDiv.textContent = msg;
+  toastDiv.style.position = 'fixed';
+  toastDiv.style.bottom = '20px';
+  toastDiv.style.right = '20px';
+  toastDiv.style.zIndex = '9999';
+  toastDiv.style.backgroundColor = type === 'error' ? '#ef4444' : (type === 'success' ? '#22c55e' : '#3b82f6');
+  toastDiv.style.color = 'white';
+  toastDiv.style.padding = '10px 20px';
+  toastDiv.style.borderRadius = '8px';
+  toastDiv.style.fontSize = '13px';
+  toastDiv.style.fontWeight = '500';
+  toastDiv.style.boxShadow = '0 4px 12px rgba(0,0,0,0.2)';
+  document.body.appendChild(toastDiv);
+  setTimeout(() => toastDiv.remove(), 3000);
+}
+
+function doLogout() {
+  fetch('/api/auth/logout', { method: 'POST' }).then(() => window.location.href = '/login');
+}
+</script>
+</body>
+</html>