internal/web/templates/admin.html

@@ -103,7 +103,9 @@
     });
   });
 
-  if (key()) loadSettings();
+  // #112: always show the lock on fresh load — do not auto-restore the
+  // panel from a stale sessionStorage key. The key is only written after a
+  // successful unlock (above) so in-page actions still work within this visit.
 })();
 </script>
 {{template "foot" .}}

internal/web/templates/settings.html

@@ -8,23 +8,37 @@
     <div class="settings-body">
       <h3>Theme</h3>
       <div class="theme-grid" id="theme-grid"></div>
-      <p class="hint" style="margin-top:10px">Applies instantly and is saved in this browser.</p>
       <p class="admin-link-row"><a class="admin-link" href="/admin">Admin</a></p>
     </div>
   </div>
 </div>
 <script>
 (function () {
-  var themes = [
+  // #112: derive each preset's swatches from the real CSS variables in
-    { id: 'midnight',        name: 'Midnight',        colors: ['#241B30', '#2D2340', '#3A2D52', '#7A6A9E', '#C4A8F0'] },
+  // app.css by temporarily applying data-preset, so they can never drift.
-    { id: 'smooth',          name: 'Smooth',          colors: ['#F6F5FA', '#DAD7E6', '#B5B1C9', '#7A7796', '#2A2A36'] },
+  var themeNames = [
-    { id: 'pastel-lavender', name: 'Pastel Lavender', colors: ['#e6e0f5', '#cbb8e7', '#b29edb', '#9b85cf', '#806bb8'] },
+    { id: 'midnight',        name: 'Midnight' },
-    { id: 'pastel-peach',    name: 'Pastel Peach',    colors: ['#ffe0d6', '#ffc4a8', '#ffa78f', '#ff8b76', '#f9826c'] },
+    { id: 'smooth',          name: 'Smooth' },
-    { id: 'pastel-cloud',    name: 'Pastel Cloud',    colors: ['#cdb4db', '#ffc8dd', '#ffafcc', '#bde0fe', '#a2d2ff'] }
+    { id: 'pastel-lavender', name: 'Pastel Lavender' },
+    { id: 'pastel-peach',    name: 'Pastel Peach' },
+    { id: 'pastel-cloud',    name: 'Pastel Cloud' }
   ];
+  var SWATCH_VARS = ['--bg', '--surface', '--surface-2', '--muted', '--accent'];
+
+  function presetColors(id) {
+    var root = document.documentElement;
+    var prev = root.getAttribute('data-preset');
+    root.setAttribute('data-preset', id);
+    var cs = getComputedStyle(root);
+    var colors = SWATCH_VARS.map(function (v) { return cs.getPropertyValue(v).trim(); });
+    if (prev === null) root.removeAttribute('data-preset'); else root.setAttribute('data-preset', prev);
+    return colors;
+  }
+
   var grid = document.getElementById('theme-grid');
   var current = document.documentElement.dataset.preset || 'midnight';
-  themes.forEach(function (t) {
+  themeNames.forEach(function (t) {
+    var colors = presetColors(t.id);
     var btn = document.createElement('button');
     btn.type = 'button';
     btn.className = 'theme-card';